1003 lines
47 KiB
Markdown
1003 lines
47 KiB
Markdown
# 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。*
|