{% extends "base.html" %} {% block title %} 控制台 - Amrita Dashboard {%
endblock %} {% block extra_css %}
<style>
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .stat-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    display: flex;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  body.dark-mode .stat-card {
    background: var(--dark-card-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  body.dark-mode .stat-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }

  .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
  }

  .stat-icon.blue {
    background: rgba(138, 43, 226, 0.1);
    color: var(--primary-color);
  }

  body.dark-mode .stat-icon.blue {
    background: rgba(138, 43, 226, 0.2);
    color: var(--accent-color);
  }

  .stat-icon.green {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
  }

  body.dark-mode .stat-icon.green {
    background: rgba(46, 204, 113, 0.2);
  }

  .stat-icon.orange {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
  }

  body.dark-mode .stat-icon.orange {
    background: rgba(243, 156, 18, 0.2);
  }

  .stat-icon.purple {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
  }

  body.dark-mode .stat-icon.purple {
    background: rgba(155, 89, 182, 0.2);
  }

  .stat-info h3 {
    font-size: 24px;
    margin-bottom: 5px;
  }

  body.dark-mode .stat-info h3 {
    color: var(--dark-text-color);
  }

  .stat-info p {
    color: #777;
    font-size: 14px;
  }

  body.dark-mode .stat-info p {
    color: #aaa;
  }

  .charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
  }

  .chart-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
  }

  body.dark-mode .chart-card {
    background: var(--dark-card-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .chart-title {
    font-size: 18px;
    font-weight: 600;
  }

  body.dark-mode .chart-title {
    color: var(--dark-text-color);
  }

  .chart-actions button {
    background: none;
    border: none;
    color: #777;
    cursor: pointer;
    margin-left: 10px;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.3s;
  }

  body.dark-mode .chart-actions button {
    color: #aaa;
  }

  .chart-actions button:hover {
    background: #f0f0f0;
  }

  body.dark-mode .chart-actions button:hover {
    background: var(--dark-sidebar-hover);
  }

  .chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
  }

  body.dark-mode .chart-container {
    background: #333;
  }

  .chart-placeholder {
    text-align: center;
    color: #777;
  }

  body.dark-mode .chart-placeholder {
    color: #aaa;
  }

  .chart-placeholder i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ddd;
  }

  body.dark-mode .chart-placeholder i {
    color: #555;
  }

  .recent-activity {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
  }

  body.dark-mode .recent-activity {
    background: var(--dark-card-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }

  .activity-list {
    list-style: none;
  }

  .activity-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
  }

  .activity-item:last-child {
    border-bottom: none;
  }

  body.dark-mode .activity-item {
    border-bottom: 1px solid var(--dark-border-color);
  }

  .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .activity-icon.yellow {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
  }

  body.dark-mode .activity-icon.yellow {
    background: rgba(243, 156, 18, 0.2);
  }

  .activity-icon.purple {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
  }

  body.dark-mode .activity-icon.purple {
    background: rgba(155, 89, 182, 0.2);
  }

  .activity-icon.red {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
  }

  body.dark-mode .activity-icon.red {
    background: rgba(231, 76, 60, 0.2);
  }

  .activity-icon.blue {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
  }

  body.dark-mode .activity-icon.blue {
    background: rgba(52, 152, 219, 0.2);
  }

  .activity-icon.green {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
  }

  body.dark-mode .activity-icon.green {
    background: rgba(46, 204, 113, 0.2);
  }

  .activity-icon.orange {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
  }

  body.dark-mode .activity-icon.orange {
    background: rgba(243, 156, 18, 0.2);
  }

  .activity-content {
    flex: 1;
  }

  .activity-title {
    font-weight: 500;
    margin-bottom: 5px;
  }

  body.dark-mode .activity-title {
    color: var(--dark-text-color);
  }

  .activity-desc {
    color: #777;
    font-size: 14px;
    margin-bottom: 5px;
  }

  body.dark-mode .activity-desc {
    color: #bbb;
  }

  .activity-time {
    color: #aaa;
    font-size: 12px;
  }

  body.dark-mode .activity-time {
    color: #888;
  }

  .activity-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
  }

  body.dark-mode .activity-pagination {
    border-top: 1px solid var(--dark-border-color);
  }

  .pagination-info {
    color: #777;
    font-size: 14px;
  }

  body.dark-mode .pagination-info {
    color: #aaa;
  }

  .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .page-size-selector {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .page-size-selector label {
    color: #777;
    font-size: 14px;
  }

  body.dark-mode .page-size-selector label {
    color: #aaa;
  }

  .page-size-selector select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #333;
  }

  body.dark-mode .page-size-selector select {
    background: var(--dark-card-bg);
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
  }

  .pagination-buttons {
    display: flex;
    gap: 5px;
  }

  .pagination-btn {
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
  }

  .pagination-btn:hover:not(:disabled) {
    background: #f0f0f0;
  }

  .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  body.dark-mode .pagination-btn {
    background: var(--dark-card-bg);
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
  }

  body.dark-mode .pagination-btn:hover:not(:disabled) {
    background: var(--dark-sidebar-hover);
  }

  .pagination-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  @media (max-width: 768px) {
    .charts-grid {
      grid-template-columns: 1fr;
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .stat-card {
      flex-direction: row;
    }

    .activity-pagination {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }

    .pagination-controls {
      width: 100%;
      justify-content: space-between;
    }
  }

  @media (max-width: 480px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }

    .pagination-controls {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }

    .page-size-selector,
    .pagination-buttons {
      width: 100%;
    }

    .pagination-buttons {
      justify-content: center;
    }
  }

  @media (min-width: 769px) {
    .stats-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .chart-canvas-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chart-canvas {
    max-width: 100%;
    max-height: 100%;
  }
</style>
{% endblock %} {% block content %}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon blue">
      <i class="fas fa-robot"></i>
    </div>
    <div class="stat-info">
      <h3>{{ loaded_plugins }}</h3>
      <p>已加载插件</p>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">
      <i class="fas fa-users"></i>
    </div>
    <div class="stat-info">
      <h3>{{ bot_connected }}</h3>
      <p>Bot已连接</p>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon orange">
      <i class="fas fa-comments"></i>
    </div>
    <div class="stat-info">
      <h3>{{ total_message }}</h3>
      <p>今日消息</p>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon purple">
      <i class="fas fa-microchip"></i>
    </div>
    <div class="stat-info">
      <h3>{{ health }}</h3>
      <p>系统健康</p>
    </div>
  </div>
</div>
<div class="charts-grid">
  <div class="chart-card">
    <div class="chart-header">
      <div class="chart-title">消息统计</div>
      <div class="chart-actions">
        <button>
          <i class="fas fa-sync"></i>
        </button>
        <button>
          <i class="fas fa-cog"></i>
        </button>
      </div>
    </div>
    <div class="chart-container">
      <div class="chart-canvas-container">
        <canvas id="messagesChart" class="chart-canvas"></canvas>
      </div>
    </div>
  </div>
  <div class="chart-card">
    <div class="chart-header">
      <div class="chart-title">收发图表</div>
      <div class="chart-actions">
        <button>
          <i class="fas fa-sync"></i>
        </button>
      </div>
    </div>
    <div class="chart-container">
      <div class="chart-canvas-container">
        <canvas id="botMsgStatusChart" class="chart-canvas"></canvas>
      </div>
    </div>
  </div>
</div>
<div class="recent-activity">
  <div class="chart-header">
    <div class="chart-title">最近活动</div>
  </div>
  <ul class="activity-list" id="activity-data" style="display: none">
    {% for activity in recent_activity %}
    <li
      class="activity-item"
      data-icon="{{ activity.icon }}"
      data-icon-color="{{ activity.icon_color }}"
      data-title="{{ activity.title }}"
      data-desc="{{ activity.desc }}"
      data-time="{{ activity.time }}"
    >
      <div class="activity-icon {{ activity.icon_color }}">
        <i class="fas fa-{{ activity.icon }}"></i>
      </div>
      <div class="activity-content">
        <div class="activity-title">{{ activity.title }}</div>
        <div class="activity-desc">{{ activity.desc }}</div>
        <div class="activity-time">{{ activity.time }}</div>
      </div>
    </li>
    {% endfor %}
  </ul>
  <ul class="activity-list" id="activity-display"></ul>
  <div
    class="activity-pagination"
    id="activity-pagination"
    style="display: none"
  >
    <div class="pagination-info" id="pagination-info">
      显示 <span id="start-index">0</span>-<span id="end-index">0</span> 条，共
      <span id="total-activities">0</span> 条记录
    </div>
    <div class="pagination-controls">
      <div class="page-size-selector">
        <label for="page-size">每页显示:</label>
        <select id="page-size">
          <option value="5">5条</option>
          <option value="10" selected>10条</option>
          <option value="20">20条</option>
          <option value="50">50条</option>
        </select>
      </div>
      <div class="pagination-buttons" id="pagination-buttons">
        <button class="pagination-btn" id="first-page" disabled>
          <i class="fas fa-angle-double-left"></i>
        </button>
        <button class="pagination-btn" id="prev-page" disabled>
          <i class="fas fa-angle-left"></i>
        </button>
        <div id="page-numbers"></div>
        <button class="pagination-btn" id="next-page">
          <i class="fas fa-angle-right"></i>
        </button>
        <button class="pagination-btn" id="last-page">
          <i class="fas fa-angle-double-right"></i>
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('warn') === 'weak_password') {
                  Swal.fire({
                      icon: 'warning',
                      title: '密码强度不足',
                      text: '请尽快更换密码！',
                  });
              }


  let messagesChart;
  let botMsgStatusChart;


  let currentPage = 1;
  let itemsPerPage = 10;
  let totalActivities = 0;
  let totalPages = 1;


  document.addEventListener('DOMContentLoaded', function() {

      initCharts();


      bindButtonEvents();


      initPagination();
  });


  function initCharts() {

      const messagesCtx = document.getElementById('messagesChart').getContext('2d');
      messagesChart = new Chart(messagesCtx, {
          type: 'line',
          data: {
              labels: {{ message_stats.labels | tojson }},
              datasets: [{
                  label: '消息数量',
                  data: {{ message_stats.data | tojson }},
                  borderColor: 'rgb(138, 43, 226)',
                  backgroundColor: 'rgba(138, 43, 226, 0.2)',
                  tension: 0.1
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  y: {
                      beginAtZero: true
                  }
              }
          }
      });


      const msgIOStatusCtx = document.getElementById('botMsgStatusChart').getContext('2d');
      botMsgStatusChart = new Chart(msgIOStatusCtx, {
          type: 'doughnut',
          data: {
              labels: {{ msg_io_status.labels | tojson }},
              datasets: [{
                  label: '消息收发状态',
                  data: {{ msg_io_status.data | tojson }},
                  backgroundColor: [
                      'rgb(138, 43, 226)',
                      'rgb(46, 204, 113)',
                  ],
                  hoverOffset: 4
              }]
          },
          options: {
              responsive: true,
              maintainAspectRatio: false
          }
      });
  }


  function bindButtonEvents() {

      document.querySelectorAll('.fa-sync').forEach(button => {
          button.addEventListener('click', function() {
              const chartCard = this.closest('.chart-card');
              const chartTitle = chartCard.querySelector('.chart-title').textContent;


              Swal.fire({
                  title: '刷新中...',
                  text: `正在刷新${chartTitle}数据`,
                  allowOutsideClick: false,
                  didOpen: () => {
                      Swal.showLoading();
                  }
              });


              refreshChartData(chartTitle)
                  .then(() => {
                      Swal.close();
                      Swal.fire({
                          title: '刷新成功',
                          text: `${chartTitle}数据已更新`,
                          icon: 'success',
                          timer: 1500,
                          showConfirmButton: false
                      });
                  })
                  .catch(() => {
                      Swal.close();
                      Swal.fire({
                          title: '刷新失败',
                          text: `无法获取${chartTitle}数据`,
                          icon: 'error',
                          timer: 1500,
                          showConfirmButton: false
                      });
                  });
          });
      });


      document.querySelectorAll('.fa-cog').forEach(button => {
          button.addEventListener('click', function() {
              const chartCard = this.closest('.chart-card');
              const chartTitle = chartCard.querySelector('.chart-title').textContent;


              Swal.fire({
                  title: `${chartTitle}设置`,
                  html: `
                      <div style="text-align: left;">
                          <p>图表设置选项：</p>
                          <div>
                              <input type="checkbox" id="showLegend" checked>
                              <label for="showLegend">显示图例</label>
                          </div>
                          <div>
                              <input type="checkbox" id="animateChart" checked>
                              <label for="animateChart">启用动画</label>
                          </div>
                          <div>
                              <label for="chartColor">图表颜色：</label>
                              <select id="chartColor">
                                  <option value="default">默认</option>
                                  <option value="blue">蓝色</option>
                                  <option value="green">绿色</option>
                                  <option value="orange">橙色</option>
                              </select>
                          </div>
                      </div>
                  `,
                  showCancelButton: true,
                  confirmButtonText: '应用',
                  cancelButtonText: '取消'
              }).then((result) => {
                  if (result.isConfirmed) {
                      Swal.fire({
                          title: '设置已保存',
                          text: `已更新${chartTitle}的设置`,
                          icon: 'success',
                          timer: 1500,
                          showConfirmButton: false
                      });
                  }
              });
          });
      });
  }


  async function refreshChartData(chartTitle) {
      try {
          if (chartTitle === '消息统计') {

              const response = await fetch('/api/chart/messages',{
          headers: {
            "Authorization": "Bearer " + await getOnetimeToken(),
          },
        });
              const data = await response.json();


              messagesChart.data.labels = data.labels;
              messagesChart.data.datasets[0].data = data.data;
              messagesChart.update();
          } else if (chartTitle === '收发图表') {

              const response = await fetch('/api/chart/today-usage');
              const data = await response.json();


              botMsgStatusChart.data.labels = data.labels;
              botMsgStatusChart.data.datasets[0].data = data.data;
              botMsgStatusChart.update();
          }
      } catch (error) {
          console.error('获取图表数据失败:', error);
          throw error;
      }
  }


  function initPagination() {

      const activityItems = document.querySelectorAll('#activity-data .activity-item');
      totalActivities = activityItems.length;


      if (totalActivities === 0) {
          return;
      }


      document.getElementById('activity-pagination').style.display = 'flex';


      document.getElementById('page-size').addEventListener('change', function() {
          itemsPerPage = parseInt(this.value);
          currentPage = 1;
          renderActivities();
          updatePaginationControls();
      });


      document.getElementById('first-page').addEventListener('click', function() {
          if (currentPage > 1) {
              currentPage = 1;
              renderActivities();
              updatePaginationControls();
          }
      });

      document.getElementById('prev-page').addEventListener('click', function() {
          if (currentPage > 1) {
              currentPage--;
              renderActivities();
              updatePaginationControls();
          }
      });

      document.getElementById('next-page').addEventListener('click', function() {
          if (currentPage < totalPages) {
              currentPage++;
              renderActivities();
              updatePaginationControls();
          }
      });

      document.getElementById('last-page').addEventListener('click', function() {
          if (currentPage < totalPages) {
              currentPage = totalPages;
              renderActivities();
              updatePaginationControls();
          }
      });


      renderActivities();
      updatePaginationControls();
  }


  function renderActivities() {
      const activityItems = document.querySelectorAll('#activity-data .activity-item');
      const displayList = document.getElementById('activity-display');
      displayList.innerHTML = '';


      totalPages = Math.ceil(totalActivities / itemsPerPage);


      const startIndex = (currentPage - 1) * itemsPerPage;
      const endIndex = Math.min(startIndex + itemsPerPage, totalActivities);


      document.getElementById('start-index').textContent = startIndex + 1;
      document.getElementById('end-index').textContent = endIndex;
      document.getElementById('total-activities').textContent = totalActivities;


      for (let i = startIndex; i < endIndex; i++) {
          const item = activityItems[i];
          const icon = item.getAttribute('data-icon');
          const iconColor = item.getAttribute('data-icon-color');
          const title = item.getAttribute('data-title');
          const desc = item.getAttribute('data-desc');
          const time = item.getAttribute('data-time');

          const li = document.createElement('li');
          li.className = 'activity-item';
          li.innerHTML = `
              <div class="activity-icon ${iconColor}">
                  <i class="fas fa-${icon}"></i>
              </div>
              <div class="activity-content">
                  <div class="activity-title">${title}</div>
                  <div class="activity-desc">${desc}</div>
                  <div class="activity-time">${time}</div>
              </div>
          `;

          displayList.appendChild(li);
      }
  }


  function updatePaginationControls() {

      document.getElementById('first-page').disabled = currentPage === 1;
      document.getElementById('prev-page').disabled = currentPage === 1;
      document.getElementById('next-page').disabled = currentPage === totalPages;
      document.getElementById('last-page').disabled = currentPage === totalPages;


      const pageNumbersContainer = document.getElementById('page-numbers');
      pageNumbersContainer.innerHTML = '';


      let startPage = Math.max(1, currentPage - 2);
      let endPage = Math.min(totalPages, startPage + 4);


      if (endPage - startPage < 4) {
          startPage = Math.max(1, endPage - 4);
      }

      for (let i = startPage; i <= endPage; i++) {
          const button = document.createElement('button');
          button.className = 'pagination-btn';
          if (i === currentPage) {
              button.classList.add('active');
          }
          button.textContent = i;
          button.addEventListener('click', function() {
              currentPage = i;
              renderActivities();
              updatePaginationControls();
          });
          pageNumbersContainer.appendChild(button);
      }
  }
</script>
{% endblock %}