@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Image 组件使用规范
+impact: HIGH
+type: capability
+description: 图片展示
+tags: [foxui, fox-image, FoxImage]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Image 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Image 是 foxui 中用于 **图片展示** 的标准组件。
+- **基于**: NutUI `nut-image` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容
+- **适用场景**: 图片展示
+
+> 💡 **关键原则**: 在所有 图片展示 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `src` | 图片链接 | String | - |
+| `fit` | 图片填充模式，等同于原生的 object-fit 属性 | ImageFit | 'fill' |
+| `position` | 图片位置，等同于原生的 object-position 属性 | ImagePosition | 'center' |
+| `alt` | 替代文本 | String | - |
+| `width` | 宽度，默认单位px | String | - |
+| `height` | 高度，默认单位px | String | - |
+| `round` | 是否显示为圆角 | Boolean | false |
+| `radius` | 圆角大小 | String \ | Numer |
+| `show-error` | 是否展示图片加载失败 | Boolean | false |
+| `show-loading` | 是否展示加载中图片 | Boolean | true |
+| `lazy-load` | 懒加载 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击图片时触发 | event: Event |
+| `load` | 图片加载完后触发 | -- |
+| `error` | 图片加载失败后触发 | -- |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `loading` | 自定义加载中的提示内容 |
+| `error` | 自定义记载失败的提示内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Image 配合使用的相关组件
+

package/foxui/references/fox-image-preview/doc.md

@@ -0,0 +1,79 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: ImagePreview 组件使用规范
+impact: HIGH
+type: capability
+description: 图片预览
+tags: [foxui, fox-image-preview, FoxImagePreview]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell"]
+---
+
+# ImagePreview 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+ImagePreview 是 foxui 中用于 **图片预览** 的标准组件。
+- **基于**: NutUI `nut-image-preview` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 图片预览
+
+> 💡 **关键原则**: 在所有 图片预览 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `show` | 是否展示预览图片 | Boolean | false |
+| `videos` | 预览的视频数组（视频自动放到图片之前、taro场景暂不支持） | Array<Object> |  |
+| `images` | 预览图片数组 | Array<String> |  |
+| `autoplay` | 自动轮播时长，0表示不会自动轮播 | Number、String | 3000 |
+| `init-no` | 初始页码 | Number | 1 |
+| `pagination-visible` | 分页指示器是否展示 | Boolean | false |
+| `pagination-color` | 分页指示器选中的颜色 | String | 'fff' |
+| `content-close` | 点击图片可以退出预览 | Boolean | false |
+| `show-index` | 是否显示页码 | Boolean | true |
+| `closeable` | 是否显示关闭图标 | Boolean | false |
+| `close-icon` | 关闭图片名称或图片链接 | String | ‘circle-close’ |
+| `close-icon-position` | 关闭图标位置，可选值：top-left | String | ‘top-right’ |
+| `before-close` | 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise | active: number => boolean | Promise<boolean> |
+| `max-zoom` | 手势缩放时，最大缩放比例 | number | 3 |
+| `min-zoom` | 手势缩放时，最小缩放比例 | number | 1/3 |
+| `is-loop` | 是否循环播放 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `close` | 点击遮罩关闭图片预览时触发 | 无 |
+| `change` | 切换图片时触发 | index:当前图片索引 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `closeIcon` | 自定义关闭图片 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 ImagePreview 配合使用的相关组件
+- **fox-cell**: 与 ImagePreview 配合使用的相关组件
+

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

@@ -0,0 +1,70 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Indicator 组件使用规范
+impact: HIGH
+type: capability
+description: 显示一个任务或流程的进度，常用语开通流程。
+tags: [foxui, fox-indicator, FoxIndicator]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-row","fox-col","fox-button"]
+---
+
+# Indicator 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Indicator 是 foxui 中用于 **显示一个任务或流程的进度，常用语开通流程。** 的标准组件。
+- **基于**: NutUI `nut-indicator` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 显示一个任务或流程的进度，常用语开通流程。
+
+> 💡 **关键原则**: 在所有 显示一个任务或流程的进度，常用语开通流程。 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `current` | 当前步骤 | number | 1 |
+| `size` | 步骤长度 | number | 3 |
+| `block` | 是否启用块级布局 | boolean | false |
+| `align` | 对齐方式，仅在 block 为 true 时生效, 可选值 left, right, center | string | left |
+| `fill-zero` | 单数前面是否补 0 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Indicator 配合使用的相关组件
+- **fox-cell**: 与 Indicator 配合使用的相关组件
+- **fox-row**: 与 Indicator 配合使用的相关组件
+- **fox-col**: 与 Indicator 配合使用的相关组件
+- **fox-button**: 与 Indicator 配合使用的相关组件
+

