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

@@ -11,7 +11,7 @@
<template #header>
<div class="aksrt-card-header-row">
<div class="aksrt-card-header-row__left">
<span class="header-icon"><i class="fas fa-cog"></i></span>
<span class="header-icon"><i class="fa fas fa-cog"></i></span>
<strong class="aksrt-card-header-row__title">基础设置</strong>
</div>
</div>
@@ -61,11 +61,11 @@
<template #header>
<div class="aksrt-card-header-row">
<div class="aksrt-card-header-row__left">
<span class="header-icon"><i class="fas fa-layer-group"></i></span>
<span class="header-icon"><i class="fa fas fa-clone"></i></span>
<strong class="aksrt-card-header-row__title">按钮列表 ({{ form.items.length }})</strong>
</div>
<n-button type="primary" size="small" @click="addItem">
<template #icon><i class="fas fa-plus"></i></template>
<template #icon><i class="fa fas fa-plus"></i></template>
添加按钮
</n-button>
</div>
@@ -87,7 +87,7 @@
<div class="float-btn-sort__item">
<div class="float-btn-sort__main">
<button type="button" class="float-btn-sort__handle" aria-label="拖拽排序">
<i class="fas fa-grip-vertical"></i>
<i class="fa fas fa-bars"></i>
</button>
<span class="float-btn-sort__icon">
<i v-if="element.icon" :class="element.icon"></i>
@@ -107,11 +107,11 @@
</div>
<div class="float-btn-sort__actions">
<n-button size="tiny" quaternary type="primary" @click="editItem(index)">
<template #icon><i class="fas fa-edit" style="font-size:12px;" /></template>
<template #icon><i class="fa fas fa-edit" style="font-size:12px;" /></template>
编辑
</n-button>
<n-button size="tiny" quaternary type="error" @click="deleteItem(index)">
<template #icon><i class="fas fa-trash-alt" style="font-size:12px;" /></template>
<template #icon><i class="fa fas fa-trash-alt" style="font-size:12px;" /></template>
删除
</n-button>
</div>
@@ -140,12 +140,12 @@
<n-select v-model:value="editingItem.type" :options="typeOptions" placeholder="选择按钮类型" @update:value="handleTypeChange" />
</n-form-item-gi>
<n-form-item-gi v-if="editingItem.type !== 'theme_mode'" label="主图标 (Font Awesome)">
<n-input v-model:value="editingItem.icon" placeholder="例如: fas fa-home" />
<n-input v-model:value="editingItem.icon" placeholder="例如: fa fas fa-home" />
</n-form-item-gi>
<n-form-item-gi v-else label="主题图标">
<div class="theme-icon-preview">
<span><i class="fas fa-sun"></i> 亮色固定显示太阳</span>
<span><i class="fas fa-moon"></i> 暗色固定显示月亮</span>
<span><i class="fa fas fa-sun"></i> 亮色固定显示太阳</span>
<span><i class="fa fas fa-moon"></i> 暗色固定显示月亮</span>
</div>
</n-form-item-gi>
</n-grid>
@@ -153,12 +153,12 @@
<div class="icon-preview-row">
<span>预览:</span>
<template v-if="editingItem.type === 'theme_mode'">
<span class="theme-icon-preview-inline"><i class="fas fa-sun"></i> / <i class="fas fa-moon"></i></span>
<span class="theme-icon-preview-inline"><i class="fa fas fa-sun"></i> / <i class="fa fas fa-moon"></i></span>
</template>
<i v-else-if="editingItem.icon" :class="editingItem.icon" style="font-size: 18px;"></i>
<span v-else class="muted-text">未设置图标</span>
<a href="https://fontawesome.com/search?m=free" target="_blank" rel="noopener">
<i class="fas fa-external-link-alt"></i>
<i class="fa fas fa-external-link-alt"></i>
Font Awesome
</a>
</div>
@@ -229,12 +229,12 @@
<div class="add-items-editor__head-actions">
<n-dropdown trigger="click" :options="addPresetOptions" @select="applyAddPreset">
<n-button size="small">
<template #icon><i class="fas fa-magic" /></template>
<template #icon><i class="fa fas fa-magic" /></template>
一键预设
</n-button>
</n-dropdown>
<n-button size="small" type="primary" @click="appendAddItem">
<template #icon><i class="fas fa-plus" /></template>
<template #icon><i class="fa fas fa-plus" /></template>
添加子项
</n-button>
</div>
@@ -251,13 +251,13 @@
<template #item="{ element, index: subIndex }">
<div class="add-items-editor__row">
<button type="button" class="add-items-editor__drag" aria-label="拖拽排序">
<i class="fas fa-grip-vertical"></i>
<i class="fa fas fa-bars"></i>
</button>
<n-input v-model:value="element.label" placeholder="名称,例如: 写文章" />
<n-input v-model:value="element.icon" placeholder="图标,例如: fas fa-pen" />
<n-input v-model:value="element.icon" placeholder="图标,例如: fa fas fa-pen" />
<n-input v-model:value="element.url" placeholder="链接,例如: /submit" />
<n-button quaternary type="error" @click="removeAddItem(subIndex)">
<template #icon><i class="fas fa-trash-alt" /></template>
<template #icon><i class="fa fas fa-trash-alt" /></template>
</n-button>
</div>
</template>
@@ -270,7 +270,7 @@
<div class="add-items-preview__panel add-items-preview__panel--light">
<div class="add-items-preview__mode">亮色</div>
<div class="add-items-preview__trigger">
<i :class="editingItem.icon || 'fas fa-plus'"></i>
<i :class="editingItem.icon || 'fa fas fa-plus'"></i>
</div>
<div class="add-items-preview__menu">
<div v-if="editingItem.add_items.length" class="add-items-preview__list">
@@ -280,7 +280,7 @@
href="javascript:void(0)"
class="add-items-preview__item"
>
<i :class="subItem.icon || 'fas fa-pen'"></i>
<i :class="subItem.icon || 'fa fas fa-pen'"></i>
<span>{{ subItem.label || '未命名子项' }}</span>
</a>
</div>
@@ -290,7 +290,7 @@
<div class="add-items-preview__panel add-items-preview__panel--dark">
<div class="add-items-preview__mode">暗色</div>
<div class="add-items-preview__trigger add-items-preview__trigger--dark">
<i :class="editingItem.icon || 'fas fa-plus'"></i>
<i :class="editingItem.icon || 'fa fas fa-plus'"></i>
</div>
<div class="add-items-preview__menu add-items-preview__menu--dark">
<div v-if="editingItem.add_items.length" class="add-items-preview__list">
@@ -300,7 +300,7 @@
href="javascript:void(0)"
class="add-items-preview__item add-items-preview__item--dark"
>
<i :class="subItem.icon || 'fas fa-pen'"></i>
<i :class="subItem.icon || 'fa fas fa-pen'"></i>
<span>{{ subItem.label || '未命名子项' }}</span>
</a>
</div>
@@ -410,7 +410,7 @@ function createDefaultItem() {
return {
id: '',
type: 'custom',
icon: 'fas fa-link',
icon: 'fa fas fa-link',
icon_dark: '',
icon_light: '',
text: '',
@@ -435,14 +435,14 @@ function createDefaultItem() {
function applyTypeDefaults(type) {
const map = {
custom: { icon: 'fas fa-link', icon_dark: '', icon_light: '', text: '链接', desc: '', link: '', hover: '', action_mode: 'link', qr_size: 120 },
back_top: { icon: 'fas fa-chevron-up', icon_dark: '', icon_light: '', text: '顶部', desc: '返回顶部', link: '', hover: '', action_mode: 'link', qr_size: 120 },
theme_mode: { icon: 'fas fa-sun', icon_dark: '', icon_light: '', text: '主题', desc: '切换主题', link: '', hover: '', action_mode: 'link', qr_size: 120 },
qrcode: { icon: 'fas fa-qrcode', icon_dark: '', icon_light: '', text: '二维码', desc: '扫码继续浏览', link: '', hover: '', action_mode: 'qrcode', qr_size: 120 },
service_qq: { icon: 'fab fa-qq', icon_dark: '', icon_light: '', text: 'QQ', desc: 'QQ 联系', link: '', hover: '', action_mode: 'link', qr_size: 120 },
service_wechat: { icon: 'fab fa-weixin', icon_dark: '', icon_light: '', text: '微信', desc: '扫码添加微信', link: '', hover: '', action_mode: 'link', qr_size: 120 },
pay_vip: { icon: 'fas fa-gem', icon_dark: '', icon_light: '', text: '会员', desc: '开通/升级会员弹窗', link: '', hover: '', action_mode: 'link', qr_size: 120 },
add: { icon: 'fas fa-plus', icon_dark: '', icon_light: '', text: '发布', desc: '发布内容', link: '', hover: '', action_mode: 'link', qr_size: 120 },
custom: { icon: 'fa fas fa-link', icon_dark: '', icon_light: '', text: '链接', desc: '', link: '', hover: '', action_mode: 'link', qr_size: 120 },
back_top: { icon: 'fa fas fa-chevron-up', icon_dark: '', icon_light: '', text: '顶部', desc: '返回顶部', link: '', hover: '', action_mode: 'link', qr_size: 120 },
theme_mode: { icon: 'fa fas fa-sun', icon_dark: '', icon_light: '', text: '主题', desc: '切换主题', link: '', hover: '', action_mode: 'link', qr_size: 120 },
qrcode: { icon: 'fa fas fa-qrcode', icon_dark: '', icon_light: '', text: '二维码', desc: '扫码继续浏览', link: '', hover: '', action_mode: 'qrcode', qr_size: 120 },
service_qq: { icon: 'fa fab fa-qq', icon_dark: '', icon_light: '', text: 'QQ', desc: 'QQ 联系', link: '', hover: '', action_mode: 'link', qr_size: 120 },
service_wechat: { icon: 'fa fab fa-weixin', icon_dark: '', icon_light: '', text: '微信', desc: '扫码添加微信', link: '', hover: '', action_mode: 'link', qr_size: 120 },
pay_vip: { icon: 'fa fas fa-gem', icon_dark: '', icon_light: '', text: '会员', desc: '开通/升级会员弹窗', link: '', hover: '', action_mode: 'link', qr_size: 120 },
add: { icon: 'fa fas fa-plus', icon_dark: '', icon_light: '', text: '发布', desc: '发布内容', link: '', hover: '', action_mode: 'link', qr_size: 120 },
}
return map[type] || map.custom
}
@@ -465,8 +465,8 @@ function handleTypeChange(type) {
if (type === 'pay_vip') {
editingItem.link = ''
editingItem.hover = ''
if (!editingItem.icon || editingItem.icon.includes('fa-diamond')) {
editingItem.icon = 'fas fa-gem'
if (!editingItem.icon || editingItem.icon.includes('fa-gem')) {
editingItem.icon = 'fa fas fa-gem'
}
}
}
@@ -484,7 +484,7 @@ function appendAddItem() {
editingItem.add_items.push({
id: `add_${Date.now()}_${editingItem.add_items.length}`,
label: '',
icon: 'fas fa-pen',
icon: 'fa fas fa-pen',
url: '',
})
}
@@ -503,9 +503,9 @@ function applyAddPreset(key) {
}
const presetFactories = {
post: () => ({ label: '写文章', icon: 'fas fa-pen-nib', url: `${siteUrl}/submit/` }),
submit: () => ({ label: '投稿页', icon: 'fas fa-paper-plane', url: `${siteUrl}/submit/` }),
profile: () => ({ label: '创作中心', icon: 'fas fa-user-edit', url: `${siteUrl}/user/` }),
post: () => ({ label: '写文章', icon: 'fa fas fa-pen', url: `${siteUrl}/submit/` }),
submit: () => ({ label: '投稿页', icon: 'fa fas fa-paper-plane', url: `${siteUrl}/submit/` }),
profile: () => ({ label: '创作中心', icon: 'fa fas fa-user', url: `${siteUrl}/user/` }),
}
const factory = presetFactories[key]
@@ -531,9 +531,9 @@ function isAddPresetExists(key) {
function getAddPresetValue(key) {
const presetFactories = {
post: () => ({ label: '写文章', icon: 'fas fa-pen-nib', url: `${siteUrl}/submit/` }),
submit: () => ({ label: '投稿页', icon: 'fas fa-paper-plane', url: `${siteUrl}/submit/` }),
profile: () => ({ label: '创作中心', icon: 'fas fa-user-edit', url: `${siteUrl}/user/` }),
post: () => ({ label: '写文章', icon: 'fa fas fa-pen', url: `${siteUrl}/submit/` }),
submit: () => ({ label: '投稿页', icon: 'fa fas fa-paper-plane', url: `${siteUrl}/submit/` }),
profile: () => ({ label: '创作中心', icon: 'fa fas fa-user', url: `${siteUrl}/user/` }),
}
return presetFactories[key] ? presetFactories[key]() : null
@@ -602,7 +602,7 @@ function saveItem() {
const item = {
id: editingItem.id || `float_${Date.now()}`,
type: editingItem.type,
icon: editingItem.type === 'theme_mode' ? 'fas fa-sun' : (editingItem.type === 'pay_vip' ? (editingItem.icon || 'fas fa-gem') : editingItem.icon),
icon: editingItem.type === 'theme_mode' ? 'fa fas fa-sun' : (editingItem.type === 'pay_vip' ? (editingItem.icon || 'fa fas fa-gem') : editingItem.icon),
icon_dark: '',
icon_light: '',
text: editingItem.text,
@@ -618,7 +618,7 @@ function saveItem() {
add_items: editingItem.type === 'add' ? editingItem.add_items.filter(subItem => subItem.label || subItem.url).map((subItem, idx) => ({
id: subItem.id || `add_${idx}`,
label: subItem.label || '',
icon: subItem.icon || 'fas fa-pen',
icon: subItem.icon || 'fa fas fa-pen',
url: subItem.url || '',
})) : [],
hover: editingItem.type === 'pay_vip' ? '' : (supportsHover.value ? (editingItem.hover || '') : ''),
@@ -672,7 +672,7 @@ async function loadSettings() {
form.items = (data.items || []).map((item, index) => ({
...createDefaultItem(),
...item,
icon: item.type === 'theme_mode' ? 'fas fa-sun' : (item.icon || ''),
icon: item.type === 'theme_mode' ? 'fa fas fa-sun' : (item.icon || ''),
color: item.color || null,
bg: item.bg || null,
icon_dark: '',
@@ -705,7 +705,7 @@ async function handleSave() {
filter_blur: form.filter_blur,
items: form.items.map((item, index) => ({
...item,
icon: item.type === 'theme_mode' ? 'fas fa-sun' : (item.icon || ''),
icon: item.type === 'theme_mode' ? 'fa fas fa-sun' : (item.icon || ''),
icon_dark: '',
icon_light: '',
color: item.color || '',