fix: 修复代码生成预览中文件树选中状态及编辑器刷新问题

This commit is contained in:
Ray.Hao
2026-04-05 20:38:36 +08:00
parent 00d06de84f
commit d704edb80d

View File

@@ -381,9 +381,12 @@
<el-col :span="6">
<el-scrollbar max-height="72vh">
<el-tree
ref="fileTreeRef"
:data="filteredTreeData"
node-key="key"
default-expand-all
highlight-current
:current-node-key="currentFileKey"
@node-click="handleFileTreeNodeClick"
>
<template #default="{ data }">
@@ -538,6 +541,7 @@ import MenuAPI from "@/api/system/menu";
interface TreeNode {
label: string;
key?: string;
content?: string;
children?: TreeNode[];
scope?: "frontend" | "backend";
@@ -628,10 +632,18 @@ watch(
const { copy, copied } = useClipboard();
const code = ref<string>("");
const cmRef = ref<CmComponentRef>();
const fileTreeRef = ref();
const currentFileKey = ref<string>("");
const cmOptions: EditorConfiguration = {
mode: "text/javascript",
};
function refreshPreviewEditor() {
const inst: any = cmRef.value as any;
const editor = inst?.cminstance || inst?.cm || inst?.editor;
editor?.refresh?.();
}
const prevBtnText = ref("");
const nextBtnText = ref("下一步,字段配置");
const active = ref(0);
@@ -679,6 +691,10 @@ watch(active, (val) => {
} else if (val === 2) {
prevBtnText.value = "上一步,字段配置";
nextBtnText.value = "下载代码";
nextTick(() => {
refreshPreviewEditor();
});
}
});
@@ -930,6 +946,9 @@ async function handlePreview(tableName: string) {
const firstLeafNode = findFirstLeafNode(tree);
if (firstLeafNode) {
code.value = firstLeafNode.content || "";
currentFileKey.value = firstLeafNode.key || "";
await nextTick();
fileTreeRef.value?.setCurrentKey?.(currentFileKey.value);
}
} catch {
active.value = 0;
@@ -945,20 +964,24 @@ async function handlePreview(tableName: string) {
*/
function buildTree(data: GeneratorPreviewItem[]): TreeNode {
// 动态获取根节点
const root: TreeNode = { label: "前后端代码", children: [] };
const root: TreeNode = { label: "前后端代码", key: "root", children: [] };
data.forEach((item) => {
const normalizedPath = item.path.replace(/\\/g, "/");
const parts = normalizedPath.split("/").filter(Boolean);
let currentNode = root;
let currentKey = root.key || "root";
parts.forEach((part) => {
// 查找或创建当前部分的子节点
let node = currentNode.children?.find((child) => child.label === part);
if (!node) {
node = { label: part, children: [] };
currentKey = `${currentKey}/${part}`;
node = { label: part, key: currentKey, children: [] };
currentNode.children?.push(node);
} else {
currentKey = node.key || `${currentKey}/${part}`;
}
currentNode = node;
});
@@ -966,6 +989,7 @@ function buildTree(data: GeneratorPreviewItem[]): TreeNode {
// 添加文件节点
currentNode.children?.push({
label: item.fileName,
key: `${item.scope || ""}:${normalizedPath}/${item.fileName}`,
content: item?.content,
scope: item.scope,
language: item.language,
@@ -997,9 +1021,55 @@ function findFirstLeafNode(node: TreeNode): TreeNode | null {
function handleFileTreeNodeClick(data: TreeNode) {
if (!data.children || data.children.length === 0) {
code.value = data.content || "";
currentFileKey.value = data.key || "";
nextTick(() => {
refreshPreviewEditor();
});
}
}
function findLeafByKey(nodes: TreeNode[], key: string): TreeNode | null {
for (const node of nodes) {
if (!node.children || node.children.length === 0) {
if (node.key === key) return node;
continue;
}
const found = findLeafByKey(node.children || [], key);
if (found) return found;
}
return null;
}
watch(
() => filteredTreeData.value,
async (nodes) => {
if (!nodes.length) {
currentFileKey.value = "";
code.value = "";
return;
}
if (currentFileKey.value) {
const leaf = findLeafByKey(nodes, currentFileKey.value);
if (leaf) {
await nextTick();
fileTreeRef.value?.setCurrentKey?.(currentFileKey.value);
return;
}
}
const first = findFirstLeafNode({ label: "root", key: "root", children: nodes });
if (first) {
code.value = first.content || "";
currentFileKey.value = first.key || "";
await nextTick();
fileTreeRef.value?.setCurrentKey?.(currentFileKey.value);
}
},
{ immediate: true }
);
/** 获取文件树节点图标 */
function getFileTreeNodeIcon(node: TreeNode) {
const ext = (node.language || node.label.split(".").pop() || "").toLowerCase();