JetCheck 新增功能交互设计说明 v2（评审版）

# JetCheck 新增功能交互设计说明 v2（评审版）

## 1. 文档说明

- 文档名称：JetCheck 新增功能交互设计说明 v2（评审版）
- 版本：v2.0
- 编写日期：2026-03-24
- 评审基线：最新版 demo

本文用于描述当前 demo 所对应的页面结构、关键交互、状态反馈和校验规则。若与 v1 交互说明存在不一致，以本文为准。

## 2. 全局设计原则

1. 以当前 demo 已落地交互为评审基线，不再以历史方案为默认前提。
2. 操作页优先突出主任务，减少说明性文字。
3. Demo 辅助操作与正式功能操作必须有明显区分。
4. 高风险操作必须带确认。
5. 运行态优先展示结果，配置态优先展示结构关系。

## 3. 全局交互约定

### 3.1 导航结构

客户端当前一级导航为：

1. 检测工具
2. 采图工具
3. 相机管理
4. 模型管理
5. 检测记录
6. 采图记录

平台端当前评审页面为：

1. 客户端管理
2. 账号中心

### 3.2 Demo 操作约定

1. Demo 辅助按钮统一带 `Demo:` 前缀。
2. Demo 按钮不与正式主操作混排在同一层级。
3. 登录页 Demo 按钮位于左侧空白区。
4. 客户端系统内 Demo 按钮位于侧边栏下方。

### 3.3 通用反馈

1. 一般成功使用轻提示。
2. 表单校验错误展示就近错误提示或轻提示。
3. 删除、解绑、清理等高风险行为需二次确认。
4. 禁用状态需可见。

## 4. 平台端交互

### 4.1 客户端管理页

#### 4.1.1 页面结构

1. 页头：`客户端管理` + `客户端配额：已用/总量`
2. 筛选区：
   - 在线状态
   - 关键词搜索
3. 列表区：
   - 客户端名称
   - 硬件识别码
   - 绑定时间
   - 在线状态
   - 最近离线时间

#### 4.1.2 交互规则

1. 只展示当前账号下已绑定客户端。
2. 不提供解绑、新增客户端等操作。
3. 当额度已满时，在列表上方展示提醒 banner。

### 4.2 账号中心

#### 4.2.1 入口位置

平台端右上角 `账号中心` 按钮。

#### 4.2.2 表单字段

1. 登录手机号
2. 联系人
3. 登录密码
4. 企业名称

#### 4.2.3 交互规则

1. 点击打开弹窗。
2. 手机号需校验 11 位。
3. 所有字段必填。
4. 保存成功后立即刷新平台页头和共享数据。

## 5. 客户端登录与全局框架

### 5.1 登录页

#### 5.1.1 页面结构

1. 客户端名称
2. 手机号
3. 登录密码
4. 轻量文字提示
5. 登录按钮
6. 左侧 Demo 场景按钮

#### 5.1.2 页面口径

1. 登录页统一视为“首次绑定/未绑定”态。
2. 不再单独铺陈“已绑定设备”“解绑后重登”等多套页面。
3. 绑定成功后，后续进入客户端直接跳过登录页。

#### 5.1.3 提交校验

1. 手机号、密码、客户端名称为空时不可通过。
2. 点击登录后才触发：
   - 离线失败
   - 额度不足失败
   - 账号密码失败
3. 首次登录成功后自动绑定设备并保存客户端名称。

### 5.2 客户端全局顶部

#### 5.2.1 顶部信息

1. 品牌
2. 顶部提醒条
3. 企业名称
4. 在线/离线状态
5. 设置图标按钮

#### 5.2.2 顶部提醒

1. 存储低于提醒阈值时展示提醒。
2. 存储低于阻断阈值时展示阻断提醒。
3. 提醒后附带 `去清理` 文字按钮，点击跳转设置 > 存储管理。

## 6. 检测工具交互

### 6.1 工具总览

#### 6.1.1 页面结构

1. 页面标题
2. 工具卡片列表
3. 底部新建工具卡片

