feat(navigation): hard-switch to Zibll navigation and Font Awesome 5

This commit is contained in:
kate522 committed 2026-08-18 20:46:21 +08:00
1 parent 3c3ddac8be
commit a0b84977a2
630 files changed
+101647 -11293

No files matched your search

@@ -13,7 +13,7 @@
<FaIcon v-if="modelValue" :icon="modelValue" />
</template>
<template #suffix>
<FaIcon icon="fas fa-chevron-down" :size="12" />
<FaIcon icon="fa fas fa-chevron-down" :size="12" />
</template>
</n-input>
</template>
@@ -27,7 +27,7 @@
clearable
>
<template #prefix>
<FaIcon icon="fas fa-search" :size="12" />
<FaIcon icon="fa fas fa-search" :size="12" />
</template>
</n-input>
</div>
@@ -45,11 +45,11 @@
v-for="icon in filteredIcons"
:key="icon"
class="aksrt-icon-picker__item"
:class="{ 'is-active': modelValue === `${activePrefix} ${icon}` }"
:class="{ 'is-active': modelValue === `fa ${activePrefix} ${icon}` }"
:title="icon"
@click="selectIcon(icon)"
>
<i :class="[activePrefix, icon]"></i>
<i :class="['fa', activePrefix, icon]"></i>
</div>
<div v-if="filteredIcons.length === 0" class="aksrt-icon-picker__empty">
未找到匹配图标
@@ -80,42 +80,42 @@ const activePrefix = ref('fas')
const gridRef = ref(null)
// Common FA5 icons subset — a curated list covering most admin UI needs.
// Full FA5 has 1600+ icons; this subset has ~200 of the most useful ones.
// Curated FA5 subsets for the three bundled font families.
const SOLID_ICONS = [
'fa-home', 'fa-cog', 'fa-cogs', 'fa-wrench', 'fa-sliders-h', 'fa-tools',
'fa-search', 'fa-filter', 'fa-sort', 'fa-sync', 'fa-redo', 'fa-undo',
'fa-home', 'fa-cog', 'fa-cogs', 'fa-wrench', 'fa-sliders-h', 'fa-wrench',
'fa-search', 'fa-filter', 'fa-sort', 'fa-sync-alt', 'fa-redo-alt', 'fa-undo',
'fa-plus', 'fa-minus', 'fa-times', 'fa-check', 'fa-exclamation', 'fa-info',
'fa-question', 'fa-bell', 'fa-envelope', 'fa-comment', 'fa-comments',
'fa-user', 'fa-users', 'fa-user-plus', 'fa-user-shield', 'fa-user-circle',
'fa-lock', 'fa-unlock', 'fa-key', 'fa-shield-alt', 'fa-fingerprint',
'fa-globe', 'fa-globe-americas', 'fa-link', 'fa-external-link-alt', 'fa-anchor',
'fa-image', 'fa-images', 'fa-camera', 'fa-video', 'fa-music', 'fa-file',
'fa-folder', 'fa-folder-open', 'fa-download', 'upload', 'fa-cloud',
'fa-database', 'fa-server', 'fa-hdd', 'fa-memory', 'fa-microchip',
'fa-user', 'fa-users', 'fa-user-plus', 'fa-user', 'fa-user-circle',
'fa-lock', 'fa-unlock', 'fa-key', 'fa-shield-alt', 'fa-id-badge',
'fa-globe', 'fa-globe', 'fa-link', 'fa-external-link-alt', 'fa-anchor',
'fa-image', 'fa-image', 'fa-camera', 'fa-video', 'fa-music', 'fa-file',
'fa-folder', 'fa-folder-open', 'fa-download', 'fa-upload', 'fa-cloud',
'fa-database', 'fa-server', 'fa-hdd', 'fa-microchip', 'fa-microchip',
'fa-desktop', 'fa-laptop', 'fa-mobile-alt', 'fa-tablet-alt',
'fa-chart-bar', 'fa-chart-line', 'fa-chart-pie', 'fa-chart-area',
'fa-tachometer-alt', 'fa-tasks', 'fa-clipboard', 'fa-clipboard-list',
'fa-tachometer-alt', 'fa-tasks', 'fa-clipboard', 'fa-clipboard',
'fa-list', 'fa-list-alt', 'fa-list-ol', 'fa-list-ul', 'fa-th', 'fa-th-large',
'fa-tags', 'fa-tag', 'fa-bookmark', 'fa-star', 'fa-heart', 'fa-thumbs-up',
'fa-share', 'fa-share-alt', 'fa-external-link-alt', 'fa-clipboard-check',
'fa-eye', 'fa-eye-slash', 'fa-lightbulb', 'fa-magic', 'fa-palette',
'fa-share', 'fa-share-alt', 'fa-external-link-alt', 'fa-clipboard',
'fa-eye', 'fa-eye-slash', 'fa-lightbulb', 'fa-magic', 'fa-paint-brush',
'fa-paint-brush', 'fa-font', 'fa-text-height', 'fa-bold', 'fa-italic',
'fa-code', 'fa-terminal', 'fa-bug', 'fa-exclamation-triangle',
'fa-exclamation-circle', 'fa-check-circle', 'fa-info-circle',
'fa-spinner', 'fa-circle-notch', 'fa-hourglass-half', 'fa-clock',
'fa-calendar', 'fa-calendar-alt', 'fa-history', 'fa-hourglass',
'fa-map-marker-alt', 'fa-map', 'fa-directions', 'fa-compass',
'fa-calendar', 'fa-calendar', 'fa-history', 'fa-hourglass',
'fa-map-marker-alt', 'fa-map', 'fa-road', 'fa-compass',
'fa-shopping-cart', 'fa-shopping-bag', 'fa-credit-card', 'fa-money-bill',
'fa-coins', 'fa-dollar-sign', 'fa-wallet', 'fa-receipt',
'fa-newspaper', 'fa-rss', 'fa-podcast', 'fa-megaphone',
'fa-flag', 'fa-trophy', 'fa-award', 'fa-medal', 'fa-gift',
'fa-fire', 'fa-bolt', 'fa-sun', 'fa-moon', 'fa-cloud-sun',
'fa-database', 'fa-dollar-sign', 'fa-credit-card', 'fa-file-alt',
'fa-newspaper', 'fa-rss', 'fa-podcast', 'fa-bullhorn',
'fa-flag', 'fa-trophy', 'fa-trophy', 'fa-trophy', 'fa-gift',
'fa-fire', 'fa-bolt', 'fa-sun', 'fa-moon', 'fa-cloud',
'fa-male', 'fa-female', 'fa-child', 'fa-id-card',
'fa-paper-plane', 'fa-paperclip', 'fa-at', 'fa-hashtag',
'fa-ellipsis-h', 'fa-ellipsis-v', 'fa-bars', 'fa-columns',
'fa-window-maximize', 'fa-window-minimize', 'fa-window-close',
'fa-expand', 'fa-compress', 'fa-arrows-alt', 'fa-crosshairs',
'fa-sign-in-alt', 'fa-sign-out-alt', 'fa-door-open',
'fa-sign-in-alt', 'fa-sign-out-alt', 'fa-sign-in-alt',
'fa-plug', 'fa-power-off', 'fa-redo-alt', 'fa-sync-alt',
]
@@ -135,35 +135,31 @@ const REGULAR_ICONS = [
const BRAND_ICONS = [
'fa-github', 'fa-gitlab', 'fa-bitbucket', 'fa-google', 'fa-google-plus',
'fa-facebook', 'fa-facebook-f', 'fa-twitter', 'fa-x-twitter',
'fa-instagram', 'fa-linkedin', 'fa-linkedin-in', 'fa-youtube',
'fa-weixin', 'fa-qq', 'fa-weibo', 'fa-telegram', 'fa-telegram-plane',
'fa-discord', 'fa-slack', 'fa-whatsapp', 'fa-skype',
'fa-apple', 'fa-windows', 'fa-linux', 'fa-android', 'fa-chrome',
'fa-firefox', 'fa-edge', 'fa-safari', 'fa-opera',
'fa-html5', 'fa-css3-alt', 'fa-js', 'fa-js-square', 'fa-node',
'fa-react', 'fa-vuejs', 'fa-angular', 'fa-php', 'fa-python',
'fa-java', 'fa-rust', 'fa-golang', 'fa-swift',
'fa-docker', 'fa-aws', 'fa-digital-ocean', 'fa-cloudflare',
'fa-wordpress', 'fa-joomla', 'fa-drupal', 'fa-shopify',
'fa-paypal', 'fa-stripe', 'fa-alipay', 'fa-weixin',
'fa-tiktok', 'fa-snapchat', 'fa-pinterest', 'fa-reddit',
'fa-stack-overflow', 'fa-codepen', 'fa-npm', 'fa-yarn',
'fa-twitch', 'fa-spotify', 'fa-soundcloud', 'fa-music',
'fa-bilibili',
'fa-facebook', 'fa-facebook-f', 'fa-twitter', 'fa-instagram',
'fa-linkedin', 'fa-linkedin-in', 'fa-youtube', 'fa-weixin', 'fa-qq',
'fa-weibo', 'fa-telegram', 'fa-telegram-plane', 'fa-discord', 'fa-slack',
'fa-whatsapp', 'fa-skype', 'fa-apple', 'fa-windows', 'fa-linux',
'fa-android', 'fa-chrome', 'fa-firefox', 'fa-edge', 'fa-safari',
'fa-opera', 'fa-html5', 'fa-css3-alt', 'fa-js', 'fa-node', 'fa-react',
'fa-vuejs', 'fa-angular', 'fa-php', 'fa-python', 'fa-java', 'fa-rust',
'fa-docker', 'fa-aws', 'fa-digital-ocean', 'fa-cloudflare', 'fa-wordpress',
'fa-joomla', 'fa-drupal', 'fa-shopify', 'fa-paypal', 'fa-stripe',
'fa-alipay', 'fa-tiktok', 'fa-snapchat', 'fa-pinterest', 'fa-reddit',
'fa-stack-overflow', 'fa-codepen', 'fa-npm', 'fa-yarn', 'fa-twitch',
'fa-spotify', 'fa-soundcloud',
]
const iconSets = { fas: SOLID_ICONS, far: REGULAR_ICONS, fab: BRAND_ICONS }
const filteredIcons = computed(() => {
const set = iconSets[activePrefix.value] || SOLID_ICONS
const q = search.value.toLowerCase().replace(/\s+/g, '')
const set = iconSets[activePrefix.value] || SOLID_ICONS
if (!q) return set
return set.filter(i => i.includes(q))
})
function selectIcon(icon) {
emit('update:modelValue', `${activePrefix.value} ${icon}`)
emit('update:modelValue', `fa ${activePrefix.value} ${icon}`)
}
</script>