mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-30 15:46:19 +00:00
🎨 优化图片命名, 删除冗余代码
This commit is contained in:
xujiang
parent
30d52c4944
commit
9b21cca2eb
BIN
src/.DS_Store
vendored
BIN
src/.DS_Store
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@ -1,9 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import { IButtonConfig } from './schema';
|
|
||||||
import { Button } from 'antd';
|
|
||||||
const button = memo((props: IButtonConfig) => {
|
|
||||||
const { text, type } = props;
|
|
||||||
return <Button type={type}>{text}</Button>;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default button;
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISelectConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSelectDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TButtonSelectKeyType = 'left' | 'center' | 'right';
|
|
||||||
|
|
||||||
export type TButtonEditData = Array<
|
|
||||||
IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TButtonSelectKeyType>
|
|
||||||
>;
|
|
||||||
export interface IButtonConfig {
|
|
||||||
bgColor: TColorDefaultType;
|
|
||||||
text: TTextDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
align: TSelectDefaultType<TButtonSelectKeyType>;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
height: TNumberDefaultType;
|
|
||||||
type: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IButtonSchema {
|
|
||||||
editData: TButtonEditData;
|
|
||||||
config: IButtonConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Button: IButtonSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'bgColor',
|
|
||||||
name: '背景色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'height',
|
|
||||||
name: '高度',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'text',
|
|
||||||
name: '文字',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '字体大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '文字颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'align',
|
|
||||||
name: '对齐方式',
|
|
||||||
type: 'Select',
|
|
||||||
range: [
|
|
||||||
{
|
|
||||||
key: 'left',
|
|
||||||
text: '左对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'center',
|
|
||||||
text: '居中对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'right',
|
|
||||||
text: '右对齐',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
bgColor: 'rgba(0,0,0,1)',
|
|
||||||
text: '按钮 button 按钮 button 按钮 button',
|
|
||||||
color: 'rgba(255,255,255,1)',
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 16,
|
|
||||||
height: 48,
|
|
||||||
type: 'primary',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default Button;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Button',
|
|
||||||
h: 24,
|
|
||||||
x: 12,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import { IFooterConfig } from './schema';
|
|
||||||
const Footer = memo((props: IFooterConfig) => {
|
|
||||||
const { bgColor, text, color, align, fontSize, height } = props;
|
|
||||||
return (
|
|
||||||
<footer
|
|
||||||
style={{
|
|
||||||
backgroundColor: bgColor,
|
|
||||||
color,
|
|
||||||
fontSize,
|
|
||||||
textAlign: align,
|
|
||||||
height,
|
|
||||||
lineHeight: height + 'px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISelectConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSelectDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TfooterSelectKeyType = 'left' | 'center' | 'right';
|
|
||||||
|
|
||||||
export type TFooterEditData = Array<
|
|
||||||
IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TfooterSelectKeyType>
|
|
||||||
>;
|
|
||||||
export interface IFooterConfig {
|
|
||||||
bgColor: TColorDefaultType;
|
|
||||||
text: TTextDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
align: TSelectDefaultType<TfooterSelectKeyType>;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
height: TNumberDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IFooterSchema {
|
|
||||||
editData: TFooterEditData;
|
|
||||||
config: IFooterConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Footer: IFooterSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'bgColor',
|
|
||||||
name: '背景色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'height',
|
|
||||||
name: '高度',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'text',
|
|
||||||
name: '文字',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '字体大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '文字颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'align',
|
|
||||||
name: '对齐方式',
|
|
||||||
type: 'Select',
|
|
||||||
range: [
|
|
||||||
{
|
|
||||||
key: 'left',
|
|
||||||
text: '左对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'center',
|
|
||||||
text: '居中对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'right',
|
|
||||||
text: '右对齐',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
bgColor: 'rgba(0,0,0,1)',
|
|
||||||
text: '页脚Footer',
|
|
||||||
color: 'rgba(255,255,255,1)',
|
|
||||||
align: 'center',
|
|
||||||
fontSize: 16,
|
|
||||||
height: 48,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default Footer;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Footer',
|
|
||||||
h: 24,
|
|
||||||
x: 12,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
.header {
|
|
||||||
box-sizing: content-box;
|
|
||||||
padding: 3px 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #000;
|
|
||||||
.logo {
|
|
||||||
margin-right: 10px;
|
|
||||||
max-width: 160px;
|
|
||||||
max-height: 46px;
|
|
||||||
height: 46px;
|
|
||||||
overflow: hidden;
|
|
||||||
img {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
import { memo } from 'react';
|
|
||||||
import styles from './index.less';
|
|
||||||
import React from 'react';
|
|
||||||
import { IHeaderConfig } from './schema';
|
|
||||||
|
|
||||||
const Header = memo((props: IHeaderConfig) => {
|
|
||||||
const { bgColor, logo, logoText, fontSize, color } = props;
|
|
||||||
return (
|
|
||||||
<header className={styles.header} style={{ backgroundColor: bgColor }}>
|
|
||||||
<div className={styles.logo}>
|
|
||||||
<img src={logo && logo[0].url} alt={logoText} />
|
|
||||||
</div>
|
|
||||||
<div className={styles.title} style={{ fontSize, color }}>
|
|
||||||
{logoText}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
IUploadConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
TUploadDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type THeaderEditData = Array<
|
|
||||||
IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType
|
|
||||||
>;
|
|
||||||
export interface IHeaderConfig {
|
|
||||||
bgColor: TColorDefaultType;
|
|
||||||
logo: TUploadDefaultType;
|
|
||||||
logoText: TTextDefaultType;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
height: TNumberDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IHeaderSchema {
|
|
||||||
editData: THeaderEditData;
|
|
||||||
config: IHeaderConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Header: IHeaderSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'bgColor',
|
|
||||||
name: '背景色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'height',
|
|
||||||
name: '高度',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'logo',
|
|
||||||
name: 'logo',
|
|
||||||
type: 'Upload',
|
|
||||||
isCrop: true,
|
|
||||||
cropRate: 1000 / 618,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'logoText',
|
|
||||||
name: 'logo文字',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '文字颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '文字大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
bgColor: 'rgba(0,0,0,1)',
|
|
||||||
logo: [
|
|
||||||
{
|
|
||||||
uid: '001',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/3_1740be8a482.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
logoText: '页头Header',
|
|
||||||
fontSize: 20,
|
|
||||||
color: 'rgba(255,255,255,1)',
|
|
||||||
height: 50,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Header;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Header',
|
|
||||||
h: 28,
|
|
||||||
x: 12,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,364 +0,0 @@
|
|||||||
export type AntdIconType =
|
|
||||||
| 'max'
|
|
||||||
| 'required'
|
|
||||||
| 'default'
|
|
||||||
| 'high'
|
|
||||||
| 'low'
|
|
||||||
| 'disabled'
|
|
||||||
| 'start'
|
|
||||||
| 'open'
|
|
||||||
| 'media'
|
|
||||||
| 'hidden'
|
|
||||||
| 'cite'
|
|
||||||
| 'data'
|
|
||||||
| 'dir'
|
|
||||||
| 'form'
|
|
||||||
| 'label'
|
|
||||||
| 'slot'
|
|
||||||
| 'span'
|
|
||||||
| 'style'
|
|
||||||
| 'summary'
|
|
||||||
| 'title'
|
|
||||||
| 'pattern'
|
|
||||||
| 'async'
|
|
||||||
| 'defer'
|
|
||||||
| 'manifest'
|
|
||||||
| 'color'
|
|
||||||
| 'content'
|
|
||||||
| 'size'
|
|
||||||
| 'wrap'
|
|
||||||
| 'multiple'
|
|
||||||
| 'height'
|
|
||||||
| 'rotate'
|
|
||||||
| 'translate'
|
|
||||||
| 'width'
|
|
||||||
| 'prefix'
|
|
||||||
| 'src'
|
|
||||||
| 'children'
|
|
||||||
| 'key'
|
|
||||||
| 'list'
|
|
||||||
| 'step'
|
|
||||||
| 'aria-label'
|
|
||||||
| 'spin'
|
|
||||||
| 'accept'
|
|
||||||
| 'acceptCharset'
|
|
||||||
| 'action'
|
|
||||||
| 'allowFullScreen'
|
|
||||||
| 'allowTransparency'
|
|
||||||
| 'alt'
|
|
||||||
| 'as'
|
|
||||||
| 'autoComplete'
|
|
||||||
| 'autoFocus'
|
|
||||||
| 'autoPlay'
|
|
||||||
| 'capture'
|
|
||||||
| 'cellPadding'
|
|
||||||
| 'cellSpacing'
|
|
||||||
| 'charSet'
|
|
||||||
| 'challenge'
|
|
||||||
| 'checked'
|
|
||||||
| 'classID'
|
|
||||||
| 'cols'
|
|
||||||
| 'colSpan'
|
|
||||||
| 'controls'
|
|
||||||
| 'coords'
|
|
||||||
| 'crossOrigin'
|
|
||||||
| 'dateTime'
|
|
||||||
| 'download'
|
|
||||||
| 'encType'
|
|
||||||
| 'formAction'
|
|
||||||
| 'formEncType'
|
|
||||||
| 'formMethod'
|
|
||||||
| 'formNoValidate'
|
|
||||||
| 'formTarget'
|
|
||||||
| 'frameBorder'
|
|
||||||
| 'headers'
|
|
||||||
| 'href'
|
|
||||||
| 'hrefLang'
|
|
||||||
| 'htmlFor'
|
|
||||||
| 'httpEquiv'
|
|
||||||
| 'integrity'
|
|
||||||
| 'keyParams'
|
|
||||||
| 'keyType'
|
|
||||||
| 'kind'
|
|
||||||
| 'loop'
|
|
||||||
| 'marginHeight'
|
|
||||||
| 'marginWidth'
|
|
||||||
| 'maxLength'
|
|
||||||
| 'mediaGroup'
|
|
||||||
| 'method'
|
|
||||||
| 'min'
|
|
||||||
| 'minLength'
|
|
||||||
| 'muted'
|
|
||||||
| 'name'
|
|
||||||
| 'nonce'
|
|
||||||
| 'noValidate'
|
|
||||||
| 'optimum'
|
|
||||||
| 'placeholder'
|
|
||||||
| 'playsInline'
|
|
||||||
| 'poster'
|
|
||||||
| 'preload'
|
|
||||||
| 'readOnly'
|
|
||||||
| 'rel'
|
|
||||||
| 'reversed'
|
|
||||||
| 'rows'
|
|
||||||
| 'rowSpan'
|
|
||||||
| 'sandbox'
|
|
||||||
| 'scope'
|
|
||||||
| 'scoped'
|
|
||||||
| 'scrolling'
|
|
||||||
| 'seamless'
|
|
||||||
| 'selected'
|
|
||||||
| 'shape'
|
|
||||||
| 'sizes'
|
|
||||||
| 'srcDoc'
|
|
||||||
| 'srcLang'
|
|
||||||
| 'srcSet'
|
|
||||||
| 'target'
|
|
||||||
| 'type'
|
|
||||||
| 'useMap'
|
|
||||||
| 'value'
|
|
||||||
| 'wmode'
|
|
||||||
| 'defaultChecked'
|
|
||||||
| 'defaultValue'
|
|
||||||
| 'suppressContentEditableWarning'
|
|
||||||
| 'suppressHydrationWarning'
|
|
||||||
| 'accessKey'
|
|
||||||
| 'className'
|
|
||||||
| 'contentEditable'
|
|
||||||
| 'contextMenu'
|
|
||||||
| 'draggable'
|
|
||||||
| 'id'
|
|
||||||
| 'lang'
|
|
||||||
| 'spellCheck'
|
|
||||||
| 'tabIndex'
|
|
||||||
| 'radioGroup'
|
|
||||||
| 'role'
|
|
||||||
| 'about'
|
|
||||||
| 'datatype'
|
|
||||||
| 'inlist'
|
|
||||||
| 'property'
|
|
||||||
| 'resource'
|
|
||||||
| 'typeof'
|
|
||||||
| 'vocab'
|
|
||||||
| 'autoCapitalize'
|
|
||||||
| 'autoCorrect'
|
|
||||||
| 'autoSave'
|
|
||||||
| 'itemProp'
|
|
||||||
| 'itemScope'
|
|
||||||
| 'itemType'
|
|
||||||
| 'itemID'
|
|
||||||
| 'itemRef'
|
|
||||||
| 'results'
|
|
||||||
| 'security'
|
|
||||||
| 'unselectable'
|
|
||||||
| 'inputMode'
|
|
||||||
| 'is'
|
|
||||||
| 'aria-activedescendant'
|
|
||||||
| 'aria-atomic'
|
|
||||||
| 'aria-autocomplete'
|
|
||||||
| 'aria-busy'
|
|
||||||
| 'aria-checked'
|
|
||||||
| 'aria-colcount'
|
|
||||||
| 'aria-colindex'
|
|
||||||
| 'aria-colspan'
|
|
||||||
| 'aria-controls'
|
|
||||||
| 'aria-current'
|
|
||||||
| 'aria-describedby'
|
|
||||||
| 'aria-details'
|
|
||||||
| 'aria-disabled'
|
|
||||||
| 'aria-dropeffect'
|
|
||||||
| 'aria-errormessage'
|
|
||||||
| 'aria-expanded'
|
|
||||||
| 'aria-flowto'
|
|
||||||
| 'aria-grabbed'
|
|
||||||
| 'aria-haspopup'
|
|
||||||
| 'aria-hidden'
|
|
||||||
| 'aria-invalid'
|
|
||||||
| 'aria-keyshortcuts'
|
|
||||||
| 'aria-labelledby'
|
|
||||||
| 'aria-level'
|
|
||||||
| 'aria-live'
|
|
||||||
| 'aria-modal'
|
|
||||||
| 'aria-multiline'
|
|
||||||
| 'aria-multiselectable'
|
|
||||||
| 'aria-orientation'
|
|
||||||
| 'aria-owns'
|
|
||||||
| 'aria-placeholder'
|
|
||||||
| 'aria-posinset'
|
|
||||||
| 'aria-pressed'
|
|
||||||
| 'aria-readonly'
|
|
||||||
| 'aria-relevant'
|
|
||||||
| 'aria-required'
|
|
||||||
| 'aria-roledescription'
|
|
||||||
| 'aria-rowcount'
|
|
||||||
| 'aria-rowindex'
|
|
||||||
| 'aria-rowspan'
|
|
||||||
| 'aria-selected'
|
|
||||||
| 'aria-setsize'
|
|
||||||
| 'aria-sort'
|
|
||||||
| 'aria-valuemax'
|
|
||||||
| 'aria-valuemin'
|
|
||||||
| 'aria-valuenow'
|
|
||||||
| 'aria-valuetext'
|
|
||||||
| 'dangerouslySetInnerHTML'
|
|
||||||
| 'onCopy'
|
|
||||||
| 'onCopyCapture'
|
|
||||||
| 'onCut'
|
|
||||||
| 'onCutCapture'
|
|
||||||
| 'onPaste'
|
|
||||||
| 'onPasteCapture'
|
|
||||||
| 'onCompositionEnd'
|
|
||||||
| 'onCompositionEndCapture'
|
|
||||||
| 'onCompositionStart'
|
|
||||||
| 'onCompositionStartCapture'
|
|
||||||
| 'onCompositionUpdate'
|
|
||||||
| 'onCompositionUpdateCapture'
|
|
||||||
| 'onFocus'
|
|
||||||
| 'onFocusCapture'
|
|
||||||
| 'onBlur'
|
|
||||||
| 'onBlurCapture'
|
|
||||||
| 'onChange'
|
|
||||||
| 'onChangeCapture'
|
|
||||||
| 'onBeforeInput'
|
|
||||||
| 'onBeforeInputCapture'
|
|
||||||
| 'onInput'
|
|
||||||
| 'onInputCapture'
|
|
||||||
| 'onReset'
|
|
||||||
| 'onResetCapture'
|
|
||||||
| 'onSubmit'
|
|
||||||
| 'onSubmitCapture'
|
|
||||||
| 'onInvalid'
|
|
||||||
| 'onInvalidCapture'
|
|
||||||
| 'onLoad'
|
|
||||||
| 'onLoadCapture'
|
|
||||||
| 'onError'
|
|
||||||
| 'onErrorCapture'
|
|
||||||
| 'onKeyDown'
|
|
||||||
| 'onKeyDownCapture'
|
|
||||||
| 'onKeyPress'
|
|
||||||
| 'onKeyPressCapture'
|
|
||||||
| 'onKeyUp'
|
|
||||||
| 'onKeyUpCapture'
|
|
||||||
| 'onAbort'
|
|
||||||
| 'onAbortCapture'
|
|
||||||
| 'onCanPlay'
|
|
||||||
| 'onCanPlayCapture'
|
|
||||||
| 'onCanPlayThrough'
|
|
||||||
| 'onCanPlayThroughCapture'
|
|
||||||
| 'onDurationChange'
|
|
||||||
| 'onDurationChangeCapture'
|
|
||||||
| 'onEmptied'
|
|
||||||
| 'onEmptiedCapture'
|
|
||||||
| 'onEncrypted'
|
|
||||||
| 'onEncryptedCapture'
|
|
||||||
| 'onEnded'
|
|
||||||
| 'onEndedCapture'
|
|
||||||
| 'onLoadedData'
|
|
||||||
| 'onLoadedDataCapture'
|
|
||||||
| 'onLoadedMetadata'
|
|
||||||
| 'onLoadedMetadataCapture'
|
|
||||||
| 'onLoadStart'
|
|
||||||
| 'onLoadStartCapture'
|
|
||||||
| 'onPause'
|
|
||||||
| 'onPauseCapture'
|
|
||||||
| 'onPlay'
|
|
||||||
| 'onPlayCapture'
|
|
||||||
| 'onPlaying'
|
|
||||||
| 'onPlayingCapture'
|
|
||||||
| 'onProgress'
|
|
||||||
| 'onProgressCapture'
|
|
||||||
| 'onRateChange'
|
|
||||||
| 'onRateChangeCapture'
|
|
||||||
| 'onSeeked'
|
|
||||||
| 'onSeekedCapture'
|
|
||||||
| 'onSeeking'
|
|
||||||
| 'onSeekingCapture'
|
|
||||||
| 'onStalled'
|
|
||||||
| 'onStalledCapture'
|
|
||||||
| 'onSuspend'
|
|
||||||
| 'onSuspendCapture'
|
|
||||||
| 'onTimeUpdate'
|
|
||||||
| 'onTimeUpdateCapture'
|
|
||||||
| 'onVolumeChange'
|
|
||||||
| 'onVolumeChangeCapture'
|
|
||||||
| 'onWaiting'
|
|
||||||
| 'onWaitingCapture'
|
|
||||||
| 'onAuxClick'
|
|
||||||
| 'onAuxClickCapture'
|
|
||||||
| 'onClick'
|
|
||||||
| 'onClickCapture'
|
|
||||||
| 'onContextMenu'
|
|
||||||
| 'onContextMenuCapture'
|
|
||||||
| 'onDoubleClick'
|
|
||||||
| 'onDoubleClickCapture'
|
|
||||||
| 'onDrag'
|
|
||||||
| 'onDragCapture'
|
|
||||||
| 'onDragEnd'
|
|
||||||
| 'onDragEndCapture'
|
|
||||||
| 'onDragEnter'
|
|
||||||
| 'onDragEnterCapture'
|
|
||||||
| 'onDragExit'
|
|
||||||
| 'onDragExitCapture'
|
|
||||||
| 'onDragLeave'
|
|
||||||
| 'onDragLeaveCapture'
|
|
||||||
| 'onDragOver'
|
|
||||||
| 'onDragOverCapture'
|
|
||||||
| 'onDragStart'
|
|
||||||
| 'onDragStartCapture'
|
|
||||||
| 'onDrop'
|
|
||||||
| 'onDropCapture'
|
|
||||||
| 'onMouseDown'
|
|
||||||
| 'onMouseDownCapture'
|
|
||||||
| 'onMouseEnter'
|
|
||||||
| 'onMouseLeave'
|
|
||||||
| 'onMouseMove'
|
|
||||||
| 'onMouseMoveCapture'
|
|
||||||
| 'onMouseOut'
|
|
||||||
| 'onMouseOutCapture'
|
|
||||||
| 'onMouseOver'
|
|
||||||
| 'onMouseOverCapture'
|
|
||||||
| 'onMouseUp'
|
|
||||||
| 'onMouseUpCapture'
|
|
||||||
| 'onSelect'
|
|
||||||
| 'onSelectCapture'
|
|
||||||
| 'onTouchCancel'
|
|
||||||
| 'onTouchCancelCapture'
|
|
||||||
| 'onTouchEnd'
|
|
||||||
| 'onTouchEndCapture'
|
|
||||||
| 'onTouchMove'
|
|
||||||
| 'onTouchMoveCapture'
|
|
||||||
| 'onTouchStart'
|
|
||||||
| 'onTouchStartCapture'
|
|
||||||
| 'onPointerDown'
|
|
||||||
| 'onPointerDownCapture'
|
|
||||||
| 'onPointerMove'
|
|
||||||
| 'onPointerMoveCapture'
|
|
||||||
| 'onPointerUp'
|
|
||||||
| 'onPointerUpCapture'
|
|
||||||
| 'onPointerCancel'
|
|
||||||
| 'onPointerCancelCapture'
|
|
||||||
| 'onPointerEnter'
|
|
||||||
| 'onPointerEnterCapture'
|
|
||||||
| 'onPointerLeave'
|
|
||||||
| 'onPointerLeaveCapture'
|
|
||||||
| 'onPointerOver'
|
|
||||||
| 'onPointerOverCapture'
|
|
||||||
| 'onPointerOut'
|
|
||||||
| 'onPointerOutCapture'
|
|
||||||
| 'onGotPointerCapture'
|
|
||||||
| 'onGotPointerCaptureCapture'
|
|
||||||
| 'onLostPointerCapture'
|
|
||||||
| 'onLostPointerCaptureCapture'
|
|
||||||
| 'onScroll'
|
|
||||||
| 'onScrollCapture'
|
|
||||||
| 'onWheel'
|
|
||||||
| 'onWheelCapture'
|
|
||||||
| 'onAnimationStart'
|
|
||||||
| 'onAnimationStartCapture'
|
|
||||||
| 'onAnimationEnd'
|
|
||||||
| 'onAnimationEndCapture'
|
|
||||||
| 'onAnimationIteration'
|
|
||||||
| 'onAnimationIterationCapture'
|
|
||||||
| 'onTransitionEnd'
|
|
||||||
| 'onTransitionEndCapture'
|
|
||||||
| 'twoToneColor';
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import * as Icon from '@ant-design/icons';
|
|
||||||
import IconImg from 'assets/icon.png';
|
|
||||||
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
|
|
||||||
import { AntdIconType } from './icon';
|
|
||||||
import { IIconConfig } from './schema';
|
|
||||||
|
|
||||||
interface IconType extends IIconConfig {
|
|
||||||
isTpl?: boolean;
|
|
||||||
}
|
|
||||||
const XIcon = memo((props: IconType) => {
|
|
||||||
const { color, size, type, spin, isTpl } = props;
|
|
||||||
|
|
||||||
const MyIcon: React.ForwardRefExoticComponent<Pick<AntdIconProps, AntdIconType> &
|
|
||||||
React.RefAttributes<HTMLSpanElement>> = Icon[type];
|
|
||||||
|
|
||||||
return isTpl ? (
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
|
||||||
<img style={{ verticalAlign: '-20px', width: '82px' }} src={IconImg} alt={type} />
|
|
||||||
图标
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<MyIcon twoToneColor={color} style={{ fontSize: size }} spin={spin} />
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default XIcon;
|
|
||||||
@ -1,144 +0,0 @@
|
|||||||
import {
|
|
||||||
ICardPickerConfigType,
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISwitchConfigType,
|
|
||||||
TCardPickerDefaultType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSwitchDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TIconEditData = Array<
|
|
||||||
IColorConfigType | INumberConfigType | ISwitchConfigType | ICardPickerConfigType<IconTypes>
|
|
||||||
>;
|
|
||||||
export interface IIconConfig {
|
|
||||||
color: TColorDefaultType;
|
|
||||||
size: TNumberDefaultType;
|
|
||||||
spin: TSwitchDefaultType;
|
|
||||||
type: TCardPickerDefaultType<IconTypes>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IIconSchema {
|
|
||||||
editData: TIconEditData;
|
|
||||||
config: IIconConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type IconTypes =
|
|
||||||
| 'AccountBookTwoTone'
|
|
||||||
| 'AlertTwoTone'
|
|
||||||
| 'ApiTwoTone'
|
|
||||||
| 'AppstoreTwoTone'
|
|
||||||
| 'AudioTwoTone'
|
|
||||||
| 'BankTwoTone'
|
|
||||||
| 'BellTwoTone'
|
|
||||||
| 'BookTwoTone'
|
|
||||||
| 'BugTwoTone'
|
|
||||||
| 'BuildTwoTone'
|
|
||||||
| 'BulbTwoTone'
|
|
||||||
| 'CalculatorTwoTone'
|
|
||||||
| 'CalendarTwoTone'
|
|
||||||
| 'CameraTwoTone'
|
|
||||||
| 'CarTwoTone'
|
|
||||||
| 'CarryOutTwoTone'
|
|
||||||
| 'CiCircleTwoTone'
|
|
||||||
| 'CloudTwoTone'
|
|
||||||
| 'CodeTwoTone'
|
|
||||||
| 'CrownTwoTone'
|
|
||||||
| 'CustomerServiceTwoTone'
|
|
||||||
| 'DollarCircleTwoTone'
|
|
||||||
| 'EnvironmentTwoTone'
|
|
||||||
| 'ExperimentTwoTone'
|
|
||||||
| 'FireTwoTone'
|
|
||||||
| 'GiftTwoTone'
|
|
||||||
| 'InsuranceTwoTone'
|
|
||||||
| 'LikeTwoTone'
|
|
||||||
| 'LockTwoTone'
|
|
||||||
| 'MailTwoTone'
|
|
||||||
| 'MessageTwoTone'
|
|
||||||
| 'PhoneTwoTone'
|
|
||||||
| 'PictureTwoTone'
|
|
||||||
| 'PlaySquareTwoTone'
|
|
||||||
| 'RedEnvelopeTwoTone'
|
|
||||||
| 'ShopTwoTone'
|
|
||||||
| 'TrademarkCircleTwoTone'
|
|
||||||
| 'StarTwoTone'
|
|
||||||
| 'SafetyCertificateTwoTone'
|
|
||||||
| 'SettingTwoTone'
|
|
||||||
| 'RocketTwoTone';
|
|
||||||
|
|
||||||
const Icon: IIconSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'size',
|
|
||||||
name: '大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'spin',
|
|
||||||
name: '旋转动画',
|
|
||||||
type: 'Switch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'type',
|
|
||||||
name: '图标类型',
|
|
||||||
type: 'CardPicker',
|
|
||||||
icons: [
|
|
||||||
'AccountBookTwoTone',
|
|
||||||
'AlertTwoTone',
|
|
||||||
'ApiTwoTone',
|
|
||||||
'AppstoreTwoTone',
|
|
||||||
'AudioTwoTone',
|
|
||||||
'BankTwoTone',
|
|
||||||
'BellTwoTone',
|
|
||||||
'BookTwoTone',
|
|
||||||
'BugTwoTone',
|
|
||||||
'BuildTwoTone',
|
|
||||||
'BulbTwoTone',
|
|
||||||
'CalculatorTwoTone',
|
|
||||||
'CalendarTwoTone',
|
|
||||||
'CameraTwoTone',
|
|
||||||
'CarTwoTone',
|
|
||||||
'CarryOutTwoTone',
|
|
||||||
'CiCircleTwoTone',
|
|
||||||
'CloudTwoTone',
|
|
||||||
'CodeTwoTone',
|
|
||||||
'CrownTwoTone',
|
|
||||||
'CustomerServiceTwoTone',
|
|
||||||
'DollarCircleTwoTone',
|
|
||||||
'EnvironmentTwoTone',
|
|
||||||
'ExperimentTwoTone',
|
|
||||||
'FireTwoTone',
|
|
||||||
'GiftTwoTone',
|
|
||||||
'InsuranceTwoTone',
|
|
||||||
'LikeTwoTone',
|
|
||||||
'LockTwoTone',
|
|
||||||
'MailTwoTone',
|
|
||||||
'MessageTwoTone',
|
|
||||||
'PhoneTwoTone',
|
|
||||||
'PictureTwoTone',
|
|
||||||
'PlaySquareTwoTone',
|
|
||||||
'RedEnvelopeTwoTone',
|
|
||||||
'ShopTwoTone',
|
|
||||||
'TrademarkCircleTwoTone',
|
|
||||||
'StarTwoTone',
|
|
||||||
'SafetyCertificateTwoTone',
|
|
||||||
'SettingTwoTone',
|
|
||||||
'RocketTwoTone',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
color: 'rgba(74,144,226,1)',
|
|
||||||
size: 36,
|
|
||||||
spin: false,
|
|
||||||
type: 'CarTwoTone',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Icon;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Icon',
|
|
||||||
h: 23,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import { IImageConfig } from './schema';
|
|
||||||
const Image = memo((props: IImageConfig) => {
|
|
||||||
const { imgUrl, round = 0 } = props;
|
|
||||||
return (
|
|
||||||
<div style={{ borderRadius: round, width: '100%', textAlign: 'center', overflow: 'hidden' }}>
|
|
||||||
<img src={imgUrl && imgUrl[0].url} alt="" style={{ width: '100%' }} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Image;
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
import {
|
|
||||||
INumberConfigType,
|
|
||||||
IUploadConfigType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TUploadDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TImageEditData = Array<IUploadConfigType | INumberConfigType>;
|
|
||||||
export interface IImageConfig {
|
|
||||||
imgUrl: TUploadDefaultType;
|
|
||||||
round: TNumberDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IImageSchema {
|
|
||||||
editData: TImageEditData;
|
|
||||||
config: IImageConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Image: IImageSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'imgUrl',
|
|
||||||
name: '上传',
|
|
||||||
type: 'Upload',
|
|
||||||
isCrop: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'round',
|
|
||||||
name: '圆角',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
imgUrl: [
|
|
||||||
{
|
|
||||||
uid: '001',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/4_1740bf4535c.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
round: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Image;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Image',
|
|
||||||
h: 188,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
.list {
|
|
||||||
margin: 20px auto;
|
|
||||||
width: 94%;
|
|
||||||
.sourceList {
|
|
||||||
.sourceItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
.imgWrap {
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
margin-left: 12px;
|
|
||||||
.tit {
|
|
||||||
line-height: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import styles from './index.less';
|
|
||||||
import { IListConfig } from './schema';
|
|
||||||
const List = memo((props: IListConfig) => {
|
|
||||||
const { round, sourceData, imgSize, fontSize, color } = props;
|
|
||||||
return (
|
|
||||||
<div className={styles.list}>
|
|
||||||
<div className={styles.sourceList}>
|
|
||||||
{sourceData.map((item, i) => {
|
|
||||||
return (
|
|
||||||
<div className={styles.sourceItem} key={i}>
|
|
||||||
<div className={styles.imgWrap}>
|
|
||||||
<img
|
|
||||||
src={
|
|
||||||
item.imgUrl[0]
|
|
||||||
? item.imgUrl[0].url
|
|
||||||
: 'http://io.nainor.com/uploads/01_173e15d3493.png'
|
|
||||||
}
|
|
||||||
alt={item.desc}
|
|
||||||
style={{
|
|
||||||
width: parseFloat(imgSize),
|
|
||||||
height: imgSize,
|
|
||||||
objectFit: 'cover',
|
|
||||||
borderRadius: round,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={styles.content}>
|
|
||||||
<a
|
|
||||||
className={styles.tit}
|
|
||||||
style={{ fontSize, color }}
|
|
||||||
href={item.link ? item.link : '#'}
|
|
||||||
>
|
|
||||||
{item.title}
|
|
||||||
<div
|
|
||||||
className={styles.desc}
|
|
||||||
style={{ fontSize: fontSize * 0.8, color: 'rgba(0,0,0, .3)' }}
|
|
||||||
>
|
|
||||||
{item.desc}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default List;
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
IDataListConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISelectConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TDataListDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSelectDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150';
|
|
||||||
export type TListEditData = Array<
|
|
||||||
IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType<TListSelectKeyType>
|
|
||||||
>;
|
|
||||||
export interface IListConfig {
|
|
||||||
sourceData: TDataListDefaultType;
|
|
||||||
round: TNumberDefaultType;
|
|
||||||
imgSize: TSelectDefaultType<TListSelectKeyType>;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IListSchema {
|
|
||||||
editData: TListEditData;
|
|
||||||
config: IListConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const List: IListSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'sourceData',
|
|
||||||
name: '数据源',
|
|
||||||
type: 'DataList',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'round',
|
|
||||||
name: '圆角',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'imgSize',
|
|
||||||
name: '图片大小',
|
|
||||||
type: 'Select',
|
|
||||||
range: [
|
|
||||||
{
|
|
||||||
key: '60',
|
|
||||||
text: '60 x 60',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '80',
|
|
||||||
text: '80 x 80',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '100',
|
|
||||||
text: '100 x 100',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '120',
|
|
||||||
text: '120 x 120',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '150',
|
|
||||||
text: '150 x 150',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '文字大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '文字颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
sourceData: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
title: '趣谈小课',
|
|
||||||
desc: '致力于打造优质小课程',
|
|
||||||
link: 'xxxxx',
|
|
||||||
imgUrl: [
|
|
||||||
{
|
|
||||||
uid: '001',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
title: '趣谈小课',
|
|
||||||
desc: '致力于打造优质小课程',
|
|
||||||
link: 'xxxxx',
|
|
||||||
imgUrl: [
|
|
||||||
{
|
|
||||||
uid: '002',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
round: 0,
|
|
||||||
imgSize: '80',
|
|
||||||
fontSize: 16,
|
|
||||||
color: 'rgba(153,153,153,1)',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default List;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'List',
|
|
||||||
h: 110,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import styles from './index.less';
|
|
||||||
import { ILongTextConfig } from './schema';
|
|
||||||
const LongText = memo((props: ILongTextConfig) => {
|
|
||||||
const { text, fontSize, color, indent, lineHeight, textAlign } = props;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={styles.textWrap}
|
|
||||||
style={{ color, textIndent: indent + 'px', fontSize, lineHeight, textAlign }}
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
export default LongText;
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISelectConfigType,
|
|
||||||
ITextAreaConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSelectDefaultType,
|
|
||||||
TTextAreaDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
export type TLongTextSelectKeyType = 'left' | 'center' | 'right';
|
|
||||||
|
|
||||||
export type TLongTextEditData = Array<
|
|
||||||
| ITextAreaConfigType
|
|
||||||
| IColorConfigType
|
|
||||||
| INumberConfigType
|
|
||||||
| ISelectConfigType<TLongTextSelectKeyType>
|
|
||||||
>;
|
|
||||||
export interface ILongTextConfig {
|
|
||||||
text: TTextAreaDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
indent: TNumberDefaultType;
|
|
||||||
lineHeight: TNumberDefaultType;
|
|
||||||
textAlign: TSelectDefaultType<TLongTextSelectKeyType>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ILongTextSchema {
|
|
||||||
editData: TLongTextEditData;
|
|
||||||
config: ILongTextConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LongText: ILongTextSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'text',
|
|
||||||
name: '文字',
|
|
||||||
type: 'TextArea',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '字体大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'indent',
|
|
||||||
name: '首行缩进',
|
|
||||||
type: 'Number',
|
|
||||||
range: [0, 100],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'textAlign',
|
|
||||||
name: '对齐方式',
|
|
||||||
type: 'Select',
|
|
||||||
range: [
|
|
||||||
{
|
|
||||||
key: 'left',
|
|
||||||
text: '左对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'center',
|
|
||||||
text: '居中对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'right',
|
|
||||||
text: '右对齐',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'lineHeight',
|
|
||||||
name: '行高',
|
|
||||||
type: 'Number',
|
|
||||||
step: 0.1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
text: '我是长文本有一段故事，dooring可视化编辑器无限可能，赶快来体验吧，骚年们，奥利给~',
|
|
||||||
color: 'rgba(60,60,60,1)',
|
|
||||||
fontSize: 14,
|
|
||||||
indent: 20,
|
|
||||||
lineHeight: 1.8,
|
|
||||||
textAlign: 'left',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LongText;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'LongText',
|
|
||||||
h: 36,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import { IQrcodeConfig } from './schema';
|
|
||||||
|
|
||||||
const Qrcode = memo((props: IQrcodeConfig) => {
|
|
||||||
const { qrcode, text, color, fontSize = 14 } = props;
|
|
||||||
return (
|
|
||||||
<div style={{ width: '240px', margin: '16px auto' }}>
|
|
||||||
<img src={qrcode && qrcode[0].url} alt={text} style={{ width: '100%' }} />
|
|
||||||
<div style={{ textAlign: 'center', color, fontSize, paddingTop: '8px' }}>{text}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Qrcode;
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
IUploadConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
TUploadDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TQrcodeEditData = Array<
|
|
||||||
IUploadConfigType | ITextConfigType | IColorConfigType | INumberConfigType
|
|
||||||
>;
|
|
||||||
export interface IQrcodeConfig {
|
|
||||||
qrcode: TUploadDefaultType;
|
|
||||||
text: TTextDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IQrcodeSchema {
|
|
||||||
editData: TQrcodeEditData;
|
|
||||||
config: IQrcodeConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Qrcode: IQrcodeSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'qrcode',
|
|
||||||
name: '二维码',
|
|
||||||
type: 'Upload',
|
|
||||||
isCrop: true,
|
|
||||||
cropRate: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'text',
|
|
||||||
name: '文字',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '文字颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '文字大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
qrcode: [
|
|
||||||
{
|
|
||||||
uid: '001',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/code_173e1705e0c.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
text: '二维码',
|
|
||||||
color: 'rgba(153,153,153,1)',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Qrcode;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Qrcode',
|
|
||||||
h: 150,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import styles from './index.less';
|
|
||||||
import { ITextConfig } from './schema';
|
|
||||||
|
|
||||||
const Text = memo((props: ITextConfig) => {
|
|
||||||
const { align, text, fontSize, color, lineHeight } = props;
|
|
||||||
return (
|
|
||||||
<div className={styles.textWrap} style={{ color, textAlign: align, fontSize, lineHeight }}>
|
|
||||||
{text}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
export default Text;
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ISelectConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TSelectDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TTextSelectKeyType = 'left' | 'right' | 'center';
|
|
||||||
export type TTextEditData = Array<
|
|
||||||
ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType<TTextSelectKeyType>
|
|
||||||
>;
|
|
||||||
export interface ITextConfig {
|
|
||||||
text: TTextDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
fontSize: TNumberDefaultType;
|
|
||||||
align: TSelectDefaultType<TTextSelectKeyType>;
|
|
||||||
lineHeight: TNumberDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ITextSchema {
|
|
||||||
editData: TTextEditData;
|
|
||||||
config: ITextConfig;
|
|
||||||
}
|
|
||||||
const Text: ITextSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'text',
|
|
||||||
name: '文字',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'fontSize',
|
|
||||||
name: '字体大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'align',
|
|
||||||
name: '对齐方式',
|
|
||||||
type: 'Select',
|
|
||||||
range: [
|
|
||||||
{
|
|
||||||
key: 'left',
|
|
||||||
text: '左对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'center',
|
|
||||||
text: '居中对齐',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'right',
|
|
||||||
text: '右对齐',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'lineHeight',
|
|
||||||
name: '行高',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
text: '我是文本',
|
|
||||||
color: 'rgba(60,60,60,1)',
|
|
||||||
fontSize: 18,
|
|
||||||
align: 'center',
|
|
||||||
lineHeight: 2,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default Text;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Text',
|
|
||||||
h: 20,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import Footer from './Footer/schema';
|
|
||||||
import Header from './Header/schema';
|
|
||||||
import Icon from './Icon/schema';
|
|
||||||
import Image from './Image/schema';
|
|
||||||
import List from './List/schema';
|
|
||||||
import LongText from './LongText/schema';
|
|
||||||
import Qrcode from './Qrcode/schema';
|
|
||||||
import Text from './Text/schema';
|
|
||||||
import Button from './Button/schema';
|
|
||||||
|
|
||||||
const basicSchema = {
|
|
||||||
Footer,
|
|
||||||
Header,
|
|
||||||
Icon,
|
|
||||||
Image,
|
|
||||||
List,
|
|
||||||
LongText,
|
|
||||||
Qrcode,
|
|
||||||
Text,
|
|
||||||
Button,
|
|
||||||
};
|
|
||||||
export default basicSchema;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import Footer from './Footer/template';
|
|
||||||
import Header from './Header/template';
|
|
||||||
import Icon from './Icon/template';
|
|
||||||
import Image from './Image/template';
|
|
||||||
import List from './List/template';
|
|
||||||
import LongText from './LongText/template';
|
|
||||||
import Qrcode from './Qrcode/template';
|
|
||||||
import Text from './Text/template';
|
|
||||||
import Button from './Button/template';
|
|
||||||
|
|
||||||
const basicTemplate = [Footer, Header, Icon, Image, List, LongText, Qrcode, Text, Button];
|
|
||||||
const BasicTemplate = basicTemplate.map(v => {
|
|
||||||
return { ...v, category: 'base' };
|
|
||||||
});
|
|
||||||
|
|
||||||
export default BasicTemplate;
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import { Player, BigPlayButton } from 'video-react';
|
|
||||||
import './index.css';
|
|
||||||
import { IVideoConfig } from './schema';
|
|
||||||
|
|
||||||
const VideoPlayer = memo((props: IVideoConfig) => {
|
|
||||||
const { poster, url } = props;
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Player
|
|
||||||
playsInline
|
|
||||||
poster={poster[0].url}
|
|
||||||
src={url || 'https://gossv.vcg.com/cmsUploadVideo/creative/1移轴/7月移轴.mp4'}
|
|
||||||
>
|
|
||||||
<BigPlayButton position="center" />
|
|
||||||
</Player>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default VideoPlayer;
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import {
|
|
||||||
ITextConfigType,
|
|
||||||
IUploadConfigType,
|
|
||||||
TTextDefaultType,
|
|
||||||
TUploadDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TVideoEditData = Array<IUploadConfigType | ITextConfigType>;
|
|
||||||
export interface IVideoConfig {
|
|
||||||
poster: TUploadDefaultType;
|
|
||||||
url: TTextDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IVideoSchema {
|
|
||||||
editData: TVideoEditData;
|
|
||||||
config: IVideoConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Video: IVideoSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'poster',
|
|
||||||
name: '视频封面',
|
|
||||||
type: 'Upload',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'url',
|
|
||||||
name: '视频链接',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
poster: [
|
|
||||||
{
|
|
||||||
uid: '001',
|
|
||||||
name: 'image.png',
|
|
||||||
status: 'done',
|
|
||||||
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
url: '',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Video;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Video',
|
|
||||||
h: 107,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import Video from './Video/schema';
|
|
||||||
|
|
||||||
const mediaSchema = {
|
|
||||||
Video,
|
|
||||||
};
|
|
||||||
export default mediaSchema;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import Video from './Video/template';
|
|
||||||
|
|
||||||
const mediaTemplate = [Video];
|
|
||||||
|
|
||||||
const MediaTemplate = mediaTemplate.map(v => {
|
|
||||||
return { ...v, category: 'media' };
|
|
||||||
});
|
|
||||||
|
|
||||||
export default MediaTemplate;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.chartWrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.chartTitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import { Chart } from '@antv/f2';
|
|
||||||
import React, { memo, useEffect, useRef } from 'react';
|
|
||||||
// import { uuid } from 'utils/tool';
|
|
||||||
import AreaImg from '@/assets/area.png';
|
|
||||||
|
|
||||||
import styles from './index.less';
|
|
||||||
import { IChartConfig } from './schema';
|
|
||||||
|
|
||||||
interface XChartProps extends IChartConfig {
|
|
||||||
isTpl: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XLine = (props: XChartProps) => {
|
|
||||||
const { isTpl, data, color, size, paddingTop, title } = props;
|
|
||||||
const chartRef = useRef(null);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isTpl) {
|
|
||||||
const chart = new Chart({
|
|
||||||
el: chartRef.current || undefined,
|
|
||||||
pixelRatio: window.devicePixelRatio, // 指定分辨率
|
|
||||||
});
|
|
||||||
|
|
||||||
// step 2: 处理数据
|
|
||||||
const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' }));
|
|
||||||
|
|
||||||
// Step 2: 载入数据源
|
|
||||||
chart.source(dataX, {
|
|
||||||
percent: {
|
|
||||||
formatter: function formatter(val) {
|
|
||||||
return val * 100 + '%';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.tooltip({
|
|
||||||
showCrosshairs: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.scale({
|
|
||||||
name: {
|
|
||||||
range: [0, 1],
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
tickCount: 5,
|
|
||||||
min: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.axis('name', {
|
|
||||||
label: function label(text, index, total) {
|
|
||||||
const textCfg: any = {};
|
|
||||||
if (index === 0) {
|
|
||||||
textCfg.textAlign = 'left';
|
|
||||||
} else if (index === total - 1) {
|
|
||||||
textCfg.textAlign = 'right';
|
|
||||||
}
|
|
||||||
return textCfg;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.area().position('name*value');
|
|
||||||
chart.line().position('name*value');
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}, [data, isTpl]);
|
|
||||||
return (
|
|
||||||
<div className={styles.chartWrap}>
|
|
||||||
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
|
|
||||||
{title}
|
|
||||||
</div>
|
|
||||||
{isTpl ? <img src={AreaImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(XLine);
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITableConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTableDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TChartEditData = Array<
|
|
||||||
ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
|
|
||||||
>;
|
|
||||||
export interface IChartConfig {
|
|
||||||
title: TTextDefaultType;
|
|
||||||
size: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
paddingTop: TNumberDefaultType;
|
|
||||||
data: TTableDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IChartSchema {
|
|
||||||
editData: TChartEditData;
|
|
||||||
config: IChartConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Chart: IChartSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'title',
|
|
||||||
name: '标题',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'size',
|
|
||||||
name: '标题大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paddingTop',
|
|
||||||
name: '上边距',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'data',
|
|
||||||
name: '数据源',
|
|
||||||
type: 'Table',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
title: '面积图',
|
|
||||||
size: 14,
|
|
||||||
color: 'rgba(0,0,0,1)',
|
|
||||||
paddingTop: 10,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
value: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'C',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'D',
|
|
||||||
value: 80,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Area',
|
|
||||||
h: 108,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.chartWrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.chartTitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import { Chart } from '@antv/f2';
|
|
||||||
import React, { memo, useEffect, useRef } from 'react';
|
|
||||||
// import { uuid } from 'utils/tool';
|
|
||||||
import ChartImg from '@/assets/chart.png';
|
|
||||||
|
|
||||||
import styles from './index.less';
|
|
||||||
import { IChartConfig } from './schema';
|
|
||||||
|
|
||||||
interface XChartProps extends IChartConfig {
|
|
||||||
isTpl: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XChart = (props: XChartProps) => {
|
|
||||||
const { isTpl, data, color, size, paddingTop, title } = props;
|
|
||||||
const chartRef = useRef(null);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isTpl) {
|
|
||||||
const chart = new Chart({
|
|
||||||
el: chartRef.current || undefined,
|
|
||||||
pixelRatio: window.devicePixelRatio, // 指定分辨率
|
|
||||||
});
|
|
||||||
|
|
||||||
// step 2: 处理数据
|
|
||||||
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
|
|
||||||
|
|
||||||
// Step 2: 载入数据源
|
|
||||||
chart.source(dataX);
|
|
||||||
|
|
||||||
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
|
|
||||||
chart
|
|
||||||
.interval()
|
|
||||||
.position('name*value')
|
|
||||||
.color('name');
|
|
||||||
|
|
||||||
// Step 4: 渲染图表
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}, [data, isTpl]);
|
|
||||||
return (
|
|
||||||
<div className={styles.chartWrap}>
|
|
||||||
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
|
|
||||||
{title}
|
|
||||||
</div>
|
|
||||||
{isTpl ? <img src={ChartImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(XChart);
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITableConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTableDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TChartEditData = Array<
|
|
||||||
ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
|
|
||||||
>;
|
|
||||||
export interface IChartConfig {
|
|
||||||
title: TTextDefaultType;
|
|
||||||
size: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
paddingTop: TNumberDefaultType;
|
|
||||||
data: TTableDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IChartSchema {
|
|
||||||
editData: TChartEditData;
|
|
||||||
config: IChartConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Chart: IChartSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'title',
|
|
||||||
name: '标题',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'size',
|
|
||||||
name: '标题大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paddingTop',
|
|
||||||
name: '上边距',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'data',
|
|
||||||
name: '数据源',
|
|
||||||
type: 'Table',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
title: '柱状图',
|
|
||||||
size: 14,
|
|
||||||
color: 'rgba(0,0,0,1)',
|
|
||||||
paddingTop: 10,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
value: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'C',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Chart',
|
|
||||||
h: 102,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.chartWrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.chartTitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
import { Chart } from '@antv/f2';
|
|
||||||
import React, { memo, useEffect, useRef } from 'react';
|
|
||||||
// import { uuid } from 'utils/tool';
|
|
||||||
import LineImg from '@/assets/line.png';
|
|
||||||
|
|
||||||
import styles from './index.less';
|
|
||||||
import { IChartConfig } from './schema';
|
|
||||||
|
|
||||||
interface XChartProps extends IChartConfig {
|
|
||||||
isTpl: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XLine = (props: XChartProps) => {
|
|
||||||
const { isTpl, data, color, size, paddingTop, title } = props;
|
|
||||||
const chartRef = useRef(null);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isTpl) {
|
|
||||||
const chart = new Chart({
|
|
||||||
el: chartRef.current || undefined,
|
|
||||||
pixelRatio: window.devicePixelRatio, // 指定分辨率
|
|
||||||
});
|
|
||||||
|
|
||||||
// step 2: 处理数据
|
|
||||||
const dataX = data.map(item => ({ ...item, value: Number(item.value) }));
|
|
||||||
|
|
||||||
// Step 2: 载入数据源
|
|
||||||
chart.source(dataX, {
|
|
||||||
value: {
|
|
||||||
tickCount: 5,
|
|
||||||
min: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.tooltip({
|
|
||||||
showCrosshairs: true,
|
|
||||||
showItemMarker: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.axis('name', {
|
|
||||||
label: function label(text, index, total) {
|
|
||||||
const textCfg: any = {};
|
|
||||||
if (index === 0) {
|
|
||||||
textCfg.textAlign = 'left';
|
|
||||||
} else if (index === total - 1) {
|
|
||||||
textCfg.textAlign = 'right';
|
|
||||||
}
|
|
||||||
return textCfg;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.line().position('name*value');
|
|
||||||
chart
|
|
||||||
.point()
|
|
||||||
.position('name*value')
|
|
||||||
.style({
|
|
||||||
stroke: '#fff',
|
|
||||||
lineWidth: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}, [data, isTpl]);
|
|
||||||
return (
|
|
||||||
<div className={styles.chartWrap}>
|
|
||||||
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
|
|
||||||
{title}
|
|
||||||
</div>
|
|
||||||
{isTpl ? <img src={LineImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(XLine);
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITableConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTableDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TChartEditData = Array<
|
|
||||||
ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
|
|
||||||
>;
|
|
||||||
export interface IChartConfig {
|
|
||||||
title: TTextDefaultType;
|
|
||||||
size: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
paddingTop: TNumberDefaultType;
|
|
||||||
data: TTableDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IChartSchema {
|
|
||||||
editData: TChartEditData;
|
|
||||||
config: IChartConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Chart: IChartSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'title',
|
|
||||||
name: '标题',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'size',
|
|
||||||
name: '标题大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paddingTop',
|
|
||||||
name: '上边距',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'data',
|
|
||||||
name: '数据源',
|
|
||||||
type: 'Table',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
title: '折线图',
|
|
||||||
size: 14,
|
|
||||||
color: 'rgba(0,0,0,1)',
|
|
||||||
paddingTop: 10,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
value: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'C',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'D',
|
|
||||||
value: 80,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Line',
|
|
||||||
h: 104,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.chartWrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
.chartTitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
import { Chart } from '@antv/f2';
|
|
||||||
import React, { memo, useEffect, useRef } from 'react';
|
|
||||||
// import { uuid } from 'utils/tool';
|
|
||||||
import PieImg from '@/assets/pie.png';
|
|
||||||
|
|
||||||
import styles from './index.less';
|
|
||||||
import { IChartConfig } from './schema';
|
|
||||||
|
|
||||||
interface XChartProps extends IChartConfig {
|
|
||||||
isTpl: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DataMap {
|
|
||||||
[name: string]: number | string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const XLine = (props: XChartProps) => {
|
|
||||||
const { isTpl, data, color, size, paddingTop, title } = props;
|
|
||||||
const chartRef = useRef(null);
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isTpl) {
|
|
||||||
const chart = new Chart({
|
|
||||||
el: chartRef.current || undefined,
|
|
||||||
pixelRatio: window.devicePixelRatio, // 指定分辨率
|
|
||||||
});
|
|
||||||
|
|
||||||
// step 2: 处理数据
|
|
||||||
const dataX = data.map(item => ({ ...item, value: Number(item.value), a: '1' }));
|
|
||||||
|
|
||||||
// Step 2: 载入数据源
|
|
||||||
chart.source(dataX, {
|
|
||||||
percent: {
|
|
||||||
formatter: function formatter(val) {
|
|
||||||
return val * 100 + '%';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取数据的map类型，用以展示图例说明
|
|
||||||
const dataMap: DataMap = dataX.reduce((prev: any, cur) => {
|
|
||||||
return prev.name
|
|
||||||
? { [prev.name]: prev.value, ...{ [cur.name]: cur.value } }
|
|
||||||
: { ...prev, ...{ [cur.name]: cur.value } };
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.legend({
|
|
||||||
position: 'right',
|
|
||||||
itemFormatter: function itemFormatter(val) {
|
|
||||||
return val + ' ' + dataMap[val] + '%';
|
|
||||||
},
|
|
||||||
});
|
|
||||||
chart.tooltip(false);
|
|
||||||
chart.coord('polar', {
|
|
||||||
transposed: true,
|
|
||||||
radius: 0.85,
|
|
||||||
});
|
|
||||||
chart.axis(false);
|
|
||||||
chart
|
|
||||||
.interval()
|
|
||||||
.position('a*value')
|
|
||||||
.color('name', [
|
|
||||||
'#1890FF',
|
|
||||||
'#13C2C2',
|
|
||||||
'#2FC25B',
|
|
||||||
'#FACC14',
|
|
||||||
'#00CC99',
|
|
||||||
'#CC3366',
|
|
||||||
'#CC6600',
|
|
||||||
'#CC66CC',
|
|
||||||
'#FF3366',
|
|
||||||
'#0066CC',
|
|
||||||
])
|
|
||||||
.adjust('stack')
|
|
||||||
.style({
|
|
||||||
lineWidth: 1,
|
|
||||||
stroke: '#fff',
|
|
||||||
lineJoin: 'round',
|
|
||||||
lineCap: 'round',
|
|
||||||
})
|
|
||||||
.animate({
|
|
||||||
appear: {
|
|
||||||
duration: 1200,
|
|
||||||
easing: 'bounceOut',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}, [data, isTpl]);
|
|
||||||
return (
|
|
||||||
<div className={styles.chartWrap}>
|
|
||||||
<div className={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>
|
|
||||||
{title}
|
|
||||||
</div>
|
|
||||||
{isTpl ? <img src={PieImg} alt="dooring chart" /> : <canvas ref={chartRef}></canvas>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(XLine);
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import {
|
|
||||||
IColorConfigType,
|
|
||||||
INumberConfigType,
|
|
||||||
ITableConfigType,
|
|
||||||
ITextConfigType,
|
|
||||||
TColorDefaultType,
|
|
||||||
TNumberDefaultType,
|
|
||||||
TTableDefaultType,
|
|
||||||
TTextDefaultType,
|
|
||||||
} from '@/components/PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
export type TChartEditData = Array<
|
|
||||||
ITextConfigType | INumberConfigType | IColorConfigType | ITableConfigType
|
|
||||||
>;
|
|
||||||
export interface IChartConfig {
|
|
||||||
title: TTextDefaultType;
|
|
||||||
size: TNumberDefaultType;
|
|
||||||
color: TColorDefaultType;
|
|
||||||
paddingTop: TNumberDefaultType;
|
|
||||||
data: TTableDefaultType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IChartSchema {
|
|
||||||
editData: TChartEditData;
|
|
||||||
config: IChartConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Chart: IChartSchema = {
|
|
||||||
editData: [
|
|
||||||
{
|
|
||||||
key: 'title',
|
|
||||||
name: '标题',
|
|
||||||
type: 'Text',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'size',
|
|
||||||
name: '标题大小',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'color',
|
|
||||||
name: '标题颜色',
|
|
||||||
type: 'Color',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'paddingTop',
|
|
||||||
name: '上边距',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'data',
|
|
||||||
name: '数据源',
|
|
||||||
type: 'Table',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
config: {
|
|
||||||
title: '饼图',
|
|
||||||
size: 14,
|
|
||||||
color: 'rgba(0,0,0,1)',
|
|
||||||
paddingTop: 10,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
value: 60,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'C',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'D',
|
|
||||||
value: 80,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart;
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const template = {
|
|
||||||
type: 'Pie',
|
|
||||||
h: 106,
|
|
||||||
};
|
|
||||||
export default template;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import Chart from './Chart/schema';
|
|
||||||
import Line from './Line/schema';
|
|
||||||
import Pie from './Pie/schema';
|
|
||||||
import Area from './Area/schema';
|
|
||||||
|
|
||||||
const visualSchema = {
|
|
||||||
Chart,
|
|
||||||
Line,
|
|
||||||
Pie,
|
|
||||||
Area,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default visualSchema;
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import Chart from './Chart/template';
|
|
||||||
import Line from './Line/template';
|
|
||||||
import Pie from './Pie/template';
|
|
||||||
import Area from './Area/template';
|
|
||||||
|
|
||||||
const visualTemplate = [Chart, Line, Pie, Area];
|
|
||||||
|
|
||||||
const VisualTemplate = visualTemplate.map(v => {
|
|
||||||
return { ...v, category: 'visual' };
|
|
||||||
});
|
|
||||||
export default VisualTemplate;
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
import { INumberConfigType, TNumberDefaultType } from '../PanelComponents/FormEditor/types';
|
|
||||||
|
|
||||||
///提取所有公用设置，传来时加到这里，约定公用类型
|
|
||||||
//公用配置需满足条件，所有组件初始值统一，否则不放公用设置
|
|
||||||
|
|
||||||
export interface ICommonBaseType {
|
|
||||||
baseTop: TNumberDefaultType;
|
|
||||||
baseLeft: TNumberDefaultType;
|
|
||||||
baseRadius: TNumberDefaultType;
|
|
||||||
baseRotate: TNumberDefaultType;
|
|
||||||
baseScale: TNumberDefaultType;
|
|
||||||
baseHeight: TNumberDefaultType;
|
|
||||||
baseWidth: TNumberDefaultType;
|
|
||||||
isTpl?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const baseConfig: INumberConfigType[] = [
|
|
||||||
{
|
|
||||||
key: 'baseTop',
|
|
||||||
name: '纵向位移',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseLeft',
|
|
||||||
name: '横向位移',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseRadius',
|
|
||||||
name: '圆角',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseRotate',
|
|
||||||
name: '旋转',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseScale',
|
|
||||||
name: '缩放',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseHeight',
|
|
||||||
name: '容器高度%',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'baseWidth',
|
|
||||||
name: '容器宽度%',
|
|
||||||
type: 'Number',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const baseDefault = {
|
|
||||||
baseTop: 0,
|
|
||||||
baseLeft: 0,
|
|
||||||
baseRadius: 0,
|
|
||||||
baseRotate: 0,
|
|
||||||
baseScale: 100,
|
|
||||||
baseHeight: 100,
|
|
||||||
baseWidth: 100,
|
|
||||||
};
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import BasicSchema from './BasicComponents/schema';
|
|
||||||
import MediaSchema from './MediaComponents/schema';
|
|
||||||
import VisualSchema from './VisualComponents/schema';
|
|
||||||
|
|
||||||
const schema = {
|
|
||||||
...BasicSchema,
|
|
||||||
...MediaSchema,
|
|
||||||
...VisualSchema,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default schema;
|
|
||||||
@ -2,7 +2,7 @@ import React, { memo, PropsWithChildren } from 'react';
|
|||||||
import { Carousel } from 'zarm';
|
import { Carousel } from 'zarm';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { ICarouselConfig } from './schema';
|
import { ICarouselConfig } from './schema';
|
||||||
import logo from '@/assets/01-轮播.png';
|
import logo from '@/assets/banner.png';
|
||||||
|
|
||||||
interface CarouselTypes extends ICarouselConfig {
|
interface CarouselTypes extends ICarouselConfig {
|
||||||
isTpl: boolean;
|
isTpl: boolean;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { IFooterConfig } from './schema';
|
import { IFooterConfig } from './schema';
|
||||||
import logo from '@/assets/02-页脚.png';
|
import logo from '@/assets/footer.png';
|
||||||
const Footer = memo((props: IFooterConfig) => {
|
const Footer = memo((props: IFooterConfig) => {
|
||||||
const { bgColor, text, color, align, fontSize, height } = props;
|
const { bgColor, text, color, align, fontSize, height } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { Button } from 'zarm';
|
|||||||
import BaseForm from './BaseForm';
|
import BaseForm from './BaseForm';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { IFormConfig } from './schema';
|
import { IFormConfig } from './schema';
|
||||||
import logo from '@/assets/03-表单.png';
|
import logo from '@/assets/form.png';
|
||||||
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
||||||
const {
|
const {
|
||||||
title,
|
title,
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { memo } from 'react';
|
|||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { IHeaderConfig } from './schema';
|
import { IHeaderConfig } from './schema';
|
||||||
import logos from '@/assets/04-页头.png';
|
import logos from '@/assets/header.png';
|
||||||
const Header = memo((props: IHeaderConfig) => {
|
const Header = memo((props: IHeaderConfig) => {
|
||||||
const { bgColor, logo, logoText, fontSize, color } = props;
|
const { bgColor, logo, logoText, fontSize, color } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import * as Icon from '@ant-design/icons';
|
|||||||
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
|
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
|
||||||
import { AntdIconType } from './icon';
|
import { AntdIconType } from './icon';
|
||||||
import { IIconConfig } from './schema';
|
import { IIconConfig } from './schema';
|
||||||
import logo from '@/assets/05-图标.png';
|
import logo from '@/assets/icon_01.png';
|
||||||
|
|
||||||
interface IconType extends IIconConfig {
|
interface IconType extends IIconConfig {
|
||||||
isTpl?: boolean;
|
isTpl?: boolean;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { IImageConfig } from './schema';
|
import { IImageConfig } from './schema';
|
||||||
import logo from '@/assets/06-图片组件.png';
|
import logo from '@/assets/img.png';
|
||||||
const Image = memo((props: IImageConfig) => {
|
const Image = memo((props: IImageConfig) => {
|
||||||
const {
|
const {
|
||||||
imgUrl,
|
imgUrl,
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { IListConfig } from './schema';
|
import { IListConfig } from './schema';
|
||||||
import logo from '@/assets/07-列表.png';
|
import logo from '@/assets/list.png';
|
||||||
const List = memo((props: IListConfig) => {
|
const List = memo((props: IListConfig) => {
|
||||||
const { round, sourceData, imgSize, fontSize, color } = props;
|
const { round, sourceData, imgSize, fontSize, color } = props;
|
||||||
return (
|
return (
|
||||||
@ -31,11 +31,7 @@ const List = memo((props: IListConfig) => {
|
|||||||
<div className={styles.sourceItem} key={i}>
|
<div className={styles.sourceItem} key={i}>
|
||||||
<div className={styles.imgWrap}>
|
<div className={styles.imgWrap}>
|
||||||
<img
|
<img
|
||||||
src={
|
src={item.imgUrl[0] ? item.imgUrl[0].url : ''}
|
||||||
item.imgUrl[0]
|
|
||||||
? item.imgUrl[0].url
|
|
||||||
: 'http://io.nainor.com/uploads/01_173e15d3493.png'
|
|
||||||
}
|
|
||||||
alt={item.desc}
|
alt={item.desc}
|
||||||
style={{
|
style={{
|
||||||
width: parseFloat(imgSize),
|
width: parseFloat(imgSize),
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { ILongTextConfig } from './schema';
|
import { ILongTextConfig } from './schema';
|
||||||
import logo from '@/assets/08-长文本.png';
|
import logo from '@/assets/longText.png';
|
||||||
const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
||||||
const {
|
const {
|
||||||
text,
|
text,
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { NoticeBar } from 'zarm';
|
import { NoticeBar } from 'zarm';
|
||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { INoticeConfig } from './schema';
|
import { INoticeConfig } from './schema';
|
||||||
import logo from '@/assets/09-通知.png';
|
import logo from '@/assets/notice.png';
|
||||||
const Notice = memo((props: INoticeConfig & { isTpl: boolean }) => {
|
const Notice = memo((props: INoticeConfig & { isTpl: boolean }) => {
|
||||||
const { text, speed, theme, isClose = false, isTpl } = props;
|
const { text, speed, theme, isClose = false, isTpl } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { IQrcodeConfig } from './schema';
|
import { IQrcodeConfig } from './schema';
|
||||||
import logo from '@/assets/10-二维码.png';
|
import logo from '@/assets/qrcode.png';
|
||||||
const Qrcode = memo((props: IQrcodeConfig & { isTpl: boolean }) => {
|
const Qrcode = memo((props: IQrcodeConfig & { isTpl: boolean }) => {
|
||||||
const { qrcode, text, color, fontSize = 14, isTpl } = props;
|
const { qrcode, text, color, fontSize = 14, isTpl } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { memo, useEffect, useRef } from 'react';
|
|||||||
import { Tabs } from 'zarm';
|
import { Tabs } from 'zarm';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { ITabConfig } from './schema';
|
import { ITabConfig } from './schema';
|
||||||
import logo from '@/assets/11-切换页.png';
|
import logo from '@/assets/tab.png';
|
||||||
const { Panel } = Tabs;
|
const { Panel } = Tabs;
|
||||||
|
|
||||||
const XTab = (props: ITabConfig & { isTpl: boolean }) => {
|
const XTab = (props: ITabConfig & { isTpl: boolean }) => {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { ITextConfig } from './schema';
|
import { ITextConfig } from './schema';
|
||||||
import logo from '@/assets/12-文本.png';
|
import logo from '@/assets/text.png';
|
||||||
const Text = memo((props: ITextConfig & { isTpl: boolean }) => {
|
const Text = memo((props: ITextConfig & { isTpl: boolean }) => {
|
||||||
const { align, text, fontSize, color, lineHeight, isTpl } = props;
|
const { align, text, fontSize, color, lineHeight, isTpl } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { memo } from 'react';
|
|||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { IWhiteTplConfig } from './schema';
|
import { IWhiteTplConfig } from './schema';
|
||||||
import logo from '@/assets/13-空白.png';
|
import logo from '@/assets/white.png';
|
||||||
interface IProps extends IWhiteTplConfig {
|
interface IProps extends IWhiteTplConfig {
|
||||||
isTpl: boolean;
|
isTpl: boolean;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { memo } from 'react';
|
|||||||
import { Player, BigPlayButton } from 'video-react';
|
import { Player, BigPlayButton } from 'video-react';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import { IVideoConfig } from './schema';
|
import { IVideoConfig } from './schema';
|
||||||
import logo from '@/assets/14-视频.png';
|
import logo from '@/assets/video.png';
|
||||||
const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => {
|
const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => {
|
||||||
const { poster, url, isTpl } = props;
|
const { poster, url, isTpl } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { memo, useState, useRef } from 'react';
|
|||||||
import { SearchOutlined } from '@ant-design/icons';
|
import { SearchOutlined } from '@ant-design/icons';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { IListConfig } from './schema';
|
import { IListConfig } from './schema';
|
||||||
import logo from '@/assets/07-列表.png';
|
import logo from '@/assets/list.png';
|
||||||
|
|
||||||
interface ListType extends IListConfig {
|
interface ListType extends IListConfig {
|
||||||
isTpl?: boolean;
|
isTpl?: boolean;
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
|
|||||||
import { Tabs } from 'zarm';
|
import { Tabs } from 'zarm';
|
||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
import { ITabConfig } from './schema';
|
import { ITabConfig } from './schema';
|
||||||
import logo from '@/assets/11-切换页.png';
|
import logo from '@/assets/tab.png';
|
||||||
|
|
||||||
interface TabType extends ITabConfig {
|
interface TabType extends ITabConfig {
|
||||||
isTpl?: boolean;
|
isTpl?: boolean;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React, { memo } from 'react';
|
import React, { memo } from 'react';
|
||||||
import { Progress } from 'zarm';
|
import { Progress } from 'zarm';
|
||||||
import { IXProgressConfig } from './schema';
|
import { IXProgressConfig } from './schema';
|
||||||
import logo from '@/assets/15-进度.png';
|
import logo from '@/assets/progress.png';
|
||||||
const XProgress = memo((props: IXProgressConfig & { isTpl: boolean }) => {
|
const XProgress = memo((props: IXProgressConfig & { isTpl: boolean }) => {
|
||||||
const { theme, size, shape, percent, strokeWidth, isTpl } = props;
|
const { theme, size, shape, percent, strokeWidth, isTpl } = props;
|
||||||
return (
|
return (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user