#### 6.1.2 卡片交互

1. 当工具处于 `未运行` 状态时，点击卡片空白区域先打开“启动检测工具”对话框。
2. 当工具处于 `运行中` 状态时，点击卡片空白区域进入运行页。
3. 点击卡片中的 `编辑` 按钮进入配置页。
4. 卡片展示配置状态与运行状态，不展示复杂统计和搭建说明文字。

### 6.2 工具配置页

#### 6.2.1 页面结构

1. 页头：工具名称 + `编辑名称`
2. 右上角：返回工具列表、删除工具
3. 三步导航：
   - 图像获取
   - 图像处理
   - 图像检测
4. 主体区域：当前步骤内容
5. 底部：上一步、下一步、完成并返回

#### 6.2.2 数量上限显示

1. 三类实例安全上限统一为 20。
2. 显示格式为 `当前数/20`。
3. 位置在新增按钮左侧。

### 6.3 图像获取实例

#### 6.3.1 交互规则

1. 支持相机获取和接口获取。
2. 创建/编辑时必须上传示例图片。
3. 示例图片创建成功后会在列表卡片中显示预览。

### 6.4 图像处理实例

#### 6.4.1 处理方式

1. 全图处理
2. 手绘 ROI
3. 模型 ROI

#### 6.4.2 全图处理规则

1. 作为默认处理方式。
2. 不再通过“全图 ROI”表达整图处理。
3. 运行态与结果查看中允许展示检测框、测量线等完整结果叠加。

#### 6.4.3 手绘 ROI 规则

1. 基于所选图像获取实例的示例图进行绘制。
2. 支持绘制多个 ROI 区域。
3. 支持绘制多个不检测区域。
4. 支持快捷生成：
   - 4 等分
   - 9 等分
   - 16 等分

#### 6.4.4 模型 ROI 规则

1. 必须选择一个支持类别输出的本地模型。
2. 当模型存在多个类别时，需在后续检测实例中按具体类别选择输入目标。
3. 若模型切换导致已有类别选择失效，需显式提示并要求重新确认。
4. 页面不再展示处理说明字段。

### 6.5 图像检测实例

#### 6.5.1 页面结构

1. 检测实例名称
2. 关联输入目标
3. 使用模型

#### 6.5.2 交互规则

1. 按图像获取实例分组展示其下图像处理实例项。
2. `全图处理` 与 `手绘 ROI` 按处理实例项选择。
3. `模型 ROI` 需展开到具体类别层级进行选择。
4. 当类别配置失效时，列表项需展示失效提示并阻断完整检测运行。
5. 项目采用紧凑列表样式，不展示多余文件名与冗余说明。
6. 使用模型从本地模型中选择。

## 7. 检测工具运行交互

### 7.1 页面结构

1. 顶部运行信息：
   - 当前运行模式
   - 当前运行状态
   - 停止运行
   - 重置当前任务
2. 左侧：
   - 每张图结果
   - 相机信息
3. 中间：
   - 当前图像推理结果
4. 右侧：
   - 总结果
   - 标签信息

### 7.2 运行进入与触发

1. 用户需在进入运行页前完成模式选择。
2. 点击未运行工具卡片后，先打开“启动检测工具”对话框。
3. 确认开始运行后，工具进入 `运行中 / 等待信号` 状态，并占用当前相机或接口资源。
4. 运行中不可切换模式。
5. 正式单次任务触发来自外部系统。
6. 所有带 `Demo:` 前缀的按钮都只是调试按钮：
   - `Demo: 模拟信号` 用于模拟外部触发
   - `Demo: 重置数据` 用于恢复演示基线

### 7.3 结果展示规则

1. 当前检测结果分为三层：
   - 总结果
   - 每张图结果
   - 每张子图结果
