# Appendix A — 逐頁深度盤點
**Companion to:** `claude_design_brief.md`
**Version:** 1.0 (2026-05-01)
**Scope:** 41 個 HTML template + 3 個共用 component，每頁的版面結構、元件、互動、設計問題與改造重點。

---

## 0. 重要更新：發現第四種設計風格

原 brief 提到「兩套設計系統」，深掃後發現實際是 **四種視覺風格混雜**：

| 風格 | 背景 | Accent | 代表頁面 |
|------|------|--------|---------|
| **A. 深藍 + 藍紫漸層**（舊） | `#f5f7fa` | `#1e3c72→#2a5298` + `#667eea→#764ba2` | `base.html`、`dashboard.html`、`sales_analysis.html` |
| **B. 焦糖橘暖系**（目標） | `#ebe6dc` | `#c96442` | `ewoooc_base.html`、`vendor_stockout_index_v2.html` |
| **C. 紫色獨立頁** | `#667eea→#764ba2` 漸層 | `#4F46E5` | `login.html`、`403.html`、`maintenance.html`、`_loading.html` |
| **D. GitHub Dark Terminal** | `#0d1117` | `#3fb950`/`#58a6ff`/`#bc8cff` | `ai_automation_smoke.html`、`code_review.html` |

**改造原則**：
- 風格 A 全部遷移至風格 B（焦糖橘）
- 風格 C 統一品牌入口頁，可保留漸層但改用焦糖橘色相
- 風格 D（開發者工具頁）可保留深色主題，但需與焦糖橘做點綴對齊

---

## 1. 主儀表板與分析報表（風格 A，全部待遷移）

### 1.1 dashboard.html — 商品看板（首頁）
- **路徑**：`templates/dashboard.html`（1405 行）
- **路由**：`/`（系統首頁）
- **Layout**：獨立（自包含 HTML，不 extends）
- **用途**：MOMO 價格監控主控台，KPI + 商品清單 + 歷史圖表
- **區塊（從上到下）**：
  1. Navbar（include `_navbar.html`）
  2. KPI Cards（2 大卡：商品監控概況 + 今日價格動態）
  3. 動態 KPI Grid（9 小卡：漲/降/下架數、平均幅度、活躍度、最活躍分類、最大變動）
  4. 控制列（搜尋 + 分類篩選 + 狀態篩選 button group + 更新/通知按鈕）
  5. 商品列表 Table（可排序，含商品圖、名稱、品號、價格、漲跌幅、上架時間）
  6. Pagination
  7. Modal: 歷史價格圖表（Chart.js line + 雙軸）
  8. Modal: 價格變動明細（xl，動態 fetch + table）
- **元件**：Bootstrap Card/Table/Modal/Dropdown/Badge/Button Group + Chart.js 3.9.1
- **互動**：
  - `/api/history/{productId}` 取歷史價格
  - `/api/price_change_details?type=...` 取分類/變動明細
  - `/api/run_task` 手動爬蟲、`/api/trigger_momo_notification` 發送通知
  - 行點擊 → 開歷史圖 Modal
  - KPI 卡點擊 → 開明細 Modal
  - 品號點擊 → Clipboard API 複製
- **配色現況**：⚠️ 風格 A，主色 `#667eea/#764ba2`（藍紫）+ Navbar `#1e3c72/#2a5298`
- **設計問題**：
  - 內嵌 `<style>` 636 行，多處 inline `padding-top: 70px`
  - 無空狀態插圖（搜尋無結果只有純文字）
  - Modal 無 skeleton loading，直接顯示 spinner
  - 表行 hover 用 `transform: scale(1.002)` 易觸發重排
  - 大圓角（卡片 16~20px、KPI 卡 20px）與新版方角不符
- **Claude Design 改造重點**：
  1. 抽出全部 inline style，套用 `--momo-*` token，棄藍紫改焦糖橘
  2. KPI Grid 改 CSS Grid 自適應（mobile 2x4、desktop 3x3），數字字體換 JetBrains Mono
  3. Modal Header 改暖墨色 `--momo-ink`，棄藍紫漸層
  4. 商品列表加空狀態插圖 + 引導文字
  5. 圓角全改 `--momo-radius-md` (4px) 或 `--momo-radius-lg` (6px)

### 1.2 sales_analysis.html — 業績分析（系統最大頁面）
- **路徑**：`templates/sales_analysis.html`（3165 行）
- **路由**：`/sales_analysis`
- **Layout**：獨立
- **用途**：多維度業績分析（廠商 Top 10、分類餅、價格帶 TreeMap、散點、BCG 矩陣、淡旺季熱力、行銷活動）
- **區塊**：
  1. Navbar
  2. 進階篩選器（日期、地區、廠商、借採轉、類別）— 自訂 dropdown 樣式
  3. Loading Overlay（複雜雲端漂浮 + 旋轉光環動畫）
  4. 多圖表區（橫條/餅/TreeMap/散點/BCG/熱力/星期/小時）
  5. 行銷活動折扣 + 折價券圖
  6. DataTable（AJAX 載入）
- **元件**：Chart.js 3.9.1 + ECharts 5.4.3 + chartjs-chart-treemap 2.0.2 + DataTables 1.11.5 + Flatpickr 4.6.13
- **互動**：篩選聯動 fetch → 多圖表並行更新；無 URL state 保留
- **配色**：⚠️ 風格 A，篩選列 `#667eea→#764ba2`，圖表用 `#4F46E5`
- **設計問題**：
  - `<style>` 569 行，含複雜 Loading Overlay 動畫
  - **三種圖表庫並存**（Chart.js / ECharts / Treemap plugin），維護成本高
  - 篩選器無 URL query state（刷新遺失）
  - 熱力圖色階對紅綠色盲不友善
  - 無虛擬滾動，廠商超過 100 筆會卡
- **Claude Design 改造重點**：
  1. 統一改 Chart.js（棄 ECharts），複雜圖（Heatmap/Sankey）改 D3 或 Plotly
  2. Loading Overlay 改輕量 Skeleton Screen（移除雲端漂浮動畫）
  3. 篩選列改標準 form-select + URL query state，可分享網址
  4. DataTable 改虛擬滾動
  5. 圖表色板改焦糖橘為主，狀態色用 `#2a7a3f`（漲）/ `#b5342f`（跌），補色盲友善色階

### 1.3 monthly_summary_analysis.html — 月份總表分析
- **路徑**：`templates/monthly_summary_analysis.html`（1473 行）
- **路由**：`/monthly_summary_analysis`
- **Layout**：獨立
- **用途**：月度 KPI + 廠商排行 + YoY 對比 + 品牌分類分析
- **區塊**：頁標 → 篩選列 → 商業洞察 Top 3 → YoY 對比 → Top 50 廠商 → 類別分佈 → 價格帶 → 月份摘要 DataTable
- **元件**：ECharts（多種類）+ DataTables + Bootstrap Card/Form Select
- **配色**：⚠️ 風格 A，洞察卡用 `bg-primary/success/warning`
- **設計問題**：
  - Highlights 卡 `display:none` 時佔位影響佈局（應用 collapse）
  - Top 50 廠商圖固定高 900px，手機爆表
  - 「特定/身體保養/彩妝」分類圖只有容器無實作
  - ECharts 全局初始化無錯誤處理
