Become a sponsor
9.11 数据展示组件
概述
展示类公共组件：CountTo（数字动画）、Qrcode（二维码）、Render（渲染器）、icon（图标）、Application/Websocket/Authority/CheckToken 等功能性组件。
组件清单
| 组件 | 职责 |
|---|---|
| CountTo | 数字滚动动画（仪表盘统计卡片） |
| Qrcode | 二维码生成（扫码登录、分享场景） |
| Render | 函数式/配置化渲染（动态列、动态操作区） |
| icon | 图标组件（菜单图标、操作图标统一入口） |
| Websocket | WebSocket 封装（实时消息推送场景） |
| Authority | 权限包装组件（与 v-perm 等价的组件式表达） |
| CheckToken | 令牌校验组件（内嵌校验场景） |
| Lockscreen | 锁屏组件 |
| Application | 应用级注入 |
CountTo（仪表盘常用）
html
<!-- ui/src/views/dashboard/console/index.vue 实际用法 -->
<CountTo :startVal="1" :endVal="info.visits.dayVisits" class="text-3xl" />
<CountTo :startVal="1" suffix="%" :endVal="info.visits.rise" />统计卡片标配（今日访问、涨幅等），配合 echarts 图表呈现运行数据。
icon 的统一性
菜单图标（gin_menu.icon）与页面内图标都经 icon 组件解析——菜单管理里选的图标名与页面引用同一套图标库（@element-plus/icons + vicons）。
Websocket
实时通知场景的封装（连接、重连、消息分发）；未接消息推送服务时组件处于待命状态，不产生副作用。
选型原则
展示需求先查本页与 Select/Table——公共组件没有的再考虑引入第三方，新增全局组件前先评估复用面（防 components 膨胀）。