银行管理后台系统前端
基于 Vue 3 + Vite + Ant Design Vue 的现代化银行管理后台系统前端界面。
🚀 功能特性
核心功能
- 用户管理: 用户列表、用户详情、用户状态管理
- 账户管理: 账户列表、账户详情、余额管理、账户状态控制
- 交易管理: 交易记录查询、转账功能、交易统计
- 仪表盘: 数据概览、图表展示、系统信息
- 权限控制: 基于角色的访问控制(RBAC)
技术特性
- Vue 3: 使用 Composition API 和
<script setup>语法 - Vite: 快速的构建工具和开发服务器
- Ant Design Vue: 企业级UI组件库
- Pinia: 现代化的状态管理
- Vue Router: 官方路由管理器
- ECharts: 数据可视化图表库
- 响应式设计: 支持桌面端和移动端
🛠 技术栈
- 前端框架: Vue 3.4+
- 构建工具: Vite 5.0+
- UI组件库: Ant Design Vue 4.0+
- 状态管理: Pinia 2.1+
- 路由管理: Vue Router 4.2+
- 图表库: ECharts 5.4+
- 图标库: Ant Design Icons Vue 7.0+
- 工具库: Lodash-es, Day.js, Moment.js
📦 安装部署
环境要求
- Node.js 16.0+
- npm 8.0+
安装步骤
- 安装依赖
npm install
- 环境配置
cp env.example .env
# 编辑 .env 文件，配置API地址等信息
- 启动开发服务器
npm run dev
- 构建生产版本
npm run build
- 预览生产版本
npm run preview
⚙️ 环境配置
创建 .env 文件并配置以下环境变量：
# 应用配置
VITE_APP_TITLE=银行管理后台系统
VITE_API_BASE_URL=http://localhost:5351
VITE_APP_VERSION=1.0.0
# 功能开关
VITE_ENABLE_NOTIFICATION=true
VITE_ENABLE_EXPORT=true
VITE_ENABLE_IMPORT=true
VITE_ENABLE_CHARTS=true
📁 项目结构
bank-frontend/
├── public/ # 静态资源
├── src/
│ ├── components/ # 可复用组件
│ │ ├── DynamicMenu.vue # 动态菜单组件
│ │ └── MobileNav.vue # 移动端导航组件
│ ├── views/ # 页面组件
│ │ ├── Login.vue # 登录页面
│ │ ├── Dashboard.vue # 仪表盘页面
│ │ ├── Users.vue # 用户管理页面
│ │ ├── Accounts.vue # 账户管理页面
│ │ ├── Transactions.vue # 交易管理页面
│ │ ├── Reports.vue # 报表统计页面
│ │ ├── Settings.vue # 系统设置页面
│ │ ├── Profile.vue # 个人中心页面
│ │ └── NotFound.vue # 404页面
│ ├── router/ # 路由配置
│ │ ├── index.js # 路由实例
│ │ └── routes.js # 路由定义
│ ├── stores/ # 状态管理
│ │ ├── user.js # 用户状态
│ │ ├── settings.js # 设置状态
│ │ └── index.js # 状态导出
│ ├── utils/ # 工具类
│ │ └── api.js # API请求封装
│ ├── styles/ # 样式文件
│ │ ├── global.css # 全局样式
│ │ ├── responsive.css # 响应式样式
│ │ └── theme.js # 主题配置
│ ├── config/ # 配置文件
│ │ └── env.js # 环境配置
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML模板
├── vite.config.js # Vite配置
├── package.json # 项目配置
└── README.md # 项目说明
🎨 界面设计
设计原则
- 简洁明了: 界面简洁，信息层次清晰
- 响应式: 支持桌面端和移动端
- 一致性: 统一的视觉风格和交互模式
- 易用性: 符合用户使用习惯
主题配置
- 主色调: #1890ff (蓝色)
- 成功色: #52c41a (绿色)
- 警告色: #faad14 (橙色)
- 错误色: #ff4d4f (红色)
🔐 权限管理
角色定义
- admin: 系统管理员，拥有所有权限
- manager: 银行经理，拥有管理权限
- teller: 银行柜员，拥有业务操作权限
- user: 普通用户，拥有基本查看权限
权限控制
- 路由权限: 基于角色的路由访问控制
- 菜单权限: 根据用户角色显示对应菜单
- 操作权限: 按钮级别的权限控制
- 数据权限: 数据访问范围控制
📱 响应式设计
断点设置
- 移动端: < 768px
- 平板端: 768px - 1024px
- 桌面端: > 1024px
适配特性
- 移动端导航: 抽屉式菜单
- 表格优化: 横向滚动支持
- 表单优化: 垂直布局
- 模态框优化: 全屏显示
🚀 开发指南
代码规范
- 使用 ESLint 进行代码检查
- 遵循 Vue 3 最佳实践
- 统一的组件命名规范
- 完整的注释和文档
开发命令
# 开发模式
npm run dev
# 代码检查
npm run lint
# 代码修复
npm run lint:fix
# 类型检查
npm run type-check
# 运行测试
npm run test
# 构建项目
npm run build
🔧 部署指南
开发环境
- 开发服务器: http://localhost:5300
- API代理: 自动代理到后端服务器
- 热重载: 支持代码修改实时更新
生产环境
- 静态文件部署
- Nginx 反向代理配置
- CDN 加速支持
- 浏览器缓存优化
🤝 贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
📞 联系方式
- 项目维护者: 银行开发团队
- 邮箱: dev@bank.com
- 项目地址: https://github.com/bank-management/bank-frontend
注意: 这是一个演示项目，请勿在生产环境中使用默认的密码和配置。