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

安装依赖

npm install

开发环境运行

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览生产构建

npm run preview

环境变量配置

复制 .env.example 为 .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