sky-ui-kit 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -5
- package/components.json +3279 -658
- package/dist/components/AppSelect.vue.d.ts +1 -1
- package/dist/components/MapTimeline.vue.d.ts +1 -1
- package/dist/components/MapTools.vue.d.ts +1 -1
- package/dist/components/SvgIcon.vue.d.ts +15 -0
- package/dist/components/TreeSelectPanel.vue.d.ts +1 -1
- package/dist/components/element-plus.d.ts +87 -333
- package/dist/components/icon-registry.d.ts +2 -0
- package/dist/components/index.d.ts +27 -6
- package/dist/components/project-icons.d.ts +1646 -0
- package/dist/components.js +4335 -998
- package/dist/style.css +1 -1
- package/docs/ADAPTATION.md +81 -0
- package/docs/AI-CHANGELOG.md +138 -0
- package/docs/AI-GUIDE.md +2684 -2
- package/docs/COMPONENT-API.md +582 -89
- package/docs/COMPONENT-GUIDE.md +160 -0
- package/docs/COMPONENT-INVENTORY.md +60 -0
- package/docs/COMPONENT-LIBRARY.md +3 -1
- package/docs/COMPONENT-USAGE.md +137 -0
- package/docs/CSS-THEME.md +5 -0
- package/docs/ELEMENT-PLUS-COVERAGE.md +159 -0
- package/docs/GLOBAL-ADAPTATION.md +38 -0
- package/docs/INTEGRATION.md +19 -1
- package/docs/LEGACY-USAGE.md +613 -0
- package/docs/PAGE-INVENTORY.md +372 -0
- package/docs/component-usage.json +3654 -0
- package/llms-full.txt +3959 -214
- package/llms.txt +8 -1
- package/package.json +15 -4
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# 组件使用说明
|
|
2
|
+
|
|
3
|
+
本指南说明当前包已导出的 11 个项目组件的用途、数据约定和交互边界。完整属性类型、默认值、事件签名和插槽列表见 [组件 API](COMPONENT-API.md)；完整示例见 [AI-GUIDE](AI-GUIDE.md)。原项目组件清单中的文件不一定已经进入本包，以 `src/components/index.ts` 和 `components.json` 为准。
|
|
4
|
+
|
|
5
|
+
## SvgIcon 与原项目适配
|
|
6
|
+
|
|
7
|
+
SvgIcon 按 name 显示项目 SVG，size 为 CSS 尺寸或按 --cp-font-1 缩放的数字，color 默认继承。title / decorative 控制无障碍说明。内置资源使用默认 sky-icon- 前缀并自动注册；自有资源需要 Vite SVG 插件、main.ts 注册和 prefix="icon-"，完整可复制步骤见 AI-GUIDE.md。当前原项目已配置 icon-[name]，不要重复安装注册；新项目建议 icon-[dir]-[name] 避免同名冲突。原生属性和事件透传 SVG，无内容插槽；固定色路径保留配色，未知名称不显示图形。
|
|
8
|
+
|
|
9
|
+
实际组件使用清单见 [COMPONENT-USAGE.md](COMPONENT-USAGE.md)，逐模块替换边界和路由/地图/主题适配见 [ADAPTATION.md](ADAPTATION.md)。这些文档明确哪些组件可替换、需要适配层或仍留业务项目。
|
|
10
|
+
|
|
11
|
+
## 公共接入
|
|
12
|
+
|
|
13
|
+
需要 Vue 3，项目声明的 peerDependencies 为 Vue `^3.4.21`、Element Plus `^2.14.7`、图标包 `^2.3.2` 和 motion-v `^2.3.0`。这些是依赖声明范围，不代表已经验证整个版本范围。
|
|
14
|
+
|
|
15
|
+
在应用入口加载一次样式：
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import 'element-plus/dist/index.css'
|
|
19
|
+
import 'sky-ui-kit/style.css'
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
组件按名称从 `sky-ui-kit` 或 `sky-ui-kit/components` 导入。无需引入预览站的 Pinia 主题 store。暗色、局部主题和浮层挂载规则见 [CSS-THEME](CSS-THEME.md)。
|
|
23
|
+
|
|
24
|
+
## 如何选择组件
|
|
25
|
+
|
|
26
|
+
| 需求 | 组件 | 主要数据 / 控制方式 |
|
|
27
|
+
|---|---|---|
|
|
28
|
+
| 标准 Element Plus 控件 | Ui 前缀组件 | 使用对应 Element Plus API |
|
|
29
|
+
| 使用 options 的项目下拉框 | AppSelect | v-model + options |
|
|
30
|
+
| 按行政区、流域等分类选择树节点 | TreeSelectPanel | v-model + categories |
|
|
31
|
+
| 切换预设时间范围 | TimeRangeQuickSelect | v-model + options |
|
|
32
|
+
| 选择、播放实况和预报帧 | MapTimeline | v-model 帧索引 |
|
|
33
|
+
| 普通横向 / 纵向菜单 | ProjectMenu | v-model:active + items / groups |
|
|
34
|
+
| 单分类地图胶囊菜单 | MapSideMenu | v-model:active / compact |
|
|
35
|
+
| 地图工具按钮 | MapTools | v-model:active + tool-click |
|
|
36
|
+
| 地图居中标题 | AtlasMapTitle | title / subtitle / rightOpen |
|
|
37
|
+
| 右侧面板开关按钮 | AtlasRightToggleButton | open + toggle |
|
|
38
|
+
| 多序列按时间对齐的表格 | ProcessDataTable | times + series |
|
|
39
|
+
|
|
40
|
+
## AppSelect
|
|
41
|
+
|
|
42
|
+
基于 ElSelectV2，适合站点等选项列表。`options` 可以是字符串、数字，或 `{ label, value, disabled? }` 对象；字符串、数字自动以自身作为值，显示文字转换为字符串。
|
|
43
|
+
|
|
44
|
+
- `v-model` 保存选项值；多选时使用数组，并传入 `multiple`。
|
|
45
|
+
- `emptyLabel` 同时用于无数据、无搜索匹配提示。
|
|
46
|
+
- `filterable`、`clearable`、`disabled`、`placeholder` 等通过属性透传到 ElSelectV2，语义以对应官方 API 为准。
|
|
47
|
+
- `change` 返回值，非整个选项对象。没有声明内容插槽，不使用 `el-option` 子节点；需要子节点选项时用 UiSelect。
|
|
48
|
+
- `teleported` 默认 false；父容器的 overflow 可能影响浮层显示。
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<script setup lang="ts">
|
|
52
|
+
import { ref } from 'vue'
|
|
53
|
+
import { AppSelect } from 'sky-ui-kit'
|
|
54
|
+
const station = ref('hankou')
|
|
55
|
+
const options = [{ label: '汉口站', value: 'hankou' }, { label: '宜昌站', value: 'yichang' }]
|
|
56
|
+
</script>
|
|
57
|
+
<template>
|
|
58
|
+
<AppSelect v-model="station" :options="options" filterable clearable />
|
|
59
|
+
</template>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## TreeSelectPanel
|
|
63
|
+
|
|
64
|
+
`categories` 为 `{ type, label, children }[]`，每个树节点至少提供 `id` 和 `label`，子节点放在 `children`。节点 ID 应保持稳定并避免跨分类重复，以免选中值含义不明确。
|
|
65
|
+
|
|
66
|
+
- `v-model` 是节点 ID，类型为 string、number 或 null，非节点对象。
|
|
67
|
+
- `change` 返回 `{ node, category }`；`select` 以两个参数返回节点和分类。两种事件用于同一次选择的不同接线方式，避免重复执行同一业务请求。
|
|
68
|
+
- `defaultActiveType` 指定初始分类；`defaultExpandAll` 控制默认展开。
|
|
69
|
+
- `closeOnSelect`、`closeOnMouseLeave` 控制关闭行为；`dark` 控制组件暗色外观。
|
|
70
|
+
- `placeholder`、`searchPlaceholder`、`emptyText` 分别用于选择框、搜索框和无数据提示。数据获取、权限过滤由应用处理。
|
|
71
|
+
|
|
72
|
+
## TimeRangeQuickSelect
|
|
73
|
+
|
|
74
|
+
`modelValue` 和 `options` 必填。每项为 `{ key, label, amount?, unit? }`，`key` 建议唯一，选中值应与某个 key 一致。
|
|
75
|
+
|
|
76
|
+
- `v-model` 保存 key；`change` 返回完整选项。
|
|
77
|
+
- `amount`、`unit` 可用于应用计算查询范围，unit 为 hour 或 day。组件负责选择，不自动生成起止时间或发起查询。
|
|
78
|
+
- `ariaLabel` 为控件提供可访问名称。
|
|
79
|
+
|
|
80
|
+
## MapTimeline
|
|
81
|
+
|
|
82
|
+
适合按时间帧切换地图图层。`v-model` 是数值索引；`change` 返回包含 `time`、`value`、`label`、`kind` 等字段的 TimelinePoint，应用据此加载对应业务数据。
|
|
83
|
+
|
|
84
|
+
- 可传入 `points` 明确指定帧数据，或使用 `startTime`、`steps`、`interval`、`unit` 等生成时间点。自定义点的数据结构见 API 中的 TimelinePoint。
|
|
85
|
+
- `pastSteps`、`futureSteps` 用于实况 / 预报分段；`forecastCount`、`minTime`、`maxTime` 等高级参数需结合具体数据核对，避免把帧数和时间值混用。
|
|
86
|
+
- `v-model:playing` 和 `v-model:speed` 同步播放状态与倍速；`internalPlayback` 控制是否由组件内部推进播放，外部驱动时应用需要自行更新索引。
|
|
87
|
+
- `pageSize` 控制展示分页，`loop` 控制循环；`showScale`、`showCurrentMarker` 控制刻度及当前时间标记。
|
|
88
|
+
- 明确提供 `timeZone` 和带时区的时间字符串，例如 `2026-10-08T08:00:00+08:00`，避免使用含义依赖设备时区的字符串。
|
|
89
|
+
- 提供 `date-select` 插槽，参数为 start-time、active-point、active-index、value、set-start-time 和 jump-to-time，可接入自定义日期选择器。组件不负责接口请求、缓存或地图渲染。
|
|
90
|
+
|
|
91
|
+
## ProjectMenu
|
|
92
|
+
|
|
93
|
+
`direction` 为 horizontal 或 vertical。横向布局读取 `items`，纵向布局读取 `groups`，切换 direction 时需要提供对应数据。`items` 为 `{ key, label, disabled?, icon? }[]`，`groups` 为 `{ label, items }[]`。具体布局示例见 AI-GUIDE。
|
|
94
|
+
|
|
95
|
+
- `v-model:active` 同步选中 key；`select` 返回完整菜单项。
|
|
96
|
+
- `disabled` 禁止选择；纵向菜单的 `icon` 接收 Vue 图标组件，不是图标名称字符串。横向菜单当前只显示文字。
|
|
97
|
+
- 路由跳转、权限控制由应用在 select 中处理；分组折叠由组件内部处理。
|
|
98
|
+
|
|
99
|
+
## MapSideMenu
|
|
100
|
+
|
|
101
|
+
提供一个分类标题及其子菜单，支持按 label 搜索、分类展开和纯图标模式。`items` 为 `{ key, label, icon? }[]`，不具有 ProjectMenu 的 disabled 字段。
|
|
102
|
+
|
|
103
|
+
- `v-model:active` 同步选中 key，`select` 返回菜单项。
|
|
104
|
+
- `v-model:compact` 同步纯图标状态，`dark` 控制暗色外观。
|
|
105
|
+
- 搜索和分类展开属于内部状态，没有相应的公开双向绑定。
|
|
106
|
+
- 容器应提供明确高度，组件本身使用 height: 100%。切换图层和路由由应用处理。
|
|
107
|
+
|
|
108
|
+
## MapTools
|
|
109
|
+
|
|
110
|
+
工具 key 固定为 layers、module、refresh、locate、settings、analysis、context。`horizontal` 切换横向排列；`icons` 按 key 覆盖图标，值为 Vue 组件。
|
|
111
|
+
|
|
112
|
+
- 点击任意工具均触发 `tool-click(key)`。
|
|
113
|
+
- layers、module、settings、analysis 切换 active；再次点击当前项会取消选中并返回空字符串。
|
|
114
|
+
- refresh、locate 触发动作，不修改 active。
|
|
115
|
+
- context 使用独立内部状态，触发 `context-change(enabled)`；没有 `v-model:context`。
|
|
116
|
+
- 组件仅提供按钮交互。地图定位、刷新、图层面板与空间分析由应用通过事件实现。
|
|
117
|
+
|
|
118
|
+
## AtlasMapTitle
|
|
119
|
+
|
|
120
|
+
`title` 必填；`subtitle` 默认空字符串，`rightOpen` 默认 false。
|
|
121
|
+
|
|
122
|
+
标题使用绝对定位，建议父容器设置 `position: relative`。`rightOpen` 调整标题右侧留白，宽度使用主题变量 `--userssite-rightpanel-width`；应与应用右面板宽度一致。标题使用 pointer-events: none，没有点击事件或插槽。
|
|
123
|
+
|
|
124
|
+
## AtlasRightToggleButton
|
|
125
|
+
|
|
126
|
+
`open` 表示外部面板状态；点击触发无参数 `toggle`，组件不自行更新 open。`openTitle`、`closeTitle` 同时用于按钮标题和 aria-label。
|
|
127
|
+
|
|
128
|
+
```vue
|
|
129
|
+
<script setup lang="ts">
|
|
130
|
+
import { ref } from 'vue'
|
|
131
|
+
import { AtlasRightToggleButton } from 'sky-ui-kit'
|
|
132
|
+
const open = ref(false)
|
|
133
|
+
</script>
|
|
134
|
+
<template>
|
|
135
|
+
<AtlasRightToggleButton :open="open" @toggle="open = !open" />
|
|
136
|
+
<aside v-if="open">面板内容</aside>
|
|
137
|
+
</template>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## ProcessDataTable
|
|
141
|
+
|
|
142
|
+
`times: string[]` 和 `series: { name: string; data: (number | null)[] }[]` 必填。第 i 个时间对应每个 series.data[i]；调用方应按相同时间顺序对齐数据。
|
|
143
|
+
|
|
144
|
+
- `loading` 显示“查询中…”；times 为空显示“暂无数据”。
|
|
145
|
+
- null 或缺失值显示“—”，0 仍显示为 0。
|
|
146
|
+
- 内部每页固定 100 条，替换 times 数组时重置到首页。
|
|
147
|
+
- 当前没有 pageSize、分页事件、排序、单元格插槽或远程分页 API。需要这些能力时使用 UiTable 组合实现。
|
|
148
|
+
|
|
149
|
+
## 网站组件页还需要补充的内容
|
|
150
|
+
|
|
151
|
+
当前指南补齐说明层，后续网站每个组件页面应把以下信息放在对应演示旁边：
|
|
152
|
+
|
|
153
|
+
1. 中文用途及组件选择建议。
|
|
154
|
+
2. 独立可复制示例，覆盖基础用法、受控状态和实际支持的边界状态。
|
|
155
|
+
3. 带中文语义说明的 Props、Events、Slots 表；如有公开实例方法，再列 Exposes。
|
|
156
|
+
4. 数据结构、事件载荷示例、样式变量与容器要求。
|
|
157
|
+
5. 已验证的键盘交互、暗色与浮层行为；未验证内容不要标记为支持。
|
|
158
|
+
6. 版本变更和已知限制，区分已导出组件、预览示例与尚未迁入的业务组件。
|
|
159
|
+
|
|
160
|
+
Ui 基础组件已统一关联对应 Element Plus 主组件文档，例如 TableColumn 对应 Table 页面、FormItem 对应 Form 页面。完整组件、子组件、服务和指令清单见 [ELEMENT-PLUS-COVERAGE](ELEMENT-PLUS-COVERAGE.md)。独立示例与视觉状态仍需逐项补充和验证。
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# 原项目全部组件
|
|
2
|
+
|
|
3
|
+
| 文件 | 行数 | 外部 / 业务依赖 | 局部固定颜色数 |
|
|
4
|
+
|---|---:|---|---:|
|
|
5
|
+
| src/components/atlas/AtlasMapTitle.vue | 56 | — | 0 |
|
|
6
|
+
| src/components/atlas/AtlasProcessChart.vue | 79 | echarts<br>echarts | 0 |
|
|
7
|
+
| src/components/atlas/AtlasProcessPanel.vue | 12 | — | 0 |
|
|
8
|
+
| src/components/atlas/AtlasRankingPanel.vue | 12 | — | 0 |
|
|
9
|
+
| src/components/atlas/AtlasRightToggleButton.vue | 86 | — | 0 |
|
|
10
|
+
| src/components/atlas/ProcessDataTable.vue | 41 | — | 0 |
|
|
11
|
+
| src/components/common/AppSelect.vue | 173 | — | 0 |
|
|
12
|
+
| src/components/common/BatchInfoPopover.vue | 124 | @/views/meteo/batchInfo | 0 |
|
|
13
|
+
| src/components/common/MapTimeline.vue | 2085 | — | 0 |
|
|
14
|
+
| src/components/common/TimeRangeQuickSelect.vue | 88 | — | 0 |
|
|
15
|
+
| src/components/common/TreeSelectPanel.vue | 870 | motion-v | 0 |
|
|
16
|
+
| src/components/common/index.vue | 713 | @/stores/access<br>@/assets/json/pcas-code.json<br>axios<br>@/stores/regionBoundary<br>@/stores/gisSelection | 0 |
|
|
17
|
+
| src/components/echarts/EchartLayout.vue | 974 | echarts<br>@/components/atlas/AtlasProcessChart.vue<br>@/components/atlas/ProcessDataTable.vue<br>@/components/atlas/AtlasProcessPanel.vue<br>@/components/common/AppSelect.vue<br>@/utils/valueFormat | 0 |
|
|
18
|
+
| src/components/global/SvgIcon.vue | 49 | — | 0 |
|
|
19
|
+
| src/components/layout/AsyncRoutePage.vue | 73 | vue-router<br>@/router/useRoutePage | 0 |
|
|
20
|
+
| src/components/layout/ContentLayoutMap.vue | 163 | vue-router<br>@/router<br>@/stores/ui<br>./SideMenuMap.vue<br>./EmptyMapLayout.vue<br>./mapPageSelection | 0 |
|
|
21
|
+
| src/components/layout/ContentLayoutNomenu.vue | 161 | vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue | 0 |
|
|
22
|
+
| src/components/layout/ContentLayoutSystem.vue | 175 | vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue | 0 |
|
|
23
|
+
| src/components/layout/EmptyMapLayout.vue | 10 | ./TemplateLayout.vue | 0 |
|
|
24
|
+
| src/components/layout/Header.vue | 1445 | vue-router<br>motion-v<br>@/router<br>@/stores/access<br>./PersonalInfo.vue<br>@/stores/theme<br>@/stores/regionBoundary<br>@/components/common/index.vue<br>@/map/core/MapLibreMap | 6 |
|
|
25
|
+
| src/components/layout/MainLayout.vue | 133 | vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutSystem.vue | 0 |
|
|
26
|
+
| src/components/layout/MainLayoutMap.vue | 153 | vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutMap.vue<br>../map/index.vue | 0 |
|
|
27
|
+
| src/components/layout/MainLayoutNoMenu.vue | 136 | vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutNomenu.vue | 0 |
|
|
28
|
+
| src/components/layout/PersonalInfo.vue | 44 | @/stores/access | 0 |
|
|
29
|
+
| src/components/layout/RegionDrawDialog.vue | 66 | maplibre-gl<br>terra-draw<br>terra-draw-maplibre-gl-adapter<br>@/map/core/basemaps<br>@/stores/regionBoundary | 0 |
|
|
30
|
+
| src/components/layout/RightPanel.vue | 858 | @/stores/ui<br>@/stores/theme<br>@/stores/theme<br>@/map/state | 0 |
|
|
31
|
+
| src/components/layout/RouterViewLayout.vue | 12 | — | 0 |
|
|
32
|
+
| src/components/layout/SideMenu.vue | 888 | vue-router<br>motion-v<br>@/router<br>@/stores/access<br>@/stores/ui | 0 |
|
|
33
|
+
| src/components/layout/SideMenuMap.vue | 830 | vue-router<br>@/router<br>@/stores/access<br>@/stores/theme<br>./mapPageSelection | 14 |
|
|
34
|
+
| src/components/layout/TemplateLayout.vue | 499 | vue-router<br>@/map/core/MapLibreMap<br>@/components/map/MapToolbar.vue<br>@/components/map/MapLegend.vue<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/regionBoundary<br>./RightPanel.vue | 0 |
|
|
35
|
+
| src/components/layout/Toolbar.vue | 54 | @/stores/ui<br>@/map/useMapBus | 0 |
|
|
36
|
+
| src/components/layout/UserRegionAccess.vue | 70 | ./RegionDrawDialog.vue<br>@/utils/userRegions<br>@/assets/json/pcas-code.json<br>@/components/map/GisFileImport<br>@/stores/access | 0 |
|
|
37
|
+
| src/components/map/EngineeringDetails.vue | 134 | @/map/engineeringDetails<br>@/map/config/engineeringFields<br>@/utils/request | 0 |
|
|
38
|
+
| src/components/map/GateDetails.vue | 38 | @/map/gateDetails | 0 |
|
|
39
|
+
| src/components/map/LayerControl.vue | 357 | ./LayerTreeNode.vue<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/map/core/basemaps | 0 |
|
|
40
|
+
| src/components/map/LayerTreeNode.vue | 567 | @/map/core/basemaps<br>@/stores/mapLayers | 0 |
|
|
41
|
+
| src/components/map/MapLegend.vue | 401 | vue-router | 0 |
|
|
42
|
+
| src/components/map/MapOperationPanel.vue | 412 | ./MapOperationTools | 0 |
|
|
43
|
+
| src/components/map/MapToolbar.vue | 451 | ./LayerControl.vue<br>./MapOperationPanel.vue<br>./ModuleOperationPanel.vue<br>./SpaceAnalysisPanel.vue<br>./MapOperationTools<br>./GisFileImport<br>@/map/core/MapLibreMap<br>@/map/core/basemaps<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/gisSelection | 0 |
|
|
44
|
+
| src/components/map/MapValueLegend.vue | 386 | — | 0 |
|
|
45
|
+
| src/components/map/MediaLayerDetails.vue | 24 | ./PanoramaViewer.vue<br>@/map/mediaLayerDetails | 0 |
|
|
46
|
+
| src/components/map/ModuleOperationPanel.vue | 178 | vue-router | 0 |
|
|
47
|
+
| src/components/map/PanoramaViewer.vue | 38 | @photo-sphere-viewer/core | 0 |
|
|
48
|
+
| src/components/map/ReservoirDetails.vue | 85 | @/utils/request<br>@/map/reservoirDetails | 0 |
|
|
49
|
+
| src/components/map/RubberDamDetails.vue | 38 | @/map/rubberDamDetails | 0 |
|
|
50
|
+
| src/components/map/SpaceAnalysisPanel.vue | 434 | @/stores/gisSelection<br>@/stores/spaceAnalysis | 0 |
|
|
51
|
+
| src/components/map/StationLayerDetails.vue | 135 | echarts<br>moment<br>./PanoramaViewer.vue<br>@/components/atlas/AtlasProcessChart.vue<br>@/map/stationLayerDetails<br>@/config/server<br>@/utils/request | 0 |
|
|
52
|
+
| src/components/map/index.vue | 97 | ./MediaLayerDetails.vue<br>./StationLayerDetails.vue<br>./GateDetails.vue<br>./RubberDamDetails.vue<br>./ReservoirDetails.vue<br>./EngineeringDetails.vue<br>vue-router<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/stores/ui<br>@/map/pageContextMenu<br>@/map/mapContextMenu | 0 |
|
|
53
|
+
| src/components/status/wrfHydro/index.vue | 67 | ./wrfHydroStatus.vue | 0 |
|
|
54
|
+
| src/components/status/wrfHydro/wrfHydroStatus.vue | 803 | @vueuse/core<br>@/api/oneMap/status | 0 |
|
|
55
|
+
| src/components/status/wrf/index.vue | 68 | ./wrfStatus.vue | 0 |
|
|
56
|
+
| src/components/status/wrf/wrfStatus.vue | 809 | moment<br>@/api/oneMap/status | 0 |
|
|
57
|
+
| src/components/table/TableLayout.vue | 1380 | @/components/atlas/AtlasRankingPanel.vue<br>@/utils/valueFormat | 1 |
|
|
58
|
+
| src/components/timeline/index.vue | 153 | @/components/common/AppSelect.vue | 13 |
|
|
59
|
+
| src/components/titlebar/index.vue | 45 | — | 3 |
|
|
60
|
+
| src/components/widgets/Legend.vue | 103 | vue-router | 0 |
|
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
基础组件调用 Element Plus 原实现，包装层转发属性、事件、插槽、v-model 与实例 ref，并自动添加主题作用域。ConfigProvider、Option、TableColumn、TabPane 保留原组件。浮层默认行为、附加 DOM 和局部主题限制见 [CSS-THEME.md](CSS-THEME.md)。原生 ElInput 在库作用域外保留原外观；UiInput 使用库主题。
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
基础层现以 Element Plus 2.14.7 的完整官方注册清单为基准，覆盖 111 个主 / 子组件、4 个服务出口和 3 个指令出口，完整分类见 [ELEMENT-PLUS-COVERAGE.md](ELEMENT-PLUS-COVERAGE.md)。ALL-USED-COMPONENTS.md 仅表示原业务项目实际使用范围。`v-loading` 对应 `vUiLoading`，无限滚动对应 `vUiInfiniteScroll`，气泡触发指令对应 `vUiPopover`；消息、确认、通知保留服务调用方式，加载使用 `UiLoading.service(options)`。UiLoading 不提供全局插件安装。
|
|
22
|
+
|
|
23
|
+
CarouselItem、TourStep、Option、OptionGroup、TableColumn、TabPane、菜单项、步骤项等保留官方结构或 VNode 身份，必须搭配对应 Ui 父组件以继承主题。包装组件保留官方组件名称；不能将“出口覆盖”理解为全部组件独立视觉与业务回归均已完成。新增组件要求 Element Plus 至少 2.14.7。
|
|
22
24
|
|
|
23
25
|
```vue
|
|
24
26
|
<script setup lang="ts">
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# 原项目实际组件使用清单
|
|
2
|
+
|
|
3
|
+
扫描日期：2026-10-12。只读扫描 src 下 590 个 Vue / TS / JS 文件（其中 424 个 Vue），排除生成 .d.ts。Element Plus 57 种模板组件，3 种服务导入，1 种指令；56 个公共 Vue 组件。次数表示引用文件数，不是实例数或调用次数。
|
|
4
|
+
|
|
5
|
+
模板标签合并 ElXxx / el-xxx；服务统计显式导入，公共组件统计静态导入与全局 SvgIcon 标签。动态组件、别名标签、字符串拼接、自动注册和间接使用可能漏计；零直接引用不等于未使用。包含参考项目当前未提交源码，但未复制这些业务改动。详细路径见 component-usage.json，替换策略见 ADAPTATION.md。
|
|
6
|
+
|
|
7
|
+
## Element Plus 模板组件
|
|
8
|
+
|
|
9
|
+
| 原组件 | 库出口 | 引用文件数 | 使用位置示例 |
|
|
10
|
+
|---|---|---:|---|
|
|
11
|
+
| ElOption | UiOption | 184 | src/components/layout/RightPanel.vue<br>src/components/layout/UserRegionAccess.vue<br>src/components/map/StationLayerDetails.vue |
|
|
12
|
+
| ElSelect | UiSelect | 184 | src/components/layout/RightPanel.vue<br>src/components/layout/UserRegionAccess.vue<br>src/components/map/StationLayerDetails.vue |
|
|
13
|
+
| ElCascader | UiCascader | 143 | src/components/common/index.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/atlas/climateChange/ClimatePrec.vue |
|
|
14
|
+
| ElIcon | UiIcon | 67 | src/components/atlas/AtlasRightToggleButton.vue<br>src/components/common/BatchInfoPopover.vue<br>src/components/common/MapTimeline.vue |
|
|
15
|
+
| ElButton | UiButton | 60 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RegionDrawDialog.vue<br>src/components/layout/RightPanel.vue |
|
|
16
|
+
| ElDatePicker | UiDatePicker | 34 | src/components/common/MapTimeline.vue<br>src/components/echarts/EchartLayout.vue<br>src/components/map/StationLayerDetails.vue |
|
|
17
|
+
| ElDialog | UiDialog | 27 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RegionDrawDialog.vue<br>src/components/layout/TemplateLayout.vue |
|
|
18
|
+
| ElInput | UiInput | 24 | src/components/layout/PersonalInfo.vue<br>src/components/layout/RightPanel.vue<br>src/components/table/TableLayout.vue |
|
|
19
|
+
| ElUpload | UiUpload | 23 | src/views/atlas/video/dialog/dataMaintenance/components/BaseFormDrawer.vue<br>src/views/atlas/video/dialog/dataMaintenance/components/DefaultFormContent.vue<br>src/views/datamaint/maintenance/ImageList.vue |
|
|
20
|
+
| ElForm | UiForm | 18 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/AccessSession.vue |
|
|
21
|
+
| ElFormItem | UiFormItem | 18 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/AccessSession.vue |
|
|
22
|
+
| ElImage | UiImage | 16 | src/components/map/EngineeringDetails.vue<br>src/components/map/MediaLayerDetails.vue<br>src/views/atlas/video/dialog/ImageViewer/index.vue |
|
|
23
|
+
| ElTable | UiTable | 13 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue |
|
|
24
|
+
| ElTableColumn | UiTableColumn | 13 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue |
|
|
25
|
+
| ElEmpty | UiEmpty | 12 | src/components/common/TreeSelectPanel.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/GateDetails.vue |
|
|
26
|
+
| ElPagination | UiPagination | 11 | src/views/atlas/video/dialog/flowWarningRecord.vue<br>src/views/atlas/video/dialog/flowWarningSettings.vue<br>src/views/atlas/video/dialog/moreContentView/index.vue |
|
|
27
|
+
| ElTag | UiTag | 11 | src/components/layout/PersonalInfo.vue<br>src/components/layout/UserRegionAccess.vue<br>src/views/atlas/video/dialog/detectionTask.vue |
|
|
28
|
+
| ElScrollbar | ElScrollbar（直接从 element-plus 导入） | 10 | src/components/layout/RightPanel.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/GateDetails.vue |
|
|
29
|
+
| ElInputNumber | UiInputNumber | 6 | src/components/layout/RightPanel.vue<br>src/views/atlas/video/dialog/components/ThresholdDetailDialog.vue<br>src/views/atlas/video/dialog/videoModel.vue |
|
|
30
|
+
| ElTooltip | UiTooltip | 6 | src/components/layout/SideMenu.vue<br>src/views/atlas/video/dialog/components/ImageViewer/index.vue<br>src/views/atlas/video/dialog/components/ThresholdDetailDialog.vue |
|
|
31
|
+
| ElAlert | UiAlert | 5 | src/components/layout/RegionDrawDialog.vue<br>src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue |
|
|
32
|
+
| ElDescriptions | UiDescriptions | 5 | src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue<br>src/components/status/wrfHydro/wrfHydroStatus.vue |
|
|
33
|
+
| ElDescriptionsItem | UiDescriptionsItem | 5 | src/components/map/EngineeringDetails.vue<br>src/components/map/StationLayerDetails.vue<br>src/components/status/wrfHydro/wrfHydroStatus.vue |
|
|
34
|
+
| ElSwitch | UiSwitch | 5 | src/components/layout/UserRegionAccess.vue<br>src/views/DefenseMapLinkage.vue<br>src/views/atlas/video/dialog/baseCanvas/index.vue |
|
|
35
|
+
| ElButtonGroup | UiButtonGroup | 4 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue<br>src/views/atlas/video/dialog/detectionTask.vue |
|
|
36
|
+
| ElSelectV2 | UiSelectV2 | 3 | src/components/common/AppSelect.vue<br>src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue |
|
|
37
|
+
| ElCard | UiCard | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
|
|
38
|
+
| ElCheckbox | UiCheckbox | 2 | src/views/datamaint/system/AccessManage.vue<br>src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
|
|
39
|
+
| ElCol | UiCol | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
|
|
40
|
+
| ElDrawer | UiDrawer | 2 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/video/dialog/dataMaintenance/components/BaseFormDrawer.vue |
|
|
41
|
+
| ElFooter | UiFooter | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
|
|
42
|
+
| ElPopover | UiPopover | 2 | src/components/common/BatchInfoPopover.vue<br>src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
|
|
43
|
+
| ElProgress | UiProgress | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
|
|
44
|
+
| ElRadioGroup | UiRadioGroup | 2 | src/views/atlas/video/dialog/components/WarningProcessDialog.vue<br>src/views/datamaint/system/AccessManage.vue |
|
|
45
|
+
| ElRow | UiRow | 2 | src/components/status/wrfHydro/wrfHydroStatus.vue<br>src/components/status/wrf/wrfStatus.vue |
|
|
46
|
+
| ElSlider | UiSlider | 2 | src/views/atlas/video/dialog/videoModel.vue<br>src/views/atlas/video/dialog/videoZ.vue |
|
|
47
|
+
| ElTabPane | UiTabPane | 2 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/MapDialog.vue |
|
|
48
|
+
| ElTabs | UiTabs | 2 | src/components/map/StationLayerDetails.vue<br>src/views/atlas/video/dialog/MapDialog.vue |
|
|
49
|
+
| ElTree | UiTree | 2 | src/components/common/TreeSelectPanel.vue<br>src/views/datamaint/system/AccessManage.vue |
|
|
50
|
+
| ElTreeSelect | UiTreeSelect | 2 | src/views/atlas/video/dialog/taskConfiguration.vue<br>src/views/datamaint/system/AccessManage.vue |
|
|
51
|
+
| ElAutoResizer | UiAutoResizer | 1 | src/views/datamaint/system/AccessManage.vue |
|
|
52
|
+
| ElBadge | UiBadge | 1 | src/views/atlas/video/dialog/detectionTask.vue |
|
|
53
|
+
| ElCarousel | UiCarousel | 1 | src/components/map/EngineeringDetails.vue |
|
|
54
|
+
| ElCarouselItem | UiCarouselItem | 1 | src/components/map/EngineeringDetails.vue |
|
|
55
|
+
| ElCheckboxGroup | UiCheckboxGroup | 1 | src/views/datamaint/system/AccessManage.vue |
|
|
56
|
+
| ElCollapse | UiCollapse | 1 | src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
|
|
57
|
+
| ElCollapseItem | UiCollapseItem | 1 | src/views/hydroforecast/mapHydro/map/components/layerControl.vue |
|
|
58
|
+
| ElColorPicker | UiColorPicker | 1 | src/components/layout/RightPanel.vue |
|
|
59
|
+
| ElConfigProvider | UiConfigProvider | 1 | src/App.vue |
|
|
60
|
+
| ElDropdown | UiDropdown | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
|
|
61
|
+
| ElDropdownItem | UiDropdownItem | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
|
|
62
|
+
| ElDropdownMenu | UiDropdownMenu | 1 | src/views/atlas/video/dialog/components/ImageViewer/index.vue |
|
|
63
|
+
| ElPopconfirm | UiPopconfirm | 1 | src/views/atlas/video/dialog/videoZ.vue |
|
|
64
|
+
| ElRadio | UiRadio | 1 | src/views/atlas/video/dialog/components/WarningProcessDialog.vue |
|
|
65
|
+
| ElRadioButton | UiRadioButton | 1 | src/views/datamaint/system/AccessManage.vue |
|
|
66
|
+
| ElRate | UiRate | 1 | src/views/atlas/video/dialog/dataMaintenance/components/DefaultFormContent.vue |
|
|
67
|
+
| ElTableV2 | UiTableV2 | 1 | src/views/datamaint/system/AccessManage.vue |
|
|
68
|
+
|
|
69
|
+
## 服务与指令
|
|
70
|
+
|
|
71
|
+
| 原接口 | 库接口 | 引用文件数 |
|
|
72
|
+
|---|---|---:|
|
|
73
|
+
| ElMessage | UiMessage | 111 |
|
|
74
|
+
| ElMessageBox | UiMessageBox | 13 |
|
|
75
|
+
| ElNotification | UiNotification | 2 |
|
|
76
|
+
| v-loading | vUiLoading | 18 |
|
|
77
|
+
|
|
78
|
+
## 项目公共组件
|
|
79
|
+
|
|
80
|
+
| 原源码 | 直接引用文件数 | 使用位置示例 | 依赖 |
|
|
81
|
+
|---|---:|---|---|
|
|
82
|
+
| src/components/layout/TemplateLayout.vue | 268 | src/components/layout/EmptyMapLayout.vue<br>src/views/Blank.vue<br>src/views/atlas/climateChange/ClimatePrec.vue | vue<br>vue-router<br>@/map/core/MapLibreMap<br>@/components/map/MapToolbar.vue<br>@/components/map/MapLegend.vue<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/regionBoundary<br>./RightPanel.vue |
|
|
83
|
+
| src/components/atlas/AtlasMapTitle.vue | 264 | src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue<br>src/views/atlas/dem/Dem30m.vue | — |
|
|
84
|
+
| src/components/map/MapValueLegend.vue | 251 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue | vue<br>@element-plus/icons-vue |
|
|
85
|
+
| src/components/common/MapTimeline.vue | 236 | src/views/DefenseMapLinkage.vue<br>src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue | vue<br>@element-plus/icons-vue |
|
|
86
|
+
| src/components/echarts/EchartLayout.vue | 183 | src/views/atlas/climateChange/ClimatePrec.vue<br>src/views/atlas/climateChange/ClimateTem.vue<br>src/views/atlas/dem/Dem30m.vue | vue<br>echarts<br>@/components/atlas/AtlasProcessChart.vue<br>@/components/atlas/ProcessDataTable.vue<br>@/components/atlas/AtlasProcessPanel.vue<br>@/components/common/AppSelect.vue<br>@/utils/valueFormat |
|
|
87
|
+
| src/components/atlas/AtlasRightToggleButton.vue | 109 | src/views/atlas/elments/Pres.vue<br>src/views/atlas/elments/Rain.vue<br>src/views/atlas/elments/RunoffHd.vue | @element-plus/icons-vue |
|
|
88
|
+
| src/components/common/AppSelect.vue | 64 | src/components/echarts/EchartLayout.vue<br>src/components/timeline/index.vue<br>src/views/DefenseMapLinkage.vue | vue<br>element-plus |
|
|
89
|
+
| src/components/table/TableLayout.vue | 34 | src/views/atlas/climateGrid/components/ClimateGridInfoPanel.vue<br>src/views/atlas/elments/Pres.vue<br>src/views/atlas/elments/RunoffHd.vue | vue<br>@element-plus/icons-vue<br>@/components/atlas/AtlasRankingPanel.vue<br>@/utils/valueFormat |
|
|
90
|
+
| src/components/common/BatchInfoPopover.vue | 17 | src/views/meteo/RainDaily.vue<br>src/views/meteo/index.vue<br>src/views/meteo/lradDaily.vue | vue<br>@element-plus/icons-vue<br>@/views/meteo/batchInfo |
|
|
91
|
+
| src/components/status/wrf/index.vue | 17 | src/views/meteo/RainDaily.vue<br>src/views/meteo/index.vue<br>src/views/meteo/lradDaily.vue | vue<br>./wrfStatus.vue |
|
|
92
|
+
| src/components/common/TimeRangeQuickSelect.vue | 14 | src/views/atlas/groundwater/GroundwaterFb.vue<br>src/views/atlas/landWater/LandWaterCSRMon.vue<br>src/views/atlas/runoffDepth/RunoffDepth.vue | — |
|
|
93
|
+
| src/components/atlas/AtlasRankingPanel.vue | 4 | src/components/table/TableLayout.vue<br>src/views/atlas/common/AtlasModuleInfoPanel.vue<br>src/views/atlas/elments/components/RainfallRankingTable.vue | — |
|
|
94
|
+
| src/components/layout/Header.vue | 4 | src/components/layout/MainLayout.vue<br>src/components/layout/MainLayoutMap.vue<br>src/components/layout/MainLayoutNoMenu.vue | vue<br>vue-router<br>@element-plus/icons-vue<br>element-plus<br>motion-v<br>@/router<br>@/stores/access<br>./PersonalInfo.vue<br>@/stores/theme<br>@/stores/regionBoundary<br>@/components/common/index.vue<br>@/map/core/MapLibreMap |
|
|
95
|
+
| src/components/atlas/AtlasProcessChart.vue | 3 | src/components/echarts/EchartLayout.vue<br>src/components/map/StationLayerDetails.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | echarts<br>vue |
|
|
96
|
+
| src/components/atlas/AtlasProcessPanel.vue | 2 | src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | — |
|
|
97
|
+
| src/components/atlas/ProcessDataTable.vue | 2 | src/components/echarts/EchartLayout.vue<br>src/views/atlas/elments/components/RainfallProcessChart.vue | vue |
|
|
98
|
+
| src/components/common/index.vue | 2 | src/components/layout/Header.vue<br>src/views/DefenseMapLinkage.vue | vue<br>@element-plus/icons-vue<br>@/stores/access<br>@/assets/json/pcas-code.json<br>axios<br>@/stores/regionBoundary<br>@/stores/gisSelection |
|
|
99
|
+
| src/components/global/SvgIcon.vue | 2 | src/components/layout/SideMenuMap.vue<br>src/main.ts | vue |
|
|
100
|
+
| src/components/layout/RightPanel.vue | 2 | src/components/layout/TemplateLayout.vue<br>src/views/Blank.vue | vue<br>@/stores/ui<br>@/stores/theme<br>@/map/state |
|
|
101
|
+
| src/components/layout/SideMenu.vue | 2 | src/components/layout/ContentLayoutNomenu.vue<br>src/components/layout/ContentLayoutSystem.vue | vue<br>vue-router<br>motion-v<br>@element-plus/icons-vue<br>@/router<br>@/stores/access<br>@/stores/ui |
|
|
102
|
+
| src/components/map/LayerControl.vue | 2 | src/components/map/MapToolbar.vue<br>src/views/DefenseMapLinkage.vue | vue<br>@element-plus/icons-vue<br>./LayerTreeNode.vue<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/map/core/basemaps |
|
|
103
|
+
| src/components/map/PanoramaViewer.vue | 2 | src/components/map/MediaLayerDetails.vue<br>src/components/map/StationLayerDetails.vue | vue<br>element-plus<br>@photo-sphere-viewer/core<br>@photo-sphere-viewer/core/index.css |
|
|
104
|
+
| src/components/layout/AsyncRoutePage.vue | 1 | src/router/deferRoutePages.ts | vue<br>vue-router<br>@/router/useRoutePage |
|
|
105
|
+
| src/components/layout/ContentLayoutMap.vue | 1 | src/components/layout/MainLayoutMap.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenuMap.vue<br>./EmptyMapLayout.vue<br>./mapPageSelection |
|
|
106
|
+
| src/components/layout/ContentLayoutNomenu.vue | 1 | src/components/layout/MainLayoutNoMenu.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue |
|
|
107
|
+
| src/components/layout/ContentLayoutSystem.vue | 1 | src/components/layout/MainLayout.vue | vue<br>vue-router<br>@/router<br>@/stores/ui<br>./SideMenu.vue |
|
|
108
|
+
| src/components/layout/EmptyMapLayout.vue | 1 | src/components/layout/ContentLayoutMap.vue | ./TemplateLayout.vue |
|
|
109
|
+
| src/components/layout/MainLayout.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutSystem.vue |
|
|
110
|
+
| src/components/layout/MainLayoutMap.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutMap.vue<br>../map/index.vue |
|
|
111
|
+
| src/components/layout/MainLayoutNoMenu.vue | 1 | src/router/index.ts | vue<br>vue-router<br>@/router<br>./Header.vue<br>./ContentLayoutNomenu.vue |
|
|
112
|
+
| src/components/layout/PersonalInfo.vue | 1 | src/components/layout/Header.vue | vue<br>element-plus<br>@/stores/access |
|
|
113
|
+
| src/components/layout/RegionDrawDialog.vue | 1 | src/components/layout/UserRegionAccess.vue | vue<br>maplibre-gl<br>maplibre-gl/dist/maplibre-gl.css<br>terra-draw<br>terra-draw-maplibre-gl-adapter<br>element-plus<br>@/map/core/basemaps<br>@/stores/regionBoundary |
|
|
114
|
+
| src/components/layout/RouterViewLayout.vue | 1 | src/router/index.ts | vue |
|
|
115
|
+
| src/components/layout/SideMenuMap.vue | 1 | src/components/layout/ContentLayoutMap.vue | vue<br>vue-router<br>@element-plus/icons-vue<br>@/router<br>@/stores/access<br>@/stores/theme<br>./mapPageSelection |
|
|
116
|
+
| src/components/layout/UserRegionAccess.vue | 1 | src/views/datamaint/system/AccessManage.vue | vue<br>element-plus<br>./RegionDrawDialog.vue<br>@/utils/userRegions<br>@/assets/json/pcas-code.json<br>@/components/map/GisFileImport<br>@/stores/access |
|
|
117
|
+
| src/components/map/EngineeringDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/engineeringDetails<br>@/map/config/engineeringFields<br>@/utils/request |
|
|
118
|
+
| src/components/map/GateDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/gateDetails |
|
|
119
|
+
| src/components/map/index.vue | 1 | src/components/layout/MainLayoutMap.vue | ./MediaLayerDetails.vue<br>./StationLayerDetails.vue<br>./GateDetails.vue<br>./RubberDamDetails.vue<br>./ReservoirDetails.vue<br>./EngineeringDetails.vue<br>vue<br>vue-router<br>@/map/core/MapLibreMap<br>@/stores/mapLayers<br>@/stores/ui<br>@/map/pageContextMenu<br>@/map/mapContextMenu<br>maplibre-gl/dist/maplibre-gl.css |
|
|
120
|
+
| src/components/map/LayerTreeNode.vue | 1 | src/components/map/LayerControl.vue | vue<br>@element-plus/icons-vue<br>@/map/core/basemaps<br>@/stores/mapLayers |
|
|
121
|
+
| src/components/map/MapLegend.vue | 1 | src/components/layout/TemplateLayout.vue | vue<br>vue-router<br>@element-plus/icons-vue |
|
|
122
|
+
| src/components/map/MapOperationPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>element-plus<br>./MapOperationTools |
|
|
123
|
+
| src/components/map/MapToolbar.vue | 1 | src/components/layout/TemplateLayout.vue | vue<br>@element-plus/icons-vue<br>element-plus<br>./LayerControl.vue<br>./MapOperationPanel.vue<br>./ModuleOperationPanel.vue<br>./SpaceAnalysisPanel.vue<br>./MapOperationTools<br>./GisFileImport<br>@/map/core/MapLibreMap<br>@/map/core/basemaps<br>@/stores/mapLayers<br>@/stores/ui<br>@/stores/gisSelection |
|
|
124
|
+
| src/components/map/MediaLayerDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>./PanoramaViewer.vue<br>@/map/mediaLayerDetails |
|
|
125
|
+
| src/components/map/ModuleOperationPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>vue-router<br>@element-plus/icons-vue |
|
|
126
|
+
| src/components/map/ReservoirDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/utils/request<br>@/map/reservoirDetails |
|
|
127
|
+
| src/components/map/RubberDamDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>@/map/rubberDamDetails |
|
|
128
|
+
| src/components/map/SpaceAnalysisPanel.vue | 1 | src/components/map/MapToolbar.vue | vue<br>@/stores/gisSelection<br>@/stores/spaceAnalysis |
|
|
129
|
+
| src/components/map/StationLayerDetails.vue | 1 | src/components/map/index.vue | vue<br>element-plus<br>echarts<br>moment<br>./PanoramaViewer.vue<br>@/components/atlas/AtlasProcessChart.vue<br>@/map/stationLayerDetails<br>@/config/server<br>@/utils/request |
|
|
130
|
+
| src/components/status/wrf/wrfStatus.vue | 1 | src/components/status/wrf/index.vue | vue<br>moment<br>@/api/oneMap/status |
|
|
131
|
+
| src/components/status/wrfHydro/index.vue | 1 | src/views/meteo/glofas.vue | vue<br>./wrfHydroStatus.vue |
|
|
132
|
+
| src/components/status/wrfHydro/wrfHydroStatus.vue | 1 | src/components/status/wrfHydro/index.vue | vue<br>@vueuse/core<br>@/api/oneMap/status |
|
|
133
|
+
| src/components/common/TreeSelectPanel.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>element-plus<br>motion-v |
|
|
134
|
+
| src/components/layout/Toolbar.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | @/stores/ui<br>@/map/useMapBus |
|
|
135
|
+
| src/components/timeline/index.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>@/components/common/AppSelect.vue |
|
|
136
|
+
| src/components/titlebar/index.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | — |
|
|
137
|
+
| src/components/widgets/Legend.vue | 0 | 未发现直接引用，需检查间接 / 动态使用 | vue<br>vue-router |
|
package/docs/CSS-THEME.md
CHANGED
|
@@ -57,3 +57,8 @@ import 'sky-ui-kit/global.css'
|
|
|
57
57
|
## 示例代码组织
|
|
58
58
|
|
|
59
59
|
公共 CSS 只在项目 main.ts 引入一次。预览站的公共接入代码单独维护在 src/setup-examples.ts，各组件的查看代码只列组件 import、状态、事件与模板。查看代码中的接入链接指向公共配置；复制组件代码不会附带重复 CSS。已有 Element Plus CSS 引入时无需再添加。
|
|
60
|
+
# 项目 SVG 图标
|
|
61
|
+
|
|
62
|
+
全局缩放/主题融合以 GLOBAL-ADAPTATION.md 为准：原 App.vue 写根 --cp-vfit-scale，scoped-vfit 不重置它；保留原主题 store。不要在已消费 cp token 的组件外再增加第二套缩放。body 浮层核对根变量，局部变量需显式接入。
|
|
63
|
+
|
|
64
|
+
SvgIcon 样式仅作用于 scoped 的 .sky-svg-icon，不覆盖原生 ElIcon 或原项目 .svg-icon。默认继承 currentColor；数字 size 读取 --cp-font-1，缺失回退 1px；固定色 / 多色路径保持原配色。公共样式仍只在 main.ts 引入一次。
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# Element Plus 完整组件目录
|
|
2
|
+
|
|
3
|
+
基准版本：2.14.7。共 111 个主 / 子组件、4 个服务出口、3 个指令出口。另保留 11 个项目特色组件。
|
|
4
|
+
|
|
5
|
+
清单覆盖官方组件注册表及服务 / 指令，不包含内部工具函数。出口覆盖不代表所有组件的交互、独立示例和视觉状态均已验证。网站每项均提供导入和官方 API 索引，新增组合示例见 AI-GUIDE.md。
|
|
6
|
+
|
|
7
|
+
组件使用 Ui 前缀；滚动条例外，直接从 element-plus 使用 ElScrollbar，不提供库出口。项目组件保持原名。结构子组件应放在相应 Ui 父组件下；配置组件和无界面指令保留官方语义。UiLoading 提供 service / directive，不提供 install。
|
|
8
|
+
|
|
9
|
+
## 导航组件
|
|
10
|
+
|
|
11
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
12
|
+
|---|---|---|---|---|
|
|
13
|
+
| 固钉 | UiAffix | ElAffix | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/affix.html) |
|
|
14
|
+
| 回到顶部 | UiBacktop | ElBacktop | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/backtop.html) |
|
|
15
|
+
| 面包屑 | UiBreadcrumb | ElBreadcrumb | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/breadcrumb.html) |
|
|
16
|
+
| 面包屑项 | UiBreadcrumbItem | ElBreadcrumbItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/breadcrumb.html) |
|
|
17
|
+
| 下拉菜单 | UiDropdown | ElDropdown | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
|
|
18
|
+
| 下拉菜单项 | UiDropdownItem | ElDropdownItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
|
|
19
|
+
| 下拉菜单面板 | UiDropdownMenu | ElDropdownMenu | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dropdown.html) |
|
|
20
|
+
| 菜单 | UiMenu | ElMenu | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
|
|
21
|
+
| 菜单项 | UiMenuItem | ElMenuItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
|
|
22
|
+
| 菜单分组 | UiMenuItemGroup | ElMenuItemGroup | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
|
|
23
|
+
| 子菜单 | UiSubMenu | ElSubMenu | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/menu.html) |
|
|
24
|
+
| 页头 | UiPageHeader | ElPageHeader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/page-header.html) |
|
|
25
|
+
| 步骤条 | UiSteps | ElSteps | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/steps.html) |
|
|
26
|
+
| 步骤项 | UiStep | ElStep | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/steps.html) |
|
|
27
|
+
| 标签页 | UiTabs | ElTabs | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tabs.html) |
|
|
28
|
+
| 标签页面板 | UiTabPane | ElTabPane | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tabs.html) |
|
|
29
|
+
| 锚点 | UiAnchor | ElAnchor | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/anchor.html) |
|
|
30
|
+
| 锚点链接 | UiAnchorLink | ElAnchorLink | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/anchor.html) |
|
|
31
|
+
|
|
32
|
+
## 基础组件
|
|
33
|
+
|
|
34
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
35
|
+
|---|---|---|---|---|
|
|
36
|
+
| 图标 | UiIcon | ElIcon | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/icon.html) |
|
|
37
|
+
| 滚动条 | ElScrollbar | ElScrollbar | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/scrollbar.html) |
|
|
38
|
+
| 按钮 | UiButton | ElButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/button.html) |
|
|
39
|
+
| 按钮组 | UiButtonGroup | ElButtonGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/button.html) |
|
|
40
|
+
| 栅格行 | UiRow | ElRow | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/layout.html) |
|
|
41
|
+
| 栅格列 | UiCol | ElCol | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/layout.html) |
|
|
42
|
+
| 折叠动画 | UiCollapseTransition | ElCollapseTransition | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/transition.html) |
|
|
43
|
+
| 布局容器 | UiContainer | ElContainer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
|
|
44
|
+
| 侧栏 | UiAside | ElAside | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
|
|
45
|
+
| 底栏 | UiFooter | ElFooter | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
|
|
46
|
+
| 顶栏 | UiHeader | ElHeader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
|
|
47
|
+
| 主体 | UiMain | ElMain | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/container.html) |
|
|
48
|
+
| 分割线 | UiDivider | ElDivider | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/divider.html) |
|
|
49
|
+
| 链接 | UiLink | ElLink | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/link.html) |
|
|
50
|
+
| 间距 | UiSpace | ElSpace | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/space.html) |
|
|
51
|
+
| 文本 | UiText | ElText | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/text.html) |
|
|
52
|
+
|
|
53
|
+
## 反馈组件
|
|
54
|
+
|
|
55
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
56
|
+
|---|---|---|---|---|
|
|
57
|
+
| 警告提示 | UiAlert | ElAlert | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/alert.html) |
|
|
58
|
+
| 文字提示 | UiTooltip | ElTooltip | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tooltip.html) |
|
|
59
|
+
| 对话框 | UiDialog | ElDialog | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/dialog.html) |
|
|
60
|
+
| 抽屉 | UiDrawer | ElDrawer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/drawer.html) |
|
|
61
|
+
| 气泡确认 | UiPopconfirm | ElPopconfirm | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popconfirm.html) |
|
|
62
|
+
| 引导 | UiTour | ElTour | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tour.html) |
|
|
63
|
+
| 引导步骤 | UiTourStep | ElTourStep | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tour.html) |
|
|
64
|
+
| 气泡卡片 | UiPopover | ElPopover | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popover.html) |
|
|
65
|
+
| 消息提示 | UiMessage | ElMessage | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/message.html) |
|
|
66
|
+
| 消息确认 | UiMessageBox | ElMessageBox | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/message-box.html) |
|
|
67
|
+
| 通知 | UiNotification | ElNotification | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/notification.html) |
|
|
68
|
+
| 加载 | UiLoading | ElLoading | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/loading.html) |
|
|
69
|
+
| 加载指令 | vUiLoading | ElLoadingDirective | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/loading.html) |
|
|
70
|
+
|
|
71
|
+
## 表单组件
|
|
72
|
+
|
|
73
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
74
|
+
|---|---|---|---|---|
|
|
75
|
+
| 表单 | UiForm | ElForm | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/form.html) |
|
|
76
|
+
| 表单项 | UiFormItem | ElFormItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/form.html) |
|
|
77
|
+
| 输入框 | UiInput | ElInput | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input.html) |
|
|
78
|
+
| 自动补全 | UiAutocomplete | ElAutocomplete | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/autocomplete.html) |
|
|
79
|
+
| 时间选择器 | UiTimePicker | ElTimePicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/time-picker.html) |
|
|
80
|
+
| 选择器 | UiSelect | ElSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
|
|
81
|
+
| 选项 | UiOption | ElOption | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
|
|
82
|
+
| 选项组 | UiOptionGroup | ElOptionGroup | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select.html) |
|
|
83
|
+
| 复选框 | UiCheckbox | ElCheckbox | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
|
|
84
|
+
| 复选按钮 | UiCheckboxButton | ElCheckboxButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
|
|
85
|
+
| 复选框组 | UiCheckboxGroup | ElCheckboxGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/checkbox.html) |
|
|
86
|
+
| 单选框 | UiRadio | ElRadio | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
|
|
87
|
+
| 单选按钮 | UiRadioButton | ElRadioButton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
|
|
88
|
+
| 单选框组 | UiRadioGroup | ElRadioGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/radio.html) |
|
|
89
|
+
| 级联面板 | UiCascaderPanel | ElCascaderPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/cascader.html) |
|
|
90
|
+
| 级联选择器 | UiCascader | ElCascader | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/cascader.html) |
|
|
91
|
+
| 颜色面板 | UiColorPickerPanel | ElColorPickerPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/color-picker-panel.html) |
|
|
92
|
+
| 颜色选择器 | UiColorPicker | ElColorPicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/color-picker.html) |
|
|
93
|
+
| 日期面板 | UiDatePickerPanel | ElDatePickerPanel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/date-picker-panel.html) |
|
|
94
|
+
| 日期选择器 | UiDatePicker | ElDatePicker | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/date-picker.html) |
|
|
95
|
+
| 数字输入框 | UiInputNumber | ElInputNumber | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-number.html) |
|
|
96
|
+
| 标签输入框 | UiInputTag | ElInputTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-tag.html) |
|
|
97
|
+
| 验证码输入框 | UiInputOtp | ElInputOtp | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/input-otp.html) |
|
|
98
|
+
| 评分 | UiRate | ElRate | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/rate.html) |
|
|
99
|
+
| 虚拟选择器 | UiSelectV2 | ElSelectV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/select-v2.html) |
|
|
100
|
+
| 滑块 | UiSlider | ElSlider | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/slider.html) |
|
|
101
|
+
| 开关 | UiSwitch | ElSwitch | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/switch.html) |
|
|
102
|
+
| 时间下拉选择 | UiTimeSelect | ElTimeSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/time-select.html) |
|
|
103
|
+
| 穿梭框 | UiTransfer | ElTransfer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/transfer.html) |
|
|
104
|
+
| 树选择器 | UiTreeSelect | ElTreeSelect | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree-select.html) |
|
|
105
|
+
| 上传 | UiUpload | ElUpload | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/upload.html) |
|
|
106
|
+
| 提及 | UiMention | ElMention | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/mention.html) |
|
|
107
|
+
|
|
108
|
+
## 其他与配置
|
|
109
|
+
|
|
110
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
111
|
+
|---|---|---|---|---|
|
|
112
|
+
| 底层浮层 | UiPopper | ElPopper | 保留结构 / 无界面行为 | [官方文档 / 源码](https://github.com/element-plus/element-plus/tree/2.14.7/packages/components/popper) |
|
|
113
|
+
| 全局配置 | UiConfigProvider | ElConfigProvider | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/config-provider.html) |
|
|
114
|
+
| 水印 | UiWatermark | ElWatermark | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/watermark.html) |
|
|
115
|
+
| 分割面板 | UiSplitter | ElSplitter | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/splitter.html) |
|
|
116
|
+
| 分割区域 | UiSplitterPanel | ElSplitterPanel | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/splitter.html) |
|
|
117
|
+
| 无限滚动 | vUiInfiniteScroll | ElInfiniteScroll | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/infinite-scroll.html) |
|
|
118
|
+
| 气泡触发指令 | vUiPopover | ElPopoverDirective | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/popover.html) |
|
|
119
|
+
|
|
120
|
+
## 数据展示
|
|
121
|
+
|
|
122
|
+
| 名称 | 库出口 | 官方实现 | 方式 | API |
|
|
123
|
+
|---|---|---|---|---|
|
|
124
|
+
| 头像 | UiAvatar | ElAvatar | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/avatar.html) |
|
|
125
|
+
| 头像组 | UiAvatarGroup | ElAvatarGroup | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/avatar.html) |
|
|
126
|
+
| 徽标 | UiBadge | ElBadge | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/badge.html) |
|
|
127
|
+
| 标签 | UiTag | ElTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tag.html) |
|
|
128
|
+
| 日历 | UiCalendar | ElCalendar | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/calendar.html) |
|
|
129
|
+
| 卡片 | UiCard | ElCard | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/card.html) |
|
|
130
|
+
| 轮播 | UiCarousel | ElCarousel | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/carousel.html) |
|
|
131
|
+
| 轮播项 | UiCarouselItem | ElCarouselItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/carousel.html) |
|
|
132
|
+
| 可选标签 | UiCheckTag | ElCheckTag | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/check-tag.html) |
|
|
133
|
+
| 折叠面板 | UiCollapse | ElCollapse | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/collapse.html) |
|
|
134
|
+
| 折叠项 | UiCollapseItem | ElCollapseItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/collapse.html) |
|
|
135
|
+
| 统计数值 | UiStatistic | ElStatistic | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/statistic.html) |
|
|
136
|
+
| 倒计时 | UiCountdown | ElCountdown | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/statistic.html) |
|
|
137
|
+
| 描述列表 | UiDescriptions | ElDescriptions | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/descriptions.html) |
|
|
138
|
+
| 描述项 | UiDescriptionsItem | ElDescriptionsItem | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/descriptions.html) |
|
|
139
|
+
| 空状态 | UiEmpty | ElEmpty | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/empty.html) |
|
|
140
|
+
| 图片预览 | UiImageViewer | ElImageViewer | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/image.html) |
|
|
141
|
+
| 图片 | UiImage | ElImage | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/image.html) |
|
|
142
|
+
| 分页 | UiPagination | ElPagination | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/pagination.html) |
|
|
143
|
+
| 进度条 | UiProgress | ElProgress | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/progress.html) |
|
|
144
|
+
| 结果 | UiResult | ElResult | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/result.html) |
|
|
145
|
+
| 骨架屏 | UiSkeleton | ElSkeleton | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/skeleton.html) |
|
|
146
|
+
| 骨架元素 | UiSkeletonItem | ElSkeletonItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/skeleton.html) |
|
|
147
|
+
| 表格 | UiTable | ElTable | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table.html) |
|
|
148
|
+
| 表格列 | UiTableColumn | ElTableColumn | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table.html) |
|
|
149
|
+
| 虚拟表格 | UiTableV2 | ElTableV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table-v2.html) |
|
|
150
|
+
| 自动尺寸容器 | UiAutoResizer | ElAutoResizer | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/table-v2.html) |
|
|
151
|
+
| 时间线 | UiTimeline | ElTimeline | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/timeline.html) |
|
|
152
|
+
| 时间线项 | UiTimelineItem | ElTimelineItem | 保留结构 / 无界面行为 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/timeline.html) |
|
|
153
|
+
| 树 | UiTree | ElTree | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree.html) |
|
|
154
|
+
| 虚拟树 | UiTreeV2 | ElTreeV2 | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/tree-v2.html) |
|
|
155
|
+
| 分段控制器 | UiSegmented | ElSegmented | 主题封装 | [官方文档 / 源码](https://element-plus.org/zh-CN/component/segmented.html) |
|
|
156
|
+
|
|
157
|
+
## 维护
|
|
158
|
+
|
|
159
|
+
升级 Element Plus 后运行 `npm run components:sync`，审查新增组件、中文名称、分类、父子关系及最低依赖版本，再运行 `npm run docs:ai`。仅同步源码与文档，不构建或发布。
|