fix: improve column width adjustment and optimize date picker performance

2026-06-14 20:41:15 +08:00 · 2024-12-06 18:02:44 +08:00
parent 5052720efb
commit 5c488fe4ea
4 changed files with 37 additions and 18 deletions
@@ -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>

@@ -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}
@@ -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: ('更新者'),
@@ -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}