@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,96 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Uploader 组件使用规范
+impact: HIGH
+type: capability
+description: 上传文件、图片
+tags: [foxui, fox-uploader, FoxUploader]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-button","fox-progress"]
+---
+
+# Uploader 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Uploader 是 foxui 中用于 **上传文件、图片** 的标准组件。
+- **基于**: NutUI `nut-uploader` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 上传文件、图片
+
+> 💡 **关键原则**: 在所有 上传文件、图片 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `auto-upload` | 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 | Boolean | true |
+| `name` | input 标签 name 的名称，发到后台的文件参数名 | String | "file" |
+| `url` | 上传服务器的接口地址 | String | - |
+| `v-model:file-list` | 默认已经上传的文件列表 | FileItem |  |
+| `is-preview` | 是否上传成功后展示预览图 | Boolean | true |
+| `is-deletable` | 是否展示删除按钮 | Boolean | true |
+| `method` | 上传请求的 http method | String | "post" |
+| `list-type` | 上传列表的内建样式，支持两种基本样式 picture、list | String | "picture" |
+| `capture` | 图片选取模式https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/inputhtmlattrdefcapture，直接调起摄像头 | String | false |
+| `maximize` | 可以设定最大上传文件的大小（字节） | Number丨String | Number.MAX_VALUE |
+| `maximum` | 文件上传数量限制 | Number丨String | 1 |
+| `clear-input` | 是否需要清空input内容，设为true支持重复选择上传同一个文件 | Boolean | true |
+| `accept` | 允许上传的文件类型，详细说明https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/fileE99990E588B6E58581E8AEB8E79A84E69687E4BBB6E7B1BBE59E8B | String |  |
+| `headers` | 设置上传的请求头部 | Object |  |
+| `data` | 附加上传的信息 formData | Object |  |
+| `upload-icon` | 上传区域图标名称/icon或图片链接 | String | "photograph" |
+| `upload-icon-size` | 上传区域图标尺寸/icon大小，如 20px 2em 2rem | String or Number | - |
+| `xhr-state` | 接口响应的成功状态（status）值 | Number | 200 |
+| `with-credentials` | 支持发送 cookie 凭证信息 | Boolean | false |
+| `multiple` | 是否支持文件多选 | Boolean | false |
+| `disabled` | 是否禁用文件上传 | Boolean | false |
+| `timeout` | 超时时间，单位为毫秒 | Number丨String | 1000  30 |
+| `before-upload` | 上传前的函数需要返回一个Promise对象 | Function | null |
+| `before-xhr-upload小程序暂不支持` | 执行 XHR 上传时，自定义方式 | Functionxhr，option | null |
+| `before-delete` | 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolvefalse 或 reject 时不移除 | Functionfile,fileList: boolean 丨Promise | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `start` | 文件上传开始 | options |
+| `progress` | 文件上传的进度 | event,option,percentage |
+| `oversize` | 文件大小超过限制时触发 | files |
+| `success` | 上传成功 | responseText,option,fileItem |
+| `failure` | 上传失败 | responseText,option,fileItem |
+| `change` | 上传文件改变时的状态 | fileList,event |
+| `delete` | 文件删除事件 | files,fileList,index |
+| `file-item-click` | 文件上传成功后点击触发 | fileItem |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `submit` | 手动上传模式，执行上传操作 | - |
+| `clearUploadQueue` | 清空已选择的文件队列（该方法一般配合在手动模式上传时使用） | - |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Uploader 配合使用的相关组件
+- **fox-button**: 与 Uploader 配合使用的相关组件
+- **fox-progress**: 与 Uploader 配合使用的相关组件
+

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

