添加全局组件大小配置和相关主题配置项，优化主题配置栏

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'
   })

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
   }
 })

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;
 }

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) {

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) {

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'

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 {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-
-  ::v-deep(.el-drawer) {
-    background: white;
+<style lang="scss">
+.gva-theme-drawer {
+  .el-drawer {
+    @apply bg-white dark:bg-gray-900;
   }
 
-  ::v-deep(.el-drawer__header) {
-    padding: 0;
-    border: 0;
+  .el-drawer__header {
+    @apply p-0 border-0;
   }
 
-  ::v-deep(.el-drawer__body) {
-    padding: 0;
+  .el-drawer__body {
+    @apply p-0;
   }
 }
 
-.dark .theme-config-drawer {
-  ::v-deep(.el-drawer) {
-    background: #111827;
-  }
+.gva-theme-font {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
-.font-inter {
-  font-family: 'Inter', sans-serif;
+.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;
 }
 
-.reset-btn {
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all 150ms ease-in-out;
+.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;
+}
 
-  &:hover {
-    transform: translateY(-2px);
-    filter: brightness(0.9);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.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);
+  }
+
+  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,15 +208,21 @@
   }
 }
 
-.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 {
     background: #6b7280;
   }
 }
 </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>