xt-element-ui 1.4.0 → 2.0.0

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

@@ -0,0 +1,278 @@
+## XtMulti 组合图组件
+
+基于 ECharts 封装的组合图组件，支持多系列数据展示，自动根据单位分组使用不同 Y 轴。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtMulti :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "入户数",
+          unit: "户",
+          data: [
+            { label: "01月", value: 980 },
+            { label: "02月", value: 806 },
+            { label: "03月", value: 930 }
+          ]
+        },
+        {
+          label: "隐患数",
+          unit: "个",
+          data: [
+            { label: "01月", value: 200 },
+            { label: "02月", value: 120 },
+            { label: "03月", value: 110 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | - | 图表数据，格式详见下方示例 |
+| `fieldKeys` | Object | `{ label: "label", value: "value", data: "data" }` | 字段映射配置 |
+| `theme` | String | - | 主题，`dark` 或 `default` |
+| `size` | String | `medium` | 尺寸，`small` / `medium` / `large` |
+| `colors` | Array | `[]` | 自定义颜色数组 |
+| `simpleMode` | Boolean | `false` | 是否启用极简模式 |
+| `highlightKey` | String | - | 高亮系列的 label |
+| `config` | Object | - | 配置对象 |
+
+## config 配置说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `interval` | Number | `0` | X 轴标签间隔 |
+| `rotate` | Number | `0` | X 轴标签旋转角度 |
+| `gridbottom` | Number | `40` | 底部网格间距 |
+| `isShowthreshold` | Boolean | `false` | 是否显示阈值线 |
+
+## 示例
+
+### 多单位组合图
+
+::: demo 多单位组合图
+```vue
+<template>
+  <XtMulti :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 }
+          ]
+        },
+        {
+          label: "转化率",
+          unit: "%",
+          data: [
+            { label: "1月", value: 50 },
+            { label: "2月", value: 55 },
+            { label: "3月", value: 48 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 折线与柱状图组合
+
+::: demo 折线与柱状图组合
+```vue
+<template>
+  <XtMulti :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "销售额",
+          unit: "万元",
+          type: "bar",
+          data: [
+            { label: "1月", value: 100 },
+            { label: "2月", value: 120 },
+            { label: "3月", value: 90 }
+          ]
+        },
+        {
+          label: "增长率",
+          unit: "%",
+          type: "line",
+          data: [
+            { label: "1月", value: 10 },
+            { label: "2月", value: 20 },
+            { label: "3月", value: -25 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义颜色
+
+::: demo 自定义颜色
+```vue
+<template>
+  <XtMulti :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14']" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "A系列",
+          unit: "个",
+          data: [
+            { label: "1月", value: 100 },
+            { label: "2月", value: 120 }
+          ]
+        },
+        {
+          label: "B系列",
+          unit: "个",
+          data: [
+            { label: "1月", value: 80 },
+            { label: "2月", value: 90 }
+          ]
+        },
+        {
+          label: "C系列",
+          unit: "个",
+          data: [
+            { label: "1月", value: 60 },
+            { label: "2月", value: 70 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 极简模式
+
+::: demo 极简模式
+```vue
+<template>
+  <XtMulti :chart-data="chartData" simple-mode />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "A",
+          data: [
+            { label: "1", value: 100 },
+            { label: "2", value: 120 }
+          ]
+        },
+        {
+          label: "B",
+          data: [
+            { label: "1", value: 80 },
+            { label: "2", value: 90 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: demo 暗色主题
+```vue
+<template>
+  <XtMulti :chart-data="chartData" theme="dark" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "入户数",
+          unit: "户",
+          data: [
+            { label: "01月", value: 980 },
+            { label: "02月", value: 806 }
+          ]
+        },
+        {
+          label: "隐患数",
+          unit: "个",
+          data: [
+            { label: "01月", value: 200 },
+            { label: "02月", value: 120 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 注意事项
+
+- 相同 unit 的 series 会共用同一条 Y 轴
+- 默认支持内部缩放（dataZoom）
+- 每个 series 可以通过 `type` 属性指定图表类型（`bar` 或 `line`），默认为 `bar`

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

@@ -0,0 +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` 参数，用于表格高度自适应
+- 组件会监听窗口大小变化，自动调整表格高度

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

@@ -0,0 +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>
+```
+:::
+
+## 注意事项
+
+- 饼图中心会自动显示总数
+- 最小扇区角度为 5 度，小于此角度的扇区会合并显示

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

@@ -0,0 +1,134 @@
+## XtProgress 进度条组件
+
+进度条组件，用于展示任务完成进度。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtProgress :percentage="60" />
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `percentage` | Number | `0` | 0-100 | 进度百分比 |
+| `type` | String | `line` | `line`、`circle`、`dashboard` | 进度条类型 |
+| `strokeWidth` | Number | `6` | - | 进度条宽度 |
+| `color` | String / Array | `#1890ff` | - | 进度条颜色 |
+| `status` | String | - | `success`、`exception`、`normal` | 状态 |
+| `width` | Number | `126` | - | 环形进度条宽度 |
+| `textInside` | Boolean | `false` | - | 是否将进度百分比显示在进度条内 |
+| `showText` | Boolean | `true` | - | 是否显示进度百分比 |
+| `format` | Function | - | - | 自定义进度条文字内容 |
+
+## 示例
+
+### 不同类型的进度条
+
+::: demo 不同类型的进度条
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" />
+    <XtProgress type="circle" :percentage="60" />
+    <XtProgress type="dashboard" :percentage="60" />
+  </div>
+</template>
+```
+:::
+
+### 不同状态
+
+::: demo 不同状态
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="100" status="success" />
+    <XtProgress :percentage="60" status="normal" />
+    <XtProgress :percentage="60" status="exception" />
+  </div>
+</template>
+```
+:::
+
+### 自定义颜色
+
+::: demo 自定义颜色
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" color="#52c41a" />
+    <XtProgress :percentage="60" color="#faad14" />
+    <XtProgress :percentage="60" color="#f5222d" />
+  </div>
+</template>
+```
+:::
+
+### 文字在进度条内
+
+::: demo 文字在进度条内
+```vue
+<template>
+  <XtProgress :percentage="60" :text-inside="true" :stroke-width="20" />
+</template>
+```
+:::
+
+### 自定义宽度
+
+::: demo 自定义宽度
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <XtProgress :percentage="60" :stroke-width="3" />
+    <XtProgress :percentage="60" :stroke-width="6" />
+    <XtProgress :percentage="60" :stroke-width="12" />
+  </div>
+</template>
+```
+:::
+
+### 自定义文字格式
+
+::: demo 自定义文字格式
+```vue
+<template>
+  <XtProgress :percentage="60" :format="(percent) => `${percent}% 完成`" />
+</template>
+```
+:::
+
+### 环形进度条
+
+::: demo 环形进度条
+```vue
+<template>
+  <div style="display: flex; gap: 32px;">
+    <XtProgress type="circle" :percentage="60" />
+    <XtProgress type="circle" :percentage="60" :width="80" />
+    <XtProgress type="circle" :percentage="60" :width="150" />
+  </div>
+</template>
+```
+:::
+
+### 仪表盘
+
+::: demo 仪表盘
+```vue
+<template>
+  <XtProgress type="dashboard" :percentage="60" />
+</template>
+```
+:::
+
+## 注意事项
+
+- `percentage` 属性值应在 0-100 之间
+- 环形进度条默认宽度为 126px，可以通过 `width` 属性调整