refactor: update icon usage to use mdi imports for consistency

src/views/errors/ErrorShell.vue

@@ -4,7 +4,7 @@
       <v-col cols="12" md="8" sm="10">
         <v-card border class="pa-6" variant="flat">
           <v-card-title class="d-flex align-center ga-3">
-            <v-icon :color="color" size="36">{{ icon }}</v-icon>
+            <v-icon :color="color" size="36" :icon="icon" />
             <div class="text-h5">{{ title }}</div>
             <div class="text-caption text-medium-emphasis">{{ codeLabel }}</div>
             <v-spacer />
@@ -35,6 +35,7 @@
 </template>
 
 <script setup lang="ts">
+import { mdiAlertCircleOutline } from '@mdi/js'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -51,7 +52,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   description: undefined,
-  icon: 'mdi-alert-circle-outline',
+  icon: mdiAlertCircleOutline,
   color: 'warning',
   showHome: true,
   showLogin: true,

src/views/errors/Forbidden.vue

@@ -3,11 +3,12 @@
     :code="403"
     color="warning"
     description="你沒有權限存取此頁面或操作。"
-    icon="mdi-shield-lock-outline"
+    :icon="mdiShieldLockOutline"
     title="沒有權限"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiShieldLockOutline } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>

src/views/errors/Maintenance.vue

@@ -3,13 +3,14 @@
     code="MAINTENANCE"
     color="info"
     description="目前系統正在維護，請稍後再試。"
-    icon="mdi-tools"
+    :icon="mdiTools"
     :show-login="false"
     title="系統維護中"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiTools } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>
 

src/views/errors/NetworkError.vue

@@ -3,12 +3,13 @@
     code="NETWORK"
     color="warning"
     description="無法連線到伺服器，請檢查網路或稍後再試。"
-    icon="mdi-wifi-off"
+    :icon="mdiWifiOff"
     title="網路連線異常"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiWifiOff } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>
 

src/views/errors/NotFound.vue

@@ -3,12 +3,13 @@
     :code="404"
     color="info"
     description="你輸入的網址不存在，或頁面已被移除。"
-    icon="mdi-map-marker-question-outline"
+    :icon="mdiMapMarkerQuestionOutline"
     :show-login="false"
     title="找不到頁面"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiMapMarkerQuestionOutline } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>

src/views/errors/ServerError.vue

@@ -3,12 +3,13 @@
     :code="500"
     color="error"
     description="伺服器發生非預期錯誤，請稍後再試。"
-    icon="mdi-server"
+    :icon="mdiServer"
     title="系統發生錯誤"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiServer } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>
 

src/views/errors/ServiceUnavailable.vue

@@ -3,12 +3,13 @@
     :code="503"
     color="warning"
     description="服務目前無法使用，請稍後再試。"
-    icon="mdi-server-off"
+    :icon="mdiServerOff"
     title="服務暫時無法使用"
   />
 </template>
 
 <script setup lang="ts">
+import { mdiServerOff } from '@mdi/js'
 import ErrorShell from './ErrorShell.vue'
 </script>