!53 修复顶级外链菜单处理逻辑 & 添加 vue-dompurify-html 插件

Merge pull request !53 from chenminjie/dev-v5_cmj

apps/web-antd/package.json

@@ -43,8 +43,10 @@
     "@vueuse/core": "catalog:",
     "ant-design-vue": "catalog:",
     "dayjs": "catalog:",
+    "highlight.js": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
+    "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:"
   }
 }

apps/web-antd/src/api/infra/codegen/index.ts

@@ -280,7 +280,7 @@ export function syncCodegenFromDB(id: number) {
 }
 
 // 预览生成代码
-export function previewCodegen(id: number) {
+export function getPreviewCodegen(id: number) {
   return requestClient.get(`/infra/codegen/preview?tableId=${id}`);
 }
 

apps/web-antd/src/bootstrap.ts

@@ -1,4 +1,5 @@
 import { createApp, watchEffect } from 'vue';
+import VueDomPurifyHTML from 'vue-dompurify-html';
 
 import { registerAccessDirective } from '@vben/access';
 import { preferences } from '@vben/preferences';
@@ -32,6 +33,9 @@ async function bootstrap(namespace: string) {
   // 配置路由及路由守卫
   app.use(router);
 
+  // 安装 vue-dompurify-html 插件
+  app.use(VueDomPurifyHTML);
+
   // 动态更新标题
   watchEffect(() => {
     if (preferences.app.dynamicTitle) {

apps/web-antd/src/router/helper.ts

@@ -14,15 +14,6 @@ function buildMenus(
     // 处理顶级链接菜单
     if (isHttpUrl(menu.path) && menu.parentId === 0) {
       const urlMenu: RouteRecordStringComponent = {
-        component: 'BasicLayout',
-        meta: {
-          icon: menu.icon,
-          title: menu.name,
-        },
-        name: menu.name,
-        path: `/${menu.path}`,
-        children: [
-          {
         component: 'IFrameView',
         meta: {
           hideInMenu: !menu.visible,
@@ -33,8 +24,6 @@ function buildMenus(
         },
         name: menu.name,
         path: `/${menu.path}/index`,
-          },
-        ],
       };
       menus.push(urlMenu);
       return;

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

@@ -13,10 +13,12 @@ export namespace CodegenDefaultData {
   export const tableColumns: VxeGridProps<CodegenApi.CodegenTableRespVO>['columns'] =
     [
       {
+        fixed: 'left',
         type: 'checkbox',
         width: 50,
       },
       {
+        fixed: 'left',
         type: 'seq',
         width: 50,
       },

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

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { CodegenApi } from '#/api/infra/codegen';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Card, Tree, type TreeProps } from 'ant-design-vue';
+import hljs from 'highlight.js'; // 导入代码高亮文件
+import java from 'highlight.js/lib/languages/java';
+import javascript from 'highlight.js/lib/languages/javascript';
+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 { getPreviewCodegen } from '#/api/infra/codegen';
+
+import 'highlight.js/styles/github.css'; // 导入代码高亮样式
+
+defineOptions({ name: 'PreviewCodeModal' });
+
+const fileTreeLoading = ref(false);
+const fileTreeRef = ref();
+
+const tabList = ref([]);
+
+// 预览数据
+const previewData = reactive({
+  fileTree: [] as any[], // 文件树
+  activeName: '', // 激活的文件
+});
+// 文件树选中的节点
+const treeSelectedKeys = ref<string[]>();
+// 文件树展开的节点
+const expandedKeys = ref<string[]>();
+
+// 预览代码
+const previewCodegenDataList = ref<CodegenApi.CodegenPreviewRespVO[]>();
+
+/**
+ * 将路径转换为树形结构
+ * @param data 路径数据
+ * @returns 树形结构
+ */
+const convertPathToTreeData = (
+  data: CodegenApi.CodegenPreviewRespVO[],
+): TreeProps['treeData'] => {
+  const filePaths = data.map((item) => item.filePath);
+  const treeData: TreeProps['treeData'] = [];
+
+  filePaths.forEach((path) => {
+    // 分割路径
+    const parts = path.split('/');
+    let currentNode = treeData;
+
+    parts.forEach((part, index) => {
+      // 查找当前层级是否已存在该节点
+      let node = currentNode.find((n) => n.title === part);
+      // 判断是否为最后一层
+      const isLastLevel = index === parts.length - 1;
+
+      if (!node) {
+        // 创建新节点
+        node = {
+          title: part,
+          key: parts.slice(0, index + 1).join('/'),
+          selectable: isLastLevel,
+          expandable: !isLastLevel,
+          children: [],
+        };
+        currentNode.push(node);
+      }
+
+      // 移动到下一层
+      currentNode = node.children!;
+    });
+  });
+
+  return treeData;
+};
+
+/**
+ * 将文件路径转换为文件名
+ * @param path 文件路径
+ * @returns 文件名
+ */
+const convertPathToFileName = (path: string) => {
+  return path.split('/').pop()!;
+};
+
+/**
+ * 切换文件
+ */
+const handleChangeFile = (key: any) => {
+  previewData.activeName = key;
+  treeSelectedKeys.value = [key];
+  fileTreeRef.value?.scrollTo(key);
+};
+
+/**
+ * tree 节点点击事件
+ */
+const handleTreeSelect = (keys: any) => {
+  handleChangeFile(keys[0]);
+};
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (item: CodegenApi.CodegenPreviewRespVO) => {
+  const language = item.filePath.slice(item.filePath.lastIndexOf('.') + 1);
+  const result = hljs.highlight(item.code, { language, ignoreIllegals: true });
+  return result.value || '&nbsp;';
+};
+
+const [Modal, modalApi] = useVbenModal({
+  title: '预览代码',
+  class: 'w-[90%] h-[90%]',
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  showCancelButton: false,
+  showConfirmButton: false,
+  onOpenChange: async (isOpen) => {
+    if (isOpen) {
+      const sharedData = modalApi.getData();
+      fileTreeLoading.value = true;
+      const res = await getPreviewCodegen(sharedData.id);
+      previewCodegenDataList.value = res;
+      // 生成tab列表
+      tabList.value = res.map((item: CodegenApi.CodegenPreviewRespVO) => ({
+        key: item.filePath,
+        tab: convertPathToFileName(item.filePath),
+      }));
+      // 生成文件树
+      const treeData = convertPathToTreeData(res);
+      previewData.fileTree = treeData ?? [];
+      fileTreeLoading.value = false;
+      // 默认选中第一个文件
+      handleChangeFile(res[0].filePath);
+    }
+  },
+});
+
+/**
+ * 获取预览代码
+ */
+const getPreviewCode = computed(() => {
+  if (!previewData.activeName || !previewCodegenDataList.value) {
+    return '&nbsp;';
+  }
+  const item = previewCodegenDataList.value?.find(
+    (item) => item.filePath === previewData.activeName,
+  ) as CodegenApi.CodegenPreviewRespVO;
+  return highlightedCode(item) || '&nbsp;';
+});
+
+// 初始化
+onMounted(() => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('java', java);
+  hljs.registerLanguage('xml', xml);
+  hljs.registerLanguage('html', xml);
+  hljs.registerLanguage('vue', xml);
+  hljs.registerLanguage('javascript', javascript);
+  hljs.registerLanguage('sql', sql);
+  hljs.registerLanguage('typescript', typescript);
+});
+</script>
+
+<template>
+  <Modal>
+    <div class="flex h-full gap-4 overflow-hidden">
+      <Card
+        :body-style="{ height: 'inherit', padding: '1px 16px' }"
+        :loading="fileTreeLoading"
+        class="h-full w-5/12"
+        title="文件目录"
+      >
+        <div class="h-[calc(100%-58px)] w-full overflow-auto">
+          <Tree
+            v-model:expanded-keys="expandedKeys"
+            v-model:selected-keys="treeSelectedKeys"
+            :tree-data="previewData.fileTree"
+            default-expand-all
+            show-line
+            @select="handleTreeSelect"
+          />
+        </div>
+      </Card>
+      <Card
+        v-model:active-tab-key="previewData.activeName"
+        :body-style="{ height: 'inherit', padding: '1px 16px' }"
+        :tab-list="tabList"
+        class="h-full w-7/12"
+        title="代码预览"
+        @tab-change="handleChangeFile"
+      >
+        <div class="h-[calc(100%-58px)] w-full overflow-auto">
+          <pre>
+            <code v-dompurify-html="getPreviewCode"></code>
+          </pre>
+        </div>
+      </Card>
+    </div>
+  </Modal>
+</template>

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

@@ -16,13 +16,6 @@ import { CodegenDefaultData } from './codegen.data';
 // checked
 const checkedStatus = ref<boolean>(false);
 
-/**
- * 查看详情
- */
-const handleView = (_row: CodegenApi.CodegenTableRespVO) => {
-  // console.log('查看详情', row);
-};
-
 /**
  * 编辑
  */
@@ -96,7 +89,13 @@ const gridOptions = reactive<any>({
   height: 'auto',
   checkboxConfig: {
     reserve: true,
+    highlight: true,
+    // labelField: 'id',
   },
+  rowConfig: {
+    keyField: 'id',
+  },
+  keepSource: true,
   proxyConfig: {
     ajax: {
       query: async ({ page }, params) => {
@@ -138,6 +137,28 @@ const [ImportTableModal, importTableModalApi] = useVbenModal({
     gridApi.reload(formOptions.values);
   },
 });
+
+// 使用预览代码弹窗组件
+const [PreviewCodeModal, previewCodeModalApi] = useVbenModal({
+  connectedComponent: defineAsyncComponent(
+    () => import('./components/preview-code-modal.vue'),
+  ),
+});
+
+/**
+ * 打开导入表弹窗
+ */
+const handleOpenImportTableModal = () => {
+  importTableModalApi.open();
+};
+
+/**
+ * 打开预览代码弹窗
+ */
+const handleOpenPreviewCodeModal = (row: CodegenApi.CodegenTableRespVO) => {
+  previewCodeModalApi.setData(row);
+  previewCodeModalApi.open();
+};
 </script>
 
 <template>
@@ -150,7 +171,7 @@ const [ImportTableModal, importTableModalApi] = useVbenModal({
               type: 'primary',
               label: '导入表',
               icon: IconEnum.ADD,
-              onClick: () => importTableModalApi.open(),
+              onClick: handleOpenImportTableModal,
             },
             {
               label: '批量同步',
@@ -187,7 +208,7 @@ const [ImportTableModal, importTableModalApi] = useVbenModal({
               type: 'link',
               label: '查看',
               icon: 'ant-design:eye-outlined',
-              onClick: handleView.bind(null, row),
+              onClick: handleOpenPreviewCodeModal.bind(null, row),
             },
             {
               type: 'link',
@@ -219,5 +240,6 @@ const [ImportTableModal, importTableModalApi] = useVbenModal({
       </template>
     </Grid>
     <ImportTableModal />
+    <PreviewCodeModal />
   </Page>
 </template>

pnpm-lock.yaml

@@ -279,6 +279,9 @@ catalogs:
     happy-dom:
       specifier: ^15.11.6
       version: 15.11.6
+    highlight.js:
+      specifier: ^11.10.0
+      version: 11.10.0
     html-minifier-terser:
       specifier: ^7.2.0
       version: 7.2.0
@@ -465,6 +468,9 @@ catalogs:
     vitest:
       specifier: ^2.1.6
       version: 2.1.6
+    vue-dompurify-html:
+      specifier: ^5.2.0
+      version: 5.2.0
     vue-eslint-parser:
       specifier: ^9.4.3
       version: 9.4.3
@@ -676,12 +682,18 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.13
+      highlight.js:
+        specifier: 'catalog:'
+        version: 11.10.0
       pinia:
         specifier: 2.2.2
         version: 2.2.2(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
+      vue-dompurify-html:
+        specifier: 'catalog:'
+        version: 5.2.0(vue@3.5.13(typescript@5.7.2))
       vue-router:
         specifier: 'catalog:'
         version: 4.5.0(vue@3.5.13(typescript@5.7.2))
@@ -3645,16 +3657,16 @@ packages:
     resolution: {integrity: sha512-AFbhEo10DP095/45EauinQJ5hJ3rJUmuuqltGguvc3WsvezZN+g8qNHLGWKu60FHQVizMrQY7VJ+zVlBXlQQkQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@11.0.0-beta.1':
+  '@intlify/message-compiler@11.0.0-beta.2':
-    resolution: {integrity: sha512-yMXfN4hg/EeSdtWfmoMrwB9X4TXwkBoZlTIpNydQaW9y0tSJHGnUPRoahtkbsyACCm9leSJINLY4jQ0rK6BK0Q==}
+    resolution: {integrity: sha512-/cJHP1n45Zlf9tbm/hudLrUwXzJZngR9OMTQk32H1S4lBjM2996wzKTHuLbaJJlJZNTTjnfWZUHPb+F6sE6p1Q==}
     engines: {node: '>= 16'}
 
   '@intlify/shared@10.0.4':
     resolution: {integrity: sha512-ukFn0I01HsSgr3VYhYcvkTCLS7rGa0gw4A4AMpcy/A9xx/zRJy7PS2BElMXLwUazVFMAr5zuiTk3MQeoeGXaJg==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@11.0.0-beta.1':
+  '@intlify/shared@11.0.0-beta.2':
-    resolution: {integrity: sha512-Md/4T/QOx7wZ7zqVzSsMx2M/9Mx/1nsgsjXS5SFIowFKydqUhMz7K+y7pMFh781aNYz+rGXYwad8E9/+InK9SA==}
+    resolution: {integrity: sha512-N6ngJfFaVA0l2iLtx/SymgHOBW4wiS5Pyue7YmY/G+mrGjesi+S+U+u/Xlv6pZa/YIBfeM4QB07lI7rz1YqKLg==}
     engines: {node: '>= 16'}
 
   '@intlify/unplugin-vue-i18n@6.0.0':
@@ -5774,6 +5786,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.1:
+    resolution: {integrity: sha512-NBHEsc0/kzRYQd+AY6HR6B/IgsqzBABrqJbpCDQII/OK6h7B7LXzweZTDsqSW2LkTRpoxf18YUP+YjGySk6B3w==}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
@@ -9992,6 +10007,11 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-dompurify-html@5.2.0:
+    resolution: {integrity: sha512-GX+BStkKEJ8wu/+hU1EK2nu/gzXWhb4XzBu6aowpsuU/3nkvXvZ2jx4nZ9M3jtS/Vu7J7MtFXjc7x3cWQ+zbVQ==}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -12262,8 +12282,8 @@ snapshots:
 
   '@intlify/bundle-utils@10.0.0(vue-i18n@10.0.4(vue@3.5.13(typescript@5.7.2)))':
     dependencies:
-      '@intlify/message-compiler': 11.0.0-beta.1
+      '@intlify/message-compiler': 11.0.0-beta.2
-      '@intlify/shared': 11.0.0-beta.1
+      '@intlify/shared': 11.0.0-beta.2
       acorn: 8.14.0
       escodegen: 2.1.0
       estree-walker: 2.0.2
@@ -12284,14 +12304,14 @@ snapshots:
       '@intlify/shared': 10.0.4
       source-map-js: 1.2.1
 
-  '@intlify/message-compiler@11.0.0-beta.1':
+  '@intlify/message-compiler@11.0.0-beta.2':
     dependencies:
-      '@intlify/shared': 11.0.0-beta.1
+      '@intlify/shared': 11.0.0-beta.2
       source-map-js: 1.2.1
 
   '@intlify/shared@10.0.4': {}
 
-  '@intlify/shared@11.0.0-beta.1': {}
+  '@intlify/shared@11.0.0-beta.2': {}
 
   '@intlify/unplugin-vue-i18n@6.0.0(@vue/compiler-dom@3.5.13)(eslint@9.15.0(jiti@2.4.0))(rollup@4.27.4)(typescript@5.7.2)(vue-i18n@10.0.4(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
@@ -14825,6 +14845,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.1:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
@@ -19485,6 +19509,11 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.7.2)
 
+  vue-dompurify-html@5.2.0(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      dompurify: 3.2.1
+      vue: 3.5.13(typescript@5.7.2)
+
   vue-eslint-parser@9.4.3(eslint@9.15.0(jiti@2.4.0)):
     dependencies:
       debug: 4.3.7(supports-color@9.4.0)

pnpm-workspace.yaml

@@ -108,6 +108,7 @@ catalog:
   globals: ^15.12.0
   h3: ^1.13.0
   happy-dom: ^15.11.6
+  highlight.js: ^11.10.0
   html-minifier-terser: ^7.2.0
   husky: ^9.1.7
   is-ci: ^3.0.1
@@ -172,6 +173,7 @@ catalog:
   vitepress-plugin-group-icons: ^1.3.0
   vitest: ^2.1.6
   vue: ^3.5.13
+  vue-dompurify-html: ^5.2.0
   vue-eslint-parser: ^9.4.3
   vue-i18n: ^10.0.4
   vue-router: ^4.5.0