1. FastbuildAI新建套餐前端代码涉及到哪些文件？

FastbuildAI新建套餐功能涉及以下核心文件：

🔧 管理员端（后台管理）

主要页面组件

• apps/web/app/console/user/user-recharge/index.vue - 充值管理主页面（管理员配置套餐）

数据模型定义

• apps/web/models/package-management.d.ts - 套餐充值配置数据类型定义

API服务层

• apps/web/services/console/package-management.ts - 套餐管理相关API接口

国际化文件

• apps/web/core/i18n/zh/console-marketing.json - 中文界面文本
• apps/web/core/i18n/en/console-marketing.json - 英文界面文本
• apps/web/core/i18n/jp/console-marketing.json - 日文界面文本

菜单配置

• apps/web/core/i18n/zh/console-menu.json - 后台菜单配置

👤 用户端（前台充值）

主要页面组件

• apps/web/app/profile/personal-rights/recharge-center.vue - 用户充值中心页面
• apps/web/app/profile/purchase-record.vue - 购买记录页面
• apps/web/app/profile/power-detail.vue - 算力明细页面

数据模型定义

• apps/web/models/recharge-center.d.ts - 充值中心数据类型定义

API服务层

• apps/web/services/web/recharge-center.ts - 用户充值相关API接口

国际化文件

• apps/web/core/i18n/zh/web-personal-rights.json - 用户端界面文本
• apps/web/core/i18n/zh/menu.json - 前台菜单配置

🔧 支付配置相关

• apps/web/app/console/system-setting/payConfig/index.vue - 支付配置主页面
• apps/web/app/console/system-setting/payConfig/_components/form.vue - 支付配置表单
• apps/web/app/console/system-setting/payConfig/_components/card.vue - 支付方式卡片
• apps/web/models/payconfig.d.ts - 支付配置数据模型
• apps/web/services/console/payconfig.ts - 支付配置API服务

📊 订单管理相关

• apps/web/app/console/order-management/order-recharge.vue - 充值订单管理
• apps/web/app/console/order-management/components/order-detail.vue - 订单详情组件

2. FastbuildAI新建套餐相关前端文件的作用是什么？

🎯 核心业务流程文件作用

管理员配置端

apps/web/app/console/user/user-recharge/index.vue - 套餐配置核心页面

• ✅ 功能开关控制：管理充值功能的启用/禁用
• ✅ 套餐规则管理：动态添加、编辑、删除充值套餐
• ✅ 充值说明配置：设置用户看到的充值说明文本
• ✅ 实时数据验证：检测配置变更并控制保存按钮状态
• ✅ 权限控制：基于recharge-config:setConfig权限控制操作

apps/web/models/package-management.d.ts - 数据结构定义

// 定义充值配置数据结构
interface RechargeConfigData {
    rechargeExplain: string;    // 充值说明
    rechargeRule: RechargeRule[]; // 充值规则数组
    rechargeStatus: boolean;     // 充值开关
}

// 定义单个套餐规则结构
interface RechargeRule {
    givePower: number;    // 赠送算力
    label: string;        // 套餐标签
    power: number;        // 充值算力
    sellPrice: number;    // 售价
}

apps/web/services/console/package-management.ts - API接口服务

• 🔄 apiGetRechargeRules() - 获取现有套餐配置
• 💾 saveRechargeRules() - 保存套餐配置到后端

用户购买端

apps/web/app/profile/personal-rights/recharge-center.vue - 用户充值核心页面

• 🛒 套餐展示：展示管理员配置的充值套餐选项
• 💳 支付方式选择：支持微信支付、支付宝等多种支付方式
• 📱 二维码支付：生成支付二维码并轮询支付状态
• ✅ 支付状态监控：实时检测支付结果并处理成功/失败状态
• 🔄 二维码刷新：处理二维码过期并支持重新生成

apps/web/models/recharge-center.d.ts - 充值中心数据模型

// 充值中心信息
interface RechargeCenterInfo {
    payWayList: PayWayList[];     // 支付方式列表
    rechargeExplain: string;      // 充值说明
    rechargeRule: RechargeRule[]; // 充值规则
    rechargeStatus: boolean;      // 充值开关
    user: User;                   // 用户信息
}

apps/web/services/web/recharge-center.ts - 用户端API服务

• 📊 getRechargeCenterInfo() - 获取充值中心信息
• 🛒 recharge() - 提交充值订单
• 💳 prepaid() - 生成支付二维码
• ✅ getPayResult() - 查询支付结果

🌐 支撑系统文件作用

国际化支持

• console-marketing.json - 管理员界面文本（“新建套餐”、“充值数量”、"赠送数量"等）
• web-personal-rights.json - 用户界面文本（“立即购买”、“选择充值套餐”、"支付成功"等）

支付系统集成

• payConfig/目录 - 支付方式配置管理（微信支付、支付宝配置）
• 支付配置组件 - 管理员配置支付参数（商户号、密钥等）

订单管理系统

• order-management/目录 - 充值订单的查看、管理、退款处理
• 订单详情组件 - 显示订单状态、支付信息、用户信息等

🔄 完整业务流程

📋 文件职责总结

文件类型	主要职责	关键功能
页面组件	用户界面交互	表单处理、状态管理、事件响应
数据模型	类型安全保障	TypeScript类型定义、接口约束
API服务	后端通信	HTTP请求封装、数据传输
国际化文件	多语言支持	界面文本配置、本地化
配置文件	系统配置	菜单结构、路由配置、权限设置

这个完整的文件体系确保了FastbuildAI新建套餐功能的类型安全、用户体验、国际化支持和系统可维护性，形成了一个功能完善的商业化充值系统。