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
|