202 lines
5.4 KiB
Markdown
202 lines
5.4 KiB
Markdown
# KVM主控操作平台 - 前端
|
|
|
|
基于 Vue 3 + Ant Design Vue + Pinia 的虚拟化管理后台前端项目。
|
|
|
|
## 技术栈
|
|
|
|
- **Vue 3** - 渐进式 JavaScript 框架
|
|
- **Vite** - 下一代前端构建工具
|
|
- **Ant Design Vue** - 企业级 UI 组件库
|
|
- **Pinia** - Vue 状态管理
|
|
- **Vue Router** - Vue 官方路由管理器
|
|
- **Axios** - HTTP 客户端
|
|
- **ECharts** - 数据可视化图表库
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── api/ # API 接口封装
|
|
│ │ ├── request.js # Axios 封装
|
|
│ │ ├── userApi.js # 用户相关 API
|
|
│ │ ├── vmApi.js # 虚拟机相关 API
|
|
│ │ └── ...
|
|
│ ├── stores/ # Pinia 状态管理
|
|
│ │ ├── userStore.js # 用户状态
|
|
│ │ └── vmStore.js # 虚拟机状态
|
|
│ ├── router/ # 路由配置
|
|
│ │ └── index.js # 路由定义和权限守卫
|
|
│ ├── views/ # 页面组件
|
|
│ │ ├── auth/ # 认证页面（登录、注册）
|
|
│ │ ├── Dashboard.vue # 仪表盘
|
|
│ │ ├── vm/ # 虚拟机管理
|
|
│ │ ├── image/ # 镜像管理
|
|
│ │ ├── network/ # 网络管理
|
|
│ │ ├── volume/ # 数据卷管理
|
|
│ │ ├── portGroup/ # 安全组管理
|
|
│ │ └── user/ # 用户管理
|
|
│ ├── layouts/ # 布局组件
|
|
│ │ └── DefaultLayout.vue # 默认布局
|
|
│ ├── components/ # 公共组件
|
|
│ │ └── common/ # 通用组件
|
|
│ ├── composables/ # 组合式函数
|
|
│ │ ├── useTable.js # 表格相关
|
|
│ │ ├── useForm.js # 表单相关
|
|
│ │ └── useAuth.js # 认证相关
|
|
│ ├── styles/ # 全局样式
|
|
│ │ ├── main.css # 主样式
|
|
│ │ ├── variables.css # CSS 变量
|
|
│ │ └── dark.css # 深色模式
|
|
│ ├── App.vue # 根组件
|
|
│ └── main.js # 入口文件
|
|
├── public/ # 静态资源
|
|
├── .env.example # 环境变量示例
|
|
├── vite.config.js # Vite 配置
|
|
└── package.json # 项目依赖
|
|
```
|
|
|
|
## 开发指南
|
|
|
|
### 环境要求
|
|
|
|
- Node.js >= 16.0.0
|
|
- npm >= 7.0.0
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 开发环境运行
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
访问 http://localhost:5173
|
|
|
|
### 构建生产版本
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### 预览生产构建
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## 环境变量配置
|
|
|
|
复制 `.env.example` 为 `.env` 并配置：
|
|
|
|
```env
|
|
# API地址
|
|
VITE_API_BASE_URL=http://localhost:3000/api
|
|
|
|
# 应用配置
|
|
VITE_APP_TITLE=KVM主控操作平台
|
|
VITE_APP_VERSION=1.0.0
|
|
```
|
|
|
|
## 功能特性
|
|
|
|
### 已实现功能
|
|
|
|
1. **用户认证**
|
|
- 用户登录/注册
|
|
- JWT Token 管理
|
|
- 权限控制（管理员/普通用户）
|
|
|
|
2. **仪表盘**
|
|
- 资源统计卡片
|
|
- 资源使用情况图表
|
|
- 虚拟机状态分布图表
|
|
- 最近操作记录
|
|
|
|
3. **虚拟机管理**
|
|
- 虚拟机列表（搜索、分页）
|
|
- 虚拟机详情
|
|
- 创建虚拟机
|
|
- 虚拟机操作（启动、停止、重启、删除等）
|
|
|
|
4. **镜像管理**
|
|
- 镜像列表（搜索、筛选）
|
|
- 镜像操作（创建、编辑、删除、重新下载）
|
|
|
|
5. **网络管理**
|
|
- 网络列表（搜索、筛选）
|
|
- 网络操作（创建、编辑、删除）
|
|
|
|
6. **数据卷管理**
|
|
- 数据卷列表（搜索、筛选）
|
|
- 数据卷操作（创建、挂载、卸载、扩容、删除）
|
|
|
|
7. **安全组管理**
|
|
- 安全组列表
|
|
- 安全组规则管理
|
|
- 安全组绑定/解绑
|
|
|
|
8. **用户管理**（仅管理员）
|
|
- 用户列表
|
|
- 创建/编辑用户
|
|
- 修改密码
|
|
- 删除用户
|
|
|
|
### UI 特性
|
|
|
|
- **深色模式**：默认深色主题，符合运维场景
|
|
- **玻璃态效果**：卡片和面板使用玻璃态设计
|
|
- **响应式设计**：支持桌面、平板、移动端
|
|
- **信息密度高**：优先展示关键信息
|
|
- **流畅交互**：微动画和过渡效果
|
|
|
|
## API 接口
|
|
|
|
所有 API 接口统一使用 `/api` 前缀，认证方式为 Bearer Token。
|
|
|
|
详细 API 文档请参考：`本网站API文档（封装功能API和用户功能）.md`
|
|
|
|
## 权限控制
|
|
|
|
- **路由守卫**：根据用户角色控制页面访问
|
|
- **菜单过滤**：普通用户隐藏管理员菜单
|
|
- **按钮控制**：根据权限显示/隐藏操作按钮
|
|
|
|
## 样式规范
|
|
|
|
- 主色：`#10b981`（翠绿色）
|
|
- 深色背景：`#1a1a2e`
|
|
- 玻璃态效果：`backdrop-filter: blur(12px)`
|
|
- 圆角：`12px`
|
|
- 间距：使用 8px 基准网格
|
|
|
|
详细样式规范请参考：`UI设计规范.md`
|
|
|
|
## 开发规范
|
|
|
|
1. **组件命名**：使用 PascalCase
|
|
2. **文件命名**：使用 PascalCase（组件）或 camelCase（工具函数）
|
|
3. **API 调用**：统一使用封装的 API 函数
|
|
4. **状态管理**：使用 Pinia stores
|
|
5. **路由**：使用 Vue Router，配置权限守卫
|
|
6. **样式**：优先使用 CSS 变量，支持深色模式
|
|
|
|
## 注意事项
|
|
|
|
1. 所有 API 请求都需要携带 JWT Token（除登录/注册接口）
|
|
2. Token 过期会自动跳转到登录页
|
|
3. 管理员可以访问所有功能，普通用户受限
|
|
4. 删除操作需要二次确认
|
|
5. 列表页面支持搜索和分页
|
|
|
|
## 问题反馈
|
|
|
|
如有问题，请查看：
|
|
- 架构文档：`架构文档.md`
|
|
- API 文档：`本网站API文档（封装功能API和用户功能）.md`
|
|
- UI 规范：`UI设计规范.md`
|