docs(readme): 编写项目README文档，描述功能与架构

- 完整撰写玉宗珠宝设计大师项目README，介绍项目概况及核心功能 - 说明用户认证系统实现及优势，包含JWT鉴权和密码加密细节 - 详细描述品类管理系统，支持多流程类型和多种玉石品类 - 说明设计图生成方案及技术，包含Pillow生成示例及字体支持 - 介绍设计管理功能，支持分页浏览、预览、下载和删除设计 - 个人信息管理模块说明，涵盖昵称、手机号、密码的安全修改 - 绘制业务流程图和关键数据流图，清晰展现系统架构与数据流 - 提供详细API调用链路及参数说明，涵盖用户、品类、设计接口 - 列明技术栈及版本，包含前后端框架、ORM、认证、加密等工具 - 展示目录结构，标明后端与前端项目布局 - 规划本地开发环境与启动步骤，包括数据库初始化及运行命令 - 说明服务器部署流程和Nginx配置方案 - 详细数据库表结构说明及环境变量配置指导 - 汇总常用开发及测试命令，方便开发调试与部署管理
2026-03-27 13:10:17 +08:00
commit e3ff55b4db
69 changed files with 8551 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,274 @@
 # 玉宗 - 珠宝设计大师
 AI 驱动的珠宝玉石设计生成系统，支持 12 种玉石品类的智能设计图生成。
 ## 功能特性
 ### 1. 用户认证系统
 - **功能说明**：支持用户注册、登录、退出，JWT Token 鉴权
 - **实现方式**：后端使用 `python-jose` 生成 JWT Token（有效期 1440 分钟），密码通过 `passlib + bcrypt` 加密存储；前端通过 Axios 拦截器自动携带 Token，401 响应自动跳转登录页
 - **优点**：无状态认证，前后端分离友好；密码 bcrypt 加密，安全可靠
 ### 2. 品类管理系统
 - **功能说明**：12 种玉石品类（牌子、珠子、手把件、雕刻件、摆件、手镯、耳钉、耳饰、手链、项链、戒指、表带），支持子类型和颜色选择
 - **实现方式**：品类通过 `flow_type` 字段区分三种工作流程：`full`（选子类型，如牌子选牌型）、`size_color`（选尺寸+颜色，如珠子）、`simple`（直接设计）；前端 `SubTypePanel` 组件根据 flow_type 动态渲染不同的选择界面
 - **优点**：灵活的品类工作流适配不同产品特性，用户操作路径清晰
 ### 3. 设计图生成
 - **功能说明**：用户选择品类参数后输入设计描述，系统生成 800×800 PNG 设计图
 - **实现方式**：后端 `mock_generator` 使用 Pillow 生成设计图，包含品类信息、颜色映射（中文颜色名→HEX）、自动文字颜色对比计算、系统中文字体检测（PingFang/STHeiti/DroidSansFallback）；设计记录先创建（status=generating），生成完成后更新为 completed
 - **优点**：即时生成预览图，支持颜色定制；后续可替换为真实 AI 模型
 ### 4. 设计管理
 - **功能说明**：用户中心查看设计历史列表（分页），支持预览、下载、删除设计
 - **实现方式**：设计列表通过 `DesignListResponse` 分页返回（默认每页 20 条），图片通过 `FileResponse` 下载；删除时同步清理数据库记录和磁盘文件
 - **优点**：完整的设计生命周期管理，支持历史设计的查看和复用
 ### 5. 个人信息管理
 - **功能说明**：修改昵称、手机号、密码
 - **实现方式**：手机号唯一性校验，密码修改需验证旧密码；前端表单使用 Element Plus 表单验证
 - **优点**：安全的密码修改流程，手机号去重保障数据一致性
 ## 业务流程
 ### 整体流程图
 ```mermaid
 graph TB
    A[用户注册/登录] --> B[设计页 - 选择品类]
    B --> C{品类类型}
    C -->|full| D[选择子类型/牌型]
    C -->|size_color| E[选择尺寸 + 颜色]
    C -->|simple| F[直接进入]
    D --> G[生成页 - 输入设计描述]
    E --> G
    F --> G
    G --> H[提交生成请求]
    H --> I[后端生成设计图]
    I --> J[预览设计图]
    J --> K{用户操作}
    K -->|下载| L[下载 PNG 文件]
    K -->|重新生成| G
    K -->|查看历史| M[用户中心]
    M --> N[设计历史列表]
    N -->|点击卡片| G
 ```
 ### 各阶段详细流程
 1. **用户认证**：注册时检查用户名唯一性 → 密码 bcrypt 加密 → 创建用户记录 → 注册成功后自动登录 → 获取 JWT Token 存储到 localStorage
 2. **品类选择**：进入设计页自动加载品类列表 → 左侧导航选择品类 → 根据 flow_type 加载对应的子类型/颜色数据 → 右侧面板显示选择界面
 3. **设计生成**：跳转生成页携带品类参数 → 输入设计描述（最多 500 字） → 提交请求 → 显示水墨风格加载动画 → 生成完成后展示预览
 4. **设计管理**：用户中心加载设计列表 → 卡片网格展示 → 支持分页浏览、下载 PNG、删除（确认弹窗）、点击卡片跳转重新编辑
 ### 关键数据流图
 ```mermaid
 graph LR
    A[前端 Store] -->|Axios + Token| B[API 路由]
    B -->|Depends 注入| C[Service 层]
    C -->|SQLAlchemy ORM| D[MySQL 数据库]
    C -->|Pillow 生成| E[uploads/ 目录]
    E -->|StaticFiles 服务| F[前端图片展示]
 ```
 ### API 调用链路
 | 接口路径 | 方法 | 功能说明 | 关键参数 |
 |---------|------|---------|---------|
 | `/api/auth/register` | POST | 用户注册 | username, password, nickname |
 | `/api/auth/login` | POST | 用户登录 | username, password |
 | `/api/auth/me` | GET | 获取当前用户 | Bearer Token |
 | `/api/users/profile` | PUT | 更新个人信息 | nickname, phone, avatar |
 | `/api/users/password` | PUT | 修改密码 | old_password, new_password |
 | `/api/categories` | GET | 获取品类列表 | - |
 | `/api/categories/{id}/sub-types` | GET | 获取子类型 | category_id |
 | `/api/categories/{id}/colors` | GET | 获取颜色选项 | category_id |
 | `/api/designs/generate` | POST | 生成设计 | category_id, sub_type_id, color_id, prompt |
 | `/api/designs` | GET | 设计列表(分页) | page, page_size |
 | `/api/designs/{id}` | GET | 设计详情 | design_id |
 | `/api/designs/{id}` | DELETE | 删除设计 | design_id |
 | `/api/designs/{id}/download` | GET | 下载设计图 | design_id |
 ## 技术栈
 | 分类 | 技术 | 版本 | 说明 |
 |-----|------|------|-----|
 | **前端框架** | Vue 3 | 3.5.30 | Composition API + `<script setup>` |
 | **构建工具** | Vite | 8.0.1 | 开发服务器 + 构建打包 |
 | **类型系统** | TypeScript | 5.9.3 | 全项目类型化 |
 | **UI 组件库** | Element Plus | 2.13.6 | 表单、弹窗、分页等 |
 | **状态管理** | Pinia | 3.0.4 | Composition API 风格 Store |
 | **路由** | Vue Router | 4.6.4 | History 模式 + 路由守卫 |
 | **HTTP 客户端** | Axios | 1.13.6 | 请求/响应拦截器 |
 | **CSS 预处理** | Sass | 1.98.0 | SCSS 语法 |
 | **后端框架** | FastAPI | 0.109.2 | 异步 Python Web 框架 |
 | **ORM** | SQLAlchemy | 2.0.27 | 同步模式 |
 | **数据库驱动** | PyMySQL | 1.1.0 | MySQL 连接 |
 | **认证** | python-jose | 3.3.0 | JWT Token |
 | **密码加密** | passlib + bcrypt | 1.7.4 | bcrypt 哈希 |
 | **图片生成** | Pillow | 10.2.0 | PNG 设计图生成 |
 | **数据库** | MySQL | - | utf8mb4 编码 |
 ## 目录结构
 ```
 YuShiSheJi/
 ├── backend/                    # 后端服务
 │   ├── app/
 │   │   ├── models/             # SQLAlchemy 数据模型
 │   │   │   ├── user.py         # 用户模型
 │   │   │   ├── category.py     # 品类/子类型/颜色模型
 │   │   │   └── design.py       # 设计作品模型
 │   │   ├── routers/            # API 路由
 │   │   │   ├── auth.py         # 认证路由（注册/登录）
 │   │   │   ├── categories.py   # 品类查询路由
 │   │   │   ├── designs.py      # 设计生成/管理路由
 │   │   │   └── users.py        # 用户信息路由
 │   │   ├── schemas/            # Pydantic 数据验证
 │   │   ├── services/           # 业务逻辑层
 │   │   │   ├── auth_service.py # 认证业务
 │   │   │   ├── design_service.py # 设计业务
 │   │   │   └── mock_generator.py # 图片生成服务
 │   │   ├── utils/              # 工具函数
 │   │   │   ├── deps.py         # 认证依赖注入
 │   │   │   └── security.py     # JWT/密码工具
 │   │   ├── config.py           # 配置管理
 │   │   ├── database.py         # 数据库连接
 │   │   └── main.py             # 应用入口
 │   ├── uploads/                # 生成图片存储目录
 │   ├── .env                    # 环境变量
 │   └── requirements.txt        # Python 依赖
 ├── frontend/                   # 前端应用
 │   ├── src/
 │   │   ├── api/                # API 接口定义
 │   │   │   ├── request.ts      # Axios 实例（拦截器）
 │   │   │   ├── auth.ts         # 认证接口
 │   │   │   ├── category.ts     # 品类接口
 │   │   │   └── design.ts       # 设计接口
 │   │   ├── components/         # 公共组件
 │   │   │   ├── AppHeader.vue   # 顶部导航栏
 │   │   │   ├── CategoryNav.vue # 品类左侧导航
 │   │   │   ├── SubTypePanel.vue# 子类型/颜色选择面板
 │   │   │   ├── ColorPicker.vue # 颜色选择器
 │   │   │   └── DesignPreview.vue # 设计预览（缩放/下载）
 │   │   ├── stores/             # Pinia 状态管理
 │   │   │   ├── user.ts         # 用户状态
 │   │   │   ├── category.ts     # 品类状态
 │   │   │   └── design.ts       # 设计状态
 │   │   ├── views/              # 页面组件
 │   │   │   ├── Login.vue       # 登录页
 │   │   │   ├── Register.vue    # 注册页
 │   │   │   ├── DesignPage.vue  # 设计页（品类选择）
 │   │   │   ├── GeneratePage.vue# 生成页（输入描述+预览）
 │   │   │   └── UserCenter.vue  # 用户中心（历史+信息）
 │   │   ├── router/index.ts     # 路由配置 + 认证守卫
 │   │   ├── assets/styles/theme.scss # 品牌主题色
 │   │   └── main.ts             # 应用入口
 │   ├── package.json
 │   └── vite.config.ts          # Vite 配置（代理）
 └── init_data.sql               # 数据库初始化脚本
 ```
 ## 本地开发
 ### 环境要求
 - Python 3.10+
 - Node.js 18+
 - MySQL 5.7+ / 8.0
 - npm 或 pnpm
 ### 启动步骤
 ```bash
 # 1. 创建数据库
 mysql -u root -p -e "CREATE DATABASE yuzong CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
 # 2. 初始化表结构（FastAPI 启动时 SQLAlchemy 自动创建表）并导入初始数据
 mysql -u root -p yuzong < init_data.sql
 # 3. 后端启动
 cd backend
 cp .env.example .env  # 修改数据库连接信息
 pip install -r requirements.txt
 uvicorn app.main:app --reload --port 8000
 # 4. 前端启动（新终端）
 cd frontend
 npm install
 npm run dev
 ```
 前端访问：http://localhost:3000
 后端 API：http://localhost:8000
 API 文档：http://localhost:8000/docs
 ## 服务器部署
 ### 部署步骤
 ```bash
 # 1. 安装依赖
 cd backend && pip install -r requirements.txt
 cd frontend && npm install
 # 2. 前端构建
 cd frontend
 npm run build  # 输出到 dist/ 目录
 # 3. 配置后端环境变量
 cd backend
 vim .env  # 配置生产数据库地址和密钥
 # 4. 启动后端服务
 uvicorn app.main:app --host 0.0.0.0 --port 8000
 # 5. Nginx 配置（前端静态文件 + API 反向代理）
 # location / { root /path/to/frontend/dist; try_files $uri $uri/ /index.html; }
 # location /api { proxy_pass http://127.0.0.1:8000; }
 # location /uploads { proxy_pass http://127.0.0.1:8000; }
 ```
 ## 数据库
 ### 表结构说明
 | 分类 | 表名 | 说明 |
 |-----|------|-----|
 | 用户 | `users` | 用户基本信息（用户名、密码、昵称、手机、头像） |
 | 品类 | `categories` | 12 种玉石品类（名称、图标、排序、流程类型） |
 | 品类 | `sub_types` | 品类子类型（牌型/尺寸，关联品类） |
 | 品类 | `colors` | 品类颜色选项（颜色名、HEX 色值，关联品类） |
 | 设计 | `designs` | 设计记录（用户、品类、子类型、颜色、描述、图片URL、状态） |
 ## 环境变量
 | 配置项 | 默认值 | 必填 | 说明 |
 |-------|--------|-----|------|
 | `DATABASE_URL` | `mysql+pymysql://root:password@localhost:3306/yuzong` | 是 | MySQL 连接字符串 |
 | `SECRET_KEY` | `your-secret-key-change-this` | 是 | JWT 签名密钥（生产环境务必修改） |
 | `ALGORITHM` | `HS256` | 否 | JWT 算法 |
 | `ACCESS_TOKEN_EXPIRE_MINUTES` | `1440` | 否 | Token 有效期（分钟，默认 24 小时） |
 | `UPLOAD_DIR` | `uploads` | 否 | 图片上传存储目录 |
 ## 常用命令
 ```bash
 # ========== 开发 ==========
 cd backend && uvicorn app.main:app --reload --port 8000   # 启动后端（热重载）
 cd frontend && npm run dev                                  # 启动前端开发服务器
 cd frontend && npm run build                                # 前端生产构建
 # ========== 数据库 ==========
 mysql -u root -p yuzong < init_data.sql                     # 导入初始品类数据
 mysql -u root -p -e "SELECT * FROM yuzong.categories;"      # 查看品类数据
 # ========== 依赖管理 ==========
 cd backend && pip install -r requirements.txt               # 安装后端依赖
 cd frontend && npm install                                  # 安装前端依赖
 # ========== 调试 ==========
 curl http://localhost:8000/health                            # 后端健康检查
 curl http://localhost:8000/docs                              # 查看 API 文档
 ```
--- a/backend/.env
+++ b/backend/.env
@@ -0,0 +1,5 @@
 DATABASE_URL=mysql+pymysql://yssjs:yssjs@localhost:13306/yuzong?charset=utf8mb4
 SECRET_KEY=yuzong-jewelry-design-secret-key-2026
 ALGORITHM=HS256
 ACCESS_TOKEN_EXPIRE_MINUTES=1440
 UPLOAD_DIR=uploads
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -0,0 +1,5 @@
 DATABASE_URL=mysql+pymysql://root:password@localhost:3306/yuzong
 SECRET_KEY=your-secret-key-change-this
 ALGORITHM=HS256
 ACCESS_TOKEN_EXPIRE_MINUTES=1440
 UPLOAD_DIR=uploads
--- a/backend/app/init.py
+++ b/backend/app/init.py
@@ -0,0 +1 @@
 # 玉宗 - 珠宝设计大师 后端应用
--- a/backend/app/config.py
+++ b/backend/app/config.py
@@ -0,0 +1,28 @@
 """
 应用配置管理
 使用 pydantic-settings 从环境变量读取配置
 """
 from pydantic_settings import BaseSettings
 from functools import lru_cache
 class Settings(BaseSettings):
    """应用配置"""
    DATABASE_URL: str = "mysql+pymysql://root:password@localhost:3306/yuzong"
    SECRET_KEY: str = "your-secret-key-change-this"
    ALGORITHM: str = "HS256"
    ACCESS_TOKEN_EXPIRE_MINUTES: int = 1440
    UPLOAD_DIR: str = "uploads"
    class Config:
        env_file = ".env"
        env_file_encoding = "utf-8"
@lru_cache()
 def get_settings() -> Settings:
    """获取配置单例"""
    return Settings()
 settings = get_settings()
--- a/backend/app/database.py
+++ b/backend/app/database.py
@@ -0,0 +1,37 @@
 """
 数据库连接配置
 使用 SQLAlchemy 2.0 同步方式
 """
 from sqlalchemy import create_engine
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker
 from typing import Generator
 from .config import settings
 # 创建数据库引擎
 engine = create_engine(
    settings.DATABASE_URL,
    pool_pre_ping=True,
    pool_recycle=3600,
    echo=False
 )
 # 创建会话工厂
 SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
 # 创建基类
 Base = declarative_base()
 def get_db() -> Generator:
    """
    数据库会话依赖注入
    用于 FastAPI 的依赖注入系统
    """
    db = SessionLocal()
    try:
        yield db
    finally:
        db.close()
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -0,0 +1,67 @@
 """
 玉宗 - 珠宝设计大师 后端服务入口
 """
 import os
 from contextlib import asynccontextmanager
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from .config import settings
 from .routers import categories, designs, users
 from .routers import auth
