xt-element-ui 1.2.4 → 1.2.5

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

@@ -0,0 +1,150 @@
+## XtInput 输入框组件
+
+输入框组件用于收集用户输入的信息。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtInput v-model="inputValue" placeholder="请输入内容"></XtInput>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      inputValue: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | String / Number | - | 输入值（支持 v-model） |
+| `placeholder` | String | '请输入内容' | 占位提示文本 |
+| `color` | String | - | 自定义聚焦颜色 |
+
+## 示例
+
+### 基础输入框
+::: demo 基础输入框
+```vue
+<template>
+  <XtInput v-model="username" placeholder="请输入用户名"></XtInput>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义占位符
+
+::: demo 自定义占位符
+```vue
+<template>
+  <XtInput v-model="email" placeholder="请输入您的邮箱地址"></XtInput>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      email: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### 自定义聚焦颜色
+::: demo 自定义聚焦颜色
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtInput v-model="input1" placeholder="默认颜色"></XtInput>
+    <XtInput v-model="input2" placeholder="绿色主题" color="#52c41a"></XtInput>
+    <XtInput v-model="input3" placeholder="橙色主题" color="#faad14"></XtInput>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      input1: '',
+      input2: '',
+      input3: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### 输入框组
+
+::: demo 输入框组
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <XtInput v-model="name" placeholder="姓名"></XtInput>
+    <XtInput v-model="phone" placeholder="手机"></XtInput>
+    <XtInput v-model="address" placeholder="地址"></XtInput>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: '',
+      phone: '',
+      address: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+### 监听输入事件
+
+::: demo 监听输入事件
+```vue
+<template>
+  <div>
+    <XtInput :value="inputValue" placeholder="实时监听输入" @input="handleInput"></XtInput>
+    <p style="margin-top: 12px;">输入长度: {{ inputValue.length }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      inputValue: ''
+    }
+  },
+  methods: {
+    handleInput(value) {
+      this.inputValue = value
+    }
+  }
+}
+</script>
+```
+:::

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

