@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,212 @@
+---
+group: 反馈
+category: Components
+title: Modal
+subtitle: 模态框
+description: 用于消息提示与确认操作的弹窗组件，支持富文本、自定义按钮、异步关闭与缩放动画。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-modal` 用于消息提示、消息确认、在当前页面内完成特定交互操作，类似 `uni.showModal` 的组件化版本：
+
+- 支持标题、内容、确认/取消按钮
+- 支持 slot 传入富文本内容
+- 支持自定义确认按钮、异步关闭、缩放效果等
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-modal`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+默认只有一个确认按钮，需至少配置 `content`；通过 `ref` 调用 `open()` 控制显示。
+
+```vue
+<template>
+  <view>
+    <uv-modal ref="modal" title="标题" content="不知天上宫阙，今夕是何年" @confirm="confirm"></uv-modal>
+    <button @click="openModal">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    openModal() {
+      this.$refs.modal.open()
+    },
+    confirm() {
+      console.log('点击确认按钮')
+    }
+  }
+}
+</script>
+```
+
+### 传入富文本内容 {#rich-text}
+
+通过 slot + `rich-text` 传入富文本内容。
+
+```vue
+<template>
+  <view>
+    <uv-modal ref="modal" title="标题" @confirm="confirm">
+      <view class="slot-content">
+        <rich-text :nodes="content"></rich-text>
+      </view>
+    </uv-modal>
+    <button @click="openModal">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: `<p style="max-height:30px;overflow:auto;">空山新雨后<br>天气晚来秋空山</p>`
+    }
+  },
+  methods: {
+    openModal() {
+      this.$refs.modal.open()
+    },
+    confirm() {
+      console.log('点击确认按钮')
+    }
+  }
+}
+</script>
+```
+
+### 自定义确定按钮 {#confirm-button}
+
+常用于微信小程序弹窗授权等场景，通过 `confirmButton` 插槽自定义按钮，并手动 `close()`。
+
+```vue
+<template>
+  <view>
+    <uv-modal ref="modal" title="水调歌头" content="不知天上宫阙，今夕是何年" @confirm="confirm">
+      <template v-slot:confirmButton>
+        <button type="default" @click="closeModal">自定义按钮</button>
+      </template>
+    </uv-modal>
+    <button @click="openModal">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    openModal() {
+      this.$refs.modal.open()
+    },
+    closeModal() {
+      this.$refs.modal.close()
+    },
+    confirm() {
+      console.log('点击确认按钮')
+    }
+  }
+}
+</script>
+```
+
+### 异步关闭 {#async-close}
+
+仅对“确定”按钮生效。设置 `asyncClose` 为 true 后，点击确定会显示 loading，需手动调用 `close()` 或 `closeLoading()`。
+
+```vue
+<template>
+  <view>
+    <uv-modal
+      ref="modal"
+      title="水调歌头"
+      content="不知天上宫阙，今夕是何年"
+      :asyncClose="true"
+      @confirm="confirm"
+    ></uv-modal>
+    <button @click="openModal">打开</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    openModal() {
+      this.$refs.modal.open()
+    },
+    confirm() {
+      console.log('点击确认按钮')
+      setTimeout(() => {
+        this.$refs.modal.close()
+      }, 2000)
+    }
+  }
+}
+</script>
+```
+
+### 控制宽度与缩放效果 {#width-zoom}
+
+```vue
+<uv-modal ref="modal" content="不知天上宫阙，今夕是何年" width="500rpx"></uv-modal>
+<uv-modal ref="modal" content="不知天上宫阙，今夕是何年" :zoom="false"></uv-modal>
+```
+
+## API {#api}
+
+### Modal Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 标题内容 | String | - | - |
+| content | 文本内容（传入 slot 时无效） | String | - | - |
+| confirmText | 确认按钮文字 | String | 确认 | - |
+| cancelText | 取消按钮文字 | String | 取消 | - |
+| showConfirmButton | 是否显示确认按钮 | Boolean | true | true \| false |
+| showCancelButton | 是否显示取消按钮 | Boolean | false | true \| false |
+| confirmColor | 确认按钮颜色 | String | #2979ff | - |
+| cancelColor | 取消按钮颜色 | String | #606266 | - |
+| buttonReverse | 是否对调确认和取消位置 | Boolean | false | true \| false |
+| zoom | 是否开启缩放模式 | Boolean | true | true \| false |
+| asyncClose | 是否异步关闭（仅确认按钮） | Boolean | false | true \| false |
+| closeOnClickOverlay | 是否允许点击遮罩关闭 | Boolean | true | true \| false |
+| negativeTop | 往上偏移值（避免与键盘重合；单位任意） | String \| Number | 0 | - |
+| width | 宽度（不支持百分比，px/rpx） | String \| Number | 650rpx | - |
+| zIndex | 弹出层层级 | Number \| String | 10075 | - |
+| align | 文本对齐方式 | String | left | left \| center \| right |
+| textStyle | 文本扩展样式 | Object | - | - |
+
+### Modal Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 打开模态框 |
+| close | 关闭模态框 |
+| closeLoading | 在 `asyncClose` 场景下仅关闭 loading 状态 |
+
+### Modal Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @confirm | 点击确认按钮时触发 | - |
+| @cancel | 点击取消按钮时触发 | - |
+| @close | 关闭模态框时触发 | - |
+
+### Modal Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义内容（通常为富文本） |
+| confirmButton | 自定义确认按钮（如小程序授权按钮等） |

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

