Merge pull request #2146 from Azir-11/dev-287

添加全局组件大小配置和相关主题配置项，优化主题配置栏
2025-12-30 03:42:26 +00:00 · 2025-12-01 16:17:51 +08:00
parent 96019e8a9b 8bc631ece9
commit cf022f492c
10 changed files with 235 additions and 244 deletions
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -3,7 +3,7 @@
    id="app"
    class="bg-gray-50 text-slate-700 !dark:text-slate-500 dark:bg-slate-800"
  >
-    <el-config-provider :locale="zhCn">
+    <el-config-provider :locale="zhCn" :size="appStore.config.global_size">
      <router-view />
      <Application />
    </el-config-provider>
@@ -15,7 +15,7 @@
  import Application from '@/components/application/index.vue'
  import { useAppStore } from '@/pinia'

-  useAppStore()
+  const appStore = useAppStore()
  defineOptions({
    name: 'App'
  })
--- a/web/src/pinia/modules/app.js
+++ b/web/src/pinia/modules/app.js
@@ -19,7 +19,8 @@ export const useAppStore = defineStore('app', () => {
    show_watermark: true,
    side_mode: 'normal',
    // 页面过渡动画配置
-    transition_type: 'slide'
+    transition_type: 'slide',
+    global_size: 'default'
  })

  const isDark = useDark({
@@ -99,6 +100,10 @@ export const useAppStore = defineStore('app', () => {
    config.transition_type = e
  }

+  const toggleGlobalSize = (e) => {
+    config.global_size = e
+  }
+
  const baseCoinfg = {
    weakness: false,
    grey: false,
@@ -111,7 +116,8 @@ export const useAppStore = defineStore('app', () => {
    show_watermark: true,
    side_mode: 'normal',
    // 页面过渡动画配置
-    transition_type: 'slide'
+    transition_type: 'slide',
+    global_size: 'default'
  }

  const resetConfig = () => {
@@ -150,6 +156,7 @@ export const useAppStore = defineStore('app', () => {
    toggleConfigWatermark,
    toggleSideMode,
    toggleTransition,
-    resetConfig
+    resetConfig,
+    toggleGlobalSize
  }
 })
--- a/web/src/view/layout/setting/components/layoutModeCard.vue
+++ b/web/src/view/layout/setting/components/layoutModeCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="grid grid-cols-2 gap-6 font-inter px-6">
+  <div class="grid grid-cols-2 gap-6 gva-theme-font px-6">
    <div
      v-for="layout in layoutModes"
      :key="layout.value"
-      class="bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-xl p-6 cursor-pointer transition-all duration-150 ease-in-out hover:transform hover:-translate-y-1 hover:shadow-xl"
+      class="gva-theme-layout-card"
      :class="{
        'ring-2 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-900 transform -translate-y-1 shadow-xl': modelValue === layout.value
      }"
@@ -43,7 +43,7 @@
      </div>

      <div class="text-center">
-        <span class="block text-base font-semibold text-gray-900 dark:text-white mb-2" :class="{ 'text-current': modelValue === layout.value }" :style="modelValue === layout.value ? { color: primaryColor } : {}">{{ layout.label }}</span>
+        <span class="block text-base font-semibold gva-theme-text-main mb-2" :class="{ 'text-current': modelValue === layout.value }" :style="modelValue === layout.value ? { color: primaryColor } : {}">{{ layout.label }}</span>
        <span class="block text-sm text-gray-500 dark:text-gray-400">{{ layout.description }}</span>
      </div>
    </div>
@@ -163,30 +163,16 @@ const getHeaderStyle = (layout) => {
  }
 }

-const getContentStyle = (layout) => {
+const getContentStyle = () => {
  return { backgroundColor: lightestPrimaryColor.value, opacity: '0.5' }
 }

-const getRightSidebarStyle = (layout) => {
-  if (layout.primaryElement === 'rightSidebar') {
-    return { backgroundColor: primaryColor.value, opacity: '0.95' }
-  } else if (layout.secondaryElement === 'rightSidebar') {
-    return { backgroundColor: lighterPrimaryColor.value, opacity: '0.85' }
-  } else {
-    return { backgroundColor: lightestPrimaryColor.value, opacity: '0.6' }
-  }
-}
-
 const handleLayoutChange = (layout) => {
  emit('update:modelValue', layout)
 }
 </script>

 <style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
-
 .flex-col {
  flex-direction: column;
 }
--- a/web/src/view/layout/setting/components/settingItem.vue
+++ b/web/src/view/layout/setting/components/settingItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex items-center justify-between py-4 font-inter border-b border-gray-100 dark:border-gray-700 last:border-b-0">
+  <div class="gva-theme-setting-item">
    <div class="flex items-center gap-2">
-      <span class="text-sm font-medium text-gray-900 dark:text-white">{{ label }}</span>
+      <span class="gva-theme-setting-label">{{ label }}</span>
      <slot name="suffix"></slot>
    </div>
    <div class="flex items-center setting-controls">
@@ -34,9 +34,7 @@ const primaryColorWithOpacity = computed(() => config.value.primaryColor + '40')
 </script>

 <style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
+

 .setting-controls {
  ::v-deep(.el-switch) {
--- a/web/src/view/layout/setting/components/themeColorPicker.vue
+++ b/web/src/view/layout/setting/components/themeColorPicker.vue
@@ -1,13 +1,13 @@
 <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="mb-8">
-        <p class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-5">精选色彩</p>
+  <div class="gva-theme-font">
+    <div class="gva-theme-card-bg p-4">
+      <div class="mb-4">
+        <p class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-4">精选色彩</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="flex items-center gap-4 p-2 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="{
              'ring-2 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-800 transform -translate-y-1 shadow-lg': modelValue === colorItem.color
            }"
@@ -32,15 +32,15 @@
              </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-theme-text-main">{{ 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="flex items-center justify-between p-4 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl mb-6 shadow-sm">
        <div class="flex-1">
-          <h4 class="text-base font-semibold text-gray-900 dark:text-white">自定义颜色</h4>
+          <h4 class="text-base font-semibold gva-theme-text-main">自定义颜色</h4>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">选择任意颜色作为主题色</p>
        </div>
        <el-color-picker
@@ -52,7 +52,7 @@
        />
      </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="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl p-4 shadow-sm">
        <div class="flex items-center justify-between">
          <span class="text-base font-semibold text-gray-700 dark:text-gray-300">当前主题色</span>
          <div class="flex items-center gap-3">
@@ -122,9 +122,7 @@ watch(() => props.modelValue, (newValue) => {
 </script>

 <style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
+

 .custom-color-picker {
  ::v-deep(.el-color-picker__trigger) {
--- a/web/src/view/layout/setting/components/themeModeSelector.vue
+++ b/web/src/view/layout/setting/components/themeModeSelector.vue
@@ -1,10 +1,10 @@
 <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-theme-mode-selector">
      <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="gva-theme-mode-item"
        :class="[
          modelValue === mode.value
            ? 'text-white shadow-sm transform -translate-y-0.5'
@@ -32,7 +32,7 @@ defineOptions({
  name: 'ThemeModeSelector'
 })

-const props = defineProps({
+defineProps({
  modelValue: {
    type: String,
    default: 'auto'
--- a/web/src/view/layout/setting/index.vue
+++ b/web/src/view/layout/setting/index.vue
@@ -5,11 +5,11 @@
    direction="rtl"
    :size="width"
    :show-close="false"
-    class="theme-config-drawer"
+    class="gva-theme-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>
+        <h2 class="text-xl font-semibold gva-theme-text-main gva-theme-font">系统配置</h2>
        <el-button
          type="primary"
          size="small"
@@ -22,14 +22,14 @@
      </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="bg-white dark:bg-gray-900 px-6">
+      <div class="px-8 pt-4 pb-6">
        <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
              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="px-4 py-2 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'
@@ -106,57 +106,100 @@
  }, { deep: true });
 </script>

-<style lang="scss" scoped>
-.theme-config-drawer {
+<style lang="scss">
+.gva-theme-drawer {
+  .el-drawer {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  .el-drawer__header {
+    @apply p-0 border-0;
+  }
+
+  .el-drawer__body {
+    @apply p-0;
+  }
+}
+
+.gva-theme-font {
  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;
-  }
-
-  ::v-deep(.el-drawer__body) {
-    padding: 0;
-  }
 }

-.dark .theme-config-drawer {
-  ::v-deep(.el-drawer) {
-    background: #111827;
+.gva-theme-card-bg {
+  @apply bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 shadow-sm;
+}
+
+.gva-theme-card-white {
+  @apply bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5;
+}
+
+.gva-theme-section-header {
+  @apply flex items-center justify-center mb-6;
+}
+
+.gva-theme-section-title {
+  @apply px-6 text-lg font-semibold text-gray-700 dark:text-gray-300;
+}
+
+.gva-theme-divider {
+  @apply h-px bg-gray-200 dark:bg-gray-700 flex-1;
+}
+
+.gva-theme-text-main {
+  @apply text-gray-900 dark:text-white;
+}
+
+.gva-theme-text-sub {
+  @apply text-gray-600 dark:text-gray-400;
+}
+
+.gva-theme-section-content {
+  animation: fadeInUp 0.3s ease;
+}
+
+.gva-theme-setting-item {
+  @apply flex items-center justify-between py-4 gva-theme-font border-b border-gray-100 dark:border-gray-700 last:border-b-0;
+}
+
+.gva-theme-setting-label {
+  @apply text-sm font-medium gva-theme-text-main;
+}
+
+.gva-theme-mode-selector {
+  @apply inline-flex bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-1 gap-1;
+}
+
+.gva-theme-mode-item {
+  @apply flex flex-col items-center justify-center px-3 py-2 rounded-md cursor-pointer transition-all duration-150 ease-in-out min-w-[64px];
+}
+
+.gva-theme-layout-card {
+  @apply bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-xl p-3 cursor-pointer transition-all duration-150 ease-in-out hover:-translate-y-1 hover:shadow-xl;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
  }
-}

-.font-inter {
-  font-family: 'Inter', sans-serif;
-}
-
-.reset-btn {
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 150ms ease-in-out;
-
-  &:hover {
-    transform: translateY(-2px);
-    filter: brightness(0.9);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  to {
+    opacity: 1;
+    transform: translateY(0);
  }
 }

 /* Custom scrollbar for webkit browsers */
-::-webkit-scrollbar {
+.gva-theme-drawer ::-webkit-scrollbar {
  width: 6px;
 }

-::-webkit-scrollbar-track {
+.gva-theme-drawer ::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
 }

-::-webkit-scrollbar-thumb {
+.gva-theme-drawer ::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;

@@ -165,11 +208,11 @@
  }
 }

-.dark ::-webkit-scrollbar-track {
+.dark .gva-theme-drawer ::-webkit-scrollbar-track {
  background: #1f2937;
 }

-.dark ::-webkit-scrollbar-thumb {
+.dark .gva-theme-drawer ::-webkit-scrollbar-thumb {
  background: #4b5563;

  &:hover {
@@ -177,3 +220,9 @@
  }
 }
 </style>
+
+<style lang="scss" scoped>
+.reset-btn {
+  @apply rounded-lg font-medium transition-all duration-150 ease-in-out hover:-translate-y-0.5 hover:brightness-90 hover:shadow-lg;
+}
+</style>
--- a/web/src/view/layout/setting/modules/appearance/index.vue
+++ b/web/src/view/layout/setting/modules/appearance/index.vue
@@ -1,75 +1,86 @@
 <template>
-  <div class="font-inter">
+  <div class="gva-theme-font">
    <!-- 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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">主题模式</span>
+        <div class="gva-theme-divider"></div>
      </div>

-      <div class="section-content">
-        <ThemeModeSelector
-          v-model="config.darkMode"
-          @update:modelValue="appStore.toggleDarkMode"
-        />
+      <div class="gva-theme-section-content">
+        <ThemeModeSelector v-model="config.darkMode" @update:modelValue="appStore.toggleDarkMode" />
      </div>
    </div>

    <!-- 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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">主题颜色</span>
+        <div class="gva-theme-divider"></div>
      </div>

-      <div class="section-content">
-        <ThemeColorPicker
-          v-model="config.primaryColor"
-          @update:modelValue="appStore.togglePrimaryColor"
-        />
+      <div class="gva-theme-section-content">
+        <ThemeColorPicker v-model="config.primaryColor" @update:modelValue="appStore.togglePrimaryColor" />
+      </div>
+    </div>
+
+    <!-- Global Size Section -->
+    <div class="mb-10">
+      <div class="gva-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">全局尺寸</span>
+        <div class="gva-theme-divider"></div>
+      </div>
+
+      <div class="gva-theme-section-content">
+        <div class="gva-theme-card-bg">
+          <SettingItem label="全局尺寸">
+            <template #suffix>
+              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">设置全局组件尺寸</span>
+            </template>
+            <div class="w-39">
+              <el-select v-model="config.global_size" placeholder="请选择" @change="appStore.toggleGlobalSize">
+                <el-option label="默认就好了" value="default" />
+                <el-option label="大点好" value="large" />
+                <el-option label="小的也不错" value="small" />
+              </el-select>
+            </div>
+          </SettingItem>
+        </div>
      </div>
    </div>

    <!-- 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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">视觉辅助</span>
+        <div class="gva-theme-divider"></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-theme-section-content">
+        <div class="gva-theme-card-bg">
          <SettingItem label="灰色模式">
            <template #suffix>
              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">降低色彩饱和度</span>
            </template>
-            <el-switch
-              v-model="config.grey"
-              @change="appStore.toggleGrey"
-            />
+            <el-switch v-model="config.grey" @change="appStore.toggleGrey" />
          </SettingItem>

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

          <SettingItem label="显示水印">
            <template #suffix>
              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">在页面显示水印标识</span>
            </template>
-            <el-switch
-              v-model="config.show_watermark"
-              @change="appStore.toggleConfigWatermark"
-            />
+            <el-switch v-model="config.show_watermark" @change="appStore.toggleConfigWatermark" />
          </SettingItem>
        </div>
      </div>
@@ -92,23 +103,4 @@ const appStore = useAppStore()
 const { config } = storeToRefs(appStore)
 </script>

-<style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}

-.section-content {
-  animation: fadeInUp 0.3s ease;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
--- a/web/src/view/layout/setting/modules/general/index.vue
+++ b/web/src/view/layout/setting/modules/general/index.vue
@@ -1,38 +1,38 @@
 <template>
-  <div class="font-inter">
+  <div class="gva-theme-font">
    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">系统信息</span>
+        <div class="gva-theme-divider"></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-theme-section-content">
+        <div class="gva-theme-card-bg">
          <div class="grid grid-cols-2 gap-4 text-sm">
            <div class="flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-600">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">版本</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">v2.7.4</span>
+              <span class="gva-theme-text-sub font-medium">版本</span>
+              <span class="font-mono gva-theme-text-main font-semibold">v2.7.4</span>
            </div>
            <div class="flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-600">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">前端框架</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">Vue 3</span>
+              <span class="gva-theme-text-sub font-medium">前端框架</span>
+              <span class="font-mono gva-theme-text-main font-semibold">Vue 3</span>
            </div>
            <div class="flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-600">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">UI 组件库</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">Element Plus</span>
+              <span class="gva-theme-text-sub font-medium">UI 组件库</span>
+              <span class="font-mono gva-theme-text-main font-semibold">Element Plus</span>
            </div>
            <div class="flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-600">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">构建工具</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">Vite</span>
+              <span class="gva-theme-text-sub font-medium">构建工具</span>
+              <span class="font-mono gva-theme-text-main font-semibold">Vite</span>
            </div>
            <div class="flex justify-between items-center py-3">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">浏览器</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">{{ browserInfo }}</span>
+              <span class="gva-theme-text-sub font-medium">浏览器</span>
+              <span class="font-mono gva-theme-text-main font-semibold">{{ browserInfo }}</span>
            </div>
            <div class="flex justify-between items-center py-3">
-              <span class="text-gray-600 dark:text-gray-400 font-medium">屏幕分辨率</span>
-              <span class="font-mono text-gray-900 dark:text-white font-semibold">{{ screenResolution }}</span>
+              <span class="gva-theme-text-sub font-medium">屏幕分辨率</span>
+              <span class="font-mono gva-theme-text-main font-semibold">{{ screenResolution }}</span>
            </div>
          </div>
        </div>
@@ -40,24 +40,24 @@
    </div>

    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">配置管理</span>
+        <div class="gva-theme-divider"></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-theme-section-content">
+        <div class="gva-theme-card-bg">
          <div class="space-y-5">
            <div
-              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+              class="gva-theme-card-white flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div
                  class="w-12 h-12 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl flex items-center justify-center text-red-600 dark:text-red-400 text-xl">
                  🔄
                </div>
                <div>
-                  <h4 class="text-sm font-semibold text-gray-900 dark:text-white">重置配置</h4>
+                  <h4 class="text-sm font-semibold gva-theme-text-main">重置配置</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">将所有设置恢复为默认值</p>
                </div>
              </div>
@@ -69,14 +69,14 @@
            </div>

            <div
-              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+              class="gva-theme-card-white flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div
                  class="w-12 h-12 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-400 text-xl">
                  📤
                </div>
                <div>
-                  <h4 class="text-sm font-semibold text-gray-900 dark:text-white">导出配置</h4>
+                  <h4 class="text-sm font-semibold gva-theme-text-main">导出配置</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">导出当前配置为 JSON 文件</p>
                </div>
              </div>
@@ -89,14 +89,14 @@
            </div>

            <div
-              class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 flex items-center justify-between hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+              class="gva-theme-card-white flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div
                  class="w-12 h-12 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl flex items-center justify-center text-green-600 dark:text-green-400 text-xl">
                  📥
                </div>
                <div>
-                  <h4 class="text-sm font-semibold text-gray-900 dark:text-white">导入配置</h4>
+                  <h4 class="text-sm font-semibold gva-theme-text-main">导入配置</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">从 JSON 文件导入配置</p>
                </div>
              </div>
@@ -114,22 +114,22 @@
    </div>

    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">关于项目</span>
+        <div class="gva-theme-divider"></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-theme-section-content">
+        <div class="gva-theme-card-bg">
          <div class="flex items-start gap-5">
            <div
              class="w-16 h-16 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm">
              <Logo />
            </div>
            <div class="flex-1">
-              <h4 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Gin-Vue-Admin</h4>
-              <p class="text-sm text-gray-600 dark:text-gray-400 mb-5 leading-relaxed">
+              <h4 class="text-xl font-semibold gva-theme-text-main mb-3">Gin-Vue-Admin</h4>
+              <p class="text-sm gva-theme-text-sub mb-5 leading-relaxed">
                基于 Vue3 + Gin 的全栈开发基础平台，提供完整的后台管理解决方案
              </p>
              <div class="flex items-center gap-3 text-sm">
@@ -244,24 +244,4 @@ const handleImportConfig = (file) => {
 }
 </script>

-<style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}

-.section-content {
-  animation: fadeInUp 0.3s ease;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
--- a/web/src/view/layout/setting/modules/layout/index.vue
+++ b/web/src/view/layout/setting/modules/layout/index.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="font-inter">
+  <div class="gva-theme-font">
    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">布局模式</span>
+        <div class="gva-theme-divider"></div>
      </div>

-      <div class="section-content">
+      <div class="gva-theme-section-content">
        <LayoutModeCard
          v-model="config.side_mode"
          @update:modelValue="appStore.toggleSideMode"
@@ -16,14 +16,14 @@
    </div>

    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">界面配置</span>
+        <div class="gva-theme-divider"></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-theme-section-content">
+        <div class="gva-theme-card-bg">
          <SettingItem label="显示标签页">
            <template #suffix>
              <span class="text-xs text-gray-400 dark:text-gray-500 ml-2">页面标签导航</span>
@@ -55,19 +55,19 @@
    </div>

    <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-theme-section-header">
+        <div class="gva-theme-divider"></div>
+        <span class="gva-theme-section-title">尺寸配置</span>
+        <div class="gva-theme-divider"></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="space-y-6">
-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+      <div class="gva-theme-section-content">
+        <div class="gva-theme-card-bg">
+          <div class="space-y-4">
+            <div class="gva-theme-card-white">
              <div class="flex items-center justify-between">
                <div>
-                  <h4 class="text-sm font-medium text-gray-900 dark:text-white">侧边栏展开宽度</h4>
+                  <h4 class="text-sm font-medium gva-theme-text-main">侧边栏展开宽度</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">侧边栏完全展开时的宽度</p>
                </div>
                <div class="flex items-center gap-2">
@@ -84,10 +84,10 @@
              </div>
            </div>

-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+            <div class="gva-theme-card-white">
              <div class="flex items-center justify-between">
                <div>
-                  <h4 class="text-sm font-medium text-gray-900 dark:text-white">侧边栏收缩宽度</h4>
+                  <h4 class="text-sm font-medium gva-theme-text-main">侧边栏收缩宽度</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">侧边栏收缩时的最小宽度</p>
                </div>
                <div class="flex items-center gap-2">
@@ -103,10 +103,10 @@
              </div>
            </div>

-            <div class="bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-5 hover:shadow-md transition-all duration-150 ease-in-out hover:-translate-y-0.5">
+            <div class="gva-theme-card-white">
              <div class="flex items-center justify-between">
                <div>
-                  <h4 class="text-sm font-medium text-gray-900 dark:text-white">菜单项高度</h4>
+                  <h4 class="text-sm font-medium gva-theme-text-main">菜单项高度</h4>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">侧边栏菜单项的行高</p>
                </div>
                <div class="flex items-center gap-2">
@@ -142,23 +142,4 @@ const appStore = useAppStore()
 const { config } = storeToRefs(appStore)
 </script>

-<style scoped>
-.font-inter {
-  font-family: 'Inter', sans-serif;
-}

-.section-content {
-  animation: fadeInUp 0.3s ease;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(12px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>