@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,185 @@
+---
+group: 数据
+category: Components
+title: List
+subtitle: 列表
+description: 列表容器与列表项组合，适用于设置项/导航项/图文列表等场景，支持多种插槽扩展。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-list` 用于展示结构化信息列表，包含基本列表样式、默认插槽机制、可扩展插槽机制、长列表性能优化、多端兼容。
+
+- 在 Vue 页面里默认使用页面级滚动，性能更友好
+- 在 App-nvue 页面里默认使用原生 `list` 组件滚动，长列表滚动更顺滑，且出屏内容会被系统回收渲染资源
+
+`uv-list` 是父容器，核心子组件是 `uv-list-item`，代表列表中的可重复行。`uv-list-item` 内置属性可覆盖导航列表、设置列表、小图标列表等常见场景；当内置属性不满足时可通过插槽扩展（默认插槽、具名插槽 `header | body | footer`）。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-list`、`uv-list-item`
+
+## 代码演示 {#examples}
+
+### 基本用法 {#basic}
+
+- 设置 `title` 属性显示标题
+- 设置 `disabled` 属性禁用当前项
+
+```vue
+<uv-list>
+  <uv-list-item title="列表文字"></uv-list-item>
+  <uv-list-item :disabled="true" title="列表禁用状态"></uv-list-item>
+</uv-list>
+```
+
+### 多行内容显示 {#note}
+
+设置 `note` 属性，在第二行显示描述文本信息。
+
+```vue
+<uv-list>
+  <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
+  <uv-list-item :disabled="true" title="列表禁用状态" note="列表描述信息"></uv-list-item>
+</uv-list>
+```
+
+### 右侧显示角标、Switch {#right-badge-switch}
+
+- `show-badge`：是否显示角标
+- `badge`：角标内容（更多参数参考 `uv-badge`）
+- `show-switch`：是否显示开关
+
+```vue
+<uv-list>
+  <uv-list-item
+    title="列表右侧显示角标"
+    :show-badge="true"
+    :badge="{ value: '999+' }"
+  ></uv-list-item>
+  <uv-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange"></uv-list-item>
+</uv-list>
+```
+
+### 左侧显示缩略图、图标 {#left-thumb-icon}
+
+- `thumb`：左侧缩略图
+- `show-extra-icon` + `extra-icon`：左侧扩展图标
+
+```vue
+<uv-list>
+  <uv-list-item
+    title="列表左侧带略缩图"
+    note="列表描述信息"
+    thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
+    thumb-size="lg"
+    rightText="右侧文字"
+  ></uv-list-item>
+  <uv-list-item
+    :show-extra-icon="true"
+    :extra-icon="{ icon: 'photo', color: 'red' }"
+    title="列表左侧带扩展图标"
+  ></uv-list-item>
+</uv-list>
+```
+
+### 开启点击反馈与右侧箭头 {#clickable-link}
+
+- `clickable`：开启点击反馈并监听 `@click`
+- `link`：开启点击反馈并显示右侧箭头
+- `to`：跳转地址，`link` 指定跳转方式（默认 `navigateTo`）
+
+```vue
+<uv-list>
+  <uv-list-item title="开启点击反馈" clickable @click=""></uv-list-item>
+  <uv-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="($event, 1)"></uv-list-item>
+  <uv-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="($event, 1)"></uv-list-item>
+</uv-list>
+```
+
+### 自定义内容 {#custom}
+
+```vue
+<uv-list>
+  <uv-list-item>自定义内容1</uv-list-item>
+  <uv-list-item>自定义内容2</uv-list-item>
+  <uv-list-item>自定义内容3</uv-list-item>
+</uv-list>
+```
+
+## API {#api}
+
+### List Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| border | 是否显示边框 | Boolean | false |
+| border-color | 边框颜色 | String | #dadbde |
+| direction | 控制子组件排版方向（使用默认插槽自定义内容时不生效） | String | row |
+| padding | 控制子组件内边距（使用默认插槽自定义内容时不生效） | String | `20rpx 30rpx` |
+| customStyle | 自定义外部样式 | Object \| String | - |
+
+### ListItem Props {#item-props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| border | 是否显示边框 | Boolean | false |
+| title | 标题 | String | - |
+| note | 描述 | String | - |
+| ellipsis | title 是否溢出隐藏省略显示，可选值 1-5 | Number | 0 |
+| thumb | 左侧缩略图（若有值则不显示扩展图标） | String | - |
+| thumb-size | 缩略图尺寸：lg / medium / sm | String | medium |
+| show-badge | 是否显示数字角标 | Boolean | false |
+| badge | 数字角标参数（更多参数参考 `uv-badge`） | Object | - |
+| right-text | 右侧文字内容 | String | - |
+| disabled | 是否禁用 | Boolean | false |
+| show-arrow | 是否显示箭头图标 | Boolean | true |
+| link | 新页面跳转方式 | String | navigateTo |
+| to | 新页面跳转地址（设置后 click 会返回是否跳转成功） | String | - |
+| clickable | 是否开启点击反馈 | Boolean | false |
+| show-switch | 是否显示 Switch | Boolean | false |
+| switch-checked | Switch 是否被选中 | Boolean | false |
+| show-extra-icon | 左侧是否显示扩展图标 | Boolean | false |
+| extra-icon | 扩展图标参数，格式 `{ color, size, name }`（参考 `uv-icon`） | Object | - |
+| direction | 排版方向：row / column（也影响 3 个插槽排版） | String | row |
+| customStyle | 自定义外部样式 | Object \| String | - |
+
+### Link Options {#link-options}
+
+| 属性名 | 说明 |
+| --- | --- |
+| navigateTo | 同 `uni.navigateTo()` |
+| redirectTo | 同 `uni.redirectTo()` |
+| reLaunch | 同 `uni.reLaunch()` |
+| switchTab | 同 `uni.switchTab()` |
+
+### List Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @scroll | nvue 模式滚动时触发 | e |
+| @scrolltolower | nvue 模式滚动到底部触发 | - |
+
+### ListItem Events {#item-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击列表项触发（需开启点击反馈 `:clickable="true"`） | - |
+| @switchChange | 点击切换 Switch 时触发（需显示 switch） | e = { value: checked } |
+
+### ListItem Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 默认插槽，完全自定义内容 |
+| header | 左/上内容插槽 |
+| body | 中间内容插槽 |
+| footer | 右/下内容插槽 |

