exploria-ui 2026.2.31 → 2026.3.2

package/README.md

@@ -1,26 +1,250 @@
-# LingXiao UI
+# Exploria UI
 
-## 一、项目介绍
+## 项目简介
 
-一个基于 Vue3.6 的，几乎整合了所有前端 UI 组件的组件库，在组件的丰富性上，`LingXiao UI` 远超市面上的所有 UI 组件库。使用了
-Element Plus、Ant Design Vue 等流行的 UI 框架，以及 Pinia 状态管理库和 Vue Router 路由管理库。此外，项目还集成了 ECharts 和
-Three.js 等可视化库，支持国际化（Vue I18n），并使用了 TypeScript 进行类型安全的开发。
+🚀 下一代 Vue 3.6 + Vite UI 组件库，基于 OXC 工具链构建，采用 **Monorepo 架构**，提供丰富的组件、插件、工具和指令，满足各类业务场景需求。
 
-## 二、安装方式
+### 核心特性
+
+- **完整生态**：包含组件集、插件集、工具集和指令集四大核心模块
+- **组件丰富**：覆盖多种业务场景，提供高质量 UI 组件
+- **易用性强**：API 设计对齐 Element Plus，零学习成本
+- **类型安全**：TypeScript 全量类型支持
+- **性能优异**：基于 Vue 3.6 和 Vite 构建，加载速度快
+- **现代工具链**：集成 OXC 工具链，提供极速的代码检查和格式化
+
+### 主要开发者
+
+**作者：liketype** - 本组件库的核心开发者，微信号：yywd479
+
+## 安装方式
 
 ```sh
-pnpm add ling-xiao-ui
+pnpm add exploria-ui
 ```
 
