3.任务清单弹窗

text
2026年7月17日1 min read102 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 头部静态信息展示区 → 批量操作按钮+筛选表单行 → 数据表格列表区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、分页控件、独立表单录入区。
分组规则:内容垂直分隔,头部信息横向均分排布,批量操作与筛选控件同行左右分布,表格独立容器承载明细数据。

二、分区域元素拆解

(一)弹窗顶部标题栏

  1. 静态标题文本:任务清单
  2. 右上角图标按钮组
    • 全屏/还原图标按钮
    • 关闭弹窗图标按钮(×)

(二)弹窗头部静态信息展示行(横向均分三栏)

  1. 左侧静态文本:车牌号: 1
  2. 中间静态文本:查询时间范围: 2025-11-07 00:00:00 - 2025-11-07 23:59:59
  3. 右侧静态文本:任务名称: 部视综20251107184527

(三)批量操作与筛选控件横向行

左侧批量操作按钮组

  1. 批量文字按钮:重新查询
  2. 批量文字按钮:优先查询
  3. 批量文字按钮:停止查询
  4. 刷新图标按钮

右侧筛选控件组

  1. 下拉选择框(占位:请选择)
  2. 查询主按钮:查询

(四)数据表格列表区

  1. 表头全选复选框(表格最左侧)
  2. 表头列:查询地区、查询状态、任务证书、操作
  3. 数据行(共9条可见行)
    • 每行首列单行复选框
    • 单元格展示文本:地区名称、状态标签「查询中」、脱敏任务证书文本
    • 行内文字操作按钮:停止查询、优先查询
  4. 垂直滚动条(表格右侧)

(五)弹窗底部操作按钮

页面居中主按钮:确定

(六)无交互元素

页面半透明重复水印文本

三、元素类型分类汇总清单

1. 表单类输入控件

选择类控件

  1. 下拉选择控件:筛选条件下拉框
  2. 复选框控件:表头全选复选框、每行数据单选复选框

缺失表单元素

无单行文本输入框、多行文本域、日期选择、单选按钮、文件/图片上传控件、分页页码输入框

2. 按钮类元素

弹窗控制图标按钮

弹窗全屏按钮、弹窗关闭×图标按钮

批量操作文字按钮

重新查询、优先查询、停止查询

图标功能按钮

刷新图标按钮

筛选操作按钮

查询(主按钮)

表格行操作按钮

停止查询、优先查询(行内文字按钮)

弹窗底部业务按钮

确定(主按钮)

3. 表格/列表类组件

完整业务数据表格:表头4列、多条数据行、行复选框、表头全选复选框;带垂直滚动条,无分页控件

4. 静态文本展示元素

弹窗标题「任务清单」、头部车牌号/时间范围/任务名称静态文本、表格地区名称、查询状态标签、脱敏任务证书文本、水印背景文本

5. 缺失组件说明

无顶部全局导航、左侧树形侧边菜单、页面标签、录入表单、分页控件、批量导入/导出按钮、图片预览控件、页面底部状态栏信息区、新增/编辑/删除全局功能按钮