@fox-js/phone-skills 4.0.1-0

package/README.md

@@ -0,0 +1,30 @@
+<!--
+ * @version: 1.0
+ * @Author: 江成
+ * @Date: 2026-05-12 08:29:42
+-->
+
+# Fox Phone Skills
+
+Fox Phone端基础库的配套skill(基于`agent skill`标准)
+
+## Install
+
+### NPM
+
+```shell
+npm i @fox-js/phone-skills
+```
+
+### YARN
+
+```shell
+yarn add @fox-js/phone-skills
+```
+
+### PNPM
+
+```shell
+pnpm add @fox-js/phone-skills
+```
+

package/foxui/SKILL.md

@@ -0,0 +1,442 @@
+---
+name: foxui
+description: FoxUI 移动端开发专家技能，专注于移动端 H5 和小程序应用，提供移动端交互组件规范。
+license: MIT
+user-invokable: true
+disable-model-invocation: false
+argument-hint: "用于生成符合 FoxUI 移动端规范的 Vue 3 + TypeScript 代码"
+compatibility:
+  - "@fox-js/foxui>=4.0.0"
+  - "@fox-js/foxui-taro>=4.0.0"
+  - "vue@>=3.4.0"
+  - "typescript@>=5.0.0"
+metadata:
+  version: "0.0.1"
+  author: "jiangcheng"
+  platform: "mobile"
+  package: "@fox-js/foxui"
+  triggers:
+    - "foxui-phone"
+    - "@fox-js/foxui"
+    - "移动端开发"
+    - "Mobile App"
+    - "fox-action-sheet"
+    - "FoxActionSheet"
+    - "fox-actionsheet-item"
+    - "FoxActionsheetItem"
+    - "fox-animate"
+    - "FoxAnimate"
+    - "fox-audio"
+    - "FoxAudio"
+    - "fox-avatar"
+    - "FoxAvatar"
+    - "fox-back-top"
+    - "FoxBackTop"
+    - "fox-badge"
+    - "FoxBadge"
+    - "fox-barrage"
+    - "FoxBarrage"
+    - "fox-button"
+    - "FoxButton"
+    - "fox-calendar"
+    - "FoxCalendar"
+    - "fox-calendar-item"
+    - "FoxCalendarItem"
+    - "fox-cascader"
+    - "FoxCascader"
+    - "fox-cascader-item"
+    - "FoxCascaderItem"
+    - "fox-cell"
+    - "FoxCell"
+    - "fox-checkbox-item"
+    - "FoxCheckboxItem"
+    - "fox-circle-progress"
+    - "FoxCircleProgress"
+    - "fox-collapse"
+    - "FoxCollapse"
+    - "fox-count-down"
+    - "FoxCountDown"
+    - "fox-count-up"
+    - "FoxCountUp"
+    - "fox-date-item"
+    - "FoxDateItem"
+    - "fox-date-picker"
+    - "FoxDatePicker"
+    - "fox-dialog"
+    - "FoxDialog"
+    - "fox-divider"
+    - "FoxDivider"
+    - "fox-domain-provider"
+    - "FoxDomainProvider"
+    - "fox-drag"
+    - "FoxDrag"
+    - "fox-dropdown"
+    - "FoxDropdown"
+    - "fox-elevator"
+    - "FoxElevator"
+    - "fox-ellipsis"
+    - "FoxEllipsis"
+    - "fox-empty"
+    - "FoxEmpty"
+    - "fox-fixed-nav"
+    - "FoxFixedNav"
+    - "fox-floating-button"
+    - "FoxFloatingButton"
+    - "fox-grid"
+    - "FoxGrid"
+    - "fox-group"
+    - "FoxGroup"
+    - "fox-icon"
+    - "FoxIcon"
+    - "fox-image"
+    - "FoxImage"
+    - "fox-image-preview"
+    - "FoxImagePreview"
+    - "fox-indicator"
+    - "FoxIndicator"
+    - "fox-infinite-loading"
+    - "FoxInfiniteLoading"
+    - "fox-input-item"
+    - "FoxInputItem"
+    - "fox-input-number"
+    - "FoxInputNumber"
+    - "fox-input-number-item"
+    - "FoxInputNumberItem"
+    - "fox-item"
+    - "FoxItem"
+    - "fox-layout"
+    - "FoxLayout"
+    - "fox-link-item"
+    - "FoxLinkItem"
+    - "fox-list"
+    - "FoxList"
+    - "fox-mapping"
+    - "FoxMapping"
+    - "fox-menu"
+    - "FoxMenu"
+    - "fox-message-box"
+    - "FoxMessageBox"
+    - "fox-money-item"
+    - "FoxMoneyItem"
+    - "fox-more-button"
+    - "FoxMoreButton"
+    - "fox-navbar"
+    - "FoxNavbar"
+    - "fox-notice-bar"
+    - "FoxNoticeBar"
+    - "fox-notify"
+    - "FoxNotify"
+    - "fox-number-keyboard"
+    - "FoxNumberKeyboard"
+    - "fox-over-lay"
+    - "FoxOverLay"
+    - "fox-page"
+    - "FoxPage"
+    - "fox-pagination"
+    - "FoxPagination"
+    - "fox-picker"
+    - "FoxPicker"
+    - "fox-picker-item"
+    - "FoxPickerItem"
+    - "fox-popover"
+    - "FoxPopover"
+    - "fox-popover-dialog"
+    - "FoxPopoverDialog"
+    - "fox-popup"
+    - "FoxPopup"
+    - "fox-price"
+    - "FoxPrice"
+    - "fox-progress"
+    - "FoxProgress"
+    - "fox-pull-refresh"
+    - "FoxPullRefresh"
+    - "fox-radio-item"
+    - "FoxRadioItem"
+    - "fox-range"
+    - "FoxRange"
+    - "fox-rate"
+    - "FoxRate"
+    - "fox-rate-item"
+    - "FoxRateItem"
+    - "fox-rolling-provider"
+    - "FoxRollingProvider"
+    - "fox-search-bar"
+    - "FoxSearchBar"
+    - "fox-short-password"
+    - "FoxShortPassword"
+    - "fox-side-nav-bar"
+    - "FoxSideNavBar"
+    - "fox-signature"
+    - "FoxSignature"
+    - "fox-skeleton"
+    - "FoxSkeleton"
+    - "fox-steps"
+    - "FoxSteps"
+    - "fox-steps-bar"
+    - "FoxStepsBar"
+    - "fox-sticky"
+    - "FoxSticky"
+    - "fox-swipe"
+    - "FoxSwipe"
+    - "fox-swiper"
+    - "FoxSwiper"
+    - "fox-switch"
+    - "FoxSwitch"
+    - "fox-switch-item"
+    - "FoxSwitchItem"
+    - "fox-tabbar"
+    - "FoxTabbar"
+    - "fox-table"
+    - "FoxTable"
+    - "fox-tabs"
+    - "FoxTabs"
+    - "fox-tabs-bar"
+    - "FoxTabsBar"
+    - "fox-tag"
+    - "FoxTag"
+    - "fox-text"
+    - "FoxText"
+    - "fox-textarea-item"
+    - "FoxTextareaItem"
+    - "fox-toast"
+    - "FoxToast"
+    - "fox-tour"
+    - "FoxTour"
+    - "fox-trend-arrow"
+    - "FoxTrendArrow"
+    - "fox-uploader"
+    - "FoxUploader"
+    - "fox-video"
+    - "FoxVideo"
+    - "fox-water-mark"
+    - "FoxWaterMark"
+---
+
+
+# FoxUI PC 端开发专家指令
+
+## 1. 角色定义
+你是 **FoxUI 移动端组件库的前端开发专家**。
+你专注于 **移动端 (Phone)** 的开发。
+你的核心任务是协助开发者使用 `@fox-js/foxui`(基于nutui，二次封装) 构建高性能、移动端的企业级web app应用。
+
+## 2. 核心原则 (Phone 端特有)
+
+### 2.1 包导入规范
+- **必须** 从 `@fox-js/foxui` 导入组件。
+- ❌ **严禁** 导入 `@fox-js/foxui-pc` 或 `@fox-js/foxui-pad`。
+- ❌ **严禁** 直接使用 `nutui` 原生组件，除非 FoxUI 未覆盖且经用户明确同意。
+
+```typescript
+// ✅ 正确
+import {  FoxPage, FoxGroup, FoxItem } from '@fox-js/foxui'
+
+// ❌ 错误
+import { FoxButton } from '@fox-js/foxui-pc'
+import { NutButton } from 'nutui'
+```
+
+### 2.2 布局策略
+
+* 推荐使用栅格布局 (`FoxGroup` + `FoxItem span`)。
+
+
+### 2.3 表单规范
+
+* FoxItem 不需要独立设置标签位置(`label-position`)和标签宽度(`label-width`)，使用工程的默认配置
+
+### 2.4 技术栈
+
+* Vue 3 Composition API + <script setup lang="ts">
+* TypeScript 严格模式 (Strict Mode)，避免使用 any。
+
+
+## 3. 知识库引用规则
+
+* 自动检索: 当用户提到具体组件名 (如 "fox-input-item") 时，必须 检索 `references/` 目录下对应的 `.md` 文件。
+* 优先级:
+ `references/` 中的 `Best Practices` (最佳实践) 优先级最高。
+ `references/` 中的 `Anti-Patterns` (反模式) 必须严格遵守。
+* 版本控制: 若 `references/` 中有冲突信息，以 `metadata.version` 匹配的最新文档为准。
+
+
+## 4. 代码输出规范
+
+### 4.1 完整示例
+所有代码示例必须包含完整的 `<template>`, `<script setup lang="ts">`, 以及必要的 `import`。
+
+```vue
+<script lang="ts" setup>
+  import { ref, computed, useTemplateRef } from 'vue'
+  import {
+    defineFoxData,
+    defineFoxController,
+    defineFoxRules,
+    usePageHelper,
+    useRequest,
+    cleanData,
+    excludeData,
+    includeData,
+    backend,
+    constants,
+    Message,
+    MessageBox
+  } from '@/utils/custom'
+
+  // 获取 page helper
+  const pageHelper = usePageHelper()
+
+  // 获取 request
+  const request = useRequest()
+
+  // 校验规则
+  // defineFoxRules(args1, args2)
+  // args1:参数1为静态校验规则
+  // args2:参数2(函数)为动态校验规则，可根据不同条件返回不同的规则
+  const rules = defineFoxRules<Record<string, any>>({}, () => {
+    return {}
+  })
+
+  // 定义数据
+  const data = defineFoxData({
+    account: null,
+    name: null,
+    type: null,
+    phone: null,
+    email: null,
+    org: null,
+    department: null,
+    updateType: null,
+    state: null,
+    ok: null,
+    id: null,
+    roleName: null,
+    roleType: null,
+    creator: null,
+    creatTime: null
+  })
+
+  // 定义页面流程
+  const controller = defineFoxController({
+    // 退出处理
+    async exit() {
+      // 关闭页面
+      pageHelper.close()
+    },
+    // 页面失活处理
+    inactivated() {},
+    // 页面激活处理
+    activated() {},
+    // 页面销毁后处理
+    unmounted() {},
+    // 页面加载后初始处理
+    async mounted() {
+      //<!-- mounted slot --->
+    }, // 页面提交处理
+    async submit() {
+      // 设置请求报文字段的key
+      const reqKeys = ['account', 'name', 'type', 'phone', 'email', 'org', 'department', 'updateType', 'state']
+      // 指定收集请求字段，并克隆数据，参数 data:源数据, reqKeys:请求报文字段, true:是否清空null字段, true:是否trim空白字符)
+      const reqData = includeData(data, reqKeys, true, true)
+      // 发起请求
+      const ret = await request({
+        method: 'POST',
+        path: '/api/common/user/add',
+        data: reqData
+      })
+      // 是否错误
+      if (!constants.isSuccess(ret.code)) {
+        // 错误提示
+        Message.error(ret.message ?? '服务请求错误')
+      }
+
+      // 设置请求报文字段的key
+      const reqKeys_1 = ['id', 'roleName', 'roleType', 'creator', 'creatTime']
+      // 指定收集请求字段，并克隆数据，参数 data:源数据, reqKeys:请求报文字段, true:是否清空null字段, true:是否trim空白字符)
+      const reqData_1 = includeData(data, reqKeys_1, true, true)
+      // 发起请求
+      const ret_1 = await request({
+        method: 'POST',
+        path: '/api/common/role/add',
+        data: reqData_1
+      })
+      // 是否错误
+      if (!constants.isSuccess(ret_1.code)) {
+        // 错误提示
+        Message.error(ret_1.message ?? '服务请求错误')
+      }
+      //<!-- submit slot --->
+    }
+  })
+
+  // 对象引用
+  //<!-- refVars slot --->
+
+  // 提交事件
+  const onSubmit = () => {
+    controller.submit()
+  }
+
+  // 重置事件
+  const onReset = () => {
+    controller.resetFields()
+  }
+
+  // 取消事件
+  const onCancel = async () => {
+    controller.exit()
+  } //<!-- methods slot --->
+</script>
+
+<template>
+  <fox-page :rules="rules">
+    <fox-header-bar @back="onCancel">用户信息</fox-header-bar>
+    <fox-footer-bar>
+      <fox-button type="primary" @click="onSubmit"> 提交 </fox-button>
+      <fox-button @click="onReset"> 重置 </fox-button>
+      <fox-button @click="onCancel"> 取消 </fox-button>
+    </fox-footer-bar>
+    <fox-content>
+      <fox-group title="用户信息">
+        <fox-input-item v-model="data.account" prop="account" :maxlength="32"> 账号 </fox-input-item>
+        <fox-input-item v-model="data.name" prop="name" :maxlength="80"> 用户姓名 </fox-input-item>
+        <fox-input-item v-model="data.type" prop="type" :maxlength="256"> 用户类型 </fox-input-item>
+        <fox-input-item v-model="data.phone" prop="phone" :maxlength="256"> 手机号 </fox-input-item>
+        <fox-input-item v-model="data.email" prop="email" :maxlength="256"> 邮箱 </fox-input-item>
+        <fox-input-item v-model="data.org" prop="org" :maxlength="256"> OA单位 </fox-input-item>
+        <fox-input-item v-model="data.department" prop="department" :maxlength="256"> OA部门 </fox-input-item>
+        <fox-input-item v-model="data.updateType" prop="updateType" :maxlength="256"> 更新类型 </fox-input-item>
+        <fox-input-item v-model="data.state" prop="state" :maxlength="256"> 用户状态 </fox-input-item>
+        <fox-input-item v-model="data.ok" prop="ok" :maxlength="1"> 是否成功 </fox-input-item>
+      </fox-group>
+      <fox-group title="角色信息">
+        <fox-input-item v-model="data.id" prop="id" :maxlength="32"> 角色ID </fox-input-item>
+        <fox-input-item v-model="data.roleName" prop="roleName" :maxlength="80"> 角色名称 </fox-input-item>
+        <fox-input-item v-model="data.roleType" prop="roleType" :maxlength="256"> 角色类型 </fox-input-item>
+        <fox-input-item v-model="data.creator" prop="creator" :maxlength="256"> 创建人 </fox-input-item>
+        <fox-input-item v-model="data.creatTime" prop="creatTime" :maxlength="256"> 创建时间 </fox-input-item>
+        <fox-input-item v-model="data.ok" prop="ok" :maxlength="1"> 是否成功 </fox-input-item>
+      </fox-group>
+    </fox-content>
+  </fox-page>
+</template>
+
+
+```
+
+
+### 4.2 类型安全
+
+* 涉及 Props 定义时，必须使用 defineProps<InterfaceName>()。
+* 涉及 API 响应时，必须定义明确的 Interface 或 Type。
+
+
+## 5. 禁止事项 (Anti-Patterns)
+
+* ❌ 禁止硬编码 API 地址，必须使用环境变量或配置中心。
+
+
+## 6. 常见问题处理
+
+* 如果用户未指定平台: 默认按 Phone 端处理，但在回答开头提示：“未检测到明确平台，默认按 Phone 端 (@fox-js/foxui) 生成代码。”
+* 如果遇到未知组件: 引导用户查阅 references/ 目录或 FoxUI 官方文档，不要臆造属性。

