@fox-js/phone-skills 4.0.1-0

package/foxui/references/fox-back-top/doc.md

@@ -0,0 +1,69 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: BackTop 组件使用规范
+impact: HIGH
+type: capability
+description: 较长页面快捷返回顶部
+tags: [foxui, fox-back-top, FoxBackTop]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# BackTop 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+BackTop 是 foxui 中用于 **较长页面快捷返回顶部** 的标准组件。
+- **基于**: NutUI `nut-back-top` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 较长页面快捷返回顶部
+
+> 💡 **关键原则**: 在所有 较长页面快捷返回顶部 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `el-id` | 获取监听元素的父级元素 | String | - |
+| `bottom` | 距离页面底部距离 | Number | 20 |
+| `right` | 距离页面右侧距离 | Number | 10 |
+| `distance` | 页面垂直滚动多高后出现 | Number | 200 |
+| `z-index` | 设置组件页面层级 | Number | 10 |
+| `is-animation` | 是否有动画,和duration参数互斥 | Boolean | true |
+| `duration` | 设置动画持续时间 | Number | 1000 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 按钮点击时触发事件 | event: MouseEvent |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 默认 slot，用以自定义内容 |
+| `content` | 内容 slot |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 BackTop 配合使用的相关组件
+

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

@@ -0,0 +1,72 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Badge 组件使用规范
+impact: HIGH
+type: capability
+description: 徽标
+tags: [foxui, fox-badge, FoxBadge]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-avatar","fox-icon"]
+---
+
+# Badge 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Badge 是 foxui 中用于 **徽标** 的标准组件。
+- **基于**: NutUI `nut-badge` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 徽标
+
+> 💡 **关键原则**: 在所有 徽标 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `value` | 显示的内容 | String | - |
+| `max` | value 为数值时，最大值 | Number | 10000 |
+| `z-index` | 徽标的 z-index 值 | Number | 10 |
+| `dot` | 是否为小点 | Boolean | false |
+| `hidden` | 是否隐藏 | Boolean | false |
+| `top` | 上下偏移量，支持单位设置，可设置为：5px 等 | Number | 0 |
+| `right` | 左右偏移量，支持单位设置，可设置为：5px 等 | Number | 0 |
+| `color` | 徽标背景颜色 | String | fa2c19 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 徽标包裹的子元素 |
+| `icons` | 徽标自定义 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Badge 配合使用的相关组件
+- **fox-avatar**: 与 Badge 配合使用的相关组件
+- **fox-icon**: 与 Badge 配合使用的相关组件
+

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

@@ -0,0 +1,116 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Barrage 组件使用规范
+impact: HIGH
+type: capability
+description: 用于视频弹幕等展示
+tags: [foxui, fox-barrage, FoxBarrage]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Barrage 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Barrage 是 foxui 中用于 **用于视频弹幕等展示** 的标准组件。
+- **基于**: NutUI `nut-barrage` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 用于视频弹幕等展示
+
+> 💡 **关键原则**: 在所有 用于视频弹幕等展示 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `danmu` | 弹幕列表数据 | Array |  |
+| `frequency` | 可视区域内每个弹幕出现的时间间隔 | number | 500 |
+| `speeds` | 每个弹幕的滚动时间 | number | 5000 |
+| `rows` | 弹幕行数，分几行展示 | number | 3 |
+| `top` | 弹幕垂直距离 | number | 10 |
+| `loop` | 是否循环播放 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `add` | 添加数据通过 ref 实例使用 | - |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<template>
+  <fox-barrage ref="danmu" :danmu="list"></fox-barrage>
+  <div class="test">
+    <button @click="addDanmu" class="add fox-button--primary">随机添加</button>
+  </div>
+</template>
+<script>
+import { ref } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const inputVal = ref('');
+    const danmu = ref(null);
+    let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
+    function addDanmu() {
+      let n = Math.random();
+      danmu.value.add('随机——' + String(n).substr(2, 10));
+    }
+    return {
+      inputVal,
+      danmu,
+      list,
+      addDanmu
+    };
+  }
+};
+</script>
+```
+
+
+### slot 用法
+
+
+```html
+<template>
+  <fox-barrage>
+    <span>aaa</span>
+    <span>bbb</span>
+    <span>ccc</span>
+    <span>ddd</span>
+  </fox-barrage>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Barrage 配合使用的相关组件
+

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

