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-md8">
      <div class="layui-panel">
        <div style="padding: 20px;">
          <h3 style="margin-top: 0; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid var(--lay-color-border-2); padding-bottom: 10px;">系统信息</h3>
          <table class="layui-table" lay-skin="nob">
            <tbody>
              <tr>
                <td style="width: 120px; font-weight: bold;">程序版本</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span class="layui-badge layui-bg-blue" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">v{{ .Version }}</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">存储方案</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span class="layui-badge layui-bg-cyan" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">{{ .DBType }}</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">开发模式</td>
                <td style="height: 20px; vertical-align: middle;">
                  {{ if .Mode }}
                    <span class="layui-badge layui-bg-orange" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">开启</span>
                  {{ else }}
                    <span class="layui-badge layui-bg-green" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">关闭</span>
                  {{ end }}
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">运行时长</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="uptime-display" class="layui-badge layui-bg-gray" style="font-size: 14px; padding: 2px 8px; line-height: 1.2;">{{ .Uptime }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
    <!-- 系统统计面板 (预留) -->
    <div class="layui-col-md4">
      <div class="layui-panel">
        <div style="padding: 20px;">
          <h3 style="margin-top: 0; margin-bottom: 15px; font-weight: bold; border-bottom: 1px solid var(--lay-color-border-2); padding-bottom: 10px;">系统统计</h3>
          <table class="layui-table" lay-skin="nob">
            <tbody>
              <tr>
                <td style="width: 120px; font-weight: bold;">应用总数</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="total-apps" class="layui-badge" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">启用应用</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="enabled-apps" class="layui-badge layui-bg-green" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">禁用应用</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="disabled-apps" class="layui-badge layui-bg-gray" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
              <tr>
                <td style="font-weight: bold;">变量总数</td>
                <td style="height: 20px; vertical-align: middle;">
                  <span id="total-variables" class="layui-badge layui-bg-orange" style="font-size: 14px; padding: 2px 8px; min-width: 30px; text-align: center; line-height: 1.2;">0</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <h2 style="margin-top: 20px;">最近登录日志</h2>
  <div class="layui-panel" style="margin-top:12px">
    <div style="padding: 20px;">
      <table id="loginLogsTable" lay-filter="loginLogsTable"></table>
    </div>
  </div>
</section>

<script>
  // 仪表盘脚本
  layui.use(['jquery', 'table', 'util'], () => {
    const $ = layui.$;
    const table = layui.table;
    const util = layui.util;

    // 刷新基本信息和运行状态
    const refreshSystemInfo = () => {
      $.get('/admin/api/system/info', (res) => {
        if (res && res.code === 0 && res.data) {
          const data = res.data;
          if (data.uptime) {
            const uptimeElement = $('#uptime-display');
            uptimeElement.text(data.uptime);
            if (!uptimeElement.hasClass('layui-badge')) {
              uptimeElement.addClass('layui-badge layui-bg-gray');
              uptimeElement.css({
                'font-size': '14px',
                'padding': '2px 8px',
                'line-height': '1.2'
              });
            }
          }
        }
      }).fail(() => {
        console.log('获取系统信息失败');
      });
    };

    // 刷新系统统计数据
    const refreshAppStats = () => {
      $.get('/admin/api/dashboard/stats', (res) => {
        if (res && res.code === 0 && res.data) {
          const data = res.data;
          $('#total-apps').text(data.total_apps || 0);
          $('#enabled-apps').text(data.enabled_apps || 0);
          $('#disabled-apps').text(data.disabled_apps || 0);
          $('#total-variables').text(data.total_variables || 0);
        }
      }).fail(() => {
        $('#total-apps').text('0');
        $('#enabled-apps').text('0');
        $('#disabled-apps').text('0');
        $('#total-variables').text('0');
      });
    };

    // 立即刷新一次
    refreshSystemInfo();
    refreshAppStats();

    // 渲染登录日志表格
    table.render({
      elem: '#loginLogsTable',
      url: '/admin/api/dashboard/login-logs',
      page: true,
      limit: 10,
      limits: [10, 20, 30, 50],
      cols: [[
        {field: 'created_at', title: '登录时间', width: 180, templet: (d) => {
            return util.toDateString(d.created_at);
        }},
        {field: 'username', title: '用户名', width: 150},
        {field: 'ip', title: '登录IP', width: 150},
        {field: 'status', title: '状态', width: 100, align: 'center', templet: (d) => {
            return d.status === 1 ? 
              '<span class="layui-badge layui-bg-green">成功</span>' : 
              '<span class="layui-badge layui-bg-red">失败</span>';
        }},
        {field: 'message', title: '详情', minWidth: 150},
        {field: 'user_agent', title: 'User Agent', minWidth: 200, templet: (d) => {
            return '<div title="'+d.user_agent+'" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">'+d.user_agent+'</div>';
        }}
      ]],
      response: {
          statusCode: 0
      },
      parseData: (res) => {
          return {
            "code": res.code,
            "msg": res.msg,
            "count": res.data ? res.data.total : 0,
            "data": res.data ? res.data.list : []
          };
      }
    });
  });
</script>
{{ end }}