feat: implement SCIEDU-109 material library page (part 2) - #49
feat: implement SCIEDU-109 material library page (part 2)#49hashimoto-102 wants to merge 5 commits into
Conversation
|
重新確認 task 與目前提供的設計稿後，這支 PR 實作的 MaterialLibrary 教材書櫃應該仍屬於 SCIEDU-109，而不是 SCIEDU-112。 目前建議將功能拆成： PR #50：SCIEDU-109 Part 1，教材首頁／今日任務 PR #49：SCIEDU-109 Part 2，教材書櫃 SCIEDU-112：單一課程的 Summary Page，等設計稿與需求確認後另外實作 麻煩協助調整這支 PR： 將 base branch 從 main 改成 feat/SCIEDU-109-course-library-homepage，讓 Files changed 只顯示相對於 PR #50 新增的教材書櫃內容。 將 PR title 改成類似 feat: implement SCIEDU-109 material library page (part 2)。 更新 PR description，說明這支 PR 是 SCIEDU-109 的教材書櫃部分，並且目前基於 PR #50。 移除 Resolve issue #112；目前這裡對應的是專案 task，不是已確認存在的 GitHub issue，而且本 PR 也沒有實作 SCIEDU-112。 branch 名稱目前雖然包含 SCIEDU-112，但為避免重開 PR 造成額外負擔，可以暫時保留，只要先把 PR title、description 與實際 scope 說清楚即可。 PR #50 請保留並繼續依原有 review feedback 修改，不需要關閉或搬移既有 comments。 |
AshanEason
left a comment
AshanEason
left a comment
There was a problem hiding this comment.
這次 review 以 PR #50 的 branch 作為比較基準，只檢查 PR #49 相較於 PR #50 新增的教材書櫃相關內容；PR #50 已提出的 Homepage feedback 不在這裡重複列出。
後續調整 PR #49 的 base branch 後，請以更新後的 Files changed 為準；如果部分 inline comments 因此顯示為 outdated，我會再協助確認其對應位置。
另外，目前需要調整兩支 PR 之間的 Mantine dependency。
PR #50 已經開始使用 @mantine/core 與自訂色彩 brandTeal，但 package.json 中的 Mantine dependencies、MantineProvider、@mantine/core/styles.css 與 mantineTheme.ts 都到 PR #49 才加入。這表示若按照 PR #50 → PR #49 的順序合併，PR #50 單獨合併後仍無法成為可正常安裝及執行的完整版本。
請將 Mantine 的基礎設定移至 PR #50，包含：
Mantine 所需 dependencies
@mantine/core/styles.css
根層的 MantineProvider
brandTeal theme 設定（並依 PR #50 的 color feedback，優先對應既有 design tokens）
PR #49 再以 PR #50 為 base，直接沿用上述設定。調整完成後，每一支 PR 都應該能在自己的合併階段獨立完成安裝、build 與 runtime 驗證，不應依賴後一支尚未合併的 PR 才能正常 render。
|
|
||
| {/* === 教材卡片列表 === */} | ||
| {/* 預計渲染到MaterialCard的資料 */} | ||
| <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="1.5rem"> |
There was a problem hiding this comment.
當這一頁只有一排教材卡片時，列表高度會縮短，導致下方 Pagination 跟著往上移動，切換頁面時會產生版面跳動。請讓教材列表區在 desktop 保留兩排卡片所需的最小高度，使 Pagination 維持在一致的位置；不建議直接使用 position: fixed，並請另外確認 tablet／mobile breakpoint 的高度不會因此留下過多空白。
|
|
||
| // 依篩選後的筆數計算總頁數（至少 1 頁） | ||
| const pageCount = Math.max( | ||
| 1, |
There was a problem hiding this comment.
目前篩選結果為 0 筆時，pageCount 仍會被強制設為 1，因此畫面會顯示空白的教材區域以及 1 / 1 Pagination。
我有更新設計圖，請為 0 筆結果提供明確的 empty state，如圖施工即可。這樣使用者才能區分「沒有符合條件的資料」與「頁面沒有正常載入」。
There was a problem hiding this comment.
目前已經針對資料進行調整；在沒有符合條件的資料已經修改為0頁。
並且資料都統一統整MERGE在pr49裡面，PR50暫且保存確保待修改建議原稿的留存。
但PR50不PUSH。
hashimoto-102
changed the title
6313ee3 to
3ebbdeb
Compare
3ebbdeb to
8aaff9a
Compare
cf36870 to
fc1ce8a
Compare
…omepage Feat/sciedu 109 course library homepage
2 participants
Type of changes
Purpose
/MaterialLibrary，從教材首頁的「查看教材書櫃」按鈕進入MaterialCard、Pagination元件，教材卡片列表支援分頁mantineTheme.ts），統一品牌色（brandTeal）與字體，並在main.tsx用MantineProvider套用Additional Information