xt-element-ui 2.2.1 → 2.2.3

package/README.md

@@ -179,7 +179,7 @@ xt-element-ui/
 │   ├── utils/                # 工具函数
 │   └── index.js              # 组件库入口
 │
-├── examples/                  # 本地开发示例
+├── public/                  # 本地开发示例
 ├── lib/                       # 构建产物（git 忽略）
 │
 ├── .github/                   # GitHub 配置

package/docs/README.md

@@ -1,13 +1,13 @@
 ---
 home: true
-heroImage: /favicon.ico
+# heroImage: /favicon.ico
 heroText: XT-Element-UI
 tagline: 基于 Vue 2.7 + ElementUI 的企业级组件库
 actionText: 🚀 快速上手
 actionLink: /components/base/xt-button
 features:
   - title: 🎯 丰富的组件
-    details: 提供 20+ 组件，覆盖布局、表单、数据展示、图表等常见场景
+    details: 提供 30+ 组件，覆盖布局、表单、数据展示、图表、工作流等常见场景
   - title: 📦 开箱即用
     details: 基于 ElementUI 构建，与现有 ElementUI 项目无缝集成
   - title: 🪶 按需引入
@@ -50,12 +50,16 @@ Vue.use(XtElementUI)
 | **XtCardItem** | 卡片项组件 |
 | **XtFlexBox** | 弹性布局组件 |
 | **XtGridBox** | 网格布局组件 |
+| **XtGridItem** | 网格项组件 |
 | **XtText** | 文本组件 |
 | **XtTime** | 时间组件（当前时间/倒计时/日期格式化） |
 | **XtInput** | 输入框组件 |
 | **XtConfigProvider** | 全局配置提供器 |
 | **XtMap** | 统一地图组件（支持高德/天地图/百度） |
+| **XtMapProvider** | 地图提供器 |
 | **XtStepPrice** | 阶梯价格组件 |
+| **XtStepPriceItem** | 阶梯价格项组件 |
+| **XtList** | 卡片列表组件 |
 
 ### 🔧 扩展组件
 
@@ -69,8 +73,12 @@ Vue.use(XtElementUI)
 | **XtPage** | 页面组件 |
 | **XtProgress** | 进度条组件 |
 | **XtTabs** | 标签页组件 |
+| **XtTabPane** | 标签页面板组件 |
 | **XtBadge** | 徽标组件 |
 | **XtScrollArrow** | 滚动箭头组件 |
+| **XtTransferTree** | 树形穿梭框组件 |
+| **XtFormSchema** | 表单配置化搜索组件 |
+| **XtFlow** | 审批流程轨迹组件（支持 Flowable 工作流对接） |
 
 ### 📊 图表组件
 
