现代化深色主题虚拟机管理系统界面设计

By 18842417140, 11 April, 2026

推理

用户想要一个虚拟机管理系统的前端页面。页面布局：左侧1/3是树结构的三层服务树，右侧是各个服务下的虚拟机实例，以及针对每个虚拟机的相关操作（如运行状态、关机、开机、删除等）。页面右上角有一个创建虚拟机的按钮。

我需要作为资深前端开发和高级UI/UX设计师来设计这个页面。首先，我需要理解使用场景：这是一个虚拟机管理系统，目标用户可能是系统管理员或运维人员。他们需要管理虚拟机实例，监控状态，执行操作。基调：考虑到这是一个管理系统，需要清晰、直观、专业，但也要有现代感。我可以选择"极简主义"或"工业/实用风"，但也要有科技感。也许"现代化SaaS仪表板"风格比较合适。

接下来，我需要使用get_design_system工具获取设计系统推荐。产品类型是"SaaS dashboard"或"cloud management"，关键词可以是"虚拟机管理"、"cloud infrastructure"。我会使用查询："cloud infrastructure management dashboard"。然后，根据返回的设计建议，结合我的美学判断进行后续开发。

在内部思考阶段，我需要完成需求分析、设计系统获取、设计决策、资产调用、代码组装和约束校验。

现在，调用get_design_system工具。返回的设计系统推荐有些通用，只推荐了Minimalism风格，字体是Inter。但我需要更具体的设计。考虑到这是一个管理系统，我可以选择更科技感、更专业的风格。也许可以尝试"Cyberpunk"或"Futuristic"风格，但也要保持实用性。不过，用户可能更倾向于清晰、直观的界面。

让我重新思考一下设计方向。这个系统需要树形结构展示服务，右侧显示虚拟机实例。树形结构需要清晰可辨，虚拟机实例需要展示状态和操作按钮。整体布局要充分利用空间。

我可以考虑使用深色主题，因为深色主题在监控类系统中很受欢迎，能减少眼睛疲劳，突出显示内容。但也要提供良好的对比度。

现在，我需要获取一些资产，比如服务器、虚拟机相关的图标。但首先，我需要决定是否使用图片。也许可以使用Font Awesome图标来代表服务器、虚拟机等。

根据配置，我需要使用get_assets工具获取公司内部图片资产。但我不确定需要什么图片。也许可以搜索"server rack"或"cloud infrastructure"来获取背景图。不过，这个管理系统可能不需要太多装饰性图片，更注重功能性。

我可以先设计布局，如果需要图片再获取。

现在，开始设计决策：

1. 美学方向：现代化科技感，深色主题，清晰的信息层级。
2. 布局：使用Flexbox，左侧固定宽度（33.333%），右侧自适应。树形结构使用缩进表示层级。
3. 字体：避免使用Inter，因为配置中说要避免普通字体。我可以选择一款科技感强的字体，比如"Rajdhani"或"Orbitron"作为标题字体，正文字体选择"Source Code Pro"或"Roboto Mono"以体现代码/技术感。但也要确保可读性。
4. 配色方案：深蓝色为主色调，搭配青色或绿色作为点缀色，用于状态指示。使用CSS变量保持一致性。
5. 动效：树形节点的展开/收起动画，虚拟机状态变化的平滑过渡。
6. 交互状态：按钮的hover、active状态，虚拟机卡片的状态标识。

现在，我需要调用get_assets工具。搜索"server cloud technology dark background"。这张图片是等距风格的云数据库插图，可能适合作为背景或装饰。但考虑到这是一个管理界面，可能不需要太花哨的背景。我可以将其用作右上角的装饰性元素，或者作为空状态时的插图。

现在，开始编写代码。我需要构建完整的HTML结构，引入TailwindCSS，添加自定义CSS和Google Fonts。

首先，选择字体：标题字体选择"Rajdhani"，正文字体选择"Source Code Pro"。这两款字体都是Google Fonts上的。

配色方案：深色背景（#0f172a），侧边栏稍浅（#1e293b），卡片背景（#334155）。点缀色：青色（#06b6d4）用于运行状态，绿色（#10b981）用于成功，红色（#ef4444）用于停止/错误。

树形结构：使用嵌套的ul/li元素，通过缩进表示层级。每个节点前加图标（Font Awesome）。

虚拟机实例：卡片式布局，每个卡片显示虚拟机名称、状态、资源配置（CPU、内存、存储），以及操作按钮（开机、关机、删除等）。状态用彩色标签表示。

