fix: [重构主题后的一些问题](https://github.com/xiaoxian521/vue-pure-admin/issues/319)

src/layout/components/navbar.vue

@@ -6,16 +6,20 @@ import mixNav from "./sidebar/mixNav.vue";
 import avatars from "/@/assets/avatars.jpg";
 import Breadcrumb from "./sidebar/breadCrumb.vue";
 import { deviceDetection } from "@pureadmin/utils";
+import topCollapse from "./sidebar/topCollapse.vue";
 import screenfull from "../components/screenfull/index.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
 const {
+  layout,
+  device,
   logout,
   onPanel,
   pureApp,
   username,
   avatarsStyle,
+  toggleSideBar,
   getDropdownItemStyle,
   getDropdownItemClass
 } = useNav();
@@ -27,11 +31,21 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
   <div
     class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
   >
-    <Breadcrumb v-if="pureApp.layout !== 'mix'" class="breadcrumb-container" />
+    <topCollapse
+      v-if="device === 'mobile'"
+      class="hamburger-container"
+      :is-active="pureApp.sidebar.opened"
+      @toggleClick="toggleSideBar"
+    />
 
-    <mixNav v-if="pureApp.layout === 'mix'" />
+    <Breadcrumb
+      v-if="layout !== 'mix' && device !== 'mobile'"
+      class="breadcrumb-container"
+    />
 
-    <div v-if="pureApp.layout === 'vertical'" class="vertical-header-right">
+    <mixNav v-if="layout === 'mix'" />
+
+    <div v-if="layout === 'vertical'" class="vertical-header-right">
       <!-- 菜单搜索 -->
       <Search />
       <!-- 通知 -->
@@ -105,6 +119,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
   height: 48px;
   overflow: hidden;
 
+  .hamburger-container {
+    line-height: 48px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+  }
+
   .vertical-header-right {
     display: flex;
     min-width: 280px;

src/layout/components/notice/index.vue

@@ -15,7 +15,7 @@ notices.value.forEach(notice => {
 });
 
 function tabClick() {
-  (dropdownDom as any).v.handleOpen();
+  (dropdownDom as any).value.handleOpen();
 }
 </script>
 

src/layout/components/search/components/SearchModal.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
+import { useNav } from "../../../hooks/nav";
 import SearchResult from "./SearchResult.vue";
 import SearchFooter from "./SearchFooter.vue";
 import { transformI18n } from "/@/plugins/i18n";
@@ -17,6 +18,7 @@ interface Emits {
   (e: "update:value", val: boolean): void;
 }
 
+const { device } = useNav();
 const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {});
 const router = useRouter();
@@ -130,7 +132,12 @@ onKeyStroke("ArrowDown", handleDown);
 </script>
 
 <template>
-  <el-dialog top="5vh" v-model="show" :before-close="handleClose">
+  <el-dialog
+    top="5vh"
+    :width="device === 'mobile' ? '80vw' : '50vw'"
+    v-model="show"
+    :before-close="handleClose"
+  >
     <el-input
       ref="inputRef"
       v-model="keyword"

src/layout/components/sidebar/leftCollapse.vue

@@ -20,7 +20,7 @@ const toggleClick = () => {
 </script>
 
 <template>
-  <div class="hamburger-container">
+  <div class="container">
     <el-tooltip
       placement="right"
       :effect="isDark ? 'dark' : 'light'"
@@ -36,10 +36,10 @@ const toggleClick = () => {
 </template>
 
 <style lang="scss" scoped>
-.hamburger-container {
+.container {
   position: absolute;
   bottom: 0;
-  width: 210px;
+  width: 100%;
   height: 40px;
   line-height: 40px;
   box-shadow: 0 0 6px -2px var(--el-color-primary);

src/layout/components/sidebar/mixNav.vue

@@ -30,6 +30,7 @@ const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
 
 const {
+  device,
   logout,
   onPanel,
   changeTitle,
@@ -93,7 +94,7 @@ function translationEn() {
 </script>
 
 <template>
-  <div class="horizontal-header">
+  <div v-if="device !== 'mobile'" class="horizontal-header">
     <el-menu
       router
       ref="menu"

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,9 +1,9 @@
 <script setup lang="ts">
 import Logo from "./logo.vue";
-import Hamburger from "./hamBurger.vue";
 import { emitter } from "/@/utils/mitt";
 import { useNav } from "../../hooks/nav";
 import SidebarItem from "./sidebarItem.vue";
+import leftCollapse from "./leftCollapse.vue";
 import type { StorageConfigs } from "/#/index";
 import { storageLocal } from "@pureadmin/utils";
 import { useRoute, useRouter } from "vue-router";
@@ -17,7 +17,7 @@ const showLogo = ref(
   storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
 );
 
-const { pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
+const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
 
 let subMenuData = ref([]);
 
@@ -61,7 +61,10 @@ 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
         router
         unique-opened
@@ -81,7 +84,8 @@ watch(
         />
       </el-menu>
     </el-scrollbar>
-    <Hamburger
+    <leftCollapse
+      v-if="device !== 'mobile'"
       :is-active="pureApp.sidebar.opened"
       @toggleClick="toggleSideBar"
     />