# MOMO Pro System - 頁面結構 (Wireframe) > 最後更新：2026-01-29 --- ## 🏠 共通元件 ### 導航列 (Navbar) ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 🔵 WOOO 商品看板 活動看板 ▼分析報表 廠商缺貨 雲端匯入 ▼系統管理 │ │ 🕐 2026-01-29 │ └─────────────────────────────────────────────────────────────────────────┘ 分析報表 下拉選單: ├── 業績分析 ├── 當日業績 ├── 月份總表數據分析 ├── ────────── ├── Metabase 報表 ↗ └── Grist 試算表 ↗ 系統管理 下拉選單: ├── 爬蟲管理 ├── 系統設定 └── 系統日誌 ``` ### 頁面基本結構 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ Navbar │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ Page Content │ │ │ │ (主要內容區域) │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` --- ## 📊 商品看板 (Dashboard) ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 商品監控概況 │ 今日價格動態 │ │ ┌───────┐ ┌───────┐ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │監控總數│ │今日新增│ │ │ 漲價 │ │ 降價 │ │ 下架 │ │ │ │ 5,576 │ │ 23 │ │ │ 45 │ │ 67 │ │ 12 │ │ │ └───────┘ └───────┘ │ └─────┘ └─────┘ └─────┘ │ │ ┌───────┐ ┌───────┐ │ ┌─────────────┐ ┌─────────────┐ │ │ │ 週增長 │ │穩定商品│ │ │ 平均漲幅 │ │ 平均跌幅 │ │ │ │ 156 │ │ 4,200 │ │ │ +$120 │ │ -$85 │ │ │ └───────┘ └───────┘ │ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────┐ │ 🔍 [搜尋商品名稱或品號...] [分類 ▼] [全部][新上架][漲價][降價][下架] │ │ [更新] [發送通知] │ ├─────────────────────────────────────────────────────────────────────────┤ │ 商品列表 (5,576 筆) 上次排程 (20:33:49): 掃描 5,576 筆 成功 │ │ [匯出報表 ▼] │ ├───────┬─────────────────────────────────┬────────┬───────┬──────┬──────┤ │ 分類 │ 商品名稱 │ 當天價格│ 昨日漲跌│週漲跌│更新時間│ ├───────┼─────────────────────────────────┼────────┼───────┼──────┼──────┤ │ 🏷美妝 │ [圖] 雅詩蘭黛特潤超導精萃... │ $3,280 │ ▲ 200 │ +150 │ 01-29 │ │ │ ID: ABC123 📋 [漲價] │ │ (6.5%)│ │ 14:30 │ ├───────┼─────────────────────────────────┼────────┼───────┼──────┼──────┤ │ 🏷保健 │ [圖] 白蘭氏養蔘飲 60ml... │ $1,580 │ ▼ 100 │ -200 │ 01-29 │ │ │ ID: DEF456 📋 [降價] │ │ (5.9%)│ │ 14:25 │ └───────┴─────────────────────────────────┴────────┴───────┴──────┴──────┘ [< 上一頁] 第 1 / 280 頁 [下一頁 >] ``` --- ## 📈 每日業績分析 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 📈 每日業績分析 日期: [2026-01-29] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ 今日業績 │ │ 昨日業績 │ │ 同期比較 │ │ 達成率 │ │ │ │ $12,345,678 │ │ $11,234,567 │ │ ▲ 9.8% │ │ 85.2% │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 業績趨勢折線圖 │ │ │ │ (過去 7 天業績走勢) │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────────────┤ │ 🔍 [搜尋品牌/PM...] PM: [全部 ▼] 品牌: [全部 ▼] [匯出 Excel] │ ├────────┬──────────────┬────────────┬────────────┬─────────┬────────────┤ │ 排名 │ 品牌 │ 今日業績 │ 昨日業績 │ 變化率 │ PM │ ├────────┼──────────────┼────────────┼────────────┼─────────┼────────────┤ │ 1 │ 雅詩蘭黛 │ $1,234,567 │ $1,123,456 │ ▲ 9.9% │ 王小明 │ ├────────┼──────────────┼────────────┼────────────┼─────────┼────────────┤ │ 2 │ 蘭蔻 │ $987,654 │ $876,543 │ ▲ 12.7%│ 李小華 │ └────────┴──────────────┴────────────┴────────────┴─────────┴────────────┘ ``` --- ## 📦 廠商缺貨管理 ### 缺貨列表頁 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 📦 廠商缺貨管理 │ ├─────────────────────────────────────────────────────────────────────────┤ │ [📥 匯入缺貨] [📧 批次發送] [📊 廠商管理] [📜 發送歷史] │ ├─────────────────────────────────────────────────────────────────────────┤ │ 篩選: 狀態 [全部 ▼] 批次 [20260129_143000 ▼] 廠商 [全部 ▼] [🔍 搜尋] │ ├─────────────────────────────────────────────────────────────────────────┤ │ 批次 20260129_143000 | 共 156 筆 | 待發送: 120 | 已發送: 30 | 失敗: 6 │ ├──┬─────────┬─────────────────────────┬─────────┬────────┬───────┬──────┤ │☑ │ 廠商代碼 │ 商品名稱 │ 缺貨天數 │ 現有庫存│ 狀態 │ 操作 │ ├──┼─────────┼─────────────────────────┼─────────┼────────┼───────┼──────┤ │☑ │ V001 │ 雅詩蘭黛小棕瓶精華 50ml │ 5 │ 0 │ 待發送│ [📧] │ ├──┼─────────┼─────────────────────────┼─────────┼────────┼───────┼──────┤ │☐ │ V002 │ 蘭蔻小黑瓶精華 30ml │ 3 │ 12 │ 已發送│ [📧] │ └──┴─────────┴─────────────────────────┴─────────┴────────┴───────┴──────┘ [全選] [反選] 已選 15 筆 [📧 發送選中項目] ``` ### 匯入對話框 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 📥 匯入缺貨資料 [X] │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 將 Excel 檔案拖曳至此 │ │ │ │ 或點擊選擇 │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ ████████████████████████░░░░░░░░░░ 65% │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ 正在解析第 650 / 1000 筆... │ │ │ │ [取消] [開始匯入] │ └─────────────────────────────────────────────────────────────────────────┘ ``` --- ## 🤖 AI 文案助手 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 🤖 AI 智能推薦 │ ├────────────────────────────────────┬────────────────────────────────────┤ │ 功能選擇 │ 生成結果 │ │ │ │ │ ○ 文案生成 │ ┌────────────────────────────────┐ │ │ ○ 熱門商品推薦 │ │ │ │ │ ○ 產品深度分析 │ │ 🎉 限時優惠！雅詩蘭黛小棕瓶 │ │ │ ○ 網路資訊搜尋 │ │ 修護您的肌膚問題✨ │ │ │ │ │ │ │ │ ───────────────────────────── │ │ 專櫃熱銷 NO.1 精華液 │ │ │ │ │ 深層導入 8 小時持續修護 │ │ │ 商品名稱: │ │ 立即入手享 85 折優惠 🛒 │ │ │ [雅詩蘭黛特潤超導精萃...] │ │ │ │ │ │ └────────────────────────────────┘ │ │ 文案風格: │ │ │ [吸睛 ▼] │ 生成耗時: 5.2 秒 │ │ │ Token: 輸入 120 / 輸出 85 │ │ AI 提供者: │ │ │ ○ Ollama (免費) │ [📋 複製] [⭐ 收藏] [🔄 重新生成] │ │ ○ Gemini (按量計費) │ │ │ │ │ │ 趨勢關鍵字: │ ───────────────────────────────── │ │ [✓] 保濕 [✓] 抗老 [ ] 美白 │ 生成歷史 │ │ │ ├─ 01-29 14:30 - 雅詩蘭黛... ⭐ │ │ [✨ 生成文案] │ ├─ 01-29 14:25 - 蘭蔻... │ │ │ └─ 01-29 14:20 - SK-II... │ └────────────────────────────────────┴────────────────────────────────────┘ ``` --- ## ⚙️ 系統設定 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ ⚙️ 爬蟲管理 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ 🕷️ 商品爬蟲 │ │ 📢 EDM 爬蟲 │ │ 📊 趨勢爬蟲 │ │ │ │ │ │ │ │ │ │ │ │ 狀態: 🟢 執行中 │ │ 狀態: 🔴 停止 │ │ 狀態: 🟢 執行中 │ │ │ │ 上次: 14:30 │ │ 上次: 13:00 │ │ 上次: 12:00 │ │ │ │ 下次: 15:30 │ │ 下次: - │ │ 下次: 18:00 │ │ │ │ │ │ │ │ │ │ │ │ [▶️ 執行] [⚙️ 設定] │ │ [▶️ 執行] [⚙️ 設定] │ │ [▶️ 執行] [⚙️ 設定] │ │ │ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────────────┤ │ 執行歷史 [重新整理] │ ├──────────┬────────────┬──────────┬──────────┬──────────┬────────────────┤ │ 時間 │ 任務 │ 掃描數 │ 新增數 │ 狀態 │ 備註 │ ├──────────┼────────────┼──────────┼──────────┼──────────┼────────────────┤ │ 14:30:00 │ 商品爬蟲 │ 5,576 │ 23 │ ✅ 成功 │ │ ├──────────┼────────────┼──────────┼──────────┼──────────┼────────────────┤ │ 13:30:00 │ 商品爬蟲 │ 5,553 │ 12 │ ✅ 成功 │ │ ├──────────┼────────────┼──────────┼──────────┼──────────┼────────────────┤ │ 13:00:00 │ EDM 爬蟲 │ 0 │ 0 │ ❌ 失敗 │ Chrome 初始化失敗│ └──────────┴────────────┴──────────┴──────────┴──────────┴────────────────┘ ``` --- ## 👤 用戶管理 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ 👤 用戶管理 [+ 新增用戶] │ ├─────────────────────────────────────────────────────────────────────────┤ │ 🔍 [搜尋用戶...] 角色: [全部 ▼] 狀態: [全部 ▼] │ ├──────┬──────────────┬───────────────────┬────────┬────────┬────────────┤ │ ID │ 帳號 │ 郵箱 │ 角色 │ 狀態 │ 操作 │ ├──────┼──────────────┼───────────────────┼────────┼────────┼────────────┤ │ 1 │ admin │ admin@wooo.work │ 管理員 │ 🟢 啟用│ [✏️][🔑][🗑️]│ ├──────┼──────────────┼───────────────────┼────────┼────────┼────────────┤ │ 2 │ manager01 │ pm01@wooo.work │ 管理者 │ 🟢 啟用│ [✏️][🔑][🗑️]│ ├──────┼──────────────┼───────────────────┼────────┼────────┼────────────┤ │ 3 │ user01 │ user01@wooo.work │ 用戶 │ 🔴 停用│ [✏️][🔑][🗑️]│ └──────┴──────────────┴───────────────────┴────────┴────────┴────────────┘ 共 3 位用戶 ``` --- ## 🔐 登入頁面 ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌───────────────────────┐ │ │ │ 🔵 WOOO │ │ │ │ Pro System 登入 │ │ │ ├───────────────────────┤ │ │ │ │ │ │ │ 帳號: │ │ │ │ [________________] │ │ │ │ │ │ │ │ 密碼: │ │ │ │ [________________] │ │ │ │ │ │ │ │ [🔐 登入] │ │ │ │ │ │ │ │ ⚠️ 錯誤次數: 2/5 │ │ │ │ │ │ │ └───────────────────────┘ │ │ │ │ © 2026 WOOO TECH │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` --- ## 📱 響應式設計 ### 手機版導航 ``` ┌───────────────────────────┐ │ 🔵 WOOO [☰] │ ├───────────────────────────┤ │ │ │ ┌─────────────────────┐ │ │ │ 商品看板 │ │ │ │ 活動看板 │ │ │ │ 分析報表 ▼ │ │ │ │ 廠商缺貨 │ │ │ │ 雲端匯入 │ │ │ │ 系統管理 ▼ │ │ │ └─────────────────────┘ │ │ │ └───────────────────────────┘ ``` ### 斷點設計 | 裝置 | 寬度 | 佈局 | |------|------|------| | 手機 | < 768px | 單欄 | | 平板 | 768-1024px | 雙欄 | | 桌面 | > 1024px | 多欄 |