银行端资产监管小程序
项目简介
银行端资产监管小程序是一个基于 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
安装依赖
# 使用 npm
npm install
# 或使用 yarn
yarn install
开发调试
# 启动开发服务器
npm run dev:h5
# 微信小程序开发
npm run dev:mp-weixin
# App 开发
npm run dev:app-plus
构建打包
# 构建 H5
npm run build:h5
# 构建微信小程序
npm run build:mp-weixin
# 构建 App
npm run build:app-plus
代码检查
# 运行 ESLint
npm run lint
# 自动修复代码风格问题
npm run lint:fix
# 类型检查
npm run type-check
运行测试
# 运行单元测试
npm run test
# 监听模式运行测试
npm run test:watch
# 生成测试覆盖率报告
npm run test:coverage
环境配置
开发环境
复制 .env.development 文件并根据实际情况修改配置：
# API 基础地址
VUE_APP_API_BASE_URL=https://dev-api.bank.com/api/v1
# 是否启用 Mock 数据
VUE_APP_MOCK=true
# 调试模式
VUE_APP_DEBUG=true
生产环境
复制 .env.production 文件并配置生产环境参数：
# 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
- 添加适当的类型定义
- 编写单元测试
部署说明
微信小程序部署
- 使用 HBuilderX 打开项目
- 运行到微信开发者工具
- 在微信开发者工具中预览和上传
H5 部署
- 执行
npm run build:h5 - 将
dist/build/h5目录部署到 Web 服务器
App 部署
- 使用 HBuilderX 云打包
- 或使用离线打包 SDK
常见问题
Q: 如何添加新的 API 接口？
A: 在 src/api/ 目录下创建对应的接口文件，使用统一的请求工具。
Q: 如何添加新的页面？
A:
- 在
src/pages/目录下创建页面文件 - 在
pages.json中配置页面路由 - 如需要，在
manifest.json中配置页面权限
Q: 如何自定义主题？
A: 修改 src/styles/variables.scss 文件中的 SCSS 变量。
Q: 如何处理跨平台兼容性？
A: 使用 uni-app 的条件编译语法，针对不同平台编写特定代码。
技术支持
许可证
本项目采用 MIT 许可证，详情请查看 LICENSE 文件。
更新日志
查看 CHANGELOG.md 了解版本更新详情。