提交

web/src/assets/styles/sidebar.scss

@@ -4,7 +4,7 @@
   .main-container {
     height: 100%;
     transition: margin-left 0.28s;
-    // margin-left: $base-sidebar-width; // zlwu 改框架注释
+    margin-left: $base-sidebar-width;
     position: relative;
   }
 
@@ -294,7 +294,7 @@
     }
 
     .main-container {
-      // margin-left: 54px; // zlwu 改框架注释
+      margin-left: 54px;
     }
 
     // 确保展开状态下一级菜单与多级菜单对齐一致

web/src/layout/components/Navbar.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="navbar">
-    <!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" /> -->
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
+    <!-- 面包屑按需显示，此处保持隐藏 -->
+    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
 
     <!-- 左侧Logo和系统名称 -->
-    <div class="left-menu flex align-center">
+    <!-- <div class="left-menu flex align-center">
       <div class="logo-container">
         <img src="@/assets/logo/logo.png" alt="学校Logo" class="school-logo" />
       </div>
       <div class="system-title">
         <span class="title-text">杭州第一技师学院智慧校园管理系统</span>
       </div>
-    </div>
+    </div> -->
 
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
@@ -98,6 +98,8 @@
 </template>
 
 <script setup lang="ts">
+import Hamburger from '@/components/Hamburger/index.vue';
+import TopNav from '@/components/TopNav/index.vue';
 import SearchMenu from './TopBar/search.vue';
 import { useAppStore } from '@/store/modules/app';
 import { useUserStore } from '@/store/modules/user';

web/src/layout/index.vue

@@ -1,22 +1,16 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <!-- <side-bar v-if="!sidebar.hide" class="sidebar-container" /> -->
+    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <!-- <el-scrollbar>
+      <el-scrollbar>
         <div :class="{ 'fixed-header': fixedHeader }">
           <navbar ref="navbarRef" @setLayout="setLayout" />
           <tags-view v-if="needTagsView" />
         </div>
         <app-main />
         <settings ref="settingRef" />
-      </el-scrollbar> -->
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @set-layout="setLayout" />
-        <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
-      <settings ref="settingRef" />
+      </el-scrollbar>
     </div>
   </div>
 </template>
@@ -47,14 +41,18 @@ const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
+  const appStore = useAppStore();
   if (device.value === 'mobile') {
-    useAppStore().closeSideBar({ withoutAnimation: false });
+    appStore.closeSideBar({ withoutAnimation: false });
   }
   if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile');
-    useAppStore().closeSideBar({ withoutAnimation: true });
+    appStore.toggleDevice('mobile');
+    appStore.closeSideBar({ withoutAnimation: true });
   } else {
-    useAppStore().toggleDevice('desktop');
+    appStore.toggleDevice('desktop');
+    if (!appStore.sidebar.opened) {
+      appStore.openSideBar();
+    }
   }
 });
 

web/src/store/modules/app.ts

@@ -38,6 +38,15 @@ export const useAppStore = defineStore('app', () => {
     }
   };
 
+  const openSideBar = (): void => {
+    if (sidebar.hide) {
+      return;
+    }
+    sidebarStatus.value = '1';
+    sidebar.opened = true;
+    sidebar.withoutAnimation = false;
+  };
+
   const closeSideBar = ({ withoutAnimation }: any): void => {
     sidebarStatus.value = '0';
     sidebar.opened = false;
@@ -65,6 +74,7 @@ export const useAppStore = defineStore('app', () => {
     size,
     changeLanguage,
     toggleSideBar,
+    openSideBar,
     closeSideBar,
     toggleDevice,
     setSize,