@fredwsw/frontend-rules 1.0.0

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

@@ -0,0 +1,206 @@
+---
+group: 数据
+category: Components
+title: Collapse
+subtitle: 折叠面板
+description: 用于折叠收纳内容区域，支持手风琴模式、异步内容初始化以及自定义标题与内容。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-collapse` 用于通过折叠面板收纳内容区域，适合展示较多分组内容，通过展开/收起减少页面占用。  
+支持单/多展开、手风琴模式以及异步加载内容后重新计算高度。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-collapse`、`uv-collapse-item`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+```vue
+<template>
+  <uv-collapse @change="change" @close="close" @open="open">
+    <uv-collapse-item title="文档指南" name="Docs guide">
+      <text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+    </uv-collapse-item>
+    <uv-collapse-item title="组件全面" name="Variety components">
+      <text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+    </uv-collapse-item>
+    <uv-collapse-item title="众多利器" name="Numerous tools">
+      <text class="uv-collapse-content"
+        >众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text
+      >
+    </uv-collapse-item>
+  </uv-collapse>
+</template>
+```
+
+### 异步加载数据 {#async}
+
+展开高度由内部 JS 计算；异步加载内容后需调用 `init()` 重新计算高度。
+
+```vue
+<template>
+  <uv-collapse ref="collapse">
+    <uv-collapse-item title="文档指南" name="Docs guide">
+      <text class="uv-collapse-content">{{ text1 }}</text>
+    </uv-collapse-item>
+    <uv-collapse-item title="组件全面" name="Variety components">
+      <text class="uv-collapse-content">{{ text2 }}</text>
+    </uv-collapse-item>
+    <uv-collapse-item title="众多利器" name="Numerous tools">
+      <text class="uv-collapse-content">{{ text3 }}</text>
+    </uv-collapse-item>
+  </uv-collapse>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text1: '',
+      text2: '',
+      text3: ''
+    }
+  },
+  onLoad() {
+    uni.showLoading({ title: '请求中', mask: true })
+    setTimeout(() => {
+      this.text1 = '涵盖uniapp各个方面，给开发者方向指导和设计理念'
+      this.text2 = '组件功能丰富，多端兼容。让您快速集成，开箱即用'
+      this.text3 = '众多JS小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨'
+      this.$nextTick(() => {
+        this.$refs.collapse.init()
+        uni.showToast({ icon: 'success', title: '请求成功' })
+        uni.hideLoading()
+      })
+    }, 1000)
+  }
+}
+</script>
+```
+
+### 控制初始展开与禁用 {#initial}
+
+通过 `value` 指定展开面板 `name`，通过 `disabled` 控制是否可展开。
+
+```vue
+<template>
+  <uv-collapse :value="['2']">
+    <uv-collapse-item title="文档指南">
+      <text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+    </uv-collapse-item>
+    <uv-collapse-item disabled title="组件全面">
+      <text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+    </uv-collapse-item>
+    <uv-collapse-item name="2" title="众多利器">
+      <text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器</text>
+    </uv-collapse-item>
+  </uv-collapse>
+</template>
+```
+
+### 手风琴模式 {#accordion}
+
+`accordion` 设为 true 时开启手风琴模式（同一时间只展开一项）。
+
+```vue
+<uv-collapse accordion>
+  <uv-collapse-item title="文档指南">
+    <text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+  </uv-collapse-item>
+  <uv-collapse-item title="组件全面">
+    <text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+  </uv-collapse-item>
+</uv-collapse>
+```
+
+### 自定义标题与内容 {#custom}
+
+通过 slot 自定义标题、图标、右侧内容等（微信小程序暂不支持此写法）。
+
+```vue
+<template>
+  <view class="uv-page__item">
+    <uv-collapse accordion>
+      <uv-collapse-item title="文档指南">
+        <text slot="title" class="uv-page__item__title__slot-title">文档指南</text>
+        <text class="uv-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念</text>
+      </uv-collapse-item>
+      <uv-collapse-item title="组件全面">
+        <uv-icon name="tags-fill" size="20" slot="icon"></uv-icon>
+        <text class="uv-collapse-content">组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+      </uv-collapse-item>
+      <uv-collapse-item title="众多利器">
+        <text slot="value" class="uv-page__item__title__slot-title">自定义内容</text>
+        <text class="uv-collapse-content">众多JS小工具，是您开发过程中召之即来的利器</text>
+      </uv-collapse-item>
+    </uv-collapse>
+  </view>
+</template>
+```
+
+## API {#api}
+
+### Collapse Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| value | 当前展开的 `uv-collapse-item` 的 `name`；非手风琴为数组（如 `['2']`），手风琴为字符串/数字 | String \| Number \| Array | - | - |
+| accordion | 是否手风琴模式 | Boolean | false | true \| false |
+| border | 是否显示外边框 | Boolean | true | true \| false |
+
+### CollapseItem Props {#item-props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 面板标题 | String | - | - |
+| value | 标题右侧内容 | String | - | - |
+| label | 标题下方描述信息 | String | - | - |
+| disabled | 是否禁止展开/收起 | Boolean | false | true \| false |
+| isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | true | true \| false |
+| clickable | 是否开启点击反馈 | Boolean | true | true \| false |
+| border | 是否显示内边框 | Boolean | true | true \| false |
+| name | 唯一标识符（未设置则使用索引） | String \| Number | - | - |
+| icon | 标题左侧图标（内置图标或图片） | String | - | - |
+| duration | 展开/收起过渡时间（ms） | Number | 300 | - |
+
+### Collapse Events {#events}
+
+> 请在 `uv-collapse` 上监听。
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 当前激活面板展开/关闭时触发 | activeNames：String \| Array |
+| @open | 当前激活面板展开时触发 | activeNames：String \| Array |
+| @close | 当前激活面板关闭时触发 | activeNames：String \| Array |
+
+### Collapse Methods {#methods}
+
+> 需通过 `ref` 调用。
+
+| 方法 | 说明 |
+| --- | --- |
+| init | 重新初始化内部高度计算（用于异步获取内容，需配合 `this.$nextTick()`） |
+
+### CollapseItem Slots {#slots}
+
+（微信小程序不支持 slot 写法）
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 主体内容 |
+| title | 标题内容 |
+| icon | 左侧 icon |
+| value | 右侧 value |
+| right-icon | 右侧 icon |

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

