1.寄递信息主页
一、整体布局结构
页面采用三栏固定布局:顶部通栏全局导航、左侧固定竖栏树形侧边菜单、右侧为主内容区;主内容垂直分层:页面标签栏→页面标题+告警提示区→单行筛选表单区→批量操作按钮组→数据表格列表区→分页控件区,无独立页面底部信息区。
分组规则:业务功能垂直分块,筛选条件单行横向排布,表格独立容器承载明细数据。
二、分区域元素拆解
(一)顶部全局导航通栏
- 系统标识文本:九霄
- 横向导航文字按钮:辅侦工具箱、警务大模型、资金追踪、预警管控、国反新机制
- 右上角功能组件
- 图标下拉按钮:帮助中心
- 账号下拉组件:sd@123
(二)左侧侧边竖栏菜单栏
- 侧边栏顶部控件
- 单行搜索输入框:占位「搜索菜单」,前置搜索图标
- 侧边栏折叠图标按钮(输入框右侧)
- 一级树形菜单(带折叠下拉箭头)
- 万能查(展开)
- 国反
- 云搜
- 部刑专
- 部视综
- 网黑
- 静态分组标签文本:互联网
- 一级树形菜单(带折叠下拉箭头):YunJing、YunMai、ShenBu、TianJi(当前激活选中,展开状态)
- 二级子菜单:寄递信息(当前激活)、广告短信、消费行为分析
(三)右侧主内容区 - 头部页面标签栏
多页面标签:万能查检索、模型超市、案件资金研判、银行卡止付、国反新机制、身份识别、人像轨迹、车辆轨迹、在逃人员、在逃详情、YunJing、云搜、寄递信息(当前激活,带关闭叉号)
(四)右侧主内容区 - 标题与告警提示区
- 页面主标题静态文本:寄递信息
- 两条告警提示文本(带标识圆点):天迹平台登录异常提示、证书在线提示
- 右上角快捷筛选控件:账号下拉框、包含勾选框、时间单选按钮(近七天/全部)、日期区间选择(创建开始时间、分隔符、创建结束时间)
(五)右侧主内容区 - 单行筛选表单区
- 单行文本输入框:手机号(占位:请输入手机号)
- 单行文本输入框:任务名称(占位:请输入任务名称)
- 下拉选择框:审核状态(占位:请选择审核状态)
- 展开文字按钮:展开
- 操作按钮:查询(主按钮)、重置(次按钮)
第二行筛选控件
- 单选按钮组(查询状态):全部、查询成功、查询失败、查询中、待查询、查无结果、已停止
- 批量文字操作按钮:重新、优先、停止
(六)右侧主内容区 - 批量操作按钮
筛选区右侧悬浮主按钮:批量查询
(七)右侧主内容区 - 数据表格列表区
- 表头全选复选框(表格最左侧)
- 表头列:序号、手机号、任务名称、审核状态、查询状态、案件编号、查询事由、查询日期、提交人/提交IP、提交单位/时间、任务证书、操作
- 数据行(共10条可见行)
- 每行首列单行复选框
- 单元格展示文本:手机号、任务名称、状态标签、案件编号、查询事由、查询日期、脱敏账号/IP、单位时间文本
- 行内文字操作按钮:停止查询、优先查询
(八)页面底部分页控件(表格最下方)
- 数据总量文本:共66条
- 每页条数下拉选择框:10条/页
- 翻页控件:上一页箭头、页码数字按钮1-7、下一页箭头、页码跳转输入框、前往文字按钮
(九)悬浮元素
页面中间智能机器人图标悬浮按钮
(十)无交互元素
页面半透明重复水印文本
三、元素类型分类汇总清单
1. 表单类输入控件
单行文本输入框
侧边栏菜单搜索框、手机号、任务名称、分页页码跳转输入框
日期区间输入组件
右上角筛选创建开始时间、创建结束时间
选择类控件
- 单选按钮组:查询状态(全部/查询成功/查询失败/查询中/待查询/查无结果/已停止);时间快捷筛选(近七天/全部)
- 下拉选择控件:审核状态下拉、右上角账号筛选下拉、分页每页条数下拉
- 复选框控件:表头全选复选框、每行数据单选复选框、「包含」勾选框
缺失表单元素
无多行文本域、文件/图片上传控件
2. 按钮类元素
顶部导航文字功能按钮
辅侦工具箱、警务大模型、资金追踪、预警管控、国反新机制
图标文字按钮
帮助中心、展开
筛选操作按钮
查询(主按钮)、重置(次按钮)、批量查询(主悬浮按钮)
批量操作文字按钮
重新、优先、停止
表格行操作按钮
停止查询、优先查询(行内文字按钮)
分页按钮
上一页、下一页、前往
图标功能按钮
侧边栏折叠按钮、页面智能助手悬浮按钮
标签控制按钮
页面标签关闭叉号
3. 树形菜单组件
一级菜单:万能查、国反、云搜、部刑专、部视综、网黑、YunJing、YunMai、ShenBu、TianJi
二级子菜单归属TianJi:寄递信息、广告短信、消费行为分析;当前激活项:寄递信息
菜单状态标识:折叠下拉箭头、激活选中高亮标识
4. 表格/列表类组件
完整业务数据表格:表头12列、多条数据行、行复选框、表头全选复选框;配套全套分页控件(总量统计、每页条数下拉、翻页箭头、页码跳转输入框)
5. 静态文本展示元素
系统名称「九霄」、页面标题「寄递信息」、告警提示文本、输入框占位文案、表格单元格业务文本、分页总量说明文字、水印背景文本、账号文本sd@123、侧边分组标签「互联网」
6. 缺失组件说明
无弹窗录入表单、详情弹窗、批量导入导出弹窗、新增/编辑/删除全局按钮、独立附件上传区域、页面底部状态栏信息区、图片预览控件