@asynccontextmanager
 async def lifespan(app: FastAPI):
    """应用生命周期管理"""
    # 启动时：创建 uploads 目录
    os.makedirs(settings.UPLOAD_DIR, exist_ok=True)
    print(f"✅ 上传目录已准备: {settings.UPLOAD_DIR}")
    yield
    # 关闭时：清理资源（如需要）
    print("👋 应用已关闭")
 # 创建 FastAPI 应用实例
 app = FastAPI(
    title="玉宗 - 珠宝设计大师",
    description="AI驱动的珠宝设计微信小程序后端服务",
    version="1.0.0",
    lifespan=lifespan
 )
 # 配置 CORS
 app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # 生产环境应限制具体域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
 )
@app.get("/")
 async def root():
    """根路径健康检查"""
    return {
        "message": "玉宗 - 珠宝设计大师 API",
        "version": "1.0.0",
        "status": "running"
    }
@app.get("/health")
 async def health_check():
    """健康检查接口"""
    return {"status": "healthy"}
 # 注册路由
 app.include_router(auth.router)
 app.include_router(categories.router)
 app.include_router(designs.router)
 app.include_router(users.router)
 # 配置静态文件服务
 app.mount("/uploads", StaticFiles(directory="uploads"), name="uploads")
--- a/backend/app/models/init.py
+++ b/backend/app/models/init.py
@@ -0,0 +1,17 @@
 """
 数据库模型
 导出所有模型，确保 Base.metadata 包含所有表
 """
 from ..database import Base
 from .user import User
 from .category import Category, SubType, Color
 from .design import Design
 __all__ = [
    "Base",
    "User",
    "Category",
    "SubType",
    "Color",
    "Design"
 ]
--- a/backend/app/models/category.py
+++ b/backend/app/models/category.py
@@ -0,0 +1,64 @@
 """
 品类相关模型
 包含：品类、子类型、颜色
 """
 from sqlalchemy import Column, Integer, String, ForeignKey
 from sqlalchemy.orm import relationship
 from ..database import Base
 class Category(Base):
    """品类表"""
    __tablename__ = "categories"
    id = Column(Integer, primary_key=True, autoincrement=True, comment="品类ID")
    name = Column(String(50), nullable=False, comment="品类名称")
    icon = Column(String(255), nullable=True, comment="品类图标")
    sort_order = Column(Integer, default=0, comment="排序")
    flow_type = Column(String(20), nullable=False, comment="流程类型：full/size_color/simple")
    # 关联关系
    sub_types = relationship("SubType", back_populates="category")
    colors = relationship("Color", back_populates="category")
    designs = relationship("Design", back_populates="category")
    def __repr__(self):
        return f"<Category(id={self.id}, name='{self.name}')>"
 class SubType(Base):
    """子类型表"""
    __tablename__ = "sub_types"
    id = Column(Integer, primary_key=True, autoincrement=True, comment="子类型ID")
    category_id = Column(Integer, ForeignKey("categories.id"), nullable=False, comment="所属品类")
    name = Column(String(50), nullable=False, comment="名称")
    description = Column(String(255), nullable=True, comment="描述")
    preview_image = Column(String(255), nullable=True, comment="预览图")
    sort_order = Column(Integer, default=0, comment="排序")
    # 关联关系
    category = relationship("Category", back_populates="sub_types")
    designs = relationship("Design", back_populates="sub_type")
    def __repr__(self):
        return f"<SubType(id={self.id}, name='{self.name}')>"
 class Color(Base):
    """颜色表"""
    __tablename__ = "colors"
    id = Column(Integer, primary_key=True, autoincrement=True, comment="颜色ID")
    category_id = Column(Integer, ForeignKey("categories.id"), nullable=False, comment="适用品类")
    name = Column(String(50), nullable=False, comment="颜色名称")
    hex_code = Column(String(7), nullable=False, comment="色值")
    sort_order = Column(Integer, default=0, comment="排序")
    # 关联关系
    category = relationship("Category", back_populates="colors")
    designs = relationship("Design", back_populates="color")
    def __repr__(self):
        return f"<Color(id={self.id}, name='{self.name}', hex_code='{self.hex_code}')>"
--- a/backend/app/models/design.py
+++ b/backend/app/models/design.py
@@ -0,0 +1,39 @@
 """
 设计作品模型
 """
 from sqlalchemy import Column, BigInteger, Integer, String, Text, DateTime, ForeignKey
 from sqlalchemy.sql import func
 from sqlalchemy.orm import relationship
 from ..database import Base
 class Design(Base):
    """设计作品表"""
    __tablename__ = "designs"
    id = Column(BigInteger, primary_key=True, autoincrement=True, comment="设计ID")
    user_id = Column(BigInteger, ForeignKey("users.id"), nullable=False, comment="用户ID")
    category_id = Column(Integer, ForeignKey("categories.id"), nullable=False, comment="品类ID")
    sub_type_id = Column(Integer, ForeignKey("sub_types.id"), nullable=True, comment="子类型ID")
    color_id = Column(Integer, ForeignKey("colors.id"), nullable=True, comment="颜色ID")
    prompt = Column(Text, nullable=False, comment="设计需求")
    carving_technique = Column(String(50), nullable=True, comment="雕刻工艺")
    design_style = Column(String(50), nullable=True, comment="设计风格")
    motif = Column(String(100), nullable=True, comment="题材纹样")
    size_spec = Column(String(100), nullable=True, comment="尺寸规格")
    surface_finish = Column(String(50), nullable=True, comment="表面处理")
    usage_scene = Column(String(50), nullable=True, comment="用途场景")
    image_url = Column(String(255), nullable=True, comment="设计图URL")
    status = Column(String(20), default="generating", comment="状态")
    created_at = Column(DateTime, server_default=func.now(), comment="创建时间")
    updated_at = Column(DateTime, server_default=func.now(), onupdate=func.now(), comment="更新时间")
    # 关联关系
    user = relationship("User", back_populates="designs")
    category = relationship("Category", back_populates="designs")
    sub_type = relationship("SubType", back_populates="designs")
    color = relationship("Color", back_populates="designs")
    def __repr__(self):
        return f"<Design(id={self.id}, status='{self.status}')>"
--- a/backend/app/models/user.py
+++ b/backend/app/models/user.py
@@ -0,0 +1,28 @@
 """
 用户模型
 """
 from sqlalchemy import Column, BigInteger, String, DateTime
 from sqlalchemy.sql import func
 from sqlalchemy.orm import relationship
 from ..database import Base
 class User(Base):
    """用户表"""
    __tablename__ = "users"
    id = Column(BigInteger, primary_key=True, autoincrement=True, comment="用户ID")
    username = Column(String(50), unique=True, nullable=False, comment="用户名")
    phone = Column(String(20), unique=True, nullable=True, comment="手机号")
    hashed_password = Column(String(255), nullable=False, comment="加密密码")
    nickname = Column(String(50), nullable=True, comment="昵称")
    avatar = Column(String(255), nullable=True, comment="头像URL")
    created_at = Column(DateTime, server_default=func.now(), comment="创建时间")
    updated_at = Column(DateTime, server_default=func.now(), onupdate=func.now(), comment="更新时间")
    # 关联关系
    designs = relationship("Design", back_populates="user")
    def __repr__(self):
        return f"<User(id={self.id}, username='{self.username}')>"
--- a/backend/app/routers/init.py
+++ b/backend/app/routers/init.py
@@ -0,0 +1,8 @@
 # API 路由模块
 from . import categories, designs, users
 __all__ = [
    "categories",
    "designs",
    "users",
 ]
--- a/backend/app/routers/auth.py
+++ b/backend/app/routers/auth.py
@@ -0,0 +1,63 @@
 """
 认证路由
 提供用户注册、登录和获取当前用户信息的 API
 """
 from fastapi import APIRouter, Depends, HTTPException, status
 from sqlalchemy.orm import Session
 from ..database import get_db
 from ..schemas.user import UserCreate, UserLogin, UserResponse, Token
 from ..services.auth_service import register_user, authenticate_user
 from ..utils.deps import get_current_user
 from ..utils.security import create_access_token
 from ..models.user import User
 router = APIRouter(prefix="/api/auth", tags=["认证"])
@router.post("/register", response_model=UserResponse)
 def register(user_data: UserCreate, db: Session = Depends(get_db)):
    """
    用户注册
    创建新用户账号，用户名必须唯一
    """
    try:
        user = register_user(db, user_data)
        return user
    except ValueError as e:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail=str(e)
        )
@router.post("/login", response_model=Token)
 def login(user_data: UserLogin, db: Session = Depends(get_db)):
    """
    用户登录
    验证用户名和密码，返回 JWT access token
    """
    user = authenticate_user(db, user_data.username, user_data.password)
    if not user:
        raise HTTPException(
            status_code=status.HTTP_401_UNAUTHORIZED,
            detail="用户名或密码错误",
            headers={"WWW-Authenticate": "Bearer"},
        )
    # 生成 JWT token，sub 字段存储用户 ID
    access_token = create_access_token(data={"sub": str(user.id)})
    return Token(access_token=access_token, token_type="bearer")
@router.get("/me", response_model=UserResponse)
 def get_me(current_user: User = Depends(get_current_user)):
    """
    获取当前登录用户信息
    需要认证，从 token 中解析用户身份
    """
    return current_user
--- a/backend/app/routers/categories.py
+++ b/backend/app/routers/categories.py
@@ -0,0 +1,71 @@
 """
 品类相关路由
 提供品类、子类型、颜色的查询接口
 """
 from fastapi import APIRouter, Depends, HTTPException, status
 from sqlalchemy.orm import Session
 from typing import List
 from ..database import get_db
 from ..models import Category, SubType, Color
 from ..schemas import CategoryResponse, SubTypeResponse, ColorResponse
 router = APIRouter(prefix="/api/categories", tags=["品类"])
@router.get("", response_model=List[CategoryResponse])
 def get_categories(db: Session = Depends(get_db)):
    """
    获取所有品类列表
    按 sort_order 排序，无需认证
    """
    categories = db.query(Category).order_by(Category.sort_order).all()
    return categories
@router.get("/{category_id}/sub-types", response_model=List[SubTypeResponse])
 def get_category_sub_types(
    category_id: int,
    db: Session = Depends(get_db)
 ):
    """
    获取品类下的子类型
    无需认证
    """
    # 检查品类是否存在
    category = db.query(Category).filter(Category.id == category_id).first()
    if not category:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="品类不存在"
        )
    sub_types = db.query(SubType).filter(
        SubType.category_id == category_id
    ).order_by(SubType.sort_order).all()
    return sub_types
@router.get("/{category_id}/colors", response_model=List[ColorResponse])
 def get_category_colors(
    category_id: int,
    db: Session = Depends(get_db)
 ):
    """
    获取品类下的颜色选项
    无需认证
    """
    # 检查品类是否存在
    category = db.query(Category).filter(Category.id == category_id).first()
    if not category:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="品类不存在"
        )
    colors = db.query(Color).filter(
        Color.category_id == category_id
    ).order_by(Color.sort_order).all()
    return colors
--- a/backend/app/routers/designs.py
+++ b/backend/app/routers/designs.py
@@ -0,0 +1,201 @@
 """
 设计相关路由
 提供设计生成、查询、删除、下载接口
 """
 import os
 from fastapi import APIRouter, Depends, HTTPException, status, Query
 from fastapi.responses import FileResponse
 from sqlalchemy.orm import Session
 from ..database import get_db
 from ..models import User, Design
 from ..schemas import DesignCreate, DesignResponse, DesignListResponse
 from ..utils.deps import get_current_user
 from ..services import design_service
 router = APIRouter(prefix="/api/designs", tags=["设计"])
 def design_to_response(design: Design) -> DesignResponse:
    """将 Design 模型转换为响应格式"""
    return DesignResponse(
        id=design.id,
        user_id=design.user_id,
        category={
            "id": design.category.id,
            "name": design.category.name,
            "icon": design.category.icon,
            "sort_order": design.category.sort_order,
            "flow_type": design.category.flow_type
        },
        sub_type={
            "id": design.sub_type.id,
            "category_id": design.sub_type.category_id,
            "name": design.sub_type.name,
            "description": design.sub_type.description,
            "preview_image": design.sub_type.preview_image,
            "sort_order": design.sub_type.sort_order
        } if design.sub_type else None,
        color={
            "id": design.color.id,
            "category_id": design.color.category_id,
            "name": design.color.name,
            "hex_code": design.color.hex_code,
            "sort_order": design.color.sort_order
        } if design.color else None,
        prompt=design.prompt,
        carving_technique=design.carving_technique,
        design_style=design.design_style,
        motif=design.motif,
        size_spec=design.size_spec,
        surface_finish=design.surface_finish,
        usage_scene=design.usage_scene,
        image_url=design.image_url,
        status=design.status,
        created_at=design.created_at,
        updated_at=design.updated_at
    )
