Files
ONE/frontend/src/components/TopBar.vue
T
Sakurasan 3238175ef0 作品展示页:前端展示 + 后台增删改查
- 新增 projects 表与迁移(唯一 slug 索引)
- 后端:公开 GET /api/projects,后台 GET/POST/PUT/DELETE /api/admin/projects
- 前端:/projects 双虚线边框卡片页(参考 diygod.cc/projects),后台管理页
- 左栏/手机顶栏/后台侧栏均加「作品」入口
- 补充项目 CRUD 单元测试与后台鉴权拦截测试
2026-09-22 01:47:59 +08:00

62 lines
1.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script setup>
import { site } from '../site'
</script>
<template>
<!-- 窄屏时左栏收起,导航回到顶部 -->
<header class="topbar">
<RouterLink to="/" class="brand">{{ site.site_title || 'ONE' }}</RouterLink>
<nav class="links">
<RouterLink to="/">首页</RouterLink>
<RouterLink to="/archive">归档</RouterLink>
<RouterLink to="/tags">标签</RouterLink>
<RouterLink to="/projects">作品</RouterLink>
<RouterLink to="/about">关于</RouterLink>
</nav>
</header>
</template>
<style scoped>
.topbar {
display: none;
}
@media (max-width: 780px) {
.topbar {
display: flex;
align-items: baseline;
gap: 14px;
position: sticky;
top: 0;
z-index: 20;
padding: 10px 18px;
background: color-mix(in srgb, var(--paper) 80%, transparent);
backdrop-filter: blur(10px) saturate(160%);
border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
.topbar {
background: var(--paper);
backdrop-filter: none;
}
}
.brand {
font-family: var(--serif);
font-size: 17px;
}
.links {
display: flex;
gap: 12px;
font-size: 13px;
color: var(--muted);
}
.links a.router-link-exact-active {
color: var(--accent);
}
}
</style>