feat(ui): add icons to navigation and UI components

Integrate @iconify/vue for consistent iconography across the app
Enhance buttons, entity cards, and status messages with visual indicators
This commit is contained in:
2026-05-01 14:31:29 +08:00
parent ca3ca35dfc
commit 9fece8f54f
25 changed files with 361 additions and 80 deletions

View File

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import AppShell from './components/AppShell.vue';
import { iconAdmin, iconChecklist, iconHabitat, iconItem, iconPokemon, iconRecipe } from './icons';
import { getCurrentLocale, onLocaleChange, setCurrentLocale } from './i18n';
import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser, type Language } from './services/api';
@@ -18,12 +19,12 @@ let removeAuthListener: (() => void) | null = null;
let removeLocaleListener: (() => void) | null = null;
const navItems = computed(() => [
{ label: t('nav.pokemon'), to: '/pokemon' },
{ label: t('nav.habitats'), to: '/habitats' },
{ label: t('nav.items'), to: '/items' },
{ label: t('nav.recipes'), to: '/recipes' },
{ label: t('nav.checklist'), to: '/checklist' },
{ label: t('nav.admin'), to: '/admin' }
{ label: t('nav.pokemon'), to: '/pokemon', icon: iconPokemon },
{ label: t('nav.habitats'), to: '/habitats', icon: iconHabitat },
{ label: t('nav.items'), to: '/items', icon: iconItem },
{ label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
{ label: t('nav.checklist'), to: '/checklist', icon: iconChecklist },
{ label: t('nav.admin'), to: '/admin', icon: iconAdmin }
]);
async function loadCurrentUser() {