- **Claude Design 改造重點**：
  1. Highlights 改 Bootstrap Offcanvas 或 collapse 避免 layout shift
  2. 廠商排行加分頁或虛擬滾動
  3. 分類分析改 Tab 元件
  4. ECharts 統一替換 Chart.js
  5. 響應式高度：Desktop 900px → Tablet 600px → Mobile 350px

### 1.4 daily_sales.html — 當日業績
- **路徑**：`templates/daily_sales.html`（1905 行）
- **路由**：`/daily_sales`
- **Layout**：獨立
- **用途**：單日業績看板，日曆 + 6 KPI + 30 天趨勢 + DoD/WoW + Top 10 + 行銷活動
- **區塊**：
  1. Navbar
  2. 漸層 page-header + 日期 select
  3. **Calendar Container**（自訂月曆，每日 KPI、DoD badge、選中 pulseGlow 動畫）
  4. KPI 卡組（6 張：營收/成本/毛利/SKU/客單/銷量）
  5. 圖表區（30 天趨勢雙軸 + DoD/WoW 折線 + Top 10 橫條）
  6. 行銷活動貢獻（折扣/折價券並列）
  7. 分類業績明細 DataTable
- **元件**：自訂 CSS Calendar + Chart.js（雙軸、響應式容器）+ DataTables
- **配色**：⚠️ 風格 A，page header 藍紫漸層
- **設計問題**：
  - 月曆 CSS 878 行，響應式斷點 5 層
  - 圖表 `min-width: 400/450/500px` 手機需橫滾
  - 月度/單日 KPI 共用同卡片邏輯混亂
  - 行銷活動圖條件編譯佈局不穩定
- **Claude Design 改造重點**：
  1. 月曆改 `fullcalendar.io` 庫，減少自訂 CSS
  2. 圖表容器改 `aspect-ratio: 16/9`，棄 `min-width`
  3. 月度/單日 KPI 用 `{% if is_month_view %}` 分離為兩組
  4. 行銷活動先 render skeleton，無資料時隱藏
  5. 分類表加搜尋 + 排序 UI

### 1.5 growth_analysis.html — 成長分析
- **路徑**：`templates/growth_analysis.html`（250 行）
- **路由**：`/growth_analysis`
- **Layout**：獨立
- **用途**：YTD 累計 + 月營收 + AOV + 訂單 + 月增率 + 毛利率
- **區塊**：頁標 → 3 KPI 卡 → 4 圖表（混合柱+線、雙軸、條件背景）
- **元件**：純 Chart.js
- **配色**：⚠️ Bootstrap 原色（bg-primary/success/info），Chart 用 `#36a2eb/#2ecc71`
- **設計問題**：
  - `<style>` 僅 25 行，缺現代設計語言
  - 圖表高度固定 350px / 300px
  - 無 YoY 對比視覺化
  - Chart 初始化無 try-catch
- **Claude Design 改造重點**：
  1. 套 design token 統一色板
  2. KPI 卡支援 Current vs LY 對比
  3. 圖表用 CSS Grid 2x2 響應式
  4. 加空狀態 illustration
  5. 加 try-catch fallback

### 1.6 price_comparison.html — PChome vs MOMO 比價
- **路徑**：`templates/price_comparison.html`（598 行）
- **路由**：`/price_comparison`
- **Layout**：base.html (extends)
- **用途**：兩平台商品爬取 + 上傳 Excel + 手動輸入 → 相似度匹配 → 價差分析
- **區塊**：標題 → 三步驟操作區 → 比價按鈕 → 進度顯示 → 結果統計卡（4 張）→ 結果表（7 欄）→ 匯出 → 上傳/手動 Modal
- **元件**：Bootstrap Card/Form/Modal/Alert/Table/Badge
- **互動**：爬取 PChome → 上傳 Excel → quick_compare → 前端 CSV 匯出
- **配色**：Bootstrap 原色 btn-primary/info/warning/success
- **設計問題**：
  - 相似度閾值 0.8/0.6 硬編碼無 UI 控制
  - 結果表欄寬 35% 商品名 truncate 不易對比
  - 比較結果無記憶（重新比價會遺失舊結果）
  - 手動輸入 textarea placeholder 過長
- **Claude Design 改造重點**：
  1. 三步驟改 Wizard/Stepper UI
  2. 相似度閾值改 Slider 可調
  3. 結果表改可展開行（Collapse），顯示完整描述
  4. 結果存 localStorage 支援 undo/redo
  5. 手動輸入改 drag-drop + 表格編輯模式

### 1.7 abc_analysis_detail.html — ABC 分類詳情
- **路徑**：`templates/abc_analysis_detail.html`（196 行）
- **路由**：`/api/abc_analysis_detail`（彈窗/新視窗）
- **Layout**：獨立
- **用途**：A/B/C 類別深潛 + 補貨係數調整 + 匯出 Excel
- **區塊**：Navbar → 工具列（補貨係數 input + 匯出 + 關閉）→ DataTable（11 欄含條件欄）
- **元件**：DataTables + Input Group
- **配色**：Navbar `#4F46E5→#6366F1`
- **設計問題**：
  - `window.close()` 被現代瀏覽器擋
  - 補貨係數 input 無驗證
  - 累積營收佔比純數字無視覺化
  - 無空狀態
- **Claude Design 改造重點**：
  1. 關閉按鈕改 `history.back()`
  2. 補貨係數改 Slider (0.5-2.0, step 0.1) + 即時預覽
  3. 累積營收改迷你進度條
  4. 加空狀態
  5. 匯出按鈕改 sticky header

### 1.8 trends.html — 趨勢資料看板
- **路徑**：`templates/trends.html`（136 行）
- **路由**：`/trends`
- **Layout**：base.html (extends)
- **用途**：Google News / PTT / Dcard / YouTube 關鍵字+新聞標題彙整
- **區塊**：頁標 → 篩選列（來源/分類/天數/刷新）→ 雙欄（熱門關鍵字 + 趨勢記錄表）
- **元件**：Bootstrap Card/Form Select/Badge/Table
- **設計問題**：
  - 篩選項無視覺反饋
  - 趨勢表 50 筆固定 limit 無分頁
  - 標題無連結
  - 無 skeleton loading
- **Claude Design 改造重點**：
  1. 篩選列改 Sticky Bar，篩選項加 Badge 計數
  2. 熱門關鍵字改水平滾動（mobile 友善）
  3. 趨勢記錄改 Infinite Scroll
  4. 標題加連結 `target="_blank"`
  5. 加 Skeleton Screen

---

## 2. EDM 活動與廠商缺貨（新舊版本並存）

### 2.1 edm_dashboard.html — EDM 活動看板（舊版）
- **路徑**：`templates/edm_dashboard.html`（431 行）
- **路由**：`/edm/dashboard`
- **Layout**：獨立 + Navbar
- **用途**：EDM 限時搶購監控，分時段商品異動
- **區塊**：Navbar → Page Header（含動態頁籤導覽）→ 排程統計警告 → 時段 Pills → Tab Content 商品表 → 無 Modal
- **元件**：Bootstrap Tab/Pills/Tooltip + 自訂 CSS
- **配色**：⚠️ 風格 A，Navbar `#4F46E5→#6366F1`
- **設計問題**：
  - 內嵌 style 200+ 行
  - 表格寬度固定未響應
  - JS 散落 inline，未模組化
