!78 refactor: 代码生成预览优化

Merge pull request !78 from puhui999/v-next

apps/web-antd/src/views/infra/codegen/data.ts

@@ -3,7 +3,6 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 import type { SystemMenuApi } from '#/api/system/menu';
 import type { Recordable } from '@vben/types';
-import type { ComputedRef } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
@@ -388,18 +387,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
+const dataSourceConfigList = await getDataSourceConfigList();
 /** 列表的字段 */
-// TODO @puhui999：getDataSourceConfigName，要不改成 data.ts 加载 list，然后使用。
 export function useGridColumns<T = InfraCodegenApi.CodegenTable>(
   onActionClick: OnActionClickFn<T>,
-  getDataSourceConfigName: ComputedRef<(cellValue: number) => string>,
 ): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'dataSourceConfigId',
       title: '数据源',
       minWidth: 120,
-      formatter: ({ cellValue }) => getDataSourceConfigName.value(cellValue),
+      formatter: ({ cellValue }) => dataSourceConfigList.find((item) => item.id === cellValue)?.name || '',
     },
     {
       field: 'tableName',

apps/web-antd/src/views/infra/codegen/edit/index.vue

@@ -11,6 +11,7 @@ import { getCodegenTable, updateCodegenTable } from '#/api/infra/codegen';
 import { $t } from '#/locales';
 import { ref, unref } from 'vue';
 
+import { useTabs } from '@vben/hooks';
 import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
@@ -72,7 +73,6 @@ const submitForm = async () => {
       content: $t('ui.actionMessage.operationSuccess'),
       key: 'action_process_msg',
     });
-    // TODO @puhui999：保存的时候，修改的 tab 没关闭哈
     close();
   } catch (error) {
     console.error('保存失败', error);
@@ -80,9 +80,10 @@ const submitForm = async () => {
     hideLoading();
   }
 };
-
+const tabs = useTabs();
 /** 返回列表 */
 const close = () => {
+  tabs.closeCurrentTab();
   router.push('/infra/codegen');
 };
 
@@ -137,9 +138,7 @@ getDetail();
       <div class="mt-4 flex justify-end space-x-2">
         <Button v-show="currentStep > 0" @click="prevStep">上一步</Button>
         <Button v-show="currentStep < steps.length - 1" @click="nextStep">下一步</Button>
-        <Button type="primary" :loading="loading" @click="submitForm">
-          保存
-        </Button>
+        <Button type="primary" :loading="loading" @click="submitForm"> 保存 </Button>
       </div>
     </div>
   </Page>

apps/web-antd/src/views/infra/codegen/modules/preview-code.vue

@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-// TODO @puhui999：bug 同一个预览，点击多次，第二次不展示；
-// TODO @puhui999：体验优化：左边的树，默认展开所有节点；这样体验好点哈
-// TODO @puhui999：展示代码时，前两行是空的，可能要看下
-// TODO @puhui999：要不预览代码，默认全屏？
-
 // TODO @芋艿：待定，vben2.0 有 CodeEditor，不确定官方后续会不会迁移！！！
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 
@@ -47,27 +42,30 @@ const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
 const activeKey = ref<string>('');
 
 /** 代码地图 */
