@fox-js/phone-skills 4.0.1-0

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

@@ -0,0 +1,149 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Divider 组件使用规范
+impact: HIGH
+type: capability
+description: 用于将内容分隔为多个区域。
+tags: [foxui, fox-divider, FoxDivider]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-cell"]
+---
+
+# Divider 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Divider 是 foxui 中用于 **用于将内容分隔为多个区域。** 的标准组件。
+- **基于**: NutUI `nut-divider` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 用于将内容分隔为多个区域。
+
+> 💡 **关键原则**: 在所有 用于将内容分隔为多个区域。 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `dashed` | 是否使用虚线 | Boolean | false |
+| `hairline` | 是否使用 0.5px 线 | Boolean | true |
+| `content-position` | 内容位置，可选值为left right | String | center |
+| `direction` | 水平还是垂直类型 | String | 'horizontal' |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+
+默认渲染一条水平分割线。
+
+``` html
+<template>
+    <fox-cell>
+        <fox-divider />
+    </fox-cell>
+</template>
+```
+
+### 展示文本
+
+通过插槽可以在分割线中间插入内容。
+
+
+``` html
+<template>
+    <fox-cell>
+        <fox-divider>文本</fox-divider>
+    </fox-cell>
+</template>
+```
+
+### 内容位置
+
+通过 content-position 指定内容所在位置。
+
+
+``` html
+<template>
+    <fox-cell>
+        <fox-divider content-position="left">文本</fox-divider>
+    </fox-cell>
+    <fox-cell>
+        <fox-divider content-position="right">文本</fox-divider>
+    </fox-cell>
+</template>
+```
+
+### 虚线
+
+添加 dashed 属性使分割线渲染为虚线。
+
+
+``` html
+<template>
+    <fox-cell>
+        <fox-divider dashed>文本</fox-divider>
+    </fox-cell>
+</template>
+```
+
+### 自定义样式
+
+可以直接通过 style 属性设置分割线的样式。
+
+
+``` html
+<template>
+    <fox-cell>
+        <fox-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文本</fox-divider>
+    </fox-cell>
+</template>
+```
+
+### 垂直分割线
+
+``` html
+<template>
+    <fox-cell>
+         <div :style="{fontSize: '14px'}">
+            文本
+            <fox-divider direction="vertical" />
+            <a href="#" :style="{ color: '#1989fa' }">链接</a>
+            <fox-divider direction="vertical" />
+            <a href="#" :style="{ color: '#1989fa' }">链接</a>
+        </div>
+    </fox-cell>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Divider 配合使用的相关组件
+- **fox-cell**: 与 Divider 配合使用的相关组件
+

package/foxui/references/fox-domain-provider/doc.md

@@ -0,0 +1,93 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: DomainProvider 组件使用规范
+impact: HIGH
+type: capability
+description: 设置领域配置
+tags: [foxui, fox-domain-provider, FoxDomainProvider]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-card-navigator"]
+---
+
+# DomainProvider 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+DomainProvider 是 foxui 中用于 **设置领域配置** 的标准组件。
+- **基于**: NutUI `nut-domain-provider` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 设置领域配置
+
+> 💡 **关键原则**: 在所有 设置领域配置 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `name` | 领域名称 | String | - |
+| `config` | 领域配置参数 | Object | - |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+设置范围内的domain配置，例如UI参数
+``` ts
+<script lang="ts" setup>
+// router view name
+const routerViewName = '_root_welcome'
+//domain配置
+const UIOptions = ref({
+  // page layout
+  pageLayout: {
+    headerHeight: 0,
+    footerHeight: 80,
+    // header padding
+    headerPadding: {},
+    // content padding
+    contentPadding: {
+      top: 0,
+      left: 32,
+      right: 32
+    }
+  }
+})
+</script>
+<template>
+  <fox-domain-provider name="home" :config="UIOptions">
+    <fox-card-navigator :router-view-name="routerViewName" :transition="false"> </fox-card-navigator>
+  </fox-domain-provider>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 DomainProvider 配合使用的相关组件
+- **fox-card-navigator**: 与 DomainProvider 配合使用的相关组件
+

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

@@ -0,0 +1,64 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Drag 组件使用规范
+impact: HIGH
+type: capability
+description: 拖拽组件
+tags: [foxui, fox-drag, FoxDrag]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Drag 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Drag 是 foxui 中用于 **拖拽组件** 的标准组件。
+- **基于**: NutUI `nut-drag` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装
+- **适用场景**: 拖拽组件
+
+> 💡 **关键原则**: 在所有 拖拽组件 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `attract` | 是否开启自动吸边 | Boolean | false |
+| `direction` | 拖拽元素的拖拽方向限制，x/y/all三选一 | String | 'all' |
+| `boundary` | 拖拽元素的拖拽边界 | Object | top: 0,left: 0,right: 0,bottom: 0 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Drag 配合使用的相关组件
+

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