@@ -0,0 +1,245 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Video 组件使用规范
+impact: HIGH
+type: capability
+description: 视频播放组件
+tags: [foxui, fox-video, FoxVideo]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-face","fox-button"]
+---
+
+# Video 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Video 是 foxui 中用于 **视频播放组件** 的标准组件。
+- **基于**: NutUI `nut-video` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持禁用/只读状态
+- **适用场景**: 视频播放组件
+
+> 💡 **关键原则**: 在所有 视频播放组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `source` | 视频地址和类型设置 | VideoSource |  |
+| `options` | 控制视频播放属性 | VideoOptions |  |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `play` | 播放 | videoElm |
+| `pause` | 暂停 | videoElm |
+| `playend` | 播放完成回调 | videoElm |
+| `time` | 播放时触发current为当前播放时间，total为总时间 | current:string,total:string |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+```html
+<fox-video
+  :source="source"
+  :options="options"
+  @play="play"
+  @pause="pause"
+  @playend="playend">
+</fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4',
+      },
+      options: {
+        controls: true,
+      },
+    });
+    const play = (elm: any) => console.log('play', elm);
+    const pause = (elm: any) => console.log('pause', elm);
+    const playend = (elm: any) => console.log('playend', elm);
+
+    return { play, pause, playend, ...toRefs(state) };
+}
+```
+
+### 自动播放
+autoplay 属性设置视频自动播放
+```html
+<fox-video :source="source" :options="options"></fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+      options: {
+        autoplay: true,
+        muted: true,
+        controls: true
+      },
+    });
+
+    return { ...toRefs(state) };
+}
+```
+
+### 初始化静音
+muted属性设置视频初始化静音
+```html
+<fox-video :source="source" :options="options"></fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+      options: {
+        muted: true,
+        controls: true
+      },
+    });
+
+    return { ...toRefs(state) };
+}
+```
+
+### 视频封面海报设置
+poster 属性设置视频海报
+```html
+<fox-video :source="source" :options="options"></fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+      options: {
+        controls: true,
+        poster: './demo/img/fox-face.jpg'
+      },
+    });
+
+    return { ...toRefs(state) };
+}
+```
+
+### 行内播放
+playsinline 属性设置移动端视频行内播放，阻止新打开页面播放（兼容 ios，兼容部分安卓机）
+```html
+<fox-video :source="source" :options="options"></fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+      options: {
+        playsinline: true,
+        controls: true,
+      },
+    });
+
+    return { ...toRefs(state) };
+}
+```
+
+### 视频背景图
+当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true，移动端需要设置 playsinline 行内展示
+```html
+<fox-video :source="source" :options="options"></fox-video>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+      options: {
+        controls: false,
+        autoplay: true,
+        muted: true,
+        disabled: true,
+        playsinline: true,
+        loop: true
+      },
+    });
+
+    return { ...toRefs(state) };
+}
+```
+
+### 视频切换
+当视频地址发生变化时，重置视频
+```html
+<fox-video :source="source"></fox-video>
+<fox-button type="primary" @click="changeVideo">切换视频</fox-button>
+```
+
+```javascript
+setup() {
+    const state = reactive({
+      source: {
+        src: './demo/video/mov_a.mp4',
+        type: 'video/mp4'
+      },
+    });
+    const changeVideo = () => {
+      state.source1 = {
+        src: './demo/video/mov_b.ogm',
+        type: 'video/mp4'
+      };
+    };
+
+    return { ...toRefs(state), changeVideo };
+}
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Video 配合使用的相关组件
+- **fox-face**: 与 Video 配合使用的相关组件
+- **fox-button**: 与 Video 配合使用的相关组件
+

package/foxui/references/fox-water-mark/doc.md

@@ -0,0 +1,81 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: WaterMark 组件使用规范
+impact: HIGH
+type: capability
+description: 页面上添加特定的文字或图案。适用于防止信息盗用。
+tags: [foxui, fox-water-mark, FoxWaterMark]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-button","fox-watermark","fox-ui-water-mark","fox-logo-header-red","fox-ui"]
+---
+
+# WaterMark 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+WaterMark 是 foxui 中用于 **页面上添加特定的文字或图案。适用于防止信息盗用。** 的标准组件。
+- **基于**: NutUI `nut-water-mark` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 页面上添加特定的文字或图案。适用于防止信息盗用。
+
+> 💡 **关键原则**: 在所有 页面上添加特定的文字或图案。适用于防止信息盗用。 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `width` | 水印的宽度 | number | 120 |
+| `height` | 水印的高度 | number | 64 |
+| `rotate` | 水印绘制时，旋转的角度 | number | -22 |
+| `image` | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | string | - |
+| `image-width` | 图片宽度 | number | 120 |
+| `image-height` | 图片高度 | number | 64 |
+| `z-index` | 追加的水印元素的 z-index | number | 2000 |
+| `content` | 水印文字内容 | string | - |
+| `font-color` | 水印文字颜色 | string | rgba0, 0, 0, .15 |
+| `font-size` | 文字大小 | string \ | number |
+| `gap-x` | 水印之间的水平间距 | number | 24 |
+| `gap-y` | 水印之间的垂直间距 | number | 48 |
+| `full-page` | 是否覆盖整个页面 | boolean | true |
+| `font-family` | 水印文字字体 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 WaterMark 配合使用的相关组件
+- **fox-cell**: 与 WaterMark 配合使用的相关组件
+- **fox-button**: 与 WaterMark 配合使用的相关组件
+- **fox-watermark**: 与 WaterMark 配合使用的相关组件
+- **fox-ui-water-mark**: 与 WaterMark 配合使用的相关组件
+- **fox-logo-header-red**: 与 WaterMark 配合使用的相关组件
+- **fox-ui**: 与 WaterMark 配合使用的相关组件
+

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@fox-js/phone-skills",
+  "version": "4.0.1-0",
+  "description": "FoxUI Phone 端 OpenCode Skill 集合，专为Phone端(手机银行系统、移动信贷系统)系统设计。",
+  "main": "foxui/SKILL.md",
+  "files": [
+    "foxui"
+  ],
+  "scripts": {
+    "publish:beta": "npm version prerelease && npm publish --tag beta --no-git-checks --access public"
+  },
+  "keywords": [
+    "opencode",
+    "skill",
+    "foxui",
+    "phone",
+    "vue3"
+  ],
+  "author": "jiangcheng",
+  "license": "MIT"
+}