wooo/ewoooc

Fork 0

Files

OoO 30a173cf69

CD Pipeline / deploy (push) Successful in 58s

Details

統一全站暖色視覺與市場情報骨架

2026-05-06 20:24:46 +08:00

21 KiB

Raw Permalink Blame History

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（品牌名稱、數字展示用）

特殊文字工具類

.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

特殊動畫：

@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

高度：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）
類型色：成功綠 / 危險紅 / 警告黃 / 資訊藍

背景：--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）

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（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. 當前設計亮點（可保留延伸）

JetBrains Mono 標題 — 機械儀表板感，數字排版優秀
點陣背景裝飾 — Status Card 深色背景上的橘色點陣，獨特品牌感
Live Dot 動畫 — 橘色脈衝點，搭配發光陰影 box-shadow: 0 0 8px #c96442
Nav Code 數字 — 每個導航項目右側的灰色數字代碼（01~07），Like a terminal
焦糖橘 × 暖墨 × 米白 — 三色搭配溫暖而不俗氣
⌘K 搜尋框 — 開發者友善，鍵盤優先設計

15. 當前設計弱點（優化方向）

兩套設計系統未統一 — 舊版藍紫 vs 新版焦糖橘，視覺割裂感強
Dashboard 主頁 — 流量最大的頁面仍用舊版，設計待升級
大圓角 — 舊版 16~20px border-radius，與新版方角設計衝突
無 Dark Mode — Design Token 已備妥，只缺 JS 實現
Modal Header — 舊版用藍紫漸層，應統一為暖墨色
缺共用元件庫 — 卡片/表格/表單 Pattern 散落各頁面，未抽象化
無 Focus Style — Accessibility 待加強（focus-visible 輪廓）
空狀態 (Empty State) — 多數頁面僅有文字，缺圖示/插圖

16. 技術限制（設計時須知）

無 CSS Build Tool：無法使用 SCSS/PostCSS，所有 CSS 必須是原生 CSS 或內嵌 <style>
無前端框架：無 React/Vue，互動依賴 Bootstrap 5 JS + Vanilla JS
CDN 引用：Bootstrap、Font Awesome、Chart.js 等均從 CDN 載入
Jinja2 模板：設計元素需考慮 Flask 模板語法（{{ variable }}、{% if %}）
Bootstrap 5 共存：新設計的元件需能與 Bootstrap 5 Class 共存，不衝突

此文件由 Claude Code 自動掃描 45+ 個 template 檔案及 CSS token 系統生成，2026-05-01。

21 KiB Raw Permalink Blame History Unescape Escape