feat:theme

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);
+      }, 2000);
+    }else{
+      changeTheme('le-dark');
+    }
   });
   setTimeout(() => {
     getUser();

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/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,80 @@ 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': '#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'
   },
   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': '#080b0f',
-    '--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'
   },
 };
 
-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/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);
@@ -81,4 +81,6 @@
 
   --color-background-editor:#080b0f;
   --color-border-editor: #1e2430;
+  --color-background-groups: #1e2430;
+  --color-background-views-hover:#3E4D6B;
 }

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>
@@ -2216,7 +2216,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;
@@ -2232,7 +2232,7 @@ onUnmounted(() => {
     .t-radio-button {
       width: 120px;
       height: 100%;
-      color: #fff;
+      color: var(--color);
       &:hover {
         color: var(--color-primary);
       }
@@ -2252,6 +2252,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"

src/views/components/View.vue

@@ -1897,7 +1897,7 @@ const onSuccessChargeCloud = () => {
       color: var(--color);
       text-decoration: none;
       &:hover{
-        background-color: #3E4D6B;
+        background-color: var(--color-background-views-hover);
         color: var(--color) !important;
       }
       /* .l-icon {

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,