perf: 样式调整

src/layouts/Basic.vue

@@ -22,17 +22,11 @@ const router = useRouter();
 const route = useRoute();
 
 useResponsive(true);
-const navbarHeight = `52px`;
+
-// const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
-// const hideMenu = computed(() => appStore.hideMenu);
 const showSider = computed(() => {
-  // 框架模版自带判断逻辑
+  return  !route.meta?.hideSidebar;
-  return appStore.menu && !appStore.topMenu && !appStore.hideMenu && !route.meta?.hideSidebar;
 });
 
-const menuWidth = computed(() => {
-  return sidebarStore.menuCollapse ? appStore.menuWidthFold : appStore.menuWidth;
-});
 const collapsed = computed(() => {
   return sidebarStore.menuCollapse;
 });
@@ -63,7 +57,7 @@ const checkHasInviteCode = () => {
       <Layout.Sider
         v-if="showSider"
         v-model="collapsed"
-        :width="menuWidth"
+        :width="sidebarStore.sidebarWidth"
         collapsible
         trigger
         @collapse="setCollapsed"

src/stores/modules/side-bar/index.ts

@@ -27,6 +27,11 @@ export const useSidebarStore = defineStore('sidebar', {
     allowAccessRoutes: [], // 允许访问的路由列表
     menuCollapse: false, // 菜单是否折叠
   }),
+  getters: {
+    sidebarWidth(): number {
+      return this.menuCollapse ? 74 : 138;
+    },
+  },
   actions: {
     clearActiveMenuKey() {
       this.activeMenuKey = null;

src/styles/lib/variable.scss

@@ -1,6 +1,7 @@
 
 $navbar-height: 52px; // 头部高度
 $sidebar-width: 138px; // 侧边栏菜单宽度
+$sidebar-width-collapse: 74px; // 折叠侧边栏菜单宽度
 
 // 汉字字体
 $font-family-regular: 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;