From 278ebc570e6811cfa8f4dd60ad4635e2925c6575 Mon Sep 17 00:00:00 2001 From: Suzumiya Date: Mon, 5 Oct 2026 17:06:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=BA=E5=BA=A6=E5=8C=BA=E4=B9=9F=E6=8A=AC?= =?UTF-8?q?=E6=88=90=E5=85=B1=E4=BA=AB=E6=A0=B7=E5=BC=8F=E9=9D=A2=EF=BC=9A?= =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B8=A6=E5=90=8C=E4=B8=80=E4=BB=BD=E6=80=9D?= =?UTF-8?q?=E7=BB=B4=E5=BC=BA=E5=BA=A6=EF=BC=8C=E6=BB=91=E5=9D=97=E7=82=B9?= =?UTF-8?q?=E8=89=B2=E5=8F=98=E6=B5=85=E3=80=81=E7=82=B9=E4=B8=8E=E8=BD=A8?= =?UTF-8?q?=E9=81=93=E5=90=8C=E9=AB=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 用户口径：①「把思维强度也加进去，保持所有地方的样式一致，不需要做区分」；②「点的颜色做浅一点，进度条的高度和滑块高度一致」 - ① 首页：`view/home/index.tsx` 给那颗 `ConversationModelSelect` 传**同一个** `ComposerReasoningEffortSelect`（`presentation=section`），读写仍是组件自己的 `read_game_creator_app_config` / `select_game_creator_reasoning_effort`，首页不新写 state；强度区（`.project-chat-reasoning-effort.is-section` / `.project-chat-composer-strength-*`）与外壳锚点（`position: absolute; right: 0; bottom: calc(100% + 8px)`）一并抬到共享样式面，宿主作用域只剩工具栏几何 - ① 实测（无头 Chromium，同一夹具同一裁剪框）：首页 1200/447 两档都是外壳 260×262.5、强度区 234×60.5、列表 234×170、滑块 222×26，与工作台逐项一致；工作台回归后外壳/强度区/列表/滑块逐值不变（抬升过程中必须删掉两条给旧独立「推理档」控件排版的死重规则，否则它们以更高特异性盖掉共享面的 `display: grid`，把强度区算宽 24px） - ② 点色：`--platform-text-strong` → `color-mix(in srgb, var(--platform-text-strong) 60%, var(--platform-subpanel-border))`；实测点 rgb(126,100,85) / 相邻轨道 rgb(230,213,198) ⇒ 对比度 3.83:1（上一版 10.5:1，仍守住 ≥3:1）。边界：点落在橙色已选段上时只有 1.54:1——「变浅」与「已选段也 ≥3:1」不可兼得，按「不抢戏」优先，取值可由这条 color-mix 的百分比统一调 - ② 变体 A（落地，默认）：填充段=轨道高度 6px（本来就是轨道渐变的一段），档位点也收到 6px（不再上下各露 0.5px）；实测轨道 6.0 / 填充 6.0 / 点 6.0 / 圆钮 20（range 盒 26）。变体 B（只出图、未提交）：填充段与点都做成 20px=圆钮高度；实测 20/20/20/20（range 盒 34）。447 下圆钮中心到最近可见点中心 37.5px(A) / 30.5px(B)，不重叠、不溢出 - 测试：`home.suite.ts` 的首页用例补断言（首页菜单里确实有 `input[type=range]`，`aria-label=思维强度`、`aria-valuetext=默认`）；`chatDialogFrameLayout.test.ts` 的强度区选择器改到共享面、并断言点 6px == 轨道高度、点色来自 color-mix、无描边 - 校验：相关 vitest 221 passed / 9 skipped、typecheck、eslint、prettier、encoding 5268 files、spacetime-schema 91 tables、diff-check；对照图与变体图见 PR #607 Refs #600, PR #607 --- apps/ai-game-creator-shell/src/styles.css | 545 ++++++++---------- .../src/view/home/index.tsx | 9 + .../tests/appSurface/home.suite.ts | 13 + .../tests/chatDialogFrameLayout.test.ts | 27 +- docs/project-memory/shared-memory/pitfalls.md | 10 +- 5 files changed, 270 insertions(+), 334 deletions(-) diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index 502d5d4a1..2d45b40e7 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -11388,6 +11388,13 @@ button.design-workspace-tree__entry:hover, 里层这几条必须带 `!important`：基础规则里那条 `.conversation-model-menu` 用 `background: … !important` 声明了菜单底色（它服务的是"菜单自己就是卡片"的旧形态）。 */ .conversation-model-select .conversation-model-menu-shell { + /* 锚点与独立形态的菜单同一套值（贴锚点右缘、向上展开、距锚点 8px）：这是**组件级**的 + 弹层朝向，任何宿主都该一致；宿主只决定"锚点容器"在哪（首页 `.home-input-model-select`、 + 工作台控制排里的 `.conversation-model-select` 都是 `position: relative`）。 */ + position: absolute; + right: 0; + bottom: calc(100% + 8px); + z-index: 20; gap: 6px; /* 合并形态的高度由内容决定（强度区 + 列表各自的上下界已经定死）， 不再套用上面那条"卡片自己就是滚动区"的 194px 上限——那会把列表挤矮。 */ @@ -11465,6 +11472,214 @@ button.design-workspace-tree__entry:hover, background: var(--platform-subpanel-border); } +/* ---- 强度区（组件自带类名；任何宿主共用同一份，没有宿主分支） ---- */ + +/* 强度区：菜单顶部，与列表之间只用留白分开（不画横贯分隔线），标题左右层级分明。 */ +.project-chat-reasoning-effort.is-section { + display: grid; + /* 单列铺满：`auto` 轨道在这里只按 max-content 定尺，滑块会被压回固有宽度。 */ + grid-template-columns: minmax(0, 1fr); + justify-items: stretch; + width: 100%; + align-self: stretch; + gap: 10px; + padding: 4px 6px 2px; +} + +/* 滑块与档位点是一个整体：点绝对定位叠在轨道中线上（不受字号 / 行高变化影响）。 */ +.project-chat-composer-strength-slider { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr); + width: 100%; +} + +.project-chat-composer-strength-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 8px; + min-width: 0; +} + +.project-chat-composer-strength-title { + color: var(--platform-text-strong); + font-size: 12px; + font-weight: 600; +} + +.project-chat-composer-strength-range { + /* 圆钮（input 的 thumb）要压在档位点之上：实心钮不该被它下面那颗点透出来。 */ + position: relative; + z-index: 1; + width: 100%; + height: 26px; + margin: 0; + appearance: none; + border: 0; + background: transparent; + cursor: pointer; +} + +.project-chat-composer-strength-range::-webkit-slider-runnable-track { + height: 6px; + border-radius: 999px; + /* 已选段一直铺到圆钮右缘（`--strength-ratio` 是无单位档位比例，20px = 圆钮直径）， + 圆钮右缘之外才是未选段；`calc` 让两端在任意轨道宽度下都对齐。 */ + background: linear-gradient( + to right, + var(--platform-accent) 0 + calc(20px + var(--strength-ratio, 0) * (100% - 20px)), + var(--platform-subpanel-border) + calc(20px + var(--strength-ratio, 0) * (100% - 20px)) 100% + ); +} + +.project-chat-composer-strength-range::-webkit-slider-thumb { + width: 20px; + height: 20px; + margin-top: -7px; + appearance: none; + border: 1px solid var(--platform-subpanel-border); + border-radius: 999px; + /* 实心暖白圆钮：用 `--platform-panel-fill`（两个主题都是不透明面板色）而不是半透明的 + `--platform-input-highlight`——后者浅色主题只有 90% 不透明，下面的已选段会透出来， + 看起来就是个"靶心"。不再画中心点、也不用主色描边成空心环。 */ + background: var(--platform-panel-fill); + /* 圆钮柔影：从品牌主色派生（`color-mix`，不新造 token）。 */ + box-shadow: + 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent), + 0 1px 2px color-mix(in srgb, var(--platform-accent) 16%, transparent); +} + +.project-chat-composer-strength-range:hover:not( + :disabled + )::-webkit-slider-thumb { + transform: scale(1.06); + /* 悬停把暖影压深一档（同族派生，不新造色值）。 */ + box-shadow: + 0 3px 9px color-mix(in srgb, var(--platform-accent) 30%, transparent), + 0 1px 3px color-mix(in srgb, var(--platform-accent) 20%, transparent); +} + +.project-chat-composer-strength-range:active:not( + :disabled + )::-webkit-slider-thumb { + transform: scale(0.96); +} + +.project-chat-composer-strength-range:focus-visible { + outline: none; +} + +.project-chat-composer-strength-range:focus-visible::-webkit-slider-thumb { + /* 「白钮 + 间隙 + 环」三明治：先铺一圈 2px 卡片底色当间隙，再叠焦点环——否则 3px 环 + 紧贴 20px 白钮会被读成"空心钮/靶心"。间隙色只能用**颜色** token + （`--platform-panel-fill` 是渐变，写进 `box-shadow` 会让整条声明失效、连环和影子一起丢）， + 所以取 `--platform-input-fill`；环色与厚度不变，对比度不回退。 */ + box-shadow: + 0 0 0 2px var(--platform-input-fill), + 0 0 0 4px var(--platform-input-focus-ring), + 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent); +} + +.project-chat-composer-strength-range:disabled { + cursor: not-allowed; + opacity: 0.55; +} + +/* Firefox 的滑块伪元素与 WebKit 不同名，同一套取值再来一份。 */ +.project-chat-composer-strength-range::-moz-range-track { + height: 6px; + border-radius: 999px; + background: var(--platform-subpanel-border); +} + +.project-chat-composer-strength-range::-moz-range-progress { + height: 6px; + border-radius: 999px; + background: var(--platform-accent); +} + +.project-chat-composer-strength-range::-moz-range-thumb { + width: 20px; + height: 20px; + /* 与 WebKit 同一套实心钮：暖白底 + 极淡描边 + 柔和暖影（不用主色描边成空心环）。 */ + border: 1px solid var(--platform-subpanel-border); + border-radius: 999px; + background: var(--platform-panel-fill); + box-shadow: + 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent), + 0 1px 2px color-mix(in srgb, var(--platform-accent) 16%, transparent); +} + +/* 高对比（forced-colors）模式下 thumb 的 box-shadow 会被系统丢弃，焦点会完全不可见， + 这里回退到系统色 outline；只在 forced-colors 生效，亮色观感不受影响。 */ +@media (forced-colors: active) { + .project-chat-composer-strength-range:focus-visible { + outline: 2px solid Highlight; + outline-offset: 2px; + } +} + +/* Firefox 的焦点：先关掉轨道自带的 focus-outer 描边，再给圆钮同一套「间隙 + 环」。 */ +.project-chat-composer-strength-range::-moz-focus-outer { + border: 0; +} + +.project-chat-composer-strength-range:focus-visible::-moz-range-thumb { + box-shadow: + 0 0 0 2px var(--platform-input-fill), + 0 0 0 4px var(--platform-input-focus-ring), + 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent); +} + +/* 档位点：叠在轨道**之上**（z-index 高于 input），横向跟圆钮用同一套算式—— + 两侧内边距取「圆钮半径 − 半点宽」，`space-between` 让首末点的**中心**正好落在 + 圆钮两端的极限位置，中间各点等距重合；当前档位那一点隐藏（圆钮已经压在那里， + 再画点就会变成"靶心"）。 */ +.project-chat-composer-strength-stops { + position: absolute; + top: 50%; + right: 0; + left: 0; + z-index: 2; + display: flex; + align-items: center; + justify-content: space-between; + /* 两侧内边距 = 圆钮半径 10px − 半点宽 3px（点 6px 见下）：首末点的**中心**因此正好落在 + 圆钮两端的极限位置，中间各点等距重合。改点宽或钮径时这条与下面的宽高要一起改。 */ + padding: 0 7px; + height: 6px; + transform: translateY(-50%); + pointer-events: none; +} + +.project-chat-composer-strength-stops span { + box-sizing: border-box; + /* 变体 A：点直径 == 轨道高度（6px），不再上下各露 0.5px。 */ + width: 6px; + height: 6px; + border-radius: 999px; + /* 浅暖点：轨道上可见但不抢戏（原来是与圆钮同色的深棕，压在橙色已选段上很跳）。 + 从 `--platform-text-strong` 与轨道色派生，不新造色值；对比度实测见 PR。 */ + background: color-mix( + in srgb, + var(--platform-text-strong) 60%, + var(--platform-subpanel-border) + ); +} + +.project-chat-composer-strength-stops span.is-active { + opacity: 0; +} + +.project-chat-composer-strength-value { + color: var(--platform-text-soft); + font-size: 11px; + text-align: right; +} + .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer @@ -12083,20 +12298,11 @@ button.design-workspace-tree__entry:hover, color: #a82f2f; } -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-reasoning-effort { - display: inline-flex; - align-items: center; - /* 档位文案很短（默认 / 高 / 中 / 低），不参与收缩——收缩会把它截成半个字； - 要让位时由模型钮（名字走省略号）承担。 */ - flex: 0 0 auto; - min-width: 0; - gap: 6px; -} - -/* 队列 chip：压在输入区上方，横向排布、超出换行。 */ +/* 独立「推理档」控件已经并入模型菜单（`.project-chat-reasoning-effort.is-section`， + 观感见文件上方「模型菜单的共享样式面」）；这里那条给它排版的 + `.game-workbench-chat … .project-chat-reasoning-effort` 规则（`display: inline-flex` 一族） + 会以更高特异性盖掉共享面的 `display: grid`，已按「删死重」删除。 + 队列 chip：压在输入区上方，横向排布、超出换行。 */ .game-workbench-chat .project-chat-surface.is-direct-codex .project-chat-composer.is-direct-codex @@ -13562,26 +13768,9 @@ details.design-agent-reasoning[open] text-overflow: ellipsis; } -/* 推理档的读写失败提示整行右对齐（`flex: 0 0 auto` 已写回上面那条推理档规则）。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-controls - .project-chat-reasoning-effort { - flex-wrap: wrap; - justify-content: flex-end; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-controls - .project-chat-reasoning-effort - .project-chat-composer-notice { - flex: 1 1 100%; - margin: 0; - text-align: right; -} +/* 上面两条给独立「推理档」控件排版的规则（`flex-wrap` / `justify-content` / 提示整行） + 随该控件并入模型菜单一起退役：现役元素是 `.project-chat-reasoning-effort.is-section` + （网格，观感见「模型菜单的共享样式面」），`flex-*` 对它无效。 */ /* ② 模型控件的错误 / 状态提示：**不在控件里渲染**。 这一段原来把 `.conversation-model-select [role='alert']` 从 `bottom: 36px` 浮层收回 @@ -13595,288 +13784,12 @@ details.design-agent-reasoning[open] 队列 chip 与提示段落的 `margin` 都写回前文各自那条规则。 */ /* ④ 思维强度**并入模型菜单**：底行只留模型触发钮一颗控件，强度区嵌在菜单顶部。 - 外壳（`.conversation-model-menu-shell`）沿用原来模型菜单的锚点与朝向（贴触发钮右缘、 - 向上展开、距输入区 8px）——这是**宿主专属的几何**，留在工作台作用域。 - 卡片 / 列表的观感（圆角、内边距、阴影、描边、行高 34px、hover、选中 pill、细滚动条）已抬到 - 文件上方「模型菜单的共享样式面」一节（选择器只用 `.conversation-model-select` 一族）， - 首页等宿主共用同一份，这里不再抄第二遍。 + 外壳（`.conversation-model-menu-shell`）的锚点与朝向是**组件级**的（见文件上方「模型菜单的 + 共享样式面」：`position: absolute; right: 0; bottom: calc(100% + 8px)`，首页那颗同一套）； + 这里不再有工作台专属的浮层 / 卡片 / 强度区规则。 强度区里是原生 ``，自带 `role="slider"`、`aria-valuemin/max/now` 与 ←/→/Home/End，`aria-valuetext` 报中文档位名，点轨道或拖拽按 `step` 吸附到档位。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .conversation-model-menu-shell { - position: absolute; - right: 0; - bottom: calc(100% + 8px); - z-index: 20; -} -/* 强度区：菜单顶部，与列表之间只用留白分开（不画横贯分隔线），标题左右层级分明。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-reasoning-effort.is-section { - display: grid; - /* 单列铺满：`auto` 轨道在这里只按 max-content 定尺，滑块会被压回固有宽度。 */ - grid-template-columns: minmax(0, 1fr); - justify-items: stretch; - width: 100%; - align-self: stretch; - gap: 10px; - padding: 4px 6px 2px; -} - -/* 滑块与档位点是一个整体：点绝对定位叠在轨道中线上（不受字号 / 行高变化影响）。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-slider { - position: relative; - display: grid; - grid-template-columns: minmax(0, 1fr); - width: 100%; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-head { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: 8px; - min-width: 0; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-title { - color: var(--platform-text-strong); - font-size: 12px; - font-weight: 600; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range { - /* 圆钮（input 的 thumb）要压在档位点之上：实心钮不该被它下面那颗点透出来。 */ - position: relative; - z-index: 1; - width: 100%; - height: 26px; - margin: 0; - appearance: none; - border: 0; - background: transparent; - cursor: pointer; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-webkit-slider-runnable-track { - height: 6px; - border-radius: 999px; - /* 已选段一直铺到圆钮右缘（`--strength-ratio` 是无单位档位比例，20px = 圆钮直径）， - 圆钮右缘之外才是未选段；`calc` 让两端在任意轨道宽度下都对齐。 */ - background: linear-gradient( - to right, - var(--platform-accent) 0 - calc(20px + var(--strength-ratio, 0) * (100% - 20px)), - var(--platform-subpanel-border) - calc(20px + var(--strength-ratio, 0) * (100% - 20px)) 100% - ); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-webkit-slider-thumb { - width: 20px; - height: 20px; - margin-top: -7px; - appearance: none; - border: 1px solid var(--platform-subpanel-border); - border-radius: 999px; - /* 实心暖白圆钮：用 `--platform-panel-fill`（两个主题都是不透明面板色）而不是半透明的 - `--platform-input-highlight`——后者浅色主题只有 90% 不透明，下面的已选段会透出来， - 看起来就是个"靶心"。不再画中心点、也不用主色描边成空心环。 */ - background: var(--platform-panel-fill); - /* 圆钮柔影：从品牌主色派生（`color-mix`，不新造 token）。 */ - box-shadow: - 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent), - 0 1px 2px color-mix(in srgb, var(--platform-accent) 16%, transparent); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:hover:not( - :disabled - )::-webkit-slider-thumb { - transform: scale(1.06); - /* 悬停把暖影压深一档（同族派生，不新造色值）。 */ - box-shadow: - 0 3px 9px color-mix(in srgb, var(--platform-accent) 30%, transparent), - 0 1px 3px color-mix(in srgb, var(--platform-accent) 20%, transparent); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:active:not( - :disabled - )::-webkit-slider-thumb { - transform: scale(0.96); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:focus-visible { - outline: none; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:focus-visible::-webkit-slider-thumb { - /* 「白钮 + 间隙 + 环」三明治：先铺一圈 2px 卡片底色当间隙，再叠焦点环——否则 3px 环 - 紧贴 20px 白钮会被读成"空心钮/靶心"。间隙色只能用**颜色** token - （`--platform-panel-fill` 是渐变，写进 `box-shadow` 会让整条声明失效、连环和影子一起丢）， - 所以取 `--platform-input-fill`；环色与厚度不变，对比度不回退。 */ - box-shadow: - 0 0 0 2px var(--platform-input-fill), - 0 0 0 4px var(--platform-input-focus-ring), - 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:disabled { - cursor: not-allowed; - opacity: 0.55; -} - -/* Firefox 的滑块伪元素与 WebKit 不同名，同一套取值再来一份。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-moz-range-track { - height: 6px; - border-radius: 999px; - background: var(--platform-subpanel-border); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-moz-range-progress { - height: 6px; - border-radius: 999px; - background: var(--platform-accent); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-moz-range-thumb { - width: 20px; - height: 20px; - /* 与 WebKit 同一套实心钮：暖白底 + 极淡描边 + 柔和暖影（不用主色描边成空心环）。 */ - border: 1px solid var(--platform-subpanel-border); - border-radius: 999px; - background: var(--platform-panel-fill); - box-shadow: - 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent), - 0 1px 2px color-mix(in srgb, var(--platform-accent) 16%, transparent); -} - -/* 高对比（forced-colors）模式下 thumb 的 box-shadow 会被系统丢弃，焦点会完全不可见， - 这里回退到系统色 outline；只在 forced-colors 生效，亮色观感不受影响。 */ -@media (forced-colors: active) { - .game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:focus-visible { - outline: 2px solid Highlight; - outline-offset: 2px; - } -} - -/* Firefox 的焦点：先关掉轨道自带的 focus-outer 描边，再给圆钮同一套「间隙 + 环」。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range::-moz-focus-outer { - border: 0; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-range:focus-visible::-moz-range-thumb { - box-shadow: - 0 0 0 2px var(--platform-input-fill), - 0 0 0 4px var(--platform-input-focus-ring), - 0 2px 6px color-mix(in srgb, var(--platform-accent) 24%, transparent); -} - -/* 档位点：叠在轨道**之上**（z-index 高于 input），横向跟圆钮用同一套算式—— - 两侧内边距取「圆钮半径 − 半点宽」，`space-between` 让首末点的**中心**正好落在 - 圆钮两端的极限位置，中间各点等距重合；当前档位那一点隐藏（圆钮已经压在那里， - 再画点就会变成"靶心"）。 */ -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-stops { - position: absolute; - top: 50%; - right: 0; - left: 0; - z-index: 2; - display: flex; - align-items: center; - justify-content: space-between; - /* 两侧内边距 = 圆钮半径 10px − 半点宽 3.5px（点 7px 见下）：首末点的**中心**因此正好落在 - 圆钮两端的极限位置，中间各点等距重合。改点宽或钮径时这条与下面的宽高要一起改。 */ - padding: 0 6.5px; - height: 6px; - transform: translateY(-50%); - pointer-events: none; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-stops - span { - box-sizing: border-box; - width: 7px; - height: 7px; - /* 点用深暖底、浅底描边：叠在暖灰轨道上看得到边界（对比度实测见 PR）。 */ - border: 1.5px solid var(--platform-input-highlight); - border-radius: 999px; - background: var(--platform-text-strong); -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-stops - span.is-active { - opacity: 0; -} - -.game-workbench-chat - .project-chat-surface.is-direct-codex - .project-chat-composer.is-direct-codex - .project-chat-composer-strength-value { - color: var(--platform-text-soft); - font-size: 11px; - text-align: right; -} +/* 强度区的观感（标题 / 滑块 / 档位点）同样已经抬到文件上方「模型菜单的共享样式面」一节， + 选择器只用组件自带类名（`.project-chat-reasoning-effort.is-section` 一族）， + 首页与工作台共用同一份；这里不再有工作台专属的强度区规则。 */ diff --git a/apps/ai-game-creator-shell/src/view/home/index.tsx b/apps/ai-game-creator-shell/src/view/home/index.tsx index 64307288d..97dab66c9 100644 --- a/apps/ai-game-creator-shell/src/view/home/index.tsx +++ b/apps/ai-game-creator-shell/src/view/home/index.tsx @@ -16,6 +16,7 @@ import type { ProjectStartMode } from '../../app/types'; import { resolveHomeCreationFailureMessage } from '../../features/app-shell/homeCreationFailure'; import { ConversationModelSelect } from '../../features/project-workspace/ConversationModelSelect'; import type { GameTemplateEntry } from '../../features/template-library/templateLibraryModel'; +import { ComposerReasoningEffortSelect } from '../project-development/chat/components/DirectProjectComposer/ComposerControls'; import RichInputArea, { UploadButton } from './components/RichInputArea'; import { richTextToAttachments, @@ -297,6 +298,14 @@ export default function HomeView({ + } />