{{template "layout.html" .}}
<div class="stats">
  <div class="stat blue">
    <div class="stat-head">
      <span class="stat-label">文章总数</span>
      <div class="stat-icon primary">📄</div>
    </div>
    <div class="stat-num">{{.article_count}}</div>
    <div class="stat-change">全部文章</div>
  </div>
  <div class="stat green">
    <div class="stat-head">
      <span class="stat-label">栏目总数</span>
      <div class="stat-icon green">📁</div>
    </div>
    <div class="stat-num">{{.category_count}}</div>
    <div class="stat-change">全部分类</div>
  </div>
  <div class="stat purple">
    <div class="stat-head">
      <span class="stat-label">今日访客</span>
      <div class="stat-icon purple">👤</div>
    </div>
    <div class="stat-num">{{.today_visitors}}</div>
    <div class="stat-change">独立 IP</div>
  </div>
  <div class="stat orange">
    <div class="stat-head">
      <span class="stat-label">今日访问</span>
      <div class="stat-icon orange">👁</div>
    </div>
    <div class="stat-num">{{.today_pageviews}}</div>
    <div class="stat-change">页面浏览</div>
  </div>
</div>

<div class="card">
  <div class="card-hd">⚡ 快捷操作</div>
  <div class="card-bd">
    <div class="qa-grid">
      <a href="/admin/article/form" class="qa-card">
        <div class="qa-ico" style="background:var(--primary-bg);color:var(--primary)">✎</div>
        <div><div class="qa-lbl">发布文章</div><div class="qa-sub">撰写新内容</div></div>
      </a>
      <a href="/admin/category/form" class="qa-card">
        <div class="qa-ico" style="background:var(--success-bg);color:var(--success)">⊞</div>
        <div><div class="qa-lbl">添加栏目</div><div class="qa-sub">创建新分类</div></div>
      </a>
      <a href="/admin/config/website" class="qa-card">
        <div class="qa-ico" style="background:var(--warning-bg);color:var(--warning)">⚙</div>
        <div><div class="qa-lbl">网站设置</div><div class="qa-sub">配置站点信息</div></div>
      </a>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-hd flex items-center justify-between">
    <span>📊 运行监控 <span style="font-weight:400;font-size:12px;color:var(--gray-400)">实时更新（2s间隔）</span></span>
    <a href="javascript:void(0)" onclick="toggleNet()" style="font-size:12px;color:var(--primary);text-decoration:none" id="netToggle">📶 流量监控</a>
  </div>
  <div class="card-bd">
    <div class="monitor-grid">
      <div class="monitor-chart" id="cpuChart" style="height:220px"></div>
      <div class="monitor-chart" id="memChart" style="height:220px"></div>
      <div class="monitor-chart" id="goMemChart" style="height:220px"></div>
      <div class="monitor-chart" id="loadChart" style="height:220px"></div>
    </div>
    <div id="netSection" style="display:none">
      <div class="monitor-grid" style="margin-top:12px">
        <div class="monitor-chart" id="netUpChart" style="height:220px"></div>
        <div class="monitor-chart" id="netDownChart" style="height:220px"></div>
      </div>
    </div>
    <div class="monitor-line" id="trendChart" style="height:200px;margin-top:12px"></div>
  </div>
</div>

<div class="card">
  <div class="card-hd">ℹ 系统信息</div>
  <div class="card-bd" style="color:var(--gray-400);font-size:13px">
    EagleCMS v1.0 · Go + Gin + GORM + SQLite · 2026 · <a href="https://www.eagleclouds.com" target="_blank" style="color:var(--primary);text-decoration:none">Powered by EagleClouds.com</a>
  </div>
</div>