创建虚拟机按钮：右上角，使用主色调。

响应式设计：在移动端，侧边栏可能变为全宽，通过滑动或折叠菜单实现。但用户没有指定breakpoint，所以默认不是移动端。不过，我还是会确保响应式。

现在，编写代码。

我需要确保不泄露任何机密信息，不输出思考过程。最终输出必须是JSON格式，包含summary、widget、next和breakpoint。

breakpoint参数：用户没有指定，所以用"none"。

接下来，生成完整的HTML代码。我会在<style>标签中定义CSS变量和自定义样式。

开始编写。现在，生成最终输出。

角色

assistant

content

```json{
"summary": "设计了一个现代化深色主题的虚拟机管理系统界面，左侧采用三层树形结构展示服务层级，右侧以卡片形式展示虚拟机实例及操作按钮。整体采用科技感字体（Rajdhani/Source Code Pro）和蓝青色配色方案，包含平滑的交互动效和响应式布局。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>虚拟机管理系统 | Cloud Infrastructure Dashboard</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&…\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-primary: #0f172a;\n --bg-secondary: #1e293b;\n --bg-card: #334155;\n --bg-sidebar: #1e293b;\n --text-primary: #f1f5f9;\n --text-secondary: #cbd5e1;\n --accent-cyan: #06b6d4;\n --accent-green: #10b981;\n --accent-red: #ef4444;\n --accent-purple: #8b5cf6;\n --border-color: #475569;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'Source Code Pro', monospace;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n .app-container {\n display: flex;\n min-height: 100vh;\n }\n /* 侧边栏 - 服务树 */\n .sidebar {\n width: 33.333%;\n background-color: var(--bg-sidebar);\n border-right: 1px solid var(--border-color);\n padding: 1.5rem;\n overflow-y: auto;\n transition: all 0.3s ease;\n }\n .sidebar-header {\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--accent-cyan);\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n .tree {\n list-style: none;\n }\n .tree-node {\n margin-bottom: 0.25rem;\n position: relative;\n }\n .tree-node-content {\n padding: 0.75rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n transition: all 0.2s ease;\n color: var(--text-secondary);\n }\n .tree-node-content:hover {\n background-color: rgba(30, 41, 59, 0.7);\n color: var(--text-primary);\n }\n .tree-node-content.active {\n background-color: var(--bg-card);\n color: var(--accent-cyan);\n border-left: 3px solid var(--accent-cyan);\n }\n .tree-node-icon {\n color: var(--accent-purple);\n width: 1.25rem;\n text-align: center;\n }\n .tree-children {\n list-style: none;\n padding-left: 2rem;\n margin-top: 0.25rem;\n border-left: 1px dashed var(--border-color);\n margin-left: 0.5rem;\n }\n /* 主内容区 */\n .main-content {\n flex: 1;\n padding: 1.5rem;\n overflow-y: auto;\n }\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2rem;\n }\n .header-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 2rem;\n font-weight: 700;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .btn-create {\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n font-family: 'Rajdhani', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: all 0.3s ease;\n box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);\n }\n .btn-create:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(6, 182, 212, 0.5);\n }\n /* 虚拟机网格 */\n .vm-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n }\n .vm-card {\n background-color: var(--bg-card);\n border-radius: 0.75rem;\n padding: 1.5rem;\n border: 1px solid var(--border-color);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .vm-card:hover {\n border-color: var(--accent-cyan);\n box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2);\n transform: translateY(-4px);\n }\n .vm-card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 1rem;\n }\n .vm-name {\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n }\n .vm-status {\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n .status-running { background-color: rgba(16, 185, 129, 0.2); color: var(--accent-green); }\n .status-stopped { background-color: rgba(239, 68, 68, 0.2); color: var(--accent-red); }\n .status-pending { background-color: rgba(251, 191, 36, 0.2); color: #fbbf24; }\n .vm-specs {\n display: flex;\n gap: 1rem;\n margin-bottom: 1.5rem;\n color: var(--text-secondary);\n font-size: 0.9rem;\n }\n .spec-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n .vm-actions {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n .btn-action {\n flex: 1;\n min-width: 80px;\n background-color: rgba(30, 41, 59, 0.7);\n border: 1px solid var(--border-color);\n color: var(--text-secondary);\n padding: 0.5rem 0.75rem;\n border-radius: 0.375rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n transition: all 0.2s ease;\n }\n .btn-action:hover {\n background-color: var(--bg-sidebar);\n color: var(--text-primary);\n }\n .btn-start:hover { border-color: var(--accent-green); color: var(--accent-green); }\n .btn-stop:hover { border-color: var(--accent-red); color: var(--accent-red); }\n .btn-delete:hover { border-color: var(--accent-purple); color: var(--accent-purple); }\n /* 空状态 */\n .empty-state {\n text-align: center;\n padding: 3rem 1rem;\n color: var(--text-secondary);\n }\n /* 响应式 */\n @media (max-width: 1024px) {\n .app-container { flex-direction: column; }\n .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); max-height: 40vh; }\n }\n @media (max-width: 640px) {\n .vm-grid { grid-template-columns: 1fr; }\n .header { flex-direction: column; align-items: flex-start; gap: 1rem; }\n .btn-create { align-self: stretch; justify-content: center; }\n }\n /* 动画 */\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .pulse { animation: pulse 2s infinite; }\n .fade-in { animation: fadeIn 0.5s ease; }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n </style>\n</head>\n<body>\n <div class=\"app-container\">\n \n <div class=\"sidebar\">\n <div class=\"sidebar-header\">\n <i class=\"fas fa-sitemap\"></i>\n <span>服务架构树</span>\n </div>\n <ul class=\"tree\">\n \n <li class=\"tree-node\">\n <div class=\"tree-node-content active\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-globe-americas\"></i></span>\n <span>亚太区域 (ap-east-1)</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--accent-cyan);\">3 服务</span>\n </div>\n <ul class=\"tree-children\">\n \n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-server\"></i></span>\n <span>Web 服务集群</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--text-secondary);\">5 实例</span>\n </div>\n <ul class=\"tree-children\">\n \n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-code\"></i></span>\n <span>API Gateway</span>\n </div>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-database\"></i></span>\n <span>User Service</span>\n </div>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-shopping-cart\"></i></span>\n <span>Order Service</span>\n </div>\n </li>\n </ul>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-database\"></i></span>\n <span>数据库集群</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--text-secondary);\">2 实例</span>\n </div>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-cube\"></i></span>\n <span>缓存服务</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--text-secondary);\">1 实例</span>\n </div>\n </li>\n </ul>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-globe-europe\"></i></span>\n <span>欧洲区域 (eu-west-1)</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--text-secondary);\">2 服务</span>\n </div>\n </li>\n <li class=\"tree-node\">\n <div class=\"tree-node-content\">\n <span class=\"tree-node-icon\"><i class=\"fas fa-globe-asia\"></i></span>\n <span>北美区域 (us-east-1)</span>\n <span style=\"margin-left: auto; font-size: 0.875rem; color: var(--text-secondary);\">4 服务</span>\n </div>\n </li>\n </ul>\n </div>\n \n \n <div class=\"main-content\">\n <div class=\"header\">\n <h1 class=\"header-title\">虚拟机实例管理</h1>\n <button class=\"btn-create\">\n <i class=\"fas fa-plus-circle\"></i>\n 创建虚拟机\n </button>\n </div>\n \n <div class=\"vm-grid\">\n \n <div class=\"vm-card fade-in\">\n <div class=\"vm-card-header\">\n <h3 class=\"vm-name\">web-api-01</h3>\n <span class=\"vm-status status-running\">运行中</span>\n </div>\n <div class=\"vm-specs\">\n <div class=\"spec-item\">\n <i class=\"fas fa-microchip\"></i>\n <span>4 vCPU</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-memory\"></i>\n <span>8 GB</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-hdd\"></i>\n <span>100 GB</span>\n </div>\n </div>\n <div class=\"vm-actions\">\n <button class=\"btn-action btn-stop\">\n <i class=\"fas fa-power-off\"></i>\n 关机\n </button>\n <button class=\"btn-action\">\n <i class=\"fas fa-redo\"></i>\n 重启\n </button>\n <button class=\"btn-action btn-delete\">\n <i class=\"fas fa-trash\"></i>\n 删除\n </button>\n </div>\n </div>\n \n \n <div class=\"vm-card fade-in\" style=\"animation-delay: 0.1s;\">\n <div class=\"vm-card-header\">\n <h3 class=\"vm-name\">db-master-01</h3>\n <span class=\"vm-status status-running\">运行中</span>\n </div>\n <div class=\"vm-specs\">\n <div class=\"spec-item\">\n <i class=\"fas fa-microchip\"></i>\n <span>8 vCPU</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-memory\"></i>\n <span>16 GB</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-hdd\"></i>\n <span>500 GB</span>\n </div>\n </div>\n <div class=\"vm-actions\">\n <button class=\"btn-action btn-stop\">\n <i class=\"fas fa-power-off\"></i>\n 关机\n </button>\n <button class=\"btn-action\">\n <i class=\"fas fa-redo\"></i>\n 重启\n </button>\n <button class=\"btn-action btn-delete\">\n <i class=\"fas fa-trash\"></i>\n 删除\n </button>\n </div>\n </div>\n \n \n <div class=\"vm-card fade-in\" style=\"animation-delay: 0.2s;\">\n <div class=\"vm-card-header\">\n <h3 class=\"vm-name\">cache-redis-01</h3>\n <span class=\"vm-status status-stopped\">已停止</span>\n </div>\n <div class=\"vm-specs\">\n <div class=\"spec-item\">\n <i class=\"fas fa-microchip\"></i>\n <span>2 vCPU</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-memory\"></i>\n <span>4 GB</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-hdd\"></i>\n <span>50 GB</span>\n </div>\n </div>\n <div class=\"vm-actions\">\n <button class=\"btn-action btn-start\">\n <i class=\"fas fa-play\"></i>\n 开机\n </button>\n <button class=\"btn-action\">\n <i class=\"fas fa-redo\"></i>\n 重启\n </button>\n <button class=\"btn-action btn-delete\">\n <i class=\"fas fa-trash\"></i>\n 删除\n </button>\n </div>\n </div>\n \n \n <div class=\"vm-card fade-in\" style=\"animation-delay: 0.3s;\">\n <div class=\"vm-card-header\">\n <h3 class=\"vm-name\">worker-01</h3>\n <span class=\"vm-status status-pending\">部署中</span>\n </div>\n <div class=\"vm-specs\">\n <div class=\"spec-item\">\n <i class=\"fas fa-microchip\"></i>\n <span>4 vCPU</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-memory\"></i>\n <span>8 GB</span>\n </div>\n <div class=\"spec-item\">\n <i class=\"fas fa-hdd\"></i>\n <span>100 GB</span>\n </div>\n </div>\n <div class=\"vm-actions\">\n <button class=\"btn-action btn-stop\" disabled>\n <i class=\"fas fa-power-off\"></i>\n 关机\n </button>\n <button class=\"btn-action\" disabled>\n <i class=\"fas fa-redo\"></i>\n 重启\n </button>\n <button class=\"btn-action btn-delete\">\n <i class=\"fas fa-trash\"></i>\n 删除\n </button>\n </div>\n </div>\n </div>\n \n \n \n </div>\n </div>\n \n <script>\n // 树节点点击交互\n document.querySelectorAll('.tree-node-content').forEach(node => {\n node.addEventListener('click', function(e) {\n // 移除其他节点的active类\n document.querySelectorAll('.tree-node-content').forEach(n => n.classList.remove('active'));\n // 为当前节点添加active类\n this.classList.add('active');\n // 可以在这里触发加载对应服务下的虚拟机实例\n console.log('选中节点:', this.textContent.trim());\n });\n });\n \n // 创建虚拟机按钮\n document.querySelector('.btn-create').addEventListener('click', function() {\n alert('打开创建虚拟机对话框');\n // 在实际应用中，这里会打开一个模态框或跳转到创建页面\n });\n \n // 虚拟机操作按钮\n document.querySelectorAll('.btn-action').forEach(btn => {\n btn.addEventListener('click', function() {\n const vmName = this.closest('.vm-card').querySelector('.vm-name').textContent;\n const action = this.textContent.trim();\n console.log(`对虚拟机 ${vmName} 执行操作: ${action}`);\n // 在实际应用中，这里会调用API执行相应操作\n });\n });\n \n // 禁用按钮的点击事件处理\n document.querySelectorAll('.btn-action[disabled]').forEach(btn => {\n btn.addEventListener('click', function(e) {\n e.preventDefault();\n e.stopPropagation();\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["添加虚拟机筛选器", "实时状态监控", "批量操作功能", "资源使用图表", "多主题切换"],
"breakpoint": "none"
}
```

total_tokens

11464

summary

设计了一个现代化深色主题的虚拟机管理系统界面，左侧采用三层树形结构展示服务层级，右侧以卡片形式展示虚拟机实例及操作按钮。整体采用科技感字体（Rajdhani/Source Code Pro）和蓝青色配色方案，包含平滑的交互动效和响应式布局。

uiParsing

关闭