2. 中间主区域始终显示当前图像推理结果。
3. 一次检测完成后，系统按图像获取实例顺序自动切换每张图结果。
4. 全部图像播放完成后，右侧总结果展示最终 `OK/NG`。
5. `手绘 ROI` 与 `模型 ROI` 只按 ROI 级业务结果展示，不显示具体检测框。
6. `全图处理` 才展示检测框、测量线等完整结果叠加。

### 7.4 当前图像推理结果

1. 底图为当前图像获取实例上传的原图。
2. `手绘 ROI` 与 `模型 ROI` 的子结果按 ROI 坐标映射回原图。
3. 每个 ROI 仅显示：
   - ROI 序号
   - ROI 级业务结果 `OK/NG`
4. `全图处理` 的结果框展示：
   - 类别
   - 置信度
5. 图像下方不显示图像名称文案。

### 7.5 每张图结果列表

1. 列表与图像获取实例一一对应。
2. 每项显示图像获取实例名称与当前图像业务结果。
3. 点击列表项切换中间主视图。
4. 每项可打开查看子图结果。

### 7.6 子图结果查看

1. 子图名称采用：
   - `图像处理实例名称 + ROI序号`
2. 子图查看交互复用检测结果查看组件。
3. 子图列表中不再重复展示“当前图像结果”摘要。

### 7.7 标签信息

1. 支持给当前检测记录添加自定义标签。
2. 上限 3 个。
3. 标题右侧显示 `已添加 x/3`。
4. 不再单独展示“最多支持 3 个标签”的提示文案。

### 7.8 相机信息

1. 相机信息位于左侧下方。
2. 若当前来源为相机，展示：
   - 相机名称
   - 参数组
   - 查看相机画面
3. 若当前来源为接口，则提示当前为接口输入，不显示相机信息。
4. 相机状态不在卡片内重复展示，顶部状态足够表达。

### 7.9 运行控制

1. `重置当前任务` 用于清空本次任务结果并回到 `等待信号`，不释放资源。
2. `停止运行` 用于结束当前运行会话并释放资源。
3. 两类操作都需二次确认。
4. 若当前正在执行中，确认文案需明确说明对记录的影响。

### 7.10 相机画面弹窗

1. 布局采用左右结构：
   - 左侧：相机画面
   - 右侧：参数信息
2. 相机状态口径统一为：
   - 已连接
   - 异常

## 8. 采图工具交互

### 8.1 页面结构

1. 选择相机
2. 选择参数组
3. 开始采图

### 8.2 交互规则

1. 页面默认进入配置页。
2. 点击开始采图后进入运行页。
3. 当前运行页内容先保留占位，不展开详细交互。

## 9. 相机管理交互

### 9.1 相机管理列表

#### 9.1.1 页面结构

1. 查询区：
   - 关键词搜索
   - 厂商筛选
2. 操作区：
   - 刷新
   - 添加相机
3. 列表字段：
   - 相机名称
   - 相机ID
   - 厂商
   - 型号
   - 状态
   - 操作

#### 9.1.2 行操作

1. 编辑名称
2. 参数组管理
3. 删除

### 9.2 添加相机弹窗

#### 9.2.1 页面结构

1. 关键词搜索
2. 搜索网络设备
3. 结果列表
4. 确认添加

#### 9.2.2 交互规则

1. 已添加相机直接过滤不显示。
2. 离线相机不显示在可添加结果中。
3. 支持多选添加。
4. 无可添加相机时显示空态。

### 9.3 参数组管理弹窗

#### 9.3.1 页面结构

1. 左侧：参数组列表
2. 右侧上方：预览调试区
3. 右侧下方：参数详情区

#### 9.3.2 交互规则

1. 仅空闲相机可进入。
2. 参数组列表增加标题 `参数组列表`。
3. 新增参数组后直接选中进入编辑。
4. 删除入口位于左侧参数组卡片内。
5. 参数实时保存。
6. 参数详情区域为可滚动区域。
7. 参数布局采用更紧凑的多列形式。

## 10. 模型管理交互

### 10.1 本地模型页

#### 10.1.1 页面结构

1. 页头按钮：
   - 从云端添加
   - 本地上传