package/template/docs/uv-ui-docs/load-more-cn.md

@@ -0,0 +1,144 @@
+---
+group: 数据
+category: Components
+title: LoadMore
+subtitle: 加载更多
+description: 列表底部加载状态提示，支持 loadmore/loading/nomore 三种状态、虚线分割与点击触发加载。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-load-more` 用于标识页面底部加载数据时的状态，共有三种状态：
+
+- `loadmore`：加载前，显示“加载更多”（可点击触发 `@loadmore`）
+- `loading`：加载中，显示“正在加载...”
+- `nomore`：加载结束，显示“没有更多了”
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-load-more`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `status` 设置组件状态：`loadmore / loading / nomore`。
+
+```vue
+<template>
+  <view class="wrap">
+    <view class="item uv-border-bottom" v-for="(item, index) in list" :key="index">{{ '第' + item + '条数据' }}</view>
+    <uv-load-more :status="status" />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      status: 'loadmore',
+      list: 15,
+      page: 0
+    }
+  },
+  onReachBottom() {
+    if (this.page >= 3) return
+    this.status = 'loading'
+    this.page = ++this.page
+    setTimeout(() => {
+      this.list += 10
+      if (this.page >= 3) this.status = 'nomore'
+      else this.status = 'loading'
+    }, 2000)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  padding: 24rpx;
+}
+.item {
+  padding: 24rpx 0;
+  color: #222;
+  font-size: 28rpx;
+}
+</style>
+```
+
+### 自定义提示文案 {#text}
+
+通过 `loadmore-text / loading-text / nomore-text` 配置不同状态文案；`is-dot` 可在 `nomore` 状态用 `●` 替代默认文案。
+
+```vue
+<template>
+  <uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      status: 'loadmore',
+      loadingText: '努力加载中',
+      loadmoreText: '轻轻上拉',
+      nomoreText: '实在没有了'
+    }
+  }
+}
+</script>
+```
+
+### 线条颜色与虚线 {#line}
+
+设置 `dashed` + `lineColor`；并可用 `line` 显示左边分割线。
+
+```vue
+<template>
+  <uv-load-more loadmoreText="看,我和别人不一样" color="#1CD29B" lineColor="#1CD29B" dashed line />
+</template>
+```
+
+### 点击触发加载更多 {#click-loadmore}
+
+当 `status` 为 `loadmore` 时，用户点击组件触发 `@loadmore`，用于无法触发 `onReachBottom` 的场景（如数据不满一页/网络原因等）。
+
+## API {#api}
+
+### LoadMore Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| status | 组件状态 | String | loadmore | loadmore \| loading \| nomore |
+| bgColor | 组件背景颜色 | String | transparent | - |
+| icon | 加载中时是否显示图标 | Boolean | true | true \| false |
+| fontSize | 字体大小（rpx 或 px） | String \| Number | 14 | - |
+| iconSize | 图标大小（rpx 或 px） | String \| Number | 17 | - |
+| color | 字体颜色 | String | #606266 | - |
+| loadingIcon | 加载中图标类型 | String | spinner | spinner \| circle \| semicircle |
+| loadmoreText | 加载前提示语 | String | 加载更多 | - |
+| loadingText | 加载中提示语 | String | 正在加载... | - |
+| nomoreText | 没有更多提示语 | String | 没有更多了 | - |
+| isDot | status=nomore 时显示 “●” | Boolean | false | true \| false |
+| iconColor | 加载动画图标颜色 | String | #b7b7b7 | - |
+| lineColor | 线条颜色 | String | #E6E8EB | - |
+| dashed | 是否虚线（true 虚线 / false 实线） | Boolean | false | true \| false |
+| marginTop | 与前一个元素距离（rpx 或 px） | String \| Number | 10 | - |
+| marginBottom | 与后一个元素距离（rpx 或 px） | String \| Number | 10 | - |
+| height | 高度 | String \| Number | auto | - |
+| line | 是否显示左边分割线 | Boolean | false | true \| false |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### LoadMore Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @loadmore | status 为 loadmore 时，点击组件触发 | - |

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

