@fredwsw/frontend-rules 1.0.0

package/template/docs/uv-ui-docs/pick-color-cn.md

@@ -0,0 +1,147 @@
+---
+group: 表单
+category: Components
+title: PickColor
+subtitle: 颜色选择
+description: 颜色选择器，支持预制颜色与初始化颜色。
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+颜色选择器用于用户选择颜色，可配置预制颜色和初始颜色。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | × | √ | √ | √ | √ |
+
+**组件名：** `uv-pick-color`
+
+**提示：** nvue 不支持复杂背景色设置，该组件在 nvue 中暂不可用。
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 ref 调用 `open()` 打开，`@confirm` 返回所选颜色。
+
+```vue
+<template>
+  <view>
+    <uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
+    <button @click="openColor">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  methods: {
+    openColor() {
+      this.$refs.pickerColor.open()
+    },
+    confirm(e) {
+      console.log('confirm', e)
+    }
+  }
+}
+</script>
+```
+
+### 设置初始颜色 {#color}
+
+通过 `color` 设置初始颜色，格式为 `{ r, g, b, a }`。
+
+```vue
+<template>
+  <view>
+    <uv-pick-color ref="pickerColor" :color="color" @confirm="confirm"></uv-pick-color>
+    <button @click="openColor">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      color: { r: 60, g: 156, b: 255, a: 1 }
+    }
+  },
+  methods: {
+    openColor() {
+      this.$refs.pickerColor.open()
+    },
+    confirm(e) {
+      console.log('confirm', e)
+    }
+  }
+}
+</script>
+```
+
+### 设置底部预制颜色 {#prefab}
+
+通过 `prefabColor` 设置底部预制颜色，格式为 `[{ r, g, b, a }, ...]`。
+
+```vue
+<template>
+  <view>
+    <uv-pick-color ref="pickerColor" :prefab-color="prefabColor" @confirm="confirm"></uv-pick-color>
+    <button @click="openColor">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      prefabColor: [
+        { r: 60, g: 156, b: 255, a: 1 },
+        { r: 245, g: 108, b: 108, a: 1 }
+      ]
+    }
+  },
+  methods: {
+    openColor() {
+      this.$refs.pickerColor.open()
+    },
+    confirm(e) {
+      console.log('confirm', e)
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### PickColor Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| color | Object | { r: 0, g: 0, b: 0, a: 0 } | 初始颜色，格式 `{ r, g, b, a }` |
+| prefabColor | Array | [] | 底部预制颜色，元素格式 `{ r, g, b, a }` |
+| closeOnClickOverlay | Boolean | false | 点击遮罩是否关闭 |
+| title | Boolean \| String | - | 顶部标题 |
+| cancelText | String | 取消 | 取消按钮文字 |
+| confirmText | String | 确定 | 确认按钮文字 |
+| cancelColor | String | #909193 | 取消按钮颜色 |
+| confirmColor | String | #3c9cff | 确认按钮颜色 |
+
+### PickColor Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 打开颜色选择器 |
+| close | 关闭颜色选择器 |
+
+### PickColor Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @confirm | 点击确定 | `{ hex, rgba }`，如 `{ hex: "#000000", rgba: { r, g, b, a } }` |
+| @cancel | 点击取消 | - |
+| @close | 组件关闭时 | - |

package/template/docs/uv-ui-docs/picker-cn.md

@@ -0,0 +1,159 @@
+---
+group: 表单
+category: Components
+title: Picker
+subtitle: 选择器
+description: 用于单列、多列、多列联动的选择场景。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-picker` 通过 ref 调用 `open()` 打开，通过 `columns` 配置选择项。columns 格式为 `[['中国', '美国', '日本']]`，数组中嵌套数组。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-picker`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <view>
+    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
+    <button @click="openPicker">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      columns: [['中国', '美国', '日本']]
+    }
+  },
+  methods: {
+    openPicker() {
+      this.$refs.picker.open()
+    },
+    confirm(e) {
+      console.log('confirm', e)
+    }
+  }
+}
+</script>
+```
+
+### 多列联动 {#multi-column}
+
+通过 `change` 事件和 `setColumnValues` 完成联动。
+
+```vue
+<template>
+  <view>
+    <uv-picker
+      ref="picker"
+      :columns="columns"
+      @confirm="confirm"
+      @change="change"
+    ></uv-picker>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        ['中国', '美国'],
+        ['深圳', '厦门', '上海', '拉萨']
+      ],
+      columnData: [
+        ['深圳', '厦门', '上海', '拉萨'],
+        ['得州', '华盛顿', '纽约', '阿拉斯加']
+      ]
+    }
+  },
+  methods: {
+    change(e) {
+      const { columnIndex, index } = e
+      if (columnIndex === 0) {
+        this.$refs.picker.setColumnValues(1, this.columnData[index])
+      }
+    }
+  }
+}
+</script>
+```
+
+### 加载状态 {#loading}
+
+数据获取前将 `loading` 设为 true，完成后设为 false。
+
+```vue
+<uv-picker ref="picker" :loading="loading" :columns="columns" @change="change"></uv-picker>
+```
+
+### 自定义选项 {#key-name}
+
+通过 `keyName` 指定对象中要展示的属性。
+
+```vue
+<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirm"></uv-picker>
+```
+
+### 自定义颜色 {#color}
+
+```vue
+<uv-picker ref="picker" :columns="columns" color="red" activeColor="blue" @confirm="confirm"></uv-picker>
+```
+
+### 默认值 {#default-index}
+
+通过 `defaultIndex` 数组配置，长度需与列数相同。如 `[1]` 表示单列选中第 2 个；`[1, 3]` 表示多列。也可用 `setIndexs([1], true)`。
+
+## API {#api}
+
+### Picker Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 每列数据 | Array | - |
+| keyName | 展示 text 的键名 | String | - |
+| showToolbar | 是否显示顶部操作栏 | Boolean | true |
+| title | 标题 | String | - |
+| round | 弹窗圆角 | String \| Number | 0 |
+| loading | 加载状态 | Boolean | false |
+| itemHeight | 选项高度 | String \| Number | 44 |
+| cancelText | 取消按钮文字 | String | 取消 |
+| confirmText | 确认按钮文字 | String | 确认 |
+| color | 文本颜色 | String | #606266 |
+| activeColor | 选中文本颜色 | String | #606266 |
+| defaultIndex | 各列默认索引 | Array | - |
+| closeOnClickOverlay | 点击遮罩关闭 | Boolean | true |
+| closeOnClickConfirm | 点击确认关闭 | Boolean | true |
+
+### Picker Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 弹出选择器 |
+| close | 关闭选择器 |
+| setIndexs | 设置选中值，如 `setIndexs([1], true)` |
+| setColumnValues | 多列联动时设置某列数据 |
+
+### Picker Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @confirm | 点击确定 | 选中的值 |
+| @change | 选择值变化 | 见文档 |
+| @cancel | 点击取消 | - |
+| @close | 关闭时 | - |