@router.post("/generate", response_model=DesignResponse)
 def generate_design(
    design_data: DesignCreate,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    提交设计生成请求
    需要认证
    """
    try:
        design = design_service.create_design(
            db=db,
            user_id=current_user.id,
            design_data=design_data
        )
        return design_to_response(design)
    except ValueError as e:
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail=str(e)
        )
@router.get("", response_model=DesignListResponse)
 def get_designs(
    page: int = Query(1, ge=1, description="页码"),
    page_size: int = Query(20, ge=1, le=100, description="每页数量"),
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    获取当前用户的设计历史列表（分页）
    需要认证
    """
    designs, total = design_service.get_user_designs(
        db=db,
        user_id=current_user.id,
        page=page,
        page_size=page_size
    )
    return DesignListResponse(
        items=[design_to_response(d) for d in designs],
        total=total,
        page=page,
        page_size=page_size
    )
@router.get("/{design_id}", response_model=DesignResponse)
 def get_design(
    design_id: int,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    获取设计详情
    只能查看自己的设计，非本人设计返回 404
    """
    design = design_service.get_design_by_id(
        db=db,
        design_id=design_id,
        user_id=current_user.id
    )
    if not design:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="设计不存在"
        )
    return design_to_response(design)
@router.delete("/{design_id}")
 def delete_design(
    design_id: int,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    删除设计
    只能删除自己的设计，非本人设计返回 404
    """
    success = design_service.delete_design(
        db=db,
        design_id=design_id,
        user_id=current_user.id
    )
    if not success:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="设计不存在"
        )
    return {"message": "删除成功"}
@router.get("/{design_id}/download")
 def download_design(
    design_id: int,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    下载设计图
    只能下载自己的设计，非本人设计返回 404
    """
    design = design_service.get_design_by_id(
        db=db,
        design_id=design_id,
        user_id=current_user.id
    )
    if not design:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="设计不存在"
        )
    if not design.image_url:
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="设计图片不存在"
        )
    # 转换 URL 为文件路径
    file_path = design.image_url.lstrip("/")
    if not os.path.exists(file_path):
        raise HTTPException(
            status_code=status.HTTP_404_NOT_FOUND,
            detail="设计图片文件不存在"
        )
    return FileResponse(
        path=file_path,
        filename=f"design_{design_id}.png",
        media_type="image/png"
    )
--- a/backend/app/routers/users.py
+++ b/backend/app/routers/users.py
@@ -0,0 +1,75 @@
 """
 用户相关路由
 提供用户信息更新、密码修改接口
 """
 from fastapi import APIRouter, Depends, HTTPException, status
 from sqlalchemy.orm import Session
 from ..database import get_db
 from ..models import User
 from ..schemas import UserResponse, UserUpdate, PasswordChange
 from ..utils.deps import get_current_user
 from ..utils.security import verify_password, get_password_hash
 router = APIRouter(prefix="/api/users", tags=["用户"])
@router.put("/profile", response_model=UserResponse)
 def update_profile(
    user_data: UserUpdate,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    更新个人信息
    需要认证
    """
    # 更新非空字段
    if user_data.nickname is not None:
        current_user.nickname = user_data.nickname
    if user_data.phone is not None:
        # 检查手机号是否已被其他用户使用
        if user_data.phone:
            existing_user = db.query(User).filter(
                User.phone == user_data.phone,
                User.id != current_user.id
            ).first()
            if existing_user:
                raise HTTPException(
                    status_code=status.HTTP_400_BAD_REQUEST,
                    detail="手机号已被使用"
                )
        current_user.phone = user_data.phone
    if user_data.avatar is not None:
        current_user.avatar = user_data.avatar
    db.commit()
    db.refresh(current_user)
    return current_user
@router.put("/password")
 def change_password(
    password_data: PasswordChange,
    db: Session = Depends(get_db),
    current_user: User = Depends(get_current_user)
 ):
    """
    修改密码
    需要认证，旧密码错误返回 400
    """
    # 验证旧密码
    if not verify_password(password_data.old_password, current_user.hashed_password):
        raise HTTPException(
            status_code=status.HTTP_400_BAD_REQUEST,
            detail="旧密码错误"
        )
    # 更新密码
    current_user.hashed_password = get_password_hash(password_data.new_password)
    db.commit()
    return {"message": "密码修改成功"}
--- a/backend/app/schemas/init.py
+++ b/backend/app/schemas/init.py
@@ -0,0 +1,25 @@
 """
 Pydantic Schemas
 导出所有 Schema 类型
 """
 from .user import UserCreate, UserLogin, UserResponse, Token, UserUpdate, PasswordChange
 from .category import CategoryResponse, SubTypeResponse, ColorResponse
 from .design import DesignCreate, DesignResponse, DesignListResponse
 __all__ = [
    # User schemas
    "UserCreate",
    "UserLogin",
    "UserResponse",
    "Token",
    "UserUpdate",
    "PasswordChange",
    # Category schemas
    "CategoryResponse",
    "SubTypeResponse",
    "ColorResponse",
    # Design schemas
    "DesignCreate",
    "DesignResponse",
    "DesignListResponse",
 ]
--- a/backend/app/schemas/category.py
+++ b/backend/app/schemas/category.py
@@ -0,0 +1,42 @@
 """
 品类相关 Pydantic Schemas
 """
 from pydantic import BaseModel
 from typing import Optional
 class CategoryResponse(BaseModel):
    """品类响应"""
    id: int
    name: str
    icon: Optional[str] = None
    sort_order: int
    flow_type: str
    class Config:
        from_attributes = True
 class SubTypeResponse(BaseModel):
    """子类型响应"""
    id: int
    category_id: int
    name: str
    description: Optional[str] = None
    preview_image: Optional[str] = None
    sort_order: int
    class Config:
        from_attributes = True
 class ColorResponse(BaseModel):
    """颜色响应"""
    id: int
    category_id: int
    name: str
    hex_code: str
    sort_order: int
    class Config:
        from_attributes = True
--- a/backend/app/schemas/design.py
+++ b/backend/app/schemas/design.py
@@ -0,0 +1,53 @@
 """
 设计作品相关 Pydantic Schemas
 """
 from pydantic import BaseModel, Field
 from datetime import datetime
 from typing import Optional, List
 from .category import CategoryResponse, SubTypeResponse, ColorResponse
 class DesignCreate(BaseModel):
    """创建设计请求"""
    category_id: int = Field(..., description="品类ID")
    sub_type_id: Optional[int] = Field(None, description="子类型ID")
    color_id: Optional[int] = Field(None, description="颜色ID")
    prompt: str = Field(..., min_length=1, 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="题材纹样")
    size_spec: Optional[str] = Field(None, max_length=100, description="尺寸规格")
    surface_finish: Optional[str] = Field(None, max_length=50, description="表面处理")
    usage_scene: Optional[str] = Field(None, max_length=50, description="用途场景")
 class DesignResponse(BaseModel):
    """设计作品响应"""
    id: int
    user_id: int
    category: CategoryResponse
    sub_type: Optional[SubTypeResponse] = None
    color: Optional[ColorResponse] = None
    prompt: str
    carving_technique: Optional[str] = None
    design_style: Optional[str] = None
    motif: Optional[str] = None
    size_spec: Optional[str] = None
    surface_finish: Optional[str] = None
    usage_scene: Optional[str] = None
    image_url: Optional[str] = None
    status: str
    created_at: datetime
    updated_at: datetime
    class Config:
        from_attributes = True
 class DesignListResponse(BaseModel):
    """设计作品列表响应"""
    items: List[DesignResponse]
    total: int
    page: int
    page_size: int
--- a/backend/app/schemas/user.py
+++ b/backend/app/schemas/user.py
@@ -0,0 +1,51 @@
 """
 用户相关 Pydantic Schemas
 """
 from pydantic import BaseModel, Field
 from datetime import datetime
 from typing import Optional
 class UserCreate(BaseModel):
    """用户注册请求"""
    username: str = Field(..., min_length=2, max_length=50, description="用户名")
    password: str = Field(..., min_length=6, max_length=100, description="密码")
    nickname: Optional[str] = Field(None, max_length=50, description="昵称")
 class UserLogin(BaseModel):
    """用户登录请求"""
    username: str = Field(..., description="用户名")
    password: str = Field(..., description="密码")
 class UserResponse(BaseModel):
    """用户响应"""
    id: int
    username: str
    nickname: Optional[str] = None
    phone: Optional[str] = None
    avatar: Optional[str] = None
    created_at: datetime
    class Config:
        from_attributes = True
 class Token(BaseModel):
    """认证令牌响应"""
    access_token: str
    token_type: str = "bearer"
 class UserUpdate(BaseModel):
    """用户信息更新请求"""
    nickname: Optional[str] = Field(None, max_length=50, description="昵称")
    phone: Optional[str] = Field(None, max_length=20, description="手机号")
    avatar: Optional[str] = Field(None, max_length=255, description="头像URL")
 class PasswordChange(BaseModel):
    """修改密码请求"""
    old_password: str = Field(..., description="旧密码")
    new_password: str = Field(..., min_length=6, max_length=100, description="新密码")
--- a/backend/app/services/init.py
+++ b/backend/app/services/init.py
@@ -0,0 +1,8 @@
 # 业务服务模块
 from . import design_service
 from .mock_generator import generate_mock_design
 __all__ = [
    "design_service",
    "generate_mock_design",
 ]
--- a/backend/app/services/auth_service.py
+++ b/backend/app/services/auth_service.py
@@ -0,0 +1,67 @@
 """
 认证服务
 提供用户注册和登录业务逻辑
 """
 from typing import Optional
 from sqlalchemy.orm import Session
 from ..models.user import User
 from ..schemas.user import UserCreate
 from ..utils.security import get_password_hash, verify_password
 def register_user(db: Session, user_data: UserCreate) -> User:
    """
    注册新用户
    Args:
        db: 数据库会话
        user_data: 用户注册数据
    Returns:
        创建的用户对象
    Raises:
        ValueError: 用户名已存在时抛出
    """
    # 检查用户名是否已存在
    existing_user = db.query(User).filter(User.username == user_data.username).first()
    if existing_user:
        raise ValueError("用户名已存在")
    # 创建新用户，密码加密存储
    db_user = User(
        username=user_data.username,
        hashed_password=get_password_hash(user_data.password),
        nickname=user_data.nickname or user_data.username
    )
    db.add(db_user)
    db.commit()
    db.refresh(db_user)
    return db_user
 def authenticate_user(db: Session, username: str, password: str) -> Optional[User]:
    """
    验证用户登录
    Args:
        db: 数据库会话
        username: 用户名
        password: 明文密码
    Returns:
        验证成功返回用户对象，失败返回 None
    """
    # 查询用户
    user = db.query(User).filter(User.username == username).first()
    if not user:
        return None
    # 验证密码
    if not verify_password(password, user.hashed_password):
        return None
    return user
--- a/backend/app/services/design_service.py
+++ b/backend/app/services/design_service.py
@@ -0,0 +1,150 @@
 """
 设计服务
 处理设计相关的业务逻辑
 """
 import os
 from typing import List, Optional, Tuple
 from sqlalchemy.orm import Session
 from sqlalchemy import desc
 from ..models import Design, Category, SubType, Color
 from ..schemas import DesignCreate
 from ..config import settings
 from .mock_generator import generate_mock_design
 def create_design(db: Session, user_id: int, design_data: DesignCreate) -> Design:
    """
    创建设计记录
    1. 创建设计记录（status=generating）
    2. 调用 mock_generator 生成图片
    3. 更新设计记录（status=completed, image_url）
    4. 返回设计对象
    """
    # 获取关联信息
    category = db.query(Category).filter(Category.id == design_data.category_id).first()
    if not category:
        raise ValueError(f"品类不存在: {design_data.category_id}")
    sub_type = None
    if design_data.sub_type_id:
        sub_type = db.query(SubType).filter(SubType.id == design_data.sub_type_id).first()
    color = None
    if design_data.color_id:
        color = db.query(Color).filter(Color.id == design_data.color_id).first()
    # 创建设计记录
    design = Design(
        user_id=user_id,
        category_id=design_data.category_id,
        sub_type_id=design_data.sub_type_id,
        color_id=design_data.color_id,
        prompt=design_data.prompt,
        carving_technique=design_data.carving_technique,
        design_style=design_data.design_style,
        motif=design_data.motif,
        size_spec=design_data.size_spec,
        surface_finish=design_data.surface_finish,
        usage_scene=design_data.usage_scene,
        status="generating"
    )
    db.add(design)
    db.flush()  # 获取 ID
    # 生成图片
    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,
        color_name=color.name if color else None,
        prompt=design_data.prompt,
        save_path=save_path,
        carving_technique=design_data.carving_technique,
        design_style=design_data.design_style,
        motif=design_data.motif,
        size_spec=design_data.size_spec,
        surface_finish=design_data.surface_finish,
        usage_scene=design_data.usage_scene,
    )
    # 更新设计记录
    design.image_url = image_url
    design.status = "completed"
    db.commit()
    db.refresh(design)
    return design
 def get_user_designs(
    db: Session, 
    user_id: int, 
    page: int = 1, 
    page_size: int = 20
 ) -> Tuple[List[Design], int]:
    """
    分页查询用户设计历史
    Returns:
        (设计列表, 总数)
    """
    query = db.query(Design).filter(Design.user_id == user_id)
    # 获取总数
    total = query.count()
    # 分页查询，按创建时间倒序
    offset = (page - 1) * page_size
    designs = query.order_by(desc(Design.created_at)).offset(offset).limit(page_size).all()
    return designs, total
 def get_design_by_id(db: Session, design_id: int, user_id: int) -> Optional[Design]:
    """
    获取单个设计
    只返回属于该用户的设计
    """
    return db.query(Design).filter(
        Design.id == design_id,
        Design.user_id == user_id
    ).first()
 def delete_design(db: Session, design_id: int, user_id: int) -> bool:
    """
    删除设计
    1. 查找设计（必须属于该用户）
    2. 删除图片文件
    3. 删除数据库记录
    Returns:
        是否删除成功
    """
    design = db.query(Design).filter(
        Design.id == design_id,
        Design.user_id == user_id
    ).first()
    if not design:
        return False
    # 删除图片文件
    if design.image_url:
        # image_url 格式: /uploads/designs/1001.png
        # 转换为实际文件路径
        file_path = design.image_url.lstrip("/")
        if os.path.exists(file_path):
            try:
                os.remove(file_path)
            except Exception:
                pass  # 忽略删除失败
    # 删除数据库记录
    db.delete(design)
    db.commit()
    return True
--- a/backend/app/services/mock_generator.py
+++ b/backend/app/services/mock_generator.py
@@ -0,0 +1,222 @@
 """
 Mock 图片生成服务
 使用 Pillow 生成带文字的占位设计图
 """
 import os
 from typing import Optional, Tuple, Union
 from PIL import Image, ImageDraw, ImageFont
 # 颜色映射表（中文颜色名 -> 十六进制）
 COLOR_MAP = {
    # 和田玉国标色种
    "白玉": "#FEFEF2",
    "青白玉": "#E8EDE4",
    "青玉": "#7A8B6E",
    "碧玉": "#2D5F2D",
    "翠青": "#6BAF8D",
    "黄玉": "#D4A843",
    "糖玉": "#C4856C",
    "墨玉": "#2C2C2C",
    "藕粉": "#E8B4B8",
    "烟紫": "#8B7D9B",
    # 原有颜色
    "糖白": "#F5F0E8",
    # 通用颜色
    "白色": "#FFFFFF",
    "黑色": "#333333",
    "红色": "#C41E3A",
    "绿色": "#228B22",
    "蓝色": "#4169E1",
    "黄色": "#FFD700",
    "紫色": "#9370DB",
    "粉色": "#FFB6C1",
    "橙色": "#FF8C00",
 }
 # 默认背景色（浅灰）
 DEFAULT_BG_COLOR = "#E8E4DF"
 def hex_to_rgb(hex_color: str) -> Tuple[int, int, int]:
    """将十六进制颜色转换为 RGB 元组"""
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
 def get_contrast_text_color(bg_color: str) -> str:
    """根据背景色计算合适的文字颜色（黑或白）"""
    r, g, b = hex_to_rgb(bg_color)
    # 使用亮度公式
    brightness = (r * 299 + g * 587 + b * 114) / 1000
    return "#333333" if brightness > 128 else "#FFFFFF"
 def get_font(size: int = 24) -> Union[ImageFont.FreeTypeFont, ImageFont.ImageFont]:
    """
    获取字体，优先使用系统中文字体
    """
    # 常见中文字体路径
    font_paths = [
        # macOS
        "/System/Library/Fonts/PingFang.ttc",
        "/System/Library/Fonts/STHeiti Light.ttc",
        "/System/Library/Fonts/Supplemental/Arial Unicode.ttf",
        "/Library/Fonts/Arial Unicode.ttf",
        # Linux
        "/usr/share/fonts/truetype/droid/DroidSansFallbackFull.ttf",
        "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc",
        "/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc",
        # Windows
        "C:\\Windows\\Fonts\\msyh.ttc",
        "C:\\Windows\\Fonts\\simsun.ttc",
    ]
    for font_path in font_paths:
        if os.path.exists(font_path):
            try:
                return ImageFont.truetype(font_path, size)
            except Exception:
                continue
    # 回退到默认字体
    return ImageFont.load_default()
 def generate_mock_design(
    category_name: str,
    sub_type_name: Optional[str],
    color_name: Optional[str],
    prompt: str,
    save_path: str,
    carving_technique: Optional[str] = None,
    design_style: Optional[str] = None,
    motif: Optional[str] = None,
    size_spec: Optional[str] = None,
    surface_finish: Optional[str] = None,
    usage_scene: Optional[str] = None,
 ) -> str:
    """
    生成 Mock 设计图
    Args:
        category_name: 品类名称
        sub_type_name: 子类型名称（可选）
        color_name: 颜色名称（可选）
        prompt: 用户设计需求
        save_path: 保存路径
    Returns:
        相对 URL 路径，如 /uploads/designs/1001.png
    """
    # 确定背景色
    if color_name and color_name in COLOR_MAP:
        bg_color = COLOR_MAP[color_name]
    elif color_name:
        # 尝试直接使用颜色名（可能是十六进制）
        bg_color = color_name if color_name.startswith("#") else DEFAULT_BG_COLOR
    else:
        bg_color = DEFAULT_BG_COLOR
    # 创建图片
    width, height = 800, 800
    bg_rgb = hex_to_rgb(bg_color)
    image = Image.new("RGB", (width, height), bg_rgb)
    draw = ImageDraw.Draw(image)
    # 获取文字颜色（与背景对比）
    text_color = get_contrast_text_color(bg_color)
    text_rgb = hex_to_rgb(text_color)
    # 获取字体
    title_font = get_font(48)
    info_font = get_font(32)
    prompt_font = get_font(28)
    # 绘制标题
    title = "玉宗设计"
    draw.text((width // 2, 100), title, font=title_font, fill=text_rgb, anchor="mm")
    # 绘制分隔线
    line_y = 160
    draw.line([(100, line_y), (700, line_y)], fill=text_rgb, width=2)
    # 绘制品类信息
    y_position = 220
    info_lines = [f"品类: {category_name}"]
    if sub_type_name:
        info_lines.append(f"类型: {sub_type_name}")
    if color_name:
        info_lines.append(f"颜色: {color_name}")
    if carving_technique:
        info_lines.append(f"工艺: {carving_technique}")
    if design_style:
        info_lines.append(f"风格: {design_style}")
    if motif:
        info_lines.append(f"题材: {motif}")
    if size_spec:
        info_lines.append(f"尺寸: {size_spec}")
    if surface_finish:
        info_lines.append(f"表面: {surface_finish}")
    if usage_scene:
        info_lines.append(f"用途: {usage_scene}")
    for line in info_lines:
        draw.text((width // 2, y_position), line, font=info_font, fill=text_rgb, anchor="mm")
        y_position += 50
    # 绘制分隔线
    y_position += 20
    draw.line([(100, y_position), (700, y_position)], fill=text_rgb, width=1)
    y_position += 40
    # 绘制用户需求标题
    draw.text((width // 2, y_position), "设计需求:", font=info_font, fill=text_rgb, anchor="mm")
    y_position += 50
    # 绘制用户需求文本（自动换行）
    max_chars_per_line = 20
    prompt_lines = []
    current_line = ""
    for char in prompt:
        current_line += char
        if len(current_line) >= max_chars_per_line:
            prompt_lines.append(current_line)
            current_line = ""
    if current_line:
        prompt_lines.append(current_line)
    # 限制最多显示 5 行
    for line in prompt_lines[:5]:
        draw.text((width // 2, y_position), line, font=prompt_font, fill=text_rgb, anchor="mm")
        y_position += 40
    if len(prompt_lines) > 5:
        draw.text((width // 2, y_position), "...", font=prompt_font, fill=text_rgb, anchor="mm")
    # 绘制底部装饰
    draw.rectangle([(50, 720), (750, 750)], outline=text_rgb, width=2)
    draw.text((width // 2, 735), "AI Generated Mock Design", font=get_font(20), fill=text_rgb, anchor="mm")
    # 确保目录存在
    os.makedirs(os.path.dirname(save_path), exist_ok=True)
    # 保存图片
    image.save(save_path, "PNG")
    # 返回相对 URL 路径
    # save_path 格式类似 uploads/designs/1001.png
    # 需要转换为 /uploads/designs/1001.png
    relative_path = save_path.replace("\\", "/")
    if not relative_path.startswith("/"):
        relative_path = "/" + relative_path
    return relative_path
--- a/backend/app/utils/init.py
+++ b/backend/app/utils/init.py
@@ -0,0 +1 @@
 # 工具函数模块
--- a/backend/app/utils/deps.py
+++ b/backend/app/utils/deps.py
@@ -0,0 +1,58 @@
 """
 认证依赖注入
 提供用户认证相关的 FastAPI 依赖
 """
 from fastapi import Depends, HTTPException, status
 from fastapi.security import OAuth2PasswordBearer
 from jose import JWTError, jwt
 from sqlalchemy.orm import Session
 from ..config import settings
 from ..database import get_db
 from ..models.user import User
 # OAuth2 密码认证方案，tokenUrl 指向登录接口
 oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/auth/login")
 def get_current_user(
    token: str = Depends(oauth2_scheme),
    db: Session = Depends(get_db)
 ) -> User:
    """
    获取当前登录用户
    从 JWT token 中解析用户 ID，查询数据库返回用户对象
    Args:
        token: JWT access token
        db: 数据库会话
    Returns:
        当前登录的用户对象
    Raises:
        HTTPException: token 无效或用户不存在时抛出 401
    """
    credentials_exception = HTTPException(
        status_code=status.HTTP_401_UNAUTHORIZED,
        detail="无法验证凭据",
        headers={"WWW-Authenticate": "Bearer"},
    )
    try:
        # 解码 JWT token
        payload = jwt.decode(token, settings.SECRET_KEY, algorithms=[settings.ALGORITHM])
        user_id: str = payload.get("sub")
        if user_id is None:
            raise credentials_exception
    except JWTError:
        raise credentials_exception
    # 从数据库查询用户
    user = db.query(User).filter(User.id == int(user_id)).first()
    if user is None:
        raise credentials_exception
    return user
--- a/backend/app/utils/security.py
+++ b/backend/app/utils/security.py
@@ -0,0 +1,63 @@
 """
 安全工具函数
 包含 JWT 令牌创建和密码加密验证
 """
 from datetime import datetime, timedelta
 from typing import Optional, Any
 from jose import jwt
 from passlib.context import CryptContext
 from ..config import settings
 # 密码加密上下文
 pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
 def create_access_token(data: dict, expires_delta: Optional[timedelta] = None) -> str:
    """
    创建 JWT access token
    Args:
        data: 要编码到 token 中的数据
        expires_delta: token 过期时间，默认使用配置中的时间
    Returns:
        编码后的 JWT token 字符串
    """
    to_encode = data.copy()
    if expires_delta:
        expire = datetime.utcnow() + expires_delta
    else:
        expire = datetime.utcnow() + timedelta(minutes=settings.ACCESS_TOKEN_EXPIRE_MINUTES)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, settings.SECRET_KEY, algorithm=settings.ALGORITHM)
    return encoded_jwt
 def verify_password(plain_password: str, hashed_password: str) -> bool:
    """
    验证密码
    Args:
        plain_password: 明文密码
        hashed_password: 哈希后的密码
    Returns:
        密码是否匹配
    """
    return pwd_context.verify(plain_password, hashed_password)
 def get_password_hash(password: str) -> str:
    """
    对密码进行哈希
    Args:
        password: 明文密码
    Returns:
        哈希后的密码字符串
    """
    return pwd_context.hash(password)
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -0,0 +1,13 @@
 fastapi==0.109.2
 uvicorn[standard]==0.27.1
 sqlalchemy==2.0.27
 pymysql==1.1.0
 cryptography==42.0.2
 alembic==1.13.1
 python-jose[cryptography]==3.3.0
 passlib[bcrypt]==1.7.4
 python-dotenv==1.0.1
 python-multipart==0.0.9
 Pillow==10.2.0
 pydantic[email]==2.6.1
 pydantic-settings==2.1.0
--- a/backend/uploads/.gitkeep
+++ b/backend/uploads/.gitkeep
--- a/backend/uploads/designs/1.png
+++ b/backend/uploads/designs/1.png
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,3 @@
 {
  "recommendations": ["Vue.volar"]
 }
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,5 @@
 # Vue 3 + TypeScript + Vite
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>frontend</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
 {
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
    "axios": "^1.13.6",
    "element-plus": "^2.13.6",
    "pinia": "^3.0.4",
    "vue": "^3.5.30",
    "vue-router": "^4.6.4"
  },
  "devDependencies": {
    "@types/node": "^24.12.0",
    "@vitejs/plugin-vue": "^6.0.5",
    "@vue/tsconfig": "^0.9.0",
    "sass": "^1.98.0",
    "typescript": "~5.9.3",
    "vite": "^8.0.1",
    "vue-tsc": "^3.2.5"
  }
 }
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,34 @@
 <template>
  <div class="app-container">
    <AppHeader />
    <main class="main-content">
      <router-view />
    </main>
  </div>
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import AppHeader from '@/components/AppHeader.vue'
 import { useUserStore } from '@/stores/user'
 const userStore = useUserStore()
 // 应用初始化时恢复登录状态
 onMounted(() => {
  userStore.init()
 })
 </script>
 <style scoped lang="scss">
 .app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 }
 .main-content {
  flex: 1;
  padding: 24px;
 }
 </style>
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -0,0 +1,51 @@
 // Auth API - 用户认证相关接口
 import request from './request'
 export interface LoginParams {
  username: string
  password: string
 }
 export interface RegisterParams {
  username: string
  password: string
  nickname?: string
 }
 export interface LoginResponse {
  access_token: string
  token_type: string
 }
 export interface UserInfo {
  id: number
  username: string
  nickname: string
  phone?: string | null
  avatar_url?: string
 }
 // 登录
 export const login = (data: LoginParams) => {
  return request.post<any, LoginResponse>('/auth/login', data)
 }
 // 注册
 export const register = (data: RegisterParams) => {
  return request.post('/auth/register', data)
 }
 // 获取当前用户信息
 export const getCurrentUser = () => {
  return request.get<any, UserInfo>('/auth/me')
 }
 // 更新个人资料
 export function updateProfileApi(data: { nickname?: string; phone?: string }) {
  return request.put<any, UserInfo>('/users/profile', data)
 }
 // 修改密码
 export function changePasswordApi(data: { old_password: string; new_password: string }) {
  return request.put('/users/password', data)
 }
--- a/frontend/src/api/category.ts
+++ b/frontend/src/api/category.ts
@@ -0,0 +1,42 @@
 // Category API - 玉石分类相关接口
 import request from './request'
 export interface Category {
  id: number
  name: string
  icon: string | null
  sort_order: number
  flow_type: 'full' | 'size_color' | 'simple'
 }
 export interface SubType {
  id: number
  category_id: number
  name: string
  description: string | null
  preview_image: string | null
  sort_order: number
 }
 export interface ColorOption {
  id: number
  category_id: number
  name: string
  hex_code: string
  sort_order: number
 }
 // 获取品类列表
 export function getCategoriesApi() {
  return request.get<any, Category[]>('/categories')
 }
 // 获取品类下的子类型列表
 export function getSubTypesApi(categoryId: number) {
  return request.get<any, SubType[]>(`/categories/${categoryId}/sub-types`)
 }
 // 获取品类下的颜色列表
 export function getColorsApi(categoryId: number) {
  return request.get<any, ColorOption[]>(`/categories/${categoryId}/colors`)
 }
--- a/frontend/src/api/design.ts
+++ b/frontend/src/api/design.ts
@@ -0,0 +1,76 @@
 // Design API - 设计相关接口
 import request from './request'
 export interface Category {
  id: number
  name: string
 }
 export interface SubType {
  id: number
  name: string
 }
 export interface Design {
  id: number
  user_id: number
  category: Category
  sub_type: SubType
  color: { id: number; name: string } | null
  prompt: string
  carving_technique: string | null
  design_style: string | null
  motif: string | null
  size_spec: string | null
  surface_finish: string | null
  usage_scene: string | null
  image_url: string | null
  status: string
  created_at: string
  updated_at: string
 }
 export interface DesignListResponse {
  items: Design[]
  total: number
  page: number
  page_size: number
 }
 export interface GenerateDesignParams {
  category_id: number
  sub_type_id?: number
  color_id?: number
  prompt: string
  carving_technique?: string
  design_style?: string
  motif?: string
  size_spec?: string
  surface_finish?: string
  usage_scene?: string
 }
 // 获取设计列表
 export function getDesignsApi(page: number = 1, pageSize: number = 20) {
  return request.get<any, DesignListResponse>('/designs', { params: { page, page_size: pageSize } })
 }
 // 获取设计详情
 export function getDesignApi(id: number) {
  return request.get<any, Design>(`/designs/${id}`)
 }
 // 生成设计
 export function generateDesignApi(data: GenerateDesignParams) {
  return request.post<any, Design>('/designs/generate', data)
 }
 // 删除设计
 export function deleteDesignApi(id: number) {
  return request.delete(`/designs/${id}`)
 }
 // 获取设计下载 URL
 export function getDesignDownloadUrl(id: number) {
  return `/api/designs/${id}/download`
 }
--- a/frontend/src/api/request.ts
+++ b/frontend/src/api/request.ts
@@ -0,0 +1,35 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 const request = axios.create({
  baseURL: '/api',
  timeout: 30000,
 })
 // 请求拦截器 - 自动携带 JWT Token
 request.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
 )
 // 响应拦截器 - 统一错误处理
 request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    const message = error.response?.data?.detail || '请求失败'
    ElMessage.error(message)
    return Promise.reject(error)
  }
 )
 export default request
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/styles/theme.scss
+++ b/frontend/src/assets/styles/theme.scss
@@ -0,0 +1,49 @@
 // 玉宗品牌色 - 中式雅致风格
 $primary-color: #5B7E6B;      // 青玉色 - 主色调
 $primary-light: #8BAF9C;      // 浅青
 $primary-dark: #3D5A4A;       // 深青
 $secondary-color: #C4A86C;    // 金缕色 - 辅助色
 $bg-color: #FAF8F5;           // 暖白底色
 $bg-dark: #F0EDE8;            // 深一级底色
 $text-primary: #2C2C2C;       // 主文字
 $text-secondary: #6B6B6B;     // 次要文字
 $text-light: #999999;         // 辅助文字
 $border-color: #E8E4DF;       // 边框色
 $ink-color: #1A1A2E;          // 墨色
 // Element Plus 主题覆盖
 :root {
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-3: #{$primary-light};
  --el-color-primary-dark-2: #{$primary-dark};
  --el-bg-color: #{$bg-color};
  --el-border-color: #{$border-color};
  --el-text-color-primary: #{$text-primary};
  --el-text-color-regular: #{$text-secondary};
 }
 // 全局基础样式
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background-color: $bg-color;
  color: $text-primary;
  -webkit-font-smoothing: antialiased;
 }
 // 滚动条美化
 ::-webkit-scrollbar {
  width: 6px;
 }
 ::-webkit-scrollbar-thumb {
  background: $border-color;
  border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
  background: $text-light;
 }
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/assets/vue.svg
+++ b/frontend/src/assets/vue.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -0,0 +1,147 @@
 <template>
  <header class="app-header">
    <div class="header-left">
      <router-link to="/" class="logo">
        <span class="logo-text">玉宗</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>
    </nav>
    <div class="header-right">
      <template v-if="isLoggedIn">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="user-dropdown">
            <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="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <router-link to="/login" class="auth-link">登录</router-link>
        <router-link to="/register" class="auth-link auth-register">注册</router-link>
      </template>
    </div>
  </header>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 const router = useRouter()
 const userStore = useUserStore()
 const isLoggedIn = computed(() => !!userStore.token)
 const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
 const handleCommand = (command: string) => {
  if (command === 'user') {
    router.push('/user')
  } else if (command === 'logout') {
    userStore.logout()
    router.push('/login')
  }
 }
 </script>
 <style scoped lang="scss">
 .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 32px;
  background-color: #fff;
  border-bottom: 1px solid #E8E4DF;
 }
 .header-left {
  .logo {
    text-decoration: none;
  }
  .logo-text {
    font-size: 24px;
    font-weight: 600;
    color: #5B7E6B;
    letter-spacing: 4px;
  }
 }
 .header-nav {
  display: flex;
  gap: 32px;
  .nav-link {
    color: #6B6B6B;
    text-decoration: none;
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
    &:hover,
    &.router-link-active {
      color: #5B7E6B;
      border-bottom-color: #5B7E6B;
    }
  }
 }
 .header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  .auth-link {
    color: #6B6B6B;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 16px;
    transition: color 0.3s;
    &:hover {
      color: #5B7E6B;
    }
    &.auth-register {
      background-color: #5B7E6B;
      color: #fff;
      border-radius: 4px;
      &:hover {
        background-color: #3D5A4A;
      }
    }
  }
  .user-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #2C2C2C;
    font-size: 14px;
    &:hover {
      color: #5B7E6B;
    }
  }
  .user-nickname {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 }
 </style>
--- a/frontend/src/components/CategoryNav.vue
+++ b/frontend/src/components/CategoryNav.vue
@@ -0,0 +1,100 @@
 <template>
  <nav class="category-nav">
    <div class="nav-header">
      <h3>玉石品类</h3>
    </div>
    <ul class="category-list">
      <li
        v-for="category in categories"
        :key="category.id"
        class="category-item"
        :class="{ active: currentCategory?.id === category.id }"
        @click="handleSelect(category)"
      >
        <span class="category-name">{{ category.name }}</span>
      </li>
    </ul>
  </nav>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useCategoryStore } from '@/stores/category'
 import type { Category } from '@/stores/category'
 const categoryStore = useCategoryStore()
 const categories = computed(() => categoryStore.categories)
 const currentCategory = computed(() => categoryStore.currentCategory)
 const handleSelect = (category: Category) => {
  categoryStore.selectCategory(category)
 }
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 .category-nav {
  width: 200px;
  min-width: 200px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
 }
 .nav-header {
  padding: 20px 16px;
  border-bottom: 1px solid $border-color;
  h3 {
    font-size: 16px;
    font-weight: 500;
    color: $text-primary;
    margin: 0;
    letter-spacing: 2px;
  }
 }
 .category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
 }
 .category-item {
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  border-bottom: 1px solid $border-color;
  &:hover {
    background-color: rgba($primary-color, 0.06);
  }
  &.active {
    background-color: $primary-color;
    .category-name {
      color: #fff;
      font-weight: 500;
    }
  }
 }
 .category-name {
  font-size: 14px;
  color: $text-secondary;
  letter-spacing: 1px;
  transition: color 0.25s ease;
 }
 </style>
--- a/frontend/src/components/ColorPicker.vue
+++ b/frontend/src/components/ColorPicker.vue
@@ -0,0 +1,103 @@
 <template>
  <div class="color-picker">
    <h4 class="picker-title">选择颜色</h4>
    <div class="color-grid">
      <div
        v-for="color in colors"
        :key="color.id"
        class="color-item"
        :class="{ active: modelValue?.id === color.id }"
        @click="handleSelect(color)"
      >
        <div
          class="color-swatch"
          :style="{ backgroundColor: color.hex_code }"
        ></div>
        <span class="color-name">{{ color.name }}</span>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import type { ColorOption } from '@/stores/category'
 defineProps<{
  colors: ColorOption[]
  modelValue: ColorOption | null
 }>()
 const emit = defineEmits<{
  (e: 'update:modelValue', color: ColorOption): void
 }>()
 const handleSelect = (color: ColorOption) => {
  emit('update:modelValue', color)
 }
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $secondary-color: #C4A86C;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 .color-picker {
  margin-top: 24px;
 }
 .picker-title {
  font-size: 15px;
  font-weight: 500;
  color: $text-primary;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
 }
 .color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
 }
 .color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.25s ease;
  &:hover {
    background-color: rgba($primary-color, 0.06);
  }
  &.active {
    .color-swatch {
      box-shadow: 0 0 0 3px $secondary-color;
    }
    .color-name {
      color: $primary-color;
      font-weight: 500;
    }
  }
 }
 .color-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid $border-color;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 .color-name {
  margin-top: 8px;
  font-size: 12px;
  color: $text-secondary;
  transition: all 0.25s ease;
 }
 </style>
