Merge pull request #16 from MrXujiang/yehuozhiliwork

connect schema&template

.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/'),
+  },
 });
-

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<string>;
-  onChange: (v: string) => void;
+  type?: IconTypes;
+  icons: Array<IconTypes>;
+  onChange?: (v: string) => void;
 }
 
 export default memo((props: CardPickerType) => {
   const { type, icons, onChange } = props;
 
-  const [selected, setSelected] = useState(type);
+  const [selected, setSelected] = useState<IconTypes>(type);
 
-  const handlePicker = v => {
+  const handlePicker = (v: IconTypes) => {
     if (onChange) {
       onChange(v);
       return;

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<CarouselTypes>) => {
   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 (
     <div style={{ width: '100%', overflow: 'hidden' }}>
       {isTpl ? (

src/components/DynamicEngine/graphTpl.js

@@ -1,8 +0,0 @@
-const graphTpl = [
-    { 
-        type:'XProgress',
-        h: 102 
-    }
-]
-
-export default graphTpl

src/components/DynamicEngine/graphTpl.ts

@@ -0,0 +1,13 @@
+import { BasicTemplateItem } from './schema';
+
+export type GraphTplKeyType = 'XProgress';
+export type GraphTplType = Array<BasicTemplateItem<GraphTplKeyType>>;
+
+const graphTpl: GraphTplType = [
+  {
+    type: 'XProgress',
+    h: 102,
+  },
+];
+
+export default graphTpl;

src/components/DynamicEngine/mediaTpl.js

@@ -1,8 +0,0 @@
-const mediaTpl = [
-    { 
-      type:'Video',
-      h: 107
-    }
-]
-  
-  export default mediaTpl

src/components/DynamicEngine/mediaTpl.ts

@@ -0,0 +1,13 @@
+import { BasicTemplateItem } from './schema';
+
+export type MediaTplKeyType = 'Video';
+export type MediaTplType = Array<BasicTemplateItem<MediaTplKeyType>>;
+
+const mediaTpl: MediaTplType = [
+  {
+    type: 'Video',
+    h: 107,
+  },
+];
+
+export default mediaTpl;

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<T> = {
+  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<any>;
+  config: Object;
+}
+
+export interface BasicRangeType<T> {
+  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<CarouselImgType>;
+  tplImg: string;
+};
+export type CraouselKeyType = keyof CarouselConfigType;
+
+export type CarouselConfigKeyType = 'down' | 'left';
+
+export interface CarouselEditItem<T extends CraouselKeyType> {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: T extends 'direction' ? Array<BasicRangeType<CarouselConfigKeyType>> : 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<TextAlignRangeType>;
+
+export interface TextEditItem<T extends TextKeyType> {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: T extends 'align' ? Array<TextRangeItem> : 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<string>;
+  color: string;
+  activeColor: string;
+  fontSize: number;
+  imgSize: number;
+  sourceData: Array<TabConfigSourceData>;
+};
+
+export type TabKeyType = keyof TabConfigType;
+
+export interface TabConfigSourceData extends BasicDataSource {
+  type: number;
+}
+
+export type TabEditItem<T extends TabKeyType> = {
+  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<T extends NoticeKeyType> = {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: Array<NoticeThemeRageItem>;
+};
+export interface NoticeSchema extends SchemaBasicImplement {
+  editData: [
+    NoticeEditItem<'text'>,
+    NoticeEditItem<'speed'>,
+    NoticeEditItem<'theme'>,
+    NoticeEditItem<'isClose'>,
+  ];
+  config: NoticeConfigType;
+}
+
+//__________________________________________
+//________________QRcode________________________
+export type QRCodeConfigType = {
+  qrcode: Array<BasicDataImgUrl>;
+  text: string;
+  color: string;
+  fontSize: number;
+};
+
+export type QRCodeKeyType = keyof QRCodeConfigType;
+
+export type QRCodeEditItem<T extends QRCodeKeyType> = {
+  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<T extends FooterKeyType> = {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: Array<TextRangeItem>;
+};
+
+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<T extends ImageKeyType> = {
+  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<T extends HeaderKeyType> = {
+  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<T extends ListKeyType> = {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: Array<BasicRangeType<number>>;
+};
+
+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<T extends IconKeyType> = {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  icons?: Array<IconTypes>;
+};
+
+export interface IconSchema extends SchemaBasicImplement {
+  editData: [
+    IconEditItem<'color'>,
+    IconEditItem<'size'>,
+    IconEditItem<'spin'>,
+    IconEditItem<'type'>,
+  ];
+  config: IconConfigType;
+}
+
+//__________________________________________
+//________________VEDEO_______________________
+
+export type VideoConfigType = {
+  poster: Array<BasicDataImgUrl>;
+  url: string;
+};
+
+export type VideoKeyType = keyof VideoConfigType;
+
+export type VideoEditItem<T extends VideoKeyType> = {
+  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<T extends XProgressKeyType> = {
+  key: T;
+  name: string;
+  type: BasicSchemaType;
+  range?: BasicRangeType<string>[] | 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;

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<BasicTemplateItem<TemplateKeyType>>;
+
+const template: TemplateType = [
   {
     type: 'Text',
     h: 20,

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<IconConfigType, 'spin' | 'color'> {
+  isTpl?: boolean;
+  spin?: IconConfigType['spin'];
+  color?: IconConfigType['color'];
 }
 
 export type AntdIconType =