加了一堆模型和一堆功能

art-agent/backend/.env.example

@@ -37,6 +37,13 @@ IMAGE_ASPECT_RATIO=1:1
 # 输出格式
 IMAGE_OUTPUT_FORMAT=png
 
+# Gemini 原生生图（向量引擎 /v1beta/.../generateContent）可选调优（多图参考易超时或断连）
+# VECTORENGINE_GEMINI_READ_TIMEOUT=600
+# VECTORENGINE_GEMINI_WRITE_TIMEOUT=180
+# VECTORENGINE_GEMINI_CONNECT_TIMEOUT=60
+# VECTORENGINE_GEMINI_POOL_TIMEOUT=60
+# VECTORENGINE_GEMINI_MAX_RETRIES=3
+
 # ─── 网络代理（按需配置）─────────────────────────────────
 # HTTP_PROXY=http://127.0.0.1:7890
 # HTTPS_PROXY=http://127.0.0.1:7890

art-agent/backend/app/agent/loop.py

@@ -11,7 +11,7 @@ from openai import AsyncOpenAI
 
 from app.agent.tools import TOOL_DEFINITIONS, execute_tool
 from app.config import (
-    get_llm_model,
+    get_llm_model_config,
     get_llm_max_iterations,
     get_image_model_config,
     get_max_recent_turns,
@@ -22,9 +22,19 @@ from app.services.image_gen import to_data_uri
 logger = logging.getLogger(__name__)
 
 
-def _get_client() -> AsyncOpenAI:
-    base_url = os.getenv("OPENAI_BASE_URL")
-    return AsyncOpenAI(base_url=base_url) if base_url else AsyncOpenAI()
+def _get_client(provider: str) -> AsyncOpenAI:
+    """按 provider 创建对应的 OpenAI 兼容客户端。"""
+    if provider == "vectorengine":
+        return AsyncOpenAI(
+            api_key=os.getenv("VECTORENGINE_API_KEY"),
+            base_url=os.getenv("VECTORENGINE_BASE_URL", "https://api.vectorengine.ai/v1"),
+        )
+    if provider == "deepseek":
+        return AsyncOpenAI(
+            api_key=os.getenv("DEEPSEEK_API_KEY"),
+            base_url=os.getenv("DEEPSEEK_BASE_URL", "https://api.deepseek.com"),
+        )
+    return AsyncOpenAI()
 
 SYSTEM_PROMPT = """\
 你是一个专业的游戏美术 AI 助手。你的工作是帮助美术人员通过对话生成游戏美术资源。
@@ -33,7 +43,8 @@ SYSTEM_PROMPT = """\
 - 根据用户的文字描述生成图片（UI图标、按钮、插画、立绘、概念图等）
 - 理解用户的审美意图，将中文描述转化为高质量的英文生成 prompt
 - 根据用户反馈迭代修改（调整颜色、风格、构图等）
-- 如果用户提供了参考图，将参考图的风格元素融入生成 prompt
+- 如果用户提供了参考图（支持多张），将参考图的风格元素融入生成 prompt
+- 理解多张参考图各自的角色（如"图1的主体 + 图2的风格/视角"），并在 prompt 中准确传达
 - 理解用户在图片上的标注（框选区域 + 文字批注），精准定位需要修改的部分
 
 ## 工作流程
@@ -54,23 +65,25 @@ SYSTEM_PROMPT = """\
 - 必须使用英文
 - 尽量详细描述：主体内容、颜色方案、光照、构图、材质等
 - 如果用户要求游戏 UI 元素，添加相关关键词如 "game UI", "icon", "button" 等
-- 如果你能直接看到参考图（图片内容），可以在 prompt 中描述参考图的风格特征
-- 如果你无法看到参考图（只收到了文字提示说有参考图），参考图会由生图工具的 IP-Adapter 自动处理风格融合。此时你不要自行猜测画风/艺术风格关键词（如 pixel art、watercolor、oil painting 等），把风格交给参考图来决定。但如果用户在消息中明确指定了风格（如"赛博朋克风"、"水彩风"等），应保留并翻译到 prompt 中——尊重用户的主动意图
+- 如果你能直接看到参考图（图片内容），可以在 prompt 中描述参考图的风格特征。多张参考图时，理解用户对各图的定位（如"图1做主体参考、图2做风格参考"），将相应特征分别融入 prompt
+- 如果你无法看到参考图（只收到了文字提示说有参考图），参考图会由生图工具自动处理风格融合。此时你不要自行猜测画风/艺术风格关键词（如 pixel art、watercolor、oil painting 等），把风格交给参考图来决定。但如果用户在消息中明确指定了风格（如"赛博朋克风"、"水彩风"等），应保留并翻译到 prompt 中——尊重用户的主动意图
 
 ## 注意事项
 - 用中文和用户交流
 - 生成图片后简要说明你使用的 prompt 思路
 - 主动建议迭代方向
 - **禁止模拟工具调用**：生成图片时必须实际调用 generate_image 工具，绝不能用文字描述"已生成"或假装工具已执行。如果需要生成多张图片，每张都必须单独调用工具
+- **禁止在回复中嵌入图片链接**：不要在回复文字中使用 Markdown 图片语法（如 `![](...)` 或 `sandbox:` 链接）。图片展示由系统自动处理，你只需用文字描述结果即可
 """
 
 
 async def run_agent_loop(
     messages: list[dict],
-    ref_image_url: Optional[str] = None,
+    ref_image_urls: Optional[list[str]] = None,
     image_model: Optional[str] = None,
     session_id: Optional[str] = None,
     user_id: str = "default_user",
+    llm_model: Optional[str] = None,
 ) -> AsyncGenerator[dict, None]:
     """
     运行 Agent Loop，以 SSE 事件流形式 yield 结果。
@@ -114,10 +127,16 @@ async def run_agent_loop(
         yield {"type": "error", "data": {"message": f"记忆系统检索失败: {e}"}}
         return
 
+    # ── 解析 LLM 模型配置 ──
+    llm_config = get_llm_model_config(llm_model)
+    llm_provider = llm_config["provider"]
+    llm_model_id = llm_config["model_id"]
+    vision_capable = llm_config.get("vision", False)
+
     # ── 构建 system prompt ──
-    model_config = get_image_model_config(image_model)
-    current_model_name = model_config.get('name', '未知')
-    current_model_id = model_config.get('id', '未知')
+    img_model_config = get_image_model_config(image_model)
+    current_model_name = img_model_config.get('name', '未知')
+    current_model_id = img_model_config.get('id', '未知')
     model_hint = (
         f"\n\n## 当前生图模型（重要）\n"
         f"本次对话用户选择的生图模型是 **{current_model_name}**"
@@ -127,43 +146,39 @@ async def run_agent_loop(
     )
     api_messages = [{"role": "system", "content": SYSTEM_PROMPT + model_hint + memory_block}]
 
-    # 检测当前 LLM 是否支持 vision（多模态图片输入）
-    llm_model = get_llm_model().lower()
-    vision_capable = any(kw in llm_model for kw in ("gpt-4o", "gpt-4-vision", "claude"))
+    effective_refs = ref_image_urls or []
 
     for msg in messages:
-        if msg["role"] == "user" and ref_image_url and msg is messages[-1]:
+        if msg["role"] == "user" and effective_refs and msg is messages[-1]:
             if vision_capable:
-                api_messages.append({
-                    "role": "user",
-                    "content": [
-                        {"type": "text", "text": msg["content"]},
-                        {
-                            "type": "image_url",
-                            "image_url": {"url": to_data_uri(ref_image_url)},
-                        },
-                    ],
-                })
+                content_parts: list[dict] = [{"type": "text", "text": msg["content"]}]
+                for ref_url in effective_refs:
+                    content_parts.append({
+                        "type": "image_url",
+                        "image_url": {"url": to_data_uri(ref_url)},
+                    })
+                api_messages.append({"role": "user", "content": content_parts})
             else:
+                n_refs = len(effective_refs)
                 hint = (
                     f"{msg['content']}\n\n"
-                    "【系统提示：用户上传了一张参考图，已自动传递给图片生成工具的 IP-Adapter。"
-                    "IP-Adapter 会从参考图中提取风格并融合到生成结果中。"
-                    "你无法看到这张参考图，因此在生成 prompt 时：\n"
+                    f"【系统提示：用户上传了 {n_refs} 张参考图，已自动传递给图片生成工具。"
+                    "生图工具会根据模型能力自动处理参考图的风格融合。"
+                    "你无法看到这些参考图，因此在生成 prompt 时：\n"
                     "1. 描述画面内容（主体、构图、光照、材质等）\n"
                     "2. 不要自行猜测画风/艺术风格——但如果用户明确指定了风格，保留到 prompt 中\n"
-                    "3. 用户未指定风格时，风格完全由参考图通过 IP-Adapter 决定】"
+                    "3. 用户未指定风格时，风格完全由参考图决定】"
                 )
                 api_messages.append({"role": "user", "content": hint})
             continue
         api_messages.append({"role": msg["role"], "content": msg["content"]})
 
-    client = _get_client()
+    client = _get_client(llm_provider)
 
     for _ in range(get_llm_max_iterations()):
         try:
             response = await client.chat.completions.create(
-                model=get_llm_model(),
+                model=llm_model_id,
                 messages=api_messages,
                 tools=TOOL_DEFINITIONS,
                 stream=True,
@@ -219,7 +234,7 @@ async def run_agent_loop(
                         "你刚才没有调用 generate_image 工具，只是用文字描述了生成过程。"
                         "请立即调用 generate_image 工具来实际生成图片。"
                         "不要解释，直接调用工具。"
-                        f"当前使用的生图模型是 {model_config.get('name', '未知')}。"
+                        f"当前使用的生图模型是 {img_model_config.get('name', '未知')}。"
                     ),
                 })
                 continue
@@ -263,7 +278,7 @@ async def run_agent_loop(
             except json.JSONDecodeError:
                 arguments = {}
 
-            result = await execute_tool(tool_name, arguments, ref_image_url, image_model)
+            result = await execute_tool(tool_name, arguments, effective_refs or None, image_model)
 
             used_model = result.get("model_name", "")
 

art-agent/backend/app/agent/tools.py

@@ -11,6 +11,8 @@ TOOL_DEFINITIONS = [
             "description": (
                 "根据文字描述生成图片。prompt 必须是英文。"
                 "如果用户提供了参考图，会自动传入 ref_image_url 参数。"
+                "若当前生图模型为 Stable Diffusion XL，可在正提示后单独一行写 ---NEGATIVE--- 再写负向提示；"
+                "不传则服务端会使用该模型的默认负向词。"
             ),
             "parameters": {
                 "type": "object",
@@ -37,7 +39,7 @@ TOOL_DEFINITIONS = [
 async def execute_tool(
     tool_name: str,
     arguments: dict,
-    ref_image_url: str | None = None,
+    ref_image_urls: list[str] | None = None,
     image_model: str | None = None,
 ) -> dict:
     """执行工具调用，返回结果。"""
@@ -47,7 +49,7 @@ async def execute_tool(
         result = await generate_images(
             prompt=prompt,
             num_images=num_images,
-            ref_image_url=ref_image_url,
+            ref_image_urls=ref_image_urls,
             model_id=image_model,
         )
         valid_urls = [u for u in result.urls if not u.startswith("[")]
@@ -57,6 +59,8 @@ async def execute_tool(
             "images": valid_urls,
             "errors": errors,
             "prompt_used": prompt,
+            "effective_prompt": result.effective_prompt,
+            "negative_prompt": result.negative_prompt,
             "model_name": result.model_name,
             "model_id": result.model_id,
         }

art-agent/backend/app/api/chat.py

@@ -8,7 +8,12 @@ from sse_starlette.sse import EventSourceResponse
 
 from app.agent.loop import run_agent_loop
 from app.auth import get_current_user
-from app.config import get_image_models_list, get_default_image_model_id
+from app.config import (
+    get_image_models_list,
+    get_default_image_model_id,
+    get_llm_models_list,
+    get_default_llm_model_id,
+)
 from app.db import User
 
 router = APIRouter()
@@ -49,13 +54,24 @@ async def list_models(current_user: User = Depends(get_current_user)):
     }
 
 
+@router.get("/llm-models")
+async def list_llm_models(current_user: User = Depends(get_current_user)):
+    """返回可用的 LLM 对话模型列表。"""
+    return {
+        "models": get_llm_models_list(),
+        "default": get_default_llm_model_id(),
+    }
+
+
 @router.post("/chat")
 async def chat(
     messages: str = Form(...),
     ref_image: Optional[UploadFile] = File(None),
     ref_image_url: Optional[str] = Form(None),
+    ref_image_urls: Optional[str] = Form(None),
     image_model: Optional[str] = Form(None),
     session_id: Optional[str] = Form(None),
+    llm_model: Optional[str] = Form(None),
     current_user: User = Depends(get_current_user),
 ):
     """
@@ -64,25 +80,30 @@ async def chat(
     参数：
     - messages: JSON 字符串，对话历史 [{role, content}]
     - ref_image: 可选的参考图文件（兼容旧方式）
-    - ref_image_url: 可选，已通过 /upload-ref-image 上传后的服务端路径
+    - ref_image_url: 兼容旧方式，单张参考图服务端路径
+    - ref_image_urls: JSON 数组字符串，多张参考图服务端路径列表
     - image_model: 可选，指定本次使用的生图模型短 ID
     - session_id: 可选，前端会话 ID，用于 Mem0 记忆作用域
+    - llm_model: 可选，指定本次使用的 LLM 模型短 ID
     """
     parsed_messages = json.loads(messages)
 
-    resolved_ref_url: Optional[str] = None
-    if ref_image_url:
-        resolved_ref_url = ref_image_url
+    resolved_ref_urls: list[str] = []
+    if ref_image_urls:
+        resolved_ref_urls = json.loads(ref_image_urls)
+    elif ref_image_url:
+        resolved_ref_urls = [ref_image_url]
     elif ref_image and ref_image.filename:
-        resolved_ref_url = await _save_upload(ref_image)
+        resolved_ref_urls = [await _save_upload(ref_image)]
 
     async def event_generator():
         async for event in run_agent_loop(
             parsed_messages,
-            resolved_ref_url,
+            resolved_ref_urls or None,
             image_model=image_model,
             session_id=session_id,
             user_id=current_user.id,
+            llm_model=llm_model,
         ):
             yield {
                 "event": event["type"],

art-agent/backend/app/api/memory.py

@@ -0,0 +1,37 @@
+"""
+记忆查询 API：供前端查看当前用户的 Mem0 记忆条目。
+"""
+
+import asyncio
+import logging
+
+from fastapi import APIRouter, Depends
+
+from app.auth import get_current_user
+from app.db import User
+from app.memory import get_memory
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/memory", tags=["memory"])
+
+
+@router.get("/list")
+async def list_memories(current_user: User = Depends(get_current_user)):
+    """返回当前用户的所有记忆条目（只读）。"""
+    memory = get_memory()
+    loop = asyncio.get_running_loop()
+    try:
+        result = await loop.run_in_executor(
+            None, lambda: memory.get_all(user_id=current_user.id, limit=200)
+        )
+    except Exception as e:
+        logger.error("获取记忆列表失败: %s", e)
+        return {"memories": [], "error": str(e)}
+
+    results = result.get("results", []) if isinstance(result, dict) else result
+    logger.info("Mem0 get_all 返回 %d 条记忆, result_type=%s", len(results), type(result).__name__)
+    if results:
+        sample = results[0]
+        logger.info("记忆样本 keys=%s, memory=%s", list(sample.keys()) if isinstance(sample, dict) else "not-dict", str(sample)[:200])
+    return {"memories": results}

art-agent/backend/app/config.py

@@ -7,14 +7,108 @@ import os
 from typing import Any
 
 
-def get_llm_model() -> str:
-    return os.getenv("LLM_MODEL", "gpt-4o-mini")
-
-
 def get_llm_max_iterations() -> int:
     return int(os.getenv("LLM_MAX_ITERATIONS", "5"))
 
 
+# ─── LLM 模型注册表 ─────────────────────────────────────
+#
+# 每个模型的配置说明：
+#   id          — 前端/API 使用的短 ID
+#   name        — 显示名称
+#   provider    — API 提供者（对应 _get_client 的分发键）
+#   model_id    — 传给 OpenAI SDK 的 model 参数
+#   description — 前端下拉列表说明文字
+#   vision      — 是否支持多模态图片输入
+
+LLM_MODELS: dict[str, dict[str, Any]] = {
+    "gpt-5.4": {
+        "id": "gpt-5.4",
+        "name": "GPT-5.4",
+        "provider": "vectorengine",
+        "model_id": "gpt-5.4",
+        "description": "知识工作与计算机操控最强，1M 上下文",
+        "vision": True,
+    },
+    "claude-sonnet-4-6": {
+        "id": "claude-sonnet-4-6",
+        "name": "Claude Sonnet 4.6",
+        "provider": "vectorengine",
+        "model_id": "claude-sonnet-4-6",
+        "description": "高性价比编码与日常任务",
+        "vision": True,
+    },
+    "claude-opus-4-6": {
+        "id": "claude-opus-4-6",
+        "name": "Claude Opus 4.6",
+        "provider": "vectorengine",
+        "model_id": "claude-opus-4-6",
+        "description": "编码与专家级推理最强，128K 输出",
+        "vision": True,
+    },
+    "gemini-3.1-pro-preview": {
+        "id": "gemini-3.1-pro-preview",
+        "name": "Gemini 3.1 Pro",
+        "provider": "vectorengine",
+        "model_id": "gemini-3.1-pro-preview",
+        "description": "推理最强、价格最低，2M 上下文",
+        "vision": True,
+    },
+    "glm-4.7": {
+        "id": "glm-4.7",
+        "name": "GLM-4.7",
+        "provider": "vectorengine",
+        "model_id": "glm-4.7",
+        "description": "智谱 AI，中文能力突出，免费额度",
+        "vision": False,
+    },
+    "gpt-4o-mini": {
+        "id": "gpt-4o-mini",
+        "name": "GPT-4o Mini",
+        "provider": "vectorengine",
+        "model_id": "gpt-4o-mini",
+        "description": "轻量快速、高性价比",
+        "vision": True,
+    },
+    "deepseek-chat": {
+        "id": "deepseek-chat",
+        "name": "DeepSeek Chat",
+        "provider": "deepseek",
+        "model_id": "deepseek-chat",
+        "description": "中文对话优化（直连）",
+        "vision": False,
+    },
+}
+
+
+def get_default_llm_model_id() -> str:
+    """返回 .env 中配置的默认 LLM 短 ID，不在注册表中则回退到 gpt-5.4。"""
+    env_model = os.getenv("LLM_MODEL", "gpt-5.4")
+    if env_model in LLM_MODELS:
+        return env_model
+    return "gpt-5.4"
+
+
+def get_llm_model_config(model_id: str | None = None) -> dict[str, Any]:
+    """根据短 ID 获取 LLM 模型配置，未指定或不存在则使用默认模型。"""
+    if model_id and model_id in LLM_MODELS:
+        return LLM_MODELS[model_id]
+    return LLM_MODELS[get_default_llm_model_id()]
+
+
+def get_llm_models_list() -> list[dict]:
+    """返回前端下拉列表所需的 LLM 模型摘要信息。"""
+    return [
+        {
+            "id": cfg["id"],
+            "name": cfg["name"],
+            "description": cfg["description"],
+            "vision": cfg.get("vision", False),
+        }
+        for cfg in LLM_MODELS.values()
+    ]
+
+
 # ─── 图像模型注册表 ─────────────────────────────────────
 #
 # 每个模型的配置说明：
@@ -29,6 +123,29 @@ def get_llm_max_iterations() -> int:
 #   default_params     — 默认推理参数
 
 IMAGE_MODELS: dict[str, dict[str, Any]] = {
+    "gpt-image-1.5": {
+        "id": "gpt-image-1.5",
+        "name": "GPT Image 1.5",
+        "provider": "openai",
+        "model_id": "gpt-image-1.5",
+        "description": "OpenAI 最强生图，文字渲染与 prompt 理解最佳，支持多图参考",
+        "supports_ref_image": True,
+        "max_ref_images": 16,
+        "default_params": {
+            "size": "1024x1024",
+            "quality": "high",
+        },
+    },
+    "gemini-3.1-flash-image": {
+        "id": "gemini-3.1-flash-image",
+        "name": "Gemini 3.1 Flash Image",
+        "provider": "gemini_native",
+        "model_id": "gemini-3.1-flash-image-preview",
+        "description": "Google 原生生图，速度快、价格低，支持多图参考（最多 14 张）",
+        "supports_ref_image": True,
+        "max_ref_images": 14,
+        "default_params": {},
+    },
     "flux-schnell": {
         "id": "flux-schnell",
         "name": "Flux Schnell",

art-agent/backend/app/main.py

@@ -12,6 +12,7 @@ from fastapi.staticfiles import StaticFiles
 from app.api.chat import router as chat_router
 from app.api.auth import router as auth_router
 from app.api.admin import router as admin_router
+from app.api.memory import router as memory_router
 from app.db import create_db_and_tables, ensure_default_admin
 
 
@@ -45,6 +46,7 @@ app.mount("/generated", StaticFiles(directory=str(GENERATED_DIR)), name="generat
 app.include_router(auth_router, prefix="/api")
 app.include_router(admin_router, prefix="/api")
 app.include_router(chat_router, prefix="/api")
+app.include_router(memory_router, prefix="/api")
 
 
 @app.get("/health")

art-agent/backend/app/services/image_gen.py

@@ -1,5 +1,6 @@
 """图像生成服务 — Provider 抽象层。"""
 
+import asyncio
 import base64
 import mimetypes
 import os
@@ -9,9 +10,11 @@ from pathlib import Path
 from typing import Any
 
 import httpx
+from openai import AsyncOpenAI
 from replicate import Client as ReplicateClient
 
-from app.config import get_image_model_config, get_image_aspect_ratio, get_image_output_format
+from app.config import get_image_aspect_ratio, get_image_model_config, get_image_output_format
+from app.services.image_prompt_strategy import prepare_image_prompt_for_model
 
 BACKEND_ROOT = Path(__file__).parent.parent.parent
 GENERATED_DIR = BACKEND_ROOT / "generated"
@@ -57,6 +60,43 @@ def to_data_uri(image_path: str) -> str:
     return image_path
 
 
+def _load_image_bytes(image_path: str) -> bytes:
+    """将本地路径或 data URI 转为原始字节，供 OpenAI images.edit 使用。"""
+    if image_path.startswith("data:"):
+        # data:image/png;base64,xxxx
+        _, b64_part = image_path.split(",", 1)
+        return base64.b64decode(b64_part)
+    if image_path.startswith("http"):
+        raise ValueError("_load_image_bytes 不支持远程 URL，请先下载到本地")
+    local = BACKEND_ROOT / image_path.lstrip("/")
+    if local.exists():
+        return local.read_bytes()
+    raise FileNotFoundError(f"参考图文件未找到: {local}")
+
+
+def _resolve_image_base64(image_path: str) -> tuple[str, str]:
+    """将图片路径/data URI 解析为 (mime_type, base64_string)。
+
+    统一处理三种输入形式：
+    - data URI (data:image/png;base64,xxxx) → 直接提取 mime 和 base64
+    - 本地路径 (/uploads/xxx.png) → 读取文件并编码
+    - 其他 → 尝试作为本地路径处理
+    """
+    if image_path.startswith("data:"):
+        header, b64_part = image_path.split(",", 1)
+        # header 格式: data:image/png;base64
+        mime = header.split(";")[0].replace("data:", "")
+        return mime, b64_part
+
+    local = BACKEND_ROOT / image_path.lstrip("/")
+    if local.exists():
+        mime = mimetypes.guess_type(str(local))[0] or "image/png"
+        b64 = base64.b64encode(local.read_bytes()).decode()
+        return mime, b64
+
+    raise FileNotFoundError(f"参考图文件未找到: {local}")
+
+
 async def _download_image(url: str) -> str:
     """下载远程图片到本地 generated/ 目录，返回本地 URL 路径。"""
     filename = f"{uuid.uuid4().hex}.png"
@@ -80,9 +120,10 @@ class ImageProvider(ABC):
         model_config: dict[str, Any],
         prompt: str,
         num_images: int = 1,
-        ref_image_url: str | None = None,
+        ref_image_urls: list[str] | None = None,
+        negative_prompt: str | None = None,
     ) -> list[str]:
-        """生成图片并返回本地 URL 列表。"""
+        """生成图片并返回本地 URL 列表。negative_prompt 仅部分后端使用（如 Replicate SDXL）。"""
         ...
 
 
@@ -94,7 +135,8 @@ class ReplicateProvider(ImageProvider):
         model_config: dict[str, Any],
         prompt: str,
         num_images: int = 1,
-        ref_image_url: str | None = None,
+        ref_image_urls: list[str] | None = None,
+        negative_prompt: str | None = None,
     ) -> list[str]:
         replicate_model_id = model_config["model_id"]
         default_params: dict[str, Any] = model_config.get("default_params", {})
@@ -102,8 +144,15 @@ class ReplicateProvider(ImageProvider):
         local_urls: list[str] = []
 
         try:
+            # Replicate 模型（InstantStyle/Kolors）只支持单张参考图，取第一张
+            single_ref = ref_image_urls[0] if ref_image_urls else None
             input_params = self._build_input(
-                model_config, default_params, prompt, num_images, ref_image_url
+                model_config,
+                default_params,
+                prompt,
+                num_images,
+                single_ref,
+                negative_prompt=negative_prompt,
             )
 
             output = await _replicate_client.async_run(
@@ -131,20 +180,18 @@ class ReplicateProvider(ImageProvider):
         prompt: str,
         num_images: int = 1,
         ref_image_url: str | None = None,
+        negative_prompt: str | None = None,
     ) -> dict[str, Any]:
         """
         根据模型配置构建 Replicate input 参数。
 
-        通过 model_config 中的标志字段自动适配不同模型：
-        - supports_ref_image / ref_image_param: 参考图注入
-        - num_images_param: 各模型的批量生成参数名（如 number_of_images / num_outputs）
+        Replicate 上的 IP-Adapter 模型只支持单张参考图。
         """
         model_id = model_config["model_id"]
         supports_ref = model_config.get("supports_ref_image", False)
         ref_param_name = model_config.get("ref_image_param", "image")
         num_images_param = model_config.get("num_images_param", "num_outputs")
 
-        # ── 支持参考图的模型（IP-Adapter 系列）──
         if supports_ref:
             params: dict[str, Any] = {"prompt": prompt}
             for k, v in default_params.items():
@@ -154,7 +201,6 @@ class ReplicateProvider(ImageProvider):
                 params[ref_param_name] = to_data_uri(ref_image_url)
             return params
 
-        # ── Flux 系列（纯文生图）──
         is_flux = "flux" in model_id.lower()
         params = {"prompt": prompt, num_images_param: num_images}
 
@@ -166,21 +212,281 @@ class ReplicateProvider(ImageProvider):
                 "output_format", get_image_output_format()
             )
         else:
-            # SDXL 类模型
             params["width"] = default_params.get("width", 1024)
             params["height"] = default_params.get("height", 1024)
             if "num_inference_steps" in default_params:
                 params["num_inference_steps"] = default_params["num_inference_steps"]
             if "guidance_scale" in default_params:
                 params["guidance_scale"] = default_params["guidance_scale"]
+            if negative_prompt is not None:
+                params["negative_prompt"] = negative_prompt
 
         return params
 
 
+class OpenAIImageProvider(ImageProvider):
+    """通过 OpenAI 兼容 API（向量引擎中转）调用 GPT Image 系列模型。
+
+    有参考图时使用 images.edit（支持最多 16 张参考图），
+    无参考图时使用 images.generate（纯文生图）。
+    """
+
+    def __init__(self) -> None:
+        self._client: AsyncOpenAI | None = None
+
+    def _get_client(self) -> AsyncOpenAI:
+        if self._client is None:
+            self._client = AsyncOpenAI(
+                api_key=os.getenv("VECTORENGINE_API_KEY"),
+                base_url=os.getenv("VECTORENGINE_BASE_URL", "https://api.vectorengine.ai/v1"),
+                timeout=httpx.Timeout(5.0, read=180.0, write=60.0, connect=30.0),
+            )
+        return self._client
+
+    async def generate(
+        self,
+        model_config: dict[str, Any],
+        prompt: str,
+        num_images: int = 1,
+        ref_image_urls: list[str] | None = None,
+        negative_prompt: str | None = None,
+    ) -> list[str]:
+        _ = negative_prompt
+        client = self._get_client()
+        default_params = model_config.get("default_params", {})
+        model_id = model_config["model_id"]
+
+        local_urls: list[str] = []
+        try:
+            if ref_image_urls:
+                resp = await self._edit_with_refs(
+                    client, model_id, prompt, ref_image_urls, num_images, default_params
+                )
+            else:
+                resp = await client.images.generate(
+                    model=model_id,
+                    prompt=prompt,
+                    n=num_images,
+                    size=default_params.get("size", "1024x1024"),
+                    quality=default_params.get("quality", "high"),
+                )
+
+            for img_data in resp.data:
+                if img_data.url:
+                    local_urls.append(await _download_image(img_data.url))
+                elif img_data.b64_json:
+                    filename = f"{uuid.uuid4().hex}.png"
+                    filepath = GENERATED_DIR / filename
+                    filepath.write_bytes(base64.b64decode(img_data.b64_json))
+                    local_urls.append(f"/generated/{filename}")
+                else:
+                    local_urls.append("[生成失败: 模型未返回图片数据]")
+
+        except Exception as e:
+            detail = str(e) or f"{type(e).__name__}: {repr(e)}"
+            local_urls.append(f"[生成失败: {detail}]")
+
+        return local_urls
+
+    @staticmethod
+    async def _edit_with_refs(
+        client: AsyncOpenAI,
+        model_id: str,
+        prompt: str,
+        ref_image_urls: list[str],
+        num_images: int,
+        default_params: dict[str, Any],
+    ):
+        """使用 images.edit 端点传入参考图（GPT Image 系列最多 16 张）。"""
+        image_files: list[Any] = []
+        for url in ref_image_urls:
+            image_files.append(_load_image_bytes(url))
+
+        image_arg: Any = image_files[0] if len(image_files) == 1 else image_files
+
+        return await client.images.edit(
+            model=model_id,
+            image=image_arg,
+            prompt=prompt,
+            n=num_images,
+            size=default_params.get("size", "1024x1024"),
+        )
+
+
+class GeminiNativeImageProvider(ImageProvider):
+    """通过向量引擎中转调用 Gemini 原生 generateContent 接口。
+
+    Gemini 原生接口支持文字 + 图片混合输入（最多 14 张参考图），
+    在一次 generateContent 调用中同时理解参考图并生成新图片。
+    这是 OpenAI 兼容的 images/generate 和 images/edit 都无法覆盖的能力。
+
+    API 格式：
+      POST /v1beta/models/{model}:generateContent?key={API_KEY}
+      Body: { contents: [{ parts: [...] }], generationConfig: { responseModalities: ["TEXT","IMAGE"] } }
+      Response: candidates[0].content.parts[] → text 或 inline_data (base64)
+
+    多图 + 生图耗时较长，上游或代理可能提前断开（httpx: Server disconnected without sending a response）。
+    使用较长超时 + 对可恢复网络错误自动重试。
+    """
+
+    _RETRYABLE: tuple[type[BaseException], ...] = (
+        httpx.RemoteProtocolError,
+        httpx.ConnectError,
+        httpx.ReadTimeout,
+        httpx.WriteTimeout,
+        httpx.ConnectTimeout,
+        httpx.PoolTimeout,
+    )
+
+    @classmethod
+    def _gemini_timeout(cls) -> httpx.Timeout:
+        """可通过环境变量调大，多参考图时请求体大、响应慢。"""
+        read_s = float(os.getenv("VECTORENGINE_GEMINI_READ_TIMEOUT", "600"))
+        write_s = float(os.getenv("VECTORENGINE_GEMINI_WRITE_TIMEOUT", "180"))
+        connect_s = float(os.getenv("VECTORENGINE_GEMINI_CONNECT_TIMEOUT", "60"))
+        pool_s = float(os.getenv("VECTORENGINE_GEMINI_POOL_TIMEOUT", "60"))
+        return httpx.Timeout(
+            connect=connect_s,
+            read=read_s,
+            write=write_s,
+            pool=pool_s,
+        )
+
+    async def generate(
+        self,
+        model_config: dict[str, Any],
+        prompt: str,
+        num_images: int = 1,
+        ref_image_urls: list[str] | None = None,
+        negative_prompt: str | None = None,
+    ) -> list[str]:
+        _ = negative_prompt
+        api_key = os.getenv("VECTORENGINE_API_KEY", "")
+        base_url = os.getenv("VECTORENGINE_BASE_URL", "https://api.vectorengine.ai/v1")
+        # 从 /v1 回退到根 URL，拼接 /v1beta/models/... 端点
+        api_root = base_url.rstrip("/").removesuffix("/v1")
+        model_id = model_config["model_id"]
+
+        url = f"{api_root}/v1beta/models/{model_id}:generateContent?key={api_key}"
+
+        parts = self._build_parts(prompt, ref_image_urls)
+        body = {
+            "contents": [{"parts": parts}],
+            "generationConfig": {
+                "responseModalities": ["TEXT", "IMAGE"],
+            },
+        }
+
+        local_urls: list[str] = []
+        proxy = os.environ.get("HTTPS_PROXY") or os.environ.get("HTTP_PROXY")
+        max_retries = max(1, int(os.getenv("VECTORENGINE_GEMINI_MAX_RETRIES", "3")))
+        timeout = self._gemini_timeout()
+
+        try:
+            data: dict[str, Any] | None = None
+            for attempt in range(max_retries):
+                try:
+                    async with httpx.AsyncClient(
+                        proxy=proxy,
+                        timeout=timeout,
+                        limits=httpx.Limits(max_keepalive_connections=5, max_connections=10),
+                    ) as client:
+                        resp = await client.post(
+                            url,
+                            json=body,
+                            headers={"Content-Type": "application/json"},
+                        )
+                    resp.raise_for_status()
+                    data = resp.json()
+                    break
+                except self._RETRYABLE as e:
+                    if attempt < max_retries - 1:
+                        await asyncio.sleep(2 ** attempt)
+                        continue
+                    raise
+
+            if data is None:
+                local_urls.append("[生成失败: 未收到上游响应]")
+                return local_urls
+
+            local_urls = self._extract_images(data)
+
+            if not local_urls:
+                # Gemini 可能只返回了文字（拒绝生图或纯文字回复）
+                text_parts = self._extract_text(data)
+                hint = text_parts[:200] if text_parts else "模型未返回图片"
+                local_urls.append(f"[生成失败: {hint}]")
+
+        except httpx.HTTPStatusError as e:
+            detail = e.response.text[:500] if e.response else str(e)
+            local_urls.append(f"[生成失败: HTTP {e.response.status_code} - {detail}]")
+        except self._RETRYABLE as e:
+            hint = (
+                "连接被上游或代理提前关闭，常见于多图参考或生图较慢。"
+                "可稍后重试，或在 .env 中增大 VECTORENGINE_GEMINI_READ_TIMEOUT / 检查代理稳定性。"
+            )
+            detail = str(e) or f"{type(e).__name__}: {repr(e)}"
+            local_urls.append(f"[生成失败: {detail}。{hint}]")
+        except Exception as e:
+            detail = str(e) or f"{type(e).__name__}: {repr(e)}"
+            local_urls.append(f"[生成失败: {detail}]")
+
+        return local_urls
+
+    @staticmethod
+    def _build_parts(
+        prompt: str, ref_image_urls: list[str] | None
+    ) -> list[dict[str, Any]]:
+        """构建 Gemini generateContent 的 parts 数组：文字 + 内联图片。"""
+        parts: list[dict[str, Any]] = [{"text": prompt}]
+        if ref_image_urls:
+            for url in ref_image_urls:
+                mime, b64 = _resolve_image_base64(url)
+                parts.append({
+                    "inline_data": {
+                        "mime_type": mime,
+                        "data": b64,
+                    }
+                })
+        return parts
+
+    @staticmethod
+    def _extract_images(response_data: dict) -> list[str]:
+        """从 Gemini 响应中提取所有图片并保存到本地。"""
+        local_urls: list[str] = []
+        candidates = response_data.get("candidates", [])
+        for candidate in candidates:
+            parts = candidate.get("content", {}).get("parts", [])
+            for part in parts:
+                inline = part.get("inlineData") or part.get("inline_data")
+                if inline and inline.get("data"):
+                    mime = inline.get("mimeType") or inline.get("mime_type", "image/png")
+                    ext = ".png" if "png" in mime else ".jpg" if "jpeg" in mime or "jpg" in mime else ".webp" if "webp" in mime else ".png"
+                    filename = f"{uuid.uuid4().hex}{ext}"
+                    filepath = GENERATED_DIR / filename
+                    filepath.write_bytes(base64.b64decode(inline["data"]))
+                    local_urls.append(f"/generated/{filename}")
+        return local_urls
+
+    @staticmethod
+    def _extract_text(response_data: dict) -> str:
+        """从 Gemini 响应中提取文字内容（用于调试或错误提示）。"""
+        texts: list[str] = []
+        candidates = response_data.get("candidates", [])
+        for candidate in candidates:
+            parts = candidate.get("content", {}).get("parts", [])
+            for part in parts:
+                if part.get("text"):
+                    texts.append(part["text"])
+        return "\n".join(texts)
+
+
 # ─── Provider 注册 ─────────────────────────────────────
 
 _PROVIDERS: dict[str, ImageProvider] = {
     "replicate": ReplicateProvider(),
+    "openai": OpenAIImageProvider(),
+    "gemini_native": GeminiNativeImageProvider(),
 }
 
 
@@ -189,21 +495,32 @@ _PROVIDERS: dict[str, ImageProvider] = {
 class GenerateResult:
     """图片生成结果，包含生成的 URL 列表和实际使用的模型信息。"""
 
-    def __init__(self, urls: list[str], model_name: str, model_id: str):
+    def __init__(
+        self,
+        urls: list[str],
+        model_name: str,
+        model_id: str,
+        *,
+        effective_prompt: str | None = None,
+        negative_prompt: str | None = None,
+    ):
         self.urls = urls
         self.model_name = model_name
         self.model_id = model_id
+        self.effective_prompt = effective_prompt
+        self.negative_prompt = negative_prompt
 
 
 async def generate_images(
     prompt: str,
     num_images: int = 1,
-    ref_image_url: str | None = None,
+    ref_image_urls: list[str] | None = None,
     model_id: str | None = None,
 ) -> GenerateResult:
     """
     统一入口：根据 model_id 查注册表，分发到对应 provider。
 
+    ref_image_urls: 参考图路径列表（可为 None 或空列表）。
     model_id 为空时使用 .env 中配置的默认模型。
     """
     config = get_image_model_config(model_id)
@@ -216,5 +533,41 @@ async def generate_images(
     if not provider:
         return GenerateResult([f"[未知 provider: {provider_name}]"], model_name, resolved_id)
 
-    urls = await provider.generate(config, prompt, num_images, ref_image_url)
-    return GenerateResult(urls, model_name, resolved_id)
+    effective_refs = ref_image_urls or []
+
+    # Replicate IP-Adapter 系列模型必须有参考图才能工作
+    if config.get("supports_ref_image") and not effective_refs and provider_name == "replicate":
+        return GenerateResult(
+            [f"[生成失败: {model_name} 是风格迁移模型，需要上传参考图才能使用]"],
+            model_name,
+            resolved_id,
+        )
+
+    prepared = prepare_image_prompt_for_model(
+        config,
+        prompt,
+        has_reference_images=bool(effective_refs),
+    )
+    if not prepared.prompt.strip():
+        return GenerateResult(
+            [f"[生成失败: 经模型策略处理后的 prompt 为空]"],
+            model_name,
+            resolved_id,
+            effective_prompt=prepared.prompt,
+            negative_prompt=prepared.negative_prompt,
+        )
+
+    urls = await provider.generate(
+        config,
+        prepared.prompt,
+        num_images,
+        effective_refs or None,
+        negative_prompt=prepared.negative_prompt,
+    )
+    return GenerateResult(
+        urls,
+        model_name,
+        resolved_id,
+        effective_prompt=prepared.prompt,
+        negative_prompt=prepared.negative_prompt,
+    )

art-agent/backend/app/services/image_prompt_strategy.py

@@ -0,0 +1,139 @@
+"""按生图模型预处理 prompt（与 provider 解耦）。
+
+各策略在对应函数中注明依据：厂商文档、Replicate 模型 API 字段说明或社区通用写法。
+统一入口：prepare_image_prompt_for_model。
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import Any
+
+# ─── SDXL（Stability / Replicate）────────────────────────────
+# Replicate stability-ai/sdxl 提供独立字段 negative_prompt（见模型 API 页）。
+# 下列为 CLIP 系文生图常见「质量/解剖」排除词，作未显式指定时的基线。
+DEFAULT_SDXL_NEGATIVE = (
+    "low quality, worst quality, normal quality, lowres, blurry, jpeg artifacts, "
+    "watermark, signature, text, logo, deformed, disfigured, bad anatomy, bad hands, "
+    "extra fingers, mutated, cropped, poorly drawn face"
+)
+
+
+@dataclass(frozen=True)
+class PreparedImagePrompt:
+    """下游只读：prompt 必填；negative_prompt 仅部分后端使用（当前为 SDXL）。"""
+
+    prompt: str
+    negative_prompt: str | None = None
+
+
+def prepare_image_prompt_for_model(
+    model_config: dict[str, Any],
+    raw_prompt: str,
+    *,
+    has_reference_images: bool = False,
+) -> PreparedImagePrompt:
+    """根据注册表 id 选择策略。未知 id 时原样透传。"""
+    short_id = model_config.get("id", "")
+    text = (raw_prompt or "").strip()
+    if not text:
+        return PreparedImagePrompt(prompt="")
+
+    dispatch: dict[str, Any] = {
+        "gpt-image-1.5": _openai_gpt_image,
+        "gemini-3.1-flash-image": _gemini_native_image,
+        "flux-schnell": _flux_bfl,
+        "flux-dev": _flux_bfl,
+        "sdxl": _sdxl_replicate,
+        "instant-style": _replicate_ip_adapter_scene,
+        "kolors-ipadapter": _replicate_ip_adapter_scene,
+    }
+    fn = dispatch.get(short_id, _passthrough)
+    return fn(text, model_config, has_reference_images)
+
+
+def _passthrough(text: str, _model_config: dict[str, Any], _has_ref: bool) -> PreparedImagePrompt:
+    return PreparedImagePrompt(prompt=text)
+
+
+def _openai_gpt_image(text: str, _model_config: dict[str, Any], _has_ref: bool) -> PreparedImagePrompt:
+    """OpenAI GPT Image：自然语言指令遵循强，宜为完整、具体的场景描述。
+
+    参考：https://platform.openai.com/docs/guides/image-generation
+    """
+    return PreparedImagePrompt(prompt=_collapse_ws(text))
+
+
+def _gemini_native_image(text: str, _model_config: dict[str, Any], _has_ref: bool) -> PreparedImagePrompt:
+    """Gemini 原生生图：多模态指令 + 文本；英文描述通常效果稳定。
+
+    参考：Google AI 文档 generateContent 与图像输出 modality 说明。
+    """
+    return PreparedImagePrompt(prompt=_collapse_ws(text))
+
+
+def _flux_bfl(text: str, _model_config: dict[str, Any], _has_ref: bool) -> PreparedImagePrompt:
+    """Black Forest Labs FLUX：Subject + Action + Style + Context；靠前放置重点；无 negative API。
+
+    参考：https://docs.bfl.ai/guides/prompting_guide_t2i_fundamentals
+    若用户从 SDXL 复制了 Negative 段，尽量剥掉以免干扰文意。
+    """
+    cleaned = _strip_pasted_negative_block(text)
+    return PreparedImagePrompt(prompt=_collapse_ws(cleaned))
+
+
+def _sdxl_replicate(text: str, model_config: dict[str, Any], _has_ref: bool) -> PreparedImagePrompt:
+    """Replicate SDXL：prompt + negative_prompt 双字段；支持显式拆分。
+
+    约定（可选）：正提示与负提示用单独一行分隔符，便于 Agent/用户手写。
+    - ---NEGATIVE---  或  |||NEG|||
+    未拆分时使用 default_params.negative_prompt 或模块默认 DEFAULT_SDXL_NEGATIVE。
+    """
+    neg_fallback = model_config.get("default_params", {}).get(
+        "negative_prompt", DEFAULT_SDXL_NEGATIVE
+    )
+    if "---NEGATIVE---" in text:
+        pos, _, neg = text.partition("---NEGATIVE---")
+        pos = pos.strip()
+        neg = neg.strip()
+        return PreparedImagePrompt(
+            prompt=_collapse_ws(pos),
+            negative_prompt=neg or neg_fallback,
+        )
+    if "|||NEG|||" in text:
+        pos, _, neg = text.partition("|||NEG|||")
+        pos = pos.strip()
+        neg = neg.strip()
+        return PreparedImagePrompt(
+            prompt=_collapse_ws(pos),
+            negative_prompt=neg or neg_fallback,
+        )
+    return PreparedImagePrompt(
+        prompt=_collapse_ws(text),
+        negative_prompt=neg_fallback,
+    )
+
+
+def _replicate_ip_adapter_scene(
+    text: str, _model_config: dict[str, Any], has_reference_images: bool
+) -> PreparedImagePrompt:
+    """IP-Adapter / InstantStyle / Kolors：参考图承担风格与纹理，prompt 侧重场景与内容语义。
+
+    Replicate 各模型 README 均强调 prompt + 参考图配合；无参考图时由上层拦截。
+    有参考图时不额外堆叠长前缀，避免稀释主体描述。
+    """
+    _ = has_reference_images
+    return PreparedImagePrompt(prompt=_collapse_ws(text))
+
+
+def _collapse_ws(s: str) -> str:
+    return " ".join(s.split())
+
+
+def _strip_pasted_negative_block(text: str) -> str:
+    lower = text.lower()
+    for sep in ("\n---negative---\n", "\nnegative prompt:", "\nnegative:"):
+        idx = lower.find(sep)
+        if idx != -1:
+            return text[:idx].strip()
+    return text

art-agent/frontend/src/app/gallery/page.tsx

@@ -85,7 +85,7 @@ export default function GalleryPage() {
         document.body.removeChild(a);
         window.URL.revokeObjectURL(url);
       } catch {
-        // 忽略单张下载失败
+        // ignore
       }
     }
   };
