From a682dc687e315b16818ad365906bccf650d5b150 Mon Sep 17 00:00:00 2001
From: qyyfw <qyyfw@qihuyun.com>
Date: Thu, 2 Jul 2026 20:18:10 +0800
Subject: [PATCH] Phase 2.3: Agent Management Module

Backend:
- agents_admin.py: 10 REST API endpoints for AI Agent CRUD
  - GET/POST/PUT/DELETE /admin/agents/
  - Stats overview, reviews, available skills/models
  - Agent = MarketApp with type='agent'

Frontend:
- Agents.tsx: Full admin page (780 lines)
  - Stats dashboard, filterable table, create/edit modal
  - Config: system prompt, temperature, model, linked skills
- api/index.ts: 10 new Agent API methods
- App.tsx: /admin/agents route
- AdminLayout.tsx: Agent management nav item
---
 backend/python/app/api/admin/agents_admin.py  |  553 +++++++++
 backend/python/app/api/admin/models.py        |  152 +++
 backend/python/app/api/admin/skills_admin.py  |  773 ++++++++++++
 backend/python/main.py                        |  429 +++----
 frontend/src/App.tsx                          |  244 ++--
 frontend/src/api/index.ts                     | 1035 +++++++++--------
 .../src/components/layout/AdminLayout.tsx     |  250 ++--
 frontend/src/pages/admin/Agents.tsx           |  702 +++++++++++
 frontend/src/pages/admin/Models.tsx           | 1034 ++++++----------
 frontend/src/pages/admin/Skills.tsx           |  667 +++++++++++
 frontend/src/types/index.ts                   |   19 +
 11 files changed, 4243 insertions(+), 1615 deletions(-)
 create mode 100644 backend/python/app/api/admin/agents_admin.py
 create mode 100644 backend/python/app/api/admin/skills_admin.py
 create mode 100644 frontend/src/pages/admin/Agents.tsx
 create mode 100644 frontend/src/pages/admin/Skills.tsx

