xt-element-ui 1.3.4 → 2.0.0

package/CHANGELOG.md

@@ -13,30 +13,48 @@
 
 ---
 
+## [1.3.0]
+
+### ♻️ 架构调整
+
+- **组件命名统一**：移除双架构支持，所有组件统一使用 `Xt` 前缀命名
+- **移除 Ex 系列组件**：删除 `ExButton`、`ExCard`、`ExChart`、`ExTable` 等所有 `Ex` 开头的组件
+- **文档同步更新**：所有 Markdown 文档中的组件名称从 `Ex` 统一改为 `Xt`
+- **配置文件更新**：`docs/.vuepress/config.js` 移除 `extend` 目录引用，统一使用 `base` 目录
+
+### 📝 文档
+
+- 更新 README.md，移除双架构说明，展示统一的 Xt 组件列表
+- 更新 docs/README.md，统一组件命名规范
+- 更新 CONTRIBUTING.md，移除双架构相关说明
+- 新增 xt-date-picker.md、xt-icon.md、xt-table.md、xt-select-tree.md、xt-upload.md、xt-page.md 组件文档
+
+---
+
 ## [1.2.5]
 
 ### ✨ 新功能
 
-- **ex-chart**: 四个图表组件（ExBar / ExLine / ExPie / ExMulti）新增 `fieldKeys` prop，支持自定义 `chartData` 字段映射
-- **ex-chart**: 四个图表组件新增 `simpleMode` prop，开启极简模式（隐藏图例、坐标轴等装饰元素）
-- **ex-multi**: `chartData.unit` 支持去重，相同 unit 的 series 共用同一条 Y 轴
-- **ex-table**: 新增虚拟滚动支持，大数据量表格渲染性能优化
-- **ex-table**: 新增合并单元格（span-method）缓存机制，提升滚动性能
-- **ex-icon**: 新增 ExIcon 组件，支持 `el-icon` 字体图标、SVG Sprite、内联 SVG 和自定义字体图标
+- **xt-chart**: 四个图表组件（XtBar / XtLine / XtPie / XtMulti）新增 `fieldKeys` prop，支持自定义 `chartData` 字段映射
+- **xt-chart**: 四个图表组件新增 `simpleMode` prop，开启极简模式（隐藏图例、坐标轴等装饰元素）
+- **xt-multi**: `chartData.unit` 支持去重，相同 unit 的 series 共用同一条 Y 轴
+- **xt-table**: 新增虚拟滚动支持，大数据量表格渲染性能优化
+- **xt-table**: 新增合并单元格（span-method）缓存机制，提升滚动性能
+- **xt-icon**: 新增 XtIcon 组件，支持 `el-icon` 字体图标、SVG Sprite、内联 SVG 和自定义字体图标
 
 ### 🐛 Bug 修复
 
-- **ex-chart**: 修复暗色模式下 canvas 背景色为透明的问题，改为黑色
-- **ex-table**: 修复模板中非嵌套列分支引用未定义变量导致页面空白的问题
-- **ex-table**: 修复横向滚动时固定列背景色被文字覆盖的问题
-- **ex-table**: 修复虚拟滚动时 Y 轴滚动条不显示的问题
-- **ex-table**: 修复虚拟滚动初始渲染只显示少量数据的问题，优化 `calcVisibleRange` 计算逻辑
+- **xt-chart**: 修复暗色模式下 canvas 背景色为透明的问题，改为黑色
+- **xt-table**: 修复模板中非嵌套列分支引用未定义变量导致页面空白的问题
+- **xt-table**: 修复横向滚动时固定列背景色被文字覆盖的问题
+- **xt-table**: 修复虚拟滚动时 Y 轴滚动条不显示的问题
+- **xt-table**: 修复虚拟滚动初始渲染只显示少量数据的问题，优化 `calcVisibleRange` 计算逻辑
 
 ### 📝 文档
 
