refactor: ♻️ 优化菜单目录显示

src/assets/icons/file.svg

@@ -0,0 +1 @@
+<svg t="1721541550402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1592" width="200" height="200"><path d="M979.096493 980.950486H44.904061C19.829898 980.950486 0.000277 960.442811 0.000277 935.839135v-740.047567c0-25.184865 20.410811-45.111351 44.903784-45.111352h934.192432c25.074162 0 44.903784 20.507676 44.903784 45.111352v740.047567c0 25.184865-20.410811 45.111351-44.903784 45.111351z" fill="#FFA000" p-id="1593"></path><path d="M512.000277 344.409946H0.000277V112.902919a45.097514 45.097514 0 0 1 44.903784-45.24973h350.470918c19.829622 0 37.320649 12.924541 43.146379 32.311352L512.000277 344.423784z" fill="#FFA000" p-id="1594"></path><path d="M909.699736 925.599135H114.300817c-25.184865 0-45.111351-20.134054-45.111351-44.281081v-603.32973c0-24.728216 20.493838-44.281081 45.111351-44.281081h795.398919c25.184865 0 45.111351 20.134054 45.111352 44.281081v603.32973c0.567351 24.147027-19.926486 44.281081-45.111352 44.281081z" fill="#FFFFFF" p-id="1595"></path><path d="M979.096493 980.950486H44.904061C19.829898 980.950486 0.000277 960.802595 0.000277 936.627892V361.056865c0-24.755892 20.410811-44.322595 44.903784-44.322595h934.192432c25.074162 0 44.903784 20.147892 44.903784 44.322595v575.571027c0 24.755892-20.410811 44.322595-44.903784 44.322594z" fill="#FFCA28" p-id="1596"></path><path d="M364.46125 485.708108H106.634655C93.917682 485.708108 83.027304 476.021622 83.027304 463.512216c0-11.96973 10.295351-22.223568 23.607351-22.223567h257.21773c12.716973 0 23.607351 9.686486 23.607351 22.223567 0 11.955892-10.295351 22.223568-22.998486 22.223568z m0 149.296433H106.634655c-12.716973 0-23.607351-9.686486-23.607351-22.223568 0-12.537081 10.295351-22.223568 23.607351-22.223568h257.21773c12.716973 0 23.607351 9.686486 23.607351 22.223568 0 12.537081-10.295351 22.223568-22.998486 22.223568z" fill="#FFF8E1" p-id="1597"></path></svg>

src/assets/icons/java.svg

@@ -0,0 +1 @@
+<svg t="1721534999310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2348" width="200" height="200"><path d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288" fill="#FF0000" p-id="2349"></path><path d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12" fill="#FF0000" p-id="2350"></path><path d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152" fill="#6699FF" p-id="2351"></path><path d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816" fill="#6699FF" p-id="2352"></path><path d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648" fill="#6699FF" p-id="2353"></path></svg>

src/assets/icons/typescript.svg

@@ -0,0 +1 @@
+<svg t="1721541160105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13856" width="200" height="200"><path d="M762.464 263.776a141.568 141.568 0 0 1 71.136 40.992 187.296 187.296 0 0 1 27.264 36.576c0.352 1.44-49.088 34.656-79.072 53.184-1.088 0.736-5.408-3.968-10.304-11.2a64.448 64.448 0 0 0-53.44-32c-34.464-2.368-56.672 15.68-56.512 45.856a41.6 41.6 0 0 0 4.896 21.312c7.584 15.68 21.664 25.088 65.888 44.256 81.408 35.04 116.352 58.144 137.92 90.976a165.056 165.056 0 0 1 13.312 138.656 152.448 152.448 0 0 1-125.824 90.08 348.8 348.8 0 0 1-86.656-0.896 208.992 208.992 0 0 1-115.712-60.288 200.896 200.896 0 0 1-29.632-43.872 84.96 84.96 0 0 1 10.464-6.656c5.056-2.88 24.192-13.888 42.24-24.352l32.768-19.2 6.848 9.984a152.672 152.672 0 0 0 43.2 41.344 105.6 105.6 0 0 0 110.656-5.6 49.44 49.44 0 0 0 6.4-63.168c-8.832-12.64-26.88-23.264-78.176-45.504a281.6 281.6 0 0 1-107.168-65.76 149.984 149.984 0 0 1-31.232-56.864 227.712 227.712 0 0 1-1.984-72.576 138.624 138.624 0 0 1 116.608-107.968 288 288 0 0 1 86.112 2.688z m-266.976 47.456l0.352 46.528h-148.16v420.736H243.2V357.856H95.04V312.16a447.552 447.552 0 0 1 1.28-46.912c0.544-0.736 90.624-1.088 199.84-0.896l198.752 0.544z" fill="#007ACC" p-id="13857"></path></svg>

src/assets/icons/vue.svg

@@ -0,0 +1 @@
+<svg t="1721541029594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3336" width="200" height="200"><path d="M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z" fill="#41B883" p-id="3337"></path><path d="M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z" fill="#34495E" p-id="3338"></path></svg>

