使用自定义select组件

src/components/booking/BookingModal.tsx

@@ -1,12 +1,17 @@
+import { useState } from 'react';
 import { BOOKING_DOCTORS } from '../../data/mockData';
-import { Button, Input } from '../ui';
+import { Button, Input, Select } from '../ui';
 
 interface BookingModalProps {
   doctor: (typeof BOOKING_DOCTORS)[number];
   onClose: () => void;
 }
 
-export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
+export const BookingModal = ({ doctor, onClose }: BookingModalProps) => {
+  const [paymentMethod, setPaymentMethod] = useState('自费');
+  const [isCustomized, setIsCustomized] = useState('否');
+
+  return (
     <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
       <div className='w-[520px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
         <div className='px-4 py-3 border-b flex items-center justify-between'>
@@ -19,10 +24,11 @@ export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
           <div className='grid grid-cols-2 gap-3'>
             <div>
               付费方式
-            <select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <Select
-              <option>自费</option>
+                options={['自费', '单位结算']}
-              <option>单位结算</option>
+                value={paymentMethod}
-            </select>
+                onChange={setPaymentMethod}
+              />
             </div>
             <div>
               产品名称
@@ -30,10 +36,7 @@ export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
             </div>
             <div>
               是否定制
-            <select className='mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs'>
+              <Select options={['否', '是']} value={isCustomized} onChange={setIsCustomized} />
-              <option>否</option>
-              <option>是</option>
-            </select>
             </div>
             <div>
               期望预约时间
@@ -57,5 +60,6 @@ export const BookingModal = ({ doctor, onClose }: BookingModalProps) => (
       </div>
     </div>
   );
+};
 
 

src/components/ui/Select.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from 'react';
+import { cls } from '../../utils/cls';
+
+interface SelectProps {
+    options: string[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    placeholder?: string;
+}
+
+export const Select = ({ options, value, onChange, className = '', placeholder }: SelectProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value || options[0] || '');
+    const selectRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
+    }, [value]);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+
+    const handleSelect = (option: string) => {
+        setSelectedValue(option);
+        onChange?.(option);
+        setIsOpen(false);
+    };
+
+    return (
+        <div ref={selectRef} className={cls('relative', className)}>
+            <button
+                type='button'
+                onClick={() => setIsOpen(!isOpen)}
+                className={cls(
+                    'mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs',
+                    'flex items-center justify-between',
+                    'hover:border-gray-300 focus:ring-2 focus:ring-gray-200 transition-colors',
+                )}
+            >
+                <span className={selectedValue ? 'text-gray-900' : 'text-gray-400'}>
+                    {selectedValue || placeholder || '请选择'}
+                </span>
+                <span className={cls('text-gray-400 transition-transform text-[10px]', isOpen && 'rotate-180')}>
+                    ▼
+                </span>
+            </button>
+            {isOpen && (
+                <div className='absolute z-50 w-full mt-1 bg-white border rounded-2xl shadow-lg overflow-hidden'>
+                    {options.map((option) => (
+                        <button
+                            key={option}
+                            type='button'
+                            onClick={() => handleSelect(option)}
+                            className={cls(
+                                'w-full px-3 py-2 text-xs text-left transition-colors',
+                                'hover:bg-gray-50',
+                                selectedValue === option && 'bg-gray-100 text-gray-900 font-medium',
+                                selectedValue !== option && 'text-gray-700',
+                            )}
+                        >
+                            {option}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+

src/components/ui/index.ts

@@ -3,5 +3,6 @@ export * from './Button';
 export * from './Card';
 export * from './InfoCard';
 export * from './Input';
+export * from './Select';