-- 新增 ex-table.md 详细文档，包含虚拟滚动、自定义 formatter、列配置等章节
-- 新增 ex-icon.md 图标组件文档
-- 更新 ex-chart.md 文档，按子组件拆分章节并补充 `fieldKeys`、`simpleMode` 等属性说明
+- 新增 xt-table.md 详细文档，包含虚拟滚动、自定义 formatter、列配置等章节
+- 新增 xt-icon.md 图标组件文档
+- 更新 xt-chart.md 文档，按子组件拆分章节并补充 `fieldKeys`、`simpleMode` 等属性说明
 
 ---
 
@@ -50,12 +68,11 @@
 - **xt-text / xt-input**: 新增文本和输入框组件
 - **xt-date-picker**: 新增日期选择组件（支持季度选择）
 - **xt-config-provider**: 新增全局配置提供者，支持主题、尺寸、主色调配置
-- **ex-button / ex-card**: 新增基于 ElementUI 的扩展按钮和卡片组件
-- **ex-chart (ExBar / ExLine / ExPie / ExMulti)**: 新增基于 ECharts 的图表组件族
-- **ex-table**: 新增基于 ElementUI Table 的扩展表格组件
-- **ex-select-tree**: 新增下拉选择树组件
-- **ex-upload**: 新增上传组件（支持图片预览）
-- **ex-page**: 新增页面组件
+- **xt-chart (XtBar / XtLine / XtPie / XtMulti)**: 新增基于 ECharts 的图表组件族
+- **xt-table**: 新增基于 ElementUI Table 的扩展表格组件
+- **xt-select-tree**: 新增下拉选择树组件
+- **xt-upload**: 新增上传组件（支持图片预览）
+- **xt-page**: 新增页面组件
 
 ### 🏗 构建
 

package/README.md

@@ -23,7 +23,6 @@
 - **🎯 丰富的组件**：提供 15+ 组件，覆盖布局、表单、数据展示、图表等常见场景
 - **📦 开箱即用**：基于 ElementUI 构建，与现有 ElementUI 项目无缝集成
 - **🪶 按需引入**：完整的 npm 包架构，支持按需引入，减小打包体积
-- **🎨 双架构设计**：`Xt` 自定义组件 + `Ex` 扩展组件，职责清晰、便于维护
 - **🌓 主题系统**：支持亮色/暗色主题切换，支持自定义主色调
 - **📐 响应式设计**：组件支持多种尺寸配置，适配不同屏幕
 - **📊 图表能力**：内置 ECharts 封装，提供柱状图、折线图、饼图、混合图
