From eca9c4d7f8eaa8db60b72d416f7744eff35fd58f Mon Sep 17 00:00:00 2001
From: pixelmaxQM <flipped_aurora@163.com>
Date: Fri, 29 Mar 2024 20:53:19 +0800
Subject: [PATCH] =?UTF-8?q?fixed:#1692=20=E7=BB=9F=E4=B8=80=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E6=93=8D=E4=BD=9C=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/style/element_visiable.scss           | 191 +++++++++++-
 web/src/style/main.scss                       | 187 +----------
 web/src/view/superAdmin/api/api.vue           |  29 +-
 web/src/view/superAdmin/menu/menu.vue         |  29 +-
 web/src/view/superAdmin/user/user.vue         | 210 ++++++-------
 .../autoCode/component/previewCodeDialg.vue   |   2 +-
 web/src/view/systemTools/autoCode/index.vue   | 197 ++++++------
 .../exportTemplate/exportTemplate.vue         | 295 +++++++++---------
 8 files changed, 579 insertions(+), 561 deletions(-)

diff --git a/web/src/style/element_visiable.scss b/web/src/style/element_visiable.scss
index 0210664c0b..9c2f7d0058 100644
--- a/web/src/style/element_visiable.scss
+++ b/web/src/style/element_visiable.scss
@@ -5,19 +5,6 @@
     border-radius: 2px;
 }
 
-::-webkit-scrollbar {
-    @apply hidden;
-}
-
-
-.gva-search-box {
-    @apply p-6 pb-0.5 bg-white rounded mb-3;
-}
-
-.gva-form-box {
-    @apply p-6 bg-white rounded;
-}
-
 .gva-pagination {
     @apply flex justify-end;
     .el-pagination__editor {
@@ -40,3 +27,181 @@
     padding-bottom: 16px !important;
     @apply border-0 border-b border-solid border-gray-200;
 }
+
+
+.el-form--inline {
+    .el-form-item {
+        & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
+            @apply w-52;
+        }
+    }
+}
+
+.el-dropdown {
+    @apply overflow-hidden
+}
+
+
+.admin-box {
+    @apply min-h-[calc(100vh-200px)] px-3 py-4 mt-28 mb-4 mx-1;
+    .el-table {
+        th {
+            @apply px-0 py-2;
+            .cell {
+                @apply leading-[40px] text-gray-700;
+            }
+        }
+        td {
+            @apply px-0 py-2;
+            .cell {
+                @apply leading-[40px] text-gray-600;
+            }
+        }
+        .is-leaf {
+            @apply border-b border-t-0 border-l-0 border-solid border-gray-50;
+            border-right:var(--el-table-border);
+            background: #F7FBFF !important;
+        }
+    }
+}
+
+//   layout
+
+// table
+.el-pagination {
+    @apply mt-8;
+    .btn-prev,
+    .btn-next {
+        @apply border border-solid border-gray-300 rounded;
+    }
+    .el-pager {
+        li {
+            @apply border border-solid border-gray-300 rounded text-gray-600 text-sm mx-1;
+        }
+    }
+}
+
+// 导航
+#app {
+    .el-container {
+        @apply relative h-full w-full;
+    }
+    .el-container.mobile.openside {
+        @apply fixed top-0;
+    }
+    .gva-aside {
+        @apply fixed top-0 left-0 z-[1001] overflow-hidden;
+        .el-menu {
+            @apply border-r-0;
+        }
+    }
+    .aside {
+        .el-menu--collapse {
+            >.el-menu-item {
+                display: flex;
+                justify-content: center;
+            }
+        }
+        .el-sub-menu {
+            .el-menu {
+                .is-active {
+                    // 关闭三级菜单二级菜单样式
+                    ul {
+                        border: none;
+                    }
+                }
+                // 关闭三级菜单二级菜单样式
+                .is-active.is-opened {
+                    ul {
+                        border: none;
+                    }
+                }
+            }
+        }
+    }
+    .hideside {
+        .aside {
+            @apply w-[54px]
+        }
+    }
+
+    .mobile {
+        .gva-aside {
+            @apply w-[54px];
+        }
+    }
+
+    .hideside {
+        .main-cont.el-main {
+            @apply ml-[54px];
+        }
+    }
+    .mobile {
+        .main-cont.el-main {
+            @apply ml-0;
+        }
+    }
+}
+
+.el-container.layout-cont {
+    .header-cont {
+        @apply px-4 h-16 bg-white;
+    }
+
+
+    .main-cont {
+        @apply h-screen overflow-visible;
+        &.el-main {
+            @apply min-h-full ml-[220px] bg-main p-0 overflow-auto;
+        }
+
+        .breadcrumb {
+            @apply h-16 flex items-center p-0 ml-12 text-lg;
+            .el-breadcrumb__item {
+                .el-breadcrumb__inner {
+                    @apply text-gray-600;
+                }
+            }
+            .el-breadcrumb__item:nth-last-child(1) {
+                .el-breadcrumb__inner {
+                    @apply text-gray-600;
+                }
+            }
+        }
+
+        .router-history {
+            @apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
+            .el-tabs__header {
+                @apply m-0;
+                .el-tabs__item{
+                    @apply border-solid border-r border-t-0 border-gray-100 border-b-0 border-l-0;
+                }
+                .el-tabs__item.is-active {
+                    @apply bg-blue-500 bg-opacity-5;
+                }
+                .el-tabs__nav {
+                    @apply border-0;
+                }
+            }
+        }
+
+        .aside {
+            @apply overflow-auto;
+        }
+        .el-menu-vertical {
+            @apply h-[calc(100vh-60px)];
+            &:not(.el-menu--collapse) {
+                @apply w-[220px];
+            }
+        }
+        .el-menu--collapse {
+            @apply w-[54px];
+            li {
+                .el-tooltip,
+                .el-sub-menu__title {
+                    @apply px-4;
+                }
+            }
+        }
+    }
+}
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index d4865cf224..dfda9e98d0 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -507,175 +507,6 @@ li {
     list-style-type: none;
 }
 
