53 lines
5.7 KiB
Markdown
53 lines
5.7 KiB
Markdown
# Chub UI 原型
|
|
|
|
原型文件：[`browser-manager.html`](browser-manager.html)
|
|
|
|
## 用途
|
|
|
|
该文件用于确认 Chub 的信息架构、实例列表密度、启动配置表单、详情抽屉和危险操作反馈，不代表 Gio 的最终控件、窗口材质、DPI 或无障碍实现已经完成。
|
|
|
|
## 评审场景
|
|
|
|
1. 默认实例列表：每行显示实例名称、浏览器类型、用户数据目录、状态和启动按钮；运行中、启动中、被占用、已退出四种状态同时可见。
|
|
2. 点击“新建实例”：检查实例名称、Chrome/Edge RadioButton、User Data Dir 选择入口、启动 URL（可选）和其他运行字段。
|
|
3. 留空 user data dir 提交：观察字段级错误和输入保留。
|
|
4. 点击运行中实例：查看 PID、路径、启动地址和操作入口。
|
|
5. 点击“关闭实例”：确认对话框默认提供优雅关闭；重启需要先等待旧实例退出。
|
|
6. 使用搜索、浏览器筛选、状态筛选和刷新状态。
|
|
7. 切换深色主题，并在窄窗口查看导航和表单重排。
|
|
8. 点击“设置”：检查四个路径的 Label、选择/搜索按钮；Chrome/Edge 的“选择”必须打开 Windows 原生 `.exe` 文件选择器，取消后保留输入。搜索期间按钮显示“取消”，再次点击取消当前搜索；搜索命中当前路径时在同一字段旁显示已确认反馈，切换页面后状态保持。
|
|
9. 双击“运行中”或“外部已关联”实例，点击“查看标签页”：检查读取中、目标列表、只读边界文案与 Escape/关闭后回到入口。未启动或没有实际端口的实例应禁用入口。
|
|
10. 设置代理：检查代理名称和代理地址均有 Label；选择项会回填两项，保存修改后实例列表仅显示最新代理名称。新建实例应默认填入程序目录内不同的 `user_data_dirs\\instance-<安全化名称>-<短ID>` 子目录；窄窗口下代理列不能挤压操作按钮。
|
|
11. 点击实例删除：默认确认只删除 Chub 配置。对于已退出实例，勾选“同时删除 User Data Dir 中的数据”后确认按钮改为“删除实例及数据”，并显示目录和不可恢复警告；运行或外部占用实例必须禁用该选项。取消、占用或失败时实例与目录保留。
|
|
12. 设置默认目录：确认默认 User Data Dir 与日志目录显示“程序目录（chub.exe 所在目录）”下的 `user_data_dirs` 与 `logs`，可选择自定义目录或恢复程序目录默认；已有实例目录不改变。
|
|
13. 新建或编辑实例：名称与现有名称（忽略大小写）重复时，名称字段就地提示且保留输入；默认目录使用 `instance-<安全化名称>-<短ID>`，改名不会重命名已有目录。模拟目录不可写时，保留表单并提示选择可写目录。
|
|
|
|
## 当前原型假设
|
|
|
|
- 顶级导航只有“实例、设置”；活动不再是独立模块，作为实例详情中的“最近活动”时间线显示。
|
|
- 详情和新建配置使用右侧抽屉，不创建文档标签。
|
|
- 选择实例后，右侧详情同时承载当前状态、操作、配置摘要和最近活动；不要求用户在实例与活动页面之间切换。
|
|
- 设置作为独立顶级页面，采用显式提交；取消只恢复本次未保存的表单修改。
|
|
- 路径搜索不进行默认全盘扫描：浏览器搜索标准安装路径，目录搜索验证当前输入；Chrome/Edge 路径通过 Windows 原生文件选择器选择既有 `.exe`，新建实例的 User Data Dir 已接入 Windows 原生目录选择器。
|
|
- 外部实例显示占用证据，但不提供接管或强制关闭入口。
|
|
- 实例删除默认只移除配置；数据删除是明确、默认未选中的附加选择，且只能对已退出/启动失败实例发起。实际删除前仍复核占用和目录边界；原型只模拟结果，不执行文件删除。
|
|
- “标签页（CDP 页面目标）”只读取已验证 loopback CDP 端点的展示 DTO；不会显示 WebSocket 调试地址，不提供任何页面或浏览器控制。它不是物理窗口管理视图。
|
|
- “程序目录”是实际 `chub.exe` 的父目录，不是启动快捷方式的当前工作目录。设置以 portable/custom 模式保存目录来源；portable 在应用启动时重新解析，custom 只在用户显式选择后生效。
|
|
- 原型中的“确认”只模拟事件反馈，不启动真实浏览器或改变文件。
|
|
|
|
## Gio 交接方向
|
|
|
|
| 原型元素 | Gio 适配意图 |
|
|
| --- | --- |
|
|
| 顶级导航 | 稳定 page ID + 持久选中状态 |
|
|
| 实例列表 | 虚拟化列表；实例 ID 而非行号作为身份 |
|
|
| 实例列契约 | 固定为实例名称、浏览器类型、用户数据目录、代理、调试端口、状态、操作；代理显示名由稳定 ProxyID 推导，行内操作以实例 ID 独立持有状态 |
|
|
| 启动表单 | 持久 editor/选择状态，显式提交，字段错误保留输入 |
|
|
| 路径选择与搜索 | 选择和搜索均通过后台 adapter、独立请求 ID、取消函数与结果通道；迟到结果按字段/任务 ID 丢弃，反馈紧邻发起字段 |
|
|
| 详情抽屉 | 自定义辅助面板，关闭后焦点返回实例行 |
|
|
| 确认对话框 | 模态层限制背景交互，Escape 取消，危险操作不默认聚焦 |
|
|
| 实例数据删除 | 持久的业务勾选、实例 ID/目录快照/请求代次；后台复核后才允许删除并在成功后持久化配置 |
|
|
| 便携目录与名称 | portable/custom 目录模式、稳定实例 ID 与安全化目录名；后台目录创建/可写预检，名称字段级唯一性错误 |
|
|
| CDP 页面目标 | 异步只读 DTO、ID/端口/请求快照防过期、Escape 关闭后返回入口焦点 |
|
|
| Toast/状态区 | 非模态状态反馈；异步结果通过统一事件触发重绘 |
|