817 lines
37 KiB
HTML
817 lines
37 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Cloud Resource Manager - Zone CN-East-2</title>
|
||
<style>
|
||
/* 全局设置 */
|
||
:root {
|
||
--primary: #108ee9;
|
||
--success: #00a854;
|
||
--warning: #ffbf00;
|
||
--danger: #f04134;
|
||
--bg-body: #f5f5f5;
|
||
--bg-panel: #ffffff;
|
||
--border: #e9e9e9;
|
||
--text-main: #333;
|
||
--text-sub: #999;
|
||
}
|
||
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-body); color: var(--text-main); margin: 0; font-size: 12px; }
|
||
h2, h3 { margin: 0; font-weight: 500; }
|
||
ul { padding: 0; list-style: none; }
|
||
a { text-decoration: none; color: var(--primary); transition: 0.3s; }
|
||
a:hover { color: #40a9ff; }
|
||
hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
|
||
|
||
/* 顶部导航 */
|
||
.header { background: #262f3e; color: #fff; padding: 0 20px; height: 50px; display: flex; align-items: center; justify-content: space-between; }
|
||
.header h2 { font-size: 16px; color: #fff; }
|
||
.header p { color: #aaa; margin-left: 20px; }
|
||
.header nav a { color: #ddd; margin: 0 10px; font-size: 13px; }
|
||
.header nav a:hover { color: #fff; }
|
||
|
||
/* 主布局 */
|
||
.layout-container { display: flex; min-height: calc(100vh - 50px); }
|
||
|
||
/* 侧边栏 */
|
||
.sidebar { width: 220px; background: #fff; border-right: 1px solid var(--border); padding: 20px; flex-shrink: 0; }
|
||
.sidebar h3 { font-size: 13px; color: var(--text-main); margin-bottom: 10px; margin-top: 20px; font-weight: bold; }
|
||
.sidebar li { margin-bottom: 8px; }
|
||
.sidebar li a { color: #666; display: block; padding: 5px; border-radius: 4px; }
|
||
.sidebar li a:hover { background: #e6f7ff; color: var(--primary); }
|
||
|
||
.quota-box { background: #fafafa; padding: 10px; border-radius: 4px; border: 1px solid #eee; }
|
||
.quota-box p { margin: 5px 0; color: #666; }
|
||
|
||
/* 广告干扰 - 侧边栏 */
|
||
.ad-sidebar { margin-top: 20px; padding: 10px; background: linear-gradient(135deg, #f0f5ff 0%, #d6e4ff 100%); border-radius: 4px; border: 1px solid #adc6ff; }
|
||
.ad-sidebar p { margin: 0; color: #1d39c4; }
|
||
|
||
/* 主内容区 */
|
||
.main-content { flex: 1; padding: 20px; overflow-x: auto; }
|
||
|
||
/* 顶部通知 - 干扰 */
|
||
.system-notice { background: #fffbe6; border: 1px solid #ffe58f; padding: 10px 15px; border-radius: 4px; display: flex; flex-direction: column; margin-bottom: 20px; }
|
||
.system-notice strong { color: #fa8c16; margin-bottom: 5px; }
|
||
.system-notice p { margin: 0; color: #666; }
|
||
|
||
/* 搜索栏 */
|
||
.search-bar fieldset { border: 0; padding: 0; margin: 0; background: #fff; padding: 15px; border-radius: 4px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
|
||
.search-bar legend { display: none; }
|
||
.search-bar label { font-weight: 500; }
|
||
.search-bar input, .search-bar select { border: 1px solid #d9d9d9; padding: 5px 8px; border-radius: 4px; outline: none; }
|
||
.search-bar button { background: #fff; border: 1px solid #d9d9d9; padding: 5px 15px; border-radius: 4px; cursor: pointer; }
|
||
.search-bar button:hover { color: var(--primary); border-color: var(--primary); }
|
||
|
||
/* 操作按钮区 */
|
||
.toolbar { margin: 15px 0; }
|
||
.toolbar button { margin-right: 8px; padding: 6px 15px; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; }
|
||
.toolbar button:first-child { background: var(--primary); color: #fff; border-color: var(--primary); }
|
||
|
||
/* 实例列表表格化 */
|
||
.instance-list { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
|
||
|
||
/* 表头 */
|
||
.list-header { display: grid; grid-template-columns: 40px 3fr 2fr 2fr 1.5fr 3fr; padding: 12px 15px; background: #fafafa; border-bottom: 1px solid #e9e9e9; font-weight: 600; color: #666; }
|
||
|
||
/* 列表行 */
|
||
.list-row { display: grid; grid-template-columns: 40px 3fr 2fr 2fr 1.5fr 3fr; padding: 15px; border-bottom: 1px solid #e9e9e9; align-items: center; transition: background 0.2s; }
|
||
.list-row:hover { background: #f0f7ff; }
|
||
|
||
/* 行内样式 */
|
||
.list-row strong { color: var(--primary); cursor: pointer; display: block; margin-bottom: 4px; }
|
||
.list-row small { color: #999; }
|
||
|
||
/* 状态颜色 */
|
||
.status-running { color: var(--success); display: inline-flex; align-items: center; }
|
||
.status-running::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; margin-right: 5px; }
|
||
|
||
.status-stopped { color: #999; display: inline-flex; align-items: center; }
|
||
.status-stopped::before { content: ''; width: 6px; height: 6px; background: #ccc; border-radius: 50%; margin-right: 5px; }
|
||
|
||
.status-maintenance { color: var(--warning); }
|
||
|
||
/* 按钮组 - 隐藏危险按钮，放入下拉菜单的概念(这里用CSS模拟) */
|
||
.action-group { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.action-group button { border: none; background: none; color: var(--primary); cursor: pointer; padding: 0; }
|
||
.action-group button:hover { text-decoration: underline; }
|
||
/* 危险操作用CSS隐藏，或显示为红色 */
|
||
.btn-danger { color: var(--danger) !important; display: none; /* 默认隐藏危险按钮，模拟"更多"菜单 */ }
|
||
.list-row:hover .btn-danger { display: inline-block; /* hover时显示，增加交互感 */ }
|
||
|
||
/* 干扰行处理 */
|
||
.ad-row { background: #f9f9f9; border: 1px dashed #d9d9d9; margin: 10px; border-radius: 4px; }
|
||
.ad-row strong { color: #333 !important; }
|
||
.error-row { display: none; } /* 直接隐藏报错信息干扰 */
|
||
.billing-alert-row { background: #fff1f0; border: 1px solid #ffa39e; margin: 10px; border-radius: 4px; }
|
||
.billing-alert-row p { margin: 0; display: inline-block; color: #f5222d; margin-right: 10px; }
|
||
|
||
/* 底部 */
|
||
.footer { padding: 20px; text-align: center; color: #ccc; font-size: 12px; }
|
||
|
||
/* 分页 */
|
||
.pagination { display: flex; align-items: center; justify-content: flex-end; padding: 15px; gap: 10px; }
|
||
.pagination button { background: #fff; border: 1px solid #d9d9d9; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
|
||
|
||
/* === New Interactive Elements === */
|
||
/* Modal */
|
||
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
|
||
.modal-content { background: #fff; width: 500px; padding: 20px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: fadeIn 0.3s; }
|
||
.modal-header { font-size: 16px; font-weight: bold; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; display: flex; justify-content: space-between; }
|
||
|
||
/* Drawer (Right Panel) */
|
||
.drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 900; display: none; }
|
||
.drawer { position: fixed; top: 0; right: -450px; width: 450px; height: 100%; background: #fff; box-shadow: -2px 0 8px rgba(0,0,0,0.1); transition: right 0.3s ease; z-index: 901; display: flex; flex-direction: column; }
|
||
.drawer.open { right: 0; }
|
||
.drawer-header { padding: 20px; border-bottom: 1px solid #eee; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
|
||
.drawer-body { padding: 20px; flex: 1; overflow-y: auto; }
|
||
|
||
/* Toast Notification */
|
||
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 20px; border-radius: 4px; z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s; }
|
||
.toast.show { display: block; opacity: 1; }
|
||
|
||
/* Form Styles */
|
||
.form-group { margin-bottom: 15px; }
|
||
.form-group label { display: block; margin-bottom: 5px; color: #666; font-weight: 500; }
|
||
.form-input { width: 100%; padding: 8px; border: 1px solid #d9d9d9; border-radius: 4px; box-sizing: border-box; }
|
||
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="main-wrapper">
|
||
<div class="header">
|
||
<h2>HyperCloud 控制台 [企业版]</h2>
|
||
<p>当前区域: <strong>华东二区 (CN-East-2)</strong> | 账户: admin_core_team</p>
|
||
<nav>
|
||
<a href="#">总览</a> |
|
||
<a href="#">计算实例 (ECI)</a> |
|
||
<a href="#">对象存储 (OSS)</a> |
|
||
<a href="#">私有网络 (VPC)</a> |
|
||
<a href="#">安全组</a> |
|
||
<a href="#">负载均衡</a> |
|
||
<a href="#">费用中心</a> |
|
||
<a href="#">工单支持</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="layout-container">
|
||
<div class="sidebar">
|
||
<h3>资源列表</h3>
|
||
<ul>
|
||
<li><a href="javascript:void(0)" class="active" onclick="filterByStatus('all', this)">全部实例 (14)</a></li>
|
||
<li><a href="javascript:void(0)" onclick="filterByStatus('running', this)">运行中 (10)</a></li>
|
||
<li><a href="javascript:void(0)" onclick="filterByStatus('stopped', this)">已停止 (3)</a></li>
|
||
<li><a href="javascript:void(0)" onclick="filterByStatus('maintenance', this)">异常/维护 (1)</a></li>
|
||
</ul>
|
||
|
||
<h3>配额监控</h3>
|
||
<div class="quota-box">
|
||
<p>vCPU 使用率: 88/100 核</p>
|
||
<p>内存 使用率: 256/512 GB</p>
|
||
<p>公网IP: 12/20 个</p>
|
||
</div>
|
||
|
||
<div class="ad-sidebar">
|
||
<p><strong>[推广] GPU 实例限时 8 折</strong><br>A100 显卡火热租赁中...</p>
|
||
</div>
|
||
|
||
<h3>操作日志</h3>
|
||
<ul style="font-size: 11px; color: #999;">
|
||
<li><small>2025-12-21 10:00: inst-a1 重启成功</small></li>
|
||
<li><small>2025-12-21 09:45: 安全组规则更新</small></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="system-notice">
|
||
<strong>[紧急通知] 华东二区可用区 B 网络割接公告</strong>
|
||
<p>将于本周日凌晨 02:00 进行光纤割接，预计网络抖动 2 次，每次 5 秒。</p>
|
||
</div>
|
||
|
||
<form class="search-bar">
|
||
<fieldset>
|
||
<label>关键词:</label> <input type="text" id="searchInput" placeholder="Instance ID / Name">
|
||
<label>标签:</label> <input type="text" placeholder="Key:Value">
|
||
<label>付费类型:</label>
|
||
<select>
|
||
<option>全部</option>
|
||
<option>包年包月</option>
|
||
<option>按量付费</option>
|
||
<option>抢占式实例</option>
|
||
</select>
|
||
<button type="button" class="btn-primary" onclick="searchInstances()">刷新列表</button>
|
||
<button type="button" onclick="resetSearch()">重置</button>
|
||
</fieldset>
|
||
</form>
|
||
|
||
<div class="toolbar">
|
||
<button style="background: var(--primary); color: #fff; border-color: var(--primary);" onclick="openCreateModal()">+ 创建实例</button>
|
||
<button onclick="performToolbarAction('start')">启动</button>
|
||
<button onclick="performToolbarAction('stop')">停止</button>
|
||
<button onclick="performToolbarAction('restart')">重启</button>
|
||
<button onclick="showToast('功能开发中: 修改释放设置', 'warning')">释放设置</button>
|
||
<button onclick="showToast('功能开发中: 修改计费模式', 'warning')">修改计费模式</button>
|
||
</div>
|
||
|
||
<div class="instance-list">
|
||
<div class="list-header">
|
||
<span><input type="checkbox" id="selectAll"></span>
|
||
<span><strong>实例ID/名称</strong></span>
|
||
<span><strong>IP地址 (公/私)</strong></span>
|
||
<span><strong>配置</strong></span>
|
||
<span><strong>状态</strong></span>
|
||
<span><strong>操作</strong></span>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1j2k3l4m5n (Web-Server-01)</strong><br>
|
||
<small>镜像: Ubuntu 22.04 LTS</small>
|
||
</div>
|
||
<div>
|
||
<span>139.196.xxx.xxx</span><br>
|
||
<span style="color:#999">192.168.1.101</span>
|
||
</div>
|
||
<div>
|
||
<span>4 vCPU</span><br>
|
||
<span>16 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-running">运行中</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button onclick="remoteConnect('i-bp1j2k3l4m5n')">远程连接</button>
|
||
<button onclick="openMonitor('i-bp1j2k3l4m5n')">监控</button>
|
||
<button onclick="showMoreMenu(this)">更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete('i-bp1j2k3l4m5n')">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete('i-bp1j2k3l4m5n', true)">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1x9y8z7a6b (DB-Master-Prod)</strong><br>
|
||
<small>镜像: CentOS 7.9 (已停止维护)</small>
|
||
</div>
|
||
<div>
|
||
<span>47.100.xxx.xxx</span><br>
|
||
<span style="color:#999">192.168.1.200</span>
|
||
</div>
|
||
<div>
|
||
<span>16 vCPU</span><br>
|
||
<span>64 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-running">运行中</span> <small>(高负载)</small>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row ad-row">
|
||
<div>
|
||
<input type="checkbox" disabled>
|
||
</div>
|
||
<div>
|
||
<strong>[推荐] 弹性伸缩服务 (AutoScaling)</strong><br>
|
||
<small>自动管理您的实例数量</small>
|
||
</div>
|
||
<div>
|
||
<span>--</span>
|
||
</div>
|
||
<div>
|
||
<span>动态调整</span>
|
||
</div>
|
||
<div>
|
||
<span>未开通</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button style="color: #fa8c16; font-weight:bold;" onclick="openProductIntro('scaling')">立即开通</button>
|
||
<button onclick="openProductIntro('scaling_doc')">了解详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1h5g6f4d3s (Redis-Cache-01)</strong><br>
|
||
<small>镜像: Redis Enterprise</small>
|
||
</div>
|
||
<div>
|
||
<span style="color:#ccc">(无公网IP)</span><br>
|
||
<span style="color:#999">192.168.1.105</span>
|
||
</div>
|
||
<div>
|
||
<span>2 vCPU</span><br>
|
||
<span>8 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-stopped">已停止</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row error-row">
|
||
<div align="center" style="width: 100%;">
|
||
<small>Error: Failed to fetch metric data for instance i-bp1h5... (Retrying in 5s)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1q2w3e4r5t (Worker-Node-A)</strong><br>
|
||
<small>镜像: Aliyun Linux 3</small>
|
||
</div>
|
||
<div>
|
||
<span>101.200.xxx.xxx</span><br>
|
||
<span style="color:#999">172.16.0.12</span>
|
||
</div>
|
||
<div>
|
||
<span>8 vCPU</span><br>
|
||
<span>32 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-running">运行中</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1a2s3d4f5g (Worker-Node-B)</strong><br>
|
||
<small>镜像: Aliyun Linux 3</small>
|
||
</div>
|
||
<div>
|
||
<span>101.200.xxx.xxx</span><br>
|
||
<span style="color:#999">172.16.0.13</span>
|
||
</div>
|
||
<div>
|
||
<span>8 vCPU</span><br>
|
||
<span>32 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-running">启动中...</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1z2x3c4v5b (Legacy-System-Win)</strong><br>
|
||
<small>镜像: Windows Server 2012 R2</small>
|
||
</div>
|
||
<div>
|
||
<span>121.40.xxx.xxx</span><br>
|
||
<span style="color:#999">192.168.1.99</span>
|
||
</div>
|
||
<div>
|
||
<span>4 vCPU</span><br>
|
||
<span>8 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-maintenance">维护中</span>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row billing-alert-row">
|
||
<div style="grid-column: 1 / -1;">
|
||
<strong>[财务告警] 您的账户余额不足 100.00 CNY</strong>
|
||
</div>
|
||
<div style="grid-column: 1 / -1; margin-top: 5px;">
|
||
<p>请及时充值，以免影响实例的正常运行。</p>
|
||
<button onclick="openRecharge()" style="background: #f5222d; color: white; border: none; padding: 4px 12px; border-radius: 2px;">立即充值</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-row">
|
||
<div>
|
||
<input type="checkbox" class="row-checkbox">
|
||
</div>
|
||
<div>
|
||
<strong onclick="alert('跳转详情页')">i-bp1m0n9b8v7c (Dev-Test-Env)</strong><br>
|
||
<small>镜像: Ubuntu 20.04</small>
|
||
</div>
|
||
<div>
|
||
<span style="color:#ccc">(无公网IP)</span><br>
|
||
<span style="color:#999">192.168.50.50</span>
|
||
</div>
|
||
<div>
|
||
<span>1 vCPU</span><br>
|
||
<span>1 GiB</span>
|
||
</div>
|
||
<div>
|
||
<span class="status-stopped">已停止</span> <small>(欠费锁定)</small>
|
||
</div>
|
||
<div class="action-group">
|
||
<button>远程连接</button>
|
||
<button>监控</button>
|
||
<button>更多...</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">强制停止</button>
|
||
<button class="btn-danger" onclick="confirmDelete()">彻底销毁</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pagination">
|
||
<button onclick="changePage(-1)">< 上一页</button>
|
||
<span id="pageInfo">第 1 / 5 页</span>
|
||
<button onclick="changePage(1)">下一页 ></button>
|
||
<select onchange="changePageSize(this)">
|
||
<option>每页 10 条</option>
|
||
<option>每页 20 条</option>
|
||
<option>每页 50 条</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>© 2025 HyperCloud Inc. | <a href="#">隐私政策</a> | <a href="#">服务条款</a></p>
|
||
<p>页面生成时间: 182ms | Request ID: req_uuid_998877</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- Components -->
|
||
|
||
<!-- Create Instance Modal -->
|
||
<div id="createModal" class="modal-overlay">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span>创建新实例 (ECI)</span>
|
||
<span onclick="closeCreateModal()" style="cursor:pointer; color:#999;">✕</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>实例名称</label>
|
||
<input type="text" id="newInstanceName" class="form-input" placeholder="例如: Web-Server-02">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>镜像</label>
|
||
<select id="newInstanceImage" class="form-input">
|
||
<option value="Ubuntu 22.04 LTS">Ubuntu 22.04 LTS</option>
|
||
<option value="CentOS 7.9">CentOS 7.9</option>
|
||
<option value="Aliyun Linux 3">Aliyun Linux 3</option>
|
||
<option value="Windows Server 2022">Windows Server 2022</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>规格</label>
|
||
<select id="newInstanceType" class="form-input">
|
||
<option value="2 vCPU / 4 GiB">ecs.t6-c1m2.large (2 vCPU / 4 GiB)</option>
|
||
<option value="4 vCPU / 8 GiB">ecs.c7.xlarge (4 vCPU / 8 GiB)</option>
|
||
<option value="8 vCPU / 16 GiB">ecs.g7.2xlarge (8 vCPU / 16 GiB)</option>
|
||
</select>
|
||
</div>
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<button onclick="closeCreateModal()" style="margin-right: 10px; padding: 6px 15px; border: 1px solid #d9d9d9; background: #fff; cursor: pointer; border-radius: 4px;">取消</button>
|
||
<button onclick="confirmCreate()" style="padding: 6px 15px; background: var(--primary); color: #fff; border: none; cursor: pointer; border-radius: 4px;">立即购买</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Instance Detail Drawer -->
|
||
<div id="drawerOverlay" class="drawer-overlay" onclick="closeDrawer()"></div>
|
||
<div id="detailDrawer" class="drawer">
|
||
<div class="drawer-header">
|
||
<h3 id="drawerTitle">Instance Details</h3>
|
||
<button onclick="closeDrawer()" style="border:none; background:none; cursor:pointer; font-size:16px;">✕</button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<div style="background: #f5f5f5; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
|
||
<p><strong>Status:</strong> <span style="color:green">Running</span></p>
|
||
<p><strong>Region:</strong> CN-East-2 (Zone B)</p>
|
||
<p><strong>Public IP:</strong> 139.196.128.44</p>
|
||
<p><strong>Private IP:</strong> 192.168.1.101</p>
|
||
</div>
|
||
|
||
<h4>监控概览 (1 Hour)</h4>
|
||
<div style="height: 100px; background: #fafafa; border: 1px solid #eee; display: flex; align-items: flex-end; padding: 10px; gap: 5px;">
|
||
<!-- Fake Chart Bars -->
|
||
<div style="width: 10%; height: 30%; background: #badde8;"></div>
|
||
<div style="width: 10%; height: 50%; background: #badde8;"></div>
|
||
<div style="width: 10%; height: 80%; background: #108ee9;"></div>
|
||
<div style="width: 10%; height: 60%; background: #badde8;"></div>
|
||
<div style="width: 10%; height: 40%; background: #badde8;"></div>
|
||
<div style="width: 10%; height: 90%; background: #f04134;"></div>
|
||
<div style="width: 10%; height: 50%; background: #badde8;"></div>
|
||
<div style="width: 10%; height: 30%; background: #badde8;"></div>
|
||
</div>
|
||
|
||
<h4 style="margin-top:20px;">配置信息</h4>
|
||
<ul style="line-height:2; color:#666;">
|
||
<li>Instance Type: ecs.g7.xlarge</li>
|
||
<li>Image ID: ubuntu_22_04_x64_20G_alibase</li>
|
||
<li>Security Group: sg-bp12345678</li>
|
||
<li>VPC ID: vpc-bp1abcdefg</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast">Action Successful</div>
|
||
|
||
<script>
|
||
// --- State Management ---
|
||
|
||
// Toast
|
||
function showToast(msg) {
|
||
const t = document.getElementById('toast');
|
||
t.innerText = msg;
|
||
t.classList.add('show');
|
||
setTimeout(() => t.classList.remove('show'), 3000);
|
||
}
|
||
|
||
// Modal Logic
|
||
function openCreateModal() {
|
||
document.getElementById('createModal').style.display = 'flex';
|
||
}
|
||
function closeCreateModal() {
|
||
document.getElementById('createModal').style.display = 'none';
|
||
document.getElementById('newInstanceName').value = '';
|
||
}
|
||
function confirmCreate() {
|
||
showToast('订单已提交，实例正在初始化...');
|
||
closeCreateModal();
|
||
// Here we could simulate adding a row, but for static demo toast is enough
|
||
setTimeout(() => {
|
||
// Simulate "Created" by navigating or refreshing? No, just an alert.
|
||
// Ideally we add a row to DOM
|
||
addInstanceRow();
|
||
}, 1000);
|
||
}
|
||
|
||
function addInstanceRow() {
|
||
const name = document.getElementById('newInstanceName').value || 'New-Instance-' + Math.floor(Math.random()*1000);
|
||
const list = document.querySelector('.instance-list');
|
||
const newRow = document.createElement('div');
|
||
newRow.className = 'list-row';
|
||
newRow.innerHTML = `
|
||
<div><input type="checkbox" class="row-checkbox"></div>
|
||
<div>
|
||
<strong onclick="openDrawer('${name}')">${name}</strong><br>
|
||
<small>镜像: Ubuntu 22.04</small>
|
||
</div>
|
||
<div><span>Checking...</span><br><span style="color:#999">192.168.1.${Math.floor(Math.random()*255)}</span></div>
|
||
<div><span>2 vCPU</span><br><span>4 GiB</span></div>
|
||
<div><span class="status-running" style="color:#fa8c16">启动中...</span></div>
|
||
<div class="action-group">
|
||
<button>管理</button>
|
||
</div>
|
||
`;
|
||
// Insert after header
|
||
list.insertBefore(newRow, list.children[1]);
|
||
}
|
||
|
||
// Drawer Logic
|
||
function openDrawer(name) {
|
||
document.getElementById('drawerTitle').innerText = name || 'Instance Details';
|
||
document.getElementById('drawerOverlay').style.display = 'block';
|
||
setTimeout(() => document.getElementById('detailDrawer').classList.add('open'), 10);
|
||
}
|
||
function closeDrawer() {
|
||
document.getElementById('detailDrawer').classList.remove('open');
|
||
setTimeout(() => document.getElementById('drawerOverlay').style.display = 'none', 300);
|
||
}
|
||
|
||
// Bind click events for all existing instance names
|
||
document.querySelectorAll('.list-row strong').forEach(el => {
|
||
// Remove old onclick
|
||
el.removeAttribute('onclick');
|
||
el.addEventListener('click', function() {
|
||
// Get name text
|
||
const name = this.innerText.split('(')[0].trim() || 'Instance';
|
||
openDrawer(name);
|
||
});
|
||
});
|
||
|
||
// Toolbar Actions
|
||
// 全选/取消全选
|
||
document.getElementById('selectAll').addEventListener('change', function(e) {
|
||
const checkboxes = document.querySelectorAll('.row-checkbox');
|
||
checkboxes.forEach(box => {
|
||
box.checked = e.target.checked;
|
||
});
|
||
});
|
||
|
||
function performAction(action) {
|
||
// Get selected
|
||
const checkboxes = document.querySelectorAll('.row-checkbox:checked');
|
||
if (checkboxes.length === 0) {
|
||
alert('请先选择至少一个实例');
|
||
return;
|
||
}
|
||
|
||
const count = checkboxes.length;
|
||
if(confirm(`确定要对选中的 ${count} 台实例执行 [${action.toUpperCase()}] 操作吗?`)) {
|
||
showToast(`指令已下发: ${action.toUpperCase()} ${count} instances`);
|
||
// Reset selection
|
||
checkboxes.forEach(c => c.checked = false);
|
||
document.getElementById('selectAll').checked = false;
|
||
}
|
||
}
|
||
|
||
// 危险操作二次确认
|
||
function confirmDelete() {
|
||
const userInput = prompt("这是一个高风险操作！\n请输入 'DELETE' 以确认销毁该实例：");
|
||
if (userInput === 'DELETE') {
|
||
showToast('操作已提交：实例正在销毁中...');
|
||
}
|
||
}
|
||
|
||
|
||
// -------------------------------------------------------------------------
|
||
// Enhanced Interactivity (New)
|
||
// -------------------------------------------------------------------------
|
||
|
||
// 1. Sidebar Filter
|
||
function filterByStatus(status, el) {
|
||
// Update URL hash for simulation
|
||
window.location.hash = status;
|
||
|
||
// Active state
|
||
document.querySelectorAll('.sidebar li a').forEach(a => a.classList.remove('active'));
|
||
if(el) el.classList.add('active');
|
||
|
||
const rows = document.querySelectorAll('.list-row:not(.ad-row):not(.billing-alert-row)');
|
||
|
||
rows.forEach(row => {
|
||
const statusText = row.querySelector('div:nth-child(5)').innerText.trim();
|
||
let show = false;
|
||
|
||
if (status === 'all') show = true;
|
||
else if (status === 'running' && (statusText.includes('运行中') || statusText.includes('启动中'))) show = true;
|
||
else if (status === 'stopped' && statusText.includes('已停止')) show = true;
|
||
else if (status === 'maintenance' && statusText.includes('维护')) show = true;
|
||
|
||
row.style.display = show ? 'grid' : 'none';
|
||
});
|
||
showToast(`已筛选: ${el ? el.innerText : status}`);
|
||
}
|
||
|
||
// 2. Toolbar Logic (Renamed to avoid conflict)
|
||
function performToolbarAction(action) {
|
||
// Re-use existing logic, just better naming
|
||
const checkboxes = document.querySelectorAll('.row-checkbox:checked');
|
||
if (checkboxes.length === 0) {
|
||
alert('请先勾选需要操作的实例');
|
||
return;
|
||
}
|
||
showToast(`正在对 ${checkboxes.length} 台实例执行 [${action}]...`);
|
||
setTimeout(() => {
|
||
showToast('操作指令已下发');
|
||
checkboxes.forEach(c => c.checked = false);
|
||
document.getElementById('selectAll').checked = false;
|
||
}, 800);
|
||
}
|
||
|
||
// 3. Row Actions
|
||
function remoteConnect(instanceId) {
|
||
const width = 800;
|
||
const height = 600;
|
||
const left = (screen.width - width) / 2;
|
||
const top = (screen.height - height) / 2;
|
||
// Open a fake terminal window
|
||
const win = window.open("", "_blank", `width=${width},height=${height},top=${top},left=${left}`);
|
||
win.document.write(`
|
||
<body style="background:#000; color:#0f0; font-family:monospace; padding:20px;">
|
||
<p>Connecting to ${instanceId}...</p>
|
||
<p>Authenticating...</p>
|
||
<p>Welcome to Ubuntu 22.04 LTS</p>
|
||
<p>root@${instanceId}:~# <span id="cursor">_</span></p>
|
||
<script>
|
||
setInterval(() => {
|
||
const c = document.getElementById('cursor');
|
||
c.style.visibility = c.style.visibility === 'hidden' ? 'visible' : 'hidden';
|
||
}, 500);
|
||
<\/script>
|
||
</body>
|
||
`);
|
||
}
|
||
|
||
function openMonitor(instanceId) {
|
||
openDrawer(instanceId + ' - 实时监控');
|
||
}
|
||
|
||
function showMoreMenu(btn) {
|
||
// Simple fallback
|
||
const actions = ['创建快照', '变更配置', '重置密码', '更换操作系统'];
|
||
const action = prompt(`[${actions.join(' | ')}]\n请输入要执行的操作:`, actions[0]);
|
||
if(action) {
|
||
showToast(`正在执行: ${action}`);
|
||
}
|
||
}
|
||
|
||
// 4. Search Bar
|
||
function searchInstances() {
|
||
const val = document.getElementById('searchInput').value;
|
||
if(!val) {
|
||
// refresh
|
||
showToast('刷新列表成功');
|
||
// reset filters
|
||
filterByStatus('all', document.querySelector('.sidebar a.active'));
|
||
} else {
|
||
showToast(`正在搜索 "${val}"...`);
|
||
}
|
||
}
|
||
|
||
function resetSearch() {
|
||
document.getElementById('searchInput').value = '';
|
||
// Trigger input event to clear filter
|
||
document.getElementById('searchInput').dispatchEvent(new Event('input'));
|
||
showToast('搜索条件已重置');
|
||
}
|
||
|
||
// 5. Pagination
|
||
let currentPage = 1;
|
||
function changePage(dir) {
|
||
const newPage = currentPage + dir;
|
||
if(newPage < 1 || newPage > 5) return;
|
||
|
||
currentPage = newPage;
|
||
document.getElementById('pageInfo').innerText = `第 ${currentPage} / 5 页`;
|
||
|
||
// Fake loading effect
|
||
const list = document.querySelector('.instance-list');
|
||
list.style.opacity = '0.5';
|
||
setTimeout(() => {
|
||
list.style.opacity = '1';
|
||
// Scroll to top
|
||
list.scrollIntoView({behavior: "smooth"});
|
||
}, 300);
|
||
}
|
||
|
||
function changePageSize(select) {
|
||
showToast(`分页设置已更新: ${select.value}`);
|
||
}
|
||
|
||
// 6. Billing & Ads
|
||
function openRecharge() {
|
||
if(confirm("将跳转至支付网关 (Alipay/WeChat)...")) {
|
||
showToast("正在跳转支付页面...");
|
||
}
|
||
}
|
||
|
||
function openProductIntro(product) {
|
||
showToast(`正在打开产品文档: ${product}...`);
|
||
}
|
||
|
||
// Override generic confirmDelete
|
||
window.confirmDelete = function(instanceId, isHard) {
|
||
if(confirm(`警告: 确定要${isHard ? '彻底销毁' : '强制停止'}实例 [${instanceId}] 吗？\n此操作不可逆！`)) {
|
||
showToast('操作已提交');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
</body>
|
||
</html> |