xt-element-ui 1.3.3 → 1.3.4

package/docs/README.md

@@ -1,100 +1,100 @@
----
-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 --save
-
-# 全局引入
-import Vue from 'vue'
-import XtElementUI from 'xt-element-ui'
-import 'xt-element-ui/lib/index.css'
-
-Vue.use(XtElementUI)
-```
-
-:::
-
----
-
-## 📦 组件概览
-
-### 🎨 Xt 组件（自定义组件）
-
-全新开发、不依赖 ElementUI 原有组件：
-
-| 组件 | 说明 |
-|------|------|
-| **XtButton** | 按钮组件 |
-| **XtCard** | 卡片组件 |
-| **XtCardItem** | 卡片项组件 |
-| **XtFlexBox** | 弹性布局组件 |
-| **XtGridBox** | 网格布局组件 |
-| **XtText** | 文本组件 |
-| **XtInput** | 输入框组件 |
-| **XtConfigProvider** | 全局配置提供器 |
-
-### ✨ Ex 组件（扩展组件）
-
-基于 ElementUI / ECharts 二次封装的增强组件：
-
-| 组件 | 说明 |
-|------|------|
-| **ExButton** | 基于 ElementUI Button 的扩展按钮 |
-| **ExCard** | 基于 ElementUI Card 的扩展卡片 |
-| **ExTable** | 基于 ElementUI Table 的扩展表格（支持虚拟滚动） |
-| **ExBar / ExLine / ExPie / ExMulti** | 基于 ECharts 的图表组件 |
-| **ExSelectTree** | 下拉选择树组件 |
-| **ExUpload** | 上传组件（支持图片预览） |
-| **ExPage** | 页面组件 |
-| **ExDatePicker** | 日期选择组件 |
-| **ExIcon** | 图标组件（支持 SVG / 字体图标） |
-
----
-
-## 🌐 GitHub Pages 自动部署
-
-本项目通过 **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
-
-推送代码到 `main` / `master` 分支后，GitHub Actions 将自动执行：
-1. 安装依赖
-2. 构建 VuePress 文档
-3. 部署到 GitHub Pages
-
----
-
-## 📚 更多资源
-
-- **[查看完整文档](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)**
-
-
-# 在 GitHub 新建仓库后
+---
+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 --save
+
+# 全局引入
+import Vue from 'vue'
+import XtElementUI from 'xt-element-ui'
+import 'xt-element-ui/lib/index.css'
+
+Vue.use(XtElementUI)
+```
+
+:::
+
+---
+
+## 📦 组件概览
+
+### 🎨 Xt 组件（自定义组件）
+
+全新开发、不依赖 ElementUI 原有组件：
+
+| 组件 | 说明 |
+|------|------|
+| **XtButton** | 按钮组件 |
+| **XtCard** | 卡片组件 |
+| **XtCardItem** | 卡片项组件 |
+| **XtFlexBox** | 弹性布局组件 |
+| **XtGridBox** | 网格布局组件 |
+| **XtText** | 文本组件 |
+| **XtInput** | 输入框组件 |
+| **XtConfigProvider** | 全局配置提供器 |
+
+### ✨ Ex 组件（扩展组件）
+
+基于 ElementUI / ECharts 二次封装的增强组件：
+
+| 组件 | 说明 |
+|------|------|
+| **ExButton** | 基于 ElementUI Button 的扩展按钮 |
+| **ExCard** | 基于 ElementUI Card 的扩展卡片 |
+| **ExTable** | 基于 ElementUI Table 的扩展表格（支持虚拟滚动） |
+| **ExBar / ExLine / ExPie / ExMulti** | 基于 ECharts 的图表组件 |
+| **ExSelectTree** | 下拉选择树组件 |
+| **ExUpload** | 上传组件（支持图片预览） |
+| **ExPage** | 页面组件 |
+| **ExDatePicker** | 日期选择组件 |
+| **ExIcon** | 图标组件（支持 SVG / 字体图标） |
+
+---
+
+## 🌐 GitHub Pages 自动部署
+
+本项目通过 **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
+
+推送代码到 `main` / `master` 分支后，GitHub Actions 将自动执行：
+1. 安装依赖
+2. 构建 VuePress 文档
+3. 部署到 GitHub Pages
+
+---
+
+## 📚 更多资源
+
+- **[查看完整文档](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)**
+
+
+# 在 GitHub 新建仓库后

