feat(inventory): 開放倉庫編號編輯、優化調撥單條碼搜尋與庫存匯入範本雙分頁說明

This commit is contained in:
2026-02-06 16:36:14 +08:00
parent 200d1989bd
commit e018b75783
11 changed files with 555 additions and 20 deletions

View File

@@ -1086,3 +1086,77 @@ import { Pencil } from 'lucide-react';
5. ✅ **安全性**:統一的權限控制確保資料安全
當你在開發或審查 Star ERP 客戶端後台的 UI 時,請務必參考此規範!
---
## 15. 批次匯入彈窗規範 (Batch Import Dialog)
為了確保系統中所有批次匯入功能(如:商品、庫存、客戶)的體驗一致,必須遵循以下 UI 結構與樣式。
### 15.1 標題結構
- **樣式**:保持簡潔,僅使用文字標題,不帶額外圖示。
- **文字**統一為「匯入XXXX資料」。
```tsx
<DialogHeader>
<DialogTitle>匯入商品資料</DialogTitle>
<DialogDescription>
請先下載範本,填寫完畢後上傳檔案進行批次處理。
</DialogDescription>
</DialogHeader>
```
### 15.2 分步引導區塊 (Step-by-Step Guide)
匯入流程必須分為三個清晰的步驟區塊:
#### 步驟 1取得匯入範本
- **容器樣式**`bg-gray-50 rounded-lg border border-gray-100 p-4 space-y-2`
- **標題圖示**`<FileSpreadsheet className="w-4 h-4 text-green-600" />`
- **下載按鈕**`variant="outline" size="sm" className="w-full sm:w-auto button-outlined-primary"`,並明確標註 `.xlsx`
#### 步驟 2設定資訊 (選甜)
- **容器樣式**`space-y-2`
- **標題圖示**`<Info className="w-4 h-4 text-primary-main" />`
- **欄位樣式**:使用標準 `Input`,標籤文字使用 `text-sm text-gray-700`
- **預設值**若有備註欄位應提供合適的預設值例如「Excel 匯入」)。
#### 步驟 3上傳填寫後的檔案
- **容器樣式**`space-y-2`
- **標題圖示**`<FileUp className="w-4 h-4 text-blue-600" />`
- **Input 樣式**`type="file"`,並開啟 `cursor-pointer`
### 15.3 規則說明面板 (Accordion Rules)
詳細的填寫說明必須收納於 `Accordion` 中,避免干擾主流程:
- **樣式**:標準灰色邊框,不使用特殊背景色 (如琥珀色)。
- **容器**`className="w-full border rounded-lg px-2"`
- **觸發文字**`text-sm text-gray-500`
```tsx
<Accordion type="single" collapsible className="w-full border rounded-lg px-2">
<AccordionItem value="rules" className="border-b-0">
<AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
<div className="flex items-center gap-2">
<Info className="h-4 w-4" />
匯入規則與提示
</div>
</AccordionTrigger>
<AccordionContent>
<div className="text-sm text-gray-600 space-y-2 pb-2 pl-6">
<ul className="list-disc space-y-1">
<li>使用加粗文字標註關鍵欄位:<span className="font-medium text-gray-700">關鍵字</span></li>
<li>說明文字簡潔明瞭。</li>
</ul>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
```
### 15.4 底部操作 (Footer)
- **取消按鈕**`variant="outline"`,且為 `button-outlined-primary`
- **提交按鈕**`button-filled-primary`,且在處理中時顯示 `Loader2`