mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-11 17:32:50 +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 styles from './index.less';
|
||||
import { ICarouselConfig } from './schema';
|
||||
import logo from '@/assets/01-轮播.png';
|
||||
import logo from '@/assets/banner.png';
|
||||
|
||||
interface CarouselTypes extends ICarouselConfig {
|
||||
isTpl: boolean;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { memo } from 'react';
|
||||
import { IFooterConfig } from './schema';
|
||||
import logo from '@/assets/02-页脚.png';
|
||||
import logo from '@/assets/footer.png';
|
||||
const Footer = memo((props: IFooterConfig) => {
|
||||
const { bgColor, text, color, align, fontSize, height } = props;
|
||||
return (
|
||||
|
||||
@ -3,7 +3,7 @@ import { Button } from 'zarm';
|
||||
import BaseForm from './BaseForm';
|
||||
import styles from './index.less';
|
||||
import { IFormConfig } from './schema';
|
||||
import logo from '@/assets/03-表单.png';
|
||||
import logo from '@/assets/form.png';
|
||||
const FormComponent = (props: IFormConfig & { isTpl: boolean }) => {
|
||||
const {
|
||||
title,
|
||||
|
||||
@ -2,7 +2,7 @@ import { memo } from 'react';
|
||||
import styles from './index.less';
|
||||
import React from 'react';
|
||||
import { IHeaderConfig } from './schema';
|
||||
import logos from '@/assets/04-页头.png';
|
||||
import logos from '@/assets/header.png';
|
||||
const Header = memo((props: IHeaderConfig) => {
|
||||
const { bgColor, logo, logoText, fontSize, color } = props;
|
||||
return (
|
||||
|
||||
@ -3,7 +3,7 @@ import * as Icon from '@ant-design/icons';
|
||||
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
|
||||
import { AntdIconType } from './icon';
|
||||
import { IIconConfig } from './schema';
|
||||
import logo from '@/assets/05-图标.png';
|
||||
import logo from '@/assets/icon_01.png';
|
||||
|
||||
interface IconType extends IIconConfig {
|
||||
isTpl?: boolean;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { memo } from 'react';
|
||||
import { IImageConfig } from './schema';
|
||||
import logo from '@/assets/06-图片组件.png';
|
||||
import logo from '@/assets/img.png';
|
||||
const Image = memo((props: IImageConfig) => {
|
||||
const {
|
||||
imgUrl,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { memo } from 'react';
|
||||
import styles from './index.less';
|
||||
import { IListConfig } from './schema';
|
||||
import logo from '@/assets/07-列表.png';
|
||||
import logo from '@/assets/list.png';
|
||||
const List = memo((props: IListConfig) => {
|
||||
const { round, sourceData, imgSize, fontSize, color } = props;
|
||||
return (
|
||||
@ -31,11 +31,7 @@ const List = memo((props: IListConfig) => {
|
||||
<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'
|
||||
}
|
||||
src={item.imgUrl[0] ? item.imgUrl[0].url : ''}
|
||||
alt={item.desc}
|
||||
style={{
|
||||
width: parseFloat(imgSize),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { memo } from 'react';
|
||||
import { ILongTextConfig } from './schema';
|
||||
import logo from '@/assets/08-长文本.png';
|
||||
import logo from '@/assets/longText.png';
|
||||
const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => {
|
||||
const {
|
||||
text,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { NoticeBar } from 'zarm';
|
||||
import React, { memo } from 'react';
|
||||
import { INoticeConfig } from './schema';
|
||||
import logo from '@/assets/09-通知.png';
|
||||
import logo from '@/assets/notice.png';
|
||||
const Notice = memo((props: INoticeConfig & { isTpl: boolean }) => {
|
||||
const { text, speed, theme, isClose = false, isTpl } = props;
|
||||
return (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { memo } from 'react';
|
||||
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, text, color, fontSize = 14, isTpl } = props;
|
||||
return (
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { memo, useEffect, useRef } from 'react';
|
||||
import { Tabs } from 'zarm';
|
||||
import styles from './index.less';
|
||||
import { ITabConfig } from './schema';
|
||||
import logo from '@/assets/11-切换页.png';
|
||||
import logo from '@/assets/tab.png';
|
||||
const { Panel } = Tabs;
|
||||
|
||||
const XTab = (props: ITabConfig & { isTpl: boolean }) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { memo } from 'react';
|
||||
import { ITextConfig } from './schema';
|
||||
import logo from '@/assets/12-文本.png';
|
||||
import logo from '@/assets/text.png';
|
||||
const Text = memo((props: ITextConfig & { isTpl: boolean }) => {
|
||||
const { align, text, fontSize, color, lineHeight, isTpl } = props;
|
||||
return (
|
||||
|
||||
@ -2,7 +2,7 @@ import { memo } from 'react';
|
||||
import styles from './index.less';
|
||||
import React from 'react';
|
||||
import { IWhiteTplConfig } from './schema';
|
||||
import logo from '@/assets/13-空白.png';
|
||||
import logo from '@/assets/white.png';
|
||||
interface IProps extends IWhiteTplConfig {
|
||||
isTpl: boolean;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { memo } from 'react';
|
||||
import { Player, BigPlayButton } from 'video-react';
|
||||
import './index.css';
|
||||
import { IVideoConfig } from './schema';
|
||||
import logo from '@/assets/14-视频.png';
|
||||
import logo from '@/assets/video.png';
|
||||
const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => {
|
||||
const { poster, url, isTpl } = props;
|
||||
return (
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { memo, useState, useRef } from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import styles from './index.less';
|
||||
import { IListConfig } from './schema';
|
||||
import logo from '@/assets/07-列表.png';
|
||||
import logo from '@/assets/list.png';
|
||||
|
||||
interface ListType extends IListConfig {
|
||||
isTpl?: boolean;
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
|
||||
import { Tabs } from 'zarm';
|
||||
import styles from './index.less';
|
||||
import { ITabConfig } from './schema';
|
||||
import logo from '@/assets/11-切换页.png';
|
||||
import logo from '@/assets/tab.png';
|
||||
|
||||
interface TabType extends ITabConfig {
|
||||
isTpl?: boolean;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { memo } from 'react';
|
||||
import { Progress } from 'zarm';
|
||||
import { IXProgressConfig } from './schema';
|
||||
import logo from '@/assets/15-进度.png';
|
||||
import logo from '@/assets/progress.png';
|
||||
const XProgress = memo((props: IXProgressConfig & { isTpl: boolean }) => {
|
||||
const { theme, size, shape, percent, strokeWidth, isTpl } = props;
|
||||
return (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user