更新保存代码

power_leasing/src/components/header.vue

@@ -2,18 +2,47 @@
   <div class="header-container">
     <!-- 顶部导航栏 -->
     <nav class="navbar">
-      <router-link 
-        v-for="nav in navigation" 
-        :key="nav.path"
-        :to="nav.path" 
-        class="nav-btn" 
-        active-class="active"
-        :title="nav.description"
-      >
-        <span class="nav-icon">{{ nav.icon }}</span>
-        <span class="nav-text">{{ nav.name }}</span>
-        <span v-if="nav.path === '/cart'" class="cart-count">({{ cartItemCount }})</span>
-      </router-link>
+      <!-- 左侧：导航按钮 -->
+      <div class="nav-left">
+        <router-link 
+          v-for="nav in navigation" 
+          :key="nav.path"
+          :to="nav.path" 
+          class="nav-btn" 
+          active-class="active"
+          :title="nav.description"
+        >
+          <span class="nav-icon">{{ nav.icon }}</span>
+          <span class="nav-text">{{ nav.name }}</span>
+          <span v-if="nav.path === '/cart'" class="cart-count">({{ cartItemCount }})</span>
+        </router-link>
+      </div>
+
+      <!-- 右侧：用户登录状态 -->
+      <div class="nav-right">
+        <!-- 未登录：显示注册/登录按钮 -->
+        <div v-if="!isLoggedIn" class="auth-buttons">
+          <button class="auth-btn register-btn" @click="goToRegister">
+            注册
+          </button>
+          <button class="auth-btn login-btn" @click="goToLogin">
+            登录
+          </button>
+        </div>
+
+        <!-- 已登录：显示用户邮箱和退出按钮 -->
+        <div v-else class="user-info">
+          <span class="user-email">{{ userEmail }}</span>
+          <el-button 
+            type="text" 
+            size="small" 
+            class="logout-btn"
+            @click="handleLogout"
+          >
+            退出
+          </el-button>
+        </div>
+      </div>
     </nav>
 
     <!-- 面包屑导航 -->
@@ -44,16 +73,25 @@ export default {
       cart: [],
       // 服务端购物车数量（统计 productMachineDtoList 的总条数）
       cartServerCount: 0,
-      navigation: mainNavigation
+      navigation: mainNavigation,
+      // 用户邮箱
+      userEmail: ''
     }
   },
   computed: {
+    // 计算购物车数量
     cartItemCount() {
       // 只使用服务端数量，避免与本地缓存数量不一致
       return Number.isFinite(this.cartServerCount) ? this.cartServerCount : 0
     },
+    // 计算面包屑导航
     breadcrumbs() {
       return getBreadcrumb(this.$route.path)
+    },
+    // 判断是否已登录（检查localStorage中是否有token）
+    isLoggedIn() {
+      const token = localStorage.getItem('token')
+      return !!token // 有token就是已登录，没有就是未登录
     }
   },
   watch: {},
