@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,132 @@
+---
+group: 表单
+category: Components
+title: Textarea
+subtitle: 文本域
+description: 满足表单信息补充、编辑等场景，内置字数统计、自动增高等能力。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-textarea` 用于多行文本输入，如表单补充、编辑等，支持字数统计、自动增高、格式化等。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-textarea`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-textarea v-model="value" placeholder="请输入内容"></uv-textarea>
+</template>
+<script>
+export default {
+  data() {
+    return { value: '' }
+  }
+}
+</script>
+```
+
+### 字数统计 {#count}
+
+```vue
+<uv-textarea v-model="value" count placeholder="请输入内容"></uv-textarea>
+```
+
+### 自动增高 {#auto-height}
+
+```vue
+<uv-textarea
+  v-model="value"
+  :maxlength="-1"
+  autoHeight
+  placeholder="请输入内容"
+></uv-textarea>
+```
+
+### 禁用状态 {#disabled}
+
+```vue
+<uv-textarea v-model="value" disabled placeholder="请输入内容"></uv-textarea>
+```
+
+### 下划线模式 {#border}
+
+```vue
+<uv-textarea v-model="value" border="bottom" placeholder="请输入内容"></uv-textarea>
+```
+
+### 格式化 {#formatter}
+
+通过 `formatter` 自定义格式化。某些平台不支持 props 传函数，可在 `onReady` 中调用 `this.$refs.textarea.setFormatter(this.formatter)`。
+
+```vue
+<template>
+  <uv-textarea v-model="value" :formatter="formatter" placeholder="请输入内容"></uv-textarea>
+</template>
+<script>
+export default {
+  data() {
+    return { value: '' }
+  },
+  methods: {
+    formatter(value) {
+      return value.replace(/[^0-9]/ig, '')
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Textarea Props {#props}
+
+部分参数参考 [uniapp textarea 文档](https://uniapp.dcloud.net.cn/component/textarea.html)。
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value / v-model | 内容 | String | - | - |
+| placeholder | 占位符 | String | - | - |
+| height | 高度 | String \| Number | 70 | - |
+| confirmType | 键盘右下角按钮文字 | String | done | - |
+| confirmHold | 点击完成是否保持键盘 | Boolean | false | true \| false |
+| disabled | 是否禁用 | Boolean | false | true \| false |
+| count | 是否显示字数统计 | Boolean | false | true \| false |
+| focus | 是否自动聚焦 | Boolean | false | true \| false |
+| autoHeight | 是否自动增高 | Boolean | false | true \| false |
+| maxlength | 最大长度，-1 不限制 | String \| Number | 140 | - |
+| border | 边框类型 | String | surround | surround \| bottom \| none |
+| formatter | 格式化函数（微信可用 setFormatter） | Function | null | - |
+| textStyle | 文本样式 | Object | - | - |
+| countStyle | 字数统计样式 | Object | - | - |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### Textarea Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| setFormatter | 兼容微信小程序，设置 formatter |
+
+### Textarea Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @focus | 聚焦 | event.detail = { value, height } |
+| @blur | 失去焦点 | event.detail = { value, cursor } |
+| @linechange | 行数变化 | event.detail = { height, heightRpx, lineCount } |
+| @input | 输入 | e.detail.value |
+| @confirm | 点击完成 | e |
+| @keyboardheightchange | 键盘高度变化 | e |

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

@@ -0,0 +1,110 @@
+---
+group: 基础
+category: Components
+title: Toast
+subtitle: 消息提示
+description: 用于消息通知、加载提示、操作结果提示等醒目反馈，支持 ref API 调用与丰富参数配置。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-toast` 主要用于消息通知、加载提示、操作结果提示等醒目提示效果，提供丰富 API，使用方式类似 `uni.showToast`。
+
+注意：所有有关 `ref` 的调用不要在页面 `onLoad` 生命周期执行（组件未创建完会报错），应在 `onReady` 生命周期调用。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-toast`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `ref` 调用组件内部 `show` 方法显示，并传入参数（见下方 Toast Params）。
+
+```vue
+<template>
+  <view>
+    <uv-toast ref="toast"></uv-toast>
+    <view class="list">
+      <view class="item" v-for="(item, index) in list" :key="index" @click="showToast(item)">{{ item.title }}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { type: 'default', title: '默认主题', message: '锦瑟无端五十弦' },
+        { type: 'error', icon: false, title: '失败主题', message: '一弦一柱思华年' },
+        { type: 'success', title: '成功主题(带图标)', message: '庄生晓梦迷蝴蝶' },
+        { type: 'loading', title: '正在加载', message: '正在加载' },
+        { type: 'default', title: '结束后跳转标签页', message: '此情可待成追忆', url: '/pages/componentsD/tag/tag' }
+      ]
+    }
+  },
+  methods: {
+    showToast(params) {
+      this.$refs.toast.show({
+        ...params,
+        complete() {
+          params.url &&
+            uni.navigateTo({
+              url: params.url
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  margin: 10rpx 0;
+  padding: 10rpx;
+  text-align: center;
+  background: #f1f1f1;
+  font-size: 28rpx;
+  color: #666;
+}
+</style>
+```
+
+## API {#api}
+
+### Toast Params {#params}
+
+通过 `ref` 调用 `<uv-toast />` 的 `show` 方法时传入：
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| loading | 是否加载中 | Boolean | false | true \| false |
+| z-index | toast 展示层级 | String \| Number | 10090 | - |
+| overlay | 是否显示透明遮罩防止穿透 | Boolean | true | true \| false |
+| message | 显示文本 | String \| Number | - | - |
+| icon | 图标或绝对路径图片 | String | - | - |
+| position | 出现位置 | String | center | top \| bottom |
+| type | 主题类型 | String | - | - |
+| params | 跳转参数 | Object | - | - |
+| duration | 展示时长（ms） | String \| Number | 2000 | - |
+| complete | 结束回调函数 | Function | null | - |
+
+### Toast Methods {#methods}
+
+方法通过 `ref` 调用。
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| show | 显示 toast（如需进入页面即显示，请在 onReady 调用） | Toast Params |
+| hide | 隐藏 toast | - |

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

@@ -0,0 +1,91 @@
+---
+group: 基础
+category: Components
+title: Tooltip
+subtitle: 长按提示
+description: 类似微信长按气泡的提示组件，支持方向、扩展按钮、遮罩与复制能力。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-tooltip` 主要用于长按操作提示，类似微信的长按气泡。
+
+说明：由于安卓 nvue 下 `overflow` 不支持 `visible`，组件暂不支持安卓 nvue 环境。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | × | √ | √ | √ | √ |
+
+**组件名：** `uv-tooltip`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `text` 控制文本。
+
+```vue
+<template>
+  <uv-tooltip text="复制" overlay></uv-tooltip>
+</template>
+```
+
+### 下方显示 {#direction}
+
+通过 `direction` 控制方向。
+
+```vue
+<template>
+  <uv-tooltip text="下方显示" direction="bottom"></uv-tooltip>
+</template>
+```
+
+### 扩展按钮 {#buttons}
+
+通过 `buttons` 扩展按钮组。
+
+```vue
+<template>
+  <uv-tooltip text="扩展显示" :buttons="['扩展']"></uv-tooltip>
+</template>
+```
+
+### 高亮选中文本背景色 {#bgcolor}
+
+通过 `bgColor` 设置背景色。
+
+```vue
+<template>
+  <uv-tooltip text="高亮选中文本背景色" :buttons="['扩展']" bgColor="#e3e4e6"></uv-tooltip>
+</template>
+```
+
+## API {#api}
+
+### Tooltip Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| text | 提示文字 | String \| Number | - | - |
+| copyText | 点击复制按钮时复制的文本（为空则使用 text） | String \| Number | - | - |
+| size | 文本大小 | String \| Number | 14 | - |
+| color | 字体颜色 | String | #606266 | - |
+| bgColor | 提示框背景色 | String | transparent | - |
+| direction | 弹出方向 | String | top | top \| bottom |
+| zIndex | 弹出层级（nvue 无效） | String \| Number | 10071 | - |
+| showCopy | 是否显示复制按钮 | Boolean | true | true \| false |
+| buttons | 扩展按钮组 | Array | - | - |
+| overlay | 是否显示透明遮罩防止穿透 | Boolean | true | true \| false |
+| showToast | 是否显示复制成功/失败 toast | Boolean | true | true \| false |
+
+### Tooltip Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击触发 | index：被点击按钮索引 |

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

@@ -0,0 +1,202 @@
+---
+group: 基础
+category: Components
+title: Transition
+subtitle: 动画
+description: 用于元素的动画过渡效果，丰富的内置动画，支持自定义动画。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-transition` 用于元素的动画过渡效果，内置多种过渡动画，并支持通过 `step()` 和 `run()` 自定义动画。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-transition`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `show` 属性设置动画的打开和关闭。
+
+```vue
+<template>
+  <button type="default" @click="open">fade</button>
+  <uv-transition
+    :show="show"
+    :custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}"
+    @change="change"
+  ></uv-transition>
+</template>
+<script>
+export default {
+  data() {
+    return { show: false }
+  },
+  methods: {
+    open() {
+      this.show = !this.show
+    },
+    change(e) {
+      console.log('动画触发：', e)
+    }
+  }
+}
+</script>
+```
+
+### 动画模式 {#mode}
+
+通过 `mode` 属性设置动画模式，默认 `fade`。如 `mode="zoom-in"` 可实现由小到大过渡，更多模式见下方 Mode Options。
+
+```vue
+<template>
+  <button type="default" @click="open">zoom-in</button>
+  <uv-transition
+    :show="show"
+    mode="zoom-in"
+    :custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}"
+    @change="change"
+  ></uv-transition>
+</template>
+<script>
+export default {
+  data() {
+    return { show: false }
+  },
+  methods: {
+    open() {
+      this.show = !this.show
+    },
+    change(e) {
+      console.log('动画触发：', e)
+    }
+  }
+}
+</script>
+```
+
+### 自定义动画 {#custom}
+
+当内置动画不满足需求时，可使用 `step()` 和 `run()` 自定义动画。`init()` 可覆盖默认配置。
+
+```vue
+<template>
+  <view>
+    <button type="primary" @click="run">执行动画</button>
+    <uv-transition
+      ref="ani"
+      :custom-style="{'width':'100px','height':'100px','backgroundColor':'#3c9cff'}"
+      :show="show"
+    />
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return { show: true }
+  },
+  onReady() {
+    this.$refs.ani.init({
+      duration: 1000,
+      timingFunction: 'linear',
+      transformOrigin: '50% 50%',
+      delay: 500
+    })
+  },
+  methods: {
+    run() {
+      this.$refs.ani.step({
+        translateX: '100px',
+        rotate: '360'
+      })
+      this.$refs.ani.step(
+        { translateX: '0px', rotate: '0' },
+        { timingFunction: 'ease-in', duration: 200 }
+      )
+      this.$refs.ani.run(() => {
+        console.log('动画支持完毕')
+      })
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Transition Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| show | 控制组件显示或关闭 | Boolean | false | true \| false |
+| mode | 内置过渡动画类型 | String | fade | 见 Mode Options |
+| duration | 动画执行时间，单位 ms | String \| Number | 300 | - |
+| timingFunction | 动画过渡函数 | String | ease-out | - |
+| customClass | 自定义类名 | String | - | - |
+| cellChild | 是否属于 cell 节点下（nvue 下避免回收不显示） | Boolean | false | true \| false |
+| customStyle | 自定义样式 | Object | - | - |
+
+### Mode Options {#mode-options}
+
+格式：`'fade'` 或 `['fade','slide-top']`。注意：组合时同种相反类型如 slide-top、slide-bottom 同时使用，仅最后一个生效。
+
+| 属性值 | 说明 |
+| --- | --- |
+| fade | 渐隐渐出过渡 |
+| slide-top | 由上至下过渡 |
+| slide-bottom | 由下至上过渡 |
+| slide-left | 由左至右过渡 |
+| slide-right | 由右至左过渡 |
+| zoom-in | 由小到大过渡 |
+| zoom-out | 由大到小过渡 |
+
+### Transition Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击组件触发 | - |
+| @change | 过渡动画结束时触发 | e = {detail: true \| false} |
+
+### Transition Methods {#methods}
+
+通过 ref 调用。
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| init() | 手动初始化配置 | init(OBJECT:config) |
+| step() | 动画队列 | step(OBJECT:type, OBJECT:config) |
+| run() | 执行动画 | run(FUNCTION:callback) |
+
+### 动画配置 {#config}
+
+`init()` 与 `step()` 第二个参数相同，`step()` 的第二个参数会覆盖 `init()` 的配置。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| duration | Number | 400 | 动画持续时间，单位 ms |
+| timingFunction | String | linear | 见下方说明 |
+| delay | Number | 0 | 动画延迟时间，单位 ms |
+| needLayout | Boolean | false | 动画是否影响布局（仅 nvue） |
+| transformOrigin | String | center center | transform-origin |
+
+### timingFunction 可选值 {#timing-function}
+
+| 属性名 | 说明 |
+| --- | --- |
+| linear | 匀速 |
+| ease | 低速开始、中间加速、结束变慢 |
+| ease-in | 低速开始 |
+| ease-in-out | 低速开始和结束 |
+| ease-out | 低速结束 |
+| step-start | 第一帧跳至结束（nvue 不支持） |
+| step-end | 最后一帧跳到结束（nvue 不支持） |

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

@@ -0,0 +1,156 @@
+---
+group: 表单
+category: Components
+title: Upload
+subtitle: 上传
+description: 用于上传图片、视频等，可配合 uv-form 进行校验。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-upload` 通过 `fileList` 显示已上传文件，`afterRead` 处理选择后的上传逻辑，`delete` 处理删除。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-upload`
+
+## 代码演示 {#examples}
+
+### 基础用法 {#basic}
+
+```vue
+<template>
+  <uv-upload
+    :fileList="fileList1"
+    name="1"
+    multiple
+    :maxCount="10"
+    @afterRead="afterRead"
+    @delete="deletePic"
+  ></uv-upload>
+</template>
+<script>
+export default {
+  data() {
+    return { fileList1: [] }
+  },
+  methods: {
+    deletePic(event) {
+      this[`fileList${event.name}`].splice(event.index, 1)
+    },
+    async afterRead(event) {
+      const lists = [].concat(event.file)
+      let fileListLen = this[`fileList${event.name}`].length
+      lists.forEach(item => {
+        this[`fileList${event.name}`].push({
+          ...item,
+          status: 'uploading',
+          message: '上传中'
+        })
+      })
+      for (let i = 0; i < lists.length; i++) {
+        const result = await this.uploadFilePromise(lists[i].url)
+        let item = this[`fileList${event.name}`][fileListLen]
+        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+          status: 'success',
+          message: '',
+          url: result
+        }))
+        fileListLen++
+      }
+    },
+    uploadFilePromise(url) {
+      return new Promise((resolve) => {
+        uni.uploadFile({
+          url: 'your-upload-api',
+          filePath: url,
+          name: 'file',
+          success: (res) => {
+            setTimeout(() => resolve(res.data.data), 1000)
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+```
+
+### 上传视频 {#video}
+
+```vue
+<uv-upload :fileList="[]" name="2" multiple :maxCount="10" accept="video"></uv-upload>
+```
+
+### 文件预览 {#preview}
+
+```vue
+<uv-upload :fileList="fileList" name="3" multiple :maxCount="10" :previewFullImage="true"></uv-upload>
+```
+
+### 限制数量 {#max-count}
+
+达到 `maxCount` 时隐藏上传按钮。
+
+```vue
+<uv-upload :fileList="fileList" :maxCount="1" multiple></uv-upload>
+```
+
+### 自定义上传样式 {#custom}
+
+```vue
+<uv-upload :fileList="[]" name="6" :maxCount="1" width="250" height="150">
+  <image src="..." mode="widthFix" style="width: 250px;height: 150px;"></image>
+</uv-upload>
+```
+
+## API {#api}
+
+### Upload Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| fileList | 已上传列表 | Array | - |
+| accept | 接受类型 | String | image |
+| capture | 拾取模式 | String \| Array | ['album','camera'] |
+| maxCount | 最大数量 | String \| Number | 52 |
+| multiple | 多选 | Boolean | false |
+| deletable | 删除按钮 | Boolean | true |
+| maxSize | 单文件最大大小 B | String \| Number | - |
+| width | 宽度 rpx | String \| Number | 80 |
+| height | 高度 rpx | String \| Number | 80 |
+| previewFullImage | 图片预览 | Boolean | true |
+| previewFullVideo | 视频预览 | Boolean | true |
+| useBeforeRead | 是否用 beforeRead | Boolean | false |
+
+### FileList Options {#filelist}
+
+| 属性名 | 说明 |
+| --- | --- |
+| status | uploading \| success \| failed |
+| message | 提示文本 |
+| url | 图片/文件地址 |
+
+### Upload Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @beforeRead | 读取前（需 useBeforeRead） | file, lists, name |
+| @afterRead | 读取后 | file, lists, name |
+| @oversize | 超出最大尺寸 | file, lists, name |
+| @clickPreview | 预览时 | e |
+| @delete | 删除 | e={ file, index, name } |
+
+### Upload Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义上传样式 |