refactor(login): compose page from focused login components

Split the login page into smaller reusable components for branding,
toolbar, header, form, announcements, and mobile layout behavior. This
keeps the view responsible for orchestration while moving UI sections into
focused components.

Update page creation docs to reflect the simplified flow where views render
sections/items directly and composables coordinate store/service access when
needed.refactor(login): compose page from focused login components

Split the login page into smaller reusable components for branding,
toolbar, header, form, announcements, and mobile layout behavior. This
keeps the view responsible for orchestration while moving UI sections into
focused components.

Update page creation docs to reflect the simplified flow where views render
sections/items directly and composables coordinate store/service access when
needed.

docs/architecture-strategy.md

@@ -24,17 +24,11 @@ Read only when needed: [analyse now](./analyse-now.md)
 │                         App Shell                            │
 │  (App.vue → Layout → Global Overlays: Snackbar/Dialogs)     │
 └──────────────────────────┬──────────────────────────────────┘
-                           │ page model (reactive)
+                           │ reactive / props
                            ▼
 ┌─────────────────────────────────────────────────────────────┐
-│                      Page Driver                             │
-│  (views/*.vue — 極薄，只負責：組裝 page model / 事件轉發)     │
-└──────────────────────────┬──────────────────────────────────┘
-                           │ props / emits
-                           ▼
-┌─────────────────────────────────────────────────────────────┐
-│                    Page Component                            │
-│  (PageXxx.vue — 組裝完整頁面，決定 Section 順序與 override)   │
+│                          View                                │
+│  (views/*.vue — 自含 page model、頁面 UI 與 section 組合)    │
 └──────────────────────────┬──────────────────────────────────┘
                            │ section data
                            ▼
@@ -58,7 +52,7 @@ Read only when needed: [analyse now](./analyse-now.md)
 ### 3.2 Page Model 作為主要資料單位
 
 - **新增 `src/models/page.ts`**：定義各頁面的統一介面。
-- View 的職責從「管理資料 + 管理狀態 + 組裝模板」縮減為「呼叫 usePageDriver() 取得 page model，傳給 Page component」。
+- View 的職責從「管理資料 + 管理狀態 + 組裝模板」縮減為「呼叫 composable 取得 page model，組裝 section 元件」。
 - Page model 可以來自：
   - store（已有快取）
   - service（直接 API）
@@ -130,15 +124,11 @@ src/
 │   ├── GlobalOverlays.vue    ← snackbar、確認 dialog、toast
 │   └── AppTabs.vue           ← 頁籤（從 App.vue 抽出）
 │
-├── views/                    ← 維持：Page Driver（極薄）
+├── views/                    ← 維持：自含頁面，邏輯與 UI 同檔
 │   └── maint/
-│       └── SingleRecord.vue  ← ~50 行：組裝 pageModel + 掛載 PageMaintDriver
+│       └── SingleRecord.vue  ← ~50 行：組裝 pageModel + MaintShell 外殼
 │
 ├── components/
-│   ├── pages/                ← 新增：Page Component 層
-│   │   ├── PageMaintenance.vue
-│   │   └── PageReport.vue
-│   │
 │   ├── sections/             ← 新增：Section / Shelf 層
 │   │   ├── SectionSearchPanel.vue
 │   │   ├── SectionDataTable.vue
@@ -193,10 +183,10 @@ src/
 ```vue
 <!-- views/maint/SingleRecord.vue（優化後） -->
 <script setup lang="ts">
-import PageMaintenance from '@/components/pages/PageMaintenance.vue'
+import MaintShell from '@/components/MaintShell.vue'
 import { useSingleRecordMaintenancePage } from '@/composables/page-drivers/useSingleRecordMaintenancePage'
 
-const { pageModel, commands, formPanelProps, formPanelEvents } = useSingleRecordMaintenancePage()
+const { commands, formPanelEvents, formPanelProps, pageModel, searchPanelOpen } = useSingleRecordMaintenancePage()
 </script>
 
 <template>
@@ -204,31 +194,25 @@ const { pageModel, commands, formPanelProps, formPanelEvents } = useSingleRecord
 </template>
 ```
 
-#### Layer 3: Page Component（`src/components/pages/`）
+#### Layer 3: View（`src/views/`）
 
-- **職責**：組裝完整頁面的 section 順序、處理 page-level slot override、分發頁面級事件。
-- **命名**：一律 `Page` 前綴。
-- **對齊**：App Store 的 `ProductPage.svelte`、`TodayPage.svelte`、`DefaultPage.svelte`。
+- **職責**：自含頁面的完整入口 — 組裝 page model、協調 composable、撰寫頁面 template。
+- **禁止**：頁面 UI 不再拆到另一個 page component 層。
+- **對齊**：標準 Vue SPA 慣例。
 
 ```vue
-<!-- components/pages/PageMaintenance.vue -->
-<template>
-  <PageMaintShell :title="page.title">
-    <template #search>
-      <SectionSearchPanel :fields="page.searchFields" @search="emit('search', $event)" />
-    </template>
-    <template #content>
-      <SectionDataTable :records="page.records" @edit="emit('edit', $event)" />
-    </template>
-  </PageMaintShell>
+<!-- views/maint/SingleRecord.vue -->
+<script setup lang="ts">
+import MaintShell from '@/components/MaintShell.vue'
+import { useSingleRecordMaintenancePage } from '@/composables/page-drivers/useSingleRecordMaintenancePage'
 
-  <!-- 頁面級 dialog 外掛，內容再拆到 SectionFormPanel -->
-  <SectionFormPanel
-    v-model="formVisible"
-    :mode="formMode"
-    :record="activeRecord"
-    @save="emit('save', $event)"
-  />
+const { pageModel, searchPanelOpen, commands, search, students, ... } = useSingleRecordMaintenancePage()
+</script>
+
+<template>
+  <MaintShell :title="pageModel.title" @create="commands.openAddDialog">
+    <template #table>...</template>
+  </MaintShell>
 </template>
 ```
 
@@ -343,7 +327,7 @@ views/xxx.vue
    - `src/shell/GlobalOverlays.vue`：snackbar、搜尋 dialog、訊息 dialog。
 3. [x] 新增 `src/components/pages/`：建立第一個 `PageMaintenance.vue`（可從 `PageMaint.vue` 擴展）。
    - 定義 `MaintenancePageModel` props 與 `create/edit/view/delete/search` emits。
-   - 使用 `PageMaint.vue` 作為佈局外殼，搜尋與表格區塊以 slot 開放，不綁定特定領域型別。
+    - 使用 `MaintShell.vue` 作為佈局外殼，搜尋與表格區塊以 slot 開放，不綁定特定領域型別。
 4. [x] 新增 `src/composables/page-drivers/`：建立第一個 page driver 範例。
     - 協調搜尋條件、分頁與 `pageModel`。
     - 提供 `load()` 與 `resetSearch()` 供 Page Driver 呼叫。
@@ -399,7 +383,11 @@ views/xxx.vue
 2. [x] `App.vue` 最終只保留 shell 掛載。
    - `src/App.vue` 縮減為 7 行，只掛載 `AppShell`。
    - `src/shell/AppShell.vue` 承接 layout 切換、layout props/events、breadcrumb actions、tabs router-view 與 `GlobalOverlays` 掛載。
-   - `src/composables/layout/useAppShell.ts` 承接 menu 合併、favorite、breadcrumb、layout action、手動/強制登出流程。
+    - `src/composables/layout/useAppShell.ts` 承接 menu 合併、favorite、breadcrumb、layout action、手動/強制登出流程。
+
+### Phase 5：移除 Page Component 層 ✅ 已完成
+
+> 所有 page component 已合併回對應的 view，`src/components/pages/` 目錄已刪除。page driver 簡化為僅複雜頁面才使用的選配層，view 回歸標準 Vue SPA 慣例：自含 page model + 頁面 UI + section 組合。
 
 ---
 
@@ -408,8 +396,7 @@ views/xxx.vue
 | 層級 | 目錄 | 檔名前綴/範例 |
 |------|------|---------------|
 | App Shell | `src/shell/` | `AppShell.vue`、`GlobalOverlays.vue` |
-| Page Driver | `src/views/` | `SingleRecord.vue`（route view，不改名） |
-| Page Component | `src/components/pages/` | `PageMaintenance.vue` |
+| View（自含頁面） | `src/views/` | `SingleRecord.vue` |
 | Section / Shelf | `src/components/sections/` | `SectionDataTable.vue`、`SectionSearchPanel.vue` |
 | Item / Atom | `src/components/items/` | `ItemDataRow.vue`、`ItemFormField.vue` |
 | Layout | `src/components/layouts/` | `MainLayout.vue`（維持） |
@@ -425,7 +412,7 @@ views/xxx.vue
 
 ## 七、對齊檢查清單（新增/重構時使用）
 
-- [ ] 這個 view 超過 100 行了嗎？→ 考慮抽出 Page Component。
+- [ ] 這個 view 超過 200 行了嗎？→ 考慮抽出 Section 或 composable。
 - [ ] 這個元件知道自己是水平捲軸還是網格嗎？→ Item 層不該知道，移到 Section 層。
 - [ ] 這個 dialog 定義在 view 裡嗎？→ 抽出到 SectionFormPanel。
 - [ ] 這個元件直接呼叫 `studentStore.updateStudent()` 嗎？→ 改為觸發 command 或 emit event。