From 0b450aafa2b45dce239e7758aa0b2f8e607c54ef Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 8 Apr 2025 12:15:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   1 +
 apps/web-antd/src/views/infra/codegen/data.ts |  13 --
 .../src/views/infra/codegen/index.vue         |  17 +-
 .../infra/codegen/modules/preview-code.vue    | 177 +++++++++++++-----
 4 files changed, 140 insertions(+), 68 deletions(-)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 26f6e8d54..c7d737379 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -43,6 +43,7 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "highlight.js": "^11.11.1",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-codemirror": "^6.1.1",
diff --git a/apps/web-antd/src/views/infra/codegen/data.ts b/apps/web-antd/src/views/infra/codegen/data.ts
index ed02c4720..7161281f1 100644
--- a/apps/web-antd/src/views/infra/codegen/data.ts
+++ b/apps/web-antd/src/views/infra/codegen/data.ts
@@ -46,19 +46,6 @@ export function useImportTableFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 预览代码模态框 */
-export function usePreviewFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'content',
-      component: 'Textarea',
-      componentProps: {
-        readonly: true,
-      },
-    },
-  ];
-}
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-antd/src/views/infra/codegen/index.vue b/apps/web-antd/src/views/infra/codegen/index.vue
index 917618f50..44d8d74aa 100644
--- a/apps/web-antd/src/views/infra/codegen/index.vue
+++ b/apps/web-antd/src/views/infra/codegen/index.vue
@@ -5,8 +5,8 @@ import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
 
 import { DocAlert } from '#/components/doc-alert';
 // import ImportTable from './modules/import-table.vue';
-// import PreviewCode from './modules/preview-code.vue';
-import { Page } from '@vben/common-ui';
+import PreviewCode from './modules/preview-code.vue';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 import { Button, message } from 'ant-design-vue';
 
