OpenProgram · Web UI · 当前设计

Settings 二级导航栏头

目标：保留 Settings 二级栏头；栏头按钮顶边以及下方分类按钮的纵向网格都与应用主侧栏一致。Provider 页面继续使用位于列表和详情上方的完整大标题栏；列表始终展开，第三级工具栏只有通栏搜索框。

读者
Web / Desktop UI 实现
范围
Settings 二级导航
展开
沿用现有列宽
折叠
Settings 为 49px

目标结构

一级与二级栏头

两栏的 32px 栏头按钮顶边一致，第一行及后续 32px 导航按钮也逐行对齐。

OpenProgram‹
程序
设置‹
通用
LLM 供应商
LLM 供应商
搜索供应商…

二级收起状态

Settings 仍可收至 49px；Provider 列表保持展开，搜索框通栏、无列表收起按钮。

OpenProgram›
设置›
LLM 供应商
搜索供应商…

Provider 模型卡片窄布局

›◉ GPT-5.6 Solgpt-5.6-sol ◉⌕◈1M

详情宽度不超过 420px 时，开关固定在卡片右上，名称与模型 ID 使用中间自适应列；能力标签从名称列起占满下一行并自动换行。宽布局、展开面板和模型启用行为保持不变。

Provider 凭据层级

每条凭据使用一个有边界的账户卡片。验证结果与重新验证合并为一个控件；启用状态保留为 Switch；重命名、替换和删除使用带可访问名称的图标按钮。同层级操作统一为 28px 高度、6px 圆角和 14px 图标；纯图标操作为 28px 正方形，状态文字按钮只按内容扩展宽度。新增表单默认收起，避免与已有凭据争夺视觉层级。

列级契约

区域展开状态收起状态持久化栏头
Settings 分类栏--sidebar-width - 1px49pxsettingsNavOpenSettings + 收起按钮
Provider 列表栏最大 --sidebar-width - 1px；窄内容区不超过 42%始终展开，无 49px 图标轨无通栏搜索框；始终显示 Enabled / Not enabled 分组与 Add Custom Provider
内容区域使用剩余宽度；Memory 控件在窄宽度下换行，不改变导航状态。Providers 显示页面大标题；Memory 不增加重复页头

交互与状态边界

独立控制收起 Settings 分类栏不影响 Provider 列表；Provider 列表没有独立收起控件。 用户状态优先改变窗口宽度不自动展开或收起 Settings 分类栏。 持久化刷新和重新进入 Settings 后恢复分类栏最后一次选择（settingsNavOpen）。 键盘与读屏Settings 分类栏收起按钮保留原生 button、aria-expanded、aria-controls 与明确名称。 内容适配窄窗口只触发表单控件换行；详情数据、选择和滚动状态不变。 Provider 详情Provider 列表始终展开，在窄内容区连续缩至最多 42%，为详情保留剩余宽度。Provider 开关属于标题行，不单独占一行。每条凭据显示为账户卡片：名称与验证状态在卡片头，密钥在卡片主体，使用状态在卡片底部；重命名、替换、重新验证和删除在窄宽度下使用图标按钮。新增凭据先显示单一入口，展开后才显示表单。 层级表达OpenProgram 品牌标题为 20px；Settings 二级导航标题与右侧内容页标题均使用 18px，保持低一级层级；Provider 第三级不增加独立名称栏头。 纵向网格Settings 分类列表整体下移 15px，使 General、LLM Providers 等行与主侧栏 New chat、Programs 等行逐行对齐；行高和 1px 行距不变。 导航顺序General → LLM Providers → Memory → Web Search → Browser → Channels → Token Usage → System；基础设置优先，模型与记忆相邻，统计和系统置后。

采用与排除

采用

  • Settings 分类栏复用现有两态收起状态和图标。
  • 删除全局 Settings 顶栏。
  • Memory 不增加重复页头，Providers 恢复完整页面标题栏。
  • 只在 Settings 二级栏头显示名称和按钮；Provider 列表不提供收起控件。

排除

  • 不增加拖拽调整列宽。
  • 不按 breakpoint 强制改变用户状态。
  • 不修改 Memory、Provider 或模型数据。
  • 不改变应用主侧栏行为。