- **Claude Design 改造重點**：
  1. 抽出 style 至外部 CSS
  2. 複製品號改 Toast 提示
  3. 表格 sticky header + 響應式列寬
  4. 動態頁籤改 data-* 驅動
  5. JS 模組化

### 2.2 edm_dashboard_v2.html — EDM 活動看板（新版）⭐
- **路徑**：`templates/edm_dashboard_v2.html`（1130 行）
- **路由**：`/edm/dashboard_v2`
- **Layout**：**ewoooc_base.html**（風格 B 範例頁）
- **用途**：採用 EwoooC 設計系統的 EDM 看板，按月查歷史價
- **區塊**：Campaign Hero（漸層）→ KPI Panel → 時段 Tab → Campaign Table（含篩選）→ 歷史 Modal（Chart.js）
- **元件**：Bootstrap + Chart.js + EwoooC CSS 變數系統
- **配色**：✅ 風格 B：Hero 用 EDM 紅 `#dc2626→#ea580c→#f97316`、Festival 紫 `#7c3aed`、Ink `#372b27`
- **設計問題**：
  - CSS 600+ 行依賴 var() 但無 fallback
  - Chart.js 初始化在 Modal show 後可能 race condition
  - 篩選按鈕用 `is-hidden` class 管理複雜
- **Claude Design 改造重點**：
  1. Chart.js 抽為獨立 module，支援銷毀/重建
  2. 篩選改 data-filter 驅動取代 is-hidden
  3. CSS 變數加 fallback color
  4. Modal maxHeight 動態調整
  5. 圖表加重試機制

### 2.3 vendor_stockout_index_v2.html — 廠商缺貨首頁（風格 B 樣板）⭐
- **路徑**：`templates/vendor_stockout_index_v2.html`（497 行）
- **路由**：`/vendor-stockout`
- **Layout**：**ewoooc_base.html**
- **用途**：缺貨系統首頁，KPI + 工作流程入口
- **區塊**：Hero Panel（標題+操作按鈕）→ Pulse Box（最新批次）→ KPI Grid（4 卡）→ Flow Cards（5 入口）→ Summary Grid（3 摘要）
- **元件**：純 EwoooC CSS
- **配色**：✅ 風格 B：Eyebrow `accent-strong`、Pulse Box `--momo-ink` 深底白字、KPI Danger `--momo-danger`
- **設計問題**：
  - Flow Cards hover 陰影不明顯
  - Summary Grid 三列在 720~980px 擠壓
- **Claude Design 改造重點**：
  1. Flow Cards 加陰影漸變 hover
  2. 補 768~980px 中斷點 2 列
  3. 數字加計數動畫（Intersection Observer）
  4. Summary Grid 數字+文字垂直對齊優化

### 2.4 vendor_stockout_import_v2.html — 缺貨批次匯入
- **路徑**：`templates/vendor_stockout_import_v2.html`（574 行）
- **路由**：`/vendor-stockout/import`
- **Layout**：**ewoooc_base.html**
- **用途**：Excel 拖曳上傳 + 進度提示
- **區塊**：Header → Import Note → Dropzone → Sidebar（必要欄位+範本下載）→ File Panel → Progress Panel（脈衝動畫）→ Result/Error Panel
- **配色**：✅ Dropzone 邊框 `--momo-accent`、Progress Bar `--momo-accent`、Side Panel `--momo-bg-paper`
- **設計問題**：
  - `stockout-pulse` 只改 opacity 視覺弱
  - 上傳中無法取消
  - Error Panel 無嚴重程度區分
- **Claude Design 改造重點**：
  1. 脈衝改 scale + 顏色漸變
  2. 加 AbortController 中止按鈕
  3. Result Panel 各卡片加邊框顏色
  4. 加檔案大小驗證提示

### 2.5 templates/index.html — 限時搶購首頁（舊）
- **路徑**：`templates/index.html`（431 行）
- **路由**：`/`（舊路由，與 dashboard 重疊）
- **Layout**：獨立 + Navbar
- **用途**：EDM 限時搶購活動首頁
- **區塊**：Navbar → Page Title → 排程警告 → Pills 標籤 → Tab Pane 商品表
- **配色**：⚠️ 風格 A
- **設計問題**：與 edm_dashboard.html 高度重疊；複雜 Jinja 邏輯難維護
- **Claude Design 改造重點**：考慮直接刪除，導向 edm_dashboard_v2

### 2.6 web/templates/vendor_stockout/index.html — 缺貨系統首頁（簡化）
- **路徑**：`web/templates/vendor_stockout/index.html`（319 行）
- **路由**：`/vendor-stockout`
- **Layout**：獨立 + Navbar
- **用途**：3 張功能卡片導覽（缺貨清單/廠商管理/發送歷史）
- **配色**：Card border-top `#2ecc71`/`#f39c12`，按鈕 hover scale
- **設計問題**：
  - 與 `vendor_stockout_index_v2.html` 競爭，缺 Excel 匯入卡
  - 紅綠色與深藍 Navbar 衝突
- **Claude Design 改造重點**：
  1. 加 Excel 匯入卡片
  2. 統一卡片配色為 `--momo-accent`
  3. 加卡片 transition
  4. 加快速開始流程視覺化
  5. **建議與 v2 版本擇一保留**

### 2.7 web/templates/vendor_stockout/list.html — 缺貨清單管理（巨型）
- **路徑**：`web/templates/vendor_stockout/list.html`（1793 行）
- **路由**：`/vendor-stockout/list`
- **Layout**：獨立 + Navbar
- **用途**：缺貨 CRUD + 批次郵件 + 狀態切換 + Excel 匯入（內嵌 Tab）
- **區塊**：
  1. Page Header
  2. Workflow Guide（紫色容器，3 步流程）
  3. Main Tabs（缺貨清單 / Excel 匯入）
  4. 缺貨清單 Tab：4 KPI → 待發送/已發送 子 Tab → 篩選（批次/廠商/排序）→ 批次操作 → 12 欄表 → 分頁
  5. Excel 匯入 Tab
  6. Modals: 編輯 / 郵件模板（含預覽）/ 重送確認
- **元件**：Bootstrap + 自訂 CSS（382 行）
- **配色**：Tabs 綠色漸層 `#27ae60→#2ecc71`、Workflow Guide 紫 `#667eea→#764ba2`
- **設計問題**：
  - **超大 inline JS（1600+ 行）**，難維護
  - 表格 12 欄平板溢出
  - 批次操作分散兩處易混淆
  - 郵件模板預覽用 `innerHTML` 有 XSS 風險
  - 全局 state（`selectedIds` Set + `currentStatus` string）未模組化
- **Claude Design 改造重點**：
  1. **JS 模組化**：分 API/state/render layer，class 或 module pattern
  2. **表格響應化**：mobile < 768px 改卡片視圖
  3. **批次操作合併**：context-aware UI 取代分散按鈕
  4. **XSS 防護**：DOMPurify 或 textContent
  5. **流程圖**：CSS Grid 自適應或 mobile 改垂直時間軸

