feat: AI格式化processing+41

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

@@ -23,21 +23,27 @@ export class Processing {
     processXML(xmlContent: string, handledNode: string[]): {
         treeData: TreeRenderResult[];
         xmlDOM: Document;
+        xmlContent: string
     } {
         // 使用 DOMParser 解析 XML 字符串
         const parsedTree = this.domParser.parseFromString(xmlContent, 'text/xml');
         // 获取 XML 文档的根元素
         const rootElement = parsedTree.documentElement;
-        return {
+        const result = {
             // 调用 innerHandle 方法处理根元素，生成树形数据
             treeData: this.innerHandle(rootElement, handledNode),
             // 返回解析后的 XML DOM 对象
             xmlDOM: parsedTree
-        };
+        }
+        parsedTree.documentElement.querySelectorAll(':not([data-key])').forEach((node) => node.remove())
+        return {
+            ...result,
+            xmlContent: this.serializeXML(parsedTree)
+        }
     }
 
     // 异步处理 XML 文件的方法，返回包含树形数据和 XML DOM 对象的 Promise
-    async processFile(xmlFile: File, handledNode: string[]): Promise<{ treeData: TreeRenderResult[]; xmlDOM: Document }> {
+    async processFile(xmlFile: File, handledNode: string[]): Promise<{ treeData: TreeRenderResult[]; xmlDOM: Document;xmlContent: string }> {
         // 检查文件是否为有效的 XML 文件
         if (!(xmlFile instanceof File) || !xmlFile.type.includes('xml')) {
             return Promise.reject('The file is not a valid XML file.');
@@ -50,8 +56,10 @@ export class Processing {
                 try {
                     // 调用 processXML 方法处理读取的文件内容
                     const { treeData, xmlDOM } = this.processXML(content, handledNode);
+                    xmlDOM.documentElement.querySelectorAll(':not([data-key])').forEach((node) => node.remove())
+
                     // 解析成功，返回树形数据和 XML DOM 对象
-                    resolve({ treeData, xmlDOM });
+                    resolve({ treeData, xmlDOM, xmlContent: this.serializeXML(xmlDOM) });
                 } catch (error) {
                     // 解析失败，拒绝 Promise 并返回错误信息
                     reject(error);
@@ -115,10 +123,6 @@ export class Processing {
                 index: realIndex,
                 chained: [...startChained, realIndex]
             };
-            // 如果节点名为 CEP，打印树形数据项
-            if (treeItem.label === 'CEP') {
-                console.log('the res here', treeItem);
-            }
             // 为 DOM 节点设置 data-key 属性
             node.setAttribute('data-key', targetKey);
             node.setAttribute('data-w-e-type', node.nodeName)

src/views/editor/components/ContentTree.vue

@@ -5,54 +5,35 @@
         </div>
         <div class="flex-auto overflow-auto">
             <n-tree
-                v-model:expanded-keys="expandedKeys"
                 ref="treeRef"
-                :pattern="searchKey"
+                v-model:expanded-keys="expandedKeys"
                 :data="realComposableData"
-                block-line
                 :node-props="nodeProps"
+                :pattern="searchKey"
+                block-line
             />
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
-import { realComposableData, searchKey, treeData, xmlDOM } from '../constants'
+<script lang="ts" setup>
+import { realComposableData, searchKey, treeData, xmlContent, xmlDOM } from '../constants'
+import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 import FileXML from '@/assets/file/CES-QEC-V250-A.xml?raw'
 import type { TreeOption } from 'naive-ui'
 import { nodeProps } from '../functions'
 
 const xmlProcessing = useXMLProcessing()
-const nodeSet = [
-    'JOBCARD',
-    'CEP',
-    'TITLE',
-    'WARNING',
-    'TFMATR',
-    'PRETOPIC',
-    'PARA',
-    'LIST1',
-    'L1ITEM',
-    'TABLE',
-    'TOPIC',
-    'SUBTASK',
-    'NOTE',
-    'LIST2',
-    'L2ITEM',
-    'LIST3',
-    'L3ITEM',
-    'LIST4',
-    'L4ITEM',
-    'STEP',
-    'RECORD-LINE'
-]
+
 const treeRef = ref()
 const expandedKeys = ref<string[]>([])
 onMounted(function () {
     const res = xmlProcessing.processXML(FileXML, nodeSet)
     treeData.value = res.treeData
     xmlDOM.value = res.xmlDOM
+    xmlContent.value = res.xmlContent
 })
+
 function getAllKeys(item: TreeOption[]) {
     return item.reduce(function (q, w) {
         q.push(w.key as string)
@@ -62,6 +43,7 @@ function getAllKeys(item: TreeOption[]) {
         return q
     }, [] as string[])
 }
+
 watch(
     realComposableData,
     function () {

src/views/editor/constants/index.ts

@@ -6,6 +6,7 @@ import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 export const searchKey = ref('')
 export const treeData: Ref<TreeOption[]> = ref([])
 export const xmlDOM :Ref<Document>= ref()
+export const xmlContent: Ref<string> = ref('')
 //编辑器相关
 export const editorRef = ref()
 export const formData = reactive({

src/views/editor/constants/nodeParsed.ts

+export const nodeSet = [
+    'JOBCARD',
+    'CEP',
+    'TITLE',
+    'WARNING',
+    'TFMATR',
+    'PRETOPIC',
+    'PARA',
+    'LIST1',
+    'L1ITEM',
+    'TABLE',
+    'TOPIC',
+    'SUBTASK',
+    'NOTE',
+    'LIST2',
+    'L2ITEM',
+    'LIST3',
+    'L3ITEM',
+    'LIST4',
+    'L4ITEM',
+    'STEP',
+    'RECORD-LINE'
+]
\ No newline at end of file

src/views/editor/functions/elem-to-html.ts

-import { SlateElement, IModuleConf } from '@wangeditor/editor'
+import { IModuleConf, SlateElement } from '@wangeditor/editor'
+import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 
 const elemToHtml = (type: string) => {
     return (elem: SlateElement, childrenHtml: string): string => {
@@ -20,27 +21,5 @@ const createElemConfig = (types: string | string[]) => {
     })
     return configs
 }
-export default createElemConfig([
-    'EOTK-HEADER',
-    'JOBCARD',
-    'CEP',
-    'TITLE',
-    'WARNING',
-    'TFMATR',
-    'PRETOPIC',
-    'PARA',
-    'LIST1',
-    'L1ITEM',
-    'TABLE',
-    'TOPIC',
-    'SUBTASK',
-    'NOTE',
-    'LIST2',
-    'L2ITEM',
-    'LIST3',
-    'L3ITEM',
-    'LIST4',
-    'L4ITEM',
-    'STEP',
-    'RECORD-LINE'
-])
+
+export default createElemConfig(nodeSet)

src/views/editor/functions/parse-elem-html.ts

-import { IDomEditor, SlateDescendant, SlateElement, IModuleConf } from '@wangeditor/editor'
+import { IDomEditor, IModuleConf, SlateDescendant, SlateElement } from '@wangeditor/editor'
+import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 
 const parseElemHtml = (type: string) => {
     return (domElem: Element, children: SlateDescendant[], editor: IDomEditor): SlateElement => {
@@ -23,27 +24,4 @@ const createParseConfig = (types: string | string[]) => {
     return configs
 }
 
-export default createParseConfig([
-    'EOTK-HEADER',
-    'JOBCARD',
-    'CEP',
-    'TITLE',
-    'WARNING',
-    'TFMATR',
-    'PRETOPIC',
-    'PARA',
-    'LIST1',
-    'L1ITEM',
-    'TABLE',
-    'TOPIC',
-    'SUBTASK',
-    'NOTE',
-    'LIST2',
-    'L2ITEM',
-    'LIST3',
-    'L3ITEM',
-    'LIST4',
-    'L4ITEM',
-    'STEP',
-    'RECORD-LINE'
-])
+export default createParseConfig(nodeSet)

src/views/editor/functions/render-elem.ts

 import { h, VNode } from 'snabbdom'
 import { IDomEditor, IModuleConf, SlateElement } from '@wangeditor/editor'
+import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 
 const renderElem = (type: string, style = { display: 'block' }) => {
     return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
@@ -18,27 +19,5 @@ const createRenderConfig = (types: string | string[]) => {
     })
     return configs
 }
-export default createRenderConfig([
-    'EOTK-HEADER',
-    'JOBCARD',
-    'CEP',
-    'TITLE',
-    'WARNING',
-    'TFMATR',
-    'PRETOPIC',
-    'PARA',
-    'LIST1',
-    'L1ITEM',
-    'TABLE',
-    'TOPIC',
-    'SUBTASK',
-    'NOTE',
-    'LIST2',
-    'L2ITEM',
-    'LIST3',
-    'L3ITEM',
-    'LIST4',
-    'L4ITEM',
-    'STEP',
-    'RECORD-LINE'
-])
+
+export default createRenderConfig(nodeSet)

src/views/editor/index.vue

@@ -11,15 +11,12 @@
 <script setup lang="ts">
 import ContentEditor from './components/ContentEditor.vue'
 import ContentTree from './components/ContentTree.vue'
-import { editorRef, formData, xmlDOM } from './constants'
+import { editorRef, formData, xmlContent } from './constants'
 import { handleEditor } from './functions'
 
 onMounted(() => {
     nextTick(() => {
-        xmlDOM.value.documentElement.querySelectorAll(':not([data-key])').forEach((node) => node.remove())
-        const serializer = new XMLSerializer()
-        const xmlString = serializer.serializeToString(xmlDOM.value.documentElement)
-        editorRef.value?.editorRef?.setHtml(xmlString)
+        editorRef.value?.editorRef?.setHtml(xmlContent.value)
     })
 })
 </script>