3.任务清单弹窗
一、整体布局结构
弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 头部静态信息展示区 → 批量操作按钮+筛选表单行 → 数据表格列表区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、分页控件、独立表单录入区。
分组规则:内容垂直分隔,头部信息横向均分排布,批量操作与筛选控件同行左右分布,表格独立容器承载明细数据。
二、分区域元素拆解
(一)弹窗顶部标题栏
- 静态标题文本:任务清单
- 右上角图标按钮组
- 全屏/还原图标按钮
- 关闭弹窗图标按钮(×)
(二)弹窗头部静态信息展示行(横向均分三栏)
- 左侧静态文本:车牌号: 1
- 中间静态文本:查询时间范围: 2025-11-07 00:00:00 - 2025-11-07 23:59:59
- 右侧静态文本:任务名称: 部视综20251107184527
(三)批量操作与筛选控件横向行
左侧批量操作按钮组
- 批量文字按钮:重新查询
- 批量文字按钮:优先查询
- 批量文字按钮:停止查询
- 刷新图标按钮
右侧筛选控件组
- 下拉选择框(占位:请选择)
- 查询主按钮:查询
(四)数据表格列表区
- 表头全选复选框(表格最左侧)
- 表头列:查询地区、查询状态、任务证书、操作
- 数据行(共9条可见行)
- 每行首列单行复选框
- 单元格展示文本:地区名称、状态标签「查询中」、脱敏任务证书文本
- 行内文字操作按钮:停止查询、优先查询
- 垂直滚动条(表格右侧)
(五)弹窗底部操作按钮
页面居中主按钮:确定
(六)无交互元素
页面半透明重复水印文本
三、元素类型分类汇总清单
1. 表单类输入控件
选择类控件
- 下拉选择控件:筛选条件下拉框
- 复选框控件:表头全选复选框、每行数据单选复选框
缺失表单元素
无单行文本输入框、多行文本域、日期选择、单选按钮、文件/图片上传控件、分页页码输入框
2. 按钮类元素
弹窗控制图标按钮
弹窗全屏按钮、弹窗关闭×图标按钮
批量操作文字按钮
重新查询、优先查询、停止查询
图标功能按钮
刷新图标按钮
筛选操作按钮
查询(主按钮)
表格行操作按钮
停止查询、优先查询(行内文字按钮)
弹窗底部业务按钮
确定(主按钮)
3. 表格/列表类组件
完整业务数据表格:表头4列、多条数据行、行复选框、表头全选复选框;带垂直滚动条,无分页控件
4. 静态文本展示元素
弹窗标题「任务清单」、头部车牌号/时间范围/任务名称静态文本、表格地区名称、查询状态标签、脱敏任务证书文本、水印背景文本
5. 缺失组件说明
无顶部全局导航、左侧树形侧边菜单、页面标签、录入表单、分页控件、批量导入/导出按钮、图片预览控件、页面底部状态栏信息区、新增/编辑/删除全局功能按钮