xt-element-ui 1.2.3 → 1.2.5

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

@@ -0,0 +1,134 @@
+## ExUpload 图片上传
+
+基于 ElementUI `el-upload` 封装，支持图片上传、预览、删除，以及多图管理。
+
+## 基础用法
+
+设置 `action` 为上传接口路径，`base-url` 为图片基础地址，`v-model` 绑定逗号分隔的图片路径字符串：
+
+::: demo 图片上传基础示例
+```vue
+<template>
+  <ex-upload
+    v-model="imgList"
+    action="/api/upload"
+    base-url="https://example.com"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 多图上传
+
+设置 `multiple` 开启多图上传，通过 `limit` 限制最多上传数量：
+
+::: demo 多图上传示例
+```vue
+<template>
+  <ex-upload
+    v-model="imgList"
+    action="/api/upload"
+    base-url="https://example.com"
+    multiple
+    :limit="5"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 图片大小
+
+通过 `size` 属性设置显示尺寸：
+
+::: demo 图片尺寸示例
+```vue
+<template>
+  <div>
+    <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" />
+    <div style="margin-top: 20px">
+      <ex-upload v-model="img" action="/api/upload" base-url="https://example.com" size="big" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      img: ''
+    }
+  }
+}
+</script>
+```
+:::
+
+## 禁用状态
+
+`disabled` 属性可禁用上传和删除功能：
+
+::: demo 禁用上传示例
+```vue
+<template>
+  <ex-upload
+    v-model="img"
+    action="/api/upload"
+    base-url="https://example.com"
+    disabled
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      img: 'demo.jpg'
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| src | 当前图片列表，以英文逗号分隔（v-model） | string | — | '' |
+| action | 上传接口路径，与 base-url 拼接 | string | — | '' |
+| base-url | 图片基础地址（服务端域名） | string | — | '' |
+| multiple | 是否支持多选 | boolean | — | false |
+| limit | 最多上传数量 | number | — | 5 |
+| accept | 允许的文件类型 | string | — | .jpg,.jpeg,.png |
+| auto-upload | 是否在选取文件后立即上传 | boolean | — | true |
+| disabled | 是否禁用 | boolean | — | false |
+| size | 图片展示尺寸 | string | big | — |
+| data | 上传时附带的额外参数 | object | — | {} |
+| all-file-list | 用于图库预览的图片列表 | array | — | — |
+| before-emit-data | 对上传结果进行处理的回调函数，返回 `false` 代表上传失败 | function(res, file, type) | — | (内部函数) |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 图片列表变化时触发 | 以英文逗号分隔的图片路径字符串 |

package/docs/components/utils/size.md

@@ -0,0 +1,148 @@
+## 字体大小配置
+
+## 概述
+
+通过工具函数可以全局设置组件的字体大小，支持三种预设尺寸：`small`、`medium`、`large`。
+
+## 方法说明
+
+### setSize(size)
+
+设置全局字体大小。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `size` | String | 是 | 字体大小：`small`、`medium`、`large` |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="setSmall">小号字体</XtButton>
+    <XtButton @click="setMedium">中号字体</XtButton>
+    <XtButton @click="setLarge">大号字体</XtButton>
+  </div>
+</template>
+
+<script>
+import { setSize } from 'xt-element-ui'
+
+export default {
+  methods: {
+    setSmall() {
+      setSize('small')
+    },
+    setMedium() {
+      setSize('medium')
+    },
+    setLarge() {
+      setSize('large')
+    }
+  }
+}
+</script>
+```
+
+### getSize()
+
+获取当前字体大小配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前字体大小：{{ currentSize }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getSize } from 'xt-element-ui'
+
+export default {
+  computed: {
+    currentSize() {
+      return getSize()
+    }
+  }
+}
+</script>
+```
+
+## 字体大小对照表
+
+| 尺寸 | 说明 |
+|------|------|
+| `small` | 小号字体，默认值 |
+| `medium` | 中号字体 |
+| `large` | 大号字体，适合大屏展示 |
+
+## 使用示例
+
+### 在组件安装时配置
+
+```javascript
+import XtElementUI from 'xt-element-ui'
+
+Vue.use(XtElementUI, {
+  size: 'large'  // 全局设置大号字体
+})
+```
+
+### 动态切换字体大小
+
+```vue
+<template>
+  <div>
+    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
+      <XtButton 
+        v-for="size in sizes" 
+        :key="size"
+        :type="currentSize === size ? 'primary' : ''"
+        @click="changeSize(size)"
+      >
+        {{ sizeLabels[size] }}
+      </XtButton>
+    </XtFlexBox>
+    
+    <XtCard>
+      <XtCardItem title="当前尺寸">
+        <XtText type="primary" bold>{{ currentSize }}</XtText>
+      </XtCardItem>
+      <XtCardItem title="示例文本">
+        <XtText>这是一段示例文本，用于展示字体大小效果。</XtText>
+      </XtCardItem>
+    </XtCard>
+  </div>
+</template>
+
+<script>
+import { setSize, getSize } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      sizes: ['small', 'medium', 'large'],
+      sizeLabels: {
+        small: '小号',
+        medium: '中号',
+        large: '大号'
+      }
+    }
+  },
+  computed: {
+    currentSize() {
+      return getSize()
+    }
+  },
+  methods: {
+    changeSize(size) {
+      setSize(size)
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 字体大小设置会影响所有使用组件库样式的元素
+2. 设置后会在 `html` 标签上添加 `data-size` 属性
+3. 需要配合对应的 CSS 样式才能生效

package/docs/components/utils/theme.md

@@ -0,0 +1,183 @@
+## 主题配置
+
+## 概述
+
+通过工具函数可以全局设置主题模式，支持两种主题：`white`（亮色主题）和 `dark`（暗色主题）。
+
+## 方法说明
+
+### setTheme(theme)
+
+设置全局主题。
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `theme` | String | 是 | 主题类型：`white`、`dark` |
+
+```vue
+<template>
+  <div>
+    <XtButton @click="setWhiteTheme">亮色主题</XtButton>
+    <XtButton @click="setDarkTheme">暗色主题</XtButton>
+  </div>
+</template>
+
+<script>
+import { setTheme } from 'xt-element-ui'
+
+export default {
+  methods: {
+    setWhiteTheme() {
+      setTheme('white')
+    },
+    setDarkTheme() {
+      setTheme('dark')
+    }
+  }
+}
+</script>
+```
+
+### getTheme()
+
+获取当前主题配置。
+
+```vue
+<template>
+  <div>
+    <XtText>当前主题：{{ currentTheme }}</XtText>
+  </div>
+</template>
+
+<script>
+import { getTheme } from 'xt-element-ui'
+
+export default {
+  computed: {
+    currentTheme() {
+      return getTheme()
+    }
+  }
+}
+</script>
+```
+
+## 主题对照表
+
+| 主题 | 说明 |
+|------|------|
+| `white` | 亮色主题，适合日间使用（默认值） |
+| `dark` | 暗色主题，适合夜间使用 |
+
+## 使用示例
+
+### 在组件安装时配置
+
+```javascript
+import XtElementUI from 'xt-element-ui'
+
+Vue.use(XtElementUI, {
+  theme: 'dark'  // 全局设置暗色主题
+})
+```
+
+### 动态切换主题
+
+```vue
+<template>
+  <div>
+    <XtFlexBox content="center" style="gap: 16px; margin-bottom: 16px;">
+      <XtButton 
+        v-for="theme in themes" 
+        :key="theme"
+        :type="currentTheme === theme ? 'primary' : ''"
+        @click="changeTheme(theme)"
+      >
+        {{ themeLabels[theme] }}
+      </XtButton>
+    </XtFlexBox>
+    
+    <XtCard>
+      <XtCardItem title="当前主题">
+        <XtText type="primary" bold>{{ themeLabels[currentTheme] }}</XtText>
+      </XtCardItem>
+      <XtCardItem title="主题状态">
+        <XtText :type="currentTheme === 'dark' ? 'warning' : 'success'">
+          {{ currentTheme === 'dark' ? '暗色模式已开启' : '亮色模式已开启' }}
+        </XtText>
+      </XtCardItem>
+    </XtCard>
+  </div>
+</template>
+
+<script>
+import { setTheme, getTheme } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      themes: ['white', 'dark'],
+      themeLabels: {
+        white: '亮色',
+        dark: '暗色'
+      }
+    }
+  },
+  computed: {
+    currentTheme() {
+      return getTheme()
+    }
+  },
+  methods: {
+    changeTheme(theme) {
+      setTheme(theme)
+    }
+  }
+}
+</script>
+```
+
+### 监听主题变化
+
+```vue
+<template>
+  <div>
+    <XtText>主题变化次数：{{ changeCount }}</XtText>
+  </div>
+</template>
+
+<script>
+import { onConfigChange } from 'xt-element-ui'
+
+export default {
+  data() {
+    return {
+      changeCount: 0,
+      unsubscribe: null
+    }
+  },
+  mounted() {
+    // 监听主题变化
+    this.unsubscribe = onConfigChange((key, value) => {
+      if (key === 'theme') {
+        this.changeCount++
+        console.log('主题已切换为:', value)
+      }
+    })
+  },
+  beforeDestroy() {
+    // 取消监听
+    if (this.unsubscribe) {
+      this.unsubscribe()
+    }
+  }
+}
+</script>
+```
+
+## 注意事项
+
+1. 主题切换会影响所有使用组件库样式的元素
+2. 设置后会在 `html` 标签上添加/移除 `data-theme="dark"` 属性
+3. 需要配合对应的暗色主题 CSS 样式才能生效
+4. 建议在应用初始化时设置主题，可以结合用户偏好存储（如 localStorage）