--- a/frontend/src/components/DesignPreview.vue
+++ b/frontend/src/components/DesignPreview.vue
@@ -0,0 +1,366 @@
 <template>
  <div class="design-preview">
    <!-- 图片预览区 -->
    <div class="preview-container">
      <div class="image-wrapper" :style="{ transform: `scale(${scale})` }">
        <el-image
          :src="imageUrl"
          :alt="design.prompt"
          fit="contain"
          :preview-src-list="[imageUrl]"
          :initial-index="0"
          preview-teleported
          class="design-image"
        >
          <template #placeholder>
            <div class="image-placeholder">
              <el-icon class="loading-icon"><Loading /></el-icon>
              <span>加载中...</span>
            </div>
          </template>
          <template #error>
            <div class="image-error">
              <el-icon><PictureFilled /></el-icon>
              <span>图片加载失败</span>
            </div>
          </template>
        </el-image>
      </div>
      <!-- 缩放控制 -->
      <div class="zoom-controls">
        <button class="zoom-btn" @click="zoomOut" :disabled="scale <= 0.5">
          <el-icon><ZoomOut /></el-icon>
        </button>
        <span class="zoom-level">{{ Math.round(scale * 100) }}%</span>
        <button class="zoom-btn" @click="zoomIn" :disabled="scale >= 2">
          <el-icon><ZoomIn /></el-icon>
        </button>
        <button class="zoom-btn reset-btn" @click="resetZoom" v-if="scale !== 1">
          <el-icon><RefreshRight /></el-icon>
        </button>
      </div>
    </div>
    <!-- 设计信息 -->
    <div class="design-info">
      <h4 class="info-title">设计详情</h4>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">品类</span>
          <span class="info-value">{{ design.category?.name || '-' }}</span>
        </div>
        <div class="info-item" v-if="design.sub_type">
          <span class="info-label">类型</span>
          <span class="info-value">{{ design.sub_type.name }}</span>
        </div>
        <div class="info-item" v-if="design.color">
          <span class="info-label">颜色</span>
          <span class="info-value">{{ design.color.name }}</span>
        </div>
        <div class="info-item full-width">
          <span class="info-label">设计需求</span>
          <span class="info-value prompt">{{ design.prompt }}</span>
        </div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a
        :href="downloadUrl"
        :download="downloadFilename"
        class="action-btn download-btn"
      >
        <el-icon><Download /></el-icon>
        <span>下载设计图</span>
      </a>
      <button class="action-btn secondary-btn" @click="goToUserCenter">
        <el-icon><User /></el-icon>
        <span>查看我的设计</span>
      </button>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Loading, PictureFilled, ZoomIn, ZoomOut, RefreshRight, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import type { Design } from '@/stores/design'
 import { getDesignDownloadUrl } from '@/api/design'
 const props = defineProps<{
  design: Design
 }>()
 const router = useRouter()
 // 缩放比例
 const scale = ref(1)
 // 图片URL（添加API前缀）
 const imageUrl = computed(() => {
  if (!props.design.image_url) return ''
  // 如果已经是完整URL则直接使用，否则添加 /api 前缀
  if (props.design.image_url.startsWith('http')) {
    return props.design.image_url
  }
  return `/api${props.design.image_url}`
 })
 // 下载URL
 const downloadUrl = computed(() => getDesignDownloadUrl(props.design.id))
 // 下载文件名
 const downloadFilename = computed(() => {
  const category = props.design.category?.name || '设计'
  const subType = props.design.sub_type?.name || ''
  return `${category}${subType ? '-' + subType : ''}-${props.design.id}.png`
 })
 // 放大
 const zoomIn = () => {
  if (scale.value < 2) {
    scale.value = Math.min(2, scale.value + 0.25)
  }
 }
 // 缩小
 const zoomOut = () => {
  if (scale.value > 0.5) {
    scale.value = Math.max(0.5, scale.value - 0.25)
  }
 }
 // 重置缩放
 const resetZoom = () => {
  scale.value = 1
 }
 // 跳转到用户中心
 const goToUserCenter = () => {
  ElMessage.success('设计已自动保存到您的设计历史中')
  router.push('/user')
 }
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
 .design-preview {
  display: flex;
  flex-direction: column;
  gap: 24px;
 }
 .preview-container {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
 }
 .image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  max-height: 500px;
  transition: transform 0.3s ease;
  transform-origin: center center;
 }
 .design-image {
  max-width: 100%;
  max-height: 450px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  cursor: zoom-in;
  :deep(img) {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
  }
 }
 .image-placeholder,
 .image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 300px;
  height: 300px;
  background: $bg-color;
  border-radius: 8px;
  color: $text-light;
  .el-icon {
    font-size: 48px;
  }
 }
 .loading-icon {
  animation: spin 1s linear infinite;
 }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
 }
 .zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  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);
 }
 .zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid $border-color;
  border-radius: 6px;
  cursor: pointer;
  color: $text-secondary;
  transition: all 0.2s ease;
  &:hover:not(:disabled) {
    background: $primary-color;
    border-color: $primary-color;
    color: #fff;
  }
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
 }
 .zoom-level {
  min-width: 48px;
  text-align: center;
  font-size: 13px;
  color: $text-secondary;
 }
 .design-info {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 .info-title {
  font-size: 15px;
  font-weight: 500;
  color: $text-primary;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid $border-color;
  letter-spacing: 1px;
 }
 .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
 }
 .info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  &.full-width {
    grid-column: 1 / -1;
  }
 }
 .info-label {
  font-size: 12px;
  color: $text-light;
  letter-spacing: 0.5px;
 }
 .info-value {
  font-size: 14px;
  color: $text-primary;
  &.prompt {
    line-height: 1.6;
    color: $text-secondary;
  }
 }
 .action-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
 }
 .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  letter-spacing: 1px;
  .el-icon {
    font-size: 18px;
  }
 }
 .download-btn {
  background: $primary-color;
  color: #fff;
  border: none;
  &:hover {
    background: #4a6a5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba($primary-color, 0.3);
  }
 }
 .secondary-btn {
  background: #fff;
  color: $primary-color;
  border: 1px solid $primary-color;
  &:hover {
    background: $primary-color;
    color: #fff;
  }
 }
 </style>
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,93 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import viteLogo from '../assets/vite.svg'
 import heroImg from '../assets/hero.png'
 import vueLogo from '../assets/vue.svg'
 const count = ref(0)
 </script>
 <template>
  <section id="center">
    <div class="hero">
      <img :src="heroImg" class="base" width="170" height="179" alt="" />
      <img :src="vueLogo" class="framework" alt="Vue logo" />
      <img :src="viteLogo" class="vite" alt="Vite logo" />
    </div>
    <div>
      <h1>Get started</h1>
      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
    </div>
    <button class="counter" @click="count++">Count is {{ count }}</button>
  </section>
  <div class="ticks"></div>
  <section id="next-steps">
    <div id="docs">
      <svg class="icon" role="presentation" aria-hidden="true">
        <use href="/icons.svg#documentation-icon"></use>
      </svg>
      <h2>Documentation</h2>
      <p>Your questions, answered</p>
      <ul>
        <li>
          <a href="https://vite.dev/" target="_blank">
            <img class="logo" :src="viteLogo" alt="" />
            Explore Vite
          </a>
        </li>
        <li>
          <a href="https://vuejs.org/" target="_blank">
            <img class="button-icon" :src="vueLogo" alt="" />
            Learn more
          </a>
        </li>
      </ul>
    </div>
    <div id="social">
      <svg class="icon" role="presentation" aria-hidden="true">
        <use href="/icons.svg#social-icon"></use>
      </svg>
      <h2>Connect with us</h2>
      <p>Join the Vite community</p>
      <ul>
        <li>
          <a href="https://github.com/vitejs/vite" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#github-icon"></use>
            </svg>
            GitHub
          </a>
        </li>
        <li>
          <a href="https://chat.vite.dev/" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#discord-icon"></use>
            </svg>
            Discord
          </a>
        </li>
        <li>
          <a href="https://x.com/vite_js" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#x-icon"></use>
            </svg>
            X.com
          </a>
        </li>
        <li>
          <a href="https://bsky.app/profile/vite.dev" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#bluesky-icon"></use>
            </svg>
            Bluesky
          </a>
        </li>
      </ul>
    </div>
  </section>
  <div class="ticks"></div>
  <section id="spacer"></section>
 </template>
