From ef07f4b8ad3dadf1a76383b94f015725190b5e63 Mon Sep 17 00:00:00 2001 From: JianMiau Date: Mon, 20 Jul 2026 14:35:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8B=99=E6=B4=BE=E7=99=BC=E6=8C=89?= =?UTF-8?q?=E9=88=95=E5=8A=A0=20hover=20=E6=B0=A3=E6=B3=A1=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 摘要: 同步 claude-office:「續上次 session」與「派發任務」hover 顯示氣泡, 說明 resume 僅能延續已結束的 session(codex exec resume)。 根本原因: resume 限制只寫在 README,介面上無說明。 影響: 純 UI 提示,無行為變更。 修法: styles.css 新增 .tip 氣泡;SidePanel 掛上 data-tip 說明。 Co-Authored-By: Claude Fable 5 --- src/components/SidePanel.tsx | 16 ++++++++--- src/styles.css | 54 ++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/src/components/SidePanel.tsx b/src/components/SidePanel.tsx index 878f385..a099c46 100644 --- a/src/components/SidePanel.tsx +++ b/src/components/SidePanel.tsx @@ -42,13 +42,21 @@ function TaskComposer({ agentId }: { agentId: string }) { }} />
-
); diff --git a/src/styles.css b/src/styles.css index c56dfcd..858d44b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -387,6 +387,60 @@ cursor: pointer; } +/* hover tooltip bubble (data-tip) */ +.tip { + position: relative; +} + +.tip::before { + content: ""; + position: absolute; + bottom: calc(100% + 2px); + left: 24px; + border: 6px solid transparent; + border-top-color: var(--text); + opacity: 0; + transition: opacity 0.15s ease 0.15s; + pointer-events: none; +} + +.tip::after { + content: attr(data-tip); + position: absolute; + bottom: calc(100% + 13px); + left: 0; + width: 230px; + background: var(--text); + color: var(--bg-panel); + font-size: 11px; + font-weight: 500; + line-height: 1.55; + padding: 8px 10px; + border-radius: 9px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); + opacity: 0; + transition: opacity 0.15s ease 0.15s; + pointer-events: none; + white-space: normal; + text-align: left; + z-index: 20; +} + +.tip:hover::before, +.tip:hover::after { + opacity: 1; +} + +.task-composer-row .tip::after { + left: auto; + right: 0; +} + +.task-composer-row label.tip::after { + left: 0; + right: auto; +} + .task-composer-row .assign-btn { width: auto; margin-top: 0;