vdi/pc-fe/README.md

2.2 KiB
Raw Permalink Blame History

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