@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,185 @@
+---
+group: 基础
+category: Components
+title: Notify
+subtitle: 消息提示
+description: 页面顶部滑出提示条，支持主题方法调用、show 传参、插槽自定义图标与手动关闭。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-notify` 一般用于页面顶部向下滑出一个提示，随后自动收起的场景。支持 ref 调用与主题快捷方法。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-notify`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+使用 `ref` 调用组件 `show()` 方法显示，更多参数见 API。
+
+```vue
+<template>
+  <uv-notify ref="notify" message="Hi uv-ui" type="success"></uv-notify>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.$refs.notify.show()
+  }
+}
+</script>
+```
+
+### 主题方法调用 {#theme}
+
+组件内置主题方法：`primary / success / error / warning`，调用参数为提示文本。
+
+```vue
+<template>
+  <uv-notify ref="notify"></uv-notify>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.$refs.notify.primary('Primary主题')
+  }
+}
+</script>
+```
+
+### 自定义图标 {#icon-slot}
+
+通过插槽自定义图标。
+
+```vue
+<template>
+  <uv-notify ref="notify" :duration="10 * 1000" type="error" message="HI uvui">
+    <template v-slot:icon>
+      <image src="https://via.placeholder.com/50x50.png/2878ff" style="width: 30rpx;height: 30rpx;" mode="aspectFit"></image>
+    </template>
+  </uv-notify>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.$refs.notify.show()
+  }
+}
+</script>
+```
+
+### 使用 show 方法传参 {#show-params}
+
+也可直接在 `show` 中传入配置对象。
+
+```vue
+<template>
+  <uv-notify ref="notify"></uv-notify>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.$refs.notify.show({
+      top: 10,
+      type: 'error',
+      color: '#000',
+      bgColor: '#e8e8e8',
+      message: 'Hi uv-ui',
+      duration: 1000 * 3,
+      fontSize: '20rpx',
+      safeAreaInsetTop: true
+    })
+  }
+}
+</script>
+```
+
+### 手动关闭提示 {#close}
+
+`duration` 控制显示时间，到时会自动关闭；也可调用 `close()` 手动关闭。
+
+```vue
+<template>
+  <uv-notify ref="notify"></uv-notify>
+</template>
+
+<script>
+export default {
+  onReady() {
+    this.$refs.notify.show({
+      top: 10,
+      type: 'error',
+      color: '#000',
+      bgColor: '#e8e8e8',
+      message: 'Hi uv-ui',
+      duration: 1000 * 3,
+      fontSize: '20rpx',
+      safeAreaInsetTop: true
+    })
+    setTimeout(() => {
+      this.$refs.notify.close()
+    }, 1000)
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Notify Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| top | 距顶部距离 | String \| Number | 0 | - |
+| type | 主题 | String | primary | - |
+| color | 字体颜色 | String | #ffffff | - |
+| bgColor | 背景颜色 | String | - | - |
+| message | 展示文字内容 | String | - | - |
+| duration | 展示时长（0 时不消失，ms） | String \| Number | 3000 | - |
+| fontSize | 字体大小（px/rpx） | String \| Number | 15 | - |
+| safeAreaInsetTop | 是否留出顶部安全距离 | Boolean | false | true \| false |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### Show Methods Params {#show-method-params}
+
+与上面的 Notify Props 作用一致（通过 `show({ ... })` 传入）。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| top | 距顶部距离 | String \| Number | 0 |
+| type | 主题 | String | primary |
+| color | 字体颜色 | String | #ffffff |
+| bgColor | 背景颜色 | String | - |
+| message | 展示文字内容 | String | - |
+| duration | 展示时长（ms） | String \| Number | 3000 |
+| fontSize | 字体大小（px/rpx） | String \| Number | 15 |
+| safeAreaInsetTop | 是否留出顶部安全距离 | Boolean | false |
+
+### Notify Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| show | 显示并加载配置 |
+| primary / success / warning / error | 显示对应主题提示 |
+| close | 关闭提示 |
+
+### Notify Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| icon | 自定义图标 |

package/template/docs/uv-ui-docs/number-box-cn.md

@@ -0,0 +1,131 @@
+---
+group: 表单
+category: Components
+title: NumberBox
+subtitle: 步进器
+description: 用于商城选择商品数量等，只能输入大于等于 0 的整数。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-number-box` 通过 `v-model` 双向绑定，`v-model` 会自动更新，无需在 change 中再赋值。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-number-box`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-number-box v-model="value" @change="valChange"></uv-number-box>
+</template>
+<script>
+export default {
+  data() {
+    return { value: 0 }
+  },
+  methods: {
+    valChange(e) {
+      console.log('当前值为: ' + e.value)
+    }
+  }
+}
+</script>
+```
+
+### 步长 {#step}
+
+```vue
+<uv-number-box :step="2"></uv-number-box>
+```
+
+### 范围限制 {#min-max}
+
+```vue
+<uv-number-box :min="1" :max="100"></uv-number-box>
+```
+
+### 固定小数位 {#decimal}
+
+```vue
+<uv-number-box step="0.25" decimal-length="1"></uv-number-box>
+```
+
+### 禁用 {#disabled}
+
+```vue
+<uv-number-box :disabled="true"></uv-number-box>
+<uv-number-box :disabledInput="true"></uv-number-box>
+<uv-number-box :disablePlus="true"></uv-number-box>
+<uv-number-box :disableMinus="true"></uv-number-box>
+<uv-number-box :longPress="false"></uv-number-box>
+```
+
+### 异步变更 {#async}
+
+`asyncChange` 为 true 时需手动控制 value。
+
+```vue
+<uv-number-box v-model="value" :asyncChange="true" @change="onChange"></uv-number-box>
+```
+
+### 自定义 slot {#slot}
+
+```vue
+<uv-number-box v-model="value">
+  <template v-slot:minus>...</template>
+  <template v-slot:input>...</template>
+  <template v-slot:plus>...</template>
+</uv-number-box>
+```
+
+## API {#api}
+
+### NumberBox Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value / v-model | 绑定值 | String \| Number | 1 |
+| name | 标识符 | String \| Number | - |
+| min | 最小值 | String \| Number | 1 |
+| max | 最大值 | String \| Number | - |
+| step | 步长 | String \| Number | 1 |
+| integer | 仅正整数 | Boolean | false |
+| disabled | 禁用 | Boolean | false |
+| disabledInput | 禁止输入框 | Boolean | false |
+| asyncChange | 异步变更 | Boolean | false |
+| inputWidth | 输入框宽度 px | String \| Number | 35 |
+| showMinus | 显示减少按钮 | Boolean | true |
+| showPlus | 显示增加按钮 | Boolean | true |
+| decimalLength | 小数位数 | String \| Number | - |
+| longPress | 允许长按 | Boolean | true |
+| disablePlus | 禁用增加 | Boolean | false |
+| disableMinus | 禁用减少 | Boolean | false |
+
+### NumberBox Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @focus | 获得焦点 | { value, name } |
+| @blur | 失去焦点 | { value, name } |
+| @change | 内容变化 | { value, name } |
+| @overlimit | 超出范围 | type: minus \| plus |
+
+### NumberBox Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| minus | 减少按钮 |
+| input | 输入框 |
+| plus | 增加按钮 |

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

