# 9.11 数据展示组件

:::tip 概述
展示类公共组件：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 膨胀）。

## 相关

- [附录 H 前端组件速查](/zh/appendix/components.html)