xt-element-ui 1.2.3 → 1.2.5

package/docs/README.md

@@ -0,0 +1,201 @@
+## 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 |
+
+## 快速开始
+
+```bash
+# 安装
+npm install xt-element-ui
+```
+
+```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 等属性 |
+
+## 表单类组件
+
+| 组件 | 说明 |
+|------|------|
+| XtButton | 按钮组件，支持多种类型和尺寸 |
+| XtInput | 输入框组件，支持前缀后缀和校验 |
+| XtDatePicker | 日期选择组件 |
+
+## 数据展示组件
+
+| 组件 | 说明 |
+|------|------|
+| XtCard | 卡片容器组件 |
+| XtCardItem | 卡片内项组件 |
+| XtText | 文本组件，支持多种样式 |
+| ExTable | 扩展表格，支持导出等功能 |
+
+## 图表组件
+
+| 组件 | 说明 |
+|------|------|
+| ExChart | 图表容器，封装 ECharts |
+| ExBar | 柱状图组件 |
+| ExLine | 折线图组件 |
+| ExPie | 饼图组件 |
+| ExMulti | 混合图表组件 |
+| ExTrend | 趋势图组件 |
+
+## 主题系统
+
+### 亮色/暗色主题
+
+```vue
+<template>
+  <div>
+    <XtButton @click="$xt.setTheme('white')">亮色主题</XtButton>
+    <XtButton @click="$xt.setTheme('dark')">暗色主题</XtButton>
+  </div>
+</template>
+```
+
+### 字体大小配置
+
+```vue
+<template>
+  <div>
+    <XtButton @click="$xt.setSize('small')">小号字体</XtButton>
+    <XtButton @click="$xt.setSize('medium')">中号字体</XtButton>
+    <XtButton @click="$xt.setSize('large')">大号字体</XtButton>
+  </div>
+</template>
+```
+
+## 浏览器支持
+
+- Chrome（推荐）
+- Firefox
+- Safari
+- Edge
+
+## 开发
+
+```bash
+# 克隆项目
+git clone <repository-url>
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建文档
+npm run docs:dev
+
+# 构建生产版本
+npm run build
+```
+
+## 许可证
+
+MIT License

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

@@ -0,0 +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>
+```
+:::

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

@@ -0,0 +1,104 @@
+## XtCardItem 卡片项组件
+
+卡片项组件用于在卡片内展示一行数据，支持标签、数值和单位的展示。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtCardItem label="销售额" value="12345" unit="元"></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>
+```
+:::

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

@@ -0,0 +1,108 @@
+## XtCard 卡片组件
+
+卡片组件用于展示信息，通常包含标题和内容区域。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtCard title="卡片标题" value="123" unit="元"></XtCard>
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `title` | String | - | 卡片标题 |
+| `value` | String / Number | - | 卡片数值 |
+| `unit` | String | - | 数值单位 |
+| `noPadding` | Boolean | false | 是否取消内边距 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 自定义内容区域 |
+| `title` | 自定义标题区域 |
+| `value` | 自定义数值区域 |
+
+## 示例
+
+### 基础卡片
+
+::: demo 基础卡片
+```vue
+<template>
+  <XtCard title="今日销售额" :value="123456" unit="元"></XtCard>
+</template>
+```
+:::
+
+### 自定义内容
+
+::: demo 自定义内容
+```vue
+<template>
+  <XtCard title="用户统计">
+    <div style="display: flex; justify-content: space-around;">
+      <div style="text-align: center;">
+        <span style="display: block; font-size: 12px; color: #999;">新增用户</span>
+        <span style="font-size: 24px; font-weight: bold; color: #1890ff;">520</span>
+      </div>
+      <div style="text-align: center;">
+        <span style="display: block; font-size: 12px; color: #999;">活跃用户</span>
+        <span style="font-size: 24px; font-weight: bold; color: #52c41a;">3840</span>
+      </div>
+    </div>
+  </XtCard>
+</template>
+```
+:::
+
+### 自定义标题和数值
+
+::: demo 自定义标题和数值
+```vue
+<template>
+  <XtCard>
+    <template #title>
+      <span style="color: #1890ff;">📊 数据分析</span>
+    </template>
+    <template #value>
+      <span style="font-size: 32px; color: #52c41a;">98.5%</span>
+    </template>
+  </XtCard>
+</template>
+```
+:::
+
+### 无边距卡片
+
+::: demo 无边距卡片
+```vue
+<template>
+  <XtCard title="紧凑卡片" :value="100" noPadding>
+    <div style="padding: 8px;">
+      <p>内容区域没有额外内边距</p>
+    </div>
+  </XtCard>
+</template>
+```
+:::
+
+### 卡片组
+
+::: demo 卡片组
+```vue
+<template>
+  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+    <XtCard title="销售额" value="12345" unit="元"></XtCard>
+    <XtCard title="订单数" value="520" unit="单"></XtCard>
+    <XtCard title="转化率" value="23.5" unit="%"></XtCard>
+  </div>
+</template>
+```
+:::