refactor: 优化代码生成相关页面

package.json

@@ -18,6 +18,7 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-vue": "^0.1.2",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@ddietr/codemirror-themes": "^1.4.2",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",
     "@wangeditor/editor": "^5.1.1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   '@codemirror/theme-one-dark':
     specifier: ^6.1.2
     version: 6.1.2
+  '@ddietr/codemirror-themes':
+    specifier: ^1.4.2
+    version: 1.4.2
   '@vueuse/components':
     specifier: ^10.5.0
     version: 10.9.0(vue@3.4.21)
@@ -855,6 +858,15 @@ packages:
       w3c-keyname: 2.2.8
     dev: false
 
+  /@ddietr/codemirror-themes@1.4.2:
+    resolution: {integrity: sha512-8U3H3lmtmSWLD5VRlt7jf2HW62URnwgPxjZZDYjBX5EtMpgZ2QnqiIYrNzdQPPjJngT9D43gls3+JlekCBmrfw==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.26.0
+      '@lezer/highlight': 1.2.0
+    dev: false
+
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}

src/components/GiCodeView/index.vue

@@ -13,24 +13,22 @@
 import CodeMirror from 'vue-codemirror6'
 import { javascript } from '@codemirror/lang-javascript'
 import { vue } from '@codemirror/lang-vue'
+import { githubLight } from '@ddietr/codemirror-themes/github-light'
 import { oneDark } from '@codemirror/theme-one-dark'
+import { useAppStore } from '@/stores'
+
+const appStore = useAppStore()
+const isDark = computed(() => appStore.theme === 'dark')
 
 interface Props {
   type?: 'javascript' | 'vue'
   codeJson: string
 }
-
 const props = withDefaults(defineProps<Props>(), {
   type: 'javascript',
   codeJson: ''
 })
 
