├── .gitattributes
├── screenshots
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    └── 4.jpg
├── LICENSE
├── README.md
└── index.html.tpl


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html.tpl linguist-language=HTML
2 | 


--------------------------------------------------------------------------------
/screenshots/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hanxi/pve-touch/HEAD/screenshots/1.jpg


--------------------------------------------------------------------------------
/screenshots/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hanxi/pve-touch/HEAD/screenshots/2.jpg


--------------------------------------------------------------------------------
/screenshots/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hanxi/pve-touch/HEAD/screenshots/3.jpg


--------------------------------------------------------------------------------
/screenshots/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hanxi/pve-touch/HEAD/screenshots/4.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 PVE Touch
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # PVE Touch - Proxmox VE 移动端管理界面
  2 | 
  3 | 一个专为移动设备优化的 Proxmox Virtual Environment (PVE) 管理界面，提供简洁友好的触控体验。
  4 | 
  5 | ## ✨ 特性
  6 | 
  7 | - 📱 **移动优先设计** - 专为触摸屏设备优化的响应式界面
  8 | - 🎨 **现代化 UI** - 基于 Tailwind CSS 和 DaisyUI 的精美界面
  9 | - ⚡ **轻量快速** - 使用 Vue 3 构建，性能出色
 10 | - 🔐 **安全认证** - 支持 PAM 和 PVE 认证域
 11 | - 📊 **实时监控** - CPU、内存、磁盘和网络 I/O 实时监控
 12 | - ⚙️ **硬件管理** - 添加、编辑和删除虚拟机硬件配置
 13 | - 🔄 **虚拟机控制** - 启动、停止、重启虚拟机
 14 | 
 15 | ## 📸 界面预览
 16 | 
 17 | <div align="center">
 18 | 
 19 | <table>
 20 |   <tr>
 21 |     <td align="center">
 22 |       <img src="screenshots/1.jpg" width="400" alt="登录界面"><br/>
 23 |       <b>登录界面</b>
 24 |     </td>
 25 |     <td align="center">
 26 |       <img src="screenshots/2.jpg" width="400" alt="虚拟机列表"><br/>
 27 |       <b>虚拟机列表</b>
 28 |     </td>
 29 |   </tr>
 30 |   <tr>
 31 |     <td align="center">
 32 |       <img src="screenshots/3.jpg" width="400" alt="实时监控"><br/>
 33 |       <b>实时监控</b>
 34 |     </td>
 35 |     <td align="center">
 36 |       <img src="screenshots/4.jpg" width="400" alt="硬件配置"><br/>
 37 |       <b>硬件配置</b>
 38 |     </td>
 39 |   </tr>
 40 | </table>
 41 | 
 42 | </div>
 43 | 
 44 | ## 🚀 功能
 45 | 
 46 | ### 虚拟机管理
 47 | - 查看虚拟机列表及状态
 48 | - 启动/停止/重启虚拟机
 49 | - 查看虚拟机详细信息
 50 | 
 51 | ### 实时监控
 52 | - CPU 使用率监控
 53 | - 内存使用情况
 54 | - 磁盘 I/O 统计
 55 | - 网络流量监控
 56 | - 自动刷新（5秒间隔）
 57 | 
 58 | ### 硬件配置
 59 | - 处理器配置（核心数、插槽数、CPU 类型）
 60 | - 内存配置
 61 | - 磁盘管理
 62 | - 网络设备管理
 63 | - USB 设备直通
 64 | - PCI 设备直通
 65 | 
 66 | ## 📦 安装
 67 | 
 68 | 1. 将 `index.html.tpl` 文件上传到 PVE 服务器
 69 | 
 70 | 2. 替换 PVE 的默认移动端页面：
 71 | ```bash
 72 | # 备份原文件
 73 | cp /usr/share/pve-manager/touch/index.html.tpl /usr/share/pve-manager/touch/index.html.tpl.backup
 74 | 
 75 | # 复制新文件
 76 | cp index.html.tpl /usr/share/pve-manager/touch/index.html.tpl
 77 | ```
 78 | 
 79 | 3. 刷新浏览器即可看到新界面（无需重启服务）
 80 | 
 81 | ## 🔧 使用方法
 82 | 
 83 | 1. 使用移动设备浏览器访问你的 PVE 服务器地址
 84 | 2. 使用 PVE 账号登录（支持 Linux PAM 和 Proxmox VE 认证域）
 85 | 3. 选择需要管理的虚拟机
 86 | 4. 进行监控或配置管理操作
 87 | 
 88 | ## 🛠️ 技术栈
 89 | 
 90 | - **Vue 3** - 渐进式 JavaScript 框架
 91 | - **Tailwind CSS** - 实用优先的 CSS 框架
 92 | - **DaisyUI** - Tailwind CSS 组件库
 93 | - **Proxmox VE API** - PVE REST API
 94 | 
 95 | ## 📋 系统要求
 96 | 
 97 | - Proxmox VE 7.0 或更高版本
 98 | - 现代浏览器（支持 ES6+）
 99 | - 移动设备或支持触控的设备（推荐）
