[feat]:[FL-99][ATP模型管理页面搜索表单布局与交互优化]

- 实现实时搜索(debounce 500ms),移除搜索和重置按钮
- 添加 keywordDebounceTimeoutRef 管理防抖定时器
- 添加 handleKeywordChange 处理输入变化并触发防抖
- 添加 cleanup effect 防止内存泄漏
- 与用户管理页面交互模式保持一致

Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
chengkai3
2026-06-19 17:13:20 +08:00
parent 58bb284a09
commit 7772ac163c
+22 -21
View File
@@ -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 ? (