feat: KVM虚拟化管理平台初始版本
This commit is contained in:
admin
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
Vendored
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
FROM node:20-alpine AS build
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# SPA 路由支持
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# API 代理
|
||||
location /api/ {
|
||||
proxy_pass http://backend:8004/api/;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_read_timeout 300s;
|
||||
}
|
||||
|
||||
# 健康检查
|
||||
location /health {
|
||||
proxy_pass http://backend:8004/health;
|
||||
}
|
||||
|
||||
# WebSocket (VNC)
|
||||
location /websockify {
|
||||
proxy_pass http://backend:8004/websockify;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
}
|
||||
}
|
||||
Generated
+1660
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"axios": "^1.15.2",
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.13.7",
|
||||
"vue": "^3.5.32",
|
||||
"vue-echarts": "^8.0.1",
|
||||
"vue-router": "^4.6.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"vite": "^8.0.10"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #0f1923;
|
||||
color: #e0e6ed;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2a3a4e;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #1a2633;
|
||||
--el-table-tr-bg-color: #1a2633;
|
||||
--el-table-header-bg-color: #1e2d3d;
|
||||
--el-table-row-hover-bg-color: #243447;
|
||||
--el-table-border-color: #2a3a4e;
|
||||
--el-table-text-color: #c0ccda;
|
||||
--el-table-header-text-color: #8aa4be;
|
||||
}
|
||||
|
||||
.el-card {
|
||||
--el-card-bg-color: #1a2633;
|
||||
--el-card-border-color: #2a3a4e;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
--el-dialog-bg-color: #1a2633;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: #8aa4be !important;
|
||||
}
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: #0f1923 !important;
|
||||
box-shadow: 0 0 0 1px #2a3a4e inset !important;
|
||||
}
|
||||
|
||||
.el-select .el-input__wrapper {
|
||||
background-color: #0f1923 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
// 响应拦截
|
||||
api.interceptors.response.use(
|
||||
(res) => res.data,
|
||||
(err) => {
|
||||
console.error('API Error:', err.response?.data?.detail || err.message)
|
||||
return Promise.reject(err)
|
||||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import viteLogo from '../assets/vite.svg'
|
||||
import heroImg from '../assets/hero.png'
|
||||
import vueLogo from '../assets/vue.svg'
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img :src="heroImg" class="base" width="170" height="179" alt="" />
|
||||
<img :src="vueLogo" class="framework" alt="Vue logo" />
|
||||
<img :src="viteLogo" class="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
|
||||
</div>
|
||||
<button type="button" class="counter" @click="count++">
|
||||
Count is {{ count }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" :src="viteLogo" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img class="button-icon" :src="vueLogo" alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg class="button-icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</template>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🖥️</span>
|
||||
<span v-show="!sidebarCollapsed" class="logo-text">KVM Manager</span>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="currentRoute"
|
||||
class="sidebar-menu"
|
||||
background-color="#0d1520"
|
||||
text-color="#7a8fa3"
|
||||
active-text-color="#409eff"
|
||||
:collapse="sidebarCollapsed"
|
||||
router
|
||||
>
|
||||
<el-menu-item index="/dashboard">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<template #title>仪表盘</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/vms">
|
||||
<el-icon><Coin /></el-icon>
|
||||
<template #title>虚拟机</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/storage">
|
||||
<el-icon><Files /></el-icon>
|
||||
<template #title>存储管理</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/network">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<template #title>网络管理</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="main-area">
|
||||
<!-- 顶栏 -->
|
||||
<div class="topbar">
|
||||
<div class="topbar-left">
|
||||
<el-button text @click="sidebarCollapsed = !sidebarCollapsed">
|
||||
<el-icon :size="20"><Fold v-if="!sidebarCollapsed" /><Expand v-else /></el-icon>
|
||||
</el-button>
|
||||
<span class="page-title">{{ currentTitle }}</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<span class="host-name">{{ hostInfo.hostname || '...' }}</span>
|
||||
<el-tag type="success" size="small" effect="dark">在线</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Monitor, Coin, Files, Connection, Fold, Expand } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
const route = useRoute()
|
||||
const sidebarCollapsed = ref(false)
|
||||
const hostInfo = ref({})
|
||||
|
||||
const currentRoute = computed(() => route.path)
|
||||
const currentTitle = computed(() => route.meta.title || '')
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
hostInfo.value = await api.get('/host')
|
||||
} catch (e) {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: #0f1923;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
background: #0d1520;
|
||||
border-right: 1px solid #1e2d3d;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: width 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid #1e2d3d;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #409eff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-menu:not(.el-menu--collapse) {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
height: 60px;
|
||||
background: #131d29;
|
||||
border-bottom: 1px solid #1e2d3d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #c0ccda;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.host-name {
|
||||
color: #7a8fa3;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册所有图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,52 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../layout/MainLayout.vue'),
|
||||
redirect: '/dashboard',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('../views/Dashboard.vue'),
|
||||
meta: { title: '仪表盘' },
|
||||
},
|
||||
{
|
||||
path: 'vms',
|
||||
name: 'VMList',
|
||||
component: () => import('../views/VMList.vue'),
|
||||
meta: { title: '虚拟机' },
|
||||
},
|
||||
{
|
||||
path: 'vm/:name',
|
||||
name: 'VMDetail',
|
||||
component: () => import('../views/VMDetail.vue'),
|
||||
meta: { title: '虚拟机详情' },
|
||||
},
|
||||
{
|
||||
path: 'storage',
|
||||
name: 'Storage',
|
||||
component: () => import('../views/Storage.vue'),
|
||||
meta: { title: '存储管理' },
|
||||
},
|
||||
{
|
||||
path: 'network',
|
||||
name: 'Network',
|
||||
component: () => import('../views/Network.vue'),
|
||||
meta: { title: '网络管理' },
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
router.beforeEach((to) => {
|
||||
document.title = `${to.meta.title || 'KVM'} - KVM管理平台`
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,296 @@
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- 统计卡片 -->
|
||||
<el-row :gutter="16" class="stat-row">
|
||||
<el-col :span="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon cpu">⚡</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ overview.cpu?.cores || '-' }} 核</div>
|
||||
<div class="stat-label">CPU 使用率 {{ overview.cpu?.usage_percent || 0 }}%</div>
|
||||
<el-progress :percentage="overview.cpu?.usage_percent || 0" :stroke-width="6" :color="cpuColor" :show-text="false" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon mem">💾</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ overview.memory?.total_mb?.toLocaleString() || '-' }} MB</div>
|
||||
<div class="stat-label">内存使用 {{ overview.memory?.usage_percent || 0 }}%</div>
|
||||
<el-progress :percentage="overview.memory?.usage_percent || 0" :stroke-width="6" :color="memColor" :show-text="false" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon vm-run">🟢</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ overview.vms?.running || 0 }}</div>
|
||||
<div class="stat-label">运行中虚拟机</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon vm-stop">🔴</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-value">{{ overview.vms?.stopped || 0 }}</div>
|
||||
<div class="stat-label">已关闭虚拟机</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 虚拟机概览 -->
|
||||
<el-row :gutter="16" style="margin-top: 16px;">
|
||||
<el-col :span="24">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<h3>虚拟机列表</h3>
|
||||
<el-button type="primary" size="small" @click="$router.push('/vms')">查看全部</el-button>
|
||||
</div>
|
||||
<el-table :data="vms" stripe style="width: 100%">
|
||||
<el-table-column prop="name" label="名称" min-width="140">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="$router.push(`/vm/${row.name}`)">{{ row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="stateType(row.state)" size="small" effect="dark">
|
||||
{{ stateLabel(row.state) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="vcpus" label="CPU" width="80" align="center" />
|
||||
<el-table-column label="内存" width="110" align="center">
|
||||
<template #default="{ row }">{{ row.memory_mb }} MB</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="磁盘" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<span v-for="d in row.disks" :key="d.dev" class="disk-info">
|
||||
{{ d.dev }} ({{ d.format }})
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button-group>
|
||||
<el-button v-if="row.state === 'shutoff'" type="success" size="small"
|
||||
@click="vmAction(row.name, 'start')">启动</el-button>
|
||||
<el-button v-if="row.state === 'running'" type="warning" size="small"
|
||||
@click="vmAction(row.name, 'stop')">关机</el-button>
|
||||
<el-button v-if="row.state === 'running'" type="danger" size="small"
|
||||
@click="vmAction(row.name, 'force_stop')">强制关</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 存储池概览 -->
|
||||
<el-row :gutter="16" style="margin-top: 16px;">
|
||||
<el-col :span="12">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<h3>存储池</h3>
|
||||
</div>
|
||||
<div v-for="pool in pools" :key="pool.name" class="pool-item">
|
||||
<div class="pool-name">{{ pool.name }}</div>
|
||||
<el-progress
|
||||
:percentage="pool.capacity_gb ? Math.round(pool.allocation_gb / pool.capacity_gb * 100) : 0"
|
||||
:stroke-width="10"
|
||||
:color="poolColor(pool)"
|
||||
>
|
||||
<span class="pool-text">{{ pool.allocation_gb }} / {{ pool.capacity_gb }} GB</span>
|
||||
</el-progress>
|
||||
</div>
|
||||
<el-empty v-if="pools.length === 0" description="暂无存储池" :image-size="60" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<h3>网络</h3>
|
||||
</div>
|
||||
<div v-for="net in networks" :key="net.name" class="net-item">
|
||||
<div class="net-row">
|
||||
<span class="net-name">{{ net.name }}</span>
|
||||
<el-tag :type="net.active ? 'success' : 'info'" size="small">{{ net.active ? '活跃' : '停用' }}</el-tag>
|
||||
</div>
|
||||
<div class="net-detail">
|
||||
模式: {{ net.mode }} | {{ net.address }}/{{ net.netmask }}
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="networks.length === 0" description="暂无网络" :image-size="60" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import api from '../api'
|
||||
|
||||
const overview = ref({})
|
||||
const vms = ref([])
|
||||
const pools = ref([])
|
||||
const networks = ref([])
|
||||
|
||||
const cpuColor = computed(() => {
|
||||
const p = overview.value.cpu?.usage_percent || 0
|
||||
if (p > 80) return '#f56c6c'
|
||||
if (p > 50) return '#e6a23c'
|
||||
return '#67c23a'
|
||||
})
|
||||
|
||||
const memColor = computed(() => {
|
||||
const p = overview.value.memory?.usage_percent || 0
|
||||
if (p > 80) return '#f56c6c'
|
||||
if (p > 50) return '#e6a23c'
|
||||
return '#67c23a'
|
||||
})
|
||||
|
||||
function stateType(s) {
|
||||
const map = { running: 'success', shutoff: 'info', paused: 'warning', crashed: 'danger' }
|
||||
return map[s] || 'info'
|
||||
}
|
||||
|
||||
function stateLabel(s) {
|
||||
const map = { running: '运行中', shutoff: '已关闭', paused: '已暂停', blocked: '阻塞', crashed: '崩溃' }
|
||||
return map[s] || s
|
||||
}
|
||||
|
||||
function poolColor(pool) {
|
||||
if (!pool.capacity_gb) return '#67c23a'
|
||||
const p = pool.allocation_gb / pool.capacity_gb
|
||||
if (p > 0.9) return '#f56c6c'
|
||||
if (p > 0.7) return '#e6a23c'
|
||||
return '#409eff'
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [o, v, p, n] = await Promise.all([
|
||||
api.get('/monitor/overview'),
|
||||
api.get('/vm/list'),
|
||||
api.get('/storage/pools'),
|
||||
api.get('/network/list'),
|
||||
])
|
||||
overview.value = o
|
||||
vms.value = v.vms || []
|
||||
pools.value = p.pools || []
|
||||
networks.value = n.networks || []
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
async function vmAction(name, action) {
|
||||
const labels = { start: '启动', stop: '关机', force_stop: '强制关机' }
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${labels[action]}虚拟机 ${name} 吗？`, '确认操作', {
|
||||
type: action === 'force_stop' ? 'warning' : 'info',
|
||||
})
|
||||
await api.post(`/vm/action/${name}`, { action })
|
||||
ElMessage.success(`${labels[action]}操作已发送`)
|
||||
setTimeout(loadData, 2000)
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
const timer = setInterval(loadData, 10000)
|
||||
// cleanup on unmount handled by vue
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-icon.cpu { background: rgba(64, 158, 255, 0.15); }
|
||||
.stat-icon.mem { background: rgba(103, 194, 58, 0.15); }
|
||||
.stat-icon.vm-run { background: rgba(103, 194, 58, 0.15); }
|
||||
.stat-icon.vm-stop { background: rgba(245, 108, 108, 0.15); }
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #e0e6ed;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #7a8fa3;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
color: #c0ccda;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.disk-info {
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.pool-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pool-name {
|
||||
color: #c0ccda;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pool-text {
|
||||
color: #7a8fa3;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.net-item {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #0f1923;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.net-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.net-name {
|
||||
color: #c0ccda;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.net-detail {
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="network-page">
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="showDialog = true">
|
||||
<el-icon><Plus /></el-icon> 创建网络
|
||||
</el-button>
|
||||
<el-button @click="loadData"><el-icon><Refresh /></el-icon> 刷新</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 网络列表 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12" v-for="net in networks" :key="net.name" style="margin-bottom: 16px;">
|
||||
<div class="net-card">
|
||||
<div class="net-header">
|
||||
<div>
|
||||
<h3>{{ net.name }}</h3>
|
||||
<span class="net-bridge">{{ net.bridge }}</span>
|
||||
</div>
|
||||
<div class="net-tags">
|
||||
<el-tag :type="net.active ? 'success' : 'info'" size="small">{{ net.active ? '活跃' : '停用' }}</el-tag>
|
||||
<el-tag type="warning" size="small">{{ net.mode }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="net-info">
|
||||
<div class="net-row">
|
||||
<span class="label">网关地址</span>
|
||||
<span class="value">{{ net.address }}</span>
|
||||
</div>
|
||||
<div class="net-row">
|
||||
<span class="label">子网掩码</span>
|
||||
<span class="value">{{ net.netmask }}</span>
|
||||
</div>
|
||||
<div class="net-row" v-if="net.dhcp">
|
||||
<span class="label">DHCP范围</span>
|
||||
<span class="value">{{ net.dhcp.start }} - {{ net.dhcp.end }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DHCP租约 -->
|
||||
<div v-if="net.leases?.length" class="leases">
|
||||
<h4>DHCP租约</h4>
|
||||
<div v-for="l in net.leases" :key="l.mac" class="lease-item">
|
||||
<span>{{ l.ip }}</span>
|
||||
<span class="mac">{{ l.mac }}</span>
|
||||
<span v-if="l.hostname" class="hostname">({{ l.hostname }})</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="net-actions">
|
||||
<el-button v-if="!net.active" size="small" type="success" @click="toggleNet(net.name, 'start')">启动</el-button>
|
||||
<el-button v-if="net.active" size="small" type="warning" @click="toggleNet(net.name, 'stop')">停止</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteNet(net.name)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 创建网络对话框 -->
|
||||
<el-dialog v-model="showDialog" title="创建网络" width="500px">
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模式">
|
||||
<el-select v-model="form.mode" @change="onModeChange">
|
||||
<el-option label="NAT" value="nat" />
|
||||
<el-option label="桥接" value="bridge" />
|
||||
<el-option label="隔离" value="isolated" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.mode !== 'bridge'" label="子网">
|
||||
<el-input v-model="form.subnet" placeholder="192.168.100.0/24" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.mode === 'bridge'" label="桥接网卡">
|
||||
<el-input v-model="form.bridge" placeholder="br0" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.mode === 'nat'" label="DHCP起始">
|
||||
<el-input v-model="form.dhcp_start" placeholder="可选" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.mode === 'nat'" label="DHCP结束">
|
||||
<el-input v-model="form.dhcp_end" placeholder="可选" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="createNet">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
const networks = ref([])
|
||||
const showDialog = ref(false)
|
||||
const form = ref({
|
||||
name: '',
|
||||
mode: 'nat',
|
||||
subnet: '192.168.100.0/24',
|
||||
bridge: '',
|
||||
dhcp_start: '',
|
||||
dhcp_end: '',
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const data = await api.get('/network/list')
|
||||
networks.value = data.networks || []
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function onModeChange() {}
|
||||
|
||||
async function createNet() {
|
||||
if (!form.value.name) {
|
||||
ElMessage.warning('请输入网络名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.post('/network/create', form.value)
|
||||
ElMessage.success('网络创建成功')
|
||||
showDialog.value = false
|
||||
form.value = { name: '', mode: 'nat', subnet: '192.168.100.0/24', bridge: '', dhcp_start: '', dhcp_end: '' }
|
||||
loadData()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleNet(name, action) {
|
||||
try {
|
||||
await api.post(`/network/action/${name}?action=${action}`)
|
||||
ElMessage.success('操作成功')
|
||||
setTimeout(loadData, 1000)
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteNet(name) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除网络 ${name} 吗？`, '确认', { type: 'error' })
|
||||
await api.delete(`/network/delete/${name}`)
|
||||
ElMessage.success('网络已删除')
|
||||
loadData()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.net-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.net-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.net-header h3 {
|
||||
color: #e0e6ed;
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.net-bridge {
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.net-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.net-info {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.net-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
.net-row .label {
|
||||
color: #7a8fa3;
|
||||
min-width: 70px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.net-row .value {
|
||||
color: #c0ccda;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.leases {
|
||||
background: #0f1923;
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.leases h4 {
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.lease-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 3px 0;
|
||||
color: #c0ccda;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mac {
|
||||
color: #7a8fa3;
|
||||
}
|
||||
|
||||
.hostname {
|
||||
color: #7a8fa3;
|
||||
}
|
||||
|
||||
.net-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="storage-page">
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="showPoolDialog = true">
|
||||
<el-icon><Plus /></el-icon> 创建存储池
|
||||
</el-button>
|
||||
<el-button @click="loadData"><el-icon><Refresh /></el-icon> 刷新</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 存储池卡片 -->
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12" v-for="pool in pools" :key="pool.name" style="margin-bottom: 16px;">
|
||||
<div class="pool-card">
|
||||
<div class="pool-header">
|
||||
<div>
|
||||
<h3>{{ pool.name }}</h3>
|
||||
<span class="pool-path">{{ pool.path }}</span>
|
||||
</div>
|
||||
<div class="pool-tags">
|
||||
<el-tag :type="pool.state === 'running' ? 'success' : 'info'" size="small">{{ pool.state }}</el-tag>
|
||||
<el-tag v-if="pool.autostart" type="success" size="small" effect="plain">自动启动</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pool-usage">
|
||||
<el-progress
|
||||
:percentage="pool.capacity_gb ? Math.round(pool.allocation_gb / pool.capacity_gb * 100) : 0"
|
||||
:stroke-width="14"
|
||||
:color="pool.capacity_gb && pool.allocation_gb / pool.capacity_gb > 0.85 ? '#f56c6c' : '#409eff'"
|
||||
>
|
||||
<span class="usage-text">{{ pool.allocation_gb }} / {{ pool.capacity_gb }} GB</span>
|
||||
</el-progress>
|
||||
</div>
|
||||
<div class="pool-actions">
|
||||
<el-button size="small" @click="viewVolumes(pool.name)">卷列表 ({{ pool.volume_count || 0 }})</el-button>
|
||||
<el-button size="small" @click="showVolDialog = true; currentPool = pool.name">创建卷</el-button>
|
||||
<el-button size="small" type="danger" @click="deletePool(pool.name)">删除池</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- ISO镜像 -->
|
||||
<div class="info-card" style="margin-top: 16px;">
|
||||
<h3>ISO 镜像</h3>
|
||||
<el-table :data="isos" size="small">
|
||||
<el-table-column prop="name" label="文件名" min-width="250" />
|
||||
<el-table-column prop="path" label="路径" min-width="300" show-overflow-tooltip />
|
||||
<el-table-column prop="size_gb" label="大小(GB)" width="100" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 创建存储池对话框 -->
|
||||
<el-dialog v-model="showPoolDialog" title="创建存储池" width="450px">
|
||||
<el-form :model="poolForm" label-width="90px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="poolForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路径">
|
||||
<el-input v-model="poolForm.path" placeholder="/var/lib/libvirt/images/newpool" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="poolForm.type">
|
||||
<el-option label="目录" value="dir" />
|
||||
<el-option label="文件系统" value="fs" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showPoolDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="createPool">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 创建卷对话框 -->
|
||||
<el-dialog v-model="showVolDialog" title="创建卷" width="450px">
|
||||
<el-form :model="volForm" label-width="90px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="volForm.name" placeholder="disk.qcow2" />
|
||||
</el-form-item>
|
||||
<el-form-item label="大小(GB)">
|
||||
<el-input-number v-model="volForm.capacity_gb" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="格式">
|
||||
<el-select v-model="volForm.format">
|
||||
<el-option label="qcow2" value="qcow2" />
|
||||
<el-option label="raw" value="raw" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showVolDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="createVol">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 卷列表对话框 -->
|
||||
<el-dialog v-model="showVolumesDialog" :title="`卷列表 - ${currentPool}`" width="700px">
|
||||
<el-table :data="volumes" size="small">
|
||||
<el-table-column prop="name" label="名称" min-width="200" />
|
||||
<el-table-column prop="path" label="路径" min-width="250" show-overflow-tooltip />
|
||||
<el-table-column label="容量" width="100" align="center">
|
||||
<template #default="{ row }">{{ row.capacity_gb }} GB</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已用" width="100" align="center">
|
||||
<template #default="{ row }">{{ row.allocation_gb }} GB</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="danger" @click="deleteVol(row.name)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
const pools = ref([])
|
||||
const isos = ref([])
|
||||
const volumes = ref([])
|
||||
const currentPool = ref('')
|
||||
const showPoolDialog = ref(false)
|
||||
const showVolDialog = ref(false)
|
||||
const showVolumesDialog = ref(false)
|
||||
|
||||
const poolForm = ref({ name: '', path: '', type: 'dir' })
|
||||
const volForm = ref({ name: '', capacity_gb: 20, format: 'qcow2' })
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const [p, i] = await Promise.all([
|
||||
api.get('/storage/pools'),
|
||||
api.get('/storage/isos'),
|
||||
])
|
||||
pools.value = p.pools || []
|
||||
isos.value = i.isos || []
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function viewVolumes(poolName) {
|
||||
currentPool.value = poolName
|
||||
try {
|
||||
const data = await api.get(`/storage/pool/${poolName}`)
|
||||
volumes.value = data.volumes || []
|
||||
showVolumesDialog.value = true
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function createPool() {
|
||||
try {
|
||||
await api.post('/storage/pool/create', poolForm.value)
|
||||
ElMessage.success('存储池创建成功')
|
||||
showPoolDialog.value = false
|
||||
poolForm.value = { name: '', path: '', type: 'dir' }
|
||||
loadData()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deletePool(name) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除存储池 ${name} 吗？`, '确认', { type: 'error' })
|
||||
await api.delete(`/storage/pool/${name}`)
|
||||
ElMessage.success('存储池已删除')
|
||||
loadData()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function createVol() {
|
||||
try {
|
||||
await api.post(`/storage/pool/${currentPool.value}/volume`, volForm.value)
|
||||
ElMessage.success('卷创建成功')
|
||||
showVolDialog.value = false
|
||||
volForm.value = { name: '', capacity_gb: 20, format: 'qcow2' }
|
||||
loadData()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteVol(volName) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除卷 ${volName} 吗？`, '确认', { type: 'error' })
|
||||
await api.delete(`/storage/pool/${currentPool.value}/volume/${volName}`)
|
||||
ElMessage.success('卷已删除')
|
||||
viewVolumes(currentPool.value)
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pool-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pool-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pool-header h3 {
|
||||
color: #e0e6ed;
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pool-path {
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pool-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pool-usage {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.usage-text {
|
||||
color: #c0ccda;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pool-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
color: #c0ccda;
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<div class="vm-detail" v-loading="loading">
|
||||
<!-- 顶部信息 -->
|
||||
<div class="detail-header">
|
||||
<div class="header-left">
|
||||
<el-button text @click="$router.push('/vms')">
|
||||
<el-icon><ArrowLeft /></el-icon> 返回列表
|
||||
</el-button>
|
||||
<h2>{{ vm.name }}</h2>
|
||||
<el-tag :type="stateType(vm.state)" size="large" effect="dark">
|
||||
{{ stateLabel(vm.state) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button v-if="vm.state === 'shutoff'" type="success" @click="doAction('start')">启动</el-button>
|
||||
<el-button v-if="vm.state === 'running'" type="warning" @click="doAction('stop')">关机</el-button>
|
||||
<el-button v-if="vm.state === 'running'" type="info" @click="doAction('pause')">暂停</el-button>
|
||||
<el-button v-if="vm.state === 'paused'" type="success" @click="doAction('resume')">恢复</el-button>
|
||||
<el-button v-if="vm.state === 'running'" type="danger" @click="doAction('force_stop')">强制关机</el-button>
|
||||
<el-button v-if="vm.state === 'running'" @click="doAction('restart')">重启</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<el-row :gutter="16" style="margin-top: 16px;">
|
||||
<el-col :span="12">
|
||||
<div class="info-card">
|
||||
<h3>基本信息</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><span class="label">UUID</span><span class="value">{{ vm.uuid }}</span></div>
|
||||
<div class="info-item"><span class="label">CPU</span><span class="value">{{ vm.vcpus }} 核 ({{ vm.cpu_mode }})</span></div>
|
||||
<div class="info-item"><span class="label">内存</span><span class="value">{{ formatMem(vm.memory_mb) }}</span></div>
|
||||
<div class="info-item"><span class="label">自动启动</span><span class="value">{{ vm.autostart ? '是' : '否' }}</span></div>
|
||||
<div class="info-item"><span class="label">VNC端口</span><span class="value">{{ vm.vnc_port > 0 ? vm.vnc_port : '未分配' }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-card">
|
||||
<h3>实时监控</h3>
|
||||
<div v-if="vm.state === 'running' && monitor.cpu_percent !== undefined" class="monitor-grid">
|
||||
<div class="monitor-item">
|
||||
<span class="label">CPU使用率</span>
|
||||
<el-progress type="dashboard" :percentage="monitor.cpu_percent" :width="80"
|
||||
:color="monitor.cpu_percent > 80 ? '#f56c6c' : monitor.cpu_percent > 50 ? '#e6a23c' : '#67c23a'" />
|
||||
</div>
|
||||
<div class="monitor-item">
|
||||
<span class="label">内存使用率</span>
|
||||
<el-progress type="dashboard" :percentage="monitor.memory?.usage_percent || 0" :width="80"
|
||||
:color="monitor.memory?.usage_percent > 80 ? '#f56c6c' : '#67c23a'" />
|
||||
<div class="monitor-detail">{{ monitor.memory?.rss_mb || 0 }} / {{ monitor.memory?.actual_mb || 0 }} MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="虚拟机未运行" :image-size="60" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 磁盘和网络 -->
|
||||
<el-row :gutter="16" style="margin-top: 16px;">
|
||||
<el-col :span="12">
|
||||
<div class="info-card">
|
||||
<h3>磁盘</h3>
|
||||
<el-table :data="vm.disks" size="small">
|
||||
<el-table-column prop="dev" label="设备" width="80" />
|
||||
<el-table-column prop="file" label="路径" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="format" label="格式" width="80" />
|
||||
<el-table-column prop="bus" label="总线" width="80" />
|
||||
</el-table>
|
||||
<div v-if="monitor.disk?.length" style="margin-top: 12px;">
|
||||
<h4 style="color: #7a8fa3; font-size: 13px; margin-bottom: 8px;">IO统计</h4>
|
||||
<div v-for="d in monitor.disk" :key="d.dev" class="io-item">
|
||||
<span class="io-label">{{ d.dev }}</span>
|
||||
<span>读: {{ formatBytes(d.read_bytes) }}</span>
|
||||
<span>写: {{ formatBytes(d.write_bytes) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="info-card">
|
||||
<h3>网络</h3>
|
||||
<el-table :data="vm.interfaces" size="small">
|
||||
<el-table-column prop="type" label="类型" width="80" />
|
||||
<el-table-column prop="network" label="网络/桥" min-width="120" />
|
||||
<el-table-column prop="mac" label="MAC地址" min-width="140" />
|
||||
<el-table-column label="IP" min-width="130">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.ip" type="success" size="small">{{ row.ip }}</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="monitor.network?.length" style="margin-top: 12px;">
|
||||
<h4 style="color: #7a8fa3; font-size: 13px; margin-bottom: 8px;">流量统计</h4>
|
||||
<div v-for="n in monitor.network" :key="n.dev" class="io-item">
|
||||
<span class="io-label">{{ n.dev }}</span>
|
||||
<span>↓ {{ formatBytes(n.rx_bytes) }}</span>
|
||||
<span>↑ {{ formatBytes(n.tx_bytes) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 快照 -->
|
||||
<div class="info-card" style="margin-top: 16px;">
|
||||
<div class="section-header">
|
||||
<h3>快照</h3>
|
||||
<el-button type="primary" size="small" @click="showSnapDialog = true">创建快照</el-button>
|
||||
</div>
|
||||
<el-table :data="snapshots" size="small" v-loading="snapLoading">
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column prop="state" label="状态" width="100" />
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">{{ formatTime(row.creation_time) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_current" type="success" size="small">✓</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="revertSnap(row.name)" :disabled="row.is_current">恢复</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteSnap(row.name)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 创建快照对话框 -->
|
||||
<el-dialog v-model="showSnapDialog" title="创建快照" width="400px">
|
||||
<el-form :model="snapForm" label-width="80px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="snapForm.name" placeholder="快照名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="snapForm.description" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showSnapDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="createSnap">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
const route = useRoute()
|
||||
const vmName = route.params.name
|
||||
const loading = ref(true)
|
||||
const vm = ref({})
|
||||
const monitor = ref({})
|
||||
const snapshots = ref([])
|
||||
const snapLoading = ref(false)
|
||||
const showSnapDialog = ref(false)
|
||||
const snapForm = ref({ name: '', description: '' })
|
||||
let timer = null
|
||||
|
||||
function stateType(s) {
|
||||
const map = { running: 'success', shutoff: 'info', paused: 'warning', crashed: 'danger' }
|
||||
return map[s] || 'info'
|
||||
}
|
||||
|
||||
function stateLabel(s) {
|
||||
const map = { running: '运行中', shutoff: '已关闭', paused: '已暂停', crashed: '崩溃' }
|
||||
return map[s] || s
|
||||
}
|
||||
|
||||
function formatMem(mb) {
|
||||
if (!mb) return '-'
|
||||
if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
|
||||
return mb + ' MB'
|
||||
}
|
||||
|
||||
function formatBytes(b) {
|
||||
if (!b) return '0 B'
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let i = 0
|
||||
while (b >= 1024 && i < units.length - 1) { b /= 1024; i++ }
|
||||
return b.toFixed(1) + ' ' + units[i]
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return '-'
|
||||
return new Date(ts * 1000).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
async function loadVM() {
|
||||
try {
|
||||
vm.value = await api.get(`/vm/detail/${vmName}`)
|
||||
} catch (e) {}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
async function loadMonitor() {
|
||||
try {
|
||||
monitor.value = await api.get(`/monitor/vm/${vmName}`)
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function loadSnapshots() {
|
||||
snapLoading.value = true
|
||||
try {
|
||||
const data = await api.get(`/snapshot/list/${vmName}`)
|
||||
snapshots.value = data.snapshots || []
|
||||
} catch (e) {}
|
||||
snapLoading.value = false
|
||||
}
|
||||
|
||||
async function doAction(action) {
|
||||
const labels = { start: '启动', stop: '关机', force_stop: '强制关机', pause: '暂停', resume: '恢复', restart: '重启' }
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${labels[action]}吗？`, '确认', { type: 'info' })
|
||||
await api.post(`/vm/action/${vmName}`, { action })
|
||||
ElMessage.success(`${labels[action]}操作已发送`)
|
||||
setTimeout(() => { loadVM(); loadMonitor() }, 2000)
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function createSnap() {
|
||||
if (!snapForm.value.name) {
|
||||
ElMessage.warning('请输入快照名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.post(`/snapshot/create/${vmName}`, snapForm.value)
|
||||
ElMessage.success('快照创建成功')
|
||||
showSnapDialog.value = false
|
||||
snapForm.value = { name: '', description: '' }
|
||||
loadSnapshots()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '创建失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function revertSnap(name) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定恢复到快照 ${name} 吗？虚拟机将重启。`, '确认', { type: 'warning' })
|
||||
await api.post(`/snapshot/revert/${vmName}/${name}`)
|
||||
ElMessage.success('快照已恢复')
|
||||
loadVM()
|
||||
loadSnapshots()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '恢复失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSnap(name) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除快照 ${name} 吗？`, '确认', { type: 'error' })
|
||||
await api.delete(`/snapshot/delete/${vmName}/${name}`)
|
||||
ElMessage.success('快照已删除')
|
||||
loadSnapshots()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadVM()
|
||||
loadMonitor()
|
||||
loadSnapshots()
|
||||
timer = setInterval(() => { loadVM(); loadMonitor() }, 5000)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-left h2 {
|
||||
color: #e0e6ed;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #1a2633;
|
||||
border: 1px solid #2a3a4e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
color: #c0ccda;
|
||||
font-size: 15px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #2a3a4e;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
color: #7a8fa3;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #c0ccda;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.monitor-grid {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.monitor-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.monitor-item .label {
|
||||
display: block;
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.monitor-detail {
|
||||
color: #7a8fa3;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.io-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 4px 0;
|
||||
color: #7a8fa3;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.io-label {
|
||||
color: #c0ccda;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="vm-list">
|
||||
<!-- 操作栏 -->
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="showCreateDialog = true">
|
||||
<el-icon><Plus /></el-icon> 创建虚拟机
|
||||
</el-button>
|
||||
<el-button @click="loadData">
|
||||
<el-icon><Refresh /></el-icon> 刷新
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 虚拟机列表 -->
|
||||
<el-table :data="vms" stripe style="width: 100%" v-loading="loading">
|
||||
<el-table-column type="expand">
|
||||
<template #default="{ row }">
|
||||
<div class="expand-content">
|
||||
<p><strong>UUID:</strong> {{ row.uuid }}</p>
|
||||
<p><strong>CPU模式:</strong> {{ row.cpu_mode }}</p>
|
||||
<p><strong>OS类型:</strong> {{ row.os_type }}</p>
|
||||
<p v-if="row.disks?.length">
|
||||
<strong>磁盘:</strong>
|
||||
<span v-for="d in row.disks" :key="d.dev" style="margin-right: 12px;">
|
||||
{{ d.dev }} - {{ d.file }} ({{ d.format }})
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="row.interfaces?.length">
|
||||
<strong>网络:</strong>
|
||||
<span v-for="i in row.interfaces" :key="i.mac || i.dev" style="margin-right: 12px;">
|
||||
{{ i.type }} {{ i.network }} {{ i.mac }}
|
||||
<el-tag v-if="i.ip" type="success" size="small">{{ i.ip }}</el-tag>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="$router.push(`/vm/${row.name}`)">{{ row.name }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="stateType(row.state)" size="small" effect="dark">
|
||||
{{ stateLabel(row.state) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="vcpus" label="CPU" width="80" align="center" />
|
||||
<el-table-column label="内存" width="110" align="center">
|
||||
<template #default="{ row }">{{ formatMem(row.memory_mb) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="自动启动" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.autostart ? 'success' : 'info'" size="small">
|
||||
{{ row.autostart ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="VNC" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.vnc_port > 0">{{ row.vnc_port }}</span>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="280" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button-group>
|
||||
<el-button v-if="row.state === 'shutoff'" type="success" size="small"
|
||||
@click="doAction(row.name, 'start')">启动</el-button>
|
||||
<el-button v-if="row.state === 'running'" type="warning" size="small"
|
||||
@click="doAction(row.name, 'stop')">关机</el-button>
|
||||
<el-button v-if="row.state === 'running'" type="info" size="small"
|
||||
@click="doAction(row.name, 'pause')">暂停</el-button>
|
||||
<el-button v-if="row.state === 'paused'" type="success" size="small"
|
||||
@click="doAction(row.name, 'resume')">恢复</el-button>
|
||||
<el-button v-if="row.state === 'running'" type="danger" size="small"
|
||||
@click="doAction(row.name, 'force_stop')">强制关</el-button>
|
||||
<el-button type="primary" size="small"
|
||||
@click="$router.push(`/vm/${row.name}`)">详情</el-button>
|
||||
<el-button type="danger" size="small"
|
||||
@click="deleteVM(row)">删除</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 创建虚拟机对话框 -->
|
||||
<el-dialog v-model="showCreateDialog" title="创建虚拟机" width="600px" :close-on-click-modal="false">
|
||||
<el-form :model="createForm" label-width="100px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="createForm.name" placeholder="虚拟机名称" />
|
||||
</el-form-item>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="CPU核心">
|
||||
<el-input-number v-model="createForm.vcpus" :min="1" :max="64" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="内存(MB)">
|
||||
<el-input-number v-model="createForm.memory_mb" :min="512" :step="512" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="磁盘大小">
|
||||
<el-input-number v-model="createForm.disk_gb" :min="5" :max="2000" />
|
||||
<span style="margin-left: 8px; color: #7a8fa3;">GB</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="存储池">
|
||||
<el-select v-model="createForm.pool_name">
|
||||
<el-option v-for="p in poolOptions" :key="p" :label="p" :value="p" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="网络">
|
||||
<el-select v-model="createForm.network">
|
||||
<el-option v-for="n in networkOptions" :key="n" :label="n" :value="n" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="ISO镜像">
|
||||
<el-select v-model="createForm.iso_path" clearable placeholder="可选，用于安装系统">
|
||||
<el-option v-for="iso in isoOptions" :key="iso.path" :label="`${iso.name} (${iso.size_gb}GB)`" :value="iso.path" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showCreateDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="createVM" :loading="creating">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import api from '../api'
|
||||
|
||||
const loading = ref(false)
|
||||
const creating = ref(false)
|
||||
const vms = ref([])
|
||||
const showCreateDialog = ref(false)
|
||||
const poolOptions = ref([])
|
||||
const networkOptions = ref([])
|
||||
const isoOptions = ref([])
|
||||
|
||||
const createForm = ref({
|
||||
name: '',
|
||||
vcpus: 2,
|
||||
memory_mb: 2048,
|
||||
disk_gb: 20,
|
||||
pool_name: 'default',
|
||||
network: 'default',
|
||||
iso_path: null,
|
||||
})
|
||||
|
||||
function stateType(s) {
|
||||
const map = { running: 'success', shutoff: 'info', paused: 'warning', crashed: 'danger' }
|
||||
return map[s] || 'info'
|
||||
}
|
||||
|
||||
function stateLabel(s) {
|
||||
const map = { running: '运行中', shutoff: '已关闭', paused: '已暂停', blocked: '阻塞', crashed: '崩溃' }
|
||||
return map[s] || s
|
||||
}
|
||||
|
||||
function formatMem(mb) {
|
||||
if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
|
||||
return mb + ' MB'
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.get('/vm/list')
|
||||
vms.value = data.vms || []
|
||||
} catch (e) {}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
async function loadOptions() {
|
||||
try {
|
||||
const [pools, nets, isos] = await Promise.all([
|
||||
api.get('/storage/pools'),
|
||||
api.get('/network/list'),
|
||||
api.get('/storage/isos'),
|
||||
])
|
||||
poolOptions.value = (pools.pools || []).map(p => p.name)
|
||||
networkOptions.value = (nets.networks || []).map(n => n.name)
|
||||
isoOptions.value = isos.isos || []
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function doAction(name, action) {
|
||||
const labels = { start: '启动', stop: '关机', force_stop: '强制关机', pause: '暂停', resume: '恢复' }
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要${labels[action]}虚拟机 ${name} 吗？`, '确认', { type: 'info' })
|
||||
await api.post(`/vm/action/${name}`, { action })
|
||||
ElMessage.success(`${labels[action]}操作已发送`)
|
||||
setTimeout(loadData, 2000)
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function createVM() {
|
||||
if (!createForm.value.name) {
|
||||
ElMessage.warning('请输入虚拟机名称')
|
||||
return
|
||||
}
|
||||
creating.value = true
|
||||
try {
|
||||
await api.post('/vm/create', createForm.value)
|
||||
ElMessage.success('虚拟机创建成功')
|
||||
showCreateDialog.value = false
|
||||
loadData()
|
||||
} catch (e) {
|
||||
ElMessage.error(e.response?.data?.detail || '创建失败')
|
||||
}
|
||||
creating.value = false
|
||||
}
|
||||
|
||||
async function deleteVM(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除虚拟机 ${row.name} 吗？此操作不可恢复！`,
|
||||
'危险操作',
|
||||
{ type: 'error', confirmButtonText: '确定删除', confirmButtonClass: 'el-button--danger' }
|
||||
)
|
||||
await api.delete(`/vm/delete/${row.name}`, { params: { force: row.state === 'running' } })
|
||||
ElMessage.success('虚拟机已删除')
|
||||
loadData()
|
||||
} catch (e) {
|
||||
if (e !== 'cancel') ElMessage.error(e.response?.data?.detail || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
loadOptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.expand-content {
|
||||
padding: 12px 20px;
|
||||
color: #7a8fa3;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.expand-content p {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.expand-content strong {
|
||||
color: #c0ccda;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8004',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user