From 1dfeeaa67f638e3b2b11fd1cc9173714e1da952b Mon Sep 17 00:00:00 2001
From: wuyongqi <1042608617@qq.com>
Date: Sat, 9 May 2026 14:20:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A2=98=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                          |  3 +++
 .env.development              |  3 +++
 src/main.ts                   | 35 +++++++++++++++++++++++++++++++++++
 src/store/modules/settings.ts |  5 +++++
 4 files changed, 46 insertions(+)

diff --git a/.env b/.env
index f6502a9..fe7dce2 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,5 @@
 # 应用标题
 VITE_APP_TITLE=爱萝湾皮肤检测仪管理平台
+
+# 生产环境主题颜色 - 蓝色
+VITE_APP_THEME = '#409eff'
diff --git a/.env.development b/.env.development
index d2b0e73..7e6e7af 100644
--- a/.env.development
+++ b/.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'
diff --git a/src/main.ts b/src/main.ts
index ba87135..b1eb0c8 100644
--- a/src/main.ts
+++ b/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);
 
 // 自定义指令
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 43ffbe1..e6ef023 100644
--- a/src/store/modules/settings.ts
+++ b/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,