Sakurasan
7e302c51a6
立意：既是字母 O 也是汉字「一」，对应站名 ONE / 一个博客。 - favicon.svg 重画：横杠用 fill-rule=evenodd 挖成真洞而不是叠一块纸色矩形， 所以纸感 / 墨色暗端 / 后台卡片任何底色都直接透过去，不必为皮肤各出一版； SVG 内带 prefers-color-scheme，标签页深浅自动翻色 - 补 favicon-16/32.png（不认 SVG 的老浏览器）与 apple-touch-icon.png 180 （iOS 不支持 SVG 且会把透明压成黑底，故铺纸色实底）。PNG 由临时 Go 程序 按 8x8 子采样光栅化生成，生成器未入库，产物是资产 - LogoMark.vue 内联 SVG 组件：颜色跟 currentColor，尺寸由外层给 - 接入 6 处：classic 桌面左栏品牌位（原来是个排版字符 ○）、移动顶栏 brand、 时间线头像位、详情页头像位、快发盒头像位；vivid 顶栏与底部 dock 品牌标记 （右下角绿色在线点保留，它是「有人在写」的信号，不属于被替换的部分） - 顺带清理：三处只为算首字母的死代码（initial 与只服务于它的 userName）、 vivid 里一条被同特指度靠后规则完全覆盖的 .av 死规则；标记 wrapper 统一加 flex:none，否则站名一长会被压成椭圆
293 lines
7.8 KiB
Vue
293 lines
7.8 KiB
Vue
<script setup>
|
||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||
import { RouterLink, useRoute } from 'vue-router'
|
||
import { site } from '../site'
|
||
import NavBurger from './NavBurger.vue'
|
||
import LogoMark from './LogoMark.vue'
|
||
|
||
// 手机端导航。原来把 5 个链接平铺在顶栏里：375px 挤成一排小字，
|
||
// 触点只有十几像素高，320px 的屏还会折行。改成 brand + 汉堡钮，
|
||
// 点开一片下拉「纸片」（不是全屏——classic 的性格是轻，浮一层纸就够）。
|
||
// 主题切换不走这里：App.vue 的浮动 ThemeSwitcher 只在窄屏出现，职责不重。
|
||
// 桌面（>780px）整个顶栏不存在，导航走左栏。
|
||
|
||
const route = useRoute()
|
||
const open = ref(false)
|
||
const hidden = ref(false)
|
||
const burger = ref(null)
|
||
|
||
const links = [
|
||
{ to: '/', label: '首页' },
|
||
{ to: '/archive', label: '归档' },
|
||
{ to: '/tags', label: '标签' },
|
||
{ to: '/projects', label: '作品' },
|
||
{ to: '/about', label: '关于' }
|
||
]
|
||
|
||
function isOn(l) {
|
||
return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
|
||
}
|
||
|
||
// 下滑藏顶栏、上滑唤回。迟滞用「同向累计」：往复拖动时正负抵消，
|
||
// 持续同向滚动超过阈值才切换状态——之前的单事件方向判定
|
||
// （下滑 4px 就藏、回弹就现身）在阈值附近徘徊时会抽搐。
|
||
// 滚回页首（y ≤ 80）或菜单开着时强制显示 —— 纸片锚在顶栏下面，
|
||
// 顶栏藏了纸片会悬空。
|
||
let lastY = typeof window === 'undefined' ? 0 : window.scrollY
|
||
let acc = 0
|
||
function onScroll() {
|
||
const y = window.scrollY
|
||
if (open.value || y <= 80) {
|
||
hidden.value = false
|
||
lastY = y
|
||
acc = 0
|
||
return
|
||
}
|
||
const delta = y - lastY
|
||
lastY = y
|
||
if (delta === 0) return
|
||
// 同向累计；反向则从新方向重新累计（小幅往复互相抵消）
|
||
if (acc === 0 || (delta > 0) === (acc > 0)) {
|
||
acc += delta
|
||
} else {
|
||
acc = delta
|
||
}
|
||
if (!hidden.value && acc > 80 && y > 120) {
|
||
hidden.value = true
|
||
acc = 0
|
||
} else if (hidden.value && acc < -60) {
|
||
hidden.value = false
|
||
acc = 0
|
||
}
|
||
}
|
||
|
||
function toggle() {
|
||
open.value ? close() : (open.value = true)
|
||
}
|
||
function close() {
|
||
open.value = false
|
||
const b = burger.value?.$el || burger.value
|
||
nextTick(() => b?.focus?.({ preventScroll: true }))
|
||
}
|
||
function onKey(e) {
|
||
if (e.key === 'Escape') close()
|
||
}
|
||
// 点顶栏和纸片以外的地方收起（scrim 也兜了一层）
|
||
function onDocDown(e) {
|
||
if (open.value && !e.target.closest?.('.topbar')) close()
|
||
}
|
||
// 点了链接 → 路由变了 → 收起
|
||
watch(() => route.fullPath, () => { open.value = false })
|
||
// 顶栏藏没藏广播到 <html>：首页的 sticky-head（标题 + 内容切换 tabs）吸顶
|
||
// 偏移用的是 var(--topbar-h)，这里翻成 0 它就跟着顶栏一起滑上去
|
||
watch(hidden, (v) => {
|
||
document.documentElement.classList.toggle('topbar-hidden', v)
|
||
})
|
||
|
||
// 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
|
||
const mqWide = window.matchMedia('(min-width: 781px)')
|
||
function onWide(e) { if (e.matches) open.value = false }
|
||
|
||
onMounted(() => {
|
||
window.addEventListener('scroll', onScroll, { passive: true })
|
||
window.addEventListener('keydown', onKey)
|
||
document.addEventListener('pointerdown', onDocDown, true)
|
||
mqWide.addEventListener('change', onWide)
|
||
})
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('scroll', onScroll)
|
||
window.removeEventListener('keydown', onKey)
|
||
document.removeEventListener('pointerdown', onDocDown, true)
|
||
mqWide.removeEventListener('change', onWide)
|
||
document.documentElement.classList.remove('topbar-hidden')
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 窄屏时左栏收起，导航回到顶部；下滑隐藏、上滑唤回 -->
|
||
<header class="topbar" :class="{ hidden }">
|
||
<RouterLink to="/" class="brand">
|
||
<span class="mk"><LogoMark /></span>
|
||
<span>{{ site.site_title || 'ONE' }}</span>
|
||
</RouterLink>
|
||
<NavBurger
|
||
ref="burger"
|
||
class="burger"
|
||
:open="open"
|
||
aria-controls="c-menu"
|
||
:aria-label="open ? '关闭菜单' : '打开菜单'"
|
||
@toggle="toggle"
|
||
/>
|
||
|
||
<!-- 半透明幕布：垫在顶栏（z 20）之下、页面内容之上，点它收起 -->
|
||
<Transition name="c-scrim">
|
||
<div v-if="open" class="scrim" @click="close" />
|
||
</Transition>
|
||
|
||
<Transition name="c-sheet">
|
||
<div v-if="open" id="c-menu" class="sheet">
|
||
<nav class="links" aria-label="站点导航">
|
||
<RouterLink
|
||
v-for="l in links"
|
||
:key="l.to"
|
||
:to="l.to"
|
||
:class="{ on: isOn(l) }"
|
||
>{{ l.label }}</RouterLink>
|
||
</nav>
|
||
</div>
|
||
</Transition>
|
||
</header>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.topbar {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 780px) {
|
||
.topbar {
|
||
/* 三列网格：brand 落在正中列居中，汉堡钉死右列；下滑整条上移隐藏 */
|
||
display: grid;
|
||
grid-template-columns: 44px 1fr 44px;
|
||
align-items: center;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
padding: 9px 12px;
|
||
background: color-mix(in srgb, var(--paper) 80%, transparent);
|
||
backdrop-filter: blur(10px) saturate(160%);
|
||
border-bottom: 1px solid var(--line);
|
||
transition: transform 0.32s var(--ease, ease);
|
||
}
|
||
|
||
.topbar.hidden {
|
||
transform: translateY(-110%);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.topbar {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-transparency: reduce) {
|
||
.topbar {
|
||
background: var(--paper);
|
||
backdrop-filter: none;
|
||
}
|
||
}
|
||
|
||
.brand {
|
||
grid-column: 2;
|
||
justify-self: center;
|
||
font-family: var(--serif);
|
||
font-size: 17px;
|
||
color: var(--ink);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.brand .mk {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex: none;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.burger {
|
||
grid-column: 3;
|
||
justify-self: end;
|
||
}
|
||
|
||
/* 幕布在自己的顶栏层叠上下文里，z -1 垫在 brand / 汉堡 / 纸片下面，
|
||
但整个上下文（z 20）仍盖过页面内容 */
|
||
.scrim {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background: color-mix(in srgb, var(--ink) 24%, transparent);
|
||
}
|
||
|
||
/* 浮动纸片：贴着顶栏下方悬一层，和右栏卡片同一套「纸」的语言 */
|
||
.sheet {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 8px;
|
||
right: 8px;
|
||
padding: 6px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
background: color-mix(in srgb, var(--paper) 96%, transparent);
|
||
backdrop-filter: blur(20px) saturate(160%);
|
||
box-shadow: 0 18px 50px -18px rgba(28, 28, 30, 0.35);
|
||
}
|
||
|
||
@media (prefers-reduced-transparency: reduce) {
|
||
.sheet {
|
||
background: var(--paper);
|
||
backdrop-filter: none;
|
||
}
|
||
}
|
||
|
||
.links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 2px;
|
||
}
|
||
|
||
.links a {
|
||
display: block;
|
||
padding: 12px 14px;
|
||
border-radius: 10px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
color: var(--ink-soft);
|
||
transition: background-color 0.2s, color 0.2s;
|
||
}
|
||
|
||
.links a.on {
|
||
color: var(--accent);
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.links a:active {
|
||
color: var(--accent);
|
||
background: var(--accent-soft);
|
||
}
|
||
|
||
.c-sheet-enter-active {
|
||
transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1.2, 0.36, 1);
|
||
}
|
||
.c-sheet-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(-8px) scale(0.98);
|
||
}
|
||
.c-sheet-leave-active {
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
}
|
||
.c-sheet-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(-6px);
|
||
}
|
||
.c-scrim-enter-active,
|
||
.c-scrim-leave-active {
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
.c-scrim-enter-from,
|
||
.c-scrim-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.c-sheet-enter-active,
|
||
.c-sheet-leave-active,
|
||
.c-scrim-enter-active,
|
||
.c-scrim-leave-active {
|
||
transition: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|