package/template/docs/uv-ui-docs/popup-cn.md

@@ -0,0 +1,184 @@
+---
+group: 反馈
+category: Components
+title: Popup
+subtitle: 弹出层（抽屉）
+description: 用于展示自定义弹出内容，支持上/下/左/右/中部弹出，遮罩、圆角、关闭图标等多种配置。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-popup` 用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。  
+组件仅提供弹出容器，内部内容完全由 slot 自定义，扩展性强。
+
+可搭配文档中的「禁止滚动穿透」与「弹出闪一下的优化方案」使用，避免体验问题。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-popup`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `slot` 传入弹出内容，通过 `ref` 调用 `open()` / `close()` 控制显示。
+
+```vue
+<template>
+  <view>
+    <uv-popup ref="popup" @change="change">
+      <view>
+        <text>
+          丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。 明月几时有？把酒问青天。
+          不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。
+          转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。
+          但愿人长久，千里共婵娟。
+        </text>
+      </view>
+    </uv-popup>
+    <button @click="open">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    open() {
+      this.$refs.popup.open('top')
+    },
+    change(e) {
+      console.log('弹窗状态改变：', e)
+    }
+  }
+}
+</script>
+```
+
+### 设置弹出方向 {#mode}
+
+通过 `mode` 属性或 `open(type)` 参数设置弹出方向：`top / bottom / left / right / center`（默认 center）。
+
+```vue
+<template>
+  <view>
+    <uv-popup ref="popup" mode="center" @change="change">
+      <view style="width: 600rpx;">
+        <text>...</text>
+      </view>
+    </uv-popup>
+    <button @click="open">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    open() {
+      this.$refs.popup.open()
+    },
+    change(e) {
+      console.log('弹窗状态改变：', e)
+    }
+  }
+}
+</script>
+```
+
+### 禁用点击遮罩关闭 {#close-on-click-overlay}
+
+将 `closeOnClickOverlay` 设为 false，可禁用点击遮罩关闭，仅通过 `close()` 手动关闭。
+
+```vue
+<template>
+  <view>
+    <uv-popup ref="popup" :close-on-click-overlay="false">
+      <view style="width: 600rpx;">
+        <text>...</text>
+        <button @click="close">关闭</button>
+      </view>
+    </uv-popup>
+    <button @click="open">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    open() {
+      this.$refs.popup.open()
+    },
+    close() {
+      this.$refs.popup.close()
+    }
+  }
+}
+</script>
+```
+
+### 内容较多时的闪动优化 {#optimize}
+
+当内容较多/复杂时可通过 `custom-style` 预设高度或 `min-height`，避免弹出瞬间高度变化导致闪动：
+
+```vue
+<template>
+  <view>
+    <uv-popup ref="popup" mode="bottom" custom-style="height: 200rpx;">
+      <view class="content">
+        <view>里面是很比较多或复杂的内容...</view>
+        <!-- ... -->
+      </view>
+    </uv-popup>
+    <button @click="open">打开</button>
+  </view>
+</template>
+```
+
+## API {#api}
+
+### Popup Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| mode | 弹出方向 | String | center | top \| bottom \| left \| right \| center |
+| duration | 动画时长（ms） | String \| Number | 300 | - |
+| overlay | 是否显示遮罩 | Boolean | true | true \| false |
+| overlayStyle | 遮罩样式（如 `{ background: 'rgba(3, 100, 219, 0.5)' }`） | Object \| String | - | - |
+| overlayOpacity | 遮罩透明度 0-1（勿与 overlayStyle 共用） | Number \| String | 0.5 | - |
+| closeOnClickOverlay | 点击遮罩是否关闭弹窗 | Boolean | true | true \| false |
+| zIndex | 弹出层 `z-index` | Number \| String | 10075 | - |
+| safeAreaInsetTop | 是否留出顶部安全区（状态栏高度） | Boolean | false | true \| false |
+| safeAreaInsetBottom | 是否留出底部安全区 | Boolean | true | true \| false |
+| closeable | 是否显示关闭图标 | Boolean | false | true \| false |
+| closeIconPos | 关闭图标位置 | String | top-right | top-right \| top-left \| bottom-left \| bottom-right |
+| zoom | `mode=center` 时是否开启缩放 | Boolean | true | true \| false |
+| bgColor | 背景色（设为空或 none 可去掉默认白色） | String | none | - |
+| round | 圆角值（仅 top/bottom/center 生效） | Number \| String | 0 | - |
+| customStyle | 内容区自定义外部样式 | Object | - | - |
+
+### Popup Methods {#methods}
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| open | 打开弹出层 | open(type: String)；参数可代替 `mode` 属性 |
+| close | 关闭弹出层 | - |
+
+### Popup Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 打开/关闭时触发 | e = { show: true \| false } |
+| @maskClick | 点击遮罩时触发 | - |
+
+### Popup Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 弹窗内容 |

