diff --git a/src/ant-design.d.ts b/src/ant-design.d.ts index 25931c6..f9b7f55 100644 --- a/src/ant-design.d.ts +++ b/src/ant-design.d.ts @@ -2,6 +2,7 @@ import * as React from 'react' import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon' import { TablePaginationConfig } from 'antd/lib' import { ColumnsType, FilterValue, SorterResult, SortOrder } from 'antd/es/table/interface' +import { CheckboxChangeEvent } from 'antd/es/checkbox' declare global { type IconComponent = @@ -14,4 +15,5 @@ declare global { type _FilterValue = FilterValue type _SorterResult = SorterResult type _SortOrder = SortOrder + type _CheckboxChangeEvent = CheckboxChangeEvent } diff --git a/src/assets/css/components/common/flex-box.scss b/src/assets/css/components/common/flex-box.scss index 0a9f239..2926ffc 100644 --- a/src/assets/css/components/common/flex-box.scss +++ b/src/assets/css/components/common/flex-box.scss @@ -1,5 +1,5 @@ .flex-box { - * { + > * { flex: 1; } } \ No newline at end of file diff --git a/src/global.d.ts b/src/global.d.ts index e7171ea..91657ea 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -161,11 +161,18 @@ interface PageParam { sortOrder?: string } +interface GetSysLogParams extends PageParam { + searchRequestUrl?: string + searchRegex?: boolean + searchStartTime?: string + searchEndTime?: string +} + interface TableParams { pagination?: _TablePaginationConfig sortField?: React.Key | readonly React.Key[] sortOrder?: _SortOrder - filters?: Record + filters?: Record } interface SysLogGetVo { diff --git a/src/pages/system/Log.tsx b/src/pages/system/Log.tsx index c41f5b6..caebc92 100644 --- a/src/pages/system/Log.tsx +++ b/src/pages/system/Log.tsx @@ -1,15 +1,17 @@ -import React, { useState } from 'react' +import React from 'react' import FitFullScreen from '@/components/common/FitFullScreen.tsx' import Card from '@/components/common/Card' import { r_getSysLog } from '@/services/system.tsx' -import { COLOR_FONT_SECONDARY, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts' +import { + COLOR_ERROR_SECONDARY, + COLOR_FONT_SECONDARY, + DATABASE_SELECT_SUCCESS +} from '@/constants/common.constants.ts' import HideScrollbar from '@/components/common/HideScrollbar.tsx' import { getLocalTime } from '@/utils/common.ts' -import useMessage from 'antd/es/message/useMessage' -import FlexBox from '@/components/common/FlexBox.tsx' +import FlexBox from '@/components/common/FlexBox' const Log: React.FC = () => { - const [message, contextHolder] = useMessage() const [logData, setLogData] = useState([]) const [loading, setLoading] = useState(false) const [tableParams, setTableParams] = useState({ @@ -19,6 +21,10 @@ const Log: React.FC = () => { position: ['bottomCenter'] } }) + const [searchRequestUrl, setSearchRequestUrl] = useState('') + const [useRegex, setUseRegex] = useState(false) + const [isRegexLegal, setIsRegexLegal] = useState(true) + const [timeRange, setTimeRange] = useState<[string, string]>() const dataColumns: _ColumnsType = [ { @@ -102,7 +108,12 @@ const Log: React.FC = () => { title: '异常', dataIndex: 'exception', render: (value: boolean, record) => (value ? record.exceptionInfo : '无'), - align: 'center' + align: 'center', + onCell: () => ({ + style: { + wordBreak: 'break-word' + } + }) }, { title: '用户代理', @@ -140,28 +151,87 @@ const Log: React.FC = () => { } } + const handleOnSearchUrlChange = (e: React.ChangeEvent) => { + setSearchRequestUrl(e.target.value) + + if (useRegex) { + try { + RegExp(e.target.value) + setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]'))) + } catch (e) { + setIsRegexLegal(false) + } + } else { + setIsRegexLegal(true) + } + } + + const handleOnSearchUrlKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + getLog() + } + } + + const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => { + setUseRegex(e.target.checked) + if (e.target.checked) { + try { + RegExp(searchRequestUrl) + setIsRegexLegal( + !(searchRequestUrl.includes('{}') || searchRequestUrl.includes('[]')) + ) + } catch (e) { + setIsRegexLegal(false) + } + } else { + setIsRegexLegal(true) + } + } + + const handleOnDateRangeChange = (_dates: unknown, dateStrings: [string, string]) => { + if (dateStrings[0] && dateStrings[1]) { + setTimeRange([ + new Date(dateStrings[0]).toISOString(), + new Date(dateStrings[1]).toISOString() + ]) + } else { + setTimeRange(undefined) + } + } + + const handleOnQueryBtnClick = () => { + getLog() + } + const getLog = () => { if (loading) { return } + if (!isRegexLegal) { + void message.error({ + content: '非法正则表达式' + }) + return + } + setLoading(true) - void r_getSysLog( - tableParams.sortField && tableParams.sortOrder - ? { - currentPage: tableParams.pagination?.current, - pageSize: tableParams.pagination?.pageSize, - sortField: tableParams.sortField as string, - sortOrder: tableParams.sortOrder, - ...tableParams.filters - } - : { - currentPage: tableParams.pagination?.current, - pageSize: tableParams.pagination?.pageSize, - ...tableParams.filters - } - ) + void r_getSysLog({ + currentPage: tableParams.pagination?.current, + pageSize: tableParams.pagination?.pageSize, + sortField: + tableParams.sortField && tableParams.sortOrder + ? (tableParams.sortField as string) + : undefined, + sortOrder: + tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined, + searchRequestUrl: searchRequestUrl.trim().length ? searchRequestUrl : undefined, + searchRegex: useRegex ? useRegex : undefined, + searchStartTime: timeRange && timeRange[0], + searchEndTime: timeRange && timeRange[1], + ...tableParams.filters + }) .then((res) => { const data = res.data if (data.code === DATABASE_SELECT_SUCCESS) { @@ -198,14 +268,13 @@ const Log: React.FC = () => { return ( <> - {contextHolder} - + { } suffix={ - - .* - + <> + {!isRegexLegal ? ( + + 非法表达式 + + ) : undefined} + + .* + + } + allowClear + value={searchRequestUrl} + onChange={handleOnSearchUrlChange} + onKeyDown={handleOnSearchUrlKeyDown} + status={isRegexLegal ? undefined : 'error'} /> - - + + + + + + 查询 + diff --git a/src/services/system.tsx b/src/services/system.tsx index 23125c0..c5ff320 100644 --- a/src/services/system.tsx +++ b/src/services/system.tsx @@ -1,5 +1,5 @@ import request from '@/services/index' import { URL_API_SYS_LOG } from '@/constants/urls.constants' -export const r_getSysLog = (param: PageParam) => +export const r_getSysLog = (param: GetSysLogParams) => request.get>(URL_API_SYS_LOG, { ...param })