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,59 @@
+<template>
+  <v-col
+v-if="features.showFavorites && showFavoritesBar && !isMobile"
+    class="d-flex align-center pr-2 pl-3 py-1 bg-surface">
+    <div class="favorites-label text-body-2 text-no-wrap pe-2">
+      {{ favoritesConfig.label }}
+    </div>
+    <div class="favorites-list flex-grow-1 d-flex flex-wrap ga-2">
+      <transition-group class="d-flex flex-wrap ga-2" name="favorite-list" tag="div">
+        <v-chip
+v-for="item in favoriteItems" :key="item.path ?? item.title" class="favorite-item" closable
+          color="secondary" size="small" variant="outlined" @click="emit('select', item)"
+          @click:close="emit('remove-favorite', item)">
+          <v-icon v-if="item.icon" class="me-1" size="16">{{ item.icon }}</v-icon>
+          <span class="text-caption">{{ item.title }}</span>
+        </v-chip>
+      </transition-group>
+      <v-btn
+v-if="favoritesConfig.showAdd" class="favorite-add" color="primary" size="small" variant="outlined"
+        @click="emit('add-favorite')">
+        <v-icon class="mr-1" size="16">mdi-plus</v-icon>
+        <span class="text-caption">{{ favoritesConfig.addLabel }}</span>
+      </v-btn>
+    </div>
+    <v-btn color="grey" size="small" variant="text" @click="emit('toggle-favorites-bar', false)">
+      <v-icon>mdi-eye-off</v-icon>
+    </v-btn>
+  </v-col>
+</template>
+
+<script setup>
+defineProps({
+  features: { type: Object, default: () => ({}) },
+  showFavoritesBar: { type: Boolean, default: true },
+  isMobile: { type: Boolean, default: false },
+  favoritesConfig: { type: Object, default: () => ({}) },
+  favoriteItems: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['select', 'add-favorite', 'remove-favorite', 'toggle-favorites-bar'])
+</script>
+
+<style scoped>
+.favorite-item {
+  text-transform: none;
+}
+
+.favorite-list-enter-active,
+.favorite-list-leave-active,
+.favorite-list-move {
+  transition: all 0.2s ease;
+}
+
+.favorite-list-enter-from,
+.favorite-list-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+</style>