調整選隊伍頁操作並更新 README

README.md

@@ -5,9 +5,10 @@
 ## 功能
 
 - 選隊伍頁
-  - 依指定日期從資料庫讀取分組資料
+  - 可依指定日期從資料庫讀取分組資料
   - 若當天沒有資料，可手動輸入 A、B 區名單建立分組
-  - 成功載入後會在畫面中央顯示 0.5 秒浮動提示
+  - 成功載入後會在畫面底部顯示 1 秒浮動提示
+  - 對戰名單直接點 `進入記分板` 就會帶入該組
 - 記分板頁
   - 從所選組別進入記分板
   - 設定隊伍彈窗支援兩種方式

src/App.css

@@ -181,9 +181,9 @@
 .floating-status-bubble {
   position: fixed;
   left: 50%;
-  top: 50%;
+  bottom: 22px;
   z-index: 60;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   min-width: min(78vw, 320px);
   max-width: min(84vw, 420px);
   padding: 14px 20px;
@@ -200,12 +200,12 @@
 @keyframes status-bubble-in {
   from {
     opacity: 0;
-    transform: translate(-50%, calc(-50% + 10px)) scale(0.96);
+    transform: translateX(-50%) translateY(10px) scale(0.96);
   }
 
   to {
     opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+    transform: translateX(-50%) translateY(0) scale(1);
   }
 }
 
@@ -230,6 +230,7 @@
 .field {
   display: grid;
   gap: 8px;
+  min-width: 0;
 }
 
 .field span {
@@ -253,6 +254,10 @@
   min-height: 200px;
 }
 
+.field input[type='date'] {
+  min-width: 0;
+}
+
 .button-stack {
   display: grid;
   gap: 12px;
@@ -1356,6 +1361,27 @@
     padding: 9px 12px;
   }
 
+  .selection-toolbar {
+    gap: 12px;
+  }
+
+  .button-stack {
+    grid-template-columns: 1fr;
+  }
+
+  .field input[type='date'] {
+    max-width: 100%;
+    font-size: 16px;
+  }
+
+  .floating-status-bubble {
+    bottom: 12px;
+    min-width: min(88vw, 320px);
+    max-width: 92vw;
+    padding: 12px 16px;
+    font-size: 0.92rem;
+  }
+
   .scoreboard-court {
     gap: 10px;
     padding: 8px;

src/App.tsx

@@ -120,7 +120,7 @@ function App() {
 
     const timer = window.setTimeout(() => {
       setLoadMessage('')
-    }, 500)
+    }, 1000)
 
     return () => window.clearTimeout(timer)
   }, [loadMessage, loadStatus])
@@ -468,7 +468,6 @@ function App() {
               onAreaBInputChange={setAreaBInput}
               onGenerateManualGroups={generateManualGroups}
               onLoadGroupsFromDb={() => void loadGroupsFromDb()}
-              onSelectGroup={selectGroup}
               onTargetDateChange={setTargetDate}
               onUseGroup={selectGroup}
             />
@@ -490,7 +489,6 @@ function App() {
               onAreaBInputChange={setAreaBInput}
               onGenerateManualGroups={generateManualGroups}
               onLoadGroupsFromDb={() => void loadGroupsFromDb()}
-              onSelectGroup={selectGroup}
               onTargetDateChange={setTargetDate}
               onUseGroup={selectGroup}
             />

src/pages/TeamSelectionPage.tsx

@@ -15,7 +15,6 @@ type TeamSelectionPageProps = {
   onAreaBInputChange: (value: string) => void
   onGenerateManualGroups: () => void
   onLoadGroupsFromDb: () => void
-  onSelectGroup: (groupId: number) => void
   onTargetDateChange: (value: string) => void
   onUseGroup: (groupId: number) => void
 }
@@ -33,7 +32,6 @@ export function TeamSelectionPage({
   onAreaBInputChange,
   onGenerateManualGroups,
   onLoadGroupsFromDb,
-  onSelectGroup,
   onTargetDateChange,
   onUseGroup,
 }: TeamSelectionPageProps) {
@@ -124,13 +122,6 @@ export function TeamSelectionPage({
                     <h3>本組對戰名單</h3>
                   </div>
                   <div className="group-actions">
-                    <button
-                      className="secondary-button"
-                      type="button"
-                      onClick={() => onSelectGroup(group.id)}
-                    >
-                      選擇這組
-                    </button>
                     <Link className="primary-button inline-link" to="/scoreboard" onClick={() => onUseGroup(group.id)}>
                       進入記分板
                     </Link>