From 39f0aaae02df5474438bb824bc230f59ddf6df5a Mon Sep 17 00:00:00 2001 From: mamamiyear Date: Sun, 14 Jun 2026 14:30:43 +0800 Subject: [PATCH] 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. --- frontend/src/views/CaptureOverlay.vue | 16 +++++++++++++--- native_overlay_darwin.go | 5 ++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/frontend/src/views/CaptureOverlay.vue b/frontend/src/views/CaptureOverlay.vue index 73e785b..3fdf4e0 100644 --- a/frontend/src/views/CaptureOverlay.vue +++ b/frontend/src/views/CaptureOverlay.vue @@ -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(() => { diff --git a/native_overlay_darwin.go b/native_overlay_darwin.go index ad8f3e8..bc93774 100644 --- a/native_overlay_darwin.go +++ b/native_overlay_darwin.go @@ -633,8 +633,11 @@ static id nativeOverlayKeyMonitor = nil; [_saveRemoteButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 3, btnY, actionBtnSize, actionBtnSize)]; [_uploadButton setFrame:NSMakeRect(baseX + (actionBtnSize + actionGap) * 4, btnY, actionBtnSize, actionBtnSize)]; + // Mark toolbar sits to the LEFT of the action toolbar (same row) with an + // 8px gap between the two groups, so they never overlap on tiny selections. CGFloat markW = 170; - CGFloat markX = MAX(0, MIN(_selection.origin.x, self.bounds.size.width - markW)); + CGFloat markGap = 8; + CGFloat markX = MAX(0, x - markGap - markW); [_penButton setFrame:NSMakeRect(markX + 4, y + 4, 28, 28)]; [_rectButton setFrame:NSMakeRect(markX + 36, y + 4, 28, 28)]; [_ellipseButton setFrame:NSMakeRect(markX + 68, y + 4, 28, 28)];