style: prettier format publicRoutes.tsx

- Extract ProtectedRoute + HomeRoute to separate files
- Extract public routes (auth + home) to publicRoutes.tsx
- Extract protected /app routes to appRoutes.tsx
- Main index reduced from 289 to 19 lines (-93%)
- Keep router export and import path unchanged

apps/web/src/pages/voice-materials/hooks/useVoiceMaterials.ts

@@ -1,35 +1,117 @@
-import { useState, useCallback } from "react"
-import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { useState, useMemo, useCallback, useEffect } from "react"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { message } from "antd"
 import {
+  getAssetsByKind,
   createAsset,
   updateAsset,
   deleteAsset,
   uploadAssetDirect,
   getAssetLibraries,
-  type AssetLibraryItem,
+  createAssetLibrary,
 } from "@/api/assets"
-import { tagAsset, untagAsset } from "@/api/tags"
-import { type VoiceGender, type VoiceMaterial, buildMetadata } from "../../types"
-import { getAudioDuration } from "../../utils/audio"
-
-interface UseVoiceMaterialActionsOptions {
-  voiceLibrary?: { id: string; kind: string }
-  materials: VoiceMaterial[]
-  createLibMutation: { mutateAsync: () => Promise<AssetLibraryItem>; isPending: boolean }
-}
+import { type TagItem, getTags, createTag, tagAsset, untagAsset } from "@/api/tags"
+import {
+  type VoiceGender,
+  type ViewMode,
+  type VoiceMaterial,
+  mapAssetToMaterial,
+  buildMetadata,
+} from "../types"
+import { getAudioDuration } from "../utils/audio"
 
 /**
- * 配音素材操作 Hook
- * 封装上传、编辑、删除等变更操作及相关 UI 状态
+ * 配音素材数据 Hook
+ * 封装素材列表查询、筛选状态管理、增删改等数据操作逻辑
  */
-export function useVoiceMaterialActions({
-  voiceLibrary,
-  materials,
-  createLibMutation,
-}: UseVoiceMaterialActionsOptions) {
+export function useVoiceMaterials() {
   const queryClient = useQueryClient()
 
+  // ── 获取 voice 类型素材库（用于上传） ──────────────────────
+  const { data: libraries = [] } = useQuery({
+    queryKey: ["asset-libraries"],
+    queryFn: getAssetLibraries,
+    staleTime: 60_000,
+  })
+
+  const voiceLibrary = useMemo(() => libraries.find((lib) => lib.kind === "voice"), [libraries])
+
+  // 自动创建 voice 素材库（如果不存在）
+  const createLibMutation = useMutation({
+    mutationFn: () => createAssetLibrary({ name: "配音库", kind: "voice" }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
+    },
+  })
+
+  useEffect(() => {
+    if (libraries.length > 0 && !voiceLibrary && !createLibMutation.isPending) {
+      createLibMutation.mutate()
+    }
+  }, [libraries, voiceLibrary, createLibMutation])
+
+  // ── 获取标签列表 ───────────────────────────────────────────
+  const { data: tags = [] } = useQuery({
+    queryKey: ["tags"],
+    queryFn: getTags,
+    staleTime: 60_000,
+  })
+
+  /** 标签 ID → TagItem 映射（用于卡片/行渲染） */
+  const tagMap = useMemo(() => {
+    const m = new Map<string, TagItem>()
+    tags.forEach((t) => m.set(t.id, t))
+    return m
+  }, [tags])
+
+  /** 创建标签 mutation（供 TagSelector 调用） */
+  const createTagMutation = useMutation({
+    mutationFn: (name: string) => createTag(name),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tags"] })
+    },
+  })
+
+  /** 创建标签并返回 TagItem（供 TagSelector 使用） */
+  const handleCreateTag = useCallback(
+    async (name: string): Promise<TagItem> => {
+      return createTagMutation.mutateAsync(name)
+    },
+    [createTagMutation],
+  )
+
+  // ── 视图 & 筛选状态 ────────────────────────────────────────
+  const [viewMode, setViewMode] = useState<ViewMode>("card")
+  const [searchText, setSearchText] = useState("")
+  const [filterGender, setFilterGender] = useState<string>("all")
+  const [filterTagId, setFilterTagId] = useState<string>("all")
+
+  // ── 获取配音素材列表（筛选参数透传后端） ─────────────────
+  const filterKeyword = searchText.trim() || undefined
+  const filterGenderParam = filterGender !== "all" ? filterGender : undefined
+  const filterTagIdsParam = filterTagId !== "all" ? [filterTagId] : undefined
+
+  const { data: assets = [], isLoading } = useQuery({
+    queryKey: [
+      "assets",
+      "voice",
+      {
+        keyword: filterKeyword,
+        gender: filterGenderParam,
+        tag_ids: filterTagIdsParam,
+      },
+    ],
+    queryFn: () =>
+      getAssetsByKind("voice", {
+        keyword: filterKeyword,
+        gender: filterGenderParam,
+        tag_ids: filterTagIdsParam,
+      }),
+    staleTime: 30_000,
+  })
+
+  const materials: VoiceMaterial[] = useMemo(() => assets.map(mapAssetToMaterial), [assets])
+
   // ── 弹窗状态 ──────────────────────────────────────────────
   const [uploadOpen, setUploadOpen] = useState(false)
   const [editingMaterial, setEditingMaterial] = useState<VoiceMaterial | null>(null)
@@ -58,7 +140,7 @@ export function useVoiceMaterialActions({
             queryKey: ["asset-libraries"],
             queryFn: getAssetLibraries,
           })
-          lib = libs.find((l: AssetLibraryItem) => l.kind === "voice")
+          lib = libs.find((l) => l.kind === "voice")
           if (!lib) throw new Error("无法创建配音库")
         }
 
