From 52a5d064a576938433eb5dc017a53b1d70cb5cfe Mon Sep 17 00:00:00 2001
From: april <april@zen-game.cn>
Date: Mon, 14 Aug 2023 18:20:51 +0800
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E5=AF=BC=E8=88=AA=E6=B7=B7?=
 =?UTF-8?q?=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 5942884a809813c87b6e49cefd4343aa07169b91
---
 src/layout/components/Sidebar/LeftMenu.vue | 41 ++++++++++
 src/layout/components/Sidebar/TopMenu.vue  | 52 ++++++++++++
 src/layout/components/Sidebar/index.vue    | 92 ++++++++++++++++------
 src/layout/index.vue                       | 80 ++++++++++++++-----
 src/layout/main.vue                        | 57 ++++++++++++++
 src/store/modules/app.ts                   | 12 ++-
 6 files changed, 287 insertions(+), 47 deletions(-)
 create mode 100644 src/layout/components/Sidebar/LeftMenu.vue
 create mode 100644 src/layout/components/Sidebar/TopMenu.vue
 create mode 100644 src/layout/main.vue

diff --git a/src/layout/components/Sidebar/LeftMenu.vue b/src/layout/components/Sidebar/LeftMenu.vue
new file mode 100644
index 00000000..bae939cf
--- /dev/null
+++ b/src/layout/components/Sidebar/LeftMenu.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+import SidebarItem from "./SidebarItem.vue";
+import { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+import variables from "@/styles/variables.module.scss";
+
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+const currRoute = useRoute();
+const layout = computed(() => settingsStore.layout);
+const props = defineProps({
+  menuList: {
+    required: true,
+    default: () => {
+      return [];
+    },
+    type: Array<any>,
+  },
+});
+</script>
+<template>
+  <el-menu
+    :default-active="layout === 'top' ? '-' : currRoute.path"
+    :collapse="!appStore.sidebar.opened"
+    :background-color="variables.menuBg"
+    :text-color="variables.menuText"
+    :active-text-color="variables.menuActiveText"
+    :unique-opened="false"
+    :collapse-transition="false"
+    :mode="layout === 'top' ? 'horizontal' : 'vertical'"
+  >
+    <sidebar-item
+      v-for="route in menuList"
+      :key="route.path"
+      :item="route"
+      :base-path="route.path"
+      :is-collapse="!appStore.sidebar.opened"
+    />
+  </el-menu>
+</template>
diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue
new file mode 100644
index 00000000..35db809c
--- /dev/null
+++ b/src/layout/components/Sidebar/TopMenu.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { usePermissionStore } from "@/store/modules/permission";
+import variables from "@/styles/variables.module.scss";
+import { useAppStore } from "@/store/modules/app";
+import { translateRouteTitleI18n } from "@/utils/i18n";
+const appStore = useAppStore();
+const tPath = ref();
+const selectMenu = (index: string) => {
+  appStore.changeTopActive(index);
+};
+const permissionStore = usePermissionStore();
+const topMenu = ref<any[]>([]);
+onMounted(() => {
+  topMenu.value = permissionStore.routes.filter((el) => !el.meta?.hidden);
+});
+</script>
+<template>
+  <el-scrollbar>
+    <el-menu
+      mode="horizontal"
+      class="el-menu-demo"
+      :default-active="tPath"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      @select="selectMenu"
+    >
+      <el-menu-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :index="route.path"
+      >
+        <template #title>
+          <svg-icon
+            v-if="route.meta && route.meta.icon"
+            :icon-class="route.meta.icon"
+          />
+          <span v-if="route.meta && route.meta.title">{{
+            translateRouteTitleI18n(route.meta.title)
+          }}</span>
+        </template>
+      </el-menu-item>
+      <!-- <sidebar-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+        :is-collapse="false"
+      /> -->
+    </el-menu>
+  </el-scrollbar>
+</template>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 3eb734ae..16f36850 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-import SidebarItem from "./SidebarItem.vue";
+import TopMenu from "./TopMenu.vue";
+import LeftMenu from "./LeftMenu.vue";
 import Logo from "./Logo.vue";
-
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useAppStore } from "@/store/modules/app";
 import { storeToRefs } from "pinia";
