From 20b093ff73efa0dbfd376f326df83ea7b078c0c2 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Mon, 30 Mar 2026 11:03:01 +0800
Subject: [PATCH] feat: add SingleRecord component for student maintenance with
 CRUD functionality

---
 .../CommonConfirmDialog.vue                   |  0
 .../EditableStudentGrid.vue                   |  2 +-
 .../MaintenanceCrudDialogs.vue                |  2 +-
 .../MaintenanceStudentFormFields.vue          |  2 +-
 .../{maintenance => maint}/MntDialogCard.vue  |  0
 .../MntRecordNavToolbar.vue                   |  0
 .../MntPageCards.vue => maint/PageMaint.vue}  |  0
 .../master-detail/CourseMobilePanel.vue}      |  0
 .../master-detail/CourseSection.vue}          |  0
 .../master-detail/SemesterList.vue}           |  0
 .../master-detail/SemesterMobilePanel.vue}    |  0
 .../master-detail/SemesterPanel.vue}          |  0
 .../master-detail/SemesterSection.vue}        |  0
 .../useEditableStudentGrid.ts                 |  0
 .../useMaintenanceCrudFlow.ts                 |  0
 .../useStudentMaintenanceForm.ts              |  0
 src/router/routes.ts                          | 10 ++++----
 .../{EditableGridMnt.vue => EditableGrid.vue} |  2 +-
 ...{MasterDetailMnt.vue => MasterDetailA.vue} | 22 ++++++++---------
 ...MasterDetailMntB.vue => MasterDetailB.vue} | 24 +++++++++----------
 ...MasterDetailMntC.vue => MasterDetailC.vue} | 22 ++++++++---------
 .../{SingleRecordMnt.vue => SingleRecord.vue} | 16 ++++++-------
 22 files changed, 51 insertions(+), 51 deletions(-)
 rename src/components/{maintenance => maint}/CommonConfirmDialog.vue (100%)
 rename src/components/{maintenance => maint}/EditableStudentGrid.vue (99%)
 rename src/components/{maintenance => maint}/MaintenanceCrudDialogs.vue (97%)
 rename src/components/{maintenance => maint}/MaintenanceStudentFormFields.vue (97%)
 rename src/components/{maintenance => maint}/MntDialogCard.vue (100%)
 rename src/components/{maintenance => maint}/MntRecordNavToolbar.vue (100%)
 rename src/components/{maintenance/MntPageCards.vue => maint/PageMaint.vue} (100%)
 rename src/components/{maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue => maint/master-detail/CourseMobilePanel.vue} (100%)
 rename src/components/{maintenance/master-detail-c/MasterDetailCCourseSection.vue => maint/master-detail/CourseSection.vue} (100%)
 rename src/components/{maintenance/master-detail/MasterDetailSemesterList.vue => maint/master-detail/SemesterList.vue} (100%)
 rename src/components/{maintenance/master-detail-b/MasterDetailBSemesterMobilePanel.vue => maint/master-detail/SemesterMobilePanel.vue} (100%)
 rename src/components/{maintenance/master-detail/MasterDetailSemesterPanel.vue => maint/master-detail/SemesterPanel.vue} (100%)
 rename src/components/{maintenance/master-detail-b/MasterDetailBSemesterSection.vue => maint/master-detail/SemesterSection.vue} (100%)
 rename src/composables/{maintenance => maint}/useEditableStudentGrid.ts (100%)
 rename src/composables/{maintenance => maint}/useMaintenanceCrudFlow.ts (100%)
 rename src/composables/{maintenance => maint}/useStudentMaintenanceForm.ts (100%)
 rename src/views/maint/{EditableGridMnt.vue => EditableGrid.vue} (50%)
 rename src/views/maint/{MasterDetailMnt.vue => MasterDetailA.vue} (97%)
 rename src/views/maint/{MasterDetailMntB.vue => MasterDetailB.vue} (97%)
 rename src/views/maint/{MasterDetailMntC.vue => MasterDetailC.vue} (97%)
 rename src/views/maint/{SingleRecordMnt.vue => SingleRecord.vue} (98%)