@@ -69,20 +68,20 @@ Vue.use(XtElementUI, {
 ### 按需引入
 
 ```javascript
-import { XtButton, XtFlexBox, ExTable, ExBar } from 'xt-element-ui'
+import { XtButton, XtFlexBox, XtTable, XtBar } from 'xt-element-ui'
 import 'xt-element-ui/lib/index.css'
 
 Vue.component('XtButton', XtButton)
 Vue.component('XtFlexBox', XtFlexBox)
-Vue.component('ExTable', ExTable)
-Vue.component('ExBar', ExBar)
+Vue.component('XtTable', XtTable)
+Vue.component('XtBar', XtBar)
 ```
 
 ---
 
 ## 📦 组件列表
 
-### Xt 组件（自定义组件）
+所有组件统一以 `Xt` 开头命名，不再区分双架构：
 
 | 组件 | 说明 |
 |------|------|
@@ -95,24 +94,22 @@ Vue.component('ExBar', ExBar)
 | **XtText** | 文本组件 |
 | **XtInput** | 输入框组件 |
 | **XtConfigProvider** | 全局配置提供器 |
+| **XtTime** | 时间组件（当前时间/倒计时/日期格式化） |
+| **XtStepPrice** | 阶梯价格组件 |
+| **XtStepPriceItem** | 阶梯价格子项组件 |
+| **XtMap** | 统一地图组件（支持高德/天地图/百度） |
+| **XtMapProvider** | 地图全局配置提供器 |
+| **XtDatePicker** | 日期选择器（支持季度选择） |
+| **XtIcon** | 图标组件（支持 el-icon/SVG/自定义字体） |
+| **XtTable** | 扩展表格（含虚拟滚动） |
+| **XtChart** | 图表容器（含 XtBar/XtLine/XtPie/XtMulti） |
+| **XtSelectTree** | 下拉选择树组件 |
+| **XtUpload** | 上传组件（支持图片预览） |
+| **XtPage** | 页面组件 |
+| **XtProgress** | 进度条组件 |
+| **XtTabs** | 标签页组件 |
+| **XtBadge** | 徽标组件 |
 
-### Ex 组件（扩展组件）
-
-| 组件 | 说明 |
-|------|------|
-| **ExButton** | 基于 ElementUI Button 的扩展按钮 |
-| **ExCard** | 基于 ElementUI Card 的扩展卡片 |
-| **ExTable** | 基于 ElementUI Table 的扩展表格（支持虚拟滚动） |
-| **ExBar** | 基于 ECharts 的柱状图 |
-| **ExLine** | 基于 ECharts 的折线图 |
-| **ExPie** | 基于 ECharts 的饼图 |
-| **ExMulti** | 基于 ECharts 的混合图表（支持多 Y 轴） |
-| **ExChart** | 图表容器组件 |
-| **ExSelectTree** | 下拉选择树组件 |
-| **ExUpload** | 上传组件（支持图片预览） |
-| **ExPage** | 页面组件 |
-| **ExDatePicker** | 日期选择组件 |
-| **ExIcon** | 图标组件（支持 SVG / 字体图标） |
 
 ---
 
@@ -146,29 +143,36 @@ xt-element-ui/
 │   │   ├── config.js         # 主题、导航、侧边栏配置
 │   │   └── enhanceApp.js     # 应用增强
 │   └── components/            # 各组件文档
-│       ├── base/             # Xt 系列组件文档
-│       ├── extend/           # Ex 系列组件文档
+│       ├── base/             # 组件文档
 │       └── utils/            # 工具类文档
 │
 ├── src/                       # 组件源码
-│   ├── components/           # 组件目录
+│   ├── components/           # 组件目录（统一 Xt 前缀命名）
 │   │   ├── xt-button/        # 按钮组件
 │   │   ├── xt-card/          # 卡片组件
+│   │   ├── xt-card-item/     # 卡片项组件
 │   │   ├── xt-flex-box/      # 弹性布局组件
 │   │   ├── xt-grid-box/      # 网格布局组件
+│   │   ├── xt-grid-item/     # 网格子项组件
 │   │   ├── xt-text/          # 文本组件
+│   │   ├── xt-time/          # 时间组件
 │   │   ├── xt-input/         # 输入框组件
 │   │   ├── xt-config-provider/ # 配置提供者
-│   │   ├── xt-date-picker/   # 日期选择
-│   │   │
-│   │   ├── ex-button/        # 扩展按钮
-│   │   ├── ex-card/          # 扩展卡片
-│   │   ├── ex-table/         # 扩展表格（含虚拟滚动）
-│   │   ├── ex-chart/         # 图表组件（ExBar/ExLine/ExPie/ExMulti）
-│   │   ├── ex-icon/          # 图标组件
-│   │   ├── ex-select-tree/   # 下拉选择树
-│   │   ├── ex-upload/        # 上传组件
-│   │   └── ex-page/          # 页面组件
+│   │   ├── xt-date-picker/   # 日期选择器
+│   │   ├── xt-icon/          # 图标组件
+│   │   ├── xt-table/         # 扩展表格（含虚拟滚动）
+│   │   ├── xt-chart/         # 图表组件（XtBar/XtLine/XtPie/XtMulti）
+│   │   ├── xt-select-tree/   # 下拉选择树
+│   │   ├── xt-upload/        # 上传组件
+│   │   ├── xt-page/          # 页面组件
+│   │   ├── xt-step-price/    # 阶梯价格组件
+│   │   ├── xt-step-price-item/ # 阶梯价格子项组件
+│   │   ├── xt-map/           # 统一地图组件
+│   │   ├── xt-map-provider/  # 地图配置提供者
+│   │   ├── xt-progress/      # 进度条组件
+│   │   ├── xt-tabs/          # 标签页组件
+│   │   ├── xt-badge/         # 徽标组件
+│   │   └── xt-layout/        # 布局组件
 │   │
 │   ├── config/               # 配置模块
 │   ├── styles/               # 全局样式与变量

package/docs/README.md

@@ -12,8 +12,6 @@ features:
     details: 基于 ElementUI 构建，与现有 ElementUI 项目无缝集成
   - title: 🪶 按需引入
     details: 完整的 npm 包架构，支持按需引入，减小打包体积
-  - title: 🎨 双架构设计
-    details: Xt 自定义组件 + Ex 扩展组件，职责清晰、便于维护
   - title: 🌓 主题系统
     details: 支持亮色/暗色主题切换，支持自定义主色调
   - title: 📊 图表能力
@@ -41,9 +39,9 @@ Vue.use(XtElementUI)
 
 ## 📦 组件概览
 
-### 🎨 Xt 组件（自定义组件）
+所有组件统一以 `Xt` 开头命名，不再区分双架构：
 
-全新开发、不依赖 ElementUI 原有组件：
+### 🎨 基础组件
 
 | 组件 | 说明 |
 |------|------|
@@ -53,24 +51,36 @@ Vue.use(XtElementUI)
 | **XtFlexBox** | 弹性布局组件 |
 | **XtGridBox** | 网格布局组件 |
 | **XtText** | 文本组件 |
+| **XtTime** | 时间组件（当前时间/倒计时/日期格式化） |
 | **XtInput** | 输入框组件 |
 | **XtConfigProvider** | 全局配置提供器 |
+| **XtMap** | 统一地图组件（支持高德/天地图/百度） |
+| **XtStepPrice** | 阶梯价格组件 |
 
-### ✨ Ex 组件（扩展组件）
+### 🔧 扩展组件
 
-基于 ElementUI / ECharts 二次封装的增强组件：
+| 组件 | 说明 |
+|------|------|
+| **XtDatePicker** | 日期选择器（支持季度选择） |
+| **XtIcon** | 图标组件（支持 el-icon/SVG/自定义字体） |
+| **XtTable** | 扩展表格（含虚拟滚动） |
+| **XtSelectTree** | 下拉选择树组件 |
+| **XtUpload** | 上传组件（支持图片预览） |
+| **XtPage** | 页面组件 |
+| **XtProgress** | 进度条组件 |
+| **XtTabs** | 标签页组件 |
+| **XtBadge** | 徽标组件 |
+
+### 📊 图表组件
 
 | 组件 | 说明 |
 |------|------|
-| **ExButton** | 基于 ElementUI Button 的扩展按钮 |
-| **ExCard** | 基于 ElementUI Card 的扩展卡片 |
-| **ExTable** | 基于 ElementUI Table 的扩展表格（支持虚拟滚动） |
-| **ExBar / ExLine / ExPie / ExMulti** | 基于 ECharts 的图表组件 |
-| **ExSelectTree** | 下拉选择树组件 |
-| **ExUpload** | 上传组件（支持图片预览） |
-| **ExPage** | 页面组件 |
-| **ExDatePicker** | 日期选择组件 |
-| **ExIcon** | 图标组件（支持 SVG / 字体图标） |
+| **XtChart** | 图表容器 |
+| **XtBar** | 柱状图 |
+| **XtLine** | 折线图 |
+| **XtPie** | 饼图 |
+| **XtMulti** | 组合图 |
+
 
 ---
 

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

@@ -0,0 +1,139 @@
+## XtBadge 徽标组件
+
+徽标组件，用于标记数字或状态。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtBadge :value="12">
+    <XtButton size="small">评论</XtButton>
+  </XtBadge>
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `value` | String / Number | - | - | 显示的数值 |
+| `max` | Number | - | - | 最大值，超过会显示 {max}+ |
+| `isDot` | Boolean | `false` | - | 是否显示小圆点 |
+| `hidden` | Boolean | `false` | - | 是否隐藏徽标 |
+| `type` | String | - | `primary`、`success`、`warning`、`danger` | 徽标类型 |
+| `offset` | Array | `[0, 0]` | - | 设置徽标的偏移量，数组的两项分别对应水平和垂直偏移 |
+
+## 示例
+
+### 不同类型
+
+::: demo 不同类型
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12" type="primary">
+      <XtButton size="small">评论</XtButton>
+    </XtBadge>
+    <XtBadge :value="3" type="success">
+      <XtButton size="small">回复</XtButton>
+    </XtBadge>
+    <XtBadge :value="5" type="warning">
+      <XtButton size="small">通知</XtButton>
+    </XtBadge>
+    <XtBadge :value="99+" type="danger">
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 小圆点模式
+
+::: demo 小圆点模式
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge is-dot>
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+    <XtBadge is-dot type="success">
+      <XtButton size="small">在线</XtButton>
+    </XtBadge>
+    <XtBadge is-dot type="danger">
+      <XtButton size="small">错误</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 最大值
+
+::: demo 最大值
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="100" :max="99">
+      <XtButton size="small">消息</XtButton>
+    </XtBadge>
+    <XtBadge :value="200" :max="99">
+      <XtButton size="small">通知</XtButton>
+    </XtBadge>
+    <XtBadge :value="999" :max="99">
+      <XtButton size="small">评论</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 隐藏徽标
+
+::: demo 隐藏徽标
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12">
+      <XtButton size="small">显示徽标</XtButton>
+    </XtBadge>
+    <XtBadge :value="12" hidden>
+      <XtButton size="small">隐藏徽标</XtButton>
+    </XtBadge>
+  </div>
+</template>
+```
+:::
+
+### 自定义偏移
+
+::: demo 自定义偏移
+```vue
+<template>
+  <XtBadge :value="12" :offset="[10, 10]">
+    <XtButton size="small">自定义偏移</XtButton>
+  </XtBadge>
+</template>
+```
+:::
+
+### 独立使用
+
+::: demo 独立使用
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtBadge :value="12" />
+    <XtBadge :value="99+" type="danger" />
+    <XtBadge is-dot type="success" />
+  </div>
+</template>
+```
+:::
+
+## 注意事项
+
+- `max` 属性仅对数字类型的 `value` 有效
+- 当 `value` 为 0 时，徽标默认显示，可以通过 `hidden` 属性控制显示/隐藏

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

@@ -0,0 +1,182 @@
+## XtBar 柱状图组件
+
+基于 ECharts 封装的柱状图组件，支持数据标记、缩放、反转、长标签等功能。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtBar :chart-data="chartData" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 70, label: "唐九" },
+        { value: 73, label: "钱一" },
+        { value: 78, label: "孙二" },
+        { value: 88, label: "刘八" },
+        { value: 93, label: "王七" },
+        { value: 99, label: "赵六" },
+        { value: 103, label: "宋五" },
+        { value: 113, label: "李四" },
+        { value: 125, label: "张三" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `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 | `""` | 数据单位 |
+| `showZoom` | Boolean | `false` | 是否显示缩放条 |
+| `reverse` | Boolean | `false` | 是否反转坐标轴（横向柱状图） |
+| `longLable` | Boolean | `false` | 是否启用长标签换行 |
+| `longLableSplitNum` | Number | `1` | 长标签换行间隔字符数 |
+| `longLablePx` | Number | `150` | 长标签预留像素宽度 |
+| `splitNumber` | Number | `5` | Y 轴分割段数 |
+| `simpleMode` | Boolean | `false` | 是否启用极简模式（隐藏图例、坐标轴等） |
+
+## 示例
+
+### 横向柱状图
+
+::: demo 横向柱状图
+```vue
+<template>
+  <XtBar :chart-data="chartData" reverse />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "张三" },
+        { value: 78, label: "李四" },
+        { value: 95, label: "王五" },
+        { value: 82, label: "赵六" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 显示数据标记
+
+::: demo 显示数据标记
+```vue
+<template>
+  <XtBar :chart-data="chartData" :mark-point="true" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "1月" },
+        { value: 78, label: "2月" },
+        { value: 95, label: "3月" },
+        { value: 82, label: "4月" },
+        { value: 70, label: "5月" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 极简模式
+
+::: demo 极简模式
+```vue
+<template>
+  <XtBar :chart-data="chartData" simple-mode />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { value: 65, label: "A" },
+        { value: 78, label: "B" },
+        { value: 95, label: "C" }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义字段映射
+
+::: demo 自定义字段映射
+```vue
+<template>
+  <XtBar :chart-data="chartData" :field-keys="{ label: 'name', value: 'score' }" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: "张三", score: 65 },
+        { name: "李四", score: 78 },
+        { name: "王五", score: 95 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 暗色主题
+
+::: 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 时会自动转换为"万"单位显示
+- 数据值大于等于 10000000 时会自动转换为"千万"单位显示

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

@@ -7,7 +7,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtCardItem title="销售额" label="销售额" value="12345" unit="元" style="width: 350px;"></XtCardItem>
+  <XtCardItem title="销售额" :value="12345" unit="元" style="width: 350px;"></XtCardItem>
 </template>
 ```
 :::
@@ -40,7 +40,7 @@
 ::: demo 边框型卡片项
 ```vue
 <template>
-  <XtCardItem label="销售额" value="12345" unit="元" type="primary"></XtCardItem>
+  <XtCardItem title="销售额" value="12345" unit="元" type="primary" style="width: 350px;"></XtCardItem>
 </template>
 ```
 :::
@@ -50,10 +50,10 @@
 ::: demo 不同类型的边框卡片项
 ```vue
 <template>
-  <div style="display: flex; flex-direction: column; gap: 8px;">
-    <XtCardItem label="成功" value="OK" type="success"></XtCardItem>
-    <XtCardItem label="警告" value="Warning" type="warning"></XtCardItem>
-    <XtCardItem label="危险" value="Error" type="danger"></XtCardItem>
+  <div style="display: flex; flex-direction: column; gap: 8px;width: 350px;">
+    <XtCardItem title="成功" value="309894" type="success"></XtCardItem>
+    <XtCardItem title="警告" value="309894" type="warning"></XtCardItem>
+    <XtCardItem title="危险" value="309894" type="danger"></XtCardItem>
   </div>
 </template>
 ```
@@ -63,7 +63,7 @@
 ::: demo 自定义颜色
 ```vue
 <template>
-  <XtCardItem label="自定义颜色" value="100%" color="#722ed1"></XtCardItem>
+  <XtCardItem title="自定义颜色" value="100%" color="#722ed1" style="width: 350px;"></XtCardItem>
 </template>
 ```
 :::
@@ -72,7 +72,7 @@
 ::: demo 自定义插槽
 ```vue
 <template>
-  <XtCardItem>
+  <XtCardItem style="width: 350px;">
     <template #label>
       <span style="color: #1890ff; font-weight: bold;">自定义标签</span>
     </template>
@@ -93,10 +93,10 @@
 ```vue
 <template>
   <XtCard title="统计数据">
-    <div style="display: flex; flex-direction: column; gap: 8px;">
-      <XtCardItem label="总销售额" value="123456" unit="元"></XtCardItem>
-      <XtCardItem label="订单数量" value="520" unit="单" type="success"></XtCardItem>
-      <XtCardItem label="转化率" value="23.5" unit="%" type="warning"></XtCardItem>
+    <div style="display: flex; flex-direction: column; gap: 8px; style="width: 350px;">
+      <XtCardItem title="总销售额" value="123456" unit="元"></XtCardItem>
+      <XtCardItem title="订单数量" value="520" unit="单" type="success"></XtCardItem>
+      <XtCardItem title="转化率" value="23.5" unit="%" type="warning"></XtCardItem>
     </div>
   </XtCard>
 </template>