src/assets/icons/xml.svg

@@ -0,0 +1 @@
+<svg t="1721557951693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19605" width="200" height="200"><path d="M692.497067 546.133333h52.087466l40.482134-260.642133V273.066667h-63.624534L605.730133 471.722667 542.037333 279.210667V273.066667h-63.6928L443.733333 546.133333h52.087467l23.1424-161.3824L570.9824 546.133333h46.2848l98.372267-155.170133-23.1424 148.957867z" fill="#FF7D19" p-id="19606"></path><path d="M845.2096 572.074667c-12.0832 0-18.090667 0-24.1664 11.400533-6.007467 5.7344-12.0832 17.2032-12.0832 22.9376v85.8112H597.674667c-54.340267 0-96.597333 40.004267-96.597334 91.477333v165.888H150.869333c-18.0224 0-36.181333-5.666133-48.264533-17.066666-12.014933-11.4688-24.098133-28.672-24.098133-45.806934V137.216c0-40.004267 36.181333-68.608 72.362666-68.608h585.728c42.1888 0 72.362667 28.603733 72.362667 68.608v51.473067c0 17.2032 18.158933 34.338133 36.2496 34.338133s36.181333-11.400533 42.257067-34.338133v-51.473067C887.466667 62.8736 821.0432 0 742.6048 0H144.861867C66.3552 0 0 57.207467 0 137.284267V886.784C0 961.1264 66.423467 1024 144.861867 1024H615.765333c12.0832 0 18.158933-5.7344 24.1664-11.4688l229.376-211.626667c6.144-5.7344 12.151467-17.2032 12.151467-22.869333v-165.888c0-22.9376-18.158933-40.072533-36.2496-40.072533z m-42.325333 183.022933l-205.2096 188.8256h-24.1664v-165.888c0-5.7344 0-11.4688 6.075733-17.2032 6.007467-5.7344 12.0832-5.7344 18.090667-5.7344h205.277866z" fill="#FF7D19" p-id="19607"></path><path d="M372.804267 273.066667L303.650133 366.1824 251.767467 273.066667H182.613333l80.6912 136.533333L136.533333 546.133333h74.888534L292.181333 453.0176 344.064 546.133333h69.154133L332.458667 409.6l115.234133-136.533333H372.804267z m501.3504 229.649066l28.808533-217.224533V273.066667h-51.882667l-40.277333 266.922666V546.133333h207.4624L1024 502.715733h-149.845333z" fill="#FF7D19" p-id="19608"></path></svg>

src/views/generator/index.vue

@@ -87,19 +87,39 @@
       <div v-if="dialog.type === 'preview'">
         <el-row>
           <el-col :span="6">
-            <el-tree :data="treeData" default-expand-all />
+            <el-scrollbar max-height="80vh">
+              <el-tree
+                :data="treeData"
+                default-expand-all
+                highlight-current
+                @node-click="handleFileTreeNodeClick"
+              >
+                <template #default="{ data }">
+                  <svg-icon :icon-class="getFileTreeNodeIcon(data.label)" />
+                  <span class="ml-1">{{ data.label }}</span>
+                </template>
+              </el-tree>
+            </el-scrollbar>
           </el-col>
           <el-col :span="18">
-            <div>
+            <el-scrollbar max-height="80vh">
+              <div class="absolute-rt z-36 right-5 top-2">
+                <el-link @click="handleCopyCode" type="primary">
+                  <el-icon><CopyDocument /></el-icon>
+                  复制
+                </el-link>
+              </div>
+
               <Codemirror
                 v-model:value="code"
                 :options="cmOptions"
                 border
                 ref="cmRef"
+                :readonly="true"
                 height="100%"
                 width="100%"
               />
-            </div>
+            </el-scrollbar>
           </el-col>
         </el-row>
       </div>
@@ -251,6 +271,7 @@ import "codemirror/mode/javascript/javascript.js";
 import Codemirror from "codemirror-editor-vue3";
 import type { CmComponentRef } from "codemirror-editor-vue3";
 import type { Editor, EditorConfiguration } from "codemirror";
+const { copy, copied } = useClipboard();
 
 const code = ref();
 const cmRef = ref<CmComponentRef>();
@@ -279,27 +300,6 @@ const pageData = ref<TablePageVO[]>([]);
 
 const tableColumns = ref<TableColumnVO[]>([]);
 
