代码更新

2026-06-12 09:29:42 +08:00
parent 06dfe98cb6
commit 2c816a13df
28 changed files with 506 additions and 444 deletions
--- a/src/view/layout/header/index.vue
+++ b/src/view/layout/header/index.vue
@@ -39,7 +39,7 @@
      <tools />
      <el-dropdown>
        <div class="flex justify-center items-center h-full w-full">
-          <span class="cursor-pointer flex justify-center items-center text-black dark:text-gray-100">
+          <span class="cursor-pointer flex justify-center items-center text-[var(--tech-text)]">
            <CustomPic />
            <span v-show="!isMobile" class="w-16">{{ userStore.userInfo.nickName }}</span>
            <el-icon>
--- a/src/view/layout/header/tools.vue
+++ b/src/view/layout/header/tools.vue
@@ -7,7 +7,7 @@
  <div class="flex items-center mx-4 gap-4">
    <el-tooltip class="" effect="dark" content="搜索" placement="bottom">
      <span
-        class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
+        class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
      >
        <el-icon @click="handleCommand">
          <Search />
@@ -17,7 +17,7 @@

    <el-tooltip class="" effect="dark" content="系统设置" placement="bottom">
      <span
-        class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
+        class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
      >
        <el-icon @click="toggleSetting">
          <Setting />
@@ -27,7 +27,7 @@

    <el-tooltip class="" effect="dark" content="刷新" placement="bottom">
      <span
-        class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
+        class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
      >
        <el-icon :class="showRefreshAnmite ? 'animate-spin' : ''" @click="toggleRefresh">
          <Refresh />
@@ -36,7 +36,7 @@
    </el-tooltip>
    <el-tooltip class="" effect="dark" content="切换主题" placement="bottom">
      <span
-        class="w-8 h-8 p-2 rounded-full flex items-center justify-center shadow border border-gray-200 dark:border-gray-600 cursor-pointer border-solid"
+        class="w-8 h-8 p-2 rounded-full flex items-center justify-center gva-tech-tool-btn cursor-pointer border-solid"
      >
        <el-icon v-if="appStore.isDark" @click="appStore.toggleTheme(false)">
          <Sunny />
--- a/src/view/layout/setting/components/themeColorPicker.vue
+++ b/src/view/layout/setting/components/themeColorPicker.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="font-inter">
-    <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 shadow-sm">
+    <div class="gva-setting-card rounded-xl p-8">
      <div class="mb-8">
-        <p class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-5">精选色彩</p>
+        <p class="gva-setting-section-title text-base font-semibold mb-5">精选色彩</p>
        <div class="grid grid-cols-3 gap-4">
          <div
            v-for="colorItem in presetColors"
            :key="colorItem.color"
-            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-xl cursor-pointer transition-all duration-150 ease-in-out hover:transform hover:-translate-y-1 hover:shadow-lg"
+            class="gva-setting-color-item flex items-center gap-4 p-4 border-2 rounded-xl cursor-pointer transition-all duration-150 ease-in-out hover:-translate-y-1"
            :class="{
-              'ring-2 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-800 transform -translate-y-1 shadow-lg': modelValue === colorItem.color
+              'ring-2 ring-offset-2 transform -translate-y-1 shadow-lg': modelValue === colorItem.color
            }"
            :style="modelValue === colorItem.color ? {
              borderColor: colorItem.color,
@@ -18,8 +18,8 @@
            @click="handleColorChange(colorItem.color)"
          >
            <div
-              class="relative w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-500 flex-shrink-0 shadow-sm"
-              :style="{ backgroundColor: colorItem.color }"
+              class="relative w-10 h-10 rounded-lg border flex-shrink-0 shadow-sm"
+              :style="{ backgroundColor: colorItem.color, borderColor: 'rgba(0, 212, 255, 0.22)' }"
            >
              <div
                v-if="modelValue === colorItem.color"
@@ -32,16 +32,16 @@
              </div>
            </div>
            <div class="min-w-0 flex-1">
-              <span class="block text-sm font-semibold text-gray-900 dark:text-white">{{ colorItem.name }}</span>
+              <span class="block text-sm font-semibold gva-setting-card-title">{{ colorItem.name }}</span>
            </div>
          </div>
        </div>
      </div>

-      <div class="flex items-center justify-between p-5 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl mb-6 shadow-sm">
+      <div class="gva-setting-color-panel flex items-center justify-between p-5 rounded-xl mb-6">
        <div class="flex-1">
-          <h4 class="text-base font-semibold text-gray-900 dark:text-white">自定义颜色</h4>
-          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">选择任意颜色作为主题色</p>
+          <h4 class="text-base font-semibold gva-setting-card-title">自定义颜色</h4>
+          <p class="text-sm gva-setting-hint mt-1">选择任意颜色作为主题色</p>
        </div>
        <el-color-picker
          v-model="customColor"
@@ -52,15 +52,15 @@
        />
      </div>

