✨ 支持暗黑主题切换

web/src/assets/scss/element/dark.scss

@@ -14,7 +14,7 @@
 html.dark {
   // * admin
   --bg-color: #000;
-  --v-main-bg-color: #181818;
+  --main-bg-color: #181818;
   --v-border-light: 1px solid #4c4c4d;
 
   body {
@@ -24,20 +24,20 @@ html.dark {
   .login_container {
     // background: rgba(171, 181, 196, 0.3);
     .login_box {
-      background-color: var(--v-main-bg-color) !important;
+      background-color: var(--main-bg-color) !important;
     }
   }
 
   .top_bar_container {
-    background-color: var(--bg-color) !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   .router_box {
-    background-color: var(--v-main-bg-color) !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   .aside_container {
-    background-color: var(--v-main-bg-color) !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   .terminal_top {
@@ -66,7 +66,7 @@ html.dark {
   }
 
   .app-main-container {
-    background-color: var(--v-main-bg-color) !important;
+    background-color: var(--main-bg-color) !important;
 
     .card {
       background-color: var(--bg-color) !important;
@@ -75,7 +75,7 @@ html.dark {
 
   .layout-footer-container {
     color: var(--el-text-color-regular) !important;
-    background-color: var(--v-main-bg-color) !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   .fold-unfold {
@@ -128,7 +128,7 @@ html.dark {
 
     .el-tabs__item.is-active {
       color: var(--el-color-primary);
-      background-color: var(--v-main-bg-color) !important;
+      background-color: var(--main-bg-color) !important;
 
       .el-icon {
         color: var(--el-color-primary) !important;
@@ -136,7 +136,7 @@ html.dark {
     }
 
     .el-tabs__item:not(.is_active):hover {
-      background-color: var(--v-main-bg-color) !important;
+      background-color: var(--main-bg-color) !important;
 
       .el-icon {
         color: var(--el-color-primary) !important;

web/src/components/top-bar.vue

@@ -9,7 +9,6 @@
         :active-icon="Moon"
         :inactive-icon="Sunny"
         class="dark_switch"
-        @change="setTheme"
       />
       <el-button
         type="info"
@@ -62,15 +61,14 @@ let visible = ref(false)
 let checkVersionErr = ref(false)
 let currentVersion = ref(`v${ packageJson.version }`)
 let latestVersion = ref(null)
-// let isDark = ref(true)
 
 let isNew = computed(() => latestVersion.value && latestVersion.value !== currentVersion.value)
 let user = computed(() => $store.user)
 let title = computed(() => $store.title)
 let isDark = computed({
   get: () => $store.isDark,
-  set: (value) => {
-    $store.setTheme({ isDark: value })
+  set: (isDark) => {
+    $store.setTheme(isDark)
   }
 })
 

web/src/store/index.js

@@ -114,6 +114,10 @@ const useStore = defineStore({
     setTheme(isDark) {
       // $store.setThemeConfig({ isDark: val })
       const html = document.documentElement
+      document.startViewTransition(() => {
+        // 在 startViewTransition 中修改 DOM 状态产生动画
+        document.documentElement.classList.toggle('dark')
+      })
       if (isDark) html.setAttribute('class', 'dark')
       else html.setAttribute('class', '')
       localStorage.setItem('isDark', isDark)
@@ -126,7 +130,7 @@ const useStore = defineStore({
       } else {
         const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
         const systemTheme = prefersDarkScheme.matches
-        // console.log('当前系统使用的是深色模式：', systemTheme ? '是' : '否')
+        console.log('当前系统使用的是深色模式：', systemTheme ? '是' : '否')
         isDark = systemTheme
       }
       this.setTheme(isDark)

web/src/views/index.vue

@@ -52,7 +52,7 @@ onBeforeMount(async () => {
       min-height: calc(100vh - 60px - 20px);
       background-color: #fff;
       border-radius: 6px;
-      margin: 0 10px 10px;
+      margin: 10px;
     }
   }
 }

web/src/views/server/components/host-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="always" class="host_card">
+  <div class="host_card">
     <el-table
       ref="tableRef"
       :data="hosts"
@@ -93,7 +93,7 @@
         </template>
       </el-table-column>
     </el-table>
-  </el-card>
+  </div>
 </template>
 
 <script setup>
@@ -194,21 +194,8 @@ const handleRemoveHost = async ({ host }) => {
 
 <style lang="scss" scoped>
 .host_card {
-  margin: -10px 30px 0 30px;
-  transition: all 0.5s;
-  position: relative;
-
-  // &:hover {
-  //   box-shadow: 0px 0px 15px rgba(6, 30, 37, 0.5);
-  // }
-
-  :deep(.el-descriptions__title) {
-    display: none;
-  }
-  :deep(.el-descriptions) {
-    padding: 0 25px;
-  }
-
+  margin: 0px 10px;
+  // transition: all 0.5s;
   .no_client_data {
     font-size: 14px;
     font-weight: normal;

web/src/views/server/index.vue

@@ -47,8 +47,7 @@
               {{ groupName }}
             </div>
           </template>
-          <div class="host_card_container">
-            <!-- <HostCard
+          <!-- <HostCard
               v-for="(item, index) in hosts"
               :key="index"
               :host-info="item"
@@ -56,13 +55,12 @@
               @update-host="handleUpdateHost"
               @update-list="handleUpdateList"
             /> -->
-            <HostTable
-              ref="hostTableRefs"
-              :hosts="hosts"
-              @update-host="handleUpdateHost"
-              @update-list="handleUpdateList"
-            />
-          </div>
+          <HostTable
+            ref="hostTableRefs"
+            :hosts="hosts"
+            @update-host="handleUpdateHost"
+            @update-list="handleUpdateList"
+          />
         </el-collapse-item>
       </el-collapse>
     </div>
@@ -255,9 +253,6 @@ let hostFormClosed = () => {
       line-height: 22px;
     }
 
-    .host_card_container {
-      padding-top: 15px;
-    }
     .or {
       color: var(--el-text-color-secondary);
       font-size: var(--el-font-size-base);