From eac64105de323a27b5fa7f3937dcdb3434b2c72d Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 24 May 2026 21:12:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E8=AE=A4=E8=AF=81=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=9F=E4=B8=80=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=8C?=
 =?UTF-8?q?=E5=90=AB=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2=E4=B8=8E=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 Layout 组件作为认证路由的公共布局，提供 sticky 导航栏，
移除各页面重复的顶栏代码。
---
 frontend/src/components/Layout.tsx  | 64 +++++++++++++++++++++++++++++
 frontend/src/pages/GeneratePage.tsx | 25 +----------
 frontend/src/pages/ProjectPage.tsx  | 22 +---------
 frontend/src/pages/ResultPage.tsx   | 23 +----------
 frontend/src/router/index.tsx       | 34 ++++++++-------
 5 files changed, 88 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/Layout.tsx

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..abb2be5
--- /dev/null
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,64 @@
+import { Link, Outlet } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth'
+import { useThemeStore } from '../stores/theme'
+
+export default function Layout() {
+  const { user, logout } = useAuthStore()
+  const { theme, toggleTheme } = useThemeStore()
+
+  return (
+    <>
+      <nav
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 100,
+          background: 'var(--nav-bg)',
+          borderBottom: '1px solid var(--nav-border)',
+          height: 56,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 24px',
+          transition: 'background-color 0.3s ease, border-color 0.3s ease',
+        }}
+      >
+        <Link
+          to="/"
+          style={{
+            fontSize: 20,
+            fontWeight: 700,
+            color: 'var(--accent)',
+            textDecoration: 'none',
+          }}
+        >
+          gen2d
+        </Link>
+
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <button
+            onClick={toggleTheme}
+            className="btn-secondary"
+            style={{ padding: '6px 10px', fontSize: 16, lineHeight: 1 }}
+            title={theme === 'light' ? '切换到暗色模式' : '切换到浅色模式'}
+          >
+            {theme === 'light' ? '☾' : '☀'}
+          </button>
+          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
+            {user?.username}
+          </span>
+          <button
+            className="btn-secondary"
+            onClick={logout}
+            style={{ padding: '6px 16px', fontSize: 13 }}
+          >
+            退出
+          </button>
+        </div>
+      </nav>
+      <main>
+        <Outlet />
+      </main>
+    </>
+  )
+}
diff --git a/frontend/src/pages/GeneratePage.tsx b/frontend/src/pages/GeneratePage.tsx
index 0fc55ce..868e553 100644
--- a/frontend/src/pages/GeneratePage.tsx
+++ b/frontend/src/pages/GeneratePage.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { useTaskStore } from '../stores/task'
 import { useGenerationStore } from '../stores/generation'
 import GenerateForm from '../components/GenerateForm'
@@ -46,28 +46,7 @@ export default function GeneratePage() {
 
   return (
     <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
-      {/* 顶栏 */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 32,
-        }}
-      >
-        <h1 style={{ fontSize: 24 }}>新建生成</h1>
-        <Link
-          to={`/projects/${projectId}`}
-          className="btn-secondary"
-          style={{
-            padding: '8px 20px',
-            fontSize: 13,
-            borderRadius: 'var(--radius)',
-          }}
-        >
-          返回工程
-        </Link>
-      </div>
+      <h1 style={{ fontSize: 24, marginBottom: 32 }}>新建生成</h1>
 
       {/* 生成表单 */}
       {status === 'idle' || status === 'submitting' ? (
diff --git a/frontend/src/pages/ProjectPage.tsx b/frontend/src/pages/ProjectPage.tsx
index 8dbefc8..df40981 100644
--- a/frontend/src/pages/ProjectPage.tsx
+++ b/frontend/src/pages/ProjectPage.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { useProjectStore } from '../stores/project'
-import { useAuthStore } from '../stores/auth'
 import { getTasks } from '../api/project'
 import type { Task } from '../api/types'
 import StyleSelector from '../components/StyleSelector'
@@ -15,7 +14,6 @@ const STATUS_LABELS: Record<string, { label: string; color: string }> = {
 
 export default function ProjectPage() {
   const { projectId = 'proj-default' } = useParams()
-  const { user, logout } = useAuthStore()
   const {
     name,
     style,
@@ -45,25 +43,7 @@ export default function ProjectPage() {
 
   return (
     <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
-      {/* 顶栏 */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 32,
-        }}
-      >
-        <h1 style={{ fontSize: 24 }}>{loading ? '加载中...' : name}</h1>
-        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
-          <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>
-            {user?.username}
-          </span>
-          <button className="btn-secondary" onClick={logout} style={{ padding: '6px 16px', fontSize: 13 }}>
-            退出
-          </button>
-        </div>
-      </div>
+      <h1 style={{ fontSize: 24, marginBottom: 32 }}>{loading ? '加载中...' : name}</h1>
 
       {/* 工程风格 */}
       <section className="card" style={{ marginBottom: 24 }}>
diff --git a/frontend/src/pages/ResultPage.tsx b/frontend/src/pages/ResultPage.tsx
index 4a0bd62..83738b1 100644
--- a/frontend/src/pages/ResultPage.tsx
+++ b/frontend/src/pages/ResultPage.tsx
@@ -42,28 +42,7 @@ export default function ResultPage() {
 
   return (
     <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
-      {/* 顶栏 */}
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: 32,
-        }}
-      >
-        <h1 style={{ fontSize: 24 }}>生成结果</h1>
-        <Link
-          to={`/projects/${projectId}`}
-          className="btn-secondary"
-          style={{
-            padding: '8px 20px',
-            fontSize: 13,
-            borderRadius: 'var(--radius)',
-          }}
-        >
-          返回工程
-        </Link>
-      </div>
+      <h1 style={{ fontSize: 24, marginBottom: 32 }}>生成结果</h1>
 
       {/* 任务信息 */}
       <section className="card" style={{ marginBottom: 24 }}>
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index f29091d..8c6f1c7 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter, Navigate, Outlet } from 'react-router-dom'
 import { useAuthStore } from '../stores/auth'
+import Layout from '../components/Layout'
 import LoginPage from '../pages/LoginPage'
 import RegisterPage from '../pages/RegisterPage'
 import ProjectPage from '../pages/ProjectPage'
@@ -25,20 +26,25 @@ export const router = createBrowserRouter([
     element: <ProtectedRoute />,
     children: [
       {
-        path: '/',
-        element: <Navigate to="/projects/proj-default" replace />,
-      },
-      {
-        path: '/projects/:projectId',
-        element: <ProjectPage />,
-      },
-      {
-        path: '/projects/:projectId/generate',
-        element: <GeneratePage />,
-      },
-      {
-        path: '/projects/:projectId/tasks/:taskId',
-        element: <ResultPage />,
+        element: <Layout />,
+        children: [
+          {
+            path: '/',
+            element: <Navigate to="/projects/proj-default" replace />,
+          },
+          {
+            path: '/projects/:projectId',
+            element: <ProjectPage />,
+          },
+          {
+            path: '/projects/:projectId/generate',
+            element: <GeneratePage />,
+          },
+          {
+            path: '/projects/:projectId/tasks/:taskId',
+            element: <ResultPage />,
+          },
+        ],
       },
     ],
   },