Merge pull request #309 from HuolalaTech/feat/collect-resource

feat: support view static resource in network panel
HuolalaTech · Feb 12, 2025 · fb8c41c · fb8c41c
2 parents 151a002 + 2c753ed
commit fb8c41c
Show file tree

Hide file tree

Showing 8 changed files with 354 additions and 270 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-resizable": "^3.0.4",
     "@types/react-transition-group": "^4.4.5",
+    "@types/react-virtualized": "^9.22.0",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
@@ -78,6 +79,7 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.2.1",
     "react-transition-group": "^4.4.5",
+    "react-virtualized": "^9.22.6",
     "rehype-parse": "^9.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",

diff --git a/src/components/NetworkTable/ResponseBody/index.tsx b/src/components/NetworkTable/ResponseBody/index.tsx
@@ -3,7 +3,7 @@ import { dataUrlToBlob, downloadFile, semanticSize } from '../utils';
 import { withPopup, usePopupRef } from '@/utils/withPopup';
 import { DownloadOutlined } from '@ant-design/icons';
 import ReactJsonView from '@huolala-tech/react-json-view';
-import { Form, message, Modal, Input, Alert, Button } from 'antd';
+import { Form, message, Modal, Input, Alert, Button, Empty } from 'antd';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 
@@ -161,7 +161,15 @@ export const ResponseBody = ({ data }: ResponseBodyProps) => {
     // response ==> DataURL
     const { response, responseType, responseReason, requestType } = data;
 
-    if (!response) return null;
+    if (!response)
+      return (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={false}
+          style={{ margin: '40px 0' }}
+          imageStyle={{ height: 40 }}
+        />
+      );
     if (requestType === 'eventsource') {
       return <EventStream data={response} />;
     }

diff --git a/src/components/NetworkTable/StatusCode/index.tsx b/src/components/NetworkTable/StatusCode/index.tsx
@@ -1,31 +1,14 @@
 import { ResolvedNetworkInfo } from '@/utils';
 import { Space } from 'antd';
 import clsx from 'clsx';
+import { getStatusInfo } from '../utils';
 
 export const StatusCode = ({ data }: { data: ResolvedNetworkInfo }) => {
-  const { readyState, status } = data;
-  let statusClass = '';
-  let statusText = status;
-  const code = Number(status);
-  if (code < 200) {
-    if (readyState <= 1) {
-      statusClass = 'pending';
-      statusText = 'Pending';
-    } else {
-      statusClass = 'error';
-      statusText = 'Failed';
-    }
-  } else if (code < 300) {
-    statusClass = 'success';
-  } else if (code < 400) {
-    statusClass = 'redirect';
-  } else {
-    statusClass = 'error';
-  }
+  const { status, text } = getStatusInfo(data);
   return (
     <Space>
-      <div className={clsx(['status-code-circle', statusClass])} />
-      <b>{statusText}</b>
+      <div className={clsx(['status-code-circle', status])} />
+      <span>{text}</span>
     </Space>
   );
 };
diff --git a/src/components/NetworkTable/index.less b/src/components/NetworkTable/index.less
@@ -15,65 +15,19 @@
 
 .network-table {
   height: 100%;
-  overflow-x: hidden;
   background-color: #fff;
 
-  table {
-    width: 100%;
-    table-layout: fixed;
-    font-size: 13px;
-    color: #4a4b4d;
-    border-collapse: collapse;
-    th,
-    td {
-      border-right: 1px solid @table-border-color;
-      padding: 6px 6px;
-      &.active {
-        background-color: @tbody-select-bg;
-      }
-      &:last-child {
-        border-right: none;
-      }
-    }
-    thead {
-      position: sticky;
-      top: 0;
-      height: 30px;
-      background-color: @thead-bg;
-      th {
-        text-align: left;
-        border-bottom: 1px solid @table-border-color;
-      }
-    }
-    tbody {
-      td {
-        #mixin > .ellipsis;
-        &:nth-child(1) {
-          cursor: pointer;
-        }
-        &:nth-child(6) {
-          text-align: right;
-        }
-      }
-    }
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background-color: #f5f5f5;
-        }
-        &.error {
-          color: rgb(236, 48, 29);
-          .active {
-            color: rgb(236, 48, 29);
-            background-color: #f3cec9;
-          }
-        }
-        &:hover {
-          background-color: @tbody-hover-bg;
-        }
-      }
-    }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
   }
+  ::-webkit-scrollbar-thumb:active {
+    background: rgba(0, 0, 0, 0.25);
+  }
+
   .empty-table-placeholder {
     position: absolute;
     left: 50%;
@@ -168,7 +122,8 @@
       width: @circleSize;
       height: @circleSize;
       background-repeat: no-repeat;
-      &.pending {
+      &.pending,
+      &.unknown {
         background-image: url('@/assets/image/status-code-pending.svg');
       }
       &.error {
@@ -217,4 +172,35 @@
       }
     }
   }
+  // thead > tr
+  .ReactVirtualized__Table__headerRow {
+    background-color: @thead-bg;
+    text-align: left;
+    border-bottom: 1px solid @table-border-color;
+  }
+  // thead > tr > td
+  .ReactVirtualized__Table__headerColumn {
+    text-transform: none;
+  }
+  // tbody > tr
+  .ReactVirtualized__Table__row {
+    &:hover {
+      background-color: @tbody-hover-bg;
+    }
+    &.odd {
+      background-color: #f5f5f5;
+    }
+    &.active {
+      background-color: @tbody-select-bg;
+    }
+    > div:nth-child(1) {
+      cursor: pointer;
+    }
+  }
+  // tbody > tr > td
+  .ReactVirtualized__Table__rowColumn {
+    &:nth-child(6) {
+      text-align: right;
+    }
+  }
 }