@fredwsw/frontend-rules 1.0.0

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

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

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

@@ -0,0 +1,91 @@
+---
+group: 表单
+category: Components
+title: Rate
+subtitle: 评分
+description: 用于星级打分评价，如商品评价等。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-rate` 通过 `count` 设置星星数量，`v-model` 绑定选中的数量。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-rate`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-rate :count="count" v-model="value"></uv-rate>
+</template>
+<script>
+export default {
+  data() {
+    return { count: 4, value: 2 }
+  }
+}
+</script>
+```
+
+### 自定义样式 {#custom}
+
+```vue
+<uv-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></uv-rate>
+```
+
+### 自定义图标 {#icon}
+
+```vue
+<uv-rate activeIcon="heart-fill" inactiveIcon="heart"></uv-rate>
+```
+
+### 最少选中 {#min-count}
+
+```vue
+<uv-rate :minCount="5"></uv-rate>
+```
+
+### 禁用/只读 {#disabled-readonly}
+
+```vue
+<uv-rate :value="3.7" disabled></uv-rate>
+<uv-rate :value="3.7" readonly></uv-rate>
+```
+
+## API {#api}
+
+### Rate Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value / v-model | 选中星星数量 | String \| Number | 1 |
+| count | 星星总数 | String \| Number | 5 |
+| disabled | 禁止操作 | Boolean | false |
+| readonly | 只读 | Boolean | false |
+| size | 星星大小 rpx | String \| Number | 18 |
+| inactiveColor | 未选颜色 | String | #b2b2b2 |
+| activeColor | 选中颜色 | String | #FA3534 |
+| gutter | 间距 | String \| Number | 4 |
+| minCount | 最少选中数 | String \| Number | 1 |
+| allowHalf | 半星（仅 vue） | Boolean | false |
+| activeIcon | 选中图标 | String | star-fill |
+| inactiveIcon | 未选图标 | String | star |
+| touchable | 是否可滑动 | Boolean | true |
+
+### Rate Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 选中变化 | value |

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

@@ -0,0 +1,191 @@
+---
+group: 数据
+category: Components
+title: ReadMore
+subtitle: 展开阅读更多
+description: 对长内容进行折叠展示，可在指定高度处截断，并通过“展开/收起”按钮控制全文显示。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-read-more` 用于 **内容较长、默认只展示部分内容** 的场景，例如：
+
+- 文章简介、长段落文案
+- 商品详情中的前几行预览
+- 配合富文本解析器 `uv-parse` 显示长文章
+
+- 超出指定高度时自动出现「展开阅读全文」按钮
+- 支持展开后是否显示收起按钮
+- 支持异步内容与手动初始化高度
+- 支持自定义顶部渐隐阴影样式
+
+> 在部分微信小程序平台上，解析 `uv-parse` 内容较耗时，需在解析完成的回调中通过 `ref.init()` 重新初始化高度。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-read-more`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过插槽传入正文内容，通过 `showHeight` 设置折叠高度，通过 `toggle` 控制是否可收起。
+
+```vue
+<template>
+  <uv-read-more show-height="200rpx" :toggle="true">
+    <view class="content">
+      <view>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</view>
+      <view>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。</view>
+      <view>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</view>
+      <view>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？</view>
+      <view>人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</view>
+    </view>
+  </uv-read-more>
+</template>
+
+<style scoped>
+.content {
+  padding: 0 30rpx;
+}
+</style>
+```
+
+### 配合解析器使用（uv-parse） {#with-parse}
+
+当插槽内容中包含 `uv-parse`，需在其 `@ready` 或 `@load` 回调中，延迟调用 `read-more` 的 `init()` 方法。
+
+```vue
+<template>
+  <uv-read-more ref="readMore">
+    <uv-parse class="content" :content="content" @ready="ready"></uv-parse>
+  </uv-read-more>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: `<p class="content">...</p>`
+    }
+  },
+  methods: {
+    ready() {
+      setTimeout(() => {
+        this.$refs.readMore.init()
+      }, 1000)
+    }
+  }
+}
+</script>
+```
+
+### 异步初始化内容 {#async}
+
+当内容从后端异步获取时，可在请求完成并渲染后（`this.$nextTick`）手动调用 `init`。
+
+```vue
+<template>
+  <uv-read-more show-height="200px" :toggle="false" ref="readMore">
+    <rich-text class="content" :nodes="content"></rich-text>
+  </uv-read-more>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '',
+      getContent: '<p class="content">...</p>'
+    }
+  },
+  async onLoad() {
+    this.content = await this.getData()
+    this.$nextTick(() => {
+      this.$refs.readMore.init()
+    })
+  },
+  methods: {
+    getData() {
+      uni.showLoading({ title: '加载中...' })
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(this.getContent)
+          uni.hideLoading()
+        }, 1000)
+      })
+    }
+  }
+}
+</script>
+```
+
+### 自定义阴影样式 {#shadow-style}
+
+默认顶部有一块白色渐隐阴影区域，用于融合按钮区域与文本；可通过 `shadowStyle` 进行完全自定义。
+
+```vue
+<template>
+  <uv-read-more show-height="200rpx" :shadowStyle="shadowStyle">
+    <view class="content">
+      <!-- 文字内容 -->
+    </view>
+  </uv-read-more>
+</template>
+
+<script>
+export default {
+  computed: {
+    shadowStyle() {
+      return {
+        // #ifndef APP-NVUE
+        backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
+        // #endif
+        // #ifdef APP-NVUE
+        backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
+        // #endif
+        paddingTop: '100px',
+        marginTop: '-100px'
+      }
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### ReadMore Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| showHeight | 内容超出此高度才显示「展开阅读全文」，单位 rpx | String \| Number | 400 | - |
+| toggle | 展开后是否显示「收起」按钮 | Boolean | false | true \| false |
+| closeText | 折叠状态下的提示文字 | String | 展开阅读全文 | - |
+| openText | 展开状态下的提示文字 | String | 收起 | - |
+| color | 提示文字颜色 | String | #2979ff | - |
+| fontSize | 提示文字大小（默认单位 px） | String \| Number | 14 | - |
+| shadowStyle | 顶部阴影样式对象 | Object | 见上方说明 | - |
+| textIndent | 段落首行缩进字符数 | String | 2em | - |
+| name | 在 `open` / `close` 事件中回传的标识 | String \| Number | - | - |
+
+### Methods {#methods}
+
+| 名称 | 说明 |
+| --- | --- |
+| init | 重新初始化组件内部高度计算（嵌套 `uv-parse` 或异步内容时常用） |
+
+### Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @open | 内容展开时触发 | `name`：props 中传入的 `name` |
+| @close | 内容收起时触发 | `name`：props 中传入的 `name` |
+

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

@@ -0,0 +1,188 @@
+---
+group: 布局
+category: Components
+title: ScrollList
+subtitle: 横向滚动列表
+description: 用于同时展示多个商品或分类的横向滚动列表，支持指示器与左右端点事件。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-scroll-list` 一般用于横向展示多个商品、分类等数量不确定的内容，支持左右滑动滚动。  
+可灵活配置指示器样式，并在滑动到最左/最右时触发事件，方便做更多交互。
+
+注意：
+
+- 如在其他组件（如 `uv-vtabs`、`uv-popup` 等）中使用，建议外层包一层 `view` 控制宽度，避免内部计算宽度错误导致被截断。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-scroll-list`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过默认 slot 传入列表元素即可。
+
+```vue
+<template>
+  <uv-scroll-list>
+    <view v-for="(item, index) in list" :key="index">
+      <image :src="item.image" mode="heightFix" style="height: 200px;"></image>
+    </view>
+  </uv-scroll-list>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { image: 'https://via.placeholder.com/200x200.png/3c9cff/fff' },
+        { image: 'https://via.placeholder.com/200x200.png/f9ae3d/fff' },
+        { image: 'https://via.placeholder.com/200x200.png/5ac725/fff' },
+        { image: 'https://via.placeholder.com/200x200.png/f56c6c/fff' },
+        { image: 'https://via.placeholder.com/200x200.png/909399/fff' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 使用指示器 {#indicator}
+
+```vue
+<template>
+  <uv-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
+    <view v-for="(item, index) in list" :key="index">
+      <image :src="item.image" mode="heightFix" style="height: 200px;"></image>
+    </view>
+  </uv-scroll-list>
+</template>
+```
+
+### 端点事件与商品展示 {#edge-events}
+
+滑动到最左/最右时，会触发 `@left` / `@right` 事件，可用于加载更多或埋点等。
+
+```vue
+<template>
+  <uv-scroll-list @right="right" @left="left">
+    <view class="scroll-list" style="flex-direction: row;">
+      <view
+        class="scroll-list__goods-item"
+        v-for="(item, index) in list"
+        :key="index"
+        :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
+      >
+        <image class="scroll-list__goods-item__image" :src="item.image"></image>
+        <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
+      </view>
+      <view class="scroll-list__show-more">
+        <text class="scroll-list__show-more__text">查看更多</text>
+      </view>
+    </view>
+  </uv-scroll-list>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { price: '230.5', image: 'https://via.placeholder.com/60x60.png/3c9cff/fff' },
+        { price: '74.1', image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff' },
+        { price: '8457', image: 'https://via.placeholder.com/60x60.png/5ac725/fff' },
+        { price: '1442', image: 'https://via.placeholder.com/60x60.png/f56c6c/fff' },
+        { price: '541', image: 'https://via.placeholder.com/60x60.png/909399/fff' },
+        { price: '234', image: 'https://via.placeholder.com/60x60.png/3c9cff/fff' },
+        { price: '562', image: 'https://via.placeholder.com/60x60.png/f9ae3d/fff' },
+        { price: '251.5', image: 'https://via.placeholder.com/60x60.png/5ac725/fff' }
+      ]
+    }
+  },
+  methods: {
+    left() {
+      console.log('left')
+    },
+    right() {
+      console.log('right')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@mixin flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+.scroll-list {
+  @include flex(column);
+  &__goods-item {
+    margin-right: 20px;
+    &__image {
+      width: 60px;
+      height: 60px;
+      border-radius: 4px;
+    }
+    &__text {
+      color: #f56c6c;
+      text-align: center;
+      font-size: 12px;
+      margin-top: 5px;
+    }
+  }
+  &__show-more {
+    background-color: #fff0f0;
+    border-radius: 3px;
+    padding: 3px 6px;
+    @include flex(column);
+    align-items: center;
+    &__text {
+      font-size: 12px;
+      width: 12px;
+      color: #f56c6c;
+      line-height: 16px;
+    }
+  }
+}
+</style>
+```
+
+## 兼容性与性能 {#performance}
+
+组件在 nvue 中引入 `bindingx`，让 JS 运行在视图层，减少视图层与逻辑层通信损耗；  
+在 App-VUE、H5、小程序中则通过 `wxs` 实现，其他平台通过 JS 完成。
+
+## API {#api}
+
+### ScrollList Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| indicatorWidth | 指示器整体宽度 | String \| Number | 50 | - |
+| indicatorBarWidth | 指示器滑块宽度 | String \| Number | 20 | - |
+| indicator | 是否显示面板指示器 | Boolean | true | false |
+| indicatorColor | 指示器非激活颜色 | String | #f2f2f2 | - |
+| indicatorActiveColor | 指示器滑块颜色 | String | #3c9cff | - |
+| indicatorStyle | 指示器样式（支持 bottom/left/right 定位） | String \| Object | - | - |
+
+### ScrollList Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @left | 滑动到最左端时触发 | - |
+| @right | 滑动到最右端时触发 | - |