@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,156 @@
+---
+group: 表单
+category: Components
+title: Keyboard
+subtitle: 键盘
+description: 自定义键盘面板，含数字键盘、车牌号、身份证号，支持打乱按键顺序。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-keyboard` 通过 ref 调用 `open()` 控制打开/关闭。`mode`：`car` 车牌、`number` 数字、`card` 身份证。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-keyboard`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <view>
+    <uv-keyboard ref="keyboard" mode="car" @change="change" @confirm="confirm"></uv-keyboard>
+    <button @click="open">打开</button>
+  </view>
+</template>
+<script>
+export default {
+  methods: {
+    open() {
+      this.$refs.keyboard.open()
+    },
+    change(e) {
+      console.log('change', e)
+    },
+    confirm() {
+      console.log('confirm')
+    }
+  }
+}
+</script>
+```
+
+### 隐藏数字键盘 "." {#dot-disabled}
+
+`mode="number"` 时有效。
+
+```vue
+<uv-keyboard ref="keyboard" mode="number" :dotDisabled="true"></uv-keyboard>
+```
+
+### 打乱按键顺序 {#random}
+
+```vue
+<uv-keyboard ref="keyboard" mode="number" random></uv-keyboard>
+```
+
+### 监听按键与退格 {#change-backspace}
+
+- `change` 返回按键值，退格键不触发
+- `backspace` 监听退格
+
+```vue
+<template>
+  <view>
+    <uv-keyboard ref="keyboard" mode="number" @change="change" @backspace="backspace"></uv-keyboard>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return { value: '' }
+  },
+  methods: {
+    change(val) {
+      this.value += val
+    },
+    backspace() {
+      if (this.value.length) this.value = this.value.substr(0, this.value.length - 1)
+    }
+  }
+}
+</script>
+```
+
+### 车牌键盘自定义 {#car-custom}
+
+`disKeys` 禁用键，`changeCarMode` 切换中英文，`@changeCarInputMode` 获取当前模式。
+
+```vue
+<uv-keyboard
+  ref="keyboard"
+  mode="car"
+  customabc
+  :disKeys="['京', 2, 'Q', 'X']"
+  @changeCarInputMode="changeCarInputMode"
+>
+  <template v-slot:abc>
+    <text v-if="isABC">省份</text>
+    <text v-else>ABC</text>
+  </template>
+</uv-keyboard>
+```
+
+## API {#api}
+
+### Keyboard Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| mode | 类型 | String | car |
+| dotDisabled | 是否显示 .（mode=number） | Boolean | false |
+| tooltip | 是否显示顶部工具条 | Boolean | true |
+| showTips | 是否显示提示 | Boolean | true |
+| tips | 提示文字 | String | - |
+| random | 是否打乱按键 | Boolean | false |
+| safeAreaInsetBottom | 底部安全区 | Boolean | false |
+| closeOnClickOverlay | 点击遮罩收起 | Boolean | true |
+| overlay | 是否显示遮罩 | Boolean | true |
+| autoChange | car 下输入后是否自动切字母 | Boolean | false |
+| disKeys | car 下禁用键 | Array | - |
+| customabc | car 下自定义中英文切换 | Boolean | false |
+
+### Keyboard Methods {#methods}
+
+| 方法名 | 说明 |
+| --- | --- |
+| open | 弹出键盘 |
+| close | 关闭键盘 |
+| changeCarMode | car 下切换中英文 |
+
+### Keyboard Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 按键点击（不含退格） | 按键值 |
+| @close | 键盘关闭 | - |
+| @confirm | 点击完成 | - |
+| @cancel | 点击取消 | - |
+| @backspace | 退格点击 | - |
+| @changeCarInputMode | car 下中英文切换 | true 英文 / false 中文 |
+
+### Keyboard Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| abc | car 下自定义中英文切换内容 |

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

@@ -0,0 +1,215 @@
+---
+group: 基础
+category: Components
+title: Layout
+subtitle: 布局
+description: 基于 12 分栏的栅格布局，快速创建页面结构。
+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}
+
+通过 12 分栏快速搭建布局，配合 `uv-row`、`uv-col` 使用。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √（仅微信小程序） | √ | √ |
+
+**组件名：** `uv-row`、`uv-col`
+
+## 注意事项 {#notice}
+
+1. 类似宫格布局请用 uv-ui 的 **Grid 宫格** 组件，支持角标，更灵活。
+2. 百度、抖音等小程序因不支持自定义节点虚拟化，可能出现表现异常，开发时需注意。
+3. `justify` 受编译结构影响，**不支持微信小程序**。
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `uv-col` 的 `span` 设置分栏比例，每行 12 等分。
+
+```vue
+<template>
+  <view>
+    <uv-row customStyle="margin-bottom: 10px">
+      <uv-col span="6">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="6">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+    </uv-row>
+    <uv-row customStyle="margin-bottom: 10px">
+      <uv-col span="4">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="4">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="4">
+        <view class="demo-layout bg-purple-dark"></view>
+      </uv-col>
+    </uv-row>
+    <uv-row justify="space-between">
+      <uv-col span="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+    </uv-row>
+  </view>
+</template>
+<style lang="scss">
+.demo-layout { height: 25px; border-radius: 4px; }
+.bg-purple { background: #CED7E1; }
+.bg-purple-light { background: #e5e9f2; }
+.bg-purple-dark { background: #99a9bf; }
+</style>
+```
+
+### 分栏间隔 {#gutter}
+
+通过 `gutter` 设置列间距，每列左右内边距为 `gutter/2`。
+
+```vue
+<template>
+  <view>
+    <uv-row justify="space-between" gutter="10">
+      <uv-col span="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+    </uv-row>
+  </view>
+</template>
+```
+
+### 混合布局 {#mixed}
+
+通过不同 `span` 实现不同比例。
+
+```vue
+<template>
+  <view>
+    <uv-row justify="space-between" gutter="10">
+      <uv-col span="2">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="4">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+      <uv-col span="6">
+        <view class="demo-layout bg-purple-dark"></view>
+      </uv-col>
+    </uv-row>
+  </view>
+</template>
+```
+
+### 分栏偏移 {#offset}
+
+通过 `offset` 指定左侧偏移的栏数。
+
+```vue
+<template>
+  <view>
+    <uv-row customStyle="margin-bottom: 10px">
+      <uv-col span="3" offset="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="3" offset="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+    </uv-row>
+    <uv-row>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="3" offset="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+    </uv-row>
+  </view>
+</template>
+```
+
+### 对齐方式 {#justify}
+
+通过 `justify` 控制水平对齐，效果类似 `justify-content`。**微信小程序不支持**。
+
+可选值：`start`(flex-start)、`end`(flex-end)、`center`、`around`(space-around)、`between`(space-between)。
+
+```vue
+<template>
+  <view>
+    <uv-row justify="space-between" customStyle="margin-bottom: 10px">
+      <uv-col span="3">
+        <view class="demo-layout bg-purple-light"></view>
+      </uv-col>
+      <uv-col span="3">
+        <view class="demo-layout bg-purple"></view>
+      </uv-col>
+    </uv-row>
+  </view>
+</template>
+```
+
+## API {#api}
+
+### Row Props {#row-props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| gutter | String \| Number | 0 | 栅格间隔，左右各为 gutter/2 |
+| justify | String | start | 水平排列，见 Justify Options，微信小程序不支持 |
+| align | String | center | 垂直排列：top \| bottom \| center |
+
+### Col Props {#col-props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| span | String \| Number | 0 | 占据列数 1–12 |
+| offset | String \| Number | 0 | 左侧偏移列数 |
+| justify | String | start | 水平排列 |
+| align | String | stretch | 垂直对齐：top \| center \| bottom \| stretch |
+| textAlign | String | left | 文字对齐：left \| center \| right |
+
+### Justify Options {#justify}
+
+| 值 | 说明 |
+| --- | --- |
+| start / flex-start | 左对齐 |
+| end / flex-end | 右对齐 |
+| center | 居中 |
+| around / space-around | 两侧间隔相等，项目间间隔更大 |
+| between / space-between | 两端对齐，项目间间隔相等 |
+
+### Events {#events}
+
+| 组件 | 事件 | 说明 |
+| --- | --- | --- |
+| Row | @click | 点击 row |
+| Col | @click | 点击 col，会阻止冒泡到 row |

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

@@ -0,0 +1,77 @@
+---
+group: 布局
+category: Components
+title: Line
+subtitle: 线条
+description: 用于分隔内容块的线条组件，支持横向/竖向、细线、虚线等多种配置。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-line` 常用于 **分隔内容区域** 或在页面中绘制简洁的分割线：
+
+- 区块之间的横向分隔
+- 菜单项之间的竖向分隔
+- 需要 0.5px 细线或虚线样式的场景
+
+组件内置常用参数，直接引入即可使用，按需调整颜色、方向与长度。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-line`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <!-- 基础线条 -->
+  <uv-line></uv-line>
+
+  <!-- 自定义颜色 -->
+  <uv-line color="#2979ff"></uv-line>
+
+  <!-- 竖向线条 -->
+  <uv-line direction="col"></uv-line>
+
+  <!-- 指定长度（横向为长度，竖向为高度） -->
+  <uv-line length="50%"></uv-line>
+</template>
+```
+
+### 虚线样式 {#dashed}
+
+```vue
+<uv-line dashed></uv-line>
+```
+
+### 调整边距与细线 {#margin-hairline}
+
+```vue
+<!-- 上下左右留出 30rpx 间距，并使用细线样式 -->
+<uv-line hairline margin="30rpx"></uv-line>
+```
+
+## API {#api}
+
+### Line Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| color | 线条颜色 | String | #d6d7d9 | - |
+| length | 长度：横向时为长度，竖向时为高度；`direction="col"` 时必须设置 | String \| Number | 100% | - |
+| direction | 线条方向 | String | row | row \| col |
+| hairline | 是否显示细边框（0.5px 效果） | Boolean | true | true \| false |
+| margin | 线条与周围元素的间距（字符串形式，如 `30rpx`、`20rpx 30rpx`） | String \| Number | 0 | - |
+| dashed | 是否虚线 | Boolean | false | true \| false |
+| customStyle | 自定义样式对象 | Object | - | - |
+

package/template/docs/uv-ui-docs/line-progress-cn.md

@@ -0,0 +1,132 @@
+---
+group: 数据
+category: Components
+title: LineProgress
+subtitle: 线形进度条
+description: 线形进度展示组件，通过参数配置进度与样式，适用于任务进度等场景。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-line-progress` 用于显示某个任务的完成进度，可配置进度、颜色、高度，并支持通过插槽自定义进度文本展示（部分平台有限制）。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-line-progress`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `percentage` 设置当前进度（0-100），通过 `activeColor` 设置进度条颜色。
+
+```vue
+<template>
+  <uv-line-progress :percentage="30" activeColor="#ff0000"></uv-line-progress>
+</template>
+```
+
+### 不显示百分比 {#show-text}
+
+通过 `showText` 控制是否显示进度条内百分比。
+
+```vue
+<template>
+  <uv-line-progress :percentage="30" :showText="false"></uv-line-progress>
+</template>
+```
+
+### 自定义高度 {#height}
+
+通过 `height` 设置进度条高度。
+
+```vue
+<template>
+  <uv-line-progress :percentage="30" height="30"></uv-line-progress>
+</template>
+```
+
+### 自定义样式（不支持安卓 nvue） {#slot}
+
+将数值放入默认插槽可覆盖默认百分比展示。
+
+```vue
+<template>
+  <uv-line-progress :percentage="30">
+    <text class="uv-percentage-slot">{{ 30 }}%</text>
+  </uv-line-progress>
+</template>
+
+<style lang="scss" scoped>
+.uv-percentage-slot {
+  padding: 1px 5px;
+  background-color: #f9ae3d;
+  color: #fff;
+  border-radius: 100px;
+  font-size: 10px;
+  margin-right: -5px;
+}
+</style>
+```
+
+### 手动加减 {#plus-minus}
+
+通过修改 `percentage` 实现增减（示例使用 `uni.$uv.range`，需按 uv-ui 工具库配置）。
+
+```vue
+<template>
+  <view style="margin-top: 50px;">
+    <uv-line-progress :percentage="percentage" />
+    <view style="display: flex;margin-top: 100px;">
+      <button @click="computedWidth('minus')">减少</button>
+      <button @click="computedWidth('plus')">增加</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      percentage: 30
+    }
+  },
+  methods: {
+    computedWidth(type) {
+      if (type === 'plus') {
+        this.percentage = uni.$uv.range(0, 100, this.percentage + 10)
+      } else {
+        this.percentage = uni.$uv.range(0, 100, this.percentage - 10)
+      }
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### LineProgress Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| activeColor | 进度条激活部分颜色 | String | #19be6b | - |
+| inactiveColor | 进度条底色 | String | #ececec | - |
+| percentage | 进度百分比（0-100） | String \| Number | 0 | - |
+| showText | 是否显示百分比 | Boolean | true | true \| false |
+| height | 进度条高度（单位默认 px） | String \| Number | 12 | - |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### LineProgress Slots {#slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义显示内容，覆盖默认百分比 |

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

@@ -0,0 +1,97 @@
+---
+group: 基础
+category: Components
+title: Link
+subtitle: 超链接
+description: 多端超链接组件，App 内置浏览器打开，小程序复制链接，H5 新窗口打开。
+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}
+
+用于展示可点击的链接，并在不同平台采用符合平台习惯的打开方式：
+
+- **App**：通过 plus 环境打开内置浏览器
+- **小程序**：将链接复制到剪贴板，并提示用户到浏览器打开
+- **H5**：通过 `window.open` 打开链接
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-link`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `href` 设置链接地址，`text` 设置显示内容。
+
+```vue
+<template>
+  <uv-link href="https://www.uvui.cn" text="打开uv-ui文档" @click="click"></uv-link>
+</template>
+<script>
+export default {
+  methods: {
+    click() {
+      console.log('click')
+    }
+  }
+}
+</script>
+```
+
+### 下划线 {#underline}
+
+通过 `under-line`（props 为 `underLine`）控制是否显示下划线。
+
+```vue
+<template>
+  <uv-link href="https://www.uvui.cn" text="打开uv-ui文档" :under-line="true"></uv-link>
+</template>
+```
+
+### 自定义颜色 {#color}
+
+- `color`：文字颜色
+- `line-color`（props 为 `lineColor`）：下划线颜色（默认同文字颜色）
+
+```vue
+<template>
+  <uv-link
+    href="https://www.uvui.cn"
+    text="打开uv-ui文档"
+    color="#19be6b"
+    line-color="#19be6b"
+  ></uv-link>
+</template>
+```
+
+## API {#api}
+
+### Link Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| color | String | - | 文字颜色 |
+| fontSize | String \| Number | 15 | 字体大小（默认单位 px/rpx） |
+| underLine | Boolean | false | 是否显示下划线 |
+| href | String | - | 跳转链接（需包含 http(s)） |
+| mpTips | String | 链接已复制，请在浏览器打开 | 小程序复制到剪贴板后的提示语 |
+| lineColor | String | - | 下划线颜色，默认与 color 一致 |
+| text | String | - | 文本内容（不使用 slot 是因为 nvue 下不易修改颜色） |
+
+### Link Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击链接时触发 | - |
+