修改主题颜色

.env

@@ -1,2 +1,5 @@
 # 应用标题
 VITE_APP_TITLE=爱萝湾皮肤检测仪管理平台
+
+# 生产环境主题颜色 - 蓝色
+VITE_APP_THEME = '#409eff'

.env.development

@@ -8,3 +8,6 @@ VITE_APP_TITLE=爱萝湾皮肤检测仪管理平台
 
 VITE_APP_BASE_API=https://skin-test-api.ailuowan.com
 PROJECTID=1
+
+# 测试环境主题颜色 - 橙色（用于区分测试环境）
+VITE_APP_THEME = '#f5a623'

src/main.ts

@@ -21,6 +21,41 @@ import '@/styles/index.scss';
 // 根据字典编码获取字典列表全局方法
 import { getDictItemsByTypeCode } from '@/api/system/dict';
 
+// 主题颜色混合工具
+import { mix } from '@/utils';
+
+// 根据环境变量初始化主题颜色
+const initTheme = () => {
+  const node = document.documentElement;
+  const envTheme = import.meta.env.VITE_APP_THEME;
+  const localStorageTheme = localStorage.getItem('theme');
+  
+  // 优先使用环境变量，其次使用 localStorage
+  const themeColor = envTheme || localStorageTheme;
+  
+  if (themeColor) {
+    // 设置主主题色
+    node.style.setProperty('--el-color-primary', themeColor);
+    
+    // 设置渐变色
+    const mixWhite = '#ffffff';
+    const mixBlack = '#000000';
+    
+    for (let i = 1; i < 10; i += 1) {
+      node.style.setProperty(
+        `--el-color-primary-light-${i}`,
+        mix(themeColor, mixWhite, i * 0.1)
+      );
+    }
+    node.style.setProperty('--el-color-primary-dark', mix(themeColor, mixBlack, 0.1));
+    
+    localStorage.setItem('theme', themeColor);
+  }
+};
+
+// 初始化主题颜色
+initTheme();
+
 const app = createApp(App);
 
 // 自定义指令

src/store/modules/settings.ts

@@ -6,10 +6,15 @@ import { localStorage } from '@/utils/storage';
 const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings;
 const el = document.documentElement;
 
+// 从环境变量获取主题颜色
+const envTheme = import.meta.env.VITE_APP_THEME;
+
 export const useSettingStore = defineStore({
   id: 'setting',
   state: (): SettingState => ({
+    // 优先使用环境变量中的主题颜色，其次使用 localStorage，最后使用默认值
     theme:
+      envTheme ||
       localStorage.get('theme') ||
       getComputedStyle(el).getPropertyValue(`--el-color-primary`),
     showSettings: showSettings,