# 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、选择/搜索按钮；搜索期间按钮显示“取消”，再次点击取消当前搜索，切换页面后状态保持。

## 当前原型假设

- 顶级导航只有“实例、设置”；活动不再是独立模块，作为实例详情中的“最近活动”时间线显示。
- 详情和新建配置使用右侧抽屉，不创建文档标签。
- 选择实例后，右侧详情同时承载当前状态、操作、配置摘要和最近活动；不要求用户在实例与活动页面之间切换。
- 设置作为独立顶级页面，采用显式提交；取消只恢复本次未保存的表单修改。
- 路径搜索不进行默认全盘扫描：浏览器搜索标准安装路径，目录搜索验证当前输入；新建实例的 User Data Dir 已接入 Windows 原生选择器。
- 外部实例显示占用证据，但不提供接管或强制关闭入口。
- 原型中的“确认”只模拟事件反馈，不启动真实浏览器或改变文件。

## Gio 交接方向

| 原型元素 | Gio 适配意图 |
| --- | --- |
| 顶级导航 | 稳定 page ID + 持久选中状态 |
| 实例列表 | 虚拟化列表；实例 ID 而非行号作为身份 |
| 实例列契约 | 固定为实例名称、浏览器类型、用户数据目录、状态、启动；每行启动按钮以实例 ID 独立持有状态 |
| 启动表单 | 持久 editor/选择状态，显式提交，字段错误保留输入 |
| 路径搜索 | 独立任务 ID、取消函数与结果通道；迟到结果按任务 ID 丢弃 |
| 详情抽屉 | 自定义辅助面板，关闭后焦点返回实例行 |
| 确认对话框 | 模态层限制背景交互，Escape 取消，危险操作不默认聚焦 |
| Toast/状态区 | 非模态状态反馈；异步结果通过统一事件触发重绘 |