<template>
  <div class="pixel-root" data-template="pixel">
    <nav class="pixel-nav">
      <router-link to="/" class="pixel-nav-logo">&gt; 年糕的博客 _</router-link>
      <div class="pixel-nav-links">
        <router-link to="/blog" class="pixel-nav-link" active-class="active">博客</router-link>
        <router-link to="/works" class="pixel-nav-link" active-class="active">作品</router-link>
        <router-link to="/columns" class="pixel-nav-link" active-class="active">专栏</router-link>
        <router-link to="/videos" class="pixel-nav-link" active-class="active">视频</router-link>
        <router-link to="/snippets" class="pixel-nav-link" active-class="active">代码</router-link>
        <router-link to="/services" class="pixel-nav-link" active-class="active">合作</router-link>
        <router-link to="/about" class="pixel-nav-link" active-class="active">关于</router-link>
      </div>
    </nav>

    <main class="pixel-main" :class="{ full: isDetail }">
      <RouterView v-if="!pageComponent" />
      <component :is="pageComponent" v-else />
    </main>

    <footer class="pixel-footer">
      <div>&gt; 年糕崽崽 · 投币继续 _</div>
      <div style="margin-top:6px;">© {{ year }} · powered by art-code</div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import './pixel.css'
import { computed } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import { pageComponents } from './pages'

const route = useRoute()
const year = new Date().getFullYear()

// 模板专属页面优先，未实现回退经典页（不白屏）
const pageComponent = computed(() => pageComponents[route.name as string] ?? null)
const isDetail = computed(() => route.name === 'blog-detail')
</script>
