mama/star-erp

Fork 0

Files

sky121113 c735c36009 first commit

2025-12-30 15:03:19 +08:00

6.7 KiB

Raw Blame History

採購單列表頁面改版文件

📋 改版目標

改善採購單列表的資訊層級與可讀性
使用者能快速辨識每張採購單的來源（由誰發起，以及從哪個單位發出）
僅在合約允許的範圍內做 UI 調整，不擴充額外功能
保留既有的建立採購單、搜尋、篩選、驗收等功能

✅ 完成的改版項目

1. 新增必要欄位（業務需求）

申請人（採購人）

顯示內容: 採購單建立者的姓名
資料來源: PurchaseOrder.createdBy
顯示位置: 與申請單位合併顯示於「申請資訊」欄位
用途: 辨識責任歸屬、快速找到聯絡人

申請單位（來源單位）

顯示內容: 發起採購的部門/門市（總店、A 店、B 店等）
資料來源: PurchaseOrder.department
顯示位置: 與申請人合併顯示於「申請資訊」欄位
用途: 判斷採購流程流向（由誰驗收、要送去哪裡）

建立日期

顯示內容: 採購單建立的日期
資料來源: PurchaseOrder.createdAt
顯示位置: 獨立欄位，位於廠商與預計到貨日之間
用途: 催貨、追進度

2. 欄位排序優化

新的欄位順序（左至右）：

採購單編號 - 帶複製按鈕，方便複製分享
申請資訊 - 顯示「申請單位」與「申請人」
廠商 - 供應商名稱
建立日期 - 採購單建立時間
預計到貨日 - 預期到貨時間
總金額 - 右對齊，易於比較
狀態 - 使用彩色徽章
操作 - 驗收/編輯/取消按鈕

3. 視覺優化

狀態顯示樣式

所有狀態統一使用灰色線框徽章（outline variant），不以顏色做區分：

待寄出
待發貨
運送中
已到貨（待驗收）
已完成
已取消

保持一致的視覺風格，讓使用者專注於狀態文字本身。

操作按鈕視覺層級

主要動作（驗收）

使用實心按鈕 button-filled-primary
僅在「已到貨（待驗收）」狀態顯示
包含圖示 + 文字

次要動作（編輯）

使用線框按鈕 button-outlined-primary
僅顯示圖示（節省空間）
包含 tooltip 說明

高風險動作（取消）

使用紅色線框按鈕
明確的紅色邊框和文字
hover 時加強視覺效果

4. 使用者體驗優化

複製採購單編號功能

點擊採購單編號旁的複製按鈕
自動複製到剪貼簿
顯示成功提示訊息
按鈕圖示從「複製」變為「打勾」2 秒

搜尋提示優化

舊: "搜尋採購單編號或廠商..."
新: "搜尋採購單編號 / 廠商名稱"
更明確的斜線分隔，清楚說明可搜尋內容

申請資訊顯示

採用雙行顯示，節省水平空間：

總店              ← 申請單位（較大、粗體）
王小華            ← 申請人（較小、灰色）

採購單編號顯示

使用 font-mono 等寬字體
易於閱讀和比對
搭配複製按鈕

📊 資料結構更新

PurchaseOrder 型別新增欄位

export interface PurchaseOrder {
  // ... 既有欄位
  createdBy: string;      // 申請人（採購人）
  department: string;     // 申請單位
}

Mock 資料範例

{
  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 元件更新

新增元件

CopyButton (/components/shared/CopyButton.tsx)
- 通用複製按鈕元件
- 支援複製任意文字
- 包含視覺回饋（圖示切換、Toast 提示）

更新元件

StatusBadge (/components/shared/StatusBadge.tsx)
- 支援新的顏色系統
- 動態顯示背景色、文字色、邊框色
PurchaseOrderTable (/components/PurchaseOrderTable.tsx)
- 調整欄位順序和寬度
- 新增申請資訊欄位
- 整合 CopyButton
- 優化表格佈局
PurchaseOrderActions (/components/purchase-order/PurchaseOrderActions.tsx)
- 調整按鈕視覺層級
- 取消按鈕使用紅色強調
- 新增 tooltip 說明
PurchaseOrderFilters (/components/purchase-order/PurchaseOrderFilters.tsx)
- 更新搜尋框 placeholder

🔄 資料流

建立採購單時

使用者填寫表單
    ↓
系統自動帶入:
  - createdBy: "系統使用者"（實際應從登入狀態取得）
  - department: "總店"（實際應從使用者資料取得）
    ↓
儲存至資料庫

列表顯示時

從資料庫讀取 PurchaseOrder[]
    ↓
表格顯示:
  - 申請資訊: department / createdBy
  - 建立日期: createdAt
  - 其他既有欄位

📝 實作注意事項

1. 使用者身分整合

目前使用預設值，實際部署時需要：

從登入系統取得當前使用者姓名
從使用者資料取得所屬單位
在建立採購單時自動填入

// 實際應用時的範例
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
❌ 異常分析
❌ 批次、效期資料
❌ 自動催貨機制
❌ 寄出通知提醒
❌ 採購單歷史比較
❌ 供應商評分系統
❌ 進階追蹤與報表

🎯 總結

此次改版專注於必要的資訊補充和使用者體驗優化，所有調整均在合約範圍內，未增加額外功能。透過新增申請人、申請單位、建立日期等欄位，以及優化視覺呈現和操作體驗，大幅提升了採購單列表的可用性和資訊完整性。

6.7 KiB Raw Blame History Unescape Escape