@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,176 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Swipe 组件使用规范
+impact: HIGH
+type: capability
+description: 列表项左滑删除场景使用
+tags: [foxui, fox-swipe, FoxSwipe]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-button","fox-switch","fox-input-number"]
+---
+
+# Swipe 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Swipe 是 foxui 中用于 **列表项左滑删除场景使用** 的标准组件。
+- **基于**: NutUI `nut-swipe` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 列表项左滑删除场景使用
+
+> 💡 **关键原则**: 在所有 列表项左滑删除场景使用 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `name` | 唯一标识 | String | - |
+| `disabled` | 是否禁用滑动 | String | false |
+| `touch-move-prevent-default` | 是否阻止滑动事件行为 | boolean | false |
+| `touch-move-stop-propagation` | 是否阻止滑动事件冒泡 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `open` | 打开时触发 | type:'left or right' |
+| `close` | 关闭时触发 | type:'left or right' |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `open` | 打开单元格侧边栏 | left or right |
+| `close` | 收起单元格侧边栏 |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `left` | 左侧滑动内容 |
+| `default` | 自定义内容 |
+| `right` | 右侧滑动内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+``` html
+<fox-swipe>
+    <fox-cell round-radius="0" desc="左滑删除" />
+    <template #right>
+        <fox-button shape="square" style="height:100%" type="danger">删除</fox-button>
+    </template>
+</fox-swipe>
+```
+
+
+### 禁止滑动
+
+``` html
+<fox-swipe disabled>
+    <fox-cell round-radius="0" desc="禁止滑动" />
+    <template #right>
+        <fox-button shape="square" style="height:100%" type="danger">删除</fox-button>
+    </template>
+</fox-swipe>
+```
+
+
+### 左右滑动
+
+``` html
+<fox-swipe>
+    <template #left>
+        <fox-button shape="square" style="height:100%" type="success">选择</fox-button>
+    </template>
+    <fox-cell round-radius="0" desc="左滑右滑都可以哦" />
+    <template #right>
+        <fox-button shape="square" style="height:100%" type="danger">删除</fox-button>
+        <fox-button shape="square" style="height:100%" type="info">收藏</fox-button>
+    </template>
+</fox-swipe>
+```
+
+
+### 异步控制
+
+``` html
+<fox-swipe ref="refSwipe" @open="open" @close="close">
+    <fox-cell title="异步打开关闭">
+    <template v-slot:link>
+        <fox-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
+    </template>
+    </fox-cell>
+    <template #right>
+        <fox-button shape="square" style="height:100%" type="danger">删除</fox-button>
+    </template>
+</fox-swipe>
+```
+
+``` typescript
+    setup() {
+        const refSwipe = ref<HTMLElement>();
+        const checked = ref(false);
+        const changSwitch = (value: boolean) => {
+            if (value) {
+                refSwipe.value?.open('left');
+            } else {
+                refSwipe.value?.close();
+            }
+        };
+         const open = (obj: any) => {
+            console.log(obj);
+            checked.value = true;
+        };
+        const close = () => {
+            checked.value = false;
+        };
+        return { checked, changSwitch, refSwipe, open, close };
+    }
+```
+
+### 自定义
+
+``` html
+<fox-swipe>
+    <template #left>
+        <fox-button shape="square" style="height:100%" type="success">选择</fox-button>
+    </template>
+    <fox-cell title="商品描述">
+    <template v-slot:link>
+        <fox-input-number v-model="number" />
+    </template>
+    </fox-cell>
+    <template #right>
+        <fox-button shape="square" style="height:100%" type="danger">删除</fox-button>
+        <fox-button shape="square" style="height:100%" type="info">收藏</fox-button>
+    </template>
+</fox-swipe>
+```
+
+``` typescript
+    setup() {
+        const number = ref(0);
+        return { number };
+    }
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Swipe 配合使用的相关组件
+- **fox-cell**: 与 Swipe 配合使用的相关组件
+- **fox-button**: 与 Swipe 配合使用的相关组件
+- **fox-switch**: 与 Swipe 配合使用的相关组件
+- **fox-input-number**: 与 Swipe 配合使用的相关组件
+

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

@@ -0,0 +1,254 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Swiper 组件使用规范
+impact: HIGH
+type: capability
+description: 轮播
+tags: [foxui, fox-swiper, FoxSwiper]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-swiper-item"]
+---
+
+# Swiper 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Swiper 是 foxui 中用于 **轮播** 的标准组件。
+- **基于**: NutUI `nut-swiper` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 轮播
+
+> 💡 **关键原则**: 在所有 轮播 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `width` | 轮播卡片的宽度 | number \ | string |
+| `height` | 轮播卡片的高度 | number \ | string |
+| `direction` | 轮播方向,可选值horizontal,vertical | string | 'horizontal' |
+| `pagination-visible` | 分页指示器是否展示 | boolean | false |
+| `pagination-color` | 分页指示器选中的颜色 | string | 'fff' |
+| `loop` | 是否循环轮播 | boolean | true |
+| `duration` | 动画时长（单位是ms） | number \ | string |
+| `auto-play` | 自动轮播时长，0表示不会自动轮播 | number \ | string |
+| `init-page` | 初始化索引值 | number \ | string |
+| `touchable` | 是否可触摸滑动 | boolean | true |
+| `is-prevent-default` | 滑动过程中是否禁用默认事件 | boolean | true |
+| `is-stop-propagation` | 滑动过程中是否禁止冒泡 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 滑动之后的回调 | 当前索引值 index |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `prev` | 切换到上一页 | - |
+| `next` | 切换到下一页 | - |
+| `to` | 切换到指定轮播 | index:number |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `page` | 自定义指示器 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+`auto-play` 自动轮播的时长
+`init-page` 初始索引值
+`pagination-visible` 是否显示分页指示器
+`pagination-color` 指示器颜色自定义
+
+```html
+<fox-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
+  <fox-swiper-item>
+    <img src="./demo/img/1.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/2.jpg'" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/3.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/4.jpg" alt="" />
+  </fox-swiper-item>
+</fox-swiper>
+```
+
+### 自定义大小
+
+`width` 自定义轮播大小
+
+```html
+<fox-swiper :init-page="state.page2" :loop="false" width="300">
+  <fox-swiper-item>
+    <img src="./demo/img/1.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/2.jpg'" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/3.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/4.jpg" alt="" />
+  </fox-swiper-item>
+</fox-swiper>
+```
+
+### 自定义分页指示器
+
+`v-slot:page` 表示自定义指示器
+
+```html
+<fox-swiper :init-page="state.page3" :loop="true" @change="change">
+    <fox-swiper-item>
+    <img src="./demo/img/1.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/2.jpg'" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/3.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/4.jpg" alt="" />
+  </fox-swiper-item>
+  <template v-slot:page>
+    <div class="page"></div>
+  </template>
+</fox-swiper>
+```
+
+### 垂直方向
+
+`direction` 自定义轮播方向
+
+
+```html
+<fox-swiper :init-page="state.page4" :loop="true" auto-play="3000" direction="vertical" height="150" :pagination-visible="true" style="height: 150px">
+  <fox-swiper-item>
+    <img src="./demo/img/1.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/2.jpg'" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/3.jpg" alt="" />
+  </fox-swiper-item>
+  <fox-swiper-item>
+    <img src="./demo/img/4.jpg" alt="" />
+  </fox-swiper-item>
+</fox-swiper>
+```
+
+### 水平居中展示
+
+`is-center` 代表可居中，同时必须传 `width`
+
+```html
+<template>
+  <fox-swiper :init-page="page" :loop="false" width="280" height="150" :is-center="true" style="height: 150px">
+    <fox-swiper-item>
+      <img src="./demo/img/1.jpg" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/2.jpg'" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/3.jpg" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/4.jpg" alt="" />
+    </fox-swiper-item>
+  </fox-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 0
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .fox-swiper-item {
+    line-height: 150px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+```
+
+
+### 垂直居中展示
+
+`is-center` 代表可居中，同时必须传 `height`
+
+```html
+<template>
+  <fox-swiper :init-page="page" :loop="false" direction="vertical" height="220" :is-center="true" style="height: 300px">
+    <fox-swiper-item>
+      <img src="./demo/img/1.jpg" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/2.jpg" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/3.jpg" alt="" />
+    </fox-swiper-item>
+    <fox-swiper-item>
+      <img src="./demo/img/4.jpg" alt="" />
+    </fox-swiper-item>
+  </fox-swiper>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        page: 0
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+  .fox-swiper-item {
+    line-height: 300px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Swiper 配合使用的相关组件
+- **fox-swiper-item**: 与 Swiper 配合使用的相关组件
+

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

@@ -0,0 +1,162 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Switch 组件使用规范
+impact: HIGH
+type: capability
+description: 用来打开或关闭选项
+tags: [foxui, fox-switch, FoxSwitch]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Switch 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Switch 是 foxui 中用于 **用来打开或关闭选项** 的标准组件。
+- **基于**: NutUI `nut-switch` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 用来打开或关闭选项
+
+> 💡 **关键原则**: 在所有 用来打开或关闭选项 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 开关状态 | Boolean、String、Number | false |
+| `disable` | 禁用状态 | Boolean | false |
+| `loading` | 加载状态 | Boolean | false |
+| `name` | 图标名称/icon | String | loading |
+| `color` | 图标颜色/icon，仅在loading状态下生效 | String | - |
+| `size` | 图标尺寸/icon，仅在loading状态下生效 | String、Number | 12px |
+| `active-color` | 打开时的背景颜色 | String | fa2c19 |
+| `inactive-color` | 关闭时的背景颜色 | String | ebebeb |
+| `active-text` | 打开时文字描述 | String | - |
+| `inactive-text` | 关闭时文字描述 | String | - |
+| `active-value` | 打开时组件的值 | Boolean、String、Number | true |
+| `inactive-value` | 关闭组件的值 | Boolean、String、Number | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 切换开关时触发 | value: boolean,event: Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+``` html
+<fox-switch v-model="checked" />
+```
+``` javascript
+import { ref } from 'vue';
+export default {
+  setup() {
+    const checked = ref(true);
+    return { checked };
+  },
+};
+```
+
+### 禁用状态
+
+``` html
+<fox-switch v-model="checked" disable />
+```
+
+### 加载状态
+
+``` html
+<fox-switch v-model="checked" loading color="loading" />
+```
+
+### change事件
+
+``` html
+<fox-switch v-model="checked" @change="change" />
+```
+
+``` javascript
+import { ref, getCurrentInstance } from 'vue';
+export default {
+  setup() {
+    let { proxy } = getCurrentInstance() as any;
+    const checked = ref(true);
+    const change = (value: boolean, event: Event) => {
+      proxy.$toast.text(`触发了change事件，开关状态：${value}`);
+    };
+    return {
+      checked,
+      change
+    };
+  }
+};
+```
+
+### 异步控制
+
+``` html
+<fox-switch :model-value="checkedAsync" @change="changeAsync" />
+```
+
+``` javascript
+import { ref, getCurrentInstance } from 'vue';
+export default {
+  setup() {
+    let { proxy } = getCurrentInstance() as any;
+    const checkedAsync = ref(true);
+    const changeAsync = (value: boolean, event: Event) => {
+      proxy.$toast.text(`2秒后异步触发 ${value}`);
+      setTimeout(() => {
+        checkedAsync.value = value;
+      }, 2000);
+    };
+    
+    return {
+      checkedAsync,
+      changeAsync
+    };
+  }
+};
+```
+
+### 自定义颜色
+
+``` html
+<fox-switch v-model="checked" @change="switchChange" active-color="blue" />
+```
+
+### 支持文字
+
+``` html
+<fox-switch v-model="checked" @change="switchChange" active-text="开" inactive-text="关" />
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Switch 配合使用的相关组件
+