### 2.8 web/templates/vendor_stockout/history.html — 發送歷史（佔位）
- **路徑**：`web/templates/vendor_stockout/history.html`（128 行）
- **狀態**：⚠️ **完全未實作**，僅有 Phase 6 提示 alert
- **Claude Design 改造重點**：
  1. 實作發送歷史表（郵件/狀態/時間/廠商）
  2. 加統計卡（總發送/成功率/失敗）
  3. 篩選（狀態/廠商/日期）
  4. 失敗重試 UI

### 2.9 web/templates/vendor_stockout/import.html — 獨立匯入頁
- **路徑**：`web/templates/vendor_stockout/import.html`（397 行）
- **與 list.html 內 Tab 功能重複**
- **配色**：Dropzone `#3498db`（藍）— 與 vendor_management 紫色 `#9b59b6` 不一致
- **Claude Design 改造重點**：
  1. 統一 Dropzone 為 `--momo-accent` 焦糖橘
  2. 考慮刪除此獨立頁（與 list.html Tab 重複）
  3. 加上傳百分比
  4. 加返回清單快速連結

### 2.10 web/templates/vendor_stockout/send_email.html — 郵件發送記錄
- **路徑**：`web/templates/vendor_stockout/send_email.html`（431 行）
- **路由**：`/vendor-stockout/send-email`
- **Layout**：獨立 + Navbar
- **用途**：郵件發送記錄查看與統計
- **區塊**：Page Header → 4 KPI（總/成功/失敗/成功率，30s 自動更新）→ 篩選（狀態/廠商/日期）→ 8 欄表 → 分頁
- **配色**：Stats `#3498db/#28a745/#dc3545/#17a2b8`
- **設計問題**：
  - 數字更新無 transition 突兀
  - subject 列無 truncate
  - 錯誤訊息塞表格內混亂
  - 無重試按鈕
- **Claude Design 改造重點**：
  1. 數字加 fade + 滾動動畫
  2. subject 加 ellipsis + tooltip
  3. 錯誤改 tooltip 或詳情 Modal
  4. 加重試失敗批次操作
  5. 30s 輪詢改事件驅動或 SSE

### 2.11 web/templates/vendor_stockout/vendor_management.html — 廠商管理
- **路徑**：`web/templates/vendor_stockout/vendor_management.html`（956 行）
- **路由**：`/vendor-stockout/vendor-management`
- **Layout**：獨立 + Navbar
- **用途**：廠商 CRUD + 郵件管理 + Excel 匯入
- **區塊**：Header → Tabs（廠商清單 / Excel 匯入）→ 廠商 Tab（3 KPI + 搜尋 + 5 欄表 + 分頁）→ Modals（新增/編輯廠商、管理郵件）
- **配色**：Tab 紫漸層 `#9b59b6→#8e44ad`、Upload 邊框 `#9b59b6`
- **設計問題**：
  - Stats Cards 單調無色彩層次
  - Dropzone 配色與 import.html 不一致（紫 vs 藍）
  - 郵件管理只在 Modal 內無 inline 列表
- **Claude Design 改造重點**：
  1. Stats Cards 加邊框色（primary/purple/success）
  2. 統一 Dropzone 為 `--momo-accent`
  3. 郵件管理改 inline 表或側邊欄
  4. 搜尋改即時篩選

---

## 3. AI 功能頁（風格 A + D 混雜）

### 3.1 ai_recommend.html — AI 文案生成（最複雜 AI 頁）
- **路徑**：`templates/ai_recommend.html`（1000+ 行）
- **路由**：`/ai_recommend`
- **Layout**：base.html (extends)
- **用途**：多引擎（Ollama 本地 + Gemini 雲端）AI 文案生成 + Web 搜尋 + 市場洞察
- **區塊**：
  1. Page Header（含 AI 引擎狀態徽章）
  2. **左欄**：文案生成表單（商品名/風格/引擎/模型/進階 accordion）
  3. Gemini 使用量面板（費用/請求/Token）
  4. 關鍵字 + 節日可收合區
  5. AI 智慧搜尋區（Web 搜尋 + 快速標籤）
  6. 商品洞察分析區
  7. **右欄**：4 頁籤面板（趨勢洞察/熱銷商品/排行榜/趨勢新聞）
  8. 全螢幕載入動畫 overlay
  9. 使用說明 Modal
- **元件**：Bootstrap Card/Accordion/Tabs/Modal + 自訂 spinner
- **互動**：
  - `/api/ai/generate_copy` 文案生成
  - `/api/ai/web_search` Web 搜尋
  - `/api/ai/bestsellers` 熱銷
  - COSME 排行榜、mybest 推薦
  - `/api/ai/gemini_usage` 用量查詢
  - 即時 Ollama ↔ Gemini 切換
- **配色**：⚠️ Bootstrap primary `#0d6efd`
- **設計問題**：
  - 文案生成 Web Search 30~60s 無進度
  - 模型切換無狀態保留
  - 結果格式化用 `【大標題】` 自訂無視覺化
  - 無錯誤恢復重試
- **Claude Design 改造重點（AI UX 重點）**：
  1. **流式輸出（Streaming）**：即時展示 AI 思考過程
  2. **拆解分析頁籤**：除文案外顯示「為何選這些」
  3. **A/B 對比 + 一鍵重生**：歷史小卡側邊欄
  4. **AI Sidebar**：浮動面板「為何有效/何時用/改進空間」
  5. **模型性能對比**：Ollama 生成時並列 Gemini 估算（不調用）

### 3.2 ai_history.html — AI 歷史記錄
- **路徑**：`templates/ai_history.html`（723 行）
- **路由**：`/ai_history`
- **Layout**：base.html (extends)
- **用途**：AI 文案歷史檢索/編輯/評分/批量操作
- **區塊**：Page Header → 4 KPI（總生成/收藏/已用/平均時間）→ 篩選列（搜尋/類型/收藏/日期）→ 批次操作列 → 歷史卡片列表（複選+類型徽章+預覽+操作）→ 分頁 → 編輯 Modal（評分星星/收藏/已用/備註）→ Toast
- **元件**：Bootstrap Card/Form/Modal/Toast/自訂 Rating Stars
- **設計問題**：
  - 無 skeleton loading
  - 文案預覽限高 120px 用漸層遮罩，不利查看
  - 評分星星 hover 預選離開復原 UX 不明確
  - 編輯後需刷新才同步統計
- **Claude Design 改造重點**：
  1. 加時間軸視圖（月/週分組熱度）
  2. 智慧分類（高轉化/實驗性/模板）自動標籤
  3. 對比檢視（兩筆 diff）
  4. 「基於此重新生成」直接跳轉預填
  5. 「已使用」改「轉化事件」整合銷售反饋

### 3.3 ai_intelligence.html — AI 競情中樞 (ICAIM)
- **路徑**：`templates/ai_intelligence.html`（465 行）
- **路由**：`/ai_intelligence`
- **Layout**：base.html (extends)
- **用途**：即時競品價格監控 + AI 決策 + 挑品清單
- **區塊**：Page Header（4 操作：立即分析/產生挑品/補抓 PChome/重整）→ 上次更新 badge → 4 KPI → 雙欄（左 70% PChome 比價熱力表 / 右 30% AI 決策日誌）→ Trigger Toast
- **元件**：Bootstrap + sticky header table + Progress Bar
- **配色**：熱力圖 `#fee2e2/#fef9c3/#f0fdf4`、策略 Badge 多色
- **互動**：60s 自動重整、`/api/ai/icaim/dashboard`、`/api/ai/icaim/trigger`、產生挑品、補抓、商品搜尋
- **設計問題**：
  - 表格 7 欄寬度固定橫向溢出
  - 推理足跡資訊密集小字難讀
  - 無 Diff 對比