@@ -28,10 +28,11 @@ const dataSourceConfigList = ref<InfraDataSourceConfigApi.InfraDataSourceConfig[
 //   destroyOnClose: true,
 // });
 //
-// const [PreviewModal, previewModalApi] = useVbenModal({
-//   connectedComponent: PreviewCode,
-//   destroyOnClose: true,
-// });
+
+const [PreviewModal, previewModalApi] = useVbenModal({
+  connectedComponent: PreviewCode,
+  destroyOnClose: true,
+});
 
 /** 刷新表格 */
 function onRefresh() {
@@ -45,7 +46,7 @@ function onImport() {
 
 /** 预览代码 */
 function onPreview(row: InfraCodegenApi.CodegenTable) {
-  // previewModalApi.setData(row.id).open();
+  previewModalApi.setData(row).open();
 }
 
 /** 编辑表格 */
@@ -191,7 +192,7 @@ initDataSourceConfig();
     <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
 
     <!--    <ImportModal @success="onRefresh" />-->
-    <!--    <PreviewModal />-->
+    <PreviewModal />
     <Grid table-title="代码生成列表">
       <template #toolbar-tools>
         <Button type="primary" @click="onImport" v-access:code="['infra:codegen:create']">
diff --git a/apps/web-antd/src/views/infra/codegen/modules/preview-code.vue b/apps/web-antd/src/views/infra/codegen/modules/preview-code.vue
index ff3b1df4d..ea5d58836 100644
--- a/apps/web-antd/src/views/infra/codegen/modules/preview-code.vue
+++ b/apps/web-antd/src/views/infra/codegen/modules/preview-code.vue
@@ -2,12 +2,11 @@
 import type { InfraCodegenApi } from '#/api/infra/codegen';
 
 import { useVbenModal } from '@vben/common-ui';
-import { CopyOutlined } from '@vben/icons';
-import { message, Tree } from 'ant-design-vue';
+import { Copy } from '@vben/icons';
+import { Button, message, Tree } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
 import { previewCodegen } from '#/api/infra/codegen';
-import { ref } from 'vue';
+import { computed, h, ref } from 'vue';
 
 import { useClipboard } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
@@ -17,10 +16,7 @@ import sql from 'highlight.js/lib/languages/sql';
 import typescript from 'highlight.js/lib/languages/typescript';
 import xml from 'highlight.js/lib/languages/xml';
 
-import { usePreviewFormSchema } from '../data';
-
-import 'highlight.js/styles/github.css';
-
+/** 注册代码高亮语言 */
 hljs.registerLanguage('java', java);
 hljs.registerLanguage('xml', xml);
 hljs.registerLanguage('html', xml);
@@ -29,7 +25,7 @@ hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('sql', sql);
 hljs.registerLanguage('typescript', typescript);
 
-// 文件树类型
+/** 文件树类型 */
 interface FileNode {
   key: string;
   title: string;
@@ -38,27 +34,30 @@ interface FileNode {
   children?: FileNode[];
 }
 
+/** 组件状态 */
 const loading = ref(false);
 const fileTree = ref<FileNode[]>([]);
 const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
 const activeKey = ref<string>('');
 const highlightedCode = ref<string>('');
 
-// 表单实例
-const [Form, formApi] = useVbenForm({
-  schema: usePreviewFormSchema(),
-  showActionButtonGroup: false,
+/** 当前活动文件的语言 */
+const activeLanguage = computed(() => {
+  return activeKey.value.split('.').pop() || '';
 });
 
-// 复制代码
+/** 复制代码 */
 const copyCode = async () => {
   const { copy } = useClipboard();
-  await copy(highlightedCode.value);
-  message.success('复制成功');
+  const file = previewFiles.value.find((item) => item.filePath === activeKey.value);
+  if (file) {
+    await copy(file.code);
+    message.success('复制成功');
+  }
 };
 
-// 文件节点点击事件
-const handleNodeClick = (selectedKeys: string[], e: any) => {
+/** 文件节点点击事件 */
+const handleNodeClick = (_: any[], e: any) => {
   if (e.node.isLeaf) {
     activeKey.value = e.node.key;
     const file = previewFiles.value.find((item) => item.filePath === activeKey.value);
@@ -69,12 +68,11 @@ const handleNodeClick = (selectedKeys: string[], e: any) => {
       } catch {
         highlightedCode.value = file.code;
       }
-      formApi.setFieldValue('content', file.code);
     }
   }
 };
 
-// 处理文件树
+/** 处理文件树 */
 const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
   const exists: Record<string, boolean> = {};
   const files: FileNode[] = [];
@@ -97,7 +95,7 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
         let packagePath = '';
         i++;
         while (i < paths.length) {
-          const nextPath = paths[i];
+          const nextPath = paths[i] || '';
           if (['controller', 'convert', 'dal', 'dataobject', 'enums', 'mysql', 'service', 'vo'].includes(nextPath)) {
             break;
           }
@@ -118,7 +116,7 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
     // 构建文件树
     for (let i = 0; i < newPaths.length; i++) {
       const oldFullPath = fullPath;
-      fullPath = fullPath.length === 0 ? newPaths[i] : `${fullPath.replaceAll('.', '/')}/${newPaths[i]}`;
+      fullPath = fullPath.length === 0 ? newPaths[i] || '' : `${fullPath.replaceAll('.', '/')}/${newPaths[i]}`;
 
       if (exists[fullPath]) {
         continue;
@@ -127,14 +125,14 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
       exists[fullPath] = true;
       files.push({
         key: fullPath,
-        title: newPaths[i],
+        title: newPaths[i] || '',
         parentKey: oldFullPath || '/',
         isLeaf: i === newPaths.length - 1,
       });
     }
   }
 
-  // 构建树形结构
+  /** 构建树形结构 */
   const buildTree = (parentKey: string): FileNode[] => {
     return files
       .filter((file) => file.parentKey === parentKey)
@@ -147,9 +145,10 @@ const handleFiles = (data: InfraCodegenApi.CodegenPreview[]): FileNode[] => {
   return buildTree('/');
 };
 
-// 模态框实例
+/** 模态框实例 */
 const [Modal, modalApi] = useVbenModal({
   footer: false,
+  class: 'w-3/5',
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       previewFiles.value = [];
@@ -159,27 +158,26 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
-    // 获取表ID
-    const id = modalApi.getData<number>();
-    if (!id) return;
+    const row = modalApi.getData<InfraCodegenApi.CodegenTable>();
+    if (!row) return;
 
     // 加载预览数据
     loading.value = true;
     try {
-      const data = await previewCodegen(id);
+      const data = await previewCodegen(row.id);
       previewFiles.value = data;
       fileTree.value = handleFiles(data);
 
       // 默认选中第一个文件
       if (data.length > 0) {
-        activeKey.value = data[0].filePath;
-        const lang = data[0].filePath.split('.').pop() || '';
+        activeKey.value = data[0]?.filePath || '';
+        const lang = activeKey.value.split('.').pop() || '';
+        const code = data[0]?.code || '';
         try {
-          highlightedCode.value = hljs.highlight(data[0].code, { language: lang }).value;
+          highlightedCode.value = hljs.highlight(code, { language: lang }).value;
         } catch {
-          highlightedCode.value = data[0].code;
+          highlightedCode.value = code;
         }
-        formApi.setFieldValue('content', data[0].code);
       }
     } finally {
       loading.value = false;
@@ -190,22 +188,23 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal title="代码预览">
-    <div class="flex h-[70vh]" v-loading="loading">
+    <div class="h-1/1 flex" v-loading="loading">
       <!-- 文件树 -->
-      <div class="w-1/3 border-r pr-4">
+      <div class="w-1/3 border-r border-gray-200 pr-4 dark:border-gray-700">
         <Tree :selected-keys="[activeKey]" :tree-data="fileTree" @select="handleNodeClick" />
       </div>
       <!-- 代码预览 -->
       <div class="w-2/3 pl-4">
         <div class="mb-2 flex justify-between">
-          <div class="text-lg font-medium">{{ activeKey.split('/').pop() }}</div>
-          <a-button type="primary" @click="copyCode">
-            <CopyOutlined class="mr-1" />
-            复制代码
-          </a-button>
+          <div class="text-lg font-medium dark:text-gray-200">
+            {{ activeKey.split('/').pop() }}
+            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">({{ activeLanguage }})</span>
+          </div>
+          <Button type="primary" ghost @click="copyCode" :icon="h(Copy)"> 复制代码 </Button>
         </div>
         <div class="h-[calc(100%-40px)] overflow-auto">
-          <pre><code v-html="highlightedCode" class="hljs"></code></pre>
+          <pre class="overflow-auto rounded-md bg-gray-50 p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
+            <code v-html="highlightedCode" class="code-highlight"></code></pre>
         </div>
       </div>
     </div>
@@ -213,10 +212,94 @@ const [Modal, modalApi] = useVbenModal({
 </template>
 
 <style scoped>
-.hljs {
-  padding: 16px;
-  overflow: auto;
-  background-color: #f8f8f8;
-  border-radius: 4px;
+/* 代码高亮样式 - 支持暗黑模式 */
+:deep(.code-highlight) {
+  background: transparent;
+}
+
+/* 关键字 */
+:deep(.hljs-keyword) {
+  @apply text-purple-600 dark:text-purple-400;
+}
+
+/* 字符串 */
+:deep(.hljs-string) {
+  @apply text-green-600 dark:text-green-400;
+}
+
+/* 注释 */
+:deep(.hljs-comment) {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+/* 函数 */
+:deep(.hljs-function) {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* 数字 */
+:deep(.hljs-number) {
+  @apply text-orange-600 dark:text-orange-400;
+}
+
+/* 类 */
+:deep(.hljs-class) {
+  @apply text-yellow-600 dark:text-yellow-400;
+}
+
+/* 标题/函数名 */
+:deep(.hljs-title) {
+  @apply font-bold text-blue-600 dark:text-blue-400;
+}
+
+/* 参数 */
+:deep(.hljs-params) {
+  @apply text-gray-700 dark:text-gray-300;
+}
+
+/* 内置对象 */
+:deep(.hljs-built_in) {
+  @apply text-teal-600 dark:text-teal-400;
+}
+
+/* HTML标签 */
+:deep(.hljs-tag) {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* 属性 */
+:deep(.hljs-attribute),
+:deep(.hljs-attr) {
+  @apply text-green-600 dark:text-green-400;
+}
+
+/* 字面量 */
+:deep(.hljs-literal) {
+  @apply text-purple-600 dark:text-purple-400;
+}
+
+/* 元信息 */
+:deep(.hljs-meta) {
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+/* 选择器标签 */
+:deep(.hljs-selector-tag) {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* XML/HTML名称 */
+:deep(.hljs-name) {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+/* 变量 */
+:deep(.hljs-variable) {
+  @apply text-orange-600 dark:text-orange-400;
+}
+
+/* 属性 */
+:deep(.hljs-property) {
+  @apply text-red-600 dark:text-red-400;
 }
 </style>