1b4f3a7bbe
Some checks failed
CD Pipeline / deploy (push) Failing after 59s
- 建立 Gitea Actions CD pipeline (.gitea/workflows/cd.yaml) - 部署模式: rsync Python 檔案至 188 → docker restart (volume mount) - Dockerfile/requirements 變動時自動重建 Docker image - 部署通知: Telegram (開始/成功/失敗) - 健康檢查: https://mo.wooo.work/health (最多 5 次重試) - 同步最新 CLAUDE.md / ADR-008 / memory (2026-04-19) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
313 lines
28 KiB
Markdown
313 lines
28 KiB
Markdown
# 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 | 多欄 |
|