From 0edb567ded1f6652070392163b7a7b6e76d66f6f Mon Sep 17 00:00:00 2001
From: Azir-11 <2075125282@qq.com>
Date: Thu, 27 Nov 2025 18:40:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=A7=E5=B0=8F=E9=85=8D=E7=BD=AE=E5=92=8C?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                               |  4 +-
 web/src/pinia/modules/app.js                  | 13 +++--
 .../setting/modules/appearance/index.vue      | 52 ++++++++++++-------
 3 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 5a2214e9f..63cbbdd15 100644
--- 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'
   })
diff --git a/web/src/pinia/modules/app.js b/web/src/pinia/modules/app.js
index 9eb9dea1f..374e4ebed 100644
--- 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
   }
 })
diff --git a/web/src/view/layout/setting/modules/appearance/index.vue b/web/src/view/layout/setting/modules/appearance/index.vue
index 70fb98db2..6c64acde6 100644
--- a/web/src/view/layout/setting/modules/appearance/index.vue
+++ b/web/src/view/layout/setting/modules/appearance/index.vue
@@ -9,10 +9,7 @@
       </div>
 
       <div class="section-content">
-        <ThemeModeSelector
-          v-model="config.darkMode"
-          @update:modelValue="appStore.toggleDarkMode"
-        />
+        <ThemeModeSelector v-model="config.darkMode" @update:modelValue="appStore.toggleDarkMode" />
       </div>
     </div>
 
@@ -25,10 +22,33 @@
       </div>
 
       <div class="section-content">
-        <ThemeColorPicker
-          v-model="config.primaryColor"
-          @update:modelValue="appStore.togglePrimaryColor"
-        />
+        <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>
+
+      <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">
+          <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>
 
@@ -46,30 +66,21 @@
             <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>
@@ -106,6 +117,7 @@ const { config } = storeToRefs(appStore)
     opacity: 0;
     transform: translateY(12px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);