feat: 部分全局布局容器

src/components/AutoImport/BaseContainer/index.vue

@@ -1,24 +1,27 @@
 <template>
-    <section class="base-container">
+    <section
+        class="base-container"
+        :style="{ height: hideTabs ? 'calc(100vh - 81px)' : 'calc(100vh - 48px)' }"
+    >
         <slot></slot>
     </section>
 </template>
 
 <script setup>
-// import { computed } from 'vue';
-// import { useGlobal } from '@pureadmin/utils';
-// const { $storage } = useGlobal();
+import { computed } from 'vue';
+import { useGlobal } from '@pureadmin/utils';
+const { $storage } = useGlobal();
 
-// const hideTabs = computed(() => {
-//     return $storage?.configure.hideTabs;
-// });
+const hideTabs = computed(() => {
+    return $storage?.configure.hideTabs;
+});
 </script>
 
 <style lang="scss">
 .base-container {
     overflow: auto;
     display: flex;
-    flex: 1;
+    // flex: 1; 父元素的flex不能设置1，必须设置具体的高度数值，否则内部table不能自身内部滚动
     flex-direction: column;
     height: calc(100vh - 81px);
 }

src/router/modules/demo.ts

@@ -1,4 +1,3 @@
-const Layout = () => import('@/layout/index.vue');
 import { route } from '@/utils/tools';
 const titleArr = [
     {
@@ -78,8 +77,6 @@ const demoRoutes = Object.keys(components).map((path) => {
 
 export default {
     path: '/demo',
-    name: 'Demo',
-    component: Layout,
     redirect: '/demo/jsx',
     meta: {
         icon: 'ep:data-analysis',

src/views/template/layout/index.vue

@@ -1,11 +1,13 @@
 <template>
     <Base-Container>
+        <div class="flex">1</div>
         <pure-table
             class="base-main"
             :data="tableData"
             :columns="columns"
             size="large"
         />
+        <div class="flex">2</div>
     </Base-Container>
 </template>