linx6g/skt-vuetify-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update icon usage to use mdi imports for consistency

Browse Source
This commit is contained in:
skytek_xinliang
2026-03-26 11:48:05 +08:00
parent 069141794e
commit ec3fbace1a
50 changed files with 454 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Analysis.vue
+6 -5
View File
@@ -13,6 +13,7 @@
</template>
<script setup lang="ts">
import { mdiAccountSchool, mdiBookOpenPageVariant, mdiChartPie, mdiCheckDecagram, mdiCloudDownload } from '@mdi/js'
import { ref } from 'vue'
import SKAnalysis from '@/components/SKAnalysis.vue'
@@ -21,7 +22,7 @@ const stats = ref([
{
title: '學生總數',
value: '2,580',
icon: 'mdi-account-school',
icon: mdiAccountSchool,
color: 'primary',
label: '總學籍人數',
total: '120,000',
@@ -29,7 +30,7 @@ const stats = ref([
{
title: '平台訪問',
value: '20,000',
icon: 'mdi-chart-pie',
icon: mdiChartPie,
color: 'error',
label: '今日訪問量',
total: '500,000',
@@ -37,7 +38,7 @@ const stats = ref([
{
title: '教材下載',
value: '8,000',
icon: 'mdi-cloud-download',
icon: mdiCloudDownload,
color: 'warning',
label: '本月下載次數',
total: '120,000',
@@ -45,7 +46,7 @@ const stats = ref([
{
title: '圖書館借閱',
value: '5,000',
icon: 'mdi-book-open-page-variant',
icon: mdiBookOpenPageVariant,
color: 'success',
label: '總借閱量',
total: '50,000',
@@ -76,6 +77,6 @@ const pie2Data = ref({
value: 92,
label: '全校平均',
color: 'teal-lighten-1',
icon: 'mdi-check-decagram',
icon: mdiCheckDecagram,
})
</script>
src/views/Dashboard.vue
+13 -12
View File
@@ -10,6 +10,7 @@
</template>
<script setup lang="ts">
import { mdiAccountGroup, mdiBookOpenVariant, mdiCalendarCheck, mdiChartBar, mdiCog, mdiHammerWrench, mdiHome, mdiLayers, mdiLock, mdiMonitorShimmer, mdiSchool, mdiViewDashboard } from '@mdi/js'
import { ref } from 'vue'
import SKDashboard from '@/components/SKDashboard.vue'
@@ -21,7 +22,7 @@ const greetingTitle = ref('早安，王校長，開始您一天的工作吧！')
const applications = ref([
{
name: '校務行政系統',
icon: 'mdi-school',
icon: mdiSchool,
desc: '全校教職員工生學籍資料、人事資料、財產管理等核心系統入口。',
group: '行政組',
date: '2025-01-05',
@@ -29,7 +30,7 @@ const applications = ref([
},
{
name: '數位學習平台',
icon: 'mdi-monitor-shimmer',
icon: mdiMonitorShimmer,
desc: '提供線上課程、作業繳交、測驗評量與師生互動討論功能。',
group: '教學組',
date: '2025-01-02',
@@ -37,7 +38,7 @@ const applications = ref([
},
{
name: '圖書館系統',
icon: 'mdi-book-open-variant',
icon: mdiBookOpenVariant,
desc: '館藏查詢、圖書借閱、還書預約與電子書資源整合平台。',
group: '圖書館',
date: '2024-12-28',
@@ -45,7 +46,7 @@ const applications = ref([
},
{
name: '學生請假系統',
icon: 'mdi-calendar-check',
icon: mdiCalendarCheck,
desc: '學生線上請假申請、導師審核、生輔組備查流程電子化。',
group: '學務處',
date: '2024-12-25',
@@ -53,7 +54,7 @@ const applications = ref([
},
{
name: '報修系統',
icon: 'mdi-hammer-wrench',
icon: mdiHammerWrench,
desc: '校園設施設備故障通報、維修進度查詢與滿意度調查。',
group: '總務處',
date: '2024-12-20',
@@ -61,7 +62,7 @@ const applications = ref([
},
{
name: '會議室預約',
icon: 'mdi-account-group',
icon: mdiAccountGroup,
desc: '校內各大型會議室、視聽教室場地查詢與線上預約登記。',
group: '總務處',
date: '2024-12-15',
@@ -101,12 +102,12 @@ const announcements = ref([
])
const quickNavs = ref([
{ title: '首頁', icon: 'mdi-home', color: 'primary' },
{ title: '控制台', icon: 'mdi-view-dashboard', color: 'error' },
{ title: '組件', icon: 'mdi-layers', color: 'warning' },
{ title: '系統管理', icon: 'mdi-cog', color: 'success' },
{ title: '權限', icon: 'mdi-lock', color: 'purple' },
{ title: '圖表', icon: 'mdi-chart-bar', color: 'info' },
{ title: '首頁', icon: mdiHome, color: 'primary' },
{ title: '控制台', icon: mdiViewDashboard, color: 'error' },
{ title: '組件', icon: mdiLayers, color: 'warning' },
{ title: '系統管理', icon: mdiCog, color: 'success' },
{ title: '權限', icon: mdiLock, color: 'purple' },
{ title: '圖表', icon: mdiChartBar, color: 'info' },
])
const todos = ref([
src/views/Home.vue
+3 -2
View File
@@ -48,11 +48,11 @@ v-if="resolveNewsItem(wrapped).isNew" class="ml-2" color="primary" size="x-small
</div>
<div class="d-flex ga-4 mt-3 text-caption text-medium-emphasis">
<div class="d-flex align-center ga-1">
<v-icon size="14">mdi-folder-outline</v-icon>
<v-icon size="14" :icon="mdiFolderOutline" />
<span>{{ resolveNewsItem(wrapped).dept }}</span>
</div>
<div class="d-flex align-center ga-1">
<v-icon size="14">mdi-eye-outline</v-icon>
<v-icon size="14" :icon="mdiEyeOutline" />
<span>{{ resolveNewsItem(wrapped).views }} 次瀏覽</span>
</div>
</div>
@@ -119,6 +119,7 @@ class="d-flex flex-column align-center ga-2 text-center py-4 px-2 quick-item" va
</template>
<script setup lang="ts">
import { mdiEyeOutline, mdiFolderOutline } from '@mdi/js'
import { ref } from 'vue'
import { useMessageStore } from '@/stores/messages'
import { useSnackbarStore } from '@/stores/snackbar'
src/views/errors/ErrorShell.vue
+3 -2
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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>
src/views/maint/EditableGridMnt.vue
+5 -4
View File
@@ -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
+17 -10
View File
@@ -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
+7 -6
View File
@@ -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
+7 -6
View File
@@ -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
+6 -5
View File
@@ -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'