前端

frontend/app/web-gold/src/components/TopNav.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue'
+import { useUserStore } from '@/stores/user'
+import LoginModal from '@/components/LoginModal.vue'
+import TokenInput from '@/components/TokenInput.vue'
+
+const styles = {
+  background: 'var(--color-surface)',
+  color: 'var(--color-text)'
+}
+// const route = useRoute()
+const userStore = useUserStore()
+const showLogin = ref(false)
+
+// function go(path) {
+//   router.push(path)
+// }
+</script>
+
+<template>
+  <header
+    class="header-box"
+    :style="styles"
+  >
+    <div>
+      <div class="h-[70px] flex items-center">
+        <div class="flex items-center gap-3 flex-1 pl-[30px]">
+          <!-- 左侧可放 logo 或其他内容 -->
+        </div>
+        <div class="flex items-center gap-4 pr-[35px]">
+          <!-- Token 输入（仅开发/测试环境） -->
+          <TokenInput />
+          
+          <template v-if="userStore.isLoggedIn && userStore.displayAvatar">
+            <img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
+          </template>
+          <template v-else>
+            <button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
+          </template>
+        </div>
+      </div>
+    </div>
+  </header>
+  <LoginModal v-model:open="showLogin" />
+</template>
+
+<style scoped>
+.header-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.nav-link {
+  height: 70px;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0 6px;
+  color: var(--color-text-secondary);
+  position: relative;
+  transition: color .2s ease;
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.nav-link--active {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.nav-link--active::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 10px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
+  opacity: 0.55;
+  border-radius: 2px;
+}
+
+.btn-primary-nav {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: var(--glow-primary);
+  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
+}
+
+.btn-primary-nav:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--glow-primary);
+  filter: brightness(1.03);
+}
+</style>