每周更新

power_leasing/src/components/header.vue

@@ -9,7 +9,7 @@
           :key="nav.path"
           :to="nav.path" 
           class="nav-btn" 
-          active-class="active"
+          :class="{ active: isNavActive(nav.path) }"
           :title="nav.description"
         >
           <span class="nav-icon">{{ nav.icon }}</span>
@@ -30,9 +30,16 @@
           </button>
         </div>
 
-        <!-- 已登录：显示用户邮箱和退出按钮 -->
+        <!-- 已登录：显示用户邮箱、安全设置和退出按钮 -->
         <div v-else class="user-info">
           <span class="user-email">{{ userEmail }}</span>
+          <router-link 
+            to="/account/security-settings" 
+            class="security-link"
+            active-class="active"
+          >
+            安全设置
+          </router-link>
           <el-button 
             type="text" 
             size="small" 
@@ -113,6 +120,19 @@ export default {
     window.removeEventListener('login-status-changed', this.handleLoginStatusChanged)
   },
   methods: {
+    /**
+     * 判断导航按钮是否应该高亮
+     * 在安全设置页面时，个人中心不应该高亮
+     */
+    isNavActive(path) {
+      const currentPath = (this.$route && this.$route.path) || ''
+      // 如果是安全设置页面，个人中心不高亮
+      if (currentPath === '/account/security-settings' && path === '/account') {
+        return false
+      }
+      // 其他情况使用 Vue Router 的默认匹配逻辑（包含匹配）
+      return currentPath === path || (path !== '/' && currentPath.startsWith(path + '/'))
+    },
     loadCart() {
       this.cart = readCart()
     },
@@ -438,6 +458,36 @@ export default {
   color: #2c3e50;
   font-size: 14px;
   font-weight: 600;
+  margin-right: 12px;
+}
+
+/* 安全设置链接样式 - 与导航按钮一致 */
+.security-link {
+  display: inline-flex;
+  align-items: center;
+  color: #2c3e50;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  padding: 12px 20px;
+  margin-right: 8px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.security-link:hover {
+  background: #f5f7ff;
+  color: #667eea;
+  transform: translateY(-2px);
+}
+
+.security-link.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  transform: translateY(-2px);
 }
 
 /* 退出按钮样式 */