fixed:#1692 统一前端操作模式

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>

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'