feat: add SingleRecordMnt component for student record maintenance with search, add, edit, view, and delete functionalities

2026-03-26 11:24:37 +08:00
parent 507afcc99c
commit 069141794e
116 changed files with 15247 additions and 107 deletions
@@ -0,0 +1,73 @@
+<template>
+  <v-sheet class="d-flex flex-column ga-2 h-100">
+    <v-card border class="flex-shrink-0" variant="flat">
+      <v-card-title class="d-flex align-center ga-3">
+        <span class="text-h6">{{ title }}</span>
+        <v-spacer />
+        <v-btn
+:icon="mdAndUp ? false : 'mdi-magnify'" :prepend-icon="mdAndUp ? 'mdi-magnify' : undefined" size="small"
+          :text="mdAndUp ? '搜尋條件' : false" variant="text" @click="$emit('toggle-search')">
+        </v-btn>
+        <v-btn
+color="primary" :icon="mdAndUp ? false : 'mdi-plus'" :prepend-icon="mdAndUp ? 'mdi-plus' : undefined"
+          size="small" :text="mdAndUp ? createLabel : false" @click="$emit('create')">
+        </v-btn>
+      </v-card-title>
+
+      <!-- Desktop：inline 展開 -->
+      <template v-if="mdAndUp">
+        <v-divider />
+        <v-card-text v-show="searchPanelOpen" class="px-2 py-1">
+          <v-row dense>
+            <slot name="search-fields" />
+          </v-row>
+        </v-card-text>
+      </template>
+    </v-card>
+
+    <slot name="table" />
+  </v-sheet>
+
+  <!-- 手機 / Tablet：Bottom Sheet -->
+  <v-bottom-sheet v-if="!mdAndUp" :model-value="searchPanelOpen" @update:model-value="$emit('toggle-search')">
+    <v-card rounded="t-xl">
+      <v-card-title class="d-flex align-center py-3 px-4">
+        <span class="text-subtitle-1 font-weight-medium">搜尋條件</span>
+        <v-spacer />
+        <v-btn icon="mdi-close" size="small" variant="text" @click="$emit('toggle-search')" />
+      </v-card-title>
+      <v-divider />
+      <v-card-text class="px-2 py-1">
+        <v-row dense>
+          <slot name="search-fields" />
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-bottom-sheet>
+</template>
+
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
+const { mdAndUp } = useDisplay()
+
+defineProps({
+  title: {
+    type: String,
+    default: '學生資料維護',
+  },
+  createLabel: {
+    type: String,
+    default: '新增資料',
+  },
+  searchPanelOpen: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+defineEmits<{
+  (event: 'toggle-search'): void
+  (event: 'create'): void
+}>()
+</script>