@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,158 @@
+---
+group: 导航
+category: Components
+title: Steps
+subtitle: 步骤条
+description: 用于展示任务或流程的多个阶段，并高亮当前进度，支持横向/竖向、点状模式和错误状态。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-steps` / `uv-steps-item` 一般用于 **多步骤流程** 的场景，例如下单流程、审批流程、物流进度等，用于标识当前处于第几步以及每一步的状态。
+
+- 支持横向（row）和竖向（column）排布
+- 支持点状步骤条（dot 模式）
+- 支持错误状态展示
+- 支持自定义图标与自定义内容
+
+> 安卓 nvue 下 `overflow: visible` 不支持，因此该组件暂不支持安卓 nvue 环境。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | × | √ | √ | √ | √ |
+
+**组件名：** `uv-steps`、`uv-steps-item`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `current` 指定当前处于第几步（从 0 开始），内部使用多个 `uv-steps-item` 描述每一步。
+
+```vue
+<template>
+  <uv-steps current="0">
+    <uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+    <uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+    <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+```
+
+### 错误状态 {#error}
+
+通过 `uv-steps-item` 的 `error` 属性标记失败步骤。
+
+```vue
+<template>
+  <uv-steps current="1">
+    <uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+    <uv-steps-item error title="仓库着火" desc="10:35"></uv-steps-item>
+    <uv-steps-item title="破产清算" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+```
+
+### 点状模式 {#dot}
+
+```vue
+<template>
+  <uv-steps current="1" dot>
+    <uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+    <uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+    <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+```
+
+### 竖向模式 {#column}
+
+```vue
+<template>
+  <uv-steps current="1" direction="column">
+    <uv-steps-item title="已下单" desc="10:30"></uv-steps-item>
+    <uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+    <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+```
+
+### 自定义图标与颜色 {#custom-icon}
+
+通过 `activeIcon` / `inactiveIcon` 设置步骤图标，也可以通过插槽 `icon` 自定义图标，并通过 `active-color` / `inactive-color` 控制线条颜色。
+
+```vue
+<template>
+  <uv-steps current="1" active-color="#3c9cff" inactive-color="#999">
+    <uv-steps-item title="已下单" desc="09:35">
+      <template v-slot:icon>
+        <uv-icon name="checkmark" color="#3c9cff"></uv-icon>
+      </template>
+    </uv-steps-item>
+    <uv-steps-item title="已出库" desc="10:35">
+      <template v-slot:icon>
+        <uv-icon name="checkmark" color="#3c9cff"></uv-icon>
+      </template>
+    </uv-steps-item>
+    <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+```
+
+### 自定义标题与描述插槽 {#custom-content}
+
+```vue
+<template>
+  <uv-steps current="1">
+    <uv-steps-item>
+      <template v-slot:title>
+        <text>已下单</text>
+      </template>
+      <template v-slot:desc>
+        <text>00:00</text>
+      </template>
+    </uv-steps-item>
+    <uv-steps-item title="已出库" desc="10:35"></uv-steps-item>
+    <uv-steps-item title="运输中" desc="11:40"></uv-steps-item>
+  </uv-steps>
+</template>
+``>
+
+## API {#api}
+
+### Steps Props {#steps-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| direction | 步骤条方向：`row` 横向、`column` 竖向 | String | row | row \| column |
+| current | 当前处于第几步（从 0 开始） | Number \| String | 0 | - |
+| activeColor | 激活状态颜色 | String | #3c9cff | - |
+| inactiveColor | 未激活状态颜色 | String | #969799 | - |
+| activeIcon | 激活状态图标（不使用插槽时生效） | String | - | - |
+| inactiveIcon | 未激活状态图标 | String | - | - |
+| dot | 是否为点状步骤条 | Boolean | false | true \| false |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### StepsItem Props {#steps-item-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 标题文字 | String | - | - |
+| desc | 描述文字 | String | - | - |
+| iconSize | 图标大小（需 `uv-steps` 设置 `activeIcon` 或 `inactiveIcon`，单位 px/rpx） | String \| Number | 17 | - |
+| error | 当前步骤是否为失败状态 | Boolean | false | true \| false |
+| customStyle | 自定义外部样式（可用于调整 padding、间距等） | Object | - | - |
+
+### StepsItem Slots {#steps-item-slots}
+
+| 名称 | 说明 |
+| --- | --- |
+| icon | 自定义图标 |
+| title | 自定义标题内容 |
+| desc | 自定义描述内容 |
+

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

