feat: KVM虚拟化管理平台初始版本
This commit is contained in:
admin
@@ -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>
|
||||
Reference in New Issue
Block a user