xt-element-ui 2.0.0 → 2.0.2

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

@@ -1,154 +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-')
-```
-
+## 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

@@ -1,145 +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>
-```
-:::
-
-## 注意事项
-
-- 折线图默认使用平滑曲线
+## 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 时会自动转换为"万"单位显示