# 聚福宝业务组件基础插件包（jufubao-base）项目架构文档

## 1. 项目概览

**jufubao-base** 是一个基于 **uni-app** 框架的业务组件基础插件包，主要用于构建聚福宝生态下的跨平台应用，支持 H5、微信小程序、App 等多个平台。

- **项目类型**：uni-app 跨平台组件库
- **技术栈**：Vue 2.6.10 + Vuex 3.2.0 + uni-app
- **核心功能**：提供丰富的业务组件和通用功能模块
- **应用场景**：聚福宝生态下的各类业务应用开发

## 2. 目录结构

项目采用清晰的模块化结构，主要包含以下核心目录：

| 目录/文件 | 主要功能 | 说明 |
|---------|---------|------|
| **src/components/** | 业务组件库 | 包含大量可复用的业务组件，如登录、支付、卡片等 |
| **src/common/** | 通用工具和服务 | 包含网络请求、存储、日志等通用功能 |
| **src/api/** | API接口定义 | 定义与后端交互的接口 |
| **build/** | 构建配置和脚本 | 包含构建、部署、代码生成等脚本 |
| **commands/** | 命令行工具 | 包含组件创建、更新等命令 |
| **settings.*.js** | 环境配置文件 | 不同环境的配置信息 |

## 3. 核心功能模块

### 3.1 业务组件库

项目提供了丰富的业务组件，覆盖了聚福宝生态的核心业务场景：

- **认证登录**：JfbBaseLogin、JfbBasePhoneLogin 等
- **支付相关**：JfbBasePay、JfbBaseCardPay 等
- **卡片管理**：JfbBaseCard、JfbBaseCardDetail 等
- **地址管理**：JfbBaseAddress、JfbBaseCity 等
- **订单管理**：JfbBaseOrderList、JfbBaseOrderDetail 等
- **UI组件**：JfbBaseHeader、JfbBaseFooter、JfbBaseNotice 等

每个组件都包含完整的配置选项、API 定义和 Mock 数据，方便开发者快速集成和测试。

### 3.2 跨平台支持

项目基于 uni-app 框架，实现了一次开发多端运行：

- **H5 端**：支持浏览器访问
- **微信小程序**：支持微信生态
- **App 端**：支持 iOS 和 Android

### 3.3 构建与部署

项目提供了完整的构建和部署流程：

- **开发环境**：支持热更新和 Mock 数据
- **构建流程**：自动处理多平台构建
- **部署**：集成 OSS 上传功能，支持不同环境的部署

### 3.4 工具链

项目集成了丰富的开发工具：

- **代码生成**：通过 `coder` 命令自动生成 API、页面等代码
- **组件管理**：支持组件的创建、更新和预览
- **日志系统**：集成 xdLog 日志上报功能
- **Mock 数据**：方便开发和测试

## 4. 技术架构

### 4.1 技术栈

| 技术/框架 | 版本 | 用途 |
|---------|------|------|
| Vue | ^2.6.10 | 前端框架 |
| Vuex | ^3.2.0 | 状态管理 |
| uni-app | 2.0.1 | 跨平台框架 |
| flyio | ^0.6.2 | 网络请求 |
| less | ^3.12.2 | 样式预处理 |
| sass | ^1.29.0 | 样式预处理 |
| webpack | 4.44.2 | 构建工具 |

### 4.2 核心架构

项目采用分层架构设计：

1. **组件层**：业务组件和通用组件
2. **服务层**：API 调用、数据处理
3. **工具层**：通用工具函数
4. **配置层**：环境配置、项目设置

### 4.3 数据流

- **前端组件** → **Vuex 状态管理** → **API 服务** → **后端接口**
- **后端响应** → **API 服务** → **Vuex 状态更新** → **前端组件更新**

## 5. 核心 API/类/函数

### 5.1 全局配置

- **settings**：环境配置，包含 API 地址、项目信息等
- **projectJson**：项目配置信息，包含 xsiteid、template_id 等

### 5.2 通用服务

- **storage**：本地存储服务
- **cookie**：Cookie 操作（H5 端）
- **request**：网络请求服务
- **xdLog**：日志上报服务

### 5.3 核心方法

- **checkLoginStatus**：检查用户登录状态
- **getUserInfo**：获取用户信息
- **saveLogs**：上报日志

### 5.4 组件配置

每个组件都通过统一的配置文件定义属性和行为，示例：

```javascript
{
  ele: 'title',
  label: '基础',
  size: 'small',
  groupKey: 'content'
}
```

## 6. 开发与部署

### 6.1 开发命令

| 命令 | 功能 | 说明 |
|-----|------|------|
| `npm run dev` | 启动开发服务器 | 开发环境运行 |
| `npm run build` | 构建生产版本 | 生产环境构建 |
| `npm run coder` | 代码生成 | 自动生成API、页面等代码 |
| `npm run create` | 创建组件 | 快速创建新组件 |
| `npm run update` | 更新组件 | 更新现有组件 |

### 6.2 部署流程

1. **构建**：`npm run build` 生成生产版本
2. **部署**：通过 `npm run oss` 命令上传到 OSS
3. **环境切换**：支持不同环境的部署配置

## 7. 技术特点

1. **模块化设计**：组件高度模块化，易于复用和维护
2. **配置化开发**：通过配置文件管理不同环境的设置
3. **完善的工具链**：提供丰富的命令行工具，提高开发效率
4. **多平台适配**：基于 uni-app 实现跨平台兼容
5. **完整的业务覆盖**：涵盖聚福宝生态的核心业务场景

## 8. 项目价值

- **提高开发效率**：通过复用组件和工具，减少重复开发工作
- **保证代码质量**：统一的代码规范和架构设计
- **加速业务迭代**：快速集成和部署新功能
- **降低维护成本**：模块化设计和完善的文档

## 9. 未来规划

1. **组件库扩展**：持续增加新的业务组件
2. **性能优化**：提升组件性能和加载速度
3. **文档完善**：提供更详细的使用文档和示例
4. **生态集成**：与更多聚福宝生态产品集成
5. **技术升级**：考虑升级到 Vue 3 和 uni-app X

## 10. 总结

jufubao-base 是一个功能完善、设计合理的业务组件基础插件包，为聚福宝生态下的应用开发提供了强大的支持。通过统一的组件库和工具链，开发者可以快速构建高质量的跨平台应用，专注于业务逻辑的实现，而无需关心底层的技术细节。

项目的模块化设计和完善的工具链，不仅提高了开发效率，也保证了代码的可维护性和可扩展性，为聚福宝生态的持续发展提供了坚实的技术基础。