@fox-js/phone-skills 4.0.1-0

package/foxui/references/fox-message-box/doc.md

@@ -0,0 +1,200 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: MessageBox 组件使用规范
+impact: HIGH
+type: capability
+description: 消息弹框
+tags: [foxui, fox-message-box, FoxMessageBox]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-row-item","fox-button"]
+---
+
+# MessageBox 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+MessageBox 是 foxui 中用于 **消息弹框** 的标准组件。
+- **基于**: NutUI `nut-message-box` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持主题定制
+- **适用场景**: 消息弹框
+
+> 💡 **关键原则**: 在所有 消息弹框 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `width` | 宽度 | String | - |
+| `height` | 高度 | String/VNode | - |
+| `type` | 弹框类型 | 'success' \ | 'info' \ |
+| `icon` | 弹框图标 | String\ | Component |
+| `close-icon` | 关闭图标 | String\ | Component |
+| `show-close` | 是否显示关闭图标 | Boolean | true |
+| `title` | 弹窗标题 | String | - |
+| `message` | 弹窗消息 | String \ | Content \ |
+| `show-confirm-button` | 是否显示确定按钮 | Boolean | true |
+| `confirm-text` | 确定按钮文案 | String | ”确定“ |
+| `confirm-button-class` | 确定按钮class | String | - |
+| `confirm-button-style` | 确定按钮style | CSSProperties | - |
+| `show-cancel-button` | 是否显示取消按钮 | Boolean | true |
+| `cancel-text` | 取消按钮文案 | String | ”取消“ |
+| `cancel-button-class` | 取消按钮class | String | - |
+| `cancel-button-style` | 取消按钮style | CSSProperties | - |
+| `callback` | 回调函数 | Function | - |
+| `close-on-click-overlay` | 点击overlay关闭弹窗 | boolean | true |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+无
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+```html
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { MessageBox, Toast } from '@/foxui.vue.build'
+// alert提示
+const onAlert = async () => {
+  const ret = await MessageBox.alert(
+    '模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息。',
+    '消息弹框标题'
+  )
+  Toast.text(ret.action)
+}
+// 内容
+const content = [
+  {
+    title: '阻断项：',
+    content: ['该业务不存在签约人信息', '账户信息为空，请录入账户信息']
+  },
+  {
+    title: '提示项：',
+    content: ['【营业执照】未上传', '【卖方信息】为空']
+  }
+]
+// confirm提示
+const onConfirm = async () => {
+  const ret = await MessageBox.confirm(content, '标题')
+  Toast.text(ret.action)
+}
+</script>
+<template>
+  <fox-group title="基本用法" column="1">
+    <fox-row-item align="left">
+      <fox-button @click="onAlert">Alert提示</fox-button>
+      <fox-button @click="onConfirm">Confirm提示</fox-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+```
+
+### 弹窗类型
+通过options的type属性设置弹框类型
+``` html
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { MessageBox, Toast } from '@/foxui.vue.build'
+// 内容
+const content = [
+  {
+    title: '阻断项：',
+    content: ['该业务不存在签约人信息', '账户信息为空，请录入账户信息']
+  },
+  {
+    title: '提示项：',
+    content: ['【营业执照】未上传', '【卖方信息】为空']
+  }
+]
+// confirm提示
+const onConfirm = async () => {
+  const ret = await MessageBox.confirm(content, '标题')
+  Toast.text(ret.action)
+}
+// confirm提示
+const onShow = async (type?: 'success' | 'warning' | 'error' | 'info') => {
+  const ret = await MessageBox.alert(content, { type: type ?? 'info' })
+  Toast.text(ret.action)
+}
+</script>
+<template>
+ 
+  <fox-group title="弹窗类型" column="1">
+    <fox-row-item align="left">
+      <fox-button @click="onShow">默认</fox-button>
+      <fox-button @click="onShow('success')">成功</fox-button>
+      <fox-button @click="onShow('warning')">警告</fox-button>
+      <fox-button @click="onShow('error')">错误</fox-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+<style lang="scss" scope>
+.fox-button + .fox-button {
+  margin-left: 20px;
+}
+</style>
+```
+
+### 自定义
+```html
+<!--
+ * @version: 1.0
+ * @Author: 江成
+ * @Date: 2024-03-02 09:11:11
+-->
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { MessageBox, Toast } from '@/foxui.vue.build'
+// 定义button text和样式
+const onCustomButton = async () => {
+  const ret = await MessageBox.confirm(
+    '模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息。',
+    '消息弹框标题',
+    {
+      type: 'info',
+      confirmText: '继续创建',
+      confirmButtonStyle: { color: 'red' }
+    }
+  )
+  Toast.text(ret.action)
+}
+</script>
+<template>
+  <fox-group title="自定义" column="1">
+    <fox-row-item align="left">
+      <fox-button @click="onCustomButton">自定义按钮</fox-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 MessageBox 配合使用的相关组件
+- **fox-group**: 与 MessageBox 配合使用的相关组件
+- **fox-row-item**: 与 MessageBox 配合使用的相关组件
+- **fox-button**: 与 MessageBox 配合使用的相关组件
+

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

@@ -0,0 +1,174 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: MoneyItem 组件使用规范
+impact: HIGH
+type: capability
+description: 金额输入框，用于金额输入
+tags: [foxui, fox-money-item, FoxMoneyItem]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js"]
+---
+
+# MoneyItem 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+MoneyItem 是 foxui 中用于 **金额输入框，用于金额输入** 的标准组件。
+- **基于**: NutUI `nut-money-item` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、内置必填校验标识、支持 v-model 双向绑定、支持标签位置自定义、支持占位符提示、支持禁用/只读状态、内置多级提示信息、适配 H5 与小程序多端、支持插槽扩展自定义内容
+- **适用场景**: 金额输入框，用于金额输入
+
+> 💡 **关键原则**: 在所有 金额输入框，用于金额输入 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `v-model` | 输入值，双向绑定 | String | - |
+| `min` | 最小值限制 | String、Number | - |
+| `minInclude` | 限制是否包括最小值 | Boolean | true |
+| `max` | 最大值限制 | String、Number | - |
+| `maxInclude` | 限制是否包括最大值 | Boolean | true |
+| `rates` | 换算利率 | String、Number | 1 |
+| `precision` | 换算利率计算精度 | Number | - |
+| `integerLength` | 输入整数部分长度 | String、Number | - |
+| `decimalLength` | 输入小数部分长度 | String、Number | - |
+| `autoPadding` | 是否自动填充小数位 | String、Bolean | true |
+| `digits` | 分块长度 | String、Number | 3 |
+| `separator` | 分块分割符 | String | , |
+| `placeholder` | 为空时占位符 | String | - |
+| `max-length` | 限制最长输入字符 | String、Number | - |
+| `clearable` | 展示清除icon | Boolean | true |
+| `text-align` | 文本位置,可选值left,center,right | String | left |
+| `unit` | 单位 | String | - |
+| `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 | - |
+| `wran-icon` | 警告提示图标 | String | - |
+| `info-tip` | 提示 | String | - |
+| `info-icon` | 提示图标 | String | - |
+| `adjust-position` | 键盘弹起时，是否自动上推页面（仅支持小程序） | Boolean | true |
+| `always-system` | 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效（仅支持小程序） | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `change` | 输入内容时触发 | val |
+| `focus` | 聚焦时触发 | val |
+| `blur` | 失焦时触发 | val |
+| `clear` | 点击清空时触发 | val |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `default` | label内容 |
+| `prepend` | 左侧自定义内容 |
+| `append` | 右侧自定义内容 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+### 基础用法
+常用属性与事件
+```html
+ <fox-money-item v-model="val" @change="onChange" @focus="onFocus" @blur="onBlur" @clear="onClear">普通</fox-money-item>
+ <fox-money-item v-model="val2" decimal-length="2" unit="元" clearable placeholder="请输入">小数2位</fox-money-item>
+ <fox-money-item v-model="val3" decimal-length="2" auto-adding="true" unit="元">自动填充</fox-money-item>
+```
+### 范围
+设置最大最小值范围，整数、小数部分长度
+```html
+<fox-money-item v-model="val4" unit="元" min="0">非负数</fox-money-item>
+<fox-money-item v-model="val5" unit="元" min="5" max="100" required>最大最小值</fox-money-item>
+<fox-money-item v-model="val6" unit="元" integer-length="5" decimal-length="3">整5小3</fox-money-item>
+<fox-money-item v-model="val7" min="0" min-include="false" decimal-length="0" required>整数大于0</fox-money-item>
+<fox-money-item v-model="val8" max="0" max-include="true" decimal-length="0" required>整数小于等于0</fox-money-item>
+```
+### 利率
+通过rates设置输入框的value和v-model的转换利率，如输入1，实际model值为1000
+```html
+<fox-money-item v-model="val9" unit="万" rates="10000" decimal-length="6" precision="2">单位万</fox-money-item>
+<fox-money-item v-model="val10" unit="%" rates="0.01" precision="2">百分比</fox-money-item>
+```
+### 代码
+```ts
+import { reactive, toRefs, watch } from 'vue'
+import { createComponent } from '@/utils/create'
+const { createDemo } = createComponent('input')
+export default createDemo({
+  // setup
+  setup() {
+    // 数据
+    const data = reactive({
+      val: 444.44,
+      val2: '',
+      val3: '123,456',
+      val4: '',
+      val5: '',
+      val6: null,
+      val7: '',
+      val8: '',
+      val9: '99999999999999999999.99',
+      val10: 456
+    })
+    watch(
+      () => data.val9,
+      val => {
+        console.info(`金额:${val}元`)
+      }
+    )
+    watch(
+      () => data.val10,
+      val => {
+        console.info(`百分比:${val}`)
+      }
+    )
+    // 方法
+    const methods = {
+      onChange: (value: string | number, event: Event) => {
+        console.log('change: ', value, event)
+      },
+      onFocus: (value: string | number, event: Event) => {
+        console.log('focus:', value, event)
+      },
+      onBlur: (value: string | number, event: Event) => {
+        console.log('blur:', value, event)
+      },
+      onClear: (value: string | number) => {
+        console.log('clear:', value)
+      }
+    }
+    return {
+      ...toRefs(data),
+      ...methods
+    }
+  }
+})
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 MoneyItem 配合使用的相关组件
+

package/foxui/references/fox-more-button/doc.md

@@ -0,0 +1,208 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: MoreButton 组件使用规范
+impact: HIGH
+type: capability
+description: 更多按钮
+tags: [foxui, fox-more-button, FoxMoreButton]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-group","fox-input-item","fox-date-item","fox-select-item","fox-row-item","fox-button"]
+---
+
+# MoreButton 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+MoreButton 是 foxui 中用于 **更多按钮** 的标准组件。
+- **基于**: NutUI `nut-more-button` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、支持禁用/只读状态、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 更多按钮
+
+> 💡 **关键原则**: 在所有 更多按钮 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `modelValue` | value/v-model | Boolean | - |
+| `type` | 组件类型 | primary | success |
+| `disabled` | 是否禁用 | Boolean | - |
+| `collapse-text` | 折叠提示文字 | String | - |
+| `expand-text` | 展开提示文字 | String | 展开 |
+| `icon` | icon | Object | - |
+| `text-position` | 文本位置 | left/right | right |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `icon` | icon插槽 |
+
+## 3. 例子 (Examples)
+
+## 代码演示
+
+### 基础用法
+```html
+<!--
+ * @Author: 江成
+ * @Date: 2022-11-03 14:21:27
+-->
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+// source array
+const sourceForArray = [
+  { text: '男', value: '01' },
+  { text: '女', value: '02' }
+]
+// data
+const data = reactive({
+  name: '',
+  date: '',
+  sex: '',
+  keyword: '',
+  desc: ''
+})
+// 折叠变量
+const collapse = ref(true)
+</script>
+<template>
+  <fox-group column="1">
+    <fox-input-item v-model="data.name" prop="name">姓名</fox-input-item>
+    <fox-date-item v-model="data.date" prop="date">日期</fox-date-item>
+    <fox-select-item v-model="data.sex" prop="sex" :source="sourceForArray">性别</fox-select-item>
+    <fox-group v-model:collapse="collapse" column="1">
+      <fox-input-item v-model="data.keyword" prop="keyword">关键字</fox-input-item>
+      <fox-input-item v-model="data.desc" prop="desc" type="text" show-limit="true">描述</fox-input-item>
+    </fox-group>
+    <fox-row-item align="right">
+      <fox-button>重置</fox-button>
+      <fox-button type="primary">查询</fox-button>
+      <fox-more-button v-model="collapse"></fox-more-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+<style lang="scss" scoped></style>
+```
+### type样式设置
+通过`type`属性设置`more-button`组件的样式
+```html
+<!--
+ * @version: 1.0
+ * @Author: 江成
+ * @Date: 2023-05-01 10:40:40
+-->
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+// source array
+const sourceForArray = [
+  { text: '男', value: '01' },
+  { text: '女', value: '02' }
+]
+// data
+const data = reactive({
+  name: '',
+  date: '',
+  sex: '',
+  keyword: '',
+  desc: ''
+})
+// 折叠变量
+const collapse = ref(true)
+</script>
+<template>
+  <fox-group column="1">
+    <fox-input-item v-model="data.name" prop="name">姓名</fox-input-item>
+    <fox-date-item v-model="data.date" prop="date">日期</fox-date-item>
+    <fox-select-item v-model="data.sex" prop="sex" :source="sourceForArray">性别</fox-select-item>
+    <fox-group v-model:collapse="collapse" column="1">
+      <fox-input-item v-model="data.keyword" prop="keyword">关键字</fox-input-item>
+      <fox-input-item v-model="data.desc" prop="desc" type="text" show-limit="true">描述</fox-input-item>
+    </fox-group>
+    <fox-row-item align="right">
+      <fox-more-button v-model="collapse" expand-text="default"></fox-more-button>
+      <fox-more-button v-model="collapse" expand-text="primary" type="primary"></fox-more-button>
+      <fox-more-button v-model="collapse" expand-text="success" type="success"></fox-more-button>
+      <fox-more-button v-model="collapse" expand-text="info" type="info"></fox-more-button>
+      <fox-more-button v-model="collapse" expand-text="warning" type="warning"></fox-more-button>
+      <fox-more-button v-model="collapse" expand-text="danger" type="danger"></fox-more-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+<style lang="scss" scoped></style>
+```
+### text和icon设置
+通过`collapse-text`, `expand-text`, `icon`属性设置`more-button`组件的样式
+```html
+<!--
+ * @version: 1.0
+ * @Author: 江成
+ * @Date: 2023-05-01 16:02:23
+-->
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { ArrowUp } from '@fox-js/icons-vue'
+// source array
+const sourceForArray = [
+  { text: '男', value: '01' },
+  { text: '女', value: '02' }
+]
+// data
+const data = reactive({
+  name: '',
+  date: '',
+  sex: '',
+  keyword: '',
+  desc: ''
+})
+// 折叠变量
+const collapse = ref(true)
+</script>
+<template>
+  <fox-group column="1">
+    <fox-input-item v-model="data.name" prop="name">姓名</fox-input-item>
+    <fox-date-item v-model="data.date" prop="date">日期</fox-date-item>
+    <fox-select-item v-model="data.sex" prop="sex" :source="sourceForArray">性别</fox-select-item>
+    <fox-group v-model:collapse="collapse" column="1">>
+      <fox-input-item v-model="data.keyword" prop="keyword">关键字</fox-input-item>
+      <fox-input-item v-model="data.desc" prop="desc" type="text" show-limit="true">描述</fox-input-item>
+    </fox-group>
+    <fox-row-item align="right">
+      <fox-more-button v-model="collapse" expand-text="展开" collapse-text="收起"></fox-more-button>
+      <fox-more-button v-model="collapse" :icon="ArrowUp"></fox-more-button>
+    </fox-row-item>
+  </fox-group>
+</template>
+<style lang="scss" scoped></style>
+```
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 MoreButton 配合使用的相关组件
+- **fox-group**: 与 MoreButton 配合使用的相关组件
+- **fox-input-item**: 与 MoreButton 配合使用的相关组件
+- **fox-date-item**: 与 MoreButton 配合使用的相关组件
+- **fox-select-item**: 与 MoreButton 配合使用的相关组件
+- **fox-row-item**: 与 MoreButton 配合使用的相关组件
+- **fox-button**: 与 MoreButton 配合使用的相关组件
+

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

@@ -0,0 +1,75 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-04-27 00:37:28
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-05-12 22:33:21
+-->
+---
+title: Navbar 组件使用规范
+impact: HIGH
+type: capability
+description: 头部导航
+tags: [foxui, fox-navbar, FoxNavbar]
+version: "4.0.0"
+author: jiangcheng
+related: ["fox-js","fox-icon","fox-tabs","fox-tabpane"]
+---
+
+# Navbar 组件使用规范
+
+## 1. 核心职责 (Core Responsibility)
+Navbar 是 foxui 中用于 **头部导航** 的标准组件。
+- **基于**: NutUI `nut-navbar` 进行了二次封装 (若为纯自研组件则填 "自定义开发")
+- **核心增强**: 基于 NutUI 组件二次封装、支持 v-model 双向绑定、适配 H5 与小程序多端、支持插槽扩展自定义内容、支持主题定制
+- **适用场景**: 头部导航
+
+> 💡 **关键原则**: 在所有 头部导航 中，**必须**优先使用此组件，禁止直接使用原生 NutUI 组件。
+
+---
+
+## 2. 关键 API 说明 (Key API)
+
+### 2.1 Props 属性
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+| :--- | :--- | :---: | :---: | :--- |
+| `title` | 标题名称 | String | - |
+| `desc` | 右侧描述 | String | - |
+| `left-show` | 是否展示左侧箭头 | Boolean | false |
+| `tit-icon` | 标题中插入icon | String | - |
+| `fixed` | 是否固定到顶部 | Boolean | false |
+| `safe-area-inset-top` | 是否开启顶部安全区适配 | Boolean | false |
+
+### 2.2 Events 事件
+
+| 事件名 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `on-click-title` | 点击页面标题事件 | event:Event |
+| `on-click-icon` | 点击页面标题icon事件 | event:Event |
+| `on-click-right` | 点击右侧按钮事件 | event:Event |
+| `on-click-back` | 左侧图标返回点击事件 | event:Event |
+
+### 2.3 Methods 方法
+
+| 方法名 | 参数 | 说明 |
+| :--- | :--- | :--- |
+无
+
+### 2.4 Slots 插槽
+
+| 插槽名 | 说明 |
+| :--- | :--- |
+| `left` | 自定义左侧内容 |
+| `right` | 自定义右侧内容 |
+| `content` | 自定义导航栏中间内容 |
+
+## 3. 例子 (Examples)
+
+
+
+## 4. 相关组件 (Related Components)
+- **fox-js**: 与 Navbar 配合使用的相关组件
+- **fox-icon**: 与 Navbar 配合使用的相关组件
+- **fox-tabs**: 与 Navbar 配合使用的相关组件
+- **fox-tabpane**: 与 Navbar 配合使用的相关组件
+