-// 导航
-#app {
-    .el-container {
-        @apply relative h-full w-full;
-    }
-    .el-container.mobile.openside {
-        @apply fixed top-0;
-    }
-    .gva-aside {
-        @apply fixed top-0 left-0 z-[1001] overflow-hidden;
-        .el-menu {
-            @apply border-r-0;
-        }
-    }
-    .aside {
-        .el-menu--collapse {
-            >.el-menu-item {
-                display: flex;
-                justify-content: center;
-            }
-        }
-        .el-sub-menu {
-            .el-menu {
-                .is-active {
-                    // 关闭三级菜单二级菜单样式
-                    ul {
-                        border: none;
-                    }
-                }
-                // 关闭三级菜单二级菜单样式
-                .is-active.is-opened {
-                    ul {
-                        border: none;
-                    }
-                }
-            }
-        }
-    }
-    .hideside {
-        .aside {
-            @apply w-[54px]
-        }
-    }
-
-    .mobile {
-        .gva-aside {
-            @apply w-[54px];
-        }
-    }
-
-    .hideside {
-        .main-cont.el-main {
-            @apply ml-[54px];
-        }
-    }
-    .mobile {
-        .main-cont.el-main {
-            @apply ml-0;
-        }
-    }
-}
-
-//   layout
-
-.admin-box {
-    @apply min-h-[calc(100vh-200px)] px-3 py-4 mt-28 mb-4 mx-1;
-    .el-table {
-        th {
-            @apply px-0 py-2;
-            .cell {
-                @apply leading-[40px] text-gray-700;
-            }
-        }
-        td {
-            @apply px-0 py-2;
-            .cell {
-                @apply leading-[40px] text-gray-600;
-            }
-        }
-        .is-leaf {
-            @apply border-b border-t-0 border-l-0 border-solid border-gray-50;
-            border-right:var(--el-table-border);
-            background: #F7FBFF !important;
-        }
-    }
-}
-
-// table
-.el-pagination {
-    @apply mt-8;
-    .btn-prev,
-    .btn-next {
-        @apply border border-solid border-gray-300 rounded;
-    }
-    .el-pager {
-        li {
-            @apply border border-solid border-gray-300 rounded text-gray-600 text-sm mx-1;
-        }
-    }
-}
-
-
-.el-container.layout-cont {
-    .header-cont {
-        @apply px-4 h-16 bg-white;
-    }
-
-
-    .main-cont {
-        @apply h-screen overflow-visible;
-        &.el-main {
-            @apply min-h-full ml-[220px] bg-main p-0 overflow-auto;
-        }
-
-        .breadcrumb {
-            @apply h-16 flex items-center p-0 ml-12 text-lg;
-            .el-breadcrumb__item {
-                .el-breadcrumb__inner {
-                    @apply text-gray-600;
-                }
-            }
-            .el-breadcrumb__item:nth-last-child(1) {
-                .el-breadcrumb__inner {
-                    @apply text-gray-600;
-                }
-            }
-        }
-
-        .router-history {
-            @apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
-            .el-tabs__header {
-                @apply m-0;
-                .el-tabs__item{
-                    @apply border-solid border-r border-t-0 border-gray-100 border-b-0 border-l-0;
-                }
-                .el-tabs__item.is-active {
-                    @apply bg-blue-500 bg-opacity-5;
-                }
-                .el-tabs__nav {
-                    @apply border-0;
-                }
-            }
-        }
-
-        .aside {
-            @apply overflow-auto;
-        }
-        .el-menu-vertical {
-            @apply h-[calc(100vh-60px)];
-            &:not(.el-menu--collapse) {
-                @apply w-[220px];
-            }
-        }
-        .el-menu--collapse {
-            @apply w-[54px];
-            li {
-                .el-tooltip,
-                .el-sub-menu__title {
-                    @apply px-4;
-                }
-            }
-        }
-    }
-}
-
-.el-dropdown {
-    @apply overflow-hidden
-}
-
 .gva-table-box {
     @apply p-6 bg-white rounded;
 }
