xt-element-ui 1.2.4 → 1.2.6

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

@@ -0,0 +1,104 @@
+## XtCardItem 卡片项组件
+
+卡片项组件用于在卡片内展示一行数据，支持标签、数值和单位的展示。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtCardItem label="销售额" value="12345" unit="元"></XtCardItem>
+</template>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `iconType` | String | border | `border`、`icon` | 图标类型 |
+| `type` | String | primary | `primary`、`success`、`warning`、`danger` | 颜色类型 |
+| `label` | String | - | - | 标签文本 |
+| `value` | String / Number | - | - | 数值内容 |
+| `unit` | String | - | - | 数值单位 |
+| `icon` | String | - | - | Element Plus 图标名称 |
+| `iconAt` | String | right | `left`、`right`、`top`、`bottom` | 图标位置 |
+| `color` | String | - | - | 自定义颜色 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `label` | 自定义标签区域 |
+| `value` | 自定义数值区域 |
+| `unit` | 自定义单位区域 |
+| `icon` | 自定义图标区域 |
+
+## 示例
+
+### 边框型卡片项（默认）
+
+::: demo 边框型卡片项
+```vue
+<template>
+  <XtCardItem label="销售额" value="12345" unit="元" type="primary"></XtCardItem>
+</template>
+```
+:::
+
+### 不同类型的边框卡片项
+
+::: 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>
+</template>
+```
+:::
+
+### 自定义颜色
+::: demo 自定义颜色
+```vue
+<template>
+  <XtCardItem label="自定义颜色" value="100%" color="#722ed1"></XtCardItem>
+</template>
+```
+:::
+
+### 自定义插槽
+::: demo 自定义插槽
+```vue
+<template>
+  <XtCardItem>
+    <template #label>
+      <span style="color: #1890ff; font-weight: bold;">自定义标签</span>
+    </template>
+    <template #value>
+      <span style="font-size: 18px;">9999</span>
+    </template>
+    <template #unit>
+      <span style="color: #999;">自定义单位</span>
+    </template>
+  </XtCardItem>
+</template>
+```
+:::
+
+### 在卡片中使用
+
+::: demo 在卡片中使用
+```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>
+  </XtCard>
+</template>
+```
+:::

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

@@ -0,0 +1,108 @@
+## XtCard 卡片组件
+
+卡片组件用于展示信息，通常包含标题和内容区域。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtCard title="卡片标题" value="123" unit="元"></XtCard>
+</template>
+```
+:::
+
+## 属性说明
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `title` | String | - | 卡片标题 |
+| `value` | String / Number | - | 卡片数值 |
+| `unit` | String | - | 数值单位 |
+| `noPadding` | Boolean | false | 是否取消内边距 |
+
+## 插槽说明
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 自定义内容区域 |
+| `title` | 自定义标题区域 |
+| `value` | 自定义数值区域 |
+
+## 示例
+
+### 基础卡片
+
+::: demo 基础卡片
+```vue
+<template>
+  <XtCard title="今日销售额" :value="123456" unit="元"></XtCard>
+</template>
+```
+:::
+
+### 自定义内容
+
+::: demo 自定义内容
+```vue
+<template>
+  <XtCard title="用户统计">
+    <div style="display: flex; justify-content: space-around;">
+      <div style="text-align: center;">
+        <span style="display: block; font-size: 12px; color: #999;">新增用户</span>
+        <span style="font-size: 24px; font-weight: bold; color: #1890ff;">520</span>
+      </div>
+      <div style="text-align: center;">
+        <span style="display: block; font-size: 12px; color: #999;">活跃用户</span>
+        <span style="font-size: 24px; font-weight: bold; color: #52c41a;">3840</span>
+      </div>
+    </div>
+  </XtCard>
+</template>
+```
+:::
+
+### 自定义标题和数值
+
+::: demo 自定义标题和数值
+```vue
+<template>
+  <XtCard>
+    <template #title>
+      <span style="color: #1890ff;">📊 数据分析</span>
+    </template>
+    <template #value>
+      <span style="font-size: 32px; color: #52c41a;">98.5%</span>
+    </template>
+  </XtCard>
+</template>
+```
+:::
+
+### 无边距卡片
+
+::: demo 无边距卡片
+```vue
+<template>
+  <XtCard title="紧凑卡片" :value="100" noPadding>
+    <div style="padding: 8px;">
+      <p>内容区域没有额外内边距</p>
+    </div>
+  </XtCard>
+</template>
+```
+:::
+
+### 卡片组
+
+::: demo 卡片组
+```vue
+<template>
+  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+    <XtCard title="销售额" value="12345" unit="元"></XtCard>
+    <XtCard title="订单数" value="520" unit="单"></XtCard>
+    <XtCard title="转化率" value="23.5" unit="%"></XtCard>
+  </div>
+</template>
+```
+:::

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

