@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,163 @@
+---
+group: 布局
+category: Components
+title: Cell
+subtitle: 单元格
+description: 一组列表形式的基础单元格，常用于个人中心、设置页等，支持左右内容、图标、箭头与跳转。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-cell` 一般用于一组列表的场景，例如个人中心页、设置页等。  
+需搭配 `uv-cell-group` 使用，由 `cell-group` 控制列表组的上下边框（可通过 `border` 关闭）。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-cell-group`、`uv-cell`
+
+## 代码演示 {#examples}
+
+### 基础功能 {#basic}
+
+- `title` 设置左侧标题
+- `value` 设置右侧内容
+- `icon` 设置左侧图标或图片链接（本地文件建议绝对地址）
+
+```vue
+<template>
+  <uv-cell-group>
+    <uv-cell icon="setting-fill" title="个人设置"></uv-cell>
+    <uv-cell icon="integral-fill" title="版本更新" value="已是新版本"></uv-cell>
+  </uv-cell-group>
+</template>
+```
+
+### 通过 slot 自定义内容 {#slots}
+
+```vue
+<template>
+  <uv-cell-group>
+    <uv-cell>
+      <!-- 自定义左侧标题 -->
+      <template v-slot:title>
+        <text>检查版本</text>
+      </template>
+      <!-- 自定义标题下面的内容 -->
+      <template v-slot:label>
+        <text style="font-size: 28rpx;color: #999;">点击我检查新版本</text>
+      </template>
+      <!-- 自定义右侧值 -->
+      <template v-slot:value>
+        <text>已是最新版</text>
+      </template>
+      <!-- 自定义左侧图标 -->
+      <template v-slot:icon>
+        <uv-icon size="50rpx" name="search"></uv-icon>
+      </template>
+      <!-- 自定义右侧图标 -->
+      <template v-slot:right-icon>
+        <uv-icon size="30rpx" name="arrow-right"></uv-icon>
+      </template>
+    </uv-cell>
+  </uv-cell-group>
+</template>
+```
+
+### 展示右箭头 {#arrow}
+
+设置 `isLink` 为 true 显示右侧箭头，可通过 `arrow-direction` 控制方向。
+
+```vue
+<template>
+  <uv-cell-group>
+    <uv-cell icon="share" title="明月几时有" :isLink="true" arrow-direction="down"></uv-cell>
+    <uv-cell icon="map" title="把酒问青天" :isLink="false"></uv-cell>
+  </uv-cell-group>
+</template>
+```
+
+### 跳转页面 {#navigate}
+
+设置 `isLink` 为 true 时点击可跳转页面，通过 `url` 设置地址。
+
+```vue
+<template>
+  <uv-cell-group>
+    <uv-cell title="打开标签页" isLink url="/pages/componentsD/tag/tag"></uv-cell>
+    <uv-cell title="打开徽标页" isLink url="/pages/componentsD/badge/badge"></uv-cell>
+  </uv-cell-group>
+</template>
+```
+
+### 右侧内容垂直居中 {#center}
+
+通过 `center` 控制右侧 `value` 内容垂直居中（默认 true）。
+
+```vue
+<template>
+  <uv-cell-group>
+    <uv-cell title="单元格" value="内容" label="描述信息" :center="true"></uv-cell>
+  </uv-cell-group>
+</template>
+```
+
+## API {#api}
+
+### CellGroup Props {#group-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 分组标题 | String | - | - |
+| border | 是否显示分组标题下边框 | Boolean | true | true \| false |
+| customStyle | 分组自定义外部样式 | Object | - | - |
+
+### Cell Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 左侧标题 | String \| Number | - | - |
+| label | 标题下方描述信息 | String \| Number | - | - |
+| value | 右侧内容 | String \| Number | - | - |
+| icon | 左侧图标或图片链接 | String | - | - |
+| disabled | 是否禁用 | Boolean | false | true \| false |
+| border | 是否显示下边框 | Boolean | true | true \| false |
+| center | 右侧内容是否垂直居中 | Boolean | false | true \| false |
+| url | 点击后跳转的 URL 地址 | String | - | - |
+| linkType | 跳转方式（内部使用 uv-ui `route` 方法） | String | navigateTo | - |
+| clickable | 是否开启点击反馈（灰色背景） | Boolean | false | true \| false |
+| isLink | 是否显示右侧箭头并开启点击反馈 | Boolean | false | true \| false |
+| required | 是否显示必填星号（表单场景） | Boolean | false | true \| false |
+| rightIcon | 右侧图标名称 | String | arrow-right | - |
+| arrowDirection | 箭头方向 | String | right | left \| up \| down |
+| iconStyle | 左侧图标样式 | Object \| String | - | - |
+| rightIconStyle | 右侧图标样式 | Object \| String | - | - |
+| titleStyle | 标题样式 | Object \| String | - | - |
+| size | 单元格大小 | String | - | large \| normal |
+| stop | 是否阻止事件冒泡 | Boolean | true | true \| false |
+| name | 标识符（click 返回） | String \| Number | - | - |
+| cellStyle | 自定义单元格样式（如 padding、背景等） | Object \| String | - | - |
+| customStyle | 自定义外部样式（如外层边框等） | Object \| String | - | - |
+
+### Cell Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| title | 自定义左侧标题（使用时不要再传 `title` 参数） |
+| value | 自定义右侧内容（使用时不要再传 `value` 参数） |
+| icon | 自定义左侧图标 |
+| right-icon | 自定义右侧图标内容（需 `arrow` 为 false 才生效） |
+| label | 自定义标题下方描述内容 |
+
+### Cell Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击 cell 时触发 | name：props 中的 `name` 标识符 |

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

