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

public/theme/light.json

@@ -0,0 +1,391 @@
+{
+    "color": [
+        "#3fb1e3",
+        "#6be6c1",
+        "#626c91",
+        "#a0a7e6",
+        "#c4ebad",
+        "#96dee8"
+    ],
+    "backgroundColor": "rgba(252,252,252,0)",
+    "textStyle": {},
+    "title": {
+        "textStyle": {
+            "color": "#666666"
+        },
+        "subtextStyle": {
+            "color": "#999999"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": "2"
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "8",
+        "symbol": "emptyCircle",
+        "smooth": false
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": "2"
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "8",
+        "symbol": "emptyCircle",
+        "smooth": false
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 0,
+            "barBorderColor": "#ccc"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#e6a0d2",
+            "color0": "transparent",
+            "borderColor": "#e6a0d2",
+            "borderColor0": "#3fb1e3",
+            "borderWidth": "2"
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        },
+        "lineStyle": {
+            "width": "1",
+            "color": "#cccccc"
+        },
+        "symbolSize": "8",
+        "symbol": "emptyCircle",
+        "smooth": false,
+        "color": [
+            "#3fb1e3",
+            "#6be6c1",
+            "#626c91",
+            "#a0a7e6",
+            "#c4ebad",
+            "#96dee8"
+        ],
+        "label": {
+            "color": "#ffffff"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#eeeeee",
+            "borderColor": "#aaaaaa",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#ffffff"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(63,177,227,0.25)",
+                "borderColor": "#3fb1e3",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "#3fb1e3"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#eeeeee",
+            "borderColor": "#aaaaaa",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#ffffff"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(63,177,227,0.25)",
+                "borderColor": "#3fb1e3",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "#3fb1e3"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#cccccc"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#999999"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#cccccc"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#999999"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#cccccc"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#999999"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#cccccc"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#999999"
+        },
+        "splitLine": {
+            "show": true,
+            "lineStyle": {
+                "color": [
+                    "#eeeeee"
+                ]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": [
+                    "rgba(250,250,250,0.05)",
+                    "rgba(200,200,200,0.02)"
+                ]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#999999"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#626c91",
+            "width": 1
+        },
+        "itemStyle": {
+            "color": "#626c91",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#626c91",
+            "borderColor": "#626c91",
+            "borderWidth": 0.5
+        },
+        "checkpointStyle": {
+            "color": "#3fb1e3",
+            "borderColor": "#3fb1e3"
+        },
+        "label": {
+            "color": "#626c91"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#626c91"
+            },
+            "controlStyle": {
+                "color": "#626c91",
+                "borderColor": "#626c91",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#626c91"
+            }
+        }
+    },
+    "visualMap": {
+        "color": [
+            "#2a99c9",
+            "#afe8ff"
+        ]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(222,222,222,1)",
+        "fillerColor": "rgba(114,230,212,0.25)",
+        "handleColor": "#cccccc",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#ffffff"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#ffffff"
+            }
+        }
+    }
+}

src/App.vue

@@ -8,6 +8,7 @@ import { onBeforeMount } from 'vue';
 import { useUser } from './services/user';
 import { changeTheme, registerTheme } from './services/echarts';
 import { useEnterprise } from './services/enterprise';
+import { switchTheme } from './services/theme';
 
 const { getUser } = useUser();
 const { getEnterprise } = useEnterprise();