@@ -149,6 +231,40 @@ export function useVoiceMaterialActions({
     },
   })
 
+  /* ── 前端二次筛选（与后端筛选同时存在） ──────────────────── */
+
+  const filtered = useMemo(() => {
+    let list = materials
+    if (filterGender !== "all") {
+      list = list.filter((m) => m.gender === filterGender)
+    }
+    if (filterTagId !== "all") {
+      list = list.filter((m) => m.tagIds.includes(filterTagId))
+    }
+    if (searchText.trim()) {
+      const q = searchText.trim().toLowerCase()
+      list = list.filter(
+        (m) =>
+          m.name.toLowerCase().includes(q) ||
+          m.description.toLowerCase().includes(q) ||
+          m.tagIds.some((id) => tagMap.get(id)?.name?.toLowerCase().includes(q)),
+      )
+    }
+    return list
+  }, [materials, filterGender, filterTagId, searchText, tagMap])
+
+  /* ── 标签使用计数（药丸条展示，按 tag ID 统计） ──────────── */
+
+  const tagCountMap = useMemo(() => {
+    const map: Record<string, number> = {}
+    materials.forEach((m) =>
+      m.tagIds.forEach((id) => {
+        map[id] = (map[id] || 0) + 1
+      }),
+    )
+    return map
+  }, [materials])
+
   /* ── 数据操作 handlers ──────────────────────────────────── */
 
   const handleUpload = useCallback(
@@ -198,6 +314,20 @@ export function useVoiceMaterialActions({
   )
 
   return {
+    // 数据
+    libraries,
+    voiceLibrary,
+    tags,
+    tagMap,
+    materials,
+    filtered,
+    tagCountMap,
+    isLoading,
+    // 视图 & 筛选状态
+    viewMode,
+    searchText,
+    filterGender,
+    filterTagId,
     // 上传 & 编辑状态
     uploadProgress,
     isUploading: uploadMutation.isPending,
@@ -206,11 +336,16 @@ export function useVoiceMaterialActions({
     uploadOpen,
     editingMaterial,
     // 视图控制
+    setViewMode,
+    setSearchText,
+    setFilterGender,
+    setFilterTagId,
     setUploadOpen,
     setEditingMaterial,
     // 操作
+    handleCreateTag,
     handleUpload,
     handleEdit,
     handleDelete,
   }
-}
+}

apps/web/src/pages/voice-materials/hooks/useVoiceMaterials/index.ts

@@ -1,107 +0,0 @@
-import { useMemo } from "react"
-import type { TagItem } from "@/api/tags"
-import { useVoiceTags } from "./useVoiceTags"
-import { useVoiceMaterialFilterState } from "./useVoiceMaterialFilterState"
-import { useVoiceMaterialData } from "./useVoiceMaterialData"
-import { useVoiceMaterialActions } from "./useVoiceMaterialActions"
-import { type VoiceMaterial } from "../../types"
-
-/**
- * 配音素材数据 Hook
- * 封装素材列表查询、筛选状态管理、增删改等数据操作逻辑
- */
-export function useVoiceMaterials() {
-  // 标签管理
-  const { tags, tagMap, handleCreateTag } = useVoiceTags()
-
-  // 筛选视图状态
-  const filterState = useVoiceMaterialFilterState()
-  const { searchText, filterGender, filterTagId } = filterState
-
-  // 后端查询参数
-  const keyword = searchText.trim() || undefined
-  const gender = filterGender !== "all" ? filterGender : undefined
-  const tagIds = filterTagId !== "all" ? [filterTagId] : undefined
-
-  // 数据查询
-  const { libraries, voiceLibrary, materials, isLoading, createLibMutation } = useVoiceMaterialData(
-    { keyword, gender, tagIds },
-  )
-
-  // 操作层
-  const actions = useVoiceMaterialActions({
-    voiceLibrary,
-    materials,
-    createLibMutation,
-  })
-
-  // 前端二次筛选（与后端筛选同时存在，保证即时响应）
-  const filtered = useMemo(() => {
-    let list: VoiceMaterial[] = materials
-    if (filterGender !== "all") {
-      list = list.filter((m) => m.gender === filterGender)
-    }
-    if (filterTagId !== "all") {
-      list = list.filter((m) => m.tagIds.includes(filterTagId))
-    }
-    if (searchText.trim()) {
-      const q = searchText.trim().toLowerCase()
-      list = list.filter(
-        (m) =>
-          m.name.toLowerCase().includes(q) ||
-          m.description.toLowerCase().includes(q) ||
-          m.tagIds.some((id) =>
-            (tagMap as Map<string, TagItem>).get(id)?.name?.toLowerCase().includes(q),
-          ),
-      )
-    }
-    return list
-  }, [materials, filterGender, filterTagId, searchText, tagMap])
-
-  // 标签使用计数
-  const tagCountMap = useMemo(() => {
-    const map: Record<string, number> = {}
-    materials.forEach((m) =>
-      m.tagIds.forEach((id) => {
-        map[id] = (map[id] || 0) + 1
-      }),
-    )
-    return map
-  }, [materials])
-
-  return {
-    // 数据
-    libraries,
-    voiceLibrary,
-    tags,
-    tagMap,
-    materials,
-    filtered,
-    tagCountMap,
-    isLoading,
-    // 视图 & 筛选状态
-    viewMode: filterState.viewMode,
-    searchText: filterState.searchText,
-    filterGender: filterState.filterGender,
-    filterTagId: filterState.filterTagId,
-    // 上传 & 编辑状态
-    uploadProgress: actions.uploadProgress,
-    isUploading: actions.isUploading,
-    isEditing: actions.isEditing,
-    // 弹窗状态
-    uploadOpen: actions.uploadOpen,
-    editingMaterial: actions.editingMaterial,
-    // 视图控制
-    setViewMode: filterState.setViewMode,
-    setSearchText: filterState.setSearchText,
-    setFilterGender: filterState.setFilterGender,
-    setFilterTagId: filterState.setFilterTagId,
-    setUploadOpen: actions.setUploadOpen,
-    setEditingMaterial: actions.setEditingMaterial,
-    // 操作
-    handleCreateTag,
-    handleUpload: actions.handleUpload,
-    handleEdit: actions.handleEdit,
-    handleDelete: actions.handleDelete,
-  }
-}

apps/web/src/pages/voice-materials/hooks/useVoiceMaterials/useVoiceMaterialData.ts

@@ -1,58 +0,0 @@
-import { useMemo, useEffect } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { getAssetsByKind, getAssetLibraries, createAssetLibrary } from "@/api/assets"
-import { type VoiceMaterial, mapAssetToMaterial } from "../../types"
-
-interface UseVoiceMaterialDataOptions {
-  keyword?: string
-  gender?: string
-  tagIds?: string[]
-}
-
-/**
- * 配音素材数据查询 Hook
- * 封装素材库获取、自动创建 voice 库、素材列表查询
- */
-export function useVoiceMaterialData({ keyword, gender, tagIds }: UseVoiceMaterialDataOptions) {
-  const queryClient = useQueryClient()
-
-  // ── 获取 voice 类型素材库 ─────────────────────────────────
-  const { data: libraries = [] } = useQuery({
-    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
-    staleTime: 60_000,
-  })
-
-  const voiceLibrary = useMemo(() => libraries.find((lib) => lib.kind === "voice"), [libraries])
-
-  // 自动创建 voice 素材库（如果不存在）
-  const createLibMutation = useMutation({
-    mutationFn: () => createAssetLibrary({ name: "配音库", kind: "voice" }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-    },
-  })
-
-  useEffect(() => {
-    if (libraries.length > 0 && !voiceLibrary && !createLibMutation.isPending) {
-      createLibMutation.mutate()
-    }
-  }, [libraries, voiceLibrary, createLibMutation])
-
-  // ── 获取配音素材列表 ─────────────────────────────────────
-  const { data: assets = [], isLoading } = useQuery({
-    queryKey: ["assets", "voice", { keyword, gender, tag_ids: tagIds }],
-    queryFn: () => getAssetsByKind("voice", { keyword, gender, tag_ids: tagIds }),
-    staleTime: 30_000,
-  })
-
-  const materials: VoiceMaterial[] = useMemo(() => assets.map(mapAssetToMaterial), [assets])
-
-  return {
-    libraries,
-    voiceLibrary,
-    materials,
-    isLoading,
-    createLibMutation,
-  }
-}

apps/web/src/pages/voice-materials/hooks/useVoiceMaterials/useVoiceMaterialFilterState.ts

@@ -1,24 +0,0 @@
-import { useState } from "react"
-import { type ViewMode } from "../../types"
-
-/**
- * 配音素材筛选视图状态 Hook
- * 管理视图模式、搜索、性别/标签筛选的状态
- */
-export function useVoiceMaterialFilterState() {
-  const [viewMode, setViewMode] = useState<ViewMode>("card")
-  const [searchText, setSearchText] = useState("")
-  const [filterGender, setFilterGender] = useState<string>("all")
-  const [filterTagId, setFilterTagId] = useState<string>("all")
-
-  return {
-    viewMode,
-    searchText,
-    filterGender,
-    filterTagId,
-    setViewMode,
-    setSearchText,
-    setFilterGender,
-    setFilterTagId,
-  }
-}

apps/web/src/pages/voice-materials/hooks/useVoiceMaterials/useVoiceTags.ts

@@ -1,44 +0,0 @@
-import { useMemo, useCallback } from "react"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { type TagItem, getTags, createTag } from "@/api/tags"
-
-/**
- * 配音素材标签管理 Hook
- * 封装标签列表查询、标签映射、创建标签等逻辑
- */
-export function useVoiceTags() {
-  const queryClient = useQueryClient()
-
-  const { data: tags = [] } = useQuery({
-    queryKey: ["tags"],
-    queryFn: getTags,
-    staleTime: 60_000,
-  })
-
-  /** 标签 ID → TagItem 映射（用于卡片/行渲染） */
-  const tagMap = useMemo(() => {
-    const m = new Map<string, TagItem>()
-    tags.forEach((t) => m.set(t.id, t))
-    return m
-  }, [tags])
-
-  const createTagMutation = useMutation({
-    mutationFn: (name: string) => createTag(name),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["tags"] })
-    },
-  })
-
-  const handleCreateTag = useCallback(
-    async (name: string): Promise<TagItem> => {
-      return createTagMutation.mutateAsync(name)
-    },
-    [createTagMutation],
-  )
-
-  return {
-    tags,
-    tagMap,
-    handleCreateTag,
-  }
-}