--- a/frontend/src/components/SubTypePanel.vue
+++ b/frontend/src/components/SubTypePanel.vue
@@ -0,0 +1,414 @@
 <template>
  <div class="subtype-panel">
    <!-- 未选中品类时的引导 -->
    <div v-if="!currentCategory" class="empty-state">
      <div class="empty-icon">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <p class="empty-text">请从左侧选择您感兴趣的品类开始设计</p>
    </div>
    <!-- 加载中 -->
    <div v-else-if="loading" class="loading-state">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <span>加载中...</span>
    </div>
    <!-- flow_type = "full"（牌子）：选择牌型 -->
    <div v-else-if="currentCategory.flow_type === 'full'" class="panel-content">
      <h3 class="panel-title">选择牌型</h3>
      <p class="panel-desc">为「{{ currentCategory.name }}」选择一个款式</p>
      <div class="card-grid">
        <div
          v-for="subType in subTypes"
          :key="subType.id"
          class="subtype-card"
          :class="{ active: currentSubType?.id === subType.id }"
          @click="handleSelectSubType(subType)"
        >
          <div class="card-preview">
            <img
              v-if="subType.preview_image"
              :src="subType.preview_image"
              :alt="subType.name"
            />
            <div v-else class="card-placeholder">
              <span>{{ subType.name.charAt(0) }}</span>
            </div>
          </div>
          <div class="card-info">
            <span class="card-name">{{ subType.name }}</span>
          </div>
        </div>
      </div>
      <!-- 选择子类型后显示颜色选择（如有颜色数据） -->
      <template v-if="currentSubType && colors.length > 0">
        <ColorPicker
          v-model="selectedColor"
          :colors="colors"
        />
        <div v-if="selectedColor" class="action-bar">
          <button class="btn-primary" @click="goToGenerate">
            开始设计
          </button>
        </div>
      </template>
      <div v-else-if="currentSubType" class="action-bar">
        <button class="btn-primary" @click="goToGenerate">
          开始设计
        </button>
      </div>
    </div>
    <!-- flow_type = "size_color"（珠子/手链/表带）：选择规格 + 颜色 -->
    <div v-else-if="currentCategory.flow_type === 'size_color'" class="panel-content">
      <h3 class="panel-title">{{ sizeColorTitle }}</h3>
      <p class="panel-desc">为「{{ currentCategory.name }}」{{ sizeColorDesc }}</p>
      <div class="size-grid">
        <div
          v-for="subType in subTypes"
          :key="subType.id"
          class="size-tag"
          :class="{ active: currentSubType?.id === subType.id }"
          @click="handleSelectSubType(subType)"
        >
          {{ subType.name }}
        </div>
      </div>
      <!-- 选择尺寸后显示颜色选择 -->
      <template v-if="currentSubType && colors.length > 0">
        <ColorPicker
          v-model="selectedColor"
          :colors="colors"
        />
        <div v-if="selectedColor" class="action-bar">
          <button class="btn-primary" @click="goToGenerate">
            开始设计
          </button>
        </div>
      </template>
    </div>
    <!-- flow_type = "simple"（其他品类）：直接开始设计 -->
    <div v-else class="panel-content">
      <h3 class="panel-title">{{ currentCategory.name }}</h3>
      <p class="panel-desc">您已选择「{{ currentCategory.name }}」品类</p>
      <div class="simple-intro">
        <div class="intro-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
            <path d="M8 12L11 15L16 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <p>点击下方按钮，进入设计生成页面</p>
      </div>
      <div class="action-bar">
        <button class="btn-primary" @click="goToGenerate">
          开始设计
        </button>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { computed, watch, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Loading } from '@element-plus/icons-vue'
 import { useCategoryStore } from '@/stores/category'
 import type { SubType, ColorOption } from '@/stores/category'
 import ColorPicker from './ColorPicker.vue'
 const router = useRouter()
 const categoryStore = useCategoryStore()
 const currentCategory = computed(() => categoryStore.currentCategory)
 const subTypes = computed(() => categoryStore.subTypes)
 const currentSubType = computed(() => categoryStore.currentSubType)
 const colors = computed(() => categoryStore.colors)
 const loading = computed(() => categoryStore.loading)
 // 本地颜色选择状态，用于 v-model 双向绑定
 const selectedColor = ref<ColorOption | null>(null)
 // size_color 流程的动态标题
 const sizeColorTitle = computed(() => {
  const name = currentCategory.value?.name || ''
  if (name === '表带') return '选择宽度'
  return '选择珠径'
 })
 const sizeColorDesc = computed(() => {
  const name = currentCategory.value?.name || ''
  if (name === '表带') return '选择宽度规格'
  return '选择珠径规格'
 })
 // 监听 store 中的颜色变化
 watch(() => categoryStore.currentColor, (newVal) => {
  selectedColor.value = newVal
 }, { immediate: true })
 // 监听本地颜色选择变化，同步到 store
 watch(selectedColor, (newVal) => {
  if (newVal) {
    categoryStore.selectColor(newVal)
  }
 })
 // 选择子类型时重置颜色
 watch(currentSubType, () => {
  selectedColor.value = null
 })
 const handleSelectSubType = (subType: SubType) => {
  categoryStore.selectSubType(subType)
 }
 const goToGenerate = () => {
  if (!currentCategory.value) return
  const query: Record<string, string> = {
    categoryId: String(currentCategory.value.id)
  }
  if (currentSubType.value) {
    query.subTypeId = String(currentSubType.value.id)
  }
  if (selectedColor.value) {
    query.colorId = String(selectedColor.value.id)
  }
  router.push({ path: '/generate', query })
 }
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
 .subtype-panel {
  flex: 1;
  padding: 32px 40px;
  overflow-y: auto;
  background-color: $bg-color;
 }
 .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
 }
 .empty-icon {
  color: $border-color;
  margin-bottom: 24px;
 }
 .empty-text {
  font-size: 15px;
  color: $text-light;
  letter-spacing: 1px;
 }
 .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  gap: 16px;
  color: $text-secondary;
 }
 .loading-icon {
  font-size: 32px;
  animation: spin 1s linear infinite;
 }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
 }
 .panel-content {
  max-width: 800px;
 }
 .panel-title {
  font-size: 20px;
  font-weight: 500;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
 }
 .panel-desc {
  font-size: 14px;
  color: $text-secondary;
  margin: 0 0 24px 0;
 }
 // 牌型卡片网格
 .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
 }
 .subtype-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 2px solid transparent;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  &.active {
    border-color: $primary-color;
    box-shadow: 0 4px 16px rgba($primary-color, 0.2);
  }
 }
 .card-preview {
  aspect-ratio: 1;
  background-color: $bg-color;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
 }
 .card-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, $primary-light, $primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
  }
 }
 .card-info {
  padding: 12px;
  text-align: center;
  border-top: 1px solid $border-color;
 }
 .card-name {
  font-size: 14px;
  color: $text-primary;
 }
 // 尺寸标签网格
 .size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
 }
 .size-tag {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid $border-color;
  border-radius: 6px;
  font-size: 14px;
  color: $text-secondary;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    border-color: $primary-light;
    color: $primary-color;
  }
  &.active {
    background-color: $primary-color;
    border-color: $primary-color;
    color: #fff;
  }
 }
 // Simple 类型介绍
 .simple-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 24px;
 }
 .intro-icon {
  color: $primary-color;
  margin-bottom: 16px;
 }
 .simple-intro p {
  font-size: 14px;
  color: $text-secondary;
  margin: 0;
 }
 // 操作栏
 .action-bar {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid $border-color;
 }
 .btn-primary {
  padding: 12px 32px;
  background-color: $primary-color;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 2px;
  &:hover {
    background-color: #4a6a5a;
    transform: translateY(-1px);
  }
  &:active {
    transform: translateY(0);
  }
 }
 </style>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import './assets/styles/theme.scss'
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
 app.mount('#app')
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,47 @@
 import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Design',
      component: () => import('@/views/DesignPage.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/generate',
      name: 'Generate',
      component: () => import('@/views/GeneratePage.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/user',
      name: 'UserCenter',
      component: () => import('@/views/UserCenter.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue')
    },
    {
      path: '/register',
      name: 'Register',
      component: () => import('@/views/Register.vue')
    }
  ]
 })
 // 路由守卫
 router.beforeEach((to, _from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else {
    next()
  }
 })
 export default router
--- a/frontend/src/stores/category.ts
+++ b/frontend/src/stores/category.ts
@@ -0,0 +1,105 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { getCategoriesApi, getSubTypesApi, getColorsApi } from '@/api/category'
 import type { Category, SubType, ColorOption } from '@/api/category'
 export type { Category, SubType, ColorOption }
 export const useCategoryStore = defineStore('category', () => {
  // 品类列表
  const categories = ref<Category[]>([])
  // 当前选中的品类
  const currentCategory = ref<Category | null>(null)
  // 当前品类的子类型列表
  const subTypes = ref<SubType[]>([])
  // 当前选中的子类型
  const currentSubType = ref<SubType | null>(null)
  // 当前品类的颜色列表
  const colors = ref<ColorOption[]>([])
  // 当前选中的颜色
  const currentColor = ref<ColorOption | null>(null)
  // 加载状态
  const loading = ref(false)
  // 获取品类列表
  async function fetchCategories() {
    loading.value = true
    try {
      const data = await getCategoriesApi()
      categories.value = data
    } finally {
      loading.value = false
    }
  }
  // 选中品类，根据 flow_type 加载子类型/颜色
  async function selectCategory(category: Category) {
    currentCategory.value = category
    // 重置子选择
    currentSubType.value = null
    currentColor.value = null
    subTypes.value = []
    colors.value = []
    loading.value = true
    try {
      // 根据 flow_type 加载不同数据
      if (category.flow_type === 'full') {
        // full 流程：加载子类型 + 颜色（如有）
        const [subTypesData, colorsData] = await Promise.all([
          getSubTypesApi(category.id),
          getColorsApi(category.id)
        ])
        subTypes.value = subTypesData
        colors.value = colorsData
      } else if (category.flow_type === 'size_color') {
        // 珠子：加载子类型（尺寸）和颜色
        const [subTypesData, colorsData] = await Promise.all([
          getSubTypesApi(category.id),
          getColorsApi(category.id)
        ])
        subTypes.value = subTypesData
        colors.value = colorsData
      }
      // simple 类型不需要加载额外数据
    } finally {
      loading.value = false
    }
  }
  // 选中子类型
  function selectSubType(subType: SubType) {
    currentSubType.value = subType
    // 重置颜色选择
    currentColor.value = null
  }
  // 选中颜色
  function selectColor(color: ColorOption) {
    currentColor.value = color
  }
  // 重置所有选择状态
  function resetSelection() {
    currentCategory.value = null
    currentSubType.value = null
    currentColor.value = null
    subTypes.value = []
    colors.value = []
  }
  return {
    categories,
    currentCategory,
    subTypes,
    currentSubType,
    colors,
    currentColor,
    loading,
    fetchCategories,
    selectCategory,
    selectSubType,
    selectColor,
    resetSelection
  }
 })