@@ -0,0 +1,199 @@
+## XtConfigProvider 配置提供者
+
+配置提供者组件用于全局配置主题和样式变量。
+
+## 基本用法
+
+::: demo 基本用法
+```vue
+<template>
+  <XtConfigProvider :theme="theme" proxyElement="body">
+    <div>
+      <XtButton type="primary" @click="handleSwitchTheme">主题按钮</XtButton>
+    </div>
+  </XtConfigProvider>
+</template>
+<script>
+  export default {
+    data(){
+      return {
+        theme: 'white'
+      }
+    },
+    methods: {
+      handleSwitchTheme() {
+        this.theme = this.theme == 'dark' ? 'white': 'dark'
+      }
+    }
+  }
+</script>
+```
+:::
+
+## 属性说明
+| 属性 | 类型 | 默认值 | 可选值 | 说明 |
+|------|------|--------|--------|------|
+| `primaryColor` | String | - | - | 自定义主题色 |
+| `theme` | String | - | `dark`、`light` | 主题模式 |
+| `size` | String | - | `small`、`medium`、`large` | 组件尺寸 |
+| `injectBackground` | Boolean | - | - | 是否注入背景色到根元素 |
+| `injectColor` | Boolean | - | - | 是否注入文字颜色到根元素 |
+| `tag` | String | 'div' | - | 根元素标签 |
+| `proxyElement` | HTMLElement / String | - | - | 代理元素 |
+| `vars` | Object | - | - | 自定义 CSS 变量 |
+
+## 示例
+
+### 自定义主题色
+
+::: demo 自定义主题色
+```vue
+<template>
+  <XtConfigProvider :primaryColor="'#722ed1'">
+    <div>
+      <XtButton type="primary">紫色主题按钮</XtButton>
+      <XtCard title="自定义主题卡片">
+        <XtText type="primary">主题色文本</XtText>
+      </XtCard>
+    </div>
+  </XtConfigProvider>
+</template>
+```
+:::
+
+### 亮色主题
+
+::: demo 亮色主题
+```vue
+<template>
+  <XtConfigProvider theme="light" injectBackground>
+    <div style="min-height: 100px; padding: 16px;">
+      <XtCard title="亮色模式卡片">
+        <XtText type="primary">亮色主题内容</XtText>
+      </XtCard>
+      <XtButton type="primary">亮色主题按钮</XtButton>
+    </div>
+  </XtConfigProvider>
+</template>
+```
+:::
+
+### 自定义 CSS 变量
+
+::: demo 自定义 CSS 变量
+```vue
+<template>
+  <XtConfigProvider :vars="{
+    '--xt-color-primary': '#52c41a',
+    '--xt-color-success': '#13c2c2',
+    '--xt-flex-box-gap': '20px'
+  }">
+    <XtFlexBox>
+      <XtButton type="primary">绿色主题按钮</XtButton>
+      <XtButton type="success">青色成功按钮</XtButton>
+    </XtFlexBox>
+  </XtConfigProvider>
+</template>
+```
+:::
+
+### 组合配置
+
+::: demo 组合配置
+```vue
+<template>
+  <XtConfigProvider 
+    :primaryColor="'#1890ff'"
+    size="medium"
+  >
+    <div style="padding: 16px;">
+      <XtCard title="综合配置示例">
+        <XtText type="primary">主题色: #1890ff</XtText>
+        <XtText type="success">尺寸: medium</XtText>
+      </XtCard>
+      <XtFlexBox gap="16px" style="margin-top: 16px;">
+        <XtButton type="primary">主要按钮</XtButton>
+        <XtButton type="success">成功按钮</XtButton>
+        <XtButton type="warning">警告按钮</XtButton>
+      </XtFlexBox>
+    </div>
+  </XtConfigProvider>
+</template>
+```
+:::
+
+### 动态主题切换
+::: demo 动态主题切换
+```vue
+<template>
+  <XtConfigProvider 
+    :primaryColor="primaryColor"
+    :theme="currentTheme"
+    injectBackground
+  >
+    <div style="min-height: 120px; padding: 16px;">
+      <XtFlexBox content="space-between" style="margin-bottom: 16px;">
+        <span>当前主题: {{ currentTheme }}</span>
+        <XtFlexBox gap="8px">
+          <XtButton 
+            type="primary" 
+            plain
+            @click="switchTheme"
+          >
+            切换主题
+          </XtButton>
+          <XtButton 
+            type="success" 
+            plain
+            @click="changeColor"
+          >
+            更换主题色
+          </XtButton>
+        </XtFlexBox>
+      </XtFlexBox>
+      <XtCard title="动态主题示例">
+        <XtText type="primary">当前主题色: {{ primaryColor }}</XtText>
+      </XtCard>
+    </div>
+  </XtConfigProvider>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      primaryColor: '#1890ff',
+      currentTheme: 'light',
+      colors: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1']
+    }
+  },
+  methods: {
+    switchTheme() {
+      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light'
+    },
+    changeColor() {
+      const randomIndex = Math.floor(Math.random() * this.colors.length)
+      this.primaryColor = this.colors[randomIndex]
+    }
+  }
+}
+</script>
+```
+:::
+
+## 支持的 CSS 变量
+
+| CSS 变量 | 说明 |
+|----------|------|
+| `--xt-color-primary` | 主色 |
+| `--xt-color-success` | 成功色 |
+| `--xt-color-warning` | 警告色 |
+| `--xt-color-danger` | 危险色 |
+| `--xt-color-info` | 信息色 |
+| `--xt-text-color-primary` | 主要文字颜色 |
+| `--xt-text-color-regular` | 常规文字颜色 |
+| `--xt-text-color-secondary` | 次要文字颜色 |
+| `--xt-bg-color` | 背景颜色 |
+| `--xt-bg-color-page` | 页面背景颜色 |
+| `--xt-border-color` | 边框颜色 |
+| `--xt-flex-box-gap` | FlexBox 默认间距 |

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

