Merge branch 'main' of github.com:le5le-com/visualization-design

src/services/defaults.ts

@@ -177,18 +177,18 @@ export interface FormItemType extends FormItem {
   tips?: string; // 提示
   placeholder?: string; // input placeholder
   type:
-  | 'text' // string 类型输入框
-  | 'number'
-  | 'color'
-  | 'textarea'
-  | 'select'
-  | 'switch'
-  | 'code'
-  | 'image'
-  | 'icon'
-  | 'slider'
-  | 'autoComplete'
-  | 'label'; // 文字，不含输入框;
+    | 'text' // string 类型输入框
+    | 'number'
+    | 'color'
+    | 'textarea'
+    | 'select'
+    | 'switch'
+    | 'code'
+    | 'image'
+    | 'icon'
+    | 'slider'
+    | 'autoComplete'
+    | 'label'; // 文字，不含输入框;
   options?: {
     // 选项
     label: string; // 选项的标题，可以使用 html
@@ -1033,7 +1033,7 @@ export const formComponents = [
         name: 'FLV视频流',
         icon: 'l-pc',
         data: {
-          name: 'leFlvPlayer',
+          name: 'flvPlayerDom',
           width: 477,
           height: 268,
           externElement: true,
@@ -1197,7 +1197,7 @@ export const formComponents = [
         name: '水平时间轴',
         icon: 'l-shuipingshijianzhou',
         data: {
-          name: 'leTimeline',
+          name: 'timeline',
           width: 500,
           height: 40,
           hiddenText: true,
@@ -1261,7 +1261,7 @@ export const formComponents = [
         name: '垂直时间轴',
         icon: 'l-chuizhishijianzhou',
         data: {
-          name: 'leTimeline',
+          name: 'timeline',
           width: 40,
           height: 500,
           text: '时间轴',
@@ -1605,66 +1605,72 @@ export const formComponents = [
       },
       {
         name: '树',
-        icon: 'l-pc', //l-shu
+        icon: 'l-shu', //l-shu
         data: {
-          name: 'leTree',
-          width: 200,
-          height: 200,
+          name: 'tree',
+          width: 150,
+          height: 210,
           expanded: ['1', '2'],
+          fontSize: 20,
+          disableInput: true,
           data: [
             {
+              key: '1',
               label: '1',
               children: [
                 {
-                  label: '1-1'
+                  key: '1-1',
+                  label: '1-1',
                 },
                 {
-                  label: '1-2'
-                }
-              ]
+                  key: '1-1',
+                  label: '1-2',
+                },
+              ],
             },
             {
+              key: '2',
               label: '2',
               children: [
                 {
+                  key: '2-1',
                   label: '2-1',
                   children: [
                     {
+                      key: '2-1-1',
                       label: '2-1-1',
-                      children: [
-                        {
-                          label: '2-1-1-1'
-                        },
-                        {
-                          label: '2-2-2-2'
-                        }
-                      ]
                     },
                     {
-                      label: '2-2-2'
-                    }
-                  ]
+                      key: '2-1-2',
+                      label: '2-2-2',
+                    },
+                  ],
                 },
                 {
-                  label: '2-2'
-                }
-              ]
-            },
-            {
-              label: '3'
+                  key: '2-2',
+                  label: '2-2',
+                },
+              ],
             },
             {
-              label: '4',
-              children: [
-                {
-                  label: '4-1'
-                },
-                {
-                  label: '4-2'
-                }
-              ]
+              key: '3',
+              label: '3',
             },
-          ]
+          ],
+          props: {
+            custom: [
+              {
+                key: 'expandAll',
+                label: '展开全部节点',
+                type: 'bool',
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
@@ -1843,7 +1849,7 @@ export const formComponents = [
         name: '水平轮播',
         icon: 'l-paomadeng',
         data: {
-          name: 'leSwiperline',
+          name: 'swiperline',
           width: 200,
           height: 40,
           data: ['轮播第一次数据', '轮播第二次数据', '轮播第三次数据'],
@@ -1868,7 +1874,7 @@ export const formComponents = [
         name: '垂直轮播',
         icon: 'l-chuizhigundong',
         data: {
-          name: 'leSwiperline',
+          name: 'swiperline',
           width: 200,
           height: 24,
           direction: 'vertical',
@@ -1895,7 +1901,7 @@ export const formComponents = [
         name: '轮播图',
         icon: 'l-lunbotu',
         data: {
-          name: 'leSwiper',
+          name: 'swiperDom',
           width: 400,
           height: 300,
           data: [
@@ -1925,7 +1931,7 @@ export const formComponents = [
         name: '轮播页面',
         icon: 'l-lunboyemian',
         data: {
-          name: 'leSwiper',
+          name: 'swiperDom',
           width: 400,
           height: 300,
           swiperType: 'iframe',
@@ -2063,38 +2069,53 @@ export const formComponents = [
       },
       {
         name: '面包屑',
-        icon: 'l-pc', //l-mianbaoxie
+        icon: 'l-mianbaoxie', //l-mianbaoxie
         data: {
-          name: 'Breadcrumb',
+          name: 'breadcrumb',
           width: 200,
           height: 20,
           data: [
             {
               key: '1',
               text: '页面1',
-              to:'https://www.baidu.com',
-              target:'_blank'
+              to: 'https://www.baidu.com',
+              target: '_blank',
             },
             {
               key: '2',
               text: '页面2',
-              to:'https://2d.le5le.com/?id=641d524a8df2c654ea652d7e',
-              target:'_blank'
-            }, 
+              to: 'https://2d.le5le.com/?id=641d524a8df2c654ea652d7e',
+              target: '_blank',
+            },
             {
               key: '3',
               text: '页面3',
-              to:'https://2d.le5le.com/?id=6357a9e2d44b9402de84d2e8',
-              target:'_self'
-            }
+              to: 'https://2d.le5le.com/?id=6357a9e2d44b9402de84d2e8',
+              target: '_self',
+            },
           ],
+          props: {
+            custom: [
+              {
+                key: 'gap',
+                label: '间距',
+                type: 'number',
+                min: 0,
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
         name: '下拉菜单',
         icon: 'l-xialacaidan',
         data: {
-          name: 'leHeadMenu',
+          name: 'headMenuDom',
           width: 650,
           height: 60,
           externElement: true,
@@ -2145,7 +2166,7 @@ export const formComponents = [
         name: '导航菜单',
         icon: 'l-daohangcaidan',
         data: {
-          name: 'leMenu',
+          name: 'menuDom',
           width: 200,
           height: 400,
           externElement: true,
@@ -2206,9 +2227,9 @@ export const formComponents = [
       },
       {
         name: '分页',
-        icon: 'l-pc', //l-fenye
+        icon: 'l-fenye', //l-fenye
         data: {
-          name: 'lePagination',
+          name: 'pagination',
           width: 300,
           height: 200,
           size: 'small',
@@ -2216,6 +2237,7 @@ export const formComponents = [
           pageSize: 5,
           current: 1,
           maxPageBtn: 5,
+          disableInput: true,
           pageSizeOptions: [5, 10, 20, 30],
           props: {
             custom: [
@@ -2232,12 +2254,12 @@ export const formComponents = [
               },
               {
                 key: 'pageSizeOptions',
-                label: '分页大小控制器',
-                type: 'Array',
+                label: '分页大小',
+                type: 'code',
               },
               {
                 key: 'maxPageBtn',
-                label: '最多显示页码按钮数',
+                label: '最多显示页码数按钮数',
                 type: 'number',
               },
             ],
@@ -2285,37 +2307,58 @@ export const formComponents = [
         name: '选项卡',
         icon: 'l-xuanxiangka',
         data: {
-          name: 'leTab',
+          name: 'tab',
           width: 500,
           height: 50,
           direction: 'horizontal',
           selectKey: '1',
           selectedKeys: [],
           theme: '',
+          disableInput: true,
           data: [
             { text: '场景一', key: '0', isForbidden: true },
             { text: '场景二', key: '1' },
             { text: '场景三', key: '2' },
             { text: '场景四', key: '3' },
           ],
+          props: {
+            custom: [
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
         name: '多选选项卡',
         icon: 'l-duoxiangxuanxiangka',
         data: {
-          name: 'leTab',
+          name: 'tab',
           width: 500,
           height: 50,
           direction: 'horizontal',
           selectedKeys: ['0'],
           theme: 'multiple',
+          disableInput: true,
+
           data: [
             { text: '场景一', key: '0' },
             { text: '场景二', key: '1', isForbidden: true },
             { text: '场景三', key: '2' },
             { text: '场景四', key: '3' },
           ],
+          props: {
+            custom: [
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
     ],
@@ -2404,12 +2447,12 @@ export const formComponents = [
         name: '单选框',
         icon: 'l-danxuanxiang',
         data: {
-          name: 'leRadio',
+          name: 'radio',
           width: 300,
           height: 30,
           disableAnchor: true,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          theme: '',
+          theme: 'normal',
           itemPosition: [],
           data: [
             { key: '1', text: '选项一', isForbidden: true },
@@ -2417,23 +2460,77 @@ export const formComponents = [
             { key: '3', text: '选项三' },
           ],
           selectKey: '2',
+          props: {
+            custom: [
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+              {
+                key: 'direction',
+                label: '排列方向',
+                type: 'select',
+                options: [
+                  { label: '横向', value: 'horizontal' },
+                  { label: '纵向', value: 'vertical' },
+                ],
+              },
+              {
+                key: 'theme',
+                label: '模式',
+                type: 'select',
+                options: [
+                  { label: '通用模式', value: 'normal' },
+                  { label: '按钮模式', value: 'button' },
+                ],
+              },
+            ],
+          },
         },
       },
       {
         name: '多选框',
         icon: 'l-duoxuanxiang',
         data: {
-          name: 'leCheckBox',
+          name: 'checkbox',
           width: 300,
           height: 30,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          theme: '',
+          theme: 'normal', //button   normal
           data: [
             { key: '1', text: '选项一', isForbidden: true },
             { key: '2', text: '选项示例二' },
             { key: '3', text: '选项三' },
           ],
           selectedKeys: ['2', '3'],
+          props: {
+            custom: [
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+              {
+                key: 'direction',
+                label: '排列方向',
+                type: 'select',
+                options: [
+                  { label: '横向', value: 'horizontal' },
+                  { label: '纵向', value: 'vertical' },
+                ],
+              },
+              {
+                key: 'theme',
+                label: '模式',
+                type: 'select',
+                options: [
+                  { label: '通用模式', value: 'normal' },
+                  { label: '按钮模式', value: 'button' },
+                ],
+              },
+            ],
+          },
         },
       },
       {
@@ -2473,7 +2570,7 @@ export const formComponents = [
         name: '时间选择器',
         icon: 'l-shijianxuanzekuang',
         data: {
-          name: 'leInput',
+          name: 'inputDom',
           width: 200,
           height: 32,
           externElement: true,
@@ -2487,7 +2584,7 @@ export const formComponents = [
         name: '日期选择器',
         icon: 'l-riqixuanzekuang',
         data: {
-          name: 'leInput',
+          name: 'inputDom',
           width: 200,
           height: 32,
           externElement: true,
@@ -2501,7 +2598,7 @@ export const formComponents = [
         name: '颜色选择器',
         icon: 'l-yansexuanzekuang',
         data: {
-          name: 'leInput',
+          name: 'inputDom',
           width: 200,
           height: 32,
           externElement: true,
@@ -2619,12 +2716,19 @@ export const formComponents = [
       },
       {
         name: '圆形按钮',
-        icon: 'l-pc', //l-yuanxinganniu
+        icon: 'l-yuanxinganniu', //l-yuanxinganniu
         data: {
           name: 'roundSwitch',
-          width: 50,
-          height: 50,
-          checked:true
+          width: 128,
+          height: 128,
+          checked: true,
+          disableInput: true,
+          offColor: '#FFA98F',
+          onColor: '#80D99F',
+          color: '#4583FF', //66 33
+          background: '#4583FF33',
+          offShadowColor: '#FF5D3C',
+          onShadowColor: '#58CC84',
         },
       },
       {
@@ -2643,12 +2747,19 @@ export const formComponents = [
       },
       {
         name: '转换开关',
-        icon: 'l-pc', //l-zhuanhuankaiguan
+        icon: 'l-zhuanhuankaiguan', //l-zhuanhuankaiguan
         data: {
-          name: 'changeOverSwitch',
+          name: 'transferSwitch',
           width: 128,
           height: 128,
-          checked:true
+          checked: true,
+          disableInput: true,
+          offColor: '#FFA98F',
+          onColor: '#80D99F',
+          color: '#4583FF', //66 33
+          background: '#4583FF33',
+          offShadowColor: '#FF5D3C',
+          onShadowColor: '#58CC84',
         },
       },
       {