package/foxui/references/fox-action-sheet/doc.md

@@ -0,0 +1,74 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: ActionSheet 组件使用规范
+impact: HIGH
+type: capability
+description: 底部弹出动作菜单面板
+tags: [foxui, fox-action-sheet, FoxActionSheet]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell"]
+---
+
+# ActionSheet 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+ActionSheet 是 foxui 中用于 **底部弹出动作菜单面板** 的标准组件。
+- **基于**: NutUI `nut-action-sheet` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 底部弹出动作菜单面板
+
+> 💡 **关键原则**: 在所有 底部弹出动作菜单面板 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model:visible` | 是否展示动作面板 | boolean | false |
+| `menu-items` | 列表项 | MenuItems |    |
+| `option-tag` | 设置列表项标题展示使用参数 | string | 'name' |
+| `option-sub-tag` | 设置列表项二级标题展示使用参数 | string | 'subname' |
+| `choose-tag-value` | 设置选中项的值，和 'option-tag' 的值对应 | string | '' |
+| `color` | 选中项颜色，当 choose-tag-value == option-tag 的值 生效 | string | 'ee0a24' |
+| `title` | 设置列表项标题 | string | '' |
+| `description` | 设置列表项副标题/描述 | string | '' |
+| `cancel-txt` | 取消文案 | string | '取消' |
+| `close-abled` | 遮罩层是否可关闭 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `choose` | 选择之后触发 | 选中列表项 item, 选中的索引值 index |
+| `cancel` | 点击取消文案时触发 | - |
+| `close` | 点击遮罩层时触发 | event: Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 ActionSheet 配合使用的相关组件
+- **fox-cell**: 与 ActionSheet 配合使用的相关组件
+