删掉强度滑块的档位圆点;pointercancel 与「松手」同口径提交预览

- 用户口径:「你干脆把圆点删了吧,很丑…要做就做成几乎透明的」→ 按第一选择**删除**(不做半透明备选)
- 标记:`.project-chat-composer-strength-slider` 里那组 `<span class="project-chat-composer-strength-stops">` + 5 个点整体删除
- CSS:`space-between` 排布、`z-index: 2` 抬层、`.is-active{opacity:0}`、点的 `color-mix` 底色、以及只服务点对齐的 `padding: 0 7px` 一并删除;强度区横向内边距 `4px 6px 2px` → `4px 0 2px`(滑块直接铺满卡片内容宽度,填充段与圆钮两端与轨道贴齐,不再留多余空白);滑块容器去掉已无用的 `position: relative`
- 保留:圆钮(实心暖白 + 柔影 + 2px 间隙焦点环)、filled 段铺满轨道高度 6px、`--strength-ratio`、`当前:X`、`aria-valuetext`、←/→/Home/End、点轨道跳档、拖动连续跟手(预览 / 松手提交)
- pointercancel:触屏取消时与「松手」同口径提交当前预览(否则预览值会滞留到下一次提交或卸载 flush)
- 测试:`chatDialogFrameLayout.test.ts` 原来那组「点」断言整段换成**反向守卫**(样式表里不再有 `.project-chat-composer-strength-stops` 规则、组件源码也不再渲染该类名;滑块契约:宽 100% / 高 26 / 圆钮 20×20、强度区左右内边距 0);`home.suite.ts` 首页用例补一条「菜单里不再有那组点」
- 文档:pitfalls 的 D1 条改为现行口径(圆点已删、原因与判据;历史成因「被 6px 轨道盖住 / 与圆钮错位 ±12.2px」只留一句、由 Git 追溯)

