虚拟机管理系统扩展：三步表单创建流程与深色科技美学设计

By 18842417140, 11 April, 2026

推理

用户想要扩展之前的虚拟机管理系统，添加创建虚拟机功能。这个功能需要页面跳转：从管理页面跳转到创建页面，完成创建后返回管理页面。

我需要设计一个创建虚拟机页面，包含网络、容量、规格选择，然后创建完成后返回管理页面。这实际上是一个多页面应用流。由于最终输出是单个HTML文件，我需要在一个文件中实现两个页面的切换（通过显示/隐藏），或者使用模拟页面跳转的JavaScript逻辑。

考虑到用户体验，我应该在管理页面中添加创建虚拟机的模态框或独立页面。既然用户明确提到“页面跳转”，我应该设计一个独立的创建页面，然后通过JavaScript模拟页面导航。

我需要先分析一下设计需求：这是一个技术管理后台，需要专业、清晰的设计。让我先获取设计系统推荐。设计系统推荐极简主义风格，使用Inter字体。但根据我的配置，我应该避免使用Inter这种普通字体，选择更有特色的字体。而且这是一个技术管理后台，可能需要更专业、更有科技感的字体。

我需要重新构思设计美学：这是一个云基础设施管理系统，应该采用深色主题，体现科技感、专业性和数据可视化。配色方案可以使用深蓝色系，搭配青色或绿色作为强调色。

让我获取一些相关资源图片。我需要一些云基础设施相关的图标或背景。这些图片资源不错，第一张云数据库插图很适合作为创建页面的背景或插图。

现在我需要实现两个页面：管理页面（之前已设计）和创建页面。我会在一个HTML文件中实现两个页面，通过JavaScript切换显示。

让我设计创建页面，包含以下元素：
1. 页面标题和返回按钮
2. 表单步骤：选择网络、选择容量、选择规格
3. 每个步骤的选项展示
4. 创建按钮和进度指示

考虑到这是一个技术性操作，我需要设计一个清晰、分步的表单流程。可以采用步骤指示器（stepper）来引导用户。

美学方向：延续之前管理页面的深色科技感设计，但创建页面可以更注重视觉引导和清晰的信息架构。

我需要选择字体：标题使用科技感强的字体如Rajdhani，正文字体使用清晰的可读字体如Source Sans Pro或Manrope。

配色：继续使用深蓝背景，青色作为主要强调色，绿色表示完成/成功，橙色表示警告。

现在开始构建HTML结构。我将在一个文件中包含两个"页面"，通过CSS类控制显示/隐藏。初始显示管理页面，点击"创建虚拟机"按钮跳转到创建页面。在创建页面，有"返回"按钮可以返回管理页面，创建成功后自动返回并刷新列表。

我需要在JavaScript中模拟页面切换和表单提交。

让我开始编写代码。首先，我需要扩展之前的管理页面，添加创建页面结构。我会保留之前的管理页面代码，然后在body末尾添加创建页面的HTML结构。

还需要更新之前的"创建虚拟机"按钮，使其触发页面跳转而不是alert。

现在开始编写。

角色

assistant

content

