xt-element-ui 2.0.0 → 2.0.2

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

@@ -1,84 +1,84 @@
-## XtPage 页面组件
-
-页面布局组件，提供 header、main、footer、aside 区域的布局，支持高度自适应。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtPage>
-    <template #header>页面标题</template>
-    <template #default="{ tableHeight }">
-      <XtTable :height="tableHeight" :table-data="tableData" :columns="columns" />
-    </template>
-    <template #footer>页面底部</template>
-  </XtPage>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      tableData: [],
-      columns: []
-    }
-  }
-}
-</script>
-```
-:::
-
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `showHeader` | Boolean | `true` | 是否显示头部 |
-| `showFooter` | Boolean | `true` | 是否显示底部 |
-| `showAside` | Boolean | `true` | 是否显示侧边栏 |
-| `asideWidth` | String | - | 侧边栏宽度 |
-| `diffHeight` | Number | `60` | 差值高度 |
-| `minHeight` | Number | `200` | 最小高度 |
-
-## 插槽说明
-
-| 插槽名 | 说明 |
-|--------|------|
-| `default` | 主内容区域，接收 `tableHeight` 参数 |
-| `header` | 头部区域 |
-| `footer` | 底部区域 |
-| `aside` | 侧边栏区域 |
-| `dialog` | 弹窗区域 |
-
-## 示例
-
-### 带侧边栏
-
-::: demo 带侧边栏
-```vue
-<template>
-  <XtPage aside-width="200px">
-    <template #header>页面标题</template>
-    <template #aside>侧边栏内容</template>
-    <template #default>主内容</template>
-  </XtPage>
-</template>
-```
-:::
-
-### 仅主内容
-
-::: demo 仅主内容
-```vue
-<template>
-  <XtPage :show-header="false" :show-footer="false">
-    <template #default>仅主内容区域</template>
-  </XtPage>
-</template>
-```
-:::
-
-## 注意事项
-
-- 默认插槽会传入 `tableHeight` 参数，用于表格高度自适应
+## XtPage 页面组件
+
+页面布局组件，提供 header、main、footer、aside 区域的布局，支持高度自适应。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtPage>
+    <template #header>页面标题</template>
+    <template #default="{ tableHeight }">
+      <XtTable :height="tableHeight" :table-data="tableData" :columns="columns" />
+    </template>
+    <template #footer>页面底部</template>
+  </XtPage>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: []
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `showHeader` | Boolean | `true` | 是否显示头部 |
+| `showFooter` | Boolean | `true` | 是否显示底部 |
+| `showAside` | Boolean | `true` | 是否显示侧边栏 |
+| `asideWidth` | String | - | 侧边栏宽度 |
+| `diffHeight` | Number | `60` | 差值高度 |
+| `minHeight` | Number | `200` | 最小高度 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 主内容区域，接收 `tableHeight` 参数 |
+| `header` | 头部区域 |
+| `footer` | 底部区域 |
+| `aside` | 侧边栏区域 |
+| `dialog` | 弹窗区域 |
+
+## 示例
+
+### 带侧边栏
+
+::: demo 带侧边栏
+```vue
+<template>
+  <XtPage aside-width="200px">
+    <template #header>页面标题</template>
+    <template #aside>侧边栏内容</template>
+    <template #default>主内容</template>
+  </XtPage>
+</template>
+```
+:::
+
+### 仅主内容
+
+::: demo 仅主内容
+```vue
+<template>
+  <XtPage :show-header="false" :show-footer="false">
+    <template #default>仅主内容区域</template>
+  </XtPage>
+</template>
+```
+:::
+
+## 注意事项
+
+- 默认插槽会传入 `tableHeight` 参数，用于表格高度自适应
 - 组件会监听窗口大小变化，自动调整表格高度

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

@@ -1,175 +1,175 @@
-## XtPie 饼图组件
-
-基于 ECharts 封装的饼图组件，支持环形图、玫瑰图、自定义颜色等功能。
-
-## 基本用法
-
-::: demo 基本用法
-```vue
-<template>
-  <XtPie :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` |
-| `colors` | Array | `[]` | 自定义颜色数组 |
-| `unit` | String | `""` | 数据单位 |
-| `showLegend` | Boolean | `true` | 是否显示图例 |
-| `simpleMode` | Boolean | `false` | 是否启用极简模式 |
-| `roseType` | String | `""` | 玫瑰图类型，`""` / `radius` / `area` |
-| `showLabel` | Boolean | `true` | 是否显示标签 |
-| `totalLabel` | String | `"总数"` | 中心总数标签文本 |
-
-## 示例
-
-### 玫瑰图
-
-::: demo 玫瑰图
-```vue
-<template>
-  <XtPie :chart-data="chartData" rose-type="radius" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 53, label: "北京" },
-        { value: 60, label: "上海" },
-        { value: 78, label: "广州" },
-        { value: 82, label: "深圳" },
-        { value: 95, label: "杭州" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 隐藏图例
-
-::: demo 隐藏图例
-```vue
-<template>
-  <XtPie :chart-data="chartData" :show-legend="false" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 30, label: "A" },
-        { value: 25, label: "B" },
-        { value: 20, label: "C" },
-        { value: 25, label: "D" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 自定义颜色
-
-::: demo 自定义颜色
-```vue
-<template>
-  <XtPie :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14', '#f5222d']" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 30, label: "红色" },
-        { value: 25, label: "蓝色" },
-        { value: 20, label: "绿色" },
-        { value: 25, label: "黄色" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 极简模式
-
-::: demo 极简模式
-```vue
-<template>
-  <XtPie :chart-data="chartData" simple-mode />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 30, label: "A" },
-        { value: 25, label: "B" },
-        { value: 20, label: "C" },
-        { value: 25, label: "D" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtPie :chart-data="chartData" theme="dark" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 53, label: "张三" },
-        { value: 60, label: "李四" },
-        { value: 78, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
-## 注意事项
-
-- 饼图中心会自动显示总数
+## XtPie 饼图组件
+
+基于 ECharts 封装的饼图组件，支持环形图、玫瑰图、自定义颜色等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtPie :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` |
+| `colors` | Array | `[]` | 自定义颜色数组 |
+| `unit` | String | `""` | 数据单位 |
+| `showLegend` | Boolean | `true` | 是否显示图例 |
+| `simpleMode` | Boolean | `false` | 是否启用极简模式 |
+| `roseType` | String | `""` | 玫瑰图类型，`""` / `radius` / `area` |
+| `showLabel` | Boolean | `true` | 是否显示标签 |
+| `totalLabel` | String | `"总数"` | 中心总数标签文本 |
+
+## 示例
+
+### 玫瑰图
+
+::: demo 玫瑰图
+```vue
+<template>
+  <XtPie :chart-data="chartData" rose-type="radius" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "北京" },
+        { value: 60, label: "上海" },
+        { value: 78, label: "广州" },
+        { value: 82, label: "深圳" },
+        { value: 95, label: "杭州" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 隐藏图例
+
+::: demo 隐藏图例
+```vue
+<template>
+  <XtPie :chart-data="chartData" :show-legend="false" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 30, label: "A" },
+        { value: 25, label: "B" },
+        { value: 20, label: "C" },
+        { value: 25, label: "D" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义颜色
+
+::: demo 自定义颜色
+```vue
+<template>
+  <XtPie :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14', '#f5222d']" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 30, label: "红色" },
+        { value: 25, label: "蓝色" },
+        { value: 20, label: "绿色" },
+        { value: 25, label: "黄色" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 极简模式
+
+::: demo 极简模式
+```vue
+<template>
+  <XtPie :chart-data="chartData" simple-mode />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 30, label: "A" },
+        { value: 25, label: "B" },
+        { value: 20, label: "C" },
+        { value: 25, label: "D" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtPie :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 53, label: "张三" },
+        { value: 60, label: "李四" },
+        { value: 78, label: "王五" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- 饼图中心会自动显示总数
 - 最小扇区角度为 5 度，小于此角度的扇区会合并显示