@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,213 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Tag 组件使用规范
+impact: HIGH
+type: capability
+description: 标签
+tags: [foxui, fox-tag, FoxTag]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell-group","fox-cell"]
+---
+
+# Tag 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Tag 是 foxui 中用于 **标签** 的标准组件。
+- **基于**: NutUI `nut-tag` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 标签
+
+> 💡 **关键原则**: 在所有 标签 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `type` | 标签类型，可选值为primary success danger warning | String | default |
+| `color` | 标签颜色 | String | - |
+| `text-color` | 文本颜色，优先级高于color属性 | String | white |
+| `plain` | 是否为空心样式 | Boolean | false |
+| `round` | 是否为圆角样式 | Boolean | false |
+| `mark` | 是否为标记样式 | Boolean | false |
+| `closeable` | 是否为可关闭标签 | Boolean | false |
+| `text` | 文本样式 | Boolean | false |
+| `light` | 轻样式 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击事件 | event |
+| `close` | 关闭事件 | event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 标签显示内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+ <fox-cell-group title="基础用法">
+    <fox-cell title="primary 类型">
+      <template v-slot:link>
+        <fox-tag type="primary">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="success 类型">
+      <template v-slot:link>
+        <fox-tag type="success">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="danger 类型">
+      <template v-slot:link>
+        <fox-tag type="danger">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="warning 类型">
+      <template v-slot:link>
+        <fox-tag type="warning">标签</fox-tag>
+      </template>
+    </fox-cell>
+     <fox-cell title="default 类型">
+      <template v-slot:link>
+        <fox-tag type="default">标签</fox-tag>
+      </template>
+    </fox-cell>
+     <fox-cell title="轻primary 类型">
+      <template v-slot:link>
+        <fox-tag type="primary" light>标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="轻success 类型">
+      <template v-slot:link>
+        <fox-tag type="success" light>标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="轻danger 类型">
+      <template v-slot:link>
+        <fox-tag type="danger" light>标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="轻warning 类型">
+      <template v-slot:link>
+        <fox-tag type="warning" light>标签</fox-tag>
+      </template>
+    </fox-cell>
+     <fox-cell title="轻default 类型">
+      <template v-slot:link>
+        <fox-tag type="default" light>标签</fox-tag>
+      </template>
+    </fox-cell>
+  </fox-cell-group>
+</template>
+
+```
+
+### 样式风格 
+
+```html
+<template>
+  <fox-cell-group title="样式风格">
+    <fox-cell title="空心样式">
+      <template v-slot:link>
+        <fox-tag plain>标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="圆角样式">
+      <template v-slot:link>
+        <fox-tag round type="primary">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="标记样式">
+      <template v-slot:link>
+        <fox-tag mark type="primary">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="可关闭标签">
+      <template v-slot:link>
+        <fox-tag v-if="show" closeable @close="close" type="primary">标签</fox-tag>
+      </template>
+    </fox-cell>
+     <fox-cell title="文字样式">
+      <template v-slot:link>
+        <fox-tag text type="primary">标签</fox-tag>
+      </template>
+    </fox-cell>
+  </fox-cell-group>
+</template>
+
+
+<script lang="ts">
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const show = ref(true);
+    const close = () => {
+      show.value = false;
+    };
+
+    return {
+      close,
+      show
+    };
+  }
+};
+</script>
+
+```
+
+
+### 颜色自定义
+
+```html
+<template>
+  <fox-cell-group title="颜色自定义">
+    <fox-cell title="背景颜色">
+      <template v-slot:link>
+        <fox-tag color="#FA685D">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="文字颜色">
+      <template v-slot:link>
+        <fox-tag color="#E9E9E9" textColor="#999999">标签</fox-tag>
+      </template>
+    </fox-cell>
+    <fox-cell title="空心颜色">
+      <template v-slot:link>
+        <fox-tag color="#FA2400" plain>标签</fox-tag>
+      </template>
+    </fox-cell>
+  </fox-cell-group>
+</template>
+
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Tag 配合使用的相关组件
+- **fox-cell-group**: 与 Tag 配合使用的相关组件
+- **fox-cell**: 与 Tag 配合使用的相关组件
+

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

