15af291da0
Vue 3 模块化作品集主页，浅色极简风格，中英双语懒加载 i18n。 - 模块注册表(import.meta.glob)约定式收集项目模块，新增页签无需改导航/路由 - i18n: 中文同步注入主 chunk，英文动态 import() 拆独立 chunk，仅切换时下载 - 第一个页签 mobile-game: 展示 448/449 移动游戏毕设(概览/截图轮播/版本时间线/团队/排行榜/ML视频) - 排行榜复用 /449/449rest.php，失败优雅降级 - 构建: vite outDir=/root/html，emptyOutDir=false，产物用 mainPage/ 命名空间 - 样式: CSS 变量令牌，无 UI 框架运行时依赖
67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<script setup>
|
|
import { RouterLink } from 'vue-router'
|
|
import { useProjects } from '../composables/useProjects.js'
|
|
|
|
const { projects } = useProjects()
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="tab-nav">
|
|
<div class="container tab-nav__inner">
|
|
<RouterLink
|
|
v-for="p in projects"
|
|
:key="p.id"
|
|
:to="`/${p.id}`"
|
|
class="tab-nav__item"
|
|
active-class="is-active"
|
|
>
|
|
{{ $t(p.tabKey) }}
|
|
</RouterLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tab-nav {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
.tab-nav__inner {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
.tab-nav__inner::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.tab-nav__item {
|
|
position: relative;
|
|
padding: var(--space-md) var(--space-md);
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
transition: color var(--transition);
|
|
}
|
|
.tab-nav__item:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
.tab-nav__item.is-active {
|
|
color: var(--accent);
|
|
}
|
|
.tab-nav__item.is-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: var(--space-md);
|
|
right: var(--space-md);
|
|
bottom: -1px;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|