kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/admin/src/components/DeferredPage.vue
+2 -2
View File
@@ -25,7 +25,7 @@
:key="i"
class="aksrt-deferred-page__feature"
>
<FaIcon icon="fas fa-check-circle" :size="14" />
<FaIcon icon="fa fas fa-check-circle" :size="14" />
<span>{{ feat }}</span>
</div>
</div>
@@ -63,7 +63,7 @@ const route = useRoute()
/** Merge direct props with route meta deferredProps */
const resolvedTitle = computed(() => props.title || route.meta?.deferredProps?.title || '功能开发中')
const resolvedDesc = computed(() => props.description || route.meta?.deferredProps?.description || '此功能正在规划开发中，将在后续版本上线。')
const resolvedIcon = computed(() => props.icon || route.meta?.deferredProps?.icon || 'fas fa-rocket')
const resolvedIcon = computed(() => props.icon || route.meta?.deferredProps?.icon || 'fa fas fa-rocket')
const resolvedStatus = computed(() => props.status || route.meta?.deferredProps?.status || 'deferred')
const resolvedPhase = computed(() => props.phase || route.meta?.deferredProps?.phase || '')
const resolvedDependsOn = computed(() => {
assets/admin/src/components/EmptyState.vue
+1 -1
View File
@@ -12,7 +12,7 @@
defineProps({
title: { type: String, default: '功能开发中' },
desc: { type: String, default: '此功能模块正在规划中，后续版本将逐步开放。' },
icon: { type: String, default: 'fas fa-hourglass-half' },
icon: { type: String, default: 'fa fas fa-hourglass-half' },
})
</script>
assets/admin/src/components/form/AksArrayTable.vue
+4 -4
View File
@@ -15,7 +15,7 @@
class="aksrt-array-table__add"
@click="addItem"
>
<FaIcon icon="fas fa-plus" :size="12" />
<FaIcon icon="fa fas fa-plus" :size="12" />
{{ addText || '添加行' }}
</n-button>
</div>
@@ -105,13 +105,13 @@ const tableColumns = computed(() => {
render(row, rowIndex) {
return h('div', { style: 'display:flex;gap:2px' }, [
rowIndex > 0 ? h(NButton, { size: 'tiny', quaternary: true, onClick: () => moveUp(rowIndex) }, {
default: () => h(FaIcon, { icon: 'fas fa-arrow-up', size: 12 }),
default: () => h(FaIcon, { icon: 'fa fas fa-arrow-up', size: 12 }),
}) : null,
rowIndex < (props.modelValue?.length || 0) - 1 ? h(NButton, { size: 'tiny', quaternary: true, onClick: () => moveDown(rowIndex) }, {
default: () => h(FaIcon, { icon: 'fas fa-arrow-down', size: 12 }),
default: () => h(FaIcon, { icon: 'fa fas fa-arrow-down', size: 12 }),
}) : null,
h(NButton, { size: 'tiny', quaternary: true, type: 'error', onClick: () => removeItem(rowIndex) }, {
default: () => h(FaIcon, { icon: 'fas fa-trash', size: 12 }),
default: () => h(FaIcon, { icon: 'fa fas fa-trash-alt', size: 12 }),
}),
])
},
assets/admin/src/components/form/AksField.vue
+12 -12
View File
@@ -7,7 +7,7 @@
</label>
<n-tooltip v-if="schema.help" trigger="hover">
<template #trigger>
<FaIcon icon="fas fa-question-circle" :size="13" class="aksrt-field__help-icon" />
<FaIcon icon="fa fas fa-question-circle" :size="13" class="aksrt-field__help-icon" />
</template>
{{ schema.help }}
</n-tooltip>
@@ -353,7 +353,7 @@
>
<img v-if="opt.image" :src="opt.image" :alt="opt.label" class="aksrt-field__image-select-img" />
<div v-else class="aksrt-field__image-select-placeholder">
<FaIcon :icon="opt.icon || 'fas fa-image'" :size="20" />
<FaIcon :icon="opt.icon || 'fa fas fa-image'" :size="20" />
</div>
<span class="aksrt-field__image-select-label">{{ opt.label }}</span>
</div>
@@ -386,7 +386,7 @@
:disabled="schema.disabled"
@click="removeRepeaterItem(index)"
>
<FaIcon icon="fas fa-trash" :size="12" />
<FaIcon icon="fa fas fa-trash-alt" :size="12" />
</n-button>
</div>
<div class="aksrt-field__repeater-fields">
@@ -406,7 +406,7 @@
:disabled="schema.disabled"
@click="addRepeaterItem"
>
<FaIcon icon="fas fa-plus" :size="12" style="margin-right: 6px" />
<FaIcon icon="fa fas fa-plus" :size="12" style="margin-right: 6px" />
{{ schema.addText || '添加一项' }}
</n-button>
</div>
@@ -427,7 +427,7 @@
:disabled="schema.disabled"
@click="moveRepeaterItem(index, -1)"
>
<FaIcon icon="fas fa-arrow-up" :size="12" />
<FaIcon icon="fa fas fa-arrow-up" :size="12" />
</n-button>
<n-button
v-if="index < (modelValue || []).length - 1"
@@ -436,7 +436,7 @@
:disabled="schema.disabled"
@click="moveRepeaterItem(index, 1)"
>
<FaIcon icon="fas fa-arrow-down" :size="12" />
<FaIcon icon="fa fas fa-arrow-down" :size="12" />
</n-button>
<n-button
size="tiny"
@@ -445,7 +445,7 @@
:disabled="schema.disabled"
@click="openRepeaterModal(index)"
>
<FaIcon icon="fas fa-edit" :size="12" />
<FaIcon icon="fa fas fa-edit" :size="12" />
编辑
</n-button>
<n-button
@@ -455,7 +455,7 @@
:disabled="schema.disabled"
@click="removeRepeaterItem(index)"
>
<FaIcon icon="fas fa-trash" :size="12" />
<FaIcon icon="fa fas fa-trash-alt" :size="12" />
删除
</n-button>
</div>
@@ -467,7 +467,7 @@
v-html="getRepeaterPreviewCustomIcon(item)"
/>
<i v-else-if="getRepeaterPreviewIcon(item)" :class="getRepeaterPreviewIcon(item)" aria-hidden="true" />
<FaIcon v-else icon="fas fa-star" :size="16" />
<FaIcon v-else icon="fa fas fa-star" :size="16" />
</div>
<div class="aksrt-field__repeater-list-meta">
<div class="aksrt-field__repeater-list-title">
@@ -481,7 +481,7 @@
</div>
</div>
<div v-else class="aksrt-field__repeater-empty">
<FaIcon icon="fas fa-inbox" :size="18" />
<FaIcon icon="fa fas fa-inbox" :size="18" />
<span>{{ schema.emptyText || '暂无数据' }}</span>
</div>
<n-button
@@ -491,7 +491,7 @@
:disabled="schema.disabled"
@click="openRepeaterModal(-1)"
>
<FaIcon icon="fas fa-plus" :size="12" style="margin-right: 6px" />
<FaIcon icon="fa fas fa-plus" :size="12" style="margin-right: 6px" />
{{ schema.addText || '添加一项' }}
</n-button>
@@ -600,7 +600,7 @@ async function loadTaxonomyTerms() {
if (!props.schema.taxonomy) return
taxonomyLoading.value = true
try {
const res = await api.getCategories()
const res = await api.getCategories(props.schema.taxonomy || 'category')
const items = res?.data || res || []
taxonomyOptions.value = (Array.isArray(items) ? items : []).map(t => ({
label: t.name + (t.count ? ' (' + t.count + ')' : ''),
assets/admin/src/components/form/AksFieldGroup.vue
+1 -1
View File
@@ -26,7 +26,7 @@
@click.stop="toggleCollapse"
>
<FaIcon
:icon="collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"
:icon="collapsed ? 'fa fas fa-chevron-right' : 'fa fas fa-chevron-down'"
:size="12"
/>
<span>{{ collapsed ? '展开' : '收起' }}</span>
assets/admin/src/components/form/AksFormRenderer.vue
+4 -4
View File
@@ -17,7 +17,7 @@
clearable
>
<template #prefix>
<FaIcon icon="fas fa-search" :size="12" />
<FaIcon icon="fa fas fa-search" :size="12" />
</template>
</n-input>
</div>
@@ -87,7 +87,7 @@
<!-- Empty state -->
<div v-else class="aksrt-form-renderer__empty">
<FaIcon icon="fas fa-cog" :size="32" />
<FaIcon icon="fa fas fa-cog" :size="32" />
<p>暂无配置项</p>
</div>
@@ -95,7 +95,7 @@
<div v-if="dirty" class="aksrt-form-renderer__save-bar">
<div class="aksrt-form-renderer__save-bar__inner">
<div class="aksrt-form-renderer__save-bar__info">
<FaIcon icon="fas fa-exclamation-circle" :size="14" />
<FaIcon icon="fa fas fa-exclamation-circle" :size="14" />
<span>您有未保存的更改</span>
</div>
<div class="aksrt-form-renderer__save-bar__actions">
@@ -106,7 +106,7 @@
:loading="saving"
@click="$emit('save')"
>
<FaIcon v-if="!saving" icon="fas fa-save" :size="12" />
<FaIcon v-if="!saving" icon="fa fas fa-save" :size="12" />
保存设置
</n-button>
</div>
assets/admin/src/components/form/AksMediaField.vue
+4 -4
View File
@@ -8,21 +8,21 @@
class="aksrt-media-field__image"
/>
<div v-else class="aksrt-media-field__file">
<FaIcon icon="fas fa-file" :size="24" />
<FaIcon icon="fa fas fa-file" :size="24" />
<span class="aksrt-media-field__filename">{{ fileName }}</span>
</div>
<div class="aksrt-media-field__overlay">
<n-button size="tiny" quaternary @click="openMediaLibrary">
<FaIcon icon="fas fa-exchange-alt" /> 更换
<FaIcon icon="fa fas fa-exchange-alt" /> 更换
</n-button>
<n-button size="tiny" quaternary type="error" @click="clearMedia">
<FaIcon icon="fas fa-trash" /> 移除
<FaIcon icon="fa fas fa-trash-alt" /> 移除
</n-button>
</div>
</div>
<div v-else class="aksrt-media-field__empty" @click="openMediaLibrary">
<FaIcon icon="fas fa-cloud-upload-alt" :size="28" />
<FaIcon icon="fa fas fa-cloud-upload-alt" :size="28" />
<span>{{ placeholder }}</span>
</div>
assets/admin/src/components/form/AksRepeaterField.vue
+5 -5
View File
@@ -15,7 +15,7 @@
quaternary
@click="moveUp(index)"
>
<FaIcon icon="fas fa-arrow-up" :size="12" />
<FaIcon icon="fa fas fa-arrow-up" :size="12" />
</n-button>
<n-button
v-if="index < modelValue.length - 1"
@@ -23,7 +23,7 @@
quaternary
@click="moveDown(index)"
>
<FaIcon icon="fas fa-arrow-down" :size="12" />
<FaIcon icon="fa fas fa-arrow-down" :size="12" />
</n-button>
<n-button
size="tiny"
@@ -31,7 +31,7 @@
type="error"
@click="removeItem(index)"
>
<FaIcon icon="fas fa-trash" :size="12" />
<FaIcon icon="fa fas fa-trash-alt" :size="12" />
</n-button>
</div>
</div>
@@ -49,7 +49,7 @@
</div>
<div v-else class="aksrt-repeater__empty">
<FaIcon icon="fas fa-inbox" :size="20" />
<FaIcon icon="fa fas fa-inbox" :size="20" />
<span>{{ emptyText || '暂无数据' }}</span>
</div>
@@ -60,7 +60,7 @@
class="aksrt-repeater__add"
@click="addItem"
>
<FaIcon icon="fas fa-plus" :size="12" />
<FaIcon icon="fa fas fa-plus" :size="12" />
{{ addText || '添加项目' }}
</n-button>
</div>
assets/admin/src/components/form/FaIcon.vue
+8 -8
View File
@@ -11,16 +11,16 @@
* FaIcon — Font Awesome 5 icon wrapper component.
*
* Usage:
* <FaIcon icon="fas fa-cog" />
* <FaIcon icon="fa-cog" /> → defaults to "fas" prefix
* <FaIcon icon="fab fa-github" />
* <FaIcon :size="18" icon="far fa-heart" />
* <FaIcon spin icon="fas fa-spinner" />
* <FaIcon icon="fa fas fa-cog" />
* <FaIcon icon="fa-cog" /> → defaults to solid FA5
* <FaIcon icon="fa fab fa-github" />
* <FaIcon :size="18" icon="fa fas fa-heart" />
* <FaIcon spin icon="fa fas fa-spinner" />
*/
import { computed } from 'vue'
const props = defineProps({
/** FA5 class string, e.g. "fas fa-cog", "fab fa-github", or just "fa-cog" */
/** FA5 class string, e.g. "fa fas fa-cog", "fa fab fa-github", or just "fa-cog" */
icon: { type: String, required: true },
/** Pixel size — maps to font-size */
size: { type: [Number, String], default: null },
@@ -41,10 +41,10 @@ const props = defineProps({
const iconClass = computed(() => {
const parts = []
// Auto-prefix: if only "fa-xxx" is given, default to "fas"
// Auto-prefix: if only "fa-circle" is given, use the solid FA5 style.
const raw = props.icon.trim()
if (raw.startsWith('fa-')) {
parts.push('fas', raw)
parts.push('fa', 'fas', raw)
} else {
parts.push(...raw.split(/\s+/))
}
assets/admin/src/components/form/FaIconPicker.vue
+37 -41
View File
@@ -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>
assets/admin/src/components/homepage/ModuleCanvas.vue
+26 -26
View File
@@ -4,27 +4,27 @@
<n-space>
<n-dropdown :options="addModuleOptions" trigger="click" @select="handleAddModule">
<n-button type="primary" size="small">
<template #icon><FaIcon icon="fas fa-plus" :size="12" /></template>
<template #icon><FaIcon icon="fa fas fa-plus" :size="12" /></template>
添加模块
</n-button>
</n-dropdown>
<n-button size="small" @click="$emit('pick-preset')">
<template #icon><FaIcon icon="fas fa-magic" :size="12" /></template>
<template #icon><FaIcon icon="fa fas fa-magic" :size="12" /></template>
应用预设
</n-button>
<n-button size="small" @click="$emit('export')">
<template #icon><FaIcon icon="fas fa-download" :size="12" /></template>
<template #icon><FaIcon icon="fa fas fa-download" :size="12" /></template>
导出
</n-button>
<n-button size="small" @click="$emit('import')">
<template #icon><FaIcon icon="fas fa-upload" :size="12" /></template>
<template #icon><FaIcon icon="fa fas fa-upload" :size="12" /></template>
导入
</n-button>
</n-space>
</div>
<div v-if="modules.length === 0" class="aksrt-module-canvas__empty">
<FaIcon icon="fas fa-th-large" :size="32" color="#c0c4cc" />
<FaIcon icon="fa fas fa-th-large" :size="32" color="#c0c4cc" />
<p>暂无首页模块，点击"添加模块"或"应用预设"开始配置。</p>
</div>
@@ -48,7 +48,7 @@
@dragend="handleDragEnd"
>
<div class="aksrt-module-canvas__item-handle" title="拖拽排序">
<FaIcon icon="fas fa-grip-vertical" :size="12" color="#c0c4cc" />
<FaIcon icon="fa fas fa-bars" :size="12" color="#c0c4cc" />
</div>
<div class="aksrt-module-canvas__item-icon">
<FaIcon :icon="getModuleIcon(mod.type)" :size="14" />
@@ -70,7 +70,7 @@
title="复制"
@click.stop="$emit('copy', index)"
>
<FaIcon icon="fas fa-copy" :size="11" />
<FaIcon icon="fa fas fa-copy" :size="11" />
</n-button>
<n-button
size="tiny"
@@ -79,7 +79,7 @@
title="删除"
@click.stop="$emit('remove', index)"
>
<FaIcon icon="fas fa-trash" :size="11" />
<FaIcon icon="fa fas fa-trash-alt" :size="11" />
</n-button>
<n-button
size="tiny"
@@ -88,7 +88,7 @@
title="上移"
@click.stop="$emit('move', index, -1)"
>
<FaIcon icon="fas fa-chevron-up" :size="11" />
<FaIcon icon="fa fas fa-chevron-up" :size="11" />
</n-button>
<n-button
size="tiny"
@@ -97,7 +97,7 @@
title="下移"
@click.stop="$emit('move', index, 1)"
>
<FaIcon icon="fas fa-chevron-down" :size="11" />
<FaIcon icon="fa fas fa-chevron-down" :size="11" />
</n-button>
</div>
</div>
@@ -157,15 +157,15 @@ const addModuleOptions = computed(() =>
key: m.type,
icon: () => {
const iconMap = {
image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
'shopping-bag': 'fas fa-shopping-bag',
image: 'fa fas fa-image', rectangle: 'fa fas fa-square', folder: 'fa fas fa-folder',
switcher: 'fa fas fa-columns', trophy: 'fa fas fa-trophy', clock: 'fa fas fa-clock',
tag: 'fa fas fa-tag', link: 'fa fas fa-link', code: 'fa fas fa-code', fire: 'fa fas fa-fire',
grid: 'fa fas fa-th', 'font-colors': 'fa fas fa-font', 'th-large': 'fa fas fa-th-large',
swap: 'fa fas fa-arrows-alt-v', 'question-circle': 'fa fas fa-question-circle',
table: 'fa fas fa-table', star: 'fa fas fa-star', handshake: 'fa fas fa-handshake',
'shopping-bag': 'fa fas fa-shopping-bag',
}
return h('i', { class: iconMap[m.icon] || 'fas fa-cube', style: 'font-size:12px;margin-right:6px;' })
return h('i', { class: iconMap[m.icon] || 'fa fas fa-cube', style: 'font-size:12px;margin-right:6px;' })
},
}))
)
@@ -173,15 +173,15 @@ const addModuleOptions = computed(() =>
function getModuleIcon(type) {
const meta = MODULE_LIBRARY.find(m => m.type === type)
const iconMap = {
image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
'shopping-bag': 'fas fa-shopping-bag',
image: 'fa fas fa-image', rectangle: 'fa fas fa-square', folder: 'fa fas fa-folder',
switcher: 'fa fas fa-columns', trophy: 'fa fas fa-trophy', clock: 'fa fas fa-clock',
tag: 'fa fas fa-tag', link: 'fa fas fa-link', code: 'fa fas fa-code', fire: 'fa fas fa-fire',
grid: 'fa fas fa-th', 'font-colors': 'fa fas fa-font', 'th-large': 'fa fas fa-th-large',
swap: 'fa fas fa-arrows-alt-v', 'question-circle': 'fa fas fa-question-circle',
table: 'fa fas fa-table', star: 'fa fas fa-star', handshake: 'fa fas fa-handshake',
'shopping-bag': 'fa fas fa-shopping-bag',
}
return iconMap[meta?.icon] || 'fas fa-cube'
return iconMap[meta?.icon] || 'fa fas fa-cube'
}
function getModuleLabel(type) {
assets/admin/src/components/homepage/ModuleInspector.vue
+12 -12
View File
@@ -1,7 +1,7 @@
<template>
<div class="aksrt-module-inspector">
<div v-if="!module" class="aksrt-module-inspector__empty">
<FaIcon icon="fas fa-mouse-pointer" :size="24" color="#c0c4cc" />
<FaIcon icon="fa fas fa-mouse-pointer" :size="24" color="#c0c4cc" />
<p>选择左侧模块查看和编辑配置</p>
</div>
@@ -138,7 +138,7 @@
@update:value="(val) => updateConfig(field.key, val)"
/>
<n-button size="tiny" quaternary @click="openMediaPicker(field.key)">
<template #icon><FaIcon icon="fas fa-image" :size="12" /></template>
<template #icon><FaIcon icon="fa fas fa-image" :size="12" /></template>
从媒体库选择
</n-button>
</div>
@@ -161,11 +161,11 @@
/>
</div>
<n-button size="tiny" quaternary type="error" @click="removeRepeaterItem(field.key, idx)">
<FaIcon icon="fas fa-times" :size="10" />
<FaIcon icon="fa fas fa-times" :size="10" />
</n-button>
</div>
<n-button size="tiny" quaternary @click="addRepeaterItem(field.key, field.fields)">
<template #icon><FaIcon icon="fas fa-plus" :size="10" /></template>
<template #icon><FaIcon icon="fa fas fa-plus" :size="10" /></template>
添加一项
</n-button>
</div>
@@ -223,15 +223,15 @@ const localConfig = computed(() => {
function getModuleIcon(type) {
const m = MODULE_LIBRARY.find(x => x.type === type)
const iconMap = {
image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
'shopping-bag': 'fas fa-shopping-bag',
image: 'fa fas fa-image', rectangle: 'fa fas fa-square', folder: 'fa fas fa-folder',
switcher: 'fa fas fa-columns', trophy: 'fa fas fa-trophy', clock: 'fa fas fa-clock',
tag: 'fa fas fa-tag', link: 'fa fas fa-link', code: 'fa fas fa-code', fire: 'fa fas fa-fire',
grid: 'fa fas fa-th', 'font-colors': 'fa fas fa-font', 'th-large': 'fa fas fa-th-large',
swap: 'fa fas fa-arrows-alt-v', 'question-circle': 'fa fas fa-question-circle',
table: 'fa fas fa-table', star: 'fa fas fa-star', handshake: 'fa fas fa-handshake',
'shopping-bag': 'fa fas fa-shopping-bag',
}
return iconMap[m?.icon] || 'fas fa-cube'
return iconMap[m?.icon] || 'fa fas fa-cube'
}
function getModuleLabel(type) {