Appearance
全局组件目录说明 (src/components)
组件功能分类说明
一、导航控制类
| 组件名称 | 功能说明 | 关联组件 |
|---|---|---|
| Breadcrumb | 动态面包屑导航 | 支持路由自动生成 |
| TopNav | 响应式顶部导航栏 | 集成菜单折叠功能 |
| Hamburger | 侧边栏折叠触发器 | 状态记忆功能 |
二、数据展示类
| 组件名称 | 功能说明 | 技术特性 |
|---|---|---|
| Charts | 数据可视化图表 | 集成ECharts核心功能 |
| Table | 增强型数据表格 | 支持动态列配置 |
| DictTag | 数据字典标签 | 自动匹配字典值 |
| PanThumb | 全景缩略图 | 支持360°旋转查看 |
| iFrame | PDF预览容器 | 支持PDF在线预览 |
| FlvPlayer | .flv视频格式播放器 | 主要正对直播摄像头，视频推流服务进行解码播放 |
三、表单交互类
| 组件名称 | 功能说明 | 特色功能 |
|---|---|---|
| Editor | 富文本编辑器 | 支持Markdown双模式，支付图片视频上传 |
| FileUpload | 文件上传组件 | 断点续传/分片上传 |
| ImageUpload | 图片上传组件 | EXIF自动校正 |
| ImagePreview | 图片展示组件 | 支持图片放大预览 |
| VideoUpload | 视频上传组件 | 格式预检/转码支持 |
| VideoUploadOss | 前端视频上传组件 | 前端直连对象存储，用于大视频上传 |
| ExcelImport | Excel导入组件 | 自带excel导入弹框 |
四、系统工具类
| 组件名称 | 功能说明 | 应用场景 |
|---|---|---|
| Crontab | 定时任务表达式生成器 | 可视化CRON配置 |
| Screenfull | 全屏控制组件 | 支持元素级全屏 |
| ThemePicker | 主题切换组件 | 记忆用户偏好设置 |
五、特殊功能类
| 组件名称 | 功能说明 | 技术实现 |
|---|---|---|
| mapView | 地图组件 | 集成AMap/Leaflet |
| RuoYi | 核心框架组件 | 基础路由容器 |
| AreaMapSelector | 高德地图框选区域组件 | 集成AMap |
组件使用规范
- 命名规则：采用大驼峰命名法（如
BaseBack） - 复用层级：
/src/components：全局通用组件/views/components：业务级复用组件
- 版本控制：通过
CHANGELOG.md记录组件迭代
提示：可通过
npm run components:list查看完整组件树