@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,190 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: SwitchItem 组件使用规范
+impact: HIGH
+type: capability
+description: 用来打开或关闭选项
+tags: [foxui, fox-switch-item, FoxSwitchItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# SwitchItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+SwitchItem 是 foxui 中用于 **用来打开或关闭选项** 的标准组件。
+- **基于**: NutUI `nut-switch-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 用来打开或关闭选项
+
+> 💡 **关键原则**: 在所有 用来打开或关闭选项 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 开关状态 | Boolean、String、Number | false |
+| `disable` | 禁用状态 | Boolean | false |
+| `loading` | 加载状态 | Boolean | false |
+| `name` | 图标名称/icon | String | loading |
+| `color` | 图标颜色/icon，仅在loading状态下生效 | String | - |
+| `size` | 图标尺寸/icon，仅在loading状态下生效 | String、Number | 12px |
+| `active-color` | 打开时的背景颜色 | String | fa2c19 |
+| `inactive-color` | 关闭时的背景颜色 | String | ebebeb |
+| `active-text` | 打开时文字描述 | String | - |
+| `inactive-text` | 关闭时文字描述 | String | - |
+| `active-value` | 打开时组件的值 | Boolean、String、Number | true |
+| `inactive-value` | 关闭组件的值 | Boolean、String、Number | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 切换开关时触发 | value: boolean,event: Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+``` html
+<fox-switch-item v-model="checked">开关</fox-switch-item>
+<fox-switch-item v-model="checkedStr" activeValue="开" inactiveValue="关" @change="change">值为字符串</fox-switch-item>
+```
+``` ts
+import { getCurrentInstance, reactive, toRefs } from 'vue'
+import { createComponent } from '../../utils/create'
+const { createDemo } = createComponent('switch-item')
+export default createDemo({
+  /**
+   * setup
+   */
+  setup() {
+    let { proxy } = getCurrentInstance() as any
+    // state
+    let state = reactive({
+      checked: true,
+      checkedStr: '开'
+    })
+    // 方法
+    let methods = {
+      change: (value: boolean, event: Event) => {
+        proxy.$toast.text(`触发了change事件，开关状态：${value}`)
+      }
+    }
+    return {
+      ...toRefs(state),
+      ...methods
+    }
+  }
+})
+```
+### 禁用状态
+``` html
+<fox-switch-item v-model="checked" disable>禁用状态</fox-switch-item>
+```
+### 加载状态
+``` html
+<fox-switch-item v-model="checked" loading color="red">加载状态</fox-switch-item>
+```
+### change事件
+``` html
+<fox-switch-item v-model="checked" @change="change">change事件</fox-switch-item>
+```
+``` ts
+import { getCurrentInstance, reactive, toRefs } from 'vue'
+import { createComponent } from '../../utils/create'
+const { createDemo } = createComponent('switch-item')
+export default createDemo({
+  /**
+   * setup
+   */
+  setup() {
+    let { proxy } = getCurrentInstance() as any
+    // state
+    let state = reactive({
+      checked: true,
+    })
+    // 方法
+    let methods = {
+      change: (value: boolean, event: Event) => {
+        proxy.$toast.text(`触发了change事件，开关状态：${value}`)
+      }
+    }
+    return {
+      ...toRefs(state),
+      ...methods
+    }
+  }
+})
+```
+### 异步控制
+``` html
+<fox-switch-item :model-value="checkedAsync" @change="changeAsync" :loading="loadingAsync">异步控制</fox-switch-item>
+```
+``` ts
+import { getCurrentInstance, reactive, toRefs } from 'vue'
+import { createComponent } from '../../utils/create'
+const { createDemo } = createComponent('switch-item')
+export default createDemo({
+  /**
+   * setup
+   */
+  setup() {
+    let { proxy } = getCurrentInstance() as any
+    // state
+    let state = reactive({
+      loadingAsync: false,
+      checkedStr: '开'
+    })
+    // 方法
+    let methods = {
+      changeAsync: (value: boolean, event: Event) => {
+        proxy.$toast.text(`2秒后异步触发 ${value}`)
+        state.loadingAsync = true
+        setTimeout(() => {
+          state.checkedAsync = value
+          state.loadingAsync = false
+        }, 2000)
+      }
+    }
+    return {
+      ...toRefs(state),
+      ...methods
+    }
+  }
+})
+```
+### 自定义颜色
+``` html
+ <fox-switch-item v-model="checked" @change="change" active-color="blue">自定义颜色</fox-switch-item>
+```
+### 支持文字
+``` html
+<fox-switch-item v-model="checked" @change="change" active-text="开" inactive-text="关">支持文字</fox-switch-item>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 SwitchItem 配合使用的相关组件
+

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

@@ -0,0 +1,63 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Tabbar 组件使用规范
+impact: HIGH
+type: capability
+description: 标签栏
+tags: [foxui, fox-tabbar, FoxTabbar]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-tabbar-item"]
+---
+
+# Tabbar 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Tabbar 是 foxui 中用于 **标签栏** 的标准组件。
+- **基于**: NutUI `nut-tabbar` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 标签栏
+
+> 💡 **关键原则**: 在所有 标签栏 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+无
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 切换页签时触发事件 | 点击的索引值和tab item对象 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Tabbar 配合使用的相关组件
+- **fox-tabbar-item**: 与 Tabbar 配合使用的相关组件
+