package/foxui/references/fox-infinite-loading/doc.md

@@ -0,0 +1,74 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: InfiniteLoading 组件使用规范
+impact: HIGH
+type: capability
+description: 列表滚动到底部自动加载更多数据
+tags: [foxui, fox-infinite-loading, FoxInfiniteLoading]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-tabs","fox-tab-pane"]
+---
+
+# InfiniteLoading 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+InfiniteLoading 是 foxui 中用于 **列表滚动到底部自动加载更多数据** 的标准组件。
+- **基于**: NutUI `nut-infinite-loading` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 列表滚动到底部自动加载更多数据
+
+> 💡 **关键原则**: 在所有 列表滚动到底部自动加载更多数据 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 是否触发滚动加载 | boolean | false |
+| `has-more` | 是否还有更多数据 | boolean | true |
+| `threshold` | 滚动条与底部距离小于 threshold 时触发 loadMore 事件 | number | 200 |
+| `use-capture` | 是否使用捕获模式 true 捕获 false 冒泡 | boolean | false |
+| `load-more-text` | “没有更多数据” 展示文案 | string | '哎呀，这里是底部了啦' |
+| `load-text` | 上拉加载提示文案 | string | 加载中... |
+| `immediate` | 是否立即执行加载方法，以防初始状态下内容无法撑满容 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `load-more` | 继续加载的回调函数 | - |
+| `scroll-change` | 实时监听滚动高度 | 滚动高度 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义加载内容 |
+| `loading` | 自定义底部加载中提示 |
+| `loading-icon` | 自定义底部加载中图标 |
+| `finished` | 自定义加载完成后的提示文案 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 InfiniteLoading 配合使用的相关组件
+- **fox-tabs**: 与 InfiniteLoading 配合使用的相关组件
+- **fox-tab-pane**: 与 InfiniteLoading 配合使用的相关组件
+

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

