@fox-js/phone-skills 4.0.1-0

package/foxui/references/fox-fixed-nav/doc.md

@@ -0,0 +1,72 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: FixedNav 组件使用规范
+impact: HIGH
+type: capability
+description: 可拖拽的悬浮导航
+tags: [foxui, fox-fixed-nav, FoxFixedNav]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-fixednav","fox-drag","fox-icon"]
+---
+
+# FixedNav 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+FixedNav 是 foxui 中用于 **可拖拽的悬浮导航** 的标准组件。
+- **基于**: NutUI `nut-fixed-nav` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 可拖拽的悬浮导航
+
+> 💡 **关键原则**: 在所有 可拖拽的悬浮导航 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `visible` | 是否打开 | Boolean | false |
+| `nav-list` | 悬浮列表内容数据 | Array |  |
+| `active-text` | 收起列表按钮文案 | String | 收起导航 |
+| `un-active-text` | 展开列表按钮文案 | String | 快速导航 |
+| `type` | 导航方向,可选值 left right | String | right |
+| `overlay` | 展开时是否显示遮罩 | Boolean | true |
+| `position` | fixed 垂直位置 | Object | top: 'auto',bottom: 'auto' |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `selected` | 选择之后触发 | item:item,event:Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `btn` | 自定义按钮 |
+| `list` | 自定义展开列表内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 FixedNav 配合使用的相关组件
+- **fox-fixednav**: 与 FixedNav 配合使用的相关组件
+- **fox-drag**: 与 FixedNav 配合使用的相关组件
+- **fox-icon**: 与 FixedNav 配合使用的相关组件
+

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

