@uxda/appkit 4.3.30 → 4.3.33

package/Appkit/347/273/204/344/273/266/344/275/277/347/224/250/350/247/204/345/210/231.md

@@ -1,2002 +1,2002 @@
-# Appkit 组件使用规则
-
-本文档详细说明 Appkit 中各组件的使用方法、属性、事件和注意事项。
-
-## 目录
-
-### 支付模块 (Payment)
-- [TradeView - 权益充值视图](#tradeview---权益充值视图)
-- [RechargeView - 云豆充值视图](#rechargeview---云豆充值视图)
-- [AmountPicker - 金额选择器](#amountpicker---金额选择器)
-- [RechargeResult - 充值结果页](#rechargeresult---充值结果页)
-- [UserAgreement - 用户协议](#useragreement---用户协议)
-
-### 余额模块 (Balance)
-- [AccountView - 账户总览](#accountview---账户总览)
-- [BalanceCard - 余额卡片](#balancecard---余额卡片)
-- [BalanceReminder - 余额提醒](#balancereminder---余额提醒)
-- [DateRange - 日期范围](#daterange---日期范围)
-- [ListFilter - 列表筛选](#listfilter---列表筛选)
-- [PromoterCard - 推广员卡片](#promotercard---推广员卡片)
-
-### 消息通知模块 (Notice)
-- [NoticeBanner - 通知横幅](#noticebanner---通知横幅)
-- [NoticeList - 消息列表](#noticelist---消息列表)
-- [NoticeList2 - 消息列表（二代）](#noticelist2---消息列表二代)
-- [NoticeEntry - 消息入口](#noticeentry---消息入口)
-
-### 用户模块 (User)
-- [UserEntry - 用户入口](#userentry---用户入口)
-- [UserInfo - 用户信息](#userinfo---用户信息)
-- [UserAuth - 用户认证](#userauth---用户认证)
-- [UserBinding - 账号绑定](#userbinding---账号绑定)
-- [UserBindingSuccess - 绑定成功](#userbindingsuccess---绑定成功)
-- [UserHeadCrop - 头像裁剪](#userheadcrop---头像裁剪)
-- [UserFeedback - 用户反馈](#userfeedback---用户反馈)
-- [UserFeedbackEntry - 反馈入口](#userfeedbackentry---反馈入口)
-- [LoginSetting - 登录设置](#loginsetting---登录设置)
-- [UserResourceEmpty - 资源空状态](#userresourceempty---资源空状态)
-
-### 注册模块 (Register)
-- [SelfRegistration - 自助注册](#selfregistration---自助注册)
-
-### 业务场景 (Scenarios)
-- [SharePoster - 分享海报](#shareposter---分享海报)
-
-### 共享模块 (Shared)
-- [AppDrawer - 抽屉](#appdrawer---抽屉)
-- [PageHeader - 页面头部](#pageheader---页面头部)
-- [DeviceVersion - 设备版本](#deviceversion---设备版本)
-- [AppVerify - 应用验证](#appverify---应用验证)
-- [OcrIcon - OCR 入口](#ocricon---ocr-入口)
-- [OcrBank - 银行卡 OCR](#ocrbank---银行卡-ocr)
-- [OcrBusinessLicense - 营业执照 OCR](#ocrbusinesslicense---营业执照-ocr)
-- [OcrInvoice - 发票 OCR](#ocrinvoice---发票-ocr)
-- [OfficePdf - PDF 预览](#officepdf---pdf-预览)
-- [OfficeDocx - Word 文档预览](#officedocx---word-文档预览)
-
-### 通用基础组件 (Components)
-- [DdSearch - 搜索框](#ddsearch---搜索框)
-- [DdIcon - 图标组件](#ddicon---图标组件)
-- [DdSkeleton - 骨架屏](#ddskeleton---骨架屏)
-- [DdNoticeBar - 滚动通告栏](#ddnoticebar---滚动通告栏)
-
----
-
-## TradeView - 权益充值视图
-
-**功能描述**: 提供权益充值金额选择、云豆支付和组合支付（云豆+微信）的完整支付流程。
-
-### 导入方式
-
-```typescript
-import { TradeView } from '@uxda/appkit/payment'
-// 或
-import TradeView from '@uxda/appkit/payment/components/TradeView.vue'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `headerApp` | `string` | ✅ | - | header头中的appcode，一般情况下与app参数一致，当无应用权限时，此参数为空 |
-| `app` | `string` | ✅ | - | 应用标识，用于区分不同应用（如：'corporateStar'、'riskQueryMulti'） |
-| `tenant` | `string` | ✅ | - | 租户ID |
-| `payFinishJumpUrl` | `string` | ❌ | `''` | H5支付完成后跳转地址 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `complete` | `{ result: boolean \| any, type: string }` | 支付完成时触发<br/>- `result`: 支付结果<br/>- `type`: 支付类型（'bean' | 'wePay' | 'combined'）<br/>  - `'bean'`: 纯云豆支付<br/>  - `'wePay'`: 纯微信支付<br/>  - `'combined'`: 组合支付（云豆+微信） |
-| `agree` | - | 用户点击协议链接时触发，可用于打开协议详情页 |
-
-### Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| `banner` | 自定义横幅内容，通常用于展示促销信息或活动内容 |
-
-### 使用示例
-
-```vue
-<template>
-  <trade-view
-    header-app="loankitMp"
-    app="corporateStar"
-    tenant="1"
-    pay-finish-jump-url="/pages/success/index"
-    @complete="handlePayComplete"
-    @agree="handleAgreeClick"
-  >
-    <template #banner>
-      <div class="promotion-banner">
-        <p>同样价格,看更多数据</p>
-        <p>了解AI审批一启明星的全面升级版</p>
-      </div>
-    </template>
-  </trade-view>
-</template>
-
-<script setup>
-import { TradeView } from '@uxda/appkit/payment'
-
-const handlePayComplete = ({ result, type }) => {
-  console.log('支付完成', { result, type })
-  if (result) {
-    // 支付成功处理
-    if (type === 'bean') {
-      // 纯云豆支付成功
-    } else if (type === 'wePay') {
-      // 纯微信支付成功
-    } else if (type === 'combined') {
-      // 组合支付成功
-    }
-  }
-}
-
-const handleAgreeClick = () => {
-  // 打开协议详情页
-  Taro.navigateTo({
-    url: '/pages/agreement/index'
-  })
-}
-</script>
-```
-
-### 功能特性
-
-#### 1. 云豆支付模式
-
-- **纯云豆支付**: 当用户选择云豆支付且余额充足时，直接使用云豆完成支付
-- **组合支付**: 当用户选择云豆支付但余额不足时，自动启用组合支付模式
-  - 先扣减全部云豆余额
-  - 剩余金额通过微信支付完成
-
-#### 2. 余额不足提示
-
-当启用组合支付时，组件会自动显示：
-- 余额不足警告：`"云豆余额不足,还需额外支付XX元"`
-- 风险提示：`"请在支付完成前确保元豆余额不被消耗,否则本次权益可能购买失败"`
-
-#### 3. 待支付金额计算
-
-- 纯云豆支付（余额充足）: 显示 `¥0`
-- 组合支付（余额不足）: 显示额外需要支付的金额
-- 纯微信支付: 显示全额
-
-#### 4. 协议确认
-
-- 纯云豆支付且余额充足: 不显示协议复选框（无需额外支付）
-- 组合支付或纯微信支付: 必须勾选协议才能继续
-
-### 注意事项
-
-1. **环境要求**
-   <!-- - H5环境：必须在微信浏览器中打开 -->
-   - 小程序环境：需要配置微信登录权限
-
-2. **数据获取**
-   - 组件挂载后会自动调用接口获取：
-     - 用户云豆余额
-     - 权益套餐列表
-   - 根据 `app` 参数自动选择对应的权益类型：
-     - `'corporateStar'` → `'riskQueryCompany'`
-     - 其他 → `'riskQueryMulti'`
-
-3. **支付流程**
-   - 纯云豆支付：点击购买 → 确认对话框 → 调用云豆支付接口
-   - 组合支付：点击购买 → 确认对话框 → 关闭对话框 → 调用微信支付接口（后端自动处理云豆扣减）
-   - 纯微信支付：点击购买 → 直接调用微信支付接口
-
-4. **错误处理**
-   - 组件内部已处理常见错误（网络错误、支付失败等）
-   - 通过 `complete` 事件返回结果，由父组件决定后续操作
-
----
-
-## RechargeView - 云豆充值视图
-
-**功能描述**: 提供云豆充值金额选择和微信支付功能。
-
-### 导入方式
-
-```typescript
-import { RechargeView } from '@uxda/appkit/payment'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ✅ | - | 应用标识 |
-| `tenant` | `string` | ✅ | - | 租户ID |
-| `payFinishJumpUrl` | `string` | ❌ | `''` | H5支付完成后跳转地址 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `complete` | `boolean \| any` | 支付完成时触发，返回支付结果 |
-| `agree` | - | 用户点击协议链接时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <recharge-view
-    app="loankitMp"
-    tenant="1"
-    pay-finish-jump-url="/pages/recharge-success/index"
-    @complete="handleRechargeComplete"
-    @agree="handleAgreeClick"
-  />
-</template>
-
-<script setup>
-import { RechargeView } from '@uxda/appkit/payment'
-
-const handleRechargeComplete = (result) => {
-  if (result) {
-    console.log('充值成功')
-    // 跳转到成功页或刷新余额
-  }
-}
-</script>
-```
-
-### 注意事项
-
-1. 组件会自动获取充值金额列表
-2. 必须勾选协议才能进行支付
-<!-- 3. H5环境需要在微信浏览器中打开 -->
-
----
-
-## AmountPicker - 金额选择器
-
-**功能描述**: 用于云豆充值场景的金额选择网格组件。
-
-### 导入方式
-
-```typescript
-import { AmountPicker } from '@uxda/appkit/payment'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `items` | `Amount[]` | ✅ | `[]` | 金额选项列表 |
-| `selected` | `number` | ❌ | `0` | 当前选中的索引 |
-
-### 类型定义
-
-```typescript
-type Amount = {
-  token: number,    // 云豆数量
-  amount: number    // 支付金额（元）
-}
-```
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `change` | `number` | 选择改变时触发，返回选中的索引 |
-
-### 使用示例
-
-```vue
-<template>
-  <amount-picker
-    :items="amountList"
-    :selected="selectedIndex"
-    @change="handleAmountChange"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { AmountPicker } from '@uxda/appkit/payment'
-
-const amountList = ref([
-  { token: 100, amount: 100 },
-  { token: 500, amount: 500 },
-  { token: 1000, amount: 1000 }
-])
-
-const selectedIndex = ref(0)
-
-const handleAmountChange = (index) => {
-  selectedIndex.value = index
-  console.log('选中金额:', amountList.value[index])
-}
-</script>
-```
-
-### 样式说明
-
-- 3列网格布局
-- 选中项有橙色渐变边框和背景
-- 显示云豆图标和金额
-
----
-
-## RightsPicker - 权益选择器
-
-**说明**: 本组件为内部组件，未从 `@uxda/appkit/payment` 直接导出，仅在 TradeView 等内部使用。
-
-**功能描述**: 用于权益充值场景的权益套餐选择网格组件。
-
-### 导入方式
-
-```typescript
-import { RightsPicker, type Amount } from '@uxda/appkit/payment'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `items` | `Amount[]` | ✅ | `[]` | 权益套餐列表 |
-| `selected` | `number` | ❌ | `0` | 当前选中的索引 |
-
-### 类型定义
-
-```typescript
-export type Amount = {
-  id: string,                    // 套餐ID
-  paymentAmount: number,         // 支付金额（元）
-  paymentDesc: string,           // 套餐描述（标签文本）
-  priceRightNum: number          // 权益数量（笔数）
-}
-```
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `change` | `number` | 选择改变时触发，返回选中的索引 |
-
-### 使用示例
-
-```vue
-<template>
-  <rights-picker
-    :items="rightsList"
-    :selected="selectedIndex"
-    @change="handleRightsChange"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { RightsPicker, type Amount } from '@uxda/appkit/payment'
-
-const rightsList = ref<Amount[]>([
-  {
-    id: '1',
-    paymentAmount: 100,
-    paymentDesc: '推荐',
-    priceRightNum: 10
-  },
-  {
-    id: '2',
-    paymentAmount: 500,
-    paymentDesc: '热销',
-    priceRightNum: 50
-  }
-])
-
-const selectedIndex = ref(0)
-
-const handleRightsChange = (index) => {
-  selectedIndex.value = index
-}
-</script>
-```
-
-### 样式说明
-
-- 3列网格布局
-- 每个选项显示：
-  - 标签（如"推荐"、"热销"）
-  - 权益数量（笔数）
-  - 支付金额
-- 选中项有橙色渐变边框和背景
-
----
-
-## RechargeResult - 充值结果页
-
-**功能描述**: 展示充值或购买成功/失败的结果页面。
-
-### 导入方式
-
-```typescript
-import { RechargeResult } from '@uxda/appkit/payment'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `type` | `string` | ❌ | `'recharge'` | 结果类型<br/>- `'recharge'`: 充值<br/>- `'trade'`: 购买 |
-| `payMethod` | `string` | ❌ | `''` | 支付方式<br/>- `'bean'`: 云豆支付<br/>- `'wePay'`: 微信支付 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `dismiss` | - | 点击返回按钮时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <recharge-result
-    type="trade"
-    pay-method="combined"
-    @dismiss="handleDismiss"
-  />
-</template>
-
-<script setup>
-import { RechargeResult } from '@uxda/appkit/payment'
-
-const handleDismiss = () => {
-  // 返回上一页或跳转到指定页面
-  Taro.navigateBack()
-}
-</script>
-```
-
-### 显示内容
-
-根据 `type` 和 `payMethod` 组合显示不同的文案：
-
-| type | payMethod | 标题 | 副标题 |
-|------|-----------|------|--------|
-| `recharge` | - | "充值成功" | "云豆将在1分钟之内到账" |
-| `recharge` | `bean` | "充值成功" | "权益已到账" |
-| `trade` | - | "购买成功" | "权益将在1分钟之内到账" |
-| `trade` | `bean` | "购买成功" | "权益已到账" |
-
----
-
-## UserAgreement - 用户协议
-
-**功能描述**: 展示《大道云平台云豆充值服务协议》的完整内容。
-
-### 导入方式
-
-```typescript
-import { UserAgreement } from '@uxda/appkit/payment'
-```
-
-### Props
-
-无
-
-### Events
-
-无
-
-### 使用示例
-
-```vue
-<template>
-  <user-agreement />
-</template>
-
-<script setup>
-import { UserAgreement } from '@uxda/appkit/payment'
-</script>
-```
-
-### 使用场景
-
-通常作为独立页面使用，当用户点击协议链接时跳转到此页面：
-
-```vue
-<template>
-  <view>
-    <trade-view @agree="handleAgree" />
-  </view>
-</template>
-
-<script setup>
-import Taro from '@tarojs/taro'
-
-const handleAgree = () => {
-  Taro.navigateTo({
-    url: '/pages/agreement/index'
-  })
-}
-</script>
-```
-
----
-
-## 组合使用示例
-
-### 完整的权益购买流程
-
-```vue
-<template>
-  <view class="trade-page">
-    <!-- 权益选择与支付 -->
-    <trade-view
-      v-if="!showResult"
-      header-app="loankitMp"
-      app="corporateStar"
-      tenant="1"
-      @complete="handlePayComplete"
-      @agree="showAgreement"
-    >
-      <template #banner>
-        <div class="promotion-banner">
-          <h3>同样价格,看更多数据</h3>
-          <p>了解AI审批一启明星的全面升级版</p>
-        </div>
-      </template>
-    </trade-view>
-
-    <!-- 支付结果页 -->
-    <recharge-result
-      v-if="showResult"
-      type="trade"
-      :pay-method="payMethod"
-      @dismiss="handleDismiss"
-    />
-  </view>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { TradeView, RechargeResult } from '@uxda/appkit/payment'
-import Taro from '@tarojs/taro'
-
-const showResult = ref(false)
-const payMethod = ref('')
-
-const handlePayComplete = ({ result, type }) => {
-  if (result) {
-    payMethod.value = type === 'bean' ? 'bean' : 'wePay'
-    showResult.value = true
-  }
-}
-
-const showAgreement = () => {
-  Taro.navigateTo({
-    url: '/pages/agreement/index'
-  })
-}
-
-const handleDismiss = () => {
-  showResult.value = false
-  // 可以刷新余额或返回上一页
-}
-</script>
-```
-
----
-
-## 常见问题
-
-### Q1: 组合支付时，云豆余额如何扣减？
-
-A: 当用户选择云豆支付但余额不足时，系统会自动启用组合支付。在调用微信支付接口时，后端会自动：
-1. 先扣减用户全部云豆余额
-2. 计算剩余需要支付的金额
-3. 发起微信支付请求（金额为剩余部分）
-
-### Q2: 如何判断支付类型？
-
-A: 通过 `complete` 事件的 `type` 参数判断：
-- `'bean'`: 纯云豆支付
-- `'wePay'`: 纯微信支付
-- `'combined'`: 组合支付
-
-### Q3: 协议复选框何时显示？
-
-A: 
-- 纯云豆支付且余额充足：不显示（无需额外支付）
-- 组合支付：显示（需要微信支付）
-- 纯微信支付：显示（需要微信支付）
-
-### Q4: H5环境支付失败怎么办？
-
-A: 确保：
-<!-- 1. 在微信浏览器中打开 -->
-2. 已正确配置 `payFinishJumpUrl`
-3. 检查网络连接和接口权限
-
-### Q5: 如何自定义横幅内容？
-
-A: 使用 `banner` 插槽：
-
-```vue
-<trade-view>
-  <template #banner>
-    <div class="custom-banner">
-      <!-- 自定义内容 -->
-    </div>
-  </template>
-</trade-view>
-```
-
----
-
-## 更新日志
-
-### v1.1.0 (最新)
-- ✅ 新增组合支付功能（云豆+微信）
-- ✅ 新增余额不足警告提示
-- ✅ 优化待支付金额计算逻辑
-- ✅ 完善确认对话框显示内容
-
-### v1.0.0
-- ✅ 基础支付功能
-- ✅ 云豆支付支持
-- ✅ 微信支付支持
-
----
-
-# 余额模块组件使用规则
-
-## AccountView - 账户总览
-
-**功能描述**: 展示用户账户余额、权益信息及收支明细的完整账户页面。
-
-### 导入方式
-
-```typescript
-import { AccountView } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ✅ | `''` | 应用标识 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `recharge` | - | 点击充值按钮时触发 |
-| `trade` | `item: any` | 点击权益充值按钮时触发，返回权益项信息 |
-
-### 使用示例
-
-```vue
-<template>
-  <account-view
-    app="loankitMp"
-    @recharge="handleRecharge"
-    @trade="handleTrade"
-  />
-</template>
-
-<script setup>
-import { AccountView } from '@uxda/appkit/balance'
-
-const handleRecharge = () => {
-  // 跳转到充值页面
-  Taro.navigateTo({
-    url: '/pages/recharge/index'
-  })
-}
-
-const handleTrade = (item) => {
-  // 跳转到权益充值页面
-  Taro.navigateTo({
-    url: `/pages/trade/index?id=${item.id}`
-  })
-}
-</script>
-```
-
-### 功能特性
-
-1. **余额展示**: 显示云豆总余额
-2. **权益展示**: 展示各类权益（企明星、AI审批、电子签约等）
-3. **收支明细**: 支持查看收支明细，包含筛选和分页功能
-4. **规则说明**: 支持查看消费规则说明
-
-### 注意事项
-
-- 组件挂载后会自动获取余额和权益信息
-- 支持下拉刷新余额数据
-- 收支明细支持时间筛选和多条件筛选
-
----
-
-## BalanceCard - 余额卡片
-
-**功能描述**: 用于在首页或个人中心展示余额的卡片组件。
-
-### 导入方式
-
-```typescript
-import { BalanceCard } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ✅ | `''` | 应用标识 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `drill` | - | 点击账户明细时触发 |
-| `recharge` | - | 点击充值按钮时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <balance-card
-    app="loankitMp"
-    @drill="handleDrill"
-    @recharge="handleRecharge"
-  />
-</template>
-
-<script setup>
-import { BalanceCard } from '@uxda/appkit/balance'
-
-const handleDrill = () => {
-  Taro.navigateTo({
-    url: '/pages/account/index'
-  })
-}
-
-const handleRecharge = () => {
-  Taro.navigateTo({
-    url: '/pages/recharge/index'
-  })
-}
-</script>
-```
-
-### 暴露方法
-
-| 方法名 | 说明 |
-|--------|------|
-| `reload` | 重新加载余额数据 |
-
-```vue
-<script setup>
-import { ref } from 'vue'
-import { BalanceCard } from '@uxda/appkit/balance'
-
-const balanceCardRef = ref()
-
-const refreshBalance = () => {
-  balanceCardRef.value?.reload()
-}
-</script>
-
-<template>
-  <balance-card ref="balanceCardRef" app="loankitMp" />
-</template>
-```
-
----
-
-## BalanceReminder - 余额提醒
-
-**功能描述**: 当余额不足时显示的提示弹窗组件。
-
-### 导入方式
-
-```typescript
-import { BalanceReminder } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `modelValue` | `boolean` | ✅ | `false` | 控制弹窗显示/隐藏（v-model） |
-| `buttonText` | `string` | ❌ | `'去充值'` | 按钮文本 |
-| `tip` | `string` | ❌ | `'您的账户可用余额不足，请充值后再进行查询'` | 提示文本 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `update:modelValue` | `boolean` | v-model 更新事件 |
-| `recharge` | - | 点击充值按钮时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <balance-reminder
-    v-model="showReminder"
-    button-text="立即充值"
-    tip="余额不足，请充值"
-    @recharge="handleRecharge"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { BalanceReminder } from '@uxda/appkit/balance'
-
-const showReminder = ref(false)
-
-const handleRecharge = () => {
-  showReminder.value = false
-  Taro.navigateTo({
-    url: '/pages/recharge/index'
-  })
-}
-</script>
-```
-
----
-
-## DateRange - 日期范围
-
-**功能描述**: 底部弹窗形式的日期范围选择器，支持 v-model 绑定 `{ from, to }`（日期字符串 YYYY-MM-DD），点击区域打开日期筛选面板，选择完成后更新模型并触发 `complete`。
-
-### 导入方式
-
-```typescript
-import { DateRange } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `modelValue` | `DateRangeModel` | ❌ | `{ from, to }`（最近一个月） | v-model 绑定的日期范围<br/>`DateRangeModel = { from: string, to: string }` |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `complete` | `DateRangeModel` | 用户确认选择后触发，参数为当前选中的 `{ from, to }` |
-| `reset` | - | 用户点击重置时触发 |
-
-### Slots
-
-无。
-
----
-
-## ListFilter - 列表筛选
-
-**功能描述**: 点击「筛选」打开底部筛选面板（ListFilterPicker），选择后通过 v-model 回写筛选结果，用于列表页的筛选入口。
-
-### 导入方式
-
-```typescript
-import { ListFilter } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `modelValue` | `ListFilterValue` | ❌ | `{ type: '' }` | v-model 绑定的筛选值<br/>`ListFilterValue = { type: string }` |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `update:modelValue` | `ListFilterValue` | 用户在筛选面板完成选择时触发，用于 v-model 同步 |
-| `change` | - | 筛选变更时触发（与类型定义一致，可按需使用） |
-
-### Slots
-
-无。
-
----
-
-## PromoterCard - 推广员卡片
-
-**功能描述**: 展示推广员可提现余额、产品销售收益、分销返佣收益等信息的卡片；在「企业」场景且为管理员时支持个人/企业 Tab 切换，并支持点击跳转余额/收益/返佣页。
-
-### 导入方式
-
-```typescript
-import { PromoterCard } from '@uxda/appkit/balance'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `useCase` | `string` | ❌ | `''` | 使用场景，如 `'company'` 时与 `isAdmin` 配合显示 Tab |
-| `applyRecord` | `any` | ❌ | `{}` | 申请/准入记录，含 `distributorFlag`、`accessCheckStatus` 等，用于控制可提现、下级分销商、收益等区块显示 |
-| `isAdmin` | `boolean` | ❌ | `false` | 是否管理员，企业场景下为 true 时显示个人/企业 Tab |
-| `显示下级分销商` | `boolean` | ❌ | `false` | 为 true 时展示下级分销商数量，否则展示产品销售收益 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `blance` | `tab: string` | 点击可提现余额区域时触发 |
-| `profits` | `tab: string` | 点击产品销售收益时触发 |
-| `rebate` | `tab: string` | 点击分销返佣收益时触发 |
-| `tab` | `tab: string` | 个人/企业 Tab 切换时触发 |
-
-### Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| `tab-btn` | 在 Tab 区域右侧预留的自定义按钮区域 |
-
----
-
-# 消息通知模块组件使用规则
-
-## NoticeBanner - 通知横幅
-
-**功能描述**: 页面顶部或嵌入式的通告栏，支持多条消息轮播和强制弹窗。
-
-### 导入方式
-
-```typescript
-import { NoticeBanner } from '@uxda/appkit/notice'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ✅ | `''` | 应用标识 |
-| `bannerStyle` | `any` | ❌ | `''` | 横幅样式 |
-| `fixed` | `boolean` | ❌ | `false` | 是否固定定位 |
-| `device` | `string` | ❌ | `'MINI'` | 设备类型 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `detail` | `item: any` | 点击详情时触发 |
-| `close` | - | 关闭横幅时触发 |
-| `view` | `link: string` | 查看附件时触发 |
-| `popup` | `hasPopup: boolean` | 弹窗状态变化时触发 |
-| `hasBanner` | `hasBanner: boolean` | 横幅状态变化时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <notice-banner
-    app="loankitMp"
-    :fixed="true"
-    @detail="handleDetail"
-    @view="handleView"
-  />
-</template>
-
-<script setup>
-import { NoticeBanner } from '@uxda/appkit/notice'
-
-const handleDetail = (item) => {
-  // 跳转到消息详情页
-  Taro.navigateTo({
-    url: `/pages/notice/detail?id=${item.id}`
-  })
-}
-
-const handleView = (link) => {
-  // 打开附件链接
-  Taro.navigateTo({
-    url: `/pages/webview/index?url=${encodeURIComponent(link)}`
-  })
-}
-</script>
-```
-
-### 功能特性
-
-1. **消息轮播**: 多条横幅消息自动轮播（3秒间隔）
-2. **手势控制**: 触摸时暂停轮播，离开后恢复
-3. **强制弹窗**: 系统公告类型的消息会以弹窗形式强制显示
-4. **自动获取**: 组件挂载后自动获取当前应用的消息
-
----
-
-## NoticeList - 消息列表
-
-**功能描述**: 展示历史消息记录，支持搜索、筛选和分页。
-
-### 导入方式
-
-```typescript
-import { NoticeList } from '@uxda/appkit/notice'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ✅ | `''` | 应用标识 |
-| `userId` | `string` | ✅ | `''` | 用户ID |
-| `showApp` | `boolean` | ❌ | `false` | 是否显示应用标签 |
-| `checkBeforeRead` | `Function` | ❌ | - | 读取前的检查函数，返回 false 则阻止读取 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `view` | `link: string` | 查看附件时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <notice-list
-    app="loankitMp"
-    :user-id="userId"
-    :show-app="true"
-    :check-before-read="checkRead"
-    @view="handleView"
-  />
-</template>
-
-<script setup>
-import { NoticeList } from '@uxda/appkit/notice'
-
-const userId = '123456'
-
-const checkRead = (notice, index) => {
-  // 可以在这里添加读取前的逻辑检查
-  return true
-}
-
-const handleView = (link) => {
-  Taro.navigateTo({
-    url: `/pages/webview/index?url=${encodeURIComponent(link)}`
-  })
-}
-</script>
-```
-
-### 功能特性
-
-1. **搜索功能**: 支持关键字搜索消息
-2. **下拉刷新**: 支持下拉刷新消息列表
-3. **上拉加载**: 自动分页加载更多消息
-4. **已读标记**: 自动标记消息为已读
-5. **时间显示**: 智能显示相对时间（如"5分钟前"）或绝对时间
-
----
-
-
----
-
-## NoticeEntry - 消息入口
-
-**功能描述**: 通常带红点或未读数的消息中心入口图标；挂载后根据 `app`、`userId` 请求未读数量并显示红点。
-
-### 导入方式
-
-```typescript
-import { NoticeEntry } from '@uxda/appkit/notice'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `app` | `string` | ❌ | `''` | 应用标识（必填时传入，否则会 toast 提示缺少 appcode） |
-| `userId` | `string` | ❌ | `''` | 用户ID，用于请求未读数量 |
-
-### Events
-
-无（组件仅做展示与红点状态，点击跳转由页面容器或路由处理）。
-
----
-
-## NoticePopup - 通知弹窗
-
-**说明**: 当前未从 `@uxda/appkit/notice` 导出，文档保留供参考。
-
-**功能描述**: 强提醒类型的消息弹窗，展示系统公告内容，支持「我知道了」关闭与「点击查看附件」跳转。
-
-### 导入方式
-
-```typescript
-import { NoticePopup } from '@uxda/appkit/notice'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `message` | `any` | ❌ | `{}` | 消息对象，需含 `context`、`id`、`jumpUrl` 或 `link` 等字段 |
-| `device` | `string` | ❌ | `'MINI'` | 设备类型，用于已读上报接口 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `close` | - | 用户点击「我知道了」或关闭弹窗时触发 |
-| `view` | `string` | 用户点击「点击查看附件」时触发，参数为 `message.jumpUrl` 或 `message.link` |
-
----
-
-## NoticeList2 - 消息列表（二代）
-
-**功能描述**: 消息列表二代页面组件，支持全部/业务消息/系统公告/未读 Tab、下拉刷新、上拉分页、全部已读，点击列表项触发 `itemClick` 并标记已读。
-
-### 导入方式
-
-```typescript
-import { NoticeList2 } from '@uxda/appkit/notice'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `deviceType` | `string` | ❌ | `'2'` | 设备类型，用于列表与已读接口 |
-| `userId` | `string` | ❌ | `''` | 用户ID |
-| `app` | `string` | ❌ | `''` | 应用标识，必填时传入否则列表为空 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `itemClick` | `item: any` | 点击某条消息时触发，参数为该条消息对象 |
-
-### Slots
-
-无（Tab 标题使用组件内部模板，如需自定义可参考源码 `#titles`）。
-
----
-
-# 用户模块组件使用规则
-
-## UserEntry - 用户入口
-
-**功能描述**: 用户中心入口区块，展示头像、昵称/手机号（脱敏）；未登录时显示「请登录」并可触发 `login`，登录后点击触发 `jump` 跳转个人资料等。
-
-### 导入方式
-
-```typescript
-import { UserEntry } from '@uxda/appkit/user'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `avatar` | `string` | ❌ | `''` | 用户头像 URL |
-| `mobile` | `string` | ❌ | `''` | 手机号（展示时会脱敏） |
-| `name` | `string` | ❌ | `''` | 用户昵称或名称 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `jump` | - | 已登录用户点击头像/名称/手机号时触发，用于跳转个人资料等页 |
-| `login` | - | 未登录用户点击「请登录」时触发，用于跳转登录页 |
-
-### Slots
-
-无。
-
----
-
-## UserInfo - 用户信息
-
-**功能描述**: 展示用户头像、昵称、认证信息、企业/团队信息等完整用户资料页面。
-
-### 导入方式
-
-```typescript
-import { UserInfo } from '@uxda/appkit/user'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `miniType` | `string` | ❌ | `'05'` | 小程序类型 |
-| `app` | `string` | ❌ | `''` | 应用标识 |
-| `userId` | `string` | ✅ | `''` | 用户ID |
-| `hasQiyezuhu` | `number` | ❌ | `0` | 是否有企业租户 |
-| `isPersonal` | `number` | ❌ | `0` | 是否个人用户 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `avatar-success` | `avatar: string` | 头像上传成功时触发 |
-| `logout` | - | 退出登录时触发 |
-| `crop` | `filePath: string` | 需要裁剪头像时触发 |
-| `binding` | `mobile: string` | 点击绑定手机号时触发 |
-| `username-success` | - | 用户名修改成功时触发 |
-| `auth` | `userId: string, verifyResult: number, mobile: string` | 点击认证信息时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <user-info
-    :user-id="userId"
-    :has-qiyezuhu="1"
-    :is-personal="1"
-    @logout="handleLogout"
-    @binding="handleBinding"
-    @auth="handleAuth"
-    @crop="handleCrop"
-  />
-</template>
-
-<script setup>
-import { UserInfo } from '@uxda/appkit/user'
-import Taro from '@tarojs/taro'
-
-const userId = '123456'
-
-const handleLogout = () => {
-  // 清除登录状态并跳转到登录页
-  Taro.reLaunch({
-    url: '/pages/login/index'
-  })
-}
-
-const handleBinding = (mobile) => {
-  Taro.navigateTo({
-    url: `/pages/binding/index?mobile=${mobile}`
-  })
-}
-
-const handleAuth = (userId, verifyResult, mobile) => {
-  Taro.navigateTo({
-    url: `/pages/auth/index?userId=${userId}&verifyResult=${verifyResult}&mobile=${mobile}`
-  })
-}
-
-const handleCrop = (filePath) => {
-  // 跳转到头像裁剪页
-  Taro.navigateTo({
-    url: `/pages/crop/index?filePath=${filePath}`
-  })
-}
-</script>
-```
-
-### 暴露方法
-
-| 方法名 | 说明 |
-|--------|------|
-| `updateImage` | 更新头像图片 |
-
----
-
-## UserAuth - 用户认证
-
-**功能描述**: 处理用户身份认证的表单组件，支持OCR识别身份证。
-
-### 导入方式
-
-```typescript
-import { UserAuth } from '@uxda/appkit/user'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `userId` | `string` | ✅ | `''` | 用户ID |
-| `verifyResult` | `number` | ❌ | `-1` | 认证状态（-1: 未认证, 0: 已失效, 1: 已认证） |
-| `mobile` | `string` | ❌ | `''` | 手机号码 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `toAgreement` | - | 点击协议链接时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <user-auth
-    :user-id="userId"
-    :verify-result="verifyResult"
-    :mobile="mobile"
-    @to-agreement="handleAgreement"
-  />
-</template>
-
-<script setup>
-import { UserAuth } from '@uxda/appkit/user'
-
-const userId = '123456'
-const verifyResult = -1
-const mobile = '13800138000'
-
-const handleAgreement = () => {
-  Taro.navigateTo({
-    url: '/pages/agreement/index'
-  })
-}
-</script>
-```
-
-### 功能特性
-
-1. **OCR识别**: 支持拍照识别身份证信息
-2. **表单验证**: 自动验证身份证号码格式
-3. **已认证状态**: 已认证用户显示只读模式
-
----
-
-## UserBinding - 账号绑定
-
-**功能描述**: 换绑手机号的流程组件，包含身份认证和换绑两个步骤。
-
-### 导入方式
-
-```typescript
-import { UserBinding } from '@uxda/appkit/user'
-```
-
-### Props
-
-无（通过路由参数传递 `mobile`）
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `success` | `mobile: string` | 换绑成功时触发，返回新手机号 |
-
-### 使用示例
-
-```vue
-<template>
-  <user-binding @success="handleSuccess" />
-</template>
-
-<script setup>
-import { UserBinding } from '@uxda/appkit/user'
-import Taro from '@tarojs/taro'
-
-const handleSuccess = (mobile) => {
-  Taro.showToast({
-    title: `换绑成功：${mobile}`,
-    icon: 'success'
-  })
-  setTimeout(() => {
-    Taro.navigateBack()
-  }, 1500)
-}
-</script>
-```
-
-### 路由参数
-
-| 参数名 | 类型 | 必填 | 说明 |
-|--------|------|------|------|
-| `mobile` | `string` | ✅ | 当前手机号 |
-
-### 使用场景
-
-```typescript
-// 跳转到换绑页面
-Taro.navigateTo({
-  url: `/pages/binding/index?mobile=${currentMobile}`
-})
-```
-
----
-
-# 注册模块组件使用规则
-
-## SelfRegistration - 自助注册
-
-**功能描述**: 引导新用户完成注册流程的组件，支持个人和公司两种使用场景。
-
-### 导入方式
-
-```typescript
-import { SelfRegistration } from '@uxda/appkit/register'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `banner` | `string` | ❌ | `'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png'` | 顶部横幅图片 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `submit` | `params: object` | 提交注册信息时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <self-registration
-    banner="/static/images/custom-banner.png"
-    @submit="handleSubmit"
-  />
-</template>
-
-<script setup>
-import { SelfRegistration } from '@uxda/appkit/register'
-
-const handleSubmit = (params) => {
-  console.log('注册信息:', params)
-  // {
-  //   useCase: 'person' | 'company',
-  //   customerName: string,
-  //   idCardNo?: string,  // 个人场景
-  //   customerPosition?: string,  // 公司场景
-  //   companyName?: string,  // 公司场景
-  //   customerArea?: string  // 公司场景
-  // }
-  
-  // 调用注册接口
-  // ...
-}
-</script>
-```
-
-### 功能特性
-
-1. **双场景支持**: 支持个人使用和公司使用两种场景
-2. **OCR识别**: 支持拍照识别身份证信息
-3. **表单验证**: 自动验证必填项和格式
-4. **地区选择**: 公司场景支持省市区选择
-
----
-
-# 业务场景组件使用规则
-
-## SharePoster - 分享海报
-
-**功能描述**: 生成包含二维码和营销信息的图片，用于朋友圈分享。
-
-### 导入方式
-
-```typescript
-import { SharePoster } from '@uxda/appkit/scenarios'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `posters` | `any[]` | ✅ | - | 海报列表 |
-| `text` | `string` | ❌ | - | 底部提示文本 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `share` | - | 点击确定分享时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <share-poster
-    :posters="posterList"
-    text="长按保存图片，分享到朋友圈"
-    @share="handleShare"
-  />
-</template>
-
-<script setup>
-import { SharePoster } from '@uxda/appkit/scenarios'
-
-const posterList = [
-  // 海报配置对象
-]
-
-const handleShare = () => {
-  // 处理分享逻辑
-}
-</script>
-```
-
----
-
-# 共享模块组件使用规则
-
-## AppDrawer - 抽屉
-
-**功能描述**: 从侧边滑出的抽屉面板，用于展示附加内容或操作菜单。
-
-### 导入方式
-
-```typescript
-import { AppDrawer } from '@uxda/appkit'
-// 或
-import { AppDrawer } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## PageHeader - 页面头部
-
-**功能描述**: 页面通用头部组件，支持标题、返回按钮等。
-
-### 导入方式
-
-```typescript
-import { PageHeader } from '@uxda/appkit'
-// 或
-import { PageHeader } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## DeviceVersion - 设备版本
-
-**功能描述**: 展示或检测设备/应用版本信息。
-
-### 导入方式
-
-```typescript
-import { DeviceVersion } from '@uxda/appkit'
-// 或
-import { DeviceVersion } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## AppVerify - 应用验证
-
-**功能描述**: 应用身份或环境验证相关能力。
-
-### 导入方式
-
-```typescript
-import { AppVerify } from '@uxda/appkit'
-// 或
-import { AppVerify } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## OcrIcon - OCR 入口
-
-**功能描述**: OCR 识别功能的入口图标/按钮，用于唤起拍照识别等。
-
-### 导入方式
-
-```typescript
-import { OcrIcon } from '@uxda/appkit'
-// 或
-import { OcrIcon } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## OcrBank - 银行卡 OCR
-
-**功能描述**: 银行卡拍照识别组件，用于自动识别卡号等信息。
-
-### 导入方式
-
-```typescript
-import { OcrBank } from '@uxda/appkit'
-// 或
-import { OcrBank } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## OcrBusinessLicense - 营业执照 OCR
-
-**功能描述**: 营业执照拍照识别组件，用于自动识别企业信息。
-
-### 导入方式
-
-```typescript
-import { OcrBusinessLicense } from '@uxda/appkit'
-// 或
-import { OcrBusinessLicense } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## OcrInvoice - 发票 OCR
-
-**功能描述**: 发票拍照识别组件，用于自动识别发票信息。
-
-### 导入方式
-
-```typescript
-import { OcrInvoice } from '@uxda/appkit'
-// 或
-import { OcrInvoice } from '@uxda/appkit/shared'
-```
-
-### Props
-
-待补充（需查看组件实现）
-
-### Events
-
-待补充
-
-### Slots
-
-待补充
-
----
-
-## OfficePdf - PDF 预览
-
-**功能描述**: 基于 @vue-office/pdf 的 PDF 在线预览组件，用于在小程序/H5 中展示 PDF 文件。
-
-### 导入方式
-
-```typescript
-import { OfficePdf } from '@uxda/appkit'
-// 或
-import { OfficePdf } from '@uxda/appkit/shared'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `src` | `string` | ✅ | - | PDF 文件地址（URL） |
-
-### Events
-
-组件内部使用 @vue-office/pdf 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
-
-### Slots
-
-无。
-
----
-
-## OfficeDocx - Word 文档预览
-
-**功能描述**: 基于 @vue-office/docx 的 Word 文档在线预览组件，用于在小程序/H5 中展示 .docx 文件。
-
-### 导入方式
-
-```typescript
-import { OfficeDocx } from '@uxda/appkit'
-// 或
-import { OfficeDocx } from '@uxda/appkit/shared'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `src` | `string` | ✅ | - | Word 文档地址（URL） |
-
-### Events
-
-组件内部使用 @vue-office/docx 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
-
-### Slots
-
-无。
-
----
-
-# 通用基础组件使用规则
-
-## DdSearch - 搜索框
-
-**功能描述**: 支持导航栏模式的搜索框，带有搜索回调和防抖功能。
-
-### 导入方式
-
-```typescript
-import DdSearch from '@uxda/appkit/components/dd-search/index.vue'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `disabled` | `boolean` | ❌ | `false` | 是否禁用 |
-| `placeholder` | `string` | ❌ | `'请输入'` | 输入框占位符 |
-| `value` | `string` | ❌ | `''` | 绑定值 |
-| `bordered` | `boolean` | ❌ | `true` | 是否显示底部边框 |
-| `inNavbar` | `boolean` | ❌ | `false` | 是否在导航栏中 |
-| `focus` | `boolean` | ❌ | `false` | 是否自动聚焦 |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `search` | `value: string` | 点击搜索时触发 |
-| `focus` | `event: Event` | 输入框聚焦时触发 |
-
-### 使用示例
-
-```vue
-<template>
-  <dd-search
-    :bordered="false"
-    :in-navbar="true"
-    :value="searchStr"
-    placeholder="输入客户姓名"
-    @search="onSearch"
-    @focus="onSearchFocus"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DdSearch from '@uxda/appkit/components/dd-search/index.vue'
-
-const searchStr = ref('')
-
-const onSearch = (value) => {
-  console.log('搜索:', value)
-}
-
-const onSearchFocus = (event) => {
-  console.log('聚焦:', event)
-}
-</script>
-```
-
----
-
-## DdIcon - 图标组件
-
-**功能描述**: 项目统一的图标封装，使用 iconfont 图标。
-
-### 导入方式
-
-```typescript
-import DdIcon from '@uxda/appkit/components/dd-icon/index.vue'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `name` | `string` | ✅ | `''` | icon 名称 |
-| `color` | `string` | ❌ | `inherit` | icon 颜色 |
-| `size` | `string` | ❌ | `16px` | icon 字体大小 |
-| `weight` | `string` | ❌ | `normal` | icon 字体字重 |
-
-### 使用示例
-
-```vue
-<template>
-  <dd-icon name="icon-arrow" size="11px" color="#DFDFDF" />
-</template>
-
-<script setup>
-import DdIcon from '@uxda/appkit/components/dd-icon/index.vue'
-</script>
-```
-
----
-
-## DdSkeleton - 骨架屏
-
-**功能描述**: 数据加载过程中的占位显示，基于 NutUI Skeleton，支持多行与长短行配置，提升用户体验。
-
-### 导入方式
-
-```typescript
-import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `row` | `number` | ❌ | `3` | 骨架行数（每组一行短+一行长） |
-| `shortRow` | `string` | ❌ | `'2'` | 短行骨架的 row 配置（NutUI Skeleton） |
-| `longRow` | `string` | ❌ | `'4'` | 长行骨架的 row 配置（NutUI Skeleton） |
-
-### 使用示例
-
-```vue
-<template>
-  <dd-skeleton v-if="loading" :row="3" />
-  <div v-else>
-    <!-- 实际内容 -->
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
-
-const loading = ref(true)
-</script>
-```
-
----
-
-## DdNoticeBar - 滚动通告栏
-
-**功能描述**: 用于显示简短的滚动消息。
-
-### 导入方式
-
-```typescript
-import DdNoticeBar from '@uxda/appkit/components/dd-notice-bar/index.vue'
-```
-
-### Props
-
-| 属性名 | 类型 | 必填 | 默认值 | 说明 |
-|--------|------|------|--------|------|
-| `text` | `string` | ❌ | - | 通告文案；与默认插槽二选一 |
-| `style` | `object \| string` | ❌ | - | 根节点样式 |
-| `showClose` | `boolean` | ❌ | - | 是否显示关闭按钮；为 true 时样式变为「已关闭」风格（黄底） |
-
-### Events
-
-| 事件名 | 参数类型 | 说明 |
-|--------|----------|------|
-| `close` | - | 点击关闭按钮时触发 |
-| `txtClick` | - | 点击通告文本时触发 |
-
-### Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| 默认 | 自定义通告内容，与 `text` 二选一使用 |
-
-### 使用示例
-
-```vue
-<template>
-  <dd-notice-bar :show-close="true" @close="handleClose">
-    这是一条滚动通告消息
-  </dd-notice-bar>
-</template>
-
-<script setup>
-import DdNoticeBar from '@uxda/appkit/components/dd-notice-bar/index.vue'
-
-const handleClose = () => {
-  console.log('关闭通告')
-}
-</script>
-```
-
----
-
-## 其他通用组件
-
-### DdArea - 地区选择器
-
-省市区三级联动选择组件。
-
-### DdSelector - 通用选择器
-
-下拉或弹窗式的单选/多选组件。
-
-### BtCropper - 图片裁剪器
-
-基于 canvas 的高性能图片裁剪工具。
-
----
-
-## 更新日志
-
-### v1.2.0
-- ✅ 补全余额模块组件文档
-- ✅ 补全消息通知模块组件文档
-- ✅ 补全用户模块组件文档
-- ✅ 补全注册模块组件文档
-- ✅ 补全业务场景组件文档
-- ✅ 补全通用基础组件文档
-
-### v1.1.0
-- ✅ 新增组合支付功能（云豆+微信）
-- ✅ 新增余额不足警告提示
-- ✅ 优化待支付金额计算逻辑
-- ✅ 完善确认对话框显示内容
-
-### v1.0.0
-- ✅ 基础支付功能
-- ✅ 云豆支付支持
-- ✅ 微信支付支持
-
+# Appkit 组件使用规则
+
+本文档详细说明 Appkit 中各组件的使用方法、属性、事件和注意事项。
+
+## 目录
+
+### 支付模块 (Payment)
+- [TradeView - 权益充值视图](#tradeview---权益充值视图)
+- [RechargeView - 云豆充值视图](#rechargeview---云豆充值视图)
+- [AmountPicker - 金额选择器](#amountpicker---金额选择器)
+- [RechargeResult - 充值结果页](#rechargeresult---充值结果页)
+- [UserAgreement - 用户协议](#useragreement---用户协议)
+
+### 余额模块 (Balance)
+- [AccountView - 账户总览](#accountview---账户总览)
+- [BalanceCard - 余额卡片](#balancecard---余额卡片)
+- [BalanceReminder - 余额提醒](#balancereminder---余额提醒)
+- [DateRange - 日期范围](#daterange---日期范围)
+- [ListFilter - 列表筛选](#listfilter---列表筛选)
+- [PromoterCard - 推广员卡片](#promotercard---推广员卡片)
+
+### 消息通知模块 (Notice)
+- [NoticeBanner - 通知横幅](#noticebanner---通知横幅)
+- [NoticeList - 消息列表](#noticelist---消息列表)
+- [NoticeList2 - 消息列表（二代）](#noticelist2---消息列表二代)
+- [NoticeEntry - 消息入口](#noticeentry---消息入口)
+
+### 用户模块 (User)
+- [UserEntry - 用户入口](#userentry---用户入口)
+- [UserInfo - 用户信息](#userinfo---用户信息)
+- [UserAuth - 用户认证](#userauth---用户认证)
+- [UserBinding - 账号绑定](#userbinding---账号绑定)
+- [UserBindingSuccess - 绑定成功](#userbindingsuccess---绑定成功)
+- [UserHeadCrop - 头像裁剪](#userheadcrop---头像裁剪)
+- [UserFeedback - 用户反馈](#userfeedback---用户反馈)
+- [UserFeedbackEntry - 反馈入口](#userfeedbackentry---反馈入口)
+- [LoginSetting - 登录设置](#loginsetting---登录设置)
+- [UserResourceEmpty - 资源空状态](#userresourceempty---资源空状态)
+
+### 注册模块 (Register)
+- [SelfRegistration - 自助注册](#selfregistration---自助注册)
+
+### 业务场景 (Scenarios)
+- [SharePoster - 分享海报](#shareposter---分享海报)
+
+### 共享模块 (Shared)
+- [AppDrawer - 抽屉](#appdrawer---抽屉)
+- [PageHeader - 页面头部](#pageheader---页面头部)
+- [DeviceVersion - 设备版本](#deviceversion---设备版本)
+- [AppVerify - 应用验证](#appverify---应用验证)
+- [OcrIcon - OCR 入口](#ocricon---ocr-入口)
+- [OcrBank - 银行卡 OCR](#ocrbank---银行卡-ocr)
+- [OcrBusinessLicense - 营业执照 OCR](#ocrbusinesslicense---营业执照-ocr)
+- [OcrInvoice - 发票 OCR](#ocrinvoice---发票-ocr)
+- [OfficePdf - PDF 预览](#officepdf---pdf-预览)
+- [OfficeDocx - Word 文档预览](#officedocx---word-文档预览)
+
+### 通用基础组件 (Components)
+- [DdSearch - 搜索框](#ddsearch---搜索框)
+- [DdIcon - 图标组件](#ddicon---图标组件)
+- [DdSkeleton - 骨架屏](#ddskeleton---骨架屏)
+- [DdNoticeBar - 滚动通告栏](#ddnoticebar---滚动通告栏)
+
+---
+
+## TradeView - 权益充值视图
+
+**功能描述**: 提供权益充值金额选择、云豆支付和组合支付（云豆+微信）的完整支付流程。
+
+### 导入方式
+
+```typescript
+import { TradeView } from '@uxda/appkit/payment'
+// 或
+import TradeView from '@uxda/appkit/payment/components/TradeView.vue'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `headerApp` | `string` | ✅ | - | header头中的appcode，一般情况下与app参数一致，当无应用权限时，此参数为空 |
+| `app` | `string` | ✅ | - | 应用标识，用于区分不同应用（如：'corporateStar'、'riskQueryMulti'） |
+| `tenant` | `string` | ✅ | - | 租户ID |
+| `payFinishJumpUrl` | `string` | ❌ | `''` | H5支付完成后跳转地址 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `complete` | `{ result: boolean \| any, type: string }` | 支付完成时触发<br/>- `result`: 支付结果<br/>- `type`: 支付类型（'bean' | 'wePay' | 'combined'）<br/>  - `'bean'`: 纯云豆支付<br/>  - `'wePay'`: 纯微信支付<br/>  - `'combined'`: 组合支付（云豆+微信） |
+| `agree` | - | 用户点击协议链接时触发，可用于打开协议详情页 |
+
+### Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| `banner` | 自定义横幅内容，通常用于展示促销信息或活动内容 |
+
+### 使用示例
+
+```vue
+<template>
+  <trade-view
+    header-app="loankitMp"
+    app="corporateStar"
+    tenant="1"
+    pay-finish-jump-url="/pages/success/index"
+    @complete="handlePayComplete"
+    @agree="handleAgreeClick"
+  >
+    <template #banner>
+      <div class="promotion-banner">
+        <p>同样价格,看更多数据</p>
+        <p>了解AI审批一启明星的全面升级版</p>
+      </div>
+    </template>
+  </trade-view>
+</template>
+
+<script setup>
+import { TradeView } from '@uxda/appkit/payment'
+
+const handlePayComplete = ({ result, type }) => {
+  console.log('支付完成', { result, type })
+  if (result) {
+    // 支付成功处理
+    if (type === 'bean') {
+      // 纯云豆支付成功
+    } else if (type === 'wePay') {
+      // 纯微信支付成功
+    } else if (type === 'combined') {
+      // 组合支付成功
+    }
+  }
+}
+
+const handleAgreeClick = () => {
+  // 打开协议详情页
+  Taro.navigateTo({
+    url: '/pages/agreement/index'
+  })
+}
+</script>
+```
+
+### 功能特性
+
+#### 1. 云豆支付模式
+
+- **纯云豆支付**: 当用户选择云豆支付且余额充足时，直接使用云豆完成支付
+- **组合支付**: 当用户选择云豆支付但余额不足时，自动启用组合支付模式
+  - 先扣减全部云豆余额
+  - 剩余金额通过微信支付完成
+
+#### 2. 余额不足提示
+
+当启用组合支付时，组件会自动显示：
+- 余额不足警告：`"云豆余额不足,还需额外支付XX元"`
+- 风险提示：`"请在支付完成前确保元豆余额不被消耗,否则本次权益可能购买失败"`
+
+#### 3. 待支付金额计算
+
+- 纯云豆支付（余额充足）: 显示 `¥0`
+- 组合支付（余额不足）: 显示额外需要支付的金额
+- 纯微信支付: 显示全额
+
+#### 4. 协议确认
+
+- 纯云豆支付且余额充足: 不显示协议复选框（无需额外支付）
+- 组合支付或纯微信支付: 必须勾选协议才能继续
+
+### 注意事项
+
+1. **环境要求**
+   <!-- - H5环境：必须在微信浏览器中打开 -->
+   - 小程序环境：需要配置微信登录权限
+
+2. **数据获取**
+   - 组件挂载后会自动调用接口获取：
+     - 用户云豆余额
+     - 权益套餐列表
+   - 根据 `app` 参数自动选择对应的权益类型：
+     - `'corporateStar'` → `'riskQueryCompany'`
+     - 其他 → `'riskQueryMulti'`
+
+3. **支付流程**
+   - 纯云豆支付：点击购买 → 确认对话框 → 调用云豆支付接口
+   - 组合支付：点击购买 → 确认对话框 → 关闭对话框 → 调用微信支付接口（后端自动处理云豆扣减）
+   - 纯微信支付：点击购买 → 直接调用微信支付接口
+
+4. **错误处理**
+   - 组件内部已处理常见错误（网络错误、支付失败等）
+   - 通过 `complete` 事件返回结果，由父组件决定后续操作
+
+---
+
+## RechargeView - 云豆充值视图
+
+**功能描述**: 提供云豆充值金额选择和微信支付功能。
+
+### 导入方式
+
+```typescript
+import { RechargeView } from '@uxda/appkit/payment'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ✅ | - | 应用标识 |
+| `tenant` | `string` | ✅ | - | 租户ID |
+| `payFinishJumpUrl` | `string` | ❌ | `''` | H5支付完成后跳转地址 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `complete` | `boolean \| any` | 支付完成时触发，返回支付结果 |
+| `agree` | - | 用户点击协议链接时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <recharge-view
+    app="loankitMp"
+    tenant="1"
+    pay-finish-jump-url="/pages/recharge-success/index"
+    @complete="handleRechargeComplete"
+    @agree="handleAgreeClick"
+  />
+</template>
+
+<script setup>
+import { RechargeView } from '@uxda/appkit/payment'
+
+const handleRechargeComplete = (result) => {
+  if (result) {
+    console.log('充值成功')
+    // 跳转到成功页或刷新余额
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. 组件会自动获取充值金额列表
+2. 必须勾选协议才能进行支付
+<!-- 3. H5环境需要在微信浏览器中打开 -->
+
+---
+
+## AmountPicker - 金额选择器
+
+**功能描述**: 用于云豆充值场景的金额选择网格组件。
+
+### 导入方式
+
+```typescript
+import { AmountPicker } from '@uxda/appkit/payment'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `items` | `Amount[]` | ✅ | `[]` | 金额选项列表 |
+| `selected` | `number` | ❌ | `0` | 当前选中的索引 |
+
+### 类型定义
+
+```typescript
+type Amount = {
+  token: number,    // 云豆数量
+  amount: number    // 支付金额（元）
+}
+```
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `change` | `number` | 选择改变时触发，返回选中的索引 |
+
+### 使用示例
+
+```vue
+<template>
+  <amount-picker
+    :items="amountList"
+    :selected="selectedIndex"
+    @change="handleAmountChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { AmountPicker } from '@uxda/appkit/payment'
+
+const amountList = ref([
+  { token: 100, amount: 100 },
+  { token: 500, amount: 500 },
+  { token: 1000, amount: 1000 }
+])
+
+const selectedIndex = ref(0)
+
+const handleAmountChange = (index) => {
+  selectedIndex.value = index
+  console.log('选中金额:', amountList.value[index])
+}
+</script>
+```
+
+### 样式说明
+
+- 3列网格布局
+- 选中项有橙色渐变边框和背景
+- 显示云豆图标和金额
+
+---
+
+## RightsPicker - 权益选择器
+
+**说明**: 本组件为内部组件，未从 `@uxda/appkit/payment` 直接导出，仅在 TradeView 等内部使用。
+
+**功能描述**: 用于权益充值场景的权益套餐选择网格组件。
+
+### 导入方式
+
+```typescript
+import { RightsPicker, type Amount } from '@uxda/appkit/payment'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `items` | `Amount[]` | ✅ | `[]` | 权益套餐列表 |
+| `selected` | `number` | ❌ | `0` | 当前选中的索引 |
+
+### 类型定义
+
+```typescript
+export type Amount = {
+  id: string,                    // 套餐ID
+  paymentAmount: number,         // 支付金额（元）
+  paymentDesc: string,           // 套餐描述（标签文本）
+  priceRightNum: number          // 权益数量（笔数）
+}
+```
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `change` | `number` | 选择改变时触发，返回选中的索引 |
+
+### 使用示例
+
+```vue
+<template>
+  <rights-picker
+    :items="rightsList"
+    :selected="selectedIndex"
+    @change="handleRightsChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { RightsPicker, type Amount } from '@uxda/appkit/payment'
+
+const rightsList = ref<Amount[]>([
+  {
+    id: '1',
+    paymentAmount: 100,
+    paymentDesc: '推荐',
+    priceRightNum: 10
+  },
+  {
+    id: '2',
+    paymentAmount: 500,
+    paymentDesc: '热销',
+    priceRightNum: 50
+  }
+])
+
+const selectedIndex = ref(0)
+
+const handleRightsChange = (index) => {
+  selectedIndex.value = index
+}
+</script>
+```
+
+### 样式说明
+
+- 3列网格布局
+- 每个选项显示：
+  - 标签（如"推荐"、"热销"）
+  - 权益数量（笔数）
+  - 支付金额
+- 选中项有橙色渐变边框和背景
+
+---
+
+## RechargeResult - 充值结果页
+
+**功能描述**: 展示充值或购买成功/失败的结果页面。
+
+### 导入方式
+
+```typescript
+import { RechargeResult } from '@uxda/appkit/payment'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `type` | `string` | ❌ | `'recharge'` | 结果类型<br/>- `'recharge'`: 充值<br/>- `'trade'`: 购买 |
+| `payMethod` | `string` | ❌ | `''` | 支付方式<br/>- `'bean'`: 云豆支付<br/>- `'wePay'`: 微信支付 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `dismiss` | - | 点击返回按钮时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <recharge-result
+    type="trade"
+    pay-method="combined"
+    @dismiss="handleDismiss"
+  />
+</template>
+
+<script setup>
+import { RechargeResult } from '@uxda/appkit/payment'
+
+const handleDismiss = () => {
+  // 返回上一页或跳转到指定页面
+  Taro.navigateBack()
+}
+</script>
+```
+
+### 显示内容
+
+根据 `type` 和 `payMethod` 组合显示不同的文案：
+
+| type | payMethod | 标题 | 副标题 |
+|------|-----------|------|--------|
+| `recharge` | - | "充值成功" | "云豆将在1分钟之内到账" |
+| `recharge` | `bean` | "充值成功" | "权益已到账" |
+| `trade` | - | "购买成功" | "权益将在1分钟之内到账" |
+| `trade` | `bean` | "购买成功" | "权益已到账" |
+
+---
+
+## UserAgreement - 用户协议
+
+**功能描述**: 展示《大道云平台云豆充值服务协议》的完整内容。
+
+### 导入方式
+
+```typescript
+import { UserAgreement } from '@uxda/appkit/payment'
+```
+
+### Props
+
+无
+
+### Events
+
+无
+
+### 使用示例
+
+```vue
+<template>
+  <user-agreement />
+</template>
+
+<script setup>
+import { UserAgreement } from '@uxda/appkit/payment'
+</script>
+```
+
+### 使用场景
+
+通常作为独立页面使用，当用户点击协议链接时跳转到此页面：
+
+```vue
+<template>
+  <view>
+    <trade-view @agree="handleAgree" />
+  </view>
+</template>
+
+<script setup>
+import Taro from '@tarojs/taro'
+
+const handleAgree = () => {
+  Taro.navigateTo({
+    url: '/pages/agreement/index'
+  })
+}
+</script>
+```
+
+---
+
+## 组合使用示例
+
+### 完整的权益购买流程
+
+```vue
+<template>
+  <view class="trade-page">
+    <!-- 权益选择与支付 -->
+    <trade-view
+      v-if="!showResult"
+      header-app="loankitMp"
+      app="corporateStar"
+      tenant="1"
+      @complete="handlePayComplete"
+      @agree="showAgreement"
+    >
+      <template #banner>
+        <div class="promotion-banner">
+          <h3>同样价格,看更多数据</h3>
+          <p>了解AI审批一启明星的全面升级版</p>
+        </div>
+      </template>
+    </trade-view>
+
+    <!-- 支付结果页 -->
+    <recharge-result
+      v-if="showResult"
+      type="trade"
+      :pay-method="payMethod"
+      @dismiss="handleDismiss"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TradeView, RechargeResult } from '@uxda/appkit/payment'
+import Taro from '@tarojs/taro'
+
+const showResult = ref(false)
+const payMethod = ref('')
+
+const handlePayComplete = ({ result, type }) => {
+  if (result) {
+    payMethod.value = type === 'bean' ? 'bean' : 'wePay'
+    showResult.value = true
+  }
+}
+
+const showAgreement = () => {
+  Taro.navigateTo({
+    url: '/pages/agreement/index'
+  })
+}
+
+const handleDismiss = () => {
+  showResult.value = false
+  // 可以刷新余额或返回上一页
+}
+</script>
+```
+
+---
+
+## 常见问题
+
+### Q1: 组合支付时，云豆余额如何扣减？
+
+A: 当用户选择云豆支付但余额不足时，系统会自动启用组合支付。在调用微信支付接口时，后端会自动：
+1. 先扣减用户全部云豆余额
+2. 计算剩余需要支付的金额
+3. 发起微信支付请求（金额为剩余部分）
+
+### Q2: 如何判断支付类型？
+
+A: 通过 `complete` 事件的 `type` 参数判断：
+- `'bean'`: 纯云豆支付
+- `'wePay'`: 纯微信支付
+- `'combined'`: 组合支付
+
+### Q3: 协议复选框何时显示？
+
+A: 
+- 纯云豆支付且余额充足：不显示（无需额外支付）
+- 组合支付：显示（需要微信支付）
+- 纯微信支付：显示（需要微信支付）
+
+### Q4: H5环境支付失败怎么办？
+
+A: 确保：
+<!-- 1. 在微信浏览器中打开 -->
+2. 已正确配置 `payFinishJumpUrl`
+3. 检查网络连接和接口权限
+
+### Q5: 如何自定义横幅内容？
+
+A: 使用 `banner` 插槽：
+
+```vue
+<trade-view>
+  <template #banner>
+    <div class="custom-banner">
+      <!-- 自定义内容 -->
+    </div>
+  </template>
+</trade-view>
+```
+
+---
+
+## 更新日志
+
+### v1.1.0 (最新)
+- ✅ 新增组合支付功能（云豆+微信）
+- ✅ 新增余额不足警告提示
+- ✅ 优化待支付金额计算逻辑
+- ✅ 完善确认对话框显示内容
+
+### v1.0.0
+- ✅ 基础支付功能
+- ✅ 云豆支付支持
+- ✅ 微信支付支持
+
+---
+
+# 余额模块组件使用规则
+
+## AccountView - 账户总览
+
+**功能描述**: 展示用户账户余额、权益信息及收支明细的完整账户页面。
+
+### 导入方式
+
+```typescript
+import { AccountView } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ✅ | `''` | 应用标识 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `recharge` | - | 点击充值按钮时触发 |
+| `trade` | `item: any` | 点击权益充值按钮时触发，返回权益项信息 |
+
+### 使用示例
+
+```vue
+<template>
+  <account-view
+    app="loankitMp"
+    @recharge="handleRecharge"
+    @trade="handleTrade"
+  />
+</template>
+
+<script setup>
+import { AccountView } from '@uxda/appkit/balance'
+
+const handleRecharge = () => {
+  // 跳转到充值页面
+  Taro.navigateTo({
+    url: '/pages/recharge/index'
+  })
+}
+
+const handleTrade = (item) => {
+  // 跳转到权益充值页面
+  Taro.navigateTo({
+    url: `/pages/trade/index?id=${item.id}`
+  })
+}
+</script>
+```
+
+### 功能特性
+
+1. **余额展示**: 显示云豆总余额
+2. **权益展示**: 展示各类权益（企明星、AI审批、电子签约等）
+3. **收支明细**: 支持查看收支明细，包含筛选和分页功能
+4. **规则说明**: 支持查看消费规则说明
+
+### 注意事项
+
+- 组件挂载后会自动获取余额和权益信息
+- 支持下拉刷新余额数据
+- 收支明细支持时间筛选和多条件筛选
+
+---
+
+## BalanceCard - 余额卡片
+
+**功能描述**: 用于在首页或个人中心展示余额的卡片组件。
+
+### 导入方式
+
+```typescript
+import { BalanceCard } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ✅ | `''` | 应用标识 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `drill` | - | 点击账户明细时触发 |
+| `recharge` | - | 点击充值按钮时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <balance-card
+    app="loankitMp"
+    @drill="handleDrill"
+    @recharge="handleRecharge"
+  />
+</template>
+
+<script setup>
+import { BalanceCard } from '@uxda/appkit/balance'
+
+const handleDrill = () => {
+  Taro.navigateTo({
+    url: '/pages/account/index'
+  })
+}
+
+const handleRecharge = () => {
+  Taro.navigateTo({
+    url: '/pages/recharge/index'
+  })
+}
+</script>
+```
+
+### 暴露方法
+
+| 方法名 | 说明 |
+|--------|------|
+| `reload` | 重新加载余额数据 |
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { BalanceCard } from '@uxda/appkit/balance'
+
+const balanceCardRef = ref()
+
+const refreshBalance = () => {
+  balanceCardRef.value?.reload()
+}
+</script>
+
+<template>
+  <balance-card ref="balanceCardRef" app="loankitMp" />
+</template>
+```
+
+---
+
+## BalanceReminder - 余额提醒
+
+**功能描述**: 当余额不足时显示的提示弹窗组件。
+
+### 导入方式
+
+```typescript
+import { BalanceReminder } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `modelValue` | `boolean` | ✅ | `false` | 控制弹窗显示/隐藏（v-model） |
+| `buttonText` | `string` | ❌ | `'去充值'` | 按钮文本 |
+| `tip` | `string` | ❌ | `'您的账户可用余额不足，请充值后再进行查询'` | 提示文本 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `update:modelValue` | `boolean` | v-model 更新事件 |
+| `recharge` | - | 点击充值按钮时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <balance-reminder
+    v-model="showReminder"
+    button-text="立即充值"
+    tip="余额不足，请充值"
+    @recharge="handleRecharge"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BalanceReminder } from '@uxda/appkit/balance'
+
+const showReminder = ref(false)
+
+const handleRecharge = () => {
+  showReminder.value = false
+  Taro.navigateTo({
+    url: '/pages/recharge/index'
+  })
+}
+</script>
+```
+
+---
+
+## DateRange - 日期范围
+
+**功能描述**: 底部弹窗形式的日期范围选择器，支持 v-model 绑定 `{ from, to }`（日期字符串 YYYY-MM-DD），点击区域打开日期筛选面板，选择完成后更新模型并触发 `complete`。
+
+### 导入方式
+
+```typescript
+import { DateRange } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `modelValue` | `DateRangeModel` | ❌ | `{ from, to }`（最近一个月） | v-model 绑定的日期范围<br/>`DateRangeModel = { from: string, to: string }` |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `complete` | `DateRangeModel` | 用户确认选择后触发，参数为当前选中的 `{ from, to }` |
+| `reset` | - | 用户点击重置时触发 |
+
+### Slots
+
+无。
+
+---
+
+## ListFilter - 列表筛选
+
+**功能描述**: 点击「筛选」打开底部筛选面板（ListFilterPicker），选择后通过 v-model 回写筛选结果，用于列表页的筛选入口。
+
+### 导入方式
+
+```typescript
+import { ListFilter } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `modelValue` | `ListFilterValue` | ❌ | `{ type: '' }` | v-model 绑定的筛选值<br/>`ListFilterValue = { type: string }` |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `update:modelValue` | `ListFilterValue` | 用户在筛选面板完成选择时触发，用于 v-model 同步 |
+| `change` | - | 筛选变更时触发（与类型定义一致，可按需使用） |
+
+### Slots
+
+无。
+
+---
+
+## PromoterCard - 推广员卡片
+
+**功能描述**: 展示推广员可提现余额、产品销售收益、分销返佣收益等信息的卡片；在「企业」场景且为管理员时支持个人/企业 Tab 切换，并支持点击跳转余额/收益/返佣页。
+
+### 导入方式
+
+```typescript
+import { PromoterCard } from '@uxda/appkit/balance'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `useCase` | `string` | ❌ | `''` | 使用场景，如 `'company'` 时与 `isAdmin` 配合显示 Tab |
+| `applyRecord` | `any` | ❌ | `{}` | 申请/准入记录，含 `distributorFlag`、`accessCheckStatus` 等，用于控制可提现、下级分销商、收益等区块显示 |
+| `isAdmin` | `boolean` | ❌ | `false` | 是否管理员，企业场景下为 true 时显示个人/企业 Tab |
+| `显示下级分销商` | `boolean` | ❌ | `false` | 为 true 时展示下级分销商数量，否则展示产品销售收益 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `blance` | `tab: string` | 点击可提现余额区域时触发 |
+| `profits` | `tab: string` | 点击产品销售收益时触发 |
+| `rebate` | `tab: string` | 点击分销返佣收益时触发 |
+| `tab` | `tab: string` | 个人/企业 Tab 切换时触发 |
+
+### Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| `tab-btn` | 在 Tab 区域右侧预留的自定义按钮区域 |
+
+---
+
+# 消息通知模块组件使用规则
+
+## NoticeBanner - 通知横幅
+
+**功能描述**: 页面顶部或嵌入式的通告栏，支持多条消息轮播和强制弹窗。
+
+### 导入方式
+
+```typescript
+import { NoticeBanner } from '@uxda/appkit/notice'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ✅ | `''` | 应用标识 |
+| `bannerStyle` | `any` | ❌ | `''` | 横幅样式 |
+| `fixed` | `boolean` | ❌ | `false` | 是否固定定位 |
+| `device` | `string` | ❌ | `'MINI'` | 设备类型 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `detail` | `item: any` | 点击详情时触发 |
+| `close` | - | 关闭横幅时触发 |
+| `view` | `link: string` | 查看附件时触发 |
+| `popup` | `hasPopup: boolean` | 弹窗状态变化时触发 |
+| `hasBanner` | `hasBanner: boolean` | 横幅状态变化时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <notice-banner
+    app="loankitMp"
+    :fixed="true"
+    @detail="handleDetail"
+    @view="handleView"
+  />
+</template>
+
+<script setup>
+import { NoticeBanner } from '@uxda/appkit/notice'
+
+const handleDetail = (item) => {
+  // 跳转到消息详情页
+  Taro.navigateTo({
+    url: `/pages/notice/detail?id=${item.id}`
+  })
+}
+
+const handleView = (link) => {
+  // 打开附件链接
+  Taro.navigateTo({
+    url: `/pages/webview/index?url=${encodeURIComponent(link)}`
+  })
+}
+</script>
+```
+
+### 功能特性
+
+1. **消息轮播**: 多条横幅消息自动轮播（3秒间隔）
+2. **手势控制**: 触摸时暂停轮播，离开后恢复
+3. **强制弹窗**: 系统公告类型的消息会以弹窗形式强制显示
+4. **自动获取**: 组件挂载后自动获取当前应用的消息
+
+---
+
+## NoticeList - 消息列表
+
+**功能描述**: 展示历史消息记录，支持搜索、筛选和分页。
+
+### 导入方式
+
+```typescript
+import { NoticeList } from '@uxda/appkit/notice'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ✅ | `''` | 应用标识 |
+| `userId` | `string` | ✅ | `''` | 用户ID |
+| `showApp` | `boolean` | ❌ | `false` | 是否显示应用标签 |
+| `checkBeforeRead` | `Function` | ❌ | - | 读取前的检查函数，返回 false 则阻止读取 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `view` | `link: string` | 查看附件时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <notice-list
+    app="loankitMp"
+    :user-id="userId"
+    :show-app="true"
+    :check-before-read="checkRead"
+    @view="handleView"
+  />
+</template>
+
+<script setup>
+import { NoticeList } from '@uxda/appkit/notice'
+
+const userId = '123456'
+
+const checkRead = (notice, index) => {
+  // 可以在这里添加读取前的逻辑检查
+  return true
+}
+
+const handleView = (link) => {
+  Taro.navigateTo({
+    url: `/pages/webview/index?url=${encodeURIComponent(link)}`
+  })
+}
+</script>
+```
+
+### 功能特性
+
+1. **搜索功能**: 支持关键字搜索消息
+2. **下拉刷新**: 支持下拉刷新消息列表
+3. **上拉加载**: 自动分页加载更多消息
+4. **已读标记**: 自动标记消息为已读
+5. **时间显示**: 智能显示相对时间（如"5分钟前"）或绝对时间
+
+---
+
+
+---
+
+## NoticeEntry - 消息入口
+
+**功能描述**: 通常带红点或未读数的消息中心入口图标；挂载后根据 `app`、`userId` 请求未读数量并显示红点。
+
+### 导入方式
+
+```typescript
+import { NoticeEntry } from '@uxda/appkit/notice'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `app` | `string` | ❌ | `''` | 应用标识（必填时传入，否则会 toast 提示缺少 appcode） |
+| `userId` | `string` | ❌ | `''` | 用户ID，用于请求未读数量 |
+
+### Events
+
+无（组件仅做展示与红点状态，点击跳转由页面容器或路由处理）。
+
+---
+
+## NoticePopup - 通知弹窗
+
+**说明**: 当前未从 `@uxda/appkit/notice` 导出，文档保留供参考。
+
+**功能描述**: 强提醒类型的消息弹窗，展示系统公告内容，支持「我知道了」关闭与「点击查看附件」跳转。
+
+### 导入方式
+
+```typescript
+import { NoticePopup } from '@uxda/appkit/notice'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `message` | `any` | ❌ | `{}` | 消息对象，需含 `context`、`id`、`jumpUrl` 或 `link` 等字段 |
+| `device` | `string` | ❌ | `'MINI'` | 设备类型，用于已读上报接口 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `close` | - | 用户点击「我知道了」或关闭弹窗时触发 |
+| `view` | `string` | 用户点击「点击查看附件」时触发，参数为 `message.jumpUrl` 或 `message.link` |
+
+---
+
+## NoticeList2 - 消息列表（二代）
+
+**功能描述**: 消息列表二代页面组件，支持全部/业务消息/系统公告/未读 Tab、下拉刷新、上拉分页、全部已读，点击列表项触发 `itemClick` 并标记已读。
+
+### 导入方式
+
+```typescript
+import { NoticeList2 } from '@uxda/appkit/notice'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `deviceType` | `string` | ❌ | `'2'` | 设备类型，用于列表与已读接口 |
+| `userId` | `string` | ❌ | `''` | 用户ID |
+| `app` | `string` | ❌ | `''` | 应用标识，必填时传入否则列表为空 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `itemClick` | `item: any` | 点击某条消息时触发，参数为该条消息对象 |
+
+### Slots
+
+无（Tab 标题使用组件内部模板，如需自定义可参考源码 `#titles`）。
+
+---
+
+# 用户模块组件使用规则
+
+## UserEntry - 用户入口
+
+**功能描述**: 用户中心入口区块，展示头像、昵称/手机号（脱敏）；未登录时显示「请登录」并可触发 `login`，登录后点击触发 `jump` 跳转个人资料等。
+
+### 导入方式
+
+```typescript
+import { UserEntry } from '@uxda/appkit/user'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `avatar` | `string` | ❌ | `''` | 用户头像 URL |
+| `mobile` | `string` | ❌ | `''` | 手机号（展示时会脱敏） |
+| `name` | `string` | ❌ | `''` | 用户昵称或名称 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `jump` | - | 已登录用户点击头像/名称/手机号时触发，用于跳转个人资料等页 |
+| `login` | - | 未登录用户点击「请登录」时触发，用于跳转登录页 |
+
+### Slots
+
+无。
+
+---
+
+## UserInfo - 用户信息
+
+**功能描述**: 展示用户头像、昵称、认证信息、企业/团队信息等完整用户资料页面。
+
+### 导入方式
+
+```typescript
+import { UserInfo } from '@uxda/appkit/user'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `miniType` | `string` | ❌ | `'05'` | 小程序类型 |
+| `app` | `string` | ❌ | `''` | 应用标识 |
+| `userId` | `string` | ✅ | `''` | 用户ID |
+| `hasQiyezuhu` | `number` | ❌ | `0` | 是否有企业租户 |
+| `isPersonal` | `number` | ❌ | `0` | 是否个人用户 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `avatar-success` | `avatar: string` | 头像上传成功时触发 |
+| `logout` | - | 退出登录时触发 |
+| `crop` | `filePath: string` | 需要裁剪头像时触发 |
+| `binding` | `mobile: string` | 点击绑定手机号时触发 |
+| `username-success` | - | 用户名修改成功时触发 |
+| `auth` | `userId: string, verifyResult: number, mobile: string` | 点击认证信息时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <user-info
+    :user-id="userId"
+    :has-qiyezuhu="1"
+    :is-personal="1"
+    @logout="handleLogout"
+    @binding="handleBinding"
+    @auth="handleAuth"
+    @crop="handleCrop"
+  />
+</template>
+
+<script setup>
+import { UserInfo } from '@uxda/appkit/user'
+import Taro from '@tarojs/taro'
+
+const userId = '123456'
+
+const handleLogout = () => {
+  // 清除登录状态并跳转到登录页
+  Taro.reLaunch({
+    url: '/pages/login/index'
+  })
+}
+
+const handleBinding = (mobile) => {
+  Taro.navigateTo({
+    url: `/pages/binding/index?mobile=${mobile}`
+  })
+}
+
+const handleAuth = (userId, verifyResult, mobile) => {
+  Taro.navigateTo({
+    url: `/pages/auth/index?userId=${userId}&verifyResult=${verifyResult}&mobile=${mobile}`
+  })
+}
+
+const handleCrop = (filePath) => {
+  // 跳转到头像裁剪页
+  Taro.navigateTo({
+    url: `/pages/crop/index?filePath=${filePath}`
+  })
+}
+</script>
+```
+
+### 暴露方法
+
+| 方法名 | 说明 |
+|--------|------|
+| `updateImage` | 更新头像图片 |
+
+---
+
+## UserAuth - 用户认证
+
+**功能描述**: 处理用户身份认证的表单组件，支持OCR识别身份证。
+
+### 导入方式
+
+```typescript
+import { UserAuth } from '@uxda/appkit/user'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `userId` | `string` | ✅ | `''` | 用户ID |
+| `verifyResult` | `number` | ❌ | `-1` | 认证状态（-1: 未认证, 0: 已失效, 1: 已认证） |
+| `mobile` | `string` | ❌ | `''` | 手机号码 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `toAgreement` | - | 点击协议链接时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <user-auth
+    :user-id="userId"
+    :verify-result="verifyResult"
+    :mobile="mobile"
+    @to-agreement="handleAgreement"
+  />
+</template>
+
+<script setup>
+import { UserAuth } from '@uxda/appkit/user'
+
+const userId = '123456'
+const verifyResult = -1
+const mobile = '13800138000'
+
+const handleAgreement = () => {
+  Taro.navigateTo({
+    url: '/pages/agreement/index'
+  })
+}
+</script>
+```
+
+### 功能特性
+
+1. **OCR识别**: 支持拍照识别身份证信息
+2. **表单验证**: 自动验证身份证号码格式
+3. **已认证状态**: 已认证用户显示只读模式
+
+---
+
+## UserBinding - 账号绑定
+
+**功能描述**: 换绑手机号的流程组件，包含身份认证和换绑两个步骤。
+
+### 导入方式
+
+```typescript
+import { UserBinding } from '@uxda/appkit/user'
+```
+
+### Props
+
+无（通过路由参数传递 `mobile`）
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `success` | `mobile: string` | 换绑成功时触发，返回新手机号 |
+
+### 使用示例
+
+```vue
+<template>
+  <user-binding @success="handleSuccess" />
+</template>
+
+<script setup>
+import { UserBinding } from '@uxda/appkit/user'
+import Taro from '@tarojs/taro'
+
+const handleSuccess = (mobile) => {
+  Taro.showToast({
+    title: `换绑成功：${mobile}`,
+    icon: 'success'
+  })
+  setTimeout(() => {
+    Taro.navigateBack()
+  }, 1500)
+}
+</script>
+```
+
+### 路由参数
+
+| 参数名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| `mobile` | `string` | ✅ | 当前手机号 |
+
+### 使用场景
+
+```typescript
+// 跳转到换绑页面
+Taro.navigateTo({
+  url: `/pages/binding/index?mobile=${currentMobile}`
+})
+```
+
+---
+
+# 注册模块组件使用规则
+
+## SelfRegistration - 自助注册
+
+**功能描述**: 引导新用户完成注册流程的组件，支持个人和公司两种使用场景。
+
+### 导入方式
+
+```typescript
+import { SelfRegistration } from '@uxda/appkit/register'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `banner` | `string` | ❌ | `'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png'` | 顶部横幅图片 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `submit` | `params: object` | 提交注册信息时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <self-registration
+    banner="/static/images/custom-banner.png"
+    @submit="handleSubmit"
+  />
+</template>
+
+<script setup>
+import { SelfRegistration } from '@uxda/appkit/register'
+
+const handleSubmit = (params) => {
+  console.log('注册信息:', params)
+  // {
+  //   useCase: 'person' | 'company',
+  //   customerName: string,
+  //   idCardNo?: string,  // 个人场景
+  //   customerPosition?: string,  // 公司场景
+  //   companyName?: string,  // 公司场景
+  //   customerArea?: string  // 公司场景
+  // }
+  
+  // 调用注册接口
+  // ...
+}
+</script>
+```
+
+### 功能特性
+
+1. **双场景支持**: 支持个人使用和公司使用两种场景
+2. **OCR识别**: 支持拍照识别身份证信息
+3. **表单验证**: 自动验证必填项和格式
+4. **地区选择**: 公司场景支持省市区选择
+
+---
+
+# 业务场景组件使用规则
+
+## SharePoster - 分享海报
+
+**功能描述**: 生成包含二维码和营销信息的图片，用于朋友圈分享。
+
+### 导入方式
+
+```typescript
+import { SharePoster } from '@uxda/appkit/scenarios'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `posters` | `any[]` | ✅ | - | 海报列表 |
+| `text` | `string` | ❌ | - | 底部提示文本 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `share` | - | 点击确定分享时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <share-poster
+    :posters="posterList"
+    text="长按保存图片，分享到朋友圈"
+    @share="handleShare"
+  />
+</template>
+
+<script setup>
+import { SharePoster } from '@uxda/appkit/scenarios'
+
+const posterList = [
+  // 海报配置对象
+]
+
+const handleShare = () => {
+  // 处理分享逻辑
+}
+</script>
+```
+
+---
+
+# 共享模块组件使用规则
+
+## AppDrawer - 抽屉
+
+**功能描述**: 从侧边滑出的抽屉面板，用于展示附加内容或操作菜单。
+
+### 导入方式
+
+```typescript
+import { AppDrawer } from '@uxda/appkit'
+// 或
+import { AppDrawer } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## PageHeader - 页面头部
+
+**功能描述**: 页面通用头部组件，支持标题、返回按钮等。
+
+### 导入方式
+
+```typescript
+import { PageHeader } from '@uxda/appkit'
+// 或
+import { PageHeader } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## DeviceVersion - 设备版本
+
+**功能描述**: 展示或检测设备/应用版本信息。
+
+### 导入方式
+
+```typescript
+import { DeviceVersion } from '@uxda/appkit'
+// 或
+import { DeviceVersion } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## AppVerify - 应用验证
+
+**功能描述**: 应用身份或环境验证相关能力。
+
+### 导入方式
+
+```typescript
+import { AppVerify } from '@uxda/appkit'
+// 或
+import { AppVerify } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## OcrIcon - OCR 入口
+
+**功能描述**: OCR 识别功能的入口图标/按钮，用于唤起拍照识别等。
+
+### 导入方式
+
+```typescript
+import { OcrIcon } from '@uxda/appkit'
+// 或
+import { OcrIcon } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## OcrBank - 银行卡 OCR
+
+**功能描述**: 银行卡拍照识别组件，用于自动识别卡号等信息。
+
+### 导入方式
+
+```typescript
+import { OcrBank } from '@uxda/appkit'
+// 或
+import { OcrBank } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## OcrBusinessLicense - 营业执照 OCR
+
+**功能描述**: 营业执照拍照识别组件，用于自动识别企业信息。
+
+### 导入方式
+
+```typescript
+import { OcrBusinessLicense } from '@uxda/appkit'
+// 或
+import { OcrBusinessLicense } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## OcrInvoice - 发票 OCR
+
+**功能描述**: 发票拍照识别组件，用于自动识别发票信息。
+
+### 导入方式
+
+```typescript
+import { OcrInvoice } from '@uxda/appkit'
+// 或
+import { OcrInvoice } from '@uxda/appkit/shared'
+```
+
+### Props
+
+待补充（需查看组件实现）
+
+### Events
+
+待补充
+
+### Slots
+
+待补充
+
+---
+
+## OfficePdf - PDF 预览
+
+**功能描述**: 基于 @vue-office/pdf 的 PDF 在线预览组件，用于在小程序/H5 中展示 PDF 文件。
+
+### 导入方式
+
+```typescript
+import { OfficePdf } from '@uxda/appkit'
+// 或
+import { OfficePdf } from '@uxda/appkit/shared'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `src` | `string` | ✅ | - | PDF 文件地址（URL） |
+
+### Events
+
+组件内部使用 @vue-office/pdf 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
+
+### Slots
+
+无。
+
+---
+
+## OfficeDocx - Word 文档预览
+
+**功能描述**: 基于 @vue-office/docx 的 Word 文档在线预览组件，用于在小程序/H5 中展示 .docx 文件。
+
+### 导入方式
+
+```typescript
+import { OfficeDocx } from '@uxda/appkit'
+// 或
+import { OfficeDocx } from '@uxda/appkit/shared'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `src` | `string` | ✅ | - | Word 文档地址（URL） |
+
+### Events
+
+组件内部使用 @vue-office/docx 的 `rendered`、`error`，如需对外暴露可在组件内通过 `defineEmits` 透传。
+
+### Slots
+
+无。
+
+---
+
+# 通用基础组件使用规则
+
+## DdSearch - 搜索框
+
+**功能描述**: 支持导航栏模式的搜索框，带有搜索回调和防抖功能。
+
+### 导入方式
+
+```typescript
+import DdSearch from '@uxda/appkit/components/dd-search/index.vue'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `disabled` | `boolean` | ❌ | `false` | 是否禁用 |
+| `placeholder` | `string` | ❌ | `'请输入'` | 输入框占位符 |
+| `value` | `string` | ❌ | `''` | 绑定值 |
+| `bordered` | `boolean` | ❌ | `true` | 是否显示底部边框 |
+| `inNavbar` | `boolean` | ❌ | `false` | 是否在导航栏中 |
+| `focus` | `boolean` | ❌ | `false` | 是否自动聚焦 |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `search` | `value: string` | 点击搜索时触发 |
+| `focus` | `event: Event` | 输入框聚焦时触发 |
+
+### 使用示例
+
+```vue
+<template>
+  <dd-search
+    :bordered="false"
+    :in-navbar="true"
+    :value="searchStr"
+    placeholder="输入客户姓名"
+    @search="onSearch"
+    @focus="onSearchFocus"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DdSearch from '@uxda/appkit/components/dd-search/index.vue'
+
+const searchStr = ref('')
+
+const onSearch = (value) => {
+  console.log('搜索:', value)
+}
+
+const onSearchFocus = (event) => {
+  console.log('聚焦:', event)
+}
+</script>
+```
+
+---
+
+## DdIcon - 图标组件
+
+**功能描述**: 项目统一的图标封装，使用 iconfont 图标。
+
+### 导入方式
+
+```typescript
+import DdIcon from '@uxda/appkit/components/dd-icon/index.vue'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `name` | `string` | ✅ | `''` | icon 名称 |
+| `color` | `string` | ❌ | `inherit` | icon 颜色 |
+| `size` | `string` | ❌ | `16px` | icon 字体大小 |
+| `weight` | `string` | ❌ | `normal` | icon 字体字重 |
+
+### 使用示例
+
+```vue
+<template>
+  <dd-icon name="icon-arrow" size="11px" color="#DFDFDF" />
+</template>
+
+<script setup>
+import DdIcon from '@uxda/appkit/components/dd-icon/index.vue'
+</script>
+```
+
+---
+
+## DdSkeleton - 骨架屏
+
+**功能描述**: 数据加载过程中的占位显示，基于 NutUI Skeleton，支持多行与长短行配置，提升用户体验。
+
+### 导入方式
+
+```typescript
+import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `row` | `number` | ❌ | `3` | 骨架行数（每组一行短+一行长） |
+| `shortRow` | `string` | ❌ | `'2'` | 短行骨架的 row 配置（NutUI Skeleton） |
+| `longRow` | `string` | ❌ | `'4'` | 长行骨架的 row 配置（NutUI Skeleton） |
+
+### 使用示例
+
+```vue
+<template>
+  <dd-skeleton v-if="loading" :row="3" />
+  <div v-else>
+    <!-- 实际内容 -->
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
+
+const loading = ref(true)
+</script>
+```
+
+---
+
+## DdNoticeBar - 滚动通告栏
+
+**功能描述**: 用于显示简短的滚动消息。
+
+### 导入方式
+
+```typescript
+import DdNoticeBar from '@uxda/appkit/components/dd-notice-bar/index.vue'
+```
+
+### Props
+
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| `text` | `string` | ❌ | - | 通告文案；与默认插槽二选一 |
+| `style` | `object \| string` | ❌ | - | 根节点样式 |
+| `showClose` | `boolean` | ❌ | - | 是否显示关闭按钮；为 true 时样式变为「已关闭」风格（黄底） |
+
+### Events
+
+| 事件名 | 参数类型 | 说明 |
+|--------|----------|------|
+| `close` | - | 点击关闭按钮时触发 |
+| `txtClick` | - | 点击通告文本时触发 |
+
+### Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| 默认 | 自定义通告内容，与 `text` 二选一使用 |
+
+### 使用示例
+
+```vue
+<template>
+  <dd-notice-bar :show-close="true" @close="handleClose">
+    这是一条滚动通告消息
+  </dd-notice-bar>
+</template>
+
+<script setup>
+import DdNoticeBar from '@uxda/appkit/components/dd-notice-bar/index.vue'
+
+const handleClose = () => {
+  console.log('关闭通告')
+}
+</script>
+```
+
+---
+
+## 其他通用组件
+
+### DdArea - 地区选择器
+
+省市区三级联动选择组件。
+
+### DdSelector - 通用选择器
+
+下拉或弹窗式的单选/多选组件。
+
+### BtCropper - 图片裁剪器
+
+基于 canvas 的高性能图片裁剪工具。
+
+---
+
+## 更新日志
+
+### v1.2.0
+- ✅ 补全余额模块组件文档
+- ✅ 补全消息通知模块组件文档
+- ✅ 补全用户模块组件文档
+- ✅ 补全注册模块组件文档
+- ✅ 补全业务场景组件文档
+- ✅ 补全通用基础组件文档
+
+### v1.1.0
+- ✅ 新增组合支付功能（云豆+微信）
+- ✅ 新增余额不足警告提示
+- ✅ 优化待支付金额计算逻辑
+- ✅ 完善确认对话框显示内容
+
+### v1.0.0
+- ✅ 基础支付功能
+- ✅ 云豆支付支持
+- ✅ 微信支付支持
+