新增歷史戰績關閉按鈕並更新 README

src/pages/HistoryPage.tsx

@@ -46,7 +46,7 @@ export function HistoryPage() {
 
   const handleDelete = async (item: HistoryListItem) => {
     const confirmed = window.confirm(
-      `確定要刪除這筆戰績嗎？\n${item.leftTeamName} vs ${item.rightTeamName}`,
+      `確定要刪除此筆戰績嗎？\n${item.leftTeamName} vs ${item.rightTeamName}`,
     )
 
     if (!confirmed) {
@@ -74,7 +74,7 @@ export function HistoryPage() {
           <p className="panel-kicker">History</p>
           <h2>歷史戰績</h2>
           <p className="panel-copy">
-            這裡會直接讀取資料庫 `history` 表中的比賽紀錄。點擊卡片可查看得分過程，右側按鈕可直接刪除此筆紀錄。
+            這裡會直接從資料庫的 `history` 表讀取比賽紀錄，點開後可查看每一分的得分過程，也能刪除單筆資料。
           </p>
         </article>
 
@@ -82,7 +82,7 @@ export function HistoryPage() {
           {loading ? (
             <div className="empty-state">
               <h3>正在讀取戰績</h3>
-              <p>系統正在從資料庫載入歷史列表。</p>
+              <p>請稍候，系統正在載入歷史紀錄。</p>
             </div>
           ) : error ? (
             <div className="empty-state">
@@ -91,8 +91,8 @@ export function HistoryPage() {
             </div>
           ) : history.length === 0 ? (
             <div className="empty-state">
-              <h3>目前沒有戰績</h3>
-              <p>資料庫 `history` 表內還沒有可顯示的紀錄。</p>
+              <h3>目前沒有歷史戰績</h3>
+              <p>資料庫 `history` 表目前還沒有可顯示的資料。</p>
             </div>
           ) : (
             <div className="history-list">
@@ -112,7 +112,7 @@ export function HistoryPage() {
                           {item.leftTeamName} vs {item.rightTeamName}
                         </h3>
                       </div>
-                      <span className="winner-badge">勝隊：{item.winnerTeamName}</span>
+                      <span className="winner-badge">勝方：{item.winnerTeamName}</span>
                     </div>
 
                     <div className="history-meta">
@@ -120,7 +120,7 @@ export function HistoryPage() {
                         比分：{item.score[0]} - {item.score[1]}
                       </span>
                       <span>模式：{item.typeLabel}</span>
-                      <span>目標分：{item.winScore}</span>
+                      <span>勝利分數：{item.winScore}</span>
                     </div>
                   </button>
 
@@ -160,6 +160,15 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
         role="dialog"
         onClick={(event) => event.stopPropagation()}
       >
+        <button
+          aria-label="關閉戰績紀錄"
+          className="history-modal-close"
+          type="button"
+          onClick={onClose}
+        >
+          ×
+        </button>
+
         <p className="panel-kicker">得分紀錄</p>
         <h3>
           {item.leftTeamName} vs {item.rightTeamName}
@@ -180,12 +189,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}`}>