-## 三、技术栈
+## 核心架构
+
+Exploria UI 组件库由四个核心部分构成，形成完整的 UI 解决方案：
+
+### 1. 组件集
+
+组件集是 Exploria UI 的核心，包含丰富的 UI 组件，按功能划分为多个模块：
+
+- **基础组件**：按钮、图标、下划线等基础 UI 元素
+- **数据组件**：表格、列表、轮播图等数据展示组件
+- **表单组件**：输入框、选择器、复选框等表单控件
+- **反馈组件**：对话框、消息提示、通知等用户反馈组件
+- **布局组件**：容器、分割线、滚动条等布局元素
+- **导航组件**：标签页、下拉菜单等导航组件
+- **高级组件**：虚拟列表、水印、滚动视差等高级功能组件
+- **3D组件**：立方体等 3D 可视化组件
+
+#### 样式系统
+
+组件集内置完整的样式系统，分为基础样式和组件样式两大类别：
+
+##### 基础样式
+
+基础样式包含核心设计元素，定义了组件库的视觉基础，主要包含：
+
+- **色阶系统**：颜色变量及不同透明度的色阶定义
+- **背景色**：各种场景下的背景色定义
+- **边框色**：边框颜色及透明度定义
+- **字体大小**：不同层级的字体大小定义
+- **间距系统**：统一的间距变量
+- **阴影系统**：不同层级的阴影效果
+- **圆角系统**：统一的圆角变量
+- **层级系统**：z-index 管理
+
+基础样式文件位于 `components/style/base/` 目录下，包含：
+`colors.scss`、`background-colors.scss`、`border-colors.scss`、`font-sizes.scss` 等。
+
+##### 组件样式
+
+组件样式采用 SCSS 编写，使用 BEM 命名规范，通过 var 变量形式与基础样式的变量进行关联，确保样式的一致性和可维护性。
+
+组件样式文件位于 `components/style/components/` 目录下，每个组件对应一个独立的样式文件，如：
+`e-button.scss`、`e-input.scss`、`e-dialog.scss` 等。
+
+##### 统一主题
+
+支持主题定制和切换，通过修改基础样式变量即可实现整体风格的变更。
+
+### 2. 插件集
+
+插件集提供可扩展的功能模块，用于增强组件库的能力：
+
+- **SVG 精灵构建器**：自动构建 SVG 精灵图，优化图标加载
+- **图片预加载构建器**：预加载图片资源，提升用户体验
+- **SVG 兼容修复**：解决 SVG 在不同浏览器的兼容问题
+
+### 3. 工具集
+
+工具集包含各类实用工具函数，简化开发流程：
+
+- **DOM 操作工具**：便捷的 DOM 操作方法
+- **动画工具**：基于 Animate.css 的动画封装
+- **图表工具**：ECharts 图表的封装和扩展
+- **事件总线**：全局事件管理
+- **本地存储工具**：增强的 localStorage 操作
+- **时间工具**：日期时间格式化和计算
+- **UUID 工具**：生成唯一标识符
+- **图片工具**：图片处理和优化
+- **Three.js 工具**：3D 渲染相关工具
+
+### 4. 指令集
+
+指令集提供实用的 Vue 自定义指令，扩展 Vue 的能力：
+
+- **拖拽指令**：实现元素拖拽功能
+- **尺寸观察指令**：监听元素尺寸变化
+- **滑入动画指令**：元素进入视口时的动画效果
+
+## 目录结构
+
+Exploria UI 组件库采用清晰的模块化架构，目录结构设计遵循功能分离、易于维护的原则。以下是核心目录结构说明：
+
+```
+packages/exploria-ui/
+├── src/                      # 源代码目录
+│   ├── components/           # 组件集目录
+│   │   ├── advanced/         # 高级组件（虚拟列表、水印等）
+│   │   ├── basic/            # 基础组件（按钮、图标等）
+│   │   ├── data/             # 数据组件（表格、轮播图等）
+│   │   ├── feedback/         # 反馈组件（对话框、消息提示等）
+│   │   ├── form/             # 表单组件（输入框、选择器等）
+│   │   ├── geometry/         # 几何组件
+│   │   ├── hooks/            # 组件钩子函数
+│   │   ├── layout/           # 布局组件
+│   │   ├── navigation/       # 导航组件（标签页等）
+│   │   ├── style/            # 样式文件
+│   │   │   ├── base/         # 基础样式变量
+│   │   │   └── components/   # 组件样式
+│   │   └── types/            # 组件类型定义
+│   ├── directives/           # 指令集目录
+│   ├── plugins/              # 插件集目录
+│   └── utils/                # 工具集目录
+├── dist/                     # 构建输出目录
+├── scripts/                  # 脚本文件
+│   └── build-plugins.ts      # 插件构建脚本，用于打包插件并生成类型文件
+├── package.json              # 项目配置
+├── README.md                 # 项目文档
+├── tsconfig.json             # TypeScript 配置
+└── vite.config.ts            # Vite 配置
+```
+
+### 目录说明
+
+1. **components/** - 组件集核心目录，按功能划分为多个子目录：
+    - `advanced/`：包含高级功能组件，如虚拟列表、水印、滚动视差等
+    - `basic/`：基础 UI 组件，如按钮、图标、下划线等
+    - `data/`：数据展示组件，如表格、轮播图、时间线等
+    - `feedback/`：用户反馈组件，如对话框、消息提示、通知等
+    - `form/`：表单控件组件，如输入框、选择器、条件组等
+    - `layout/`：布局相关组件，用于页面结构搭建
+    - `navigation/`：导航组件，如标签页、下拉菜单等
+
+2. **directives/** - 自定义指令目录，包含拖拽、尺寸观察等指令
+
+3. **plugins/** - 插件目录，包含 SVG 精灵构建器、图片预加载等插件
+
+4. **utils/** - 工具函数目录，包含 DOM 操作、动画、图表等工具
+
+5. **style/** - 样式系统目录：
+    - `base/`：基础样式变量，包含颜色、字体、间距等设计系统基础
+    - `components/`：各组件对应的样式文件，采用 BEM 命名规范
+
+## 快速开始
+
+### 全局引入
+
+```javascript
+import { createApp } from 'other';
+import App from './App.other';
+import ExploriaUI from 'exploria-ui';
+import 'exploria-ui/src/components/style/index.scss';
+
+const app = createApp(App);
+app.use(ExploriaUI);
+app.mount('#app');
+```
+
+### 按需引入
+
+```javascript
+import { createApp } from 'other';
+import App from './App.other';
+import { EButton, EInput } from 'exploria-ui';
+import 'exploria-ui/src/components/style/index.scss';
+
+const app = createApp(App);
+app.use(EButton);
+app.use(EInput);
+app.mount('#app');
+```
+
+### 使用插件
+
+```javascript
+import { createApp } from 'other';
+import App from './App.other';
+import { ESvgSpriteBuilder } from 'exploria-ui/plugins';
+
+const app = createApp(App);
+app.use(ESvgSpriteBuilder, {
+    // 配置选项
+});
+app.mount('#app');
+```
+
+### 使用工具函数
+
+```javascript
+import { EDomUtil } from 'exploria-ui/index';
+
+// 使用 DOM 工具函数
+EDomUtil.addClass(element, 'active');
+```
+
+### 使用指令
+
+```javascript
+import { createApp } from 'other';
+import App from './App.other';
+import { EDrag } from 'exploria-ui/directives';
+
+const app = createApp(App);
+app.directive('drag', EDrag);
+app.mount('#app');
+```
+
+## 技术栈
 
 - **框架**：Vue 3.6
-- **UI 框架**：Element Plus、Ant Design Vue
-- **状态管理**：Pinia
-- **路由管理**：Vue Router
-- **国际化**：Vue I18n
-- **富文本编辑器**：WangEditor for Vue
-- **可视化库**：ECharts、Three.js
 - **构建工具**：Vite
-- **代码规范**：ESLint
-- **类型检查**：TypeScript、Vue-TSC
+- **开发语言**：TypeScript
+- **样式方案**：SCSS + Animate.css
+- **工具链**：OXC
+
+## 浏览器支持
+
+| 浏览器  | 最低版本 |
+| ------- | -------- |
+| Chrome  | 90+      |
+| Firefox | 88+      |
+| Safari  | 15+      |
+| Edge    | 90+      |
+
+## 许可证
+
+本项目基于 [MIT License](LICENSE) 开源。
+
+## 联系方式
+
+- **作者：liketype** - 微信号：yywd479
+- 项目地址：https://github.com/your-repo/exploria-ui
+
+---
+
+Built with ❤️ using Vue 3.6 + Vite + OXC

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as default };

package/dist/components/basic/ECard/ECard.vue.d.ts

@@ -0,0 +1,27 @@
+import { ESize } from '../../types/size.d.ts';
+type __VLS_Props = {
+    title?: string;
+    subTitle?: string;
+    shadow?: 'light' | 'medium' | 'heavy';
+    size?: ESize;
+    bordered?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ import { default as ERollingFollow } from './advanced/ERollingFollow/ERollingFol
 import { default as EVirtualList } from './advanced/EVirtualList/EVirtualList.vue';
 import { default as EWatermark } from './advanced/EWatermark/EWatermark.vue';
 import { default as EButton } from './basic/EButton/EButton.vue';
+import { default as ECard } from './basic/ECard/ECard.vue';
 import { default as ESvgIcon } from './basic/ESvgIcon/ESvgIcon.vue';
 import { default as EUnderLine } from './basic/EUnderLine/EUnderLine.vue';
 import { default as EAvatar } from './data/EAvatar/EAvatar.vue';
@@ -55,6 +56,6 @@ import { default as EScrollX } from './layout/EScrollX.vue';
 import { default as EDropdown } from './navigation/EDropdown.vue';
 import { default as ETabPane } from './navigation/ETabs/ETabPane.vue';
 import { default as ETabs } from './navigation/ETabs/ETabs.vue';
-export { EAvatar, ECarousel, ECarouselItem, EImage, EList, ESvgIcon, ETableColumn, EWatermark, EDropdown, ECheckbox, ERadio, EVirtualList, EDialog, EDrawer, ECube, EUnderLine, EFormItem, EButton, EFileSelector, EInput, EForm, ETable, ETooltip, EPopover, ECodeCollapse, ETabPane, ETabs, ETimePicker, ESelect, ESkeleton, ECollapse, EDivider, // 分割线
+export { EAvatar, ECard, ECarousel, ECarouselItem, EImage, EList, ESvgIcon, ETableColumn, EWatermark, EDropdown, ECheckbox, ERadio, EVirtualList, EDialog, EDrawer, ECube, EUnderLine, EFormItem, EButton, EFileSelector, EInput, EForm, ETable, ETooltip, EPopover, ECodeCollapse, ETabPane, ETabs, ETimePicker, ESelect, ESkeleton, ECollapse, EDivider, // 分割线
 EParallaxScrolling, // 视差滚动组件
 EScrollX, EContainerWithScrollbar, ERollingPagination, EProgress, ERollingFollow, ECalendar, ETimeline, ETimelineItem, EConditionGroup, EColorPicker, ESlider, EMessageBox, EMessage, ENotification, EUUIDUtil, EAnimateCSSUtil, EClipboardUtil, EMediaViewer, EImageUtil, EMediaQueryUtil, EEchartsUtil, EThreeUtil, EDrag, ESizeOb, };