@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,202 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Signature 组件使用规范
+impact: HIGH
+type: capability
+description: 签名组件
+tags: [foxui, fox-signature, FoxSignature]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-slot-item"]
+---
+
+# Signature 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Signature 是 foxui 中用于 **签名组件** 的标准组件。
+- **基于**: NutUI `nut-signature` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容
+- **适用场景**: 签名组件
+
+> 💡 **关键原则**: 在所有 签名组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `custom-class` | 自定义 class | string | - |
+| `line-width` | 线条的宽度 | number | 3 |
+| `stroke-style` | 绘图笔触颜色 | string | 000 |
+| `type` | 图片格式 | string | png |
+| `un-support-tpl` | 不支持 Canvas 情况下的展示文案 | string | 对不起，当前浏览器不支持Canvas，无法使用本控件！ |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `start` | 签名开始回调函数（指某次笔画的开始） | - |
+| `signing` | 正在签名的回调函数（指某次笔画进行中） | event |
+| `end` | 签名结束回调函数（指某次笔画的结束） | - |
+| `confirm` | 点击确认按钮触发事件回调函数 | canvas和签名图片展示的 data URI，<br>如未绘制，则返回提示信息和空 data URI |
+| `clear` | 点击重签按钮触发事件回调函数 | - |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `confrm` | 确认签名 | - |
+| `clear` | 清理签名 | - |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `toolbar` | toolbar插槽 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+```html
+<script lang="ts" setup>
+import { useFoxI18n } from '@fox-js/i18n'
+const messages = {
+  zh_CN: {
+    basic: '基本用法',
+    tips: 'Tips: 点击确认按钮,下方显示签名图片'
+  },
+  en_US: {
+    basic: 'Basic Usage',
+    tips: 'Tips: click the confirm button, and the signature image is displayed below'
+  }
+}
+const { t } = useFoxI18n({ messages })
+
+// confirm
+const confirm = (canvas: any, data: any) => {
+  const img = document.createElement('img')
+  img.src = data
+  const imgDemoDiv = document.querySelector('.img-demo')
+  imgDemoDiv?.appendChild(img)
+}
+
+// clear
+const clear = () => {
+  console.log('清除')
+}
+
+// start
+const start = () => {
+  console.log('签名开始')
+}
+
+// end
+const end = () => {
+  console.log('签名结束')
+}
+</script>
+
+<template>
+  <fox-group class="signature-demo" :title="t('basic')" column="1">
+    <fox-slot-item>
+      <fox-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></fox-signature>
+      <p class="demo-tips">{{ t('tips') }}</p>
+    </fox-slot-item>
+    <fox-slot-item class="img-demo"></fox-slot-item>
+  </fox-group>
+</template>
+
+<style lang="scss">
+.signature-demo {
+  display: flex;
+  flex-direction: column;
+  .demo-tips {
+    font-size: 12px;
+    color: #666;
+  }
+}
+</style>
+
+
+
+```
+
+### 修改颜色和签字粗细
+
+
+```html
+
+<!--
+ * @Author: 江成
+ * @Date: 2026-05-11 10:56:11
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-11 11:15:21
+-->
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { useFoxI18n } from '@fox-js/i18n'
+
+// 国际化
+const messages = {
+  zh_CN: {
+    title: '修改颜色和签字粗细',
+    tips: 'Tips: 点击确认按钮,下方显示签名图片'
+  },
+  en_US: {
+    title: 'Modify color and signature thickness',
+    tips: 'Tips: click the confirm button, and the signature image is displayed below'
+  }
+}
+
+const { t } = useFoxI18n({ messages })
+
+const state = reactive({
+  lineWidth: 4,
+  strokeStyle: 'green'
+})
+
+// end
+const end = () => {
+  console.log('签名结束')
+}
+</script>
+
+<template>
+  <fox-group class="signature-demo" :title="t('title')" column="1">
+    <fox-slot-item>
+      <fox-signature :lineWidth="state.lineWidth" :strokeStyle="state.strokeStyle" @end="end"></fox-signature>
+      <p class="demo-tips">{{ t('tips') }}</p>
+    </fox-slot-item>
+  </fox-group>
+</template>
+
+<style lang="scss">
+.signature-demo {
+  display: flex;
+  flex-direction: column;
+  .demo-tips {
+    font-size: 12px;
+    color: #666;
+  }
+}
+</style>
+
+
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Signature 配合使用的相关组件
+- **fox-group**: 与 Signature 配合使用的相关组件
+- **fox-slot-item**: 与 Signature 配合使用的相关组件
+

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

@@ -0,0 +1,73 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Skeleton 组件使用规范
+impact: HIGH
+type: capability
+description: 骨架屏
+tags: [foxui, fox-skeleton, FoxSkeleton]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-switch","fox-avatar"]
+---
+
+# Skeleton 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Skeleton 是 foxui 中用于 **骨架屏** 的标准组件。
+- **基于**: NutUI `nut-skeleton` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 骨架屏
+
+> 💡 **关键原则**: 在所有 骨架屏 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `loading` | 是否显示骨架屏 | Boolean | true |
+| `width` | 每行宽度 | String | default |
+| `height` | 每行高度 | String | 100px |
+| `animated` | 是否开启骨架屏动画 | Boolean | false |
+| `avatar` | 是否显示头像 | Boolean | false |
+| `avatar-shape` | 头像形状：正方形/圆形 | String | round |
+| `avatar-size` | 头像大小 | String | 50px |
+| `round` | 标题/段落是否采用圆角风格 | Boolean | false |
+| `row` | 设置段落行数 | String | 1 |
+| `title` | 是否显示段落标题 | Boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 骨架屏显示内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Skeleton 配合使用的相关组件
+- **fox-switch**: 与 Skeleton 配合使用的相关组件
+- **fox-avatar**: 与 Skeleton 配合使用的相关组件
+

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

@@ -0,0 +1,162 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Steps 组件使用规范
+impact: HIGH
+type: capability
+description: 步骤条
+tags: [foxui, fox-steps, FoxSteps]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-step"]
+---
+
+# Steps 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Steps 是 foxui 中用于 **步骤条** 的标准组件。
+- **基于**: NutUI `nut-steps` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 步骤条
+
+> 💡 **关键原则**: 在所有 步骤条 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `title` | 流程步骤的标题 | string | 步骤 |
+| `content` | 流程步骤的描述性文字支持 html 结构 | string | 步骤描述 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click-step` | 点击步骤的标题或图标时触发 | index: number |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `title` | 步骤标题 |
+| `content` | 步骤内容 |
+| `icon` | 步骤图标 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基本用法
+
+```html
+<template>
+  <fox-steps :current="current1" @click-step="handleClickStep">
+    <fox-step title="步骤一">
+      1
+      <template v-slot:title>步骤一</template>
+    </fox-step>
+    <fox-step title="未开始">2</fox-step>
+    <fox-step title="未开始">3</fox-step>
+    <fox-step title="未开始">4</fox-step>
+  </fox-steps>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current1: 1,
+      });
+      const handleClickStep = (index: number) => {
+        console.log(index)
+      };
+      return { ...toRefs(state), handleClickStep };
+    }
+  };
+</script>
+```
+
+### 标题和描述信息
+
+```html
+<template>
+  <fox-steps :current="current2">
+    <fox-step title="已完成" content="步骤描述">1</fox-step>
+    <fox-step title="进行中" content="步骤描述">2</fox-step>
+    <fox-step title="未开始" content="步骤描述">3</fox-step>
+  </fox-steps>
+</template>
+<script>
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        current2: 1,
+      });
+      return { ...toRefs(state) };
+    }
+  };
+</script>
+```
+
+### 自定义图标
+
+```html
+<template>
+  <fox-steps current="1">
+    <fox-step title="已完成" icon="service">1</fox-step>
+    <fox-step title="进行中" icon="people">2</fox-step>
+    <fox-step title="未开始" icon="location2">3</fox-step>
+  </fox-steps>
+</template>
+```
+
+### 竖向步骤条
+
+```html
+<template>
+  <fox-steps direction="vertical" current="2">
+    <fox-step title="已完成" content="您的订单已经打包完成，商品已发出">1</fox-step>
+    <fox-step title="进行中" content="您的订单正在配送途中">2</fox-step>
+    <fox-step title="未开始" content="收货地址为：上海外滩1号">3</fox-step>
+  </fox-steps>
+</template>
+```
+
+### 点状步骤和垂直方向
+
+
+```html
+<template>
+  <fox-steps direction="vertical" progress-dot current="2">
+    <fox-step title="已完成" content="您的订单已经打包完成，商品已发出">1</fox-step>
+    <fox-step title="进行中" content="您的订单正在配送途中">2</fox-step>
+    <fox-step title="未开始">
+      3
+      <template v-slot:content>
+        <p>收货地址为：</p>
+        <p>上海外滩1号</p>
+      </template>
+    </fox-step>
+  </fox-steps>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Steps 配合使用的相关组件
+- **fox-step**: 与 Steps 配合使用的相关组件
+