主题切换

frontend/src/hooks/useTheme.ts

@@ -41,8 +41,12 @@ export const useTheme = () => {
     for (let i = 1; i <= 9; i++) {
       const primaryColor = isDark.value ? `${getDarkColor(val, i / 10)}` : `${getLightColor(val, i / 10)}`;
       document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
+
+      // const colorValue = document.documentElement.style.getPropertyValue(`--el-color-primary-light-${i}`).trim();
+      // console.log(`--el-color-primary-light-${i}: ${colorValue}`);
     }
     globalStore.setGlobalState("primary", val);
+ 
   }
   // 灰色和弱色切换
   const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {

frontend/src/languages/modules/en.ts

@@ -26,6 +26,7 @@ export default {
     changePassword: "Change Password",
     changeMode:"Change Mode",
     versionRegister:"Version Register",
+    changeTheme: "Change Theme",
     logout: "Logout"
   }
 };

frontend/src/languages/modules/zh.ts

@@ -26,6 +26,7 @@ export default {
     changePassword: "修改密码",
     changeMode:"模式切换",
     versionRegister:"版本注册",
+    changeTheme:"主题切换",
     logout: "退出登录"
   }
 };

frontend/src/layouts/LayoutTransverse/index.scss

@@ -40,7 +40,7 @@
       .el-menu-item:hover {
         color: #fff; //一级导航划过颜色
         //background-color: #5274a5 !important; //一级导航划过背景色
-        background-color: #7588e5 !important; 
+        background-color:var(--el-color-primary-light-3) !important; 
 
       }
       .el-sub-menu__hide-arrow {
@@ -50,7 +50,7 @@
       .el-menu-item.is-active {
         color: #fff !important; //一级导航文字选中颜色
         //background-color: #5274a5 !important; //一级导航选中背景色
-        background-color: #7588e5 !important; 
+        background-color: var(--el-color-primary-light-3) !important; 
 
         border-bottom: 0 !important;
       }
@@ -72,8 +72,8 @@
           // background-color: var(--el-color-primary) !important;
           // background-color: #5274a5 !important;//二级导航选中背景色
       
-          background-color: #7588e5 !important; 
+          //background-color: #7588e5 !important; 
-
+          background-color: var(--el-color-primary-light-3) !important; 
           border-bottom-color: var(--el-color-primary) !important;
         }
       }

frontend/src/layouts/components/Header/components/Avatar.vue

@@ -18,17 +18,20 @@
     </div>
     <template #dropdown>
       <el-dropdown-menu>
+        <el-dropdown-item @click="openDialog('themeRef')">
+          <el-icon><Sunny /></el-icon>{{ t("header.changeTheme") }}
+        </el-dropdown-item>
         <el-dropdown-item @click="openDialog('infoRef')">
-          <el-icon><User /></el-icon>{{ $t("header.personalData") }}
+          <el-icon><User /></el-icon>{{ t("header.personalData") }}
         </el-dropdown-item>
         <el-dropdown-item @click="openDialog('passwordRef')">
-          <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
+          <el-icon><Edit /></el-icon>{{ t("header.changePassword") }}
         </el-dropdown-item>
         <el-dropdown-item @click="changeMode">
-          <el-icon><Edit /></el-icon>{{ $t("header.changeMode") }}
+          <el-icon><Switch /></el-icon>{{ t("header.changeMode") }}
         </el-dropdown-item>
         <el-dropdown-item @click="openDialog('versionRegisterRef')">
