xiarou/kvm

Fork 0

Files

T

xiarou 1035446d4d 初始提交

2026-02-12 15:40:10 +08:00

5.4 KiB

Raw Permalink Blame History

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

功能特性

已实现功能

用户认证
- 用户登录/注册
- JWT Token 管理
- 权限控制（管理员/普通用户）
仪表盘
- 资源统计卡片
- 资源使用情况图表
- 虚拟机状态分布图表
- 最近操作记录
虚拟机管理
- 虚拟机列表（搜索、分页）
- 虚拟机详情
- 创建虚拟机
- 虚拟机操作（启动、停止、重启、删除等）
镜像管理
- 镜像列表（搜索、筛选）
- 镜像操作（创建、编辑、删除、重新下载）
网络管理
- 网络列表（搜索、筛选）
- 网络操作（创建、编辑、删除）
数据卷管理
- 数据卷列表（搜索、筛选）
- 数据卷操作（创建、挂载、卸载、扩容、删除）
安全组管理
- 安全组列表
- 安全组规则管理
- 安全组绑定/解绑
用户管理（仅管理员）
- 用户列表
- 创建/编辑用户
- 修改密码
- 删除用户

UI 特性

深色模式：默认深色主题，符合运维场景
玻璃态效果：卡片和面板使用玻璃态设计
响应式设计：支持桌面、平板、移动端
信息密度高：优先展示关键信息
流畅交互：微动画和过渡效果

API 接口

所有 API 接口统一使用 /api 前缀，认证方式为 Bearer Token。

详细 API 文档请参考：本网站API文档（封装功能API和用户功能）.md

权限控制

路由守卫：根据用户角色控制页面访问
菜单过滤：普通用户隐藏管理员菜单
按钮控制：根据权限显示/隐藏操作按钮

样式规范

主色：#10b981（翠绿色）
深色背景：#1a1a2e
玻璃态效果：backdrop-filter: blur(12px)
圆角：12px
间距：使用 8px 基准网格

详细样式规范请参考：UI设计规范.md

开发规范

组件命名：使用 PascalCase
文件命名：使用 PascalCase（组件）或 camelCase（工具函数）
API 调用：统一使用封装的 API 函数
状态管理：使用 Pinia stores
路由：使用 Vue Router，配置权限守卫
样式：优先使用 CSS 变量，支持深色模式

注意事项

所有 API 请求都需要携带 JWT Token（除登录/注册接口）
Token 过期会自动跳转到登录页
管理员可以访问所有功能，普通用户受限
删除操作需要二次确认
列表页面支持搜索和分页

问题反馈

如有问题，请查看：

架构文档：架构文档.md
API 文档：本网站API文档（封装功能API和用户功能）.md
UI 规范：UI设计规范.md

5.4 KiB Raw Permalink Blame History