package/template/docs/uv-ui-docs/qrcode-cn.md

@@ -0,0 +1,150 @@
+---
+group: 数据
+category: Components
+title: QRCode
+subtitle: 二维码
+description: 二维码生成组件，支持自定义样式与扩展风格。
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+二维码组件用于生成二维码，可自定义样式（颜色、圆点、方块、间距等），扩展性强。
+
+基于 [uQRCode](https://uqrcode.cn/)，uv-ui 做了部分封装。详细配置请参考 [uQRCode 官方文档](https://uqrcode.cn/doc/)。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-qrcode`
+
+## 注意事项 {#notice}
+
+- nvue 可能报错 `WX_RENDER_ERR_TEXTURE_SETBACKGROUND`，为 weex/gcanvas 已知问题，不影响使用
+- `options.size` 暂不生效，请在组件上直接设置 `size`，如 `<uv-qrcode size="300" ...>`
+- nvue 打包后二维码不显示时，请参考官方说明：[nvue 打包后生成失败](https://uqrcode.cn/doc/)
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+默认尺寸 200px，可通过 `size` 调整。
+
+```vue
+<template>
+  <view>
+    <uv-qrcode ref="qrcode" size="300px" value="https://h5.uvui.cn"></uv-qrcode>
+  </view>
+</template>
+```
+
+### 自定义样式 {#options}
+
+通过 `options` 配置 data、size、margin、颜色、logo 等，详见 uQRCode 基本配置。
+
+```vue
+<template>
+  <view>
+    <uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options2"></uv-qrcode>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      options2: {
+        data: 'https://www.uvui.cn',
+        size: 300,
+        useDynamicSize: false,
+        errorCorrectLevel: 'Q',
+        margin: 10,
+        areaColor: '#F95F6B',
+        backgroundColor: '#3c9cff',
+        foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
+      }
+    }
+  }
+}
+</script>
+```
+
+### 自定义风格 {#style}
+
+通过 `registerStyle()` 注册扩展插件，组件仅支持 `type` 为 `style` 的 drawCanvas 扩展。更多风格见 [uQRCode 官方-风格下载](https://uqrcode.cn/plugin/)。`options.style` 需与插件标识一致，如 `style: 'round'` 对应 round 插件。
+
+```vue
+<template>
+  <view>
+    <uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options3"></uv-qrcode>
+  </view>
+</template>
+<script>
+import QRCodeStyleRound from './uqrcode.plugin.round.es.js'
+export default {
+  data() {
+    return {
+      options3: {
+        style: 'round',
+        foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
+      }
+    }
+  },
+  onReady() {
+    this.$refs.qrcode.registerStyle(QRCodeStyleRound)
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### QRCode Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String | - | 二维码内容 |
+| options | Object | - | 配置项，参考 uQRCode 官方基本配置 |
+| size | String \| Number | 200 | 尺寸，单位 px 或 rpx；推荐在组件上设置，options.size 暂不生效 |
+| fileType | String | png | 导出文件类型：png \| jpg |
+| start | Boolean | true | 是否初始化后立即生成 |
+| auto | Boolean | true | 数据变化是否自动重绘 |
+| hide | Boolean | false | 是否隐藏组件 |
+| type | String | - | canvas 类型：2d（微信小程序） \| normal |
+| queue | Boolean | false | 是否队列绘制，nvue 端适用 |
+| isQueueLoadImage | Boolean | false | 是否队列加载图片，减少网络请求 |
+| loading | Boolean | true | 是否显示 loading |
+| h5SaveIsDownload | Boolean | false | H5 保存时是否自动下载 |
+| h5DownloadName | String | uvQRCode | H5 下载文件名 |
+| h5SaveTip | Boolean | true | H5 保存时是否显示提示 (1.0.3) |
+
+### QRCode Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| make | 生成二维码，支持 success/fail 回调 |
+| remake | 重新生成 |
+| toTempFilePath | 导出临时文件路径，需在 complete 返回 success=true 后调用 |
+| save | 保存到相册，需在 complete 返回 success=true 后调用 |
+| registerStyle | 注册 style 类型 drawCanvas 扩展，用于自定义风格 |
+
+### QRCode Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @complete | 生成完成 | `{ success: true \| false }` |
+| @click | 点击组件 | - |
+| @change | 重绘时 | - |
+
+### QRCode Slots {#slots}
+
+| 插槽名 | 说明 |
+| --- | --- |
+| loading | 自定义加载中内容 |