style(global): 优化全局加载蒙层及消息提示规范

- 重构全局阻塞加载蒙层，替换为自定义动画实现
- 添加亮暗主题下全局加载背景及模糊效果过渡
- 强制使用全局统一消息提示对象，禁止从 naive-ui 直接导入 useMessage
- 规范全局按键事件监听，提高编辑器撤销重做体验
- 更新 XML 编辑器状态管理，增强节点映射与撤销重做机制
- 优化节点操作方法，新增 XML 片段插入与文本搜索替换功能
- 禁止直接导入定义状态管理的 defineStore
- 统一所有选择框控件使用 CommonSelect，禁止直接用原生 n-select
- 统一上传、下载组件接口支持自定义 Promise 函数及本地 Blob 处理
- 细化渲染文档节点的颜色和样式规范，强制部分节点使用物理样式精确定制
- 调整弹窗组件宽度绑定方式，避免样式警告与布局异常
- 替换 CommonTableSelect 中原生按钮为项目封装按钮组件
- 移除不必要的无用引入，精简部分代码实现

.gemini/.rules.md

@@ -69,6 +69,7 @@
   - **边框色**：`border-color1` ~ `border-color4`、`border-divider`、`border-base`
   - **文字色**：`text-color1` ~ `text-color4`、`text-primary`、`text-regular`、`text-secondary`
   - **状态/提示色**：使用 `text-danger` (或 `text-danger-x` 如 `text-danger-6` 对应系统错误色)、`text-success` (成功色)、`text-warning` (警示色)，严禁使用 `text-red-600` 等固定原生色。
+  - **特定技术手册/PDF呈现例外**：在渲染特定技术手册节点（如 `DocNodeRenderer` 内的 `WARNING`, `CAUTION`, `NOTE`, `EFFECT`, `CONEFFECT`, `SBEFF`, `SBEFFC`, `REFBLOCK`, `REFINT`, `REFEXT`, `GRPHCREF`, `EIN` 以及 PDF 特定的表格、签字点等）时，其渲染样式必须严格以手册/PDF规范文件下的物理颜色、物理边框或字体样式定义为主（例如：警告 `WARNING` 必须为固定红 `red`，警戒 `CAUTION` 必须为 `#ff6a00`，注意 `NOTE` 必须为蓝色 `blue`，适用性说明 `EFFECT` / `SBEFF` 等必须为红色斜体 `color: red; font-style: italic;`，引用及功能号 `REFBLOCK` / `REFINT` / `REFEXT` / `GRPHCREF` / `EIN` 等必须为蓝色 `color: blue`，且功能号 `EIN` 必须带下划线，签字表必须是硬编码的 `border-black` 黑实线等）。对于此类具有强制色彩与表现形式规范的节点，**必须使用具体的物理样式属性（如 style="color: red;"）进行精确定制，严禁使用 Tailwind/Naive UI 随暗黑模式等主题自适应的颜色类名或变量（如 text-primary, text-danger, text-red-600 等）**，以确保手册呈现的技术准确性与 PDF 导出的一致性。其他常规 UI 框架及骨架情况方可采用系统内置主题配置。
 
 ### 主题配置参考
 系统内置的亮暗主题颜色配置如下，可通过主题变量自适应：
@@ -88,6 +89,7 @@
 ---
 
 ## 7. Dialog 与 UI 反馈规范
+- **消息提示规范 (强制)**：全项目**禁止**在任何业务组件、Hook 或 Store 中从 `naive-ui` 导入并使用 `useMessage()`，也**不要**使用 `@/hooks/useMessage.ts`。**强制要求统一使用全局挂载的 `window.$message`**（如 `window.$message.success`、`window.$message.error`、`window.$message.warning` 等），以避免多余的 Provider 上下文依赖。
 - **Promise 风格确认弹窗 (强制)**：删除、禁用、重置等敏感确认操作**必须**使用 `await window.$dialog.warning({ ... })` 进行阻塞调用。
 - **禁止 Callback 模式**：严禁使用 `onPositiveClick`、`onNegativeClick` 等回调函数形式。
 - **配置约定**：底层 Hook 已封装默认配置，业务调用时**禁止**手动重复设置 `positiveText: '确定'` 或 `negativeText: '取消'`。