规范与现有框架对照

依据提供的能力本设计采用未提供或不采用
WAI-ARIA APG 展开控件原生按钮、aria-expanded、可选 aria-controls、Enter/Space 键盘触发Settings 分类栏收起按钮保留这些语义APG 不规定多列宽度和标题位置；Provider 列表不再提供收起按钮
MDN aria-expanded控制元素与被控制区域的状态关系状态值与可见列内容同步不使用 aria-pressed 表达展开状态
OpenProgram 现有 Sidebar + CSS Grid49px 收起轨、现有动画图标、本地持久化、剩余内容宽度直接复用，不新增组件库或状态层不增加拖拽 resize handle 和自动 breakpoint 状态

验收标准

  • Settings 页面不再渲染独立的全局 Settings 顶栏。
  • OpenProgram 品牌标题为 20px；Settings 分类栏的 Settings 与右侧 LLM Providers 内容页标题均为 18px；按钮与名称同一行，按钮顶边与主侧栏按钮一致。
  • Settings 分类列表的前四行与主侧栏前四行具有相同的 y 坐标、32px 行高和 1px 行距。
  • Settings 分类链接按 General / LLM Providers / Memory / Web Search / Browser / Channels / Token Usage / System 顺序呈现；URL、图标、激活态和键盘顺序随同一数组保持一致。
  • LLM Providers 列表栏不显示新增名称栏头，也不提供列表收起按钮；搜索框通栏，分组标签与 Add Custom Provider 始终可见。
  • LLM Providers 在列表和详情上方显示页面大标题与介绍，路由 loading 状态保持同一结构。
  • Memory 内容区继续不显示重复标题和介绍。
  • Provider 详情变窄时不出现控件重叠或横向溢出；账号名称、密钥、状态和三个操作按钮仍完整可用。
  • API Key 名称、验证状态、掩码值和启用状态位于同一个账户卡片内；验证状态本身可触发重新验证，不再单独显示 Validate 按钮。
  • 已有 Key 时，新增 Key 表单默认不显示；用户通过 Add API key 展开表单，并可取消。
  • 窄详情缩减左右内边距，Provider 开关保持在标题区域；图标操作具有 title 和 aria-label。
  • 窄详情只重排内部内容，不自动收起 Settings 分类栏，不缩小字体，也不修改数据与交互行为。
  • Settings 分类栏保留 settingsNavOpen、键盘语义、图标选择和 49px 收起宽度；Provider 列表不再使用 providerListOpen。

实现状态

既有结构状态：已实现并复核。

  • Settings 分类列表整体下移 15px；生产页面前四行与主侧栏均位于 y=56/89/122/155px，行高均为 32px。
  • Settings 收起后首个分类图标仍位于 y=56px；49px 栏宽、栏头按钮顶边、localStorage 与 ARIA 行为不变。
  • Providers 列表始终展开：搜索框通栏，无列表收起按钮，分组标签与 Add Custom Provider 始终可见；Memory 无重复页头及 loading 结构未修改。
  • Settings 定点检查、Memory 设置检查、TypeScript、production build 和 diff check 均通过；规格与质量复核均为 PASS。

导航顺序：已实现并复核。

  • 生产 DOM、键盘顺序和收起态标题均为 General / LLM Providers / Memory / Web Search / Browser / Channels / Token Usage / System。
  • 默认 OpenProgram App 可视验收确认 General 激活态、图标标签绑定和既有纵向对齐均正确。
  • 实现提交通过 Settings 定点检查、Memory 设置检查、TypeScript、production build、规格复核和质量复核。

Provider 窄宽度适配：已实现并复核。

  • Provider 列表始终展开，在窄内容区连续占 42%，宽内容区封顶 287px；不再提供 49px 图标轨或列表收起状态。
  • 详情容器按 680/420/300px 三个边界重排页头、账号操作、密钥编辑、通用表单和模型信息；宽布局保持原固定列。
  • 默认 OpenProgram App 在 750px 窗口、两级栏保持展开时实测列表约 121px、详情约 167px；Replace 编辑态的 103px 密钥区域无横向溢出，Base URL 与 Connectivity 正常断行。
  • Settings 与 Memory 定点检查、TypeScript、production build 和 diff check 均通过；规格与质量复核均为 PASS。

