@fox-js/phone-skills 4.0.1-0

package/foxui/references/fox-rate/doc.md

@@ -0,0 +1,141 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Rate 组件使用规范
+impact: HIGH
+type: capability
+description: 评分组件
+tags: [foxui, fox-rate, FoxRate]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon"]
+---
+
+# Rate 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Rate 是 foxui 中用于 **评分组件** 的标准组件。
+- **基于**: NutUI `nut-rate` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 评分组件
+
+> 💡 **关键原则**: 在所有 评分组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 当前 star 数，可使用 v-model 双向绑定数据 | Number | - |
+| `count` | star 总数 | Number | 5 |
+| `icon-size` | star 大小 | Number | 18 |
+| `active-color` | 图标选中颜色 | String | fa200c |
+| `void-color` | 图标未选中颜色 | String | ccc |
+| `unchecked-icon` | 使用图标未选中图标名称/icon | String | star-n |
+| `checked-icon` | 使用图标选中图标名称/icon | String | star-fill-n |
+| `font-class-name` | 自定义icon 字体基础类名 | String | foxui-iconfont |
+| `class-prefix` | 自定义icon 类名前缀，用于使用自定义图标 | String | fox-icon |
+| `allow-half` | 是否半星 | Boolean | false |
+| `readonly` | 是否只读 | Boolean | false |
+| `disabled` | 是否禁用 | Boolean | false |
+| `spacing` | 间距 | Number | 20 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 当前分值修改时时触发的事件 | 当前值 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+``` html
+<fox-rate v-model="value" />
+```
+
+``` javascript
+import { ref } from 'vue';
+setup() {
+    const value = ref(3);
+    return { value }
+}
+```
+
+### 自定义icon
+
+``` html
+<fox-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+```
+
+### 自定义数量
+
+``` html
+<fox-rate :total="6" v-model="value" />
+```
+
+### 自定义颜色
+
+``` html
+<fox-rate active-color="#FFC800" v-model="value" />
+```
+
+### 禁用状态
+
+``` html
+<fox-rate disabled v-model="value" />
+```
+
+### 只读
+
+``` html
+<fox-rate v-model="value" readOnly />
+```
+
+### 绑定事件
+
+``` html
+<fox-rate v-model="value" @change="onChange" />
+```
+
+``` javascript
+import { ref } from 'vue';
+setup() {
+    const value = ref(3);
+    const onChange = (val)=>{
+        Toast.text(val);
+    }
+    return { value }
+}
+```
+### 自定义尺寸
+
+``` html
+<fox-rate v-model="value" icon-size="35" />
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Rate 配合使用的相关组件
+- **fox-icon**: 与 Rate 配合使用的相关组件
+

package/foxui/references/fox-rate-item/doc.md

@@ -0,0 +1,137 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: RateItem 组件使用规范
+impact: HIGH
+type: capability
+description: 评价组件
+tags: [foxui, fox-rate-item, FoxRateItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon"]
+---
+
+# RateItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+RateItem 是 foxui 中用于 **评价组件** 的标准组件。
+- **基于**: NutUI `nut-rate-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 评价组件
+
+> 💡 **关键原则**: 在所有 评价组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 当前 star 数，可使用 v-model 双向绑定数据 | Number | - |
+| `text-align` | 文本位置,可选值left,center,right | String | left |
+| `label` | 标签 | String | - |
+| `label-width` | 标签宽度 | String | - |
+| `label-position` | 标签位置可选值left,right,top | String | - |
+| `is-required` | 左侧号是否展示 | Boolean | false |
+| `disabled` | 是否禁用 | Boolean | false |
+| `readonly` | 是否只读 | Boolean | false |
+| `error-tip` | 错误提示 | String | - |
+| `error-icon` | 错误提示图标 | Component | - |
+| `warn-tip` | 警告提示 | String | - |
+| `warn-icon` | 警告提示图标 | Component | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | Component | - |
+| `count` | star 总数 | Number | 5 |
+| `icon-size` | star 大小 | Number | 18 |
+| `active-color` | 图标选中颜色 | String | fa200c |
+| `void-color` | 图标未选中颜色 | String | ccc |
+| `unchecked-icon` | 使用图标未选中图标名称/icon | String | star-n |
+| `checked-icon` | 使用图标选中图标名称/icon | String | star-fill-n |
+| `font-class-name` | 自定义icon 字体基础类名 | String | foxui-iconfont |
+| `class-prefix` | 自定义icon 类名前缀，用于使用自定义图标 | String | fox-icon |
+| `allow-half` | 是否半星 | Boolean | false |
+| `readonly` | 是否只读 | Boolean | false |
+| `disabled` | 是否禁用 | Boolean | false |
+| `spacing` | 间距 | Number | 20 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 当前分值修改时时触发的事件 | 当前值 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+``` html
+<fox-rate-item v-model="value">基础</fox-rate-item>
+```
+``` javascript
+import { ref } from 'vue'
+setup() {
+  const value = ref(3)
+  return { value }
+}
+```
+### 自定义icon
+``` html
+<fox-rate-item checked-icon="heart-fill1" unchecked-icon="heart" v-model="value"></fox-rate-item>
+```
+### 自定义数量
+``` html
+<fox-rate-item :total="6" v-model="value"></fox-rate-item>
+```
+### 自定义颜色
+``` html
+<fox-rate-item active-color="#FFC800" v-model="value"></fox-rate-item>
+```
+### 禁用状态
+``` html
+<fox-rate-item disabled v-model="value"><fox-rate-item>
+```
+### 只读
+``` html
+<fox-rate-item v-model="value" readOnly></fox-rate-item>
+```
+### 绑定事件
+``` html
+<fox-rate-item v-model="value" @change="onChange"></fox-rate-item>
+```
+``` javascript
+import { ref } from 'vue';
+setup() {
+    const value = ref(3);
+    const onChange = (val)=>{
+        Toast.text(val);
+    }
+    return { value }
+}
+```
+### 自定义尺寸
+``` html
+<fox-rate-item v-model="value" icon-size="35"></fox-rate-item>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 RateItem 配合使用的相关组件
+- **fox-icon**: 与 RateItem 配合使用的相关组件
+

package/foxui/references/fox-rolling-provider/doc.md

@@ -0,0 +1,87 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: RollingProvider 组件使用规范
+impact: HIGH
+type: capability
+description: 滚动显示配置组件
+tags: [foxui, fox-rolling-provider, FoxRollingProvider]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-page","fox-content","fox-gruop","fox-group"]
+---
+
+# RollingProvider 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+RollingProvider 是 foxui 中用于 **滚动显示配置组件** 的标准组件。
+- **基于**: NutUI `nut-rolling-provider` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持禁用/只读状态、支持插槽扩展自定义内容
+- **适用场景**: 滚动显示配置组件
+
+> 💡 **关键原则**: 在所有 滚动显示配置组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+无
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+``` html
+  <fox-page>
+    <fox-rolling-provider
+      :initial-visible-observer-size="3"
+      initial-invisible-observer-height="250px"
+      load-policy="rolling"
+      :root="rollingRootEl"
+      root-margin="250px 0px 250px 0px"
+    >
+      <fox-content ref="rollingRootRef">
+        <fox-gruop></fox-group>
+        <fox-gruop></fox-group>
+        <fox-gruop></fox-group>
+        <fox-gruop></fox-group>
+        <fox-gruop></fox-group>
+        <fox-gruop></fox-group>
+      </fox-content>
+    </fox-rolling-provider>
+  </fox-page>  
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 RollingProvider 配合使用的相关组件
+- **fox-page**: 与 RollingProvider 配合使用的相关组件
+- **fox-content**: 与 RollingProvider 配合使用的相关组件
+- **fox-gruop**: 与 RollingProvider 配合使用的相关组件
+- **fox-group**: 与 RollingProvider 配合使用的相关组件
+

