feat: add SingleRecord component for student maintenance with CRUD functionality

2026-03-30 11:03:01 +08:00
parent 00a7150757
commit 20b093ff73
22 changed files with 51 additions and 51 deletions
@@ -0,0 +1,65 @@
+<template>
+  <v-card border class="d-flex flex-column h-100 rounded-0" :class="cardClass" flat :width="width">
+    <v-card-title class="dialog-title d-flex align-center ga-2">
+      <div>
+        <div class="text-h6">{{ dialogTitle }}</div>
+        <div v-if="dialogSubtitle" class="text-body-2 text-medium-emphasis">
+          {{ dialogSubtitle }}
+        </div>
+      </div>
+      <v-spacer />
+      <v-chip v-if="isViewMode" color="info" size="small" variant="tonal">檢視中</v-chip>
+      <v-chip v-else-if="isEditMode" color="primary" size="small" variant="tonal">編輯中</v-chip>
+      <v-chip v-else color="secondary" size="small" variant="tonal">新增中</v-chip>
+    </v-card-title>
+
+    <v-card-subtitle class="dialog-toolbar d-flex align-center py-2 ga-2">
+      <slot name="toolbar" />
+    </v-card-subtitle>
+
+    <v-divider />
+
+    <v-card-text :class="contentClass">
+      <slot name="content" />
+    </v-card-text>
+
+    <v-divider />
+
+    <v-card-actions class="dialog-actions">
+      <slot name="actions" />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  dialogTitle: {
+    type: String,
+    required: true,
+  },
+  dialogSubtitle: {
+    type: String,
+    default: '',
+  },
+  isViewMode: {
+    type: Boolean,
+    required: true,
+  },
+  isEditMode: {
+    type: Boolean,
+    required: true,
+  },
+  width: {
+    type: [String, Number],
+    default: '100%',
+  },
+  cardClass: {
+    type: String,
+    default: '',
+  },
+  contentClass: {
+    type: String,
+    default: 'pa-2 flex-grow-1 overflow-y-auto',
+  },
+})
+</script>