主题切换

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 {