fix(backend): 修复视频生成接口401认证失败问题

- 修正可灵视频任务提交时认证失败导致的视频生成错误 - 解决接口返回500错误的问题 - 优化视频生成相关的错误日志提示 - 保证上传目录准备状态的正确显示 - 提升后台服务日志的稳定性和连续性
feat(frontend): 添加首页及调整导航和路由逻辑
2026-04-13 14:41:02 +08:00 · 2026-03-29 17:15:14 +08:00
16 changed files with 999 additions and 21 deletions
--- a/backend/app/schemas/design.py
+++ b/backend/app/schemas/design.py
@@ -27,8 +27,9 @@ class DesignCreate(BaseModel):
    """创建设计请求"""
    category_id: int = Field(..., description="品类ID")
    sub_type_id: Optional[int] = Field(None, description="子类型ID")
+    sub_type_name: Optional[str] = Field(None, max_length=50, description="自定义子类型名称")
    color_id: Optional[int] = Field(None, description="颜色ID")
-    prompt: str = Field(..., min_length=1, max_length=2000, description="设计需求")
+    prompt: Optional[str] = Field(None, max_length=2000, description="设计需求")
    carving_technique: Optional[str] = Field(None, max_length=50, description="雕刻工艺")
    design_style: Optional[str] = Field(None, max_length=50, description="设计风格")
    motif: Optional[str] = Field(None, max_length=100, description="题材纹样")