@@ -109,17 +109,29 @@ export default function GalleryPage() {
   };
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen flex flex-col relative z-[1]">
       <TopNav />
 
       <div className="flex-1 flex overflow-hidden">
-        {/* 主内容 */}
         <main className="flex-1 flex flex-col min-w-0">
           {/* 工具栏 */}
-          <div className="flex-shrink-0 border-b border-[var(--border)] bg-[var(--bg-secondary)] px-3 md:px-4 py-2
+          <div className="flex-shrink-0 border-b border-[var(--border)] bg-[var(--bg-secondary)]/80
+                          backdrop-blur-xl px-4 md:px-5 py-3
                           flex items-center gap-2 md:gap-3 flex-wrap">
+            {/* 区块标题 */}
+            <div className="flex items-center gap-2 mr-3">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <circle cx="8.5" cy="8.5" r="1.5" />
+                <polyline points="21 15 16 10 5 21" />
+              </svg>
+              <span className="text-sm font-semibold text-[var(--text-primary)]">资源库</span>
+            </div>
+
             {/* 搜索 */}
-            <div className="flex items-center gap-1.5 flex-1 min-w-[140px] md:min-w-[200px] max-w-[360px]">
+            <div className="flex items-center gap-1.5 flex-1 min-w-[140px] md:min-w-[200px] max-w-[360px]
+                            px-3 py-1.5 rounded-xl bg-[var(--bg-tertiary)] border border-[var(--border)]
+                            focus-within:border-[var(--accent)]/40 transition-colors">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" strokeWidth="2">
                 <circle cx="11" cy="11" r="8" />
                 <path d="M21 21l-4.35-4.35" />
