优化流式传输&fix bugs

2025-11-25 16:58:15 +08:00
parent e026d8f324
commit ad1e6180cf
18 changed files with 1135 additions and 156 deletions
--- a/web/static/css/output.css
+++ b/web/static/css/output.css
@@ -28,6 +28,7 @@
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
@@ -420,9 +421,6 @@
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
-  .bottom-full {
-    bottom: 100%;
-  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
@@ -450,9 +448,6 @@
  .z-50 {
    z-index: 50;
  }
-  .z-90 {
-    z-index: 90;
-  }
  .z-\[100\] {
    z-index: 100;
  }
@@ -501,9 +496,6 @@
  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
-  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
@@ -622,9 +614,6 @@
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
-  .h-0 {
-    height: calc(var(--spacing) * 0);
-  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
@@ -709,9 +698,6 @@
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
  .w-1\/4 {
    width: calc(1/4 * 100%);
  }
@@ -820,9 +806,6 @@
  .flex-1 {
    flex: 1;
  }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
  .shrink-0 {
    flex-shrink: 0;
  }
@@ -835,9 +818,6 @@
  .caption-bottom {
    caption-side: bottom;
  }
-  .border-collapse {
-    border-collapse: collapse;
-  }
  .origin-center {
    transform-origin: center;
  }
@@ -864,10 +844,6 @@
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1024,9 +1000,6 @@
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
-  .gap-x-1 {
-    column-gap: calc(var(--spacing) * 1);
-  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
@@ -1172,9 +1145,6 @@
    --tw-border-style: none;
    border-style: none;
  }
-  .border-black {
-    border-color: var(--color-black);
-  }
  .border-black\/10 {
    border-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1202,9 +1172,6 @@
  .border-green-200 {
    border-color: var(--color-green-200);
  }
-  .border-primary {
-    border-color: var(--color-primary);
-  }
  .border-primary\/20 {
    border-color: var(--color-primary);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1241,9 +1208,6 @@
  .border-zinc-300 {
    border-color: var(--color-zinc-300);
  }
-  .border-zinc-700 {
-    border-color: var(--color-zinc-700);
-  }
  .border-zinc-700\/50 {
    border-color: color-mix(in srgb, oklch(37% 0.013 285.805) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1316,9 +1280,6 @@
  .bg-gray-500 {
    background-color: var(--color-gray-500);
  }
-  .bg-gray-950 {
-    background-color: var(--color-gray-950);
-  }
  .bg-gray-950\/5 {
    background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1533,10 +1494,6 @@
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
-  .from-blue-500 {
-    --tw-gradient-from: var(--color-blue-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
  .from-blue-500\/30 {
    --tw-gradient-from: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1607,9 +1564,6 @@
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
@@ -1658,9 +1612,6 @@
  .pr-20 {
    padding-right: calc(var(--spacing) * 20);
  }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }
@@ -1785,6 +1736,9 @@
  .text-amber-600 {
    color: var(--color-amber-600);
  }
+  .text-blue-400 {
+    color: var(--color-blue-400);
+  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
@@ -1899,6 +1853,9 @@
  .text-white {
    color: var(--color-white);
  }
+  .text-yellow-400 {
+    color: var(--color-yellow-400);
+  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
@@ -1938,9 +1895,6 @@
  .italic {
    font-style: italic;
  }
-  .underline {
-    text-decoration-line: underline;
-  }
  .opacity-0 {
    opacity: 0%;
  }
@@ -1998,10 +1952,6 @@
    --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 25%));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
-  .inset-shadow-sm {
-    --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
  .ring-black {
    --tw-ring-color: var(--color-black);
  }
@@ -2023,10 +1973,6 @@
      --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
    }
  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -5116,11 +5062,6 @@
  inherits: false;
  initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
@property --tw-blur {
  syntax: "*";
  inherits: false;
@@ -5233,6 +5174,11 @@
  inherits: false;
  initial-value: 1;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
@keyframes spin {
  to {
    transform: rotate(360deg);
@@ -5290,7 +5236,6 @@
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
@@ -5318,6 +5263,7 @@
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
+      --tw-outline-style: solid;
    }
  }
 }
--- a/web/static/js/logs-43KF5HY3.js
+++ b/web/static/js/logs-43KF5HY3.js
@@ -843,6 +843,140 @@ var FilterPopover = class {
  }
 };

+// frontend/js/pages/logs/systemLog.js
+var SystemLogTerminal = class {
+  constructor(container, controlsContainer) {
+    this.container = container;
+    this.controlsContainer = controlsContainer;
+    this.ws = null;
+    this.isPaused = false;
+    this.shouldAutoScroll = true;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.elements = {
+      output: this.container.querySelector("#log-terminal-output"),
+      statusIndicator: this.controlsContainer.querySelector("#terminal-status-indicator"),
+      clearBtn: this.controlsContainer.querySelector('[data-action="clear-terminal"]'),
+      pauseBtn: this.controlsContainer.querySelector('[data-action="toggle-pause-terminal"]'),
+      scrollBtn: this.controlsContainer.querySelector('[data-action="toggle-scroll-terminal"]'),
+      disconnectBtn: this.controlsContainer.querySelector('[data-action="disconnect-terminal"]')
+    };
+    this._initEventListeners();
+  }
+  _initEventListeners() {
+    this.elements.clearBtn.addEventListener("click", () => this.clear());
+    this.elements.pauseBtn.addEventListener("click", () => this.togglePause());
+    this.elements.scrollBtn.addEventListener("click", () => this.toggleAutoScroll());
+    this.elements.disconnectBtn.addEventListener("click", () => this.disconnect());
+  }
+  connect() {
+    this.clear();
+    this._appendMessage("info", "\u6B63\u5728\u8FDE\u63A5\u5230\u5B9E\u65F6\u65E5\u5FD7\u6D41...");
+    this._updateStatus("connecting", "\u8FDE\u63A5\u4E2D...");
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${window.location.host}/ws/system-logs`;
+    this.ws = new WebSocket(wsUrl);
+    this.ws.onopen = () => {
+      this._appendMessage("info", "\u2713 \u5DF2\u8FDE\u63A5\u5230\u7CFB\u7EDF\u65E5\u5FD7\u6D41");
+      this._updateStatus("connected", "\u5DF2\u8FDE\u63A5");
+      this.reconnectAttempts = 0;
+    };
+    this.ws.onmessage = (event) => {
+      if (this.isPaused) return;
+      try {
+        const data = JSON.parse(event.data);
+        const levelColors = {
+          "error": "text-red-500",
+          "warning": "text-yellow-400",
+          "info": "text-blue-400",
+          "debug": "text-zinc-400"
+        };
+        const color = levelColors[data.level] || "text-zinc-200";
+        const timestamp = new Date(data.timestamp).toLocaleTimeString();
+        const msg = `[${timestamp}] [${data.level.toUpperCase()}] ${data.message}`;
+        this._appendMessage(color, msg);
+      } catch (e) {
+        this._appendMessage("text-zinc-200", event.data);
+      }
+    };
+    this.ws.onerror = (error) => {
+      this._appendMessage("error", `\u2717 WebSocket \u9519\u8BEF`);
+      this._updateStatus("error", "\u8FDE\u63A5\u9519\u8BEF");
+    };
+    this.ws.onclose = () => {
+      this._appendMessage("error", "\u2717 \u8FDE\u63A5\u5DF2\u65AD\u5F00");
+      this._updateStatus("disconnected", "\u672A\u8FDE\u63A5");
+      if (this.reconnectAttempts < this.maxReconnectAttempts) {
+        this.reconnectAttempts++;
+        setTimeout(() => {
+          this._appendMessage("info", `\u5C1D\u8BD5\u91CD\u65B0\u8FDE\u63A5 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+          this.connect();
+        }, 3e3);
+      }
+    };
+  }
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    this.reconnectAttempts = this.maxReconnectAttempts;
+    this._updateStatus("disconnected", "\u672A\u8FDE\u63A5");
+  }
+  clear() {
+    if (this.elements.output) {
+      this.elements.output.innerHTML = "";
+    }
+  }
+  togglePause() {
+    this.isPaused = !this.isPaused;
+    const span = this.elements.pauseBtn.querySelector("span");
+    const icon = this.elements.pauseBtn.querySelector("i");
+    if (this.isPaused) {
+      span.textContent = "\u7EE7\u7EED";
+      icon.classList.replace("fa-pause", "fa-play");
+    } else {
+      span.textContent = "\u6682\u505C";
+      icon.classList.replace("fa-play", "fa-pause");
+    }
+  }
+  toggleAutoScroll() {
+    this.shouldAutoScroll = !this.shouldAutoScroll;
+    const span = this.elements.scrollBtn.querySelector("span");
+    if (this.shouldAutoScroll) {
+      span.textContent = "\u81EA\u52A8\u6EDA\u52A8";
+    } else {
+      span.textContent = "\u624B\u52A8\u6EDA\u52A8";
+    }
+  }
+  _appendMessage(colorClass, text) {
+    if (!this.elements.output) return;
+    const p = document.createElement("p");
+    p.className = colorClass;
+    p.textContent = text;
+    this.elements.output.appendChild(p);
+    if (this.shouldAutoScroll) {
+      this.elements.output.scrollTop = this.elements.output.scrollHeight;
+    }
+  }
+  _updateStatus(status, text) {
+    const indicator = this.elements.statusIndicator.querySelector("span.relative");
+    const statusText = this.elements.statusIndicator.childNodes[2];
+    const colors = {
+      "connecting": "bg-yellow-500",
+      "connected": "bg-green-500",
+      "disconnected": "bg-zinc-500",
+      "error": "bg-red-500"
+    };
+    indicator.querySelectorAll("span").forEach((span) => {
+      span.className = span.className.replace(/bg-\w+-\d+/g, colors[status] || colors.disconnected);
+    });
+    if (statusText) {
+      statusText.textContent = ` ${text}`;
+    }
+  }
+};
+
 // frontend/js/pages/logs/index.js
 var dataStore = {
  groups: /* @__PURE__ */ new Map(),
@@ -854,7 +988,6 @@ var LogsPage = class {
      logs: [],
      pagination: { page: 1, pages: 1, total: 0, page_size: 20 },
      isLoading: true,
-      // [优化] 统一将所有可筛选字段在此处初始化，便于管理
      filters: {
        page: 1,
        page_size: 20,
@@ -864,36 +997,109 @@ var LogsPage = class {
        error_types: /* @__PURE__ */ new Set(),
        status_codes: /* @__PURE__ */ new Set()
      },
-      selectedLogIds: /* @__PURE__ */ new Set()
+      selectedLogIds: /* @__PURE__ */ new Set(),
+      currentView: "error"
    };
    this.elements = {
-      tableBody: document.getElementById("logs-table-body"),
-      selectedCount: document.querySelector(".flex-1.text-sm span.font-semibold:nth-child(1)"),
-      totalCount: document.querySelector(".flex-1.text-sm span:last-child"),
-      pageSizeSelect: document.querySelector('[data-component="custom-select-v2"] select'),
-      pageInfo: document.querySelector(".flex.w-\\[100px\\]"),
-      paginationBtns: document.querySelectorAll("[data-pagination-controls] button"),
-      selectAllCheckbox: document.querySelector('thead .table-head-cell input[type="checkbox"]'),
-      searchInput: document.getElementById("log-search-input"),
-      errorTypeFilterBtn: document.getElementById("filter-error-type-btn"),
-      errorCodeFilterBtn: document.getElementById("filter-error-code-btn")
+      tabsContainer: document.querySelector("[data-sliding-tabs-container]"),
+      contentContainer: document.getElementById("log-content-container"),
+      errorFilters: document.getElementById("error-logs-filters"),
+      systemControls: document.getElementById("system-logs-controls"),
+      errorTemplate: document.getElementById("error-logs-template"),
+      systemTemplate: document.getElementById("system-logs-template")
    };
-    this.initialized = !!this.elements.tableBody;
+    this.initialized = !!this.elements.contentContainer;
    if (this.initialized) {
-      this.logList = new logList_default(this.elements.tableBody, dataStore);
-      const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
-      if (selectContainer) {
-        new CustomSelectV2(selectContainer);
-      }
+      this.logList = null;
+      this.systemLogTerminal = null;
      this.debouncedLoadAndRender = debounce(() => this.loadAndRenderLogs(), 300);
    }
  }
  async init() {
    if (!this.initialized) return;
+    this._initPermanentEventListeners();
+    await this.loadGroupsOnce();
+    this.state.currentView = null;
+    this.switchToView("error");
+  }
+  _initPermanentEventListeners() {
+    this.elements.tabsContainer.addEventListener("click", (event) => {
+      const tabItem = event.target.closest("[data-tab-target]");
+      if (!tabItem) return;
+      event.preventDefault();
+      const viewName = tabItem.dataset.tabTarget;
+      if (viewName) {
+        this.switchToView(viewName);
+      }
+    });
+  }
+  switchToView(viewName) {
+    if (this.state.currentView === viewName && this.elements.contentContainer.innerHTML !== "") return;
+    if (this.systemLogTerminal) {
+      this.systemLogTerminal.disconnect();
+      this.systemLogTerminal = null;
+    }
+    this.state.currentView = viewName;
+    this.elements.contentContainer.innerHTML = "";
+    if (viewName === "error") {
+      this.elements.errorFilters.classList.remove("hidden");
+      this.elements.systemControls.classList.add("hidden");
+      const template = this.elements.errorTemplate.content.cloneNode(true);
+      this.elements.contentContainer.appendChild(template);
+      requestAnimationFrame(() => {
+        this._initErrorLogView();
+      });
+    } else if (viewName === "system") {
+      this.elements.errorFilters.classList.add("hidden");
+      this.elements.systemControls.classList.remove("hidden");
+      const template = this.elements.systemTemplate.content.cloneNode(true);
+      this.elements.contentContainer.appendChild(template);
+      requestAnimationFrame(() => {
+        this._initSystemLogView();
+      });
+    }
+  }
+  _initErrorLogView() {
+    this.elements.tableBody = document.getElementById("logs-table-body");
+    this.elements.selectedCount = document.querySelector(".flex-1.text-sm span.font-semibold:nth-child(1)");
+    this.elements.totalCount = document.querySelector(".flex-1.text-sm span:last-child");
+    this.elements.pageSizeSelect = document.querySelector('[data-component="custom-select-v2"] select');
+    this.elements.pageInfo = document.querySelector(".flex.w-\\[100px\\]");
+    this.elements.paginationBtns = document.querySelectorAll("[data-pagination-controls] button");
+    this.elements.selectAllCheckbox = document.querySelector('thead .table-head-cell input[type="checkbox"]');
+    this.elements.searchInput = document.getElementById("log-search-input");
+    this.elements.errorTypeFilterBtn = document.getElementById("filter-error-type-btn");
+    this.elements.errorCodeFilterBtn = document.getElementById("filter-error-code-btn");
+    this.logList = new logList_default(this.elements.tableBody, dataStore);
+    const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
+    if (selectContainer) {
+      new CustomSelectV2(selectContainer);
+    }
    this.initFilterPopovers();
    this.initEventListeners();
-    await this.loadGroupsOnce();
-    await this.loadAndRenderLogs();
+    this.loadAndRenderLogs();
+  }
+  _initSystemLogView() {
+    this.systemLogTerminal = new SystemLogTerminal(
+      this.elements.contentContainer,
+      this.elements.systemControls
+    );
+    Swal.fire({
+      title: "\u5B9E\u65F6\u7CFB\u7EDF\u65E5\u5FD7",
+      text: "\u60A8\u5373\u5C06\u8FDE\u63A5\u5230\u5B9E\u65F6\u65E5\u5FD7\u6D41\u3002\u8FD9\u4F1A\u4E0E\u670D\u52A1\u5668\u5EFA\u7ACB\u4E00\u4E2A\u6301\u7EED\u7684\u8FDE\u63A5\u3002",
+      icon: "info",
+      confirmButtonText: "\u6211\u660E\u767D\u4E86\uFF0C\u5F00\u59CB\u8FDE\u63A5",
+      showCancelButton: true,
+      cancelButtonText: "\u53D6\u6D88",
+      target: "#main-content-wrapper"
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.systemLogTerminal.connect();
+      } else {
+        const errorLogTab = Array.from(this.elements.tabsContainer.querySelectorAll('[data-tab-target="error"]'))[0];
+        if (errorLogTab) errorLogTab.click();
+      }
+    });
  }
  initFilterPopovers() {
    const errorTypeOptions = [
--- a/web/static/js/main.js
+++ b/web/static/js/main.js
@@ -182,7 +182,7 @@ var pageModules = {
  // esbuild 看到这个 import() 语法，就会自动将 dashboard.js 及其依赖打包成一个独立的 chunk 文件
  "dashboard": () => import("./dashboard-XFUWX3IN.js"),
  "keys": () => import("./keys-HRP4JR7B.js"),
-  "logs": () => import("./logs-OFCAHOEI.js")
+  "logs": () => import("./logs-43KF5HY3.js")
  // 'settings': () => import('./pages/settings.js'), // 未来启用 settings 页面
  // 未来新增的页面，只需在这里添加一行映射，esbuild会自动处理
 };