@@ -0,0 +1,122 @@
+---
+group: 基础
+category: Foundation
+title: Color
+subtitle: 色彩
+description: uv-ui 调色板与 SCSS 颜色变量，用于统一视觉效果。
+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-ui 提供统一的调色板和 SCSS 变量，组件内部使用统一配色，便于保持界面风格一致。
+
+**注意：** uv-ui 使用 SCSS，需在 Hbuilder X 中安装「scss/sass 编译」插件（工具 → 插件安装）。安装后若不生效，请重启 Hbuilder X。
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+## 主题色 {#theme}
+
+primary、success、error、warning、info 为主题色，分别对应蓝、绿、红、黄、灰。每个主题色有 `disabled`、`dark`、`light` 状态：
+
+- **disabled**：禁用
+- **dark**：加深（如按下态）
+- **light**：变浅（如镂空背景）
+
+以 Button 为例：`type="primary"` 用 primary；按下用 primary-dark；`plain=true` 背景用 primary-light；禁用用 primary-disabled。
+
+## 主色 {#primary}
+
+主色为蓝色，表示鲜明、积极。
+
+| 名称 | 色值 |
+| --- | --- |
+| Primary | #3c9cff |
+| Dark | #398ade |
+| Disabled | #9acafc |
+| Light | #ecf5ff |
+
+## 辅助色 {#auxiliary}
+
+| 色系 | 主色 | Dark | Disabled | Light |
+| --- | --- | --- | --- | --- |
+| Error | #f56c6c | #e45656 | #f7b2b2 | #fef0f0 |
+| Warning | #f9ae3d | #f1a532 | #f9d39b | #fdf6ec |
+| Success | #5ac725 | #53c21d | #a9e08f | #f5fff0 |
+| Info | #909399 | #767a82 | #c4c6c9 | #f4f4f5 |
+
+## SCSS 变量 {#scss-vars}
+
+以下变量已由 uv-ui 全局引入，可直接在 scss 中使用：
+
+### 主题色变量
+
+```scss
+/* 主题色 */
+$uv-primary: #3c9cff;
+$uv-warning: #f9ae3d;
+$uv-success: #5ac725;
+$uv-error: #f56c6c;
+$uv-info: #909399;
+
+/* 主色变体 */
+$uv-primary-dark: #398ade;
+$uv-primary-disabled: #9acafc;
+$uv-primary-light: #ecf5ff;
+
+/* 辅助色变体 */
+$uv-warning-dark: #f1a532;
+$uv-warning-disabled: #f9d39b;
+$uv-warning-light: #fdf6ec;
+$uv-success-dark: #53c21d;
+$uv-success-disabled: #a9e08f;
+$uv-success-light: #f5fff0;
+$uv-error-dark: #e45656;
+$uv-error-disabled: #f7b2b2;
+$uv-error-light: #fef0f0;
+$uv-info-dark: #767a82;
+$uv-info-disabled: #c4c6c9;
+$uv-info-light: #f4f4f5;
+
+/* 使用示例 */
+.title {
+  color: $uv-primary;
+}
+```
+
+### 文字颜色
+
+| 变量 | 色值 | 用途 |
+| --- | --- | --- |
+| $uv-main-color | #303133 | 主要文字（标题等） |
+| $uv-content-color | #606266 | 常规文字（正文） |
+| $uv-tips-color | #909193 | 次要文字（提示） |
+| $uv-light-color | #c0c4cc | 占位文字 |
+| $uv-disabled-color | #c8c9cc | 禁用文字 |
+
+```scss
+.title {
+  color: $uv-main-color;
+}
+```
+
+### 背景与边框
+
+| 变量 | 色值 | 用途 |
+| --- | --- | --- |
+| $uv-bg-color | #f3f4f6 | 背景色 |
+| $uv-border-color | #e4e7ed | 边框色 |
+
+```scss
+.item {
+  background: $uv-bg-color;
+  border: 1px solid $uv-border-color;
+}
+```

