feat(navigation): hard-switch to Zibll navigation and Font Awesome 5
This commit is contained in:
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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user