新增歷史戰績刪除功能並更新 README

src/pages/HistoryPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { loadHistoryList } from '../lib/api'
+import { deleteHistoryItem, loadHistoryList } from '../lib/api'
 import type { HistoryListItem } from '../types'
 
 export function HistoryPage() {
@@ -7,6 +7,7 @@ export function HistoryPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
   const [selectedItem, setSelectedItem] = useState<HistoryListItem | null>(null)
+  const [deletingId, setDeletingId] = useState<number | null>(null)
 
   useEffect(() => {
     let active = true
@@ -28,7 +29,7 @@ export function HistoryPage() {
           return
         }
 
-        setError(fetchError instanceof Error ? fetchError.message : '無法讀取歷史戰績。')
+        setError(fetchError instanceof Error ? fetchError.message : '讀取歷史戰績失敗。')
       } finally {
         if (active) {
           setLoading(false)
@@ -43,6 +44,29 @@ export function HistoryPage() {
     }
   }, [])
 
+  const handleDelete = async (item: HistoryListItem) => {
+    const confirmed = window.confirm(
+      `確定要刪除這筆戰績嗎？\n${item.leftTeamName} vs ${item.rightTeamName}`,
+    )
+
+    if (!confirmed) {
+      return
+    }
+
+    setDeletingId(item.id)
+    setError('')
+
+    try {
+      await deleteHistoryItem(item.id)
+      setHistory((current) => current.filter((entry) => entry.id !== item.id))
+      setSelectedItem((current) => (current?.id === item.id ? null : current))
+    } catch (deleteError) {
+      setError(deleteError instanceof Error ? deleteError.message : '刪除戰績失敗。')
+    } finally {
+      setDeletingId(null)
+    }
+  }
+
   return (
     <>
       <section className="page-grid">
@@ -50,7 +74,7 @@ export function HistoryPage() {
           <p className="panel-kicker">History</p>
           <h2>歷史戰績</h2>
           <p className="panel-copy">
-            這裡直接顯示 DB 的 `history` 列表。點任一筆戰績，可快速查看該場的得分過程。
+            這裡會直接讀取資料庫 `history` 表中的比賽紀錄。點擊卡片可查看得分過程，右側按鈕可直接刪除此筆紀錄。
           </p>
         </article>
 
@@ -58,7 +82,7 @@ export function HistoryPage() {
           {loading ? (
             <div className="empty-state">
               <h3>正在讀取戰績</h3>
-              <p>請稍候一下，正在從 DB 載入列表。</p>
+              <p>系統正在從資料庫載入歷史列表。</p>
             </div>
           ) : error ? (
             <div className="empty-state">
@@ -68,35 +92,47 @@ export function HistoryPage() {
           ) : history.length === 0 ? (
             <div className="empty-state">
               <h3>目前沒有戰績</h3>
-              <p>DB 的 `history` 資料表目前沒有可顯示的紀錄。</p>
+              <p>資料庫 `history` 表內還沒有可顯示的紀錄。</p>
             </div>
           ) : (
             <div className="history-list">
               {history.map((item) => (
-                <button
-                  className="history-card history-card-button"
-                  key={item.id}
-                  type="button"
-                  onClick={() => setSelectedItem(item)}
-                >
-                  <div className="history-head">
-                    <div>
-                      <p className="panel-kicker">
-                        {item.playedAt} / {item.dayLabel}
-                      </p>
-                      <h3>
-                        {item.leftTeamName} vs {item.rightTeamName}
-                      </h3>
+                <article className="history-card history-card-shell" key={item.id}>
+                  <button
+                    className="history-card-button history-card-content"
+                    type="button"
+                    onClick={() => setSelectedItem(item)}
+                  >
+                    <div className="history-head">
+                      <div>
+                        <p className="panel-kicker">
+                          {item.playedAt} / {item.dayLabel}
+                        </p>
+                        <h3>
+                          {item.leftTeamName} vs {item.rightTeamName}
+                        </h3>
+                      </div>
+                      <span className="winner-badge">勝隊：{item.winnerTeamName}</span>
                     </div>
-                    <span className="winner-badge">勝方：{item.winnerTeamName}</span>
-                  </div>
 
-                  <div className="history-meta">
-                    <span>比分：{item.score[0]} - {item.score[1]}</span>
-                    <span>類型：{item.typeLabel}</span>
-                    <span>勝利分數：{item.winScore}</span>
-                  </div>
-                </button>
+                    <div className="history-meta">
+                      <span>
+                        比分：{item.score[0]} - {item.score[1]}
+                      </span>
+                      <span>模式：{item.typeLabel}</span>
+                      <span>目標分：{item.winScore}</span>
+                    </div>
+                  </button>
+
+                  <button
+                    className="history-delete-button"
+                    disabled={deletingId === item.id}
+                    type="button"
+                    onClick={() => void handleDelete(item)}
+                  >
+                    {deletingId === item.id ? '刪除中...' : '刪除此筆'}
+                  </button>
+                </article>
               ))}
             </div>
           )}
@@ -118,8 +154,13 @@ type HistoryReplayModalProps = {
 function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
   return (
     <div className="history-modal-overlay" role="presentation" onClick={onClose}>
-      <div aria-modal="true" className="history-modal" role="dialog">
-        <p className="panel-kicker">點任意位置關閉</p>
+      <div
+        aria-modal="true"
+        className="history-modal"
+        role="dialog"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <p className="panel-kicker">得分紀錄</p>
         <h3>
           {item.leftTeamName} vs {item.rightTeamName}
         </h3>
@@ -139,12 +180,12 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
         <div className="history-modal-summary">
           <span>{item.playedAt}</span>
           <span>{item.typeLabel}</span>
-          <span>勝方：{item.winnerTeamName}</span>
+          <span>勝隊：{item.winnerTeamName}</span>
         </div>
 
         <div className="history-replay-list">
           {item.scoreList.length === 0 ? (
-            <p className="history-replay-empty">這筆資料沒有得分過程。</p>
+            <p className="history-replay-empty">這筆資料沒有完整的得分過程。</p>
           ) : (
             item.scoreList.map(([round, starter, winCount, winner]) => (
               <div className="history-replay-row" key={`${item.id}-${round}`}>
@@ -162,5 +203,5 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
 }
 
 function getStarterName(item: HistoryListItem, starter: number) {
-  return item.players[starter] ?? '未知玩家'
+  return item.players[starter] ?? '未知球員'
 }