From 3b97eb7bf2700169b55ffb68d367993d6ec6feb3 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Sun, 26 Jul 2026 18:12:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor(home-page):=20=E6=8B=86=E5=88=86=20Hom?=
 =?UTF-8?q?ePage=20=E8=90=BD=E5=9C=B0=E9=A1=B5=EF=BC=88300=E2=86=9244?=
 =?UTF-8?q?=E8=A1=8C,=20-85%=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 按模块拆到 sections/ 目录，共 7 个独立文件
- HeroSection / FeatureSection / WorkflowSection / PricingSection / CTASection
- Layout.tsx: NavBar + Footer
- 每个 section 独立维护自己的数据常量和渲染逻辑
- 主文件精简为 44 行纯编排
---
 apps/web/src/pages/home/HomePage.tsx          | 272 +-----------------
 .../src/pages/home/sections/CTASection.tsx    |  20 ++
 .../pages/home/sections/FeatureSection.tsx    |  45 +++
 .../src/pages/home/sections/HeroSection.tsx   |  55 ++++
 apps/web/src/pages/home/sections/Layout.tsx   |  34 +++
 .../pages/home/sections/PricingSection.tsx    | 102 +++++++
 .../pages/home/sections/WorkflowSection.tsx   |  31 ++
 7 files changed, 295 insertions(+), 264 deletions(-)
 mode change 100644 => 100755 apps/web/src/pages/home/HomePage.tsx
 create mode 100644 apps/web/src/pages/home/sections/CTASection.tsx
 create mode 100644 apps/web/src/pages/home/sections/FeatureSection.tsx
 create mode 100644 apps/web/src/pages/home/sections/HeroSection.tsx
 create mode 100644 apps/web/src/pages/home/sections/Layout.tsx
 create mode 100644 apps/web/src/pages/home/sections/PricingSection.tsx
 create mode 100644 apps/web/src/pages/home/sections/WorkflowSection.tsx

diff --git a/apps/web/src/pages/home/HomePage.tsx b/apps/web/src/pages/home/HomePage.tsx
old mode 100644
new mode 100755
index 3ac84739d..720cfcddb
--- a/apps/web/src/pages/home/HomePage.tsx
+++ b/apps/web/src/pages/home/HomePage.tsx
@@ -8,249 +8,15 @@
  */
 import React from "react"
 import { useNavigate } from "react-router-dom"
-import { Button } from "@/components/ui"
 import { useAuthStore } from "@/store/authStore"
+import { NavBar, Footer } from "./sections/Layout"
+import { HeroSection } from "./sections/HeroSection"
+import { FeatureSection } from "./sections/FeatureSection"
+import { WorkflowSection } from "./sections/WorkflowSection"
+import { PricingSection } from "./sections/PricingSection"
+import { CTASection } from "./sections/CTASection"
 import "./home-page.css"
 
-/* ── HeroSection ─────────────────────────────────────────── */
-
-const HeroSection: React.FC = () => {
-  const navigate = useNavigate()
-
-  return (
-    <section className="hp-hero">
-      <div className="hp-hero-inner">
-        {/* 左侧文案 */}
-        <div className="hp-hero-content">
-          <span className="hp-hero-tag">🦐 小虾智剪 · AI智能视频创作平台</span>
-          <h1 className="hp-hero-title">
-            上传素材，AI自动剪辑
-            <br />
-            智能剪辑短视频
-          </h1>
-          <p className="hp-hero-desc">
-            基于先进的 AI 技术，自动识别视频亮点，智能剪辑、配音、加字幕。 30
-            秒内将长视频转化为适合各平台传播的精品短视频。
-          </p>
-          <div className="hp-hero-actions">
-            <Button buttonType="primary" buttonSize="lg" onClick={() => navigate("/register")}>
-              立即免费开始
-            </Button>
-            <Button buttonType="secondary" buttonSize="lg" onClick={() => navigate("/pricing")}>
-              查看定价方案
-            </Button>
-          </div>
-        </div>
-
-        {/* 右侧视觉 */}
-        <div className="hp-hero-visual">
-          <div className="hp-hero-video">
-            <div className="hp-hero-video-inner">
-              <span className="hp-hero-video-placeholder">🎬</span>
-            </div>
-            <button className="hp-hero-play" type="button" aria-label="播放演示视频">
-              ▶
-            </button>
-          </div>
-          <div className="hp-hero-info">
-            <div className="hp-hero-badges">
-              <span className="hp-hero-badge">✨ AI智能剪辑</span>
-              <span className="hp-hero-badge">⚡ 30秒生成</span>
-            </div>
-            <span className="hp-hero-pill">可发布</span>
-          </div>
-        </div>
-      </div>
-    </section>
-  )
-}
-
-/* ── FeatureSection ──────────────────────────────────────── */
-
-const FEATURES = [
-  {
-    icon: "🤖",
-    title: "AI 智能剪辑",
-    desc: "自动识别视频高光片段，智能去除冗余内容，智能剪辑精彩短视频。",
-  },
-  {
-    icon: "🎙️",
-    title: "AI 配音克隆",
-    desc: "克隆您的声音，支持多种音色风格，自动生成自然流畅的配音。",
-  },
-  {
-    icon: "📝",
-    title: "智能字幕标题",
-    desc: "自动语音识别生成精准字幕，AI 创作吸睛标题，提升内容传播力。",
-  },
-  {
-    icon: "📱",
-    title: "多平台一键发布",
-    desc: "支持抖音、快手、小红书、微信视频号等主流平台，一键同步发布。",
-  },
-]
-
-const FeatureSection: React.FC = () => {
-  return (
-    <section className="hp-features">
-      <div className="hp-section-inner">
-        <h2 className="hp-section-title">核心功能</h2>
-        <p className="hp-section-desc">从素材上传到视频发布，全流程 AI 赋能，让短视频创作更简单</p>
-        <div className="hp-feature-grid">
-          {FEATURES.map((f) => (
-            <div key={f.title} className="hp-feature-card">
-              <div className="hp-feature-icon">{f.icon}</div>
-              <h3 className="hp-feature-title">{f.title}</h3>
-              <p className="hp-feature-desc">{f.desc}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-/* ── WorkflowSection ─────────────────────────────────────── */
-
-const STEPS = [
-  { icon: "📤", title: "上传素材", desc: "拖拽或选择视频素材，支持批量上传" },
-  { icon: "🧠", title: "AI 处理", desc: "AI 自动分析、剪辑、配音、加字幕" },
-  { icon: "👀", title: "预览调整", desc: "在线预览生成结果，支持微调编辑" },
-  { icon: "🚀", title: "一键发布", desc: "多平台同步发布，追踪数据表现" },
-]
-
-const WorkflowSection: React.FC = () => {
-  return (
-    <section className="hp-workflow">
-      <div className="hp-section-inner">
-        <h2 className="hp-section-title">工作流程</h2>
-        <p className="hp-section-desc">四步完成短视频创作，从素材到发布仅需 30 秒</p>
-        <div className="hp-step-grid">
-          {STEPS.map((step, idx) => (
-            <div key={step.title} className="hp-step-card">
-              <div className="hp-step-number">{idx + 1}</div>
-              <div className="hp-step-icon">{step.icon}</div>
-              <h3 className="hp-step-title">{step.title}</h3>
-              <p className="hp-step-desc">{step.desc}</p>
-              {idx < STEPS.length - 1 && <div className="hp-step-arrow">→</div>}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-/* ── PricingSection ──────────────────────────────────────── */
-
-const PLANS = [
-  {
-    name: "基础版",
-    price: "免费",
-    period: "",
-    desc: "适合个人体验，快速上手",
-    features: ["每月 5 次 AI 生成", "720p 视频导出", "基础模板库", "1 个平台账号绑定"],
-    highlighted: false,
-    cta: "免费开始",
-  },
-  {
-    name: "专业版",
-    price: "¥99",
-    period: "/月",
-    desc: "适合内容创作者，高效产出",
-    features: [
-      "每月 100 次 AI 生成",
-      "1080p 视频导出",
-      "全部模板库",
-      "4 个平台账号绑定",
-      "AI 配音克隆",
-      "优先客服支持",
-    ],
-    highlighted: true,
-    cta: "立即订阅",
-  },
-  {
-    name: "企业版",
-    price: "¥399",
-    period: "/月",
-    desc: "适合团队与企业，规模化运营",
-    features: [
-      "无限次 AI 生成",
-      "4K 视频导出",
-      "全部模板 + 定制模板",
-      "无限平台账号绑定",
-      "团队协作管理",
-      "API 接入支持",
-      "专属客户经理",
-    ],
-    highlighted: false,
-    cta: "联系销售",
-  },
-]
-
-const PricingSection: React.FC = () => {
-  const navigate = useNavigate()
-
-  return (
-    <section className="hp-pricing">
-      <div className="hp-section-inner">
-        <h2 className="hp-section-title">定价方案</h2>
-        <p className="hp-section-desc">选择适合您的方案，随时升级或取消</p>
-        <div className="hp-pricing-grid">
-          {PLANS.map((plan) => (
-            <div
-              key={plan.name}
-              className={`hp-pricing-card${plan.highlighted ? " hp-pricing-card--highlight" : ""}`}
-            >
-              {plan.highlighted && <div className="hp-pricing-badge">推荐</div>}
-              <h3 className="hp-pricing-name">{plan.name}</h3>
-              <div className="hp-pricing-price">
-                {plan.price}
-                {plan.period && <span className="hp-pricing-period">{plan.period}</span>}
-              </div>
-              <p className="hp-pricing-desc">{plan.desc}</p>
-              <ul className="hp-pricing-features">
-                {plan.features.map((f) => (
-                  <li key={f}>
-                    <span className="hp-pricing-check">✓</span>
-                    {f}
-                  </li>
-                ))}
-              </ul>
-              <Button
-                buttonType={plan.highlighted ? "primary" : "secondary"}
-                onClick={() => navigate("/register")}
-              >
-                {plan.cta}
-              </Button>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}
-
-/* ── CTASection ──────────────────────────────────────────── */
-
-const CTASection: React.FC = () => {
-  const navigate = useNavigate()
-
-  return (
-    <section className="hp-cta">
-      <div className="hp-cta-inner">
-        <h2 className="hp-cta-title">开始用 AI 创作短视频</h2>
-        <p className="hp-cta-desc">免费注册，立即体验 AI 智能视频创作。无需信用卡，零风险上手。</p>
-        <Button buttonType="primary" buttonSize="lg" onClick={() => navigate("/register")}>
-          免费注册
-        </Button>
-      </div>
-    </section>
-  )
-}
-
-/* ── 主页面 ─────────────────────────────────────────────── */
-
 const HomePage: React.FC = () => {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
   const navigate = useNavigate()
@@ -264,35 +30,13 @@ const HomePage: React.FC = () => {
 
   return (
     <div className="hp-page">
-      {/* 顶部导航栏 */}
-      <header className="hp-nav">
-        <div className="hp-nav-inner">
-          <button className="hp-nav-brand" type="button" onClick={() => navigate("/")}>
-            <span className="hp-nav-logo">🦐</span>
-            <span className="hp-nav-brand-text">小虾智剪</span>
-          </button>
-          <div className="hp-nav-actions">
-            <Button buttonType="ghost" buttonSize="sm" onClick={() => navigate("/login")}>
-              登录
-            </Button>
-            <Button buttonType="primary" buttonSize="sm" onClick={() => navigate("/register")}>
-              免费注册
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      {/* 5 个区域 */}
+      <NavBar />
       <HeroSection />
       <FeatureSection />
       <WorkflowSection />
       <PricingSection />
       <CTASection />
-
-      {/* 底部 */}
-      <footer className="hp-footer">
-        <p>© 2026 小虾智剪 · AI智能视频创作平台</p>
-      </footer>
+      <Footer />
     </div>
   )
 }
diff --git a/apps/web/src/pages/home/sections/CTASection.tsx b/apps/web/src/pages/home/sections/CTASection.tsx
new file mode 100644
index 000000000..8f6886720
--- /dev/null
+++ b/apps/web/src/pages/home/sections/CTASection.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { Button } from "@/components/ui"
+
+/** CTA 行动号召区域 */
+export const CTASection: React.FC = () => {
+  const navigate = useNavigate()
+
+  return (
+    <section className="hp-cta">
+      <div className="hp-cta-inner">
+        <h2 className="hp-cta-title">开始用 AI 创作短视频</h2>
+        <p className="hp-cta-desc">免费注册，立即体验 AI 智能视频创作。无需信用卡，零风险上手。</p>
+        <Button buttonType="primary" buttonSize="lg" onClick={() => navigate("/register")}>
+          免费注册
+        </Button>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/pages/home/sections/FeatureSection.tsx b/apps/web/src/pages/home/sections/FeatureSection.tsx
new file mode 100644
index 000000000..631fd4848
--- /dev/null
+++ b/apps/web/src/pages/home/sections/FeatureSection.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+
+const FEATURES = [
+  {
+    icon: "🤖",
+    title: "AI 智能剪辑",
+    desc: "自动识别视频高光片段，智能去除冗余内容，智能剪辑精彩短视频。",
+  },
+  {
+    icon: "🎙️",
+    title: "AI 配音克隆",
+    desc: "克隆您的声音，支持多种音色风格，自动生成自然流畅的配音。",
+  },
+  {
+    icon: "📝",
+    title: "智能字幕标题",
+    desc: "自动语音识别生成精准字幕，AI 创作吸睛标题，提升内容传播力。",
+  },
+  {
+    icon: "📱",
+    title: "多平台一键发布",
+    desc: "支持抖音、快手、小红书、微信视频号等主流平台，一键同步发布。",
+  },
+]
+
+/** 核心功能区域 */
+export const FeatureSection: React.FC = () => {
+  return (
+    <section className="hp-features">
+      <div className="hp-section-inner">
+        <h2 className="hp-section-title">核心功能</h2>
+        <p className="hp-section-desc">从素材上传到视频发布，全流程 AI 赋能，让短视频创作更简单</p>
+        <div className="hp-feature-grid">
+          {FEATURES.map((f) => (
+            <div key={f.title} className="hp-feature-card">
+              <div className="hp-feature-icon">{f.icon}</div>
+              <h3 className="hp-feature-title">{f.title}</h3>
+              <p className="hp-feature-desc">{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/pages/home/sections/HeroSection.tsx b/apps/web/src/pages/home/sections/HeroSection.tsx
new file mode 100644
index 000000000..4617cecb9
--- /dev/null
+++ b/apps/web/src/pages/home/sections/HeroSection.tsx
@@ -0,0 +1,55 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { Button } from "@/components/ui"
+
+/** Hero 首屏区域 */
+export const HeroSection: React.FC = () => {
+  const navigate = useNavigate()
+
+  return (
+    <section className="hp-hero">
+      <div className="hp-hero-inner">
+        {/* 左侧文案 */}
+        <div className="hp-hero-content">
+          <span className="hp-hero-tag">🦐 小虾智剪 · AI智能视频创作平台</span>
+          <h1 className="hp-hero-title">
+            上传素材，AI自动剪辑
+            <br />
+            智能剪辑短视频
+          </h1>
+          <p className="hp-hero-desc">
+            基于先进的 AI 技术，自动识别视频亮点，智能剪辑、配音、加字幕。 30
+            秒内将长视频转化为适合各平台传播的精品短视频。
+          </p>
+          <div className="hp-hero-actions">
+            <Button buttonType="primary" buttonSize="lg" onClick={() => navigate("/register")}>
+              立即免费开始
+            </Button>
+            <Button buttonType="secondary" buttonSize="lg" onClick={() => navigate("/pricing")}>
+              查看定价方案
+            </Button>
+          </div>
+        </div>
+
+        {/* 右侧视觉 */}
+        <div className="hp-hero-visual">
+          <div className="hp-hero-video">
+            <div className="hp-hero-video-inner">
+              <span className="hp-hero-video-placeholder">🎬</span>
+            </div>
+            <button className="hp-hero-play" type="button" aria-label="播放演示视频">
+              ▶
+            </button>
+          </div>
+          <div className="hp-hero-info">
+            <div className="hp-hero-badges">
+              <span className="hp-hero-badge">✨ AI智能剪辑</span>
+              <span className="hp-hero-badge">⚡ 30秒生成</span>
+            </div>
+            <span className="hp-hero-pill">可发布</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/pages/home/sections/Layout.tsx b/apps/web/src/pages/home/sections/Layout.tsx
new file mode 100644
index 000000000..b0d8201e7
--- /dev/null
+++ b/apps/web/src/pages/home/sections/Layout.tsx
@@ -0,0 +1,34 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { Button } from "@/components/ui"
+
+/** 顶部导航栏 */
+export const NavBar: React.FC = () => {
+  const navigate = useNavigate()
+
+  return (
+    <header className="hp-nav">
+      <div className="hp-nav-inner">
+        <button className="hp-nav-brand" type="button" onClick={() => navigate("/")}>
+          <span className="hp-nav-logo">🦐</span>
+          <span className="hp-nav-brand-text">小虾智剪</span>
+        </button>
+        <div className="hp-nav-actions">
+          <Button buttonType="ghost" buttonSize="sm" onClick={() => navigate("/login")}>
+            登录
+          </Button>
+          <Button buttonType="primary" buttonSize="sm" onClick={() => navigate("/register")}>
+            免费注册
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+/** 页脚 */
+export const Footer: React.FC = () => (
+  <footer className="hp-footer">
+    <p>© 2026 小虾智剪 · AI智能视频创作平台</p>
+  </footer>
+)
diff --git a/apps/web/src/pages/home/sections/PricingSection.tsx b/apps/web/src/pages/home/sections/PricingSection.tsx
new file mode 100644
index 000000000..1cf6d2524
--- /dev/null
+++ b/apps/web/src/pages/home/sections/PricingSection.tsx
@@ -0,0 +1,102 @@
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { Button } from "@/components/ui"
+
+interface Plan {
+  name: string
+  price: string
+  period: string
+  desc: string
+  features: string[]
+  highlighted: boolean
+  cta: string
+}
+
+const PLANS: Plan[] = [
+  {
+    name: "基础版",
+    price: "免费",
+    period: "",
+    desc: "适合个人体验，快速上手",
+    features: ["每月 5 次 AI 生成", "720p 视频导出", "基础模板库", "1 个平台账号绑定"],
+    highlighted: false,
+    cta: "免费开始",
+  },
+  {
+    name: "专业版",
+    price: "¥99",
+    period: "/月",
+    desc: "适合内容创作者，高效产出",
+    features: [
+      "每月 100 次 AI 生成",
+      "1080p 视频导出",
+      "全部模板库",
+      "4 个平台账号绑定",
+      "AI 配音克隆",
+      "优先客服支持",
+    ],
+    highlighted: true,
+    cta: "立即订阅",
+  },
+  {
+    name: "企业版",
+    price: "¥399",
+    period: "/月",
+    desc: "适合团队与企业，规模化运营",
+    features: [
+      "无限次 AI 生成",
+      "4K 视频导出",
+      "全部模板 + 定制模板",
+      "无限平台账号绑定",
+      "团队协作管理",
+      "API 接入支持",
+      "专属客户经理",
+    ],
+    highlighted: false,
+    cta: "联系销售",
+  },
+]
+
+/** 定价方案区域 */
+export const PricingSection: React.FC = () => {
+  const navigate = useNavigate()
+
+  return (
+    <section className="hp-pricing">
+      <div className="hp-section-inner">
+        <h2 className="hp-section-title">定价方案</h2>
+        <p className="hp-section-desc">选择适合您的方案，随时升级或取消</p>
+        <div className="hp-pricing-grid">
+          {PLANS.map((plan) => (
+            <div
+              key={plan.name}
+              className={`hp-pricing-card${plan.highlighted ? " hp-pricing-card--highlight" : ""}`}
+            >
+              {plan.highlighted && <div className="hp-pricing-badge">推荐</div>}
+              <h3 className="hp-pricing-name">{plan.name}</h3>
+              <div className="hp-pricing-price">
+                {plan.price}
+                {plan.period && <span className="hp-pricing-period">{plan.period}</span>}
+              </div>
+              <p className="hp-pricing-desc">{plan.desc}</p>
+              <ul className="hp-pricing-features">
+                {plan.features.map((f) => (
+                  <li key={f}>
+                    <span className="hp-pricing-check">✓</span>
+                    {f}
+                  </li>
+                ))}
+              </ul>
+              <Button
+                buttonType={plan.highlighted ? "primary" : "secondary"}
+                onClick={() => navigate("/register")}
+              >
+                {plan.cta}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/src/pages/home/sections/WorkflowSection.tsx b/apps/web/src/pages/home/sections/WorkflowSection.tsx
new file mode 100644
index 000000000..f72f0180b
--- /dev/null
+++ b/apps/web/src/pages/home/sections/WorkflowSection.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+
+const STEPS = [
+  { icon: "📤", title: "上传素材", desc: "拖拽或选择视频素材，支持批量上传" },
+  { icon: "🧠", title: "AI 处理", desc: "AI 自动分析、剪辑、配音、加字幕" },
+  { icon: "👀", title: "预览调整", desc: "在线预览生成结果，支持微调编辑" },
+  { icon: "🚀", title: "一键发布", desc: "多平台同步发布，追踪数据表现" },
+]
+
+/** 工作流程区域 */
+export const WorkflowSection: React.FC = () => {
+  return (
+    <section className="hp-workflow">
+      <div className="hp-section-inner">
+        <h2 className="hp-section-title">工作流程</h2>
+        <p className="hp-section-desc">四步完成短视频创作，从素材到发布仅需 30 秒</p>
+        <div className="hp-step-grid">
+          {STEPS.map((step, idx) => (
+            <div key={step.title} className="hp-step-card">
+              <div className="hp-step-number">{idx + 1}</div>
+              <div className="hp-step-icon">{step.icon}</div>
+              <h3 className="hp-step-title">{step.title}</h3>
+              <p className="hp-step-desc">{step.desc}</p>
+              {idx < STEPS.length - 1 && <div className="hp-step-arrow">→</div>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
-- 
2.54.0