diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 0000000..1d89ee8
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
new file mode 100644
index 0000000..e6726a6
--- /dev/null
+++ b/frontend/components.d.ts
@@ -0,0 +1,51 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    403: typeof import('./src/components/ErrorMessage/403.vue')['default']
+    404: typeof import('./src/components/ErrorMessage/404.vue')['default']
+    500: typeof import('./src/components/ErrorMessage/500.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    Loading: typeof import('./src/components/Loading/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/staticExtend/SvgIcon/src/SvgIcon.vue')['default']
+    SwitchDark: typeof import('./src/components/SwitchDark/index.vue')['default']
+  }
+}
diff --git a/frontend/src/assets/icons/loginout.svg b/frontend/src/assets/icons/loginout.svg
new file mode 100644
index 0000000..433fc63
--- /dev/null
+++ b/frontend/src/assets/icons/loginout.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724311309043" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12103" width="24.0234375" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1001.65696 463.424l-332.224-332.416C648.76096 110.4 624.05696 104.256 598.52096 113.792c-26.176 9.856-41.152 33.28-41.216 64.384L557.30496 328.32 492.28096 328.32 305.65696 328.384C266.48896 328.512 239.16096 355.712 239.03296 394.624c-0.128 78.4-0.128 156.736 0 235.072 0.128 37.696 27.776 65.28 65.792 65.664l252.48 0.064L557.24096 724.48c-0.128 40.768-0.256 81.408 0.576 122.112 0.256 15.936 6.528 33.28 16.256 45.184 11.904 14.656 28.224 22.72 45.952 22.72l0 0c17.536 0 35.2-8 49.728-22.464 110.848-110.72 221.568-221.504 332.288-332.352C1031.60896 530.176 1031.48096 493.248 1001.65696 463.424z" p-id="12104" fill="#ffffff"></path><path d="M387.70496 805.696 387.64096 805.696l-72.576 0.128-103.872-0.064c-52.48 0-82.624-30.144-82.624-82.688L128.56896 300.48c0-52.416 30.144-82.496 82.752-82.496l68.8-0.064 75.584 0.064 42.048-0.064c30.08 0 46.528-15.104 48.896-44.8 0.896-11.072 0.64-22.336 0.256-34.88C446.13696 106.944 428.60096 89.664 397.68896 89.6L321.33696 89.6C280.44096 89.6 239.54496 89.6 198.71296 89.856 186.16896 89.92 173.30496 91.328 160.44096 94.08 68.21696 113.728 0.88896 196.416 0.37696 290.688 0.12096 341.504 0.18496 392.384 0.24896 443.136l0.064 67.648L0.18496 581.76C0.12096 632.768-0.00704 683.712 0.44096 734.784c0.896 107.776 88.768 197.056 195.904 199.04 26.368 0.512 52.8 0.64 79.168 0.64l125.376-0.256c24.768 0 42.112-15.04 45.184-39.232 1.088-8.832 1.216-17.856 1.28-26.88l0-4.48c0.128-13.312 0.256-31.552-12.544-44.48C422.45696 806.784 404.66496 805.696 387.70496 805.696z" p-id="12105" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/images/cn_pms9100_logo.png b/frontend/src/assets/images/cn_pms9100_logo.png
new file mode 100644
index 0000000..bf517ba
Binary files /dev/null and b/frontend/src/assets/images/cn_pms9100_logo.png differ
diff --git a/frontend/src/languages/modules/en.ts b/frontend/src/languages/modules/en.ts
index 21f7e8c..2ea0a70 100644
--- a/frontend/src/languages/modules/en.ts
+++ b/frontend/src/languages/modules/en.ts
@@ -24,6 +24,7 @@ export default {
     exitFullScreen: "Exit Full Screen",
     personalData: "Personal Data",
     changePassword: "Change Password",
+    changeMode:"Change Mode",
     logout: "Logout"
   }
 };
diff --git a/frontend/src/languages/modules/zh.ts b/frontend/src/languages/modules/zh.ts
index 6afb416..ce576f1 100644
--- a/frontend/src/languages/modules/zh.ts
+++ b/frontend/src/languages/modules/zh.ts
@@ -24,6 +24,7 @@ export default {
     exitFullScreen: "退出全屏",
     personalData: "个人信息",
     changePassword: "修改密码",
+    changeMode:"模式切换",
     logout: "退出登录"
   }
 };
diff --git a/frontend/src/layouts/LayoutTransverse/index.scss b/frontend/src/layouts/LayoutTransverse/index.scss
index 0b3a9ee..c5722b9 100644
--- a/frontend/src/layouts/LayoutTransverse/index.scss
+++ b/frontend/src/layouts/LayoutTransverse/index.scss
@@ -8,8 +8,9 @@
     justify-content: space-between;
     height: 55px;
     padding: 0 15px 0 0;
-    background-color: var(--el-header-bg-color);
     border-bottom: 1px solid var(--el-header-border-color);
+    // background-color: var(--el-header-bg-color);
+    background-color: var(--el-color-primary); //默认蓝色风格背景
     .logo {
       width: 210px;
       margin-right: 30px;
@@ -21,31 +22,52 @@
       .logo-text {
         font-size: 21.5px;
         font-weight: bold;
-        color: var(--el-header-logo-text-color);
+        // color: var(--el-header-logo-text-color);
+        color: #fff; // logo文字颜色
         white-space: nowrap;
       }
     }
