# 银行端资产监管小程序

## 项目简介

银行端资产监管小程序是一个基于 uni-app 框架开发的跨平台应用，主要用于银行对抵押资产进行实时监管和管理。系统提供了资产查看、监控预警、数据统计、报表分析等核心功能。

## 技术栈

- **框架**: uni-app (Vue 3 + TypeScript)
- **构建工具**: Vite 4.x
- **状态管理**: Pinia
- **UI组件**: 自定义组件库
- **样式**: SCSS
- **网络请求**: Axios
- **图表**: ECharts
- **工具库**: dayjs, lodash-es
- **加密**: crypto-js

## 项目结构

```
bank_mini_program/
├── src/                          # 源代码目录
│   ├── api/                      # API 接口
│   │   ├── auth.ts              # 认证相关接口
│   │   ├── asset.ts             # 资产相关接口
│   │   ├── monitor.ts           # 监控相关接口
│   │   └── report.ts            # 报表相关接口
│   ├── components/               # 组件目录
│   │   ├── common/              # 通用组件
│   │   │   ├── LoadingSpinner.vue    # 加载动画
│   │   │   ├── EmptyState.vue        # 空状态
│   │   │   ├── StatusTag.vue         # 状态标签
│   │   │   └── ActionSheet.vue       # 操作面板
│   │   └── business/            # 业务组件
│   ├── pages/                   # 页面目录
│   │   ├── index/               # 首页
│   │   ├── assets/              # 资产管理
│   │   ├── monitor/             # 监控中心
│   │   ├── reports/             # 数据报表
│   │   ├── profile/             # 个人中心
│   │   └── auth/                # 认证相关
│   ├── stores/                  # 状态管理
│   │   ├── auth.ts              # 认证状态
│   │   ├── asset.ts             # 资产状态
│   │   └── app.ts               # 应用状态
│   ├── utils/                   # 工具函数
│   │   ├── request.ts           # 网络请求
│   │   ├── storage.ts           # 本地存储
│   │   ├── crypto.ts            # 加密工具
│   │   ├── format.ts            # 格式化工具
│   │   └── validate.ts          # 验证工具
│   ├── types/                   # 类型定义
│   │   ├── api.ts               # API 类型
│   │   ├── asset.ts             # 资产类型
│   │   └── common.ts            # 通用类型
│   ├── styles/                  # 样式文件
│   │   ├── variables.scss       # SCSS 变量
│   │   ├── mixins.scss          # SCSS 混合器
│   │   └── utilities.scss       # 工具类样式
│   ├── static/                  # 静态资源
│   ├── App.vue                  # 应用入口
│   ├── main.ts                  # 主入口文件
│   ├── pages.json               # 页面配置
│   ├── manifest.json            # 应用配置
│   └── uni.scss                 # 全局样式
├── tests/                       # 测试目录
│   ├── setup.ts                 # 测试设置
│   └── utils/                   # 测试工具
├── .env.development             # 开发环境配置
├── .env.production              # 生产环境配置
├── .eslintrc.js                 # ESLint 配置
├── jest.config.ts               # Jest 配置
├── tsconfig.json                # TypeScript 配置
├── vite.config.ts               # Vite 配置
└── package.json                 # 项目依赖
```

## 功能特性

### 🏠 首页
- 资产概览统计
- 快速操作入口
- 重要通知展示
- 实时监控状态

### 📊 资产管理
- 资产列表查看
- 资产详情展示
- 资产状态管理
- 资产搜索筛选

### 🔍 监控中心
- 实时监控数据
- 预警信息管理
- 设备状态监控
- 异常事件处理

### 📈 数据报表
- 数据统计分析
- 可视化图表展示
- 报表导出功能
- 自定义时间范围

### 👤 个人中心
- 用户信息管理
- 系统设置
- 消息通知
- 帮助支持

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0
- HBuilderX (推荐) 或 VS Code

### 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install
```

### 开发调试

```bash
# 启动开发服务器
npm run dev:h5

# 微信小程序开发
npm run dev:mp-weixin

# App 开发
npm run dev:app-plus
```

### 构建打包

```bash
# 构建 H5
npm run build:h5

# 构建微信小程序
npm run build:mp-weixin

# 构建 App
npm run build:app-plus
```

### 代码检查

```bash
# 运行 ESLint
npm run lint

# 自动修复代码风格问题
npm run lint:fix

# 类型检查
npm run type-check
```

### 运行测试

```bash
# 运行单元测试
npm run test

# 监听模式运行测试
npm run test:watch

# 生成测试覆盖率报告
npm run test:coverage
```

## 环境配置

### 开发环境

复制 `.env.development` 文件并根据实际情况修改配置：

```bash
# API 基础地址
VUE_APP_API_BASE_URL=https://dev-api.bank.com/api/v1

# 是否启用 Mock 数据
VUE_APP_MOCK=true

# 调试模式
VUE_APP_DEBUG=true
```

### 生产环境

复制 `.env.production` 文件并配置生产环境参数：

```bash
# API 基础地址
VUE_APP_API_BASE_URL=https://api.bank.com/api/v1

# 关闭 Mock 数据
VUE_APP_MOCK=false

# 关闭调试模式
VUE_APP_DEBUG=false
```

## 开发规范

### 代码风格

- 使用 ESLint + Prettier 进行代码格式化
- 遵循 Vue 3 Composition API 最佳实践
- 使用 TypeScript 进行类型约束
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case

### 提交规范

使用 Conventional Commits 规范：

```
feat: 新功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建工具或辅助工具的变动
```

### 组件开发

- 优先使用 Composition API
- 合理使用 Props 和 Emits
- 添加适当的类型定义
- 编写单元测试

## 部署说明

### 微信小程序部署

1. 使用 HBuilderX 打开项目
2. 运行到微信开发者工具
3. 在微信开发者工具中预览和上传

### H5 部署

1. 执行 `npm run build:h5`
2. 将 `dist/build/h5` 目录部署到 Web 服务器

### App 部署

1. 使用 HBuilderX 云打包
2. 或使用离线打包 SDK

## 常见问题

### Q: 如何添加新的 API 接口？

A: 在 `src/api/` 目录下创建对应的接口文件，使用统一的请求工具。

### Q: 如何添加新的页面？

A: 
1. 在 `src/pages/` 目录下创建页面文件
2. 在 `pages.json` 中配置页面路由
3. 如需要，在 `manifest.json` 中配置页面权限

### Q: 如何自定义主题？

A: 修改 `src/styles/variables.scss` 文件中的 SCSS 变量。

### Q: 如何处理跨平台兼容性？

A: 使用 uni-app 的条件编译语法，针对不同平台编写特定代码。

## 技术支持

- 项目文档：[查看详细文档](./docs/)
- 问题反馈：[提交 Issue](https://github.com/your-repo/issues)
- 技术交流：联系开发团队

## 许可证

本项目采用 MIT 许可证，详情请查看 [LICENSE](./LICENSE) 文件。

## 更新日志

查看 [CHANGELOG.md](./CHANGELOG.md) 了解版本更新详情。