{% extends "base.html" %}
{% set active = "dashboard" %}
{% block title %}仪表盘{% endblock %}
{% block content %}
<div class="header">
    <h1>📊 仪表盘</h1>
    <div class="actions"><button class="btn btn-primary btn-sm" onclick="refresh()">刷新</button></div>
</div>
<div class="grid grid-4">
    <div class="card"><div class="stat"><div class="num" id="cpu">-</div><div class="label">CPU 核心数</div></div></div>
    <div class="card"><div class="stat"><div class="num" id="mem">-</div><div class="label">内存使用</div><div class="progress"><div class="progress-bar" id="mem-bar" style="background:#3498DB;width:0%"></div></div></div></div>
    <div class="card"><div class="stat"><div class="num" id="disk">-</div><div class="label">磁盘使用</div><div class="progress"><div class="progress-bar" id="disk-bar" style="background:#E67E22;width:0%"></div></div></div></div>
    <div class="card"><div class="stat"><div class="num" id="uptime">-</div><div class="label">运行时间</div></div></div>
</div>
<div class="grid grid-2">
    <div class="card">
        <h3>🌐 Nginx 状态</h3>
        <div id="nginx-info">加载中...</div>
    </div>
    <div class="card">
        <h3>🗄️ MySQL 状态</h3>
        <div id="mysql-info">加载中...</div>
    </div>
</div>
<div class="card">
    <h3>🐘 PHP 版本</h3>
    <div id="php-info">加载中...</div>
</div>
{% endblock %}
{% block scripts %}
<script>
function refresh(){
api('/api/system/info').then(function(d){
document.getElementById('cpu').textContent=d.cpu_count||'-';
document.getElementById('mem').textContent=d.mem_percent+'%';
document.getElementById('mem-bar').style.width=d.mem_percent+'%';
document.getElementById('disk').textContent=d.disk_percent+'%';
document.getElementById('disk-bar').style.width=d.disk_percent+'%';
document.getElementById('uptime').textContent=d.uptime_str||'-';
});
api('/api/nginx/status').then(function(d){
var s=d.status==='running'?'<span class="badge badge-success">运行中</span>':'<span class="badge badge-danger">已停止</span>';
document.getElementById('nginx-info').innerHTML='<p>'+s+' · '+d.version+'</p>';
});
api('/api/mysql/status').then(function(d){
var s=d.status==='running'?'<span class="badge badge-success">运行中</span>':'<span class="badge badge-danger">已停止</span>';
var dbs=d.databases?d.databases.length:0;
document.getElementById('mysql-info').innerHTML='<p>'+s+' · '+d.version+'</p><p style="margin-top:8px;color:#7F8C8D">数据库: '+dbs+'个</p>';
});
api('/api/php/info').then(function(d){
document.getElementById('php-info').innerHTML='<p>当前版本: <strong>'+d.current+'</strong></p><p style="margin-top:8px;color:#7F8C8D">已安装: '+(d.versions.length||0)+'个版本</p>';
});
}
refresh();
</script>
{% endblock %}