Merge branch 'feature/dataLogPage' into 'main'

fix: improve column width adjustment and optimize date picker performance

See merge request apipark/APIPark!122

Author: lichunxian

frontend/packages/common/src/components/aoplatform/TableBtnWithPermission.tsx

@@ -37,6 +37,8 @@ const TableIconName = {
 const TableBtnWithPermission = ({ btnTitle, access, tooltip, disabled, navigateTo, onClick, className, btnType }: TableBtnWithPermissionProps) => {
 
   const [btnAccess, setBtnAccess] = useState<boolean>(false)
+  const [btnStatus, setBtnStatus] = useState<boolean>(false)
+  const [closeToolTip, setCloseToolTip] = useState<boolean>(false)
   const { accessData, checkPermission, accessInit } = useGlobalContext()
   const navigate = useNavigate()
   const lastAccess = useMemo(() => {
@@ -52,16 +54,27 @@ const TableBtnWithPermission = ({ btnTitle, access, tooltip, disabled, navigateT
 
   const handleClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
+    setTimeout(() => {
+      setBtnStatus(false)
+      setCloseToolTip(true)
+    })
+    
     navigateTo ? navigate(navigateTo) : onClick?.()
   }, [navigateTo, navigate, onClick])
-
+  const changeTooltipStatus = (open: boolean) => {
+    setBtnStatus(open)
+    if (closeToolTip) {
+      setBtnStatus(false)
+      setCloseToolTip(false)
+    }
+  }
   return (<>{
     !btnAccess || (disabled && tooltip) ?
       <Tooltip placement="top" title={tooltip ?? $t('暂无(0)权限，请联系管理员分配。', [$t(btnTitle).toLowerCase()])}>
         <Button type="text" disabled={true} className={`h-[22px] border-none p-0 flex items-center bg-transparent ${className}`} key={btnType} icon={<Icon icon={TableIconName[btnType as keyof typeof TableIconName]} width="18" height="18" />} >{ }</Button>
       </Tooltip>
       :
-      <Tooltip placement="top" title={$t(btnTitle)}>
+      <Tooltip placement="top" title={$t(btnTitle)} trigger='hover' open={btnStatus} onOpenChange={changeTooltipStatus}>
         <Button type="text" disabled={disabled} className={`h-[22px] border-none p-0 flex items-center bg-transparent ${className} `} key={btnType} icon={<Icon icon={TableIconName[btnType as keyof typeof TableIconName]} width="18" height="18" />} onClick={handleClick}>{ }</Button>
       </Tooltip>
 

frontend/packages/common/src/components/aoplatform/TimeRangeSelector.tsx

@@ -26,9 +26,11 @@ type TimeRangeSelectorProps = {
   onTimeButtonChange: (time: TimeRangeButton) => void
   labelSize?: 'small' | 'default'
   bindRef?: any
+  hideBtns?: TimeRangeButton[]
+  defaultTimeButton?: TimeRangeButton
 }
 const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
-  const { initialTimeButton, initialDatePickerValue, onTimeRangeChange, hideTitle, onTimeButtonChange, labelSize = 'default', bindRef } = props
+  const { initialTimeButton, initialDatePickerValue, onTimeRangeChange, hideTitle, onTimeButtonChange, labelSize = 'default', bindRef, hideBtns = [], defaultTimeButton = 'hour' } = props
   const [timeButton, setTimeButton] = useState(initialTimeButton || '');
   const [datePickerValue, setDatePickerValue] = useState<RangeValue>(initialDatePickerValue || [null, null]);
   useEffect(() => {
@@ -37,7 +39,7 @@ const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
     }
   }, [bindRef])
   // 根据选择的时间范围计算开始和结束时间
-  const calculateTimeRange = (curBtn: 'hour' | 'day' | 'threeDays' | 'sevenDays') => {
+  const calculateTimeRange = (curBtn: TimeRangeButton) => {
     const currentSecond = Math.floor(Date.now() / 1000); // 当前秒级时间戳
     let startMin = currentSecond - 60 * 60
     switch (curBtn) {
@@ -75,15 +77,15 @@ const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
     calculateTimeRange(e.target.value);
   };
   const reset = () => {
-    setTimeButton('hour')
-    calculateTimeRange('hour')
+    setTimeButton(defaultTimeButton)
+    calculateTimeRange(defaultTimeButton)
     setDatePickerValue(null)
   }
 
   // 处理日期选择器的变化
   const handleDatePickerChange = (dates: RangeValue) => {
-    setTimeButton(dates ? '' : 'hour')
-    onTimeButtonChange?.(dates ? '' : 'hour')
+    setTimeButton(dates ? '' : defaultTimeButton)
+    onTimeButtonChange?.(dates ? '' : defaultTimeButton)
     setDatePickerValue(dates);
     if (dates && Array.isArray(dates) && dates.length === 2) {
       const [startDate, endDate] = dates;
@@ -94,7 +96,7 @@ const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
       }
     }
     if (!dates) {
-      calculateTimeRange('hour')
+      calculateTimeRange(defaultTimeButton)
     }
   };
 
@@ -109,10 +111,10 @@ const TimeRangeSelector = (props: TimeRangeSelectorProps) => {
     <div className="flex flex-nowrap items-center  pt-btnybase mr-btnybase">
       {!hideTitle && <label className={`whitespace-nowrap `}>{$t('时间')}：</label>}
       <Radio.Group className="whitespace-nowrap" value={timeButton} onChange={handleRadioChange} buttonStyle="solid">
-        <Radio.Button value="hour">{$t('近1小时')}</Radio.Button>
-        <Radio.Button value="day">{$t('近24小时')}</Radio.Button>
-        <Radio.Button value="threeDays">{$t('近3天')}</Radio.Button>
-        <Radio.Button className="rounded-e-none" value="sevenDays">{$t('近7天')}</Radio.Button>
+        {hideBtns?.length && hideBtns.includes('hour') ? null : <Radio.Button value="hour">{$t('近1小时')}</Radio.Button>}
+        {hideBtns?.length && hideBtns.includes('day') ? null : <Radio.Button value="day">{$t('近24小时')}</Radio.Button>}
+        {hideBtns?.length && hideBtns.includes('threeDays') ? null : <Radio.Button value="threeDays">{$t('近3天')}</Radio.Button>}
+        {hideBtns?.length && hideBtns.includes('sevenDays') ? null : <Radio.Button className="rounded-e-none" value="sevenDays">{$t('近7天')}</Radio.Button>}
       </Radio.Group>
       <DatePicker.RangePicker
         value={datePickerValue}

frontend/packages/core/src/pages/policy/dataMasking/DataMaskingColumn.tsx

@@ -27,7 +27,7 @@ export const DATA_MASKING_TABLE_COLUMNS: PageProColumns<any>[] = [
     filters: true,
     onFilter: false ,
     ellipsis: true,
-    width: 140,
+    width: 110,
     valueEnum: new Map(
       Object.keys(StrategyStatusEnum).map(key=>
         [key,
@@ -40,6 +40,7 @@ export const DATA_MASKING_TABLE_COLUMNS: PageProColumns<any>[] = [
     filters: true,
     onFilter: false ,
     ellipsis: true,
+    width: 90,
     valueEnum: {
       false: { text: <span className="text-status_success">{$t('启用')}</span> },
       true: { text: <span className="text-status_fail">{$t('禁用')}</span> }
@@ -53,7 +54,8 @@ export const DATA_MASKING_TABLE_COLUMNS: PageProColumns<any>[] = [
   {
     title: ('处理数'),
     dataIndex: 'processedTotal',
-    ellipsis: true
+    ellipsis: true,
+    width: 80,
   },
   {
     title: ('更新者'),

frontend/packages/core/src/pages/policy/dataMasking/DataMaskingLogModal.tsx

@@ -21,7 +21,7 @@ const DataMaskingLogModal = (props: any) => {
   const [datePickerValue, setDatePickerValue] = useState<any>();
   const currentSecond = Math.floor(Date.now() / 1000); // 当前秒级时间戳
   const [queryData, setQueryData] = useState<SearchBody>({
-    start: currentSecond - 60 * 60,
+    start: currentSecond - 24 * 60 * 60,
     end: currentSecond
   })
   /**
@@ -43,7 +43,7 @@ const DataMaskingLogModal = (props: any) => {
   /**
    * 时间按钮
    */
-  const [timeButton, setTimeButton] = useState<'' | 'hour' | 'day' | 'threeDays' | 'sevenDays'>('hour');
+  const [timeButton, setTimeButton] = useState<'' | 'hour' | 'day' | 'threeDays' | 'sevenDays'>('day');
   /**
    * 绑定时间范围组件
    * @param instance
@@ -84,7 +84,7 @@ const DataMaskingLogModal = (props: any) => {
   const columns = useMemo(() => {
     const res = DATA_MASKING_TABLE_LOG_COLUMNS.map(x => {
       if (x.dataIndex === 'url') {
-        x.render = (text: any, record: any) => <><span className='text-green-500'>{record.method}</span>&nbsp;<span>{text}</span></>
+        x.render = (text: any, record: any) => <><div className='w-full'><span className='text-green-500'>{record.method}</span>&nbsp;<span className='w-[calc(100%-25px)] text-ellipsis overflow-hidden whitespace-nowrap inline-block align-top'>{text}</span></div></>
       }
       return {
         ...x,
@@ -161,6 +161,8 @@ const DataMaskingLogModal = (props: any) => {
               <TimeRangeSelector
                 labelSize="small"
                 bindRef={bindRef}
+                hideBtns={['hour']}
+                defaultTimeButton="day"
                 initialTimeButton={timeButton}
                 onTimeButtonChange={setTimeButton}
                 initialDatePickerValue={datePickerValue}