refactor: update icon usage to use mdi imports for consistency

src/components/maintenance/master-detail-b/MasterDetailBSemesterSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-subtitle-1 font-weight-bold my-3 d-flex align-center">
-    <v-icon start>mdi-school</v-icon>
+    <v-icon start :icon="mdiSchool" />
     子檔資料示範
   </div>
 
@@ -20,7 +20,7 @@
             <div class="text-body-1 font-weight-bold">{{ semester.semesterName }}</div>
             <div class="text-caption text-medium-emphasis">點擊查看課程與成績</div>
           </div>
-          <v-icon size="small">mdi-chevron-right</v-icon>
+          <v-icon size="small" :icon="mdiChevronRight" />
         </div>
 
         <div class="d-flex flex-wrap ga-2 mt-3">
@@ -49,7 +49,7 @@
                 v-if="!isFormReadonly"
                 color="primary"
                 :disabled="isFormLocked"
-                prepend-icon="mdi-plus"
+                :prepend-icon="mdiPlus"
                 size="small"
                 variant="tonal"
                 @click="$emit('add-course', semester.id)"
@@ -64,19 +64,19 @@
                   <th class="cursor-pointer" width="50%" @click="toggleSort(semester.id, 'name')">
                     <div class="d-flex align-center ga-1">
                       <span>課程名稱</span>
-                      <v-icon size="small">{{ getSortIcon(semester.id, 'name') }}</v-icon>
+                      <v-icon size="small" :icon="getSortIcon(semester.id, 'name')" />
                     </div>
                   </th>
                   <th class="cursor-pointer" @click="toggleSort(semester.id, 'credits')">
                     <div class="d-flex align-center ga-1">
                       <span>學分</span>
-                      <v-icon size="small">{{ getSortIcon(semester.id, 'credits') }}</v-icon>
+                      <v-icon size="small" :icon="getSortIcon(semester.id, 'credits')" />
                     </div>
                   </th>
                   <th class="cursor-pointer" @click="toggleSort(semester.id, 'score')">
                     <div class="d-flex align-center ga-1">
                       <span>分數</span>
-                      <v-icon size="small">{{ getSortIcon(semester.id, 'score') }}</v-icon>
+                      <v-icon size="small" :icon="getSortIcon(semester.id, 'score')" />
                     </div>
                   </th>
                   <th v-if="!isFormReadonly" width="52"></th>
@@ -130,7 +130,7 @@
                     <v-btn
                       color="error"
                       :disabled="isFormLocked"
-                      icon="mdi-delete-outline"
+                      :icon="mdiDeleteOutline"
                       size="small"
                       variant="text"
                       @click="$emit('delete-course', semester.id, originalIndex, course.name)"
@@ -143,7 +143,7 @@
                     :colspan="isFormReadonly ? 3 : 4"
                   >
                     <div class="d-flex flex-column align-center ga-2">
-                      <v-icon color="medium-emphasis" size="24">mdi-book-open-outline</v-icon>
+                      <v-icon color="medium-emphasis" size="24" :icon="mdiBookOpenOutline" />
                       <span class="text-caption">尚無課程，點擊「加入課程」新增</span>
                     </div>
                   </td>
@@ -165,6 +165,7 @@
 </template>
 
 <script setup lang="ts">
+import { mdiArrowDown, mdiArrowUp, mdiBookOpenOutline, mdiChevronRight, mdiDeleteOutline, mdiPlus, mdiSchool, mdiSwapVertical } from '@mdi/js'
 import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
 import { ref } from 'vue'
 
@@ -222,8 +223,8 @@ function toggleSort (semesterId: number, key: CourseSortKey) {
 function getSortIcon (semesterId: number, key: CourseSortKey) {
   const current = getSortState(semesterId)
 
-  if (current?.key !== key) return 'mdi-swap-vertical'
-  return current.order === 'asc' ? 'mdi-arrow-up' : 'mdi-arrow-down'
+  if (current?.key !== key) return mdiSwapVertical
+  return current.order === 'asc' ? mdiArrowUp : mdiArrowDown
 }
 
 function compareCourseValue (left: CourseRecord, right: CourseRecord, key: CourseSortKey) {