@@ -692,10 +523,16 @@ li {
     @apply w-4 h-4;
 }
 
-.el-form--inline {
-    .el-form-item {
-        & > .el-input, .el-cascader, .el-select, .el-date-editor, .el-autocomplete {
-            @apply w-52;
-        }
-    }
+
+::-webkit-scrollbar {
+    @apply hidden;
+}
+
+
+.gva-search-box {
+    @apply p-6 pb-0.5 bg-white rounded mb-3;
+}
+
+.gva-form-box {
+    @apply p-6 bg-white rounded;
 }
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 73184e221f..f135d04680 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -161,11 +161,25 @@
 
     </div>
 
-    <el-dialog
+    <el-drawer
       v-model="dialogFormVisible"
+      size="60%"
       :before-close="closeDialog"
-      :title="dialogTitle"
+      :show-close="false"
     >
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ dialogTitle }}</span>
+          <div>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button
+              type="primary"
+              @click="enterDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+
       <warning-bar title="新增API，需要在角色管理内配置权限才可使用" />
       <el-form
         ref="apiForm"
@@ -218,16 +232,7 @@
           />
         </el-form-item>
       </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
diff --git a/web/src/view/superAdmin/menu/menu.vue b/web/src/view/superAdmin/menu/menu.vue
index fe4adcef34..8842078456 100644
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@@ -124,11 +124,25 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-dialog
+    <el-drawer
       v-model="dialogFormVisible"
+      size="60%"
       :before-close="handleClose"
-      :title="dialogTitle"
+      :show-close="false"
     >
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ dialogTitle }}</span>
+          <div>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button
+              type="primary"
+              @click="enterDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+
       <warning-bar title="新增菜单，需要在角色管理内配置权限才可使用" />
       <el-form
         v-if="dialogFormVisible"
@@ -478,16 +492,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
diff --git a/web/src/view/superAdmin/user/user.vue b/web/src/view/superAdmin/user/user.vue
index 1eae296b11..8323844d39 100644
--- a/web/src/view/superAdmin/user/user.vue
+++ b/web/src/view/superAdmin/user/user.vue
@@ -96,10 +96,10 @@
         >
           <template #default="scope">
             <el-button