--- a/frontend/src/stores/design.ts
+++ b/frontend/src/stores/design.ts
@@ -0,0 +1,94 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { getDesignsApi, getDesignApi, generateDesignApi, deleteDesignApi, type Design, type DesignListResponse, type GenerateDesignParams } from '@/api/design'
 export type { Design } from '@/api/design'
 export const useDesignStore = defineStore('design', () => {
  const designs = ref<Design[]>([])
  const total = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(20)
  const loading = ref(false)
  // 当前设计（用于生成页面）
  const currentDesign = ref<Design | null>(null)
  // 生成中状态
  const generating = ref(false)
  // 获取设计历史列表
  const fetchDesigns = async (page: number = 1) => {
    loading.value = true
    try {
      const data: DesignListResponse = await getDesignsApi(page, pageSize.value)
      designs.value = data.items
      total.value = data.total
      currentPage.value = data.page
      return data
    } finally {
      loading.value = false
    }
  }
  // 获取单个设计详情
  const fetchDesign = async (id: number) => {
    loading.value = true
    try {
      const data = await getDesignApi(id)
      currentDesign.value = data
      return data
    } finally {
      loading.value = false
    }
  }
  // 生成设计
  const generateDesign = async (params: GenerateDesignParams) => {
    generating.value = true
    try {
      const data = await generateDesignApi(params)
      currentDesign.value = data
      return data
    } finally {
      generating.value = false
    }
  }
  // 删除设计
  const deleteDesign = async (id: number) => {
    await deleteDesignApi(id)
    // 删除成功后刷新列表
    await fetchDesigns(currentPage.value)
  }
  // 清除当前设计
  const clearCurrentDesign = () => {
    currentDesign.value = null
  }
  // 重置状态
  const reset = () => {
    designs.value = []
    total.value = 0
    currentPage.value = 1
    loading.value = false
    currentDesign.value = null
    generating.value = false
  }
  return {
    designs,
    total,
    currentPage,
    pageSize,
    loading,
    currentDesign,
    generating,
    fetchDesigns,
    fetchDesign,
    generateDesign,
    deleteDesign,
    clearCurrentDesign,
    reset
  }
 })
--- a/frontend/src/stores/user.ts
+++ b/frontend/src/stores/user.ts
@@ -0,0 +1,92 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { login as loginApi, register as registerApi, getCurrentUser } from '@/api/auth'
 export interface UserInfo {
  id: number
  username: string
  nickname: string
  phone?: string | null
  avatar?: string | null
  created_at?: string
 }
 export const useUserStore = defineStore('user', () => {
  const token = ref<string | null>(localStorage.getItem('token'))
  const userInfo = ref<UserInfo | null>(null)
  // 是否已登录
  const isLoggedIn = computed(() => !!token.value)
  // 设置 token
  const setToken = (newToken: string) => {
    token.value = newToken
    localStorage.setItem('token', newToken)
  }
  // 清除 token
  const clearToken = () => {
    token.value = null
    localStorage.removeItem('token')
  }
  // 获取用户信息
  const fetchUserInfo = async () => {
    try {
      const data = await getCurrentUser()
      userInfo.value = data
      return data
    } catch (error) {
      clearToken()
      userInfo.value = null
      throw error
    }
  }
  // 登录
  const login = async (username: string, password: string) => {
    const data = await loginApi({ username, password })
    setToken(data.access_token)
    await fetchUserInfo()
    return data
  }
  // 注册
  const register = async (username: string, password: string, nickname: string) => {
    await registerApi({ username, password, nickname })
    // 注册成功后自动登录
    await login(username, password)
  }
  // 退出登录
  const logout = () => {
    clearToken()
    userInfo.value = null
  }
  // 初始化 - 从 localStorage 恢复状态
  const init = async () => {
    const savedToken = localStorage.getItem('token')
    if (savedToken) {
      token.value = savedToken
      try {
        await fetchUserInfo()
      } catch {
        // 如果获取用户信息失败，清除 token
        logout()
      }
    }
  }
  return {
    token,
    userInfo,
    isLoggedIn,
    setToken,
    fetchUserInfo,
    login,
    register,
    logout,
    init
  }
 })
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -0,0 +1,296 @@
 :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;
  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--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;
 }
 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 {
  margin: 0;
 }
 code,
 .counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
 }
 code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
 }
 .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);
  }
 }
 #app {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  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;
  }
 }
 #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);
  }
 }
--- a/frontend/src/views/DesignPage.vue
+++ b/frontend/src/views/DesignPage.vue
@@ -0,0 +1,28 @@
 <template>
  <div class="design-page">
    <CategoryNav />
    <SubTypePanel />
  </div>
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useCategoryStore } from '@/stores/category'
 import CategoryNav from '@/components/CategoryNav.vue'
 import SubTypePanel from '@/components/SubTypePanel.vue'
 const categoryStore = useCategoryStore()
 onMounted(() => {
  // 进入页面时自动加载品类列表
  categoryStore.fetchCategories()
 })
 </script>
 <style scoped lang="scss">
 .design-page {
  display: flex;
  height: calc(100vh - 60px);
  background-color: #FAF8F5;
 }
 </style>
--- a/frontend/src/views/GeneratePage.vue
+++ b/frontend/src/views/GeneratePage.vue
@@ -0,0 +1,768 @@
 <template>
  <div class="generate-page">
    <!-- 顶部信息栏 -->
    <header class="page-header">
      <button class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </button>
      <nav class="breadcrumb" v-if="categoryName">
        <span class="crumb">{{ categoryName }}</span>
        <template v-if="subTypeName">
          <el-icon class="separator"><ArrowRight /></el-icon>
          <span class="crumb">{{ subTypeName }}</span>
        </template>
        <template v-if="colorName">
          <el-icon class="separator"><ArrowRight /></el-icon>
          <span class="crumb color">{{ colorName }}</span>
        </template>
      </nav>
    </header>
    <!-- 缺少参数错误提示 -->
    <div v-if="!categoryId" class="error-state">
      <div class="error-icon">
        <el-icon><WarningFilled /></el-icon>
      </div>
      <h3>缺少必要参数</h3>
      <p>请先从设计页选择品类和类型</p>
      <button class="btn-primary" @click="goBack">返回设计页</button>
    </div>
    <!-- 主内容区 -->
    <main v-else class="main-content">
      <!-- 生成中遮罩 -->
      <div v-if="generating" class="loading-overlay">
        <div class="loading-content">
          <div class="ink-loader">
            <div class="ink-drop"></div>
            <div class="ink-drop"></div>
            <div class="ink-drop"></div>
          </div>
          <p class="loading-text">设计生成中，请稍候...</p>
          <p class="loading-hint">正在将您的创意转化为玉雕设计</p>
        </div>
      </div>
      <!-- 设计输入区 -->
      <section v-if="!currentDesign" class="input-section">
        <div class="section-header">
          <h2 class="section-title">设计参数</h2>
          <p class="section-desc">选择参数辅助生成（全部选填），也可以只写描述</p>
        </div>
        <!-- 参数面板 -->
        <div class="params-panel">
          <!-- 雕刻工艺 -->
          <div class="param-group">
            <label class="param-label">雕刻工艺</label>
            <div class="tag-list">
              <span
                v-for="opt in carvingOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: carvingTechnique === opt }"
                @click="carvingTechnique = carvingTechnique === opt ? '' : opt"
              >{{ opt }}</span>
            </div>
          </div>
          <!-- 设计风格 -->
          <div class="param-group">
            <label class="param-label">设计风格</label>
            <div class="tag-list">
              <span
                v-for="opt in styleOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: designStyle === opt }"
                @click="designStyle = designStyle === opt ? '' : opt"
              >{{ opt }}</span>
            </div>
          </div>
          <!-- 题材纹样 -->
          <div class="param-group">
            <label class="param-label">题材纹样</label>
            <div class="tag-list">
              <span
                v-for="opt in motifOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: motif === opt }"
                @click="motif = motif === opt ? '' : opt"
              >{{ opt }}</span>
            </div>
          </div>
          <!-- 尺寸规格 -->
          <div class="param-group">
            <label class="param-label">尺寸规格</label>
            <div class="tag-list">
              <span
                v-for="opt in sizeOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: sizeSpec === opt }"
                @click="sizeSpec = sizeSpec === opt ? '' : opt"
              >{{ opt }}</span>
              <el-input
                v-model="customSize"
                placeholder="自定义尺寸"
                size="small"
                class="custom-size-input"
                @focus="sizeSpec = ''"
              />
            </div>
          </div>
          <!-- 表面处理 -->
          <div class="param-group">
            <label class="param-label">表面处理</label>
            <div class="tag-list">
              <span
                v-for="opt in finishOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: surfaceFinish === opt }"
                @click="surfaceFinish = surfaceFinish === opt ? '' : opt"
              >{{ opt }}</span>
            </div>
          </div>
          <!-- 用途场景 -->
          <div class="param-group">
            <label class="param-label">用途场景</label>
            <div class="tag-list">
              <span
                v-for="opt in sceneOptions"
                :key="opt"
                class="tag-item"
                :class="{ active: usageScene === opt }"
                @click="usageScene = usageScene === opt ? '' : opt"
              >{{ opt }}</span>
            </div>
          </div>
        </div>
        <!-- 设计描述 -->
        <div class="prompt-header">
          <h3 class="prompt-title">设计描述</h3>
        </div>
        <div class="input-area">
          <el-input
            v-model="prompt"
            type="textarea"
            :rows="4"
            :placeholder="promptPlaceholder"
            maxlength="500"
            show-word-limit
            resize="none"
            class="prompt-input"
          />
        </div>
        <div class="generate-action">
          <button 
            class="btn-generate" 
            :disabled="!prompt.trim() || generating"
            @click="handleGenerate"
          >
            <el-icon v-if="!generating"><MagicStick /></el-icon>
            <span>{{ generating ? '生成中...' : '生成设计' }}</span>
          </button>
        </div>
      </section>
      <!-- 设计预览区 -->
      <section v-else class="preview-section">
        <div class="section-header">
          <h2 class="section-title">设计预览</h2>
          <p class="section-desc">您的设计已生成完成</p>
        </div>
        <DesignPreview :design="currentDesign" />
        <div class="regenerate-action">
          <button class="btn-regenerate" @click="handleRegenerate">
            <el-icon><RefreshRight /></el-icon>
            <span>重新生成</span>
          </button>
        </div>
      </section>
    </main>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, ArrowRight, WarningFilled, MagicStick, RefreshRight } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { useDesignStore } from '@/stores/design'
 import { useCategoryStore } from '@/stores/category'
 import DesignPreview from '@/components/DesignPreview.vue'
 const route = useRoute()
 const router = useRouter()
 const designStore = useDesignStore()
 const categoryStore = useCategoryStore()
 // URL参数
 const categoryId = computed(() => {
  const id = route.query.categoryId
  return id ? Number(id) : null
 })
 const subTypeId = computed(() => {
  const id = route.query.subTypeId
  return id ? Number(id) : null
 })
 const colorId = computed(() => {
  const id = route.query.colorId
  return id ? Number(id) : null
 })
 // 名称（从store缓存获取）
 const categoryName = computed(() => {
  if (!categoryId.value) return ''
  // 优先从 currentCategory 获取
  if (categoryStore.currentCategory?.id === categoryId.value) {
    return categoryStore.currentCategory.name
  }
  // 否则从列表中查找
  const cat = categoryStore.categories.find(c => c.id === categoryId.value)
  return cat?.name || '设计'
 })
 const subTypeName = computed(() => {
  if (!subTypeId.value) return ''
  // 从 store 的 subTypes 中查找
  const st = categoryStore.subTypes.find(s => s.id === subTypeId.value)
  return st?.name || ''
 })
 const colorName = computed(() => {
  if (!colorId.value) return ''
  // 从 store 的 colors 中查找
  const c = categoryStore.colors.find(col => col.id === colorId.value)
  return c?.name || ''
 })
 // 设计相关状态
 const prompt = ref('')
 const generating = computed(() => designStore.generating)
 const currentDesign = computed(() => designStore.currentDesign)
 // 新增参数状态
 const carvingTechnique = ref('')
 const designStyle = ref('')
 const motif = ref('')
 const sizeSpec = ref('')
 const customSize = ref('')
 const surfaceFinish = ref('')
 const usageScene = ref('')
 // 静态选项
 const carvingOptions = ['浮雕', '圆雕', '镂空雕', '阴刻', '线雕', '俏色雕', '薄意雕', '素面']
 const styleOptions = ['古典传统', '新中式', '写实', '抽象意境', '极简素面']
 const motifOptions = ['观音', '弥勒', '莲花', '貔貅', '龙凤', '麒麟', '山水', '花鸟', '人物', '回纹', '如意', '平安扣']
 const finishOptions = ['高光抛光', '亚光/哑光', '磨砂', '保留皮色']
 const sceneOptions = ['日常佩戴', '收藏鉴赏', '送礼婚庆', '把玩文玩']
 // 尺寸规格按品类动态变化
 const sizeOptions = computed(() => {
  const name = categoryName.value
  if (name.includes('牌')) return ['60x40x12mm', '70x45x14mm', '50x35x10mm']
  if (name.includes('手镯')) return ['内径54mm', '内径56mm', '内径58mm', '内径60mm', '内径62mm']
  if (name.includes('手把件')) return ['小(约60mm)', '中(约80mm)', '大(约100mm)']
  if (name.includes('摆件')) return ['小(约8cm)', '中(约15cm)', '大(约25cm)']
  if (name.includes('戒')) return ['戒面7号', '戒鞍12号', '戒鞍15号', '戒鞍18号']
  if (name.includes('表带')) return ['宽18mm', '宽20mm', '宽22mm']
  return ['小', '中', '大']
 })
 // placeholder 根据品类动态变化
 const promptPlaceholder = computed(() => {
  const name = categoryName.value.toLowerCase()
  if (name.includes('牌') || name.includes('牌子')) {
    return '请描述您想要的设计，如：山水意境、貔貅纹、雕刻荷花...'
  }
  if (name.includes('珠') || name.includes('珠子')) {
    return '请描述您想要的图案，如：回纹、云纹、简单素面...'
  }
  return '请描述您的设计需求...'
 })
 // 返回设计页
 const goBack = () => {
  router.push('/')
 }
 // 生成设计
 const handleGenerate = async () => {
  if (!categoryId.value) {
    ElMessage.error('缺少品类参数')
    return
  }
  if (!prompt.value.trim()) {
    ElMessage.warning('请输入设计描述')
    return
  }
  try {
    await designStore.generateDesign({
      category_id: categoryId.value,
      sub_type_id: subTypeId.value || undefined,
      color_id: colorId.value || undefined,
      prompt: prompt.value.trim(),
      carving_technique: carvingTechnique.value || undefined,
      design_style: designStyle.value || undefined,
      motif: motif.value || undefined,
      size_spec: sizeSpec.value || customSize.value || undefined,
      surface_finish: surfaceFinish.value || undefined,
      usage_scene: usageScene.value || undefined,
    })
    ElMessage.success('设计生成成功！')
  } catch (error) {
    // 错误已在 request 拦截器中处理
  }
 }
 // 重新生成
 const handleRegenerate = () => {
  designStore.clearCurrentDesign()
  // 保留之前的 prompt，用户可以修改后重新生成
 }
 // 页面挂载时，确保有品类数据
 onMounted(async () => {
  // 清除之前的设计状态
  designStore.clearCurrentDesign()
  // 如果 store 中没有品类数据，尝试加载
  if (categoryStore.categories.length === 0) {
    await categoryStore.fetchCategories()
  }
 })
 // 离开页面时清理状态
 onUnmounted(() => {
  designStore.clearCurrentDesign()
 })
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
 $primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
 .generate-page {
  min-height: calc(100vh - 60px);
  background-color: $bg-color;
  padding-bottom: 60px;
 }
 // 顶部信息栏
 .page-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 40px;
  background: #fff;
  border-bottom: 1px solid $border-color;
 }
 .back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid $border-color;
  border-radius: 6px;
  color: $text-secondary;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
  }
 }
 .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
 }
 .crumb {
  color: $text-primary;
  font-weight: 500;
  &.color {
    color: $secondary-color;
  }
 }
 .separator {
  font-size: 12px;
  color: $text-light;
 }
 // 错误状态
 .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 16px;
  text-align: center;
  padding: 40px;
 }
 .error-icon {
  font-size: 64px;
  color: $secondary-color;
 }
 .error-state h3 {
  font-size: 20px;
  color: $text-primary;
  margin: 0;
 }
 .error-state p {
  font-size: 14px;
  color: $text-secondary;
  margin: 0;
 }
 // 主内容区
 .main-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px;
  position: relative;
 }
 // 输入区
 .input-section,
 .preview-section {
  background: transparent;
 }
 .section-header {
  text-align: center;
  margin-bottom: 32px;
 }
 .section-title {
  font-size: 24px;
  font-weight: 500;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
 }
 .section-desc {
  font-size: 14px;
  color: $text-secondary;
  margin: 0;
 }
 .input-area {
  margin-bottom: 32px;
 }
 // 参数面板
 .params-panel {
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 28px;
  border: 1px solid $border-color;
 }
 .param-group {
  margin-bottom: 18px;
  &:last-child {
    margin-bottom: 0;
  }
 }
 .param-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: $text-secondary;
  margin-bottom: 8px;
  letter-spacing: 1px;
 }
 .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
 }
 .tag-item {
  display: inline-block;
  padding: 6px 14px;
  background: $bg-color;
  border: 1px solid $border-color;
  border-radius: 16px;
  font-size: 13px;
  color: $text-secondary;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  &:hover {
    border-color: $primary-light;
    color: $primary-color;
  }
  &.active {
    background: $primary-color;
    border-color: $primary-color;
    color: #fff;
  }
 }
 .custom-size-input {
  width: 130px;
  :deep(.el-input__inner) {
    border-radius: 16px;
    font-size: 13px;
  }
 }
 .prompt-header {
  margin-bottom: 12px;
 }
 .prompt-title {
  font-size: 16px;
  font-weight: 500;
  color: $text-primary;
  margin: 0;
  letter-spacing: 1px;
 }
 .prompt-input {
  :deep(.el-textarea__inner) {
    background: #fff;
    border: 2px solid $border-color;
    border-radius: 12px;
    padding: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: $text-primary;
    transition: all 0.3s ease;
    &::placeholder {
      color: $text-light;
    }
    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 4px rgba($primary-color, 0.1);
    }
  }
  :deep(.el-input__count) {
    background: transparent;
    color: $text-light;
    font-size: 12px;
  }
 }
 .generate-action {
  display: flex;
  justify-content: center;
 }
 .btn-generate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 48px;
  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 2px;
  .el-icon {
    font-size: 20px;
  }
  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba($primary-color, 0.4);
  }
  &:active:not(:disabled) {
    transform: translateY(0);
  }
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
 }
 // 主按钮
 .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: $primary-color;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    background: $primary-dark;
  }
 }
 // 重新生成
 .regenerate-action {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid $border-color;
 }
 .btn-regenerate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #fff;
  color: $text-secondary;
  border: 1px solid $border-color;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
  }
 }
 // 加载遮罩
 .loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
 }
 .loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
 }
 // 水墨风格加载动画
 .ink-loader {
  display: flex;
  gap: 12px;
 }
 .ink-drop {
  width: 16px;
  height: 16px;
  background: $primary-color;
  border-radius: 50%;
  animation: ink-spread 1.4s ease-in-out infinite;
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
  &:nth-child(3) {
    animation-delay: 0.4s;
  }
 }