@@ -0,0 +1,122 @@
+---
+group: 反馈
+category: Components
+title: Overlay
+subtitle: 遮罩层
+description: 在弹窗等场景下使用的背景遮罩层组件，用于阻止底层页面操作并突出前景内容。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-overlay` 用于创建全屏遮罩层，常见于：
+
+- 弹窗（如 `uv-popup`、`uv-toast`、`uv-tooltip` 等）背景
+- 高亮某个区域并屏蔽其他区域点击
+
+通过控制 `show` 显示与否，配合 `@click` 处理遮罩点击行为。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-overlay`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `show` 控制遮罩显示，默认点击遮罩时会触发 `@click` 事件。
+
+```vue
+<template>
+  <uv-overlay :show="show" @click="show = false"></uv-overlay>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: true
+    }
+  }
+}
+</script>
+```
+
+### 嵌入内容与阻止冒泡 {#slot}
+
+通过默认插槽在遮罩上方嵌入任意内容，如弹窗卡片。  
+若不希望子内容点击冒泡到遮罩，请使用 `@tap.stop`。
+
+```vue
+<template>
+  <uv-overlay :show="show" @click="show = false">
+    <view class="warp">
+      <view class="rect" @tap.stop></view>
+    </view>
+  </uv-overlay>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.warp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.rect {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+</style>
+```
+
+### 遮罩样式 {#style}
+
+可通过 `duration`、`zIndex`、`opacity` 等属性控制动画时长、层级和透明度。
+
+```vue
+<uv-overlay :show="true" :duration="400" :z-index="999" :opacity="0.3"></uv-overlay>
+```
+
+## API {#api}
+
+### Overlay Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| show | 是否显示遮罩 | Boolean | false | true \| false |
+| zIndex | 遮罩层级 | String \| Number | 10070 | - |
+| duration | 淡入淡出动画时长（ms） | String \| Number | 300 | - |
+| opacity | 不透明度（作为 rgba 第四个参数） | String \| Number | 0.5 | - |
+
+### Overlay Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击遮罩时触发 | - |
+
+### Overlay Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 默认插槽，用于在遮罩层上方嵌入内容 |
+

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