@@ -0,0 +1,164 @@
+---
+group: 表单
+category: Components
+title: Checkbox
+subtitle: 复选框
+description: 用于需要多选的场景，需搭配 checkbox-group 使用。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-checkbox` 需配合 `uv-checkbox-group` 使用。通过 `v-model` 绑定选中项的 `name` 数组。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-checkbox-group` > `uv-checkbox`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-checkbox-group v-model="checkboxValue">
+    <uv-checkbox
+      v-for="(item, index) in checkboxList"
+      :key="index"
+      :label="item.name"
+      :name="item.name"
+      :custom-style="{ marginBottom: '8px' }"
+    ></uv-checkbox>
+  </uv-checkbox-group>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      checkboxValue: ['苹果'],
+      checkboxList: [
+        { name: '苹果', disabled: false },
+        { name: '香蕉', disabled: false },
+        { name: '橙子', disabled: false }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义形状 {#shape}
+
+```vue
+<uv-checkbox-group v-model="checkboxValue" shape="circle">
+  <uv-checkbox name="apple" label="苹果"></uv-checkbox>
+  <uv-checkbox name="banana" label="香蕉"></uv-checkbox>
+</uv-checkbox-group>
+```
+
+### 禁用 {#disabled}
+
+```vue
+<uv-checkbox-group v-model="checkboxValue" shape="circle">
+  <uv-checkbox
+    v-for="(item, index) in checkboxList"
+    :key="index"
+    :label="item.name"
+    :name="item.name"
+    :disabled="index === 0"
+  ></uv-checkbox>
+</uv-checkbox-group>
+```
+
+### 自定义颜色 {#active-color}
+
+```vue
+<uv-checkbox-group v-model="checkboxValue">
+  <uv-checkbox activeColor="red" name="apple" label="苹果"></uv-checkbox>
+</uv-checkbox-group>
+```
+
+### 纵向排列 {#placement}
+
+```vue
+<uv-checkbox-group v-model="checkboxValue" placement="column">
+  <uv-checkbox name="apple" label="苹果"></uv-checkbox>
+  <uv-checkbox name="banana" label="香蕉"></uv-checkbox>
+</uv-checkbox-group>
+```
+
+### 图标右对齐 {#icon-placement}
+
+```vue
+<uv-checkbox-group
+  v-model="checkboxValue"
+  iconPlacement="right"
+  placement="column"
+>
+  <uv-checkbox name="apple" label="苹果"></uv-checkbox>
+  <uv-checkbox name="banana" label="香蕉"></uv-checkbox>
+</uv-checkbox-group>
+```
+
+## API {#api}
+
+### CheckboxGroup Props {#group-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value / v-model | 选中的 name 数组 | Array | [] | - |
+| shape | 形状 | String | square | square \| circle |
+| disabled | 是否禁用全部 | Boolean | false | true \| false |
+| activeColor | 选中颜色 | String | #2979ff | - |
+| inactiveColor | 未选颜色 | String | #c8c9cc | - |
+| size | 尺寸 | String | 18 | - |
+| placement | 布局 | String | row | row \| column |
+| labelSize | label 字体大小 | String \| Number | 14 | - |
+| labelColor | label 颜色 | String | #303133 | - |
+| labelDisabled | 是否禁止点击文本 | Boolean | false | true \| false |
+| iconPlacement | 图标对齐 | String | left | left \| right |
+| borderBottom | 纵向时是否显示下划线 | Boolean | false | true \| false |
+| customStyle | 自定义样式 | Object | - | - |
+
+### Checkbox Props {#props}
+
+checkbox 同名参数优先级高于 checkbox-group。
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| name | 名称 | String \| Number \| Boolean | - | - |
+| shape | 形状 | String | square | square \| circle |
+| size | 尺寸 | String \| Number | - | - |
+| checked | 是否默认选中 | Boolean | false | true \| false |
+| disabled | 是否禁用 | String \| Boolean | - | - |
+| activeColor | 选中颜色 | String | - | - |
+| inactiveColor | 未选颜色 | String | - | - |
+| label | 提示文字 | String \| Number | - | - |
+| labelDisabled | 是否禁止点击文字选中 | String \| Boolean | - | - |
+| customStyle | 自定义样式 | Object \| String | - | - |
+
+### Checkbox Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义 label，自定义后 labelDisabled 失效 |
+| icon | 自定义选中图标 |
+
+### CheckboxGroup Events {#group-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 任意 checkbox 变化时 | detail = array（选中的 name） |
+
+### Checkbox Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 该 checkbox 变化时 | name |

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

@@ -0,0 +1,122 @@
+---
+group: 表单
+category: Components
+title: Code
+subtitle: 验证码倒计时
+description: 不提供界面，只提供倒计时文本，由用户嵌入到按钮或文字中。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-code` 用于获取验证码等场景，通过 ref 调用 `start()` 开始倒计时，通过 `change` 事件获取提示文字。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-code`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+- `seconds` 设置倒计秒数（默认 60）
+- `canGetCode` 用于判断是否可再次请求，倒计时中为 false
+- `change` 每秒触发，返回提示文字
+
+```vue
+<template>
+  <view class="wrap">
+    <uv-code :seconds="seconds" @end="end" @start="start" ref="code" @change="codeChange"></uv-code>
+    <uv-button @tap="getCode">{{ tips }}</uv-button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return { tips: '', seconds: 10 }
+  },
+  methods: {
+    codeChange(text) {
+      this.tips = text
+    },
+    getCode() {
+      if (this.$refs.code.canGetCode) {
+        uni.showLoading({ title: '正在获取验证码' })
+        setTimeout(() => {
+          uni.hideLoading()
+          uni.$uv.toast('验证码已发送')
+          this.$refs.code.start()
+        }, 2000)
+      } else {
+        uni.$uv.toast('倒计时结束后再发送')
+      }
+    },
+    end() {
+      uni.$uv.toast('倒计时结束')
+    },
+    start() {
+      uni.$uv.toast('倒计时开始')
+    }
+  }
+}
+</script>
+```
+
+### 自定义提示语 {#custom-text}
+
+- `startText`：获取前，默认「获取验证码」
+- `changeText`：倒计时期间，默认「X秒重新获取」，x 为秒数
+- `endText`：结束后，默认「重新获取」
+
+```vue
+<uv-code
+  startText="获取验证码"
+  changeText="X秒后重试"
+  endText="重新获取"
+></uv-code>
+```
+
+### 保持倒计时 {#keep-running}
+
+`keepRunning` 为 true 时，刷新或返回再进入仍继续倒计。多组件时用 `uniqueKey` 区分。
+
+```vue
+<uv-code unique-key="page-a"></uv-code>
+```
+
+## API {#api}
+
+### Code Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| seconds | 倒计秒数 | Number \| String | 60 |
+| startText | 开始前提示 | String | 获取验证码 |
+| changeText | 倒计中提示，须含 x | String | X秒重新获取 |
+| endText | 结束提示 | String | 重新获取 |
+| keepRunning | 刷新/返回后是否继续 | Boolean | false |
+| uniqueKey | 多组件区分 key | String | - |
+
+### Code Methods {#methods}
+
+通过 ref 调用。
+
+| 方法名 | 说明 |
+| --- | --- |
+| start | 开始倒计时 |
+| reset | 结束倒计时，恢复可再次获取 |
+
+### Code Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 每秒触发 | text |
+| @start | 开始倒计时 | - |
+| @end | 结束倒计时 | - |

package/template/docs/uv-ui-docs/code-input-cn.md

@@ -0,0 +1,127 @@
+---
+group: 表单
+category: Components
+title: CodeInput
+subtitle: 验证码输入
+description: 支持方框/横线两种样式、可配置长度与间距，并可与自定义键盘配合使用的验证码输入组件。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-code-input` 常用于 **短信验证码输入**、支付密码输入等场景，也可以与 `uv-keyboard` 等自定义键盘组件配合使用。
+
+- 多位数字输入（如 4 位/6 位验证码）
+- 支持方框模式与横线模式
+- 可选择是否使用「●」隐藏真实内容
+- 可控制是否自动获取焦点、是否允许系统键盘
+
+> 使用自定义键盘时必须将 `disabledKeyboard` 设置为 `true`，以防与系统键盘冲突。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-code-input`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `v-model` 绑定值，`change` 和 `finish` 事件分别在内容变化与输入结束时触发。
+
+```vue
+<template>
+  <view>
+    <uv-code-input v-model="value" @change="change" @finish="finish"></uv-code-input>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: ''
+    }
+  },
+  methods: {
+    change(e) {
+      console.log('内容改变，当前值为：' + e)
+    },
+    finish(e) {
+      console.log('输入结束，当前值为：' + e)
+    }
+  }
+}
+</script>
+```
+
+### 横线模式 {#line-mode}
+
+```vue
+<uv-code-input mode="line" :hairline="true"></uv-code-input>
+```
+
+### 设置长度与间距 {#length-space}
+
+```vue
+<!-- 设置为 6 位验证码 -->
+<uv-code-input :maxlength="6"></uv-code-input>
+
+<!-- 调整字符间距 -->
+<uv-code-input :space="2"></uv-code-input>
+```
+
+### 调整颜色与隐藏内容 {#color-dot}
+
+```vue
+<!-- 调整文本和边框颜色 -->
+<uv-code-input hairline color="#f56c6c" borderColor="#f56c6c"></uv-code-input>
+
+<!-- 用 "●" 替代表面显示内容（事件中仍返回真实值） -->
+<uv-code-input mode="box" dot></uv-code-input>
+```
+
+### 自动获取焦点与自定义键盘 {#focus-keyboard}
+
+```vue
+<!-- 打开页面自动弹出键盘 -->
+<uv-code-input :focus="true"></uv-code-input>
+
+<!-- 与 uv-keyboard 配合时，必须禁止系统键盘 -->
+<uv-code-input mode="box" :disabledKeyboard="true"></uv-code-input>
+```
+
+## API {#api}
+
+### CodeInput Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value / v-model | 预置值 | String \| Number | - | - |
+| adjustPosition | 键盘弹起时是否自动上推页面 | Boolean | true | true \| false |
+| maxlength | 输入字符个数 | String \| Number | 6 | - |
+| dot | 是否用圆点填充（隐藏真实内容） | Boolean | false | true \| false |
+| mode | 展示模式 | String | box | box \| line |
+| hairline | 是否细边框 | Boolean | false | true \| false |
+| space | 字符间距 | String \| Number | 10 | - |
+| focus | 是否自动获取焦点 | Boolean | false | true \| false |
+| bold | 字体和输入横线是否加粗 | Boolean | false | true \| false |
+| color | 字体颜色 | String | #606266 | - |
+| fontSize | 字体大小（rpx） | String \| Number | 18 | - |
+| size | 输入框尺寸（宽高相等） | String \| Number | 35 | - |
+| disabledKeyboard | 是否禁止系统键盘（自定义键盘时必须为 true） | Boolean | false | true \| false |
+| borderColor | 边框和线条颜色 | String | #c9cacc | - |
+| disabledDot | 是否禁止输入 "." 符号 | Boolean | true | true \| false |
+
+### CodeInput Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 输入内容发生改变时触发 | `value`：当前输入值 |
+| @finish | 输入字符个数达到 `maxlength` 时触发 | `value`：当前输入值 |
+