46 lines
3.7 KiB
Markdown
46 lines
3.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、选择/搜索按钮；搜索期间按钮显示“取消”，再次点击取消当前搜索，切换页面后状态保持。
|
|
9. 双击“运行中”或“外部已关联”实例，点击“查看标签页”：检查读取中、目标列表、只读边界文案与 Escape/关闭后回到入口。未启动或没有实际端口的实例应禁用入口。
|
|
10. 设置代理：检查代理名称和代理地址均有 Label；选择项会回填两项，保存修改后实例列表仅显示最新代理名称。新建实例应默认填入程序目录内不同的 `user_data_dirs\\<实例 ID>` 子目录；窄窗口下代理列不能挤压操作按钮。
|
|
|
|
## 当前原型假设
|
|
|
|
- 顶级导航只有“实例、设置”；活动不再是独立模块，作为实例详情中的“最近活动”时间线显示。
|
|
- 详情和新建配置使用右侧抽屉，不创建文档标签。
|
|
- 选择实例后，右侧详情同时承载当前状态、操作、配置摘要和最近活动；不要求用户在实例与活动页面之间切换。
|
|
- 设置作为独立顶级页面，采用显式提交；取消只恢复本次未保存的表单修改。
|
|
- 路径搜索不进行默认全盘扫描：浏览器搜索标准安装路径，目录搜索验证当前输入；新建实例的 User Data Dir 已接入 Windows 原生选择器。
|
|
- 外部实例显示占用证据，但不提供接管或强制关闭入口。
|
|
- “标签页（CDP 页面目标）”只读取已验证 loopback CDP 端点的展示 DTO；不会显示 WebSocket 调试地址，不提供任何页面或浏览器控制。它不是物理窗口管理视图。
|
|
- 原型中的“确认”只模拟事件反馈，不启动真实浏览器或改变文件。
|
|
|
|
## Gio 交接方向
|
|
|
|
| 原型元素 | Gio 适配意图 |
|
|
| --- | --- |
|
|
| 顶级导航 | 稳定 page ID + 持久选中状态 |
|
|
| 实例列表 | 虚拟化列表；实例 ID 而非行号作为身份 |
|
|
| 实例列契约 | 固定为实例名称、浏览器类型、用户数据目录、代理、调试端口、状态、操作；代理显示名由稳定 ProxyID 推导，行内操作以实例 ID 独立持有状态 |
|
|
| 启动表单 | 持久 editor/选择状态，显式提交，字段错误保留输入 |
|
|
| 路径搜索 | 独立任务 ID、取消函数与结果通道；迟到结果按任务 ID 丢弃 |
|
|
| 详情抽屉 | 自定义辅助面板，关闭后焦点返回实例行 |
|
|
| 确认对话框 | 模态层限制背景交互，Escape 取消，危险操作不默认聚焦 |
|
|
| CDP 页面目标 | 异步只读 DTO、ID/端口/请求快照防过期、Escape 关闭后返回入口焦点 |
|
|
| Toast/状态区 | 非模态状态反馈；异步结果通过统一事件触发重绘 |
|