xt-element-ui 2.1.6 → 2.1.7

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

@@ -1,5 +1,3 @@
-## XtLine 折线图组件
-
 基于 ECharts 封装的折线图组件，支持面积图、平滑曲线等功能。
 
 ## 基本用法
@@ -7,7 +5,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtLine :chart-data="chartData" />
+  <div class="demo-container"><XtLine :chart-data="chartData" /></div>
 </template>
 
 <script>
@@ -46,7 +44,7 @@ export default {
 ::: demo 面积图
 ```vue
 <template>
-  <XtLine :chart-data="chartData" :is-area="true" />
+  <div class="demo-container"><XtLine :chart-data="chartData" :is-area="true" /></div>
 </template>
 
 <script>
@@ -72,7 +70,7 @@ export default {
 ::: demo 极简模式
 ```vue
 <template>
-  <XtLine :chart-data="chartData" simple-mode />
+  <div class="demo-container"><XtLine :chart-data="chartData" simple-mode /></div>
 </template>
 
 <script>
@@ -96,7 +94,7 @@ export default {
 ::: demo 自定义字段映射
 ```vue
 <template>
-  <XtLine :chart-data="chartData" :field-keys="{ label: 'month', value: 'amount' }" />
+  <div class="demo-container"><XtLine :chart-data="chartData" :field-keys="{ label: 'month', value: 'amount' }" /></div>
 </template>
 
 <script>
@@ -115,30 +113,6 @@ export default {
 ```
 :::
 
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtLine :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-list.md

@@ -1,5 +1,3 @@
-## XtList 卡片列表组件
-
 基于 ElementUI Card 封装的列表渲染组件，一个卡片代表一条数据，支持分组、虚拟滚动、搜索筛选、排序等功能。
 
 ### 基本用法

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 文本组件
-
 文本组件用于展示不同样式的文本内容。
 
 ## 基本用法

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
   "module": "lib/index.esm.js",
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.19",
+    "null-loader": "^4.0.1",
     "patch-package": "^8.0.1",
     "sass": "^1.56.0",
     "sass-loader": "^10.5.2",

package/src/components/xt-badge/style/index.scss

@@ -64,25 +64,3 @@
 .xt-badge--hidden {
   display: none;
 }
-
-[data-theme='dark'], html.dark {
-  .xt-badge--primary .xt-badge__badge {
-    background: $xt-dark-color-primary;
-  }
-  
-  .xt-badge--success .xt-badge__badge {
-    background: $xt-dark-color-success;
-  }
-  
-  .xt-badge--warning .xt-badge__badge {
-    background: $xt-dark-color-warning;
-  }
-  
-  .xt-badge--danger .xt-badge__badge {
-    background: $xt-dark-color-danger;
-  }
-  
-  .xt-badge--info .xt-badge__badge {
-    background: $xt-dark-color-info;
-  }
-}

package/src/components/xt-chart/XtBar.vue

@@ -161,9 +161,6 @@ export default {
         },
         min: 0,
         splitNumber: _self.splitNumber,
-        max: function(value) {
-          return Math.ceil(value.max / _self.splitNumber) * _self.splitNumber;
-        },
         scale: true,
         axisLabel: {
           margin: 2,

package/src/components/xt-layout/ExFieldset.vue

@@ -1,16 +1,16 @@
 <template>
   <fieldset class="exFieldset" :class="[border ? 'is-border' : 'part',type ? `is-${type}`: '',effect?`effect-${effect}`:'' ]">
     <legend class="fix-top legend">
-      <BaseFlexBox class="title" content="between">
+      <XtFlexBox class="title" content="between">
         <slot name="legend">
           {{ legend }}
         </slot>
-      </BaseFlexBox>
+      </XtFlexBox>
     </legend>
     <legend class="fix-top tool" v-if="$slots.tool">
-      <BaseFlexBox content="end" gap="0 5">
+      <XtFlexBox content="end" gap="0 5">
         <slot name="tool"></slot>
-      </BaseFlexBox>
+      </XtFlexBox>
     </legend>
     <div class="field" v-if="$slots.default">
       <slot />