羽毛球分組配對器

這是一個使用 React + Vite + TypeScript 製作的網頁應用程式，用來將 A 區與 B 區成員配成羽毛球隊伍。

功能說明

• 分別輸入 A 區與 B 區名單
• 可指定要寫入資料庫的目標日期
• 每次固定產生 3 組完整配對結果
• 每一隊都由 1 位 A 區 + 1 位 B 區 組成
• 每一組都會把 A 區與 B 區名單完整分配完成
• 若某一區人數不足，系統會自動補入「那個」
• 產生配對後可用按鈕手動上傳資料到資料庫
• 若指定日期已經有資料，上傳前會先詢問是否覆蓋
• 可讀取指定日期的資料庫內容並回填到畫面
• 若指定日期沒有資料，畫面會顯示「指定日期沒有資料」
• 組隊結果產生後可一鍵主動推播到指定 LINE 對話
• 支援換行、半形逗號、全形逗號與頓號輸入
• 會自動去除空白與重複名稱

操作流程

1. 輸入 A 區與 B 區名單
2. 按下 產生三組配對
3. 選擇 目標日期
4. 按下 上傳資料 將資料寫入 DB
5. 若需要，可按 讀取指定日期 載回既有資料
6. 組隊結果顯示後，可按 推送到 LINE

使用方式

npm install
npm run dev

前端開發網址預設為：

http://localhost:3500

推播到 LINE 時，會直接使用 Flex Message 主動送到指定對話，格式參考既有 line-bot-ts 羽球查詢結果樣式。 若指定日期尚未上傳資料，系統會先提示你上傳後再推播。

LINE 推播目標支援分成兩組：

• LINE_TARGET_ID_LOCAL: 本地測試用對話
• LINE_TARGET_ID_PROD: 正式環境用對話
• LINE_TARGET_MODE: local 或 prod

當系統偵測目前為 local 模式時，頁面右上角會顯示「測試環境」標籤。 正式環境 prod 不會顯示這個標籤。

資料庫欄位

• time: 目標日期，格式為 YYYYMMDD
• personnel: 人員清單，格式為 [[1,"A區成員"],[0,"B區成員"]]
• battlecombination: 三組隊伍搭配，格式為 {"0":[["A","B"]],"1":[...],"2":[...]}

正式建置

npm run build

Docker 部署

這個專案已提供單容器部署方式，容器啟動後會同時提供：

• 網頁前端
• /api 後端
• MariaDB 寫入功能

建立映像

docker build -t badminton-match-hub .

啟動容器

docker run -d \
  --name badminton-match-hub \
  -p 3500:3500 \
  -e PORT=3500 \
  -e DB_HOST=192.168.0.15 \
  -e DB_PORT=3307 \
  -e DB_USER=jianmiau \
  -e DB_PASSWORD=你的密碼 \
  -e DB_DATABASE=badminton \
  -e DB_TABLE=badminton \
  badminton-match-hub

NAS 上建議設定

• 容器埠使用 3500
• 對外埠可自訂，例如 3500:3500
• 環境變數請在 NAS 的 Docker 介面中填入
• 不要把本機 .env 直接打包進映像

部署完成後可直接透過：

http://NAS_IP:3500

開啟系統。

docker-compose

專案也已提供 docker-compose.yml。

docker compose up -d --build

Compose 版本預設會：

• 對外使用 3500
• 容器內部使用 3500
• 讀取 .env 內的資料庫設定
• 預設使用 LINE_TARGET_MODE=prod
• 推播到 LINE_TARGET_ID_PROD

也就是說，在 NAS 上直接執行：

sudo docker compose up -d --build

就會以正式環境方式啟動。

請先確認 .env 至少有以下設定：

LINE_CHANNEL_ACCESS_TOKEN=你的token
LINE_TARGET_ID_LOCAL=你的測試對話ID
LINE_TARGET_ID_PROD=你的正式對話ID

部署後可透過：

http://NAS_IP:3500

開啟系統。