Merge branch 'local' of https://github.com/le5le-com/visualization-design into local

src/services/defaults.ts

@@ -3004,3 +3004,62 @@ export const templates: any[] = [
   { name: '主题', list: [] },
   { name: '布局', list: [] },
 ];
+
+
+export const defaultPureColor: string[] = [
+  '#ff925c',
+  '#e6d950',
+  '#51e69b',
+  '#59c8ff',
+  '#FF7875',
+  '#FF9C6E',
+  '#FFC069',
+  '#FFD666',
+  '#FFF566',
+  '#D3F261',
+  '#95DE64',
+  '#5CDBD3',
+  '#69C0FF',
+  '#85A5FF',
+  '#B37FEB',
+  '#FF85C0',
+  '#000000',
+  '#FFFFFF',
+  '#FFFFFF00',
+]
+
+// export const defaultGradientColor: string[] = [
+//   'linear-gradient(90deg, #E52600 0%, #CC0000 12%, #FF925C 80%, #FF622E 100%)',
+//   'linear-gradient(90deg, #B36800 0%, #B36800 12%, #E6D950 80%, #CCB125 100%)',
+//   'linear-gradient(90deg, #00B35A 0%, #00735F 12%, #51E69B 80%, #24CC6B 100%)',
+//   'linear-gradient(90deg, #0073E6 0%, #1433CC 12%, #59C8FF 80%, #2EA5FF 100%)',
+//   'linear-gradient(90deg, #a3aab2 0%, #7b7f8c 12%, #e5ecf0 80%, #bac2c9 100%)',
+//
+//   'linear-gradient(90deg, #FF622E 0%, #FF622E 18%,#CC0000 20%,#FF622E 50%, #CC0000 80%,#FF622E 82%, #FF622E 100%)',
+//   'linear-gradient(90deg, #ccb125 0%, #ccb125 18%,#B36800 20%,#CCB125 50%, #B36800 80%,#CCB125 82%, #CCB125 100%)',
+//   'linear-gradient(90deg, #24CC6B 0%, #24CC6B 18%,#00735F 20%,#24CC6B 50%, #00735F 80%,#24CC6B 82%, #24CC6B 100%)',
+//   'linear-gradient(90deg, #2EA5FF 0%, #2EA5FF 18%,#1433CC 20%,#2EA5FF 50%, #1433CC 80%,#2EA5FF 82%, #2EA5FF 100%)',
+//   'linear-gradient(90deg, #bac2c9 0%, #bac2c9 18%,#7b7f8c 20%,#bac2c9 50%, #7b7f8c 80%,#bac2c9 82%, #bac2c9 100%)'
+// ]
+
+
+export const defaultGradientColor: string[] = [
+  '#ff925c',
+  '#e6d950',
+  '#51e69b',
+  '#59c8ff',
+  '#FF7875',
+  '#FF9C6E',
+  '#FFC069',
+  '#FFD666',
+  '#FFF566',
+  '#D3F261',
+  '#95DE64',
+  '#5CDBD3',
+  '#69C0FF',
+  '#85A5FF',
+  '#B37FEB',
+  '#FF85C0',
+  '#000000',
+  '#FFFFFF',
+]

src/services/echarts.ts

