@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/components/agent-helper/monthdays-select/index.tsx

@@ -1,378 +1,378 @@
-import { useState, useCallback, useMemo } from 'react';
-import type { repeatByMonthDetail } from '@baishuyun/types';
-import { cn } from '../../../lib/utils';
-import { transCls } from '../../../const/ui';
-import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs';
-import { SquareChecker } from '../../square-checker';
-import { ClearAllIcon } from '../../icons/clear-all-icon';
-import { usePortalContainer } from '../../../hooks/use-portal-container';
-
-export interface MonthdaysOption {
-  value: repeatByMonthDetail;
-  label: string;
-}
-
-export const MonthdaysOptions: MonthdaysOption[] = [
-  { value: 1, label: '1' },
-  { value: 2, label: '2' },
-  { value: 3, label: '3' },
-  { value: 4, label: '4' },
-  { value: 5, label: '5' },
-  { value: 6, label: '6' },
-  { value: 7, label: '7' },
-  { value: 8, label: '8' },
-  { value: 9, label: '9' },
-  { value: 10, label: '10' },
-  { value: 11, label: '11' },
-  { value: 12, label: '12' },
-  { value: 13, label: '13' },
-  { value: 14, label: '14' },
-  { value: 15, label: '15' },
-  { value: 16, label: '16' },
-  { value: 17, label: '17' },
-  { value: 18, label: '18' },
-  { value: 19, label: '19' },
-  { value: 20, label: '20' },
-  { value: 21, label: '21' },
-  { value: 22, label: '22' },
-  { value: 23, label: '23' },
-  { value: 24, label: '24' },
-  { value: 25, label: '25' },
-  { value: 26, label: '26' },
-  { value: 27, label: '27' },
-  { value: 28, label: '28' },
-  { value: 29, label: '29' },
-  { value: 30, label: '30' },
-  { value: 31, label: '31' },
-];
-
-const LAST_DAY_OPTION: MonthdaysOption = { value: 'last', label: '最后一个自然日' };
-
-const DAYS_PER_ROW = 7;
-
-export interface MonthdaysSelectProps {
-  value?: repeatByMonthDetail[];
-  onChange?: (value: repeatByMonthDetail[]) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-const CloseIcon = () => (
-  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
-    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
-  </svg>
-);
-
-const DropdownChevron = ({ open }: { open: boolean }) => (
-  <svg
-    width="16" height="16" viewBox="0 0 16 16" fill="none"
-    className={cn('shrink-0', transCls)}
-    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
-  >
-    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-export const MonthdaysSelect = ({
-  value = [],
-  onChange,
-  placeholder = '请选择日期',
-  disabled = false,
-  className,
-}: MonthdaysSelectProps) => {
-  const [open, setOpen] = useState(false);
-  const [isHovering, setIsHovering] = useState(false);
-  const [draftValue, setDraftValue] = useState<repeatByMonthDetail[]>(value);
-  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
-
-  const displayValue = open ? draftValue : value;
-
-  const numericSelected = useMemo(
-    () => displayValue.filter((v) => v !== 'last') as number[],
-    [displayValue]
-  );
-  const hasLast = useMemo(
-    () => displayValue.includes('last'),
-    [displayValue]
-  );
-
-  const allDaysSelected = numericSelected.length === 31;
-
-  const handleToggleDay = useCallback(
-    (day: repeatByMonthDetail) => {
-      setDraftValue((prev) =>
-        prev.includes(day) ? prev.filter((v) => v !== day) : [...prev, day]
-      );
-    },
-    []
-  );
-
-  const handleSelectAllDays = useCallback(() => {
-    setDraftValue((prev) => {
-      const prevNumeric = prev.filter((v) => v !== 'last') as number[];
-      if (prevNumeric.length === 31) {
-        return prev.filter((v) => v === 'last');
-      }
-      const allDays = MonthdaysOptions.map((o) => o.value);
-      const lastPart = prev.includes('last') ? (['last'] as const) : [];
-      return [...allDays, ...lastPart];
-    });
-  }, []);
-
-  const handleSelectToday = useCallback(() => {
-    const today = new Date().getDate();
-    setDraftValue((prev) => {
-      if (prev.includes(today as repeatByMonthDetail)) return prev;
-      return [...prev, today as repeatByMonthDetail];
-    });
-  }, []);
-
-  const handleToggleLast = useCallback(() => {
-    setDraftValue((prev) =>
-      prev.includes('last') ? prev.filter((v) => v !== 'last') : [...prev, 'last']
-    );
-  }, []);
-
-  const handleConfirm = useCallback(() => {
-    onChange?.(draftValue);
-    setOpen(false);
-  }, [draftValue, onChange]);
-
-  const handleOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (disabled) return;
-      if (nextOpen) {
-        setDraftValue([...value]);
-      }
-      setOpen(nextOpen);
-    },
-    [disabled, value]
-  );
-
-  const handleClearAll = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onChange?.([]);
-    },
-    [onChange]
-  );
-
-  const handleRemove = useCallback(
-    (day: repeatByMonthDetail, e: React.MouseEvent) => {
-      e.stopPropagation();
-      onChange?.(value.filter((v) => v !== day));
-    },
-    [value, onChange]
-  );
-
-  const hasSelection = value.length > 0;
-  const showClear = hasSelection && isHovering;
-
-  const displayLabel = useCallback((v: repeatByMonthDetail) => {
-    if (v === 'last') return '最后一天';
-    return `${v}日`;
-  }, []);
-
-  const dayRows = useMemo(() => {
-    const rows: MonthdaysOption[][] = [];
-    for (let i = 0; i < MonthdaysOptions.length; i += DAYS_PER_ROW) {
-      rows.push(MonthdaysOptions.slice(i, i + DAYS_PER_ROW));
-    }
-    return rows;
-  }, []);
-
-  return (
-    <div className={cn('relative', className)}>
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            ref={setTriggerRef}
-            disabled={disabled}
-            onMouseEnter={() => setIsHovering(true)}
-            onMouseLeave={() => setIsHovering(false)}
-            className={cn(
-              'flex items-center justify-between w-full h-[34px] gap-2.5',
-              'bg-white border border-[#E0E0E0] rounded-[4px]',
-              'py-[7px]',
-              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
-              'text-left cursor-pointer',
-              'hover:border-[#0265FF]',
-              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
-              open && 'border-[#0265FF]',
-              transCls
-            )}
-          >
-            {hasSelection ? (
-              <>
-                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-                  {value.map((day) => (
-                    <span
-                      key={day}
-                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
-                    >
-                      <span className="text-[14px] text-[#030303] leading-[normal]">
-                        {displayLabel(day)}
-                      </span>
-                      <span
-                        className="cursor-pointer flex items-center shrink-0"
-                        onClick={(e) => handleRemove(day, e)}
-                      >
-                        <CloseIcon />
-                      </span>
-                    </span>
-                  ))}
-                </div>
-                {showClear ? (
-                  <span
-                    className="cursor-pointer flex items-center shrink-0"
-                    onClick={handleClearAll}
-                  >
-                    <ClearAllIcon />
-                  </span>
-                ) : (
-                  <DropdownChevron open={open} />
-                )}
-              </>
-            ) : (
-              <>
-                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
-                  {placeholder}
-                </span>
-                <DropdownChevron open={open} />
-              </>
-            )}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          sideOffset={4}
-          portalContainer={portalContainer}
-          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-0"
-          style={{ width: '310px' }}
-        >
-          <Tabs defaultValue="specific">
-            <div className="px-[4px] pt-[4px] flex justify-center">
-              <TabsList>
-                <TabsTrigger value="specific">指定日期</TabsTrigger>
-                <TabsTrigger value="relative">相对日期</TabsTrigger>
-              </TabsList>
-            </div>
-
-            <TabsContent value="specific" className="mt-0">
-              <div className="px-[8px] pt-[8px] pb-[4px]">
-                <button
-                  type="button"
-                  onClick={handleSelectAllDays}
-                  className={cn(
-                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left mb-[4px]',
-                    'hover:bg-[#EFF0F6]',
-                    transCls
-                  )}
-                >
-                  <SquareChecker
-                    checked={allDaysSelected}
-                    intermediate={numericSelected.length > 0 && !allDaysSelected}
-                    onCheckedChange={handleSelectAllDays}
-                    className="shrink-0"
-                  />
-                  <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
-                    全选
-                  </span>
-                </button>
-                <div className="flex flex-col gap-[2px]">
-                  {dayRows.map((row, rowIdx) => (
-                    <div key={rowIdx} className="flex gap-[4px]">
-                      {row.map((option) => {
-                        const isSelected = numericSelected.includes(option.value as number);
-                        return (
-                          <button
-                            key={option.value}
-                            type="button"
-                            onClick={() => handleToggleDay(option.value)}
-                            className={cn(
-                              'flex items-center justify-center w-[36px] h-[30px] rounded-[4px]',
-                              'text-[14px] leading-[normal]',
-                              'transition-all duration-200 ease-out',
-                              isSelected
-                                ? 'bg-[#0265FF] text-white'
-                                : 'text-[#030303] hover:bg-[#EFF0F6]'
-                            )}
-                          >
-                            {option.label}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div className="flex items-center justify-between px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
-                <button
-                  type="button"
-                  onClick={handleSelectToday}
-                  className={cn(
-                    'h-[28px] px-[12px] rounded-[4px] text-[14px]',
-                    'text-[#0265FF] hover:bg-[#EFF0F6]',
-                    transCls
-                  )}
-                >
-                  今天
-                </button>
-                <button
-                  type="button"
-                  onClick={handleConfirm}
-                  className={cn(
-                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
-                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
-                    transCls
-                  )}
-                >
-                  确认
-                </button>
-              </div>
-            </TabsContent>
-
-            <TabsContent value="relative" className="mt-0">
-              <div className="px-[8px] pt-[8px] pb-[4px]">
-                <button
-                  type="button"
-                  onClick={handleToggleLast}
-                  className={cn(
-                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
-                    'hover:bg-[#EFF0F6]',
-                    transCls
-                  )}
-                >
-                  <SquareChecker
-                    checked={hasLast}
-                    onCheckedChange={handleToggleLast}
-                    className="shrink-0"
-                  />
-                  <span className="text-[14px] text-[#030303] leading-[normal]">
-                    {LAST_DAY_OPTION.label}
-                  </span>
-                </button>
-              </div>
-              <div className="flex items-center justify-center px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
-                <button
-                  type="button"
-                  onClick={handleConfirm}
-                  className={cn(
-                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
-                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
-                    transCls
-                  )}
-                >
-                  确认
-                </button>
-              </div>
-            </TabsContent>
-          </Tabs>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-};
+import { useState, useCallback, useMemo } from 'react';
+import type { repeatByMonthDetail } from '@baishuyun/types';
+import { cn } from '../../../lib/utils';
+import { transCls } from '../../../const/ui';
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../ui/tabs';
+import { SquareChecker } from '../../square-checker';
+import { ClearAllIcon } from '../../icons/clear-all-icon';
+import { usePortalContainer } from '../../../hooks/use-portal-container';
+
+export interface MonthdaysOption {
+  value: repeatByMonthDetail;
+  label: string;
+}
+
+export const MonthdaysOptions: MonthdaysOption[] = [
+  { value: 1, label: '1' },
+  { value: 2, label: '2' },
+  { value: 3, label: '3' },
+  { value: 4, label: '4' },
+  { value: 5, label: '5' },
+  { value: 6, label: '6' },
+  { value: 7, label: '7' },
+  { value: 8, label: '8' },
+  { value: 9, label: '9' },
+  { value: 10, label: '10' },
+  { value: 11, label: '11' },
+  { value: 12, label: '12' },
+  { value: 13, label: '13' },
+  { value: 14, label: '14' },
+  { value: 15, label: '15' },
+  { value: 16, label: '16' },
+  { value: 17, label: '17' },
+  { value: 18, label: '18' },
+  { value: 19, label: '19' },
+  { value: 20, label: '20' },
+  { value: 21, label: '21' },
+  { value: 22, label: '22' },
+  { value: 23, label: '23' },
+  { value: 24, label: '24' },
+  { value: 25, label: '25' },
+  { value: 26, label: '26' },
+  { value: 27, label: '27' },
+  { value: 28, label: '28' },
+  { value: 29, label: '29' },
+  { value: 30, label: '30' },
+  { value: 31, label: '31' },
+];
+
+const LAST_DAY_OPTION: MonthdaysOption = { value: 'last', label: '最后一个自然日' };
+
+const DAYS_PER_ROW = 7;
+
+export interface MonthdaysSelectProps {
+  value?: repeatByMonthDetail[];
+  onChange?: (value: repeatByMonthDetail[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+const CloseIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="shrink-0">
+    <path d="M3 3L9 9M9 3L3 9" stroke="#999999" strokeWidth="1.2" strokeLinecap="round" />
+  </svg>
+);
+
+const DropdownChevron = ({ open }: { open: boolean }) => (
+  <svg
+    width="16" height="16" viewBox="0 0 16 16" fill="none"
+    className={cn('shrink-0', transCls)}
+    style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+  >
+    <path d="M4 6L8 10L12 6" stroke="#666666" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const MonthdaysSelect = ({
+  value = [],
+  onChange,
+  placeholder = '请选择日期',
+  disabled = false,
+  className,
+}: MonthdaysSelectProps) => {
+  const [open, setOpen] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [draftValue, setDraftValue] = useState<repeatByMonthDetail[]>(value);
+  const { portalContainer, setTriggerRef } = usePortalContainer('data-bs-weekdays-select-portal');
+
+  const displayValue = open ? draftValue : value;
+
+  const numericSelected = useMemo(
+    () => displayValue.filter((v) => v !== 'last') as number[],
+    [displayValue]
+  );
+  const hasLast = useMemo(
+    () => displayValue.includes('last'),
+    [displayValue]
+  );
+
+  const allDaysSelected = numericSelected.length === 31;
+
+  const handleToggleDay = useCallback(
+    (day: repeatByMonthDetail) => {
+      setDraftValue((prev) =>
+        prev.includes(day) ? prev.filter((v) => v !== day) : [...prev, day]
+      );
+    },
+    []
+  );
+
+  const handleSelectAllDays = useCallback(() => {
+    setDraftValue((prev) => {
+      const prevNumeric = prev.filter((v) => v !== 'last') as number[];
+      if (prevNumeric.length === 31) {
+        return prev.filter((v) => v === 'last');
+      }
+      const allDays = MonthdaysOptions.map((o) => o.value);
+      const lastPart = prev.includes('last') ? (['last'] as const) : [];
+      return [...allDays, ...lastPart];
+    });
+  }, []);
+
+  const handleSelectToday = useCallback(() => {
+    const today = new Date().getDate();
+    setDraftValue((prev) => {
+      if (prev.includes(today as repeatByMonthDetail)) return prev;
+      return [...prev, today as repeatByMonthDetail];
+    });
+  }, []);
+
+  const handleToggleLast = useCallback(() => {
+    setDraftValue((prev) =>
+      prev.includes('last') ? prev.filter((v) => v !== 'last') : [...prev, 'last']
+    );
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    onChange?.(draftValue);
+    setOpen(false);
+  }, [draftValue, onChange]);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (disabled) return;
+      if (nextOpen) {
+        setDraftValue([...value]);
+      }
+      setOpen(nextOpen);
+    },
+    [disabled, value]
+  );
+
+  const handleClearAll = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+
+  const handleRemove = useCallback(
+    (day: repeatByMonthDetail, e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange?.(value.filter((v) => v !== day));
+    },
+    [value, onChange]
+  );
+
+  const hasSelection = value.length > 0;
+  const showClear = hasSelection && isHovering;
+
+  const displayLabel = useCallback((v: repeatByMonthDetail) => {
+    if (v === 'last') return '最后一天';
+    return `${v}日`;
+  }, []);
+
+  const dayRows = useMemo(() => {
+    const rows: MonthdaysOption[][] = [];
+    for (let i = 0; i < MonthdaysOptions.length; i += DAYS_PER_ROW) {
+      rows.push(MonthdaysOptions.slice(i, i + DAYS_PER_ROW));
+    }
+    return rows;
+  }, []);
+
+  return (
+    <div className={cn('relative', className)}>
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            ref={setTriggerRef}
+            disabled={disabled}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+            className={cn(
+              'flex items-center justify-between w-full h-[34px] gap-2.5',
+              'bg-white border border-[#E0E0E0] rounded-[4px]',
+              'py-[7px]',
+              hasSelection ? 'pl-[4px] pr-[10px]' : 'px-[10px]',
+              'text-left cursor-pointer',
+              'hover:border-[#0265FF]',
+              disabled && 'opacity-50 cursor-not-allowed hover:border-[#E0E0E0]',
+              open && 'border-[#0265FF]',
+              transCls
+            )}
+          >
+            {hasSelection ? (
+              <>
+                <div className="flex items-center gap-[4px] min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+                  {value.map((day) => (
+                    <span
+                      key={day}
+                      className="flex items-center gap-[4px] bg-[#EEEEEE] rounded-[2px] h-[26px] px-[6px] shrink-0"
+                    >
+                      <span className="text-[14px] text-[#030303] leading-[normal]">
+                        {displayLabel(day)}
+                      </span>
+                      <span
+                        className="cursor-pointer flex items-center shrink-0"
+                        onClick={(e) => handleRemove(day, e)}
+                      >
+                        <CloseIcon />
+                      </span>
+                    </span>
+                  ))}
+                </div>
+                {showClear ? (
+                  <span
+                    className="cursor-pointer flex items-center shrink-0"
+                    onClick={handleClearAll}
+                  >
+                    <ClearAllIcon />
+                  </span>
+                ) : (
+                  <DropdownChevron open={open} />
+                )}
+              </>
+            ) : (
+              <>
+                <span className="text-[14px] text-[#999999] leading-[normal] truncate">
+                  {placeholder}
+                </span>
+                <DropdownChevron open={open} />
+              </>
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          sideOffset={4}
+          portalContainer={portalContainer}
+          className="!border-0 rounded-[8px] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] p-0"
+          style={{ width: '310px' }}
+        >
+          <Tabs defaultValue="specific">
+            <div className="px-[4px] pt-[4px] flex justify-center">
+              <TabsList>
+                <TabsTrigger value="specific">指定日期</TabsTrigger>
+                <TabsTrigger value="relative">相对日期</TabsTrigger>
+              </TabsList>
+            </div>
+
+            <TabsContent value="specific" className="mt-0">
+              <div className="px-[8px] pt-[8px] pb-[4px]">
+                <button
+                  type="button"
+                  onClick={handleSelectAllDays}
+                  className={cn(
+                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left mb-[4px]',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={allDaysSelected}
+                    intermediate={numericSelected.length > 0 && !allDaysSelected}
+                    onCheckedChange={handleSelectAllDays}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] font-bold text-[#0265FF] leading-[normal]">
+                    全选
+                  </span>
+                </button>
+                <div className="flex flex-col gap-[2px]">
+                  {dayRows.map((row, rowIdx) => (
+                    <div key={rowIdx} className="flex gap-[4px]">
+                      {row.map((option) => {
+                        const isSelected = numericSelected.includes(option.value as number);
+                        return (
+                          <button
+                            key={option.value}
+                            type="button"
+                            onClick={() => handleToggleDay(option.value)}
+                            className={cn(
+                              'flex items-center justify-center w-[36px] h-[30px] rounded-[4px]',
+                              'text-[14px] leading-[normal]',
+                              'transition-all duration-200 ease-out',
+                              isSelected
+                                ? 'bg-[#0265FF] text-white'
+                                : 'text-[#030303] hover:bg-[#EFF0F6]'
+                            )}
+                          >
+                            {option.label}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center justify-between px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
+                <button
+                  type="button"
+                  onClick={handleSelectToday}
+                  className={cn(
+                    'h-[28px] px-[12px] rounded-[4px] text-[14px]',
+                    'text-[#0265FF] hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  今天
+                </button>
+                <button
+                  type="button"
+                  onClick={handleConfirm}
+                  className={cn(
+                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
+                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
+                    transCls
+                  )}
+                >
+                  确认
+                </button>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="relative" className="mt-0">
+              <div className="px-[8px] pt-[8px] pb-[4px]">
+                <button
+                  type="button"
+                  onClick={handleToggleLast}
+                  className={cn(
+                    'flex items-center gap-[6px] w-full h-[34px] px-[10px] py-[7px] rounded-[4px] text-left',
+                    'hover:bg-[#EFF0F6]',
+                    transCls
+                  )}
+                >
+                  <SquareChecker
+                    checked={hasLast}
+                    onCheckedChange={handleToggleLast}
+                    className="shrink-0"
+                  />
+                  <span className="text-[14px] text-[#030303] leading-[normal]">
+                    {LAST_DAY_OPTION.label}
+                  </span>
+                </button>
+              </div>
+              <div className="flex items-center justify-center px-[12px] py-[8px] border-t border-[#E0E0E0] mt-[4px]">
+                <button
+                  type="button"
+                  onClick={handleConfirm}
+                  className={cn(
+                    'h-[28px] px-[16px] rounded-[4px] text-[14px]',
+                    'bg-[#0265FF] text-white hover:bg-[#0255DD]',
+                    transCls
+                  )}
+                >
+                  确认
+                </button>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};