web: 界面优化

addon/web/client/package.json

@@ -18,7 +18,6 @@
     "react-dom": "^17.0.2",
     "react-json-pretty": "^2.2.0",
     "react-scripts": "4.0.3",
-    "scrollmonitor": "1.2.4",
     "typescript": "^4.5.2",
     "web-vitals": "^2.1.2"
   },

addon/web/client/public/index.html

@@ -33,7 +33,6 @@
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <div id="hidden-bottom" style="height: 0px; visibility: hidden;">bottom</div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

addon/web/client/src/App.css

@@ -1,26 +1,43 @@
 .main-table-wrap {
   font-family: Menlo,Monaco;
   font-size: 0.8rem;
+  display: flex;
+  flex-flow: column;
+  height: 100vh;
 }
 
-.main-table-wrap table td {
-  overflow: hidden;
-  white-space: nowrap;
+.table-wrap-div {
+  flex: 1;
+  overflow: auto;
+  border-top: 1px solid rgb(222, 226, 230);
+}
+
+.table-wrap-div .table>:not(:first-child) {
+  border-top: 0 solid rgb(222, 226, 230);
+}
+
+.table-wrap-div .table {
+  margin-bottom: 0;
 }
 
-/* https://css-tricks.com/position-sticky-and-table-headers/ */
-.main-table-wrap table th {
+/* https://codepen.io/Ray-H/pen/bMedLL */
+.table-wrap-div thead tr {
+  border-width: 0;
   background-color: white;
   position: sticky;
-  top: 50px;
+  top: 0;
+  background: linear-gradient(to top,rgb(33, 37, 41), rgb(33, 37, 41) 2px, white 1px, white 100%);
+}
+
+.main-table-wrap table td {
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .top-control {
-  position: sticky;
   display: flex;
   align-items: center;
   background-color: #fff;
-  top: 0;
   padding: 10px;
 }
 

addon/web/client/src/App.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import Table from 'react-bootstrap/Table'
 import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
-import scrollMonitor from 'scrollmonitor'
 import './App.css'
 
 import BreakPoint from './components/BreakPoint'
@@ -21,17 +20,14 @@ interface IState {
 
 const wsReconnIntervals = [1, 1, 2, 2, 4, 4, 8, 8, 16, 16, 32, 32]
 
-interface IProps {
-  pageBottom: HTMLElement
-}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface IProps {}
 
 class App extends React.Component<IProps, IState> {
   private flowMgr: FlowManager
   private ws: WebSocket | null
   private wsUnmountClose: boolean
 
-  private autoScore = false
-
   private wsReconnCount = -1
 
   constructor(props: IProps) {
@@ -48,8 +44,6 @@ class App extends React.Component<IProps, IState> {
 
     this.ws = null
     this.wsUnmountClose = false
-
-    this.initScrollMonitor()
   }
 
   componentDidMount() {
@@ -112,11 +106,7 @@ class App extends React.Component<IProps, IState> {
       if (msg.type === MessageType.REQUEST) {
         const flow = new Flow(msg)
         this.flowMgr.add(flow)
-        this.setState({ flows: this.flowMgr.showList() }, () => {
-          if (this.autoScore) {
-            this.props.pageBottom.scrollIntoView({ behavior: 'auto' })
-          }
-        })
+        this.setState({ flows: this.flowMgr.showList() })
       }
       else if (msg.type === MessageType.REQUEST_BODY) {
         const flow = this.flowMgr.get(msg.id)
@@ -139,16 +129,6 @@ class App extends React.Component<IProps, IState> {
     }
   }
 
-  initScrollMonitor() {
-    const watcher = scrollMonitor.create(this.props.pageBottom)
-    watcher.enterViewport(() => {
-      this.autoScore = true
-    })
-    watcher.exitViewport(() => {
-      this.autoScore = false
-    })
-  }
-
   render() {
     const { flows } = this.state
     return (
@@ -179,38 +159,41 @@ class App extends React.Component<IProps, IState> {
           <span>status: {this.state.wsStatus}</span>
         </div>
 
-        <Table striped bordered size="sm" style={{ tableLayout: 'fixed' }}>
-          <thead>
-            <tr>
-              <th style={{ width: '50px' }}>No</th>
-              <th style={{ width: '80px' }}>Method</th>
-              <th style={{ width: '200px' }}>Host</th>
-              <th style={{ width: 'auto' }}>Path</th>
-              <th style={{ width: '150px' }}>Type</th>
-              <th style={{ width: '80px' }}>Status</th>
-              <th style={{ width: '90px' }}>Size</th>
-              <th style={{ width: '90px' }}>Time</th>
-            </tr>
-          </thead>
-          <tbody>
-            {
-              flows.map(f => {
-                const fp = f.preview()
-
-                return (
-                  <FlowPreview
-                    key={fp.id}
-                    flow={fp}
-                    isSelected={(this.state.flow && this.state.flow.id === fp.id) ? true : false}
-                    onShowDetail={() => {
-                      this.setState({ flow: f })
-                    }}
-                  />
-                )
-              })
-            }
-          </tbody>
-        </Table>
+        <div className="table-wrap-div">
+          <Table striped bordered size="sm" style={{ tableLayout: 'fixed' }}>
+            <thead>
+              <tr>
+                <th style={{ width: '50px' }}>No</th>
+                <th style={{ width: '80px' }}>Method</th>
+                <th style={{ width: '200px' }}>Host</th>
+                <th style={{ width: 'auto' }}>Path</th>
+                <th style={{ width: '150px' }}>Type</th>
+                <th style={{ width: '80px' }}>Status</th>
+                <th style={{ width: '90px' }}>Size</th>
+                <th style={{ width: '90px' }}>Time</th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                flows.map(f => {
+                  const fp = f.preview()
+
+                  return (
+                    <FlowPreview
+                      key={fp.id}
+                      flow={fp}
+                      isSelected={(this.state.flow && this.state.flow.id === fp.id) ? true : false}
+                      onShowDetail={() => {
+                        this.setState({ flow: f })
+                      }}
+                    />
+                  )
+                })
+              }
+            </tbody>
+          </Table>
+          <div id="hidden-bottom" style={{ height: '0px', visibility: 'hidden' }}></div>
+        </div>
 
         <ViewFlow
           flow={this.state.flow}

addon/web/client/src/index.tsx

@@ -4,11 +4,9 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-const pageBottom = document.getElementById('hidden-bottom')
-
 ReactDOM.render(
   <React.StrictMode>
-    <App pageBottom={pageBottom as HTMLElement} />
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 )

addon/web/client/src/types/scrollmonitor.d.ts

@@ -1,3 +0,0 @@
-declare module 'scrollmonitor' {
-  export function create(el: HTMLElement): any
-}

addon/web/client/yarn.lock

@@ -10311,11 +10311,6 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scrollmonitor@1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/scrollmonitor/-/scrollmonitor-1.2.4.tgz#823d04cc1574aa3b71de7cc70ef91ebe633344a0"
-  integrity sha512-HBQpeZVAYETbNk0DAmi+X4hdTQMk5WRa/Udez9o8yC8GcRiPDgBxyEdV9g9Su/TWOuUeVfVGfNcyboEyzkte4Q==
-
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"