apps/web/src/router/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { Navigate } from "react-router-dom"
+import { useAuthStore } from "@/store/authStore"
+
+/** 受保护的路由组件 */
+// eslint-disable-next-line react-refresh/only-export-components
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
+
+  if (!isAuthenticated || !hasAccessToken) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}

apps/web/src/router/appRoutes.tsx

@@ -0,0 +1,225 @@
+import { Navigate, type RouteObject } from "react-router-dom"
+import MainLayout from "@/components/layout/MainLayout"
+import { ProtectedRoute } from "./ProtectedRoute"
+
+/**
+ * 受保护的 /app 子路由
+ * 所有页面使用 lazy 懒加载
+ */
+const appChildren: RouteObject[] = [
+  {
+    index: true,
+    element: <Navigate to="/app/dashboard" replace />,
+  },
+  {
+    path: "dashboard",
+    lazy: () =>
+      import("@/pages/dashboard/Dashboard").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "assets",
+    lazy: () =>
+      import("@/pages/assets/AssetLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "titles",
+    lazy: () =>
+      import("@/pages/titles/TitleLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voices",
+    lazy: () =>
+      import("@/pages/voices/VoiceLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "templates",
+    lazy: () =>
+      import("@/pages/templates/TemplateLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "generate",
+    lazy: () =>
+      import("@/pages/generate/GeneratePage").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "history",
+    lazy: () =>
+      import("@/pages/history/TaskHistory").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "products",
+    lazy: () =>
+      import("@/pages/products/ProductLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "products/:id",
+    lazy: () =>
+      import("@/pages/products/ProductDetail").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "tasks",
+    lazy: () =>
+      import("@/pages/tasks/TaskCenter").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "editing-planner",
+    lazy: () =>
+      import("@/pages/editing-planner/EditingPlanner").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "my-templates",
+    lazy: () =>
+      import("@/pages/my-templates/MyTemplates").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voice-clone",
+    lazy: () =>
+      import("@/pages/voice-clone/VoiceClone").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "voice-materials",
+    lazy: () =>
+      import("@/pages/voice-materials/VoiceMaterialLibrary").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "my-voices",
+    lazy: () =>
+      import("@/pages/my-voices/MyVoices").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "accounts",
+    lazy: () =>
+      import("@/pages/accounts/Accounts").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationUpload").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication/results",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationResults").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "duplication/:id",
+    lazy: () =>
+      import("@/pages/duplication/DuplicationDetail").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription",
+    lazy: () =>
+      import("@/pages/subscription/Plans").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription/upgrade",
+    lazy: () =>
+      import("@/pages/subscription/UpgradeSubscription").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "subscription/billing",
+    lazy: () =>
+      import("@/pages/subscription/Billing").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "profile",
+    lazy: () =>
+      import("@/pages/profile/Settings").then((m) => ({
+        Component: m.default,
+      })),
+  },
+  {
+    path: "admin",
+    children: [
+      {
+        index: true,
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "users",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "analytics",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "monitor",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+      {
+        path: "logs",
+        lazy: () =>
+          import("@/pages/admin/AdminComingSoon").then((m) => ({
+            Component: m.default,
+          })),
+      },
+    ],
+  },
+]
+
+export const appRoutes: RouteObject = {
+  path: "/app",
+  element: (
+    <ProtectedRoute>
+      <MainLayout />
+    </ProtectedRoute>
+  ),
+  children: appChildren,
+}

apps/web/src/router/index.tsx

@@ -3,283 +3,13 @@
  * 扁平化路由：去掉 Project 层级，所有资源直接归属用户
  */
 import { createBrowserRouter, Navigate } from "react-router-dom"
-import React from "react"
-import MainLayout from "@/components/layout/MainLayout"
-import Login from "@/pages/auth/Login"
-import Register from "@/pages/auth/Register"
-import ForgotPassword from "@/pages/auth/ForgotPassword"
-import ResetPassword from "@/pages/auth/ResetPassword"
-import WechatCallback from "@/pages/auth/WechatCallback"
-import HomePage from "@/pages/home/HomePage"
-import { useAuthStore } from "@/store/authStore"
-
-/** 受保护的路由组件 */
-// eslint-disable-next-line react-refresh/only-export-components
-const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
-  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
-
-  if (!isAuthenticated || !hasAccessToken) {
-    return <Navigate to="/login" replace />
-  }
-
-  return <>{children}</>
-}
-
-/** 首页路由组件：已登录跳 dashboard，未登录显示落地页 */
-// eslint-disable-next-line react-refresh/only-export-components
-const HomeRoute: React.FC = () => {
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
-  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
-
-  if (isAuthenticated && hasAccessToken) {
-    return <Navigate to="/app/dashboard" replace />
-  }
-
-  return <HomePage />
-}
+import { publicRoutes } from "./publicRoutes"
+import { appRoutes } from "./appRoutes"
 
 /** 路由配置 */
 export const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <HomeRoute />,
-  },
-  {
-    path: "/login",
-    element: <Login />,
-  },
-  {
-    path: "/register",
-    element: <Register />,
-  },
-  {
-    path: "/forgot-password",
-    element: <ForgotPassword />,
-  },
-  {
-    path: "/reset-password",
-    element: <ResetPassword />,
-  },
-  {
-    path: "/auth/wechat/callback",
-    element: <WechatCallback />,
-  },
-  {
-    path: "/app",
-    element: (
-      <ProtectedRoute>
-        <MainLayout />
-      </ProtectedRoute>
-    ),
-    children: [
-      {
-        index: true,
-        element: <Navigate to="/app/dashboard" replace />,
-      },
-      {
-        path: "dashboard",
-        lazy: () =>
-          import("@/pages/dashboard/Dashboard").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "assets",
-        lazy: () =>
-          import("@/pages/assets/AssetLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "titles",
-        lazy: () =>
-          import("@/pages/titles/TitleLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voices",
-        lazy: () =>
-          import("@/pages/voices/VoiceLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "templates",
-        lazy: () =>
-          import("@/pages/templates/TemplateLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "generate",
-        lazy: () =>
-          import("@/pages/generate/GeneratePage").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "history",
-        lazy: () =>
-          import("@/pages/history/TaskHistory").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "products",
-        lazy: () =>
-          import("@/pages/products/ProductLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "products/:id",
-        lazy: () =>
-          import("@/pages/products/ProductDetail").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "tasks",
-        lazy: () =>
-          import("@/pages/tasks/TaskCenter").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "editing-planner",
-        lazy: () =>
-          import("@/pages/editing-planner/EditingPlanner").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "my-templates",
-        lazy: () =>
-          import("@/pages/my-templates/MyTemplates").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voice-clone",
-        lazy: () =>
-          import("@/pages/voice-clone/VoiceClone").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "voice-materials",
-        lazy: () =>
-          import("@/pages/voice-materials/VoiceMaterialLibrary").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "my-voices",
-        lazy: () =>
-          import("@/pages/my-voices/MyVoices").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "accounts",
-        lazy: () =>
-          import("@/pages/accounts/Accounts").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationUpload").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication/results",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationResults").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "duplication/:id",
-        lazy: () =>
-          import("@/pages/duplication/DuplicationDetail").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription",
-        lazy: () =>
-          import("@/pages/subscription/Plans").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription/upgrade",
-        lazy: () =>
-          import("@/pages/subscription/UpgradeSubscription").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "subscription/billing",
-        lazy: () =>
-          import("@/pages/subscription/Billing").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "profile",
-        lazy: () =>
-          import("@/pages/profile/Settings").then((m) => ({
-            Component: m.default,
-          })),
-      },
-      {
-        path: "admin",
-        children: [
-          {
-            index: true,
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "users",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "analytics",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "monitor",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-          {
-            path: "logs",
-            lazy: () =>
-              import("@/pages/admin/AdminComingSoon").then((m) => ({
-                Component: m.default,
-              })),
-          },
-        ],
-      },
-    ],
-  },
+  ...publicRoutes,
+  appRoutes,
   {
     path: "*",
     element: <Navigate to="/" replace />,

apps/web/src/router/publicRoutes.tsx

@@ -0,0 +1,48 @@
+import { Navigate, type RouteObject } from "react-router-dom"
+import HomePage from "@/pages/home/HomePage"
+import Login from "@/pages/auth/Login"
+import Register from "@/pages/auth/Register"
+import ForgotPassword from "@/pages/auth/ForgotPassword"
+import ResetPassword from "@/pages/auth/ResetPassword"
+import WechatCallback from "@/pages/auth/WechatCallback"
+import { useAuthStore } from "@/store/authStore"
+
+/** 首页路由组件：已登录跳 dashboard，未登录显示落地页 */
+// eslint-disable-next-line react-refresh/only-export-components
+const HomeRoute: React.FC = () => {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const hasAccessToken = Boolean(localStorage.getItem("access_token"))
+
+  if (isAuthenticated && hasAccessToken) {
+    return <Navigate to="/app/dashboard" replace />
+  }
+
+  return <HomePage />
+}
+
+export const publicRoutes: RouteObject[] = [
+  {
+    path: "/",
+    element: <HomeRoute />,
+  },
+  {
+    path: "/login",
+    element: <Login />,
+  },
+  {
+    path: "/register",
+    element: <Register />,
+  },
+  {
+    path: "/forgot-password",
+    element: <ForgotPassword />,
+  },
+  {
+    path: "/reset-password",
+    element: <ResetPassword />,
+  },
+  {
+    path: "/auth/wechat/callback",
+    element: <WechatCallback />,
+  },
+]