From 7391ec2d5cf089fd3cd0358d78884c01ae423ae7 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 9 Jan 2025 15:53:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E5=88=86=E4=B8=BA?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=AD=E4=B8=8B=EF=BC=8C=E4=B8=AD=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=B8=83=E5=B1=80=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/layout.html                              | 114 +++++++++++++++++-
 .../AutoImport/BaseContainer/index.vue        |   9 +-
 .../AutoImport/BaseFooter/index.vue           |   9 +-
 .../AutoImport/BaseHeader/index.vue           |   9 +-
 src/components/AutoImport/BaseMain/index.vue  |   2 +-
 src/views/demo/layout.vue                     |   2 +
 src/views/template/layout/index.vue           |  12 +-
 7 files changed, 140 insertions(+), 17 deletions(-)
diff --git a/demo/layout.html b/demo/layout.html
index 1ce18ad..57bcb27 100644
--- a/demo/layout.html
+++ b/demo/layout.html
@@ -19,17 +19,119 @@
             rel="icon"
             href="/favicon.ico"
         />
-        <script>
-            window.process = {};
-        </script>
+        <!-- Import style -->
+        <link
+            rel="stylesheet"
+            href="//unpkg.com/element-plus/dist/index.css"
+        />
+        <!-- Import Vue 3 -->
+        <script src="//unpkg.com/vue@3"></script>
+        <!-- Import component library -->
+        <script src="//unpkg.com/element-plus"></script>
     </head>
