BuildingAI支付配置菜单和页面功能PRD

本文档详细描述了支付配置模块的系统需求与实现方案，主要包含以下内容：功能需求：包括支付配置列表展示、详情查看、编辑修改、状态管理和默认设置五大核心功能，以及表单验证、权限控制等辅助功能。页面设计：列表页采用表格展示支付方式信息，包含Logo、状态开关等组件编辑页采用表单布局，分区域展示Logo和详细配置表单技术实现：前端采用Vue组件化开发，包含列表获取、状态更新等核心逻辑后端提供获

lypzcgf

566人浏览 · 2025-11-15 11:17:39

lypzcgf · 2025-11-15 11:17:39 发布

1. 文档概述

1.1 文档目的

本文档用于描述系统配置菜单下支付配置模块的功能需求、页面设计、技术实现细节和测试要求，为开发、测试和维护人员提供明确的指导。

1.2 文档范围

支付配置菜单的功能结构
支付配置页面的UI设计
支付配置的后端API接口
支付配置的权限控制
支付配置的使用流程

1.3 术语定义

术语	定义
PayConfig	支付配置模块的简称
支付方式	指系统支持的支付渠道，如微信支付、支付宝支付
默认支付方式	系统默认选择的支付方式
支付状态	支付方式的启用/禁用状态
排序	支付方式在前端展示的顺序

2. 功能需求

2.1 核心功能

支付配置列表展示：显示系统支持的所有支付方式配置
支付配置详情查看：查看单个支付方式的详细配置信息
支付配置编辑：修改支付方式的配置信息
支付状态管理：启用/禁用支付方式
默认支付方式设置：设置默认支付方式

2.2 辅助功能

表单验证：确保支付配置信息的完整性和正确性
权限控制：限制只有授权用户才能进行支付配置操作
国际化支持：支持多语言切换
错误提示：提供清晰的错误信息和操作指引

3. 页面设计

3.1 支付配置列表页

3.1.1 页面布局

页面标题：支付配置
表格列：Logo、支付方式、显示名称、是否启用、是否默认、排序、操作
操作按钮：编辑

3.1.2 关键组件

UTable：展示支付配置列表
UAvatar：显示支付方式Logo
USwitch：开关控制支付方式启用状态
UBadge：标记默认支付方式
UButton：编辑按钮

3.1.3 页面截图

（此处可插入页面截图）

3.2 支付配置编辑页

3.2.1 页面布局

顶部导航：返回按钮、页面标题
左侧区域：Logo展示、状态开关、默认设置
右侧区域：支付配置表单
底部按钮：取消、更新

3.2.2 关键组件

UAvatar：显示和编辑支付方式Logo
USwitch：开关控制支付方式启用状态
UForm：支付配置表单容器
UInput：文本输入框
URadioGroup：单选按钮组
UTextarea：文本区域

3.2.3 表单字段

字段名称	字段类型	说明
支付方式	只读文本	显示当前支付方式类型（如微信支付、支付宝支付）
自定义显示名称	文本输入	支付方式在前端展示的名称
支付接口版本	单选按钮	支付接口的版本（如V3）
商户类型	单选按钮	商户类型（如普通商户）
商户号	文本输入	支付渠道分配的商户号
商户api密钥	文本输入	支付渠道分配的API密钥
微信支付证书	文本区域	微信支付证书内容
微信支付密钥	文本区域	微信支付密钥内容
appId	文本输入	微信公众号或小程序的AppID
排序	文本输入	支付方式在前端展示的顺序

4. 技术实现

4.1 前端实现

4.1.1 主要文件结构

/app/pages/console/system-setting/payconfig/
├── index.vue              # 支付配置列表页
├── edit.vue              # 支付配置编辑页
└── components/
    └── card.vue          # 支付配置卡片组件

4.1.2 核心功能实现

支付配置列表获取：

const getPayconfigList = async () => {
    const data = await apiGetPayconfigList();
    payconfigList.value = data.map(({ id, name, payType, isEnable, logo, isDefault, sort }) => ({
        id, name, payType, isEnable, logo, isDefault, sort
    }));
};

支付状态更新：

