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,137 @@
+<template>
+  <v-sheet class="bg-surface" v-bind="$attrs">
+    <!-- Header Section -->
+    <DashboardHeader
+      class="mb-4"
+      :greeting-title="props.greetingTitle"
+      :projects="props.statProjects"
+      :team="props.statTeam"
+      :todo="props.statTodo"
+      :user-avatar="props.userAvatar"
+      :weather-info="props.weatherInfo"
+    />
+
+    <v-row>
+      <!-- Left Column (Main) -->
+      <v-col cols="12" md="8">
+        <!-- Applications Card -->
+        <DashboardApps
+          :apps="props.applications"
+          class="mb-4"
+          :title="props.appsTitle"
+          @app-click="$emit('app-click', $event)"
+          @view-all="$emit('view-all-apps')"
+        />
+
+        <!-- School Announcements (Dynamic) -->
+        <DashboardAnnouncements
+          :announcements="props.announcements"
+          :title="props.announcementsTitle"
+          @item-click="$emit('announcement-click', $event)"
+          @view-more="$emit('view-more-announcements')"
+        />
+      </v-col>
+
+      <!-- Right Column (Side) -->
+      <v-col cols="12" md="4">
+        <!-- Quick Nav -->
+        <DashboardQuickNav
+          class="mb-4"
+          :navs="props.quickNavs"
+          :title="props.quickNavTitle"
+          @nav-click="$emit('nav-click', $event)"
+        />
+
+        <!-- To-Do List -->
+        <DashboardTodoList
+          class="mb-4"
+          :title="props.todoTitle"
+          :todos="props.todos"
+          @toggle-todo="$emit('toggle-todo', $event)"
+        />
+
+        <!-- Visit Source Chart -->
+        <DashboardChart :title="props.chartTitle" :value="props.chartValue" />
+      </v-col>
+    </v-row>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+import DashboardAnnouncements from './base/dashboard/DashboardAnnouncements.vue'
+import DashboardApps from './base/dashboard/DashboardApps.vue'
+import DashboardChart from './base/dashboard/DashboardChart.vue'
+import DashboardHeader from './base/dashboard/DashboardHeader.vue'
+import DashboardQuickNav from './base/dashboard/DashboardQuickNav.vue'
+import DashboardTodoList from './base/dashboard/DashboardTodoList.vue'
+
+defineEmits([
+  'view-all-apps',
+  'app-click',
+  'view-more-announcements',
+  'announcement-click',
+  'nav-click',
+  'toggle-todo',
+])
+
+interface DashboardApp {
+  name: string
+  desc: string
+  icon: string
+  color: string
+  group: string
+  date: string
+}
+
+interface Announcement {
+  title: string
+  author: string
+  time: string
+  avatarSrc?: string | null
+  avatarColor?: string
+}
+
+interface QuickNav {
+  icon: string
+  title: string
+  color: string
+}
+
+interface Todo {
+  title: string
+  due: string
+  done: boolean
+}
+
+const props = defineProps({
+  // Header
+  userAvatar: {
+    type: String,
+    default:
+      'https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Sunglasses&hairColor=Blonde&facialHairType=Blank&clotheType=Hoodie&clotheColor=Red&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Light',
+  },
+  greetingTitle: { type: String, default: '早安，校長！開始您一天的工作吧！' },
+  weatherInfo: { type: String, default: '今日晴，20℃ - 32℃！' },
+  statTodo: { type: String, default: '2/10' },
+  statProjects: { type: String, default: '8' },
+  statTeam: { type: String, default: '300' },
+
+  // Apps
+  appsTitle: { type: String, default: '應用程式' },
+  applications: { type: Array as () => DashboardApp[], default: () => [] },
+
+  // Announcements
+  announcementsTitle: { type: String, default: '學校公告' },
+  announcements: { type: Array as () => Announcement[], default: () => [] },
+
+  // Right Side
+  quickNavTitle: { type: String, default: '快速導航' },
+  quickNavs: { type: Array as () => QuickNav[], default: () => [] },
+
+  todoTitle: { type: String, default: '待辦事項' },
+  todos: { type: Array as () => Todo[], default: () => [] },
+
+  chartTitle: { type: String, default: '訪問來源' },
+  chartValue: { type: Number, default: 75 },
+})
+</script>