@keyframes ink-spread {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }
 }
 .loading-text {
  font-size: 18px;
  color: $text-primary;
  letter-spacing: 2px;
  margin: 0;
 }
 .loading-hint {
  font-size: 14px;
  color: $text-light;
  margin: 0;
 }
 // 响应式
@media (max-width: 768px) {
  .page-header {
    padding: 16px 20px;
    gap: 16px;
  }
  .main-content {
    padding: 24px 16px;
  }
  .section-title {
    font-size: 20px;
  }
  .btn-generate {
    width: 100%;
    justify-content: center;
    padding: 14px 32px;
  }
 }
 </style>
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,199 @@
 <template>
  <div class="login-page">
    <div class="login-card">
      <!-- 品牌区域 -->
      <div class="brand-section">
        <h1 class="brand-name">玉宗</h1>
        <p class="brand-subtitle">珠宝设计大师</p>
      </div>
      <!-- 登录表单 -->
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        class="login-form"
        @submit.prevent="handleLogin"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            size="large"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            :prefix-icon="Lock"
            show-password
            @keyup.enter="handleLogin"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="login-button"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 底部链接 -->
      <div class="footer-links">
        <span class="text">没有账号？</span>
        <router-link to="/register" class="link">立即注册</router-link>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { User, Lock } from '@element-plus/icons-vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 const router = useRouter()
 const userStore = useUserStore()
 const formRef = ref<FormInstance>()
 const loading = ref(false)
 const form = reactive({
  username: '',
  password: ''
 })
 const rules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
 }
 const handleLogin = async () => {
  if (!formRef.value) return
  const valid = await formRef.value.validate().catch(() => false)
  if (!valid) return
  loading.value = true
  try {
    await userStore.login(form.username, form.password)
    ElMessage.success('登录成功')
    router.push('/')
  } catch (error: any) {
    // 错误已在拦截器中处理
  } finally {
    loading.value = false
  }
 }
 </script>
 <style scoped lang="scss">
 .login-page {
  min-height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAF8F5;
  padding: 24px;
 }
 .login-card {
  width: 100%;
  max-width: 400px;
  padding: 48px 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
 }
 .brand-section {
  text-align: center;
  margin-bottom: 40px;
  .brand-name {
    font-size: 36px;
    font-weight: 600;
    color: #5B7E6B;
    letter-spacing: 8px;
    margin: 0 0 8px 0;
  }
  .brand-subtitle {
    font-size: 14px;
    color: #999;
    letter-spacing: 4px;
    margin: 0;
  }
 }
 .login-form {
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    padding: 4px 12px;
  }
  :deep(.el-input__prefix) {
    color: #999;
  }
  :deep(.el-form-item) {
    margin-bottom: 24px;
  }
 }
 .login-button {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: #5B7E6B;
  border-color: #5B7E6B;
  letter-spacing: 2px;
  &:hover,
  &:focus {
    background-color: #3D5A4A;
    border-color: #3D5A4A;
  }
 }
 .footer-links {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  .text {
    color: #999;
  }
  .link {
    color: #5B7E6B;
    text-decoration: none;
    margin-left: 4px;
    font-weight: 500;
    &:hover {
      color: #3D5A4A;
      text-decoration: underline;
    }
  }
 }
 </style>
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -0,0 +1,238 @@
 <template>
  <div class="register-page">
    <div class="register-card">
      <!-- 品牌区域 -->
      <div class="brand-section">
        <h1 class="brand-name">玉宗</h1>
        <p class="brand-subtitle">创建您的账户</p>
      </div>
      <!-- 注册表单 -->
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        class="register-form"
        @submit.prevent="handleRegister"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            size="large"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="nickname">
          <el-input
            v-model="form.nickname"
            placeholder="请输入昵称"
            size="large"
            :prefix-icon="UserFilled"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码（至少6位）"
            size="large"
            :prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            size="large"
            :prefix-icon="Lock"
            show-password
            @keyup.enter="handleRegister"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="register-button"
            :loading="loading"
            @click="handleRegister"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 底部链接 -->
      <div class="footer-links">
        <span class="text">已有账号？</span>
        <router-link to="/login" class="link">返回登录</router-link>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { User, UserFilled, Lock } from '@element-plus/icons-vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 const router = useRouter()
 const userStore = useUserStore()
 const formRef = ref<FormInstance>()
 const loading = ref(false)
 const form = reactive({
  username: '',
  nickname: '',
  password: '',
  confirmPassword: ''
 })
 // 确认密码验证器
 const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== form.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
 }
 const rules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
 }
 const handleRegister = async () => {
  if (!formRef.value) return
  const valid = await formRef.value.validate().catch(() => false)
  if (!valid) return
  loading.value = true
  try {
    await userStore.register(form.username, form.password, form.nickname)
    ElMessage.success('注册成功')
    router.push('/')
  } catch (error: any) {
    // 错误已在拦截器中处理
  } finally {
    loading.value = false
  }
 }
 </script>
 <style scoped lang="scss">
 .register-page {
  min-height: calc(100vh - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAF8F5;
  padding: 24px;
 }
 .register-card {
  width: 100%;
  max-width: 400px;
  padding: 48px 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
 }
 .brand-section {
  text-align: center;
  margin-bottom: 40px;
  .brand-name {
    font-size: 36px;
    font-weight: 600;
    color: #5B7E6B;
    letter-spacing: 8px;
    margin: 0 0 8px 0;
  }
  .brand-subtitle {
    font-size: 14px;
    color: #999;
    letter-spacing: 2px;
    margin: 0;
  }
 }
 .register-form {
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    padding: 4px 12px;
  }
  :deep(.el-input__prefix) {
    color: #999;
  }
  :deep(.el-form-item) {
    margin-bottom: 24px;
  }
 }
 .register-button {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  background-color: #5B7E6B;
  border-color: #5B7E6B;
  letter-spacing: 2px;
  &:hover,
  &:focus {
    background-color: #3D5A4A;
    border-color: #3D5A4A;
  }
 }
 .footer-links {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  .text {
    color: #999;
  }
  .link {
    color: #5B7E6B;
    text-decoration: none;
    margin-left: 4px;
    font-weight: 500;
    &:hover {
      color: #3D5A4A;
      text-decoration: underline;
    }
  }
 }
 </style>
--- a/frontend/src/views/UserCenter.vue
+++ b/frontend/src/views/UserCenter.vue
@@ -0,0 +1,657 @@
 <template>
  <div class="user-center">
    <div class="user-center-container">
      <h1 class="page-title">个人中心</h1>
      <el-tabs v-model="activeTab" class="user-tabs">
        <!-- Tab 1: 设计历史 -->
        <el-tab-pane label="设计历史" name="designs">
          <div v-if="designStore.loading" class="loading-state">
            <el-icon class="loading-icon"><Loading /></el-icon>
            <p>加载中...</p>
          </div>
          <template v-else>
            <!-- 空状态 -->
            <div v-if="designStore.designs.length === 0" class="empty-state">
              <div class="empty-icon">📐</div>
              <p class="empty-text">暂无设计作品，去创作第一个设计吧</p>
              <el-button type="primary" class="create-btn" @click="goToGenerate">
                开始设计
              </el-button>
            </div>
            <!-- 设计卡片网格 -->
            <div v-else class="design-grid">
              <div
                v-for="design in designStore.designs"
                :key="design.id"
                class="design-card"
                @click="handleCardClick(design)"
              >
                <div class="card-image">
                  <img
                    v-if="design.image_url"
                    :src="design.image_url"
                    :alt="design.prompt"
                  />
                  <div v-else class="no-image">
                    <span>暂无图片</span>
                  </div>
                </div>
                <div class="card-content">
                  <div class="card-category">
                    {{ design.category?.name || '未分类' }}
                    <span v-if="design.sub_type">· {{ design.sub_type.name }}</span>
                  </div>
                  <p class="card-prompt" :title="design.prompt">{{ design.prompt }}</p>
                  <div class="card-footer">
                    <span class="card-time">{{ formatTime(design.created_at) }}</span>
                    <div class="card-actions" @click.stop>
                      <el-button
                        size="small"
                        type="primary"
                        text
                        @click="handleDownload(design)"
                      >
                        下载
                      </el-button>
                      <el-button
                        size="small"
                        type="danger"
                        text
                        @click="handleDelete(design)"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div v-if="designStore.total > designStore.pageSize" class="pagination-wrapper">
              <el-pagination
                v-model:current-page="currentPage"
                :page-size="designStore.pageSize"
                :total="designStore.total"
                layout="prev, pager, next"
                @current-change="handlePageChange"
              />
            </div>
          </template>
        </el-tab-pane>
        <!-- Tab 2: 个人信息 -->
        <el-tab-pane label="个人信息" name="profile">
          <div class="profile-section">
            <h3 class="section-title">基本信息</h3>
            <el-form
              ref="profileFormRef"
              :model="profileForm"
              :rules="profileRules"
              label-width="80px"
              class="profile-form"
            >
              <el-form-item label="用户名">
                <el-input v-model="profileForm.username" disabled />
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="profileForm.nickname" placeholder="请输入昵称" />
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="profileForm.phone" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="profileLoading"
                  @click="handleSaveProfile"
                >
                  保存修改
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="password-section">
            <h3 class="section-title">修改密码</h3>
            <el-form
              ref="passwordFormRef"
              :model="passwordForm"
              :rules="passwordRules"
              label-width="100px"
              class="password-form"
            >
              <el-form-item label="旧密码" prop="old_password">
                <el-input
                  v-model="passwordForm.old_password"
                  type="password"
                  placeholder="请输入旧密码"
                  show-password
                />
              </el-form-item>
              <el-form-item label="新密码" prop="new_password">
                <el-input
                  v-model="passwordForm.new_password"
                  type="password"
                  placeholder="请输入新密码（至少6位）"
                  show-password
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="confirm_password">
                <el-input
                  v-model="passwordForm.confirm_password"
                  type="password"
                  placeholder="请再次输入新密码"
                  show-password
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="passwordLoading"
                  @click="handleChangePassword"
                >
                  修改密码
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Loading } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/user'
 import { useDesignStore, type Design } from '@/stores/design'
 import { updateProfileApi, changePasswordApi } from '@/api/auth'
 import { getDesignDownloadUrl } from '@/api/design'
 const router = useRouter()
 const userStore = useUserStore()
 const designStore = useDesignStore()
 const activeTab = ref('designs')
 const currentPage = ref(1)
 // Profile form
 const profileFormRef = ref<FormInstance>()
 const profileLoading = ref(false)
 const profileForm = reactive({
  username: '',
  nickname: '',
  phone: ''
 })
 const profileRules: FormRules = {
  nickname: [
    { max: 20, message: '昵称最多20个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
 }
 // Password form
 const passwordFormRef = ref<FormInstance>()
 const passwordLoading = ref(false)
 const passwordForm = reactive({
  old_password: '',
  new_password: '',
  confirm_password: ''
 })
 const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== passwordForm.new_password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
 }
 const passwordRules: FormRules = {
  old_password: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  new_password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码至少6位', trigger: 'blur' }
  ],
  confirm_password: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
 }
 // Initialize
 onMounted(async () => {
  // Load user info to form
  if (userStore.userInfo) {
    profileForm.username = userStore.userInfo.username || ''
    profileForm.nickname = userStore.userInfo.nickname || ''
    profileForm.phone = userStore.userInfo.phone || ''
  }
  // Load designs
  await designStore.fetchDesigns()
 })
 // Watch user info changes
 watch(() => userStore.userInfo, (info) => {
  if (info) {
    profileForm.username = info.username || ''
    profileForm.nickname = info.nickname || ''
    profileForm.phone = info.phone || ''
  }
 }, { immediate: true })
 // Format time
 const formatTime = (time: string) => {
  const date = new Date(time)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
 }
 // Go to generate page
 const goToGenerate = () => {
  router.push('/generate')
 }
 // Handle card click - go to generate page with design info
 const handleCardClick = (design: Design) => {
  router.push({
    path: '/generate',
    query: {
      design_id: design.id,
      category_id: design.category?.id,
      sub_type_id: design.sub_type?.id,
      color_id: design.color?.id,
      prompt: design.prompt
    }
  })
 }
 // Handle download
 const handleDownload = (design: Design) => {
  if (!design.image_url) {
    ElMessage.warning('暂无可下载的图片')
    return
  }
  const link = document.createElement('a')
  link.href = getDesignDownloadUrl(design.id)
  link.download = `design_${design.id}.png`
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
 }
 // Handle delete
 const handleDelete = async (design: Design) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个设计吗？删除后无法恢复。',
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    await designStore.deleteDesign(design.id)
    ElMessage.success('删除成功')
  } catch (error: any) {
    if (error !== 'cancel') {
      // Error already handled by interceptor
    }
  }
 }
 // Handle page change
 const handlePageChange = (page: number) => {
  currentPage.value = page
  designStore.fetchDesigns(page)
 }
 // Save profile
 const handleSaveProfile = async () => {
  if (!profileFormRef.value) return
  const valid = await profileFormRef.value.validate().catch(() => false)
  if (!valid) return
  profileLoading.value = true
  try {
    const data = await updateProfileApi({
      nickname: profileForm.nickname,
      phone: profileForm.phone || undefined
    })
    // Update user store
    if (userStore.userInfo) {
      userStore.userInfo.nickname = data.nickname
      userStore.userInfo.phone = data.phone
    }
    ElMessage.success('保存成功')
  } catch (error) {
    // Error handled by interceptor
  } finally {
    profileLoading.value = false
  }
 }
 // Change password
 const handleChangePassword = async () => {
  if (!passwordFormRef.value) return
  const valid = await passwordFormRef.value.validate().catch(() => false)
  if (!valid) return
  passwordLoading.value = true
  try {
    await changePasswordApi({
      old_password: passwordForm.old_password,
      new_password: passwordForm.new_password
    })
    ElMessage.success('密码修改成功')
    // Reset form
    passwordForm.old_password = ''
    passwordForm.new_password = ''
    passwordForm.confirm_password = ''
    passwordFormRef.value.resetFields()
  } catch (error) {
    // Error handled by interceptor
  } finally {
    passwordLoading.value = false
  }
 }
 </script>
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-dark: #3D5A4A;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
 .user-center {
  min-height: calc(100vh - 108px);
  background-color: $bg-color;
  padding: 32px 24px;
 }
 .user-center-container {
  max-width: 1200px;
  margin: 0 auto;
 }
 .page-title {
  font-size: 28px;
  font-weight: 600;
  color: $text-primary;
  margin: 0 0 24px 0;
  letter-spacing: 2px;
 }
 .user-tabs {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: $border-color;
  }
  :deep(.el-tabs__item) {
    font-size: 16px;
    color: $text-secondary;
    &.is-active {
      color: $primary-color;
      font-weight: 500;
    }
    &:hover {
      color: $primary-color;
    }
  }
  :deep(.el-tabs__active-bar) {
    background-color: $primary-color;
  }
 }
 // Loading state
 .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  color: $text-light;
  .loading-icon {
    font-size: 32px;
    animation: spin 1s linear infinite;
  }
  p {
    margin-top: 12px;
  }
 }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
 }
 // Empty state
 .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
  }
  .empty-text {
    font-size: 16px;
    color: $text-secondary;
    margin: 0 0 24px 0;
  }
  .create-btn {
    background-color: $primary-color;
    border-color: $primary-color;
    padding: 12px 32px;
    font-size: 15px;
    &:hover {
      background-color: $primary-dark;
      border-color: $primary-dark;
    }
  }
 }
 // Design grid
 .design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
 }
 .design-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid $border-color;
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
 }
 .card-image {
  position: relative;
  width: 100%;
  padding-top: 75%; // 4:3 aspect ratio
  background-color: #f5f5f5;
  overflow: hidden;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .no-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-light;
    font-size: 14px;
    background-color: #f9f9f9;
  }
 }
 .card-content {
  padding: 16px;
 }
 .card-category {
  font-size: 12px;
  color: $primary-color;
  margin-bottom: 8px;
  font-weight: 500;
 }
 .card-prompt {
  font-size: 14px;
  color: $text-primary;
  margin: 0 0 12px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 42px;
 }
 .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .card-time {
  font-size: 12px;
  color: $text-light;
 }
 .card-actions {
  display: flex;
  gap: 4px;
  :deep(.el-button) {
    padding: 4px 8px;
    font-size: 12px;
  }
  :deep(.el-button--primary) {
    color: $primary-color;
  }
 }
 // Pagination
 .pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  :deep(.el-pagination) {
    --el-pagination-button-bg-color: transparent;
    --el-pagination-hover-color: #{$primary-color};
  }
  :deep(.el-pager li.is-active) {
    color: $primary-color;
    font-weight: 500;
  }
 }
 // Profile section
 .profile-section,
 .password-section {
  max-width: 480px;
  padding: 24px 0;
 }
 .password-section {
  border-top: 1px solid $border-color;
  margin-top: 24px;
  padding-top: 32px;
 }
 .section-title {
  font-size: 18px;
  font-weight: 500;
  color: $text-primary;
  margin: 0 0 24px 0;
 }
 .profile-form,
 .password-form {
  :deep(.el-form-item__label) {
    color: $text-secondary;
  }
  :deep(.el-input__wrapper) {
    border-radius: 6px;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: #f9f9f9;
  }
  :deep(.el-button--primary) {
    background-color: $primary-color;
    border-color: $primary-color;
    &:hover {
      background-color: $primary-dark;
      border-color: $primary-dark;
    }
  }
 }
 </style>
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,20 @@
 {
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,24 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
      '/uploads': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
 })
