3.导入人员信息弹窗

text
2026年7月17日阅读约 1 分钟53 字

更新于 2026年7月17日

一、整体布局结构

弹窗独立层级,弹窗内垂直分层:弹窗标题栏 → 文件上传表单区 → 格式限制提示文本 → 模板下载功能按钮;无页面全局顶部导航、侧边菜单栏、数据列表、分页控件、页面底部信息区。
分组规则:业务模块垂直分隔,上传框居中展示,提示文字、下载按钮依次垂直排布。

二、分区域元素拆解

(一)弹窗顶部标题栏

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

(二)弹窗主体文件上传表单区

  1. 虚线边框上传容器框
  2. 无交互装饰图标:云+向上箭头
  3. 静态提示文本:将文件拖到此处,或
  4. 文字链接按钮:点击导入(文件上传控件交互入口,支持拖拽上传、点击唤起本地文件选择)

(三)格式限制说明静态文本

文本内容:只支持.xls、.xlsx格式文件,文件大小不超过5M

(四)模板下载功能按钮

文字链接按钮:下载Excel模板

(五)无交互元素

页面半透明重复水印文本

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

1. 表单类输入控件

文件上传控件(双模式:拖拽上传、点击唤起本地文件选择)

2. 按钮/链接类元素

弹窗控制图标按钮

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

功能文字链接按钮

点击导入(上传触发入口)、下载Excel模板(模板下载功能)

3. 静态文本展示元素

弹窗标题「导入」、上传区提示文案、文件格式与大小限制说明文本、背景水印文本

4. 静态装饰元素

上传区域云+箭头图标(仅视觉提示,无交互)

5. 缺失组件说明

无顶部全局导航、侧边树形菜单、页面标签、筛选表单、数据表格/列表、分页控件、单选/多选/下拉/日期/文本域输入框、新增/编辑/删除/查询操作按钮、底部状态栏信息区、批量操作按钮