From 48744441ba7df45c8f76f6ecdc1964f7e3648229 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Sun, 21 Jun 2026 00:42:40 +0800 Subject: [PATCH] =?UTF-8?q?fix(roundtable):=20=E4=BF=AE=E5=A4=8D=E4=BC=9A?= =?UTF-8?q?=E5=95=86=E6=B6=88=E6=81=AF=E5=88=97=E8=A1=A8=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1=E8=A2=AB=E5=88=86=E6=A0=8F=E6=89=8B=E6=9F=84=E6=8A=A2?= =?UTF-8?q?=E5=8D=A0=E3=80=81=E4=B8=94=E8=BF=87=E7=BB=86=E9=9A=BE=E6=8A=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Step2/Step3 分栏拖拽手柄 ::after 命中区(16px,居中跨分隔线)向左探出 8px 压住左侧消息列表纵向滚动条,抓滑块误触发左右拖动;改为命中区整体移到 分隔线右侧(沙箱一侧),左侧滚动条让出 - 会商页滚动条 6px→12px(透明边框+background-clip 收成带内边距圆条),更易抓 - 覆盖 Step1/Step2/Step3(summary/report)所有消息列表,含有沙箱与流程图分栏场景 Co-Authored-By: Claude Opus 4.8 (1M context) --- .../styles/roundtable-planning.css | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css index 00e4f2a2..fa13cba6 100644 --- a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css +++ b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css @@ -556,3 +556,38 @@ .roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--primary) 35%, var(--border)); } + +/* ============================================================================= + * 会商消息列表滚动条易用性修复（Step1/Step2/Step3 都受益）。 + * + * 症状：鼠标移到右侧纵向滚动条滑块上特别容易触发「左右拖动」，导致点不到滑块。 + * + * 根因 1（Step2/Step3 有沙箱/流程图分栏时）：分栏拖拽手柄 + * `#roundtable-step2-separator`（react-resizable-panels Separator）默认命中区是 + * `::after { left:50%; width:16px; transform:translateX(-50%) }`——居中跨在分隔线 + * 上、向左探出 8px，正好压住左侧消息列表那条贴右边的纵向滚动条。于是抓滚动条时 + * 实际抓到了 `cursor-col-resize` 的手柄命中区 → 误触发左右拖动、点不到滑块。 + * 修法：把命中区整体挪到分隔线**右侧（沙箱一侧）**，左侧滚动条彻底让出。 + * ID 选择器特异性(1,0,1) 高于 Tailwind 的 `after:*` 工具类(0,1,1)，无视加载顺序生效。 + * + * 根因 2（所有步骤通用）：默认滚动条只有 6px，太细难抓。仅在 .roundtable-planning + * 作用域内加宽到 12px，并用「透明边框 + background-clip:padding-box」把可见滑块收 + * 成带内边距的圆条（更像可抓的条，而非贴边细线），命中区仍是整 12px。 + * ========================================================================== */ +#roundtable-step2-separator::after { + left: 0; + right: auto; + width: 14px; + transform: none; +} + +.roundtable-planning ::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +.roundtable-planning ::-webkit-scrollbar-thumb { + border: 3px solid transparent; + background-clip: padding-box; + border-radius: 9999px; +}