@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,107 @@
+---
+group: 表单
+category: Components
+title: Search
+subtitle: 搜索
+description: 搜索框组件，集成常见功能，开箱即用。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-search` 通过 `v-model` 双向绑定，输入变化会实时反映到变量，无需监听 `change`。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-search`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
+</template>
+<script>
+export default {
+  data() {
+    return { keyword: '水调歌头' }
+  }
+}
+</script>
+```
+
+### 输入框形状 {#shape}
+
+`shape`：round 半圆，square 方形带圆角。
+
+```vue
+<uv-search shape="round"></uv-search>
+```
+
+### 右侧控件 {#action}
+
+- `showAction` 是否显示右侧按钮
+- `actionText` 按钮文字
+- `animation` 为 true 时失去焦点或点击后自动消失
+- 点击右侧控件触发 `custom` 事件，非 `search`
+
+```vue
+<uv-search :showAction="true" actionText="搜索" :animation="true"></uv-search>
+```
+
+### 自定义样式 {#custom}
+
+```vue
+<uv-search inputAlign="center" height="70"></uv-search>
+```
+
+## API {#api}
+
+### Search Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value / v-model | 搜索值 | String | - |
+| shape | 形状 | String | round |
+| bgColor | 背景色 | String | #f2f2f2 |
+| placeholder | 占位文字 | String | 请输入关键字 |
+| clearabled | 清除控件 | Boolean | true |
+| focus | 自动聚焦 | Boolean | false |
+| showAction | 右侧控件 | Boolean | true |
+| actionText | 右侧文字 | String | 搜索 |
+| inputAlign | 对齐 | String | left |
+| disabled | 禁用 | Boolean | false |
+| borderColor | 边框色 | String | transparent |
+| searchIcon | 左侧图标 | String | search |
+| animation | 动画 | Boolean | false |
+| maxlength | 最大长度 | String \| Number | -1 |
+| height | 高度 rpx | String \| Number | 64 |
+
+### Search Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 内容变化 | value |
+| @search | 确定搜索（回车/键盘搜索键） | value |
+| @custom | 点击右侧控件 | value |
+| @blur | 失去焦点 | value |
+| @focus | 获得焦点 | value |
+| @clear | 清空内容 | - |
+| @click | disabled 时点击 | - |
+| @clickIcon | 左侧图标点击 | - |
+
+### Search Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| prefix | 前置插槽 |
+| suffix | 后置插槽 |

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

@@ -0,0 +1,101 @@
+---
+group: 数据
+category: Components
+title: Skeleton
+subtitle: 骨架屏
+description: 内容加载前的灰白占位块，支持标题/段落/头像占位与加载动画，提升等待体验。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+骨架屏一般用于页面请求远程数据未完成时，用灰色块预展示页面结构，提升等待时的感知体验。
+
+说明：由于 VUE 和 NVUE 特性不同，组件动画在 VUE 上为由左到右形式，在 NVUE 上为明暗显隐形式。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-skeleton`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+组件由标题、段落和头像占位组成，其中段落需通过 `rows` 配置才显示。
+
+- `title`：是否显示标题占位（默认 true）
+- `avatar`：是否显示头像占位
+- `rows`：段落行数
+- `loading`：是否加载中（为 true 显示骨架屏，否则展示插槽内容）
+
+```vue
+<template>
+  <uv-skeleton rows="3" title loading></uv-skeleton>
+</template>
+```
+
+### 加载中动画 {#animate}
+
+设置 `animate` 为 true，骨架块将有动画效果。
+
+```vue
+<uv-skeleton :loading="true" :animate="true"></uv-skeleton>
+```
+
+### 显示头像 {#avatar}
+
+```vue
+<uv-skeleton :loading="true" avatar rows="1"></uv-skeleton>
+```
+
+### 插槽内容 {#slot}
+
+请求结束将 `loading` 设为 false，隐藏骨架并展示插槽内容。
+
+```vue
+<template>
+  <uv-skeleton rows="2" :loading="loading" avatar :title="false">
+    <text>loading为false时，将会展示此处插槽内容</text>
+  </uv-skeleton>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: true
+    }
+  },
+  onLoad() {
+    setTimeout(() => {
+      this.loading = false
+    }, 2000)
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Skeleton Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| loading | 是否显示骨架占位图（false 时展示子组件内容） | Boolean | true | true \| false |
+| animate | 是否开启动画效果 | Boolean | true | true \| false |
+| rows | 段落占位图行数 | Number \| String | 0 | - |
+| rowsWidth | 段落占位图宽度（支持数组分别配置每行） | String \| Array \| Number | 100% | - |
+| rowsHeight | 段落高度（支持数组分别配置每行） | String \| Array \| Number | 18 | - |
+| title | 是否展示标题占位图 | Boolean | true | true \| false |
+| titleWidth | 标题宽度 | String \| Number | 50% | - |
+| titleHeight | 标题高度 | String \| Number | 18 | - |
+| avatar | 是否展示头像占位图 | Boolean | false | true \| false |
+| avatarSize | 头像占位图大小 | String \| Number | 32 | - |
+| avatarShape | 头像占位图形状：circle / square | String | circle | circle \| square |

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

@@ -0,0 +1,312 @@
+---
+group: 数据
+category: Components
+title: Skeletons
+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}
+
+骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。
+
+- 当页面需要异步加载数据，希望避免空白或闪烁时使用。
+- 当需要告知用户内容正在加载，改善等待时的视觉感受时使用。
+
+**新版 vs 老版：** 新版骨架屏与老版本使用参数有很大区别，无法替换老版本。新版比老版更加灵活，理论上简单的左右上下布局结构均可轻松实现，样式自由度较高，只要会写 CSS，推荐使用新版。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-skeletons`
+
+## 注意事项 {#notice}
+
+为了避免错误使用，请在使用组件前仔细阅读以下注意事项：
+
+- 由于 vue 和 nvue 的特性不同，组件动画在 vue 上为由左到右变化形式，在 nvue 上为明暗显隐的形式。
+- 骨架屏的具体内容由 `skeleton` 参数决定，需按约定配置好该参数。
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+该组件主要由 `loading` 和 `skeleton` 两个参数控制：
+
+- **loading**（必选）：是否加载中状态，`true` 显示骨架屏占位，`false` 显示插槽内容
+- **skeleton**：数组形式 `[Object, Object, ...]`
+  - `Object.type`：类型，见下方参数说明。除 `flex` 外，其他类型均可自定义样式，默认为 `line`
+  - `Object.num`：重复数量，默认为 1
+  - `Object.gap`：重复项之间的垂直间隔，仅当 `Object.num` > 1 时生效，默认 `20rpx`
+
+```vue
+<template>
+  <view>
+    <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      skeleton: [
+        {
+          type: 'line',
+          num: 3,
+          gap: '20rpx'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义样式 {#custom-style}
+
+通过 `skeleton` 中的 `style` 参数可自定义样式。`style` 类型可以是 `array | string | object`：
+
+- **array**：如 `['height: 100rpx;', null, null]`，表示第一个 line 高度 100rpx，其余使用默认样式
+- **string / object**：对所有重复项应用同一样式
+
+```vue
+<template>
+  <view>
+    <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      skeleton: [
+        {
+          type: 'line',
+          num: 3,
+          gap: '20rpx',
+          style: ['width: 200rpx;marginBottom: 50rpx;', 'height: 100rpx;', 'width: 500rpx;']
+          // style: 'width: 200rpx;marginBottom: 50rpx;'
+          // style: { width: '200rpx', marginBottom: '50rpx' }
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 横向并列布局 {#flex-layout}
+
+通过 `skeleton` 中 `type: 'flex'` 实现横向并列布局：
+
+- **Object.children**：子项配置，用法同上。注意：children 下不支持再有 children
+- **avatar**：头像类型，有默认样式，也可用 `style` 覆盖
+- **custom**：完全自定义样式，便于语义理解
+
+```vue
+<template>
+  <view>
+    <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      skeleton: [
+        {
+          type: 'flex',
+          num: 1,
+          children: [
+            {
+              type: 'avatar',
+              num: 1,
+              style: 'marginRight: 10rpx;'
+            },
+            {
+              type: 'line',
+              num: 3,
+              gap: '30rpx',
+              style: ['width: 200rpx;', null, 'width:400rpx;']
+            },
+            {
+              type: 'custom',
+              num: 1,
+              style: 'width: 200rpx;height:200rpx;marginLeft: 10rpx;'
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 混合布局 + 插槽内容 {#slot}
+
+通过插槽写入展示内容，请求结束后将 `loading` 设为 `false`，骨架隐藏并展示插槽内容。
+
+`skeleton` 参数可以是 **Number**，表示上下项之间的间距（单位 rpx），例如 `30` 表示 30rpx。
+
+```vue
+<template>
+  <view class="uv-page">
+    <uv-skeletons :loading="loading" :skeleton="skeleton" :animate="animate">
+      <view class="uv-skeletons__row uv-skeletons__row1">
+        <view class="uv-skeletons__row1--left">
+          <image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
+        </view>
+        <view class="uv-skeletons__row1--right">
+          <uv-text text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5" color="#222" size="30rpx" lines="1"></uv-text>
+          <uv-text text="在经过改进后全面支持vue3" color="#222" size="30rpx" lines="1" margin="6rpx 0 0"></uv-text>
+          <uv-text text="欢迎大家使用" lines="1" color="#222" size="30rpx" margin="6rpx 0 0"></uv-text>
+        </view>
+      </view>
+      <view style="height: 30rpx;"></view>
+      <view class="uv-skeletons__row uv-skeletons__row2">
+        <image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
+        <image class="img" src="https://via.placeholder.com/200x200.png/f9ae3d"></image>
+        <image class="img" src="https://via.placeholder.com/200x200.png/5ac725"></image>
+        <image class="img" src="https://via.placeholder.com/200x200.png/f56c6c"></image>
+        <image class="img" src="https://via.placeholder.com/200x200.png/909399"></image>
+      </view>
+      <view style="height: 30rpx;"></view>
+      <view class="uv-skeletons__row uv-skeletons__row3">
+        <view class="uv-skeletons__row3--left">
+          <uv-text text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架" color="#222" size="30rpx" bold lines="1"></uv-text>
+          <uv-text text="大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
+          <uv-text text="uv-ui来源于社区，也回归到社区，永久开源，永远免费。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
+        </view>
+        <view class="uv-skeletons__row3--right">
+          <image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
+        </view>
+      </view>
+    </uv-skeletons>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      animate: true,
+      skeleton: [
+        {
+          type: 'flex',
+          num: 1,
+          children: [
+            { type: 'custom', num: 1, style: 'width:136rpx;height:136rpx;marginRight: 30rpx;' },
+            { type: 'line', num: 3, style: [null, 'width:360rpx;', 'width:200rpx;'] }
+          ]
+        },
+        30,
+        {
+          type: 'flex',
+          children: [
+            { type: 'custom', style: 'width:98rpx;height:160rpx;' },
+            { type: 'custom', style: 'width:98rpx;height:160rpx;marginLeft:50rpx;' },
+            { type: 'custom', style: 'width:98rpx;height:160rpx;marginLeft:50rpx;' },
+            { type: 'custom', style: 'width:98rpx;height:160rpx;marginLeft:50rpx;' },
+            { type: 'custom', style: 'width:98rpx;height:160rpx;marginLeft:50rpx;' }
+          ]
+        },
+        30,
+        {
+          type: 'flex',
+          children: [
+            { type: 'line', num: 3, gap: '30rpx' },
+            { type: 'custom', style: 'width:160rpx;height:160rpx;marginLeft: 30rpx;' }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.uv-page {
+  padding: 15px 30rpx 40px;
+}
+.uv-skeletons__row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+.uv-skeletons__row1 {
+  &--left {
+    width: 136rpx;
+    height: 136rpx;
+    margin-right: 30rpx;
+    .img {
+      width: 136rpx;
+      height: 136rpx;
+    }
+  }
+  &--right {
+    flex: 1;
+  }
+}
+.uv-skeletons__row2 {
+  justify-content: space-between;
+  .img {
+    width: 98rpx;
+    height: 160rpx;
+  }
+}
+.uv-skeletons__row3 {
+  &--left {
+    flex: 1;
+  }
+  &--right .img {
+    width: 160rpx;
+    height: 160rpx;
+  }
+}
+</style>
+```
+
+## API {#api}
+
+### Skeletons Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| loading | Boolean | true | 是否显示骨架 |
+| animate | Boolean | true | 是否开启动画效果 |
+| skeleton | Array | [] | 骨架内容，具体用法见 Skeletons Options |
+
+### Skeletons Options（skeleton 参数） {#skeleton-options}
+
+`skeleton` 配置决定骨架内容如何显示。格式为：`[Object, Number, Object, ...]`，其中 `Number` 表示上一项与下一项的垂直间距（单位 rpx）。
+
+| 属性名 | 说明 |
+| --- | --- |
+| Object.type | 骨架类型：`line`（段落）、`avatar`（头像）、`flex`（横向并列，需配合 children）、`custom`（自定义） |
+| Object.num | 重复数量，如 `{ type: 'line', num: 3 }` 表示 3 个段落骨架 |
+| Object.gap | 重复项的下边距，如 `{ type: 'line', num: 3, gap: '30rpx' }`。仅当 `Object.num` > 1 时生效 |
+| Object.style | 骨架样式，类型 `Array` / `Object` / `String`。Array 依次对应每项样式；Object / String 表示所有项共用 |
+| Object.children | 仅当 `type: 'flex'` 时使用，子项配置，用法同上。children 下不支持再有 children |
+| Number | 上一项与下一项的垂直间距，单位 rpx |
+
+## 类型速查 {#type-summary}
+
+| type | 用途 |
+| --- | --- |
+| line | 段落结构，默认类型 |
+| avatar | 头像形状，有默认样式 |
+| flex | 横向并列布局，需配置 children |
+| custom | 完全自定义样式 |

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

@@ -0,0 +1,98 @@
+---
+group: 表单
+category: Components
+title: Slider
+subtitle: 滑动选择器
+description: 用于手动选择区间范围，H5/小程序/APP-VUE 使用 WXS，NVUE 使用 BindingX。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-slider` 通过 `v-model` 绑定 0–100 的值，实时反映滑动结果。可用 `min`、`max` 设置范围。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-slider`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-slider v-model="value"></uv-slider>
+</template>
+<script>
+export default {
+  data() {
+    return { value: 30 }
+  }
+}
+</script>
+```
+
+### 最大最小值 {#min-max}
+
+```vue
+<uv-slider v-model="value" min="30" max="80"></uv-slider>
+```
+
+### 步进值 {#step}
+
+`step` 需能被 `max` 整除。
+
+```vue
+<uv-slider v-model="value" step="10" min="30" max="100"></uv-slider>
+```
+
+### 禁用 {#disabled}
+
+```vue
+<uv-slider v-model="value" disabled></uv-slider>
+```
+
+### 自定义样式 {#style}
+
+```vue
+<uv-slider
+  v-model="value"
+  block-size="30"
+  block-color="red"
+  backgroundColor="pink"
+  activeColor="blue"
+></uv-slider>
+```
+
+## API {#api}
+
+### Slider Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value / v-model | 选择值 | String \| Number | 0 |
+| min | 最小值 | String \| Number | 1 |
+| max | 最大值 | String \| Number | 100 |
+| step | 步长 | String \| Number | 1 |
+| activeColor | 已选部分颜色 | String | #2979ff |
+| backgroundColor | 背景条颜色 | String | #c0c4cc |
+| block-size | 滑块大小 12-28 | String \| Number | 18 |
+| block-color | 滑块颜色 | String | #ffffff |
+| show-value | 是否显示当前值 | Boolean | false |
+| blockStyle | 滑块自定义样式 | Object \| String | - |
+| customStyle | 自定义样式 | Object | - |
+
+### Slider Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @input | 拖动中 | value |
+| @changing | 拖动中 | value |
+| @change | 拖动结束 | value |