feat: 样式

src/assets/css/element.less

@@ -33,9 +33,12 @@ row {
     display: flex !important;
     flex-wrap: wrap;
 }
-entry {
-    flex: 1;
+html-thead entry {
     font-weight: bold;
+}
+entry {
+    flex: 0.5;
+
     border: 1px solid var(--border-color);
 }
 pan {

src/configs/node.config.ts

@@ -43,7 +43,10 @@ export const nodeSet = [
     'IMGAREA',
     'KEY',
     'REVDATE',
-    'SHEETNBR'
+    'SHEETNBR',
+    //处理原生html标签
+    'HTML-TABLE',
+    'HTML-THEAD',
+    'HTML-TBODY'
 ]
-export const htmlNode = ['TABLE', 'THEAD', 'TBODY']
 export const contentHoldNode = ['PARA', 'PARAC', 'TITLE', 'TITLEC', 'REFEXT', 'STDNAME', 'ZONE', 'PAN', 'REFBLOCK']

src/views/editor/components/Tree.vue

@@ -3,7 +3,7 @@
         <div class="p-[10px]">
             <n-input v-model:value="searchKey" placeholder="搜索" />
         </div>
-        <div class="flex-auto overflow-auto">
+        <div class="flex-auto overflow-auto" ref="treeContainer">
             <n-tree
                 ref="treeRef"
                 v-model:expanded-keys="expandedKeys"
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { treeSelectedKeys, treeRef, searchKey, expandedKeys, treeData } from '../constants/tree'
+import { treeSelectedKeys, treeRef, searchKey, expandedKeys, treeData, treeContainer } from '../constants/tree'
 import { buildFilteredTree, getAllKeys, nodeProps, renderLabel } from '../functions/tree'
 
 const realComposableData = computed(function () {

src/views/editor/constants/tree.ts

@@ -5,3 +5,4 @@ export const treeData: Ref<TreeOption[]> = ref([])
 export const treeSelectedKeys = ref<string[]>([])
 export const treeRef = ref()
 export const searchKey = ref('')
+export const treeContainer = ref()

src/views/editor/functions/index.ts

 import { showLoading } from '../constants'
 import { IDomEditor } from '@wangeditor/editor'
-import { treeData, treeRef, treeSelectedKeys } from '../constants/tree'
+import { treeContainer, treeData, treeRef, treeSelectedKeys } from '../constants/tree'
 import { dropdownConfig, editorRef, editorHtml } from '../constants'
 import { getUUID } from '@/utils'
 import { compareData, compareLeftContent, compareRightContent, showCompare } from '../constants/compare'
@@ -14,7 +14,8 @@ export const handleCreated = (editor: IDomEditor) => {
 }
 export const handleClick = (event: any) => {
     const key = getKey(event.target)
-    treeRef.value?.scrollTo({ key })
+    const node = treeContainer.value?.querySelector(`[data-key="${key}"]`)
+    node.scrollIntoView({ behavior: 'smooth' })
     treeSelectedKeys.value = [key]
     setEditorActive(key)
 }
@@ -113,9 +114,17 @@ export const uploadXml = async () => {
             const xmlProcessing = useXMLProcessing()
             showLoading.value = true
             const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
-            console.log(res)
+            // console.log(res.treeData[0].node.attributes)
+            let xmlContent = res.xmlContent
+            //处理原生html标签
+            xmlContent = xmlContent.replace(/<TABLE(?!\s*\/>)([^>]*)>/g, '<HTML-TABLE data-w-e-type="HTML-TABLE" $1>')
+            xmlContent = xmlContent.replace(/<\/TABLE>/g, '</HTML-TABLE>')
+            xmlContent = xmlContent.replace(/<THEAD(?!\s*\/>)([^>]*)>/g, '<HTML-THEAD data-w-e-type="HTML-THEAD" $1>')
+            xmlContent = xmlContent.replace(/<\/THEAD>/g, '</HTML-THEAD>')
+            xmlContent = xmlContent.replace(/<TBODY(?!\s*\/>)([^>]*)>/g, '<HTML-TBODY data-w-e-type="HTML-TBODY" $1>')
+            xmlContent = xmlContent.replace(/<\/TBODY>/g, '</HTML-TBODY>')
             showLoading.value = false
-            editorHtml.value = res.xmlContent
+            editorHtml.value = xmlContent
         }
         input.remove()
     })

src/views/editor/functions/tree.ts

@@ -6,18 +6,12 @@ import { TreeOption } from 'naive-ui'
 export const renderLabel = ({ option }: { option: TreeOption }) => {
     const container = editorRef.value?.getEditableContainer()
     const dom = container!.querySelector(`[data-key="${option.key}"]`) as HTMLElement
+    //处理原生html标签
+    const label = option.label?.replace(/HTML-/g, '')
     if (dom && dom.firstElementChild?.tagName == 'SPAN') {
-        return {
-            default: () => {
-                return [h('span', {}, option.label), h('span', { class: 'text-textColorDisabled ml-[5px]' }, dom.innerText)]
-            }
-        }
+        return [h('span', { 'data-key': option.key }, label), h('span', { class: 'text-textColorDisabled ml-[5px]' }, dom.innerText)]
     } else {
-        return {
-            default: () => {
-                return option.label
-            }
-        }
+        return h('span', { 'data-key': option.key }, { default: () => label })
     }
 }
 //点击节点