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

- 修正可灵视频任务提交时认证失败导致的视频生成错误 - 解决接口返回500错误的问题 - 优化视频生成相关的错误日志提示 - 保证上传目录准备状态的正确显示 - 提升后台服务日志的稳定性和连续性
feat(frontend): 添加首页及调整导航和路由逻辑
2026-04-13 14:41:02 +08:00 · 2026-03-29 17:15:14 +08:00 · 2026-03-29 15:55:27 +08:00 · 2026-03-28 19:51:52 +08:00
26 changed files with 1808 additions and 530 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- 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/26.png
+++ b/backend/uploads/designs/26.png
--- 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
@@ -80,3 +80,362 @@ INFO:     Waiting for application startup.
 INFO:     Application startup complete.
 ✅ 上传目录已准备: uploads
 INFO:     127.0.0.1:64149 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
+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 [65045]
+👋 应用已关闭
+INFO:     Started server process [69988]
+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 [69988]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [69995]
+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 [69995]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [70000]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/ai_3d_generator.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [70000]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [71187]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/ai_video_generator_kling.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [71187]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [71203]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/ai_3d_generator.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [71203]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [71899]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:52861 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52869 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52871 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52874 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:52943 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52951 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:52953 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53198 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53206 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53208 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53211 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:53280 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53288 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53290 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53426 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53434 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53436 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53602 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53611 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53613 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53616 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:55190 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:55199 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:55201 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:55204 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:55234 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:55241 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:55243 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56832 - "GET /uploads/models/506909359d6c45fe9e43108ee7765a9a.glb HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:56840 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56846 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56849 - "GET /api/designs/27 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56856 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56859 - "GET /uploads/designs/26.png HTTP/1.1" 304 Not Modified
+INFO:     127.0.0.1:56865 - "DELETE /api/designs/26 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56868 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56902 - "GET /api/designs/24 HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56925 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:56927 - "GET /api/designs?page=1&page_size=20 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 [71899]
+👋 应用已关闭
+INFO:     Started server process [75417]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [75417]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [76192]
+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 [76192]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [76199]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:63820 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:63827 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
+WARNING:  StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [76199]
+👋 应用已关闭
+INFO:     Started server process [83069]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [83069]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [903]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:53852 - "POST /api/auth/login HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53856 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53862 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53865 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53866 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53870 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53872 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53877 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53878 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53883 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53885 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53890 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54023 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54021 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54029 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54027 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54050 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54048 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54076 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54075 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54092 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54091 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54098 - "GET /api/categories/7/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54096 - "GET /api/categories/7/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54104 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54102 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54110 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54109 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54117 - "GET /api/categories/10/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54115 - "GET /api/categories/10/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54123 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54121 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54131 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54129 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54134 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
+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/assets/styles/theme.scss
+++ b/frontend/src/assets/styles/theme.scss
@@ -1,25 +1,67 @@
 // 玉宗品牌色 - 中式雅致风格
 $primary-color: #5B7E6B;      // 青玉色 - 主色调
 $primary-light: #8BAF9C;      // 浅青
+$primary-lighter: #D4E5DB;    // 极浅青
 $primary-dark: #3D5A4A;       // 深青
 $secondary-color: #C4A86C;    // 金缕色 - 辅助色
+$secondary-light: #E0D1A8;    // 浅金
 $bg-color: #FAF8F5;           // 暖白底色
 $bg-dark: #F0EDE8;            // 深一级底色
+$bg-card: #FFFFFF;            // 卡片底色
 $text-primary: #2C2C2C;       // 主文字
 $text-secondary: #6B6B6B;     // 次要文字
 $text-light: #999999;         // 辅助文字
+$text-placeholder: #BFBFBF;   // 占位文字
 $border-color: #E8E4DF;       // 边框色
+$border-light: #F0EDE8;       // 浅边框
 $ink-color: #1A1A2E;          // 墨色

+// 圆角
+$radius-sm: 8px;
+$radius: 12px;
+$radius-lg: 16px;
+$radius-xl: 20px;
+$radius-pill: 999px;
+
+// 阴影
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+$shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+
 // Element Plus 主题覆盖
 :root {
+  // 颜色
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-3: #{$primary-light};
+  --el-color-primary-light-5: #a8c7b5;
+  --el-color-primary-light-7: #{$primary-lighter};
+  --el-color-primary-light-8: #dfeee5;
+  --el-color-primary-light-9: #eaf4ee;
  --el-color-primary-dark-2: #{$primary-dark};
  --el-bg-color: #{$bg-color};
+  --el-bg-color-overlay: #{$bg-card};
  --el-border-color: #{$border-color};
+  --el-border-color-light: #{$border-light};
  --el-text-color-primary: #{$text-primary};
  --el-text-color-regular: #{$text-secondary};
+  --el-text-color-secondary: #{$text-light};
+  --el-text-color-placeholder: #{$text-placeholder};
+  --el-fill-color-light: #{$bg-color};
+  --el-fill-color-lighter: #{$bg-color};
+
+  // 圆角
+  --el-border-radius-base: #{$radius-sm};
+  --el-border-radius-small: 6px;
+  --el-border-radius-round: #{$radius-pill};
+
+  // 字体
+  --el-font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
+  --el-font-size-base: 14px;
+
+  // 阴影
+  --el-box-shadow: #{$shadow};
+  --el-box-shadow-light: #{$shadow-sm};
+  --el-box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.03);
 }

 // 全局基础样式
