导航栏样式修改

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

@@ -8,32 +8,18 @@
 <!--      <Message id="message" />-->
 <!--      <Fullscreen id="fullscreen" />-->
 <!--    </div>-->
-    <span class="username">{{ username }}</span>
     <Avatar />
   </div>
 </template>
-
 <script setup lang="ts">
-import { computed } from "vue";
-import { useUserStore } from "@/stores/modules/user";
-import AssemblySize from "./components/AssemblySize.vue";
-import Language from "./components/Language.vue";
-import SearchMenu from "./components/SearchMenu.vue";
-import ThemeSetting from "./components/ThemeSetting.vue";
-import Message from "./components/Message.vue";
-import Fullscreen from "./components/Fullscreen.vue";
 import Avatar from "./components/Avatar.vue";
-
-const userStore = useUserStore();
-const username = computed(() => userStore.userInfo.name);
 </script>
-
 <style scoped lang="scss">
 .tool-bar-ri {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-right: 25px;
+  // padding-right: 25px;
   .header-icon {
     display: flex;
     align-items: center;

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

@@ -1,7 +1,12 @@
 <template>
   <el-dropdown trigger="click">
-    <div class="avatar">
-      <img src="@/assets/images/avatar.gif" alt="avatar" />
+    <div class="userInfo">
+      <div class="icon">
+        <Icon><Avatar/></Icon>
+      </div>
+      <div class="username">
+        {{ username }}
+      </div>
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -11,6 +16,25 @@
         <el-dropdown-item @click="openDialog('passwordRef')">
           <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
         </el-dropdown-item>
+        <el-dropdown-item @click="openDialog('passwordRef')">
+          <el-icon><Edit /></el-icon>{{ $t("header.changeMode") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <el-dropdown trigger="click">
+    <div class="avatar">
+      <!-- <img src="@/assets/images/avatar.gif" alt="avatar" /> -->
+      <img src="@/assets/icons/loginout.svg" alt="avatar" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <!-- <el-dropdown-item @click="openDialog('infoRef')">
+          <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-dropdown-item> -->
         <el-dropdown-item divided @click="logout">
           <el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
         </el-dropdown-item>
@@ -32,16 +56,24 @@ import { useUserStore } from "@/stores/modules/user";
 import { ElMessageBox, ElMessage } from "element-plus";
 import InfoDialog from "./InfoDialog.vue";
 import PasswordDialog from "./PasswordDialog.vue";
-
-const router = useRouter();
+import { computed } from "vue";
+import { Avatar } from "@element-plus/icons-vue";
+import AssemblySize from "./components/AssemblySize.vue";
+import Language from "./components/Language.vue";
+import SearchMenu from "./components/SearchMenu.vue";
+import ThemeSetting from "./components/ThemeSetting.vue";
+import Message from "./components/Message.vue";
+import Fullscreen from "./components/Fullscreen.vue";
 const userStore = useUserStore();
+const username = computed(() => userStore.userInfo.name);
+const router = useRouter();
 
 // 退出登录
 const logout = () => {
   ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
-    type: "warning"
+    type: "warning",
   }).then(async () => {
     // 1.执行退出登录接口
     await logoutApi();
@@ -65,15 +97,35 @@ const openDialog = (ref: string) => {
 </script>
 
 <style scoped lang="scss">
+.userInfo {
+  min-width: 80px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .icon{
+    width: 18px;
+    height: 18px;
+    color: #fff !important;
+  }
+  .username {
+    color: #fff;
+    font-size: 16px;
+    margin-left: 10px;
+  }
+}
+
 .avatar {
   width: 40px;
   height: 40px;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   cursor: pointer;
-  border-radius: 50%;
+  // border-radius: 50%;
   img {
-    width: 100%;
-    height: 100%;
+    // width: 100%;
+    // height: 100%;
   }
 }
 </style>

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

@@ -19,29 +19,29 @@
     </el-menu-item>
   </template>
 </template>
-
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-
 defineProps<{ menuList: Menu.MenuOptions[] }>();
-
 const router = useRouter();
 const handleClickMenu = (subItem: Menu.MenuOptions) => {
   if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
   router.push(subItem.path);
 };
 </script>
-
 <style lang="scss">
 .el-sub-menu .el-sub-menu__title:hover {
-  color: var(--el-menu-hover-text-color) !important;
-  background-color: transparent !important;
+  // color: var(--el-menu-hover-text-color) !important;
+  // background-color: transparent !important;
+  color: #fff !important;//一级导航文字选中颜色
+  background-color: #5274a5 !important; //一级导航选中背景色
 }
 .el-menu--collapse {
   .is-active {
     .el-sub-menu__title {
       color: #ffffff !important;
-      background-color: var(--el-color-primary) !important;
+      // background-color: var(--el-color-primary) !important;
+      background-color: #5274a5 !important;
+      border-bottom: 0 !important;
     }
   }
 }
@@ -50,8 +50,10 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
     color: var(--el-menu-hover-text-color);
   }
   &.is-active {
-    color: var(--el-menu-active-color) !important;
-    background-color: var(--el-menu-active-bg-color) !important;
+    // color: var(--el-menu-active-color) !important;
+    // background-color: var(--el-menu-active-bg-color) !important;
+    color: #fff !important;//一级导航文字选中颜色
+    background-color: #5274a5 !important; //一级导航选中背景色
     &::before {
       position: absolute;
       top: 0;