@@ -175,3 +177,21 @@
   ```
 - **禁止手动导入 `defineStore`**：`defineStore` 已配置为全局自动导入，在 `index.ts` 中直接使用即可，无需编写 `import { defineStore } from 'pinia'`。
 
+---
+
+## 15. XML 编辑器树与编辑区联动定位规范
+- **最近块定位 (最近渲染块容器)**：
+  - 定位编辑区时，虚拟滚动的块位置定位**严禁**使用顶层大块（如 `TOPIC` 等远祖先容器）进行直接命中，否则会导致视图跳到整个章节开头。
+  - **必须**使用自底向上的祖先链遍历方法（如 `findNearestBlockIdx`），查找最近（即最深层）的已注册块容器（如 `SUBTASK`, `PRETOPIC` 等），以确保精确定位到目标节点所在的子块。
+- **未独立渲染节点的定位与选中回退 (选中状态同步)**：
+  - 在 `DocNodeRenderer` 中部分节点被合并渲染或剔除了独立 DOM（即自身在 DOM 树中没有 `data-node-id` 标签，如 `CONNBR`, `CONNAME` ），当左侧树点击此类节点时，定位逻辑应由下至上沿着路径（`nodePath`）查找第一个已挂载的父/祖先 DOM 节点，并直接对该父/祖先 DOM 节点进行滚动居中。
+  - 在定位到父/祖先 DOM 节点后，**必须**同步将 `editorStore.setSelectedNodeId` 更新为该实际高亮/定位的父/祖先节点 ID，以便右侧编辑区在该父/祖先节点区域上呈现选中高亮状态，左侧树也同步选中该节点，保持焦点一致。
+
+---
+
+## 16. 全局选择框与输入框占位符规范
+- **统一使用 `CommonSelect`**：在所有业务界面中，**禁止**直接使用 Naive UI 原生的 `n-select`，**强制要求**统一使用项目封装好的全局组件 `CommonSelect`。
+- **禁用冗余的 placeholder 占位符**：
+  - 在编写 `CommonSelect` 或 `n-input` 组件时，对于普通属性、枚举选择或内容输入，**禁止**手动添加 `placeholder="请选择"`、`placeholder="选择"` 或 `placeholder="请输入"` 等冗余的占位字符。
+  - 只在具有明确指示性特指文案的业务场景下（如“请选择切换动画”等特有场景），方可添加具体的占位文本。
+- **事件监听规范**：对 `CommonSelect` 组件监听值变更回调时，**必须**绑定组件导出的 **`@change`** 事件（如 `@change="onTagChange"`），**禁止**使用 `@update:value` 监听器，以保障数据联动更新的生命周期一致性。

src/App.vue

@@ -14,14 +14,13 @@
                             <router-view></router-view>
                         </div>
 
-                        <!-- 全局阻塞式加载蒙层 (极简版) -->
+                        <!-- 全局阻塞式加载蒙层 -->
                         <transition name="loading-fade">
                             <div v-if="appStore.loading" class="global-loading-overlay">
-                                <n-spin size="large">
-                                    <template #description>
-                                        <span class="loading-text">{{ appStore.loadingText }}</span>
-                                    </template>
-                                </n-spin>
+                                <div class="custom-loader-wrapper">
+                                    <div class="custom-loader-ring"></div>
+                                    <div class="custom-loading-text">{{ appStore.loadingText }}</div>
+                                </div>
                             </div>
                         </transition>
                     </n-dialog-provider>
@@ -198,15 +197,49 @@ body.gray-mode {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(4px);
+    background-color: rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(10px);
+    transition:
+        background-color 0.3s,
+        backdrop-filter 0.3s;
 }
 
-.loading-text {
-    margin-top: 12px;
+.dark .global-loading-overlay {
+    background-color: rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(10px);
+}
+
+.custom-loader-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.custom-loader-ring {
+    width: 44px;
+    height: 44px;
+    border: 3px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
+    border-top: 3px solid var(--primary-color);
+    border-radius: 50%;
+    animation: loader-spin 0.85s linear infinite;
+}
+
+@keyframes loader-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.custom-loading-text {
+    margin-top: 14px;
     font-size: 14px;
     color: var(--primary-color);
-    letter-spacing: 1px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
 }
 
 .loading-fade-enter-active,

src/components/CommonDownloadModal.vue

@@ -66,11 +66,12 @@
 import { DownloadOutline, CheckmarkCircleOutline } from '@vicons/ionicons5'
 
 interface DownloadOptions {
-    api?: string
-    params?: any
     fileName?: string
     title?: string
     callback?: (success: boolean) => void
+    localBlob?: Blob
+    /** 自定义下载 Promise 函数 */
+    downloadFunc?: () => Promise<any>
 }
 
 const themeVars = useThemeVars()
@@ -96,33 +97,40 @@ const open = async (options: DownloadOptions) => {
     // 开启模拟进度条定时器
     progressTimer = setInterval(() => {
         if (progress.value < 90) {
-            progress.value += Math.floor(Math.random() * 5) + 2
-        } else if (progress.value < 98) {
-            progress.value += 0.5
+            progress.value += Math.floor(Math.random() * 8) + 4
         }
-    }, 150)
+    }, 120)
 
-    const { api = '/v1/plugins/ATTACHMENT_DOWN', params = {}, fileName: name } = options
+    const name = options.fileName
 
     try {
-        const success = await service.download(api, params, name, { showLoading: false })
-
-        if (success) {
-            progress.value = 100
-            window.$message.success('下载任务已完成')
-            // 延迟关闭，让用户看到 100% 成功状态
-            setTimeout(() => {
-                show.value = false
-                options.callback?.(true)
-            }, 800)
+        if (options.downloadFunc) {
+            await options.downloadFunc()
+        } else if (options.localBlob) {
+            // 如果提供了本地 Blob，直接触发本地下载
+            const downloadUrl = window.URL.createObjectURL(options.localBlob)
+            const a = document.createElement('a')
+            a.href = downloadUrl
+            a.download = name || `export_${new Date().getTime()}.xml`
+            document.body.appendChild(a)
+            a.click()
+            window.URL.revokeObjectURL(downloadUrl)
+            document.body.removeChild(a)
         } else {
-            show.value = false
-            options.callback?.(false)
+            // 兜底模拟
+            await new Promise((resolve) => setTimeout(resolve, 800))
         }
-    } catch (err) {
+
+        progress.value = 100
+        window.$message.success('下载任务已完成')
+        setTimeout(() => {
+            show.value = false
+            options.callback?.(true)
+        }, 800)
+    } catch (err: any) {
         console.error('Download failed', err)
         progress.value = 0
-        window.$message.error('下载失败，请重试')
+        window.$message.error(err.message || '下载失败')
         show.value = false
         options.callback?.(false)
     } finally {

src/components/CommonExportModal.vue

 <template>
-    <CommonModal v-model="show" title="导出确认" style="width: 500px">
+    <CommonModal v-model="show" title="导出确认" :width="500">
         <div class="p-4 py-6">
             <n-form-item label="选择导出范围" label-placement="left">
                 <n-radio-group v-model:value="exportMode" name="exportMode">
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { service } from '@/api/index'
+
 
 const show = ref(false)
 const loading = ref(false)

src/components/CommonImportModal.vue

 <template>
-    <CommonModal v-model="showModal" :title="title" style="width: 500px">
+    <CommonModal v-model="showModal" :title="title" :width="500">
         <div class="p-6">
             <n-upload v-model:file-list="fileList" :default-upload="false" :max="1" action="#" @before-upload="beforeUpload" @remove="handleRemove">
                 <n-upload-dragger v-if="fileList.length === 0">
@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import { CloudUploadOutline, DownloadOutline } from '@vicons/ionicons5'
 import type { UploadFileInfo } from 'naive-ui'
-import { service } from '@/api/index'
+
 
 interface ImportOptions {
     title?: string
@@ -193,10 +193,10 @@ const handleDownloadTemplate = () => {
         ...(context.value.downloadParams || {})
     }
     const downloadApi = context.value.templateApi || '/v1/plugins/ATTACHMENT_DOWN'
+    const fileName = context.value.templateTitle || '导入模板.xlsx'
     openDownloadModal({
-        api: downloadApi,
-        params,
-        fileName: context.value.templateTitle || '导入模板.xlsx',
+        downloadFunc: () => service.download(downloadApi, params, fileName),
+        fileName,
         title: '下载导入模板'
     })
 }

src/components/CommonTable.vue

@@ -128,7 +128,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs } from 'vue'
+
 import { useThemeVars } from 'naive-ui'
 import type { DataTableColumns } from 'naive-ui'
 import { PlayBackOutline, ChevronBackOutline, ChevronForwardOutline, PlayForwardOutline, RefreshOutline } from '@vicons/ionicons5'
@@ -419,7 +419,6 @@ const mergedColumns = computed(() => {
             title: '序号',
             key: 'index',
             width: 80,
-            align: 'center',
             render: (_: any, index: number) => {
                 return (currentPage.value - 1) * currentPageSize.value + index + 1
             }

src/components/CommonTableSelect.vue

@@ -38,7 +38,7 @@
                         size="small"
                         @keyup.enter="handleSearch"
                     />
-                    <n-button type="primary" size="small" @click="handleSearch">搜索</n-button>
+                    <CommonButton type="primary" size="small" @click="handleSearch">搜索</CommonButton>
                 </n-input-group>
             </div>
             <div class="flex-1 min-h-0">

src/components/CommonTreeSelect.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { service } from '@/api/index'
+
 import type { PropType, ComponentPublicInstance } from 'vue'
 
 const props = defineProps({

src/components/CommonUploadModal.vue

 <template>
-    <CommonModal v-model="show" :title="title" style="width: 500px">
+    <CommonModal v-model="show" :title="title" :width="500">
         <div class="p-6">
             <n-upload
                 v-model:file-list="fileList"
@@ -38,19 +38,17 @@
 <script setup lang="ts">
 import { CloudUploadOutline } from '@vicons/ionicons5'
 import type { UploadFileInfo } from 'naive-ui'
-import { service } from '@/api/index'
+
 
 export interface UploadOptions {
     /** 弹窗标题 */
     title?: string
-    /** 上传接口地址 (FunctionCode), 不传则默认为 /v1/plugins/ATTACHMENT_UPLOAD */
-    api?: string
     /** 允许选择的文件类型，例如 'image/*' */
     accept?: string
-    /** 接口所需的其它业务参数 */
-    data?: Record<string, any>
     /** 上传成功后的回调 */
-    onSuccess?: (res?: any) => void
+    onSuccess?: (res?: any, file?: File | null) => void
+    /** 自定义上传 Promise 函数 */
+    uploadFunc?: (file: File) => Promise<any>
 }
 
 const show = ref(false)
@@ -84,47 +82,43 @@ const handleRemove = () => {
 const handleConfirm = async () => {
     const ctx = context.value
     if (fileList.value.length === 0 || !ctx) return
-    const uploadApi = ctx.api || '/v1/plugins/ATTACHMENT_UPLOAD'
 
     uploading.value = true
     uploadProgress.value = 0
 
-    // 模拟进度
+    // 开启模拟进度条定时器
     progressTimer = setInterval(() => {
         if (uploadProgress.value < 90) {
-            uploadProgress.value += Math.floor(Math.random() * 5) + 1
+            uploadProgress.value += Math.floor(Math.random() * 8) + 4
         }
-    }, 200)
+    }, 150)
 
     try {
-        const formData = new FormData()
         const file = fileList.value[0]?.file
-        if (file) {
-            formData.append('file', file)
-        }
-
-        // 合并业务参数(cat, sourceId 等)
-        if (ctx.data) {
-            Object.entries(ctx.data).forEach(([key, val]) => {
-                formData.append(key, String(val))
-            })
+        let res = null
+        if (ctx.uploadFunc && file) {
+            res = await ctx.uploadFunc(file)
+        } else {
+            // 纯前端模拟演示，延迟一小段时间代表上传
+            await new Promise((resolve) => setTimeout(resolve, 800))
         }
 
-        const res = await service.post(uploadApi, formData, { showLoading: false })
-        if (res.code === 200) {
-            uploadProgress.value = 100
-            window.$message.success('上传成功')
-            ctx.onSuccess?.(res)
-            setTimeout(() => {
-                show.value = false
-            }, 500)
-        }
+        uploadProgress.value = 100
+        window.$message.success('上传成功')
+        ctx.onSuccess?.(res, file)
+        setTimeout(() => {
+            show.value = false
+        }, 500)
     } catch (e: any) {
         console.error('Upload failed', e)
         uploadProgress.value = 0
+        window.$message.error(e.message || '上传失败')
     } finally {
         uploading.value = false
-        if (progressTimer) clearInterval(progressTimer)
+        if (progressTimer) {
+            clearInterval(progressTimer)
+            progressTimer = null
+        }
     }
 }
 

src/hooks/useEventBus.ts

 import mitt from 'mitt'
-import { onBeforeUnmount } from 'vue'
+
 
 type Fn = (...args: any[]) => void
 

src/layouts/MainLayout.vue

@@ -19,10 +19,12 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/store/app/index'
+import { useEditorStore } from '@/store/editor'
 import CommonDownloadModal from '@/components/CommonDownloadModal.vue'
 
 const themeVars = useThemeVars()
 const appStore = useAppStore()
+const editorStore = useEditorStore()
 const globalImportModalRef = ref()
 const globalExportModalRef = ref()
 const globalAttachmentModalRef = ref()
@@ -35,29 +37,59 @@ const handleGlobalKeydown = (e: KeyboardEvent) => {
     const ctrl = e.ctrlKey || e.metaKey
     const shift = e.shiftKey
 
+    // 如果当前焦点在普通文本输入框中，保留其原生的行内打字撤销行为
+    const target = e.target as HTMLElement
+    const isInput = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
+
     // Ctrl+Shift+D: 切换深色/浅色主题
     if (ctrl && shift && e.key.toLowerCase() === 'd') {
         e.preventDefault()
         appStore.isDark = !appStore.isDark
         return
     }
+
+    if (!isInput) {
+        // Ctrl+Z: 全局撤销
+        if (ctrl && !shift && e.key.toLowerCase() === 'z') {
+            e.preventDefault()
+            if (document.activeElement && (document.activeElement as HTMLElement).isContentEditable) {
+                ;(document.activeElement as HTMLElement).blur()
+            }
+            setTimeout(() => {
+                editorStore.undo()
+            }, 0)
+            return
+        }
+
+        // Ctrl+Y 或 Ctrl+Shift+Z: 全局重做
+        if ((ctrl && e.key.toLowerCase() === 'y') || (ctrl && shift && e.key.toLowerCase() === 'z')) {
+            e.preventDefault()
+            if (document.activeElement && (document.activeElement as HTMLElement).isContentEditable) {
+                ;(document.activeElement as HTMLElement).blur()
+            }
+            setTimeout(() => {
+                editorStore.redo()
+            }, 0)
+            return
+        }
+    }
 }
 
 onMounted(() => {
-    window.addEventListener('keydown', handleGlobalKeydown)
+    window.addEventListener('keydown', handleGlobalKeydown, true)
     window.$importModal = globalImportModalRef.value
     window.$exportModal = globalExportModalRef.value
     window.$attachmentModal = globalAttachmentModalRef.value
     window.$uploadModal = globalUploadModalRef.value
     window.$previewModal = globalPreviewModalRef.value
     window.$downloadModal = globalDownloadModalRef.value
-    
+
     // 初始化应用主题
     appStore.applyTheme()
 })
 
 onUnmounted(() => {
-    window.removeEventListener('keydown', handleGlobalKeydown)
+    window.removeEventListener('keydown', handleGlobalKeydown, true)
 })
 </script>
 

src/layouts/components/SettingsDrawer.vue

@@ -168,7 +168,7 @@
                     <!-- 页面切换动画 -->
                     <div class="mb-5">
                         <div class="text-sm font-semibold mb-3" :style="{ color: themeVars.textColor2 }">页面切换动画</div>
-                        <n-select v-model:value="appStore.transitionName" :options="transitionOptions" placeholder="请选择切换动画" />
+                        <CommonSelect v-model:value="appStore.transitionName" :options="transitionOptions" placeholder="请选择切换动画" />
                     </div>
 
                     <n-divider class="my-4" />

src/store/editor/types.ts

 import type { XmlNode } from '@/types/xmlNode'
 
+export interface Snapshot {
+    tree: XmlNode
+    selectedNodeId: string | null
+}
+
 export interface EditorState {
     xmlTree: XmlNode | null
     selectedNodeId: string | null
-    undoStack: XmlNode[] // 保存 XmlNode 历史快照
-    redoStack: XmlNode[] // 保存 XmlNode 重做快照
+    nodeMap: Map<string, { node: XmlNode; parent: XmlNode | null }>
+    undoStack: Snapshot[] // 保存 Snapshot 历史快照
+    redoStack: Snapshot[] // 保存 Snapshot 重做快照
     lastUndoRedoTime: number // 回退重做动作的时间戳，用于触发视口重定位
+    editorZoom: number // 编辑器文字字号缩放比例 (80 - 200)
 }

src/types/global.d.ts

@@ -61,6 +61,8 @@ declare global {
         $loading: {
             start: (text?: string) => void
             finish: () => void
+            show: (text?: string) => void
+            hide: () => void
         }
         $importModal: any
         $exportModal: any

src/utils/api.ts

-import { service } from '@/api/index'
+
 
 /**
  * 通用列表数据请求工具

src/utils/naive.ts

@@ -62,9 +62,18 @@ export function setupNaiveDiscreteApi() {
             appStore.loading = true
             appStore.loadingText = text || '加载中...'
         },
+        show: (text?: string) => {
+            const appStore = useAppStore()
+            appStore.loading = true
+            appStore.loadingText = text || '加载中...'
+        },
         finish: () => {
             const appStore = useAppStore()
             appStore.loading = false
+        },
+        hide: () => {
+            const appStore = useAppStore()
+            appStore.loading = false
         }
     }
 }

src/utils/render.ts

-import { h } from 'vue'
+
 import { NText } from 'naive-ui'
 import CommonButton from '@/components/CommonButton.vue'
 
@@ -50,24 +50,14 @@ export const renderAttachmentAction = (options: AttachmentRenderOptions) => {
 }
 
 export interface UploadActionOptions {
-    /** 上传接口名 (FunctionCode), 不传则默认为底座定义的兜底接口 */
-    api?: string
-    /** 业务分类值 */
-    category?: string
-    /** 业务 ID */
-    sourceId?: string | number
     /** 弹窗标题 */
     title?: string
     /** 允许选择的文件类型，例如 'image/*' */
     accept?: string
     /** 成功后的回调 */
-    onSuccess?: (res?: any) => void
-    /** 分类字段名，默认 'fileCategory' */
-    categoryKey?: string
-    /** 业务 ID 字段名，默认 'sourceId' */
-    sourceIdKey?: string
-    /** 其它额外参数 */
-    extraData?: Record<string, any>
+    onSuccess?: (res?: any, file?: File | null) => void
+    /** 自定义上传 Promise 函数 */
+    uploadFunc?: (file: File) => Promise<any>
 }
 
 /**
@@ -75,32 +65,20 @@ export interface UploadActionOptions {
  * @description 弹出统一的附件上传模块
  */
 export const openUploadModal = (options: UploadActionOptions) => {
-    const { api, category, sourceId, title, accept, onSuccess, categoryKey = 'fileCategory', sourceIdKey = 'sourceId', extraData = {} } = options
-
-    const data: Record<string, any> = { ...extraData }
-    if (category) data[categoryKey] = category
-    if (sourceId) data[sourceIdKey] = String(sourceId)
-
-    window.$uploadModal?.open({
-        api: api || '/v1/plugins/ATTACHMENT_UPLOAD',
-        title: title || '上传附件',
-        accept,
-        data,
-        onSuccess
-    })
+    window.$uploadModal?.open(options)
 }
 
 export interface DownloadActionOptions {
-    /** 下载接口地址，默认为 '/v1/plugins/ATTACHMENT_DOWN' */
-    api?: string
-    /** 请求参数 */
-    params?: any
     /** 保存的文件名 */
     fileName?: string
     /** 弹窗标题 */
     title?: string
     /** 回调方法 */
     callback?: (success: boolean) => void
+    /** 本地下载兜底的 Blob 数据 */
+    localBlob?: Blob
+    /** 自定义下载 Promise 函数 */
+    downloadFunc?: () => Promise<any>
 }
 
 /**
@@ -126,10 +104,8 @@ export const getBaseOrigin = () => {
 }
 
 export interface OpenPDFModalOptions {
-    /** PDF 路径，支持：纯数字 ID、相对路径、绝对路径、或 Base64 数据 */
+    /** PDF 路径，支持：相对路径、绝对路径、或 Base64 数据 */
     path: string
-    /** 附件拉取接口，默认使用 ATTACHMENT_GET */
-    api?: string
     /** 是否在打开预览的同时自动拉起打印 */
     print?: boolean
     /** 是否为 Base64 编码的 PDF 数据 */
@@ -138,13 +114,12 @@ export interface OpenPDFModalOptions {
 
 /**
  * 打开统一的PDF预览弹窗
- * @param options.path - PDF 路径（数字 ID / 相对路径 / 绝对 URL / Base64）
- * @param options.api  - 拉取接口，默认 '/api/v1/plugins/ATTACHMENT_GET?down=Y&pkid='
+ * @param options.path - PDF 路径（相对路径 / 绝对 URL / Base64）
  * @param options.print - 是否拉起打印，默认 false
  * @param options.isBase64 - 是否是 Base64 数据，默认 false
  */
 export const openPDFModal = (options: OpenPDFModalOptions) => {
-    const { path, api = '/api/v1/plugins/ATTACHMENT_GET?down=Y&pkid=', print = false, isBase64 = false } = options
+    const { path, print = false, isBase64 = false } = options
 
     if (!path) {
         window.$message?.error('未提供文件路径')
@@ -231,49 +206,8 @@ export const openPDFModal = (options: OpenPDFModalOptions) => {
 
     // 确保以 / 开头（如果是相对路径且不以 / 开头）
     const normalizedPath = trimmedPath.startsWith('/') ? trimmedPath : '/' + trimmedPath
-
-    const isPdfFormat = (str: string) => /^\/\d+\.pdf$/.test(str)
-
-    let url = normalizedPath
-    let extension = ''
-    let fileName = ''
-    let fullUrl = ''
-
     const origin = getBaseOrigin()
-
-    if (isNaN(parseFloat(url))) {
-        extension = url.split('.').pop()?.toLowerCase() || ''
-        fileName = url.split('/').pop() || ''
-        fullUrl = `${origin}${url}`
-
-        if (isPdfFormat(url)) {
-            const match = url.match(/\d+/)
-            if (match) {
-                url = match[0]
-            }
-        }
-    }
-
-    // 再次判定是否是数字 ID (如纯数字或者是 /12345.pdf 格式转换后的数字)
-    // 或者如果显式传入了非默认的 api，说明用户指定了拉取接口，一律走指定的 api 拼接
-    const isCustomApi = api !== '/api/v1/plugins/ATTACHMENT_GET?down=Y&pkid='
-    if (!isNaN(parseFloat(url)) || isCustomApi) {
-        const base = api.startsWith('http://') || api.startsWith('https://') ? '' : origin
-        const paramValue = api.toLowerCase().includes('pkid') ? url : trimmedPath
-        const fileUrl = `${base}${api}${paramValue}`
-        handleAction(fileUrl)
-    } else {
-        if (extension === 'pdf') {
-            handleAction(fullUrl)
-        } else {
-            // 下载逻辑
-            openDownloadModal({
-                api: fullUrl,
-                fileName,
-                title: '文件下载'
-            })
-        }
-    }
+    handleAction(`${origin}${normalizedPath}`)
 }
 
 /**

src/utils/xmlParser.ts

@@ -78,11 +78,13 @@ function domElementToXmlNode(element: Element, parentId: string | null): XmlNode
 
     if (hasElementChildren && hasTextChildren) {
         // 混合内容节点（如 PARA, PARAC 中嵌有 REFBLOCK 等行内元素）
+        let textContentCollector = ''
         for (const child of childNodes) {
             if (child.nodeType === Node.TEXT_NODE) {
                 const text = child.textContent || ''
                 if (text) {
                     mixedContent.push({ type: 'text', text })
+                    textContentCollector += text
                 }
             } else if (child.nodeType === Node.ELEMENT_NODE) {
                 const childNode = domElementToXmlNode(child as Element, id)
@@ -90,6 +92,7 @@ function domElementToXmlNode(element: Element, parentId: string | null): XmlNode
                 mixedContent.push({ type: 'element', nodeId: childNode.id })
             }
         }
+        textContent = textContentCollector
     } else if (hasElementChildren) {
         // 纯元素子节点
         for (const child of childNodes) {
@@ -116,8 +119,9 @@ function domElementToXmlNode(element: Element, parentId: string | null): XmlNode
 /**
  * 将 XmlNode 树序列化回 XML 字符串
  */
-export function serializeTreeToXml(node: XmlNode, indent: number = 0): string {
-    const pad = '  '.repeat(indent)
+export function serializeTreeToXml(node: XmlNode, indent: number = 0, compact: boolean = false): string {
+    const pad = compact ? '' : '  '.repeat(indent)
+    const newline = compact ? '' : '\n'
     const attrs = Object.entries(node.attributes)
         .map(([k, v]) => `${k}="${escapeXmlAttr(v)}"`)
         .join(' ')
@@ -137,7 +141,7 @@ export function serializeTreeToXml(node: XmlNode, indent: number = 0): string {
             } else if (item.type === 'element' && item.nodeId) {
                 const child = node.children.find(c => c.id === item.nodeId)
                 if (child) {
-                    content += serializeTreeToXml(child, 0)
+                    content += serializeTreeToXml(child, 0, compact)
                 }
             }
         }
@@ -150,8 +154,8 @@ export function serializeTreeToXml(node: XmlNode, indent: number = 0): string {
     }
 
     // 纯元素子节点
-    const childrenXml = node.children.map(c => serializeTreeToXml(c, indent + 1)).join('\n')
-    return `${pad}<${openTag}>\n${childrenXml}\n${pad}</${node.tagName}>`
+    const childrenXml = node.children.map(c => serializeTreeToXml(c, indent + 1, compact)).join(newline)
+    return `${pad}<${openTag}>${newline}${childrenXml}${newline}${pad}</${node.tagName}>`
 }
 
 /**

src/views/editor/components/AttributeEditor/index.vue

@@ -7,25 +7,14 @@
 
         <n-form label-placement="left" label-width="120" size="small">
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <n-form-item 
-                    v-for="(def, name) in attributesDef" 
-                    :key="name" 
-                    :label="name.toString()"
-                    :required="def.requirement === '#REQUIRED'"
-                >
-                    <n-select
+                <n-form-item v-for="(def, name) in attributesDef" :key="name" :label="name.toString()" :required="def.requirement === '#REQUIRED'">
+                    <CommonSelect
                         v-if="def.enumValues && def.enumValues.length > 0"
                         v-model:value="model[name]"
                         :options="def.enumValues.map((v: any) => ({ label: v, value: v }))"
-                        placeholder="请选择"
-                        @update:value="handleAttrChange"
-                    />
-                    <n-input
-                        v-else
-                        v-model:value="model[name]"
-                        placeholder="请输入属性值"
-                        @input="handleAttrChange"
+                        @change="handleAttrChange"
                     />
+                    <n-input v-else v-model:value="model[name]" @input="handleAttrChange" />
                 </n-form-item>
             </div>
         </n-form>
@@ -55,13 +44,17 @@ const hasAttributes = computed(() => {
     return Object.keys(attributesDef.value).length > 0
 })
 
-watch(() => props.node.id, () => {
-    const nextModel: Record<string, string> = {}
-    for (const name of Object.keys(attributesDef.value)) {
-        nextModel[name] = props.node.attributes[name] || ''
-    }
-    model.value = nextModel
-}, { immediate: true })
+watch(
+    () => props.node.id,
+    () => {
+        const nextModel: Record<string, string> = {}
+        for (const name of Object.keys(attributesDef.value)) {
+            nextModel[name] = props.node.attributes[name] || ''
+        }
+        model.value = nextModel
+    },
+    { immediate: true }
+)
 
 function handleAttrChange() {
     updateAttributes(model.value)

src/views/editor/components/DocNodeRenderer/constants/index.ts

+export const LIST_ITEM_TAGS = [
+    'L1ITEM',
+    'L2ITEM',
+    'L3ITEM',
+    'L4ITEM',
+    'L5ITEM',
+    'L6ITEM',
+    'L7ITEM',
+    'UNLITEM',
+    'NUMLITEM'
+]
+
+export const HEADER_TAGS = [
+    'SMJC-HEADER',
+    'LMJC-HEADER',
+    'NRCJC-HEADER',
+    'TCJC-HEADER',
+    'QECJC-HEADER',
+    'EOTK-HEADER',
+    'DRJC-HEADER'
+]
+
+export const ROMAN_LOOKUP: Array<[string, number]> = [
+    ['x', 10],
+    ['ix', 9],
+    ['v', 5],
+    ['iv', 4],
+    ['i', 1]
+]

src/views/editor/components/EditorPanel/components/FindReplacePanel/functionals/index.ts

+import { useEditorStore } from '@/store/editor'
+import { useMessage } from 'naive-ui'
+
+export function useFindReplace(
+    props: { visible: boolean; syncEditorScroll: (nodeId: string, force: boolean) => void },
+    emit: (event: 'update:visible', value: boolean) => void
+) {
+    const editorStore = useEditorStore()
+    const message = useMessage()
+
+    const isExpanded = ref(false)
+    const findQuery = ref('')
+    const replaceQuery = ref('')
+    const matchCase = ref(false)
+    const regExp = ref(false)
+
+    const matches = ref<any[]>([])
+    const currentMatchIndex = ref(-1)
+    const findInputRef = ref<any>(null)
+    const matchesListRef = ref<HTMLElement | null>(null)
+    const matchItemRefs = ref<any[]>([])
+
+    // 每次匹配列表变化时重置 ref 数组
+    watch(() => matches.value, () => {
+        matchItemRefs.value = []
+    })
+
+    const scrollToActiveMatch = () => {
+        nextTick(() => {
+            const activeEl = matchItemRefs.value[currentMatchIndex.value]
+            const containerEl = matchesListRef.value
+            if (activeEl && containerEl) {
+                const activeRect = activeEl.getBoundingClientRect()
+                const containerRect = containerEl.getBoundingClientRect()
+                
+                // 若高亮项已超出可视区域的上边缘或下边缘，则将其滚动入屏
+                if (activeRect.top < containerRect.top || activeRect.bottom > containerRect.bottom) {
+                    activeEl.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest'
+                    })
+                }
+            }
+        })
+    }
+
+    const toggleExpand = () => {
+        isExpanded.value = !isExpanded.value
+    }
+
+    // 查找输入更新时，刷新搜索结果
+    const onFindInput = () => {
+        doSearch()
+    }
+
+    const toggleMatchCase = () => {
+        matchCase.value = !matchCase.value
+        doSearch()
+    }
+
+    const toggleRegExp = () => {
+        regExp.value = !regExp.value
+        doSearch()
+    }
+
+    const doSearch = () => {
+        if (!findQuery.value) {
+            matches.value = []
+            currentMatchIndex.value = -1
+            return
+        }
+        const results = editorStore.findText(findQuery.value, {
+            matchCase: matchCase.value,
+            regExp: regExp.value
+        })
+        matches.value = results
+        if (results.length > 0) {
+            // 如果旧的索引有效，保持接近 the 索引，否则从 0 开始
+            if (currentMatchIndex.value < 0 || currentMatchIndex.value >= results.length) {
+                currentMatchIndex.value = 0
+            }
+            // 自动聚焦到首个匹配点
+            focusMatch(currentMatchIndex.value)
+        } else {
+            currentMatchIndex.value = -1
+        }
+    }
+
+    // 聚焦到指定索引的匹配项，更新编辑器视图
+    const focusMatch = (index: number) => {
+        if (index < 0 || index >= matches.value.length) return
+        currentMatchIndex.value = index
+        const match = matches.value[index]
+        
+        // 选中该节点并调用父级导出的平滑滚动方法
+        editorStore.setSelectedNodeId(match.nodeId)
+        props.syncEditorScroll(match.nodeId, true)
+
+        // 自动将列表中的高亮项滚动入屏
+        scrollToActiveMatch()
+    }
+
+    const selectMatch = (idx: number) => {
+        focusMatch(idx)
+    }
+
+    const findNext = () => {
+        if (matches.value.length === 0) return
+        const nextIdx = (currentMatchIndex.value + 1) % matches.value.length
+        focusMatch(nextIdx)
+    }
+
+    const findPrev = () => {
+        if (matches.value.length === 0) return
+        const prevIdx = (currentMatchIndex.value - 1 + matches.value.length) % matches.value.length
+        focusMatch(prevIdx)
+    }
+
+    // 替换当前匹配项
+    const replaceCurrent = () => {
+        if (matches.value.length === 0 || currentMatchIndex.value === -1) return
+        const match = matches.value[currentMatchIndex.value]
+        
+        const success = editorStore.replaceMatch(match, replaceQuery.value)
+        if (success) {
+            message.success('替换成功')
+            // 重新查找以保持精准的位置和剩余结果统计
+            const prevIndex = currentMatchIndex.value
+            doSearch()
+            
+            // 如果仍然有匹配，定位到下一个或上一个
+            if (matches.value.length > 0) {
+                const nextIdx = Math.min(prevIndex, matches.value.length - 1)
+                focusMatch(nextIdx)
+            }
+        } else {
+            message.error('替换失败')
+        }
+    }
+
+    // 批量替换所有匹配项
+    const replaceAll = () => {
+        if (matches.value.length === 0) return
+        const count = editorStore.replaceAllMatches(findQuery.value, replaceQuery.value, {
+            matchCase: matchCase.value,
+            regExp: regExp.value
+        })
+        
+        if (count > 0) {
+            message.success(`成功替换了 ${count} 处匹配`)
+            matches.value = []
+            currentMatchIndex.value = -1
+            findQuery.value = ''
+        } else {
+            message.info('未找到可替换的匹配项')
+        }
+    }
+
+    // 生成轻量的上下文文本以便预览，根据是否展开动态调整上下文展示长度
+    const getMatchContext = (match: any): string => {
+        const text = match.text
+        const start = match.start
+        const len = match.length
+        const padding = isExpanded.value ? 35 : 15
+        const startOffset = Math.max(0, start - padding)
+        const endOffset = Math.min(text.length, start + len + padding)
+        
+        let context = text.substring(startOffset, endOffset)
+        if (startOffset > 0) context = '...' + context
+        if (endOffset < text.length) context = context + '...'
+        return context
+    }
+
+    const closePanel = () => {
+        emit('update:visible', false)
+    }
+
+    // 自动对焦查找框
+    watch(
+        () => props.visible,
+        (val) => {
+            if (val) {
+                nextTick(() => {
+                    findInputRef.value?.focus()
+                    doSearch()
+                })
+            } else {
+                matches.value = []
+                currentMatchIndex.value = -1
+            }
+        }
+    )
+
+    return {
+        isExpanded,
+        findQuery,
+        replaceQuery,
+        matchCase,
+        regExp,
+        matches,
+        currentMatchIndex,
+        findInputRef,
+        matchesListRef,
+        matchItemRefs,
+        toggleExpand,
+        onFindInput,
+        toggleMatchCase,
+        toggleRegExp,
+        findNext,
+        findPrev,
+        selectMatch,
+        replaceCurrent,
+        replaceAll,
+        getMatchContext,
+        closePanel
+    }
+}

src/views/editor/components/EditorPanel/components/FindReplacePanel/index.vue

+<template>
+    <transition name="slide-fade">
+        <div
+            v-if="visible"
+            class="find-replace-panel absolute top-4 right-4 z-50 bg-card/90 backdrop-blur-md border border-divider shadow-2xl rounded-xl p-4 flex flex-col space-y-3 select-none transition-all duration-300 ease-in-out"
+            :style="{ width: isExpanded ? '560px' : '320px' }"
+            :class="{ 'is-expanded': isExpanded }"
+        >
+            <!-- 头部标题与关闭按钮 -->
+            <div class="flex items-center justify-between">
+                <span class="text-xs font-bold text-color1 tracking-wide flex items-center space-x-1">
+                    <n-icon class="text-primary text-sm">
+                        <search-outline />
+                    </n-icon>
+                    <span>查找与替换</span>
+                </span>
+                <div class="flex items-center space-x-1">
+                    <!-- 放大展开/收起按钮 (通过 CodeOutline 表示 <>) -->
+                    <CommonButton size="tiny" quaternary circle @click="toggleExpand" :title="isExpanded ? '折叠面板' : '放大面板'">
+                        <template #icon>
+                            <n-icon><code-outline /></n-icon>
+                        </template>
+                    </CommonButton>
+                    <!-- 关闭按钮 -->
+                    <CommonButton size="tiny" quaternary circle @click="closePanel">
+                        <template #icon>
+                            <n-icon><close-outline /></n-icon>
+                        </template>
+                    </CommonButton>
+                </div>
+            </div>
+
+            <!-- 查找行 -->
+            <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-1">
+                    <n-input
+                        ref="findInputRef"
+                        v-model:value="findQuery"
+                        placeholder="查找内容..."
+                        size="small"
+                        class="flex-1"
+                        @input="onFindInput"
+                        @keydown.enter="findNext"
+                    >
+                        <template #suffix>
+                            <!-- 选项开关 -->
+                            <div class="flex items-center space-x-1 text-color3">
+                                <span
+                                    class="option-btn text-[10px] px-1 py-0.5 rounded cursor-pointer transition-colors"
+                                    :class="{ 'active bg-primary/20 text-primary font-bold': matchCase }"
+                                    title="区分大小写"
+                                    @click="toggleMatchCase"
+                                >
+                                    Aa
+                                </span>
+                                <span
+                                    class="option-btn text-[10px] px-1 py-0.5 rounded cursor-pointer transition-colors"
+                                    :class="{ 'active bg-primary/20 text-primary font-bold': regExp }"
+                                    title="正则表达式"
+                                    @click="toggleRegExp"
+                                >
+                                    .*
+                                </span>
+                            </div>
+                        </template>
+                    </n-input>
+                </div>
+            </div>
+
+            <!-- 替换行 -->
+            <div class="flex flex-col space-y-1">
+                <n-input
+                    v-model:value="replaceQuery"
+                    placeholder="替换为..."
+                    size="small"
+                    @keydown.enter="replaceCurrent"
+                />
+            </div>
+
+            <!-- 匹配结果及控制区 -->
+            <div class="flex items-center justify-between text-[11px] text-color2">
+                <div class="flex items-center space-x-1">
+                    <span v-if="matches.length > 0" class="font-mono text-primary font-bold">
+                        {{ currentMatchIndex + 1 }} / {{ matches.length }}
+                    </span>
+                    <span v-else class="text-color3">无匹配结果</span>
+                </div>
+                <div class="flex items-center space-x-1">
+                    <CommonButton size="tiny" quaternary :disabled="matches.length === 0" @click="findPrev">
+                        <template #icon>
+                            <n-icon><chevron-up-outline /></n-icon>
+                        </template>
+                    </CommonButton>
+                    <CommonButton size="tiny" quaternary :disabled="matches.length === 0" @click="findNext">
+                        <template #icon>
+                            <n-icon><chevron-down-outline /></n-icon>
+                        </template>
+                    </CommonButton>
+                </div>
+            </div>
+
+            <!-- 操作按钮组 -->
+            <div class="grid grid-cols-2 gap-2 pt-1">
+                <CommonButton
+                    size="small"
+                    secondary
+                    :disabled="matches.length === 0"
+                    @click="replaceCurrent"
+                    class="justify-center"
+                >
+                    替换当前
+                </CommonButton>
+                <CommonButton
+                    size="small"
+                    type="primary"
+                    :disabled="matches.length === 0"
+                    @click="replaceAll"
+                    class="justify-center font-semibold"
+                >
+                    全部替换
+                </CommonButton>
+            </div>
+
+            <!-- 匹配文本摘要预览（轻量化列表展示，极大提升体验） -->
+            <div
+                v-if="matches.length > 0"
+                ref="matchesListRef"
+                class="overflow-y-auto border border-divider/50 rounded-lg p-1 bg-fill-2 text-[10px] space-y-1 scrollbar-thin transition-all duration-300 ease-in-out"
+                :style="{ maxHeight: isExpanded ? '320px' : '96px' }"
+            >
+                <div
+                    v-for="(match, idx) in matches"
+                    :key="idx"
+                    :ref="el => { if (el) matchItemRefs[idx] = el }"
+                    class="match-item p-1 rounded cursor-pointer transition-all truncate hover:bg-primary/10"
+                    :class="{ 'bg-primary/20 active-match border-l-2 border-primary': idx === currentMatchIndex }"
+                    @click="selectMatch(idx)"
+                >
+                    <span class="bg-primary/10 px-1 rounded mr-1 font-bold" :class="idx === currentMatchIndex ? 'text-primary' : 'text-color3'">{{ match.tagName }}</span>
+                    <span>{{ getMatchContext(match) }}</span>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script setup lang="ts">
+import { SearchOutline, CloseOutline, ChevronUpOutline, ChevronDownOutline, CodeOutline } from '@vicons/ionicons5'
+import { useFindReplace } from './functionals'
+
+const props = defineProps<{
+    visible: boolean
+    syncEditorScroll: (nodeId: string, force: boolean) => void
+}>()
+
+const emit = defineEmits(['update:visible'])
+
+const {
+    isExpanded,
+    findQuery,
+    replaceQuery,
+    matchCase,
+    regExp,
+    matches,
+    currentMatchIndex,
+    findInputRef,
+    matchesListRef,
+    matchItemRefs,
+    toggleExpand,
+    onFindInput,
+    toggleMatchCase,
+    toggleRegExp,
+    findNext,
+    findPrev,
+    selectMatch,
+    replaceCurrent,
+    replaceAll,
+    getMatchContext,
+    closePanel
+} = useFindReplace(props, emit)
+</script>
+
+<style scoped>
+.find-replace-panel {
+    border-color: var(--n-border-color);
+}
+.option-btn:hover {
+    background-color: rgba(24, 160, 88, 0.1);
+}
+.match-item {
+    transition: all 0.15s ease;
+    color: var(--n-text-color);
+}
+.match-item.active-match {
+    color: var(--n-primary-color) !important;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+    width: 3px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 1.5px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: var(--n-primary-color);
+}
+
+/* 进出过渡动画 */
+.slide-fade-enter-active {
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.slide-fade-leave-active {
+    transition: all 0.2s cubic-bezier(0.7, 0, 0.84, 0);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateY(-8px) scale(0.98);
+    opacity: 0;
+}
+
+/* 当面板放大时，微调内部的字号、高度等样式，达到等比例放大弹框尺寸和内容的效果 */
+.find-replace-panel.is-expanded {
+    font-size: 13px !important;
+}
+.find-replace-panel.is-expanded :deep(.n-input) {
+    --n-font-size: 13px !important;
+    --n-height: 34px !important;
+}
+.find-replace-panel.is-expanded :deep(.n-button) {
+    --n-font-size: 13px !important;
+    --n-height: 32px !important;
+}
+.find-replace-panel.is-expanded .match-item {
+    font-size: 12px !important;
+    padding: 6px 8px !important;
+}
+.find-replace-panel.is-expanded .option-btn {
+    font-size: 11px !important;
+    padding: 2px 5px !important;
+}
+</style>

src/views/editor/components/EditorPanel/constants/index.ts

@@ -6,8 +6,8 @@ export const ALL_LIST_TAGS = ['LIST1', 'LIST2', 'LIST3', 'UNLIST']
 // 表格节点标签定义
 export const CALS_TABLE_TAGS = ['TABLE', 'TGROUP']
 
-// 容器节点：直接穿透，不独立成块，而是遍历其子节点
-export const TRANSPARENT_TAGS = new Set(['JOBCARD', 'CEP', 'TASK'])
+// 容器节点：直接穿透，不独立成块，而是遍历其子节点，以实现细粒度原子级虚拟滚动分块
+export const TRANSPARENT_TAGS = new Set(['JOBCARD', 'CEP', 'TASK', 'TFMATR'])
 
 /**
  * 虚拟滚动：各类节点的默认估计高度（px）

src/views/editor/components/EditorPanel/functionals/index.ts

-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { useEditorStore } from '@/store/editor'
 import type { XmlNode } from '@/types/xmlNode'
-import {
-    TRANSPARENT_TAGS,
-    ESTIMATED_HEIGHT,
-    getEstimatedHeight,
-    type EditorBlock,
-    type BlockPosition
-} from '../constants'
+import { TRANSPARENT_TAGS, getEstimatedHeight, type EditorBlock, type BlockPosition } from '../constants'
 
 /**
  * EditorPanel 组件核心逻辑 Hook
@@ -47,6 +40,11 @@ export function useEditorPanel() {
         const walk = (n: XmlNode) => {
             if (TRANSPARENT_TAGS.has(n.tagName)) {
                 n.children.forEach(walk)
+            } else if (n.tagName === 'TOPIC') {
+                // 特殊拆分：TOPIC 节点自身仅作为标题 Block，其内容子节点（SUBTASK 等）则作为平级 Block 扁平化，以实现细粒度虚拟化
+                blocks.push({ id: n.id, tagName: 'TOPIC', rawNode: n })
+                const contentNodes = n.children.filter((c) => c.tagName !== 'TITLE' && c.tagName !== 'TITLEC')
+                contentNodes.forEach(walk)
             } else {
                 blocks.push({ id: n.id, tagName: n.tagName, rawNode: n })
             }
@@ -66,9 +64,12 @@ export function useEditorPanel() {
     const heightsMap = ref<Record<string, number>>({})
 
     // 切换 XML 文件时，重置高度缓存
-    watch(() => editorStore.xmlTree?.id, () => {
-        heightsMap.value = {}
-    })
+    watch(
+        () => editorStore.xmlTree?.id,
+        () => {
+            heightsMap.value = {}
+        }
+    )
 
     const positions = computed<BlockPosition[]>(() => {
         const list: BlockPosition[] = []
@@ -84,7 +85,7 @@ export function useEditorPanel() {
 
     const totalHeight = computed(() => {
         const pos = positions.value
-        return pos.length === 0 ? 0 : pos[pos.length - 1].bottom
+        return pos.length === 0 ? 0 : pos[pos.length - 1].bottom + 350 // 额外增加 350px 底部留白，方便最底部节点操作与表格新增等动作
     })
 
     const viewportRef = ref<HTMLElement | null>(null)
@@ -108,7 +109,8 @@ export function useEditorPanel() {
     const startIndex = computed(() => {
         const pos = positions.value
         if (pos.length === 0) return 0
-        let low = 0, high = pos.length - 1
+        let low = 0,
+            high = pos.length - 1
         while (low <= high) {
             const mid = Math.floor((low + high) / 2)
             if (pos[mid].bottom > scrollTop.value) high = mid - 1
@@ -122,7 +124,8 @@ export function useEditorPanel() {
         const pos = positions.value
         if (pos.length === 0) return 0
         const visibleBottom = scrollTop.value + viewportHeight.value
-        let low = 0, high = pos.length - 1
+        let low = 0,
+            high = pos.length - 1
         while (low <= high) {
             const mid = Math.floor((low + high) / 2)
             if (pos[mid].top >= visibleBottom) high = mid - 1
@@ -131,9 +134,7 @@ export function useEditorPanel() {
         return Math.min(pos.length, low + BUFFER)
     })
 
-    const visibleBlocks = computed(() =>
-        blocksList.value.slice(startIndex.value, endIndex.value)
-    )
+    const visibleBlocks = computed(() => blocksList.value.slice(startIndex.value, endIndex.value))
 
     const startOffset = computed(() => {
         const pos = positions.value
@@ -202,38 +203,62 @@ export function useEditorPanel() {
         }
     }
 
-    const isAncestorOrSelf = (blockId: string, childId: string): boolean => {
-        let curr = editorStore.nodeMap.get(childId)
+    /**
+     * 从目标节点向上遍历祖先链，找到最近（最深）的包含块索引。
+     *
+     * 原来用 findIndex+isRelatedBlock：TOPIC 是 SUBTASK 的祖先，也是 CONNBR 的祖先，
+     * 所以 findIndex 命中的是排在前面的 TOPIC 块，导致虚拟列表跳到整个章节顶部，
+     * 而非包含目标节点的具体 SUBTASK/PRETOPIC 块。
+     *
+     * 新方案：从目标节点（CONNBR）沿 parent 链向上，第一个命中 blocksList 的节点即为
+     * 最近的渲染块（如 SUBTASK）。后续路径搜索会自动回退到 CON/PARAC 等可见父元素。
+     */
+    const findNearestBlockIdx = (targetId: string): number => {
+        const blockIdxMap = new Map(blocksList.value.map((b, idx) => [b.id, idx]))
+        if (blockIdxMap.has(targetId)) return blockIdxMap.get(targetId)!
+        let curr = editorStore.nodeMap.get(targetId)
         while (curr) {
-            if (curr.node.id === blockId) return true
+            if (blockIdxMap.has(curr.node.id)) return blockIdxMap.get(curr.node.id)!
             curr = curr.parent ? editorStore.nodeMap.get(curr.parent.id) : undefined
         }
-        return false
+        return -1
     }
 
     const syncEditorScroll = (newId: string | null, force = false) => {
         if (!newId || !editorStore.xmlTree) return
 
-        const blockIdx = blocksList.value.findIndex(b => isAncestorOrSelf(b.id, newId))
+        // 找到包含目标节点的最近块（如 SUBTASK），而非远祖先的 TOPIC 块
+        const blockIdx = findNearestBlockIdx(newId)
         if (blockIdx === -1) return
 
         nextTick(() => {
             if (!viewportRef.value) return
 
-            // 1. 先从路径中由下到上找最近的已挂载 DOM 元素
+            // 1. 先从路径中由下到上找最近的已挂载 DOM 元素，需限制在所属文档块已挂载的前提下
+            const blockId = blocksList.value[blockIdx]?.id
+            const blockEl =
+                blockId && viewportRef.value ? (viewportRef.value.querySelector(`[data-node-id="${blockId}"]`) as HTMLElement | null) : null
+
             let el: HTMLElement | null = null
+            let foundNodeId: string | null = null
             const path: XmlNode[] = []
             let curr = editorStore.nodeMap.get(newId)
             while (curr) {
                 path.unshift(curr.node)
                 curr = curr.parent ? editorStore.nodeMap.get(curr.parent.id) : undefined
             }
-            if (path.length > 0) {
+            if (blockEl && path.length > 0) {
                 for (let i = path.length - 1; i >= 0; i--) {
-                    el = viewportRef.value.querySelector(
-                        `[data-node-id="${path[i].id}"]`
-                    ) as HTMLElement | null
-                    if (el) break
+                    if (blockEl.dataset.nodeId === path[i].id) {
+                        el = blockEl
+                        foundNodeId = path[i].id
+                        break
+                    }
+                    el = blockEl.querySelector(`[data-node-id="${path[i].id}"]`) as HTMLElement | null
+                    if (el) {
+                        foundNodeId = path[i].id
+                        break
+                    }
                 }
             }
 
@@ -244,7 +269,7 @@ export function useEditorPanel() {
                 if (!force && rect.top >= containerRect.top + 20 && rect.bottom <= containerRect.bottom - 20) {
                     return
                 }
-                el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                el.scrollIntoView({ behavior: 'auto', block: 'center' })
                 return
             }
 
@@ -262,21 +287,31 @@ export function useEditorPanel() {
             setTimeout(() => {
                 if (!viewportRef.value) return
                 let targetEl: HTMLElement | null = null
+                let subFoundId: string | null = null
                 if (path && path.length > 0) {
                     for (let i = path.length - 1; i >= 0; i--) {
-                        targetEl = viewportRef.value.querySelector(
-                            `[data-node-id="${path[i].id}"]`
-                        ) as HTMLElement | null
-                        if (targetEl) break
+                        targetEl = viewportRef.value.querySelector(`[data-node-id="${path[i].id}"]`) as HTMLElement | null
+                        if (targetEl) {
+                            subFoundId = path[i].id
+                            break
+                        }
                     }
                 }
-                targetEl?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                if (targetEl) {
+                    targetEl.scrollIntoView({ behavior: 'auto', block: 'center' })
+                }
             }, 100)
         })
     }
 
-    watch(() => editorStore.selectedNodeId, (newId) => syncEditorScroll(newId, false))
-    watch(() => editorStore.lastUndoRedoTime, () => syncEditorScroll(editorStore.selectedNodeId, true))
+    watch(
+        () => editorStore.selectedNodeId,
+        (newId) => syncEditorScroll(newId, false)
+    )
+    watch(
+        () => editorStore.lastUndoRedoTime,
+        () => syncEditorScroll(editorStore.selectedNodeId, true)
+    )
 
     return {
         selectedNode,
@@ -287,6 +322,7 @@ export function useEditorPanel() {
         startOffset,
         visibleBlocks,
         handleScroll,
-        setBlockRef
+        setBlockRef,
+        syncEditorScroll
     }
 }

src/views/editor/components/EditorPanel/index.vue

 <template>
-    <div class="flex-1 flex flex-col min-h-0 bg-transparent">
+    <div class="flex-1 flex flex-col min-h-0 bg-transparent relative">
         <template v-if="editorStore.xmlTree">
             <!-- 顶部面包屑与属性面板控制 -->
-            <div 
-                class="px-4 py-2 border-b border-divider bg-fill-2 flex items-center justify-between text-xs shrink-0"
-            >
-                <div class="flex items-center space-x-2">
-                    <span class="text-color3 select-none">当前路径:</span>
+            <div class="px-4 py-2 border-b border-divider bg-card flex items-center justify-between text-xs shrink-0">
+                <div class="flex items-center space-x-2 flex-1 min-w-0 mr-4 overflow-x-auto whitespace-nowrap scrollbar-thin">
+                    <span class="text-color3 select-none shrink-0">当前路径:</span>
                     <n-breadcrumb v-if="nodePath.length > 0">
-                        <n-breadcrumb-item 
-                            v-for="n in nodePath" 
+                        <n-breadcrumb-item
+                            v-for="n in nodePath"
                             :key="n.id"
                             @click="editorStore.setSelectedNodeId(n.id)"
                             class="cursor-pointer hover:text-primary transition-colors text-color2 font-medium"
@@ -19,47 +17,49 @@
                     </n-breadcrumb>
                     <span v-else class="text-color3 italic">未选择节点</span>
                 </div>
-                
-                <!-- 修改属性按钮（触发弹框） -->
-                <CommonButton 
-                    size="tiny" 
-                    secondary 
-                    :disabled="!selectedNode"
-                    @click="handleEditSelectedNode"
-                >
-                    <template #icon>
-                        <n-icon>
-                            <settings-outline />
-                        </n-icon>
-                    </template>
-                    修改属性
-                </CommonButton>
+
+                <div class="flex items-center space-x-2">
+                    <!-- 查找替换按钮 -->
+                    <CommonButton size="tiny" secondary @click="toggleFindReplace">
+                        <template #icon>
+                            <n-icon>
+                                <search-outline />
+                            </n-icon>
+                        </template>
+                        查找替换 (Ctrl+F)
+                    </CommonButton>
+                    <!-- 修改属性按钮（触发弹框） -->
+                    <CommonButton size="tiny" secondary :disabled="!selectedNode" @click="handleEditSelectedNode">
+                        <template #icon>
+                            <n-icon>
+                                <settings-outline />
+                            </n-icon>
+                        </template>
+                        修改属性
+                    </CommonButton>
+                </div>
             </div>
 
             <!-- 文档编辑区（虚拟滚动容器） -->
-            <div 
-                ref="viewportRef"
-                class="flex-1 overflow-y-auto min-h-0 leading-relaxed relative"
-                @scroll="handleScroll"
-            >
+            <div ref="viewportRef" class="flex-1 overflow-y-auto min-h-0 leading-relaxed relative" @scroll="handleScroll">
                 <!-- 占位撑高，模拟全量内容总高度 -->
                 <div :style="{ height: totalHeight + 'px', position: 'relative' }">
                     <!-- 仅渲染可视区块，通过 translateY 定位 -->
-                    <div 
-                        :style="{ transform: `translateY(${startOffset}px)` }"
-                        class="absolute top-0 left-0 right-0"
-                    >
+                    <div :style="{ transform: `translateY(${startOffset}px)` }" class="absolute top-0 left-0 right-0">
                         <div
                             v-for="block in visibleBlocks"
                             :key="block.id"
                             :ref="(el: any) => setBlockRef(el, block.id)"
                             class="w-full px-6 py-2 border-b border-divider/30"
                         >
-                            <DocNodeRenderer :node="block.rawNode" />
+                            <DocNodeRenderer :node="block.rawNode" :parent="null" />
                         </div>
                     </div>
                 </div>
             </div>
+
+            <!-- 查找与替换浮动面板 -->
+            <FindReplacePanel v-model:visible="findReplaceVisible" :sync-editor-scroll="syncEditorScroll" />
         </template>
         <template v-else>
             <div class="flex-1 flex flex-col items-center justify-center text-color3">
@@ -70,26 +70,39 @@
 </template>
 
 <script setup lang="ts">
-import { DocumentTextOutline, SettingsOutline } from '@vicons/ionicons5'
+import { SettingsOutline, SearchOutline } from '@vicons/ionicons5'
 import { useEditorStore } from '@/store/editor'
 import DocNodeRenderer from '../DocNodeRenderer/index.vue'
+import FindReplacePanel from './components/FindReplacePanel/index.vue'
 import { useEditorPanel } from './functionals'
 import { addNodeVisible, addNodeMode, addNodeTargetId, addNodeAllowedTags } from '../NodeTree/functionals'
 
-const themeVars = useThemeVars()
 const editorStore = useEditorStore()
 
-const {
-    selectedNode,
-    nodePath,
-    editorTitle,
-    viewportRef,
-    totalHeight,
-    startOffset,
-    visibleBlocks,
-    handleScroll,
-    setBlockRef
-} = useEditorPanel()
+const { selectedNode, nodePath, editorTitle, viewportRef, totalHeight, startOffset, visibleBlocks, handleScroll, setBlockRef, syncEditorScroll } =
+    useEditorPanel()
+
+const findReplaceVisible = ref(false)
+
+const toggleFindReplace = () => {
+    findReplaceVisible.value = !findReplaceVisible.value
+}
+
+const handleKeydown = (e: KeyboardEvent) => {
+    const ctrl = e.ctrlKey || e.metaKey
+    if (ctrl && e.key.toLowerCase() === 'f') {
+        e.preventDefault()
+        findReplaceVisible.value = true
+    }
+}
+
+onMounted(() => {
+    window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeydown)
+})
 
 const handleEditSelectedNode = () => {
     if (!selectedNode.value) return
@@ -99,3 +112,26 @@ const handleEditSelectedNode = () => {
     addNodeVisible.value = true
 }
 </script>
+
+<style scoped>
+:deep(.n-breadcrumb) {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+}
+:deep(.n-breadcrumb-item) {
+    flex-shrink: 0 !important;
+}
+.scrollbar-thin::-webkit-scrollbar {
+    height: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 2px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: #18a058;
+}
+</style>

src/views/editor/components/EditorToolbar/components/InsertFragmentModal/functionals/index.ts

+import { useEditorStore } from '@/store/editor'
+
+export function useInsertFragmentModal() {
+    const editorStore = useEditorStore()
+
+    const visible = ref(false)
+    const xmlContent = ref('')
+    const isSaving = ref(false)
+    const insertModeSetting = ref<'above' | 'below' | 'inside'>('below')
+    const targetNodeIdSetting = ref<string | undefined>(undefined)
+
+    const open = async (mode: boolean | 'above' | 'below' | 'inside', targetId?: string) => {
+        if (typeof mode === 'boolean') {
+            insertModeSetting.value = mode ? 'below' : 'inside'
+        } else {
+            insertModeSetting.value = mode
+        }
+        targetNodeIdSetting.value = targetId
+        xmlContent.value = ''
+        try {
+            if (navigator.clipboard && navigator.clipboard.readText) {
+                const text = await navigator.clipboard.readText()
+                if (text && text.trim()) {
+                    xmlContent.value = text.trim()
+                }
+            }
+        } catch (err) {
+            console.warn('读取剪贴板失败:', err)
+        }
+        visible.value = true
+    }
+
+    const handleConfirm = async () => {
+        if (!xmlContent.value.trim()) {
+            window.$message?.warning('请输入有效的 XML 片段内容！')
+            return
+        }
+
+        isSaving.value = true
+        try {
+            const count = editorStore.insertXmlFragment(
+                xmlContent.value.trim(),
+                insertModeSetting.value,
+                targetNodeIdSetting.value
+            )
+            window.$message?.success(`成功插入 ${count} 个 XML 节点`)
+            visible.value = false
+        } catch (err: any) {
+            window.$message?.error(err.message || '插入失败')
+        } finally {
+            isSaving.value = false
+        }
+    }
+
+    return {
+        visible,
+        xmlContent,
+        isSaving,
+        open,
+        handleConfirm
+    }
+}

src/views/editor/components/EditorToolbar/components/InsertFragmentModal/index.vue

+<template>
+    <CommonModal
+        v-model="visible"
+        title="插入 XML 片段"
+        :width="600"
+        :loading="isSaving"
+        confirm-text="插入"
+        @confirm="handleConfirm"
+    >
+        <div class="flex flex-col space-y-3 p-1">
+            <div class="text-xs text-color3">
+                请输入从其他地方复制的 XML 节点片段，系统将自动解析节点结构，并根据当前选中节点及 DTD 架构规则进行兼容性校验：
+            </div>
+            <n-input
+                v-model:value="xmlContent"
+                type="textarea"
+                rows="10"
+                placeholder="例如：<PARAC>测试记录行</PARAC>"
+            />
+        </div>
+    </CommonModal>
+</template>
+
+<script setup lang="ts">
+import { useInsertFragmentModal } from './functionals'
+
+const {
+    visible,
+    xmlContent,
+    isSaving,
+    open,
+    handleConfirm
+} = useInsertFragmentModal()
+
+defineExpose({
+    open
+})
+</script>

src/views/editor/components/EditorToolbar/constants/index.ts

+import { ImageOutline, GridOutline, DocumentTextOutline, CreateOutline } from '@vicons/ionicons5'
+
 /**
  * EditorToolbar 组件级静态常量
  */
 export const TOOLBAR_TITLE = 'XML 编辑工具栏'
+
+export const GREEN_BUTTONS: any[] = [
+    // { label: '插入图片', tag: 'GRAPHIC', icon: ImageOutline },
+    // { label: '插入表格', tag: 'TABLE', icon: GridOutline },
+    // { label: '插入模板', tag: 'PRETOPIC', icon: DocumentTextOutline },
+    // { label: '插入签字点', tag: 'SIGNOFF', icon: CreateOutline }
+]

src/views/editor/components/EditorToolbar/functionals/index.ts

+import { useEditorStore } from '@/store/editor'
+import { useAppStore } from '@/store/app/index'
+
 /**
  * EditorToolbar 组件级业务逻辑 Hook
  */
-export function useEditorToolbar() {
-    // 暂无专用逻辑，事件通过 emit 委托给父级页面
-    return {}
+export function useEditorToolbar(emit: any) {
+    const editorStore = useEditorStore()
+    const appStore = useAppStore()
+
+    const insertBelow = ref(true)
+    const fileInputRef = ref<HTMLInputElement | null>(null)
+    const isUploading = ref(false)
+
+    const canUndo = computed(() => editorStore.undoStack.length > 0)
+    const canRedo = computed(() => editorStore.redoStack.length > 0)
+
+    const handleInsert = (tag: string) => {
+        editorStore.insertNode(tag, insertBelow.value)
+    }
+
+    const handleTranslate = (type: 'batch' | 'extract' | 'search') => {
+        const labelMap = { batch: '批量翻译', extract: '提取翻译', search: '搜索翻译' }
+        window.$message.info(`已触发 ${labelMap[type]} 功能，自动匹配双语对照。`)
+    }
+
+    const triggerUpload = () => {
+        openUploadModal({
+            accept: '.xml',
+            title: '导入 XML',
+            onSuccess: async (res, file) => {
+                let text = ''
+                if (file) {
+                    text = await file.text()
+                } else if (res && typeof res === 'string') {
+                    text = res
+                }
+
+                if (!text) {
+                    window.$message.error('未获取到导入文件内容')
+                    return
+                }
+
+                isUploading.value = true
+                window.$loading?.show('解析中…')
+                try {
+                    const tree = await parseXmlToTreeAsync(text)
+                    editorStore.setXmlTree(tree)
+                    window.$message.success('XML 导入成功！')
+                } catch (err: any) {
+                    window.$message.error('XML 解析失败: ' + err.message)
+                } finally {
+                    isUploading.value = false
+                    window.$loading?.hide()
+                }
+            }
+        })
+    }
+
+    return {
+        editorStore,
+        appStore,
+        insertBelow,
+        fileInputRef,
+        isUploading,
+        canUndo,
+        canRedo,
+        handleInsert,
+        handleTranslate,
+        triggerUpload,
+        handleFileUpload: () => {} // 保留空函数以防组件 template 尚未完全更新时报错
+    }
 }

src/views/editor/components/NodeTree/components/AddNodeModal/functionals/index.ts

@@ -14,11 +14,11 @@ export function useAddNodeModal(formRef: Ref<FormInst | null>) {
 
     // 表单数据
     const form = reactive<{
-        tagName: string
-        attrs: Record<string, string>
+        tagName: string | null
+        attrs: Record<string, string | null>
         textContent: string
     }>({
-        tagName: '',
+        tagName: null,
         attrs: {},
         textContent: ''
     })
@@ -85,15 +85,15 @@ export function useAddNodeModal(formRef: Ref<FormInst | null>) {
                     form.tagName = node.tagName
                     form.textContent = node.textContent || ''
                     const defs = getElementAttributes(node.tagName)
-                    const attrs: Record<string, string> = {}
+                    const attrs: Record<string, string | null> = {}
                     for (const name of Object.keys(defs)) {
-                        attrs[name] = node.attributes[name] || ''
+                        attrs[name] = node.attributes[name] !== undefined ? node.attributes[name] : null
                     }
                     form.attrs = attrs
                 }
             }
         } else {
-            form.tagName = ''
+            form.tagName = null
             form.attrs = {}
             form.textContent = ''
         }
@@ -117,9 +117,32 @@ export function useAddNodeModal(formRef: Ref<FormInst | null>) {
 
             store.saveSnapshot()
 
+            const cleanAttrs: Record<string, string> = {}
+            for (const [k, v] of Object.entries(form.attrs)) {
+                if (v !== null && v !== undefined && v !== '') {
+                    cleanAttrs[k] = v
+                }
+            }
+
             if (addNodeMode.value === 'edit') {
-                targetNode.attributes = { ...form.attrs }
+                targetNode.attributes = cleanAttrs
                 targetNode.textContent = form.textContent
+
+                // 同步更新混合内容子节点的文本
+                if (isMixedContentElement(targetNode.tagName)) {
+                    targetNode.mixedContent = targetNode.mixedContent || []
+                    const firstTextIndex = targetNode.mixedContent.findIndex((item) => item.type === 'text')
+                    if (firstTextIndex !== -1) {
+                        if (form.textContent) {
+                            targetNode.mixedContent[firstTextIndex].text = form.textContent
+                        } else {
+                            targetNode.mixedContent.splice(firstTextIndex, 1)
+                        }
+                    } else if (form.textContent) {
+                        targetNode.mixedContent.unshift({ type: 'text', text: form.textContent })
+                    }
+                }
+
                 // 如果当前编辑的正是选中的节点，强制更新 store 的选中节点引用以重新渲染视图
                 if (store.selectedNodeId === targetNode.id) {
                     store.setSelectedNodeId(targetNode.id)
@@ -130,8 +153,8 @@ export function useAddNodeModal(formRef: Ref<FormInst | null>) {
                 const newId = crypto.randomUUID()
                 const newNode: XmlNode = {
                     id: newId,
-                    tagName: form.tagName,
-                    attributes: { ...form.attrs },
+                    tagName: form.tagName!,
+                    attributes: cleanAttrs,
                     children: [],
                     textContent: form.textContent,
                     mixedContent: [],
@@ -150,6 +173,7 @@ export function useAddNodeModal(formRef: Ref<FormInst | null>) {
                     parent.children.splice(insertIdx, 0, newNode)
                 }
 
+                store.rebuildNodeMap()
                 store.setSelectedNodeId(newId)
                 window.$message?.success(`成功插入节点 <${form.tagName}>`)
                 addNodeVisible.value = false

src/views/editor/components/NodeTree/components/AddNodeModal/index.vue

 <template>
-    <CommonModal
-        v-model="addNodeVisible"
-        :title="modalTitle"
-        :width="520"
-        :loading="saving"
-        @confirm="handleConfirm"
-    >
+    <CommonModal v-model="addNodeVisible" :title="modalTitle" :width="520" :loading="saving" @confirm="handleConfirm">
         <n-form ref="formRef" :model="form" :rules="rules" label-placement="top" require-mark-placement="right-hanging">
             <!-- 标签选择 -->
             <n-form-item label="标签" path="tagName">
-                <n-select
-                    v-model:value="form.tagName"
-                    :options="tagOptions"
-                    placeholder="请选择"
-                    filterable
-                    :disabled="addNodeMode === 'edit'"
-                    @update:value="onTagChange"
-                />
+                <CommonSelect v-model:value="form.tagName" :options="tagOptions" :disabled="addNodeMode === 'edit'" @change="onTagChange" />
             </n-form-item>
 
             <!-- 动态属性表单 -->
@@ -24,25 +11,15 @@
                 <n-divider class="!my-2">
                     <span class="text-xs text-color3">属性配置</span>
                 </n-divider>
-                <n-form-item
-                    v-for="attr in attributeDefs"
-                    :key="attr.name"
-                    :label="attr.name"
-                    :path="`attrs.${attr.name}`"
-                >
+                <n-form-item v-for="attr in attributeDefs" :key="attr.name" :label="attr.name" :path="`attrs.${attr.name}`">
                     <!-- 枚举类型：select -->
-                    <n-select
+                    <CommonSelect
                         v-if="attr.enumValues && attr.enumValues.length > 0"
                         v-model:value="form.attrs[attr.name]"
-                        :options="attr.enumValues.map(v => ({ label: v, value: v }))"
-                        placeholder="请选择"
+                        :options="attr.enumValues.map((v) => ({ label: v, value: v }))"
                     />
                     <!-- 普通文本 -->
-                    <n-input
-                        v-else
-                        v-model:value="form.attrs[attr.name]"
-                        placeholder="请输入"
-                    />
+                    <n-input v-else v-model:value="form.attrs[attr.name]" />
                     <!-- 属性说明 -->
                     <template v-if="attr.typeDefinition" #feedback>
                         <span class="text-[10px] text-color3">{{ attr.typeDefinition }}</span>
@@ -55,12 +32,7 @@
                     <span class="text-xs text-color3">文本内容 (PCDATA)</span>
                 </n-divider>
                 <n-form-item label="内容" path="textContent">
-                    <n-input
-                        v-model:value="form.textContent"
-                        type="textarea"
-                        placeholder="请输入文本内容"
-                        :autosize="{ minRows: 2, maxRows: 6 }"
-                    />
+                    <n-input v-model:value="form.textContent" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" />
                 </n-form-item>
             </template>
         </n-form>
@@ -74,15 +46,5 @@ import { useAddNodeModal } from './functionals'
 
 const formRef = ref<FormInst | null>(null)
 
-const {
-    form,
-    rules,
-    saving,
-    modalTitle,
-    tagOptions,
-    attributeDefs,
-    showTextContentField,
-    onTagChange,
-    handleConfirm
-} = useAddNodeModal(formRef)
+const { form, rules, saving, modalTitle, tagOptions, attributeDefs, showTextContentField, onTagChange, handleConfirm } = useAddNodeModal(formRef)
 </script>

src/views/editor/components/NodeTree/components/CheckRuleModal/functionals/index.ts

 import { checkRuleData } from '../../../functionals'
 
+// ─── occurrence 符号 ───────────────────────────────────────────────────────────
+const OCC: Record<string, string> = {
+    zeroOrMore: '*',
+    oneOrMore: '+',
+    optional: '?',
+    once: ''
+}
+
+// ─── 将节点渲染为纯文本（用于估算宽度 / 简单节点内联显示）─────────────────────
+const toInline = (node: any): string => {
+    if (!node) return ''
+    const occ = OCC[node.occurrence] ?? ''
+    if (node.type === 'elementRef') return `${node.name}${occ}`
+    if (node.type === 'pcdata') return `#PCDATA`
+    if (!node.children?.length) return ''
+    const sep = node.type === 'sequence' ? ', ' : ' | '
+    const body = node.children.map(toInline).join(sep)
+    return `(${body})${occ}`
+}
+
+// ─── 判断一个节点能否内联（不超过 maxLen 个字符）────────────────────────────────
+const canInline = (node: any, maxLen = 60): boolean => toInline(node).length <= maxLen
+
+// ─── 生成带 HTML 语法高亮的格式化文本 ───────────────────────────────────────────
+const h = {
+    elem: (s: string) => `<span class="text-primary font-semibold">${s}</span>`,
+    occ: (s: string) => (s ? `<span class="text-warning font-bold">${s}</span>` : ''),
+    punc: (s: string) => `<span class="text-color3">${s}</span>`,
+    pipe: () => `<span class="text-color3"> | </span>`,
+    comma: () => `<span class="text-color3">, </span>`,
+    pcdata: () => `<span class="text-danger italic font-semibold">#PCDATA</span><span class="text-color3 text-[11px] ml-1">（文本）</span>`
+}
+
+const formatNodeHtml = (node: any, indent: number): string => {
+    if (!node) return ''
+    const pad = '  '.repeat(indent)
+    const occ = OCC[node.occurrence] ?? ''
+
+    // ── elementRef ──────────────────────────────────────────────────
+    if (node.type === 'elementRef') {
+        return `${pad}${h.elem(node.name)}${h.occ(occ)}`
+    }
+
+    // ── pcdata (#PCDATA = 文本内容) ─────────────────────────────────
+    if (node.type === 'pcdata') {
+        return `${pad}${h.pcdata()}`
+    }
+
+    if (!node.children?.length) return ''
+
+    // ── sequence ────────────────────────────────────────────────────
+    if (node.type === 'sequence') {
+        // 足够短 → 单行
+        if (canInline(node)) {
+            const body = node.children.map((c: any) => toInlineHtml(c)).join(h.comma())
+            return `${pad}${h.punc('(')}${body}${h.punc(')')}${h.occ(occ)}`
+        }
+        // 多行：每个子节点一行，末尾加逗号（最后一个不加）
+        const childLines = node.children.map((c: any, i: number) => {
+            const line = formatNodeHtml(c, indent + 1)
+            const isLast = i === node.children.length - 1
+            return isLast ? line : line + h.comma()
+        })
+        const needWrap = indent > 0 || occ !== ''
+        if (needWrap) {
+            return [`${pad}${h.punc('(')}`, ...childLines, `${pad}${h.punc(')')}${h.occ(occ)}`].join('\n')
+        }
+        return childLines.join('\n')
+    }
+
+    // ── choice / mixed ──────────────────────────────────────────────
+    if (node.type === 'choice' || node.type === 'mixed') {
+        // 足够短 → 单行
+        if (canInline(node)) {
+            const body = node.children.map((c: any) => toInlineHtml(c)).join(h.pipe())
+            return `${pad}${h.punc('(')}${body}${h.punc(')')}${h.occ(occ)}`
+        }
+        // 多行：第一个子节点无 | 前缀，后续每个以 | 开头
+        const finalLines = node.children.map((c: any, i: number) => {
+            const childHtml = formatNodeHtml(c, 0).trimStart() // 不带缩进生成内容
+            const innerPad = '  '.repeat(indent + 1)
+            const prefix = i === 0 ? `${innerPad}  ` : `${innerPad}${h.punc('|')} `
+            // 多行子节点：只给第一行加前缀，其余行额外缩进对齐
+            const subLines = childHtml.split('\n')
+            const firstLine = `${prefix}${subLines[0]}`
+            if (subLines.length === 1) return firstLine
+            const extraPad = '  '.repeat(indent + 2)
+            const rest = subLines.slice(1).map((l: string) => `${extraPad}${l.trimStart()}`)
+            return [firstLine, ...rest].join('\n')
+        })
+
+        return [`${pad}${h.punc('(')}`, ...finalLines, `${pad}${h.punc(')')}${h.occ(occ)}`].join('\n')
+    }
+
+    return ''
+}
+
+// 内联渲染（返回 HTML，无前置空格）
+const toInlineHtml = (node: any): string => {
+    if (!node) return ''
+    const occ = OCC[node.occurrence] ?? ''
+    if (node.type === 'elementRef') return `${h.elem(node.name)}${h.occ(occ)}`
+    if (node.type === 'pcdata') return h.pcdata()
+    if (!node.children?.length) return ''
+    const sep = node.type === 'sequence' ? h.comma() : h.pipe()
+    const body = node.children.map(toInlineHtml).join(sep)
+    return `${h.punc('(')}${body}${h.punc(')')}${h.occ(occ)}`
+}
+
 /**
  * CheckRuleModal 逻辑 Hook
  */
 export function useCheckRuleModal() {
-    // 语法高亮：关键字 + 标签名（使用全局主题样式，禁止硬编码 Hex）
-    const highlightedRule = computed(() => {
-        const text = checkRuleData.value.humanReadable || checkRuleData.value.rawModel
-        return text
-            .replace(/\|/g, '<span class="text-primary font-bold">|</span>')
-            .replace(/[?*+]/g, '<span class="text-warning">$&</span>')
-            .replace(/[()]/g, '<span class="text-color3">$&</span>')
-            .replace(/([A-Z][A-Z0-9\-]*)/g, '<span class="text-success font-semibold">$1</span>')
-            .replace(/#PCDATA/g, '<span class="text-danger">#PCDATA</span>')
+    const formattedRule = computed(() => {
+        if (!checkRuleData.value.parsed) {
+            // 回退到基于正则的简单高亮
+            const text = checkRuleData.value.humanReadable || checkRuleData.value.rawModel
+            return text
+                .replace(/\|/g, '<span class="text-color3 font-bold">|</span>')
+                .replace(/[?*+]/g, '<span class="text-warning">$&</span>')
+                .replace(/[()]/g, '<span class="text-color3">$&</span>')
+                .replace(/([A-Z][A-Z0-9\-]*)/g, '<span class="text-primary font-semibold">$1</span>')
+                .replace(/#PCDATA/g, '<span class="text-danger font-semibold">#PCDATA</span>')
+        }
+        return formatNodeHtml(checkRuleData.value.parsed, 0)
     })
 
     return {
-        highlightedRule
+        formattedRule
     }
 }

src/views/editor/components/NodeTree/components/CheckRuleModal/index.vue

 <template>
-    <CommonModal v-model="checkRuleVisible" :title="`查看节点规则：${checkRuleData.nodeName}`" :width="640" :show-confirm="false" cancel-text="关闭">
-        <!-- 原始内容模型 -->
-        <div class="px-3 py-2 rounded bg-fill-2 border border-divider font-mono text-xs text-color2 leading-relaxed break-all">
+    <CommonModal v-model="checkRuleVisible" :title="`查看节点规则：${checkRuleData.nodeName}`" :width="800" :show-confirm="false" cancel-text="关闭">
+        <!-- 原始内容模型单行摘要（类似于 n-alert 样式的简短栏） -->
+        <div class="px-4 py-3 rounded-lg bg-fill-2 border border-divider font-mono text-xs text-color2 leading-relaxed break-all select-all">
             {{ checkRuleData.rawModel }}
         </div>
 
-        <!-- 人类可读的格式化规则 -->
-        <div class="rounded overflow-hidden border border-divider">
-            <div class="bg-fill-3 p-4 font-mono text-xs text-color1 leading-loose whitespace-pre">
-                <span v-html="highlightedRule"></span>
+        <!-- 精致语法树排版与彩色高亮代码框 -->
+        <div class="rounded-lg overflow-hidden border border-divider bg-fill-4">
+            <div class="p-4 font-mono text-xs text-color1 leading-loose whitespace-pre overflow-x-auto max-h-[450px] scrollbar-thin">
+                <span v-html="formattedRule"></span>
             </div>
         </div>
     </CommonModal>
@@ -18,5 +18,5 @@
 import { checkRuleVisible, checkRuleData } from '../../functionals'
 import { useCheckRuleModal } from './functionals'
 
-const { highlightedRule } = useCheckRuleModal()
+const { formattedRule } = useCheckRuleModal()
 </script>

src/views/editor/components/NodeTree/components/ViewXmlModal/index.vue

+<template>
+    <CommonModal v-model="viewXmlVisible" :title="viewXmlTitle" :width="900" :show-confirm="false" cancel-text="关闭">
+        <div class="flex flex-col space-y-4">
+            <!-- XML 渲染面板，带优雅网格背景与代码字体 -->
+            <div
+                class="rounded-xl overflow-hidden border border-divider shadow-lg relative bg-fill-4"
+                style="background-image: radial-gradient(circle, rgba(0,0,0,0.02) 1px, transparent 1px); background-size: 16px 16px;"
+            >
+                <!-- 磨砂玻璃质感的顶部装饰条 -->
+                <div class="h-8 bg-fill-3 border-b border-divider flex items-center px-4 space-x-1.5 select-none shrink-0">
+                    <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
+                    <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
+                </div>
+                
+                <div class="p-6 font-mono text-sm leading-relaxed overflow-x-auto max-h-[500px] scrollbar-thin select-all">
+                    <pre class="text-color1"><code class="xml-content-pre">{{ viewXmlContent }}</code></pre>
+                </div>
+            </div>
+        </div>
+
+        <template #footer-extra>
+            <CommonButton type="primary" @click="handleCopyXml">
+                <template #icon>
+                    <n-icon><clipboard-outline /></n-icon>
+                </template>
+                一键复制
+            </CommonButton>
+        </template>
+    </CommonModal>
+</template>
+
+<script setup lang="ts">
+import { ClipboardOutline } from '@vicons/ionicons5'
+import { viewXmlVisible, viewXmlTitle, viewXmlContent } from '../../functionals'
+
+const handleCopyXml = async () => {
+    try {
+        await navigator.clipboard.writeText(viewXmlContent.value)
+        window.$message?.success('XML 片段已成功复制到剪贴板')
+    } catch (err) {
+        window.$message?.error('复制失败，请手动选择复制')
+    }
+}
+</script>
+
+<style scoped>
+.xml-content-pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+</style>

src/views/editor/components/NodeTree/constants/index.ts

+import type { XmlNode } from '@/types/xmlNode'
+
 // 列表/文档型叶子节点标签判定
 export const DOCUMENT_LIKE_TAGS = ['PARA', 'PARAC', 'TITLE', 'TITLEC', 'WARNING', 'CAUTION', 'NOTE']
 
@@ -6,6 +8,7 @@ export interface CheckRuleData {
     nodeName: string
     rawModel: string
     humanReadable: string
+    parsed?: any
 }
 
 // 插入节点模式类型
@@ -19,3 +22,14 @@ export interface AttrDef {
     required: boolean
     defaultValue: string | null
 }
+
+// 树节点扁平化数据接口定义
+export interface FlatNode {
+    id: string
+    tagName: string
+    subtitle: string
+    depth: number
+    hasChildren: boolean
+    isExpanded: boolean
+    rawNode: XmlNode
+}

src/views/editor/components/Splitter/functionals/index.ts

+
+export interface SplitterProps {
+    width: number
+    collapsed: boolean
+    collapseThreshold?: number
+    defaultWidth?: number
+    maxRatio?: number
+}
+
+export function useSplitter(
+    props: SplitterProps,
+    emit: {
+        (e: 'update:width', val: number): void
+        (e: 'update:collapsed', val: boolean): void
+    }
+) {
+    const collapseThreshold = props.collapseThreshold ?? 150
+    const defaultWidth = props.defaultWidth ?? 560
+    const maxRatio = props.maxRatio ?? 0.6
+
+    const dividerRef = ref<HTMLElement | null>(null)
+    const isDragging = ref(false)
+    let containerEl: HTMLElement | null = null
+
+    let startX = 0
+    let startWidth = 0
+    let hasDragged = false
+
+    onMounted(() => {
+        if (dividerRef.value) {
+            containerEl = dividerRef.value.parentElement
+        }
+    })
+
+    const startDrag = (e: MouseEvent) => {
+        isDragging.value = true
+        hasDragged = false
+        startX = e.clientX
+        startWidth = props.collapsed ? 0 : props.width
+        document.body.style.cursor = 'col-resize'
+        document.body.style.userSelect = 'none'
+        window.addEventListener('mousemove', onDrag)
+        window.addEventListener('mouseup', stopDrag)
+    }
+
+    const onDrag = (e: MouseEvent) => {
+        if (!isDragging.value || !containerEl) return
+        const delta = e.clientX - startX
+        if (Math.abs(delta) > 3) hasDragged = true
+        const raw = startWidth + delta
+        const containerWidth = containerEl.clientWidth
+        const maxWidth = containerWidth * maxRatio
+
+        if (raw < collapseThreshold) {
+            emit('update:width', Math.max(0, raw))
+            emit('update:collapsed', raw < collapseThreshold / 2)
+        } else {
+            emit('update:collapsed', false)
+            emit('update:width', Math.min(maxWidth, raw))
+        }
+    }
+
+    const stopDrag = () => {
+        isDragging.value = false
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        window.removeEventListener('mousemove', onDrag)
+        window.removeEventListener('mouseup', stopDrag)
+
+        if (!props.collapsed && props.width < collapseThreshold) {
+            emit('update:collapsed', true)
+        }
+    }
+
+    const handleDividerClick = () => {
+        if (hasDragged) return
+        if (props.collapsed) {
+            emit('update:collapsed', false)
+            emit('update:width', defaultWidth)
+        }
+    }
+
+    onUnmounted(() => {
+        window.removeEventListener('mousemove', onDrag)
+        window.removeEventListener('mouseup', stopDrag)
+    })
+
+    return {
+        dividerRef,
+        isDragging,
+        startDrag,
+        handleDividerClick
+    }
+}

src/views/editor/components/Splitter/index.vue

+<template>
+    <div
+        ref="dividerRef"
+        class="split-divider group"
+        :class="{ 'is-dragging': isDragging, 'is-collapsed': collapsed }"
+        @mousedown.prevent="startDrag"
+        @click="handleDividerClick"
+    >
+        <!-- 折叠状态：展开箭头 -->
+        <div v-if="collapsed" class="split-expand-btn">
+            <svg class="w-3 h-3" viewBox="0 0 12 12" fill="currentColor">
+                <path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </div>
+        <!-- 展开状态：可视指示线 + 手柄圆点 -->
+        <template v-else>
+            <div class="split-divider-line" />
+            <div class="split-divider-handle">
+                <div class="handle-dot" />
+                <div class="handle-dot" />
+                <div class="handle-dot" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useSplitter } from './functionals'
+
+const props = withDefaults(defineProps<{
+    width: number
+    collapsed: boolean
+    collapseThreshold?: number
+    defaultWidth?: number
+    maxRatio?: number
+}>(), {
+    collapseThreshold: 150,
+    defaultWidth: 560,
+    maxRatio: 0.6
+})
+
+const emit = defineEmits<{
+    (e: 'update:width', val: number): void
+    (e: 'update:collapsed', val: boolean): void
+}>()
+
+const {
+    dividerRef,
+    isDragging,
+    startDrag,
+    handleDividerClick
+} = useSplitter(props, emit)
+</script>
+
+<style scoped>
+/* ── 分割条容器 ─────────────────────────────────────────────────────────────── */
+.split-divider {
+    position: relative;
+    width: 10px;
+    flex-shrink: 0;
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    transition: background-color 0.2s;
+}
+
+.split-divider:hover,
+.split-divider.is-dragging {
+    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
+}
+
+/* ── 可视线 ───────────────────────────────────────────────────────────────── */
+.split-divider-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    transform: translateX(-50%);
+    background-color: var(--divider-color, rgba(0, 0, 0, 0.08));
+    transition: background-color 0.2s, width 0.2s;
+}
+
+.split-divider:hover .split-divider-line,
+.split-divider.is-dragging .split-divider-line {
+    background-color: var(--primary-color);
+    width: 2px;
+}
+
+/* ── 手柄圆点 ────────────────────────────────────────────────────────────── */
+.split-divider-handle {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 4px 3px;
+    border-radius: 8px;
+    background: var(--fill-color-2, rgba(0, 0, 0, 0.04));
+    border: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: opacity 0.2s, transform 0.2s, background 0.2s;
+}
+
+.split-divider:hover .split-divider-handle,
+.split-divider.is-dragging .split-divider-handle {
+    opacity: 1;
+    transform: scaleY(1);
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.handle-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: var(--divider-color, rgba(0, 0, 0, 0.2));
+    transition: background-color 0.2s;
+}
+
+.split-divider:hover .handle-dot,
+.split-divider.is-dragging .handle-dot {
+    background-color: white;
+}
+
+/* ── 折叠状态 ─────────────────────────────────────────────────────────────── */
+.split-divider.is-collapsed {
+    width: 16px;
+    cursor: pointer;
+    background-color: var(--fill-color-3, rgba(0, 0, 0, 0.06));
+    border-right: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
+}
+
+.split-divider.is-collapsed:hover {
+    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+}
+
+.split-expand-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--text-color-3, rgba(0, 0, 0, 0.38));
+    transition: color 0.2s;
+}
+
+.split-divider.is-collapsed:hover .split-expand-btn {
+    color: var(--primary-color);
+}
+</style>