const updatePayconfigStatus = useThrottleFn(async (id: string, isEnable: BooleanNumberType) => {
    try {
        await apiUpdatePayconfigStatus(id, isEnable);
        message.success($t('system.payConfig.messages.saveSuccess'));
        getPayconfigList();
    } catch (_error) {
        message.error($t('system.payConfig.messages.saveFailed'));
    }
}, 1000);

表单验证：

const rules = {
    name: [
        { required: true, message: $t('system.payConfig.validation.nameRequired'), trigger: 'blur' },
    ],
    payVersion: [
        { required: true, message: $t('system.payConfig.validation.payVersionRequired'), trigger: 'change' },
    ],
    merchantType: [
        { required: true, message: $t('system.payConfig.validation.merchantTypeRequired'), trigger: 'change' },
    ],
    mchId: [
        { required: true, message: $t('system.payConfig.validation.mchIdRequired'), trigger: 'blur' },
    ],
    apiKey: [
        { required: true, message: $t('system.payConfig.validation.apiKeyRequired'), trigger: 'blur' },
    ],
    paySignKey: [
        { required: true, message: $t('system.payConfig.validation.paySignKeyRequired'), trigger: 'blur' },
    ],
    cert: [
        { required: true, message: $t('system.payConfig.validation.certRequired'), trigger: 'blur' },
    ],
    appId: [
        { required: true, message: $t('system.payConfig.validation.appIdRequired'), trigger: 'blur' },
    ],
    sort: [
        { required: true, message: $t('system.payConfig.validation.sortRequired'), trigger: 'blur' },
    ],
};

4.2 后端实现

4.2.1 API接口设计

// 支付配置相关API接口

/**
 * 获取支付配置列表
 */
export function apiGetPayconfigList(): Promise<PayconfigTableData[]>;

/**
 * 根据ID获取支付配置详情
 */
export function apiGetPayconfigById(id: string): Promise<PayconfigInfo>;

/**
 * 更新支付配置状态
 */
export function apiUpdatePayconfigStatus(id: string, isEnable: BooleanNumberType): Promise<PayconfigTableData> {
    return useConsolePut(`/system-payconfig/${id}/status`, { isEnable });
}

/**
 * 更新支付配置
 */
export function apiUpdatePayconfig(data: UpdatePayconfigDto): Promise<PayconfigInfo> {
    return useConsolePut(`/system-payconfig/${data.id}`, data);
}

4.2.2 数据结构定义

/**
 * 支付配置信息接口
 */
export interface PayconfigInfo {
    id: string;                // 配置ID
    name: string;              // 配置名称
    logo: string;              // Logo URL
    isEnable: number;          // 启用状态：1-启用，0-禁用
    isDefault: number;         // 默认状态：1-默认，0-非默认
    payType: PayConfigType;    // 支付类型
    sort: number;              // 排序
    payVersion: PayVersionType; // 支付版本
    merchantType: MerchantType; // 商户类型
    mchId: string;             // 商户ID
    apiKey: string;            // API密钥
    paySignKey: string;        // 支付签名密钥
    cert: string;              // 证书
    appId: string;             // 应用ID
}

/**
 * 更新支付配置请求参数
 */
export interface UpdatePayconfigDto {
    id: string;                // 配置ID
    name: string;              // 配置名称
    isEnable: number;          // 启用状态：1-启用，0-禁用
    isDefault: number;         // 默认状态：1-默认，0-非默认
    sort: number;              // 排序
    payVersion: PayVersionType; // 支付版本
    merchantType: MerchantType; // 商户类型
    mchId: string;             // 商户ID
    apiKey: string;            // API密钥
    paySignKey: string;        // 支付签名密钥
    cert: string;              // 证书
    appId: string;             // 应用ID
}

5. 权限控制

5.1 权限体系

支付配置模块使用RBAC（基于角色的访问控制）权限体系，主要权限包括：

system-payconfig:update：支付配置编辑权限

5.2 权限验证

<AccessControl :codes="['system-payconfig:update']">
    <UButton
        size="md"
        variant="ghost"
        color="primary"
        @click="edit(row.original.id)"
    >
        {{ $t("console-common.edit") }}
    </UButton>
</AccessControl>