update code

src/App.vue

@@ -97,7 +97,7 @@ html.dark {
     .top-row2 {
       .dev-item {
         .el-card {
-          background: #304156;
+          background: #2B3553;
 
           .dev-title {
             svg * {
@@ -106,7 +106,7 @@ html.dark {
           }
 
           .el-card__body {
-            background: #263445;
+            background: #2B3553;
             color: #aaa;
           }
         }
@@ -147,6 +147,7 @@ html.dark {
       .el-card__body{
         background: transparent;
         color:#aaa;
+        box-shadow: none;
         .el-badge__content--danger{
           background: #6F89A6;
           width: 24px;
@@ -158,7 +159,7 @@ html.dark {
       }
     }
     .proc-card.server-status{
-      background: #263445;
+      background: #242B43;
       .el-card__header{
         .row2-top{
           div{
@@ -169,10 +170,10 @@ html.dark {
     }
   }
   .jv-container.jv-light{
-    background: #263445;
+    background: #242B43;
   }
   .add-report .row-norm .el-form-item__content{
-    background: #263445;
+    background: #242B43;
   }
   .add-report .div-nav-header{
     color:#fff;

src/layout/components/NavBar/components/NavbarRight.vue

@@ -163,10 +163,10 @@ html.dark {
       filter: saturate(500%);
     }
     .logo-sub-title{
-      color: #4F9EFA;
+      color: #fff;
     }
     .logo-title {
-      color: #4F9EFA;
+      color: #fff;
     }
   }
 }

src/layout/components/NavBar/components/NavbarRight2.vue

@@ -161,10 +161,10 @@ html.dark {
       filter: saturate(500%);
     }
     .logo-sub-title{
-      color: #4F9EFA;
+      color: #fff;
     }
     .logo-title {
-      color: #4F9EFA;
+      color: #fff;
     }
   }
 }

src/layout/index.vue

@@ -101,21 +101,24 @@ watch(route, (a, b, c) => {
 
 html.dark {
   .main-container {
-    background-color: #304156;
+    background-color: #1F263D;
     .router-link-active{
-      background-color: #0A0A0A;
+      background-color: #fff;
       .el-menu-item {
-        background-color: #0A0A0A !important;
+        background-color: #ffff !important;
         span.ml-1{
           font-weight: bold;
           color: #4F9EFA;
         }
       }
+      svg{
+        fill:#4F9EFA;
+      }
     }
     .el-menu-item {
-      background-color: #304156;
+      background-color: #1F263D;
       &.is-active {
-        background-color: #0A0A0A;
+        background-color: #fff;
         span.ml-1{
           font-weight: bold;
           color: #4F9EFA;
@@ -124,17 +127,17 @@ html.dark {
     }
     .el-sub-menu.is-active{
       .el-sub-menu__title{
-        background-color: #2B3B4F;
+        background-color: #1F263D;
         }
     }
 
     .el-header {
-      background-color: #304156;
+      background-color: #1F263D;
     }
 
     .center-container {
       .el-aside {
-        background-color: #304156;
+        background-color: #1F263D;
 
       }
 

src/styles/variables.scss

@@ -10,7 +10,7 @@
 
 /** 暗黑主题 */
 html.dark {
-  --el-bg-color-overlay:#263445;
+  --el-bg-color-overlay:#242B43;
   --menu-background: var(--el-bg-color-overlay);
   --menu-text: #fff;
   --menu-active-text: var(--el-menu-active-color);
@@ -22,6 +22,15 @@ html.dark {
   .lf-graph{
     background: transparent;
   }
+  .el-table__header th{
+    background-color: #222B45 !important;
+  }
+  .el-table tr{
+    background-color: #313C5D !important;
+  }
+  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+    background-color: #44527B !important;
+  }
 }
 
 $menu-background: var(--menu-background); // 菜单背景色

src/views/dashboard/index.vue

@@ -151,26 +151,32 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
+import {
+  useSettingsStore,
+} from "@/store";
 import ModelFlow from './components/ModelFlow.vue'
 import ModelFlow2 from './components/ModelFlow2.vue'
 import IndexNotice from './components/IndexNotice.vue'
 import ServiceStatus from './components/ServiceStatus.vue'
 import DeviceAPI from "@/api/device";
 import InfoApi from '@/api/info'
-const isV2 = window.isV2;
+import { ThemeEnum } from "@/enums/ThemeEnum";
+import eventBus from '@/utils/eventBus.js'
 
+const isV2 = window.isV2;
+const settingsStore = useSettingsStore();
 let svTemp = ref(55.5)
 let rd = () => { return +("" + Math.random()).substring(3, 5) };
 let rd2 = () => { return +("" + Math.random()).substring(3, 4) };
-let topInfos = ref<any>(null);
+let topInfos = ref(null);
-let devInfos = ref<any>(null);
+let devInfos = ref(null);
 
 const winWidth = ref(0)
 const isSmallScreen = computed(() => {
   return winWidth.value < 1440;
 });
-const getState = (e: any) => {
+const getState = (e) => {
   if (e == "offline") {
     return "离线";
   }
@@ -205,27 +211,43 @@ const loadDevice = () => {
 const loadInfo = () => {
   InfoApi.statistics().then(res => {
     let d = res.data
+    let isDark=settingsStore.theme === ThemeEnum.DARK
     topInfos.value = [
-      { title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', icon: "images/nav/nav1.png" },
+      { title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', 
-      { title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1', icon: "images/nav/nav2.png" },
+      icon: isDark?"images/nav/nav12.png": "images/nav/nav1.png" },
-      { title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', icon: "images/nav/nav3.png" },
+      { title: '算子总数', count: d.data.total_operator_count, ucnt: d.data.user_operator_count, clsName: 'c1', 
-      { title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', icon: "images/nav/nav4.png" },
+      icon:isDark?"images/nav/nav22.png": "images/nav/nav2.png" },
-      { title: '互联总数', count: d.data.total_task_count, ucnt: d.data.user_task_count, clsName: 'c1', icon: "images/nav/nav5.png" },
+      { title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', 
-      { title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', icon: "images/nav/nav1.png" },
+      icon: isDark?"images/nav/nav32.png":"images/nav/nav3.png" },
+      { title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', 
+      icon: isDark?"images/nav/nav42.png":"images/nav/nav4.png" },
+      { title: '互联总数', count: d.data.total_task_count, ucnt: d.data.user_task_count, clsName: 'c1', 
+      icon: isDark?"images/nav/nav52.png":"images/nav/nav5.png" },
+      { title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', 
+      icon: isDark?"images/nav/nav62.png":"images/nav/nav6.png" },
     ];
     if (isV2) {
       topInfos.value = [
-        { title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', icon: "images/nav/nav1.png" },
+        { title: '模型总数', count: d.data.total_model_count, ucnt: d.data.user_model_count, clsName: 'c1', 
-        { title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', icon: "images/nav/nav3.png" },
+        icon: isDark?"images/nav/nav12.png":"images/nav/nav1.png" },
-        { title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', icon: "images/nav/nav4.png" },
+        { title: '数据集总数', count: d.data.total_dataset_count, ucnt: d.data.user_dataset_count, clsName: 'c1', 
-        { title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', icon: "images/nav/nav1.png" },
+        icon: isDark?"images/nav/nav32.png":"images/nav/nav3.png" },
+        { title: '评估报告总数', count: d.data.total_connection_count, ucnt: d.data.user_connection_count, clsName: 'c1', 
+        icon: isDark?"images/nav/nav42.png":"images/nav/nav4.png" },
+        { title: '总访问量', count: d.data.total_visit_count, ucnt: d.data.user_visit_count, clsName: 'c1', 
+        icon: isDark?"images/nav/nav62.png":"images/nav/nav6.png" },
       ];
     }
 
   })
 }
-
+onUnmounted(()=>{
+  eventBus.off("changeTheme");
+});
 onMounted(() => {
+  eventBus.on("changeTheme",d=>{
+    loadInfo();
+  });
   winWidth.value = window.outerWidth;
   window.onresize = () => {
     setTimeout(() => {
@@ -628,7 +650,7 @@ html.dark {
     .top-row2 {
       .dev-item {
         .el-card {
-          background: #304156;
+          background: #2B3553;
 
           .dev-title {
             svg * {
@@ -637,7 +659,8 @@ html.dark {
           }
 
           .el-card__body {
-            background: #263445;
+            background: #2B3553;
+            box-shadow: none;
             color: #aaa;
           }
         }
@@ -689,7 +712,7 @@ html.dark {
       }
     }
     .proc-card.server-status{
-      background: #263445;
+      background: #242B43;
       .el-card__header{
         .row2-top{
           div{