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 ...@@ -199,6 +199,22 @@ export function useEditAreaContextMenu(props: EditAreaContextMenuProps, emit: (e
return editorStore.nodeMap.get(activeNodeId.value)?.node ?? null 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 activeNodeName = computed(() => {
const node = activeNode.value const node = activeNode.value
...@@ -491,6 +507,7 @@ export function useEditAreaContextMenu(props: EditAreaContextMenuProps, emit: (e ...@@ -491,6 +507,7 @@ export function useEditAreaContextMenu(props: EditAreaContextMenuProps, emit: (e
activeNodeId, activeNodeId,
activeNode, activeNode,
activeNodeName, activeNodeName,
sourceNodeName,
isTextNode, isTextNode,
canTranslateActive, canTranslateActive,
canDeleteActive, canDeleteActive,
......
<template> <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 class="space-y-4">
<!-- 顶部节点层级选择 --> <!-- 顶部节点层级选择 -->
<div> <div>
<div class="text-xs text-color3 mb-2 font-medium">节点结构(点击切换操作目标):</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 }"> <template #extra="{ item }">
<!-- 局部翻译中动画 --> <!-- 局部翻译中动画 -->
<div v-if="isTranslating(item.id)" class="flex items-center space-x-1 text-primary text-xs shrink-0 pl-2"> <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({ ...@@ -156,6 +162,7 @@ const show = computed({
const { const {
activeNodeId, activeNodeId,
activeNodeName, activeNodeName,
sourceNodeName,
isTextNode, isTextNode,
canTranslateActive, canTranslateActive,
canDeleteActive, canDeleteActive,
......
...@@ -126,6 +126,7 @@ ...@@ -126,6 +126,7 @@
:max-height="isExpanded ? 480 : 240" :max-height="isExpanded ? 480 : 240"
:active-match-index="currentMatchIndex" :active-match-index="currentMatchIndex"
:node-match-stats="nodeMatchStats" :node-match-stats="nodeMatchStats"
:highlight="findQuery"
/> />
</div> </div>
</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