@fredwsw/frontend-rules 1.0.0

package/template/docs/uv-ui-docs/datetime-picker-cn.md

@@ -0,0 +1,167 @@
+---
+group: 表单
+category: Components
+title: DatetimePicker
+subtitle: 时间选择器
+description: 用于日期、时间选择，统一返回时间戳。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-datetime-picker` 通过 ref 调用 `open()` 打开，`mode` 配置展示格式。统一返回时间戳，可用 uv-ui 的 Time 工具格式化。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 注意事项 {#notice}
+
+- `mode="time"` 时 value 应为 String，如 `"12:00"`，不是 `Number(new Date())`
+- 部分平台 formatter 不生效时，使用 `setFormatter()` 设置
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-datetime-picker`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <view>
+    <uv-datetime-picker ref="datetimePicker" v-model="value" mode="datetime" @confirm="confirm"></uv-datetime-picker>
+    <button @click="open">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return { value: Number(new Date()) }
+  },
+  methods: {
+    open() {
+      this.$refs.datetimePicker.open()
+    },
+    confirm(e) {
+      console.log('confirm', e)
+    }
+  }
+}
+</script>
+```
+
+### 年月日 {#date}
+
+```vue
+<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm"></uv-datetime-picker>
+```
+
+### 过滤器 {#filter}
+
+```vue
+<uv-datetime-picker
+  ref="datetimePicker"
+  v-model="value"
+  mode="date"
+  :filter="filter"
+  @confirm="confirm"
+></uv-datetime-picker>
+```
+
+```js
+filter(type, options) {
+  if (type === 'year') {
+    return options.filter(option => option % 2 === 0)
+  }
+  return options
+}
+```
+
+### 格式化 {#formatter}
+
+部分平台需在 `onReady` 中调用 `setFormatter`。
+
+```vue
+<uv-datetime-picker
+  ref="datetimePicker"
+  v-model="value"
+  mode="datetime"
+  :formatter="formatter"
+  @confirm="confirm"
+></uv-datetime-picker>
+```
+
+```js
+formatter(type, value) {
+  if (type === 'year') return `${value}年`
+  if (type === 'month') return `${value}月`
+  if (type === 'day') return `${value}日`
+  return value
+}
+```
+
+### 限制最大最小值 {#min-max}
+
+`minDate`、`maxDate` 传入时间戳毫秒。
+
+```vue
+<uv-datetime-picker
+  ref="datetimePicker"
+  v-model="value"
+  mode="datetime"
+  :minDate="1587524800000"
+  :maxDate="1786778555000"
+  @confirm="confirm"
+></uv-datetime-picker>
+```
+
+## API {#api}
+
+### DatetimePicker Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value / v-model | 绑定值 | String \| Number | - |
+| showToolbar | 显示顶部操作栏 | Boolean | true |
+| title | 标题 | String | - |
+| mode | 格式 | String | datetime |
+| maxDate | 最大时间（时间戳） | Number | - |
+| minDate | 最小时间（时间戳） | Number | - |
+| minHour / maxHour | 小时范围（mode=time） | Number | 0 / 23 |
+| minMinute / maxMinute | 分钟范围（mode=time） | Number | 0 / 59 |
+| filter | 选项过滤函数 | Function | null |
+| formatter | 格式化函数 | Function | null |
+| loading | 加载中 | Boolean | false |
+| closeOnClickOverlay | 点击遮罩关闭 | Boolean | true |
+| closeOnClickConfirm | 点击确认关闭 | Boolean | true |
+
+### Mode Options {#mode-options}
+
+| 属性名 | 说明 |
+| --- | --- |
+| datetime | 年月日时分 |
+| date | 年月日 |
+| time | 时分，value 格式如 00:00 |
+| year-month | 年月 |
+| year | 年 |
+
+### DatetimePicker Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 弹出时间选择器 |
+| setFormatter | 设置格式化函数 |
+
+### DatetimePicker Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @confirm | 点击确定 | value, mode |
+| @change | 选择值变化 | value, mode |
+| @cancel | 点击取消 | - |
+| @close | 关闭遮罩 | - |

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

@@ -0,0 +1,90 @@
+---
+group: 布局
+category: Components
+title: Divider
+subtitle: 分割线
+description: 在内容区块之间显示一条带或不带文字的分割线，支持虚线、细线、文本位置与颜色自定义。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-divider` 用于 **区隔内容块** 的场景，例如：
+
+- 模块中间的分割线
+- 列表底部的「没有更多」提示
+- 需要带说明文字的分隔条
+
+- 支持虚线、细线
+- 支持以点代替文本
+- 支持文本居左/居中/居右
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-divider`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `text` 传入显示文字。
+
+```vue
+<uv-divider text="分割线"></uv-divider>
+```
+
+### 虚线与细线 {#dashed-hairline}
+
+```vue
+<!-- 虚线 -->
+<uv-divider text="分割线" :dashed="true"></uv-divider>
+
+<!-- 细线 -->
+<uv-divider text="分割线" :hairline="true"></uv-divider>
+```
+
+### 以点代替文字 {#dot}
+
+```vue
+<uv-divider text="分割线" :dot="true"></uv-divider>
+```
+
+### 文本位置与颜色 {#position-color}
+
+```vue
+<!-- 文本靠左/靠右 -->
+<uv-divider text="靠左" textPosition="left"></uv-divider>
+<uv-divider text="靠右" textPosition="right"></uv-divider>
+
+<!-- 文本与线条颜色 -->
+<uv-divider text="分割线" textColor="#2979ff" lineColor="#ff0000"></uv-divider>
+```
+
+## API {#api}
+
+### Divider Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| dashed | 是否虚线 | Boolean | false | true \| false |
+| hairline | 是否细线 | Boolean | true | true \| false |
+| dot | 是否以点替代文字（优先于 `text` 字段） | Boolean | false | true \| false |
+| textPosition | 文本位置 | String | center | center \| left \| right |
+| text | 文本内容 | String \| Number | - | - |
+| textSize | 文本大小 | String \| Number | 14 | - |
+| textColor | 文本颜色 | String | #909399 | - |
+| lineColor | 线条颜色 | String | #dcdfe6 | - |
+
+### Divider Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 分割线被点击时触发 | - |
+

package/template/docs/uv-ui-docs/drop-down-cn.md

@@ -0,0 +1,287 @@
+---
+group: 布局
+category: Components
+title: DropDown
+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-drop-down`（菜单项，含子组件 `uv-drop-down-item`）、`uv-drop-down-popup`（筛选弹层）。兼容 app-nvue，已在多端测试。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-drop-down`、`uv-drop-down-item`、`uv-drop-down-popup`
+
+## 代码演示 {#examples}
+
+### 基本用法 {#basic}
+
+仅提供菜单项和弹层结构，弹层内容需自行定义。
+
+**uv-drop-down：**
+- `sign`：唯一标识，多组件时需不同，内部用 `uni.$on` 监听
+- `defaultValue`：默认值数组，如 `[0,'0','all']`，value 在其中表示未选中
+
+**uv-drop-down-item：**
+- `name`：字段标识，逻辑中会用到
+- `label`：展示文本
+- `value`：选项值，不在 defaultValue 中即为选中
+- `type`：`1` 无筛选项（选中/未选中），`2` 有多个筛选项
+
+```vue
+<template>
+  <view style="height: 1000px;">
+    <uv-drop-down
+      ref="dropDown"
+      sign="dropDown_1"
+      :defaultValue="[0,'0','all']"
+    >
+      <uv-drop-down-item name="order" type="2" label="综合排序" value="all" />
+      <uv-drop-down-item name="type" type="2" label="文档格式" value="0" />
+      <uv-drop-down-item name="vip_type" type="1" label="VIP文档" :value="0" />
+    </uv-drop-down>
+    <uv-drop-down-popup sign="dropDown_1" @popupChange="change">
+      <view style="width: 750rpx;height: 300rpx;background-color: #fff;"></view>
+    </uv-drop-down-popup>
+  </view>
+</template>
+<script>
+export default {
+  onPageScroll() {
+    this.$refs.dropDown.init()
+  },
+  methods: {
+    change(e) {
+      console.log('弹窗打开状态：', e)
+    }
+  }
+}
+</script>
+```
+
+### 完整示例（内置筛选项） {#full}
+
+使用内置筛选项时，按约定格式传入 `current-drop-item` 与 `@clickItem`，示例结构如下。
+
+```vue
+<template>
+  <view>
+    <uv-drop-down
+      ref="dropDown"
+      sign="dropDown_1"
+      text-active-color="#3c9cff"
+      :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
+      :extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
+      :defaultValue="defaultValue"
+      :custom-style="{padding: '0 30rpx'}"
+      @click="selectMenu"
+    >
+      <uv-drop-down-item name="order" type="2" :label="dropItem('order').label" :value="dropItem('order').value" />
+      <uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').value" />
+      <uv-drop-down-item name="vip_type" type="1" label="VIP文档" :value="dropItem('vip_type').value" />
+    </uv-drop-down>
+    <uv-drop-down-popup
+      sign="dropDown_1"
+      :click-overlay-on-close="true"
+      :currentDropItem="currentDropItem"
+      @clickItem="clickItem"
+      @popupChange="change"
+    />
+  </view>
+</template>
+<script>
+export default {
+  onPageScroll() {
+    this.$refs.dropDown.init()
+  },
+  computed: {
+    dropItem(name) {
+      return (name) => {
+        const result = {}
+        const find = this.result.find(item => item.name === name)
+        if (find) {
+          result.label = find.label
+          result.value = find.value
+        } else {
+          result.label = this[name].label
+          result.value = this[name].value
+        }
+        return result
+      }
+    },
+    currentDropItem() {
+      return this[this.activeName]
+    }
+  },
+  data() {
+    return {
+      defaultValue: [0, 'all', '0'],
+      result: [{ name: 'order', label: '最新发布', value: 'new' }],
+      activeName: 'order',
+      order: {
+        label: '综合排序',
+        value: 'all',
+        activeIndex: 0,
+        color: '#333',
+        activeColor: '#2878ff',
+        child: [
+          { label: '综合排序', value: 'all' },
+          { label: '最新发布', value: 'new' },
+          { label: '低价优先', value: 'money' }
+        ]
+      },
+      type: {
+        label: '文档格式',
+        value: 'all',
+        activeIndex: 0,
+        color: '#333',
+        activeColor: '#2878ff',
+        child: [
+          { label: '全部', value: 'all' },
+          { label: 'PDF', value: 'pdf' },
+          { label: 'WROD', value: 'word' },
+          { label: 'PPT', value: 'ppt' }
+        ]
+      },
+      vip_type: {
+        label: 'VIP文档',
+        value: 0,
+        activeIndex: 0
+      }
+    }
+  },
+  methods: {
+    change(e) {
+      console.log('弹窗打开状态：', e)
+    },
+    selectMenu(e) {
+      const { name, active, type } = e
+      this.activeName = name
+      if (type == 1) {
+        this.clickItem({ name: 'vip_type', label: 'VIP文档', value: e.active ? 1 : 0 })
+      } else {
+        const find = this.result.find(item => item.name == this.activeName)
+        if (find) {
+          const findIndex = this[this.activeName].child.findIndex(
+            item => item.label == find.label && item.value == find.value
+          )
+          this[this.activeName].activeIndex = findIndex
+        } else {
+          this[this.activeName].activeIndex = 0
+        }
+      }
+    },
+    clickItem(e) {
+      let { label, value } = e
+      const findIndex = this.result.findIndex(item => item.name == this.activeName)
+      if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
+        label = this[this.activeName].label
+      }
+      if (findIndex > -1) {
+        this.$set(this.result, findIndex, { name: this.activeName, label, value })
+      } else {
+        this.result.push({ name: this.activeName, label, value })
+      }
+      this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1)
+      uni.showModal({ content: `筛选的值：${JSON.stringify(this.result)}` })
+    }
+  }
+}
+</script>
+```
+
+**current-drop-item 约定格式：**
+
+- `label`：菜单展示文本
+- `value`：当前值
+- `activeIndex`：选中 child 索引
+- `color` / `activeColor`：文本颜色
+- `child`（type=2 时）：筛选项数组 `[{ label, value }]`
+
+## API {#api}
+
+### DropDown Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| sign | String \| Number | UVDROPDOWN | 组件唯一标识，多组件时需不同 |
+| defaultValue | Array | [0,'0','all'] | 默认值，value 在其中表示未选中 |
+| isSticky | Boolean | true | 是否吸顶 |
+| textSize | String | 30rpx | 每项字体大小 |
+| textColor | String | #333 | 每项文本颜色 |
+| textActiveSize | String | 30rpx | 选中项字体大小 |
+| textActiveColor | String | #3c9cff | 选中项文本颜色 |
+| extraIcon | Object | {name:'arrow-down', size:'30rpx', color:'#333'} | 右侧图标，参考 uv-icon |
+| extraActiveIcon | Object | {name:'arrow-up', size:'30rpx', color:'#3c9cff'} | 选中时右侧图标 |
+| customStyle | Object | - | 自定义样式 |
+
+### DropDownItem Props {#item-props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| name | String \| Number | - | 字段标识 |
+| type | String \| Number | - | `1` 无筛选项，`2` 有多个选项 |
+| label | String | - | 展示文本 |
+| value | String \| Number \| null | - | 选项值 |
+| isDrop | Boolean | false | 该项是否打开，可用于重置 |
+
+### DropDownPopup Props {#popup-props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| sign | String \| Number | UVDROPDOWN | 唯一标识，需与 DropDown 一致 |
+| zIndex | String \| Number | 999 | 弹层层级 |
+| opacity | String \| Number | 0.5 | 遮罩透明度 |
+| clickOverlayOnClose | Boolean | true | 点击遮罩是否关闭 |
+| currentDropItem | Object | - | 当前筛选项对象（内置筛选用） |
+| keyName | String | label | 筛选项展示字段名 |
+
+### DropDown Events {#dropdown-events}
+
+| 事件名 | 说明 | 返回 |
+| --- | --- | --- |
+| @selectMenu / @click | 点击每项菜单 | `{ name, active, type }`，active 为是否打开该项 |
+
+### DropDownPopup Events {#popup-events}
+
+| 事件名 | 说明 | 返回 |
+| --- | --- | --- |
+| @clickItem | 点击筛选项 | `{ label, value }` |
+| @popupChange | 弹窗打开/关闭 | `{ show }`，true 或 false |
+
+### DropDown Methods {#dropdown-methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| init | 初始化弹窗位置，页面滚动时调用以更新位置 |
+
+### DropDownPopup Methods {#popup-methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 打开弹窗 |
+| close | 关闭弹窗 |
+
+### DropDownPopup Slots {#popup-slots}
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 自定义弹层内容与逻辑 |

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

@@ -0,0 +1,76 @@
+---
+group: 数据
+category: Components
+title: Empty
+subtitle: 内容为空
+description: 空状态提示组件，内置多种场景图标与文案配置，支持自定义图片与底部插槽扩展。
+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-empty`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `text` 配置提示文字，通过 `mode`（默认 `data`）配置内置图标；也可用 `icon` 指定图片（建议绝对路径，支持 base64）。
+
+```vue
+<uv-empty mode="car" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
+```
+
+### 内置图标 {#icons}
+
+| 名称 | 说明 |
+| --- | --- |
+| car | 购物车为空 |
+| page | 页面不存在 |
+| search | 没有搜索结果 |
+| address | 没有收货地址 |
+| wifi-off | 没有 WiFi |
+| order | 订单为空 |
+| coupon | 没有优惠券 |
+| favor | 无收藏 |
+| permission | 无权限 |
+| history | 无历史记录 |
+| news | 无新闻列表 |
+| message | 消息列表为空 |
+| list | 列表为空（通用） |
+| data | 数据为空（默认，通用） |
+
+## API {#api}
+
+### Empty Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| icon | 内置图标名称或图片路径（建议绝对路径，支持 base64） | String | - | - |
+| text | 文字提示 | String | - | - |
+| textColor | 文字颜色 | String | #c0c4cc | - |
+| textSize | 文字大小 | String \| Number | 14 | - |
+| iconColor | 图标颜色 | String | #c0c4cc | - |
+| iconSize | 图标大小 | String \| Number | 90 | - |
+| mode | 内置图标类型 | String | data | - |
+| width | 图标宽度（px） | String \| Number | 160 | - |
+| height | 图标高度（px） | String \| Number | 160 | - |
+| show | 是否显示组件 | Boolean | true | true \| false |
+| marginTop | 与上一个元素间距（px） | String \| Number | 0 | - |
+
+### Empty Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 组件底部插槽内容 |