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

<script lang="ts" setup>
import type { InfraCodegenApi } from '#/api/infra/codegen';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { CodeEditor } from '@vben/plugins/code-editor';

import { useClipboard } from '@vueuse/core';
import { Button, DirectoryTree, message, Tabs } from 'ant-design-vue';

import { previewCodegen } from '#/api/infra/codegen';

/** 文件树类型 */
interface FileNode {
  key: string;
  title: string;
  parentKey: string;
  isLeaf?: boolean;
  children?: FileNode[];
}

/** 组件状态 */
const loading = ref(false);
const fileTree = ref<FileNode[]>([]);
const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
const activeKey = ref<string>('');

/** 代码地图 */
const codeMap = ref<Map<string, string>>(new Map<string, string>());
function setCodeMap(key: string, code: string) {
  // 处理可能的缩进问题，特别是对Java文件
  const trimmedCode = code.trimStart();
  // 如果已有缓存则不重新构建
  if (codeMap.value.has(key)) {
    return;
  }
  codeMap.value.set(key, trimmedCode);
}

/** 删除代码地图 */
function removeCodeMapKey(targetKey: any) {
  // 只有一个代码视图时不允许删除
  if (codeMap.value.size === 1) {
    return;
  }
  if (codeMap.value.has(targetKey)) {
    codeMap.value.delete(targetKey);
  }
}

/** 复制代码 */
async function copyCode() {
  const { copy } = useClipboard();
  const file = previewFiles.value.find(
    (item) => item.filePath === activeKey.value,
  );
  if (file) {
    await copy(file.code);
    message.success('复制成功');
  }
}

/** 文件节点点击事件 */
function handleNodeClick(_: any[], e: any) {
  if (!e.node.isLeaf) {
    return;
  }

  activeKey.value = e.node.key;
  const file = previewFiles.value.find((item) => {
    const list = activeKey.value.split('.');
    // 特殊处理 - 包合并
    if (list.length > 2) {
      const lang = list.pop();
      return item.filePath === `${list.join('/')}.${lang}`;
    }
    return item.filePath === activeKey.value;
  });
  if (!file) {
    return;
  }

  setCodeMap(activeKey.value, file.code);
}

/** 处理文件树 */
function handleFiles(data: InfraCodegenApi.CodegenPreview[]): FileNode[] {
  const exists: Record<string, boolean> = {};
  const files: FileNode[] = [];

  // 处理文件路径
  for (const item of data) {
    const paths = item.filePath.split('/');
    let cursor = 0;
    let fullPath = '';

    while (cursor < paths.length) {
      const path = paths[cursor] || '';
      const oldFullPath = fullPath;

      // 处理 Java 包路径特殊情况
      if (path === 'java' && cursor + 1 < paths.length) {
        fullPath = fullPath ? `${fullPath}/${path}` : path;
        cursor++;

        // 合并包路径
        let packagePath = '';
        while (cursor < paths.length) {
          const nextPath = paths[cursor] || '';
          if (
            [
              'controller',
              'convert',
              'dal',
              'dataobject',
              'enums',
              'mysql',
              'service',
              'vo',
            ].includes(nextPath)
          ) {
            break;
          }
          packagePath = packagePath ? `${packagePath}.${nextPath}` : nextPath;
          cursor++;
        }

        if (packagePath) {
          const newFullPath = `${fullPath}/${packagePath}`;
          if (!exists[newFullPath]) {
            exists[newFullPath] = true;
            files.push({
              key: newFullPath,
              title: packagePath,
              parentKey: oldFullPath || '/',
              isLeaf: cursor === paths.length,
            });
          }
          fullPath = newFullPath;
        }
        continue;
      }

      // 处理普通路径
      fullPath = fullPath ? `${fullPath}/${path}` : path;
      if (!exists[fullPath]) {
        exists[fullPath] = true;
        files.push({
          key: fullPath,
          title: path,
          parentKey: oldFullPath || '/',
          isLeaf: cursor === paths.length - 1,
        });
      }
      cursor++;
    }
  }

  /** 构建树形结构 */
  function buildTree(parentKey: string): FileNode[] {
    return files
      .filter((file) => file.parentKey === parentKey)
      .map((file) => ({
        ...file,
        children: buildTree(file.key),
      }));
  }

  return buildTree('/');
}

/** 模态框实例 */
const [Modal, modalApi] = useVbenModal({
  footer: false,
  fullscreen: true,
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      // 关闭时清除代码视图缓存
      codeMap.value.clear();
      return;
    }

    const row = modalApi.getData<InfraCodegenApi.CodegenTable>();
    if (!row) {
      return;
    }

    // 加载预览数据
    loading.value = true;
    try {
      const data = await previewCodegen(row.id);
      previewFiles.value = data;

      // 构建代码树，并默认选中第一个文件
      fileTree.value = handleFiles(data);
      if (data.length > 0) {
        activeKey.value = data[0]?.filePath || '';
        const code = data[0]?.code || '';
        setCodeMap(activeKey.value, code);
      }
    } finally {
      loading.value = false;
    }
  },
});
</script>

<template>
  <Modal title="代码预览">
    <div class="flex h-full" v-loading="loading">
      <!-- 文件树 -->
      <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="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-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
            >
              <CodeEditor
                class="max-h-200"
                :value="codeMap.get(activeKey)"
                mode="application/json"
                :readonly="true"
                :bordered="true"
                :auto-format="false"
              />
            </div>
          </Tabs.TabPane>
          <template #rightExtra>
            <Button type="primary" ghost @click="copyCode">
              <IconifyIcon icon="lucide:copy" />
              复制代码
            </Button>
          </template>
        </Tabs>
      </div>
    </div>
  </Modal>
</template>