diff --git a/AGENTS.md b/AGENTS.md index 8ed6a40..8ef7787 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -132,6 +132,7 @@ - 部署 SOP: `docs/guides/deployment_sop.md` - DevOps 手冊: `docs/guides/devops_handbook.md` - 模組化治理: `docs/guides/modularization_governance.md` +- 前端更版路線圖: `docs/guides/frontend_upgrade_roadmap.md` - AI 自動化 Session SOP: `docs/guides/ai_automation_session_sop.md` - AI 競價情報 SOT: `docs/AI_INTELLIGENCE_MODULE_SOT.md` - Agent 角色矩陣: `docs/guides/codex_agent_roles.md` diff --git a/CONSTITUTION.md b/CONSTITUTION.md index 6cddafa..401ede8 100644 --- a/CONSTITUTION.md +++ b/CONSTITUTION.md @@ -2,7 +2,7 @@ > 本文件定義專案開發的核心準則與不可違反的規範 > **建立日期**: 2026-01-12 -> **當前版本**: V10.31 (CD sync app/config mount drift guard) +> **當前版本**: V10.32 (Frontend v2 visual baseline) > **最後更新**: 2026-04-30 --- @@ -108,28 +108,29 @@ ## 第四章：前端 UI/UX 規範 -### 第 11 條：設計系統色彩（絕對禁止違反） -- ✅ **主題色**: 紫色漸變 `#667eea` → `#764ba2` -- ✅ **漲價**: 紅色 `#dc3545` / `#ff6b6b` -- ✅ **降價**: 綠色 `#28a745` / `#51cf66` -- ❌ **禁止**: 使用其他顏色作為主題色（除非整體改版） -- **理由**: 保持與 Daily Sales 頁面視覺一致性 +### 第 11 條：前端 V2 視覺基準（絕對禁止違反） +- ✅ **正式基準**: 前端相關視覺呈現風格與 UI/UX，以 `MOMO Pro/` 新版原型為主要依據。 +- ✅ **設計語言**: 米色工作台背景、暖墨文字、焦糖橘 accent、細線框、克制陰影、側邊欄 + 頂部工具列。 +- ✅ **資料字體**: 數字、商品 ID、時間、價格與表格欄位標籤優先使用等寬字體。 +- ✅ **漲價**: 使用新版 token 的 danger 色系（紅色）。 +- ✅ **降價**: 使用新版 token 的 success 色系（綠色）。 +- ❌ **禁止**: 新增頁面或更版頁面回到舊紫藍漸層主題、彩色表頭、厚重 KPI 卡片或五彩按鈕風格。 +- **依據**: `MOMO Pro/HANDOFF.md`、`MOMO Pro/design-tokens.css`、`docs/guides/frontend_upgrade_roadmap.md` ### 第 12 條：響應式設計（強制要求） - ✅ **正確**: 所有頁面必須支援手機版（< 768px） -- ✅ **正確**: 使用 Bootstrap 5.3.3 的響應式網格系統 +- ✅ **正確**: 既有 Flask/Jinja 頁面可沿用 Bootstrap 5.3.3，但新版 UI 優先使用 V2 tokens 與新版 shell 規範。 - ✅ **正確**: 表格與圖表必須支援橫向滾動（手機版） - ❌ **禁止**: 僅針對桌面版設計 ### 第 13 條：互動體驗（強制要求） -- ✅ **正確**: 所有按鈕必須有 hover 效果（陰影、位移、顏色變化） -- ✅ **正確**: 所有卡片必須有 hover 動畫 -- ✅ **正確**: 使用 `transition: all 0.3s ease` 實現平滑過渡 +- ✅ **正確**: 所有按鈕、導覽項、表格列與可點擊卡片必須有 hover / active 狀態。 +- ✅ **正確**: 使用 V2 token 的 transition，保持快速、安靜、克制。 - ❌ **禁止**: 靜態無互動的 UI 元素 ### 第 14 條：字體與可讀性（強制要求） -- ✅ **正確**: 主要文字顏色 `#2c3e50`（深灰） -- ✅ **正確**: 表格表頭使用白色文字 `#fff` +- ✅ **正確**: 主要文字使用新版暖墨色 token，避免純黑造成刺眼。 +- ✅ **正確**: 表格表頭使用米色 paper 底 + 等寬小字標籤；活動 hero 等深色區塊才使用反白文字。 - ❌ **禁止**: 使用純黑色 `#000`（刺眼） - ❌ **禁止**: 使用低對比度顏色組合 diff --git a/MOMO Pro/EwoooC 後台原型.html b/MOMO Pro/EwoooC 後台原型.html new file mode 100644 index 0000000..7eb2e2e --- /dev/null +++ b/MOMO Pro/EwoooC 後台原型.html @@ -0,0 +1,134 @@ + + + + +EwoooC · 商家後台 + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/MOMO Pro/HANDOFF.md b/MOMO Pro/HANDOFF.md new file mode 100644 index 0000000..1e821a6 --- /dev/null +++ b/MOMO Pro/HANDOFF.md @@ -0,0 +1,419 @@ +# EwoooC 後台 — Codex 開發交接規格 (HANDOFF.md) + +> 這份文件是給 Codex（或任何工程團隊）將 prototype 重建為正式 production 專案的完整規格。 +> Prototype 是 React 18 + Babel Standalone（瀏覽器即時 transpile），**不是 production build**。 +> 請依下方規格，重建為正式專案。 + +--- + +## 0. 專案概覽 + +**產品名稱**：EwoooC（內部後台 / 比價爬蟲監控系統） +**目標使用者**：採購、行銷、營運人員 +**核心功能**：商品價格監控、活動看板、廠商缺貨追蹤、AI 助手、雲端匯入 +**資料規模**：監控 7,000+ 商品，每日掃描多次，含歷史價格走勢 + +**設計語言（必須沿用）**：Nothing × Claude 混合風格 +- 米色基底（warm paper）+ 黑灰主體 + 焦糖橘 accent +- JetBrains Mono 用於所有數字、ID、時間戳 +- Inter 用於介面文字、繁體中文用 Noto Sans TC +- 安靜、結構化、靠留白和排版取勝；**避免**漸層厚重 hero、彩色表頭、五彩按鈕 + +--- + +## 1. 技術棧建議 + +| 類別 | 建議 | 備註 | +|------|------|------| +| Framework | **Next.js 14 + App Router** | SSR、RSC、檔案路由 | +| 語言 | **TypeScript** | 全面型別化 | +| 樣式 | **Tailwind CSS + CSS Variables** | tokens 走 CSS vars，元件用 Tailwind | +| 狀態 / 資料 | **TanStack Query (v5)** | 抓 API、cache、revalidate | +| 表單 | React Hook Form + Zod | 表單驗證 | +| 圖表 | **Recharts** 或 **Visx** | 價格走勢圖、KPI 趨勢 | +| 表格 | **TanStack Table v8** | 排序、篩選、虛擬化 | +| Icon | **Lucide React**（替代現有 SVG icons） | 與 prototype 風格相容 | +| 字型 | next/font 載入 JetBrains Mono + Inter + Noto Sans TC | self-host | +| 部署 | Vercel / 自架 Docker | — | + +--- + +## 2. 路由表（Next.js App Router） + +``` +app/ +├── layout.tsx # 全域 layout（載字型、tokens、TanStack Provider） +├── (auth)/ +│ └── login/page.tsx # 登入頁 +├── (admin)/ +│ ├── layout.tsx # Sidebar + Topbar shell +│ ├── dashboard/page.tsx # 商品看板（首頁，重導 /） +│ ├── campaigns/ +│ │ ├── page.tsx # 活動看板（含 tab 切換） +│ │ └── [id]/page.tsx # 單一活動詳情（可選） +│ ├── products/ +│ │ ├── page.tsx # 全商品列表 +│ │ └── [id]/page.tsx # 商品詳情 + 30 天走勢 +│ ├── analytics/page.tsx # 分析報表 +│ ├── vendors/page.tsx # 廠商缺貨 +│ ├── ai-assistant/page.tsx # AI 助手 +│ ├── cloud-import/page.tsx # 雲端匯入 +│ └── settings/page.tsx # 系統管理 +└── api/ # 若用 BFF，放這 +``` + +**Sidebar 對應**： +- 監控：商品看板（dashboard）、活動看板（campaigns）、分析報表（analytics） +- 營運：廠商缺貨（vendors）、商品列表（products）、訂單（orders） +- 智能：AI 助手（ai-assistant）、雲端匯入（cloud-import） +- 系統：系統管理（settings） + +--- + +## 3. Design Tokens（必讀，直接搬） + +來源：`design-tokens.css`（已在交付包根目錄） + +**核心變數**（節錄，完整見檔案）： + +```css +:root { + /* 基底色 */ + --momo-bg-primary: #f0eee9; /* 米色頁底 */ + --momo-bg-surface: #ffffff; /* 卡片白 */ + --momo-bg-paper: #f7f5f0; /* 微暖灰白（hover/header） */ + --momo-bg-subtle: #ebe8e0; + --momo-bg-muted: #e6e2d8; + + /* 主體色 */ + --momo-ink: #1a1a1a; /* Nothing 黑 */ + --momo-text-primary: #1a1a1a; + --momo-text-secondary:#4a4a4a; + --momo-text-tertiary: #8a8a8a; + + /* Accent */ + --momo-accent: #c96442; /* Claude 焦糖橘 */ + --momo-accent-hover: #b3553a; + + /* 語意色 */ + --momo-success: #16a34a; + --momo-danger: #dc2626; + --momo-warning: #ea580c; + --momo-info: #3b5cb8; + + /* 邊線 */ + --momo-border: #d6d2c8; + --momo-border-light: #e6e2d8; + + /* 字型 */ + --momo-font-family-base: 'Inter', 'Noto Sans TC', -apple-system, sans-serif; + --momo-font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; + + /* 字級 */ + --momo-font-size-xs: 11px; + --momo-font-size-sm: 13px; + --momo-font-size-base: 14px; + --momo-font-size-lg: 16px; + + /* 圓角 */ + --momo-radius-sm: 3px; + --momo-radius-md: 4px; + --momo-radius-lg: 8px; + --momo-radius-pill: 999px; + + /* 陰影 */ + --momo-shadow-sm: 0 1px 2px rgba(0,0,0,0.04); + --momo-shadow-md: 0 2px 8px rgba(0,0,0,0.06); + + /* 過場 */ + --momo-transition-base: all 0.15s ease; +} +``` + +**Tailwind 對應建議**：在 `tailwind.config.ts` 用 `theme.extend.colors`、`fontFamily`、`borderRadius` 直接對應上述變數。 + +--- + +## 4. 元件清單（重建依據 `app/ui.jsx`） + +| 元件 | Props (核心) | 行為 | +|------|--------------|------| +| ` + + + ); +}; + +window.MomoApp = MomoApp; +window.TWEAK_DEFAULTS = TWEAK_DEFAULTS; diff --git a/MOMO Pro/app/modals.jsx b/MOMO Pro/app/modals.jsx new file mode 100644 index 0000000..bdf7262 --- /dev/null +++ b/MOMO Pro/app/modals.jsx @@ -0,0 +1,327 @@ +// MOMO Pro - Modal & 命令面板 + +// ===== 通用 Modal 容器 ===== +const Modal = ({ open, onClose, title, children, footer, size = 'md' }) => { + if (!open) return null; + const widths = { sm: 480, md: 640, lg: 880 }; + return ( +
+
e.stopPropagation()} style={{ + background: 'var(--momo-bg-surface)', + borderRadius: 'var(--momo-radius-lg)', + boxShadow: 'var(--momo-shadow-lg)', + width: '100%', maxWidth: widths[size], + maxHeight: '90%', + display: 'flex', flexDirection: 'column', + overflow: 'hidden', + animation: 'momo-slide-up 0.2s ease-out', + }}> +
+

{title}

+ +
+
+ {children} +
+ {footer && ( +
{footer}
+ )} +
+
+ ); +}; + +// ===== 編輯商品 Modal ===== +const ProductEditModal = ({ open, product, onClose, buttonStyle = 'gradient' }) => { + if (!product) return null; + const Field = ({ label, children, hint }) => ( +
+ + {children} + {hint &&
{hint}
} +
+ ); + const fieldStyle = { + width: '100%', padding: '8px 12px', + border: '1px solid var(--momo-border)', + borderRadius: 'var(--momo-radius-md)', + fontSize: 13, outline: 'none', + background: 'var(--momo-bg-surface)', + transition: 'var(--momo-transition-base)', + }; + + return ( + + + + + + }> +
+
+ + + + +