48 lines
2.5 KiB
TypeScript
48 lines
2.5 KiB
TypeScript
import { IconSearch } from '@douyinfe/semi-icons';
|
||
import { TextArea } from '@douyinfe/semi-ui';
|
||
import { useMemo, useState } from 'react';
|
||
import { MAX_MONITOR_SEARCH_TERMS, parseMonitorSearchTerms } from '../hooks/useMonitorData';
|
||
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
|
||
|
||
export default function BatchVehicleSearchDialog({ initialValue, mobile, onApply, onClose }: {
|
||
initialValue: string;
|
||
mobile: boolean;
|
||
onApply: (value: string) => void;
|
||
onClose: () => void;
|
||
}) {
|
||
const [draft, setDraft] = useState(initialValue);
|
||
const terms = useMemo(() => parseMonitorSearchTerms(draft), [draft]);
|
||
|
||
return <WorkspaceSideSheet
|
||
className="v2-monitor-batch-sidesheet"
|
||
variant="editor"
|
||
visible
|
||
ariaLabel="批量搜索车辆"
|
||
closeLabel="关闭批量搜索车辆"
|
||
dialogId="v2-monitor-batch-search"
|
||
placement={mobile ? 'bottom' : 'right'}
|
||
width={mobile ? undefined : 520}
|
||
height={mobile ? 'min(86dvh, 700px)' : undefined}
|
||
title="批量搜索车辆"
|
||
description="从 Excel、文本或聊天记录中直接粘贴车牌"
|
||
icon={<IconSearch />}
|
||
badge={`${terms.length} 辆`}
|
||
badgeColor={terms.length ? 'blue' : 'grey'}
|
||
summaryItems={[
|
||
{ label: '已识别', value: terms.length.toLocaleString('zh-CN'), detail: '可直接应用到监控筛选', tone: terms.length ? 'primary' : 'neutral' },
|
||
{ label: '重复处理', value: '自动去重', detail: '相同车牌只保留一次', tone: 'success' },
|
||
{ label: '单次上限', value: `${MAX_MONITOR_SEARCH_TERMS} 辆`, detail: '超出部分不会进入查询' }
|
||
]}
|
||
footerNote="支持换行、空格、逗号或分号分隔。"
|
||
secondaryActions={[{ label: '取消', onClick: onClose }]}
|
||
primaryAction={{ label: `应用搜索（${terms.length}）`, ariaLabel: `应用搜索（${terms.length}）`, disabled: !terms.length, icon: <IconSearch />, onClick: () => onApply(terms.join('，')) }}
|
||
onCancel={onClose}
|
||
>
|
||
<div className="v2-batch-search-dialog">
|
||
<label htmlFor="batch-vehicle-search">每行一个车牌，也支持空格、逗号或分号分隔</label>
|
||
<TextArea id="batch-vehicle-search" autoFocus value={draft} onChange={setDraft} autosize={{ minRows: 8, maxRows: 14 }} resize="vertical" placeholder={'粤A12345\n粤B67890\n粤C24680'} />
|
||
<div className="v2-batch-search-summary" role="status"><span>已识别 <strong>{terms.length}</strong> 辆，重复项已自动去除</span><em>最多 {MAX_MONITOR_SEARCH_TERMS} 辆</em></div>
|
||
</div>
|
||
</WorkspaceSideSheet>;
|
||
}
|