From 73abf21dbf036a740f2cfbbdcb596b6464828ff7 Mon Sep 17 00:00:00 2001
From: "1204992313@qq.com" <1204992313@qq.com>
Date: Sun, 17 Aug 2025 18:54:51 +0800
Subject: [PATCH] =?UTF-8?q?[dev]=20refactor(ui):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=B8=83=E5=B1=80=E5=92=8C=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将头部导航栏逻辑提取为独立组件 AppHeader
优化应用布局结构，修复滚动和高度问题
调整 CSS 样式以改善用户体验
---
 prompto-lab-ui/src/App.vue                  | 768 ++------------------
 prompto-lab-ui/src/assets/base.css          |   2 +-
 prompto-lab-ui/src/assets/main.css          |   2 +-
 prompto-lab-ui/src/components/AppHeader.vue | 741 +++++++++++++++++++
 prompto-lab-ui/src/components/ChatMain.vue  |   6 +-
 prompto-lab-ui/src/views/HomeView.vue       |   1 -
 6 files changed, 797 insertions(+), 723 deletions(-)
 create mode 100644 prompto-lab-ui/src/components/AppHeader.vue

diff --git a/prompto-lab-ui/src/App.vue b/prompto-lab-ui/src/App.vue
index 4c6eb15..4a75f6e 100644
--- a/prompto-lab-ui/src/App.vue
+++ b/prompto-lab-ui/src/App.vue
@@ -1,199 +1,42 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
-import { useRoute, useRouter } from 'vue-router'
-import { computed, ref, onMounted, watch, onUnmounted } from 'vue'
-import { userApi } from '@/services/userApi'
-import { toast } from '@/utils/toast'
+import { RouterView } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { ref,onMounted,onUnmounted,computed } from 'vue'
+import AppHeader from '@/components/AppHeader.vue'
 
 const route = useRoute()
-const router = useRouter()
-
-// 用户信息
-interface UserInfo {
-  nickname?: string
-  email?: string
-  avatar?: string
-}
-
-const userInfo = ref<UserInfo | null>(null)
-const token = ref<string | null>(null)
-
-// 登录状态判断
-const isLoggedIn = computed(() => {
-  return !!token.value && !!userInfo.value
-})
-
+const appRef = ref<HTMLDivElement>()
 // 判断是否在工作区页面，如果是则隐藏导航
 const isWorkspacePage = computed(() => {
   return route.path.startsWith('/workspace/')
 })
+const isScrolled = ref(false)
+const headerHeight = 88 // AppHeader的高度
 
