From 72d9deadb308d97456f7c3fb5a022e3746ad130d Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Sun, 29 Jun 2025 18:18:09 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E6=89=93=E5=BC=80=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=83=8C=E6=99=AF=E4=B8=8D=E4=B8=BA=E7=81=B0?=
 =?UTF-8?q?=E8=89=B2;=E9=A1=B5=E9=9D=A2=E5=85=B3=E9=97=AD=E6=97=A0?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/home/MainGeneratorPage.js       | 30 +++++++++++++++----
 .../src/main/resources/templates/home.html    | 30 +++++++++++++++++--
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/generator-code-server/generator-code/src/main/resources/static/src/views/home/MainGeneratorPage.js b/generator-code-server/generator-code/src/main/resources/static/src/views/home/MainGeneratorPage.js
index 0b5e996..f5cf792 100644
--- a/generator-code-server/generator-code/src/main/resources/static/src/views/home/MainGeneratorPage.js
+++ b/generator-code-server/generator-code/src/main/resources/static/src/views/home/MainGeneratorPage.js
@@ -1,11 +1,11 @@
 const MainGeneratorPage = defineComponent({
     name: "MainGeneratorPage",
     template: `
-<div :class="{'show': generatorPageFlag}" class="offcanvas offcanvas-start w-50" data-bs-scroll="false">
+<div class="offcanvas offcanvas-start" data-bs-scroll="false" tabindex="-1" ref="offcanvasElementRef">
     <!-- 侧边栏头部 -->
     <div class="offcanvas-header bg-primary text-white">
         <div>
-            <h5 class="offcanvas-title mb-1" id="offcanvasWithBothOptionsLabel">
+            <h5 class="offcanvas-title mb-1">
                 <i class="bi bi-file-earmark-code me-2"></i>模板生成页面
             </h5>
             <p class="small mb-0 opacity-75">已生成的文件列表</p>
@@ -30,7 +30,7 @@ const MainGeneratorPage = defineComponent({
                                  role="button" data-bs-toggle="collapse" :data-bs-target="'#collapse-' + item.id" aria-expanded="false">
                                 <div class="d-flex align-items-center">
                                     <i class="bi bi-bi-file-earmark-code me-2 text-primary fs-5"></i>
-                                    <span class="text-truncate" style="max-width: 80%">
+                                    <span class="text-truncate" style="max-width: 90%">
                                         【{{item.comment}}】{{item.path}}
                                     </span>
                                 </div>
@@ -73,6 +73,7 @@ const MainGeneratorPage = defineComponent({
         </div>
     </div>
 </div>
+
     `,
     props: {
         // 是否显示生成页面
@@ -83,7 +84,9 @@ const MainGeneratorPage = defineComponent({
     data() {
         return {
             // 控制图标状态的响应式变量
-            copied: false
+            copied: ref(false),
+            // 存储 offcanvas 实例
+            offcanvas: ref(null)
         }
     },
     methods: {
@@ -153,7 +156,24 @@ const MainGeneratorPage = defineComponent({
 
         /* 关闭窗口 */
         onGeneratorPageFlagClick() {
-            this.$emit("update:generatorPageFlag", !this.generatorPageFlag)
+            this.$emit("update:generatorPageFlag", !this.generatorPageFlag);
         },
     },
+    mounted() {
+        // 初始化 OffCanvas
+        this.offcanvas = new bootstrap.Offcanvas(this.$refs.offcanvasElementRef);
+        // 监听隐藏事件
+        this.$refs.offcanvasElementRef.addEventListener('hidden.bs.offcanvas', () => {
+            this.$emit("update:generatorPageFlag", false);
+        });
+    },
+    watch: {
+        generatorPageFlag(newVal) {
+            if (newVal) {
+                this.offcanvas.show();
+            } else {
+                this.offcanvas.hide();
+            }
+        },
+    }
 });
\ No newline at end of file
diff --git a/generator-code-server/generator-code/src/main/resources/templates/home.html b/generator-code-server/generator-code/src/main/resources/templates/home.html
index 2da63d6..2f308cd 100644
--- a/generator-code-server/generator-code/src/main/resources/templates/home.html
+++ b/generator-code-server/generator-code/src/main/resources/templates/home.html
@@ -30,6 +30,30 @@
     <script th:src="@{/src/lib/js/dayjs/antd.min.js}"></script>
 </head>
 
+<style>
+    /* 提高 Antd Message 的 z-index */
+    .ant-message {
+        z-index: 1100 !important;
+    }
+
+    /* 响应式 OffCanvas 宽度 */
+    .offcanvas.offcanvas-start {
+        width: 50%;
+    }
+
+    @media (max-width: 991.98px) {
+        .offcanvas.offcanvas-start {
+            width: 75%;
+        }
+    }
+
+    @media (max-width: 767.98px) {
+        .offcanvas.offcanvas-start {
+            width: 100%;
+        }
+    }
+</style>
+
 <body>
 <div id="app">
     <div class="container my-4">
@@ -50,7 +74,7 @@
                     :raw-table-list="rawTableList" :table-list="tableList" v-model:form="form"></main-table>
 
         <!-- 模板生成页面 -->
-        <main-generator-page :generator-data="generatorData"
+        <main-generator-page :generator-data="generatorData" ref="mainGeneratorRef"
                              v-model:generator-page-flag="generatorPageFlag"></main-generator-page>
     </div>
 </div>
@@ -152,8 +176,8 @@
                 else antd.message.success(message);
 
                 // 显示生成的页面
-                this.generatorPageFlag = true;
                 this.generatorData = data;
+                this.generatorPageFlag = true;
 
                 // 等待 DOM 更新，之后手动更新代码高亮
                 await this.$nextTick();
@@ -181,7 +205,7 @@
                     this.tableList = this.tableList.filter(table => table.tableName.includes(val) || table.tablePrefixes.includes(val));
                 }
             },
-        }
+        },
     });
 
     // 注册组件