🎓 中山大學選課輔助系統第六版 - 全新架構，更好的用戶體驗
該項目目前主要由 Claude 4 半自動化生成，旨在提供一個現代化的選課輔助系統，幫助中山大學學生更輕鬆地選擇課程。專案使用 React 18、TypeScript 和 Redux Toolkit 重構，提供更好的性能和用戶體驗。歡迎有興趣的開發者參與貢獻！
- 🏗️ 現代化架構：使用 React 18 + TypeScript + Redux Toolkit
- 📱 響應式設計：完美支援桌面端和移動端
- 🎨 精美 UI：基於 Ant Design 5 設計系統
- ⚡ 高效能：使用 React Virtuoso 虛擬化大量課程列表
- 🌍 國際化：支援多語言切換
- 💾 本地儲存：自動保存選課狀態
- 🔍 智能搜尋：快速查找所需課程
- ⏰ 衝堂檢測：自動檢測時間衝突
- 📊 統計資訊：即時顯示學分和時數
- 框架：React 18.3.1
- 語言：TypeScript 5.8.3
- 狀態管理：Redux Toolkit 2.8.2 + React Redux 9.2.0
- UI 框架：Ant Design 5.24.8
- 樣式方案：Styled Components 6.1.17
- 建構工具：Vite 6.3.3
- 國際化：React i18next 15.5.1
- 虛擬化：React Virtuoso 4.12.6
nsysu_selector_helper/
├── src/
│ ├── components/ # React 組件
│ │ ├── ScheduleTable.tsx # 課表組件
│ │ ├── SelectorPanel.tsx # 選課面板
│ │ └── SelectorPanel/ # 選課面板子組件
│ ├── store/ # Redux 狀態管理
│ │ ├── slices/ # Redux 切片
│ │ ├── hooks.ts # 類型安全的 Redux hooks
│ │ └── selectors.ts # 狀態選擇器
│ ├── api/ # API 介面
│ ├── services/ # 業務邏輯服務
│ ├── hooks/ # 自定義 React hooks
│ ├── i18n/ # 國際化配置
│ ├── types/ # TypeScript 類型定義
│ └── constants/ # 常數定義
├── public/ # 靜態資源
└── package.json
- Node.js >= 20.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0
-
克隆專案
git clone https://github.com/NSYSU-OpenDev/NSYSUCourseSelectorV6.git cd NSYSUCourseSelectorV6/nsysu_selector_helper -
安裝依賴
npm install # 或 yarn install -
啟動開發伺服器
npm run dev # 或 yarn dev -
開啟瀏覽器
http://localhost:5173
# 建構生產版本
npm run build
# 預覽建構結果
npm run preview
# 代碼格式化
npm run format
# 代碼檢查
npm run lint- 課程瀏覽：支援按系所、年級、課程類型篩選
- 課程搜尋：即時搜尋課程名稱、教師、課程代碼
- 選課管理：新增、移除選課
- 課表顯示：視覺化課表，清楚顯示上課時間和地點
- 衝堂檢測：自動檢測時間衝突並提醒
- 餘額顯示：即時顯示課程剩餘名額
- 本地儲存：自動保存選課狀態到瀏覽器
- 學分統計：顯示已選課程的總學分和時數
- 課程評價：顯示其他學生對課程的評價和建議 (MongoDB 整合待實現)
- 時間點擊：點擊時間段快速選課
- 導出自動填入腳本：生成自動填入選課系統的腳本
- 響應式設計：桌面端和移動端完美適配
- 虛擬化列表：大量課程資料流暢滾動
- Loading 狀態：優雅的載入動畫
- 錯誤處理：友善的錯誤提示
- 鍵盤支援：支援鍵盤快捷鍵操作
採用 Redux Toolkit 進行狀態管理，結構清晰且易於維護：
- coursesSlice：課程資料、選課狀態管理
- uiSlice：UI 狀態管理（tab 切換、hover 狀態等）
interface RootState {
courses: {
courses: Course[]
selectedCourses: Course[]
availableSemesters: AcademicYear
selectedSemester: string
loading: boolean
}
ui: {
selectedTabKey: string
hoveredCourseId: string
activeCollapseKey: string | string[]
}
}專門為移動端設備優化：
- 使用 Ant Design Collapse 組件實現可摺疊的課表和選課面板
- 觸控友善的交互設計
- 適配小螢幕的字體和間距
- 支援手勢操作
支援多語言切換：
- 繁體中文（預設）
- 英文 (待實現)
- ESLint：代碼檢查和規範
- Prettier：代碼格式化
- TypeScript：靜態類型檢查
- Hot Module Replacement：快速熱重載
- Source Maps：便於除錯
- TypeScript 嚴格模式：確保代碼品質
- 🔄 架構重構：從 useState 遷移到 Redux Toolkit
- 🎨 UI 升級：升級到 Ant Design 5
- 📱 移動端優化：全新的移動端適配
- ⚡ 效能提升：使用虛擬化列表提升效能
- 🌍 國際化：新增多語言支援
- 💾 狀態持久化：改善本地儲存機制
- 完成主課程列表顯示
- 實現課程摺疊/展開功能
- 顯示課程剩餘名額
- Redux 狀態管理遷移
- 移動端響應式設計
- 本地儲存整合
歡迎提交 Issue 和 Pull Request！
- Fork 本專案
- 建立功能分支：
git checkout -b feature/new-feature - 提交變更：
git commit -am 'Add new feature' - 推送分支：
git push origin feature/new-feature - 提交 Pull Request
本專案採用 MIT 授權條款。詳情請見 LICENSE 文件。
- 感謝中山大學提供課程資料 API
- 感謝所有貢獻者的努力
🎓 讓選課變得更簡單、更直觀！