--- a/init_data.sql
+++ b/init_data.sql
@@ -0,0 +1,315 @@
 -- 玉宗 - 珠宝设计大师 数据库初始化脚本
 -- 使用前请先创建数据库: CREATE DATABASE yuzong CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
 -- 导入命令: mysql --default-character-set=utf8mb4 -u root -p yuzong < init_data.sql
 -- 注意: designs 表包含 6 个可选设计参数字段:
 --   carving_technique(雕刻工艺), design_style(设计风格), motif(题材纹样),
 --   size_spec(尺寸规格), surface_finish(表面处理), usage_scene(用途场景)
 SET NAMES utf8mb4;
 -- ========================================
 -- 品类数据 (12个品类)
 -- ========================================
 INSERT INTO categories (id, name, icon, sort_order, flow_type) VALUES
 (1, '牌子', NULL, 1, 'full'),
 (2, '珠子', NULL, 2, 'size_color'),
 (3, '手把件', NULL, 3, 'full'),
 (4, '雕刻件', NULL, 4, 'full'),
 (5, '摆件', NULL, 5, 'full'),
 (6, '手镯', NULL, 6, 'full'),
 (7, '耳钉', NULL, 7, 'full'),
 (8, '耳饰', NULL, 8, 'full'),
 (9, '手链', NULL, 9, 'size_color'),
 (10, '项链', NULL, 10, 'full'),
 (11, '戒指', NULL, 11, 'full'),
 (12, '表带', NULL, 12, 'size_color');
 -- ========================================
 -- 牌子的子类型 (category_id=1) - 牌型
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (1, '二五牌', NULL, NULL, 1),
 (1, '三角牌', NULL, NULL, 2),
 (1, '三五牌', NULL, NULL, 3),
 (1, '四六牌', NULL, NULL, 4),
 (1, '正方形', NULL, NULL, 5),
 (1, '椭圆形', NULL, NULL, 6);
 -- ========================================
 -- 珠子的子类型 (category_id=2) - 尺寸
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (2, '4mm', NULL, NULL, 1),
 (2, '6mm', NULL, NULL, 2),
 (2, '8mm', NULL, NULL, 3),
 (2, '10mm', NULL, NULL, 4),
 (2, '12mm', NULL, NULL, 5),
 (2, '14mm', NULL, NULL, 6),
 (2, '16mm', NULL, NULL, 7),
 (2, '18mm', NULL, NULL, 8),
 (2, '20mm', NULL, NULL, 9);
 -- ========================================
 -- 手把件的子类型 (category_id=3) - 题材
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (3, '山水手把件', '山水意境题材', NULL, 1),
 (3, '动物手把件', '动物造型题材', NULL, 2),
 (3, '瑞兽手把件', '貔貅、麒麟等瑞兽', NULL, 3),
 (3, '人物手把件', '人物造型题材', NULL, 4),
 (3, '花鸟手把件', '花鸟自然题材', NULL, 5),
 (3, '佛像手把件', '佛教题材', NULL, 6);
 -- ========================================
 -- 雕刻件的子类型 (category_id=4) - 题材
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (4, '山水雕刻', '山水意境雕刻', NULL, 1),
 (4, '花鸟雕刻', '花鸟自然雕刻', NULL, 2),
 (4, '人物雕刻', '人物造型雕刻', NULL, 3),
 (4, '佛像雕刻', '佛教题材雕刻', NULL, 4),
 (4, '瑞兽雕刻', '瑞兽神兽雕刻', NULL, 5),
 (4, '仿古雕刻', '仿古纹饰雕刻', NULL, 6);
 -- ========================================
 -- 摆件的子类型 (category_id=5) - 题材
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (5, '山水摆件', '山水意境摆件', NULL, 1),
 (5, '人物摆件', '人物造型摆件', NULL, 2),
 (5, '动物摆件', '动物造型摆件', NULL, 3),
 (5, '佛像摆件', '佛教题材摆件', NULL, 4),
 (5, '花鸟摆件', '花鸟自然摆件', NULL, 5),
 (5, '器皿摆件', '香炉、花瓶等器皿', NULL, 6);
 -- ========================================
 -- 手镯的子类型 (category_id=6) - 镯型
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (6, '平安镯', '内平外圆，最经典的镯型', NULL, 1),
 (6, '福镯', '内圆外圆，圆条造型', NULL, 2),
 (6, '贵妃镯', '椭圆形，贴合手腕', NULL, 3),
 (6, '美人镯', '条杆纤细，秀气典雅', NULL, 4),
 (6, '方镯', '方形截面，棱角分明', NULL, 5),
 (6, '雕花镯', '表面雕刻纹饰', NULL, 6);
 -- ========================================
 -- 耳钉的子类型 (category_id=7) - 形状
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (7, '圆形耳钉', '经典圆形造型', NULL, 1),
 (7, '水滴形耳钉', '水滴形优雅造型', NULL, 2),
 (7, '方形耳钉', '方形简约造型', NULL, 3),
 (7, '花朵形耳钉', '花朵造型', NULL, 4),
 (7, '心形耳钉', '心形浪漫造型', NULL, 5),
 (7, '几何形耳钉', '几何抽象造型', NULL, 6);
 -- ========================================
 -- 耳饰的子类型 (category_id=8) - 款式
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (8, '耳环', '圆环形耳饰', NULL, 1),
 (8, '耳坠', '垂坠型耳饰', NULL, 2),
 (8, '耳夹', '无需耳洞的耳饰', NULL, 3),
 (8, '流苏耳饰', '长款流苏造型', NULL, 4);
 -- ========================================
 -- 手链的子类型 (category_id=9) - 珠径
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (9, '6mm', NULL, NULL, 1),
 (9, '8mm', NULL, NULL, 2),
 (9, '10mm', NULL, NULL, 3),
 (9, '12mm', NULL, NULL, 4),
 (9, '14mm', NULL, NULL, 5);
 -- ========================================
 -- 项链的子类型 (category_id=10) - 款式
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (10, '锁骨链', '短款锁骨链', NULL, 1),
 (10, '吊坠项链', '搭配玉石吊坠', NULL, 2),
 (10, '串珠项链', '玉珠串联而成', NULL, 3),
 (10, '编绳项链', '编织绳搭配玉石', NULL, 4),
 (10, '毛衣链', '长款毛衣链', NULL, 5);
 -- ========================================
 -- 戒指的子类型 (category_id=11) - 款式
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (11, '素面戒指', '光面简约戒指', NULL, 1),
 (11, '镶嵌戒指', '金属镶嵌玉石', NULL, 2),
 (11, '雕花戒指', '表面雕刻纹饰', NULL, 3),
 (11, '扳指', '传统扳指造型', NULL, 4),
 (11, '指环', '环形简约指环', NULL, 5);
 -- ========================================
 -- 表带的子类型 (category_id=12) - 宽度
 -- ========================================
 INSERT INTO sub_types (category_id, name, description, preview_image, sort_order) VALUES
 (12, '18mm', NULL, NULL, 1),
 (12, '20mm', NULL, NULL, 2),
 (12, '22mm', NULL, NULL, 3),
 (12, '24mm', NULL, NULL, 4);
 -- ========================================
 -- 颜色数据
 -- 基于和田玉国标颜色分类及市场主流色种
 -- ========================================
 -- 牌子颜色 (category_id=1) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (1, '白玉', '#FEFEF2', 1),
 (1, '青白玉', '#E8EDE4', 2),
 (1, '青玉', '#7A8B6E', 3),
 (1, '碧玉', '#2D5F2D', 4),
 (1, '翠青', '#6BAF8D', 5),
 (1, '黄玉', '#D4A843', 6),
 (1, '糖玉', '#C4856C', 7),
 (1, '墨玉', '#2C2C2C', 8),
 (1, '藕粉', '#E8B4B8', 9),
 (1, '烟紫', '#8B7D9B', 10);
 -- 珠子颜色 (category_id=2) - 11种(含糖白)
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (2, '糖白', '#F5F0E8', 1),
 (2, '白玉', '#FEFEF2', 2),
 (2, '碧玉', '#2D5F2D', 3),
 (2, '青白玉', '#E8EDE4', 4),
 (2, '青玉', '#7A8B6E', 5),
 (2, '翠青', '#6BAF8D', 6),
 (2, '黄玉', '#D4A843', 7),
 (2, '糖玉', '#C4856C', 8),
 (2, '墨玉', '#2C2C2C', 9),
 (2, '藕粉', '#E8B4B8', 10),
 (2, '烟紫', '#8B7D9B', 11);
 -- 手把件颜色 (category_id=3) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (3, '白玉', '#FEFEF2', 1),
 (3, '青白玉', '#E8EDE4', 2),
 (3, '青玉', '#7A8B6E', 3),
 (3, '碧玉', '#2D5F2D', 4),
 (3, '翠青', '#6BAF8D', 5),
 (3, '黄玉', '#D4A843', 6),
 (3, '糖玉', '#C4856C', 7),
 (3, '墨玉', '#2C2C2C', 8),
 (3, '藕粉', '#E8B4B8', 9),
 (3, '烟紫', '#8B7D9B', 10);
 -- 雕刻件颜色 (category_id=4) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (4, '白玉', '#FEFEF2', 1),
 (4, '青白玉', '#E8EDE4', 2),
 (4, '青玉', '#7A8B6E', 3),
 (4, '碧玉', '#2D5F2D', 4),
 (4, '翠青', '#6BAF8D', 5),
 (4, '黄玉', '#D4A843', 6),
 (4, '糖玉', '#C4856C', 7),
 (4, '墨玉', '#2C2C2C', 8),
 (4, '藕粉', '#E8B4B8', 9),
 (4, '烟紫', '#8B7D9B', 10);
 -- 摆件颜色 (category_id=5) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (5, '白玉', '#FEFEF2', 1),
 (5, '青白玉', '#E8EDE4', 2),
 (5, '青玉', '#7A8B6E', 3),
 (5, '碧玉', '#2D5F2D', 4),
 (5, '翠青', '#6BAF8D', 5),
 (5, '黄玉', '#D4A843', 6),
 (5, '糖玉', '#C4856C', 7),
 (5, '墨玉', '#2C2C2C', 8),
 (5, '藕粉', '#E8B4B8', 9),
 (5, '烟紫', '#8B7D9B', 10);
 -- 手镯颜色 (category_id=6) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (6, '白玉', '#FEFEF2', 1),
 (6, '青白玉', '#E8EDE4', 2),
 (6, '青玉', '#7A8B6E', 3),
 (6, '碧玉', '#2D5F2D', 4),
 (6, '翠青', '#6BAF8D', 5),
 (6, '黄玉', '#D4A843', 6),
 (6, '糖玉', '#C4856C', 7),
 (6, '墨玉', '#2C2C2C', 8),
 (6, '藕粉', '#E8B4B8', 9),
 (6, '烟紫', '#8B7D9B', 10);
 -- 耳钉颜色 (category_id=7) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (7, '白玉', '#FEFEF2', 1),
 (7, '青白玉', '#E8EDE4', 2),
 (7, '青玉', '#7A8B6E', 3),
 (7, '碧玉', '#2D5F2D', 4),
 (7, '翠青', '#6BAF8D', 5),
 (7, '黄玉', '#D4A843', 6),
 (7, '糖玉', '#C4856C', 7),
 (7, '墨玉', '#2C2C2C', 8),
 (7, '藕粉', '#E8B4B8', 9),
 (7, '烟紫', '#8B7D9B', 10);
 -- 耳饰颜色 (category_id=8) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (8, '白玉', '#FEFEF2', 1),
 (8, '青白玉', '#E8EDE4', 2),
 (8, '青玉', '#7A8B6E', 3),
 (8, '碧玉', '#2D5F2D', 4),
 (8, '翠青', '#6BAF8D', 5),
 (8, '黄玉', '#D4A843', 6),
 (8, '糖玉', '#C4856C', 7),
 (8, '墨玉', '#2C2C2C', 8),
 (8, '藕粉', '#E8B4B8', 9),
 (8, '烟紫', '#8B7D9B', 10);
 -- 手链颜色 (category_id=9) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (9, '白玉', '#FEFEF2', 1),
 (9, '青白玉', '#E8EDE4', 2),
 (9, '青玉', '#7A8B6E', 3),
 (9, '碧玉', '#2D5F2D', 4),
 (9, '翠青', '#6BAF8D', 5),
 (9, '黄玉', '#D4A843', 6),
 (9, '糖玉', '#C4856C', 7),
 (9, '墨玉', '#2C2C2C', 8),
 (9, '藕粉', '#E8B4B8', 9),
 (9, '烟紫', '#8B7D9B', 10);
 -- 项链颜色 (category_id=10) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (10, '白玉', '#FEFEF2', 1),
 (10, '青白玉', '#E8EDE4', 2),
 (10, '青玉', '#7A8B6E', 3),
 (10, '碧玉', '#2D5F2D', 4),
 (10, '翠青', '#6BAF8D', 5),
 (10, '黄玉', '#D4A843', 6),
 (10, '糖玉', '#C4856C', 7),
 (10, '墨玉', '#2C2C2C', 8),
 (10, '藕粉', '#E8B4B8', 9),
 (10, '烟紫', '#8B7D9B', 10);
 -- 戒指颜色 (category_id=11) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (11, '白玉', '#FEFEF2', 1),
 (11, '青白玉', '#E8EDE4', 2),
 (11, '青玉', '#7A8B6E', 3),
 (11, '碧玉', '#2D5F2D', 4),
 (11, '翠青', '#6BAF8D', 5),
 (11, '黄玉', '#D4A843', 6),
 (11, '糖玉', '#C4856C', 7),
 (11, '墨玉', '#2C2C2C', 8),
 (11, '藕粉', '#E8B4B8', 9),
 (11, '烟紫', '#8B7D9B', 10);
 -- 表带颜色 (category_id=12) - 全部10种
 INSERT INTO colors (category_id, name, hex_code, sort_order) VALUES
 (12, '白玉', '#FEFEF2', 1),
 (12, '青白玉', '#E8EDE4', 2),
 (12, '青玉', '#7A8B6E', 3),
 (12, '碧玉', '#2D5F2D', 4),
 (12, '翠青', '#6BAF8D', 5),
 (12, '黄玉', '#D4A843', 6),
 (12, '糖玉', '#C4856C', 7),
 (12, '墨玉', '#2C2C2C', 8),
 (12, '藕粉', '#E8B4B8', 9),
 (12, '烟紫', '#8B7D9B', 10);
		`@@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`