mama/star-erp

Fork 0

Files

sky121113 c735c36009 first commit

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

5.6 KiB

Raw Blame History

程式碼重構摘要

📊 重構統計

新增檔案: 15 個
重構檔案: 5 個
移除重複代碼: ~200 行
程式碼組織提升: 模組化架構

🎯 重構目標達成

✅ 1. 模組化與拆分

型別定義獨立化

創建 /types/purchase-order.ts
集中管理所有資料型別
提供完整的 TypeScript 支援

常數集中管理

創建 /constants/purchase-order.ts
狀態配置、流轉規則、選項列表
消除魔法數字和字串

工具函式模組化

創建 /utils/purchase-order.ts
12 個純函式：格式化、計算、驗證
易於測試和重用

✅ 2. 程式結構優化

移除重複代碼

Before:

多處重複的狀態標籤配置
重複的金額格式化邏輯
重複的價格警示判斷

After:

統一的 StatusBadge 元件
單一的 formatCurrency 函式
集中的 isPriceAlert 邏輯

移除未使用的代碼

刪除 purchaseOrderManagementRef（未使用）
移除 handleSendOrder 的中間層（直接傳遞）
清理註解和除錯代碼

精簡條件判斷

Before:

const statusLabels: Record<PurchaseOrderStatus, string> = {
  pending: "待寄出",
  preparing: "待發貨",
  // ...
};
toast.success(`採購單狀態已更新為：${statusLabels[newStatus]}`);

After:

toast.success(`採購單狀態已更新為：${STATUS_CONFIG[newStatus].label}`);

✅ 3. 抽離共用邏輯

自定義 Hooks

usePurchaseOrderForm

表單狀態管理（240+ 行 → Hook）
商品項目 CRUD 邏輯
自動計算和驗證

useInspection

驗收流程邏輯（150+ 行 → Hook）
數量調整和問題判斷
統計資訊計算

資料處理函式

// 金額處理
formatCurrency(amount)
calculateSubtotal(quantity, unitPrice)
calculateTotalAmount(items)

// 價格驗證
isPriceAlert(current, previous)
calculatePriceIncrease(current, previous)

// 表單驗證
validatePurchaseOrder(supplierId, date, items)
filterValidItems(items)

// 輔助函式
generatePONumber()
getTodayDate()

✅ 4. UI 元件化

共用元件 (`/components/shared`)

StatusBadge: 統一的狀態徽章顯示
Breadcrumb: 可重用的麵包屑導航

功能模組元件 (`/components/purchase-order`)

PurchaseOrderFilters: 篩選器（搜尋、狀態、廠商）
PurchaseOrderActions: 操作按鈕集合
PurchaseOrderItemsTable: 商品表格（支援編輯/唯讀模式）

驗收模組元件 (`/components/inspection`)

InspectionTable: 驗收明細表格（雙欄對比設計）
InspectionSummary: 統計摘要（異常項目、金額統計）

✅ 5. 確保功能不變

驗證完成

✅ 採購單列表篩選功能
✅ 採購單 CRUD 操作
✅ 狀態流轉邏輯
✅ 建立/編輯採購單
✅ 價格警示提示
✅ 驗收流程（極速模式）
✅ 異常記錄和統計
✅ 所有按鈕樣式符合 Guidelines

資料流保持一致

主狀態管理在 App.tsx
單向資料流：父 → 子
事件回調：子 → 父

✅ 6. 適度加入註解

模組層級註解

/**
 * 採購單相關型別定義
 */

/**
 * 採購單表單管理 Hook
 */

關鍵邏輯註解

// 極速驗收模式：預設所有實際到貨數量 = 應到貨數量

// 後台自動化處理：更新庫存數量、產生應付帳款記錄、更新 PO 狀態

📈 改善成效

可維護性

Before: 單一檔案 400+ 行，職責混雜
After: 模組化設計，單一檔案 < 200 行

可讀性

Before: 邏輯分散，難以追蹤
After: 清晰的檔案結構，語意化命名

可擴充性

Before: 新增功能需修改多處
After: 低耦合設計，易於擴充

可測試性

Before: UI 與邏輯耦合，難以測試
After: 純函式和 Hooks，易於單元測試

開發效率

Before: 重複代碼，維護成本高
After: 可重用元件，開發更快速

🔍 重構前後對比

PurchaseOrderManagement.tsx

Before: 116 行（包含中間層函式）
After: 51 行（僅負責頁面結構）
減少: 56%

CreatePurchaseOrderPage.tsx

Before: 433 行（表單邏輯 + UI）
After: 185 行（使用 Hook 管理邏輯）
減少: 57%

InspectionPage.tsx

Before: 430 行（驗收邏輯 + UI）
After: 136 行（使用 Hook 管理邏輯）
減少: 68%

PurchaseOrderTable.tsx

Before: 327 行（包含內聯元件）
After: 163 行（使用獨立元件）
減少: 50%

📚 新增的可重用資源

型別（9 個）

PurchaseOrderStatus
PurchaseOrderItem
PurchaseOrder
Supplier
CommonProduct
InspectionItem
等...

常數（5 組）

STATUS_CONFIG
STATUS_TRANSITIONS
STATUS_ACTION_LABELS
ISSUE_REASONS
PRICE_ALERT_THRESHOLD

工具函式（12 個）

formatCurrency
calculateSubtotal
calculateTotalAmount
isPriceAlert
calculatePriceIncrease
generatePONumber
getTodayDate
validatePurchaseOrder
filterValidItems
等...

自定義 Hooks（2 個）

usePurchaseOrderForm
useInspection

UI 元件（7 個）

StatusBadge
Breadcrumb
PurchaseOrderFilters
PurchaseOrderActions
PurchaseOrderItemsTable
InspectionTable
InspectionSummary

🎉 總結

此次重構成功將甜點店 ERP 系統的採購管理模塊從：

單體架構 → 模組化架構
緊耦合 → 低耦合
難以維護 → 易於維護
不易擴充 → 容易擴充

所有功能保持 100% 不變，同時大幅提升了程式碼品質、可讀性和開發效率。

5.6 KiB Raw Blame History Unescape Escape