```json{
"summary": "扩展了虚拟机管理系统，添加了完整的创建虚拟机流程页面。采用三步表单设计（网络→容量→规格），包含步骤指示器、可视化选项卡片和实时配置预览。延续深色科技美学，添加了等距云服务器插图背景和交互动效，实现页面间平滑跳转。",
"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</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 --accent-orange: #f97316;\n --border-color: #475569;\n --step-active: #06b6d4;\n --step-completed: #10b981;\n --step-pending: #475569;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'Manrope', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n /* 页面容器 */\n .page {\n display: none;\n min-height: 100vh;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .page.active {\n display: block;\n opacity: 1;\n }\n /* 管理页面 */\n .app-container {\n display: flex;\n min-height: 100vh;\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 .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 .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 /* 创建页面 */\n .create-page {\n min-height: 100vh;\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\n position: relative;\n overflow: hidden;\n }\n .create-page::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('/assets/images/illustration/17.png') no-repeat center right -200px;\n background-size: 600px;\n opacity: 0.1;\n pointer-events: none;\n }\n .create-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n position: relative;\n z-index: 1;\n }\n .create-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 3rem;\n }\n .create-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 2.5rem;\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-back {\n background-color: var(--bg-secondary);\n color: var(--text-secondary);\n border: 1px solid var(--border-color);\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n font-family: 'Manrope', 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 }\n .btn-back:hover {\n background-color: var(--bg-card);\n color: var(--text-primary);\n border-color: var(--accent-cyan);\n }\n /* 步骤指示器 */\n .stepper {\n display: flex;\n justify-content: space-between;\n position: relative;\n margin-bottom: 4rem;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n }\n .stepper::before {\n content: '';\n position: absolute;\n top: 20px;\n left: 0;\n right: 0;\n height: 2px;\n background-color: var(--step-pending);\n z-index: 0;\n }\n .step {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n }\n .step-circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: var(--step-pending);\n color: var(--text-secondary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Rajdhani', sans-serif;\n font-weight: 600;\n font-size: 1.125rem;\n margin-bottom: 0.75rem;\n transition: all 0.3s ease;\n }\n .step.active .step-circle {\n background-color: var(--step-active);\n color: white;\n box-shadow: 0 0 0 8px rgba(6, 182, 212, 0.2);\n }\n .step.completed .step-circle {\n background-color: var(--step-completed);\n color: white;\n }\n .step-label {\n font-family: 'Rajdhani', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n color: var(--text-secondary);\n transition: all 0.3s ease;\n }\n .step.active .step-label {\n color: var(--accent-cyan);\n }\n .step.completed .step-label {\n color: var(--accent-green);\n }\n /* 表单步骤 */\n .step-content {\n display: none;\n animation: fadeIn 0.5s ease;\n }\n .step-content.active {\n display: block;\n }\n .form-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 1.5rem;\n text-align: center;\n }\n .form-description {\n color: var(--text-secondary);\n text-align: center;\n margin-bottom: 2.5rem;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.6;\n }\n /* 选项网格 */\n .options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n margin-bottom: 3rem;\n }\n .option-card {\n background-color: var(--bg-card);\n border: 2px solid var(--border-color);\n border-radius: 0.75rem;\n padding: 2rem;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n .option-card:hover {\n border-color: var(--accent-cyan);\n transform: translateY(-4px);\n box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2);\n }\n .option-card.selected {\n border-color: var(--accent-cyan);\n background-color: rgba(6, 182, 212, 0.1);\n }\n .option-icon {\n width: 60px;\n height: 60px;\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1.5rem;\n color: white;\n font-size: 1.5rem;\n }\n .option-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 0.5rem;\n }\n .option-description {\n color: var(--text-secondary);\n font-size: 0.95rem;\n line-height: 1.5;\n margin-bottom: 1rem;\n }\n .option-specs {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n color: var(--text-secondary);\n font-size: 0.9rem;\n }\n .spec-line {\n display: flex;\n justify-content: space-between;\n }\n .spec-value {\n color: var(--accent-cyan);\n font-weight: 600;\n }\n .option-price {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid var(--border-color);\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.25rem;\n font-weight: 700;\n color: var(--accent-green);\n text-align: right;\n }\n /* 表单导航 */\n .form-navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 3rem;\n padding-top: 2rem;\n border-top: 1px solid var(--border-color);\n }\n .btn-nav {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n padding: 0.75rem 2rem;\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 }\n .btn-nav:hover:not(:disabled) {\n background-color: var(--bg-card);\n border-color: var(--accent-cyan);\n }\n .btn-nav:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .btn-primary {\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));\n color: white;\n border: none;\n box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);\n }\n .btn-primary:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(6, 182, 212, 0.5);\n }\n /* 配置预览 */\n .config-preview {\n background-color: var(--bg-secondary);\n border-radius: 0.75rem;\n padding: 2rem;\n margin-top: 2rem;\n border: 1px solid var(--border-color);\n }\n .preview-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n margin-bottom: 1.5rem;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n }\n .preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 1.5rem;\n }\n .preview-item {\n background-color: rgba(30, 41, 59, 0.5);\n border-radius: 0.5rem;\n padding: 1rem;\n }\n .preview-label {\n color: var(--text-secondary);\n font-size: 0.875rem;\n margin-bottom: 0.25rem;\n }\n .preview-value {\n font-family: 'Source Code Pro', monospace;\n font-size: 1rem;\n font-weight: 600;\n color: var(--accent-cyan);\n }\n /* 成功状态 */\n .success-state {\n text-align: center;\n padding: 4rem 2rem;\n animation: fadeIn 0.5s ease;\n }\n .success-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, var(--accent-green), #22c55e);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 2rem;\n color: white;\n font-size: 2.5rem;\n }\n .success-title {\n font-family: 'Rajdhani', sans-serif;\n font-size: 2rem;\n font-weight: 700;\n color: var(--text-primary);\n margin-bottom: 1rem;\n }\n .success-message {\n color: var(--text-secondary);\n font-size: 1.125rem;\n margin-bottom: 2rem;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n line-height: 1.6;\n }\n /* 动画 */\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n .pulse { animation: pulse 2s infinite; }\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 .create-page::before { background-position: center right -300px; background-size: 500px; }\n }\n @media (max-width: 768px) {\n .options-grid { grid-template-columns: 1fr; }\n .stepper { flex-direction: column; gap: 2rem; align-items: flex-start; }\n .stepper::before { display: none; }\n .step { flex-direction: row; gap: 1rem; width: 100%; }\n .step-circle { margin-bottom: 0; }\n .form-navigation { flex-direction: column; gap: 1rem; }\n .btn-nav { width: 100%; justify-content: center; }\n .create-page::before { opacity: 0.05; background-size: 400px; }\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 .create-container { padding: 1.5rem; }\n }\n </style>\n</head>\n<body>\n \n <div id=\"management-page\" class=\"page active\">\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 id=\"create-vm-btn\" 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 </div>\n </div>\n </div>\n </div>\n\n \n <div id=\"create-page\" class=\"page create-page\">\n <div class=\"create-container\">\n <div class=\"create-header\">\n <h1 class=\"create-title\">创建虚拟机实例</h1>\n <button id=\"back-to-management\" class=\"btn-back\">\n <i class=\"fas fa-arrow-left\"></i>\n 返回管理页面\n </button>\n </div>\n \n \n <div class=\"stepper\">\n <div class=\"step active\" data-step=\"1\">\n <div class=\"step-circle\">1</div>\n <div class=\"step-label\">选择网络</div>\n </div>\n <div class=\"step\" data-step=\"2\">\n <div class=\"step-circle\">2</div>\n <div class=\"step-label\">选择容量</div>\n </div>\n <div class=\"step\" data-step=\"3\">\n <div class=\"step-circle\">3</div>\n <div class=\"step-label\">选择规格</div>\n </div>\n </div>\n \n \n <div id=\"step-1\" class=\"step-content active\">\n <h2 class=\"form-title\">选择网络配置</h2>\n <p class=\"form-description\">为您的虚拟机选择合适的网络环境和连接方式。网络配置将影响虚拟机的访问速度和安全性。</p>\n \n <div class=\"options-grid\">\n <div class=\"option-card\" data-option=\"network-basic\">\n <div class=\"option-icon\">\n <i class=\"fas fa-wifi\"></i>\n </div>\n <h3 class=\"option-title\">基础网络</h3>\n <p class=\"option-description\">标准共享网络，适合开发测试环境。提供基本的网络连接和互联网访问。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>带宽:</span>\n <span class=\"spec-value\">100 Mbps</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\">20-40ms</span>\n </div>\n <div class=\"spec-line\">\n <span>安全性:</span>\n <span class=\"spec-value\">基础</span>\n </div>\n </div>\n <div class=\"option-price\">免费</div>\n </div>\n \n <div class=\"option-card\" data-option=\"network-premium\">\n <div class=\"option-icon\">\n <i class=\"fas fa-bolt\"></i>\n </div>\n <h3 class=\"option-title\">高级网络</h3>\n <p class=\"option-description\">专用带宽网络，适合生产环境。提供更高的网络性能和稳定性保障。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>带宽:</span>\n <span class=\"spec-value\">1 Gbps</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\"><10ms</span>\n </div>\n <div class=\"spec-line\">\n <span>安全性:</span>\n <span class=\"spec-value\">增强</span>\n </div>\n </div>\n <div class=\"option-price\">¥120/月</div>\n </div>\n \n <div class=\"option-card\" data-option=\"network-vpc\">\n <div class=\"option-icon\">\n <i class=\"fas fa-shield-alt\"></i>\n </div>\n <h3 class=\"option-title\">私有网络(VPC)</h3>\n <p class=\"option-description\">完全隔离的私有网络环境，适合企业级应用。提供最高级别的安全控制。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>带宽:</span>\n <span class=\"spec-value\">10 Gbps</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\"><5ms</span>\n </div>\n <div class=\"spec-line\">\n <span>安全性:</span>\n <span class=\"spec-value\">最高</span>\n </div>\n </div>\n <div class=\"option-price\">¥350/月</div>\n </div>\n </div>\n \n <div class=\"form-navigation\">\n <button class=\"btn-nav\" disabled>\n <i class=\"fas fa-arrow-left\"></i>\n 上一步\n </button>\n <button id=\"next-step-1\" class=\"btn-nav btn-primary\">\n 下一步：选择容量\n <i class=\"fas fa-arrow-right\"></i>\n </button>\n </div>\n </div>\n \n \n <div id=\"step-2\" class=\"step-content\">\n <h2 class=\"form-title\">选择存储容量</h2>\n <p class=\"form-description\">选择适合您应用的存储容量和类型。存储配置将影响虚拟机的数据存储能力和性能。</p>\n \n <div class=\"options-grid\">\n <div class=\"option-card\" data-option=\"storage-basic\">\n <div class=\"option-icon\">\n <i class=\"fas fa-hdd\"></i>\n </div>\n <h3 class=\"option-title\">标准硬盘</h3>\n <p class=\"option-description\">经济高效的机械硬盘存储，适合不频繁访问的数据和备份存储。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>IOPS:</span>\n <span class=\"spec-value\">100-500</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\">10-20ms</span>\n </div>\n <div class=\"spec-line\">\n <span>可靠性:</span>\n <span class=\"spec-value\">99.9%</span>\n </div>\n </div>\n <div class=\"option-price\">¥0.8/GB/月</div>\n </div>\n \n <div class=\"option-card\" data-option=\"storage-ssd\">\n <div class=\"option-icon\">\n <i class=\"fas fa-bolt\"></i>\n </div>\n <h3 class=\"option-title\">固态硬盘(SSD)</h3>\n <p class=\"option-description\">高性能固态存储，适合数据库、缓存和需要快速读写的应用。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>IOPS:</span>\n <span class=\"spec-value\">3000-10000</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\"><1ms</span>\n </div>\n <div class=\"spec-line\">\n <span>可靠性:</span>\n <span class=\"spec-value\">99.99%</span>\n </div>\n </div>\n <div class=\"option-price\">¥2.5/GB/月</div>\n </div>\n \n <div class=\"option-card\" data-option=\"storage-nvme\">\n <div class=\"option-icon\">\n <i class=\"fas fa-rocket\"></i>\n </div>\n <h3 class=\"option-title\">NVMe超高速</h3>\n <p class=\"option-description\">顶级性能的NVMe存储，适合高频交易、实时分析和关键业务应用。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>IOPS:</span>\n <span class=\"spec-value\">50000+</span>\n </div>\n <div class=\"spec-line\">\n <span>延迟:</span>\n <span class=\"spec-value\"><0.1ms</span>\n </div>\n <div class=\"spec-line\">\n <span>可靠性:</span>\n <span class=\"spec-value\">99.999%</span>\n </div>\n </div>\n <div class=\"option-price\">¥8/GB/月</div>\n </div>\n </div>\n \n \n <div class=\"config-preview\">\n <h3 class=\"preview-title\">\n <i class=\"fas fa-sd-card\"></i>\n 存储容量选择\n </h3>\n <div style=\"margin-bottom: 2rem;\">\n <div style=\"display: flex; justify-content: space-between; margin-bottom: 0.5rem;\">\n <span style=\"color: var(--text-secondary);\">存储容量: <span id=\"storage-value\">100</span> GB</span>\n <span style=\"color: var(--accent-cyan); font-weight: 600;\" id=\"storage-price\">¥80/月</span>\n </div>\n <input type=\"range\" id=\"storage-slider\" min=\"20\" max=\"2000\" value=\"100\" step=\"10\" style=\"width: 100%; height: 8px; border-radius: 4px; background: var(--border-color); outline: none; -webkit-appearance: none;\" />\n <div style=\"display: flex; justify-content: space-between; margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.875rem;\">\n <span>20 GB</span>\n <span>500 GB</span>\n <span>1000 GB</span>\n <span>2000 GB</span>\n </div>\n </div>\n </div>\n \n <div class=\"form-navigation\">\n <button id=\"prev-step-2\" class=\"btn-nav\">\n <i class=\"fas fa-arrow-left\"></i>\n 上一步：选择网络\n </button>\n <button id=\"next-step-2\" class=\"btn-nav btn-primary\">\n 下一步：选择规格\n <i class=\"fas fa-arrow-right\"></i>\n </button>\n </div>\n </div>\n \n \n <div id=\"step-3\" class=\"step-content\">\n <h2 class=\"form-title\">选择虚拟机规格</h2>\n <p class=\"form-description\">选择适合您工作负载的虚拟机配置。不同的规格提供不同的计算性能和内存容量。</p>\n \n <div class=\"options-grid\">\n <div class=\"option-card\" data-option=\"spec-small\">\n <div class=\"option-icon\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n <h3 class=\"option-title\">微型实例</h3>\n <p class=\"option-description\">适合轻量级应用、开发和测试环境，提供基础的计算能力。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>vCPU:</span>\n <span class=\"spec-value\">1 核心</span>\n </div>\n <div class=\"spec-line\">\n <span>内存:</span>\n <span class=\"spec-value\">2 GB</span>\n </div>\n <div class=\"spec-line\">\n <span>网络性能:</span>\n <span class=\"spec-value\">低</span>\n </div>\n <div class=\"spec-line\">\n <span>适合:</span>\n <span class=\"spec-value\">测试/开发</span>\n </div>\n </div>\n <div class=\"option-price\">¥120/月</div>\n </div>\n \n <div class=\"option-card\" data-option=\"spec-medium\">\n <div class=\"option-icon\">\n <i class=\"fas fa-server\"></i>\n </div>\n <h3 class=\"option-title\">标准实例</h3>\n <p class=\"option-description\">平衡的计算和内存配置，适合大多数生产应用和Web服务器。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>vCPU:</span>\n <span class=\"spec-value\">4 核心</span>\n </div>\n <div class=\"spec-line\">\n <span>内存:</span>\n <span class=\"spec-value\">8 GB</span>\n </div>\n <div class=\"spec-line\">\n <span>网络性能:</span>\n <span class=\"spec-value\">中</span>\n </div>\n <div class=\"spec-line\">\n <span>适合:</span>\n <span class=\"spec-value\">Web应用</span>\n </div>\n </div>\n <div class=\"option-price\">¥320/月</div>\n </div>\n \n <div class=\"option-card\" data-option=\"spec-large\">\n <div class=\"option-icon\">\n <i class=\"fas fa-robot\"></i>\n </div>\n <h3 class=\"option-title\">大型实例</h3>\n <p class=\"option-description\">高性能配置，适合数据库服务器、缓存服务和计算密集型应用。</p>\n <div class=\"option-specs\">\n <div class=\"spec-line\">\n <span>vCPU:</span>\n <span class=\"spec-value\">8 核心</span>\n </div>\n <div class=\"spec-line\">\n <span>内存:</span>\n <span class=\"spec-value\">16 GB</span>\n </div>\n <div class=\"spec-line\">\n <span>网络性能:</span>\n <span class=\"spec-value\">高</span>\n </div>\n <div class=\"spec-line\">\n <span>适合:</span>\n <span class=\"spec-value\">数据库/缓存</span>\n </div>\n </div>\n <div class=\"option-price\">¥680/月</div>\n </div>\n </div>\n \n \n <div class=\"config-preview\">\n <h3 class=\"preview-title\">\n <i class=\"fas fa-clipboard-check\"></i>\n 配置摘要\n </h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <div class=\"preview-label\">网络配置</div>\n <div id=\"preview-network\" class=\"preview-value\">未选择</div>\n </div>\n <div class=\"preview-item\">\n <div class=\"preview-label\">存储类型</div>\n <div id=\"preview-storage-type\" class=\"preview-value\">未选择</div>\n </div>\n <div class=\"preview-item\">\n <div class=\"preview-label\">存储容量</div>\n <div id=\"preview-storage-size\" class=\"preview-value\">未选择</div>\n </div>\n <div class=\"preview-item\">\n <div class=\"preview-label\">虚拟机规格</div>\n <div id=\"preview-spec\" class=\"preview-value\">未选择</div>\n </div>\n <div class=\"preview-item\">\n <div class=\"preview-label\">预计月费用</div>\n <div id=\"preview-cost\" class=\"preview-value\" style=\"color: var(--accent-green);\">¥0/月</div>\n </div>\n <div class=\"preview-item\">\n <div class=\"preview-label\">部署区域</div>\n <div class=\"preview-value\">亚太区域</div>\n </div>\n </div>\n </div>\n \n <div class=\"form-navigation\">\n <button id=\"prev-step-3\" class=\"btn-nav\">\n <i class=\"fas fa-arrow-left\"></i>\n 上一步：选择容量\n </button>\n <button id=\"create-vm-final\" class=\"btn-nav btn-primary\">\n <i class=\"fas fa-check-circle\"></i>\n 创建虚拟机\n </button>\n </div>\n </div>\n \n \n <div id=\"success-state\" class=\"step-content success-state\">\n <div class=\"success-icon\">\n <i class=\"fas fa-check\"></i>\n </div>\n <h2 class=\"success-title\">虚拟机创建成功！</h2>\n <p class=\"success-message\">您的虚拟机 <strong id=\"created-vm-name\">web-app-01</strong> 正在部署中，预计将在 2-3 分钟内完成配置并启动。</p>\n <p class=\"success-message\">您可以在虚拟机管理页面查看部署进度和状态。</p>\n <button id=\"back-to-management-success\" class=\"btn-nav btn-primary\" style=\"margin-top: 2rem;\">\n <i class=\"fas fa-arrow-left\"></i>\n 返回管理页面\n </button>\n </div>\n </div>\n </div>\n\n <script>\n // 页面切换逻辑\n const managementPage = document.getElementById('management-page');\n const createPage = document.getElementById('create-page');\n const createVmBtn = document.getElementById('create-vm-btn');\n const backToManagementBtn = document.getElementById('back-to-management');\n const backToManagementSuccessBtn = document.getElementById('back-to-management-success');\n \n // 切换到创建页面\n createVmBtn.addEventListener('click', () => {\n managementPage.classList.remove('active');\n createPage.classList.add('active');\n resetCreateForm();\n });\n \n // 返回管理页面\n backToManagementBtn.addEventListener('click', () => {\n createPage.classList.remove('active');\n managementPage.classList.add('active');\n });\n \n backToManagementSuccessBtn.addEventListener('click', () => {\n createPage.classList.remove('active');\n managementPage.classList.add('active');\n // 模拟添加新虚拟机到列表\n simulateNewVMAdded();\n });\n \n // 重置创建表单\n function resetCreateForm() {\n // 重置步骤\n goToStep(1);\n \n // 清除所有选择\n document.querySelectorAll('.option-card').forEach(card => {\n card.classList.remove('selected');\n });\n \n // 重置滑块\n document.getElementById('storage-slider').value = 100;\n updateStorageValue();\n \n // 重置预览\n updatePreview();\n \n // 隐藏成功状态\n document.getElementById('success-state').classList.remove('active');\n }\n \n // 步骤管理\n const steps = document.querySelectorAll('.step');\n const stepContents = document.querySelectorAll('.step-content');\n let currentStep = 1;\n \n function goToStep(stepNumber) {\n // 更新步骤指示器\n steps.forEach(step => {\n const stepNum = parseInt(step.dataset.step);\n step.classList.remove('active', 'completed');\n if (stepNum < stepNumber) {\n step.classList.add('completed');\n } else if (stepNum === stepNumber) {\n step.classList.add('active');\n }\n });\n \n // 更新步骤内容\n stepContents.forEach(content => {\n content.classList.remove('active');\n });\n document.getElementById(`step-${stepNumber}`).classList.add('active');\n \n currentStep = stepNumber;\n }\n \n // 步骤导航按钮\n document.getElementById('next-step-1').addEventListener('click', () => {\n // 检查是否已选择网络\n const selectedNetwork = document.querySelector('#step-1 .option-card.selected');\n if (!selectedNetwork) {\n alert('请选择一个网络配置');\n return;\n }\n goToStep(2);\n updatePreview();\n });\n \n document.getElementById('prev-step-2').addEventListener('click', () => {\n goToStep(1);\n });\n \n document.getElementById('next-step-2').addEventListener('click', () => {\n // 检查是否已选择存储\n const selectedStorage = document.querySelector('#step-2 .option-card.selected');\n if (!selectedStorage) {\n alert('请选择一个存储类型');\n return;\n }\n goToStep(3);\n updatePreview();\n });\n \n document.getElementById('prev-step-3').addEventListener('click', () => {\n goToStep(2);\n });\n \n // 选项选择\n document.querySelectorAll('.option-card').forEach(card => {\n card.addEventListener('click', function() {\n // 清除同组其他选项的选择状态\n const parentStep = this.closest('.step-content');\n parentStep.querySelectorAll('.option-card').forEach(c => {\n c.classList.remove('selected');\n });\n \n // 选择当前选项\n this.classList.add('selected');\n updatePreview();\n });\n });\n \n // 存储容量滑块\n const storageSlider = document.getElementById('storage-slider');\n storageSlider.addEventListener('input', updateStorageValue);\n \n function updateStorageValue() {\n const value = storageSlider.value;\n document.getElementById('storage-value').textContent = value;\n \n // 计算价格（根据选择的存储类型）\n const selectedStorage = document.querySelector('#step-2 .option-card.selected');\n let pricePerGB = 0.8; // 默认标准硬盘价格\n \n if (selectedStorage) {\n const storageType = selectedStorage.dataset.option;\n if (storageType === 'storage-ssd') pricePerGB = 2.5;\n if (storageType === 'storage-nvme') pricePerGB = 8;\n }\n \n const monthlyCost = Math.round(value * pricePerGB);\n document.getElementById('storage-price').textContent = `¥${monthlyCost}/月`;\n \n updatePreview();\n }\n \n // 更新配置预览\n function updatePreview() {\n // 网络配置\n const selectedNetworkCard = document.querySelector('#step-1 .option-card.selected');\n const networkPreview = document.getElementById('preview-network');\n if (selectedNetworkCard) {\n const networkTitle = selectedNetworkCard.querySelector('.option-title').textContent;\n networkPreview.textContent = networkTitle;\n } else {\n networkPreview.textContent = '未选择';\n }\n \n // 存储类型\n const selectedStorageCard = document.querySelector('#step-2 .option-card.selected');\n const storageTypePreview = document.getElementById('preview-storage-type');\n if (selectedStorageCard) {\n const storageTitle = selectedStorageCard.querySelector('.option-title').textContent;\n storageTypePreview.textContent = storageTitle;\n } else {\n storageTypePreview.textContent = '未选择';\n }\n \n // 存储容量\n const storageSizePreview = document.getElementById('preview-storage-size');\n storageSizePreview.textContent = `${storageSlider.value} GB`;\n \n // 规格\n const selectedSpecCard = document.querySelector('#step-3 .option-card.selected');\n const specPreview = document.getElementById('preview-spec');\n if (selectedSpecCard) {\n const specTitle = selectedSpecCard.querySelector('.option-title').textContent;\n specPreview.textContent = specTitle;\n } else {\n specPreview.textContent = '未选择';\n }\n \n // 计算总费用\n const costPreview = document.getElementById('preview-cost');\n let totalCost = 0;\n \n // 网络费用\n if (selectedNetworkCard) {\n const networkPrice = selectedNetworkCard.querySelector('.option-price').textContent;\n if (networkPrice === '免费') {\n totalCost += 0;\n } else {\n const networkCost = parseInt(networkPrice.replace(/[^0-9]/g, ''));\n totalCost += networkCost;\n }\n }\n \n // 存储费用\n const selectedStorage = document.querySelector('#step-2 .option-card.selected');\n if (selectedStorage) {\n const storageType = selectedStorage.dataset.option;\n let pricePerGB = 0.8;\n if (storageType === 'storage-ssd') pricePerGB = 2.5;\n if (storageType === 'storage-nvme') pricePerGB = 8;\n \n const storageSize = parseInt(storageSlider.value);\n totalCost += Math.round(storageSize * pricePerGB);\n }\n \n // 规格费用\n if (selectedSpecCard) {\n const specPrice = selectedSpecCard.querySelector('.option-price').textContent;\n const specCost = parseInt(specPrice.replace(/[^0-9]/g, ''));\n totalCost += specCost;\n }\n \n costPreview.textContent = `¥${totalCost}/月`;\n }\n \n // 创建虚拟机\n document.getElementById('create-vm-final').addEventListener('click', function() {\n // 验证所有选项已选择\n const selectedNetwork = document.querySelector('#step-1 .option-card.selected');\n const selectedStorage = document.querySelector('#step-2 .option-card.selected');\n const selectedSpec = document.querySelector('#step-3 .option-card.selected');\n \n if (!selectedNetwork || !selectedStorage || !selectedSpec) {\n alert('请完成所有配置选项');\n return;\n }\n \n // 生成虚拟机名称\n const networkName = selectedNetwork.querySelector('.option-title').textContent.substring(0, 3);\n const specName = selectedSpec.querySelector('.option-title').textContent.substring(0, 3);\n const randomNum = Math.floor(Math.random() * 90) + 10;\n const vmName = `${networkName}-${specName}-${randomNum}`.toLowerCase();\n \n document.getElementById('created-vm-name').textContent = vmName;\n \n // 显示成功状态\n document.getElementById('step-3').classList.remove('active');\n document.getElementById('success-state').classList.add('active');\n \n // 更新步骤指示器为完成状态\n steps.forEach(step => {\n step.classList.remove('active');\n step.classList.add('completed');\n });\n });\n \n // 模拟添加新虚拟机到管理页面\n function simulateNewVMAdded() {\n // 在实际应用中，这里会调用API获取更新后的虚拟机列表\n // 这里我们只是显示一个提示\n alert('虚拟机创建成功！新虚拟机已添加到列表中。');\n \n // 在实际应用中，可以刷新虚拟机列表或动态添加新卡片\n // 例如：\n // const vmGrid = document.querySelector('.vm-grid');\n // const newVMCard = createVMCardElement(vmName, 'pending');\n // vmGrid.insertBefore(newVMCard, vmGrid.firstChild);\n }\n \n // 树节点点击交互（管理页面）\n document.querySelectorAll('.tree-node-content').forEach(node => {\n node.addEventListener('click', function(e) {\n document.querySelectorAll('.tree-node-content').forEach(n => n.classList.remove('active'));\n this.classList.add('active');\n console.log('选中节点:', this.textContent.trim());\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 updateStorageValue();\n updatePreview();\n </script>\n</body>\n</html>"
},
"next": ["添加价格计算器", "支持多区域部署", "模板保存功能", "批量创建选项", "实时资源监控"],
"breakpoint": "none"
}
```

total_tokens

26146

summary

扩展了虚拟机管理系统，添加了完整的创建虚拟机流程页面。采用三步表单设计（网络→容量→规格），包含步骤指示器、可视化选项卡片和实时配置预览。延续深色科技美学，添加了等距云服务器插图背景和交互动效，实现页面间平滑跳转。

uiParsing

关闭