-
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        html,
+        body,
+        #app {
+            height: 100%;
+        }
+        .base-container {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        .base-header {
+            background-color: #f5f5f5;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .base-main {
+            display: flex;
+            flex: 1;
+            flex-shrink: 0;
+            overflow: auto;
+        }
+        .base-footer {
+            background-color: #dbdbdb;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
     <body>
         <div id="app">
-            <h1>Welcome to vue3-mgt-template</h1>
+            <div class="base-container">
+                <div class="base-header">这是<br />header内容</div>
+                <el-table
+                    :data="tableData"
+                    size="large"
+                    class="base-main"
+                    border
+                >
+                    <el-table-column
+                        prop="time"
+                        label="时间"
+                    ></el-table-column>
+                    <el-table-column
+                        prop="name"
+                        label="姓名"
+                    ></el-table-column>
+                    <el-table-column
+                        prop="address"
+                        label="地址"
+                    ></el-table-column>
+                    <!-- 下面的写法会导致table渲染错误，多行表头，内容也只有地址最后一栏，原因是
+                        解释： 由于原生的 HTML 解析行为的限制，单个闭合标签可能会导致一些例外情况，所以请使用双封闭标签，
+                        
+                        详细解释：然而在 DOM 内模板中，我们必须显式地写出关闭标签：
+                        <my-component></my-component>
+                        这是由于 HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是 <input> 和 <img>。对于其他的元素来说，如果你省略了关闭标签，原生的 HTML 解析器会认为开启的标签永远没有结束
+                        https://cn.vuejs.org/guide/essentials/component-basics#in-dom-template-parsing-caveats 
+                    -->>
+                    <!-- <el-table-column
+                        prop="time"
+                        label="时间"
+                    />
+                    <el-table-column
+                        prop="name"
+                        label="姓名"
+                    />
+                    <el-table-column
+                        prop="address"
+                        label="地址"
+                    /> -->
+                </el-table>
+                <div class="base-footer">这是<br />footer<br />内容</div>
+            </div>
         </div>
     </body>
 </html>
 <script>
-    console.log(111);
+    const App = {
+        data() {
+            return {
+                message: 'Hello Element Plus',
+                tableData: [
+                    {
+                        time: '2016-05-03',
+                        name: 'Tom',
+                        address: 'No. 189, Grove St, Los Angeles',
+                    },
+                ],
+            };
+        },
+        mounted() {
+            for (let i = 0; i < 100; i++) {
+                this.tableData.push(this.tableData[0]);
+            }
+        },
+    };
+    const app = Vue.createApp(App);
+    app.use(ElementPlus);
+    app.mount('#app');
 </script>
diff --git a/src/components/AutoImport/BaseContainer/index.vue b/src/components/AutoImport/BaseContainer/index.vue
index 6e19983..f1fab47 100644
--- a/src/components/AutoImport/BaseContainer/index.vue
+++ b/src/components/AutoImport/BaseContainer/index.vue
@@ -1,7 +1,7 @@
 <template>
     <section
         class="base-container"
-        :style="{ height: hideTabs ? 'calc(100vh - 81px)' : 'calc(100vh - 48px)' }"
+        :style="`height: calc(100vh - ${hideTabs ? 48 : 81}px)`"
     >
         <slot></slot>
     </section>
@@ -19,10 +19,11 @@ const hideTabs = computed(() => {
 
 <style lang="scss">
 .base-container {
-    overflow: auto;
+    overflow: hidden;
     display: flex;
-    // flex: 1; 父元素的flex不能设置1，必须设置具体的高度数值，否则内部table不能自身内部滚动
+    // flex: 1; 因为base-container的父元素高度不固定，所以自身的flex不能设置1，必须设置具体的高度数值，否则内部子元素的table不能自身内部滚动
     flex-direction: column;
-    height: calc(100vh - 81px);
+    padding: 10px;
+    // height: calc(100vh - 81px); 这里由hidetabs来动态决定高度
 }
 </style>
diff --git a/src/components/AutoImport/BaseFooter/index.vue b/src/components/AutoImport/BaseFooter/index.vue
index 24a49a9..52523cb 100644
--- a/src/components/AutoImport/BaseFooter/index.vue
+++ b/src/components/AutoImport/BaseFooter/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <section class="base-container">
+    <section class="base-footer">
         <slot></slot>
     </section>
 </template>
+
+<style lang="scss">
+.base-footer {
+    display: flex;
+    margin-top: 10px;
+}
+</style>
diff --git a/src/components/AutoImport/BaseHeader/index.vue b/src/components/AutoImport/BaseHeader/index.vue
index 24a49a9..629b986 100644
--- a/src/components/AutoImport/BaseHeader/index.vue
+++ b/src/components/AutoImport/BaseHeader/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <section class="base-container">
+    <section class="base-header">
         <slot></slot>
     </section>
 </template>
+
+<style lang="scss">
+.base-header {
+    display: flex;
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/AutoImport/BaseMain/index.vue b/src/components/AutoImport/BaseMain/index.vue
index d3c7efe..45aa51f 100644
--- a/src/components/AutoImport/BaseMain/index.vue
+++ b/src/components/AutoImport/BaseMain/index.vue
@@ -9,7 +9,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    flex-shrink: 0;
     overflow: auto;
-    height: calc(100vh - 81px);
 }
 </style>
diff --git a/src/views/demo/layout.vue b/src/views/demo/layout.vue
index c37e18f..c8cf645 100644
--- a/src/views/demo/layout.vue
+++ b/src/views/demo/layout.vue
@@ -2,5 +2,7 @@
     <iframe
         src="/demo/layout.html"
         frameborder="0"
+        width="100%"
+        height="100%"
     ></iframe>
 </template>
diff --git a/src/views/template/layout/index.vue b/src/views/template/layout/index.vue
index fd35d3f..dd3e7b7 100644
--- a/src/views/template/layout/index.vue
+++ b/src/views/template/layout/index.vue
@@ -1,14 +1,18 @@
 <template>
-    <Base-Container>
-        <div class="flex">1</div>
+    <base-container>
+        <base-header>
+            <el-card style="width: 100%"> 我是header </el-card>
+        </base-header>
         <pure-table
             class="base-main"
             :data="tableData"
             :columns="columns"
             size="large"
         />
-        <div class="flex">2</div>
-    </Base-Container>
+        <base-footer>
+            <el-card style="width: 100%"> 我是footer </el-card>
+        </base-footer>
+    </base-container>
 </template>
 
 <script setup lang="jsx">