<script src="/static/lib/echarts.min.js"></script>
<style>
.monitor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.monitor-chart{background:var(--gray-50);border-radius:10px;padding:6px}
.monitor-line{background:var(--gray-50);border-radius:10px;padding:6px}
#netSection .monitor-grid{grid-template-columns:1fr 1fr}
@media(max-width:992px){.monitor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.monitor-grid{grid-template-columns:1fr}}
</style>
<script>
var cpuChart=echarts.init(document.getElementById('cpuChart'));
var memChart=echarts.init(document.getElementById('memChart'));
var goMemChart=echarts.init(document.getElementById('goMemChart'));
var loadChart=echarts.init(document.getElementById('loadChart'));
var netUpChart=echarts.init(document.getElementById('netUpChart'));
var netDownChart=echarts.init(document.getElementById('netDownChart'));
var trendChart=echarts.init(document.getElementById('trendChart'));

var gaugeOpt={
  series:[{type:'gauge',center:['50%','55%'],radius:'85%',startAngle:220,endAngle:-40,
    min:0,max:100,splitNumber:5,
    axisLine:{lineStyle:{width:8,color:[[0.5,'#22c55e'],[0.8,'#eab308'],[1,'#ef4444']]}},
    axisTick:{length:6,lineStyle:{color:'auto'}},
    splitLine:{length:10,lineStyle:{color:'auto'}},
    axisLabel:{fontSize:10,distance:2,color:'#94a3b8'},
    detail:{fontSize:18,fontWeight:'bold',formatter:'{value}%',offsetCenter:[0,'40%'],color:'#1e293b'},
    title:{offsetCenter:[0,'70%'],fontSize:12,color:'#64748b'},
    pointer:{width:4}
  }]
};

var goMemGaugeOpt={
  series:[{type:'gauge',center:['50%','55%'],radius:'85%',startAngle:220,endAngle:-40,
    min:0,max:200,splitNumber:4,
    axisLine:{lineStyle:{width:8,color:[[0.5,'#22c55e'],[0.8,'#3b82f6'],[1,'#8b5cf6']]}},
    axisTick:{length:6,lineStyle:{color:'auto'}},
    splitLine:{length:10,lineStyle:{color:'auto'}},
    axisLabel:{fontSize:10,distance:2,color:'#94a3b8'},
    detail:{fontSize:16,fontWeight:'bold',formatter:'{value} MB',offsetCenter:[0,'40%'],color:'#1e293b'},
    title:{offsetCenter:[0,'70%'],fontSize:12,color:'#64748b'},
    pointer:{width:4}
  }]
};

var loadLevels=['🟢 空闲','🔵 正常','🟡 较高','🟠 繁忙','🔴 满载'];
var loadGaugeOpt={
  series:[{type:'gauge',center:['50%','55%'],radius:'85%',startAngle:220,endAngle:-40,
    min:0,max:100,splitNumber:5,
    axisLine:{lineStyle:{width:8,color:[[0.2,'#22c55e'],[0.5,'#3b82f6'],[0.7,'#eab308'],[0.9,'#f97316'],[1,'#ef4444']]}},
    axisTick:{length:6,lineStyle:{color:'auto'}},
    splitLine:{length:10,lineStyle:{color:'auto'}},
    axisLabel:{fontSize:10,distance:2,color:'#94a3b8'},
    detail:{fontSize:16,fontWeight:'bold',formatter:function(v){var i=v>=90?4:v>=70?3:v>=50?2:v>=20?1:0;return loadLevels[i]},offsetCenter:[0,'40%'],color:'#1e293b'},
    title:{offsetCenter:[0,'70%'],fontSize:12,color:'#64748b'},
    pointer:{width:4}
  }]
};

var netGaugeOpt={
  series:[{type:'gauge',center:['50%','55%'],radius:'85%',startAngle:220,endAngle:-40,
    min:0,max:1024,splitNumber:4,
    axisLine:{lineStyle:{width:8,color:[[0.3,'#22c55e'],[0.6,'#3b82f6'],[1,'#f59e0b']]}},
    axisTick:{length:6,lineStyle:{color:'auto'}},
    splitLine:{length:10,lineStyle:{color:'auto'}},
    axisLabel:{fontSize:10,distance:2,color:'#94a3b8'},
    detail:{fontSize:15,fontWeight:'bold',formatter:'{value} KB/s',offsetCenter:[0,'40%'],color:'#1e293b'},
    title:{offsetCenter:[0,'70%'],fontSize:12,color:'#64748b'},
    pointer:{width:4}
  }]
};

