refactor: update icon usage to use mdi imports for consistency

src/App.vue

@@ -9,11 +9,11 @@
       <v-btn
 color="secondary" :disabled="isFavoriteActionDisabled" size="small" variant="outlined"
         @click="toggleFavorite">
-        <v-icon class="mr-1" size="14">{{ favoriteActionIcon }}</v-icon>
+        <v-icon class="mr-1" size="14" :icon="favoriteActionIcon" />
         {{ favoriteActionLabel }}
       </v-btn>
       <v-btn class="ml-2" color="primary" size="small" variant="text" @click="goHome">
-        <v-icon class="mr-1" size="14">mdi-home</v-icon>
+        <v-icon class="mr-1" size="14" :icon="mdiHome" />
         返回首頁
       </v-btn>
     </template>
@@ -28,7 +28,7 @@ v-model="activeTab" bg-color="background" color="primary" density="compact" show
             <v-btn
 class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon size="x-small"
               variant="text" @click.prevent.stop="closeTab(tab.path)">
-              <v-icon>mdi-close</v-icon>
+              <v-icon :icon="mdiClose" />
             </v-btn>
           </v-tab>
         </v-tabs>
@@ -58,7 +58,7 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
         <v-list v-else density="compact">
           <v-list-item v-for="item in searchResults" :key="item.path" class="mb-2" @click="handleSearchSelect(item)">
             <template #prepend>
-              <v-icon v-if="item.icon" size="18">{{ item.icon }}</v-icon>
+              <v-icon v-if="item.icon" size="18" :icon="item.icon" />
             </template>
             <v-list-item-title>{{ item.title }}</v-list-item-title>
             <v-list-item-subtitle v-if="item.parents?.length">
@@ -94,7 +94,7 @@ class="pl-2" color="grey" density="compact" :disabled="tabs.length <= 1" icon si
               <v-list-item v-for="wrapped in items" :key="resolveMessageItem(wrapped).id" border="sm" class="pa-2 mb-1">
                 <template #prepend>
                   <v-avatar color="primary" size="28" variant="tonal">
-                    <v-icon size="16">{{ resolveMessageItem(wrapped).icon }}</v-icon>
+                    <v-icon size="16" :icon="resolveMessageItem(wrapped).icon" />
                   </v-avatar>
                 </template>
                 <v-list-item-title class="text-body-2 font-weight-medium">
@@ -122,6 +122,7 @@ v-model="snackbar.visible" :color="snackbar.color" :location="snackbar.location"
 </template>
 
 <script setup>
+import { mdiAccountGroup, mdiBellOutline, mdiCalendarOutline, mdiChartBoxOutline, mdiClose, mdiCloseCircle, mdiCog, mdiDomain, mdiFileDocumentOutline, mdiFileTreeOutline, mdiHome, mdiHomeCityOutline, mdiMenu, mdiPlusCircle, mdiSchoolOutline, mdiTableEdit, mdiViewDashboardVariant } from '@mdi/js'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { SKAdminLayout, SKEmptyLayout } from '../src'
@@ -150,11 +151,11 @@ const _fixedMenuItems = [
     title: '資料維護',
     navigable: false,
     subItems: [
-      { title: '單筆資料維護', icon: 'mdi-file-document-outline', path: '/single-record-maintenance' },
-      { title: '主從資料維護A', icon: 'mdi-file-tree-outline', path: '/master-detail-maintenance' },
-      { title: '主從資料維護B', icon: 'mdi-file-tree-outline', path: '/master-detail-maintenance-b' },
-      { title: '主從資料維護C', icon: 'mdi-file-tree-outline', path: '/master-detail-maintenance-c' },
-      { title: '可編輯表格維護', icon: 'mdi-table-edit', path: '/editable-grid-maintenance' },
+      { title: '單筆資料維護', icon: mdiFileDocumentOutline, path: '/single-record-maintenance' },
+      { title: '主從資料維護A', icon: mdiFileTreeOutline, path: '/master-detail-maintenance' },
+      { title: '主從資料維護B', icon: mdiFileTreeOutline, path: '/master-detail-maintenance-b' },
+      { title: '主從資料維護C', icon: mdiFileTreeOutline, path: '/master-detail-maintenance-c' },
+      { title: '可編輯表格維護', icon: mdiTableEdit, path: '/editable-grid-maintenance' },
     ],
   },
   { title: '登入頁', path: '/login' },