Refs #600, PR #607
This commit is contained in:
2026-10-05 18:09:25 +08:00
parent 278ebc570e
commit 9c350eeda5
5 changed files with 54 additions and 92 deletions
@@ -4,7 +4,7 @@
## 2026-10-05 PR #607 复核修复:档位点对齐/对比度、状态文案也走浮层、键盘去重、卸载 flush
- **档位点被轨道压住且与圆钮错位(D1)**:旧实现把 5 个点放进 `grid-auto-columns: 1fr`,点中心落在 22.19 / 66.59 / 110.98 / 155.39 / 199.80,而圆钮中心只在 `10 + ratio * (W - 20)`(10 / 60.5 / 111 / 161.5 / 212)——两端各差 **±12.2px**;且点画在 range(`z-index: 1`)**下面**,实测点中心像素被 6px 轨道盖成轨道色,点填充与相邻轨道对比度只有 **1.21:1**。现行口径:容器 `display: flex; justify-content: space-between; padding: 0 7px`(7 = 圆钮半径 10 − 半点宽 3),首末点的**中心**因此正好落在圆钮两端极限位置;容器 `z-index: 2`(高于 range)把点画到轨道之上;**当前档位那一点 `opacity: 0`**(圆钮已经压在那儿,再画就是"靶心");点 6px(= 轨道高度)、`background: color-mix(in srgb, var(--platform-text-strong) 60%, var(--platform-subpanel-border))`。实测(无头 Chromium / 222px 轨道):5 个点中心与圆钮算式偏移 **全部 0.00px**(旧实现 +12.19/+6.09/−0.02/−6.11/−12.20),点中心像素 `rgb(126,100,85)`、与相邻轨道对比度 **3.83:1**(旧 1.21~1.23:1;再上一版深棕点是 10.5:1,用户口径"做浅一点"后取这个值,仍 ≥3:1);当前档位那一点被圆钮覆盖(点中心像素 = 圆钮填充色,圆钮中心与点中心差 ≤0.5px)。**边界**:点落在**橙色已选段**(`--platform-accent`)上时对比度只有 1.54:1——"变浅"和"已选段上也 ≥3:1"不可兼得(两边都要 ≥3:1 只能是接近黑棕),本项目按"不抢戏"优先,取值由这条 `color-mix` 的百分比统一调。
- **档位圆点已删除(D1 的收口)**:用户口径是「圆点很丑,干脆删了吧,要做就做成几乎透明的」——按第一选择**删除**(未做半透明备选)。现在滑块只剩轨道 + 圆钮:轨道 6px 圆头、已选段 `--platform-accent` 由 `--strength-ratio` 驱动(`calc(20px + ratio * (100% - 20px))`)、圆钮 20px 实心暖白(`--platform-panel-fill` + `--platform-subpanel-border` 1px 描边 + `color-mix` 柔影);强度区横向内边距 `4px 6px 2px` → `4px 0 2px`(滑块铺满卡片内容宽度,填充段与圆钮两端与轨道两端贴齐);相关 CSS(`space-between` 排布 / `z-index: 2` 抬层 / `.is-active{opacity:0}` / 点的 `color-mix` 底色 / 只为点对齐的 `padding: 0 7px`)与渲染标记一并删除。**判据**:`chatDialogFrameLayout.test.ts` 反向守卫(样式表里不再有 `.project-chat-composer-strength-stops` 规则、组件源码不再渲染该类名;滑块契约仍在:宽 100% / 高 26 / 圆钮 20×20、强度区左右内边距 0)+ `home.suite.ts` 首页菜单里查不到那组点。实测(447 视口,像素扫描):轨道 90..324(宽 234 = 卡片内容宽),档位 0 时圆钮左缘 90.5(距轨道左端 0.5px)、档位 4 时圆钮右缘 322.3(距右端 1.8px,扫描行不在圆钮正中所以略窄),填充段始终铺到圆钮右缘止。**历史成因(只留一句,细节由 Git 追溯)**:圆点此前被 6px 轨道盖住、且与圆钮两端错位 ±12.2px,曾用「抬到轨道之上 + space-between 对齐 + 浅暖色」修过一轮,最终按用户口径整体删除。
- **状态文案(`role="status"`)也会顶高那一排(D2)**:`notice`(「模型列表已刷新」「正在刷新模型列表」「默认模型已停用」、推理档读取/保存失败)原先无条件渲染成控件里的 `role="status"`,`toast` 形态只接管了 `error`,于是 Direct 输入区仍会被一行状态文字顶成两行高。现行口径:`toast` 形态下失败与状态**分两条通道**(`onUnavailable` / `onNotice`,各自去重、清空后可再报),状态用 `tone="neutral"`、失败用 `tone="error"`;`errorPresentation === 'toast'` 时两种常驻行都不渲染。判据:`chat-composer.suite.ts`「routes model-list notices to the toast…」断言 Direct 输入区子树里 `[role='status']` 与 `[role='alert']` **都为 0**,且浮层在输入区之外。
- **键盘长按每个事件都落盘(D5)**:range 的方向键在 Chromium 里每次重复都会补 `change`,旧行为 ~30 次/秒全量写盘(写链 + 持久化 + 回读)。现行口径:`selectEffort` 先比对「最近一次**落盘成功**的档位」(`persistedEffortRef`,挂载回读时就种上),相同则不写;连续调整只写**每个新档位**一次,钳位后的重复事件 0 次。实测(真实按键序列):单击方向键 **1** 次落盘;长按 1.5s(34 个重复事件)**4** 次(`low/medium/high/max`,即每个新档位一次);已在最高档继续长按 1.2s(28 个事件)**0** 次。
- **拖动中途卸载会丢档位(D6)**:预览值只在 `change`/`keyup`/`pointerup`/`blur` 落盘,拖到一半被 Esc 关掉菜单或宿主卸载时不会提交。现行口径:卸载 cleanup 里 flush 一次(读 ref,不碰已卸载组件的 state)。实测:拖动到「中」未松手时落盘 0 次,`unmount()` 后恰好 **1** 次(`medium`);单次拖动(按下 + 6 步横移 + 松手)全程 **1** 次(`high`),终值 = 松手位置。
@@ -21,7 +21,7 @@
- **判据/取证**:`tests/appSurface/home.suite.ts`「首页模型菜单复用同一套共享样式面」——首页实例的 `.conversation-model-menu` 的祖先链里**没有** `.game-workbench-chat`,而只靠 `.conversation-model-select …` 就能解析出 16px 圆角 / 12px 内边距 / 34px 行,且菜单里确实有原生滑块(`input[type="range"]` 带 `aria-label="思维强度"`);`tests/chatDialogFrameLayout.test.ts` 的外壳用例按新选择器集合更新(锚点与卡片观感都来自共享面,工作台作用域只剩工具栏几何)。真机实测(无头 Chromium,同一夹具同一裁剪框):首页那颗 161×309 / 10px / 5px / 32px → **260×194 / 16px / 12px / 34px**(与工作台卡片逐项一致);工作台那颗外壳 260×262.5、内层列表 234×170、行 34/9px **前后逐值不变**。
- **边界**:策划面与画布也复用同一个组件 → 它们的菜单观感同样变成这张卡片(有意为之;窄面板下卡片最小宽度 260px,仍受 `calc(100vw - 24px)` 与各自锚点约束)。若某个宿主需要另一套尺寸,在**该宿主作用域**里覆盖,不要再把观感抄第二份。
- **后续(同一轮用户追加)**:强度区与外壳锚点也一并抬到共享面——`view/home/index.tsx` 给首页那颗传了**同一个** `ComposerReasoningEffortSelect`(`presentation="section"`,读写仍是组件自己的 `read_game_creator_app_config` / `select_game_creator_reasoning_effort`),首页因此与工作台逐项同形:外壳 260×262.5、强度区 234×60.5、列表 234×170、滑块 222×26(447 与 1200 两档实测一致;工作台回归后逐值不变)。抬升时必须删掉工作台作用域里两条**死重**规则(给旧独立「推理档」控件排版的 `display: inline-flex` 一族),否则它们会以更高特异性盖掉共享面的 `display: grid`,把强度区重新算宽 24px。
- **滑块两点(用户口径)**:①档位点从深棕改成派生浅暖色(见本文件 2026-10-05 D1 条);②"进度条高度与滑块高度一致"按**变体 A** 落地——填充段本来就是轨道高度(6px),把档位点也收到 6px(不再上下各露 0.5px);变体 B(填充段与点都做成 20px = 圆钮高度)只在夹具里渲染出图,未提交。
- **滑块两点(用户口径 → 最终收口)**:档位圆点先是改成派生浅暖色、直径收到 6px(= 轨道高度),随后按用户「圆点删了吧」的口径**整体删除**(见上面 D1 条)。「进度条高度与滑块高度一致」保留两种解释对照:**变体 A 落地**(填充段 = 轨道高度 6px),**变体 B**(填充段做成 20px = 圆钮高度)只在夹具里渲染出图、未提交。
## 2026-10-04 把非素材任务塞进「生成任务」账本:taskType 维度、v1 兼容与 live 集合