返回儀表板

部署指南

愛嬌青春POS 儀表板的部署設定與每月更新流程

目錄
一、首次部署（只需做一次） 二、每月更新流程 二之一、事後補傳或局部更新 三、URL 參數 四、管理者功能說明 五、注意事項

一、首次部署（只需做一次）

第 1 步：初始化 Git 並推送到 GitHub

cd "/Users/terrelyeh/Documents/Aikyo POS"

git init
git add index.html
git commit -m "初始部署"

# 建立私人 GitHub repo 並推送（需已登入 gh CLI）
gh repo create aikyo-dashboard --private --source=. --push

完成後取得 GitHub repo 網址：https://github.com/terrelyeh/aikyo-dashboard

第 2 步：在 Cloudflare Pages 建立專案

  1. 前往 pages.cloudflare.com 並登入
  2. 點擊「Create a project」→「Connect to Git」
  3. 授權連接 GitHub，選擇 aikyo-dashboard repo
  4. 設定如下：
設定項目填入值
Production branchmain
Build command（留空）
Build output directory（留空）

5. 點擊「Save and Deploy」，完成後取得網址：https://aikyo-pos.pages.dev

第 3 步：產生 GitHub Personal Access Token

用於「發布」功能，讓儀表板可以直接 push 到 GitHub。

ⓘ

為什麼需要 Token？

儀表板的「發布」功能是直接從瀏覽器呼叫 GitHub API，把更新後的 index.html 推送到 GitHub repo。但 GitHub 不允許匿名寫入 — 你需要一個 Token 來證明「我有權限推程式碼到這個 repo」。

流程：瀏覽器 → GitHub API（Token 驗證）→ repo 更新 → Cloudflare 自動部署

  1. GitHub → 右上角頭像 → Settings
  2. 左側底部 → Developer settings → Personal access tokens → Fine-grained tokens
  3. Generate new token，設定：
    • Token name：Aikyo Dashboard Deploy
    • Repository access：Only select repositories → aikyo-dashboard
    • Permissions → Contents：Read and write
  4. 產生後立刻複製（只顯示一次）
➤

安全性說明：Fine-grained Token 只能存取你指定的 repo，不能刪除 repo 或改設定。Token 只存在瀏覽器的 sessionStorage 裡，關閉分頁就自動清除，不會存到硬碟或傳到其他地方。每次開新分頁第一次發布時需要重新貼上。

二、每月更新流程

每次有新月份的資料時，依照以下三個步驟操作：

步驟 A：從 POS 匯出報表

從電小二（Vital+）POS 後台匯出以下報表，存放到對應資料夾：

#報表類型POS 匯出檔名存放資料夾必要性需要前處理？
①每日營業報告Business_Report_*.csv營運報表/必填不需要，直接上傳
②支付方式明細Business_Report_order_type_*.csv付款方式/必填不需要，直接上傳
③品項統計*_品項統計_*.csv品相銷售統計/必填不需要，直接上傳
④銷售日報表*_Orders_銷售日報表.xlsx銷售日報表/選填需要（見步驟 B）
ⓘ

①②③ 從 POS 匯出後就是 CSV 格式，可以直接上傳到儀表板。④ 匯出的是原始訂單 Excel（.xlsx），需要先轉換成每日品項數量的格式。

步驟 B：前處理銷售日報表（僅 ④ 需要）

POS 匯出的銷售日報表是「每筆訂單的原始記錄」，但儀表板需要的是「每日各品項的銷售數量」。這個轉換由 Claude Code 的 sales-report-parser skill 自動完成。

操作方式：

  1. 開啟 Claude Code
  2. 告訴它你要處理銷售日報表，並提供檔案路徑，例如：
幫我整理這份銷售日報表：銷售日報表/2026-03-01-2026-03-31_Orders_銷售日報表.xlsx
  1. Skill 會自動產生兩個檔案（放在同一個資料夾）：
    • *_銷售日報表.csv ← 上傳這個到儀表板
    • *_銷售日報表.xlsx（格式化版本，可留作備份）
➤

如果不想上傳銷售日報表，可以跳過步驟 B。 銷售日報表是選填的，沒有它儀表板的其他圖表都能正常運作，只是「品項份數趨勢圖」不會有資料。

步驟 C：上傳並發布

① 用瀏覽器開啟：https://aikyo-pos.pages.dev?admin
② 點「＋ 新增月份」，上傳 CSV 檔案：
① 每日營業報告（必填，POS 直接匯出的 CSV）
② 支付方式明細（必填，POS 直接匯出的 CSV）
③ 品項統計（必填，POS 直接匯出的 CSV）
④ 銷售日報表（選填，步驟 B 產生的 CSV）
③ 確認資料無誤後，點「發布」
④ 首次使用需輸入 GitHub Token（之後同一個分頁自動記住）
⑤ 約 30 秒後 Cloudflare 自動部署完成
ⓘ

備用方式：若「發布」無法使用，可點「下載備用」下載 index.html，手動覆蓋原檔後執行 git add index.html && git commit -m "..." && git push

二之一、事後補傳或局部更新

若當月銷售日報表比其他報表晚到，可以單獨補傳：

① 開啟 https://aikyo-pos.pages.dev?admin
② 找到已存在的月份，點「✎ 編輯」
③ 只上傳要更新的檔案（其餘留空，原有資料不會被清除）
④ 點「發布」

三、URL 參數

用途網址格式
一般瀏覽（預設開最新月）https://aikyo-pos.pages.dev
管理者模式https://aikyo-pos.pages.dev?admin
指定月份https://aikyo-pos.pages.dev?month=2026-02
指定年度趨勢總覽https://aikyo-pos.pages.dev?year=2026
管理者＋指定月份https://aikyo-pos.pages.dev?admin&month=2026-02
ⓘ

若 ?month 與 ?year 同時存在，?month 優先。

四、管理者功能說明

按鈕功能
＋ 新增月份上傳 CSV 新增月份資料
發布直接 commit push 到 GitHub，Cloudflare 自動部署
通知模板自動產生 LINE / Email 分享模板，跟隨當前頁籤
分享複製當前頁面的深度連結（含標題）
下載備用下載更新後的 index.html（備用）
?使用說明（含 URL 參數說明）

五、注意事項

愛嬌青春POS 儀表板 · 部署指南