Skip to content

Issue 66

clean edited this page Sep 26, 2026 · 1 revision

Issue #66:仓库与连接的卡片 / 列表视图

背景与目标

仓库和 SSH 连接原来只有卡片网格。条目较多时,卡片分散的信息不便纵向比较。增加紧凑的列表展示,让用户按当前工作习惯切换,并在再次进入或重启后恢复选择。

本次覆盖两页的视图切换、偏好保存、状态与操作一致性,以及深浅主题和窄窗口。继续使用现有搜索、连接筛选和排序,不新增排序器、分页或新的后端接口。

UI 设计稿

下载独立交互设计稿(HTML)。保存后用浏览器打开,无需安装依赖或启动服务。

设计稿包含 仓库 / 连接 × 卡片 / 列表 × 浅色 / 深色 共 8 个状态;顶部切换页面和主题,页头切换卡片 / 列表,仓库搜索可预览过滤效果。素材由本次实现的真实组件渲染生成,使用虚构数据;设计稿中的业务按钮只显示演示说明,不执行 SSH、删除或其他业务操作。

Alune 仓库列表 UI 设计稿

仓库页

Alune 仓库列表浅色界面

Alune 仓库卡片浅色界面

连接页

Alune 连接列表浅色界面

Alune 连接卡片浅色界面

布局与交互规则

区域 设计规则
页头 两页均在刷新按钮前放置「卡片 / 列表」按钮组;图标配文字,选中项使用主题强调色。
仓库列表 名称与路径放在第一列,其后为所属连接、分支及同步数量、状态、操作。
连接列表 连接名称、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 使用独立历史,回退时需同步核对设计状态。

Clone this wiki locally