@@ -0,0 +1,171 @@
+---
+group: 导航
+category: Components
+title: Navbar
+subtitle: 自定义导航栏
+description: 在需要自定义头部导航时使用的组件，支持标题、返回按钮、自定义左右内容和多种背景样式。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-navbar` 常用于需要 **自定义导航栏** 的场景，例如：
+
+- 使用自定义头部而隐藏 uni-app 默认导航栏
+- 需要更复杂的返回区域、自定义按钮、搜索框等内容
+
+一般情况建议优先使用 uni-app 自带导航栏，只有在定制需求较强时再使用本组件。
+
+> 自定义导航栏前，需要在 `pages.json` 中关闭系统导航栏并设置状态栏文字颜色。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-navbar`
+
+## 预置配置（pages.json） {#pages-json}
+
+```json
+"pages": [
+  {
+    "path": "/pages/navbar/index",
+    "style": {
+      "navigationStyle": "custom",
+      "navigationBarTextStyle": "white"
+    }
+  }
+]
+```
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+默认仅显示一个左侧返回箭头，并在点击时触发 `@leftClick`。
+
+```vue
+<template>
+  <view>
+    <uv-navbar title="个人中心" @leftClick="leftClick"></uv-navbar>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    leftClick() {
+      console.log('leftClick')
+    }
+  }
+}
+</script>
+```
+
+### 自定义左侧区域 {#left-slot}
+
+通过 `left` 插槽可将返回区域全部自定义。
+
+```vue
+<template>
+  <view>
+    <uv-navbar leftText="返回" :fixed="false" title="个人中心" :safeAreaInsetTop="false">
+      <template v-slot:left>
+        <view class="uv-nav-slot">
+          <uv-icon name="arrow-left" size="19"></uv-icon>
+          <uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
+          <uv-icon name="home" size="20"></uv-icon>
+        </view>
+      </template>
+    </uv-navbar>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@mixin flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+.uv-nav-slot {
+  @include flex;
+  align-items: center;
+  justify-content: space-between;
+  border-width: 0.5px;
+  border-radius: 100px;
+  border-color: #dadbde;
+  padding: 3px 7px;
+  opacity: 0.8;
+}
+</style>
+```
+
+### 导航栏背景颜色 {#bg}
+
+通过 `bgColor` 支持普通颜色、透明度、渐变色或背景图片。
+
+```vue
+<template>
+  <view>
+    <!-- 普通颜色 -->
+    <uv-navbar title="个人中心" bgColor="#c0c4cc"></uv-navbar>
+    <!-- 透明背景 -->
+    <uv-navbar title="个人中心" bg-color="rgba(0,0,0,.5)"></uv-navbar>
+    <!-- 渐变色 -->
+    <uv-navbar
+      title="个人中心"
+      bg-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
+    ></uv-navbar>
+    <!-- 背景图片 -->
+    <uv-navbar
+      title="个人中心"
+      bg-color="https://via.placeholder.com/400x200.png/3c9cff/fff"
+      imgMode="aspectFit"
+    ></uv-navbar>
+  </view>
+</template>
+``>
+
+## API {#api}
+
+### NavBar Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 导航栏标题（为空字符时隐藏标题占位） | String | - | - |
+| safeAreaInsetTop | 是否开启顶部安全区适配 | Boolean | true | true \| false |
+| placeholder | 固定在顶部时是否生成等高占位元素防塌陷 | Boolean | false | true \| false |
+| fixed | 是否固定在顶部 | Boolean | true | true \| false |
+| border | 是否显示底部下边框 | Boolean | false | true \| false |
+| leftIcon | 左侧返回图标（仅内置图标） | String | arrow-left | - |
+| leftText | 左侧提示文字 | String | - | - |
+| rightText | 右侧文字 | String | - | - |
+| rightIcon | 右侧图标（仅内置图标） | String | - | - |
+| bgColor | 背景设置（支持普通色、渐变、图片） | String | #ffffff | - |
+| imgMode | 当 `bgColor` 为图片时的裁剪模式 | String | aspectFill | 参考 uni `image` |
+| titleWidth | 标题最大宽度（超出省略号，px/rpx） | String \| Number | 400rpx | - |
+| height | 导航栏高度（不含状态栏），内部会自动加上状态栏高度 | String \| Number | 44px | - |
+| leftIconSize | 左侧图标大小 | String \| Number | 20px | - |
+| leftIconColor | 左侧图标颜色 | String | #303133 | - |
+| autoBack | 点击左侧区域时是否自动返回上一页 | Boolean | false | true \| false |
+| titleStyle | 标题样式（对象或字符串） | String \| Object | - | - |
+
+### NavBar Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @leftClick | 点击左侧区域 | - |
+| @rightClick | 点击右侧区域 | - |
+
+### NavBar Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| left | 自定义左侧区域内容 |
+| right | 自定义右侧区域内容 |
+| center | 自定义中部内容（可替代默认标题） |

package/template/docs/uv-ui-docs/no-network-cn.md

@@ -0,0 +1,112 @@
+---
+group: 反馈
+category: Components
+title: NoNetwork
+subtitle: 无网络提示
+description: 自动检测网络状态的全局遮罩组件，无需额外配置即可在断网时覆盖页面并提供重试入口。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-no-network` 用于全局无网络提示场景：
+
+- 断网时自动以 `fixed` 定位覆盖当前页面内容，恢复网络后自动隐藏
+- App 端内置 5+ 接口，支持直接跳转系统设置，方便用户打开网络
+
+应用有网络时不会触发本组件。如需测试，请关闭手机的数据连接和 WiFi。  
+由于普通组件无法覆盖原生组件，本组件不适用于包含 `video`、`map` 等原生组件的页面，可用 `cover-view` 自行实现。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-no-network`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+无需额外配置，直接引入组件并监听断网/重试事件。
+
+```vue
+<template>
+  <view>
+    <uv-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></uv-no-network>
+    <!-- 下方是自己的业务代码 -->
+    <view class="uv-content">
+      <view class="uv-content__circle">
+        <uv-icon name="checkbox-mark" color="#fff" size="30"></uv-icon>
+      </view>
+      <text class="uv-content__normal">网络正常</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    disconnected() {
+      console.log('disconnected')
+    },
+    connected() {
+      console.log('connected')
+    },
+    retry() {
+      console.log('retry')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@mixin flex($direction: row) {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: $direction;
+}
+.uv-content {
+  padding: 150px 60px 0;
+  @include flex(column);
+  align-items: center;
+  justify-content: center;
+  &__circle {
+    background-color: #5ac725;
+    @include flex;
+    border-radius: 100px;
+    width: 60px;
+    height: 60px;
+    align-items: center;
+    justify-content: center;
+  }
+  &__normal {
+    font-size: 30rpx;
+    color: #5ac725;
+    margin-top: 30rpx;
+  }
+}
+</style>
+```
+
+## API {#api}
+
+### NoNetwork Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| tips | 没有网络时的提示语 | String | 哎呀，网络信号丢失 | - |
+| image | 无网络图片提示（src 或 base64） | String | - | - |
+
+### NoNetwork Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @retry | 用户点击“重试”按钮时触发 | - |
+| @connected | `retry` 后有网络时触发 | - |
+| @disconnected | `retry` 后仍无网络时触发 | - |

package/template/docs/uv-ui-docs/notice-bar-cn.md

@@ -0,0 +1,119 @@
+---
+group: 导航
+category: Components
+title: NoticeBar
+subtitle: 滚动通知
+description: 用于滚动公告/通知展示，支持横向/竖向滚动、关闭、跳转与速度配置。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-notice-bar` 常用于滚动公告等场景，支持多种模式与配置。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-notice-bar`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `text` 设置需要滚动的内容。
+
+```vue
+<template>
+  <view>
+    <uv-notice-bar :text="text"></uv-notice-bar>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: 'uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
+    }
+  }
+}
+</script>
+```
+
+### 竖向滚动 {#column}
+
+将 `direction` 设为 `column`（默认为 `row`）。注意：column 模式下 `text` 需为数组。
+
+```vue
+<template>
+  <view>
+    <uv-notice-bar :text="text" direction="column"></uv-notice-bar>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: ['uv-ui众多组件覆盖开发过程的各个需求', '组件功能丰富，多端兼容', '让您快速集成，开箱即用']
+    }
+  }
+}
+</script>
+```
+
+### 可关闭 {#closable}
+
+通过 `mode="closable"` 显示右侧关闭按钮。
+
+```vue
+<template>
+  <uv-notice-bar :text="text" mode="closable"></uv-notice-bar>
+</template>
+```
+
+### 配置滚动速度与跳转 {#speed-url}
+
+`speed` 配置横向滚动速度；`url` 配置跳转。
+
+```vue
+<template>
+  <uv-notice-bar :text="text" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></uv-notice-bar>
+</template>
+```
+
+## API {#api}
+
+### NoticeBar Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| text | 显示内容（direction=column 需为数组；row 需为字符串） | Array \| String | - | - |
+| direction | 滚动模式：row 横向 / column 竖向 | String | row | row \| column |
+| step | direction=row 时是否步进滚动 | Boolean | false | true \| false |
+| icon | 左侧音量图标（不显示可传 false 或空） | String | volume | - |
+| mode | 通告模式：link 显示右箭头 / closable 显示关闭图标 | String | - | link \| closable |
+| color | 文字颜色 | String | #f9ae3d | - |
+| bgColor | 背景颜色 | String | #fdf6ec | - |
+| speed | 水平滚动速度（每秒滚动 px/rpx） | String \| Number | 80 | - |
+| fontSize | 字体大小 | String \| Number | 14 | - |
+| duration | 滚动周期时长（ms） | String \| Number | 2000 | - |
+| url | 跳转页面路径 | String | - | - |
+| linkType | 页面跳转类型 | String | navigateTo | - |
+| disableTouch | 是否禁止手动滑动切换（仅 column 生效） | Boolean | true | true \| false |
+| disableScroll | 是否禁止自动滚动（仅 column 生效） | Boolean | false | true \| false |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### NoticeBar Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击通告文字触发 | index：点击的 text 索引 |
+| @close | 点击右侧关闭图标触发 | - |
+| @change | direction=column 滚动时触发 | index：索引 |