@@ -162,18 +163,18 @@ const _fixedMenuItems = [
 
 // 範例選單（用於 tab 顯示名稱的保底資料）
 const _menuItemsExample = [
-  { title: '首頁', icon: 'mdi-home', path: '/' },
-  { title: '工作台', icon: 'mdi-view-dashboard-variant', path: '/dashboard' },
-  { title: '分析頁', icon: 'mdi-chart-box-outline', path: '/analysis' },
+  { title: '首頁', icon: mdiHome, path: '/' },
+  { title: '工作台', icon: mdiViewDashboardVariant, path: '/dashboard' },
+  { title: '分析頁', icon: mdiChartBoxOutline, path: '/analysis' },
   {
     title: '設定',
-    icon: 'mdi-cog',
+    icon: mdiCog,
     path: '/settings',
     navigable: false,
     subItems: [
-      { title: '角色管理', icon: 'mdi-account-group', path: '/role-management' },
-      { title: '選單管理', icon: 'mdi-menu', path: '/menu-management' },
-      { title: '部門管理', icon: 'mdi-domain', path: '/dept-management' },
+      { title: '角色管理', icon: mdiAccountGroup, path: '/role-management' },
+      { title: '選單管理', icon: mdiMenu, path: '/menu-management' },
+      { title: '部門管理', icon: mdiDomain, path: '/dept-management' },
     ],
   },
   ..._fixedMenuItems,
@@ -305,10 +306,10 @@ function handleSearchSelect (item) {
 
 // 訊息中心的示意資料，僅用於展示列表，不進行 API 呼叫
 const messageItems = [
-  { id: 1, title: '系統維護提醒', meta: '今天 09:00 · 資訊中心', icon: 'mdi-bell-outline' },
-  { id: 2, title: '教務處公告', meta: '昨天 16:20 · 教務處', icon: 'mdi-school-outline' },
-  { id: 3, title: '宿舍申請結果', meta: '昨天 13:05 · 學務處', icon: 'mdi-home-city-outline' },
-  { id: 4, title: '課表異動通知', meta: '2 天前 · 教務處', icon: 'mdi-calendar-outline' },
+  { id: 1, title: '系統維護提醒', meta: '今天 09:00 · 資訊中心', icon: mdiBellOutline },
+  { id: 2, title: '教務處公告', meta: '昨天 16:20 · 教務處', icon: mdiSchoolOutline },
+  { id: 3, title: '宿舍申請結果', meta: '昨天 13:05 · 學務處', icon: mdiHomeCityOutline },
+  { id: 4, title: '課表異動通知', meta: '2 天前 · 教務處', icon: mdiCalendarOutline },
 ]
 
 // v-data-iterator 會包裝 items，這裡取回原始資料物件
@@ -436,7 +437,7 @@ const isCurrentFavorite = computed(() => favoritesStore.isFavorite(route.path))
 const isFavoriteActionDisabled = computed(() => !currentFavoriteInfo.value?.path || route.path === '/')
 
 const favoriteActionLabel = computed(() => (isCurrentFavorite.value ? '移除常用' : '加入常用'))
-const favoriteActionIcon = computed(() => (isCurrentFavorite.value ? 'mdi-close-circle' : 'mdi-plus-circle'))
+const favoriteActionIcon = computed(() => (isCurrentFavorite.value ? mdiCloseCircle : mdiPlusCircle))
 
 function toggleFavoriteItem (item) {
   if (!item?.path || item.path === '/') return
@@ -474,7 +475,7 @@ function updateBreadcrumbs () {
     favoriteItems: mergedFavoriteItems.value,
     fallbackTitle,
     homeLabel: '首頁',
-    homeIcon: 'mdi-home',
+    homeIcon: mdiHome,
   })
 }