sky-ui-kit 0.1.1 → 0.1.3
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 +3461 -606
- package/dist/components/AppSelect.vue.d.ts +1 -1
- package/dist/components/MapLayerControl.vue.d.ts +38 -0
- package/dist/components/MapSideMenu.vue.d.ts +10 -0
- package/dist/components/MapTimeline.vue.d.ts +1 -1
- package/dist/components/MapTools.vue.d.ts +7 -1
- package/dist/components/MetricCard.vue.d.ts +25 -0
- package/dist/components/ProcessChart.vue.d.ts +24 -0
- package/dist/components/SvgIcon.vue.d.ts +15 -0
- package/dist/components/TreeSelectPanel.vue.d.ts +1 -1
- package/dist/components/WorkbenchPanel.vue.d.ts +20 -0
- package/dist/components/WorkbenchShell.vue.d.ts +18 -0
- package/dist/components/element-plus.d.ts +87 -333
- package/dist/components/icon-registry.d.ts +2 -0
- package/dist/components/index.d.ts +200 -6
- package/dist/components/project-icons.d.ts +1646 -0
- package/dist/components.js +4628 -1018
- package/dist/style.css +1 -1
- package/docs/ADAPTATION.md +81 -0
- package/docs/AI-CHANGELOG.md +191 -0
- package/docs/AI-GUIDE.md +2786 -1
- package/docs/COMPONENT-API.md +689 -89
- package/docs/COMPONENT-GUIDE.md +163 -0
- package/docs/COMPONENT-INVENTORY.md +60 -0
- package/docs/COMPONENT-LIBRARY.md +3 -1
- package/docs/COMPONENT-USAGE.md +137 -0
- package/docs/CONSUMERS.md +59 -0
- package/docs/CSS-THEME.md +53 -0
- package/docs/ELEMENT-PLUS-COVERAGE.md +159 -0
- package/docs/GLOBAL-ADAPTATION.md +38 -0
- package/docs/INTEGRATION.md +70 -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 +4426 -309
- package/llms.txt +9 -1
- package/package.json +84 -69
|
@@ -0,0 +1,163 @@
|
|
|
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)。独立示例与视觉状态仍需逐项补充和验证。
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
MapSideMenu 支持 multiple 与 v-model:active-keys 多选，change 返回完整选中数组；select 表示点击项，不代表始终为新增选择。
|
|
@@ -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 |
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# 一体机组件库接入约定
|
|
2
|
+
|
|
3
|
+
用户要求：一体机 Web 的通用组件全部使用 sky-ui-kit，缺失能力先补充库，再由应用消费。
|
|
4
|
+
|
|
5
|
+
消费项目：D:/Work/01-项目code/一体化平台/一体机项目。库源码：D:/sky-ui-kit。参考业务平台只读。
|
|
6
|
+
|
|
7
|
+
新增 WorkbenchShell、WorkbenchPanel、MetricCard、ProcessChart；MapTools 支持 items 自定义工具。ProcessChart 由应用注入 ECharts engine，库不耦合业务 API。基础表单、按钮、导航、表格、卡片使用库公开出口。地图引擎、业务查询、数据快照留在应用。
|
|
8
|
+
|
|
9
|
+
CSS 入口按顺序仅导入一次 Element Plus CSS 和 sky-ui-kit/style.css。暗色使用 html.theme-dark。工作台样式隔离在 .sky-workbench 内。
|
|
10
|
+
|
|
11
|
+
本次使用 0.1.3-dev.0 本地开发包，未发布 npm。npm 正式版本仍为 0.1.2。后续修改必须同步 AI 文档，构建、打包后更新应用 vendor 包及锁文件。不要提交、推送或发布，除非用户明确要求。
|
|
12
|
+
|
|
13
|
+
其他对话进入上述目录时应读取 AGENTS.md 和本文件；这是磁盘上的共享约定，不代表自动向其他聊天发送消息。
|
|
14
|
+
|
|
15
|
+
验证：库完整类型检查、包构建、应用 ui:check 与生产构建通过。浏览器验证 RID 563666 返回流量过程，深浅色组件切换正常，数据卡片可显示。构建存在大体积 chunk 提示，后续可继续拆分。
|
|
16
|
+
|
|
17
|
+
## 2026-10-13：顶部菜单修复（0.1.3-dev.1）
|
|
18
|
+
|
|
19
|
+
删除工作台残留的 primary-nav 样式，选中效果由 ProjectMenu 统一负责。顶部菜单按内容宽度居中，不再拉满或撑满头部高度；横向菜单不换行，仅允许横向滚动并隐藏滚动条，保留滚轮、触摸和键盘操作。应用升级本地开发包，未发布 npm。
|
|
20
|
+
|
|
21
|
+
## 2026-10-13：左侧胶囊布局（0.1.3-dev.2）
|
|
22
|
+
|
|
23
|
+
工作台左侧采用留白悬浮圆角侧栏，内部菜单使用胶囊圆角，移除选中项侧边竖线和嵌套菜单外框。数据范围卡片统一圆角。样式限定 sky-workbench，不改变独立 ProjectMenu。更新本地消费包，未发布 npm。
|
|
24
|
+
|
|
25
|
+
## 2026-10-13：地图布局（0.1.3-dev.3）
|
|
26
|
+
|
|
27
|
+
一体机应用彻底移除左侧工作台、数据范围及侧栏开关，导航由顶部菜单提供。WorkbenchShell collapsed=true 使用单列布局，地图占满导航下方；指标、列表、工具和过程图保持悬浮。修复 collapsed 根节点选择器，取消地图定位的侧栏留白。该布局替代此前胶囊侧栏方案。
|
|
28
|
+
|
|
29
|
+
## 地图左侧胶囊导航（0.1.3-dev.4）
|
|
30
|
+
|
|
31
|
+
移除顶部横向菜单，使用 ProjectMenu 在地图左侧悬浮展示五个胶囊入口；不占侧栏列、不恢复数据范围与终端信息。工作台提供 map-capsule-menu 样式变体。
|
|
32
|
+
|
|
33
|
+
## 透明地图顶部栏（0.1.3-dev.5）
|
|
34
|
+
|
|
35
|
+
地图布局下头部绝对定位悬浮，无背景、边框或阴影；地图延伸至页面顶部。业务标题、指标、列表保留顶部避让。独立带侧栏布局不受影响。
|
|
36
|
+
|
|
37
|
+
## 地图排版统一（0.1.3-dev.6）
|
|
38
|
+
|
|
39
|
+
左侧标题与胶囊导航对齐，去除重复面包屑及介绍；四项指标合为紧凑统计栏。右侧与过程面板使用实底、统一圆角和留白，图例固定左下。过程图初始隐藏，查询站点或预报后打开。
|
|
40
|
+
|
|
41
|
+
## 顶部可读性与地图穿透（0.1.3-dev.7）
|
|
42
|
+
|
|
43
|
+
品牌和操作按钮分组使用实底胶囊，顶部整条容器 pointer-events:none，仅品牌及操作区恢复 auto。空白处拖拽、滚轮交给地图；去掉冗余本地应用文字和分隔线。
|
|
44
|
+
|
|
45
|
+
## 使用正式地图胶囊菜单（0.1.3-dev.8）
|
|
46
|
+
|
|
47
|
+
一体机左侧改用已有 MapSideMenu，保留搜索、图标模式、分组折叠及选中样式。替代此前 ProjectMenu 的自定义胶囊变体。工作台只提供定位，不另写菜单皮肤。
|
|
48
|
+
|
|
49
|
+
## 一级地图胶囊菜单（0.1.3-dev.9）
|
|
50
|
+
|
|
51
|
+
MapSideMenu 新增 flat:boolean，默认 false 保持分组模式。flat=true 隐藏父节点，将各项显示为一级胶囊，去除缩进及连线。一体机使用 flat=true 展示五个主菜单。
|
|
52
|
+
|
|
53
|
+
## 图层控制封装（0.1.3-dev.10）
|
|
54
|
+
|
|
55
|
+
MapLayerControl 参考平台 LayerControl/LayerTreeNode，提供底图选择、注记、树分组、搜索、显隐、拖拽排序、透明度、定位与可移除图层事件。数据及地图操作由消费方提供，未绑定平台 Pinia 或假服务。
|
|
56
|
+
|
|
57
|
+
## 地图胶囊选中修复（0.1.3-dev.11）
|
|
58
|
+
|
|
59
|
+
flat 模式按钮此前错误使用 child 类而内部图标、文字使用 parent 类，导致 active 样式不匹配。统一按钮及内容层级类，保留现有单选、多选及事件逻辑。
|
package/docs/CSS-THEME.md
CHANGED
|
@@ -57,3 +57,56 @@ 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 引入一次。
|
|
65
|
+
|
|
66
|
+
## 2026-10-13：一体机本地开发接入
|
|
67
|
+
|
|
68
|
+
新增四个工作台组件和 MapTools.items。工作台 CSS 在 .sky-workbench 下隔离，使用库主题变量；应用消费本地 0.1.3-dev.0，未发布。详情见 [消费项目记录](CONSUMERS.md)。
|
|
69
|
+
|
|
70
|
+
## 2026-10-13：顶部菜单修复（0.1.3-dev.1）
|
|
71
|
+
|
|
72
|
+
删除工作台残留的 primary-nav 样式，选中效果由 ProjectMenu 统一负责。顶部菜单按内容宽度居中，不再拉满或撑满头部高度；横向菜单不换行，仅允许横向滚动并隐藏滚动条，保留滚轮、触摸和键盘操作。应用升级本地开发包，未发布 npm。
|
|
73
|
+
|
|
74
|
+
## 2026-10-13：左侧胶囊布局（0.1.3-dev.2）
|
|
75
|
+
|
|
76
|
+
工作台左侧采用留白悬浮圆角侧栏，内部菜单使用胶囊圆角，移除选中项侧边竖线和嵌套菜单外框。数据范围卡片统一圆角。样式限定 sky-workbench，不改变独立 ProjectMenu。更新本地消费包，未发布 npm。
|
|
77
|
+
|
|
78
|
+
## 2026-10-13：地图布局（0.1.3-dev.3）
|
|
79
|
+
|
|
80
|
+
一体机应用彻底移除左侧工作台、数据范围及侧栏开关，导航由顶部菜单提供。WorkbenchShell collapsed=true 使用单列布局，地图占满导航下方；指标、列表、工具和过程图保持悬浮。修复 collapsed 根节点选择器，取消地图定位的侧栏留白。该布局替代此前胶囊侧栏方案。
|
|
81
|
+
|
|
82
|
+
## 地图左侧胶囊导航（0.1.3-dev.4）
|
|
83
|
+
|
|
84
|
+
移除顶部横向菜单，使用 ProjectMenu 在地图左侧悬浮展示五个胶囊入口；不占侧栏列、不恢复数据范围与终端信息。工作台提供 map-capsule-menu 样式变体。
|
|
85
|
+
|
|
86
|
+
## 透明地图顶部栏（0.1.3-dev.5）
|
|
87
|
+
|
|
88
|
+
地图布局下头部绝对定位悬浮，无背景、边框或阴影；地图延伸至页面顶部。业务标题、指标、列表保留顶部避让。独立带侧栏布局不受影响。
|
|
89
|
+
|
|
90
|
+
## 地图排版统一（0.1.3-dev.6）
|
|
91
|
+
|
|
92
|
+
左侧标题与胶囊导航对齐，去除重复面包屑及介绍；四项指标合为紧凑统计栏。右侧与过程面板使用实底、统一圆角和留白，图例固定左下。过程图初始隐藏，查询站点或预报后打开。
|
|
93
|
+
|
|
94
|
+
## 顶部可读性与地图穿透（0.1.3-dev.7）
|
|
95
|
+
|
|
96
|
+
品牌和操作按钮分组使用实底胶囊，顶部整条容器 pointer-events:none，仅品牌及操作区恢复 auto。空白处拖拽、滚轮交给地图；去掉冗余本地应用文字和分隔线。
|
|
97
|
+
|
|
98
|
+
## 使用正式地图胶囊菜单（0.1.3-dev.8）
|
|
99
|
+
|
|
100
|
+
一体机左侧改用已有 MapSideMenu，保留搜索、图标模式、分组折叠及选中样式。替代此前 ProjectMenu 的自定义胶囊变体。工作台只提供定位，不另写菜单皮肤。
|
|
101
|
+
|
|
102
|
+
## 一级地图胶囊菜单（0.1.3-dev.9）
|
|
103
|
+
|
|
104
|
+
MapSideMenu 新增 flat:boolean，默认 false 保持分组模式。flat=true 隐藏父节点，将各项显示为一级胶囊，去除缩进及连线。一体机使用 flat=true 展示五个主菜单。
|
|
105
|
+
|
|
106
|
+
## 图层控制封装（0.1.3-dev.10）
|
|
107
|
+
|
|
108
|
+
MapLayerControl 参考平台 LayerControl/LayerTreeNode，提供底图选择、注记、树分组、搜索、显隐、拖拽排序、透明度、定位与可移除图层事件。数据及地图操作由消费方提供，未绑定平台 Pinia 或假服务。
|
|
109
|
+
|
|
110
|
+
## 地图胶囊选中修复（0.1.3-dev.11）
|
|
111
|
+
|
|
112
|
+
flat 模式按钮此前错误使用 child 类而内部图标、文字使用 parent 类，导致 active 样式不匹配。统一按钮及内容层级类，保留现有单选、多选及事件逻辑。
|