[zlZayn]

改了什么

工具栏那两个可拖出按钮（「新建提示词卡片」「新建图片组」）悬浮时，右侧那枚六点把手被按钮的 overflow: hidden 裁掉一半 —— 看起来像贴了个豁口，而不是一枚完整的圆。

修法照插件版（cslkkl/dsh-imagora-desk）已经落地的方案：在按钮右侧留出空隙，把手放进空隙里，两条数值：

位置	改前	改后
按钮右内边距	12px（btn-sm 的 px-3）	22px
把手 right	−4px（JSX 上的 -right-1，即右缘外 4px）	3px（右缘内侧）

算式：把手宽 16px、right: 3px ⇒ 把手左缘距按钮右缘 19px；文字内容区右缘距按钮右缘 22px ⇒ 文字与把手之间还剩 3px 空隙（维护者要的「右侧要有一点空隙，放置那一个 6 个点的标记」）；把手右缘比按钮右缘内缩 3px，完整落在裁剪区内。

两条数值收进 index.css 的 .btn-draggable 段（不是留在 JSX 上挂工具类）——理由：这两个数互相关联（内边距决定文字停在哪、right 决定把手停在哪），写在两处没人能一眼验算；而且那段注释本来就在讲整套拖拽提示，位置放一起将来只改一处。JSX 里那个 -right-1 已删除（它正是「右缘外 4px」的老写法，就是被裁的那版）。

没动的：动画（呼吸光晕 / 入场上浮）、颜色、圆角、字号、文案、aria-label、title 全部原样；只改位置与右内边距。

为什么

维护者原话：「可拖动的右侧要有一点空隙，放置那一个 6 个点的标记表示可拖拉。」

根因是 .btn-ghost 的 @apply 里有 overflow-hidden（涟漪 ::before 要靠它在圆角内裁切），所以任何溢出按钮右缘的内容都会被切掉；而按钮原来的右内边距只有 12px，装不下 16px 的圆，把手只能压在文字尾巴上。

实测（Chromium，窗口 1600×1000，真机读数而非估算）

量	改前	改后
按钮 rect	x=243.75, w=106.89 → 右缘 350.64	x=243.75, w=116.89 → 右缘 360.64
把手 rect	x=338.64, w=16 → 右缘 354.64	x=341.64, w=16 → 右缘 357.64
把手 right 计算值	-4px	3px
越界量（把手右缘 − 按钮右缘）	+4px（被裁）	−3px（在裁剪区内）
按钮 padding-right	12px	22px
按钮 overflow	hidden	hidden（未改，涟漪需要）

按钮变宽了，工具栏还放得下吗

两个按钮各 +10px（106.89 → 116.89、83.2 → 93.2），合计 +20px。逐档实测（同一页面内注入 12px 内边距做改前对照，排除其它变量）：

视口宽	改前行数	改后行数	工具栏高
1600	1	1	44
1440	1	1	44
1366	1	1	44
1280	1	1	44
1024	2	2	76（← 改前就已经折行）
960	2	2	76（← 同上）

结论：1280 及以上仍是单行不折；1024 / 960 的折行改前就存在，不是本次引入。

验证

命令	结果
cd frontend; npm run build	通过（tsc --noEmit 零错 + vite 2040 modules）
cd frontend; npm test	1070 passed（65 个测试文件） —— 新增 1 个用例，故仪表盘 1069 → 1070
cd frontend; npm run lint	零告警
uv run python scripts/check_docs.py	✔ 链接 545 处可解析；后端 485 / 前端 1070 计数与文档一致

新增用例（canvasStyles.test.ts）锁三件事：index.css 里 .btn-draggable 必须有 padding-right: 22px、.btn-draggable .btn-drag-grip 必须有 right: 3px、CanvasPage.tsx 的把手那一行不许再出现 -right-1。这样下次谁把它「改回贴边缘」会当场红。

文档

docs/ARCHITECTURE.md 8.3「自定义光标」那条（本来就写着 .btn-draggable 的 grab 光标 / 呼吸光晕 / 拖拽图标）后面补了把手的位置约定与算式，并写明「放回右缘外之前先确认 overflow 不再裁它」。按仓库分层规则只写在这一处（frontend/README.md 的「样式体系」是公共类的登记表，这类几何约定在 ARCHITECTURE 更合适，不重复登记）。

提交拆分

1. fix(frontend): 六点把手收进按钮右缘内侧，不再被 overflow 裁掉半枚
2. test(frontend): 锁住六点把手在按钮右缘内侧（22px / right 3px，禁止回退 -right-1）
3. docs(frontend): 写清六点把手在按钮右缘内侧（22px / right 3px 的来历），同步仪表盘 1070

真机截图

改前 / 改后各一张（隔离实例 7861 + 真实 Chromium，同一窗口号 win=1 保证主题色一致，2x 像素）。本机 gh 2.96.0 没有 --attach，图在下面占位处替换：