@@ -0,0 +1,125 @@
+---
+group: 基础
+category: Components
+title: LoadingIcon
+subtitle: 加载动画
+description: 小型加载动画组件，支持多种形态、文字、颜色、尺寸与显示控制。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+用于页面/列表加载中的轻量动效提示，常用于 `uv-load-more` 等组件的“正在加载”状态。
+
+注意：`mode="spinner"` 在 nvue 中使用的是 `<loading-indicator>`，表现不是花朵效果，而是 weex 默认动画。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-loading-icon`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+默认 `mode="spinner"`。
+
+```vue
+<template>
+  <uv-loading-icon></uv-loading-icon>
+</template>
+```
+
+### 动画文字 {#text}
+
+`text` 指定文字内容，`textSize` 指定文字大小。
+
+```vue
+<template>
+  <uv-loading-icon text="加载中" textSize="30rpx"></uv-loading-icon>
+</template>
+```
+
+### 模式类型 {#mode}
+
+`mode` 可选：`spinner / circle / semicircle`。
+
+```vue
+<template>
+  <view>
+    <uv-loading-icon mode="spinner" text="花朵形"></uv-loading-icon>
+    <uv-loading-icon mode="semicircle" text="半圆"></uv-loading-icon>
+    <uv-loading-icon mode="circle" text="圆型"></uv-loading-icon>
+  </view>
+</template>
+```
+
+### 排列类型 {#vertical}
+
+`vertical` 控制文字与图标是否垂直排列（默认 false）。
+
+```vue
+<template>
+  <uv-loading-icon :vertical="true" text="加载中"></uv-loading-icon>
+</template>
+```
+
+### 动画模式与运行时间 {#timing-duration}
+
+`timing-function` 仅在 `mode` 为 `semicircle` 或 `circle` 时有效；`duration` 设置周期时间。
+
+```vue
+<template>
+  <view>
+    <uv-loading-icon timing-function="linear"></uv-loading-icon>
+    <uv-loading-icon duration="2000"></uv-loading-icon>
+  </view>
+</template>
+```
+
+### 颜色与尺寸 {#color-size}
+
+`color` 设置活动区域颜色；`inactive-color` 设置暗边颜色（circle 模式）；`size` 设置尺寸（rpx）。
+
+```vue
+<template>
+  <view>
+    <uv-loading-icon color="red"></uv-loading-icon>
+    <uv-loading-icon mode="circle" inactive-color="red"></uv-loading-icon>
+    <uv-loading-icon size="36rpx"></uv-loading-icon>
+  </view>
+</template>
+```
+
+### 显示或隐藏 {#show}
+
+```vue
+<uv-loading-icon :show="true"></uv-loading-icon>
+<!-- 等价于 -->
+<uv-loading-icon show></uv-loading-icon>
+```
+
+## API {#api}
+
+### LoadingIcon Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| show | 是否显示动画 | Boolean | true | true \| false |
+| color | 图标颜色 | String | #909193 | - |
+| textColor | 提示文本颜色 | String | #909193 | - |
+| vertical | 图标与文字是否垂直排列 | Boolean | false | true \| false |
+| mode | 模式选择 | String | circle | spinner \| circle \| semicircle |
+| size | 加载图标大小（单位默认 px） | String \| Number | 24 | - |
+| textSize | 加载文字大小（单位默认 px） | String \| Number | 15 | - |
+| text | 文字内容 | String | - | - |
+| textStyle | 文字样式 | Object | - | - |
+| timingFunction | 指定 `animation-timing-function`（circle/semicircle 有效） | String | ease-in-out | - |
+| duration | 动画周期时间（ms） | String \| Number | 1200 | - |
+| inactiveColor | 图标暗边颜色（circle 模式有效） | String | transparent | - |

package/template/docs/uv-ui-docs/loading-page-cn.md

@@ -0,0 +1,85 @@
+---
+group: 基础
+category: Components
+title: LoadingPage
+subtitle: 加载页
+description: 页面级加载效果组件，可配置提示文案、动画模式、图片替代与样式。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-loading-page` 是页面级加载效果，适用于页面初始化加载数据等场景，与骨架屏有相似之处。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-loading-page`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+`loading` 控制显示/隐藏，`loading-text` 设置提示文案，`font-size` 设置提示大小。
+
+```vue
+<template>
+  <uv-loading-page :loading="true" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
+</template>
+```
+
+### 动画模式 {#mode}
+
+`loading-mode` 可选：`circle / semicircle / spinner`（默认 circle）。
+
+```vue
+<template>
+  <uv-loading-page :loading="true" loading-mode="spinner"></uv-loading-page>
+</template>
+```
+
+```vue
+<template>
+  <uv-loading-page :loading="true" loading-mode="semicircle"></uv-loading-page>
+</template>
+```
+
+### 动画图片 {#image}
+
+`image` 可指定文字上方用于替换 loading 动画的图片。
+
+```vue
+<template>
+  <uv-loading-page :loading="true" image="https://www.uvui.cn/common/logo.png"></uv-loading-page>
+</template>
+```
+
+### 图标大小 {#icon-size}
+
+```vue
+<template>
+  <uv-loading-page :loading="true" icon-size="50rpx"></uv-loading-page>
+</template>
+```
+
+## API {#api}
+
+### LoadingPage Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| loadingText | 提示内容 | String \| Number | '' | - |
+| image | 替换 loading 动画的图片 | String | - | - |
+| loadingMode | 加载动画模式 | String | circle | circle \| spinner \| semicircle |
+| loading | 是否加载中 | Boolean | false | true \| false |
+| bgColor | 背景颜色 | String | #ffffff | - |
+| color | 文字颜色 | String | #C8C8C8 | - |
+| fontSize | 文字大小 | String \| Number | 19 | - |
+| iconSize | 图标大小 | String \| Number | 28 | - |
+| loadingColor | 加载中图标颜色 | String | #C8C8C8 | - |