@@ -128,14 +140,14 @@ export default function GalleryPage() {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="搜索 Prompt..."
-                className="flex-1 px-2 py-1 text-sm bg-transparent border-none
+                className="flex-1 bg-transparent border-none text-sm
                            text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]
                            focus:outline-none"
               />
             </div>
 
             {/* 标签筛选 */}
-            <div className="flex items-center gap-1 flex-wrap">
+            <div className="flex items-center gap-1.5 flex-wrap">
               {tags.map((tag) => {
                 const active = selectedTagIds.includes(tag.id);
                 return (
@@ -146,10 +158,10 @@ export default function GalleryPage() {
                         active ? prev.filter((id) => id !== tag.id) : [...prev, tag.id]
                       )
                     }
-                    className="px-2 py-0.5 text-[10px] rounded-full cursor-pointer border transition-colors"
+                    className="px-2.5 py-1 text-[11px] rounded-lg cursor-pointer border transition-all font-medium"
                     style={{
-                      backgroundColor: active ? tag.color + "22" : "transparent",
-                      borderColor: active ? tag.color : "var(--border)",
+                      backgroundColor: active ? tag.color + "18" : "transparent",
+                      borderColor: active ? tag.color + "60" : "var(--border)",
                       color: active ? tag.color : "var(--text-secondary)",
                     }}
                   >
@@ -164,11 +176,12 @@ export default function GalleryPage() {
             {/* 收藏筛选 */}
             <button
               onClick={() => setShowFavOnly(!showFavOnly)}
-              className="flex items-center gap-1 px-2 py-1 text-xs rounded cursor-pointer transition-colors"
-              style={{
-                color: showFavOnly ? "#f59e0b" : "var(--text-secondary)",
-                backgroundColor: showFavOnly ? "#f59e0b15" : "transparent",
-              }}
+              className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg cursor-pointer
+                          transition-all border ${
+                            showFavOnly
+                              ? "border-[var(--accent)]/30 bg-[var(--accent)]/8 text-[var(--accent)]"
+                              : "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                          }`}
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill={showFavOnly ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
                 <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
@@ -180,19 +193,22 @@ export default function GalleryPage() {
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as SortBy)}
-              className="text-xs px-2 py-1 rounded bg-[var(--bg-tertiary)] border border-[var(--border)]
-                         text-[var(--text-secondary)] cursor-pointer focus:outline-none"
+              className="text-xs px-2.5 py-1.5 rounded-lg bg-[var(--bg-tertiary)] border border-[var(--border)]
+                         text-[var(--text-secondary)] cursor-pointer focus:outline-none
+                         focus:border-[var(--accent)]/40"
             >
               <option value="time">按时间</option>
               <option value="name">按名称</option>
             </select>
 
             {/* 视图切换 */}
-            <div className="flex items-center gap-0.5 bg-[var(--bg-tertiary)] rounded p-0.5">
+            <div className="flex items-center gap-0.5 bg-[var(--bg-tertiary)] rounded-lg p-0.5 border border-[var(--border)]">
               <button
                 onClick={() => setViewMode("grid")}
-                className={`p-1 rounded cursor-pointer transition-colors ${
-                  viewMode === "grid" ? "bg-[var(--bg-primary)] text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+                className={`p-1.5 rounded-md cursor-pointer transition-all ${
+                  viewMode === "grid"
+                    ? "bg-[var(--accent)]/10 text-[var(--accent)]"
+                    : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 }`}
                 title="网格视图"
               >
@@ -203,8 +219,10 @@ export default function GalleryPage() {
               </button>
               <button
                 onClick={() => setViewMode("list")}
-                className={`p-1 rounded cursor-pointer transition-colors ${
-                  viewMode === "list" ? "bg-[var(--bg-primary)] text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+                className={`p-1.5 rounded-md cursor-pointer transition-all ${
+                  viewMode === "list"
+                    ? "bg-[var(--accent)]/10 text-[var(--accent)]"
+                    : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
                 }`}
                 title="列表视图"
               >
@@ -217,11 +235,11 @@ export default function GalleryPage() {
 
           {/* 批量操作栏 */}
           {selectedIds.size > 0 && (
-            <div className="flex-shrink-0 px-4 py-2 bg-[var(--accent)]/10 border-b border-[var(--accent)]/30
-                            flex items-center gap-3">
+            <div className="flex-shrink-0 px-5 py-2.5 bg-[var(--accent)]/5 border-b border-[var(--accent)]/20
+                            flex items-center gap-3 backdrop-blur-sm">
               <button
                 onClick={selectAll}
-                className="text-xs text-[var(--accent)] cursor-pointer"
+                className="text-xs text-[var(--accent)] cursor-pointer hover:underline"
               >
                 {selectedIds.size === filtered.length ? "取消全选" : "全选"}
               </button>
@@ -231,15 +249,19 @@ export default function GalleryPage() {
               <div className="flex-1" />
               <button
                 onClick={handleBatchDownload}
-                className="px-2.5 py-1 text-xs rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                           hover:text-[var(--text-primary)] border border-[var(--border)] cursor-pointer"
+                className="px-3 py-1.5 text-xs rounded-lg bg-[var(--bg-tertiary)]
+                           text-[var(--text-secondary)] hover:text-[var(--accent)]
+                           border border-[var(--border)] hover:border-[var(--accent)]/40
+                           cursor-pointer transition-all"
               >
                 批量下载
               </button>
               <button
                 onClick={handleBatchDelete}
-                className="px-2.5 py-1 text-xs rounded bg-[var(--bg-tertiary)] text-red-400
-                           hover:text-red-300 border border-[var(--border)] cursor-pointer"
+                className="px-3 py-1.5 text-xs rounded-lg bg-[var(--bg-tertiary)]
+                           text-[var(--hot)]/70 hover:text-[var(--hot)]
+                           border border-[var(--border)] hover:border-[var(--hot)]/40
+                           cursor-pointer transition-all"
               >
                 批量删除
               </button>
@@ -247,45 +269,53 @@ export default function GalleryPage() {
           )}
 
           {/* 图片内容区 */}
-          <div className="flex-1 overflow-y-auto p-4">
+          <div className="flex-1 overflow-y-auto p-4 md:p-5">
             {filtered.length === 0 ? (
               <div className="h-full flex items-center justify-center">
-                <div className="text-center space-y-2">
-                  <div className="text-3xl">📁</div>
+                <div className="text-center space-y-3">
+                  <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl
+                                  bg-[var(--accent)]/10 border border-[var(--accent)]/20">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" opacity="0.6">
+                      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                      <circle cx="8.5" cy="8.5" r="1.5" />
+                      <polyline points="21 15 16 10 5 21" />
+                    </svg>
+                  </div>
                   <p className="text-sm text-[var(--text-secondary)]">
                     {assets.length === 0 ? "还没有生成过图片" : "没有匹配的资源"}
                   </p>
                 </div>
               </div>
             ) : viewMode === "grid" ? (
-              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 md:gap-3">
+              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 md:gap-4">
                 {filtered.map((asset) => (
                   <div
                     key={asset.id}
-                    className={`group relative rounded-lg overflow-hidden border transition-colors cursor-pointer ${
+                    className={`group relative rounded-xl overflow-hidden neon-border cursor-pointer
+                                bg-[var(--bg-card)] backdrop-blur-sm transition-all ${
                       selectedIds.has(asset.id)
-                        ? "border-[var(--accent)] ring-1 ring-[var(--accent)]"
-                        : "border-[var(--border)] hover:border-[var(--border)]/80"
+                        ? "!border-[var(--accent)] ring-1 ring-[var(--accent)]/30 shadow-[0_0_15px_rgba(77,184,164,0.08)]"
+                        : ""
                     }`}
                     onClick={() => setDetailAsset(asset)}
                   >
                     {/* 选择框 */}
                     <div
-                      className="absolute top-2 left-2 z-10"
+                      className="absolute top-2.5 left-2.5 z-10"
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleSelect(asset.id);
                       }}
                     >
                       <div
-                        className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                        className={`w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all ${
                           selectedIds.has(asset.id)
-                            ? "bg-[var(--accent)] border-[var(--accent)]"
-                            : "border-white/50 bg-black/30 opacity-100 md:opacity-0 md:group-hover:opacity-100"
+                            ? "bg-[var(--accent)] border-[var(--accent)] shadow-[0_0_8px_rgba(77,184,164,0.25)]"
+                            : "border-white/40 bg-black/30 backdrop-blur-sm opacity-100 md:opacity-0 md:group-hover:opacity-100"
                         }`}
                       >
                         {selectedIds.has(asset.id) && (
-                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
+                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--bg-primary)" strokeWidth="3">
                             <polyline points="20 6 9 17 4 12" />
                           </svg>
                         )}
@@ -295,24 +325,25 @@ export default function GalleryPage() {
                     <img
                       src={getImageUrl(asset.url)}
                       alt={asset.prompt.slice(0, 50)}
-                      className="w-full aspect-square object-cover"
+                      className="w-full aspect-square object-cover
+                                 transition-transform duration-300 group-hover:scale-[1.03]"
                       loading="lazy"
                     />
 
                     {/* 底部信息 */}
-                    <div className="p-2 bg-[var(--bg-secondary)]">
-                      <div className="text-[10px] text-[var(--text-secondary)] truncate">
+                    <div className="p-2.5 bg-[var(--bg-secondary)]/80 backdrop-blur-sm">
+                      <div className="text-[11px] text-[var(--text-secondary)] truncate">
                         {asset.prompt || "无 prompt"}
                       </div>
-                      <div className="flex items-center gap-1 mt-1 flex-wrap">
+                      <div className="flex items-center gap-1 mt-1.5 flex-wrap">
                         {asset.tags.slice(0, 2).map((tid) => {
                           const tag = tagMap.get(tid);
                           if (!tag) return null;
                           return (
                             <span
                               key={tid}
-                              className="text-[9px] px-1 py-px rounded-full"
-                              style={{ backgroundColor: tag.color + "22", color: tag.color }}
+                              className="text-[9px] px-1.5 py-0.5 rounded-md font-medium"
+                              style={{ backgroundColor: tag.color + "18", color: tag.color }}
                             >
                               {tag.name}
                             </span>
@@ -324,16 +355,17 @@ export default function GalleryPage() {
                       </div>
                     </div>
 
-                    {/* 操作按钮：移动端始终可见 */}
-                    <div className="absolute top-2 right-2 flex gap-1
+                    {/* 操作按钮 */}
+                    <div className="absolute top-2.5 right-2.5 flex gap-1.5
                                     opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
                       <button
                         onClick={(e) => {
                           e.stopPropagation();
                           handleDownload(asset);
                         }}
-                        className="w-7 h-7 rounded bg-black/60 text-white/80 hover:text-white
-                                   flex items-center justify-center cursor-pointer"
+                        className="w-7 h-7 rounded-lg bg-black/50 backdrop-blur-sm text-white/70
+                                   hover:text-[var(--accent)] hover:bg-black/70
+                                   flex items-center justify-center cursor-pointer transition-colors"
                         title="下载"
                       >
                         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -345,8 +377,9 @@ export default function GalleryPage() {
                           e.stopPropagation();
                           toggleFavorite(asset.id);
                         }}
-                        className="w-7 h-7 rounded bg-black/60 flex items-center justify-center cursor-pointer"
-                        style={{ color: asset.favorited ? "#f59e0b" : "rgba(255,255,255,0.6)" }}
+                        className="w-7 h-7 rounded-lg bg-black/50 backdrop-blur-sm
+                                   flex items-center justify-center cursor-pointer transition-colors"
+                        style={{ color: asset.favorited ? "var(--accent)" : "rgba(255,255,255,0.5)" }}
                         title={asset.favorited ? "取消收藏" : "收藏"}
                       >
                         <svg width="12" height="12" viewBox="0 0 24 24" fill={asset.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
@@ -358,15 +391,14 @@ export default function GalleryPage() {
                 ))}
               </div>
             ) : (
-              /* 列表视图 */
-              <div className="space-y-1">
+              <div className="space-y-1.5">
                 {filtered.map((asset) => (
                   <div
                     key={asset.id}
-                    className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
+                    className={`flex items-center gap-3 px-4 py-2.5 rounded-xl cursor-pointer transition-all ${
                       selectedIds.has(asset.id)
-                        ? "bg-[var(--accent)]/10"
-                        : "hover:bg-[var(--bg-tertiary)]"
+                        ? "bg-[var(--accent)]/8 border border-[var(--accent)]/25"
+                        : "hover:bg-[var(--bg-tertiary)] border border-transparent"
                     }`}
                     onClick={() => setDetailAsset(asset)}
                   >
@@ -377,14 +409,14 @@ export default function GalleryPage() {
                       }}
                     >
                       <div
-                        className={`w-4 h-4 rounded border flex items-center justify-center ${
+                        className={`w-4 h-4 rounded-md border flex items-center justify-center transition-all ${
                           selectedIds.has(asset.id)
                             ? "bg-[var(--accent)] border-[var(--accent)]"
                             : "border-[var(--border)]"
                         }`}
                       >
                         {selectedIds.has(asset.id) && (
-                          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
+                          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="var(--bg-primary)" strokeWidth="3">
                             <polyline points="20 6 9 17 4 12" />
                           </svg>
                         )}
@@ -394,7 +426,7 @@ export default function GalleryPage() {
                     <img
                       src={getImageUrl(asset.url)}
                       alt=""
-                      className="w-10 h-10 rounded object-cover border border-[var(--border)]"
+                      className="w-10 h-10 rounded-lg object-cover border border-[var(--border)]"
                       loading="lazy"
                     />
 
@@ -409,8 +441,8 @@ export default function GalleryPage() {
                           return (
                             <span
                               key={tid}
-                              className="text-[9px] px-1 py-px rounded-full"
-                              style={{ backgroundColor: tag.color + "22", color: tag.color }}
+                              className="text-[9px] px-1.5 py-0.5 rounded-md font-medium"
+                              style={{ backgroundColor: tag.color + "18", color: tag.color }}
                             >
                               {tag.name}
                             </span>
@@ -428,8 +460,8 @@ export default function GalleryPage() {
                         e.stopPropagation();
                         toggleFavorite(asset.id);
                       }}
-                      className="cursor-pointer flex-shrink-0"
-                      style={{ color: asset.favorited ? "#f59e0b" : "var(--text-secondary)" }}
+                      className="cursor-pointer flex-shrink-0 transition-colors"
+                      style={{ color: asset.favorited ? "var(--accent)" : "var(--text-secondary)" }}
                     >
                       <svg width="14" height="14" viewBox="0 0 24 24" fill={asset.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
                         <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
@@ -441,7 +473,7 @@ export default function GalleryPage() {
                         e.stopPropagation();
                         handleDownload(asset);
                       }}
-                      className="cursor-pointer text-[var(--text-secondary)] hover:text-[var(--text-primary)] flex-shrink-0"
+                      className="cursor-pointer text-[var(--text-secondary)] hover:text-[var(--accent)] flex-shrink-0 transition-colors"
                     >
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                         <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
@@ -473,7 +505,6 @@ export default function GalleryPage() {
   );
 }
 
-// 资源详情 Modal
 function GalleryDetailModal({
   asset,
   tags,
@@ -493,20 +524,22 @@ function GalleryDetailModal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
       onClick={onClose}
     >
       <div
-        className="bg-[var(--bg-secondary)] rounded-xl border border-[var(--border)]
-                    max-w-3xl w-full mx-2 md:mx-4 max-h-[90vh] md:max-h-[85vh] overflow-hidden flex flex-col"
+        className="glass-panel rounded-2xl max-w-3xl w-full mx-2 md:mx-4
+                    max-h-[90vh] md:max-h-[85vh] overflow-hidden flex flex-col
+                    shadow-xl shadow-black/40"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 头部 */}
-        <div className="flex items-center justify-between px-5 py-3 border-b border-[var(--border)]">
-          <span className="text-sm font-medium text-[var(--text-primary)]">资源详情</span>
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border)]">
+          <span className="text-sm font-semibold text-[var(--text-primary)]">资源详情</span>
           <button
             onClick={onClose}
-            className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] cursor-pointer"
+            className="text-[var(--text-secondary)] hover:text-[var(--accent)] cursor-pointer
+                       transition-colors p-1 rounded-lg hover:bg-[var(--accent)]/5"
           >
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M18 6L6 18M6 6l12 12" />
@@ -517,24 +550,23 @@ function GalleryDetailModal({
         {/* 内容 */}
         <div className="flex-1 overflow-y-auto p-5">
           <div className="flex gap-5 flex-col md:flex-row">
-            {/* 图片 */}
             <div className="flex-1 min-w-0">
               <img
                 src={getImageUrl(asset.url)}
                 alt={asset.prompt}
-                className="w-full rounded-lg border border-[var(--border)]"
+                className="w-full rounded-xl border border-[var(--border)]"
               />
             </div>
 
-            {/* 信息 */}
             <div className="w-full md:w-[260px] flex-shrink-0 space-y-4">
               {/* 操作按钮 */}
               <div className="flex flex-wrap gap-2">
                 <button
                   onClick={onDownload}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                             bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]
-                             cursor-pointer transition-colors"
+                  className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                             bg-[var(--accent)] text-[var(--bg-primary)]
+                             hover:bg-[var(--accent-hover)] hover:shadow-[0_0_12px_rgba(77,184,164,0.25)]
+                             cursor-pointer transition-all"
                 >
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                     <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
@@ -543,13 +575,12 @@ function GalleryDetailModal({
                 </button>
                 <button
                   onClick={onToggleFavorite}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                             border cursor-pointer transition-colors"
-                  style={{
-                    backgroundColor: asset.favorited ? "#f59e0b22" : "var(--bg-tertiary)",
-                    borderColor: asset.favorited ? "#f59e0b" : "var(--border)",
-                    color: asset.favorited ? "#f59e0b" : "var(--text-secondary)",
-                  }}
+                  className={`flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                             border cursor-pointer transition-all ${
+                               asset.favorited
+                                 ? "border-[var(--accent)]/40 bg-[var(--accent)]/8 text-[var(--accent)]"
+                                 : "border-[var(--border)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                             }`}
                 >
                   <svg width="12" height="12" viewBox="0 0 24 24" fill={asset.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
                     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
@@ -558,10 +589,10 @@ function GalleryDetailModal({
                 </button>
                 <button
                   onClick={onDelete}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                             bg-[var(--bg-tertiary)] text-red-400/70 hover:text-red-400
-                             border border-[var(--border)] hover:border-red-400/50
-                             cursor-pointer transition-colors"
+                  className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                             bg-[var(--bg-tertiary)] text-[var(--hot)]/60 hover:text-[var(--hot)]
+                             border border-[var(--border)] hover:border-[var(--hot)]/40
+                             cursor-pointer transition-all"
                 >
                   删除
                 </button>
@@ -570,17 +601,17 @@ function GalleryDetailModal({
               {/* Prompt */}
               {asset.prompt && (
                 <div>
-                  <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center justify-between mb-1.5">
                     <span className="text-xs font-medium text-[var(--text-secondary)]">Prompt</span>
                     <button
                       onClick={() => navigator.clipboard.writeText(asset.prompt)}
                       className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--accent)]
-                                 cursor-pointer"
+                                 cursor-pointer transition-colors"
                     >
                       复制
                     </button>
                   </div>
-                  <div className="p-2 rounded bg-[var(--bg-primary)] border border-[var(--border)]
+                  <div className="p-3 rounded-xl bg-[var(--bg-primary)] border border-[var(--border)]
                                   text-xs text-[var(--text-secondary)] leading-relaxed break-all">
                     {asset.prompt}
                   </div>
@@ -590,16 +621,16 @@ function GalleryDetailModal({
               {/* 标签 */}
               {asset.tags.length > 0 && (
                 <div>
-                  <span className="text-xs font-medium text-[var(--text-secondary)] block mb-1">标签</span>
-                  <div className="flex flex-wrap gap-1">
+                  <span className="text-xs font-medium text-[var(--text-secondary)] block mb-1.5">标签</span>
+                  <div className="flex flex-wrap gap-1.5">
                     {asset.tags.map((tid) => {
                       const tag = tagMap.get(tid);
                       if (!tag) return null;
                       return (
                         <span
                           key={tid}
-                          className="text-[10px] px-2 py-0.5 rounded-full"
-                          style={{ backgroundColor: tag.color + "22", color: tag.color }}
+                          className="text-[10px] px-2 py-0.5 rounded-lg font-medium"
+                          style={{ backgroundColor: tag.color + "18", color: tag.color }}
                         >
                           {tag.name}
                         </span>
@@ -610,9 +641,9 @@ function GalleryDetailModal({
               )}
 
               {/* 元信息 */}
-              <div className="text-xs text-[var(--text-secondary)] space-y-1">
+              <div className="text-xs text-[var(--text-secondary)] space-y-1.5">
                 <div>创建时间：{new Date(asset.createdAt).toLocaleString("zh-CN")}</div>
-                <div>会话 ID：{asset.sessionId}</div>
+                <div className="truncate">会话 ID：{asset.sessionId}</div>
               </div>
             </div>
           </div>

art-agent/frontend/src/app/globals.css

@@ -1,25 +1,200 @@
 @import "tailwindcss";
 
+/* ===== 青绿山水色彩体系 ===== */
 :root {
-  --bg-primary: #0a0a0a;
-  --bg-secondary: #141414;
-  --bg-tertiary: #1e1e1e;
-  --text-primary: #e5e5e5;
-  --text-secondary: #a3a3a3;
-  --accent: #6366f1;
-  --accent-hover: #818cf8;
-  --border: #2e2e2e;
+  --bg-primary: #0C1210;
+  --bg-secondary: #131E1A;
+  --bg-tertiary: #1C2A24;
+  --bg-card: rgba(16, 30, 24, 0.65);
+  --text-primary: #E0E8E2;
+  --text-secondary: #7A9485;
+  --accent: #4DB8A4;
+  --accent-hover: #6CD4BE;
+  --accent-secondary: #3A8FB7;
+  --hot: #C4654A;
+  --border: rgba(77, 184, 164, 0.12);
+  --border-glow: rgba(77, 184, 164, 0.25);
+  --mist: rgba(77, 184, 164, 0.06);
+  --gold: #B8935A;
 }
 
 body {
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
   overscroll-behavior: none;
   -webkit-tap-highlight-color: transparent;
 }
 
-/* 自定义滚动条 */
+/* ===== 山雾背景 — 远景层 ===== */
+@keyframes fogDriftFar {
+  0%   { transform: translate(0, 0) scale(1); }
+  33%  { transform: translate(2%, -1.5%) scale(1.02); }
+  66%  { transform: translate(-1.5%, 1%) scale(0.98); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes fogDriftNear {
+  0%   { transform: translate(0, 0) scale(1); }
+  25%  { transform: translate(-3%, 2%) scale(1.03); }
+  50%  { transform: translate(1%, -1%) scale(0.97); }
+  75%  { transform: translate(2.5%, 1.5%) scale(1.01); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: -10%;
+  background:
+    radial-gradient(ellipse 80% 50% at 15% 75%, rgba(77, 184, 164, 0.07) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 40% at 75% 25%, rgba(58, 143, 183, 0.05) 0%, transparent 55%),
+    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(77, 184, 164, 0.03) 0%, transparent 70%);
+  animation: fogDriftFar 60s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+body::after {
+  content: '';
+  position: fixed;
+  inset: -15%;
+  background:
+    radial-gradient(ellipse 70% 45% at 80% 70%, rgba(77, 184, 164, 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse 50% 60% at 25% 30%, rgba(58, 143, 183, 0.04) 0%, transparent 50%);
+  animation: fogDriftNear 45s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ===== 山雾玻璃面板 ===== */
+.glass-panel {
+  background:
+    linear-gradient(165deg, rgba(16, 30, 24, 0.15) 0%, transparent 50%),
+    rgba(16, 30, 24, 0.55);
+  backdrop-filter: blur(24px) saturate(1.1);
+  -webkit-backdrop-filter: blur(24px) saturate(1.1);
+  border: 1px solid var(--border);
+}
+
+/* ===== 静态霓虹边框（卡片等普通元素） ===== */
+.neon-border {
+  border: 1px solid var(--border);
+  transition: border-color 200ms ease, box-shadow 200ms ease;
+}
+.neon-border:hover {
+  border-color: var(--border-glow);
+  box-shadow: 0 0 18px rgba(77, 184, 164, 0.08),
+              inset 0 0 12px rgba(77, 184, 164, 0.03);
+}
+
+/* ===== 云烟缭绕边框 ===== */
+
+/*
+ * .glow-border — 选中态的云烟边框
+ *   常态：石青色微弱均匀发光
+ *   hover：云烟缓慢缭绕，opacity 平滑过渡
+ *   移开：云烟淡散回静态
+ */
+
+@property --glow-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@keyframes mistSpin {
+  to { --glow-angle: 360deg; }
+}
+
+.glow-border {
+  position: relative;
+  background: var(--bg-secondary);
+  border: 1px solid rgba(77, 184, 164, 0.18) !important;
+  box-shadow: 0 0 10px rgba(77, 184, 164, 0.05),
+              inset 0 0 8px rgba(77, 184, 164, 0.02);
+  transition: border-color 400ms ease, box-shadow 400ms ease;
+  z-index: 0;
+}
+.glow-border:hover {
+  border-color: rgba(77, 184, 164, 0.28) !important;
+  box-shadow: 0 0 16px rgba(77, 184, 164, 0.08),
+              inset 0 0 12px rgba(77, 184, 164, 0.03);
+}
+
+/* 云烟边框层 — 宽弧段柔化渐变，6s 缓慢旋转 */
+.glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--glow-angle),
+    transparent 0%,
+    transparent 15%,
+    rgba(77, 184, 164, 0.2) 25%,
+    rgba(58, 143, 183, 0.35) 38%,
+    rgba(77, 184, 164, 0.4) 50%,
+    rgba(58, 143, 183, 0.35) 62%,
+    rgba(77, 184, 164, 0.2) 75%,
+    transparent 85%,
+    transparent 100%
+  );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: mistSpin 6s linear infinite;
+  opacity: 0;
+  transition: opacity 600ms ease;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* 雾气扩散层 — 更大范围、更模糊 */
+.glow-border::after {
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--glow-angle),
+    transparent 0%,
+    transparent 20%,
+    rgba(77, 184, 164, 0.06) 35%,
+    rgba(58, 143, 183, 0.08) 50%,
+    rgba(77, 184, 164, 0.06) 65%,
+    transparent 80%,
+    transparent 100%
+  );
+  filter: blur(12px);
+  animation: mistSpin 6s linear infinite;
+  opacity: 0;
+  transition: opacity 600ms ease;
+  pointer-events: none;
+  z-index: -2;
+}
+
+.glow-border:hover::before { opacity: 1; }
+.glow-border:hover::after  { opacity: 1; }
+
+/* ===== 雾气滚动边缘 ===== */
+.fog-scroll {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0px,
+    black 36px,
+    black calc(100% - 36px),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0px,
+    black 36px,
+    black calc(100% - 36px),
+    transparent 100%
+  );
+}
+
+/* ===== 自定义滚动条 ===== */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -28,17 +203,18 @@ body {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--border);
+  background: rgba(77, 184, 164, 0.15);
   border-radius: 3px;
 }
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(77, 184, 164, 0.28);
+}
 
-/* 原生 select 下拉框暗色 */
 select option {
   background: var(--bg-secondary);
   color: var(--text-primary);
 }
 
-/* 移动端侧边栏遮罩动画 */
 .sidebar-overlay {
   animation: fadeIn 200ms ease-out;
 }
@@ -46,8 +222,11 @@ select option {
   from { opacity: 0; }
   to { opacity: 1; }
 }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
-/* 移动端防止 iOS 地址栏 bounce */
 @supports (height: 100dvh) {
   .h-screen {
     height: 100dvh;

art-agent/frontend/src/app/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, type FormEvent } from "react";
+import { useState, useEffect, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth-context";
 
@@ -12,8 +12,13 @@ export default function LoginPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace("/");
+    }
+  }, [isAuthenticated, router]);
+
   if (isAuthenticated) {
-    router.replace("/");
     return null;
   }
 
@@ -33,15 +38,38 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="h-screen flex items-center justify-center bg-[var(--bg-primary)]">
-      <div className="w-full max-w-sm mx-4">
+    <div className="h-screen flex items-center justify-center bg-[var(--bg-primary)] relative">
+      {/* 背景环境光 */}
+      <div className="fixed inset-0 pointer-events-none">
+        <div className="absolute inset-0"
+          style={{
+            background: `
+              radial-gradient(ellipse at 30% 70%, rgba(77, 184, 164, 0.08) 0%, transparent 50%),
+              radial-gradient(ellipse at 70% 30%, rgba(58, 143, 183, 0.06) 0%, transparent 50%)
+            `,
+          }}
+        />
+      </div>
+
+      <div className="w-full max-w-sm mx-4 relative z-10">
         <div className="text-center mb-8">
-          <div className="text-4xl mb-3">🎨</div>
-          <h1 className="text-2xl font-semibold text-[var(--text-primary)]">EPEEKit</h1>
-          <p className="text-sm text-[var(--text-secondary)] mt-1">AI 美术资源生成工具</p>
+          {/* Logo 发光 */}
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4
+                          bg-[var(--accent)]/10 border border-[var(--accent)]/20
+                          shadow-[0_0_40px_rgba(77,184,164,0.15)]">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="var(--accent)" />
+              <circle cx="23" cy="12" r="3.5" stroke="var(--accent)" strokeWidth="1.8" fill="none" />
+              <path d="M23 15.5v5" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
+              <circle cx="23" cy="22.5" r="1" fill="var(--accent)" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-[var(--text-primary)]">EPEEKit</h1>
+          <p className="text-sm text-[var(--text-secondary)] mt-1.5">AI 美术资源生成工具</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit}
+              className="glass-panel rounded-2xl p-6 space-y-4 shadow-xl shadow-black/20">
           <div>
             <input
               type="text"
@@ -50,11 +78,12 @@ export default function LoginPage() {
               onChange={(e) => setUsername(e.target.value)}
               autoFocus
               autoComplete="username"
-              className="w-full px-4 py-3 rounded-lg
-                         bg-[var(--bg-secondary)] border border-[var(--border)]
+              className="w-full px-4 py-3 rounded-xl
+                         bg-[var(--bg-primary)] border border-[var(--border)]
                          text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]
-                         focus:outline-none focus:border-[var(--accent)]
-                         transition-colors"
+                         focus:outline-none focus:border-[var(--accent)]/50
+                         focus:shadow-[0_0_10px_rgba(77,184,164,0.06)]
+                         transition-all"
             />
           </div>
           <div>
@@ -64,16 +93,18 @@ export default function LoginPage() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               autoComplete="current-password"
-              className="w-full px-4 py-3 rounded-lg
-                         bg-[var(--bg-secondary)] border border-[var(--border)]
+              className="w-full px-4 py-3 rounded-xl
+                         bg-[var(--bg-primary)] border border-[var(--border)]
                          text-[var(--text-primary)] placeholder:text-[var(--text-secondary)]
-                         focus:outline-none focus:border-[var(--accent)]
-                         transition-colors"
+                         focus:outline-none focus:border-[var(--accent)]/50
+                         focus:shadow-[0_0_10px_rgba(77,184,164,0.06)]
+                         transition-all"
             />
           </div>
 
           {error && (
-            <div className="text-sm text-red-400 bg-red-400/10 rounded-lg px-4 py-2.5">
+            <div className="text-sm text-[var(--hot)] bg-[var(--hot)]/10 rounded-xl px-4 py-2.5
+                            border border-[var(--hot)]/20">
               {error}
             </div>
           )}
@@ -81,11 +112,12 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={loading || !username.trim() || !password}
-            className="w-full py-3 rounded-lg font-medium
-                       bg-[var(--accent)] text-white
+            className="w-full py-3 rounded-xl font-semibold
+                       bg-[var(--accent)] text-[var(--bg-primary)]
                        hover:bg-[var(--accent-hover)]
+                       hover:shadow-[0_0_20px_rgba(77,184,164,0.25)]
                        disabled:opacity-50 disabled:cursor-not-allowed
-                       transition-colors cursor-pointer"
+                       transition-all cursor-pointer"
           >
             {loading ? "登录中..." : "登录"}
           </button>

art-agent/frontend/src/app/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
 import { ChatMessages } from "@/components/chat/chat-messages";
-import { ChatInput } from "@/components/chat/chat-input";
+import { ChatInput, type ChatInputHandle } from "@/components/chat/chat-input";
 import { Sidebar } from "@/components/sidebar/sidebar";
 import { TopNav } from "@/components/layout/top-nav";
 import { ImageDetailPanel } from "@/components/detail/image-detail-panel";
@@ -30,6 +30,11 @@ export default function Home() {
   const [streamingImages, setStreamingImages] = useState<ImageAsset[]>([]);
   const [statusText, setStatusText] = useState("");
   const [pendingAnnotation, setPendingAnnotation] = useState<AnnotationData | null>(null);
+  const [lastRefImageUrls, setLastRefImageUrls] = useState<string[]>([]);
+  const lastRefPerSession = useRef<Map<string, string[]>>(new Map());
+  const [mainDragging, setMainDragging] = useState(false);
+  const dragCounter = useRef(0);
+  const chatInputRef = useRef<ChatInputHandle>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollPositions = useRef<Map<string, number>>(new Map());
   const prevSessionId = useRef<string | null>(null);
@@ -67,13 +72,14 @@ export default function Home() {
     return () => el.removeEventListener("scroll", handler);
   }, [activeSessionId]);
 
-  // 会话切换：标记 switching，等 DOM 更新后恢复位置
+  // 会话切换：标记 switching，等 DOM 更新后恢复位置 + 恢复参考图状态
   useEffect(() => {
     if (!activeSessionId) return;
     if (prevSessionId.current && prevSessionId.current !== activeSessionId) {
       isSwitching.current = true;
     }
     prevSessionId.current = activeSessionId;
+    setLastRefImageUrls(lastRefPerSession.current.get(activeSessionId) ?? []);
   }, [activeSessionId]);
 
   useEffect(() => {
@@ -95,11 +101,11 @@ export default function Home() {
   }, [activeSessionId, messages.length]);
 
   const handleSend = useCallback(
-    async (text: string, refImageServerUrl: string | null, imageModel: string | null = null) => {
+    async (text: string, refImageServerUrls: string[], imageModel: string | null = null) => {
       if (!activeSessionId || !activeSession) return;
 
       let finalText = text;
-      let finalRefServerUrl = refImageServerUrl;
+      let finalRefServerUrls = [...refImageServerUrls];
 
       if (pendingAnnotation) {
         const annotationDescs = pendingAnnotation.annotations
@@ -116,14 +122,13 @@ export default function Home() {
           finalText = `${text}\n\n--- 图片标注 ---\n${annotationDescs}`;
         }
 
-        // 标注截图作为参考图：需要先上传再获取 URL
-        if (pendingAnnotation.snapshot && !refImageServerUrl) {
+        if (pendingAnnotation.snapshot && finalRefServerUrls.length === 0) {
           try {
             const res = await fetch(pendingAnnotation.snapshot);
             const blob = await res.blob();
             const file = new File([blob], "annotation.png", { type: "image/png" });
             const uploadResult = await uploadRefImage(file);
-            finalRefServerUrl = uploadResult.url;
+            finalRefServerUrls = [uploadResult.url];
           } catch {
             // 忽略转换/上传失败
           }
@@ -132,17 +137,18 @@ export default function Home() {
         setPendingAnnotation(null);
       }
 
-      // 用户消息中的参考图预览：优先使用服务端路径（通过 getImageUrl 转为完整 URL）
-      let previewUrl: string | undefined;
-      if (finalRefServerUrl) {
-        previewUrl = getImageUrl(finalRefServerUrl);
+      if (finalRefServerUrls.length > 0) {
+        lastRefPerSession.current.set(activeSessionId, finalRefServerUrls);
+        setLastRefImageUrls(finalRefServerUrls);
       }
 
+      const previewUrls = finalRefServerUrls.map((u) => getImageUrl(u));
+
       const userMessage: ChatMessage = {
         id: generateId("msg-"),
         role: "user",
         content: finalText,
-        refImageUrl: previewUrl,
+        refImageUrls: previewUrls.length > 0 ? previewUrls : undefined,
       };
       appendMessage(activeSessionId, userMessage);
       setIsLoading(true);
@@ -160,8 +166,10 @@ export default function Home() {
       let collectedImages: ImageAsset[] = [];
       let usedModelName = "";
 
+      const llmModel = activeSession?.llmModel ?? null;
+
       try {
-        for await (const event of sendChat(apiMessages, finalRefServerUrl, imageModel, activeSessionId)) {
+        for await (const event of sendChat(apiMessages, finalRefServerUrls.length > 0 ? finalRefServerUrls : null, imageModel, activeSessionId, llmModel)) {
           switch (event.type) {
             case "text_delta":
               assistantText += event.data.text as string;
@@ -261,21 +269,61 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen flex flex-col relative z-[1]">
       <TopNav />
 
       <div className="flex-1 flex overflow-hidden">
         <Sidebar />
 
-        <main className="flex-1 flex flex-col min-w-0 relative">
-          {/* 桌面端侧边栏展开按钮（移动端用顶栏汉堡菜单替代） */}
+        <main
+          className="flex-1 flex flex-col min-w-0 relative"
+          onDragEnter={(e: DragEvent) => {
+            e.preventDefault();
+            dragCounter.current++;
+            if (e.dataTransfer.types.includes("Files")) setMainDragging(true);
+          }}
+          onDragOver={(e: DragEvent) => e.preventDefault()}
+          onDragLeave={(e: DragEvent) => {
+            e.preventDefault();
+            dragCounter.current--;
+            if (dragCounter.current <= 0) { dragCounter.current = 0; setMainDragging(false); }
+          }}
+          onDrop={(e: DragEvent) => {
+            e.preventDefault();
+            dragCounter.current = 0;
+            setMainDragging(false);
+            const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+            files.forEach((f) => chatInputRef.current?.uploadFile(f));
+          }}
+        >
+          {/* 拖拽覆盖层 */}
+          {mainDragging && (
+            <div className="absolute inset-0 z-50 flex items-center justify-center
+                            bg-[var(--bg-primary)]/80 backdrop-blur-sm
+                            border-2 border-dashed border-[var(--accent)]/50 rounded-xl m-2
+                            pointer-events-none">
+              <div className="text-center space-y-2">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
+                     stroke="var(--accent)" strokeWidth="1.5" className="mx-auto opacity-70">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                  <circle cx="8.5" cy="8.5" r="1.5" />
+                  <polyline points="21 15 16 10 5 21" />
+                </svg>
+                <p className="text-sm text-[var(--accent)] font-medium">松开以添加参考图（可多张）</p>
+              </div>
+            </div>
+          )}
+
+          {/* 桌面端侧边栏展开按钮 */}
           {sidebarCollapsed && (
             <button
               onClick={() => setSidebarCollapsed(false)}
-              className="absolute left-1 top-2 z-10 p-1.5 rounded-md
-                         bg-[var(--bg-secondary)] border border-[var(--border)]
-                         text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                         transition-colors cursor-pointer
+              className="absolute left-2 top-2 z-10 p-1.5 rounded-lg
+                         bg-[var(--bg-secondary)]/80 backdrop-blur-sm
+                         border border-[var(--border)]
+                         text-[var(--text-secondary)] hover:text-[var(--accent)]
+                         hover:border-[var(--accent)]/40
+                         transition-all cursor-pointer
                          hidden md:flex"
               title="展开侧边栏"
             >
@@ -287,12 +335,13 @@ export default function Home() {
 
           {/* 标注提示条 */}
           {pendingAnnotation && (
-            <div className="flex-shrink-0 px-4 py-2 bg-[var(--accent)]/10 border-b border-[var(--accent)]/30
-                            flex items-center gap-3">
+            <div className="flex-shrink-0 px-5 py-2.5 bg-[var(--accent)]/5 border-b border-[var(--accent)]/20
+                            flex items-center gap-3 backdrop-blur-sm">
               <img
                 src={pendingAnnotation.snapshot}
                 alt="标注预览"
-                className="w-10 h-10 rounded object-cover border border-[var(--accent)]"
+                className="w-10 h-10 rounded-lg object-cover border border-[var(--accent)]/40
+                           shadow-[0_0_8px_rgba(77,184,164,0.12)]"
               />
               <span className="text-xs text-[var(--accent)]">
                 标注已就绪（{pendingAnnotation.annotations.length} 处）— 输入修改意见后发送
@@ -300,27 +349,37 @@ export default function Home() {
               <button
                 onClick={() => setPendingAnnotation(null)}
                 className="ml-auto text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                           cursor-pointer"
+                           cursor-pointer transition-colors"
               >
                 取消
               </button>
             </div>
           )}
 
-          <div ref={scrollRef} className="flex-1 overflow-y-auto">
+          <div ref={scrollRef} className="flex-1 overflow-y-auto fog-scroll">
             {messages.length === 0 && !isLoading ? (
               <div className="h-full flex items-center justify-center">
-                <div className="text-center space-y-3">
-                  <div className="text-4xl">🎨</div>
-                  <h2 className="text-xl font-medium text-[var(--text-primary)]">
+                <div className="text-center space-y-4">
+                  {/* Logo 发光效果 */}
+                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl
+                                  bg-[var(--accent)]/10 border border-[var(--accent)]/20
+                                  shadow-[0_0_30px_rgba(77,184,164,0.12)]">
+                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="var(--accent)" />
+                      <circle cx="23" cy="12" r="3.5" stroke="var(--accent)" strokeWidth="1.8" fill="none" />
+                      <path d="M23 15.5v5" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" />
+                      <circle cx="23" cy="22.5" r="1" fill="var(--accent)" />
+                    </svg>
+                  </div>
+                  <h2 className="text-xl font-semibold text-[var(--text-primary)]">
                     欢迎使用 EPEEKit
                   </h2>
-                  <p className="text-sm text-[var(--text-secondary)] max-w-md">
+                  <p className="text-sm text-[var(--text-secondary)] max-w-md leading-relaxed">
                     描述你想要的美术资源，我来帮你生成。
                     <br />
                     你可以上传参考图来引导风格方向。
                   </p>
-                  <div className="flex flex-wrap justify-center gap-2 mt-4">
+                  <div className="flex flex-wrap justify-center gap-2 mt-5">
                     {[
                       "画一个赛博朋克风格的退出按钮",
                       "设计一个卡通风格的金币图标",
@@ -328,11 +387,12 @@ export default function Home() {
                     ].map((hint) => (
                       <button
                         key={hint}
-                        onClick={() => handleSend(hint, null, null)}
-                        className="text-xs px-3 py-1.5 rounded-full
+                        onClick={() => handleSend(hint, [], null)}
+                        className="text-xs px-4 py-2 rounded-xl
                                    border border-[var(--border)] text-[var(--text-secondary)]
-                                   hover:border-[var(--accent)] hover:text-[var(--accent)]
-                                   transition-colors cursor-pointer"
+                                   hover:border-[var(--accent)]/50 hover:text-[var(--accent)]
+                                   hover:bg-[var(--accent)]/5
+                                   transition-all cursor-pointer"
                       >
                         {hint}
                       </button>
@@ -355,10 +415,10 @@ export default function Home() {
             <button
               onClick={() => scrollToBottom()}
               className="absolute bottom-16 right-4 z-10
-                         w-8 h-8 rounded-full flex items-center justify-center
-                         bg-[var(--bg-tertiary)] border border-[var(--border)]
-                         text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                         hover:border-[var(--accent)] shadow-lg
+                         w-9 h-9 rounded-xl flex items-center justify-center
+                         glass-panel text-[var(--text-secondary)]
+                         hover:text-[var(--accent)] hover:border-[var(--accent)]/40
+                         shadow-lg shadow-black/30
                          transition-all duration-200 cursor-pointer
                          animate-[fadeIn_150ms_ease-out]"
               title="回到底部"
@@ -369,7 +429,21 @@ export default function Home() {
             </button>
           )}
 
-          <ChatInput onSend={handleSend} disabled={isLoading} />
+          <ChatInput
+            ref={chatInputRef}
+            onSend={handleSend}
+            disabled={isLoading}
+            lastRefServerUrls={lastRefImageUrls}
+            lastRefPreviewUrls={lastRefImageUrls.map((u) => getImageUrl(u))}
+            onClearLastRefImage={() => {
+              if (activeSessionId) lastRefPerSession.current.delete(activeSessionId);
+              setLastRefImageUrls([]);
+            }}
+            onFileDrop={() => {
+              dragCounter.current = 0;
+              setMainDragging(false);
+            }}
+          />
         </main>
 
         {detailImage && (

art-agent/frontend/src/components/chat/chat-input.tsx

@@ -1,52 +1,77 @@
 "use client";
 
-import { useRef, useState, useCallback, type KeyboardEvent, type DragEvent } from "react";
+import { useRef, useState, useCallback, useImperativeHandle, forwardRef, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ModelSelector } from "./model-selector";
 import { uploadRefImage, type UploadProgress } from "@/lib/api";
 
 type UploadStatus = "idle" | "uploading" | "done" | "error";
 
-interface UploadState {
+interface UploadItem {
+  id: string;
   status: UploadStatus;
-  /** 本地预览 URL */
   previewUrl: string | null;
-  /** 上传成功后的服务端路径 */
   serverUrl: string | null;
-  /** 上传进度 0-100 */
   progress: number;
-  /** 错误信息 */
   errorMsg: string | null;
 }
 
-const INITIAL_UPLOAD: UploadState = {
-  status: "idle",
-  previewUrl: null,
-  serverUrl: null,
-  progress: 0,
-  errorMsg: null,
-};
-
 interface ChatInputProps {
-  onSend: (text: string, refImageServerUrl: string | null, imageModel: string | null) => void;
+  onSend: (text: string, refImageServerUrls: string[], imageModel: string | null) => void;
   disabled: boolean;
+  /** 上次使用的参考图服务端路径列表，用于自动沿用 */
+  lastRefServerUrls?: string[];
+  /** 上次参考图的完整可预览 URL 列表 */
+  lastRefPreviewUrls?: string[];
+  /** 用户主动清除沿用参考图时的回调 */
+  onClearLastRefImage?: () => void;
+  /** 文件在 ChatInput 区域内被 drop 时触发，通知父组件清除拖拽覆盖层 */
+  onFileDrop?: () => void;
 }
 
-export function ChatInput({ onSend, disabled }: ChatInputProps) {
+export interface ChatInputHandle {
+  uploadFile: (file: File) => void;
+}
+
+let _uploadCounter = 0;
+
+/** 从剪贴板提取可上传的图片文件（Ctrl+V / 右键粘贴共用） */
+function imageFilesFromClipboard(data: DataTransfer | null): File[] {
+  if (!data?.items?.length) return [];
+  const out: File[] = [];
+  for (let i = 0; i < data.items.length; i++) {
+    const it = data.items[i];
+    if (it.kind === "file" && it.type.startsWith("image/")) {
+      const f = it.getAsFile();
+      if (f) out.push(f);
+    }
+  }
+  return out;
+}
+
+export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(function ChatInput(
+  { onSend, disabled, lastRefServerUrls, lastRefPreviewUrls, onClearLastRefImage, onFileDrop },
+  ref
+) {
   const [text, setText] = useState("");
-  const [upload, setUpload] = useState<UploadState>(INITIAL_UPLOAD);
+  const [uploads, setUploads] = useState<UploadItem[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const [selectedModel, setSelectedModel] = useState<string>("");
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
+  const abortRefs = useRef<Map<string, AbortController>>(new Map());
+
+  const hasActiveUpload = uploads.some((u) => u.status === "uploading");
+  const allDone = uploads.length > 0 && uploads.every((u) => u.status === "done" || u.status === "error");
+  const doneUrls = uploads.filter((u) => u.status === "done" && u.serverUrl).map((u) => u.serverUrl!);
 
   const handleSubmit = () => {
     const trimmed = text.trim();
     if (!trimmed || disabled) return;
-    if (upload.status === "uploading") return;
+    if (hasActiveUpload) return;
 
-    onSend(trimmed, upload.serverUrl, selectedModel || null);
+    const refUrls = doneUrls.length > 0 ? doneUrls : (lastRefServerUrls ?? []);
+    onSend(trimmed, refUrls, selectedModel || null);
     setText("");
-    clearUpload();
+    clearAllUploads();
   };
 
   const handleKeyDown = (e: KeyboardEvent) => {
@@ -56,247 +81,263 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
     }
   };
 
-  const clearUpload = useCallback(() => {
-    abortRef.current?.abort();
-    abortRef.current = null;
-    setUpload((prev) => {
-      if (prev.previewUrl) URL.revokeObjectURL(prev.previewUrl);
-      return INITIAL_UPLOAD;
+  const clearAllUploads = useCallback(() => {
+    abortRefs.current.forEach((c) => c.abort());
+    abortRefs.current.clear();
+    setUploads((prev) => {
+      prev.forEach((u) => { if (u.previewUrl) URL.revokeObjectURL(u.previewUrl); });
+      return [];
     });
     if (fileInputRef.current) fileInputRef.current.value = "";
   }, []);
 
+  const removeUpload = useCallback((id: string) => {
+    abortRefs.current.get(id)?.abort();
+    abortRefs.current.delete(id);
+    setUploads((prev) => {
+      const item = prev.find((u) => u.id === id);
+      if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
+      return prev.filter((u) => u.id !== id);
+    });
+  }, []);
+
   const startUpload = useCallback(async (file: File) => {
-    abortRef.current?.abort();
+    const id = `upload-${++_uploadCounter}`;
     const controller = new AbortController();
-    abortRef.current = controller;
+    abortRefs.current.set(id, controller);
 
     const previewUrl = URL.createObjectURL(file);
-    setUpload({
+    const newItem: UploadItem = {
+      id,
       status: "uploading",
       previewUrl,
       serverUrl: null,
       progress: 0,
       errorMsg: null,
-    });
+    };
+    setUploads((prev) => [...prev, newItem]);
 
     try {
       const result = await uploadRefImage(
         file,
         (p: UploadProgress) => {
-          setUpload((prev) => ({ ...prev, progress: p.percent }));
+          setUploads((prev) =>
+            prev.map((u) => (u.id === id ? { ...u, progress: p.percent } : u))
+          );
         },
         controller.signal
       );
-      setUpload((prev) => ({
-        ...prev,
-        status: "done",
-        serverUrl: result.url,
-        progress: 100,
-      }));
+      setUploads((prev) =>
+        prev.map((u) =>
+          u.id === id ? { ...u, status: "done", serverUrl: result.url, progress: 100 } : u
+        )
+      );
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;
       const msg = err instanceof Error ? err.message : "上传失败";
-      setUpload((prev) => ({
-        ...prev,
-        status: "error",
-        progress: 0,
-        errorMsg: msg,
-      }));
+      setUploads((prev) =>
+        prev.map((u) =>
+          u.id === id ? { ...u, status: "error", progress: 0, errorMsg: msg } : u
+        )
+      );
     }
   }, []);
 
+  useImperativeHandle(ref, () => ({ uploadFile: startUpload }), [startUpload]);
+
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (file) {
-      startUpload(file);
+    const files = e.target.files;
+    if (files) {
+      Array.from(files).forEach((f) => startUpload(f));
     }
-    // 重置 input value，确保选同一文件也能触发
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
 
-  const retryUpload = useCallback(() => {
-    if (fileInputRef.current) fileInputRef.current.click();
-  }, []);
-
-  // 拖拽
   const handleDragOver = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsDragging(true);
   };
   const handleDragLeave = () => setIsDragging(false);
   const handleDrop = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith("image/")) {
-      startUpload(file);
-    }
+    onFileDrop?.();
+    const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+    files.forEach((f) => startUpload(f));
   };
 
-  const statusLabel = (() => {
-    switch (upload.status) {
-      case "uploading":
-        return `上传中 ${upload.progress}%`;
-      case "done":
-        return "参考图已就绪";
-      case "error":
-        return upload.errorMsg || "上传失败";
-      default:
-        return null;
-    }
-  })();
-
-  const statusColor = (() => {
-    switch (upload.status) {
-      case "uploading":
-        return "text-[var(--accent)]";
-      case "done":
-        return "text-green-400";
-      case "error":
-        return "text-red-400";
-      default:
-        return "";
-    }
-  })();
+  const handlePasteCapture = useCallback(
+    (e: ClipboardEvent) => {
+      if (disabled) return;
+      const files = imageFilesFromClipboard(e.clipboardData);
+      if (files.length === 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      files.forEach((f) => startUpload(f));
+    },
+    [disabled, startUpload]
+  );
 
   return (
     <div
-      className={`border-t border-[var(--border)] bg-[var(--bg-secondary)] px-3 md:px-4 py-2 md:py-3 transition-colors ${
-        isDragging ? "bg-[var(--accent)]/5 border-[var(--accent)]" : ""
+      className={`border-t border-[var(--border)] bg-[var(--bg-secondary)]/80 backdrop-blur-xl
+                   px-3 md:px-5 py-2.5 md:py-3 transition-colors ${
+        isDragging ? "bg-[var(--accent)]/5 border-[var(--accent)]/40" : ""
       }`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
+      onPasteCapture={handlePasteCapture}
     >
-      {/* 拖拽提示 */}
       {isDragging && (
         <div className="mb-2 text-center text-xs text-[var(--accent)]">
-          松开以添加参考图
+          松开以添加参考图（可多张）
         </div>
       )}
 
-      {/* 参考图上传状态区 */}
-      {upload.status !== "idle" && (
-        <div className="mb-3 flex items-start gap-2">
-          <div className="relative flex-shrink-0">
-            {upload.previewUrl && (
+      {/* 沿用上次参考图提示 */}
+      {uploads.length === 0 && lastRefPreviewUrls && lastRefPreviewUrls.length > 0 && (
+        <div className="mb-3 flex items-center gap-2.5">
+          <div className="flex gap-1.5">
+            {lastRefPreviewUrls.map((url, i) => (
               <img
-                src={upload.previewUrl}
-                alt="参考图"
-                className={`w-16 h-16 rounded-lg object-cover border border-[var(--border)] transition-opacity ${
-                  upload.status === "uploading" ? "opacity-60" : ""
-                }`}
+                key={i}
+                src={url}
+                alt={`沿用参考图 ${i + 1}`}
+                className="w-10 h-10 rounded-lg object-cover border border-[var(--accent)]/30
+                           shadow-[0_0_8px_rgba(77,184,164,0.1)]"
               />
-            )}
-            {/* 上传中的遮罩进度环 */}
-            {upload.status === "uploading" && (
-              <div className="absolute inset-0 flex items-center justify-center">
-                <svg className="w-8 h-8 -rotate-90" viewBox="0 0 36 36">
-                  <circle
-                    cx="18" cy="18" r="14"
-                    fill="none"
-                    stroke="rgba(255,255,255,0.2)"
-                    strokeWidth="3"
-                  />
-                  <circle
-                    cx="18" cy="18" r="14"
-                    fill="none"
-                    stroke="var(--accent)"
-                    strokeWidth="3"
-                    strokeLinecap="round"
-                    strokeDasharray={`${upload.progress * 0.88} 88`}
-                    className="transition-all duration-200"
-                  />
-                </svg>
-              </div>
-            )}
-            {/* 成功 ✓ 角标 */}
-            {upload.status === "done" && (
-              <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-green-500
-                              text-white text-[10px] flex items-center justify-center font-bold">
-                ✓
-              </div>
-            )}
-            {/* 失败 ! 角标 */}
-            {upload.status === "error" && (
-              <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-red-500
-                              text-white text-[10px] flex items-center justify-center font-bold">
-                !
-              </div>
-            )}
-            {/* 删除按钮（非上传中时显示） */}
-            {upload.status !== "uploading" && (
-              <button
-                onClick={clearUpload}
-                className="absolute -top-1.5 -left-1.5 w-5 h-5 rounded-full
-                           bg-[var(--bg-secondary)] border border-[var(--border)]
-                           text-[var(--text-secondary)] text-xs flex items-center justify-center
-                           hover:bg-red-500 hover:text-white hover:border-red-500
-                           cursor-pointer transition-colors"
-              >
-                ×
-              </button>
-            )}
+            ))}
           </div>
+          <span className="text-xs text-[var(--text-secondary)]">
+            沿用上次参考图（{lastRefPreviewUrls.length} 张）
+          </span>
+          <button
+            onClick={onClearLastRefImage}
+            className="ml-auto text-xs text-[var(--text-secondary)] hover:text-[var(--hot)]
+                       cursor-pointer transition-colors"
+            title="清除参考图"
+          >
+            ✕ 清除
+          </button>
+        </div>
+      )}
 
-          <div className="flex flex-col gap-1 mt-0.5 min-w-0">
-            <span className={`text-xs ${statusColor} flex items-center gap-1.5`}>
-              {upload.status === "uploading" && (
-                <span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse" />
-              )}
-              {statusLabel}
-            </span>
-            {/* 进度条 */}
-            {upload.status === "uploading" && (
-              <div className="w-32 h-1 rounded-full bg-[var(--bg-tertiary)] overflow-hidden">
-                <div
-                  className="h-full bg-[var(--accent)] rounded-full transition-all duration-200"
-                  style={{ width: `${upload.progress}%` }}
+      {/* 参考图上传状态区（多图） */}
+      {uploads.length > 0 && (
+        <div className="mb-3 flex flex-wrap gap-2">
+          {uploads.map((item) => (
+            <div key={item.id} className="relative flex-shrink-0">
+              {item.previewUrl && (
+                <img
+                  src={item.previewUrl}
+                  alt="参考图"
+                  className={`w-16 h-16 rounded-xl object-cover border border-[var(--border)] transition-opacity ${
+                    item.status === "uploading" ? "opacity-60" : ""
+                  }`}
                 />
-              </div>
+              )}
+              {item.status === "uploading" && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <svg className="w-8 h-8 -rotate-90" viewBox="0 0 36 36">
+                    <circle cx="18" cy="18" r="14" fill="none" stroke="rgba(77,184,164,0.12)" strokeWidth="3" />
+                    <circle
+                      cx="18" cy="18" r="14" fill="none"
+                      stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"
+                      strokeDasharray={`${item.progress * 0.88} 88`}
+                      className="transition-all duration-200"
+                    />
+                  </svg>
+                </div>
+              )}
+              {item.status === "done" && (
+                <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[var(--accent)]
+                                text-[var(--bg-primary)] text-[10px] flex items-center justify-center font-bold
+                                shadow-[0_0_8px_rgba(77,184,164,0.3)]">
+                  ✓
+                </div>
+              )}
+              {item.status === "error" && (
+                <div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[var(--hot)]
+                                text-white text-[10px] flex items-center justify-center font-bold">
+                  !
+                </div>
+              )}
+              {item.status !== "uploading" && (
+                <button
+                  onClick={() => removeUpload(item.id)}
+                  className="absolute -top-1.5 -left-1.5 w-5 h-5 rounded-full
+                             bg-[var(--bg-secondary)] border border-[var(--border)]
+                             text-[var(--text-secondary)] text-xs flex items-center justify-center
+                             hover:bg-[var(--hot)] hover:text-white hover:border-[var(--hot)]
+                             cursor-pointer transition-colors"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          ))}
+          {/* 汇总状态 */}
+          <div className="flex flex-col justify-center gap-1 min-w-0">
+            {hasActiveUpload && (
+              <span className="text-xs text-[var(--accent)] flex items-center gap-1.5">
+                <span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse
+                                 shadow-[0_0_6px_rgba(77,184,164,0.3)]" />
+                上传中...
+              </span>
             )}
-            {/* 失败时显示重试 */}
-            {upload.status === "error" && (
-              <button
-                onClick={retryUpload}
-                className="text-xs text-[var(--accent)] hover:underline cursor-pointer w-fit"
-              >
-                重新选择
-              </button>
+            {allDone && (
+              <span className="text-xs text-[var(--accent)]">
+                {doneUrls.length} 张参考图已就绪
+              </span>
+            )}
+            {uploads.some((u) => u.status === "error") && (
+              <span className="text-xs text-[var(--hot)]">
+                {uploads.filter((u) => u.status === "error").length} 张上传失败
+              </span>
             )}
           </div>
         </div>
       )}
 
       <div className="flex items-end gap-2">
-        {/* 模型选择器 */}
         <ModelSelector value={selectedModel} onChange={setSelectedModel} />
+
         {/* 上传参考图按钮 */}
         <button
           onClick={() => fileInputRef.current?.click()}
-          disabled={disabled || upload.status === "uploading"}
-          className={`flex-shrink-0 w-10 h-10 rounded-lg border
+          disabled={disabled || hasActiveUpload}
+          className={`relative flex-shrink-0 w-10 h-10 rounded-xl border
                      bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                     hover:text-[var(--text-primary)] hover:border-[var(--accent)]
-                     flex items-center justify-center transition-colors
+                     hover:text-[var(--accent)] hover:border-[var(--accent)]/40
+                     hover:bg-[var(--accent)]/5
+                     flex items-center justify-center transition-all
                      disabled:opacity-50 cursor-pointer ${
-                       upload.status === "done"
-                         ? "border-green-500/50 text-green-400"
+                       doneUrls.length > 0
+                         ? "border-[var(--accent)]/40 text-[var(--accent)]"
                          : "border-[var(--border)]"
                      }`}
-          title="上传参考图"
+          title="上传参考图（可多选）"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
             <circle cx="8.5" cy="8.5" r="1.5" />
             <polyline points="21 15 16 10 5 21" />
           </svg>
+          {doneUrls.length > 0 && (
+            <span className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[var(--accent)]
+                             text-[var(--bg-primary)] text-[9px] flex items-center justify-center font-bold">
+              {doneUrls.length}
+            </span>
+          )}
         </button>
         <input
           ref={fileInputRef}
           type="file"
           accept="image/*"
+          multiple
           onChange={handleFileChange}
           className="hidden"
         />
@@ -306,15 +347,17 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
           value={text}
           onChange={(e) => setText(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder="描述你想要的美术资源..."
+          placeholder="描述你想要的美术资源...（可粘贴图片）"
+          title="支持 Ctrl+V / 右键粘贴剪贴板图片为参考图"
           disabled={disabled}
           rows={1}
-          className="flex-1 resize-none rounded-lg border border-[var(--border)]
+          className="flex-1 resize-none rounded-xl border border-[var(--border)]
                      bg-[var(--bg-tertiary)] text-[var(--text-primary)]
                      placeholder:text-[var(--text-secondary)]
                      px-4 py-2.5 text-sm leading-relaxed
-                     focus:outline-none focus:border-[var(--accent)]
-                     disabled:opacity-50 transition-colors
+                     focus:outline-none focus:border-[var(--accent)]/50
+                     focus:shadow-[0_0_10px_rgba(77,184,164,0.06)]
+                     disabled:opacity-50 transition-all
                      min-h-[42px] max-h-[120px]"
           style={{ fieldSizing: "content" } as React.CSSProperties}
         />
@@ -322,11 +365,12 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
         {/* 发送按钮 */}
         <button
           onClick={handleSubmit}
-          disabled={disabled || !text.trim() || upload.status === "uploading"}
-          className="flex-shrink-0 w-10 h-10 rounded-lg
-                     bg-[var(--accent)] text-white
+          disabled={disabled || !text.trim() || hasActiveUpload}
+          className="flex-shrink-0 w-10 h-10 rounded-xl
+                     bg-[var(--accent)] text-[var(--bg-primary)]
                      hover:bg-[var(--accent-hover)]
-                     flex items-center justify-center transition-colors
+                     hover:shadow-[0_0_15px_rgba(77,184,164,0.25)]
+                     flex items-center justify-center transition-all
                      disabled:opacity-50 cursor-pointer"
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
@@ -336,4 +380,4 @@ export function ChatInput({ onSend, disabled }: ChatInputProps) {
       </div>
     </div>
   );
-}
+});

art-agent/frontend/src/components/chat/chat-messages.tsx

@@ -13,19 +13,19 @@ function CopyButton({ text }: { text: string }) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
-      // fallback 不做处理
+      // fallback
     }
   }, [text]);
 
   return (
     <button
       onClick={handleCopy}
-      className="p-1 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                 hover:bg-[var(--bg-secondary)] transition-colors cursor-pointer"
+      className="p-1 rounded-md text-[var(--text-secondary)] hover:text-[var(--accent)]
+                 hover:bg-[var(--accent)]/5 transition-colors cursor-pointer"
       title="复制文本"
     >
       {copied ? (
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
           <polyline points="20 6 9 17 4 12" />
         </svg>
       ) : (
@@ -54,25 +54,52 @@ export function ChatMessages({
   statusText,
 }: ChatMessagesProps) {
   return (
-    <div className="flex-1 overflow-y-auto px-3 md:px-4 py-4 md:py-6 space-y-4 md:space-y-6">
+    <div className="flex-1 overflow-y-auto px-3 md:px-5 py-4 md:py-6 space-y-4 md:space-y-5">
       {messages.map((msg) => (
-        <div key={msg.id} className={`group/msg flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+        <div
+          key={msg.id}
+          className={`group/msg flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+          style={{ animation: "slideUp 200ms ease-out" }}
+        >
           <div className="flex flex-col items-start gap-0.5">
             <div
-              className={`max-w-[90vw] md:max-w-[80vw] rounded-2xl px-3.5 md:px-4 py-2.5 md:py-3 ${
+              className={`max-w-[90vw] md:max-w-[80vw] rounded-2xl px-4 md:px-5 py-3 ${
                 msg.role === "user"
-                  ? "bg-[var(--accent)] text-white"
-                  : "bg-[var(--bg-tertiary)] text-[var(--text-primary)]"
+                  ? "bg-[var(--accent)]/15 text-[var(--text-primary)] border border-[var(--accent)]/25"
+                  : "glass-panel text-[var(--text-primary)]"
               }`}
             >
-              {msg.refImageUrl && (
+              {/* 多图参考（新格式） */}
+              {msg.refImageUrls && msg.refImageUrls.length > 0 && (
+                <div className="mb-2">
+                  <div className="flex flex-wrap gap-1.5">
+                    {msg.refImageUrls.map((url, i) => (
+                      <img
+                        key={i}
+                        src={url}
+                        alt={`参考图 ${i + 1}`}
+                        className="max-w-[120px] max-h-[90px] rounded-lg object-cover
+                                   border border-[var(--accent)]/20
+                                   shadow-[0_0_10px_rgba(77,184,164,0.08)]"
+                      />
+                    ))}
+                  </div>
+                  <span className="text-[10px] text-[var(--accent)]/60 mt-1 block">
+                    参考图（{msg.refImageUrls.length} 张）
+                  </span>
+                </div>
+              )}
+              {/* 兼容旧数据：单图 */}
+              {!msg.refImageUrls && msg.refImageUrl && (
                 <div className="mb-2">
                   <img
                     src={msg.refImageUrl}
                     alt="参考图"
-                    className="max-w-[160px] max-h-[120px] rounded-lg object-cover border border-white/20"
+                    className="max-w-[160px] max-h-[120px] rounded-lg object-cover
+                               border border-[var(--accent)]/20
+                               shadow-[0_0_10px_rgba(77,184,164,0.08)]"
                   />
-                  <span className="text-[10px] opacity-70 mt-1 block">参考图</span>
+                  <span className="text-[10px] text-[var(--accent)]/60 mt-1 block">参考图</span>
                 </div>
               )}
               <div className="whitespace-pre-wrap text-sm leading-relaxed">{msg.content}</div>
@@ -80,7 +107,7 @@ export function ChatMessages({
                 <>
                   <ImageGrid images={msg.images} />
                   {msg.modelName && (
-                    <div className="mt-1.5 text-[10px] text-[var(--text-secondary)] opacity-70">
+                    <div className="mt-1.5 text-[10px] text-[var(--accent)]/50">
                       由 {msg.modelName} 生成
                     </div>
                   )}
@@ -98,11 +125,12 @@ export function ChatMessages({
       ))}
 
       {isLoading && (
-        <div className="flex justify-start">
-          <div className="max-w-[90%] md:max-w-[80%] rounded-2xl px-3.5 md:px-4 py-2.5 md:py-3 bg-[var(--bg-tertiary)]">
+        <div className="flex justify-start" style={{ animation: "slideUp 200ms ease-out" }}>
+          <div className="max-w-[90%] md:max-w-[80%] rounded-2xl px-4 md:px-5 py-3 glass-panel">
             {statusText && (
               <div className="text-xs text-[var(--accent)] mb-2 flex items-center gap-2">
-                <span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse" />
+                <span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse
+                                 shadow-[0_0_8px_rgba(77,184,164,0.4)]" />
                 {statusText}
               </div>
             )}
@@ -111,10 +139,10 @@ export function ChatMessages({
             )}
             {streamingImages.length > 0 && <ImageGrid images={streamingImages} />}
             {!streamingText && !statusText && (
-              <div className="flex gap-1">
-                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce" />
-                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce [animation-delay:0.1s]" />
-                <span className="w-2 h-2 rounded-full bg-[var(--text-secondary)] animate-bounce [animation-delay:0.2s]" />
+              <div className="flex gap-1.5">
+                <span className="w-2 h-2 rounded-full bg-[var(--accent)]/60 animate-bounce" />
+                <span className="w-2 h-2 rounded-full bg-[var(--accent)]/60 animate-bounce [animation-delay:0.1s]" />
+                <span className="w-2 h-2 rounded-full bg-[var(--accent)]/60 animate-bounce [animation-delay:0.2s]" />
               </div>
             )}
           </div>

art-agent/frontend/src/components/chat/image-grid.tsx

@@ -35,30 +35,34 @@ export function ImageGrid({ images }: ImageGridProps) {
       : "grid-cols-2 max-w-[320px] md:max-w-xl";
 
   return (
-    <div className={`grid ${gridCols} gap-2 my-3`}>
+    <div className={`grid ${gridCols} gap-3 my-3`}>
       {images.map((asset, i) => (
         <div
           key={asset.id}
-          className="group relative rounded-lg overflow-hidden border border-[var(--border)]"
+          className="group relative rounded-xl overflow-hidden neon-border
+                     bg-[var(--bg-card)] backdrop-blur-sm"
         >
           <img
             src={getImageUrl(asset.url)}
             alt={`生成图片 ${i + 1}`}
-            className="w-full aspect-square object-cover cursor-pointer"
+            className="w-full aspect-square object-cover cursor-pointer
+                       transition-transform duration-300 group-hover:scale-[1.03]"
             loading="lazy"
             onClick={() => setDetailImage(asset)}
           />
 
-          {/* 操作栏：移动端始终可见，桌面端 hover 显示 */}
+          {/* 底部渐变 + 操作栏 */}
           <div
-            className="absolute bottom-0 left-0 right-0 px-2 py-1.5
-                        bg-gradient-to-t from-black/80 to-transparent
-                        opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity
-                        flex items-center gap-1"
+            className="absolute bottom-0 left-0 right-0 px-3 py-2
+                        bg-gradient-to-t from-black/80 via-black/40 to-transparent
+                        opacity-100 md:opacity-0 md:group-hover:opacity-100
+                        transition-opacity duration-200
+                        flex items-center gap-1.5"
           >
             <button
               onClick={() => setDetailImage(asset)}
-              className="p-1 rounded text-white/80 hover:text-white cursor-pointer"
+              className="p-1.5 rounded-lg text-white/70 hover:text-[var(--accent)]
+                         hover:bg-[var(--accent)]/10 cursor-pointer transition-colors"
               title="放大查看"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -67,7 +71,8 @@ export function ImageGrid({ images }: ImageGridProps) {
             </button>
             <button
               onClick={() => handleDownload(asset.url, i)}
-              className="p-1 rounded text-white/80 hover:text-white cursor-pointer"
+              className="p-1.5 rounded-lg text-white/70 hover:text-[var(--accent)]
+                         hover:bg-[var(--accent)]/10 cursor-pointer transition-colors"
               title="保存"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -79,8 +84,9 @@ export function ImageGrid({ images }: ImageGridProps) {
                 e.stopPropagation();
                 toggleFavorite(asset.id);
               }}
-              className="p-1 rounded cursor-pointer transition-colors"
-              style={{ color: asset.favorited ? "#f59e0b" : "rgba(255,255,255,0.6)" }}
+              className="p-1.5 rounded-lg cursor-pointer transition-colors
+                         hover:bg-[var(--accent)]/10"
+              style={{ color: asset.favorited ? "var(--accent)" : "rgba(255,255,255,0.5)" }}
               title={asset.favorited ? "取消收藏" : "收藏"}
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill={asset.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
@@ -88,6 +94,17 @@ export function ImageGrid({ images }: ImageGridProps) {
               </svg>
             </button>
           </div>
+
+          {/* 最新生成标签 */}
+          {i === 0 && images.length > 1 && (
+            <div className="absolute top-2 left-2">
+              <span className="text-[10px] font-semibold px-2 py-0.5 rounded-md
+                               bg-[var(--accent)]/20 text-[var(--accent)]
+                               border border-[var(--accent)]/30 backdrop-blur-sm">
+                New
+              </span>
+            </div>
+          )}
         </div>
       ))}
     </div>

art-agent/frontend/src/components/chat/model-selector.tsx

@@ -33,14 +33,10 @@ export function ModelSelector({ value, onChange }: ModelSelectorProps) {
           onChange(defaultId);
         }
       })
-      .catch(() => {
-        // 后端不可用时静默降级
-      });
-    // 仅初始化时执行一次
+      .catch(() => {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // 点击外部关闭
   useEffect(() => {
     if (!open) return;
     const handler = (e: MouseEvent) => {
@@ -61,10 +57,11 @@ export function ModelSelector({ value, onChange }: ModelSelectorProps) {
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs
+        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl text-xs
                    border border-[var(--border)] bg-[var(--bg-tertiary)]
-                   text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                   hover:border-[var(--accent)] transition-colors cursor-pointer"
+                   text-[var(--text-secondary)] hover:text-[var(--accent)]
+                   hover:border-[var(--accent)]/40 hover:bg-[var(--accent)]/5
+                   transition-all cursor-pointer"
         title="切换生图模型"
       >
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -84,9 +81,8 @@ export function ModelSelector({ value, onChange }: ModelSelectorProps) {
 
       {open && (
         <div
-          className="absolute bottom-full left-0 mb-1.5 w-56 rounded-lg
-                      border border-[var(--border)] bg-[var(--bg-secondary)]
-                      shadow-lg overflow-hidden z-50"
+          className="absolute bottom-full left-0 mb-1.5 w-56 rounded-xl
+                      glass-panel shadow-xl shadow-black/40 overflow-hidden z-50"
         >
           {models.map((m) => {
             const isActive = m.id === value;
@@ -98,10 +94,10 @@ export function ModelSelector({ value, onChange }: ModelSelectorProps) {
                   localStorage.setItem(getModelStorageKey(), m.id);
                   setOpen(false);
                 }}
-                className={`w-full text-left px-3 py-2.5 flex flex-col gap-0.5
-                            transition-colors cursor-pointer
+                className={`w-full text-left px-3.5 py-2.5 flex flex-col gap-0.5
+                            transition-all cursor-pointer
                             ${isActive
-                              ? "bg-[var(--accent)]/10 text-[var(--accent)]"
+                              ? "bg-[var(--accent)]/8 text-[var(--accent)]"
                               : "text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
                             }`}
               >
@@ -109,7 +105,8 @@ export function ModelSelector({ value, onChange }: ModelSelectorProps) {
                   {m.name}
                   {m.supports_ref_image && (
                     <span className="text-[10px] px-1.5 py-0.5 rounded-full
-                                     bg-emerald-500/15 text-emerald-400 font-normal leading-none">
+                                     bg-[var(--accent)]/10 text-[var(--accent)] font-medium leading-none
+                                     border border-[var(--accent)]/20">
                       参考图
                     </span>
                   )}

art-agent/frontend/src/components/detail/image-detail-panel.tsx

@@ -54,7 +54,8 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
   if (showAnnotate) {
     return (
       <aside className="fixed inset-0 z-50 md:relative md:inset-auto md:z-auto
-                         md:w-[480px] flex-shrink-0 border-l border-[var(--border)] bg-[var(--bg-secondary)]
+                         md:w-[480px] flex-shrink-0 border-l border-[var(--border)]
+                         bg-[var(--bg-secondary)]/90 backdrop-blur-xl
                          flex flex-col overflow-hidden">
         <AnnotationCanvas
           imageUrl={getImageUrl(detailImage.url)}
@@ -67,15 +68,16 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
 
   return (
     <aside className="fixed inset-0 z-50 md:relative md:inset-auto md:z-auto
-                       md:w-[360px] flex-shrink-0 border-l border-[var(--border)] bg-[var(--bg-secondary)]
+                       md:w-[360px] flex-shrink-0 border-l border-[var(--border)]
+                       bg-[var(--bg-secondary)]/90 backdrop-blur-xl
                        flex flex-col overflow-hidden">
       {/* 头部 */}
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--border)]">
-        <span className="text-sm font-medium text-[var(--text-primary)]">图片详情</span>
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
+        <span className="text-sm font-semibold text-[var(--text-primary)]">图片详情</span>
         <button
           onClick={() => setDetailImage(null)}
-          className="text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                     cursor-pointer transition-colors"
+          className="text-[var(--text-secondary)] hover:text-[var(--accent)]
+                     cursor-pointer transition-colors p-1 rounded-lg hover:bg-[var(--accent)]/5"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <path d="M18 6L6 18M6 6l12 12" />
@@ -83,11 +85,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
         </button>
       </div>
 
-      {/* 内容滚动区 */}
       <div className="flex-1 overflow-y-auto">
         {/* 图片预览 */}
         <div className="p-4">
-          <div className="relative rounded-lg overflow-hidden border border-[var(--border)] bg-[var(--bg-primary)]">
+          <div className="relative rounded-xl overflow-hidden neon-border bg-[var(--bg-primary)]">
             <img
               src={getImageUrl(detailImage.url)}
               alt="预览"
@@ -97,28 +98,31 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
           </div>
 
           {/* 缩放控制 */}
-          <div className="flex items-center justify-center gap-2 mt-2">
+          <div className="flex items-center justify-center gap-2 mt-3">
             <button
               onClick={() => setScale((s) => Math.max(0.5, s - 0.25))}
-              className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                         hover:text-[var(--text-primary)] cursor-pointer"
+              className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
+                         hover:text-[var(--accent)] border border-[var(--border)]
+                         hover:border-[var(--accent)]/40 cursor-pointer transition-all"
             >
               −
             </button>
-            <span className="text-xs text-[var(--text-secondary)] min-w-[40px] text-center">
+            <span className="text-xs text-[var(--text-secondary)] min-w-[40px] text-center font-medium">
               {Math.round(scale * 100)}%
             </span>
             <button
               onClick={() => setScale((s) => Math.min(3, s + 0.25))}
-              className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                         hover:text-[var(--text-primary)] cursor-pointer"
+              className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
+                         hover:text-[var(--accent)] border border-[var(--border)]
+                         hover:border-[var(--accent)]/40 cursor-pointer transition-all"
             >
               +
             </button>
             <button
               onClick={() => setScale(1)}
-              className="text-xs px-2 py-0.5 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                         hover:text-[var(--text-primary)] cursor-pointer"
+              className="text-xs px-2.5 py-1 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
+                         hover:text-[var(--accent)] border border-[var(--border)]
+                         hover:border-[var(--accent)]/40 cursor-pointer transition-all"
             >
               重置
             </button>
@@ -129,10 +133,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
         <div className="px-4 pb-3 flex flex-wrap gap-2">
           <button
             onClick={handleDownload}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                       bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
-                       hover:text-[var(--text-primary)] border border-[var(--border)]
-                       hover:border-[var(--accent)] transition-colors cursor-pointer"
+            className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                       bg-[var(--accent)] text-[var(--bg-primary)]
+                       hover:bg-[var(--accent-hover)] hover:shadow-[0_0_12px_rgba(77,184,164,0.25)]
+                       transition-all cursor-pointer"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
@@ -141,13 +145,12 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
           </button>
           <button
             onClick={() => toggleFavorite(detailImage.id)}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                       border transition-colors cursor-pointer"
-            style={{
-              backgroundColor: detailImage.favorited ? "#f59e0b22" : "var(--bg-tertiary)",
-              borderColor: detailImage.favorited ? "#f59e0b" : "var(--border)",
-              color: detailImage.favorited ? "#f59e0b" : "var(--text-secondary)",
-            }}
+            className={`flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                       border transition-all cursor-pointer ${
+                         detailImage.favorited
+                           ? "border-[var(--accent)]/40 bg-[var(--accent)]/8 text-[var(--accent)]"
+                           : "border-[var(--border)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                       }`}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill={detailImage.favorited ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2">
               <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
@@ -156,10 +159,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
           </button>
           <button
             onClick={() => setShowAnnotate(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
+            className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
                        bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
                        hover:text-[var(--accent)] border border-[var(--border)]
-                       hover:border-[var(--accent)] transition-colors cursor-pointer"
+                       hover:border-[var(--accent)]/40 transition-all cursor-pointer"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" />
@@ -168,10 +171,10 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
           </button>
           <button
             onClick={() => deleteAssetById(detailImage.id)}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md
-                       bg-[var(--bg-tertiary)] text-red-400/70
-                       hover:text-red-400 border border-[var(--border)]
-                       hover:border-red-400/50 transition-colors cursor-pointer"
+            className="flex items-center gap-1.5 px-3.5 py-2 text-xs rounded-xl font-medium
+                       bg-[var(--bg-tertiary)] text-[var(--hot)]/60
+                       hover:text-[var(--hot)] border border-[var(--border)]
+                       hover:border-[var(--hot)]/40 transition-all cursor-pointer"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <polyline points="3 6 5 6 21 6" />
@@ -181,7 +184,7 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
           </button>
         </div>
 
-        {/* Prompt 信息 */}
+        {/* Prompt */}
         {detailImage.prompt && (
           <div className="px-4 pb-3">
             <div className="flex items-center justify-between mb-1.5">
@@ -194,7 +197,7 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
                 复制
               </button>
             </div>
-            <div className="p-2.5 rounded-md bg-[var(--bg-primary)] border border-[var(--border)]
+            <div className="p-3 rounded-xl bg-[var(--bg-primary)] border border-[var(--border)]
                             text-xs text-[var(--text-secondary)] leading-relaxed break-all">
               {detailImage.prompt}
             </div>
@@ -205,15 +208,15 @@ export function ImageDetailPanel({ onAnnotationComplete }: ImageDetailPanelProps
         {detailImage.tags.length > 0 && (
           <div className="px-4 pb-3">
             <span className="text-xs font-medium text-[var(--text-secondary)] block mb-1.5">标签</span>
-            <div className="flex flex-wrap gap-1">
+            <div className="flex flex-wrap gap-1.5">
               {detailImage.tags.map((tid) => {
                 const tag = tagMap.get(tid);
                 if (!tag) return null;
                 return (
                   <span
                     key={tid}
-                    className="text-[10px] px-2 py-0.5 rounded-full"
-                    style={{ backgroundColor: tag.color + "22", color: tag.color }}
+                    className="text-[10px] px-2 py-0.5 rounded-lg font-medium"
+                    style={{ backgroundColor: tag.color + "18", color: tag.color }}
                   >
                     {tag.name}
                   </span>

art-agent/frontend/src/components/layout/top-nav.tsx

@@ -5,10 +5,29 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useApp } from "@/lib/app-context";
 import { useAuth } from "@/lib/auth-context";
+import { ProfileModal } from "@/components/profile-modal";
 
 const NAV_ITEMS = [
-  { href: "/", label: "对话" },
-  { href: "/gallery", label: "资源库" },
+  {
+    href: "/",
+    label: "对话",
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+      </svg>
+    ),
+  },
+  {
+    href: "/gallery",
+    label: "资源库",
+    icon: (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+        <circle cx="8.5" cy="8.5" r="1.5" />
+        <polyline points="21 15 16 10 5 21" />
+      </svg>
+    ),
+  },
 ] as const;
 
 export function TopNav() {
@@ -16,6 +35,7 @@ export function TopNav() {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const { user, logout } = useAuth();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -30,12 +50,13 @@ export function TopNav() {
   }, [menuOpen]);
 
   return (
-    <header className="flex-shrink-0 h-12 border-b border-[var(--border)] bg-[var(--bg-secondary)] flex items-center px-3 md:px-4 gap-3 md:gap-6">
+  <>
+    <header className="relative z-10 flex-shrink-0 h-14 border-b border-[var(--border)] bg-[var(--bg-secondary)]/80 backdrop-blur-xl flex items-center px-4 md:px-5 gap-4 md:gap-6">
       {/* 移动端汉堡菜单 */}
       <button
         onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
         className="md:hidden flex-shrink-0 p-1.5 rounded-md
-                   text-[var(--text-secondary)] hover:text-[var(--text-primary)]
+                   text-[var(--text-secondary)] hover:text-[var(--accent)]
                    transition-colors cursor-pointer"
         title="菜单"
       >
@@ -45,33 +66,37 @@ export function TopNav() {
       </button>
 
       {/* Logo */}
-      <Link href="/" className="flex items-center gap-2 flex-shrink-0">
-        <svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect width="32" height="32" rx="7" fill="var(--accent)" />
-          <path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="white" />
-          <circle cx="23" cy="12" r="3.5" stroke="white" strokeWidth="1.8" fill="none" />
-          <path d="M23 15.5v5" stroke="white" strokeWidth="1.8" strokeLinecap="round" />
-          <circle cx="23" cy="22.5" r="1" fill="white" />
-        </svg>
+      <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 group">
+        <div className="w-8 h-8 rounded-lg bg-[var(--accent)] flex items-center justify-center
+                        shadow-[0_0_12px_rgba(77,184,164,0.25)]
+                        group-hover:shadow-[0_0_20px_rgba(77,184,164,0.4)] transition-shadow">
+          <svg width="18" height="18" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 22L12.5 10h2.2L19 22h-2.3l-1.1-3h-4.2l-1.1 3H8Zm3.7-5h3.1l-1.5-4.6h-.1L11.7 17Z" fill="#0C1210" />
+            <circle cx="23" cy="12" r="3.5" stroke="#0C1210" strokeWidth="1.8" fill="none" />
+            <path d="M23 15.5v5" stroke="#0C1210" strokeWidth="1.8" strokeLinecap="round" />
+            <circle cx="23" cy="22.5" r="1" fill="#0C1210" />
+          </svg>
+        </div>
         <span className="text-base font-bold tracking-tight text-[var(--text-primary)]">
           EPEEKit
         </span>
       </Link>
 
       {/* 导航 Tab */}
-      <nav className="flex items-center gap-1">
-        {NAV_ITEMS.map(({ href, label }) => {
+      <nav className="flex items-center gap-1.5">
+        {NAV_ITEMS.map(({ href, label, icon }) => {
           const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
           return (
             <Link
               key={href}
               href={href}
-              className={`px-2.5 md:px-3 py-1.5 text-sm rounded-md transition-colors ${
+              className={`relative flex items-center gap-1.5 px-3 md:px-4 py-2 text-sm rounded-lg ${
                 active
-                  ? "bg-[var(--bg-tertiary)] text-[var(--text-primary)] font-medium"
-                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                  ? "glow-border text-[var(--accent)] font-medium !bg-[var(--bg-secondary)]"
+                  : "text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-transparent hover:border-[var(--border-glow)] transition-all"
               }`}
             >
+              {icon}
               {label}
             </Link>
           );
@@ -85,29 +110,39 @@ export function TopNav() {
         <div className="relative" ref={menuRef}>
           <button
             onClick={() => setMenuOpen(!menuOpen)}
-            className="flex items-center gap-2 px-2 md:px-3 py-1.5 rounded-md text-sm
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm
                        text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                       hover:bg-[var(--bg-tertiary)] transition-colors cursor-pointer"
+                       hover:bg-[var(--bg-tertiary)] border border-transparent
+                       hover:border-[var(--border)] transition-all cursor-pointer"
           >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
-              <circle cx="12" cy="7" r="4" />
-            </svg>
+            <div className="w-7 h-7 rounded-full bg-[var(--accent)]/15 border border-[var(--accent)]/30
+                            flex items-center justify-center text-[var(--accent)] text-xs font-semibold">
+              {(user.display_name || user.username).charAt(0).toUpperCase()}
+            </div>
             <span className="hidden sm:inline max-w-[100px] truncate">
               {user.display_name || user.username}
             </span>
           </button>
           {menuOpen && (
-            <div className="absolute right-0 top-full mt-1 w-44 rounded-lg
-                            bg-[var(--bg-secondary)] border border-[var(--border)]
-                            shadow-xl py-1 z-50">
-              <div className="px-3 py-2 text-xs text-[var(--text-secondary)] border-b border-[var(--border)]">
-                {user.username}
-                {user.is_admin && <span className="ml-1 text-[var(--accent)]">(管理员)</span>}
-              </div>
+            <div className="absolute right-0 top-full mt-1.5 w-48 rounded-xl
+                            glass-panel shadow-xl shadow-black/30 py-1.5 z-50">
+              <button
+                onClick={() => { setMenuOpen(false); setProfileOpen(true); }}
+                className="w-full text-left px-3.5 py-2 text-xs text-[var(--text-secondary)]
+                           hover:text-[var(--accent)] hover:bg-[var(--bg-tertiary)]
+                           border-b border-[var(--border)] transition-colors cursor-pointer
+                           flex items-center gap-1.5"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+                <span>{user.username}</span>
+                {user.is_admin && <span className="text-[var(--accent)]">(管理员)</span>}
+              </button>
               <button
                 onClick={() => { setMenuOpen(false); logout(); }}
-                className="w-full text-left px-3 py-2 text-sm text-[var(--text-secondary)]
+                className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-secondary)]
                            hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]
                            transition-colors cursor-pointer"
               >
@@ -118,5 +153,8 @@ export function TopNav() {
         </div>
       )}
     </header>
+
+    {profileOpen && <ProfileModal onClose={() => setProfileOpen(false)} />}
+  </>
   );
 }

art-agent/frontend/src/components/profile-modal.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useAuth, type AuthUser } from "@/lib/auth-context";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+interface MemoryItem {
+  id: string;
+  memory: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+interface GroupedMemories {
+  label: string;
+  items: MemoryItem[];
+}
+
+function groupByTime(memories: MemoryItem[]): GroupedMemories[] {
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const weekAgo = new Date(todayStart.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  const today: MemoryItem[] = [];
+  const week: MemoryItem[] = [];
+  const older: MemoryItem[] = [];
+
+  for (const m of memories) {
+    const d = m.created_at ? new Date(m.created_at) : null;
+    if (!d || isNaN(d.getTime())) {
+      older.push(m);
+    } else if (d >= todayStart) {
+      today.push(m);
+    } else if (d >= weekAgo) {
+      week.push(m);
+    } else {
+      older.push(m);
+    }
+  }
+
+  const groups: GroupedMemories[] = [];
+  if (today.length > 0) groups.push({ label: "今天", items: today });
+  if (week.length > 0) groups.push({ label: "最近 7 天", items: week });
+  if (older.length > 0) groups.push({ label: "更早", items: older });
+  return groups;
+}
+
+function formatDate(dateStr?: string): string {
+  if (!dateStr) return "";
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return "";
+  const now = new Date();
+  const isThisYear = d.getFullYear() === now.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hour = String(d.getHours()).padStart(2, "0");
+  const min = String(d.getMinutes()).padStart(2, "0");
+  if (isThisYear) return `${month}-${day} ${hour}:${min}`;
+  return `${d.getFullYear()}-${month}-${day} ${hour}:${min}`;
+}
+
+export function ProfileModal({ onClose }: { onClose: () => void }) {
+  const { user, token } = useAuth();
+  const [memories, setMemories] = useState<MemoryItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMemories = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const resp = await fetch(`${API_URL}/api/memory/list`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = await resp.json();
+      setMemories(data.memories || []);
+      if (data.error) setError(data.error);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "加载记忆失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    fetchMemories();
+  }, [fetchMemories]);
+
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+
+  if (!user) return null;
+
+  const groups = groupByTime(memories);
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center"
+      onClick={onClose}
+    >
+      {/* 遮罩层 */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* 弹窗主体 */}
+      <div
+        className="relative w-[90vw] max-w-[560px] max-h-[80vh] rounded-2xl glass-panel
+                    shadow-[0_0_40px_rgba(77,184,164,0.1)] border-[var(--border-glow)]
+                    flex flex-col overflow-hidden"
+        style={{ animation: "slideUp 200ms ease-out" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 关闭按钮 */}
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 p-1.5 rounded-lg text-[var(--text-secondary)]
+                     hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]
+                     transition-colors cursor-pointer z-10"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+
+        {/* 用户信息区 */}
+        <div className="px-6 pt-6 pb-4 flex items-center gap-4 flex-shrink-0">
+          <div className="w-14 h-14 rounded-full bg-[var(--accent)]/15 border-2 border-[var(--accent)]/40
+                          flex items-center justify-center text-[var(--accent)] text-xl font-bold
+                          shadow-[0_0_20px_rgba(77,184,164,0.12)]">
+            {(user.display_name || user.username).charAt(0).toUpperCase()}
+          </div>
+          <div className="flex-1 min-w-0">
+            <h2 className="text-lg font-semibold text-[var(--text-primary)] truncate">
+              {user.display_name || user.username}
+            </h2>
+            <div className="flex items-center gap-2 mt-0.5">
+              <span className="text-sm text-[var(--text-secondary)]">@{user.username}</span>
+              {user.is_admin && (
+                <span className="text-xs px-1.5 py-0.5 rounded-md bg-[var(--accent)]/10
+                               text-[var(--accent)] border border-[var(--accent)]/30">
+                  管理员
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 分割线 */}
+        <div className="mx-6 h-px bg-[var(--border)]" />
+
+        {/* 记忆区标题 */}
+        <div className="px-6 pt-4 pb-2 flex items-center gap-2 flex-shrink-0">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2">
+            <path d="M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 01-2 2h-4a2 2 0 01-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z" />
+            <path d="M10 21h4" />
+          </svg>
+          <span className="text-sm font-medium text-[var(--text-primary)]">记忆系统</span>
+          {!loading && (
+            <span className="text-xs text-[var(--text-secondary)]">
+              {memories.length} 条记录
+            </span>
+          )}
+        </div>
+
+        {/* 记忆列表 */}
+        <div className="flex-1 overflow-y-auto px-6 pb-6 min-h-0">
+          {loading && (
+            <div className="flex items-center justify-center py-12">
+              <div className="w-5 h-5 border-2 border-[var(--accent)]/30 border-t-[var(--accent)]
+                              rounded-full animate-spin" />
+              <span className="ml-3 text-sm text-[var(--text-secondary)]">加载中...</span>
+            </div>
+          )}
+
+          {!loading && error && memories.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-sm text-[var(--hot)]">{error}</p>
+            </div>
+          )}
+
+          {!loading && !error && memories.length === 0 && (
+            <div className="text-center py-12">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)"
+                   strokeWidth="1.5" className="mx-auto mb-3 opacity-50">
+                <path d="M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 01-2 2h-4a2 2 0 01-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z" />
+                <path d="M10 21h4" />
+              </svg>
+              <p className="text-sm text-[var(--text-secondary)]">暂无记忆记录</p>
+              <p className="text-xs text-[var(--text-secondary)] mt-1 opacity-60">
+                与助手对话时，系统会自动记录关键信息
+              </p>
+            </div>
+          )}
+
+          {!loading && groups.map((group) => (
+            <div key={group.label} className="mb-4 last:mb-0">
+              <div className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider mb-2">
+                {group.label}
+              </div>
+              <div className="space-y-1.5">
+                {group.items.map((item) => (
+                  <div
+                    key={item.id}
+                    className="px-3 py-2.5 rounded-lg bg-[var(--bg-tertiary)]/50
+                               border border-[var(--border)] hover:border-[var(--border-glow)]
+                               transition-colors group"
+                  >
+                    <p className="text-sm text-[var(--text-primary)] leading-relaxed">
+                      {item.memory}
+                    </p>
+                    {item.created_at && (
+                      <p className="text-xs text-[var(--text-secondary)] mt-1 opacity-0
+                                    group-hover:opacity-60 transition-opacity">
+                        {formatDate(item.created_at)}
+                      </p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

art-agent/frontend/src/components/sidebar/session-list.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { useApp } from "@/lib/app-context";
-import { getImageUrl } from "@/lib/api";
+import { getImageUrl, fetchLlmModels } from "@/lib/api";
+import type { LlmModelInfo } from "@/lib/types";
 
 function timeAgo(ts: number): string {
   const diff = Date.now() - ts;
@@ -20,41 +21,68 @@ export function SessionList() {
   const {
     sessions, activeSessionId, tags, selectedTagIds,
     createSession, switchSession, deleteSession, renameSession,
+    updateSessionLlmModel,
   } = useApp();
 
-  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; sessionId: string } | null>(null);
+  const [menuSessionId, setMenuSessionId] = useState<string | null>(null);
+  const [showModelSub, setShowModelSub] = useState(false);
+  const [llmModels, setLlmModels] = useState<LlmModelInfo[]>([]);
+  const [defaultLlmModel, setDefaultLlmModel] = useState("");
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editTitle, setEditTitle] = useState("");
   const editRef = useRef<HTMLInputElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
-  // 标签过滤
   const filtered = selectedTagIds.length === 0
     ? sessions
     : sessions.filter((s) => selectedTagIds.some((tid) => s.tags.includes(tid)));
 
   const tagMap = new Map(tags.map((t) => [t.id, t]));
 
-  // 关闭右键菜单
   useEffect(() => {
-    const close = () => setContextMenu(null);
-    window.addEventListener("click", close);
-    return () => window.removeEventListener("click", close);
+    fetchLlmModels()
+      .then((data) => {
+        setLlmModels(data.models);
+        setDefaultLlmModel(data.default);
+      })
+      .catch(() => {});
   }, []);
 
-  // 编辑聚焦
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        closeMenu();
+      }
+    };
+    if (menuSessionId) {
+      window.addEventListener("mousedown", handler);
+      return () => window.removeEventListener("mousedown", handler);
+    }
+  }, [menuSessionId]);
+
   useEffect(() => {
     if (editingId) editRef.current?.focus();
   }, [editingId]);
 
-  const handleContextMenu = (e: React.MouseEvent, sessionId: string) => {
-    e.preventDefault();
-    setContextMenu({ x: e.clientX, y: e.clientY, sessionId });
+  const closeMenu = useCallback(() => {
+    setMenuSessionId(null);
+    setShowModelSub(false);
+  }, []);
+
+  const handleDots = (e: React.MouseEvent, sessionId: string) => {
+    e.stopPropagation();
+    if (menuSessionId === sessionId) {
+      closeMenu();
+      return;
+    }
+    setMenuSessionId(sessionId);
+    setShowModelSub(false);
   };
 
   const startRename = (id: string, currentTitle: string) => {
     setEditingId(id);
     setEditTitle(currentTitle);
-    setContextMenu(null);
+    closeMenu();
   };
 
   const commitRename = () => {
@@ -64,16 +92,26 @@ export function SessionList() {
     setEditingId(null);
   };
 
+  const handleSelectModel = (sessionId: string, modelId: string) => {
+    updateSessionLlmModel(sessionId, modelId);
+    closeMenu();
+  };
+
+  const menuSession = menuSessionId
+    ? sessions.find((s) => s.id === menuSessionId)
+    : null;
+
   return (
-    <div className="flex-1 overflow-y-auto">
+    <div className="flex-1 overflow-y-auto fog-scroll">
       {/* 新建按钮 */}
-      <div className="px-3 py-2">
+      <div className="px-3 py-3">
         <button
           onClick={() => createSession()}
-          className="w-full flex items-center justify-center gap-1.5 px-3 py-2
-                     text-sm rounded-lg border border-dashed border-[var(--border)]
-                     text-[var(--text-secondary)] hover:border-[var(--accent)]
-                     hover:text-[var(--accent)] transition-colors cursor-pointer"
+          className="w-full flex items-center justify-center gap-2 px-3 py-2.5
+                     text-sm rounded-xl border border-dashed border-[var(--accent)]/30
+                     text-[var(--accent)]/70 hover:border-[var(--accent)]
+                     hover:text-[var(--accent)] hover:bg-[var(--accent)]/5
+                     transition-all cursor-pointer"
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <path d="M12 5v14M5 12h14" />
@@ -83,114 +121,199 @@ export function SessionList() {
       </div>
 
       {/* 会话列表 */}
-      <div className="px-2 pb-2 space-y-0.5">
+      <div className="px-2 pb-2 space-y-1">
         {filtered.map((session) => (
-          <div
-            key={session.id}
-            onClick={() => switchSession(session.id)}
-            onContextMenu={(e) => handleContextMenu(e, session.id)}
-            className={`group relative flex items-start gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer
-                        transition-colors ${
-                          session.id === activeSessionId
-                            ? "bg-[var(--bg-tertiary)]"
-                            : "hover:bg-[var(--bg-tertiary)]/50"
-                        }`}
-          >
-            {/* 缩略图 */}
-            {session.thumbnail ? (
-              <img
-                src={getImageUrl(session.thumbnail)}
-                alt=""
-                className="w-9 h-9 rounded object-cover flex-shrink-0 border border-[var(--border)]"
-              />
-            ) : (
-              <div className="w-9 h-9 rounded bg-[var(--bg-primary)] border border-[var(--border)]
-                              flex items-center justify-center flex-shrink-0 text-[var(--text-secondary)] text-xs">
-                💬
-              </div>
-            )}
-
-            {/* 会话信息 */}
-            <div className="flex-1 min-w-0">
-              {editingId === session.id ? (
-                <input
-                  ref={editRef}
-                  value={editTitle}
-                  onChange={(e) => setEditTitle(e.target.value)}
-                  onBlur={commitRename}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") commitRename();
-                    if (e.key === "Escape") setEditingId(null);
-                  }}
-                  className="w-full text-sm bg-transparent border-b border-[var(--accent)]
-                             text-[var(--text-primary)] focus:outline-none"
+          <div key={session.id} className="relative">
+            <div
+              onClick={() => switchSession(session.id)}
+              className={`group relative flex items-start gap-3 px-3 py-2.5 rounded-xl cursor-pointer
+                          transition-all ${
+                            session.id === activeSessionId
+                              ? "glow-border !bg-[var(--bg-secondary)]"
+                              : "hover:bg-[var(--bg-tertiary)]/50 border border-transparent"
+                          }`}
+            >
+              {/* 缩略图 */}
+              {session.thumbnail ? (
+                <img
+                  src={getImageUrl(session.thumbnail)}
+                  alt=""
+                  className="w-10 h-10 rounded-lg object-cover flex-shrink-0 border border-[var(--border)]
+                            shadow-[0_0_8px_rgba(77,184,164,0.08)]"
                 />
               ) : (
-                <div className="text-sm text-[var(--text-primary)] truncate">
-                  {session.title}
+                <div className="w-10 h-10 rounded-lg bg-[var(--bg-primary)] border border-[var(--border)]
+                                flex items-center justify-center flex-shrink-0">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" strokeWidth="1.5">
+                    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                  </svg>
                 </div>
               )}
 
-              {/* 标签 + 时间 */}
-              <div className="flex items-center gap-1 mt-0.5 flex-wrap">
-                {session.tags.slice(0, 3).map((tid) => {
-                  const tag = tagMap.get(tid);
-                  if (!tag) return null;
-                  return (
-                    <span
-                      key={tid}
-                      className="text-[10px] px-1.5 py-px rounded-full"
-                      style={{ backgroundColor: tag.color + "22", color: tag.color }}
-                    >
-                      {tag.name}
+              {/* 会话信息 */}
+              <div className="flex-1 min-w-0">
+                {editingId === session.id ? (
+                  <input
+                    ref={editRef}
+                    value={editTitle}
+                    onChange={(e) => setEditTitle(e.target.value)}
+                    onBlur={commitRename}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") commitRename();
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                    className="w-full text-sm bg-transparent border-b border-[var(--accent)]
+                               text-[var(--text-primary)] focus:outline-none"
+                  />
+                ) : (
+                  <div className={`text-sm truncate pr-5 ${
+                    session.id === activeSessionId ? "text-[var(--text-primary)] font-medium" : "text-[var(--text-primary)]"
+                  }`}>
+                    {session.title}
+                  </div>
+                )}
+
+                {/* 标签 + 时间 */}
+                <div className="flex items-center gap-1 mt-1 flex-wrap">
+                  {session.tags.slice(0, 3).map((tid) => {
+                    const tag = tagMap.get(tid);
+                    if (!tag) return null;
+                    return (
+                      <span
+                        key={tid}
+                        className="text-[10px] px-1.5 py-px rounded-full font-medium"
+                        style={{ backgroundColor: tag.color + "22", color: tag.color }}
+                      >
+                        {tag.name}
+                      </span>
+                    );
+                  })}
+                  {session.llmModel && (
+                    <span className="text-[10px] px-1.5 py-px rounded-full font-medium
+                                     bg-[var(--accent)]/10 text-[var(--accent)]">
+                      {llmModels.find((m) => m.id === session.llmModel)?.name || session.llmModel}
                     </span>
-                  );
-                })}
-                <span className="text-[10px] text-[var(--text-secondary)] ml-auto flex-shrink-0">
-                  {timeAgo(session.updatedAt)}
-                </span>
+                  )}
+                  <span className="text-[10px] text-[var(--text-secondary)] ml-auto flex-shrink-0">
+                    {timeAgo(session.updatedAt)}
+                  </span>
+                </div>
               </div>
+
+              {/* 三点按钮 */}
+              <button
+                onClick={(e) => handleDots(e, session.id)}
+                className="absolute right-2 top-2.5 p-1 rounded-md
+                           text-[var(--text-secondary)] hover:text-[var(--text-primary)]
+                           hover:bg-[var(--bg-tertiary)]
+                           opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                  <circle cx="12" cy="5" r="2" />
+                  <circle cx="12" cy="12" r="2" />
+                  <circle cx="12" cy="19" r="2" />
+                </svg>
+              </button>
             </div>
+
+            {/* 下拉菜单：在会话项正下方展开 */}
+            {menuSessionId === session.id && menuSession && (
+              <div
+                ref={menuRef}
+                className="mx-1 mt-1 glass-panel rounded-xl shadow-xl shadow-black/30 py-1.5
+                           overflow-hidden z-10 relative"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {/* 模型选择（折叠/展开式） */}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setShowModelSub(!showModelSub);
+                  }}
+                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-primary)]
+                             hover:bg-[var(--bg-tertiary)] cursor-pointer transition-colors
+                             flex items-center justify-between"
+                >
+                  <span>对话模型</span>
+                  <svg
+                    width="12" height="12" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" strokeWidth="2"
+                    className={`transition-transform ${showModelSub ? "rotate-90" : ""}`}
+                  >
+                    <path d="M9 18l6-6-6-6" />
+                  </svg>
+                </button>
+
+                {showModelSub && (
+                  <div className="border-t border-[var(--border)] mx-2 mt-1 pt-1 max-h-[240px] overflow-y-auto">
+                    {llmModels.map((model) => {
+                      const isActive = menuSession.llmModel
+                        ? menuSession.llmModel === model.id
+                        : model.id === defaultLlmModel;
+                      return (
+                        <button
+                          key={model.id}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleSelectModel(menuSessionId!, model.id);
+                          }}
+                          className={`w-full text-left px-3 py-1.5 text-sm cursor-pointer transition-colors
+                                      rounded-lg flex items-center gap-2 ${
+                                        isActive
+                                          ? "text-[var(--accent)] bg-[var(--accent)]/5"
+                                          : "text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                                      }`}
+                        >
+                          <span className="w-4 flex-shrink-0 text-center">
+                            {isActive && (
+                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                                <polyline points="20 6 9 17 4 12" />
+                              </svg>
+                            )}
+                          </span>
+                          <div className="min-w-0">
+                            <div className="truncate">{model.name}</div>
+                            <div className="text-[10px] text-[var(--text-secondary)] truncate">{model.description}</div>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+
+                <div className="mx-2 my-1 border-t border-[var(--border)]" />
+
+                <button
+                  onClick={() => {
+                    if (menuSession) startRename(menuSession.id, menuSession.title);
+                  }}
+                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--text-primary)]
+                             hover:bg-[var(--bg-tertiary)] cursor-pointer transition-colors"
+                >
+                  重命名
+                </button>
+
+                <button
+                  onClick={() => {
+                    deleteSession(menuSessionId!);
+                    closeMenu();
+                  }}
+                  className="w-full text-left px-3.5 py-2 text-sm text-[var(--hot)]
+                             hover:bg-[var(--bg-tertiary)] cursor-pointer transition-colors"
+                >
+                  删除
+                </button>
+              </div>
+            )}
           </div>
         ))}
 
         {filtered.length === 0 && (
-          <div className="text-center text-xs text-[var(--text-secondary)] py-6">
+          <div className="text-center text-xs text-[var(--text-secondary)] py-8">
             没有匹配的对话
           </div>
         )}
       </div>
-
-      {/* 右键菜单 */}
-      {contextMenu && (
-        <div
-          className="fixed z-50 bg-[var(--bg-secondary)] border border-[var(--border)]
-                     rounded-lg shadow-xl py-1 min-w-[120px]"
-          style={{ left: contextMenu.x, top: contextMenu.y }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <button
-            onClick={() => {
-              const s = sessions.find((s) => s.id === contextMenu.sessionId);
-              if (s) startRename(s.id, s.title);
-            }}
-            className="w-full text-left px-3 py-1.5 text-sm text-[var(--text-primary)]
-                       hover:bg-[var(--bg-tertiary)] cursor-pointer"
-          >
-            重命名
-          </button>
-          <button
-            onClick={() => {
-              deleteSession(contextMenu.sessionId);
-              setContextMenu(null);
-            }}
-            className="w-full text-left px-3 py-1.5 text-sm text-red-400
-                       hover:bg-[var(--bg-tertiary)] cursor-pointer"
-          >
-            删除
-          </button>
-        </div>
-      )}
     </div>
   );
 }

art-agent/frontend/src/components/sidebar/sidebar.tsx

@@ -12,30 +12,37 @@ export function Sidebar() {
       {/* 移动端遮罩 */}
       {!sidebarCollapsed && (
         <div
-          className="fixed inset-0 z-30 bg-black/50 sidebar-overlay md:hidden"
+          className="fixed inset-0 z-30 bg-black/60 sidebar-overlay md:hidden"
           onClick={() => setSidebarCollapsed(true)}
         />
       )}
 
       <aside
         className={`
-          /* 移动端：固定定位抽屉 */
           fixed inset-y-0 left-0 z-40 w-[280px]
           md:relative md:inset-auto md:z-auto
-          flex-shrink-0 border-r border-[var(--border)] bg-[var(--bg-secondary)]
-          flex flex-col transition-transform duration-200
+          flex-shrink-0 border-r border-[var(--border)]
+          bg-[var(--bg-secondary)]/80 backdrop-blur-xl
+          flex flex-col transition-transform duration-250 ease-in-out
           ${sidebarCollapsed ? "-translate-x-full md:-translate-x-0 md:w-0 md:border-r-0" : "translate-x-0 md:w-[280px]"}
           ${sidebarCollapsed ? "md:overflow-hidden" : ""}
         `}
       >
-        <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--border)]">
-          <span className="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider">
-            对话
-          </span>
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
+          <div className="flex items-center gap-2.5">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"
+                 style={{ filter: "drop-shadow(0 0 4px rgba(77, 184, 164, 0.35))" }}>
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+            <span className="text-sm font-semibold text-[var(--text-primary)]">
+              对话
+            </span>
+          </div>
           <button
             onClick={() => setSidebarCollapsed(true)}
-            className="text-[var(--text-secondary)] hover:text-[var(--text-primary)]
-                       transition-colors cursor-pointer p-0.5"
+            className="text-[var(--text-secondary)] hover:text-[var(--accent)]
+                       transition-colors cursor-pointer p-1 rounded-md
+                       hover:bg-[var(--accent)]/5"
             title="折叠侧边栏"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

art-agent/frontend/src/components/sidebar/tag-filter.tsx

@@ -2,11 +2,10 @@
 
 import { useState } from "react";
 import { useApp } from "@/lib/app-context";
-import type { Tag } from "@/lib/types";
 
 const TAG_COLORS = [
-  "#6366f1", "#f59e0b", "#10b981", "#ec4899",
-  "#8b5cf6", "#06b6d4", "#f97316", "#84cc16",
+  "#4DB8A4", "#3A8FB7", "#8b5cf6", "#B8935A",
+  "#ec4899", "#C4654A", "#84cc16", "#6366f1",
 ];
 
 export function TagFilter() {
@@ -34,15 +33,14 @@ export function TagFilter() {
   };
 
   return (
-    <div className="px-3 py-2 border-b border-[var(--border)]">
-      {/* 标签 pills */}
+    <div className="px-3 py-2.5 border-b border-[var(--border)]">
       <div className="flex flex-wrap gap-1.5">
         <button
           onClick={clearFilter}
-          className={`px-2 py-0.5 text-xs rounded-full transition-colors cursor-pointer ${
+          className={`px-2.5 py-1 text-xs rounded-lg transition-all cursor-pointer ${
             selectedTagIds.length === 0
-              ? "bg-[var(--accent)] text-white"
-              : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+              ? "bg-[var(--accent)]/15 text-[var(--accent)] border border-[var(--accent)]/30"
+              : "bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-transparent"
           }`}
         >
           全部
@@ -53,10 +51,10 @@ export function TagFilter() {
             <button
               key={tag.id}
               onClick={() => toggle(tag.id)}
-              className="px-2 py-0.5 text-xs rounded-full transition-colors cursor-pointer border"
+              className="px-2.5 py-1 text-xs rounded-lg transition-all cursor-pointer border"
               style={{
-                backgroundColor: active ? tag.color + "22" : "transparent",
-                borderColor: active ? tag.color : "var(--border)",
+                backgroundColor: active ? tag.color + "18" : "transparent",
+                borderColor: active ? tag.color + "60" : "var(--border)",
                 color: active ? tag.color : "var(--text-secondary)",
               }}
             >
@@ -66,74 +64,75 @@ export function TagFilter() {
         })}
         <button
           onClick={() => setShowManager(!showManager)}
-          className="px-2 py-0.5 text-xs rounded-full
+          className="px-2 py-1 text-xs rounded-lg
                      text-[var(--text-secondary)] hover:text-[var(--accent)]
-                     transition-colors cursor-pointer"
+                     hover:bg-[var(--accent)]/5
+                     transition-all cursor-pointer"
           title="管理标签"
         >
-          ⚙
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
         </button>
       </div>
 
-      {/* 标签管理面板 */}
       {showManager && (
-        <div className="mt-2 p-2 rounded-lg bg-[var(--bg-tertiary)] border border-[var(--border)]">
+        <div className="mt-2.5 p-3 rounded-xl bg-[var(--bg-tertiary)] border border-[var(--border)]">
           <div className="flex items-center gap-1.5 mb-2">
             <input
               value={newTagName}
               onChange={(e) => setNewTagName(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleAddTag()}
               placeholder="新标签名称"
-              className="flex-1 px-2 py-1 text-xs rounded bg-[var(--bg-primary)]
+              className="flex-1 min-w-0 px-2.5 py-1.5 text-xs rounded-lg bg-[var(--bg-primary)]
                          border border-[var(--border)] text-[var(--text-primary)]
                          placeholder:text-[var(--text-secondary)]
-                         focus:outline-none focus:border-[var(--accent)]"
+                         focus:outline-none focus:border-[var(--accent)]/50"
             />
-            <div className="flex gap-0.5">
-              {TAG_COLORS.map((c) => (
-                <button
-                  key={c}
-                  onClick={() => setNewTagColor(c)}
-                  className="w-4 h-4 rounded-full cursor-pointer transition-transform"
-                  style={{
-                    backgroundColor: c,
-                    transform: newTagColor === c ? "scale(1.3)" : "scale(1)",
-                    boxShadow: newTagColor === c ? `0 0 0 2px var(--bg-tertiary), 0 0 0 3px ${c}` : "none",
-                  }}
-                />
-              ))}
-            </div>
             <button
               onClick={handleAddTag}
               disabled={!newTagName.trim()}
-              className="px-2 py-1 text-xs rounded bg-[var(--accent)] text-white
+              className="flex-shrink-0 px-2.5 py-1.5 text-xs rounded-lg bg-[var(--accent)] text-[var(--bg-primary)] font-medium
                          disabled:opacity-40 cursor-pointer hover:bg-[var(--accent-hover)]
                          transition-colors"
             >
               添加
             </button>
           </div>
+          <div className="flex items-center gap-1 mb-2">
+            {TAG_COLORS.map((c) => (
+              <button
+                key={c}
+                onClick={() => setNewTagColor(c)}
+                className="w-5 h-5 rounded-full cursor-pointer transition-transform"
+                style={{
+                  backgroundColor: c,
+                  transform: newTagColor === c ? "scale(1.25)" : "scale(1)",
+                  boxShadow: newTagColor === c ? `0 0 0 2px var(--bg-tertiary), 0 0 0 3px ${c}` : "none",
+                }}
+              />
+            ))}
+          </div>
 
-          {/* 自定义标签列表（可删除） */}
           {tags.filter((t) => !t.builtin).length > 0 && (
-            <div className="space-y-1 mt-1">
+            <div className="space-y-1 mt-1.5">
               {tags
                 .filter((t) => !t.builtin)
                 .map((tag) => (
                   <div
                     key={tag.id}
-                    className="flex items-center justify-between px-2 py-0.5 rounded text-xs"
+                    className="flex items-center justify-between px-2 py-1 rounded-lg text-xs
+                               hover:bg-[var(--bg-primary)]/50 transition-colors"
                   >
                     <span className="flex items-center gap-1.5">
-                      <span
-                        className="w-2.5 h-2.5 rounded-full"
-                        style={{ backgroundColor: tag.color }}
-                      />
-                      {tag.name}
+                      <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: tag.color }} />
+                      <span className="text-[var(--text-primary)]">{tag.name}</span>
                     </span>
                     <button
                       onClick={() => deleteTag(tag.id)}
-                      className="text-[var(--text-secondary)] hover:text-red-400 cursor-pointer"
+                      className="text-[var(--text-secondary)] hover:text-[var(--hot)] cursor-pointer
+                                 transition-colors"
                     >
                       ×
                     </button>

art-agent/frontend/src/lib/api.ts

@@ -2,7 +2,7 @@
  * 后端 API 调用封装 + SSE 流式读取。
  */
 
-import type { ApiMessage, ImageModelInfo } from "./types";
+import type { ApiMessage, ImageModelInfo, LlmModelInfo } from "./types";
 import { getStoredToken } from "./auth-context";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
@@ -108,15 +108,34 @@ export async function fetchModels(): Promise<{
   return resp.json();
 }
 
+/**
+ * 获取可用的 LLM 对话模型列表。
+ */
+export async function fetchLlmModels(): Promise<{
+  models: LlmModelInfo[];
+  default: string;
+}> {
+  const resp = await fetch(`${API_URL}/api/llm-models`, {
+    headers: authHeaders(),
+  });
+  if (resp.status === 401) {
+    window.location.href = "/login";
+    throw new Error("登录已过期");
+  }
+  if (!resp.ok) throw new Error(`获取 LLM 模型列表失败: ${resp.status}`);
+  return resp.json();
+}
+
 /**
  * 发送对话消息到后端，返回 SSE 事件的异步迭代器。
- * refImageUrl: 已通过 uploadRefImage 上传后的服务端路径（如 /uploads/xxx.png）
+ * refImageUrls: 已通过 uploadRefImage 上传后的服务端路径列表
  */
 export async function* sendChat(
   messages: ApiMessage[],
-  refImageUrl?: string | null,
+  refImageUrls?: string[] | null,
   imageModel?: string | null,
-  sessionId?: string | null
+  sessionId?: string | null,
+  llmModel?: string | null,
 ): AsyncGenerator<SSEEvent> {
   const formData = new FormData();
 
@@ -126,8 +145,8 @@ export async function* sendChat(
   }));
   formData.append("messages", JSON.stringify(apiMessages));
 
-  if (refImageUrl) {
-    formData.append("ref_image_url", refImageUrl);
+  if (refImageUrls && refImageUrls.length > 0) {
+    formData.append("ref_image_urls", JSON.stringify(refImageUrls));
   }
 
   if (imageModel) {
@@ -138,6 +157,10 @@ export async function* sendChat(
     formData.append("session_id", sessionId);
   }
 
+  if (llmModel) {
+    formData.append("llm_model", llmModel);
+  }
+
   const response = await fetch(`${API_URL}/api/chat`, {
     method: "POST",
     body: formData,

art-agent/frontend/src/lib/app-context.tsx

@@ -40,6 +40,7 @@ interface AppContextValue {
   deleteSession: (id: string) => void;
   renameSession: (id: string, title: string) => void;
   updateSessionTags: (id: string, tags: string[]) => void;
+  updateSessionLlmModel: (id: string, llmModel: string) => void;
   appendMessage: (sessionId: string, message: ChatMessage) => void;
   updateSessionThumbnail: (sessionId: string, url: string) => void;
 
@@ -183,6 +184,17 @@ export function AppProvider({ children }: { children: ReactNode }) {
     );
   }, []);
 
+  const updateSessionLlmModel = useCallback((id: string, llmModel: string) => {
+    setSessions((prev) =>
+      prev.map((s) => {
+        if (s.id !== id) return s;
+        const updated = { ...s, llmModel, updatedAt: Date.now() };
+        storeUpdateSession(updated);
+        return updated;
+      })
+    );
+  }, []);
+
   const appendMessage = useCallback((sessionId: string, message: ChatMessage) => {
     setSessions((prev) =>
       prev.map((s) => {
@@ -266,6 +278,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
       deleteSession: deleteSessionCb,
       renameSession,
       updateSessionTags,
+      updateSessionLlmModel,
       appendMessage,
       updateSessionThumbnail,
       tags,
@@ -286,7 +299,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
     [
       sessions, activeSessionId, activeSession,
       createSession, switchSession, deleteSessionCb,
-      renameSession, updateSessionTags, appendMessage, updateSessionThumbnail,
+      renameSession, updateSessionTags, updateSessionLlmModel, appendMessage, updateSessionThumbnail,
       tags, addTag, deleteTagCb, selectedTagIds,
       assets, addAssetCb, updateAssetCb, deleteAssetCb, toggleFavoriteCb,
       detailImage, sidebarCollapsed,
@@ -294,7 +307,17 @@ export function AppProvider({ children }: { children: ReactNode }) {
   );
 
   // 未登录时（如 /login 页面）直接渲染 children，不注入 AppContext
-  if (!initialized) return <>{children}</>;
+  // 已登录但尚未初始化完成时显示加载状态，避免子组件调用 useApp() 拿到 null
+  if (!initialized) {
+    if (isAuthenticated) {
+      return (
+        <div className="h-screen flex items-center justify-center bg-[var(--bg-primary)]">
+          <div className="text-[var(--text-secondary)] text-sm">加载中...</div>
+        </div>
+      );
+    }
+    return <>{children}</>;
+  }
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 }

art-agent/frontend/src/lib/types.ts

@@ -25,7 +25,9 @@ export interface ChatMessage {
   role: "user" | "assistant";
   content: string;
   images?: ImageAsset[];
-  /** 用户消息附带的参考图（本地预览 URL 或上传后的服务端路径） */
+  /** 用户消息附带的参考图列表（本地预览 URL 或上传后的服务端路径） */
+  refImageUrls?: string[];
+  /** @deprecated 兼容旧数据，单张参考图 */
   refImageUrl?: string;
   /** 生成图片时使用的模型名称 */
   modelName?: string;
@@ -38,6 +40,8 @@ export interface Session {
   messages: ChatMessage[];
   /** 最后生成的图片 URL（用于缩略图） */
   thumbnail?: string;
+  /** 该对话使用的 LLM 模型短 ID，undefined 时使用后端默认 */
+  llmModel?: string;
   createdAt: number;
   updatedAt: number;
 }
@@ -57,6 +61,14 @@ export interface ImageModelInfo {
   supports_ref_image?: boolean;
 }
 
+/** LLM 对话模型信息（从后端 GET /api/llm-models 返回） */
+export interface LlmModelInfo {
+  id: string;
+  name: string;
+  description: string;
+  vision?: boolean;
+}
+
 /** 标注数据 */
 export interface Annotation {
   id: string;