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,52 @@
+<template>
+  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
+    <v-card-title class="text-subtitle-1 font-weight-bold py-4 border-b">
+      {{ title }}
+    </v-card-title>
+    <v-card-text class="d-flex flex-column align-center justify-center pt-6 pb-6">
+      <div
+        class="d-flex align-center justify-center"
+        style="position: relative; width: 180px; height: 180px"
+      >
+        <v-progress-circular
+          bg-color="grey-lighten-3"
+          color="primary"
+          :model-value="value"
+          :size="160"
+          :width="20"
+        >
+          <div class="text-center">
+            <div class="text-h6 font-weight-bold">{{ value }}%</div>
+            <div class="text-caption text-grey">{{ subtitle }}</div>
+          </div>
+        </v-progress-circular>
+      </div>
+      <div class="mt-4 d-flex justify-center gap-4 w-100">
+        <div class="d-flex align-center mr-4">
+          <v-icon class="mr-1" color="primary" size="small">mdi-circle</v-icon>
+          <span class="text-caption">{{ primaryLabel }}</span>
+        </div>
+        <div class="d-flex align-center">
+          <v-icon class="mr-1" color="grey-lighten-3" size="small">mdi-circle</v-icon>
+          <span class="text-caption">{{ secondaryLabel }}</span>
+        </div>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  value: number
+  subtitle?: string
+  primaryLabel?: string
+  secondaryLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  subtitle: '來源佔比',
+  primaryLabel: '校內',
+  secondaryLabel: '校外',
+})
+</script>