111 lines
2.2 KiB
Markdown
111 lines
2.2 KiB
Markdown
|
# 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
|