wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
ewoooc/docs/guides/claude_design_brief_pages.md
OoO 30a173cf69
All checks were successful
CD Pipeline / deploy (push) Successful in 58s
Details
統一全站暖色視覺與市場情報骨架
2026-05-06 20:24:46 +08:00

47 KiB
Raw Permalink Blame History

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： 
    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。

Reference in New Issue View Git Blame Copy Permalink