fix: style

Author: geekdada

src/pages/Requests/components/ListItem.tsx

@@ -5,7 +5,9 @@ import css from '@emotion/css/macro'
 import dayjs from 'dayjs'
 import tw from 'twin.macro'
 import React from 'react'
+
 import { RequestItem } from '../../../types'
+import MethodBadge from './MethodBadge'
 
 const ListItem: React.FC<{ req: RequestItem }> = ({ req }) => {
   return (
@@ -21,18 +23,11 @@ const ListItem: React.FC<{ req: RequestItem }> = ({ req }) => {
             height: 1.5rem;
           `,
         ]}>
-        <div
-          css={[
-            tw`rounded px-1 text-white`,
-            css`
-              height: 1rem;
-              line-height: 1rem;
-              font-size: 0.5rem;
-            `,
-            req.status === 'Active' ? tw`bg-green-500` : tw`bg-blue-500`,
-          ]}>
-          {req.method}
-        </div>
+        <MethodBadge
+          method={req.method}
+          failed={req.failed}
+          status={req.status}
+        />
         <div tw="text-xs ml-1">#{req.id}</div>
         <div tw="text-xs ml-1">
           {dayjs.unix(req.startDate).format('HH:mm:ss')}

src/pages/Requests/components/MethodBadge.tsx

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import css from '@emotion/css/macro'
+import React from 'react'
+import tw from 'twin.macro'
+
+const MethodBadge: React.FC<{
+  failed: number
+  method: string
+  status: string
+}> = ({ failed, method, status }) => {
+  return (
+    <div
+      css={[
+        tw`rounded px-1 text-white inline-block`,
+        css`
+          height: 1rem;
+          line-height: 1rem;
+          font-size: 0.5rem;
+        `,
+        failed === 1
+          ? tw`bg-red-500`
+          : status === 'Active'
+          ? tw`bg-green-500`
+          : tw`bg-blue-500`,
+      ]}>
+      {method}
+    </div>
+  )
+}
+
+export default MethodBadge

src/pages/Requests/components/RequestModal.tsx

@@ -17,10 +17,11 @@ import 'react-tabs/style/react-tabs.css'
 import { DataGroup, DataRowMain } from '../../../components/Data'
 import { RequestItem } from '../../../types'
 import fetcher from '../../../utils/fetcher'
+import MethodBadge from './MethodBadge'
 
 const TabsWrapper = styled.div`
   .react-tabs__tab {
-    ${tw`text-sm font-medium border-none`}
+    ${tw`text-sm font-medium border-none transition-colors duration-200 ease-in-out`}
   }
   .react-tabs__tab--selected {
     ${tw`text-blue-500 bg-blue-100 border-none`}
@@ -61,7 +62,19 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, onClose }) => {
     <ModalWrapper>
       <ModalHeader title={`Detail (#${req.id})`} onClose={onClose} />
 
-      <div tw="truncate text-base font-medium mb-3">{req.URL}</div>
+      <div tw="mb-3 flex items-center">
+        <div
+          css={css`
+            padding-bottom: 0.25rem;
+          `}>
+          <MethodBadge
+            method={req.method}
+            failed={req.failed}
+            status={req.status}
+          />
+        </div>
+        <div tw="truncate text-base font-medium flex-1 ml-1">{req.URL}</div>
+      </div>
 
       <TabsWrapper>
         <Tabs>
@@ -113,24 +126,31 @@ const RequestModal: React.FC<RequestModalProps> = ({ req, onClose }) => {
               </DataRowMain>
             </DataGroup>
 
-            <DataGroup title="IP 地址">
-              <DataRowMain tw="text-sm">
-                <div>本地 IP 地址</div>
-                <div>{req.localAddress}</div>
-              </DataRowMain>
-              <DataRowMain tw="text-sm">
-                <div>远端 IP 地址</div>
-                <div>
-                  <a
-                    href={`https://ip.sb/ip/${req.remoteAddress}`}
-                    target="_blank"
-                    rel="noreferrer noopener">
-                    <Search tw="inline mr-1 w-3 h-3" />
-                    {req.remoteAddress}
-                  </a>
-                </div>
-              </DataRowMain>
-            </DataGroup>
+            {!!req.localAddress && !!req.remoteAddress && (
+              <DataGroup title="IP 地址">
+                <DataRowMain tw="text-sm">
+                  <div>本地 IP 地址</div>
+                  <div>{req.localAddress}</div>
+                </DataRowMain>
+                <DataRowMain tw="text-sm">
+                  <div>远端 IP 地址</div>
+                  <div>
+                    <a
+                      href={`https://ip.sb/ip/${req.remoteAddress}`}
+                      target="_blank"
+                      rel="noreferrer noopener">
+                      <Search
+                        tw="inline mr-1 w-3 h-3"
+                        css={css`
+                          margin-bottom: 2px;
+                        `}
+                      />
+                      {req.remoteAddress}
+                    </a>
+                  </div>
+                </DataRowMain>
+              </DataGroup>
+            )}
 
             <DataGroup title="流量">
               <DataRowMain tw="text-sm">

src/pages/Requests/index.tsx

@@ -34,7 +34,7 @@ const Page: React.FC = () => {
 
   useEffect(() => {
     let newList = [...requestList]
-    const pendingList = requests?.requests ?? []
+    const pendingList = requests?.requests?.slice(0, LIST_ITEMS_MAX) ?? []
 
     while (pendingList.length) {
       const request = pendingList.pop() as RequestItem
@@ -85,7 +85,7 @@ const Page: React.FC = () => {
 
         return (
           <div
-            key={`${req.id}`}
+            key={key}
             style={style}
             onClick={() => openRequestDetail(setModal, req)}
             tw="flex flex-col justify-center py-2 cursor-pointer hover:bg-gray-100"