lq/nl-blogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码格式修复

Browse Source
This commit is contained in:
李琦
2026-01-20 12:02:01 +08:00
parent 4aa757082b
commit 05b315013c
7 changed files with 308 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/components/Header.vue
View File

@@ -6,6 +6,7 @@
</div>
<nav class="hidden md:flex items-center gap-10">
<button
v-if="visibleMenus.includes('home')"
@click="goTo('/')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'home' }"
@@ -14,6 +15,7 @@
首页
</button>
<button
v-if="visibleMenus.includes('blog')"
@click="goTo('/blog')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'blog' }"
@@ -22,6 +24,7 @@
思考
</button>
<button
v-if="visibleMenus.includes('columns')"
@click="goTo('/columns')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'columns' }"
@@ -30,6 +33,7 @@
专栏
</button>
<button
v-if="visibleMenus.includes('works')"
@click="goTo('/works')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'works' }"
@@ -38,6 +42,7 @@
作品
</button>
<button
v-if="visibleMenus.includes('snippets')"
@click="goTo('/snippets')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'snippets' }"
@@ -46,6 +51,7 @@
代码
</button>
<button
v-if="visibleMenus.includes('about')"
@click="goTo('/about')"
class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
:class="{ 'text-white after:w-full': activeNav === 'about' }"
@@ -59,7 +65,11 @@
<a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
</a>
<button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
<button
v-if="visibleMenus.includes('services')"
@click="goTo('/services')"
class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full"
>
合作
</button>
</div>
@@ -79,6 +89,7 @@ const router = useRouter()
const route = useRoute()
const activeNav = ref('home')
const siteTitle = ref<string>('')
const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services']) // 默认显示所有菜单
const toggleMobileMenu = () => {
const menu = document.getElementById('mobile-menu')
@@ -123,6 +134,20 @@ const loadSiteSettings = async () => {
if (settings.site_title) {
siteTitle.value = settings.site_title
}
// 获取菜单显示配置
if (settings.visible_menus) {
try {
// 尝试解析JSON格式
const parsed = JSON.parse(settings.visible_menus)
if (Array.isArray(parsed)) {
visibleMenus.value = parsed
}
} catch {
// 如果不是JSON，按逗号分隔
visibleMenus.value = settings.visible_menus.split(',').map((m: string) => m.trim()).filter((m: string) => m)
}
}
} catch (error) {
console.error('Failed to load site settings:', error)
// 使用默认值，不抛出错误

43
client/src/components/MobileMenu.vue
View File

@@ -1,20 +1,46 @@
<template>
<div id="mobile-menu" class="fixed inset-0 z-40 bg-art-bg/95 backdrop-blur-xl flex flex-col items-center justify-center space-y-8 transition-all duration-300 menu-closed md:hidden">
<button @click="toggleMobileMenu" class="absolute top-6 right-6 text-white"><i data-lucide="x" class="w-8 h-8"></i></button>
<a @click="navigate('/')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">首页</a>
<a @click="navigate('/blog')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">思考</a>
<a @click="navigate('/works')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">作品</a>
<a @click="navigate('/snippets')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">代码</a>
<a @click="navigate('/about')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">关于</a>
<a v-if="visibleMenus.includes('home')" @click="navigate('/')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">首页</a>
<a v-if="visibleMenus.includes('blog')" @click="navigate('/blog')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">思考</a>
<a v-if="visibleMenus.includes('columns')" @click="navigate('/columns')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">专栏</a>
<a v-if="visibleMenus.includes('works')" @click="navigate('/works')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">作品</a>
<a v-if="visibleMenus.includes('snippets')" @click="navigate('/snippets')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">代码</a>
<a v-if="visibleMenus.includes('about')" @click="navigate('/about')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">关于</a>
<a v-if="visibleMenus.includes('services')" @click="navigate('/services')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">合作</a>
<a @click="openAdmin" class="font-mono text-sm text-art-muted mt-8">管理入口</a>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted, onUpdated } from 'vue'
import { onMounted, onUpdated, ref } from 'vue'
import { getPublicSettings } from '../services/api'
const router = useRouter()
const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'snippets', 'about', 'services']) // 默认显示所有菜单
// 获取菜单显示配置
const loadMenuSettings = async () => {
try {
const settings = await getPublicSettings()
if (settings.visible_menus) {
try {
// 尝试解析JSON格式
const parsed = JSON.parse(settings.visible_menus)
if (Array.isArray(parsed)) {
visibleMenus.value = parsed
}
} catch {
// 如果不是JSON，按逗号分隔
visibleMenus.value = settings.visible_menus.split(',').map((m: string) => m.trim()).filter((m: string) => m)
}
}
} catch (error) {
console.error('Failed to load menu settings:', error)
// 使用默认值
}
}
const toggleMobileMenu = () => {
const menu = document.getElementById('mobile-menu')
@@ -40,6 +66,9 @@ const refreshIcons = () => {
}
}
onMounted(refreshIcons)
onMounted(() => {
refreshIcons()
loadMenuSettings()
})
onUpdated(refreshIcons)
</script>