@@ -0,0 +1,84 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Text 组件使用规范
+impact: HIGH
+type: capability
+description: 文本
+tags: [foxui, fox-text, FoxText]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-row-item","fox-slot-item"]
+---
+
+# Text 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Text 是 foxui 中用于 **文本** 的标准组件。
+- **基于**: NutUI `nut-text` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 文本
+
+> 💡 **关键原则**: 在所有 文本 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `tag` | 文本标签 | String | span |
+| `show-overflow-tooltip` | 映射数据源 | String Boolean | true |
+| `show-arrow` | tooltip是否显示箭头 | Boolean | true |
+| `show-after` | tooltip在触发后多久显示内容，单位毫秒 | Number | 300 |
+| `hide-after` | tooltip延迟关闭，单位毫秒 | Number | 0 |
+| `type` | 类型 | primary | success |
+| `size` | 尺寸 | large | default |
+| `truncated` | 显示省略号 | Boolean | true |
+| `number-format` | 是否数字格式化 | Boolean | false |
+| `digits` | 分块长度 | Number | 4 |
+| `separator` | 分块分割符 | String | 空格 |
+| `decimal-length` | 小数长度 | Number | 0 |
+| `auto-padding` | 是否自动填充 | Boolean | false |
+| `highlight-filter` | 高亮过滤器 | String | Funciton |
+| `color` | mark颜色 | String | - |
+| `text-color` | 文本位置 | left、right | left |
+| `text-postion` | 文本颜色 | String | - |
+| `mark` | 是否为标记样式 | Boolean | false |
+| `divide` | 分割线 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击事件 | event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 标签显示内容 |
+| `mark` | 标签mark内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Text 配合使用的相关组件
+- **fox-group**: 与 Text 配合使用的相关组件
+- **fox-row-item**: 与 Text 配合使用的相关组件
+- **fox-slot-item**: 与 Text 配合使用的相关组件
+

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

