582 lines
21 KiB
Markdown
582 lines
21 KiB
Markdown
# 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 或內嵌 `<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。*
|