From 22d92d4a0b93cec79839be25ee79e5018cfd64d2 Mon Sep 17 00:00:00 2001 From: yehuozhili Date: Fri, 4 Sep 2020 06:46:38 +0800 Subject: [PATCH] connect schema&template --- .umirc.js => .umirc.ts | 19 +- src/components/CardPicker/index.tsx | 11 +- .../Carousel/{index.js => index.tsx} | 13 +- src/components/DynamicEngine/graphTpl.js | 8 - src/components/DynamicEngine/graphTpl.ts | 13 + src/components/DynamicEngine/mediaTpl.js | 8 - src/components/DynamicEngine/mediaTpl.ts | 13 + .../DynamicEngine/{schema.js => schema.ts} | 490 +++++++++++++++++- .../{template.js => template.ts} | 18 +- .../FormEditor/{index.js => index.tsx} | 0 src/components/Icon/index.tsx | 11 +- 11 files changed, 553 insertions(+), 51 deletions(-) rename .umirc.js => .umirc.ts (82%) rename src/components/Carousel/{index.js => index.tsx} (76%) delete mode 100644 src/components/DynamicEngine/graphTpl.js create mode 100644 src/components/DynamicEngine/graphTpl.ts delete mode 100644 src/components/DynamicEngine/mediaTpl.js create mode 100644 src/components/DynamicEngine/mediaTpl.ts rename src/components/DynamicEngine/{schema.js => schema.ts} (55%) rename src/components/DynamicEngine/{template.js => template.ts} (58%) rename src/components/FormEditor/{index.js => index.tsx} (100%) diff --git a/.umirc.js b/.umirc.ts similarity index 82% rename from .umirc.js rename to .umirc.ts index 181ada5..c2822da 100644 --- a/.umirc.js +++ b/.umirc.ts @@ -6,7 +6,7 @@ export default defineConfig({ loading: '@/components/LoadingCp', }, dva: { - immer: true + immer: true, }, antd: {}, sass: { @@ -37,22 +37,19 @@ export default defineConfig({ { path: '/preview', component: '../pages/editor/preview', - } - ] - } + }, + ], + }, ], theme: { - "primary-color": "#2F54EB", + 'primary-color': '#2F54EB', // "btn-primary-bg": "#2F54EB" }, - extraBabelPlugins: [ - ['import', { libraryName: "zarm", style: true }], - ], + extraBabelPlugins: [['import', { libraryName: 'zarm', style: true }]], // sass: {}, alias: { components: path.resolve(__dirname, 'src/components/'), utils: path.resolve(__dirname, 'src/utils/'), - assets: path.resolve(__dirname, 'src/assets/') - } + assets: path.resolve(__dirname, 'src/assets/'), + }, }); - diff --git a/src/components/CardPicker/index.tsx b/src/components/CardPicker/index.tsx index 195483b..042c879 100644 --- a/src/components/CardPicker/index.tsx +++ b/src/components/CardPicker/index.tsx @@ -2,19 +2,20 @@ import { useState, useEffect, memo } from 'react'; import classnames from 'classnames'; import Icon from '../Icon'; import styles from './index.less'; +import { IconTypes } from '../DynamicEngine/schema'; interface CardPickerType { - type: string; - icons: Array; - onChange: (v: string) => void; + type?: IconTypes; + icons: Array; + onChange?: (v: string) => void; } export default memo((props: CardPickerType) => { const { type, icons, onChange } = props; - const [selected, setSelected] = useState(type); + const [selected, setSelected] = useState(type); - const handlePicker = v => { + const handlePicker = (v: IconTypes) => { if (onChange) { onChange(v); return; diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.tsx similarity index 76% rename from src/components/Carousel/index.js rename to src/components/Carousel/index.tsx index ba24534..0f529c9 100644 --- a/src/components/Carousel/index.js +++ b/src/components/Carousel/index.tsx @@ -1,10 +1,15 @@ -import React, { memo } from 'react'; +import React, { memo, PropsWithChildren } from 'react'; import { Carousel } from 'zarm'; import styles from './index.less'; +import { CarouselConfigType } from '../DynamicEngine/schema'; -const XCarousel = memo(props => { +interface CarouselTypes extends CarouselConfigType { + isTpl: boolean; +} + +const XCarousel = memo((props: PropsWithChildren) => { const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props; - + console.log(direction); const contentRender = () => { return imgList.map((item, i) => { return ( @@ -15,8 +20,6 @@ const XCarousel = memo(props => { }); }; - console.log(isTpl); - return (
{isTpl ? ( diff --git a/src/components/DynamicEngine/graphTpl.js b/src/components/DynamicEngine/graphTpl.js deleted file mode 100644 index 0b98cf4..0000000 --- a/src/components/DynamicEngine/graphTpl.js +++ /dev/null @@ -1,8 +0,0 @@ -const graphTpl = [ - { - type:'XProgress', - h: 102 - } -] - -export default graphTpl \ No newline at end of file diff --git a/src/components/DynamicEngine/graphTpl.ts b/src/components/DynamicEngine/graphTpl.ts new file mode 100644 index 0000000..b1f9728 --- /dev/null +++ b/src/components/DynamicEngine/graphTpl.ts @@ -0,0 +1,13 @@ +import { BasicTemplateItem } from './schema'; + +export type GraphTplKeyType = 'XProgress'; +export type GraphTplType = Array>; + +const graphTpl: GraphTplType = [ + { + type: 'XProgress', + h: 102, + }, +]; + +export default graphTpl; diff --git a/src/components/DynamicEngine/mediaTpl.js b/src/components/DynamicEngine/mediaTpl.js deleted file mode 100644 index ec541b2..0000000 --- a/src/components/DynamicEngine/mediaTpl.js +++ /dev/null @@ -1,8 +0,0 @@ -const mediaTpl = [ - { - type:'Video', - h: 107 - } -] - - export default mediaTpl \ No newline at end of file diff --git a/src/components/DynamicEngine/mediaTpl.ts b/src/components/DynamicEngine/mediaTpl.ts new file mode 100644 index 0000000..a9d7e5f --- /dev/null +++ b/src/components/DynamicEngine/mediaTpl.ts @@ -0,0 +1,13 @@ +import { BasicTemplateItem } from './schema'; + +export type MediaTplKeyType = 'Video'; +export type MediaTplType = Array>; + +const mediaTpl: MediaTplType = [ + { + type: 'Video', + h: 107, + }, +]; + +export default mediaTpl; diff --git a/src/components/DynamicEngine/schema.js b/src/components/DynamicEngine/schema.ts similarity index 55% rename from src/components/DynamicEngine/schema.js rename to src/components/DynamicEngine/schema.ts index 58b7589..95a189a 100644 --- a/src/components/DynamicEngine/schema.js +++ b/src/components/DynamicEngine/schema.ts @@ -1,4 +1,478 @@ -export default { +//_______basic___________ + +import { TemplateKeyType } from './template'; +import { MediaTplKeyType } from './mediaTpl'; +import { GraphTplKeyType } from './graphTpl'; + +export type BasicSchemaType = + | 'Radio' + | 'Switch' + | 'DataList' + | 'Text' + | 'Color' + | 'Number' + | 'Select' + | 'MutiText' + | 'Upload' + | 'CardPicker'; +export type BasicTemplateItem = { + type: T; + h: number; +}; +export type BasicTheme = 'warning' | 'success' | 'danger'; + +export type AllTemplateType = TemplateKeyType | MediaTplKeyType | GraphTplKeyType; + +export type SchemaImplement = { + [key in AllTemplateType]: SchemaBasicImplement; +}; + +export interface SchemaBasicImplement { + editData: Array; + config: Object; +} + +export interface BasicRangeType { + key: T; + text: string; +} +export type BasicDataImgUrl = { + uid: string; + name: string; + status: string; + url: string; +}; + +export type BasicDataSource = { + id: string; + title: string; + desc: string; + link: string; + imgUrl: BasicDataImgUrl[]; +}; + +//____________________carousel___________ + +export type CarouselConfigType = { + direction: CarouselConfigKeyType; + swipeable: boolean; + autoPlay: boolean; + imgList: Array; + tplImg: string; +}; +export type CraouselKeyType = keyof CarouselConfigType; + +export type CarouselConfigKeyType = 'down' | 'left'; + +export interface CarouselEditItem { + key: T; + name: string; + type: BasicSchemaType; + range?: T extends 'direction' ? Array> : never; +} + +export type CarouselImgTypeItem = BasicDataImgUrl; + +export type CarouselImgType = BasicDataSource; +export interface CarouselSchema extends SchemaBasicImplement { + editData: [ + CarouselEditItem<'direction'>, + CarouselEditItem<'swipeable'>, + CarouselEditItem<'autoPlay'>, + CarouselEditItem<'imgList'>, + ]; + config: CarouselConfigType; +} +//__________________________________________ +//________________Text________________________ +export type TextConfigType = { + text: string; + color: string; + fontSize: number; + align: TextAlignRangeType; + lineHeight: number; +}; +export type TextKeyType = keyof TextConfigType; +export type TextAlignRangeType = 'left' | 'center' | 'right'; +export type TextRangeItem = BasicRangeType; + +export interface TextEditItem { + key: T; + name: string; + type: BasicSchemaType; + range?: T extends 'align' ? Array : never; +} + +export interface TextSchema extends SchemaBasicImplement { + editData: [ + TextEditItem<'text'>, + TextEditItem<'color'>, + TextEditItem<'fontSize'>, + TextEditItem<'align'>, + TextEditItem<'lineHeight'>, + ]; + config: TextConfigType; +} + +//__________________________________________ +//________________TAB________________________ +export type TabConfigType = { + tabs: Array; + color: string; + activeColor: string; + fontSize: number; + imgSize: number; + sourceData: Array; +}; + +export type TabKeyType = keyof TabConfigType; + +export interface TabConfigSourceData extends BasicDataSource { + type: number; +} + +export type TabEditItem = { + key: T; + name: string; + type: BasicSchemaType; + isCrop?: boolean; + cropRate?: number; +}; + +export interface TabSchema extends SchemaBasicImplement { + editData: [ + TabEditItem<'tabs'>, + TabEditItem<'activeColor'>, + TabEditItem<'color'>, + TabEditItem<'fontSize'>, + TabEditItem<'imgSize'>, + TabEditItem<'sourceData'>, + ]; + config: TabConfigType; +} +//__________________________________________ +//________________Notice________________________ + +export type NoticeConfigType = { + text: string; + link: string; + speed: number; + theme: NoticeEditDataThemeKey; + isClose: boolean; +}; +export type NoticeKeyType = keyof NoticeConfigType; +export type NoticeThemeRageItem = { + key: NoticeEditDataThemeKey; + text: string; +}; +export type NoticeEditDataThemeKey = BasicTheme | 'primary' | 'default'; +export type NoticeEditItem = { + key: T; + name: string; + type: BasicSchemaType; + range?: Array; +}; +export interface NoticeSchema extends SchemaBasicImplement { + editData: [ + NoticeEditItem<'text'>, + NoticeEditItem<'speed'>, + NoticeEditItem<'theme'>, + NoticeEditItem<'isClose'>, + ]; + config: NoticeConfigType; +} + +//__________________________________________ +//________________QRcode________________________ +export type QRCodeConfigType = { + qrcode: Array; + text: string; + color: string; + fontSize: number; +}; + +export type QRCodeKeyType = keyof QRCodeConfigType; + +export type QRCodeEditItem = { + key: T; + name: string; + type: BasicSchemaType; + isCrop?: boolean; + cropRate?: number; +}; + +export interface QRCodeSchema extends SchemaBasicImplement { + editData: [ + QRCodeEditItem<'qrcode'>, + QRCodeEditItem<'text'>, + QRCodeEditItem<'color'>, + QRCodeEditItem<'fontSize'>, + ]; + config: QRCodeConfigType; +} + +//__________________________________________ +//________________Footer________________________ + +export type FooterConfigType = { + bgColor: string; + text: string; + color: string; + align: TextAlignRangeType; + fontSize: number; + height: number; +}; + +export type FooterKeyType = keyof FooterConfigType; + +export type FooterEditItem = { + key: T; + name: string; + type: BasicSchemaType; + range?: Array; +}; + +export interface FooterSchema extends SchemaBasicImplement { + editData: [ + FooterEditItem<'bgColor'>, + FooterEditItem<'height'>, + FooterEditItem<'text'>, + FooterEditItem<'fontSize'>, + FooterEditItem<'color'>, + FooterEditItem<'align'>, + ]; + config: FooterConfigType; +} + +//__________________________________________ +//________________IMGAGE________________________ + +export type ImageConfigType = { + imgUrl: BasicDataImgUrl[]; + round: number; +}; + +export type ImageKeyType = keyof ImageConfigType; + +export type ImageEditItem = { + key: T; + name: string; + type: BasicSchemaType; + isCrop?: boolean; +}; + +export interface ImageSchema extends SchemaBasicImplement { + editData: [ImageEditItem<'imgUrl'>, ImageEditItem<'round'>]; + config: ImageConfigType; +} + +//__________________________________________ +//________________header________________________ + +export type HeaderConfigType = { + bgColor: string; + logo: BasicDataImgUrl[]; + logoText: string; + fontSize: number; + color: string; + height: number; +}; + +export type HeaderKeyType = keyof HeaderConfigType; + +export type HeaderEditItem = { + key: T; + name: string; + type: BasicSchemaType; + isCrop?: boolean; + cropRate?: number; +}; + +export interface HeaderSchema extends SchemaBasicImplement { + editData: [ + HeaderEditItem<'bgColor'>, + HeaderEditItem<'height'>, + HeaderEditItem<'logo'>, + HeaderEditItem<'logoText'>, + HeaderEditItem<'color'>, + HeaderEditItem<'fontSize'>, + ]; + config: HeaderConfigType; +} + +//__________________________________________ +//________________list________________________ +export type ListConfigType = { + sourceData: BasicDataSource[]; + round: number; + imgSize: number; + fontSize: number; + color: string; +}; + +export type ListKeyType = keyof ListConfigType; + +export type ListEditItem = { + key: T; + name: string; + type: BasicSchemaType; + range?: Array>; +}; + +export interface ListSchema extends SchemaBasicImplement { + editData: [ + ListEditItem<'sourceData'>, + ListEditItem<'round'>, + ListEditItem<'imgSize'>, + ListEditItem<'fontSize'>, + ListEditItem<'color'>, + ]; + config: ListConfigType; +} +//__________________________________________ +//________________Icon________________________ + +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'; + +export type IconConfigType = { + color: string; + size: number; + spin: boolean; + type: IconTypes; +}; + +export type IconKeyType = keyof IconConfigType; + +export type IconEditItem = { + key: T; + name: string; + type: BasicSchemaType; + icons?: Array; +}; + +export interface IconSchema extends SchemaBasicImplement { + editData: [ + IconEditItem<'color'>, + IconEditItem<'size'>, + IconEditItem<'spin'>, + IconEditItem<'type'>, + ]; + config: IconConfigType; +} + +//__________________________________________ +//________________VEDEO_______________________ + +export type VideoConfigType = { + poster: Array; + url: string; +}; + +export type VideoKeyType = keyof VideoConfigType; + +export type VideoEditItem = { + key: T; + name: string; + type: BasicSchemaType; +}; + +export interface VideoSchema extends SchemaBasicImplement { + editData: [VideoEditItem<'poster'>, VideoEditItem<'url'>]; + config: VideoConfigType; +} + +//__________________________________________ +//________________xprogress________________________ + +export type XProgressShapeType = 'circle' | 'line' | 'semi-circle'; +export type XProgressConfigType = { + theme: BasicTheme; + shape: XProgressShapeType; + size: number; + percent: number; + strokeWidth: number; +}; + +export type XProgressKeyType = keyof XProgressConfigType; + +export type XProgressEditItem = { + key: T; + name: string; + type: BasicSchemaType; + range?: BasicRangeType[] | number[]; +}; + +export interface XProgressSchema extends SchemaBasicImplement { + editData: [ + XProgressEditItem<'theme'>, + XProgressEditItem<'shape'>, + XProgressEditItem<'size'>, + XProgressEditItem<'percent'>, + XProgressEditItem<'strokeWidth'>, + ]; + config: XProgressConfigType; +} + +//__________________________________________ +//________________SCHEMA________________________ + +export interface SchemaType extends SchemaImplement { + Carousel: CarouselSchema; + Text: TextSchema; + Tab: TabSchema; + Notice: NoticeSchema; + Qrcode: QRCodeSchema; + Footer: FooterSchema; + Image: ImageSchema; + Header: HeaderSchema; + List: ListSchema; + Icon: IconSchema; + Video: VideoSchema; + XProgress: XProgressSchema; +} + +const schema: SchemaType = { Carousel: { editData: [ { @@ -7,7 +481,7 @@ export default { type: 'Radio', range: [ { - key: 'top', + key: 'down', text: '从上到下', }, { @@ -38,7 +512,7 @@ export default { autoPlay: false, imgList: [ { - id: 1, + id: '1', title: '趣谈小课1', desc: '致力于打造优质小课程', link: 'xxxxx', @@ -52,7 +526,7 @@ export default { ], }, { - id: 2, + id: '2', title: '趣谈小课1', desc: '致力于打造优质小课程', link: 'xxxxx', @@ -162,7 +636,7 @@ export default { imgSize: 100, sourceData: [ { - id: 1, + id: '1', title: '趣谈小课1', desc: '致力于打造优质小课程', link: 'xxxxx', @@ -177,7 +651,7 @@ export default { ], }, { - id: 2, + id: '2', title: '趣谈小课2', desc: '致力于打造优质小课程', link: 'xxxxx', @@ -192,7 +666,7 @@ export default { ], }, { - id: 3, + id: '3', title: '趣谈小课3', desc: '致力于打造优质小课程', link: 'xxxxx', @@ -690,3 +1164,5 @@ export default { }, }, }; + +export default schema; diff --git a/src/components/DynamicEngine/template.js b/src/components/DynamicEngine/template.ts similarity index 58% rename from src/components/DynamicEngine/template.js rename to src/components/DynamicEngine/template.ts index d59f3fd..258afde 100644 --- a/src/components/DynamicEngine/template.js +++ b/src/components/DynamicEngine/template.ts @@ -1,4 +1,20 @@ -const template = [ +import { BasicTemplateItem } from './schema'; + +export type TemplateKeyType = + | 'Text' + | 'Carousel' + | 'Tab' + | 'Notice' + | 'Qrcode' + | 'Icon' + | 'Image' + | 'Header' + | 'List' + | 'Footer'; + +export type TemplateType = Array>; + +const template: TemplateType = [ { type: 'Text', h: 20, diff --git a/src/components/FormEditor/index.js b/src/components/FormEditor/index.tsx similarity index 100% rename from src/components/FormEditor/index.js rename to src/components/FormEditor/index.tsx diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 81baf1f..b9c8cef 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -3,13 +3,12 @@ import * as Icon from '@ant-design/icons'; import IconImg from 'assets/icon.png'; import { TwoToneColor } from '@ant-design/icons'; import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'; +import { IconTypes, IconConfigType } from '../DynamicEngine/schema'; -interface IconType { - color?: TwoToneColor; - size?: number; - type?: string; - spin?: boolean; - isTpl?: string; +interface IconType extends Omit { + isTpl?: boolean; + spin?: IconConfigType['spin']; + color?: IconConfigType['color']; } export type AntdIconType =