@@ -0,0 +1,142 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: FloatingButton 组件使用规范
+impact: HIGH
+type: capability
+description: 浮动按钮
+tags: [foxui, fox-floating-button, FoxFloatingButton]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# FloatingButton 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+FloatingButton 是 foxui 中用于 **浮动按钮** 的标准组件。
+- **基于**: NutUI `nut-floating-button` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 浮动按钮
+
+> 💡 **关键原则**: 在所有 浮动按钮 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `top` | top坐标 | string | - |
+| `right` | right坐标 | string | - |
+| `bottom` | bottom坐标 | string | - |
+| `left` | left坐标 | string | - |
+| `width` | 宽度 | string | - |
+| `height` | 高度 | string | - |
+| `color` | 前景色 | string | - |
+| `background` | 背景色 | string | - |
+| `border-radius` | 边框圆角 | string | - |
+| `draggable` | 启用可拖拽功能 | boolean | false |
+| `custom-class` | 自定义class | stirng | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击按钮触发 | - |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `defualt` | 自定义标签 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+```html
+<template>
+ <h2>基础用法</h2>
+    <fox-floating-button @click="onClickForBasic" right="50px" bottom="100px"></fox-floating-button>
+</template>
+<script lang="ts" setup>
+import { Toast } from '@fox-js/foxui'
+// 点击事件
+const onClickForBasic = () => {
+  Toast.success('基础用法')
+}
+</script>
+```
+### 自定义样式
+通过属性`color`和`background`设置按钮的样式
+```html
+<template>
+ <h2>自定义样式</h2>
+ <fox-floating-button
+      @click="onClickForCustom"
+      right="50px"
+      bottom="250px"
+      background="linear-gradient(136.56deg, rgba(251, 139, 45, 1) 0%, rgba(255, 82, 23, 1) 100%)"
+      ><span>自</span></fox-floating-button
+    >
+</template>
+<script lang="ts" setup>
+import { Toast } from '@fox-js/foxui'
+// 点击事件
+const onClickForCustom = () => {
+  Toast.success('自定义')
+}
+</script>
+```
+### 可拖拽
+通过属性`draggable`设置按钮可拖拽
+```html
+<template>
+ <h2>可拖拽</h2>
+ <fox-floating-button @click="onClickForDraggable" right="250px" bottom="100px" :draggable="true">
+      <span>拖拽</span>
+    </fox-floating-button>
+</template>
+<script lang="ts" setup>
+import { Toast } from '@fox-js/foxui'
+// 点击事件
+const onClickForDraggable = () => {
+  Toast.success('可拖拽')
+}
+</script>
+```
+### 修改图标
+使用插槽修改图片或者内容
+```html
+<template>
+  <h2>更新图标</h2>
+    <fox-floating-button @click="onClickForIcon" right="250px" bottom="250px">
+      <Star width="20px" height="20px"></Star>
+    </fox-floating-button>
+</template>
+<script lang="ts" setup>
+import { Toast } from '@fox-js/foxui'
+import { Star } from '@fox-js/icons-vue'
+// 点击事件
+const onClickForIcon = () => {
+  Toast.success('修改图标')
+}
+</script>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 FloatingButton 配合使用的相关组件
+

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

@@ -0,0 +1,69 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Grid 组件使用规范
+impact: HIGH
+type: capability
+description: 用于分隔成等宽区块进行页面导航
+tags: [foxui, fox-grid, FoxGrid]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-grid-item","fox-avatar","fox-avator"]
+---
+
+# Grid 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Grid 是 foxui 中用于 **用于分隔成等宽区块进行页面导航** 的标准组件。
+- **基于**: NutUI `nut-grid` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 用于分隔成等宽区块进行页面导航
+
+> 💡 **关键原则**: 在所有 用于分隔成等宽区块进行页面导航 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `text` | 文字 | string | - |
+| `url` | 点击后跳转的链接地址 | string | '' |
+| `to` | 点击后跳转的目标路由对象，同 vue-router 的 to 属性https://router.vuejs.org/zh/api/to 属性 | string \ | object |
+| `replace` | 是否在跳转时替换当前页面历史 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击格子时触发 | event: Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义所有内容 |
+| `text` | 自定义文字 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Grid 配合使用的相关组件
+- **fox-grid-item**: 与 Grid 配合使用的相关组件
+- **fox-avatar**: 与 Grid 配合使用的相关组件
+- **fox-avator**: 与 Grid 配合使用的相关组件
+

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

@@ -0,0 +1,295 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Group 组件使用规范
+impact: HIGH
+type: capability
+description: 页面group
+tags: [foxui, fox-group, FoxGroup]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-item","fox-page","fox-content","fox-input-item","fox-money-item","fox-date-item"]
+---
+
+# Group 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Group 是 foxui 中用于 **页面group** 的标准组件。
+- **基于**: NutUI `nut-group` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持标签位置自定义、适配 H5 与小程序多端、支持插槽扩展自定义内容、内置表单校验能力、支持主题定制
+- **适用场景**: 页面group
+
+> 💡 **关键原则**: 在所有 页面group 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `prop` | 名称 | String | - |
+| `title` | 标题 | String | - |
+| `title-color` | 标题颜色 | String | - |
+| `type` | 布局类型 | grid,form,flow | - |
+| `span` | 跨列（用于子group） | String,Number | - |
+| `offset` | 偏移（用于子group） | String,Number | - |
+| `is-wrap` | 是否包裹容器 | Boolean | false |
+| `rules` | group范围校验规则 | Object | - |
+| `modelValue` | v-model or model-value 用于重置group范围表单数据 | Object | - |
+| `auto-layout` | 是否允许自动调整布局 | boolean | true |
+| `show-mark` | 是否显示mark标志 | boolean | true |
+| `mark-color` | mark的颜色 | string | - |
+| `column` | group列数 | string | number |
+| `columnWidth` | group列宽与列数column为互斥关系，仅在type=grid情况下生效 | string | - |
+| `gutter` | item的间隔 | string | number |
+| `justify` | grid 布局下的水平排列方式 | string | start |
+| `align` | grid 布局下的垂直排列方式 | string | start |
+| `min-item-width` | grou内item最小宽度，自动布局能通过调整列数来适配 | string | number |
+| `max-item-width` | grou内item最大宽度，自动布局能通过调整列数来适配 | string | number |
+| `collapse` | 是否支持内容区折叠 | boolean | - |
+| `show-collapse` | 是否显示内容区折叠按钮 | boolean | - |
+| `collapse-position` | 折叠区域位置 | left,right | - |
+| `collapse-text` | 折叠提示文本 | string | - |
+| `collapse-icon` | 折叠提示图标 | Component | - |
+| `expand-text` | 展开提示文本 | string | - |
+| `expand-icon` | 展开提示图标 | Compnent | - |
+| `rolling-display` | 是否支持滚动显示 | boolean | true |
+| `browse` | 浏览模式 | on | off |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `header-click` | 头部点击事件 | — |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `validate` | 校验页面范围内的组件 | — |
+| `clearValidate` | 清空校验信息 | — |
+| `setNameValidateRules` | 设置校验规则 | — |
+| `resetFields` | 重置数据并清空校验信息 | — |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 内容 |
+| `header` | 头部栏插槽 |
+| `toolbar` | 工具栏插槽 |
+| `toolbar` | 工具栏插槽 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+通过`fox-group`的`column`属性设置`group`的容器的列，放置在容器内容`fox-item`按列进行布局
+
+```html
+ <fox-group label-position="left" title="基础用法" column="4">
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item red">1</div>
+      </template>
+    </fox-item>
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item blue">2</div>
+      </template>
+    </fox-item>
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item green">3</div>
+      </template>
+    </fox-item>
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item gray">4</div>
+      </template>
+    </fox-item>
+  </fox-group>
+```
+
+### 跨列
+
+通过`fox-group`的`column`和`span`属性的组合实现更加灵活的布局
+
+```html
+<fox-group label-position="left" title="3列+跨列" column="3">
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item red">1</div>
+      </template>
+    </fox-item>
+    <fox-item span="2">
+      <template v-slot:default>
+        <div class="demo-item blue">2</div>
+      </template>
+    </fox-item>
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item green">3</div>
+      </template>
+    </fox-item>
+    <fox-item>
+      <template v-slot:default>
+        <div class="demo-item gray">4</div>
+      </template>
+    </fox-item>
+  </fox-group>
+```
+
+### 偏移
+
+* 通过`fox-group`的`offset`属性，对`item`类组件进行偏移
+
+```html
+ <fox-page :height="150">
+    <fox-content>
+      <fox-group title="4列+偏移" column="4">
+        <fox-item>
+          <template v-slot:default>
+            <div class="demo-item red">1</div>
+          </template>
+        </fox-item>
+        <fox-item :offset="2">
+          <template v-slot:default>
+            <div class="demo-item blue">2(offset2)</div>
+          </template>
+        </fox-item>
+        <fox-item>
+          <template v-slot:default>
+            <div class="demo-item green">3</div>
+          </template>
+        </fox-item>
+        <fox-item span="2" offset="1">
+          <template v-slot:default>
+            <div class="demo-item gray">4(span:2,offset:1)</div>
+          </template>
+        </fox-item>
+      </fox-group>
+    </fox-content>
+  </fox-page>
+```
+
+### Group组合
+
+```html
+<fox-group v-if="true" title="Group组合" column="2">
+    <fox-group>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item red">1</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item green">2</div>
+        </template>
+      </fox-item>
+    </fox-group>
+    <fox-group column="2">
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item red">1</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item blue">2</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item green">3</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item gray">4</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item red">5</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item blue">6</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item green">7</div>
+        </template>
+      </fox-item>
+      <fox-item>
+        <template v-slot:default>
+          <div class="demo-item gray">8</div>
+        </template>
+      </fox-item>
+    </fox-group>
+  </fox-group>
+```
+
+
+### 无标题
+
+```html
+<fox-group>
+    <fox-input-item>文本</fox-input-item>
+    <fox-money-item unit="元">金额</fox-money-item>
+    <fox-date-item>日期</fox-date-item>
+ </fox-group>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Group 配合使用的相关组件
+- **fox-item**: 与 Group 配合使用的相关组件
+- **fox-page**: 与 Group 配合使用的相关组件
+- **fox-content**: 与 Group 配合使用的相关组件
+- **fox-input-item**: 与 Group 配合使用的相关组件
+- **fox-money-item**: 与 Group 配合使用的相关组件
+- **fox-date-item**: 与 Group 配合使用的相关组件
+
+## 5. 子组件 API (Sub-components)
+
+### FoxItem Attributes
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `span` | 跨列 | String,Number | - |
+| `offset` | 偏移 | String,Number | - |
+| `width` | 宽度 | String,Number | - |
+
+### FoxItem Methods
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `validate` | 执行校验 | — |
+| `clearValidate` | 清空校验信息 | — |
+| `setValidateRule` | 设置校验规则 | — |
+
+### FoxRowItem Attributes
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `align` | 对齐方式 | Stringleft,center,right | center |
+| `divide` | 启用分隔符 | String | false |
+
+### FoxRowItem Slots
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 内容 |
+

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

@@ -0,0 +1,65 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Icon 组件使用规范
+impact: HIGH
+type: capability
+description: 图标
+tags: [foxui, fox-icon, FoxIcon]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Icon 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Icon 是 foxui 中用于 **图标** 的标准组件。
+- **基于**: NutUI `nut-icon` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装
+- **适用场景**: 图标
+
+> 💡 **关键原则**: 在所有 图标 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `name` | 图标名称或图片链接 | string | - |
+| `color` | 图标颜色 | string | - |
+| `width` | 图标大小，如 20px 2em 2rem | string \ | object |
+| `height` | 图标大小，如 20px 2em 2rem | string \ | object |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击图标时触发 | event: Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Icon 配合使用的相关组件
+