@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,255 @@
+---
+group: 基础
+category: Components
+title: Icon
+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-icon`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `<uv-icon>` 使用，设置 `name` 为图标名即可。`color` 默认 `#606266`，`size` 默认 `16px`。
+
+```vue
+<uv-icon name="photo"></uv-icon>
+```
+
+### 修改样式 {#style}
+
+- `color`：图标颜色
+- `size`：图标大小（单位 px，组件也支持 rpx）
+
+```vue
+<uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
+```
+
+### 图片图标 {#image-icon}
+
+这里的「图片图标」指小尺寸的 icon（通常为 png 正方形），用于替代字体图标，不是大图展示场景。
+
+- `name` 传入 **带 `/` 的链接** 或 **base64 图片** 时，会按图片图标渲染
+- `size` 会作为图片宽度（此时 `color` 等字体相关参数无效）
+
+```vue
+<!-- 在线地址 -->
+<uv-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></uv-icon>
+<!-- base64 地址（示意） -->
+<uv-icon size="40" name="data:image/png;base64,..."></uv-icon>
+```
+
+### 自定义图标 {#custom}
+
+自定义字体图标库时，通过 `customPrefix` 指定前缀（注意：**nvue 暂不支持**）。
+
+## API {#api}
+
+### Icon Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| name | String | - | 图标名称；若包含 `/` 或符合 base64 图片格式，则按图片图标渲染 |
+| color | String | #606266 | 图标颜色；也可传主题色名（如 `primary`） |
+| size | String \| Number | 16px | 图标大小，单位 px（或 rpx） |
+| bold | Boolean | false | 是否加粗 |
+| index | String \| Number | - | 区分多个图标的值，点击时会在事件中带出 |
+| hoverClass | String | - | 按下样式类，用法同 uni 的 `hover-class` |
+| customPrefix | String | uvicon | 自定义字体图标库前缀（nvue 暂不支持） |
+| label | String \| Number | - | 图标右侧/下方的文字 |
+| labelPos | String | right | label 位置：right \| bottom \| top \| left |
+| labelSize | String \| Number | 15px | label 字号 |
+| labelColor | String | #606266 | label 颜色 |
+| space | String \| Number | 3px | label 与图标间距，单位 px（或 rpx） |
+| imgMode | String | - | 图片裁剪/缩放模式（同 image 原生属性） |
+| width | String \| Number | - | 图片图标宽度，单位 px（或 rpx） |
+| height | String \| Number | - | 图片图标高度，单位 px（或 rpx） |
+| top | String \| Number | 0 | 图标到顶部距离，用于微调垂直居中，单位 px（或 rpx） |
+| stop | Boolean | false | 是否阻止事件传播 |
+
+### Icon Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击图标时触发 | `index`：props 传入的 index 值 |
+
+## 图标集 {#icons}
+
+以下为内置图标名（`name` 可用值）。如需更多或自定义，请使用自定义图标库扩展。
+
+```text
+level
+woman
+man
+chat
+chat-fill
+red-packet
+order
+folder
+arrow-up-fill
+arrow-down-fill
+backspace
+photo
+photo-fill
+lock
+lock-fill
+lock-open
+lock-opened-fill
+home
+home-fill
+star
+star-fill
+share
+share-fill
+share-square
+volume
+volume-fill
+volume-off
+volume-off-fill
+trash
+trash-fill
+shopping-cart
+shopping-cart-fill
+question-circle
+question-circle-fill
+plus
+plus-circle
+plus-circle-fill
+tags
+tags-fill
+pause
+pause-circle
+pause-circle-fill
+play-circle
+play-circle-fill
+map
+map-fill
+phone
+phone-fill
+list
+list-dot
+info-circle
+info-circle-fill
+minus
+minus-circle
+mic
+mic-off
+grid
+grid-fill
+eye
+eye-fill
+eye-off
+eye-off-outline
+file-text
+file-text-fill
+edit-pen
+edit-pen-fill
+email
+email-fill
+download
+checkmark
+checkmark-circle
+checkmark-circle-fill
+checkbox-mark
+clock
+clock-fill
+close
+close-circle
+close-circle-fill
+calendar
+car
+car-fill
+bell
+bell-fill
+attach
+play-right
+play-right-fill
+play-left
+play-left-fill
+error-circle
+error-circle-fill
+skip-back-left
+skip-forward-right
+search
+setting
+setting-fill
+more-dot-fill
+more-circle
+more-circle-fill
+bag
+arrow-upward
+arrow-downward
+arrow-leftward
+arrow-rightward
+arrow-up
+arrow-down
+arrow-left
+arrow-right
+thumb-up
+thumb-up-fill
+thumb-down
+thumb-down-fill
+coupon
+coupon-fill
+kefu-ermai
+server-fill
+server-man
+scan
+warning
+warning-fill
+apple-fill
+camera
+camera-fill
+pushpin
+pushpin-fill
+heart
+heart-fill
+reload
+account
+account-fill
+integral
+integral-fill
+gift
+gift-fill
+zhifubao-circle-fill
+weixin-fill
+weixin-circle-fill
+twitter-circle-fill
+qq-fill
+qq-circle-fill
+moments
+moments-circel-fill
+twitte
+empty-data
+empty-address
+empty-favor
+empty-car
+empty-order
+empty-list
+empty-search
+empty-permission
+empty-news
+empty-history
+empty-coupon
+empty-page
+wifi-off
+```
+

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