@@ -0,0 +1,212 @@
+## XtText 文本组件
+
+文本组件用于展示不同样式的文本内容。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtText type="primary">主要文本</XtText>
+</template>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `type` | String | - | `primary`、`success`、`warning`、`danger` | 文本颜色类型 |
+| `size` | String | base | `extra-large`、`large`、`medium`、`base`、`small`、`extra-small` | 字体大小 |
+| `bold` | Boolean | false | - | 是否加粗 |
+| `letterSpacing` | String / Number | - | - | 字间距 |
+| `money` | Boolean | false | - | 是否启用金额格式化 |
+| `value` | Number / String | - | - | 金额数值 |
+| `currency` | String | CNY | `CNY`、`USD`、`EUR`、`JPY`、`GBP`、`AUD`、`CAD` | 货币类型 |
+| `decimals` | Number | 2 | 0-10 | 小数位数 |
+| `locale` | String | zh-CN | - | 语言环境 |
+| `showSign` | Boolean | false | - | 是否显示正负号 |
+| `prefix` | String | - | - | 自定义前缀 |
+| `suffix` | String | - | - | 自定义后缀 |
+
+## 示例
+
+### 不同类型的文本
+::: demo 不同类型的文本
+```vue
+<template>
+  <div style="display: flex; gap: 16px;">
+    <XtText type="primary">主要文本</XtText>
+    <XtText type="success">成功文本</XtText>
+    <XtText type="warning">警告文本</XtText>
+    <XtText type="danger">危险文本</XtText>
+  </div>
+</template>
+```
+:::
+
+### 不同字体大小
+::: demo 不同字体大小
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <XtText size="extra-large">特大号文本</XtText>
+    <XtText size="large">大号文本</XtText>
+    <XtText size="medium">中号文本</XtText>
+    <XtText size="base">基准文本</XtText>
+    <XtText size="small">小号文本</XtText>
+    <XtText size="extra-small">特小号文本</XtText>
+  </div>
+</template>
+```
+:::
+
+### 加粗文本
+
+::: demo 加粗文本
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <XtText bold>普通加粗文本</XtText>
+    <XtText type="primary" bold>主要加粗文本</XtText>
+  </div>
+</template>
+```
+:::
+
+### 字间距
+::: demo 字间距
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <XtText>正常字间距</XtText>
+    <XtText :letterSpacing="4">宽字距文本</XtText>
+    <XtText letterSpacing="8px">更宽字距文本</XtText>
+  </div>
+</template>
+```
+:::
+
+### 组合使用
+
+::: demo 组合使用
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <XtText type="success" bold>成功加粗文本</XtText>
+    <XtText type="danger" :letterSpacing="2">危险宽字距文本</XtText>
+    <XtText type="warning" bold :letterSpacing="3">警告加粗宽字距</XtText>
+  </div>
+</template>
+```
+:::
+
+### 段落文本
+
+::: demo 段落文本
+```vue
+<template>
+  <p>
+    这是一段普通文本，其中包含
+    <XtText type="primary">高亮的主要文本</XtText>
+    和
+    <XtText type="danger">危险提示文本</XtText>。
+  </p>
+</template>
+```
+:::
+
+### 数据展示
+
+::: demo 数据展示
+```vue
+<template>
+  <div style="display: flex; align-items: baseline; gap: 8px;">
+    <XtText type="primary" bold style="font-size: 24px;">¥1,234.56</XtText>
+    <XtText type="warning" :letterSpacing="1">本月已节省¥520</XtText>
+  </div>
+</template>
+```
+:::
+
+### 金额格式化
+::: demo 金额格式化
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <div>
+      <span style="color: #909399; margin-right: 16px;">人民币：</span>
+      <XtText money :value="123456.78" type="primary" bold></XtText>
+    </div>
+    <div>
+      <span style="color: #909399; margin-right: 16px;">美元：</span>
+      <XtText money :value="123456.78" currency="USD"></XtText>
+    </div>
+    <div>
+      <span style="color: #909399; margin-right: 16px;">欧元：</span>
+      <XtText money :value="123456.78" currency="EUR" locale="de-DE"></XtText>
+    </div>
+    <div>
+      <span style="color: #909399; margin-right: 16px;">日元：</span>
+      <XtText money :value="123456" currency="JPY" :decimals="0"></XtText>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### 金额显示正负号
+::: demo 金额显示正负号
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <div>
+      <span style="color: #909399; margin-right: 16px;">收入：</span>
+      <XtText money :value="5000" showSign type="success"></XtText>
+    </div>
+    <div>
+      <span style="color: #909399; margin-right: 16px;">支出：</span>
+      <XtText money :value="-2300" showSign type="danger"></XtText>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### 自定义前缀后缀
+
+::: demo 自定义前缀后缀
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <div>
+      <XtText money :value="1000" prefix="合计：" suffix=" 元整" type="primary"></XtText>
+    </div>
+    <div>
+      <XtText money :value="98.5" prefix="折扣价：" type="warning"></XtText>
+    </div>
+  </div>
+</template>
+```
+:::
+
+### 金额样式组合
+
+::: demo 金额样式组合
+```vue
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="font-size: 28px;">
+      <XtText money :value="1234567.89" type="primary" bold></XtText>
+    </div>
+    <div>
+      <span style="color: #909399;">今日收益：</span>
+      <XtText money :value="1258.67" showSign type="success"></XtText>
+    </div>
+    <div>
+      <span style="color: #909399;">累计支出：</span>
+      <XtText money :value="-8920.30" showSign type="danger"></XtText>
+    </div>
+  </div>
+</template>
+```
+:::

package/docs/components/extend/ex-bar.md

@@ -0,0 +1,68 @@
+## ExBar - 柱状图组件
+
+基于 ECharts 封装的柱状图组件。
+
+## 基本用法
+
+::: demo 柱状图基础示例
+```vue
+<template>
+  <ExChart type="bar" :chartData="chartData" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '张三', value: 65 },
+        { name: '李四', value: 78 },
+        { name: '王五', value: 89 },
+        { name: '赵六', value: 95 },
+        { name: '钱七', value: 72 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 显示标记点
+
+::: demo 显示最大值和最小值标记点
+```vue
+<template>
+  <ExChart type="bar" :chartData="chartData" :markPoint="true" style="height: 400px;" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartData: [
+        { name: '华东区', value: 1250 },
+        { name: '华南区', value: 980 },
+        { name: '华北区', value: 890 },
+        { name: '西南区', value: 720 },
+        { name: '西北区', value: 560 }
+      ]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `chartData` | Array | [] | 图表数据 |
+| `theme` | String | '' | 主题名称 |
+| `size` | String | 'medium' | 尺寸 |
+| `markPoint` | Boolean | false | 是否显示标记点 |
+| `showZoom` | Boolean | false | 是否显示缩放功能 |
+| `reverse` | Boolean | false | 是否反转坐标轴 |
+| `longLable` | Boolean | false | 是否启用长标签模式 |
+| `energyType` | String | '' | Y轴单位 |

package/docs/components/extend/ex-button.md

@@ -0,0 +1,62 @@
+## ExButton 按钮
+
+基于 ElementUI 按钮封装，支持防抖和字体大小配置。
+
+## 基础用法
+
+::: demo 按钮基础示例
+```vue
+<template>
+  <div>
+    <ex-button>默认按钮</ex-button>
+    <ex-button type="primary">主要按钮</ex-button>
+    <ex-button type="success">成功按钮</ex-button>
+  </div>
+</template>
+```
+:::
+
+## 字体大小
+
+支持三种尺寸：`small`、`medium`、`large`
+
+::: demo 按钮字体大小示例
+```vue
+<template>
+  <div>
+    <ex-button size="mini">迷你按钮</ex-button>
+    <ex-button size="small">小按钮</ex-button>
+    <ex-button size="medium">中按钮</ex-button>
+    <ex-button size="large">大按钮</ex-button>
+  </div>
+</template>
+```
+:::
+
+## 继承 ConfigProvider 配置
+
+当 ExButton 被包裹在 XtConfigProvider 中时，会自动继承字体大小配置：
+
+::: demo 按钮继承字体大小示例
+```vue
+<template>
+  <xt-config-provider size="large">
+    <ex-button>自动继承大字体</ex-button>
+  </xt-config-provider>
+</template>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| type | 按钮类型 | string | primary/success/warning/danger | — |
+| size | 按钮尺寸 | string | small/medium/large | — |
+| throttle | 点击节流时间 (ms) | number | — | 0 |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| click | 点击按钮时触发 | — |

package/docs/components/extend/ex-card.md

@@ -0,0 +1,86 @@
+## ExCard 卡片
+
+基于 ElementUI 卡片封装，支持多种阴影模式和字体大小配置。
+
+## 基础用法
+
+::: demo 基础用法
+```vue
+<template>
+  <ex-card title="卡片标题">
+    <p>这是卡片内容</p>
+  </ex-card>
+</template>
+```
+:::
+
+## 阴影模式
+
+支持三种阴影模式：`always`、`hover`、`never`
+
+::: demo 阴影模式
+```vue
+<template>
+  <div>
+    <ex-card shadow="always">始终显示阴影</ex-card>
+    <ex-card shadow="hover">悬停时显示阴影</ex-card>
+    <ex-card shadow="never">不显示阴影</ex-card>
+  </div>
+</template>
+```
+:::
+
+## 字体大小
+
+支持三种尺寸：`small`、`medium`、`large`
+
+::: demo 字体大小
+```vue
+<template>
+  <div>
+    <ex-card size="small" title="小卡片">
+      <p>小尺寸卡片内容</p>
+    </ex-card>
+    <ex-card size="medium" title="中卡片">
+      <p>中等尺寸卡片内容</p>
+    </ex-card>
+    <ex-card size="large" title="大卡片">
+      <p>大尺寸卡片内容</p>
+    </ex-card>
+  </div>
+</template>
+```
+:::
+
+## 继承 ConfigProvider 配置
+
+当 ExCard 被包裹在 XtConfigProvider 中时，会自动继承字体大小配置。
+
+::: demo 继承配置
+```vue
+<template>
+  <xt-config-provider size="large">
+    <ex-card title="卡片标题">
+      <p>自动继承大字体配置</p>
+    </ex-card>
+  </xt-config-provider>
+</template>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| title | 卡片标题 | string | — | — |
+| shadow | 阴影显示模式 | string | always/hover/never | always |
+| bordered | 是否显示边框 | boolean | — | true |
+| size | 卡片尺寸 | string | small/medium/large | — |
+| body-class | 卡片 body 的类名 | string | — | — |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| — | 卡片内容 |
+| header | 卡片头部内容（优先级高于 title 属性） |