package/foxui/references/fox-search-bar/doc.md

@@ -0,0 +1,91 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: SearchBar 组件使用规范
+impact: HIGH
+type: capability
+description: 搜索栏
+tags: [foxui, fox-search-bar, FoxSearchBar]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-searchbar","fox-icon"]
+---
+
+# SearchBar 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+SearchBar 是 foxui 中用于 **搜索栏** 的标准组件。
+- **基于**: NutUI `nut-search-bar` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持占位符提示、支持禁用/只读状态、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 搜索栏
+
+> 💡 **关键原则**: 在所有 搜索栏 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 当前输入的值 | Number / String | '' |
+| `label` | 搜索框左侧文本 | String | '' |
+| `shape` | 搜索框形状，可选值为 round | String | square |
+| `max-length` | 最大输入长度 | Number,String | '9999' |
+| `input-type` | 输入框类型 | String | 'text' |
+| `placeholder` | 输入框默认暗纹 | String | '请输入' |
+| `clearable` | 是否展示清除按钮 | Boolean | true |
+| `background` | 输入框外部背景 | String | 'fff' |
+| `input-background` | 输入框内部背景 | String | 'f7f7f7' |
+| `input-background` | 输入框内部背景 | String | 'f7f7f7' |
+| `confirm-type` | 键盘右下角按钮的文字（仅支持小程序），仅在type='text'时生效,可选值 send：发送、search：搜索、next：下一个、go：前往、done：完成 | String | done |
+| `input-background` | 输入框内部背景 | String | 'f7f7f7' |
+| `confirm-type` | 键盘右下角按钮的文字（仅支持小程序），仅在type='text'时生效,可选值 send：发送、search：搜索、next：下一个、go：前往、done：完成 | String | done |
+| `autofocus` | 是否自动聚焦 | boolean | false |
+| `autoblur` | search事件触发后自动失焦 | boolean | true |
+| `disabled` | 是否禁用输入框 | boolean | false |
+| `readonly` | 输入框只读 | boolean | false |
+| `input-align` | 对齐方式，可选center right | string | left |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 输入内容时触发 | val, event |
+| `focus` | 聚焦时触发 | val, event |
+| `blur` | 失焦时触发 | val, event |
+| `clear` | 点击清空时触发 | val |
+| `search` | 按下 ENTER 键时触发 | val, event |
+| `click-input` | 点击输入区域时触发 | event |
+| `click-left-icon` | 点击左侧图标时触发 | val, event |
+| `click-right-icon` | 点击右侧图标时触发 | val, event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `leftin` | 输入框内 左icon |
+| `leftout` | 输入框外 左icon |
+| `rightin` | 输入框内 右icon |
+| `rightout` | 输入框外 右icon |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 SearchBar 配合使用的相关组件
+- **fox-searchbar**: 与 SearchBar 配合使用的相关组件
+- **fox-icon**: 与 SearchBar 配合使用的相关组件
+