src/views/editor/components/TableEditor/constants/index.ts

 import type { XmlNode } from '@/types/xmlNode'
 
 export interface CellParagraphModel {
-    id: string;
-    tagName: string;
-    text: string;
+    id: string
+    tagName: string
+    text: string
 }
 
 export interface TableCellModel {
-    id: string;
-    attributes: Record<string, string>;
-    paragraphs: CellParagraphModel[];
+    id: string
+    attributes: Record<string, string>
+    paragraphs: CellParagraphModel[]
+    /** 原始 ENTRY XmlNode，当 ENTRY 含有 UNLIST 等复杂结构时通过 DocNodeRenderer 渲染 */
+    rawNode?: XmlNode
+    /** 是否包含需要通过 DocNodeRenderer 渲染的复杂子节点（非纯 PARA/PARAC） */
+    hasComplexChildren?: boolean
+    colspan?: number
+    rowspan?: number
+    colIdx?: number
+    rowIdx?: number
+    shouldRender?: boolean
+    isDummy?: boolean
 }
 
 export interface TableRowModel {
-    id: string;
-    cells: TableCellModel[];
+    id: string
+    cells: TableCellModel[]
 }
 
 export interface TableStructureModel {
-    cols: number;
-    colSpecs: XmlNode[];
-    theadRows: TableRowModel[];
-    tbodyRows: TableRowModel[];
-    tgroupId: string;
-    theadId: string;
-    tbodyId: string;
+    cols: number
+    colSpecs: XmlNode[]
+    theadRows: TableRowModel[]
+    tbodyRows: TableRowModel[]
+    tgroupId: string
+    theadId: string
+    tbodyId: string
 }
 
 // 表格组件相关的提示文本定义

