feat(PC): 初始化项目
may505
commit
2b39922d58
|
|
@ -0,0 +1,12 @@
|
|||
/node_modules
|
||||
/.env.local
|
||||
/.umirc.local.ts
|
||||
/config/config.local.ts
|
||||
/src/.umi
|
||||
/src/.umi-production
|
||||
/src/.umi-test
|
||||
/dist
|
||||
.swc
|
||||
.electron
|
||||
.electron-production
|
||||
yarn-error.log
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
registry=https://registry.npmmirror.com
|
||||
strict-peer-dependencies=false
|
||||
electron-mirror=https://registry.npmmirror.com/-/binary/electron/
|
||||
electron-builder-binaries-mirror=https://registry.npmmirror.com/binary.html?path=electron-builder-binaries/
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { defineConfig } from 'umi';
|
||||
import { Platform, Arch } from '@umijs/plugin-electron';
|
||||
|
||||
export default defineConfig({
|
||||
npmClient: 'yarn',
|
||||
plugins: ['@umijs/plugin-electron'],
|
||||
electron: {
|
||||
builder: {
|
||||
targets: Platform.LINUX.createTarget(['AppImage'], Arch.x64),
|
||||
},
|
||||
},
|
||||
// 配置 Ant Design
|
||||
mfsu: false,
|
||||
hash: true,
|
||||
styles: ['src/global.less'],
|
||||
// 路由配置
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
component: '@/pages/login',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: '@/pages/components/Layout/index',
|
||||
routes: [
|
||||
{
|
||||
path: '/images',
|
||||
component: '@/pages/images',
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
component: '@/pages/profile',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '@/pages/login',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
# 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
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"name": "vdi-manager",
|
||||
"version": "1.0.5",
|
||||
"scripts": {
|
||||
"dev": "umi dev",
|
||||
"build": "umi build",
|
||||
"postinstall": "umi setup",
|
||||
"setup": "umi setup",
|
||||
"start": "npm run dev",
|
||||
"electron:dev": "umi dev electron",
|
||||
"electron:build": "umi build electron"
|
||||
},
|
||||
"author": {
|
||||
"name": "may505",
|
||||
"email": "13658239852@163.com"
|
||||
},
|
||||
"homepage": "http://10.209.8.11/users/sign_in",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.0.0",
|
||||
"antd": "^5.26.6",
|
||||
"umi": "^4.0.42"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node14": "^1.0.3",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@umijs/plugin-electron": "^0.2.0",
|
||||
"electron": "23.1.1",
|
||||
"typescript": "^4.1.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org"
|
||||
},
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"tsconfig.json",
|
||||
".npmrc",
|
||||
".gitignore",
|
||||
"README.md",
|
||||
".umirc.ts",
|
||||
"package.json",
|
||||
"typings.d.ts"
|
||||
],
|
||||
"main": "src/main/index.js",
|
||||
"build": {
|
||||
"appId": "com.vdi.app",
|
||||
"productName": "VDI",
|
||||
"directories": {
|
||||
"output": "dist-electron"
|
||||
},
|
||||
"linux": {
|
||||
"target": "AppImage",
|
||||
"category": "Utility",
|
||||
"icon": "src/assets/unis.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,10 @@
|
|||
import { history } from 'umi';
|
||||
|
||||
export function onRouteChange({ location }: { location: any }) {
|
||||
// 路由变化时的处理逻辑
|
||||
console.log('Route changed to:', location.pathname);
|
||||
}
|
||||
|
||||
export function render(oldRender: () => void) {
|
||||
oldRender();
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
|
|
@ -0,0 +1,36 @@
|
|||
@import 'antd/dist/reset.css';
|
||||
|
||||
// 全局样式
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.main-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-sider {
|
||||
.logo {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background: #fff;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.welcome-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
background: #1890ff;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
// margin: 24px;
|
||||
// padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { history, useLocation, Outlet } from 'umi';
|
||||
import './index.less';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
const MainLayout: React.FC = () => {
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
return (
|
||||
<Layout className="main-layout">
|
||||
<Content className="main-content">
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLayout;
|
||||
|
|
@ -0,0 +1 @@
|
|||
// getBrowserWindowRuntime().webContents.openDevTools();
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { ipcMain } from 'electron';
|
||||
|
||||
ipcMain.handle('getPlatform', () => {
|
||||
return `hi, i'm from ${process.platform}`;
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { contextBridge, ipcRenderer } from 'electron';
|
||||
|
||||
contextBridge.exposeInMainWorld('$api', {
|
||||
getPlatform: async () => {
|
||||
return await ipcRenderer.invoke('getPlatform');
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "@tsconfig/node14"
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { BrowserWindow } from 'electron';
|
||||
|
||||
declare global {
|
||||
export function getBrowserWindowRuntime(): BrowserWindow;
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
.main-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.main-sider {
|
||||
.logo {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
background: #fff;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.welcome-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
background: #1890ff;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
// margin: 24px;
|
||||
// padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
UserOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { history, useLocation, Outlet } from 'umi';
|
||||
import './index.less';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
const MainLayout: React.FC = () => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [username, setUsername] = useState('');
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
// 检查登录状态
|
||||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||||
const currentUsername = localStorage.getItem('username');
|
||||
|
||||
if (!isLoggedIn) {
|
||||
message.error('请先登录！');
|
||||
history.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
setUsername(currentUsername || '');
|
||||
}, []);
|
||||
|
||||
const handleMenuClick = (key: string) => {
|
||||
// 使用路由导航
|
||||
history.push(`/${key}`);
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('isLoggedIn');
|
||||
localStorage.removeItem('username');
|
||||
message.success('已退出登录');
|
||||
history.push('/login');
|
||||
};
|
||||
|
||||
const userMenu = (
|
||||
<Menu>
|
||||
<Menu.Item key="profile" icon={<UserOutlined />} onClick={() => history.push('/profile')}>
|
||||
个人资料
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
|
||||
退出登录
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
// 根据当前路径确定选中的菜单项
|
||||
const getSelectedKey = () => {
|
||||
const path = location.pathname;
|
||||
if (path === '/images') return 'images';
|
||||
if (path === '/profile') return 'profile';
|
||||
return 'images'; // 默认选中镜像列表
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout className="main-layout">
|
||||
<Sider
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
className="main-sider"
|
||||
>
|
||||
<div className="logo">
|
||||
{!collapsed && <span>VDI 系统</span>}
|
||||
</div>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
selectedKeys={[getSelectedKey()]}
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
>
|
||||
<Menu.Item key="images" icon={<AppstoreOutlined />}>
|
||||
镜像列表
|
||||
</Menu.Item>
|
||||
<Menu.Item key="profile" icon={<UserOutlined />}>
|
||||
我的
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
|
||||
<Layout>
|
||||
<Header className="main-header">
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="trigger"
|
||||
/>
|
||||
|
||||
<div className="header-right">
|
||||
<span className="welcome-text">欢迎，{username}</span>
|
||||
<Dropdown overlay={userMenu} placement="bottomRight">
|
||||
<Avatar icon={<UserOutlined />} className="user-avatar" />
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
<Content className="main-content">
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLayout;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
const DocsPage = () => {
|
||||
return (
|
||||
<div>
|
||||
<p>This is umi docs.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocsPage;
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
// 页面头部样式
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 镜像列表样式
|
||||
.image-list {
|
||||
.image-detail {
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0 0 100px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 个人资料样式
|
||||
.profile-page {
|
||||
.profile-content {
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.profile-info {
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
.profile-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Table, Tag, Button, Space, Modal, message } from 'antd';
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons';
|
||||
import './index.less';
|
||||
|
||||
interface ImageItem {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string;
|
||||
size: string;
|
||||
status: 'active' | 'inactive' | 'building';
|
||||
createTime: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const ImageList: React.FC = () => {
|
||||
const [images, setImages] = useState<ImageItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedImage, setSelectedImage] = useState<ImageItem | null>(null);
|
||||
const [detailVisible, setDetailVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadImages();
|
||||
}, []);
|
||||
|
||||
const loadImages = () => {
|
||||
setLoading(true);
|
||||
// 模拟数据加载
|
||||
setTimeout(() => {
|
||||
const mockData: ImageItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Windows 10 专业版',
|
||||
version: 'v1.0.0',
|
||||
size: '15.2 GB',
|
||||
status: 'active',
|
||||
createTime: '2024-01-15 10:30:00',
|
||||
description: 'Windows 10 专业版镜像，包含常用办公软件'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ubuntu 22.04 LTS',
|
||||
version: 'v2.1.0',
|
||||
size: '8.5 GB',
|
||||
status: 'active',
|
||||
createTime: '2024-01-10 14:20:00',
|
||||
description: 'Ubuntu 22.04 LTS 服务器版本，适用于开发环境'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'CentOS 8',
|
||||
version: 'v1.5.0',
|
||||
size: '12.1 GB',
|
||||
status: 'building',
|
||||
createTime: '2024-01-20 09:15:00',
|
||||
description: 'CentOS 8 企业级服务器操作系统'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'macOS Monterey',
|
||||
version: 'v1.2.0',
|
||||
size: '18.7 GB',
|
||||
status: 'inactive',
|
||||
createTime: '2024-01-05 16:45:00',
|
||||
description: 'macOS Monterey 开发环境镜像'
|
||||
}
|
||||
];
|
||||
setImages(mockData);
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const getStatusTag = (status: string) => {
|
||||
const statusMap = {
|
||||
active: { color: 'green', text: '可用' },
|
||||
inactive: { color: 'red', text: '不可用' },
|
||||
building: { color: 'orange', text: '构建中' }
|
||||
};
|
||||
const config = statusMap[status as keyof typeof statusMap];
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
};
|
||||
|
||||
const handleViewDetail = (record: ImageItem) => {
|
||||
setSelectedImage(record);
|
||||
setDetailVisible(true);
|
||||
};
|
||||
|
||||
const handleDownload = (record: ImageItem) => {
|
||||
message.success(`开始下载镜像：${record.name}`);
|
||||
};
|
||||
|
||||
const handleEdit = (record: ImageItem) => {
|
||||
message.info(`编辑镜像：${record.name}`);
|
||||
};
|
||||
|
||||
const handleDelete = (record: ImageItem) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除镜像 "${record.name}" 吗？`,
|
||||
onOk: () => {
|
||||
setImages(images.filter(img => img.id !== record.id));
|
||||
message.success('删除成功');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '镜像名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
dataIndex: 'size',
|
||||
key: 'size',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (status: string) => getStatusTag(status),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
render: (_: any, record: ImageItem) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => handleViewDetail(record)}
|
||||
title="查看详情"
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => handleDownload(record)}
|
||||
title="下载"
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="image-list">
|
||||
<Card>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={images}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
total: images.length,
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="镜像详情"
|
||||
open={detailVisible}
|
||||
onCancel={() => setDetailVisible(false)}
|
||||
footer={[
|
||||
<Button key="close" onClick={() => setDetailVisible(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={600}
|
||||
>
|
||||
{selectedImage && (
|
||||
<div className="image-detail">
|
||||
<div className="detail-item">
|
||||
<label>镜像名称：</label>
|
||||
<span>{selectedImage.name}</span>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>版本：</label>
|
||||
<span>{selectedImage.version}</span>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>大小：</label>
|
||||
<span>{selectedImage.size}</span>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>状态：</label>
|
||||
<span>{getStatusTag(selectedImage.status)}</span>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>创建时间：</label>
|
||||
<span>{selectedImage.createTime}</span>
|
||||
</div>
|
||||
<div className="detail-item">
|
||||
<label>描述：</label>
|
||||
<p>{selectedImage.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageList;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { useEffect } from 'react';
|
||||
import { history } from 'umi';
|
||||
|
||||
export default function HomePage() {
|
||||
useEffect(() => {
|
||||
// 检查登录状态
|
||||
const isLoggedIn = localStorage.getItem('isLoggedIn');
|
||||
|
||||
if (isLoggedIn) {
|
||||
// 已登录，跳转到镜像列表页面
|
||||
history.push('/images');
|
||||
} else {
|
||||
// 未登录，跳转到登录页面
|
||||
history.push('/login');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return null; // 不渲染任何内容，因为会立即跳转
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-content {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
|
||||
.ant-card-head {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.ant-input-affix-wrapper-focused {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Form, Input, Button, Card, message } from 'antd';
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons';
|
||||
import { history } from 'umi';
|
||||
import './index.less';
|
||||
|
||||
interface LoginForm {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
const LoginPage: React.FC = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onFinish = async (values: LoginForm) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 模拟登录验证
|
||||
if (values.username === 'admin' && values.password === '123456') {
|
||||
message.success('登录成功！');
|
||||
// 存储登录状态
|
||||
localStorage.setItem('isLoggedIn', 'true');
|
||||
localStorage.setItem('username', values.username);
|
||||
// 跳转到镜像列表页面
|
||||
history.push('/images');
|
||||
} else {
|
||||
message.error('用户名或密码错误！');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('登录失败，请重试！');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="login-container">
|
||||
<div className="login-content">
|
||||
<Card className="login-card" title="系统登录" bordered={false}>
|
||||
<Form
|
||||
name="login"
|
||||
onFinish={onFinish}
|
||||
autoComplete="off"
|
||||
size="large"
|
||||
>
|
||||
<Form.Item
|
||||
name="username"
|
||||
rules={[{ required: true, message: '请输入用户名！' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder="用户名"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: '请输入密码！' }]}
|
||||
>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder="密码"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
block
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="login-tips">
|
||||
<p>提示：用户名 admin，密码 123456</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
// 页面头部样式
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 镜像列表样式
|
||||
.image-list {
|
||||
.image-detail {
|
||||
.detail-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0 0 100px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 个人资料样式
|
||||
.profile-page {
|
||||
.profile-content {
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.profile-info {
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
.profile-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, Avatar, Descriptions, Button, Form, Input, Modal, message, Divider, List, Tag } from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
EditOutlined,
|
||||
SaveOutlined,
|
||||
KeyOutlined,
|
||||
BellOutlined,
|
||||
SecurityScanOutlined,
|
||||
HistoryOutlined
|
||||
} from '@ant-design/icons';
|
||||
import './index.less';
|
||||
|
||||
interface UserInfo {
|
||||
username: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
department: string;
|
||||
role: string;
|
||||
lastLoginTime: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
interface LoginHistory {
|
||||
id: string;
|
||||
loginTime: string;
|
||||
ip: string;
|
||||
location: string;
|
||||
device: string;
|
||||
}
|
||||
|
||||
const Profile: React.FC = () => {
|
||||
const [userInfo, setUserInfo] = useState<UserInfo>({
|
||||
username: '',
|
||||
email: 'admin@example.com',
|
||||
phone: '138****8888',
|
||||
department: '技术部',
|
||||
role: '管理员',
|
||||
lastLoginTime: '2024-01-20 15:30:00',
|
||||
createTime: '2023-01-01 00:00:00'
|
||||
});
|
||||
const [editModalVisible, setEditModalVisible] = useState(false);
|
||||
const [passwordModalVisible, setPasswordModalVisible] = useState(false);
|
||||
const [loginHistory, setLoginHistory] = useState<LoginHistory[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const username = localStorage.getItem('username') || '';
|
||||
setUserInfo(prev => ({ ...prev, username }));
|
||||
loadLoginHistory();
|
||||
}, []);
|
||||
|
||||
const loadLoginHistory = () => {
|
||||
// 模拟登录历史数据
|
||||
const mockHistory: LoginHistory[] = [
|
||||
{
|
||||
id: '1',
|
||||
loginTime: '2024-01-20 15:30:00',
|
||||
ip: '192.168.1.100',
|
||||
location: '北京市',
|
||||
device: 'Chrome 120.0.0.0'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
loginTime: '2024-01-19 09:15:00',
|
||||
ip: '192.168.1.100',
|
||||
location: '北京市',
|
||||
device: 'Chrome 120.0.0.0'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
loginTime: '2024-01-18 14:20:00',
|
||||
ip: '192.168.1.100',
|
||||
location: '北京市',
|
||||
device: 'Chrome 120.0.0.0'
|
||||
}
|
||||
];
|
||||
setLoginHistory(mockHistory);
|
||||
};
|
||||
|
||||
const handleEditProfile = (values: any) => {
|
||||
setUserInfo(prev => ({ ...prev, ...values }));
|
||||
setEditModalVisible(false);
|
||||
message.success('个人信息更新成功');
|
||||
};
|
||||
|
||||
const handleChangePassword = (values: any) => {
|
||||
if (values.newPassword !== values.confirmPassword) {
|
||||
message.error('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
setPasswordModalVisible(false);
|
||||
message.success('密码修改成功');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="profile-page">
|
||||
<div className="page-header">
|
||||
<h2>个人中心</h2>
|
||||
</div>
|
||||
|
||||
<div className="profile-content">
|
||||
{/* 基本信息卡片 */}
|
||||
<Card
|
||||
title="基本信息"
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => setEditModalVisible(true)}
|
||||
>
|
||||
编辑信息
|
||||
</Button>
|
||||
}
|
||||
style={{ marginBottom: 24 }}
|
||||
>
|
||||
<div className="profile-header">
|
||||
<Avatar size={80} icon={<UserOutlined />} />
|
||||
<div className="profile-info">
|
||||
<h3>{userInfo.username}</h3>
|
||||
<p>{userInfo.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Descriptions column={2}>
|
||||
<Descriptions.Item label="用户名">{userInfo.username}</Descriptions.Item>
|
||||
<Descriptions.Item label="邮箱">{userInfo.email}</Descriptions.Item>
|
||||
<Descriptions.Item label="手机号">{userInfo.phone}</Descriptions.Item>
|
||||
<Descriptions.Item label="部门">{userInfo.department}</Descriptions.Item>
|
||||
<Descriptions.Item label="角色">{userInfo.role}</Descriptions.Item>
|
||||
<Descriptions.Item label="最后登录">{userInfo.lastLoginTime}</Descriptions.Item>
|
||||
<Descriptions.Item label="注册时间">{userInfo.createTime}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
|
||||
{/* 快捷操作卡片 */}
|
||||
<Card title="快捷操作" style={{ marginBottom: 24 }}>
|
||||
<div className="quick-actions">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<KeyOutlined />}
|
||||
onClick={() => setPasswordModalVisible(true)}
|
||||
>
|
||||
修改密码
|
||||
</Button>
|
||||
<Button icon={<BellOutlined />}>
|
||||
消息设置
|
||||
</Button>
|
||||
<Button icon={<SecurityScanOutlined />}>
|
||||
安全设置
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 登录历史卡片 */}
|
||||
<Card title="登录历史" extra={<HistoryOutlined />}>
|
||||
<List
|
||||
dataSource={loginHistory}
|
||||
renderItem={(item) => (
|
||||
<List.Item>
|
||||
<List.Item.Meta
|
||||
title={`登录时间：${item.loginTime}`}
|
||||
description={
|
||||
<div>
|
||||
<p>IP地址：{item.ip}</p>
|
||||
<p>登录地点：{item.location}</p>
|
||||
<p>设备信息：{item.device}</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Tag color="green">成功</Tag>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 编辑个人信息模态框 */}
|
||||
<Modal
|
||||
title="编辑个人信息"
|
||||
open={editModalVisible}
|
||||
onCancel={() => setEditModalVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<Form
|
||||
layout="vertical"
|
||||
initialValues={userInfo}
|
||||
onFinish={handleEditProfile}
|
||||
>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' }
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="手机号"
|
||||
rules={[
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" icon={<SaveOutlined />} block>
|
||||
保存
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 修改密码模态框 */}
|
||||
<Modal
|
||||
title="修改密码"
|
||||
open={passwordModalVisible}
|
||||
onCancel={() => setPasswordModalVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<Form
|
||||
layout="vertical"
|
||||
onFinish={handleChangePassword}
|
||||
>
|
||||
<Form.Item
|
||||
name="oldPassword"
|
||||
label="当前密码"
|
||||
rules={[{ required: true, message: '请输入当前密码' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="newPassword"
|
||||
label="新密码"
|
||||
rules={[
|
||||
{ required: true, message: '请输入新密码' },
|
||||
{ min: 6, message: '密码长度不能少于6位' }
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认新密码"
|
||||
rules={[{ required: true, message: '请确认新密码' }]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" icon={<SaveOutlined />} block>
|
||||
确认修改
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "./src/.umi/tsconfig.json"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import 'umi/typings';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
$api: any;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue