[FEAT] 實作跨倉庫及時庫存批號搜尋與 Debounce 搜尋體驗

resources/js/Pages/Inventory/StockQuery/Index.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { Head, router } from "@inertiajs/react";
+import { debounce } from "lodash";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import {
     Search,
@@ -126,9 +127,14 @@ export default function StockQueryIndex({
         filters.per_page || inventories.per_page?.toString() || "10"
     );
 
-    // 執行篩選
-    const applyFilters = (newFilters: Record<string, string | undefined>) => {
-        const merged = { ...filters, ...newFilters, page: undefined };
+    // 同步 URL 的 search 參數到 local state
+    useEffect(() => {
+        setSearch(filters.search || "");
+    }, [filters.search]);
+
+    // 執行篩選核心
+    const applyFiltersWithOptions = (newFilters: Record<string, string | undefined>, currentFilters: typeof filters) => {
+        const merged = { ...currentFilters, ...newFilters, page: undefined };
         // 移除空值
         const cleaned: Record<string, string> = {};
         Object.entries(merged).forEach(([key, value]) => {
@@ -143,8 +149,27 @@ export default function StockQueryIndex({
         });
     };
 
-    // 搜尋
+    const applyFilters = (newFilters: Record<string, string | undefined>) => {
+        applyFiltersWithOptions(newFilters, filters);
+    };
+
+    // Debounced Search Handler
+    const debouncedSearch = useCallback(
+        debounce((term: string, currentFilters: typeof filters) => {
+            applyFiltersWithOptions({ search: term || undefined }, currentFilters);
+        }, 500),
+        []
+    );
+
+    // 搜尋值的改變
+    const handleSearchChange = (val: string) => {
+        setSearch(val);
+        debouncedSearch(val, filters);
+    };
+
+    // 點擊搜尋按鈕或按下 Enter 鍵立即搜尋
     const handleSearch = () => {
+        debouncedSearch.cancel();
         applyFilters({ search: search || undefined });
     };
 
@@ -372,9 +397,9 @@ export default function StockQueryIndex({
                             <Input
                                 type="text"
                                 value={search}
-                                onChange={(e) => setSearch(e.target.value)}
+                                onChange={(e) => handleSearchChange(e.target.value)}
                                 onKeyDown={handleSearchKeyDown}
-                                placeholder="搜尋商品代碼或名稱..."
+                                placeholder="搜尋商品代碼或名稱或批號..."
                                 className="h-9"
                             />
                             <Button