1

src/layout/components/Sidebar/index.vue

@@ -1,12 +1,28 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    :class="{ 'has-logo': showLogo }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark'
+          ? variables.menuBackground
+          : variables.menuLightBackground,
+    }"
+  >
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
-        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+        :background-color="
+          sideTheme === 'theme-dark'
+            ? variables.menuBackground
+            : variables.menuLightBackground
+        "
+        :text-color="
+          sideTheme === 'theme-dark'
+            ? variables.menuColor
+            : variables.menuLightColor
+        "
         :unique-opened="true"
         :active-text-color="theme"
         :collapse-transition="false"
@@ -24,20 +40,20 @@
 </template>
 
 <script setup>
-import Logo from './Logo'
-import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/assets/styles/variables.module.scss";
+import useAppStore from "@/store/modules/app";
+import useSettingsStore from "@/store/modules/settings";
+import usePermissionStore from "@/store/modules/permission";
 
 const route = useRoute();
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
 
-const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
-console.log(sidebarRouters)
+const sidebarRouters = computed(() => permissionStore.sidebarRouters);
+console.log(sidebarRouters);
 const showLogo = computed(() => settingsStore.sidebarLogo);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const theme = computed(() => settingsStore.theme);
@@ -50,6 +66,5 @@ const activeMenu = computed(() => {
     return meta.activeMenu;
   }
   return path;
-})
-
+});
 </script>

src/layout/index.vue

@@ -1,8 +1,19 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+  <div
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
         <headerBar></headerBar>
@@ -16,16 +27,16 @@
 </template>
 
 <script setup>
-import { useWindowSize } from '@vueuse/core'
-import notice from '@/components/notice/index'
-import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import defaultSettings from '@/settings'
-import headerBar from '@/components/headerBar/header-bar'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
+import { useWindowSize } from "@vueuse/core";
+import notice from "@/components/notice/index";
+import Sidebar from "./components/Sidebar/index.vue";
+import { AppMain, Navbar, Settings, TagsView } from "./components";
+import defaultSettings from "@/settings";
+import headerBar from "@/components/headerBar/header-bar";
+import useAppStore from "@/store/modules/app";
+import useSettingsStore from "@/store/modules/settings";
 
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const sidebar = computed(() => useAppStore().sidebar);
@@ -37,26 +48,26 @@ const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
   openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
-}))
+  mobile: device.value === "mobile",
+}));
 
 const { width, height } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
+  if (device.value === "mobile" && sidebar.value.opened) {
+    useAppStore().closeSideBar({ withoutAnimation: false });
   }
   if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
+    useAppStore().toggleDevice("mobile");
+    useAppStore().closeSideBar({ withoutAnimation: true });
   } else {
-    useAppStore().toggleDevice('desktop')
+    useAppStore().toggleDevice("desktop");
   }
-})
+});
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
+  useAppStore().closeSideBar({ withoutAnimation: false });
 }
 
 const settingRef = ref(null);
@@ -66,8 +77,8 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
 
 .app-wrapper {
   @include clearfix;

src/store/modules/app.js

@@ -1,13 +1,12 @@
 import Cookies from 'js-cookie'
 
 const useAppStore = defineStore(
-  'app',
-  {
+  'app', {
     state: () => ({
       sidebar: {
         opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
         withoutAnimation: false,
-        hide: false
+        hide: true //控制是否隐藏左侧导航栏
       },
       device: 'desktop',
       size: Cookies.get('size') || 'default'
@@ -25,7 +24,9 @@ const useAppStore = defineStore(
           Cookies.set('sidebarStatus', 0)
         }
       },
-      closeSideBar({ withoutAnimation }) {
+      closeSideBar({
+        withoutAnimation
+      }) {
         Cookies.set('sidebarStatus', 0)
         this.sidebar.opened = false
         this.sidebar.withoutAnimation = withoutAnimation
@@ -43,4 +44,4 @@ const useAppStore = defineStore(
     }
   })
 
-export default useAppStore
+export default useAppStore