xt-element-ui 1.4.0 → 2.0.0

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

@@ -0,0 +1,183 @@
+## XtChart 图表容器组件
+
+基于 ECharts 封装的图表容器组件，通过 `type` 属性切换不同图表类型（柱状图、折线图、饼图、组合图）。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `type` | String | `bar` | `bar`、`line`、`pie`、`multi` | 图表类型 |
+| `theme` | String | - | `dark`、`default` | 主题，自动检测父元素 `data-theme` |
+| `size` | String | `medium` | `small`、`medium`、`large` | 图表尺寸 |
+
+## 示例
+
+### 柱状图
+
+::: demo 柱状图
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" },
+        { value: 82, label: "赵六" },
+        { value: 70, label: "钱七" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 折线图
+
+::: demo 折线图
+```vue
+<template>
+  <XtChart type="line" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "1月" },
+        { value: 78, label: "2月" },
+        { value: 95, label: "3月" },
+        { value: 82, label: "4月" },
+        { value: 70, label: "5月" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 饼图
+
+::: demo 饼图
+```vue
+<template>
+  <XtChart type="pie" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 30, label: "北京" },
+        { value: 25, label: "上海" },
+        { value: 20, label: "广州" },
+        { value: 25, label: "深圳" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 组合图
+
+::: demo 组合图
+```vue
+<template>
+  <XtChart type="multi" :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "销售额",
+          unit: "万元",
+          data: [
+            { label: "1月", value: 100 },
+            { label: "2月", value: 120 },
+            { label: "3月", value: 90 }
+          ]
+        },
+        {
+          label: "订单数",
+          unit: "单",
+          data: [
+            { label: "1月", value: 50 },
+            { label: "2月", value: 60 },
+            { label: "3月", value: 45 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtChart type="bar" :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- `XtChart` 是一个容器组件，会根据 `type` 属性渲染对应的子组件（XtBar/XtLine/XtPie/XtMulti）
+- 所有子组件的 props 都可以通过 `XtChart` 透传
+- 主题会自动检测父元素的 `data-theme` 属性，无需手动传递

package/docs/components/base/xt-date-picker.md

@@ -0,0 +1,111 @@
+## XtDatePicker 日期选择器组件
+
+日期选择器组件用于选择日期范围，支持多种日期类型（年月日、年月、年、季度等）。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` / `v-model` | Array | - | - | 日期范围，格式为 `[startDate, endDate]` |
+| `dateType` | String | `date` | `date`、`datetime`、`month`、`year`、`quarter`、`week` | 日期类型 |
+| `separator` | String | `至` | - | 分隔符文本 |
+| `disabled` | Boolean | `false` | - | 是否禁用 |
+| `width` | Number | `280` | - | 组件宽度（px） |
+
+## 示例
+
+### 不同日期类型
+
+::: demo 不同日期类型
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <XtDatePicker v-model="dateRange" dateType="date" />
+    <XtDatePicker v-model="monthRange" dateType="month" />
+    <XtDatePicker v-model="yearRange" dateType="year" />
+    <XtDatePicker v-model="quarterRange" dateType="quarter" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: [],
+      monthRange: [],
+      yearRange: [],
+      quarterRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义分隔符
+
+::: demo 自定义分隔符
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" separator="~" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+### 禁用状态
+
+::: demo 禁用状态
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" disabled />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 日期值改变时触发 | `[startDate, endDate]` |
+| `focus` | 输入框获得焦点时触发 | - |
+| `blur` | 输入框失去焦点时触发 | - |

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

@@ -0,0 +1,154 @@
+## XtIcon 图标组件
+
+图标组件支持多种图标类型：ElementUI 字体图标、SVG Sprite、内联 SVG 和自定义字体图标。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtIcon name="el-icon-search" />
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `name` | String | - | 图标名称或 SVG 内容 |
+| `size` | String / Number | - | 图标大小 |
+| `color` | String | - | 图标颜色 |
+| `spin` | Boolean | `false` | 是否旋转 |
+
+## 图标类型
+
+### ElementUI 字体图标
+
+以 `el-icon-` 开头的图标名称会自动识别为 ElementUI 图标：
+
+::: demo ElementUI 图标
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtIcon name="el-icon-search" />
+    <XtIcon name="el-icon-edit" />
+    <XtIcon name="el-icon-delete" />
+    <XtIcon name="el-icon-user" />
+  </div>
+</template>
+```
+:::
+
+### SVG Sprite
+
+使用 `#` 或 `svg:` 前缀引用 SVG Sprite：
+
+::: demo SVG Sprite
+```vue
+<template>
+  <XtIcon name="#icon-home" />
+</template>
+```
+:::
+
+### 内联 SVG
+
+直接传入完整的 SVG 字符串：
+
+::: demo 内联 SVG
+```vue
+<template>
+  <XtIcon :name="svgContent" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      svgContent: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义字体图标
+
+非上述类型的图标名称会作为自定义字体图标类名处理：
+
+::: demo 自定义字体图标
+```vue
+<template>
+  <XtIcon name="custom-icon-star" />
+</template>
+```
+:::
+
+## 示例
+
+### 不同尺寸
+
+::: demo 不同尺寸
+```vue
+<template>
+  <div style="display: flex; align-items: center; gap: 16px;">
+    <XtIcon name="el-icon-search" :size="16" />
+    <XtIcon name="el-icon-search" :size="24" />
+    <XtIcon name="el-icon-search" :size="32" />
+    <XtIcon name="el-icon-search" size="40px" />
+  </div>
+</template>
+```
+:::
+
+### 不同颜色
+
+::: demo 不同颜色
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtIcon name="el-icon-search" color="#1890ff" />
+    <XtIcon name="el-icon-search" color="#52c41a" />
+    <XtIcon name="el-icon-search" color="#faad14" />
+    <XtIcon name="el-icon-search" color="#f5222d" />
+  </div>
+</template>
+```
+:::
+
+### 旋转动画
+
+::: demo 旋转动画
+```vue
+<template>
+  <XtIcon name="el-icon-loading" spin />
+</template>
+```
+:::
+
+### 配合按钮使用
+
+::: demo 配合按钮使用
+```vue
+<template>
+  <XtButton type="primary">
+    <XtIcon name="el-icon-search" />
+    搜索
+  </XtButton>
+</template>
+```
+:::
+
+## 全局注册前缀
+
+对于自定义字体图标，可以注册前缀以避免自动添加 `ex-icon` 类名：
+
+```javascript
+import XtIcon from 'xt-element-ui/src/components/xt-icon'
+
+XtIcon.registerPrefix('custom-')
+```
+
+注册后，所有以 `custom-` 开头的图标名称不会自动添加 `ex-icon` 类名。

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

@@ -0,0 +1,145 @@
+## XtLine 折线图组件
+
+基于 ECharts 封装的折线图组件，支持面积图、平滑曲线等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtLine :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "张三" },
+        { value: 10, label: "李四" },
+        { value: 60, label: "宋五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | - | 图表数据，格式为 `[{ label, value }]` |
+| `fieldKeys` | Object | `{ label: "label", value: "value", data: "data" }` | 字段映射配置 |
+| `theme` | String | - | 主题，`dark` 或 `default` |
+| `size` | String | `medium` | 尺寸，`small` / `medium` / `large` |
+| `isArea` | Boolean | `false` | 是否显示面积图 |
+| `unit` | String | `""` | 数据单位 |
+| `intervalvalue` | Number | `0` | X 轴标签间隔，0 表示全部显示 |
+| `simpleMode` | Boolean | `false` | 是否启用极简模式（隐藏图例、坐标轴等） |
+
+## 示例
+
+### 面积图
+
+::: demo 面积图
+```vue
+<template>
+  <XtLine :chart-data="chartData" :is-area="true" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "1月" },
+        { value: 60, label: "2月" },
+        { value: 78, label: "3月" },
+        { value: 82, label: "4月" },
+        { value: 95, label: "5月" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 极简模式
+
+::: demo 极简模式
+```vue
+<template>
+  <XtLine :chart-data="chartData" simple-mode />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "A" },
+        { value: 60, label: "B" },
+        { value: 78, label: "C" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义字段映射
+
+::: demo 自定义字段映射
+```vue
+<template>
+  <XtLine :chart-data="chartData" :field-keys="{ label: 'month', value: 'amount' }" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { month: "1月", amount: 53 },
+        { month: "2月", amount: 60 },
+        { month: "3月", amount: 78 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtLine :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "张三" },
+        { value: 60, label: "李四" },
+        { value: 78, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- 折线图默认使用平滑曲线
+- 数据值大于等于 10000 时会自动转换为"万"单位显示