@@ -0,0 +1,177 @@
+---
+group: 数据
+category: Components
+title: Parse
+subtitle: 富文本解析器
+description: 将 HTML 字符串解析为可展示的富文本内容，适用于文章内容、商品详情等复杂富文本场景。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-parse` 适用于 **富文本解析展示** 的场景，例如：
+
+- 文章详情、图文资讯
+- 商品详情描述
+- 含原生 HTML 标签的字符串展示
+
+与官方 `rich-text` 对比：
+
+- 简单、轻量字符串：推荐使用 `rich-text`，性能更好
+- 复杂内容（多图片、多标签、自定义样式）场景：推荐使用 `uv-parse`
+
+> 组件基于优秀开源项目 mp-html 封装，仅对重要能力做简化说明，更多细节可参考 mp-html 官方文档。  
+> 若为 npm 安装 + app-nvue（其他端可忽略），需在 `static` 目录手动复制 `uv-parse` 相关静态资源。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-parse`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `content` 传入需要解析的 HTML 字符串。
+
+```vue
+<template>
+  <view class="uv-content">
+    <uv-parse :content="content"></uv-parse>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: `
+        <p>露从今夜白，月是故乡明</p>
+        <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+      `
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.uv-content {
+  padding: 24rpx;
+}
+</style>
+```
+
+### 长按复制 {#selectable}
+
+通过 `selectable` 开启长按复制。
+
+```vue
+<uv-parse :content="content" :selectable="true"></uv-parse>
+```
+
+### 标签级样式定制（tagStyle） {#tag-style}
+
+通过 `tagStyle` 对特定标签设置样式（字符串形式）。
+
+```vue
+<template>
+  <view class="uv-content">
+    <uv-parse :content="content" :tagStyle="style"></uv-parse>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: `
+        <p>露从今夜白，月是故乡明</p>
+        <img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+      `,
+      style: {
+        p: 'color: red;font-size:32rpx',
+        span: 'font-size: 30rpx'
+      }
+    }
+  }
+}
+</script>
+```
+
+### 父元素统一样式 {#wrapper-style}
+
+通过父容器的样式统一设置字体大小、颜色、行高等。
+
+```vue
+<template>
+  <view class="uv-content">
+    <uv-parse :content="content"></uv-parse>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.uv-content {
+  padding: 24rpx;
+  font-size: 32rpx;
+  color: $uv-content-color;
+  line-height: 1.6;
+}
+</style>
+```
+
+### 懒加载与占位图 {#lazy-load}
+
+```vue
+<uv-parse :content="content" :lazyLoad="true" :loadingImg="loadingImg"></uv-parse>
+```
+
+### 链接跳转与锚点 {#anchor}
+
+- H5 / App（含 nvue）：外链可直接打开
+- 小程序：外链自动复制；`app-id` 可跳转到其他小程序
+
+```html
+<a href="#">跳转到顶部</a>
+<a href="#list">跳转到列表</a>
+<a href="https://www.uvui.cn">外部链接</a>
+<a href="/pages/demo/demo">内部链接</a>
+```
+
+## API {#api}
+
+### Parse Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| container-style | 外层容器样式 | String | - | - |
+| content | 用于渲染的 HTML 字符串 | String | - | - |
+| copy-link | 是否允许外部链接被点击时自动复制 | Boolean | true | true \| false |
+| domain | 主域名（用于补全相对链接） | String | - | - |
+| error-img | 图片加载错误时的占位图 | String | - | - |
+| lazy-load | 是否开启图片懒加载 | Boolean | false | true \| false |
+| loading-img | 图片加载过程中的占位图 | String | - | - |
+| pause-video | 播放一个视频时是否自动暂停其他视频 | Boolean | true | true \| false |
+| preview-img | 是否开启图片点击自动预览 | Boolean | true | true \| false |
+| scroll-table | 是否为每个表格添加横向滚动层 | Boolean | false | true \| false |
+| selectable | 是否开启长按复制内容 | Boolean | false | true |
+| set-title | 是否将 `<title>` 内容设置为页面标题 | Boolean | true | true \| false |
+| show-img-menu | 是否允许图片长按时显示菜单 | Boolean | true | true \| false |
+| tag-style | 设置标签默认样式 | Object | - | - |
+| use-anchor | 是否启用锚点链接 | Boolean | false | true \| false |
+
+### Parse Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @load | DOM 树加载完成时触发（所有节点添加到节点树后，可调用相关 API） | - |
+| @ready | 渲染完成时触发，返回 `boundingClientRect` 查询结果（包含宽高、位置信息），图片较多时可能延时较长 | rect 信息 |
+| @error | 解析/渲染出错时触发 | `object`：`source` 错误来源，`errMsg` 错误信息，`target` 出错标签信息 |
+| @imgtap | 图片被点击时触发 | `object`：`src` 图片链接，`ignore="1"` 时可在事件中阻止预览 |
+| @linktap | 链接被点击时触发 | `object`：包含被点击 `a` 标签的全部属性 |
+| @play | 音视频播放时触发 | - |
+