- **Claude Design 改造重點**：
  1. WebSocket / SSE 即時推送，加彩色脈衝動畫
  2. AI 決策日誌展開詳情，展示 Hermes→NemoTron 完整鏈路流程圖
  3. 高風險卡片加「限時調價建議」快速面板
  4. 加「競品群聚分析」相似商品價格帶
  5. 每筆決策加「反饋」按鈕用於模型微調

### 3.4 ai_automation_smoke.html — AI 自動化監控（風格 D）⚡
- **路徑**：`templates/ai_automation_smoke.html`（314 行）
- **路由**：`/ai_automation_smoke`
- **Layout**：**獨立**（GitHub Dark 風格）
- **用途**：監控 EventRouter/AutoHeal/NemoTron/OpenClaw/ElephantAlpha 五代理健康
- **區塊**：Hero（深藍漸層、玻璃 pill、整體狀態 badge、4 操作）→ 4 摘要卡（OK/Warning/Critical/生成時間）→ 趨勢卡（200 筆點陣圖）→ 每日摘要表 → Smoke 檢查卡片網格（每代理一卡，含 Detail Box）
- **元件**：純 CSS Grid + Flexbox（**無 Bootstrap**）
- **配色**：✅ 風格 D：bg `#0d1117`、panel `#161b22`、border `#30363d`、text `#e6edf3`、狀態 `#3fb950/#d29922/#f85149/#58a6ff/#bc8cff`
- **互動**：3s/30s 動態輪詢、清歷史、推播、JSONL 匯出
- **設計問題**：
  - Detail Box JSON 格式技術導向不直覺
  - 趨勢點陣圖 200 筆過密
  - Critical 無即時通知（推播僅手動）
  - 無「上次正常時間」/「持續時間」
- **Claude Design 改造重點**：
  1. 故障時間線卡（開始→發現→修復）
  2. AI 生成「今日風險評分」+ 建議行動
  3. Detail Box 加「推薦檢查項目」（OpenClaw 驅動）
  4. 趨勢圖加 7 天平均虛線
  5. Critical 加「自動修復建議」一鍵觸發

### 3.5 notification_templates.html — 通知模板管理
- **路徑**：`templates/notification_templates.html`（339 行）
- **路由**：`/notification_templates`
- **Layout**：base.html (extends)
- **用途**：Telegram + LINE 雙渠道訊息模板 CRUD + 即時預覽
- **區塊**：Page Header（分類篩選+初始化按鈕）→ 7 欄表 → 編輯 Modal（含 monospace textarea + 預覽區）
- **配色**：預覽區深色 `#1a1a1a` 模擬訊息氣泡
- **設計問題**：
  - 樣本變數硬編碼無動態
  - 無傳遞測試
  - 無版本控制/回滾
- **Claude Design 改造重點**：
  1. 變數選擇器（可拖放插入）
  2. 場景下拉預覽（新訂單/退貨/優惠等）
  3. 多語言頁籤（繁/簡/英）
  4. 「傳送測試」實際發送驗證
  5. LINE 訊息過長自動拆分提示

### 3.6 ai_intelligence + send_email + brand_assets + code_review

#### send_email.html（76 行）
- ⚠️ **完全未實作**，Phase 6 占位
- **Claude Design 改造重點**：
  1. 三步驟精靈（分群→模板→預覽→確認）
  2. TinyMCE/Quill 富文本編輯
  3. 樣本預覽各廠商分群效果
  4. 自動生成 CSV/PDF 附件
  5. 寄送追蹤（待寄/已寄/未開/已開）

#### brand_assets.html（197 行）
- **路由**：`/brand_assets`
- **Layout**：獨立（無 Bootstrap）
- **用途**：WOOO TECH Logo 各版本下載
- **配色**：`#f8f9fa` bg、`#4F46E5` link、checkbox 透明度背景
- **Claude Design 改造重點**：
  1. Lightbox 預覽 + 多背景測試
  2. 側欄品牌規範（最小尺寸/安全距離/色彩）
  3. 批量下載 ZIP
  4. 色彩提取器（hover 顯示 HEX）

#### code_review.html（474 行）⚡（風格 D）
- **路徑**：`templates/code_review.html`
- **路由**：`/code-review`
- **Layout**：獨立（GitHub Dark）
- **用途**：AI Code Review 五步代理流程儀表板（Hermes→OpenClaw→Elephant Alpha→NemoTron→AiderHeal）
- **區塊**：Topbar（pulsing live 點）→ 雙欄（左 340px Sidebar：Pipeline 進度+嚴重度分佈+部署資訊+歷史；右 Main：Status Bar + 三 Tab：問題清單/OpenClaw 評估/Elephant Alpha 決策）
- **配色**：✅ 風格 D，嚴重度色 `#f85149/#d29922/#e3b341/#3fb950`、代理色多彩
- **互動**：3s/30s 動態輪詢、歷史切換、Tab 切換
- **設計問題**：詳細資訊小字難讀、表格行無展開詳情、無修復複製
- **Claude Design 改造重點**：
  1. Pipeline 改橫向流程圖卡（步驟+箭頭+耗時）
  2. 問題詳情抽屜（語法高亮+完整說明）
  3. OpenClaw「架構決策樹」可視化
  4. Elephant Alpha 「推理步驟」可展開列表
  5. 一鍵觸發 AiderHeal（流式日誌）

---

## 4. 系統管理頁（風格 A，全部待遷移）

### 4.1 user_management.html — 用戶管理
- **路徑**：`templates/user_management.html`（906 行）
- **路由**：`/admin/users`（推測）
- **Layout**：base.html (extends)
- **用途**：用戶 CRUD + 角色 + 權限 + 密碼重設 + 停用
- **區塊**：Page Header（新增按鈕）→ 控制列（停用帳號開關）→ DataTable 8 欄（帳號/名稱/郵件/角色/狀態/建立/更新/操作）→ Modals：新增編輯 / 重設密碼（含生成器）/ 刪除確認（紅頭）/ 權限編輯（lg + scrollable）
- **設計問題**：
  - 權限編輯 Modal 內容過多需滾動，**權限項無分組**
  - 密碼強度提示位置在 form-text 不顯眼
  - 用戶列表**無搜尋/篩選**
- **Claude Design 改造重點**：
  1. **權限矩陣 2D 表格**（用戶 × 模組），分組標籤
  2. 密碼強度進度條（紅黃綠）+ 即時反饋
  3. 列表加搜尋 + 角色/狀態篩選
  4. 編輯時隱藏密碼欄，獨立「重設密碼」按鈕
  5. 停用 Modal 強化（顯示活躍工作階段）