@@ -16,7 +17,15 @@ onBeforeMount(() => {
   getEnterprise();
   setTimeout(() => {
     registerTheme();
-    changeTheme('le-dark');
+    // changeTheme('le-dark');
+    let theme =  localStorage.getItem('le-theme');
+    if(theme === 'light') {
+      setTimeout(() => {
+        switchTheme(theme);
+      }, 3000);
+    }else{
+      changeTheme('le-dark');
+    }
   });
   setTimeout(() => {
     getUser();

src/services/common.ts

@@ -13,40 +13,41 @@ import { baseVer } from '@/services/upgrade';
 import { debounce } from './debouce';
 import { deepClone, isDomShapes } from '@meta2d/core';
 import { useSelection } from '@/services/selections';
+import { rootDomain } from './defaults';
 
 const { select } = useSelection();
 
 const assets = reactive({
-  home: 'https://le5le.com',
-  account: 'https://account.le5le.com',
-  '3d': 'https://3d.le5le.com',
-  '2d': 'https://2d.le5le.com',
+  home: `https://${rootDomain.slice(1)}`,
+  account: `https://account${rootDomain}',`,
+  '3d': `https://3d${rootDomain}`,
+  '2d': `https://2d${rootDomain}`,
   helps: [
     {
       name: '产品介绍',
-      url: 'https://doc.le5le.com/document/118756411',
+      url: `https://doc${rootDomain}/document/118756411`,
     },
     {
       name: '快速上手',
-      url: 'https://doc.le5le.com/document/119363000',
+      url: `https://doc${rootDomain}/document/119363000`,
     },
     {
       name: '使用手册',
-      url: 'https://doc.le5le.com/document/118764244',
+      url: `https://doc${rootDomain}/document/118764244`,
     },
     {
       name: '快捷键',
-      url: 'https://doc.le5le.com/document/119620214',
+      url: `https://doc${rootDomain}/document/119620214`,
       divider: true,
     },
     {
       name: '企业服务与支持',
-      url: 'https://doc.le5le.com/document/119296274',
+      url: `https://doc${rootDomain}/document/119296274`,
       divider: true,
     },
     {
       name: '关于我们',
-      url: 'https://le5le.com/about.html',
+      url: `https://${rootDomain.slice(1)}/about.html`,
     },
   ],
 });
@@ -668,6 +669,7 @@ export const autoSaveAS = async(id:string)=>{
   //去除图纸一些信息
   for (const k of delAttrs) {
     delete ret[k];
+    delete ret.data[k];
   }
   chargeDialogShow.value = false;
   meta2d.open(ret.data);

src/services/defaults.ts

@@ -1,6 +1,13 @@
 import { Pen, FormItem } from '@meta2d/core';
 import { cdn } from './api';
 
+const getRootDomain = ()=>{ 
+  const a =location.host.split('.');
+  return `.${a[a.length-2]}.${a[a.length-1]}`
+};
+
+export let rootDomain = getRootDomain().indexOf('localhost')!==-1?'.le5le.com':getRootDomain();
+
 export const fromArrows = [
   { icon: '#l-line', value: '' },
   { icon: '#l-from-triangle', value: 'triangle' },
@@ -2180,7 +2187,7 @@ export const formComponents = [
           width: 500,
           height: 400,
           externElement: true,
-          iframe: 'https://le5le.com',
+          iframe: `https://${rootDomain?.slice(1)}`,
           props: {
             custom: iframeCustom,
           },
@@ -2416,13 +2423,13 @@ export const formComponents = [
           height: 300,
           data: [
             {
-              src: 'https://2ds.le5le.com/img/banner1.bc890350.png',
+              src: `https://2ds${rootDomain}/img/banner1.bc890350.png`,
             },
             {
-              src: 'https://2ds.le5le.com/img/banner2.adab6a6e.png',
+              src: `https://2ds${rootDomain}/img/banner2.adab6a6e.png`,
             },
             {
-              src: 'https://2ds.le5le.com/img/banner3.86b53aed.png',
+              src: `https://2ds${rootDomain}/img/banner3.86b53aed.png`,
             },
           ],
           hiddenText: true,
@@ -2447,13 +2454,13 @@ export const formComponents = [
           swiperType: 'iframe',
           data: [
             {
-              src: 'https://2d.le5le.com/preview?id=6357a9e2d44b9402de84d2e8',
+              src: `https://2d${rootDomain}/preview?id=6357a9e2d44b9402de84d2e8`,
             },
             {
-              src: 'https://2d.le5le.com/preview?id=6357aec8d44b9402de84d2f1',
+              src: `https://2d${rootDomain}/preview?id=6357aec8d44b9402de84d2f1`,
             },
             {
-              src: 'https://2d.le5le.com/preview?id=641d524a8df2c654ea652d7e',
+              src: `https://2d${rootDomain}/preview?id=641d524a8df2c654ea652d7e`,
             },
           ],
           hiddenText: true,
@@ -2490,7 +2497,7 @@ export const formComponents = [
                 {
                   action: 0,
                   params: '_blank',
-                  value: 'https://2d.le5le.com/',
+                  value: `https://2d${rootDomain}`,
                 },
               ],
             },
@@ -2621,13 +2628,13 @@ context.meta2d.translate(
             {
               key: '2',
               text: '页面2',
-              to: 'https://2d.le5le.com/?id=641d524a8df2c654ea652d7e',
+              to: `https://2d${rootDomain}/?id=641d524a8df2c654ea652d7e`,
               target: '_blank',
             },
             {
               key: '3',
               text: '页面3',
-              to: 'https://2d.le5le.com/?id=6357a9e2d44b9402de84d2e8',
+              to: `https://2d${rootDomain}/?id=6357a9e2d44b9402de84d2e8`,
               target: '_self',
             },
           ],

src/services/download.ts

@@ -510,9 +510,7 @@ async function zipImage(zip: JSZip, image: string, temImage?: string) {
 //   const pen_2d = meta2d.store.data.pens.filter(
 //     (pen) =>
 //       pen.name === 'iframe' &&
-//       (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
 //         pen.iframe.indexOf('/2d') !== -1 || pen.iframe.indexOf('data=2d') !== -1 ||
-//         pen.iframe.indexOf('v.le5le.com') !== -1 ||
 //         pen.iframe.indexOf('/view/v') !== -1 ||pen.iframe.indexOf('data=v') !== -1||
 //         pen.iframe.indexOf('/preview') !== -1)
 //   );

src/services/echarts.ts

@@ -8,6 +8,11 @@ export function registerTheme() {
     .then((theme) => {
       echarts.registerTheme('le-dark', theme);
     });
+  fetch((cdn ? cdn + '/v/' : '') + 'theme/light.json')
+    .then((r) => r.json())
+    .then((theme) => {
+      echarts.registerTheme('le-light', theme);
+    });
 }
 
 export function changeTheme(theme: string) {

src/services/enterprise.ts

@@ -1,9 +1,10 @@
 import { reactive } from 'vue';
 import axios from 'axios';
+import { rootDomain } from './defaults';
 
 const enterprise = reactive({
   name: '乐吾乐',
-  home: 'https://le5le.com',
+  home: `https://${rootDomain.slice(1)}`,
   account: location.protocol + '//' + location.host + '/account',
   v: location.protocol + '//' + location.host + '/v',
   '3d': location.protocol + '//' + location.host + '/3d',
@@ -12,29 +13,29 @@ const enterprise = reactive({
   helps: [
     {
       name: '产品介绍',
-      url: 'https://doc.le5le.com/document/118756411',
+      url: `https://doc${rootDomain}/document/118756411`,
     },
     {
       name: '快速上手',
-      url: 'https://doc.le5le.com/document/119363000',
+      url: `https://doc${rootDomain}/document/119363000`,
     },
     {
       name: '使用手册',
-      url: 'https://doc.le5le.com/document/118764244',
+      url: `https://doc${rootDomain}/document/118764244`,
     },
     {
       name: '快捷键',
-      url: 'https://doc.le5le.com/document/119620214',
+      url: `https://doc${rootDomain}/document/119620214`,
       divider: true,
     },
     {
       name: '企业服务与支持',
-      url: 'https://doc.le5le.com/document/119296274',
+      url: `https://doc${rootDomain}/document/119296274`,
       divider: true,
     },
     {
       name: '关于我们',
-      url: 'https://le5le.com/about.html',
+      url: `https://${rootDomain.slice(1)}/about.html`,
     },
   ],
 });

src/services/theme.ts

@@ -1,3 +1,5 @@
+import { changeTheme } from './echarts';
+
 export const themes: any = {
   dark: {
     '--color': '#bdc7db',
@@ -5,7 +7,7 @@ export const themes: any = {
     '--color-desc': '#617b91',
     '--color-gray': '#4f5b75',
     '--color-background': '#1e2430',
-    '--color-background-active': '#161f2c',
+    '--color-background-active': '#121924',//'#161f2c',
     '--color-background-hover': '#181f29',
     '--color-background-input': '#303746',
     '--color-background-popup': '#303746',
@@ -13,41 +15,82 @@ export const themes: any = {
     '--color-border': '#000000',
     '--color-border-input': '#535f79',
     '--color-border-input-hover': '#454f64',
-    '--color-scrollbar': '#dad7d7',
+    '--color-scrollbar': '#535F79',
     '--color-scrollbar-hover': '#e5e5e5',
     '--td-component-border': '#42516c',
-    '--color-background-editor': '#181b24',
+    '--color-background-editor': '#080b0f',
     '--color-border-editor': '#1e2430',
     '--color-border-popup': 'transparent',
     '--shadow-popup': 'none',
+    '--td-bg-color-component':'#535f79',
+    '--color-background-groups':'#1e2430',
+    '--color-background-views-hover':'#3E4D6B',
+    '--color-switch-handle':'#bdc7db',
   },
   light: {
-    '--color': '#595959',
-    '--color-title': '#262626',
+    '--color': '#737A8A', //'#595959',
+    '--color-title':'#666D79',// '#262626',
     '--color-desc': '#8c8c8c',
     '--color-gray': '#bfbfbf',
     '--color-background': '#ffffff',
-    '--color-background-active': '#f7f8f9',
-    '--color-background-hover': '#181f29',
-    '--color-background-input': '#303746',
+    '--color-background-active':'#FFFFFF', //'#f7f8f9',
+    '--color-background-hover': '#EFF1F6',
+    '--color-background-input': '#F2F4F8',
     '--color-background-popup': '#ffffff',
-    '--color-background-popup-hover': '#454f64',
-    '--color-border': '#000000',
-    '--color-border-input': '#535f79',
-    '--color-border-input-hover': '#454f64',
-    '--color-scrollbar': '#dad7d7',
-    '--color-scrollbar-hover': '#e5e5e5',
-    '--td-component-border': '#42516c',
-    '--color-background-editor': '#181b24',
-    '--color-border-editor': '#1e2430',
+    '--color-background-popup-hover': '#EFF1F6',//'#454f64',
+    '--color-border': '#f0f1f2',
+    '--color-border-input': '#e5e5e5',
+    '--color-border-input-hover': '#dcdcdc',
+    '--color-scrollbar': '#dad7d7',//2
+    '--color-scrollbar-hover': '#e5e5e5',//1
+    '--td-component-border': '#f3f3f3',
+    '--color-background-editor': '#f0f1f2',
+    '--color-border-editor': '#c6c6c666' ,//'#1e2430',
     '--color-border-popup': '#dddddd',
     '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
+    '--td-bg-color-component':'#F7F8FA',
+    '--color-background-groups':'#F7F8FA',
+    '--color-background-views-hover':'#EFF1F6',
+    '--color-switch-handle':'#fff'
   },
 };
 
-export function switchTheme(themeName: string) {
-  let theme = themes[themeName];
+export function switchTheme(themeName?: string) {
+  //编辑器样式
+  let theme = themes[themeName||'dark'];
   for (let key in theme) {
     document.documentElement.style.setProperty(key, theme[key]);
   }
+  
+  //echarts样式（系统组件-图表） 
+  changeTheme(`le-${themeName||'dark'}`);
+
+  //系统组件其他图元样式？
+  
+  //画布中的图元？
+
+  //画布样式
+  let options:any = {
+    ruleColor:'#222E47',
+    background: '#1e2430',
+    color: '#bdc7db',
+    ruleOptions:{
+      background:'#121924',
+      textColor:'#6E7B91'
+    },
+  }
+  if(themeName === 'light'){
+    options = {
+      ruleColor:'#C8D0E1',
+      background: '#fff',
+      color: '#000',
+      ruleOptions:{
+        background:'#F7F8FA',
+        textColor:'#C8D0E1'
+      },
+    }
+  }
+  meta2d?.setOptions(options);
+  meta2d?.render();
+  localStorage.setItem('le-theme', themeName||'dark');
 }

src/services/utils.ts

@@ -35,6 +35,7 @@ export interface Meta2dBackData extends Meta2dData {
   teams?: { id?: string; name?: string }[];
   tags?: string[]; //标签数组
   filename?: string; //后端存储的文件名
+  ownerId?:string;
 }
 
 const notification = ref<any>(null);

src/styles/props.css

@@ -248,7 +248,7 @@
     .t-switch__handle {
       top: 2px;
       &::before {
-        background-color: var(--color);
+        background-color: var(--color-switch-handle);
       }
     }
 

src/styles/var.css

@@ -26,7 +26,7 @@
   --color-error-disabled: #ffc2c5;
 
   --color-background: #1e2430;
-  --color-background-active: #161f2c;
+  --color-background-active: #121924;
   --color-background-hover: #181f29;
   --color-background-input: #303746;
   --color-background-popup: #303746;
@@ -38,7 +38,7 @@
   --color-border-input-hover: #454f64;
   --color-border-popup: transparent;
 
-  --color-scrollbar: #dad7d7;
+  --color-scrollbar: #535F79;
   --color-scrollbar-hover: #e5e5e5;
 
   --border-radius: 4px;
@@ -55,7 +55,7 @@
   --td-component-border: #42516c;
   --td-bg-color-secondarycontainer: var(--td-component-border);
   --td-comp-size-xxl: 40px;
-  --td-text-color-primary: var(--color);
+  --td-text-color-primary: var(--color-title);
   --td-text-color-secondary: var(--color-desc);
   --td-bg-color-container-hover: var(--color-background-hover);
   --td-font-family: var(--font-family);
@@ -79,6 +79,9 @@
   --td-shadow-inset-bottom: inset 0 -0.5px 0 #555;
   --td-shadow-inset-left: inset -0.5px 0 0 #555;
 
-  --color-background-editor: #181b24;
+  --color-background-editor:#080b0f;
   --color-border-editor: #1e2430;
+  --color-background-groups: #1e2430;
+  --color-background-views-hover:#3E4D6B;
+  --color-switch-handle: #bdc7db;
 }

src/views/components/AnimateFrames.vue

@@ -553,6 +553,7 @@ const close = () => {
   border-radius: 4px;
   box-shadow: rgba(39, 54, 78, 0.08) 0px 2px 10px 0px,
     rgba(39, 54, 78, 0.1) 4px 12px 40px 0px;
+  background: var(--color-background);
 
   & > .head {
     display: flex;

src/views/components/Graphics.vue

@@ -192,7 +192,7 @@
           <t-button
             class="w-full"
             @click="onManageGraphic"
-            style="height: 30px"
+            style="height: 30px;color:var(--color) !important;"
           >
             {{ activedGroup }}管理
           </t-button>
@@ -214,6 +214,19 @@
         expandType="popup"
         v-model="contextmenu.activeValue"
       >
+        <t-submenu
+          value="moveTo"
+          :title="`移动到${activedGroup==='方案'?'模板':'方案'}`"
+          v-if="['方案', '模板'].includes(activedGroup)"
+          :disabled="contextmenu.component['3d']"
+        >
+          <t-menu-item
+            v-for="subMenu in moveGroups[activedGroup==='方案'?'模板':'方案']"
+            :value="'moveTo:' + subMenu.name"
+          >
+            {{ subMenu.name }}
+          </t-menu-item>
+        </t-submenu>
         <t-submenu
           value="move"
           title="移动到"
@@ -388,7 +401,7 @@ import { parseSvg } from '@meta2d/svg';
 import Pay from './Pay.vue';
 import { filename } from '@/services/file';
 import { useUser } from '@/services/user';
-import { iframeCustom } from '@/services/defaults';
+import { iframeCustom, rootDomain } from '@/services/defaults';
 import { getLe5le3d } from '@/services/api';
 import { useSelection } from '@/services/selections';
 import localforage from 'localforage';
@@ -399,10 +412,13 @@ const { user } = useUser();
 const { setFolder, getFolder } = useFolder();
 const router = useRouter();
 const { select } = useSelection();
-
 const activedGroup = ref('');
 const activeAssets = ref('system');
 let groups = reactive([]);
+let moveGroups = reactive<any>({
+  '方案':[],
+  '模板':[]
+});
 const systemGroups = [
   {
     icon: 'desktop',
@@ -563,6 +579,8 @@ const groupChange = async (name: string) => {
 
         //用户方案
         subGroups.value = await getCollectionImageList('方案', 'v',1);
+        moveGroups['方案'] = [];
+        subGroups.value.forEach((item)=>{if(item.name!=='默认'){ moveGroups['方案'].push({name:item.name})}});
         groupType.value = 1;
         userLastName = name;
       }
@@ -592,6 +610,8 @@ const groupChange = async (name: string) => {
         // await getPrivateProjects('le5leV-template');
         // userLastName = name;
         subGroups.value = await getCollectionImageList('模板', 'v',2);
+        moveGroups['模板'] = [];
+        subGroups.value.forEach((item)=>{if(item.name!=='默认'){ moveGroups['模板'].push({name:item.name})}});
         groupType.value = 1;
         userLastName = name;
       }
@@ -1243,6 +1263,7 @@ const open = async (item: any) => {
 
     for (const k of delAttrs) {
       delete ret[k];
+      delete ret.data[k];
     }
     autoSave();
     meta2d.open(ret.data);
@@ -1529,6 +1550,28 @@ const onContextMenu = async (e: MouseEvent, group: any, item: any) => {
     };
   }
 
+  if(!(moveGroups['模板']&&moveGroups['模板'].length)){
+    let ret: { list: any[] } = await axios.post('/api/directory/list', {
+        fullpath:"/大屏/模板",
+    });
+    moveGroups['模板'] = [];
+    ret.list.forEach((item)=>{
+      if(item.fullpath!=='/大屏/模板/默认'){
+         moveGroups['模板'].push({name:item.fullpath.split('/')[3]})
+      }
+    });
+  }
+  if(!(moveGroups['方案']&&moveGroups['方案'].length)){
+    let ret: { list: any[] } = await axios.post('/api/directory/list', {
+        fullpath:"/大屏/方案",
+    });
+    moveGroups['方案'] = [];
+    ret.list.forEach((item)=>{
+      if(item.fullpath!=='/大屏/方案/默认'){
+         moveGroups['方案'].push({name:item.fullpath.split('/')[3]})
+      }
+    });
+  }
   contextmenu.subMenus = [];
   for (const elem of subGroups.value) {
     if (elem === group || elem.name === '默认' || elem.name === '3D') {
@@ -1578,7 +1621,7 @@ const onMenu = async (val: string) => {
           },
         });
       } else if (contextmenu.component['3d']) {
-        let url = 'https://3d.le5le.com/?id=';
+        let url = `https://3d${rootDomain}/?id=`;
         if (window.url3D) {
           url = window.url3D;
         }
@@ -1604,6 +1647,40 @@ const onMenu = async (val: string) => {
       Object.assign(delDialog.contextmenuObj, contextmenu);
       break;
     default:
+      if(val.startsWith('moveTo:')){
+        val = val.replace('moveTo:', '');
+
+        //更新前端
+        contextmenu.group.list.forEach((item: any, index: number, arr: any[]) => {
+          if (id === item._id || id === item.id) {
+            arr.splice(index, 1);
+          }
+        });
+
+        //更新后端图纸
+        let ret = await updateCollection('v', {
+          id,
+          folder: val === '默认' ? '' : val,
+          userFlag:activedGroup.value === '方案' ? 2 : 1
+        });
+        if (!ret) {
+          return;
+        }
+        //更新后端 图片
+        let path: string =
+        contextmenu.component.filename || contextmenu.component.image;
+        if (imageDrive && path.startsWith(imageDrive)) {
+          path = path.slice(imageDrive.length);
+        }
+        if(!path.startsWith('/api/file')) {
+          path = '/api/file' + path;
+        }
+        await axios.patch(`${path}`, {
+          // filenames: [filename],
+          directory: `/大屏/${activedGroup.value==='方案'?'模板':'方案' }/${val || '默认'}`,
+        });
+        break;
+      }
       if (val.indexOf('move:')) {
         return;
       }
@@ -2141,7 +2218,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
-  z-index: 3;
+  z-index: 2;
   .group-asset {
     height: 40px;
     justify-content: center;
@@ -2157,7 +2234,7 @@ onUnmounted(() => {
     .t-radio-button {
       width: 120px;
       height: 100%;
-      color: #fff;
+      color: var(--color);
       &:hover {
         color: var(--color-primary);
       }
@@ -2177,6 +2254,7 @@ onUnmounted(() => {
     z-index: 7;
 
     .groups {
+      background: var(--color-background-groups);
       & > div {
         display: flex;
         flex-direction: column;

src/views/components/Header.vue

@@ -267,7 +267,7 @@
       </a>
       <t-dropdown-menu>
         <t-dropdown-item divider="true">
-          <a :href="enterprise.account">
+          <a :href="enterprise.account" target="_blank">
             {{ user.username }}
             <label
               class="ml-16 vip-label"
@@ -411,8 +411,14 @@
         <div>
           <span style="vertical-align: middle">导出为Zip文件</span>
           <t-tooltip  content="这是Tooltip内容">
-            <HelpCircleIcon style="margin-left:12px;" />
-        </t-tooltip>
+            <a
+            :href="`https://doc${rootDomain}/document/155692631#%E5%AF%BC%E5%87%BA%E4%B8%BAZip%E6%96%87%E4%BB%B6`"
+            target="_blank"
+            class="hover"
+            >
+              <HelpCircleIcon style="margin-left:12px;" />
+            </a>
+          </t-tooltip>
         </div>
    </template>
    <div class="pay-box pay-diagram" style="font-size: 14px;
@@ -547,7 +553,7 @@ import {
   getDeployGoods,
   getFrameDownloadList
 } from '@/services/download';
-import { formComponents } from '@/services/defaults';
+import { formComponents, rootDomain } from '@/services/defaults';
 import Pay from './Pay.vue';
 import {getNetJsDiagram} from '@/services/material';
 
@@ -556,7 +562,6 @@ const router = useRouter();
 const route = useRoute();
 
 const baseUrl = import.meta.env.BASE_URL || '/';
-
 // const { assets, getAssets } = useAssets();
 
 const { user, signout } = useUser();
@@ -693,7 +698,11 @@ onUnmounted(() => {
 });
 
 const login = () => {
-  return `${enterprise['account']}?cb=${encodeURIComponent(location.href)}`;
+  if(import.meta.env.BASE_URL.startsWith('/') ){
+    return `${enterprise['account']}?cb=${encodeURIComponent(location.href)}`;
+  }else{
+    return `https://account${rootDomain}/login?cb=${encodeURIComponent(location.href)}`;
+  }
 };
 
 function load(isNew = false) {
@@ -1129,9 +1138,9 @@ const preGetPayList = async () => {
   const pen_pay = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`2d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/2d') !== -1 || pen.iframe.indexOf('data=2d') !== -1 ||
-        pen.iframe.indexOf('v.le5le.com') !== -1 ||
+        pen.iframe.indexOf(`v${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/view/v') !== -1 ||pen.iframe.indexOf('data=v') !== -1 ||
         pen.iframe.indexOf('/preview') !== -1)
   );
@@ -1162,19 +1171,19 @@ const showPayListDialog = async () => {
   const pen_3d = meta2d.store.data.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`3d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/3d') !== -1)
   );
   const pen_2d = meta2d.store.data.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`2d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/2d') !== -1)
   );
   const pen_v = meta2d.store.data.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('v.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`v${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1)
   );
   let price = 0;
@@ -1284,22 +1293,22 @@ const showPayListDialog = async () => {
   switch (downloadType) {
     case Frame.html:
       payListDialog.title = '下载离线部署包';
-      payListDialog.href = 'https://doc.le5le.com/document/155692631#%E4%B8%8B%E8%BD%BD%E7%A6%BB%E7%BA%BF%E9%83%A8%E7%BD%B2%E5%8C%85';
+      payListDialog.href = `https://doc${rootDomain}/document/155692631#%E4%B8%8B%E8%BD%BD%E7%A6%BB%E7%BA%BF%E9%83%A8%E7%BD%B2%E5%8C%85`;
       payListDialog.downloadUrl =img_cdn+ '/deployment/大厦电力管理系统(html).zip';
       break;
       case Frame.vue2:
       payListDialog.title = '下载vue2组件包';
-      payListDialog.href = 'https://doc.le5le.com/document/155692631#%E4%B8%8B%E8%BD%BDVue2%E7%BB%84%E4%BB%B6%E5%8C%85';
+      payListDialog.href = `https://doc${rootDomain}/document/155692631#%E4%B8%8B%E8%BD%BDVue2%E7%BB%84%E4%BB%B6%E5%8C%85`;
       payListDialog.downloadUrl = img_cdn+ '/deployment/大厦电力管理系统(vue2).zip';
       break;
       case Frame.vue3:
       payListDialog.title = '下载vue3组件包';
-      payListDialog.href = 'https://doc.le5le.com/document/155692631#%E4%B8%8B%E8%BD%BDVue3%E7%BB%84%E4%BB%B6%E5%8C%85';
+      payListDialog.href = `https://doc${rootDomain}/document/155692631#%E4%B8%8B%E8%BD%BDVue3%E7%BB%84%E4%BB%B6%E5%8C%85`;
       payListDialog.downloadUrl = img_cdn+ '/deployment/大厦电力管理系统(vue3).zip';
       break;
       case Frame.react:
       payListDialog.title = '下载react组件包';
-      payListDialog.href = 'https://doc.le5le.com/document/155692631#%E4%B8%8B%E8%BD%BDReact%E7%BB%84%E4%BB%B6%E5%8C%85';
+      payListDialog.href = `https://doc${rootDomain}/document/155692631#%E4%B8%8B%E8%BD%BDReact%E7%BB%84%E4%BB%B6%E5%8C%85`;
       payListDialog.downloadUrl = img_cdn+ '/deployment/大厦电力管理系统(react).zip';
       break;
   }
@@ -1321,7 +1330,7 @@ const preDownload =() => {
   const pen_3d = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`3d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/3d') !== -1)
   );
   if (pen_3d && pen_3d.length) {
@@ -1365,7 +1374,7 @@ const preDownload =() => {
   const pen_2d = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`2d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/2d') !== -1)
   );
   if (pen_2d && pen_2d.length) {
@@ -1409,7 +1418,7 @@ const preDownload =() => {
   const pen_v = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('v.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`v${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1)
   );
 
@@ -1458,7 +1467,7 @@ const preFrameDownload = async () => {
   const pen_3d = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('3d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`3d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/3d') !== -1)
   );
   let name_3d = (downloadType===Frame.vue3?'toVue3':downloadType===Frame.vue2?'toVue2':'toReact');
@@ -1504,7 +1513,7 @@ const preFrameDownload = async () => {
   const pen_2d = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('2d.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`2d${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/2d') !== -1)
   );
   let name_2d = (downloadType===Frame.vue3?'downloadVue3':downloadType===Frame.vue2?'downloadVue2':'downloadReact');
@@ -1550,7 +1559,7 @@ const preFrameDownload = async () => {
   const pen_v = meta2dData.pens.filter(
     (pen) =>
       pen.name === 'iframe' &&
-      (pen.iframe.indexOf('v.le5le.com') !== -1 ||
+      (pen.iframe.indexOf(`v${rootDomain}`) !== -1 ||
         pen.iframe.indexOf('/view/v') !== -1||pen.iframe.indexOf('data=v') !== -1||pen.iframe.indexOf('/preview') !== -1)
   );
   if (pen_v && pen_v.length) {

src/views/components/View.vue

@@ -59,7 +59,7 @@
             /> -->
             <!-- <LayersIcon  class="hover" @click="save(SaveType.Save, 'v.component', true,1)"/> -->
             <i
-              class="l-icon l-zujian hover"
+              class="l-icon l-zujian"
               @click="save(SaveType.Save, 'v.component', true,1)"
             >
             </i>
@@ -71,7 +71,8 @@
           @click="oneFormat"
           @dblclick="alwaysFormat"
           :style="{
-            color: one || always ? ' #1677ff' : '',
+            background: one || always ? '#4583ff' : '',
+            color: one || always ?( theme==='light'?'#fff':''):''
           }"
         >
           <svg
@@ -142,7 +143,8 @@
           @click="oneDraw"
           @dblclick="alwaysDraw"
           :style="{
-            color: oneD || alwaysD ? ' #1677ff' : '',
+            background: oneD || alwaysD ? '#4583ff' : '',
+            color: oneD || alwaysD ?( theme==='light'?'#fff':''):''
           }"
         >
           <svg
@@ -291,7 +293,7 @@
       </t-tooltip>
       <t-divider style="margin: 15px 4px" layout="vertical" />
       <t-tooltip :content="isLock ? '浏览模式' : '编辑模式'" placement="bottom">
-        <a>
+        <a class="a-1">
           <svg
             v-if="isLock"
             class="l-icon"
@@ -306,14 +308,16 @@
         </a>
       </t-tooltip>
       <t-tooltip content="运行（预览）" placement="bottom">
-        <a @click="preview">
+        <a class="a-1" @click="preview">
           <caret-right-icon />
           <!-- <t-icon name="caret-right" /> -->
         </a>
       </t-tooltip>
       <t-tooltip content="分享" placement="bottom">
-        <a @click="share">
-          <share-icon :class="{ primary: shared }" />
+        <a @click="share" :class="{ 'share-primary': shared }" :style="{
+           color: shared?(theme==='light'?'#fff':''):''
+        }">
+          <share-icon />
           <!-- <t-icon name="share" :class="{ primary: shared }" /> -->
         </a>
       </t-tooltip>
@@ -410,7 +414,7 @@
                           @click="onSelectNetWork(item)"
                         >
                           <div style="font-size: 14px">{{ item.name }}</div>
-                          <div class="desc">{{ item.url || item.data.url }}</div>
+                          <div class="desc">{{ item.url }}</div>
                           <span class="del" @click.stop="onDelNetWork(item, i)">
                             <delete-icon />
                             <!-- <t-icon name="delete" /> -->
@@ -697,7 +701,7 @@
                   @click="refreshSubdomain"
                 /> -->
               </t-tooltip>
-              <div class="mt-4 ml-16">v.le5le.com</div>
+              <div class="mt-4 ml-16">{{`v${rootDomain}`}}</div>
             </div>
           </div>
           <div class="form-item mt-24">
@@ -750,7 +754,7 @@
                 <div>
                   在域名服务商的DNS控制台设置好对应的CNAME，值为乐吾乐域名。
                   <a
-                    href="https://doc.le5le.com/document/126505408"
+                    :href="`https://doc${rootDomain}/document/126505408`"
                     target="_blank"
                   >
                     更多帮助
@@ -789,7 +793,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, ref, reactive, toRaw } from 'vue';
+import { onMounted, onUnmounted, watch, ref, reactive, toRaw, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import {
   Meta2d,
@@ -822,9 +826,10 @@ import {
   onScaleWindow,
   useDot,
   autoSaveAS,
+  
 } from '@/services/common';
 import { useSelection } from '@/services/selections';
-import { defaultFormat, fromArrows, toArrows } from '@/services/defaults';
+import { defaultFormat, fromArrows, toArrows, rootDomain } from '@/services/defaults';
 import { checkData, localStorageName, Meta2dBackData } from '@/services/utils';
 import { debounce } from '@/services/debouce';
 import { s8 } from '@/services/random';
@@ -834,7 +839,7 @@ import ContextMenu from './ContextMenu.vue';
 import Network from './Network.vue';
 import Dataset from './Dataset.vue';
 import ChargeCloudPublish from './ChargeCloudPublish.vue';
-import { AddIcon,SaveIcon, RootListIcon,SlashIcon, RefreshIcon, ServerIcon, CaretRightIcon, ShareIcon, QrcodeIcon, CloudIcon, DeleteIcon, SearchIcon, RollbackIcon, LaptopIcon, StopCircleIcon , PlayCircleIcon, PlayCircleStrokeIcon, LayersIcon } from 'tdesign-icons-vue-next';
+import { AddIcon,SaveIcon, RootListIcon,SlashIcon, RefreshIcon, ServerIcon, CaretRightIcon, ShareIcon, QrcodeIcon, CloudIcon, DeleteIcon, SearchIcon, RollbackIcon, LaptopIcon, StopCircleIcon , PlayCircleIcon, PlayCircleStrokeIcon, LayersIcon, FullscreenExitIcon } from 'tdesign-icons-vue-next';
 import {transformData} from '@/services/utils';
 
 const router = useRouter();
@@ -846,7 +851,16 @@ const { select } = useSelection();
 const meta2dOptions: Options = {
   cdn,
   rule: true,
+  ruleColor:'#222E47',
   background: '#1e2430',
+  ruleOptions:{
+    background:'#121924',
+    underline:true,
+    baseline:'bottom',
+    textTop:6,
+    textLeft:-24,
+    textColor:'#6E7B91'
+  },
   x: 32,
   y: 32,
   width: 1920,
@@ -906,13 +920,6 @@ const watcher = watch(
 //TODO 打开图纸
 const open = async (flag: boolean = false) => {
   if (route.query.token) {
-    //删除t域名登陆问题
-    deleteCookie('token', {
-      path: '/',
-      domain: 't.le5le.com',
-    });
-    // localStorage.setItem('token', route.query.token + '');
-    // setCookie('token', route.query.token + '');
     setCookie('token', route.query.token + '', {
       path: '/',
       domain: getDomain(),
@@ -955,7 +962,7 @@ const open = async (flag: boolean = false) => {
         shared.value = ret.shared;
 
         const qr: any = await QRCode.toDataURL(
-          `https://view2d.le5le.com/?id=${route.query.id + '&tag=v'}`
+          `https://view2d${rootDomain}/?id=${route.query.id + '&tag=v'}`
         );
         qrcode.url = qr;
       }
@@ -1242,8 +1249,8 @@ const preview = async () => {
   // @ts-ignore
   const data: Meta2dBackData = meta2d.data();
   checkData(data);
-  if (dot && user && data.id) {
-    // 有 id ，是修改后保存
+  if (dot && user && data.id&&data.ownerId=== user.id) {
+    // 有 id ，是修改后保存 是自己的图纸
     await save(SaveType.Save);
   }
   if (!data.id) {
@@ -1717,6 +1724,11 @@ const share = async () => {
     id:route.query.id,
     shared: !shared.value,
   });
+  if(shared.value){
+    MessagePlugin.success('取消分享成功！');
+  }else{
+    MessagePlugin.success('分享成功！');
+  }
   if (ret) {
     shared.value = ret.shared;
   }
@@ -1795,9 +1807,9 @@ const onChangeSubdomain = async () => {
 
   if (
     !publishDialog.data.domain ||
-    publishDialog.data.domain.indexOf('.v.le5le.com') >= 0
+    publishDialog.data.domain.indexOf(`.v${rootDomain}`) >= 0
   ) {
-    publishDialog.data.domain = publishDialog.data.subDomain + '.v.le5le.com';
+    publishDialog.data.domain = publishDialog.data.subDomain + `.v${rootDomain}`;
   }
 
   makePublishQrcode();
@@ -1813,7 +1825,7 @@ const onPublish = async () => {
   }
 
   if (!publishDialog.data.domain) {
-    publishDialog.data.domain = publishDialog.data.subDomain + '.v.le5le.com';
+    publishDialog.data.domain = publishDialog.data.subDomain + `.v${rootDomain}`;
   }
   if(!route.query.id) {
     MessagePlugin.warning('请选择将要发布的方案');
@@ -1854,6 +1866,11 @@ const onSuccessChargeCloud = () => {
   publishChargeDialog.show = false;
   onShowPublish();
 };
+
+const theme = computed(() => {
+  return localStorage.getItem('theme') || 'dark';
+});
+
 </script>
 <style lang="postcss" scoped>
 .meta2d {
@@ -1872,34 +1889,59 @@ const onSuccessChargeCloud = () => {
     z-index: 2;
     overflow-x: scroll;
     overflow-y: hidden;
+    border-bottom: 1px solid var(--color-background-editor);
     a {
       display: flex;
       align-items: center;
-      height: 100%;
-      padding: 0 10px;
+      /* height: 100%; */
+      padding: 6px;
+      margin: 4px;
+      border-radius: 4px;
       color: var(--color);
       text-decoration: none;
-
-      .l-icon {
+      &:hover{
+        background-color: var(--color-background-views-hover);
+        color: var(--color) !important;
+      }
+      /* .l-icon {
         width: 16px;
         height: 16px;
-      }
+      } */
 
-      &:hover {
+      /* &:hover {
         color: var(--color-primary);
+      } */
+      svg{
+        width: 18px ;
+        height: 18px;
+        &:hover{
+        color: var(--color) !important;
+      }
+      }
+      font-size: 18px;
+    }
+    .a-1{
+      svg{
+        width: 20px;
+        height: 20px ;
       }
     }
 
     .t-icon {
-      font-size: 16px;
+      font-size: 18px;
     }
     .l-icon {
-      font-size: 18px;
+      font-size: 21px;
+      width: 21px ;
+      height: 21px ;
     }
   }
 
+  .share-primary{
+    background-color: var(--color-primary);
+  }
   #meta2d {
-    border-top: 1px solid var(--color-background-input);
+    /* border-top: 1px solid var(--color-background-input); */
     height: calc(100vh - 81px);
     /* height: calc(100% - 40px); */
     /* height: 100%; */

src/views/components/common/CodeEditor.vue

@@ -90,12 +90,13 @@ onMounted(() => {
   } else {
     text = modelValue;
   }
+  let theme = localStorage.getItem('le-theme')==='light'?'vs':'vs-dark';
   editor = monaco.editor.create(dom.value, {
     value: text,
     automaticLayout: true,
     minimap: { enabled: false },
     language: language || 'javascript',
-    theme: 'vs-dark',
+    theme,
     lineNumbersMinChars:1,
     lineDecorationsWidth:0,
     ...options,