@@ -108,4 +116,3 @@ Vue.use(XtElementUI)
 - **[GitHub 仓库](https://github.com/JobWebNie/xt-element-ui)**
 
 
-# 在 GitHub 新建仓库后

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

@@ -18,6 +18,9 @@
 | `plain` | Boolean | false | - | 是否为朴素按钮 |
 | `disabled` | Boolean | false | - | 是否禁用按钮 |
 | `round` | Boolean | false | - | 是否为圆角按钮 |
+| `square` | Boolean | false | - | 是否为正方形按钮 |
+| `circle` | Boolean | false | - | 是否为圆形按钮 |
+
 
 ## 事件说明
 
@@ -31,11 +34,13 @@
 ::: demo 不同类型的按钮
 ```vue
 <template>
-  <div style="display: flex; gap: 12px;">
+  <div style="display: inline-flex; gap: 12px;">
+    <XtButton>默认按钮</XtButton>
     <XtButton type="primary">主要按钮</XtButton>
     <XtButton type="success">成功按钮</XtButton>
     <XtButton type="warning">警告按钮</XtButton>
     <XtButton type="danger">危险按钮</XtButton>
+    <XtButton type="info">信息按钮</XtButton>
   </div>
 </template>
 ```
@@ -45,7 +50,7 @@
 ::: demo 不同尺寸的按钮
 ```vue
 <template>
-  <div style="display: flex; gap: 12px; align-items: center;">
+  <div style="display: inline-flex; gap: 12px; align-items: center;">
     <XtButton size="large">大号按钮</XtButton>
     <XtButton>默认按钮</XtButton>
     <XtButton size="small">小号按钮</XtButton>
@@ -59,7 +64,7 @@
 ::: demo 朴素按钮
 ```vue
 <template>
-  <div style="display: flex; gap: 12px;">
+  <div style="display: inline-flex; gap: 12px;">
     <XtButton type="primary" plain>朴素主按钮</XtButton>
     <XtButton type="success" plain>朴素成功按钮</XtButton>
     <XtButton type="warning" plain>朴素警告按钮</XtButton>
@@ -73,11 +78,13 @@
 ::: demo 状态按钮
 ```vue
 <template>
-  <div style="display: flex; gap: 12px;">
+  <div style="display: inline-flex; gap: 12px;">
     <XtButton disabled>禁用按钮</XtButton>
     <XtButton round>圆角按钮</XtButton>
     <XtButton type="primary" disabled>禁用主按钮</XtButton>
     <XtButton type="primary" round>圆角主按钮</XtButton>
+    <XtButton type="success" icon="el-icon-plus" circle></XtButton>
+    <XtButton type="success" icon="el-icon-plus" square></XtButton>
   </div>
 </template>
 ```

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

@@ -5,7 +5,7 @@
 ::: demo 基本用法
 ```vue
 <template>
-  <XtCard title="卡片标题" value="123" unit="元"></XtCard>
+  <XtCard title="卡片标题"></XtCard>
 </template>
 ```
 :::
@@ -17,7 +17,7 @@
 ::: demo 基础卡片
 ```vue
 <template>
-  <XtCard title="今日销售额" :value="123456" unit="元"></XtCard>
+  <XtCard title="今日销售额"></XtCard>
 </template>
 ```
 :::
@@ -49,12 +49,10 @@
 ```vue
 <template>
   <XtCard>
-    <template #title>
+    <template v-slot:title>
       <span style="color: #1890ff;">📊 数据分析</span>
     </template>
-    <template #value>
-      <span style="font-size: 32px; color: #52c41a;">98.5%</span>
-    </template>
+    <span style="font-size: 32px; color: #52c41a;">98.5%</span>
   </XtCard>
 </template>
 ```
@@ -93,14 +91,10 @@
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | `title` | String | - | 卡片标题 |
-| `value` | String / Number | - | 卡片数值 |
-| `unit` | String | - | 数值单位 |
-| `noPadding` | Boolean | false | 是否取消内边距 |
 
 ## 插槽说明
 
 | 插槽名 | 说明 |
 |--------|------|
 | `default` | 自定义内容区域 |
-| `title` | 自定义标题区域 |
-| `value` | 自定义数值区域 |
+| `header` | 自定义头部区域 |

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

@@ -127,6 +127,7 @@
   <XtConfigProvider 
     :primaryColor="primaryColor"
     :theme="currentTheme"
+    :brand="brand"
     injectBackground
   >
     <div style="min-height: 120px; padding: 16px;">
@@ -160,6 +161,7 @@
 export default {
   data() {
     return {
+      brand: 'water',
       primaryColor: '#1890ff',
       currentTheme: 'light',
       colors: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1']

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

@@ -45,12 +45,12 @@ export default {
 
 ## 示例
 
-### 日期范围选择
+### 范围选择
 
-::: demo 日期范围选择
+::: demo 日期选择
 ```vue
 <template>
-  <XtDatePicker v-model="dateRange" rangeMode="true" />
+  <XtDatePicker v-model="dateRange" :rangeMode="true" />
 </template>
 
 <script>
@@ -65,9 +65,9 @@ export default {
 ```
 :::
 
-### 月份范围选择
+### 月份选择
 
-::: demo 月份范围选择
+::: demo 月份选择
 ```vue
 <template>
   <XtDatePicker v-model="monthRange" dateType="month" />
@@ -85,9 +85,9 @@ export default {
 ```
 :::
 
-### 年份范围选择
+### 年份选择
 
-::: demo 年份范围选择
+::: demo 年份选择
 ```vue
 <template>
   <XtDatePicker v-model="yearRange" dateType="year" />
@@ -125,25 +125,6 @@ export default {
 ```
 :::
 
-### 单选模式
-
-::: demo 单选模式
-```vue
-<template>
-  <XtDatePicker v-model="singleDate" :range-mode="false" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      singleDate: null
-    }
-  }
-}
-</script>
-```
-:::
 
 ### 时间维度选择（统计分析）
 

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

@@ -0,0 +1,404 @@
+审批流程轨迹组件，用于展示纵向审批历史和当前状态，支持 Flowable 工作流原生数据对接。
+
+## 基本用法
+
+::: demo 基本用法 - 自定义数据格式
+```vue
+<template>
+  <XtFlow :data="flowData" format="custom" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowData: [
+        {
+          id: '1',
+          name: '提交申请',
+          assignee: '张三',
+          status: 'approved',
+          createTime: '2024-01-01 10:00:00',
+          endTime: '2024-01-01 10:05:00',
+          comment: '',
+          duration: '5分钟'
+        },
+        {
+          id: '2',
+          name: '直属领导审批',
+          assignee: '李四',
+          status: 'approved',
+          createTime: '2024-01-01 10:30:00',
+          endTime: '2024-01-01 10:45:00',
+          comment: '同意',
+          duration: '15分钟'
+        },
+        {
+          id: '3',
+          name: '部门经理审批',
+          assignee: '王五',
+          status: 'rejected',
+          createTime: '2024-01-01 11:00:00',
+          endTime: '2024-01-01 11:20:00',
+          comment: '驳回：请补充材料后重新提交',
+          duration: '20分钟'
+        },
+        {
+          id: '4',
+          name: '待处理',
+          assignee: '--',
+          status: 'pending',
+          createTime: null,
+          endTime: null,
+          comment: '',
+          duration: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 示例
+
+### Flowable 原生数据对接
+
+直接传入 Flowable 返回的 `HistoricTaskInstance` 数据，组件自动解析状态。
+
+::: demo Flowable 原生数据对接
+```vue
+<template>
+  <XtFlow :data="flowableData" format="flowable" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowableData: [
+        {
+          id: '50001',
+          name: '直属领导审批',
+          assignee: '李四',
+          startTime: '2024-01-01T10:30:00',
+          endTime: '2024-01-01T10:45:00',
+          deleteReason: null,
+          durationInMillis: 900000
+        },
+        {
+          id: '50002',
+          name: '部门经理审批',
+          assignee: '王五',
+          startTime: '2024-01-01T11:00:00',
+          endTime: '2024-01-01T11:20:00',
+          deleteReason: 'rejected',
+          durationInMillis: 1200000
+        },
+        {
+          id: '50003',
+          name: '总监审批',
+          assignee: '赵六',
+          startTime: '2024-01-01T14:00:00',
+          endTime: null,
+          deleteReason: null
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自动折叠长审批链
+
+当审批链超过指定数量时，自动折叠多余节点，点击可展开。
+
+::: demo 自动折叠长审批链
+```vue
+<template>
+  <XtFlow :data="longFlowData" :collapse-count="3" />
+</template>
+
+<script>
+export default {
+  data() {
+    const data = []
+    for (let i = 1; i <= 10; i++) {
+      data.push({
+        id: `flow-${i}`,
+        name: `审批节点 ${i}`,
+        assignee: `审批人 ${i}`,
+        status: i === 10 ? 'pending' : 'approved',
+        createTime: `2024-01-0${i} 10:00:00`,
+        endTime: i === 10 ? null : `2024-01-0${i} 10:30:00`,
+        comment: i === 5 ? '需要补充说明' : '',
+        duration: i === 10 ? '' : '30分钟'
+      })
+    }
+    return { longFlowData: data }
+  }
+}
+</script>
+```
+:::
+
+### 圆角风格
+
+支持方形和圆形两套圆角规范。
+
+::: demo 圆角风格
+```vue
+<template>
+  <div style="display: flex; gap: 24px;">
+    <XtFlow :data="flowData" rounded="square" />
+    <XtFlow :data="flowData" rounded="round" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowData: [
+        {
+          id: '1',
+          name: '提交申请',
+          assignee: '张三',
+          status: 'approved',
+          createTime: '2024-01-01 10:00:00',
+          comment: ''
+        },
+        {
+          id: '2',
+          name: '直属领导审批',
+          assignee: '李四',
+          status: 'pending',
+          createTime: '2024-01-01 10:30:00',
+          comment: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义操作按钮
+
+通过插槽自定义节点操作按钮。
+
+::: demo 自定义操作按钮
+```vue
+<template>
+  <XtFlow :data="flowData">
+    <template #node-action="{ node }">
+      <el-button v-if="node.status === 'pending'" type="primary" size="mini">通过</el-button>
+      <el-button v-if="node.status === 'pending'" type="danger" size="mini">驳回</el-button>
+      <el-button v-if="node.status === 'approved'" type="text" size="mini">查看详情</el-button>
+    </template>
+  </XtFlow>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowData: [
+        {
+          id: '1',
+          name: '提交申请',
+          assignee: '张三',
+          status: 'approved',
+          createTime: '2024-01-01 10:00:00'
+        },
+        {
+          id: '2',
+          name: '直属领导审批',
+          assignee: '李四',
+          status: 'pending',
+          createTime: '2024-01-01 10:30:00'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义节点头像
+
+通过插槽自定义节点图标或头像。
+
+::: demo 自定义节点头像
+```vue
+<template>
+  <XtFlow :data="flowData">
+    <template #node-avatar="{ node }">
+      <el-avatar v-if="node.assignee" :size="20" icon="el-icon-user"></el-avatar>
+      <el-icon v-else :size="16">
+        <el-icon-loading v-if="node.status === 'pending'" />
+        <el-icon-check v-else-if="node.status === 'approved'" />
+        <el-icon-close v-else-if="node.status === 'rejected'" />
+        <el-icon-user v-else />
+      </el-icon>
+    </template>
+  </XtFlow>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowData: [
+        {
+          id: '1',
+          name: '提交申请',
+          assignee: '张三',
+          status: 'approved',
+          createTime: '2024-01-01 10:00:00'
+        },
+        {
+          id: '2',
+          name: '直属领导审批',
+          assignee: '',
+          status: 'pending',
+          createTime: '2024-01-01 10:30:00'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义状态文本
+
+通过 `statusMap` 属性自定义状态显示文本。
+
+::: demo 自定义状态文本
+```vue
+<template>
+  <XtFlow 
+    :data="flowData" 
+    :status-map="{
+      approved: '✓ 审核通过',
+      rejected: '✗ 审核驳回',
+      pending: '⏳ 等待审核',
+      transferred: '➡️ 已转办'
+    }"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      flowData: [
+        {
+          id: '1',
+          name: '提交申请',
+          assignee: '张三',
+          status: 'approved',
+          createTime: '2024-01-01 10:00:00'
+        },
+        {
+          id: '2',
+          name: '直属领导审批',
+          assignee: '李四',
+          status: 'pending',
+          createTime: '2024-01-01 10:30:00'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `data` | Array | `[]` | - | 数据源，支持 Flowable 原始格式或自定义格式 |
+| `format` | String | `flowable` | `flowable`、`custom` | 数据格式，`flowable` 自动解析状态，`custom` 直接使用 |
+| `collapse` | Boolean | `true` | - | 是否自动折叠长审批链 |
+| `collapseCount` | Number | `5` | - | 折叠前可见节点数 |
+| `rounded` | String | `square` | `square`、`round` | 圆角风格，方形或圆形 |
+| `timeFormat` | String | `YYYY-MM-DD HH:mm:ss` | - | 时间格式化字符串（仅 `format='flowable'` 时生效） |
+| `statusMap` | Object | - | - | 自定义状态文本映射 |
+
+## 状态值说明
+
+| 状态值 | 默认文本 | 说明 |
+|--------|----------|------|
+| `approved` | 已通过 | 有结束时间且无驳回原因 |
+| `rejected` | 已驳回 | `deleteReason` 包含 reject/驳回 |
+| `pending` | 待审批 | 无结束时间或最后节点自动追加 |
+| `transferred` | 已转办 | `deleteReason` 包含 transfer/转办 |
+| `delegated` | 已委托 | `deleteReason` 包含 delegate/委托 |
+| `recalled` | 已撤回 | `deleteReason` 包含 revoke/撤回/recall |
+| `cancelled` | 已取消 | `deleteReason` 包含 cancel/取消 |
+| `started` | 已发起 | 流程起始节点 |
+
+## 插槽说明
+
+| 插槽名 | 作用域 | 说明 |
+|--------|--------|------|
+| `node-avatar` | `{ node, index }` | 自定义节点图标/头像 |
+| `node` | `{ node, index }` | 自定义节点标题 |
+| `assignee` | `{ node, index }` | 自定义审批人显示 |
+| `node-desc` | `{ node, index }` | 自定义描述/审批意见 |
+| `node-action` | `{ node, index }` | 自定义节点操作按钮 |
+| `expand-trigger` | - | 自定义展开触发器内容 |
+| `collapse-trigger` | - | 自定义收起触发器内容 |
+
+## Flowable 数据格式
+
+组件支持直接对接 Flowable 工作流引擎返回的 `HistoricTaskInstance` 数据格式：
+
+```javascript
+{
+  id: '50001',                      // 任务ID
+  name: '部门经理审批',              // 任务名称
+  taskName: '部门经理审批',          // 任务名称（兼容字段）
+  activityName: '部门经理审批',      // 活动名称（兼容字段）
+  assignee: '张三',                 // 审批人
+  startTime: '2024-01-01T10:00:00', // 开始时间
+  endTime: '2024-01-01T10:30:00',   // 结束时间（null 表示待办）
+  deleteReason: null,               // 删除原因（rejected/delegate/transfer 等）
+  durationInMillis: 1800000,        // 耗时（毫秒）
+  type: 'userTask'                  // 节点类型（startEvent/userTask/endEvent）
+}
+```
+
+## 自定义数据格式
+
+使用 `format="custom"` 时，数据格式如下：
+
+```javascript
+{
+  id: '1',                          // 节点ID
+  name: '提交申请',                  // 节点名称
+  assignee: '张三',                 // 审批人
+  status: 'approved',               // 状态（必填）
+  createTime: '2024-01-01 10:00:00', // 创建时间
+  endTime: '2024-01-01 10:05:00',   // 结束时间
+  comment: '',                      // 审批意见/驳回原因
+  duration: '5分钟',                // 耗时
+  description: ''                   // 描述信息
+}
+```
+
+## 注意事项
+
+- 组件自动推断状态：有 `endTime` 且无 `deleteReason` 为通过状态，`deleteReason` 包含 `reject` 为驳回状态
+- 当 `format='flowable'` 且最后一个节点不是 `pending` 状态时，组件会自动追加一个待办节点
+- 连接线样式根据前一个节点的状态决定，驳回状态自动显示红色虚线
+- 待办节点的图标会有脉冲动画效果，提示用户当前待处理