@@ -0,0 +1,210 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: InputItem 组件使用规范
+impact: HIGH
+type: capability
+description: 输入框组件
+tags: [foxui, fox-input-item, FoxInputItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon","fox-button"]
+---
+
+# InputItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+InputItem 是 foxui 中用于 **输入框组件** 的标准组件。
+- **基于**: NutUI `nut-input-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持占位符提示、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 输入框组件
+
+> 💡 **关键原则**: 在所有 输入框组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 输入值，双向绑定 | String | - |
+| `type` | 类型，可选值为 text number  等 | String | text |
+| `placeholder` | 为空时占位符 | String | - |
+| `max-length` | 限制最长输入字符 | String、Number | - |
+| `clearable` | 展示清除icon | Boolean | true |
+| `text-align` | 文本位置,可选值left,center,right | String | left |
+| `unit` | 单位 | String | - |
+| `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` | 错误提示图标 | String | - |
+| `warn-tip` | 警告提示 | String | - |
+| `wran-icon` | 警告提示图标 | String | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | String | - |
+| `adjust-position` | 键盘弹起时，是否自动上推页面（仅支持小程序） | Boolean | true |
+| `always-system` | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效（仅支持小程序） | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 输入内容时触发 | val ,event |
+| `focus` | 聚焦时触发 | val  ,event |
+| `blur` | 失焦时触发 | val ,event |
+| `clear` | 点击清空时触发 | val |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | label内容 |
+| `prepend` | 左侧自定义内容 |
+| `append` | 右侧自定义内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+常用属性与事件
+```html
+<fox-input-item v-model="val" @change="onChange" @focus="onFocus" @blur="onBlur" @clear="onClear">文本</fox-input-item>
+<fox-input-item v-model="val2" :is-required="m_required">必输</fox-input-item>
+<fox-input-item v-model="val3" :is-required="m_required" unit="个" placeholder="请输入个数">单位</fox-input-item>
+<fox-input-item v-model="val4" max-length="6" placeholder="请输入6位">限制6</fox-input-item>
+<fox-input-item v-model="val5" :readonly="m_readonly">只读</fox-input-item>
+<fox-input-item v-model="val6" :disabled="m_disabled">禁用</fox-input-item>
+```
+### 标签设置
+```html
+<fox-input-item v-model="val7" label-position="left" :is-required="m_required">left标签</fox-input-item>
+<!-- <fox-input-item v-model="val8" label-position="right" :is-required="m_required" unit="元">right标签</fox-input-item> -->
+<fox-input-item v-model="val9" label-position="top" :is-required="m_required" unit="元">top标签</fox-input-item>
+<fox-input-item v-model="val10">
+  <template v-slot:default>
+    <view class="my-label">
+      <fox-icon name="star-n" size="12px" color="#fa2c19"> </fox-icon>
+        <span>标签</span>
+    </view>
+  </template>
+</fox-input-item>
+<fox-input-item v-model="val11" placeholder="无标签"> </fox-input-item>
+```
+### 插槽扩展
+```html
+<fox-input-item v-model="val12">
+  <template v-slot:default>左边</template>
+  <template v-slot:prepend>
+      <view class="my-prepend">
+        <fox-icon name="search" color="#fa2c19"></fox-icon>
+      </view>
+  </template>
+</fox-input-item>
+<fox-input-item v-model="val13">
+  <template v-slot:default>右边</template>
+  <template v-slot:append>
+    <view class="my-append">
+      <fox-icon name="dongdong" color="#4994df"></fox-icon>
+    </view>
+  </template>
+</fox-input-item>
+<fox-input-item v-model="val14">
+  <template v-slot:default>验证码</template>
+    <template v-slot:append>
+      <view class="my-append-button">
+        <fox-button shape="square" size="small">发送</fox-button>
+      </view>
+  </template>
+</fox-input-item>
+```
+### 提示
+```html
+<fox-input-item v-model="val15" :is-required="true" error-tip="错误信息">错误</fox-input-item>
+<fox-input-item v-model="val16" :is-required="true" warn-tip="警告信息">警告</fox-input-item>
+<fox-input-item v-model="val17" :is-required="true" info-tip="提示信息">信息</fox-input-item>
+```
+### 自定义类型
+```html
+<fox-input-item v-model="val18" type="password" @change="onChange">密码</fox-input-item>
+<fox-input-item v-model="val19" type="number" @change="onChange">整数</fox-input-item>
+<fox-input-item v-model="val20" type="digit" placeholder="支持小数点的输入" @change="onChange">数字</fox-input-item>
+```
+### 代码
+```ts
+import { reactive, toRefs } from 'vue'
+import { createComponent } from '@/utils/create'
+const { createDemo } = createComponent('input')
+export default createDemo({
+  // setup
+  setup() {
+    // 数据
+    const data = reactive({
+      val: '文本输入框',
+      val2: '',
+      val3: '',
+      val4: '',
+      val5: '只读文本',
+      val6: '禁用文本',
+      val7: '',
+      val8: '',
+      val9: '',
+      val10: '',
+      val11: '',
+      val12: '',
+      val13: '',
+      val14: '',
+      val15: '',
+      val16: '',
+      val17: '',
+      val18: '',
+      val19: '',
+      val20: '',
+      m_disabled: true,
+      m_readonly: true,
+      m_required: true
+    })
+    // 方法
+    const methods = {
+      onChange: (value: string | number, event: Event) => {
+        console.log('change: ', value, event)
+      },
+      onFocus: (value: string | number, event: Event) => {
+        console.log('focus:', value, event)
+      },
+      onBlur: (value: string | number, event: Event) => {
+        console.log('blur:', value, event)
+      },
+      onClear: (value: string | number) => {
+        console.log('clear:', value)
+      }
+    }
+    return {
+      ...toRefs(data),
+      ...methods
+    }
+  }
+  
+  
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 InputItem 配合使用的相关组件
+- **fox-icon**: 与 InputItem 配合使用的相关组件
+- **fox-button**: 与 InputItem 配合使用的相关组件
+