feat: layout组件替换

src/config/settings.json

@@ -8,7 +8,7 @@
   "menuCollapse": false,
   "footer": true,
   "themeColor": "#165DFF",
-  "menuWidth": 220,
+  "menuWidth": 138,
   "globalSettings": false,
   "device": "desktop",
   "tabBar": false,

src/layouts/Basic.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { Layout } from 'ant-design-vue';
+
 import { useAppStore } from '@/stores';
 import { useResponsive } from '@/hooks';
 import JoinModal from '@/components/join-modal.vue';
@@ -15,10 +17,17 @@ const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 
+const Sider = Layout.Sider;
+const Content = Layout.Content;
+
 useResponsive(true);
 const navbarHeight = `52px`;
-const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
+// const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
-const hideMenu = computed(() => appStore.hideMenu);
+// const hideMenu = computed(() => appStore.hideMenu);
+const showSider = computed(() => {
+  // 框架模版自带判断逻辑
+  return appStore.menu && !appStore.topMenu && !appStore.hideMenu && !route.meta?.hideSidebar;
+});
 
 const menuWidth = computed(() => {
   return appStore.menuCollapse ? 48 : appStore.menuWidth;
@@ -26,14 +35,9 @@ const menuWidth = computed(() => {
 const collapsed = computed(() => {
   return appStore.menuCollapse;
 });
-const showSidebar = computed(() => {
+// const showSidebar = computed(() => {
-  return !(route.meta && route.meta.hideSidebar);
+//   return !(route.meta && route.meta.hideSidebar);
-});
+// });
-const paddingStyle = computed(() => {
-  const paddingLeft =
-    showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
-  return { ...paddingLeft };
-});
 
 onMounted(() => {
   checkHasInviteCode();
@@ -49,59 +53,41 @@ const checkHasInviteCode = () => {
     joinModalRef.value?.getEnterprise?.();
   }
 };
-const drawerVisible = ref(false);
-const drawerCancel = () => {
-  drawerVisible.value = false;
-};
-provide('toggleDrawerMenu', () => {
-  drawerVisible.value = !drawerVisible.value;
-});
 </script>
 
 <template>
-  <a-layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
+  <Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
     <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
     <section class="layout-navbar-wrap">
       <base-navbar />
     </section>
-    <a-layout class="flex layout-content-wrap">
+    <Layout class="flex layout-content-wrap">
-      <a-layout-sider
+      <Sider
-        v-if="renderMenu && showSidebar"
+        v-if="showSider"
-        v-show="!hideMenu"
         class="layout-sider"
-        breakpoint="xl"
+        v-model="collapsed"
-        :collapsed="collapsed"
         :width="menuWidth"
         collapsible
-        hide-trigger
+        trigger
         @collapse="setCollapsed"
       >
         <section class="menu-wrapper">
           <base-menu />
         </section>
-      </a-layout-sider>
+      </Sider>
-      <a-drawer
+      <Layout class="flex-1 layout-content">
-        v-if="hideMenu"
+        <div class="px-24px py-16px">
-        :visible="drawerVisible"
-        placement="left"
-        :footer="false"
-        mask-closable
-        :closable="false"
-        @cancel="drawerCancel"
-      >
-        <base-menu />
-      </a-drawer>
-      <a-layout class="flex-1 layout-content">
-        <a-layout-content class="px-24px py-16px">
           <layout-page />
-        </a-layout-content>
+        </div>
-      </a-layout>
+      </Layout>
-    </a-layout>
+    </Layout>
-  </a-layout>
+  </Layout>
 </template>
 
 <style scoped lang="scss">
 .layout-wrap {
+  font-family: inherit;
+  background: transparent;
   min-width: 1200px;
   .layout-navbar-wrap {
     position: sticky;
@@ -113,18 +99,21 @@ provide('toggleDrawerMenu', () => {
   }
   .layout-content-wrap {
     height: 100%;
+    background: transparent;
     min-height: calc(100vh - $navbar-height);
-    .layout-sider {
+    :deep(.ant-layout-sider) {
-      position: sticky;
-      top: $navbar-height;
-      left: 0;
-      // height: 100%;
-      height: calc(100vh - $navbar-height);
-      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
       background: none;
       box-shadow: none;
-      > :deep(.arco-layout-sider-children) {
+      padding-bottom: 0;
-        overflow-y: hidden;
+      .ant-layout-sider-trigger {
+        display: none;
+      }
+      .ant-layout-sider-children {
+        overflow: hidden;
+      }
+      .arco-menu-inner {
+        overflow: hidden;
+        padding: 16px !important;
       }
       .menu-wrapper {
         height: 100%;
@@ -151,6 +140,7 @@ provide('toggleDrawerMenu', () => {
       height: 100%;
       overflow-y: scroll;
       overflow-x: auto;
+      background: transparent;
       transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     }
   }

src/styles/lib/variable.scss

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