package/docs/components/base/xt-button.md

@@ -1,114 +1,114 @@
-## XtButton 按钮组件
-
-按钮用于触发一个操作，如提交表单、打开对话框等。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtButton type="primary">主要按钮</XtButton>
-</template>
-```
-:::
-
-## 属性说明
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `type` | String | - | `primary`、`success`、`warning`、`danger` | 按钮类型 |
-| `size` | String | - | `large`、`medium`、`small`、`mini` | 按钮尺寸 |
-| `plain` | Boolean | false | - | 是否为朴素按钮 |
-| `disabled` | Boolean | false | - | 是否禁用按钮 |
-| `round` | Boolean | false | - | 是否为圆角按钮 |
-
-## 事件说明
-
-| 事件名 | 参数 | 说明 |
-|--------|------|------|
-| `click` | - | 点击按钮时触发 |
-
-## 示例
-
-### 不同类型的按钮
-::: demo 不同类型的按钮
-```vue
-<template>
-  <div style="display: flex; gap: 12px;">
-    <XtButton type="primary">主要按钮</XtButton>
-    <XtButton type="success">成功按钮</XtButton>
-    <XtButton type="warning">警告按钮</XtButton>
-    <XtButton type="danger">危险按钮</XtButton>
-  </div>
-</template>
-```
-:::
-
-### 不同尺寸的按钮
-::: demo 不同尺寸的按钮
-```vue
-<template>
-  <div style="display: flex; gap: 12px; align-items: center;">
-    <XtButton size="large">大号按钮</XtButton>
-    <XtButton>默认按钮</XtButton>
-    <XtButton size="small">小号按钮</XtButton>
-  </div>
-</template>
-```
-:::
-
-### 朴素按钮
-
-::: demo 朴素按钮
-```vue
-<template>
-  <div style="display: flex; gap: 12px;">
-    <XtButton type="primary" plain>朴素主按钮</XtButton>
-    <XtButton type="success" plain>朴素成功按钮</XtButton>
-    <XtButton type="warning" plain>朴素警告按钮</XtButton>
-    <XtButton type="danger" plain>朴素危险按钮</XtButton>
-  </div>
-</template>
-```
-:::
-
-### 状态按钮
-::: demo 状态按钮
-```vue
-<template>
-  <div style="display: flex; gap: 12px;">
-    <XtButton disabled>禁用按钮</XtButton>
-    <XtButton round>圆角按钮</XtButton>
-    <XtButton type="primary" disabled>禁用主按钮</XtButton>
-    <XtButton type="primary" round>圆角主按钮</XtButton>
-  </div>
-</template>
-```
-:::
-
-### 事件处理
-
-::: demo 事件处理
-```vue
-<template>
-  <div>
-    <XtButton type="primary" @click="handleClick">点击触发</XtButton>
-    <p style="margin-top: 12px;">点击次数: {{ clickCount }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      clickCount: 0
-    }
-  },
-  methods: {
-    handleClick() {
-      this.clickCount++
-    }
-  }
-}
-</script>
-```
-:::
+## XtButton 按钮组件
+
+按钮用于触发一个操作，如提交表单、打开对话框等。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtButton type="primary">主要按钮</XtButton>
+</template>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `type` | String | - | `primary`、`success`、`warning`、`danger` | 按钮类型 |
+| `size` | String | - | `large`、`medium`、`small`、`mini` | 按钮尺寸 |
+| `plain` | Boolean | false | - | 是否为朴素按钮 |
+| `disabled` | Boolean | false | - | 是否禁用按钮 |
+| `round` | Boolean | false | - | 是否为圆角按钮 |
+
+## 事件说明
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `click` | - | 点击按钮时触发 |
+
+## 示例
+
+### 不同类型的按钮
+::: demo 不同类型的按钮
+```vue
+<template>
+  <div style="display: flex; gap: 12px;">
+    <XtButton type="primary">主要按钮</XtButton>
+    <XtButton type="success">成功按钮</XtButton>
+    <XtButton type="warning">警告按钮</XtButton>
+    <XtButton type="danger">危险按钮</XtButton>
+  </div>
+</template>
+```
+:::
+
+### 不同尺寸的按钮
+::: demo 不同尺寸的按钮
+```vue
+<template>
+  <div style="display: flex; gap: 12px; align-items: center;">
+    <XtButton size="large">大号按钮</XtButton>
+    <XtButton>默认按钮</XtButton>
+    <XtButton size="small">小号按钮</XtButton>
+  </div>
+</template>
+```
+:::
+
+### 朴素按钮
+
+::: demo 朴素按钮
+```vue
+<template>
+  <div style="display: flex; gap: 12px;">
+    <XtButton type="primary" plain>朴素主按钮</XtButton>
+    <XtButton type="success" plain>朴素成功按钮</XtButton>
+    <XtButton type="warning" plain>朴素警告按钮</XtButton>
+    <XtButton type="danger" plain>朴素危险按钮</XtButton>
+  </div>
+</template>
+```
+:::
+
+### 状态按钮
+::: demo 状态按钮
+```vue
+<template>
+  <div style="display: flex; gap: 12px;">
+    <XtButton disabled>禁用按钮</XtButton>
+    <XtButton round>圆角按钮</XtButton>
+    <XtButton type="primary" disabled>禁用主按钮</XtButton>
+    <XtButton type="primary" round>圆角主按钮</XtButton>
+  </div>
+</template>
+```
+:::
+
+### 事件处理
+
+::: demo 事件处理
+```vue
+<template>
+  <div>
+    <XtButton type="primary" @click="handleClick">点击触发</XtButton>
+    <p style="margin-top: 12px;">点击次数: {{ clickCount }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      clickCount: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.clickCount++
+    }
+  }
+}
+</script>
+```
+:::

package/docs/components/base/xt-card-item.md

@@ -1,104 +1,104 @@
-## XtCardItem 卡片项组件
-
-卡片项组件用于在卡片内展示一行数据，支持标签、数值和单位的展示。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtCardItem title="销售额" label="销售额" value="12345" unit="元" style="width: 350px;"></XtCardItem>
-</template>
-```
-:::
-
-## 属性说明
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `iconType` | String | border | `border`、`icon` | 图标类型 |
-| `type` | String | primary | `primary`、`success`、`warning`、`danger` | 颜色类型 |
-| `label` | String | - | - | 标签文本 |
-| `value` | String / Number | - | - | 数值内容 |
-| `unit` | String | - | - | 数值单位 |
-| `icon` | String | - | - | Element Plus 图标名称 |
-| `iconAt` | String | right | `left`、`right`、`top`、`bottom` | 图标位置 |
-| `color` | String | - | - | 自定义颜色 |
-
-## 插槽说明
-
-| 插槽名 | 说明 |
-|--------|------|
-| `label` | 自定义标签区域 |
-| `value` | 自定义数值区域 |
-| `unit` | 自定义单位区域 |
-| `icon` | 自定义图标区域 |
-
-## 示例
-
-### 边框型卡片项（默认）
-
-::: demo 边框型卡片项
-```vue
-<template>
-  <XtCardItem label="销售额" value="12345" unit="元" type="primary"></XtCardItem>
-</template>
-```
-:::
-
-### 不同类型的边框卡片项
-
-::: demo 不同类型的边框卡片项
-```vue
-<template>
-  <div style="display: flex; flex-direction: column; gap: 8px;">
-    <XtCardItem label="成功" value="OK" type="success"></XtCardItem>
-    <XtCardItem label="警告" value="Warning" type="warning"></XtCardItem>
-    <XtCardItem label="危险" value="Error" type="danger"></XtCardItem>
-  </div>
-</template>
-```
-:::
-
-### 自定义颜色
-::: demo 自定义颜色
-```vue
-<template>
-  <XtCardItem label="自定义颜色" value="100%" color="#722ed1"></XtCardItem>
-</template>
-```
-:::
-
-### 自定义插槽
-::: demo 自定义插槽
-```vue
-<template>
-  <XtCardItem>
-    <template #label>
-      <span style="color: #1890ff; font-weight: bold;">自定义标签</span>
-    </template>
-    <template #value>
-      <span style="font-size: 18px;">9999</span>
-    </template>
-    <template #unit>
-      <span style="color: #999;">自定义单位</span>
-    </template>
-  </XtCardItem>
-</template>
-```
-:::
-
-### 在卡片中使用
-
-::: demo 在卡片中使用
-```vue
-<template>
-  <XtCard title="统计数据">
-    <div style="display: flex; flex-direction: column; gap: 8px;">
-      <XtCardItem label="总销售额" value="123456" unit="元"></XtCardItem>
-      <XtCardItem label="订单数量" value="520" unit="单" type="success"></XtCardItem>
-      <XtCardItem label="转化率" value="23.5" unit="%" type="warning"></XtCardItem>
-    </div>
-  </XtCard>
-</template>
-```
-:::
+## XtCardItem 卡片项组件
+
+卡片项组件用于在卡片内展示一行数据，支持标签、数值和单位的展示。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtCardItem title="销售额" label="销售额" value="12345" unit="元" style="width: 350px;"></XtCardItem>
+</template>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `iconType` | String | border | `border`、`icon` | 图标类型 |
+| `type` | String | primary | `primary`、`success`、`warning`、`danger` | 颜色类型 |
+| `label` | String | - | - | 标签文本 |
+| `value` | String / Number | - | - | 数值内容 |
+| `unit` | String | - | - | 数值单位 |
+| `icon` | String | - | - | Element Plus 图标名称 |
+| `iconAt` | String | right | `left`、`right`、`top`、`bottom` | 图标位置 |
+| `color` | String | - | - | 自定义颜色 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `label` | 自定义标签区域 |
+| `value` | 自定义数值区域 |
+| `unit` | 自定义单位区域 |
+| `icon` | 自定义图标区域 |
+
+## 示例
+
+### 边框型卡片项（默认）
+
+::: demo 边框型卡片项
+```vue
+<template>
+  <XtCardItem label="销售额" value="12345" unit="元" type="primary"></XtCardItem>
+</template>
+```
+:::
+
+### 不同类型的边框卡片项
+
+::: demo 不同类型的边框卡片项
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <XtCardItem label="成功" value="OK" type="success"></XtCardItem>
+    <XtCardItem label="警告" value="Warning" type="warning"></XtCardItem>
+    <XtCardItem label="危险" value="Error" type="danger"></XtCardItem>
+  </div>
+</template>
+```
+:::
+
+### 自定义颜色
+::: demo 自定义颜色
+```vue
+<template>
+  <XtCardItem label="自定义颜色" value="100%" color="#722ed1"></XtCardItem>
+</template>
+```
+:::
+
+### 自定义插槽
+::: demo 自定义插槽
+```vue
+<template>
+  <XtCardItem>
+    <template #label>
+      <span style="color: #1890ff; font-weight: bold;">自定义标签</span>
+    </template>
+    <template #value>
+      <span style="font-size: 18px;">9999</span>
+    </template>
+    <template #unit>
+      <span style="color: #999;">自定义单位</span>
+    </template>
+  </XtCardItem>
+</template>
+```
+:::
+
+### 在卡片中使用
+
+::: demo 在卡片中使用
+```vue
+<template>
+  <XtCard title="统计数据">
+    <div style="display: flex; flex-direction: column; gap: 8px;">
+      <XtCardItem label="总销售额" value="123456" unit="元"></XtCardItem>
+      <XtCardItem label="订单数量" value="520" unit="单" type="success"></XtCardItem>
+      <XtCardItem label="转化率" value="23.5" unit="%" type="warning"></XtCardItem>
+    </div>
+  </XtCard>
+</template>
+```
+:::