-const codeMap = new Map<string, string>();
-const setCodeMode = (key: string, lang: string, code: string) => {
+const codeMap = ref<Map<string, string>>(new Map<string, string>());
+const setCodeMap = (key: string, lang: string, code: string) => {
   // 处理可能的缩进问题，特别是对Java文件
   const trimmedCode = code.trimStart();
-
+  // 如果已有缓存则不重新构建
+  if (codeMap.value.has(key)) {
+    return;
+  }
   try {
     const highlightedCode = hljs.highlight(trimmedCode, {
       language: lang,
     }).value;
-    codeMap.set(key, highlightedCode);
+    codeMap.value.set(key, highlightedCode);
   } catch {
-    codeMap.set(key, trimmedCode);
+    codeMap.value.set(key, trimmedCode);
   }
 };
 const removeCodeMapKey = (targetKey: any) => {
   // 只有一个代码视图时不允许删除
-  if (codeMap.size === 1) {
+  if (codeMap.value.size === 1) {
     return;
   }
-  if (codeMap.has(targetKey)) {
-    codeMap.delete(targetKey);
+  if (codeMap.value.has(targetKey)) {
+    codeMap.value.delete(targetKey);
   }
 };
 
@@ -98,7 +96,7 @@ const handleNodeClick = (_: any[], e: any) => {
   if (!file) return;
 
   const lang = file.filePath.split('.').pop() || '';
-  setCodeMode(activeKey.value, lang, file.code);
+  setCodeMap(activeKey.value, lang, file.code);
 };
 
 /** 处理文件树 */
@@ -179,11 +177,11 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
 /** 模态框实例 */
 const [Modal, modalApi] = useVbenModal({
   footer: false,
-  class: 'w-3/5',
+  fullscreen: true,
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       // 关闭时清除代码视图缓存
-      codeMap.clear();
+      codeMap.value.clear();
       return;
     }
 
@@ -202,7 +200,7 @@ const [Modal, modalApi] = useVbenModal({
         activeKey.value = data[0]?.filePath || '';
         const lang = activeKey.value.split('.').pop() || '';
         const code = data[0]?.code || '';
-        setCodeMode(activeKey.value, lang, code);
+        setCodeMap(activeKey.value, lang, code);
       }
     } finally {
       loading.value = false;
@@ -215,18 +213,22 @@ const [Modal, modalApi] = useVbenModal({
   <Modal title="代码预览">
     <div class="flex h-full" v-loading="loading">
       <!-- 文件树 -->
-      <div class="w-1/3 border-r border-gray-200 pr-4 dark:border-gray-700">
-        <DirectoryTree v-model:active-key="activeKey" @select="handleNodeClick" :tree-data="fileTree" />
+      <div class="h-full w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700">
+        <DirectoryTree
+          v-if="fileTree.length > 0"
+          default-expand-all
+          v-model:active-key="activeKey"
+          @select="handleNodeClick"
+          :tree-data="fileTree"
+        />
       </div>
       <!-- 代码预览 -->
-      <div class="w-2/3 pl-4">
+      <div class="h-full w-2/3 overflow-auto pl-4">
         <Tabs v-model:active-key="activeKey" hide-add type="editable-card" @edit="removeCodeMapKey">
           <Tabs.TabPane v-for="key in codeMap.keys()" :key="key" :tab="key.split('/').pop()">
-            <div class="h-[calc(100%-40px)] overflow-auto">
-              <pre class="overflow-auto rounded-md bg-gray-50 p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
-                  <!-- eslint-disable-next-line vue/no-v-html -->
-                <code v-html="codeMap.get(activeKey)" class="code-highlight"></code>
-              </pre>
+            <div class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <code v-html="codeMap.get(activeKey)" class="code-highlight"></code>
             </div>
           </Tabs.TabPane>
           <template #rightExtra>
@@ -248,13 +250,6 @@ const [Modal, modalApi] = useVbenModal({
   background: transparent;
 }
 
-/* 代码块内容无缩进 */
-:deep(pre) {
-  padding: 1rem;
-  margin: 0;
-  white-space: pre;
-}
-
 /* 关键字 */
 :deep(.hljs-keyword) {
   @apply text-purple-600 dark:text-purple-400;

apps/web-antd/src/views/infra/demo/demo01/data.ts

@@ -52,22 +52,16 @@ export function useFormSchema(): VbenFormSchema[] {
         valueFormat: 'x',
       },
     },
-    // TODO 【富文本】@puhui999：@芋艿：后续要封装下；单独 pr
     {
       fieldName: 'description',
       label: '简介',
       rules: 'required',
-      component: 'Editor',
+      component: 'RichTextarea',
     },
-    // TODO 【文件上传】@puhui999：@芋艿：后续要封装下；单独 pr
     {
       fieldName: 'avatar',
       label: '头像',
-      component: 'FileUpload',
-      componentProps: {
-        fileType: 'image',
-        maxCount: 1,
-      },
+      component: 'ImageUpload',
     },
   ];
 }
@@ -91,6 +85,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
       },
     },
     {

apps/web-antd/src/views/infra/demo/demo01/index.vue

@@ -25,15 +25,9 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 导出表格 */
-async function onExport() {
-  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
-  downloadByData(data, '示例联系人.xls');
-}
-
 /** 创建示例联系人 */
 function onCreate() {
-  formModalApi.setData(null).open();
+  formModalApi.setData({}).open();
 }
 
 /** 编辑示例联系人 */
@@ -60,18 +54,23 @@ async function onDelete(row: Demo01ContactApi.Demo01Contact) {
   }
 }
 
+/** 导出表格 */
+async function onExport() {
+  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
+  downloadByData(data, '示例联系人.xls');
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<Demo01ContactApi.Demo01Contact>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    // TODO @puhui999：edit 放在 delete 前面哈。好理解一点，修改 => 删除
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
   }
 }
 

apps/web-antd/src/views/infra/demo/demo01/modules/form.vue

@@ -47,6 +47,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
 
@@ -55,9 +56,7 @@ const [Modal, modalApi] = useVbenModal({
     if (!data) {
       return;
     }
-
     if (data.id) {
-      // 编辑 TODO @puhui999：1）这里注释，“编辑”去掉；2）data.id 上面的空行去掉；
       modalApi.lock();
       try {
         data = await getDemo01Contact(data.id);