@@ -0,0 +1,106 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: TextareaItem 组件使用规范
+impact: HIGH
+type: capability
+description: 多行文本输入
+tags: [foxui, fox-textarea-item, FoxTextareaItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# TextareaItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+TextareaItem 是 foxui 中用于 **多行文本输入** 的标准组件。
+- **基于**: NutUI `nut-textarea-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持占位符提示、支持禁用/只读状态、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 多行文本输入
+
+> 💡 **关键原则**: 在所有 多行文本输入 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `placeholder` | 设置占位提示文字 | String | '请输入内容' |
+| `max-length` | 限制最长输入字符 | String、Number | - |
+| `rows` | textarea的高度，优先级高于autosize属性 | String、Number | 2 |
+| `limit-show` | textarea是否展示输入字符。须配合max-length使用 | Boolean | false |
+| `autosize` | 高度是否可拉伸 | Boolean | false |
+| `text-align` | 文本位置,可选值left,center,right | String | left |
+| `readonly` | 只读属性 | Boolean | false |
+| `disabled` | 禁用属性 | Boolean | false |
+| `autofocus` | 自动获取焦点 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 输入框值改变时触发 | value |
+| `focus` | 聚焦时触发 | event |
+| `blur` | 失焦时触发 | value, event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+```html
+<template>
+  <fox-textarea-item v-model="value" />
+</template>
+<script>
+import { ref } from 'vue';
+export default {
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+};
+</script>
+```
+### 显示字数统计
+```html
+<template>
+  <fox-textarea-item v-model="value" limit-show max-length="20" />
+</template>
+```
+### 高度自定义，拉伸
+```html
+<template>
+  <fox-textarea-item v-model="value" rows="10" autosize />
+</template>
+```
+### 只读、禁用
+```html
+<template>
+  <fox-textarea-item readonly model-value="textarea只读状态" />
+  <fox-textarea-item disabled model-value="textarea禁用状态" limit-show max-length="20" />
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 TextareaItem 配合使用的相关组件
+

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

@@ -0,0 +1,149 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Toast 组件使用规范
+impact: HIGH
+type: capability
+description: 轻提示
+tags: [foxui, fox-toast, FoxToast]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Toast 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Toast 是 foxui 中用于 **轻提示** 的标准组件。
+- **基于**: NutUI `nut-toast` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装
+- **适用场景**: 轻提示
+
+> 💡 **关键原则**: 在所有 轻提示 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+无
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+#### 全局使用方式
+``` javascript
+import { getCurrentInstance } from 'vue'
+
+export default {
+  setup() {
+    const { proxy } = getCurrentInstance();
+    proxy.$toast.text('全局使用方式')
+    return {};
+  },
+};
+```
+
+#### 文字提示
+``` javascript
+import { Toast } from '@fox-js/foxui'
+
+export default {
+  setup() {
+    Toast.text('网络失败，请稍后再试~')
+    return {};
+  },
+};
+```
+#### 标题提示
+
+``` javascript
+Toast.text(msg,{title:'标题文字' });
+```
+#### 成功提示
+
+``` javascript
+Toast.success('成功提示');
+```
+
+#### 失败提示
+
+``` javascript
+Toast.fail('失败提示');
+```
+
+#### 警告提示
+
+``` javascript
+Toast.warn('警告提示');
+```
+
+#### 加载提示
+
+``` javascript
+Toast.loading('加载中');
+```
+
+#### Toast不消失
+
+``` javascript
+Toast.text(msg,{
+    duration:0
+});
+```
+#### Toast自定义底部高度
+
+``` javascript
+Toast.text(msg, {
+    center: false,
+    bottom: '10%'
+});
+```
+
+#### Loading带透明罩
+``` javascript
+Toast.loading(msg,{
+     cover:true
+});
+```
+
+
+####  支持在JS模块中导入使用
+
+``` javascript
+import { Toast } from "@fox-js/foxui"
+Toast.text('在js模块中使用')
+// 返回实例，可以手动调用实例中的hide方法关闭提示
+const toast = Toast.loading('在js模块中使用')
+toast.hide();
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Toast 配合使用的相关组件
+

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

@@ -0,0 +1,89 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Tour 组件使用规范
+impact: HIGH
+type: capability
+description: 漫游式引导组件,用以展示指标趋势
+tags: [foxui, fox-tour, FoxTour]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-switch","fox-tour-content-inner","fox-custom-tour","fox-customword-tour","fox-customstyle-tour","fox-divider"]
+---
+
+# Tour 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Tour 是 foxui 中用于 **漫游式引导组件,用以展示指标趋势** 的标准组件。
+- **基于**: NutUI `nut-tour` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 漫游式引导组件,用以展示指标趋势
+
+> 💡 **关键原则**: 在所有 漫游式引导组件,用以展示指标趋势 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 是否展示引导弹出层 | boolean | false |
+| `type` | 引导类型 | string | step |
+| `steps` | 引导步骤内容 | StepOptions |  |
+| `offset` | 镂空遮罩相对于目标元素的偏移量 | number, number | 8, 10 |
+| `current` | 类型为 step 时，默认展示第几步 | number | 0 |
+| `custom-class` | 自定义 class 值 | string | '' |
+| `location` | 弹出层位置,同 Popopver 的location 属性 | string | 'bottom' |
+| `next-step-Txt` | 下一步按钮文案 | string | '下一步' |
+| `prev-step-Txt` | 上一步按钮文案 | string | '上一步'  |
+| `complete-txt` | 完成按钮文案 | string | '完成' |
+| `mask` | 是否显示镂空遮罩 | boolean | true |
+| `bg-color` | 自定义背景色 | boolean | '' |
+| `theme` | 气泡遮罩层主题,同 Popopver 的theme 属性 | string | 'light' |
+| `mask-width` | 镂空遮罩层宽度 | number \ | string |
+| `mask-height` | 镂空遮罩层高度 | number \ | string |
+| `close-on-click-overlay` | 是否在点击镂空遮罩层后关闭,同 Popopver 的closeOnClickOverlay 属性 | Boolean | true |
+| `show-prev-step` | 是否展示上一步按钮 | boolean | true |
+| `show-title-bar` | 是否展示标题栏 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 切换步骤时触发 |
+| `close` | 气泡层关闭时触发 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义气泡层内容 |
+| `prev-step` | 自定义上一步内容 |
+| `next-step` | 自定义下一步内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Tour 配合使用的相关组件
+- **fox-cell**: 与 Tour 配合使用的相关组件
+- **fox-switch**: 与 Tour 配合使用的相关组件
+- **fox-tour-content-inner**: 与 Tour 配合使用的相关组件
+- **fox-custom-tour**: 与 Tour 配合使用的相关组件
+- **fox-customword-tour**: 与 Tour 配合使用的相关组件
+- **fox-customstyle-tour**: 与 Tour 配合使用的相关组件
+- **fox-divider**: 与 Tour 配合使用的相关组件
+

package/foxui/references/fox-trend-arrow/doc.md

@@ -0,0 +1,72 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: TrendArrow 组件使用规范
+impact: HIGH
+type: capability
+description: 带有箭头指示的百分比数字,用以展示指标趋势
+tags: [foxui, fox-trend-arrow, FoxTrendArrow]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell"]
+---
+
+# TrendArrow 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+TrendArrow 是 foxui 中用于 **带有箭头指示的百分比数字,用以展示指标趋势** 的标准组件。
+- **基于**: NutUI `nut-trend-arrow` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 带有箭头指示的百分比数字,用以展示指标趋势
+
+> 💡 **关键原则**: 在所有 带有箭头指示的百分比数字,用以展示指标趋势 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `rate` | 数值，大于0时箭头向上，小于0时箭头向下 | number | - |
+| `digits` | 小数位精度 | number | 2 |
+| `show-sign` | 是否显示加减号 | boolean | false |
+| `show-zero` | 是否显示 0 | boolean | false |
+| `arrow-left` | 是否在数字左侧显示箭头 | boolean | false |
+| `sync-text-color` | 文字颜色是否与箭头同步 | boolean | true |
+| `text-color` | 文字颜色 | string | 333333 |
+| `rise-color` | 向上箭头颜色 | string | fa2c19 |
+| `drop-color` | 向下箭头颜色 | string | 64b578 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `up-icon` | 自定义向上箭头图标，默认使用 TriangleUp |
+| `down-icon` | 自定义向下箭头图标，默认使用 TriangleDown |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 TrendArrow 配合使用的相关组件
+- **fox-cell**: 与 TrendArrow 配合使用的相关组件
+