100 | 
101 | ## ⚠️ 注意事项
102 | 
103 | - 本项目仅替换移动端界面，不影响桌面端管理界面
104 | - 确保在操作前备份原始文件
105 | - 某些高级功能可能需要管理员权限
106 | - USB 和 PCI 设备直通需要在 PVE 主机上正确配置硬件
107 | 
108 | ## 🔄 恢复原始界面
109 | 
110 | 如需恢复 PVE 原始移动端界面：
111 | 
112 | ```bash
113 | # 恢复备份文件
114 | cp /usr/share/pve-manager/touch/index.html.tpl.backup /usr/share/pve-manager/touch/index.html.tpl
115 | ```
116 | 
117 | 然后刷新浏览器即可
118 | 
119 | ## 🤝 贡献
120 | 
121 | 欢迎提交 Issue 和 Pull Request！
122 | 
123 | ## 📄 许可证
124 | 
125 | 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
126 | 
127 | ## 🙏 致谢
128 | 
129 | - [Proxmox VE](https://www.proxmox.com/) - 虚拟化管理平台
130 | - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
131 | - [Tailwind CSS](https://tailwindcss.com/) - CSS 框架
132 | - [DaisyUI](https://daisyui.com/) - Tailwind 组件库
133 | 
134 | ## 📧 联系方式
135 | 
136 | 如有问题或建议，欢迎通过 Issue 反馈。
137 | 


--------------------------------------------------------------------------------
/index.html.tpl:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <meta charset="UTF-8">
   5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   6 |     <title>[% nodename %] - Proxmox Virtual Environment</title>
   7 |     
   8 |     <link rel="icon" sizes="128x128" href="/pve2/images/logo-128.png" />
   9 |     <link rel="apple-touch-icon" sizes="128x128" href="/pve2/images/logo-128.png" />
  10 |     
  11 |     <!-- Tailwind CSS + DaisyUI -->
  12 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
  13 |     <script src="https://cdn.tailwindcss.com"></script>
  14 |     
  15 |     <!-- Vue 3 -->
  16 |     <script src="https://unpkg.com/vue@3.3.13/dist/vue.global.prod.js"></script>
  17 |     
  18 |     <style>
  19 |         [v-cloak] { display: none; }
  20 |         
  21 |         body {
  22 |             margin: 0;
  23 |             padding: 0;
  24 |             font-family: system-ui, -apple-system, sans-serif;
  25 |             -webkit-font-smoothing: antialiased;
  26 |             -webkit-tap-highlight-color: transparent;
  27 |         }
  28 |         
  29 |         .gradient-bg {
  30 |             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  31 |         }
  32 |         
  33 |         .vm-card {
  34 |             transition: transform 0.2s, box-shadow 0.2s;
  35 |         }
  36 |         
  37 |         .vm-card:active {
  38 |             transform: scale(0.98);
  39 |         }
  40 |         
  41 |         .safe-area-top {
  42 |             padding-top: env(safe-area-inset-top);
  43 |         }
  44 |         
  45 |         .safe-area-bottom {
  46 |             padding-bottom: env(safe-area-inset-bottom);
  47 |         }
  48 |         
  49 |         .loading-spinner {
  50 |             border: 3px solid rgba(255, 255, 255, 0.3);
  51 |             border-radius: 50%;
  52 |             border-top: 3px solid white;
  53 |             width: 40px;
  54 |             height: 40px;
  55 |             animation: spin 1s linear infinite;
  56 |         }
  57 |         
  58 |         @keyframes spin {
  59 |             0% { transform: rotate(0deg); }
  60 |             100% { transform: rotate(360deg); }
  61 |         }
  62 |         
  63 |         .progress-bar {
  64 |             transition: width 0.3s ease;
  65 |         }
  66 |     </style>
  67 | </head>
  68 | <body>
  69 |     <div id="app" v-cloak>
  70 |         <!-- Toast Notifications -->
  71 |         <div v-if="toast.show" class="toast toast-top toast-center z-[100]">
  72 |             <div class="alert" :class="toast.type === 'error' ? 'alert-error' : 'alert-success'">
  73 |                 <span>{{ toast.message }}</span>
  74 |             </div>
  75 |         </div>
  76 | 
  77 |         <!-- Login View -->
  78 |         <div v-if="currentView === 'login'" class="min-h-screen gradient-bg flex items-center justify-center p-4">
  79 |             <div class="card w-full max-w-md bg-base-100 shadow-2xl">
  80 |                 <div class="card-body">
  81 |                     <h2 class="card-title text-2xl font-bold text-center justify-center mb-4">
  82 |                         Proxmox VE
  83 |                     </h2>
  84 |                     <p class="text-center text-gray-600 mb-6">[% nodename %]</p>
  85 |                     
  86 |                     <form @submit.prevent="login">
  87 |                         <div class="form-control">
  88 |                             <label class="label">
  89 |                                 <span class="label-text">用户名</span>
  90 |                             </label>
  91 |                             <input 
  92 |                                 v-model="loginForm.username" 
  93 |                                 type="text" 
  94 |                                 placeholder="用户名" 
  95 |                                 class="input input-bordered" 
  96 |                                 required
  97 |                                 :disabled="loginForm.loading"
  98 |                             />
  99 |                         </div>
 100 |                         
 101 |                         <div class="form-control mt-4">
 102 |                             <label class="label">
 103 |                                 <span class="label-text">密码</span>
 104 |                             </label>
 105 |                             <input 
 106 |                                 v-model="loginForm.password" 
 107 |                                 type="password" 
 108 |                                 placeholder="密码" 
 109 |                                 class="input input-bordered" 
 110 |                                 required
 111 |                                 :disabled="loginForm.loading"
 112 |                             />
 113 |                         </div>
 114 |                         
 115 |                         <div class="form-control mt-4">
 116 |                             <label class="label">
 117 |                                 <span class="label-text">认证域</span>
 118 |                             </label>
 119 |                             <select 
 120 |                                 v-model="loginForm.realm" 
 121 |                                 class="select select-bordered"
 122 |                                 :disabled="loginForm.loading"
 123 |                             >
 124 |                                 <option value="pam">Linux PAM</option>
 125 |                                 <option value="pve">Proxmox VE</option>
 126 |                             </select>
 127 |                         </div>
 128 |                         
 129 |                         <div v-if="loginForm.error" class="alert alert-error mt-4">
 130 |                             <span>{{ loginForm.error }}</span>
 131 |                         </div>
 132 |                         
 133 |                         <div class="form-control mt-6">
 134 |                             <button 
 135 |                                 type="submit" 
 136 |                                 class="btn btn-primary" 
 137 |                                 :disabled="loginForm.loading"
 138 |                             >
 139 |                                 <span v-if="loginForm.loading" class="loading loading-spinner"></span>
 140 |                                 <span v-else>登录</span>
 141 |                             </button>
 142 |                         </div>
 143 |                     </form>
 144 |                 </div>
 145 |             </div>
 146 |         </div>
 147 | 
 148 |         <!-- Main App View -->
 149 |         <div v-else class="min-h-screen bg-base-200">
 150 |             <!-- Top Navigation -->
 151 |             <div class="navbar bg-primary text-primary-content safe-area-top sticky top-0 z-50 shadow-lg">
 152 |                 <div class="flex-1">
 153 |                     <a class="btn btn-ghost text-xl">{{ nodename }}</a>
 154 |                 </div>
 155 |                 <div class="flex-none">
 156 |                     <div class="dropdown dropdown-end">
 157 |                         <label tabindex="0" class="btn btn-ghost btn-circle">
 158 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 159 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
 160 |                             </svg>
 161 |                         </label>
 162 |                         <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-base-content">
 163 |                             <li><a>{{ username }}</a></li>
 164 |                             <li><a @click="logout">退出登录</a></li>
 165 |                         </ul>
 166 |                     </div>
 167 |                 </div>
 168 |             </div>
 169 | 
 170 |             <!-- Content Area -->
 171 |             <div class="container mx-auto p-4 pb-20 safe-area-bottom">
 172 |                 <!-- VMs List -->
 173 |                 <div v-show="currentPage === 'list'">
 174 |                     <div class="flex justify-between items-center mb-4">
 175 |                         <h2 class="text-2xl font-bold">虚拟机列表</h2>
 176 |                         <button @click="fetchVMs" class="btn btn-circle btn-ghost">
 177 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 178 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
 179 |                             </svg>
 180 |                         </button>
 181 |                     </div>
 182 | 
 183 |                     <div v-if="loading.vms" class="flex justify-center py-12">
 184 |                         <span class="loading loading-spinner loading-lg"></span>
 185 |                     </div>
 186 | 
 187 |                     <div v-else-if="vms.length === 0" class="text-center py-12">
 188 |                         <p class="text-gray-500">未找到虚拟机</p>
 189 |                     </div>
 190 | 
 191 |                     <div v-else class="grid gap-4">
 192 |                         <div 
 193 |                             v-for="vm in vms" 
 194 |                             :key="vm.vmid" 
 195 |                             class="card bg-base-100 shadow-xl vm-card"
 196 |                         >
 197 |                             <div class="card-body">
 198 |                                 <div class="flex justify-between items-start mb-2">
 199 |                                     <div class="flex-1">
 200 |                                         <h3 class="card-title">{{ vm.name }}</h3>
 201 |                                         <p class="text-sm text-gray-500">VMID: {{ vm.vmid }}</p>
 202 |                                     </div>
 203 |                                     <div class="badge" :class="vm.status === 'running' ? 'badge-success' : 'badge-error'">
 204 |                                         {{ vm.status === 'running' ? '运行中' : '已停止' }}
 205 |                                     </div>
 206 |                                 </div>
 207 | 
 208 |                                 <div class="card-actions justify-end mt-4 gap-2">
 209 |                                     <button 
 210 |                                         @click="viewVM(vm)" 
 211 |                                         class="btn btn-info btn-sm"
 212 |                                     >
 213 |                                         查看详情
 214 |                                     </button>
 215 |                                     <button 
 216 |                                         v-if="vm.status === 'stopped'" 
 217 |                                         @click="startVM(vm)" 
 218 |                                         class="btn btn-success btn-sm"
 219 |                                         :disabled="loading.action"
 220 |                                     >
 221 |                                         <span v-if="loading.action && loading.vmid === vm.vmid" class="loading loading-spinner loading-xs"></span>
 222 |                                         <span v-else>启动</span>
 223 |                                     </button>
 224 |                                     <button 
 225 |                                         v-if="vm.status === 'running'" 
 226 |                                         @click="stopVM(vm)" 
 227 |                                         class="btn btn-error btn-sm"
 228 |                                         :disabled="loading.action"
 229 |                                     >
 230 |                                         <span v-if="loading.action && loading.vmid === vm.vmid" class="loading loading-spinner loading-xs"></span>
 231 |                                         <span v-else>停止</span>
 232 |                                     </button>
 233 |                                     <button 
 234 |                                         v-if="vm.status === 'running'" 
 235 |                                         @click="rebootVM(vm)" 
 236 |                                         class="btn btn-warning btn-sm"
 237 |                                         :disabled="loading.action"
 238 |                                     >
 239 |                                         <span v-if="loading.action && loading.vmid === vm.vmid" class="loading loading-spinner loading-xs"></span>
 240 |                                         <span v-else>重启</span>
 241 |                                     </button>
 242 |                                 </div>
 243 |                             </div>
 244 |                         </div>
 245 |                     </div>
 246 |                 </div>
 247 | 
 248 |                 <!-- Monitor Page -->
 249 |                 <div v-show="currentPage === 'monitor' && selectedVM">
 250 |                     <div class="mb-4 flex justify-between items-center">
 251 |                         <button @click="backToList" class="btn btn-ghost btn-sm">
 252 |                             ← 返回列表
 253 |                         </button>
 254 |                         <button @click="showConfig" class="btn btn-primary btn-sm">
 255 |                             配置管理
 256 |                         </button>
 257 |                     </div>
 258 | 
 259 |                     <h2 class="text-2xl font-bold mb-4">{{ selectedVM?.name }} - 监控</h2>
 260 | 
 261 |                     <div class="space-y-4">
 262 |                         <div class="stats shadow w-full">
 263 |                             <div class="stat">
 264 |                                 <div class="stat-title">CPU 使用率</div>
 265 |                                 <div class="stat-value text-primary">{{ monitorData.cpu }}%</div>
 266 |                                 <progress class="progress progress-primary w-full mt-2" :value="monitorData.cpu" max="100"></progress>
 267 |                             </div>
 268 |                         </div>
 269 | 
 270 |                         <div class="stats shadow w-full">
 271 |                             <div class="stat">
 272 |                                 <div class="stat-title">内存使用</div>
 273 |                                 <div class="stat-value text-secondary">{{ formatBytes(monitorData.mem) }} / {{ formatBytes(monitorData.maxmem) }}</div>
 274 |                                 <div class="stat-desc">{{ monitorData.memPercent }}%</div>
 275 |                                 <progress class="progress progress-secondary w-full mt-2" :value="monitorData.memPercent" max="100"></progress>
 276 |                             </div>
 277 |                         </div>
 278 | 
 279 |                         <div class="stats shadow w-full">
 280 |                             <div class="stat">
 281 |                                 <div class="stat-title">磁盘 I/O</div>
 282 |                                 <div class="stat-value text-sm">
 283 |                                     读: {{ formatBytes(monitorData.diskread) }}
 284 |                                 </div>
 285 |                                 <div class="stat-desc">
 286 |                                     写: {{ formatBytes(monitorData.diskwrite) }}
 287 |                                 </div>
 288 |                             </div>
 289 |                         </div>
 290 | 
 291 |                         <div class="stats shadow w-full">
 292 |                             <div class="stat">
 293 |                                 <div class="stat-title">网络 I/O</div>
 294 |                                 <div class="stat-value text-sm">
 295 |                                     入: {{ formatBytes(monitorData.netin) }}
 296 |                                 </div>
 297 |                                 <div class="stat-desc">
 298 |                                     出: {{ formatBytes(monitorData.netout) }}
 299 |                                 </div>
 300 |                             </div>
 301 |                         </div>
 302 | 
 303 |                         <div class="alert alert-info">
 304 |                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 305 |                             <span>{{ monitorCountdown }} 秒后自动刷新</span>
 306 |                         </div>
 307 |                     </div>
 308 |                 </div>
 309 | 
 310 |                 <!-- Config Page -->
 311 |                 <div v-show="currentPage === 'config' && selectedVM">
 312 |                     <div class="mb-4 flex justify-between items-center">
 313 |                         <button @click="backToMonitor" class="btn btn-ghost btn-sm">
 314 |                             ← 返回监控
 315 |                         </button>
 316 |                         <button @click="showAddHardwareModal" class="btn btn-primary btn-sm">
 317 |                             + 添加硬件
 318 |                         </button>
 319 |                     </div>
 320 | 
 321 |                     <h2 class="text-2xl font-bold mb-4">{{ selectedVM?.name }} - 硬件配置</h2>
 322 | 
 323 |                     <div v-if="loading.config" class="flex justify-center py-12">
 324 |                         <span class="loading loading-spinner loading-lg"></span>
 325 |                     </div>
 326 | 
 327 |                     <div v-else class="space-y-4">
 328 |                         <!-- 硬件配置列表 -->
 329 |                         <div v-for="item in hardwareList" :key="item.id" class="card bg-base-100 shadow-xl">
 330 |                             <div class="card-body py-3 px-4">
 331 |                                 <div class="flex justify-between items-start gap-3">
 332 |                                     <div class="flex items-start gap-3 flex-1 min-w-0">
 333 |                                         <div class="text-2xl flex-shrink-0">{{ item.icon }}</div>
 334 |                                         <div class="flex-1 min-w-0">
 335 |                                             <div class="font-semibold">{{ item.label }}</div>
 336 |                                             <div class="text-sm text-gray-500 break-all">{{ item.value }}</div>
 337 |                                         </div>
 338 |                                     </div>
 339 |                                     <div class="flex gap-2 flex-shrink-0">
 340 |                                         <button 
 341 |                                             v-if="item.editable"
 342 |                                             @click="editHardware(item)" 
 343 |                                             class="btn btn-ghost btn-sm btn-square"
 344 |                                         >
 345 |                                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 346 |                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
 347 |                                             </svg>
 348 |                                         </button>
 349 |                                         <button 
 350 |                                             v-if="item.deletable"
 351 |                                             @click="deleteHardware(item)" 
 352 |                                             class="btn btn-ghost btn-sm btn-square text-error"
 353 |                                         >
 354 |                                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 355 |                                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 356 |                                             </svg>
 357 |                                         </button>
 358 |                                     </div>
 359 |                                 </div>
 360 |                             </div>
 361 |                         </div>
 362 |                     </div>
 363 |                 </div>
 364 | 
 365 |                 <!-- 编辑/添加硬件模态框 -->
 366 |                 <dialog id="hardwareModal" class="modal">
 367 |                     <div class="modal-box w-11/12 max-w-md">
 368 |                         <h3 class="font-bold text-lg mb-4">{{ editingHardware.id ? '编辑硬件' : '添加硬件' }}</h3>
 369 |                         
 370 |                         <!-- 硬件类型选择（仅添加时显示） -->
 371 |                         <div v-if="!editingHardware.id" class="form-control mb-4">
 372 |                             <label class="label">
 373 |                                 <span class="label-text">硬件类型</span>
 374 |                             </label>
 375 |                             <select v-model="editingHardware.type" class="select select-bordered">
 376 |                                 <option value="">请选择硬件类型</option>
 377 |                                 <option value="disk">硬盘</option>
 378 |                                 <option value="net">网络设备</option>
 379 |                                 <option value="usb">USB 设备</option>
 380 |                                 <option value="pci">PCI 设备</option>
 381 |                             </select>
 382 |                         </div>
 383 | 
 384 |                         <!-- 通用硬件配置表单 -->
 385 |                         <div v-if="editingHardware.type === 'processor'" class="space-y-4">
 386 |                             <div class="form-control">
 387 |                                 <label class="label">
 388 |                                     <span class="label-text">CPU 核心数</span>
 389 |                                 </label>
 390 |                                 <input type="number" v-model.number="editingHardware.cores" class="input input-bordered" min="1" />
 391 |                             </div>
 392 |                             <div class="form-control">
 393 |                                 <label class="label">
 394 |                                     <span class="label-text">CPU Socket 数</span>
 395 |                                 </label>
 396 |                                 <input type="number" v-model.number="editingHardware.sockets" class="input input-bordered" min="1" />
 397 |                             </div>
 398 |                             <div class="form-control">
 399 |                                 <label class="label">
 400 |                                     <span class="label-text">CPU 类型</span>
 401 |                                 </label>
 402 |                                 <select v-model="editingHardware.cpuType" class="select select-bordered">
 403 |                                     <option value="host">host</option>
 404 |                                     <option value="kvm64">kvm64</option>
 405 |                                     <option value="qemu64">qemu64</option>
 406 |                                 </select>
 407 |                             </div>
 408 |                         </div>
 409 | 
 410 |                         <div v-else-if="editingHardware.type === 'memory'" class="space-y-4">
 411 |                             <div class="form-control">
 412 |                                 <label class="label">
 413 |                                     <span class="label-text">内存大小 (MB)</span>
 414 |                                 </label>
 415 |                                 <input type="number" v-model.number="editingHardware.memory" class="input input-bordered" min="512" step="512" />
 416 |                             </div>
 417 |                         </div>
 418 | 
 419 |                         <div v-else-if="editingHardware.type === 'disk'" class="space-y-4">
 420 |                             <div class="form-control">
 421 |                                 <label class="label">
 422 |                                     <span class="label-text">磁盘位置</span>
 423 |                                 </label>
 424 |                                 <input type="text" v-model="editingHardware.diskName" placeholder="如: sata0, scsi0" class="input input-bordered" :readonly="!!editingHardware.id" />
 425 |                             </div>
 426 |                             <div class="form-control">
 427 |                                 <label class="label">
 428 |                                     <span class="label-text">磁盘配置</span>
 429 |                                 </label>
 430 |                                 <textarea v-model="editingHardware.diskConfig" placeholder="如: local-lvm:vm-100-disk-0,size=32G" class="textarea textarea-bordered" rows="3"></textarea>
 431 |                             </div>
 432 |                         </div>
 433 | 
 434 |                         <div v-else-if="editingHardware.type === 'net'" class="space-y-4">
 435 |                             <div class="form-control">
 436 |                                 <label class="label">
 437 |                                     <span class="label-text">网络设备名</span>
 438 |                                 </label>
 439 |                                 <input type="text" v-model="editingHardware.netName" placeholder="如: net0, net1" class="input input-bordered" :readonly="!!editingHardware.id" />
 440 |                             </div>
 441 |                             <div class="form-control">
 442 |                                 <label class="label">
 443 |                                     <span class="label-text">网络配置</span>
 444 |                                 </label>
 445 |                                 <textarea v-model="editingHardware.netConfig" placeholder="如: virtio=XX:XX:XX:XX:XX:XX,bridge=vmbr0" class="textarea textarea-bordered" rows="3"></textarea>
 446 |                             </div>
 447 |                         </div>
 448 | 
 449 |                         <div v-else-if="editingHardware.type === 'usb'" class="space-y-4">
 450 |                             <div class="form-control">
 451 |                                 <label class="label">
 452 |                                     <span class="label-text">USB 设备名</span>
 453 |                                 </label>
 454 |                                 <input type="text" v-model="editingHardware.usbName" placeholder="如: usb0, usb1" class="input input-bordered" :readonly="!!editingHardware.id" />
 455 |                             </div>
 456 |                             
 457 |                             <div class="form-control">
 458 |                                 <label class="label cursor-pointer">
 459 |                                     <span class="label-text">使用 USB 供应商/设备 ID</span>
 460 |                                     <input type="radio" v-model="editingHardware.usbMode" value="device" class="radio radio-primary" />
 461 |                                 </label>
 462 |                             </div>
 463 |                             
 464 |                             <div v-if="editingHardware.usbMode === 'device'" class="form-control">
 465 |                                 <label class="label">
 466 |                                     <span class="label-text">选择设备</span>
 467 |                                 </label>
 468 |                                 <select v-model="editingHardware.usbDevice" class="select select-bordered">
 469 |                                     <option value="">请选择 USB 设备</option>
 470 |                                     <option v-for="device in availableUSBDevices" :key="device.id" :value="device.id">
 471 |                                         {{ device.id }} - {{ device.manufacturer || 'Unknown' }} {{ device.product || '' }} ({{ device.speed || 'USB' }})
 472 |                                     </option>
 473 |                                 </select>
 474 |                                 <label class="label" v-if="!editingHardware.id">
 475 |                                     <span class="label-text-alt text-info">
 476 |                                         <button @click="fetchUSBDevices" class="link">点击刷新设备列表</button>
 477 |                                     </span>
 478 |                                 </label>
 479 |                             </div>
 480 |                             
 481 |                             <div class="form-control">
 482 |                                 <label class="label cursor-pointer">
 483 |                                     <span class="label-text">手动输入配置</span>
 484 |                                     <input type="radio" v-model="editingHardware.usbMode" value="manual" class="radio radio-primary" />
 485 |                                 </label>
 486 |                             </div>
 487 |                             
 488 |                             <div v-if="editingHardware.usbMode === 'manual'" class="form-control">
 489 |                                 <label class="label">
 490 |                                     <span class="label-text">USB 配置</span>
 491 |                                 </label>
 492 |                                 <input type="text" v-model="editingHardware.usbConfig" placeholder="如: host=1a2c:2124" class="input input-bordered" />
 493 |                             </div>
 494 |                         </div>
 495 | 
 496 |                         <div v-else-if="editingHardware.type === 'pci'" class="space-y-4">
 497 |                             <div class="form-control">
 498 |                                 <label class="label">
 499 |                                     <span class="label-text">PCI 设备名</span>
 500 |                                 </label>
 501 |                                 <input type="text" v-model="editingHardware.pciName" placeholder="如: hostpci0, hostpci1" class="input input-bordered" :readonly="!!editingHardware.id" />
 502 |                             </div>
 503 |                             <div class="form-control">
 504 |                                 <label class="label">
 505 |                                     <span class="label-text">PCI 配置</span>
 506 |                                 </label>
 507 |                                 <textarea v-model="editingHardware.pciConfig" placeholder="如: 0000:00:02.0,legacy-igd=1" class="textarea textarea-bordered" rows="3"></textarea>
 508 |                             </div>
 509 |                         </div>
 510 | 
 511 |                         <div class="modal-action">
 512 |                             <button @click="closeHardwareModal" class="btn btn-ghost">取消</button>
 513 |                             <button @click="saveHardware" class="btn btn-primary" :disabled="!canSaveHardware">保存</button>
 514 |                         </div>
 515 |                     </div>
 516 |                     <form method="dialog" class="modal-backdrop">
 517 |                         <button>关闭</button>
 518 |                     </form>
 519 |                 </dialog>
 520 |             </div>
 521 |         </div>
 522 |     </div>
 523 | 
 524 |     <script>
 525 |         const { createApp } = Vue;
 526 | 
 527 |         createApp({
 528 |             data() {
 529 |                 return {
 530 |                     // Server data from template
 531 |                     nodename: '[% nodename %]',
 532 |                     username: '[% username %]' || '',
 533 |                     csrfToken: '[% token %]' || '',
 534 |                     
 535 |                     // Views
 536 |                     currentView: 'login',
 537 |                     currentPage: 'list',
 538 |                     
 539 |                     // Login form
 540 |                     loginForm: {
 541 |                         username: '',
 542 |                         password: '',
 543 |                         realm: 'pam',
 544 |                         loading: false,
 545 |                         error: ''
 546 |                     },
 547 |                     
 548 |                     // Auth
 549 |                     authToken: '',
 550 |                     authTicket: '',
 551 |                     
 552 |                     // VMs
 553 |                     vms: [],
 554 |                     selectedVM: null,
 555 |                     
 556 |                     // Monitor data
 557 |                     monitorData: {
 558 |                         cpu: 0,
 559 |                         mem: 0,
 560 |                         maxmem: 0,
 561 |                         memPercent: 0,
 562 |                         diskread: 0,
 563 |                         diskwrite: 0,
 564 |                         netin: 0,
 565 |                         netout: 0
 566 |                     },
 567 |                     monitorInterval: null,
 568 |                     monitorCountdown: 5,
 569 |                     countdownInterval: null,
 570 |                     
 571 |                     // Config
 572 |                     config: {
 573 |                         cores: 1,
 574 |                         sockets: 1,
 575 |                         memory: 512,
 576 |                         cpu: 'host',
 577 |                         bios: 'seabios',
 578 |                         vga: 'std',
 579 |                         machine: '',
 580 |                         scsihw: '',
 581 |                         onboot: false,
 582 |                         startup: 0,
 583 |                         disks: [],
 584 |                         networks: [],
 585 |                         usbs: [],
 586 |                         pcis: []
 587 |                     },
 588 |                     rawConfig: {},
 589 |                     maxCores: 32,
 590 |                     maxMemory: 32768,
 591 |                     
 592 |                     // 硬件编辑
 593 |                     editingHardware: {
 594 |                         id: null,
 595 |                         type: '',
 596 |                         // processor
 597 |                         cores: 1,
 598 |                         sockets: 1,
 599 |                         cpuType: 'host',
 600 |                         // memory
 601 |                         memory: 512,
 602 |                         // disk
 603 |                         diskName: '',
 604 |                         diskConfig: '',
 605 |                         // net
 606 |                         netName: '',
 607 |                         netConfig: '',
 608 |                         // usb
 609 |                         usbName: '',
 610 |                         usbConfig: '',
 611 |                         usbMode: 'device', // 'device' or 'manual'
 612 |                         usbDevice: '',
 613 |                         // pci
 614 |                         pciName: '',
 615 |                         pciConfig: ''
 616 |                     },
 617 |                     
 618 |                     // USB 设备列表
 619 |                     availableUSBDevices: [],
 620 |                     
 621 |                     // Loading states
 622 |                     loading: {
 623 |                         vms: false,
 624 |                         monitor: false,
 625 |                         config: false,
 626 |                         action: false,
 627 |                         vmid: null
 628 |                     },
 629 |                     
 630 |                     // Toast
 631 |                     toast: {
 632 |                         show: false,
 633 |                         message: '',
 634 |                         type: 'success'
 635 |                     }
 636 |                 };
 637 |             },
 638 |             
 639 |             mounted() {
 640 |                 // Check if already logged in from template
 641 |                 if (this.username && this.csrfToken) {
 642 |                     this.authToken = this.csrfToken;
 643 |                     // 设置 Cookie
 644 |                     document.cookie = `PVEAuthCookie=${this.authToken}; path=/; SameSite=Strict`;
 645 |                     this.currentView = 'main';
 646 |                     this.fetchVMs();
 647 |                 } else {
 648 |                     // Check localStorage for saved auth
 649 |                     const savedAuth = this.getSavedAuth();
 650 |                     if (savedAuth) {
 651 |                         this.authToken = savedAuth.token;
 652 |                         this.username = savedAuth.username;
 653 |                         this.csrfToken = savedAuth.csrf;
 654 |                         // 恢复 Cookie
 655 |                         document.cookie = `PVEAuthCookie=${this.authToken}; path=/; SameSite=Strict`;
 656 |                         this.currentView = 'main';
 657 |                         this.fetchVMs();
 658 |                     }
 659 |                 }
 660 |             },
 661 |             
 662 |             beforeUnmount() {
 663 |                 if (this.monitorInterval) {
 664 |                     clearInterval(this.monitorInterval);
 665 |                 }
 666 |                 if (this.countdownInterval) {
 667 |                     clearInterval(this.countdownInterval);
 668 |                 }
 669 |             },
 670 |             
 671 |             computed: {
 672 |                 hardwareList() {
 673 |                     const list = [];
 674 |                     
 675 |                     // 内存
 676 |                     list.push({
 677 |                         id: 'memory',
 678 |                         type: 'memory',
 679 |                         icon: '💾',
 680 |                         label: '内存',
 681 |                         value: `${(this.config.memory / 1024).toFixed(2)} GiB`,
 682 |                         editable: true,
 683 |                         deletable: false
 684 |                     });
 685 |                     
 686 |                     // 处理器
 687 |                     const cpuDesc = [];
 688 |                     if (this.config.cores) cpuDesc.push(`${this.config.cores} 核心`);
 689 |                     if (this.config.sockets) cpuDesc.push(`${this.config.sockets} 插槽`);
 690 |                     if (this.config.cpu) cpuDesc.push(`[${this.config.cpu}]`);
 691 |                     list.push({
 692 |                         id: 'processor',
 693 |                         type: 'processor',
 694 |                         icon: '🔧',
 695 |                         label: '处理器',
 696 |                         value: cpuDesc.join(', ') || '未配置',
 697 |                         editable: true,
 698 |                         deletable: false
 699 |                     });
 700 |                     
 701 |                     // BIOS
 702 |                     list.push({
 703 |                         id: 'bios',
 704 |                         type: 'bios',
 705 |                         icon: '⚙️',
 706 |                         label: 'BIOS',
 707 |                         value: this.config.bios === 'seabios' ? '默认 (SeaBIOS)' : this.config.bios || '默认 (SeaBIOS)',
 708 |                         editable: false,
 709 |                         deletable: false
 710 |                     });
 711 |                     
 712 |                     // 显示
 713 |                     list.push({
 714 |                         id: 'display',
 715 |                         type: 'display',
 716 |                         icon: '🖥️',
 717 |                         label: '显示',
 718 |                         value: this.config.vga || '无 (none)',
 719 |                         editable: false,
 720 |                         deletable: false
 721 |                     });
 722 |                     
 723 |                     // 机型
 724 |                     if (this.config.machine) {
 725 |                         list.push({
 726 |                             id: 'machine',
 727 |                             type: 'machine',
 728 |                             icon: '🖲️',
 729 |                             label: '机型',
 730 |                             value: this.config.machine,
 731 |                             editable: false,
 732 |                             deletable: false
 733 |                         });
 734 |                     }
 735 |                     
 736 |                     // SCSI 控制器
 737 |                     if (this.config.scsihw) {
 738 |                         list.push({
 739 |                             id: 'scsihw',
 740 |                             type: 'scsihw',
 741 |                             icon: '💿',
 742 |                             label: 'SCSI 控制器',
 743 |                             value: this.config.scsihw,
 744 |                             editable: false,
 745 |                             deletable: false
 746 |                         });
 747 |                     }
 748 |                     
 749 |                     // 硬盘
 750 |                     this.config.disks.forEach((disk, index) => {
 751 |                         list.push({
 752 |                             id: `disk_${disk.name}`,
 753 |                             type: 'disk',
 754 |                             icon: '💾',
 755 |                             label: `硬盘 (${disk.name})`,
 756 |                             value: this.formatDiskInfo(disk.size),
 757 |                             fullInfo: disk.fullInfo,
 758 |                             editable: true,
 759 |                             deletable: true,
 760 |                             key: disk.name
 761 |                         });
 762 |                     });
 763 |                     
 764 |                     // 网络设备
 765 |                     this.config.networks.forEach((net, index) => {
 766 |                         list.push({
 767 |                             id: `net_${net.name}`,
 768 |                             type: 'net',
 769 |                             icon: '🌐',
 770 |                             label: `网络设备 (${net.name})`,
 771 |                             value: net.fullInfo || net.bridge,
 772 |                             editable: true,
 773 |                             deletable: true,
 774 |                             key: net.name
 775 |                         });
 776 |                     });
 777 |                     
 778 |                     // USB 设备
 779 |                     this.config.usbs.forEach((usb, index) => {
 780 |                         list.push({
 781 |                             id: `usb_${usb.name}`,
 782 |                             type: 'usb',
 783 |                             icon: '🔌',
 784 |                             label: `USB 设备 (${usb.name})`,
 785 |                             value: usb.config,
 786 |                             editable: true,
 787 |                             deletable: true,
 788 |                             key: usb.name
 789 |                         });
 790 |                     });
 791 |                     
 792 |                     // PCI 设备
 793 |                     this.config.pcis.forEach((pci, index) => {
 794 |                         list.push({
 795 |                             id: `pci_${pci.name}`,
 796 |                             type: 'pci',
 797 |                             icon: '🎴',
 798 |                             label: `PCI 设备 (${pci.name})`,
 799 |                             value: pci.config,
 800 |                             editable: true,
 801 |                             deletable: true,
 802 |                             key: pci.name
 803 |                         });
 804 |                     });
 805 |                     
 806 |                     return list;
 807 |                 },
 808 |                 
 809 |                 canSaveHardware() {
 810 |                     if (!this.editingHardware.type) return false;
 811 |                     
 812 |                     switch (this.editingHardware.type) {
 813 |                         case 'processor':
 814 |                             return this.editingHardware.cores > 0 && this.editingHardware.sockets > 0;
 815 |                         case 'memory':
 816 |                             return this.editingHardware.memory >= 512;
 817 |                         case 'disk':
 818 |                             return this.editingHardware.diskName && this.editingHardware.diskConfig;
 819 |                         case 'net':
 820 |                             return this.editingHardware.netName && this.editingHardware.netConfig;
 821 |                         case 'usb':
 822 |                             if (!this.editingHardware.usbName) return false;
 823 |                             if (this.editingHardware.usbMode === 'device') {
 824 |                                 return !!this.editingHardware.usbDevice;
 825 |                             } else {
 826 |                                 return !!this.editingHardware.usbConfig;
 827 |                             }
 828 |                         case 'pci':
 829 |                             return this.editingHardware.pciName && this.editingHardware.pciConfig;
 830 |                         default:
 831 |                             return false;
 832 |                     }
 833 |                 }
 834 |             },
 835 |             
 836 |             methods: {
 837 |                 // Auth methods
 838 |                 async login() {
 839 |                     this.loginForm.loading = true;
 840 |                     this.loginForm.error = '';
 841 |                     
 842 |                     try {
 843 |                         const response = await this.apiRequest('POST', '/api2/json/access/ticket', {
 844 |                             username: `${this.loginForm.username}@${this.loginForm.realm}`,
 845 |                             password: this.loginForm.password
 846 |                         }, false);
 847 |                         
 848 |                         if (response.data) {
 849 |                             this.authToken = response.data.ticket;
 850 |                             this.csrfToken = response.data.CSRFPreventionToken;
 851 |                             this.username = response.data.username;
 852 |                             
 853 |                             // 手动设置 Cookie（浏览器可能不会自动设置跨域 Cookie）
 854 |                             document.cookie = `PVEAuthCookie=${this.authToken}; path=/; SameSite=Strict`;
 855 |                             
 856 |                             // Save to localStorage
 857 |                             this.saveAuth({
 858 |                                 token: this.authToken,
 859 |                                 csrf: this.csrfToken,
 860 |                                 username: this.username
 861 |                             });
 862 |                             
 863 |                             this.currentView = 'main';
 864 |                             this.fetchVMs();
 865 |                         }
 866 |                     } catch (error) {
 867 |                         this.loginForm.error = error.message || 'Login failed';
 868 |                     } finally {
 869 |                         this.loginForm.loading = false;
 870 |                     }
 871 |                 },
 872 |                 
 873 |                 logout() {
 874 |                     if (confirm('确定要退出登录吗？')) {
 875 |                         this.clearAuth();
 876 |                         this.currentView = 'login';
 877 |                         this.vms = [];
 878 |                         this.selectedVM = null;
 879 |                         if (this.monitorInterval) {
 880 |                             clearInterval(this.monitorInterval);
 881 |                         }
 882 |                     }
 883 |                 },
 884 |                 
 885 |                 saveAuth(auth) {
 886 |                     try {
 887 |                         localStorage.setItem('pve_auth', JSON.stringify(auth));
 888 |                     } catch (e) {
 889 |                         console.error('Failed to save auth', e);
 890 |                     }
 891 |                 },
 892 |                 
 893 |                 getSavedAuth() {
 894 |                     try {
 895 |                         const saved = localStorage.getItem('pve_auth');
 896 |                         return saved ? JSON.parse(saved) : null;
 897 |                     } catch (e) {
 898 |                         return null;
 899 |                     }
 900 |                 },
 901 |                 
 902 |                 clearAuth() {
 903 |                     try {
 904 |                         localStorage.removeItem('pve_auth');
 905 |                         // 清除 Cookie
 906 |                         document.cookie = 'PVEAuthCookie=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
 907 |                     } catch (e) {
 908 |                         console.error('Failed to clear auth', e);
 909 |                     }
 910 |                 },
 911 |                 
 912 |                 // API methods
 913 |                 async apiRequest(method, url, data = null, auth = true) {
 914 |                     const options = {
 915 |                         method,
 916 |                         headers: {},
 917 |                         credentials: 'include'  // 让浏览器自动发送和接收 Cookie
 918 |                     };
 919 |                     
 920 |                     if (auth && this.csrfToken) {
 921 |                         options.headers['CSRFPreventionToken'] = this.csrfToken;
 922 |                     }
 923 |                     
 924 |                     // PVE API 支持通过 Cookie 或 Authorization 头部认证
 925 |                     // 浏览器会自动发送 Cookie，但作为备选，也在 Authorization 头部发送 ticket
 926 |                     if (auth && this.authToken) {
 927 |                         options.headers['Authorization'] = `PVEAuthCookie=${this.authToken}`;
 928 |                     }
 929 |                     
 930 |                     // PVE API 对于 POST/PUT 请求通常需要使用 application/x-www-form-urlencoded
 931 |                     if (method === 'POST' || method === 'PUT') {
 932 |                         options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 933 |                         // 即使没有数据，也需要发送空的 body
 934 |                         if (data && typeof data === 'object') {
 935 |                             options.body = new URLSearchParams(data).toString();
 936 |                         } else {
 937 |                             options.body = '';
 938 |                         }
 939 |                     }
 940 |                     
 941 |                     const response = await fetch(url, options);
 942 |                     
 943 |                     if (response.status === 401) {
 944 |                         this.showToast('会话已过期，请重新登录', 'error');
 945 |                         this.clearAuth();
 946 |                         this.currentView = 'login';
 947 |                         throw new Error('Authentication required');
 948 |                     }
 949 |                     
 950 |                     if (!response.ok) {
 951 |                         const errorText = await response.text();
 952 |                         throw new Error(errorText || `Request failed: ${response.status}`);
 953 |                     }
 954 |                     
 955 |                     return await response.json();
 956 |                 },
 957 |                 
 958 |                 // VM methods
 959 |                 async fetchVMs() {
 960 |                     this.loading.vms = true;
 961 |                     try {
 962 |                         const response = await this.apiRequest('GET', `/api2/json/nodes/${this.nodename}/qemu`);
 963 |                         this.vms = (response.data || []).sort((a, b) => a.vmid - b.vmid);
 964 |                     } catch (error) {
 965 |                         this.showToast('获取虚拟机列表失败: ' + error.message, 'error');
 966 |                     } finally {
 967 |                         this.loading.vms = false;
 968 |                     }
 969 |                 },
 970 |                 
 971 |                 viewVM(vm) {
 972 |                     this.selectedVM = vm;
 973 |                     this.currentPage = 'monitor';
 974 |                     this.fetchMonitorData();
 975 |                     this.startMonitoring();
 976 |                 },
 977 |                 
 978 |                 backToList() {
 979 |                     this.currentPage = 'list';
 980 |                     this.selectedVM = null;
 981 |                     if (this.monitorInterval) {
 982 |                         clearInterval(this.monitorInterval);
 983 |                     }
 984 |                     if (this.countdownInterval) {
 985 |                         clearInterval(this.countdownInterval);
 986 |                     }
 987 |                 },
 988 |                 
 989 |                 showConfig() {
 990 |                     this.currentPage = 'config';
 991 |                     if (this.monitorInterval) {
 992 |                         clearInterval(this.monitorInterval);
 993 |                     }
 994 |                     if (this.countdownInterval) {
 995 |                         clearInterval(this.countdownInterval);
 996 |                     }
 997 |                     this.fetchConfig();
 998 |                 },
 999 |                 
1000 |                 backToMonitor() {
1001 |                     this.currentPage = 'monitor';
1002 |                     this.fetchMonitorData();
1003 |                     this.startMonitoring();
1004 |                 },
1005 |                 
1006 |                 async startVM(vm) {
1007 |                     if (!confirm(`确定要启动虚拟机 ${vm.name} 吗？`)) return;
1008 |                     
1009 |                     this.loading.action = true;
1010 |                     this.loading.vmid = vm.vmid;
1011 |                     
1012 |                     try {
1013 |                         await this.apiRequest('POST', `/api2/json/nodes/${this.nodename}/qemu/${vm.vmid}/status/start`);
1014 |                         this.showToast(`虚拟机 ${vm.name} 启动成功`, 'success');
1015 |                         setTimeout(() => this.fetchVMs(), 2000);
1016 |                     } catch (error) {
1017 |                         this.showToast('启动虚拟机失败: ' + error.message, 'error');
1018 |                     } finally {
1019 |                         this.loading.action = false;
1020 |                         this.loading.vmid = null;
1021 |                     }
1022 |                 },
1023 |                 
1024 |                 async stopVM(vm) {
1025 |                     if (!confirm(`确定要停止虚拟机 ${vm.name} 吗？`)) return;
1026 |                     
1027 |                     this.loading.action = true;
1028 |                     this.loading.vmid = vm.vmid;
1029 |                     
1030 |                     try {
1031 |                         await this.apiRequest('POST', `/api2/json/nodes/${this.nodename}/qemu/${vm.vmid}/status/stop`);
1032 |                         this.showToast(`虚拟机 ${vm.name} 停止成功`, 'success');
1033 |                         setTimeout(() => this.fetchVMs(), 2000);
1034 |                     } catch (error) {
1035 |                         this.showToast('停止虚拟机失败: ' + error.message, 'error');
1036 |                     } finally {
1037 |                         this.loading.action = false;
1038 |                         this.loading.vmid = null;
1039 |                     }
1040 |                 },
1041 |                 
1042 |                 async rebootVM(vm) {
1043 |                     if (!confirm(`确定要重启虚拟机 ${vm.name} 吗？`)) return;
1044 |                     
1045 |                     this.loading.action = true;
1046 |                     this.loading.vmid = vm.vmid;
1047 |                     
1048 |                     try {
1049 |                         await this.apiRequest('POST', `/api2/json/nodes/${this.nodename}/qemu/${vm.vmid}/status/reboot`);
1050 |                         this.showToast(`虚拟机 ${vm.name} 正在重启`, 'success');
1051 |                         setTimeout(() => this.fetchVMs(), 2000);
1052 |                     } catch (error) {
1053 |                         this.showToast('重启虚拟机失败: ' + error.message, 'error');
1054 |                     } finally {
1055 |                         this.loading.action = false;
1056 |                         this.loading.vmid = null;
1057 |                     }
1058 |                 },
1059 |                 
1060 |                 // Monitor methods
1061 |                 async fetchMonitorData() {
1062 |                     if (!this.selectedVM) return;
1063 |                     
1064 |                     // 首次加载显示加载动画，后续刷新不显示
1065 |                     const isFirstLoad = this.monitorData.cpu === 0;
1066 |                     if (isFirstLoad) {
1067 |                         this.loading.monitor = true;
1068 |                     }
1069 |                     
1070 |                     try {
1071 |                         const response = await this.apiRequest('GET', `/api2/json/nodes/${this.nodename}/qemu/${this.selectedVM.vmid}/status/current`);
1072 |                         const data = response.data || {};
1073 |                         
1074 |                         this.monitorData.cpu = Math.round((data.cpu || 0) * 100);
1075 |                         this.monitorData.mem = data.mem || 0;
1076 |                         this.monitorData.maxmem = data.maxmem || 1;
1077 |                         this.monitorData.memPercent = Math.round((this.monitorData.mem / this.monitorData.maxmem) * 100);
1078 |                         this.monitorData.diskread = data.diskread || 0;
1079 |                         this.monitorData.diskwrite = data.diskwrite || 0;
1080 |                         this.monitorData.netin = data.netin || 0;
1081 |                         this.monitorData.netout = data.netout || 0;
1082 |                     } catch (error) {
1083 |                         this.showToast('获取监控数据失败: ' + error.message, 'error');
1084 |                     } finally {
1085 |                         if (isFirstLoad) {
1086 |                             this.loading.monitor = false;
1087 |                         }
1088 |                     }
1089 |                 },
1090 |                 
1091 |                 startMonitoring() {
1092 |                     // 清除现有的定时器
1093 |                     if (this.monitorInterval) {
1094 |                         clearInterval(this.monitorInterval);
1095 |                     }
1096 |                     if (this.countdownInterval) {
1097 |                         clearInterval(this.countdownInterval);
1098 |                     }
1099 |                     
1100 |                     // 重置倒计时
1101 |                     this.monitorCountdown = 5;
1102 |                     
1103 |                     // 设置数据刷新定时器（每5秒）
1104 |                     this.monitorInterval = setInterval(() => {
1105 |                         if (this.currentPage === 'monitor' && this.selectedVM) {
1106 |                             this.fetchMonitorData();
1107 |                             this.monitorCountdown = 5; // 刷新后重置倒计时
1108 |                         }
1109 |                     }, 5000);
1110 |                     
1111 |                     // 设置倒计时定时器（每秒）
1112 |                     this.countdownInterval = setInterval(() => {
1113 |                         if (this.currentPage === 'monitor' && this.selectedVM) {
1114 |                             if (this.monitorCountdown > 0) {
1115 |                                 this.monitorCountdown--;
1116 |                             }
1117 |                         }
1118 |                     }, 1000);
1119 |                 },
1120 |                 
1121 |                 // Config methods
1122 |                 async fetchConfig() {
1123 |                     if (!this.selectedVM) return;
1124 |                     
1125 |                     this.loading.config = true;
1126 |                     try {
1127 |                         const response = await this.apiRequest('GET', `/api2/json/nodes/${this.nodename}/qemu/${this.selectedVM.vmid}/config`);
1128 |                         const data = response.data || {};
1129 |                         this.rawConfig = data;
1130 |                         
1131 |                         // 基础配置
1132 |                         this.config.cores = data.cores || 1;
1133 |                         this.config.sockets = data.sockets || 1;
1134 |                         this.config.memory = data.memory || 512;
1135 |                         this.config.cpu = data.cpu || 'host';
1136 |                         this.config.bios = data.bios || 'seabios';
1137 |                         this.config.vga = data.vga || 'std';
1138 |                         this.config.machine = data.machine || '';
1139 |                         this.config.scsihw = data.scsihw || '';
1140 |                         this.config.onboot = data.onboot === 1;
1141 |                         this.config.startup = data.startup || 0;
1142 |                         
1143 |                         // 解析硬盘配置
1144 |                         this.config.disks = [];
1145 |                         Object.keys(data).forEach(key => {
1146 |                             if (key.match(/^(scsi|sata|virtio|ide)\d+$/)) {
1147 |                                 const diskInfo = data[key];
1148 |                                 const parts = diskInfo.split(',');
1149 |                                 this.config.disks.push({
1150 |                                     name: key,
1151 |                                     size: parts[0] || diskInfo,
1152 |                                     fullInfo: diskInfo
1153 |                                 });
1154 |                             }
1155 |                         });
1156 |                         
1157 |                         // 解析网络配置
1158 |                         this.config.networks = [];
1159 |                         Object.keys(data).forEach(key => {
1160 |                             if (key.match(/^net\d+$/)) {
1161 |                                 const netInfo = data[key];
1162 |                                 const bridgeMatch = netInfo.match(/bridge=(\w+)/);
1163 |                                 this.config.networks.push({
1164 |                                     name: key,
1165 |                                     bridge: bridgeMatch ? bridgeMatch[1] : 'unknown',
1166 |                                     fullInfo: netInfo
1167 |                                 });
1168 |                             }
1169 |                         });
1170 |                         
1171 |                         // 解析 USB 设备
1172 |                         this.config.usbs = [];
1173 |                         Object.keys(data).forEach(key => {
1174 |                             if (key.match(/^usb\d+$/)) {
1175 |                                 this.config.usbs.push({
1176 |                                     name: key,
1177 |                                     config: data[key]
1178 |                                 });
1179 |                             }
1180 |                         });
1181 |                         
1182 |                         // 解析 PCI 设备
1183 |                         this.config.pcis = [];
1184 |                         Object.keys(data).forEach(key => {
1185 |                             if (key.match(/^hostpci\d+$/)) {
1186 |                                 this.config.pcis.push({
1187 |                                     name: key,
1188 |                                     config: data[key]
1189 |                                 });
1190 |                             }
1191 |                         });
1192 |                     } catch (error) {
1193 |                         this.showToast('获取配置失败: ' + error.message, 'error');
1194 |                     } finally {
1195 |                         this.loading.config = false;
1196 |                     }
1197 |                 },
1198 |                 
1199 |                 // 硬件管理方法
1200 |                 showAddHardwareModal() {
1201 |                     this.editingHardware = {
1202 |                         id: null,
1203 |                         type: '',
1204 |                         cores: this.config.cores,
1205 |                         sockets: this.config.sockets,
1206 |                         cpuType: this.config.cpu,
1207 |                         memory: this.config.memory,
1208 |                         diskName: '',
1209 |                         diskConfig: '',
1210 |                         netName: '',
1211 |                         netConfig: '',
1212 |                         usbName: '',
1213 |                         usbConfig: '',
1214 |                         usbMode: 'device',
1215 |                         usbDevice: '',
1216 |                         pciName: '',
1217 |                         pciConfig: ''
1218 |                     };
1219 |                     document.getElementById('hardwareModal').showModal();
1220 |                 },
1221 |                 
1222 |                 async fetchUSBDevices() {
1223 |                     try {
1224 |                         const response = await this.apiRequest('GET', `/api2/json/nodes/${this.nodename}/hardware/usb`);
1225 |                         this.availableUSBDevices = (response.data || []).map(device => ({
1226 |                             id: `${device.vendid}:${device.prodid}`,
1227 |                             vendid: device.vendid,
1228 |                             prodid: device.prodid,
1229 |                             manufacturer: device.manufacturer,
1230 |                             product: device.product,
1231 |                             speed: device.speed,
1232 |                             port: device.port,
1233 |                             busnum: device.busnum,
1234 |                             devnum: device.devnum
1235 |                         }));
1236 |                     } catch (error) {
1237 |                         this.showToast('获取 USB 设备列表失败: ' + error.message, 'error');
1238 |                     }
1239 |                 },
1240 |                 
1241 |                 editHardware(item) {
1242 |                     this.editingHardware = {
1243 |                         id: item.id,
1244 |                         type: item.type,
1245 |                         cores: this.config.cores,
1246 |                         sockets: this.config.sockets,
1247 |                         cpuType: this.config.cpu,
1248 |                         memory: this.config.memory,
1249 |                         diskName: '',
1250 |                         diskConfig: '',
1251 |                         netName: '',
1252 |                         netConfig: '',
1253 |                         usbName: '',
1254 |                         usbConfig: '',
1255 |                         usbMode: 'manual',
1256 |                         usbDevice: '',
1257 |                         pciName: '',
1258 |                         pciConfig: ''
1259 |                     };
1260 |                     
1261 |                     if (item.type === 'processor') {
1262 |                         this.editingHardware.cores = this.config.cores;
1263 |                         this.editingHardware.sockets = this.config.sockets;
1264 |                         this.editingHardware.cpuType = this.config.cpu;
1265 |                     } else if (item.type === 'memory') {
1266 |                         this.editingHardware.memory = this.config.memory;
1267 |                     } else if (item.type === 'disk') {
1268 |                         const disk = this.config.disks.find(d => d.name === item.key);
1269 |                         if (disk) {
1270 |                             this.editingHardware.diskName = disk.name;
1271 |                             this.editingHardware.diskConfig = disk.fullInfo;
1272 |                         }
1273 |                     } else if (item.type === 'net') {
1274 |                         const net = this.config.networks.find(n => n.name === item.key);
1275 |                         if (net) {
1276 |                             this.editingHardware.netName = net.name;
1277 |                             this.editingHardware.netConfig = net.fullInfo;
1278 |                         }
1279 |                     } else if (item.type === 'usb') {
1280 |                         const usb = this.config.usbs.find(u => u.name === item.key);
1281 |                         if (usb) {
1282 |                             this.editingHardware.usbName = usb.name;
1283 |                             this.editingHardware.usbConfig = usb.config;
1284 |                             // 判断是设备 ID 格式还是手动输入
1285 |                             if (usb.config.startsWith('host=') && usb.config.match(/host=[0-9a-f]{4}:[0-9a-f]{4}/i)) {
1286 |                                 this.editingHardware.usbMode = 'device';
1287 |                                 this.editingHardware.usbDevice = usb.config.replace('host=', '');
1288 |                             } else {
1289 |                                 this.editingHardware.usbMode = 'manual';
1290 |                             }
1291 |                         }
1292 |                         // 获取可用 USB 设备列表
1293 |                         this.fetchUSBDevices();
1294 |                     } else if (item.type === 'pci') {
1295 |                         const pci = this.config.pcis.find(p => p.name === item.key);
1296 |                         if (pci) {
1297 |                             this.editingHardware.pciName = pci.name;
1298 |                             this.editingHardware.pciConfig = pci.config;
1299 |                         }
1300 |                     }
1301 |                     
1302 |                     document.getElementById('hardwareModal').showModal();
1303 |                 },
1304 |                 
1305 |                 async deleteHardware(item) {
1306 |                     if (!confirm(`确定要删除 ${item.label} 吗？`)) return;
1307 |                     
1308 |                     this.loading.config = true;
1309 |                     try {
1310 |                         const deleteData = { delete: item.key };
1311 |                         await this.apiRequest('PUT', `/api2/json/nodes/${this.nodename}/qemu/${this.selectedVM.vmid}/config`, deleteData);
1312 |                         this.showToast('硬件删除成功', 'success');
1313 |                         await this.fetchConfig();
1314 |                     } catch (error) {
1315 |                         this.showToast('删除硬件失败: ' + error.message, 'error');
1316 |                     } finally {
1317 |                         this.loading.config = false;
1318 |                     }
1319 |                 },
1320 |                 
1321 |                 async saveHardware() {
1322 |                     if (!this.selectedVM) return;
1323 |                     
1324 |                     this.loading.config = true;
1325 |                     try {
1326 |                         const updateData = {};
1327 |                         
1328 |                         if (this.editingHardware.type === 'processor') {
1329 |                             updateData.cores = this.editingHardware.cores;
1330 |                             updateData.sockets = this.editingHardware.sockets;
1331 |                             updateData.cpu = this.editingHardware.cpuType;
1332 |                         } else if (this.editingHardware.type === 'memory') {
1333 |                             updateData.memory = this.editingHardware.memory;
1334 |                         } else if (this.editingHardware.type === 'disk') {
1335 |                             updateData[this.editingHardware.diskName] = this.editingHardware.diskConfig;
1336 |                         } else if (this.editingHardware.type === 'net') {
1337 |                             updateData[this.editingHardware.netName] = this.editingHardware.netConfig;
1338 |                         } else if (this.editingHardware.type === 'usb') {
1339 |                             // 根据模式选择配置
1340 |                             let usbConfig;
1341 |                             if (this.editingHardware.usbMode === 'device') {
1342 |                                 usbConfig = `host=${this.editingHardware.usbDevice}`;
1343 |                             } else {
1344 |                                 usbConfig = this.editingHardware.usbConfig;
1345 |                             }
1346 |                             updateData[this.editingHardware.usbName] = usbConfig;
1347 |                         } else if (this.editingHardware.type === 'pci') {
1348 |                             updateData[this.editingHardware.pciName] = this.editingHardware.pciConfig;
1349 |                         }
1350 |                         
1351 |                         await this.apiRequest('PUT', `/api2/json/nodes/${this.nodename}/qemu/${this.selectedVM.vmid}/config`, updateData);
1352 |                         this.showToast('硬件配置保存成功', 'success');
1353 |                         this.closeHardwareModal();
1354 |                         await this.fetchConfig();
1355 |                     } catch (error) {
1356 |                         this.showToast('保存硬件配置失败: ' + error.message, 'error');
1357 |                     } finally {
1358 |                         this.loading.config = false;
1359 |                     }
1360 |                 },
1361 |                 
1362 |                 closeHardwareModal() {
1363 |                     document.getElementById('hardwareModal').close();
1364 |                 },
1365 |                 
1366 |                 // Utility methods
1367 |                 formatBytes(bytes) {
1368 |                     if (bytes === 0) return '0 B';
1369 |                     const k = 1024;
1370 |                     const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
1371 |                     const i = Math.floor(Math.log(bytes) / Math.log(k));
1372 |                     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
1373 |                 },
1374 |                 
1375 |                 formatDiskInfo(diskStr) {
1376 |                     // 提取硬盘大小信息
1377 |                     // 格式通常是: local-lvm:vm-100-disk-0,size=32G 或 /dev/disk/by-id/xxx
1378 |                     if (!diskStr) return '';
1379 |                     
1380 |                     // 尝试提取大小信息
1381 |                     const sizeMatch = diskStr.match(/size=(\d+[KMGT]?)/i);
1382 |                     if (sizeMatch) {
1383 |                         return sizeMatch[1];
1384 |                     }
1385 |                     
1386 |                     // 如果是路径格式，尝试提取最后一部分和大小
1387 |                     const pathMatch = diskStr.match(/([^/,]+)$/);
1388 |                     if (pathMatch) {
1389 |                         const lastPart = pathMatch[1];
1390 |                         // 如果太长，截断并显示前后部分
1391 |                         if (lastPart.length > 30) {
1392 |                             return lastPart.substring(0, 15) + '...' + lastPart.substring(lastPart.length - 10);
1393 |                         }
1394 |                         return lastPart;
1395 |                     }
1396 |                     
1397 |                     // 如果都没有匹配，直接截断
1398 |                     if (diskStr.length > 30) {
1399 |                         return diskStr.substring(0, 27) + '...';
1400 |                     }
1401 |                     
1402 |                     return diskStr;
1403 |                 },
1404 |                 
1405 |                 showToast(message, type = 'success') {
1406 |                     this.toast.message = message;
1407 |                     this.toast.type = type;
1408 |                     this.toast.show = true;
1409 |                     
1410 |                     setTimeout(() => {
1411 |                         this.toast.show = false;
1412 |                     }, 3000);
1413 |                 }
1414 |             },
1415 |             
1416 |             watch: {
1417 |                 currentPage(newPage) {
1418 |                     // 页面切换时的清理工作已在各个方法中处理
1419 |                 }
1420 |             }
1421 |         }).mount('#app');
1422 |     </script>
1423 | </body>
1424 | </html>
1425 | 


--------------------------------------------------------------------------------