src/views/editor/components/TextBlockEditor/functionals/index.ts

+import { useThemeVars } from 'naive-ui'
 import { useEditorStore } from '@/store/editor'
 import { 
     isMixedContentElement, 
     getElementAttributes,
-    createDefaultAttributes
+    createDefaultAttributes,
+    getElementRule,
+    isTextOnlyElement,
+    isEmptyElement,
+    getAllowedChildren
 } from '@/utils/dtdManager'
 import type { XmlNode, MixedContentItem } from '@/types/xmlNode'
 import type { SliceItem } from '../constants'
@@ -11,22 +16,52 @@ import { DEFAULT_INSERT_TEXT_VAL } from '../constants'
 /**
  * 内容编辑面板 (TextBlockEditor) 组件专用 Hook 逻辑
  */
-export function useTextBlockEditor() {
+export function useTextBlockEditor(getNode: () => XmlNode) {
     const store = useEditorStore()
+    const themeVars = useThemeVars()
 
-    const parseSlices = (node: XmlNode): SliceItem[] => {
-        const isMixed = isMixedContentElement(node.tagName)
-        if (!isMixed) return []
+    const node = computed(getNode)
+
+    const dtdRule = computed(() => getElementRule(node.value.tagName))
+    const dtdDescription = computed(() => dtdRule.value?.description || '')
+
+    const isTextOnly = computed(() => isTextOnlyElement(node.value.tagName))
+    const isMixed = computed(() => isMixedContentElement(node.value.tagName))
+    const isEmpty = computed(() => isEmptyElement(node.value.tagName))
+
+    const pureTextVal = ref('')
+    watch(
+        () => node.value.id,
+        () => {
+            pureTextVal.value = node.value.textContent || ''
+        },
+        { immediate: true }
+    )
+
+    const handleTextBlur = (e: FocusEvent) => {
+        const el = e.target as HTMLElement
+        const val = el.innerText || ''
+        if (val !== node.value.textContent) {
+            store.updateSelectedNodeText(val)
+        }
+    }
+
+    const slices = ref<SliceItem[]>([])
+
+    // 内部解析切片逻辑
+    const parseSlices = (nodeVal: XmlNode): SliceItem[] => {
+        const isMixedVal = isMixedContentElement(nodeVal.tagName)
+        if (!isMixedVal) return []
 
         const list: SliceItem[] = []
-        if (node.mixedContent.length === 0 && node.textContent) {
+        if (nodeVal.mixedContent.length === 0 && nodeVal.textContent) {
             list.push({
                 type: 'text',
-                text: node.textContent,
+                text: nodeVal.textContent,
                 attributes: {}
             })
         } else {
-            for (const item of node.mixedContent) {
+            for (const item of nodeVal.mixedContent) {
                 if (item.type === 'text') {
                     list.push({
                         type: 'text',
@@ -34,7 +69,7 @@ export function useTextBlockEditor() {
                         attributes: {}
                     })
                 } else if (item.type === 'element' && item.nodeId) {
-                    const child = node.children.find(c => c.id === item.nodeId)
+                    const child = nodeVal.children.find(c => c.id === item.nodeId)
                     if (child) {
                         list.push({
                             type: 'element',
@@ -49,11 +84,21 @@ export function useTextBlockEditor() {
         return list
     }
 
-    const syncSlices = (nodeId: string, slicesList: SliceItem[]): void => {
+    watch(
+        () => node.value.id,
+        () => {
+            if (isMixed.value) {
+                slices.value = parseSlices(node.value)
+            }
+        },
+        { immediate: true }
+    )
+
+    const syncSlices = (): void => {
         const newMixedContent: MixedContentItem[] = []
         const newChildren: XmlNode[] = []
 
-        for (const slice of slicesList) {
+        for (const slice of slices.value) {
             if (slice.type === 'text') {
                 newMixedContent.push({
                     type: 'text',
@@ -72,7 +117,7 @@ export function useTextBlockEditor() {
                     children: [],
                     textContent: '',
                     mixedContent: [],
-                    parentId: nodeId
+                    parentId: node.value.id
                 })
             }
         }
@@ -80,41 +125,106 @@ export function useTextBlockEditor() {
         store.updateSelectedNodeMixedContent(newMixedContent, newChildren)
     }
 
-    const insertSlice = (slicesList: SliceItem[], key: string, index: number): SliceItem[] => {
-        const newList = [...slicesList]
+    const handleSliceTextBlur = (index: number, e: FocusEvent) => {
+        const el = e.target as HTMLElement
+        const newText = el.innerText || ''
+        if (slices.value[index].text !== newText) {
+            slices.value[index].text = newText
+            syncSlices()
+        }
+    }
+
+    const insertOptions = computed(() => {
+        const options: any[] = [{ label: '插入文本片段', key: 'insert-text' }]
+
+        const allowed = getAllowedChildren(node.value.tagName)
+        if (allowed.length > 0) {
+            options.push({ type: 'divider', key: 'div1' })
+            allowed.forEach((tag) => {
+                options.push({
+                    label: `行内元素: ${tag}`,
+                    key: `insert-element-${tag}`
+                })
+            })
+        }
+
+        return options
+    })
+
+    const handleInsertSelect = (key: string, index: number) => {
         if (key === 'insert-text') {
-            newList.splice(index, 0, {
+            slices.value.splice(index, 0, {
                 type: 'text',
                 text: DEFAULT_INSERT_TEXT_VAL,
                 attributes: {}
             })
         } else if (key.startsWith('insert-element-')) {
             const tag = key.replace('insert-element-', '')
-            newList.splice(index, 0, {
+            slices.value.splice(index, 0, {
                 type: 'element',
                 elementTagName: tag,
                 attributes: createDefaultAttributes(tag),
                 attributesDef: getElementAttributes(tag)
             })
         }
-        return newList
+        syncSlices()
+    }
+
+    const handleAddHeaderSlice = () => {
+        slices.value.splice(0, 0, {
+            type: 'text',
+            text: DEFAULT_INSERT_TEXT_VAL,
+            attributes: {}
+        })
+        syncSlices()
     }
 
-    const moveSlice = (slicesList: SliceItem[], index: number, direction: 'up' | 'down'): SliceItem[] => {
-        const newList = [...slicesList]
+    const deleteSlice = async (index: number) => {
+        try {
+            await window.$dialog.warning({
+                title: '敏感删除确认',
+                content: '确定要删除该片段吗？该操作会将该段文本或行内子节点及其所有关联属性彻底清除。'
+            })
+            slices.value.splice(index, 1)
+            syncSlices()
+            window.$message.success('删除片段成功')
+        } catch (e) {
+            // 取消删除
+        }
+    }
+
+    const handleMoveSlice = (index: number, direction: 'up' | 'down') => {
         const target = direction === 'up' ? index - 1 : index + 1
-        if (target < 0 || target >= newList.length) return newList
+        if (target < 0 || target >= slices.value.length) return
+
+        const temp = slices.value[index]
+        slices.value[index] = slices.value[target]
+        slices.value[target] = temp
+        syncSlices()
+    }
 
-        const temp = newList[index]
-        newList[index] = newList[target]
-        newList[target] = temp
-        return newList
+    const formatAttributes = (attrs: Record<string, string>): string => {
+        return Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ')
     }
 
     return {
-        parseSlices,
-        syncSlices,
-        insertSlice,
-        moveSlice
+        themeVars,
+        dtdDescription,
+        isTextOnly,
+        isMixed,
+        isEmpty,
+        pureTextVal,
+        slices,
+        insertOptions,
+        handleTextBlur,
+        handleSliceTextBlur,
+        handleInsertSelect,
+        handleAddHeaderSlice,
+        deleteSlice,
+        handleMoveSlice,
+        formatAttributes,
+        syncMixedContent: syncSlices
     }
 }

src/views/editor/functionals/index.ts

 import { useEditorStore } from '@/store/editor'
 import { loadDtdSchema, getElementRule } from '@/utils/dtdManager'
-import { parseXmlToTree, serializeTreeToXml } from '@/utils/xmlParser'
+import { parseXmlToTreeAsync, serializeTreeToXml } from '@/utils/xmlParser'
 import type { XmlNode } from '@/types/xmlNode'
 import { DEFAULT_FILE_NAME } from '../constants'
 
@@ -15,22 +15,24 @@ import xmlText from '@/assets/file/AMEA-A282400-02-1_0_0.xml?raw'
 export function useEditor() {
     const store = useEditorStore()
 
-    const initialize = (): void => {
+    const initialize = async (): Promise<void> => {
+        window.$loading?.show('加载数据中…')
         try {
             loadDtdSchema(dtdJson as any)
-            const tree = parseXmlToTree(xmlText)
+            const tree = await parseXmlToTreeAsync(xmlText)
             store.setXmlTree(tree)
-            window.$message.success('工卡 XML 数据与 DTD 规则加载成功')
         } catch (e: any) {
             window.$notification.error(e.message || '加载 XML 配置文件出错，请检查语法', {
                 title: '初始化失败'
             })
+        } finally {
+            window.$loading?.hide()
         }
     }
 
     const save = (): void => {
         if (!store.xmlTree) return
-        const xml = serializeTreeToXml(store.xmlTree)
+        const xml = serializeTreeToXml(store.xmlTree, 0, true)
         console.log('保存的 XML 数据：\n', xml)
         window.$message.success('本地修改已保存（可查看浏览器控制台输出）')
     }
@@ -38,16 +40,14 @@ export function useEditor() {
     const exportXml = (): void => {
         if (!store.xmlTree) return
         try {
-            const xml = serializeTreeToXml(store.xmlTree)
+            const xml = serializeTreeToXml(store.xmlTree, 0, true)
             const blob = new Blob([xml], { type: 'application/xml;charset=utf-8;' })
-            const url = URL.createObjectURL(blob)
-            const link = document.createElement('a')
-            link.href = url
-            link.setAttribute('download', DEFAULT_FILE_NAME)
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
-            window.$message.success('工卡 XML 导出下载成功')
+
+            openDownloadModal({
+                fileName: DEFAULT_FILE_NAME,
+                title: '导出 XML',
+                localBlob: blob
+            })
         } catch (e: any) {
             window.$message.error(`导出失败: ${e.message}`)
         }
@@ -96,9 +96,12 @@ export function useEditor() {
         } else {
             window.$notification.warning(`发现 ${warnings.length} 处潜在的合规性问题。`, {
                 title: 'DTD 语法检测警告',
-                meta: () => h('div', { class: 'mt-2 max-h-48 overflow-auto space-y-1' }, 
-                    warnings.slice(0, 10).map(w => h('div', { class: 'text-xs text-warning' }, w))
-                )
+                meta: () =>
+                    h(
+                        'div',
+                        { class: 'mt-2 max-h-48 overflow-auto space-y-1' },
+                        warnings.slice(0, 10).map((w) => h('div', { class: 'text-xs text-warning' }, w))
+                    )
             })
         }
     }

src/views/editor/index.vue

@@ -10,10 +10,7 @@
         />
 
         <!-- 主体布局：自定义可拖拽分割面板 -->
-        <div
-            ref="containerRef"
-            class="flex-1 flex min-h-0 overflow-hidden relative"
-        >
+        <div class="flex-1 flex min-h-0 overflow-hidden relative">
             <!-- 左侧：节点树 -->
             <div
                 class="flex flex-col overflow-hidden shrink-0 transition-[width] duration-150"
@@ -23,35 +20,11 @@
                 <NodeTree v-model:expandedKeys="expandedKeys" />
             </div>
 
-            <!-- 拖动分割条 -->
-            <div
-                class="split-divider group"
-                :class="{ 'is-dragging': isDragging, 'is-collapsed': isCollapsed }"
-                @mousedown.prevent="startDrag"
-                @click="handleDividerClick"
-            >
-                <!-- 折叠状态：展开箭头 -->
-                <div v-if="isCollapsed" class="split-expand-btn">
-                    <svg class="w-3 h-3" viewBox="0 0 12 12" fill="currentColor">
-                        <path d="M4 2l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
-                </div>
-                <!-- 展开状态：可视指示线 + 手柄圆点 -->
-                <template v-else>
-                    <div class="split-divider-line" />
-                    <div class="split-divider-handle">
-                        <div class="handle-dot" />
-                        <div class="handle-dot" />
-                        <div class="handle-dot" />
-                    </div>
-                </template>
-            </div>
+            <!-- 拖动分割条组件 -->
+            <Splitter v-model:width="leftWidthPx" v-model:collapsed="isCollapsed" />
 
             <!-- 右侧：编辑区 -->
-            <div
-                class="flex-1 flex flex-col overflow-hidden"
-                :style="{ background: themeVars.colorBg1 }"
-            >
+            <div class="flex-1 flex flex-col overflow-hidden" :style="{ background: themeVars.colorBg1 }">
                 <EditorPanel />
             </div>
         </div>
@@ -64,11 +37,16 @@ import { useEditor } from './functionals'
 import EditorToolbar from './components/EditorToolbar/index.vue'
 import NodeTree from './components/NodeTree/index.vue'
 import EditorPanel from './components/EditorPanel/index.vue'
+import Splitter from './components/Splitter/index.vue'
 
 const themeVars = useThemeVars()
 const editorStore = useEditorStore()
 const expandedKeys = ref<string[]>([])
 
+// 界面拖动分割状态
+const leftWidthPx = ref(560)
+const isCollapsed = ref(false)
+
 // 实例化业务逻辑 Hook
 const { initialize, save, exportXml, getAllNodeKeys, validate } = useEditor()
 
@@ -76,87 +54,13 @@ onMounted(() => {
     initialize()
 })
 
-// ── 自定义拖动分割逻辑 ────────────────────────────────────────────────────────
-
-const containerRef = ref<HTMLElement | null>(null)
-const COLLAPSE_THRESHOLD = 150  // px：低于此宽度时自动折叠
-const DEFAULT_WIDTH = 560       // px：初始/恢复宽度
-const MAX_RATIO = 0.6
-
-const leftWidthPx = ref(DEFAULT_WIDTH)
-const isCollapsed = ref(false)
-const isDragging = ref(false)
-
-let startX = 0
-let startWidth = 0
-let hasDragged = false  // 区分拖动与点击
-
-const startDrag = (e: MouseEvent) => {
-    isDragging.value = true
-    hasDragged = false
-    startX = e.clientX
-    // 折叠状态下从 0 开始拖动
-    startWidth = isCollapsed.value ? 0 : leftWidthPx.value
-    document.body.style.cursor = 'col-resize'
-    document.body.style.userSelect = 'none'
-    window.addEventListener('mousemove', onDrag)
-    window.addEventListener('mouseup', stopDrag)
-}
-
-const onDrag = (e: MouseEvent) => {
-    if (!isDragging.value || !containerRef.value) return
-    const delta = e.clientX - startX
-    if (Math.abs(delta) > 3) hasDragged = true
-    const raw = startWidth + delta
-    const containerWidth = containerRef.value.clientWidth
-    const maxWidth = containerWidth * MAX_RATIO
-
-    if (raw < COLLAPSE_THRESHOLD) {
-        // 低于阈值：预览折叠
-        leftWidthPx.value = Math.max(0, raw)
-        isCollapsed.value = raw < COLLAPSE_THRESHOLD / 2
-    } else {
-        isCollapsed.value = false
-        leftWidthPx.value = Math.min(maxWidth, raw)
-    }
-}
-
-const stopDrag = () => {
-    isDragging.value = false
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-    window.removeEventListener('mousemove', onDrag)
-    window.removeEventListener('mouseup', stopDrag)
-
-    // 松手后：如果宽度低于阈值，完全折叠
-    if (!isCollapsed.value && leftWidthPx.value < COLLAPSE_THRESHOLD) {
-        isCollapsed.value = true
-    }
-    // 如果宽度非常小但没折叠，恢复到最小可用宽度
-    if (!isCollapsed.value && leftWidthPx.value < COLLAPSE_THRESHOLD) {
-        leftWidthPx.value = COLLAPSE_THRESHOLD
-    }
-}
-
-// 点击分割条：折叠时展开，展开时无操作（避免误触）
-const handleDividerClick = () => {
-    if (hasDragged) return
-    if (isCollapsed.value) {
-        isCollapsed.value = false
-        leftWidthPx.value = DEFAULT_WIDTH
-    }
-}
-
-onUnmounted(() => {
-    window.removeEventListener('mousemove', onDrag)
-    window.removeEventListener('mouseup', stopDrag)
-})
-
 // ── 工具栏事件 ────────────────────────────────────────────────────────────────
 
 const handleSave = () => save()
 const handleExport = () => exportXml()
-const handleExpandAll = () => { expandedKeys.value = getAllNodeKeys() }
+const handleExpandAll = () => {
+    expandedKeys.value = getAllNodeKeys()
+}
 const handleCollapseAll = () => {
     if (editorStore.xmlTree) {
         expandedKeys.value = [editorStore.xmlTree.id]
@@ -165,103 +69,4 @@ const handleCollapseAll = () => {
 const handleValidate = () => validate()
 </script>
 
-<style scoped>
-/* ── 分割条容器 ─────────────────────────────────────────────────────────────── */
-.split-divider {
-    position: relative;
-    width: 10px;
-    flex-shrink: 0;
-    cursor: col-resize;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    transition: background-color 0.2s;
-}
-
-.split-divider:hover,
-.split-divider.is-dragging {
-    background-color: var(--primary-color, #18a058)1a;
-}
-
-/* ── 可视线 ───────────────────────────────────────────────────────────────── */
-.split-divider-line {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    width: 1px;
-    transform: translateX(-50%);
-    background-color: var(--divider-color, rgba(0, 0, 0, 0.08));
-    transition: background-color 0.2s, width 0.2s;
-}
-
-.split-divider:hover .split-divider-line,
-.split-divider.is-dragging .split-divider-line {
-    background-color: var(--primary-color, #18a058);
-    width: 2px;
-}
-
-/* ── 手柄圆点 ────────────────────────────────────────────────────────────── */
-.split-divider-handle {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    padding: 4px 3px;
-    border-radius: 8px;
-    background: var(--fill-color-2, rgba(0, 0, 0, 0.04));
-    border: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: opacity 0.2s, transform 0.2s, background 0.2s;
-}
-
-.split-divider:hover .split-divider-handle,
-.split-divider.is-dragging .split-divider-handle {
-    opacity: 1;
-    transform: scaleY(1);
-    background: var(--primary-color, #18a058);
-    border-color: var(--primary-color, #18a058);
-}
-
-.handle-dot {
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background-color: var(--divider-color, rgba(0, 0, 0, 0.2));
-    transition: background-color 0.2s;
-}
-
-.split-divider:hover .handle-dot,
-.split-divider.is-dragging .handle-dot {
-    background-color: #fff;
-}
-
-/* ── 折叠状态 ─────────────────────────────────────────────────────────────── */
-.split-divider.is-collapsed {
-    width: 16px;
-    cursor: pointer;
-    background-color: var(--fill-color-3, rgba(0, 0, 0, 0.06));
-    border-right: 1px solid var(--divider-color, rgba(0, 0, 0, 0.08));
-}
-
-.split-divider.is-collapsed:hover {
-    background-color: color-mix(in srgb, var(--primary-color, #18a058) 12%, transparent);
-}
-
-.split-expand-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    color: var(--text-color-3, rgba(0, 0, 0, 0.38));
-    transition: color 0.2s;
-}
-
-.split-divider.is-collapsed:hover .split-expand-btn {
-    color: var(--primary-color, #18a058);
-}
-</style>
+<style scoped></style>