Merge branch 'develop' into refactor/subscription-api

将 106 行的 subscription.ts 拆分为目录化结构：
- types.ts: 类型定义（Plan/SubscriptionInfo/BillingRecord 等）
- subscription.ts: 全部 5 个 API 函数
- index.ts: 统一入口 re-export，保持 @/api/subscription 路径向后兼容

apps/web/src/api/subscription/index.ts

@@ -0,0 +1,26 @@
+/**
+ * 订阅 API — 目录化入口
+ * 保持与原 subscription.ts 相同导出，向后兼容
+ */
+
+// 类型
+export type {
+  PlanType,
+  SubscriptionStatus,
+  BillingStatus,
+  BillingCycle,
+  Plan,
+  SubscriptionInfo,
+  BillingRecord,
+  ChangePlanRequest,
+  ChangePlanResponse,
+} from "./types"
+
+// API 函数
+export {
+  getCurrentSubscription,
+  getBillingRecords,
+  changePlan,
+  cancelSubscription,
+  toggleAutoRenew,
+} from "./subscription"

apps/web/src/api/subscription/subscription.ts

@@ -0,0 +1,47 @@
+/**
+ * 订阅相关 API 函数
+ */
+import apiClient from "../client"
+import type {
+  BillingRecord,
+  ChangePlanRequest,
+  ChangePlanResponse,
+  SubscriptionInfo,
+} from "./types"
+
+/** 获取当前订阅信息 */
+export const getCurrentSubscription = async (): Promise<SubscriptionInfo> => {
+  const response = await apiClient.get("/subscription/current")
+  return response.data
+}
+
+/** 获取账单记录列表 */
+export const getBillingRecords = async (): Promise<BillingRecord[]> => {
+  const response = await apiClient.get("/subscription/billing-records")
+  return response.data
+}
+
+/** 升级/降级套餐 */
+export const changePlan = async (request: ChangePlanRequest): Promise<ChangePlanResponse> => {
+  const response = await apiClient.post("/subscription/change-plan", request)
+  return response.data
+}
+
+/** 取消订阅 */
+export const cancelSubscription = async (): Promise<{
+  success: boolean
+  message: string
+}> => {
+  const response = await apiClient.post("/subscription/cancel")
+  return response.data
+}
+
+/** 切换自动续费 */
+export const toggleAutoRenew = async (
+  enabled: boolean,
+): Promise<{ success: boolean; message: string }> => {
+  const response = await apiClient.post("/subscription/toggle-auto-renew", {
+    enabled,
+  })
+  return response.data
+}

apps/web/src/api/subscription/types.ts

@@ -1,8 +1,6 @@
 /**
- * 订阅 API 模块
- * 对接后端订阅管理接口
+ * 订阅相关类型定义
  */
-import apiClient from "./client"
 
 /** 套餐类型 */
 export type PlanType = "free" | "standard" | "pro" | "enterprise"
@@ -65,42 +63,3 @@ export interface ChangePlanResponse {
   message: string
   new_subscription?: SubscriptionInfo
 }
-
-// ============ API 函数 ============
-
-/** 获取当前订阅信息 */
-export const getCurrentSubscription = async (): Promise<SubscriptionInfo> => {
-  const response = await apiClient.get("/subscription/current")
-  return response.data
-}
-
-/** 获取账单记录列表 */
-export const getBillingRecords = async (): Promise<BillingRecord[]> => {
-  const response = await apiClient.get("/subscription/billing-records")
-  return response.data
-}
-
-/** 升级/降级套餐 */
-export const changePlan = async (request: ChangePlanRequest): Promise<ChangePlanResponse> => {
-  const response = await apiClient.post("/subscription/change-plan", request)
-  return response.data
-}
-
-/** 取消订阅 */
-export const cancelSubscription = async (): Promise<{
-  success: boolean
-  message: string
-}> => {
-  const response = await apiClient.post("/subscription/cancel")
-  return response.data
-}
-
-/** 切换自动续费 */
-export const toggleAutoRenew = async (
-  enabled: boolean,
-): Promise<{ success: boolean; message: string }> => {
-  const response = await apiClient.post("/subscription/toggle-auto-renew", {
-    enabled,
-  })
-  return response.data
-}

apps/web/src/pages/home/HomePage.tsx

@@ -8,15 +8,249 @@
  */
 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()
@@ -30,13 +264,35 @@ const HomePage: React.FC = () => {
 
   return (
     <div className="hp-page">
-      <NavBar />
+      {/* 顶部导航栏 */}
+      <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 个区域 */}
       <HeroSection />
       <FeatureSection />
       <WorkflowSection />
       <PricingSection />
       <CTASection />
-      <Footer />
+
+      {/* 底部 */}
+      <footer className="hp-footer">
+        <p>© 2026 小虾智剪 · AI智能视频创作平台</p>
+      </footer>
     </div>
   )
 }

apps/web/src/pages/home/sections/CTASection.tsx

@@ -1,20 +0,0 @@
-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>
-  )
-}

apps/web/src/pages/home/sections/FeatureSection.tsx

@@ -1,45 +0,0 @@
-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>
-  )
-}

apps/web/src/pages/home/sections/HeroSection.tsx

@@ -1,55 +0,0 @@
-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>
-  )
-}

apps/web/src/pages/home/sections/Layout.tsx

@@ -1,34 +0,0 @@
-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>
-)

apps/web/src/pages/home/sections/PricingSection.tsx

@@ -1,102 +0,0 @@
-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>
-  )
-}

apps/web/src/pages/home/sections/WorkflowSection.tsx

@@ -1,31 +0,0 @@
-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>
-  )
-}