@@ -65,6 +103,8 @@ export default {
     this.loadServerCartCount()
     // 监听应用内购物车更新事件
     window.addEventListener('cart-updated', this.handleCartUpdated)
+    // 加载用户信息（邮箱）
+    this.loadUserEmail()
   },
   beforeDestroy() {
     window.removeEventListener('storage', this.handleStorageChange)
@@ -125,9 +165,58 @@ export default {
       // 无显式数量则主动刷新
       this.loadServerCartCount()
     },
+    /**
+     * 跳转到登录页
+     */
+    goToLogin() {
+      this.$router.push('/login')
+    },
+    /**
+     * 跳转到注册页
+     */
+    goToRegister() {
+      this.$router.push('/register')
+    },
+    /**
+     * 加载用户邮箱
+     * 从localStorage读取用户信息，获取邮箱
+     */
+    loadUserEmail() {
+      try {
+        // 从localStorage读取用户信息
+        const userInfoStr = localStorage.getItem('userInfo')
+        if (userInfoStr) {
+          const userInfo = JSON.parse(userInfoStr)
+          // 获取邮箱，如果没有邮箱就显示用户名
+          this.userEmail = userInfo.email || userInfo.username || '用户'
+        }
+      } catch (e) {
+        console.error('读取用户信息失败:', e)
+        this.userEmail = ''
+      }
+    },
+    /**
+     * 退出登录
+     * 清除所有登录信息，跳转到登录页
+     */
     handleLogout() {
+      // 清除localStorage中的所有登录信息
+      localStorage.removeItem('token')
+      localStorage.removeItem('userInfo')
+      localStorage.removeItem('leasEmail')
+      localStorage.removeItem('userId')
+      localStorage.removeItem('username')
+      
+      // 清空购物车
       this.user = null
       this.cart = []
+      this.userEmail = ''
+      
+      // 提示用户
+      this.$message.success('退出登录成功')
+      
+      // 跳转到登录页
+      this.$router.push('/login')
     },
     getBreadcrumbPath(index) {
       const paths = ['/productList', '/cart', '/checkout']
@@ -144,14 +233,30 @@ export default {
   width: 100%;
 }
 
+/* 导航栏布局：导航按钮在中间，登录状态在右边 */
 .navbar {
   display: flex;
-  justify-content: center;
-  gap: 24px;
+  justify-content: center; /* 主内容居中 */
+  align-items: center;
   background: #fff;
   border-bottom: 1px solid #eee;
-  padding: 16px 0;
+  padding: 16px 32px;
   margin-bottom: 16px;
+  position: relative; /* 让右侧元素可以绝对定位 */
+}
+
+/* 左侧导航按钮区域（实际在中间显示） */
+.nav-left {
+  display: flex;
+  gap: 24px;
+}
+
+/* 右侧用户登录区域（绝对定位到右边） */
+.nav-right {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 32px; /* 距离右边32px */
 }
 
 .nav-btn {
@@ -171,14 +276,19 @@ export default {
   position: relative;
 }
 
+/* 导航按钮悬停效果 */
 .nav-btn:hover {
-  background: #f8f9fa;
+  background: #f5f7ff;
+  color: #667eea;
   transform: translateY(-2px);
 }
 
+/* 导航按钮激活状态 - 紫色渐变，跟登录按钮一样 */
 .nav-btn.active {
-  background: #42b983;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: #fff;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  transform: translateY(-2px);
 }
 
 .nav-icon {
@@ -233,12 +343,87 @@ export default {
   color: #ccc;
 }
 
-/* 响应式设计 */
+/* 未登录：注册/登录按钮样式 */
+.auth-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.auth-btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+/* 注册按钮 - 白色背景 */
+.register-btn {
+  color: #667eea;
+  border: 1px solid #667eea;
+  background: white;
+  cursor: pointer;
+}
+
+.register-btn:hover {
+  background: #f5f7ff;
+}
+
+/* 登录按钮 - 紫色背景 */
+.login-btn {
+  color: white;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  cursor: pointer;
+}
+
+.login-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+/* 已登录：用户信息样式 */
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  /* 去掉灰色背景，更简洁 */
+}
+
+/* 用户邮箱显示 */
+.user-email {
+  color: #2c3e50;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* 退出按钮样式 */
+.logout-btn {
+  color: #e74c3c;
+  font-size: 14px;
+  padding: 4px 12px;
+}
+
+.logout-btn:hover {
+  color: #c0392b;
+  background: #fee;
+}
+
+/* 响应式设计 - 手机端适配 */
 @media (max-width: 768px) {
   .navbar {
     flex-direction: column;
-    gap: 12px;
-    padding: 12px 0;
+    gap: 16px;
+    padding: 12px 16px;
+  }
+  
+  .nav-left {
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
   }
   
   .nav-btn {
@@ -247,6 +432,25 @@ export default {
     padding: 16px 20px;
   }
   
+  .nav-right {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .auth-buttons {
+    width: 100%;
+  }
+  
+  .auth-btn {
+    flex: 1;
+    text-align: center;
+  }
+  
+  .user-info {
+    width: 100%;
+    justify-content: center;
+  }
+  
   .breadcrumb {
     margin: 0 12px 16px 12px;
     padding: 8px 16px;