From f6a64106267432b8f17134d1483f03da1f0085c7 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Tue, 6 Jan 2026 18:27:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20GitHub=20=E4=BB=93?=
 =?UTF-8?q?=E5=BA=93=E9=93=BE=E6=8E=A5=E5=88=B0=E9=A1=B5=E9=9D=A2=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 GithubIcon 组件复用 GitHub 图标
- MainLayout 和 Home 页面头部添加 GitHub 链接按钮
- 重构 Home 页面 header 布局结构
---
 frontend/src/components/icons/GithubIcon.vue |  13 +++
 frontend/src/layouts/MainLayout.vue          |  11 ++
 frontend/src/views/public/Home.vue           | 117 +++++++++----------
 3 files changed, 77 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/components/icons/GithubIcon.vue

diff --git a/frontend/src/components/icons/GithubIcon.vue b/frontend/src/components/icons/GithubIcon.vue
new file mode 100644
index 0000000..77356bd
--- /dev/null
+++ b/frontend/src/components/icons/GithubIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+    <path d="M9 18c-4.51 2-5-2-7-2" />
+  </svg>
+</template>
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 5d82508..439804a 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -280,6 +280,16 @@
               class="h-4 w-4"
             />
           </button>
+          <!-- GitHub Link -->
+          <a
+            href="https://github.com/fawney19/Aether"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
+            title="GitHub 仓库"
+          >
+            <GithubIcon class="h-4 w-4" />
+          </a>
         </div>
       </header>
     </template>
@@ -322,6 +332,7 @@ import {
   X,
   Mail,
 } from 'lucide-vue-next'
+import GithubIcon from '@/components/icons/GithubIcon.vue'
 
 const router = useRouter()
 const route = useRoute()
diff --git a/frontend/src/views/public/Home.vue b/frontend/src/views/public/Home.vue
index 9548831..e52e618 100644
--- a/frontend/src/views/public/Home.vue
+++ b/frontend/src/views/public/Home.vue
@@ -20,10 +20,11 @@
     </nav>
 
     <!-- Header -->
-    <header class="fixed top-0 left-0 right-0 z-50 border-b border-[#cc785c]/10 dark:border-[rgba(227,224,211,0.12)] bg-[#fafaf7]/90 dark:bg-[#191714]/95 backdrop-blur-xl transition-all">
-      <div class="mx-auto max-w-7xl px-6 py-4">
-        <div class="flex items-center justify-between">
-          <!-- Logo & Brand -->
+    <header class="sticky top-0 z-50 border-b border-[#cc785c]/10 dark:border-[rgba(227,224,211,0.12)] bg-[#fafaf7]/90 dark:bg-[#191714]/95 backdrop-blur-xl transition-all">
+      <div class="h-16 flex items-center">
+        <!-- Centered content container (max-w-7xl) -->
+        <div class="mx-auto max-w-7xl w-full px-6 flex items-center justify-between">
+          <!-- Left: Logo & Brand -->
           <div
             class="flex items-center gap-3 group/logo cursor-pointer"
             @click="scrollToSection(0)"
@@ -40,7 +41,7 @@
             </div>
           </div>
 
-          <!-- Center Navigation -->
+          <!-- Center: Navigation -->
           <nav class="hidden md:flex items-center gap-2">
             <button
               v-for="(section, index) in sections"
@@ -59,42 +60,54 @@
             </button>
           </nav>
 
-          <!-- Right Actions -->
-          <div class="flex items-center gap-3">
-            <button
-              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
-              :title="themeMode === 'system' ? '跟随系统' : themeMode === 'dark' ? '深色模式' : '浅色模式'"
-              @click="toggleDarkMode"
-            >
-              <SunMoon
-                v-if="themeMode === 'system'"
-                class="h-4 w-4"
-              />
-              <Sun
-                v-else-if="themeMode === 'light'"
-                class="h-4 w-4"
-              />
-              <Moon
-                v-else
-                class="h-4 w-4"
-              />
-            </button>
+          <!-- Right: Login/Dashboard Button -->
+          <RouterLink
+            v-if="authStore.isAuthenticated"
+            :to="dashboardPath"
+            class="min-w-[72px] text-center rounded-xl bg-[#191919] dark:bg-[#cc785c] px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[#262625] dark:hover:bg-[#b86d52] whitespace-nowrap"
+          >
+            控制台
+          </RouterLink>
+          <button
+            v-else
+            class="min-w-[72px] text-center rounded-xl bg-[#cc785c] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[#cc785c]/30 transition hover:bg-[#d4a27f] whitespace-nowrap"
+            @click="showLoginDialog = true"
+          >
+            登录
+          </button>
+        </div>
 
-            <RouterLink
-              v-if="authStore.isAuthenticated"
-              :to="dashboardPath"
-              class="rounded-xl bg-[#191919] dark:bg-[#cc785c] px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[#262625] dark:hover:bg-[#b86d52]"
-            >
-              控制台
-            </RouterLink>
-            <button
+        <!-- Fixed right icons (px-8 to match dashboard) -->
+        <div class="absolute right-8 top-1/2 -translate-y-1/2 flex items-center gap-2">
+          <!-- Theme Toggle -->
+          <button
+            class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
+            :title="themeMode === 'system' ? '跟随系统' : themeMode === 'dark' ? '深色模式' : '浅色模式'"
+            @click="toggleDarkMode"
+          >
+            <SunMoon
+              v-if="themeMode === 'system'"
+              class="h-4 w-4"
+            />
+            <Sun
+              v-else-if="themeMode === 'light'"
+              class="h-4 w-4"
+            />
+            <Moon
               v-else
-              class="rounded-xl bg-[#cc785c] px-4 py-2 text-sm font-medium text-white shadow-lg shadow-[#cc785c]/30 transition hover:bg-[#d4a27f]"
-              @click="showLoginDialog = true"
-            >
-              登录
-            </button>
-          </div>
+              class="h-4 w-4"
+            />
+          </button>
+          <!-- GitHub Link -->
+          <a
+            href="https://github.com/fawney19/Aether"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
+            title="GitHub 仓库"
+          >
+            <GithubIcon class="h-4 w-4" />
+          </a>
         </div>
       </div>
     </header>
@@ -336,31 +349,6 @@
       </section>
     </main>
 
-    <!-- Footer -->
-    <footer class="relative z-10 border-t border-[#cc785c]/10 dark:border-[rgba(227,224,211,0.12)] bg-[#fafaf7]/90 dark:bg-[#191714]/95 backdrop-blur-md py-8">
-      <div class="mx-auto max-w-7xl px-6">
-        <div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          <p class="text-sm text-[#91918d] dark:text-muted-foreground">
-            © 2025 Aether. 团队内部使用
-          </p>
-          <div class="flex items-center gap-6 text-sm text-[#91918d] dark:text-muted-foreground">
-            <a
-              href="#"
-              class="transition hover:text-[#191919] dark:hover:text-white"
-            >使用条款</a>
-            <a
-              href="#"
-              class="transition hover:text-[#191919] dark:hover:text-white"
-            >隐私政策</a>
-            <a
-              href="#"
-              class="transition hover:text-[#191919] dark:hover:text-white"
-            >技术支持</a>
-          </div>
-        </div>
-      </div>
-    </footer>
-
     <LoginDialog v-model="showLoginDialog" />
   </div>
 </template>
@@ -378,6 +366,7 @@ import {
   SunMoon,
   Terminal
 } from 'lucide-vue-next'
+import GithubIcon from '@/components/icons/GithubIcon.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useDarkMode } from '@/composables/useDarkMode'
 import { useClipboard } from '@/composables/useClipboard'