# Exploria UI Document
**Repository Path**: exploria-team/exploria-ui-document
## Basic Information
- **Project Name**: Exploria UI Document
- **Description**: Exploria UI Document 项目不仅展示了 Exploria UI 的所有能力，还包含前端的一些常用的或高级的功能。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: http://exploria-ui.zzrkyd.cn/
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-14
- **Last Updated**: 2026-10-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Exploria UI
**《探索UI》— 基于 Vue 3 的 UI 组件库 Monorepo**
[](https://vuejs.org/)
[](https://www.typescriptlang.org/)
[](https://vitejs.dev/)
[](LICENSE)
[组件总览](#组件总览) · [快速开始](#快速开始) · [本地开发](#本地开发) · [发布组件库](#发布组件库) · [在线文档](http://exploria-ui.zzrkyd.cn/)
---
## 技术栈
- **框架**：Vue 3.5+
- **构建工具**：Vite 8
- **开发语言**：TypeScript 5.9
- **样式方案**：SCSS + Animate.css
- **工具链**：OXC（Rust）
## 特性
- 组件、指令、插件、工具四大模块
- 全量 TypeScript 类型，API 命名参考 Element Plus
- ESM 具名导出，按需引入，支持 tree-shaking
- 内置 MCP Server，AI IDE 可直接读取组件源码
---
## 组件总览
> 完整属性、事件、插槽与示例见在线文档：
### 基础组件
| 组件 | 说明 |
| ------------ | -------- |
| `EAvatar` | 头像 |
| `EBadge` | 徽标 |
| `EButton` | 按钮 |
| `ECard` | 卡片 |
| `ESvgIcon` | SVG 图标 |
| `ETypeUnit` | 排版单元 |
| `EUnderLine` | 下划线 |
### 数据展示
| 组件 | 说明 |
| -------------------- | ---------- |
| `ECalendar` | 日历 |
| `ECarousel` | 轮播 |
| `EClipWindow` | 裁剪窗口 |
| `ECodeCollapse` | 代码折叠 |
| `ECollapse` | 折叠面板 |
| `EImage` | 图片 |
| `EList` | 列表 |
| `EMediaViewer` | 媒体查看器 |
| `EProgress` | 进度条 |
| `ERollingPagination` | 滚动分页 |
| `ESkeleton` | 骨架屏 |
| `ESlidingWindow` | 滑动窗口 |
| `ESteps` | 步骤条 |
| `ETable` | 表格 |
| `ETimeline` | 时间线 |
### 表单组件
| 组件 | 说明 |
| --------------------- | ------------- |
| `ECheckbox` | 复选框 |
| `EColorPicker` | 颜色选择器 |
| `EConditionGroup` | 条件组 |
| `EFileSelector` | 文件选择器 |
| `EForm` / `EFormItem` | 表单 / 表单项 |
| `EInput` | 输入框 |
| `ERadio` | 单选框 |
| `ESelect` | 选择器 |
| `ESlider` | 滑块 |
| `ETimePicker` | 时间选择 |
| `EUploadAvatar` | 头像上传 |
### 反馈组件
| 组件 | 说明 |
| --------------- | -------- |
| `EDialog` | 对话框 |
| `EDrawer` | 抽屉 |
| `EMessage` | 消息提示 |
| `EMessageBox` | 消息弹框 |
| `ENotification` | 通知 |
| `EPopover` | 弹出层 |
| `ETooltip` | 工具提示 |
### 布局 · 导航 · 高级
| 分类 | 组件 |
| -------- | ----------------------------------------------------------------------- |
| **布局** | `EContainerWithScrollbar` · `EDivider` · `EScrollbar` · `EScrollX` |
| **导航** | `EDropdown` · `ETabs` |
| **高级** | `EParallaxScrolling` · `ERollingFollow` · `EVirtualList` · `EWatermark` |
| **几何** | `ECube` |
| **钩子** | `useLiquidGlass` · `usePosition` |
---
## 插件 · 工具 · 指令
### 插件
| 插件 | 说明 |
| ---------------------- | ----------------------------- |
| `ESvgSpriteBuilder` | 自动构建 SVG 精灵图 |
| `EPreloadImageBuilder` | 图片资源预加载 |
| `ESvgPolyfill` | SVG 跨浏览器兼容修复 |
### 工具集
| 工具 | 说明 |
| ------------------- | ---------------------- |
| `EDomUtil` | DOM 操作封装 |
| `EAnimateCSSUtil` | Animate.css 动画封装 |
| `EEchartsUtil` | ECharts 图表封装 |
| `EEventBus` | 全局事件管理 |
| `ELocalStorageUtil` | 增强 localStorage 操作 |
| `ETimeUtil` | 日期时间格式化与计算 |
| `EUUIDUtil` | 唯一标识符生成 |
| `EImageUtil` | 图片处理与优化 |
| `EThreeUtil` | 3D 渲染工具 |
| `EClipboardUtil` | 剪贴板操作 |
| `EJSONUtil` | JSON 处理 |
| `EMediaQueryUtil` | 媒体查询响应式 |
| `EStringUtil` | 字符串处理 |
### 指令
| 指令 | 说明 |
| ------------- | ------------ |
| `v-edrag` | 元素拖拽 |
| `v-esize-ob` | 元素尺寸观察 |
| `v-eslide-in` | 视口滑入动画 |
---
## 快速开始
### 安装
```bash
pnpm add exploria-ui
# 如使用几何 / 3D 组件
pnpm add three
```
### 使用
```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { EButton } from 'exploria-ui';
import 'exploria-ui/dist/index.css';
const app = createApp(App);
app.component('EButton', EButton); // 全局注册；也可在组件内局部注册
app.mount('#app');
```
```vue
按钮
```
### 按需引入
```ts
import { EButton, EInput, ETable } from 'exploria-ui';
import { EDrag, ESizeOb } from 'exploria-ui/directives';
import { ESvgSpriteBuilder } from 'exploria-ui/plugins';
import { ETimeUtil, EJSONUtil } from 'exploria-ui/utils';
```
---
## 本地开发
### 前置要求
- Node.js >= 20.x
- pnpm >= 10.x
### 常用命令
```bash
pnpm install # 安装依赖
pnpm run dev # 开发模式 → http://localhost:5173
pnpm run build # 生产构建
pnpm run lint # OXC 代码检查
pnpm run format # OXC 代码格式化
pnpm test # 运行测试
```
### 组件库开发
```bash
cd packages/exploria-ui
pnpm run build:watch # 监听模式构建
pnpm run type-check # 类型检查
```
---
## 发布组件库
本项目采用 **Git Tag 触发 CI/CD 自动发布**，无需手动登录 NPM 或执行 publish 命令。
### 版本号规则
采用 CalVer（日历版本）格式：`YYYY.M.PATCH`
- `YYYY`：年份（如 `2026`）
- `M`：月份（如 `8`，不补零）
- `PATCH`：当月第几次发布（从 `1` 开始递增）
示例：`2026.8.1`、`2026.8.2`、`2026.9.1`
### 日常开发（不发布）
正常提交代码即可，Jenkins 自动构建并部署文档站和 MCP Server，**不会发布到 NPM**：
```bash
git add .
git commit -m "描述"
git push origin master
```
### 发布新版本到 NPM
确认代码已 push 且 Jenkins 构建通过后，打 tag 并推送：
```bash
# 格式：v + 版本号
git tag v2026.8.2
git push origin v2026.8.2
```
Jenkins 检测到 tag push 后，在正常构建部署之外，**自动执行 NPM 发布**：
1. 从 tag 名提取版本号（去掉 `v` 前缀）
2. 自动更新 `packages/exploria-ui/package.json` 的 version
3. 注入 NPM Access Token，执行 `pnpm publish --access public`
4. 发送构建结果邮件通知
> 发布前确认版本号未在 NPM 上存在，否则 `pnpm publish` 会报 403 导致构建失败。
> CI/CD 配置详见 [`cicd/README.md`](cicd/README.md)，NPM 令牌申请见该文档「凭据管理」章节。
---
## MCP 源码读取
本库内置 MCP Server（`exploria-ui-mcp-server`），AI IDE 可通过 HTTP 直接读取组件源码与 API 信息，实现智能补全与代码生成。配置、端点与运行方式见在线文档（搜索 "MCP"）。
---
## 浏览器支持
| Chrome | Firefox | Safari | Edge |
| :----: | :-----: | :----: | :--: |
| 90+ | 88+ | 15+ | 90+ |
---
## 许可证
[MIT License](LICENSE)
---
**Exploria UI** · 源码：