first commit
This commit is contained in:
257
source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md
Normal file
257
source-code/ERP(B-aa)-管理採購單/src/PURCHASE_ORDER_LIST_REDESIGN.md
Normal file
@@ -0,0 +1,257 @@
|
||||
# 採購單列表頁面改版文件
|
||||
|
||||
## 📋 改版目標
|
||||
|
||||
1. 改善採購單列表的資訊層級與可讀性
|
||||
2. 使用者能快速辨識每張採購單的來源（由誰發起，以及從哪個單位發出）
|
||||
3. 僅在合約允許的範圍內做 UI 調整，不擴充額外功能
|
||||
4. 保留既有的建立採購單、搜尋、篩選、驗收等功能
|
||||
|
||||
## ✅ 完成的改版項目
|
||||
|
||||
### 1. 新增必要欄位（業務需求）
|
||||
|
||||
#### 申請人（採購人）
|
||||
- **顯示內容**: 採購單建立者的姓名
|
||||
- **資料來源**: `PurchaseOrder.createdBy`
|
||||
- **顯示位置**: 與申請單位合併顯示於「申請資訊」欄位
|
||||
- **用途**: 辨識責任歸屬、快速找到聯絡人
|
||||
|
||||
#### 申請單位（來源單位）
|
||||
- **顯示內容**: 發起採購的部門/門市（總店、A 店、B 店等）
|
||||
- **資料來源**: `PurchaseOrder.department`
|
||||
- **顯示位置**: 與申請人合併顯示於「申請資訊」欄位
|
||||
- **用途**: 判斷採購流程流向（由誰驗收、要送去哪裡）
|
||||
|
||||
#### 建立日期
|
||||
- **顯示內容**: 採購單建立的日期
|
||||
- **資料來源**: `PurchaseOrder.createdAt`
|
||||
- **顯示位置**: 獨立欄位，位於廠商與預計到貨日之間
|
||||
- **用途**: 催貨、追進度
|
||||
|
||||
### 2. 欄位排序優化
|
||||
|
||||
新的欄位順序（左至右）：
|
||||
1. **採購單編號** - 帶複製按鈕，方便複製分享
|
||||
2. **申請資訊** - 顯示「申請單位」與「申請人」
|
||||
3. **廠商** - 供應商名稱
|
||||
4. **建立日期** - 採購單建立時間
|
||||
5. **預計到貨日** - 預期到貨時間
|
||||
6. **總金額** - 右對齊，易於比較
|
||||
7. **狀態** - 使用彩色徽章
|
||||
8. **操作** - 驗收/編輯/取消按鈕
|
||||
|
||||
### 3. 視覺優化
|
||||
|
||||
#### 狀態顯示樣式
|
||||
所有狀態統一使用灰色線框徽章（outline variant），不以顏色做區分：
|
||||
|
||||
- **待寄出**
|
||||
- **待發貨**
|
||||
- **運送中**
|
||||
- **已到貨（待驗收）**
|
||||
- **已完成**
|
||||
- **已取消**
|
||||
|
||||
保持一致的視覺風格，讓使用者專注於狀態文字本身。
|
||||
|
||||
#### 操作按鈕視覺層級
|
||||
|
||||
**主要動作（驗收）**
|
||||
- 使用實心按鈕 `button-filled-primary`
|
||||
- 僅在「已到貨（待驗收）」狀態顯示
|
||||
- 包含圖示 + 文字
|
||||
|
||||
**次要動作（編輯）**
|
||||
- 使用線框按鈕 `button-outlined-primary`
|
||||
- 僅顯示圖示（節省空間）
|
||||
- 包含 tooltip 說明
|
||||
|
||||
**高風險動作（取消）**
|
||||
- 使用紅色線框按鈕
|
||||
- 明確的紅色邊框和文字
|
||||
- hover 時加強視覺效果
|
||||
|
||||
### 4. 使用者體驗優化
|
||||
|
||||
#### 複製採購單編號功能
|
||||
- 點擊採購單編號旁的複製按鈕
|
||||
- 自動複製到剪貼簿
|
||||
- 顯示成功提示訊息
|
||||
- 按鈕圖示從「複製」變為「打勾」2 秒
|
||||
|
||||
#### 搜尋提示優化
|
||||
- **舊**: "搜尋採購單編號或廠商..."
|
||||
- **新**: "搜尋採購單編號 / 廠商名稱"
|
||||
- 更明確的斜線分隔，清楚說明可搜尋內容
|
||||
|
||||
#### 申請資訊顯示
|
||||
採用雙行顯示，節省水平空間：
|
||||
```
|
||||
總店 ← 申請單位（較大、粗體）
|
||||
王小華 ← 申請人（較小、灰色）
|
||||
```
|
||||
|
||||
#### 採購單編號顯示
|
||||
- 使用 `font-mono` 等寬字體
|
||||
- 易於閱讀和比對
|
||||
- 搭配複製按鈕
|
||||
|
||||
## 📊 資料結構更新
|
||||
|
||||
### PurchaseOrder 型別新增欄位
|
||||
|
||||
```typescript
|
||||
export interface PurchaseOrder {
|
||||
// ... 既有欄位
|
||||
createdBy: string; // 申請人（採購人）
|
||||
department: string; // 申請單位
|
||||
}
|
||||
```
|
||||
|
||||
### Mock 資料範例
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: "po-1",
|
||||
poNumber: "PO202411001",
|
||||
supplierId: "sup-1",
|
||||
supplierName: "美食材料供應商",
|
||||
expectedDate: "2024-11-25",
|
||||
status: "arrived",
|
||||
createdBy: "王小華", // 新增
|
||||
department: "總店", // 新增
|
||||
items: [...],
|
||||
totalAmount: 3300,
|
||||
createdAt: "2024-11-18",
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 UI 元件更新
|
||||
|
||||
### 新增元件
|
||||
|
||||
1. **CopyButton** (`/components/shared/CopyButton.tsx`)
|
||||
- 通用複製按鈕元件
|
||||
- 支援複製任意文字
|
||||
- 包含視覺回饋（圖示切換、Toast 提示）
|
||||
|
||||
### 更新元件
|
||||
|
||||
1. **StatusBadge** (`/components/shared/StatusBadge.tsx`)
|
||||
- 支援新的顏色系統
|
||||
- 動態顯示背景色、文字色、邊框色
|
||||
|
||||
2. **PurchaseOrderTable** (`/components/PurchaseOrderTable.tsx`)
|
||||
- 調整欄位順序和寬度
|
||||
- 新增申請資訊欄位
|
||||
- 整合 CopyButton
|
||||
- 優化表格佈局
|
||||
|
||||
3. **PurchaseOrderActions** (`/components/purchase-order/PurchaseOrderActions.tsx`)
|
||||
- 調整按鈕視覺層級
|
||||
- 取消按鈕使用紅色強調
|
||||
- 新增 tooltip 說明
|
||||
|
||||
4. **PurchaseOrderFilters** (`/components/purchase-order/PurchaseOrderFilters.tsx`)
|
||||
- 更新搜尋框 placeholder
|
||||
|
||||
## 🔄 資料流
|
||||
|
||||
### 建立採購單時
|
||||
```
|
||||
使用者填寫表單
|
||||
↓
|
||||
系統自動帶入:
|
||||
- createdBy: "系統使用者"（實際應從登入狀態取得）
|
||||
- department: "總店"（實際應從使用者資料取得）
|
||||
↓
|
||||
儲存至資料庫
|
||||
```
|
||||
|
||||
### 列表顯示時
|
||||
```
|
||||
從資料庫讀取 PurchaseOrder[]
|
||||
↓
|
||||
表格顯示:
|
||||
- 申請資訊: department / createdBy
|
||||
- 建立日期: createdAt
|
||||
- 其他既有欄位
|
||||
```
|
||||
|
||||
## 📝 實作注意事項
|
||||
|
||||
### 1. 使用者身分整合
|
||||
目前使用預設值，實際部署時需要：
|
||||
- 從登入系統取得當前使用者姓名
|
||||
- 從使用者資料取得所屬單位
|
||||
- 在建立採購單時自動填入
|
||||
|
||||
```typescript
|
||||
// 實際應用時的範例
|
||||
const currentUser = useAuth(); // 取得登入使用者
|
||||
const newOrder = {
|
||||
// ...
|
||||
createdBy: currentUser.name,
|
||||
department: currentUser.department,
|
||||
};
|
||||
```
|
||||
|
||||
### 2. 表格寬度控制
|
||||
各欄位寬度設定：
|
||||
- 採購單編號: 140px
|
||||
- 申請資訊: 180px（雙行顯示）
|
||||
- 廠商: 160px
|
||||
- 建立日期: 110px
|
||||
- 預計到貨日: 110px
|
||||
- 總金額: 110px
|
||||
- 狀態: 140px
|
||||
- 操作: 自動
|
||||
|
||||
### 3. 響應式設計
|
||||
- 使用 `overflow-x-auto` 支援水平捲動
|
||||
- 在小螢幕上保持完整功能
|
||||
- 建議最小寬度: 1200px
|
||||
|
||||
### 4. 暗色模式支援
|
||||
所有顏色都包含 `dark:` 變體：
|
||||
- 文字顏色
|
||||
- 背景顏色
|
||||
- 邊框顏色
|
||||
|
||||
## ✨ 改版效益
|
||||
|
||||
### 資訊完整性
|
||||
- ✅ 清楚知道採購單來源
|
||||
- ✅ 快速辨識責任歸屬
|
||||
- ✅ 方便追蹤進度
|
||||
|
||||
### 使用者體驗
|
||||
- ✅ 一鍵複製採購單編號
|
||||
- ✅ 視覺層級更清晰
|
||||
- ✅ 狀態一目了然
|
||||
|
||||
### 操作效率
|
||||
- ✅ 減少點擊次數
|
||||
- ✅ 重要動作突出
|
||||
- ✅ 危險操作有警示
|
||||
|
||||
### 可維護性
|
||||
- ✅ 資料結構完整
|
||||
- ✅ 元件化設計
|
||||
- ✅ 易於擴充
|
||||
|
||||
## 🚫 未包含的功能（避免超出範圍）
|
||||
|
||||
- ❌ 採購單 KPI
|
||||
- ❌ 異常分析
|
||||
- ❌ 批次、效期資料
|
||||
- ❌ 自動催貨機制
|
||||
- ❌ 寄出通知提醒
|
||||
- ❌ 採購單歷史比較
|
||||
- ❌ 供應商評分系統
|
||||
- ❌ 進階追蹤與報表
|
||||
|
||||
## 🎯 總結
|
||||
|
||||
此次改版專注於**必要的資訊補充**和**使用者體驗優化**，所有調整均在合約範圍內，未增加額外功能。透過新增申請人、申請單位、建立日期等欄位，以及優化視覺呈現和操作體驗，大幅提升了採購單列表的可用性和資訊完整性。
|
||||
Reference in New Issue
Block a user