xt-element-ui 2.1.5 → 2.1.7

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 阶梯价格组件
-
 用于配置阶梯式价格、数量区间等场景，支持区间自动校正、批量删除、自定义字段名等功能。
 
 ### 核心特性

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

@@ -1,5 +1,3 @@
-## XtTransferTree 树形穿梭框组件
-
 树形穿梭框组件，支持树形结构数据的穿梭，提供多种穿梭模式满足不同业务场景。
 
 ## 基本用法

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` |

package/docs/components/utils/config.md

@@ -0,0 +1,285 @@
+## 全局配置
+
+## 概述
+
+提供全局配置管理工具函数，包括配置的获取、设置、重置以及主色调配置等功能。
+
+## 方法说明
+
+### getConfig()
+
+获取当前全局配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前配置：{{ JSON.stringify(config) }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getConfig } from 'xt-element-ui'
+
+export default {
+  computed: {
+    config() {
+      return getConfig()
+    }
+  }
+}
+</script>
+```
+
+**返回值**：
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `theme` | String | 'white' | 主题类型 |
+| `size` | String | 'medium' | 字体大小 |
+| `primaryColor` | String | '#1890ff' | 主色调 |
+
+### setConfig(config)
+
+批量设置全局配置。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `config` | Object | 是 | 配置对象 |
+
+**config 参数**：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `theme` | String | 主题类型：`white`、`dark` |
+| `size` | String | 字体大小：`small`、`medium`、`large` |
+| `primaryColor` | String | 主色调，十六进制颜色格式 |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="initConfig">初始化配置</XtButton>
+  </div>
+</template>
+
+<script>
+import { setConfig } from 'xt-element-ui'
+
+export default {
+  methods: {
+    initConfig() {
+      setConfig({
+        theme: 'dark',
+        size: 'large',
+        primaryColor: '#1890ff'
+      })
+    }
+  }
+}
+</script>
+```
+
+### setPrimaryColor(color)
+
+设置全局主色调。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `color` | String | 是 | 十六进制颜色值 |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="changePrimaryColor('#ff5722')">橙色主题</XtButton>
+    <XtButton @click="changePrimaryColor('#4caf50')">绿色主题</XtButton>
+  </div>
+</template>
+
+<script>
+import { setPrimaryColor } from 'xt-element-ui'
+
+export default {
+  methods: {
+    changePrimaryColor(color) {
+      setPrimaryColor(color)
+    }
+  }
+}
+</script>
+```
+
+### getPrimaryColor()
+
+获取当前主色调配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前主色调：{{ currentColor }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getPrimaryColor } from 'xt-element-ui'
+
+export default {
+  computed: {
+    currentColor() {
+      return getPrimaryColor()
+    }
+  }
+}
+</script>
+```
+
+### resetConfig()
+
+重置为默认配置。
+
+```vue
+<template>
+  <div>
+    <XtButton @click="reset">重置配置</XtButton>
+  </div>
+</template>
+
+<script>
+import { resetConfig } from 'xt-element-ui'
+
+export default {
+  methods: {
+    reset() {
+      resetConfig()
+    }
+  }
+}
+</script>
+```
+
+### onConfigChange(listener)
+
+监听配置变化，返回取消订阅函数。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `listener` | Function | 是 | 变化监听回调函数 |
+
+**回调参数**：
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| `key` | String | 变化的配置项：`theme`、`size`、`primaryColor` |
+| `value` | Any | 配置项的新值 |
+
+```vue
+<template>
+  <div>
+    <XtText>配置变化次数：{{ changeCount }}</XtText>
+  </div>
+</template>
+
+<script>
+import { onConfigChange } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      changeCount: 0,
+      unsubscribe: null
+    }
+  },
+  mounted() {
+    this.unsubscribe = onConfigChange((key, value) => {
+      this.changeCount++
+      console.log(`配置 ${key} 已变更为:`, value)
+    })
+  },
+  beforeDestroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  }
+}
+</script>
+```
+
+## 使用示例
+
+### 完整配置示例
+
+```vue
+<template>
+  <XtCard>
+    <XtCardItem title="当前配置">
+      <XtText>{{ JSON.stringify(config) }}</XtText>
+    </XtCardItem>
+    
+    <XtCardItem title="配置操作">
+      <XtFlexBox direction="vertical" style="gap: 12px;">
+        <XtButton @click="updateConfig">更新配置</XtButton>
+        <XtButton @click="changePrimary('#67c23a')">修改主色调</XtButton>
+        <XtButton type="danger" @click="reset">重置</XtButton>
+      </XtFlexBox>
+    </XtCardItem>
+    
+    <XtCardItem title="配置变化">
+      <XtText>变化次数：{{ changeCount }}</XtText>
+    </XtCardItem>
+  </XtCard>
+</template>
+
+<script>
+import { 
+  getConfig, 
+  setConfig, 
+  setPrimaryColor, 
+  resetConfig,
+  onConfigChange 
+} from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      changeCount: 0,
+      unsubscribe: null
+    }
+  },
+  computed: {
+    config() {
+      return getConfig()
+    }
+  },
+  mounted() {
+    this.unsubscribe = onConfigChange(() => {
+      this.changeCount++
+    })
+  },
+  beforeDestroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  },
+  methods: {
+    updateConfig() {
+      setConfig({
+        theme: 'dark',
+        size: 'medium',
+        primaryColor: '#1890ff'
+      })
+    },
+    changePrimary(color) {
+      setPrimaryColor(color)
+    },
+    reset() {
+      resetConfig()
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. `setPrimaryColor` 只支持十六进制颜色格式（如 `#1890ff`、`#fff`）
+2. 设置主色调时，会自动生成对应的浅色系列（light-3 到 light-9）
+3. `onConfigChange` 返回的取消订阅函数应在组件销毁时调用，避免内存泄漏
+4. 所有配置修改都会触发 `onConfigChange` 监听器