From 37da48c07eb7ea538024940224bd8e7f175580eb Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Fri, 31 Oct 2025 17:03:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20header=E7=AB=96=E5=B1=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在竖屏情况下将网站导航与部分顶部按钮挪到drawer内
---
 app/components/shared/JinshenHeader.vue | 174 +++++++++++++++++++++++-
 1 file changed, 171 insertions(+), 3 deletions(-)

diff --git a/app/components/shared/JinshenHeader.vue b/app/components/shared/JinshenHeader.vue
index 0fd55ca..0721bba 100644
--- a/app/components/shared/JinshenHeader.vue
+++ b/app/components/shared/JinshenHeader.vue
@@ -1,5 +1,6 @@
 <template>
   <header class="header-container">
+    <!-- Logo -->
     <div class="logo-section">
       <NuxtLink :to="$localePath('/')" class="logo-link">
         <el-image
@@ -11,6 +12,7 @@
       </NuxtLink>
     </div>
 
+    <!-- 桌面菜单 -->
     <div class="header-menu-section">
       <!-- 导航菜单 -->
       <el-menu
@@ -48,6 +50,7 @@
       </el-link>
 
       <el-link
+        class="hide-on-mobile"
         type="info"
         :underline="false"
         href="http://cal.jinshen.cn"
@@ -56,7 +59,7 @@
         <el-icon class="mdi mdi-calculator action-icon" />
       </el-link>
 
-      <el-dropdown @command="setLocale">
+      <el-dropdown class="hide-on-mobile" @command="setLocale">
         <el-link type="info" :underline="false">
           <el-icon class="mdi mdi-translate action-icon" />
         </el-link>
@@ -67,6 +70,82 @@
           </el-dropdown-menu>
         </template>
       </el-dropdown>
+
+      <!-- 汉堡按钮（仅移动端显示） -->
+      <el-link type="info" :underline="false">
+        <el-icon
+          class="mdi mdi-menu mobile-menu-button"
+          @click="mobileMenuVisible = true"
+        />
+      </el-link>
+
+      <!-- Drawer 抽屉菜单 -->
+      <client-only>
+        <el-drawer
+          v-model="mobileMenuVisible"
+          class="mobile-drawer"
+          direction="rtl"
+          size="70%"
+        >
+          <template #header>
+            <div class="drawer-header">
+              <h1>菜单</h1>
+            </div>
+          </template>
+          <div>
+            <h2>站点导航</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              router
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item index="products" :route="$localePath('/products')">
+                {{ $t('navigation.products') }}
+              </el-menu-item>
+              <el-menu-item
+                index="solutions"
+                :route="$localePath('/solutions')"
+              >
+                {{ $t('navigation.solutions') }}
+              </el-menu-item>
+              <el-menu-item index="support" :route="$localePath('/support')">
+                {{ $t('navigation.support') }}
+              </el-menu-item>
+              <el-menu-item index="about" :route="$localePath('/about')">
+                {{ $t('navigation.about-us') }}
+              </el-menu-item>
+            </el-menu>
+
+            <h2>实用工具</h2>
+            <el-menu
+              :default-active="activeName"
+              class="mobile-menu"
+              mode="vertical"
+              @select="mobileMenuVisible = false"
+            >
+              <el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
+                {{ $t('navigation.calculator') }}
+              </el-menu-item>
+            </el-menu>
+          </div>
+
+          <template #footer>
+            <el-dropdown @command="setLocale">
+              <el-link type="info" :underline="false">
+                <el-icon class="mdi mdi-translate mobile-menu-button" />
+              </el-link>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+                  <el-dropdown-item command="en">English</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-drawer>
+      </client-only>
     </div>
   </header>
 </template>
@@ -78,6 +157,7 @@
   const { setLocale } = useI18n();
 
   const activeName = ref<string | undefined>(undefined);
+  const mobileMenuVisible = ref(false);
 
   const refreshMenu = () => {
     const path = router.currentRoute.value.path;
@@ -94,6 +174,10 @@
     }
   };
 
+  const openExternalLink = (url: string) => {
+    window.open(url, '_blank');
+  };
+
   onMounted(() => {
     refreshMenu();
     // 监听路由变化以更新激活状态
@@ -105,10 +189,10 @@
 
 <style scoped>
   .header-container {
-    padding: 0 10px;
     display: flex;
-    height: 80px;
     align-items: center;
+    height: 80px;
+    padding: 0 20px;
     border-bottom: 1px solid #e0e0e0;
   }
 
@@ -167,4 +251,88 @@
   .action-icon {
     font-size: 24px;
   }
+
+  .mobile-menu-button {
+    display: none; /* 默认隐藏汉堡按钮 */
+  }
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :deep(.el-drawer__header) {
+    margin-bottom: 0;
+  }
+
+  :deep(.el-drawer__body) {
+    padding: 20px;
+  }
+
+  .mobile-drawer h1 {
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .mobile-drawer h2 {
+    font-size: 20px;
+    margin-bottom: 16px;
+    font-weight: bold;
+  }
+
+  .mobile-menu {
+    border: none;
+    margin-bottom: 24px;
+  }
+
+  .mobile-menu .el-menu-item {
+    font-size: 16px;
+    background-color: transparent !important;
+  }
+
+  .mobile-menu .el-menu-item.is-active {
+    color: var(--el-color-primary);
+  }
+
+  .mobile-menu .el-menu-item:hover {
+    color: var(--el-color-primary);
+  }
+
+  @media (max-width: 1024px) {
+    .header-container {
+      height: 70px;
+      padding: 0 16px;
+    }
+
+    .website-logo {
+      height: 48px;
+    }
+
+    .header-menu-section .header-menu .el-menu-item {
+      font-size: 14px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .header-menu-section {
+      display: none; /* 隐藏横向菜单 */
+    }
+
+    .hide-on-mobile {
+      display: none; /* 隐藏部分图标 */
+    }
+
+    .header-actions {
+      gap: 12px;
+    }
+
+    .mobile-menu-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
 </style>