fix(product): 修復條碼掃描自動送出問題並優化手動輸入體驗

resources/js/Pages/Production/Recipe/Index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { Plus, Search, RotateCcw, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
+import { Plus, Search, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router, Link } from "@inertiajs/react";
@@ -11,7 +11,7 @@ import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Input } from "@/Components/ui/input";
-import { Label } from "@/Components/ui/label";
+
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
 import { Badge } from "@/Components/ui/badge";
 import { Can } from "@/Components/Permission/Can";
@@ -82,10 +82,7 @@ export default function RecipeIndex({ recipes, filters }: Props) {
         );
     };
 
-    const handleReset = () => {
-        setSearch("");
-        router.get(route('recipes.index'));
-    };
+
 
     const handlePerPageChange = (value: string) => {
         setPerPage(value);
@@ -130,54 +127,55 @@ export default function RecipeIndex({ recipes, filters }: Props) {
                             管理產品的標準生產配方與用量
                         </p>
                     </div>
-                    <div className="flex gap-2">
-                        <Can permission="recipes.create">
-                            <Link href={route('recipes.create')}>
-                                <Button className="gap-2 button-filled-primary">
-                                    <Plus className="h-4 w-4" />
-                                    新增配方
-                                </Button>
-                            </Link>
-                        </Can>
-                    </div>
+
                 </div>
 
-                {/* 篩選區塊 */}
-                <div className="bg-white rounded-lg shadow-sm border border-gray-200 mb-6 overflow-hidden">
-                    <div className="p-5">
-                        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
-                            <div className="md:col-span-12 space-y-1">
-                                <Label className="text-xs font-medium text-grey-2">關鍵字搜尋</Label>
-                                <div className="relative">
-                                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
-                                    <Input
-                                        placeholder="搜尋配方代號、名稱、產品名稱..."
-                                        value={search}
-                                        onChange={(e) => setSearch(e.target.value)}
-                                        className="pl-10 h-9 block"
-                                        onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
-                                    />
-                                </div>
-                            </div>
+                {/* Toolbar */}
+                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
+                    <div className="flex flex-col md:flex-row gap-4">
+                        {/* Search */}
+                        <div className="flex-1 relative">
+                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                            <Input
+                                placeholder="搜尋配方代號、名稱、產品名稱..."
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="pl-10 pr-10 h-9"
+                                onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
+                            />
+                            {search && (
+                                <button
+                                    onClick={() => {
+                                        setSearch("");
+                                        router.get(route('recipes.index'), { ...filters, search: "" }, { preserveState: true, replace: true });
+                                    }}
+                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                                >
+                                    <Trash2 className="h-4 w-4" /> {/* Using Trash2/X as clear icon, need to check imports. Inventory used X. */}
+                                </button>
+                            )}
                         </div>
-                    </div>
 
-                    <div className="flex items-center justify-end px-5 py-4 bg-gray-50/50 border-t border-gray-100 gap-3">
-                        <Button
-                            variant="outline"
-                            onClick={handleReset}
-                            className="button-outlined-primary h-9 gap-2"
-                        >
-                            <RotateCcw className="h-4 w-4" />
-                            重置
-                        </Button>
-                        <Button
-                            onClick={handleFilter}
-                            className="button-filled-primary h-9 px-6 gap-2"
-                        >
-                            <Search className="h-4 w-4" />
-                            搜尋
-                        </Button>
+                        {/* Action Buttons */}
+                        <div className="flex gap-2 w-full md:w-auto">
+                            <Button
+                                variant="outline"
+                                className="button-outlined-primary"
+                                onClick={handleFilter}
+                            >
+                                <Search className="w-4 h-4 mr-2" />
+                                搜尋
+                            </Button>
+
+                            <Can permission="recipes.create">
+                                <Link href={route('recipes.create')}>
+                                    <Button className="button-filled-primary">
+                                        <Plus className="w-4 h-4 mr-2" />
+                                        新增配方
+                                    </Button>
+                                </Link>
+                            </Can>
+                        </div>
                     </div>
                 </div>