From 7b99087cbb4d461d186fa05cc340f19534584c1a Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Wed, 27 May 2026 11:50:40 +0800
Subject: [PATCH] docs: simplify page architecture and component guidance

Update the src documentation to emphasize building pages from route views,
composables, sections, and items instead of a dedicated pages layer.

Clarify the recommended data flow and new feature workflow so template users
start from views and only introduce page-driver composables when coordination
logic becomes complex.docs: simplify page architecture and component guidance

Update the src documentation to emphasize building pages from route views,
composables, sections, and items instead of a dedicated pages layer.

Clarify the recommended data flow and new feature workflow so template users
start from views and only introduce page-driver composables when coordination
logic becomes complex.
---
 src/GUIDE.md                                  |   26 +-
 src/components/GUIDE.md                       |   58 +-
 .../pages/PageEditableGridMaintenance.vue     |   13 -
 src/components/pages/PageFunction.vue         |   16 -
 src/components/pages/PageHome.vue             |   32 -
 src/components/pages/PageMaintenance.vue      |   37 -
 .../pages/PageMasterDetailAMaintenance.vue    |  483 -------
 .../pages/PageMasterDetailBMaintenance.vue    | 1153 ----------------
 .../pages/PageMasterDetailCMaintenance.vue    | 1122 ----------------
 .../pages/PageSectionFormPageDemo.vue         |   89 --
 .../pages/PageSectionQueryPageDemo.vue        |   69 -
 src/components/pages/PageSettings.vue         |   14 -
 .../useMasterDetailAMaintenancePage.ts        |    5 +
 src/views/FncPage.vue                         |    8 +-
 src/views/GUIDE.md                            |   33 +-
 src/views/Home.vue                            |   13 +-
 src/views/Settings.vue                        |    6 +-
 src/views/demos/SectionFormPageDemo.vue       |   65 +-
 src/views/demos/SectionQueryPageDemo.vue      |   48 +-
 src/views/maint/EditableGrid.vue              |    4 +-
 src/views/maint/GUIDE.md                      |    8 +-
 src/views/maint/MasterDetailA.vue             |  379 +++++-
 src/views/maint/MasterDetailB.vue             | 1155 ++++++++++++++++-
 src/views/maint/MasterDetailC.vue             | 1124 +++++++++++++++-
 src/views/maint/SingleRecord.vue              |   11 +-
 25 files changed, 2797 insertions(+), 3174 deletions(-)
 delete mode 100644 src/components/pages/PageEditableGridMaintenance.vue
 delete mode 100644 src/components/pages/PageFunction.vue
 delete mode 100644 src/components/pages/PageHome.vue
 delete mode 100644 src/components/pages/PageMaintenance.vue
 delete mode 100644 src/components/pages/PageMasterDetailAMaintenance.vue
 delete mode 100644 src/components/pages/PageMasterDetailBMaintenance.vue
 delete mode 100644 src/components/pages/PageMasterDetailCMaintenance.vue
 delete mode 100644 src/components/pages/PageSectionFormPageDemo.vue
 delete mode 100644 src/components/pages/PageSectionQueryPageDemo.vue
 delete mode 100644 src/components/pages/PageSettings.vue

diff --git a/src/GUIDE.md b/src/GUIDE.md
index 4eb2bf6..cd4a774 100644
--- a/src/GUIDE.md
+++ b/src/GUIDE.md
@@ -1,19 +1,19 @@
 # Src Guide
 
-`src` 是 template 使用者主要修改的區域。新增功能時，先從 route view、page component 與 page driver 開始，除非需求明確牽涉 app shell、登入、router guard 或 HTTP core，否則不要先改 template core。
+`src` 是 template 使用者主要修改的區域。新增功能時，先從 route view 與 composable 開始，除非需求明確牽涉 app shell、登入、router guard 或 HTTP core，否則不要先改 template core。
 
 ## 資料流
 
 ```txt
-router -> AppShell -> layout -> view(Page Driver) -> Page Component -> Section -> Item
-                                      ↓
-                         page driver / command composable -> store -> service
+router -> AppShell -> layout -> view -> Section -> Item
+                          ↓
+             composable -> store -> service
 ```
 
 ## 主要目錄
 
 - `views/`：route entry，維持薄層，只做 route wiring 與 page driver 掛載。詳見 `src/views/GUIDE.md`。
-- `components/`：Vue UI 元件，依 pages / sections / items / layouts / base 分層。詳見 `src/components/GUIDE.md`。
+- `components/`：Vue UI 元件，依 sections / items / layouts / base 分層。詳見 `src/components/GUIDE.md`。
 - `composables/`：page driver、command flow、layout flow 與可重用狀態流程。詳見 `src/composables/GUIDE.md`。
 - `router/`：route、layout meta、auth meta 與 guard。詳見 `src/router/GUIDE.md`。
 - `shell/`：AppShell、tabs、global overlays。詳見 `src/shell/GUIDE.md`。
@@ -60,7 +60,6 @@ router -> AppShell -> layout -> view(Page Driver) -> Page Component -> Section -
 - `components/PageIndex.vue`
 - `components/PageMaint.vue`
 - `components/maint/*`
-- `components/pages/*Maintenance.vue`
 - `components/sections/*`
 - `components/items/*`
 - `composables/page-drivers/*MaintenancePage.ts`
@@ -74,14 +73,13 @@ router -> AppShell -> layout -> view(Page Driver) -> Page Component -> Section -
 
 ## 新功能流程
 
-1. 新增或修改 `views/*` route entry。
-2. 若有完整頁面 UI，新增 `components/pages/PageXxx.vue`。
-3. 若有複雜的資料協調（多 composable、搜尋狀態、CRUD flow、dialog 狀態），新增 `composables/page-drivers/useXxxPage.ts`。簡單頁面直接在 view 用 `computed` 組裝 page model。
-4. 若畫面有獨立區塊，拆到 `components/sections/*`。
-5. 若區塊內有欄位群組或單筆資料呈現，拆到 `components/items/*`。
-6. 跨頁共享狀態才新增或修改 `stores/*`。
-7. 外部 API 放在 `services/modules/*`。
-8. 在 `router/routes.ts` 新增 route。
+1. 新增或修改 `views/*` route entry，直接在 view 裡組裝 page model 與 UI。
+2. 若有複雜的資料協調（多 composable、搜尋狀態、CRUD flow、dialog 狀態），新增 `composables/page-drivers/useXxxPage.ts`。簡單頁面直接在 view 用 `computed` 組裝。
+3. 若畫面有獨立區塊，拆到 `components/sections/*`。
+4. 若區塊內有欄位群組或單筆資料呈現，拆到 `components/items/*`。
+5. 跨頁共享狀態才新增或修改 `stores/*`。
+6. 外部 API 放在 `services/modules/*`。
+7. 在 `router/routes.ts` 新增 route。
 
 ## 驗證
 
diff --git a/src/components/GUIDE.md b/src/components/GUIDE.md
index 531388b..519bce5 100644
--- a/src/components/GUIDE.md
+++ b/src/components/GUIDE.md
@@ -1,55 +1,21 @@
-# Src Guide
+# Components Guide
 
-`src` 是 template 使用者主要修改的區域。新增功能時，先從 route view、page component 與 page driver 開始，除非需求明確牽涉 app shell、登入、router guard 或 HTTP core，否則不要先改 template core。
+`components` 放 Vue UI 元件，依 sections / items / layouts / base 分層。頁面不再有獨立的 page component 層 — 頁面 UI 直接寫在 `views/*` 中。
 
-Template Core 與 Demo/Example 的完整清單見 `src/README.md`。
+## 子目錄
 
-## 資料流
+- `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`。
 
-```txt
-router -> AppShell -> layout -> view(Page Driver) -> Page Component -> Section -> Item
-                                      ↓
-                         page driver / command composable -> store -> service
-```
+`PageMaint.vue` 是 maintenance 頁面的通用外殼元件，放在 `src/components/` 頂層。
 
-## 主要目錄
+## 規則
 
-- `views/`：route entry，維持薄層，只做 route wiring 與 page driver 掛載。詳見 `src/views/GUIDE.md`。
-- `components/`：Vue UI 元件，依 pages / sections / items / layouts / base 分層。詳見 `src/components/GUIDE.md`。
-- `composables/`：page driver、command flow、layout flow 與可重用狀態流程。詳見 `src/composables/GUIDE.md`。
-- `router/`：route、layout meta、auth meta 與 guard。詳見 `src/router/GUIDE.md`。
-- `shell/`：AppShell、tabs、global overlays。詳見 `src/shell/GUIDE.md`。
-- `stores/`：跨頁共享狀態與快取。詳見 `src/stores/GUIDE.md`。
-- `services/`：HTTP client、API module、token/session、錯誤處理。詳見 `src/services/GUIDE.md`。
-- `language/`：Vue I18n 文案。詳見 `src/language/GUIDE.md`。
-
-## 依 pageKind 選擇起點
-
-`.spec.json` 中 `maintenanceContract.pageKind` 決定使用哪一種 demo 架構。完整欄位對照見 `docs/llm-development-guide.md` 的「`.spec.json` 對照指南」。
-
-| pageKind      | 參考 Demo                                  | 讀取 GUIDE                                               |
-| ------------- | ------------------------------------------ | -------------------------------------------------------- |
-| `query`       | `src/views/demos/SectionQueryPageDemo.vue` | `src/components/sections/GUIDE.md`（SectionQueryPage）   |
-| `application` | `src/views/demos/SectionFormPageDemo.vue`  | `src/components/sections/GUIDE.md`（SectionFormPage）    |
-| `maintenance` | `src/views/maint/*`                        | `src/views/maint/README.md` + `src/views/maint/GUIDE.md` |
-| `auth`        | `src/views/Login.vue`                      | `src/views/GUIDE.md`                                     |
-| `print`       | query 或 application demo                  | 同 query / application                                   |
-| `chooser`     | 不適用 demo                                | 轉為 route group 或 tab                                  |
-
-## 新功能流程
-
-1. 依 `pageKind` 選擇最接近的 demo。
-2. 在 `src/views/<domain>/` 新增 route view（薄層，只掛 page driver）。
-3. 在 `src/composables/page-drivers/` 新增 page driver composable。
-4. 在 `src/components/pages/` 新增 page component。
-5. 若畫面有獨立區塊，拆到 `src/components/sections/*`。
-6. 若區塊內有欄位群組，拆到 `src/components/items/*`。
-7. 在 `src/services/modules/` 新增 API module。
-8. 在 `src/models/` 定義 page model 與 domain model 型別。
-9. 在 `src/router/routes.ts` 新增 route。
-10. 在 `src/language/` 新增語系文案。
-
-跨頁共享狀態才新增或修改 `src/stores/*`。
+- 元件不直接 import store 或 service。
+- 元件以 props 接收資料，以 emits 回報使用者意圖。
+- 可複用元件不含 domain 名稱（如 `student`、`course`）。
 
 ## 驗證
 
