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
@@ -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 || '',
|
||||
|
||||
Reference in new issue
Block a user