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/components/layouts/SKAdminLayout.vue
+7 -6
View File
@@ -8,7 +8,7 @@ v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
<!-- Sidebar Title -->
<v-card class="sidebar-header d-flex align-center pa-0 pl-3 py-2" flat>
<v-btn
:aria-label="sidebarToggleLabel" color="grey" :icon="isRail ? 'mdi-menu-open' : 'mdi-menu'" size="32"
:aria-label="sidebarToggleLabel" color="grey" :icon="isRail ? mdiMenuOpen : mdiMenu" size="32"
variant="text" @click="toggleSidebar" />
<v-card-text v-if="!isRail" class="sidebar-title flex-grow-1 py-0">
<slot name="title">
@@ -120,12 +120,12 @@ v-else :mobile-current-items="mobileCurrentItems"
<v-card v-if="helpWidgetVisible" class="help-widget" rounded="lg">
<v-card-item class="py-2">
<template #prepend>
<v-icon color="primary">mdi-help-circle-outline</v-icon>
<v-icon color="primary" :icon="mdiHelpCircleOutline" />
</template>
<v-card-title class="text-subtitle-2">操作說明</v-card-title>
<template #append>
<v-btn
aria-label="關閉說明" icon="mdi-close" size="small" variant="text"
aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
@click="helpWidgetVisible = false" />
</template>
</v-card-item>
@@ -141,11 +141,12 @@ aria-label="關閉說明" icon="mdi-close" size="small" variant="text"
</v-card>
</v-slide-y-reverse-transition>
<!-- <v-btn v-if="isMobile" class="mobile-menu-btn" color="primary" icon="mdi-menu" @click="drawer = true" /> -->
<!-- <v-btn v-if="isMobile" class="mobile-menu-btn" color="primary" :icon="mdiMenu" @click="drawer = true" /> -->
</v-app>
</template>
<script setup>
import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useDisplay, useTheme } from 'vuetify'
import { getNextThemeName } from '@/utils/theme'
@@ -182,7 +183,7 @@ const defaultFeatures = {
const defaultBreadcrumbConfig = {
homeLabel: '首頁',
homeDisabled: true,
homeIcon: 'mdi-home',
homeIcon: mdiHome,
}
const props = defineProps({
@@ -246,7 +247,7 @@ const props = defineProps({
default: () => ({
homeLabel: '首頁',
homeDisabled: true,
homeIcon: 'mdi-home',
homeIcon: mdiHome,
}),
},
breadcrumbItems: {
src/components/layouts/SKMainLayout.vue
+5 -4
View File
@@ -8,7 +8,7 @@
<div class="d-flex align-center w-100">
<span class="flex-grow-1">{{ favoriteHeaderLabel }}</span>
<v-btn
density="compact" icon="mdi-unfold-less-horizontal" :ripple="false" variant="text"
density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
@click.stop="collapseFavoriteGroups" />
</div>
</v-list-subheader>
@@ -55,7 +55,7 @@ density="compact" icon="mdi-unfold-less-horizontal" :ripple="false" variant="tex
<div class="d-flex align-center w-100">
<span class="flex-grow-1">{{ menuHeaderLabel }}</span>
<v-btn
density="compact" icon="mdi-unfold-less-horizontal" :ripple="false" variant="text"
density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
@click.stop="collapseMenuGroups" />
</div>
</v-list-subheader>
@@ -138,13 +138,13 @@ v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title
<v-spacer />
<v-tooltip location="bottom" :text="themeToggleLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="themeToggleLabel" icon="mdi-palette" variant="text" @click="toggleTheme" />
<v-btn v-bind="props" :aria-label="themeToggleLabel" :icon="mdiPalette" variant="text" @click="toggleTheme" />
</template>
</v-tooltip>
<v-tooltip location="bottom" :text="logoutLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="logoutLabel" icon="mdi-logout" variant="text" @click="$emit('logout')" />
<v-btn v-bind="props" :aria-label="logoutLabel" :icon="mdiLogout" variant="text" @click="$emit('logout')" />
</template>
</v-tooltip>
</v-app-bar>
@@ -158,6 +158,7 @@ v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title
</template>
<script setup>
import { mdiLogout, mdiPalette, mdiUnfoldLessHorizontal } from '@mdi/js'
import { computed, ref } from 'vue'
import { useTheme } from 'vuetify'
import { getNextThemeName } from '@/utils/theme'
src/components/layouts/SKSimpleLayout.vue
+3 -2
View File
@@ -13,7 +13,7 @@
:width="menuWidth"
>
<template #activator="{ props }">
<v-btn v-bind="props" icon="mdi-dots-vertical" />
<v-btn v-bind="props" :icon="mdiDotsVertical" />
</template>
<v-list :density="menuDensity">
@@ -51,7 +51,7 @@
<template #activator="{ props }">
<v-list-item
v-bind="props"
append-icon="mdi-chevron-right"
:append-icon="mdiChevronRight"
:prepend-icon="item.icon"
:title="item.title"
/>
@@ -88,6 +88,7 @@
</template>
<script setup>
import { mdiChevronRight, mdiDotsVertical } from '@mdi/js'
import { computed, ref } from 'vue'
import { useDisplay } from 'vuetify'
src/components/layouts/sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue
+3 -2
View File
@@ -12,12 +12,12 @@ v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary"
</template>
<template #item="{ item }">
<div class="d-flex align-center ga-1">
<v-icon v-if="item.icon" class="mr-1" size="14">{{ item.icon }}</v-icon>
<v-icon v-if="item.icon" class="mr-1" size="14" :icon="item.icon" />
<span class="text-caption text-no-wrap">{{ item.title }}</span>
</div>
</template>
<template #divider>
<v-icon color="primary-variant" size="12">mdi-chevron-right</v-icon>
<v-icon color="primary-variant" size="12" :icon="mdiChevronRight" />
</template>
</v-breadcrumbs>
<div class="page-actions">
@@ -27,6 +27,7 @@ v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary"
</template>
<script setup>
import { mdiChevronRight } from '@mdi/js'
defineProps({
features: { type: Object, default: () => ({}) },
showBreadcrumbBar: { type: Boolean, default: true },
src/components/layouts/sk-admin-layout/SkAdminAppBarFavoritesCol.vue
+4 -3
View File
@@ -11,24 +11,25 @@ v-if="features.showFavorites && showFavoritesBar && !isMobile"
v-for="item in favoriteItems" :key="item.path ?? item.title" class="favorite-item" closable
color="secondary" size="small" variant="outlined" @click="emit('select', item)"
@click:close="emit('remove-favorite', item)">
<v-icon v-if="item.icon" class="me-1" size="16">{{ item.icon }}</v-icon>
<v-icon v-if="item.icon" class="me-1" size="16" :icon="item.icon" />
<span class="text-caption">{{ item.title }}</span>
</v-chip>
</transition-group>
<v-btn
v-if="favoritesConfig.showAdd" class="favorite-add" color="primary" size="small" variant="outlined"
@click="emit('add-favorite')">
<v-icon class="mr-1" size="16">mdi-plus</v-icon>
<v-icon class="mr-1" size="16" :icon="mdiPlus" />
<span class="text-caption">{{ favoritesConfig.addLabel }}</span>
</v-btn>
</div>
<v-btn color="grey" size="small" variant="text" @click="emit('toggle-favorites-bar', false)">
<v-icon>mdi-eye-off</v-icon>
<v-icon :icon="mdiEyeOff" />
</v-btn>
</v-col>
</template>
<script setup>
import { mdiEyeOff, mdiPlus } from '@mdi/js'
defineProps({
features: { type: Object, default: () => ({}) },
showFavoritesBar: { type: Boolean, default: true },
src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
+11 -10
View File
@@ -1,6 +1,6 @@
<template>
<v-col class="d-flex align-center bg-surface pr-2 pl-2 pl-m-3 py-1">
<v-btn v-if="isMobile" icon="mdi-menu" size="small" variant="text" @click="emit('toggle-drawer')"></v-btn>
<v-btn v-if="isMobile" :icon="mdiMenu" size="small" variant="text" @click="emit('toggle-drawer')"></v-btn>
<div v-if="features.showSearch" class="search-input-wrapper">
<v-text-field
@@ -8,7 +8,7 @@ v-model="searchValueModel" :aria-label="searchConfig.label" class="search-input"
hide-details :placeholder="searchConfig.placeholder" variant="outlined"
@keyup.enter="triggerSearch">
<template v-if="!isMobile" #prepend-inner>
<v-icon size="small">mdi-magnify</v-icon>
<v-icon size="small" :icon="mdiMagnify" />
</template>
<template #append-inner>
<v-btn :aria-label="searchConfig.label" color="primary" size="small" variant="text" @click="triggerSearch">
@@ -30,9 +30,9 @@ v-bind="props" :aria-label="toolbarActions.notificationsLabel" icon size="small"
<v-badge
v-if="toolbarCounts.notifications" color="error" :content="toolbarCounts.notifications"
offset-x="4" offset-y="-2">
<v-icon>mdi-bell-outline</v-icon>
<v-icon :icon="mdiBellOutline" />
</v-badge>
<v-icon v-else>mdi-bell-outline</v-icon>
<v-icon v-else :icon="mdiBellOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -46,9 +46,9 @@ v-bind="props" :aria-label="toolbarActions.messagesLabel" icon size="small" vari
<v-badge
v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages" offset-x="4"
offset-y="-2">
<v-icon>mdi-message-text-outline</v-icon>
<v-icon :icon="mdiMessageTextOutline" />
</v-badge>
<v-icon v-else>mdi-message-text-outline</v-icon>
<v-icon v-else :icon="mdiMessageTextOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -59,7 +59,7 @@ v-if="toolbarCounts.messages" color="warning" :content="toolbarCounts.messages"
<v-btn
v-bind="props" :aria-label="toolbarActions.helpLabel" icon size="small" variant="text"
@click="emit('action', 'help')">
<v-icon>mdi-help</v-icon>
<v-icon :icon="mdiHelp" />
</v-btn>
</template>
</v-tooltip>
@@ -72,7 +72,7 @@ v-bind="props" :aria-label="toolbarActions.helpLabel" icon size="small" variant=
<v-btn
v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsLabel" icon size="small"
variant="text">
<v-icon>mdi-cog-outline</v-icon>
<v-icon :icon="mdiCogOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -100,7 +100,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-tooltip location="bottom" :text="logoutLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="logoutLabel" icon size="small" variant="text" @click="emit('logout')">
<v-icon>mdi-logout</v-icon>
<v-icon :icon="mdiLogout" />
</v-btn>
</template>
</v-tooltip>
@@ -108,7 +108,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
<v-tooltip v-if="features.showThemeToggle" location="bottom" :text="themeToggleLabel">
<template #activator="{ props }">
<v-btn v-bind="props" :aria-label="themeToggleLabel" icon variant="text" @click="emit('toggle-theme')">
<v-icon>mdi-palette-outline</v-icon>
<v-icon :icon="mdiPaletteOutline" />
</v-btn>
</template>
</v-tooltip>
@@ -118,6 +118,7 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
</template>
<script setup>
import { mdiBellOutline, mdiCogOutline, mdiHelp, mdiLogout, mdiMagnify, mdiMenu, mdiMessageTextOutline, mdiPaletteOutline } from '@mdi/js'
import { computed } from 'vue'
const props = defineProps({
src/components/layouts/sk-admin-layout/SkAdminDrawerDesktopMenu.vue
+6 -5
View File
@@ -7,7 +7,7 @@
v-bind="isShrink ? undefined : props" :class="{ 'px-0': isShrink }"
:link="isNavigable(item) && !!item.path" :to="isNavigable(item) ? item.path : undefined" @click="emitSelect(item)">
<template #prepend>
<v-icon v-if="item.icon" size="20">{{ item.icon }}</v-icon>
<v-icon v-if="item.icon" size="20" :icon="item.icon" />
<v-btn v-if="isShrink && !item.icon" class="" rounded size="36" spaced="start" variant="text">{{
item.title?.charAt(0) }}</v-btn>
</template>
@@ -31,7 +31,7 @@ v-if="subItem.subItems?.length"
<template #activator="{ props: subProps }">
<v-list-item
v-bind="subProps" :link="isNavigable(subItem)"
:prepend-icon="subItem.icon || 'mdi-menu-right'" :to="isNavigable(subItem) ? subItem.path : undefined"
:prepend-icon="subItem.icon || mdiMenuRight" :to="isNavigable(subItem) ? subItem.path : undefined"
@click="emitSelect(subItem)">
<template #title>
<span class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
@@ -48,7 +48,7 @@ v-if="getItemCount(subItem) > 0" class="menu-count" color="secondary" size="x-sm
<v-list-item
v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title"
:link="!!subSubItem.path" prepend-icon="mdi-circle-small" :to="subSubItem.path"
:link="!!subSubItem.path" :prepend-icon="mdiCircleSmall" :to="subSubItem.path"
@click="emitSelect(subSubItem)">
<template #title>
<v-tooltip location="end" :text="subSubItem.title">
@@ -61,7 +61,7 @@ v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title
</v-list-group>
<v-list-item
v-else :link="!!subItem.path" :prepend-icon="subItem.icon || 'mdi-menu-right'" :to="subItem.path"
v-else :link="!!subItem.path" :prepend-icon="subItem.icon || mdiMenuRight" :to="subItem.path"
@click="emitSelect(subItem)">
<template #title>
<v-tooltip location="end" :text="subItem.title">
@@ -76,7 +76,7 @@ v-else :link="!!subItem.path" :prepend-icon="subItem.icon || 'mdi-menu-right'" :
<v-list-item v-else :class="{ 'px-0': isShrink }" :link="!!item.path" :to="item.path" @click="emitSelect(item)">
<template #prepend>
<v-icon v-if="item.icon" size="20">{{ item.icon }}</v-icon>
<v-icon v-if="item.icon" size="20" :icon="item.icon" />
<v-btn v-if="isShrink && !item.icon" class="" rounded size="36" spaced="start" variant="text">{{
item.title?.charAt(0) }}</v-btn>
</template>
@@ -93,6 +93,7 @@ v-else :link="!!subItem.path" :prepend-icon="subItem.icon || 'mdi-menu-right'" :
</template>
<script setup lang="ts">
import { mdiCircleSmall, mdiMenuRight } from '@mdi/js'
import { computed, watch } from 'vue'
interface MenuItem {
src/components/layouts/sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue
+2 -1
View File
@@ -6,7 +6,7 @@ v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" r
@click="emit('item-click', item)">
<v-list-item-title class="text-body-2">{{ item.title }}</v-list-item-title>
<template #append>
<v-icon size="18">{{ item.subItems?.length ? 'mdi-chevron-right' : 'mdi-arrow-top-right' }}</v-icon>
<v-icon size="18" :icon="item.subItems?.length ? mdiChevronRight : mdiArrowTopRight" />
</template>
</v-list-item>
</v-list>
@@ -14,6 +14,7 @@ v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" r
</template>
<script setup>
import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
defineProps({
mobileCurrentItems: {
type: Array,