chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 节点工具按钮改为悬浮显示

Browse Source
This commit is contained in:
chiyi
2026-10-12 14:52:55 +08:00
parent 6fa8352455
commit daf4605475
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/CanvasNodeView.vue
+11 -2
View File
@@ -155,7 +155,7 @@ defineExpose({ startEdit, commitNote })
@pointerdown.stop @dblclick.stop @click.stop="emit('port-click', side)" /> @pointerdown.stop @dblclick.stop @click.stop="emit('port-click', side)" />
<!-- 右下角缩放手柄 + 悬浮工具条:仅选中时显示,舞台接管 resize 手势 --> <!-- 右下角缩放手柄 + 悬浮工具条:仅选中时显示,舞台接管 resize 手势 -->
<span v-if="selected && node.type !== 'gen'" class="cv-size" data-resize /> <span v-if="selected && node.type !== 'gen'" class="cv-size" data-resize />
<div v-if="selected && node.type !== 'gen'" class="cv-tools" @dblclick.stop @pointerdown.stop> <div v-if="node.type !== 'gen'" class="cv-tools" @dblclick.stop @pointerdown.stop>
<button v-if="node.type === 'image'" title="添加为参考图" @click.stop="emit('node-action', { type: 'ref' })">＋</button> <button v-if="node.type === 'image'" title="添加为参考图" @click.stop="emit('node-action', { type: 'ref' })">＋</button>
<button class="cv-tools__del" title="删除" @click.stop="emit('node-action', { type: 'delete' })">✕</button> <button class="cv-tools__del" title="删除" @click.stop="emit('node-action', { type: 'delete' })">✕</button>
</div> </div>
@@ -404,7 +404,7 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
z-index: 3; z-index: 3;
} }
/* 选中悬浮工具条:贴节点内上缘(节点 overflow:hidden,外侧会被裁) */ /* 悬浮工具条:鼠标放上节点就显示(选中时常显),贴节点内上缘 */
.cv-tools { .cv-tools {
position: absolute; position: absolute;
top: 6px; top: 6px;
@@ -412,6 +412,15 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
display: flex; display: flex;
gap: 4px; gap: 4px;
z-index: 4; z-index: 4;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.cv-node:hover .cv-tools,
.cv-node.is-selected .cv-tools,
.cv-tools:focus-within {
opacity: 1;
pointer-events: auto;
} }
.cv-tools button { .cv-tools button {
width: 24px; width: 24px;