@uxda/appkit 4.3.8 → 4.3.12

package/COMPONENT_USAGE.md

@@ -1,1523 +1,1523 @@
-# Appkit 组件使用规则
-
-本文档详细说明 Appkit 中各组件的使用方法、属性、事件和注意事项。
-
-## 目录
-
-### 支付模块 (Payment)
-- [TradeView - 权益充值视图](#tradeview---权益充值视图)
-- [RechargeView - 云豆充值视图](#rechargeview---云豆充值视图)
-- [AmountPicker - 金额选择器](#amountpicker---金额选择器)
-- [RightsPicker - 权益选择器](#rightspicker---权益选择器)
-- [RechargeResult - 充值结果页](#rechargeresult---充值结果页)
-- [UserAgreement - 用户协议](#useragreement---用户协议)
-
-### 余额模块 (Balance)
-- [AccountView - 账户总览](#accountview---账户总览)
-- [BalanceCard - 余额卡片](#balancecard---余额卡片)
-- [BalanceReminder - 余额提醒](#balancereminder---余额提醒)
-
-### 消息通知模块 (Notice)
-- [NoticeBanner - 通知横幅](#noticebanner---通知横幅)
-- [NoticeList - 消息列表](#noticelist---消息列表)
-- [NoticeEntry - 消息入口](#noticeentry---消息入口)
-- [NoticePopup - 通知弹窗](#noticepopup---通知弹窗)
-
-### 用户模块 (User)
-- [UserInfo - 用户信息](#userinfo---用户信息)
-- [UserAuth - 用户认证](#userauth---用户认证)
-- [UserBinding - 账号绑定](#userbinding---账号绑定)
-
-### 注册模块 (Register)
-- [SelfRegistration - 自助注册](#selfregistration---自助注册)
-
-### 业务场景 (Scenarios)
-- [SharePoster - 分享海报](#shareposter---分享海报)
-
-### 通用基础组件 (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 - 权益选择器
-
-**功能描述**: 用于权益充值场景的权益套餐选择网格组件。
-
-### 导入方式
-
-```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>
-```
-
----
-
-# 消息通知模块组件使用规则
-
-## 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 - 消息入口
-
-**功能描述**: 通常带红点或未读数的消息中心入口图标。
-
-### 导入方式
-
-```typescript
-import { NoticeEntry } from '@uxda/appkit/notice'
-```
-
-### Props
-
-待补充（需要查看组件实现）
-
-### Events
-
-待补充
-
----
-
-## NoticePopup - 通知弹窗
-
-**功能描述**: 强提醒类型的消息弹窗。
-
-### 导入方式
-
-```typescript
-import { NoticePopup } from '@uxda/appkit/notice'
-```
-
-### Props
-
-待补充（需要查看组件实现）
-
-### Events
-
-待补充
-
----
-
-# 用户模块组件使用规则
-
-## 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>
-```
-
----
-
-# 通用基础组件使用规则
-
-## 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 - 骨架屏
-
-**功能描述**: 数据加载过程中的占位显示，提升用户体验。
-
-### 导入方式
-
-```typescript
-import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
-```
-
-### Props
-
-待补充（需要查看组件实现）
-
-### 使用示例
-
-```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
-
-待补充（需要查看组件实现）
-
-### 使用示例
-
-```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---金额选择器)
+- [RightsPicker - 权益选择器](#rightspicker---权益选择器)
+- [RechargeResult - 充值结果页](#rechargeresult---充值结果页)
+- [UserAgreement - 用户协议](#useragreement---用户协议)
+
+### 余额模块 (Balance)
+- [AccountView - 账户总览](#accountview---账户总览)
+- [BalanceCard - 余额卡片](#balancecard---余额卡片)
+- [BalanceReminder - 余额提醒](#balancereminder---余额提醒)
+
+### 消息通知模块 (Notice)
+- [NoticeBanner - 通知横幅](#noticebanner---通知横幅)
+- [NoticeList - 消息列表](#noticelist---消息列表)
+- [NoticeEntry - 消息入口](#noticeentry---消息入口)
+- [NoticePopup - 通知弹窗](#noticepopup---通知弹窗)
+
+### 用户模块 (User)
+- [UserInfo - 用户信息](#userinfo---用户信息)
+- [UserAuth - 用户认证](#userauth---用户认证)
+- [UserBinding - 账号绑定](#userbinding---账号绑定)
+
+### 注册模块 (Register)
+- [SelfRegistration - 自助注册](#selfregistration---自助注册)
+
+### 业务场景 (Scenarios)
+- [SharePoster - 分享海报](#shareposter---分享海报)
+
+### 通用基础组件 (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 - 权益选择器
+
+**功能描述**: 用于权益充值场景的权益套餐选择网格组件。
+
+### 导入方式
+
+```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>
+```
+
+---
+
+# 消息通知模块组件使用规则
+
+## 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 - 消息入口
+
+**功能描述**: 通常带红点或未读数的消息中心入口图标。
+
+### 导入方式
+
+```typescript
+import { NoticeEntry } from '@uxda/appkit/notice'
+```
+
+### Props
+
+待补充（需要查看组件实现）
+
+### Events
+
+待补充
+
+---
+
+## NoticePopup - 通知弹窗
+
+**功能描述**: 强提醒类型的消息弹窗。
+
+### 导入方式
+
+```typescript
+import { NoticePopup } from '@uxda/appkit/notice'
+```
+
+### Props
+
+待补充（需要查看组件实现）
+
+### Events
+
+待补充
+
+---
+
+# 用户模块组件使用规则
+
+## 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>
+```
+
+---
+
+# 通用基础组件使用规则
+
+## 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 - 骨架屏
+
+**功能描述**: 数据加载过程中的占位显示，提升用户体验。
+
+### 导入方式
+
+```typescript
+import DdSkeleton from '@uxda/appkit/components/dd-skeleton/index.vue'
+```
+
+### Props
+
+待补充（需要查看组件实现）
+
+### 使用示例
+
+```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
+
+待补充（需要查看组件实现）
+
+### 使用示例
+
+```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
+- ✅ 基础支付功能
+- ✅ 云豆支付支持
+- ✅ 微信支付支持
+