{% extends "base.html" %} {% block title %} 机器人详情 - Amrita Dashboard{%
endblock %} {% block extra_css %}
<style>
  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

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

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

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }

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

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
  }

  body.dark-mode .card-title {
    color: var(--accent-color);
  }

  .refresh-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.3s;
  }

  body.dark-mode .refresh-btn {
    background: var(--accent-color);
  }

  .refresh-btn:hover {
    background: var(--accent-color);
  }

  body.dark-mode .refresh-btn:hover {
    background: #3498db;
  }

  .refresh-btn i {
    margin-right: 5px;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
  }

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

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

  .info-label {
    color: #777;
    font-weight: 500;
  }

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

  .info-value {
    font-weight: 600;
  }

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

  .status-online {
    color: #2ecc71;
  }

  .status-offline {
    color: #e74c3c;
  }

  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 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-container {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gauge-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .gauge-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #777;
  }

  body.dark-mode .gauge-title {
    color: #aaa;
  }

  .gauge-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
  }

  body.dark-mode .gauge-value {
    color: var(--accent-color);
  }

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

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

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

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

  .tabs-container {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }

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

  .tab {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    color: #555;
  }

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

  .tab.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
  }

  body.dark-mode .tab.active {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .log-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-top: 20px;
  }

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

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

  .log-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
  }

  body.dark-mode .log-title {
    color: var(--accent-color);
  }

  .log-content {
    background: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
    color: #333;
  }

  body.dark-mode .log-content {
    background: #1e1e1e;
    color: #f0f0f0;
  }

  .log-line {
    margin-bottom: 5px;
  }

  .log-line:last-child {
    margin-bottom: 0;
  }

  .log-timestamp {
    color: #6c757d;
  }

  body.dark-mode .log-timestamp {
    color: #aaa;
  }

  .log-info {
    color: #2c3e50;
  }

  body.dark-mode .log-info {
    color: #3498db;
  }

  .log-warning {
    color: #f39c12;
  }

  body.dark-mode .log-warning {
    color: #f1c40f;
  }

  .log-error {
    color: #e74c3c;
  }

  body.dark-mode .log-error {
    color: #e74c3c;
  }

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

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

    .card-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .refresh-btn {
      margin-top: 10px;
    }
  }
