@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,247 @@
+---
+group: 轮播
+category: Components
+title: Swiper
+subtitle: 轮播图
+description: 导航轮播与 Banner 展示组件，支持标题、指示器、加载中、视频轮播、自定义指示器与卡片式效果。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-swiper` 一般用于导航轮播、Banner 展示等场景，可开箱即用，特点包括：
+
+- 自定义指示器模式，可配置指示器样式
+- 支持 3D 卡片式轮播
+- 支持显示标题、加载状态和嵌入视频
+
+注意：
+
+- App vue、百度/支付宝/头条/QQ 小程序中原生 `swiper` 不支持内嵌 `video`、`map` 等原生组件；  
+  微信基础库 2.4.4+ 和 App nvue 2.1.5+ 支持内嵌原生组件。
+- `uv-swiper` 基于 uni 官方 `swiper` 封装，更多特性可参考 uni 官方文档。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-swiper`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `list` 传入轮播图列表，数组元素为图片地址字符串。
+
+```vue
+<template>
+  <uv-swiper :list="list"></uv-swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper3.png'
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 带标题 {#title}
+
+当 `list` 为对象数组时，可通过 `showTitle` 显示标题，并用 `keyName` 指定图片字段、`titleStyle` 控制标题样式。
+
+```vue
+<template>
+  <uv-swiper
+    :list="list"
+    keyName="image"
+    showTitle
+    :title-style="{ color: 'red', textAlign: 'center' }"
+    :autoplay="false"
+    circular
+  ></uv-swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          title: '丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由'
+        },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          title: '明月几时有？把酒问青天'
+        },
+        {
+          image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+          title: '不知天上宫阙，今夕是何年'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 带指示器 {#indicator}
+
+通过 `indicator` 开启指示器，`indicatorMode` 控制类型：`line / dot`。
+
+```vue
+<template>
+  <uv-swiper :list="list" indicator indicatorMode="line" circular></uv-swiper>
+</template>
+```
+
+### 加载中 {#loading}
+
+通过 `loading` 控制加载状态。
+
+```vue
+<uv-swiper :list="[]" loading></uv-swiper>
+``>
+
+### 嵌入视频与指定类型 {#video}
+
+`list` 元素可为包含 `url/title/poster` 的对象，并通过 `keyName="url"` 指定字段；  
+必要时可通过 `type: 'video' | 'image'` 显式指定类型。
+
+```vue
+<template>
+  <uv-swiper :list="list" keyName="url" :autoplay="false"></uv-swiper>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
+          title: '昨夜星辰昨夜风，画楼西畔桂堂东',
+          poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+          type: 'video'
+        },
+        {
+          url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+          title: '身无彩凤双飞翼，心有灵犀一点通',
+          type: 'image'
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义指示器 {#custom-indicator}
+
+可通过 `indicator` 插槽自定义指示点或数字样式。
+
+```vue
+<template>
+  <view class="uv-demo-block">
+    <text class="uv-demo-block__title">自定义指示器</text>
+    <uv-swiper :list="list1" @change="e => (current1 = e.current)" :autoplay="false">
+      <template v-slot:indicator>
+        <view class="indicator">
+          <view
+            class="indicator__dot"
+            v-for="(item, index) in list1"
+            :key="index"
+            :class="[index === current1 && 'indicator__dot--active']"
+          ></view>
+        </view>
+      </template>
+    </uv-swiper>
+  </view>
+</template>
+```
+
+### 卡片式轮播 {#card}
+
+通过 `previousMargin / nextMargin / radius` 等参数实现卡片式轮播。
+
+```vue
+<template>
+  <!-- #ifndef APP-NVUE || MP-TOUTIAO -->
+  <view class="uv-demo-block">
+    <text class="uv-demo-block__title">卡片式</text>
+    <uv-swiper
+      :list="list"
+      previousMargin="30"
+      nextMargin="30"
+      circular
+      :autoplay="false"
+      radius="5"
+      bgColor="#ffffff"
+    ></uv-swiper>
+  </view>
+  <!-- #endif -->
+</template>
+```
+
+## API {#api}
+
+### Swiper Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| list | 轮播图数据 | Array | - | - |
+| indicator | 是否显示面板指示器 | Boolean | false | true \| false |
+| indicatorActiveColor | 指示器激活颜色 | String | #FFFFFF | - |
+| indicatorInactiveColor | 指示器非激活颜色 | String | rgba(255, 255, 255, 0.35) | - |
+| indicatorStyle | 指示器样式（支持 bottom/left/right 定位） | String \| Object | - | - |
+| indicatorMode | 指示器模式 | String | line | line \| dot |
+| autoplay | 是否自动切换 | Boolean | true | true \| false |
+| current | 当前所在滑块 index | Number \| String | 0 | - |
+| currentItemId | 当前滑块 item-id（不能与 current 同时指定） | String | - | - |
+| interval | 自动切换时间间隔（ms） | String \| Number | 3000 | - |
+| duration | 切换过程时间（ms，nvue 不支持） | String \| Number | 300 | - |
+| circular | 播放到末尾后是否回到开头 | Boolean | false | true \| false |
+| vertical | 是否纵向滑动 | Boolean | false | true \| false |
+| previousMargin | 前边距（露出前一项一部分） | String \| Number | 0 | - |
+| nextMargin | 后边距（露出后一项一部分） | String \| Number | 0 | - |
+| acceleration | 是否根据滑动速度连续滑动多屏（仅支付宝小程序） | Boolean | false | true \| false |
+| displayMultipleItems | 同时显示的滑块数量（nvue/支付宝不支持） | Number | 1 | - |
+| easingFunction | 切换缓动动画类型（部分平台支持） | String | default | 参考官方 swiper |
+| keyName | 对象数组中图片字段名 | String | url | - |
+| imgMode | 图片裁剪模式（不建议使用 `widthFix`） | String | aspectFill | - |
+| height | 组件高度 | String \| Number | 130 | - |
+| bgColor | 背景颜色 | String | #f3f4f6 | - |
+| radius | 圆角 | String \| Number | 4 | - |
+| loading | 是否加载中 | Boolean | false | true \| false |
+| showTitle | 是否显示标题（要求对象中有 `title`） | Boolean | false | - |
+| titleStyle | 标题样式 | Object | - | - |
+
+### Swiper Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击轮播图触发 | index：点击的图片索引（从 0 开始） |
+| @change | 轮播图切换时触发 | index：当前图片索引（从 0 开始） |
+
+### SwiperIndicator Props {#indicator-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| length | 轮播长度 | String \| Number | 0 | - |
+| current | 当前激活索引 | String \| Number | 0 | - |
+| indicatorActiveColor | 指示器非激活颜色 | String | - | - |
+| indicatorInactiveColor | 指示器激活颜色 | String | - | - |
+| indicatorStyle | 指示器形式 | String | line | line \| dot |

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

@@ -0,0 +1,136 @@
+---
+group: 表单
+category: Components
+title: Switch
+subtitle: 开关选择器
+description: 在打开和关闭状态之间切换，支持加载、禁用、自定义尺寸和颜色、异步控制等。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-switch` 通过 `v-model` 绑定布尔值，用户切换时自动更新。无需监听 `change` 也能获取当前状态。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-switch`
+
+## 注意事项 {#notice}
+
+- `v-model` 绑定的值必须为 `inactiveValue`、`activeValue` 之一
+- `inactiveValue` 与 `activeValue` 不能相等
+- 需使用 `v-model`，不能使用 `:value`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-switch v-model="value"></uv-switch>
+</template>
+<script>
+export default {
+  data() {
+    return { value: true }
+  }
+}
+</script>
+```
+
+### 加载中 {#loading}
+
+```vue
+<uv-switch v-model="value" loading></uv-switch>
+```
+
+### 禁用 {#disabled}
+
+```vue
+<uv-switch v-model="value" disabled></uv-switch>
+<uv-switch v-model="value2" disabled></uv-switch>
+```
+
+### 自定义尺寸 {#size}
+
+```vue
+<uv-switch v-model="value" size="28"></uv-switch>
+<uv-switch v-model="value2" size="20"></uv-switch>
+<uv-switch v-model="value2" size="30rpx"></uv-switch>
+```
+
+### 自定义颜色 {#active-color}
+
+```vue
+<uv-switch v-model="value" activeColor="#f56c6c"></uv-switch>
+```
+
+### 自定义开关样式 {#custom-style}
+
+```vue
+<uv-switch
+  v-model="value"
+  inactive-color="#f3f4f6"
+  active-color="#3c9cff"
+></uv-switch>
+```
+
+### 异步控制 {#async}
+
+需添加 `asyncChange`，否则会先更新 `v-model` 且无法控制。
+
+```vue
+<template>
+  <uv-switch v-model="value" asyncChange @change="asyncChange"></uv-switch>
+</template>
+<script>
+export default {
+  data() {
+    return { value: true }
+  },
+  methods: {
+    asyncChange(e) {
+      uni.showModal({
+        content: e ? '确定要打开吗' : '确定要关闭吗',
+        success: (res) => {
+          if (res.confirm) {
+            this.value = e
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Switch Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| v-model | 双向绑定值（只能 v-model） | Boolean \| String \| Number | false | - |
+| loading | 是否加载中 | Boolean | false | true \| false |
+| disabled | 是否禁用 | Boolean | false | true \| false |
+| size | 开关尺寸 | String \| Number | 25 | - |
+| activeColor | 打开时背景色 | String | #2979ff | - |
+| inactiveColor | 关闭时背景色 | String | #ffffff | - |
+| activeValue | 打开时的值 | Boolean \| String \| Number | true | - |
+| inactiveValue | 关闭时的值 | Boolean \| String \| Number | false | - |
+| asyncChange | 是否异步变更，开启需手动控制值 | Boolean | false | true \| false |
+| space | 圆点与外边框距离 | String \| Number | 0 | - |
+
+### Switch Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 打开或关闭时 | value：打开为 activeValue，关闭为 inactiveValue |
+| @input | 打开或关闭时（未开启异步） | value |

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

@@ -0,0 +1,224 @@
+---
+group: 导航
+category: Components
+title: Tabbar
+subtitle: 底部导航栏
+description: 自定义底部导航栏组件，支持字体图标/图片图标、徽标、动态菜单及切换拦截等能力。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-tabbar` 提供自定义 Tabbar 的能力，用于 App/H5/小程序等多端统一的底部导航：
+
+- 图标支持字体图标（内置/扩展）或图片
+- 菜单可动态增减
+- 切换前可拦截（鉴权等场景）
+- 支持角标/数字徽标
+- 有效防止底部区域高度塌陷
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √（仅微信小程序） | √ | √ |
+
+**组件名：** `uv-tabbar`、`uv-tabbar-item`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+推荐使用 `list` 数组循环构建，这里先展示基础写法，通过 `value` + `@change` 控制当前选中项。
+
+```vue
+<template>
+  <uv-tabbar :value="value" @change="index => (value = index)">
+    <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+    <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+    <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+  </uv-tabbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 0
+    }
+  }
+}
+</script>
+```
+
+### 显示徽标 {#badge}
+
+通过 `dot` 添加小圆点，通过 `badge` 添加数字徽标。
+
+```vue
+<template>
+  <uv-tabbar :value="value" @change="index => (value = index)">
+    <uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
+    <uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
+    <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+  </uv-tabbar>
+</template>
+```
+
+### 使用 name 匹配标签 {#name}
+
+当 `uv-tabbar-item` 设置了 `name` 时，`value` 也需要使用同名值；`@change` 返回 `name`。
+
+```vue
+<template>
+  <uv-tabbar :value="value" @change="name => (value = name)">
+    <uv-tabbar-item text="首页" icon="home" name="home"></uv-tabbar-item>
+    <uv-tabbar-item text="放映厅" icon="photo" name="photo"></uv-tabbar-item>
+    <uv-tabbar-item text="直播" icon="play-right" name="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="我的" icon="account" name="account"></uv-tabbar-item>
+  </uv-tabbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 'photo'
+    }
+  }
+}
+</script>
+```
+
+### 自定义图标 {#custom-icon}
+
+通过 `active-icon` / `inactive-icon` 插槽自定义图标，一旦自定义，`icon` 属性将不再生效。
+
+```vue
+<template>
+  <uv-tabbar :value="value" @change="index => (value = index)">
+    <uv-tabbar-item text="首页">
+      <template v-slot:active-icon>
+        <image class="icon" src="https://cdn.uviewui.com/uview/common/bell-selected.png"></image>
+      </template>
+      <template v-slot:inactive-icon>
+        <image class="icon" src="https://cdn.uviewui.com/uview/common/bell.png"></image>
+      </template>
+    </uv-tabbar-item>
+    <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+    <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+  </uv-tabbar>
+</template>
+
+<style scoped>
+.icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+</style>
+```
+
+### 拦截切换事件 {#intercept}
+
+通过 `@change` 回调可以实现登录拦截等逻辑。
+
+```vue
+<template>
+  <uv-tabbar :value="value" @change="change">
+    <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
+    <uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
+    <uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
+    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
+  </uv-tabbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: 0
+    }
+  },
+  methods: {
+    change(e) {
+      if (e === 1) {
+        return uni.showToast({
+          icon: 'none',
+          title: '请您先登录'
+        })
+      }
+      this.value = e
+    }
+  }
+}
+</script>
+```
+
+### 去除顶部边框与固定在底部 {#border-fixed}
+
+```vue
+<!-- 无边框 -->
+<uv-tabbar :value="value" :border="false" @change="index => (value = index)">
+  ...
+</uv-tabbar>
+
+<!-- 固定在屏幕底部（默认 fixed=true） -->
+<uv-tabbar :value="value" :fixed="true" @change="index => (value = index)">
+  ...
+</uv-tabbar>
+```
+
+## API {#api}
+
+### TabBar Props {#tabbar-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value | 当前匹配项的 index 或 name（当子项设置 `name` 时按 name 匹配） | String \| Number | null | - |
+| safeAreaInsetBottom | 是否为 iPhone X 留出底部安全距离 | Boolean | true | true \| false |
+| border | 是否显示上方边框 | Boolean | true | true \| false |
+| zIndex | 元素层级 `z-index` | String \| Number | 1 | - |
+| activeColor | 选中标签颜色 | String | #1989fa | - |
+| inactiveColor | 未选中标签颜色 | String | #7d7e80 | - |
+| fixed | 是否固定在底部 | Boolean | true | true \| false |
+| placeholder | `fixed` 时是否生成等高占位元素防止塌陷 | Boolean | true | true \| false |
+| iconSize | 图标大小（自定义图片图标无效） | String \| Number | 20 | - |
+| customStyle | 自定义样式 | Object | - | - |
+
+### TabBarItem Props {#tabbar-item-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| name | 标签名称（与 `value` 匹配） | String \| Number | null | - |
+| icon | 内置图标或图片地址 | String | - | - |
+| iconSize | 图标大小 | String \| Number | 20 | - |
+| badge | 右上角徽标内容 | String \| Number | null | - |
+| dot | 是否显示圆点（会覆盖 `badge`） | Boolean | false | true \| false |
+| text | 描述文本 | String | - | - |
+| badgeStyle | 徽标位置样式（可设置 top/right） | Object \| String | `top: 6px;right:2px;` | - |
+
+### TabBar Events {#tabbar-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 切换选项时触发 | index：当前要切换项的 index 或 name |
+
+### TabBarItem Events {#tabbar-item-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击某个选项时触发 | index：当前要切换项的 index 或 name |
+
+### TabBarItem Slots {#tabbar-item-slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| active-icon | 选中状态自定义图标 |
+| inactive-icon | 未选中状态自定义图标 |
+| text | 自定义文本内容 |