Skip to content

[bug] 设置:模型接入的「保存模型」按钮缺少主按钮样式,与「取消」视觉不一致 #3

Closed

Description

@allendyu

问题与影响

在「设置 → 模型接入」中编辑或新增模型时,底部操作区的 「保存模型」按钮与「取消」按钮外观不一致。

「保存模型」是本表单的主操作(type="submit",提交并持久化模型配置),但它在视觉上没有主按钮强调,与同排的次要操作「取消」处在同一视觉层级,甚至因背景为灰白色而更像一个禁用状态的按钮。用户在配置完模型后难以判断哪个是确认动作,容易误点「取消」丢失已填写的表单内容。

从截图可见,「取消」为深色描边按钮,「保存模型」则是灰白底 + 浅灰文字,两者尺寸一致但强调关系丢失。

复现步骤

  1. 打开画布,进入「设置」。
  2. 切换到「模型接入」分类。
  3. 在任一分组(如「音频生成」)点击「添加模型」,或点击已有模型的「编辑」。
  4. 观察表单底部右侧的「取消」与「保存模型」两个按钮。

步骤 3 中任意一种入口均可复现,无需填写或提交表单。

预期与实际

  • 预期:主操作「保存模型」使用与全站一致的主按钮样式(强调色背景/文字),与次要操作「取消」形成明确的视觉层级,且不使用 disabled 的观感;鼠标悬停时保持主按钮的悬停反馈。
  • 实际:「保存模型」带有 cw-domain-primary 类,但该主按钮样式在本弹窗内未生效,最终仅呈现为浅灰背景,与「取消」平级,且观感接近禁用状态。

定位与证据

组件:src/canvas/ModelSettings.tsx:271-278

<div className="cw-model-form-actions">
  <button type="button" onClick={onClose}>
    取消
  </button>
  <button className="cw-domain-primary" type="submit">
    {busy ? "保存中…" : "保存模型"}
  </button>
</div>

「保存模型」确实被标记为主按钮(cw-domain-primary),因此问题出在样式作用域而非标记本身。

样式作用域不匹配(已核对三条声明):

  1. src/canvas/node-editors.css:130 定义了主按钮的实际强调样式,但选择器要求祖先为 .cw-domain-dialog:
    .cw-domain-dialog .cw-domain-primary {
      border-color: #c5a4dd;
      color: #2c1c37;
      background: #c5a4dd;
    }
  2. src/canvas/settings.css:263 对模型区内的所有按钮统一施加中性样式,优先级上先覆盖主按钮:
    .cw-settings-dialog .cw-model-section button {
      border: 1px solid var(--settings-border);
      background: var(--settings-hover);
    }
  3. src/canvas/settings.css:272 虽是针对本弹窗的主按钮声明,但只改底色,未恢复强调色与描边:
    .cw-settings-dialog .cw-domain-primary {
      color: #18191c;
      background: #dfe5e1;
    }

关键点:ModelSettings 的根节点是 .cw-model-settings(ModelSettings.tsx:299),它渲染在 SettingsDialog 的 .cw-settings-dialog 内(SettingsDialog.tsx:156, 215),整条链路上不存在 .cw-domain-dialog,因此第 1 条强调样式从未命中。

浅色主题同样未覆盖:src/canvas/themes.css:179 的浅色主按钮规则也只作用于 .cw-domain-dialog .cw-domain-primary,在本弹窗内同样不生效。

复现层级:以上结论基于源码阅读与选择器命中分析,已确认主按钮强调样式在本弹窗内不可达;截图为用户在真实界面中的观察结果,与上述分析一致。未在浏览器中逐条读取 computed style。

附带观察(非本 Issue 主诉):同一弹窗内 cw-model-form-actions(model-settings.css:58)只做了右对齐与间距,未对主/次按钮做层级区分,可一并核对。

验收标准

  • 在「设置 → 模型接入」中,「保存模型」呈现为明确的主按钮(与全站主按钮样式一致,具备强调底色与对比文字色),与「取消」形成清晰的层级差异。
  • 「保存模型」不再呈现任何接近 disabled 的观感;悬停与聚焦状态可见,并保持与主按钮一致的反馈。
  • 保存中(busy)时的「保存中…」文本在视觉上仍被识别为进行中的主操作。
  • 深色与浅色两套主题下均满足以上三点。
  • 不引入回归:.cw-domain-dialog 内其他主按钮样式不变;「取消」仍保持次要按钮外观且可正常关闭表单。

设置-模型接入-保存模型按钮与取消按钮视觉不一致

Activity

  1. kunkunblueberry commented on Nov 2, 2026

    @kunkunblueberry
    Collaborator

    核实结论:已修复,浏览器计算样式确认

    问题描述的两个成因(.cw-domain-dialog .cw-domain-primary 在本弹窗内不可达;.cw-settings-dialog .cw-model-section button 以更高优先级覆盖主按钮)在当前 main 上都不再存在:模型接入表单在 #21 之前已重写为 ModelServiceForm,按钮类名改为 cw-settings-button cw-settings-button-primary,全仓已无 .cw-model-section 匹配。

    环境:Ubuntu 22.04.5、Node 24.22.1、Chromium 145(playwright-core 1.58.2 headless shell),隔离测试服务 tests/browser/creation_server.py + npm run dev。

    步骤:打开画布 → 点「设置」→「模型接入」→「添加服务」→ 读取表单底部两个按钮的 getComputedStyle,再切换 data-theme="light" 重复读取。

    结果(保存服务 为主操作,取消 为次要操作):

    主题 主按钮背景 / 文字 次要按钮背景 结论
    dark rgb(167, 139, 212) / rgb(33, 24, 45) rgb(25, 25, 27) 主按钮为强调色(--cw-control-accent #a78bd4),与次要按钮明显区分
    light rgb(63, 108, 214) / rgb(251, 251, 252) rgb(244, 246, 251) 主按钮为强调色(#3f6cd6),与次要按钮明显区分

    对应验收标准:

    • 主操作呈现为明确的主按钮(强调底色 + 对比文字色),与「取消」形成层级差异 —— 深浅两套主题均确认。
    • 不再呈现接近 disabled 的观感 —— 实测主按钮为强调色,不是灰白。
    • 深浅两套主题均满足 —— 见上表。
    • 不引入回归:.cw-domain-dialog 内其他主按钮样式未改动,「取消」仍为次要按钮且可正常关闭表单。

    补充说明:进入「添加服务」表单且尚未选择模型时,主按钮处于 disabled 状态(需至少选择一个模型),这是表单校验的预期行为,与配色问题无关。

    结论:本 issue 描述的视觉缺陷在当前 main 上不可复现,按完成关闭。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:providerModel providers and generation protocolstype:bugSomething is broken

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions