nxxmdata/bank-frontend

银行管理后台系统前端

基于 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+

安装步骤

1. 安装依赖

npm install

2. 环境配置

cp env.example .env
# 编辑 .env 文件，配置API地址等信息

3. 启动开发服务器

npm run dev

4. 构建生产版本

npm run build

5. 预览生产版本

npm run preview

⚙️ 环境配置

创建 .env 文件并配置以下环境变量：

# 应用配置
VITE_APP_TITLE=银行管理后台系统
VITE_API_BASE_URL=http://localhost:5350
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 加速支持
• 浏览器缓存优化

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

📞 联系方式

• 项目维护者: 银行开发团队
• 邮箱: dev@bank.com
• 项目地址: https://github.com/bank-management/bank-frontend

---

注意: 这是一个演示项目，请勿在生产环境中使用默认的密码和配置。