feat: 样式调整

src/assets/css/element.less

@@ -36,10 +36,13 @@ row {
 html-thead entry {
     font-weight: bold;
 }
+tgroup {
+    border: 1px solid var(--border-color);
+}
 entry {
     flex: 0.5;
-
-    border: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
 }
 pan {
     display: inline-block !important;

src/views/editor/components/Compare.vue

@@ -52,12 +52,15 @@ import {
     compareRightContent
 } from '../constants/compare'
 import { clearLeftXml, clearRightXml, handleScrollTopLeft, handleScrollTopRight, uploadLeftXml, uploadRightXml } from '../functions/compare'
+import { handleNativeHtml } from '../functions'
 
 watchEffect(() => {
     if (compareLeftContent.value && compareRightContent.value) {
         const xmlProcessing = useXMLProcessing()
         const res = xmlProcessing.dualCompareFromString(compareLeftContent.value, compareRightContent.value, nodeSet, contentHoldNode)
         Object.assign(compareData, res)
+        compareData.treeOld = handleNativeHtml(compareData.treeOld)
+        compareData.treeNew = handleNativeHtml(compareData.treeNew)
     }
 })
 </script>

src/views/editor/functions/compare.ts

@@ -9,6 +9,7 @@ import {
     compareRightRef,
     showCompare
 } from '../constants/compare'
+import { handleNativeHtml } from '.'
 
 export const handleClickDom = (event: any) => {
     if (!showCompare.value) return
@@ -43,7 +44,7 @@ export const uploadLeftXml = async () => {
             const xmlProcessing = useXMLProcessing()
             const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
             compareLeftContent.value = res.xmlContent
-            compareData.treeOld = res.xmlContent
+            compareData.treeOld = handleNativeHtml(res.xmlContent)
         }
         input.remove()
     })
@@ -61,7 +62,7 @@ export const uploadRightXml = async () => {
             const xmlProcessing = useXMLProcessing()
             const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
             compareRightContent.value = res.xmlContent
-            compareData.treeNew = res.xmlContent
+            compareData.treeNew = handleNativeHtml(res.xmlContent)
         }
         input.remove()
     })

src/views/editor/functions/index.ts

@@ -115,16 +115,8 @@ export const uploadXml = async () => {
             showLoading.value = true
             const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
             // 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 = xmlContent
+            editorHtml.value = handleNativeHtml(res.xmlContent)
         }
         input.remove()
     })
@@ -137,3 +129,13 @@ export const compareXml = () => {
     compareLeftContent.value = ''
     compareRightContent.value = ''
 }
+//处理原生html标签
+export const handleNativeHtml = (html: string) => {
+    html = html.replace(/<TABLE(?!\s*\/>)([^>]*)>/g, '<HTML-TABLE data-w-e-type="HTML-TABLE" $1>')
+    html = html.replace(/<\/TABLE>/g, '</HTML-TABLE>')
+    html = html.replace(/<THEAD(?!\s*\/>)([^>]*)>/g, '<HTML-THEAD data-w-e-type="HTML-THEAD" $1>')
+    html = html.replace(/<\/THEAD>/g, '</HTML-THEAD>')
+    html = html.replace(/<TBODY(?!\s*\/>)([^>]*)>/g, '<HTML-TBODY data-w-e-type="HTML-TBODY" $1>')
+    html = html.replace(/<\/TBODY>/g, '</HTML-TBODY>')
+    return html
+}