refactor: 代码生成预览优化

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">
+            <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>
-              </pre>
             </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;