-import variables from "@/styles/variables.module.scss";
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const appStore = useAppStore();
-const currRoute = useRoute();
 const { sidebarLogo } = storeToRefs(settingsStore);
 const layout = computed(() => settingsStore.layout);
 const showContent = ref(true);
@@ -28,41 +25,86 @@ watch(
 </script>
 
 <template>
-  <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
+  <div
+    :class="{ 'has-logo': sidebarLogo }"
+    class="menu-wrap"
+    v-if="layout !== 'mix'"
+  >
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar v-if="showContent">
-      <el-menu
-        :default-active="layout === 'top' ? '-' : currRoute.path"
-        :collapse="!appStore.sidebar.opened"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
-        :unique-opened="false"
-        :collapse-transition="false"
-        :mode="layout === 'top' ? 'horizontal' : 'vertical'"
-      >
-        <sidebar-item
-          v-for="route in permissionStore.routes"
-          :key="route.path"
-          :item="route"
-          :base-path="route.path"
-          :is-collapse="!appStore.sidebar.opened"
-        />
-      </el-menu>
+      <LeftMenu :menu-list="permissionStore.routes" />
     </el-scrollbar>
     <NavRight v-if="layout === 'top'" />
   </div>
+  <template v-else>
+    <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
+      <div class="header">
+        <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+        <TopMenu />
+        <NavRight />
+      </div>
+    </div>
+  </template>
 </template>
 <style lang="scss" scoped>
 :deep(.setting-container) {
   .setting-item {
     color: #fff;
+
     .svg-icon {
-      margin-right: 0px;
+      margin-right: 0;
     }
+
     &:hover {
       color: var(--el-color-primary);
     }
   }
 }
+
+.isMix {
+  .menu-wrap {
+    width: 100% !important;
+    height: 50px;
+    background-color: $menuBg;
+
+    :deep(.header) {
+      display: flex;
+      width: 100%;
+      // 顶部模式全局变量修改
+      --el-menu-item-height: 50px;
+
+      .logo-wrap {
+        width: 210px;
+      }
+
+      .el-menu {
+        background-color: $menuBg;
+
+        .el-menu-item {
+          color: $menuText;
+        }
+      }
+
+      .el-scrollbar {
+        flex: 1;
+        min-width: 0;
+        height: 50px;
+      }
+    }
+  }
+
+  .left-menu {
+    display: inline-block;
+    width: 210px;
+    background-color: $menuBg;
+
+    :deep(.el-menu) {
+      background-color: $menuBg;
+
+      .el-menu-item {
+        color: $menuText;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0d2e4589..7e3109bc 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import Main from "./main.vue";
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { AppMain, Navbar, Settings, TagsView } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
-import RightPanel from "@/components/RightPanel/index.vue";
+import LeftMenu from "./components/Sidebar/LeftMenu.vue";
 
 import { useAppStore } from "@/store/modules/app";
 import { useSettingsStore } from "@/store/modules/settings";
-
+import { usePermissionStore } from "@/store/modules/permission";
+import { useRouter } from "vue-router";
+const permissionStore = usePermissionStore();
 const { width } = useWindowSize();
 
 /**
@@ -22,9 +24,31 @@ const WIDTH = 992;
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 
-const fixedHeader = computed(() => settingsStore.fixedHeader);
-const showTagsView = computed(() => settingsStore.tagsView);
-const showSettings = computed(() => settingsStore.showSettings);
+const activeTopMenu = computed(() => {
+  return appStore.activeTopMenu;
+});
+// 混合模式左侧菜单
+const mixLeftMenu = ref<any[]>([]);
+const router = useRouter();
+watch(
+  () => activeTopMenu.value,
+  (newVal) => {
+    permissionStore.routes.forEach((item) => {
+      if (item.path === newVal) {
+        mixLeftMenu.value = item.children || [];
+      }
+    });
+    console.log(" mixLeftMenu.value ", mixLeftMenu.value);
+    // if (mixLeftMenu.value.length) {
+    //   router.push({
+    //     path: mixLeftMenu.value[0].path,
+    //   });
+    // }
+  },
+  {
+    deep: true,
+  }
+);
 const layout = computed(() => settingsStore.layout);
 
 const classObj = computed(() => ({
@@ -33,6 +57,7 @@ const classObj = computed(() => ({
   withoutAnimation: appStore.sidebar.withoutAnimation,
   mobile: appStore.device === "mobile",
   isTop: layout.value === "top",
+  isMix: layout.value === "mix",
 }));
 
 watchEffect(() => {
@@ -66,21 +91,14 @@ function handleOutsideClick() {
     ></div>
 
     <Sidebar class="sidebar-container" />
-
-    <div :class="{ hasTagsView: showTagsView }" class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar v-if="layout !== 'top'" />
-        <tags-view v-if="showTagsView" />
+    <template v-if="layout === 'mix'">
+      <div class="mix-wrap">
+        <!-- :menu-list="mixLeftMenu -->
+        <LeftMenu :menu-list="permissionStore.routes" />
+        <Main />
       </div>
-
-      <!--主页面-->
-      <app-main />
-
-      <!-- 设置面板 -->
-      <RightPanel v-if="showSettings">
-        <settings />
-      </RightPanel>
-    </div>
+    </template>
+    <Main v-else />
   </div>
 </template>
 
@@ -155,4 +173,26 @@ function handleOutsideClick() {
   // 顶部模式全局变量修改
   --el-menu-item-height: 50px;
 }
+
+.isMix {
+  :deep(.main-container) {
+    display: inline-block;
+    width: calc(100% - 210px);
+    margin-left: 0;
+  }
+
+  .mix-wrap {
+    display: flex;
+    padding-top: 50px;
+
+    .el-menu {
+      width: 210px;
+    }
+
+    .main-container {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
 </style>
diff --git a/src/layout/main.vue b/src/layout/main.vue
new file mode 100644
index 00000000..653e7d1f
--- /dev/null
+++ b/src/layout/main.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed, watchEffect } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { AppMain, Navbar, Settings, TagsView } from "./components/index";
+import RightPanel from "@/components/RightPanel/index.vue";
+
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
+const { width } = useWindowSize();
+
+/**
+ * 响应式布局容器固定宽度
+ *
+ * 大屏（>=1200px）
+ * 中屏（>=992px）
+ * 小屏（>=768px）
+ */
+const WIDTH = 992;
+
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+const showTagsView = computed(() => settingsStore.tagsView);
+const showSettings = computed(() => settingsStore.showSettings);
+const layout = computed(() => settingsStore.layout);
+
+watchEffect(() => {
+  if (width.value < WIDTH) {
+    appStore.toggleDevice("mobile");
+    appStore.closeSideBar(true);
+  } else {
+    appStore.toggleDevice("desktop");
+
+    if (width.value >= 1200) {
+      //大屏
+      appStore.openSideBar(true);
+    } else {
+      appStore.closeSideBar(true);
+    }
+  }
+});
+</script>
+<template>
+  <div :class="{ hasTagsView: showTagsView }" class="main-container">
+    <div :class="{ 'fixed-header': fixedHeader }">
+      <navbar v-if="layout === 'left'" />
+      <tags-view v-if="showTagsView" />
+    </div>
+    <!--主页面-->
+    <app-main />
+    <!-- 设置面板 -->
+    <RightPanel v-if="showSettings">
+      <settings />
+    </RightPanel>
+  </div>
+</template>
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index cd1c1860..b538d0cf 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -14,11 +14,12 @@ export const useAppStore = defineStore("app", () => {
   const language = useStorage("language", defaultSettings.language);
 
   const sidebarStatus = useStorage("sidebarStatus", "closed");
+
   const sidebar = reactive({
     opened: sidebarStatus.value !== "closed",
     withoutAnimation: false,
   });
-
+  const activeTopMenu = useStorage("activeTop", "");
   /**
    * 根据语言标识读取对应的语言包
    */
@@ -68,18 +69,25 @@ export const useAppStore = defineStore("app", () => {
   function changeLanguage(val: string) {
     language.value = val;
   }
-
+  /**
+   * 混合模式顶部切换
+   */
+  function changeTopActive(val: string) {
+    activeTopMenu.value = val;
+  }
   return {
     device,
     sidebar,
     language,
     locale,
     size,
+    activeTopMenu,
     toggleDevice,
     changeSize,
     changeLanguage,
     toggleSidebar,
     closeSideBar,
     openSideBar,
+    changeTopActive,
   };
 });

From e01e221106f77c1e00fedf06e599a2e6536cb94f Mon Sep 17 00:00:00 2001
From: april <april@zen-game.cn>
Date: Mon, 14 Aug 2023 18:37:57 +0800
Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 6b515ae7433a1a5a2a10d8cffeb95d4e92efe7e3
---
 src/layout/components/Sidebar/TopMenu.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue
index 35db809c..72c3a75f 100644
--- a/src/layout/components/Sidebar/TopMenu.vue
+++ b/src/layout/components/Sidebar/TopMenu.vue
@@ -18,7 +18,6 @@ onMounted(() => {
   <el-scrollbar>
     <el-menu
       mode="horizontal"
-      class="el-menu-demo"
       :default-active="tPath"
       :background-color="variables.menuBg"
       :text-color="variables.menuText"
@@ -50,3 +49,8 @@ onMounted(() => {
     </el-menu>
   </el-scrollbar>
 </template>
+<style lang="scss" scoped>
+.el-menu {
+  height: 50px !important;
+}
+</style>

From e03d73bb48872b8851fad71af2b2c52afd85fa60 Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Tue, 15 Aug 2023 05:35:35 +0800
Subject: [PATCH 3/7] =?UTF-8?q?fix:=20:bug:=20=E8=A1=A5=E5=85=85=20basePat?=
 =?UTF-8?q?h=20=E7=88=B6=E7=BA=A7=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: cce921b52b3f93fb9be8d9619c788a5b1b585fe9
---
 src/layout/components/Sidebar/LeftMenu.vue    | 27 ++++++++++++++++++-
 src/layout/components/Sidebar/SidebarItem.vue |  2 ++
 src/layout/components/Sidebar/index.vue       |  2 +-
 src/layout/index.vue                          | 14 +++++-----
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/layout/components/Sidebar/LeftMenu.vue b/src/layout/components/Sidebar/LeftMenu.vue
index bae939cf..16d13282 100644
--- a/src/layout/components/Sidebar/LeftMenu.vue
+++ b/src/layout/components/Sidebar/LeftMenu.vue
@@ -5,6 +5,9 @@ import { useSettingsStore } from "@/store/modules/settings";
 import { useAppStore } from "@/store/modules/app";
 import variables from "@/styles/variables.module.scss";
 
+import path from "path-browserify";
+import { isExternal } from "@/utils/index";
+
 const settingsStore = useSettingsStore();
 const appStore = useAppStore();
 const currRoute = useRoute();
@@ -17,7 +20,29 @@ const props = defineProps({
     },
     type: Array<any>,
   },
+  basePath: {
+    type: String,
+    required: true,
+  },
 });
+
+/**
+ * 解析路径
+ *
+ * @param routePath 路由路径
+ */
+function resolvePath(routePath: string) {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath;
+  }
+
+  // 完整路径 = 父级路径(/level/level_3) + 路由路径
+  const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
+  return fullPath;
+}
 </script>
 <template>
   <el-menu
@@ -34,7 +59,7 @@ const props = defineProps({
       v-for="route in menuList"
       :key="route.path"
       :item="route"
-      :base-path="route.path"
+      :base-path="resolvePath(route.path)"
       :is-collapse="!appStore.sidebar.opened"
     />
   </el-menu>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 06ebf71d..d932eeb1 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -54,6 +54,7 @@ function hasOneShowingChild(children = [], parent: any) {
   // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
   if (showingChildren.length === 0) {
     onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+
     return true;
   }
   return false;
@@ -71,6 +72,7 @@ function resolvePath(routePath: string) {
   if (isExternal(props.basePath)) {
     return props.basePath;
   }
+
   // 完整路径 = 父级路径(/level/level_3) + 路由路径
   const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
   return fullPath;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 16f36850..02a0ce40 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -32,7 +32,7 @@ watch(
   >
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar v-if="showContent">
-      <LeftMenu :menu-list="permissionStore.routes" />
+      <LeftMenu :menu-list="permissionStore.routes" base-path="" />
     </el-scrollbar>
     <NavRight v-if="layout === 'top'" />
   </div>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 7e3109bc..3c838e59 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -38,12 +38,11 @@ watch(
         mixLeftMenu.value = item.children || [];
       }
     });
-    console.log(" mixLeftMenu.value ", mixLeftMenu.value);
-    // if (mixLeftMenu.value.length) {
-    //   router.push({
-    //     path: mixLeftMenu.value[0].path,
-    //   });
-    // }
+    if (mixLeftMenu.value) {
+      router.push({
+        path: mixLeftMenu.value[0].path,
+      });
+    }
   },
   {
     deep: true,
@@ -94,7 +93,8 @@ function handleOutsideClick() {
     <template v-if="layout === 'mix'">
       <div class="mix-wrap">
         <!-- :menu-list="mixLeftMenu -->
-        <LeftMenu :menu-list="permissionStore.routes" />
+        <!-- :menu-list="permissionStore.routes -->
+        <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
         <Main />
       </div>
     </template>

From beee3e40a50f4c6346ccf10c9075500a3d41071c Mon Sep 17 00:00:00 2001
From: april <april@zen-game.cn>
Date: Tue, 15 Aug 2023 15:32:40 +0800
Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 5f51df75efed158c8adb9a9ad0cb92d9e26e3b6c
---
 src/layout/components/Sidebar/TopMenu.vue |  4 +-
 src/layout/components/TagsView/index.vue  | 51 +++++++++++++++++++++++
 src/layout/index.vue                      |  3 +-
 src/store/modules/permission.ts           |  4 +-
 4 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue
index 72c3a75f..63530b16 100644
--- a/src/layout/components/Sidebar/TopMenu.vue
+++ b/src/layout/components/Sidebar/TopMenu.vue
@@ -4,7 +4,7 @@ import variables from "@/styles/variables.module.scss";
 import { useAppStore } from "@/store/modules/app";
 import { translateRouteTitleI18n } from "@/utils/i18n";
 const appStore = useAppStore();
-const tPath = ref();
+const activePath = computed(() => appStore.activeTopMenu);
 const selectMenu = (index: string) => {
   appStore.changeTopActive(index);
 };
@@ -18,7 +18,7 @@ onMounted(() => {
   <el-scrollbar>
     <el-menu
       mode="horizontal"
-      :default-active="tPath"
+      :default-active="activePath"
       :background-color="variables.menuBg"
       :text-color="variables.menuText"
       :active-text-color="variables.menuActiveText"
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 717c6c91..20e23210 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -10,6 +10,9 @@ import { translateRouteTitleI18n } from "@/utils/i18n";
 
 import { usePermissionStore } from "@/store/modules/permission";
 import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
+import { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+
 import ScrollPane from "./ScrollPane.vue";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -18,8 +21,11 @@ const route = useRoute();
 
 const permissionStore = usePermissionStore();
 const tagsViewStore = useTagsViewStore();
+const appStore = useAppStore();
 
 const { visitedViews } = storeToRefs(tagsViewStore);
+const settingsStore = useSettingsStore();
+const layout = computed(() => settingsStore.layout);
 
 const selectedTag = ref({});
 const scrollPaneRef = ref();
@@ -226,7 +232,52 @@ function closeTagMenu() {
 function handleScroll() {
   closeTagMenu();
 }
+function findOutermostParent(tree: any[], findName: string) {
+  let parentMap: any = {};
 
+  function buildParentMap(node: any, parent: any) {
+    parentMap[node.name] = parent;
+
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        buildParentMap(node.children[i], node);
+      }
+    }
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    buildParentMap(tree[i], null);
+  }
+
+  let currentNode = parentMap[findName];
+  while (currentNode) {
+    if (!parentMap[currentNode.name]) {
+      return currentNode;
+    }
+    currentNode = parentMap[currentNode.id];
+  }
+
+  return null;
+}
+const againActiveTop = (newVal: string) => {
+  if (layout.value !== "mix") return;
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.changeTopActive(parent.path);
+  }
+};
+// 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
+watch(
+  () => route.name,
+  (newVal) => {
+    if (newVal) {
+      againActiveTop(newVal as string);
+    }
+  },
+  {
+    deep: true,
+  }
+);
 onMounted(() => {
   initTags();
 });
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 3c838e59..6debf4a2 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -40,12 +40,13 @@ watch(
     });
     if (mixLeftMenu.value) {
       router.push({
-        path: mixLeftMenu.value[0].path,
+        name: mixLeftMenu.value[0].name,
       });
     }
   },
   {
     deep: true,
+    immediate: true,
   }
 );
 const layout = computed(() => settingsStore.layout);
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 8a69655d..6e0a49ec 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -41,7 +41,9 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
 
   routes.forEach((route) => {
     const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
-
+    if (!route.name) {
+      tmpRoute.name = route.path;
+    }
     // 判断用户(角色)是否有该路由的访问权限
     if (hasPermission(roles, tmpRoute)) {
       if (tmpRoute.component?.toString() == "Layout") {

From 1b228bc6e18555e68e0a8a7f1251c6894f938691 Mon Sep 17 00:00:00 2001
From: april <april@zen-game.cn>
Date: Tue, 15 Aug 2023 15:47:57 +0800
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E7=9B=91=E5=90=ACactivetop=E5=88=A4?=
 =?UTF-8?q?=E6=96=ADlayout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 3b7237dff95897e71c7598e3b30731ceb6832625
---
 src/layout/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 6debf4a2..0dc27562 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -11,7 +11,6 @@ import { usePermissionStore } from "@/store/modules/permission";
 import { useRouter } from "vue-router";
 const permissionStore = usePermissionStore();
 const { width } = useWindowSize();
-
 /**
  * 响应式布局容器固定宽度
  *
@@ -30,9 +29,11 @@ const activeTopMenu = computed(() => {
 // 混合模式左侧菜单
 const mixLeftMenu = ref<any[]>([]);
 const router = useRouter();
+const layout = computed(() => settingsStore.layout);
 watch(
   () => activeTopMenu.value,
   (newVal) => {
+    if (layout.value !== "mix") return;
     permissionStore.routes.forEach((item) => {
       if (item.path === newVal) {
         mixLeftMenu.value = item.children || [];
@@ -49,7 +50,6 @@ watch(
     immediate: true,
   }
 );
-const layout = computed(() => settingsStore.layout);
 
 const classObj = computed(() => ({
   hideSidebar: !appStore.sidebar.opened,

From 56b6f09e74529411dc91750cb415279a230abe68 Mon Sep 17 00:00:00 2001
From: april <1317795103@qq.com>
Date: Tue, 15 Aug 2023 16:07:41 +0800
Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=E5=8F=96=E5=80=BCid=E6=94=B9name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: d2991ed15f1db2e7d59da0a2847a5b60dcf6d5f8
---
 src/layout/components/TagsView/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 20e23210..1348fd44 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -254,7 +254,7 @@ function findOutermostParent(tree: any[], findName: string) {
     if (!parentMap[currentNode.name]) {
       return currentNode;
     }
-    currentNode = parentMap[currentNode.id];
+    currentNode = parentMap[currentNode.name];
   }
 
   return null;

From c77f16237d3565ec0b39e4f4f9f1b8729cfdf61d Mon Sep 17 00:00:00 2001
From: april <1317795103@qq.com>
Date: Fri, 18 Aug 2023 18:32:54 +0800
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=E5=AF=BC=E8=88=AA=E6=B7=B7?=
 =?UTF-8?q?=E5=90=88=E6=A8=A1=E5=BC=8F=E7=BB=86=E8=8A=82=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: aa7373f0632d0d659c58272cfbdf1ee224d2c556
---
 .editorconfig                             |  3 ++-
 .eslintrc.cjs                             |  6 +++++
 src/layout/components/Sidebar/TopMenu.vue | 30 ++++++++++++++++++---
 src/layout/components/Sidebar/index.vue   |  4 +--
 src/layout/index.vue                      | 33 ++++++++++-------------
 src/router/index.ts                       |  1 +
 src/store/modules/permission.ts           | 17 +++++++++---
 src/styles/sidebar.scss                   | 33 ++++++++++++++++++++++-
 8 files changed, 97 insertions(+), 30 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index dd765724..00ee2de4 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -5,7 +5,8 @@ root = true
 [*]
 charset = utf-8 # 设置文件字符集为 utf-8
 end_of_line = lf # 控制换行类型(lf | cr | crlf)
-indent_style = tab # 缩进风格（tab | space）
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
 insert_final_newline = true # 始终在文件末尾插入一个新行
 
 # 表示仅 md 文件适用以下规则
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3300699c..69c2fc75 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -64,6 +64,12 @@ module.exports = {
       },
     ],
     "vue/multi-word-component-names": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        useTabs: false, // 不使用制表符
+      },
+    ],
   },
   // eslint不能对html文件生效
   overrides: [
diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue
index 63530b16..39c68628 100644
--- a/src/layout/components/Sidebar/TopMenu.vue
+++ b/src/layout/components/Sidebar/TopMenu.vue
@@ -3,15 +3,34 @@ import { usePermissionStore } from "@/store/modules/permission";
 import variables from "@/styles/variables.module.scss";
 import { useAppStore } from "@/store/modules/app";
 import { translateRouteTitleI18n } from "@/utils/i18n";
+import { useRouter } from "vue-router";
 const appStore = useAppStore();
 const activePath = computed(() => appStore.activeTopMenu);
+const router = useRouter();
+// 递归跳转
+const goFirst = (menu: any[]) => {
+  if (!menu.length) return;
+  const [first] = menu;
+  if (first.children) {
+    goFirst(first.children);
+  } else {
+    router.push({
+      name: first.name,
+    });
+  }
+};
 const selectMenu = (index: string) => {
   appStore.changeTopActive(index);
+  permissionStore.getMixLeftMenu(index);
+  const { mixLeftMenu } = permissionStore;
+  goFirst(mixLeftMenu);
 };
 const permissionStore = usePermissionStore();
 const topMenu = ref<any[]>([]);
 onMounted(() => {
-  topMenu.value = permissionStore.routes.filter((el) => !el.meta?.hidden);
+  topMenu.value = permissionStore.routes.filter(
+    (item) => !item.meta || !item.meta.hidden
+  );
 });
 </script>
 <template>
@@ -34,9 +53,12 @@ onMounted(() => {
             v-if="route.meta && route.meta.icon"
             :icon-class="route.meta.icon"
           />
-          <span v-if="route.meta && route.meta.title">{{
-            translateRouteTitleI18n(route.meta.title)
-          }}</span>
+          <span v-if="route.path === '/'"> 首页 </span>
+          <template v-else>
+            <span v-if="route.meta && route.meta.title">
+              {{ translateRouteTitleI18n(route.meta.title) }}
+            </span>
+          </template>
         </template>
       </el-menu-item>
       <!-- <sidebar-item
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 02a0ce40..fc499bcf 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -74,7 +74,7 @@ watch(
       --el-menu-item-height: 50px;
 
       .logo-wrap {
-        width: 210px;
+        width: $sideBarWidth;
       }
 
       .el-menu {
@@ -95,7 +95,7 @@ watch(
 
   .left-menu {
     display: inline-block;
-    width: 210px;
+    width: $sideBarWidth;
     background-color: $menuBg;
 
     :deep(.el-menu) {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0dc27562..fdaab020 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,7 +8,6 @@ import LeftMenu from "./components/Sidebar/LeftMenu.vue";
 import { useAppStore } from "@/store/modules/app";
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
-import { useRouter } from "vue-router";
 const permissionStore = usePermissionStore();
 const { width } = useWindowSize();
 /**
@@ -27,23 +26,15 @@ const activeTopMenu = computed(() => {
   return appStore.activeTopMenu;
 });
 // 混合模式左侧菜单
-const mixLeftMenu = ref<any[]>([]);
-const router = useRouter();
+const mixLeftMenu = computed(() => {
+  return permissionStore.mixLeftMenu;
+});
 const layout = computed(() => settingsStore.layout);
 watch(
   () => activeTopMenu.value,
   (newVal) => {
     if (layout.value !== "mix") return;
-    permissionStore.routes.forEach((item) => {
-      if (item.path === newVal) {
-        mixLeftMenu.value = item.children || [];
-      }
-    });
-    if (mixLeftMenu.value) {
-      router.push({
-        name: mixLeftMenu.value[0].name,
-      });
-    }
+    permissionStore.getMixLeftMenu(newVal);
   },
   {
     deep: true,
@@ -156,7 +147,7 @@ function handleOutsideClick() {
     height: 50px;
 
     :deep(.logo-wrap) {
-      width: 210px;
+      width: $sideBarWidth;
     }
 
     :deep(.el-scrollbar) {
@@ -178,7 +169,7 @@ function handleOutsideClick() {
 .isMix {
   :deep(.main-container) {
     display: inline-block;
-    width: calc(100% - 210px);
+    width: calc(100% - #{$sideBarWidth});
     margin-left: 0;
   }
 
@@ -186,14 +177,18 @@ function handleOutsideClick() {
     display: flex;
     padding-top: 50px;
 
-    .el-menu {
-      width: 210px;
-    }
-
     .main-container {
       flex: 1;
       min-width: 0;
     }
   }
 }
+
+.openSidebar {
+  .mix-wrap {
+    .el-menu {
+      width: $sideBarWidth;
+    }
+  }
+}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6df76e4a..02028beb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,6 +24,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 
   {
     path: "/",
+    name: "/",
     component: Layout,
     redirect: "/dashboard",
     children: [
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 6e0a49ec..63e7c973 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from "vue-router";
+import { RouteRecordRaw, useRouter } from "vue-router";
 import { defineStore } from "pinia";
 import { constantRoutes } from "@/router";
 import { store } from "@/store";
@@ -48,7 +48,6 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
     if (hasPermission(roles, tmpRoute)) {
       if (tmpRoute.component?.toString() == "Layout") {
         tmpRoute.component = Layout;
-        console.log();
       } else {
         const component = modules[`../../views/${tmpRoute.component}.vue`];
         if (component) {
@@ -99,7 +98,19 @@ export const usePermissionStore = defineStore("permission", () => {
         });
     });
   }
-  return { routes, setRoutes, generateRoutes };
+
+  /**
+   * 混合模式左侧菜单
+   */
+  const mixLeftMenu = ref<RouteRecordRaw[]>([]);
+  function getMixLeftMenu(activeTop: string) {
+    routes.value.forEach((item) => {
+      if (item.path === activeTop) {
+        mixLeftMenu.value = item.children || [];
+      }
+    });
+  }
+  return { routes, setRoutes, generateRoutes, getMixLeftMenu, mixLeftMenu };
 });
 
 // 非setup
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index eb7e679e..402d3e42 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -144,15 +144,46 @@
     .sidebar-container {
       width: $sideBarWidth !important;
       transition: transform 0.28s;
+
+      .header {
+        .logo-wrap {
+          width: 63px !important;
+          transition: transform 0.28s;
+        }
+      }
     }
 
-    &.hideSidebar {
+    &.hideSidebar:not(.isMix) {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
         transform: translate3d(-$sideBarWidth, 0, 0);
       }
     }
+
+    &.hideSidebar {
+      .isMix {
+        :deep(.sidebar-container) {
+          .header {
+            .logo-wrap {
+              width: 64px;
+            }
+          }
+        }
+      }
+    }
+
+    &.openSidebar {
+      .isMix {
+        :deep(.sidebar-container) {
+          .header {
+            .logo-wrap {
+              width: 210px;
+            }
+          }
+        }
+      }
+    }
   }
 
   .withoutAnimation {