Repository navigation
Issue 127
- 类型：优化
- 状态：已实现并完成本地必需验收；PR #134 待审阅（补充SSH测试存在基线失败）
- Issue：https://github.com/ShaoClean/Alune/issues/127
- PR：https://github.com/ShaoClean/Alune/pull/134
- 最近更新：2026-09-30
- 代码基线：
development547e3f3。之后合入的 #132、#131（当前9a11d77）只调整了仓库标签激活和远程分支逻辑，设置页组件与外壳样式未变。
进入 /settings/:category 时，Layout 在工作区外壳之外渲染全屏的 SettingsCenter，并隐藏整个 .app-shell（Layout.tsx:261）。SettingsCenter 自带品牌区、面包屑头部、分类导航、窄窗口分类下拉和页脚（SettingsCenter.tsx:58），样式在 settings.css 中独立维护。因此从工作区进入设置时，左上角、顶栏、导航条目、底栏、分隔线和背景同时变化；各分类的正文最大宽度也不同，切换分类时正文左缘会跳动。逐项差异见 issue 正文的“差异对照”。
v0.5.0 README 截图（演示数据，1440 × 900，深色主题）：
| 工作区 | 设置 · 网络代理 | 设置 · 外观 |
|---|---|---|
 |
 |
 |
#31 设计稿的布局设置页已使用“设置”左栏标题和工作区状态栏，是本次的起点；#31 只集中了设置入口，没有改造设置页外壳。
让设置页成为主界面中的一个视图：左栏、48px 顶栏、正文区和 32px 状态栏与工作区保持同一位置、尺寸、背景与分隔线，进入或退出设置时窗口骨架不跳变，只切换左栏内容、顶栏标题和正文。导航、标题、间距和控件使用主界面的组件样式与 Moonlight 令牌。
包含：外壳、左栏、顶栏、状态栏、正文宽度、服务商页的宽度切换，以及把分类页中的原生 <select> 改为 antd Select。
不包含：增删设置项，修改设置数据结构、存储、后端接口或各分类的业务逻辑；修改 Moonlight 色值；重做工作区本身的布局。
下载独立交互设计稿（HTML，约 0.9 MB）。保存后用浏览器打开，无需安装依赖或启动服务。
设计稿以 547e3f3 的工作区与设置组件标记、样式和 antd 主题配置为基础，只修改本次涉及的外壳与下拉，使用虚构数据；业务按钮不执行真实操作。七个设置分类和工作区都可以打开，左栏可拖拽、收起，窗口 < 900px 时变为抽屉。右下角的演示面板可切换工作区 / 设置和主题（跟随系统 / 浅色 / 深色），并显示当前窗口宽度；截图时用 capture 参数隐藏。
也可以在地址后加参数直接打开某个场景，例如 ui-design.html?theme=dark&cat=commit&sidebar=collapsed：
| 参数 | 取值 |
|---|---|
theme |
light / dark；省略时跟随系统 |
cat |
providers（默认）/ commit / tokens / layout / appearance / proxy / updates
|
view |
workspace 打开工作区；省略时打开设置 |
sidebar |
collapsed 收起左栏 |
drawer |
1 在窗口 < 900px 时打开抽屉 |
provider |
detail 在逐级进入模式下直接打开服务商详情 |
open |
model / delete 打开服务商页的添加模型或删除确认弹窗 |
sw |
左栏宽度（184–320） |
capture |
隐藏演示面板 |
以下截图于 2026-09-30 从设计稿截取，使用系统回退字体。
AI 服务商：正文宽 1204px，服务商列表 210px，详情内容最大 760px。
| 浅色 | 深色 |
|---|---|
 |
 |
网络代理：宽内容一档，最大 1180px，底部保存栏保留。
| 浅色 | 深色 |
|---|---|
 |
 |
