xt-element-ui 2.0.0 → 2.0.2

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

@@ -1,139 +1,139 @@
-## XtBadge 徽标组件
-
-徽标组件，用于标记数字或状态。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtBadge :value="12">
-    <XtButton size="small">评论</XtButton>
-  </XtBadge>
-</template>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `value` | String / Number | - | - | 显示的数值 |
-| `max` | Number | - | - | 最大值，超过会显示 {max}+ |
-| `isDot` | Boolean | `false` | - | 是否显示小圆点 |
-| `hidden` | Boolean | `false` | - | 是否隐藏徽标 |
-| `type` | String | - | `primary`、`success`、`warning`、`danger` | 徽标类型 |
-| `offset` | Array | `[0, 0]` | - | 设置徽标的偏移量，数组的两项分别对应水平和垂直偏移 |
-
-## 示例
-
-### 不同类型
-
-::: demo 不同类型
-```vue
-<template>
-  <div style="display: flex; gap: 16px;">
-    <XtBadge :value="12" type="primary">
-      <XtButton size="small">评论</XtButton>
-    </XtBadge>
-    <XtBadge :value="3" type="success">
-      <XtButton size="small">回复</XtButton>
-    </XtBadge>
-    <XtBadge :value="5" type="warning">
-      <XtButton size="small">通知</XtButton>
-    </XtBadge>
-    <XtBadge :value="99+" type="danger">
-      <XtButton size="small">消息</XtButton>
-    </XtBadge>
-  </div>
-</template>
-```
-:::
-
-### 小圆点模式
-
-::: demo 小圆点模式
-```vue
-<template>
-  <div style="display: flex; gap: 16px;">
-    <XtBadge is-dot>
-      <XtButton size="small">消息</XtButton>
-    </XtBadge>
-    <XtBadge is-dot type="success">
-      <XtButton size="small">在线</XtButton>
-    </XtBadge>
-    <XtBadge is-dot type="danger">
-      <XtButton size="small">错误</XtButton>
-    </XtBadge>
-  </div>
-</template>
-```
-:::
-
-### 最大值
-
-::: demo 最大值
-```vue
-<template>
-  <div style="display: flex; gap: 16px;">
-    <XtBadge :value="100" :max="99">
-      <XtButton size="small">消息</XtButton>
-    </XtBadge>
-    <XtBadge :value="200" :max="99">
-      <XtButton size="small">通知</XtButton>
-    </XtBadge>
-    <XtBadge :value="999" :max="99">
-      <XtButton size="small">评论</XtButton>
-    </XtBadge>
-  </div>
-</template>
-```
-:::
-
-### 隐藏徽标
-
-::: demo 隐藏徽标
-```vue
-<template>
-  <div style="display: flex; gap: 16px;">
-    <XtBadge :value="12">
-      <XtButton size="small">显示徽标</XtButton>
-    </XtBadge>
-    <XtBadge :value="12" hidden>
-      <XtButton size="small">隐藏徽标</XtButton>
-    </XtBadge>
-  </div>
-</template>
-```
-:::
-
-### 自定义偏移
-
-::: demo 自定义偏移
-```vue
-<template>
-  <XtBadge :value="12" :offset="[10, 10]">
-    <XtButton size="small">自定义偏移</XtButton>
-  </XtBadge>
-</template>
-```
-:::
-
-### 独立使用
-
-::: demo 独立使用
-```vue
-<template>
-  <div style="display: flex; gap: 16px;">
-    <XtBadge :value="12" />
-    <XtBadge :value="99+" type="danger" />
-    <XtBadge is-dot type="success" />
-  </div>
-</template>
-```
-:::
-
-## 注意事项
-
-- `max` 属性仅对数字类型的 `value` 有效
+## XtBadge 徽标组件
+
+徽标组件，用于标记数字或状态。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtBadge :value="12">
+    <XtButton size="small">评论</XtButton>
+  </XtBadge>
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` | String / Number | - | - | 显示的数值 |
+| `max` | Number | - | - | 最大值，超过会显示 {max}+ |
+| `isDot` | Boolean | `false` | - | 是否显示小圆点 |
+| `hidden` | Boolean | `false` | - | 是否隐藏徽标 |
+| `type` | String | - | `primary`、`success`、`warning`、`danger` | 徽标类型 |
+| `offset` | Array | `[0, 0]` | - | 设置徽标的偏移量，数组的两项分别对应水平和垂直偏移 |
+
+## 示例
+
+### 不同类型
+
+::: demo 不同类型
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12" type="primary">
+      <XtButton size="small">评论</XtButton>
+    </XtBadge>
+    <XtBadge :value="3" type="success">
+      <XtButton size="small">回复</XtButton>
+    </XtBadge>
+    <XtBadge :value="5" type="warning">
+      <XtButton size="small">通知</XtButton>
+    </XtBadge>
+    <XtBadge :value="99+" type="danger">
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 小圆点模式
+
+::: demo 小圆点模式
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge is-dot>
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+    <XtBadge is-dot type="success">
+      <XtButton size="small">在线</XtButton>
+    </XtBadge>
+    <XtBadge is-dot type="danger">
+      <XtButton size="small">错误</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 最大值
+
+::: demo 最大值
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="100" :max="99">
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+    <XtBadge :value="200" :max="99">
+      <XtButton size="small">通知</XtButton>
+    </XtBadge>
+    <XtBadge :value="999" :max="99">
+      <XtButton size="small">评论</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 隐藏徽标
+
+::: demo 隐藏徽标
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12">
+      <XtButton size="small">显示徽标</XtButton>
+    </XtBadge>
+    <XtBadge :value="12" hidden>
+      <XtButton size="small">隐藏徽标</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 自定义偏移
+
+::: demo 自定义偏移
+```vue
+<template>
+  <XtBadge :value="12" :offset="[10, 10]">
+    <XtButton size="small">自定义偏移</XtButton>
+  </XtBadge>
+</template>
+```
+:::
+
+### 独立使用
+
+::: demo 独立使用
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12" />
+    <XtBadge :value="99+" type="danger" />
+    <XtBadge is-dot type="success" />
+  </div>
+</template>
+```
+:::
+
+## 注意事项
+
+- `max` 属性仅对数字类型的 `value` 有效
 - 当 `value` 为 0 时，徽标默认显示，可以通过 `hidden` 属性控制显示/隐藏

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

