refactor: update icon usage to use mdi imports for consistency

src/views/maint/EditableGridMnt.vue

@@ -8,7 +8,7 @@
         </v-chip>
         <v-chip color="info" variant="tonal">筆數 {{ filteredStudents.length }}</v-chip>
         <v-spacer />
-        <v-btn flat prepend-icon="mdi-magnify" @click="isSearchVisible = !isSearchVisible">條件搜尋</v-btn>
+        <v-btn flat :prepend-icon="mdiMagnify" @click="isSearchVisible = !isSearchVisible">條件搜尋</v-btn>
         <v-switch v-model="isBulkEditEnabled" color="primary" hide-details label="啟用編輯" />
       </v-card-title>
 
@@ -40,16 +40,16 @@ v-model="search.department" :class="{ 'select-hide-arrow': !isBulkEditEnabled }"
 
         <!-- 操作 -->
         <v-row v-if="isBulkEditEnabled" align="center" class="mb-2 ga-1" dense>
-          <v-btn :disabled="!hasSelectedRows" prepend-icon="mdi-delete" variant="outlined" @click="deleteSelectedRows">
+          <v-btn :disabled="!hasSelectedRows" :prepend-icon="mdiDelete" variant="outlined" @click="deleteSelectedRows">
             批次刪除
           </v-btn>
           <v-spacer></v-spacer>
           <v-btn
-color="primary" :disabled="!hasAnyChange" prepend-icon="mdi-content-save" variant="outlined"
+color="primary" :disabled="!hasAnyChange" :prepend-icon="mdiContentSave" variant="outlined"
             @click="saveAllRows">
             儲存變更
           </v-btn>
-          <v-btn :disabled="!hasAnyChange" prepend-icon="mdi-restore" variant="text" @click="resetAllRows">
+          <v-btn :disabled="!hasAnyChange" :prepend-icon="mdiRestore" variant="text" @click="resetAllRows">
             取消變更
           </v-btn>
         </v-row>
@@ -142,6 +142,7 @@ color="error" :disabled="!isBulkEditEnabled" size="small" variant="text"
 </template>
 
 <script setup lang="ts">
+import { mdiContentSave, mdiDelete, mdiMagnify, mdiRestore } from '@mdi/js'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { type StudentRecord, useStudentStore } from '@/stores/students'
 

src/views/maint/MasterDetailMnt.vue

@@ -28,8 +28,8 @@ v-model="search.grade" density="compact" hide-details item-title="title" item-va
         <v-select v-model="search.status" density="compact" hide-details :items="statuses" variant="outlined" />
       </v-col>
       <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn prepend-icon="mdi-broom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled prepend-icon="mdi-magnify" variant="tonal">查詢</v-btn>
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
       </v-col>
     </template>
     <template #table>
@@ -47,14 +47,14 @@ class="student-table" density="compact" fixed-header :headers="tableHeaders" hei
         </template>
         <template #[`item.actions`]="{ item }">
           <div class="d-flex ga-1">
-            <v-btn color="info" prepend-icon="mdi-eye" size="small" variant="text" @click="openViewDialog(item)">
+            <v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
               檢視
             </v-btn>
-            <v-btn color="primary" prepend-icon="mdi-pencil" size="small" variant="text" @click="openEditDialog(item)">
+            <v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
               修改
             </v-btn>
             <v-btn
-color="error" prepend-icon="mdi-delete" size="small" variant="text"
+color="error" :prepend-icon="mdiDelete" size="small" variant="text"
               @click="requestDeleteConfirmation(item)">
               刪除
             </v-btn>
@@ -79,11 +79,17 @@ class="dialog-overlay" :close-on-content-click="false" :model-value="dialogVisib
 v-if="!isMobile || activeMobilePanel === 'detail'" class="detail-panel-wrapper"
           :class="{ 'is-active': !!selectedSemesterId, 'is-mobile': isMobile }">
           <master-detail-semester-panel
-:detail-form="detailForm" :is-detail-editing="isDetailEditing"
-            :is-mobile="isMobile" :is-view-mode="isViewMode" :selected-semester="selectedSemester"
-            @add-course="addCourseToDetail" @cancel-edit="cancelDetailEdit" @close="closeDetailPanel"
-            @delete="handleDeleteSemester" @remove-course="removeCourseFromDetail" @save-edit="saveDetailEdit"
-            @start-edit="startDetailEdit" />
+            v-model:detail-form="detailForm"
+            :is-detail-editing="isDetailEditing"
+            :is-mobile="isMobile"
+            :is-view-mode="isViewMode"
+            :selected-semester="selectedSemester"
+            @cancel-edit="cancelDetailEdit"
+            @close="closeDetailPanel"
+            @delete="handleDeleteSemester"
+            @save-edit="saveDetailEdit"
+            @start-edit="startDetailEdit"
+          />
         </div>
 
         <!-- 主檔區塊 (Master Card)：學生基本資料與學期列表 -->
@@ -257,6 +263,7 @@ v-model="confirmNavigateVisible" confirm-text="確定切換" max-width="480"
 </template>
 
 <script setup lang="ts">
+import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 

src/views/maint/MasterDetailMntB.vue

@@ -28,8 +28,8 @@ v-model="search.grade" density="compact" hide-details item-title="title" item-va
         <v-select v-model="search.status" density="compact" hide-details :items="statuses" variant="outlined" />
       </v-col>
       <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn prepend-icon="mdi-broom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled prepend-icon="mdi-magnify" variant="tonal">查詢</v-btn>
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
       </v-col>
     </template>
     <template #table>
