NetworkAuth/web/template/admin/dashboard.html

{{ define "dashboard.html" }}
<section>
  <h2>系统信息</h2>
  <div class="layui-row layui-col-space15" style="margin-top:12px">
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
          <div class="system-info-grid">
            <div class="system-info-item">
              <div class="system-info-label">版本</div>
              <div class="system-info-value">{{ .Version }}</div>
            </div>
            <div class="system-info-item">
              <div class="system-info-label">运行模式</div>
              <div class="system-info-value">{{ .Mode }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-card">
        <div class="layui-card-header">运行状态</div>
        <div class="layui-card-body">
          <div class="system-info-grid">
            <div class="system-info-item">
              <div class="system-info-label">数据库</div>
              <div class="system-info-value">{{ .DBType }}</div>
            </div>
            <div class="system-info-item">
              <div class="system-info-label">运行时长</div>
              <div class="system-info-value">{{ .Uptime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
  // 仪表盘统计脚本（采用箭头函数与中文注释）
  layui.use(['layer', 'util'], function () {
    const layer = layui.layer;
    const util = layui.util;
    const $ = layui.$;

    // 全局引用：ECharts CDN 地址
    const echartsCdn = 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js';

    // 工具函数：加载 ECharts 库（若已加载则直接回调）
    // 功能：通过全局的 loadScript 方法按需加载图表库，避免重复加载
    const ensureECharts = (cb) => {
      if (window.echarts) { cb && cb(); return; }
      if (typeof loadScript === 'function') {
        loadScript(echartsCdn, () => cb && cb());
      } else {
        // 兜底：直接插入 <script>
        const s = document.createElement('script');
        s.src = echartsCdn;
        s.onload = () => cb && cb();
        document.head.appendChild(s);
      }
    };

    // 函数：刷新基本信息和运行状态
    // 说明：请求后台获取最新的系统信息并更新页面显示
    const refreshSystemInfo = () => {
      $.get('/admin/api/system/info', (res) => {
        if (res && res.code === 0 && res.data) {
          const data = res.data;
          // 更新运行时长
          if (data.uptime) {
            $('.system-info-item').each(function () {
              const label = $(this).find('.system-info-label').text();
              if (label === '运行时长') {
                $(this).find('.system-info-value').text(data.uptime);
              }
            });
          }
        }
      }).fail(() => {
        console.log('获取系统信息失败');
      });
    };

    // 立即刷新一次系统信息
    refreshSystemInfo();
  });
</script>
{{ end }}