加项搜索&更新样式

This commit is contained in:
xianyi
2025-12-04 17:24:43 +08:00
parent 48b526aa94
commit bc76de40c5
3 changed files with 26 additions and 8 deletions

View File

@@ -1,7 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import type { ExamClient, ExamModalTab } from '../../data/mockData'; import type { ExamClient, ExamModalTab } from '../../data/mockData';
import { Badge, Button } from '../ui'; import { Badge, Button, Input } from '../ui';
interface ExamModalProps { interface ExamModalProps {
client: ExamClient; 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='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
<div className='font-medium'></div> <div className='font-medium'></div>
<div className='text-xs text-gray-500'></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>
<Badge>签名图片</Badge> <Badge>签名图片</Badge>
</div> </div> */}
<Button className='py-1.5 px-3'></Button> <Button className='py-1.5 px-3'></Button>
</div> </div>
</div> </div>
@@ -191,6 +191,14 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
const maxSelect = 15; const maxSelect = 15;
const selectedCount = selectedIds.size; 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) => { const toggleSelect = (id: string) => {
if (selectedIds.has(id)) { if (selectedIds.has(id)) {
setSelectedIds(prev => { setSelectedIds(prev => {
@@ -247,7 +255,17 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
<div className='space-y-4'> <div className='space-y-4'>
{/* 标题和说明 */} {/* 标题和说明 */}
<div> <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 className='text-xs text-gray-600 space-y-1'>
<div> {maxSelect} · 5 </div> <div> {maxSelect} · 5 </div>
<div> {selectedCount} ,</div> <div> {selectedCount} ,</div>
@@ -255,8 +273,8 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
</div> </div>
{/* 加项网格 */} {/* 加项网格 */}
<div className='grid grid-cols-5 gap-3'> <div className='grid grid-cols-5 gap-3 min-h-[142px]'>
{allAddons.map((item) => { {filteredAddons.map((item) => {
const id = item.id || item.name; const id = item.id || item.name;
const isSelected = selectedIds.has(id); const isSelected = selectedIds.has(id);
const origPrice = parseFloat(item.originalPrice || '0'); const origPrice = parseFloat(item.originalPrice || '0');

View File

@@ -15,7 +15,7 @@ export const HomeSection = () => (
</Card> </Card>
<Card> <Card>
<CardHeader></CardHeader> <CardHeader></CardHeader>
<CardContent> <CardContent>
<div className='grid grid-cols-3 gap-3'> <div className='grid grid-cols-3 gap-3'>
{REVENUE_STATS.map(([label, value]) => ( {REVENUE_STATS.map(([label, value]) => (

View File

@@ -14,7 +14,7 @@ export const TopBar = ({ search, onSearch, enableSearch = true, operatorName, on
{enableSearch ? ( {enableSearch ? (
<div className='w-[420px] max-w-[60vw] flex items-center'> <div className='w-[420px] max-w-[60vw] flex items-center'>
<Input <Input
placeholder='搜索姓名 / 体检号 / 套餐' placeholder='搜索 姓名 / 证件号 / 手机号'
value={search} value={search}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
className='text-sm' className='text-sm'