package/foxui/references/fox-short-password/doc.md

@@ -0,0 +1,78 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: ShortPassword 组件使用规范
+impact: HIGH
+type: capability
+description: 短密码组件
+tags: [foxui, fox-short-password, FoxShortPassword]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-row-item","fox-button","fox-number-keyboard"]
+---
+
+# ShortPassword 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+ShortPassword 是 foxui 中用于 **短密码组件** 的标准组件。
+- **基于**: NutUI `nut-short-password` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定
+- **适用场景**: 短密码组件
+
+> 💡 **关键原则**: 在所有 短密码组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 密码初始值 | String |
+| `v-model:visible` | 是否展示短密码框 | Boolean | false |
+| `title` | 标题 | String | 请输入密码 |
+| `desc` | 密码框描述 | String | 您使用了虚拟资产，请进行验证 |
+| `tips` | 提示语 | String | 忘记密码 |
+| `close-on-click-overlay` | 是否点击遮罩关闭 | Boolean | true |
+| `no-button` | 是否隐藏底部按钮 | Boolean | true |
+| `length` | 密码长度，取值为4~6 | String、Number | 6 |
+| `error-msg` | 错误信息提示 | String | '' |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 输入密码时触发事件 | 当前输入框值value |
+| `ok` | 点击确实时触发事件 | 当前输入框值value |
+| `cancel` | 点击弹层或取消时触发事件 | - |
+| `close` | 点击关闭图标时触发事件 | - |
+| `complete` | 输入完成的回调 | 当前输入框值value |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 ShortPassword 配合使用的相关组件
+- **fox-group**: 与 ShortPassword 配合使用的相关组件
+- **fox-row-item**: 与 ShortPassword 配合使用的相关组件
+- **fox-button**: 与 ShortPassword 配合使用的相关组件
+- **fox-number-keyboard**: 与 ShortPassword 配合使用的相关组件
+

package/foxui/references/fox-side-nav-bar/doc.md

@@ -0,0 +1,68 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: SideNavBar 组件使用规范
+impact: HIGH
+type: capability
+description: 垂直展示的导航栏，用于内容选择和切换
+tags: [foxui, fox-side-nav-bar, FoxSideNavBar]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-popup","fox-side-navbar","fox-sub-side-navbar","fox-side-navbar-item"]
+---
+
+# SideNavBar 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+SideNavBar 是 foxui 中用于 **垂直展示的导航栏，用于内容选择和切换** 的标准组件。
+- **基于**: NutUI `nut-side-nav-bar` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 垂直展示的导航栏，用于内容选择和切换
+
+> 💡 **关键原则**: 在所有 垂直展示的导航栏，用于内容选择和切换 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `title` | 导航标题 | string | 15 |
+| `ikey` | 导航唯一标识 | number \ | string |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 导航点击 | - |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 SideNavBar 配合使用的相关组件
+- **fox-cell**: 与 SideNavBar 配合使用的相关组件
+- **fox-popup**: 与 SideNavBar 配合使用的相关组件
+- **fox-side-navbar**: 与 SideNavBar 配合使用的相关组件
+- **fox-sub-side-navbar**: 与 SideNavBar 配合使用的相关组件
+- **fox-side-navbar-item**: 与 SideNavBar 配合使用的相关组件
+