@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,273 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Layout 组件使用规范
+impact: HIGH
+type: capability
+description: 简便地创建布局
+tags: [foxui, fox-layout, FoxLayout]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-row","fox-col"]
+---
+
+# Layout 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Layout 是 foxui 中用于 **简便地创建布局** 的标准组件。
+- **基于**: NutUI `nut-layout` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端
+- **适用场景**: 简便地创建布局
+
+> 💡 **关键原则**: 在所有 简便地创建布局 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `type` | 布局方式，可选值为flex | String | - |
+| `gutter` | 列元素之间的间距（单位为px） | String、Number | - |
+| `justify` | Flex 主轴对齐方式，可选值为 start end center space-around space-between space-evenly | String | start |
+| `align` | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start |
+| `wrap` | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap |
+| `span` | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String、Number | 24 |
+| `offset` | 列元素偏移距离 | String、Number | 0 |
+
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击时触发 | event: MouseEvent |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <fox-row>
+    <fox-col :span="24">
+      <div class="flex-content">span:24</div>
+    </fox-col>
+  </fox-row>
+  <fox-row>
+    <fox-col :span="12">
+      <div class="flex-content">span:12</div>
+    </fox-col>
+    <fox-col :span="12">
+      <div class="flex-content flex-content-light">span:12</div>
+    </fox-col>
+  </fox-row>
+  <fox-row>
+    <fox-col :span="8">
+      <div class="flex-content">span:8</div>
+    </fox-col>
+    <fox-col :span="8">
+      <div class="flex-content flex-content-light">span:8</div>
+    </fox-col>
+    <fox-col :span="8">
+      <div class="flex-content">span:8</div>
+    </fox-col>
+  </fox-row>
+  <fox-row>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+</template>
+<style lang="scss" scoped>
+.fox-row {
+  overflow: hidden;
+  &:not(:last-child) .fox-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
+```
+
+### 设置元素间距
+
+```html
+<template>
+  <fox-row :gutter="10">
+      <fox-col :span="8">
+          <div class="flex-content">span:8</div>
+      </fox-col>
+      <fox-col :span="8">
+          <div class="flex-content flex-content-light">span:8</div>
+      </fox-col>
+      <fox-col :span="8">
+          <div class="flex-content">span:8</div>
+      </fox-col>
+  </fox-row>   
+</template>
+<style lang="scss" scoped>
+.fox-row {
+  overflow: hidden;
+  &:not(:last-child) .fox-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
+```
+
+### Flex布局
+
+```html
+<template>
+  <fox-row type="flex" wrap="nowrap">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+  <fox-row type="flex" justify="center">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+  <fox-row type="flex" justify="end">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+  <fox-row type="flex" justify="space-between">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+  <fox-row type="flex" justify="space-around">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+  <fox-row type="flex" justify="space-evenly">
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </fox-col>
+    <fox-col :span="6">
+      <div class="flex-content">span:6</div>
+    </fox-col>
+  </fox-row>
+</template>
+<style lang="scss" scoped>
+.fox-row {
+  overflow: hidden;
+  &:not(:last-child) .fox-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Layout 配合使用的相关组件
+- **fox-row**: 与 Layout 配合使用的相关组件
+- **fox-col**: 与 Layout 配合使用的相关组件
+

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

@@ -0,0 +1,158 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: LinkItem 组件使用规范
+impact: HIGH
+type: capability
+description: 打开链接
+tags: [foxui, fox-link-item, FoxLinkItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-actionsheet"]
+---
+
+# LinkItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+LinkItem 是 foxui 中用于 **打开链接** 的标准组件。
+- **基于**: NutUI `nut-link-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持占位符提示、支持禁用/只读状态、内置多级提示信息、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 打开链接
+
+> 💡 **关键原则**: 在所有 打开链接 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 输入值，双向绑定 | String | - |
+| `placeholder` | 为空时占位符 | 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 | - |
+| `error-class` | 错误提示class | String | - |
+| `warn-tip` | 警告提示 | String | - |
+| `wran-icon` | 警告提示图标 | Component | - |
+| `wran-class` | 警告提示class | String | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | Component | - |
+| `info-class` | 提示class | String | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击触发 | val |
+| `focus` | 聚焦时触发 | val |
+| `blur` | 失焦时触发 | val |
+| `clear` | 点击清空时触发 | val |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | label内容 |
+| `prepend` | 左侧自定义内容 |
+| `append` | 右侧自定义内容 |
+| `content` | 内容区内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+常用属性与事件
+```html
+ <template>
+  <fox-group title="基础用法">
+    <fox-link-item
+      v-model="val"
+      :info-tip="msg"
+      @focus="onFocus"
+      @blur="onBlur"
+      @click="onClick"
+      >普通</fox-link-item
+    >
+    <fox-link-item v-model="val" disabled @focus="onFocus" @blur="onBlur" @click="onClick">禁用</fox-link-item>
+    <fox-link-item v-model="val2" required @focus="onFocus" @blur="onBlur">必输</fox-link-item>
+  </fox-group>
+  <fox-actionsheet
+    v-model:visible="visible"
+    cancel-text="取消"
+    description="银行列表"
+    :menu-items="m_menuItems"
+    @choose="chooseItem"
+  >
+  </fox-actionsheet>
+</template>
+```
+```javascript
+<script lang="ts">
+import { reactive, toRefs } from 'vue'
+import { createComponent } from '@/utils/create'
+const { createDemo } = createComponent('link-item')
+const banks = [
+  { name: '耀光帝国商业银行', subname: '账号:0021234021' },
+  { name: '蛮血部落联合银行', subname: '账号:0021234022' },
+  { name: '绿裔联盟农业发展银行', subname: '账号:0021234023' },
+  { name: '亡灵帝国银行', subname: '账号:0021234024' }
+]
+export default createDemo({
+  // setup
+  setup() {
+    // 数据
+    const data = reactive({
+      m_menuItems: banks,
+      visible: false,
+      val: banks[0].name,
+      msg: banks[0].subname,
+      val2: ''
+    })
+    // 方法
+    const methods = {
+      chooseItem(itemParams: any) {
+        data.val = itemParams.name
+      },
+      onFocus: (value: string | number) => {
+        console.log('focus:', value)
+      },
+      onBlur: (value: string | number) => {
+        console.log('blur:', value, event)
+      },
+      onClick: () => {
+        data.visible = true
+      }
+    }
+    return {
+      ...toRefs(data),
+      ...methods
+    }
+  }
+})
+</script>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 LinkItem 配合使用的相关组件
+- **fox-group**: 与 LinkItem 配合使用的相关组件
+- **fox-actionsheet**: 与 LinkItem 配合使用的相关组件
+

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

@@ -0,0 +1,71 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: List 组件使用规范
+impact: HIGH
+type: capability
+description: 可在成千上万条数据渲染时只渲染用户最大可见条数，提升页面渲染性能
+tags: [foxui, fox-list, FoxList]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell","fox-list-item"]
+---
+
+# List 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+List 是 foxui 中用于 **可在成千上万条数据渲染时只渲染用户最大可见条数，提升页面渲染性能** 的标准组件。
+- **基于**: NutUI `nut-list` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持插槽扩展自定义内容
+- **适用场景**: 可在成千上万条数据渲染时只渲染用户最大可见条数，提升页面渲染性能
+
+> 💡 **关键原则**: 在所有 可在成千上万条数据渲染时只渲染用户最大可见条数，提升页面渲染性能 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `height` | 列表项的高度/预估高度，支持不固定高度 | Number | 80 |
+| `list-data` | 列表数据 | any |  |
+| `container-height` | 容器高度最大值不能超过可视区 | Number | 可视区高度 |
+| `buffer-size` | 数据缓冲区长度 | Number | 5 |
+| `margin` | 列表之间的间隙，和自定义样式保持一致 | Number | 10 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `scroll-bottom` | 滚动到底部时触发 | - |
+| `scroll-up` | 向上滚动 | - |
+| `scroll-down` | 向下滚动 | - |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `item` | 列表项数据 |
+| `index` | 列表索引 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 List 配合使用的相关组件
+- **fox-cell**: 与 List 配合使用的相关组件
+- **fox-list-item**: 与 List 配合使用的相关组件
+