加项搜索&更新样式

src/components/exam/ExamModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import type { ExamClient, ExamModalTab } from '../../data/mockData';
-import { Badge, Button } from '../ui';
+import { Badge, Button, Input } from '../ui';
 
 interface ExamModalProps {
   client: ExamClient;
@@ -143,10 +143,10 @@ const ExamSignPanel = () => (
     <div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
       <div className='font-medium'>体检知情同意书</div>
       <div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域，签署完成后回到签到页面。</div>
-      <div className='flex gap-2 text-xs text-gray-600'>
+      {/* <div className='flex gap-2 text-xs text-gray-600'>
         <Badge>阅读记录</Badge>
         <Badge>签名图片</Badge>
-      </div>
+      </div> */}
       <Button className='py-1.5 px-3'>打开知情同意书并签署</Button>
     </div>
   </div>
@@ -191,6 +191,14 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
   const maxSelect = 15;
   const selectedCount = selectedIds.size;
 
+  const [addonSearch, setAddonSearch] = useState('');
+
+  const filteredAddons = addonSearch.trim()
+    ? allAddons.filter(item =>
+      item.name.toLowerCase().includes(addonSearch.toLowerCase())
+    )
+    : allAddons;
+
   const toggleSelect = (id: string) => {
     if (selectedIds.has(id)) {
       setSelectedIds(prev => {
@@ -247,7 +255,17 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
     <div className='space-y-4'>
       {/* 标题和说明 */}
       <div>
-        <h3 className='text-lg font-semibold text-gray-900 mb-2'>体检套餐加项选择</h3>
+        <div className='flex items-center justify-between mb-2 gap-3'>
+          <h3 className='text-lg font-semibold text-gray-900'>体检套餐加项选择</h3>
+          <div className='w-[260px]'>
+            <Input
+              placeholder='搜索 加项名称'
+              value={addonSearch}
+              onChange={(e) => setAddonSearch(e.target.value)}
+              className='text-sm'
+            />
+          </div>
+        </div>
         <div className='text-xs text-gray-600 space-y-1'>
           <div>最多可选 {maxSelect} 项 · 一排 5 个</div>
           <div>已勾选 {selectedCount} 项,自费加项费用按渠道折扣价结算。</div>
@@ -255,8 +273,8 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
       </div>
 
       {/* 加项网格 */}
-      <div className='grid grid-cols-5 gap-3'>
-        {allAddons.map((item) => {
+      <div className='grid grid-cols-5 gap-3 min-h-[142px]'>
+        {filteredAddons.map((item) => {
           const id = item.id || item.name;
           const isSelected = selectedIds.has(id);
           const origPrice = parseFloat(item.originalPrice || '0');