web viewflow can adjust width

web/client/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^18.11.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "ahooks": "^3.8.0",
     "bootstrap": "^5.1.3",
     "copy-to-clipboard": "^3.3.1",
     "fetch-to-curl": "^0.5.2",

web/client/src/App.css

@@ -3,7 +3,7 @@ body {
 }
 
 .main-table-wrap {
-  font-family: Menlo,Monaco;
+  font-family: Menlo, Monaco;
   font-size: 0.8rem;
   display: flex;
   flex-flow: column;
@@ -16,7 +16,7 @@ body {
   border-top: 1px solid rgb(222, 226, 230);
 }
 
-.table-wrap-div .table>:not(:first-child) {
+.table-wrap-div .table > :not(:first-child) {
   border-top: 0 solid rgb(222, 226, 230);
 }
 
@@ -30,7 +30,7 @@ body {
   background-color: white;
   position: sticky;
   top: 0;
-  background: linear-gradient(to top,rgb(33, 37, 41), rgb(33, 37, 41) 2px, white 1px, white 100%);
+  background: linear-gradient(to top, rgb(33, 37, 41), rgb(33, 37, 41) 2px, white 1px, white 100%);
 }
 
 .main-table-wrap table td {
@@ -68,8 +68,6 @@ body {
   border-top: 2px solid rgb(222, 226, 230);
   height: calc(100vh - 51px);
   background-color: #fff;
-  min-width: 500px;
-  width: 50%;
   overflow-y: auto;
 
   word-break: break-all;

web/client/src/components/ResizerItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+export function ResizerItem({
+  width,
+  setWidth,
+  left = 0,
+  minWidth = 10,
+  maxWidth = 1000,
+}: {
+    width: number,
+    setWidth: (w: number) => void,
+    left: number,
+    minWidth: number,
+    maxWidth: number,
+}) {
+  let x = 0
+  let w = 0
+
+  function handleMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    x = e.clientX
+    w = width
+
+    document.addEventListener('mousemove', mouseMoveHandler)
+    document.addEventListener('mouseup', mouseUpHandler)
+  }
+
+  function mouseMoveHandler(e: MouseEvent) {
+    const dx = x - e.clientX
+    let nextWidth = w + dx
+    if (nextWidth < minWidth) nextWidth = minWidth
+    if (nextWidth > maxWidth) nextWidth = maxWidth
+    setWidth(nextWidth)
+  }
+
+  function mouseUpHandler() {
+    document.removeEventListener('mousemove', mouseMoveHandler)
+    document.removeEventListener('mouseup', mouseUpHandler)
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '0',
+        left: left,
+        width: '5px',
+        height: '100%',
+        cursor: 'col-resize',
+        userSelect: 'none',
+      }}
+      onMouseDown={handleMouseDown}
+    ></div>
+  )
+}

web/client/src/components/ViewFlow.tsx

@@ -7,6 +7,8 @@ import JSONPretty from 'react-json-pretty'
 import { isTextBody } from '../lib/utils'
 import type { Flow, IResponse } from '../lib/flow'
 import EditFlow from './EditFlow'
+import { useSize } from 'ahooks'
+import { ResizerItem } from './ResizerItem'
 
 interface Iprops {
   flow: Flow | null
@@ -16,6 +18,12 @@ interface Iprops {
 }
 
 function ViewFlow({ flow, onClose, onReRenderFlows, onMessage }: Iprops) {
+  const bodySize = useSize(document.querySelector('body'))
+  const initWrapWidth = bodySize ? bodySize.width / 2 : 500
+  const maxWrapWidth = bodySize ? bodySize.width * 0.9 : 1000
+  const minWrapWidth = 500
+  const [wrapWidth, setWrapWidth] = useState(initWrapWidth)
+
   const [flowTab, setFlowTab] = useState<'Headers' | 'Preview' | 'Response' | 'Hexview' | 'Detail'>('Detail')
   const [copied, setCopied] = useState(false)
   const [requestBodyViewTab, setRequestBodyViewTab] = useState<'Raw' | 'Preview'>('Raw')
@@ -162,7 +170,15 @@ function ViewFlow({ flow, onClose, onReRenderFlows, onMessage }: Iprops) {
   }
 
   return (
-    <div className="flow-detail">
+    <div className="flow-detail" style={{ width: wrapWidth }}>
+      <ResizerItem
+        width={wrapWidth}
+        setWidth={setWrapWidth}
+        left={0}
+        minWidth={minWrapWidth}
+        maxWidth={maxWrapWidth}
+      />
+
       <div className="header-tabs">
         <span
           style={{

web/client/yarn.lock

@@ -1040,6 +1040,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.21.0":
+  version "7.24.7"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -2482,6 +2489,21 @@ agent-base@6:
   dependencies:
     debug "4"
 
+ahooks@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.npmmirror.com/ahooks/-/ahooks-3.8.0.tgz#62476bf3459862ff706de2189b87de5e4f49b298"
+  integrity sha512-M01m+mxLRNNeJ/PCT3Fom26UyreTj6oMqJBetUrJnK4VNI5j6eMA543Xxo53OBXn6XibA2FXKcCCgrT6YCTtKQ==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    dayjs "^1.9.1"
+    intersection-observer "^0.12.0"
+    js-cookie "^2.x.x"
+    lodash "^4.17.21"
+    react-fast-compare "^3.2.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+    tslib "^2.4.1"
+
 ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
@@ -3568,6 +3590,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dayjs@^1.9.1:
+  version "1.11.11"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
+  integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
+
 [email protected], debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5078,6 +5105,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+intersection-observer@^0.12.0:
+  version "0.12.2"
+  resolved "https://registry.npmmirror.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
+  integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -5916,6 +5948,11 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+js-cookie@^2.x.x:
+  version "2.2.1"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-sdsl@^4.1.4:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
@@ -7550,6 +7587,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^16.13.1, react-is@^16.3.2:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7722,6 +7764,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
@@ -7803,6 +7850,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -7988,6 +8040,11 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
+screenfull@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -8640,6 +8697,11 @@ tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
+tslib@^2.4.1:
+  version "2.6.3"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"