-      <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl p-5 shadow-sm">
+      <div class="gva-setting-color-panel rounded-xl p-5">
        <div class="flex items-center justify-between">
-          <span class="text-base font-semibold text-gray-700 dark:text-gray-300">当前主题色</span>
+          <span class="text-base font-semibold gva-setting-section-title">当前主题色</span>
          <div class="flex items-center gap-3">
            <div
-              class="w-6 h-6 rounded-lg border border-gray-300 dark:border-gray-500 shadow-sm"
-              :style="{ backgroundColor: modelValue }"
+              class="w-6 h-6 rounded-lg border shadow-sm"
+              :style="{ backgroundColor: modelValue, borderColor: 'rgba(0, 212, 255, 0.22)' }"
            ></div>
-            <code class="text-sm font-mono bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-500">
+            <code class="gva-setting-color-code text-sm font-mono px-3 py-2 rounded-lg border">
              {{ modelValue }}
            </code>
          </div>
@@ -81,7 +81,7 @@ defineOptions({
 const props = defineProps({
  modelValue: {
    type: String,
-    default: '#3b82f6'
+    default: '#00d4ff'
  }
 })

@@ -90,19 +90,15 @@ const emit = defineEmits(['update:modelValue'])
 const customColor = ref(props.modelValue)

 const presetColors = [
-  { color: '#4E80EE', name: '默认' },
-  { color: '#8bb5d1', name: '晨雾蓝' },
-  { color: '#a8c8a8', name: '薄荷绿' },
-  { color: '#d4a5a5', name: '玫瑰粉' },
-  { color: '#c8a8d8', name: '薰衣草' },
-  { color: '#f0c674', name: '暖阳黄' },
-  { color: '#b8b8b8', name: '月光银' },
-  { color: '#d8a8a8', name: '珊瑚橙' },
-  { color: '#a8d8d8', name: '海雾青' },
-  { color: '#c8c8a8', name: '橄榄绿' },
-  { color: '#d8c8a8', name: '奶茶棕' },
-  { color: '#a8a8d8', name: '梦幻紫' },
-  { color: '#c8d8a8', name: '抹茶绿' }
+  { color: '#00d4ff', name: '科技青' },
+  { color: '#67e8f9', name: '电光蓝' },
+  { color: '#3b82f6', name: '深空蓝' },
+  { color: '#10b981', name: '运行绿' },
+  { color: '#f59e0b', name: '告警橙' },
+  { color: '#ef4444', name: '危险红' },
+  { color: '#8b5cf6', name: '紫电' },
+  { color: '#14b8a6', name: '海雾青' },
+  { color: '#22d3ee', name: '冰晶蓝' }
 ]

 const handleColorChange = (color) => {
@@ -128,24 +124,14 @@ watch(() => props.modelValue, (newValue) => {

 .custom-color-picker {
  ::v-deep(.el-color-picker__trigger) {
-    border: 1px solid #e5e7eb;
+    border: 1px solid rgba(0, 212, 255, 0.22);
    border-radius: 6px;
    transition: all 150ms ease-in-out;

    &:hover {
-      border-color: #9ca3af;
+      border-color: rgba(0, 212, 255, 0.42);
      transform: translateY(-1px);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-  }
-}
-
-.dark .custom-color-picker {
-  ::v-deep(.el-color-picker__trigger) {
-    border-color: #4b5563;
-
-    &:hover {
-      border-color: #6b7280;
+      box-shadow: 0 2px 8px rgba(0, 212, 255, 0.16);
    }
  }
 }
--- a/src/view/layout/setting/components/themeModeSelector.vue
+++ b/src/view/layout/setting/components/themeModeSelector.vue
@@ -1,15 +1,11 @@
 <template>
  <div class="flex justify-center">
-    <div class="inline-flex bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-1 gap-1">
+    <div class="gva-setting-tab-bar inline-flex rounded-lg p-1 gap-1">
      <div
        v-for="mode in themeModes"
        :key="mode.value"
-        class="flex flex-col items-center justify-center px-4 py-3 rounded-md cursor-pointer transition-all duration-150 ease-in-out min-w-[64px]"
-        :class="[
-          modelValue === mode.value
-            ? 'text-white shadow-sm transform -translate-y-0.5'
-            : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700'
-        ]"
+        class="gva-setting-tab-item flex flex-col items-center justify-center px-4 py-3 rounded-md cursor-pointer min-w-[64px]"
+        :class="{ 'is-active': modelValue === mode.value }"
        :style="modelValue === mode.value ? { backgroundColor: primaryColor } : {}"
        @click="handleModeChange(mode.value)"
      >
--- a/src/view/layout/setting/index.vue
+++ b/src/view/layout/setting/index.vue
@@ -8,8 +8,8 @@
    class="theme-config-drawer"
  >
    <template #header>
-      <div class="flex items-center justify-between w-full px-6 py-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white font-inter">系统配置</h2>
+      <div class="gva-setting-header flex items-center justify-between w-full px-6 py-4">
+        <h2 class="gva-setting-title text-xl font-semibold font-inter">系统配置</h2>
        <el-button
          type="primary"
          size="small"
@@ -22,19 +22,15 @@
      </div>
    </template>

-    <div class="bg-white dark:bg-gray-900">
-      <div class="px-8 pt-4 pb-6 border-b border-gray-200 dark:border-gray-700">
+    <div class="gva-setting-body">
+      <div class="gva-setting-tabs-wrap px-8 pt-4 pb-6 border-b">
        <div class="flex justify-center">
-          <div class="inline-flex bg-gray-100 dark:bg-gray-800 rounded-xl p-1.5 border border-gray-200 dark:border-gray-700 shadow-sm">
+          <div class="gva-setting-tab-bar inline-flex rounded-xl">
            <div
              v-for="tab in tabs"
              :key="tab.key"
-              class="px-6 py-3 text-base text-center cursor-pointer font-medium rounded-lg transition-all duration-150 ease-in-out min-w-[80px]"
-              :class="[
-                activeTab === tab.key
-                  ? 'text-white shadow-md transform -translate-y-0.5'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700'
-              ]"
+              class="gva-setting-tab-item px-6 py-3 text-base text-center font-medium min-w-[80px]"
+              :class="{ 'is-active': activeTab === tab.key }"
              :style="activeTab === tab.key ? { backgroundColor: config.primaryColor } : {}"
              @click="activeTab = tab.key"
            >
@@ -110,10 +106,6 @@
 .theme-config-drawer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

-  ::v-deep(.el-drawer) {
-    background: white;
-  }
-
  ::v-deep(.el-drawer__header) {
    padding: 0;
    border: 0;
@@ -124,12 +116,6 @@
  }
 }

-.dark .theme-config-drawer {
-  ::v-deep(.el-drawer) {
-    background: #111827;
-  }
-}
-
 .font-inter {
  font-family: 'Inter', sans-serif;
 }
@@ -142,38 +128,7 @@
  &:hover {
    transform: translateY(-2px);
    filter: brightness(0.9);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}
-
-/* Custom scrollbar for webkit browsers */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f3f4f6;
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 3px;
-
-  &:hover {
-    background: #9ca3af;
-  }
-}
-
-.dark ::-webkit-scrollbar-track {
-  background: #1f2937;
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: #4b5563;
-
-  &:hover {
-    background: #6b7280;
+    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.18);
  }
 }
 </style>
--- a/src/view/layout/setting/modules/appearance/index.vue
+++ b/src/view/layout/setting/modules/appearance/index.vue
@@ -3,9 +3,9 @@
    <!-- Theme Mode Section -->
    <div class="mb-10">
      <div class="flex items-center justify-center mb-6">
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
-        <span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">主题模式</span>
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
+        <div class="gva-setting-divider h-px flex-1"></div>
+        <span class="gva-setting-section-title px-6 text-lg font-semibold">主题模式</span>
+        <div class="gva-setting-divider h-px flex-1"></div>
      </div>

      <div class="section-content">
@@ -19,9 +19,9 @@
    <!-- Theme Color Section -->
    <div class="mb-10">
      <div class="flex items-center justify-center mb-6">
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
-        <span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">主题颜色</span>
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
+        <div class="gva-setting-divider h-px flex-1"></div>
+        <span class="gva-setting-section-title px-6 text-lg font-semibold">主题颜色</span>
+        <div class="gva-setting-divider h-px flex-1"></div>
      </div>

      <div class="section-content">
@@ -35,16 +35,16 @@
    <!-- Visual Accessibility Section -->
    <div class="mb-10">
      <div class="flex items-center justify-center mb-6">
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
-        <span class="px-6 text-lg font-semibold text-gray-700 dark:text-gray-300">视觉辅助</span>
-        <div class="h-px bg-gray-200 dark:bg-gray-700 flex-1"></div>
+        <div class="gva-setting-divider h-px flex-1"></div>
+        <span class="gva-setting-section-title px-6 text-lg font-semibold">视觉辅助</span>
+        <div class="gva-setting-divider h-px flex-1"></div>
      </div>

      <div class="section-content">
-        <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 shadow-sm">
+        <div class="gva-setting-card rounded-xl p-6">
          <SettingItem label="灰色模式">
            <template #suffix>
-              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">降低色彩饱和度</span>
+              <span class="text-xs gva-setting-hint ml-2">降低色彩饱和度</span>
            </template>
            <el-switch
              v-model="config.grey"
@@ -54,7 +54,7 @@

          <SettingItem label="色弱模式">
            <template #suffix>
-              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">优化色彩对比度</span>
+              <span class="text-xs gva-setting-hint ml-2">优化色彩对比度</span>
            </template>
            <el-switch
              v-model="config.weakness"
@@ -64,7 +64,7 @@

          <SettingItem label="显示水印">
            <template #suffix>
-              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">在页面显示水印标识</span>
+              <span class="text-xs gva-setting-hint ml-2">在页面显示水印标识</span>
            </template>
            <el-switch
              v-model="config.show_watermark"