Commit 9f776d90 by pangchong

feat(NodeTree): 优化节点子标题显示及数据结构

- 新增 fullSubtitle 字段用于存储子标题完整内容
- getNodeTextPreview 函数支持获取完整或截断的文本预览
- 递归构造节点列表时同时生成 subtitle 和 fullSubtitle
- 视图层根据 fullSubtitle 优先展示完整提示信息
- 节点名称与子标题元素新增 title 属性显示完整文本
- 文本节点的 subtitle 截断显示,fullSubtitle 保留完整内容
parent b975ad55
......@@ -28,6 +28,7 @@ export interface FlatNode {
id: string
tagName: string
subtitle: string
fullSubtitle?: string
depth: number
hasChildren: boolean
isExpanded: boolean
......
......@@ -173,7 +173,7 @@ export function useNodeTree(
}
// 递归获取节点的文本预览,支持混合内容与行内子节点拼接
const getNodeTextPreview = (node: XmlNode): string => {
const getNodeTextPreview = (node: XmlNode, isFull = false): string => {
const structuralTagsSet = new Set(STRUCTURAL_TAGS)
if (structuralTagsSet.has(node.tagName)) {
......@@ -208,6 +208,7 @@ export function useNodeTree(
}
const text = getFullText(node).trim()
if (isFull) return text
return text.length > 60 ? text.substring(0, 60) + '...' : text
}
......@@ -232,6 +233,7 @@ export function useNodeTree(
const isExpanded = expandedKeys.value.has(node.id)
let subtitle = ''
let fullSubtitle = ''
const formatEff = (eff: string | undefined): string => {
if (!eff) return 'ALL'
const cleaned = eff.replace(/\s+/g, '')
......@@ -299,13 +301,19 @@ export function useNodeTree(
} else if (node.attributes.EFFECT) {
subtitle = node.attributes.EFFECT
} else {
subtitle = getNodeTextPreview(node)
subtitle = getNodeTextPreview(node, false)
fullSubtitle = getNodeTextPreview(node, true)
}
if (!fullSubtitle) {
fullSubtitle = subtitle
}
list.push({
id: node.id,
tagName: node.tagName,
subtitle,
fullSubtitle,
depth,
hasChildren,
isExpanded,
......@@ -341,7 +349,8 @@ export function useNodeTree(
list.push({
id: virtualId,
tagName: '#text',
subtitle: trimmed,
subtitle: trimmed.length > 60 ? trimmed.substring(0, 60) + '...' : trimmed,
fullSubtitle: trimmed,
depth: depth + 1,
hasChildren: false,
isExpanded: false,
......
......@@ -140,13 +140,17 @@
</div>
<!-- Label & Subtitle -->
<div class="flex-1 min-w-0 flex items-center space-x-2 z-10">
<div
class="flex-1 min-w-0 flex items-center space-x-2 z-10"
:title="(item.fullSubtitle || item.subtitle) ? `${item.tagName} ${item.fullSubtitle || item.subtitle}` : item.tagName"
>
<!-- 节点名称高亮 -->
<span class="font-bold text-sm flex-shrink-0" v-html="highlightText(item.tagName, pattern)"></span>
<!-- 子标题高亮 -->
<span
v-if="item.subtitle"
class="text-xs truncate"
:title="item.fullSubtitle || item.subtitle"
:class="[
effectiveSelectedId === item.id
? 'text-white/70'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment