From 7f84a04e278de3a129ef52f52eb0a9a68a6e4207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B7=9D?= <jc@163.com>
Date: Sun, 29 Mar 2026 17:15:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=8F=8A=E8=B0=83=E6=95=B4=E5=AF=BC=E8=88=AA=E5=92=8C?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增完整首页视图，展示核心功能、品类覆盖及使用流程
- 设计首页响应式布局及样式，优化多终端展示效果
- 修改AdminLayout中返回前台链接为/design路径
- 删除AppHeader中顶部设计、生成、管理后台菜单链接
- 在用户下拉菜单新增管理后台入口，点击跳转/admin
- 新增路由/home和/design页面，完善路由配置
- 将登录、注册、生成页跳转路径由根目录改为/design，增强用户体验
---
 backend/uvicorn.log                     |  47 ++
 frontend/src/components/AdminLayout.vue |   2 +-
 frontend/src/components/AppHeader.vue   |   6 +-
 frontend/src/router/index.ts            |   5 +
 frontend/src/views/GeneratePage.vue     |   2 +-
 frontend/src/views/HomePage.vue         | 712 ++++++++++++++++++++++++
 frontend/src/views/Login.vue            |   2 +-
 frontend/src/views/Register.vue         |   2 +-
 8 files changed, 771 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/views/HomePage.vue

diff --git a/backend/uvicorn.log b/backend/uvicorn.log
index cbb6522..73c73e1 100644
--- a/backend/uvicorn.log
+++ b/backend/uvicorn.log
@@ -270,3 +270,50 @@ INFO:     127.0.0.1:54140 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
 INFO:     127.0.0.1:54139 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
 INFO:     127.0.0.1:54330 - "GET /api/auth/me HTTP/1.1" 200 OK
 INFO:     127.0.0.1:54332 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54842 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56316 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57491 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57495 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57499 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57627 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57625 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57636 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:57664 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58159 - "POST /api/auth/login HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58162 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58168 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58174 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58172 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58181 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58182 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58189 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58188 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58243 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58249 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58250 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58257 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58256 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58266 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58264 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58272 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58271 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58276 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58278 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58284 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58283 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58287 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58295 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58296 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58305 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58304 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58314 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58313 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58320 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58319 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58325 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58326 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58332 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58331 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58335 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58341 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58340 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
diff --git a/frontend/src/components/AdminLayout.vue b/frontend/src/components/AdminLayout.vue
index 73f0951..19714e5 100644
--- a/frontend/src/components/AdminLayout.vue
+++ b/frontend/src/components/AdminLayout.vue
@@ -34,7 +34,7 @@
         </router-link>
       </nav>
       <div class="sidebar-footer">
-        <router-link to="/" class="back-link">
+        <router-link to="/design" class="back-link">
           <el-icon><Back /></el-icon>
           <span>返回前台</span>
         </router-link>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index cd3a1b1..f9fc1b9 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -7,9 +7,6 @@
       </router-link>
     </div>
     <nav class="header-nav">
-      <router-link to="/" class="nav-link">设计</router-link>
-      <router-link to="/generate" class="nav-link">生成</router-link>
-      <router-link to="/admin" class="nav-link admin-link" v-if="isAdmin">管理后台</router-link>
     </nav>
     <div class="header-right">
       <template v-if="isLoggedIn">
@@ -22,6 +19,7 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item command="user">个人中心</el-dropdown-item>
+              <el-dropdown-item command="admin" v-if="isAdmin">管理后台</el-dropdown-item>
               <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -52,6 +50,8 @@ const avatarChar = computed(() => (userStore.userInfo?.nickname || '用')[0])
 const handleCommand = (command: string) => {
   if (command === 'user') {
     router.push('/user')
+  } else if (command === 'admin') {
+    router.push('/admin')
   } else if (command === 'logout') {
     userStore.logout()
     router.push('/login')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index c93246b..6ccd7f9 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,11 @@ const router = createRouter({
   routes: [
     {
       path: '/',
+      name: 'Home',
+      component: () => import('@/views/HomePage.vue')
+    },
+    {
+      path: '/design',
       name: 'Design',
       component: () => import('@/views/DesignPage.vue'),
       meta: { requiresAuth: true }
diff --git a/frontend/src/views/GeneratePage.vue b/frontend/src/views/GeneratePage.vue
index 2e8abeb..777180b 100644
--- a/frontend/src/views/GeneratePage.vue
+++ b/frontend/src/views/GeneratePage.vue
@@ -393,7 +393,7 @@ const promptPlaceholder = computed(() => {
 
 // 返回设计页
 const goBack = () => {
-  router.push('/')
+  router.push('/design')
 }
 
 // 构建最终prompt：随形品类时将形状描述拼接到前面
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
new file mode 100644
index 0000000..3f35f13
--- /dev/null
+++ b/frontend/src/views/HomePage.vue
@@ -0,0 +1,712 @@
+<template>
+  <div class="home-page">
+    <!-- Hero 区域 -->
+    <section class="hero">
+      <div class="hero-bg">
+        <div class="hero-circle hero-circle-1"></div>
+        <div class="hero-circle hero-circle-2"></div>
+        <div class="hero-circle hero-circle-3"></div>
+      </div>
+      <div class="hero-content">
+        <div class="hero-badge">AI 驱动 · 珠宝设计</div>
+        <h1 class="hero-title">
+          <span class="hero-brand">玉 宗</span>
+          <span class="hero-subtitle">珠宝设计大师</span>
+        </h1>
+        <p class="hero-desc">
+          融合人工智能与传统玉雕美学，为您提供专业级珠宝玉石设计图生成服务。<br />
+          覆盖 12 种主流玉石品类，多视角智能出图，让创意即刻成形。
+        </p>
+        <div class="hero-actions">
+          <router-link to="/design" class="btn-primary">
+            <span>开始设计</span>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </router-link>
+          <a href="#features" class="btn-outline" @click.prevent="scrollToFeatures">了解更多</a>
+        </div>
+      </div>
+    </section>
+
+    <!-- 功能亮点 -->
+    <section id="features" class="features">
+      <div class="section-header">
+        <span class="section-tag">核心能力</span>
+        <h2 class="section-title">为珠宝设计而生的 AI 工具</h2>
+        <p class="section-desc">从创意构思到效果呈现，全流程智能辅助</p>
+      </div>
+      <div class="feature-grid">
+        <div class="feature-card" v-for="(feat, i) in features" :key="i">
+          <div class="feature-icon">{{ feat.icon }}</div>
+          <h3 class="feature-title">{{ feat.title }}</h3>
+          <p class="feature-desc">{{ feat.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 品类展示 -->
+    <section class="categories-section">
+      <div class="section-header">
+        <span class="section-tag">品类覆盖</span>
+        <h2 class="section-title">12 种主流玉石品类全面支持</h2>
+        <p class="section-desc">每种品类均配备专属参数与视角配置，满足不同产品设计需求</p>
+      </div>
+      <div class="category-grid">
+        <div class="category-chip" v-for="(cat, i) in categories" :key="i">
+          <span class="chip-icon">{{ cat.icon }}</span>
+          <span class="chip-name">{{ cat.name }}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- 工作流程 -->
+    <section class="workflow-section">
+      <div class="section-header">
+        <span class="section-tag">使用流程</span>
+        <h2 class="section-title">四步完成专业设计</h2>
+        <p class="section-desc">简单直观的操作流程，无需设计经验也能轻松上手</p>
+      </div>
+      <div class="workflow-steps">
+        <div class="step-item" v-for="(step, i) in steps" :key="i">
+          <div class="step-num">{{ String(i + 1).padStart(2, '0') }}</div>
+          <h3 class="step-title">{{ step.title }}</h3>
+          <p class="step-desc">{{ step.desc }}</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 底部 CTA -->
+    <section class="cta-section">
+      <div class="cta-content">
+        <h2 class="cta-title">开始您的珠宝设计之旅</h2>
+        <p class="cta-desc">AI 赋能传统玉雕美学，让每一件作品都独一无二</p>
+        <router-link to="/design" class="btn-primary btn-large">
+          <span>立即体验</span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7" />
+          </svg>
+        </router-link>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="home-footer">
+      <div class="footer-brand">
+        <span class="footer-logo">玉 宗</span>
+        <span class="footer-sub">YUZONG JEWELRY</span>
+      </div>
+      <p class="footer-copy">© {{ currentYear }} 玉宗珠宝设计大师 · AI 驱动珠宝玉石设计生成系统</p>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const currentYear = computed(() => new Date().getFullYear())
+
+const features = [
+  {
+    icon: '🎨',
+    title: 'AI 智能生图',
+    desc: '输入设计描述，AI 自动理解创意意图，生成专业级珠宝效果图，支持中文自然语言描述'
+  },
+  {
+    icon: '🔄',
+    title: '多视角展示',
+    desc: '自动生成 2~4 个不同视角（效果图、正面、侧面、背面），全方位呈现设计效果'
+  },
+  {
+    icon: '💎',
+    title: '12 大品类覆盖',
+    desc: '牌子、珠子、手把件、雕刻件、摆件、手镯、耳钉、耳饰、手链、项链、戒指、表带'
+  },
+  {
+    icon: '⚙️',
+    title: '专业参数配置',
+    desc: '雕刻工艺、设计风格、题材纹样、尺寸规格、表面处理、用途场景六大维度精准控制'
+  },
+  {
+    icon: '📦',
+    title: '设计全流程管理',
+    desc: '设计历史保存、多视角预览、高清图片下载，完整的设计作品生命周期管理'
+  }
+]
+
+const categories = [
+  { icon: '🏮', name: '牌子' },
+  { icon: '🔮', name: '珠子' },
+  { icon: '🤲', name: '手把件' },
+  { icon: '🗿', name: '雕刻件' },
+  { icon: '🏺', name: '摆件' },
+  { icon: '⭕', name: '手镯' },
+  { icon: '✨', name: '耳钉' },
+  { icon: '💫', name: '耳饰' },
+  { icon: '📿', name: '手链' },
+  { icon: '💍', name: '项链' },
+  { icon: '💎', name: '戒指' },
+  { icon: '⌚', name: '表带' }
+]
+
+const steps = [
+  { title: '选择品类', desc: '从 12 种玉石品类中选择您要设计的产品类型，系统自动适配参数' },
+  { title: '配置参数', desc: '选择子类型、颜色、工艺、风格等专业参数，精准定义设计方向' },
+  { title: '描述创意', desc: '用自然语言描述您的设计构想，AI 将理解并转化为专业设计指令' },
+  { title: '生成预览', desc: '一键生成多视角设计效果图，预览、下载、调整，直到满意为止' }
+]
+
+const scrollToFeatures = () => {
+  document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })
+}
+</script>
+
+<style scoped lang="scss">
+$primary: #5B7E6B;
+$primary-dark: #3D5A4A;
+$primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
+$secondary: #C4A86C;
+$bg: #FAF8F5;
+$text: #2C2C2C;
+$text-secondary: #6B6B6B;
+$text-light: #999;
+
+/* ========== Hero ========== */
+.hero {
+  position: relative;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: linear-gradient(160deg, #f7f9f7 0%, $bg 40%, #f5f0ea 100%);
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.hero-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.12;
+}
+.hero-circle-1 {
+  width: 600px; height: 600px;
+  background: radial-gradient(circle, $primary-light, transparent 70%);
+  top: -200px; right: -100px;
+}
+.hero-circle-2 {
+  width: 400px; height: 400px;
+  background: radial-gradient(circle, $secondary, transparent 70%);
+  bottom: -100px; left: -50px;
+}
+.hero-circle-3 {
+  width: 300px; height: 300px;
+  background: radial-gradient(circle, $primary-lighter, transparent 70%);
+  top: 40%; left: 60%;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding: 60px 24px;
+  max-width: 720px;
+}
+
+.hero-badge {
+  display: inline-block;
+  padding: 6px 20px;
+  background: rgba($primary, 0.08);
+  color: $primary;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  margin-bottom: 32px;
+}
+
+.hero-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+}
+
+.hero-brand {
+  font-size: 56px;
+  font-weight: 800;
+  color: $primary;
+  letter-spacing: 16px;
+  line-height: 1.2;
+}
+
+.hero-subtitle {
+  font-size: 24px;
+  font-weight: 400;
+  color: $text-secondary;
+  letter-spacing: 8px;
+}
+
+.hero-desc {
+  font-size: 16px;
+  line-height: 1.8;
+  color: $text-secondary;
+  margin-bottom: 40px;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 42px;
+  background: linear-gradient(135deg, $primary, $primary-dark);
+  color: #fff;
+  border-radius: 999px;
+  font-size: 17px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 16px rgba($primary, 0.3);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 24px rgba($primary, 0.4);
+    color: #fff;
+  }
+}
+
+.btn-large {
+  padding: 18px 48px;
+  font-size: 18px;
+}
+
+.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  padding: 16px 42px;
+  background: transparent;
+  color: $text-secondary;
+  border: 1.5px solid #ddd;
+  border-radius: 999px;
+  font-size: 17px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: $primary;
+    color: $primary;
+    background: rgba($primary, 0.04);
+  }
+}
+
+/* ========== Section Common ========== */
+.section-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.section-tag {
+  display: inline-block;
+  padding: 4px 16px;
+  background: rgba($primary, 0.08);
+  color: $primary;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: $text;
+  margin-bottom: 12px;
+  letter-spacing: 2px;
+}
+
+.section-desc {
+  font-size: 15px;
+  color: $text-secondary;
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+/* ========== Features ========== */
+.features {
+  padding: 80px 48px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+}
+
+.feature-card {
+  width: calc(33.333% - 16px);
+  min-width: 280px;
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px 28px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+    border-color: $primary-lighter;
+  }
+}
+
+.feature-icon {
+  font-size: 36px;
+  margin-bottom: 16px;
+}
+
+.feature-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: $text;
+  margin-bottom: 10px;
+}
+
+.feature-desc {
+  font-size: 14px;
+  line-height: 1.7;
+  color: $text-secondary;
+}
+
+/* ========== Categories ========== */
+.categories-section {
+  padding: 80px 48px;
+  background: linear-gradient(180deg, #fff 0%, $bg 100%);
+}
+
+.category-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.category-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: #fff;
+  border-radius: 999px;
+  border: 1px solid $primary-lighter;
+  transition: all 0.25s ease;
+  cursor: default;
+
+  &:hover {
+    background: $primary;
+    color: #fff;
+    border-color: $primary;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba($primary, 0.2);
+
+    .chip-name { color: #fff; }
+  }
+}
+
+.chip-icon {
+  font-size: 20px;
+}
+
+.chip-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: $text;
+  transition: color 0.25s ease;
+}
+
+/* ========== Workflow ========== */
+.workflow-section {
+  padding: 80px 48px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.workflow-steps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.step-item {
+  text-align: center;
+  padding: 32px 20px;
+  position: relative;
+
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    width: 20px;
+    height: 2px;
+    background: $primary-lighter;
+  }
+}
+
+.step-num {
+  font-size: 40px;
+  font-weight: 800;
+  color: $primary-lighter;
+  margin-bottom: 12px;
+  line-height: 1;
+}
+
+.step-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $text;
+  margin-bottom: 8px;
+}
+
+.step-desc {
+  font-size: 13px;
+  line-height: 1.7;
+  color: $text-secondary;
+}
+
+/* ========== CTA ========== */
+.cta-section {
+  padding: 100px 48px;
+  text-align: center;
+  background: linear-gradient(160deg, #f7f9f7 0%, $bg 50%, #f5f0ea 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.cta-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: $text;
+  margin-bottom: 16px;
+  letter-spacing: 2px;
+}
+
+.cta-desc {
+  font-size: 16px;
+  color: $text-secondary;
+  margin-bottom: 40px;
+}
+
+/* ========== Footer ========== */
+.home-footer {
+  padding: 40px 48px;
+  text-align: center;
+  border-top: 1px solid #eee;
+  background: #fff;
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.footer-logo {
+  font-size: 18px;
+  font-weight: 700;
+  color: $primary;
+  letter-spacing: 6px;
+}
+
+.footer-sub {
+  font-size: 9px;
+  color: $text-light;
+  letter-spacing: 2.5px;
+}
+
+.footer-copy {
+  font-size: 12px;
+  color: $text-light;
+}
+
+/* ========== Responsive ========== */
+
+/* 平板端 */
+@media (max-width: 1024px) {
+  .feature-card {
+    width: calc(50% - 12px);
+    min-width: auto;
+  }
+  .workflow-steps {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .step-item::after { display: none !important; }
+}
+
+/* 手机端 */
+@media (max-width: 768px) {
+  .hero {
+    min-height: 70vh;
+    padding: 0 16px;
+  }
+  .hero-content {
+    padding: 40px 16px;
+  }
+  .hero-badge {
+    font-size: 12px;
+    padding: 5px 16px;
+    margin-bottom: 24px;
+  }
+  .hero-brand {
+    font-size: 36px;
+    letter-spacing: 10px;
+  }
+  .hero-subtitle {
+    font-size: 16px;
+    letter-spacing: 4px;
+  }
+  .hero-desc {
+    font-size: 14px;
+    line-height: 1.7;
+    margin-bottom: 32px;
+    br { display: none; }
+  }
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+  .btn-primary, .btn-outline {
+    padding: 14px 36px;
+    font-size: 15px;
+    width: 200px;
+    justify-content: center;
+  }
+  .btn-large {
+    padding: 14px 36px;
+    font-size: 16px;
+  }
+
+  .section-header {
+    margin-bottom: 32px;
+  }
+  .section-title {
+    font-size: 20px;
+    letter-spacing: 1px;
+  }
+  .section-desc {
+    font-size: 13px;
+    padding: 0 8px;
+  }
+
+  .features, .categories-section, .workflow-section, .cta-section {
+    padding: 48px 20px;
+  }
+
+  .feature-grid {
+    gap: 16px;
+  }
+  .feature-card {
+    width: 100%;
+    min-width: auto;
+    padding: 24px 20px;
+  }
+  .feature-icon {
+    font-size: 28px;
+    margin-bottom: 12px;
+  }
+  .feature-title {
+    font-size: 15px;
+  }
+  .feature-desc {
+    font-size: 13px;
+  }
+
+  .category-grid {
+    gap: 10px;
+  }
+  .category-chip {
+    padding: 10px 18px;
+  }
+  .chip-icon {
+    font-size: 16px;
+  }
+  .chip-name {
+    font-size: 13px;
+  }
+
+  .workflow-steps {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  .step-item {
+    padding: 20px 12px;
+    &::after { display: none !important; }
+  }
+  .step-num {
+    font-size: 32px;
+  }
+  .step-title {
+    font-size: 14px;
+  }
+  .step-desc {
+    font-size: 12px;
+  }
+
+  .cta-section {
+    padding: 60px 20px;
+  }
+  .cta-title {
+    font-size: 22px;
+    letter-spacing: 1px;
+  }
+  .cta-desc {
+    font-size: 14px;
+    margin-bottom: 28px;
+  }
+
+  .home-footer {
+    padding: 28px 20px;
+  }
+  .footer-copy {
+    font-size: 11px;
+  }
+}
+
+/* 小屏手机 */
+@media (max-width: 375px) {
+  .hero-brand {
+    font-size: 30px;
+    letter-spacing: 8px;
+  }
+  .hero-subtitle {
+    font-size: 14px;
+    letter-spacing: 3px;
+  }
+  .workflow-steps {
+    grid-template-columns: 1fr;
+  }
+  .section-title {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 13458f5..bb9b944 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -96,7 +96,7 @@ const handleLogin = async () => {
   try {
     await userStore.login(form.username, form.password)
     ElMessage.success('登录成功')
-    router.push('/')
+    router.push('/design')
   } catch (error: any) {
     // 错误已在拦截器中处理
   } finally {
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index 1b47a7b..b4d4923 100644
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -135,7 +135,7 @@ const handleRegister = async () => {
   try {
     await userStore.register(form.username, form.password, form.nickname)
     ElMessage.success('注册成功')
-    router.push('/')
+    router.push('/design')
   } catch (error: any) {
     // 错误已在拦截器中处理
   } finally {