cpuChart.setOption(Object.assign({},gaugeOpt,{title:{text:'CPU 使用率',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},gaugeOpt.series[0],{data:[{value:0,name:'CPU'}]})]}));
memChart.setOption(Object.assign({},gaugeOpt,{title:{text:'内存使用率',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},gaugeOpt.series[0],{data:[{value:0,name:'内存'}]})]}));
goMemChart.setOption(Object.assign({},goMemGaugeOpt,{title:{text:'Go 内存',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},goMemGaugeOpt.series[0],{data:[{value:0,name:'Go'}]})]}));
loadChart.setOption(Object.assign({},loadGaugeOpt,{title:{text:'负载状态',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},loadGaugeOpt.series[0],{data:[{value:0,name:'负载'}]})]}));
netUpChart.setOption(Object.assign({},netGaugeOpt,{title:{text:'上行速度',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},netGaugeOpt.series[0],{data:[{value:0,name:'↑'}]})]}));
netDownChart.setOption(Object.assign({},netGaugeOpt,{title:{text:'下行速度',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},series:[Object.assign({},netGaugeOpt.series[0],{data:[{value:0,name:'↓'}]})]}));

trendChart.setOption({
  title:{text:'实时趋势',left:'center',top:0,textStyle:{fontSize:14,color:'#1e293b'}},
  tooltip:{trigger:'axis'},
  legend:{data:['CPU%','内存%'],bottom:0,icon:'circle',itemWidth:8,textStyle:{fontSize:11,color:'#64748b'}},
  grid:{left:45,right:10,top:36,bottom:36},
  xAxis:{type:'time',splitLine:{show:false},axisLabel:{fontSize:10,color:'#94a3b8'}},
  yAxis:{type:'value',name:'%',max:100,splitLine:{lineStyle:{color:'#f1f5f9',type:'dashed'}},axisLabel:{fontSize:10,color:'#94a3b8'}},
  series:[
    {name:'CPU%',type:'line',smooth:true,symbol:'none',lineStyle:{width:2,color:'#3b82f6'},data:[]},
    {name:'内存%',type:'line',smooth:true,symbol:'none',lineStyle:{width:2,color:'#22c55e'},data:[]},
  ]
});

var trendData={cpu:[],mem:[]};

function fetchMonitor(){
  fetch('/admin/api/monitor')
    .then(function(r){return r.json()})
    .then(function(d){
      var now=Date.now();
      cpuChart.setOption({series:[{data:[{value:d.cpu}]}]});
      memChart.setOption({series:[{data:[{value:d.memory}]}]});
      goMemChart.setOption({series:[{data:[{value:+(d.go_memory/1024/1024).toFixed(1)}]}]});
      var loadVal=Math.min(100,Math.round(d.cpu*0.6+d.memory*0.4));
      loadChart.setOption({series:[{data:[{value:loadVal}]}]});
      netUpChart.setOption({series:[{data:[{value:+(d.net_up).toFixed(1)}]}]});
      netDownChart.setOption({series:[{data:[{value:+(d.net_down).toFixed(1)}]}]});
      trendData.cpu.push([now,d.cpu]);trendData.mem.push([now,d.memory]);
      if(trendData.cpu.length>60){trendData.cpu.shift();trendData.mem.shift()}
      trendChart.setOption({series:[{data:trendData.cpu},{data:trendData.mem}]});
    })
}
fetchMonitor();
setInterval(fetchMonitor,2000);

function toggleNet(){
  var s=document.getElementById('netSection');
  var t=document.getElementById('netToggle');
  if(s.style.display==='none'){
    s.style.display='block';
    t.textContent='📶 收起流量';
    setTimeout(function(){netUpChart.resize();netDownChart.resize()},100);
  }else{
    s.style.display='none';
    t.textContent='📶 流量监控';
  }
}
window.addEventListener('resize',function(){cpuChart.resize();memChart.resize();goMemChart.resize();loadChart.resize();netUpChart.resize();netDownChart.resize();trendChart.resize()});
</script>

</body>
</html>