金華APP 網站化開發說明書（需求分析與技術規格）

目標：將既有 PDF 流程落地為可上線的 Web 產品（行動優先，桌機相容）。以下文件面向工程團隊，包含資訊架構、關鍵流程、資料模型、API 草案、UI/互動規範、非功能需求、分析事件與風險假設。

1. 產品範疇（Scope）

核心模組

首頁 + 快速清單（GO想/食/學/創/照、留言板、關於我們、設定），含公告跑馬燈與活動輪播。

金華APP 首頁、快速清單

GO食：餐廳清單、搜尋、收藏、距離導地圖、無限捲動。底部固定 CTA：共餐活動 / 發起共餐 / 收藏店家。

金華APP GO食

共餐活動（狀況1：單一餐廳）：活動列表→單店點餐→加入共餐→參加中共餐視圖。

金華APP GO食-共餐活動 狀況1

共餐活動（狀況2：多餐廳投票）：活動列表（可投票）→投票→選餐→加入共餐→參加中共餐。

金華APP GO食-共餐活動 狀況2

發起共餐（狀況1：單店）：選擇餐廳→設定日期/地點/權限→設定菜色→產生邀請連結→發起人管理（投票截止/取消/延長/收單與名單輸出）。

金華APP GO食-發起共餐 狀況1

發起共餐（狀況2：多店投票+同票決策）：多店設定→投票→同票由發起人決定→後續管理/收單/名單輸出。

金華APP GO食-發起共餐 狀況2

非目標（本階段不做）
即時聊天、後台 CMS（僅需基本資料維運 API 與管理頁即可）。

2. 使用者與權限

一般使用者（訪客/登入）：瀏覽餐廳、搜尋、收藏、參與或投票/點餐、依連結加入私人共餐。

金華APP GO食

金華APP GO食-共餐活動 狀況2

發起人：可建立共餐（公開/私人）、設定餐點與時程、產生邀請連結、查看與管理票數、延長投票、取消共餐、收單與輸出名單。

金華APP GO食-發起共餐 狀況1

金華APP GO食-發起共餐 狀況2

私人活動需透過「邀請連結」參與，權限以連結控管。

金華APP GO食-發起共餐 狀況1

3. 資訊架構（IA）與導覽規格

首頁：Title/Icon、通知鈴、公告跑馬燈（pt.54）、活動/照片輪播、六大入口（GO想/食/學/創/照/個人）。

金華APP 首頁、快速清單

快速清單：與首頁相同入口的清單式捷徑。

金華APP 首頁、快速清單

GO食：Title 置換為搜尋列；餐廳卡含照片輪播、店名/特色（過長可滾動）、營業時間、營業狀態（綠=營業中/紅=休息）、距離（可導地圖）、收藏（空心/實心）；列表下捲自動載入；底部三鍵固定。

金華APP GO食

共餐活動列表：顯示地點、人數/投票人數、日期、時間、公開/私人（黃燈）、已結束（紅燈）；點擊卡片入詳情。

金華APP GO食-共餐活動 狀況1

金華APP GO食-共餐活動 狀況2

參加中共餐：集中顯示使用者已參與的活動。

金華APP GO食-共餐活動 狀況1

4. 關鍵流程（E2E User Flows）
4.1 GO食清單與互動

進入 GO食→Title 變搜尋列→輸入關鍵字過濾→下捲無限載入→點距離開啟地圖→點收藏切換狀態→底部 CTA 固定顯示/切換「已收藏店家」。

金華APP GO食

4.2 共餐活動（單店）

GO食底部「共餐活動」→活動列表（公開/私人/已結束狀態燈號）→詳情→店家菜單→選擇菜色→按「加入共餐」→2 秒彈窗「加入成功」→返回活動列表→「參加中共餐」檢視已參與活動。

金華APP GO食-共餐活動 狀況1

4.3 共餐活動（多店投票）

活動列表（顯示投票中/可投票）→投票頁（先選餐廳，再選菜色）→「投票成功」2 秒彈窗→導向選餐頁→完成加入→「參加中共餐」。

金華APP GO食-共餐活動 狀況2

4.4 發起共餐（單店）

GO食底部「發起共餐」→發起頁：選單一餐廳、公開/私人（單選）、日期/時間（30 分粒度）、投票截止日/時間、地點、備註→餐點設定（主菜/配餐/備註，可+項）→確認發起→彈窗「成功」+顯示邀請連結→進入「發起人管理」。

金華APP GO食-發起共餐 狀況1

管理頁可：產生/複製連結、觀看票數（餐廳/餐點票數圖表式清單）、投票截止（跳投票結果）、延長投票、取消共餐、收單送出→產生清單（JPEG/PDF）。

金華APP GO食-發起共餐 狀況1

4.5 發起共餐（多店 + 同票處理）

多店投票配置與單店相同，但可加入多家餐廳→若投票同票，由發起人於結果頁選擇最終餐廳，未選定前「收單送出」不可按→選定後進入結果頁並可後續操作（延長/取消/收單/輸出）。

金華APP GO食-發起共餐 狀況2

5. 互動與 UI 規格（可視化行為）

狀態燈號：營業中=綠、休息=紅；私人=黃；已結束=紅。

金華APP GO食

