xt-element-ui 1.3.2 → 1.3.4

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

@@ -1,108 +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>
-```
-:::
+## 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

@@ -1,199 +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 默认间距 |
+## 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 默认间距 |