[feat]:[FL-99][ATP模型管理页面搜索表单布局与交互优化]
- 实现实时搜索(debounce 500ms),移除搜索和重置按钮 - 添加 keywordDebounceTimeoutRef 管理防抖定时器 - 添加 handleKeywordChange 处理输入变化并触发防抖 - 添加 cleanup effect 防止内存泄漏 - 与用户管理页面交互模式保持一致 Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
@@ -181,6 +181,7 @@ export default function AtpModelsPage() {
|
||||
|
||||
const [keywordInput, setKeywordInput] = useState("");
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const keywordDebounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const [editingAsset, setEditingAsset] = useState<AtpAssetSummary | null>(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [tableScrollY, setTableScrollY] = useState(ATP_TABLE_MIN_SCROLL_Y);
|
||||
@@ -254,6 +255,26 @@ export default function AtpModelsPage() {
|
||||
},
|
||||
});
|
||||
|
||||
const handleKeywordChange = (value: string) => {
|
||||
setKeywordInput(value);
|
||||
|
||||
if (keywordDebounceTimeoutRef.current) {
|
||||
clearTimeout(keywordDebounceTimeoutRef.current);
|
||||
}
|
||||
|
||||
keywordDebounceTimeoutRef.current = setTimeout(() => {
|
||||
setKeyword(value);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (keywordDebounceTimeoutRef.current) {
|
||||
clearTimeout(keywordDebounceTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const assetItems = assetsQuery.data?.items ?? [];
|
||||
const voltageLevelOptions = useMemo(() => buildDimensionOptions(assetItems, (item) => item.voltage_level, DEFAULT_VOLTAGE_LEVELS), [assetItems]);
|
||||
const towerTypeOptions = useMemo(() => buildDimensionOptions(assetItems, (item) => item.tower_type, DEFAULT_TOWER_TYPES), [assetItems]);
|
||||
@@ -548,15 +569,6 @@ export default function AtpModelsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
setKeyword(keywordInput);
|
||||
};
|
||||
|
||||
const handleResetSearch = () => {
|
||||
setKeywordInput("");
|
||||
setKeyword("");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AntCard
|
||||
@@ -584,21 +596,10 @@ export default function AtpModelsPage() {
|
||||
<Input
|
||||
allowClear
|
||||
value={keywordInput}
|
||||
onChange={(event) => setKeywordInput(event.target.value)}
|
||||
onPressEnter={handleSearch}
|
||||
onChange={(event) => handleKeywordChange(event.target.value)}
|
||||
placeholder="按编码 / 名称 / 描述搜索"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
搜索
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button onClick={handleResetSearch}>重置筛选</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{assetsQuery.error instanceof Error ? (
|
||||
|
||||
Reference in New Issue
Block a user