@fox-js/phone-skills 4.0.1-0

package/foxui/references/fox-input-number/doc.md

@@ -0,0 +1,199 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: InputNumber 组件使用规范
+impact: HIGH
+type: capability
+description: 数字输入框组件
+tags: [foxui, fox-input-number, FoxInputNumber]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-i","fox-iconfont","fox-icon"]
+---
+
+# InputNumber 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+InputNumber 是 foxui 中用于 **数字输入框组件** 的标准组件。
+- **基于**: NutUI `nut-input-number` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 数字输入框组件
+
+> 💡 **关键原则**: 在所有 数字输入框组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 初始值 | String、Number | - |
+| `input-width` | 输入框宽度 | String | 40px |
+| `button-size` | 操作符+、-尺寸 | String | 20px |
+| `min` | 最小值限制 | String、Number | 1 |
+| `max` | 最大值限制 | String、Number | 9999 |
+| `step` | 步长 | String、Number | 1 |
+| `decimal-places` | 设置保留的小数位 | String、Number | 0 |
+| `disabled` | 禁用所有功能 | Boolean | false |
+| `readonly` | 只读状态禁用输入框操作行为 | Boolean | false |
+| `icon-left` | 左侧操作符图标名，同 Icon 组件 name 属性 | String | minus |
+| `icon-right` | 右侧操作符图标名，同 Icon 组件 name 属性 | String | plus |
+| `font-class-name` | 自定义icon 字体基础类名 | String | fox-iconfont |
+| `class-prefix` | 自定义icon 类名前缀，用于使用自定义图标 | String | fox-icon |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `add` | 点击增加按钮时触发 | event: Event |
+| `reduce` | 点击减少按钮时触发 | event: Event  |
+| `overlimit` | 点击不可用的按钮时触发 | event: Event,type:string reduce or add  |
+| `change` | 值改变时触发 | value: number , event : Event  |
+| `blur` | 输入框失去焦点时触发 | event: Event   |
+| `focus` | 输入框获得焦点时触发 | event: Event   |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+初始化一个默认值
+
+``` html
+<fox-input-number v-model="value" />
+```
+
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    return { value };
+  },
+};
+```
+
+### 步长设置
+
+设置步长 `step` 5 
+
+```html
+<fox-input-number v-model="value" step="5" />
+```
+
+### 限制输入范围
+
+`min` 和 `max` 属性分别表示最小值和最大值
+
+```html
+<fox-i pu t v-model="value" min="10" max="20" />
+```
+
+### 禁用状态
+
+`disabled` 禁用状态下无法点击按钮或修改输入框。
+
+```html
+<fox-input-number v-model="value" disabled />
+```
+
+### 只读禁用输入框
+
+`readonly` 设置只读禁用输入框输入行为
+
+```html
+<fox-input-number v-model="value" readonly />
+```
+
+### 支持小数点
+
+设置步长 `step` 0.1  `decimal-places` 小数保留1位
+
+```html
+<fox-input-number v-model="value" step="0.1" decimal-places="1" />
+```
+
+### 支持异步修改
+
+通过 `change` 事件和 `model-value` 进行异步修改
+
+```html
+<fox-input-number :model-value="value" @change="onChange" />
+```
+
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    const onChange = (value: number) => {
+      setTimeout(() => {
+        value.value = value;
+      }, 2000);
+    };
+    return { value, onChange };
+  },
+};
+```
+
+### 自定义按钮大小
+
+设置步长 `step` 0.1  `decimal-places` 小数保留1位
+
+```html
+<fox-input-number v-model="value"  button-size="30" input-width="50" />
+```
+
+### 自定义按钮图标
+
+```html
+<template>
+  <fox-input-number v-model="value">
+    <template #left-icon>
+      <Left />
+    </template>
+    <template #right-icon>
+      <Right />
+    </template>
+  </fox-input-number>
+</template>
+<script lang="ts">
+  import { ref } from 'vue'
+  import { Left, Right } from '@fox-js/icons-vue'
+  export default {
+    props: {},
+    setup() {
+      const value = ref(1);
+      return { value };
+    },
+  };
+</script>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 InputNumber 配合使用的相关组件
+- **fox-i**: 与 InputNumber 配合使用的相关组件
+- **fox-iconfont**: 与 InputNumber 配合使用的相关组件
+- **fox-icon**: 与 InputNumber 配合使用的相关组件
+

package/foxui/references/fox-input-number-item/doc.md

@@ -0,0 +1,213 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: InputNumberItem 组件使用规范
+impact: HIGH
+type: capability
+description: 数字输入框
+tags: [foxui, fox-input-number-item, FoxInputNumberItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-iconfont","fox-icon"]
+---
+
+# InputNumberItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+InputNumberItem 是 foxui 中用于 **数字输入框** 的标准组件。
+- **基于**: NutUI `nut-input-number-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持占位符提示、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 数字输入框
+
+> 💡 **关键原则**: 在所有 数字输入框 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 输入值，双向绑定 | String | - |
+| `placeholder` | 为空时占位符 | String | - |
+| `clearable` | 展示清除icon | Boolean | true |
+| `text-align` | 文本位置,可选值left,center,right | String | right |
+| `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` | 错误提示图标 | String | - |
+| `warn-tip` | 警告提示 | String | - |
+| `warn-icon` | 警告提示图标 | String | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | String | - |
+| `input-width` | 输入框宽度 | String | 40px |
+| `button-size` | 操作符+、-尺寸 | String | 20px |
+| `min` | 最小值限制 | String、Number | 1 |
+| `max` | 最大值限制 | String、Number | 9999 |
+| `step` | 步长 | String、Number | 1 |
+| `decimal-places` | 设置保留的小数位 | String、Number | 0 |
+| `disabled` | 禁用所有功能 | Boolean | false |
+| `readonly` | 只读状态禁用输入框操作行为 | Boolean | false |
+| `icon-left` | 左侧操作符图标名，同 Icon 组件 name 属性 | String | minus |
+| `icon-right` | 右侧操作符图标名，同 Icon 组件 name 属性 | String | plus |
+| `font-class-name` | 自定义icon 字体基础类名 | String | fox-iconfont |
+| `class-prefix` | 自定义icon 类名前缀，用于使用自定义图标 | String | fox-icon |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `add` | 点击增加按钮时触发 | event: Event |
+| `reduce` | 点击减少按钮时触发 | event: Event  |
+| `overlimit` | 点击不可用的按钮时触发 | event: Event,type:string reduce or add  |
+| `change` | 值改变时触发 | value: number , event : Event  |
+| `blur` | 输入框失去焦点时触发 | event: Event   |
+| `focus` | 输入框获得焦点时触发 | event: Event   |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+初始化一个默认值
+
+``` html
+ <fox-input-number-item v-model="value">基本用法</fox-input-number-item>
+```
+
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    return { value };
+  },
+};
+```
+
+### 步长设置
+
+设置步长 `step` 5 
+
+```html
+<fox-input-number-item v-model="value" step="5">步长设置</fox-input-number-item>
+```
+
+### 限制输入范围
+
+`min` 和 `max` 属性分别表示最小值和最大值
+
+```html
+<fox-input-number-item v-model="value" @overlimit="overlimit" min="10" max="20">限制输入</fox-input-number-item>
+```
+
+### 禁用状态
+
+`disabled` 禁用状态下无法点击按钮或修改输入框。
+
+```html
+<fox-input-number-item v-model="value" disabled>禁用状态</fox-input-number-item>
+```
+
+### 只读禁用输入框
+
+`readonly` 设置只读禁用输入框输入行为
+
+```html
+<fox-input-number-item v-model="value" readonly>只读</fox-input-number-item>
+```
+
+### 支持小数点
+
+设置步长 `step` 0.1  `decimal-places` 小数保留1位
+
+```html
+ <fox-input-number-item v-model="value" step="0.1" decimal-places="1" readonly>支持小数</fox-input-number-item>
+```
+
+### 支持异步修改
+
+通过 `change` 事件和 `model-value` 进行异步修改
+
+```html
+ <fox-input-number-item :model-value="value" @change="onChange">异步修改</fox-input-number-item>
+```
+
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    const onChange = (value: number) => {
+      setTimeout(() => {
+        value.value = value;
+      }, 2000);
+    };
+    return { value, onChange };
+  },
+};
+```
+
+### 自定义按钮大小
+
+
+```html
+  <fox-input-number-item v-model="state.val7" button-size="30" input-width="50">自定义按钮大小</fox-input-number-item>
+```
+
+### 自定义按钮图标
+
+```html
+<template>
+  <fox-input-number-item v-model="value">
+    自定义按钮图标
+    <template #left-icon>
+      <Left />
+    </template>
+    <template #right-icon>
+      <Right />
+    </template>
+  </fox-input-number-item>
+</template>
+<script lang="ts">
+  import { ref } from 'vue'
+  import { Left, Right } from '@fox-js/icons-vue'
+  export default {
+    props: {},
+    setup() {
+      const value = ref(1);
+      return { value };
+    },
+  };
+</script>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 InputNumberItem 配合使用的相关组件
+- **fox-iconfont**: 与 InputNumberItem 配合使用的相关组件
+- **fox-icon**: 与 InputNumberItem 配合使用的相关组件
+

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

@@ -0,0 +1,207 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Item 组件使用规范
+impact: HIGH
+type: capability
+description: 组件单元
+tags: [foxui, fox-item, FoxItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon","fox-input","fox-row-item","fox-group","fox-input-item","fox-date-item","fox-select-item"]
+---
+
+# Item 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Item 是 foxui 中用于 **组件单元** 的标准组件。
+- **基于**: NutUI `nut-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持占位符提示、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 组件单元
+
+> 💡 **关键原则**: 在所有 组件单元 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `max-display-count` | 最大显示组件数量 | number | - |
+| `more-text` | 更多文本 | string | 更多 |
+| `more-icon` | 更多图标 | component | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `appear` | item可见事件 |
+| `disappear` | item不可见事件 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 按钮组 |
+| `moreIcon` | 更多图标插槽 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+slot扩展
+* label  item的标签
+* default item的内容
+```html
+ <fox-item>
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input class="my-input" type="text" />
+   </template>
+ </fox-item>
+```
+### 必输标志
+```html
+ <fox-item :is-required="true">
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input class="my-input" type="text" />
+   </template>
+ </fox-item>
+```
+### TIP提示
+* error-tip 错误提示
+* warn-tip  警告提示
+* info-tip  信息提示
+```html
+ <fox-item error-tip="必输" :is-required="true">
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input class="my-input" type="text" />
+   </template>
+ </fox-item>
+ <fox-item warn-tip="格式错误">
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input type="text" />
+   </template>
+ </fox-item>
+ <fox-item info-tip="注意事项">
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input class="my-input" type="text" />
+   </template>
+ </fox-item>
+```
+### prepend与append扩展
+```html
+ <fox-item>
+   <template v-slot:label>左标签</template>
+   <template v-slot:prepend>
+     <div class="my-prepend">
+       <fox-icon name="search" color="#fa2c19"></fox-icon>
+     </div>
+   </template>
+   <template v-slot:default>
+     <input type="text" class="fox-input" />
+   </template>
+ </fox-item>
+ <fox-item>
+   <template v-slot:label>右标签</template>
+   <template v-slot:append>
+     <div class="my-append">
+       <fox-icon name="dongdong" color="#fa2c19"></fox-icon>
+     </div>
+   </template>
+   <template v-slot:default>
+     <input type="text" class="fox-input" />
+   </template>
+ </fox-item>
+```
+### hint提示
+```html
+ <fox-item hint-text="提示" hint-visible="true" hint-type="text">
+   <template v-slot:label>标签</template>
+   <template v-slot:default>
+     <input class="my-input" type="text" />
+   </template>
+ </fox-item>
+```
+### 行单元
+`fox-row-item` 通过 `align` 属性设置对齐方式
+ 默认占据一行，一般用于按钮和标题
+```html
+ <fox-group column="3">
+    <fox-input-item v-model="name">姓名</fox-input-item>
+    <fox-date-item v-model="date">生日</fox-date-item>
+    <fox-select-item v-model="sex" :source="sourceForArray">性别</fox-select-item>
+    <fox-row-item :align="align">
+      <fox-button @click="setRowAlign('left')">左对齐</fox-button>
+      <fox-button @click="setRowAlign('center')">居中对齐</fox-button>
+      <fox-button @click="setRowAlign('right')">右对齐</fox-button>
+    </fox-row-item>
+</fox-group>
+```
+
+### 按钮组单元
+
+`fox-buttons-item` 用于按钮组布局，并且可以通过属性`max-isplay-count`控制可以显示的组件数量
+
+```ts
+<script lang="ts" setup>
+// 新增
+const onAdd = () => {
+  console.info('add')
+}
+// 更新
+const onUpdate = () => {
+  console.info('update')
+}
+// 删除
+const onDelete = () => {
+  console.info('delete')
+}
+// 撤回
+const onRevocation = () => {
+  console.info('revocation')
+}
+</script>
+
+<template>
+  <fox-group column="1">
+    <fox-buttons-item :max-display-count="3">
+      <fox-button @click="onAdd">增加</fox-button>
+      <fox-button @click="onUpdate">更新</fox-button>
+      <fox-button @click="onDelete">删除</fox-button>
+      <fox-button @click="onRevocation">撤回</fox-button>
+    </fox-buttons-item>
+  </fox-group>
+</template>
+
+<style lang="scss"></style>
+
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Item 配合使用的相关组件
+- **fox-icon**: 与 Item 配合使用的相关组件
+- **fox-input**: 与 Item 配合使用的相关组件
+- **fox-row-item**: 与 Item 配合使用的相关组件
+- **fox-group**: 与 Item 配合使用的相关组件
+- **fox-input-item**: 与 Item 配合使用的相关组件
+- **fox-date-item**: 与 Item 配合使用的相关组件
+- **fox-select-item**: 与 Item 配合使用的相关组件
+