</style>
{% endblock %} {% block content %}
<div class="info-grid">
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">机器人信息</div>
      <button class="refresh-btn" onclick="refreshData()">
        <i class="fas fa-sync-alt"></i> 刷新
      </button>
    </div>
    <div class="info-item">
      <span class="info-label">ID:</span>
      <span class="info-value" id="bot-id">{{ bot_static_info.id }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">Bot昵称:</span>
      <span class="info-value" id="bot-nickname"
        >{{ bot_static_info.bot_name }}</span
      >
    </div>
  </div>
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">系统信息</div>
    </div>
    <div class="info-item">
      <span class="info-label">Bot名称:</span>
      <span class="info-value" id="bot-name">{{ bot_static_info.name }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">操作系统:</span>
      <span class="info-value" id="system-os">{{ system_info.os }}</span>
    </div>
    <div class="info-item">
      <span class="info-label">Python版本:</span>
      <span class="info-value" id="system-python"
        >{{ system_info.python_version }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">主机名:</span>
      <span class="info-value" id="system-hostname"
        >{{ system_info.hostname }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">Amrita版本:</span>
      <span class="info-value" id="bot-version"
        >{{ bot_static_info.version }}</span
      >
    </div>
    <div class="info-item">
      <span class="info-label">运行协议:</span>
      <span class="info-value" id="bot-platform"
        >{{ bot_static_info.platform }}</span
      >
    </div>
  </div>
</div>
<div class="charts-grid">
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">CPU使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时CPU使用率</div>
        <canvas id="cpuGauge"></canvas>
        <div class="gauge-value" id="cpu-value">0%</div>
      </div>
    </div>
  </div>
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">内存使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时内存使用率</div>
        <canvas id="memoryGauge"></canvas>
        <div class="gauge-value" id="memory-value">0%</div>
      </div>
    </div>
  </div>
  <div class="chart-card">
    <div class="card-header">
      <div class="card-title">磁盘使用率</div>
    </div>
    <div class="chart-container">
      <div class="gauge-container">
        <div class="gauge-title">实时磁盘使用率</div>
        <canvas id="diskGauge"></canvas>
        <div class="gauge-value" id="disk-value">0%</div>
      </div>
    </div>
  </div>
  <div class="info-card">
    <div class="card-header">
      <div class="card-title">网络流量</div>
    </div>
    <div class="info-item">
      <span class="info-label">发送:</span>
      <span class="info-value" id="network-sent">0 KB</span>
    </div>
    <div class="info-item">
      <span class="info-label">接收:</span>
      <span class="info-value" id="network-received">0 KB</span>
    </div>
    <div class="info-item">
      <span class="info-label">Bot状态:</span>
      <span class="info-value status-online" id="bot-status">在线</span>
    </div>
  </div>
  {% endblock %} {% block scripts %}
  <script>
    let refreshInterval;
    const REFRESH_INTERVAL_MS = 3000;
    let cpuGauge, memoryGauge, diskGauge;

    document.addEventListener("DOMContentLoaded", function () {
      initGauges();

      startAutoRefresh();

      document
        .getElementById("manual-refresh")
        .addEventListener("click", refreshData);
    });

    function initGauges() {
      const cpuCtx = document.getElementById("cpuGauge").getContext("2d");
      cpuGauge = new Chart(cpuCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(138, 43, 226, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });

      const memoryCtx = document.getElementById("memoryGauge").getContext("2d");
      memoryGauge = new Chart(memoryCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(46, 204, 113, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });

      const diskCtx = document.getElementById("diskGauge").getContext("2d");
      diskGauge = new Chart(diskCtx, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [0, 100],
              backgroundColor: [
                "rgba(243, 156, 18, 0.8)",
                "rgba(200, 200, 200, 0.2)",
              ],
              borderWidth: 0,
            },
          ],
        },
        options: {
          cutout: "70%",
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false,
            },
            tooltip: {
              enabled: false,
            },
          },
        },
      });
    }

    function startAutoRefresh() {
      refreshData();

      refreshInterval = setInterval(refreshData, REFRESH_INTERVAL_MS);
    }

    function stopAutoRefresh() {
      if (refreshInterval) {
        clearInterval(refreshInterval);
      }
    }

    async function refreshData() {
      try {
        document.querySelectorAll(".refresh-btn i").forEach((icon) => {
          icon.classList.add("fa-spin");
        });

        const response = await fetch("/api/bot/status");
        const data = await response.json();

        updateGauge(cpuGauge, data.cpu_usage);
        updateGauge(memoryGauge, data.memory_usage);
        updateGauge(diskGauge, data.disk_usage);

        document.getElementById("cpu-value").textContent = `${data.cpu_usage}%`;
        document.getElementById(
          "memory-value"
        ).textContent = `${data.memory_usage}%`;
        document.getElementById(
          "disk-value"
        ).textContent = `${data.disk_usage}%`;

        document.getElementById("network-sent").textContent = formatBytes(
          data.network_io.sent
        );
        document.getElementById("network-received").textContent = formatBytes(
          data.network_io.received
        );

        const statusElement = document.getElementById("bot-status");
        statusElement.textContent = data.status === "online" ? "在线" : "离线";
        statusElement.className = `info-value status-${data.status}`;
      } catch (error) {
        console.error("获取数据失败:", error);
        Swal.fire({
          title: "获取数据失败",
          text: "无法从服务器获取实时数据，请检查网络连接",
          icon: "error",
          timer: 2000,
        });
      } finally {
        document.querySelectorAll(".refresh-btn i").forEach((icon) => {
          icon.classList.remove("fa-spin");
        });
      }
    }

    function updateGauge(gauge, value) {
      gauge.data.datasets[0].data = [value, 100 - value];
      gauge.update();
    }

    function formatBytes(bytes, decimals = 2) {
      if (bytes === 0) return "0 Bytes";

      const k = 1024;
      const dm = decimals < 0 ? 0 : decimals;
      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];

      const i = Math.floor(Math.log(bytes) / Math.log(k));

      return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
    }

    window.addEventListener("beforeunload", function () {
      stopAutoRefresh();
    });
  </script>
  {% endblock %}
</div>