From 0e602224cb5e531a8970d4abfce309e34df4fe7b Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Wed, 15 Nov 2023 15:34:16 +0800
Subject: [PATCH] Optimize log page

---
 src/pages/system/Log.tsx | 121 ++++++++++++++++++++-------------------
 1 file changed, 62 insertions(+), 59 deletions(-)

diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx
index b3d62de..2bc9cf4 100644
--- a/src/pages/system/Log.tsx
+++ b/src/pages/system/Log.tsx
@@ -261,6 +261,66 @@ const Log: React.FC = () => {
         JSON.stringify(tableParams.pagination?.current)
     ])
 
+    const toolbar = (
+        <FlexBox direction={'horizontal'} gap={10}>
+            <Card style={{ overflow: 'inherit' }}>
+                <AntdInput
+                    addonBefore={
+                        <span
+                            style={{
+                                fontSize: '0.9em',
+                                color: COLOR_FONT_SECONDARY
+                            }}
+                        >
+                            请求 Url
+                        </span>
+                    }
+                    suffix={
+                        <>
+                            {!isRegexLegal ? (
+                                <span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
+                            ) : undefined}
+                            <AntdCheckbox checked={useRegex} onChange={handleOnUseRegexChange}>
+                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
+                            </AntdCheckbox>
+                        </>
+                    }
+                    allowClear
+                    value={searchRequestUrl}
+                    onChange={handleOnSearchUrlChange}
+                    onKeyDown={handleOnSearchUrlKeyDown}
+                    status={isRegexLegal ? undefined : 'error'}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdDatePicker.RangePicker
+                    showTime
+                    allowClear
+                    changeOnBlur
+                    onChange={handleOnDateRangeChange}
+                />
+            </Card>
+            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
+                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
+                    查询
+                </AntdButton>
+            </Card>
+        </FlexBox>
+    )
+
+    const table = (
+        <Card>
+            <AntdTable
+                dataSource={logData}
+                columns={dataColumns}
+                rowKey={(record) => record.id}
+                pagination={tableParams.pagination}
+                loading={loading}
+                onChange={handleOnTableChange}
+            />
+        </Card>
+    )
+
     return (
         <>
             <FitFullScreen>
@@ -270,65 +330,8 @@ const Log: React.FC = () => {
                     autoHideWaitingTime={500}
                 >
                     <FlexBox gap={20}>
-                        <FlexBox direction={'horizontal'} gap={10}>
-                            <Card style={{ overflow: 'inherit' }}>
-                                <AntdInput
-                                    addonBefore={
-                                        <span
-                                            style={{
-                                                fontSize: '0.9em',
-                                                color: COLOR_FONT_SECONDARY
-                                            }}
-                                        >
-                                            请求 Url
-                                        </span>
-                                    }
-                                    suffix={
-                                        <>
-                                            {!isRegexLegal ? (
-                                                <span style={{ color: COLOR_ERROR_SECONDARY }}>
-                                                    非法表达式
-                                                </span>
-                                            ) : undefined}
-                                            <AntdCheckbox
-                                                checked={useRegex}
-                                                onChange={handleOnUseRegexChange}
-                                            >
-                                                <AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
-                                            </AntdCheckbox>
-                                        </>
-                                    }
-                                    allowClear
-                                    value={searchRequestUrl}
-                                    onChange={handleOnSearchUrlChange}
-                                    onKeyDown={handleOnSearchUrlKeyDown}
-                                    status={isRegexLegal ? undefined : 'error'}
-                                />
-                            </Card>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdDatePicker.RangePicker
-                                    showTime
-                                    allowClear
-                                    changeOnBlur
-                                    onChange={handleOnDateRangeChange}
-                                />
-                            </Card>
-                            <Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
-                                <AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
-                                    查询
-                                </AntdButton>
-                            </Card>
-                        </FlexBox>
-                        <Card>
-                            <AntdTable
-                                dataSource={logData}
-                                columns={dataColumns}
-                                rowKey={(record) => record.id}
-                                pagination={tableParams.pagination}
-                                loading={loading}
-                                onChange={handleOnTableChange}
-                            />
-                        </Card>
+                        {toolbar}
+                        {table}
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>