# 部署配置

<cite>
**本文档中引用的文件**  
- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue)
- [add-deploy.vue](file://src/views/merchant/config/components/deploy/add-deploy.vue)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)
- [merchant-deploy.ts](file://src/api/merchant-deploy.ts)
- [KamiApiMerchantV1MerchantDeployGetDetailRes.md](file://src/api/generated/docs/KamiApiMerchantV1MerchantDeployGetDetailRes.md)
- [KamiApiMerchantV1PlatformRateRecord.md](file://src/api/generated/docs/KamiApiMerchantV1PlatformRateRecord.md)
- [KamiApiMerchantV1MerchantDeployUpdateReq.md](file://src/api/generated/docs/KamiApiMerchantV1MerchantDeployUpdateReq.md)
</cite>

## 目录

1. [介绍](#介绍)
2. [项目结构](#项目结构)
3. [核心组件](#核心组件)
4. [架构概览](#架构概览)
5. [详细组件分析](#详细组件分析)
6. [依赖分析](#依赖分析)
7. [性能考虑](#性能考虑)
8. [故障排除指南](#故障排除指南)
9. [结论](#结论)

## 介绍

本文件详细说明了kami_frontend项目中商户部署配置功能的实现机制。重点涵盖部署配置的创建、费率设置与管理功能，深入解析`deploy-modal.vue`和`rate-table.vue`组件的结构与交互逻辑。文档还阐述了部署参数与费率结构的完整操作流程、数据模型设计、版本管理策略及安全控制措施，并提供常见问题的诊断与解决方案。

## 项目结构

商户部署配置相关功能主要集中在`src/views/merchant/config/components/`目录下，包含主模态框组件、信息展示、支付方式列表及费率配置子组件。API接口定义位于`src/api/generated/`目录中，由OpenAPI Generator自动生成，确保前后端数据结构一致性。

```mermaid
graph TB
subgraph "视图层"
DeployModal[deploy-modal.vue]
AddDeploy[add-deploy.vue]
RateTable[rate-table.vue]
DataTS[data.ts]
end
subgraph "API层"
MerchantDeployAPI[merchant-deploy.ts]
GeneratedAPIs[generated/]
end
DeployModal --> AddDeploy
AddDeploy --> RateTable
RateTable --> DataTS
AddDeploy --> MerchantDeployAPI
MerchantDeployAPI --> GeneratedAPIs
```

**图示来源**

- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue)
- [add-deploy.vue](file://src/views/merchant/config/components/deploy/add-deploy.vue)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)
- [merchant-deploy.ts](file://src/api/merchant-deploy.ts)

**章节来源**

- [src/views/merchant/config/components/](file://src/views/merchant/config/components/)
- [src/api/](file://src/api/)

## 核心组件

核心功能由`deploy-modal.vue`作为入口，集成商户基本信息与支付方式配置。`add-deploy.vue`负责具体部署参数的表单输入，其中嵌套`rate-table.vue`实现动态费率管理。数据结构定义于`data.ts`，通过`merchant-deploy.ts`封装的API与后端交互。

**章节来源**

- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue#L1-L51)
- [add-deploy.vue](file://src/views/merchant/config/components/deploy/add-deploy.vue#L1-L44)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)

## 架构概览

系统采用分层架构，视图层组件通过组合式API管理状态，利用TanStack Query进行数据获取与同步。部署配置数据模型包含通道设置、自动结算/代付开关、区域限制及关键的费率结构。所有配置变更通过标准化API提交，确保数据一致性与可追溯性。

```mermaid
classDiagram
class DeployConfig {
+id : number
+merchantUid : string
+singleRoadUid : string
+autoSettle : string
+autoPayfor : string
+restrictArea : string[]
+isRestrictAgent : boolean
+submitStrategy : string
+singleRoadPlatformRate : PlatformRateRecord[]
+singleRoadAgentRate : number
}
class PlatformRateRecord {
+factLabel : number
+showLabel : number
+platformLabel : string
+isLinkSingle : boolean
+value : number
+linkID : string
+sort : number
}
class DeployModal {
-visible : boolean
-uid : string
+fetchData() : void
+handleCancel() : void
}
class RateTable {
-formData : DeployConfig
-rateColumns : Column[]
+addRate() : void
+removeRate(index) : void
+validateRates() : boolean
}
DeployModal --> AddDeploy : "包含"
AddDeploy --> RateTable : "包含"
RateTable --> PlatformRateRecord : "管理"
AddDeploy --> DeployConfig : "绑定"
```

**图示来源**

- [KamiApiMerchantV1MerchantDeployGetDetailRes.md](file://src/api/generated/docs/KamiApiMerchantV1MerchantDeployGetDetailRes.md)
- [KamiApiMerchantV1PlatformRateRecord.md](file://src/api/generated/docs/KamiApiMerchantV1PlatformRateRecord.md)
- [add-deploy.vue](file://src/views/merchant/config/components/deploy/add-deploy.vue)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)

## 详细组件分析

### 部署模态框分析

`deploy-modal.vue`作为商户配置的入口组件，通过`v-model`控制显示状态，接收商户`uid`作为属性。组件初始化时监听`visible`变化，当模态框打开且`uid`有效时，触发子组件数据加载。

```mermaid
sequenceDiagram
participant UI as 用户界面
participant Modal as DeployModal
participant MerchantInfo as MerchantInfoRef
participant PaywayList as PaywayListRef
UI->>Modal : 打开模态框(visible=true)
Modal->>Modal : 监听visible变化
alt uid有效
Modal->>MerchantInfo : fetchData(uid)
Modal->>PaywayList : fetchData(uid)
end
MerchantInfo-->>Modal : 返回商户信息
PaywayList-->>Modal : 返回支付方式列表
Modal-->>UI : 渲染完整配置界面
```

**图示来源**

- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue#L1-L51)

**章节来源**

- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue#L1-L51)

### 费率表格分析

`rate-table.vue`组件实现动态费率配置，支持添加、删除和排序。表格数据绑定到`formData.singleRoadPlatformRate`，通过`data.ts`中定义的列配置`rateColumns`渲染。内置验证规则确保费率值在合理范围内，且关键字段不为空。

```mermaid
flowchart TD
Start([开始]) --> Init["初始化表格数据<br/>绑定formData.singleRoadPlatformRate"]
Init --> Render["渲染费率表格<br/>使用rateColumns配置"]
Render --> AddClick["用户点击添加费率"]
AddClick --> AddRow["添加新行<br/>默认值初始化"]
AddRow --> Edit["用户编辑费率数据"]
Edit --> Validate["提交前验证"]
Validate --> Valid{"验证通过?"}
Valid --> |是| Save["保存配置<br/>提交API"]
Valid --> |否| Highlight["高亮错误字段<br/>阻止提交"]
Save --> End([结束])
Highlight --> Edit
```

**图示来源**

- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)

**章节来源**

- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)

## 依赖分析

前端组件依赖于自动生成的API模型确保类型安全。`deploy-modal.vue`依赖`merchant-info.vue`和`payway-list.vue`进行信息展示。`rate-table.vue`依赖`data.ts`中的列定义和验证规则。所有数据持久化通过`merchant-deploy.ts`中的API函数完成，最终调用后端REST接口。

```mermaid
graph LR
A[deploy-modal.vue] --> B[merchant-info.vue]
A --> C[payway-list.vue]
D[add-deploy.vue] --> E[rate-table.vue]
E --> F[data.ts]
D --> G[merchant-deploy.ts]
G --> H[generated API]
H --> I[后端服务]
```

**图示来源**

- [deploy-modal.vue](file://src/views/merchant/config/components/deploy-modal.vue)
- [add-deploy.vue](file://src/views/merchant/config/components/deploy/add-deploy.vue)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)
- [data.ts](file://src/views/merchant/config/components/deploy/components/data.ts)
- [merchant-deploy.ts](file://src/api/merchant-deploy.ts)

**章节来源**

- [src/views/merchant/config/components/](file://src/views/merchant/config/components/)
- [src/api/merchant-deploy.ts](file://src/api/merchant-deploy.ts)

## 性能考虑

为优化性能，数据获取采用懒加载策略，仅在模态框打开时请求。TanStack Query提供数据缓存，减少重复请求。费率表格使用虚拟滚动处理大量数据，避免DOM性能瓶颈。表单验证在客户端完成，减少无效API调用。

## 故障排除指南

常见问题包括配置保存失败和费率计算错误。保存失败通常源于网络问题或API校验失败，应检查浏览器控制台和网络请求。费率计算错误多因输入值格式不正确或未通过验证，需确认所有费率值为有效数字且在合理区间。若问题持续，可检查`merchant-deploy.ts`中的API调用参数是否符合`KamiApiMerchantV1MerchantDeployUpdateReq`定义。

**章节来源**

- [merchant-deploy.ts](file://src/api/merchant-deploy.ts)
- [KamiApiMerchantV1MerchantDeployUpdateReq.md](file://src/api/generated/docs/KamiApiMerchantV1MerchantDeployUpdateReq.md)
- [rate-table.vue](file://src/views/merchant/config/components/deploy/components/rate-table.vue)

## 结论

商户部署配置功能通过模块化组件设计实现了高内聚低耦合。`deploy-modal.vue`作为容器协调子组件，`rate-table.vue`提供灵活的费率管理界面。数据模型设计完整，覆盖了通道、结算、限制策略等核心要素。通过标准化API与后端交互，确保了配置的可靠持久化。整体实现兼顾了用户体验与系统稳定性。
