feat: 統一庫存管理分頁 UI 與寬度規範，並更新 SKILL 規範文件

resources/js/Pages/Warehouse/Index.tsx

@@ -38,12 +38,14 @@ interface PageProps {
     };
     filters: {
         search?: string;
+        per_page?: string;
     };
 }
 
 export default function WarehouseIndex({ warehouses, totals, filters }: PageProps) {
     // 篩選狀態
     const [searchTerm, setSearchTerm] = useState(filters.search || "");
+    const [perPage, setPerPage] = useState(filters.per_page || '10');
 
     // 對話框狀態
     const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -58,13 +60,21 @@ export default function WarehouseIndex({ warehouses, totals, filters }: PageProp
     // 搜尋處理
     const handleSearch = (term: string) => {
         setSearchTerm(term);
-        router.get(route('warehouses.index'), { search: term }, {
+        router.get(route('warehouses.index'), { search: term, per_page: perPage }, {
             preserveState: true,
             preserveScroll: true,
             replace: true,
         });
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(route('warehouses.index'),
+            { ...filters, per_page: value, page: 1 },
+            { preserveState: false, replace: true, preserveScroll: true }
+        );
+    };
+
     // 導航處理
     const handleViewInventory = (warehouseId: string | number) => {
         router.get(`/warehouses/${warehouseId}/inventory`);
@@ -193,7 +203,7 @@ export default function WarehouseIndex({ warehouses, totals, filters }: PageProp
 
                         {/* 操作按鈕 */}
                         <div className="flex gap-2 w-full md:w-auto">
-                            <Can permission="inventory.transfer">
+                            <Can permission="inventory_count.create">
                                 <Button
                                     onClick={handleAddTransferOrder}
                                     className="flex-1 md:flex-initial button-outlined-primary"
@@ -238,7 +248,26 @@ export default function WarehouseIndex({ warehouses, totals, filters }: PageProp
                 )}
 
                 {/* 分頁 */}
-                <div className="mt-6">
+                <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2 text-sm text-gray-500">
+                            <span>每頁顯示</span>
+                            <SearchableSelect
+                                value={perPage}
+                                onValueChange={handlePerPageChange}
+                                options={[
+                                    { label: "10", value: "10" },
+                                    { label: "20", value: "20" },
+                                    { label: "50", value: "50" },
+                                    { label: "100", value: "100" }
+                                ]}
+                                className="w-[90px] h-8"
+                                showSearch={false}
+                            />
+                            <span>筆</span>
+                        </div>
+                        <span className="text-sm text-gray-500">共 {warehouses.total} 筆紀錄</span>
+                    </div>
                     <Pagination links={warehouses.links} />
                 </div>