### 4.2 settings.html — 爬蟲管理中心（巨型）
- **路徑**：`templates/settings.html`（1650 行）
- **路由**：`/admin/settings`
- **Layout**：獨立 + Navbar
- **用途**：爬蟲狀態 + 執行頻率 + 分類 URL CRUD
- **設定群組結構**：
  ```
  ├─ 爬蟲狀態管理
  │  ├─ 統計面板（3 卡：active/paused/total）
  │  └─ 爬蟲卡片列表（動態渲染）
  │     ├─ 標題 + 狀態徽章
  │     ├─ 資訊網格（最後執行/下次執行/頻率）
  │     └─ 控制（Toggle Switch + 修改頻率）
  │
  └─ 爬蟲網址設定
     ├─ 新增分類按鈕
     ├─ 搜尋框（動態顯示）
     ├─ 分類卡片網格
     │  ├─ 名稱 + tag icon
     │  ├─ URL 超連結
     │  └─ 操作（測試/編輯/刪除）
     └─ Modal: Category Modal（新增/編輯）
  ```
- **配色**：紫漸層 `#667eea→#764ba2`、active 綠 `#10b981→#059669`、paused 黃 `#f59e0b→#d97706`
- **設計問題**：
  - 爬蟲卡 padding-top: 70px **與標題重疊**
  - 搜尋框只在有分類時顯示邏輯隱晦
  - 資訊網格無標籤只有 icon + 數值
  - 測試 URL 按鈕無 loading 反饋
- **Claude Design 改造重點**：
  1. 二層 Tab 或可折疊卡片分離爬蟲/分類
  2. 爬蟲卡修正 padding，加標籤（最後執行/下次執行/頻率）
  3. 搜尋框常顯，加分類/狀態篩選
  4. 測試 URL 狀態機（測試中→✓ 成功/✗ 失敗）
  5. 右下 FAB 新增分類

### 4.3 crawler_management.html — 爬蟲管理（簡化版，與 settings 重複）
- **路徑**：`templates/crawler_management.html`（426 行）
- **與 settings.html 功能重疊**
- **Claude Design 改造重點**：
  1. 合併功能至 settings.html，保留為「快速開關」頁
  2. 卡片補資訊（最後執行/下次/狀態）
  3. 運行中加 animated pulse

### 4.4 system_settings.html — 系統備份與匯入
- **路徑**：`templates/system_settings.html`（341 行）
- **路由**：`/admin/system-settings`
- **Layout**：獨立 + Navbar
- **用途**：系統備份 + 月份總表/即時業績/通用 Excel 匯入
- **區塊**：Page Header → 4 區塊（系統維護完整備份 / 月份總表 42 欄匯入 / 即時業績全月匯入 / 通用 Excel 自動建表）
- **配色**：紫漸層
- **設計問題**：
  - 三匯入無優先級區分
  - 進度條只有月份總表有
  - 「自動建表」邏輯不清（會否覆蓋？）
  - 無匯入結果頁
- **Claude Design 改造重點**：
  1. Tab 或折疊卡片分「維護/業績/資料」
  2. 統一 drag-drop + 進度條
  3. 完成後顯示摘要卡（總/成功/失敗/重複）
  4. 每匯入旁加「下載範本」
  5. 覆蓋操作加備份時間提示

### 4.5 logs.html — 系統日誌（最複雜篩選）
- **路徑**：`templates/logs.html`（872 行）
- **路由**：`/admin/logs`
- **Layout**：base.html (extends)
- **用途**：實時日誌檢視 + 篩選 + 搜尋 + 下載
- **區塊**：Page Header（連接狀態指示）→ 4 KPI（total/error/warning/info）→ 控制面板（主操作 + 等級按鈕篩選 + 搜尋 + 字體大小 + 自動滾動）→ 黑色終端日誌容器
- **日誌等級篩選**：按鈕式（ALL/ERROR/WARNING/INFO）active 時彩色漸層
- **日誌行視覺化**：
  - ERROR 行紅底 `rgba(239,68,68,0.15)` + 紅左邊框 `#ef4444`
  - WARNING 行黃底 + 黃左邊框 `#f59e0b`
  - INFO 行藍左邊框 `#3b82f6`
  - 時間戳綠 `#10b981` 粗體
  - 關鍵字高亮黃 `rgba(251,191,36,0.4)`
- **配色**：紫漸層按鈕、終端 bg `#1e1e1e`、文字 `#d4d4d4`
- **設計問題**：
  - 統計卡與篩選按鈕重複等級資訊
  - 搜尋框與篩選按鈕混排小屏折行
  - 自動滾動開關位置隱晦
  - 容器固定 65vh 大屏浪費空間
  - 清除日誌無確認
- **Claude Design 改造重點**：
  1. 篩選器改單行「等級標籤」複選 + 視覺優先級
  2. 搜尋加正則切換 + 上/下匹配 + 計數
  3. 日誌統計改右下浮窗
  4. 容器改 CSS Grid 自適應高度
  5. 匯出加 CSV/JSON/全選

### 4.6 login_history.html — 登入歷史
- **路徑**：`templates/login_history.html`（90 行）
- **路由**：`/admin/login-history`
- **Layout**：base.html (extends)
- **用途**：登入記錄與異常追蹤
- **區塊**：Page Header → Card（最近記錄 + 50/100/200 筆下拉）→ 6 欄表（時間/帳號/狀態/IP/原因/UA）
- **設計問題**：
  - User Agent 過長無 truncate（max-width 失效）
  - 無日期範圍篩選
  - 無 IP 地理位置
  - UA 對普通用戶無意義
- **Claude Design 改造重點**：
  1. IP 旁加地理定位（城市/國家）
  2. 加日期範圍
  3. UA 解析為「Windows PC/iPhone」等
  4. failed 行紅色弱化背景
  5. 加匯出 CSV

### 4.7 change_password.html — 變更密碼
- **路徑**：`templates/change_password.html`（219 行）
- **路由**：`/user/change-password`
- **Layout**：base.html (extends)
- **用途**：當前用戶密碼修改
- **區塊**：Centered Card → 表單（舊密/新密+強度+相符提示/確認）→ Alert Info 密碼要求 → 按鈕（變更/取消）
- **互動**：強度檢測（長度+大小寫+數字+特殊）、相符檢測、AJAX 提交
- **Claude Design 改造重點**：
  1. 強度視覺化升級（進度條+彩色徽章+反饋文字）
  2. 規則實時逐項檢查（✓/✗）
  3. 舊密 AJAX 即時驗證
  4. 規則改可折疊減高度

### 4.8 pchome_crawler.html — PChome 爬蟲工具
- **路徑**：`templates/pchome_crawler.html`（444 行）
- **路由**：`/crawler/pchome`
- **Layout**：base.html (extends)
- **用途**：館別/關鍵字/自訂 URL 三模式爬取
- **區塊**：Page Header → 3 並排卡（館別/搜尋/自訂 URL）→ 爬取進度 → 結果區（DataTable + 匯出 Excel/JSON）
- **配色**：Card Header bg-primary/success/info
- **設計問題**：
  - 三方式無優先級
  - 進度文字無百分比
  - 圖片欄 80px 太小
  - 結果無分頁
  - 匯出無 loading
- **Claude Design 改造重點**：
  1. 三層 Step 流程（選方式→設參數→看結果）
  2. 進度顯示「45/100 筆」
  3. 圖片 modal 放大、商品名 popover
  4. 加全選+批量操作
  5. DataTable 分頁+排序

