# 设置面板 UI 改造进度

- 日期：2026-09-19
- 基线：`origin/staging` / `4f4cd684`
- 分支：`codex/settings-ui-20260919`
- 范围：设置弹窗布局、个人资料、星盘资料列表入口；不修改账户 API、星盘 API、数据库或工作流。

## 已完成

- 设置弹窗保留四个分区共用 `.settings-modal`，桌面左侧导航从 176px 调整为 200px，并增加导航与内容之间的 hairline 分隔。
- 设置导航移除误导性的尾部右箭头，保留图标 + 分区名称；标题增加“设置”眉标题并保留当前分区标题。
- 右侧内容区增加桌面 32px 内边距，表单阅读宽度上限从 440px 调整为 560px；移动端使用 16px 内容内边距。
- 保留 `vh` 基线与 `@supports (height: 1dvh)` 升级，不回退到会被压缩器吃掉的重复声明写法。
- 个人资料头像文案改为“账户头像”，Beam 说明收紧，预览从 48px 改为 56px；同步桌面与移动端 CSS。
- “添加其他人”移动到“其他人”分组标题右侧，列表继续默认不展开表单。
- 更新 `frontend/DESIGN.md`、设置布局合同测试、资料面板测试和星盘资料合同测试。

## 断言变更记录

| 文件 | 原值 | 新值 | 原因 |
| --- | --- | --- | --- |
| `frontend/tests/profile-panel.test.ts` | `size={48}` | `size={56}` | 头像预览需要更清晰的视觉锚点，并与账户身份区留出稳定间距。 |
| `frontend/tests/account-dialog-overlay.test.ts` | 表单 cap 420–460px | `max-width: 560px` | 内容区已有明确内边距，资料表单需要舒适阅读宽度，避免右侧留下过大的空白。 |

## 测试结果

已执行结果：

- `npm run lint`：退出码 0，120 warnings、0 errors；警告与本轮改动无关，未顺手修改。
- `./node_modules/.bin/tsc --noEmit`：安装当前 worktree 依赖后无输出并以退出码 0 结束。
- 设置相关定向测试：21 tests / 21 pass / 0 fail，覆盖设置导航、固定外框、两列导航、内容内边距、560px 表单 cap、头像 56px、星盘资料列表入口与详情动作。
- 全量 `npm test -- --test-name-pattern=...`：退出码 1，3481 tests / 3402 pass / 79 fail；失败集中包含重复迁移文件、Windows 路径拼接、Docker/数据库和技能 symlink 权限等环境或基线问题，不能宣称全量通过，需与基线逐条比对。
- `npm run build`：编译与 TypeScript 阶段通过，但在收集 `/api/daily-starlanguage` 页面数据时因 Windows 禁止创建 Skill runtime symlink 失败；这是环境权限缺口，不是本轮设置 UI 编译错误。构建未形成可用于确认 `/` Static 或首屏 gzip 的完整产物。

## 浏览器验收环境缺口

尚未进行登录态下的浏览器截图级走查。需要受控账号、Chrome/真实设备和真实设置内容，按 `docs/testing/settings-dialog-20260916.md` 复核四分区切换、深色主题、移动端四栏、个人资料头像和星盘资料列表。没有受控登录态或 Chrome 时，不把该项写成通过。

## 未完成事项

- 浏览器/真实设备验收仍待具备受控登录态与 Chrome 的环境执行；BUG-970 继续保持 `investigating`。
- 构建因 Windows Skill runtime symlink 权限缺口未完成页面数据收集，需在允许 symlink 的环境复跑，才能确认 `/` Static 与首屏 gzip。
- 完整测试的 79 个失败需在可用环境与基线逐条比对；本记录不把它们归因于本轮 UI 改动。