feat(wip): migrate WIP trio pages from Jinja2 to Vue 3 + Vite

Migrate /wip-overview, /wip-detail, and /hold-detail (1,941 lines vanilla JS)
to Vue 3 SFC architecture. Extract shared CSS/constants/components to
wip-shared/. Switch Pareto charts to vue-echarts with autoresize. Replace
Jinja2 template injection with frontend URL params + constant classification
for Hold Detail. Add 10-min auto-refresh + AbortController to Hold Detail.
Remove three Jinja2 templates, update Flask routes to send_from_directory.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -37,12 +37,14 @@
 | Portal 動態抽屜導覽管理 | ✅ 已完成 |
 | QC-GATE 即時狀態報表（Vue 3 + Vite） | ✅ 已完成 |
 | 數據表查詢頁面 Vue 3 遷移 | ✅ 已完成 |
+| WIP 三頁 Vue 3 遷移（Overview/Detail/Hold Detail） | ✅ 已完成 |
 | 設備快取 DataFrame TTL 一致性修復 | ✅ 已完成 |
 
 ---
 
 ## 開發歷史（Vite 重構後）
 
+- 2026-02-09：完成 WIP 三頁 Vue 3 遷移（`/wip-overview`、`/wip-detail`、`/hold-detail`）— 三頁共 1,941 行 vanilla JS + Jinja2 重寫為 Vue 3 SFC。抽取共用 CSS/常數/元件至 `wip-shared/`，Pareto 圖改用 vue-echarts（與 QC-GATE 一致），Hold Detail 新增前端 URL params 判斷取代 Jinja2 注入。
 - 2026-02-09：完成數據表查詢頁面（`/tables`）Vue 3 遷移 — 第二個純 Vite 頁面，建立 `apiPost` POST 請求模式，237 行 vanilla JS 重寫為 Vue 3 SFC 元件。
 - 2026-02-09：修復設備快取 DataFrame TTL 一致性問題 — process-level DataFrame（30s TTL）過期後 derived index 仍為 ready，導致 `/api/resource/status` 回傳空資料。新增 Redis fallback reload。
 - 2026-02-09：新增 QC-GATE 即時狀態報表 — 第一個純 Vue 3 + Vite 頁面（脫離 Jinja2），建立後續前端遷移架構模式。
@@ -461,26 +463,33 @@ A: 請確認瀏覽器允許下載檔案，並檢查查詢結果是否有資料
 
 ### WIP 即時概況
 
-- 總覽統計（總 LOT 數、總數量、總片數）
-- 按 SPEC 和 WORKCENTER 統計
-- 按產品線統計（匯總 + 明細）
-- Hold 狀態分類（品質異常/非品質異常）
-- 柏拉圖視覺化圖表
+- 總覽統計（Total Lots、Total QTY）+ 狀態卡片（RUN/QUEUE/品質異常/非品質異常）
+- Workcenter × Package 矩陣表（Top 15 欄位、sticky 首欄、Total 行列）
+- Hold Pareto 分析（品質/非品質分組、ECharts 雙軸柏拉圖 + 明細表）
+- Autocomplete 篩選（WORKORDER/LOT ID/PACKAGE/TYPE，cross-filter + 300ms debounce）
+- 矩陣點擊 drill-down 至 WIP Detail、Pareto 點擊 drill-down 至 Hold Detail
+- 10 分鐘自動刷新 + AbortController 請求取消
+- **技術架構**：Vue 3 + Vite，Pareto 圖使用 vue-echarts
 
 ### WIP 明細查詢
 
-- 依工作中心篩選
-- 依 Package 篩選
-- 依 Hold 狀態篩選
-- 依製程站點篩選
-- 支援 Excel 匯出
+- 依工作中心顯示 LOT 明細（4 sticky 欄 + 動態 Spec 欄位）
+- 狀態卡片篩選（RUN/QUEUE/品質異常/非品質異常）
+- 點擊 LOT ID 展開 inline 詳細面板（基本/產品/製程/物料/Hold/NCR 資訊）
+- Autocomplete 篩選（含 cross-filter）+ 伺服器端分頁
+- URL params 接收 Overview drill-down 參數（workcenter + filters）
+- 10 分鐘自動刷新 + AbortController 請求取消
+- **技術架構**：Vue 3 + Vite
 
 ### Hold 狀態分析
 