### 4.9 import.html — 通用匯入頁
- **路徑**：`templates/import.html`（353 行）
- **路由**：`/import`（推測）
- **Layout**：獨立 + Navbar
- **用途**：Excel 拖曳上傳缺貨資料
- **區塊**：Page Title → Upload Area（drag-drop）→ File Info → Progress Bar → Result Area（4 欄統計 + 批次編號 + 連結按鈕）→ Error Area
- **配色**：邊框藍 `#3498db`、drag-over 綠 `#d5f4e6`、進度紫漸層
- **設計問題**：
  - hover scale 1.02 影響體驗
  - 結果統計無標籤色彩弱
  - 無檔案校驗提示
  - 再次匯入未清空舊結果
- **Claude Design 改造重點**：
  1. 移除 scale，改邊框色變化
  2. 統計卡加彩色徽章 + 圖標
  3. 上傳前校驗格式/大小
  4. 失敗項可展開列表
  5. 多步驟進度（解析/驗證/寫入）

### 4.10 auto_import_index.html — 自動匯入監控
- **路徑**：`templates/auto_import_index.html`（737 行）
- **路由**：`/auto-import`
- **Layout**：獨立 + Navbar
- **用途**：當日業績報表匯入監控
- **區塊**：Page Header → Card（日期+檔案+上傳）→ 匯入清單表（狀態 5 種：pending/downloading/importing/completed/failed）
- **設計問題**：
  - 兩處可上傳易混淆
  - 狀態徽章 rgba 太淡
  - 進度條無百分比
  - 無結果摘要
  - 刪除無確認
- **Claude Design 改造重點**：
  1. 上方只保留「選檔+上傳」，下方歷史清單
  2. 狀態徽章加圖標+動畫（spinning）
  3. 點擊行展開詳細進度
  4. 完成後顯示「成功 1000/失敗 5」摘要卡
  5. 加日期範圍篩選

---

## 5. 入口頁與錯誤頁（風格 C）

### 5.1 login.html
- **路徑**：`templates/login.html`（242 行）
- **路由**：`/login`
- **Layout**：獨立
- **用途**：品牌登入頁，密碼單一認證
- **結構**：固定 Navbar → 全頁紫漸層背景 → 居中卡片（深藍 Header + 白 Body 含 password input + eye toggle + 登入按鈕 + 安全徽章 + 版本號）
- **配色**：背景紫漸層 `#667eea→#764ba2`、Header 深藍 `#1e3c72→#2a5298`
- **設計問題**：
  - 配色與主系統不一致
  - 響應式不足（max-width 420px）
  - 密碼 toggle 無 ARIA
- **Claude Design 改造重點**：
  1. 改用主色焦糖橘
  2. 密碼 toggle 加 `aria-label/aria-pressed`
  3. 768px 以下 padding/font 微調
  4. 字體加 Noto Sans TC
  5. 加密碼強度或失敗次數提醒

### 5.2 maintenance.html
- **路徑**：`templates/maintenance.html`（240 行）
- **用途**：系統維護狀態頁，台北時間實時更新
- **結構**：深色基層 `#0f172a` + Mesh 漸層 + 2 浮動 Orb + 玻璃態中央卡（Logo + 標題 + 描述 + 狀態徽章脈衝 + 實時時間）
- **配色**：`--primary: #4F46E5`、`--secondary: #7C3AED`、`--accent: #06B6D4`
- **獨特元素**：3 層 radial-gradient mesh、`backdrop-filter: blur(12px)`、Orb 浮動、slideUp 進場
- **設計問題**：
  - `--secondary` 與 `--primary` 都紫色無差異
  - 480px 標題仍 1.8rem 偏大
  - 時間更新無 `aria-live`
- **Claude Design 改造重點**：
  1. CSS 變數差異化（secondary 改 `#8B5CF6`）
  2. 時間加 `aria-live="polite"`
  3. 480px 改 1.5rem 行高 1.6
  4. 加倒數或進度提示
  5. 移動端禁用 Orb

### 5.3 403.html
- **路徑**：`templates/403.html`（87 行）
- **用途**：權限不足錯誤頁
- **結構**：紫漸層 bg + 居中白卡（紅禁止 icon + 403 + 標題 + 說明 + 返回按鈕）
- **配色**：背景紫漸層、icon `#dc3545`
- **Claude Design 改造重點**：
  1. 卡片加 `role="alert"`，icon 加 `aria-hidden`
  2. 加「返回前頁」+「聯繫管理員」
  3. 改用焦糖橘色系
  4. 加淡入動畫
  5. 文案改「請聯繫 admin@xxx」

### 5.4 test_base.html — 測試頁
- **路徑**：`templates/test_base.html`（85 行）
- **用途**：base.html 整合測試頁
- **結構**：頁標 → 2 列（測試項目 list-group / 系統資訊表）→ 操作按鈕
- **問題**：未測 extra_css/extra_js block 或 loading_overlay
- **Claude Design 改造重點**：
  1. 加 extra_css/extra_js 測試
  2. 用 Chart.js demo
  3. Toast 測試 success/error/warning 三種
  4. 文案統一中或英

---

## 6. 共用 Components（核心架構）

### 6.1 components/_navbar.html — 全站固定導航（舊版）
- **路徑**：`templates/components/_navbar.html`（194 行）
- **API（Jinja vars）**：
  - `active_page` (str) — 當前頁面 ID 用於 active 高亮
  - `datetime_now` (str) — 右側時間顯示
  - `metabase_url` (str, optional) — Metabase 外部連結
  - `grist_url` (str, optional) — Grist 外部連結
- **結構**：
  ```
  Navbar.fixed-top.bg-custom-dark
  ├─ Brand: WOOO（sm 以上顯示）
  ├─ Toggler（mobile）
  ├─ navbar-nav.me-auto
  │   ├─ 商品看板 / 活動看板
  │   ├─ 分析報表 dropdown（4+ Metabase/Grist 條件）
  │   ├─ 廠商缺貨
  │   ├─ AI 助手 dropdown（2 項）
  │   ├─ 雲端匯入
  │   └─ 系統管理 dropdown（6 項）
  └─ navbar-text: 時間（fa-clock）
  ```
- **配色**：`.bg-custom-dark` = `--primary-gradient` 深藍 `#1e3c72→#2a5298`
- **設計問題**：
  - 無 ARIA（dropdown/aria-expanded、time aria-live）
  - 外部連結無 `rel="noopener noreferrer"`（安全隱患）
  - 無搜尋功能（相比 ewoooc shell）
  - 無用戶菜單/登出/通知 badge
- **Claude Design 改造重點**：
  1. ARIA 強化（dropdown/time/外部連結）
  2. 加右側用戶菜單（頭像+名+登出）
  3. 加搜尋框（⌘K 快捷鍵）
  4. 479px 以下改 Offcanvas
  5. 時間更新 setInterval 改 RAF

### 6.2 components/_loading.html — WOOO 載入動畫
- **路徑**：`templates/components/_loading.html`（337 行）
- **用途**：全屏品牌載入覆蓋層
- **結構**（Logo 容器 160×160px）：
  - 脈衝光暈（放射漸層圓）
  - 外層光環（順時針旋轉，紫色）
  - 內層光環（逆時針，粉+金）
  - 環繞粒子（4 顆軌道旋轉）
  - 閃爍星星（6 顆金黃延遲錯開）
  - LOGO 文字（紫漸層 + drop-shadow）
  - 載入文字（fa-spinner）
  - 進度條（漸層流動）
  - 提示文字
