feat: 實作銷售單匯入管理、貨道扣庫優化及 UI 細節調整

.agent/skills/ui-consistency/SKILL.md

@@ -1160,3 +1160,58 @@ import { Pencil } from 'lucide-react';
 
 - **取消按鈕**：`variant="outline"`，且為 `button-outlined-primary`。
 - **提交按鈕**：`button-filled-primary`，且在處理中時顯示 `Loader2`。
+
+---
+
+## 16. 詳情頁面項目清單規範 (Detail Page Item List Standards)
+
+為了確保詳情頁面（如：採購單詳情、進貨單詳情、銷售匯入詳情）的資訊層級清晰且視覺統一，所有項目清單必須遵循以下規範。
+
+### 16.1 容器結構 (Container Structure)
+
+項目清單應封裝在一個帶有內距的卡片容器中，而不是讓表格直接緊貼外層卡片邊緣。
+
+1. **外層卡片**：`bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden`
+2. **標題區塊**：`p-6 border-b border-gray-100 bg-gray-50/30`
+3. **內容內距**：標題下方的內容區塊應加上 `p-6`。
+4. **表格包裹層**：表格應再包裹一層 `border rounded-lg overflow-hidden`，以確保表格內部的邊角與隔線視覺完整。
+
+```tsx
+<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+    {/* 標題 */}
+    <div className="p-6 border-b border-gray-100 bg-gray-50/30">
+        <h2 className="text-lg font-bold text-gray-900">項目清單標題</h2>
+    </div>
+    
+    {/* 內容區塊 */}
+    <div className="p-6">
+        <div className="border rounded-lg overflow-hidden">
+            <Table>
+                <TableHeader>
+                    <TableRow className="bg-gray-50 hover:bg-gray-50">
+                        {/* 標頭欄位 */}
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {/* 表格內容 */}
+                </TableBody>
+            </Table>
+        </div>
+        
+        {/* 若有分頁，直接放在 p-6 容器內，並加 mt-6 分隔 */}
+        <div className="mt-6">
+            <Pagination ... />
+        </div>
+    </div>
+</div>
+```
+
+### 16.2 表格樣式細節 (Table Styling)
+
+1. **標頭背景**：`TableHeader` 的第一個 `TableRow` 應使用 `bg-gray-50 hover:bg-gray-50` 強化視覺區隔。
+2. **文字顏色**：主體文字使用 `text-gray-900`（標題/重要數據）或 `text-gray-500`（輔助/序號）。
+3. **數據對齊**：
+    *   **數量/序號**：文字置中 (`text-center`) 或依據數據類型對齊。
+    *   **金額**：金額欄位必須使用 `text-right` 並視情況加粗 (`font-bold`) 或加上 `text-primary-main` 顏色。
+4. **表格隔線**：確保表格具有清晰但不過於突出的水平隔線，提升長列表的可讀性。
+