xt-element-ui 2.1.22 → 2.1.72

package/docs/components/base/xt-map-provider.md

@@ -1,5 +1,3 @@
-## XtMapProvider 统一地图提供组件
-
 ### 全局配置（推荐）
 
 使用 `XtMapProvider` 统一配置项目中所有地图，无需在每个 `<XtMap>` 上重复写密钥：

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

@@ -1,5 +1,3 @@
-## XtMap 统一地图组件
-
 基于「高德 / 天地图 / 百度」三大地图服务商二次开发，对外暴露统一的 API，解决不同地图 SDK 的使用差异。支持暗黑主题、密钥/URL 灵活配置、地图类型动态切换。
 
 ### 核心特性

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

@@ -1,5 +1,3 @@
-## XtMulti 组合图组件
-
 基于 ECharts 封装的组合图组件，支持多系列数据展示，自动根据单位分组使用不同 Y 轴。
 
 ## 基本用法
@@ -7,7 +5,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtMulti :chart-data="chartData" />
+  <div class="demo-container"><XtMulti :chart-data="chartData" /></div>
 </template>
 
 <script>
@@ -70,7 +68,7 @@ export default {
 ::: demo 多单位组合图
 ```vue
 <template>
-  <XtMulti :chart-data="chartData" />
+  <div class="demo-container"><XtMulti :chart-data="chartData" /></div>
 </template>
 
 <script>
@@ -118,7 +116,7 @@ export default {
 ::: demo 折线与柱状图组合
 ```vue
 <template>
-  <XtMulti :chart-data="chartData" />
+  <div class="demo-container"><XtMulti :chart-data="chartData" /></div>
 </template>
 
 <script>
@@ -159,7 +157,7 @@ export default {
 ::: demo 自定义颜色
 ```vue
 <template>
-  <XtMulti :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14']" />
+  <div class="demo-container"><XtMulti :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14']" /></div>
 </template>
 
 <script>
@@ -204,7 +202,7 @@ export default {
 ::: demo 极简模式
 ```vue
 <template>
-  <XtMulti :chart-data="chartData" simple-mode />
+  <div class="demo-container"><XtMulti :chart-data="chartData" simple-mode /></div>
 </template>
 
 <script>
@@ -234,43 +232,6 @@ export default {
 ```
 :::
 
-### 暗色主题
-
-::: 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 轴

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

@@ -8,11 +8,15 @@
 ```vue
 <template>
   <XtPage>
-    <template #header>页面标题</template>
-    <template #default="{ tableHeight }">
-      <XtTable :height="tableHeight" :table-data="tableData" :columns="columns" />
+    <template slot="header">页面标题</template>
+    <template slot-scope="scope">
+      <XtTable
+        :table-data="tableData"
+        :height="scope.tableHeight"
+        :columns="columns"
+      />
     </template>
-    <template #footer>页面底部</template>
+    <template slot="footer">页面底部</template>
   </XtPage>
 </template>
 
@@ -20,8 +24,15 @@
 export default {
   data() {
     return {
-      tableData: [],
-      columns: []
+      tableData: [
+        { name: '张三', age: 18 },
+        { name: '李四', age: 20 }
+      ],
+      columns: [
+        { prop: "name", label:"姓名" },
+        { prop: "age", label:"年龄" },
+        { label: '操作', slot: 'action' }
+      ]
     }
   }
 }

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

@@ -1,5 +1,3 @@
-## XtPie 饼图组件
-
 基于 ECharts 封装的饼图组件，支持环形图、玫瑰图、自定义颜色等功能。
 
 ## 基本用法
@@ -7,7 +5,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtPie :chart-data="chartData" />
+  <div class="demo-container"><XtPie :chart-data="chartData" /></div>
 </template>
 
 <script>
@@ -49,7 +47,7 @@ export default {
 ::: demo 玫瑰图
 ```vue
 <template>
-  <XtPie :chart-data="chartData" rose-type="radius" />
+  <div class="demo-container"><XtPie :chart-data="chartData" rose-type="radius" /></div>
 </template>
 
 <script>
@@ -75,7 +73,7 @@ export default {
 ::: demo 隐藏图例
 ```vue
 <template>
-  <XtPie :chart-data="chartData" :show-legend="false" />
+  <div class="demo-container"><XtPie :chart-data="chartData" :show-legend="false" /></div>
 </template>
 
 <script>
@@ -100,7 +98,7 @@ export default {
 ::: demo 自定义颜色
 ```vue
 <template>
-  <XtPie :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14', '#f5222d']" />
+  <div class="demo-container"><XtPie :chart-data="chartData" :colors="['#1890ff', '#52c41a', '#faad14', '#f5222d']" /></div>
 </template>
 
 <script>
@@ -125,7 +123,7 @@ export default {
 ::: demo 极简模式
 ```vue
 <template>
-  <XtPie :chart-data="chartData" simple-mode />
+  <div class="demo-container"><XtPie :chart-data="chartData" simple-mode /></div>
 </template>
 
 <script>
@@ -145,29 +143,6 @@ export default {
 ```
 :::
 
-### 暗色主题
-
-::: 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>
-```
-:::
 
 ## 注意事项
 

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

@@ -1,5 +1,3 @@
-## XtProgress 进度条组件
-
 进度条组件，用于展示任务完成进度。
 
 ## 基本用法

package/docs/components/base/xt-scroll-arrow.md

@@ -1,5 +1,3 @@
-## XtScrollArrow 滚动箭头组件
-
 滚动箭头组件用于在内容溢出时显示滚动箭头，支持水平和垂直方向的滚动。
 
 ## 基本用法

package/docs/components/base/xt-select-tree.md

@@ -1,5 +1,3 @@
-## XtSelectTree 下拉选择树组件
-
 下拉选择树组件，基于 ElementUI Tree 封装，支持单选、多选、懒加载等功能。
 
 ## 基本用法

package/docs/components/base/xt-step-price.md

@@ -1,5 +1,3 @@
-## XtStepPrice 阶梯价格组件
-
 用于配置阶梯式价格、数量区间等场景，支持区间自动校正、批量删除、自定义字段名等功能。
 
 ### 核心特性
@@ -42,7 +40,7 @@ Vue.component(XtStepPriceItem.name, XtStepPriceItem)
 ```
 
 ### 基本用法
-
+::: demo
 ```vue
 <template>
   <div style="width: 600px;">
@@ -72,6 +70,7 @@ export default {
 }
 </script>
 ```
+:::
 
 ### 自定义字段名
 
@@ -121,7 +120,7 @@ export default {
 | `fieldKeys` | Object | `{ min: 'min', max: 'max', price: 'price' }` | 字段名映射，支持自定义字段名 |
 | `limit` | Number | `0` | 阶梯数量上限，<=0 表示不限制 |
 | `step` | Number | `10` | 阶梯增量，新增时自动填充下一级的 min 值 |
-| `disabled` | Boolean | `false` | 是否禁用所有操作 |
+| `disabled` | Boolean | `false` | 是否禁用所有操作 |
 | `allowNegative` | Boolean | `false` | 是否允许输入负数价格和下限 |
 | `tip` | String | `'区间左闭右闭 [min, max]，最后一级为 [min, +∞)，保证连续且不重叠。'` | 底部提示文本 |
 | `defaultFirst` | Boolean | `true` | 空数组时是否自动生成默认阶梯 |

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

@@ -93,8 +93,8 @@ export default {
   fixed: true,           // 是否固定
   align: 'center',       // 对齐方式
   sortable: true,        // 是否可排序
-  render: (scope) => {}, // 自定义渲染函数
-  formatter: (row, col) => {}, // 格式化函数
+  render: (h, { row, index, column }) => {}, // 自定义渲染函数 返回 VNode
+  formatter: (row, index, column) => {}, // 返回字符串
   slot: 'custom-slot',    // 自定义插槽名
   children: []           // 多级表头
 }

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

@@ -1,5 +1,3 @@
-## XtTabs 标签页组件
-
 标签页组件，用于切换不同内容区域。
 
 ## 基本用法

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

@@ -1,5 +1,3 @@
-## XtText 文本组件
-
 文本组件用于展示不同样式的文本内容。
 
 ## 基本用法
@@ -8,6 +6,7 @@
 ```vue
 <template>
   <XtText type="primary">主要文本</XtText>
+  <div style="width: 80px;"><XtText ellipsis>溢出隐藏文本溢出隐藏文本</XtText></div>
 </template>
 ```
 :::

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

@@ -1,5 +1,3 @@
-## XtTime 时间组件
-
 集三种模式于一身的时间组件：当前时间实时显示、目标时间倒计时、日期文本格式化展示。
 
 ## 基本用法

package/docs/components/base/xt-transfer-tree.md

@@ -0,0 +1,270 @@
+树形穿梭框组件，支持树形结构数据的穿梭，提供多种穿梭模式满足不同业务场景。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtTransferTree 
+    :data="treeData" 
+    v-model="selectedIds" 
+    :height="400"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedIds: [],
+      treeData: [
+        {
+          id: '1',
+          label: '一级菜单',
+          children: [
+            {
+              id: '1-1',
+              label: '二级菜单1'
+            },
+            {
+              id: '1-2',
+              label: '二级菜单2'
+            }
+          ]
+        },
+        {
+          id: '2',
+          label: '一级菜单2',
+          children: [
+            {
+              id: '2-1',
+              label: '二级菜单3'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` / `v-model` | Array | `[]` | - | 已选择的节点 ID 数组 |
+| `data` | Array | `[]` | - | 树形数据源 |
+| `leftTitle` | String | `待选择` | - | 左侧面板标题 |
+| `rightTitle` | String | `已选择` | - | 右侧面板标题 |
+| `treeProps` | Object | `{ label, children, value }` | - | 树节点属性配置 |
+| `defaultExpandAll` | Boolean | `true` | - | 是否默认展开所有节点 |
+| `filterable` | Boolean | `false` | - | 是否支持搜索过滤 |
+| `showCheckbox` | Boolean | `true` | - | 是否显示复选框 |
+| `cascade` | Boolean | `true` | - | 是否级联选择 |
+| `transferMode` | String | `single` | `single`, `multiple`, `parent-child` | 穿梭模式 |
+| `buttonSize` | String | `small` | - | 按钮尺寸 |
+
+## 穿梭模式说明
+
+| 模式 | 说明 |
+|------|------|
+| `single` | 单选模式，点击节点或勾选后只穿梭当前节点 |
+| `multiple` | 多选模式，勾选多个节点后一次性穿梭 |
+| `parent-child` | 父子模式，穿梭父节点时自动包含所有子节点 |
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 数据变化时触发 | `{ value, addedKeys, removedKeys }` |
+
+## 示例
+
+### 父子级联穿梭
+
+::: demo 父子级联穿梭
+```vue
+<template>
+  <XtTransferTree 
+    :data="treeData" 
+    v-model="selectedIds" 
+    :height="400"
+    transfer-mode="parent-child"
+    @change="handleChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedIds: [],
+      treeData: [
+        {
+          id: '1',
+          label: '部门A',
+          children: [
+            { id: '1-1', label: '员工1' },
+            { id: '1-2', label: '员工2' }
+          ]
+        },
+        {
+          id: '2',
+          label: '部门B',
+          children: [
+            { id: '2-1', label: '员工3' }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handleChange({ value, addedKeys, removedKeys }) {
+      console.log('已选择:', value)
+      console.log('新增:', addedKeys)
+      console.log('移除:', removedKeys)
+    }
+  }
+}
+</script>
+```
+:::
+
+### 支持搜索过滤
+
+::: demo 支持搜索过滤
+```vue
+<template>
+  <XtTransferTree 
+    :data="treeData" 
+    v-model="selectedIds" 
+    :height="400"
+    :filterable="true"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedIds: [],
+      treeData: [
+        {
+          id: '1',
+          label: '水果',
+          children: [
+            { id: '1-1', label: '苹果' },
+            { id: '1-2', label: '香蕉' },
+            { id: '1-3', label: '橙子' }
+          ]
+        },
+        {
+          id: '2',
+          label: '蔬菜',
+          children: [
+            { id: '2-1', label: '西红柿' },
+            { id: '2-2', label: '黄瓜' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 不级联选择
+
+::: demo 不级联选择
+```vue
+<template>
+  <XtTransferTree 
+    :data="treeData" 
+    v-model="selectedIds" 
+    :height="400"
+    :cascade="false"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedIds: [],
+      treeData: [
+        {
+          id: '1',
+          label: '分类1',
+          children: [
+            { id: '1-1', label: '项目1' },
+            { id: '1-2', label: '项目2' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 点击穿梭（无复选框）
+
+::: demo 点击穿梭
+```vue
+<template>
+  <XtTransferTree 
+    :data="treeData" 
+    v-model="selectedIds" 
+    :height="400"
+    :show-checkbox="false"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedIds: [],
+      treeData: [
+        {
+          id: '1',
+          label: '选项1'
+        },
+        {
+          id: '2',
+          label: '选项2'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 方法
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| `clearSelection` | 清空选择 | - |
+
+## 数据格式
+
+```javascript
+[
+  {
+    id: 'node-id',
+    label: '节点名称',
+    children: [
+      {
+        id: 'child-id',
+        label: '子节点名称'
+      }
+    ]
+  }
+]
+```

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

@@ -7,7 +7,9 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtUpload v-model="imageSrc" action="/upload" base-url="/api" />
+  <div>
+    <XtUpload v-model="imageSrc" action="/upload" base-url="/api" />
+  </div>
 </template>
 
 <script>
@@ -35,6 +37,13 @@ export default {
 | `accept` | String | `.jpg,.jpeg,.png` | 允许的文件类型 |
 | `autoUpload` | Boolean | `true` | 是否自动上传 |
 | `size` | String | `''` | 缩略图大小，可选 `big` |
+| `icon` | String | `el-icon-camera` | 自定义图标 |
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| `change` | 文件上传或删除时触发 | `src` |
 
 ## 示例
 
@@ -43,7 +52,7 @@ export default {
 ::: demo 多文件上传
 ```vue
 <template>
-  <XtUpload v-model="fileSrc" action="/upload" multiple />
+  <XtUpload v-model="fileSrc" icon="el-icon-plus" action="/upload" multiple />
 </template>
 
 <script>
@@ -77,9 +86,3 @@ export default {
 </script>
 ```
 :::
-
-## 事件
-
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| `change` | 文件上传或删除时触发 | `src` |