From e67f7fceece643b24f07292e8cd57536d1cd8ab0 Mon Sep 17 00:00:00 2001
From: Aisland <eechaoserebus@gmail.com>
Date: Wed, 19 Aug 2026 02:11:58 +0800
Subject: [PATCH] fix: bind tooltip opens leftward inside sidebar (no longer
 covered by chat pane); hover area enlarged to 22x22 rounded rect

---
 01_content/src/client/styles.ts                | 11 ++++++-----
 02_process/worklogs/2026-08-16_worktable-v2.md | 12 ++++++++++++
 04_test/bindicon-mini.cjs                      |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/01_content/src/client/styles.ts b/01_content/src/client/styles.ts
index c72711f..0902c60 100644
--- a/01_content/src/client/styles.ts
+++ b/01_content/src/client/styles.ts
@@ -154,13 +154,14 @@ export const css = [
   '.dsh-wt_presetAddIcon{font-size:18px;line-height:20px}',
   '.dsh-wt_presetAddText{font-size:10px;line-height:13px}',
   // 项目卡片上的对话绑定按钮（○○ 空心 = 未绑定 / ●● 实心 = 已绑定；CSS 双圆绘制，黑白单色克制：
-  // 未绑定次级灰空心、已绑定主色实心，不用强调色；hover 时自身出现按钮底色 + 气泡显示绑定对象）
-  '.dsh-wt_bindBtn{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:16px;height:12px;margin:0;display:block;border-radius:4px;color:var(--dsw-alias-label-secondary,#9aa4b2);cursor:pointer;user-select:none}',
+  // 未绑定次级灰空心、已绑定主色实心，不用强调色；hover 区域 = 22×22 圆角矩形按钮底，
+  // 气泡向左伸出（留在侧栏内，不被右侧对话区遮挡），垂直居中于按钮）
+  '.dsh-wt_bindBtn{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:22px;height:22px;margin:0;display:block;border-radius:6px;color:var(--dsw-alias-label-secondary,#9aa4b2);cursor:pointer;user-select:none}',
   '.dsh-wt_bindBtn:hover{background:var(--dsw-alias-fill-l2,rgba(255,255,255,.09));color:var(--dsw-alias-label-primary,#e6e8eb)}',
   '.dsh-wt_bindBtn[data-bound=true]{color:var(--dsw-alias-label-primary,#e6e8eb)}',
-  '.dsh-wt_bindBtn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(2px);padding:4px 8px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,#171b22);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:11px;line-height:15px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;z-index:90;box-shadow:0 4px 12px rgba(0,0,0,.35)}',
-  '.dsh-wt_bindBtn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}',
-  '.dsh-wt_bindCircles{position:absolute;left:0;top:50%;width:14px;height:7px;transform:translateY(-50%)}',
+  '.dsh-wt_bindBtn::after{content:attr(data-tip);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px);padding:5px 9px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,#171b22);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:11px;line-height:15px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;box-shadow:0 4px 12px rgba(0,0,0,.35)}',
+  '.dsh-wt_bindBtn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}',
+  '.dsh-wt_bindCircles{position:absolute;left:50%;top:50%;width:14px;height:7px;transform:translate(-50%,-50%)}',
   '.dsh-wt_bindCircles::before,.dsh-wt_bindCircles::after{content:\'\';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-sizing:border-box;border:1.2px solid currentColor;background:transparent}',
   '.dsh-wt_bindCircles::before{left:0}',
   '.dsh-wt_bindCircles::after{left:7px}',
diff --git a/02_process/worklogs/2026-08-16_worktable-v2.md b/02_process/worklogs/2026-08-16_worktable-v2.md
index 8249571..cf727d3 100644
--- a/02_process/worklogs/2026-08-16_worktable-v2.md
+++ b/02_process/worklogs/2026-08-16_worktable-v2.md
@@ -780,6 +780,18 @@
   全 20 STEP ERROR_COUNT: 0（STEP9 presetCount 9）。
 - 备注：纯客户端改动，F5 即生效；动画生成窗（iframe 壳）按用户指示未实现，仅给方案。
 
+## 补记（绑定按钮 hover 修复：气泡改向左伸出 + hover 区加大）
+
+- 用户反馈：已绑定对话的 hover 气泡被右侧对话窗挡住（怀疑堆叠顺序）；hover 底色框太小，
+  要圆角矩形、大小与原 🔗 按钮相当。
+- 处理：气泡定位从「按钮上方居中」改为「按钮左侧、垂直居中」（right: calc(100%+8px)）——
+  整个气泡留在侧栏内，不再跨到右侧对话区，堆叠顺序不再是问题；hover 区域 16×12 → 22×22、
+  border-radius 6px（与原 🔗 按钮同尺寸），6px 双圆图标居中不变、单色不变。
+- 验证（bindicon-mini.cjs）：按钮 22×22 / radius 6px；气泡 right=30px、left=-204px（向左伸出
+  侧栏内）✓；未绑定/已绑定颜色与实心空心不变；functional-diag ERROR_COUNT: 0。
+- 备注：纯客户端改动，F5 即生效。
+
+
 
 
 
diff --git a/04_test/bindicon-mini.cjs b/04_test/bindicon-mini.cjs
index b58b0a3..632d783 100644
--- a/04_test/bindicon-mini.cjs
+++ b/04_test/bindicon-mini.cjs
@@ -48,7 +48,7 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
         var cs = getComputedStyle(b);
         var c4 = getComputedStyle(b.querySelector('.dsh-wt_bindCircles'), '::before');
         var aft = getComputedStyle(b, '::after');
-        return { w: cs.width, h: cs.height, color: cs.color, circleW: c4.width, circleBorder: c4.borderTopWidth, circleFill: c4.backgroundColor, tip: aft.content, hoverBg: cs.backgroundColor };
+        return { w: cs.width, h: cs.height, radius: cs.borderRadius, color: cs.color, circleW: c4.width, circleBorder: c4.borderTopWidth, circleFill: c4.backgroundColor, tip: aft.content, tipRight: aft.right, tipLeft: aft.left, hoverBg: cs.backgroundColor };
       };
       // 未绑定态
       out.unbound = read(btn);