-const visible = ref(false)
-const open = () => {
-  visible.value = true
-}
-defineExpose({ open })
-
 const defaultConfig = {
   tabSize: 2,
   basic: true,
@@ -40,8 +38,14 @@ const defaultConfig = {
 const config = defaultConfig
 
 const codeValue = computed(() => props.codeJson)
+const visible = ref(false)
+// 打开
+const open = () => {
+  visible.value = true
+}
+
 const extensions = computed(() => {
-  const arr = [oneDark]
+  const arr = [isDark.value ? oneDark : githubLight]
   if (props.type === 'javascript') {
     arr.push(javascript())
   }
@@ -50,6 +54,8 @@ const extensions = computed(() => {
   }
   return arr
 })
+
+defineExpose({ open })
 </script>
 
 <style lang="scss" scoped>

src/components/GiOptionItem/index.vue

@@ -6,7 +6,7 @@
   >
     <div class="gi-option-item__wrapper">
       <span class="gi-option-item__icon">
-        <slot name="icon">
+        <slot v-if="props.icon" name="icon">
           <GiSvgIcon :name="props.icon"></GiSvgIcon>
         </slot>
       </span>

src/views/system/file/main/FileMain/FileRightMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <GiOption :class="{ shadow: props.shadow }">
-    <GiOptionItem label="重命名" icon="menu-edit" @click="onClickItem('rename')"> </GiOptionItem>
-    <GiOptionItem label="详情" icon="menu-detail" @click="onClickItem('detail')"> </GiOptionItem>
-    <GiOptionItem label="下载" icon="menu-download" @click="onClickItem('download')"></GiOptionItem>
-    <GiOptionItem label="删除" icon="menu-delete" @click="onClickItem('delete')"> </GiOptionItem>
+    <GiOptionItem label="重命名" @click="onClickItem('rename')"> </GiOptionItem>
+    <GiOptionItem label="详情" @click="onClickItem('detail')"> </GiOptionItem>
+    <GiOptionItem label="下载" @click="onClickItem('download')"></GiOptionItem>
+    <GiOptionItem label="删除" @click="onClickItem('delete')"> </GiOptionItem>
   </GiOption>
 </template>
 

src/views/system/storage/index.vue

@@ -104,7 +104,7 @@ const columns: TableInstanceColumns[] = [
     title: '操作',
     slotName: 'action',
     width: 130,
-    show: has.hasPermOr(['system:storage:update', 'system:storage:delete']),
+    3
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined
   }

src/views/tool/generator/GenConfigDrawer.vue

@@ -4,107 +4,109 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    :width="width >= 1000 ? 1000 : '100%'"
+    :width="width >= 1050 ? 1050 : '100%'"
     @before-ok="save"
     @close="reset"
   >
-    <a-card title="字段配置" class="field-config">
-      <template #extra>
-        <a-popconfirm
-          content="是否确定同步最新数据表结构？同步后只要不点击确定保存，则不影响原有配置数据。"
-          type="warning"
-          @ok="handleRefresh(form.tableName)"
+    <a-tabs>
+      <a-tab-pane key="1" title="生成配置">
+        <a-form ref="formRef" :model="form" :rules="rules" class="gen-config" size="large">
+          <a-form-item label="作者名称" field="author">
+            <a-input v-model="form.author" placeholder="请输入作者名称" />
+          </a-form-item>
+          <a-form-item label="业务名称" field="businessName">
+            <a-input v-model="form.businessName" placeholder="自定义业务名称，例如：用户" />
+          </a-form-item>
+          <a-form-item label="所属模块" field="moduleName">
+            <a-input v-model="form.moduleName" placeholder="项目模块名称，例如：continew-admin-system" />
+          </a-form-item>
+          <a-form-item label="模块包名" field="packageName">
+            <a-input v-model="form.packageName" placeholder="项目模块包名，例如：top.charles7c.continew.admin.system" />
+          </a-form-item>
+          <a-form-item label="去表前缀" field="tablePrefix">
+            <a-input v-model="form.tablePrefix" placeholder="数据库表前缀，例如：sys_" />
+          </a-form-item>
+          <a-form-item label="是否覆盖" field="isOverride">
+            <a-radio-group v-model="form.isOverride" type="button">
+              <a-radio :value="true">是</a-radio>
+              <a-radio :value="false">否</a-radio>
+            </a-radio-group>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
+      <a-tab-pane key="2" title="字段配置">
+        <GiTable
+          row-key="tableName"
+          :data="dataList"
+          :columns="columns"
+          :loading="loading"
+          :scroll="{ x: '100%', y: 800, minWidth: 900 }"
+          :pagination="false"
+          :disabledTools="['setting', 'refresh']"
+          :disabledColumnKeys="['tableName']"
         >
-          <a-tooltip content="同步最新数据表结构">
-            <a-button
-              type="primary"
-              status="success"
-              size="small"
-              title="同步"
-              :disabled="dataList.length !== 0 && dataList[0].createTime === null"
+          <template #custom-left>
+            <a-popconfirm
+              content="是否确定同步最新数据表结构？同步后只要不点击确定保存，则不影响原有配置数据。"
+              type="warning"
+              @ok="handleRefresh(form.tableName)"
             >
-              <template #icon><icon-sync /></template>同步
-            </a-button>
-          </a-tooltip>
-        </a-popconfirm>
-      </template>
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ y: 400 }"
-        :pagination="false"
-        :disabledTools="['setting', 'refresh']"
-        :disabledColumnKeys="['tableName']"
-      >
-        <template #fieldType="{ record }">
-          <span v-if="record.fieldType">{{ record.fieldType }}</span>
-          <a-tooltip v-else content="请检查 generator.properties 配置">
-            <icon-exclamation-circle-fill size="large" style="color: #f53f3f" />
-          </a-tooltip>
-        </template>
-        <template #comment="{ record }">
-          <a-input v-model="record.comment" />
-        </template>
-        <template #showInList="{ record }">
-          <a-checkbox v-model="record.showInList" value="true" />
-        </template>
-        <template #showInForm="{ record }">
-          <a-checkbox v-model="record.showInForm" value="true" />
-        </template>
-        <template #isRequired="{ record }">
-          <a-checkbox v-if="record.showInForm" v-model="record.isRequired" value="true" />
-          <a-checkbox v-else disabled />
-        </template>
-        <template #showInQuery="{ record }">
-          <a-checkbox v-model="record.showInQuery" value="true" />
-        </template>
-        <template #formType="{ record }">
-          <a-select
-            v-if="record.showInForm || record.showInQuery"
-            v-model="record.formType"
-            :options="form_type_enum"
-            placeholder="请选择表单类型"
-          />
-          <span v-else>无需设置</span>
-        </template>
-        <template #queryType="{ record }">
-          <a-select
-            v-if="record.showInQuery"
-            v-model="record.queryType"
-            :options="query_type_enum"
-            placeholder="请选择查询方式"
-          />
-          <span v-else>无需设置</span>
-        </template>
-      </GiTable>
-    </a-card>
-    <a-card title="生成配置" style="margin-top: 10px">
-      <a-form ref="formRef" :model="form" :rules="rules" class="gen-config" size="large">
-        <a-form-item label="作者名称" field="author">
-          <a-input v-model="form.author" placeholder="请输入作者名称" />
-        </a-form-item>
-        <a-form-item label="业务名称" field="businessName">
-          <a-input v-model="form.businessName" placeholder="自定义业务名称，例如：用户" />
-        </a-form-item>
-        <a-form-item label="所属模块" field="moduleName">
-          <a-input v-model="form.moduleName" placeholder="项目模块名称，例如：continew-admin-system" />
-        </a-form-item>
-        <a-form-item label="模块包名" field="packageName">
-          <a-input v-model="form.packageName" placeholder="项目模块包名，例如：top.charles7c.continew.admin.system" />
-        </a-form-item>
-        <a-form-item label="去表前缀" field="tablePrefix">
-          <a-input v-model="form.tablePrefix" placeholder="数据库表前缀，例如：sys_" />
-        </a-form-item>
-        <a-form-item label="是否覆盖" field="isOverride">
-          <a-radio-group v-model="form.isOverride" type="button">
-            <a-radio :value="true">是</a-radio>
-            <a-radio :value="false">否</a-radio>
-          </a-radio-group>
-        </a-form-item>
-      </a-form>
-    </a-card>
+              <a-tooltip content="同步最新数据表结构">
+                <a-button
+                  type="primary"
+                  status="success"
+                  size="small"
+                  title="同步"
+                  :disabled="dataList.length !== 0 && dataList[0].createTime === null"
+                >
+                  <template #icon><icon-sync /></template>同步
+                </a-button>
+              </a-tooltip>
+            </a-popconfirm>
+          </template>
+          <template #fieldType="{ record }">
+            <span v-if="record.fieldType">{{ record.fieldType }}</span>
+            <a-tooltip v-else content="请检查 generator.properties 配置">
+              <icon-exclamation-circle-fill size="large" style="color: #f53f3f" />
+            </a-tooltip>
+          </template>
+          <template #comment="{ record }">
+            <a-input v-model="record.comment" />
+          </template>
+          <template #showInList="{ record }">
+            <a-checkbox v-model="record.showInList" value="true" />
+          </template>
+          <template #showInForm="{ record }">
+            <a-checkbox v-model="record.showInForm" value="true" />
+          </template>
+          <template #isRequired="{ record }">
+            <a-checkbox v-if="record.showInForm" v-model="record.isRequired" value="true" />
+            <a-checkbox v-else disabled />
+          </template>
+          <template #showInQuery="{ record }">
+            <a-checkbox v-model="record.showInQuery" value="true" />
+          </template>
+          <template #formType="{ record }">
+            <a-select
+              v-if="record.showInForm || record.showInQuery"
+              v-model="record.formType"
+              :options="form_type_enum"
+              placeholder="请选择表单类型"
+            />
+            <span v-else>无需设置</span>
+          </template>
+          <template #queryType="{ record }">
+            <a-select
+              v-if="record.showInQuery"
+              v-model="record.queryType"
+              :options="query_type_enum"
+              placeholder="请选择查询方式"
+            />
+            <span v-else>无需设置</span>
+          </template>
+        </GiTable>
+      </a-tab-pane>
+    </a-tabs>
   </a-drawer>
 </template>
 
@@ -213,11 +215,7 @@ const emit = defineEmits<{
 defineExpose({ onConfig })
 </script>
 
-<style scoped lang="less">
-.field-config :deep(.arco-card-body) {
-  padding: 0;
-}
-
+<style lang="scss" scoped>
 :deep(.gen-config.arco-form) {
   width: 50%;
 }

src/views/tool/generator/GenPreviewModal.vue

@@ -1,5 +1,12 @@
 <template>
-  <a-modal v-model:visible="visible" title="生成预览" :mask-closable="false" :esc-to-close="false" width="90%">
+  <a-modal
+    v-model:visible="visible"
+    title="生成预览"
+    :mask-closable="false"
+    :esc-to-close="false"
+    width="90%"
+    :footer="false"
+  >
     <div>
       <a-scrollbar style="height: 700px; overflow: auto">
         <a-link style="position: absolute; right: 20px; top: 50px; z-index: 999" @click="onCopy">
@@ -13,7 +20,7 @@
             <GiCodeView
               :type="'vue' === item.fileName.split('.')[1] ? 'vue' : 'javascript'"
               :code-json="item.content"
-            ></GiCodeView>
+            />
           </a-tab-pane>
         </a-tabs>
       </a-scrollbar>

src/views/tool/generator/index.vue

@@ -2,7 +2,7 @@
   <div class="gi_page">
     <a-card title="代码生成" class="general-card">
       <GiTable
-        row-key="id"
+        row-key="tableName"
         :data="dataList"
         :columns="columns"
         :loading="loading"
@@ -64,7 +64,7 @@ const columns: TableInstanceColumns[] = [
   { title: '描述', dataIndex: 'comment', tooltip: true },
   { title: '存储引擎', dataIndex: 'engine', align: 'center' },
   { title: '字符集', dataIndex: 'charset' },
-  { title: '创建时间', dataIndex: 'createTime' },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
   { title: '操作', slotName: 'action', width: 180, align: 'center', fixed: !isMobile() ? 'right' : undefined }
 ]