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,56 @@
+<template>
+  <v-card class="rounded-lg h-100" elevation="2" v-bind="$attrs">
+    <v-card-title class="text-subtitle-1 font-weight-bold py-4">
+      {{ title }}
+    </v-card-title>
+    <v-divider></v-divider>
+    <v-card-text class="d-flex flex-column align-center justify-center pt-8">
+      <div
+        class="d-flex align-center justify-center"
+        style="position: relative; width: 200px; height: 200px"
+      >
+        <v-progress-circular
+          class="position-absolute"
+          color="grey-lighten-3"
+          :model-value="100"
+          :size="180"
+          :width="25"
+        ></v-progress-circular>
+
+        <v-progress-circular
+          class="position-absolute"
+          :color="data.color"
+          :model-value="data.value"
+          rotate="270"
+          :size="180"
+          :width="25"
+        >
+          <div class="text-center">
+            <div class="text-h5 font-weight-bold">{{ data.value }}%</div>
+            <div class="text-caption text-grey">{{ data.label }}</div>
+          </div>
+        </v-progress-circular>
+      </div>
+
+      <div class="mt-8 d-flex flex-wrap justify-center gap-2">
+        <v-chip class="mr-2" :color="data.color" label size="small" variant="flat">
+          {{ data.label }}
+        </v-chip>
+        <v-chip color="grey-lighten-3" label size="small" variant="flat"> 其他 </v-chip>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  data: {
+    value: number
+    label: string
+    color: string
+  }
+}
+
+defineProps<Props>()
+</script>