Merge branch 'main' into deploy

src/services/common.ts

@@ -176,21 +176,6 @@ export const save = async (
   }
   if (type === SaveType.SaveAs) {
     // 另存为一定走 新增 ，由于后端 未控制 userId 等属性，清空一下
-    const delAttrs = [
-      'userId',
-      '_id',
-      'id',
-      'shared',
-      'star',
-      'view',
-      'username',
-      'editorName',
-      'editorId',
-      'createdAt',
-      'updatedAt',
-      'recommend',
-      'team',
-    ];
     for (const k of delAttrs) {
       delete (data as any)[k];
     }
@@ -376,6 +361,11 @@ export const newFile = () => {
   }, 300);
 };
 
+export const inTreePanel = reactive({
+  value: false,
+  timer: undefined,
+});
+
 const tree = reactive({
   list: [],
   patch: true,
@@ -481,7 +471,7 @@ export const delAttrs = [
   'editorId',
   'editorName',
   'createdAt',
-  'folder',
+  'tags',
   'image',
   'id',
   '_id',

src/services/defaults.ts

@@ -951,18 +951,14 @@ export const formComponents = [
         data: {
           anchors: [],
           disableAnchor: true,
-          name: 'slider',
-          width: 300,
-          height: 20,
-          value: 10,
-          textWidth: 50,
-          barHeight: 4,
-          min: 0,
-          max: 100,
-          color: '#1890ff',
-          background: '#D4D6D9',
-          textColor: '#222222',
-          unit: '%',
+          name: 'progress',
+          width: 164,
+          height: 6,
+          borderRadius: 0.5,
+          progressColor: '#4583ff',
+          progress: 0.8,
+          background: 'rgba(225, 227, 232, 1)',
+          lineWidth: 0,
         },
       },
       {
@@ -1008,6 +1004,20 @@ export const formComponents = [
             'https://video.699pic.com/videos/17/69/11/a_aa3jeKZ0D63g1556176911_10s.mp4',
         },
       },
+      {
+        name: 'FLV视频流',
+        icon: 'l-pc',
+        data: {
+          name: 'leFlvPlayer',
+          width: 477,
+          height: 268,
+          externElement: true,
+          video:
+            'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
+          mediaDataSource: {},
+          optionalConfig: {},
+        },
+      },
       {
         name: '音频',
         icon: 'l-pc',
@@ -1305,8 +1315,8 @@ export const formComponents = [
         icon: 'l-02',
         data: {
           name: 'iframe',
-          width: 100,
-          height: 100,
+          width: 500,
+          height: 400,
           externElement: true,
           iframe: 'https://le5le.com',
         },
@@ -1321,8 +1331,32 @@ export const formComponents = [
         name: '业务指标',
         icon: 'l-pc',
         data: {
-          width: 200,
-          height: 200,
+          width: 115,
+          height: 25,
+          name: 'indicator',
+          data: [
+            {
+              type: 'text',
+              color: '',
+              x: 0,
+              text: '业务指标',
+            },
+            {
+              type: 'icon',
+              x: 0.5,
+              size: 0.5, //高度的倍数
+              color: '#ff0000',
+              background: '#f00',
+              path: 'M116.77950993 500.07050546c15.9195644 15.9195644 41.65144342 15.9195644 57.57100785 0L471.28500154 203.13602167 471.28500154 919.14998461c0 22.47467916 18.24031931 40.71499846 40.71499846 40.71499845s40.71499846-18.24031931 40.71499846-40.71499845l0-716.01396294 296.93448376 296.93448379c15.9195644 15.9195644 41.65144342 15.9195644 57.57100785 0s15.9195644-41.65144342 1e-8-57.57100783l-366.43498616-366.39427116c-3.74577985-3.78649485-8.26514469-6.75868973-13.27308951-8.83515464C522.5858996 65.19360688 517.29294978 64.13501693 512 64.13501694s-10.5858996 1.05858996-15.55312942 3.13505489c-5.00794479 2.07646491-9.48659464 5.0486598-13.27308948 8.83515464l-366.43498616 366.39427115C100.85994556 458.41906201 100.85994555 484.15094105 116.77950993 500.07050546z',
+            },
+            {
+              textColor: '#f00',
+              type: 'text',
+              color: '',
+              x: 0.6,
+              text: '20%',
+            },
+          ],
         },
       },
       {
@@ -1330,7 +1364,26 @@ export const formComponents = [
         icon: 'l-pc',
         data: {
           width: 200,
-          height: 200,
+          height: 46,
+          text: '用于表示普通操作信息提示',
+          borderRadius: 6,
+          name: 'rectangle',
+          icon: '\ue6e4',
+          iconFamily: 'l-icon',
+          iconColor: '#4583ff',
+          iconSize: 17.5,
+          iconAlign: 'left',
+          iconLeft: 8,
+          textAlign: 'left',
+          color: 'rgba(235, 235, 235, 1)',
+          background: 'rgba(255, 255, 255, 1)',
+          textLeft: 30,
+          shadow: false,
+          textColor: 'rgba(0, 0, 0, 1)',
+          shadowColor: 'rgba(250, 247, 247, 0.5)',
+          shadowOffsetX: 6,
+          shadowOffsetY: 6,
+          shadowBlur: 20,
         },
       },
       {
@@ -1412,6 +1465,28 @@ export const formComponents = [
           hiddenText: true,
         },
       },
+      {
+        name: '轮播页面',
+        icon: 'l-pc',
+        data: {
+          name: 'leSwiper',
+          width: 400,
+          height: 300,
+          swiperType: 'iframe',
+          data: [
+            {
+              src: 'https://2d.le5le.com/preview?id=6357a9e2d44b9402de84d2e8',
+            },
+            {
+              src: 'https://2d.le5le.com/preview?id=6357aec8d44b9402de84d2f1',
+            },
+            {
+              src: 'https://2d.le5le.com/preview?id=641d524a8df2c654ea652d7e',
+            },
+          ],
+          hiddenText: true,
+        },
+      },
     ],
   },
   {
@@ -1422,8 +1497,23 @@ export const formComponents = [
         name: '链接',
         icon: 'l-pc',
         data: {
-          width: 200,
-          height: 200,
+          text: '乐吾乐2D编辑器',
+          width: 100,
+          height: 30,
+          name: 'text',
+          textColor: '#0052d9',
+          events: [
+            {
+              where: {
+                type: null,
+              },
+              name: 'click',
+              action: 0,
+              params: '_blank',
+              value: 'https://2d.le5le.com/',
+              fn: null,
+            },
+          ],
         },
       },
       {
@@ -1592,8 +1682,37 @@ export const formComponents = [
         name: '选项卡',
         icon: 'l-pc',
         data: {
-          width: 200,
-          height: 200,
+          name: 'leTab',
+          width: 500,
+          height: 50,
+          direction:'vertical',
+          selectKey:'1',
+          selectedKeys:[],
+          them:'',
+          data:[
+            {text:'场景一',key:'0',isForbidden:true},
+            {text:'场景二',key:'1'},
+            {text:'场景三',key:'2'},
+            {text:'场景四',key:'3'}
+          ]
+        },
+      },
+      {
+        name: '多选选项卡',
+        icon: 'l-pc',
+        data: {
+          name:'leTab',
+          width: 500,
+          height: 50,
+          direction:'horizontal',
+          selectedKeys:['0'],
+          them:'multiple',
+          data:[
+            {text:'场景一',key:'0'},
+            {text:'场景二',key:'1',isForbidden:true},
+            {text:'场景三',key:'2'},
+            {text:'场景四',key:'3'}
+          ]
         },
       },
     ],
@@ -1656,32 +1775,36 @@ export const formComponents = [
         name: '单选框',
         icon: 'l-danxuankuang',
         data: {
-          name: 'radio',
+          name: 'leRadio',
           width: 150,
           height: 30,
           disableAnchor: true,
           direction: 'horizontal', // 'vertical', //'horizontal',
-          options: [
-            { text: '选项一', isForbidden: true },
-            { text: '选项二' },
-            { text: '选项三' },
+          them:'button',
+          itemPosition:[],
+          data: [
+            {key:'1', text: '选项一', isForbidden: true },
+            {key:'2', text: '选项示例二' },
+            {key:'3', text: '选项三' },
           ],
-          checked: '选项二',
+          selectKey: '2',
         },
       },
       {
         name: '多选框',
         icon: 'l-xuanzeqi',
         data: {
-          name: 'checkbox',
-          width: 100,
+          name: 'leCheckBox',
+          width: 300,
           height: 30,
-          fontSize: 16,
-          disableAnchor: true,
-          direction: 'vertical',
-          checked: true,
-          // isForbidden: true,
-          value: '选项一',
+          direction: 'horizontal', // 'vertical', //'horizontal',
+          them:'button',
+          data: [
+            {key:'1', text: '选项一', isForbidden: true },
+            {key:'2', text: '选项示例二' },
+            {key:'3', text: '选项三' },
+          ],
+          selectedKeys:['2','3']
         },
       },
       {
@@ -1778,7 +1901,22 @@ export const formComponents = [
       {
         name: '滑块',
         icon: 'l-kaiguan',
-        data: {},
+        data: {
+          anchors: [],
+          disableAnchor: true,
+          name: 'slider',
+          width: 300,
+          height: 20,
+          value: 10,
+          textWidth: 50,
+          barHeight: 4,
+          min: 0,
+          max: 100,
+          color: '#1890ff',
+          background: '#D4D6D9',
+          textColor: '#222222',
+          unit: '%',
+        },
       },
     ],
   },
@@ -1975,6 +2113,6 @@ export const cases: any[] = [
 ];
 
 export const templates: any[] = [
-  { name: '科技蓝', list: [] },
-  { name: '简约', list: [] },
+  { name: '主题', list: [] },
+  { name: '布局', list: [] },
 ];

src/services/echarts.ts

@@ -13,7 +13,7 @@ export function changeTheme(theme: string) {
   charts.forEach((item) => {
     item.list.forEach((chart) => {
       if (chart.data.name === 'echarts') {
-        chart.data.echarts.theme = theme;
+        chart.data.echarts && (chart.data.echarts.theme = theme);
       }
     });
   });
@@ -21,48 +21,99 @@ export function changeTheme(theme: string) {
 
 export const charts = [
   {
-    name: 'Echarts - 基础图表',
+    name: '折线图',
     show: true,
     list: [
       {
-        name: '折线图',
+        name: '基础折线图',
         icon: 'l-line-chart',
         data: {
           name: 'echarts',
-          width: 400,
-          height: 300,
+          width: 366,
+          height: 206,
           externElement: true,
           disableAnchor: true,
           echarts: {
             option: {
-              tooltip: {
-                trigger: 'axis',
-              },
               grid: {
-                top: 10,
-                bottom: 20,
+                top: 20,
+                bottom: 40,
                 left: 40,
-                right: 5,
+                right: 20,
               },
               xAxis: {
                 type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                axisLabel: {
-                  fontSize: 12,
-                  // color: '#ffffff',
-                },
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                axisLabel: {
-                  fontSize: 12,
-                  // color: '#ffffff',
+                max: 100,
+                min: 0,
+                interval: 50,
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
                 },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+      {
+        name: '多折线图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+                interval: 50,
               },
               series: [
                 {
                   type: 'line',
-                  data: [820, 932, 901, 934, 1290, 1330, 1320],
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'line',
+                  data: [25, 40, 20, 30, 25, 40],
                 },
               ],
             },
@@ -70,13 +121,13 @@ export const charts = [
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data.0',
-              label: 'Mon',
+              key: 'echarts.option.series.0.data',
+              label: '数据1',
               type: 'object',
             },
             {
-              key: 'echarts.option.series.0.data.2',
-              label: 'Wed',
+              key: 'echarts.option.series.1.data',
+              label: '数据2',
               type: 'object',
             },
             {
@@ -92,53 +143,60 @@ export const charts = [
           ],
         },
       },
+    ],
+  },
+  {
+    name: '面积图',
+    show: true,
+    list: [
       {
-        name: '柱状图',
-        icon: 'l-bar-chart',
+        name: '基础面积图',
+        icon: 'l-line-chart',
         data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
+          name: 'echarts',
+          width: 366,
+          height: 206,
           externElement: true,
+          disableAnchor: true,
+        },
+      },
+    ],
+  },
+  {
+    name: '柱状图',
+    show: true,
+    list: [
+      {
+        name: '基础柱状图',
+        icon: 'l-line-chart',
+        data: {
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
-              tooltip: {
-                trigger: 'axis',
-              },
               grid: {
-                top: 10,
-                bottom: 20,
+                top: 20,
+                bottom: 40,
                 left: 40,
-                right: 5,
+                right: 20,
               },
               xAxis: {
                 type: 'category',
-                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                axisTick: {
-                  alignWithLabel: true,
-                },
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
+                max: 100,
+                min: 0,
+                interval: 50,
               },
               series: [
                 {
-                  name: '直接访问',
                   type: 'bar',
-                  barWidth: '60%',
-                  label: {
-                    color: '#ffffff',
-                  },
-                  data: [10, 52, 200, 334, 390, 330, 220],
+                  data: [40, 20, 90, 60, 70, 80],
                 },
               ],
             },
@@ -163,6 +221,81 @@ export const charts = [
           ],
         },
       },
+      {
+        name: '双柱状图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+                interval: 50,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+                {
+                  type: 'bar',
+                  data: [50, 70, 20, 30, 70, 40],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据1',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option.series.1.data',
+              label: '数据2',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+            {
+              key: 'echarts.max',
+              label: '最大数量',
+              type: 'number',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  {
+    name: '条形图',
+    show: true,
+    list: [],
+  },
+  {
+    name: '饼环图',
+    show: true,
+    list: [
       {
         name: '饼图',
         icon: 'l-pie-chart',
@@ -210,6 +343,12 @@ export const charts = [
           ],
         },
       },
+    ],
+  },
+  {
+    name: '散点图',
+    show: true,
+    list: [
       {
         name: '散点图',
         icon: 'l-sandiantu',
@@ -286,9 +425,15 @@ export const charts = [
           ],
         },
       },
+    ],
+  },
+  {
+    name: '雷达图',
+    show: true,
+    list: [
       {
-        name: 'K线图',
-        icon: 'l-kxiantu',
+        name: '雷达图',
+        icon: 'l-leidatu',
         data: {
           width: 300,
           height: 200,
@@ -303,27 +448,30 @@ export const charts = [
                 left: 40,
                 right: 10,
               },
-              xAxis: {
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
-                data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
-              },
-              yAxis: {
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
+              radar: {
+                // shape: 'circle',
+                indicator: [
+                  { name: 'Sales', max: 6500 },
+                  { name: 'Administration', max: 16000 },
+                  { name: 'Information Technology', max: 30000 },
+                  { name: 'Customer Support', max: 38000 },
+                  { name: 'Development', max: 52000 },
+                  { name: 'Marketing', max: 25000 },
+                ],
               },
               series: [
                 {
-                  type: 'candlestick',
+                  name: 'Budget vs spending',
+                  type: 'radar',
                   data: [
-                    [20, 34, 10, 38],
-                    [40, 35, 30, 50],
-                    [31, 38, 33, 44],
-                    [38, 15, 5, 42],
+                    {
+                      value: [4200, 3000, 20000, 35000, 50000, 18000],
+                      name: 'Allocated Budget',
+                    },
+                    {
+                      value: [5000, 14000, 28000, 26000, 42000, 21000],
+                      name: 'Actual Spending',
+                    },
                   ],
                 },
               ],
@@ -344,374 +492,17 @@ export const charts = [
           ],
         },
       },
-      {
-        name: '雷达图',
-        icon: 'l-leidatu',
-        data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
-          name: 'echarts',
-          echarts: {
-            option: {
-              grid: {
-                top: 20,
-                bottom: 30,
-                left: 40,
-                right: 10,
-              },
-              radar: {
-                // shape: 'circle',
-                indicator: [
-                  { name: 'Sales', max: 6500 },
-                  { name: 'Administration', max: 16000 },
-                  { name: 'Information Technology', max: 30000 },
-                  { name: 'Customer Support', max: 38000 },
-                  { name: 'Development', max: 52000 },
-                  { name: 'Marketing', max: 25000 },
-                ],
-              },
-              series: [
-                {
-                  name: 'Budget vs spending',
-                  type: 'radar',
-                  data: [
-                    {
-                      value: [4200, 3000, 20000, 35000, 50000, 18000],
-                      name: 'Allocated Budget',
-                    },
-                    {
-                      value: [5000, 14000, 28000, 26000, 42000, 21000],
-                      name: 'Actual Spending',
-                    },
-                  ],
-                },
-              ],
-            },
-            replaceMode: ReplaceMode.Replace,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-          ],
-        },
-      },
-      {
-        name: '旭日图',
-        icon: 'l-xuritu',
-        data: {
-          width: 200,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
-          name: 'echarts',
-          echarts: {
-            option: {
-              series: [
-                {
-                  radius: ['15%', '80%'],
-                  type: 'sunburst',
-                  data: [
-                    {
-                      children: [
-                        {
-                          value: 5,
-                          children: [
-                            {
-                              value: 1,
-                              itemStyle: {
-                                color: '#F54F4A',
-                              },
-                            },
-                            {
-                              value: 2,
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                              ],
-                            },
-                            {
-                              children: [
-                                {
-                                  value: 1,
-                                },
-                              ],
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#F54F4A',
-                          },
-                        },
-                        {
-                          value: 10,
-                          children: [
-                            {
-                              value: 6,
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#F54F4A',
-                                  },
-                                },
-                                {
-                                  value: 1,
-                                },
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                                {
-                                  value: 1,
-                                },
-                              ],
-                              itemStyle: {
-                                color: '#FFB499',
-                              },
-                            },
-                            {
-                              value: 2,
-                              children: [
-                                {
-                                  value: 1,
-                                },
-                              ],
-                              itemStyle: {
-                                color: '#FFB499',
-                              },
-                            },
-                            {
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                              ],
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#F54F4A',
-                          },
-                        },
-                      ],
-                      itemStyle: {
-                        color: '#F54F4A',
-                      },
-                    },
-                    {
-                      value: 9,
-                      children: [
-                        {
-                          value: 4,
-                          children: [
-                            {
-                              value: 2,
-                              itemStyle: {
-                                color: '#FF8C75',
-                              },
-                            },
-                            {
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#F54F4A',
-                                  },
-                                },
-                              ],
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#F54F4A',
-                          },
-                        },
-                        {
-                          children: [
-                            {
-                              value: 3,
-                              children: [
-                                {
-                                  value: 1,
-                                },
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                              ],
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#FFB499',
-                          },
-                        },
-                      ],
-                      itemStyle: {
-                        color: '#FF8C75',
-                      },
-                    },
-                    {
-                      value: 7,
-                      children: [
-                        {
-                          children: [
-                            {
-                              value: 1,
-                              itemStyle: {
-                                color: '#FFB499',
-                              },
-                            },
-                            {
-                              value: 3,
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                                {
-                                  value: 1,
-                                },
-                              ],
-                              itemStyle: {
-                                color: '#FF8C75',
-                              },
-                            },
-                            {
-                              value: 2,
-                              children: [
-                                {
-                                  value: 1,
-                                },
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#F54F4A',
-                                  },
-                                },
-                              ],
-                              itemStyle: {
-                                color: '#F54F4A',
-                              },
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#FFB499',
-                          },
-                        },
-                      ],
-                      itemStyle: {
-                        color: '#F54F4A',
-                      },
-                    },
-                    {
-                      children: [
-                        {
-                          value: 6,
-                          children: [
-                            {
-                              value: 1,
-                              itemStyle: {
-                                color: '#FF8C75',
-                              },
-                            },
-                            {
-                              value: 2,
-                              children: [
-                                {
-                                  value: 2,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                              ],
-                              itemStyle: {
-                                color: '#F54F4A',
-                              },
-                            },
-                            {
-                              value: 1,
-                              itemStyle: {
-                                color: '#FFB499',
-                              },
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#FFB499',
-                          },
-                        },
-                        {
-                          value: 3,
-                          children: [
-                            {
-                              value: 1,
-                            },
-                            {
-                              children: [
-                                {
-                                  value: 1,
-                                  itemStyle: {
-                                    color: '#FF8C75',
-                                  },
-                                },
-                              ],
-                            },
-                            {
-                              value: 1,
-                            },
-                          ],
-                          itemStyle: {
-                            color: '#FFB499',
-                          },
-                        },
-                      ],
-                      itemStyle: {
-                        color: '#F54F4A',
-                      },
-                    },
-                  ],
-                  label: {
-                    rotate: 'radial',
-                    color: '#ffffff',
-                  },
-                },
-              ],
-            },
-            replaceMode: ReplaceMode.Replace,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-          ],
-        },
-      },
+    ],
+  },
+  {
+    name: '关系图',
+    show: true,
+    list: [],
+  },
+  {
+    name: '桑葚图',
+    show: true,
+    list: [
       {
         name: '桑基图',
         icon: 'l-sangshentu',
@@ -807,100 +598,12 @@ export const charts = [
           ],
         },
       },
-      {
-        name: '漏斗图',
-        icon: 'l-loudoutu',
-        data: {
-          width: 200,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
-          name: 'echarts',
-          echarts: {
-            option: {
-              tooltip: {
-                trigger: 'item',
-                formatter: '{a} <br/>{b} : {c}%',
-              },
-              series: [
-                {
-                  name: 'Expected',
-                  type: 'funnel',
-                  left: '2%',
-                  width: '80%',
-                  label: {
-                    color: '#ffffff',
-                    formatter: '{b}Expected',
-                  },
-                  labelLine: {
-                    show: false,
-                  },
-                  itemStyle: {
-                    opacity: 0.7,
-                  },
-                  emphasis: {
-                    label: {
-                      position: 'inside',
-                      formatter: '{b}Expected: {c}%',
-                    },
-                  },
-                  data: [
-                    { value: 60, name: 'Visit' },
-                    { value: 40, name: 'Inquiry' },
-                    { value: 20, name: 'Order' },
-                    { value: 80, name: 'Click' },
-                    { value: 100, name: 'Show' },
-                  ],
-                },
-                {
-                  name: 'Actual',
-                  type: 'funnel',
-                  left: '2%',
-                  width: '80%',
-                  maxSize: '80%',
-                  label: {
-                    position: 'inside',
-                    formatter: '{c}%',
-                    color: '#fff',
-                  },
-                  itemStyle: {
-                    opacity: 0.5,
-                    borderColor: '#fff',
-                    borderWidth: 2,
-                  },
-                  emphasis: {
-                    label: {
-                      position: 'inside',
-                      formatter: '{b}Actual: {c}%',
-                    },
-                  },
-                  data: [
-                    { value: 30, name: 'Visit' },
-                    { value: 10, name: 'Inquiry' },
-                    { value: 5, name: 'Order' },
-                    { value: 50, name: 'Click' },
-                    { value: 80, name: 'Show' },
-                  ],
-                  z: 100,
-                },
-              ],
-            },
-            replaceMode: ReplaceMode.Replace,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-          ],
-        },
-      },
+    ],
+  },
+  {
+    name: '仪表盘',
+    show: true,
+    list: [
       {
         name: '仪表盘',
         icon: 'l-dashboard-chart',
@@ -1086,254 +789,4 @@ export const charts = [
       },
     ],
   },
-  {
-    name: '折线图',
-    show: true,
-    list: [
-      {
-        name: '基础折线图',
-        icon: 'l-line-chart',
-        data: {
-          name: 'echarts',
-          width: 366,
-          height: 206,
-          externElement: true,
-          disableAnchor: true,
-          echarts: {
-            option: {
-              grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
-              },
-              xAxis: {
-                type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-              },
-              yAxis: {
-                type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
-              },
-              series: [
-                {
-                  type: 'line',
-                  data: [40, 20, 90, 60, 70, 80],
-                },
-              ],
-            },
-            max: 100,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-            {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
-            },
-          ],
-        },
-      },
-      {
-        name: '双折线图',
-        icon: 'l-line-chart',
-        data: {
-          name: 'echarts',
-          width: 366,
-          height: 206,
-          externElement: true,
-          disableAnchor: true,
-          echarts: {
-            option: {
-              grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
-              },
-              xAxis: {
-                type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-              },
-              yAxis: {
-                type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
-              },
-              series: [
-                {
-                  type: 'line',
-                  data: [40, 35, 80, 40, 45, 25],
-                },
-                {
-                  type: 'line',
-                  data: [25, 40, 20, 30, 25, 40],
-                },
-              ],
-            },
-            max: 100,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据1',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option.series.1.data',
-              label: '数据2',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-            {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    name: '柱状图',
-    show: true,
-    list: [
-      {
-        name: '基础柱状图',
-        icon: 'l-line-chart',
-        data: {
-          name: 'echarts',
-          width: 366,
-          height: 206,
-          externElement: true,
-          disableAnchor: true,
-          echarts: {
-            option: {
-              grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
-              },
-              xAxis: {
-                type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-              },
-              yAxis: {
-                type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
-              },
-              series: [
-                {
-                  type: 'bar',
-                  data: [40, 20, 90, 60, 70, 80],
-                },
-              ],
-            },
-            max: 100,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-            {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
-            },
-          ],
-        },
-      },
-      {
-        name: '双柱状图',
-        icon: 'l-line-chart',
-        data: {
-          name: 'echarts',
-          width: 366,
-          height: 206,
-          externElement: true,
-          disableAnchor: true,
-          echarts: {
-            option: {
-              grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
-              },
-              xAxis: {
-                type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-              },
-              yAxis: {
-                type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
-              },
-              series: [
-                {
-                  type: 'bar',
-                  data: [40, 20, 90, 60, 70, 80],
-                },
-                {
-                  type: 'bar',
-                  data: [50, 70, 20, 30, 70, 40],
-                },
-              ],
-            },
-            max: 100,
-          },
-          realTimes: [
-            {
-              key: 'echarts.option.series.0.data',
-              label: '数据1',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option.series.1.data',
-              label: '数据2',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
-            {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
-            },
-          ],
-        },
-      },
-    ],
-  },
 ];

src/services/png.ts

@@ -24,16 +24,21 @@ export async function getFolders(name: string, isSvg?: boolean) {
       name = temp[temp.length - 2];
     }
     const list = [];
-    for (const f of files.list) {
-      if (f.indexOf(item) >= 0) {
-        const temp = f.split('/');
-        const name = filename(temp[temp.length - 1]);
-        const elem: any = {
-          name,
-          image: cdn + '/' + f,
-          isSvg,
-        };
-        list.push(elem);
+    if (files.list) {
+      for (const f of files.list) {
+        if (f.indexOf(item) >= 0) {
+          const temp = f.split('/');
+          const name = filename(temp[temp.length - 1]);
+          if (!name) {
+            continue;
+          }
+          const elem: any = {
+            name,
+            image: cdn + '/' + f,
+            isSvg,
+          };
+          list.push(elem);
+        }
       }
     }
 

src/views/components/ElementTree.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="elements">
     <div class="title" style="margin: 8px 0 0 12px">视图结构</div>
+
     <t-tree
       class="flex-grow"
       ref="tree"
@@ -142,7 +143,7 @@ import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 import { LockState, Pen } from '@meta2d/core';
-import { getPenTree, setChildrenVisible } from '@/services/common';
+import { getPenTree, inTreePanel, setChildrenVisible } from '@/services/common';
 
 const tree = ref<any>(null);
 const data = reactive<any>({
@@ -158,8 +159,16 @@ onBeforeMount(() => {
   meta2d.on('redo', getTree);
   meta2d.on('delete', getTree);
   meta2d.on('combine', getTree);
+  meta2d.on('click', getActived);
+
+  if (inTreePanel.timer) {
+    clearTimeout(inTreePanel.timer);
+    inTreePanel.timer = undefined;
+  }
+  inTreePanel.value = true;
 
   getTree();
+  getActived();
 
   const d = meta2d.store.data as any;
   if (!d.groups) {
@@ -172,6 +181,15 @@ const getTree = () => {
   data.tree = getPenTree();
 };
 
+const getActived = () => {
+  data.actived = [];
+  if (meta2d.store.active) {
+    for (const pen of meta2d.store.active) {
+      data.actived.push(pen.id);
+    }
+  }
+};
+
 const calcElem = (node: Pen) => {
   if (!node) {
     return;
@@ -300,6 +318,11 @@ onBeforeUnmount(() => {
   meta2d.off('redo', getTree);
   meta2d.off('delete', getTree);
   meta2d.off('combine', getTree);
+  meta2d.on('click', getActived);
+
+  inTreePanel.timer = setTimeout(() => {
+    inTreePanel.value = false;
+  }, 500);
 });
 </script>
 <style lang="postcss" scoped>

src/views/components/FileProps.vue

@@ -242,7 +242,7 @@ import { useUser } from '@/services/user';
 import { getCookie } from '@/services/cookie';
 import ElementTree from './ElementTree.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
-import { autoSave, useAssets } from '@/services/common';
+import { autoSave, inTreePanel, useAssets } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const headers = {
@@ -349,6 +349,9 @@ const changeValue = (e: any, key: string) => {
 };
 
 onMounted(() => {
+  if (inTreePanel.value) {
+    data.tab = 2;
+  }
   openData();
   meta2d.on('opened', openData);
 });

src/views/components/Graphics.vue

@@ -413,7 +413,15 @@ const getCaseProjects = async (name: string, current = 1, pageSize = 1000) => {
     {
       query,
       shared: 'true',
-      projection: { id: 1, _id: 1, name: 1, image: 1, price: 1, case: 1 },
+      projection: {
+        id: 1,
+        _id: 1,
+        name: 1,
+        image: 1,
+        price: 1,
+        case: 1,
+      },
+      sort: { createdAt: 1 },
     },
     {
       params: {
@@ -528,18 +536,19 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
     let target: any = event.target;
     target.children[0] && (target = target.children[0].children[0]);
     // firefox naturalWidth svg 图片 可能是 0
-    const normalWidth = target.naturalWidth || target.width;
-    const normalHeight = target.naturalHeight || target.height;
+    const width = target.naturalWidth || target.width;
+    const height = target.naturalHeight || target.height;
     const [name, lockedOnCombine] = isGif(item.image)
       ? ['gif', 0]
       : ['image', undefined];
 
     data = {
       name,
-      width: 100,
-      height: 100 * (normalHeight / normalWidth),
+      width,
+      height,
       image: item.image,
       imageRatio: true,
+      ratio: true,
       lockedOnCombine,
     };
   } else {
@@ -582,6 +591,7 @@ const open = async (item: any) => {
     return;
   }
 
+  sessionStorage.setItem('opening', '1');
   router.push({
     path: '/',
     query: {
@@ -592,9 +602,9 @@ const open = async (item: any) => {
   for (const k of delAttrs) {
     delete ret[k];
   }
-
   autoSave();
   meta2d.open(ret);
+  meta2d.fitView();
 };
 
 const getPrivateGraphics = async () => {
@@ -1172,7 +1182,7 @@ onUnmounted(() => {
         }
         p {
           margin-top: 10px;
-          padding: 0 10px;
+          padding: 0 8px;
           text-align: center;
           font-size: 12px;
           height: 12px;

src/views/components/PenProps.vue

@@ -1002,6 +1002,9 @@
       <t-tab-panel :value="4" label="交互">
         <PenEvents :pen="data.pen" />
       </t-tab-panel>
+      <t-tab-panel :value="5" label="结构">
+        <ElementTree />
+      </t-tab-panel>
     </t-tabs>
   </div>
 </template>
@@ -1014,10 +1017,11 @@ import Iconfonts from './common/Iconfonts.vue';
 import PenAnimates from './PenAnimates.vue';
 import PenDatas from './PenDatas.vue';
 import PenEvents from './PenEvents.vue';
+import ElementTree from './ElementTree.vue';
 
 import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
-import { autoSave, fonts } from '@/services/common';
+import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 
 const headers = {
@@ -1044,6 +1048,9 @@ const iconsDrawer = reactive<any>({
 });
 
 onBeforeMount(() => {
+  if (inTreePanel.value) {
+    data.tab = 5;
+  }
   const d = meta2d.store.data as any;
   if (!d.groups) {
     d.groups = [];

src/views/components/View.vue

@@ -857,9 +857,10 @@ const open = async (flag: boolean = false) => {
     if (data) {
       meta2d.open(JSON.parse(data));
     }
-  } else {
+  } else if (!sessionStorage.getItem('opening')) {
     meta2d.open({ name: '新建项目', pens: [] } as any);
   }
+  sessionStorage.removeItem('opening');
   !meta2d.store.data.x && (meta2d.store.data.x = meta2d.store.options.x || 0);
   !meta2d.store.data.y && (meta2d.store.data.y = meta2d.store.options.y || 0);
 };