签入版本

EasyGoAdmin_Gin_EleVue/zh/frontend/display-components.md

@@ -1,91 +1,45 @@
-# 9.9 数据展示组件
+# 9.11 数据展示组件
 
 :::tip 概述
-本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
+展示类公共组件：CountTo（数字动画）、Qrcode（二维码）、Render（渲染器）、icon（图标）、Application/Websocket/Authority/CheckToken 等功能性组件。
 :::
 
-## Table 表格组件
+## 组件清单
 
-```vue
-<template>
-  <BasicTable @register="registerTable" />
-</template>
+| 组件 | 职责 |
+|---|---|
+| CountTo | 数字滚动动画（仪表盘统计卡片） |
+| Qrcode | 二维码生成（扫码登录、分享场景） |
+| Render | 函数式/配置化渲染（动态列、动态操作区） |
+| icon | 图标组件（菜单图标、操作图标统一入口） |
+| Websocket | WebSocket 封装（实时消息推送场景） |
+| Authority | 权限包装组件（与 v-perm 等价的组件式表达） |
+| CheckToken | 令牌校验组件（内嵌校验场景） |
+| Lockscreen | 锁屏组件 |
+| Application | 应用级注入 |
 
-<script setup>
-import { BasicTable, useTable } from '@/components/Table';
+## CountTo（仪表盘常用）
 
-const [registerTable] = useTable({
-  api: getExamplePage,          // 数据接口
-  columns: [                     // 列定义
-    { title: 'ID', field: 'id', width: 80 },
-    { title: '名称', field: 'name' },
-    { title: '状态', field: 'statusText', width: 100 },
-    { title: '创建时间', field: 'createTime', width: 180 },
-  ],
-  actionColumn: {                // 操作列
-    width: 200,
-    actions: [
-      { label: '编辑', onClick: handleEdit },
-      { label: '删除', onClick: handleDelete, type: 'danger' },
-    ],
-  },
-});
-</script>
+```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" />
 ```
 
-## Page 页面容器
+统计卡片标配（今日访问、涨幅等），配合 echarts 图表呈现运行数据。
 
-```vue
-<template>
-  <PageWrapper>
-    <!-- 页面内容 -->
-  </PageWrapper>
-</template>
+## icon 的统一性
 
-<script setup>
-import { PageWrapper } from '@/components/Page';
-</script>
-```
+菜单图标（gin_menu.icon）与页面内图标都经 icon 组件解析——菜单管理里选的图标名与页面引用同一套图标库（@element-plus/icons + vicons）。
 
-## Icon 图标选择器
+## Websocket
 
-```vue
-<template>
-  <IconPicker v-model="formData.icon" />
-</template>
+实时通知场景的封装（连接、重连、消息分发）；未接消息推送服务时组件处于待命状态，不产生副作用。
 
-<script setup>
-import IconPicker from '@/components/icon/picker.vue';
-</script>
-```
+## 选型原则
 
-:::warning 组件未实现
-Description 描述列表组件尚未在项目中实现，以下为规划示例。
-:::
+展示需求先查本页与 Select/Table——公共组件没有的再考虑引入第三方，新增全局组件前先评估复用面（防 components 膨胀）。
 
-## Description 描述列表
+## 相关
 
-```vue
-<template>
-  <Description :data="detailData" :schema="schema" />
-</template>
-
-<script setup>
-import { Description } from '@/components/Description';
-
-const schema = [
-  { field: 'username', label: '用户名' },
-  { field: 'realname', label: '姓名' },
-  { field: 'statusText', label: '状态' },
-  { field: 'createTime', label: '创建时间' },
-];
-
-const detailData = ref({});
-</script>
-```
-
-## 相关文档
-
-- [数据录入组件](/zh/frontend/form-components.html)
-- [Excel 导入导出组件](/zh/frontend/excel-components.html)
-- [前端组件速查](/zh/appendix/components.html)
+- [附录 H 前端组件速查](/zh/appendix/components.html)