feat: scaffold infrastructure - router, pinia, tailwind, amap, auth store, page placeholders

2026-05-20 23:31:55 +08:00
parent eb183448b4
commit c49ac7a42e
29 changed files with 1624 additions and 432 deletions
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth'
+import { RouterLink, useRoute } from 'vue-router'
+
+const authStore = useAuthStore()
+const route = useRoute()
+</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>
+          </RouterLink>
+
+          <template v-if="authStore.isLoggedIn">
+            <RouterLink
+              to="/profile"
+              class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              {{ 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"
+            >
+              注册
+            </RouterLink>
+          </template>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>