vdi/pc-fe

VDI 系统前端

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

功能特性

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

技术栈

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

快速开始

安装依赖

npm install

开发模式

npm run dev

构建应用

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