package/template/docs/uv-ui-docs/count-down-cn.md

@@ -0,0 +1,169 @@
+---
+group: 数据
+category: Components
+title: CountDown
+subtitle: 倒计时
+description: 用于展示活动截止等场景的剩余时间，支持格式化、毫秒级渲染与 ref 手动控制。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-count-down` 常用于活动截止、支付倒计时等场景，通过数字变化提供时间紧迫感，提示用户完成操作。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-count-down`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `time` 设置倒计时长（单位 ms），通过 `format` 设置展示格式。
+
+```vue
+<template>
+  <uv-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></uv-count-down>
+</template>
+```
+
+### 自定义格式 {#custom-format}
+
+通过监听 `@change` 回调值自定义展示内容。
+
+```vue
+<template>
+  <uv-count-down
+    :time="30 * 60 * 60 * 1000"
+    format="DD:HH:mm:ss"
+    autoStart
+    millisecond
+    @change="onChange"
+  >
+    <view class="time">
+      <text class="time__item">{{ timeData.days }}&nbsp;天</text>
+      <text class="time__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}&nbsp;时</text>
+      <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
+      <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
+    </view>
+  </uv-count-down>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeData: {}
+    }
+  },
+  methods: {
+    onChange(e) {
+      this.timeData = e
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.time {
+  // #ifndef APP-NVUE
+  display: flex;
+  // #endif
+  flex-direction: row;
+  align-items: center;
+  &__item {
+    color: red;
+    font-size: 30rpx;
+    text-align: center;
+  }
+}
+</style>
+```
+
+### 毫秒级渲染 {#millisecond}
+
+通过 `millisecond` 开启毫秒级倒计时展示。
+
+```vue
+<uv-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></uv-count-down>
+```
+
+### 手动控制 {#methods}
+
+通过 `ref` 手动控制 `reset / start / pause`，并将 `autoStart` 设为 `false`。
+
+```vue
+<template>
+  <uv-count-down
+    ref="countDown"
+    :time="10 * 1000"
+    format="ss:SSS"
+    :autoStart="false"
+    millisecond
+    @change="onChange"
+  ></uv-count-down>
+  <button type="primary" size="small" @click="reset">重置</button>
+  <button type="primary" size="small" @click="start">开始</button>
+  <button type="primary" size="small" @click="pause">暂停</button>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timeData: {}
+    }
+  },
+  methods: {
+    start() {
+      this.$refs.countDown.start()
+    },
+    pause() {
+      this.$refs.countDown.pause()
+    },
+    reset() {
+      this.$refs.countDown.reset()
+    },
+    onChange(e) {
+      this.timeData = e
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### CountDown Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| time | 倒计时时长（单位 ms） | String \| Number | 0 | - |
+| format | 时间格式：DD/HH/mm/ss/SSS（毫秒） | String | HH:mm:ss | - |
+| autoStart | 是否自动开始倒计时 | Boolean | true | true \| false |
+| millisecond | 是否展示毫秒倒计时 | Boolean | false | true \| false |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### CountDown Methods {#api-methods}
+
+需要通过 `ref` 获取组件实例后调用。
+
+| 名称 | 说明 |
+| --- | --- |
+| start | 开始倒计时 |
+| pause | 暂停倒计时 |
+| reset | 重置倒计时 |
+
+### CountDown Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @change | 倒计时过程中变化触发 | time：剩余时间 |
+| @finish | 倒计时结束触发 | - |

package/template/docs/uv-ui-docs/count-to-cn.md

@@ -0,0 +1,125 @@
+---
+group: 数据
+category: Components
+title: CountTo
+subtitle: 数字滚动
+description: 将数字从起始值滚动到目标值，支持小数位、千分位分隔符、缓动与手动控制。
+demo:
+  cols: 2
+---
+
+## 何时使用 {#when-to-use}
+
+`uv-count-to` 适用于数字递增展示的场景，如金额、统计指标等，通过滚动过渡提升动效表现。
+
+> 完整示例下载地址：[uv-ui 插件市场](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+## 平台兼容性 {#platform}
+
+| App（vue） | App（nvue） | H5 | 小程序 | VUE2 | VUE3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | √ | √ | √ | √ | √ |
+
+**组件名：** `uv-count-to`
+
+## 代码演示 {#examples}
+
+### 基本使用 {#basic}
+
+通过 `startVal` 设置开始值，`endVal` 设置结束值。
+
+```vue
+<uv-count-to :startVal="30" :endVal="500"></uv-count-to>
+```
+
+### 设置滚动参数 {#options}
+
+- `duration`：滚动耗时（ms）
+- `useEasing`：结束是否缓动（默认 true）
+
+```vue
+<uv-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></uv-count-to>
+```
+
+### 显示小数位 {#decimals}
+
+- `decimals`：小数位数（若 startVal/endVal 有小数，建议设置为相同小数位）
+- `decimal`：小数分隔符
+
+```vue
+<uv-count-to :startVal="30" :endVal="500.55" :decimals="2" decimal="."></uv-count-to>
+```
+
+### 千分位分隔符 {#separator}
+
+通过 `separator` 配置千分位分隔符（如 `,`），当 `endVal` 超过 1000 时生效。
+
+```vue
+<uv-count-to :endVal="1542" separator=","></uv-count-to>
+```
+
+### 控制滚动时机 {#autoplay}
+
+通过 `autoplay` 控制是否初始化即滚动；若为 false，可通过 `ref` 调用 `start / stop / restart`。
+
+```vue
+<template>
+  <view>
+    <uv-count-to ref="countTo" :endVal="5000.55" :autoplay="false"></uv-count-to>
+    <button type="primary" size="small" @click="stop">暂停</button>
+    <button type="primary" size="small" @click="start">开始</button>
+    <button type="primary" size="small" @click="restart">继续</button>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    start() {
+      this.$refs.countTo.start()
+    },
+    stop() {
+      this.$refs.countTo.stop()
+    },
+    restart() {
+      this.$refs.countTo.restart()
+    }
+  }
+}
+</script>
+```
+
+## API {#api}
+
+### CountTo Props {#props}
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| startVal | 开始值 | String \| Number | 0 | - |
+| endVal | 结束值 | String \| Number | 0 | - |
+| duration | 滚动耗时（ms） | String \| Number | 2000 | - |
+| autoplay | 是否自动开始滚动 | Boolean | true | true \| false |
+| decimals | 小数位数 | String \| Number | 0 | - |
+| decimal | 小数分隔符 | String | . | - |
+| useEasing | 结束是否缓动 | Boolean | true | true \| false |
+| color | 字体颜色 | String | #606266 | - |
+| fontSize | 字体大小（单位默认 px） | String \| Number | 22 | - |
+| bold | 字体是否加粗 | Boolean | false | true \| false |
+| separator | 千分位分隔符 | String | - | - |
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### CountTo Methods {#api-methods}
+
+需要通过 `ref` 获取组件实例后调用。
+
+| 名称 | 说明 |
+| --- | --- |
+| start | autoplay 为 false 时启动滚动（从头开始） |
+| restart | 暂停状态继续滚动；或滚动中暂停 |
+| stop | 暂停滚动 |
+
+### CountTo Events {#events}
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| @end | 数值滚动到目标值时触发 | - |