feat: 新增search-key内容

src/auto-import.d.ts

@@ -67,6 +67,7 @@ declare global {
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useXMLProcessing: typeof import('@/lib/XMLProcessor/src/index')['useXMLProcessing']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

src/lib/XMLProcessor/src/core/Processing.ts

@@ -19,6 +19,28 @@ export class Processing {
         }
     }
 
+    async processFile(xmlFile: File, handledNode: string[]): Promise<{treeData: TreeRenderResult[], xmlDOM: Document}> {
+        if (!(xmlFile instanceof File) || !xmlFile.type.includes('xml')) {
+            return Promise.reject('The file is not a valid XML file.')
+        }
+        return new Promise((resolve, reject) => {
+            const fr = new FileReader();
+            fr.onload = () => {
+                const content = fr.result as string;
+                try {
+                    const {treeData, xmlDOM} = this.processXML(content, handledNode)
+                    resolve({treeData, xmlDOM})
+                } catch (error) {
+                    reject(error)
+                }
+            }
+            fr.onerror = function() {
+                reject('Error reading file.')
+            }
+            fr.readAsText(xmlFile);
+        })
+    }
+
     private innerHandle(domNode: Element, handledNode: string[]): TreeRenderResult[] {
         let treeData: TreeRenderResult[] = [];
         // 必须添加根节点内容

src/views/editor/components/ContentTree.vue

@@ -4,15 +4,15 @@
             <n-input v-model:value="searchKey" placeholder="搜索" />
         </div>
         <div class="flex-auto overflow-auto">
-            <n-tree :pattern="searchKey" :data="treeData" block-line />
+            <n-tree v-model:expanded-keys="expandedKeys" ref="treeRef" :pattern="searchKey" :data="realComposableData" block-line />
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { searchKey, treeData } from '../constants'
-import {useXMLProcessing} from '@/lib/XMLProcessor/src'
+import { searchKey, treeData, realComposableData } from '../constants'
 import FileXML from "@/assets/file/CES-QEC-V250-A.xml?raw"
+import type { TreeOption } from 'naive-ui'
 
 const xmlProcessing = useXMLProcessing()
 const nodeSet = [
@@ -38,7 +38,23 @@ const nodeSet = [
     "STEP",
     "RECORD-LINE"
 ]
-const res = xmlProcessing.processXML(FileXML, nodeSet)
-treeData.value = res.treeData
-console.log('all-node', res.xmlDOM, res.treeData, xmlProcessing)
+const treeRef = ref()
+const expandedKeys = ref<string[]>([])
+onMounted(function() {
+    const res = xmlProcessing.processXML(FileXML, nodeSet)
+    treeData.value = res.treeData
+    console.log('all-node', res)
+})
+function getAllKeys(item: TreeOption[]) {
+    return item.reduce(function(q, w) {
+        q.push(w.key as string)
+        if (w.children) {
+            q.push(...getAllKeys(w.children))
+        }
+        return q;
+    }, [] as string[])
+}
+watch(realComposableData, function() {
+    expandedKeys.value = getAllKeys(realComposableData.value)
+}, {flush: 'post', deep: true})
 </script>

src/views/editor/constants/index.ts

+// @ts-nocheck
 import type { TreeOption } from 'naive-ui'
+import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 
 // 菜单相关
 export const searchKey = ref('')
@@ -8,3 +10,46 @@ export const editorRef = ref()
 export const formData = reactive({
     html: ''
 })
+// 递归函数：检查树中是否存在满足条件的节点
+// 递归函数：检查树中是否存在满足条件的节点，并构建新的树结构
+function buildFilteredTree(
+    tree: TreeRenderResult,
+    searchString: string
+): TreeRenderResult | null {
+    // 如果当前节点的 label 包含指定字符串，直接返回当前节点
+    if (tree.label.includes(searchString)) {
+        return { ...tree }; // 返回当前节点的副本
+    }
+
+    // 如果当前节点有子节点，递归检查每个子节点
+    if (tree.children) {
+        const filteredChildren: TreeRenderResult[] = [];
+        for (let child of tree.children) {
+            const result = buildFilteredTree(child, searchString);
+            if (result) {
+                filteredChildren.push(result); // 如果子节点符合条件，加入到当前节点的子节点列表
+            }
+        }
+
+        // 如果有符合条件的子节点，返回当前节点，并更新子节点列表
+        if (filteredChildren.length > 0) {
+            return { ...tree, children: filteredChildren };
+        }
+    }
+
+    // 如果当前节点及其子节点都不满足条件，返回 null
+    return null;
+}
+
+export const realComposableData = computed(function() {
+    if (!searchKey.value) {
+        return treeData.value
+    }
+    // @ts-ignore
+    const result = buildFilteredTree(treeData.value[0], searchKey.value)
+    if (!result) {
+        return []
+    }
+    // @ts-ignore
+    return [result]
+})

vite.config.ts

@@ -22,7 +22,8 @@ export default defineConfig({
                 'vue-router',
                 {
                     'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
-                    '@/hooks/useEventBus': ['useEventBus']
+                    '@/hooks/useEventBus': ['useEventBus'],
+                    "@/lib/XMLProcessor/src/index": ['useXMLProcessing']
                 }
             ],
             dts: 'src/auto-import.d.ts',