fix: page got stuck when logs size too large

2024-11-05 19:46:47 +08:00
parent 9d654bcd66
commit 5f2115fff6
19 changed files with 797 additions and 49 deletions
@@ -0,0 +1,92 @@
+.logs-viewer-wrap-w2 {
+  position: relative;
+
+  .pg {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    padding-top: 100px;
+    display: flex;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 25%);
+
+    .ant-spin-dot-holder {
+      color: rgba(255, 255, 255, 90%);
+    }
+  }
+
+  .copy {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 100;
+
+    button {
+      color: rgba(255, 255, 255, 70%);
+      background-color: rgba(71, 71, 71, 100%);
+
+      &:hover {
+        color: rgba(255, 255, 255, 90%) !important;
+        background-color: rgba(71, 71, 71, 100%) !important;
+      }
+    }
+  }
+
+  .wrap {
+    padding: 5px 0 2px 10px;
+    background-color: var(--color-logs-bg);
+    border-radius: var(--border-radius-mini);
+    font-family: monospace, Menlo, Courier, 'Courier New', Consolas, Monaco,
+      'Liberation Mono' !important;
+
+    .content {
+      word-wrap: break-word;
+      height: 100%;
+      padding-right: 2px;
+
+      &.line-break {
+        word-wrap: break-word;
+      }
+
+      .text {
+        min-height: 22px;
+      }
+
+      color: var(--color-logs-text);
+      font-size: var(--font-size-small);
+      line-height: 22px;
+      white-space: pre-wrap;
+      background-color: var(--color-logs-bg);
+    }
+  }
+
+  .xterm {
+    .xterm-viewport {
+      overflow-y: auto !important;
+
+      &::-webkit-scrollbar {
+        width: var(--scrollbar-size);
+        height: var(--scrollbar-size);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: var(--color-scrollbar-track);
+        border-radius: 4px;
+      }
+    }
+  }
+}
@@ -0,0 +1,21 @@
+.pagination {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, 70%);
+  gap: 5px;
+
+  .ant-btn:hover {
+    color: rgba(255, 255, 255, 90%) !important;
+    background-color: rgba(71, 71, 71, 100%) !important;
+  }
+
+  .pages {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 38px;
+    width: 38px;
+  }
+}