483 lines
22 KiB
HTML
483 lines
22 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; }
|
||
</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="#" class="active">全部实例 (14)</a></li>
|
||
<li><a href="#">运行中 (10)</a></li>
|
||
<li><a href="#">已停止 (3)</a></li>
|
||
<li><a href="#">异常/维护 (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" 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="alert('Searching...')">刷新列表</button>
|
||
<button type="button">重置</button>
|
||
</fieldset>
|
||
</form>
|
||
|
||
<div class="toolbar">
|
||
<button>启动</button>
|
||
<button>停止</button>
|
||
<button>重启</button>
|
||
<button>释放设置</button>
|
||
<button>修改计费模式</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>远程连接</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-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;">立即开通</button>
|
||
<button>了解详情</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 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>< 上一页</button>
|
||
<span>第 1 / 5 页</span>
|
||
<button>下一页 ></button>
|
||
<select>
|
||
<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>
|
||
|
||
<script>
|
||
// 脚本逻辑：处理全选和危险操作确认
|
||
|
||
// 全选/取消全选
|
||
document.getElementById('selectAll').addEventListener('change', function(e) {
|
||
const checkboxes = document.querySelectorAll('.row-checkbox');
|
||
checkboxes.forEach(box => {
|
||
box.checked = e.target.checked;
|
||
});
|
||
});
|
||
|
||
// 危险操作二次确认
|
||
function confirmDelete() {
|
||
const userInput = prompt("这是一个高风险操作！\n请输入 'DELETE' 以确认销毁该实例：");
|
||
if (userInput === 'DELETE') {
|
||
alert('操作已提交：实例正在销毁中...');
|
||
} else {
|
||
alert('操作已取消。');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |