Commit f837beb0 by pangchong

feat(editor): 优化节点列表展示与右键操作源节点标识

- CommonNodeDetailList 组件支持高亮检索匹配文本显示
- 优化节点列表祖先、子孙、同辈节点的收集逻辑,层级展示更合理
- 添加 sourceNodeId 属性以标记右键操作的源节点
- EditAreaContextMenuModal 使用 sourceNodeName 替代 activeNodeName 展示右键发起节点名称
- FindReplacePanel 传入高亮关键词支持节点名称高亮显示
- 统一调整模板代码格式,提升可读性
- 细节优化选中项滚动和动画触发逻辑
parent 29c7bfa7
......@@ -199,6 +199,22 @@ export function useEditAreaContextMenu(props: EditAreaContextMenuProps, emit: (e
return editorStore.nodeMap.get(activeNodeId.value)?.node ?? null
})
// 最初右键发起的源节点名称 (固定不变)
const sourceNodeName = computed(() => {
if (!props.nodeIds || props.nodeIds.length === 0) return '未知'
const leafId = props.nodeIds[0]
let realId = leafId
if (leafId.includes('-txt-')) {
realId = leafId.split('-txt-')[0]
}
const mapped = editorStore.nodeMap.get(realId)
if (!mapped) return '未知'
if (leafId.includes('-txt-')) {
return '文本内容'
}
return mapped.node.tagName
})
// 当前选中的节点名称
const activeNodeName = computed(() => {
const node = activeNode.value
......@@ -491,6 +507,7 @@ export function useEditAreaContextMenu(props: EditAreaContextMenuProps, emit: (e
activeNodeId,
activeNode,
activeNodeName,
sourceNodeName,
isTextNode,
canTranslateActive,
canDeleteActive,
......
<template>
<CommonModal v-model="show" :title="`操作节点 - ${activeNodeName}`" :width="800" :show-footer="false" :scrollable="false">
<CommonModal v-model="show" :title="`操作节点 - ${sourceNodeName}`" :width="800" :show-footer="false" :scrollable="false">
<div class="space-y-4">
<!-- 顶部节点层级选择 -->
<div>
<div class="text-xs text-color3 mb-2 font-medium">节点结构(点击切换操作目标):</div>
<CommonNodeDetailList v-model:selected-id="activeNodeId" :node-ids="nodeIds" mode="radio" max-height="500">
<CommonNodeDetailList
v-model:selected-id="activeNodeId"
:node-ids="nodeIds"
:source-node-id="nodeIds[0]"
mode="radio"
max-height="300"
>
<template #extra="{ item }">
<!-- 局部翻译中动画 -->
<div v-if="isTranslating(item.id)" class="flex items-center space-x-1 text-primary text-xs shrink-0 pl-2">
......@@ -156,6 +162,7 @@ const show = computed({
const {
activeNodeId,
activeNodeName,
sourceNodeName,
isTextNode,
canTranslateActive,
canDeleteActive,
......
......@@ -126,6 +126,7 @@
:max-height="isExpanded ? 480 : 240"
:active-match-index="currentMatchIndex"
:node-match-stats="nodeMatchStats"
:highlight="findQuery"
/>
</div>
</div>
......
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