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

Merge pull request !53 from chenminjie/dev-v5_cmj
2024-11-29 09:55:51 +00:00 · 2024-11-29 09:55:51 +00:00 · 2a90fc1ae4
parent a0131fa8a8 8197f4dfc3
commit 2a90fc1ae4
9 changed files with 291 additions and 35 deletions
--- a/apps/web-antd/package.json
+++ b/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:"
  }
 }
--- a/apps/web-antd/src/api/infra/codegen/index.ts
+++ b/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}`);
 }

--- a/apps/web-antd/src/bootstrap.ts
+++ b/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) {
--- a/apps/web-antd/src/router/helper.ts
+++ b/apps/web-antd/src/router/helper.ts
@ -14,27 +14,16 @@ function buildMenus(
    // 处理顶级链接菜单
    if (isHttpUrl(menu.path) && menu.parentId === 0) {
      const urlMenu: RouteRecordStringComponent = {
-        component: 'BasicLayout',
+        component: 'IFrameView',
        meta: {
+          hideInMenu: !menu.visible,
          icon: menu.icon,
+          link: menu.path,
+          orderNo: menu.sort,
          title: menu.name,
        },
        name: menu.name,
-        path: `/${menu.path}`,
-        children: [
-          {
-            component: 'IFrameView',
-            meta: {
-              hideInMenu: !menu.visible,
-              icon: menu.icon,
-              link: menu.path,
-              orderNo: menu.sort,
-              title: menu.name,
-            },
-            name: menu.name,
-            path: `/${menu.path}/index`,
-          },
-        ],
+        path: `/${menu.path}/index`,
      };
      menus.push(urlMenu);
      return;
--- a/apps/web-antd/src/views/infra/codegen/codegen.data.ts
+++ b/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,
      },
--- a/apps/web-antd/src/views/infra/codegen/components/preview-code-modal.vue
+++ b/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>
--- a/apps/web-antd/src/views/infra/codegen/index.vue
+++ b/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>
--- a/pnpm-lock.yaml
+++ b/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':
-    resolution: {integrity: sha512-yMXfN4hg/EeSdtWfmoMrwB9X4TXwkBoZlTIpNydQaW9y0tSJHGnUPRoahtkbsyACCm9leSJINLY4jQ0rK6BK0Q==}
+  '@intlify/message-compiler@11.0.0-beta.2':
+    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':
-    resolution: {integrity: sha512-Md/4T/QOx7wZ7zqVzSsMx2M/9Mx/1nsgsjXS5SFIowFKydqUhMz7K+y7pMFh781aNYz+rGXYwad8E9/+InK9SA==}
+  '@intlify/shared@11.0.0-beta.2':
+    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/shared': 11.0.0-beta.1
+      '@intlify/message-compiler': 11.0.0-beta.2
+      '@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)
--- a/pnpm-workspace.yaml
+++ b/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