feat: Implement editable student grid and refactor maintenance dialogs

src/views/maint/SingleRecord.vue

@@ -427,25 +427,68 @@
     </v-overlay>
   </teleport>
 
-  <maintenance-crud-dialogs
-    :close-visible="confirmCloseVisible"
-    :delete-visible="confirmDeleteVisible"
-    :is-saving="isSaving"
-    :navigate-visible="confirmNavigateVisible"
-    :pending-delete-label="pendingDeleteLabel"
-    :save-summary="saveSummary"
-    :save-visible="confirmSaveVisible"
-    :switch-visible="confirmSwitchVisible"
-    @confirm-close="confirmClose"
-    @confirm-delete="confirmDelete"
-    @confirm-navigate="confirmNavigate"
-    @confirm-save="confirmSave"
-    @confirm-switch="confirmSwitch"
-    @update:close-visible="confirmCloseVisible = $event"
-    @update:delete-visible="confirmDeleteVisible = $event"
-    @update:navigate-visible="confirmNavigateVisible = $event"
-    @update:save-visible="confirmSaveVisible = $event"
-    @update:switch-visible="confirmSwitchVisible = $event"
+  <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"
   />
 
   <!-- 成功提示 -->
@@ -458,7 +501,7 @@
 import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useDisplay } from 'vuetify'
-import MaintenanceCrudDialogs from '@/components/maint/MaintenanceCrudDialogs.vue'
+import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
 import MntDialogCard from '@/components/maint/MntDialogCard.vue'
 import MntRecordNavToolbar from '@/components/maint/MntRecordNavToolbar.vue'
 import PageMaint from '@/components/maint/PageMaint.vue'