You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
9.0 KiB
454 lines
9.0 KiB
<script setup lang="ts">
|
|
const menuOpen = ref(false)
|
|
const fontReady = ref(false)
|
|
const navHidden = ref(false)
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const { loggedIn, user, clear, initialized } = useAuthSession()
|
|
|
|
const links: any = [
|
|
{ to: "/collect", label: "收藏" },
|
|
{ to: "/test", label: "测试" },
|
|
]
|
|
|
|
const searchQuery = ref((route.query.q as string) ?? '')
|
|
const searchFocused = ref(false)
|
|
|
|
function onSearchSubmit() {
|
|
const q = searchQuery.value.trim()
|
|
if (!q) return
|
|
router.push({ path: '/', query: { q } })
|
|
}
|
|
|
|
// When input is cleared, remove the query param
|
|
watch(searchQuery, (val) => {
|
|
if (!val.trim() && route.query.q) {
|
|
router.replace({ path: '/', query: {} })
|
|
}
|
|
})
|
|
|
|
let lastScrollY = 0
|
|
const HIDE_OFFSET = 520
|
|
|
|
function onScroll() {
|
|
const y = window.scrollY
|
|
if (y < HIDE_OFFSET) {
|
|
navHidden.value = false
|
|
} else if (y > lastScrollY + 8) {
|
|
navHidden.value = true
|
|
} else if (y < lastScrollY - 8) {
|
|
navHidden.value = false
|
|
}
|
|
lastScrollY = y
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await useGoogleFont([{ family: 'Liu Jian Mao Cao', weight: 400 }])
|
|
fontReady.value = true
|
|
window.addEventListener('scroll', onScroll, { passive: true })
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', onScroll)
|
|
})
|
|
|
|
watch(() => route.path, () => {
|
|
menuOpen.value = false
|
|
})
|
|
|
|
// Sync search input from URL
|
|
watch(() => route.query.q, (val) => {
|
|
searchQuery.value = (val as string) ?? ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="top-nav" :style="{ transform: navHidden ? 'translateY(-100%)' : 'translateY(0)' }">
|
|
<BoContainer class="nav-inner">
|
|
<NuxtLink to="/" class="nav-logo" :class="{ ready: fontReady }">
|
|
Dash
|
|
</NuxtLink>
|
|
|
|
<form
|
|
class="nav-search"
|
|
:class="{ focused: searchFocused }"
|
|
@submit.prevent="onSearchSubmit"
|
|
>
|
|
<Icon name="lucide:search" class="search-icon" />
|
|
<input
|
|
v-model="searchQuery"
|
|
type="search"
|
|
class="search-input"
|
|
placeholder="搜索卡片"
|
|
@focus="searchFocused = true"
|
|
@blur="searchFocused = false"
|
|
>
|
|
<kbd v-if="!searchFocused && !searchQuery" class="search-kbd">⌘ K</kbd>
|
|
</form>
|
|
|
|
<ul class="nav-links" :class="{ open: menuOpen }">
|
|
<li v-for="link in links" :key="link.to">
|
|
<NuxtLink
|
|
:to="link.to"
|
|
class="nav-link"
|
|
active-class="active"
|
|
>
|
|
{{ link.label }}
|
|
</NuxtLink>
|
|
</li>
|
|
<li v-if="!loggedIn && initialized" class="mobile-auth">
|
|
<NuxtLink to="/auth/login" class="auth-link">登录</NuxtLink>
|
|
<NuxtLink to="/auth/register" class="auth-btn">注册</NuxtLink>
|
|
</li>
|
|
<li v-else-if="loggedIn && initialized" class="mobile-auth">
|
|
<NuxtLink class="auth-link">{{ user?.username }}</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
|
|
<div v-if="!loggedIn && initialized" class="nav-auth">
|
|
<NuxtLink to="/auth/login" class="auth-link">登录</NuxtLink>
|
|
<NuxtLink to="/auth/register" class="auth-btn">注册</NuxtLink>
|
|
</div>
|
|
<div v-else-if="loggedIn && initialized" class="nav-auth">
|
|
<NuxtLink to="/admin/dashboard" class="auth-btn">管理</NuxtLink>
|
|
<span class="auth-link" @click="clear()">登出</span>
|
|
</div>
|
|
|
|
<button
|
|
class="nav-toggle"
|
|
:class="{ open: menuOpen }"
|
|
aria-label="菜单"
|
|
@click="menuOpen = !menuOpen"
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</button>
|
|
</BoContainer>
|
|
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="menuOpen"
|
|
class="nav-overlay"
|
|
@click="menuOpen = false"
|
|
/>
|
|
</Teleport>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.top-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
height: 64px;
|
|
background: rgba(250, 249, 245, 0.72);
|
|
backdrop-filter: blur(16px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(200%);
|
|
border-bottom: 1px solid rgba(230, 223, 216, 0.6);
|
|
transition: transform 0.35s ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
.nav-inner {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* ── Logo ── */
|
|
|
|
.nav-logo {
|
|
font-family: 'Liu Jian Mao Cao', cursive;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-logo.ready {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ── Search ── */
|
|
|
|
.nav-search {
|
|
position: relative;
|
|
flex: 1;
|
|
max-width: 520px;
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 9999px;
|
|
padding: 0 14px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.nav-search.focused {
|
|
border-color: var(--color-primary);
|
|
background: var(--color-canvas);
|
|
box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.12);
|
|
}
|
|
|
|
.search-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--color-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
padding: 0 10px;
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: var(--color-muted-soft);
|
|
}
|
|
|
|
.search-input::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.search-kbd {
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--color-muted);
|
|
background: var(--color-surface-card);
|
|
border: 1px solid var(--color-hairline);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Desktop links ── */
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nav-link {
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.nav-link.active {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ── Auth buttons ── */
|
|
|
|
.nav-auth {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mobile-auth {
|
|
display: none;
|
|
}
|
|
|
|
.auth-link {
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
padding: 6px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.auth-link:hover {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.auth-btn {
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-on-primary);
|
|
background: var(--color-primary);
|
|
text-decoration: none;
|
|
padding: 7px 18px;
|
|
border-radius: 9999px;
|
|
transition: background 0.2s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.auth-btn:hover {
|
|
background: var(--color-primary-active);
|
|
}
|
|
|
|
.auth-btn:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
/* ── Hamburger ── */
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
}
|
|
|
|
.nav-toggle span {
|
|
display: block;
|
|
height: 2px;
|
|
background: var(--color-ink);
|
|
border-radius: 1px;
|
|
transition: transform 0.25s ease, opacity 0.25s ease;
|
|
}
|
|
|
|
.nav-toggle.open span:nth-child(1) {
|
|
transform: translateY(7px) rotate(45deg);
|
|
}
|
|
|
|
.nav-toggle.open span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.nav-toggle.open span:nth-child(3) {
|
|
transform: translateY(-7px) rotate(-45deg);
|
|
}
|
|
|
|
/* ── Overlay ── */
|
|
|
|
.nav-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 99;
|
|
background: rgba(20, 20, 19, 0.3);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* ── Tablet ── */
|
|
|
|
@media (max-width: 1024px) {
|
|
.nav-links {
|
|
gap: 18px;
|
|
}
|
|
|
|
.nav-search {
|
|
max-width: 360px;
|
|
}
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-inner {
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-search {
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.search-kbd {
|
|
display: none;
|
|
}
|
|
|
|
.nav-links {
|
|
position: fixed;
|
|
top: 64px;
|
|
right: 0;
|
|
z-index: 100;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
width: 240px;
|
|
background: var(--color-canvas);
|
|
border-left: 1px solid var(--color-hairline);
|
|
border-bottom: 1px solid var(--color-hairline);
|
|
border-radius: 0 0 12px 0;
|
|
padding: 8px 0;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.nav-links.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
padding: 14px 24px;
|
|
font-size: 15px;
|
|
border-bottom: 1px solid var(--color-hairline-soft);
|
|
}
|
|
|
|
.nav-link:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.mobile-auth {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 14px 24px;
|
|
border-bottom: 1px solid var(--color-hairline-soft);
|
|
}
|
|
|
|
.mobile-auth .auth-link {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.mobile-auth .auth-btn {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-auth {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|