# VDI 系统前端

这是一个基于 UmiJS 和 Electron 的 VDI（虚拟桌面基础设施）系统前端应用。

## 功能特性

- 🔐 用户登录认证
- 🖥️ 镜像列表管理
- 👤 个人中心
- 📱 响应式设计
- 🎨 现代化 UI 界面

## 技术栈

- **框架**: UmiJS 4
- **UI 组件**: Ant Design
- **桌面应用**: Electron
- **语言**: TypeScript
- **样式**: Less

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建应用

```bash
npm run build
```

## 项目结构

```
src/
├── pages/                 # 页面组件
│   ├── index.tsx         # 首页（自动跳转）
│   ├── login.tsx         # 登录页面
│   ├── images.tsx        # 镜像列表页面
│   ├── profile.tsx       # 个人资料页面
│   ├── components/       # 页面组件
│   │   ├── ImageList.tsx # 镜像列表组件
│   │   └── Profile.tsx   # 个人资料组件
│   └── ...
├── layouts/              # 布局组件
│   └── index.tsx         # 主布局（包含侧边栏和顶部导航）
├── assets/               # 静态资源
└── main/                 # Electron 主进程
```

## 使用说明

### 登录

1. 启动应用后会自动跳转到登录页面
2. 使用以下测试账号登录：
   - 用户名：`admin`
   - 密码：`123456`

### 功能导航

- **镜像列表** (`/images`): 查看和管理系统镜像
- **我的** (`/profile`): 个人资料和设置


### 镜像管理

- 查看镜像详情
- 下载镜像
- 编辑镜像信息
- 删除镜像

### 个人中心

- 查看个人信息
- 修改密码
- 查看登录历史

## 开发说明

### 添加新页面

1. 在 `src/pages/` 目录下创建新的页面组件
2. 在路由中注册新页面
3. 在菜单中添加对应的导航项

### 样式开发

- 使用 Less 编写样式
- 遵循 BEM 命名规范
- 支持响应式设计

## 注意事项

- 当前版本使用 localStorage 进行登录状态管理
- 镜像数据为模拟数据，实际使用时需要连接后端 API
- 建议在生产环境中使用更安全的认证方式

## 许可证

MIT License