-                type="primary"
-                link
-                icon="delete"
-                @click="deleteUserFunc(scope.row)"
+              type="primary"
+              link
+              icon="delete"
+              @click="deleteUserFunc(scope.row)"
             >删除</el-button>
             <el-button
               type="primary"
@@ -129,116 +129,116 @@
         />
       </div>
     </div>
-    <el-dialog
+    <el-drawer
       v-model="addUserDialog"
-      title="用户"
+      size="60%"
       :show-close="false"
       :close-on-press-escape="false"
       :close-on-click-modal="false"
     >
-      <div style="height:60vh;overflow:auto;padding:0 12px;">
-        <el-form
-          ref="userForm"
-          :rules="rules"
-          :model="userInfo"
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">用户</span>
+          <div>
+            <el-button @click="closeAddUserDialog">取 消</el-button>
+            <el-button
+              type="primary"
+              @click="enterAddUserDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-form
+        ref="userForm"
+        :rules="rules"
+        :model="userInfo"
+        label-width="80px"
+      >
+        <el-form-item
+          v-if="dialogFlag === 'add'"
+          label="用户名"
+          prop="userName"
+        >
+          <el-input v-model="userInfo.userName" />
+        </el-form-item>
+        <el-form-item
+          v-if="dialogFlag === 'add'"
+          label="密码"
+          prop="password"
+        >
+          <el-input v-model="userInfo.password" />
+        </el-form-item>
+        <el-form-item
+          label="昵称"
+          prop="nickName"
+        >
+          <el-input v-model="userInfo.nickName" />
+        </el-form-item>
+        <el-form-item
+          label="手机号"
+          prop="phone"
+        >
+          <el-input v-model="userInfo.phone" />
+        </el-form-item>
+        <el-form-item
+          label="邮箱"
+          prop="email"
+        >
+          <el-input v-model="userInfo.email" />
+        </el-form-item>
+        <el-form-item
+          label="用户角色"
+          prop="authorityId"
+        >
+          <el-cascader
+            v-model="userInfo.authorityIds"
+            style="width:100%"
+            :options="authOptions"
+            :show-all-levels="false"
+            :props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
+            :clearable="false"
+          />
+        </el-form-item>
+        <el-form-item
+          label="启用"
+          prop="disabled"
+        >
+          <el-switch
+            v-model="userInfo.enable"
+            inline-prompt
+            :active-value="1"
+            :inactive-value="2"
+          />
+        </el-form-item>
+        <el-form-item
+          label="头像"
           label-width="80px"
         >
-          <el-form-item
-            v-if="dialogFlag === 'add'"
-            label="用户名"
-            prop="userName"
+          <div
+            style="display:inline-block"
+            @click="openHeaderChange"
           >
-            <el-input v-model="userInfo.userName" />
-          </el-form-item>
-          <el-form-item
-            v-if="dialogFlag === 'add'"
-            label="密码"
-            prop="password"
-          >
-            <el-input v-model="userInfo.password" />
-          </el-form-item>
-          <el-form-item
-            label="昵称"
-            prop="nickName"
-          >
-            <el-input v-model="userInfo.nickName" />
-          </el-form-item>
-          <el-form-item
-            label="手机号"
-            prop="phone"
-          >
-            <el-input v-model="userInfo.phone" />
-          </el-form-item>
-          <el-form-item
-            label="邮箱"
-            prop="email"
-          >
-            <el-input v-model="userInfo.email" />
-          </el-form-item>
-          <el-form-item
-            label="用户角色"
-            prop="authorityId"
-          >
-            <el-cascader
-              v-model="userInfo.authorityIds"
-              style="width:100%"
-              :options="authOptions"
-              :show-all-levels="false"
-              :props="{ multiple:true,checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
-              :clearable="false"
-            />
-          </el-form-item>
-          <el-form-item
-            label="启用"
-            prop="disabled"
-          >
-            <el-switch
-              v-model="userInfo.enable"
-              inline-prompt
-              :active-value="1"
-              :inactive-value="2"
-            />
-          </el-form-item>
-          <el-form-item
-            label="头像"
-            label-width="80px"
-          >
-            <div
-              style="display:inline-block"
-              @click="openHeaderChange"
+            <img
+              v-if="userInfo.headerImg"
+              alt="头像"
+              class="header-img-box"
+              :src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg"
             >
