wip: 临时提交

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

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

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

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 { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
-import { ThemeMode } from "@/enums/settings/theme.enum";
-import { SidebarColor } from "@/enums/settings/theme.enum";
 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 = [
+const colorPresets = themeColorPresets;
-  "#4080FF",
-  "#626AEF",
-  "#ff4500",
-  "#ff8c00",
-  "#00ced1",
-  "#1e90ff",
-  "#c71585",
-  "rgb(255, 120, 0)",
-  "hsva(120, 40, 94)",
-];
 
 const route = useRoute();
 const appStore = useAppStore();

src/layouts/composables/useLayout.ts

@@ -1,5 +1,5 @@
 import { useAppStore, useSettingsStore } from "@/store";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 
 /**
  * 布局相关的通用逻辑

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();
 

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", // 品红 - 时尚个性
+];

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

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

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": (

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());
+  });
 }
 
 /**

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