2.新增弹窗

text
2026年7月17日1 min read90 words

Updated 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 多组分段填报表单区 → 弹窗底部操作按钮;无页面全局顶部导航、侧边菜单栏、数据列表、分页控件、页面底部信息区。
分组规则:表单按业务文书垂直分多组隔离,每组内控件自上而下排布,带*标识必填项。

二、分区域元素拆解

(一)弹窗顶部标题栏

  1. 静态标题文本:新增
  2. 右上角图标按钮组:全屏/还原图标按钮、关闭弹窗×图标按钮

(二)第一组基础通用表单区

  1. 下拉选择框:资源名称(占位:请选择资源名称,*必填)
  2. 日期区间选择组件:查询时间(起始2026-03-16 00:00:00、结束2026-06-16 23:59:59)
  3. 快捷时间单选按钮组:近三个月、近半年、近一年、近两年
  4. 单行文本输入框:案件编号(占位:请输入案件编号,*必填)

(三)第二组表单:法律文书一(立案决定书)

  1. 分组标题静态文本:法律文书一(立案决定书)
  2. 单行文本输入框:决定书编号(占位:请输入决定书编号,*必填)
  3. 主功能按钮:上传法律文书(图片上传触发按钮,*必填)
  4. 红色静态限制提示文本:请上传文件正式扫描件,字迹图像清晰,只能上传1张图片,总大小不超过10MB,文件格式:jpg、png、bmp

(四)第三组表单:法律文书二(受案登记表)

  1. 分组标题静态文本:法律文书二(受案登记表)
  2. 主功能按钮:上传法律文书(图片上传触发按钮,*必填)
  3. 红色静态限制提示文本:请上传文件正式扫描件,字迹图像清晰,只能上传1张图片,总大小不超过10MB,文件格式:jpg、png、bmp

(五)第四组表单:调取证据通知书

  1. 分组标题静态文本:调取证据通知书
  2. 三格连续单行文本输入框:通知书文号三段输入框(均占位:请输入)
  3. 主功能按钮:上传法律文书(图片上传触发按钮,*必填)
  4. 红色静态限制提示文本:请上传文件正式扫描件,字迹图像清晰,只能上传1张图片,总大小不超过10MB,文件格式:jpg、png、bmp

(六)弹窗底部操作按钮组(居中横向排布)

  1. 次按钮:取消
  2. 主按钮:确定

(七)无交互元素

页面半透明重复水印文本

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

1. 表单类输入控件

单行文本输入框

案件编号、决定书编号、调取证据通知书三段文号输入框

下拉选择控件

资源名称下拉选择框

日期选择控件

查询时间区间(起始日期时间、结束日期时间)

单选按钮组

快捷时间筛选:近三个月、近半年、近一年、近两年

上传控件

上传法律文书按钮(图片文件上传触发入口,共3处)

缺失表单元素

无多行文本域、多选控件

2. 按钮类元素

弹窗控制图标按钮

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

文件上传功能主按钮

上传法律文书(三处,上传图片入口)

弹窗底部业务按钮

取消(次按钮)、确定(主按钮)

缺失按钮类型

无查询/批量/编辑/删除/分页业务按钮

3. 表格/列表类组件

无表头、数据行、分页、筛选、行操作按钮等全部表格相关组件

4. 静态文本展示元素

弹窗标题「新增」、分组业务文书标题、输入框占位提示、必填标识*、文件上传格式大小限制红色提示文字、水印背景文本

5. 缺失组件说明

无顶部全局导航、左侧树形侧边菜单、页面标签、业务数据明细表格、分页控件、批量导入导出弹窗、图片预览控件、页面底部状态栏信息区、筛选查询表单