-- Hold 批次總覽
-- 按 Hold 原因分類
-- Hold 明細查詢
-- 品質異常分類統計
+- 依 Hold 原因顯示摘要統計（Total Lots/QTY/平均滯留/最久滯留/影響站群）
+- 品質異常/非品質異常分類（前端常數判斷，紅/橙 gradient header）
+- Age 分布卡片篩選（0-1天/1-3天/3-7天/7+天）
+- Workcenter/Package 分布表篩選
+- LOT 明細表（10 欄 + 伺服器端分頁 + 篩選指示器）
+- 10 分鐘自動刷新 + AbortController 請求取消
+- **技術架構**：Vue 3 + Vite，URL params 取代 Jinja2 注入
 
 ### 設備狀態監控
 
@@ -571,7 +580,8 @@ CIRCUIT_BREAKER_RECOVERY_TIMEOUT=30
 | 技術 | 用途 |
 |------|------|
 | Jinja2 | 模板引擎（既有頁面） |
-| Vue 3 | UI 框架（新頁面，漸進式遷移中） |
+| Vue 3 | UI 框架（QC-GATE、Tables、WIP 三頁已遷移，漸進式擴展中） |
+| vue-echarts | ECharts Vue 封裝（QC-GATE、WIP Overview Pareto 圖） |
 | Vite 6 | 前端多頁模組打包（含 Vue SFC + HTML entry） |
 | ECharts | 圖表庫（npm tree-shaking + 舊版靜態檔案並存） |
 | Vanilla JS Modules | 互動功能與頁面邏輯（既有頁面） |
@@ -631,8 +641,12 @@ DashBoard_vite/
 │   ├── src/resource-history/   # 設備歷史績效 entry
 │   ├── src/job-query/          # 設備維修查詢 entry
 │   ├── src/excel-query/        # Excel 批次查詢 entry
-│   ├── src/tables/             # 數據表查詢 entry
-│   └── src/qc-gate/            # QC-GATE 即時狀態 (Vue 3 SFC)
+│   ├── src/tables/             # 數據表查詢 entry (Vue 3 SFC)
+│   ├── src/qc-gate/            # QC-GATE 即時狀態 (Vue 3 SFC)
+│   ├── src/wip-shared/         # WIP 三頁共用 CSS/常數/元件
+│   ├── src/wip-overview/       # WIP 即時概況 (Vue 3 SFC)
+│   ├── src/wip-detail/         # WIP 明細查詢 (Vue 3 SFC)
+│   └── src/hold-detail/        # Hold 狀態分析 (Vue 3 SFC)
 ├── shared/
 │   └── field_contracts.json    # 前後端共用欄位契約
 ├── scripts/                    # 腳本
@@ -718,6 +732,14 @@ conda run -n mes-dashboard python scripts/run_cache_benchmarks.py --enforce
 
 ### 2026-02-09
 
+- 完成 WIP 三頁 Vue 3 遷移（`/wip-overview`、`/wip-detail`、`/hold-detail`）：
+  - 三頁共 1,941 行 vanilla JS + Jinja2 模板重寫為 Vue 3 SFC 元件架構
+  - 抽取 `wip-shared/` 共用模組：CSS 基底（`:root` 變數、gradient header、responsive）、常數（`NON_QUALITY_HOLD_REASONS` 11 值）、Pagination/FilterBar 元件
+  - Overview：Pareto 圖改用 vue-echarts（`<VChart autoresize>`），與 QC-GATE 一致
+  - Hold Detail：Jinja2 模板注入（`reason`、`hold_type`）改為前端 URL params + 常數判斷
+  - Hold Detail：新增 10 分鐘自動刷新 + `visibilitychange` 即時刷新 + AbortController
+  - 三頁 Vite entry 從 `main.js` 改為 `index.html`，Flask route 改為 `send_from_directory`
+  - 移除三份 Jinja2 模板（`wip_overview.html`、`wip_detail.html`、`hold_detail.html`）
 - 完成數據表查詢頁面（`/tables`）Vue 3 遷移：
   - 237 行 vanilla JS + Jinja2 模板重寫為 Vue 3 SFC 元件（App.vue、TableCatalog.vue、DataViewer.vue）
   - Vite entry 從 `main.js` 改為 `index.html`，Flask route 改為 `send_from_directory`
@@ -839,5 +861,5 @@ conda run -n mes-dashboard python scripts/run_cache_benchmarks.py --enforce
 
 ---
 
-**文檔版本**: 5.1
+**文檔版本**: 5.2
 **最後更新**: 2026-02-09