fix: 修复代码生成预览中文件树选中状态及编辑器刷新问题
This commit is contained in:
@@ -381,9 +381,12 @@
|
|||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-scrollbar max-height="72vh">
|
<el-scrollbar max-height="72vh">
|
||||||
<el-tree
|
<el-tree
|
||||||
|
ref="fileTreeRef"
|
||||||
:data="filteredTreeData"
|
:data="filteredTreeData"
|
||||||
|
node-key="key"
|
||||||
default-expand-all
|
default-expand-all
|
||||||
highlight-current
|
highlight-current
|
||||||
|
:current-node-key="currentFileKey"
|
||||||
@node-click="handleFileTreeNodeClick"
|
@node-click="handleFileTreeNodeClick"
|
||||||
>
|
>
|
||||||
<template #default="{ data }">
|
<template #default="{ data }">
|
||||||
@@ -538,6 +541,7 @@ import MenuAPI from "@/api/system/menu";
|
|||||||
|
|
||||||
interface TreeNode {
|
interface TreeNode {
|
||||||
label: string;
|
label: string;
|
||||||
|
key?: string;
|
||||||
content?: string;
|
content?: string;
|
||||||
children?: TreeNode[];
|
children?: TreeNode[];
|
||||||
scope?: "frontend" | "backend";
|
scope?: "frontend" | "backend";
|
||||||
@@ -628,10 +632,18 @@ watch(
|
|||||||
const { copy, copied } = useClipboard();
|
const { copy, copied } = useClipboard();
|
||||||
const code = ref<string>("");
|
const code = ref<string>("");
|
||||||
const cmRef = ref<CmComponentRef>();
|
const cmRef = ref<CmComponentRef>();
|
||||||
|
const fileTreeRef = ref();
|
||||||
|
const currentFileKey = ref<string>("");
|
||||||
const cmOptions: EditorConfiguration = {
|
const cmOptions: EditorConfiguration = {
|
||||||
mode: "text/javascript",
|
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 prevBtnText = ref("");
|
||||||
const nextBtnText = ref("下一步,字段配置");
|
const nextBtnText = ref("下一步,字段配置");
|
||||||
const active = ref(0);
|
const active = ref(0);
|
||||||
@@ -679,6 +691,10 @@ watch(active, (val) => {
|
|||||||
} else if (val === 2) {
|
} else if (val === 2) {
|
||||||
prevBtnText.value = "上一步,字段配置";
|
prevBtnText.value = "上一步,字段配置";
|
||||||
nextBtnText.value = "下载代码";
|
nextBtnText.value = "下载代码";
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
refreshPreviewEditor();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -930,6 +946,9 @@ async function handlePreview(tableName: string) {
|
|||||||
const firstLeafNode = findFirstLeafNode(tree);
|
const firstLeafNode = findFirstLeafNode(tree);
|
||||||
if (firstLeafNode) {
|
if (firstLeafNode) {
|
||||||
code.value = firstLeafNode.content || "";
|
code.value = firstLeafNode.content || "";
|
||||||
|
currentFileKey.value = firstLeafNode.key || "";
|
||||||
|
await nextTick();
|
||||||
|
fileTreeRef.value?.setCurrentKey?.(currentFileKey.value);
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
active.value = 0;
|
active.value = 0;
|
||||||
@@ -945,20 +964,24 @@ async function handlePreview(tableName: string) {
|
|||||||
*/
|
*/
|
||||||
function buildTree(data: GeneratorPreviewItem[]): TreeNode {
|
function buildTree(data: GeneratorPreviewItem[]): TreeNode {
|
||||||
// 动态获取根节点
|
// 动态获取根节点
|
||||||
const root: TreeNode = { label: "前后端代码", children: [] };
|
const root: TreeNode = { label: "前后端代码", key: "root", children: [] };
|
||||||
|
|
||||||
data.forEach((item) => {
|
data.forEach((item) => {
|
||||||
const normalizedPath = item.path.replace(/\\/g, "/");
|
const normalizedPath = item.path.replace(/\\/g, "/");
|
||||||
const parts = normalizedPath.split("/").filter(Boolean);
|
const parts = normalizedPath.split("/").filter(Boolean);
|
||||||
|
|
||||||
let currentNode = root;
|
let currentNode = root;
|
||||||
|
let currentKey = root.key || "root";
|
||||||
|
|
||||||
parts.forEach((part) => {
|
parts.forEach((part) => {
|
||||||
// 查找或创建当前部分的子节点
|
// 查找或创建当前部分的子节点
|
||||||
let node = currentNode.children?.find((child) => child.label === part);
|
let node = currentNode.children?.find((child) => child.label === part);
|
||||||
if (!node) {
|
if (!node) {
|
||||||
node = { label: part, children: [] };
|
currentKey = `${currentKey}/${part}`;
|
||||||
|
node = { label: part, key: currentKey, children: [] };
|
||||||
currentNode.children?.push(node);
|
currentNode.children?.push(node);
|
||||||
|
} else {
|
||||||
|
currentKey = node.key || `${currentKey}/${part}`;
|
||||||
}
|
}
|
||||||
currentNode = node;
|
currentNode = node;
|
||||||
});
|
});
|
||||||
@@ -966,6 +989,7 @@ function buildTree(data: GeneratorPreviewItem[]): TreeNode {
|
|||||||
// 添加文件节点
|
// 添加文件节点
|
||||||
currentNode.children?.push({
|
currentNode.children?.push({
|
||||||
label: item.fileName,
|
label: item.fileName,
|
||||||
|
key: `${item.scope || ""}:${normalizedPath}/${item.fileName}`,
|
||||||
content: item?.content,
|
content: item?.content,
|
||||||
scope: item.scope,
|
scope: item.scope,
|
||||||
language: item.language,
|
language: item.language,
|
||||||
@@ -997,9 +1021,55 @@ function findFirstLeafNode(node: TreeNode): TreeNode | null {
|
|||||||
function handleFileTreeNodeClick(data: TreeNode) {
|
function handleFileTreeNodeClick(data: TreeNode) {
|
||||||
if (!data.children || data.children.length === 0) {
|
if (!data.children || data.children.length === 0) {
|
||||||
code.value = data.content || "";
|
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) {
|
function getFileTreeNodeIcon(node: TreeNode) {
|
||||||
const ext = (node.language || node.label.split(".").pop() || "").toLowerCase();
|
const ext = (node.language || node.label.split(".").pop() || "").toLowerCase();
|
||||||
|
|||||||
Reference in New Issue
Block a user