+    //导航栏样式
     .el-menu {
       flex: 1;
       height: 100%;
       overflow: hidden;
       border-bottom: none;
+      background-color: var(--el-color-primary); //导航蓝色背景
+      .el-menu-item {
+        color: #fff;
+      }
+      .el-menu-item:hover {
+        color: #fff; //一级导航划过颜色
+        background-color: #5274a5 !important; //一级导航划过背景色
+      }
       .el-sub-menu__hide-arrow {
         width: 65px;
         height: 55px;
       }
       .el-menu-item.is-active {
-        color: #ffffff !important;
+        color: #fff !important; //一级导航文字选中颜色
+        background-color: #5274a5 !important; //一级导航选中背景色
+        border-bottom: 0 !important;
+      }
+      .el-sub-menu__title {
+        color: #fff;
+      }
+      .is-opened:hover {
+        color: #fff;
       }
       .is-active {
         background-color: var(--el-color-primary) !important;
-        border-bottom-color: var(--el-color-primary) !important;
+        // border-bottom-color: var(--el-color-primary) !important;
+        border-bottom: 0 !important;
         &::before {
           width: 0;
         }
         .el-sub-menu__title {
-          color: #ffffff !important;
-          background-color: var(--el-color-primary) !important;
+          color: #fff !important; //二级导航文字选中颜色
+          // background-color: var(--el-color-primary) !important;
+          // background-color: #5274a5 !important;//二级导航选中背景色
+          background-color: #5274a5 !important;
           border-bottom-color: var(--el-color-primary) !important;
         }
       }
diff --git a/frontend/src/layouts/LayoutTransverse/index.vue b/frontend/src/layouts/LayoutTransverse/index.vue
index c379d67..a65dad5 100644
--- a/frontend/src/layouts/LayoutTransverse/index.vue
+++ b/frontend/src/layouts/LayoutTransverse/index.vue
@@ -3,13 +3,22 @@
   <el-container class="layout">
     <el-header>
       <div class="logo flx-center">
-        <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
+        <!-- <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> -->
+        <img
+          class="logo-img"
+          src="@/assets/images/cn_pms9100_logo.png"
+          alt="logo"
+        />
         <span class="logo-text">{{ title }}</span>
       </div>
-      <el-menu mode="horizontal" :router="false" :default-active="activeMenu">
+      <el-menu trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
         <!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
         <template v-for="subItem in menuList" :key="subItem.path">
-          <el-sub-menu v-if="subItem.children?.length" :key="subItem.path" :index="subItem.path + 'el-sub-menu'">
+          <el-sub-menu
+            v-if="subItem.children?.length"
+            :key="subItem.path"
+            :index="subItem.path + 'el-sub-menu'"
+          >
             <template #title>
               <el-icon>
                 <component :is="subItem.meta.icon"></component>
@@ -18,7 +27,12 @@
             </template>
             <SubMenu :menu-list="subItem.children" />
           </el-sub-menu>
-          <el-menu-item v-else :key="subItem.path + 'el-menu-item'" :index="subItem.path" @click="handleClickMenu(subItem)">
+          <el-menu-item
+            v-else
+            :key="subItem.path + 'el-menu-item'"
+            :index="subItem.path"
+            @click="handleClickMenu(subItem)"
+          >
             <el-icon>
               <component :is="subItem.meta.icon"></component>
             </el-icon>
@@ -48,7 +62,9 @@ const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
 const menuList = computed(() => authStore.showMenuListGet);
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
+const activeMenu = computed(
+  () => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
+);
 
 const handleClickMenu = (subItem: Menu.MenuOptions) => {
   if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
@@ -58,4 +74,10 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 
 <style scoped lang="scss">
 @import "./index.scss";
+.logo{
+  margin-right: 0 !important;
+}
+.logo-text {
+  letter-spacing: 2px;
+}
 </style>
diff --git a/frontend/src/layouts/LayoutVertical/index.scss b/frontend/src/layouts/LayoutVertical/index.scss
index 33a9b42..0dfe6d3 100644
--- a/frontend/src/layouts/LayoutVertical/index.scss
+++ b/frontend/src/layouts/LayoutVertical/index.scss
@@ -42,7 +42,8 @@
     justify-content: space-between;
     height: 55px;
     padding: 0 15px;
-    background-color: var(--el-header-bg-color);
     border-bottom: 1px solid var(--el-header-border-color);
+     // background-color: var(--el-header-bg-color);
+     background-color: var(--el-color-primary);//默认蓝色风格背景
   }
 }
diff --git a/frontend/src/layouts/components/Header/ToolBarRight.vue b/frontend/src/layouts/components/Header/ToolBarRight.vue
index 8c43bd8..95c412c 100644
--- a/frontend/src/layouts/components/Header/ToolBarRight.vue
+++ b/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;
diff --git a/frontend/src/layouts/components/Header/components/Avatar.vue b/frontend/src/layouts/components/Header/components/Avatar.vue
index 181f31f..f370e3d 100644
--- a/frontend/src/layouts/components/Header/components/Avatar.vue
+++ b/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>
diff --git a/frontend/src/layouts/components/Menu/SubMenu.vue b/frontend/src/layouts/components/Menu/SubMenu.vue
index b277fb0..f5d8e20 100644
--- a/frontend/src/layouts/components/Menu/SubMenu.vue
+++ b/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;
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
new file mode 100644
index 0000000..26d0680
--- /dev/null
+++ b/frontend/src/views/home/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <el-button type="primary">按钮</el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+onMounted(() => {
+  console.log();
+});
+</script>
+<style lang="scss" scoped></style>