xt-element-ui 1.2.5 → 1.2.6

package/docs/README.md

@@ -1,201 +1,100 @@
-## XT-Element-UI
-
-> 基于 Vue2 + ElementUI 的企业级组件库
-
-## 特性
-
-- **丰富的组件**：提供多种常用组件，覆盖布局、表单、数据展示等场景
-- **开箱即用**：基于 ElementUI 构建，无缝集成现有项目
-- **可分发**：完整的 npm 包架构，支持按需引入
-- **可覆盖**：组件设计支持覆盖 Element UI 原有组件
-- **双架构设计**：Xt 自定义组件 + Ex 扩展组件，便于维护管理
-- **主题系统**：支持亮色/暗色主题切换，支持自定义主色调
-- **响应式设计**：组件支持多种尺寸配置，适配不同屏幕
-
-## 组件架构
-
-XT-Element-UI 采用双架构设计，将组件分为两大类：
-
-### Xt 组件（自定义组件）
-
-全新开发的自定义组件，不依赖 ElementUI 原有组件：
-
-| 组件 | 说明 |
-|------|------|
-| XtButton | 按钮组件 |
-| XtCard | 卡片组件 |
-| XtCardItem | 卡片项组件 |
-| XtFlexBox | 弹性布局组件 |
-| XtGridBox | 网格布局组件 |
-| XtGridItem | 网格子项组件 |
-| XtText | 文本组件 |
-| XtInput | 输入框组件 |
-| XtDatePicker | 日期选择组件 |
-| XtConfigProvider | 配置提供器 |
-
-### Ex 组件（扩展组件）
-
-基于 ElementUI 或 ECharts 二次封装的增强组件：
-
-| 组件 | 说明 |
-|------|------|
-| ExButton | 基于 ElementUI Button 的扩展按钮 |
-| ExCard | 基于 ElementUI Card 的扩展卡片 |
-| ExTable | 基于 ElementUI Table 的扩展表格 |
-| ExChart | 图表容器组件 |
-| ExBar | 基于 ECharts 的柱状图 |
-| ExLine | 基于 ECharts 的折线图 |
-| ExPie | 基于 ECharts 的饼图 |
-| ExMulti | 基于 ECharts 的混合图表 |
-| ExTrend | 基于 ECharts 的趋势图 |
-
-### 命名规范
-
-| 前缀 | 含义 | 示例 |
-|------|------|------|
-| `Xt` | 自定义组件，全新开发 | XtButton, XtCard, XtFlexBox, XtGridBox |
-| `Ex` | 基于 ElementUI/ECharts 二次封装 | ExTable, ExBar, ExLine, ExChart |
-
-## 快速开始
+---
+home: true
+heroImage: /favicon.ico
+heroText: XT-Element-UI
+tagline: 基于 Vue 2.7 + ElementUI 的企业级组件库
+actionText: 🚀 快速上手
+actionLink: /components/base/xt-button
+features:
+  - title: 🎯 丰富的组件
+    details: 提供 15+ 组件，覆盖布局、表单、数据展示、图表等常见场景
+  - title: 📦 开箱即用
+    details: 基于 ElementUI 构建，与现有 ElementUI 项目无缝集成
+  - title: 🪶 按需引入
+    details: 完整的 npm 包架构，支持按需引入，减小打包体积
+  - title: 🎨 双架构设计
+    details: Xt 自定义组件 + Ex 扩展组件，职责清晰、便于维护
+  - title: 🌓 主题系统
+    details: 支持亮色/暗色主题切换，支持自定义主色调
+  - title: 📊 图表能力
+    details: 内置 ECharts 封装，提供柱状图、折线图、饼图、混合图
+footer: MIT Licensed | Copyright © 2026 XT-Element-UI
+---
+
+::: tip 💡 快速开始
 
 ```bash
 # 安装
-npm install xt-element-ui
-```
+npm install xt-element-ui --save
 
-```javascript
-// 全局引入
+# 全局引入
 import Vue from 'vue'
 import XtElementUI from 'xt-element-ui'
 import 'xt-element-ui/lib/index.css'
 
 Vue.use(XtElementUI)
-
-// 或按需引入
-import { XtButton, XtFlexBox, XtCard } from 'xt-element-ui'
-
-Vue.component('XtButton', XtButton)
-Vue.component('XtFlexBox', XtFlexBox)
-Vue.component('XtCard', XtCard)
 ```
 
-## 配置选项
+:::
 
-在安装时可以传入配置选项：
+---
 
