feat: AI格式化processing+415

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

@@ -90,6 +90,7 @@ export class Processing {
         // 为 DOM 节点设置 data-key 属性
         domNode.setAttribute('data-key', targetKey);
         domNode.setAttribute('data-w-e-type', domNode.nodeName)
+        domNode.setAttribute('data-indent-level', '0')
         // 递归处理子节点
         treeItem.children = this.innerGroupHandle(domNode.children, handledNode, [0]);
         // 将树形数据项添加到结果数组中
@@ -126,6 +127,7 @@ export class Processing {
             // 为 DOM 节点设置 data-key 属性
             node.setAttribute('data-key', targetKey);
             node.setAttribute('data-w-e-type', node.nodeName)
+            node.setAttribute('data-indent-level', startChained.length.toString())
             // 如果节点有子节点，递归处理子节点
             if (node.children.length > 0) {
                 treeItem.children = this.innerGroupHandle(node.children, handledNode, [...startChained, realIndex]);

src/views/editor/components/ContentTree.vue

@@ -9,6 +9,8 @@
                 v-model:expanded-keys="expandedKeys"
                 :data="realComposableData"
                 :node-props="nodeProps"
+                v-model:selected-keys="treeSelectedKeys"
+                :render-label="nodeProps.renderLabel"
                 :pattern="searchKey"
                 block-line
             />
@@ -17,14 +19,20 @@
 </template>
 
 <script lang="ts" setup>
-import { realComposableData, searchKey, treeData, xmlContent, xmlDOM } from '../constants'
+import { realComposableData, searchKey, treeData, xmlContent, xmlDOM, treeSelectedKeys } 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'
+import {editorRef} from '../constants'
 
 const xmlProcessing = useXMLProcessing()
 
+watchEffect(function() {
+    console.log('the keys', treeSelectedKeys.value, editorRef.value?.editorRef?.getEditableContainer())
+
+})
+
 const treeRef = ref()
 const expandedKeys = ref<string[]>([])
 onMounted(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 treeSelectedKeys = ref<string[]>([])
 export const xmlContent: Ref<string> = ref('')
 //编辑器相关
 export const editorRef = ref()

src/views/editor/functions/index.ts

@@ -17,10 +17,20 @@ export const handleEditor = (editor: IDomEditor) => {
     // })
     // treeData.value = buildTree(menu)
 }
+
+let lastFocusedId = ''
 export const nodeProps = ({ option }: { option: TreeOption }) => {
     return {
         onClick() {
             editorRef.value?.editorRef.scrollToElem([option.key])
+            let container = editorRef.value?.editorRef?.getEditableContainer()
+            if (container) {
+                if (lastFocusedId) {
+                    container.querySelector(`#${lastFocusedId}`)?.classList.remove('focus')
+                }
+                lastFocusedId = option.key as string
+                container.querySelector(`#${lastFocusedId}`)?.classList.add('focus')
+            }
         }
     }
 }

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

@@ -4,10 +4,12 @@ import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 const parseElemHtml = (type: string) => {
     return (domElem: Element, children: SlateDescendant[], editor: IDomEditor): SlateElement => {
         const dataKey = domElem.getAttribute('data-key') || ''
+        const dataIndent = domElem.getAttribute('data-indent-level') || ''
         const myResume = {
             type,
             dataKey,
-            children
+            children,
+            dataIndent
         }
         return myResume
     }

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

@@ -5,6 +5,10 @@ import { nodeSet } from '@/views/editor/constants/nodeParsed.ts'
 const renderElem = (type: string, style = { display: 'block' }) => {
     return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
         const dataKey = (elem as any).dataKey
+        Object.assign(style, {
+            // @ts-ignore
+            paddingLeft: Number(elem.dataIndent) * 5 + 'px'
+        })
         return h(type, { style, attrs: { dataKey: dataKey, id: dataKey } }, children)
     }
 }

src/views/editor/index.vue

@@ -20,4 +20,8 @@ onMounted(() => {
     })
 })
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+:deep(.focus) {
+    background: red;
+}
+</style>