Provider 凭据层级：已实现并复核。

  • 每个凭据统一为包含标题和使用开关的账户卡片，API Key 卡片额外显示掩码 Key；验证状态与重新验证合并为一个控件，Rename、API Key 的 Replace、Remove 使用带可访问名称的图标操作。
  • 已有凭据时，新增 Key 表单默认收起为 Add API key 入口；取消新增会清理 Key 草稿，Key 名称与 native login 名称使用独立状态。
  • 详情内边距由子级 detailSurface 承载，实测在 681/680/300px 详情宽度下分别为 20/12/8px；零账户与已有账户表单在宽窄状态均保持正确列映射。
  • 默认 OpenProgram App 已完成正常窗口可视验收；Settings、Memory、TypeScript、production build、目标 HTML 与 diff 检查通过，规格和质量复核均为 PASS。
  • 账户 API、轮询策略、Provider/Key 状态语义和导航列行为未改变。

Provider 操作控件尺寸：已实现并复核。

  • 账户卡片内 Rename、Validate、Remove、Replace 和取消操作统一为 28px 高度、6px 圆角和 14px 图标；纯图标操作同时固定为 28px 宽度。
  • 状态颜色、文字、交互行为和可访问名称保持不变。
  • 静态合同在原实现上失败、在当前实现上通过；Settings、Memory、TypeScript、production build、目标 HTML 与 diff 检查通过，规格和质量复核均为 PASS。

Provider 模型卡片窄布局：已实现并复核。

  • 详情宽度不超过 420px 时，模型名称与 ID 位于左上，Switch 位于右上，能力标签占据下一行剩余宽度并自动换行。
  • 宽布局、展开内容、搜索、批量操作和模型启用行为保持不变。
  • 静态合同、Settings、Memory、TypeScript、production build、目标 HTML 与 diff 检查通过，规格和质量复核均为 PASS。

Settings 栏头字号调整（历史阶段）：已实现并复核，当前由后续层级修正覆盖。

  • Settings 二级栏头文字由 18px 调整为 24px，并使用紧凑行高保持在 32px 栏头内居中。
  • 该步骤未改动折叠按钮位置、分类列表位置、收起态和其他页面标题字号。
  • 该阶段静态合同曾锁定 24px Settings 栏头；Settings、Memory、TypeScript、production build、目标 HTML、链接与 diff 检查通过，规格和质量复核均为 PASS。

Settings 内容页标题字号调整（历史阶段）：已实现并复核，当前由后续层级修正覆盖。

  • 右侧共享内容页标题由 18px 调整为 24px，使 LLM Providers 与左侧 Settings 使用相同的顶部标题字号。
  • 窄内容区允许长标题在单词内部换行；说明文字、页头内边距、导航状态、Provider 详情与 Memory 页面结构保持不变。
  • 该阶段静态合同先在 18px 旧实现上失败，在当时的 24px 实现上通过；Settings、Memory、TypeScript、production build、目标 HTML、链接与 diff 检查通过，规格和质量复核均为 PASS。

Settings 顶部标题层级修正：已实现并复核。

  • 根据默认 App 的实际计算样式，将中间 Settings 和右侧内容页标题统一调整为 18px，低于 20px 的 OpenProgram 品牌标题。
  • 字体粗细、栏头高度、按钮位置、说明文字和页面数据行为保持不变。
  • 静态合同同时锁定 20px 品牌标题和两个 18px Settings 标题；Settings、Memory、TypeScript、production build、目标 HTML、链接与 diff 检查通过，规格与质量复核均为 PASS。

Settings 标题下行字母显示：已实现并复核。

  • Settings 二级栏头保持 18px 字号，将行高由 1 调整为 1.2，避免 g 等下行字母被标题自身的裁切规则截断。
  • 32px 栏头高度、折叠按钮位置、横向省略、49px 收起态、导航与页面数据行为保持不变。
  • Chromium 与 Inter Variable 字体实测 g 下沿完整保留；Settings、Memory、TypeScript、production build、目标 HTML、链接与 diff 检查通过，规格与质量复核均为 PASS。