@@ -0,0 +1,115 @@
+## XtFlexBox 弹性布局组件
+
+弹性布局组件，基于 CSS Flexbox 实现，提供便捷的布局能力。
+
+## 基本用法
+
+::: demo 基本用法
+```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>
+  </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">
+    <span>左侧内容</span>
+    <span>右侧内容</span>
+  </XtFlexBox>
+</template>
+```
+:::
+
+### 垂直布局
+
+::: demo 垂直布局
+```vue
+<template>
+  <XtFlexBox direction="column" gap="12px">
+    <div style="background: #1890ff; color: white; padding: 8px;">顶部</div>
+    <div style="background: #52c41a; color: white; padding: 8px;">中部</div>
+    <div style="background: #faad14; color: white; padding: 8px;">底部</div>
+  </XtFlexBox>
+</template>
+```
+:::
+
+### 均匀分布
+
+::: 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>
+</template>
+```
+:::
+
+### 自动换行
+
+::: demo 自动换行
+```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>
+  </XtFlexBox>
+</template>
+```
+:::
+
+### 反向排列
+
+::: 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>
+</template>
+```
+:::
+
+### 嵌套使用
+
+::: demo 嵌套使用
+```vue
+<template>
+  <XtFlexBox direction="column" gap="16px">
+    <XtFlexBox content="space-between">
+      <span>头部左侧</span>
+      <span>头部右侧</span>
+    </XtFlexBox>
+    <XtFlexBox>
+      <div style="flex: 1; background: #e6f7ff; padding: 16px;">主内容区</div>
+      <div style="width: 200px; background: #f6ffed; padding: 16px;">侧边栏</div>
+    </XtFlexBox>
+  </XtFlexBox>
+</template>
+```
+:::