@@ -0,0 +1,82 @@
+---
+group: 布局
+category: Components
+title: Sticky
+subtitle: 吸顶
+description: 提供与 CSS position: sticky 类似的吸顶效果，当内容滚动到指定位置时将组件固定在顶部。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-sticky` 用于 **内容滚动到一定位置后固定在顶部** 的场景，例如吸顶 Tabs、固定筛选条等。
+
+- 内部自动检测当前环境是否支持 CSS `position: sticky`
+- 支持 H5、App、nvue、小程序多端，并在不支持 sticky 时自动降级为 JS 方案
+- 通过 `offsetTop` 控制吸顶时距离顶部的偏移
+
+> 建议将 `uv-sticky` 放在页面 **外层容器** 中，以避免因层级嵌套导致 sticky 失效。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-sticky`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <view class="container">
+    <!-- 建议放在外层 -->
+    <uv-sticky>
+      <text>吸顶内容</text>
+    </uv-sticky>
+
+    <view class="container__inner">
+      <!-- 如非必要，不建议层层嵌套 sticky -->
+      <uv-sticky>......</uv-sticky>
+    </view>
+  </view>
+</template>
+```
+
+### 吸顶距离 {#offset-top}
+
+通过 `offsetTop` 设置组件在吸顶时与顶部的距离（px/rpx）。
+
+```vue
+<uv-sticky offset-top="20">
+  <text>塞下秋来风景异，衡阳雁去无留意</text>
+</uv-sticky>
+```
+
+### 自定义导航栏高度 {#custom-nav-height}
+
+在使用自定义导航栏（如 `uv-navbar`）时，可以通过 `customNavHeight` 告诉 sticky 当前导航栏高度，避免遮挡。
+
+```vue
+<uv-sticky :customNavHeight="44">
+  <uv-tabs :list="list"></uv-tabs>
+</uv-sticky>
+```
+
+## API {#api}
+
+### Sticky Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| offsetTop | 吸顶时与顶部的距离（px/rpx） | String \| Number | 0 | - |
+| customNavHeight | 自定义导航栏高度，用于与导航栏配合使用 | String \| Number | 0 | - |
+| disabled | 是否禁用吸顶功能 | Boolean | false | true \| false |
+| bgColor | 组件背景颜色 | String | #ffffff | - |
+| zIndex | 吸顶时的 z-index（nvue 无效） | String \| Number | - | - |
+| index | 自定义标识，用于区分多个 sticky 组件 | String \| Number | - | - |
+

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

@@ -0,0 +1,161 @@
+---
+group: 导航
+category: Components
+title: Subsection
+subtitle: 分段器
+description: 在多个选项之间进行单选切换的分段器组件，支持按钮模式和分段模式，以及颜色和样式自定义。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-subsection` 适用于 **从若干选项中选择一个** 的场景，例如订单状态切换、筛选条件切换等。
+
+- 使用 `list` 配置选项
+- 通过 `current` 控制当前激活项
+- 支持按钮模式与分段器模式
+- 支持文字颜色、背景色与圆角样式定制
+
+> 在弹窗等场景中若显示异常，需要使用 `v-if` 控制挂载时机。  
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-subsection`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+`list` 可直接使用字符串数组，也可以通过对象 + `keyName` 的方式配置；通过 `current` 指定初始选中索引。
+
+```vue
+<template>
+  <uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['未付款', '待评价', '已付款'],
+      // 或者：
+      // list: [{ name: '未付款' }, { name: '待评价' }, { name: '已付款' }],
+      current: 1
+    }
+  },
+  methods: {
+    change(index) {
+      this.current = index
+    }
+  }
+}
+</script>
+```
+
+### 模式选择 {#mode}
+
+通过 `mode` 切换展示模式：
+
+- `button`：按钮类型（默认）
+- `subsection`：经典分段器形式
+
+```vue
+<uv-subsection :list="list" mode="subsection" :current="current" @change="change"></uv-subsection>
+```
+
+### 颜色配置 {#color}
+
+可配置激活/未激活文字颜色及背景色（`mode="button"` 有效）。
+
+```vue
+<template>
+  <uv-subsection
+    :list="list"
+    mode="button"
+    :current="current"
+    activeColor="#f56c6c"
+    inactiveColor="#a9e08f"
+    bgColor="#f56c6c"
+    @change="change"
+  ></uv-subsection>
+</template>
+```
+
+### 自定义样式与圆角 {#custom-style}
+
+通过 `custom-style` / `custom-item-style` 控制整体和子项样式，例如设置高度与圆角。
+
+```vue
+<template>
+  <uv-subsection
+    :list="list"
+    :current="current"
+    custom-style="height: 60rpx;border-radius: 30rpx;"
+    custom-item-style="border-radius: 30rpx;"
+    @change="change"
+  ></uv-subsection>
+</template>
+```
+
+### 注意事项（双向绑定） {#note}
+
+若使用变量绑定 `current`，需要在 `change` 回调中同步更新该值；否则前后两次设置同一值可能无法触发视图更新。
+
+```vue
+<template>
+  <uv-subsection :list="list" :current="current" @change="change"></uv-subsection>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['未付款', '待评价', '已付款'],
+      current: 0
+    }
+  },
+  methods: {
+    change(index) {
+      this.current = index
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### Subsection Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| list | 选项数组（字符串或对象），格式见上方“基本使用” | Array | - | - |
+| keyName | 从对象中读取 label 的键名 | String | name | - |
+| current | 初始化默认选中项索引 | String \| Number | 0 | - |
+| activeColor | 激活项文字颜色 | String | #3c9cff | - |
+| inactiveColor | 未激活项文字颜色 | String | #303133 | - |
+| mode | 展示模式 | String | button | button \| subsection |
+| fontSize | 字体大小（px/rpx） | String \| Number | 12 | - |
+| bold | 激活项文字是否加粗 | Boolean | true | true \| false |
+| bgColor | 背景颜色（`mode="button"` 有效） | String | #eeeeef | - |
+| customStyle | 自定义外层样式 | String \| Object | - | - |
+| customItemStyle | 自定义子项样式 | String \| Object | - | - |
+
+### Methods {#methods}
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| init | 初始化组件（在弹窗等场景中，打开时可调用以修正计算误差） | - |
+
+### Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 分段器选项发生改变时触发 | index：选项索引，从 0 开始 |
+

package/template/docs/uv-ui-docs/swipe-action-cn.md

@@ -0,0 +1,207 @@
+---
+group: 反馈
+category: Components
+title: SwipeAction
+subtitle: 滑动单元格
+description: 左滑唤出操作菜单的单元格组件，支持多按钮、组合列表、自动关闭等能力。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-swipe-action` 一般用于左滑唤出操作菜单的场景，如左滑删除、置顶、更多操作等。
+
+注意：
+
+- 如通过 `v-for` 用于左滑删除列表，请确保循环的 `:key` 为唯一值（如 id、title），不要使用 index，避免删除时数据错乱。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √（仅微信/QQ 小程序） | √ | √ |
+
+**组件名：** `uv-swipe-action`、`uv-swipe-action-item`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 slot 传入内部内容，通过 `options` 配置右侧按钮。
+
+```vue
+<template>
+  <view>
+    <uv-swipe-action>
+      <uv-swipe-action-item :options="options">
+        <view class="swipe-action uv-border-top uv-border-bottom">
+          <view class="swipe-action__content">
+            <text class="swipe-action__content__text">基础使用</text>
+          </view>
+        </view>
+      </uv-swipe-action-item>
+    </uv-swipe-action>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          text: '删除',
+          style: {
+            backgroundColor: '#f56c6c'
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.uv-page {
+  padding: 0;
+}
+.uv-demo-block__title {
+  padding: 10px 0 2px 15px;
+}
+.swipe-action {
+  &__content {
+    padding: 25rpx 0;
+    &__text {
+      font-size: 15px;
+      color: #222;
+      padding-left: 30rpx;
+    }
+  }
+}
+</style>
+```
+
+### 多个按钮并列 {#multi-buttons}
+
+```vue
+<template>
+  <view>
+    <uv-swipe-action>
+      <uv-swipe-action-item :options="options">
+        <view class="swipe-action uv-border-top uv-border-bottom">
+          <view class="swipe-action__content">
+            <text class="swipe-action__content__text">两个按钮并列</text>
+          </view>
+        </view>
+      </uv-swipe-action-item>
+    </uv-swipe-action>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          text: '收藏',
+          style: { backgroundColor: '#3c9cff' }
+        },
+        {
+          text: '删除',
+          style: { backgroundColor: '#f56c6c' }
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+### 组合使用 {#group}
+
+支持在一个 `uv-swipe-action` 内渲染多个 `uv-swipe-action-item`，并为每行配置不同按钮组、禁用状态等。
+
+```vue
+<template>
+  <view>
+    <uv-swipe-action>
+      <uv-swipe-action-item
+        v-for="(item, index) in options"
+        :key="index"
+        :options="item.options"
+        :disabled="item.disabled"
+      >
+        <view class="swipe-action uv-border-top" :class="[index === options.length - 1 && 'uv-border-bottom']">
+          <view class="swipe-action__content">
+            <text class="swipe-action__content__text">{{ item.text }}</text>
+          </view>
+        </view>
+      </uv-swipe-action-item>
+    </uv-swipe-action>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          text: '禁用状态',
+          disabled: true,
+          options: [
+            { text: '置顶', style: { backgroundColor: '#3c9cff' } },
+            { text: '取消', style: { backgroundColor: '#f9ae3d' } }
+          ]
+        },
+        {
+          text: '正常状态',
+          disabled: false,
+          options: [
+            { text: '置顶', style: { backgroundColor: '#3c9cff' } },
+            { text: '取消', style: { backgroundColor: '#f9ae3d' } }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### SwipeAction Props {#action-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| autoClose | 是否自动关闭其他 `swipe` 按钮组 | Boolean | true | true \| false |
+
+### SwipeAction Events {#action-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 点击组件时触发 | index |
+
+### SwipeActionItem Props {#item-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| show | 控制当前项打开/关闭 | Boolean | false | true \| false |
+| index | 标识符（如 v-for 索引） | String \| Number | - | - |
+| disabled | 是否禁用 | Boolean | false | true \| false |
+| autoClose | 是否自动关闭其他 `swipe` 按钮组 | Boolean | true | true \| false |
+| threshold | 滑动距离阈值（大于此值才认为打开菜单） | Number | 20 | - |
+| options | 右侧按钮配置数组 | Array | [] | - |
+| duration | 动画过渡时间（ms） | String \| Number | 300 | - |
+| name | 标识符（如 v-for 索引） | String \| Number | - | - |
+
+### SwipeActionItem Events {#item-events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @click | 按钮被点击时触发 | name：props.name 值；index：第几个按钮被点击 |