@@ -0,0 +1,138 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Dropdown 组件使用规范
+impact: HIGH
+type: capability
+description: 下拉弹框
+tags: [foxui, fox-dropdown, FoxDropdown]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-page","fox-header-bar","fox-row-item","fox-text","fox-content","fox-group","fox-link-item"]
+---
+
+# Dropdown 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Dropdown 是 foxui 中用于 **下拉弹框** 的标准组件。
+- **基于**: NutUI `nut-dropdown` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持插槽扩展自定义内容
+- **适用场景**: 下拉弹框
+
+> 💡 **关键原则**: 在所有 下拉弹框 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+无
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 弹框内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+```html
+<!--
+ * @version: 1.0
+ * @Author: 江成
+ * @Date: 2024-04-14 20:38:50
+-->
+<script lang="ts" setup>
+import { computed, ref, reactive } from 'vue'
+import { useRouter } from '@fox-js/fox'
+import { UploadCloud, MoreH } from '@fox-js/icons-vue'
+import { imageTree } from './data'
+// 获取router
+const router = useRouter()
+// visible
+const visible = ref(false)
+// 显示top popover
+const onToggleVisible = () => {
+  visible.value = !visible.value
+}
+// selected text
+const selectedText = ref('')
+// on selected
+const onSelected = (item: Record<string, any>) => {
+  selectedText.value = item.text
+  visible.value = false
+}
+//content padding
+const contentPadding = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+}
+// 回退处理
+const onBack = () => {
+  router.back()
+}
+</script>
+<template>
+  <fox-page header-height="auto" :content-padding="contentPadding">
+    <fox-header-bar @back="onBack">
+      <template v-slot:default>Dropdwon</template>
+      <template v-slot:bottom>
+        <fox-row-item class="my-top-select-row" align="space-between">
+          <fox-text><span class="label">当前选择：</span>{{ selectedText }}</fox-text>
+          <MoreH @click="onToggleVisible" width="16px" height="16px"></MoreH>
+        </fox-row-item>
+      </template>
+    </fox-header-bar>
+    <fox-content class="my-content">
+      <fox-dropdown v-model:visible="visible">
+        <fox-group label-width="150px">
+          <fox-link-item v-for="(item, index) in imageTree" @click="onSelected(item)">
+            {{ item.text }}
+          </fox-link-item>
+        </fox-group>
+      </fox-dropdown>
+    </fox-content>
+  </fox-page>
+</template>
+<style lang="scss" scoped>
+.my-top-select-row {
+  .label {
+    color: rgba(51, 51, 51, 1);
+  }
+}
+</style>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Dropdown 配合使用的相关组件
+- **fox-page**: 与 Dropdown 配合使用的相关组件
+- **fox-header-bar**: 与 Dropdown 配合使用的相关组件
+- **fox-row-item**: 与 Dropdown 配合使用的相关组件
+- **fox-text**: 与 Dropdown 配合使用的相关组件
+- **fox-content**: 与 Dropdown 配合使用的相关组件
+- **fox-group**: 与 Dropdown 配合使用的相关组件
+- **fox-link-item**: 与 Dropdown 配合使用的相关组件
+

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

@@ -0,0 +1,66 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Elevator 组件使用规范
+impact: HIGH
+type: capability
+description: 用于列表快速定位以及索引的显示
+tags: [foxui, fox-elevator, FoxElevator]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon"]
+---
+
+# Elevator 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Elevator 是 foxui 中用于 **用于列表快速定位以及索引的显示** 的标准组件。
+- **基于**: NutUI `nut-elevator` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 用于列表快速定位以及索引的显示
+
+> 💡 **关键原则**: 在所有 用于列表快速定位以及索引的显示 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `height` | 电梯区域的高度 | Number、String | 200px |
+| `accept-key` | 索引 key 值 | String | title |
+| `index-list` | 索引列表 | Array（item需包含 id、name属性, name支持传入 html 结构） | id: 0, name: '' |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click-item` | 点击内容 | key: string, item:  id: 0, name: ''  |
+| `click-index` | 点击索引 | key: string |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+| `scrollTo` | 滚动到对应索引的位置 | index:number |
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Elevator 配合使用的相关组件
+- **fox-icon**: 与 Elevator 配合使用的相关组件
+

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

@@ -0,0 +1,69 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Ellipsis 组件使用规范
+impact: HIGH
+type: capability
+description: 文本省略
+tags: [foxui, fox-ellipsis, FoxEllipsis]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# Ellipsis 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Ellipsis 是 foxui 中用于 **文本省略** 的标准组件。
+- **基于**: NutUI `nut-ellipsis` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持主题定制
+- **适用场景**: 文本省略
+
+> 💡 **关键原则**: 在所有 文本省略 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `content` | 文本内容 | String | - |
+| `direction` | 省略位置 | 'start' | 'end' |
+| `rows` | 展示几行 | Number | 1 |
+| `expand-text` | 展开操作的文案 | String | '' |
+| `collapse-text` | 收起操作的文案 | String | '' |
+| `symbol` | 省略的符号 | String | '...' |
+| `line-height` | 容器的行高 | String、Number | 20 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `click` | 文本点击是触发 | -- |
+| `change` | 点击展开收起时触发 | -- |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Ellipsis 配合使用的相关组件
+

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

@@ -0,0 +1,67 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Empty 组件使用规范
+impact: HIGH
+type: capability
+description: 空状态时占位提示
+tags: [foxui, fox-empty, FoxEmpty]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-button"]
+---
+
+# Empty 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Empty 是 foxui 中用于 **空状态时占位提示** 的标准组件。
+- **基于**: NutUI `nut-empty` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 空状态时占位提示
+
+> 💡 **关键原则**: 在所有 空状态时占位提示 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `image` | 图片类型，可选值为 error network search，支持传入图片 URL | String | empty |
+| `image-size` | 图片大小，Number 类型单位为 px | Number \ | String |
+| `description` | 图片下方的描述文字 | String | 无内容 |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | 自定义底部内容 |
+| `image` | 自定义图片 |
+| `description` | 自定义描述文字 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Empty 配合使用的相关组件
+- **fox-button**: 与 Empty 配合使用的相关组件
+