@@ -0,0 +1,170 @@
+---
+group: 基础
+category: Components
+title: Image
+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-image` 是 uni-app `image` 的增强版，在继承原有能力基础上提供：
+
+- 淡入动画
+- 加载中提示
+- 加载失败提示
+- 圆角与形状控制
+- 多种懒加载策略（官方 lazyLoad + observer 懒加载）
+
+推荐在大部分图片场景优先使用 `uv-image`。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-image`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+配置图片的 `width`、`height` 和 `src` 即可。
+
+```vue
+<template>
+  <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="80px" height="80px"></uv-image>
+</template>
+```
+
+### 图片裁剪、缩放模式 {#mode}
+
+通过 `mode` 配置填充模式，与 uni-app `image` 的 `mode` 参数完全一致（如 `widthFix` 等）。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></uv-image>
+```
+
+### 图片形状 {#shape}
+
+- `shape`：`circle` 圆形，`square` 方形
+- 当 `shape="square"` 时，可通过 `radius` 设置圆角
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></uv-image>
+```
+
+### 懒加载（官方 lazyLoad） {#lazy-load}
+
+`lazyLoad` 仅对 **微信小程序、App、百度小程序、字节跳动小程序** 有效，且只对 `page` 与 `scroll-view` 下的图片生效。默认开启。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></uv-image>
+``>
+
+### observer 懒加载 {#observer}
+
+设置 `observeLazyLoad` 为 `true` 开启 observer 懒加载：图片滑动到可视范围内时才会请求加载。
+
+> 注意：nvue 页面不生效，因为 nvue 不支持 `uni.createIntersectionObserver()`。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :observeLazyLoad="true"></uv-image>
+```
+
+### 加载中提示 {#loading-slot}
+
+图片加载过程中默认为「加载中」状态（内置小图标）。可通过 `loading` 插槽自定义内容，常配合 `uv-loading-icon`。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg">
+  <template v-slot:loading>
+    <uv-loading-icon color="red"></uv-loading-icon>
+  </template>
+</uv-image>
+```
+
+### 加载错误提示 {#error-slot}
+
+加载失败时默认显示错误图标。可通过 `error` 插槽自定义。
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg">
+  <template v-slot:error>
+    <view style="font-size: 24rpx;">加载失败</view>
+  </template>
+</uv-image>
+```
+
+### 淡入动画 {#fade}
+
+组件自带加载完成时的淡入动画：
+
+- `fade`：是否启用淡入
+- `duration`：过渡时间（ms）
+
+```vue
+<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></uv-image>
+```
+
+### 事件冒泡 {#bubble}
+
+默认允许事件冒泡（常见需求：点击图片触发父级点击）。若要阻止冒泡，可在外层包裹 `view` 并使用 `@tap.stop`。
+
+```vue
+<!-- 点击图片将不会触发 clickHandler -->
+<view @tap="clickHandler">
+  <view @tap.stop>
+    <uv-image src="https://cdn.uviewui.com/uview/album/1.jpg"></uv-image>
+  </view>
+</view>
+```
+
+## API {#api}
+
+### Image Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| src | String | - | 图片地址，强烈建议使用绝对或网络路径 |
+| mode | String | aspectFill | 裁剪模式，同 uni-app `image` 的 `mode` |
+| width | String \| Number | 300 | 宽度（任意单位；数值默认 px/rpx） |
+| height | String \| Number | 225 | 高度（任意单位；数值默认 px/rpx） |
+| shape | String | square | 图片形状：circle 圆形、square 方形 |
+| radius | String \| Number | 0 | 圆角（默认单位 px） |
+| lazyLoad | Boolean | true \| false | 是否使用原生懒加载（微信/APP/百度/字节小程序） |
+| observeLazyLoad | Boolean | false | 是否开启 observer 懒加载（nvue 无效） |
+| showMenuByLongpress | Boolean | true | 是否开启长按识别小程序码菜单（仅微信小程序） |
+| loadingIcon | String | photo | 加载中图标或小图片名 |
+| errorIcon | String | error-circle | 加载失败图标或小图片名 |
+| showLoading | Boolean | true | 是否显示加载中图标或 loading 插槽 |
+| showError | Boolean | true | 是否显示加载失败图标或 error 插槽 |
+| fade | Boolean | true | 是否启用淡入效果 |
+| webp | Boolean | false | 仅网络资源，且只对微信小程序有效 |
+| duration | String \| Number | 500 | 搭配 fade 的过渡时间（ms） |
+| bgColor | String | #f3f4f6 | 背景色（用于深色背景中更好过渡） |
+| cellChild | Boolean | false | 是否属于 cell 节点下（nvue 在 cell/uv-list 下建议设为 true，避免回收后不显示） |
+| customStyle | Object | - | 自定义样式 |
+
+### Image Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| loading | 自定义加载中的提示内容 |
+| error | 自定义加载失败的提示内容 |
+
+### Image Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击图片时触发 | - |
+| @error | 图片加载失败时触发 | `err`：错误信息 |
+| @load | 图片加载成功时触发 | - |
+

package/template/docs/uv-ui-docs/index-list-cn.md

@@ -0,0 +1,132 @@
+---
+group: 数据
+category: Components
+title: IndexList
+subtitle: 索引列表
+description: 右侧带索引的长列表，支持锚点吸顶与快速定位，常用于城市/机场选择等场景。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-index-list` 用于展示带索引锚点的列表，右侧索引可快速定位到对应分组，适用于城市列表、通讯录等场景。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-index-list`、`uv-index-item`、`uv-index-anchor`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+外层包裹 `uv-index-list`，锚点通过 `uv-index-anchor` 传入，自定义列表内容通过 `uv-index-item` 嵌套使用。
+
+- nvue：需要将 `uv-index-anchor` 写在 `uv-index-item` 外部
+- 非 nvue：需要将 `uv-index-anchor` 嵌套在 `uv-index-item` 内部
+- 可通过 `index-list` 参数自定义索引字符列表
+
+```vue
+<template>
+  <view>
+    <view style="height: 100rpx;width: 750rpx;background-color: pink;">自定义头部</view>
+    <uv-index-list :index-list="indexList" customNavHeight="100rpx">
+      <template v-slot:header>
+        <view style="height: 100rpx;width: 750rpx;background-color: #3c9cff;">头部内容</view>
+      </template>
+      <template v-for="(item, index) in itemArr">
+        <!-- #ifdef APP-NVUE -->
+        <uv-index-anchor :text="indexList[index]"></uv-index-anchor>
+        <!-- #endif -->
+        <uv-index-item>
+          <!-- #ifndef APP-NVUE -->
+          <uv-index-anchor :text="indexList[index]"></uv-index-anchor>
+          <!-- #endif -->
+          <view class="list-cell" v-for="(cell, index) in item">
+            {{ cell }}
+          </view>
+        </uv-index-item>
+      </template>
+    </uv-index-list>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+      itemArr: [
+        ['列表A1', '列表A2', '列表A3'],
+        ['列表B1', '列表B2', '列表B3'],
+        ['列表C1', '列表C2', '列表C3'],
+        ['列表D1', '列表D2', '列表D3'],
+        ['列表E1', '列表E2', '列表E3'],
+        ['列表F1', '列表F2', '列表F3'],
+        ['列表G1', '列表G2', '列表G3']
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-cell {
+  /* #ifndef APP-PLUS */
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  /* #endif */
+  padding: 10px 24rpx;
+  overflow: hidden;
+  color: #323233;
+  font-size: 14px;
+  line-height: 24px;
+  background-color: #fff;
+}
+</style>
+```
+
+### 自定义导航栏 {#custom-nav}
+
+默认锚点会吸附在导航栏下方；如果取消/自定义了导航栏，需要指定吸顶高度 `custom-nav-height`（单位默认 px），通常设置为导航栏高度。
+
+## API {#api}
+
+### IndexList Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| inactiveColor | 右侧索引非激活时颜色 | String | #606266 | - |
+| activeColor | 右侧索引激活时颜色 | String | #5677fc | - |
+| indexList | 索引字符列表 | Array\<string \| number\> | A-Z | - |
+| sticky | 是否开启锚点自动吸顶 | Boolean | true | false |
+| customNavHeight | 自定义导航栏高度（单位默认 px） | String \| Number | 0 | - |
+
+### IndexAnchor Props {#anchor-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| text | 列表锚点文本内容 | String \| Number | - | - |
+| color | 列表锚点文字颜色 | String | #606266 | - |
+| size | 列表锚点文字大小（单位默认 px） | String \| Number | 14 | - |
+| bgColor | 列表锚点背景颜色 | String | #dedede | - |
+| height | 列表锚点高度（单位默认 px） | String \| Number | 32 | - |
+
+### IndexList Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @select | 选中右侧索引字符时触发 | index：索引字符 |
+
+### IndexItem Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义列表内容 |

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

@@ -0,0 +1,157 @@
+---
+group: 表单
+category: Components
+title: Input
+subtitle: 输入框
+description: 专为 uv-form 设计的输入框，默认无边框，可快速实现表单验证、输入、下拉选择等。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-input` 默认无边框和样式，适合在 `uv-form` 中配合 `uv-form-item` 使用，实现表单验证、输入内容、下拉选择等。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-input`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-input
+    placeholder="请输入内容"
+    border="surround"
+    v-model="value"
+    @change="change"
+  ></uv-input>
+</template>
+<script>
+export default {
+  data() {
+    return { value: '' }
+  },
+  methods: {
+    change(e) {
+      console.log('change', e)
+    }
+  }
+}
+</script>
+```
+
+### 可清空 {#clearable}
+
+```vue
+<uv-input placeholder="请输入内容" border="surround" clearable></uv-input>
+```
+
+### 下划线 {#border}
+
+```vue
+<uv-input placeholder="请输入内容" border="bottom"></uv-input>
+```
+
+### 前后图标 {#icons}
+
+```vue
+<uv-input
+  placeholder="前置图标"
+  prefixIcon="search"
+  prefixIconStyle="font-size: 22px;color: #909399"
+></uv-input>
+<uv-input
+  placeholder="后置图标"
+  suffixIcon="map-fill"
+  suffixIconStyle="color: #909399"
+></uv-input>
+```
+
+### 前后插槽 {#slots}
+
+```vue
+<uv-input placeholder="前置插槽">
+  <template v-slot:prefix>
+    <uv-text text="http://" margin="0 3px 0 0" type="tips"></uv-text>
+  </template>
+</uv-input>
+<uv-input placeholder="后置插槽">
+  <template v-slot:suffix>
+    <uv-code ref="uCode" seconds="20" changeText="X秒重新获取"></uv-code>
+  </template>
+</uv-input>
+```
+
+## API {#api}
+
+### Input Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value / v-model | 输入值 | Number \| String | - | - |
+| type | 输入框类型 | String | text | text \| number \| idcard \| digit \| password |
+| disabled | 是否禁用 | Boolean | false | true \| false |
+| disabledColor | 禁用背景色 | String | #f5f7fa | - |
+| clearable | 是否显示清除 | Boolean | false | true \| false |
+| password | 是否密码类型 | Boolean | false | true \| false |
+| maxlength | 最大长度，-1 不限制 | String \| Number | -1 | - |
+| placeholder | 占位符 | String | - | - |
+| placeholderClass | placeholder 样式类 | String | input-placeholder | - |
+| placeholderStyle | placeholder 样式 | String \| Object | color: #c0c4cc | - |
+| confirmType | 键盘右下角按钮文字 | String | done | done \| send \| search \| next \| go |
+| confirmHold | 点击完成是否保持键盘 | Boolean | false | true \| false |
+| holdKeyboard | focus 时点击页面不收键盘 | Boolean | false | true \| false |
+| focus | 自动聚焦 | Boolean | false | true \| false |
+| prefixIcon | 前置图标 | String | - | - |
+| prefixIconStyle | 前置图标样式 | String \| Object | - | - |
+| suffixIcon | 后置图标 | String | - | - |
+| suffixIconStyle | 后置图标样式 | String \| Object | - | - |
+| border | 边框类型 | String | surround | surround \| bottom \| none |
+| readonly | 只读 | Boolean | false | true \| false |
+| shape | 形状 | String | square | square \| circle |
+| formatter | 格式化函数（微信小程序可用 setFormatter） | Function | null | - |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### Type Options {#type-options}
+
+| 属性名 | 说明 |
+| --- | --- |
+| text | 文本输入 |
+| number | 数字输入 |
+| idcard | 身份证输入 |
+| digit | 带小数点的数字 |
+| password | 密码（等同 password=true） |
+
+### Input Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| setFormatter | 兼容微信小程序，设置 formatter |
+
+### Input Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @blur | 失去焦点 | value |
+| @focus | 聚焦 | - |
+| @confirm | 点击完成 | value |
+| @keyboardheightchange | 键盘高度变化 | - |
+| @input | 内容变化 | value |
+| @clear | 点击清空 | - |
+| @change | 内容变化 | - |
+
+### Input Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| prefix | 前置内容 |
+| suffix | 后置内容 |