xt-element-ui 1.2.3 → 1.2.5

package/docs/components/extend/ex-multi.md

@@ -0,0 +1,156 @@
+## ExMulti - 组合图组件
+
+基于 ECharts 封装的组合图组件，支持多系列数据展示。
+
+## 基本用法
+
+::: demo 组合图基础示例
+```vue
+<template>
+  <ExChart type="multi" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+          {
+            label: "入户数",
+            unit: "户",
+            data: [
+              { label: "01月", value: 980 },
+              { label: "02月", value: 806 },
+              { label: "03月", value: 930 },
+              { label: "04月", value: 804 },
+              { label: "05月", value: 750 },
+              { label: "06月", value: 660 },
+              { label: "07月", value: 780 },
+              { label: "08月", value: 630 },
+              { label: "09月", value: 806 },
+              { label: "10月", value: 950 },
+              { label: "11月", value: 810 },
+              { label: "12月", value: 703 }
+            ]
+          },
+          {
+            label: "隐患数",
+            unit: "个",
+            data: [
+              { label: "01月", value: 200 },
+              { label: "02月", value: 120 },
+              { label: "03月", value: 110 },
+              { label: "04月", value: 109 },
+              { label: "05月", value: 108 },
+              { label: "06月", value: 150 },
+              { label: "07月", value: 126 },
+              { label: "08月", value: 130 },
+              { label: "09月", value: 108 },
+              { label: "10月", value: 109 },
+              { label: "11月", value: 140 },
+              { label: "12月", value: 106 }
+            ]
+          },
+          {
+            label: "整改数",
+            unit: "个",
+            data: [
+              { label: "01月", value: 25 },
+              { label: "02月", value: 19 },
+              { label: "03月", value: 34 },
+              { label: "04月", value: 12 },
+              { label: "05月", value: 16 },
+              { label: "06月", value: 20 },
+              { label: "07月", value: 19 },
+              { label: "08月", value: 18 },
+              { label: "09月", value: 14 },
+              { label: "10月", value: 12 },
+              { label: "11月", value: 11 },
+              { label: "12月", value: 16 }
+            ]
+          }
+        ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 三系列组合
+
+::: demo 三系列组合图示例
+```vue
+<template>
+  <ExChart type="multi" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        {
+          label: "收入",
+          data: [
+            { label: "Q1", value: 1200 },
+            { label: "Q2", value: 1500 },
+            { label: "Q3", value: 1800 },
+            { label: "Q4", value: 2200 }
+          ]
+        },
+        {
+          label: "支出",
+          data: [
+            { label: "Q1", value: 800 },
+            { label: "Q2", value: 950 },
+            { label: "Q3", value: 1100 },
+            { label: "Q4", value: 1250 }
+          ]
+        },
+        {
+          label: "利润",
+          data: [
+            { label: "Q1", value: 400 },
+            { label: "Q2", value: 550 },
+            { label: "Q3", value: 700 },
+            { label: "Q4", value: 950 }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | [] | 图表数据，支持多个系列 |
+| `theme` | String | '' | 主题名称 |
+| `size` | String | 'medium' | 尺寸 |
+
+## 数据格式
+
+```javascript
+[
+  {
+    label: "系列名称1",
+    data: [
+      { label: "分类1", value: 数值 },
+      { label: "分类2", value: 数值 },
+      // ...
+    ]
+  },
+  {
+    label: "系列名称2",
+    data: [
+      { label: "分类1", value: 数值 },
+      // ...
+    ]
+  }
+]
+```

package/docs/components/extend/ex-page.md

@@ -0,0 +1,75 @@
+## ExPage 页面布局组件文档
+
+### 组件说明
+
+ExPage 是基于 Element UI el-container 封装的通用页面布局组件，内置头部、侧边栏、主体、底部插槽，自动计算主体区域高度并向外透传，常用于页面表格、内容区自适应高度场景，支持窗口大小变化实时重算高度。
+
+### 基本信息
+
+. 组件名称：ExPage
+
+. 依赖：Element UI
+
+. 适用场景：后台管理系统标准页面布局、表格页面自适应高度、带侧边栏 / 头部 / 底部的组合页面
+ 
+
+
+
+## 基础用法
+
+::: demo 按钮基础示例
+```vue
+<template>
+  <div>
+    <ex-button>默认按钮</ex-button>
+    <ex-button type="primary">主要按钮</ex-button>
+    <ex-button type="success">成功按钮</ex-button>
+  </div>
+</template>
+```
+:::
+
+## 字体大小
+
+支持三种尺寸：`small`、`medium`、`large`
+
+::: demo 按钮字体大小示例
+```vue
+<template>
+  <div>
+    <ex-button size="mini">迷你按钮</ex-button>
+    <ex-button size="small">小按钮</ex-button>
+    <ex-button size="medium">中按钮</ex-button>
+    <ex-button size="large">大按钮</ex-button>
+  </div>
+</template>
+```
+:::
+
+## 继承 ConfigProvider 配置
+
+当 ExButton 被包裹在 XtConfigProvider 中时，会自动继承字体大小配置：
+
+::: demo 按钮继承字体大小示例
+```vue
+<template>
+  <xt-config-provider size="large">
+    <ex-button>自动继承大字体</ex-button>
+  </xt-config-provider>
+</template>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| type | 按钮类型 | string | primary/success/warning/danger | — |
+| size | 按钮尺寸 | string | small/medium/large | — |
+| throttle | 点击节流时间 (ms) | number | — | 0 |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| click | 点击按钮时触发 | — |

package/docs/components/extend/ex-pie.md

@@ -0,0 +1,70 @@
+## ExPie - 饼图组件
+
+基于 ECharts 封装的饼图组件。
+
+## 基本用法
+
+::: demo 饼图基础示例
+```vue
+<template>
+  <ExChart type="pie" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '苹果', value: 35 },
+        { name: '香蕉', value: 25 },
+        { name: '橙子', value: 20 },
+        { name: '葡萄', value: 15 },
+        { name: '其他', value: 5 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 玫瑰图
+
+::: demo 玫瑰图示例
+```vue
+<template>
+  <ExChart type="pie" :chartData="chartData" roseType="area" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '手机端', value: 4520 },
+        { name: 'PC端', value: 3280 },
+        { name: '平板端', value: 1250 },
+        { name: '小程序', value: 2150 },
+        { name: 'H5页面', value: 1800 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | [] | 图表数据 |
+| `theme` | String | '' | 主题名称 |
+| `size` | String | 'medium' | 尺寸 |
+| `colors` | Array | [] | 自定义颜色数组 |
+| `unit` | String | '' | 数值单位 |
+| `showLegend` | Boolean | true | 是否显示图例 |
+| `showLabel` | Boolean | true | 是否显示标签 |
+| `chartMode` | String | 'dark' | 图表模式 |
+| `roseType` | String | '' | 玫瑰图类型 |
+| `totalLabel` | String | '总数' | 总数标签文本 |

package/docs/components/extend/ex-select-tree.md

@@ -0,0 +1,210 @@
+## ExSelectTree 树形下拉选择
+
+将 ElementUI 的 `el-tree` 与 `el-select` 结合，支持单选/多选、搜索过滤、树形层级展开等功能。
+
+## 基础用法
+
+最基础的单选用法：
+
+::: demo 树形选择基础示例
+```vue
+<template>
+  <ex-select-tree
+    v-model="value"
+    :data="treeData"
+    placeholder="请选择部门"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      treeData: [
+        {
+          value: 1, label: '研发部',
+          children: [
+            { value: 11, label: '前端组' },
+            { value: 12, label: '后端组' }
+          ]
+        },
+        { value: 2, label: '市场部' },
+        { value: 3, label: '运营部' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 多选模式
+
+设置 `multiple` 属性开启多选，选中项以英文逗号分隔显示：
+
+::: demo 树形选择多选示例
+```vue
+<template>
+  <ex-select-tree
+    v-model="value"
+    :data="treeData"
+    multiple
+    placeholder="请选择部门"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: [],
+      treeData: [
+        { value: 1, label: '研发部', children: [
+          { value: 11, label: '前端组' },
+          { value: 12, label: '后端组' }
+        ]},
+        { value: 2, label: '市场部' },
+        { value: 3, label: '运营部' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 自定义节点字段
+
+通过 `props` 属性可自定义节点字段映射：
+
+::: demo 树形选择自定义字段
+```vue
+<template>
+  <ex-select-tree
+    v-model="value"
+    :data="treeData"
+    :props="{ value: 'id', label: 'name', children: 'sub' }"
+    placeholder="请选择"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      treeData: [
+        { id: 1, name: '选项一', sub: [
+          { id: 11, name: '子选项一' },
+          { id: 12, name: '子选项二' }
+        ]},
+        { id: 2, name: '选项二' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 仅叶子节点可选
+
+设置 `checkLeafOnly` 使多选模式下仅叶子节点会被纳入结果：
+
+::: demo 仅叶子可选
+```vue
+<template>
+  <ex-select-tree
+    v-model="value"
+    :data="treeData"
+    multiple
+    check-leaf-only
+    placeholder="请选择"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: [],
+      treeData: [
+        { value: 1, label: '总部', children: [
+          { value: 11, label: '上海' },
+          { value: 12, label: '北京' }
+        ]},
+        { value: 2, label: '分部', children: [
+          { value: 21, label: '广州' }
+        ]}
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 可清空与禁用
+
+支持 `clearable` 与 `disabled` 属性：
+
+::: demo 可清空与禁用示例
+```vue
+<template>
+  <div>
+    <ex-select-tree v-model="v1" :data="data" clearable placeholder="可清空" />
+    <ex-select-tree v-model="v2" :data="data" disabled placeholder="已禁用" style="margin-left: 20px" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      v1: '',
+      v2: '',
+      data: [
+        { value: 1, label: '选项一' },
+        { value: 2, label: '选项二' }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| data | 树形数据 | array | — | [] |
+| props | 节点字段配置 | object | — | {value:'value', label:'label', children:'children', disabled:'disabled', isLeaf:'isLeaf'} |
+| multiple | 是否多选 | boolean | — | false |
+| clearable | 是否可清空 | boolean | — | false |
+| disabled | 是否禁用 | boolean | — | false |
+| filterable | 是否可搜索过滤 | boolean | — | true |
+| check-strictly | 是否父子节点不联动 | boolean | — | false |
+| check-leaf-only | 多选时是否仅返回叶子节点 | boolean | — | false |
+| include-half-checked | 多选时是否包含半选节点 | boolean | — | false |
+| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
+| lazy | 是否懒加载子节点 | boolean | — | false |
+| load | 懒加载加载函数 | function | — | — |
+| placeholder | 占位符 | string | — | 请选择 |
+| size | 输入框尺寸 | string | medium/small/mini | — |
+| placement | 弹出位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-start |
+| popover-width | 弹出层宽度（px） | number | — | — |
+| node-key | 节点唯一标识 | string | — | value |
+| highlight-current | 是否高亮当前选中节点 | boolean | — | true |
+| indent | 相邻级节点间的水平缩进（px） | number | — | — |
+| accordion | 是否每次只打开一个同级树节点 | boolean | — | false |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 值改变时触发 | (value, node) |
+| clear | 清空时触发 | — |
+| focus | 获得焦点 | — |
+| blur | 失去焦点 | — |