初始提交
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
# 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`
|
||||
Reference in New Issue
Block a user