金華APP GO食-共餐活動 狀況1

金華APP GO食-共餐活動 狀況2

文案過長處理：店名/特色/資訊以「可水平滾動」顯示。

金華APP GO食

彈窗/Toast：加入餐廳/餐點/共餐/投票成功，約 2 秒自動關閉。

金華APP GO食-共餐活動 狀況1

金華APP GO食-共餐活動 狀況2

金華APP GO食-發起共餐 狀況1

底部固定 CTA：GO食內固定三鍵；「已收藏店家」為情境切換。

金華APP GO食

地圖導向：點擊距離開啟地圖 App/網頁。

金華APP GO食

列表載入：向下捲動即刻抓取新資料（無限捲動）。

金華APP GO食

6. 資料模型（Domain Model，草案）

建議以關聯式資料庫（PostgreSQL/MySQL）設計，必要欄位示意。

User：id, name, phone(optional), role(enum: user, initiator), created_at

Restaurant：id, name, tags[], photos[], hours, status(enum open/closed), location(lat,lng), distance(cache), phone …（供地圖/顯示）

金華APP GO食

Favorite：user_id, restaurant_id, created_at（唯一鍵：user+restaurant）

金華APP GO食

MealOption：id, restaurant_id, title, main, side, note（對應餐點設定）

金華APP GO食-發起共餐 狀況1

Event（共餐）：id, initiator_id, type(enum: single,multi), visibility(enum: public, private), place, date, time, vote_deadline_at, status(enum: open, voting_closed, finalized, canceled, ordered), chosen_restaurant_id(nullable), invite_token（生成連結用）

金華APP GO食-發起共餐 狀況1

金華APP GO食-發起共餐 狀況2

EventRestaurant：event_id, restaurant_id（多店場景）

金華APP GO食-發起共餐 狀況2

EventDish：event_id, restaurant_id, meal_option_id（供選餐統計）

金華APP GO食-發起共餐 狀況1

EventVote：event_id, user_id, restaurant_id, meal_option_id, created_at（投票或單店點餐紀錄）

金華APP GO食-共餐活動 狀況2

Participation：event_id, user_id, joined_at（加入共餐後）

金華APP GO食-共餐活動 狀況1

Announcement：id, title, body, order, active（跑馬燈）

金華APP 首頁、快速清單

Banner：id, image_url, link_url, order, active（活動/照片輪播）

金華APP 首頁、快速清單

7. API 介面（REST/JSON，草案）

路徑以 /api 起始；皆回傳 { data, error }。

首頁/快速清單
GET /home（公告/輪播/入口）

金華APP 首頁、快速清單

餐廳
GET /restaurants?query=&page=（支援無限捲動）；GET /restaurants/:id；POST /restaurants/:id/favorite（toggle）。

金華APP GO食

地圖
客端以 geo:/Google Maps URL 開啟（僅產生導航連結）。

金華APP GO食

共餐活動
GET /events?type=single|multi&status=&page=（列表）

金華APP GO食-共餐活動 狀況1

金華APP GO食-共餐活動 狀況2


GET /events/:id（詳情+餐廳/菜單）
POST /events/:id/join（加入共餐；單店需帶 meal_option_id）

金華APP GO食-共餐活動 狀況1


POST /events/:id/vote（多店投票→可導向選餐）

金華APP GO食-共餐活動 狀況2


GET /me/events（參加中共餐）

金華APP GO食-共餐活動 狀況1

發起共餐
POST /events（建立：type、visibility、date/time、deadline、place、note、restaurants[]）

金華APP GO食-發起共餐 狀況1

金華APP GO食-發起共餐 狀況2


POST /events/:id/meals（餐點設定新增/更新）

金華APP GO食-發起共餐 狀況1


GET /events/:id/dashboard（發起人管理總覽：票數/名單）

金華APP GO食-發起共餐 狀況1


POST /events/:id/finalize（投票截止→結果）

金華APP GO食-發起共餐 狀況1


POST /events/:id/extend_deadline（延長投票）

金華APP GO食-發起共餐 狀況1


POST /events/:id/cancel（取消共餐）

金華APP GO食-發起共餐 狀況1


GET /events/:id/invite_link（產生/刷新邀請連結，回傳 token/URL）

金華APP GO食-發起共餐 狀況1


POST /events/:id/choose_tie（同票時由發起人選擇）

金華APP GO食-發起共餐 狀況2


POST /events/:id/lock_and_export（收單送出並產生名單 PDF/JPEG；鎖定變更）

金華APP GO食-發起共餐 狀況1

金華APP GO食-發起共餐 狀況2

8. 前端技術與互動實作

技術選型：React/Next.js（支援 CSR+SSR 混合）、TypeScript、Tailwind。

狀態管理：React Query（清單無限捲動、快取/重新抓取）。

金華APP GO食

地圖：以 URI/Google Maps Web 連結開啟外部導覽。

金華APP GO食

可用性：行動優先；彈窗/Toast 2 秒自動關閉；無限捲動帶骨架屏。

金華APP GO食-共餐活動 狀況1

金華APP GO食-共餐活動 狀況2

無障礙：鍵盤可達、ARIA 標籤、對比度檢核。

i18n：預留多語系（繁中預設）。