nxxmdata/bank-frontend/README.md

# 银行管理后台系统前端

基于 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. **安装依赖**
```bash
npm install
```

2. **环境配置**
```bash
cp env.example .env
# 编辑 .env 文件，配置API地址等信息
```

3. **启动开发服务器**
```bash
npm run dev
```

4. **构建生产版本**
```bash
npm run build
```

5. **预览生产版本**
```bash
npm run preview
```

## ⚙️ 环境配置

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

```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 最佳实践
- 统一的组件命名规范
- 完整的注释和文档

### 开发命令
```bash
# 开发模式
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](LICENSE) 文件了解详情。

## 📞 联系方式

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

---

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