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,74 @@
+<template>
+  <v-dialog
+    :max-width="maxWidth"
+    :model-value="modelValue"
+    :persistent="persistent"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <v-card>
+      <v-card-title class="text-h6">{{ title }}</v-card-title>
+      <v-card-text>
+        <slot>{{ message }}</slot>
+      </v-card-text>
+      <v-card-actions class="justify-end">
+        <v-btn variant="text" @click="$emit('update:modelValue', false)">取消</v-btn>
+        <v-btn
+          :color="confirmColor"
+          :loading="confirmLoading"
+          :variant="confirmVariant"
+          @click="$emit('confirm')"
+        >
+          {{ confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  confirmText: {
+    type: String,
+    default: '確認',
+  },
+  confirmColor: {
+    type: String,
+    default: 'primary',
+  },
+  confirmVariant: {
+    type: String as PropType<'text' | 'flat' | 'outlined' | 'plain' | 'elevated' | 'tonal'>,
+    default: 'flat',
+  },
+  confirmLoading: {
+    type: Boolean,
+    default: false,
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: 420,
+  },
+  persistent: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'confirm'): void
+}>()
+</script>