feat: enhance cloud image management

src/components/layout/AppHeader.vue

@@ -88,7 +88,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sticky top-0 z-50" :class="isMapRoute ? 'h-0' : 'h-16'">
+  <div class="sticky top-0 z-50" :class="isMapRoute ? 'h-0' : 'h-28 md: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'"
@@ -96,7 +96,7 @@ onMounted(() => {
       @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">
+        <div class="flex h-16 items-center justify-between">
           <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)]">
               ☁️
@@ -107,7 +107,7 @@ onMounted(() => {
             </div>
           </RouterLink>
 
-          <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)]">
+          <nav class="hidden 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)] md:flex">
             <RouterLink
               to="/"
               class="px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
@@ -131,13 +131,13 @@ onMounted(() => {
             </RouterLink>
           </nav>
 
-          <NSpace align="center" :size="12">
+          <NSpace align="center" :size="8" class="shrink-0 md:[&_.n-button]:px-4">
             <RouterLink
               v-if="authStore.isLoggedIn"
               to="/upload"
               class="no-underline"
             >
-              <NButton type="primary" strong>
+              <NButton type="primary" strong size="small" class="md:!h-10 md:!px-4 md:!text-sm">
                 上传
               </NButton>
             </RouterLink>
@@ -147,12 +147,14 @@ onMounted(() => {
                 to="/profile"
                 class="no-underline"
               >
-                <NTag type="success" bordered>
+                <NTag type="success" bordered size="small" class="max-w-[7rem] truncate md:max-w-none">
                   {{ authStore.profile?.username }}
                 </NTag>
               </RouterLink>
               <NButton
                 quaternary
+                size="small"
+                class="md:!h-10 md:!px-4 md:!text-sm"
                 @click="authStore.logout()"
               >
                 登出
@@ -164,17 +166,49 @@ onMounted(() => {
                 to="/login"
                 class="no-underline"
               >
-                <NButton quaternary>登录</NButton>
+                <NButton quaternary size="small" class="md:!h-10 md:!px-4 md:!text-sm">登录</NButton>
               </RouterLink>
               <RouterLink
                 to="/register"
                 class="no-underline"
               >
-                <NButton type="primary" strong>注册</NButton>
+                <NButton type="primary" strong size="small" class="md:!h-10 md:!px-4 md:!text-sm">注册</NButton>
               </RouterLink>
             </template>
           </NSpace>
         </div>
+
+        <nav class="flex items-center gap-2 overflow-x-auto border-t border-slate-200/80 py-2 md:hidden">
+          <RouterLink
+            to="/"
+            class="shrink-0 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'"
+          >
+            地图
+          </RouterLink>
+          <RouterLink
+            to="/encyclopedia"
+            class="shrink-0 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>
+          <RouterLink
+            to="/gallery"
+            class="shrink-0 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>
+          <RouterLink
+            v-if="authStore.isLoggedIn"
+            to="/profile"
+            class="shrink-0 px-3 py-2 text-sm font-medium tracking-[0.12em] uppercase transition-colors"
+            :class="route.name === 'profile' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'"
+          >
+            主页
+          </RouterLink>
+        </nav>
       </div>
     </header>