Complete main UI #37

Merged
FatttSnake merged 192 commits from FatttSnake into dev 2024-02-23 16:31:17 +08:00
Showing only changes of commit 0e602224cb - Show all commits

View File

@@ -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>