exploria-ui 2026.7.31 → 2026.8.1
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 +65 -166
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,212 +1,111 @@
|
|
|
1
1
|
# Exploria UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
《探索UI》是一套基于 Vue 3 的 UI 组件库，包含组件、指令、插件、工具四大模块，使用 TypeScript 编写，仅提供 ESM 具名导出，支持按需引入。
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 特性
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
- 基于 Vue 3 `<script setup>` + TypeScript，组件 Props / 事件均带类型
|
|
8
|
+
- 全部为具名导出，构建时可按需 tree-shaking
|
|
9
|
+
- 组件、指令、插件、工具四类能力，API 命名参考 Element Plus
|
|
10
|
+
- 内置 MCP Server，可被 AI IDE 直接读取组件源码与 API
|
|
11
|
+
|
|
12
|
+
## 环境要求
|
|
13
|
+
|
|
14
|
+
- `vue` `>= 3.5`
|
|
15
|
+
- `three` `>= 0.184.0`（peerDependency，仅在使用几何 / 3D 组件如 `ECube` 时需要）
|
|
16
|
+
- Node.js `>= 20`（开发、构建、本地预览时）
|
|
14
17
|
|
|
15
18
|
## 安装
|
|
16
19
|
|
|
17
20
|
```sh
|
|
18
21
|
pnpm add exploria-ui
|
|
22
|
+
# 若使用几何 / 3D 组件，请一并安装 three
|
|
23
|
+
pnpm add three
|
|
19
24
|
```
|
|
20
25
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
Exploria UI 仅支持 **ES 模块(ESM)** 按需导入。
|
|
26
|
+
> 也支持 `npm` / `yarn`，命令相应替换即可。
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
## 快速开始
|
|
26
29
|
|
|
27
|
-
```
|
|
30
|
+
```ts
|
|
31
|
+
// main.ts
|
|
28
32
|
import { createApp } from 'vue';
|
|
29
33
|
import App from './App.vue';
|
|
30
|
-
import { EButton
|
|
34
|
+
import { EButton } from 'exploria-ui';
|
|
31
35
|
import 'exploria-ui/dist/index.css';
|
|
32
36
|
|
|
33
37
|
const app = createApp(App);
|
|
34
|
-
app.
|
|
35
|
-
app.use(EInput);
|
|
38
|
+
app.component('EButton', EButton); // 全局注册；也可在业务组件内局部注册
|
|
36
39
|
app.mount('#app');
|
|
37
40
|
```
|
|
38
41
|
|
|
39
|
-
|
|
42
|
+
```vue
|
|
43
|
+
<!-- App.vue -->
|
|
44
|
+
<template>
|
|
45
|
+
<EButton type="primary">按钮</EButton>
|
|
46
|
+
</template>
|
|
47
|
+
```
|
|
40
48
|
|
|
41
|
-
|
|
42
|
-
import { createApp } from 'vue';
|
|
43
|
-
import App from './App.vue';
|
|
44
|
-
import { ESvgSpriteBuilder } from 'exploria-ui/plugins';
|
|
49
|
+
样式需单独引入 `exploria-ui/dist/index.css`（当前为全量样式，未拆分到单组件）。
|
|
45
50
|
|
|
46
|
-
|
|
47
|
-
app.use(ESvgSpriteBuilder, {
|
|
48
|
-
/* 配置选项 */
|
|
49
|
-
});
|
|
50
|
-
app.mount('#app');
|
|
51
|
-
```
|
|
51
|
+
## 按需引入
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
所有导出均为具名导出，未使用的模块不会被打进产物：
|
|
54
54
|
|
|
55
|
-
```
|
|
56
|
-
import {
|
|
57
|
-
|
|
55
|
+
```ts
|
|
56
|
+
import { EButton, EInput, ETable } from 'exploria-ui'; // 组件
|
|
57
|
+
import { EDrag, ESizeOb, ESlideIn } from 'exploria-ui/directives'; // 指令
|
|
58
|
+
import { ESvgSpriteBuilder } from 'exploria-ui/plugins'; // 插件
|
|
59
|
+
import { ETimeUtil, EJSONUtil } from 'exploria-ui/utils'; // 工具
|
|
58
60
|
```
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
指令与插件通常这样注册：
|
|
61
63
|
|
|
62
|
-
```
|
|
64
|
+
```ts
|
|
63
65
|
import { createApp } from 'vue';
|
|
64
|
-
import App from './App.vue';
|
|
65
66
|
import { EDrag } from 'exploria-ui/directives';
|
|
67
|
+
import { ESvgSpriteBuilder } from 'exploria-ui/plugins';
|
|
66
68
|
|
|
67
|
-
const app = createApp(App);
|
|
68
69
|
app.directive('drag', EDrag);
|
|
69
|
-
app.
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
## 核心架构
|
|
73
|
-
|
|
74
|
-
| 模块 | 说明 | 示例 |
|
|
75
|
-
| ------ | ---------------------- | --------------------------------------- |
|
|
76
|
-
| 组件集 | UI 组件，按功能分 8 类 | EButton、EInput、ETable |
|
|
77
|
-
| 插件集 | 可扩展功能模块 | ESvgSpriteBuilder、EPreloadImageBuilder |
|
|
78
|
-
| 工具集 | 实用工具函数 | EDomUtil、EAnimateCSSUtil、EEventBus |
|
|
79
|
-
| 指令集 | Vue 自定义指令 | EDrag、ESizeOb、ESlideIn |
|
|
80
|
-
|
|
81
|
-
### 组件分类
|
|
82
|
-
|
|
83
|
-
| 分类 | 说明 |
|
|
84
|
-
| ---------- | --------------------------------------- |
|
|
85
|
-
| basic | 基础组件：按钮、图标、下划线等 |
|
|
86
|
-
| form | 表单组件：输入框、选择器、复选框等 |
|
|
87
|
-
| data | 数据组件：表格、列表、轮播图等 |
|
|
88
|
-
| feedback | 反馈组件：对话框、消息提示、通知等 |
|
|
89
|
-
| layout | 布局组件：容器、分割线、滚动条等 |
|
|
90
|
-
| navigation | 导航组件：标签页、下拉菜单等 |
|
|
91
|
-
| advanced | 高级组件：虚拟列表、水印、滚动视差等 |
|
|
92
|
-
| geometry | 几何组件：立方体等 3D 可视化 |
|
|
93
|
-
| hooks | 组合式函数：useLiquidGlass、usePosition |
|
|
94
|
-
|
|
95
|
-
## MCP Server 源码读取
|
|
96
|
-
|
|
97
|
-
Exploria UI 内置 MCP Server（`exploria-ui-mcp-server`），AI IDE（如 Trae）可通过 Streamable HTTP 协议直接读取组件库源码，获取组件用法、API 和实现细节。
|
|
98
|
-
|
|
99
|
-
### 分环境读取机制
|
|
100
|
-
|
|
101
|
-
MCP Server 根据运行环境自动选择源码读取路径：
|
|
102
|
-
|
|
103
|
-
| 环境 | 源码目录 | 说明 |
|
|
104
|
-
| -------- | -------------------------- | ---------------------------------------- |
|
|
105
|
-
| 开发环境 | `packages/exploria-ui/src` | 直接读取 Monorepo 中的源码，修改即时生效 |
|
|
106
|
-
| 生产环境 | `mcp-server/code/` | 读取打包时复制的源码副本，独立部署 |
|
|
107
|
-
|
|
108
|
-
**判断逻辑**：若 `NODE_ENV=development` 或开发路径存在，则使用开发路径；否则回退到生产路径。
|
|
109
|
-
|
|
110
|
-
### 开发环境
|
|
111
|
-
|
|
112
|
-
```sh
|
|
113
|
-
cd mcp-server
|
|
114
|
-
pnpm dev
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
启动后直接读取 `packages/exploria-ui/src` 目录，源码修改后热重载即时生效。
|
|
118
|
-
|
|
119
|
-
### 生产环境（打包）
|
|
120
|
-
|
|
121
|
-
```sh
|
|
122
|
-
cd mcp-server
|
|
123
|
-
pnpm build
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
打包流程：
|
|
127
|
-
|
|
128
|
-
1. **复制源码**：自动将 `packages/exploria-ui/src` 复制到 `mcp-server/code/`
|
|
129
|
-
2. **构建服务**：Vite 将 `src/index.ts` 编译为 `dist/index.js`
|
|
130
|
-
3. **发布产物**：`dist/index.js` + `code/` + `package.json` + `README.md`
|
|
131
|
-
|
|
132
|
-
启动生产服务：
|
|
133
|
-
|
|
134
|
-
```sh
|
|
135
|
-
pnpm start
|
|
70
|
+
app.use(ESvgSpriteBuilder, { /* 配置项 */ });
|
|
136
71
|
```
|
|
137
72
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
| 工具 | 说明 |
|
|
141
|
-
| ----------------- | ---------------------------------------- |
|
|
142
|
-
| `get_full_list` | 获取所有组件、指令、插件和工具的完整列表 |
|
|
143
|
-
| `get_source_code` | 获取指定项目的完整源码（包含本地依赖） |
|
|
144
|
-
|
|
145
|
-
### 端点
|
|
146
|
-
|
|
147
|
-
| 端点 | 方法 | 说明 |
|
|
148
|
-
| --------- | ---- | -------------------- |
|
|
149
|
-
| `/mcp` | POST | JSON-RPC 请求/响应 |
|
|
150
|
-
| `/mcp` | GET | SSE 流（服务端推送） |
|
|
151
|
-
| `/health` | GET | 健康检查 |
|
|
73
|
+
## 模块与组件总览
|
|
152
74
|
|
|
153
|
-
|
|
75
|
+
完整的属性、事件、插槽与示例见在线文档：<http://exploria-ui.zzrkyd.cn/>
|
|
154
76
|
|
|
155
|
-
###
|
|
77
|
+
### 组件（按分类）
|
|
156
78
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
│ ├── navigation/ # 导航组件
|
|
169
|
-
│ ├── style/ # 样式系统
|
|
170
|
-
│ └── types/ # 类型定义
|
|
171
|
-
├── directives/ # 指令集
|
|
172
|
-
├── plugins/ # 插件集
|
|
173
|
-
└── utils/ # 工具集
|
|
174
|
-
```
|
|
79
|
+
| 分类 | 组件 |
|
|
80
|
+
| --- | --- |
|
|
81
|
+
| 基础 basic | EAvatar · EBadge · EButton · ECard · ESvgIcon · ETypeUnit · EUnderLine |
|
|
82
|
+
| 表单 form | ECheckbox · EColorPicker · EConditionGroup · EFileSelector · EForm / EFormItem · EInput · ERadio · ESelect · ESlider · ETimePicker · EUploadAvatar |
|
|
83
|
+
| 数据 data | ECalendar · ECarousel · ECodeCollapse · ECollapse · EImage · EList · EMediaViewer · EProgress · ERollingPagination · ESkeleton · ESteps · ETable · ETimeline |
|
|
84
|
+
| 反馈 feedback | EDialog · EDrawer · EMessage · EMessageBox · ENotification · EPopover · ETooltip |
|
|
85
|
+
| 布局 layout | EContainerWithScrollbar · EDivider · EScrollbar · EScrollX |
|
|
86
|
+
| 导航 navigation | EDropdown · ETabs |
|
|
87
|
+
| 高级 advanced | EParallaxScrolling · ERollingFollow · EVirtualList · EWatermark |
|
|
88
|
+
| 几何 geometry | ECube |
|
|
89
|
+
| 钩子 hooks | useLiquidGlass · usePosition |
|
|
175
90
|
|
|
176
|
-
###
|
|
91
|
+
### 指令 / 插件 / 工具
|
|
177
92
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
├── directives/ # 指令 ES 模块 + 类型声明
|
|
182
|
-
├── plugins/ # 插件 ES 模块 + 类型声明
|
|
183
|
-
├── utils/ # 工具 ES 模块 + 类型声明
|
|
184
|
-
└── index.css # 主样式文件
|
|
185
|
-
```
|
|
93
|
+
- 指令：`v-edrag`（拖拽）、`v-esize-ob`（尺寸观察）、`v-eslide-in`（视口滑入动画）
|
|
94
|
+
- 插件：`ESvgSpriteBuilder`（SVG 精灵图构建）、`EPreloadImageBuilder`（图片预加载）、`ESvgPolyfill`（SVG 兼容）
|
|
95
|
+
- 工具：EDomUtil · EAnimateCSSUtil · EEchartsUtil · EEventBus · ELocalStorageUtil · ETimeUtil · EUUIDUtil · EImageUtil · EThreeUtil · EClipboardUtil · EJSONUtil · EMediaQueryUtil · EStringUtil
|
|
186
96
|
|
|
187
|
-
##
|
|
97
|
+
## MCP 源码读取
|
|
188
98
|
|
|
189
|
-
-
|
|
190
|
-
- **构建工具**：Vite
|
|
191
|
-
- **开发语言**：TypeScript
|
|
192
|
-
- **样式方案**：SCSS + Animate.css
|
|
193
|
-
- **工具链**：OXC
|
|
99
|
+
本库内置 MCP Server（`exploria-ui-mcp-server`），AI IDE 可通过 HTTP 直接读取组件源码与 API，便于智能补全与代码生成。配置与端点说明见在线文档（搜索 "MCP"）。
|
|
194
100
|
|
|
195
101
|
## 浏览器支持
|
|
196
102
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
| Firefox | 88+ |
|
|
201
|
-
| Safari | 15+ |
|
|
202
|
-
| Edge | 90+ |
|
|
203
|
-
|
|
204
|
-
## 许可证
|
|
205
|
-
|
|
206
|
-
[MIT License](LICENSE)
|
|
103
|
+
| Chrome | Firefox | Safari | Edge |
|
|
104
|
+
| :----: | :-----: | :----: | :--: |
|
|
105
|
+
| 90+ | 88+ | 15+ | 90+ |
|
|
207
106
|
|
|
208
|
-
##
|
|
107
|
+
## 链接
|
|
209
108
|
|
|
210
|
-
-
|
|
211
|
-
-
|
|
212
|
-
-
|
|
109
|
+
- 在线文档：<http://exploria-ui.zzrkyd.cn/>
|
|
110
|
+
- 源码仓库：<https://gitee.com/exploria-team/exploria-ui-document>
|
|
111
|
+
- 许可证：MIT
|