feat: 添加自定义属性（含.）双向绑定

src/services/echarts.ts

@@ -1749,6 +1749,7 @@ export const charts = [
     show: true,
     list: [
       {
+        // 由于原生背景无法自定义阴影宽度，所以 采用两个bar堆叠的方式实现，通过tooltip配置和
         name: '基础柱状图',
         icon: 'l-bar-chart',
         data: {
@@ -1767,10 +1768,17 @@ export const charts = [
                 top: 12,
                 containLabel: true,
               },
-              tooltip:{
-                trigger:'item',
-                backgroundColor: '#242424',
-                borderColor:'#242424',
+              tooltip: {
+                backgroundColor: 'rgba(24,24,24,0.95)',
+                borderColor: 'rgba(24,24,24,0.95)',
+                trigger: 'axis',
+                axisPointer: {
+                  type: "none"
+                },
+                textStyle: {
+                  fontSize: 12,
+                  fontWeight: 400
+                }
               },
               fontSize: 10,
               xAxis:[ {
@@ -1815,6 +1823,7 @@ export const charts = [
               series: [
                 {
                   type: 'bar',
+                  name: '系列1',
                   data: [
                     {
                       value: 40,
@@ -1849,10 +1858,6 @@ export const charts = [
                     color: 'rgba(180, 180, 180, 0.2)',
                     opacity: 0
                   },
-                  tooltip:{
-                    show: false,
-
-                  },
                   data: [100,100,100,100,100,100],
                   barWidth: 30,
                   emphasis: {
@@ -1861,7 +1866,10 @@ export const charts = [
                       opacity: 1
                     },
                   },
-                  type: 'bar'
+                  type: 'bar',
+                  tooltip:{
+                    show: false,
+                  }
                 }
               ],
             },
@@ -5969,10 +5977,10 @@ export const charts = [
           echarts: {
             geoName: 'china',
             geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json',
-            openShadow: true,
             option: {
               tooltip: {},
               geo: {
+                show: true,
                 map: 'china',
                 zoom: '1.6',
                 scaleLimit:{
@@ -6007,7 +6015,7 @@ export const charts = [
                 itemStyle: {
                   normal: {
                     areaColor: 'rgba(0, 15, 40, 0.5)',
-                    shadowColor: 'rgba(0, 0, 0, 1)',
+                    shadowColor: '#050E33',
                     shadowBlur: 0,
                     shadowOffsetX: 0,
                     shadowOffsetY: 10,
@@ -6035,6 +6043,7 @@ export const charts = [
                       show: false,
                       textStyle: {
                         color: '#fff',
+                        fontSize: 12
                       },
                     },
                     emphasis: {
@@ -6045,29 +6054,41 @@ export const charts = [
                   },
                   itemStyle: {
                     normal: {
-                      borderColor: 'rgb(65,111,232)',
+                      borderColor: '#4583ff',
                       // borderColor:'rgba(26,82,231, 1)',
                       borderWidth: 1,
-                      areaColor:'rgba(14,82,192,0.58)',
+                      areaColor:'#0A1D66',
                       // areaColor: 'rgba(7, 52, 126, 0.3)',
-                      shadowColor: 'rgba(0, 0, 0, 0.5)',
+                      shadowColor: '#050E3399',
                       shadowBlur: 0,
                       shadowOffsetX: 0,
                       shadowOffsetY: 1,
                     },
                     emphasis: {
-                      areaColor: '#1677ff80',
-                      borderColor: '#2ab8ff',
+                      areaColor: '#112E8C',
+                      borderColor: '#96C0FF',
                       borderWidth: 1,
                       shadowColor: 'rgba(0, 255, 255, 0.7)',
                       shadowBlur: 10,
                       shadowOffsetX: 0,
                       shadowOffsetY: 1,
                       label: {
-                        show: false,
+                        show: true,
+                        fontSize: 12
                       },
                     },
                   },
+                  select:{
+                    itemStyle:{
+                      areaColor:'#1F45B3',
+                      color:'#fff'
+                    },
+                    label:{
+                      show:true,
+                      color:'#fff',
+                      fontSize: 12
+                    },
+                  },
                   zoom: 1.6,
                   scaleLimit:{
                     min: 1.6,
@@ -6182,7 +6203,7 @@ export const charts = [
               {
                 label:'阴影',
                 type:'switch',
-                key: 'echarts.openShadow'
+                key: 'echarts.option.geo.show',
               }
             ],
           },
@@ -6747,22 +6768,10 @@ export const charts = [
           disableAnchor: true,
           chartsColor: [
             '#1890ff',
-            '#36CBCB',
-            '#2FC25B',
-            '#FACC14',
-            '#F2637B',
-            '#fc8452',
-            '#9a60b4',
-            '#ea7ccc',
+            '#4583FF',
+            '#37B3CC'
           ],
           data: [
-            [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' },
-            ],
             [
               { value: 1548, name: 'Search' },
               { value: 775, name: 'Direct' },
@@ -6771,7 +6780,6 @@ export const charts = [
           ],
           chartsRadius: [
             ['60%', '70%'],
-            ['0%', '50%'],
           ],
         },
       },

src/services/selections.ts

@@ -1,4 +1,5 @@
 import { Pen } from '@meta2d/core';
+import { getter } from '@meta2d/core/src/utils/object';
 import { reactive } from 'vue';
 
 export enum SelectionMode {
@@ -34,7 +35,22 @@ export const useSelection = () => {
     } else {
       selections.mode = SelectionMode.Pen;
       selections.pen = pens[0];
-      selections.pens = undefined;
+      // @ts-ignore
+      let props = selections.pen.props?.custom || [];
+      let realTimes = selections.pen.realTimes || [];
+      for(let i = 0;i<props.length;i++){
+        let propKey = props[i].key || ''
+        if(propKey.includes('.')){
+          selections.pen[propKey] = getter(pens[0],propKey) // 根本原因 setValue会删除pen[0]的propKey，所以重新赋值
+        }
+      }
+      for(let i = 0;i<realTimes.length;i++){
+        let realTime = realTimes[i].key || ''
+        if(realTime.includes('.')){
+          selections.pen[realTime] = getter(pens[0],realTime) // 根本原因 setValue会删除pen[0]的propKey，所以重新赋值
+        }
+      }
+        selections.pens = undefined;
     }
   };
   return {

src/services/utils.ts

@@ -159,6 +159,16 @@ export function checkData(data: Meta2dData) {
   const pens: Pen[] = data.pens || [];
   for (let i = 0; i < pens.length; i++) {
     const pen: any = pens[i];
+    pen.props?.custom.forEach((prop)=>{
+      if(prop.key?.includes('.')){
+        delete pen[prop.key];
+      }
+    });
+    pen.realTimes?.forEach(realTime =>{
+      if(realTime.key?.includes('.')){
+        delete pen[realTime.key];
+      }
+    })
     pen.events?.forEach((event: any) => {
       delete event.setProps;
     });

src/views/components/PenDatas.vue

@@ -481,6 +481,7 @@ import { updatePen } from './pen';
 
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import Actions from './Actions.vue';
+import {useSelection} from "@/services/selections";
 
 const route = useRoute();
 const router = useRouter();
@@ -883,9 +884,11 @@ const getBindsDesc = (item: any) => {
 
   return '动态数据';
 };
+const { selections } = useSelection();
 
 const changeValue = (prop: string) => {
   updatePen(props.pen, prop);
+  selections.pen[prop] = getter(props.pen,prop)
 };
 
 const onTrigger = (item: any) => {

src/views/components/PenProps.vue

@@ -991,7 +991,8 @@
                   />
                   <t-switch
                       v-else-if="item.type === 'switch'"
-                      @change="changeValue(item.key,$event)"/>
+                      v-model="data.pen[item.key]"
+                      @change="changeValue(item.key)"/>
                   <t-input
                     class="w-full"
                     v-else
@@ -1153,6 +1154,7 @@ import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
+import { getter } from '@meta2d/core';
 import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
 
 const { user } = useUser();
@@ -1305,11 +1307,9 @@ const decimalRound = (val: number) => {
   return Math.round(+val || 0);
 };
 
-const changeValue = (prop: string,eventData = undefined) => {
-  if(eventData){
-    data.pen[prop] = eventData
-  }
+const changeValue = (prop: string) => {
   updatePen(data.pen, prop);
+  selections.pen[prop] = getter(data.pen,prop)
 };
 
 const changeID = (value: any) => {