From 8bc631ece926751f9c9b07007547b28ca2757719 Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Thu, 27 Nov 2025 19:12:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E9=85=8D=E7=BD=AE=E7=9B=B8=E5=85=B3=20css=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BA=86=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=20UI=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting/components/layoutModeCard.vue     |  22 +--
 .../layout/setting/components/settingItem.vue |   8 +-
 .../setting/components/themeColorPicker.vue   |  22 ++-
 .../setting/components/themeModeSelector.vue  |   6 +-
 web/src/view/layout/setting/index.vue         | 133 ++++++++++++------
 .../setting/modules/appearance/index.vue      |  66 +++------
 .../layout/setting/modules/general/index.vue  |  98 +++++--------
 .../layout/setting/modules/layout/index.vue   |  69 ++++-----
 8 files changed, 198 insertions(+), 226 deletions(-)

diff --git a/web/src/view/layout/setting/components/layoutModeCard.vue b/web/src/view/layout/setting/components/layoutModeCard.vue
index 5f1fd1b79..abe8fcc0f 100644
--- 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;
 }
diff --git a/web/src/view/layout/setting/components/settingItem.vue b/web/src/view/layout/setting/components/settingItem.vue
index bc5d7d84f..2d66c6afb 100644
--- 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) {
diff --git a/web/src/view/layout/setting/components/themeColorPicker.vue b/web/src/view/layout/setting/components/themeColorPicker.vue
index 4523c923d..32234fc3b 100644
--- 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) {
diff --git a/web/src/view/layout/setting/components/themeModeSelector.vue b/web/src/view/layout/setting/components/themeModeSelector.vue
index 72eb4e8c4..bc34b2d7c 100644
--- 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'
diff --git a/web/src/view/layout/setting/index.vue b/web/src/view/layout/setting/index.vue
index 6e2f3f6be..9a84afda7 100644
--- 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>
diff --git a/web/src/view/layout/setting/modules/appearance/index.vue b/web/src/view/layout/setting/modules/appearance/index.vue
index 6c64acde6..930d253b4 100644
--- a/web/src/view/layout/setting/modules/appearance/index.vue
+++ b/web/src/view/layout/setting/modules/appearance/index.vue
@@ -1,41 +1,41 @@
 <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">
+      <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">
+      <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="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>
@@ -54,14 +54,14 @@
 
     <!-- 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>
@@ -103,24 +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>
diff --git a/web/src/view/layout/setting/modules/general/index.vue b/web/src/view/layout/setting/modules/general/index.vue
index e23fc24ea..863adb2e9 100644
--- 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>
diff --git a/web/src/view/layout/setting/modules/layout/index.vue b/web/src/view/layout/setting/modules/layout/index.vue
index bcc4809ef..3756947e7 100644
--- 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>