<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>概览 - 云开发控制台</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="console-container">
<!-- Top Header -->
<header class="console-header">
<div class="console-header-left">
<div class="console-logo">腾讯云 CloudBase DEV</div>
<div class="console-env-selector">
<span>tcb-advanced</span>
<span style="color: #999;">个人版</span>
<span>▼</span>
</div>
<a href="#" style="color: #666; text-decoration: none; font-size: 14px;">接入指引</a>
</div>
<div class="console-header-right">
<input type="text" class="console-search" placeholder="请输入关键词快捷搜索产品功能">
<div class="console-header-icons">
<div class="console-icon-button"><i class="fas fa-bell"></i></div>
<div class="console-icon-button"><i class="fas fa-bookmark"></i></div>
<div class="console-icon-button"><i class="fas fa-palette"></i></div>
<div class="console-icon-button" style="width: 32px; height: 32px; border-radius: 50%; background: #52c41a; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center;">B</div>
</div>
</div>
</header>
<!-- Left Sidebar -->
<aside class="console-sidebar">
<ul class="console-sidebar-nav">
<li class="console-sidebar-item">
<a href="index.html" class="console-sidebar-link active disabled">
<span class="console-sidebar-icon"><i class="fas fa-chart-line"></i></span>
<span>概览</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-cube"></i></span>
<span>模板中心</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-file-alt"></i></span>
<span>文档型数据库</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="database.html" class="console-sidebar-link">
<span class="console-sidebar-icon"><i class="fas fa-database"></i></span>
<span>MySQL 数据库</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="function.html" class="console-sidebar-link">
<span class="console-sidebar-icon"><i class="fas fa-bolt"></i></span>
<span>云函数</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-rocket"></i></span>
<span>云托管</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-folder"></i></span>
<span>云存储</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-robot"></i></span>
<span>AI+</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-globe"></i></span>
<span>静态网站托管</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="auth.html" class="console-sidebar-link">
<span class="console-sidebar-icon"><i class="fas fa-lock"></i></span>
<span>身份认证</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-tools"></i></span>
<span>微搭低代码</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-clipboard-list"></i></span>
<span>日志监控</span>
</a>
</li>
<li class="console-sidebar-item">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-cog"></i></span>
<span>扩展功能</span>
</a>
</li>
<li class="console-sidebar-item" style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e5e5;">
<a href="#" class="console-sidebar-link disabled">
<span class="console-sidebar-icon"><i class="fas fa-globe-americas"></i></span>
<span>环境管理</span>
</a>
</li>
</ul>
</aside>
<!-- Main Content -->
<main class="console-content">
<div class="page-title">
<span>概览</span>
</div>
<div style="background: #fff; padding: 24px; border-radius: 4px; margin-bottom: 16px;">
<div style="font-size: 20px; font-weight: 600; margin-bottom: 8px;">欢迎使用云开发平台,高效搞定应用开发</div>
<div style="font-size: 14px; color: #666;">云原生一体化应用开发平台,多种工具免服务器帮您搭建小程序、Web、移动应用</div>
</div>
<div style="background: #fff; padding: 24px; border-radius: 4px; margin-bottom: 16px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
<div style="font-size: 16px; font-weight: 600;">数据概览 近1小时</div>
<a href="#" style="color: #1890ff; text-decoration: none; font-size: 14px;">查看更多</a>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;">
<div style="padding: 16px; background: #fafafa; border-radius: 6px;">
<div style="font-size: 14px; color: #999; margin-bottom: 8px;">调用次数(次)</div>
<div style="font-size: 24px; font-weight: 600;">1,234</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px;">
<div style="font-size: 14px; color: #999; margin-bottom: 8px;">存储容量(MB)</div>
<div style="font-size: 24px; font-weight: 600;">2,800</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px;">
<div style="font-size: 14px; color: #999; margin-bottom: 8px;">QPS</div>
<div style="font-size: 24px; font-weight: 600;">45</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px;">
<div style="font-size: 14px; color: #999; margin-bottom: 8px;">CDN流量(MB)</div>
<div style="font-size: 24px; font-weight: 600;">10.2</div>
</div>
</div>
</div>
<div style="background: #fff; padding: 24px; border-radius: 4px; margin-bottom: 16px;">
<div style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">环境风险</div>
<div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #ff4d4f;">安全风险 5</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #fafafa; border-radius: 4px;">
<div style="flex: 1; font-size: 14px; color: #666;">
建议开启静态环境托管IP访问限制,有效防止资源被滥用、盗用和异常调用,保障成本可控性
</div>
<a href="#" style="color: #1890ff; text-decoration: none; font-size: 14px; margin-left: 16px;">去解决</a>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #fafafa; border-radius: 4px;">
<div style="flex: 1; font-size: 14px; color: #666;">
建议开启 MySQL 数据库备份与回档能力,避免因相关人员误操作或灰产攻击等意外导致无法挽回的数据丢失...
</div>
<a href="#" style="color: #1890ff; text-decoration: none; font-size: 14px; margin-left: 16px;">去解决</a>
</div>
</div>
</div>
<div style="background: #fff; padding: 24px; border-radius: 4px; margin-bottom: 16px;">
<div style="font-size: 16px; font-weight: 600; margin-bottom: 16px;">慢查询</div>
<div style="text-align: center; padding: 40px; color: #999;">
<div style="font-size: 48px; margin-bottom: 16px; color: #d9d9d9;"><i class="fas fa-file-alt"></i></div>
<div style="font-size: 14px;">当前无慢查询记录,数据库状态健康</div>
</div>
</div>
<div style="background: #fff; padding: 24px; border-radius: 4px;">
<div style="display: flex; gap: 24px; border-bottom: 1px solid #e5e5e5; margin-bottom: 16px;">
<div style="padding: 8px 0; border-bottom: 2px solid #1890ff; color: #1890ff; font-weight: 500; cursor: pointer;">模板</div>
<div style="padding: 8px 0; color: #666; cursor: pointer;">AI Builder 生成模板</div>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;">
<div style="padding: 16px; background: #fafafa; border-radius: 6px; text-align: center; cursor: pointer;">
<div style="font-size: 32px; margin-bottom: 8px; color: #1890ff;"><i class="fab fa-react"></i></div>
<div style="font-size: 14px; font-weight: 600;">React 前端框架</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px; text-align: center; cursor: pointer;">
<div style="font-size: 32px; margin-bottom: 8px; color: #42b883;"><i class="fab fa-vuejs"></i></div>
<div style="font-size: 14px; font-weight: 600;">Vue 前端框架</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px; text-align: center; cursor: pointer;">
<div style="font-size: 32px; margin-bottom: 8px; color: #07c160;"><i class="fab fa-weixin"></i></div>
<div style="font-size: 14px; font-weight: 600;">Miniapp 前端框架</div>
</div>
<div style="padding: 16px; background: #fafafa; border-radius: 6px; text-align: center; cursor: pointer;">
<div style="font-size: 32px; margin-bottom: 8px; color: #1890ff;"><i class="fas fa-mobile-alt"></i></div>
<div style="font-size: 14px; font-weight: 600;">UniApp 前端框架</div>
</div>
</div>
</div>
</main>
</div>
<script src="js/panel.js"></script>
</body>
</html>