左栏收起后，顶栏左侧依次为左栏开关和“返回工作区”按钮（已确认第 9 条）。提交生成页的服务商、模型、输出语言和提交格式均为 antd Select，表单一档，最大 760px。
| 浅色 | 深色 |
|---|---|
 |
 |
1100 × 800：正文宽 864px（600–899px 档），服务商列表收窄为 178px。
| 浅色 | 深色 |
|---|---|
 |
 |
560 × 900：窗口 < 900px，左栏变为抽屉，正文 < 600px，服务商页改为“列表 → 详情”逐级进入；详情顶部提供“返回服务商列表”。
| 浅色 | 深色 | |
|---|---|---|
| 列表 |  |
 |
| 详情 |  |
 |
设置分类在抽屉中切换，与工作区一致；抽屉头部同样有“返回工作区”和收起按钮，顶栏始终显示当前分类。
| 浅色 | 深色 |
|---|---|
 |
 |
与上方设置截图对照：左栏、顶栏、正文区和状态栏的位置与尺寸相同。
| 浅色 | 深色 |
|---|---|
 |
 |
| 区域 | 设计规则 |
|---|---|
| 外壳 | 设置在同一个 .app-shell 网格中渲染，不再使用独立的全屏容器、头部和页脚。设置中隐藏仓库工具栏行；工作区内容保持挂载，只在 .app-main 内隐藏。 |
| 左栏 | 标题为“设置”，右侧依次为“返回工作区”图标按钮和收起按钮，不显示“打开本地仓库”。分类条目使用 .sidebar-nav-item，“AI / 应用”使用左栏分组标题样式。不再显示品牌区和版本号，版本号仍可在状态栏菜单和“版本更新”分类中查看。 |
| 左栏宽度与显隐 | 与工作区共用 --sidebar-width、拖拽手柄和收起状态，⌘/Ctrl B 在设置中同样可用；在一侧调整后，另一侧保持一致。 |
| 顶栏 | 使用 .app-tabbar 的高度、背景与分隔线，只显示“设置 / 分类名”，分类名加粗；不显示仓库标签和右栏开关。左栏收起或处于抽屉模式时，顶栏左侧依次显示左栏开关和“返回工作区”按钮。 |
| 状态栏 | 继续显示 WorkspaceStatusBar：当前仓库、路径、执行位置和通知保持可用。原页脚的“设置应用于此设备的所有仓库”移到服务商列表底部和提交生成说明中，“令牌仅用于明确关联的仓库远端”移到访问令牌说明中。 |
| 正文 | 背景 --content，内边距与 .app-content 相同，h1 24px / 700、说明 12px，与 .page-heading 对齐。内容左对齐，宽度分两档（建议 a）。 |
| 服务商页 | 按正文宽度（@container）而不是视口宽度切换：≥ 900px 时列表 210px，600–899px 时 178px，< 600px 时逐级进入。只通过 CSS 切换，不重新挂载表单，选中项和未保存的输入保留。 |
| 下拉 | 分类页中的原生下拉改为 antd Select，高度 34px，与主界面一致。字段标题通过 aria-labelledby 关联；“仅测试模型列表接口”仍是可选的空值选项，其余未选择状态为占位文字；代码主题保留分组、与当前外观不匹配的禁用项和 aria-describedby 说明（演示数据中没有已安装主题）。 |
| 焦点 | 打开设置时聚焦“返回工作区”：左栏可见时为左栏中的按钮，否则为顶栏中的按钮。收起或展开左栏时，焦点在两个按钮之间转移，左栏开关同理。返回工作区时恢复离开前的焦点；直接进入设置的情况下，落在当前仓库标签上。 |
| 快捷键 | ⌘/Ctrl , 打开设置；已在设置中时保持当前分类，并聚焦“返回工作区”。⌘/Ctrl B 切换左栏或抽屉；⌘/Ctrl ⇧ B 只在工作区中切换右侧面板，在设置中不产生效果。 |
| 抽屉 | 窗口 < 900px 时左栏为抽屉：打开时焦点移入并在抽屉内循环，Esc 或点击遮罩关闭；选择分类后抽屉关闭，焦点回到顶栏的左栏开关。 |
| 主题 | 只使用现有 Moonlight 变量（--line、--sidebar-line、--content、--surface 等），移除 --settings-line；深浅主题与工作区一致，不修改色值。 |
第 1–4 条于 2026-09-29 确认，第 5–9 条于 2026-09-30 确认，其中第 5–8 条按建议执行。
- 顶栏内容：设置中只显示“设置 / 分类名”，不显示仓库标签。
- 返回入口位置：放在左栏标题旁。
- 左栏状态：设置与工作区共用左栏宽度和收起状态。
-
下拉控件：原生
<select>改为 antdSelect，并入本次。 - 服务商页空间：按正文实际宽度切换：≥ 900px 时列表 210px；600–899px 时 178px；< 600px 时逐级进入。
- 窄窗口切换分类：通过抽屉切换，不再保留单独的分类下拉；选择后抽屉关闭，焦点回到顶栏的左栏开关。
- 状态栏行为：在设置中切换仓库、浏览仓库或管理连接时，离开设置并打开目标页面；网络代理页有未保存修改时先弹出现有的离开确认。在设置中再次打开设置时保持当前分类。
- 设计稿：实现前先确认本页设计稿。
- 左栏隐藏时的返回入口：左栏收起或处于抽屉模式时，在顶栏左侧、左栏开关旁显示同一个返回按钮。
用户在实现任务中确认现有设计稿与以下 a–d 项，随后开始实现；同时确认普通输入框、下拉和密码框统一为 34px。
- (a) 正文宽度：两档，均左对齐。表单类（提交生成、布局、外观、版本更新）最大 760px；宽内容（访问令牌、网络代理）最大 1180px。服务商页铺满正文，详情内容最大 760px。
- (b) 状态栏：设置中保持工作区上下文（当前仓库与路径），同时提示返回后所在的位置，不另外显示设置专用内容。
- (c) 可访问名称：设置中左栏开关为“隐藏 / 显示设置分类”，拖拽手柄为“调整设置分类宽度”，抽屉遮罩为“关闭设置分类”，左栏区域为“设置导航”；分类导航仍为“设置分类”。目前左栏开关固定为“隐藏 / 显示左侧工作区”（PanelToggle.tsx:10）。
-
(d) 返回按钮样式：顶栏中的返回按钮为 30 × 30 图标按钮，与左栏开关同尺寸；左栏标题旁为小号文字图标按钮。两处的
aria-label与title均为“返回工作区”。
另外，设置页中的普通 antd Input（如 API 地址、服务器地址）高 26px，而 Select 和密码框为 34px。这是现有行为，源于 .settings-center input { font: inherit } 覆盖了 antd 的字体与行高（settings.css:28），v0.5.0 截图中也是如此，设计稿保持原样。改用 antd Select 后同一表单中的高度差更明显，用户于 2026-09-30 确认按设计稿实施，并在本次将输入框统一为 34px。
- 打开任一设置分类时，左栏、48px 顶栏、正文区和 32px 状态栏的位置、尺寸、背景与分隔线与工作区一致；进入或返回设置时窗口骨架不跳变。
- 左栏标题为“设置”，标题旁有“返回工作区”按钮；分类导航与工作区导航样式一致，保留“AI / 应用”分组；不再显示独立品牌区和重复的版本号。
- 设置与工作区共用左栏宽度和收起状态；窗口 < 900px 时在抽屉中切换分类，选择后抽屉关闭，焦点回到顶栏的左栏开关。
- 顶栏只显示“设置 / 分类名”；左栏收起或处于抽屉模式时，顶栏左侧显示返回按钮。
- 返回工作区后恢复原路由、焦点、提交草稿、仓库标签和面板状态。
- 状态栏行为符合已确认第 7 条；原页脚中的范围说明在对应分类中可见。
- 各分类遵循统一的标题、间距和内容宽度规则，切换分类时正文起始位置不跳动。
- 设置中不再使用原生
<select>；占位项、空值选项、分组、禁用项、键盘选择和可访问名称正常。 - 七个分类的功能不回退；服务商页按正文宽度在两栏和逐级进入之间切换，选中项和未保存的输入不丢失。
- 深浅主题、减少动态效果、键盘操作和读屏名称正常。
-
apps/web的npm test与npm run build通过；桌面冒烟测试已按新结构更新并在本地通过。 - 改动前后的截图和验收记录已补充到本页或
Issue-127-Validation。
| 日期 | 代码提交 / 环境 | 命令或场景 | 结果与证据 |
|---|---|---|---|
| 2026-09-30 | 设计稿（基于 547e3f3）；macOS，Ego 浏览器（Chromium） |
8 个场景 × 深浅主题截图：1440 × 900 的服务商、网络代理、左栏收起的提交生成和工作区；1100 × 800 的服务商；560 × 900 的服务商列表与详情；800 × 800 的抽屉 | 通过：均无横向溢出，控制台无 antd 报错；截图见上方“UI 设计稿” |
| 2026-09-30 | 同上 | 交互：收起 / 展开左栏时的焦点转移；设置中 ⌘/Ctrl B；顶栏返回按钮；⌘/Ctrl , 保持当前分类并聚焦“返回工作区”；800px 下打开抽屉与 Esc 关闭 | 通过 |
| — | — | 真实应用实现、npm test、npm run build、桌面冒烟测试 |
未运行：尚未开始实现 |
代码 7c0290b 已实现共享外壳、导航与抽屉、工作区状态保留、11个antd Select及34px单行输入。Web 196项测试与构建、桌面构建、45项桌面单元测试和完整Electron write/restore冒烟均通过。
完整实现验收包含224张前后对照、14张额外场景、尺寸与下拉交互记录，以及未验证平台。补充代码阅读测试的本地场景通过，SSH因SFTP No response from server失败；改造前Web和原始脚本复跑同样失败，本次未将其计为通过。
历史设计阶段的“未运行”记录保留，以上为后续实际验证。关联 PR #134。
- 设计稿不是真实应用：组件标记和样式复制自
547e3f3，数据为虚构，字体为系统回退字体，与真实应用可能有细微差异。antdSelect的键盘操作、读屏名称和点击字段标题的行为需在实现后复验。 - 设计阶段限制（现已在实现验收中补齐）：320px 最小窗口宽度和 184px 最窄左栏未单独截图（设计稿中可用
sw=184查看），实现验收时补充。 - 在“布局”分类中调整左栏宽度或收起左栏时，设置页自身的左栏同步变化；收起后顶栏仍有左栏开关和返回按钮，不会无法恢复。
- 多个 Electron 冒烟测试依赖现有设置页 DOM 和原生下拉，只在发布流程中运行，需要同步更新（清单见 issue 正文的“方案建议与代码线索”）。
- 回退：本次只改前端结构和样式，不改设置数据，回退代码即可恢复独立设置中心。Wiki 使用独立历史，回退时需同步核对本页状态。
- 相关设计：#21 设置中心与服务商三栏、#31 工作区与设置入口、#86 月光主题、#40 网络代理、#107 访问令牌、#114 代码主题与字体、#118 反馈弹窗与作用域、#126 恢复仓库标签。
- 代码位置（
547e3f3）：- 设置页渲染在外壳之外：Layout.tsx:261
- 顶栏左侧的左栏开关：Layout.tsx:286
- 设置中屏蔽面板快捷键：Layout.tsx:158
- 设置中心外壳：SettingsCenter.tsx:58
- 工作区外壳网格：workspace-layout.css:1
- 截图与设计稿文件：
assets/issue-127/。 - 功能设计索引：功能与优化设计。