@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,74 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Cell 组件使用规范
+impact: HIGH
+type: capability
+description: 展示列表
+tags: [foxui, fox-cell, FoxCell]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell-group","fox-switch","fox-icon"]
+---
+
+# Cell 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Cell 是 foxui 中用于 **展示列表** 的标准组件。
+- **基于**: NutUI `nut-cell` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 展示列表
+
+> 💡 **关键原则**: 在所有 展示列表 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `title` | 标题名称 | String | - |
+| `sub-title` | 左侧副标题 | String | - |
+| `desc` | 右侧描述 | String | - |
+| `desc-text-align` | 右侧描述文本对齐方式 text-alignhttps://www.w3school.com.cn/cssref/pr_text_text-align.asp | String | right |
+| `is-link` | 是否展示右侧箭头并开启点击反馈 | Boolean | false |
+| `round-radius` | 圆角半径 | Number | 6px |
+| `center` | 是否使内容垂直居中 | Boolean | false |
+| `size` | 单元格大小，可选值为 large | String | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击事件 | event:Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `icon` | 自定义左侧 icon 区域 |
+| `default` | 自定义内容 |
+| `link` | 自定义右侧 link 区域 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Cell 配合使用的相关组件
+- **fox-cell-group**: 与 Cell 配合使用的相关组件
+- **fox-switch**: 与 Cell 配合使用的相关组件
+- **fox-icon**: 与 Cell 配合使用的相关组件
+

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