2. 查询区：
   - 模型名称或版本编号
   - 场景类型
3. 列表字段：
   - 模型名称
   - 场景类型
   - 版本编号
   - 来源
   - 添加时间
   - 引用情况
   - 操作

#### 10.1.2 交互规则

1. 本地上传不再使用二次弹窗，直接调起本地文件选择器。
2. 管理列表不需要选中态。
3. 已引用模型删除按钮禁用。

### 10.2 从云端添加模型抽屉

#### 10.2.1 页面结构

1. 搜索模型名称或版本编号
2. 场景类型筛选
3. 云端模型列表

#### 10.2.2 列表规则

1. 按模型名称聚合展示。
2. 每个版本项使用同一行展示：
   - 版本编号
   - 训练完成时间
   - 下载状态或下载按钮
3. 版本行撑满，不保留大块空白。

### 10.3 选择模型抽屉

1. 检测实例中选择模型时，打开轻量本地模型选择器。
2. 只展示本地模型。
3. 仅保留查询、选中、确认选择能力，不混入管理动作。

## 11. 检测记录交互

### 11.1 一级列表

#### 11.1.1 页面结构

1. 查询区：
   - 工具筛选
   - 业务结果筛选
   - 时间范围
   - 关键词
2. 顶部操作：
   - 导出
3. 列表字段：
   - 记录编号
   - 工具名称
   - 触发时间
   - 业务结果
   - 标签
   - 操作（查看详情）

#### 11.1.2 分页规则

1. 一级列表支持分页。
2. 当前每页 10 条。
3. 查询、重置后回到第一页。

### 11.2 记录详情

#### 11.2.1 展现形式

通过弹窗展示该条总记录下的图像记录列表。

#### 11.2.2 二级列表字段

1. 图像获取实例
2. 输入来源
3. 图像业务结果
4. 子图数量
5. 操作
   - 查看结果图
   - 查看子图

### 11.3 结果图查看

#### 11.3.1 交互形式

复用检测运行页的结果查看逻辑。

#### 11.3.2 页面结构

1. 左侧主区域：原图与 ROI
2. 右侧缩略区：子图列表

#### 11.3.3 交互规则

1. 支持控制 ROI 图层显隐。
2. 点击右侧子图缩略图可放大到左侧查看。
3. 双击 ROI 可直接聚焦对应子图。
4. 子图层支持控制结果框显隐。

### 11.4 导出弹窗

#### 11.4.1 口径

导出对象固定为当前筛选范围内的检测记录。

#### 11.4.2 页面结构

1. 顶部仅保留一句范围提示。
2. 三组导出项：
   - 检测记录
   - 图像记录
   - 子图记录
3. 组选项横向排列。

#### 11.4.3 交互规则

1. 仅保留勾选项，不展示说明性副文案。
2. 不再展示复杂的导出范围汇总块。

## 12. 设置交互

### 12.1 客户端信息

#### 12.1.1 页面结构

1. 客户端基本信息
2. 客户端版本
3. 操作：
   - 编辑名称
   - 解绑当前客户端

#### 12.1.2 明确调整

1. `软件信息` 页签已取消。
2. `客户端版本` 已并入 `客户端信息`。

### 12.2 存储管理

#### 12.2.1 页面结构

1. 三张空间卡片
2. 阈值设置

#### 12.2.2 卡片交互

1. 每张卡片内可进入对应清理流程。
2. 模型文件卡片与模型清理入口已移除。

#### 12.2.3 清理流程

1. 先提示用户清理前导出备份。
2. 再选择清理时间：
   - 一年前
   - 半年前
   - 三个月前
   - 一个月前
   - 自定义时间范围
3. 再确认执行清理。
4. 预览页不再展示：
   - 清理规则
   - 将清理的数据范围
   - 预计释放空间

## 13. 当前不作为完整评审对象的页面

1. 采图记录页当前仅为占位态。
2. 采图运行页当前仅为占位态。
3. 平台端除客户端管理外的其他页面不在本轮展开。