release: update 3.4.5

src/layout/components/sidebar/breadCrumb.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
 import { isEqual } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
+import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
@@ -9,24 +9,29 @@ import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 const route = useRoute();
 const levelList = ref([]);
 const router = useRouter();
-const routes = router.options.routes;
-const multiTags = useMultiTagsStoreHook().multiTags;
+const routes: any = router.options.routes;
+const multiTags: any = useMultiTagsStoreHook().multiTags;
 
 const isDashboard = (route: RouteLocationMatched): boolean | string => {
   const name = route && (route.name as string);
-  if (!name) {
-    return false;
-  }
-  return name.trim().toLocaleLowerCase() === "welcome".toLocaleLowerCase();
+  if (!name) return false;
+  return name.trim().toLocaleLowerCase() === "Welcome".toLocaleLowerCase();
 };
 
 const getBreadcrumb = (): void => {
   // 当前路由信息
   let currentRoute;
+
   if (Object.keys(route.query).length > 0) {
     multiTags.forEach(item => {
       if (isEqual(route.query, item?.query)) {
-        currentRoute = item;
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
       }
     });
   } else {
@@ -38,29 +43,12 @@ const getBreadcrumb = (): void => {
   let matched = [];
   // 获取每个父级路径对应的路由信息
   parentRoutes.forEach(path => {
-    if (path !== "/") {
-      matched.push(findRouteByPath(path, routes));
-    }
+    if (path !== "/") matched.push(findRouteByPath(path, routes));
   });
-  if (router.currentRoute.value.meta?.refreshRedirect) {
-    matched.unshift(
-      findRouteByPath(
-        router.currentRoute.value.meta.refreshRedirect as string,
-        routes
-      )
-    );
-  } else {
-    // 过滤与子级相同标题的父级路由
-    matched = matched.filter(item => {
-      return !item.redirect || (item.redirect && item.children.length !== 1);
-    });
-  }
-  if (currentRoute?.path !== "/welcome") {
-    matched.push(currentRoute);
-  }
 
-  const first = matched[0];
-  if (!isDashboard(first)) {
+  if (currentRoute?.path !== "/welcome") matched.push(currentRoute);
+
+  if (!isDashboard(matched[0])) {
     matched = [
       {
         path: "/welcome",
@@ -70,59 +58,51 @@ const getBreadcrumb = (): void => {
     ].concat(matched);
   }
 
+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
   levelList.value = matched.filter(
     item => item?.meta && item?.meta.title !== false
   );
 };
 
-getBreadcrumb();
+const handleLink = (item: RouteLocationMatched): void => {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    router.push(path);
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});
 
 watch(
   () => route.path,
-  () => getBreadcrumb()
-);
-
-watch(
-  () => route.query,
-  () => getBreadcrumb()
-);
-
-const handleLink = (item: RouteLocationMatched): any => {
-  const { redirect, path } = item;
-  if (redirect) {
-    router.push(redirect.toString());
-    return;
+  () => {
+    getBreadcrumb();
   }
-  router.push(path);
-};
+);
 </script>
 
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
     <transition-group appear name="breadcrumb">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span
-          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect"
-          >{{ transformI18n(item.meta.title) }}</span
-        >
-        <a v-else @click.prevent="handleLink(item)">
+      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
+        <a @click.prevent="handleLink(item)">
           {{ transformI18n(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
 </template>
-
-<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-</style>

src/layout/components/sidebar/hamBurger.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
-export interface Props {
-  isActive: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isActive: false
-});
-
-const fillColor = ref<string>("");
-
-const emit = defineEmits<{
-  (e: "toggleClick"): void;
-}>();
-
-const toggleClick = () => {
-  emit("toggleClick");
-};
-</script>
-
-<template>
-  <div
-    :class="classes.container"
-    :title="props.isActive ? '点击折叠' : '点击展开'"
-    @click="toggleClick"
-    @mouseenter="fillColor = useEpThemeStoreHook().epThemeColor"
-    @mouseleave="fillColor = ''"
-  >
-    <svg
-      :fill="fillColor"
-      :class="['hamburger', props.isActive ? 'is-active' : '']"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path
-        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
-    </svg>
-  </div>
-</template>
-
-<style module="classes" scoped>
-.container {
-  padding: 0 15px;
-}
-</style>
-
-<style scoped>
-.hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-}
-
-.is-active {
-  transform: rotate(180deg);
-}
-</style>

src/layout/components/sidebar/horizontal.vue

@@ -1,70 +1,39 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { useNav } from "../../hooks/nav";
+import { ref, watch } from "vue";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
-import { templateRef } from "@vueuse/core";
 import SidebarItem from "./sidebarItem.vue";
 import avatars from "/@/assets/avatars.jpg";
+import { useNav } from "/@/layout/hooks/useNav";
 import screenfull from "../screenfull/index.vue";
-import { useRoute, useRouter } from "vue-router";
-import { deviceDetection } from "/@/utils/deviceDetection";
-import { watch, nextTick, onMounted, getCurrentInstance } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
-const route = useRoute();
-const { locale, t } = useI18n();
-const routers = useRouter().options.routes;
-const menuRef = templateRef<ElRef | null>("menu", null);
-const instance =
-  getCurrentInstance().appContext.config.globalProperties.$storage;
-const title =
-  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+const menuRef = ref();
 
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
 const {
+  title,
+  routers,
   logout,
   backHome,
   onPanel,
-  changeTitle,
-  handleResize,
   menuSelect,
   username,
   avatarsStyle,
-  getDropdownItemStyle
+  getDropdownItemStyle,
+  getDropdownItemClass
 } = useNav();
 
-onMounted(() => {
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
-});
-
-watch(
-  () => locale.value,
-  () => {
-    changeTitle(route.meta);
-  }
-);
-
 watch(
   () => route.path,
   () => {
     menuSelect(route.path, routers);
   }
 );
-
-function translationCh() {
-  instance.locale = { locale: "zh" };
-  locale.value = "zh";
-  handleResize(menuRef.value);
-}
-
-function translationEn() {
-  instance.locale = { locale: "en" };
-  locale.value = "en";
-  handleResize(menuRef.value);
-}
 </script>
 
 <template>
@@ -74,11 +43,11 @@ function translationEn() {
       <h4>{{ title }}</h4>
     </div>
     <el-menu
-      ref="menu"
-      class="horizontal-header-menu"
-      mode="horizontal"
-      :default-active="route.path"
       router
+      ref="menuRef"
+      mode="horizontal"
+      class="horizontal-header-menu"
+      :default-active="route.path"
       @select="indexPath => menuSelect(indexPath, routers)"
     >
       <sidebar-item
@@ -97,33 +66,39 @@ function translationEn() {
       <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <globalization />
+        <globalization
+          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+        />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
-                <IconifyIconOffline icon="check" /> </span
-              >简体中文
+                <IconifyIconOffline icon="check" />
+              </span>
+              简体中文
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
-                <IconifyIconOffline icon="check" /> </span
-              >English</el-dropdown-item
-            >
+                <IconifyIconOffline icon="check" />
+              </span>
+              English
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <!-- 退出登陆 -->
+      <!-- 退出登录 -->
       <el-dropdown trigger="click">
-        <span class="el-dropdown-link">
+        <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username">{{ username }}</p>
+          <p v-if="username" class="dark:color-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -132,13 +107,13 @@ function translationEn() {
                 icon="logout-circle-r-line"
                 style="margin: 5px"
               />
-              {{ t("buttons.hsLoginOut") }}</el-dropdown-item
-            >
+              {{ t("buttons.hsLoginOut") }}
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <span
-        class="el-icon-setting"
+        class="el-icon-setting navbar-bg-hover"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >

src/layout/components/sidebar/leftCollapse.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useDark } from "@pureadmin/utils";
+
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+const { isDark } = useDark();
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div class="container">
+    <el-tooltip
+      placement="right"
+      :effect="isDark ? 'dark' : 'light'"
+      :content="props.isActive ? '点击折叠' : '点击展开'"
+    >
+      <IconifyIconOffline
+        :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+        class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
+        @click="toggleClick"
+      />
+    </el-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  box-shadow: 0 0 6px -2px var(--el-color-primary);
+}
+</style>

src/layout/components/sidebar/logo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { getCurrentInstance } from "vue";
+import { useNav } from "/@/layout/hooks/useNav";
+
 const props = defineProps({
   collapse: Boolean
 });
 
-const title =
-  getCurrentInstance().appContext.config.globalProperties.$config?.Title;
+const { title } = useNav();
 </script>
 
 <template>

src/layout/components/sidebar/mixNav.vue

@@ -1,47 +1,39 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import Search from "../search/index.vue";
 import Notice from "../notice/index.vue";
-import { useNav } from "../../hooks/nav";
-import { templateRef } from "@vueuse/core";
 import avatars from "/@/assets/avatars.jpg";
+import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
 import screenfull from "../screenfull/index.vue";
-import { useRoute, useRouter } from "vue-router";
-import { deviceDetection } from "/@/utils/deviceDetection";
+import { deviceDetection } from "@pureadmin/utils";
+import { ref, toRaw, watch, onMounted } from "vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { getParentPaths, findRouteByPath } from "/@/router/utils";
+import { useTranslationLang } from "../../hooks/useTranslationLang";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
-import { ref, watch, nextTick, onMounted, getCurrentInstance } from "vue";
 
-const route = useRoute();
-const { locale, t } = useI18n();
-const routers = useRouter().options.routes;
-const menuRef = templateRef<ElRef | null>("menu", null);
-const instance =
-  getCurrentInstance().appContext.config.globalProperties.$storage;
+const menuRef = ref();
+let defaultActive = ref(null);
 
+const { t, route, locale, translationCh, translationEn } =
+  useTranslationLang(menuRef);
 const {
+  device,
+  routers,
   logout,
   onPanel,
-  changeTitle,
-  toggleSideBar,
-  handleResize,
   menuSelect,
   resolvePath,
-  pureApp,
   username,
   avatarsStyle,
-  getDropdownItemStyle
+  getDropdownItemStyle,
+  getDropdownItemClass
 } = useNav();
 
-let defaultActive = ref(null);
-
 function getDefaultActive(routePath) {
   const wholeMenus = usePermissionStoreHook().wholeMenus;
-  // 当前路由的父级路径
+  /** 当前路由的父级路径 */
   const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
   defaultActive.value = findRouteByPath(
     parentRoutes,
@@ -51,67 +43,24 @@ function getDefaultActive(routePath) {
 
 onMounted(() => {
   getDefaultActive(route.path);
-  nextTick(() => {
-    handleResize(menuRef.value);
-  });
 });
 
-watch(
-  () => locale.value,
-  () => {
-    changeTitle(route.meta);
-  }
-);
-
 watch(
   () => route.path,
   () => {
     getDefaultActive(route.path);
   }
 );
-
-function translationCh() {
-  instance.locale = { locale: "zh" };
-  locale.value = "zh";
-  handleResize(menuRef.value);
-}
-
-function translationEn() {
-  instance.locale = { locale: "en" };
-  locale.value = "en";
-  handleResize(menuRef.value);
-}
 </script>
 
 <template>
-  <div class="horizontal-header">
-    <div
-      :class="classes.container"
-      :title="pureApp.sidebar.opened ? '点击折叠' : '点击展开'"
-      @click="toggleSideBar"
-    >
-      <svg
-        :fill="useEpThemeStoreHook().fill"
-        :class="[
-          'hamburger',
-          pureApp.sidebar.opened ? 'is-active-hamburger' : ''
-        ]"
-        viewBox="0 0 1024 1024"
-        xmlns="http://www.w3.org/2000/svg"
-        width="64"
-        height="64"
-      >
-        <path
-          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-        />
-      </svg>
-    </div>
+  <div v-if="device !== 'mobile'" class="horizontal-header">
     <el-menu
-      ref="menu"
-      class="horizontal-header-menu"
-      mode="horizontal"
-      :default-active="defaultActive"
       router
+      ref="menuRef"
+      mode="horizontal"
+      class="horizontal-header-menu"
+      :default-active="defaultActive"
       @select="indexPath => menuSelect(indexPath, routers)"
     >
       <el-menu-item
@@ -120,10 +69,15 @@ function translationEn() {
         :index="resolvePath(route) || route.redirect"
       >
         <template #title>
-          <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
-            <component :is="useRenderIcon(route.meta && route.meta.icon)" />
+          <div
+            v-if="toRaw(route.meta.icon)"
+            :class="['sub-menu-icon', route.meta.icon]"
+          >
+            <component
+              :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
+            />
           </div>
-          <span>{{ transformI18n(route.meta.title) }}</span>
+          <span class="select-none">{{ transformI18n(route.meta.title) }}</span>
           <FontIcon
             v-if="route.meta.extraIcon"
             width="30px"
@@ -144,31 +98,39 @@ function translationEn() {
       <screenfull id="header-screenfull" v-show="!deviceDetection()" />
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
-        <globalization />
+        <globalization
+          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+        />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
-              ><span class="check-zh" v-show="locale === 'zh'"
-                ><IconifyIconOffline icon="check" /></span
-              >简体中文</el-dropdown-item
             >
+              <span class="check-zh" v-show="locale === 'zh'">
+                <IconifyIconOffline icon="check" />
+              </span>
+              简体中文
+            </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
+              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
-              ><span class="check-en" v-show="locale === 'en'"
-                ><IconifyIconOffline icon="check" /></span
-              >English</el-dropdown-item
             >
+              <span class="check-en" v-show="locale === 'en'">
+                <IconifyIconOffline icon="check" />
+              </span>
+              English
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <!-- 退出登陆 -->
+      <!-- 退出登录 -->
       <el-dropdown trigger="click">
-        <span class="el-dropdown-link">
+        <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username">{{ username }}</p>
+          <p v-if="username" class="dark:color-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -177,13 +139,13 @@ function translationEn() {
                 icon="logout-circle-r-line"
                 style="margin: 5px"
               />
-              {{ t("buttons.hsLoginOut") }}</el-dropdown-item
-            >
+              {{ t("buttons.hsLoginOut") }}
+            </el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <span
-        class="el-icon-setting"
+        class="el-icon-setting navbar-bg-hover"
         :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
@@ -193,26 +155,7 @@ function translationEn() {
   </div>
 </template>
 
-<style module="classes" scoped>
-.container {
-  padding: 0 15px;
-}
-</style>
-
 <style lang="scss" scoped>
-.hamburger {
-  width: 20px;
-  height: 20px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.is-active-hamburger {
-  transform: rotate(180deg);
-}
-
 .translation {
   ::v-deep(.el-dropdown-menu__item) {
     padding: 5px 40px;

src/layout/components/sidebar/sidebarItem.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import path from "path";
-import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
+import { useNav } from "/@/layout/hooks/useNav";
 import { transformI18n } from "/@/plugins/i18n";
-import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
+import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
 
-const { pureApp } = useNav();
-const menuMode = ["vertical", "mix"].includes(pureApp.layout);
+const { layout, isCollapse } = useNav();
 
 const props = defineProps({
   item: {
@@ -25,7 +23,7 @@ const props = defineProps({
 });
 
 const getExtraIconStyle = computed((): CSSProperties => {
-  if (useAppStoreHook().getSidebarStatus) {
+  if (!isCollapse.value) {
     return {
       position: "absolute",
       right: "10px"
@@ -46,7 +44,7 @@ const getNoDropdownStyle = computed((): CSSProperties => {
 
 const getDivStyle = computed((): CSSProperties => {
   return {
-    width: pureApp.sidebar.opened ? "" : "100%",
+    width: !isCollapse.value ? "" : "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
@@ -54,9 +52,8 @@ const getDivStyle = computed((): CSSProperties => {
   };
 });
 
-const getMenuTextStyle = computed((): CSSProperties => {
+const getMenuTextStyle = computed(() => {
   return {
-    width: pureApp.sidebar.opened ? "125px" : "",
     overflow: "hidden",
     textOverflow: "ellipsis",
     outline: "none"
@@ -65,14 +62,14 @@ const getMenuTextStyle = computed((): CSSProperties => {
 
 const getSubTextStyle = computed((): CSSProperties => {
   return {
-    width: pureApp.sidebar.opened ? "125px" : "",
+    width: !isCollapse.value ? "210px" : "",
     display: "inline-block",
     overflow: "hidden",
     textOverflow: "ellipsis"
   };
 });
 
-const getSpanStyle = computed((): CSSProperties => {
+const getSpanStyle = computed(() => {
   return {
     overflow: "hidden",
     textOverflow: "ellipsis"
@@ -148,21 +145,31 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       :style="getNoDropdownStyle"
     >
-      <div class="sub-menu-icon" v-show="props.item.meta.icon">
+      <div class="sub-menu-icon" v-if="toRaw(props.item.meta.icon)">
         <component
           :is="
             useRenderIcon(
-              onlyOneChild.meta.icon ||
-                (props.item.meta && props.item.meta.icon)
+              toRaw(onlyOneChild.meta.icon) ||
+                (props.item.meta && toRaw(props.item.meta.icon))
             )
           "
         />
       </div>
       <div
         v-if="
-          !pureApp.sidebar.opened &&
-          pureApp.layout === 'mix' &&
-          props.item?.pathList?.length === 2
+          isCollapse &&
+          layout === 'vertical' &&
+          props.item?.pathList?.length === 1
+        "
+        :style="getDivStyle"
+      >
+        <span :style="getMenuTextStyle">
+          {{ transformI18n(onlyOneChild.meta.title) }}
+        </span>
+      </div>
+      <div
+        v-if="
+          isCollapse && layout === 'mix' && props.item?.pathList?.length === 2
         "
         :style="getDivStyle"
       >
@@ -172,9 +179,9 @@ function resolvePath(routePath) {
       </div>
       <template #title>
         <div :style="getDivStyle">
-          <span v-if="!menuMode">{{
-            transformI18n(onlyOneChild.meta.title)
-          }}</span>
+          <span v-if="layout === 'horizontal'">
+            {{ transformI18n(onlyOneChild.meta.title) }}
+          </span>
           <el-tooltip
             v-else
             placement="top"
@@ -205,24 +212,21 @@ function resolvePath(routePath) {
     </el-menu-item>
   </template>
 
-  <el-sub-menu
-    v-else
-    ref="subMenu"
-    :index="resolvePath(props.item.path)"
-    popper-append-to-body
-  >
+  <el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)">
     <template #title>
-      <div v-show="props.item.meta.icon" class="sub-menu-icon">
+      <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
         <component
-          :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
+          :is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))"
         />
       </div>
-      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
+      <span v-if="layout === 'horizontal'">
+        {{ transformI18n(props.item.meta.title) }}
+      </span>
       <el-tooltip
         v-else
         placement="top"
         :offset="-10"
-        :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
+        :disabled="!isCollapse || !props.item.showTooltip"
       >
         <template #content>
           {{ transformI18n(props.item.meta.title) }}

src/layout/components/sidebar/topCollapse.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const emit = defineEmits<{
+  (e: "toggleClick"): void;
+}>();
+
+const toggleClick = () => {
+  emit("toggleClick");
+};
+</script>
+
+<template>
+  <div
+    class="px-3 mr-1 navbar-bg-hover"
+    :title="props.isActive ? '点击折叠' : '点击展开'"
+    @click="toggleClick"
+  >
+    <IconifyIconOffline
+      :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
+      class="inline-block align-middle hover:color-primary !dark:hover:color-white"
+    />
+  </div>
+</template>

src/layout/components/sidebar/vertical.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
 import Logo from "./logo.vue";
+import { useRoute } from "vue-router";
 import { emitter } from "/@/utils/mitt";
-import { useNav } from "../../hooks/nav";
 import SidebarItem from "./sidebarItem.vue";
-import { storageLocal } from "/@/utils/storage";
-import { useRoute, useRouter } from "vue-router";
+import leftCollapse from "./leftCollapse.vue";
+import type { StorageConfigs } from "/#/index";
+import { useNav } from "/@/layout/hooks/useNav";
+import { storageLocal } from "@pureadmin/utils";
 import { ref, computed, watch, onBeforeMount } from "vue";
 import { findRouteByPath, getParentPaths } from "/@/router/utils";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const route = useRoute();
-const routers = useRouter().options.routes;
 const showLogo = ref(
-  storageLocal.getItem("responsive-configure")?.showLogo ?? true
+  storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
 );
 
-const { pureApp, isCollapse, menuSelect } = useNav();
+const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
+  useNav();
 
 let subMenuData = ref([]);
 
 const menuData = computed(() => {
-  return pureApp.layout === "mix"
+  return pureApp.layout === "mix" && device.value !== "mobile"
     ? subMenuData.value
     : usePermissionStoreHook().wholeMenus;
 });
@@ -59,25 +61,33 @@ watch(
 <template>
   <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
     <Logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar
+      wrap-class="scrollbar-wrapper"
+      :class="[device === 'mobile' ? 'mobile' : 'pc']"
+    >
       <el-menu
-        :default-active="route.path"
-        :collapse="isCollapse"
-        unique-opened
         router
-        :collapse-transition="false"
+        unique-opened
         mode="vertical"
-        class="outer-most"
+        class="outer-most select-none"
+        :collapse="isCollapse"
+        :default-active="route.path"
+        :collapse-transition="false"
         @select="indexPath => menuSelect(indexPath, routers)"
       >
         <sidebar-item
           v-for="routes in menuData"
           :key="routes.path"
           :item="routes"
-          class="outer-most"
           :base-path="routes.path"
+          class="outer-most select-none"
         />
       </el-menu>
     </el-scrollbar>
+    <leftCollapse
+      v-if="device !== 'mobile'"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
   </div>
 </template>