@@ -1,182 +1,182 @@
-## XtBar 柱状图组件
-
-基于 ECharts 封装的柱状图组件，支持数据标记、缩放、反转、长标签等功能。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtBar :chart-data="chartData" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 70, label: "唐九" },
-        { value: 73, label: "钱一" },
-        { value: 78, label: "孙二" },
-        { value: 88, label: "刘八" },
-        { value: 93, label: "王七" },
-        { value: 99, label: "赵六" },
-        { value: 103, label: "宋五" },
-        { value: 113, label: "李四" },
-        { value: 125, label: "张三" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `chartData` | Array | - | 图表数据，格式为 `[{ label, value }]` |
-| `fieldKeys` | Object | `{ label: "label", value: "value", data: "data" }` | 字段映射配置 |
-| `theme` | String | - | 主题，`dark` 或 `default` |
-| `size` | String | `medium` | 尺寸，`small` / `medium` / `large` |
-| `markPoint` | Boolean | `false` | 是否显示最大值/最小值标记 |
-| `unit` | String | `""` | 数据单位 |
-| `showZoom` | Boolean | `false` | 是否显示缩放条 |
-| `reverse` | Boolean | `false` | 是否反转坐标轴（横向柱状图） |
-| `longLable` | Boolean | `false` | 是否启用长标签换行 |
-| `longLableSplitNum` | Number | `1` | 长标签换行间隔字符数 |
-| `longLablePx` | Number | `150` | 长标签预留像素宽度 |
-| `splitNumber` | Number | `5` | Y 轴分割段数 |
-| `simpleMode` | Boolean | `false` | 是否启用极简模式（隐藏图例、坐标轴等） |
-
-## 示例
-
-### 横向柱状图
-
-::: demo 横向柱状图
-```vue
-<template>
-  <XtBar :chart-data="chartData" reverse />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" },
-        { value: 82, label: "赵六" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 显示数据标记
-
-::: demo 显示数据标记
-```vue
-<template>
-  <XtBar :chart-data="chartData" :mark-point="true" />
-</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>
-  <XtBar :chart-data="chartData" simple-mode />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "A" },
-        { value: 78, label: "B" },
-        { value: 95, label: "C" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 自定义字段映射
-
-::: demo 自定义字段映射
-```vue
-<template>
-  <XtBar :chart-data="chartData" :field-keys="{ label: 'name', value: 'score' }" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { name: "张三", score: 65 },
-        { name: "李四", score: 78 },
-        { name: "王五", score: 95 }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtBar :chart-data="chartData" theme="dark" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 注意事项
-
-- 数据值大于等于 10000 时会自动转换为"万"单位显示
+## XtBar 柱状图组件
+
+基于 ECharts 封装的柱状图组件，支持数据标记、缩放、反转、长标签等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtBar :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 70, label: "唐九" },
+        { value: 73, label: "钱一" },
+        { value: 78, label: "孙二" },
+        { value: 88, label: "刘八" },
+        { value: 93, label: "王七" },
+        { value: 99, label: "赵六" },
+        { value: 103, label: "宋五" },
+        { value: 113, label: "李四" },
+        { value: 125, label: "张三" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | - | 图表数据，格式为 `[{ label, value }]` |
+| `fieldKeys` | Object | `{ label: "label", value: "value", data: "data" }` | 字段映射配置 |
+| `theme` | String | - | 主题，`dark` 或 `default` |
+| `size` | String | `medium` | 尺寸，`small` / `medium` / `large` |
+| `markPoint` | Boolean | `false` | 是否显示最大值/最小值标记 |
+| `unit` | String | `""` | 数据单位 |
+| `showZoom` | Boolean | `false` | 是否显示缩放条 |
+| `reverse` | Boolean | `false` | 是否反转坐标轴（横向柱状图） |
+| `longLable` | Boolean | `false` | 是否启用长标签换行 |
+| `longLableSplitNum` | Number | `1` | 长标签换行间隔字符数 |
+| `longLablePx` | Number | `150` | 长标签预留像素宽度 |
+| `splitNumber` | Number | `5` | Y 轴分割段数 |
+| `simpleMode` | Boolean | `false` | 是否启用极简模式（隐藏图例、坐标轴等） |
+
+## 示例
+
+### 横向柱状图
+
+::: demo 横向柱状图
+```vue
+<template>
+  <XtBar :chart-data="chartData" reverse />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" },
+        { value: 82, label: "赵六" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 显示数据标记
+
+::: demo 显示数据标记
+```vue
+<template>
+  <XtBar :chart-data="chartData" :mark-point="true" />
+</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>
+  <XtBar :chart-data="chartData" simple-mode />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "A" },
+        { value: 78, label: "B" },
+        { value: 95, label: "C" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义字段映射
+
+::: demo 自定义字段映射
+```vue
+<template>
+  <XtBar :chart-data="chartData" :field-keys="{ label: 'name', value: 'score' }" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: "张三", score: 65 },
+        { name: "李四", score: 78 },
+        { name: "王五", score: 95 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtBar :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- 数据值大于等于 10000 时会自动转换为"万"单位显示
 - 数据值大于等于 10000000 时会自动转换为"千万"单位显示