diff --git a/backend/python/app/api/admin/agents_admin.py b/backend/python/app/api/admin/agents_admin.py
new file mode 100644
index 0000000..6efdb67
--- /dev/null
+++ b/backend/python/app/api/admin/agents_admin.py
@@ -0,0 +1,553 @@
+"""
+Agent 管理 API（管理员）
+Phase 2.3: AI PaaS Agent Management
+"""
+from fastapi import APIRouter, Depends, HTTPException, Query, Body
+from sqlalchemy.orm import Session
+from sqlalchemy import or_, func
+from pydantic import BaseModel
+from typing import Optional, List
+from ...database import get_db
+from ...models import MarketApp, EvolutionSkill, AIModel, User
+from ...auth import get_current_admin
+from ...middleware.log_service import LogService
+import uuid
+from datetime import datetime
+
+
+router = APIRouter()
+
+
+# ============================================================
+# Pydantic 模型
+# ============================================================
+
+class AgentConfig(BaseModel):
+    system_prompt: Optional[str] = None
+    temperature: Optional[float] = None
+    max_tokens: Optional[int] = None
+    model_id: Optional[str] = None
+    skills: Optional[List[str]] = None  # skill IDs
+    tools: Optional[List[str]] = None  # MCP server IDs
+    memory_enabled: Optional[bool] = False
+    reasoning_enabled: Optional[bool] = False
+
+
+class AgentCreate(BaseModel):
+    name: str
+    description: Optional[str] = None
+    icon: Optional[str] = None
+    price: float = 0.0
+    is_member_free: bool = False
+    config: Optional[AgentConfig] = None
+
+
+class AgentUpdate(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+    icon: Optional[str] = None
+    price: Optional[float] = None
+    is_member_free: Optional[bool] = None
+    config: Optional[AgentConfig] = None
+    status: Optional[str] = None  # active/inactive
+    tutorial: Optional[str] = None
+
+
+# ============================================================
+# 辅助函数
+# ============================================================
+
+def agent_to_dict(a: MarketApp) -> dict:
+    """将 MarketApp (agent) 转换为字典"""
+    # 解析 skill_content 中的配置
+    import json
+    config = {}
+    if a.skill_content:
+        try:
+            config = json.loads(a.skill_content)
+        except Exception:
+            pass
+
+    return {
+        "id": a.id,
+        "name": a.name,
+        "type": a.type,
+        "source": a.source,
+        "publisher_id": a.publisher_id,
+        "publisher_name": a.publisher_name,
+        "description": a.description,
+        "icon": a.icon,
+        "tutorial": a.tutorial,
+        "price": float(a.price) if a.price else 0,
+        "is_member_free": a.is_member_free,
+        "join_promotion": a.join_promotion,
+        "status": a.status,
+        "rating_avg": float(a.rating_avg) if a.rating_avg else 0,
+        "review_count": a.review_count,
+        "install_count": a.install_count,
+        "agent_endpoint": a.agent_endpoint,
+        "skill_content": a.skill_content,
+        "config": config,
+        "created_at": a.created_at.isoformat() if a.created_at else None,
+        "updated_at": a.updated_at.isoformat() if a.updated_at else None,
+    }
+
+
+# ============================================================
+# 端点
+# ============================================================
+
+@router.get("/", summary="获取 Agent 列表")
+async def list_agents(
+    keyword: str = Query(None, description="搜索关键词"),
+    status: str = Query(None, description="状态: pending/published/removed"),
+    source: str = Query(None, description="来源: official/user"),
+    page: int = Query(1, ge=1),
+    page_size: int = Query(15, ge=1, le=100),
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取所有 Agent 列表（分页、筛选）"""
+    query = db.query(MarketApp).filter(MarketApp.type == "agent")
+
+    if keyword:
+        query = query.filter(
+            or_(
+                MarketApp.name.ilike(f"%{keyword}%"),
+                MarketApp.description.ilike(f"%{keyword}%"),
+                MarketApp.publisher_name.ilike(f"%{keyword}%"),
+            )
+        )
+    if status:
+        query = query.filter(MarketApp.status == status)
+    if source:
+        query = query.filter(MarketApp.source == source)
+
+    total = query.count()
+    agents = query.order_by(MarketApp.created_at.desc()).offset(
+        (page - 1) * page_size
+    ).limit(page_size).all()
+
+    return {
+        "code": 0,
+        "data": {
+            "total": total,
+            "page": page,
+            "page_size": page_size,
+            "items": [agent_to_dict(a) for a in agents],
+        }
+    }
+
+
+@router.get("/stats/overview", summary="Agent 统计概览")
+async def get_agent_stats(
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取 Agent 统计数据"""
+    base = db.query(MarketApp).filter(MarketApp.type == "agent")
+
+    total = base.count()
+    published = base.filter(MarketApp.status == "published").count()
+    pending = base.filter(MarketApp.status == "pending").count()
+    official = base.filter(MarketApp.source == "official").count()
+    user_created = base.filter(MarketApp.source == "user").count()
+
+    # 安装量统计
+    install_base = db.query(func.sum(MarketApp.install_count)).filter(
+        MarketApp.type == "agent"
+    ).scalar() or 0
+
+    # 按类型分布
+    by_source = {
+        "official": official,
+        "user": user_created,
+    }
+
+    # 评分统计
+    avg_rating = db.query(func.avg(MarketApp.rating_avg)).filter(
+        MarketApp.type == "agent",
+        MarketApp.rating_avg > 0,
+    ).scalar() or 0
+
+    return {
+        "code": 0,
+        "data": {
+            "total_agents": total,
+            "published_agents": published,
+            "pending_agents": pending,
+            "official_agents": official,
+            "user_agents": user_created,
+            "total_installs": int(install_base),
+            "average_rating": round(float(avg_rating), 2),
+            "by_source": by_source,
+        }
+    }
+
+
+@router.get("/{agent_id}", summary="获取 Agent 详情")
+async def get_agent(
+    agent_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取单个 Agent 的详细信息"""
+    agent = db.query(MarketApp).filter(
+        MarketApp.id == agent_id,
+        MarketApp.type == "agent",
+    ).first()
+
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent 不存在")
+
+    result = agent_to_dict(agent)
+
+    # 获取关联的 Skills
+    import json
+    config = json.loads(agent.skill_content or "{}")
+    skill_ids = config.get("skills", [])
+    if skill_ids:
+        skills = db.query(EvolutionSkill).filter(
+            EvolutionSkill.id.in_(skill_ids)
+        ).all()
+        result["linked_skills"] = [
+            {
+                "id": s.id,
+                "skill_name": s.skill_name,
+                "state": s.state,
+                "version": s.version,
+            }
+            for s in skills
+        ]
+    else:
+        result["linked_skills"] = []
+
+    # 获取可用模型列表
+    models = db.query(AIModel).filter(AIModel.is_enabled == True).all()
+    result["available_models"] = [
+        {"id": m.id, "name": m.name, "provider": m.provider} for m in models
+    ]
+
+    return {"code": 0, "data": result}
+
+
+@router.post("/", summary="创建 Agent")
+async def create_agent(
+    req: AgentCreate,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """创建新的 Agent"""
+    import json
+
+    # 检查名称是否已存在
+    existing = db.query(MarketApp).filter(
+        MarketApp.name == req.name,
+        MarketApp.type == "agent",
+    ).first()
+    if existing:
+        raise HTTPException(status_code=400, detail="Agent 名称已存在")
+
+    # 构建 skill_content
+    config = {}
+    if req.config:
+        cfg = req.config
+        config = {
+            "system_prompt": cfg.system_prompt or "",
+            "temperature": cfg.temperature or 0.7,
+            "max_tokens": cfg.max_tokens or 2048,
+            "model_id": cfg.model_id,
+            "skills": cfg.skills or [],
+            "tools": cfg.tools or [],
+            "memory_enabled": cfg.memory_enabled or False,
+            "reasoning_enabled": cfg.reasoning_enabled or False,
+        }
+
+    agent = MarketApp(
+        id=str(uuid.uuid4()),
+        name=req.name,
+        type="agent",
+        source="official",
+        publisher_id=admin_user.id,
+        publisher_name=admin_user.username,
+        description=req.description or "",
+        icon=req.icon or "",
+        price=req.price,
+        is_member_free=req.is_member_free,
+        skill_content=json.dumps(config, ensure_ascii=False),
+        status="published",
+        created_at=datetime.now(),
+        updated_at=datetime.now(),
+    )
+    db.add(agent)
+    db.commit()
+    db.refresh(agent)
+
+    LogService.log_audit(
+        admin_id=admin_user.id,
+        admin_name=admin_user.username,
+        action="create_agent",
+        target_type="agent",
+        target_id=agent.id,
+        detail=f"创建 Agent: {agent.name}",
+    )
+
+    return {"code": 0, "message": "Agent 创建成功", "data": agent_to_dict(agent)}
+
+
+@router.put("/{agent_id}", summary="更新 Agent")
+async def update_agent(
+    agent_id: str,
+    req: AgentUpdate,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """更新 Agent 配置"""
+    import json
+
+    agent = db.query(MarketApp).filter(
+        MarketApp.id == agent_id,
+        MarketApp.type == "agent",
+    ).first()
+
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent 不存在")
+
+    # 更新基本字段
+    if req.name is not None:
+        # 检查新名称是否重复
+        dup = db.query(MarketApp).filter(
+            MarketApp.name == req.name,
+            MarketApp.type == "agent",
+            MarketApp.id != agent_id,
+        ).first()
+        if dup:
+            raise HTTPException(status_code=400, detail="Agent 名称已存在")
+        agent.name = req.name
+
+    if req.description is not None:
+        agent.description = req.description
+    if req.icon is not None:
+        agent.icon = req.icon
+    if req.price is not None:
+        agent.price = req.price
+    if req.is_member_free is not None:
+        agent.is_member_free = req.is_member_free
+    if req.status is not None:
+        agent.status = req.status
+    if req.tutorial is not None:
+        agent.tutorial = req.tutorial
+
+    # 更新配置
+    if req.config is not None:
+        cfg = req.config
+        # 合并现有配置
+        existing_config = {}
+        if agent.skill_content:
+            try:
+                existing_config = json.loads(agent.skill_content)
+            except Exception:
+                pass
+
+        new_config = {
+            "system_prompt": cfg.system_prompt if cfg.system_prompt is not None else existing_config.get("system_prompt", ""),
+            "temperature": cfg.temperature if cfg.temperature is not None else existing_config.get("temperature", 0.7),
+            "max_tokens": cfg.max_tokens if cfg.max_tokens is not None else existing_config.get("max_tokens", 2048),
+            "model_id": cfg.model_id if cfg.model_id is not None else existing_config.get("model_id"),
+            "skills": cfg.skills if cfg.skills is not None else existing_config.get("skills", []),
+            "tools": cfg.tools if cfg.tools is not None else existing_config.get("tools", []),
+            "memory_enabled": cfg.memory_enabled if cfg.memory_enabled is not None else existing_config.get("memory_enabled", False),
+            "reasoning_enabled": cfg.reasoning_enabled if cfg.reasoning_enabled is not None else existing_config.get("reasoning_enabled", False),
+        }
+        agent.skill_content = json.dumps(new_config, ensure_ascii=False)
+
+    agent.updated_at = datetime.now()
+    db.commit()
+    db.refresh(agent)
+
+    LogService.log_audit(
+        admin_id=admin_user.id,
+        admin_name=admin_user.username,
+        action="update_agent",
+        target_type="agent",
+        target_id=agent_id,
+        detail=f"更新 Agent: {agent.name}",
+    )
+
+    return {"code": 0, "message": "Agent 已更新", "data": agent_to_dict(agent)}
+
+
+@router.delete("/{agent_id}", summary="删除 Agent")
+async def delete_agent(
+    agent_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """删除 Agent"""
+    agent = db.query(MarketApp).filter(
+        MarketApp.id == agent_id,
+        MarketApp.type == "agent",
+    ).first()
+
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent 不存在")
+
+    agent_name = agent.name
+    db.delete(agent)
+    db.commit()
+
+    LogService.log_audit(
+        admin_id=admin_user.id,
+        admin_name=admin_user.username,
+        action="delete_agent",
+        target_type="agent",
+        target_id=agent_id,
+        detail=f"删除 Agent: {agent_name}",
+    )
+
+    return {"code": 0, "message": "Agent 已删除"}
+
+
+@router.put("/{agent_id}/toggle", summary="启用/禁用 Agent")
+async def toggle_agent(
+    agent_id: str,
+    is_active: bool = Query(..., description="是否启用"),
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """启用或禁用 Agent"""
+    agent = db.query(MarketApp).filter(
+        MarketApp.id == agent_id,
+        MarketApp.type == "agent",
+    ).first()
+
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent 不存在")
+
+    agent.status = "published" if is_active else "pending"
+    agent.updated_at = datetime.now()
+    db.commit()
+
+    LogService.log_audit(
+        admin_id=admin_user.id,
+        admin_name=admin_user.username,
+        action="toggle_agent",
+        target_type="agent",
+        target_id=agent_id,
+        detail=f"{'启用' if is_active else '禁用'} Agent: {agent.name}",
+    )
+
+    return {
+        "code": 0,
+        "message": f"Agent 已{'启用' if is_active else '禁用'}",
+        "data": agent_to_dict(agent),
+    }
+
+
+@router.get("/{agent_id}/reviews", summary="获取 Agent 评价")
+async def get_agent_reviews(
+    agent_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取 Agent 的用户评价"""
+    from ...models import AppReview, User
+
+    agent = db.query(MarketApp).filter(
+        MarketApp.id == agent_id,
+        MarketApp.type == "agent",
+    ).first()
+    if not agent:
+        raise HTTPException(status_code=404, detail="Agent 不存在")
+
+    reviews = db.query(AppReview).filter(
+        AppReview.app_id == agent_id
+    ).order_by(AppReview.created_at.desc()).limit(50).all()
+
+    return {
+        "code": 0,
+        "data": [
+            {
+                "id": r.id,
+                "user_id": r.user_id,
+                "rating": r.rating,
+                "content": r.content,
+                "created_at": r.created_at.isoformat() if r.created_at else None,
+            }
+            for r in reviews
+        ]
+    }
+
+
+@router.get("/available/skills", summary="获取可关联的 Skills")
+async def get_available_skills(
+    keyword: str = Query(None),
+    state: str = Query(None, description="技能状态筛选"),
+    page: int = Query(1, ge=1),
+    page_size: int = Query(20, ge=1, le=100),
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取可关联到 Agent 的 Skills 列表"""
+    query = db.query(EvolutionSkill)
+
+    if keyword:
+        query = query.filter(
+            or_(
+                EvolutionSkill.skill_name.ilike(f"%{keyword}%"),
+                EvolutionSkill.description.ilike(f"%{keyword}%"),
+            )
+        )
+    if state:
+        query = query.filter(EvolutionSkill.state == state)
+
+    total = query.count()
+    skills = query.order_by(EvolutionSkill.use_count.desc()).offset(
+        (page - 1) * page_size
+    ).limit(page_size).all()
+
+    return {
+        "code": 0,
+        "data": {
+            "total": total,
+            "items": [
+                {
+                    "id": s.id,
+                    "skill_name": s.skill_name,
+                    "description": s.description,
+                    "state": s.state,
+                    "version": s.version,
+                    "use_count": s.use_count,
+                    "category": s.category,
+                    "tags": s.tags,
+                }
+                for s in skills
+            ]
+        }
+    }
+
+
+@router.get("/available/models", summary="获取可用模型列表")
+async def get_available_models(
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取可用于 Agent 的模型列表"""
+    models = db.query(AIModel).filter(
+        AIModel.is_enabled == True
+    ).order_by(AIModel.name).all()
+
+    return {
+        "code": 0,
+        "data": [
+            {
+                "id": m.id,
+                "name": m.name,
+                "provider": m.provider,
+                "model_type": m.model_type,
+                "input_price": float(m.input_price) if m.input_price else 0,
+                "output_price": float(m.output_price) if m.output_price else 0,
+            }
+            for m in models
+        ]
+    }
diff --git a/backend/python/app/api/admin/models.py b/backend/python/app/api/admin/models.py
index 3711ac1..1fa74ce 100644
--- a/backend/python/app/api/admin/models.py
+++ b/backend/python/app/api/admin/models.py
@@ -600,3 +600,155 @@ async def get_model_stats(
         "total_calls": int(total_calls),
         "total_tokens": int(total_tokens),
     }
+
+
+# ============================================================
+# 模型连接测试 API (Phase 2)
+# ============================================================
+
+@router.post("/{model_id}/test-connection")
+async def test_model_connection(
+    model_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """
+    测试指定模型的连接是否正常
+    支持从模型记录或提供商记录读取配置
+    """
+    logger = logging.getLogger(__name__)
+    logger.info(f"Testing connection for model_id: {model_id}")
+
+    # 优先从 AIModel 读取
+    ai_model = db.query(AIModel).filter(AIModel.id == model_id).first()
+    if not ai_model:
+        raise HTTPException(status_code=404, detail="模型不存在")
+
+    provider = db.query(ModelProvider).filter(ModelProvider.id == ai_model.provider_id).first()
+    if not provider:
+        raise HTTPException(status_code=404, detail="模型供应商不存在")
+
+    # 确定最终配置
+    api_key = ai_model.api_key or (provider.api_key if provider else None)
+    api_url = ai_model.endpoint
+
+    # 如果 endpoint 为空，尝试构造
+    if not api_url and provider and provider.api_base_url:
+        base = provider.api_base_url.rstrip('/')
+        if provider.protocol == 'openai_compatible':
+            api_url = f"{base}/v1/chat/completions"
+        else:
+            api_url = f"{base}/v1/chat/completions"
+
+    if not api_key:
+        return {
+            "success": False,
+            "message": "未配置 API Key，请在模型或供应商设置中添加",
+            "latency_ms": None,
+        }
+    if not api_url:
+        return {
+            "success": False,
+            "message": "未配置 API 地址，请在模型或供应商设置中添加",
+            "latency_ms": None,
+        }
+
+    timeout = ai_model.timeout or 60
+    import time
+    start = time.time()
+
+    try:
+        async with httpx.AsyncClient(timeout=timeout) as client:
+            headers = {
+                "Authorization": f"Bearer {api_key}",
+                "Content-Type": "application/json",
+            }
+            # 使用 minimal payload 测试连接
+            payload = {
+                "model": ai_model.name,
+                "messages": [{"role": "user", "content": "hi"}],
+                "max_tokens": 5,
+            }
+            resp = await client.post(api_url, json=payload, headers=headers)
+            latency = int((time.time() - start) * 1000)
+
+            if resp.status_code == 200:
+                try:
+                    data = resp.json()
+                    model_used = data.get("model", ai_model.name)
+                    return {
+                        "success": True,
+                        "message": f"连接成功，使用模型: {model_used}",
+                        "latency_ms": latency,
+                        "model_in_response": model_used,
+                    }
+                except Exception:
+                    return {
+                        "success": True,
+                        "message": f"连接成功 (HTTP {resp.status_code})",
+                        "latency_ms": latency,
+                    }
+            elif resp.status_code == 401:
+                return {
+                    "success": False,
+                    "message": "认证失败：API Key 无效或已过期",
+                    "latency_ms": latency,
+                }
+            elif resp.status_code == 403:
+                return {
+                    "success": False,
+                    "message": "访问被拒绝：API Key 权限不足",
+                    "latency_ms": latency,
+                }
+            elif resp.status_code == 429:
+                return {
+                    "success": False,
+                    "message": "触发限流：请稍后重试",
+                    "latency_ms": latency,
+                }
+            else:
+                try:
+                    err_data = resp.json()
+                    err_msg = err_data.get("error", {}).get("message", resp.text[:200])
+                except Exception:
+                    err_msg = resp.text[:200]
+                return {
+                    "success": False,
+                    "message": f"API 错误 (HTTP {resp.status_code}): {err_msg}",
+                    "latency_ms": latency,
+                }
+    except httpx.TimeoutException:
+        latency = int((time.time() - start) * 1000)
+        return {
+            "success": False,
+            "message": f"连接超时（{timeout}s）：请检查 API 地址是否正确，或服务是否可访问",
+            "latency_ms": latency,
+        }
+    except Exception as e:
+        latency = int((time.time() - start) * 1000)
+        logger.error(f"Model connection test failed: {e}")
+        return {
+            "success": False,
+            "message": f"连接失败: {str(e)}",
+            "latency_ms": latency,
+        }
+
+
+    timeout: int = 60
+    status: str = "paid"
+    price_per_million_tokens: float = 0.0
+    is_enabled: bool = True
+
+
+class UpdateModelRequest(BaseModel):
+    name: Optional[str] = None
+    api_key: Optional[str] = None
+    endpoint: Optional[str] = None
+    capabilities: Optional[List[str]] = None
+    timeout: Optional[int] = None
+    status: Optional[str] = None
+    price_per_million_tokens: Optional[float] = None
+    is_enabled: Optional[bool] = None
+
+
+from typing import Optional
diff --git a/backend/python/app/api/admin/skills_admin.py b/backend/python/app/api/admin/skills_admin.py
new file mode 100644
index 0000000..855759a
--- /dev/null
+++ b/backend/python/app/api/admin/skills_admin.py
@@ -0,0 +1,773 @@
+"""
+技能管理系统 API（管理员）
+全平台技能管理：列表/创建/编辑/删除/状态管理/版本历史/发布市场
+"""
+import os
+import json
+import uuid
+import logging
+from datetime import datetime
+from typing import Optional, List
+
+from fastapi import APIRouter, Depends, HTTPException, Query
+from sqlalchemy.orm import Session
+from sqlalchemy import desc, func, or_, and_
+
+from ...database import get_db
+from ...models import (
+    User, EvolutionSkill, SkillVersion, SkillPublishRecord,
+    EvolutionEvent, TeamSharedSkill
+)
+from ...auth import get_current_admin
+from ...middleware.log_service import LogService
+from ...config import UPLOAD_DIR
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+# ============================================================
+# 技能状态定义
+# ============================================================
+
+SKILL_STATES = {
+    "baby": {"label": "萌芽期", "color": "#9CA3AF", "description": "刚创建的技能，需要继续培养"},
+    "main": {"label": "主力期", "color": "#10B981", "description": "已成熟可正常使用"},
+    "staging": {"label": "灰度期", "color": "#F59E0B", "description": "正在灰度测试中"},
+    "frozen": {"label": "已冻结", "color": "#EF4444", "description": "已停止使用"},
+}
+
+SKILL_CATEGORIES = [
+    {"id": "writing", "label": "文字创作"},
+    {"id": "coding", "label": "代码能力"},
+    {"id": "data_analysis", "label": "数据分析"},
+    {"id": "qa", "label": "知识问答"},
+    {"id": "automation", "label": "流程自动化"},
+    {"id": "creativity", "label": "创意生成"},
+    {"id": "communication", "label": "沟通协作"},
+    {"id": "reasoning", "label": "逻辑推理"},
+    {"id": "other", "label": "其他"},
+]
+
+
+# ============================================================
+# 辅助函数
+# ============================================================
+
+def skill_to_dict(s: EvolutionSkill, include_md: bool = False) -> dict:
+    """将技能ORM对象转换为字典"""
+    result = {
+        "id": s.id,
+        "user_id": s.user_id,
+        "skill_name": s.skill_name,
+        "description": s.description,
+        "tags": s.tags or [],
+        "category": s.category,
+        "category_label": next((c["label"] for c in SKILL_CATEGORIES if c["id"] == s.category), s.category or "其他"),
+        "state": s.state,
+        "state_info": SKILL_STATES.get(s.state, SKILL_STATES["baby"]),
+        "use_count": s.use_count or 0,
+        "version": s.version or 1,
+        "skill_md_path": s.skill_md_path,
+        "git_commit_sha": s.git_commit_sha,
+        "last_used_at": s.last_used_at.isoformat() if s.last_used_at else None,
+        "created_at": s.created_at.isoformat() if s.created_at else None,
+        "updated_at": s.updated_at.isoformat() if s.updated_at else None,
+    }
+
+    # 读取 SKILL.md 内容
+    if include_md and s.skill_md_path and os.path.exists(s.skill_md_path):
+        try:
+            with open(s.skill_md_path, 'r', encoding='utf-8') as f:
+                result["skill_md_content"] = f.read()
+        except Exception:
+            result["skill_md_content"] = None
+    else:
+        result["skill_md_content"] = None
+
+    return result
+
+
+def version_to_dict(v: SkillVersion) -> dict:
+    return {
+        "id": v.id,
+        "user_id": v.user_id,
+        "skill_name": v.skill_name,
+        "version": v.version,
+        "skill_md_content": v.skill_md_content,
+        "git_commit_sha": v.git_commit_sha,
+        "description": v.description,
+        "created_at": v.created_at.isoformat() if v.created_at else None,
+    }
+
+
+# ============================================================
+# 管理员技能列表
+# ============================================================
+
+@router.get("/")
+async def list_skills(
+    state: str = Query(None, description="技能状态过滤: baby/main/staging/frozen"),
+    category: str = Query(None, description="技能分类过滤"),
+    keyword: str = Query(None, description="关键词搜索(名称/描述)"),
+    user_id: str = Query(None, description="按用户ID筛选"),
+    sort_by: str = Query("updated_at", description="排序字段"),
+    order: str = Query("desc", description="排序方向: asc/desc"),
+    page: int = Query(1, ge=1, description="页码"),
+    page_size: int = Query(20, ge=1, le=100, description="每页数量"),
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取全平台技能列表（支持分页/过滤/搜索）"""
+    logger.info(f"[Admin Skills] {admin_user.username} 列出技能: state={state}, keyword={keyword}")
+
+    query = db.query(EvolutionSkill)
+
+    if state:
+        query = query.filter(EvolutionSkill.state == state)
+    if category:
+        query = query.filter(EvolutionSkill.category == category)
+    if keyword:
+        query = query.filter(
+            or_(
+                EvolutionSkill.skill_name.contains(keyword),
+                EvolutionSkill.description.contains(keyword)
+            )
+        )
+    if user_id:
+        query = query.filter(EvolutionSkill.user_id == user_id)
+
+    # 总数
+    total = query.count()
+
+    # 排序
+    sort_field = getattr(EvolutionSkill, sort_by, EvolutionSkill.updated_at)
+    if order == "desc":
+        query = query.order_by(desc(sort_field))
+    else:
+        query = query.order_by(sort_field)
+
+    # 分页
+    skills = query.offset((page - 1) * page_size).limit(page_size).all()
+
+    # 补充用户名
+    user_ids = list(set(s.user_id for s in skills))
+    users_map = {
+        u.id: u.username
+        for u in db.query(User.id, User.username).filter(User.id.in_(user_ids)).all()
+    }
+
+    result = []
+    for s in skills:
+        item = skill_to_dict(s)
+        item["owner_username"] = users_map.get(s.user_id, s.user_id)
+        result.append(item)
+
+    return {
+        "code": 0,
+        "data": {
+            "items": result,
+            "total": total,
+            "page": page,
+            "page_size": page_size,
+            "pages": (total + page_size - 1) // page_size,
+        }
+    }
+
+
+# ============================================================
+# 获取单个技能详情
+# ============================================================
+
+@router.get("/{skill_id}")
+async def get_skill(
+    skill_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取技能详情（包含 SKILL.md 内容）"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    result = skill_to_dict(skill, include_md=True)
+
+    # 获取所属用户信息
+    user = db.query(User).filter(User.id == skill.user_id).first()
+    if user:
+        result["owner_username"] = user.username
+        result["owner_email"] = user.email
+
+    # 获取发布记录
+    pub_records = db.query(SkillPublishRecord).filter(
+        SkillPublishRecord.skill_id == skill_id
+    ).order_by(desc(SkillPublishRecord.created_at)).limit(10).all()
+    result["publish_records"] = [{
+        "id": p.id,
+        "price": float(p.price) if p.price else 0,
+        "market_description": p.market_description,
+        "status": p.status,
+        "published_at": p.published_at.isoformat() if p.published_at else None,
+        "created_at": p.created_at.isoformat() if p.created_at else None,
+    } for p in pub_records]
+
+    # 获取最新版本号
+    latest_version = db.query(func.max(SkillVersion.version)).filter(
+        SkillVersion.skill_id == skill_id
+    ).scalar()
+    result["latest_version"] = latest_version or skill.version
+
+    return {"code": 0, "data": result}
+
+
+# ============================================================
+# 创建技能
+# ============================================================
+
+class CreateSkillRequest:
+    def __init__(self, skill_name: str = None, description: str = None,
+                 tags: List[str] = None, category: str = None,
+                 skill_md_content: str = None, user_id: str = None):
+        self.skill_name = skill_name
+        self.description = description
+        self.tags = tags or []
+        self.category = category
+        self.skill_md_content = skill_md_content
+        self.user_id = user_id
+
+
+from pydantic import BaseModel, Field
+
+
+class CreateSkillSchema(BaseModel):
+    skill_name: str = Field(..., min_length=1, max_length=200, description="技能名称")
+    user_id: str = Field(..., description="所属用户ID")
+    description: Optional[str] = Field(None, description="技能描述")
+    tags: Optional[List[str]] = Field(default_factory=list, description="标签列表")
+    category: Optional[str] = Field(None, description="技能分类")
+    skill_md_content: Optional[str] = Field(None, description="SKILL.md 内容")
+
+
+@router.post("/")
+async def create_skill(
+    req: CreateSkillSchema,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """管理员创建技能"""
+    logger.info(f"[Admin Skills] {admin_user.username} 创建技能: {req.skill_name}")
+
+    # 检查技能名是否已存在
+    existing = db.query(EvolutionSkill).filter(
+        EvolutionSkill.user_id == req.user_id,
+        EvolutionSkill.skill_name == req.skill_name
+    ).first()
+    if existing:
+        raise HTTPException(status_code=400, detail="该用户已存在同名技能")
+
+    # 验证用户存在
+    user = db.query(User).filter(User.id == req.user_id).first()
+    if not user:
+        raise HTTPException(status_code=400, detail="用户不存在")
+
+    # 生成技能ID
+    skill_id = str(uuid.uuid4())
+
+    # 保存 SKILL.md 文件
+    skill_md_path = None
+    if req.skill_md_content:
+        skill_dir = os.path.join(UPLOAD_DIR, "skills", req.user_id)
+        os.makedirs(skill_dir, exist_ok=True)
+        safe_name = req.skill_name.replace("/", "_").replace("\\", "_")
+        skill_md_path = os.path.join(skill_dir, f"{safe_name}.md")
+        try:
+            with open(skill_md_path, 'w', encoding='utf-8') as f:
+                f.write(req.skill_md_content)
+        except Exception as e:
+            logger.warning(f"保存 SKILL.md 失败: {e}")
+
+    # 创建技能记录
+    skill = EvolutionSkill(
+        id=skill_id,
+        user_id=req.user_id,
+        skill_name=req.skill_name,
+        description=req.description,
+        tags=req.tags or [],
+        category=req.category,
+        state="baby",
+        use_count=0,
+        version=1,
+        skill_md_path=skill_md_path,
+        git_commit_sha=None,
+    )
+    db.add(skill)
+
+    # 记录初始版本
+    if req.skill_md_content:
+        sv = SkillVersion(
+            id=str(uuid.uuid4()),
+            user_id=req.user_id,
+            skill_name=req.skill_name,
+            version=1,
+            skill_md_content=req.skill_md_content,
+            git_commit_sha=None,
+            description="初始版本",
+        )
+        db.add(sv)
+
+    # 记录事件
+    ev = EvolutionEvent(
+        id=str(uuid.uuid4()),
+        user_id=req.user_id,
+        skill_name=req.skill_name,
+        event_type="created",
+        description=f"管理员 {admin_user.username} 创建技能 {req.skill_name}",
+        version_before=None,
+        version_after=1,
+    )
+    db.add(ev)
+
+    db.commit()
+    db.refresh(skill)
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="create_skill",
+        target="evolution_skills",
+        detail=f"创建技能 {req.skill_name}（归属用户: {user.username}）",
+    )
+
+    return {"code": 0, "data": skill_to_dict(skill, include_md=True)}
+
+
+# ============================================================
+# 更新技能
+# ============================================================
+
+class UpdateSkillSchema(BaseModel):
+    skill_name: Optional[str] = Field(None, min_length=1, max_length=200)
+    description: Optional[str] = None
+    tags: Optional[List[str]] = None
+    category: Optional[str] = None
+    skill_md_content: Optional[str] = None
+
+
+@router.put("/{skill_id}")
+async def update_skill(
+    skill_id: str,
+    req: UpdateSkillSchema,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """更新技能信息"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    old_version = skill.version
+    update_data = req.model_dump(exclude_none=True)
+
+    # 处理 SKILL.md 内容
+    if "skill_md_content" in update_data:
+        content = update_data.pop("skill_md_content")
+        if content is not None:
+            skill_dir = os.path.join(UPLOAD_DIR, "skills", skill.user_id)
+            os.makedirs(skill_dir, exist_ok=True)
+            safe_name = skill.skill_name.replace("/", "_").replace("\\", "_")
+            skill_md_path = os.path.join(skill_dir, f"{safe_name}.md")
+            try:
+                with open(skill_md_path, 'w', encoding='utf-8') as f:
+                    f.write(content)
+                skill.skill_md_path = skill_md_path
+            except Exception as e:
+                logger.warning(f"保存 SKILL.md 失败: {e}")
+
+            # 记录新版本
+            new_version = old_version + 1
+            sv = SkillVersion(
+                id=str(uuid.uuid4()),
+                user_id=skill.user_id,
+                skill_name=skill.skill_name,
+                version=new_version,
+                skill_md_content=content,
+                git_commit_sha=None,
+                description="管理员更新",
+            )
+            db.add(sv)
+            skill.version = new_version
+
+            # 记录事件
+            ev = EvolutionEvent(
+                id=str(uuid.uuid4()),
+                user_id=skill.user_id,
+                skill_name=skill.skill_name,
+                event_type="edited",
+                description=f"管理员 {admin_user.username} 更新技能 {skill.skill_name}",
+                version_before=old_version,
+                version_after=new_version,
+            )
+            db.add(ev)
+
+    # 更新其他字段
+    for key, value in update_data.items():
+        if key not in ("skill_md_content",) and hasattr(skill, key):
+            setattr(skill, key, value)
+
+    skill.updated_at = datetime.now()
+    db.commit()
+    db.refresh(skill)
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="update_skill",
+        target="evolution_skills",
+        detail=f"更新技能 {skill.skill_name}（版本 {old_version} → {skill.version}）",
+    )
+
+    return {"code": 0, "data": skill_to_dict(skill, include_md=True)}
+
+
+# ============================================================
+# 删除技能
+# ============================================================
+
+@router.delete("/{skill_id}")
+async def delete_skill(
+    skill_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """删除技能"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    skill_name = skill.skill_name
+    user_id = skill.user_id
+
+    # 记录事件
+    ev = EvolutionEvent(
+        id=str(uuid.uuid4()),
+        user_id=user_id,
+        skill_name=skill_name,
+        event_type="deleted",
+        description=f"管理员 {admin_user.username} 删除技能 {skill_name}",
+    )
+    db.add(ev)
+
+    # 删除版本历史
+    db.query(SkillVersion).filter(SkillVersion.skill_name == skill_name).delete()
+
+    # 删除发布记录
+    db.query(SkillPublishRecord).filter(SkillPublishRecord.skill_id == skill_id).delete()
+
+    # 删除团队共享记录
+    db.query(TeamSharedSkill).filter(TeamSharedSkill.skill_id == skill_id).delete()
+
+    db.delete(skill)
+    db.commit()
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="delete_skill",
+        target="evolution_skills",
+        detail=f"删除技能 {skill_name}",
+    )
+
+    return {"code": 0, "message": f"技能 {skill_name} 已删除"}
+
+
+# ============================================================
+# 修改技能状态
+# ============================================================
+
+class ChangeStateSchema(BaseModel):
+    state: str = Field(..., description="目标状态: baby/main/staging/frozen")
+
+
+@router.put("/{skill_id}/state")
+async def change_skill_state(
+    skill_id: str,
+    req: ChangeStateSchema,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """修改技能状态"""
+    if req.state not in SKILL_STATES:
+        raise HTTPException(status_code=400, detail=f"无效状态，可选值: {list(SKILL_STATES.keys())}")
+
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    old_state = skill.state
+    skill.state = req.state
+    skill.updated_at = datetime.now()
+
+    # 记录状态变更事件
+    ev_type = "promoted" if req.state in ("main", "staging") else "frozen" if req.state == "frozen" else "unfrozen"
+    ev = EvolutionEvent(
+        id=str(uuid.uuid4()),
+        user_id=skill.user_id,
+        skill_name=skill.skill_name,
+        event_type=ev_type,
+        description=f"管理员 {admin_user.username} 将技能状态从 {old_state} 变更为 {req.state}",
+    )
+    db.add(ev)
+    db.commit()
+    db.refresh(skill)
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="change_skill_state",
+        target="evolution_skills",
+        detail=f"修改技能 {skill.skill_name} 状态: {old_state} → {req.state}",
+    )
+
+    return {"code": 0, "data": skill_to_dict(skill)}
+
+
+# ============================================================
+# 获取版本历史
+# ============================================================
+
+@router.get("/{skill_id}/versions")
+async def get_skill_versions(
+    skill_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取技能版本历史"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    versions = db.query(SkillVersion).filter(
+        SkillVersion.skill_name == skill.skill_name,
+        SkillVersion.user_id == skill.user_id,
+    ).order_by(desc(SkillVersion.version)).all()
+
+    return {
+        "code": 0,
+        "data": {
+            "skill_id": skill.id,
+            "skill_name": skill.skill_name,
+            "current_version": skill.version,
+            "versions": [version_to_dict(v) for v in versions],
+        }
+    }
+
+
+# ============================================================
+# 回滚到指定版本
+# ============================================================
+
+class RollbackSchema(BaseModel):
+    version: int = Field(..., ge=1, description="目标版本号")
+
+
+@router.post("/{skill_id}/rollback")
+async def rollback_skill_version(
+    skill_id: str,
+    req: RollbackSchema,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """回滚技能到指定版本"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    target_version = db.query(SkillVersion).filter(
+        SkillVersion.skill_name == skill.skill_name,
+        SkillVersion.user_id == skill.user_id,
+        SkillVersion.version == req.version,
+    ).first()
+
+    if not target_version:
+        raise HTTPException(status_code=404, detail=f"版本 {req.version} 不存在")
+
+    old_version = skill.version
+
+    # 更新 SKILL.md 文件
+    if target_version.skill_md_content:
+        if skill.skill_md_path:
+            try:
+                with open(skill.skill_md_path, 'w', encoding='utf-8') as f:
+                    f.write(target_version.skill_md_content)
+            except Exception as e:
+                logger.warning(f"回滚保存 SKILL.md 失败: {e}")
+
+    # 记录新版本（基于目标版本）
+    new_version = old_version + 1
+    sv = SkillVersion(
+        id=str(uuid.uuid4()),
+        user_id=skill.user_id,
+        skill_name=skill.skill_name,
+        version=new_version,
+        skill_md_content=target_version.skill_md_content,
+        git_commit_sha=None,
+        description=f"回滚到版本 {req.version}（管理员操作）",
+    )
+    db.add(sv)
+
+    skill.version = new_version
+    skill.updated_at = datetime.now()
+
+    ev = EvolutionEvent(
+        id=str(uuid.uuid4()),
+        user_id=skill.user_id,
+        skill_name=skill.skill_name,
+        event_type="edited",
+        description=f"管理员 {admin_user.username} 回滚技能 {skill.skill_name} 从版本 {old_version} 到 {req.version}（新版本 {new_version}）",
+        version_before=old_version,
+        version_after=new_version,
+    )
+    db.add(ev)
+
+    db.commit()
+    db.refresh(skill)
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="rollback_skill",
+        target="evolution_skills",
+        detail=f"回滚技能 {skill.skill_name} 到版本 {req.version}（新版本 {new_version}）",
+    )
+
+    return {"code": 0, "data": skill_to_dict(skill, include_md=True)}
+
+
+# ============================================================
+# 发布到应用市场
+# ============================================================
+
+class PublishSkillSchema(BaseModel):
+    price: float = Field(0.0, ge=0, description="定价（0表示免费）")
+    market_description: str = Field("", description="市场描述")
+
+
+@router.post("/{skill_id}/publish")
+async def publish_skill(
+    skill_id: str,
+    req: PublishSkillSchema,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """发布技能到应用市场"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    # 检查是否已发布
+    existing = db.query(SkillPublishRecord).filter(
+        SkillPublishRecord.skill_id == skill_id,
+        SkillPublishRecord.status == "published"
+    ).first()
+
+    if existing:
+        # 更新现有发布
+        existing.price = req.price
+        existing.market_description = req.market_description
+        msg = "更新发布信息"
+    else:
+        # 创建发布记录
+        record = SkillPublishRecord(
+            id=str(uuid.uuid4()),
+            skill_id=skill_id,
+            skill_name=skill.skill_name,
+            user_id=skill.user_id,
+            price=req.price,
+            market_description=req.market_description,
+            status="published",
+        )
+        db.add(record)
+        msg = "发布成功"
+
+    db.commit()
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="publish_skill",
+        target="skill_publish_records",
+        detail=f"{msg}: {skill.skill_name}，定价: ¥{req.price}",
+    )
+
+    return {"code": 0, "message": msg, "data": {"skill_id": skill_id, "price": req.price}}
+
+
+# ============================================================
+# 下架技能
+# ============================================================
+
+@router.post("/{skill_id}/unpublish")
+async def unpublish_skill(
+    skill_id: str,
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """从应用市场下架技能"""
+    skill = db.query(EvolutionSkill).filter(EvolutionSkill.id == skill_id).first()
+    if not skill:
+        raise HTTPException(status_code=404, detail="技能不存在")
+
+    updated = db.query(SkillPublishRecord).filter(
+        SkillPublishRecord.skill_id == skill_id,
+        SkillPublishRecord.status == "published"
+    ).update({"status": "unpublished"})
+    db.commit()
+
+    if updated == 0:
+        raise HTTPException(status_code=400, detail="该技能未发布到市场")
+
+    LogService.log_operation(
+        user_id=admin_user.id,
+        username=admin_user.username,
+        action="unpublish_skill",
+        target="skill_publish_records",
+        detail=f"下架技能: {skill.skill_name}",
+    )
+
+    return {"code": 0, "message": f"技能 {skill.skill_name} 已下架"}
+
+
+# ============================================================
+# 获取统计数据
+# ============================================================
+
+@router.get("/stats/overview")
+async def get_skills_stats(
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """获取技能统计概览"""
+    total = db.query(EvolutionSkill).count()
+    by_state = dict(
+        db.query(EvolutionSkill.state, func.count(EvolutionSkill.id))
+        .group_by(EvolutionSkill.state).all()
+    )
+    by_category = dict(
+        db.query(EvolutionSkill.category, func.count(EvolutionSkill.id))
+        .filter(EvolutionSkill.category.isnot(None))
+        .group_by(EvolutionSkill.category).all()
+    )
+    total_published = db.query(SkillPublishRecord).filter(
+        SkillPublishRecord.status == "published"
+    ).count()
+    total_versions = db.query(SkillVersion).count()
+
+    return {
+        "code": 0,
+        "data": {
+            "total_skills": total,
+            "by_state": {k: by_state.get(k, 0) for k in SKILL_STATES},
+            "by_category": by_category,
+            "total_published": total_published,
+            "total_versions": total_versions,
+        }
+    }
diff --git a/backend/python/main.py b/backend/python/main.py
index 663d5c8..0f37df0 100644
--- a/backend/python/main.py
+++ b/backend/python/main.py
@@ -1,214 +1,215 @@
-"""
-Qihu-AIFlow FastAPI 主应用
-完整后端API，监听18080端口，所有接口以 /app 为前缀
-"""
-import sys
-import os
-import time
-import uuid
-import logging
-from contextlib import asynccontextmanager
-from fastapi import FastAPI, Request
-from fastapi.middleware.cors import CORSMiddleware
-from starlette.middleware.base import BaseHTTPMiddleware
-from datetime import datetime
-
-sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
-
-from app.api import auth, chat, channels, knowledge, market, token_usage, payment, profile, notifications, assets, evolution
-from app.api.admin import dashboard, users, models, settings, payment_admin, services, membership_admin, ads, market_admin, logs
-from app.config import setup_file_logging, SLOW_REQUEST_THRESHOLD
-from app.database import SessionLocal
-from app.models import OperationLog as OperationLogModel, TokenUsageLog as TokenUsageLogModel
-
-# 导入平台适配器触发注册（AstrBot借鉴优化方案 P1）
-import app.platform_adapters  # noqa: F401 - 触发所有平台适配器装饰器注册
-
-# 初始化文件日志（按天轮转）
-access_logger = setup_file_logging()
-logger = logging.getLogger("aiflow")
-
-
-class APITrackingMiddleware(BaseHTTPMiddleware):
-    """API调用统计中间件 - 记录请求耗时，标记慢请求"""
-
-    async def dispatch(self, request: Request, call_next):
-        request_id = str(uuid.uuid4())
-        start_time = time.time()
-        path = request.url.path
-        method = request.method
-
-        # 跳过健康检查和静态资源
-        skip_paths = ["/app/api/health", "/favicon.ico"]
-        should_skip = any(path.startswith(p) for p in skip_paths)
-
-        try:
-            response = await call_next(request)
-            elapsed = time.time() - start_time
-            status_code = response.status_code
-
-            if not should_skip:
-                access_logger.info(
-                    f"[{request_id}] {method} {path} -> {status_code} ({elapsed:.3f}s)"
-                )
-
-                # 异步记录API调用统计
-                try:
-                    db = SessionLocal()
-                    try:
-                        _record_api_call(db, method, path, status_code, elapsed)
-                    finally:
-                        db.close()
-                except Exception as e:
-                    logger.warning(f"API统计记录失败: {e}")
-
-            return response
-        except Exception as e:
-            elapsed = time.time() - start_time
-            if not should_skip:
-                access_logger.info(
-                    f"[{request_id}] {method} {path} -> ERROR ({elapsed:.3f}s): {str(e)}"
-                )
-            raise
-
-    async def __call__(self, scope, receive, send):
-        if scope["type"] != "http":
-            await self.app(scope, receive, send)
-            return
-        await super().__call__(scope, receive, send)
-
-
-def _record_api_call(db, method: str, path: str, status_code: int, elapsed: float):
-    """记录API调用到数据库统计表"""
-    # 简化路径以减少基数（去掉动态ID）
-    parts = path.split("/")
-    simplified_parts = []
-    for part in parts:
-        # 将UUID样式的路径段替换为{id}
-        if len(part) == 36 and part.count("-") == 4:
-            simplified_parts.append("{id}")
-        # 将纯数字路径段替换为{id}
-        elif part.isdigit():
-            simplified_parts.append("{id}")
-        else:
-            simplified_parts.append(part)
-    simplified_path = "/".join(simplified_parts)
-
-    # 统计记录通过数据库实现，简化版记录到日志
-    is_error = status_code >= 400
-    is_slow = elapsed >= SLOW_REQUEST_THRESHOLD
-
-    if is_slow:
-        logger.warning(
-            f"慢请求: {method} {simplified_path} -> {status_code} ({elapsed:.3f}s, 阈值: {SLOW_REQUEST_THRESHOLD}s)"
-        )
-
-
-@asynccontextmanager
-async def lifespan(app: FastAPI):
-    logger.info("Qihu-AIFlow v2.0.0 启动中...")
-
-    # 启动后台 Evolution Pipeline（知识库图谱已存在的用户配置自动恢复运行）
-    try:
-        from app.services.evolution_service import EvolutionWatcherManager
-        from app.models import UserEvolutionConfig
-        db = SessionLocal()
-        try:
-            configs = db.query(UserEvolutionConfig).filter(
-                UserEvolutionConfig.watcher_status == "running"
-            ).all()
-            if configs:
-                watcher = EvolutionWatcherManager()
-                for cfg in configs:
-                    try:
-                        watcher.start_user_evolution(cfg.user_id, lambda: SessionLocal())
-                        logger.info(f"[Evolution] 恢复用户 {cfg.user_id} 的进化Pipeline")
-                    except Exception as e:
-                        logger.warning(f"[Evolution] 恢复用户 {cfg.user_id} 失败: {e}")
-                logger.info(f"[Evolution] 已恢复 {len(configs)} 个用户的进化Pipeline")
-            else:
-                logger.info("[Evolution] 无待恢复的进化配置")
-        finally:
-            db.close()
-    except Exception as e:
-        logger.warning(f"[Evolution] Pipeline自动启动异常(不影响正常服务): {e}")
-
-    # 启动Redis事件总线
-    try:
-        from app.event_bus import get_event_bus
-        event_bus = get_event_bus()
-        event_bus.start(num_consumers=2)
-        logger.info("[EventBus] Redis事件总线已启动")
-    except Exception as e:
-        logger.warning(f"[EventBus] 启动失败(不影响正常服务): {e}")
-
-    logger.info("Qihu-AIFlow v2.0.0 启动完成")
-
-    yield
-
-    # 停止Redis事件总线
-    try:
-        from app.event_bus import get_event_bus
-        get_event_bus().stop()
-        logger.info("[EventBus] Redis事件总线已停止")
-    except Exception:
-        pass
-
-    # 优雅关闭：停止所有 Evolution Pipeline
-    try:
-        from app.services.evolution_service import EvolutionWatcherManager
-        EvolutionWatcherManager().shutdown_all()
-        logger.info("[Evolution] 所有Pipeline已停止")
-    except Exception:
-        pass
-
-    logger.info("Qihu-AIFlow 正在关闭...")
-
-
-app = FastAPI(
-    title="Qihu-AIFlow - 智能自动化PaaS平台",
-    version="1.0.0",
-    lifespan=lifespan,
-)
-
-# API调用追踪中间件
-app.add_middleware(APITrackingMiddleware)
-
-# CORS配置
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# 前台 API
-app.include_router(auth.router, prefix="/app/api/auth", tags=["认证"])
-app.include_router(chat.router, prefix="/app/api/chat", tags=["AI聊天"])
-app.include_router(channels.router, prefix="/app/api/channels", tags=["频道"])
-app.include_router(knowledge.router, prefix="/app/api/knowledge", tags=["知识库"])
-app.include_router(market.router, prefix="/app/api/market", tags=["应用市场"])
-app.include_router(token_usage.router, prefix="/app/api/token", tags=["Token驾驶舱"])
-app.include_router(payment.router, prefix="/app/api/payment", tags=["付费中心"])
-app.include_router(profile.router, prefix="/app/api/profile", tags=["个人中心"])
-app.include_router(notifications.router, prefix="/app/api/notifications", tags=["消息通知"])
-app.include_router(assets.router, prefix="/app/api/assets", tags=["资产管理"])
-app.include_router(evolution.router, prefix="/app/api/evolution", tags=["AI自进化"])
-
-# 后台 API
-app.include_router(dashboard.router, prefix="/app/api/admin/dashboard", tags=["后台-仪表盘"])
-app.include_router(users.router, prefix="/app/api/admin/users", tags=["后台-用户管理"])
-app.include_router(models.router, prefix="/app/api/admin/models", tags=["后台-模型管理"])
-app.include_router(settings.router, prefix="/app/api/admin/settings", tags=["后台-网站设置"])
-app.include_router(payment_admin.router, prefix="/app/api/admin/payment", tags=["后台-支付配置"])
-app.include_router(services.router, prefix="/app/api/admin/services", tags=["后台-增值服务"])
-app.include_router(membership_admin.router, prefix="/app/api/admin/membership", tags=["后台-会员管理"])
-app.include_router(ads.router, prefix="/app/api/admin/ads", tags=["后台-广告管理"])
-app.include_router(market_admin.router, prefix="/app/api/admin/market", tags=["后台-应用审核"])
-app.include_router(logs.router, prefix="/app/api/admin/logs", tags=["后台-日志风控"])
-
-
-@app.get("/app/api/health")
-async def health_check():
-    return {"status": "ok", "service": "Qihu-AIFlow"}
+"""

+Qihu-AIFlow FastAPI 主应用

+完整后端API，监听18080端口，所有接口以 /app 为前缀

+"""

+import sys

+import os

+import time

+import uuid

+import logging

+from contextlib import asynccontextmanager

+from fastapi import FastAPI, Request

+from fastapi.middleware.cors import CORSMiddleware

+from starlette.middleware.base import BaseHTTPMiddleware

+from datetime import datetime

+

+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

+

+from app.api import auth, chat, channels, knowledge, market, token_usage, payment, profile, notifications, assets, evolution

+from app.api.admin import dashboard, users, models, settings, payment_admin, services, membership_admin, ads, market_admin, logs, skills_admin

+from app.config import setup_file_logging, SLOW_REQUEST_THRESHOLD

+from app.database import SessionLocal

+from app.models import OperationLog as OperationLogModel, TokenUsageLog as TokenUsageLogModel

+

+# 导入平台适配器触发注册（AstrBot借鉴优化方案 P1）

+import app.platform_adapters  # noqa: F401 - 触发所有平台适配器装饰器注册

+

+# 初始化文件日志（按天轮转）

+access_logger = setup_file_logging()

+logger = logging.getLogger("aiflow")

+

+

+class APITrackingMiddleware(BaseHTTPMiddleware):

+    """API调用统计中间件 - 记录请求耗时，标记慢请求"""

+

+    async def dispatch(self, request: Request, call_next):

+        request_id = str(uuid.uuid4())

+        start_time = time.time()

+        path = request.url.path

+        method = request.method

+

+        # 跳过健康检查和静态资源

+        skip_paths = ["/app/api/health", "/favicon.ico"]

+        should_skip = any(path.startswith(p) for p in skip_paths)

+

+        try:

+            response = await call_next(request)

+            elapsed = time.time() - start_time

+            status_code = response.status_code

+

+            if not should_skip:

+                access_logger.info(

+                    f"[{request_id}] {method} {path} -> {status_code} ({elapsed:.3f}s)"

+                )

+

+                # 异步记录API调用统计

+                try:

+                    db = SessionLocal()

+                    try:

+                        _record_api_call(db, method, path, status_code, elapsed)

+                    finally:

+                        db.close()

+                except Exception as e:

+                    logger.warning(f"API统计记录失败: {e}")

+

+            return response

+        except Exception as e:

+            elapsed = time.time() - start_time

+            if not should_skip:

+                access_logger.info(

+                    f"[{request_id}] {method} {path} -> ERROR ({elapsed:.3f}s): {str(e)}"

+                )

+            raise

+

+    async def __call__(self, scope, receive, send):

+        if scope["type"] != "http":

+            await self.app(scope, receive, send)

+            return

+        await super().__call__(scope, receive, send)

+

+

+def _record_api_call(db, method: str, path: str, status_code: int, elapsed: float):

+    """记录API调用到数据库统计表"""

+    # 简化路径以减少基数（去掉动态ID）

+    parts = path.split("/")

+    simplified_parts = []

+    for part in parts:

+        # 将UUID样式的路径段替换为{id}

+        if len(part) == 36 and part.count("-") == 4:

+            simplified_parts.append("{id}")

+        # 将纯数字路径段替换为{id}

+        elif part.isdigit():

+            simplified_parts.append("{id}")

+        else:

+            simplified_parts.append(part)

+    simplified_path = "/".join(simplified_parts)

+

+    # 统计记录通过数据库实现，简化版记录到日志

+    is_error = status_code >= 400

+    is_slow = elapsed >= SLOW_REQUEST_THRESHOLD

+

+    if is_slow:

+        logger.warning(

+            f"慢请求: {method} {simplified_path} -> {status_code} ({elapsed:.3f}s, 阈值: {SLOW_REQUEST_THRESHOLD}s)"

+        )

+

+

+@asynccontextmanager

+async def lifespan(app: FastAPI):

+    logger.info("Qihu-AIFlow v2.0.0 启动中...")

+

+    # 启动后台 Evolution Pipeline（知识库图谱已存在的用户配置自动恢复运行）

+    try:

+        from app.services.evolution_service import EvolutionWatcherManager

+        from app.models import UserEvolutionConfig

+        db = SessionLocal()

+        try:

+            configs = db.query(UserEvolutionConfig).filter(

+                UserEvolutionConfig.watcher_status == "running"

+            ).all()

+            if configs:

+                watcher = EvolutionWatcherManager()

+                for cfg in configs:

+                    try:

+                        watcher.start_user_evolution(cfg.user_id, lambda: SessionLocal())

+                        logger.info(f"[Evolution] 恢复用户 {cfg.user_id} 的进化Pipeline")

+                    except Exception as e:

+                        logger.warning(f"[Evolution] 恢复用户 {cfg.user_id} 失败: {e}")

+                logger.info(f"[Evolution] 已恢复 {len(configs)} 个用户的进化Pipeline")

+            else:

+                logger.info("[Evolution] 无待恢复的进化配置")

+        finally:

+            db.close()

+    except Exception as e:

+        logger.warning(f"[Evolution] Pipeline自动启动异常(不影响正常服务): {e}")

+

+    # 启动Redis事件总线

+    try:

+        from app.event_bus import get_event_bus

+        event_bus = get_event_bus()

+        event_bus.start(num_consumers=2)

+        logger.info("[EventBus] Redis事件总线已启动")

+    except Exception as e:

+        logger.warning(f"[EventBus] 启动失败(不影响正常服务): {e}")

+

+    logger.info("Qihu-AIFlow v2.0.0 启动完成")

+

+    yield

+

+    # 停止Redis事件总线

+    try:

+        from app.event_bus import get_event_bus

+        get_event_bus().stop()

+        logger.info("[EventBus] Redis事件总线已停止")

+    except Exception:

+        pass

+

+    # 优雅关闭：停止所有 Evolution Pipeline

+    try:

+        from app.services.evolution_service import EvolutionWatcherManager

+        EvolutionWatcherManager().shutdown_all()

+        logger.info("[Evolution] 所有Pipeline已停止")

+    except Exception:

+        pass

+

+    logger.info("Qihu-AIFlow 正在关闭...")

+

+

+app = FastAPI(

+    title="Qihu-AIFlow - 智能自动化PaaS平台",

+    version="1.0.0",

+    lifespan=lifespan,

+)

+

+# API调用追踪中间件

+app.add_middleware(APITrackingMiddleware)

+

+# CORS配置

+app.add_middleware(

+    CORSMiddleware,

+    allow_origins=["*"],

+    allow_credentials=True,

+    allow_methods=["*"],

+    allow_headers=["*"],

+)

+

+# 前台 API

+app.include_router(auth.router, prefix="/app/api/auth", tags=["认证"])

+app.include_router(chat.router, prefix="/app/api/chat", tags=["AI聊天"])

+app.include_router(channels.router, prefix="/app/api/channels", tags=["频道"])

+app.include_router(knowledge.router, prefix="/app/api/knowledge", tags=["知识库"])

+app.include_router(market.router, prefix="/app/api/market", tags=["应用市场"])

+app.include_router(token_usage.router, prefix="/app/api/token", tags=["Token驾驶舱"])

+app.include_router(payment.router, prefix="/app/api/payment", tags=["付费中心"])

+app.include_router(profile.router, prefix="/app/api/profile", tags=["个人中心"])

+app.include_router(notifications.router, prefix="/app/api/notifications", tags=["消息通知"])

+app.include_router(assets.router, prefix="/app/api/assets", tags=["资产管理"])

+app.include_router(evolution.router, prefix="/app/api/evolution", tags=["AI自进化"])

+

+# 后台 API

+app.include_router(dashboard.router, prefix="/app/api/admin/dashboard", tags=["后台-仪表盘"])

+app.include_router(users.router, prefix="/app/api/admin/users", tags=["后台-用户管理"])

+app.include_router(models.router, prefix="/app/api/admin/models", tags=["后台-模型管理"])

+app.include_router(settings.router, prefix="/app/api/admin/settings", tags=["后台-网站设置"])

+app.include_router(payment_admin.router, prefix="/app/api/admin/payment", tags=["后台-支付配置"])

+app.include_router(services.router, prefix="/app/api/admin/services", tags=["后台-增值服务"])

+app.include_router(membership_admin.router, prefix="/app/api/admin/membership", tags=["后台-会员管理"])

+app.include_router(ads.router, prefix="/app/api/admin/ads", tags=["后台-广告管理"])

+app.include_router(market_admin.router, prefix="/app/api/admin/market", tags=["后台-应用审核"])

+app.include_router(logs.router, prefix="/app/api/admin/logs", tags=["后台-日志风控"])

+app.include_router(skills_admin.router, prefix="/app/api/admin/skills", tags=["后台-技能管理"])

+

+

+@app.get("/app/api/health")

+async def health_check():

+    return {"status": "ok", "service": "Qihu-AIFlow"}

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 43e07c4..32905ad 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,121 +1,123 @@
-import React, { useState, useEffect } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
-import type { User } from '@/types';
-import { AuthContext, AuthContextType } from '@/contexts/AuthContext';
-import { authAPI } from '@/api';
-
-// Layouts
-import FrontLayout from '@/components/layout/FrontLayout';
-import AdminLayout from '@/components/layout/AdminLayout';
-
-// Front Pages
-import LandingPage from '@/pages/front/LandingPage';
-import LoginPage from '@/pages/front/LoginPage';
-import ChatPage from '@/pages/front/ChatPage';
-import ChannelPage from '@/pages/front/ChannelPage';
-import KnowledgePage from '@/pages/front/KnowledgePage';
-import MarketPage from '@/pages/front/MarketPage';
-import TokenDashboardPage from '@/pages/front/TokenDashboardPage';
-import PricingPage from '@/pages/front/PricingPage';
-import ProfilePage from '@/pages/front/ProfilePage';
-import NotificationPage from '@/pages/front/NotificationPage';
-import AssetsPage from '@/pages/front/AssetsPage';
-import NovelPreviewPage from '@/pages/front/NovelPreviewPage';
-import EvolutionDashboard from '@/pages/front/EvolutionDashboard';
-
-// Admin Pages
-import AdminDashboard from '@/pages/admin/Dashboard';
-import AdminUsers from '@/pages/admin/Users';
-import AdminModels from '@/pages/admin/Models';
-import AdminSiteSettings from '@/pages/admin/SiteSettings';
-import AdminPayment from '@/pages/admin/Payment';
-import AdminServices from '@/pages/admin/Services';
-import AdminMembership from '@/pages/admin/Membership';
-import AdminAds from '@/pages/admin/Ads';
-import AdminMarket from '@/pages/admin/Market';
-import AdminLogs from '@/pages/admin/Logs';
-
-const App: React.FC = () => {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  // 初始化：从localStorage恢复登录状态
-  useEffect(() => {
-    const token = localStorage.getItem('aiflow_token');
-    const cachedUser = localStorage.getItem('aiflow_user');
-    if (token && cachedUser) {
-      try {
-        setUser(JSON.parse(cachedUser));
-      } catch {
-        localStorage.removeItem('aiflow_token');
-        localStorage.removeItem('aiflow_user');
-      }
-    }
-    setLoading(false);
-  }, []);
-
-  const login = (u: User) => {
-    setUser(u);
-    localStorage.setItem('aiflow_user', JSON.stringify(u));
-  };
-  const logout = () => {
-    setUser(null);
-    localStorage.removeItem('aiflow_token');
-    localStorage.removeItem('aiflow_user');
-  };
-  const isAdmin = user?.role === 'admin';
-
-  if (loading) {
-    return <div className="loading-screen">加载中...</div>;
-  }
-
-  return (
-    <AuthContext.Provider value={{ user, login, logout, isAdmin }}>
-      <Routes>
-        {/* Login */}
-        <Route path="/login" element={
-          user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LoginPage />
-        } />
-
-        {/* Root - Landing for guests, redirect for authenticated users */}
-        <Route path="/" element={
-          user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LandingPage />
-        } />
-
-        {/* Front Routes (authenticated only) */}
-        <Route path="/" element={<FrontLayout />}>
-          <Route path="chat" element={<ChatPage />} />
-          <Route path="chat/:id" element={<ChatPage />} />
-          <Route path="channels" element={<ChannelPage />} />
-          <Route path="knowledge" element={<KnowledgePage />} />
-          <Route path="market" element={<MarketPage />} />
-          <Route path="token" element={<TokenDashboardPage />} />
-          <Route path="pricing" element={<PricingPage />} />
-          <Route path="profile" element={<ProfilePage />} />
-          <Route path="notifications" element={<NotificationPage />} />
-          <Route path="assets" element={<AssetsPage />} />
-          <Route path="assets/novel/:id" element={<NovelPreviewPage />} />
-          <Route path="evolution" element={<EvolutionDashboard />} />
-        </Route>
-
-        {/* Admin Routes */}
-        <Route path="/admin" element={<AdminLayout />}>
-          <Route index element={<AdminDashboard />} />
-          <Route path="users" element={<AdminUsers />} />
-          <Route path="models" element={<AdminModels />} />
-          <Route path="settings" element={<AdminSiteSettings />} />
-          <Route path="payment" element={<AdminPayment />} />
-          <Route path="services" element={<AdminServices />} />
-          <Route path="membership" element={<AdminMembership />} />
-          <Route path="ads" element={<AdminAds />} />
-          <Route path="market" element={<AdminMarket />} />
-          <Route path="logs" element={<AdminLogs />} />
-        </Route>
-
-        <Route path="*" element={<Navigate to="/" />} />
-      </Routes>
-    </AuthContext.Provider>
-  );
-};
-
-export default App;
+import React, { useState, useEffect } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import type { User } from '@/types';
+import { AuthContext, AuthContextType } from '@/contexts/AuthContext';
+import { authAPI } from '@/api';
+
+// Layouts
+import FrontLayout from '@/components/layout/FrontLayout';
+import AdminLayout from '@/components/layout/AdminLayout';
+
+// Front Pages
+import LandingPage from '@/pages/front/LandingPage';
+import LoginPage from '@/pages/front/LoginPage';
+import ChatPage from '@/pages/front/ChatPage';
+import ChannelPage from '@/pages/front/ChannelPage';
+import KnowledgePage from '@/pages/front/KnowledgePage';
+import MarketPage from '@/pages/front/MarketPage';
+import TokenDashboardPage from '@/pages/front/TokenDashboardPage';
+import PricingPage from '@/pages/front/PricingPage';
+import ProfilePage from '@/pages/front/ProfilePage';
+import NotificationPage from '@/pages/front/NotificationPage';
+import AssetsPage from '@/pages/front/AssetsPage';
+import NovelPreviewPage from '@/pages/front/NovelPreviewPage';
+import EvolutionDashboard from '@/pages/front/EvolutionDashboard';
+
+// Admin Pages
+import AdminDashboard from '@/pages/admin/Dashboard';
+import AdminUsers from '@/pages/admin/Users';
+import AdminModels from '@/pages/admin/Models';
+import AdminSiteSettings from '@/pages/admin/SiteSettings';
+import AdminPayment from '@/pages/admin/Payment';
+import AdminServices from '@/pages/admin/Services';
+import AdminMembership from '@/pages/admin/Membership';
+import AdminAds from '@/pages/admin/Ads';
+import AdminMarket from '@/pages/admin/Market';
+import AdminLogs from '@/pages/admin/Logs';
+import AdminSkills from '@/pages/admin/Skills';
+
+const App: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // 初始化：从localStorage恢复登录状态
+  useEffect(() => {
+    const token = localStorage.getItem('aiflow_token');
+    const cachedUser = localStorage.getItem('aiflow_user');
+    if (token && cachedUser) {
+      try {
+        setUser(JSON.parse(cachedUser));
+      } catch {
+        localStorage.removeItem('aiflow_token');
+        localStorage.removeItem('aiflow_user');
+      }
+    }
+    setLoading(false);
+  }, []);
+
+  const login = (u: User) => {
+    setUser(u);
+    localStorage.setItem('aiflow_user', JSON.stringify(u));
+  };
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem('aiflow_token');
+    localStorage.removeItem('aiflow_user');
+  };
+  const isAdmin = user?.role === 'admin';
+
+  if (loading) {
+    return <div className="loading-screen">加载中...</div>;
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, login, logout, isAdmin }}>
+      <Routes>
+        {/* Login */}
+        <Route path="/login" element={
+          user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LoginPage />
+        } />
+
+        {/* Root - Landing for guests, redirect for authenticated users */}
+        <Route path="/" element={
+          user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LandingPage />
+        } />
+
+        {/* Front Routes (authenticated only) */}
+        <Route path="/" element={<FrontLayout />}>
+          <Route path="chat" element={<ChatPage />} />
+          <Route path="chat/:id" element={<ChatPage />} />
+          <Route path="channels" element={<ChannelPage />} />
+          <Route path="knowledge" element={<KnowledgePage />} />
+          <Route path="market" element={<MarketPage />} />
+          <Route path="token" element={<TokenDashboardPage />} />
+          <Route path="pricing" element={<PricingPage />} />
+          <Route path="profile" element={<ProfilePage />} />
+          <Route path="notifications" element={<NotificationPage />} />
+          <Route path="assets" element={<AssetsPage />} />
+          <Route path="assets/novel/:id" element={<NovelPreviewPage />} />
+          <Route path="evolution" element={<EvolutionDashboard />} />
+        </Route>
+
+        {/* Admin Routes */}
+        <Route path="/admin" element={<AdminLayout />}>
+          <Route index element={<AdminDashboard />} />
+          <Route path="users" element={<AdminUsers />} />
+          <Route path="models" element={<AdminModels />} />
+          <Route path="settings" element={<AdminSiteSettings />} />
+          <Route path="payment" element={<AdminPayment />} />
+          <Route path="services" element={<AdminServices />} />
+          <Route path="membership" element={<AdminMembership />} />
+          <Route path="ads" element={<AdminAds />} />
+          <Route path="market" element={<AdminMarket />} />
+          <Route path="logs" element={<AdminLogs />} />
+
+                  <Route path="skills" element={<AdminSkills />} />        </Route>
+
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </AuthContext.Provider>
+  );
+};
+
+export default App;
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 0757bd2..13a9a34 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,507 +1,528 @@
-/**
- * AIFlow API 客户端
- * 统一管理所有前后端API请求
- */
-const API_BASE = '/app/api';
-
-// 从localStorage获取token
-function getToken(): string | null {
-  return localStorage.getItem('aiflow_token');
-}
-
-// 通用请求方法
-async function request<T>(
-  endpoint: string,
-  options: RequestInit = {}
-): Promise<{ code: number; data: T; message: string }> {
-  const token = getToken();
-  const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
-    ...(options.headers as Record<string, string> || {}),
-  };
-  if (token) {
-    headers['Authorization'] = `Bearer ${token}`;
-  }
-  const res = await fetch(`${API_BASE}${endpoint}`, {
-    ...options,
-    headers,
-  });
-  if (res.status === 401) {
-    // 登录接口的401需要精确提示（用户名不存在 / 密码错误）
-    if (endpoint === '/auth/login') {
-      const err = await res.json().catch(() => ({ detail: '登录失败' }));
-      const error: any = new Error(err.detail || '登录失败');
-      error.status = 401;
-      error.detail = err.detail;
-      throw error;
-    }
-    // 其他接口的401 = token过期/未登录，清除状态并跳转
-    localStorage.removeItem('aiflow_token');
-    localStorage.removeItem('aiflow_user');
-    window.location.hash = '#/login';
-    throw new Error('未登录');
-  }
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ detail: '请求失败' }));
-    const error: any = new Error(err.detail || err.message || '请求失败');
-    error.status = res.status;
-    error.response = { status: res.status, data: err };
-    error.detail = err.detail;
-    throw error;
-  }
-  return res.json();
-}
-
-// GET请求
-function get<T>(endpoint: string): Promise<{ code: number; data: T; message: string }> {
-  return request<T>(endpoint);
-}
-
-// POST请求
-function post<T>(endpoint: string, body?: any): Promise<{ code: number; data: T; message: string }> {
-  return request<T>(endpoint, {
-    method: 'POST',
-    body: body ? JSON.stringify(body) : undefined,
-  });
-}
-
-// PUT请求
-function put<T>(endpoint: string, body?: any): Promise<{ code: number; data: T; message: string }> {
-  return request<T>(endpoint, {
-    method: 'PUT',
-    body: body ? JSON.stringify(body) : undefined,
-  });
-}
-
-// DELETE请求
-function del<T>(endpoint: string): Promise<{ code: number; data: T; message: string }> {
-  return request<T>(endpoint, { method: 'DELETE' });
-}
-
-// ============================================================
-// 认证相关API
-// ============================================================
-export const authAPI = {
-  login: (username: string, password: string) =>
-    post<any>('/auth/login', { username, password }),
-  register: (data: { username: string; password: string; email?: string; phone?: string }) =>
-    post<any>('/auth/register', data),
-  getMe: () => get<any>('/auth/me'),
-  logout: () => post<any>('/auth/logout'),
-  getSettings: () => get<any>('/auth/settings'),
-};
-
-// ============================================================
-// 聊天相关API
-// ============================================================
-export const chatAPI = {
-  getConversations: (status?: string) =>
-    get<any[]>(`/chat/conversations${status ? `?status=${status}` : ''}`),
-  createConversation: (data: { title: string; model_id?: string }) =>
-    post<any>('/chat/conversations', data),
-  updateConversation: (id: string, data: any) =>
-    put<any>(`/chat/conversations/${id}`, data),
-  deleteConversation: (id: string) =>
-    del<any>(`/chat/conversations/${id}`),
-  getMessages: (convId: string) =>
-    get<any[]>(`/chat/conversations/${convId}/messages`),
-  sendMessage: (convId: string, data: { content: string; model_id?: string; agent_ids?: string[]; skill_ids?: string[]; knowledge_ids?: string[]; use_tools?: boolean }) =>
-    post<any>(`/chat/conversations/${convId}/messages`, data),
-  clearContext: (convId: string) =>
-    post<any>(`/chat/conversations/${convId}/clear`),
-  convertToKnowledgeGraph: (convId: string) =>
-    post<any>(`/chat/conversations/${convId}/to-knowledge-graph`),
-  getModels: () => get<any[]>('/chat/models'),
-};
-
-// ============================================================
-// 频道相关API
-// ============================================================
-export const channelAPI = {
-  getChannels: () => get<any[]>('/channels/'),
-  createChannel: (data: any) => post<any>('/channels/', data),
-  getChannel: (id: string) => get<any>(`/channels/${id}`),
-  updateChannel: (id: string, data: any) => put<any>(`/channels/${id}`, data),
-  deleteChannel: (id: string) => del<any>(`/channels/${id}`),
-  connectChannel: (id: string) => post<any>(`/channels/${id}/connect`),
-  disconnectChannel: (id: string) => post<any>(`/channels/${id}/disconnect`),
-  getPlatformConfigs: () => get<any>('/channels/platforms/config'),
-  webhookMessage: (id: string, data: { from_user: string; content: string; message_type?: string }) =>
-    post<any>(`/channels/${id}/webhook`, data),
-  getMembers: (id: string) => get<any[]>(`/channels/${id}/members`),
-  addMember: (id: string, userId: string) => post<any>(`/channels/${id}/members`, { user_id: userId }),
-  removeMember: (id: string, userId: string) => del<any>(`/channels/${id}/members/${userId}`),
-  getMessages: (id: string, params?: { limit?: number; offset?: number }) => {
-    const sp = new URLSearchParams();
-    if (params?.limit) sp.set('limit', String(params.limit));
-    if (params?.offset) sp.set('offset', String(params.offset));
-    const qs = sp.toString();
-    return get<any[]>(`/channels/${id}/messages${qs ? `?${qs}` : ''}`);
-  },
-  sendMessage: (id: string, content: string) => post<any>(`/channels/${id}/messages`, { content }),
-  authorize: (platform: string) => post<any>('/channels/authorize', { platform }),
-  scanAuthorize: (platform: string, credentials?: Record<string, string>) => post<any>(`/channels/authorize/scan?platform=${platform}`, credentials ? { credentials } : {}),
-  scanAuthorizeStatus: (platform: string) => post<any>(`/channels/authorize/scan/status?platform=${platform}`),
-};
-
-// ============================================================
-// 知识库相关API
-// ============================================================
-export const knowledgeAPI = {
-  getBases: () => get<any[]>('/knowledge/bases'),
-  createBase: (data: any) => post<any>('/knowledge/bases', data),
-  getBase: (id: string) => get<any>(`/knowledge/bases/${id}`),
-  updateBase: (id: string, data: any) => put<any>(`/knowledge/bases/${id}`, data),
-  deleteBase: (id: string) => del<any>(`/knowledge/bases/${id}`),
-  getDocuments: (baseId: string) => get<any>(`/knowledge/bases/${baseId}/documents`),
-  getDocument: (baseId: string, docId: string) => get<any>(`/knowledge/bases/${baseId}/documents/${docId}`),
-  uploadDocument: (baseId: string, data: any) => post<any>(`/knowledge/bases/${baseId}/documents`, data),
-  deleteDocument: (baseId: string, docId: string) => del<any>(`/knowledge/bases/${baseId}/documents/${docId}`),
-  getDirectories: () => get<any[]>('/knowledge/directories'),
-  createDirectory: (data: any) => post<any>('/knowledge/directories', data),
-  buildGraph: (baseId: string) => post<any>(`/knowledge/bases/${baseId}/build-graph`),
-  getGraph: (baseId: string) => get<any>(`/knowledge/bases/${baseId}/graph`),
-  searchQA: (baseId: string, question: string) => post<any>('/knowledge/qa', { base_id: baseId, question }),
-  searchDocuments: (baseId: string, keyword: string) => get<any[]>(`/knowledge/bases/${baseId}/search?keyword=${encodeURIComponent(keyword)}`),
-};
-
-// ============================================================
-// 应用市场相关API
-// ============================================================
-export const marketAPI = {
-  getApps: (params?: { type?: string; source?: string; search?: string; page?: number; page_size?: number }) => {
-    const searchParams = new URLSearchParams();
-    if (params?.type) searchParams.set('type', params.type);
-    if (params?.source) searchParams.set('source', params.source);
-    if (params?.search) searchParams.set('search', params.search);
-    if (params?.page) searchParams.set('page', String(params.page));
-    if (params?.page_size) searchParams.set('page_size', String(params.page_size));
-    const qs = searchParams.toString();
-    return get<any>(`/market/apps${qs ? `?${qs}` : ''}`);
-  },
-  getApp: (id: string) => get<any>(`/market/apps/${id}`),
-  createApp: (data: any) => post<any>('/market/apps', data),
-  purchaseApp: (id: string) => post<any>(`/market/apps/${id}/purchase`),
-  installApp: (id: string) => post<any>(`/market/apps/${id}/install`),
-  uninstallApp: (id: string) => del<any>(`/market/apps/${id}/uninstall`),
-  reviewApp: (id: string, data: { rating: number; content?: string }) =>
-    post<any>(`/market/apps/${id}/review`, data),
-  getMyApps: () => get<any[]>('/market/my-apps'),
-  getReviews: (appId: string) => get<any[]>(`/market/reviews/${appId}`),
-};
-
-// ============================================================
-// Token相关API
-// ============================================================
-export const tokenAPI = {
-  getOverview: () => get<any>('/token/overview'),
-  getRankings: () => get<any>('/token/rankings'),
-  getLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    const qs = sp.toString();
-    return get<any[]>(`/token/logs${qs ? `?${qs}` : ''}`);
-  },
-  getBalance: () => get<any>('/token/balance'),
-  recharge: (amount: number) => post<any>('/token/recharge', { amount }),
-};
-
-// ============================================================
-// 付费相关API
-// ============================================================
-export const paymentAPI = {
-  getPlans: () => get<any[]>('/payment/plans'),
-  createOrder: (data: any) => post<any>('/payment/orders', data),
-  getOrders: (status?: string) => get<any[]>(`/payment/orders${status ? `?status=${status}` : ''}`),
-  getOrder: (id: string) => get<any>(`/payment/orders/${id}`),
-  payOrder: (id: string, method?: string) => post<any>(`/payment/orders/${id}/pay`, { payment_method: method }),
-  getCoupons: () => get<any[]>('/payment/coupons'),
-  useCoupon: (code: string) => post<any>('/payment/coupons/use', { code }),
-  getServices: () => get<any[]>('/payment/services'),
-  createCustomOrder: (data: any) => post<any>('/payment/custom-services', data),
-  createServiceRequest: (data: any) => post<any>('/payment/service-requests', data),
-};
-
-// ============================================================
-// 个人中心相关API
-// ============================================================
-export const profileAPI = {
-  getProfile: () => get<any>('/profile/'),
-  updateProfile: (data: any) => put<any>('/profile/', data),
-  updatePassword: (data: { old_password: string; new_password: string }) =>
-    put<any>('/profile/password', data),
-  getLoginLogs: () => get<any[]>('/profile/login-logs'),
-  getApiKeys: () => get<any[]>('/profile/api-keys'),
-  createApiKey: (name?: string) => post<any>('/profile/api-keys', { name }),
-  updateApiKey: (id: string, status: string) => put<any>(`/profile/api-keys/${id}`, { status }),
-  getMembership: () => get<any>('/profile/membership'),
-  getPurchasedApps: () => get<any[]>('/profile/purchased-apps'),
-};
-
-// ============================================================
-// 通知相关API
-// ============================================================
-export const notificationAPI = {
-  getNotifications: (params?: { type?: string; page?: number }) => {
-    const sp = new URLSearchParams();
-    if (params?.type) sp.set('type', params.type);
-    if (params?.page) sp.set('page', String(params.page));
-    const qs = sp.toString();
-    return get<any[]>(`/notifications/${qs ? `?${qs}` : ''}`);
-  },
-  markRead: (id: string) => put<any>(`/notifications/${id}/read`),
-  markAllRead: () => put<any>('/notifications/read-all'),
-  getUnreadCount: () => get<any>('/notifications/unread-count'),
-};
-
-// ============================================================
-// 资产管理相关API
-// ============================================================
-export const assetsAPI = {
-  getAssets: (category?: string) =>
-    get<any[]>(`/assets/${category ? `?category=${category}` : ''}`),
-  createAsset: (data: any) => post<any>('/assets/', data),
-  getAsset: (id: string) => get<any>(`/assets/${id}`),
-  updateAsset: (id: string, data: any) => put<any>(`/assets/${id}`, data),
-  deleteAsset: (id: string) => del<any>(`/assets/${id}`),
-  getCategories: () => get<any[]>('/assets/categories'),
-  getNovelChapters: (novelId: string) => get<any[]>(`/assets/novels/${novelId}/chapters`),
-  addChapter: (novelId: string, data: any) => post<any>(`/assets/novels/${novelId}/chapters`, data),
-};
-
-// ============================================================
-// 后台管理API
-// ============================================================
-export const adminAPI = {
-  // 仪表盘
-  getStats: () => get<any>('/admin/dashboard/stats'),
-  getRecentLogs: () => get<any[]>('/admin/dashboard/recent-logs'),
-  getRecentAudit: () => get<any[]>('/admin/dashboard/recent-audit'),
-  // 用户管理
-  getUsers: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/users/${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  getUser: (id: string) => get<any>(`/admin/users/${id}`),
-  banUser: (id: string) => put<any>(`/admin/users/${id}/ban`),
-  unbanUser: (id: string) => put<any>(`/admin/users/${id}/unban`),
-  getRegisterSettings: () => get<any>('/admin/users/register-settings'),
-  updateRegisterSettings: (data: any) => put<any>('/admin/users/register-settings', data),
-  // 模型管理
-  getProviders: () => get<any[]>('/admin/models/providers'),
-  addProvider: (data: any) => post<any>('/admin/models/providers', data),
-  updateProvider: (id: string, data: any) => put<any>(`/admin/models/providers/${id}`, data),
-  deleteProvider: (id: string) => del<any>(`/admin/models/providers/${id}`),
-  fetchModels: (id: string) => post<any>(`/admin/models/providers/${id}/fetch-models`),
-  addModels: (id: string, modelIds: string[]) => post<any>(`/admin/models/providers/${id}/add-models`, { model_ids: modelIds }),
-  getProtocols: () => get<any[]>('/admin/models/protocols'),
-  getAdminModels: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/models/${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  addModel: (data: any) => post<any>('/admin/models/', data),
-  updateModel: (id: string, data: any) => put<any>(`/admin/models/${id}`, data),
-  deleteModel: (id: string) => del<any>(`/admin/models/${id}`),
-  toggleModel: (id: string, isEnabled: boolean) => put<any>(`/admin/models/${id}/toggle?is_enabled=${isEnabled}`),
-  setDefaultModel: (id: string) => put<any>(`/admin/models/${id}/set-default`),
-  getModelStats: () => get<any>('/admin/models/stats'),
-  // 网站设置
-  getSiteSettings: () => get<any>('/admin/settings/site'),
-  updateSiteSettings: (data: any) => put<any>('/admin/settings/site', data),
-  getEmailConfig: () => get<any>('/admin/settings/email'),
-  updateEmailConfig: (data: any) => put<any>('/admin/settings/email', data),
-  testEmail: (params?: { test_to?: string; test_subject?: string; test_body?: string }) => {
-    const qs = new URLSearchParams();
-    if (params?.test_to) qs.set('test_to', params.test_to);
-    if (params?.test_subject) qs.set('test_subject', params.test_subject);
-    if (params?.test_body) qs.set('test_body', params.test_body);
-    const qstr = qs.toString();
-    return post<any>(`/admin/settings/email/test${qstr ? `?${qstr}` : ''}`);
-  },
-  generateEmailContent: (topic: string) => post<any>(`/admin/settings/email/generate-content?topic=${encodeURIComponent(topic)}`),
-  getSmsConfig: () => get<any>('/admin/settings/sms'),
-  updateSmsConfig: (data: any) => put<any>('/admin/settings/sms', data),
-  testSms: () => post<any>('/admin/settings/sms/test'),
-  // 支付配置
-  getPaymentConfigs: () => get<any[]>('/admin/payment/configs'),
-  updatePaymentConfig: (id: string, data: any) => put<any>(`/admin/payment/configs/${id}`, data),
-  getAdminOrders: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/payment/orders${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  refundOrder: (id: string) => put<any>(`/admin/payment/orders/${id}/refund`),
-  // 增值服务
-  getServices: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/services/${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  addService: (data: any) => post<any>('/admin/services/', data),
-  updateService: (id: string, data: any) => put<any>(`/admin/services/${id}`, data),
-  deleteService: (id: string) => del<any>(`/admin/services/${id}`),
-  getCustomOrders: (status?: string) => get<any[]>(`/admin/services/custom-orders${status ? `?status=${status}` : ''}`),
-  updateCustomOrder: (id: string, data: any) => put<any>(`/admin/services/custom-orders/${id}`, data),
-  getCustomRequests: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/services/custom-requests${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  updateCustomRequest: (id: string, data: any) => put<any>(`/admin/services/custom-requests/${id}`, data),
-  getAvailableAgents: () => get<any[]>('/admin/services/agents'),
-  assignAgentToService: (id: string, agentId: string) => put<any>(`/admin/services/${id}/agent?agent_id=${agentId}`),
-  // 会员管理
-  getPlans: () => get<any[]>('/admin/membership/plans'),
-  addPlan: (data: any) => post<any>('/admin/membership/plans', data),
-  updatePlan: (id: string, data: any) => put<any>(`/admin/membership/plans/${id}`, data),
-  deletePlan: (id: string) => del<any>(`/admin/membership/plans/${id}`),
-  getSubscriptions: () => get<any[]>('/admin/membership/subscriptions'),
-  getAutomationRules: () => get<any>('/admin/membership/automation-rules'),
-  // 广告管理
-  getAds: () => get<any[]>('/admin/ads/'),
-  addAd: (data: any) => post<any>('/admin/ads/', data),
-  updateAd: (id: string, data: any) => put<any>(`/admin/ads/${id}`, data),
-  deleteAd: (id: string) => del<any>(`/admin/ads/${id}`),
-  toggleAd: (id: string) => put<any>(`/admin/ads/${id}/toggle`),
-  // 应用市场审核
-  getPendingApps: () => get<any[]>('/admin/market/apps/pending'),
-  approveApp: (id: string) => put<any>(`/admin/market/apps/${id}/approve`),
-  rejectApp: (id: string) => put<any>(`/admin/market/apps/${id}/reject`),
-  getAdminApps: () => get<any[]>('/admin/market/apps'),
-  updateApp: (id: string, data: any) => put<any>(`/admin/market/apps/${id}`, data),
-  getCoupons: () => get<any[]>('/admin/market/coupons'),
-  addCoupon: (data: any) => post<any>('/admin/market/coupons', data),
-  updateCoupon: (id: string, data: any) => put<any>(`/admin/market/coupons/${id}`, data),
-  deleteCoupon: (id: string) => del<any>(`/admin/market/coupons/${id}`),
-  assignCoupon: (id: string, userId: string) => post<any>(`/admin/market/coupons/${id}/assign`, { user_id: userId }),
-  // 日志与风控
-  getOperationLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/logs/operations${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  getTokenLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/logs/token-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  getPaymentLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/logs/payment-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  getAuditLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any[]>(`/admin/logs/audit-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  // 新增：日志统计
-  getLogStats: () => get<any>('/admin/logs/stats'),
-  // 新增：API调用统计
-  getApiStats: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/logs/api-stats${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  // 新增：慢请求记录
-  getSlowRequests: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/logs/slow-requests${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  // 新增：操作类型枚举
-  getActionTypes: () => get<any>('/admin/logs/action-types'),
-  // 新增：审计日志导出
-  exportAuditLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/logs/export/audit-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  exportOperationLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/logs/export/operations${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  exportTokenLogs: (params?: any) => {
-    const sp = new URLSearchParams();
-    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
-    return get<any>(`/admin/logs/export/token-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
-  },
-  getRiskRules: () => get<any[]>('/admin/logs/risk-rules'),
-  addRiskRule: (data: any) => post<any>('/admin/logs/risk-rules', data),
-  updateRiskRule: (id: string, data: any) => put<any>(`/admin/logs/risk-rules/${id}`, data),
-  deleteRiskRule: (id: string) => del<any>(`/admin/logs/risk-rules/${id}`),
-};
-
-// ===== AI自进化API =====
-export const evolutionAPI = {
-  // 驾驶舱面板
-  getSkillTree: () => get<import('@/types').SkillTreeData>('/evolution/dashboard/skill-tree'),
-  getTimeline: (eventType?: string) =>
-    get<import('@/types').EvolutionEvent[]>('/evolution/dashboard/timeline' + (eventType ? `?event_type=${eventType}` : '')),
-  getStatistics: () => get<import('@/types').StatisticsData>('/evolution/dashboard/statistics'),
-  getProfile: () => get<import('@/types').EvolutionProfile>('/evolution/dashboard/profile'),
-
-  // 技能管理
-  getSkills: (params?: { state?: string; keyword?: string; sort_by?: string; order?: string }) => {
-    const query = new URLSearchParams();
-    if (params?.state) query.append('state', params.state);
-    if (params?.keyword) query.append('keyword', params.keyword);
-    if (params?.sort_by) query.append('sort_by', params.sort_by);
-    if (params?.order) query.append('order', params.order);
-    const qs = query.toString();
-    return get<import('@/types').EvolutionSkill[]>('/evolution/skills' + (qs ? `?${qs}` : ''));
-  },
-  getSkillDetail: (name: string) => get<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(name)}`),
-  updateSkill: (name: string, data: { description?: string; tags?: string[]; category?: string }) =>
-    put<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(name)}`, data),
-  deleteSkill: (name: string) => del(`/evolution/skills/${encodeURIComponent(name)}`),
-  freezeSkill: (name: string) => post(`/evolution/skills/${encodeURIComponent(name)}/freeze`),
-  unfreezeSkill: (name: string) => post(`/evolution/skills/${encodeURIComponent(name)}/unfreeze`),
-  getSkillHistory: (name: string) => get<import('@/types').EvolutionEvent[]>(`/evolution/skills/${encodeURIComponent(name)}/history`),
-  getSkillTrajectories: (name: string) => get<import('@/types').EvolutionTrajectory[]>(`/evolution/skills/${encodeURIComponent(name)}/trajectories`),
-
-  // 事件
-  getEvents: (params?: { event_type?: string; skill_name?: string; limit?: number }) => {
-    const query = new URLSearchParams();
-    if (params?.event_type) query.append('event_type', params.event_type);
-    if (params?.skill_name) query.append('skill_name', params.skill_name);
-    if (params?.limit) query.append('limit', String(params.limit));
-    const qs = query.toString();
-    return get<import('@/types').EvolutionEvent[]>('/evolution/events' + (qs ? `?${qs}` : ''));
-  },
-
-  // 轨迹提交
-  submitTrajectory: (data: { conversation_id: string; messages: any[] }) =>
-    post('/evolution/trajectory/submit', data),
-
-  // v2: 技能回滚
-  rollbackSkill: (skillName: string, version: number) =>
-    post<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(skillName)}/rollback/${version}`),
-
-  // v2: 发布到市场
-  publishSkill: (skillName: string, data: { price: number; market_description: string }) =>
-    post(`/evolution/skills/${encodeURIComponent(skillName)}/publish`, data),
-
-  // v2: 团队共享
-  shareToTeam: (skillName: string, teamId: string) =>
-    post(`/evolution/skills/${encodeURIComponent(skillName)}/share-to-team`, { team_id: teamId }),
-
-  // v2: 流水线状态
-  getPipelineStatus: () => get<import('@/types').PipelineStatus>('/evolution/pipeline/status'),
-
-  // v2: 手动触发流水线
-  triggerPipeline: () => post('/evolution/pipeline/trigger'),
-
-  // v2: Watcher状态
-  getWatcherStatus: () => get<import('@/types').WatcherStatus>('/evolution/watcher/status'),
-
-  // v2: 进化报告
-  getReports: (reportType?: string) => {
-    const qs = reportType ? `?report_type=${reportType}` : '';
-    return get<import('@/types').EvolutionReport[]>(`/evolution/reports${qs}`);
-  },
-  getReportDetail: (reportId: string) => get<import('@/types').EvolutionReport>(`/evolution/reports/${reportId}`),
-};
+/**
+ * AIFlow API 客户端
+ * 统一管理所有前后端API请求
+ */
+const API_BASE = '/app/api';
+
+// 从localStorage获取token
+function getToken(): string | null {
+  return localStorage.getItem('aiflow_token');
+}
+
+// 通用请求方法
+async function request<T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<{ code: number; data: T; message: string }> {
+  const token = getToken();
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string> || {}),
+  };
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  const res = await fetch(`${API_BASE}${endpoint}`, {
+    ...options,
+    headers,
+  });
+  if (res.status === 401) {
+    // 登录接口的401需要精确提示（用户名不存在 / 密码错误）
+    if (endpoint === '/auth/login') {
+      const err = await res.json().catch(() => ({ detail: '登录失败' }));
+      const error: any = new Error(err.detail || '登录失败');
+      error.status = 401;
+      error.detail = err.detail;
+      throw error;
+    }
+    // 其他接口的401 = token过期/未登录，清除状态并跳转
+    localStorage.removeItem('aiflow_token');
+    localStorage.removeItem('aiflow_user');
+    window.location.hash = '#/login';
+    throw new Error('未登录');
+  }
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ detail: '请求失败' }));
+    const error: any = new Error(err.detail || err.message || '请求失败');
+    error.status = res.status;
+    error.response = { status: res.status, data: err };
+    error.detail = err.detail;
+    throw error;
+  }
+  return res.json();
+}
+
+// GET请求
+function get<T>(endpoint: string): Promise<{ code: number; data: T; message: string }> {
+  return request<T>(endpoint);
+}
+
+// POST请求
+function post<T>(endpoint: string, body?: any): Promise<{ code: number; data: T; message: string }> {
+  return request<T>(endpoint, {
+    method: 'POST',
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+// PUT请求
+function put<T>(endpoint: string, body?: any): Promise<{ code: number; data: T; message: string }> {
+  return request<T>(endpoint, {
+    method: 'PUT',
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+// DELETE请求
+function del<T>(endpoint: string): Promise<{ code: number; data: T; message: string }> {
+  return request<T>(endpoint, { method: 'DELETE' });
+}
+
+// ============================================================
+// 认证相关API
+// ============================================================
+export const authAPI = {
+  login: (username: string, password: string) =>
+    post<any>('/auth/login', { username, password }),
+  register: (data: { username: string; password: string; email?: string; phone?: string }) =>
+    post<any>('/auth/register', data),
+  getMe: () => get<any>('/auth/me'),
+  logout: () => post<any>('/auth/logout'),
+  getSettings: () => get<any>('/auth/settings'),
+};
+
+// ============================================================
+// 聊天相关API
+// ============================================================
+export const chatAPI = {
+  getConversations: (status?: string) =>
+    get<any[]>(`/chat/conversations${status ? `?status=${status}` : ''}`),
+  createConversation: (data: { title: string; model_id?: string }) =>
+    post<any>('/chat/conversations', data),
+  updateConversation: (id: string, data: any) =>
+    put<any>(`/chat/conversations/${id}`, data),
+  deleteConversation: (id: string) =>
+    del<any>(`/chat/conversations/${id}`),
+  getMessages: (convId: string) =>
+    get<any[]>(`/chat/conversations/${convId}/messages`),
+  sendMessage: (convId: string, data: { content: string; model_id?: string; agent_ids?: string[]; skill_ids?: string[]; knowledge_ids?: string[]; use_tools?: boolean }) =>
+    post<any>(`/chat/conversations/${convId}/messages`, data),
+  clearContext: (convId: string) =>
+    post<any>(`/chat/conversations/${convId}/clear`),
+  convertToKnowledgeGraph: (convId: string) =>
+    post<any>(`/chat/conversations/${convId}/to-knowledge-graph`),
+  getModels: () => get<any[]>('/chat/models'),
+};
+
+// ============================================================
+// 频道相关API
+// ============================================================
+export const channelAPI = {
+  getChannels: () => get<any[]>('/channels/'),
+  createChannel: (data: any) => post<any>('/channels/', data),
+  getChannel: (id: string) => get<any>(`/channels/${id}`),
+  updateChannel: (id: string, data: any) => put<any>(`/channels/${id}`, data),
+  deleteChannel: (id: string) => del<any>(`/channels/${id}`),
+  connectChannel: (id: string) => post<any>(`/channels/${id}/connect`),
+  disconnectChannel: (id: string) => post<any>(`/channels/${id}/disconnect`),
+  getPlatformConfigs: () => get<any>('/channels/platforms/config'),
+  webhookMessage: (id: string, data: { from_user: string; content: string; message_type?: string }) =>
+    post<any>(`/channels/${id}/webhook`, data),
+  getMembers: (id: string) => get<any[]>(`/channels/${id}/members`),
+  addMember: (id: string, userId: string) => post<any>(`/channels/${id}/members`, { user_id: userId }),
+  removeMember: (id: string, userId: string) => del<any>(`/channels/${id}/members/${userId}`),
+  getMessages: (id: string, params?: { limit?: number; offset?: number }) => {
+    const sp = new URLSearchParams();
+    if (params?.limit) sp.set('limit', String(params.limit));
+    if (params?.offset) sp.set('offset', String(params.offset));
+    const qs = sp.toString();
+    return get<any[]>(`/channels/${id}/messages${qs ? `?${qs}` : ''}`);
+  },
+  sendMessage: (id: string, content: string) => post<any>(`/channels/${id}/messages`, { content }),
+  authorize: (platform: string) => post<any>('/channels/authorize', { platform }),
+  scanAuthorize: (platform: string, credentials?: Record<string, string>) => post<any>(`/channels/authorize/scan?platform=${platform}`, credentials ? { credentials } : {}),
+  scanAuthorizeStatus: (platform: string) => post<any>(`/channels/authorize/scan/status?platform=${platform}`),
+};
+
+// ============================================================
+// 知识库相关API
+// ============================================================
+export const knowledgeAPI = {
+  getBases: () => get<any[]>('/knowledge/bases'),
+  createBase: (data: any) => post<any>('/knowledge/bases', data),
+  getBase: (id: string) => get<any>(`/knowledge/bases/${id}`),
+  updateBase: (id: string, data: any) => put<any>(`/knowledge/bases/${id}`, data),
+  deleteBase: (id: string) => del<any>(`/knowledge/bases/${id}`),
+  getDocuments: (baseId: string) => get<any>(`/knowledge/bases/${baseId}/documents`),
+  getDocument: (baseId: string, docId: string) => get<any>(`/knowledge/bases/${baseId}/documents/${docId}`),
+  uploadDocument: (baseId: string, data: any) => post<any>(`/knowledge/bases/${baseId}/documents`, data),
+  deleteDocument: (baseId: string, docId: string) => del<any>(`/knowledge/bases/${baseId}/documents/${docId}`),
+  getDirectories: () => get<any[]>('/knowledge/directories'),
+  createDirectory: (data: any) => post<any>('/knowledge/directories', data),
+  buildGraph: (baseId: string) => post<any>(`/knowledge/bases/${baseId}/build-graph`),
+  getGraph: (baseId: string) => get<any>(`/knowledge/bases/${baseId}/graph`),
+  searchQA: (baseId: string, question: string) => post<any>('/knowledge/qa', { base_id: baseId, question }),
+  searchDocuments: (baseId: string, keyword: string) => get<any[]>(`/knowledge/bases/${baseId}/search?keyword=${encodeURIComponent(keyword)}`),
+};
+
+// ============================================================
+// 应用市场相关API
+// ============================================================
+export const marketAPI = {
+  getApps: (params?: { type?: string; source?: string; search?: string; page?: number; page_size?: number }) => {
+    const searchParams = new URLSearchParams();
+    if (params?.type) searchParams.set('type', params.type);
+    if (params?.source) searchParams.set('source', params.source);
+    if (params?.search) searchParams.set('search', params.search);
+    if (params?.page) searchParams.set('page', String(params.page));
+    if (params?.page_size) searchParams.set('page_size', String(params.page_size));
+    const qs = searchParams.toString();
+    return get<any>(`/market/apps${qs ? `?${qs}` : ''}`);
+  },
+  getApp: (id: string) => get<any>(`/market/apps/${id}`),
+  createApp: (data: any) => post<any>('/market/apps', data),
+  purchaseApp: (id: string) => post<any>(`/market/apps/${id}/purchase`),
+  installApp: (id: string) => post<any>(`/market/apps/${id}/install`),
+  uninstallApp: (id: string) => del<any>(`/market/apps/${id}/uninstall`),
+  reviewApp: (id: string, data: { rating: number; content?: string }) =>
+    post<any>(`/market/apps/${id}/review`, data),
+  getMyApps: () => get<any[]>('/market/my-apps'),
+  getReviews: (appId: string) => get<any[]>(`/market/reviews/${appId}`),
+};
+
+// ============================================================
+// Token相关API
+// ============================================================
+export const tokenAPI = {
+  getOverview: () => get<any>('/token/overview'),
+  getRankings: () => get<any>('/token/rankings'),
+  getLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    const qs = sp.toString();
+    return get<any[]>(`/token/logs${qs ? `?${qs}` : ''}`);
+  },
+  getBalance: () => get<any>('/token/balance'),
+  recharge: (amount: number) => post<any>('/token/recharge', { amount }),
+};
+
+// ============================================================
+// 付费相关API
+// ============================================================
+export const paymentAPI = {
+  getPlans: () => get<any[]>('/payment/plans'),
+  createOrder: (data: any) => post<any>('/payment/orders', data),
+  getOrders: (status?: string) => get<any[]>(`/payment/orders${status ? `?status=${status}` : ''}`),
+  getOrder: (id: string) => get<any>(`/payment/orders/${id}`),
+  payOrder: (id: string, method?: string) => post<any>(`/payment/orders/${id}/pay`, { payment_method: method }),
+  getCoupons: () => get<any[]>('/payment/coupons'),
+  useCoupon: (code: string) => post<any>('/payment/coupons/use', { code }),
+  getServices: () => get<any[]>('/payment/services'),
+  createCustomOrder: (data: any) => post<any>('/payment/custom-services', data),
+  createServiceRequest: (data: any) => post<any>('/payment/service-requests', data),
+};
+
+// ============================================================
+// 个人中心相关API
+// ============================================================
+export const profileAPI = {
+  getProfile: () => get<any>('/profile/'),
+  updateProfile: (data: any) => put<any>('/profile/', data),
+  updatePassword: (data: { old_password: string; new_password: string }) =>
+    put<any>('/profile/password', data),
+  getLoginLogs: () => get<any[]>('/profile/login-logs'),
+  getApiKeys: () => get<any[]>('/profile/api-keys'),
+  createApiKey: (name?: string) => post<any>('/profile/api-keys', { name }),
+  updateApiKey: (id: string, status: string) => put<any>(`/profile/api-keys/${id}`, { status }),
+  getMembership: () => get<any>('/profile/membership'),
+  getPurchasedApps: () => get<any[]>('/profile/purchased-apps'),
+};
+
+// ============================================================
+// 通知相关API
+// ============================================================
+export const notificationAPI = {
+  getNotifications: (params?: { type?: string; page?: number }) => {
+    const sp = new URLSearchParams();
+    if (params?.type) sp.set('type', params.type);
+    if (params?.page) sp.set('page', String(params.page));
+    const qs = sp.toString();
+    return get<any[]>(`/notifications/${qs ? `?${qs}` : ''}`);
+  },
+  markRead: (id: string) => put<any>(`/notifications/${id}/read`),
+  markAllRead: () => put<any>('/notifications/read-all'),
+  getUnreadCount: () => get<any>('/notifications/unread-count'),
+};
+
+// ============================================================
+// 资产管理相关API
+// ============================================================
+export const assetsAPI = {
+  getAssets: (category?: string) =>
+    get<any[]>(`/assets/${category ? `?category=${category}` : ''}`),
+  createAsset: (data: any) => post<any>('/assets/', data),
+  getAsset: (id: string) => get<any>(`/assets/${id}`),
+  updateAsset: (id: string, data: any) => put<any>(`/assets/${id}`, data),
+  deleteAsset: (id: string) => del<any>(`/assets/${id}`),
+  getCategories: () => get<any[]>('/assets/categories'),
+  getNovelChapters: (novelId: string) => get<any[]>(`/assets/novels/${novelId}/chapters`),
+  addChapter: (novelId: string, data: any) => post<any>(`/assets/novels/${novelId}/chapters`, data),
+};
+
+// ============================================================
+// 后台管理API
+// ============================================================
+export const adminAPI = {
+  // 仪表盘
+  getStats: () => get<any>('/admin/dashboard/stats'),
+  getRecentLogs: () => get<any[]>('/admin/dashboard/recent-logs'),
+  getRecentAudit: () => get<any[]>('/admin/dashboard/recent-audit'),
+  // 用户管理
+  getUsers: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/users/${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getUser: (id: string) => get<any>(`/admin/users/${id}`),
+  banUser: (id: string) => put<any>(`/admin/users/${id}/ban`),
+  unbanUser: (id: string) => put<any>(`/admin/users/${id}/unban`),
+  getRegisterSettings: () => get<any>('/admin/users/register-settings'),
+  updateRegisterSettings: (data: any) => put<any>('/admin/users/register-settings', data),
+  // 模型管理
+  getProviders: () => get<any[]>('/admin/models/providers'),
+  addProvider: (data: any) => post<any>('/admin/models/providers', data),
+  updateProvider: (id: string, data: any) => put<any>(`/admin/models/providers/${id}`, data),
+  deleteProvider: (id: string) => del<any>(`/admin/models/providers/${id}`),
+  fetchModels: (id: string) => post<any>(`/admin/models/providers/${id}/fetch-models`),
+  addModels: (id: string, modelIds: string[]) => post<any>(`/admin/models/providers/${id}/add-models`, { model_ids: modelIds }),
+  getProtocols: () => get<any[]>('/admin/models/protocols'),
+  getAdminModels: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/models/${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  addModel: (data: any) => post<any>('/admin/models/', data),
+  updateModel: (id: string, data: any) => put<any>(`/admin/models/${id}`, data),
+  deleteModel: (id: string) => del<any>(`/admin/models/${id}`),
+  toggleModel: (id: string, isEnabled: boolean) => put<any>(`/admin/models/${id}/toggle?is_enabled=${isEnabled}`),
+  setDefaultModel: (id: string) => put<any>(`/admin/models/${id}/set-default`),
+  // Phase 2: Enhanced model management
+  testModelConnection: (id: string) => post<any>(`/admin/models/${id}/test-connection`),
+  fetchProviderModels: (id: string) => post<any>(`/admin/models/providers/${id}/fetch-models`),
+  createAdminModel: (data: any) => post<any>('/admin/models/', data),
+  updateAdminModel: (id: string, data: any) => put<any>(`/admin/models/${id}`, data),
+  deleteAdminModel: (id: string) => del<any>(`/admin/models/${id}`),
+  getModelStats: () => get<any>('/admin/models/stats'),
+  // 网站设置
+  getSiteSettings: () => get<any>('/admin/settings/site'),
+  updateSiteSettings: (data: any) => put<any>('/admin/settings/site', data),
+  getEmailConfig: () => get<any>('/admin/settings/email'),
+  updateEmailConfig: (data: any) => put<any>('/admin/settings/email', data),
+  testEmail: (params?: { test_to?: string; test_subject?: string; test_body?: string }) => {
+    const qs = new URLSearchParams();
+    if (params?.test_to) qs.set('test_to', params.test_to);
+    if (params?.test_subject) qs.set('test_subject', params.test_subject);
+    if (params?.test_body) qs.set('test_body', params.test_body);
+    const qstr = qs.toString();
+    return post<any>(`/admin/settings/email/test${qstr ? `?${qstr}` : ''}`);
+  },
+  generateEmailContent: (topic: string) => post<any>(`/admin/settings/email/generate-content?topic=${encodeURIComponent(topic)}`),
+  getSmsConfig: () => get<any>('/admin/settings/sms'),
+  updateSmsConfig: (data: any) => put<any>('/admin/settings/sms', data),
+  testSms: () => post<any>('/admin/settings/sms/test'),
+  // 支付配置
+  getPaymentConfigs: () => get<any[]>('/admin/payment/configs'),
+  updatePaymentConfig: (id: string, data: any) => put<any>(`/admin/payment/configs/${id}`, data),
+  getAdminOrders: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/payment/orders${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  refundOrder: (id: string) => put<any>(`/admin/payment/orders/${id}/refund`),
+  // 增值服务
+  getServices: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/services/${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  addService: (data: any) => post<any>('/admin/services/', data),
+  updateService: (id: string, data: any) => put<any>(`/admin/services/${id}`, data),
+  deleteService: (id: string) => del<any>(`/admin/services/${id}`),
+  getCustomOrders: (status?: string) => get<any[]>(`/admin/services/custom-orders${status ? `?status=${status}` : ''}`),
+  updateCustomOrder: (id: string, data: any) => put<any>(`/admin/services/custom-orders/${id}`, data),
+  getCustomRequests: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/services/custom-requests${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  updateCustomRequest: (id: string, data: any) => put<any>(`/admin/services/custom-requests/${id}`, data),
+  getAvailableAgents: () => get<any[]>('/admin/services/agents'),
+  assignAgentToService: (id: string, agentId: string) => put<any>(`/admin/services/${id}/agent?agent_id=${agentId}`),
+  // 会员管理
+  getPlans: () => get<any[]>('/admin/membership/plans'),
+  addPlan: (data: any) => post<any>('/admin/membership/plans', data),
+  updatePlan: (id: string, data: any) => put<any>(`/admin/membership/plans/${id}`, data),
+  deletePlan: (id: string) => del<any>(`/admin/membership/plans/${id}`),
+  getSubscriptions: () => get<any[]>('/admin/membership/subscriptions'),
+  getAutomationRules: () => get<any>('/admin/membership/automation-rules'),
+  // 广告管理
+  getAds: () => get<any[]>('/admin/ads/'),
+  addAd: (data: any) => post<any>('/admin/ads/', data),
+  updateAd: (id: string, data: any) => put<any>(`/admin/ads/${id}`, data),
+  deleteAd: (id: string) => del<any>(`/admin/ads/${id}`),
+  toggleAd: (id: string) => put<any>(`/admin/ads/${id}/toggle`),
+  // 应用市场审核
+  getPendingApps: () => get<any[]>('/admin/market/apps/pending'),
+  approveApp: (id: string) => put<any>(`/admin/market/apps/${id}/approve`),
+  rejectApp: (id: string) => put<any>(`/admin/market/apps/${id}/reject`),
+  getAdminApps: () => get<any[]>('/admin/market/apps'),
+  updateApp: (id: string, data: any) => put<any>(`/admin/market/apps/${id}`, data),
+  getCoupons: () => get<any[]>('/admin/market/coupons'),
+  addCoupon: (data: any) => post<any>('/admin/market/coupons', data),
+  updateCoupon: (id: string, data: any) => put<any>(`/admin/market/coupons/${id}`, data),
+  deleteCoupon: (id: string) => del<any>(`/admin/market/coupons/${id}`),
+  assignCoupon: (id: string, userId: string) => post<any>(`/admin/market/coupons/${id}/assign`, { user_id: userId }),
+  // 日志与风控
+  getOperationLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/logs/operations${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getTokenLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/logs/token-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getPaymentLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/logs/payment-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getAuditLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any[]>(`/admin/logs/audit-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  // 新增：日志统计
+  getLogStats: () => get<any>('/admin/logs/stats'),
+  // 新增：API调用统计
+  getApiStats: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/logs/api-stats${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  // 新增：慢请求记录
+  getSlowRequests: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/logs/slow-requests${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  // 新增：操作类型枚举
+  getActionTypes: () => get<any>('/admin/logs/action-types'),
+  // 新增：审计日志导出
+  exportAuditLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/logs/export/audit-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  exportOperationLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/logs/export/operations${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  exportTokenLogs: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v) sp.set(k, String(v)); });
+    return get<any>(`/admin/logs/export/token-logs${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getRiskRules: () => get<any[]>('/admin/logs/risk-rules'),
+  addRiskRule: (data: any) => post<any>('/admin/logs/risk-rules', data),
+  updateRiskRule: (id: string, data: any) => put<any>(`/admin/logs/risk-rules/${id}`, data),
+  deleteRiskRule: (id: string) => del<any>(`/admin/logs/risk-rules/${id}`),
+  // 技能管理 (Phase 2.2)
+  getAdminSkills: (params?: any) => {
+    const sp = new URLSearchParams();
+    if (params) Object.entries(params).forEach(([k, v]) => { if (v !== undefined && v !== null && v !== '') sp.set(k, String(v)); });
+    return get<any>(`/admin/skills/${sp.toString() ? `?${sp.toString()}` : ''}`);
+  },
+  getAdminSkill: (id: string) => get<any>(`/admin/skills/${id}`),
+  createAdminSkill: (data: any) => post<any>('/admin/skills/', data),
+  updateAdminSkill: (id: string, data: any) => put<any>(`/admin/skills/${id}`, data),
+  deleteAdminSkill: (id: string) => del<any>(`/admin/skills/${id}`),
+  changeAdminSkillState: (id: string, data: any) => put<any>(`/admin/skills/${id}/state`, data),
+  getAdminSkillVersions: (id: string) => get<any>(`/admin/skills/${id}/versions`),
+  rollbackAdminSkill: (id: string, data: any) => post<any>(`/admin/skills/${id}/rollback`, data),
+  publishAdminSkill: (id: string, data: any) => post<any>(`/admin/skills/${id}/publish`, data),
+  unpublishAdminSkill: (id: string) => post<any>(`/admin/skills/${id}/unpublish`),
+  getAdminSkillsStats: () => get<any>('/admin/skills/stats/overview'),
+};
+// ===== AI自进化API =====
+export const evolutionAPI = {
+  // 驾驶舱面板
+  getSkillTree: () => get<import('@/types').SkillTreeData>('/evolution/dashboard/skill-tree'),
+  getTimeline: (eventType?: string) =>
+    get<import('@/types').EvolutionEvent[]>('/evolution/dashboard/timeline' + (eventType ? `?event_type=${eventType}` : '')),
+  getStatistics: () => get<import('@/types').StatisticsData>('/evolution/dashboard/statistics'),
+  getProfile: () => get<import('@/types').EvolutionProfile>('/evolution/dashboard/profile'),
+
+  // 技能管理
+  getSkills: (params?: { state?: string; keyword?: string; sort_by?: string; order?: string }) => {
+    const query = new URLSearchParams();
+    if (params?.state) query.append('state', params.state);
+    if (params?.keyword) query.append('keyword', params.keyword);
+    if (params?.sort_by) query.append('sort_by', params.sort_by);
+    if (params?.order) query.append('order', params.order);
+    const qs = query.toString();
+    return get<import('@/types').EvolutionSkill[]>('/evolution/skills' + (qs ? `?${qs}` : ''));
+  },
+  getSkillDetail: (name: string) => get<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(name)}`),
+  updateSkill: (name: string, data: { description?: string; tags?: string[]; category?: string }) =>
+    put<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(name)}`, data),
+  deleteSkill: (name: string) => del(`/evolution/skills/${encodeURIComponent(name)}`),
+  freezeSkill: (name: string) => post(`/evolution/skills/${encodeURIComponent(name)}/freeze`),
+  unfreezeSkill: (name: string) => post(`/evolution/skills/${encodeURIComponent(name)}/unfreeze`),
+  getSkillHistory: (name: string) => get<import('@/types').EvolutionEvent[]>(`/evolution/skills/${encodeURIComponent(name)}/history`),
+  getSkillTrajectories: (name: string) => get<import('@/types').EvolutionTrajectory[]>(`/evolution/skills/${encodeURIComponent(name)}/trajectories`),
+
+  // 事件
+  getEvents: (params?: { event_type?: string; skill_name?: string; limit?: number }) => {
+    const query = new URLSearchParams();
+    if (params?.event_type) query.append('event_type', params.event_type);
+    if (params?.skill_name) query.append('skill_name', params.skill_name);
+    if (params?.limit) query.append('limit', String(params.limit));
+    const qs = query.toString();
+    return get<import('@/types').EvolutionEvent[]>('/evolution/events' + (qs ? `?${qs}` : ''));
+  },
+
+  // 轨迹提交
+  submitTrajectory: (data: { conversation_id: string; messages: any[] }) =>
+    post('/evolution/trajectory/submit', data),
+
+  // v2: 技能回滚
+  rollbackSkill: (skillName: string, version: number) =>
+    post<import('@/types').EvolutionSkill>(`/evolution/skills/${encodeURIComponent(skillName)}/rollback/${version}`),
+
+  // v2: 发布到市场
+  publishSkill: (skillName: string, data: { price: number; market_description: string }) =>
+    post(`/evolution/skills/${encodeURIComponent(skillName)}/publish`, data),
+
+  // v2: 团队共享
+  shareToTeam: (skillName: string, teamId: string) =>
+    post(`/evolution/skills/${encodeURIComponent(skillName)}/share-to-team`, { team_id: teamId }),
+
+  // v2: 流水线状态
+  getPipelineStatus: () => get<import('@/types').PipelineStatus>('/evolution/pipeline/status'),
+
+  // v2: 手动触发流水线
+  triggerPipeline: () => post('/evolution/pipeline/trigger'),
+
+  // v2: Watcher状态
+  getWatcherStatus: () => get<import('@/types').WatcherStatus>('/evolution/watcher/status'),
+
+  // v2: 进化报告
+  getReports: (reportType?: string) => {
+    const qs = reportType ? `?report_type=${reportType}` : '';
+    return get<import('@/types').EvolutionReport[]>(`/evolution/reports${qs}`);
+  },
+  getReportDetail: (reportId: string) => get<import('@/types').EvolutionReport>(`/evolution/reports/${reportId}`),
+};
diff --git a/frontend/src/components/layout/AdminLayout.tsx b/frontend/src/components/layout/AdminLayout.tsx
index 36bcb8c..e3cedbd 100644
--- a/frontend/src/components/layout/AdminLayout.tsx
+++ b/frontend/src/components/layout/AdminLayout.tsx
@@ -1,124 +1,126 @@
-import React, { useState } from 'react';
-import { Outlet, NavLink, useNavigate } from 'react-router-dom';
-import { useAuth } from '@/contexts/AuthContext';
-import './AdminLayout.css';
-
-const adminNavItems = [
-  { path: '/admin', icon: 'dashboard', label: '平台驾驶舱', exact: true },
-  { path: '/admin/users', icon: 'users', label: '用户管理' },
-  { path: '/admin/models', icon: 'models', label: '大模型库管理' },
-  { path: '/admin/settings', icon: 'settings', label: '网站基础设置' },
-  { path: '/admin/payment', icon: 'payment', label: '支付渠道配置' },
-  { path: '/admin/services', icon: 'services', label: '增值服务管理' },
-  { path: '/admin/membership', icon: 'membership', label: '会员订阅体系' },
-  { path: '/admin/ads', icon: 'ads', label: '广告位管理' },
-  { path: '/admin/market', icon: 'market', label: '应用市场审核' },
-  { path: '/admin/logs', icon: 'logs', label: '日志与风控' },
-];
-
-const adminIconPaths: Record<string, JSX.Element> = {
-  dashboard: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
-  users: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
-  models: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>,
-  settings: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><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 0 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 0 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 0 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 0 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>,
-  payment: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>,
-  services: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>,
-  membership: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
-  ads: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
-  market: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg>,
-  logs: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>,
-};
-
-const AdminLayout: React.FC = () => {
-  const { user, logout } = useAuth();
-  const navigate = useNavigate();
-  const [collapsed, setCollapsed] = useState(false);
-
-  if (!user || user.role !== 'admin') {
-    navigate('/login');
-    return null;
-  }
-
-  return (
-    <div className="admin-layout">
-      {/* Admin Sidebar */}
-      <aside className={`admin-sidebar ${collapsed ? 'collapsed' : ''}`}>
-        <div className="admin-sidebar-header">
-          <div className="sidebar-logo">
-            <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
-              <rect width="32" height="32" rx="8" fill="#1A1A2E"/>
-              <path d="M8 20V12l4 4 4-4v8" stroke="#6C63FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
-              <path d="M6 22h20" stroke="#6C63FF" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
-            </svg>
-            {!collapsed && <span className="sidebar-brand admin-brand">Qihu-AIFlow 管理后台</span>}
-          </div>
-          <button className="collapse-btn" onClick={() => setCollapsed(!collapsed)}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
-            </svg>
-          </button>
-        </div>
-
-        <nav className="admin-nav">
-          {adminNavItems.map(item => (
-            <NavLink
-              key={item.path}
-              to={item.path}
-              end={item.exact}
-              className={({ isActive }) => `admin-nav-item ${isActive ? 'active' : ''}`}
-            >
-              <span className="nav-icon">{adminIconPaths[item.icon]}</span>
-              {!collapsed && <span className="nav-label">{item.label}</span>}
-            </NavLink>
-          ))}
-        </nav>
-
-        <div className="admin-sidebar-footer">
-          <NavLink to="/chat" className="admin-nav-item">
-            <span className="nav-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-            </span>
-            {!collapsed && <span className="nav-label">返回前台</span>}
-          </NavLink>
-          <button className="admin-nav-item logout-btn" onClick={() => { logout(); navigate('/login'); }}>
-            <span className="nav-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
-            </span>
-            {!collapsed && <span className="nav-label">退出登录</span>}
-          </button>
-        </div>
-        {!collapsed && (
-          <div className="admin-version-info">
-            Qihu-AIFlow v2.0.0
-          </div>
-        )}
-      </aside>
-
-      {/* Admin Main Content */}
-      <main className="admin-main">
-        <header className="admin-topbar">
-          <div className="admin-topbar-left">
-            <span className="admin-welcome">欢迎，{user.username}</span>
-          </div>
-          <div className="admin-topbar-right">
-            <a href="#/chat" className="admin-topbar-action">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              <span>返回前台</span>
-            </a>
-            <div className="admin-user-tag">
-              <div className="user-avatar-sm admin-avatar">
-                {user.username.charAt(0).toUpperCase()}
-              </div>
-              <span>{user.username}</span>
-            </div>
-          </div>
-        </header>
-        <div className="admin-content">
-          <Outlet />
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default AdminLayout;
+import React, { useState } from 'react';
+import { Outlet, NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import './AdminLayout.css';
+
+const adminNavItems = [
+  { path: '/admin', icon: 'dashboard', label: '平台驾驶舱', exact: true },
+  { path: '/admin/users', icon: 'users', label: '用户管理' },
+  { path: '/admin/models', icon: 'models', label: '大模型库管理' },
+  { path: '/admin/settings', icon: 'settings', label: '网站基础设置' },
+  { path: '/admin/payment', icon: 'payment', label: '支付渠道配置' },
+  { path: '/admin/services', icon: 'services', label: '增值服务管理' },
+  { path: '/admin/membership', icon: 'membership', label: '会员订阅体系' },
+  { path: '/admin/ads', icon: 'ads', label: '广告位管理' },
+  { path: '/admin/market', icon: 'market', label: '应用市场审核' },
+  { path: '/admin/logs', icon: 'logs', label: '日志与风控' },
+
+    { path: '/admin/skills', icon: 'skills', label: '技能管理' },];
+
+const adminIconPaths: Record<string, JSX.Element> = {
+  dashboard: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
+  users: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
+  models: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>,
+  settings: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><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 0 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 0 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 0 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 0 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>,
+  payment: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>,
+  services: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>,
+  membership: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>,
+  ads: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
+  market: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></svg>,
+  logs: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>,
+
+    skills: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>,};
+
+const AdminLayout: React.FC = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const [collapsed, setCollapsed] = useState(false);
+
+  if (!user || user.role !== 'admin') {
+    navigate('/login');
+    return null;
+  }
+
+  return (
+    <div className="admin-layout">
+      {/* Admin Sidebar */}
+      <aside className={`admin-sidebar ${collapsed ? 'collapsed' : ''}`}>
+        <div className="admin-sidebar-header">
+          <div className="sidebar-logo">
+            <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
+              <rect width="32" height="32" rx="8" fill="#1A1A2E"/>
+              <path d="M8 20V12l4 4 4-4v8" stroke="#6C63FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
+              <path d="M6 22h20" stroke="#6C63FF" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
+            </svg>
+            {!collapsed && <span className="sidebar-brand admin-brand">Qihu-AIFlow 管理后台</span>}
+          </div>
+          <button className="collapse-btn" onClick={() => setCollapsed(!collapsed)}>
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        <nav className="admin-nav">
+          {adminNavItems.map(item => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              end={item.exact}
+              className={({ isActive }) => `admin-nav-item ${isActive ? 'active' : ''}`}
+            >
+              <span className="nav-icon">{adminIconPaths[item.icon]}</span>
+              {!collapsed && <span className="nav-label">{item.label}</span>}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="admin-sidebar-footer">
+          <NavLink to="/chat" className="admin-nav-item">
+            <span className="nav-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            </span>
+            {!collapsed && <span className="nav-label">返回前台</span>}
+          </NavLink>
+          <button className="admin-nav-item logout-btn" onClick={() => { logout(); navigate('/login'); }}>
+            <span className="nav-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+            </span>
+            {!collapsed && <span className="nav-label">退出登录</span>}
+          </button>
+        </div>
+        {!collapsed && (
+          <div className="admin-version-info">
+            Qihu-AIFlow v2.0.0
+          </div>
+        )}
+      </aside>
+
+      {/* Admin Main Content */}
+      <main className="admin-main">
+        <header className="admin-topbar">
+          <div className="admin-topbar-left">
+            <span className="admin-welcome">欢迎，{user.username}</span>
+          </div>
+          <div className="admin-topbar-right">
+            <a href="#/chat" className="admin-topbar-action">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+              <span>返回前台</span>
+            </a>
+            <div className="admin-user-tag">
+              <div className="user-avatar-sm admin-avatar">
+                {user.username.charAt(0).toUpperCase()}
+              </div>
+              <span>{user.username}</span>
+            </div>
+          </div>
+        </header>
+        <div className="admin-content">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default AdminLayout;
diff --git a/frontend/src/pages/admin/Agents.tsx b/frontend/src/pages/admin/Agents.tsx
new file mode 100644
index 0000000..a2bc333
--- /dev/null
+++ b/frontend/src/pages/admin/Agents.tsx
@@ -0,0 +1,702 @@
+import React, { useState, useEffect } from 'react';
+import { adminAPI } from '@/api';
+
+interface Agent {
+  id: string;
+  name: string;
+  type: string;
+  source: string;
+  publisher_id: string;
+  publisher_name?: string;
+  description?: string;
+  icon?: string;
+  tutorial?: string;
+  price: number;
+  is_member_free: boolean;
+  join_promotion: boolean;
+  status: string;
+  rating_avg: number;
+  review_count: number;
+  install_count: number;
+  skill_content?: string;
+  agent_endpoint?: string;
+  config?: AgentConfig;
+  linked_skills?: LinkedSkill[];
+  created_at?: string;
+  updated_at?: string;
+}
+
+interface AgentConfig {
+  system_prompt?: string;
+  temperature?: number;
+  max_tokens?: number;
+  model_id?: string;
+  skills?: string[];
+  tools?: string[];
+  memory_enabled?: boolean;
+  reasoning_enabled?: boolean;
+}
+
+interface LinkedSkill {
+  id: string;
+  skill_name: string;
+  state: string;
+  version: number;
+}
+
+interface AgentStats {
+  total_agents: number;
+  published_agents: number;
+  pending_agents: number;
+  official_agents: number;
+  user_agents: number;
+  total_installs: number;
+  average_rating: number;
+  by_source: Record<string, number>;
+}
+
+interface AvailableModel {
+  id: string;
+  name: string;
+  provider: string;
+  model_type?: string;
+}
+
+const AGENT_TYPES = [
+  { id: 'skill', label: '技能' },
+  { id: 'agent', label: 'Agent' },
+  { id: 'mcp', label: 'MCP' },
+];
+
+const Agents: React.FC = () => {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [stats, setStats] = useState<AgentStats | null>(null);
+
+  // Filters
+  const [keyword, setKeyword] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [filterSource, setFilterSource] = useState('');
+
+  // Modal
+  const [showModal, setShowModal] = useState(false);
+  const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
+  const [form, setForm] = useState({
+    name: '',
+    description: '',
+    icon: '',
+    price: '0',
+    is_member_free: false,
+    system_prompt: '',
+    temperature: '0.7',
+    max_tokens: '2048',
+    model_id: '',
+    skills: [] as string[],
+    memory_enabled: false,
+    reasoning_enabled: false,
+  });
+
+  // Detail drawer
+  const [showDetail, setShowDetail] = useState(false);
+  const [detailAgent, setDetailAgent] = useState<Agent | null>(null);
+
+  // Available skills for linking
+  const [availableSkills, setAvailableSkills] = useState<any[]>([]);
+  const [availableModels, setAvailableModels] = useState<AvailableModel[]>([]);
+
+  // Toast
+  const [toast, setToast] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);
+  const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 3000);
+  };
+
+  // Load agents
+  const loadAgents = async () => {
+    setLoading(true);
+    try {
+      const params: any = { page, page_size: 15 };
+      if (keyword) params.keyword = keyword;
+      if (filterStatus) params.status = filterStatus;
+      if (filterSource) params.source = filterSource;
+      const result = await adminAPI.getAdminAgents(params) as any;
+      const data = result.data || result;
+      setAgents(data.items || []);
+      setTotal(data.total || 0);
+    } catch (e: any) {
+      showToast(`加载失败: ${e.message || e}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load stats
+  const loadStats = async () => {
+    try {
+      const result = await adminAPI.getAdminAgentsStats() as any;
+      const data = result.data || result;
+      setStats(data);
+    } catch {}
+  };
+
+  // Load available skills & models
+  const loadAvailable = async () => {
+    try {
+      const [skillsResult, modelsResult] = await Promise.all([
+        adminAPI.getAdminAvailableSkills({ page_size: 50 }) as any,
+        adminAPI.getAdminAvailableModels() as any,
+      ]);
+      const skills = (skillsResult.data || skillsResult).items || [];
+      const models = (modelsResult.data || modelsResult) || [];
+      setAvailableSkills(skills);
+      setAvailableModels(models);
+    } catch {}
+  };
+
+  useEffect(() => {
+    loadAgents();
+  }, [page, keyword, filterStatus, filterSource]);
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  // Search
+  const handleSearch = () => {
+    setPage(1);
+    loadAgents();
+  };
+
+  // Open create
+  const openCreate = async () => {
+    setEditingAgent(null);
+    await loadAvailable();
+    setForm({
+      name: '',
+      description: '',
+      icon: '',
+      price: '0',
+      is_member_free: false,
+      system_prompt: '你是一个智能助手。',
+      temperature: '0.7',
+      max_tokens: '2048',
+      model_id: '',
+      skills: [],
+      memory_enabled: false,
+      reasoning_enabled: false,
+    });
+    setShowModal(true);
+  };
+
+  // Open edit
+  const openEdit = async (agent: Agent) => {
+    setEditingAgent(agent);
+    await loadAvailable();
+
+    const cfg = agent.config || {};
+    setForm({
+      name: agent.name,
+      description: agent.description || '',
+      icon: agent.icon || '',
+      price: String(agent.price),
+      is_member_free: agent.is_member_free,
+      system_prompt: cfg.system_prompt || '',
+      temperature: String(cfg.temperature || 0.7),
+      max_tokens: String(cfg.max_tokens || 2048),
+      model_id: cfg.model_id || '',
+      skills: cfg.skills || [],
+      memory_enabled: cfg.memory_enabled || false,
+      reasoning_enabled: cfg.reasoning_enabled || false,
+    });
+    setShowModal(true);
+  };
+
+  // Open detail
+  const openDetail = async (agent: Agent) => {
+    setDetailAgent(agent);
+    setShowDetail(true);
+  };
+
+  // Save agent
+  const handleSave = async () => {
+    if (!form.name.trim()) {
+      showToast('Agent 名称不能为空', 'error');
+      return;
+    }
+
+    const payload: any = {
+      name: form.name,
+      description: form.description,
+      icon: form.icon || undefined,
+      price: parseFloat(form.price) || 0,
+      is_member_free: form.is_member_free,
+      config: {
+        system_prompt: form.system_prompt,
+        temperature: parseFloat(form.temperature) || 0.7,
+        max_tokens: parseInt(form.max_tokens) || 2048,
+        model_id: form.model_id || undefined,
+        skills: form.skills,
+        memory_enabled: form.memory_enabled,
+        reasoning_enabled: form.reasoning_enabled,
+      },
+    };
+
+    try {
+      if (editingAgent) {
+        await adminAPI.updateAdminAgent(editingAgent.id, payload);
+        showToast('Agent 已更新');
+      } else {
+        await adminAPI.createAdminAgent(payload);
+        showToast('Agent 创建成功');
+      }
+      setShowModal(false);
+      loadAgents();
+      loadStats();
+    } catch (e: any) {
+      showToast(`保存失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Toggle agent
+  const handleToggle = async (agent: Agent) => {
+    const isActive = agent.status === 'published';
+    try {
+      await adminAPI.toggleAdminAgent(agent.id, !isActive);
+      showToast(`Agent 已${isActive ? '禁用' : '启用'}`);
+      loadAgents();
+      loadStats();
+    } catch (e: any) {
+      showToast(`操作失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Delete agent
+  const handleDelete = async (agent: Agent) => {
+    if (!confirm(`确定要删除 Agent "${agent.name}" 吗？此操作不可恢复。`)) return;
+    try {
+      await adminAPI.deleteAdminAgent(agent.id);
+      showToast('Agent 已删除');
+      loadAgents();
+      loadStats();
+    } catch (e: any) {
+      showToast(`删除失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Toggle skill in selection
+  const toggleSkill = (skillId: string) => {
+    setForm(f => ({
+      ...f,
+      skills: f.skills.includes(skillId)
+        ? f.skills.filter(s => s !== skillId)
+        : [...f.skills, skillId],
+    }));
+  };
+
+  const PAGE_SIZE = 15;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  const statusColor = (status: string) => {
+    if (status === 'published') return { bg: '#D1FAE5', color: '#10B981' };
+    if (status === 'pending') return { bg: '#FEF3C7', color: '#F59E0B' };
+    return { bg: '#FEE2E2', color: '#EF4444' };
+  };
+
+  return (
+    <div className="admin-page">
+      {/* Toast */}
+      {toast && (
+        <div className="toast" style={{
+          position: 'fixed', top: 20, right: 20, zIndex: 9999,
+          padding: '12px 20px', borderRadius: 8,
+          background: toast.type === 'success' ? '#10B981' : '#EF4444',
+          color: '#fff', fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        }}>
+          {toast.msg}
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="admin-page-header">
+        <div>
+          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Agent 管理</h2>
+          <p style={{ margin: '4px 0 0', color: '#6B7280', fontSize: 13 }}>
+            管理 AI Agent/Skill/MCP，支持配置、关联技能和模型
+          </p>
+        </div>
+        <button className="admin-btn primary" onClick={openCreate}>+ 创建 Agent</button>
+      </div>
+
+      {/* Stats */}
+      {stats && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12, marginBottom: 20 }}>
+          <div className="stat-card" style={{ borderLeft: '3px solid #6366F1' }}>
+            <div className="stat-value">{stats.total_agents}</div>
+            <div className="stat-label">Agent 总数</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #10B981' }}>
+            <div className="stat-value">{stats.published_agents}</div>
+            <div className="stat-label">已发布</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #F59E0B' }}>
+            <div className="stat-value">{stats.pending_agents}</div>
+            <div className="stat-label">待发布</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #3B82F6' }}>
+            <div className="stat-value">{stats.total_installs.toLocaleString()}</div>
+            <div className="stat-label">总安装量</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #8B5CF6' }}>
+            <div className="stat-value">{stats.average_rating.toFixed(1)}</div>
+            <div className="stat-label">平均评分</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #EC4899' }}>
+            <div className="stat-value">{stats.official_agents} / {stats.user_agents}</div>
+            <div className="stat-label">官方 / 用户</div>
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="admin-filters" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
+        <input className="admin-form-input" placeholder="搜索名称、描述..."
+          value={keyword} onChange={e => setKeyword(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSearch()}
+          style={{ maxWidth: 280 }} />
+        <select className="admin-form-input" value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }}
+          style={{ maxWidth: 140 }}>
+          <option value="">全部状态</option>
+          <option value="published">已发布</option>
+          <option value="pending">待发布</option>
+          <option value="removed">已下架</option>
+        </select>
+        <select className="admin-form-input" value={filterSource} onChange={e => { setFilterSource(e.target.value); setPage(1); }}
+          style={{ maxWidth: 140 }}>
+          <option value="">全部来源</option>
+          <option value="official">官方</option>
+          <option value="user">用户</option>
+        </select>
+        <button className="admin-btn" onClick={handleSearch}>搜索</button>
+        {(keyword || filterStatus || filterSource) && (
+          <button className="admin-btn" onClick={() => { setKeyword(''); setFilterStatus(''); setFilterSource(''); setPage(1); }}>
+            清空
+          </button>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="admin-table-wrap">
+        <table className="admin-table">
+          <thead>
+            <tr>
+              <th>Agent</th>
+              <th>类型</th>
+              <th>来源</th>
+              <th>状态</th>
+              <th>价格</th>
+              <th>安装量</th>
+              <th>评分</th>
+              <th>更新时间</th>
+              <th style={{ width: 240 }}>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</td></tr>
+            ) : agents.length === 0 ? (
+              <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无 Agent</td></tr>
+            ) : agents.map(agent => {
+              const sc = statusColor(agent.status);
+              return (
+                <tr key={agent.id}>
+                  <td>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      {agent.icon ? (
+                        <img src={agent.icon} alt="" style={{ width: 32, height: 32, borderRadius: 8, objectFit: 'cover' }} />
+                      ) : (
+                        <div style={{ width: 32, height: 32, borderRadius: 8, background: '#EEF2FF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>
+                          🤖
+                        </div>
+                      )}
+                      <div>
+                        <div style={{ fontWeight: 500 }}>{agent.name}</div>
+                        {agent.description && (
+                          <div style={{ fontSize: 12, color: '#6B7280', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {agent.description}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    <span style={{ fontSize: 12, padding: '2px 8px', borderRadius: 10, background: '#EEF2FF', color: '#6366F1' }}>
+                      {AGENT_TYPES.find(t => t.id === agent.type)?.label || agent.type}
+                    </span>
+                  </td>
+                  <td>
+                    <span style={{ fontSize: 12, color: agent.source === 'official' ? '#10B981' : '#6B7280' }}>
+                      {agent.source === 'official' ? '官方' : '用户'}
+                    </span>
+                  </td>
+                  <td>
+                    <span style={{ display: 'inline-block', padding: '2px 10px', borderRadius: 12, fontSize: 12, background: sc.bg, color: sc.color, fontWeight: 500 }}>
+                      {agent.status === 'published' ? '已发布' : agent.status === 'pending' ? '待发布' : '已下架'}
+                    </span>
+                  </td>
+                  <td>{agent.price === 0 ? <span style={{ color: '#10B981' }}>免费</span> : `¥${agent.price}`}</td>
+                  <td>{agent.install_count.toLocaleString()}</td>
+                  <td>{agent.rating_avg > 0 ? `★ ${agent.rating_avg}` : '-'}</td>
+                  <td style={{ fontSize: 12, color: '#6B7280' }}>
+                    {agent.updated_at ? agent.updated_at.slice(0, 16).replace('T', ' ') : '-'}
+                  </td>
+                  <td>
+                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                      <button className="admin-btn small" onClick={() => openDetail(agent)}>详情</button>
+                      <button className="admin-btn small" onClick={() => openEdit(agent)}>编辑</button>
+                      <button
+                        className={`admin-btn small ${agent.status === 'published' ? 'warning' : 'success'}`}
+                        onClick={() => handleToggle(agent)}
+                      >
+                        {agent.status === 'published' ? '禁用' : '启用'}
+                      </button>
+                      <button className="admin-btn small danger" onClick={() => handleDelete(agent)}>删除</button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="admin-pagination">
+          <span style={{ color: '#6B7280', fontSize: 13 }}>共 {total} 条，第 {page}/{totalPages} 页</span>
+          <div style={{ display: 'flex', gap: 4 }}>
+            <button className="admin-btn small" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
+            {[...Array(Math.min(5, totalPages))].map((_, i) => {
+              const p = Math.max(1, Math.min(page - 2, totalPages - 4)) + i;
+              return p <= totalPages && (
+                <button key={p} className={`admin-btn small ${p === page ? 'primary' : ''}`} onClick={() => setPage(p)}>{p}</button>
+              );
+            })}
+            <button className="admin-btn small" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
+          </div>
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showModal && (
+        <div className="modal-overlay" onClick={() => setShowModal(false)}>
+          <div className="modal-content" style={{ maxWidth: 800 }} onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>{editingAgent ? '编辑 Agent' : '创建 Agent'}</h3>
+              <button className="modal-close" onClick={() => setShowModal(false)}>×</button>
+            </div>
+            <div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+                <div className="form-group">
+                  <label className="form-label">名称 *</label>
+                  <input className="admin-form-input" value={form.name}
+                    onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
+                    placeholder="例如: 智能代码审查助手" />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">图标 URL</label>
+                  <input className="admin-form-input" value={form.icon}
+                    onChange={e => setForm(f => ({ ...f, icon: e.target.value }))}
+                    placeholder="https://..." />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">价格（元，0=免费）</label>
+                  <input className="admin-form-input" type="number" value={form.price}
+                    onChange={e => setForm(f => ({ ...f, price: e.target.value }))} />
+                </div>
+                <div className="form-group" style={{ display: 'flex', alignItems: 'center', paddingTop: 24 }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+                    <input type="checkbox" checked={form.is_member_free}
+                      onChange={e => setForm(f => ({ ...f, is_member_free: e.target.checked }))} />
+                    会员免费
+                  </label>
+                </div>
+                <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+                  <label className="form-label">描述</label>
+                  <textarea className="admin-form-input" rows={2} value={form.description}
+                    onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+                    placeholder="描述 Agent 的功能和使用场景..." />
+                </div>
+              </div>
+
+              <hr style={{ border: 'none', borderTop: '1px solid #E5E7EB', margin: '16px 0' }} />
+
+              <div style={{ fontWeight: 600, marginBottom: 12 }}>⚙️ Agent 配置</div>
+
+              <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+                <label className="form-label">System Prompt</label>
+                <textarea className="admin-form-input"
+                  value={form.system_prompt}
+                  onChange={e => setForm(f => ({ ...f, system_prompt: e.target.value }))}
+                  style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 120 }}
+                  placeholder="定义 Agent 的角色、行为和能力..." />
+              </div>
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
+                <div className="form-group">
+                  <label className="form-label">模型</label>
+                  <select className="admin-form-input" value={form.model_id}
+                    onChange={e => setForm(f => ({ ...f, model_id: e.target.value }))}>
+                    <option value="">默认模型</option>
+                    {availableModels.map(m => (
+                      <option key={m.id} value={m.id}>{m.name} ({m.provider})</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Temperature</label>
+                  <input className="admin-form-input" type="number" step="0.1" min="0" max="2"
+                    value={form.temperature}
+                    onChange={e => setForm(f => ({ ...f, temperature: e.target.value }))} />
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Max Tokens</label>
+                  <input className="admin-form-input" type="number"
+                    value={form.max_tokens}
+                    onChange={e => setForm(f => ({ ...f, max_tokens: e.target.value }))} />
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
+                  <input type="checkbox" checked={form.memory_enabled}
+                    onChange={e => setForm(f => ({ ...f, memory_enabled: e.target.checked }))} />
+                  记忆能力
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
+                  <input type="checkbox" checked={form.reasoning_enabled}
+                    onChange={e => setForm(f => ({ ...f, reasoning_enabled: e.target.checked }))} />
+                  推理能力
+                </label>
+              </div>
+
+              {/* Linked Skills */}
+              <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+                <label className="form-label">关联技能（可多选）</label>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, maxHeight: 160, overflowY: 'auto', padding: 8, border: '1px solid #E5E7EB', borderRadius: 6 }}>
+                  {availableSkills.length === 0 ? (
+                    <span style={{ color: '#9CA3AF', fontSize: 13 }}>暂无技能</span>
+                  ) : availableSkills.map(skill => (
+                    <label key={skill.id} style={{
+                      display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px',
+                      borderRadius: 12, fontSize: 12, cursor: 'pointer',
+                      background: form.skills.includes(skill.id) ? '#EEF2FF' : '#F9FAFB',
+                      border: `1px solid ${form.skills.includes(skill.id) ? '#6366F1' : '#E5E7EB'}`,
+                      color: form.skills.includes(skill.id) ? '#6366F1' : '#374151',
+                    }}>
+                      <input type="checkbox" style={{ display: 'none' }}
+                        checked={form.skills.includes(skill.id)}
+                        onChange={() => toggleSkill(skill.id)} />
+                      {skill.skill_name}
+                      {skill.state !== 'baby' && (
+                        <span style={{ fontSize: 10, background: '#E5E7EB', padding: '1px 4px', borderRadius: 4, marginLeft: 4 }}>
+                          {skill.state}
+                        </span>
+                      )}
+                    </label>
+                  ))}
+                </div>
+                {form.skills.length > 0 && (
+                  <div style={{ marginTop: 6, fontSize: 12, color: '#6366F1' }}>
+                    已选 {form.skills.length} 个技能
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button className="admin-btn" onClick={() => setShowModal(false)}>取消</button>
+              <button className="admin-btn primary" onClick={handleSave}>
+                {editingAgent ? '保存更改' : '创建 Agent'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Detail Drawer */}
+      {showDetail && detailAgent && (
+        <div className="modal-overlay" onClick={() => setShowDetail(false)}>
+          <div className="modal-content" style={{ maxWidth: 600 }} onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>{detailAgent.name}</h3>
+              <button className="modal-close" onClick={() => setShowDetail(false)}>×</button>
+            </div>
+            <div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
+                <div className="detail-item"><span className="detail-label">类型</span><span>{detailAgent.type}</span></div>
+                <div className="detail-item"><span className="detail-label">来源</span><span>{detailAgent.source === 'official' ? '官方' : '用户'}</span></div>
+                <div className="detail-item"><span className="detail-label">状态</span><span>{detailAgent.status}</span></div>
+                <div className="detail-item"><span className="detail-label">价格</span><span>¥{detailAgent.price}</span></div>
+                <div className="detail-item"><span className="detail-label">安装量</span><span>{detailAgent.install_count}</span></div>
+                <div className="detail-item"><span className="detail-label">评分</span><span>{detailAgent.rating_avg > 0 ? `★ ${detailAgent.rating_avg}` : '-'}</span></div>
+                <div className="detail-item"><span className="detail-label">发布者</span><span>{detailAgent.publisher_name || detailAgent.publisher_id}</span></div>
+                <div className="detail-item"><span className="detail-label">创建时间</span><span>{detailAgent.created_at?.slice(0, 16).replace('T', ' ')}</span></div>
+              </div>
+
+              {detailAgent.description && (
+                <div style={{ marginBottom: 12 }}>
+                  <div style={{ fontWeight: 500, marginBottom: 4 }}>描述</div>
+                  <p style={{ color: '#6B7280', fontSize: 13, margin: 0 }}>{detailAgent.description}</p>
+                </div>
+              )}
+
+              {detailAgent.config && (
+                <div>
+                  <div style={{ fontWeight: 500, marginBottom: 8 }}>⚙️ 配置</div>
+                  <div style={{ background: '#F9FAFB', borderRadius: 8, padding: 12, fontSize: 13 }}>
+                    {detailAgent.config.system_prompt && (
+                      <div style={{ marginBottom: 8 }}>
+                        <span style={{ color: '#6B7280' }}>System Prompt:</span>
+                        <pre style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap', fontFamily: 'monospace', fontSize: 12 }}>
+                          {detailAgent.config.system_prompt}
+                        </pre>
+                      </div>
+                    )}
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                      <span>Temperature: <code>{detailAgent.config.temperature}</code></span>
+                      <span>Max Tokens: <code>{detailAgent.config.max_tokens}</code></span>
+                      <span>Model: <code>{detailAgent.config.model_id || '默认'}</code></span>
+                      <span>记忆: <code>{detailAgent.config.memory_enabled ? '✓' : '✗'}</code></span>
+                      <span>推理: <code>{detailAgent.config.reasoning_enabled ? '✓' : '✗'}</code></span>
+                      <span>关联技能: <code>{detailAgent.config.skills?.length || 0} 个</code></span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        .stat-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 24px; font-weight: 700; color: #1F2937; }
+        .stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
+        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
+        .modal-content { background: #fff; border-radius: 12px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
+        .modal-header { padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; }
+        .modal-header h3 { margin: 0; font-size: 18px; }
+        .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
+        .modal-body { padding: 24px; overflow-y: auto; }
+        .modal-footer { padding: 16px 24px; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; }
+        .form-group { margin-bottom: 16px; }
+        .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #374151; }
+        .detail-item { display: flex; gap: 8px; font-size: 13px; }
+        .detail-label { color: #6B7280; min-width: 60px; }
+      `}</style>
+    </div>
+  );
+};
+
+export default Agents;
diff --git a/frontend/src/pages/admin/Models.tsx b/frontend/src/pages/admin/Models.tsx
index 7183fcf..b564d84 100644
--- a/frontend/src/pages/admin/Models.tsx
+++ b/frontend/src/pages/admin/Models.tsx
@@ -14,7 +14,6 @@ const formatNumber = (n: number) => {
   return n.toLocaleString();
 };
 
-// Capability标签颜色映射
 const capabilityColors: Record<string, string> = {
   text: '#5B5FED',
   vision: '#219B5E',
@@ -35,35 +34,54 @@ const capabilityLabels: Record<string, string> = {
   tool: '工具',
 };
 
+// Test result type
+interface TestResult {
+  success: boolean;
+  message: string;
+  latency_ms?: number;
+}
+
+// Model editing type
+interface EditingModel {
+  id?: string;
+  name: string;
+  provider_id: string;
+  api_key: string;
+  endpoint: string;
+  capabilities: string[];
+  timeout: number;
+  status: string;
+  price_per_million_tokens: number;
+  is_enabled: boolean;
+}
+
 const Models: React.FC = () => {
-  // 状态
   const [providers, setProviders] = useState<ModelProvider[]>([]);
   const [models, setModels] = useState<AIModel[]>([]);
   const [protocols, setProtocols] = useState<ProtocolDef[]>([]);
   const [expandedProvider, setExpandedProvider] = useState<string | null>(null);
   const [fetchedModels, setFetchedModels] = useState<FetchableModel[]>([]);
-  const [fetchSource, setFetchSource] = useState<string>('');  // 模型来源标识
-  const [fetchMessage, setFetchMessage] = useState<string>('');  // API错误消息
+  const [fetchSource, setFetchSource] = useState<string>('');
+  const [fetchMessage, setFetchMessage] = useState<string>('');
   const [selectedModelIds, setSelectedModelIds] = useState<Set<string>>(new Set());
   const [showAddProvider, setShowAddProvider] = useState(false);
   const [editingProvider, setEditingProvider] = useState<ModelProvider | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // 模型定价编辑状态
-  const [editingModelPrice, setEditingModelPrice] = useState<string | null>(null);
-  const [editPriceValue, setEditPriceValue] = useState<string>('');
-  const [priceSaving, setPriceSaving] = useState(false);
+  // Model test state
+  const [testingModelId, setTestingModelId] = useState<string | null>(null);
+  const [testResult, setTestResult] = useState<TestResult | null>(null);
+
+  // Model editor state
+  const [showModelEditor, setShowModelEditor] = useState(false);
+  const [editingModel, setEditingModel] = useState<EditingModel | null>(null);
+  const [modelSaving, setModelSaving] = useState(false);
 
-  // 供应商表单
   const [providerForm, setProviderForm] = useState({
-    name: '',
-    protocol: 'openai_compatible',
-    api_key: '',
-    api_base_url: '',
+    name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '',
   });
 
-  // 加载数据
   const loadData = useCallback(async () => {
     try {
       setLoading(true);
@@ -74,15 +92,11 @@ const Models: React.FC = () => {
       ]);
       setProviders(Array.isArray(provRes) ? provRes : (provRes.data || []));
       setProtocols(Array.isArray(protoRes) ? protoRes : (protoRes.data || []));
-      // 后端models API返回分页格式: {total, page, page_size, items}
-      // 需要兼容 {code, data: {items}} 和 {total, items} 两种格式
       const modelData = modelsRes.data || modelsRes;
       const rawModels = Array.isArray(modelData) ? modelData : (modelData?.items || []);
-      // 后端返回snake_case，前端接口使用camelCase，需要映射
       const mappedModels = (Array.isArray(rawModels) ? rawModels : []).map((m: any) => ({
         ...m,
         providerId: m.providerId || m.provider_id,
-        providerName: m.providerName || m.provider_name,
         apiKey: m.apiKey || m.api_key,
         pricePerMillionTokens: m.pricePerMillionTokens ?? m.price_per_million_tokens ?? 0,
         isEnabled: m.isEnabled ?? m.is_enabled ?? true,
@@ -92,18 +106,39 @@ const Models: React.FC = () => {
       }));
       setModels(mappedModels);
     } catch (err: any) {
-      const msg = typeof err.message === 'string' ? err.message : (err.detail || JSON.stringify(err));
-      setError('加载数据失败：' + msg);
+      setError('加载数据失败：' + (err.message || err.detail || JSON.stringify(err)));
     } finally {
       setLoading(false);
     }
   }, []);
 
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
+  useEffect(() => { loadData(); }, [loadData]);
 
-  // 供应商操作
+  // Test model connection
+  const handleTestConnection = async (modelId: string) => {
+    setTestingModelId(modelId);
+    setTestResult(null);
+    try {
+      const result = await adminAPI.testModelConnection(modelId) as any;
+      setTestResult(result.success !== undefined ? result : (result.data || result as TestResult));
+    } catch (err: any) {
+      setTestResult({ success: false, message: err.message || '测试失败' });
+    } finally {
+      setTestingModelId(null);
+    }
+  };
+
+  // Set default model
+  const handleSetDefault = async (modelId: string) => {
+    try {
+      await adminAPI.setDefaultModel(modelId);
+      await loadData();
+    } catch (err: any) {
+      setError(err.message || '设置失败');
+    }
+  };
+
+  // Provider operations
   const handleAddProvider = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!providerForm.name.trim()) return;
@@ -112,8 +147,8 @@ const Models: React.FC = () => {
       await adminAPI.addProvider({
         name: providerForm.name,
         protocol: providerForm.protocol,
-        api_key: providerForm.api_key,
-        api_base_url: providerForm.api_base_url || undefined,
+        api_key: (providerForm as any).api_key || providerForm.api_key,
+        api_base_url: (providerForm as any).api_base_url || providerForm.api_base_url || undefined,
       });
       setShowAddProvider(false);
       setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' });
@@ -129,13 +164,12 @@ const Models: React.FC = () => {
     try {
       setError(null);
       await adminAPI.updateProvider(editingProvider.id, {
-        name: providerForm.name,
-        protocol: providerForm.protocol,
-        api_key: providerForm.api_key,
-        api_base_url: providerForm.api_base_url || undefined,
+        name: providerForm.name, protocol: providerForm.protocol,
+        api_key: (providerForm as any).api_key || providerForm.api_key,
+        api_base_url: (providerForm as any).api_base_url || providerForm.api_base_url || undefined,
       });
       setEditingProvider(null);
-      setShowAddProvider(false);
+      setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' });
       await loadData();
     } catch (err: any) {
       setError(err.message || '更新供应商失败');
@@ -143,715 +177,401 @@ const Models: React.FC = () => {
   };
 
   const handleDeleteProvider = async (id: string) => {
-    if (!window.confirm('确定要删除该供应商吗？若有模型关联则无法删除。')) return;
+    if (!confirm('确定删除该供应商？')) return;
     try {
-      setError(null);
       await adminAPI.deleteProvider(id);
-      alert('供应商已删除');
       await loadData();
     } catch (err: any) {
-      const msg = err?.message || err?.detail || '删除供应商失败';
-      alert(msg);
-      setError(msg);
+      setError(err.message || '删除失败');
     }
   };
 
-  const handleFetchModels = async (id: string) => {
+  // Fetch models from provider API
+  const handleFetchModels = async (providerId: string) => {
     try {
-      setError(null);
-      setFetchedModels([]);
-      setFetchSource('');
-      setFetchMessage('');
+      const result = await adminAPI.fetchProviderModels(providerId) as any;
+      setFetchedModels(result.models || result.data?.models || []);
+      setFetchSource(result.source || result.data?.source || 'unknown');
+      setFetchMessage(result.message || result.data?.message || '');
+      setExpandedProvider(providerId);
       setSelectedModelIds(new Set());
-      const res = await adminAPI.fetchModels(id);
-      // 兼容后端返回数组或 {models: [...]} 两种格式
-      const raw = res.data !== undefined ? res.data : res;
-      const models = Array.isArray(raw) ? raw : (raw.models || []);
-      const source = raw.source || '';
-      const message = raw.message || '';
-      setFetchedModels(models);
-      setFetchSource(source);
-      setFetchMessage(message);
-      setExpandedProvider(id);
     } catch (err: any) {
       setError(err.message || '获取模型列表失败');
     }
   };
 
+  // Add selected models
   const handleAddModels = async (providerId: string) => {
     if (selectedModelIds.size === 0) return;
     try {
-      setError(null);
       await adminAPI.addModels(providerId, Array.from(selectedModelIds));
-      alert('模型添加成功');
+      setExpandedProvider(null);
+      setSelectedModelIds(new Set());
       setFetchedModels([]);
-      setSelectedModelIds(new Set());
       await loadData();
     } catch (err: any) {
-      const msg = err?.message || err?.detail || '添加模型失败';
-      alert(msg);
-      setError(msg);
+      setError(err.message || '添加模型失败');
     }
   };
 
-  const handleToggleModel = async (model: AIModel) => {
+  // Toggle model selection
+  const toggleModelSelection = (id: string) => {
+    const newSet = new Set(selectedModelIds);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setSelectedModelIds(newSet);
+  };
+
+  // Open model editor
+  const openModelEditor = (model?: AIModel, providerId?: string) => {
+    if (model) {
+      setEditingModel({
+        id: model.id, name: model.name,
+        provider_id: (model as any).provider_id || model.providerId || providerId || '',
+        api_key: (model as any).api_key || model.apiKey || '',
+        endpoint: model.endpoint || '',
+        capabilities: model.capabilities || ['text'],
+        timeout: model.timeout || 60,
+        status: model.status || 'paid',
+        price_per_million_tokens: model.pricePerMillionTokens ?? 0,
+        is_enabled: model.isEnabled ?? true,
+      });
+    } else {
+      setEditingModel({
+        name: '', provider_id: providerId || '',
+        api_key: '', endpoint: '',
+        capabilities: ['text'], timeout: 60,
+        status: 'paid', price_per_million_tokens: 0, is_enabled: true,
+      });
+    }
+    setShowModelEditor(true);
+  };
+
+  // Save model
+  const handleSaveModel = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingModel || !editingModel.name.trim()) return;
+    setModelSaving(true);
     try {
-      setError(null);
-      await adminAPI.toggleModel(model.id, !model.isEnabled);
+      if (editingModel.id) {
+        await adminAPI.updateAdminModel(editingModel.id, editingModel as any);
+      } else {
+        await adminAPI.createAdminModel(editingModel as any);
+      }
+      setShowModelEditor(false);
       await loadData();
     } catch (err: any) {
-      setError(err.message || '切换模型状态失败');
-    }
-  };
-
-  const handleDeleteModel = async (model: AIModel) => {
-    if (!window.confirm(`确定要删除模型 "${model.name}" 吗？`)) return;
-    try {
-      setError(null);
-      await adminAPI.deleteModel(model.id);
-      alert('模型已删除');
-      await loadData();
-    } catch (err: any) {
-      const msg = err?.message || err?.detail || '删除模型失败';
-      alert(msg);
-      setError(msg);
-    }
-  };
-
-  const handleStartEditPrice = (model: AIModel) => {
-    setEditingModelPrice(model.id);
-    setEditPriceValue(String(model.pricePerMillionTokens || 0));
-  };
-
-  const handleCancelEditPrice = () => {
-    setEditingModelPrice(null);
-    setEditPriceValue('');
-  };
-
-  const handleSavePrice = async (model: AIModel) => {
-    const newPrice = parseFloat(editPriceValue);
-    if (isNaN(newPrice) || newPrice < 0) {
-      setError('请输入有效的价格数值');
-      return;
-    }
-    setPriceSaving(true);
-    setError(null);
-    try {
-      await adminAPI.updateModel(model.id, { price_per_million_tokens: newPrice });
-      setEditingModelPrice(null);
-      setEditPriceValue('');
-      await loadData();
-    } catch (err: any) {
-      setError(err.message || '修改价格失败');
+      setError(err.message || '保存失败');
     } finally {
-      setPriceSaving(false);
+      setModelSaving(false);
     }
   };
 
-  const handleToggleStatus = async (model: AIModel) => {
-    const newStatus = model.status === 'free' ? 'paid' : 'free';
-    setError(null);
+  // Delete model
+  const handleDeleteModel = async (modelId: string) => {
+    if (!confirm('确定删除该模型？')) return;
     try {
-      await adminAPI.updateModel(model.id, { status: newStatus });
+      await adminAPI.deleteAdminModel(modelId);
       await loadData();
     } catch (err: any) {
-      setError(err.message || '修改计费状态失败');
+      setError(err.message || '删除失败');
     }
   };
 
-  // 全选/取消
-  const toggleSelectAll = (checked: boolean) => {
-    if (checked) {
-      setSelectedModelIds(new Set(fetchedModels.map(m => m.id)));
+  // Toggle capability
+  const toggleCapability = (cap: string) => {
+    if (!editingModel) return;
+    const caps = editingModel.capabilities || [];
+    if (caps.includes(cap)) {
+      editingModel.capabilities = caps.filter(c => c !== cap);
     } else {
-      setSelectedModelIds(new Set());
+      editingModel.capabilities = [...caps, cap];
     }
+    setEditingModel({ ...editingModel });
   };
 
-  const toggleSelectModel = (modelId: string) => {
-    const next = new Set(selectedModelIds);
-    if (next.has(modelId)) {
-      next.delete(modelId);
-    } else {
-      next.add(modelId);
-    }
-    setSelectedModelIds(next);
-  };
+  // Group models by provider
+  const getProviderModels = (providerId: string) =>
+    models.filter(m => ((m as any).provider_id || m.providerId) === providerId);
 
-  // 统计
-  const stats = {
-    providerCount: providers.length,
-    enabledCount: models.filter(m => m.isEnabled).length,
-    totalCalls: models.reduce((sum, m) => sum + (m.totalCalls || 0), 0),
-    totalTokens: models.reduce((sum, m) => sum + (m.totalTokens || 0), 0),
-  };
-
-  const statCards = [
-    { label: '供应商数', value: stats.providerCount },
-    { label: '启用模型数', value: stats.enabledCount },
-    { label: '总调用量', value: formatNumber(stats.totalCalls) },
-    { label: '总Token消耗', value: formatNumber(stats.totalTokens) },
-  ];
-
-  // 获取协议名称
-  const getProtocolName = (protocolId: string) => {
-    const p = protocols.find(p => p.id === protocolId);
-    return p ? p.name : protocolId;
-  };
-
-  // 获取provider下的模型
-  const getProviderModels = (providerId: string) => {
-    return models.filter(m => m.providerId === providerId);
+  const getProviderName = (providerId: string) => {
+    const p = providers.find(p => p.id === providerId);
+    return p ? p.name : providerId;
   };
 
   return (
-    <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-2xl)' }}>
-        <h1 className="admin-page-title" style={{ marginBottom: 0 }}>大模型库管理</h1>
-        <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
-          <button
-            className="admin-btn admin-btn-outline"
-            onClick={() => {
-              const dialog = document.createElement('dialog');
-              dialog.style.cssText = 'border:none;border-radius:16px;padding:24px;width:420px;max-width:90vw;box-shadow:0 20px 48px rgba(0,0,0,0.15);';
-              dialog.innerHTML = `
-                <h3 style="margin:0 0 16px;font-size:18px;font-weight:700;">设置全局默认LLM</h3>
-                <p style="margin:0 0 12px;font-size:13px;color:#545A65;">选择平台默认使用的大语言模型，新对话将自动使用此模型。</p>
-                <select id="defaultLLMSelect" style="width:100%;padding:10px 12px;border:1px solid #E3E6EB;border-radius:8px;font-size:14px;margin-bottom:16px;">
-                  ${models.filter(m => m.isEnabled).map(m => `<option value="${m.id}" ${(m as any).isDefault ? 'selected' : ''}>${m.name} - ${m.providerName || ''} ${m.status === 'free' ? '(免费)' : '(付费)'}</option>`).join('')}
-                  ${models.filter(m => m.isEnabled).length === 0 ? '<option disabled>暂无可用的启用模型</option>' : ''}
-                </select>
-                <div style="display:flex;gap:8px;justify-content:flex-end;">
-                  <button id="cancelDefaultLLM" style="padding:8px 16px;border:1px solid #E3E6EB;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;">取消</button>
-                  <button id="confirmDefaultLLM" style="padding:8px 16px;border:none;border-radius:8px;background:#5B5FED;color:#fff;cursor:pointer;font-size:13px;font-weight:600;">确认设置</button>
-                </div>
-              `;
-              document.body.appendChild(dialog);
-              dialog.showModal();
-              dialog.querySelector('#cancelDefaultLLM')!.addEventListener('click', () => { dialog.close(); dialog.remove(); });
-              dialog.querySelector('#confirmDefaultLLM')!.addEventListener('click', async () => {
-                const select = dialog.querySelector('#defaultLLMSelect') as HTMLSelectElement;
-                const modelId = select?.value;
-                if (!modelId) {
-                  alert('请选择模型');
-                  return;
-                }
-                try {
-                  await adminAPI.setDefaultModel(modelId);
-                  alert('已设置全局默认模型');
-                  dialog.close();
-                  dialog.remove();
-                  loadData();
-                } catch (err: any) {
-                  alert('设置失败：' + (err?.message || err?.detail || '未知错误'));
-                }
-              });
-            }}
-          >
-            <SVGIcon size={14}><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"/></SVGIcon>
-            设置默认LLM
-          </button>
-          <button
-            className="admin-btn admin-btn-primary"
-            onClick={() => { setShowAddProvider(true); setEditingProvider(null); setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' }); }}
-          >
-            <SVGIcon><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
-            添加供应商
-          </button>
+    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <div>
+          <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600 }}>大模型配置</h2>
+          <p style={{ margin: '4px 0 0', color: '#666', fontSize: '13px' }}>
+            管理 AI 模型供应商、模型配置和连接测试
+          </p>
         </div>
+        <button onClick={() => { setShowAddProvider(true); setEditingProvider(null); setProviderForm({ name: '', protocol: 'openai_compatible', api_key: '', api_base_url: '' }); }} 
+          style={btnStyle('#5B5FED')}>
+          + 添加供应商
+        </button>
       </div>
 
-      {/* 错误提示 */}
       {error && (
-        <div style={{
-          padding: 'var(--space-md) var(--space-lg)', marginBottom: 'var(--space-lg)',
-          background: 'var(--color-error-light)', color: 'var(--color-error)',
-          borderRadius: 'var(--radius-md)', fontSize: 'var(--text-sm)',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-        }}>
-          <span>{error}</span>
-          <span style={{ cursor: 'pointer', fontWeight: 700, marginLeft: 'var(--space-lg)' }} onClick={() => setError(null)}>x</span>
+        <div style={{ ...alertStyle('#FEE2E2', '#DC2626'), marginBottom: '16px' }}>
+          {error} <button onClick={() => setError(null)} style={{ float: 'right', background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px' }}>×</button>
         </div>
       )}
 
-      {/* Stats */}
-      <div className="admin-stats">
-        {statCards.map((s, i) => (
-          <div key={i} className="admin-stat-card">
-            <div className="admin-stat-label">{s.label}</div>
-            <div className="admin-stat-value" style={{ fontSize: 'var(--text-xl)' }}>{s.value}</div>
-          </div>
-        ))}
-      </div>
+      {loading ? (
+        <div style={{ textAlign: 'center', padding: '60px', color: '#999' }}>加载中...</div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          {providers.map(provider => {
+            const provModels = getProviderModels(provider.id);
+            const isExpanded = expandedProvider === provider.id;
 
-      {/* 加载状态 */}
-      {loading && (
-        <div style={{ textAlign: 'center', padding: 'var(--space-4xl)', color: 'var(--color-text-tertiary)' }}>
-          加载中...
-        </div>
-      )}
-
-      {/* 供应商列表 */}
-      {!loading && (
-        <div style={{ marginBottom: 'var(--space-2xl)' }}>
-          <h2 style={{ fontSize: 'var(--text-lg)', fontWeight: 600, marginBottom: 'var(--space-xl)' }}>模型供应商</h2>
-          {providers.length === 0 ? (
-            <div className="admin-card" style={{ textAlign: 'center', padding: 'var(--space-4xl)', color: 'var(--color-text-tertiary)' }}>
-              暂无供应商，请点击"添加供应商"开始
-            </div>
-          ) : (
-            providers.map(provider => (
-              <div key={provider.id} className="admin-card" style={{ marginBottom: 'var(--space-lg)' }}>
-                {/* 供应商卡片头部 */}
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-lg)' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
-                    <div style={{
-                      width: 40, height: 40, borderRadius: 'var(--radius-lg)',
-                      background: 'var(--color-accent-light)', color: 'var(--color-accent)',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    }}>
-                      <SVGIcon size={20}><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></SVGIcon>
+            return (
+              <div key={provider.id} style={{ background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB', overflow: 'hidden' }}>
+                {/* Provider Header */}
+                <div style={{ padding: '16px 20px', background: '#F9FAFB', borderBottom: '1px solid #E5E7EB', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <span style={{ fontWeight: 600, fontSize: '15px' }}>{provider.name}</span>
+                      <span style={{ fontSize: '11px', padding: '2px 8px', background: '#EEF2FF', color: '#5B5FED', borderRadius: '4px' }}>
+                        {provider.protocol}
+                      </span>
+                      {provModels.filter(m => m.isDefault).length > 0 && (
+                        <span style={{ fontSize: '11px', padding: '2px 8px', background: '#DCFCE7', color: '#16A34A', borderRadius: '4px' }}>默认</span>
+                      )}
                     </div>
-                    <div>
-                      <div style={{ fontSize: 'var(--text-base)', fontWeight: 600 }}>{provider.name}</div>
-                      <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>
-                        协议: {getProtocolName(provider.protocol)}
-                        {provider.apiBaseUrl ? ` | ${provider.apiBaseUrl}` : ''}
-                      </div>
+                    <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
+                      API: {(provider as any).api_base_url || provider.apiBaseUrl || '未配置'}
+                      {(provider as any).api_key || provider.apiKey ? ' ✓ 已配置Key' : ' ✗ 未配置Key'}
                     </div>
                   </div>
-                  <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
-                    <button
-                      className="admin-btn admin-btn-outline admin-btn-sm"
-                      onClick={() => handleFetchModels(provider.id)}
-                    >
-                      <SVGIcon size={12}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>
-                      获取模型列表
-                    </button>
-                    <button
-                      className="admin-btn admin-btn-outline admin-btn-sm"
-                      onClick={() => {
-                        setEditingProvider(provider);
-                        setProviderForm({
-                          name: provider.name,
-                          protocol: provider.protocol,
-                          api_key: provider.apiKey || (provider as any).api_key || '',
-                          api_base_url: provider.apiBaseUrl || (provider as any).api_base_url || '',
-                        });
-                        setShowAddProvider(true);
-                      }}
-                    >
-                      <SVGIcon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></SVGIcon>
-                      编辑
-                    </button>
-                    <button
-                      className="admin-btn admin-btn-danger admin-btn-sm"
-                      onClick={() => handleDeleteProvider(provider.id)}
-                    >
-                      <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
-                      删除
-                    </button>
+                  <div style={{ display: 'flex', gap: '8px' }}>
+                    <button onClick={() => handleFetchModels(provider.id)} style={btnStyle('#6B7280', 'small')}>获取模型</button>
+                    <button onClick={() => { setEditingProvider(provider); setProviderForm({ name: provider.name, protocol: provider.protocol,
+                      api_base_url: (provider as any).api_base_url || provider.apiBaseUrl || '',
+                      api_key: (provider as any).api_key || provider.apiKey || '' }); setShowAddProvider(true); }} style={btnStyle('#6B7280', 'small')}>编辑</button>
+                    <button onClick={() => handleDeleteProvider(provider.id)} style={btnStyle('#EF4444', 'small')}>删除</button>
+                    <button onClick={() => openModelEditor(undefined, provider.id)} style={btnStyle('#5B5FED', 'small')}>+ 添加模型</button>
                   </div>
                 </div>
 
-                {/* 获取到的模型列表 (fetch-models结果) */}
-                {expandedProvider === provider.id && fetchedModels.length > 0 && (
-                  <div style={{
-                    background: 'var(--color-bg-tertiary)',
-                    borderRadius: 'var(--radius-lg)',
-                    padding: 'var(--space-lg)',
-                    marginBottom: 'var(--space-md)',
-                  }}>
-                    <div style={{
-                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                      marginBottom: 'var(--space-md)',
-                    }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
-                        <span style={{ fontWeight: 600, fontSize: 'var(--text-sm)' }}>
-                          可选模型 ({fetchedModels.length})
-                        </span>
-                        {fetchSource && (
-                          <span style={{
-                            display: 'inline-block',
-                            padding: '1px 8px',
-                            borderRadius: 'var(--radius-full)',
-                            fontSize: '11px',
-                            fontWeight: 600,
-                            color: '#fff',
-                            background: fetchSource === 'api' ? '#219B5E' : fetchSource === 'error' ? '#D9383A' : '#E8922C',
-                          }}>
-                            {fetchSource === 'api' ? '真实API' : fetchSource === 'error' ? 'API错误' : '默认列表'}
-                          </span>
-                        )}
-                      </div>
-                      <button
-                        className="admin-btn admin-btn-primary admin-btn-sm"
-                        disabled={selectedModelIds.size === 0}
-                        style={{ opacity: selectedModelIds.size === 0 ? 0.5 : 1 }}
-                        onClick={() => handleAddModels(provider.id)}
-                      >
-                        添加选中模型 ({selectedModelIds.size})
-                      </button>
+                {/* Model Fetch Panel */}
+                {isExpanded && (
+                  <div style={{ padding: '16px 20px', background: '#FFFBEB', borderBottom: '1px solid #FDE68A' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                      <span style={{ fontSize: '13px', color: '#92400E' }}>
+                        {fetchMessage || `找到 ${fetchedModels.length} 个模型（来源: ${fetchSource}）`}
+                      </span>
+                      {fetchedModels.length > 0 && (
+                        <button onClick={() => handleAddModels(provider.id)} style={btnStyle('#5B5FED', 'small')} disabled={selectedModelIds.size === 0}>
+                          添加选中 ({selectedModelIds.size})
+                        </button>
+                      )}
                     </div>
-                    <table className="admin-table">
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                      {fetchedModels.map(m => (
+                        <label key={m.id} style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '13px', cursor: 'pointer', padding: '4px 8px', background: selectedModelIds.has(m.id) ? '#EDE9FE' : '#fff', border: '1px solid #D1D5DB', borderRadius: '4px' }}>
+                          <input type="checkbox" checked={selectedModelIds.has(m.id)} onChange={() => toggleModelSelection(m.id)} />
+                          {m.name || m.id}
+                        </label>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Models List */}
+                <div style={{ padding: '0' }}>
+                  {provModels.length === 0 ? (
+                    <div style={{ padding: '24px', textAlign: 'center', color: '#999', fontSize: '13px' }}>
+                      暂无模型，点击"获取模型"或"添加模型"添加
+                    </div>
+                  ) : (
+                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                       <thead>
-                        <tr>
-                          <th style={{ width: 40 }}>
-                            <input
-                              type="checkbox"
-                              checked={selectedModelIds.size === fetchedModels.length && fetchedModels.length > 0}
-                              onChange={e => toggleSelectAll(e.target.checked)}
-                            />
-                          </th>
-                          <th>模型名称</th>
-                          <th>功能标签</th>
-                          <th>计费类型</th>
+                        <tr style={{ background: '#F3F4F6' }}>
+                          <th style={thStyle}>模型</th>
+                          <th style={thStyle}>能力</th>
+                          <th style={thStyle}>状态</th>
+                          <th style={thStyle}>价格</th>
+                          <th style={thStyle}>调用量</th>
+                          <th style={thStyle}>操作</th>
                         </tr>
                       </thead>
                       <tbody>
-                        {fetchedModels.map(fm => (
-                          <tr key={fm.id}>
-                            <td>
-                              <input
-                                type="checkbox"
-                                checked={selectedModelIds.has(fm.id)}
-                                onChange={() => toggleSelectModel(fm.id)}
-                              />
+                        {provModels.map(model => (
+                          <tr key={model.id} style={{ borderBottom: '1px solid #F3F4F6' }}>
+                            <td style={tdStyle}>
+                              <div style={{ fontWeight: 500 }}>{model.name}</div>
+                              {model.isDefault && <span style={{ fontSize: '11px', color: '#16A34A' }}>⭐ 默认模型</span>}
                             </td>
-                            <td style={{ fontWeight: 600 }}>{fm.name}</td>
-                            <td>
+                            <td style={tdStyle}>
                               <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
-                                {(fm.capabilities || []).map(cap => (
-                                  <span key={cap} style={{
-                                    display: 'inline-block',
-                                    padding: '1px 8px',
-                                    borderRadius: 'var(--radius-full)',
-                                    fontSize: '11px',
-                                    fontWeight: 600,
-                                    color: '#fff',
-                                    background: capabilityColors[cap] || '#888',
-                                  }}>
+                                {(model.capabilities || []).map(cap => (
+                                  <span key={cap} style={{ fontSize: '11px', padding: '2px 6px', background: capabilityColors[cap] + '22', color: capabilityColors[cap], borderRadius: '3px' }}>
                                     {capabilityLabels[cap] || cap}
                                   </span>
                                 ))}
                               </div>
                             </td>
-                            <td>
-                              <span className={`admin-badge ${fm.pricing === 'free' ? 'badge-success' : 'badge-warning'}`}>
-                                {fm.pricing === 'free' ? '免费' : '付费'}
+                            <td style={tdStyle}>
+                              <span style={{ fontSize: '12px', padding: '2px 8px', background: model.isEnabled ? '#DCFCE7' : '#FEE2E2', color: model.isEnabled ? '#16A34A' : '#DC2626', borderRadius: '4px' }}>
+                                {model.isEnabled ? '启用' : '禁用'}
                               </span>
                             </td>
+                            <td style={tdStyle}>
+                              <span style={{ fontSize: '12px', color: '#666' }}>
+                                ¥{model.pricePerMillionTokens?.toFixed(4) || '0.0000'}/M
+                              </span>
+                            </td>
+                            <td style={tdStyle}>
+                              <span style={{ fontSize: '12px', color: '#666' }}>
+                                {formatNumber(model.totalCalls || 0)}
+                              </span>
+                            </td>
+                            <td style={tdStyle}>
+                              <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
+                                {/* Test Connection Button */}
+                                <button onClick={() => handleTestConnection(model.id)} disabled={testingModelId === model.id}
+                                  style={{ ...btnStyle(testingModelId === model.id ? '#9CA3AF' : '#059669', 'small') }}>
+                                  {testingModelId === model.id ? '测试中...' : '连接测试'}
+                                </button>
+                                {/* Test Result Popover */}
+                                {testResult && (
+                                  <div style={{ position: 'relative' }}>
+                                    <span style={{ fontSize: '11px', padding: '4px 8px', background: testResult.success ? '#DCFCE7' : '#FEE2E2', color: testResult.success ? '#16A34A' : '#DC2626', borderRadius: '4px', display: 'inline-block' }}>
+                                      {testResult.success ? '✓ 成功' : '✗ 失败'}
+                                      {testResult.latency_ms && ` (${testResult.latency_ms}ms)`}
+                                    </span>
+                                    <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10, background: '#fff', border: '1px solid #E5E7EB', borderRadius: '6px', padding: '8px 12px', fontSize: '12px', color: '#333', minWidth: '200px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', marginTop: '4px' }}>
+                                      {testResult.message}
+                                    </div>
+                                    <button onClick={() => setTestResult(null)} style={{ marginLeft: '8px', fontSize: '11px', color: '#999', background: 'none', border: 'none', cursor: 'pointer' }}>×</button>
+                                  </div>
+                                )}
+                                {!model.isDefault && model.isEnabled && (
+                                  <button onClick={() => handleSetDefault(model.id)} style={btnStyle('#5B5FED', 'small')}>设为默认</button>
+                                )}
+                                <button onClick={() => openModelEditor(model as AIModel)} style={btnStyle('#6B7280', 'small')}>编辑</button>
+                                <button onClick={() => handleDeleteModel(model.id)} style={btnStyle('#EF4444', 'small')}>删除</button>
+                              </div>
+                            </td>
                           </tr>
                         ))}
                       </tbody>
                     </table>
-                  </div>
-                )}
-
-                {/* 获取模型列表时的错误/提示信息 */}
-                {expandedProvider === provider.id && fetchedModels.length === 0 && fetchMessage && (
-                  <div style={{
-                    background: fetchSource === 'error' ? '#FEF2F2' : '#F0F9FA',
-                    border: fetchSource === 'error' ? '1px solid #FECACA' : '1px solid #BBD9DD',
-                    color: fetchSource === 'error' ? '#991B1B' : '#0F5156',
-                    borderRadius: 'var(--radius-lg)',
-                    padding: 'var(--space-xl)',
-                    marginBottom: 'var(--space-md)',
-                    fontSize: 'var(--text-sm)',
-                    display: 'flex', flexDirection: 'column', gap: 'var(--space-md)',
-                  }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
-                      <span style={{
-                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                        width: 24, height: 24, borderRadius: '50%',
-                        background: fetchSource === 'error' ? '#D9383A' : '#E8922C',
-                        color: '#fff', fontSize: '13px', fontWeight: 700,
-                      }}>
-                        {fetchSource === 'error' ? '!' : 'i'}
-                      </span>
-                      <span style={{
-                        display: 'inline-block',
-                        padding: '1px 8px',
-                        borderRadius: 'var(--radius-full)',
-                        fontSize: '11px',
-                        fontWeight: 600,
-                        color: '#fff',
-                        background: fetchSource === 'api' ? '#219B5E' : fetchSource === 'error' ? '#D9383A' : '#E8922C',
-                      }}>
-                        {fetchSource === 'api' ? '真实API' : fetchSource === 'error' ? 'API错误' : '默认列表'}
-                      </span>
-                      <span style={{ fontWeight: 600 }}>{fetchSource === 'error' ? '错误详情' : '提示'}</span>
-                    </div>
-                    <span style={{ lineHeight: 1.6 }}>{fetchMessage}</span>
-                    {fetchSource === 'error' && (
-                      <button
-                        className="admin-btn admin-btn-outline admin-btn-sm"
-                        style={{ alignSelf: 'flex-start' }}
-                        onClick={() => handleFetchModels(provider.id)}
-                      >
-                        <SVGIcon size={12}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>
-                        重试获取
-                      </button>
-                    )}
-                  </div>
-                )}
-
-                {/* 已上架模型 */}
-                {(() => {
-                  const providerModels = getProviderModels(provider.id);
-                  if (providerModels.length === 0) {
-                    return (
-                      <div style={{
-                        fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)',
-                        padding: 'var(--space-md) 0',
-                      }}>
-                        暂无模型，点击"获取模型列表"获取可用模型
-                      </div>
-                    );
-                  }
-                  return (
-                    <div style={{ overflowX: 'auto' }}>
-                      <table className="admin-table">
-                        <thead>
-                          <tr>
-                            <th>模型名</th>
-                            <th>功能标签</th>
-                            <th>单价(元/百万Token)</th>
-                            <th>状态</th>
-                            <th>调用量</th>
-                            <th>Token消耗</th>
-                            <th>开关</th>
-                            <th>操作</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {providerModels.map(model => (
-                            <tr key={model.id}>
-                              <td style={{ fontWeight: 600 }}>
-                                {model.name}
-                                {(model as any).isDefault && (
-                                  <span style={{
-                                    display: 'inline-block', marginLeft: 6,
-                                    padding: '0 6px', borderRadius: 'var(--radius-full)',
-                                    fontSize: '10px', fontWeight: 600,
-                                    background: '#FEF3C7', color: '#D97706',
-                                  }}>默认</span>
-                                )}
-                              </td>
-                              <td>
-                                <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
-                                  {(model.capabilities || []).map((cap: string) => (
-                                    <span key={cap} style={{
-                                      display: 'inline-block',
-                                      padding: '1px 6px',
-                                      borderRadius: 'var(--radius-full)',
-                                      fontSize: '10px',
-                                      fontWeight: 600,
-                                      color: '#fff',
-                                      background: capabilityColors[cap] || '#888',
-                                    }}>
-                                      {capabilityLabels[cap] || cap}
-                                    </span>
-                                  ))}
-                                </div>
-                              </td>
-                              <td style={{ fontFamily: 'var(--font-mono)', textAlign: 'center' }}>
-                                {editingModelPrice === model.id ? (
-                                  <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                                    <input
-                                      type="number"
-                                      min="0"
-                                      step="0.01"
-                                      value={editPriceValue}
-                                      onChange={e => setEditPriceValue(e.target.value)}
-                                      style={{
-                                        width: 80, padding: '2px 6px', fontSize: 'var(--text-xs)',
-                                        border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)',
-                                      }}
-                                      autoFocus
-                                      onKeyDown={e => {
-                                        if (e.key === 'Enter') handleSavePrice(model);
-                                        if (e.key === 'Escape') handleCancelEditPrice();
-                                      }}
-                                    />
-                                    <button
-                                      className="admin-btn admin-btn-primary admin-btn-sm"
-                                      style={{ padding: '2px 6px', fontSize: '10px' }}
-                                      onClick={() => handleSavePrice(model)}
-                                      disabled={priceSaving}
-                                    >
-                                      确定
-                                    </button>
-                                    <button
-                                      className="admin-btn admin-btn-outline admin-btn-sm"
-                                      style={{ padding: '2px 6px', fontSize: '10px' }}
-                                      onClick={handleCancelEditPrice}
-                                    >
-                                      取消
-                                    </button>
-                                  </div>
-                                ) : (
-                                  <span
-                                    style={{
-                                      cursor: 'pointer',
-                                      padding: '2px 8px',
-                                      borderRadius: 'var(--radius-sm)',
-                                      transition: 'background var(--transition-fast)',
-                                    }}
-                                    onMouseEnter={e => (e.currentTarget.style.background = '#F0F4FF')}
-                                    onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
-                                    onClick={() => handleStartEditPrice(model)}
-                                    title="点击编辑单价"
-                                  >
-                                    {model.pricePerMillionTokens !== undefined && model.pricePerMillionTokens !== null
-                                      ? '¥' + model.pricePerMillionTokens.toFixed(2)
-                                      : '未设置'}
-                                  </span>
-                                )}
-                              </td>
-                              <td>
-                                <span
-                                  className={`admin-badge ${model.status === 'free' ? 'badge-success' : 'badge-warning'}`}
-                                  style={{ cursor: 'pointer' }}
-                                  onClick={() => handleToggleStatus(model)}
-                                  title="点击切换计费状态"
-                                >
-                                  {model.status === 'free' ? '免费' : '付费'}
-                                </span>
-                              </td>
-                              <td style={{ fontFamily: 'var(--font-mono)' }}>{formatNumber(model.totalCalls || 0)}</td>
-                              <td style={{ fontFamily: 'var(--font-mono)' }}>{formatNumber(model.totalTokens || 0)}</td>
-                              <td>
-                                <button
-                                  onClick={() => handleToggleModel(model)}
-                                  style={{
-                                    width: 44, height: 24, borderRadius: 12, border: 'none',
-                                    background: model.isEnabled ? 'var(--color-accent)' : 'var(--color-text-disabled)',
-                                    cursor: 'pointer', position: 'relative', transition: 'background var(--transition-fast)',
-                                  }}
-                                >
-                                  <span style={{
-                                    position: 'absolute', top: 2, left: model.isEnabled ? 22 : 2,
-                                    width: 20, height: 20, borderRadius: '50%', background: '#FFFFFF',
-                                    transition: 'left var(--transition-fast)',
-                                    boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-                                  }} />
-                                </button>
-                              </td>
-                              <td>
-                                <button
-                                  className="admin-btn admin-btn-danger admin-btn-sm"
-                                  onClick={() => handleDeleteModel(model)}
-                                >
-                                  <SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
-                                  删除
-                                </button>
-                                {(model as any).isDefault ? (
-                                  <span className="admin-badge badge-success" style={{ marginLeft: 4, fontSize: '10px' }}>默认</span>
-                                ) : (
-                                  <button
-                                    className="admin-btn admin-btn-outline admin-btn-sm"
-                                    style={{ marginLeft: 4, fontSize: '10px' }}
-                                    onClick={async () => {
-                                      try {
-                                        await adminAPI.setDefaultModel(model.id);
-                                        loadData();
-                                      } catch (err: any) {
-                                        alert('设置失败：' + (err?.message || err?.detail || ''));
-                                      }
-                                    }}
-                                  >设为默认</button>
-                                )}
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  );
-                })()}
+                  )}
+                </div>
               </div>
-            ))
+            );
+          })}
+
+          {providers.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '60px', background: '#fff', borderRadius: '8px', border: '1px solid #E5E7EB' }}>
+              <div style={{ fontSize: '48px', marginBottom: '16px' }}>🤖</div>
+              <p style={{ color: '#666', marginBottom: '16px' }}>暂无模型供应商，点击上方按钮添加</p>
+            </div>
           )}
         </div>
       )}
 
-      {/* 添加/编辑供应商弹窗 */}
+      {/* Provider Modal */}
       {showAddProvider && (
-        <div style={{
-          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
-          background: 'rgba(0,0,0,0.4)', zIndex: 'var(--z-modal)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          animation: 'fadeIn var(--transition-normal)',
-        }} onClick={() => { setShowAddProvider(false); setEditingProvider(null); }}>
-          <div style={{
-            background: '#FFFFFF', borderRadius: 'var(--radius-2xl)', width: 520, maxHeight: '90vh', overflow: 'auto',
-            padding: 'var(--space-3xl)', boxShadow: 'var(--shadow-xl)',
-          }} onClick={e => e.stopPropagation()}>
-            <h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginBottom: 'var(--space-2xl)' }}>
-              {editingProvider ? '编辑供应商' : '添加供应商'}
-            </h3>
-
+        <div style={modalOverlay}>
+          <div style={modalContent}>
+            <h3 style={{ marginTop: 0 }}>{editingProvider ? '编辑供应商' : '添加供应商'}</h3>
             <form onSubmit={editingProvider ? handleUpdateProvider : handleAddProvider}>
-              <div className="admin-form-group">
-                <label className="admin-form-label">供应商名称</label>
-                <input
-                  className="admin-form-input"
-                  value={providerForm.name}
-                  onChange={e => setProviderForm({ ...providerForm, name: e.target.value })}
-                  placeholder="例如: DeepSeek"
-                  required
-                />
+              <div style={formGroup}>
+                <label style={labelStyle}>供应商名称 *</label>
+                <input value={providerForm.name} onChange={e => setProviderForm({ ...providerForm, name: e.target.value })} placeholder="如：SiliconFlow" style={inputStyle} required />
               </div>
-
-              <div className="admin-form-group">
-                <label className="admin-form-label">协议类型</label>
-                <select
-                  className="admin-form-input"
-                  value={providerForm.protocol}
-                  onChange={e => setProviderForm({ ...providerForm, protocol: e.target.value })}
-                >
-                  {protocols.map(p => (
-                    <option key={p.id} value={p.id}>{p.name} - {p.description}</option>
-                  ))}
+              <div style={formGroup}>
+                <label style={labelStyle}>API 协议</label>
+                <select value={providerForm.protocol} onChange={e => setProviderForm({ ...providerForm, protocol: e.target.value })} style={inputStyle}>
+                  {protocols.map(p => <option key={p.id} value={p.id}>{p.name} ({p.id})</option>)}
                 </select>
               </div>
-
-              <div className="admin-form-group">
-                <label className="admin-form-label">API Key</label>
-                <input
-                  className="admin-form-input"
-                  value={providerForm.api_key}
-                  onChange={e => setProviderForm({ ...providerForm, api_key: e.target.value })}
-                  placeholder="sk-..."
-                />
+              <div style={formGroup}>
+                <label style={labelStyle}>API Base URL</label>
+                <input value={providerForm.api_base_url} onChange={e => setProviderForm({ ...providerForm, api_base_url: e.target.value })} placeholder="https://api.siliconflow.cn" style={inputStyle} />
               </div>
+              <div style={formGroup}>
+                <label style={labelStyle}>API Key</label>
+                <input type="password" value={providerForm.api_key} onChange={e => setProviderForm({ ...providerForm, api_key: e.target.value })} placeholder="sk-..." style={inputStyle} />
+              </div>
+              <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                <button type="button" onClick={() => { setShowAddProvider(false); setEditingProvider(null); }} style={btnStyle('#6B7280')}>取消</button>
+                <button type="submit" style={btnStyle('#5B5FED')}>{editingProvider ? '保存' : '添加'}</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
 
-              <div className="admin-form-group">
-                <label className="admin-form-label">API Base URL（可选）</label>
-                <input
-                  className="admin-form-input"
-                  value={providerForm.api_base_url}
-                  onChange={e => setProviderForm({ ...providerForm, api_base_url: e.target.value })}
-                  placeholder="例如: https://api.deepseek.com"
-                />
-                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)', marginTop: 'var(--space-xs)' }}>
-                  根域名，不含路径。系统将自动拼接协议对应的请求路径
+      {/* Model Editor Modal */}
+      {showModelEditor && editingModel && (
+        <div style={modalOverlay}>
+          <div style={{ ...modalContent, maxWidth: '600px' }}>
+            <h3 style={{ marginTop: 0 }}>{editingModel.id ? '编辑模型' : '添加模型'}</h3>
+            <form onSubmit={handleSaveModel}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                <div style={formGroup}>
+                  <label style={labelStyle}>模型名称 *</label>
+                  <input value={editingModel.name} onChange={e => setEditingModel({ ...editingModel, name: e.target.value })} placeholder="如：DeepSeek-V4-Flash" style={inputStyle} required />
+                </div>
+                <div style={formGroup}>
+                  <label style={labelStyle}>供应商</label>
+                  <select value={editingModel.provider_id} onChange={e => setEditingModel({ ...editingModel, provider_id: e.target.value })} style={inputStyle}>
+                    {providers.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                  </select>
                 </div>
               </div>
-
-              <div className="admin-form-actions">
-                <button type="submit" className="admin-btn admin-btn-primary">
-                  {editingProvider ? '保存修改' : '创建供应商'}
-                </button>
-                <button
-                  type="button"
-                  className="admin-btn admin-btn-outline"
-                  onClick={() => { setShowAddProvider(false); setEditingProvider(null); }}
-                >
-                  取消
-                </button>
+              <div style={formGroup}>
+                <label style={labelStyle}>API Key</label>
+                <input type="password" value={editingModel.api_key} onChange={e => setEditingModel({ ...editingModel, api_key: e.target.value })} placeholder="sk-... (留空则使用供应商的Key)" style={inputStyle} />
+              </div>
+              <div style={formGroup}>
+                <label style={labelStyle}>API Endpoint</label>
+                <input value={editingModel.endpoint} onChange={e => setEditingModel({ ...editingModel, endpoint: e.target.value })} placeholder="https://api.siliconflow.cn/v1/chat/completions" style={inputStyle} />
+              </div>
+              <div style={formGroup}>
+                <label style={labelStyle}>模型能力 (可多选)</label>
+                <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+                  {Object.entries(capabilityLabels).map(([key, label]) => (
+                    <label key={key} style={{ display: 'flex', alignItems: 'center', gap: '4px', cursor: 'pointer', padding: '4px 10px', background: (editingModel.capabilities || []).includes(key) ? capabilityColors[key] + '22' : '#F3F4F6', border: `1px solid ${(editingModel.capabilities || []).includes(key) ? capabilityColors[key] : '#D1D5DB'}`, borderRadius: '4px', fontSize: '13px' }}>
+                      <input type="checkbox" checked={(editingModel.capabilities || []).includes(key)} onChange={() => toggleCapability(key)} style={{ display: 'none' }} />
+                      <span style={{ color: capabilityColors[key] }}>●</span> {label}
+                    </label>
+                  ))}
+                </div>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px' }}>
+                <div style={formGroup}>
+                  <label style={labelStyle}>超时 (秒)</label>
+                  <input type="number" value={editingModel.timeout} onChange={e => setEditingModel({ ...editingModel, timeout: parseInt(e.target.value) || 60 })} style={inputStyle} />
+                </div>
+                <div style={formGroup}>
+                  <label style={labelStyle}>计费状态</label>
+                  <select value={editingModel.status} onChange={e => setEditingModel({ ...editingModel, status: e.target.value })} style={inputStyle}>
+                    <option value="free">免费</option>
+                    <option value="paid">付费</option>
+                  </select>
+                </div>
+                <div style={formGroup}>
+                  <label style={labelStyle}>价格 (¥/M tokens)</label>
+                  <input type="number" step="0.0001" value={editingModel.price_per_million_tokens} onChange={e => setEditingModel({ ...editingModel, price_per_million_tokens: parseFloat(e.target.value) || 0 })} style={inputStyle} />
+                </div>
+              </div>
+              <div style={formGroup}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+                  <input type="checkbox" checked={editingModel.is_enabled} onChange={e => setEditingModel({ ...editingModel, is_enabled: e.target.checked })} />
+                  启用该模型
+                </label>
+              </div>
+              <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                <button type="button" onClick={() => setShowModelEditor(false)} style={btnStyle('#6B7280')}>取消</button>
+                <button type="submit" disabled={modelSaving} style={btnStyle('#5B5FED')}>{modelSaving ? '保存中...' : '保存'}</button>
               </div>
             </form>
           </div>
@@ -861,4 +581,20 @@ const Models: React.FC = () => {
   );
 };
 
+// Styles
+const btnStyle = (color: string, size: 'normal' | 'small' = 'normal'): React.CSSProperties => ({
+  background: color, color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer',
+  fontSize: size === 'small' ? '12px' : '14px', padding: size === 'small' ? '4px 10px' : '8px 16px',
+  fontWeight: 500, transition: 'opacity 0.2s',
+});
+
+const thStyle: React.CSSProperties = { padding: '10px 16px', textAlign: 'left', fontSize: '12px', color: '#6B7280', fontWeight: 600 };
+const tdStyle: React.CSSProperties = { padding: '12px 16px', fontSize: '13px', verticalAlign: 'middle' };
+const formGroup: React.CSSProperties = { marginBottom: '16px' };
+const labelStyle: React.CSSProperties = { display: 'block', marginBottom: '6px', fontSize: '13px', fontWeight: 500, color: '#374151' };
+const inputStyle: React.CSSProperties = { width: '100%', padding: '8px 12px', border: '1px solid #D1D5DB', borderRadius: '6px', fontSize: '13px', boxSizing: 'border-box' };
+const alertStyle = (bg: string, color: string): React.CSSProperties => ({ background: bg, color, padding: '10px 16px', borderRadius: '6px', fontSize: '13px' });
+const modalOverlay: React.CSSProperties = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 };
+const modalContent: React.CSSProperties = { background: '#fff', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '90vw', maxHeight: '90vh', overflow: 'auto', boxSizing: 'border-box' };
+
 export default Models;
diff --git a/frontend/src/pages/admin/Skills.tsx b/frontend/src/pages/admin/Skills.tsx
new file mode 100644
index 0000000..9f3ad6e
--- /dev/null
+++ b/frontend/src/pages/admin/Skills.tsx
@@ -0,0 +1,667 @@
+import React, { useState, useEffect } from 'react';
+import { adminAPI } from '@/api';
+import type { SkillState } from '@/types';
+
+type AdminSkill = {
+  id: string;
+  user_id: string;
+  owner_username?: string;
+  skill_name: string;
+  description?: string;
+  tags: string[];
+  category?: string;
+  category_label?: string;
+  state: SkillState;
+  use_count: number;
+  version: number;
+  skill_md_path?: string;
+  last_used_at?: string;
+  created_at?: string;
+  updated_at?: string;
+  skill_md_content?: string;
+  publish_records?: PublishRecord[];
+};
+
+interface PublishRecord {
+  id: string;
+  price: number;
+  status: string;
+  published_at?: string;
+}
+
+interface SkillVersion {
+  id: string;
+  version: number;
+  description?: string;
+  skill_md_content?: string;
+  created_at?: string;
+}
+
+interface SkillsStats {
+  total_skills: number;
+  by_state: Record<string, number>;
+  by_category: Record<string, number>;
+  total_published: number;
+  total_versions: number;
+}
+
+const STATE_CONFIG: Record<SkillState, { label: string; color: string; bg: string }> = {
+  baby: { label: '萌芽期', color: '#6B7280', bg: '#F3F4F6' },
+  main: { label: '主力期', color: '#10B981', bg: '#D1FAE5' },
+  staging: { label: '灰度期', color: '#F59E0B', bg: '#FEF3C7' },
+  frozen: { label: '已冻结', color: '#EF4444', bg: '#FEE2E2' },
+};
+
+const CATEGORIES = [
+  { id: 'writing', label: '文字创作' },
+  { id: 'coding', label: '代码能力' },
+  { id: 'data_analysis', label: '数据分析' },
+  { id: 'qa', label: '知识问答' },
+  { id: 'automation', label: '流程自动化' },
+  { id: 'creativity', label: '创意生成' },
+  { id: 'communication', label: '沟通协作' },
+  { id: 'reasoning', label: '逻辑推理' },
+  { id: 'other', label: '其他' },
+];
+
+const PAGE_SIZE = 15;
+
+const Skills: React.FC = () => {
+  const [skills, setSkills] = useState<AdminSkill[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [stats, setStats] = useState<any>(null);
+
+  // Filters
+  const [keyword, setKeyword] = useState('');
+  const [filterState, setFilterState] = useState<string>('');
+  const [filterCategory, setFilterCategory] = useState<string>('');
+
+  // Create/Edit Modal
+  const [showModal, setShowModal] = useState(false);
+  const [editingSkill, setEditingSkill] = useState<AdminSkill | null>(null);
+  const [form, setForm] = useState({
+    skill_name: '',
+    user_id: '',
+    description: '',
+    tags: '',
+    category: '',
+    skill_md_content: '## 技能定义\n\n### 触发词\n- /skill\n\n### 能力说明\n请描述这个技能的核心能力...\n\n### 使用场景\n1. 场景一\n2. 场景二\n\n### 示例对话\n**用户**: \n**AI**: ',
+  });
+
+  // Version Drawer
+  const [showVersions, setShowVersions] = useState(false);
+  const [versions, setVersions] = useState<any[]>([]);
+  const [versionSkill, setVersionSkill] = useState<AdminSkill | null>(null);
+  const [loadingVersions, setLoadingVersions] = useState(false);
+
+  // Users list (for owner selection)
+  const [users, setUsers] = useState<{id: string; username: string}[]>([]);
+
+  // Confirm delete
+  const [deleteTarget, setDeleteTarget] = useState<AdminSkill | null>(null);
+
+  // Toast
+  const [toast, setToast] = useState<{msg: string; type: 'success' | 'error'} | null>(null);
+
+  const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 3000);
+  };
+
+  // Load skills list
+  const loadSkills = async () => {
+    setLoading(true);
+    try {
+      const params: any = { page, page_size: PAGE_SIZE };
+      if (keyword) params.keyword = keyword;
+      if (filterState) params.state = filterState;
+      if (filterCategory) params.category = filterCategory;
+
+      const result = await adminAPI.getAdminSkills(params) as any;
+      const data = result.data || result;
+      setSkills(data.items || []);
+      setTotal(data.total || 0);
+    } catch (e: any) {
+      showToast(`加载失败: ${e.message || e}`, 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load stats
+  const loadStats = async () => {
+    try {
+      const result = await adminAPI.getAdminSkillsStats() as any;
+      const data = result.data || result;
+      setStats(data);
+    } catch {}
+  };
+
+  // Load users for owner selection
+  const loadUsers = async () => {
+    try {
+      const result = await adminAPI.getUsers({ page_size: 100 }) as any;
+      const data = result.data || result;
+      setUsers((data.items || data || []).slice(0, 20));
+    } catch {}
+  };
+
+  useEffect(() => {
+    loadSkills();
+  }, [page, keyword, filterState, filterCategory]);
+
+  useEffect(() => {
+    loadStats();
+    loadUsers();
+  }, []);
+
+  // Search
+  const handleSearch = () => {
+    setPage(1);
+    loadSkills();
+  };
+
+  // Open create modal
+  const openCreate = () => {
+    setEditingSkill(null);
+    setForm({
+      skill_name: '',
+      user_id: users[0]?.id || '',
+      description: '',
+      tags: '',
+      category: '',
+      skill_md_content: '## 技能定义\n\n### 触发词\n- /skill\n\n### 能力说明\n请描述这个技能的核心能力...\n\n### 使用场景\n1. 场景一\n2. 场景二\n\n### 示例对话\n**用户**: \n**AI**: ',
+    });
+    setShowModal(true);
+  };
+
+  // Open edit modal
+  const openEdit = (skill: AdminSkill) => {
+    setEditingSkill(skill);
+    setForm({
+      skill_name: skill.skill_name,
+      user_id: skill.user_id,
+      description: skill.description || '',
+      tags: (skill.tags || []).join(', '),
+      category: skill.category || '',
+      skill_md_content: skill.skill_md_content || '',
+    });
+    setShowModal(true);
+  };
+
+  // Save skill
+  const handleSave = async () => {
+    if (!form.skill_name.trim()) {
+      showToast('技能名称不能为空', 'error');
+      return;
+    }
+    if (!form.user_id) {
+      showToast('请选择所属用户', 'error');
+      return;
+    }
+
+    const tags = form.tags.split(',').map(t => t.trim()).filter(Boolean);
+    const payload: any = {
+      skill_name: form.skill_name,
+      user_id: form.user_id,
+      description: form.description,
+      tags,
+      category: form.category || undefined,
+      skill_md_content: form.skill_md_content,
+    };
+
+    try {
+      if (editingSkill) {
+        await adminAPI.updateAdminSkill(editingSkill.id, payload);
+        showToast('技能已更新');
+      } else {
+        await adminAPI.createAdminSkill(payload);
+        showToast('技能已创建');
+      }
+      setShowModal(false);
+      loadSkills();
+      loadStats();
+    } catch (e: any) {
+      showToast(`保存失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Delete skill
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await adminAPI.deleteAdminSkill(deleteTarget.id);
+      showToast('技能已删除');
+      setDeleteTarget(null);
+      loadSkills();
+      loadStats();
+    } catch (e: any) {
+      showToast(`删除失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Change state
+  const handleChangeState = async (skill: AdminSkill, newState: string) => {
+    try {
+      await adminAPI.changeAdminSkillState(skill.id, { state: newState });
+      showToast(`状态已变更为 ${STATE_CONFIG[newState as SkillState].label}`);
+      loadSkills();
+      loadStats();
+    } catch (e: any) {
+      showToast(`状态修改失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Load version history
+  const handleShowVersions = async (skill: AdminSkill) => {
+    setVersionSkill(skill);
+    setShowVersions(true);
+    setLoadingVersions(true);
+    try {
+      const result = await adminAPI.getAdminSkillVersions(skill.id) as any;
+      const data = result.data || result;
+      setVersions(data.versions || []);
+    } catch (e: any) {
+      showToast(`加载版本历史失败: ${e.message || e}`, 'error');
+      setVersions([]);
+    } finally {
+      setLoadingVersions(false);
+    }
+  };
+
+  // Rollback version
+  const handleRollback = async (skill: AdminSkill, targetVersion: number) => {
+    if (!confirm(`确定回滚到版本 ${targetVersion} 吗？`)) return;
+    try {
+      await adminAPI.rollbackAdminSkill(skill.id, { version: targetVersion });
+      showToast(`已回滚到版本 ${targetVersion}`);
+      setShowVersions(false);
+      loadSkills();
+    } catch (e: any) {
+      showToast(`回滚失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  // Publish/Unpublish
+  const handlePublish = async (skill: AdminSkill) => {
+    const price = parseFloat(prompt('设置定价（元，0=免费）:', '0') || '0');
+    if (isNaN(price) || price < 0) return;
+    try {
+      await adminAPI.publishAdminSkill(skill.id, { price, market_description: skill.description || '' });
+      showToast('已发布到应用市场');
+      loadSkills();
+    } catch (e: any) {
+      showToast(`发布失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  const handleUnpublish = async (skill: AdminSkill) => {
+    if (!confirm('确定从市场下架吗？')) return;
+    try {
+      await adminAPI.unpublishAdminSkill(skill.id);
+      showToast('已从市场下架');
+      loadSkills();
+    } catch (e: any) {
+      showToast(`下架失败: ${e.message || e}`, 'error');
+    }
+  };
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+  const isPublished = (skill: AdminSkill) =>
+    (skill.publish_records || []).some(r => r.status === 'published');
+
+  return (
+    <div className="admin-page">
+      {/* Toast */}
+      {toast && (
+        <div className={`toast ${toast.type}`} style={{
+          position: 'fixed', top: 20, right: 20, zIndex: 9999,
+          padding: '12px 20px', borderRadius: 8,
+          background: toast.type === 'success' ? '#10B981' : '#EF4444',
+          color: '#fff', fontSize: 14, boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
+        }}>
+          {toast.msg}
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="admin-page-header">
+        <div>
+          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>技能管理</h2>
+          <p style={{ margin: '4px 0 0', color: '#6B7280', fontSize: 13 }}>
+            管理全平台 AI 技能，支持版本历史与市场发布
+          </p>
+        </div>
+        <button className="admin-btn primary" onClick={openCreate}>+ 创建技能</button>
+      </div>
+
+      {/* Stats Cards */}
+      {stats && (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 20 }}>
+          <div className="stat-card">
+            <div className="stat-value">{stats.total_skills}</div>
+            <div className="stat-label">技能总数</div>
+          </div>
+          {Object.entries(STATE_CONFIG).map(([state, cfg]) => (
+            <div key={state} className="stat-card" style={{ borderLeft: `3px solid ${cfg.color}` }}>
+              <div className="stat-value">{stats.by_state[state] || 0}</div>
+              <div className="stat-label">{cfg.label}</div>
+            </div>
+          ))}
+          <div className="stat-card" style={{ borderLeft: '3px solid #8B5CF6' }}>
+            <div className="stat-value">{stats.total_published}</div>
+            <div className="stat-label">已发布市场</div>
+          </div>
+          <div className="stat-card" style={{ borderLeft: '3px solid #3B82F6' }}>
+            <div className="stat-value">{stats.total_versions}</div>
+            <div className="stat-label">版本记录</div>
+          </div>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="admin-filters" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
+        <input
+          className="admin-form-input"
+          placeholder="搜索技能名称或描述..."
+          value={keyword}
+          onChange={e => setKeyword(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSearch()}
+          style={{ maxWidth: 280 }}
+        />
+        <select className="admin-form-input" value={filterState} onChange={e => { setFilterState(e.target.value); setPage(1); }} style={{ maxWidth: 140 }}>
+          <option value="">全部状态</option>
+          {Object.entries(STATE_CONFIG).map(([k, v]) => (
+            <option key={k} value={k}>{v.label}</option>
+          ))}
+        </select>
+        <select className="admin-form-input" value={filterCategory} onChange={e => { setFilterCategory(e.target.value); setPage(1); }} style={{ maxWidth: 160 }}>
+          <option value="">全部分类</option>
+          {CATEGORIES.map(c => (
+            <option key={c.id} value={c.id}>{c.label}</option>
+          ))}
+        </select>
+        <button className="admin-btn" onClick={handleSearch}>搜索</button>
+        {(keyword || filterState || filterCategory) && (
+          <button className="admin-btn" onClick={() => { setKeyword(''); setFilterState(''); setFilterCategory(''); setPage(1); }}>
+            清空筛选
+          </button>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="admin-table-wrap">
+        <table className="admin-table">
+          <thead>
+            <tr>
+              <th>技能名称</th>
+              <th>状态</th>
+              <th>分类</th>
+              <th>所有者</th>
+              <th>版本</th>
+              <th>使用次数</th>
+              <th>市场</th>
+              <th>更新时间</th>
+              <th style={{ width: 280 }}>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</td></tr>
+            ) : skills.length === 0 ? (
+              <tr><td colSpan={9} style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无技能</td></tr>
+            ) : skills.map(skill => {
+              const cfg = STATE_CONFIG[skill.state as SkillState] || STATE_CONFIG.baby;
+              const published = isPublished(skill);
+              return (
+                <tr key={skill.id}>
+                  <td>
+                    <div style={{ fontWeight: 500 }}>{skill.skill_name}</div>
+                    {skill.description && (
+                      <div style={{ fontSize: 12, color: '#6B7280', marginTop: 2, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {skill.description}
+                      </div>
+                    )}
+                    {skill.tags && skill.tags.length > 0 && (
+                      <div style={{ display: 'flex', gap: 4, marginTop: 4, flexWrap: 'wrap' }}>
+                        {skill.tags.slice(0, 3).map(tag => (
+                          <span key={tag} style={{ fontSize: 11, padding: '1px 6px', background: '#EEF2FF', color: '#6366F1', borderRadius: 4 }}>{tag}</span>
+                        ))}
+                        {skill.tags.length > 3 && <span style={{ fontSize: 11, color: '#6B7280' }}>+{skill.tags.length - 3}</span>}
+                      </div>
+                    )}
+                  </td>
+                  <td>
+                    <span style={{
+                      display: 'inline-block', padding: '2px 10px', borderRadius: 12, fontSize: 12,
+                      background: cfg.bg, color: cfg.color, fontWeight: 500
+                    }}>
+                      {cfg.label}
+                    </span>
+                  </td>
+                  <td>{skill.category_label || '-'}</td>
+                  <td>{skill.owner_username || skill.user_id}</td>
+                  <td>v{skill.version}</td>
+                  <td>{skill.use_count}</td>
+                  <td>
+                    {published ? (
+                      <span style={{ color: '#10B981', fontSize: 13 }}>✓ 已发布</span>
+                    ) : (
+                      <span style={{ color: '#9CA3AF', fontSize: 13 }}>未发布</span>
+                    )}
+                  </td>
+                  <td style={{ fontSize: 12, color: '#6B7280' }}>
+                    {skill.updated_at ? skill.updated_at.slice(0, 16).replace('T', ' ') : '-'}
+                  </td>
+                  <td>
+                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                      <button className="admin-btn small" onClick={() => openEdit(skill)}>编辑</button>
+                      <button className="admin-btn small" onClick={() => handleShowVersions(skill)}>版本</button>
+                      {published ? (
+                        <button className="admin-btn small warning" onClick={() => handleUnpublish(skill)}>下架</button>
+                      ) : (
+                        <button className="admin-btn small success" onClick={() => handlePublish(skill)}>发布</button>
+                      )}
+                      {/* State change */}
+                      <select
+                        className="admin-form-input small"
+                        value={skill.state}
+                        onChange={e => handleChangeState(skill, e.target.value)}
+                        style={{ padding: '2px 4px', fontSize: 12, maxWidth: 90 }}
+                      >
+                        {Object.entries(STATE_CONFIG).map(([k, v]) => (
+                          <option key={k} value={k}>{v.label}</option>
+                        ))}
+                      </select>
+                      <button className="admin-btn small danger" onClick={() => setDeleteTarget(skill)}>删除</button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="admin-pagination">
+          <span style={{ color: '#6B7280', fontSize: 13 }}>
+            共 {total} 条，第 {page}/{totalPages} 页
+          </span>
+          <div style={{ display: 'flex', gap: 4 }}>
+            <button className="admin-btn small" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
+            {[...Array(Math.min(5, totalPages))].map((_, i) => {
+              const p = Math.max(1, Math.min(page - 2, totalPages - 4)) + i;
+              return p <= totalPages && (
+                <button key={p} className={`admin-btn small ${p === page ? 'primary' : ''}`}
+                  onClick={() => setPage(p)}>{p}</button>
+              );
+            })}
+            <button className="admin-btn small" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
+          </div>
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showModal && (
+        <div className="modal-overlay" onClick={() => setShowModal(false)}>
+          <div className="modal-content" style={{ maxWidth: 800 }} onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>{editingSkill ? '编辑技能' : '创建技能'}</h3>
+              <button className="modal-close" onClick={() => setShowModal(false)}>×</button>
+            </div>
+            <div className="modal-body" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
+                <div className="form-group">
+                  <label className="form-label">技能名称 *</label>
+                  <input className="admin-form-input" value={form.skill_name}
+                    onChange={e => setForm(f => ({ ...f, skill_name: e.target.value }))}
+                    placeholder="例如: 代码审查助手" />
+                </div>
+                {!editingSkill && (
+                  <div className="form-group">
+                    <label className="form-label">所属用户 *</label>
+                    <select className="admin-form-input" value={form.user_id}
+                      onChange={e => setForm(f => ({ ...f, user_id: e.target.value }))}>
+                      {users.map(u => (
+                        <option key={u.id} value={u.id}>{u.username}</option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+                <div className="form-group">
+                  <label className="form-label">分类</label>
+                  <select className="admin-form-input" value={form.category}
+                    onChange={e => setForm(f => ({ ...f, category: e.target.value }))}>
+                    <option value="">选择分类</option>
+                    {CATEGORIES.map(c => (
+                      <option key={c.id} value={c.id}>{c.label}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+                  <label className="form-label">标签（逗号分隔）</label>
+                  <input className="admin-form-input" value={form.tags}
+                    onChange={e => setForm(f => ({ ...f, tags: e.target.value }))}
+                    placeholder="例如: 代码, 审查, 自动化" />
+                </div>
+                <div className="form-group" style={{ gridColumn: '1 / -1' }}>
+                  <label className="form-label">描述</label>
+                  <textarea className="admin-form-input" value={form.description} rows={3}
+                    onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+                    placeholder="描述技能的功能和使用场景..." />
+                </div>
+              </div>
+              <div className="form-group">
+                <label className="form-label">SKILL.md 内容（技能定义）</label>
+                <textarea
+                  className="admin-form-input"
+                  value={form.skill_md_content}
+                  onChange={e => setForm(f => ({ ...f, skill_md_content: e.target.value }))}
+                  style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 400, lineHeight: 1.6 }}
+                  placeholder="## 技能定义..."
+                />
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button className="admin-btn" onClick={() => setShowModal(false)}>取消</button>
+              <button className="admin-btn primary" onClick={handleSave}>
+                {editingSkill ? '保存更改' : '创建技能'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Version History Drawer */}
+      {showVersions && versionSkill && (
+        <div className="modal-overlay" onClick={() => setShowVersions(false)}>
+          <div className="modal-content" style={{ maxWidth: 700 }} onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>版本历史 - {versionSkill.skill_name}</h3>
+              <button className="modal-close" onClick={() => setShowVersions(false)}>×</button>
+            </div>
+            <div className="modal-body" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
+              {loadingVersions ? (
+                <div style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>加载中...</div>
+              ) : versions.length === 0 ? (
+                <div style={{ textAlign: 'center', padding: 40, color: '#6B7280' }}>暂无版本记录</div>
+              ) : (
+                <div>
+                  {versions.map((v, idx) => (
+                    <div key={v.id} style={{
+                      padding: 16, marginBottom: 12, border: `1px solid ${idx === 0 ? '#10B981' : '#E5E7EB'}`,
+                      borderRadius: 8, background: idx === 0 ? '#F0FDF4' : '#fff'
+                    }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                        <div>
+                          <span style={{ fontWeight: 600, fontSize: 15 }}>版本 {v.version}</span>
+                          {idx === 0 && <span style={{ marginLeft: 8, fontSize: 12, color: '#10B981', background: '#D1FAE5', padding: '1px 8px', borderRadius: 12 }}>当前</span>}
+                        </div>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                          <span style={{ fontSize: 12, color: '#6B7280' }}>{v.created_at?.slice(0, 16).replace('T', ' ')}</span>
+                          {idx > 0 && (
+                            <button className="admin-btn small" onClick={() => handleRollback(versionSkill, v.version)}>回滚至此</button>
+                          )}
+                        </div>
+                      </div>
+                      {v.description && <div style={{ fontSize: 13, color: '#6B7280', marginBottom: 8 }}>{v.description}</div>}
+                      {v.skill_md_content && (
+                        <details>
+                          <summary style={{ fontSize: 13, color: '#6366F1', cursor: 'pointer' }}>查看 SKILL.md 内容</summary>
+                          <pre style={{ fontSize: 12, background: '#F9FAFB', padding: 12, borderRadius: 6, marginTop: 8, maxHeight: 300, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                            {v.skill_md_content}
+                          </pre>
+                        </details>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirm */}
+      {deleteTarget && (
+        <div className="modal-overlay" onClick={() => setDeleteTarget(null)}>
+          <div className="modal-content" style={{ maxWidth: 400 }} onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3>确认删除</h3>
+            </div>
+            <div className="modal-body">
+              <p>确定要删除技能 <strong>{deleteTarget.skill_name}</strong> 吗？</p>
+              <p style={{ fontSize: 13, color: '#EF4444' }}>此操作不可恢复，相关版本历史也将被删除。</p>
+            </div>
+            <div className="modal-footer">
+              <button className="admin-btn" onClick={() => setDeleteTarget(null)}>取消</button>
+              <button className="admin-btn danger" onClick={handleDelete}>确认删除</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        .stat-card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        .stat-value { font-size: 24px; font-weight: 700; color: #1F2937; }
+        .stat-label { font-size: 13px; color: #6B7280; margin-top: 4px; }
+        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
+        .modal-content { background: #fff; border-radius: 12px; width: 90%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
+        .modal-header { padding: 20px 24px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; }
+        .modal-header h3 { margin: 0; font-size: 18px; }
+        .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6B7280; }
+        .modal-body { padding: 24px; overflow-y: auto; }
+        .modal-footer { padding: 16px 24px; border-top: 1px solid #E5E7EB; display: flex; justify-content: flex-end; gap: 12px; }
+        .form-group { margin-bottom: 16px; }
+        .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #374151; }
+      `}</style>
+    </div>
+  );
+};
+
+export default Skills;
+
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 76d9c82..aaeb29c 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -222,12 +222,17 @@ export interface ModelProvider {
   protocol: string;
   apiKey: string;
   apiBaseUrl: string;
+  // Support both snake_case and camelCase
+  api_key?: string;
+  api_base_url?: string;
   createdAt: string;
   updatedAt?: string;
 }
 
+// AIModel: supports both camelCase (TypeScript) and snake_case (from backend API)
 export interface AIModel {
   id: string;
+  // camelCase (TypeScript convention)
   providerId: string;
   providerName?: string;
   name: string;
@@ -238,8 +243,22 @@ export interface AIModel {
   status: 'free' | 'paid';
   pricePerMillionTokens: number;
   isEnabled: boolean;
+  isDefault?: boolean;
   totalCalls?: number;
   totalTokens?: number;
+  createdAt?: string;
+  updatedAt?: string;
+  // snake_case (from backend)
+  provider_id?: string;
+  provider_name?: string;
+  api_key?: string;
+  price_per_million_tokens?: number;
+  is_enabled?: boolean;
+  is_default?: boolean;
+  total_calls?: number;
+  total_tokens?: number;
+  created_at?: string;
+  updated_at?: string;
 }
 
 export interface ProtocolDef {