@@ -30,7 +72,7 @@ $ink-color: #1A1A2E;          // 墨色
 }

 body {
-  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
  background-color: $bg-color;
  color: $text-primary;
  -webkit-font-smoothing: antialiased;
@@ -39,6 +81,10 @@ body {
 // 滚动条美化
 ::-webkit-scrollbar {
  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
  background: $border-color;
@@ -47,3 +93,44 @@ body {
 ::-webkit-scrollbar-thumb:hover {
  background: $text-light;
 }
+
+// Element Plus 组件全局样式增强
+.el-button--primary {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+  border-radius: $radius-sm !important;
+
+  &:hover, &:focus {
+    background-color: $primary-dark !important;
+    border-color: $primary-dark !important;
+  }
+}
+
+.el-input__wrapper {
+  border-radius: $radius-sm !important;
+  transition: all 0.25s ease !important;
+}
+
+.el-textarea__inner {
+  border-radius: $radius !important;
+}
+
+.el-card {
+  border-radius: $radius !important;
+  border: 1px solid $border-light !important;
+  box-shadow: $shadow-sm !important;
+}
+
+.el-dialog {
+  border-radius: $radius-lg !important;
+}
+
+.el-message-box {
+  border-radius: $radius !important;
+}
+
+.el-dropdown-menu {
+  border-radius: $radius-sm !important;
+  border: 1px solid $border-light !important;
+  box-shadow: $shadow !important;
+}
--- 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
@@ -3,23 +3,23 @@
    <div class="header-left">
      <router-link to="/" class="logo">
        <span class="logo-text">玉 宗</span>
+        <span class="logo-sub">YUZONG JEWELRY</span>
      </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">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="user-dropdown">
+            <span class="user-avatar">{{ avatarChar }}</span>
            <span class="user-nickname">{{ userNickname }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <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>
@@ -45,10 +45,13 @@ const userStore = useUserStore()
 const isLoggedIn = computed(() => !!userStore.token)
 const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
 const isAdmin = computed(() => !!userStore.userInfo?.is_admin)
+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')
@@ -57,49 +60,82 @@ const handleCommand = (command: string) => {
 </script>

 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+$text-secondary: #6B6B6B;
+$text-primary: #2C2C2C;
+$border-color: #E8E4DF;
+$bg-color: #FAF8F5;
+
 .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  height: 60px;
+  height: 64px;
  padding: 0 32px;
  background-color: #fff;
-  border-bottom: 1px solid #E8E4DF;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }

 .header-left {
  .logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
    text-decoration: none;
+    gap: 2px;
  }
  .logo-text {
-    font-size: 24px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 4px;
+    font-size: 22px;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 6px;
+    line-height: 1.2;
+  }
+  .logo-sub {
+    font-size: 9px;
+    color: $text-secondary;
+    letter-spacing: 2.5px;
+    font-weight: 400;
+    opacity: 0.7;
  }
 }

 .header-nav {
  display: flex;
-  gap: 32px;
+  gap: 8px;

  .nav-link {
-    color: #6B6B6B;
+    color: $text-secondary;
    text-decoration: none;
-    font-size: 15px;
-    padding: 8px 0;
-    border-bottom: 2px solid transparent;
-    transition: all 0.3s;
+    font-size: 14px;
+    padding: 8px 20px;
+    border-radius: 20px;
+    transition: all 0.25s ease;
+    font-weight: 500;
+
+    &:hover {
+      color: $primary-color;
+      background: rgba($primary-color, 0.06);
+    }

-    &:hover,
    &.router-link-active {
-      color: #5B7E6B;
-      border-bottom-color: #5B7E6B;
+      color: #fff;
+      background: $primary-color;
    }

    &.admin-link {
      color: #E6A23C;
-      &:hover, &.router-link-active { color: #E6A23C; border-bottom-color: #E6A23C; }
+      &:hover {
+        background: rgba(#E6A23C, 0.08);
+      }
+      &.router-link-active {
+        color: #fff;
+        background: #E6A23C;
+      }
    }
  }
 }
@@ -107,26 +143,27 @@ const handleCommand = (command: string) => {
 .header-right {
  display: flex;
  align-items: center;
-  gap: 16px;
+  gap: 12px;

  .auth-link {
-    color: #6B6B6B;
+    color: $text-secondary;
    text-decoration: none;
    font-size: 14px;
-    padding: 6px 16px;
-    transition: color 0.3s;
+    padding: 8px 20px;
+    border-radius: 20px;
+    transition: all 0.25s ease;

    &:hover {
-      color: #5B7E6B;
+      color: $primary-color;
+      background: rgba($primary-color, 0.06);
    }

    &.auth-register {
-      background-color: #5B7E6B;
+      background-color: $primary-color;
      color: #fff;
-      border-radius: 4px;

      &:hover {
-        background-color: #3D5A4A;
+        background-color: $primary-dark;
      }
    }
  }
@@ -134,18 +171,35 @@ const handleCommand = (command: string) => {
  .user-dropdown {
    display: flex;
    align-items: center;
-    gap: 4px;
+    gap: 8px;
    cursor: pointer;
-    color: #2C2C2C;
+    color: $text-primary;
    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    transition: all 0.25s ease;

    &:hover {
-      color: #5B7E6B;
+      background: rgba($primary-color, 0.06);
+      color: $primary-color;
    }
  }

+  .user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
  .user-nickname {
-    max-width: 120px;
+    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
--- a/frontend/src/components/CategoryNav.vue
+++ b/frontend/src/components/CategoryNav.vue
@@ -1,7 +1,8 @@
 <template>
  <nav class="category-nav">
-    <div class="nav-header">
-      <h3>玉石品类</h3>
+    <div class="nav-brand">
+      <h3 class="brand-title">玉 宗</h3>
+      <span class="brand-sub">YUZONG JEWELRY</span>
    </div>
    <ul class="category-list">
      <li
@@ -11,6 +12,7 @@
        :class="{ active: currentCategory?.id === category.id }"
        @click="handleSelect(category)"
      >
+        <span class="category-icon">{{ getCategoryIcon(category.name) }}</span>
        <span class="category-name">{{ category.name }}</span>
      </li>
    </ul>
@@ -30,52 +32,93 @@ const currentCategory = computed(() => categoryStore.currentCategory)
 const handleSelect = (category: Category) => {
  categoryStore.selectCategory(category)
 }
+
+// 品类图标映射
+const getCategoryIcon = (name: string): string => {
+  const iconMap: Record<string, string> = {
+    '牌子': '🏷️',
+    '珠子': '🔵',
+    '手把件': '🤲',
+    '雕刻件': '💎',
+    '摆件': '🏺',
+    '手镯': '⭕',
+    '耳钉': '⭐',
+    '耳饰': '🌙',
+    '手链': '🔗',
+    '项链': '📿',
+    '戒指': '💍',
+    '表带': '⌚',
+    '随形': '🗿',
+    '吊坠': '🔻',
+    '珠串': '📿',
+  }
+  for (const [key, icon] of Object.entries(iconMap)) {
+    if (name.includes(key)) return icon
+  }
+  return '💠'
+}
 </script>

 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
+$text-light: #999999;

 .category-nav {
-  width: 200px;
-  min-width: 200px;
+  width: 220px;
+  min-width: 220px;
  height: 100%;
-  background-color: #fff;
-  border-right: 1px solid $border-color;
+  background: linear-gradient(180deg, #f7f9f7 0%, #f0f4f1 100%);
  display: flex;
  flex-direction: column;
+  border-right: 1px solid rgba($border-color, 0.5);
 }

-.nav-header {
-  padding: 20px 16px;
-  border-bottom: 1px solid $border-color;
+.nav-brand {
+  padding: 24px 20px 20px;
+  text-align: center;
+  border-bottom: 1px solid rgba($border-color, 0.4);

-  h3 {
-    font-size: 16px;
-    font-weight: 500;
-    color: $text-primary;
-    margin: 0;
+  .brand-title {
+    font-size: 26px;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 8px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-sub {
+    font-size: 10px;
+    color: $text-light;
    letter-spacing: 2px;
+    font-weight: 400;
  }
 }

 .category-list {
  list-style: none;
  margin: 0;
-  padding: 0;
+  padding: 12px 12px;
  flex: 1;
  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }

 .category-item {
-  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
  cursor: pointer;
+  border-radius: 12px;
  transition: all 0.25s ease;
-  border-bottom: 1px solid $border-color;

  &:hover {
    background-color: rgba($primary-color, 0.06);
@@ -84,17 +127,28 @@ $text-secondary: #6B6B6B;
  &.active {
    background-color: $primary-color;

+    .category-icon {
+      filter: brightness(1.2);
+    }
+
    .category-name {
      color: #fff;
-      font-weight: 500;
+      font-weight: 600;
    }
  }
 }

+.category-icon {
+  font-size: 16px;
+  width: 24px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
 .category-name {
  font-size: 14px;
  color: $text-secondary;
  letter-spacing: 1px;
-  transition: color 0.25s ease;
+  transition: all 0.25s ease;
 }
 </style>
--- a/frontend/src/components/ColorPicker.vue
+++ b/frontend/src/components/ColorPicker.vue
@@ -44,12 +44,12 @@ $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;

 .color-picker {
-  margin-top: 24px;
+  margin-top: 28px;
 }

 .picker-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
@@ -66,21 +66,26 @@ $text-secondary: #6B6B6B;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
-  padding: 8px;
-  border-radius: 8px;
+  padding: 10px;
+  border-radius: 12px;
  transition: all 0.25s ease;

  &:hover {
    background-color: rgba($primary-color, 0.06);
+    .color-swatch {
+      transform: scale(1.08);
+    }
  }

  &.active {
+    background-color: rgba($primary-color, 0.08);
    .color-swatch {
-      box-shadow: 0 0 0 3px $secondary-color;
+      transform: scale(1.1);
+      box-shadow: 0 0 0 3px $secondary-color, 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .color-name {
      color: $primary-color;
-      font-weight: 500;
+      font-weight: 600;
    }
  }
 }
@@ -89,9 +94,9 @@ $text-secondary: #6B6B6B;
  width: 48px;
  height: 48px;
  border-radius: 50%;
-  border: 2px solid $border-color;
+  border: 2px solid rgba($border-color, 0.6);
  transition: all 0.25s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.3);
 }

 .color-name {
--- a/frontend/src/components/DesignPreview.vue
+++ b/frontend/src/components/DesignPreview.vue
@@ -606,10 +606,13 @@ const goToUserCenter = () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
+$primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
@@ -625,8 +628,8 @@ $text-light: #999999;
  gap: 8px;
  padding: 4px;
  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .view-tab {
@@ -634,7 +637,7 @@ $text-light: #999999;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 10px;
  font-size: 14px;
  color: $text-secondary;
  cursor: pointer;
@@ -658,9 +661,10 @@ $text-light: #999999;
  position: absolute;
  top: 16px;
  left: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 4px 12px;
-  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 4px 14px;
+  border-radius: 20px;
+  backdrop-filter: blur(4px);
 }

 .indicator-text {
@@ -671,9 +675,9 @@ $text-light: #999999;
 .preview-container {
  position: relative;
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
 }

@@ -690,8 +694,8 @@ $text-light: #999999;
 .design-image {
  max-width: 100%;
  max-height: 450px;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
  
  :deep(img) {
@@ -711,7 +715,7 @@ $text-light: #999999;
  width: 300px;
  height: 300px;
  background: $bg-color;
-  border-radius: 8px;
+  border-radius: 12px;
  color: $text-light;
  
  .el-icon {
@@ -737,8 +741,9 @@ $text-light: #999999;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(4px);
 }

 .zoom-btn {
@@ -749,7 +754,7 @@ $text-light: #999999;
  height: 32px;
  background: transparent;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 8px;
  cursor: pointer;
  color: $text-secondary;
  transition: all 0.2s ease;
@@ -775,18 +780,18 @@ $text-light: #999999;

 .design-info {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .info-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-light;
  letter-spacing: 1px;
 }

@@ -824,7 +829,7 @@ $text-light: #999999;

 .action-buttons {
  display: flex;
-  gap: 16px;
+  gap: 12px;
  flex-wrap: wrap;
 }

@@ -834,8 +839,9 @@ $text-light: #999999;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
-  border-radius: 8px;
-  font-size: 15px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
@@ -847,14 +853,13 @@ $text-light: #999999;
 }

 .download-btn {
-  background: $primary-color;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
  
  &:hover {
-    background: #4a6a5a;
    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba($primary-color, 0.3);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }
 }

@@ -870,14 +875,13 @@ $text-light: #999999;
 }

 .model3d-btn {
-  background: #8E44AD;
+  background: linear-gradient(135deg, $primary-light, $primary-color);
  color: #fff;
  border: none;
  
  &:hover:not(:disabled) {
-    background: #7D3C98;
    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(#8E44AD, 0.3);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.25);
  }
  
  &:disabled {
@@ -888,18 +892,18 @@ $text-light: #999999;

 .model3d-section {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .section-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-light;
  letter-spacing: 1px;
 }

@@ -925,19 +929,19 @@ $text-light: #999999;
  display: inline-flex;
  align-items: center;
  gap: 4px;
-  padding: 6px 14px;
-  font-size: 12px;
-  color: #666;
-  background: #f5f5f5;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: $text-secondary;
+  background: $bg-color;
+  border: 1px solid $border-color;
+  border-radius: 20px;
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;

  &:hover {
    color: $primary-color;
    border-color: $primary-color;
-    background: rgba($primary-color, 0.05);
+    background: rgba($primary-color, 0.04);
  }

  &:disabled {
@@ -949,7 +953,7 @@ $text-light: #999999;
 }

 .model-viewer-wrapper {
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  background: $bg-color;
 }
@@ -957,13 +961,13 @@ $text-light: #999999;
 // 视频区域样式
 .video-section {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .video-wrapper {
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  background: #000;
 }
@@ -983,7 +987,7 @@ $text-light: #999999;
 }

 .video-btn {
-  background: linear-gradient(135deg, #e040fb 0%, #7c4dff 100%) !important;
+  background: linear-gradient(135deg, $secondary-color, #a89058) !important;
  color: #fff !important;
  border: none !important;

--- 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) {
@@ -203,16 +258,19 @@ const goToGenerate = () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
+$primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .subtype-panel {
  flex: 1;
-  padding: 32px 40px;
+  padding: 36px 44px;
  overflow-y: auto;
  background-color: $bg-color;
 }
@@ -227,8 +285,9 @@ $text-light: #999999;
 }

 .empty-icon {
-  color: $border-color;
+  color: $primary-light;
  margin-bottom: 24px;
+  opacity: 0.6;
 }

 .empty-text {
@@ -263,8 +322,8 @@ $text-light: #999999;
 }

 .panel-title {
-  font-size: 20px;
-  font-weight: 500;
+  font-size: 22px;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
@@ -273,19 +332,19 @@ $text-light: #999999;
 .panel-desc {
  font-size: 14px;
  color: $text-secondary;
-  margin: 0 0 24px 0;
+  margin: 0 0 28px 0;
 }

 // 牌型卡片网格
 .card-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
 }

 .subtype-card {
  background: #fff;
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
@@ -293,13 +352,13 @@ $text-light: #999999;
  border: 2px solid transparent;

  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  &.active {
    border-color: $primary-color;
-    box-shadow: 0 4px 16px rgba($primary-color, 0.2);
+    box-shadow: 0 4px 16px rgba($primary-color, 0.15);
  }
 }

@@ -318,8 +377,8 @@ $text-light: #999999;
 }

 .card-placeholder {
-  width: 60px;
-  height: 60px;
+  width: 56px;
+  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, $primary-light, $primary-color);
  display: flex;
@@ -327,7 +386,7 @@ $text-light: #999999;
  justify-content: center;

  span {
-    font-size: 24px;
+    font-size: 22px;
    color: #fff;
    font-weight: 500;
  }
@@ -336,12 +395,13 @@ $text-light: #999999;
 .card-info {
  padding: 12px;
  text-align: center;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .card-name {
  font-size: 14px;
  color: $text-primary;
+  font-weight: 500;
 }

 // 尺寸标签网格
@@ -352,10 +412,10 @@ $text-light: #999999;
 }

 .size-tag {
-  padding: 10px 20px;
+  padding: 10px 22px;
  background: #fff;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 20px;
  font-size: 14px;
  color: $text-secondary;
  cursor: pointer;
@@ -364,6 +424,7 @@ $text-light: #999999;
  &:hover {
    border-color: $primary-light;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }

  &.active {
@@ -371,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 类型介绍
@@ -378,11 +474,12 @@ $text-light: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding: 40px;
+  padding: 48px 40px;
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  text-align: center;
  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 .intro-icon {
@@ -400,23 +497,24 @@ $text-light: #999999;
 .action-bar {
  margin-top: 32px;
  padding-top: 24px;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .btn-primary {
-  padding: 12px 32px;
-  background-color: $primary-color;
+  padding: 14px 36px;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 6px;
+  border-radius: 12px;
  font-size: 15px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 2px;

  &:hover {
-    background-color: #4a6a5a;
-    transform: translateY(-1px);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }

  &:active {
--- 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/style.css
+++ b/frontend/src/style.css
@@ -1,296 +1,108 @@
+/* ========================================
+   玉宗珠宝设计系统 - 全局基础样式
+   ======================================== */
+
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  /* 品牌色系 */
+  --yz-primary: #5B7E6B;
+  --yz-primary-light: #8BAF9C;
+  --yz-primary-lighter: #D4E5DB;
+  --yz-primary-dark: #3D5A4A;
+  --yz-secondary: #C4A86C;
+  --yz-secondary-light: #E0D1A8;

-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  /* 背景色 */
+  --yz-bg: #FAF8F5;
+  --yz-bg-dark: #F0EDE8;
+  --yz-bg-card: #FFFFFF;

-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
+  /* 文字色 */
+  --yz-text: #2C2C2C;
+  --yz-text-secondary: #6B6B6B;
+  --yz-text-light: #999999;
+  --yz-text-placeholder: #BFBFBF;
+
+  /* 边框 & 分割线 */
+  --yz-border: #E8E4DF;
+  --yz-border-light: #F0EDE8;
+  --yz-divider: #F0EDE8;
+
+  /* 阴影 */
+  --yz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+  --yz-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --yz-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+
+  /* 圆角 */
+  --yz-radius-sm: 8px;
+  --yz-radius: 12px;
+  --yz-radius-lg: 16px;
+  --yz-radius-xl: 20px;
+  --yz-radius-pill: 999px;
+
+  /* 字体 */
+  --yz-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
+
+  /* 过渡 */
+  --yz-transition: all 0.25s ease;
+  --yz-transition-fast: all 0.15s ease;
+
+  font-family: var(--yz-font);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--yz-text);
+  background: var(--yz-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
 }

 body {
  margin: 0;
+  min-height: 100vh;
 }

-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--yz-font);
+  color: var(--yz-text);
+  font-weight: 600;
  margin: 0;
 }

-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
+h1 { font-size: 28px; letter-spacing: 2px; }
+h2 { font-size: 22px; letter-spacing: 1.5px; }
+h3 { font-size: 18px; letter-spacing: 1px; }
+h4 { font-size: 16px; letter-spacing: 0.5px; }

-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
+p { margin: 0; }

-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
+a {
+  color: var(--yz-primary);
+  text-decoration: none;
+  transition: var(--yz-transition-fast);
 }
+a:hover {
+  color: var(--yz-primary-dark);
 }

 #app {
-  width: 1126px;
+  width: 100%;
  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
+  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
 }

-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+/* 全局选中态 */
+::selection {
+  background: var(--yz-primary-lighter);
+  color: var(--yz-text);
 }

-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
+/* 响应式基础 */
+@media (max-width: 768px) {
+  :root {
+    font-size: 13px;
  }
 }
--- a/frontend/src/views/DesignPage.vue
+++ b/frontend/src/views/DesignPage.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .design-page {
  display: flex;
-  height: calc(100vh - 60px);
+  height: calc(100vh - 64px);
  background-color: #FAF8F5;
 }
 </style>
--- 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,
@@ -476,17 +476,19 @@ onUnmounted(() => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
 $primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .generate-page {
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 64px);
  background-color: $bg-color;
  padding-bottom: 60px;
 }
@@ -496,27 +498,28 @@ $text-light: #999999;
  display: flex;
  align-items: center;
  gap: 24px;
-  padding: 20px 40px;
+  padding: 16px 40px;
  background: #fff;
-  border-bottom: 1px solid $border-color;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
 }

 .back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
-  padding: 8px 16px;
+  padding: 8px 18px;
  background: transparent;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 20px;
  color: $text-secondary;
  font-size: 14px;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.25s ease;
  
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }
 }

@@ -591,7 +594,7 @@ $text-light: #999999;

 .section-title {
  font-size: 24px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
@@ -610,14 +613,15 @@ $text-light: #999999;
 // 参数面板
 .params-panel {
  background: #fff;
-  border-radius: 12px;
-  padding: 24px 28px;
+  border-radius: 16px;
+  padding: 28px 32px;
  margin-bottom: 28px;
-  border: 1px solid $border-color;
+  border: 1px solid $border-light;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
 }

 .param-group {
-  margin-bottom: 18px;
+  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
@@ -627,9 +631,9 @@ $text-light: #999999;
 .param-label {
  display: block;
  font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-secondary;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
  letter-spacing: 1px;

  .param-hint {
@@ -648,19 +652,20 @@ $text-light: #999999;

 .tag-item {
  display: inline-block;
-  padding: 6px 14px;
+  padding: 7px 16px;
  background: $bg-color;
  border: 1px solid $border-color;
-  border-radius: 16px;
+  border-radius: 20px;
  font-size: 13px;
  color: $text-secondary;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.25s ease;
  user-select: none;

  &:hover {
    border-color: $primary-light;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }

  &.active {
@@ -674,7 +679,7 @@ $text-light: #999999;
  width: 130px;

  :deep(.el-input__inner) {
-    border-radius: 16px;
+    border-radius: 20px;
    font-size: 13px;
  }
 }
@@ -685,7 +690,7 @@ $text-light: #999999;

 .prompt-title {
  font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0;
  letter-spacing: 1px;
@@ -695,9 +700,9 @@ $text-light: #999999;
  :deep(.el-textarea__inner) {
    background: #fff;
    border: 2px solid $border-color;
-    border-radius: 12px;
+    border-radius: 14px;
    padding: 20px;
-    font-size: 16px;
+    font-size: 15px;
    line-height: 1.8;
    color: $text-primary;
    transition: all 0.3s ease;
@@ -708,7 +713,7 @@ $text-light: #999999;
    
    &:focus {
      border-color: $primary-color;
-      box-shadow: 0 0 0 4px rgba($primary-color, 0.1);
+      box-shadow: 0 0 0 4px rgba($primary-color, 0.08);
    }
  }
  
@@ -728,16 +733,16 @@ $text-light: #999999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
-  padding: 16px 48px;
+  padding: 16px 52px;
  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 12px;
+  border-radius: 14px;
  font-size: 17px;
-  font-weight: 500;
+  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
-  letter-spacing: 2px;
+  letter-spacing: 3px;
  
  .el-icon {
    font-size: 20px;
@@ -745,7 +750,7 @@ $text-light: #999999;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba($primary-color, 0.4);
+    box-shadow: 0 8px 28px rgba($primary-color, 0.35);
  }
  
  &:active:not(:disabled) {
@@ -764,16 +769,18 @@ $text-light: #999999;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
-  background: $primary-color;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 8px;
+  border-radius: 12px;
  font-size: 15px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  
  &:hover {
-    background: $primary-dark;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }
 }

@@ -783,7 +790,7 @@ $text-light: #999999;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .btn-regenerate {
@@ -794,7 +801,7 @@ $text-light: #999999;
  background: #fff;
  color: $text-secondary;
  border: 1px solid $border-color;
-  border-radius: 8px;
+  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
@@ -802,6 +809,7 @@ $text-light: #999999;
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }
 }

@@ -812,7 +820,7 @@ $text-light: #999999;
  left: 0;
  right: 0;
  bottom: 0;
-  background: rgba(255, 255, 255, 0.95);
+  background: rgba(250, 248, 245, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -833,8 +841,8 @@ $text-light: #999999;
 }

 .ink-drop {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
  background: $primary-color;
  border-radius: 50%;
  animation: ink-spread 1.4s ease-in-out infinite;
@@ -864,6 +872,7 @@ $text-light: #999999;
  color: $text-primary;
  letter-spacing: 2px;
  margin: 0;
+  font-weight: 500;
 }

 .loading-hint {
@@ -875,7 +884,7 @@ $text-light: #999999;
 // 响应式
@media (max-width: 768px) {
  .page-header {
-    padding: 16px 20px;
+    padding: 12px 20px;
    gap: 16px;
  }
  
--- 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
@@ -4,6 +4,7 @@
      <!-- 品牌区域 -->
      <div class="brand-section">
        <h1 class="brand-name">玉 宗</h1>
+        <p class="brand-en">YUZONG JEWELRY</p>
        <p class="brand-subtitle">珠宝设计大师</p>
      </div>

@@ -95,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 {
@@ -105,22 +106,41 @@ const handleLogin = async () => {
 </script>

 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+$primary-lighter: #D4E5DB;
+
 .login-page {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: #FAF8F5;
+  background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
  padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba($primary-color, 0.05) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 }

 .login-card {
  width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
+  max-width: 420px;
+  padding: 48px 44px;
  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
 }

 .brand-section {
@@ -129,10 +149,18 @@ const handleLogin = async () => {

  .brand-name {
    font-size: 36px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 8px;
-    margin: 0 0 8px 0;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 10px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-en {
+    font-size: 10px;
+    color: #999;
+    letter-spacing: 3px;
+    margin: 0 0 12px 0;
+    opacity: 0.7;
  }

  .brand-subtitle {
@@ -145,12 +173,18 @@ const handleLogin = async () => {

 .login-form {
  :deep(.el-input__wrapper) {
-    border-radius: 8px;
-    padding: 4px 12px;
+    border-radius: 10px;
+    padding: 6px 14px;
+    box-shadow: 0 0 0 1px #E8E4DF inset !important;
+    transition: all 0.25s ease;
+
+    &:hover, &.is-focus {
+      box-shadow: 0 0 0 1px $primary-color inset !important;
+    }
  }

  :deep(.el-input__prefix) {
-    color: #999;
+    color: #bbb;
  }

  :deep(.el-form-item) {
@@ -160,24 +194,24 @@ const handleLogin = async () => {

 .login-button {
  width: 100%;
-  height: 48px;
-  border-radius: 8px;
+  height: 50px;
+  border-radius: 12px;
  font-size: 16px;
-  font-weight: 500;
-  background-color: #5B7E6B;
-  border-color: #5B7E6B;
-  letter-spacing: 2px;
+  font-weight: 600;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  border-color: $primary-color;
+  letter-spacing: 3px;

  &:hover,
  &:focus {
-    background-color: #3D5A4A;
-    border-color: #3D5A4A;
+    background: linear-gradient(135deg, $primary-dark, #2d4638);
+    border-color: $primary-dark;
  }
 }

 .footer-links {
  text-align: center;
-  margin-top: 24px;
+  margin-top: 28px;
  font-size: 14px;

  .text {
@@ -185,13 +219,13 @@ const handleLogin = async () => {
  }

  .link {
-    color: #5B7E6B;
+    color: $primary-color;
    text-decoration: none;
    margin-left: 4px;
-    font-weight: 500;
+    font-weight: 600;

    &:hover {
-      color: #3D5A4A;
+      color: $primary-dark;
      text-decoration: underline;
    }
  }
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -4,6 +4,7 @@
      <!-- 品牌区域 -->
      <div class="brand-section">
        <h1 class="brand-name">玉 宗</h1>
+        <p class="brand-en">YUZONG JEWELRY</p>
        <p class="brand-subtitle">创建您的账户</p>
      </div>

@@ -134,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 {
@@ -144,34 +145,60 @@ const handleRegister = async () => {
 </script>

 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+
 .register-page {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: #FAF8F5;
+  background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
  padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 15%;
+    left: 8%;
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, rgba($primary-color, 0.04) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 }

 .register-card {
  width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
+  max-width: 420px;
+  padding: 48px 44px;
  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
 }

 .brand-section {
  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 36px;

  .brand-name {
    font-size: 36px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 8px;
-    margin: 0 0 8px 0;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 10px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-en {
+    font-size: 10px;
+    color: #999;
+    letter-spacing: 3px;
+    margin: 0 0 12px 0;
+    opacity: 0.7;
  }

  .brand-subtitle {
@@ -184,39 +211,45 @@ const handleRegister = async () => {

 .register-form {
  :deep(.el-input__wrapper) {
-    border-radius: 8px;
-    padding: 4px 12px;
+    border-radius: 10px;
+    padding: 6px 14px;
+    box-shadow: 0 0 0 1px #E8E4DF inset !important;
+    transition: all 0.25s ease;
+
+    &:hover, &.is-focus {
+      box-shadow: 0 0 0 1px $primary-color inset !important;
+    }
  }

  :deep(.el-input__prefix) {
-    color: #999;
+    color: #bbb;
  }

  :deep(.el-form-item) {
-    margin-bottom: 24px;
+    margin-bottom: 22px;
  }
 }

 .register-button {
  width: 100%;
-  height: 48px;
-  border-radius: 8px;
+  height: 50px;
+  border-radius: 12px;
  font-size: 16px;
-  font-weight: 500;
-  background-color: #5B7E6B;
-  border-color: #5B7E6B;
-  letter-spacing: 2px;
+  font-weight: 600;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  border-color: $primary-color;
+  letter-spacing: 3px;

  &:hover,
  &:focus {
-    background-color: #3D5A4A;
-    border-color: #3D5A4A;
+    background: linear-gradient(135deg, $primary-dark, #2d4638);
+    border-color: $primary-dark;
  }
 }

 .footer-links {
  text-align: center;
-  margin-top: 24px;
+  margin-top: 28px;
  font-size: 14px;

  .text {
@@ -224,13 +257,13 @@ const handleRegister = async () => {
  }

  .link {
-    color: #5B7E6B;
+    color: $primary-color;
    text-decoration: none;
    margin-left: 4px;
-    font-weight: 500;
+    font-weight: 600;

    &:hover {
-      color: #3D5A4A;
+      color: $primary-dark;
      text-decoration: underline;
    }
  }
--- a/frontend/src/views/UserCenter.vue
+++ b/frontend/src/views/UserCenter.vue
@@ -396,14 +396,16 @@ const handleChangePassword = async () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-dark: #3D5A4A;
+$primary-lighter: #D4E5DB;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .user-center {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  background-color: $bg-color;
  padding: 32px 24px;
 }
@@ -414,8 +416,8 @@ $text-light: #999999;
 }

 .page-title {
-  font-size: 28px;
-  font-weight: 600;
+  font-size: 26px;
+  font-weight: 700;
  color: $text-primary;
  margin: 0 0 24px 0;
  letter-spacing: 2px;
@@ -423,22 +425,22 @@ $text-light: #999999;

 .user-tabs {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
-    background-color: $border-color;
+    background-color: $border-light;
  }

  :deep(.el-tabs__item) {
-    font-size: 16px;
+    font-size: 15px;
    color: $text-secondary;
    
    &.is-active {
      color: $primary-color;
-      font-weight: 500;
+      font-weight: 600;
    }
    
    &:hover {
@@ -448,6 +450,7 @@ $text-light: #999999;

  :deep(.el-tabs__active-bar) {
    background-color: $primary-color;
+    border-radius: 2px;
  }
 }

@@ -489,19 +492,20 @@ $text-light: #999999;
  }

  .empty-text {
-    font-size: 16px;
+    font-size: 15px;
    color: $text-secondary;
    margin: 0 0 24px 0;
  }

  .create-btn {
-    background-color: $primary-color;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
    border-color: $primary-color;
    padding: 12px 32px;
    font-size: 15px;
+    border-radius: 12px;

    &:hover {
-      background-color: $primary-dark;
+      background: linear-gradient(135deg, $primary-dark, #2d4638);
      border-color: $primary-dark;
    }
  }
@@ -517,24 +521,24 @@ $text-light: #999999;

 .design-card {
  background: #fff;
-  border-radius: 8px;
+  border-radius: 14px;
  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  border: 1px solid $border-color;
+  transition: all 0.25s ease;
+  border: 1px solid $border-light;

  &:hover {
    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  }
 }

 .card-image {
  position: relative;
  width: 100%;
-  padding-top: 75%; // 4:3 aspect ratio
-  background-color: #f5f5f5;
+  padding-top: 75%;
+  background-color: $bg-color;
  overflow: hidden;

  img {
@@ -544,6 +548,11 @@ $text-light: #999999;
    width: 100%;
    height: 100%;
    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .design-card:hover & img {
+    transform: scale(1.03);
  }

  .no-image {
@@ -557,7 +566,7 @@ $text-light: #999999;
    justify-content: center;
    color: $text-light;
    font-size: 14px;
-    background-color: #f9f9f9;
+    background-color: $bg-color;
  }
 }

@@ -569,7 +578,7 @@ $text-light: #999999;
  font-size: 12px;
  color: $primary-color;
  margin-bottom: 8px;
-  font-weight: 500;
+  font-weight: 600;
 }

 .card-prompt {
@@ -623,7 +632,7 @@ $text-light: #999999;

  :deep(.el-pager li.is-active) {
    color: $primary-color;
-    font-weight: 500;
+    font-weight: 600;
  }
 }

@@ -635,14 +644,14 @@ $text-light: #999999;
 }

 .password-section {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
  margin-top: 24px;
  padding-top: 32px;
 }

 .section-title {
  font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 24px 0;
 }
@@ -654,19 +663,20 @@ $text-light: #999999;
  }

  :deep(.el-input__wrapper) {
-    border-radius: 6px;
+    border-radius: 10px;
  }

  :deep(.el-input.is-disabled .el-input__wrapper) {
-    background-color: #f9f9f9;
+    background-color: $bg-color;
  }

  :deep(.el-button--primary) {
-    background-color: $primary-color;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
    border-color: $primary-color;
+    border-radius: 10px;

    &:hover {
-      background-color: $primary-dark;
+      background: linear-gradient(135deg, $primary-dark, #2d4638);
      border-color: $primary-dark;
    }
  }
--- a/init_data.sql.zip
+++ b/init_data.sql.zip
Author	SHA1	Message	Date
川	18dfc75372	fix(backend): 修复视频生成接口401认证失败问题 - 修正可灵视频任务提交时认证失败导致的视频生成错误 - 解决接口返回500错误的问题 - 优化视频生成相关的错误日志提示 - 保证上传目录准备状态的正确显示 - 提升后台服务日志的稳定性和连续性	2026-04-13 14:41:02 +08:00
川	7f84a04e27	feat(frontend): 添加首页及调整导航和路由逻辑 - 新增完整首页视图，展示核心功能、品类覆盖及使用流程 - 设计首页响应式布局及样式，优化多终端展示效果 - 修改AdminLayout中返回前台链接为/design路径 - 删除AppHeader中顶部设计、生成、管理后台菜单链接 - 在用户下拉菜单新增管理后台入口，点击跳转/admin - 新增路由/home和/design页面，完善路由配置 - 将登录、注册、生成页跳转路径由根目录改为/design，增强用户体验	2026-03-29 17:15:14 +08:00
川	4382feedb3	style(frontend): 优化前端样式和界面细节 - 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量 - 调整应用头部布局及风格，增加logo子标题和用户头像显示 - 细化分类导航样式，添加品类图标和渐变背景 - 优化颜色选择器的交互动效和样式细节 - 美化设计预览组件，提升边框圆角和阴影效果 - 调整子类型面板布局、尺寸及交互动画效果 - 修正全局样式中字体和滚动条的表现，增强用户体验 - 统一按钮、标签等控件的圆角和颜色渐变样式 - 增强Element Plus UI组件的主题覆盖和交互状态样式	2026-03-29 15:55:27 +08:00
川	5f3cda2a63	chore(server): 记录服务器启动与热重载日志 - 详细记录服务启动及关闭过程中的日志信息 - 添加文件变动检测后的自动重启警告和操作日志 - 记录上传目录准备状态日志 - 追踪接口请求响应日志，包括视频和设计资源访问 - 添加应用关闭和重启通知日志	2026-03-28 19:51:52 +08:00