refactor: merge mark and action toolbars to the right side

Place the mark toolbar to the left of the action toolbar on the same row
with an 8px gap, so the two button groups never overlap on tiny selections.
This commit is contained in:
2026-06-14 14:30:43 +08:00
parent 3cd92945ac
commit 39f0aaae02
2 changed files with 17 additions and 4 deletions
+13 -3
View File
@@ -111,14 +111,24 @@ const sizeLabel = computed(() => {
return `${Math.round(rect.value.w)} × ${Math.round(rect.value.h)}`
})
const MARK_TOOLBAR_W = 190
const ACTION_TOOLBAR_W = 180
const TOOLBAR_GROUP_GAP = 8
const rightToolbarPos = computed(() => {
if (!rect.value) return null
return placeToolbar(rect.value, 180, 40, 'right')
return placeToolbar(rect.value, ACTION_TOOLBAR_W, 40, 'right')
})
const leftToolbarPos = computed(() => {
if (!rect.value) return null
return placeToolbar(rect.value, 190, 40, 'left')
if (!rect.value || !rightToolbarPos.value) return null
// 标记组与操作组合并到右侧,紧贴在操作组左侧,中间保留间隔
const x = clamp(
rightToolbarPos.value.x - TOOLBAR_GROUP_GAP - MARK_TOOLBAR_W,
0,
props.width - MARK_TOOLBAR_W
)
return { x, y: rightToolbarPos.value.y }
})
const handles = computed(() => {