@@ -47,14 +47,14 @@ class="student-table" density="compact" fixed-header :headers="tableHeaders" hei
         </template>
         <template #[`item.actions`]="{ item }">
           <div class="d-flex ga-2">
-            <v-btn color="info" prepend-icon="mdi-eye" size="small" variant="text" @click="openViewDialog(item)">
+            <v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
               檢視
             </v-btn>
-            <v-btn color="primary" prepend-icon="mdi-pencil" size="small" variant="text" @click="openEditDialog(item)">
+            <v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
               修改
             </v-btn>
             <v-btn
-color="error" prepend-icon="mdi-delete" size="small" variant="text"
+color="error" :prepend-icon="mdiDelete" size="small" variant="text"
               @click="requestDeleteConfirmation(item)">
               刪除
             </v-btn>
@@ -255,7 +255,7 @@ v-model="confirmDeleteCourseVisible" confirm-color="error"
   <v-dialog v-model="addCourseDialogVisible" max-width="420" persistent>
     <v-card>
       <v-card-title class="d-flex align-center">
-        <v-icon color="primary" start>mdi-book-plus</v-icon>
+        <v-icon color="primary" start :icon="mdiBookPlus" />
         加入課程
       </v-card-title>
       <v-card-text>
@@ -290,6 +290,7 @@ v-model.number="addCourseForm.score" density="comfortable" hide-spin-buttons lab
 </template>
 
 <script setup lang="ts">
+import { mdiBookPlus, mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 

src/views/maint/MasterDetailMntC.vue

@@ -28,8 +28,8 @@ v-model="search.grade" density="compact" hide-details item-title="title" item-va
         <v-select v-model="search.status" density="compact" hide-details :items="statuses" variant="outlined" />
       </v-col>
       <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn prepend-icon="mdi-broom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled prepend-icon="mdi-magnify" variant="tonal">查詢</v-btn>
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
       </v-col>
     </template>
     <template #table>
@@ -47,14 +47,14 @@ class="student-table" density="compact" fixed-header :headers="tableHeaders" hei
         </template>
         <template #[`item.actions`]="{ item }">
           <div class="d-flex ga-2">
-            <v-btn color="info" prepend-icon="mdi-eye" size="small" variant="text" @click="openViewDialog(item)">
+            <v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
               檢視
             </v-btn>
-            <v-btn color="primary" prepend-icon="mdi-pencil" size="small" variant="text" @click="openEditDialog(item)">
+            <v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
               修改
             </v-btn>
             <v-btn
-color="error" prepend-icon="mdi-delete" size="small" variant="text"
+color="error" :prepend-icon="mdiDelete" size="small" variant="text"
               @click="requestDeleteConfirmation(item)">
               刪除
             </v-btn>
@@ -253,7 +253,7 @@ v-model="confirmNavigateVisible" confirm-text="確定切換" max-width="480"
   <v-dialog v-model="addCourseDialogVisible" max-width="480" persistent>
     <v-card>
       <v-card-title class="d-flex align-center">
-        <v-icon color="primary" start>mdi-school</v-icon>
+        <v-icon color="primary" start :icon="mdiSchool" />
         新增成績
       </v-card-title>
       <v-card-text>
@@ -280,6 +280,7 @@ v-model.number="addCourseForm.score" density="comfortable" label="分數" type="
 </template>
 
 <script setup lang="ts">
+import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil, mdiSchool } from '@mdi/js'
 import { computed, nextTick, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 

src/views/maint/SingleRecordMnt.vue

@@ -28,8 +28,8 @@ v-model="search.grade" density="compact" hide-details item-title="title" item-va
         <v-select v-model="search.status" density="compact" hide-details :items="statuses" variant="outlined" />
       </v-col>
       <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
-        <v-btn prepend-icon="mdi-broom" variant="text" @click="resetSearch">清除</v-btn>
-        <v-btn color="primary" disabled prepend-icon="mdi-magnify" variant="tonal">查詢</v-btn>
+        <v-btn :prepend-icon="mdiBroom" variant="text" @click="resetSearch">清除</v-btn>
+        <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
       </v-col>
     </template>
     <template #table>
@@ -47,14 +47,14 @@ class="student-table" density="compact" fixed-header :headers="tableHeaders"
         </template>
         <template #[`item.actions`]="{ item }">
           <div class="d-flex ga-2">
-            <v-btn color="info" prepend-icon="mdi-eye" size="small" variant="text" @click="openViewDialog(item)">
+            <v-btn color="info" :prepend-icon="mdiEye" size="small" variant="text" @click="openViewDialog(item)">
               檢視
             </v-btn>
-            <v-btn color="primary" prepend-icon="mdi-pencil" size="small" variant="text" @click="openEditDialog(item)">
+            <v-btn color="primary" :prepend-icon="mdiPencil" size="small" variant="text" @click="openEditDialog(item)">
               修改
             </v-btn>
             <v-btn
-color="error" prepend-icon="mdi-delete" size="small" variant="text"
+color="error" :prepend-icon="mdiDelete" size="small" variant="text"
               @click="requestDeleteConfirmation(item)">
               刪除
             </v-btn>
@@ -238,6 +238,7 @@ v-model="confirmNavigateVisible" confirm-text="確定切換" max-width="480"
 </template>
 
 <script setup lang="ts">
+import { mdiBroom, mdiDelete, mdiEye, mdiMagnify, mdiPencil } from '@mdi/js'
 import { computed, nextTick, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 import CommonConfirmDialog from '@/components/maintenance/CommonConfirmDialog.vue'