-```javascript
-Vue.use(XtElementUI, {
-  theme: 'dark',        // 主题：'white' 或 'dark'
-  size: 'medium',       // 字体大小：'small', 'medium', 'large'
-  primaryColor: '#1890ff'  // 主色调
-})
-```
-
-## 工具函数
-
-提供全局工具函数用于动态配置：
-
-```javascript
-// 设置主题
-this.$xt.setTheme('dark')
-
-// 设置字体大小
-this.$xt.setSize('large')
+## 📦 组件概览
 
-// 设置主色调
-this.$xt.setPrimaryColor('#52c41a')
-
-// 获取当前配置
-console.log(this.$xt.getConfig())
-```
-
-## 布局类组件
-
-| 组件 | 说明 |
-|------|------|
-| XtFlexBox | 弹性盒布局，支持灵活的对齐和排列 |
-| XtGridBox | CSS Grid 网格布局，支持跨列跨行 |
-| XtGridItem | Grid 子项组件，支持 span、area 等属性 |
+### 🎨 Xt 组件（自定义组件）
 
-## 表单类组件
+全新开发、不依赖 ElementUI 原有组件：
 
 | 组件 | 说明 |
 |------|------|
-| XtButton | 按钮组件，支持多种类型和尺寸 |
-| XtInput | 输入框组件，支持前缀后缀和校验 |
-| XtDatePicker | 日期选择组件 |
+| **XtButton** | 按钮组件 |
+| **XtCard** | 卡片组件 |
+| **XtCardItem** | 卡片项组件 |
+| **XtFlexBox** | 弹性布局组件 |
+| **XtGridBox** | 网格布局组件 |
+| **XtText** | 文本组件 |
+| **XtInput** | 输入框组件 |
+| **XtDatePicker** | 日期选择组件 |
+| **XtConfigProvider** | 全局配置提供器 |
 
-## 数据展示组件
+### ✨ Ex 组件（扩展组件）
 
-| 组件 | 说明 |
-|------|------|
-| XtCard | 卡片容器组件 |
-| XtCardItem | 卡片内项组件 |
-| XtText | 文本组件，支持多种样式 |
-| ExTable | 扩展表格，支持导出等功能 |
-
-## 图表组件
+基于 ElementUI / ECharts 二次封装的增强组件：
 
 | 组件 | 说明 |
 |------|------|
-| ExChart | 图表容器，封装 ECharts |
-| ExBar | 柱状图组件 |
-| ExLine | 折线图组件 |
-| ExPie | 饼图组件 |
-| ExMulti | 混合图表组件 |
-| ExTrend | 趋势图组件 |
-
-## 主题系统
-
-### 亮色/暗色主题
-
-```vue
-<template>
-  <div>
-    <XtButton @click="$xt.setTheme('white')">亮色主题</XtButton>
-    <XtButton @click="$xt.setTheme('dark')">暗色主题</XtButton>
-  </div>
-</template>
-```
+| **ExButton** | 基于 ElementUI Button 的扩展按钮 |
+| **ExCard** | 基于 ElementUI Card 的扩展卡片 |
+| **ExTable** | 基于 ElementUI Table 的扩展表格（支持虚拟滚动） |
+| **ExBar / ExLine / ExPie / ExMulti** | 基于 ECharts 的图表组件 |
+| **ExSelectTree** | 下拉选择树组件 |
+| **ExUpload** | 上传组件（支持图片预览） |
+| **ExPage** | 页面组件 |
+| **ExIcon** | 图标组件（支持 SVG / 字体图标） |
 
-### 字体大小配置
+---
 
-```vue
-<template>
-  <div>
-    <XtButton @click="$xt.setSize('small')">小号字体</XtButton>
-    <XtButton @click="$xt.setSize('medium')">中号字体</XtButton>
-    <XtButton @click="$xt.setSize('large')">大号字体</XtButton>
-  </div>
-</template>
-```
-
-## 浏览器支持
+## 🌐 GitHub Pages 自动部署
 
-- Chrome（推荐）
-- Firefox
-- Safari
-- Edge
+本项目通过 **GitHub Actions** 自动构建并部署文档到 **GitHub Pages**：
 
-## 开发
+- 📖 **在线文档**：https://JobWebNie.github.io/xt-element-ui/
+- 🐛 **问题反馈**：https://github.com/JobWebNie/xt-element-ui/issues
+- 📦 **npm 主页**：https://www.npmjs.com/package/xt-element-ui
 
-```bash
-# 克隆项目
-git clone <repository-url>
+推送代码到 `main` / `master` 分支后，GitHub Actions 将自动执行：
+1. 安装依赖
+2. 构建 VuePress 文档
+3. 部署到 GitHub Pages
 
-# 安装依赖
-npm install
+---
 
-# 启动开发服务器
-npm run dev
+## 📚 更多资源
 
-# 构建文档
-npm run docs:dev
-
-# 构建生产版本
-npm run build
-```
+- **[查看完整文档](https://JobWebNie.github.io/xt-element-ui/)**
+- **[更新日志](https://github.com/JobWebNie/xt-element-ui/blob/main/CHANGELOG.md)**
+- **[贡献指南](https://github.com/JobWebNie/xt-element-ui/blob/main/CONTRIBUTING.md)**
+- **[GitHub 仓库](https://github.com/JobWebNie/xt-element-ui)**
 
-## 许可证
 
-MIT License
+# 在 GitHub 新建仓库后