@baishuyun/ai-design 1.0.3 → 1.0.4

package/src/components/agent-helper/date-picker/month-panel.tsx

@@ -0,0 +1,82 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { MONTH_NAMES, checkDateValidate } from './utils';
+
+interface MonthPanelProps {
+  year: number;
+  month: number;
+  showYear: boolean;
+  position: 'absolute' | 'relative';
+  minDate: Date;
+  maxDate: Date;
+  week: number[];
+  onYearReduce: () => void;
+  onYearAdd: () => void;
+  onYearMenu: () => void;
+  onMountOk: (m: number) => void;
+}
+
+const tdBase = 'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px]';
+const tdDisabled = 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-[20px] before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]';
+
+export function MonthPanel({
+  year,
+  month,
+  showYear,
+  position,
+  minDate,
+  maxDate,
+  week,
+  onYearReduce,
+  onYearAdd,
+  onYearMenu,
+  onMountOk,
+}: MonthPanelProps) {
+  const checkValidate = (d: Date) => checkDateValidate(d, minDate, maxDate, week, 'month');
+
+  return (
+    <table cellSpacing={0} cellPadding={0} className="mt bg-white rounded-[4px]" style={{ position }}>
+      <thead>
+        <tr>
+          <td className={cn(tdBase, 'btn prevy hover:text-[#0265ff]')} colSpan={1} onClick={onYearReduce}>
+            <ChevronLeft size={14} />
+          </td>
+          <td className={cn(tdBase, 'year title font-bold p-0.5')} colSpan={1}>
+            <span className="title-year hover:text-[#0265ff] cursor-pointer" onClick={onYearMenu}>{year}</span>
+          </td>
+          <td className={cn(tdBase, 'btn nexty hover:text-[#0265ff]')} colSpan={1} onClick={onYearAdd}>
+            <ChevronRight size={14} />
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        {[0, 1, 2, 3].map((rowIdx) => (
+          <tr key={rowIdx}>
+            {[0, 1, 2].map((colIdx) => {
+              const m = rowIdx * 3 + colIdx;
+              if (m > 11) return <td key={m} className={tdBase} />;
+              const valid = checkValidate(new Date(year, m, 1));
+              const isSelected = month === m && !showYear;
+              const isDisabled = !valid;
+
+              return (
+                <td
+                  key={m}
+                  className={cn(
+                    tdBase,
+                    'month w-[58px] h-[38px] hover:bg-[rgba(2,101,255,0.08)]',
+                    isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]',
+                    isDisabled && tdDisabled
+                  )}
+                  onClick={() => { if (!isDisabled) onMountOk(m); }}
+                >
+                  {MONTH_NAMES[m]}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/agent-helper/date-picker/time-panel.tsx

@@ -0,0 +1,146 @@
+import { cn } from '../../../lib/utils';
+import { checkTimeValidate } from './utils';
+import type { TimeObj } from './types';
+
+interface TimePanelProps {
+  hours: number;
+  minutes: number;
+  seconds: number;
+  year: number;
+  month: number;
+  day: number;
+  format: string;
+  minDate: Date;
+  maxDate: Date;
+  startTime: TimeObj;
+  endTime: TimeObj;
+  onHoursChange: (v: number) => void;
+  onMinutesChange: (v: number) => void;
+  onSecondsChange: (v: number) => void;
+}
+
+const colItemBase = 'h-[32px] leading-[32px] text-center cursor-pointer rounded-[4px] hover:bg-[rgba(2,101,255,0.08)]';
+
+export function TimePanel({
+  hours,
+  minutes,
+  seconds,
+  year,
+  month,
+  day,
+  format,
+  minDate,
+  maxDate,
+  startTime,
+  endTime,
+  onHoursChange,
+  onMinutesChange,
+  onSecondsChange,
+}: TimePanelProps) {
+  const hasMinutePart = format.includes('mm');
+  const hasSecondPart = format.includes('ss');
+
+  const renderColumn = (type: 'hours' | 'minutes' | 'seconds') => {
+    const colLen = type === 'hours' ? 24 : 60;
+    const labels: Record<string, string> = { hours: '时', minutes: '分', seconds: '秒' };
+    const currentVal = type === 'hours' ? hours : type === 'minutes' ? minutes : seconds;
+    const onChange = type === 'hours' ? onHoursChange : type === 'minutes' ? onMinutesChange : onSecondsChange;
+
+    return (
+      <div className={cn('col flex-1 border-l border-[#e0e0e0]', type)}>
+        <div className="label h-[32px] leading-[32px] text-center">{labels[type]}</div>
+        <div className="col-list h-[200px] overflow-auto">
+          {Array.from({ length: colLen }, (_, index) => {
+            const isSelected = currentVal === index;
+            let isDisabled = false;
+
+            const isMinBoundary = minDate.getFullYear() === year && minDate.getMonth() === month && minDate.getDate() === day;
+            const isMaxBoundary = maxDate.getFullYear() === year && maxDate.getMonth() === month && maxDate.getDate() === day;
+
+            if (isMinBoundary) {
+              const current: TimeObj = {
+                h: type === 'hours' ? index : hours,
+                m: type === 'minutes' ? index : minutes,
+                s: type === 'seconds' ? index : seconds,
+                ms: 0,
+              };
+              isDisabled = !checkTimeValidate(current, startTime, { h: 23, m: 59, s: 59, ms: 999 });
+            }
+            if (isMaxBoundary && !isDisabled) {
+              const current: TimeObj = {
+                h: type === 'hours' ? index : hours,
+                m: type === 'minutes' ? index : minutes,
+                s: type === 'seconds' ? index : seconds,
+                ms: 0,
+              };
+              isDisabled = !checkTimeValidate(current, { h: 0, m: 0, s: 0, ms: 0 }, endTime);
+            }
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  colItemBase,
+                  isSelected && !isDisabled && 'select bg-[rgba(2,101,255,0.2)]',
+                  isDisabled && 'text-[#999] pointer-events-none opacity-80'
+                )}
+                onClick={() => { if (!isDisabled) onChange(index); }}
+              >
+                {index > 9 ? index : `0${index}`}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="time-range w-[180px]">
+      <div className="time-input flex h-[40px] border-l border-[#e0e0e0]">
+        <input
+          type="number"
+          value={hours}
+          className="h-[24px] w-[38px] my-[10px] mx-[10px] mt-[10px] text-center pl-[5px] flex-1"
+          onChange={(e) => {
+            const v = Math.min(23, Math.max(0, parseInt(e.target.value) || 0));
+            onHoursChange(v);
+          }}
+        />
+        {hasMinutePart && (
+          <>
+            <span className="leading-[40px]">:</span>
+            <input
+              type="number"
+              value={minutes}
+              className="h-[24px] w-[38px] my-[10px] mx-[10px] mt-[10px] text-center pl-[5px] flex-1"
+              onChange={(e) => {
+                const v = Math.min(59, Math.max(0, parseInt(e.target.value) || 0));
+                onMinutesChange(v);
+              }}
+            />
+          </>
+        )}
+        {hasSecondPart && (
+          <>
+            <span className="leading-[40px]">:</span>
+            <input
+              type="number"
+              value={seconds}
+              className="h-[24px] w-[38px] my-[10px] mx-[10px] mt-[10px] text-center pl-[5px] flex-1"
+              onChange={(e) => {
+                const v = Math.min(59, Math.max(0, parseInt(e.target.value) || 0));
+                onSecondsChange(v);
+              }}
+            />
+          </>
+        )}
+      </div>
+      <div className="time-select-range flex border-t border-[#e0e0e0]" style={{ height: 'calc(100% - 40px)' }}>
+        {renderColumn('hours')}
+        {hasMinutePart && renderColumn('minutes')}
+        {hasSecondPart && renderColumn('seconds')}
+      </div>
+    </div>
+  );
+}

package/src/components/agent-helper/date-picker/types.ts

@@ -0,0 +1,37 @@
+export type DateFormat =
+  | 'yyyy-MM-dd'
+  | 'yyyy-MM-dd HH:mm:ss'
+  | 'yyyy-MM-dd HH:mm'
+  | 'HH:mm:ss'
+  | 'HH:mm'
+  | 'yyyy-MM'
+  | 'yyyy';
+
+export interface DatePickerProps {
+  value?: Date;
+  onChange?: (date: Date | null, closeFloat?: boolean) => void;
+  format?: DateFormat;
+  minDate?: Date;
+  maxDate?: Date;
+  week?: number[];
+  className?: string;
+}
+
+export interface DateInputProps {
+  value?: Date;
+  onChange?: (date: Date | null) => void;
+  format?: DateFormat;
+  minDate?: Date;
+  maxDate?: Date;
+  week?: number[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface TimeObj {
+  h: number;
+  m: number;
+  s: number;
+  ms: number;
+}

package/src/components/agent-helper/date-picker/utils.ts

@@ -0,0 +1,123 @@
+import type { TimeObj } from './types';
+
+export const MIN_YEAR = 1000;
+export const MAX_YEAR = 2999;
+
+export const MONTH_NAMES = [
+  '一月', '二月', '三月', '四月', '五月', '六月',
+  '七月', '八月', '九月', '十月', '十一月', '十二月',
+];
+
+export const WEEK_NAMES = ['一', '二', '三', '四', '五', '六', '日'];
+
+export function getFirstMondayOfMonth(year: number, month: number): Date {
+  const firstDay = new Date(year, month, 1);
+  const dayOfWeek = firstDay.getDay();
+  const daysToSubtract = (dayOfWeek - 1 + 7) % 7;
+  return new Date(year, month, 1 - daysToSubtract);
+}
+
+export function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function checkTimeValidate(
+  current: TimeObj,
+  start: TimeObj,
+  end: TimeObj
+): boolean {
+  const curTotal = current.h * 3600000 + current.m * 60000 + current.s * 1000 + current.ms;
+  const startTotal = start.h * 3600000 + start.m * 60000 + start.s * 1000 + start.ms;
+  const endTotal = end.h * 3600000 + end.m * 60000 + end.s * 1000 + end.ms;
+  return curTotal >= startTotal && curTotal <= endTotal;
+}
+
+export function checkDateValidate(
+  d: Date,
+  minDate: Date,
+  maxDate: Date,
+  week: number[],
+  mode: 'day' | 'month' | 'year' = 'day'
+): boolean {
+  if (mode === 'year') {
+    const year = d.getFullYear();
+    return year >= minDate.getFullYear() && year <= maxDate.getFullYear();
+  }
+  if (mode === 'month') {
+    const y = d.getFullYear();
+    const m = d.getMonth();
+    const minY = minDate.getFullYear();
+    const minM = minDate.getMonth();
+    const maxY = maxDate.getFullYear();
+    const maxM = maxDate.getMonth();
+    if (y < minY || y > maxY) return false;
+    if (y === minY && m < minM) return false;
+    if (y === maxY && m > maxM) return false;
+    return true;
+  }
+  d.setHours(0, 0, 0, 0);
+  const min = new Date(minDate);
+  min.setHours(0, 0, 0, 0);
+  const max = new Date(maxDate);
+  max.setHours(0, 0, 0, 0);
+  if (d < min || d > max) return false;
+  if (week && week.length > 0 && !week.includes(d.getDay())) return false;
+  return true;
+}
+
+export function getCloserDate(target: Date, min: Date, max: Date): Date {
+  const t = target.getTime();
+  const mn = min.getTime();
+  const mx = max.getTime();
+  if (t < mn) return new Date(min);
+  if (t > mx) return new Date(max);
+  return new Date(target);
+}
+
+export function checkBeforeMenuClick(
+  date: Date,
+  minDate: Date,
+  mode: 'month' | 'year'
+): boolean {
+  if (mode === 'year') {
+    return date.getFullYear() > minDate.getFullYear();
+  }
+  const y = date.getFullYear();
+  const m = date.getMonth();
+  const minY = minDate.getFullYear();
+  const minM = minDate.getMonth();
+  return y > minY || (y === minY && m > minM);
+}
+
+export function checkAfterMenuClick(
+  date: Date,
+  maxDate: Date,
+  mode: 'month' | 'year'
+): boolean {
+  if (mode === 'year') {
+    return date.getFullYear() < maxDate.getFullYear();
+  }
+  const y = date.getFullYear();
+  const m = date.getMonth();
+  const maxY = maxDate.getFullYear();
+  const maxM = maxDate.getMonth();
+  return y < maxY || (y === maxY && m < maxM);
+}
+
+export function formatDateByFormat(date: Date, format: string): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  const h = String(date.getHours()).padStart(2, '0');
+  const min = String(date.getMinutes()).padStart(2, '0');
+  const s = String(date.getSeconds()).padStart(2, '0');
+
+  if (format === 'yyyy-MM-dd') return `${y}-${m}-${d}`;
+  if (format === 'yyyy-MM-dd HH:mm:ss') return `${y}-${m}-${d} ${h}:${min}:${s}`;
+  if (format === 'yyyy-MM-dd HH:mm') return `${y}-${m}-${d} ${h}:${min}`;
+  if (format === 'HH:mm:ss') return `${h}:${min}:${s}`;
+  if (format === 'HH:mm') return `${h}:${min}`;
+  if (format === 'yyyy-MM') return `${y}-${m}`;
+  if (format === 'yyyy') return `${y}`;
+  return `${y}-${m}-${d}`;
+}

package/src/components/agent-helper/date-picker/year-panel.tsx

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { checkDateValidate } from './utils';
+
+interface YearPanelProps {
+  year: number;
+  position: 'absolute' | 'relative';
+  showYearLabel?: boolean;
+  minDate: Date;
+  maxDate: Date;
+  week: number[];
+  onYearFReduce: () => void;
+  onYearFAdd: () => void;
+  onSelectYear: (y: number) => void;
+}
+
+const tdBase = 'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px]';
+const tdDisabled = 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-[14px] before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]';
+
+export function YearPanel({
+  year,
+  position,
+  showYearLabel,
+  minDate,
+  maxDate,
+  week,
+  onYearFReduce,
+  onYearFAdd,
+  onSelectYear,
+}: YearPanelProps) {
+  const startYear = year - 9;
+  const endYear = year + 10;
+
+  const yearGrid = useMemo(() => {
+    const rows: Array<Array<{ year: number; isSelected: boolean; isDisabled: boolean }>> = [];
+    for (let r = 0; r < 5; r++) {
+      const row: (typeof rows)[0] = [];
+      for (let c = 0; c < 4; c++) {
+        const y = startYear + r * 4 + c;
+        const valid = checkDateValidate(new Date(y, 0, 1), minDate, maxDate, week, 'year');
+        row.push({ year: y, isSelected: year === y, isDisabled: !valid });
+      }
+      rows.push(row);
+    }
+    return rows;
+  }, [startYear, year, minDate, maxDate, week]);
+
+  return (
+    <table cellSpacing={0} cellPadding={0} className="yt bg-white rounded-[4px] w-full h-full" style={{ position }}>
+      <thead>
+        <tr>
+          <td className={cn(tdBase, 'btn prevy hover:text-[#0265ff] grid place-content-center')} colSpan={1} onClick={onYearFReduce}>
+            <ChevronLeft size={14} />
+          </td>
+          <td className={cn(tdBase, 'year title font-bold p-0.5')} colSpan={2}>
+            {showYearLabel ? `${startYear}年 - ${endYear}年` : `${startYear} - ${endYear}`}
+          </td>
+          <td className={cn(tdBase, 'btn nexty hover:text-[#0265ff] grid place-content-center')} colSpan={1} onClick={onYearFAdd}>
+            <ChevronRight size={14} />
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        {yearGrid.map((row, ri) => (
+          <tr key={ri}>
+            {row.map((cell) => (
+              <td
+                key={cell.year}
+                className={cn(
+                  tdBase,
+                  'year',
+                  cell.isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]',
+                  cell.isDisabled && tdDisabled
+                )}
+                onClick={() => { if (!cell.isDisabled) onSelectYear(cell.year); }}
+              >
+                {cell.year}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/components/agent-helper/exec-log-filter/index.tsx

@@ -0,0 +1,201 @@
+import { useState, useCallback } from 'react';
+import type { triggerType } from '@baishuyun/types';
+import type { DateRange } from 'react-day-picker';
+import { cn } from '../../../lib/utils';
+import { DateRangePicker } from '../../date-range-picker';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '../../ui/select';
+
+const TRIGGER_TYPE_OPTIONS: Array<{ value: triggerType; label: string }> = [
+  { value: 'universal', label: '通用型' },
+  { value: 'form_field', label: '表单字段触发' },
+  { value: 'form_action', label: '表单动作触发' },
+  { value: 'form_flow_node', label: '表单流程节点触发' },
+  { value: 'scheduler', label: '计划任务触发' },
+];
+
+export interface ExecLogFilterValue {
+  dateRange?: DateRange;
+  execUserId?: string;
+  triggerType?: triggerType;
+  execResult?: string;
+}
+
+export interface ExecLogFilterProps {
+  value?: ExecLogFilterValue;
+  onChange?: (value: ExecLogFilterValue) => void;
+  onFilter?: (value: ExecLogFilterValue) => void;
+  execUserOptions?: Array<{ value: string; label: string }>;
+  execResultOptions?: Array<{ value: string; label: string }>;
+  className?: string;
+}
+
+export function ExecLogFilter({
+  value,
+  onChange,
+  onFilter,
+  execUserOptions = [],
+  execResultOptions = [],
+  className,
+}: ExecLogFilterProps) {
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(
+    value?.dateRange
+  );
+  const [execUserId, setExecUserId] = useState<string>(
+    value?.execUserId ?? 'all'
+  );
+  const [triggerType, setTriggerType] = useState<triggerType | 'all'>(
+    value?.triggerType ?? 'all'
+  );
+  const [execResult, setExecResult] = useState<string>(
+    value?.execResult ?? 'all'
+  );
+
+  const handleDateRangeChange = useCallback(
+    (range: DateRange | undefined) => {
+      setDateRange(range);
+      onChange?.({ dateRange: range, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, execUserId, triggerType, execResult]
+  );
+
+  const handleExecUserIdChange = useCallback(
+    (v: string) => {
+      setExecUserId(v);
+      onChange?.({ dateRange, execUserId: v, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, dateRange, triggerType, execResult]
+  );
+
+  const handleTriggerTypeChange = useCallback(
+    (v: triggerType | 'all') => {
+      setTriggerType(v);
+      onChange?.({ dateRange, execUserId, triggerType: v === 'all' ? undefined : v, execResult: execResult === 'all' ? undefined : execResult });
+    },
+    [onChange, dateRange, execUserId, execResult]
+  );
+
+  const handleExecResultChange = useCallback(
+    (v: string) => {
+      setExecResult(v);
+      onChange?.({ dateRange, execUserId, triggerType: triggerType === 'all' ? undefined : triggerType, execResult: v === 'all' ? undefined : v });
+    },
+    [onChange, dateRange, execUserId, triggerType]
+  );
+
+  const handleFilter = useCallback(() => {
+    onFilter?.({
+      dateRange,
+      execUserId: execUserId === 'all' ? undefined : execUserId,
+      triggerType: triggerType === 'all' ? undefined : triggerType,
+      execResult: execResult === 'all' ? undefined : execResult,
+    });
+  }, [onFilter, dateRange, execUserId, triggerType, execResult]);
+
+  const allExecUserOptions = [
+    { value: 'all', label: '全部' },
+    ...execUserOptions,
+  ];
+
+  const allExecResultOptions = [
+    { value: 'all', label: '全部' },
+    ...execResultOptions,
+  ];
+
+  const allTriggerTypeOptions = [
+    { value: 'all' as const, label: '全部' },
+    ...TRIGGER_TYPE_OPTIONS,
+  ];
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-[22px]',
+        className
+      )}
+    >
+      {/* 执行时间 */}
+      <div className="shrink-0 flex items-center gap-[10px] w-[426px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行时间
+        </span>
+        <DateRangePicker
+          value={dateRange}
+          onChange={handleDateRangeChange}
+          className="flex-1 min-w-0"
+        />
+      </div>
+
+      {/* 执行人 */}
+      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行人
+        </span>
+        <Select value={execUserId} onValueChange={handleExecUserIdChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="请输入" />
+          </SelectTrigger>
+          <SelectContent>
+            {allExecUserOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 触发类型 */}
+      <div className="flex-1 min-w-[120px] flex items-center gap-[10px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          触发类型
+        </span>
+        <Select value={triggerType} onValueChange={handleTriggerTypeChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="全部" />
+          </SelectTrigger>
+          <SelectContent>
+            {allTriggerTypeOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 执行结果 */}
+      <div className="shrink-0 flex items-center gap-[10px] w-[280px]">
+        <span className="shrink-0 text-[14px] text-[#030303] leading-[normal] whitespace-nowrap">
+          执行结果
+        </span>
+        <Select value={execResult} onValueChange={handleExecResultChange}>
+          <SelectTrigger className="flex-1 min-w-0">
+            <SelectValue placeholder="请输入" />
+          </SelectTrigger>
+          <SelectContent>
+            {allExecResultOptions.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 筛选按钮 */}
+      <button
+        type="button"
+        className="shrink-0 flex items-center justify-center h-[34px] px-[20px] py-[7px] rounded-[4px] bg-[#0265FF] text-[14px] text-white leading-[normal] whitespace-nowrap hover:bg-[#0252CC] cursor-pointer transition-colors duration-200"
+        onClick={handleFilter}
+      >
+        筛选
+      </button>
+    </div>
+  );
+}