@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,640 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Table 组件使用规范
+impact: HIGH
+type: capability
+description: 用于展示多条结构类似的数据，并具有一定的操作功能
+tags: [foxui, fox-table, FoxTable]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Table 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Table 是 foxui 中用于 **用于展示多条结构类似的数据，并具有一定的操作功能** 的标准组件。
+- **基于**: NutUI `nut-table` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 用于展示多条结构类似的数据，并具有一定的操作功能
+
+> 💡 **关键原则**: 在所有 用于展示多条结构类似的数据，并具有一定的操作功能 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `key` | 列的唯一标识 | String |  |
+| `title` | 表头标题 | String |  |
+| `stylehead` | 表头样式 | String |  |
+| `stylecolumn` | 列样式 | String |  |
+| `align` | 列的对齐方式，可选值left,center,right | String | left |
+| `sorter` | 排序，可选值有 true,function, default, 其中 default表示点击之后可能会依赖接口, function可以返回具体的排序函数, default表示采用默认的排序算法 | Boolean、Function、String | - |
+| `render` | 自定义渲染列数据，优先级高 | Functionrecord | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `sorter` | 点击排序按钮触发 | item: 当前点击的表头的数据 |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础使用
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name',
+            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
+            stylecolumn: 'font-size:10px;color:blue'
+          },
+          {
+            title: '性别',
+            key: 'sex',
+            render: (record) => {
+              return h(
+                'span',
+                {
+                  style: {
+                    color: record.sex === '女' ? 'blue' : 'green'
+                  }
+                },
+                record.sex
+              );
+            }
+          },
+          {
+            title: '学历',
+            key: 'record'
+          }
+        ],
+        data: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学'
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科'
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中'
+          }
+        ]
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+### 是否显示边框，文字对齐
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data" :bordered="bordered"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        bordered: false,
+        columns: [
+          {
+            title: '姓名',
+            key: 'name',
+            align: 'center'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          }
+        ],
+        data: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学'
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科'
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中'
+          }
+        ]
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 显示总结栏
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data" :summary="summary"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age'
+          },
+          {
+            title: '地址',
+            key: 'address'
+          }
+        ],
+        data: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学',
+            age: 13,
+            address: '北京'
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科',
+            age: 34,
+            address: '上海'
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中',
+            age: 4,
+            address: '杭州'
+          }
+        ],
+        summary: () => {
+          return {
+            value: '这是总结栏',
+            colspan: 5
+          };
+        }
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 条纹、明暗交替
+
+
+```html
+<template>
+  <fox-table :columns="columns3" :data="data2" :striped="striped"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        striped: true,
+        columns3: [
+          {
+            title: '姓名',
+            key: 'name'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age'
+          },
+          {
+            title: '地址',
+            key: 'address'
+          }
+        ],
+        data2: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学',
+            age: 13,
+            address: '北京'
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科',
+            age: 34,
+            address: '上海'
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中',
+            age: 4,
+            address: '杭州'
+          }
+        ]
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 无数据默认展示，支持自定义
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data"></fox-table>
+  <fox-table :columns="columns3" :data="data3">
+    <template #nodata>
+      <div class="no-data"> 这里是自定义展示 </div>
+    </template>
+  </fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age'
+          },
+          {
+            title: '地址',
+            key: 'address'
+          }
+        ],
+        data: [],
+        columns3: [
+          {
+            title: '姓名',
+            key: 'name'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age'
+          },
+          {
+            title: '地址',
+            key: 'address'
+          }
+        ],
+        data3: []
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 自定义单元格
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, h } from 'vue'
+  import { Button, Icon } from '@fox-js/foxui'
+  export default {
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name',
+            align: 'center'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '操作',
+            key: 'render'
+          }
+        ],
+        data: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学',
+            render: () => {
+              return h(
+                Button,
+                {
+                  onClick: () => {
+                    (Toast as any).text('hello');
+                  },
+                  size: 'small',
+                  type: 'primary'
+                },
+                'Hello'
+              );
+            }
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科',
+            render: () => {
+              return h(Icon, { name: 'dongdong', size: '14px' });
+            }
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中',
+            render: () => {
+              return h(
+                Button,
+                {
+                  type: 'success',
+                  size: 'small',
+                  onClick: () => {
+                    window.open('https://www.jd.com');
+                  }
+                },
+                '跳转到京东'
+              );
+            }
+          }
+        ]
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 支持异步渲染
+
+
+```html
+<template>
+  <h2>支持异步渲染(5s之后看效果)</h2>
+  <fox-table :columns="columns" :data="data"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, onMounted } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name'
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age'
+          },
+          {
+            title: '地址',
+            key: 'address'
+          }
+        ],
+        data: [],
+        data1: [
+          {
+            address: '北京',
+            name: 'Tom',
+            sex: '男',
+            record: '小学',
+            age: 13
+          },
+          {
+            record: '本科',
+            name: 'Lucy',
+            sex: '女',
+            age: 34,
+            address: '上海'
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中',
+            age: 4,
+            address: '杭州'
+          }
+        ]
+      });
+      onMounted(() => {
+        setTimeout(() => {
+          state.data = state.data1.slice();
+        }, 5000);
+      });
+      return {
+        ...toRefs(state)
+      };
+    }
+  };
+</script>
+```
+
+
+### 支持排序
+
+
+```html
+<template>
+  <fox-table :columns="columns" :data="data" @sorter="handleSorter"></fox-table>
+</template>
+<script lang="ts">
+  import { reactive, toRefs } from 'vue'
+  import { Toast } from '@fox-js/foxui'
+  export default {
+    setup() {
+      const state = reactive({
+        columns: [
+          {
+            title: '姓名',
+            key: 'name',
+            align: 'center',
+            sorter: true
+          },
+          {
+            title: '性别',
+            key: 'sex'
+          },
+          {
+            title: '学历',
+            key: 'record'
+          },
+          {
+            title: '年龄',
+            key: 'age',
+            sorter: (row1: any, row2: any) => {
+              return row1.age - row2.age;
+            }
+          }
+        ],
+        data: [
+          {
+            name: 'Tom',
+            sex: '男',
+            record: '小学',
+            age: 10
+          },
+          {
+            name: 'Lucy',
+            sex: '女',
+            record: '本科',
+            age: 30
+          },
+          {
+            name: 'Jack',
+            sex: '男',
+            record: '高中',
+            age: 4
+          }
+        ]
+      });
+
+      const handleSorter = (item: TableColumnProps) => {
+        (Toast as any).text(`${JSON.stringify(item)}`);
+      };
+
+      return {
+        ...toRefs(state),
+        handleSorter
+      };
+    }
+  };
+</script>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Table 配合使用的相关组件
+

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

@@ -0,0 +1,67 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Tabs 组件使用规范
+impact: HIGH
+type: capability
+description: 常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式
+tags: [foxui, fox-tabs, FoxTabs]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-tabpane","fox-icon"]
+---
+
+# Tabs 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Tabs 是 foxui 中用于 **常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式** 的标准组件。
+- **基于**: NutUI `nut-tabs` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式
+
+> 💡 **关键原则**: 在所有 常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `title` | 标题 | string |
+| `pane-key` | 标签 Key , 匹配的标识符 | string | 默认索引0,1,2... |
+| `disabled` | 是否禁用标签 | boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 点击标签时触发 | title,paneKey,disabled |
+| `change` | 当前激活的标签改变时触发 | title,paneKey,disabled |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Tabs 配合使用的相关组件
+- **fox-tabpane**: 与 Tabs 配合使用的相关组件
+- **fox-icon**: 与 Tabs 配合使用的相关组件
+