feat: Implement detailed semester management components

src/components/maint/master-detail/DetailNavigation.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="text-subtitle-1 font-weight-bold mb-3 d-flex align-center">
+    <v-icon start :icon="mdiSchool" />
+    子檔資料示範 ({{ semesters.length }})
+    <v-spacer />
+    <v-btn
+      v-if="!isViewMode"
+      color="primary"
+      :prepend-icon="mdiPlus"
+      size="small"
+      variant="text"
+      @click="$emit('add')"
+    >
+      新增學期
+    </v-btn>
+  </div>
+
+  <v-row density="compact">
+    <v-col v-for="semester in semesters" :key="semester.id" cols="12" :md="isMobile ? 12 : 6">
+      <v-card
+        class="cursor-pointer mb-2"
+        :class="{ 'border-opacity-100': selectedSemesterId === semester.id }"
+        :color="selectedSemesterId === semester.id ? 'primary' : undefined"
+        variant="outlined"
+        @click="$emit('select', semester.id)"
+      >
+        <v-list-item density="compact">
+          <v-list-item-title class="text-body-2 font-weight-bold">{{
+            semester.semesterName
+          }}</v-list-item-title>
+          <v-list-item-subtitle class="text-caption">
+            平均: {{ semester.average }} ・ 排名: {{ semester.rank }}
+          </v-list-item-subtitle>
+          <template #append>
+            <v-icon size="small" :icon="mdiChevronRight" />
+          </template>
+        </v-list-item>
+      </v-card>
+    </v-col>
+  </v-row>
+
+  <div
+    v-if="semesters.length === 0"
+    class="text-caption text-center py-6 text-medium-emphasis border border-dashed rounded"
+  >
+    尚無學期資料
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemesterRecord } from '@/stores/semesters'
+import { mdiChevronRight, mdiPlus, mdiSchool } from '@mdi/js'
+
+defineProps<{
+  semesters: SemesterRecord[]
+  selectedSemesterId: number | null
+  isViewMode: boolean
+  isMobile: boolean
+}>()
+
+defineEmits<{
+  (event: 'select', id: number): void
+  (event: 'add'): void
+}>()
+</script>