diff --git a/src/components/maintenance/CommonConfirmDialog.vue b/src/components/maint/CommonConfirmDialog.vue
similarity index 100%
rename from src/components/maintenance/CommonConfirmDialog.vue
rename to src/components/maint/CommonConfirmDialog.vue
diff --git a/src/components/maintenance/EditableStudentGrid.vue b/src/components/maint/EditableStudentGrid.vue
similarity index 99%
rename from src/components/maintenance/EditableStudentGrid.vue
rename to src/components/maint/EditableStudentGrid.vue
index bd31e53..93f856f 100644
--- a/src/components/maintenance/EditableStudentGrid.vue
+++ b/src/components/maint/EditableStudentGrid.vue
@@ -304,7 +304,7 @@
 
 <script setup lang="ts">
 import { mdiContentSave, mdiDelete, mdiMagnify, mdiRestore } from '@mdi/js'
-import { useEditableStudentGrid } from '@/composables/maintenance/useEditableStudentGrid'
+import { useEditableStudentGrid } from '@/composables/maint/useEditableStudentGrid'
 
 const {
   departments,
diff --git a/src/components/maintenance/MaintenanceCrudDialogs.vue b/src/components/maint/MaintenanceCrudDialogs.vue
similarity index 97%
rename from src/components/maintenance/MaintenanceCrudDialogs.vue
rename to src/components/maint/MaintenanceCrudDialogs.vue
index 240c91c..ce96ecd 100644
--- a/src/components/maintenance/MaintenanceCrudDialogs.vue
+++ b/src/components/maint/MaintenanceCrudDialogs.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import type { SaveSummaryItem } from '@/composables/maintenance/useStudentMaintenanceForm'
+import type { SaveSummaryItem } from '@/composables/maint/useStudentMaintenanceForm'
 import { computed } from 'vue'
 import CommonConfirmDialog from './CommonConfirmDialog.vue'
 
diff --git a/src/components/maintenance/MaintenanceStudentFormFields.vue b/src/components/maint/MaintenanceStudentFormFields.vue
similarity index 97%
rename from src/components/maintenance/MaintenanceStudentFormFields.vue
rename to src/components/maint/MaintenanceStudentFormFields.vue
index 82de6e3..e9751be 100644
--- a/src/components/maintenance/MaintenanceStudentFormFields.vue
+++ b/src/components/maint/MaintenanceStudentFormFields.vue
@@ -103,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import type { StudentFormState } from '@/composables/maintenance/useStudentMaintenanceForm'
+import type { StudentFormState } from '@/composables/maint/useStudentMaintenanceForm'
 import { toRef } from 'vue'
 
 interface GradeOption {
diff --git a/src/components/maintenance/MntDialogCard.vue b/src/components/maint/MntDialogCard.vue
similarity index 100%
rename from src/components/maintenance/MntDialogCard.vue
rename to src/components/maint/MntDialogCard.vue
diff --git a/src/components/maintenance/MntRecordNavToolbar.vue b/src/components/maint/MntRecordNavToolbar.vue
similarity index 100%
rename from src/components/maintenance/MntRecordNavToolbar.vue
rename to src/components/maint/MntRecordNavToolbar.vue
diff --git a/src/components/maintenance/MntPageCards.vue b/src/components/maint/PageMaint.vue
similarity index 100%
rename from src/components/maintenance/MntPageCards.vue
rename to src/components/maint/PageMaint.vue
diff --git a/src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue b/src/components/maint/master-detail/CourseMobilePanel.vue
similarity index 100%
rename from src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue
rename to src/components/maint/master-detail/CourseMobilePanel.vue
diff --git a/src/components/maintenance/master-detail-c/MasterDetailCCourseSection.vue b/src/components/maint/master-detail/CourseSection.vue
similarity index 100%
rename from src/components/maintenance/master-detail-c/MasterDetailCCourseSection.vue
rename to src/components/maint/master-detail/CourseSection.vue
diff --git a/src/components/maintenance/master-detail/MasterDetailSemesterList.vue b/src/components/maint/master-detail/SemesterList.vue
similarity index 100%
rename from src/components/maintenance/master-detail/MasterDetailSemesterList.vue
rename to src/components/maint/master-detail/SemesterList.vue
diff --git a/src/components/maintenance/master-detail-b/MasterDetailBSemesterMobilePanel.vue b/src/components/maint/master-detail/SemesterMobilePanel.vue
similarity index 100%
rename from src/components/maintenance/master-detail-b/MasterDetailBSemesterMobilePanel.vue
rename to src/components/maint/master-detail/SemesterMobilePanel.vue
diff --git a/src/components/maintenance/master-detail/MasterDetailSemesterPanel.vue b/src/components/maint/master-detail/SemesterPanel.vue
similarity index 100%
rename from src/components/maintenance/master-detail/MasterDetailSemesterPanel.vue
rename to src/components/maint/master-detail/SemesterPanel.vue
diff --git a/src/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue b/src/components/maint/master-detail/SemesterSection.vue
similarity index 100%
rename from src/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue
rename to src/components/maint/master-detail/SemesterSection.vue
diff --git a/src/composables/maintenance/useEditableStudentGrid.ts b/src/composables/maint/useEditableStudentGrid.ts
similarity index 100%
rename from src/composables/maintenance/useEditableStudentGrid.ts
rename to src/composables/maint/useEditableStudentGrid.ts
diff --git a/src/composables/maintenance/useMaintenanceCrudFlow.ts b/src/composables/maint/useMaintenanceCrudFlow.ts
similarity index 100%
rename from src/composables/maintenance/useMaintenanceCrudFlow.ts
rename to src/composables/maint/useMaintenanceCrudFlow.ts
diff --git a/src/composables/maintenance/useStudentMaintenanceForm.ts b/src/composables/maint/useStudentMaintenanceForm.ts
similarity index 100%
rename from src/composables/maintenance/useStudentMaintenanceForm.ts
rename to src/composables/maint/useStudentMaintenanceForm.ts
diff --git a/src/router/routes.ts b/src/router/routes.ts
index b0ce26e..9e64c0e 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -22,31 +22,31 @@ export const routes: RouteRecordRaw[] = [
   {
     path: '/single-record-maintenance',
     name: 'single-record-maintenance',
-    component: () => import('@/views/maint/SingleRecordMnt.vue'),
+    component: () => import('@/views/maint/SingleRecord.vue'),
     meta: { layout: 'default' },
   },
   {
     path: '/master-detail-maintenance',
     name: 'master-detail-maintenance-a',
-    component: () => import('@/views/maint/MasterDetailMnt.vue'),
+    component: () => import('@/views/maint/MasterDetailA.vue'),
     meta: { layout: 'default' },
   },
   {
     path: '/master-detail-maintenance-b',
     name: 'master-detail-maintenance-b',
-    component: () => import('@/views/maint/MasterDetailMntB.vue'),
+    component: () => import('@/views/maint/MasterDetailB.vue'),
     meta: { layout: 'default' },
   },
   {
     path: '/master-detail-maintenance-c',
     name: 'master-detail-maintenance-c',
-    component: () => import('@/views/maint/MasterDetailMntC.vue'),
+    component: () => import('@/views/maint/MasterDetailC.vue'),
     meta: { layout: 'default' },
   },
   {
     path: '/editable-grid-maintenance',
     name: 'editable-grid-maintenance',
-    component: () => import('@/views/maint/EditableGridMnt.vue'),
+    component: () => import('@/views/maint/EditableGrid.vue'),
     meta: { layout: 'default' },
   },
   {
diff --git a/src/views/maint/EditableGridMnt.vue b/src/views/maint/EditableGrid.vue
similarity index 50%
rename from src/views/maint/EditableGridMnt.vue
rename to src/views/maint/EditableGrid.vue
index a0cef61..7787db1 100644
--- a/src/views/maint/EditableGridMnt.vue
+++ b/src/views/maint/EditableGrid.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-import EditableStudentGrid from '@/components/maintenance/EditableStudentGrid.vue'
+import EditableStudentGrid from '@/components/maint/EditableStudentGrid.vue'
 </script>
diff --git a/src/views/maint/MasterDetailMnt.vue b/src/views/maint/MasterDetailA.vue
similarity index 97%
rename from src/views/maint/MasterDetailMnt.vue
rename to src/views/maint/MasterDetailA.vue
index 5a5b436..03abe81 100644
--- a/src/views/maint/MasterDetailMnt.vue
+++ b/src/views/maint/MasterDetailA.vue
@@ -1,5 +1,5 @@
 <template>
-  <mnt-page-cards
+  <page-maint
     :search-panel-open="searchPanelOpen"
     :title="`主從資料維護示範A`"
     @create="openAddDialog"
@@ -170,7 +170,7 @@
         </template>
       </v-data-table>
     </template>
-  </mnt-page-cards>
+  </page-maint>
 
   <!-- 主從式維護視窗 -->
   <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
@@ -380,15 +380,15 @@ import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
 
-import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
-import MaintenanceStudentFormFields from '@/components/maintenance/MaintenanceStudentFormFields.vue'
-import MasterDetailSemesterList from '@/components/maintenance/master-detail/MasterDetailSemesterList.vue'
-import MasterDetailSemesterPanel from '@/components/maintenance/master-detail/MasterDetailSemesterPanel.vue'
-import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
-import MntPageCards from '@/components/maintenance/MntPageCards.vue'
-import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
+import MaintenanceCrudDialogs from '@/components/maint/MaintenanceCrudDialogs.vue'
+import MaintenanceStudentFormFields from '@/components/maint/MaintenanceStudentFormFields.vue'
+import MasterDetailSemesterList from '@/components/maint/master-detail/SemesterList.vue'
+import MasterDetailSemesterPanel from '@/components/maint/master-detail/SemesterPanel.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/maint/PageMaint.vue'
+import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
 import { type SemesterRecord, useSemesterStore } from '@/stores/semesters'
 import { type StudentRecord, useStudentStore } from '@/stores/students'
 
diff --git a/src/views/maint/MasterDetailMntB.vue b/src/views/maint/MasterDetailB.vue
similarity index 97%
rename from src/views/maint/MasterDetailMntB.vue
rename to src/views/maint/MasterDetailB.vue
index 00fe726..ac9196f 100644
--- a/src/views/maint/MasterDetailMntB.vue
+++ b/src/views/maint/MasterDetailB.vue
@@ -1,5 +1,5 @@
 <template>
-  <mnt-page-cards
+  <page-maint
     :search-panel-open="searchPanelOpen"
     :title="`主從資料維護示範B`"
     @create="openAddDialog"
@@ -170,7 +170,7 @@
         </template>
       </v-data-table>
     </template>
-  </mnt-page-cards>
+  </page-maint>
 
   <!-- 主從式維護視窗 -->
   <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
@@ -459,16 +459,16 @@ import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
 
-import CommonConfirmDialog from '@/components/maintenance/CommonConfirmDialog.vue'
-import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
-import MaintenanceStudentFormFields from '@/components/maintenance/MaintenanceStudentFormFields.vue'
-import MasterDetailBSemesterMobilePanel from '@/components/maintenance/master-detail-b/MasterDetailBSemesterMobilePanel.vue'
-import MasterDetailBSemesterSection from '@/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue'
-import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
-import MntPageCards from '@/components/maintenance/MntPageCards.vue'
-import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
+import CommonConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
+import MaintenanceCrudDialogs from '@/components/maint/MaintenanceCrudDialogs.vue'
+import MaintenanceStudentFormFields from '@/components/maint/MaintenanceStudentFormFields.vue'
+import MasterDetailBSemesterMobilePanel from '@/components/maint/master-detail/SemesterMobilePanel.vue'
+import MasterDetailBSemesterSection from '@/components/maint/master-detail/SemesterSection.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/maint/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'
 
diff --git a/src/views/maint/MasterDetailMntC.vue b/src/views/maint/MasterDetailC.vue
similarity index 97%
rename from src/views/maint/MasterDetailMntC.vue
rename to src/views/maint/MasterDetailC.vue
index ec06621..5022e4f 100644
--- a/src/views/maint/MasterDetailMntC.vue
+++ b/src/views/maint/MasterDetailC.vue
@@ -1,5 +1,5 @@
 <template>
-  <mnt-page-cards
+  <page-maint
     :search-panel-open="searchPanelOpen"
     :title="`主從資料維護示範C`"
     @create="openAddDialog"
@@ -170,7 +170,7 @@
         </template>
       </v-data-table>
     </template>
-  </mnt-page-cards>
+  </page-maint>
 
   <!-- 主從式維護視窗 -->
   <!-- 說明：包含主檔 (學生資料) 與明細檔 (學期成績) 的維護介面 -->
@@ -446,15 +446,15 @@ import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil, mdiSchool } from '@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
 
-import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
-import MaintenanceStudentFormFields from '@/components/maintenance/MaintenanceStudentFormFields.vue'
-import MasterDetailCCourseMobilePanel from '@/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue'
-import MasterDetailCCourseSection from '@/components/maintenance/master-detail-c/MasterDetailCCourseSection.vue'
-import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
-import MntPageCards from '@/components/maintenance/MntPageCards.vue'
-import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
+import MaintenanceCrudDialogs from '@/components/maint/MaintenanceCrudDialogs.vue'
+import MaintenanceStudentFormFields from '@/components/maint/MaintenanceStudentFormFields.vue'
+import MasterDetailCCourseMobilePanel from '@/components/maint/master-detail/CourseMobilePanel.vue'
+import MasterDetailCCourseSection from '@/components/maint/master-detail/CourseSection.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/maint/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'
 
diff --git a/src/views/maint/SingleRecordMnt.vue b/src/views/maint/SingleRecord.vue
similarity index 98%
rename from src/views/maint/SingleRecordMnt.vue
rename to src/views/maint/SingleRecord.vue
index f19936d..03c9dfd 100644
--- a/src/views/maint/SingleRecordMnt.vue
+++ b/src/views/maint/SingleRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <mnt-page-cards
+  <page-maint
     :search-panel-open="searchPanelOpen"
     :title="`單筆資料維護示範`"
     @create="openAddDialog"
@@ -174,7 +174,7 @@
         </template>
       </v-data-table>
     </template>
-  </mnt-page-cards>
+  </page-maint>
 
   <!-- 新增 / 編輯 / 檢視側邊欄 -->
   <teleport to="body">
@@ -458,12 +458,12 @@
 import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
-import MaintenanceCrudDialogs from '@/components/maintenance/MaintenanceCrudDialogs.vue'
-import MntDialogCard from '@/components/maintenance/MntDialogCard.vue'
-import MntPageCards from '@/components/maintenance/MntPageCards.vue'
-import MntRecordNavToolbar from '@/components/maintenance/MntRecordNavToolbar.vue'
-import { useMaintenanceCrudFlow } from '@/composables/maintenance/useMaintenanceCrudFlow'
-import { useStudentMaintenanceForm } from '@/composables/maintenance/useStudentMaintenanceForm'
+import MaintenanceCrudDialogs from '@/components/maint/MaintenanceCrudDialogs.vue'
+import MntDialogCard from '@/components/maint/MntDialogCard.vue'
+import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
+import PageMaint from '@/components/maint/PageMaint.vue'
+import { useMaintenanceCrudFlow } from '@/composables/maint/useMaintenanceCrudFlow'
+import { useStudentMaintenanceForm } from '@/composables/maint/useStudentMaintenanceForm'
 import { type StudentRecord, useStudentStore } from '@/stores/students'
 
 // 下拉選項：系所/年級/入學年度/狀態