feat: adopt naive ui and refine shell interactions

src/components/layout/AppHeader.vue

@@ -1,85 +1,191 @@
 <script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { NButton, NSpace, NTag } from 'naive-ui'
 import { useAuthStore } from '@/stores/auth'
 import { RouterLink, useRoute } from 'vue-router'
 
 const authStore = useAuthStore()
 const route = useRoute()
+const isMapRoute = computed(() => route.name === 'map')
+
+const headerHidden = ref(false)
+const headerPinnedOpen = ref(false)
+
+let lastScrollY = 0
+const HIDE_HEADER_EVENT = 'opencloud:hide-header'
+
+function showHeader(pin = false) {
+  headerHidden.value = false
+  headerPinnedOpen.value = pin
+}
+
+function hideHeader() {
+  if (window.scrollY <= 96) return
+  if (headerPinnedOpen.value) return
+  headerHidden.value = true
+}
+
+function releasePinnedHeader() {
+  headerPinnedOpen.value = false
+}
+
+function forceHideHeader() {
+  headerPinnedOpen.value = false
+  headerHidden.value = true
+}
+
+function handleScroll() {
+  const currentScrollY = window.scrollY
+  const delta = currentScrollY - lastScrollY
+
+  if (isMapRoute.value) {
+    lastScrollY = currentScrollY
+    return
+  }
+
+  if (currentScrollY <= 64) {
+    showHeader(false)
+    lastScrollY = currentScrollY
+    return
+  }
+
+  if (delta > 12) {
+    hideHeader()
+  } else if (delta < -8) {
+    showHeader(false)
+  }
+
+  lastScrollY = currentScrollY
+}
+
+onMounted(() => {
+  lastScrollY = window.scrollY
+  window.addEventListener('scroll', handleScroll, { passive: true })
+  window.addEventListener(HIDE_HEADER_EVENT, forceHideHeader as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+  window.removeEventListener(HIDE_HEADER_EVENT, forceHideHeader as EventListener)
+})
+
+function syncHeaderForRoute() {
+  headerPinnedOpen.value = false
+  headerHidden.value = false
+}
+
+watch(() => route.fullPath, () => {
+  syncHeaderForRoute()
+})
+
+watch(isMapRoute, () => {
+  syncHeaderForRoute()
+})
+
+onMounted(() => {
+  syncHeaderForRoute()
+})
 </script>
 
 <template>
-  <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex items-center justify-between h-16">
-        <RouterLink to="/" class="flex items-center gap-2">
-          <span class="text-2xl">☁️</span>
-          <span class="text-xl font-bold text-gray-900">OpenCloud</span>
-        </RouterLink>
-
-        <nav class="hidden md:flex items-center gap-6">
-          <RouterLink
-            to="/"
-            class="text-sm font-medium transition-colors"
-            :class="route.name === 'map' ? 'text-sky-600' : 'text-gray-600 hover:text-gray-900'"
-          >
-            地图
-          </RouterLink>
-          <RouterLink
-            to="/encyclopedia"
-            class="text-sm font-medium transition-colors"
-            :class="route.name === 'encyclopedia' || route.name === 'cloud-type' ? 'text-sky-600' : 'text-gray-600 hover:text-gray-900'"
-          >
-            图鉴
-          </RouterLink>
-          <RouterLink
-            to="/gallery"
-            class="text-sm font-medium transition-colors"
-            :class="route.name === 'gallery' ? 'text-sky-600' : 'text-gray-600 hover:text-gray-900'"
-          >
-            画廊
-          </RouterLink>
-        </nav>
-
-        <div class="flex items-center gap-4">
-          <RouterLink
-            v-if="authStore.isLoggedIn"
-            to="/upload"
-            class="inline-flex items-center gap-1.5 px-4 py-2 bg-sky-500 text-white text-sm font-medium rounded-lg hover:bg-sky-600 transition-colors"
-          >
-            <span>📷</span>
-            <span>上传</span>
+  <div class="sticky top-0 z-50" :class="isMapRoute ? 'h-0' : 'h-16'">
+    <header
+      class="absolute inset-x-0 top-0 border-b border-slate-200/80 bg-white/88 backdrop-blur-xl transition-transform duration-300"
+      :class="headerHidden ? '-translate-y-full' : 'translate-y-0'"
+      @mouseenter="showHeader(true)"
+      @mouseleave="releasePinnedHeader"
+    >
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+          <RouterLink to="/" class="flex items-center gap-3">
+            <div class="flex h-10 w-10 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)] text-xl shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
+              ☁️
+            </div>
+            <div>
+              <div class="text-[11px] uppercase tracking-[0.22em] text-slate-500">Live Sky Atlas</div>
+              <div class="text-lg font-bold text-slate-900">OpenCloud</div>
+            </div>
           </RouterLink>
 
-          <template v-if="authStore.isLoggedIn">
+          <nav class="hidden md:flex items-center gap-2 border border-slate-200 bg-white px-2 py-2 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)]">
             <RouterLink
-              to="/profile"
-              class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+              to="/"
+              class="px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
+              :class="route.name === 'map' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'"
             >
-              {{ authStore.profile?.username }}
-            </RouterLink>
-            <button
-              @click="authStore.logout()"
-              class="text-sm text-gray-400 hover:text-gray-600 transition-colors"
-            >
-              登出
-            </button>
-          </template>
-
-          <template v-else>
-            <RouterLink
-              to="/login"
-              class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
-            >
-              登录
+              地图
             </RouterLink>
             <RouterLink
-              to="/register"
-              class="inline-flex items-center px-4 py-2 bg-sky-500 text-white text-sm font-medium rounded-lg hover:bg-sky-600 transition-colors"
+              to="/encyclopedia"
+              class="px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
+              :class="route.name === 'encyclopedia' || route.name === 'cloud-type' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'"
             >
-              注册
+              图鉴
             </RouterLink>
-          </template>
+            <RouterLink
+              to="/gallery"
+              class="px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
+              :class="route.name === 'gallery' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'"
+            >
+              画廊
+            </RouterLink>
+          </nav>
+
+          <NSpace align="center" :size="12">
+            <RouterLink
+              v-if="authStore.isLoggedIn"
+              to="/upload"
+              class="no-underline"
+            >
+              <NButton type="primary" strong>
+                上传
+              </NButton>
+            </RouterLink>
+
+            <template v-if="authStore.isLoggedIn">
+              <RouterLink
+                to="/profile"
+                class="no-underline"
+              >
+                <NTag type="success" bordered>
+                  {{ authStore.profile?.username }}
+                </NTag>
+              </RouterLink>
+              <NButton
+                quaternary
+                @click="authStore.logout()"
+              >
+                登出
+              </NButton>
+            </template>
+
+            <template v-else>
+              <RouterLink
+                to="/login"
+                class="no-underline"
+              >
+                <NButton quaternary>登录</NButton>
+              </RouterLink>
+              <RouterLink
+                to="/register"
+                class="no-underline"
+              >
+                <NButton type="primary" strong>注册</NButton>
+              </RouterLink>
+            </template>
+          </NSpace>
         </div>
       </div>
-    </div>
-  </header>
+    </header>
+
+    <button
+      v-if="headerHidden"
+      type="button"
+      class="absolute left-1/2 top-3 flex -translate-x-1/2 items-center gap-2 border border-slate-300 bg-white/94 px-3 py-1.5 text-xs font-medium tracking-[0.16em] text-slate-700 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] backdrop-blur transition-colors hover:border-slate-900 hover:text-slate-900"
+      @click="showHeader(true)"
+    >
+      <span>▼</span>
+      <span>展开导航</span>
+    </button>
+  </div>
 </template>