xt-element-ui 2.1.21 → 2.1.61

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

@@ -1,5 +1,3 @@
-## XtBadge 徽标组件
-
 徽标组件，用于标记数字或状态。
 
 ## 基本用法

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

@@ -1,5 +1,3 @@
-## XtBar 柱状图组件
-
 基于 ECharts 封装的柱状图组件，支持数据标记、缩放、反转、长标签等功能。
 
 ## 基本用法
@@ -39,7 +37,6 @@ export default {
 |------|------|--------|------|
 | `chartData` | Array | - | 图表数据，格式为 `[{ label, value }]` |
 | `fieldKeys` | Object | `{ label: "label", value: "value", data: "data" }` | 字段映射配置 |
-| `theme` | String | - | 主题，`dark` 或 `default` |
 | `size` | String | `medium` | 尺寸，`small` / `medium` / `large` |
 | `markPoint` | Boolean | `false` | 是否显示最大值/最小值标记 |
 | `unit` | String | `""` | 数据单位 |
@@ -152,30 +149,6 @@ export default {
 ```
 :::
 
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtBar :chart-data="chartData" theme="dark" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
 ## 注意事项
 
 - 数据值大于等于 10000 时会自动转换为"万"单位显示

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

@@ -1,5 +1,3 @@
-## XtButton 按钮组件
-
 按钮用于触发一个操作，如提交表单、打开对话框等。
 
 ## 基本用法

package/docs/components/base/xt-card-item.md

@@ -1,5 +1,3 @@
-## XtCardItem 卡片项组件
-
 卡片项组件用于在卡片内展示一行数据，支持标签、数值和单位的展示。
 
 ## 基本用法

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

@@ -1,5 +1,3 @@
-## XtCard 卡片组件
-
 卡片组件用于展示信息，通常包含标题和内容区域。
 
 ## 基本用法
@@ -12,23 +10,6 @@
 ```
 :::
 
-## 属性说明
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `title` | String | - | 卡片标题 |
-| `value` | String / Number | - | 卡片数值 |
-| `unit` | String | - | 数值单位 |
-| `noPadding` | Boolean | false | 是否取消内边距 |
-
-## 插槽说明
-
-| 插槽名 | 说明 |
-|--------|------|
-| `default` | 自定义内容区域 |
-| `title` | 自定义标题区域 |
-| `value` | 自定义数值区域 |
-
 ## 示例
 
 ### 基础卡片
@@ -106,3 +87,20 @@
 </template>
 ```
 :::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `title` | String | - | 卡片标题 |
+| `value` | String / Number | - | 卡片数值 |
+| `unit` | String | - | 数值单位 |
+| `noPadding` | Boolean | false | 是否取消内边距 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 自定义内容区域 |
+| `title` | 自定义标题区域 |
+| `value` | 自定义数值区域 |

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

@@ -1,5 +1,3 @@
-## XtChart 图表容器组件
-
 基于 ECharts 封装的图表容器组件，通过 `type` 属性切换不同图表类型（柱状图、折线图、饼图、组合图）。
 
 ## 基本用法
@@ -7,7 +5,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtChart type="bar" :chart-data="chartData" />
+  <XtChart type="bar" :chart-data="chartData" style="height: 400px;" />
 </template>
 
 <script>
@@ -41,7 +39,7 @@ export default {
 ::: demo 柱状图
 ```vue
 <template>
-  <XtChart type="bar" :chart-data="chartData" />
+  <XtChart type="bar" :chart-data="chartData" style="height: 400px;" />
 </template>
 
 <script>
@@ -67,7 +65,7 @@ export default {
 ::: demo 折线图
 ```vue
 <template>
-  <XtChart type="line" :chart-data="chartData" />
+  <XtChart type="line" :chart-data="chartData" style="height: 400px;" />
 </template>
 
 <script>
@@ -93,7 +91,7 @@ export default {
 ::: demo 饼图
 ```vue
 <template>
-  <XtChart type="pie" :chart-data="chartData" />
+  <XtChart type="pie" :chart-data="chartData" style="height: 400px;" />
 </template>
 
 <script>
@@ -118,7 +116,7 @@ export default {
 ::: demo 组合图
 ```vue
 <template>
-  <XtChart type="multi" :chart-data="chartData" />
+  <XtChart type="multi" :chart-data="chartData" style="height: 400px;" />
 </template>
 
 <script>
@@ -152,30 +150,6 @@ export default {
 ```
 :::
 
-### 暗色主题
-
-::: demo 暗色主题
-```vue
-<template>
-  <XtChart type="bar" :chart-data="chartData" theme="dark" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      chartData: [
-        { value: 65, label: "张三" },
-        { value: 78, label: "李四" },
-        { value: 95, label: "王五" }
-      ]
-    }
-  }
-}
-</script>
-```
-:::
-
 ## 注意事项
 
 - `XtChart` 是一个容器组件，会根据 `type` 属性渲染对应的子组件（XtBar/XtLine/XtPie/XtMulti）

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

@@ -1,5 +1,3 @@
-## XtConfigProvider 配置提供者
-
 配置提供者组件用于全局配置主题和样式变量。
 
 ## 基本用法

package/docs/components/base/xt-date-picker.md

@@ -1,10 +1,8 @@
-## XtDatePicker 日期选择器组件
-
-日期选择器组件用于选择日期范围，支持多种日期类型（年月日、年月、年、季度等）。
+日期选择器组件用于选择日期范围或单个日期，支持多种日期类型（年月日、年月、年、季度等），并提供时间维度选择功能，满足统计分析场景。
 
 ## 基本用法
 
-::: demo 基本用法
+::: demo 基本用法（日期范围）
 ```vue
 <template>
   <XtDatePicker v-model="dateRange" />
@@ -14,7 +12,7 @@
 export default {
   data() {
     return {
-      dateRange: []
+      dateRange: ""
     }
   }
 }
@@ -26,35 +24,152 @@ export default {
 
 | 属性 | 类型 | 默认值 | 可选值 | 说明 |
 |------|------|--------|--------|------|
-| `value` / `v-model` | Array | - | - | 日期范围，格式为 `[startDate, endDate]` |
+| `value` / `v-model` | Array / String | - | - | 日期范围 `[start, end]` 或单个日期字符串 |
 | `dateType` | String | `date` | `date`、`datetime`、`month`、`year`、`quarter`、`week` | 日期类型 |
-| `separator` | String | `至` | - | 分隔符文本 |
+| `separator` | String | `至` | - | 范围选择时的分隔符文本 |
 | `disabled` | Boolean | `false` | - | 是否禁用 |
-| `width` | Number | `280` | - | 组件宽度（px） |
+| `width` | String | `100%` | - | 组件宽度，如 `'500px'` |
+| `rangeMode` | Boolean | `true` | - | 是否为范围选择模式，false 时为单选 |
+| `showDimension` | Boolean | `false` | - | 是否显示时间维度选择器（日/月/年/自定义） |
+| `dimension` | String | `date` | `date`、`month`、`year`、`daterange` | 当前时间维度 |
+| `immediate` | Boolean | `true` | - | 切换维度后是否立即触发事件 |
+
+## 事件说明
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `change` | `value` | 日期值改变时触发 |
+| `dimension-change` | `{ dimension, value }` | 时间维度或值变化时触发 |
+| `focus` | - | 输入框获得焦点时触发 |
+| `blur` | - | 输入框失去焦点时触发 |
 
 ## 示例
 
-### 不同日期类型
+### 日期范围选择
+
+::: demo 日期范围选择
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" rangeMode="true" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: []
+    }
+  }
+}
+</script>
+```
+:::
+
+### 月份范围选择
+
+::: demo 月份范围选择
+```vue
+<template>
+  <XtDatePicker v-model="monthRange" dateType="month" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      monthRange: ""
+    }
+  }
+}
+</script>
+```
+:::
+
+### 年份范围选择
+
+::: demo 年份范围选择
+```vue
+<template>
+  <XtDatePicker v-model="yearRange" dateType="year" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      yearRange: ""
+    }
+  }
+}
+</script>
+```
+:::
+
+### 季度选择
 
-::: demo 不同日期类型
+::: demo 季度选择
 ```vue
 <template>
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <XtDatePicker v-model="dateRange" dateType="date" />
-    <XtDatePicker v-model="monthRange" dateType="month" />
-    <XtDatePicker v-model="yearRange" dateType="year" />
-    <XtDatePicker v-model="quarterRange" dateType="quarter" />
-  </div>
+  <XtDatePicker v-model="quarterRange" dateType="quarter" />
 </template>
 
 <script>
 export default {
   data() {
     return {
-      dateRange: [],
-      monthRange: [],
-      yearRange: [],
-      quarterRange: []
+      quarterRange: ""
+    }
+  }
+}
+</script>
+```
+:::
+
+### 单选模式
+
+::: demo 单选模式
+```vue
+<template>
+  <XtDatePicker v-model="singleDate" :range-mode="false" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      singleDate: null
+    }
+  }
+}
+</script>
+```
+:::
+
+### 时间维度选择（统计分析）
+
+::: demo 时间维度选择
+```vue
+<template>
+  <XtDatePicker 
+    v-model="dateRange" 
+    :show-dimension="true" 
+    :dimension="currentDimension"
+    @dimension-change="handleDimensionChange"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: "",
+      currentDimension: 'date'
+    }
+  },
+  methods: {
+    handleDimensionChange({ dimension, value }) {
+      this.currentDimension = dimension
+      console.log('维度:', dimension, '值:', value)
     }
   }
 }
@@ -74,7 +189,7 @@ export default {
 export default {
   data() {
     return {
-      dateRange: []
+      dateRange: ""
     }
   }
 }
@@ -94,7 +209,7 @@ export default {
 export default {
   data() {
     return {
-      dateRange: []
+      dateRange: ""
     }
   }
 }
@@ -102,10 +217,52 @@ export default {
 ```
 :::
 
-## 事件
+### 自定义宽度
 
-| 事件名 | 说明 | 参数 |
-|--------|------|------|
-| `change` | 日期值改变时触发 | `[startDate, endDate]` |
-| `focus` | 输入框获得焦点时触发 | - |
-| `blur` | 输入框失去焦点时触发 | - |
+::: demo 自定义宽度
+```vue
+<template>
+  <XtDatePicker v-model="dateRange" width="600" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dateRange: ""
+    }
+  }
+}
+</script>
+```
+:::
+
+## 时间维度说明
+
+当启用 `showDimension` 后，选择不同维度会有以下效果：
+
+| 维度 | 日期类型 | 格式 | 说明 |
+|------|----------|------|------|
+| `date` | date | yyyy-MM-dd | 日维度，选择日期范围 |
+| `month` | month | yyyy-MM | 月维度，选择月份范围 |
+| `year` | year | yyyy | 年维度，选择年份范围 |
+| `daterange` | date | yyyy-MM-dd | 自定义区间，选择日期范围 |
+
+## 日期类型格式
+
+| 类型 | 显示格式 | 说明 |
+|------|----------|------|
+| `date` | yyyy-MM-dd | 日期 |
+| `month` | yyyy-MM | 月份 |
+| `year` | yyyy | 年份 |
+| `quarter` | yyyy-Qq | 季度（如 2026-Q3） |
+| `week` | yyyy-WW | 周 |
+| `datetime` | yyyy-MM-dd HH:mm | 日期时间 |
+
+## 注意事项
+
+1. **范围模式**：默认开启范围选择（`rangeMode: true`），返回值为数组 `[start, end]`
+2. **单选模式**：设置 `rangeMode: false` 后，返回值为单个日期字符串
+3. **维度切换**：切换维度时会自动关闭下拉面板，避免页面布局跳动
+4. **季度格式**：季度类型使用自定义格式 `yyyy-Qq`，如 `2026-Q3`
+5. **值类型**：所有日期值均为字符串类型，便于后端交互

package/docs/components/base/xt-flex-box.md

@@ -8,31 +8,21 @@
 ```vue
 <template>
   <XtFlexBox gap="16px">
-    <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素1</div>
-    <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素2</div>
-    <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素3</div>
+    <div style="background: #1890ff; color: white; padding: 8px;">元素1</div>
+    <div style="background: #52c41a; color: white; padding: 8px;">元素2</div>
+    <div style="background: #faad14; color: white; padding: 8px;">元素3</div>
   </XtFlexBox>
 </template>
 ```
 :::
 
-## 属性说明
-| 属性 | 类型 | 默认值 | 可选值 | 说明 |
-|------|------|--------|--------|------|
-| `type` | String | flex | - | 布局类型 |
-| `align` | String | center | `start`、`center`、`end`、`stretch`、`baseline` | 交叉轴对齐方式 |
-| `content` | String | start | `start`、`center`、`end`、`between`、`around`、`evenly` | 主轴对齐方式 |
-| `direction` | String | row | `row`、`row-reverse`、`column`、`column-reverse` | 排列方向 |
-| `wrap` | String | unset | `wrap`、`nowrap`、`wrap-reverse` | 是否换行 |
-| `gap` | String | - | - | 子元素间距 |
-
 ## 示例
 
 ### 水平居中且两端对齐
 ::: demo 水平居中且两端对齐
 ```vue
 <template>
-  <XtFlexBox content="space-between" align="center">
+  <XtFlexBox content="between" align="center">
     <span>左侧内容</span>
     <span>右侧内容</span>
   </XtFlexBox>
@@ -59,11 +49,11 @@
 ::: demo 均匀分布
 ```vue
 <template>
-  <XtFlexBox content="space-around">
-    <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">1</div>
-    <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">2</div>
-    <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">3</div>
-    <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">4</div>
+  <XtFlexBox content="around">
+    <div style="background: #1890ff; color: white; padding: 8px;">元素1</div>
+    <div style="background: #52c41a; color: white; padding: 8px;">元素2</div>
+    <div style="background: #faad14; color: white; padding: 8px;">元素3</div>
+    <div style="background: #ea1d34; color: white; padding: 8px;">元素4</div>
   </XtFlexBox>
 </template>
 ```
@@ -75,7 +65,7 @@
 ```vue
 <template>
   <XtFlexBox wrap="wrap" gap="8px">
-    <div v-for="i in 10" :key="i" style="width: 80px; height: 80px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center;">{{ i }}</div>
+    <div v-for="i in 10" :key="i" style="padding: 8px; background: #1890ff; color: white; width: 80px;">{{ i }}</div>
   </XtFlexBox>
 </template>
 ```
@@ -86,10 +76,10 @@
 ::: demo 反向排列
 ```vue
 <template>
-  <XtFlexBox direction="row-reverse">
-    <span style="padding: 8px; background: #f5f5f5;">第一</span>
-    <span style="padding: 8px; background: #f5f5f5;">第二</span>
-    <span style="padding: 8px; background: #f5f5f5;">第三</span>
+  <XtFlexBox direction="row-reverse" gap="8px">
+    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第一</span>
+    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第二</span>
+    <span style="padding: 8px; background: #1890ff; color: white; width: 80px;">第三</span>
   </XtFlexBox>
 </template>
 ```
@@ -101,7 +91,7 @@
 ```vue
 <template>
   <XtFlexBox direction="column" gap="16px">
-    <XtFlexBox content="space-between">
+    <XtFlexBox content="between">
       <span>头部左侧</span>
       <span>头部右侧</span>
     </XtFlexBox>
@@ -113,3 +103,13 @@
 </template>
 ```
 :::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `type` | String | flex | - | 布局类型 |
+| `align` | String | center | `start`、`center`、`end`、`stretch`、`baseline` | 交叉轴对齐方式 |
+| `content` | String | start | `start`、`center`、`end`、`between`、`around`、`evenly` | 主轴对齐方式 |
+| `direction` | String | row | `row`、`row-reverse`、`column`、`column-reverse` | 排列方向 |
+| `wrap` | String | unset | `wrap`、`nowrap`、`wrap-reverse` | 是否换行 |
+| `gap` | String | - | - | 子元素间距 |