@@ -0,0 +1,387 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: CheckboxItem 组件使用规范
+impact: HIGH
+type: capability
+description: 多选按钮组
+tags: [foxui, fox-checkbox-item, FoxCheckboxItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-slot-item","fox-checkbox","fox-checkbox-group","fox-row-item","fox-button","fox-switch-item"]
+---
+
+# CheckboxItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+CheckboxItem 是 foxui 中用于 **多选按钮组** 的标准组件。
+- **基于**: NutUI `nut-checkbox-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 多选按钮组
+
+> 💡 **关键原则**: 在所有 多选按钮组 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 输入值，双向绑定 | String | - |
+| `text-align` | 文本位置,可选值left,center,right | String | left |
+| `label` | 标签 | String | - |
+| `label-width` | 标签宽度 | String | - |
+| `label-position` | 标签位置可选值left,right,top | String | - |
+| `is-required` | 左侧号是否展示 | Boolean | false |
+| `disabled` | 是否禁用 | Boolean | false |
+| `readonly` | 是否只读 | Boolean | false |
+| `error-tip` | 错误提示 | String | - |
+| `error-icon` | 错误提示图标 | Component | - |
+| `warn-tip` | 警告提示 | String | - |
+| `warn-icon` | 警告提示图标 | Component | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | Component | - |
+| `valueType` | 值的类型text:item.text,value:item.value,item:item | String | "value" |
+| `text-key` | 指定异构数据源的text key | String | "text" |
+| `value-key` | 指定异构数据源的value key | String | "value" |
+| `disabled-key` | 指定异构数据源的disabled key | String | "disabled" |
+| `shape` | radio形状 | String |  button |
+| `icon-size` | icon大小 | String | - |
+| `icon` | 默认图标 | Component | - |
+| `checkedIcon` | 选中图标 | Component | - |
+| `indeterminateIcon` | 半选状态图标 | Component | - |
+| `direction` | radio排序方式 | String |  vertical  |
+| `text-position` | radio label位置 | String | left |
+| `source` | 数据源 | string / array/ function  | — |
+| `source-filter` | 数据源过滤器 | function | — |
+| `param` | 请求参数配置数据源api使用 | record<string,any> | — |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 值变化时触发 | 当前选中项值（value）设置value后有值、默认为空 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `toggleAll` | 选中/清空所有 | checked |
+| `toggleReverse` | 反选 | - |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `options` | source为空的情况下，直接编写checkbox列表 |
+| `default` | label |
+| `text` | 自定义checkbox项的text内容 |
+| `icon` | 默认图标 |
+| `checkedIcon` | 选中图标 |
+| `indeterminateIcon` | 半选图标 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 左侧位置
+通过 **v-model** 绑定值当前选项的 **value**，并且通过**source**属性设置checkbox列表，并通过`text-position`设置label位置
+```html
+ <fox-checkbox-item v-model="val" :source="m_items" text-position="left"></fox-checkbox-item>
+```
+```ts
+// item数据源
+const m_items = ref([
+  {
+    text: '复选框1',
+    value: '1'
+  },
+  {
+    text: '复选框2',
+    value: '2'
+  },
+  {
+    text: '复选框3',
+    value: '3'
+  }
+])
+const val = ref<string[] | string>('')
+```
+### 右侧位置
+通过`text-position`设置label的位置
+```html
+<fox-checkbox-item v-model="val2" :source="m_items"></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+// item数据源
+const m_items = ref([
+  {
+    text: '复选框1',
+    value: '1'
+  },
+  {
+    text: '复选框2',
+    value: '2'
+  },
+  {
+    text: '复选框3',
+    value: '3'
+  }
+])
+const val2 = ref<string[] | string>(['2'])
+```
+### 按钮形状
+```html
+<fox-checkbox-item v-model="val3" :source="m_items" direction="horizontal" shape="button"></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+// item数据源
+const m_items = ref([
+  {
+    text: '复选框1',
+    value: '1'
+  },
+  {
+    text: '复选框2',
+    value: '2'
+  },
+  {
+    text: '复选框3',
+    value: '3'
+  }
+])
+const val3 = ref<string[] | string>(['3'])
+```
+### 水平排序
+通过属性`direction`设置排列方式
+```html
+<fox-checkbox-item v-model="val3" :source="m_items" direction="horizontal" ></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+// item数据源
+const m_items = ref([
+  {
+    text: '复选框1',
+    value: '1'
+  },
+  {
+    text: '复选框2',
+    value: '2'
+  },
+  {
+    text: '复选框3',
+    value: '3'
+  }
+])
+const val3 = ref<string[] | string>(['3'])
+```
+### 自定义样式
+通过`icon-size`设置图标大小，并可以通过插槽`icon`,`checkedIcon`和`indeterminateIcon`来设置自定义图标
+```html
+<fox-checkbox-item v-model="val4" :source="m_items4" icon-size="10px"></fox-checkbox-item>
+<fox-checkbox-item v-model="val5" :source="m_items5">
+  <template v-slot:icon>
+     <Checklist></Checklist>
+  </template>
+ <template v-slot:checkedIcon>
+     <Checklist color="red"></Checklist>
+  </template>
+ </fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+import { Checklist } from
+const val4 = ref<string[]>([])
+const m_items4 = ref([
+  {
+    text: '自定义尺寸10',
+    value: '1'
+  },
+  {
+    text: '自定义尺寸10',
+    value: '2'
+  }
+])
+const val5 = ref<string[]>([])
+const m_items5 = ref([
+  {
+    text: '自定义图标',
+    value: '1'
+  },
+  {
+    text: '自定义图标',
+    value: '2'
+  }
+])
+```
+### 禁用/只读
+```html
+<fox-group title="禁用状态" column="1" style="margin-top: 20px">
+    <fox-checkbox-item v-model="val6" :source="m_items6" :disabled="true"></fox-checkbox-item>
+</fox-group>
+<fox-group title="只读状态" column="1" style="margin-top: 20px">
+    <fox-checkbox-item v-model="val7" :source="m_items7" :readonly="true"></fox-checkbox-item>
+</fox-group>
+<fox-group title="部分禁用" style="margin-top: 20px">
+    <fox-checkbox-item v-model="val8" :source="m_items8"></fox-checkbox-item>
+</fox-group>
+```
+```ts
+import { ref } from 'vue'
+const val6 = ref<string[]>([])
+const m_items6 = ref([
+  {
+    text: '禁用复选框1',
+    value: '1'
+  },
+  {
+    text: '禁用复选框2',
+    value: '2'
+  }
+])
+const val7 = ref<string[]>(['1'])
+const m_items7 = ref([
+  {
+    text: '只读复选框1',
+    value: '1'
+  },
+  {
+    text: '只读复选框2',
+    value: '2'
+  }
+])
+const val8 = ref<string[]>([])
+const m_items8 = ref([
+  {
+    text: '部分禁用',
+    value: '1',
+    disabled: true
+  },
+  {
+    text: '部分禁用',
+    value: '2'
+  },
+  {
+    text: '部分禁用',
+    value: '3'
+  }
+])
+```
+### 全选/半选/取消
+```html
+ <fox-group title="全选/半选/取消" column="1" style="margin-top: 20px">
+    <fox-slot-item>
+        <fox-checkbox v-model="val9" :indeterminate="indeterminate" @change="onChange">全选</fox-checkbox>
+    </fox-slot-item>
+    <fox-checkbox-item v-model="val10" :source="m_items10" @change="onGroupChange"></fox-checkbox-item>
+</fox-group>
+```
+```ts
+import { ref } from 'vue'
+const val9 = ref(false)
+const indeterminate = ref(false)
+const onChange = (val: boolean) => {
+  if (val) {
+    indeterminate.value = false
+    val10.value = m_items10.value.map(item => {
+      return item.value
+    })
+  } else if (!val && indeterminate.value === false) {
+    val10.value = []
+  }
+}
+const onGroupChange = (vals: string[]) => {
+  if (vals.length === m_items10.value.length) {
+    val9.value = true
+    indeterminate.value = false
+  } else if (vals.length > 0) {
+    val9.value = false
+    indeterminate.value = true
+  } else {
+    val9.value = false
+    indeterminate.value = false
+  }
+}
+const val10 = ref<string[]>([])
+const m_items10 = ref([
+  {
+    text: '组合复选框1',
+    value: '1'
+  },
+  {
+    text: '组合复选框2',
+    value: '2'
+  },
+  {
+    text: '组合复选框3',
+    value: '3'
+  },
+  {
+    text: '组合复选框4',
+    value: '4'
+  }
+])
+```
+### 返回类型
+通过fox-checkbox-group组件**value-type**设置v-model绑定的数据类型
+* value(默认) 绑定item对象的item.value
+* text 绑定item对象的item.text
+* item 绑定item对象
+#### 返回value类型
+```html
+<fox-checkbox-item v-model="val11" :source="m_items11"></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+const val11 = ref(['1'])
+const m_items11 = ref([
+  { text: '返回value1', value: '1' },
+  { text: '返回value2', value: '2' },
+  { text: '返回value3', value: '3' }
+])
+```
+### 返回text类型
+```html
+<fox-checkbox-item value-type="text" v-model="val12" :source="m_items12"></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+const val12 = ref(['返回text2'])
+const m_items12 = ref([
+  { text: '返回text1', value: '1' },
+  { text: '返回text2', value: '2' },
+  { text: '返回text3', value: '3' }
+])
+```
+### 返回item类型
+```html
+<fox-checkbox-item value-type="item" v-model="val13" :source="m_items13"></fox-checkbox-item>
+```
+```ts
+import { ref } from 'vue'
+const val13 = ref([{ text: '返回Item3', value: '3' }])
+const m_items13 = ref([
+  { text: '返回Item1', value: '1' },
+  { text: '返回Item2', value: '2' },
+  { text: '返回Item3', value: '3' }
+])
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 CheckboxItem 配合使用的相关组件
+- **fox-group**: 与 CheckboxItem 配合使用的相关组件
+- **fox-slot-item**: 与 CheckboxItem 配合使用的相关组件
+- **fox-checkbox**: 与 CheckboxItem 配合使用的相关组件
+- **fox-checkbox-group**: 与 CheckboxItem 配合使用的相关组件
+- **fox-row-item**: 与 CheckboxItem 配合使用的相关组件
+- **fox-button**: 与 CheckboxItem 配合使用的相关组件
+- **fox-switch-item**: 与 CheckboxItem 配合使用的相关组件
+

package/foxui/references/fox-circle-progress/doc.md

@@ -0,0 +1,65 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: CircleProgress 组件使用规范
+impact: HIGH
+type: capability
+description: 用来展示进度
+tags: [foxui, fox-circle-progress, FoxCircleProgress]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-circleprogress","fox-button"]
+---
+
+# CircleProgress 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+CircleProgress 是 foxui 中用于 **用来展示进度** 的标准组件。
+- **基于**: NutUI `nut-circle-progress` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 用来展示进度
+
+> 💡 **关键原则**: 在所有 用来展示进度 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+无
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义文字内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 CircleProgress 配合使用的相关组件
+- **fox-cell**: 与 CircleProgress 配合使用的相关组件
+- **fox-circleprogress**: 与 CircleProgress 配合使用的相关组件
+- **fox-button**: 与 CircleProgress 配合使用的相关组件
+

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

@@ -0,0 +1,71 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Collapse 组件使用规范
+impact: HIGH
+type: capability
+description: 折叠面板
+tags: [foxui, fox-collapse, FoxCollapse]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-collapse-item"]
+---
+
+# Collapse 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Collapse 是 foxui 中用于 **折叠面板** 的标准组件。
+- **基于**: NutUI `nut-collapse` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 折叠面板
+
+> 💡 **关键原则**: 在所有 折叠面板 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `name` | 唯一标识符，必填 | string \ | number |
+| `title` | 标题栏左侧内容，支持插槽传入（props 传入的优先级更高） | string | - |
+| `value` | 标题栏右侧内容，支持插槽传入（props 传入的优先级更高） | string | - |
+| `icon` | 标题栏左侧图标组件，等同于 nutui-icon 组件 | - | - |
+| `label` | 标题栏描述信息 | number \ | string |
+| `rotate` | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ | number |
+| `disabled` | 标题栏是否禁用 | boolean | false |
+| `border` | 是否显示边框 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `title` | 标题栏左侧内容插槽 |
+| `value` | 标题栏右侧内容插槽 |
+| `extra` | 设置标题下固定内容（不折叠） |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-collapse-item**: 与 Collapse 配合使用的相关组件
+

package/foxui/references/fox-count-down/doc.md

@@ -0,0 +1,78 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: CountDown 组件使用规范
+impact: HIGH
+type: capability
+description: 倒计时
+tags: [foxui, fox-count-down, FoxCountDown]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-countdown","fox-button","fox-grid","fox-grid-item"]
+---
+
+# CountDown 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+CountDown 是 foxui 中用于 **倒计时** 的标准组件。
+- **基于**: NutUI `nut-count-down` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 倒计时
+
+> 💡 **关键原则**: 在所有 倒计时 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 当前时间，自定义展示内容时生效 | Object |  |
+| `start-time` | 开始时间 | String, Number | Date.now |
+| `end-time` | 结束时间 | String, Number | Date.now |
+| `format` | 时间格式 | String | HH:mm:ss |
+| `millisecond` | 是否开启毫秒级渲染 | Boolean | false |
+| `auto-start` | 是否自动开始倒计时 | Boolean | true |
+| `time` | 倒计时显示时间，单位是毫秒。autoStart 为 false 时生效 | String，Number | 0 |
+| `paused` | 是否暂停 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `on-end` | 倒计时结束时 | 剩余时间戳 |
+| `on-paused` | 暂停时 | 剩余时间戳 |
+| `on-restart` | 暂停时 | 剩余时间戳 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `start` | 开始倒计时 |
+| `pause` | 暂停倒计时 |
+| `reset` | 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时 |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 CountDown 配合使用的相关组件
+- **fox-cell**: 与 CountDown 配合使用的相关组件
+- **fox-countdown**: 与 CountDown 配合使用的相关组件
+- **fox-button**: 与 CountDown 配合使用的相关组件
+- **fox-grid**: 与 CountDown 配合使用的相关组件
+- **fox-grid-item**: 与 CountDown 配合使用的相关组件
+