diff --git a/src/components/pages/PageEditableGridMaintenance.vue b/src/components/pages/PageEditableGridMaintenance.vue
deleted file mode 100644
index 56c84b6..0000000
--- a/src/components/pages/PageEditableGridMaintenance.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import EditableStudentGrid from '@/components/maint/EditableGrid.vue'
-import type { MaintenancePageModel } from '@/models/page'
-
-defineProps<{
-  page: MaintenancePageModel
-}>()
-</script>
-
-<template>
-  <!-- Page component 接收 page model，再把頁面標題轉交給既有 editable grid feature component。 -->
-  <EditableStudentGrid :title="page.title" />
-</template>
diff --git a/src/components/pages/PageFunction.vue b/src/components/pages/PageFunction.vue
deleted file mode 100644
index 5758cfa..0000000
--- a/src/components/pages/PageFunction.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-export interface FunctionPageModel {
-  fncId: string
-}
-
-defineProps<{
-  page: FunctionPageModel
-}>()
-</script>
-
-<template>
-  <!-- Page component 只呈現 page driver 解析後的功能代碼，不直接讀 route params。 -->
-  <v-sheet height="100%" width="100%">
-    {{ page.fncId }}
-  </v-sheet>
-</template>
diff --git a/src/components/pages/PageHome.vue b/src/components/pages/PageHome.vue
deleted file mode 100644
index f49eee5..0000000
--- a/src/components/pages/PageHome.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import PageIndex from '@/components/PageIndex.vue'
-import type { HomeNewsItem, HomePageModel, HomeQuickItem } from '@/composables/page-drivers/useHomePage'
-
-defineProps<{
-  page: HomePageModel
-  selectedNews: HomeNewsItem | null
-}>()
-
-// 首頁互動都往上 emit，讓 page driver 統一處理 dialog、訊息中心與 snackbar。
-const emit = defineEmits<{
-  news: [item: HomeNewsItem]
-  'message-center': []
-  quick: [item: HomeQuickItem]
-}>()
-
-// 新聞 dialog 開關是 PageIndex 的雙向 UI 狀態，由 view/page driver 持有。
-const isNewsDialogOpen = defineModel<boolean>('newsDialogOpen', { default: false })
-</script>
-
-<template>
-  <!-- PageHome 作為 page component，把 page model 拆給既有 PageIndex 外殼與事件。 -->
-  <PageIndex
-    v-model:is-news-dialog-open="isNewsDialogOpen"
-    :news-items="page.newsItems"
-    :quick-items="page.quickItems"
-    :selected-news="selectedNews"
-    @message-center="emit('message-center')"
-    @news="emit('news', $event)"
-    @quick="emit('quick', $event)"
-  />
-</template>
diff --git a/src/components/pages/PageMaintenance.vue b/src/components/pages/PageMaintenance.vue
deleted file mode 100644
index 4d65718..0000000
--- a/src/components/pages/PageMaintenance.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import PageMaint from '@/components/PageMaint.vue'
-import type { MaintenancePageModel } from '@/models/page'
-
-defineProps<{
-  page: MaintenancePageModel
-}>()
-
-// PageMaintenance 只轉發維護頁使用者意圖，CRUD 副作用交給 page driver / command composable。
-const emit = defineEmits<{
-  (e: 'create'): void
-  (e: 'edit', record: unknown): void
-  (e: 'view', record: unknown): void
-  (e: 'delete', record: unknown): void
-  (e: 'search', criteria: Record<string, unknown>): void
-}>()
-
-// 搜尋面板開關是頁面 UI 狀態，用 v-model 交回 view/page driver。
-const searchPanelOpen = defineModel<boolean>('searchPanelOpen', { default: false })
-</script>
-
-<template>
-  <!-- PageMaint 提供維護頁外殼；搜尋欄位與表格內容由 slot 交給各頁組合。 -->
-  <PageMaint
-    :title="page.title"
-    :search-panel-open="searchPanelOpen"
-    @toggle-search="searchPanelOpen = !searchPanelOpen"
-    @create="emit('create')"
-  >
-    <template #search-fields>
-      <slot name="search-fields" />
-    </template>
-    <template #table>
-      <slot name="table" />
-    </template>
-  </PageMaint>
-</template>
diff --git a/src/components/pages/PageMasterDetailAMaintenance.vue b/src/components/pages/PageMasterDetailAMaintenance.vue
deleted file mode 100644
index 6ab3df3..0000000
--- a/src/components/pages/PageMasterDetailAMaintenance.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<script setup lang="ts">
-import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
-import DetailNavigation from '@/components/maint/master-detail/DetailNavigation.vue'
-import DetailSidePanel from '@/components/maint/master-detail/DetailSidePanel.vue'
-import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
-import MntDialogCard from '@/components/maint/MntDialogCard.vue'
-import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
-import PageMaintenance from '@/components/pages/PageMaintenance.vue'
-import SectionDataTable from '@/components/sections/SectionDataTable.vue'
-import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
-import type {
-  SaveSummaryItem,
-  StudentFormState,
-} from '@/composables/maint/useStudentMaintenanceForm'
-import type { MaintenancePageModel } from '@/models/page'
-import type { SemesterRecord } from '@/stores/semesters'
-import type { StudentRecord } from '@/stores/students'
-
-interface FieldErrorItem {
-  field: string
-  message: string
-}
-
-interface GradeOption {
-  title: string
-  value: number
-}
-
-defineProps<{
-  activeMobilePanel: 'master' | 'detail'
-  confirmCloseVisible: boolean
-  confirmDeleteVisible: boolean
-  confirmNavigateVisible: boolean
-  confirmSaveVisible: boolean
-  confirmSwitchVisible: boolean
-  currentPage: number
-  departments: string[]
-  detailForm: SemesterRecord | null
-  dialogSubtitle: string
-  dialogTitle: string
-  dialogVisible: boolean
-  enrollYears: number[]
-  errorSummary: FieldErrorItem[]
-  fieldErrors: Record<keyof StudentFormState, string[]>
-  gradeLabel: (grade: number) => string
-  gradeOptions: GradeOption[]
-  hasNextRecord: boolean
-  hasPrevRecord: boolean
-  headers: any[]
-  isDetailEditing: boolean
-  isDirty: boolean
-  isEditMode: boolean
-  isFormLocked: boolean
-  isFormReadonly: boolean
-  isLoading: boolean
-  isMobile: boolean
-  isSaving: boolean
-  isViewMode: boolean
-  items: StudentRecord[]
-  itemsPerPage: number
-  page: MaintenancePageModel
-  pageCount: number
-  pageSummary: string
-  pendingDeleteLabel: string
-  rowProps: (data: { item: StudentRecord }) => Record<string, string>
-  saveSummary: SaveSummaryItem[]
-  selectedSemester: SemesterRecord | null
-  selectedSemesterId: number | null
-  semesters: SemesterRecord[]
-  statusColor: (status: string) => string
-  statuses: string[]
-}>()
-
-const form = defineModel<StudentFormState>('form', { required: true })
-const detailFormModel = defineModel<SemesterRecord | null>('detailForm', { required: true })
-// 主檔表單、子檔表單與搜尋條件都由 page driver 持有，Page component 只透過 v-model 回寫。
-const search = defineModel<{
-  studentId: string
-  name: string
-  department: string
-  grade: number | null
-  status: string
-}>('search', { required: true })
-const searchPanelOpen = defineModel<boolean>('searchPanelOpen', { required: true })
-
-// 主從維護頁的 CRUD 與導覽意圖都往上 emit，讓 page driver / command composable 統一處理。
-const emit = defineEmits<{
-  (e: 'add-semester'): void
-  (e: 'cancel-detail-edit'): void
-  (e: 'clear-field-error', field: keyof StudentFormState): void
-  (e: 'close'): void
-  (e: 'close-detail-panel'): void
-  (e: 'confirm-close'): void
-  (e: 'confirm-delete'): void
-  (e: 'confirm-navigate'): void
-  (e: 'confirm-save'): void
-  (e: 'confirm-switch'): void
-  (e: 'create'): void
-  (e: 'delete', record: StudentRecord): void
-  (e: 'delete-current'): void
-  (e: 'delete-semester', id: number): void
-  (e: 'dialog-visible-change', value: boolean): void
-  (e: 'edit', record: StudentRecord): void
-  (e: 'first'): void
-  (e: 'last'): void
-  (e: 'next'): void
-  (e: 'prev'): void
-  (e: 'reset-search'): void
-  (e: 'save'): void
-  (e: 'save-detail-edit'): void
-  (e: 'scroll-to-field', field: string): void
-  (e: 'select-semester', id: number): void
-  (e: 'start-detail-edit'): void
-  (e: 'switch-to-edit'): void
-  (e: 'switch-to-view'): void
-  (e: 'update:confirmCloseVisible', value: boolean): void
-  (e: 'update:confirmDeleteVisible', value: boolean): void
-  (e: 'update:confirmNavigateVisible', value: boolean): void
-  (e: 'update:confirmSaveVisible', value: boolean): void
-  (e: 'update:confirmSwitchVisible', value: boolean): void
-  (e: 'update:currentPage', page: number): void
-  (e: 'view', record: StudentRecord): void
-}>()
-</script>
-
-<template>
-  <!-- PageMaintenance 提供維護頁外殼；主從頁在 slots 中組合搜尋、表格與子檔內容。 -->
-  <PageMaintenance
-    v-model:search-panel-open="searchPanelOpen"
-    :page="page"
-    @create="emit('create')"
-  >
-    <!-- 搜尋欄位沿用 SectionSearchPanel，搜尋條件透過 v-model 回到 page driver。 -->
-    <template #search-fields>
-      <SectionSearchPanel
-        v-model="search"
-        :departments="departments"
-        :grade-options="gradeOptions"
-        :statuses="statuses"
-        @reset="emit('reset-search')"
-      />
-    </template>
-    <!-- 主檔表格沿用 SectionDataTable，列操作只 emit 使用者意圖。 -->
-    <template #table>
-      <SectionDataTable
-        :current-page="currentPage"
-        :grade-label="gradeLabel"
-        :headers="headers"
-        :items="items"
-        :items-per-page="itemsPerPage"
-        :page-count="pageCount"
-        :page-summary="pageSummary"
-        :row-props="rowProps"
-        :status-color="statusColor"
-        @delete="emit('delete', $event)"
-        @edit="emit('edit', $event)"
-        @update:current-page="emit('update:currentPage', $event)"
-        @view="emit('view', $event)"
-      />
-    </template>
-  </PageMaintenance>
-
-  <teleport to="body">
-    <v-overlay
-      class="dialog-overlay"
-      :close-on-content-click="false"
-      :model-value="dialogVisible"
-      scrim="rgba(0, 0, 0, 0.45)"
-      scroll-strategy="block"
-      @update:model-value="emit('dialog-visible-change', $event)"
-    >
-      <div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
-        <div
-          v-if="!isMobile || activeMobilePanel === 'detail'"
-          class="detail-panel-wrapper"
-          :class="{ 'is-active': !!selectedSemesterId, 'is-mobile': isMobile }"
-        >
-          <DetailSidePanel
-            v-model:detail-form="detailFormModel"
-            :is-detail-editing="isDetailEditing"
-            :is-mobile="isMobile"
-            :is-view-mode="isViewMode"
-            :selected-semester="selectedSemester"
-            @cancel-edit="emit('cancel-detail-edit')"
-            @close="emit('close-detail-panel')"
-            @delete="emit('delete-semester', $event)"
-            @save-edit="emit('save-detail-edit')"
-            @start-edit="emit('start-detail-edit')"
-          />
-        </div>
-
-        <MntDialogCard
-          v-if="!isMobile || activeMobilePanel === 'master'"
-          :dialog-subtitle="dialogSubtitle"
-          :dialog-title="dialogTitle"
-          :is-edit-mode="isEditMode"
-          :is-view-mode="isViewMode"
-          :width="isMobile ? '100%' : 760"
-        >
-          <template #toolbar>
-            <MntRecordNavToolbar
-              :has-next-record="hasNextRecord"
-              :has-prev-record="hasPrevRecord"
-              :is-edit-mode="isEditMode"
-              :is-view-mode="isViewMode"
-              :mobile="isMobile"
-              @first="emit('first')"
-              @last="emit('last')"
-              @next="emit('next')"
-              @prev="emit('prev')"
-              @switch-to-edit="emit('switch-to-edit')"
-              @switch-to-view="emit('switch-to-view')"
-            />
-          </template>
-          <template #content>
-            <v-alert
-              v-if="errorSummary.length > 0 && !isLoading"
-              class="mb-4"
-              type="error"
-              variant="tonal"
-            >
-              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
-              <div class="d-flex flex-column ga-1">
-                <v-btn
-                  v-for="error in errorSummary"
-                  :key="error.field"
-                  color="error"
-                  size="small"
-                  variant="text"
-                  @click="emit('scroll-to-field', error.field)"
-                >
-                  {{ error.message }}
-                </v-btn>
-              </div>
-            </v-alert>
-
-            <v-skeleton-loader
-              v-if="isLoading"
-              class="mt-4"
-              type="subtitle,paragraph"
-              width="100%"
-            />
-
-            <v-form
-              v-else
-              :class="{ 'form-readonly': isFormReadonly }"
-              @submit.prevent="emit('save')"
-            >
-              <MasterFileFormFields
-                :departments="departments"
-                :enroll-years="enrollYears"
-                :field-errors="fieldErrors"
-                :form="form"
-                :grade-options="gradeOptions"
-                :is-form-locked="isFormLocked"
-                :is-form-readonly="isFormReadonly"
-                :statuses="statuses"
-                @clear-field="emit('clear-field-error', $event)"
-              />
-
-              <v-divider />
-
-              <DetailNavigation
-                :is-mobile="isMobile"
-                :is-view-mode="isViewMode"
-                :selected-semester-id="selectedSemesterId"
-                :semesters="semesters"
-                @add="emit('add-semester')"
-                @select="emit('select-semester', $event)"
-              />
-            </v-form>
-          </template>
-          <template #actions>
-            <template v-if="isMobile">
-              <v-btn :disabled="isSaving" variant="text" @click="emit('close')">取消</v-btn>
-              <v-btn
-                v-if="isEditMode"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="emit('delete-current')"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="emit('save')"
-              >
-                儲存
-              </v-btn>
-              <v-btn v-else color="primary" variant="flat" @click="emit('close')">關閉</v-btn>
-            </template>
-            <template v-else>
-              <v-spacer />
-              <v-btn :disabled="isSaving" variant="text" @click="emit('close')">取消</v-btn>
-              <v-btn
-                v-if="isEditMode"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="emit('delete-current')"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="emit('save')"
-              >
-                儲存
-              </v-btn>
-              <v-btn v-else color="primary" variant="flat" @click="emit('close')">關閉</v-btn>
-            </template>
-          </template>
-        </MntDialogCard>
-      </div>
-    </v-overlay>
-  </teleport>
-
-  <ConfirmDialog
-    :model-value="confirmCloseVisible"
-    confirm-color="error"
-    confirm-text="關閉不儲存"
-    message="目前有尚未儲存的內容，確定要關閉嗎？"
-    title="未儲存變更"
-    @confirm="emit('confirm-close')"
-    @update:model-value="emit('update:confirmCloseVisible', $event)"
-  />
-
-  <ConfirmDialog
-    :model-value="confirmSaveVisible"
-    :confirm-loading="isSaving"
-    confirm-text="確認儲存"
-    max-width="520"
-    title="確認儲存變更"
-    @confirm="emit('confirm-save')"
-    @update:model-value="emit('update:confirmSaveVisible', $event)"
-  >
-    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
-      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
-        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
-        <div v-if="item.before !== null" class="text-body-2">
-          <span class="text-medium-emphasis">原：</span>
-          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
-            {{ item.before }}
-          </span>
-        </div>
-        <div class="text-body-2">
-          <span class="text-medium-emphasis">新：</span>
-          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
-            {{ item.after }}
-          </span>
-        </div>
-      </div>
-    </div>
-    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
-  </ConfirmDialog>
-
-  <ConfirmDialog
-    :model-value="confirmDeleteVisible"
-    confirm-color="error"
-    confirm-text="確定刪除"
-    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`"
-    title="確認刪除"
-    @confirm="emit('confirm-delete')"
-    @update:model-value="emit('update:confirmDeleteVisible', $event)"
-  />
-
-  <ConfirmDialog
-    :model-value="confirmSwitchVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="emit('confirm-switch')"
-    @update:model-value="emit('update:confirmSwitchVisible', $event)"
-  />
-
-  <ConfirmDialog
-    :model-value="confirmNavigateVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="emit('confirm-navigate')"
-    @update:model-value="emit('update:confirmNavigateVisible', $event)"
-  />
-</template>
-
-<style scoped>
-.dialog-overlay :deep(.v-overlay__content) {
-  height: 100vh;
-  display: flex;
-  justify-content: flex-end;
-  width: 100vw;
-  max-width: 100vw;
-}
-
-.dialog-panel {
-  width: auto;
-  max-width: 100%;
-  height: 100vh;
-  background: transparent;
-  padding: 0;
-  display: flex;
-}
-
-.dialog-panel > .v-card {
-  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
-}
-
-.detail-panel-wrapper {
-  width: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-  margin-right: 0;
-}
-
-.detail-panel-wrapper.is-active {
-  width: 600px;
-  opacity: 1;
-  margin-right: 0;
-}
-
-.dialog-panel.is-mobile {
-  width: 100%;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-title) {
-  padding: 16px 20px 12px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-toolbar) {
-  padding: 8px 12px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-actions) {
-  gap: 8px;
-  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
-}
-
-.dialog-panel.is-mobile :deep(.dialog-actions .v-btn) {
-  flex: 1 1 0;
-  min-width: 0;
-}
-
-.dialog-panel.is-mobile :deep(.v-card-text) {
-  padding-bottom: 88px;
-}
-
-.detail-panel-wrapper.is-mobile {
-  width: 100%;
-  opacity: 1;
-  overflow: visible;
-}
-
-.detail-panel-wrapper.is-mobile.is-active {
-  width: 100%;
-}
-
-.form-readonly :deep(.v-field) {
-  pointer-events: none;
-}
-
-@media (max-width: 600px) {
-  .dialog-panel {
-    width: 100%;
-  }
-
-  .dialog-panel > .v-card {
-    width: 100%;
-    box-shadow: none;
-  }
-}
-</style>
diff --git a/src/components/pages/PageMasterDetailBMaintenance.vue b/src/components/pages/PageMasterDetailBMaintenance.vue
deleted file mode 100644
index 451957d..0000000
--- a/src/components/pages/PageMasterDetailBMaintenance.vue
+++ /dev/null
@@ -1,1153 +0,0 @@
-<template>
-  <!-- Page component 組合 PageMaint 外殼、主檔表格、子檔區與 dialog；流程狀態集中在本頁 script。 -->
-  <page-maint
-    :search-panel-open="searchPanelOpen"
-    :title="page.title"
-    @create="openAddDialog"
-    @toggle-search="searchPanelOpen = !searchPanelOpen"
-  >
-    <!-- 搜尋欄位放在 PageMaint 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
-    <template #search-fields>
-      <v-col cols="12" md="2">
-        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
-        <v-text-field
-          id="search-student-id"
-          v-model="search.studentId"
-          aria-labelledby="search-student-id-label"
-          density="compact"
-          hide-details
-          name="searchStudentId"
-          placeholder="例如：S2024001"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
-        <v-text-field
-          id="search-name"
-          v-model="search.name"
-          aria-labelledby="search-name-label"
-          density="compact"
-          hide-details
-          name="searchName"
-          placeholder="例如：王小明"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
-        <v-select
-          id="search-department"
-          v-model="search.department"
-          aria-labelledby="search-department-label"
-          density="compact"
-          hide-details
-          :items="departments"
-          name="searchDepartment"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
-        <v-select
-          id="search-grade"
-          v-model="search.grade"
-          aria-labelledby="search-grade-label"
-          density="compact"
-          hide-details
-          item-title="title"
-          item-value="value"
-          :items="gradeOptions"
-          name="searchGrade"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
-        <v-select
-          id="search-status"
-          v-model="search.status"
-          aria-labelledby="search-status-label"
-          density="compact"
-          hide-details
-          :items="statuses"
-          name="searchStatus"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
-      </v-col>
-    </template>
-    <!-- table slot 放主檔表格與列操作，操作事件再交給頁面流程函式處理。 -->
-    <template #table>
-      <v-data-table
-        v-model:page="currentPage"
-        class="student-table"
-        density="compact"
-        fixed-header
-        :headers="tableHeaders"
-        height="100%"
-        hide-default-footer
-        :items="students"
-        :items-per-page="itemsPerPage"
-        :row-props="rowProps"
-      >
-        <template #[`item.grade`]="{ item }">
-          {{ gradeLabel(item.grade) }}
-        </template>
-        <template #[`item.status`]="{ item }">
-          <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
-            {{ item.status }}
-          </v-chip>
-        </template>
-        <template #[`item.actions`]="{ item }">
-          <div class="d-flex ga-2">
-            <v-btn
-              color="info"
-              :prepend-icon="mdiEye"
-              size="small"
-              variant="text"
-              @click="openViewDialog(item)"
-            >
-              檢視
-            </v-btn>
-            <v-btn
-              color="primary"
-              :prepend-icon="mdiPencil"
-              size="small"
-              variant="text"
-              @click="openEditDialog(item)"
-            >
-              修改
-            </v-btn>
-            <v-btn
-              color="error"
-              :prepend-icon="mdiDelete"
-              size="small"
-              variant="text"
-              @click="requestDeleteConfirmation(item)"
-            >
-              刪除
-            </v-btn>
-          </div>
-        </template>
-        <template #bottom>
-          <div class="d-flex align-center justify-space-between px-4 py-3">
-            <div class="text-body-2 text-medium-emphasis">
-              {{ pageSummary }}
-            </div>
-            <div class="d-flex align-center ga-2">
-              <v-btn
-                :disabled="currentPage <= 1"
-                size="small"
-                variant="text"
-                @click="currentPage = 1"
-                >第一頁</v-btn
-              >
-              <v-btn
-                :disabled="currentPage <= 1"
-                size="small"
-                variant="text"
-                @click="currentPage -= 1"
-                >上一頁</v-btn
-              >
-              <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
-              <v-btn
-                :disabled="currentPage >= pageCount"
-                size="small"
-                variant="text"
-                @click="currentPage += 1"
-                >下一頁</v-btn
-              >
-              <v-btn
-                :disabled="currentPage >= pageCount"
-                size="small"
-                variant="text"
-                @click="currentPage = pageCount"
-                >最後頁</v-btn
-              >
-            </div>
-          </div>
-        </template>
-      </v-data-table>
-    </template>
-  </page-maint>
-
-  <!-- 主從式維護視窗 -->
-  <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
-  <teleport to="body">
-    <!-- 包成元件需要傳高度寬度給dialog-panel -->
-    <v-overlay
-      class="dialog-overlay"
-      :close-on-content-click="false"
-      :model-value="dialogVisible"
-      scrim="rgba(0, 0, 0, 0.45)"
-      scroll-strategy="block"
-      @update:model-value="handleDialogVisibility"
-    >
-      <div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
-        <DetailFullHeightPanel
-          v-if="isMobile && activeMobilePanel === 'detail'"
-          :is-form-locked="isFormLocked"
-          :is-view-mode="isViewMode"
-          :semester="selectedSemester"
-          @add-course="openAddCourseDialog"
-          @close="closeDetailPanel"
-          @delete-course="requestDeleteCourse"
-          @update-course="handleUpdateCourse"
-          @update-semester="handleUpdateSemester"
-        />
-
-        <!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
-        <!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
-        <mnt-dialog-card
-          v-else
-          :content-class="
-            isMobile
-              ? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
-              : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
-          "
-          :dialog-subtitle="dialogSubtitle"
-          :dialog-title="dialogTitle"
-          :is-edit-mode="isEditMode"
-          :is-view-mode="isViewMode"
-          width="100%"
-        >
-          <template #toolbar>
-            <mnt-record-nav-toolbar
-              :has-next-record="hasNextRecord"
-              :has-prev-record="hasPrevRecord"
-              :is-edit-mode="isEditMode"
-              :is-view-mode="isViewMode"
-              :mobile="isMobile"
-              @first="openEdgeRecord('first')"
-              @last="openEdgeRecord('last')"
-              @next="openAdjacentRecord('next')"
-              @prev="openAdjacentRecord('prev')"
-              @switch-to-edit="switchToEditMode"
-              @switch-to-view="switchToViewMode"
-            />
-          </template>
-          <template #content>
-            <!-- 錯誤提示：當表單驗證未通過時顯示 -->
-            <v-alert
-              v-if="errorSummary.length > 0 && !isLoading"
-              class="mb-4"
-              type="error"
-              variant="tonal"
-            >
-              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
-              <div class="d-flex flex-column ga-1">
-                <v-btn
-                  v-for="error in errorSummary"
-                  :key="error.field"
-                  color="error"
-                  size="small"
-                  variant="text"
-                  @click="scrollToField(error.field)"
-                >
-                  {{ error.message }}
-                </v-btn>
-              </div>
-            </v-alert>
-
-            <!-- 載入中骨架畫面 -->
-            <v-skeleton-loader
-              v-if="isLoading"
-              class="mt-4"
-              type="subtitle,paragraph"
-              width="100%"
-            />
-
-            <!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
-            <v-form
-              v-else
-              :class="[
-                { 'form-readonly': isFormReadonly },
-                isMobile ? '' : 'd-flex flex-column h-100',
-              ]"
-              @submit.prevent="requestSaveConfirmation"
-            >
-              <MasterFileFormFields
-                :departments="departments"
-                :enroll-years="enrollYears"
-                :field-errors="fieldErrors"
-                :form="form"
-                :grade-options="gradeOptions"
-                :is-form-locked="isFormLocked"
-                :is-form-readonly="isFormReadonly"
-                :statuses="statuses"
-                @clear-field="clearFieldError"
-              />
-
-              <v-divider />
-
-              <DetailCollapseGropus
-                :is-form-locked="isFormLocked"
-                :is-form-readonly="isFormReadonly"
-                :is-mobile="isMobile"
-                :selected-semester-id="selectedSemesterId"
-                :semesters="studentSemesters"
-                @add-course="openAddCourseDialog"
-                @delete-course="requestDeleteCourse"
-                @select="handleSemesterSelect"
-                @update-course="handleUpdateCourse"
-              />
-            </v-form>
-          </template>
-          <template #actions>
-            <template v-if="isMobile">
-              <v-btn
-                class="flex-grow-1"
-                :disabled="isSaving"
-                variant="text"
-                @click="requestCloseDialog"
-                >取消</v-btn
-              >
-              <v-btn
-                v-if="isEditMode"
-                class="flex-grow-1"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="requestDeleteCurrent"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                class="flex-grow-1"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="requestSaveConfirmation"
-              >
-                儲存
-              </v-btn>
-              <v-btn
-                v-else
-                class="flex-grow-1"
-                color="primary"
-                variant="flat"
-                @click="requestCloseDialog"
-                >關閉</v-btn
-              >
-            </template>
-            <template v-else>
-              <v-spacer />
-              <v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
-              <v-btn
-                v-if="isEditMode"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="requestDeleteCurrent"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="requestSaveConfirmation"
-              >
-                儲存
-              </v-btn>
-              <v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
-            </template>
-          </template>
-        </mnt-dialog-card>
-      </div>
-    </v-overlay>
-  </teleport>
-
-  <ConfirmDialog
-    v-model="confirmCloseVisible"
-    confirm-color="error"
-    confirm-text="關閉不儲存"
-    message="目前有尚未儲存的內容，確定要關閉嗎？"
-    title="未儲存變更"
-    @confirm="confirmClose"
-  />
-
-  <ConfirmDialog
-    v-model="confirmSaveVisible"
-    :confirm-loading="isSaving"
-    confirm-text="確認儲存"
-    max-width="520"
-    title="確認儲存變更"
-    @confirm="confirmSave"
-  >
-    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
-      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
-        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
-        <div v-if="item.before !== null" class="text-body-2">
-          <span class="text-medium-emphasis">原：</span>
-          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
-            {{ item.before }}
-          </span>
-        </div>
-        <div class="text-body-2">
-          <span class="text-medium-emphasis">新：</span>
-          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
-            {{ item.after }}
-          </span>
-        </div>
-      </div>
-    </div>
-    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
-  </ConfirmDialog>
-
-  <ConfirmDialog
-    v-model="confirmDeleteVisible"
-    confirm-color="error"
-    confirm-text="確定刪除"
-    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`"
-    title="確認刪除"
-    @confirm="confirmDelete"
-  />
-
-  <ConfirmDialog
-    v-model="confirmSwitchVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="confirmSwitch"
-  />
-
-  <ConfirmDialog
-    v-model="confirmNavigateVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="confirmNavigate"
-  />
-
-  <!-- 刪除課程確認 -->
-  <ConfirmDialog
-    v-model="confirmDeleteCourseVisible"
-    confirm-color="error"
-    confirm-text="確定移除"
-    :message="`確定要移除「${pendingDeleteCourseName}」嗎？`"
-    :title="`刪除課程`"
-    @confirm="confirmDeleteCourse"
-  />
-
-  <!-- 加入課程對話框 -->
-  <v-dialog v-model="addCourseDialogVisible" max-width="420" persistent>
-    <v-card>
-      <v-card-title class="d-flex align-center">
-        <v-icon color="primary" start :icon="mdiBookPlus" />
-        加入課程
-      </v-card-title>
-      <v-card-text>
-        <v-select
-          v-model="addCourseForm.name"
-          class="mb-3"
-          density="comfortable"
-          :items="availableCourses"
-          label="課程名稱"
-          variant="outlined"
-          @update:model-value="handleAddCourseNameSelect"
-        />
-        <v-row density="compact">
-          <v-col cols="6">
-            <v-text-field
-              v-model.number="addCourseForm.credits"
-              density="comfortable"
-              hide-spin-buttons
-              label="學分"
-              type="number"
-              variant="outlined"
-            />
-          </v-col>
-          <v-col cols="6">
-            <v-text-field
-              v-model.number="addCourseForm.score"
-              density="comfortable"
-              hide-spin-buttons
-              label="分數"
-              type="number"
-              variant="outlined"
-            />
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
-        <v-btn
-          color="primary"
-          :disabled="!addCourseForm.name"
-          variant="flat"
-          @click="confirmAddCourse"
-          >加入</v-btn
-        >
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-
-  <!-- 成功提示 -->
-  <v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
-    儲存成功
-  </v-snackbar>
-</template>
-
-<script setup lang="ts">
-import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useDisplay } from 'vuetify'
-
-import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
-import DetailCollapseGropus from '@/components/maint/master-detail/DetailCollapseGropus.vue'
-import DetailFullHeightPanel from '@/components/maint/master-detail/DetailFullHeightPanel.vue'
-import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
-import MntDialogCard from '@/components/maint/MntDialogCard.vue'
-import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
-import PageMaint from '@/components/PageMaint.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
-import { type CourseRecord, type SemesterRecord, useSemesterStore } from '@/stores/semesters'
-import { type StudentRecord, useStudentStore } from '@/stores/students'
-import type { MaintenancePageModel } from '@/models/page'
-
-defineProps<{
-  page: MaintenancePageModel
-}>()
-
-// 下拉選項：系所/年級/入學年度/狀態
-const departments = ['資訊工程', '企業管理', '應用外語', '視覺設計', '財務金融']
-const gradeOptions = [
-  { title: '大一', value: 1 },
-  { title: '大二', value: 2 },
-  { title: '大三', value: 3 },
-  { title: '大四', value: 4 },
-  { title: '研究所', value: 5 },
-]
-const enrollYears = [2024, 2023, 2022, 2021, 2020, 2019]
-const statuses = ['在學', '休學', '畢業']
-
-const { smAndUp } = useDisplay()
-const isMobile = computed(() => !smAndUp.value)
-
-// 表格欄位設定（含固定欄與排序）
-const tableHeaders = [
-  {
-    title: '學號',
-    key: 'studentId',
-    sortable: true,
-    fixed: smAndUp.value && ('start' as const),
-    width: 120,
-  },
-  {
-    title: '姓名',
-    key: 'name',
-    sortable: true,
-    fixed: smAndUp.value && ('start' as const),
-    width: 100,
-  },
-  { title: '系所', key: 'department', sortable: true, width: 140 },
-  { title: '年級', key: 'grade', sortable: true, width: 90 },
-  { title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
-  { title: '已修學分', key: 'credits', sortable: true, width: 110 },
-  { title: 'Email', key: 'email', sortable: true, width: 200 },
-  { title: '電話', key: 'phone', sortable: true, width: 140 },
-  { title: '指導老師', key: 'advisor', sortable: true, width: 110 },
-  { title: '狀態', key: 'status', sortable: true, width: 90 },
-  {
-    title: '操作',
-    key: 'actions',
-    sortable: false,
-    fixed: smAndUp.value && ('end' as const),
-    width: 'auto',
-    cellProps: { class: 'px-0 bg-background' },
-  },
-]
-
-// 查詢條件（示意用，未接 API）
-const search = ref({
-  studentId: '',
-  name: '',
-  department: '',
-  grade: null as number | null,
-  status: '',
-})
-// 查詢區塊是否展開
-const searchPanelOpen = ref(false)
-
-// 透過 store 管理 Demo 資料與 CRUD
-const studentStore = useStudentStore()
-const semesterStore = useSemesterStore()
-const students = computed(() => studentStore.students)
-type StudentPayload = Omit<StudentRecord, 'id'>
-const itemsPerPage = 10
-const currentPage = ref(1)
-const pageCount = computed(() => Math.max(1, Math.ceil(students.value.length / itemsPerPage)))
-const pageSummary = computed(() => {
-  const total = students.value.length
-  if (total === 0) return '第 0-0 筆 / 共 0 筆'
-
-  const start = (currentPage.value - 1) * itemsPerPage + 1
-  const end = Math.min(currentPage.value * itemsPerPage, total)
-  return `第 ${start}-${end} 筆 / 共 ${total} 筆`
-})
-
-// 彈窗狀態與流程控制
-const dialogVisible = ref(false)
-const editingId = ref<number | null>(null)
-const dialogMode = ref<'create' | 'edit' | 'view'>('create')
-const isLoading = ref(false)
-const isSaving = ref(false)
-// UI 回饋
-const snackbarVisible = ref(false)
-const highlightedId = ref<number | null>(null)
-// 防止快速切換導致的異步覆蓋
-const loadSequence = ref(0)
-
-// Master-Detail 擴充
-const studentSemesters = ref<SemesterRecord[]>([])
-const selectedSemesterId = ref<number | null>(null)
-const activeMobilePanel = ref<'master' | 'detail'>('master')
-const selectedSemester = computed(
-  () => studentSemesters.value.find((semester) => semester.id === selectedSemesterId.value) ?? null
-)
-
-// 刪除課程確認狀態
-const confirmDeleteCourseVisible = ref(false)
-const pendingDeleteCourseKey = ref<{ semesterId: number; courseIndex: number } | null>(null)
-const pendingDeleteCourseName = ref('')
-
-// 加入課程對話框狀態
-const addCourseDialogVisible = ref(false)
-const addCourseTargetSemesterId = ref<number | null>(null)
-const addCourseForm = ref({ name: '', credits: 3, score: 0 })
-
-const availableCourses = [
-  '資料結構',
-  '演算法',
-  '作業系統',
-  '計算機組織',
-  '線性代數',
-  '機率與統計',
-  '資料庫系統',
-  '人工智慧導論',
-  '網頁程式設計',
-  '計算機網路',
-]
-
-const creditsMap: Record<string, number> = {
-  資料結構: 3,
-  演算法: 3,
-  作業系統: 3,
-  計算機組織: 3,
-  線性代數: 3,
-  機率與統計: 3,
-  資料庫系統: 3,
-  人工智慧導論: 3,
-  網頁程式設計: 3,
-  計算機網路: 3,
-}
-
-// 輔助函式：重新載入當前學生的學期資料
-function refreshSemesters() {
-  if (editingId.value) {
-    studentSemesters.value = semesterStore.getStudentSemesters(editingId.value)
-  }
-}
-
-function handleSemesterSelect(semesterId: number) {
-  selectedSemesterId.value = semesterId
-  if (isMobile.value) {
-    activeMobilePanel.value = 'detail'
-  }
-}
-
-function closeDetailPanel() {
-  if (isMobile.value) {
-    activeMobilePanel.value = 'master'
-    return
-  }
-  selectedSemesterId.value = null
-}
-
-function handleUpdateSemester(semesterId: number, payload: Partial<SemesterRecord>) {
-  semesterStore.updateSemester(semesterId, payload)
-}
-
-// 請求刪除課程（開啟確認對話框）
-function requestDeleteCourse(semesterId: number, courseIndex: number, courseName: string) {
-  pendingDeleteCourseKey.value = { semesterId, courseIndex }
-  pendingDeleteCourseName.value = courseName
-  confirmDeleteCourseVisible.value = true
-}
-
-// 確認刪除課程
-function confirmDeleteCourse() {
-  if (!pendingDeleteCourseKey.value) return
-  const { semesterId, courseIndex } = pendingDeleteCourseKey.value
-  const semester = studentSemesters.value.find((item) => item.id === semesterId)
-  if (semester) {
-    semesterStore.updateSemester(semesterId, {
-      courses: semester.courses.filter((_, idx) => idx !== courseIndex),
-    })
-    refreshSemesters()
-  }
-  pendingDeleteCourseKey.value = null
-  confirmDeleteCourseVisible.value = false
-}
-
-// 開啟加入課程對話框
-function openAddCourseDialog(semesterId: number) {
-  addCourseTargetSemesterId.value = semesterId
-  addCourseForm.value = { name: '', credits: 3, score: 0 }
-  addCourseDialogVisible.value = true
-}
-
-// 選擇課程名稱時自動帶入預設學分
-function handleAddCourseNameSelect(name: string) {
-  const credits = creditsMap[name]
-  if (credits !== undefined) {
-    addCourseForm.value.credits = credits
-  }
-}
-
-// 確認加入課程
-function confirmAddCourse() {
-  if (!addCourseTargetSemesterId.value || !addCourseForm.value.name) return
-  const semester = studentSemesters.value.find(
-    (item) => item.id === addCourseTargetSemesterId.value
-  )
-  if (!semester) return
-  semesterStore.updateSemester(addCourseTargetSemesterId.value, {
-    courses: [
-      ...semester.courses,
-      {
-        code: `CS${Date.now()}`,
-        name: addCourseForm.value.name,
-        credits: addCourseForm.value.credits,
-        score: addCourseForm.value.score,
-      },
-    ],
-  })
-  refreshSemesters()
-  addCourseDialogVisible.value = false
-}
-
-function handleUpdateCourse(
-  semesterId: number,
-  courseIndex: number,
-  payload: Partial<CourseRecord>
-) {
-  const semester = studentSemesters.value.find((item) => item.id === semesterId)
-  if (!semester) return
-  const nextCourses = semester.courses.map((course, idx) =>
-    idx === courseIndex ? { ...course, ...payload } : course
-  )
-  semesterStore.updateSemester(semesterId, { courses: nextCourses })
-}
-
-const {
-  errorSummary,
-  fieldErrors,
-  form,
-  isDirty,
-  saveSummary,
-  clearAllErrors,
-  clearFieldError,
-  gradeLabel,
-  resetForm,
-  rowProps,
-  setForm,
-  statusColor,
-  syncInitialForm,
-  validateForm,
-} = useStudentMaintenanceForm({
-  departments,
-  gradeOptions,
-  enrollYears,
-  statuses,
-  students,
-  editingId,
-  highlightedId,
-})
-
-// 表單欄位簡單排版（無分組）
-
-// 彈窗標題/副標題
-const dialogTitle = computed(() => {
-  if (dialogMode.value === 'view') return '檢視主檔資料示範'
-  if (dialogMode.value === 'edit') return '修改主檔資料示範'
-  return '新增主檔資料示範'
-})
-const dialogSubtitle = computed(() => {
-  if (!editingId.value) return ''
-  return `${form.value.studentId || '未填學號'}・${form.value.name || '未填姓名'}`
-})
-// 是否有修改（用於啟用儲存與提示）
-// 載入/儲存時鎖定、檢視模式 readonly
-const isFormLocked = computed(() => isLoading.value || isSaving.value)
-const {
-  confirmClose,
-  confirmCloseVisible,
-  confirmDelete,
-  confirmDeleteVisible,
-  confirmNavigate,
-  confirmNavigateVisible,
-  confirmSaveVisible,
-  confirmSwitch,
-  confirmSwitchVisible,
-  handleDialogVisibility,
-  hasNextRecord,
-  hasPrevRecord,
-  isEditMode,
-  isViewMode,
-  openAdjacentRecord,
-  openEdgeRecord,
-  pendingDeleteLabel,
-  requestCloseDialog,
-  requestDeleteConfirmation,
-  requestDeleteCurrent,
-  switchToEditMode,
-  switchToViewMode,
-} = useMaintenanceCrudFlow<StudentRecord>({
-  records: students,
-  editingId,
-  dialogMode,
-  dialogVisible,
-  isLoading,
-  isSaving,
-  isDirty,
-  clearAllErrors,
-  resetForm,
-  openEditDialog,
-  openViewDialog,
-  removeRecord: (id) => {
-    studentStore.removeStudent(id)
-    semesterStore.removeByStudentId(id)
-  },
-  describeRecord: (student) => `${student.studentId} ${student.name}`,
-  onCloseReset: () => {
-    selectedSemesterId.value = null
-    activeMobilePanel.value = 'master'
-    studentSemesters.value = []
-  },
-})
-const isFormReadonly = computed(() => isViewMode.value)
-// 重設查詢條件
-function resetSearch() {
-  search.value = {
-    studentId: '',
-    name: '',
-    department: '',
-    grade: null,
-    status: '',
-  }
-}
-
-watch(pageCount, (value) => {
-  if (currentPage.value > value) {
-    currentPage.value = value
-  }
-})
-
-// 新增：開啟彈窗，使用預設值
-function openAddDialog() {
-  loadSequence.value += 1
-  dialogMode.value = 'create'
-  editingId.value = null
-  studentSemesters.value = []
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  resetForm()
-  isLoading.value = false
-  dialogVisible.value = true
-}
-
-// 編輯：先開彈窗，資料載入後填入
-function openEditDialog(student: StudentRecord) {
-  loadSequence.value += 1
-  const sequence = loadSequence.value
-  dialogMode.value = 'edit'
-  editingId.value = student.id
-  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  dialogVisible.value = true
-  isLoading.value = true
-  clearAllErrors()
-  setTimeout(() => {
-    if (sequence !== loadSequence.value || !dialogVisible.value) return
-    setForm({
-      studentId: student.studentId,
-      name: student.name,
-      department: student.department,
-      grade: student.grade,
-      enrollYear: student.enrollYear,
-      credits: student.credits,
-      advisor: student.advisor,
-      email: student.email,
-      phone: student.phone,
-      status: student.status,
-    })
-    syncInitialForm()
-    isLoading.value = false
-  }, 350)
-}
-
-// 檢視：只讀模式並預設展開所有分組
-function openViewDialog(student: StudentRecord) {
-  loadSequence.value += 1
-  const sequence = loadSequence.value
-  dialogMode.value = 'view'
-  editingId.value = student.id
-  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  dialogVisible.value = true
-  isLoading.value = true
-  clearAllErrors()
-  setTimeout(() => {
-    if (sequence !== loadSequence.value || !dialogVisible.value) return
-    setForm({
-      studentId: student.studentId,
-      name: student.name,
-      department: student.department,
-      grade: student.grade,
-      enrollYear: student.enrollYear,
-      credits: student.credits,
-      advisor: student.advisor,
-      email: student.email,
-      phone: student.phone,
-      status: student.status,
-    })
-    syncInitialForm()
-    isLoading.value = false
-  }, 350)
-}
-
-// 先檢核再提示儲存確認
-async function requestSaveConfirmation() {
-  if (isSaving.value || isLoading.value || !isDirty.value || isViewMode.value) return
-  clearAllErrors()
-
-  const errors = validateForm()
-  if (errors.length > 0) {
-    for (const error of errors) {
-      fieldErrors.value[error.field] = [error.message]
-    }
-    await nextTick()
-    const firstError = errors[0]
-    if (firstError) scrollToField(firstError.field)
-    return
-  }
-
-  confirmSaveVisible.value = true
-}
-
-// 儲存確認後才真正送出
-function confirmSave() {
-  confirmSaveVisible.value = false
-  saveStudent()
-}
-
-// 寫入資料（Demo：直接更新列表）
-async function saveStudent() {
-  if (isSaving.value || isLoading.value) return
-  isSaving.value = true
-  await new Promise((resolve) => setTimeout(resolve, 450))
-  const payload = {
-    studentId: form.value.studentId.trim(),
-    name: form.value.name.trim(),
-    department: form.value.department,
-    grade: form.value.grade,
-    enrollYear: form.value.enrollYear,
-    credits: form.value.credits,
-    advisor: form.value.advisor.trim(),
-    email: form.value.email.trim(),
-    phone: form.value.phone.trim(),
-    status: form.value.status,
-  } as StudentPayload
-
-  if (editingId.value) {
-    const updated = studentStore.updateStudent(editingId.value, payload)
-    if (updated) highlightedId.value = editingId.value
-  } else {
-    const createdId = studentStore.addStudent(payload)
-    semesterStore.generateForStudent(createdId)
-    highlightedId.value = createdId
-  }
-
-  syncInitialForm()
-  dialogVisible.value = false
-  snackbarVisible.value = true
-  isSaving.value = false
-  window.setTimeout(() => {
-    highlightedId.value = null
-  }, 1600)
-}
-
-function scrollToField(field: string) {
-  const target = document.getElementById(`field-${field}`)
-  if (!target) return
-  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-}
-</script>
-
-<style scoped>
-:deep(.v-table__wrapper .v-field__input) {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  min-height: 32px;
-}
-
-:deep(.v-expansion-panel-text__wrapper) {
-  padding: 8px;
-}
-
-.dialog-overlay :deep(.v-overlay__content) {
-  height: 100vh;
-  display: flex;
-  justify-content: flex-end;
-  width: 100vw;
-  max-width: 100vw;
-}
-
-.dialog-panel {
-  width: 65%;
-  max-width: 100%;
-  height: 100vh;
-  background: transparent;
-  padding: 0;
-  display: flex;
-  background: transparent;
-  padding: 0;
-  display: flex;
-}
-
-.dialog-panel > .v-card {
-  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
-}
-
-.dialog-actions {
-  position: sticky;
-  bottom: 0;
-  background: rgba(var(--v-theme-surface), 0.95);
-  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  z-index: 1;
-}
-
-.dialog-title {
-  position: sticky;
-  top: 0;
-  background: rgba(var(--v-theme-surface), 0.95);
-  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  z-index: 2;
-}
-
-.dialog-toolbar {
-  position: sticky;
-  top: 73px;
-  background: rgba(var(--v-theme-surface), 0.95);
-  z-index: 1;
-}
-
-.student-table {
-  overflow: auto;
-}
-
-.student-table :deep(table) {
-  min-width: 1400px;
-}
-
-.student-table :deep(th),
-.student-table :deep(td) {
-  white-space: nowrap;
-}
-
-.student-table :deep(.v-data-table-column--fixed),
-.student-table :deep(.v-data-table-column--fixed-end) {
-  background: rgb(var(--v-theme-surface));
-}
-
-.student-table :deep(.v-data-table-column--fixed-last-start)::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: -5px;
-  bottom: 0;
-  width: 5px;
-  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
-}
-
-.student-table :deep(.v-data-table-footer) {
-  padding: 4px 0 0;
-}
-
-/* 直線 */
-/* .student-table :deep(.v-data-table-column--first-fixed-end),
-.student-table :deep(.v-data-table-column--last-fixed) {
-  border-left: none !important;
-  border-right: none !important;
-} */
-
-.form-readonly :deep(.v-field) {
-  pointer-events: none;
-}
-
-.dialog-panel.is-mobile {
-  width: 100%;
-}
-
-.dialog-panel.is-mobile :deep(.v-card) {
-  width: 100%;
-  box-shadow: none;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-title) {
-  padding-inline: 16px;
-  min-height: 72px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-toolbar) {
-  top: 72px;
-  padding-inline: 12px;
-  min-height: 52px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-actions) {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
-}
-
-tbody tr.is-highlighted {
-  animation: row-highlight 1.6s ease-out;
-}
-
-@keyframes row-highlight {
-  0% {
-    background-color: rgba(var(--v-theme-primary), 0.18);
-  }
-
-  100% {
-    background-color: transparent;
-  }
-}
-
-@media (max-width: 600px) {
-  .dialog-overlay :deep(.v-overlay__content) {
-    justify-content: stretch;
-  }
-
-  .dialog-panel {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/pages/PageMasterDetailCMaintenance.vue b/src/components/pages/PageMasterDetailCMaintenance.vue
deleted file mode 100644
index 2252601..0000000
--- a/src/components/pages/PageMasterDetailCMaintenance.vue
+++ /dev/null
@@ -1,1122 +0,0 @@
-<template>
-  <!-- Page component 組合 PageMaint 外殼、主檔表格、子檔區與 dialog；流程狀態集中在本頁 script。 -->
-  <page-maint
-    :search-panel-open="searchPanelOpen"
-    :title="page.title"
-    @create="openAddDialog"
-    @toggle-search="searchPanelOpen = !searchPanelOpen"
-  >
-    <!-- 搜尋欄位放在 PageMaint 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
-    <template #search-fields>
-      <v-col cols="12" md="2">
-        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
-        <v-text-field
-          id="search-student-id"
-          v-model="search.studentId"
-          aria-labelledby="search-student-id-label"
-          density="compact"
-          hide-details
-          name="searchStudentId"
-          placeholder="例如：S2024001"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
-        <v-text-field
-          id="search-name"
-          v-model="search.name"
-          aria-labelledby="search-name-label"
-          density="compact"
-          hide-details
-          name="searchName"
-          placeholder="例如：王小明"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
-        <v-select
-          id="search-department"
-          v-model="search.department"
-          aria-labelledby="search-department-label"
-          density="compact"
-          hide-details
-          :items="departments"
-          name="searchDepartment"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
-        <v-select
-          id="search-grade"
-          v-model="search.grade"
-          aria-labelledby="search-grade-label"
-          density="compact"
-          hide-details
-          item-title="title"
-          item-value="value"
-          :items="gradeOptions"
-          name="searchGrade"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="12" md="2">
-        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
-        <v-select
-          id="search-status"
-          v-model="search.status"
-          aria-labelledby="search-status-label"
-          density="compact"
-          hide-details
-          :items="statuses"
-          name="searchStatus"
-          variant="outlined"
-        />
-      </v-col>
-      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
-      </v-col>
-    </template>
-    <!-- table slot 放主檔表格與列操作，操作事件再交給頁面流程函式處理。 -->
-    <template #table>
-      <v-data-table
-        v-model:page="currentPage"
-        class="student-table"
-        density="compact"
-        fixed-header
-        :headers="tableHeaders"
-        height="100%"
-        hide-default-footer
-        :items="students"
-        :items-per-page="itemsPerPage"
-        :row-props="rowProps"
-      >
-        <template #[`item.grade`]="{ item }">
-          {{ gradeLabel(item.grade) }}
-        </template>
-        <template #[`item.status`]="{ item }">
-          <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
-            {{ item.status }}
-          </v-chip>
-        </template>
-        <template #[`item.actions`]="{ item }">
-          <div class="d-flex ga-2">
-            <v-btn
-              color="info"
-              :prepend-icon="mdiEye"
-              size="small"
-              variant="text"
-              @click="openViewDialog(item)"
-            >
-              檢視
-            </v-btn>
-            <v-btn
-              color="primary"
-              :prepend-icon="mdiPencil"
-              size="small"
-              variant="text"
-              @click="openEditDialog(item)"
-            >
-              修改
-            </v-btn>
-            <v-btn
-              color="error"
-              :prepend-icon="mdiDelete"
-              size="small"
-              variant="text"
-              @click="requestDeleteConfirmation(item)"
-            >
-              刪除
-            </v-btn>
-          </div>
-        </template>
-        <template #bottom>
-          <div class="d-flex align-center justify-space-between px-4 py-3">
-            <div class="text-body-2 text-medium-emphasis">
-              {{ pageSummary }}
-            </div>
-            <div class="d-flex align-center ga-2">
-              <v-btn
-                :disabled="currentPage <= 1"
-                size="small"
-                variant="text"
-                @click="currentPage = 1"
-                >第一頁</v-btn
-              >
-              <v-btn
-                :disabled="currentPage <= 1"
-                size="small"
-                variant="text"
-                @click="currentPage -= 1"
-                >上一頁</v-btn
-              >
-              <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
-              <v-btn
-                :disabled="currentPage >= pageCount"
-                size="small"
-                variant="text"
-                @click="currentPage += 1"
-                >下一頁</v-btn
-              >
-              <v-btn
-                :disabled="currentPage >= pageCount"
-                size="small"
-                variant="text"
-                @click="currentPage = pageCount"
-                >最後頁</v-btn
-              >
-            </div>
-          </div>
-        </template>
-      </v-data-table>
-    </template>
-  </page-maint>
-
-  <!-- 主從式維護視窗 -->
-  <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
-  <teleport to="body">
-    <!-- 包成元件需要傳高度寬度給dialog-panel -->
-    <v-overlay
-      class="dialog-overlay"
-      :close-on-content-click="false"
-      :model-value="dialogVisible"
-      scrim="rgba(0, 0, 0, 0.45)"
-      scroll-strategy="block"
-      @update:model-value="handleDialogVisibility"
-    >
-      <div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
-        <master-detail-c-course-mobile-panel
-          v-if="isMobile && activeMobilePanel === 'detail'"
-          :is-form-locked="isFormLocked"
-          :is-view-mode="isViewMode"
-          :semester="selectedSemester"
-          @add-course="openAddCourseDialog"
-          @close="closeDetailPanel"
-          @delete-course="removeCourseFromSemester"
-          @update-course="handleUpdateCourse"
-        />
-
-        <!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
-        <!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
-        <mnt-dialog-card
-          v-else
-          :content-class="
-            isMobile
-              ? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
-              : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
-          "
-          :dialog-subtitle="dialogSubtitle"
-          :dialog-title="dialogTitle"
-          :is-edit-mode="isEditMode"
-          :is-view-mode="isViewMode"
-          width="100%"
-        >
-          <template #toolbar>
-            <mnt-record-nav-toolbar
-              :has-next-record="hasNextRecord"
-              :has-prev-record="hasPrevRecord"
-              :is-edit-mode="isEditMode"
-              :is-view-mode="isViewMode"
-              :mobile="isMobile"
-              @first="openEdgeRecord('first')"
-              @last="openEdgeRecord('last')"
-              @next="openAdjacentRecord('next')"
-              @prev="openAdjacentRecord('prev')"
-              @switch-to-edit="switchToEditMode"
-              @switch-to-view="switchToViewMode"
-            />
-          </template>
-          <template #content>
-            <!-- 錯誤提示：當表單驗證未通過時顯示 -->
-            <v-alert
-              v-if="errorSummary.length > 0 && !isLoading"
-              class="mb-4"
-              type="error"
-              variant="tonal"
-            >
-              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
-              <div class="d-flex flex-column ga-1">
-                <v-btn
-                  v-for="error in errorSummary"
-                  :key="error.field"
-                  color="error"
-                  size="small"
-                  variant="text"
-                  @click="scrollToField(error.field)"
-                >
-                  {{ error.message }}
-                </v-btn>
-              </div>
-            </v-alert>
-
-            <!-- 載入中骨架畫面 -->
-            <v-skeleton-loader
-              v-if="isLoading"
-              class="mt-4"
-              type="subtitle,paragraph"
-              width="100%"
-            />
-
-            <!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
-            <v-form
-              v-else
-              :class="[
-                { 'form-readonly': isFormReadonly },
-                isMobile ? '' : 'd-flex flex-column h-100',
-              ]"
-              @submit.prevent="requestSaveConfirmation"
-            >
-              <MasterFileFormFields
-                :departments="departments"
-                :enroll-years="enrollYears"
-                :field-errors="fieldErrors"
-                :form="form"
-                :grade-options="gradeOptions"
-                :is-form-locked="isFormLocked"
-                :is-form-readonly="isFormReadonly"
-                :statuses="statuses"
-                @clear-field="clearFieldError"
-              />
-
-              <v-divider />
-              <DetailSimpleList
-                :is-form-locked="isFormLocked"
-                :is-form-readonly="isFormReadonly"
-                :is-mobile="isMobile"
-                :selected-semester-id="selectedSemesterId"
-                :semesters="studentSemesters"
-                @add-course="openAddCourseDialog"
-                @delete-course="removeCourseFromSemester"
-                @select-semester="handleSemesterSelect"
-                @update-course="handleUpdateCourse"
-              />
-            </v-form>
-          </template>
-          <template #actions>
-            <template v-if="isMobile">
-              <v-btn
-                class="flex-grow-1"
-                :disabled="isSaving"
-                variant="text"
-                @click="requestCloseDialog"
-                >取消</v-btn
-              >
-              <v-btn
-                v-if="isEditMode"
-                class="flex-grow-1"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="requestDeleteCurrent"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                class="flex-grow-1"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="requestSaveConfirmation"
-              >
-                儲存
-              </v-btn>
-              <v-btn
-                v-else
-                class="flex-grow-1"
-                color="primary"
-                variant="flat"
-                @click="requestCloseDialog"
-                >關閉</v-btn
-              >
-            </template>
-            <template v-else>
-              <v-spacer />
-              <v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
-              <v-btn
-                v-if="isEditMode"
-                color="error"
-                :disabled="isSaving"
-                variant="tonal"
-                @click="requestDeleteCurrent"
-              >
-                刪除
-              </v-btn>
-              <v-btn
-                v-if="!isViewMode"
-                color="primary"
-                :disabled="!isDirty || isLoading"
-                :loading="isSaving"
-                variant="flat"
-                @click="requestSaveConfirmation"
-              >
-                儲存
-              </v-btn>
-              <v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
-            </template>
-          </template>
-        </mnt-dialog-card>
-      </div>
-    </v-overlay>
-  </teleport>
-
-  <ConfirmDialog
-    v-model="confirmCloseVisible"
-    confirm-color="error"
-    confirm-text="關閉不儲存"
-    message="目前有尚未儲存的內容，確定要關閉嗎？"
-    title="未儲存變更"
-    @confirm="confirmClose"
-  />
-
-  <ConfirmDialog
-    v-model="confirmSaveVisible"
-    :confirm-loading="isSaving"
-    confirm-text="確認儲存"
-    max-width="520"
-    title="確認儲存變更"
-    @confirm="confirmSave"
-  >
-    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
-      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
-        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
-        <div v-if="item.before !== null" class="text-body-2">
-          <span class="text-medium-emphasis">原：</span>
-          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
-            {{ item.before }}
-          </span>
-        </div>
-        <div class="text-body-2">
-          <span class="text-medium-emphasis">新：</span>
-          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
-            {{ item.after }}
-          </span>
-        </div>
-      </div>
-    </div>
-    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
-  </ConfirmDialog>
-
-  <ConfirmDialog
-    v-model="confirmDeleteVisible"
-    confirm-color="error"
-    confirm-text="確定刪除"
-    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`"
-    title="確認刪除"
-    @confirm="confirmDelete"
-  />
-
-  <ConfirmDialog
-    v-model="confirmSwitchVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="confirmSwitch"
-  />
-
-  <ConfirmDialog
-    v-model="confirmNavigateVisible"
-    confirm-text="確定切換"
-    max-width="480"
-    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
-    title="未儲存變更"
-    @confirm="confirmNavigate"
-  />
-
-  <!-- 成功提示 -->
-  <v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
-    儲存成功
-  </v-snackbar>
-
-  <!-- 新增成績對話框 -->
-  <v-dialog v-model="addCourseDialogVisible" max-width="480" persistent>
-    <v-card>
-      <v-card-title class="d-flex align-center">
-        <v-icon color="primary" start :icon="mdiSchool" />
-        新增成績
-      </v-card-title>
-      <v-card-text>
-        <v-select
-          v-model="addCourseForm.semesterId"
-          class="mb-3"
-          density="comfortable"
-          item-title="label"
-          item-value="value"
-          :items="semesterOptions"
-          label="學期"
-          variant="outlined"
-        />
-        <v-select
-          v-model="addCourseForm.courseName"
-          class="mb-3"
-          density="comfortable"
-          :items="availableCourses"
-          label="課程名稱"
-          variant="outlined"
-          @update:model-value="handleCourseSelect"
-        />
-        <v-text-field
-          v-model.number="addCourseForm.credits"
-          class="mb-3"
-          density="comfortable"
-          label="學分"
-          type="number"
-          variant="outlined"
-        />
-        <v-text-field
-          v-model.number="addCourseForm.score"
-          density="comfortable"
-          label="分數"
-          type="number"
-          variant="outlined"
-        />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
-        <v-btn color="primary" :disabled="!canAddCourse" variant="flat" @click="confirmAddCourse"
-          >新增</v-btn
-        >
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil, mdiSchool } from '@mdi/js'
-import { computed, nextTick, ref, watch } from 'vue'
-import { useDisplay } from 'vuetify'
-
-import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
-import MasterDetailCCourseMobilePanel from '@/components/maint/master-detail/CourseMobilePanel.vue'
-import DetailSimpleList from '@/components/maint/master-detail/DetailSimpleList.vue'
-import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
-import MntDialogCard from '@/components/maint/MntDialogCard.vue'
-import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
-import PageMaint from '@/components/PageMaint.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
-import { type CourseRecord, type SemesterRecord, useSemesterStore } from '@/stores/semesters'
-import { type StudentRecord, useStudentStore } from '@/stores/students'
-import type { MaintenancePageModel } from '@/models/page'
-
-defineProps<{
-  page: MaintenancePageModel
-}>()
-
-// 下拉選項：系所/年級/入學年度/狀態
-const departments = ['資訊工程', '企業管理', '應用外語', '視覺設計', '財務金融']
-const gradeOptions = [
-  { title: '大一', value: 1 },
-  { title: '大二', value: 2 },
-  { title: '大三', value: 3 },
-  { title: '大四', value: 4 },
-  { title: '研究所', value: 5 },
-]
-const enrollYears = [2024, 2023, 2022, 2021, 2020, 2019]
-const statuses = ['在學', '休學', '畢業']
-
-const { smAndUp } = useDisplay()
-const isMobile = computed(() => !smAndUp.value)
-
-// 表格欄位設定（含固定欄與排序）
-const tableHeaders = [
-  {
-    title: '學號',
-    key: 'studentId',
-    sortable: true,
-    fixed: smAndUp.value && ('start' as const),
-    width: 120,
-  },
-  {
-    title: '姓名',
-    key: 'name',
-    sortable: true,
-    fixed: smAndUp.value && ('start' as const),
-    width: 100,
-  },
-  { title: '系所', key: 'department', sortable: true, width: 140 },
-  { title: '年級', key: 'grade', sortable: true, width: 90 },
-  { title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
-  { title: '已修學分', key: 'credits', sortable: true, width: 110 },
-  { title: 'Email', key: 'email', sortable: true, width: 200 },
-  { title: '電話', key: 'phone', sortable: true, width: 140 },
-  { title: '指導老師', key: 'advisor', sortable: true, width: 110 },
-  { title: '狀態', key: 'status', sortable: true, width: 90 },
-  {
-    title: '操作',
-    key: 'actions',
-    sortable: false,
-    fixed: smAndUp.value && ('end' as const),
-    width: 'auto',
-    cellProps: { class: 'px-0 bg-background' },
-  },
-]
-
-// 查詢條件（示意用，未接 API）
-const search = ref({
-  studentId: '',
-  name: '',
-  department: '',
-  grade: null as number | null,
-  status: '',
-})
-// 查詢區塊是否展開
-const searchPanelOpen = ref(false)
-
-// 透過 store 管理 Demo 資料與 CRUD
-const studentStore = useStudentStore()
-const semesterStore = useSemesterStore()
-const students = computed(() => studentStore.students)
-type StudentPayload = Omit<StudentRecord, 'id'>
-const itemsPerPage = 10
-const currentPage = ref(1)
-const pageCount = computed(() => Math.max(1, Math.ceil(students.value.length / itemsPerPage)))
-const pageSummary = computed(() => {
-  const total = students.value.length
-  if (total === 0) return '第 0-0 筆 / 共 0 筆'
-
-  const start = (currentPage.value - 1) * itemsPerPage + 1
-  const end = Math.min(currentPage.value * itemsPerPage, total)
-  return `第 ${start}-${end} 筆 / 共 ${total} 筆`
-})
-
-// 彈窗狀態與流程控制
-const dialogVisible = ref(false)
-const editingId = ref<number | null>(null)
-const dialogMode = ref<'create' | 'edit' | 'view'>('create')
-const isLoading = ref(false)
-const isSaving = ref(false)
-// UI 回饋
-const snackbarVisible = ref(false)
-const highlightedId = ref<number | null>(null)
-// 防止快速切換導致的異步覆蓋
-const loadSequence = ref(0)
-
-// Master-Detail 擴充
-const studentSemesters = ref<SemesterRecord[]>([])
-const selectedSemesterId = ref<number | null>(null)
-const activeMobilePanel = ref<'master' | 'detail'>('master')
-const selectedSemester = computed(
-  () => studentSemesters.value.find((item) => item.id === selectedSemesterId.value) ?? null
-)
-
-// 新增成績對話框狀態
-const addCourseDialogVisible = ref(false)
-const addCourseForm = ref({
-  semesterId: null as number | null,
-  courseName: '',
-  credits: 3,
-  score: 0,
-})
-
-// 可選課程清單（與 store 內的 subjects 一致）
-const availableCourses = [
-  '資料結構',
-  '演算法',
-  '作業系統',
-  '計算機組織',
-  '線性代數',
-  '機率與統計',
-  '資料庫系統',
-  '人工智慧導論',
-  '網頁程式設計',
-  '計算機網路',
-]
-
-// 學期下拉選項
-const semesterOptions = computed(() =>
-  studentSemesters.value.map((sem) => ({
-    value: sem.id,
-    label: sem.semesterName,
-  }))
-)
-
-// 是否可以新增
-const canAddCourse = computed(
-  () =>
-    addCourseForm.value.semesterId !== null &&
-    addCourseForm.value.courseName !== '' &&
-    addCourseForm.value.credits > 0
-)
-
-// 開啟新增成績對話框
-function openAddCourseDialog(semesterId?: number) {
-  addCourseForm.value = {
-    semesterId: semesterId ?? selectedSemesterId.value ?? studentSemesters.value[0]?.id ?? null,
-    courseName: '',
-    credits: 3,
-    score: 0,
-  }
-  addCourseDialogVisible.value = true
-}
-
-// 選擇課程時自動帶入學分
-function handleCourseSelect(courseName: string) {
-  const creditsMap: Record<string, number> = {
-    資料結構: 3,
-    演算法: 3,
-    作業系統: 3,
-    計算機組織: 3,
-    線性代數: 3,
-    機率與統計: 3,
-    資料庫系統: 3,
-    人工智慧導論: 3,
-    網頁程式設計: 3,
-    計算機網路: 3,
-  }
-  const credits = creditsMap[courseName]
-  if (credits !== undefined) {
-    addCourseForm.value.credits = credits
-  }
-}
-
-// 確認新增成績
-function confirmAddCourse() {
-  if (!addCourseForm.value.semesterId || !addCourseForm.value.courseName) return
-
-  const semester = studentSemesters.value.find((sem) => sem.id === addCourseForm.value.semesterId)
-  if (!semester) return
-
-  semesterStore.updateSemester(addCourseForm.value.semesterId, {
-    courses: [
-      ...semester.courses,
-      {
-        code: `CS${Date.now()}`,
-        name: addCourseForm.value.courseName,
-        credits: addCourseForm.value.credits,
-        score: addCourseForm.value.score,
-      },
-    ],
-  })
-
-  refreshSemesters()
-  addCourseDialogVisible.value = false
-}
-
-// 輔助函式：重新載入當前學生的學期資料
-function refreshSemesters() {
-  if (editingId.value) {
-    studentSemesters.value = semesterStore.getStudentSemesters(editingId.value)
-  }
-}
-
-function handleSemesterSelect(semesterId: number) {
-  selectedSemesterId.value = semesterId
-  if (isMobile.value) {
-    activeMobilePanel.value = 'detail'
-  }
-}
-
-function closeDetailPanel() {
-  if (isMobile.value) {
-    activeMobilePanel.value = 'master'
-    return
-  }
-  selectedSemesterId.value = null
-}
-
-function handleUpdateCourse(
-  semesterId: number,
-  courseIndex: number,
-  payload: Partial<CourseRecord>
-) {
-  const semester = studentSemesters.value.find((item) => item.id === semesterId)
-  if (!semester) return
-  const nextCourses = semester.courses.map((course, idx) =>
-    idx === courseIndex ? { ...course, ...payload } : course
-  )
-  semesterStore.updateSemester(semesterId, { courses: nextCourses })
-}
-
-function removeCourseFromSemester(semesterId: number, courseIndex: number) {
-  const semester = studentSemesters.value.find((item) => item.id === semesterId)
-  if (!semester) return
-  semesterStore.updateSemester(semesterId, {
-    courses: semester.courses.filter((_, idx) => idx !== courseIndex),
-  })
-}
-
-const {
-  errorSummary,
-  fieldErrors,
-  form,
-  isDirty,
-  saveSummary,
-  clearAllErrors,
-  clearFieldError,
-  gradeLabel,
-  resetForm,
-  rowProps,
-  setForm,
-  statusColor,
-  syncInitialForm,
-  validateForm,
-} = useStudentMaintenanceForm({
-  departments,
-  gradeOptions,
-  enrollYears,
-  statuses,
-  students,
-  editingId,
-  highlightedId,
-})
-
-// 表單欄位簡單排版（無分組）
-
-// 彈窗標題/副標題
-const dialogTitle = computed(() => {
-  if (dialogMode.value === 'view') return '檢視主檔資料示範'
-  if (dialogMode.value === 'edit') return '修改主檔資料示範'
-  return '新增主檔資料示範'
-})
-const dialogSubtitle = computed(() => {
-  if (!editingId.value) return ''
-  return `${form.value.studentId || '未填學號'}・${form.value.name || '未填姓名'}`
-})
-// 是否有修改（用於啟用儲存與提示）
-// 載入/儲存時鎖定、檢視模式 readonly
-const isFormLocked = computed(() => isLoading.value || isSaving.value)
-const {
-  confirmClose,
-  confirmCloseVisible,
-  confirmDelete,
-  confirmDeleteVisible,
-  confirmNavigate,
-  confirmNavigateVisible,
-  confirmSaveVisible,
-  confirmSwitch,
-  confirmSwitchVisible,
-  handleDialogVisibility,
-  hasNextRecord,
-  hasPrevRecord,
-  isEditMode,
-  isViewMode,
-  openAdjacentRecord,
-  openEdgeRecord,
-  pendingDeleteLabel,
-  requestCloseDialog,
-  requestDeleteConfirmation,
-  requestDeleteCurrent,
-  switchToEditMode,
-  switchToViewMode,
-} = useMaintenanceCrudFlow<StudentRecord>({
-  records: students,
-  editingId,
-  dialogMode,
-  dialogVisible,
-  isLoading,
-  isSaving,
-  isDirty,
-  clearAllErrors,
-  resetForm,
-  openEditDialog,
-  openViewDialog,
-  removeRecord: (id) => {
-    studentStore.removeStudent(id)
-    semesterStore.removeByStudentId(id)
-  },
-  describeRecord: (student) => `${student.studentId} ${student.name}`,
-  onCloseReset: () => {
-    selectedSemesterId.value = null
-    activeMobilePanel.value = 'master'
-    studentSemesters.value = []
-  },
-})
-const isFormReadonly = computed(() => isViewMode.value)
-// 重設查詢條件
-function resetSearch() {
-  search.value = {
-    studentId: '',
-    name: '',
-    department: '',
-    grade: null,
-    status: '',
-  }
-}
-
-watch(pageCount, (value) => {
-  if (currentPage.value > value) {
-    currentPage.value = value
-  }
-})
-
-// 新增：開啟彈窗，使用預設值
-function openAddDialog() {
-  loadSequence.value += 1
-  dialogMode.value = 'create'
-  editingId.value = null
-  studentSemesters.value = []
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  resetForm()
-  isLoading.value = false
-  dialogVisible.value = true
-}
-
-// 編輯：先開彈窗，資料載入後填入
-function openEditDialog(student: StudentRecord) {
-  loadSequence.value += 1
-  const sequence = loadSequence.value
-  dialogMode.value = 'edit'
-  editingId.value = student.id
-  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  dialogVisible.value = true
-  isLoading.value = true
-  clearAllErrors()
-  setTimeout(() => {
-    if (sequence !== loadSequence.value || !dialogVisible.value) return
-    setForm({
-      studentId: student.studentId,
-      name: student.name,
-      department: student.department,
-      grade: student.grade,
-      enrollYear: student.enrollYear,
-      credits: student.credits,
-      advisor: student.advisor,
-      email: student.email,
-      phone: student.phone,
-      status: student.status,
-    })
-    syncInitialForm()
-    isLoading.value = false
-  }, 350)
-}
-
-// 檢視：只讀模式並預設展開所有分組
-function openViewDialog(student: StudentRecord) {
-  loadSequence.value += 1
-  const sequence = loadSequence.value
-  dialogMode.value = 'view'
-  editingId.value = student.id
-  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
-  selectedSemesterId.value = null
-  activeMobilePanel.value = 'master'
-  dialogVisible.value = true
-  isLoading.value = true
-  clearAllErrors()
-  setTimeout(() => {
-    if (sequence !== loadSequence.value || !dialogVisible.value) return
-    setForm({
-      studentId: student.studentId,
-      name: student.name,
-      department: student.department,
-      grade: student.grade,
-      enrollYear: student.enrollYear,
-      credits: student.credits,
-      advisor: student.advisor,
-      email: student.email,
-      phone: student.phone,
-      status: student.status,
-    })
-    syncInitialForm()
-    isLoading.value = false
-  }, 350)
-}
-
-// 先檢核再提示儲存確認
-async function requestSaveConfirmation() {
-  if (isSaving.value || isLoading.value || !isDirty.value || isViewMode.value) return
-  clearAllErrors()
-
-  const errors = validateForm()
-  if (errors.length > 0) {
-    for (const error of errors) {
-      fieldErrors.value[error.field] = [error.message]
-    }
-    await nextTick()
-    const firstError = errors[0]
-    if (firstError) scrollToField(firstError.field)
-    return
-  }
-
-  confirmSaveVisible.value = true
-}
-
-// 儲存確認後才真正送出
-function confirmSave() {
-  confirmSaveVisible.value = false
-  saveStudent()
-}
-
-// 寫入資料（Demo：直接更新列表）
-async function saveStudent() {
-  if (isSaving.value || isLoading.value) return
-  isSaving.value = true
-  await new Promise((resolve) => setTimeout(resolve, 450))
-  const payload = {
-    studentId: form.value.studentId.trim(),
-    name: form.value.name.trim(),
-    department: form.value.department,
-    grade: form.value.grade,
-    enrollYear: form.value.enrollYear,
-    credits: form.value.credits,
-    advisor: form.value.advisor.trim(),
-    email: form.value.email.trim(),
-    phone: form.value.phone.trim(),
-    status: form.value.status,
-  } as StudentPayload
-
-  if (editingId.value) {
-    const updated = studentStore.updateStudent(editingId.value, payload)
-    if (updated) highlightedId.value = editingId.value
-  } else {
-    const createdId = studentStore.addStudent(payload)
-    semesterStore.generateForStudent(createdId)
-    highlightedId.value = createdId
-  }
-
-  syncInitialForm()
-  dialogVisible.value = false
-  snackbarVisible.value = true
-  isSaving.value = false
-  window.setTimeout(() => {
-    highlightedId.value = null
-  }, 1600)
-}
-
-function scrollToField(field: string) {
-  const target = document.getElementById(`field-${field}`)
-  if (!target) return
-  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-}
-</script>
-
-<style scoped>
-:deep(.v-table__wrapper .v-field__input) {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  min-height: 32px;
-}
-
-.dialog-overlay :deep(.v-overlay__content) {
-  height: 100vh;
-  display: flex;
-  justify-content: flex-end;
-  width: 100vw;
-  max-width: 100vw;
-}
-
-.dialog-panel {
-  width: 65%;
-  max-width: 100%;
-  height: 100vh;
-  background: transparent;
-  padding: 0;
-  display: flex;
-}
-
-.dialog-panel > .v-card {
-  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
-}
-
-.dialog-actions {
-  position: sticky;
-  bottom: 0;
-  background: rgba(var(--v-theme-surface), 0.95);
-  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  z-index: 1;
-}
-
-.dialog-title {
-  position: sticky;
-  top: 0;
-  background: rgba(var(--v-theme-surface), 0.95);
-  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
-  z-index: 2;
-}
-
-.student-table {
-  overflow: auto;
-}
-
-.student-table :deep(table) {
-  min-width: 1400px;
-}
-
-.student-table :deep(th),
-.student-table :deep(td) {
-  white-space: nowrap;
-}
-
-.student-table :deep(.v-data-table-column--fixed),
-.student-table :deep(.v-data-table-column--fixed-end) {
-  background: rgb(var(--v-theme-surface));
-}
-
-.student-table :deep(.v-data-table-column--fixed-last-start)::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: -5px;
-  bottom: 0;
-  width: 5px;
-  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
-}
-
-.student-table :deep(.v-data-table-footer) {
-  padding: 4px 0 0;
-}
-
-/* 直線 */
-/* .student-table :deep(.v-data-table-column--first-fixed-end),
-.student-table :deep(.v-data-table-column--last-fixed) {
-  border-left: none !important;
-  border-right: none !important;
-} */
-
-.form-readonly :deep(.v-field) {
-  pointer-events: none;
-}
-
-tbody tr.is-highlighted {
-  animation: row-highlight 1.6s ease-out;
-}
-
-@keyframes row-highlight {
-  0% {
-    background-color: rgba(var(--v-theme-primary), 0.18);
-  }
-
-  100% {
-    background-color: transparent;
-  }
-}
-
-.dialog-panel.is-mobile {
-  width: 100%;
-}
-
-.dialog-panel.is-mobile :deep(.v-card) {
-  width: 100%;
-  box-shadow: none;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-title) {
-  padding-inline: 16px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-toolbar) {
-  padding-inline: 12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.dialog-panel.is-mobile :deep(.dialog-actions) {
-  gap: 8px;
-  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
-}
-
-@media (max-width: 600px) {
-  .dialog-overlay :deep(.v-overlay__content) {
-    justify-content: stretch;
-  }
-}
-</style>
diff --git a/src/components/pages/PageSectionFormPageDemo.vue b/src/components/pages/PageSectionFormPageDemo.vue
deleted file mode 100644
index 595bff7..0000000
--- a/src/components/pages/PageSectionFormPageDemo.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
-import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
-import SectionFormPage from '@/components/sections/SectionFormPage.vue'
-import type {
-  DemoFormState,
-  SectionsDemoPageModel,
-} from '@/composables/page-drivers/useSectionsDemoPage'
-
-defineProps<{
-  page: SectionsDemoPageModel
-}>()
-
-// 表單內容由 page driver 持有，Page component 只透過 v-model 呈現與回寫。
-const demoForm = defineModel<DemoFormState>('demoForm', { required: true })
-
-// 送出、清除、返回都往上 emit，讓 page driver 統一處理訊息與副作用。
-const emit = defineEmits<{
-  (e: 'back'): void
-  (e: 'reset'): void
-  (e: 'submit'): void
-}>()
-</script>
-
-<template>
-  <SectionFormPage
-    back-label="回到列表"
-    reset-label="清除"
-    submit-label="送出"
-    :message="page.formMessage"
-    title="SectionFormPage 報表申請"
-    @back="emit('back')"
-    @reset="emit('reset')"
-    @submit="emit('submit')"
-  >
-    <!-- SectionFormPage 決定表單頁外殼；fields slot 放實際欄位組合。 -->
-    <template #fields>
-      <v-row density="compact">
-        <v-col cols="12" md="6">
-          <BaseFormTextField v-model="demoForm.title" label="標題" />
-        </v-col>
-        <v-col cols="12" md="3">
-          <BaseFormSelect v-model="demoForm.owner" label="單位" :items="page.ownerOptions" />
-        </v-col>
-        <v-col cols="12" md="3">
-          <BaseFormSelect v-model="demoForm.category" label="類型" :items="page.categoryOptions" />
-        </v-col>
-        <v-col cols="12">
-          <BaseFormTextField v-model="demoForm.description" label="說明" />
-        </v-col>
-      </v-row>
-    </template>
-
-    <!-- sections slot 放表單主欄位以外的子區段，例如明細表格或補充資訊。 -->
-    <template #sections>
-      <v-card class="mb-2">
-        <v-card-title class="text-title-medium font-weight-bold">明細</v-card-title>
-        <v-card-text>
-          <v-table density="compact">
-            <thead>
-              <tr>
-                <th>欄位</th>
-                <th>值</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>單位</td>
-                <td>{{ demoForm.owner }}</td>
-              </tr>
-              <tr>
-                <td>類型</td>
-                <td>{{ demoForm.category }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-card-text>
-      </v-card>
-    </template>
-
-    <!-- notices slot 放配合事項，讓外殼固定、內容由頁面決定。 -->
-    <template #notices>
-      <v-list class="bg-yellow-lighten-5" density="compact">
-        <v-list-item>送出前確認標題與單位。</v-list-item>
-        <v-list-item>表單狀態由 page driver 管理。</v-list-item>
-      </v-list>
-    </template>
-  </SectionFormPage>
-</template>
diff --git a/src/components/pages/PageSectionQueryPageDemo.vue b/src/components/pages/PageSectionQueryPageDemo.vue
deleted file mode 100644
index 8131d0f..0000000
--- a/src/components/pages/PageSectionQueryPageDemo.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
-import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
-import SectionQueryPage from '@/components/sections/SectionQueryPage.vue'
-import type {
-  ReportFilters,
-  SectionsDemoPageModel,
-} from '@/composables/page-drivers/useSectionsDemoPage'
-
-defineProps<{
-  page: SectionsDemoPageModel
-}>()
-
-// Page component 只接收 page driver 組好的 page model；查詢條件用 v-model 回寫給 view/page driver。
-const queryFilters = defineModel<ReportFilters>('queryFilters', { required: true })
-
-// 使用者意圖往上 emit，由 page driver 決定查詢、返回等副作用。
-const emit = defineEmits<{
-  (e: 'back'): void
-  (e: 'search'): void
-}>()
-</script>
-
-<template>
-  <SectionQueryPage
-    back-label="回到列表"
-    title="查詢頁DEMO"
-    @back="emit('back')"
-    @search="emit('search')"
-  >
-    <!-- SectionQueryPage 決定查詢頁外殼；欄位內容由 filters slot 交給頁面自行組合。 -->
-    <template #filters>
-      <v-col cols="12" md="4">
-        <BaseFormTextField v-model="queryFilters.keyword" label="關鍵字" />
-      </v-col>
-      <v-col cols="12" md="4">
-        <BaseFormSelect v-model="queryFilters.owner" label="單位" :items="page.ownerOptions" />
-      </v-col>
-    </template>
-
-    <!-- results slot 放查詢結果；資料仍由 page model 提供，這裡只負責呈現。 -->
-    <template #results>
-      <v-alert v-if="page.queryMessage" class="mb-3" type="success" variant="tonal">
-        {{ page.queryMessage }}
-      </v-alert>
-      <v-table density="compact">
-        <thead class="bg-primary">
-          <tr>
-            <th>名稱</th>
-            <th>單位</th>
-            <th>狀態</th>
-            <th>更新日</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="page.reports.length === 0">
-            <td class="text-center" colspan="4">尚無查詢結果</td>
-          </tr>
-          <tr v-for="row in page.reports" :key="row.id">
-            <td>{{ row.title }}</td>
-            <td>{{ row.owner }}</td>
-            <td>{{ row.status }}</td>
-            <td>{{ row.updatedAt }}</td>
-          </tr>
-        </tbody>
-      </v-table>
-    </template>
-  </SectionQueryPage>
-</template>
diff --git a/src/components/pages/PageSettings.vue b/src/components/pages/PageSettings.vue
deleted file mode 100644
index 92357ec..0000000
--- a/src/components/pages/PageSettings.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-export interface SettingsPageModel {
-  title: string
-}
-
-defineProps<{
-  page: SettingsPageModel
-}>()
-</script>
-
-<template>
-  <!-- Page component 只呈現 page driver 組好的設定頁 model。 -->
-  <div>{{ page.title }}</div>
-</template>
diff --git a/src/composables/page-drivers/useMasterDetailAMaintenancePage.ts b/src/composables/page-drivers/useMasterDetailAMaintenancePage.ts
index ee7101d..4416651 100644
--- a/src/composables/page-drivers/useMasterDetailAMaintenancePage.ts
+++ b/src/composables/page-drivers/useMasterDetailAMaintenancePage.ts
@@ -383,8 +383,11 @@ export function useMasterDetailAMaintenancePage() {
   }
 
   return {
+    confirmSave,
     currentPage,
     departments,
+    detailForm,
+    flow,
     formState,
     gradeOptions,
     itemsPerPage,
@@ -396,7 +399,9 @@ export function useMasterDetailAMaintenancePage() {
     pageCount,
     pageModel,
     pageSummary,
+    requestSaveConfirmation,
     resetSearch,
+    scrollToField,
     search,
     searchPanelOpen,
     snackbarVisible,
diff --git a/src/views/FncPage.vue b/src/views/FncPage.vue
index 0d12081..32fdeb7 100644
--- a/src/views/FncPage.vue
+++ b/src/views/FncPage.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import PageFunction from '@/components/pages/PageFunction.vue'
-import type { FunctionPageModel } from '@/components/pages/PageFunction.vue'
 
 const route = useRoute()
-const pageModel = computed<FunctionPageModel>(() => ({
+const pageModel = computed(() => ({
   fncId: String(route.params.fncId ?? ''),
 }))
 </script>
 
 <template>
-  <PageFunction :page="pageModel" />
+  <v-sheet height="100%" width="100%">
+    {{ pageModel.fncId }}
+  </v-sheet>
 </template>
diff --git a/src/views/GUIDE.md b/src/views/GUIDE.md
index 96248ab..22264b2 100644
--- a/src/views/GUIDE.md
+++ b/src/views/GUIDE.md
@@ -1,32 +1,47 @@
 # Views Guide
 
-`views` 是 route entry。View 應維持薄層，負責掛載 page driver 與 page component，不承載大段 UI、dialog、表單欄位或 store mutation 細節。
+`views` 是 route entry。View 自含 page model 組裝與頁面 UI，若邏輯複雜才抽到 page driver composable。
 
 ## 規則
 
 - 使用 `<script setup lang="ts">`。
 - 直接 route component 放在 `src/views` 或 `src/views/<feature>`。
-- 一般 view 目標 < 80 行。
 - route params/query 的解析可在 view 做簡單轉換；超過簡單轉換時放進 page driver。
 - 不直接 import 或包住 `MainLayout.vue`。
-- 不直接定義大型 `<v-dialog>`、`<v-overlay>`、大型表格或大型表單。
+- 複雜 UI 拆到 `components/sections/*` 或 `components/items/*`。
 
 ## 建議形狀
 
+簡單頁面：直接在 view 組裝 page model 與 template。
+
 ```vue
 <script setup lang="ts">
-import PageReports from '@/components/pages/PageReports.vue'
-import { useReportsPage } from '@/composables/page-drivers/useReportsPage'
-
-const { pageModel } = useReportsPage()
+import { computed } from 'vue'
+const pageModel = computed(() => ({ title: '我的頁面' }))
 </script>
 
 <template>
-  <PageReports :page="pageModel" />
+  <v-card>{{ pageModel.title }}</v-card>
 </template>
 ```
 
-若頁面只是簡單的 `computed` 組裝（無搜尋、無 dialog、無複雜事件），直接在 view 寫 page model，不需要建立 page driver。以 destructure 方式取用 composable 回傳值，模板不寫 `.value`。
+複雜頁面：透過 page driver composable 協調多個資料來源。
+
+```vue
+<script setup lang="ts">
+import PageMaint from '@/components/PageMaint.vue'
+import { useXxxPage } from '@/composables/page-drivers/useXxxPage'
+const { pageModel, search, handleSave, ... } = useXxxPage()
+</script>
+
+<template>
+  <PageMaint :title="pageModel.title" @create="handleCreate">
+    <template #table>...</template>
+  </PageMaint>
+</template>
+```
+
+以 destructure 方式取用 composable 回傳值，模板不寫 `.value`。
 
 ## Login.vue 開關
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0a5dee3..5f75877 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import PageHome from '@/components/pages/PageHome.vue'
+import PageIndex from '@/components/PageIndex.vue'
 import { useHomePage } from '@/composables/page-drivers/useHomePage'
 
 const { handleMessageCenter, handleNews, handleQuick, isNewsDialogOpen, pageModel, selectedNews } = useHomePage()
 </script>
 
 <template>
-  <PageHome
-    v-model:news-dialog-open="isNewsDialogOpen"
-    :page="pageModel"
+  <PageIndex
+    v-model:is-news-dialog-open="isNewsDialogOpen"
+    :news-items="pageModel.newsItems"
+    :quick-items="pageModel.quickItems"
     :selected-news="selectedNews"
     @message-center="handleMessageCenter"
-    @news="handleNews"
-    @quick="handleQuick"
+    @news="handleNews($event)"
+    @quick="handleQuick($event)"
   />
 </template>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index e78c267..7ee1ea0 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import PageSettings from '@/components/pages/PageSettings.vue'
-import type { SettingsPageModel } from '@/components/pages/PageSettings.vue'
 
-const pageModel = computed<SettingsPageModel>(() => ({
+const pageModel = computed(() => ({
   title: '設定頁面',
 }))
 </script>
 
 <template>
-  <PageSettings :page="pageModel" />
+  <div>{{ pageModel.title }}</div>
 </template>
diff --git a/src/views/demos/SectionFormPageDemo.vue b/src/views/demos/SectionFormPageDemo.vue
index 678fba8..84bc5d8 100644
--- a/src/views/demos/SectionFormPageDemo.vue
+++ b/src/views/demos/SectionFormPageDemo.vue
@@ -1,16 +1,71 @@
 <script setup lang="ts">
-import PageSectionFormPageDemo from '@/components/pages/PageSectionFormPageDemo.vue'
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
+import SectionFormPage from '@/components/sections/SectionFormPage.vue'
 import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
 
 const { demoForm, handleFormBack, handleFormSubmit, pageModel, resetDemoForm } = useSectionsDemoPage()
 </script>
 
 <template>
-  <PageSectionFormPageDemo
-    v-model:demo-form="demoForm"
-    :page="pageModel"
+  <SectionFormPage
+    back-label="回到列表"
+    reset-label="清除"
+    submit-label="送出"
+    :message="pageModel.formMessage"
+    title="SectionFormPage 報表申請"
     @back="handleFormBack"
     @reset="resetDemoForm"
     @submit="handleFormSubmit"
-  />
+  >
+    <template #fields>
+      <v-row density="compact">
+        <v-col cols="12" md="6">
+          <BaseFormTextField v-model="demoForm.title" label="標題" />
+        </v-col>
+        <v-col cols="12" md="3">
+          <BaseFormSelect v-model="demoForm.owner" label="單位" :items="pageModel.ownerOptions" />
+        </v-col>
+        <v-col cols="12" md="3">
+          <BaseFormSelect v-model="demoForm.category" label="類型" :items="pageModel.categoryOptions" />
+        </v-col>
+        <v-col cols="12">
+          <BaseFormTextField v-model="demoForm.description" label="說明" />
+        </v-col>
+      </v-row>
+    </template>
+
+    <template #sections>
+      <v-card class="mb-2">
+        <v-card-title class="text-title-medium font-weight-bold">明細</v-card-title>
+        <v-card-text>
+          <v-table density="compact">
+            <thead>
+              <tr>
+                <th>欄位</th>
+                <th>值</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>單位</td>
+                <td>{{ demoForm.owner }}</td>
+              </tr>
+              <tr>
+                <td>類型</td>
+                <td>{{ demoForm.category }}</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+      </v-card>
+    </template>
+
+    <template #notices>
+      <v-list class="bg-yellow-lighten-5" density="compact">
+        <v-list-item>送出前確認標題與單位。</v-list-item>
+        <v-list-item>表單狀態由 page driver 管理。</v-list-item>
+      </v-list>
+    </template>
+  </SectionFormPage>
 </template>
diff --git a/src/views/demos/SectionQueryPageDemo.vue b/src/views/demos/SectionQueryPageDemo.vue
index 392d28e..5b271fe 100644
--- a/src/views/demos/SectionQueryPageDemo.vue
+++ b/src/views/demos/SectionQueryPageDemo.vue
@@ -1,15 +1,53 @@
 <script setup lang="ts">
-import PageSectionQueryPageDemo from '@/components/pages/PageSectionQueryPageDemo.vue'
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
+import SectionQueryPage from '@/components/sections/SectionQueryPage.vue'
 import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
 
 const { handleQueryBack, handleQuerySearch, pageModel, queryFilters } = useSectionsDemoPage()
 </script>
 
 <template>
-  <PageSectionQueryPageDemo
-    v-model:query-filters="queryFilters"
-    :page="pageModel"
+  <SectionQueryPage
+    back-label="回到列表"
+    title="查詢頁DEMO"
     @back="handleQueryBack"
     @search="handleQuerySearch"
-  />
+  >
+    <template #filters>
+      <v-col cols="12" md="4">
+        <BaseFormTextField v-model="queryFilters.keyword" label="關鍵字" />
+      </v-col>
+      <v-col cols="12" md="4">
+        <BaseFormSelect v-model="queryFilters.owner" label="單位" :items="pageModel.ownerOptions" />
+      </v-col>
+    </template>
+
+    <template #results>
+      <v-alert v-if="pageModel.queryMessage" class="mb-3" type="success" variant="tonal">
+        {{ pageModel.queryMessage }}
+      </v-alert>
+      <v-table density="compact">
+        <thead class="bg-primary">
+          <tr>
+            <th>名稱</th>
+            <th>單位</th>
+            <th>狀態</th>
+            <th>更新日</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="pageModel.reports.length === 0">
+            <td class="text-center" colspan="4">尚無查詢結果</td>
+          </tr>
+          <tr v-for="row in pageModel.reports" :key="row.id">
+            <td>{{ row.title }}</td>
+            <td>{{ row.owner }}</td>
+            <td>{{ row.status }}</td>
+            <td>{{ row.updatedAt }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </template>
+  </SectionQueryPage>
 </template>
diff --git a/src/views/maint/EditableGrid.vue b/src/views/maint/EditableGrid.vue
index ef01ee7..9a9a17e 100644
--- a/src/views/maint/EditableGrid.vue
+++ b/src/views/maint/EditableGrid.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import PageEditableGridMaintenance from '@/components/pages/PageEditableGridMaintenance.vue'
+import EditableStudentGrid from '@/components/maint/EditableGrid.vue'
 import type { MaintenancePageModel } from '@/models/page'
 import { useStudentStore } from '@/stores/students'
 
@@ -15,5 +15,5 @@ const pageModel = computed<MaintenancePageModel>(() => ({
 </script>
 
 <template>
-  <PageEditableGridMaintenance :page="pageModel" />
+  <EditableStudentGrid :title="pageModel.title" />
 </template>
diff --git a/src/views/maint/GUIDE.md b/src/views/maint/GUIDE.md
index 9ee5f54..4b7defa 100644
--- a/src/views/maint/GUIDE.md
+++ b/src/views/maint/GUIDE.md
@@ -1,12 +1,12 @@
 # Maintenance Views Guide
 
-`views/maint` 是維護頁 demo。所有檔案都應是薄 route entry，實際 UI 與流程分別放在 `components/pages`、`components/sections`、`components/items` 與 `composables/page-drivers`。
+`views/maint` 是維護頁 demo。所有檔案都是自含的 route entry，UI 與流程直接在 view 中組合 `PageMaint`、`components/sections`、`components/items` 與 composable。
 
 ## 目前範本
 
-- `SingleRecord.vue`：單主檔 CRUD + dialog。
+- `SingleRecord.vue`：單主檔 CRUD + dialog（使用 page driver composable）。
 - `EditableGrid.vue`：可編輯表格。
-- `MasterDetailA.vue`：主檔 + 側邊明細 panel。
+- `MasterDetailA.vue`：主檔 + 側邊明細 panel（使用 page driver composable）。
 - `MasterDetailB.vue`：主檔 + collapse / full-height 明細。
 - `MasterDetailC.vue`：主檔 + 簡化明細清單。
 
@@ -15,8 +15,6 @@
 複製維護頁時同步調整：
 
 - `router/routes.ts` 的 `path`、`name`、`component`、`meta.layout`
-- page driver 名稱與 import
-- page component 名稱與 import
 - 頁面標題、查詢欄位、表格欄位、form 型別、驗證規則
 - store、service、model、語系、menu/favorites/breadcrumb 相關資料
 
diff --git a/src/views/maint/MasterDetailA.vue b/src/views/maint/MasterDetailA.vue
index f0a4b00..faf475c 100644
--- a/src/views/maint/MasterDetailA.vue
+++ b/src/views/maint/MasterDetailA.vue
@@ -1,38 +1,371 @@
 <script setup lang="ts">
-import PageMasterDetailAMaintenance from '@/components/pages/PageMasterDetailAMaintenance.vue'
+import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
+import DetailNavigation from '@/components/maint/master-detail/DetailNavigation.vue'
+import DetailSidePanel from '@/components/maint/master-detail/DetailSidePanel.vue'
+import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/PageMaint.vue'
+import SectionDataTable from '@/components/sections/SectionDataTable.vue'
+import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
 import { useMasterDetailAMaintenancePage } from '@/composables/page-drivers/useMasterDetailAMaintenancePage'
 
 const {
-  currentPage, formState, itemsPerPage, masterDetailEvents, masterDetailProps,
-  openAddDialog, openEditDialog, openViewDialog, pageCount, pageModel, pageSummary,
-  resetSearch, search, searchPanelOpen, snackbarVisible, students, tableHeaders,
+  confirmSave, currentPage, departments, detailForm, flow, formState,
+  gradeOptions, itemsPerPage, masterDetailEvents, masterDetailProps,
+  openAddDialog, openEditDialog, openViewDialog, pageCount, pageModel,
+  pageSummary, requestSaveConfirmation, resetSearch, scrollToField,
+  search, searchPanelOpen, snackbarVisible, statuses, students, tableHeaders,
 } = useMasterDetailAMaintenancePage()
 </script>
 
 <template>
-  <PageMasterDetailAMaintenance
-    v-model:search="search"
-    v-model:search-panel-open="searchPanelOpen"
-    v-bind="masterDetailProps"
-    :current-page="currentPage"
-    :grade-label="formState.gradeLabel"
-    :headers="tableHeaders"
-    :items="students"
-    :items-per-page="itemsPerPage"
-    :page="pageModel"
-    :page-count="pageCount"
-    :page-summary="pageSummary"
-    :row-props="formState.rowProps"
-    :status-color="formState.statusColor"
+  <PageMaint
+    :search-panel-open="searchPanelOpen"
+    :title="pageModel.title"
+    @toggle-search="searchPanelOpen = !searchPanelOpen"
     @create="openAddDialog"
-    @edit="openEditDialog"
-    @reset-search="resetSearch"
-    @update:current-page="currentPage = $event"
-    @view="openViewDialog"
-    v-on="masterDetailEvents"
+  >
+    <template #search-fields>
+      <SectionSearchPanel
+        v-model="search"
+        :departments="masterDetailProps.departments"
+        :grade-options="masterDetailProps.gradeOptions"
+        :statuses="masterDetailProps.statuses"
+        @reset="resetSearch"
+      />
+    </template>
+    <template #table>
+      <SectionDataTable
+        :current-page="currentPage"
+        :grade-label="formState.gradeLabel"
+        :headers="tableHeaders"
+        :items="students"
+        :items-per-page="itemsPerPage"
+        :page-count="pageCount"
+        :page-summary="pageSummary"
+        :row-props="formState.rowProps"
+        :status-color="formState.statusColor"
+        @delete="flow.requestDeleteConfirmation($event)"
+        @edit="openEditDialog($event)"
+        @update:current-page="currentPage = $event"
+        @view="openViewDialog($event)"
+      />
+    </template>
+  </PageMaint>
+
+  <teleport to="body">
+    <v-overlay
+      class="dialog-overlay"
+      :close-on-content-click="false"
+      :model-value="masterDetailProps.dialogVisible"
+      scrim="rgba(0, 0, 0, 0.45)"
+      scroll-strategy="block"
+      @update:model-value="flow.handleDialogVisibility($event)"
+    >
+      <div class="dialog-panel" :class="{ 'is-mobile': masterDetailProps.isMobile }">
+        <div
+          v-if="!masterDetailProps.isMobile || masterDetailProps.activeMobilePanel === 'detail'"
+          class="detail-panel-wrapper"
+          :class="{ 'is-active': !!masterDetailProps.selectedSemesterId, 'is-mobile': masterDetailProps.isMobile }"
+        >
+          <DetailSidePanel
+            v-model:detail-form="detailForm"
+            :is-detail-editing="masterDetailProps.isDetailEditing"
+            :is-mobile="masterDetailProps.isMobile"
+            :is-view-mode="masterDetailProps.isViewMode"
+            :selected-semester="masterDetailProps.selectedSemester"
+            v-on="masterDetailEvents"
+          />
+        </div>
+
+        <MntDialogCard
+          v-if="!masterDetailProps.isMobile || masterDetailProps.activeMobilePanel === 'master'"
+          :dialog-subtitle="masterDetailProps.dialogSubtitle"
+          :dialog-title="masterDetailProps.dialogTitle"
+          :is-edit-mode="masterDetailProps.isEditMode"
+          :is-view-mode="masterDetailProps.isViewMode"
+          :width="masterDetailProps.isMobile ? '100%' : 760"
+        >
+          <template #toolbar>
+            <MntRecordNavToolbar
+              :has-next-record="masterDetailProps.hasNextRecord"
+              :has-prev-record="masterDetailProps.hasPrevRecord"
+              :is-edit-mode="masterDetailProps.isEditMode"
+              :is-view-mode="masterDetailProps.isViewMode"
+              :mobile="masterDetailProps.isMobile"
+              v-on="masterDetailEvents"
+            />
+          </template>
+          <template #content>
+            <v-alert
+              v-if="masterDetailProps.errorSummary.length > 0 && !masterDetailProps.isLoading"
+              class="mb-4"
+              type="error"
+              variant="tonal"
+            >
+              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
+              <div class="d-flex flex-column ga-1">
+                <v-btn
+                  v-for="error in masterDetailProps.errorSummary"
+                  :key="error.field"
+                  color="error"
+                  size="small"
+                  variant="text"
+                  @click="scrollToField(error.field)"
+                >
+                  {{ error.message }}
+                </v-btn>
+              </div>
+            </v-alert>
+
+            <v-skeleton-loader
+              v-if="masterDetailProps.isLoading"
+              class="mt-4"
+              type="subtitle,paragraph"
+              width="100%"
+            />
+
+            <v-form
+              v-else
+              :class="{ 'form-readonly': masterDetailProps.isFormReadonly }"
+              @submit.prevent="requestSaveConfirmation()"
+            >
+              <MasterFileFormFields
+                :departments="masterDetailProps.departments"
+                :enroll-years="masterDetailProps.enrollYears"
+                :field-errors="masterDetailProps.fieldErrors"
+                :form="formState.form.value"
+                :grade-options="masterDetailProps.gradeOptions"
+                :is-form-locked="masterDetailProps.isFormLocked"
+                :is-form-readonly="masterDetailProps.isFormReadonly"
+                :statuses="masterDetailProps.statuses"
+                v-on="masterDetailEvents"
+              />
+
+              <v-divider />
+
+              <DetailNavigation
+                :is-mobile="masterDetailProps.isMobile"
+                :is-view-mode="masterDetailProps.isViewMode"
+                :selected-semester-id="masterDetailProps.selectedSemesterId"
+                :semesters="masterDetailProps.semesters"
+                v-on="masterDetailEvents"
+              />
+            </v-form>
+          </template>
+          <template #actions>
+            <template v-if="masterDetailProps.isMobile">
+              <v-btn :disabled="masterDetailProps.isSaving" variant="text" @click="flow.requestCloseDialog()">取消</v-btn>
+              <v-btn
+                v-if="masterDetailProps.isEditMode"
+                color="error"
+                :disabled="masterDetailProps.isSaving"
+                variant="tonal"
+                @click="flow.requestDeleteCurrent()"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!masterDetailProps.isViewMode"
+                color="primary"
+                :disabled="!masterDetailProps.isDirty || masterDetailProps.isLoading"
+                :loading="masterDetailProps.isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation()"
+              >
+                儲存
+              </v-btn>
+              <v-btn v-else color="primary" variant="flat" @click="flow.requestCloseDialog()">關閉</v-btn>
+            </template>
+            <template v-else>
+              <v-spacer />
+              <v-btn :disabled="masterDetailProps.isSaving" variant="text" @click="flow.requestCloseDialog()">取消</v-btn>
+              <v-btn
+                v-if="masterDetailProps.isEditMode"
+                color="error"
+                :disabled="masterDetailProps.isSaving"
+                variant="tonal"
+                @click="flow.requestDeleteCurrent()"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!masterDetailProps.isViewMode"
+                color="primary"
+                :disabled="!masterDetailProps.isDirty || masterDetailProps.isLoading"
+                :loading="masterDetailProps.isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation()"
+              >
+                儲存
+              </v-btn>
+              <v-btn v-else color="primary" variant="flat" @click="flow.requestCloseDialog()">關閉</v-btn>
+            </template>
+          </template>
+        </MntDialogCard>
+      </div>
+    </v-overlay>
+  </teleport>
+
+  <ConfirmDialog
+    :model-value="masterDetailProps.confirmCloseVisible"
+    confirm-color="error"
+    confirm-text="關閉不儲存"
+    message="目前有尚未儲存的內容，確定要關閉嗎？"
+    title="未儲存變更"
+    @confirm="flow.confirmClose()"
+    @update:model-value="flow.confirmCloseVisible.value = $event"
+  />
+
+  <ConfirmDialog
+    :model-value="masterDetailProps.confirmSaveVisible"
+    :confirm-loading="masterDetailProps.isSaving"
+    confirm-text="確認儲存"
+    max-width="520"
+    title="確認儲存變更"
+    @confirm="confirmSave()"
+    @update:model-value="flow.confirmSaveVisible.value = $event"
+  >
+    <div v-if="masterDetailProps.saveSummary.length > 0" class="d-flex flex-column ga-2">
+      <div v-for="item in masterDetailProps.saveSummary" :key="item.label" class="d-flex flex-column">
+        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
+        <div v-if="item.before !== null" class="text-body-2">
+          <span class="text-medium-emphasis">原：</span>
+          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
+            {{ item.before }}
+          </span>
+        </div>
+        <div class="text-body-2">
+          <span class="text-medium-emphasis">新：</span>
+          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
+            {{ item.after }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
+  </ConfirmDialog>
+
+  <ConfirmDialog
+    :model-value="masterDetailProps.confirmDeleteVisible"
+    confirm-color="error"
+    confirm-text="確定刪除"
+    :message="`確定要刪除 ${masterDetailProps.pendingDeleteLabel} 嗎？此操作無法復原。`"
+    title="確認刪除"
+    @confirm="flow.confirmDelete()"
+    @update:model-value="flow.confirmDeleteVisible.value = $event"
+  />
+
+  <ConfirmDialog
+    :model-value="masterDetailProps.confirmSwitchVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="flow.confirmSwitch()"
+    @update:model-value="flow.confirmSwitchVisible.value = $event"
+  />
+
+  <ConfirmDialog
+    :model-value="masterDetailProps.confirmNavigateVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="flow.confirmNavigate()"
+    @update:model-value="flow.confirmNavigateVisible.value = $event"
   />
 
   <v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
     儲存成功
   </v-snackbar>
 </template>
+
+<style scoped>
+.dialog-overlay :deep(.v-overlay__content) {
+  height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.dialog-panel {
+  width: auto;
+  max-width: 100%;
+  height: 100vh;
+  background: transparent;
+  padding: 0;
+  display: flex;
+}
+
+.dialog-panel > .v-card {
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+.detail-panel-wrapper {
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-right: 0;
+}
+
+.detail-panel-wrapper.is-active {
+  width: 600px;
+  opacity: 1;
+  margin-right: 0;
+}
+
+.dialog-panel.is-mobile {
+  width: 100%;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-title) {
+  padding: 16px 20px 12px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-toolbar) {
+  padding: 8px 12px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-actions) {
+  gap: 8px;
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+}
+
+.dialog-panel.is-mobile :deep(.dialog-actions .v-btn) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.dialog-panel.is-mobile :deep(.v-card-text) {
+  padding-bottom: 88px;
+}
+
+.detail-panel-wrapper.is-mobile {
+  width: 100%;
+  opacity: 1;
+  overflow: visible;
+}
+
+.detail-panel-wrapper.is-mobile.is-active {
+  width: 100%;
+}
+
+.form-readonly :deep(.v-field) {
+  pointer-events: none;
+}
+
+@media (max-width: 600px) {
+  .dialog-panel {
+    width: 100%;
+  }
+
+  .dialog-panel > .v-card {
+    width: 100%;
+    box-shadow: none;
+  }
+}
+</style>
diff --git a/src/views/maint/MasterDetailB.vue b/src/views/maint/MasterDetailB.vue
index 81ab36f..e410781 100644
--- a/src/views/maint/MasterDetailB.vue
+++ b/src/views/maint/MasterDetailB.vue
@@ -1,19 +1,1156 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import PageMasterDetailBMaintenance from '@/components/pages/PageMasterDetailBMaintenance.vue'
-import type { MaintenancePageModel } from '@/models/page'
-import { useStudentStore } from '@/stores/students'
+<template>
+  <!-- Page component 組合 PageMaint 外殼、主檔表格、子檔區與 dialog；流程狀態集中在本頁 script。 -->
+  <page-maint
+    :search-panel-open="searchPanelOpen"
+    :title="pageModel.title"
+    @create="openAddDialog"
+    @toggle-search="searchPanelOpen = !searchPanelOpen"
+  >
+    <!-- 搜尋欄位放在 PageMaint 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
+    <template #search-fields>
+      <v-col cols="12" md="2">
+        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
+        <v-text-field
+          id="search-student-id"
+          v-model="search.studentId"
+          aria-labelledby="search-student-id-label"
+          density="compact"
+          hide-details
+          name="searchStudentId"
+          placeholder="例如：S2024001"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
+        <v-text-field
+          id="search-name"
+          v-model="search.name"
+          aria-labelledby="search-name-label"
+          density="compact"
+          hide-details
+          name="searchName"
+          placeholder="例如：王小明"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
+        <v-select
+          id="search-department"
+          v-model="search.department"
+          aria-labelledby="search-department-label"
+          density="compact"
+          hide-details
+          :items="departments"
+          name="searchDepartment"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
+        <v-select
+          id="search-grade"
+          v-model="search.grade"
+          aria-labelledby="search-grade-label"
+          density="compact"
+          hide-details
+          item-title="title"
+          item-value="value"
+          :items="gradeOptions"
+          name="searchGrade"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
+        <v-select
+          id="search-status"
+          v-model="search.status"
+          aria-labelledby="search-status-label"
+          density="compact"
+          hide-details
+          :items="statuses"
+          name="searchStatus"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
+      </v-col>
+    </template>
+    <!-- table slot 放主檔表格與列操作，操作事件再交給頁面流程函式處理。 -->
+    <template #table>
+      <v-data-table
+        v-model:page="currentPage"
+        class="student-table"
+        density="compact"
+        fixed-header
+        :headers="tableHeaders"
+        height="100%"
+        hide-default-footer
+        :items="students"
+        :items-per-page="itemsPerPage"
+        :row-props="rowProps"
+      >
+        <template #[`item.grade`]="{ item }">
+          {{ gradeLabel(item.grade) }}
+        </template>
+        <template #[`item.status`]="{ item }">
+          <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
+            {{ item.status }}
+          </v-chip>
+        </template>
+        <template #[`item.actions`]="{ item }">
+          <div class="d-flex ga-2">
+            <v-btn
+              color="info"
+              :prepend-icon="mdiEye"
+              size="small"
+              variant="text"
+              @click="openViewDialog(item)"
+            >
+              檢視
+            </v-btn>
+            <v-btn
+              color="primary"
+              :prepend-icon="mdiPencil"
+              size="small"
+              variant="text"
+              @click="openEditDialog(item)"
+            >
+              修改
+            </v-btn>
+            <v-btn
+              color="error"
+              :prepend-icon="mdiDelete"
+              size="small"
+              variant="text"
+              @click="requestDeleteConfirmation(item)"
+            >
+              刪除
+            </v-btn>
+          </div>
+        </template>
+        <template #bottom>
+          <div class="d-flex align-center justify-space-between px-4 py-3">
+            <div class="text-body-2 text-medium-emphasis">
+              {{ pageSummary }}
+            </div>
+            <div class="d-flex align-center ga-2">
+              <v-btn
+                :disabled="currentPage <= 1"
+                size="small"
+                variant="text"
+                @click="currentPage = 1"
+                >第一頁</v-btn
+              >
+              <v-btn
+                :disabled="currentPage <= 1"
+                size="small"
+                variant="text"
+                @click="currentPage -= 1"
+                >上一頁</v-btn
+              >
+              <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
+              <v-btn
+                :disabled="currentPage >= pageCount"
+                size="small"
+                variant="text"
+                @click="currentPage += 1"
+                >下一頁</v-btn
+              >
+              <v-btn
+                :disabled="currentPage >= pageCount"
+                size="small"
+                variant="text"
+                @click="currentPage = pageCount"
+                >最後頁</v-btn
+              >
+            </div>
+          </div>
+        </template>
+      </v-data-table>
+    </template>
+  </page-maint>
 
+  <!-- 主從式維護視窗 -->
+  <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
+  <teleport to="body">
+    <!-- 包成元件需要傳高度寬度給dialog-panel -->
+    <v-overlay
+      class="dialog-overlay"
+      :close-on-content-click="false"
+      :model-value="dialogVisible"
+      scrim="rgba(0, 0, 0, 0.45)"
+      scroll-strategy="block"
+      @update:model-value="handleDialogVisibility"
+    >
+      <div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
+        <DetailFullHeightPanel
+          v-if="isMobile && activeMobilePanel === 'detail'"
+          :is-form-locked="isFormLocked"
+          :is-view-mode="isViewMode"
+          :semester="selectedSemester"
+          @add-course="openAddCourseDialog"
+          @close="closeDetailPanel"
+          @delete-course="requestDeleteCourse"
+          @update-course="handleUpdateCourse"
+          @update-semester="handleUpdateSemester"
+        />
+
+        <!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
+        <!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
+        <mnt-dialog-card
+          v-else
+          :content-class="
+            isMobile
+              ? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
+              : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
+          "
+          :dialog-subtitle="dialogSubtitle"
+          :dialog-title="dialogTitle"
+          :is-edit-mode="isEditMode"
+          :is-view-mode="isViewMode"
+          width="100%"
+        >
+          <template #toolbar>
+            <mnt-record-nav-toolbar
+              :has-next-record="hasNextRecord"
+              :has-prev-record="hasPrevRecord"
+              :is-edit-mode="isEditMode"
+              :is-view-mode="isViewMode"
+              :mobile="isMobile"
+              @first="openEdgeRecord('first')"
+              @last="openEdgeRecord('last')"
+              @next="openAdjacentRecord('next')"
+              @prev="openAdjacentRecord('prev')"
+              @switch-to-edit="switchToEditMode"
+              @switch-to-view="switchToViewMode"
+            />
+          </template>
+          <template #content>
+            <!-- 錯誤提示：當表單驗證未通過時顯示 -->
+            <v-alert
+              v-if="errorSummary.length > 0 && !isLoading"
+              class="mb-4"
+              type="error"
+              variant="tonal"
+            >
+              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
+              <div class="d-flex flex-column ga-1">
+                <v-btn
+                  v-for="error in errorSummary"
+                  :key="error.field"
+                  color="error"
+                  size="small"
+                  variant="text"
+                  @click="scrollToField(error.field)"
+                >
+                  {{ error.message }}
+                </v-btn>
+              </div>
+            </v-alert>
+
+            <!-- 載入中骨架畫面 -->
+            <v-skeleton-loader
+              v-if="isLoading"
+              class="mt-4"
+              type="subtitle,paragraph"
+              width="100%"
+            />
+
+            <!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
+            <v-form
+              v-else
+              :class="[
+                { 'form-readonly': isFormReadonly },
+                isMobile ? '' : 'd-flex flex-column h-100',
+              ]"
+              @submit.prevent="requestSaveConfirmation"
+            >
+              <MasterFileFormFields
+                :departments="departments"
+                :enroll-years="enrollYears"
+                :field-errors="fieldErrors"
+                :form="form"
+                :grade-options="gradeOptions"
+                :is-form-locked="isFormLocked"
+                :is-form-readonly="isFormReadonly"
+                :statuses="statuses"
+                @clear-field="clearFieldError"
+              />
+
+              <v-divider />
+
+              <DetailCollapseGropus
+                :is-form-locked="isFormLocked"
+                :is-form-readonly="isFormReadonly"
+                :is-mobile="isMobile"
+                :selected-semester-id="selectedSemesterId"
+                :semesters="studentSemesters"
+                @add-course="openAddCourseDialog"
+                @delete-course="requestDeleteCourse"
+                @select="handleSemesterSelect"
+                @update-course="handleUpdateCourse"
+              />
+            </v-form>
+          </template>
+          <template #actions>
+            <template v-if="isMobile">
+              <v-btn
+                class="flex-grow-1"
+                :disabled="isSaving"
+                variant="text"
+                @click="requestCloseDialog"
+                >取消</v-btn
+              >
+              <v-btn
+                v-if="isEditMode"
+                class="flex-grow-1"
+                color="error"
+                :disabled="isSaving"
+                variant="tonal"
+                @click="requestDeleteCurrent"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!isViewMode"
+                class="flex-grow-1"
+                color="primary"
+                :disabled="!isDirty || isLoading"
+                :loading="isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation"
+              >
+                儲存
+              </v-btn>
+              <v-btn
+                v-else
+                class="flex-grow-1"
+                color="primary"
+                variant="flat"
+                @click="requestCloseDialog"
+                >關閉</v-btn
+              >
+            </template>
+            <template v-else>
+              <v-spacer />
+              <v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
+              <v-btn
+                v-if="isEditMode"
+                color="error"
+                :disabled="isSaving"
+                variant="tonal"
+                @click="requestDeleteCurrent"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!isViewMode"
+                color="primary"
+                :disabled="!isDirty || isLoading"
+                :loading="isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation"
+              >
+                儲存
+              </v-btn>
+              <v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
+            </template>
+          </template>
+        </mnt-dialog-card>
+      </div>
+    </v-overlay>
+  </teleport>
+
+  <ConfirmDialog
+    v-model="confirmCloseVisible"
+    confirm-color="error"
+    confirm-text="關閉不儲存"
+    message="目前有尚未儲存的內容，確定要關閉嗎？"
+    title="未儲存變更"
+    @confirm="confirmClose"
+  />
+
+  <ConfirmDialog
+    v-model="confirmSaveVisible"
+    :confirm-loading="isSaving"
+    confirm-text="確認儲存"
+    max-width="520"
+    title="確認儲存變更"
+    @confirm="confirmSave"
+  >
+    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
+      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
+        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
+        <div v-if="item.before !== null" class="text-body-2">
+          <span class="text-medium-emphasis">原：</span>
+          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
+            {{ item.before }}
+          </span>
+        </div>
+        <div class="text-body-2">
+          <span class="text-medium-emphasis">新：</span>
+          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
+            {{ item.after }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
+  </ConfirmDialog>
+
+  <ConfirmDialog
+    v-model="confirmDeleteVisible"
+    confirm-color="error"
+    confirm-text="確定刪除"
+    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`"
+    title="確認刪除"
+    @confirm="confirmDelete"
+  />
+
+  <ConfirmDialog
+    v-model="confirmSwitchVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="confirmSwitch"
+  />
+
+  <ConfirmDialog
+    v-model="confirmNavigateVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="confirmNavigate"
+  />
+
+  <!-- 刪除課程確認 -->
+  <ConfirmDialog
+    v-model="confirmDeleteCourseVisible"
+    confirm-color="error"
+    confirm-text="確定移除"
+    :message="`確定要移除「${pendingDeleteCourseName}」嗎？`"
+    :title="`刪除課程`"
+    @confirm="confirmDeleteCourse"
+  />
+
+  <!-- 加入課程對話框 -->
+  <v-dialog v-model="addCourseDialogVisible" max-width="420" persistent>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon color="primary" start :icon="mdiBookPlus" />
+        加入課程
+      </v-card-title>
+      <v-card-text>
+        <v-select
+          v-model="addCourseForm.name"
+          class="mb-3"
+          density="comfortable"
+          :items="availableCourses"
+          label="課程名稱"
+          variant="outlined"
+          @update:model-value="handleAddCourseNameSelect"
+        />
+        <v-row density="compact">
+          <v-col cols="6">
+            <v-text-field
+              v-model.number="addCourseForm.credits"
+              density="comfortable"
+              hide-spin-buttons
+              label="學分"
+              type="number"
+              variant="outlined"
+            />
+          </v-col>
+          <v-col cols="6">
+            <v-text-field
+              v-model.number="addCourseForm.score"
+              density="comfortable"
+              hide-spin-buttons
+              label="分數"
+              type="number"
+              variant="outlined"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
+        <v-btn
+          color="primary"
+          :disabled="!addCourseForm.name"
+          variant="flat"
+          @click="confirmAddCourse"
+          >加入</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- 成功提示 -->
+  <v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
+    儲存成功
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useDisplay } from 'vuetify'
+
+import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
+import DetailCollapseGropus from '@/components/maint/master-detail/DetailCollapseGropus.vue'
+import DetailFullHeightPanel from '@/components/maint/master-detail/DetailFullHeightPanel.vue'
+import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/PageMaint.vue'
+import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
+import { type CourseRecord, type SemesterRecord, useSemesterStore } from '@/stores/semesters'
+import { type StudentRecord, useStudentStore } from '@/stores/students'
+import type { MaintenancePageModel } from '@/models/page'
+
+// 下拉選項：系所/年級/入學年度/狀態
+const departments = ['資訊工程', '企業管理', '應用外語', '視覺設計', '財務金融']
+const gradeOptions = [
+  { title: '大一', value: 1 },
+  { title: '大二', value: 2 },
+  { title: '大三', value: 3 },
+  { title: '大四', value: 4 },
+  { title: '研究所', value: 5 },
+]
+const enrollYears = [2024, 2023, 2022, 2021, 2020, 2019]
+const statuses = ['在學', '休學', '畢業']
+
+const { smAndUp } = useDisplay()
+const isMobile = computed(() => !smAndUp.value)
+
+// 表格欄位設定（含固定欄與排序）
+const tableHeaders = [
+  {
+    title: '學號',
+    key: 'studentId',
+    sortable: true,
+    fixed: smAndUp.value && ('start' as const),
+    width: 120,
+  },
+  {
+    title: '姓名',
+    key: 'name',
+    sortable: true,
+    fixed: smAndUp.value && ('start' as const),
+    width: 100,
+  },
+  { title: '系所', key: 'department', sortable: true, width: 140 },
+  { title: '年級', key: 'grade', sortable: true, width: 90 },
+  { title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
+  { title: '已修學分', key: 'credits', sortable: true, width: 110 },
+  { title: 'Email', key: 'email', sortable: true, width: 200 },
+  { title: '電話', key: 'phone', sortable: true, width: 140 },
+  { title: '指導老師', key: 'advisor', sortable: true, width: 110 },
+  { title: '狀態', key: 'status', sortable: true, width: 90 },
+  {
+    title: '操作',
+    key: 'actions',
+    sortable: false,
+    fixed: smAndUp.value && ('end' as const),
+    width: 'auto',
+    cellProps: { class: 'px-0 bg-background' },
+  },
+]
+
+// 查詢條件（示意用，未接 API）
+const search = ref({
+  studentId: '',
+  name: '',
+  department: '',
+  grade: null as number | null,
+  status: '',
+})
+// 查詢區塊是否展開
+const searchPanelOpen = ref(false)
+
+// 透過 store 管理 Demo 資料與 CRUD
 const studentStore = useStudentStore()
+const semesterStore = useSemesterStore()
+const students = computed(() => studentStore.students)
 const pageModel = computed<MaintenancePageModel>(() => ({
   type: 'maintenance',
   title: '主從資料維護示範B',
-  records: studentStore.students,
+  records: students.value,
   loading: false,
   error: null,
 }))
+type StudentPayload = Omit<StudentRecord, 'id'>
+const itemsPerPage = 10
+const currentPage = ref(1)
+const pageCount = computed(() => Math.max(1, Math.ceil(students.value.length / itemsPerPage)))
+const pageSummary = computed(() => {
+  const total = students.value.length
+  if (total === 0) return '第 0-0 筆 / 共 0 筆'
+
+  const start = (currentPage.value - 1) * itemsPerPage + 1
+  const end = Math.min(currentPage.value * itemsPerPage, total)
+  return `第 ${start}-${end} 筆 / 共 ${total} 筆`
+})
+
+// 彈窗狀態與流程控制
+const dialogVisible = ref(false)
+const editingId = ref<number | null>(null)
+const dialogMode = ref<'create' | 'edit' | 'view'>('create')
+const isLoading = ref(false)
+const isSaving = ref(false)
+// UI 回饋
+const snackbarVisible = ref(false)
+const highlightedId = ref<number | null>(null)
+// 防止快速切換導致的異步覆蓋
+const loadSequence = ref(0)
+
+// Master-Detail 擴充
+const studentSemesters = ref<SemesterRecord[]>([])
+const selectedSemesterId = ref<number | null>(null)
+const activeMobilePanel = ref<'master' | 'detail'>('master')
+const selectedSemester = computed(
+  () => studentSemesters.value.find((semester) => semester.id === selectedSemesterId.value) ?? null
+)
+
+// 刪除課程確認狀態
+const confirmDeleteCourseVisible = ref(false)
+const pendingDeleteCourseKey = ref<{ semesterId: number; courseIndex: number } | null>(null)
+const pendingDeleteCourseName = ref('')
+
+// 加入課程對話框狀態
+const addCourseDialogVisible = ref(false)
+const addCourseTargetSemesterId = ref<number | null>(null)
+const addCourseForm = ref({ name: '', credits: 3, score: 0 })
+
+const availableCourses = [
+  '資料結構',
+  '演算法',
+  '作業系統',
+  '計算機組織',
+  '線性代數',
+  '機率與統計',
+  '資料庫系統',
+  '人工智慧導論',
+  '網頁程式設計',
+  '計算機網路',
+]
+
+const creditsMap: Record<string, number> = {
+  資料結構: 3,
+  演算法: 3,
+  作業系統: 3,
+  計算機組織: 3,
+  線性代數: 3,
+  機率與統計: 3,
+  資料庫系統: 3,
+  人工智慧導論: 3,
+  網頁程式設計: 3,
+  計算機網路: 3,
+}
+
+// 輔助函式：重新載入當前學生的學期資料
+function refreshSemesters() {
+  if (editingId.value) {
+    studentSemesters.value = semesterStore.getStudentSemesters(editingId.value)
+  }
+}
+
+function handleSemesterSelect(semesterId: number) {
+  selectedSemesterId.value = semesterId
+  if (isMobile.value) {
+    activeMobilePanel.value = 'detail'
+  }
+}
+
+function closeDetailPanel() {
+  if (isMobile.value) {
+    activeMobilePanel.value = 'master'
+    return
+  }
+  selectedSemesterId.value = null
+}
+
+function handleUpdateSemester(semesterId: number, payload: Partial<SemesterRecord>) {
+  semesterStore.updateSemester(semesterId, payload)
+}
+
+// 請求刪除課程（開啟確認對話框）
+function requestDeleteCourse(semesterId: number, courseIndex: number, courseName: string) {
+  pendingDeleteCourseKey.value = { semesterId, courseIndex }
+  pendingDeleteCourseName.value = courseName
+  confirmDeleteCourseVisible.value = true
+}
+
+// 確認刪除課程
+function confirmDeleteCourse() {
+  if (!pendingDeleteCourseKey.value) return
+  const { semesterId, courseIndex } = pendingDeleteCourseKey.value
+  const semester = studentSemesters.value.find((item) => item.id === semesterId)
+  if (semester) {
+    semesterStore.updateSemester(semesterId, {
+      courses: semester.courses.filter((_, idx) => idx !== courseIndex),
+    })
+    refreshSemesters()
+  }
+  pendingDeleteCourseKey.value = null
+  confirmDeleteCourseVisible.value = false
+}
+
+// 開啟加入課程對話框
+function openAddCourseDialog(semesterId: number) {
+  addCourseTargetSemesterId.value = semesterId
+  addCourseForm.value = { name: '', credits: 3, score: 0 }
+  addCourseDialogVisible.value = true
+}
+
+// 選擇課程名稱時自動帶入預設學分
+function handleAddCourseNameSelect(name: string) {
+  const credits = creditsMap[name]
+  if (credits !== undefined) {
+    addCourseForm.value.credits = credits
+  }
+}
+
+// 確認加入課程
+function confirmAddCourse() {
+  if (!addCourseTargetSemesterId.value || !addCourseForm.value.name) return
+  const semester = studentSemesters.value.find(
+    (item) => item.id === addCourseTargetSemesterId.value
+  )
+  if (!semester) return
+  semesterStore.updateSemester(addCourseTargetSemesterId.value, {
+    courses: [
+      ...semester.courses,
+      {
+        code: `CS${Date.now()}`,
+        name: addCourseForm.value.name,
+        credits: addCourseForm.value.credits,
+        score: addCourseForm.value.score,
+      },
+    ],
+  })
+  refreshSemesters()
+  addCourseDialogVisible.value = false
+}
+
+function handleUpdateCourse(
+  semesterId: number,
+  courseIndex: number,
+  payload: Partial<CourseRecord>
+) {
+  const semester = studentSemesters.value.find((item) => item.id === semesterId)
+  if (!semester) return
+  const nextCourses = semester.courses.map((course, idx) =>
+    idx === courseIndex ? { ...course, ...payload } : course
+  )
+  semesterStore.updateSemester(semesterId, { courses: nextCourses })
+}
+
+const {
+  errorSummary,
+  fieldErrors,
+  form,
+  isDirty,
+  saveSummary,
+  clearAllErrors,
+  clearFieldError,
+  gradeLabel,
+  resetForm,
+  rowProps,
+  setForm,
+  statusColor,
+  syncInitialForm,
+  validateForm,
+} = useStudentMaintenanceForm({
+  departments,
+  gradeOptions,
+  enrollYears,
+  statuses,
+  students,
+  editingId,
+  highlightedId,
+})
+
+// 表單欄位簡單排版（無分組）
+
+// 彈窗標題/副標題
+const dialogTitle = computed(() => {
+  if (dialogMode.value === 'view') return '檢視主檔資料示範'
+  if (dialogMode.value === 'edit') return '修改主檔資料示範'
+  return '新增主檔資料示範'
+})
+const dialogSubtitle = computed(() => {
+  if (!editingId.value) return ''
+  return `${form.value.studentId || '未填學號'}・${form.value.name || '未填姓名'}`
+})
+// 是否有修改（用於啟用儲存與提示）
+// 載入/儲存時鎖定、檢視模式 readonly
+const isFormLocked = computed(() => isLoading.value || isSaving.value)
+const {
+  confirmClose,
+  confirmCloseVisible,
+  confirmDelete,
+  confirmDeleteVisible,
+  confirmNavigate,
+  confirmNavigateVisible,
+  confirmSaveVisible,
+  confirmSwitch,
+  confirmSwitchVisible,
+  handleDialogVisibility,
+  hasNextRecord,
+  hasPrevRecord,
+  isEditMode,
+  isViewMode,
+  openAdjacentRecord,
+  openEdgeRecord,
+  pendingDeleteLabel,
+  requestCloseDialog,
+  requestDeleteConfirmation,
+  requestDeleteCurrent,
+  switchToEditMode,
+  switchToViewMode,
+} = useMaintenanceCrudFlow<StudentRecord>({
+  records: students,
+  editingId,
+  dialogMode,
+  dialogVisible,
+  isLoading,
+  isSaving,
+  isDirty,
+  clearAllErrors,
+  resetForm,
+  openEditDialog,
+  openViewDialog,
+  removeRecord: (id) => {
+    studentStore.removeStudent(id)
+    semesterStore.removeByStudentId(id)
+  },
+  describeRecord: (student) => `${student.studentId} ${student.name}`,
+  onCloseReset: () => {
+    selectedSemesterId.value = null
+    activeMobilePanel.value = 'master'
+    studentSemesters.value = []
+  },
+})
+const isFormReadonly = computed(() => isViewMode.value)
+// 重設查詢條件
+function resetSearch() {
+  search.value = {
+    studentId: '',
+    name: '',
+    department: '',
+    grade: null,
+    status: '',
+  }
+}
+
+watch(pageCount, (value) => {
+  if (currentPage.value > value) {
+    currentPage.value = value
+  }
+})
+
+// 新增：開啟彈窗，使用預設值
+function openAddDialog() {
+  loadSequence.value += 1
+  dialogMode.value = 'create'
+  editingId.value = null
+  studentSemesters.value = []
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  resetForm()
+  isLoading.value = false
+  dialogVisible.value = true
+}
+
+// 編輯：先開彈窗，資料載入後填入
+function openEditDialog(student: StudentRecord) {
+  loadSequence.value += 1
+  const sequence = loadSequence.value
+  dialogMode.value = 'edit'
+  editingId.value = student.id
+  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  dialogVisible.value = true
+  isLoading.value = true
+  clearAllErrors()
+  setTimeout(() => {
+    if (sequence !== loadSequence.value || !dialogVisible.value) return
+    setForm({
+      studentId: student.studentId,
+      name: student.name,
+      department: student.department,
+      grade: student.grade,
+      enrollYear: student.enrollYear,
+      credits: student.credits,
+      advisor: student.advisor,
+      email: student.email,
+      phone: student.phone,
+      status: student.status,
+    })
+    syncInitialForm()
+    isLoading.value = false
+  }, 350)
+}
+
+// 檢視：只讀模式並預設展開所有分組
+function openViewDialog(student: StudentRecord) {
+  loadSequence.value += 1
+  const sequence = loadSequence.value
+  dialogMode.value = 'view'
+  editingId.value = student.id
+  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  dialogVisible.value = true
+  isLoading.value = true
+  clearAllErrors()
+  setTimeout(() => {
+    if (sequence !== loadSequence.value || !dialogVisible.value) return
+    setForm({
+      studentId: student.studentId,
+      name: student.name,
+      department: student.department,
+      grade: student.grade,
+      enrollYear: student.enrollYear,
+      credits: student.credits,
+      advisor: student.advisor,
+      email: student.email,
+      phone: student.phone,
+      status: student.status,
+    })
+    syncInitialForm()
+    isLoading.value = false
+  }, 350)
+}
+
+// 先檢核再提示儲存確認
+async function requestSaveConfirmation() {
+  if (isSaving.value || isLoading.value || !isDirty.value || isViewMode.value) return
+  clearAllErrors()
+
+  const errors = validateForm()
+  if (errors.length > 0) {
+    for (const error of errors) {
+      fieldErrors.value[error.field] = [error.message]
+    }
+    await nextTick()
+    const firstError = errors[0]
+    if (firstError) scrollToField(firstError.field)
+    return
+  }
+
+  confirmSaveVisible.value = true
+}
+
+// 儲存確認後才真正送出
+function confirmSave() {
+  confirmSaveVisible.value = false
+  saveStudent()
+}
+
+// 寫入資料（Demo：直接更新列表）
+async function saveStudent() {
+  if (isSaving.value || isLoading.value) return
+  isSaving.value = true
+  await new Promise((resolve) => setTimeout(resolve, 450))
+  const payload = {
+    studentId: form.value.studentId.trim(),
+    name: form.value.name.trim(),
+    department: form.value.department,
+    grade: form.value.grade,
+    enrollYear: form.value.enrollYear,
+    credits: form.value.credits,
+    advisor: form.value.advisor.trim(),
+    email: form.value.email.trim(),
+    phone: form.value.phone.trim(),
+    status: form.value.status,
+  } as StudentPayload
+
+  if (editingId.value) {
+    const updated = studentStore.updateStudent(editingId.value, payload)
+    if (updated) highlightedId.value = editingId.value
+  } else {
+    const createdId = studentStore.addStudent(payload)
+    semesterStore.generateForStudent(createdId)
+    highlightedId.value = createdId
+  }
+
+  syncInitialForm()
+  dialogVisible.value = false
+  snackbarVisible.value = true
+  isSaving.value = false
+  window.setTimeout(() => {
+    highlightedId.value = null
+  }, 1600)
+}
+
+function scrollToField(field: string) {
+  const target = document.getElementById(`field-${field}`)
+  if (!target) return
+  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
 </script>
 
-<template>
-  <PageMasterDetailBMaintenance :page="pageModel" />
-</template>
+<style scoped>
+:deep(.v-table__wrapper .v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 32px;
+}
+
+:deep(.v-expansion-panel-text__wrapper) {
+  padding: 8px;
+}
+
+.dialog-overlay :deep(.v-overlay__content) {
+  height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.dialog-panel {
+  width: 65%;
+  max-width: 100%;
+  height: 100vh;
+  background: transparent;
+  padding: 0;
+  display: flex;
+  background: transparent;
+  padding: 0;
+  display: flex;
+}
+
+.dialog-panel > .v-card {
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+.dialog-actions {
+  position: sticky;
+  bottom: 0;
+  background: rgba(var(--v-theme-surface), 0.95);
+  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 1;
+}
+
+.dialog-title {
+  position: sticky;
+  top: 0;
+  background: rgba(var(--v-theme-surface), 0.95);
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 2;
+}
+
+.dialog-toolbar {
+  position: sticky;
+  top: 73px;
+  background: rgba(var(--v-theme-surface), 0.95);
+  z-index: 1;
+}
+
+.student-table {
+  overflow: auto;
+}
+
+.student-table :deep(table) {
+  min-width: 1400px;
+}
+
+.student-table :deep(th),
+.student-table :deep(td) {
+  white-space: nowrap;
+}
+
+.student-table :deep(.v-data-table-column--fixed),
+.student-table :deep(.v-data-table-column--fixed-end) {
+  background: rgb(var(--v-theme-surface));
+}
+
+.student-table :deep(.v-data-table-column--fixed-last-start)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  width: 5px;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+}
+
+.student-table :deep(.v-data-table-footer) {
+  padding: 4px 0 0;
+}
+
+/* 直線 */
+/* .student-table :deep(.v-data-table-column--first-fixed-end),
+.student-table :deep(.v-data-table-column--last-fixed) {
+  border-left: none !important;
+  border-right: none !important;
+} */
+
+.form-readonly :deep(.v-field) {
+  pointer-events: none;
+}
+
+.dialog-panel.is-mobile {
+  width: 100%;
+}
+
+.dialog-panel.is-mobile :deep(.v-card) {
+  width: 100%;
+  box-shadow: none;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-title) {
+  padding-inline: 16px;
+  min-height: 72px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-toolbar) {
+  top: 72px;
+  padding-inline: 12px;
+  min-height: 52px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-actions) {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+}
+
+tbody tr.is-highlighted {
+  animation: row-highlight 1.6s ease-out;
+}
+
+@keyframes row-highlight {
+  0% {
+    background-color: rgba(var(--v-theme-primary), 0.18);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+@media (max-width: 600px) {
+  .dialog-overlay :deep(.v-overlay__content) {
+    justify-content: stretch;
+  }
+
+  .dialog-panel {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/maint/MasterDetailC.vue b/src/views/maint/MasterDetailC.vue
index 0c94cd7..d1ed213 100644
--- a/src/views/maint/MasterDetailC.vue
+++ b/src/views/maint/MasterDetailC.vue
@@ -1,19 +1,1125 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import PageMasterDetailCMaintenance from '@/components/pages/PageMasterDetailCMaintenance.vue'
-import type { MaintenancePageModel } from '@/models/page'
-import { useStudentStore } from '@/stores/students'
+<template>
+  <!-- Page component 組合 PageMaint 外殼、主檔表格、子檔區與 dialog；流程狀態集中在本頁 script。 -->
+  <page-maint
+    :search-panel-open="searchPanelOpen"
+    :title="pageModel.title"
+    @create="openAddDialog"
+    @toggle-search="searchPanelOpen = !searchPanelOpen"
+  >
+    <!-- 搜尋欄位放在 PageMaint 的 search-fields slot，讓外殼固定、欄位由頁面決定。 -->
+    <template #search-fields>
+      <v-col cols="12" md="2">
+        <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
+        <v-text-field
+          id="search-student-id"
+          v-model="search.studentId"
+          aria-labelledby="search-student-id-label"
+          density="compact"
+          hide-details
+          name="searchStudentId"
+          placeholder="例如：S2024001"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
+        <v-text-field
+          id="search-name"
+          v-model="search.name"
+          aria-labelledby="search-name-label"
+          density="compact"
+          hide-details
+          name="searchName"
+          placeholder="例如：王小明"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
+        <v-select
+          id="search-department"
+          v-model="search.department"
+          aria-labelledby="search-department-label"
+          density="compact"
+          hide-details
+          :items="departments"
+          name="searchDepartment"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
+        <v-select
+          id="search-grade"
+          v-model="search.grade"
+          aria-labelledby="search-grade-label"
+          density="compact"
+          hide-details
+          item-title="title"
+          item-value="value"
+          :items="gradeOptions"
+          name="searchGrade"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col cols="12" md="2">
+        <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
+        <v-select
+          id="search-status"
+          v-model="search.status"
+          aria-labelledby="search-status-label"
+          density="compact"
+          hide-details
+          :items="statuses"
+          name="searchStatus"
+          variant="outlined"
+        />
+      </v-col>
+      <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
+      </v-col>
+    </template>
+    <!-- table slot 放主檔表格與列操作，操作事件再交給頁面流程函式處理。 -->
+    <template #table>
+      <v-data-table
+        v-model:page="currentPage"
+        class="student-table"
+        density="compact"
+        fixed-header
+        :headers="tableHeaders"
+        height="100%"
+        hide-default-footer
+        :items="students"
+        :items-per-page="itemsPerPage"
+        :row-props="rowProps"
+      >
+        <template #[`item.grade`]="{ item }">
+          {{ gradeLabel(item.grade) }}
+        </template>
+        <template #[`item.status`]="{ item }">
+          <v-chip :color="statusColor(item.status)" size="small" variant="tonal">
+            {{ item.status }}
+          </v-chip>
+        </template>
+        <template #[`item.actions`]="{ item }">
+          <div class="d-flex ga-2">
+            <v-btn
+              color="info"
+              :prepend-icon="mdiEye"
+              size="small"
+              variant="text"
+              @click="openViewDialog(item)"
+            >
+              檢視
+            </v-btn>
+            <v-btn
+              color="primary"
+              :prepend-icon="mdiPencil"
+              size="small"
+              variant="text"
+              @click="openEditDialog(item)"
+            >
+              修改
+            </v-btn>
+            <v-btn
+              color="error"
+              :prepend-icon="mdiDelete"
+              size="small"
+              variant="text"
+              @click="requestDeleteConfirmation(item)"
+            >
+              刪除
+            </v-btn>
+          </div>
+        </template>
+        <template #bottom>
+          <div class="d-flex align-center justify-space-between px-4 py-3">
+            <div class="text-body-2 text-medium-emphasis">
+              {{ pageSummary }}
+            </div>
+            <div class="d-flex align-center ga-2">
+              <v-btn
+                :disabled="currentPage <= 1"
+                size="small"
+                variant="text"
+                @click="currentPage = 1"
+                >第一頁</v-btn
+              >
+              <v-btn
+                :disabled="currentPage <= 1"
+                size="small"
+                variant="text"
+                @click="currentPage -= 1"
+                >上一頁</v-btn
+              >
+              <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
+              <v-btn
+                :disabled="currentPage >= pageCount"
+                size="small"
+                variant="text"
+                @click="currentPage += 1"
+                >下一頁</v-btn
+              >
+              <v-btn
+                :disabled="currentPage >= pageCount"
+                size="small"
+                variant="text"
+                @click="currentPage = pageCount"
+                >最後頁</v-btn
+              >
+            </div>
+          </div>
+        </template>
+      </v-data-table>
+    </template>
+  </page-maint>
 
+  <!-- 主從式維護視窗 -->
+  <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
+  <teleport to="body">
+    <!-- 包成元件需要傳高度寬度給dialog-panel -->
+    <v-overlay
+      class="dialog-overlay"
+      :close-on-content-click="false"
+      :model-value="dialogVisible"
+      scrim="rgba(0, 0, 0, 0.45)"
+      scroll-strategy="block"
+      @update:model-value="handleDialogVisibility"
+    >
+      <div class="dialog-panel" :class="{ 'is-mobile': isMobile }">
+        <master-detail-c-course-mobile-panel
+          v-if="isMobile && activeMobilePanel === 'detail'"
+          :is-form-locked="isFormLocked"
+          :is-view-mode="isViewMode"
+          :semester="selectedSemester"
+          @add-course="openAddCourseDialog"
+          @close="closeDetailPanel"
+          @delete-course="removeCourseFromSemester"
+          @update-course="handleUpdateCourse"
+        />
+
+        <!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
+        <!-- 說明：固定在視窗右側，包含學生表單與學期清單 -->
+        <mnt-dialog-card
+          v-else
+          :content-class="
+            isMobile
+              ? 'pa-3 flex-grow-1 overflow-y-auto pb-16'
+              : 'pa-2 flex-grow-1 overflow-hidden d-flex flex-column'
+          "
+          :dialog-subtitle="dialogSubtitle"
+          :dialog-title="dialogTitle"
+          :is-edit-mode="isEditMode"
+          :is-view-mode="isViewMode"
+          width="100%"
+        >
+          <template #toolbar>
+            <mnt-record-nav-toolbar
+              :has-next-record="hasNextRecord"
+              :has-prev-record="hasPrevRecord"
+              :is-edit-mode="isEditMode"
+              :is-view-mode="isViewMode"
+              :mobile="isMobile"
+              @first="openEdgeRecord('first')"
+              @last="openEdgeRecord('last')"
+              @next="openAdjacentRecord('next')"
+              @prev="openAdjacentRecord('prev')"
+              @switch-to-edit="switchToEditMode"
+              @switch-to-view="switchToViewMode"
+            />
+          </template>
+          <template #content>
+            <!-- 錯誤提示：當表單驗證未通過時顯示 -->
+            <v-alert
+              v-if="errorSummary.length > 0 && !isLoading"
+              class="mb-4"
+              type="error"
+              variant="tonal"
+            >
+              <div class="text-subtitle-2 mb-2">請先修正以下問題</div>
+              <div class="d-flex flex-column ga-1">
+                <v-btn
+                  v-for="error in errorSummary"
+                  :key="error.field"
+                  color="error"
+                  size="small"
+                  variant="text"
+                  @click="scrollToField(error.field)"
+                >
+                  {{ error.message }}
+                </v-btn>
+              </div>
+            </v-alert>
+
+            <!-- 載入中骨架畫面 -->
+            <v-skeleton-loader
+              v-if="isLoading"
+              class="mt-4"
+              type="subtitle,paragraph"
+              width="100%"
+            />
+
+            <!-- 學生主檔表單：檢視模式時會自動套用 readonly 樣式 -->
+            <v-form
+              v-else
+              :class="[
+                { 'form-readonly': isFormReadonly },
+                isMobile ? '' : 'd-flex flex-column h-100',
+              ]"
+              @submit.prevent="requestSaveConfirmation"
+            >
+              <MasterFileFormFields
+                :departments="departments"
+                :enroll-years="enrollYears"
+                :field-errors="fieldErrors"
+                :form="form"
+                :grade-options="gradeOptions"
+                :is-form-locked="isFormLocked"
+                :is-form-readonly="isFormReadonly"
+                :statuses="statuses"
+                @clear-field="clearFieldError"
+              />
+
+              <v-divider />
+              <DetailSimpleList
+                :is-form-locked="isFormLocked"
+                :is-form-readonly="isFormReadonly"
+                :is-mobile="isMobile"
+                :selected-semester-id="selectedSemesterId"
+                :semesters="studentSemesters"
+                @add-course="openAddCourseDialog"
+                @delete-course="removeCourseFromSemester"
+                @select-semester="handleSemesterSelect"
+                @update-course="handleUpdateCourse"
+              />
+            </v-form>
+          </template>
+          <template #actions>
+            <template v-if="isMobile">
+              <v-btn
+                class="flex-grow-1"
+                :disabled="isSaving"
+                variant="text"
+                @click="requestCloseDialog"
+                >取消</v-btn
+              >
+              <v-btn
+                v-if="isEditMode"
+                class="flex-grow-1"
+                color="error"
+                :disabled="isSaving"
+                variant="tonal"
+                @click="requestDeleteCurrent"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!isViewMode"
+                class="flex-grow-1"
+                color="primary"
+                :disabled="!isDirty || isLoading"
+                :loading="isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation"
+              >
+                儲存
+              </v-btn>
+              <v-btn
+                v-else
+                class="flex-grow-1"
+                color="primary"
+                variant="flat"
+                @click="requestCloseDialog"
+                >關閉</v-btn
+              >
+            </template>
+            <template v-else>
+              <v-spacer />
+              <v-btn :disabled="isSaving" variant="text" @click="requestCloseDialog">取消</v-btn>
+              <v-btn
+                v-if="isEditMode"
+                color="error"
+                :disabled="isSaving"
+                variant="tonal"
+                @click="requestDeleteCurrent"
+              >
+                刪除
+              </v-btn>
+              <v-btn
+                v-if="!isViewMode"
+                color="primary"
+                :disabled="!isDirty || isLoading"
+                :loading="isSaving"
+                variant="flat"
+                @click="requestSaveConfirmation"
+              >
+                儲存
+              </v-btn>
+              <v-btn v-else color="primary" variant="flat" @click="requestCloseDialog">關閉</v-btn>
+            </template>
+          </template>
+        </mnt-dialog-card>
+      </div>
+    </v-overlay>
+  </teleport>
+
+  <ConfirmDialog
+    v-model="confirmCloseVisible"
+    confirm-color="error"
+    confirm-text="關閉不儲存"
+    message="目前有尚未儲存的內容，確定要關閉嗎？"
+    title="未儲存變更"
+    @confirm="confirmClose"
+  />
+
+  <ConfirmDialog
+    v-model="confirmSaveVisible"
+    :confirm-loading="isSaving"
+    confirm-text="確認儲存"
+    max-width="520"
+    title="確認儲存變更"
+    @confirm="confirmSave"
+  >
+    <div v-if="saveSummary.length > 0" class="d-flex flex-column ga-2">
+      <div v-for="item in saveSummary" :key="item.label" class="d-flex flex-column">
+        <div class="text-caption text-medium-emphasis">{{ item.label }}</div>
+        <div v-if="item.before !== null" class="text-body-2">
+          <span class="text-medium-emphasis">原：</span>
+          <span :class="{ 'text-medium-emphasis': item.before === '—' }">
+            {{ item.before }}
+          </span>
+        </div>
+        <div class="text-body-2">
+          <span class="text-medium-emphasis">新：</span>
+          <span :class="{ 'text-medium-emphasis': item.after === '—' }">
+            {{ item.after }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-body-2">目前沒有可儲存的變更。</div>
+  </ConfirmDialog>
+
+  <ConfirmDialog
+    v-model="confirmDeleteVisible"
+    confirm-color="error"
+    confirm-text="確定刪除"
+    :message="`確定要刪除 ${pendingDeleteLabel} 嗎？此操作無法復原。`"
+    title="確認刪除"
+    @confirm="confirmDelete"
+  />
+
+  <ConfirmDialog
+    v-model="confirmSwitchVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換為檢視模式將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="confirmSwitch"
+  />
+
+  <ConfirmDialog
+    v-model="confirmNavigateVisible"
+    confirm-text="確定切換"
+    max-width="480"
+    message="目前有尚未儲存的內容，切換到其他資料將會捨棄變更，確定要切換嗎？"
+    title="未儲存變更"
+    @confirm="confirmNavigate"
+  />
+
+  <!-- 成功提示 -->
+  <v-snackbar v-model="snackbarVisible" color="success" location="bottom right" :timeout="2200">
+    儲存成功
+  </v-snackbar>
+
+  <!-- 新增成績對話框 -->
+  <v-dialog v-model="addCourseDialogVisible" max-width="480" persistent>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon color="primary" start :icon="mdiSchool" />
+        新增成績
+      </v-card-title>
+      <v-card-text>
+        <v-select
+          v-model="addCourseForm.semesterId"
+          class="mb-3"
+          density="comfortable"
+          item-title="label"
+          item-value="value"
+          :items="semesterOptions"
+          label="學期"
+          variant="outlined"
+        />
+        <v-select
+          v-model="addCourseForm.courseName"
+          class="mb-3"
+          density="comfortable"
+          :items="availableCourses"
+          label="課程名稱"
+          variant="outlined"
+          @update:model-value="handleCourseSelect"
+        />
+        <v-text-field
+          v-model.number="addCourseForm.credits"
+          class="mb-3"
+          density="comfortable"
+          label="學分"
+          type="number"
+          variant="outlined"
+        />
+        <v-text-field
+          v-model.number="addCourseForm.score"
+          density="comfortable"
+          label="分數"
+          type="number"
+          variant="outlined"
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="addCourseDialogVisible = false">取消</v-btn>
+        <v-btn color="primary" :disabled="!canAddCourse" variant="flat" @click="confirmAddCourse"
+          >新增</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil, mdiSchool } from '@mdi/js'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useDisplay } from 'vuetify'
+
+import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
+import MasterDetailCCourseMobilePanel from '@/components/maint/master-detail/CourseMobilePanel.vue'
+import DetailSimpleList from '@/components/maint/master-detail/DetailSimpleList.vue'
+import MasterFileFormFields from '@/components/maint/MasterFileFormFields.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/PageMaint.vue'
+import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
+import { type CourseRecord, type SemesterRecord, useSemesterStore } from '@/stores/semesters'
+import { type StudentRecord, useStudentStore } from '@/stores/students'
+import type { MaintenancePageModel } from '@/models/page'
+
+// 下拉選項：系所/年級/入學年度/狀態
+const departments = ['資訊工程', '企業管理', '應用外語', '視覺設計', '財務金融']
+const gradeOptions = [
+  { title: '大一', value: 1 },
+  { title: '大二', value: 2 },
+  { title: '大三', value: 3 },
+  { title: '大四', value: 4 },
+  { title: '研究所', value: 5 },
+]
+const enrollYears = [2024, 2023, 2022, 2021, 2020, 2019]
+const statuses = ['在學', '休學', '畢業']
+
+const { smAndUp } = useDisplay()
+const isMobile = computed(() => !smAndUp.value)
+
+// 表格欄位設定（含固定欄與排序）
+const tableHeaders = [
+  {
+    title: '學號',
+    key: 'studentId',
+    sortable: true,
+    fixed: smAndUp.value && ('start' as const),
+    width: 120,
+  },
+  {
+    title: '姓名',
+    key: 'name',
+    sortable: true,
+    fixed: smAndUp.value && ('start' as const),
+    width: 100,
+  },
+  { title: '系所', key: 'department', sortable: true, width: 140 },
+  { title: '年級', key: 'grade', sortable: true, width: 90 },
+  { title: '入學年度', key: 'enrollYear', sortable: true, width: 110 },
+  { title: '已修學分', key: 'credits', sortable: true, width: 110 },
+  { title: 'Email', key: 'email', sortable: true, width: 200 },
+  { title: '電話', key: 'phone', sortable: true, width: 140 },
+  { title: '指導老師', key: 'advisor', sortable: true, width: 110 },
+  { title: '狀態', key: 'status', sortable: true, width: 90 },
+  {
+    title: '操作',
+    key: 'actions',
+    sortable: false,
+    fixed: smAndUp.value && ('end' as const),
+    width: 'auto',
+    cellProps: { class: 'px-0 bg-background' },
+  },
+]
+
+// 查詢條件（示意用，未接 API）
+const search = ref({
+  studentId: '',
+  name: '',
+  department: '',
+  grade: null as number | null,
+  status: '',
+})
+// 查詢區塊是否展開
+const searchPanelOpen = ref(false)
+
+// 透過 store 管理 Demo 資料與 CRUD
 const studentStore = useStudentStore()
+const semesterStore = useSemesterStore()
+const students = computed(() => studentStore.students)
 const pageModel = computed<MaintenancePageModel>(() => ({
   type: 'maintenance',
   title: '主從資料維護示範C',
-  records: studentStore.students,
+  records: students.value,
   loading: false,
   error: null,
 }))
+type StudentPayload = Omit<StudentRecord, 'id'>
+const itemsPerPage = 10
+const currentPage = ref(1)
+const pageCount = computed(() => Math.max(1, Math.ceil(students.value.length / itemsPerPage)))
+const pageSummary = computed(() => {
+  const total = students.value.length
+  if (total === 0) return '第 0-0 筆 / 共 0 筆'
+
+  const start = (currentPage.value - 1) * itemsPerPage + 1
+  const end = Math.min(currentPage.value * itemsPerPage, total)
+  return `第 ${start}-${end} 筆 / 共 ${total} 筆`
+})
+
+// 彈窗狀態與流程控制
+const dialogVisible = ref(false)
+const editingId = ref<number | null>(null)
+const dialogMode = ref<'create' | 'edit' | 'view'>('create')
+const isLoading = ref(false)
+const isSaving = ref(false)
+// UI 回饋
+const snackbarVisible = ref(false)
+const highlightedId = ref<number | null>(null)
+// 防止快速切換導致的異步覆蓋
+const loadSequence = ref(0)
+
+// Master-Detail 擴充
+const studentSemesters = ref<SemesterRecord[]>([])
+const selectedSemesterId = ref<number | null>(null)
+const activeMobilePanel = ref<'master' | 'detail'>('master')
+const selectedSemester = computed(
+  () => studentSemesters.value.find((item) => item.id === selectedSemesterId.value) ?? null
+)
+
+// 新增成績對話框狀態
+const addCourseDialogVisible = ref(false)
+const addCourseForm = ref({
+  semesterId: null as number | null,
+  courseName: '',
+  credits: 3,
+  score: 0,
+})
+
+// 可選課程清單（與 store 內的 subjects 一致）
+const availableCourses = [
+  '資料結構',
+  '演算法',
+  '作業系統',
+  '計算機組織',
+  '線性代數',
+  '機率與統計',
+  '資料庫系統',
+  '人工智慧導論',
+  '網頁程式設計',
+  '計算機網路',
+]
+
+// 學期下拉選項
+const semesterOptions = computed(() =>
+  studentSemesters.value.map((sem) => ({
+    value: sem.id,
+    label: sem.semesterName,
+  }))
+)
+
+// 是否可以新增
+const canAddCourse = computed(
+  () =>
+    addCourseForm.value.semesterId !== null &&
+    addCourseForm.value.courseName !== '' &&
+    addCourseForm.value.credits > 0
+)
+
+// 開啟新增成績對話框
+function openAddCourseDialog(semesterId?: number) {
+  addCourseForm.value = {
+    semesterId: semesterId ?? selectedSemesterId.value ?? studentSemesters.value[0]?.id ?? null,
+    courseName: '',
+    credits: 3,
+    score: 0,
+  }
+  addCourseDialogVisible.value = true
+}
+
+// 選擇課程時自動帶入學分
+function handleCourseSelect(courseName: string) {
+  const creditsMap: Record<string, number> = {
+    資料結構: 3,
+    演算法: 3,
+    作業系統: 3,
+    計算機組織: 3,
+    線性代數: 3,
+    機率與統計: 3,
+    資料庫系統: 3,
+    人工智慧導論: 3,
+    網頁程式設計: 3,
+    計算機網路: 3,
+  }
+  const credits = creditsMap[courseName]
+  if (credits !== undefined) {
+    addCourseForm.value.credits = credits
+  }
+}
+
+// 確認新增成績
+function confirmAddCourse() {
+  if (!addCourseForm.value.semesterId || !addCourseForm.value.courseName) return
+
+  const semester = studentSemesters.value.find((sem) => sem.id === addCourseForm.value.semesterId)
+  if (!semester) return
+
+  semesterStore.updateSemester(addCourseForm.value.semesterId, {
+    courses: [
+      ...semester.courses,
+      {
+        code: `CS${Date.now()}`,
+        name: addCourseForm.value.courseName,
+        credits: addCourseForm.value.credits,
+        score: addCourseForm.value.score,
+      },
+    ],
+  })
+
+  refreshSemesters()
+  addCourseDialogVisible.value = false
+}
+
+// 輔助函式：重新載入當前學生的學期資料
+function refreshSemesters() {
+  if (editingId.value) {
+    studentSemesters.value = semesterStore.getStudentSemesters(editingId.value)
+  }
+}
+
+function handleSemesterSelect(semesterId: number) {
+  selectedSemesterId.value = semesterId
+  if (isMobile.value) {
+    activeMobilePanel.value = 'detail'
+  }
+}
+
+function closeDetailPanel() {
+  if (isMobile.value) {
+    activeMobilePanel.value = 'master'
+    return
+  }
+  selectedSemesterId.value = null
+}
+
+function handleUpdateCourse(
+  semesterId: number,
+  courseIndex: number,
+  payload: Partial<CourseRecord>
+) {
+  const semester = studentSemesters.value.find((item) => item.id === semesterId)
+  if (!semester) return
+  const nextCourses = semester.courses.map((course, idx) =>
+    idx === courseIndex ? { ...course, ...payload } : course
+  )
+  semesterStore.updateSemester(semesterId, { courses: nextCourses })
+}
+
+function removeCourseFromSemester(semesterId: number, courseIndex: number) {
+  const semester = studentSemesters.value.find((item) => item.id === semesterId)
+  if (!semester) return
+  semesterStore.updateSemester(semesterId, {
+    courses: semester.courses.filter((_, idx) => idx !== courseIndex),
+  })
+}
+
+const {
+  errorSummary,
+  fieldErrors,
+  form,
+  isDirty,
+  saveSummary,
+  clearAllErrors,
+  clearFieldError,
+  gradeLabel,
+  resetForm,
+  rowProps,
+  setForm,
+  statusColor,
+  syncInitialForm,
+  validateForm,
+} = useStudentMaintenanceForm({
+  departments,
+  gradeOptions,
+  enrollYears,
+  statuses,
+  students,
+  editingId,
+  highlightedId,
+})
+
+// 表單欄位簡單排版（無分組）
+
+// 彈窗標題/副標題
+const dialogTitle = computed(() => {
+  if (dialogMode.value === 'view') return '檢視主檔資料示範'
+  if (dialogMode.value === 'edit') return '修改主檔資料示範'
+  return '新增主檔資料示範'
+})
+const dialogSubtitle = computed(() => {
+  if (!editingId.value) return ''
+  return `${form.value.studentId || '未填學號'}・${form.value.name || '未填姓名'}`
+})
+// 是否有修改（用於啟用儲存與提示）
+// 載入/儲存時鎖定、檢視模式 readonly
+const isFormLocked = computed(() => isLoading.value || isSaving.value)
+const {
+  confirmClose,
+  confirmCloseVisible,
+  confirmDelete,
+  confirmDeleteVisible,
+  confirmNavigate,
+  confirmNavigateVisible,
+  confirmSaveVisible,
+  confirmSwitch,
+  confirmSwitchVisible,
+  handleDialogVisibility,
+  hasNextRecord,
+  hasPrevRecord,
+  isEditMode,
+  isViewMode,
+  openAdjacentRecord,
+  openEdgeRecord,
+  pendingDeleteLabel,
+  requestCloseDialog,
+  requestDeleteConfirmation,
+  requestDeleteCurrent,
+  switchToEditMode,
+  switchToViewMode,
+} = useMaintenanceCrudFlow<StudentRecord>({
+  records: students,
+  editingId,
+  dialogMode,
+  dialogVisible,
+  isLoading,
+  isSaving,
+  isDirty,
+  clearAllErrors,
+  resetForm,
+  openEditDialog,
+  openViewDialog,
+  removeRecord: (id) => {
+    studentStore.removeStudent(id)
+    semesterStore.removeByStudentId(id)
+  },
+  describeRecord: (student) => `${student.studentId} ${student.name}`,
+  onCloseReset: () => {
+    selectedSemesterId.value = null
+    activeMobilePanel.value = 'master'
+    studentSemesters.value = []
+  },
+})
+const isFormReadonly = computed(() => isViewMode.value)
+// 重設查詢條件
+function resetSearch() {
+  search.value = {
+    studentId: '',
+    name: '',
+    department: '',
+    grade: null,
+    status: '',
+  }
+}
+
+watch(pageCount, (value) => {
+  if (currentPage.value > value) {
+    currentPage.value = value
+  }
+})
+
+// 新增：開啟彈窗，使用預設值
+function openAddDialog() {
+  loadSequence.value += 1
+  dialogMode.value = 'create'
+  editingId.value = null
+  studentSemesters.value = []
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  resetForm()
+  isLoading.value = false
+  dialogVisible.value = true
+}
+
+// 編輯：先開彈窗，資料載入後填入
+function openEditDialog(student: StudentRecord) {
+  loadSequence.value += 1
+  const sequence = loadSequence.value
+  dialogMode.value = 'edit'
+  editingId.value = student.id
+  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  dialogVisible.value = true
+  isLoading.value = true
+  clearAllErrors()
+  setTimeout(() => {
+    if (sequence !== loadSequence.value || !dialogVisible.value) return
+    setForm({
+      studentId: student.studentId,
+      name: student.name,
+      department: student.department,
+      grade: student.grade,
+      enrollYear: student.enrollYear,
+      credits: student.credits,
+      advisor: student.advisor,
+      email: student.email,
+      phone: student.phone,
+      status: student.status,
+    })
+    syncInitialForm()
+    isLoading.value = false
+  }, 350)
+}
+
+// 檢視：只讀模式並預設展開所有分組
+function openViewDialog(student: StudentRecord) {
+  loadSequence.value += 1
+  const sequence = loadSequence.value
+  dialogMode.value = 'view'
+  editingId.value = student.id
+  studentSemesters.value = semesterStore.getStudentSemesters(student.id)
+  selectedSemesterId.value = null
+  activeMobilePanel.value = 'master'
+  dialogVisible.value = true
+  isLoading.value = true
+  clearAllErrors()
+  setTimeout(() => {
+    if (sequence !== loadSequence.value || !dialogVisible.value) return
+    setForm({
+      studentId: student.studentId,
+      name: student.name,
+      department: student.department,
+      grade: student.grade,
+      enrollYear: student.enrollYear,
+      credits: student.credits,
+      advisor: student.advisor,
+      email: student.email,
+      phone: student.phone,
+      status: student.status,
+    })
+    syncInitialForm()
+    isLoading.value = false
+  }, 350)
+}
+
+// 先檢核再提示儲存確認
+async function requestSaveConfirmation() {
+  if (isSaving.value || isLoading.value || !isDirty.value || isViewMode.value) return
+  clearAllErrors()
+
+  const errors = validateForm()
+  if (errors.length > 0) {
+    for (const error of errors) {
+      fieldErrors.value[error.field] = [error.message]
+    }
+    await nextTick()
+    const firstError = errors[0]
+    if (firstError) scrollToField(firstError.field)
+    return
+  }
+
+  confirmSaveVisible.value = true
+}
+
+// 儲存確認後才真正送出
+function confirmSave() {
+  confirmSaveVisible.value = false
+  saveStudent()
+}
+
+// 寫入資料（Demo：直接更新列表）
+async function saveStudent() {
+  if (isSaving.value || isLoading.value) return
+  isSaving.value = true
+  await new Promise((resolve) => setTimeout(resolve, 450))
+  const payload = {
+    studentId: form.value.studentId.trim(),
+    name: form.value.name.trim(),
+    department: form.value.department,
+    grade: form.value.grade,
+    enrollYear: form.value.enrollYear,
+    credits: form.value.credits,
+    advisor: form.value.advisor.trim(),
+    email: form.value.email.trim(),
+    phone: form.value.phone.trim(),
+    status: form.value.status,
+  } as StudentPayload
+
+  if (editingId.value) {
+    const updated = studentStore.updateStudent(editingId.value, payload)
+    if (updated) highlightedId.value = editingId.value
+  } else {
+    const createdId = studentStore.addStudent(payload)
+    semesterStore.generateForStudent(createdId)
+    highlightedId.value = createdId
+  }
+
+  syncInitialForm()
+  dialogVisible.value = false
+  snackbarVisible.value = true
+  isSaving.value = false
+  window.setTimeout(() => {
+    highlightedId.value = null
+  }, 1600)
+}
+
+function scrollToField(field: string) {
+  const target = document.getElementById(`field-${field}`)
+  if (!target) return
+  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
 </script>
 
-<template>
-  <PageMasterDetailCMaintenance :page="pageModel" />
-</template>
+<style scoped>
+:deep(.v-table__wrapper .v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 32px;
+}
+
+.dialog-overlay :deep(.v-overlay__content) {
+  height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.dialog-panel {
+  width: 65%;
+  max-width: 100%;
+  height: 100vh;
+  background: transparent;
+  padding: 0;
+  display: flex;
+}
+
+.dialog-panel > .v-card {
+  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
+}
+
+.dialog-actions {
+  position: sticky;
+  bottom: 0;
+  background: rgba(var(--v-theme-surface), 0.95);
+  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 1;
+}
+
+.dialog-title {
+  position: sticky;
+  top: 0;
+  background: rgba(var(--v-theme-surface), 0.95);
+  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  z-index: 2;
+}
+
+.student-table {
+  overflow: auto;
+}
+
+.student-table :deep(table) {
+  min-width: 1400px;
+}
+
+.student-table :deep(th),
+.student-table :deep(td) {
+  white-space: nowrap;
+}
+
+.student-table :deep(.v-data-table-column--fixed),
+.student-table :deep(.v-data-table-column--fixed-end) {
+  background: rgb(var(--v-theme-surface));
+}
+
+.student-table :deep(.v-data-table-column--fixed-last-start)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  width: 5px;
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+}
+
+.student-table :deep(.v-data-table-footer) {
+  padding: 4px 0 0;
+}
+
+/* 直線 */
+/* .student-table :deep(.v-data-table-column--first-fixed-end),
+.student-table :deep(.v-data-table-column--last-fixed) {
+  border-left: none !important;
+  border-right: none !important;
+} */
+
+.form-readonly :deep(.v-field) {
+  pointer-events: none;
+}
+
+tbody tr.is-highlighted {
+  animation: row-highlight 1.6s ease-out;
+}
+
+@keyframes row-highlight {
+  0% {
+    background-color: rgba(var(--v-theme-primary), 0.18);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+.dialog-panel.is-mobile {
+  width: 100%;
+}
+
+.dialog-panel.is-mobile :deep(.v-card) {
+  width: 100%;
+  box-shadow: none;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-title) {
+  padding-inline: 16px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-toolbar) {
+  padding-inline: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.dialog-panel.is-mobile :deep(.dialog-actions) {
+  gap: 8px;
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+}
+
+@media (max-width: 600px) {
+  .dialog-overlay :deep(.v-overlay__content) {
+    justify-content: stretch;
+  }
+}
+</style>
diff --git a/src/views/maint/SingleRecord.vue b/src/views/maint/SingleRecord.vue
index 92f4340..be975ae 100644
--- a/src/views/maint/SingleRecord.vue
+++ b/src/views/maint/SingleRecord.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PageMaintenance from '@/components/pages/PageMaintenance.vue'
+import PageMaint from '@/components/PageMaint.vue'
 import SectionDataTable from '@/components/sections/SectionDataTable.vue'
 import SectionFormPanel from '@/components/sections/SectionFormPanel.vue'
 import SectionSearchPanel from '@/components/sections/SectionSearchPanel.vue'
@@ -14,9 +14,10 @@ const {
 </script>
 
 <template>
-  <PageMaintenance
-    v-model:search-panel-open="searchPanelOpen"
-    :page="pageModel"
+  <PageMaint
+    :title="pageModel.title"
+    :search-panel-open="searchPanelOpen"
+    @toggle-search="searchPanelOpen = !searchPanelOpen"
     @create="commands.openAddDialog"
   >
     <template #search-fields>
@@ -44,7 +45,7 @@ const {
         @view="commands.openViewDialog"
       />
     </template>
-  </PageMaintenance>
+  </PageMaint>
 
   <SectionFormPanel
     v-bind="formPanelProps"