feat(inventory): 實作過期與瑕疵庫存總計顯示，並強化庫存明細過期提示

2026-02-05 15:50:14 +08:00
parent ba3c10ac13
commit a518d390bd
16 changed files with 751 additions and 574 deletions
--- a/.agent/skills/ui-consistency/SKILL.md
+++ b/.agent/skills/ui-consistency/SKILL.md
@@ -273,6 +273,65 @@ tooltip

 ---

+## 3.5 頁面佈局規範（新增/編輯頁面）
+
+### 標準結構
+
+新增/編輯頁面（如：商品新增、採購單建立）應遵循以下標準結構：
+
+```tsx
+<AuthenticatedLayout breadcrumbs={...}>
+    <Head title="..." />
+    
+    <div className="container mx-auto p-6 max-w-7xl">
+        {/* Header */}
+        <div className="mb-6">
+            {/* 返回按鈕 */}
+            <Link href={route('resource.index')}>
+                <Button
+                    variant="outline"
+                    className="gap-2 button-outlined-primary mb-4"
+                >
+                    <ArrowLeft className="h-4 w-4" />
+                    返回列表
+                </Button>
+            </Link>
+
+            {/* 頁面標題區塊 */}
+            <div className="mb-4">
+                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                    <Icon className="h-6 w-6 text-primary-main" />
+                    頁面標題
+                </h1>
+                <p className="text-gray-500 mt-1">
+                    頁面說明文字
+                </p>
+            </div>
+        </div>
+
+        {/* 表單或內容區塊 */}
+        <FormComponent ... />
+    </div>
+</AuthenticatedLayout>
+```
+
+### 關鍵規範
+
+1. **外層容器**：使用 `className="container mx-auto p-6 max-w-7xl"` 確保寬度與間距一致
+2. **Header 包裹**：使用 `<div className="mb-6">` 包裹返回按鈕與標題區塊
+3. **返回按鈕**：加上 `mb-4` 與標題區塊分隔
+4. **標題區塊**：使用 `<div className="mb-4">` 包裹 h1 和 p 標籤
+5. **標題樣式**：`text-2xl font-bold text-grey-0 flex items-center gap-2`
+6. **說明文字**：`text-gray-500 mt-1`
+
+### 範例頁面
+
+- ✅ `/resources/js/Pages/PurchaseOrder/Create.tsx`（建立採購單）
+- ✅ `/resources/js/Pages/Product/Create.tsx`（新增商品）
+- ✅ `/resources/js/Pages/Product/Edit.tsx`（編輯商品）
+
+---
+
 ## 4. 圖標規範

 ### 4.1 統一使用 lucide-react