全部元素
表单元素
按钮
展示元素
导航元素
反馈元素
用户名输入框 输入框
必填
文本类型
占位符: "请输入用户名"
密码输入框 输入框
必填
密码类型
显示/隐藏切换
错误提示框 提示框
红色背景
自动消失
包含错误信息
顶部导航栏 导航栏
固定定位
包含用户信息
退出登录
侧边导航菜单 菜单
可折叠
模块图标
激活状态指示
项目管理入口 卡片按钮
项目数量显示
快捷操作入口
任务登记入口 卡片按钮
快捷登记按钮
待处理任务数
文件管理入口 卡片按钮
文件数量统计
最近上传显示
实时统计卡片 统计卡片
多指标显示
趋势图标
刷新按钮
检测状态面板 状态面板
状态指示灯
进度条
状态描述
数据图表区域 图表
折线图/柱状图
时间选择器
数据导出
数据导出按钮 按钮
Excel导出
PDF导出
导出范围选择
项目卡片列表 卡片列表
网格布局
项目缩略图
基本信息显示
项目筛选器 筛选器
多条件筛选
日期范围
状态筛选
导入Excel按钮 按钮
文件选择对话框
拖拽上传
上传进度
项目详情弹窗 弹窗
详细信息展示
编辑入口
删除确认
项目切换下拉框 下拉框
当前项目高亮
项目搜索
切换确认
任务登记表单 表单
多步骤表单
字段验证
保存草稿
任务名称输入框 输入框
必填字段
最大长度限制
自动生成建议
任务类型选择器 选择器
单选/多选
级联选择
自定义类型
负责人选择器 选择器
用户搜索
多选支持
部门筛选
截止日期选择器 日期选择器
日期范围
时间选择
快捷选项
二维码生成区域 二维码
实时生成
下载按钮
大小调整
导出Excel按钮 按钮
导出当前任务
导出全部
格式选择
登记成功提示 提示框
成功图标
自动跳转倒计时
查看详情链接
文件列表表格 表格
文件名/大小/日期
文件类型图标
操作列
上传文件按钮 按钮
拖拽上传区域
文件类型限制
上传进度条
下载模板按钮 按钮
多种模板选择
模板预览
批量下载
文件操作菜单 菜单
预览/下载/删除
批量操作
右键菜单
文件预览面板 预览面板
Excel表格预览
分页查看
搜索高亮
文件信息侧边栏 侧边栏
文件详细信息
历史版本
分享设置
上传成功提示 提示框
成功动画
文件信息摘要
快速操作链接
格式错误提示 提示框
错误原因说明
正确格式示例
模板下载链接
前端元素分类说明
元素类型定义
- 表单元素:用于用户输入和选择,包括输入框、选择器、日期选择器等。
- 按钮:用户操作的触发元素,包括普通按钮、卡片按钮、开关等。
- 展示元素:用于信息展示,包括表格、卡片、图表、二维码等。
- 导航元素:用于页面和功能导航,包括导航栏、菜单、下拉框等。
- 反馈元素:系统对用户操作的反馈,包括提示框、加载状态、确认框等。
开发建议
- 组件化开发:将常用元素封装为可复用组件,提高开发效率。
- 响应式设计:确保所有页面和元素在不同设备上正常显示。
- 无障碍访问:为关键元素添加ARIA属性,提升可访问性。
- 状态管理:合理管理页面元素的状态(禁用、加载、激活等)。