feat(timetable): add time-based timeline view

[yudong-0222]

說明

經過 #7 的建議與 Review 後，我重新以「功能」提出這個 PR，再麻煩進行 Review，謝謝！

我將原本以固定節次矩陣呈現的課表，改為依實際時間比例顯示的 Timeline。

此 PR 僅針對「課表顯示」功能，「時間查詢功能」與其他 RWD UI 會再另外拆 PR 出來。

修改內容

• 直接從既有 classStorage / rowspanize() 結果建立 Timeline sessions
• 依課程實際開始時間與既有 matrix 區段計算顯示位置與高度
• 以星期一到星期六，共六欄去呈現課程
• 保留既有的課程顏色與文字顏色。
• 新增 Timeline 課程資訊視窗
• reuse 既有的課程操作：
  • 刪除課程
  • 修改顏色
  • 修改文字樣式
  • 查看評價
• 時間搜尋模式仍保留原本 matrix renderer 與操作流程，因為這邊涉及到一些操作、渲染跟互動的部分，我認為這樣會讓這個 PR 又變得更加雜亂，因此沒有在本次 PR 中做出更動。

Reuse / Implementation Notes

本次在實作上優先 reuse 原始專案的既有方法：

• classStorage 作為課表資料來源
• rowspanize() 產生的連續區段資訊
• Course getters
• courseDelete()
• 現有 ColorPicker / Vuex course state
• show_comment()

因此，未另外新增非必要的課程時間解析、range parser、overlap projection 或新的 course data model。

Testing

• Production build (npm run build)
• 空課表 Timeline
• 一般數字節次
• A–J 節次
• 非連續時段
• 跨星期相同課程
• 自訂課程
• 切換課表
• 課程顏色 / 文字顏色
• 課程詳細資訊
• 刪除課程
• 修改顏色
• 修改文字樣式
• 查看評價
• 原本時間搜尋模式未受影響

[yudong-0222]

另外，我想請問在「自定義課程」新增節次為「1 ~ E」這種「數字 ~ 英文」或「英文 ~ 數字」是合法的操作嗎？

[syzygy608]

另外，我想請問在「自定義課程」新增節次為「1 ~ E」這種「數字 ~ 英文」或「英文 ~ 數字」是合法的操作嗎？

在我們的設計下，起訖時間合理就是一個合法的操作

[syzygy608]

現在的版本中，課表會偏左

classTable.vue 的 #WholeTable 使用了：

md:w-6/12 min-w-[60rem]

因此課表最小寬度固定為 960px；但 page_main.vue 中 #main 的直接子元素沒有設定 w-full，作為 flex item 時寬度便被內容撐成 960px。Navbar、搜尋區、Splitpanes 和 Footer 都跟著只占左側 960px，所以右側會留下大片空白。此時 mx-auto 也無法置中，因為課表寬度和父層相同。

建議在 page_main.vue 補上完整的寬度與 flex 縮放限制：

<div id="main" class="flex w-full min-w-0 max-w-full">
  <div class="w-full min-w-0">
    ...
    <splitpanes class="w-full min-w-0 bg-white">

套用後，main 內層會恢復為 1269px，960px 的課表則會由 mx-auto 正常置中。

另外，點擊課程後詳細資料應該顯示出 1, 2, 3, or A 的節次。

[yudong-0222]

好的，這邊也有補上相關的 style code 以及節次資訊。
在寫「節次」的時候，對於其顯示的方式有兩個考慮的呈現方式：「星期-節次」or「節次」

• e.g.: 「五 1, 2」or「1, 2」。

目前是後者，這部分也可以討論一下再做調整，謝謝！