# Components Guide

`components` 放 Vue UI 元件，依 sections / items / layouts / base 分層。頁面不再有獨立的 page component 層 — 頁面 UI 直接寫在 `views/*` 中。

## 子目錄

- `sections/`：獨立畫面區塊（搜尋面板、資料表格、表單面板），決定佈局，不關心單筆內容。詳見 `src/components/sections/GUIDE.md`。
- `items/`：單一資料單位的純粹呈現，不管理狀態。詳見 `src/components/items/GUIDE.md`。
- `layouts/`：App Shell 層的 layout 元件。詳見 `src/components/layouts/GUIDE.md`。
- `base/`：真正跨頁共用的基礎元件。詳見 `src/components/base/GUIDE.md`。

`MaintShell.vue` 是 maintenance 頁面的通用外殼元件，放在 `src/components/maint/`。

## 規則

- 元件不直接 import store 或 service。
- 元件以 props 接收資料，以 emits 回報使用者意圖。
- 可複用元件不含 domain 名稱（如 `student`、`course`）。

## 驗證

- Vue / TypeScript 結構變更：`pnpm -s type-check`
- 需要確認產物：`pnpm -s build`
- route、layout 或主要畫面流程變更：啟動 dev server 並做瀏覽器檢查，除非使用者明確不需要。