-interface TreeNode {
-  label: string;
-  children?: TreeNode[];
-}
-
-const treeData = ref<TreeNode[]>([
-  {
-    label: "Level one 1",
-    children: [
-      {
-        label: "Level two 1-1",
-        children: [
-          {
-            label: "Level three 1-1-1",
-          },
-        ],
-      },
-    ],
-  },
-]);
-
 const dialog = reactive({
   type: "",
   visible: false,
@@ -329,6 +329,14 @@ function handleCloseDialog() {
   dialog.visible = false;
 }
 
+interface TreeNode {
+  label: string;
+  content?: string;
+  children?: TreeNode[];
+}
+
+const treeData = ref<TreeNode[]>([]);
+
 /** 打开弹窗 */
 function handleOpenDialog(type: string, tableName: string) {
   dialog.visible = true;
@@ -337,10 +345,15 @@ function handleOpenDialog(type: string, tableName: string) {
     treeData.value = [];
     DatabaseAPI.getPreviewData(tableName).then((data) => {
       dialog.title = `预览 ${tableName}`;
-      code.value = data[0].content;
 
-      for (let i = 0; i < data.length; i++) {
-        assembleTree(data[i]);
+      // 组装树形结构完善代码
+      const tree = buildTree(data);
+      treeData.value = [tree];
+
+      // 默认选中第一个叶子节点并设置 code 值
+      const firstLeafNode = findFirstLeafNode(tree);
+      if (firstLeafNode) {
+        code.value = firstLeafNode.content || "";
       }
     });
   } else if (type === "config") {
@@ -351,37 +364,134 @@ function handleOpenDialog(type: string, tableName: string) {
   }
 }
 
-let autoIncrementKey = 0;
-function assembleTree(data: GeneratorPreviewVO) {
-  const paths: string[] = data.path.split("/");
-  let tempChildren: TreeNode[] | undefined = treeData.value;
+/**
+ * 递归构建树形结构
+ * @param data - 数据数组
+ * @returns 树形结构根节点
+ */
+function buildTree(
+  data: { path: string; fileName: string; content: string }[]
+): TreeNode {
+  // 动态获取根节点
+  const root: TreeNode = { label: "前后端工程代码", children: [] };
 
-  for (const path of paths) {
-    tempChildren = pushDir(tempChildren, {
-      label: path,
-      //key: autoIncrementKey++,
-      children: new Array<TreeNode>(),
+  data.forEach((item) => {
+    // 将路径分成数组
+    const separator = item.path.includes("/") ? "/" : "\\";
+    const parts = item.path.split(separator);
+
+    // 定义特殊路径
+    const specialPaths = [
+      "src\\main",
+      "youlai-boot",
+      "vue3-element-admin",
+      "java",
+      "com\\youlai\\system",
+    ];
+
+    // 检查路径中的特殊部分并合并它们
+    const mergedParts: string[] = [];
+    let buffer: string[] = [];
+
+    console.log("parts", parts);
+
+    parts.forEach((part) => {
+      buffer.push(part);
+      const currentPath = buffer.join(separator);
+      console.log("currentPath", currentPath);
+      if (specialPaths.includes(currentPath)) {
+        mergedParts.push(currentPath);
+        buffer = [];
+      }
     });
-  }
 
-  tempChildren?.push({
-    label: data.fileName,
-    children: new Array<TreeNode>(),
+    // 将 mergedParts 路径中的分隔符\替换为/
+    mergedParts.forEach((part, index) => {
+      mergedParts[index] = part.replace(/\\/g, "/");
+    });
+
+    if (buffer.length > 0) {
+      mergedParts.push(...buffer);
+    }
+
+    let currentNode = root;
+
+    mergedParts.forEach((part) => {
+      // 查找或创建当前部分的子节点
+      let node = currentNode.children?.find((child) => child.label === part);
+      if (!node) {
+        node = { label: part, children: [] };
+        currentNode.children?.push(node);
+      }
+      currentNode = node;
+    });
+
+    // 添加文件节点
+    currentNode.children?.push({
+      label: item.fileName,
+      content: item?.content,
+    });
   });
+
+  return root;
 }
 
-const pushDir = (children: TreeNode[] | undefined, treeNode: TreeNode) => {
-  if (children) {
-    for (const child of children) {
-      if (child.label === treeNode.label) {
-        return child.children;
-      }
+/**
+ * 递归查找第一个叶子节点
+ * @param node - 树形节点
+ * @returns 第一个叶子节点
+ */
+function findFirstLeafNode(node: TreeNode): TreeNode | null {
+  if (!node.children || node.children.length === 0) {
+    return node;
+  }
+  for (const child of node.children) {
+    const leafNode = findFirstLeafNode(child);
+    if (leafNode) {
+      return leafNode;
     }
   }
-  children?.push(treeNode);
-  return treeNode.children;
+  return null;
+}
+
+/** 文件树节点 Click */
+function handleFileTreeNodeClick(data: TreeNode) {
+  if (!data.children || data.children.length === 0) {
+    code.value = data.content || "";
+  }
+}
+
+function getFileTreeNodeIcon(label: string) {
+  if (label.endsWith(".java")) {
+    return "java";
+  }
+  if (label.endsWith(".html")) {
+    return "html";
+  }
+  if (label.endsWith(".vue")) {
+    return "vue";
+  }
+  if (label.endsWith(".ts")) {
+    return "typescript";
+  }
+  if (label.endsWith(".xml")) {
+    return "xml";
+  }
+  return "file";
+}
+
+const handleCopyCode = () => {
+  if (code.value) {
+    copy(code.value);
+  }
 };
 
+watch(copied, () => {
+  if (copied.value) {
+    ElMessage.success("复制成功");
+  }
+});
+
 function handleSubmit() {}
 
 onMounted(() => {