import React, { useState } from 'react'; import { Trophy, Clock, MapPin, Activity, Settings, Eye, Plus, Play, CheckCircle2, Minus, Music, X, Calendar, ChevronRight, History } from 'lucide-react'; // 初始模擬資料 const initialMatches = [ { id: 1, category: '體育競賽', item: '男子籃球 決賽', teamA: '資訊工程系', teamB: '電機工程系', scoreA: 45, scoreB: 42, date: '2026-03-25', time: '14:00', location: '室內體育館', status: 'live' }, { id: 2, category: '體育競賽', item: '女子排球 準決賽', teamA: '企業管理系', teamB: '財務金融系', scoreA: 0, scoreB: 0, date: '2026-03-25', time: '16:30', location: '室外排球場 A', status: 'upcoming' }, { id: 3, category: '體育競賽', item: '男子拔河 初賽', teamA: '視覺傳達系', teamB: '工業設計系', scoreA: 2, scoreB: 1, date: '2026-03-25', time: '10:00', location: '操場', status: 'finished' }, { id: 4, category: '社團競賽', item: '熱門音樂大賽', teamA: '吉他社', teamB: '熱音社', scoreA: 88, scoreB: 92, date: '2026-03-26', time: '18:00', location: '活動中心大禮堂', status: 'live' }, { id: 5, category: '社團競賽', item: '街舞大賽', teamA: '熱舞社', teamB: '國標社', scoreA: 0, scoreB: 0, date: '2026-03-27', time: '13:00', location: '中正堂', status: 'upcoming' }, ]; export default function App() { const [matches, setMatches] = useState(initialMatches); const [viewMode, setViewMode] = useState('user'); // 'user' | 'admin' const [activeCategory, setActiveCategory] = useState('體育競賽'); // 新增賽事表單狀態 const [isModalOpen, setIsModalOpen] = useState(false); const [newMatch, setNewMatch] = useState({ category: '體育競賽', item: '', teamA: '', teamB: '', date: '2026-03-25', time: '12:00', location: '', }); // --- 管理邏輯 --- const handleAddMatch = (e) => { e.preventDefault(); const id = matches.length > 0 ? Math.max(...matches.map(m => m.id)) + 1 : 1; const matchToAdd = { ...newMatch, id, scoreA: 0, scoreB: 0, status: 'upcoming' }; setMatches([...matches, matchToAdd]); setIsModalOpen(false); setNewMatch({ category: '體育競賽', item: '', teamA: '', teamB: '', date: '2026-03-25', time: '12:00', location: '' }); }; const updateScore = (id, team, delta) => { setMatches(matches.map(m => { if (m.id === id) { const newScoreA = team === 'A' ? Math.max(0, m.scoreA + delta) : m.scoreA; const newScoreB = team === 'B' ? Math.max(0, m.scoreB + delta) : m.scoreB; return { ...m, scoreA: newScoreA, scoreB: newScoreB }; } return m; })); }; const updateStatus = (id, newStatus) => { setMatches(matches.map(m => m.id === id ? { ...m, status: newStatus } : m)); }; const deleteMatch = (id) => { if(window.confirm('確定要刪除這場賽事嗎？')) { setMatches(matches.filter(m => m.id !== id)); } }; // --- 數據分類處理 --- const getCategorizedData = (data) => ({ live: data.filter(m => m.status === 'live'), upcoming: data.filter(m => m.status === 'upcoming'), finished: data.filter(m => m.status === 'finished'), }); const currentCategoryData = getCategorizedData(matches.filter(m => m.category === activeCategory)); const adminData = getCategorizedData(matches); // 後台顯示全部類別但按狀態分組 return ( ); }