refactor: refactor layout

src/components/Application/src/AppLogo.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="app-logo anticon" :class="theme" @click="handleGoHome">
+  <div
+    class="app-logo anticon"
+    :class="{ theme, 'collapsed-show-title': getCollapsedShowTitle }"
+    @click="handleGoHome"
+  >
     <img src="/@/assets/images/logo.png" />
-    <div class="app-logo__title ml-2 ellipsis">{{ globSetting.title }}</div>
+    <div class="app-logo__title ml-2 ellipsis" v-show="showTitle">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -10,6 +14,7 @@
 
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGo } from '/@/hooks/web/usePage';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 
   import { PageEnum } from '/@/enums/pageEnum';
 
@@ -22,8 +27,13 @@
       theme: {
         type: String as PropType<string>,
       },
+      showTitle: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup() {
+      const { getCollapsedShowTitle } = useMenuSetting();
       const globSetting = useGlobSetting();
       const go = useGo();
 
@@ -34,6 +44,7 @@
       return {
         handleGoHome,
         globSetting,
+        getCollapsedShowTitle,
       };
     },
   });
@@ -44,9 +55,13 @@
   .app-logo {
     display: flex;
     align-items: center;
-    padding-left: 16px;
+    padding-left: 10px;
     cursor: pointer;
 
+    &.collapsed-show-title {
+      padding-left: 20px;
+    }
+
     &.light {
       border-bottom: 1px solid @border-color-base;
     }
@@ -64,6 +79,7 @@
       font-weight: 700;
       opacity: 0;
       transition: all 0.5s;
+
       .respond-to(medium,{
        opacity: 1;
       });

src/components/Drawer/src/BasicDrawer.tsx

@@ -49,7 +49,7 @@ export default defineComponent({
           ? `${opt.wrapClassName} ${prefixCls}__detail`
           : `${prefixCls}__detail`;
         if (!opt.getContainer) {
-          opt.getContainer = `.default-layout__main`;
+          opt.getContainer = '.layout-content';
         }
       }
       return opt;

src/components/Menu/src/BasicMenu.tsx

@@ -80,7 +80,7 @@ export default defineComponent({
         offset += 46;
       }
       return {
-        height: `calc(100% - ${offset - 12}px)`,
+        height: `calc(100% - ${offset}px)`,
         position: 'relative',
         overflowY: 'auto',
       };

src/components/Modal/src/BasicModal.tsx

@@ -219,11 +219,7 @@ export default defineComponent({
     emit('register', modalMethods, uuid);
 
     return () => (
-      <Modal
-        onCancel={handleCancel}
-        getContainer={() => document.querySelector('.default-layout__main')}
-        {...{ ...attrs, ...props, ...unref(getProps) }}
-      >
+      <Modal onCancel={handleCancel} {...{ ...attrs, ...props, ...unref(getProps) }}>
         {{
           footer: () => renderFooter(),
           closeIcon: () => renderClose(),

src/components/Modal/src/useModal.ts

@@ -33,6 +33,7 @@ export function useModal(): UseModalReturnType {
 
     modalRef.value = modalMethod;
   }
+
   const getInstance = () => {
     const instance = unref(modalRef);
     if (!instance) {
@@ -50,6 +51,7 @@ export function useModal(): UseModalReturnType {
       getInstance().setModalProps({
         visible: visible,
       });
+
       if (data) {
         dataTransferRef[unref(uidRef)] = openOnSet
           ? {

src/components/Table/src/hooks/useTableScroll.ts

@@ -43,7 +43,6 @@ export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRe
     const tableEl: Element = table.$el;
     if (!tableEl) return;
     const headEl = tableEl.querySelector('.ant-table-thead ');
-    // const layoutMain: Element | null = document.querySelector('.default-layout__main ');
     if (!headEl) return;
 
     // 表格距离底部高度