@@ -25,6 +25,149 @@ export const charts = [
     name: '折线图',
     show: true,
     list: [
+      {
+        name: '基础折线图-hover',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 20,
+                left: 20,
+                right: 20,
+                top: 80,
+                containLabel: true,
+              },
+
+              title: {
+                text: "标题",
+                textStyle: {
+                  fontSize: 16,
+                },
+                top: 0,
+                left: 20
+              },
+              // 图例
+              legend:{
+                data:['系列1'], // 该数组中的内容要与series中的每项的name对应
+                textStyle:{
+                  fontSize: 12
+                },
+                itemWidth: 25,
+                top: 30,
+                itemHeight: 14
+              },
+              // 提示框组件
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: "shadow"
+                },
+                textStyle: {
+                  fontSize: 12,
+                  fontWeight: 400
+                }
+                },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                  margin: 10
+                },
+              },
+              yAxis: {
+                type: 'value',
+                name: '单位',
+                nameGap: 15,
+                nameTextStyle:{
+                  fontSize: 12,
+                },
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  margin: 10,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
+              },
+              series: [
+                {
+                  name:"系列1",
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5, //小圆点的大小
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
       {
         name: '基础折线图',
         icon: 'l-line-chart',
@@ -49,6 +192,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -56,6 +200,7 @@ export const charts = [
                 splitNumber: 2,
                 minInterval: 50,
                 axisLabel: {
+                  margin: 10,
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
@@ -66,6 +211,10 @@ export const charts = [
                 {
                   type: 'line',
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -150,6 +299,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -160,6 +310,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -167,10 +318,18 @@ export const charts = [
                 {
                   type: 'line',
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -296,6 +455,7 @@ export const charts = [
                 data: [],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -304,6 +464,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -313,6 +474,10 @@ export const charts = [
                 {
                   type: 'line',
                   data: [],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -363,6 +528,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -373,6 +539,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -381,6 +548,10 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -465,6 +636,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -475,6 +647,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -483,11 +656,19 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   smooth: true,
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -614,6 +795,7 @@ export const charts = [
                 data: [],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -624,6 +806,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -632,6 +815,10 @@ export const charts = [
                   type: 'line',
                   smooth: true,
                   data: [],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -682,6 +869,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -692,6 +880,7 @@ export const charts = [
                   fontSize: 12,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
+                    margin: 10
                   },
                 },
               },
@@ -700,6 +889,10 @@ export const charts = [
                   type: 'line',
                   step: 'start',
                   data: [40, 20, 90, 60, 70, 80],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -790,6 +983,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -798,6 +992,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -809,6 +1004,10 @@ export const charts = [
                   data: [40, 20, 90, 60, 70, 80],
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -893,6 +1092,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -901,6 +1101,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -912,12 +1113,20 @@ export const charts = [
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
                   data: [40, 35, 80, 40, 45, 25],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
                 {
                   type: 'line',
                   areaStyle: { opacity: 0.3 },
                   smooth: true,
                   data: [25, 40, 20, 30, 25, 40],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -1051,6 +1260,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1061,6 +1271,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1107,6 +1318,10 @@ export const charts = [
                       },
                     },
                   ],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
                 },
               ],
             },
@@ -1239,6 +1454,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1247,6 +1463,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1386,6 +1603,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               yAxis: {
@@ -1394,6 +1612,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1542,6 +1761,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10
                 },
               },
               xAxis: {
@@ -1552,6 +1772,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1793,6 +2014,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                 },
               },
               xAxis: {
@@ -1803,6 +2025,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -1944,6 +2167,7 @@ export const charts = [
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                 },
               },
               xAxis: {
@@ -1954,6 +2178,7 @@ export const charts = [
                 minInterval: 50,
                 axisLabel: {
                   fontSize: 12,
+                  margin: 10,
                   textStyle: {
                     color: '#FFFFFF66', //Y轴内容文字颜色
                   },
@@ -2151,6 +2376,10 @@ export const charts = [
                       },
                     },
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2238,6 +2467,10 @@ export const charts = [
                       },
                     },
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2329,6 +2562,10 @@ export const charts = [
                     borderRadius: 4,
                     borderWidth: 1,
                   },
+                  labelLine:{
+                    length: 25,
+                    length2: 15
+                  },
                   data: [
                     { value: 335, name: '2D' },
                     { value: 310, name: '3D' },
@@ -2919,6 +3156,7 @@ export const charts = [
                 {
                   type: 'graph',
                   layout: 'force',
+                  zoom: 1,
                   data: [
                     {
                       id: '0',
@@ -3119,6 +3357,7 @@ export const charts = [
                   type: 'graph',
                   symbolSize: 58,
                   layout: 'force',
+                  zoom: 1,
                   data: [
                     {
                       name: '操作系统',
@@ -3163,54 +3402,83 @@ export const charts = [
                       source: '浏览器',
                       target: '操作系统',
                       name: '包含',
-                      lineStyle: { color: '#4583ff' },
+                      label: {
+                        fontSize: 12
+                      },
+                      lineStyle: {
+                        color: '#4583ff'
+                      },
                     },
                     {
                       source: 'HTML',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'CSS',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'JavaScript',
                       target: '浏览器',
                       name: '实现',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Chrome',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'IE',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Firefox',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Safari',
                       target: '浏览器',
                       name: '属于',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                     {
                       source: 'Chrome',
                       target: 'JavaScript',
                       name: '关联',
+                      label: {
+                        fontSize: 12
+                      },
                       lineStyle: { color: '#4583ff' },
                     },
                   ],
@@ -3227,8 +3495,10 @@ export const charts = [
                   ],
                   roam: true,
                   edgeSymbol: ['', 'arrow'],
+                  edgeSymbolSize: 10,
                   label: {
                     show: true,
+                    fontSize: 16
                   },
                   edgeLabel: {
                     normal: {
@@ -3300,6 +3570,8 @@ export const charts = [
                 emphasis: {
                   focus: 'adjacency',
                 },
+                nodeWidth: 20,
+                nodeGap: 8,
                 data: [
                   {
                     name: 'a',
@@ -3453,7 +3725,8 @@ export const charts = [
                   opacity: 0.45,
                   curveness: 0.5,
                 },
-
+                nodeWidth: 20,
+                nodeGap: 8,
                 label: {
                   color: '#fff',
                   fontSize: 10,
@@ -3970,6 +4243,7 @@ export const charts = [
                   },
                   axisTick: {
                     distance: 4,
+                    length: 8,
                     lineStyle: {
                       color: '#6B9DD7',
                     },
@@ -3993,11 +4267,14 @@ export const charts = [
                   axisLabel: {
                     color: '#ddd',
                     fontSize: 12,
+                    distance: 15
                   },
                   itemStyle: {
                     color: '#0c56eb',
                   },
                   pointer: {
+                    length: 100,
+                    width: 6,
                     itemStyle: {
                       borderWidth: 0,
                     },
@@ -4417,6 +4694,7 @@ export const charts = [
                   },
                   progress: {
                     show: true,
+                    width: 10
                   },
                   detail: {
                     offsetCenter: [0, 50],
@@ -4517,13 +4795,13 @@ export const charts = [
                   },
                   progress: {
                     show: true,
+                    width: 10
                   },
                   detail: {
                     offsetCenter: [0, 50],
                     textStyle: {
                       padding: [0, 0, 0, 0],
-                      fontSize: 18,
-                      fontWeight: '700',
+                      fontSize: 20,
                       color: '#0c56eb',
                     },
                     fontSize: 12,
@@ -4757,9 +5035,12 @@ export const charts = [
               tooltip: {},
               geo: {
                 map: 'china',
-                zoom: 1.6,
+                zoom: '1.6',
+                scaleLimit:{
+                  min: 1.6,
+                  max: 1.6
+                },
                 center: [105, 35],
-
                 label: {
                   normal: {
                     show: false,
@@ -4800,6 +5081,7 @@ export const charts = [
                     show: true,
                     formatter: '{b}',
                     position: 'bottom',
+                    fontSize: 12,
                     color: 'yellow',
                     offset: [0, 4],
                   },
@@ -4831,6 +5113,7 @@ export const charts = [
                     show: true,
                     formatter: '{b}',
                     position: 'bottom',
+                    fontSize: 12,
                     color: '#36cfc9',
                     offset: [0, -2],
                   },
@@ -4914,6 +5197,10 @@ export const charts = [
               geo: {
                 map: 'hubei',
                 zoom: 1.2,
+                scaleLimit:{
+                  min: 1.2,
+                  max: 1.2
+                },
                 label: {
                   normal: {
                     show: false,
@@ -5029,6 +5316,7 @@ export const charts = [
                   animation: false,
                   label: {
                     normal: {
+                      fontSize: 12,
                       show: true,
                       formatter: '{b}',
                       color: '#fff',
@@ -5092,8 +5380,13 @@ export const charts = [
               geo: {
                 map: 'china',
                 zoom: 1.6,
+                scaleLimit:{
+                  min: 1.6,
+                  max: 1.6
+                },
                 center: [105, 35],
                 label: {
+                  fontSize: 12,
                   normal: {
                     show: true,
                     fontSize: 10,

src/views/components/AnimateFrames.vue

@@ -59,7 +59,7 @@
                   suffix="ms"
                 />
               </div>
-              <div class="form-item mt-8" v-for="prop in frameProps[i]">
+              <div class="form-item mt-8" v-for="(prop,index) in frameProps[i]">
                 <template v-if="propDescriptions[prop]">
                   <label>
                     {{ propDescriptions[prop].label }}
@@ -89,6 +89,7 @@
                       v-model="item[prop]"
                       :placeholder="propDescriptions[prop].placeholder"
                       format="CSS"
+                      :recent-colors="null"
                       :enable-alpha="true"
                       :color-modes="
                         propDescriptions[prop].colorModes ||
@@ -96,6 +97,9 @@
                           item[propDescriptions[prop].colorModesBind]
                         )
                       "
+                      :swatch-colors = 'propDescriptions[prop].colorModes?.[0] === "monochrome"?defaultPureColor : (propDescriptions[prop].colorModesFn?.(
+                          item[propDescriptions[prop].colorModesBind]
+                        )[0] === "monochrome"?defaultPureColor: defaultGradientColor)'
                       :show-primary-color-preview="false"
                     />
                     <t-switch
@@ -134,14 +138,14 @@
                   </div>
                 </template>
 
-                <t-icon name="close" class="hover" />
+                <t-icon name="close" class="hover" @click="closeItem(frameProps[i],index)"/>
               </div>
             </section>
           </t-collapse-panel>
         </t-collapse>
         <t-divider />
         <div class="mt-16 px-16">
-          <t-button class="w-full" @click="addFrame" style="height: 30px">
+          <t-button class="w-full" @click="addFrame()" style="height: 30px">
             添加帧
           </t-button>
         </div>
@@ -150,7 +154,7 @@
         <img src="/img/blank.png" />
         <div class="gray center">还没有动画帧</div>
         <div class="mt-8">
-          <t-button @click="addFrame" style="height: 30px">添加动画帧</t-button>
+          <t-button @click="addFrame()" style="height: 30px">添加动画帧</t-button>
         </div>
       </div>
     </div>
@@ -161,6 +165,7 @@
 import { onMounted, reactive, ref } from 'vue';
 
 import { useSelection } from '@/services/selections';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { animate } = defineProps<{
   animate: { name: string; frames: any[] };
@@ -484,11 +489,16 @@ onMounted(() => {
   });
 });
 
+const closeItem = (frameProp,index)=>{
+  let deletePropName = frameProp.splice(index,1)
+  delete frameProp.target[deletePropName]
+}
+
 const addFrame = (i?: number) => {
   if (i == undefined) {
     i = animate.frames.length - 1;
   }
-  animate.frames.splice(i, 0, {});
+  animate.frames.splice(i+1, 0, {});
 
   openedCollapses.value = [i + 1];
   onChangeCollapse(openedCollapses.value);
@@ -503,6 +513,7 @@ const onChangeCollapse = (val: number[]) => {
     frameProps.value[i] = [];
   }
   for (const i of val) {
+    frameProps.value[i]['target'] = animate.frames[i]
     Object.keys(animate.frames[i]).forEach((key) => {
       if (key !== 'duration') {
         frameProps.value[i].push(key);

src/views/components/FileProps.vue

@@ -54,7 +54,9 @@
             <t-color-picker
               class="w-full"
               format="CSS"
+              :recent-colors="null"
               :enable-alpha="true"
+              :swatch-colors="defaultPureColor"
               :color-modes="['monochrome']"
               :show-primary-color-preview="false"
               :value="data.meta2dData.background"
@@ -255,6 +257,7 @@ import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import { autoSave, inTreePanel, useAssets } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { loadCss } from '@meta2d/core';
+import { defaultPureColor} from "@/services/defaults";
 
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),

src/views/components/PenAnimates.vue

@@ -73,6 +73,8 @@
                 class="w-full"
                 format="CSS"
                 :enable-alpha="true"
+                :recent-colors="null"
+                :swatch-colors="defaultPureColor"
                 :color-modes="['monochrome']"
                 :show-primary-color-preview="false"
                 :clearable="true"
@@ -221,6 +223,7 @@ import { getPenTree } from '@/services/common';
 import { deepClone } from '@meta2d/core';
 
 import AnimateFrames from './AnimateFrames.vue';
+import {defaultPureColor} from "@/services/defaults";
 
 const props = defineProps<{
   pen: any;

src/views/components/PenProps.vue

@@ -167,6 +167,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     :clearable="true"
@@ -179,6 +181,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.hoverColor"
@@ -190,6 +194,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.activeColor"
@@ -299,9 +305,10 @@
                         v-if="data.pen.strokeType"
                         class="simple mr-4"
                         format="CSS"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
-                        :clearable="true"
+                        :recent-colors="null"
                         :enableAlpha="true"
                         v-model="data.pen.lineGradientColors"
                         @change="changeValue('lineGradientColors')"
@@ -391,7 +398,9 @@
                       <t-color-picker
                         class="w-full"
                         format="CSS"
+                        :swatch-colors="defaultPureColor"
                         :color-modes="['monochrome']"
+                        :recent-colors="null"
                         :enable-alpha="true"
                         :show-primary-color-preview="false"
                         v-model="data.pen.background"
@@ -407,6 +416,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.pen.gradientColors"
@@ -421,6 +432,8 @@
                         class="simple"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.pen.gradientColors"
@@ -454,6 +467,8 @@
                       class="simple"
                       format="CSS"
                       :enable-alpha="true"
+                      :recent-colors="null"
+                      :swatch-colors="defaultPureColor"
                       :color-modes="['monochrome']"
                       :show-primary-color-preview="false"
                       v-model="data.pen.shadowColor"
@@ -625,9 +640,10 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
-                    :clearable="true"
                     v-model="data.pen.textColor"
                     @change="changeValue('textColor')"
                   />
@@ -636,6 +652,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.textBackground"
@@ -647,6 +665,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.hoverTextColor"
@@ -658,6 +678,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen.activeTextColor"
@@ -900,7 +922,9 @@
                     class="w-full"
                     v-else-if="item.type === 'color'"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.pen[item.key]"
@@ -1094,6 +1118,7 @@ import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { user } = useUser();
 const headers = {

src/views/components/PensProps.vue

@@ -117,6 +117,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     :clearable="true"
@@ -129,6 +131,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.hoverColor"
@@ -140,6 +144,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.activeColor"
@@ -253,6 +259,8 @@
                         :show-primary-color-preview="false"
                         :clearable="true"
                         :enableAlpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         v-model="data.lineGradientColors"
                         @change="changeValue('lineGradientColors')"
                         placeholder="无"
@@ -342,6 +350,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultPureColor"
                         :color-modes="['monochrome']"
                         :show-primary-color-preview="false"
                         v-model="data.background"
@@ -357,6 +367,8 @@
                         class="w-full"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.gradientColors"
@@ -368,6 +380,8 @@
                         class="simple"
                         format="CSS"
                         :enable-alpha="true"
+                        :recent-colors="null"
+                        :swatch-colors="defaultGradientColor"
                         :color-modes="['linear-gradient']"
                         :show-primary-color-preview="false"
                         v-model="data.gradientColors"
@@ -401,6 +415,8 @@
                       class="simple"
                       format="CSS"
                       :enable-alpha="true"
+                      :recent-colors="null"
+                      :swatch-colors="defaultPureColor"
                       :color-modes="['monochrome']"
                       :show-primary-color-preview="false"
                       v-model="data.shadowColor"
@@ -568,9 +584,10 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recentColors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
-                    :clearable="true"
                     v-model="data.color"
                     @change="changeValue('color')"
                   />
@@ -578,7 +595,9 @@
                   <t-color-picker
                     class="simple mt-8 mr-4"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.background"
@@ -589,7 +608,9 @@
                   <t-color-picker
                     class="simple mt-8 mr-4"
                     :enable-alpha="true"
+                    :recent-colors="null"
                     format="CSS"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.hoverColor"
@@ -601,6 +622,8 @@
                     class="simple mt-8 mr-4"
                     format="CSS"
                     :enable-alpha="true"
+                    :recent-colors="null"
+                    :swatch-colors="defaultPureColor"
                     :color-modes="['monochrome']"
                     :show-primary-color-preview="false"
                     v-model="data.activeColor"
@@ -763,6 +786,7 @@ import { updatePen } from './pen';
 
 import { useSelection } from '@/services/selections';
 import { fonts, setChildrenVisible } from '@/services/common';
+import {defaultGradientColor, defaultPureColor} from "@/services/defaults";
 
 const { selections } = useSelection();