# 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`