{$layout}

{$var "header"}
<link rel="stylesheet" type="text/css" href="/_/@default/dashboard/boards/user.css" media="all" />
<script type="text/javascript" src="/js/antd/g2plot.min.js" type="module"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
{$end}

{$template "menu"}
{$template "/echarts"}



<div class="dashboard-container">
  <!-- 加载中 -->
  <div class="loading-wrapper" v-if="isLoading">
    <div class="ui message loading">
      <div class="ui active inline loader small"></div>  &nbsp; {{t('waf_数据加载中_f09b')}}...
    </div>
  </div>

  <div class="dashboard-content" v-show="!isLoading">
    <!-- 统计数据卡片区域 -->
    <div class="stats-card-grid">
      <div class="stat-card" @click="goToURL('/users')">
        <div class="stat-icon blue">
          <i class="pi pi-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            {{board.totalUsers}}
            <span v-if="board.countVerifyingUsers > 0" class="stat-badge">{{board.countVerifyingUsers}}{{t('user_待审核_5cb4')}}</span>
          </div>
          <div class="stat-label">{{t('user_用户总数_1149')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/users')">
        <div class="stat-icon green">
          <i class="pi pi-plus-circle"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countTodayUsers}}</div>
          <div class="stat-label">{{t('user_今日新增_b29a')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/users')">
        <div class="stat-icon orange">
          <i class="pi pi-calendar"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{board.countWeeklyUsers}}</div>
          <div class="stat-label">{{t('user_本周新增_06e7')}}</div>
        </div>
      </div>
      
      <div class="stat-card" @click="goToURL('/settings/userNodes')">
        <div class="stat-icon purple">
          <i class="pi pi-server"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            {{board.countUserNodes}}
            <span v-if="board.countOfflineUserNodes > 0" class="stat-badge">{{board.countOfflineUserNodes}}{{t('user_离线_50d4')}}</span>
          </div>
          <div class="stat-label">{{t('user_用户节点_c258')}}</div>
        </div>
      </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('user_用户增长趋势_b065')}}</h4>
            <a href="/users" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="daily-stat-chart"></div>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <div class="chart-card">
          <div class="card-header">
            <h4>{{t('user_流量排行_2f35')}}<span>（24{{t('waf_小时_2de0')}}）</span></h4>
            <a href="/users" class="more-link"><i class="pi pi-arrow-right"></i></a>
          </div>
          <div class="chart-content">
            <div class="chart-box" id="top-traffic-chart"></div>
          </div>
        </div>
      </div>
      
    </div>
    <!-- 系统监控 -->
    <div class="chart-container system-monitoring">
        <div class="chart-card">
          <div class="system-monitoring-header">
            <h4>{{t('user_系统监控_c846')}}</h4>
          </div>
          <div class="chart-system-monitoring">
            <div class="chart-card">
              <div class="card-header">
                <h4>CPU</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="cpu-chart"></div>
              </div>
            </div>
            <div class="chart-card">
              <div class="card-header">
                <h4>{{t('user_内存_9932')}}</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="memory-chart"></div>
              </div>
            </div>
            <div class="chart-card">
              <div class="card-header">
                <h4>{{t('user_负载_4956')}}</h4>
              </div>
              <div class="chart-content">
                <div class="chart-box" id="load-chart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>