# EwoooC × MOMO Pro — Claude Design Brief **Version:** 1.0 (2026-05-01) **Purpose:** 供 Claude Design 理解現況並繼續 UI/UX 視覺設計優化。 --- ## 1. 專案概覽 | 欄位 | 內容 | |------|------| | 產品名稱 | EwoooC 商家後台（原名 MOMO Pro）| | 產品類型 | B2B 電商監控與管理系統（商品價格監控、活動管理、業績分析）| | 語言 | 繁體中文 (zh-TW) | | 渲染方式 | Server-side Jinja2 (Flask)，無 SPA | | CSS 框架 | Bootstrap 5.3.3 | | 圖標庫 | Font Awesome 6.0.0 | | 圖表 | Chart.js 3.9.1 + ECharts 5.4.3 | --- ## 2. 設計語言宣言 > **"Claude 暖系 × Nothing Phone 點陣機械感"** ### 核心哲學 - **底色**：溫暖米紙感（`#ebe6dc`）— 不刺眼的辦公室頁面底 - **主調**：焦糖橘（`#c96442`）— 暖而有力的品牌色，取自 Claude AI 色調 - **黑白對比**：Nothing Phone 風格的純黑側欄（`#1a1a1a`）搭配鮮明白字 - **排版**：標題用 JetBrains Mono 等寬字，機械儀表板感；內文用 Inter + Noto Sans TC - **裝飾**：8px 點陣背景（dot matrix）作為深色卡片的背景紋路 - **陰影哲學**：線條優先（`1px solid rgba(...)`），避免大陰影，方角為主（radius 最大 6px） --- ## 3. 兩套 Layout 系統（重要！現況） 目前有**兩個共存的 Base Template**，正處於從舊版遷移至新版的過渡期： ### 3-A. 舊版（`base.html` + `_navbar.html`） - **Layout**：頂部固定 Navbar，全頁 container 排版 - **Navbar**：深藍漸層 `#1e3c72 → #2a5298`，固定頂部 `position: fixed` - **背景**：淺灰冷色 `linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%)` - **Accent 顏色**：藍紫漸層 `#667eea → #764ba2`（舊品牌色，仍在多數頁面中） - **使用頁面**：`dashboard.html`、`sales_analysis.html`、`monthly_summary_analysis.html` 等主要功能頁 ### 3-B. 新版（`ewoooc_base.html` + `ewoooc-tokens.css` + `ewoooc-shell.css`） - **Layout**：CSS Grid Sidebar（240px）+ 主內容區，Topbar 64px sticky - **Sidebar**：純黑背景 `#1a1a1a`，白色文字，焦糖橘 accent 高亮 - **背景**：米色紙張感 `#ebe6dc` - **Accent 顏色**：焦糖橘 `#c96442`（新品牌色） - **使用頁面**：`vendor_stockout/`、部分新功能頁面（EwoooC 路由下的頁面） **設計方向**：以 3-B 新版為目標方向，所有優化/新設計請對齊新版設計系統。 --- ## 4. 完整 Design Token（Source of Truth） ### 4.1 色彩系統 #### 背景層次（米色系） ``` --momo-bg-body: #ebe6dc ← 頁面底色（最深） --momo-bg-surface: #faf7f0 ← 卡片表面（預設） --momo-bg-elevated: #fdfaf3 ← 懸浮/選中卡片 --momo-bg-subtle: #e2dccf ← 分隔區塊底色 --momo-bg-muted: #cfc7b5 ← 更暗的區塊 --momo-bg-paper: #f3eee2 ← Sidebar 底色、特殊卡片 ``` #### 文字層次（暖墨系） ``` --momo-text-primary: #2a2520 ← 主要內文 --momo-text-secondary: #645c52 ← 次要說明 --momo-text-tertiary: #9b9081 ← 標籤標題、placeholder --momo-text-disabled: #c4baa8 ← 禁用狀態 --momo-text-inverse: #faf7f0 ← 深色背景上的白字 --momo-text-link: #c96442 ← 連結色 --momo-text-link-hover:#8f4530 ← 連結懸停 ``` #### 主色調（焦糖橘） ``` --momo-accent: #c96442 ← 主 accent，Button/Active/Badge --momo-accent-50: #fbf2ef ← 極淡（hover 背景） --momo-accent-100: #f5e1d9 ← 淡（選中 tag 背景） --momo-accent-200: #ecc3b3 ← 較淡 --momo-accent-500: #c96442 ← = accent（主） --momo-accent-600: #b1543a ← hover 按鈕 --momo-accent-700: #8f4530 ← active/pressed 按鈕 --momo-accent-soft: rgba(201,100,66,0.12) ← 懸停背景 ``` #### 狀態色（去飽和，適配米色底） ``` 成功 success: text #2a7a3f | bg #e3ebd9 | border #c5d4b0 危險 danger: text #b5342f | bg #f0d8d4 | border #d9b1ac 警告 warning: text #b88416 | bg #f3e7c4 | border #d9c590 資訊 info: text #2d5d80 | bg #d8e2ea | border #b5c5d2 ``` #### 邊框與分隔線 ``` --momo-border: #2a2520 （實線邊框） --momo-border-light: rgba(42,37,32,0.16) ← 淡分隔線 --momo-border-focus: #c96442 ← 聚焦狀態 --momo-divider: rgba(42,37,32,0.12) ``` #### 導航色（Nothing 黑）— Sidebar 專用 ``` sidebar background: #1a1612（深暖黑） nav-link hover bg: rgba(201,100,66,0.12)（accent-soft） nav-link active bg: #c96442（實色焦糖橘） nav-link active text: #faf7f0（反色） status-card border: rgba(201,100,66,0.35)（橘色描邊） ``` ### 4.2 Typography #### 字型堆疊 ``` Display（標題）: "JetBrains Mono", "Space Mono", "SF Mono", Menlo, Consolas, monospace Body（內文）: "Inter", -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif Mono（數據）: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace ``` #### 字型大小 ``` xs → 0.75rem (12px) ← 極小標籤 sm → 0.8125rem (13px) ← 次要內文、導航項目 base → 0.9375rem (15px) ← 主要內文 lg → 1.0625rem (17px) ← 稍大內文 xl → 1.625rem (26px) ← 頁面主標題 2xl → 2.25rem (36px) ← 大數字顯示 ``` #### 字重與行高 ``` normal: 400 base line-height: 1.5 medium: 500 tight line-height: 1.15（標題） semibold: 600 loose line-height: 1.7（長文） bold: 700 black: 800（品牌名稱、數字展示用） ``` #### 特殊文字工具類 ```css .momo-display → JetBrains Mono，標題用，搭配 font-feature-settings: "tnum", "ss01" .momo-mono → 等寬字體，數字/代碼，搭配 font-feature-settings: "tnum" .momo-label → JetBrains Mono 10px，font-weight 600，letter-spacing 0.12em，text-transform uppercase 用於分類標題、狀態標籤（如 "監控" "營運" "系統"） ``` ### 4.3 間距系統（8px 基數） ``` --momo-space-1: 0.25rem (4px) --momo-space-2: 0.5rem (8px) --momo-space-3: 0.75rem (12px) --momo-space-4: 1rem (16px) --momo-space-5: 1.5rem (24px) --momo-space-6: 2rem (32px) --momo-space-7: 3rem (48px) --momo-space-8: 4rem (64px) ``` 頁面內容區 padding：`28px 32px 40px`（desktop），`20px 16px 32px`（mobile） ### 4.4 圓角系統（方角優先） ``` --momo-radius-sm: 2px (0.125rem) ← badge、code、shortcut --momo-radius-md: 4px (0.25rem) ← 按鈕、輸入框、卡片 → 預設 --momo-radius-lg: 6px (0.375rem) ← 較大卡片、modal --momo-radius-pill: 50rem ← 圓形按鈕、chip --momo-radius-circle: 50% ← 頭像 ``` > 注意：舊版頁面（dashboard.html）使用更大的圓角（16px~20px）。新設計請用 4px~6px。 ### 4.5 陰影系統（線條感優先） ``` --momo-shadow-sm: 0 0 0 1px rgba(26,26,26,0.08) --momo-shadow-md: 0 0 0 1px rgba(26,26,26,0.10) --momo-shadow-lg: 0 12px 40px -8px rgba(26,26,26,0.18), 0 0 0 1px rgba(26,26,26,0.10) --momo-shadow-colored: 0 0 0 2px rgba(201,100,66,0.25) ← accent 聚焦輪廓 ``` > 陰影哲學：主要靠 `1px solid border` 定義邊界，大投影只用於 Modal/Popover。 ### 4.6 動畫系統 ``` --momo-duration-fast: 0.12s ← hover/focus 狀態切換 --momo-duration-normal: 0.2s ← sidebar 展收、dropdown --momo-duration-slow: 0.4s ← Modal 出現、頁面過渡 --momo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1) --momo-ease-out: cubic-bezier(0, 0, 0.2, 1) 基礎過渡（所有互動元件預設）： color / background-color / border-color / box-shadow，各 0.12s ease-in-out ``` 特殊動畫： ```css @keyframes momo-pulse-dot ← sidebar 底部爬蟲狀態 live dot（2s 閃爍） @keyframes momo-fade-in ← 元素出現（opacity + translateY 2px） @keyframes momo-slide-up ← Toast 進場（opacity + translateY 12px） ``` ### 4.7 Z-Index 層級 ``` 1 → base 1000 → dropdown 1020 → sticky topbar 1030 → fixed elements 1040 → modal backdrop 1050 → modal 1060 → popover 1070 → tooltip 1080 → toast ``` ### 4.8 Layout 尺寸 ``` sidebar width: 240px sidebar collapsed width: 72px（1180px 以下自動切換） topbar height: 64px ``` --- ## 5. 版面結構（新版 EwoooC Shell） ``` ┌─────────────────────────────────────────────────────┐ │ .momo-shell (CSS Grid: sidebar | main) │ │ │ │ ┌──────────┐ ┌──────────────────────────────────┐ │ │ │ .momo- │ │ .momo-main-shell │ │ │ │ sidebar │ │ │ │ │ │ │ │ ┌──────────────────────────────┐│ │ │ │ Logo │ │ │ .momo-topbar (sticky, 64px) ││ │ │ │ Nav │ │ │ [hamburger] [search] [user] ││ │ │ │ Groups │ │ └──────────────────────────────┘│ │ │ │ │ │ │ │ │ │ Status │ │ ┌──────────────────────────────┐│ │ │ │ Card │ │ │ .momo-content (28px 32px pad) ││ │ │ │ │ │ │ {% block ewooo_content %} ││ │ │ │ │ │ └──────────────────────────────┘│ │ │ └──────────┘ └──────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘ ``` ### Sidebar 細節 - **Logo 區**：`momo-logo-mark`（3×3 點陣格，黑底白點，右上角點空缺）+ `momo-brand-name`（JetBrains Mono, 18px, 800 weight） - **Nav Group 標題**：`.momo-label`（10px 大寫等寬），右側延伸分隔線 `::after` - **Nav Link**：左 icon（16px）+ label + 右側數字代碼（opacity 0.48） - Default：透明底，暖墨字 - Hover：`accent-soft` 背景（rgba(201,100,66,0.12)） - Active：`accent` 實色背景（#c96442），白字 - **Status Card**：sidebar 底部，暖黑底 `#1a1612` + 橘色描邊 + 點陣背景紋，顯示爬蟲狀態 ### Topbar 細節 - 左：mobile 漢堡選單（hidden on desktop） - 中左：搜尋框（flex-grow，最大 480px），`⌘K` 快捷鍵 badge - 中右彈性空間 - 右側：排程時間 pill（深黑底+橘邊）、圖示按鈕（問號/鈴鐺）、使用者 chip（頭像+姓名+角色） --- ## 6. 元件規格 ### 6.1 按鈕 #### Primary Button（CTA） ``` 背景：--momo-accent (#c96442) 文字：--momo-text-inverse (#faf7f0) 邊框：none 圓角：--momo-radius-md (4px) Hover：--momo-accent-600 (#b1543a) Active：--momo-accent-700 (#8f4530) Padding：9px 20px Font：0.875rem，600 weight ``` #### Secondary / Ghost Button ``` 背景：transparent 文字：--momo-text-primary (#2a2520) 邊框：1px solid --momo-border-light 圓角：4px Hover：bg --momo-bg-subtle ``` #### Danger Button ``` 背景：--momo-danger (#b5342f) 文字：white ``` #### Icon Button（.momo-icon-button） ``` 尺寸：36×36px 背景：transparent 圓角：4px Hover：bg --momo-bg-subtle Color：--momo-text-secondary → primary on hover ``` ### 6.2 卡片（Card） ``` 背景：--momo-bg-surface (#faf7f0) 邊框：1px solid --momo-border-light 圓角：--momo-radius-lg (6px) 陰影：--momo-shadow-sm Padding：24px (1.5rem) Hover（可選）：--momo-shadow-md ``` 特殊：深色 Status Card（sidebar 底部） ``` 背景：--momo-ink-strong (#1a1612) 邊框：1px solid rgba(201,100,66,0.35) 點陣背景紋路：radial-gradient dots，6px×6px 文字：rgba(250,247,240,0.55) 標題 / rgba(250,247,240,0.62) 內文 ``` ### 6.3 表格 ``` Border：none（預設），行底部 border-bottom: 1px solid --momo-divider Header：--momo-bg-paper 底色，--momo-label 樣式欄位標題 Hover Row：--momo-accent-soft 背景 Cell Padding：12px 16px Data 數字：.momo-mono 字體 狀態 Badge：pill 形（border-radius: 2px），對應狀態色 ``` ### 6.4 徽章（Badge） ``` 圓角：2px（方角） Font：10px，800 weight，全大寫 Color：--momo-text-inverse (#faf7f0) 背景：--momo-accent（主要），或對應狀態色 Padding：1px 6px ``` ### 6.5 搜尋框（.momo-search-box） ``` 高度：38px 背景：--momo-bg-paper 邊框：1px solid --momo-border 圓角：4px Placeholder：--momo-text-secondary Focus border：--momo-accent 左側 icon：fa-search，margin-right 10px 右側：⌘K shortcut badge（accent 背景，2px 圓角） ``` ### 6.6 Toast 通知 ``` 位置：右上角固定（top: 24px, right: 24px），z-index: 1080 寬度：max 360px 圓角：6px 自動消失：3秒 進場動畫：slide-up（opacity + translateY 12px → 0） 類型色：成功綠 / 危險紅 / 警告黃 / 資訊藍 ``` ### 6.7 Modal ``` 背景：--momo-bg-surface 圓角：--momo-radius-lg (6px) Header：--momo-ink 背景，白字（舊版用 #667eea 漸層，新版請改用暖墨色） Backdrop：rgba(26,26,26,0.70) 最大寬度：sm 400px / md 640px / lg 960px / xl 1140px ``` ### 6.8 用戶頭像 Chip（.momo-user-chip） ``` 高度：40px Padding：4px 10px 4px 4px 圓角：pill（50rem） Avatar：32×32px 圓形，背景 --momo-ink，白字，13px 800weight Hover：bg --momo-bg-subtle ``` ### 6.9 點陣裝飾（.momo-dot-bg） ```css background-image: radial-gradient(circle, rgba(26,26,26,0.12) 1px, transparent 1px); background-size: 8px 8px; ``` 用於深色背景卡片（Status Card）或特殊區塊裝飾。 --- ## 7. 導航結構 ``` Sidebar Nav ├── 【監控】 │ ├── 01 商品看板 / → fa-border-all │ ├── 02 活動看板 /edm → fa-bullhorn │ └── 03 分析報表 /sales_analysis → fa-chart-line ├── 【營運】 │ ├── 04 廠商缺貨 /vendor-stockout → fa-box-open │ ├── 05 AI 助手 /ai_recommend → fa-wand-magic-sparkles │ └── 06 雲端匯入 /auto_import → fa-download └── 【系統】 └── 07 系統管理 /settings → fa-gear ``` 舊版 Navbar（base.html 頁面）另有獨立下拉選單結構（業績分析/AI助手/系統管理各含多個子項目）。 --- ## 8. 主要頁面清單 > **完整逐頁深度盤點請見 [`claude_design_brief_pages.md`](claude_design_brief_pages.md)（Appendix A）** > 該附錄涵蓋 41 個 template + 3 個 component，每頁包含路徑/路由/Layout/區塊/元件/互動/配色/設計問題/改造重點 9 個欄位。 ### 8.1 設計風格分布總覽（深掃後校正） 實際發現 **4 種視覺風格混雜**，不只 2 種： | 風格 | 背景 | Accent | 頁面數 | 處置 | |------|------|--------|--------|------| | **A. 深藍 + 藍紫漸層**（舊主流）| `#f5f7fa` | `#1e3c72→#2a5298` + `#667eea→#764ba2` | 23+ | **全部遷移至 B** | | **B. 焦糖橘暖系**（目標） | `#ebe6dc` | `#c96442` | 6+ | 維持並擴張 | | **C. 紫色獨立入口頁** | `#667eea→#764ba2` | `#4F46E5` | 4 (login/403/maintenance/_loading) | 改用焦糖橘色相 | | **D. GitHub Dark Terminal** | `#0d1117` | `#3fb950/#58a6ff/#bc8cff` | 2 (ai_automation_smoke/code_review) | 保留深色但與焦糖橘對齊 | ### 8.2 風格 B（目標設計）參考頁面 Claude Design 可直接參考這幾頁的 Pattern 作為其他頁面遷移的樣板： | 頁面 | 路徑 | 為何是樣板 | |------|------|-----------| | `vendor_stockout_index_v2.html` | `/vendor-stockout` | 風格 B 最完整實作：Hero+Pulse Box+KPI Grid+Flow Cards+Summary | | `edm_dashboard_v2.html` | `/edm/dashboard_v2` | 含 Chart.js 整合的範例（Modal 內動態載圖）| | `vendor_stockout_import_v2.html` | `/vendor-stockout/import` | Dropzone + 多狀態面板（File/Progress/Result/Error）| | `_ewoooc_shell.html` | (component) | Sidebar 導航結構與 Status Card | ### 8.3 重點優化頁面 Top 10 依照「使用頻率 × 設計債務 × 影響範圍」排序： | 排名 | 頁面 | 行數 | 主要債務 | |------|------|------|---------| | 1 | `dashboard.html` | 1405 | 流量最大首頁，舊藍紫，無空狀態 | | 2 | `sales_analysis.html` | 3165 | 系統最複雜頁，三種圖表庫並存 | | 3 | `web/templates/vendor_stockout/list.html` | 1793 | 1600+ 行 inline JS 無模組化 | | 4 | `daily_sales.html` | 1905 | 自訂月曆 878 行 CSS，行動版爆表 | | 5 | `settings.html` | 1650 | 巨型設定頁，padding 重疊 bug | | 6 | `monthly_summary_analysis.html` | 1473 | ECharts 待換 Chart.js | | 7 | `edm_dashboard_v2.html` | 1130 | 已是 B 風格但 CSS 600+ 行待精簡 | | 8 | `ai_recommend.html` | 1000+ | AI 互動 UX 流式輸出未實作 | | 9 | `user_management.html` | 906 | 權限矩陣未視覺化 | | 10 | `logs.html` | 872 | 篩選器邏輯複雜，最佳重構樣本 | --- ## 9. 色彩衝突說明（設計遷移中） 目前有**三種 Accent 色系混用**，這是技術債，新設計一律使用 **焦糖橘**： | 色系 | Hex | 出現位置 | 備注 | |------|-----|---------|------| | 焦糖橘 ✓ | `#c96442` | ewoooc 新版頁面 | **目標設計色** | | 藍紫 ✗ | `#667eea → #764ba2` | dashboard.html、表格 header、按鈕 | 舊版，待替換 | | 深藍 ✗ | `#1e3c72 → #2a5298` | 舊版 Navbar、base.html | 舊版，待替換 | --- ## 10. 響應式斷點 | 斷點 | 寬度 | 行為 | |------|------|------| | Desktop | ≥1180px | Sidebar 240px 全展開，顯示文字 | | Collapsed | 1180px–820px | Sidebar 收至 72px，只顯示圖標 | | Mobile | ≤820px | Sidebar 隱藏（slide-in 抽屜式），hamburger 按鈕出現 | Topbar 漸進隱藏（Container Query）： - ≤1024px：隱藏排程 pill - ≤880px：隱藏使用者名稱/角色 - ≤720px：隱藏搜尋框文字 --- ## 11. 圖表設計規範 ### Chart.js（折線圖、柱狀圖、圓餅圖） 目前使用舊藍紫色系，應遷移至： ``` 主線色：#c96442（焦糖橘） 輔助線：#b5342f（暗紅，下跌）、#2a7a3f（深綠，上漲） Fill 漸層：從 rgba(201,100,66,0.3) → rgba(201,100,66,0.05) 格線：rgba(42,37,32,0.06)（極淡） Tooltip：背景 rgba(26,26,26,0.88)，白字，焦糖橘描邊 ``` ### ECharts（複雜多維圖表） 應使用同色系調色板，確保視覺一致。 --- ## 12. 互動模式 | 模式 | 實現方式 | |------|---------| | 表格行點擊展開詳情 | onclick → Bootstrap Modal | | KPI Card 點擊鑽取 | onclick → Modal + fetch API | | 搜尋篩選 | form GET 提交（非 SPA） | | 操作回饋 | Toast 通知（右上角滑入） | | 複製品號 | Clipboard API + 視覺回饋（文字變 ✅ 已複製）| | 載入狀態 | Bootstrap spinner-border | | 全頁載入 | 自訂 overlay 動畫（WOOO 品牌）| --- ## 13. 品牌資產 ### Logo 變體 ``` logo.png → 標準 logo logo_transparent.png → 透明底 logo_v4_gradient.png → 漸層版 logo_v4_glass.png → 玻璃質感 logo_navbar.svg → 導航列向量版 logo_circle.svg → 圓形版 ``` ### 品牌名稱 - 老品牌：**WOOO** / **WOOO TECH** - 新品牌：**EwoooC**（等寬字體呈現，副標：「價格監控 V2」） ### Logo Mark（點陣格設計） ``` 3×3 格，32×32px，gap 1.5px，padding 5px 背景：--momo-ink (#1a1612)，圓角 2px 點：圓形白點 中心格（第5格）：空白 → 點陣 ⠿ 風格，Nothing Phone 美學 ``` --- ## 14. 當前設計亮點（可保留延伸） 1. **JetBrains Mono 標題** — 機械儀表板感，數字排版優秀 2. **點陣背景裝飾** — Status Card 深色背景上的橘色點陣，獨特品牌感 3. **Live Dot 動畫** — 橘色脈衝點，搭配發光陰影 `box-shadow: 0 0 8px #c96442` 4. **Nav Code 數字** — 每個導航項目右側的灰色數字代碼（01~07），Like a terminal 5. **焦糖橘 × 暖墨 × 米白** — 三色搭配溫暖而不俗氣 6. **⌘K 搜尋框** — 開發者友善，鍵盤優先設計 --- ## 15. 當前設計弱點（優化方向） 1. **兩套設計系統未統一** — 舊版藍紫 vs 新版焦糖橘，視覺割裂感強 2. **Dashboard 主頁** — 流量最大的頁面仍用舊版，設計待升級 3. **大圓角** — 舊版 16~20px border-radius，與新版方角設計衝突 4. **無 Dark Mode** — Design Token 已備妥，只缺 JS 實現 5. **Modal Header** — 舊版用藍紫漸層，應統一為暖墨色 6. **缺共用元件庫** — 卡片/表格/表單 Pattern 散落各頁面，未抽象化 7. **無 Focus Style** — Accessibility 待加強（focus-visible 輪廓） 8. **空狀態 (Empty State)** — 多數頁面僅有文字，缺圖示/插圖 --- ## 16. 技術限制（設計時須知） - **無 CSS Build Tool**：無法使用 SCSS/PostCSS，所有 CSS 必須是原生 CSS 或內嵌 `