- **JS API**：
  ```js
  showLoading(text, hint)
  hideLoading()
  updateLoadingText(text)
  updateLoadingHint(hint)
  ```
- **動畫集**（7 個 keyframes）：cloud-float / ring-spin / ring-spin-reverse / pulse-expand / orbit-rotate / sparkle-twinkle / progress-flow
- **設計問題**：
  - 內層光環粉+金與主紫色不配
  - 無 `role="status"`/`aria-live`
  - **8 層同時動畫，移動端會掉幀**
  - z-index 9999 可能蓋過 Modal
- **Claude Design 改造重點**：
  1. 內層光環改 `#8B5CF6/#A78BFA` 保持紫系（或改焦糖橘配色）
  2. 加 `role="status" aria-live="polite" aria-label="正在載入"`
  3. 移動端自動禁 Sparkles
  4. CSS 變數控制動畫速度
  5. 支援 `showLoading(text, hint, speed)` 快速模式

### 6.3 components/_ewoooc_shell.html — EwoooC Sidebar（新版）
- **路徑**：`templates/components/_ewoooc_shell.html`（101 行）
- **API（Jinja vars）**：
  - `active_page` (str)
  - `scheduler_stats` (dict) — `{"momo_task": [{...}, ...]}`
  - `next_run` (str, optional)
  - `session` (dict) — username/role/logged_in
- **結構**：
  ```
  Aside.momo-sidebar
  ├─ Logo: 9 格網點（3×3）+ "EwoooC" + "價格監控 V2"
  ├─ Nav 群組
  │   ├─ 監控: 商品看板(01) / 活動看板(02) / 分析報表(03)
  │   ├─ 營運: 廠商缺貨(04) / AI 助手(05) / 雲端匯入(06)
  │   └─ 系統: 系統管理(07)
  └─ Status Card: 標籤 + 實時點 + 上次執行/掃描/新增
  ```
- **內部 Jinja 邏輯**（極複雜）：14 行變數初始化，多層 default + is mapping 防禦
- **設計問題**：
  - **Jinja 邏輯過重**（應移後端視圖）
  - 鍵名脆弱（`momo_task`/`last_run` 變更即破裂）
  - 無 ARIA（navigation/status）
  - 9 格 logo 用 9 個空 span 無法 SR
- **Claude Design 改造重點**：
  1. **後端預先計算 status**，Jinja 只展示
  2. 加 `role="navigation"` / `role="status"` / `aria-live`
  3. Logo 改 SVG 或 icon font
  4. 編號改 `aria-label="編號 01"`
  5. 狀態改 SSE 即時推送

---

## 7. 額外發現的頁面（之前列表外）

完整 ls 後發現以下檔案需要單獨盤點（建議排在後續迭代）：

| 檔名 | 大小 | 推測用途 |
|------|------|---------|
| `cicd_dashboard.html` | TBD | CI/CD 部署儀表板 |
| `dashboard_v2.html` | 61KB | 商品看板 V2 升級版（待比對與舊版差異）|
| `history.html` | TBD | 通用歷史頁 |
| `list.html` | TBD | 通用列表頁（與 web/templates/vendor_stockout/list.html 區分）|
| `vendor_stockout_list_v2.html` | TBD | 廠商缺貨詳情 V2 |

---

## 8. 跨頁面設計債務總結

### 8.1 風格混雜（最高優先）

```
風格 A（深藍+藍紫）→ 待全部遷移至風格 B（焦糖橘）
  影響頁面: dashboard, sales_analysis, monthly_summary, daily_sales,
           growth, edm_dashboard(舊), vendor_stockout(舊),
           ai_recommend, ai_history, ai_intelligence, notification_templates,
           user_management, settings, system_settings, logs, login_history,
           change_password, pchome_crawler, import, auto_import,
           price_comparison, abc_analysis_detail, trends
  共 23+ 個頁面

風格 C（紫色獨立）→ 改用焦糖橘色相
  影響頁面: login, 403, maintenance, _loading
  共 4 個頁面

風格 D（GitHub Dark）→ 保留深色但與焦糖橘對齊
  影響頁面: ai_automation_smoke, code_review
  共 2 個頁面

風格 B（焦糖橘）→ 維持
  影響頁面: ewoooc_base 體系下的所有頁面
  共 6+ 個頁面
```

### 8.2 共性技術債

| 問題 | 受影響頁面 | 建議處理 |
|------|----------|---------|
| 內嵌 `<style>` 過長 | dashboard(636行)、sales_analysis(569行)、daily_sales(878行)、settings、edm_dashboard_v2(600+行)、list.html(382行) | 抽出至 `*-page.css` 或統一進 design system |
| 內嵌 `<script>` 過長 | list.html (1600+行)、其他多處 | 模組化（class/module pattern）|
| 多種圖表庫並存 | sales_analysis、monthly_summary | 統一 Chart.js |
| 大圓角（16~20px） | dashboard、sales_analysis、daily_sales | 改 `--momo-radius-md/lg` (4~6px) |
| Modal Header 藍紫漸層 | dashboard、sales_analysis、user_management | 改 `--momo-ink` 暖墨 |
| 篩選無 URL state | sales_analysis、monthly_summary、trends | 加 query param 持久化 |
| 無空狀態插圖 | dashboard、growth、trends、abc_detail、user_management | 統一空狀態元件 |
| 無 Skeleton Loading | 全部 AJAX 頁 | 加 skeleton 統一元件 |
| 無虛擬滾動 | sales_analysis、monthly_summary、abc_detail、logs | 大資料集啟用 |
| ARIA 標籤缺失 | 全部 | Accessibility 統一補強 |
| 9 格 Logo 用空 span | _ewoooc_shell | 改 SVG |
| Loading 動畫 8 層同跑 | _loading | 移動端降級 |
| Jinja 邏輯過重 | _ewoooc_shell | 移至後端視圖 |
| 重複頁面（v1/v2 並存） | edm_dashboard / vendor_stockout / web 路徑 | 擇一保留 |
| XSS 風險（innerHTML） | list.html、send_email | DOMPurify 或 textContent |

### 8.3 元件化優先順序

建議建立統一元件庫（CSS 或 Jinja macro）：

1. **EmptyState** — 空狀態插圖+標題+CTA（複用率最高）
2. **SkeletonScreen** — 載入骨架（替代 spinner）
3. **KPICard** — 統一 KPI 卡（含趨勢箭頭、對比值、圖示）
4. **DataTable** — 包裝 DataTables，提供統一 hover/sort/empty
5. **Dropzone** — 統一拖曳上傳區
6. **Toast** — 統一通知（取代各頁面自訂）
7. **Modal** — 統一 Header/Footer 樣式
8. **FilterBar** — 篩選列（含 URL state、Badge 計數、清除全部）
9. **PaginationBar** — 統一分頁
10. **Stepper / Wizard** — 多步驟流程（用於 import / price_comparison）

---

*本附錄由 5 個並行 Explore agent 深掃 41 個 template + 3 個 component 後彙整，2026-05-01。*