-              <img
-                v-if="userInfo.headerImg"
-                alt="头像"
-                class="header-img-box"
-                :src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg"
-              >
-              <div
-                v-else
-                class="header-img-box"
-              >从媒体库选择</div>
-              <ChooseImg
-                ref="chooseImg"
-                :target="userInfo"
-                :target-key="`headerImg`"
-              />
-            </div>
-          </el-form-item>
-
-        </el-form>
-
-      </div>
+            <div
+              v-else
+              class="header-img-box"
+            >从媒体库选择</div>
+            <ChooseImg
+              ref="chooseImg"
+              :target="userInfo"
+              :target-key="`headerImg`"
+            />
+          </div>
+        </el-form-item>
 
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeAddUserDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterAddUserDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+      </el-form>
+    </el-drawer>
   </div>
 </template>
 
@@ -375,7 +375,7 @@ const deleteUserFunc = async(row) => {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(async () => {
+  }).then(async() => {
     const res = await deleteUser({ id: row.ID })
     if (res.code === 0) {
       ElMessage.success('删除成功')
diff --git a/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue b/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
index fec1ce3443..f575aa42b7 100644
--- a/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
+++ b/web/src/view/systemTools/autoCode/component/previewCodeDialg.vue
@@ -8,7 +8,7 @@
     >
       <div
         :id="key"
-        class="h-[50vh] bg-white px-5 overflow-y-scroll"
+        class="h-[calc(100vh-160px)] bg-white px-5 overflow-y-scroll"
       />
     </el-tab-pane>
   </el-tabs>
diff --git a/web/src/view/systemTools/autoCode/index.vue b/web/src/view/systemTools/autoCode/index.vue
index acab4cc9d5..7a78b87a47 100644
--- a/web/src/view/systemTools/autoCode/index.vue
+++ b/web/src/view/systemTools/autoCode/index.vue
@@ -232,69 +232,69 @@
           </el-select>
         </el-form-item>
         <div>
-        <el-form-item>
-          <template #label>
-            <el-tooltip
-              content="注：会自动在结构体global.Model其中包含主键和软删除相关操作配置"
-              placement="bottom"
-              effect="light"
-            >
-              <div> 使用GVA结构 <el-icon><QuestionFilled /></el-icon> </div>
-            </el-tooltip>
-          </template>
-          <el-checkbox
-            v-model="form.gvaModel"
-            @change="useGva"
-          />
-        </el-form-item>
-        <el-form-item>
-          <template #label>
-            <el-tooltip
-              content="注：会自动在结构体添加 created_by updated_by deleted_by，方便用户进行资源权限控制"
-              placement="bottom"
-              effect="light"
-            >
-              <div> 创建资源标识 <el-icon><QuestionFilled /></el-icon> </div>
-            </el-tooltip>
-          </template>
-          <el-checkbox v-model="form.autoCreateResource" />
-        </el-form-item>
-        <el-form-item>
-          <template #label>
-            <el-tooltip
-              content="注：把自动生成的API注册进数据库"
-              placement="bottom"
-              effect="light"
-            >
-              <div> 自动创建API <el-icon><QuestionFilled /></el-icon> </div>
-            </el-tooltip>
-          </template>
-          <el-checkbox v-model="form.autoCreateApiToSql" />
-        </el-form-item>
-        <el-form-item>
-          <template #label>
-            <el-tooltip
+          <el-form-item>
+            <template #label>
+              <el-tooltip
+                content="注：会自动在结构体global.Model其中包含主键和软删除相关操作配置"
+                placement="bottom"
+                effect="light"
+              >
+                <div> 使用GVA结构 <el-icon><QuestionFilled /></el-icon> </div>
+              </el-tooltip>
+            </template>
+            <el-checkbox
+              v-model="form.gvaModel"
+              @change="useGva"
+            />
+          </el-form-item>
+          <el-form-item>
+            <template #label>
+              <el-tooltip
+                content="注：会自动在结构体添加 created_by updated_by deleted_by，方便用户进行资源权限控制"
+                placement="bottom"
+                effect="light"
+              >
+                <div> 创建资源标识 <el-icon><QuestionFilled /></el-icon> </div>
+              </el-tooltip>
+            </template>
+            <el-checkbox v-model="form.autoCreateResource" />
+          </el-form-item>
+          <el-form-item>
+            <template #label>
+              <el-tooltip
+                content="注：把自动生成的API注册进数据库"
+                placement="bottom"
+                effect="light"
+              >
+                <div> 自动创建API <el-icon><QuestionFilled /></el-icon> </div>
+              </el-tooltip>
+            </template>
+            <el-checkbox v-model="form.autoCreateApiToSql" />
+          </el-form-item>
+          <el-form-item>
+            <template #label>
+              <el-tooltip
                 content="注：把自动生成的菜单注册进数据库"
                 placement="bottom"
                 effect="light"
-            >
-              <div> 自动创建菜单 <el-icon><QuestionFilled /></el-icon></div>
-            </el-tooltip>
-          </template>
-          <el-checkbox v-model="form.autoCreateMenuToSql" />
-        </el-form-item>
-        <el-form-item>
-          <template #label>
-            <el-tooltip
-              content="注：自动迁移生成的文件到yaml配置的对应位置"
-              placement="bottom"
-              effect="light"
-            >
-              <div> 自动移动文件 <el-icon><QuestionFilled /></el-icon></div>
-            </el-tooltip>
-          </template>
-          <el-checkbox v-model="form.autoMoveFile" />
-        </el-form-item>
+              >
+                <div> 自动创建菜单 <el-icon><QuestionFilled /></el-icon></div>
+              </el-tooltip>
+            </template>
+            <el-checkbox v-model="form.autoCreateMenuToSql" />
+          </el-form-item>
+          <el-form-item>
+            <template #label>
+              <el-tooltip
+                content="注：自动迁移生成的文件到yaml配置的对应位置"
+                placement="bottom"
+                effect="light"
+              >
+                <div> 自动移动文件 <el-icon><QuestionFilled /></el-icon></div>
+              </el-tooltip>
+            </template>
+            <el-checkbox v-model="form.autoMoveFile" />
+          </el-form-item>
         </div>
       </el-form>
     </div>
@@ -498,11 +498,24 @@
       </div>
     </div>
     <!-- 组件弹窗 -->
-    <el-dialog
+    <el-drawer
       v-model="dialogFlag"
-      width="70%"
-      title="组件内容"
+      size="70%"
+      :show-close="false"
     >
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">组件内容</span>
+          <div>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button
+              type="primary"
+              @click="enterDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+
       <FieldDialog
         v-if="dialogFlag"
         ref="fieldDialogNode"
@@ -510,29 +523,28 @@
         :type-options="typeOptions"
         :type-search-options="typeSearchOptions"
       />
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
 
-    <el-dialog v-model="previewFlag">
-      <template #header>
-        <div class="flex items-center py-1.5">
-          <p>操作栏：</p>
-          <el-button
-            type="primary"
-            @click="selectText"
-          >全选</el-button>
-          <el-button
-            type="primary"
-            @click="copy"
-          >复制</el-button>
+    </el-drawer>
+
+    <el-drawer
+      v-model="previewFlag"
+      size="60%"
+      :show-close="false"
+    >
+
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">操作栏</span>
+          <div>
+            <el-button
+              type="primary"
+              @click="selectText"
+            >全选</el-button>
+            <el-button
+              type="primary"
+              @click="copy"
+            >复制</el-button>
+          </div>
         </div>
       </template>
       <PreviewCodeDialog
@@ -540,18 +552,7 @@
         ref="previewNode"
         :preview-code="preViewCode"
       />
-      <template #footer>
-        <div
-          class="dialog-footer"
-          style="padding-top:14px;padding-right:14px"
-        >
-          <el-button
-            type="primary"
-            @click="previewFlag = false"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -562,7 +563,7 @@ import PreviewCodeDialog from '@/view/systemTools/autoCode/component/previewCode
 import { toUpperCase, toHump, toSQLLine, toLowerCase } from '@/utils/stringFun'
 import { createTemp, getDB, getTable, getColumn, preview, getMeta, getPackageApi } from '@/api/autoCode'
 import { getDict } from '@/utils/dictionary'
-import { ref, getCurrentInstance, reactive, watch, toRaw } from 'vue'
+import { ref, reactive, watch, toRaw } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import WarningBar from '@/components/warningBar/warningBar.vue'
diff --git a/web/src/view/systemTools/exportTemplate/exportTemplate.vue b/web/src/view/systemTools/exportTemplate/exportTemplate.vue
index 136b9247bd..3b447a81f5 100644
--- a/web/src/view/systemTools/exportTemplate/exportTemplate.vue
+++ b/web/src/view/systemTools/exportTemplate/exportTemplate.vue
@@ -184,167 +184,172 @@
         />
       </div>
     </div>
-    <el-dialog
+    <el-drawer
       v-model="dialogFormVisible"
+      size="60%"
       :before-close="closeDialog"
       :title="type==='create'?'添加':'修改'"
+      :show-close="false"
       destroy-on-close
     >
-      <el-scrollbar height="500px">
-        <el-form
-          ref="elFormRef"
-          :model="formData"
-          label-position="right"
-          :rules="rule"
-          label-width="100px"
-        >
 
-          <el-form-item
-            label="业务库"
-            prop="dbName"
+      <template #title>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{type==='create'?'添加':'修改'}}</span>
+          <div>
+            <el-button @click="closeDialog">取 消</el-button>
+            <el-button
+                type="primary"
+                @click="enterDialog"
+            >确 定</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-form
+        ref="elFormRef"
+        :model="formData"
+        label-position="right"
+        :rules="rule"
+        label-width="100px"
+      >
+
+        <el-form-item
+          label="业务库"
+          prop="dbName"
+        >
+          <template #label>
+            <el-tooltip
+              content="注：需要提前到db-list自行配置多数据库，如未配置需配置后重启服务方可使用。若无法选择，请到config.yaml中设置disabled:false，选择导入导出的目标库。"
+              placement="bottom"
+              effect="light"
+            >
+              <div> 业务库 <el-icon><QuestionFilled /></el-icon> </div>
+            </el-tooltip>
+          </template>
+          <el-select
+            v-model="formData.dbName"
+            clearable
+            placeholder="选择业务库"
           >
-            <template #label>
-              <el-tooltip
-                content="注：需要提前到db-list自行配置多数据库，如未配置需配置后重启服务方可使用。若无法选择，请到config.yaml中设置disabled:false，选择导入导出的目标库。"
-                placement="bottom"
-                effect="light"
-              >
-                <div> 业务库 <el-icon><QuestionFilled /></el-icon> </div>
-              </el-tooltip>
-            </template>
-            <el-select
-              v-model="formData.dbName"
-              clearable
-              placeholder="选择业务库"
+            <el-option
+              v-for="item in dbList"
+              :key="item.aliasName"
+              :value="item.aliasName"
+              :label="item.aliasName"
+              :disabled="item.disable"
             >
-              <el-option
-                v-for="item in dbList"
-                :key="item.aliasName"
-                :value="item.aliasName"
-                :label="item.aliasName"
-                :disabled="item.disable"
-              >
-                <div>
-                  <span>{{ item.aliasName }}</span>
-                  <span style="float:right;color:#8492a6;font-size:13px">{{ item.dbName }}</span>
-                </div>
-              </el-option>
-            </el-select>
-          </el-form-item>
+              <div>
+                <span>{{ item.aliasName }}</span>
+                <span style="float:right;color:#8492a6;font-size:13px">{{ item.dbName }}</span>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
 
-          <el-form-item
-            label="模板名称:"
-            prop="name"
-          >
-            <el-input
-              v-model="formData.name"
-              :clearable="true"
-              placeholder="请输入模板名称"
-            />
-          </el-form-item>
-          <el-form-item
-            label="表名称:"
-            prop="tableName"
-          >
-            <el-input
-              v-model="formData.tableName"
-              :clearable="true"
-              placeholder="请输入要导出的表名称"
-            />
-          </el-form-item>
-          <el-form-item
-            label="模板标识:"
-            prop="templateID"
-          >
-            <el-input
-              v-model="formData.templateID"
-              :clearable="true"
-              placeholder="模板标识为前端组件需要挂在的标识属性"
-            />
-          </el-form-item>
-          <el-form-item
-            label="模板信息:"
-            prop="templateInfo"
+        <el-form-item
+          label="模板名称:"
+          prop="name"
+        >
+          <el-input
+            v-model="formData.name"
+            :clearable="true"
+            placeholder="请输入模板名称"
+          />
+        </el-form-item>
+        <el-form-item
+          label="表名称:"
+          prop="tableName"
+        >
+          <el-input
+            v-model="formData.tableName"
+            :clearable="true"
+            placeholder="请输入要导出的表名称"
+          />
+        </el-form-item>
+        <el-form-item
+          label="模板标识:"
+          prop="templateID"
+        >
+          <el-input
+            v-model="formData.templateID"
+            :clearable="true"
+            placeholder="模板标识为前端组件需要挂在的标识属性"
+          />
+        </el-form-item>
+        <el-form-item
+          label="模板信息:"
+          prop="templateInfo"
+        >
+          <el-input
+            v-model="formData.templateInfo"
+            type="textarea"
+            :rows="12"
+            :clearable="true"
+            :placeholder="templatePlaceholder"
+          />
+        </el-form-item>
+        <el-form-item
+          label="默认导出条数:"
+        >
+          <el-input-number
+            v-model="formData.limit"
+            :step="1"
+            :step-strictly="true"
+            :precision="0"
+          />
+        </el-form-item>
+        <el-form-item
+          label="默认排序条件:"
+        >
+          <el-input
+            v-model="formData.order"
+            placeholder="例:id desc"
+          />
+        </el-form-item>
+        <el-form-item
+          label="导出条件:"
+        >
+          <div
+            v-for="(condition,key) in formData.conditions"
+            :key="key"
+            class="flex gap-4 w-full mb-2"
           >
             <el-input
-              v-model="formData.templateInfo"
-              type="textarea"
-              :rows="12"
-              :clearable="true"
-              :placeholder="templatePlaceholder"
+              v-model="condition.from"
+              placeholder="需要从查询条件取的json key"
             />
-          </el-form-item>
-          <el-form-item
-            label="默认导出条数:"
-          >
-            <el-input-number
-              v-model="formData.limit"
-              :step="1"
-              :step-strictly="true"
-              :precision="0"
-            />
-          </el-form-item>
-          <el-form-item
-            label="默认排序条件:"
-          >
             <el-input
-              v-model="formData.order"
-              placeholder="例:id desc"
+              v-model="condition.column"
+              placeholder="表对应的column"
             />
-          </el-form-item>
-          <el-form-item
-            label="导出条件:"
-          >
-            <div
-              v-for="(condition,key) in formData.conditions"
-              :key="key"
-              class="flex gap-4 w-full mb-2"
+            <el-select
+              v-model="condition.operator"
+              placeholder="请选择查询条件"
             >
-              <el-input
-                v-model="condition.from"
-                placeholder="需要从查询条件取的json key"
-              />
-              <el-input
-                v-model="condition.column"
-                placeholder="表对应的column"
+              <el-option
+                v-for="item in typeSearchOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               />
-              <el-select
-                v-model="condition.operator"
-                placeholder="请选择查询条件"
-              >
-                <el-option
-                  v-for="item in typeSearchOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-              <el-button
-                type="danger"
-                icon="delete"
-                @click="() => formData.conditions.splice(key, 1)"
-              >删除</el-button>
-            </div>
-            <div class="flex justify-end w-full">
-              <el-button
-                type="primary"
-                icon="plus"
-                @click="addCondition"
-              >添加条件</el-button>
-            </div>
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="closeDialog">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="enterDialog"
-          >确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+            </el-select>
+            <el-button
+              type="danger"
+              icon="delete"
+              @click="() => formData.conditions.splice(key, 1)"
+            >删除</el-button>
+          </div>
+          <div class="flex justify-end w-full">
+            <el-button
+              type="primary"
+              icon="plus"
+              @click="addCondition"
+            >添加条件</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
   </div>
 </template>