Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

22
frontend/src/components/AppShell.vue
View File

@@ -2,6 +2,7 @@
import { Icon } from '@iconify/vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { iconLogin, iconLogout, iconRegister, iconTranslate, type AppIcon } from '../icons';
import type { AuthUser, Language } from '../services/api';
import PokeBallMark from './PokeBallMark.vue';
@@ -9,7 +10,7 @@ defineProps<{
currentUser: AuthUser | null;
languages: Language[];
locale: string;
navItems: Array<{ label: string; to: string }>;
navItems: Array<{ label: string; to: string; icon?: AppIcon }>;
}>();
const emit = defineEmits<{
@@ -18,11 +19,6 @@ const emit = defineEmits<{
}>();
const { t } = useI18n();
const translateIcon = {
width: 24,
height: 24,
body: '<path fill="currentColor" d="m12.65 15.65l-2.85-2.8q.7-.8 1.225-1.75t.825-2.1H15V7h-5V5H8v2H3v2h6.95q-.275.8-.687 1.5T8.3 11.8q-.5-.55-.875-1.125T6.8 9h-2q.35.95.913 1.763T7 13.2l-5.65 5.55L2.75 20l5.55-5.55l3.45 3.4zm5.1 4.35L17 18h-3.5l-.75 2h-2l3.5-9h2l3.5 9zm-2.15-4h2.8L17 12.25z"/>'
};
const languageMenu = ref<HTMLElement | null>(null);
const languageMenuButton = ref<HTMLButtonElement | null>(null);
const languageMenuOpen = ref(false);
@@ -78,6 +74,7 @@ onBeforeUnmount(() => {
<nav class="nav-links" :aria-label="t('nav.main')">
<RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
<Icon v-if="item.icon" :icon="item.icon" class="ui-icon nav-links__icon" aria-hidden="true" />
{{ item.label }}
</RouterLink>
</nav>
@@ -93,7 +90,7 @@ onBeforeUnmount(() => {
aria-haspopup="menu"
@click="toggleLanguageMenu"
>
<Icon :icon="translateIcon" class="language-menu__icon" aria-hidden="true" />
<Icon :icon="iconTranslate" class="language-menu__icon" aria-hidden="true" />
<span class="language-menu__glyph" aria-hidden="true">文/A</span>
</button>
@@ -116,12 +113,19 @@ onBeforeUnmount(() => {
<template v-if="currentUser">
<span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
<button class="ui-button ui-button--ghost ui-button--small" type="button" @click="$emit('logout')">
<Icon :icon="iconLogout" class="ui-icon" aria-hidden="true" />
{{ t('nav.logout') }}
</button>
</template>
<template v-else>
<RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">{{ t('nav.login') }}</RouterLink>
<RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">{{ t('nav.register') }}</RouterLink>
<RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">
<Icon :icon="iconLogin" class="ui-icon" aria-hidden="true" />
{{ t('nav.login') }}
</RouterLink>
<RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">
<Icon :icon="iconRegister" class="ui-icon" aria-hidden="true" />
{{ t('nav.register') }}
</RouterLink>
</template>
</div>
</div>