Files
cdp_hub/docs/ui

Chub UI 原型

原型文件: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/状态区 非模态状态反馈;异步结果通过统一事件触发重绘