-// 获取用户信息
-const getUserInfo = () => {
-  const storedToken = localStorage.getItem('token')
-  token.value = storedToken
-
-  const storedUserInfo = localStorage.getItem('userInfo')
-  if (storedUserInfo) {
-    try {
-      userInfo.value = JSON.parse(storedUserInfo)
-    } catch {
-      userInfo.value = null
-      localStorage.removeItem('userInfo')
-    }
-  } else {
-    userInfo.value = null
-  }
-}
-
-// 监听路由变化，重新检查登录状态
-watch(() => route.path, () => {
-  getUserInfo()
-})
-
-// 监听 localStorage 变化
-const handleStorageChange = (e: StorageEvent) => {
-  if (e.key === 'token' || e.key === 'userInfo') {
-    getUserInfo()
-  }
-}
-
-// 退出登录
-const handleLogout = async () => {
-  try {
-    await userApi.logout()
-    localStorage.removeItem('token')
-    localStorage.removeItem('userInfo')
-    token.value = null
-    userInfo.value = null
-    toast.success({
-      title: '退出成功',
-      message: '您已成功退出登录'
-    })
-    router.push('/auth')
-  } catch {
-    localStorage.removeItem('token')
-    localStorage.removeItem('userInfo')
-    token.value = null
-    userInfo.value = null
-    toast.warning({
-      title: '退出登录',
-      message: '已清除本地登录信息'
-    })
-    router.push('/auth')
-  }
+// 滚动监听函数
+const handleScroll = () => {
+  const scrollTop = appRef.value?.scrollTop || 0
+  isScrolled.value = scrollTop > headerHeight
 }
 
-// 跳转到登录页
-const goToLogin = () => {
-  router.push('/auth')
-}
-
-// 组件挂载时获取用户信息
+// 组件挂载时添加滚动监听
 onMounted(() => {
-  getUserInfo()
-  window.addEventListener('storage', handleStorageChange)
+  appRef.value?.addEventListener('scroll', handleScroll, { passive: true })
 })
 
-// 组件卸载时移除监听器
+// 组件卸载时移除滚动监听
 onUnmounted(() => {
-  window.removeEventListener('storage', handleStorageChange)
+  appRef.value?.removeEventListener('scroll', handleScroll)
 })
 </script>
 
 <template>
-  <div class="app">
-    <!-- 顶部导航栏 - 重新设计的奢华风格 -->
-    <header v-if="!isWorkspacePage" class="app-header">
-      <div class="header-glass-effect"></div>
-      <div class="header-content">
-        <!-- Logo 区域 - 更精致的设计 -->
-        <div class="logo-section">
-          <RouterLink to="/" class="logo-link">
-            <div class="logo">
-              <div class="logo-icon-wrapper">
-                <div class="logo-inner-glow"></div>
-                <span class="logo-icon">◈</span>
-              </div>
-              <div class="logo-text-wrapper">
-                <span class="logo-text">PromptoLab</span>
-                <span class="logo-subtitle">AI Engineering</span>
-              </div>
-            </div>
-          </RouterLink>
-        </div>
-
-        <!-- 导航菜单 - 更现代的设计 -->
-        <nav class="main-nav">
-          <div class="nav-background"></div>
-          <RouterLink to="/" class="nav-link">
-            <div class="nav-content">
-              <div class="nav-icon-wrapper">
-                <span class="nav-icon">⬢</span>
-              </div>
-              <span class="nav-text">首页</span>
-            </div>
-            <div class="nav-glow"></div>
-          </RouterLink>
-          <RouterLink to="/prompt-builder" class="nav-link">
-            <div class="nav-content">
-              <div class="nav-icon-wrapper">
-                <span class="nav-icon">⬡</span>
-              </div>
-              <span class="nav-text">构建器</span>
-            </div>
-            <div class="nav-glow"></div>
-          </RouterLink>
-          <RouterLink to="/settings" class="nav-link">
-            <div class="nav-content">
-              <div class="nav-icon-wrapper">
-                <span class="nav-icon">⚙</span>
-              </div>
-              <span class="nav-text">设置</span>
-            </div>
-            <div class="nav-glow"></div>
-          </RouterLink>
-        </nav>
-
-        <!-- 右侧操作区域 - 更精致的设计 -->
-        <div class="actions-section">
-          <!-- 状态指示器 -->
-          <div class="status-indicator">
-            <div class="status-dot"></div>
-            <span class="status-text">在线</span>
-          </div>
-          
-          <!-- 用户信息 -->
-          <div v-if="isLoggedIn" class="user-info">
-            <div class="user-avatar">
-              <img v-if="userInfo?.avatar" :src="userInfo.avatar" :alt="userInfo.nickname" />
-              <div v-else class="avatar-placeholder">
-                {{ userInfo?.nickname?.charAt(0) || userInfo?.email?.charAt(0) || 'U' }}
-              </div>
-              <div class="avatar-ring"></div>
-            </div>
-            <div class="user-details">
-              <div class="user-name">{{ userInfo?.nickname || userInfo?.email || '用户' }}</div>
-              <div class="user-status">专业版用户</div>
-            </div>
-            <div class="action-btn-wrapper">
-              <button @click="handleLogout" class="action-btn logout-btn" title="退出登录">
-                <span class="btn-icon">⏻</span>
-                <div class="btn-ripple"></div>
-              </button>
-            </div>
-          </div>
-
-          <!-- 登录按钮 -->
-          <button v-else @click="goToLogin" class="login-btn">
-            <div class="btn-background"></div>
-            <span class="btn-text">登录</span>
-            <div class="btn-icon">→</div>
-          </button>
-        </div>
-      </div>
-    </header>
+  <div class="app" ref="appRef">
+    <!-- 顶部导航栏组件 -->
+    <AppHeader v-if="isScrolled && !isWorkspacePage" 
+      class="scroll-header"/>
 
+    <AppHeader />
     <!-- 主要内容区域 -->
     <main class="app-main" :class="{ 'fullscreen': isWorkspacePage }">
       <RouterView />
@@ -203,7 +46,8 @@ onUnmounted(() => {
 
 <style scoped>
 .app {
-  min-height: 100vh;
+  height: 100vh;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
@@ -211,500 +55,13 @@ onUnmounted(() => {
   font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-/* 顶部导航栏 - 重新设计的奢华风格 */
-.app-header {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  background: rgba(8, 8, 8, 0.85);
-  backdrop-filter: blur(24px) saturate(180%);
-  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
-  box-shadow: 
-    0 1px 0 rgba(212, 175, 55, 0.1),
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(255, 255, 255, 0.02);
-  position: relative;
-  overflow: hidden;
-}
-
-.header-glass-effect {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: 
-    linear-gradient(135deg, 
-      rgba(212, 175, 55, 0.03) 0%, 
-      transparent 30%, 
-      transparent 70%, 
-      rgba(212, 175, 55, 0.03) 100%
-    );
-  animation: header-shimmer 8s ease-in-out infinite;
-}
-
-@keyframes header-shimmer {
-  0%, 100% { opacity: 0.5; }
-  50% { opacity: 1; }
-}
-
-.header-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 88px;
-  position: relative;
-  z-index: 2;
-}
-
-/* Logo 区域 - 更精致的设计 */
-.logo-section {
-  flex-shrink: 0;
-}
-
-.logo-link {
-  text-decoration: none;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  display: block;
-}
-
-.logo-link:hover {
-  transform: translateY(-2px);
-  filter: drop-shadow(0 8px 24px rgba(212, 175, 55, 0.4));
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.logo-icon-wrapper {
-  width: 52px;
-  height: 52px;
-  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 
-    0 8px 24px rgba(212, 175, 55, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-}
-
-.logo-icon-wrapper:hover {
-  transform: scale(1.05) rotate(5deg);
-  box-shadow: 
-    0 12px 32px rgba(212, 175, 55, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4);
-}
-
-.logo-inner-glow {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
-  border-radius: 12px;
-  pointer-events: none;
-}
-
-.logo-icon {
-  font-size: 28px;
-  color: #1a1a1a;
-  z-index: 2;
-  position: relative;
-  font-weight: 700;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.logo-text-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.logo-text {
-  font-size: 32px;
-  font-weight: 800;
-  background: linear-gradient(135deg, #ffffff 0%, #d4af37 50%, #f4d03f 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: -1px;
-  line-height: 1;
-}
-
-.logo-subtitle {
-  font-size: 11px;
-  color: #888;
-  font-weight: 500;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  margin-left: 2px;
-}
-
-/* 导航菜单 - 更现代的设计 */
-.main-nav {
-  display: flex;
-  gap: 4px;
-  background: rgba(15, 15, 15, 0.9);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  border-radius: 20px;
-  padding: 6px;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  position: relative;
-}
-
-.nav-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
-  border-radius: 20px;
-  pointer-events: none;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #b8b8b8;
-  border-radius: 16px;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  font-weight: 500;
-  font-size: 14px;
-  position: relative;
-  overflow: hidden;
-  min-width: 120px;
-  padding: 14px 20px;
-  border: 1px solid transparent;
-}
-
-.nav-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  position: relative;
-  z-index: 2;
-}
-
-.nav-link:hover {
-  background: rgba(212, 175, 55, 0.08);
-  border-color: rgba(212, 175, 55, 0.25);
-  color: #d4af37;
-  transform: translateY(-1px);
-  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.15);
-}
-
-.nav-link.router-link-active {
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(244, 208, 63, 0.08));
-  border-color: rgba(212, 175, 55, 0.4);
-  color: #d4af37;
-  box-shadow: 
-    0 8px 24px rgba(212, 175, 55, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-}
-
-.nav-glow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
-  border-radius: 16px;
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-
-.nav-link:hover .nav-glow,
-.nav-link.router-link-active .nav-glow {
-  opacity: 1;
-}
-
-.nav-icon-wrapper {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: rgba(212, 175, 55, 0.1);
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.nav-link:hover .nav-icon-wrapper,
-.nav-link.router-link-active .nav-icon-wrapper {
-  background: rgba(212, 175, 55, 0.2);
-  border-color: rgba(212, 175, 55, 0.4);
-  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
-  transform: scale(1.1);
-}
-
-.nav-icon {
-  font-size: 14px;
-  color: #d4af37;
-  font-weight: 600;
-}
-
-.nav-text {
-  font-weight: 600;
-  letter-spacing: 0.3px;
-}
-
-/* 右侧操作区域 - 更精致的设计 */
-.actions-section {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  flex-shrink: 0;
-}
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: rgba(15, 15, 15, 0.8);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  background: #22c55e;
-  border-radius: 50%;
-  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.status-text {
-  font-size: 12px;
-  color: #22c55e;
-  font-weight: 500;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 20px;
-  background: rgba(15, 15, 15, 0.9);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(212, 175, 55, 0.2);
-  border-radius: 16px;
-  box-shadow: 
-    0 8px 24px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.user-info:hover {
-  border-color: rgba(212, 175, 55, 0.4);
-  box-shadow: 
-    0 12px 32px rgba(0, 0, 0, 0.4),
-    0 0 0 1px rgba(212, 175, 55, 0.15);
-  transform: translateY(-2px);
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #d4af37, #f4d03f);
-  border: 2px solid rgba(212, 175, 55, 0.4);
-  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
-  position: relative;
-}
-
-.user-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatar-placeholder {
-  color: #1a1a1a;
-  font-weight: 700;
-  font-size: 16px;
-}
-
-.avatar-ring {
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
-  border: 2px solid transparent;
-  border-radius: 50%;
-  background: linear-gradient(45deg, #d4af37, transparent, #f4d03f);
-  background-clip: border-box;
-  animation: rotate 3s linear infinite;
-}
-
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.user-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #e8e8e8;
-}
-
-.user-status {
-  font-size: 11px;
-  color: #d4af37;
-  font-weight: 500;
-}
-
-.action-btn-wrapper {
-  position: relative;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: rgba(15, 15, 15, 0.9);
-  border: 1px solid rgba(212, 175, 55, 0.3);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: #b8b8b8;
-  font-size: 18px;
-  position: relative;
-  overflow: hidden;
-}
-
-.action-btn:hover {
-  border-color: rgba(212, 175, 55, 0.5);
-  color: #d4af37;
-  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
-  transform: scale(1.05);
-}
-
-.btn-ripple {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: rgba(212, 175, 55, 0.3);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.3s ease, height 0.3s ease;
-}
-
-.action-btn:active .btn-ripple {
-  width: 100px;
-  height: 100px;
-}
-
-.logout-btn:hover {
-  border-color: rgba(239, 68, 68, 0.5);
-  color: #ef4444;
-  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
-}
-
-.login-btn {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 28px;
-  background: transparent;
-  border: 1px solid rgba(212, 175, 55, 0.4);
-  border-radius: 16px;
-  color: #d4af37;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  backdrop-filter: blur(10px);
-}
-
-.login-btn:hover {
-  background: linear-gradient(135deg, #d4af37, #f4d03f);
-  color: #1a1a1a;
-  border-color: #d4af37;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
-}
-
-.btn-background {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
-  transition: left 0.6s ease;
-}
-
-.login-btn:hover .btn-background {
-  left: 100%;
-}
-
-.btn-text {
-  position: relative;
-  z-index: 2;
-}
-
-.btn-icon {
-  position: relative;
-  z-index: 2;
-  font-size: 16px;
-  transition: transform 0.3s ease;
-}
-
-.login-btn:hover .btn-icon {
-  transform: translateX(4px);
-}
-
 /* 主要内容区域 */
 .app-main {
   flex: 1;
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
   margin: 0;
   border-radius: 0;
-  overflow: hidden;
+  min-height: 0; /* 重要：允许flex子项收缩 */
 }
 
 .app-main.fullscreen {
@@ -712,62 +69,39 @@ onUnmounted(() => {
   margin: 0;
   border-radius: 0;
 }
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-  .header-content {
-    padding: 0 24px;
-  }
-  
-  .user-details {
-    display: none;
-  }
-  
-  .status-indicator {
-    display: none;
-  }
+.scroll-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  background: rgba(8, 8, 8, 0.1);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
+  box-shadow: 
+    0 2px 20px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  animation: slideDown 0.3s ease-out;
 }
 
-@media (max-width: 768px) {
-  .header-content {
-    padding: 0 20px;
-    height: 76px;
-  }
-  
-  .logo-text-wrapper {
-    display: none;
-  }
-  
-  .main-nav {
-    gap: 2px;
-    padding: 4px;
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
   }
-  
-  .nav-link {
-    padding: 12px 16px;
-    font-size: 12px;
-    min-width: 80px;
-  }
-  
-  .nav-text {
-    display: none;
+  to {
+    transform: translateY(0);
+    opacity: 1;
   }
 }
 
-@media (max-width: 480px) {
-  .header-content {
-    padding: 0 16px;
-    gap: 12px;
-  }
-  
-  .logo-icon-wrapper {
-    width: 44px;
-    height: 44px;
-  }
-  
-  .nav-link {
-    padding: 10px 12px;
-    min-width: 60px;
-  }
+.scroll-header-content {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
 }
 </style>
diff --git a/prompto-lab-ui/src/assets/base.css b/prompto-lab-ui/src/assets/base.css
index 8816868..4b9393f 100644
--- a/prompto-lab-ui/src/assets/base.css
+++ b/prompto-lab-ui/src/assets/base.css
@@ -59,7 +59,7 @@
 }
 
 body {
-  min-height: 100vh;
+  height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition:
diff --git a/prompto-lab-ui/src/assets/main.css b/prompto-lab-ui/src/assets/main.css
index 003af53..900f467 100644
--- a/prompto-lab-ui/src/assets/main.css
+++ b/prompto-lab-ui/src/assets/main.css
@@ -17,7 +17,7 @@ body {
 }
 
 #app {
-  min-height: 100vh;
+  height: 100vh;
   width: 100%;
 }
 
diff --git a/prompto-lab-ui/src/components/AppHeader.vue b/prompto-lab-ui/src/components/AppHeader.vue
new file mode 100644
index 0000000..e7f685e
--- /dev/null
+++ b/prompto-lab-ui/src/components/AppHeader.vue
@@ -0,0 +1,741 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { computed, ref, onMounted, watch, onUnmounted } from 'vue'
+import { userApi } from '@/services/userApi'
+import { toast } from '@/utils/toast'
+
+const route = useRoute()
+const router = useRouter()
+
+// 用户信息
+interface UserInfo {
+  nickname?: string
+  email?: string
+  avatar?: string
+}
+
+const userInfo = ref<UserInfo | null>(null)
+const token = ref<string | null>(null)
+
+// 登录状态判断
+const isLoggedIn = computed(() => {
+  return !!token.value && !!userInfo.value
+})
+
+// 判断是否在工作区页面，如果是则隐藏导航
+const isWorkspacePage = computed(() => {
+  return route.path.startsWith('/workspace/')
+})
+
+// 获取用户信息
+const getUserInfo = () => {
+  const storedToken = localStorage.getItem('token')
+  token.value = storedToken
+
+  const storedUserInfo = localStorage.getItem('userInfo')
+  if (storedUserInfo) {
+    try {
+      userInfo.value = JSON.parse(storedUserInfo)
+    } catch {
+      userInfo.value = null
+      localStorage.removeItem('userInfo')
+    }
+  } else {
+    userInfo.value = null
+  }
+}
+
+// 监听路由变化，重新检查登录状态
+watch(() => route.path, () => {
+  getUserInfo()
+})
+
+// 监听 localStorage 变化
+const handleStorageChange = (e: StorageEvent) => {
+  if (e.key === 'token' || e.key === 'userInfo') {
+    getUserInfo()
+  }
+}
+
+// 退出登录
+const handleLogout = async () => {
+  try {
+    await userApi.logout()
+    localStorage.removeItem('token')
+    localStorage.removeItem('userInfo')
+    token.value = null
+    userInfo.value = null
+    toast.success({
+      title: '退出成功',
+      message: '您已成功退出登录'
+    })
+    router.push('/auth')
+  } catch {
+    localStorage.removeItem('token')
+    localStorage.removeItem('userInfo')
+    token.value = null
+    userInfo.value = null
+    toast.warning({
+      title: '退出登录',
+      message: '已清除本地登录信息'
+    })
+    router.push('/auth')
+  }
+}
+
+// 跳转到登录页
+const goToLogin = () => {
+  router.push('/auth')
+}
+
+// 组件挂载时获取用户信息
+onMounted(() => {
+  getUserInfo()
+  window.addEventListener('storage', handleStorageChange)
+})
+
+// 组件卸载时移除监听器
+onUnmounted(() => {
+  window.removeEventListener('storage', handleStorageChange)
+})
+</script>
+
+<template>
+  <!-- 顶部导航栏 - 重新设计的奢华风格 -->
+  <header v-if="!isWorkspacePage" class="app-header">
+    <div class="header-glass-effect"></div>
+    <div class="header-content">
+      <!-- Logo 区域 - 更精致的设计 -->
+      <div class="logo-section">
+        <RouterLink to="/" class="logo-link">
+          <div class="logo">
+            <div class="logo-icon-wrapper">
+              <div class="logo-inner-glow"></div>
+              <span class="logo-icon">◈</span>
+            </div>
+            <div class="logo-text-wrapper">
+              <span class="logo-text">PromptoLab</span>
+              <span class="logo-subtitle">AI Engineering</span>
+            </div>
+          </div>
+        </RouterLink>
+      </div>
+
+      <!-- 导航菜单 - 更现代的设计 -->
+      <nav class="main-nav">
+        <div class="nav-background"></div>
+        <RouterLink to="/" class="nav-link">
+          <div class="nav-content">
+            <div class="nav-icon-wrapper">
+              <span class="nav-icon">⬢</span>
+            </div>
+            <span class="nav-text">首页</span>
+          </div>
+          <div class="nav-glow"></div>
+        </RouterLink>
+        <RouterLink to="/prompt-builder" class="nav-link">
+          <div class="nav-content">
+            <div class="nav-icon-wrapper">
+              <span class="nav-icon">⬡</span>
+            </div>
+            <span class="nav-text">构建器</span>
+          </div>
+          <div class="nav-glow"></div>
+        </RouterLink>
+        <RouterLink to="/settings" class="nav-link">
+          <div class="nav-content">
+            <div class="nav-icon-wrapper">
+              <span class="nav-icon">⚙</span>
+            </div>
+            <span class="nav-text">设置</span>
+          </div>
+          <div class="nav-glow"></div>
+        </RouterLink>
+      </nav>
+
+      <!-- 右侧操作区域 - 更精致的设计 -->
+      <div class="actions-section">
+        <!-- 状态指示器 -->
+        <div class="status-indicator">
+          <div class="status-dot"></div>
+          <span class="status-text">在线</span>
+        </div>
+        
+        <!-- 用户信息 -->
+        <div v-if="isLoggedIn" class="user-info">
+          <div class="user-avatar">
+            <img v-if="userInfo?.avatar" :src="userInfo.avatar" :alt="userInfo.nickname" />
+            <div v-else class="avatar-placeholder">
+              {{ userInfo?.nickname?.charAt(0) || userInfo?.email?.charAt(0) || 'U' }}
+            </div>
+            <div class="avatar-ring"></div>
+          </div>
+          <div class="user-details">
+            <div class="user-name">{{ userInfo?.nickname || userInfo?.email || '用户' }}</div>
+            <div class="user-status">专业版用户</div>
+          </div>
+          <div class="action-btn-wrapper">
+            <button @click="handleLogout" class="action-btn logout-btn" title="退出登录">
+              <span class="btn-icon">⏻</span>
+              <div class="btn-ripple"></div>
+            </button>
+          </div>
+        </div>
+
+        <!-- 登录按钮 -->
+        <button v-else @click="goToLogin" class="login-btn">
+          <div class="btn-background"></div>
+          <span class="btn-text">登录</span>
+          <div class="btn-icon">→</div>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+/* 顶部导航栏 - 重新设计的奢华风格 */
+.app-header {
+  /* position: sticky; */
+  /* top: 0; */
+  /* z-index: 1000; */
+  background: rgba(8, 8, 8, 0.85);
+  backdrop-filter: blur(24px) saturate(180%);
+  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
+  box-shadow: 
+    0 1px 0 rgba(212, 175, 55, 0.1),
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.02);
+  position: relative;
+  overflow: hidden;
+}
+
+.header-glass-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    linear-gradient(135deg, 
+      rgba(212, 175, 55, 0.03) 0%, 
+      transparent 30%, 
+      transparent 70%, 
+      rgba(212, 175, 55, 0.03) 100%
+    );
+  animation: header-shimmer 8s ease-in-out infinite;
+}
+
+@keyframes header-shimmer {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.header-content {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 88px;
+  position: relative;
+  z-index: 2;
+}
+
+/* Logo 区域 - 更精致的设计 */
+.logo-section {
+  flex-shrink: 0;
+}
+
+.logo-link {
+  text-decoration: none;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  display: block;
+}
+
+.logo-link:hover {
+  transform: translateY(-2px);
+  filter: drop-shadow(0 8px 24px rgba(212, 175, 55, 0.4));
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.logo-icon-wrapper {
+  width: 52px;
+  height: 52px;
+  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 
+    0 8px 24px rgba(212, 175, 55, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.logo-icon-wrapper:hover {
+  transform: scale(1.05) rotate(5deg);
+  box-shadow: 
+    0 12px 32px rgba(212, 175, 55, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.logo-inner-glow {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
+  border-radius: 12px;
+  pointer-events: none;
+}
+
+.logo-icon {
+  font-size: 28px;
+  color: #1a1a1a;
+  z-index: 2;
+  position: relative;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.logo-text-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.logo-text {
+  font-size: 32px;
+  font-weight: 800;
+  background: linear-gradient(135deg, #ffffff 0%, #d4af37 50%, #f4d03f 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+
+.logo-subtitle {
+  font-size: 11px;
+  color: #888;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin-left: 2px;
+}
+
+/* 导航菜单 - 更现代的设计 */
+.main-nav {
+  display: flex;
+  gap: 24px;
+  /* background: rgba(15, 15, 15, 0.9);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(212, 175, 55, 0.2); */
+  /* border-radius: 20px;
+  padding: 6px;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08); */
+  position: relative;
+}
+
+.nav-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 20px;
+  pointer-events: none;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #b8b8b8;
+  border-radius: 16px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
+  font-size: 14px;
+  position: relative;
+  overflow: hidden;
+  min-width: 120px;
+  padding: 14px 20px;
+  border: 1px solid transparent;
+}
+
+.nav-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+  z-index: 2;
+}
+
+.nav-link:hover {
+  background: rgba(212, 175, 55, 0.08);
+  border-color: rgba(212, 175, 55, 0.25);
+  color: #d4af37;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.15);
+}
+
+.nav-link.router-link-active {
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(244, 208, 63, 0.08));
+  border-color: rgba(212, 175, 55, 0.4);
+  color: #d4af37;
+  box-shadow: 
+    0 8px 24px rgba(212, 175, 55, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.nav-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
+  border-radius: 16px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.nav-link:hover .nav-glow,
+.nav-link.router-link-active .nav-glow {
+  opacity: 1;
+}
+
+.nav-icon-wrapper {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-link:hover .nav-icon-wrapper,
+.nav-link.router-link-active .nav-icon-wrapper {
+  background: rgba(212, 175, 55, 0.2);
+  border-color: rgba(212, 175, 55, 0.4);
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
+  transform: scale(1.1);
+}
+
+.nav-icon {
+  font-size: 14px;
+  color: #d4af37;
+  font-weight: 600;
+}
+
+.nav-text {
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+/* 右侧操作区域 - 更精致的设计 */
+.actions-section {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(15, 15, 15, 0.8);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-text {
+  font-size: 12px;
+  color: #22c55e;
+  font-weight: 500;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 20px;
+  background: rgba(15, 15, 15, 0.9);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 16px;
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-info:hover {
+  border-color: rgba(212, 175, 55, 0.4);
+  box-shadow: 
+    0 12px 32px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(212, 175, 55, 0.15);
+  transform: translateY(-2px);
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+  border: 2px solid rgba(212, 175, 55, 0.4);
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
+  position: relative;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  color: #1a1a1a;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.avatar-ring {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  background: linear-gradient(45deg, #d4af37, transparent, #f4d03f);
+  background-clip: border-box;
+  animation: rotate 3s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.user-status {
+  font-size: 11px;
+  color: #d4af37;
+  font-weight: 500;
+}
+
+.action-btn-wrapper {
+  position: relative;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(15, 15, 15, 0.9);
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: #b8b8b8;
+  font-size: 18px;
+  position: relative;
+  overflow: hidden;
+}
+
+.action-btn:hover {
+  border-color: rgba(212, 175, 55, 0.5);
+  color: #d4af37;
+  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
+  transform: scale(1.05);
+}
+
+.btn-ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(212, 175, 55, 0.3);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.3s ease, height 0.3s ease;
+}
+
+.action-btn:active .btn-ripple {
+  width: 100px;
+  height: 100px;
+}
+
+.logout-btn:hover {
+  border-color: rgba(239, 68, 68, 0.5);
+  color: #ef4444;
+  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
+}
+
+.login-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 28px;
+  background: transparent;
+  border: 1px solid rgba(212, 175, 55, 0.4);
+  border-radius: 16px;
+  color: #d4af37;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.login-btn:hover {
+  background: linear-gradient(135deg, #d4af37, #f4d03f);
+  color: #1a1a1a;
+  border-color: #d4af37;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
+}
+
+.btn-background {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
+  transition: left 0.6s ease;
+}
+
+.login-btn:hover .btn-background {
+  left: 100%;
+}
+
+.btn-text {
+  position: relative;
+  z-index: 2;
+}
+
+.btn-icon {
+  position: relative;
+  z-index: 2;
+  font-size: 16px;
+  transition: transform 0.3s ease;
+}
+
+.login-btn:hover .btn-icon {
+  transform: translateX(4px);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+  .header-content {
+    padding: 0 24px;
+  }
+  
+  .user-details {
+    display: none;
+  }
+  
+  .status-indicator {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    padding: 0 20px;
+    height: 76px;
+  }
+  
+  .logo-text-wrapper {
+    display: none;
+  }
+  
+  .main-nav {
+    gap: 2px;
+    padding: 4px;
+  }
+  
+  .nav-link {
+    padding: 12px 16px;
+    font-size: 12px;
+    min-width: 80px;
+  }
+  
+  .nav-text {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-content {
+    padding: 0 16px;
+    gap: 12px;
+  }
+  
+  .logo-icon-wrapper {
+    width: 44px;
+    height: 44px;
+  }
+  
+  .nav-link {
+    padding: 10px 12px;
+    min-width: 60px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/prompto-lab-ui/src/components/ChatMain.vue b/prompto-lab-ui/src/components/ChatMain.vue
index 70cbc2c..8c23a6b 100644
--- a/prompto-lab-ui/src/components/ChatMain.vue
+++ b/prompto-lab-ui/src/components/ChatMain.vue
@@ -82,14 +82,14 @@
       <div class="input-container">
         <div class="input-wrapper">
           <div class="input-glow"></div>
-          <textarea 
+          <input 
             v-model="inputMessage"
             @keydown="handleKeydown"
             placeholder="输入您的问题，让AI为您解答..."
             rows="1"
             ref="textareaRef"
             class="message-input"
-          ></textarea>
+          ></input>
           <div class="input-actions">
             <button class="attachment-btn" title="附件">
               <span>📎</span>
@@ -627,7 +627,7 @@ watch(() => props.messages.length, () => {
 .message-input {
   flex: 1;
   min-height: 24px;
-  max-height: 120px;
+  max-height: 150px;
   background: transparent;
   border: none;
   outline: none;
diff --git a/prompto-lab-ui/src/views/HomeView.vue b/prompto-lab-ui/src/views/HomeView.vue
index c7322b2..7fe6d81 100644
--- a/prompto-lab-ui/src/views/HomeView.vue
+++ b/prompto-lab-ui/src/views/HomeView.vue
@@ -377,7 +377,6 @@ onUnmounted(() => {
   color: #ffffff;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   position: relative;
-  overflow-x: hidden;
 }
 
 .container {