-          <el-icon><SetUp /></el-icon>{{ $t("header.versionRegister") }}
+          <el-icon><SetUp /></el-icon>{{ t("header.versionRegister") }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -42,6 +45,9 @@
   <PasswordDialog ref="passwordRef"></PasswordDialog>
    <!-- versionRegisterDialog -->
    <VersionDialog ref="versionRegisterRef"></VersionDialog>
+    <!-- ThemeDialog -->
+    <ThemeDialog ref="themeRef"></ThemeDialog>
+
 </template>
 
 <script setup lang="ts">
@@ -50,12 +56,13 @@ import { LOGIN_URL } from "@/config";
 import { useRouter } from "vue-router";
 import { logoutApi } from "@/api/user/login";
 import { useUserStore } from "@/stores/modules/user";
-import { ElMessageBox, ElMessage } from "element-plus";
+import { ElMessageBox, ElMessage, CHANGE_EVENT } from "element-plus";
 import InfoDialog from "./InfoDialog.vue";
 import PasswordDialog from "./PasswordDialog.vue";
+import ThemeDialog from "./ThemeDialog.vue";
 import VersionDialog from "@/views/system/versionRegister/index.vue";
 import { computed } from "vue";
-import { Avatar } from "@element-plus/icons-vue";
+import { Avatar, Delete, Document, Sunny, Switch } from "@element-plus/icons-vue";
 import AssemblySize from "./components/AssemblySize.vue";
 import Language from "./components/Language.vue";
 import SearchMenu from "./components/SearchMenu.vue";
@@ -72,6 +79,13 @@ const router = useRouter();
 const authStore = useAuthStore();
 const modeStore = useModeStore();
 const AppSceneStore = useAppSceneStore();
+import { useTheme } from "@/hooks/useTheme";
+import { useI18n } from "vue-i18n"; // 引入 vue-i18n 钩子
+const { changePrimary} = useTheme();
+
+// 初始化 i18n
+const { t } = useI18n(); // 使用 t 方法替代 $t
+
 // 退出登录
 const logout = () => {
   ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
@@ -101,12 +115,19 @@ const logout = () => {
 const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
 const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
 const versionRegisterRef = ref<InstanceType<typeof VersionDialog> | null>(null);
-  
+const themeRef = ref<InstanceType<typeof ThemeDialog> | null>(null);
 const openDialog = (ref: string) => {
   if (ref == "infoRef") infoRef.value?.openDialog();
   if (ref == "passwordRef") passwordRef.value?.openDialog();
   if (ref == "versionRegisterRef") versionRegisterRef.value?.openDialog();
+  if (ref == "themeRef") themeRef.value?.openDialog();
+  
 };
+
+
+
+
+
 //模式切换
 const changeMode = () => {
   authStore.changeModel();

frontend/src/layouts/components/Header/components/ThemeDialog.vue

@@ -0,0 +1,41 @@
+<template>
+    <el-dialog v-model="dialogVisible" title="主题切换" width="500px" draggable>
+        <el-divider content-position="center">主题颜色</el-divider>
+        <div style="display: flex; justify-content: center;">
+            <el-color-picker v-model="color" />
+        </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="sure">确认</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { onMounted, ref } from "vue";
+  import { useTheme } from "@/hooks/useTheme";
+import { on } from "events";
+  const color = ref('')
+  const { changePrimary} = useTheme();
+
+  const dialogVisible = ref(false);
+  const openDialog = () => {
+    dialogVisible.value = true;
+  };
+
+  const sure = () => {
+    changePrimary(color.value); // 切换主题
+    dialogVisible.value = false;
+  };
+
+  onMounted(() => {
+   // 修复：使用可选链和空值合并运算符确保不会出现 null 或 undefined
+  const storedColor = JSON.parse(localStorage.getItem('cn-global') ?? '{}').primary;
+  color.value = storedColor ?? '#526ADE'; // 默认值为 '#526ADE'
+  })
+  
+  defineExpose({ openDialog });
+  </script>
+  

frontend/src/layouts/components/Menu/SubMenu.vue

@@ -35,7 +35,7 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
   color: #fff !important;//一级导航文字选中颜色
   //background-color: #5274a5 !important; //一级导航选中背景色
   
-  background-color: #7588e5 !important; 
+  background-color: var(--el-color-primary-light-3) !important; 
 
 }
 .el-menu--collapse {
@@ -44,7 +44,7 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
       color: #ffffff !important;
       // background-color: var(--el-color-primary) !important;
       //background-color: #5274a5 !important;
-      background-color: #7588e5 !important; 
+      background-color: var(--el-color-primary-light-3) !important; 
 
       border-bottom: 0 !important;
     }
@@ -59,7 +59,7 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
     // background-color: var(--el-menu-active-bg-color) !important;
     color: #fff !important;//一级导航文字选中颜色
     //background-color: #5274a5 !important; //一级导航选中背景色
-    background-color: #7588e5 !important; 
+    background-color: var(--el-color-primary-light-3) !important; 
 
     &::before {
       position: absolute;

frontend/src/layouts/components/ThemeDrawer/index.scss

@@ -46,7 +46,7 @@
       border-radius: 3px;
     }
     .layout-light {
-      background-color: var(--el-color-primary-light-5);
+      background-color: var(--el-color-primary-light-3);
       border-radius: 3px;
     }
     .layout-content {

frontend/src/stores/modules/global.ts

@@ -31,7 +31,7 @@ export const useGlobalStore = defineStore({
     // 折叠菜单
     isCollapse: false,
     // 菜单手风琴
-    accordion: true,
+    accordion: false,
     // 面包屑导航
     breadcrumb: true,
     // 面包屑导航图标
@@ -49,6 +49,7 @@ export const useGlobalStore = defineStore({
     // Set GlobalState
     setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
       this.$patch({ [args[0]]: args[1] });
+      console.log(DEFAULT_PRIMARY);
     }
   },
   persist: piniaPersistConfig(GLOBAL_STORE_KEY)

frontend/src/views/home/tabs/dashboard.vue

@@ -168,7 +168,7 @@ const handleTabsChange = (val: any) => {
   form.value.activeChildTabs = Number(val)
 
 }
-localStorage.setItem('color', 'red')
+localStorage.setItem('color', '#91cc75')
 //功能选择数据
 const tabsList = ref([
   {