Issue 66 - ShaoClean/Alune GitHub Wiki
Issue #66：仓库与连接的卡片 / 列表视图
- 类型：功能
- 状态：已实现并完成隔离验收，待审阅合并
- Issue：https://github.com/ShaoClean/Alune/issues/66
- PR：https://github.com/ShaoClean/Alune/pull/104 （草稿）
- 最近更新：2026-09-26
- 实现提交：
e194bc26d1eef6937ffc3669123bf73332e7984c - 改动前基线：
f6ce4ac，从development新建codex/issue-66-view-switcher工作树分支。
背景与目标
仓库和 SSH 连接原来只有卡片网格。条目较多时，卡片分散的信息不便纵向比较。增加紧凑的列表展示，让用户按当前工作习惯切换，并在再次进入或重启后恢复选择。
本次覆盖两页的视图切换、偏好保存、状态与操作一致性，以及深浅主题和窄窗口。继续使用现有搜索、连接筛选和排序，不新增排序器、分页或新的后端接口。
UI 设计稿
下载独立交互设计稿（HTML）。保存后用浏览器打开，无需安装依赖或启动服务。
设计稿包含 仓库 / 连接 × 卡片 / 列表 × 浅色 / 深色 共 8 个状态；顶部切换页面和主题，页头切换卡片 / 列表，仓库搜索可预览过滤效果。素材由本次实现的真实组件渲染生成，使用虚构数据；设计稿中的业务按钮只显示演示说明，不执行 SSH、删除或其他业务操作。
仓库页
连接页
布局与交互规则
| 区域 | 设计规则 |
|---|---|
| 页头 | 两页均在刷新按钮前放置「卡片 / 列表」按钮组；图标配文字，选中项使用主题强调色。 |
| 仓库列表 | 名称与路径放在第一列，其后为所属连接、分支及同步数量、状态、操作。 |
| 连接列表 | 连接名称、username@host:port、认证、状态、操作；连接失败原因放在主机下方。 |
| 状态 | 复用原状态组件，保留时间、加载中、缓存过期、失败及原因；分支未知与游离 HEAD 分开显示。 |
| 操作 | 卡片和列表共享处理函数，保留打开工作区、刷新 / 重试状态、测试连接、查看仓库和删除确认。 |
| 搜索与筛选 | 切换布局保持仓库搜索词和 URL 中的连接筛选，使用同一份过滤结果。 |
| 空与失败 | 无结果时继续显示原空状态；初次加载失败不会显示为空列表；刷新失败保留已加载内容。切换控件始终可用。 |
| 长文本 | 名称、路径、主机和分支可省略，悬停显示完整内容；错误信息换行。 |
| 窄窗口 | 页头换行，列表最小宽度 940px；仅表格容器横向滚动，页面不撑宽。卡片保持原响应式网格。 |
| 无障碍 | 原生按钮提供清楚的名称和 aria-pressed，支持 Tab / Enter / 空格及可见焦点；表格使用列头、行头和具名可聚焦滚动区域。 |
| 主题 | 使用现有月光主题变量，复用状态颜色、圆角、字体和按钮样式。 |
持久化与兼容
在现有 alune-workspace 偏好中新增 collectionViews，分别保存 repositories 和 connections，可选值为 grid / list。首次使用、旧版本缺少字段或单个字段异常时，该页回到卡片视图；另一页的有效值仍保留。现有版本号保持为 1，新增字段不要求迁移。
网页继续使用本地存储；桌面端复用 aluneWorkspace 稳定存储桥接，避免随机 HTTP 端口造成偏好丢失。启动前已有的异步水合流程会先恢复设置。切换视图、列表重新加载及布局重置都不会覆盖另一页的选择、外观或侧栏设置。
验收标准
- 两页均能切换卡片 / 列表，默认卡片。
- 两页选择相互独立，刷新后恢复；桌面桥接读写已覆盖测试。
- 搜索、连接筛选、状态、失败信息及原操作在两种视图中保留。
- 可使用键盘操作，选中与焦点状态明确。
- 深浅主题可读，780px / 390px 窄窗口及长文本不会撑宽页面。
- 提供独立 UI 设计稿、前后截图和实际验证记录。
详细命令、证据、场景与未验证项见验收记录。
风险与回退
表格在窄窗口需要横向滚动以保留完整操作；可随时切回卡片。列表沿用可见条目状态请求机制，同屏条目增多时可能同时展示更多待刷新状态。
真实 SSH、原生 Electron 重启以及 Windows / Linux 真机未手工验收；桌面偏好桥接有自动化回归，但不等同于上述平台的完整端到端验证。回退代码提交后旧版本会忽略新增字段，旧有设置保持兼容。Wiki 使用独立历史，回退时需同步核对设计状态。