From 783eff2be501f55fd17d412b0e0803ad198135ed Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Tue, 27 May 2025 17:31:44 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +-
 src/layouts/components/AppLogo/index.vue      |  2 +-
 .../NavBar/components/NavbarActions.vue       |  2 +-
 src/layouts/components/Settings/index.vue     | 19 ++++---------------
 src/layouts/composables/useLayout.ts          |  2 +-
 src/layouts/index.vue                         |  2 +-
 src/settings.ts                               | 19 ++++++++++++++++---
 src/store/modules/app.store.ts                |  2 +-
 src/store/modules/settings.store.ts           |  2 +-
 src/styles/variables.scss                     |  1 +
 src/utils/theme.ts                            |  6 ++++++
 src/views/login/index.vue                     |  2 +-
 12 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb0263fd..7a5f3ff6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { useAppStore, useSettingsStore } from "@/store";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import { ThemeMode } from "@/enums/settings/theme.enum";
 import { ComponentSize } from "@/enums/settings/layout.enum";
 
diff --git a/src/layouts/components/AppLogo/index.vue b/src/layouts/components/AppLogo/index.vue
index 003f209a..1180965f 100644
--- a/src/layouts/components/AppLogo/index.vue
+++ b/src/layouts/components/AppLogo/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import logo from "@/assets/logo.png";
 
 defineProps({
diff --git a/src/layouts/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue
index ef3386ce..72ec1f87 100644
--- a/src/layouts/components/NavBar/components/NavbarActions.vue
+++ b/src/layouts/components/NavBar/components/NavbarActions.vue
@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useAppStore, useSettingsStore, useUserStore } from "@/store";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index fd074573..121ac8a0 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -148,10 +148,9 @@
 import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
 
 const { t } = useI18n();
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { ThemeMode } from "@/enums/settings/theme.enum";
-import { SidebarColor } from "@/enums/settings/theme.enum";
+import { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
 import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
+import { themeColorPresets } from "@/settings";
 
 // 按钮图标
 const copyIcon = markRaw(DocumentCopy);
@@ -174,18 +173,8 @@ const layoutOptions: LayoutOption[] = [
   { value: LayoutMode.MIX, label: t("settings.mixLayout"), className: "mix" },
 ];
 
-// 颜色预设
-const colorPresets = [
-  "#4080FF",
-  "#626AEF",
-  "#ff4500",
-  "#ff8c00",
-  "#00ced1",
-  "#1e90ff",
-  "#c71585",
-  "rgb(255, 120, 0)",
-  "hsva(120, 40, 94)",
-];
+// 使用统一的颜色预设配置
+const colorPresets = themeColorPresets;
 
 const route = useRoute();
 const appStore = useAppStore();
diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts
index 23f54b80..ba2f6188 100644
--- a/src/layouts/composables/useLayout.ts
+++ b/src/layouts/composables/useLayout.ts
@@ -1,5 +1,5 @@
 import { useAppStore, useSettingsStore } from "@/store";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 
 /**
  * 布局相关的通用逻辑
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index c3524030..9b9a0706 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -15,7 +15,7 @@ import TopLayout from "./views/TopLayout.vue";
 import MixLayout from "./views/MixLayout.vue";
 import Settings from "./components/Settings/index.vue";
 import { LayoutMode } from "@/enums/settings/layout.enum";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 
 const { currentLayout } = useLayout();
 
diff --git a/src/settings.ts b/src/settings.ts
index 817a9c7b..9641874f 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -5,7 +5,7 @@ const { pkg } = __APP_INFO__;
 // 检查用户的操作系统是否使用深色模式
 const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 
-const defaultSettings: AppSettings = {
+export const defaultSettings: AppSettings = {
   // 系统Title
   title: pkg.name,
   // 系统版本
@@ -24,7 +24,7 @@ const defaultSettings: AppSettings = {
   size: ComponentSize.DEFAULT,
   // 语言
   language: LanguageEnum.ZH_CN,
-  // 主题颜色
+  // 主题颜色 - 修改此值时需同步修改 src/styles/variables.scss
   themeColor: "#4080FF",
   // 是否显示水印
   showWatermark: false,
@@ -34,4 +34,17 @@ const defaultSettings: AppSettings = {
   sidebarColorScheme: SidebarColor.CLASSIC_BLUE,
 };
 
-export default defaultSettings;
+// 主题色预设 - 经典配色方案
+// 注意：修改默认主题色时，需要同步修改 src/styles/variables.scss 中的 primary.base 值
+export const themeColorPresets = [
+  "#4080FF", // Arco Design 蓝 - 现代感强
+  "#1890FF", // Ant Design 蓝 - 经典商务
+  "#409EFF", // Element Plus 蓝 - 清新自然
+  "#FA8C16", // 活力橙 - 温暖友好
+  "#722ED1", // 优雅紫 - 高端大气
+  "#13C2C2", // 青色 - 科技感
+  "#52C41A", // 成功绿 - 活力清新
+  "#F5222D", // 警示红 - 醒目强烈
+  "#2F54EB", // 深蓝 - 稳重专业
+  "#EB2F96", // 品红 - 时尚个性
+];
diff --git a/src/store/modules/app.store.ts b/src/store/modules/app.store.ts
index de20db83..4ddec187 100644
--- a/src/store/modules/app.store.ts
+++ b/src/store/modules/app.store.ts
@@ -1,4 +1,4 @@
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 
 // 导入 Element Plus 中英文语言包
 import zhCn from "element-plus/es/locale/lang/zh-cn";
diff --git a/src/store/modules/settings.store.ts b/src/store/modules/settings.store.ts
index d9628b3f..4263eaf6 100644
--- a/src/store/modules/settings.store.ts
+++ b/src/store/modules/settings.store.ts
@@ -1,4 +1,4 @@
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
 import type { LayoutMode } from "@/enums/settings/layout.enum";
 import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d96c9585..c907f33a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,7 @@
 @forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: (
     "primary": (
+      // 默认主题色 - 修改此值时需同步修改 src/settings.ts 中的 themeColor
       "base": #4080ff,
     ),
     "success": (
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 558503ee..e4aa3561 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -77,6 +77,12 @@ export function applyTheme(colors: Record<string, string>) {
   Object.entries(colors).forEach(([key, value]) => {
     el.style.setProperty(`--el-color-${key}`, value);
   });
+
+  // 确保主题色立即生效，强制重新渲染
+  requestAnimationFrame(() => {
+    // 触发样式重新计算
+    el.style.setProperty("--theme-update-trigger", Date.now().toString());
+  });
 }
 
 /**
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 40f01c19..cac65417 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -46,7 +46,7 @@
 
 <script setup lang="ts">
 import logo from "@/assets/logo.png";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
 import DarkModeSwitch from "@/components/DarkModeSwitch/index.vue";