@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,260 @@
+---
+group: 导航
+category: Components
+title: Tabs
+subtitle: 标签选项卡
+description: 支持多标签滚动、粘性吸顶、徽标、禁用状态和丰富样式定制的选项卡组件。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-tabs` 用于在同一页面中 **多个内容区域切换展示** 的场景：
+
+- 标签较多时可左右滑动
+- 标签较少时可居中展示并禁止滚动
+- 可与 `uv-sticky` 组合实现粘性吸顶
+- 支持徽标、禁用状态、自定义样式和右侧插槽
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-tabs`
+
+> 说明：
+> 1. 内部使用 `scroll-view`，H5 等平台可能出现滚动条，建议全局引入基础样式去除滚动条；
+> 2. 在弹窗等场景显示异常时，需使用 `v-if` 控制挂载时机。
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `list` 配置标签数组，通过 `@click` 获取当前项信息。  
+若需要更精细控制，结合 `current` + `@change` 使用。
+
+```vue
+<template>
+  <uv-tabs :list="list" @click="click"></uv-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { name: '关注' },
+        { name: '推荐' },
+        { name: '电影' },
+        { name: '科技' },
+        { name: '音乐' },
+        { name: '美食' },
+        { name: '文化' },
+        { name: '财经' },
+        { name: '手工' }
+      ]
+    }
+  },
+  methods: {
+    click(item) {
+      console.log('item', item)
+    }
+  }
+}
+</script>
+```
+
+### 粘性布局（配合 uv-sticky） {#sticky}
+
+```vue
+<template>
+  <uv-sticky bgColor="#fff">
+    <uv-tabs :list="list"></uv-tabs>
+  </uv-sticky>
+</template>
+```
+
+### 显示徽标 {#badge}
+
+通过 `list` 中的 `badge` 字段设置红点或数字。
+
+```vue
+<template>
+  <uv-tabs :list="list"></uv-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { name: '关注' },
+        {
+          name: '推荐',
+          badge: {
+            isDot: true
+          }
+        },
+        {
+          name: '电影',
+          badge: {
+            value: 5
+          }
+        },
+        { name: '科技' },
+        { name: '音乐' },
+        { name: '美食' },
+        { name: '文化' },
+        { name: '财经' },
+        { name: '手工' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 禁用某些标签 {#disabled}
+
+```vue
+<template>
+  <uv-tabs :list="list"></uv-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        { name: '关注', disabled: true },
+        {
+          name: '推荐',
+          badge: { isDot: true }
+        },
+        {
+          name: '电影',
+          badge: { value: 5 }
+        },
+        { name: '科技', disabled: true },
+        { name: '音乐' },
+        { name: '美食' },
+        { name: '文化' },
+        { name: '财经' },
+        { name: '手工' }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 自定义样式与滑块背景图 {#style}
+
+通过 `activeStyle` / `inactiveStyle` / `itemStyle` 控制文字和 item 样式；  
+通过 `lineColor` 可设置滑块颜色或背景图。
+
+```vue
+<template>
+  <uv-tabs
+    :list="list"
+    lineWidth="30"
+    lineColor="#f56c6c"
+    :activeStyle="{
+      color: '#303133',
+      fontWeight: 'bold',
+      transform: 'scale(1.05)'
+    }"
+    :inactiveStyle="{
+      color: '#606266',
+      transform: 'scale(1)'
+    }"
+    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+  ></uv-tabs>
+</template>
+```
+
+使用图片作为滑块背景：
+
+```vue
+<template>
+  <uv-tabs :list="list" :lineColor="`url(${lineBg}) 100% 100%`"></uv-tabs>
+</template>
+
+<script>
+const lineBg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII='
+
+export default {
+  data() {
+    return {
+      list: [{ name: '关注' }, { name: '推荐' }, { name: '电影' }],
+      lineBg
+    }
+  }
+}
+</script>
+```
+
+### 右侧自定义插槽 {#right-slot}
+
+```vue
+<template>
+  <uv-tabs :list="list">
+    <template v-slot:right>
+      <view style="padding-left: 4px;" @tap="toast">
+        <uv-icon name="list" size="21" bold></uv-icon>
+      </view>
+    </template>
+  </uv-tabs>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [{ name: '关注' }, { name: '推荐' }, { name: '电影' }]
+    }
+  },
+  methods: {
+    toast() {
+      uni.showToast({
+        icon: 'none',
+        title: '插槽被点击'
+      })
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Tabs Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| duration | 滑块移动一次所需时间（ms） | String \| Number | 300 | - |
+| list | 标签数组，元素为对象，如 `{ name: '推荐' }` | Array | - | - |
+| lineColor | 滑块颜色或背景（可为图片） | String | #3c9cff | - |
+| activeStyle | 选中项样式 | String \| Object | `{ color: '#303133' }` | - |
+| inactiveStyle | 未选中项样式 | String \| Object | `{ color: '#606266' }` | - |
+| lineWidth | 滑块宽度 | String \| Number | 20 | - |
+| lineHeight | 滑块高度 | String \| Number | 3 | - |
+| lineBgSize | 滑块背景图显示大小 | String | cover | - |
+| itemStyle | 每个菜单项样式 | String \| Object | `{ height: '44px' }` | - |
+| scrollable | 菜单是否可滚动（选项少时建议设为 false 以居中） | Boolean | true | true \| false |
+| current | 当前选中标签索引 | String \| Number | 0 | - |
+| keyName | 从 `list` 对象中读取的键名 | String | name | - |
+| customStyle | 自定义整体样式 | Object | - | - |
+
+### Tabs Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击标签时触发 | `index`: 索引，`item`: 对应对象 |
+| @change | 标签索引改变时触发（`disabled` 不会触发） | `index`: 索引，`item`: 对应对象 |

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

@@ -0,0 +1,191 @@
+---
+group: 数据
+category: Components
+title: Tags
+subtitle: 标签
+description: 用于标记与选择，支持主题色、尺寸、形状、镂空、可关闭与图标/图片等形态。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-tags` 常用于内容标记、筛选条件、状态展示等场景，提供更丰富的展示与交互形态（单选/多选可在点击事件中自行维护状态）。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-tags`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `type` 设置主题类型（默认 `primary`），通过 `text` 设置标签内容。
+
+```vue
+<uv-tags text="标签" plain size="mini" type="warning"></uv-tags>
+```
+
+### 自定义主题 {#theme}
+
+```vue
+<uv-tags text="标签"></uv-tags>
+<uv-tags text="标签" type="warning"></uv-tags>
+<uv-tags text="标签" type="success"></uv-tags>
+<uv-tags text="标签" type="error"></uv-tags>
+```
+
+### 圆形标签 {#shape}
+
+```vue
+<uv-tags text="标签" plain shape="circle"></uv-tags>
+<uv-tags text="标签" type="warning" shape="circle"></uv-tags>
+```
+
+### 镂空与填充 {#plain}
+
+```vue
+<uv-tags text="标签" plain></uv-tags>
+<uv-tags text="标签" type="warning" plain></uv-tags>
+<uv-tags text="标签" type="success" plain></uv-tags>
+<uv-tags text="标签" type="error" plain></uv-tags>
+
+<!-- plainFill：镂空但带背景色 -->
+<uv-tags text="标签" type="warning" plain plainFill></uv-tags>
+<uv-tags text="标签" type="success" plain plainFill></uv-tags>
+<uv-tags text="标签" type="error" plain plainFill></uv-tags>
+```
+
+### 自定义尺寸 {#size}
+
+`size` 可选 `mini / medium / large`（默认 `medium`）。
+
+```vue
+<uv-tags text="标签" plain size="mini"></uv-tags>
+<uv-tags text="标签" type="warning"></uv-tags>
+<uv-tags text="标签" type="success" plain size="large"></uv-tags>
+```
+
+### 可关闭标签 {#closable}
+
+```vue
+<template>
+  <view>
+    <uv-tags text="标签" size="mini" closable :show="close1" @close="close1 = false"></uv-tags>
+    <uv-tags text="标签" type="warning" closable :show="close2" @close="close2 = false"></uv-tags>
+    <uv-tags
+      text="标签"
+      type="success"
+      plain
+      size="large"
+      closable
+      :show="close3"
+      @close="close3 = false"
+    ></uv-tags>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      close1: true,
+      close2: true,
+      close3: true
+    }
+  }
+}
+</script>
+```
+
+### 带图片与图标 {#icon}
+
+`icon` 可传内置图标名或绝对路径图片地址。
+
+```vue
+<template>
+  <view>
+    <uv-tags text="标签" size="mini" icon="map" plain></uv-tags>
+    <uv-tags text="标签" type="warning" icon="tags-fill"></uv-tags>
+    <uv-tags
+      text="标签"
+      type="success"
+      plain
+      size="large"
+      icon="https://cdn.uviewui.com/uview/example/tag.png"
+    ></uv-tags>
+  </view>
+</template>
+```
+
+### 单选与多选 {#select}
+
+通过 `@click` 事件拿到 `name`，自行维护选中态（示例仅展示多选）。
+
+```vue
+<template>
+  <view>
+    <view class="uv-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
+      <uv-tags :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index" @click="checkboxClick">
+      </uv-tags>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkboxs: [{ checked: true }, { checked: false }, { checked: false }]
+    }
+  },
+  methods: {
+    checkboxClick(name) {
+      this.checkboxs[name].checked = !this.checkboxs[name].checked
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.uv-page__tag-item {
+  margin-right: 20px;
+}
+</style>
+```
+
+## API {#api}
+
+### Tags Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| type | 主题类型 | String | primary | primary \| success \| info \| warning \| error |
+| disabled | 不可用 | Boolean \| String | false | - |
+| size | 标签大小 | String | medium | medium \| large \| mini |
+| shape | 标签形状 | String | square | circle \| square |
+| text | 标签文字内容 | String \| Number | - | - |
+| bgColor | 背景颜色（为空则不处理） | String | #C6C7CB | - |
+| color | 字体颜色（为空则不处理） | String | - | - |
+| borderColor | 边框颜色 | String | - | - |
+| closeColor | 关闭图标颜色 | String | - | - |
+| name | 点击时返回的索引/标识 | String \| Number | - | - |
+| plainFill | 镂空时是否填充背景色 | Boolean | false | true \| false |
+| plain | 是否镂空 | Boolean | false | true \| false |
+| closable | 是否可关闭 | Boolean | false | true \| false |
+| show | 标签显示与否 | Boolean | true | true \| false |
+| icon | 内置图标或绝对路径图片 | String | - | - |
+| cellChild | 是否属于 cell 节点下（nvue 场景建议 true） | Boolean | false | true \| false |
+
+### Tags Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击标签触发 | index：传递的 name 值 |
+| @close | closable 为 true 时，点击关闭按钮触发 | index：传递的 name 值 |

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

@@ -0,0 +1,178 @@
+---
+group: 基础
+category: Components
+title: Text
+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-text` 覆盖项目中「特殊文本」的大部分常见场景，如：
+
+- 主题色（primary / error / success / warning / info）
+- 拨打电话、手机号脱敏
+- 日期格式化
+- 姓名脱敏
+- 超链接
+- 金额展示
+- 前后图标
+- 多行省略
+- 小程序 openType 能力（如分享）
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-text`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `text` 设置文本内容。推荐用 `:text="value"` 形式传入。
+
+```vue
+<uv-text text="我用十年青春,赴你最后之约"></uv-text>
+```
+
+### 设置主题 {#type}
+
+通过 `type` 设置主题色：primary / error / success / warning / info。
+
+```vue
+<uv-text type="primary" text="主色"></uv-text>
+<uv-text type="error" text="错误"></uv-text>
+<uv-text type="success" text="成功"></uv-text>
+<uv-text type="warning" text="警告"></uv-text>
+<uv-text type="info" text="信息"></uv-text>
+```
+
+### 拨打电话 + 脱敏 {#phone}
+
+设置 `mode="phone"`。可配合 `format="encrypt"` 进行脱敏。
+
+```vue
+<uv-text mode="phone" text="15019479320"></uv-text>
+<uv-text mode="phone" format="encrypt" text="15019479320"></uv-text>
+```
+
+### 日期格式化 {#date}
+
+设置 `mode="date"`。
+
+```vue
+<uv-text mode="date" text="1612959739"></uv-text>
+```
+
+### 姓名脱敏 {#name}
+
+设置 `mode="name"` 并配合 `format="encrypt"`。
+
+```vue
+<uv-text mode="name" text="张三三" format="encrypt"></uv-text>
+```
+
+### 超链接 {#link}
+
+设置 `mode="link"` 并指定 `href`。
+
+```vue
+<uv-text mode="link" text="Go to uv-ui docs" href="https://www.uv-uiui.com"></uv-text>
+```
+
+### 显示金额 {#price}
+
+设置 `mode="price"`。
+
+```vue
+<uv-text mode="price" text="728732.32"></uv-text>
+```
+
+### 前后图标 {#icons}
+
+设置 `prefixIcon` / `suffixIcon`，并用 `iconStyle` 调整图标样式（如字号）。图标名参考 `uv-icon`。
+
+```vue
+<uv-text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></uv-text>
+<uv-text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></uv-text>
+```
+
+### 超出隐藏（多行省略） {#lines}
+
+通过 `lines` 指定最大显示行数（最大 5），超出显示省略号。
+
+```vue
+<uv-text
+  :lines="2"
+  text="关于uv-ui的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View同音，故取名uv-ui，表达源于uni-app和Vue和uView之意，同时在此也对它们表示感谢。"
+></uv-text>
+```
+
+### 小程序开放能力（openType） {#open-type}
+
+小程序环境下可使用 `openType`（例如 `share`）。注意：使用 uni 上挂载的 uv-ui 内置方法，需要按「扩展配置 - JS 工具库」完成配置，否则可能报错。
+
+```vue
+<template>
+  <uv-text text="分享到微信" openType="share" type="success" @click="clickHandler"></uv-text>
+</template>
+<script>
+export default {
+  methods: {
+    clickHandler() {
+      // #ifndef MP-WEIXIN
+      uni.showToast({
+        icon: 'none',
+        title: '请在微信小程序内查看效果'
+      })
+      // #endif
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Text Props {#props}
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| text | String \| Number | - | 显示的值 |
+| type | String | - | 主题颜色 |
+| show | Boolean | true | 是否显示 |
+| prefixIcon | String | - | 前置图标 |
+| suffixIcon | String | - | 后置图标 |
+| mode | String | - | 匹配模式：text（普通）/ price / phone / name / date / link |
+| href | String | - | mode=link 时的链接 |
+| format | String \| Function | - | 格式化规则 |
+| call | Boolean | false | mode=phone 时点击是否拨打电话 |
+| openType | String | - | 小程序开放能力 open-type |
+| bold | Boolean | false | 是否粗体 |
+| block | Boolean | false | 是否块状（仅 vue） |
+| lines | String \| Number | - | 显示行数（最大 5），超出省略 |
+| color | String | #303133 | 文本颜色 |
+| size | String \| Number | 15 | 字体大小 |
+| iconStyle | Object \| String | 15px | 图标样式 |
+| decoration | String | none | 文字装饰：none \| underline \| line-through |
+| margin | Object \| Number \| String | - | 外边距 |
+| lineHeight | Number \| String | - | 行高 |
+| align | String | left | 对齐：left \| center \| right |
+| wordWrap | String | normal | 换行：normal \| break-word \| anywhere |
+| customStyle | Object | - | 自定义样式，如 `:custom-style=\"{color:'red',width:'20px'}\"` |
+
+### Text Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击触发 | - |
+