@@ -0,0 +1,203 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Button 组件使用规范
+impact: HIGH
+type: capability
+description: 按钮用于触发一个操作，如提交表单。
+tags: [foxui, fox-button, FoxButton]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Button 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Button 是 foxui 中用于 **按钮用于触发一个操作，如提交表单。** 的标准组件。
+- **基于**: NutUI `nut-button` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持禁用/只读状态、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 按钮用于触发一个操作，如提交表单。
+
+> 💡 **关键原则**: 在所有 按钮用于触发一个操作，如提交表单。 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `type` | 类型，可选值为 primary info warning danger success | String | default |
+| `size` | 尺寸，可选值为 large small mini | String | normal |
+| `shape` | 形状，可选值为 square | String | round |
+| `color` | 按钮颜色，支持传入 linear-gradient 渐变色 | String | - |
+| `plain` | 是否为朴素按钮 | Boolean | false |
+| `disabled` | 是否禁用按钮 | Boolean | false |
+| `block` | 是否为块级元素 | Boolean | false |
+| `loading` | 按钮 loading 状态 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击按钮时触发 | event: MouseEvent |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 按钮内容 |
+| `icon` | 按钮图标 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 按钮类型
+
+按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
+
+
+```html
+<template>
+  <fox-button type="primary">主要按钮</fox-button>
+  <fox-button type="info">信息按钮</fox-button>
+  <fox-button type="default">默认按钮</fox-button>
+  <fox-button type="danger">危险按钮</fox-button>
+  <fox-button type="warning">警告按钮</fox-button>
+  <fox-button type="success">成功按钮</fox-button>
+</template>
+```
+
+### 朴素按钮
+
+通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```html
+<template>
+  <fox-button plain type="primary">朴素按钮</fox-button>
+  <fox-button plain type="info">朴素按钮</fox-button>
+</template>
+```
+
+### 禁用状态
+
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
+
+```html
+<template>
+  <fox-button disabled type="primary">禁用状态</fox-button>
+  <fox-button plain disabled type="info">禁用状态</fox-button>
+  <fox-button plain disabled type="primary">禁用状态</fox-button>
+</template>
+```
+
+### 按钮形状
+
+通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。
+
+
+```html
+<template>
+  <fox-button shape="square" type="primary">方形按钮</fox-button>
+  <fox-button type="info">圆形按钮</fox-button>
+</template>
+```
+
+### 加载状态
+
+```html
+<template>
+  <fox-button loading type="info"></fox-button>
+  <fox-button loading type="warning">加载中...</fox-button>
+  <fox-button :loading="isLoading" type="success" @click="changeLoading">Click me!</fox-button>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      let isLoading = ref(false);
+      const changeLoading = () => {
+        isLoading.value = true;
+        setTimeout(() => {
+          isLoading.value = false;
+        }, 3000);
+      };
+      return {
+        isLoading,
+        changeLoading
+      };
+    }
+  };
+</script>
+```
+
+### 图标按钮
+
+通过插槽icon来加入图标
+
+```html
+<template>
+  <fox-button shape="square" plain type="primary">
+     <template v-slot:icon><StarFill /></template>
+  </fox-button>
+  <fox-button shape="square" type="primary">
+     <template v-slot:icon><Star /></template>收藏
+  </fox-button>
+</template>
+```
+
+
+
+### 按钮尺寸
+
+支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
+
+```html
+<template>
+  <fox-button size="large" type="primary">大号按钮</fox-button>
+  <fox-button type="primary">普通按钮</fox-button>
+  <fox-button size="small" type="primary">小型按钮</fox-button>
+  <fox-button size="mini" type="primary">迷你按钮</fox-button>
+</template>
+```
+
+### 块级元素
+
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
+
+
+```html
+<template>
+  <fox-button block type="primary">块级元素</fox-button>
+</template>
+```
+
+### 自定义颜色
+
+通过 color 属性可以自定义按钮的颜色。
+
+```html
+<template>
+  <fox-button color="#7232dd">单色按钮</fox-button>
+  <fox-button color="#7232dd" plain>单色按钮</fox-button>
+  <fox-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变色按钮 </fox-button>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Button 配合使用的相关组件
+