← 回後台主控台
ChefsMate · POS → Flutter
UI 並排驗收
把現在的 POS App(Swift)跟正在重做的 Flutter 新版逐張並排。左邊是真機截圖、右邊是
Flutter 新版(假資料、免登入的預覽)。逐張看像不像,看完跟 AI 說哪張要調什麼。
左 = Swift 現役 App(真機)
右 = Flutter 新版(gallery 假資料)
⚠️ 兩邊資料不同(真機是當下店況、新版是示範假資料)→ 看的是版面/元件/顏色,不是同一筆資料
① 登入 / 選餐廳
登入頁 SignInView.swift
已對齊:logo、Google 藍鈕、Email 連結、條款。「以 LINE 繼續」本次已改成跟 Swift 一樣的啟用綠(#06C755)。
※ Swift 那張是全新模擬器抓的,所以上面壓了一個系統「通知權限」對話框(截圖工具點不掉),看版面就好。
📋 操作流程 / 說明書草稿
使用者怎麼操作
- 開啟 App → 進入登入頁。
- 點「以 Google 繼續」→ 跳系統瀏覽器完成 Google 登入 → 自動帶回 App 建立登入。
- 或點「以 LINE 繼續」(即將推出)。
- 或點「使用 Email 登入 / 註冊」→ 輸入 Email → 系統判斷此 Email 是否已有帳號。
- 登入成功 → 自動進入「選擇餐廳」。
判斷 / 邊界
- Email 已存在 → 顯示「登入」(輸入密碼);不存在 → 顯示「註冊」(設定密碼 + 確認)。
- 註冊密碼少於 6 碼、或兩次密碼不一致 → 擋住並提示。
- 忘記密碼 → 寄出重設連結。
流程來源:ChefsMateShared/UI/Auth/SignInView.swift(登入頁本回直接讀 Flutter login_page.dart 對照)
✓ 版面對齊
✓ LINE 鈕改啟用綠
功能 Phase C 才接(Google/LINE/Email)
選擇餐廳 WorkspaceSwitcherView.swift
Flutter 為 Stitch 重設計版,一次顯示三種卡片狀態:可進入(海邊小巫)、審核中、已停權。
Swift 真機
尚未抓到 Swift 基準圖
(要登入後才到得了,下次補)
📋 操作流程 / 說明書草稿
使用者怎麼操作
- 登入後 → 列出你加入的所有餐廳。
- 可進入的餐廳(active)→ 點卡片 → 進入該店主控台開始工作。
- 「搜尋並加入其他餐廳」→ 輸入店名搜尋 → 申請加入 → 等店家核准。
判斷 / 邊界
- 審核中(pending)→ 卡片變灰、顯示「申請審核中・等待店家核准」,不可點。
- 已停權(suspended)→ 卡片變灰、顯示「已停權」,不可點。
- 只有 active 的餐廳能被選為工作店家。
流程來源:ChefsMateShared/UI/Shared/WorkspaceSwitcher/WorkspaceSwitcherView.swift(Flutter 為 Stitch 重設計版)
✓ active / 審核中 / 停權 三狀態
待補 Swift 並排
② 主控台
主控台 POSMainControlView.swift
依並排調到一致:① 分頁列等寬塞滿、不切;② 桌位卡自適應撐滿整行(Swift 同套格子算法);③ 桌位中間的客人符號系統完整重做(徹底對照 Swift TableComponent + GuestCircleView 的 5 維狀態):訂位=圓形 / 散客(訪)=菱形、位置色(待確認金黃 / 已確認灰藍 / 待入座綠 / 遲到橘 / 用餐灰藍 / 超時紅…)、點餐 badge(紅=未出完 / 灰=已出完)、結帳 ✅、服務鈴 🔔💧💳、結帳中、待審核修改 ✎、N大M小人數;④ 底部訂位/候位改成可上拉下滑的抽屜(拖把手調高度)。
※ Swift 那張是當下即時店況(截圖時 5 桌全空);老闆手機晚點看到的「B/C 有訪客菱形」是真客人入座了,不是版面不同。Flutter 那張是假資料,1F 對齊真機(A 空、B·C 訪 2大、D·E 空),2F 故意擺滿各種狀態讓你一次看到所有符號。
📋 操作流程 / 說明書草稿 桌位狀態邏輯已對照原始碼
怎麼看這個畫面
- 頂部分頁切換功能:訂位 / 主控台 / 廚房 / 外場 / 菜單 / 戰情室 / LINE訂位 / 設定。
- 統計卡:一眼看 空桌、未出完餐、未結帳 各幾桌。
- 分區(1F / 2F…)顯示每桌的小卡,桌號 + 座位數。
- 底部抽屜:上拉看「訂位 / 候位」清單;點「+新增訂位」。
桌位中間的符號怎麼讀
- 形狀:圓形 = 訂位客人、菱形 = 散客(訪)。
- 顏色:待確認金黃 / 已確認灰藍 / 待入座綠 / 遲到橘 / 用餐灰藍 / 超時紅(閃)。
- 右上角數字:點餐狀態 — 紅 = 還有餐沒出完、灰 = 已全部出完。
- ✅ = 已結帳;🔔💧💳 = 服務鈴(呼叫 / 加水 / 結帳);✎ = 有待審核的修改。
- 中央文字 = 姓氏(散客顯示「訪」)+ 人數(如「2大」「3大1小」)。
操作
- 空桌點一下 → 開始入座 / 點餐。
- 已入座的客人圓圈點一下 → 繼續點餐 / 結帳。
- 浮動鈕:星星(會員集點)、拆桌、出店刪除(把客人拖到此)。
桌位狀態怎麼來的(已對照 TableStatusGate 原始碼)
- 沒有在座 → 空桌。
- 有在座、已超過用餐門檻分鐘 → 超時(最優先提醒)。
- 有在座、沒開單 → 已入座;有開單、餐全出完 → 已出餐;還有沒出完 → 已點餐。
- 已結帳是結帳完成後的明確結果(寫入結帳時間),不是用時間推的。
流程來源:POSMainControlView.swift + Components/TableComponent.swift + GuestCircleView.swift + 桌位狀態 Gate(lib/shared/gates/table_status_gates.dart,已單元測試)
✓ 分頁列等寬不切
✓ 桌卡自適應撐滿整行
✓ 客人符號系統(訂位⭕/散客◇ + 各狀態)
✓ 底部訂位/候位可拖拉抽屜
✓ 統計卡 / 營收條 / FAB
主控台 ・ 空狀態 POSMainControlView.swift
沒有桌位 / 尚未建立樓層時的空狀態。
Swift 真機
尚未抓到 Swift 基準圖
(真機目前有桌位,下次補)
③ 點餐 Order
點餐畫面(菜單格)POSOrderingView.swift
桌資訊 → 單點/套餐切換 → 分類膠囊 → 搜尋 → 菜單格。菜單卡狀態:已加入購物車(右上數量徽章 + 下方加減 + 藍框光暈)、套餐(左上橘標籤 + 子品項列)、剩 N 份(左下橘)、售完(黑遮罩紅標)、素食徽章。購物車是右上角圖示 → 開全螢幕購物車頁。
Swift 真機
尚未抓到 Swift 基準圖
(需在桌況點桌進入點餐,下次補)
📋 點餐操作流程 / 說明書草稿 流程已對抗式驗證
怎麼點一桌的餐
- 畫面最上方顯示桌號與人數;若該桌有預約獎勵,會跳紫色提示(已自動帶入廚房,不需在此加點)。
- 店家同時有單點與套餐時,會出現「單點 / 套餐」切換(只有單點時不顯示)。
- 用分類膠囊(可左右滑)切換分類,「全部」為預設,膠囊上顯示該分類品項數。
- 搜尋欄輸入關鍵字即時過濾;點 X 清除。
- 點卡片圖片 → 開該品項詳情;點右下「+」加入購物車。
- 若品項有選項(辣度/份量)→ 先跳「客製選項」彈窗選完才加入。
- 加入後卡片右上出現數量徽章、亮起藍框,下方「- 數量 +」浮現;歸 0 即移出。
- 套餐卡(左上橘「套餐」標籤)加入時,若有更划算的升級套餐 → 跳「升級套餐」確認。
- 點右上購物車圖示 → 全螢幕購物車:逐項加減、看小計、套餐可「更換」組件、可「清空」。
- 按底部「送出訂單 (N 項) $金額」送單(預點餐情境為「送出預點餐」)。
- 若有低消且未達標 → 跳「低消提醒」,可「仍要送出」或「返回修改」。
流程來源:POSOrderingView.swift(已對抗式驗證,verify accurate)
✓ 菜單格 + 卡片各狀態
✓ 單點/套餐 + 分類 + 搜尋 + 購物車鈕
購物車頁 / 客製 / 套餐升級 sheets 量產中
待補 Swift 並排
③ 點餐 ・ 購物車 + 彈窗(Flutter 新版)已照 Swift spec 1:1
這些是點餐流程裡的購物車與各彈窗,已照 Swift 規格做出來(假資料)。Swift 真機並排需從桌況點桌進到該流程才截得到,下次補。對應操作流程見下方「完整流程」。
✓ 購物車(含套餐組成 + 加購)
✓ 客製選項 sheet
✓ 套餐換品項 sheet
✓ 升級套餐對話框
待補 Swift 並排
③ 點餐 ・ 完整流程(含各彈窗)Order 區 7 支 Swift 檔・已驗證
以下流程全部對照原始碼 + 對抗式驗證過,可直接當使用說明書。對應的 Flutter 彈窗 UI 正依序量產(做好會在上方補截圖)。
🛒 購物車 + 送單 已驗證
- 加入購物車:有選項先彈客製 sheet;單品若有更貴的對應套餐先彈「升級套餐」。
- 加入時即時扣當日供應量(品項 + 所屬分類;套餐連同每個組件一起扣),供應不足無法加入。
- 同品項同選項自動合併數量;加購組合以一筆 deal 計。
- 右上購物車圖示 → 全螢幕購物車:縮圖、單價、選項、套餐組件、小計。
- -/+ 調量;減到 0 移除該列(一般品項回補供應量,含預約獎勵會釋放當日 quota)。
- 套餐組件可「更換」→ 開更換彈窗,差價依餐廳「更換價格政策」算(換便宜不退差等)。
- 底部即時「總計 $金額」→ 按送單(一般「送出訂單」/預點「送出預點餐」)。
- 低消未達標先跳「低消提醒」(差多少/缺哪類),可「仍要送出」或「返回修改」。
- 成功:一般模式建立 Order/OrderItem 送廚房;預點模式上傳 pre_orders。清空購物車、通知主控台/廚房、關閉點餐頁。
POSOrderingView.swift(submitOrder / executeSubmitOrder 各路徑)
🍱 套餐(選擇 / 升級 / 換品項) 已驗證
- 切到「套餐」分頁(店家有設定套餐才看得到),卡片下方列出套餐子品項。
- 加單品時若有對應更貴套餐 → 跳「升級為套餐更划算」:可「升級套餐 $價」或「維持單點」。
- 套餐加入購物車後,那一列展開列出所有組成品項。
- 可更換的組件後面有橘色「更換」鈕 → 開「更換品項」彈窗。
- 彈窗可搜尋或從同分類可替換品項挑一個;右邊顯示要補(+$ 紅)或退(-$ 綠,依政策)的差價。
- 想換回 → 彈窗按「恢復原品項」。
- 送單時套餐展開成多個獨立廚房品項(共用 comboGroupId);被換的組件在備註寫「原:A → B」。
POSOrderingView.swift(comboUpgrade / ComboSwapSheet / comboSwapPricePolicy)
⚙️ 客製選項 sheet 已驗證
- 點有適用選項的品項 → 開客製 sheet(頂部縮圖/品名/原價)。
- 各選項依序列出:單選=點了覆蓋同組其他;多選=可多選到上限,達上限再點無反應。
- 金額即時更新:(原價 + 已選加價)× 數量;底部加減調數量(最少 1)。
- 所有「必選」都選了之後,「加入購物車」才會亮起。
- 按「加入購物車」→ 依數量把同份選項加進車並關閉;或「取消」不加入。
MenuItemOptionSheet.swift
⚠️ 點到「已佔用桌」 已驗證
- 把訂位安排到「仍有未結帳客人」的桌 → 先彈桌位衝突 sheet。
- 上方橘色警告說明要把哪位客人(含人數)安排到哪桌、該桌還有未結帳客人。
- 中間列出該桌目前每組客人:姓名、人數、入座時間、已坐幾分鐘。
- 三選一:「選其他桌」回重挑桌 /「強制入座(前組視為同桌)」 /「取消」不處理。
TableOccupiedSheet.swift
✎ 訂單修改審核 sheet 已驗證
- 從訂單/通知開啟,傳入一筆待審核修改(客人請求/店家修改)。
- 頂部顯示來源、狀態、共幾項、多久前送出。
- 逐項看改了什麼:數量 2→3、新增 x1、移除、備註改、選項變更、替換為 XX、🎁 兌換獎勵變更…
- 待審核才會出現底部「拒絕修改 / 核准修改」;非待審核只能查看。
- 核准 → 呼叫後端套用 → 跳結果(全部成功/部分成功列出失敗項)。
- 拒絕 → 先填(選填)原因 → 確認拒絕 → 跳結果。按「確定」關閉。
OrderModificationReviewSheet.swift
📲 預點餐 → 轉現點 已驗證
- 候位區點訂位 → 選「先點餐」(店員代客,標題顯示「預點-姓名」、無桌位)或「自助先點餐」(產生 QR 給客人自己掃碼預點)。
- 照常選分類、加菜(支援單點/套餐/加購)→ 按「送出預點餐 (N 項) $金額」。
- 寫到雲端 pre_orders + pre_order_items,訂位標記「已預點」,主控台跳「預點餐已送出」。
- 訂位詳情可看橘色「已點餐」+ 預點明細。
- 客人到店、把訂位「安排入座」到某桌 → 系統自動把預點品項(+ 預約兌換獎勵)轉成真正廚房訂單送廚房。
- 轉換完成 pre_order 狀態改 converted_to_order(防重複);失敗則跳「預點訂單轉換失敗」請店員手動點餐。
POSOrderingView.swift + Services/PreOrderConversionService.swift + SeatingService.swift
④ 出餐 KDS
出餐控台(依座 / 依品)ExpediteKitchenView.swift
廚房 iPad 橫式雙欄:左可出餐區(綠)/右準備區(橘)。卡片粒度由設定切換 —— 依座(一桌一卡,桌號+等候色階+品項列+出餐/稍等)或依品(一道菜一列)。急單紅框、站別色條、催單三角、座號、改單紫標。底部懸浮工具列:縮放/全部出餐/復原/語音控單。
Flutter 新版・依座(假資料)
Flutter 新版・依品(假資料)
📋 出餐操作流程 / 說明書草稿 流程+計時色階已對抗式驗證
怎麼出餐
- 畫面分兩區:準備區(等指示)與可出餐區(已可製作/出餐)。
- 把準備區的菜「移到可出餐區」:單道、整桌、或「全部可做」一次全移(播『登!』音)。移錯可往回移。
- 插隊:「設為優先製作」丟到最前;「排在某桌之後」;「下一桌」依最早下單整桌移過去(FIFO);「這張單最後做」壓到墊底。
- 「催單」→ 標紅框、強制移到可出餐區、排到最前(並背景通知 server)。
- 做好按綠勾「出餐」:需外場送 → 變「做好等送」播『叮』鈴;不需外場送 → 直接「已送到桌」。
- 按錯了按「復原」可整批還原上一步(最多 30 步)。
等候時間色階(已對照原始碼)
- 每張卡顯示「下單到現在」的分鐘數,自動變色:≥30 分 紅、≥15 分 橘、其餘正常(依座綠/依品灰)。越久越紅。
ExpediteKitchenView.swift + ExpediteOrderCard/ExpeditePerDishCard.swift + ExpediteActionManager.swift(已對抗式驗證)
✓ 雙欄可出餐區/準備區
✓ 依座 + 依品 兩模式
✓ 計時色階 + 急單/站別/改單標記
✓ 懸浮工具列
待補 Swift 並排
語音控單 overlayExpediteVoiceOverlay.swift
廚房手忙時用「講的」控單:點麥克風 → 說指令 → 系統即時辨識、解析、執行,並用語音回讀結果。
📋 語音控單流程 / 說明書草稿 已對抗式驗證
- 點麥克風 → 要語音辨識權限(沒給就提示去設定開)。
- 開始聆聽,畫面即時把你說的話轉成文字。
- 說中文指令(例「A桌可以做了」「B桌牛排先做」「全部可以做」「下一桌」「暫停出餐」)→ 系統辨識出指令顯示綠色預覽。
- 停說 2.5 秒自動完成;預設「自動執行」直接做,或關掉自動、按「執行」再做。
- 執行後用語音唸出結果(如「已將 3 道餐點移到可出餐區」);找不到對應餐點會唸「找不到匹配的餐點」。
- 說「結束/關閉/停止」或按「結束」可關閉;按「重說」重新講。
ExpediteVoiceOverlay.swift + SpeechRecognitionService.swift + ExpediteActionManager.swift(已對抗式驗證)
✓ 麥克風脈動 + 即時轉文字
✓ 指令預覽 + 範本 + 結束/執行/重說
語音辨識本身 Phase C 接
⑤ 結帳 Checkout
結帳大廳(全額 / 現金收款 / 全部付清)POSMainControlView.swift · CheckoutSheet
結帳主畫面,單欄長捲頁(無 iPad/iPhone 分欄):貴賓摘要 → 會員獎勵提醒(客人已用過的獎勵,紫卡提醒店員告知已扣點/折抵)→ 結帳方式(全額/分帳/按餐點)+客人端監看 → 訂單摘要(單點一列、套餐成一張分組卡,含換品項差價 +紅/-綠)→ 折扣(無/百分比/固定金額)→ 優惠券(未達門檻擋住)→ 服務費(預設 10%)→ 金額總結(小計 − 折扣 + 服務費 − 訂金折抵 = 訂單總額;部分付清顯示已結/剩餘)→ 付款方式(線上付款橘+現金收款;現金展開數字盤:收取金額、「剛好 $X」、台灣常用面額快捷含找零、應找零)→ 發票(發票內容/載具類型/統編)。付清後改顯示綠色「全部付清」橫幅+集點+傳送明細連結給客人。
📋 結帳操作流程 / 說明書草稿 已對抗式驗證
怎麼結一桌的帳
- 主畫面點桌 → 結帳,進結帳大廳。頂部顯示桌號/人數;若客人用過會員獎勵,跳紫色「結帳提醒」(提醒店員告訴客人已扣 N 點、折抵 $X)。
- 選結帳方式:全額結帳 / 分帳(除以大人數/總人數/自訂人數/按點餐人)/ 按餐點結帳(勾選要結的餐點)。
- 看訂單摘要:單點一列;套餐成一張分組卡(含子品項、換品項差價 +紅/-綠)。已結的品項會劃線並標「已結帳」。
- 加折扣(百分比/固定金額)、選優惠券(未達門檻會擋住、標「未達門檻」)、視需要加收服務費(預設 10%)。
- 金額即時算:小計 − 折扣 + 服務費 − 訂金折抵 = 訂單總額;部分付清時顯示「已結金額/剩餘金額」。
- 收款:線上付款(出 QR 給客人掃,藍新金流)或 現金收款(展開數字盤:輸入收取金額、按「剛好 $X」、台灣常用面額一鍵帶入+自動算找零、顯示應找零,按「確認收款」)。
- 開發票:選發票內容(逐項列出/只寫餐費)、載具類型(手機條碼/自然人憑證/捐贈碼/列印)、可填統一編號。
- 全部付清 → 綠色「全部付清」橫幅:可掃會員 QR 發點數、傳送明細連結給客人、回到主畫面。
CheckoutSheet(POSMainControlView.swift)+ CheckoutTypes.swift(已對抗式驗證)。⚠️ 球員證/會員優惠折扣 sheet 在 Swift 端目前 feature flag 關閉,本輪先不重建。
✓ 長頁:摘要/折扣/優惠券/服務費/總結/付款/發票
✓ 現金數字盤+台灣常用面額+找零
✓ 全部付清橫幅+集點
待補 Swift 並排
結帳 ・ 各付款與發票 sheet(Flutter 新版)Checkout/Views/* · 已對抗式驗證
結帳流程裡彈出的各 sheet,已照 Swift 規格 1:1 做出來(假資料)。Swift 真機並排需從桌況進到該流程才截得到,下次補。
📋 各 sheet 用途 / 流程 已對抗式驗證
- 信用卡付款:金額卡+ TapPay 卡片表單(卡號/到期/CCV)+確認付款。⚠️ Tap to Pay 因 Apple 帳號限制暫關,固定走手動輸入。
- 線上結帳 QR:出 QR 給客人手機掃結帳;收到付款通知即切換「付款成功」綠勾。可分享連結。
- 客人端結帳監看:分帳時店員即時看一桌每位客人的付款狀態(已線上付款/已收現金/處理中/未付款),可代收現金、重發 QR、刷載具;全員付清可關桌。
- 點數要給誰:結帳人非會員時,問要不要把點數累積給同桌會員(列候選人);或出 QR 請客人自己加入會員。
- 刷載具:相機掃客人手機發票載具(手機條碼/自然人憑證)→ 辨識後確認綁定到這筆結帳。
CreditCardPaymentSheet / CheckoutQRCodeSheet / CustomerCheckoutMonitorSheet / LoyaltyChooseSheet / CarrierScannerSheet(皆已對抗式驗證)。
✓ 信用卡付款
✓ 線上結帳 QR(等待/成功)
✓ 客人端監看(4 狀態)
✓ 選會員給點+刷載具
待補 Swift 並排