--- a/backend/app/services/design_service.py
+++ b/backend/app/services/design_service.py
@@ -139,7 +139,7 @@ async def _generate_ai_images(
        prompt_text = build_prompt(
            category_name=category.name,
            view_name=view_name,
-            sub_type_name=sub_type.name if sub_type else None,
+            sub_type_name=sub_type.name if sub_type else design_data.sub_type_name,
            color_name=color.name if color else None,
            user_prompt=design_data.prompt,
            carving_technique=design_data.carving_technique,
@@ -244,7 +244,7 @@ def _generate_mock_fallback(
    save_path = os.path.join(settings.UPLOAD_DIR, "designs", f"{design.id}.png")
    image_url = generate_mock_design(
        category_name=category.name,
-        sub_type_name=sub_type.name if sub_type else None,
+        sub_type_name=sub_type.name if sub_type else design_data.sub_type_name,
        color_name=color.name if color else None,
        prompt=design_data.prompt,
        save_path=save_path,
--- a/backend/uploads/designs/28_0_8f1d51f1.png
+++ b/backend/uploads/designs/28_0_8f1d51f1.png
--- a/backend/uploads/designs/28_1_652b3742.png
+++ b/backend/uploads/designs/28_1_652b3742.png
--- a/backend/uploads/designs/28_2_afd0819c.png
+++ b/backend/uploads/designs/28_2_afd0819c.png
--- a/backend/uploads/designs/28_3_597f23e1.png
+++ b/backend/uploads/designs/28_3_597f23e1.png
--- a/backend/uvicorn.log
+++ b/backend/uvicorn.log
@@ -270,3 +270,172 @@ 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
+INFO:     127.0.0.1:58408 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58417 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58419 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58504 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58503 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58509 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58511 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58517 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58519 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58527 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58529 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58535 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58534 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58550 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58551 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58638 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58644 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58643 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58649 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58651 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58658 - "GET /api/categories/10/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58659 - "GET /api/categories/10/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58665 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58664 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58670 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58671 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58677 - "GET /api/categories/7/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58678 - "GET /api/categories/7/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58684 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58686 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58692 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58691 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+WARNING:  StatReload detected changes in 'app/schemas/design.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [903]
+👋 应用已关闭
+INFO:     Started server process [3994]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:58700 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58699 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58708 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58709 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58715 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58716 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58721 - "GET /api/categories/5/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58722 - "GET /api/categories/5/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58727 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58728 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58734 - "GET /api/categories/7/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58733 - "GET /api/categories/7/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58739 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58740 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58746 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58747 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58751 - "GET /api/categories/10/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58753 - "GET /api/categories/10/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58758 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58759 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
+WARNING:  StatReload detected changes in 'app/services/design_service.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [3994]
+👋 应用已关闭
+INFO:     Started server process [4005]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/design_service.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [4005]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [4016]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:58910 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58916 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58918 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58925 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58930 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58931 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58937 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:58936 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+WARNING:  StatReload detected changes in 'app/schemas/design.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [4016]
+👋 应用已关闭
+INFO:     Started server process [4272]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:59022 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59025 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59072 - "POST /api/auth/login HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59076 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59082 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59089 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59090 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59224 - "POST /api/designs/generate HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59331 - "GET /uploads/designs/28_0_8f1d51f1.png HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59345 - "GET /uploads/designs/28_2_afd0819c.png HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59348 - "GET /uploads/designs/28_3_597f23e1.png HTTP/1.1" 200 OK
+INFO:     127.0.0.1:59352 - "GET /uploads/designs/28_1_652b3742.png HTTP/1.1" 200 OK
+INFO:     127.0.0.1:50695 - "GET /projects.php HTTP/1.1" 404 Not Found
+INFO:     ('127.0.0.1', 55036) - "WebSocket /CLodopfuncs.js" 403
+INFO:     connection rejected (403 Forbidden)
+INFO:     connection closed
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [4272]
+👋 应用已关闭
+INFO:     Stopping reloader process [63566]
--- a/frontend/src/api/design.ts
+++ b/frontend/src/api/design.ts
@@ -52,6 +52,7 @@ export interface DesignListResponse {
 export interface GenerateDesignParams {
  category_id: number
  sub_type_id?: number
+  sub_type_name?: string
  color_id?: number
  prompt: string
  carving_technique?: string
--- 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>
--- 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')
--- a/frontend/src/components/SubTypePanel.vue
+++ b/frontend/src/components/SubTypePanel.vue
@@ -27,7 +27,7 @@
          v-for="subType in subTypes"
          :key="subType.id"
          class="subtype-card"
-          :class="{ active: currentSubType?.id === subType.id }"
+          :class="{ active: !useCustomSubType && currentSubType?.id === subType.id }"
          @click="handleSelectSubType(subType)"
        >
          <div class="card-preview">
@@ -44,9 +44,33 @@
            <span class="card-name">{{ subType.name }}</span>
          </div>
        </div>
+        <!-- 自定义类型卡片 -->
+        <div
+          class="subtype-card custom-card"
+          :class="{ active: useCustomSubType }"
+          @click="enableCustomSubType"
+        >
+          <div class="card-preview">
+            <div class="card-placeholder custom-placeholder">
+              <span>+</span>
+            </div>
+          </div>
+          <div class="card-info">
+            <span class="card-name">自定义</span>
+          </div>
+        </div>
+      </div>
+      <!-- 自定义输入框 -->
+      <div v-if="useCustomSubType" class="custom-input-area">
+        <el-input
+          v-model="customSubTypeName"
+          placeholder="请输入自定义类型名称"
+          size="large"
+          clearable
+        />
      </div>
      <!-- 选择子类型后显示颜色选择（如有颜色数据） -->
-      <template v-if="currentSubType && colors.length > 0">
+      <template v-if="(currentSubType || (useCustomSubType && customSubTypeName)) && colors.length > 0">
        <ColorPicker
          v-model="selectedColor"
          :colors="colors"
@@ -57,7 +81,7 @@
          </button>
        </div>
      </template>
-      <div v-else-if="currentSubType" class="action-bar">
+      <div v-else-if="currentSubType || (useCustomSubType && customSubTypeName)" class="action-bar">
        <button class="btn-primary" @click="goToGenerate">
          开始设计
        </button>
@@ -73,15 +97,31 @@
          v-for="subType in subTypes"
          :key="subType.id"
          class="size-tag"
-          :class="{ active: currentSubType?.id === subType.id }"
+          :class="{ active: !useCustomSubType && currentSubType?.id === subType.id }"
          @click="handleSelectSubType(subType)"
        >
          {{ subType.name }}
        </div>
+        <div
+          class="size-tag custom-tag"
+          :class="{ active: useCustomSubType }"
+          @click="enableCustomSubType"
+        >
+          + 自定义
+        </div>
+      </div>
+      <!-- 自定义输入框 -->
+      <div v-if="useCustomSubType" class="custom-input-area">
+        <el-input
+          v-model="customSubTypeName"
+          placeholder="请输入自定义规格"
+          size="large"
+          clearable
+        />
      </div>

      <!-- 选择尺寸后显示颜色选择 -->
-      <template v-if="currentSubType && colors.length > 0">
+      <template v-if="(currentSubType || (useCustomSubType && customSubTypeName)) && colors.length > 0">
        <ColorPicker
          v-model="selectedColor"
          :colors="colors"
@@ -148,6 +188,17 @@ const loading = computed(() => categoryStore.loading)
 // 本地颜色选择状态，用于 v-model 双向绑定
 const selectedColor = ref<ColorOption | null>(null)

+// 自定义子类型状态
+const useCustomSubType = ref(false)
+const customSubTypeName = ref('')
+
+const enableCustomSubType = () => {
+  useCustomSubType.value = true
+  customSubTypeName.value = ''
+  categoryStore.selectSubType(null as any)
+  selectedColor.value = null
+}
+
 // size_color 流程的动态标题
 const sizeColorTitle = computed(() => {
  const name = currentCategory.value?.name || ''
@@ -178,6 +229,8 @@ watch(currentSubType, () => {
 })

 const handleSelectSubType = (subType: SubType) => {
+  useCustomSubType.value = false
+  customSubTypeName.value = ''
  categoryStore.selectSubType(subType)
 }

@@ -190,6 +243,8 @@ const goToGenerate = () => {

  if (currentSubType.value) {
    query.subTypeId = String(currentSubType.value.id)
+  } else if (useCustomSubType.value && customSubTypeName.value) {
+    query.customSubType = customSubTypeName.value
  }

  if (selectedColor.value) {
@@ -377,6 +432,41 @@ $text-light: #999999;
    border-color: $primary-color;
    color: #fff;
  }
+
+  &.custom-tag {
+    border-style: dashed;
+    color: $primary-color;
+
+    &:hover {
+      background: rgba($primary-color, 0.06);
+    }
+
+    &.active {
+      background-color: $primary-color;
+      border-color: $primary-color;
+      border-style: solid;
+      color: #fff;
+    }
+  }
+}
+
+// 自定义输入区域
+.custom-input-area {
+  margin-top: 20px;
+  max-width: 400px;
+}
+
+// 自定义卡片
+.custom-card {
+  .custom-placeholder {
+    background: linear-gradient(135deg, rgba($primary-light, 0.5), rgba($primary-color, 0.5));
+    border: 2px dashed rgba(#fff, 0.6);
+
+    span {
+      font-size: 28px;
+      font-weight: 300;
+    }
+  }
 }

 // Simple 类型介绍
--- 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 }
--- a/frontend/src/views/GeneratePage.vue
+++ b/frontend/src/views/GeneratePage.vue
@@ -221,7 +221,7 @@
        <div class="generate-action">
          <button 
            class="btn-generate" 
-            :disabled="!prompt.trim() || generating"
+            :disabled="generating"
            @click="handleGenerate"
          >
            <el-icon v-if="!generating"><MagicStick /></el-icon>
@@ -277,6 +277,9 @@ const subTypeId = computed(() => {
  const id = route.query.sub_type_id || route.query.subTypeId
  return id ? Number(id) : null
 })
+const customSubType = computed(() => {
+  return (route.query.customSubType as string) || ''
+})
 const colorId = computed(() => {
  const id = route.query.color_id || route.query.colorId
  return id ? Number(id) : null
@@ -296,6 +299,7 @@ const categoryName = computed(() => {

 const subTypeName = computed(() => {
  if (currentDesign.value?.sub_type?.name) return currentDesign.value.sub_type.name
+  if (customSubType.value) return customSubType.value
  if (!subTypeId.value) return ''
  const st = categoryStore.subTypes.find(s => s.id === subTypeId.value)
  return st?.name || ''
@@ -393,7 +397,7 @@ const promptPlaceholder = computed(() => {

 // 返回设计页
 const goBack = () => {
-  router.push('/')
+  router.push('/design')
 }

 // 构建最终prompt：随形品类时将形状描述拼接到前面
@@ -413,15 +417,11 @@ const handleGenerate = async () => {
    ElMessage.error('缺少品类参数')
    return
  }
-  if (!prompt.value.trim()) {
-    ElMessage.warning('请输入设计描述')
-    return
-  }
-
  try {
    await designStore.generateDesign({
      category_id: categoryId.value,
      sub_type_id: subTypeId.value || undefined,
+      sub_type_name: customSubType.value || undefined,
      color_id: colorId.value || undefined,
      prompt: _buildFinalPrompt(),
      carving_technique: carvingTechnique.value || customCarving.value || undefined,
--- a/frontend/src/views/HomePage.vue
+++ 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>
--- 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 {
--- 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 {