feat: API Key管理+用量追踪完整功能链路
后端: - api_key_manager: 加密存储、脱敏显示、优先级排序、降级策略、Key可用性检测 - smart_router: 分层路由策略(FREE→LOW_COST→MID_COST→HIGH_COST)、国内引擎优先 - usage_tracker: Token消耗统计、成本计算、配额预警(ok/warning/exceeded) - API端点: /api/v1/api-keys/ (CRUD+verify), /api/v1/usage/ (summary+quota+by-engine) - 测试: 19个API测试 + 37个服务测试全部通过 前端: - settings页面API配置标签页: 按国内外分组展示9个引擎、添加/删除/验证Key - usage页面: 配额概览(环形进度)、用量趋势图(Recharts)、引擎分布饼图、明细表格 - 修复API路径与后端不一致问题 - 修复alerts API参数顺序问题
This commit is contained in:
chiguyong
parent
41c2994222
commit
290ef5a273
|
|
@ -0,0 +1,127 @@
|
|||
import logging
|
||||
|
||||
from fastapi import APIRouter, Depends, HTTPException, Query, status
|
||||
from pydantic import BaseModel
|
||||
|
||||
from app.api.deps import get_current_user
|
||||
from app.models.user import User
|
||||
from app.services.api_key_manager import APIKeyManager, KeySource, KeyStatus
|
||||
from app.services.smart_router import ENGINE_COST_PROFILES
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
_key_manager: APIKeyManager = APIKeyManager()
|
||||
|
||||
|
||||
def set_key_manager(mgr: APIKeyManager) -> None:
|
||||
global _key_manager
|
||||
_key_manager = mgr
|
||||
|
||||
|
||||
def get_key_manager() -> APIKeyManager:
|
||||
return _key_manager
|
||||
|
||||
|
||||
class AddKeyRequest(BaseModel):
|
||||
engine_type: str
|
||||
api_key: str
|
||||
source: str = "user"
|
||||
|
||||
|
||||
class VerifyKeyRequest(BaseModel):
|
||||
engine_type: str
|
||||
|
||||
|
||||
@router.post("/")
|
||||
async def add_key(
|
||||
body: AddKeyRequest,
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
source = KeySource.USER if body.source == "user" else KeySource.SYSTEM
|
||||
config = get_key_manager().add_key(
|
||||
engine_type=body.engine_type,
|
||||
api_key=body.api_key,
|
||||
source=source,
|
||||
user_id=str(current_user.id),
|
||||
)
|
||||
return {
|
||||
"engine_type": config.engine_type,
|
||||
"key_hint": config.key_hint,
|
||||
"status": KeyStatus.ACTIVE.value,
|
||||
}
|
||||
|
||||
|
||||
@router.get("/")
|
||||
async def list_keys(
|
||||
engine_type: str | None = Query(None),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
configs = get_key_manager().list_keys(engine_type=engine_type)
|
||||
items = [
|
||||
{
|
||||
"engine_type": c.engine_type,
|
||||
"key_hint": c.key_hint,
|
||||
"source": c.key_source.value,
|
||||
"status": c.status.value,
|
||||
}
|
||||
for c in configs
|
||||
]
|
||||
return {"items": items}
|
||||
|
||||
|
||||
@router.post("/verify")
|
||||
async def verify_key(
|
||||
body: VerifyKeyRequest,
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
mgr = get_key_manager()
|
||||
api_key = mgr.get_key(body.engine_type, user_id=str(current_user.id))
|
||||
if not api_key:
|
||||
api_key = mgr.get_key(body.engine_type)
|
||||
if not api_key:
|
||||
api_key = mgr.get_any_available_key(body.engine_type)
|
||||
if not api_key:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail=f"No API Key configured for {body.engine_type}",
|
||||
)
|
||||
key_status = await mgr.verify_key(body.engine_type, api_key)
|
||||
return {
|
||||
"engine_type": body.engine_type,
|
||||
"status": key_status.value,
|
||||
}
|
||||
|
||||
|
||||
@router.get("/engines")
|
||||
async def get_engines(
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
engines = [
|
||||
{
|
||||
"type": profile.engine_type,
|
||||
"cost_tier": profile.cost_tier.value,
|
||||
"has_free_tier": profile.has_free_tier,
|
||||
"requires_own_key": profile.requires_own_key,
|
||||
"input_price": profile.input_price_per_million,
|
||||
"output_price": profile.output_price_per_million,
|
||||
}
|
||||
for profile in ENGINE_COST_PROFILES.values()
|
||||
]
|
||||
return {"engines": engines}
|
||||
|
||||
|
||||
@router.delete("/{engine_type}/{key_hint}")
|
||||
async def delete_key(
|
||||
engine_type: str,
|
||||
key_hint: str,
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
deleted = get_key_manager().remove_key(engine_type, key_hint)
|
||||
if not deleted:
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_404_NOT_FOUND,
|
||||
detail="API Key not found",
|
||||
)
|
||||
return {"deleted": True}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import logging
|
||||
|
||||
from fastapi import APIRouter, Depends, Query
|
||||
|
||||
from app.api.deps import get_current_user
|
||||
from app.models.user import User
|
||||
from app.services.usage_tracker import UsageTracker
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
_usage_tracker: UsageTracker = UsageTracker()
|
||||
|
||||
|
||||
def set_usage_tracker(tracker: UsageTracker) -> None:
|
||||
global _usage_tracker
|
||||
_usage_tracker = tracker
|
||||
|
||||
|
||||
def get_usage_tracker() -> UsageTracker:
|
||||
return _usage_tracker
|
||||
|
||||
|
||||
def _user_id(current_user: User) -> str:
|
||||
return str(current_user.id)
|
||||
|
||||
|
||||
@router.get("/summary")
|
||||
async def get_usage_summary(
|
||||
period: str = Query("month", pattern=r"^(day|week|month)$"),
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
summary = get_usage_tracker().get_summary(
|
||||
user_id=_user_id(current_user),
|
||||
period=period,
|
||||
)
|
||||
return {
|
||||
"period": summary.period,
|
||||
"start_date": summary.start_date,
|
||||
"end_date": summary.end_date,
|
||||
"total_queries": summary.total_queries,
|
||||
"total_input_tokens": summary.total_input_tokens,
|
||||
"total_output_tokens": summary.total_output_tokens,
|
||||
"total_cost": summary.total_cost,
|
||||
"by_engine": summary.by_engine,
|
||||
}
|
||||
|
||||
|
||||
@router.get("/quota")
|
||||
async def get_quota(
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
return get_usage_tracker().check_quota(user_id=_user_id(current_user))
|
||||
|
||||
|
||||
@router.get("/by-engine")
|
||||
async def get_usage_by_engine(
|
||||
current_user: User = Depends(get_current_user),
|
||||
):
|
||||
summary = get_usage_tracker().get_summary(
|
||||
user_id=_user_id(current_user),
|
||||
period="month",
|
||||
)
|
||||
engines = [
|
||||
{
|
||||
"type": engine_type,
|
||||
"queries": data["queries"],
|
||||
"cost": data["cost"],
|
||||
}
|
||||
for engine_type, data in summary.by_engine.items()
|
||||
]
|
||||
return {"engines": engines}
|
||||
|
|
@ -40,6 +40,8 @@ from app.api.image import router as image_router
|
|||
from app.api.knowledge_graph import router as knowledge_graph_router
|
||||
from app.api.ai_engines import router as ai_engines_router
|
||||
from app.api.detection import router as detection_router
|
||||
from app.api.api_keys import router as api_keys_router
|
||||
from app.api.usage import router as usage_router
|
||||
from app.config import settings
|
||||
from app.database import engine, Base
|
||||
from app.schemas.common import ErrorResponse, ErrorCode
|
||||
|
|
@ -169,6 +171,8 @@ app.include_router(image_router, prefix="/api/v1")
|
|||
app.include_router(knowledge_graph_router, prefix="/api/v1/knowledge-bases")
|
||||
app.include_router(ai_engines_router, prefix="/api/v1/ai-engines", tags=["AI引擎查询"])
|
||||
app.include_router(detection_router, prefix="/api/v1/detection", tags=["定时检测任务"])
|
||||
app.include_router(api_keys_router, prefix="/api/v1/api-keys", tags=["API Key管理"])
|
||||
app.include_router(usage_router, prefix="/api/v1/usage", tags=["用量追踪"])
|
||||
|
||||
|
||||
@app.get("/health", tags=["可观测性"])
|
||||
|
|
|
|||
|
|
@ -91,6 +91,12 @@ class APIKeyManager:
|
|||
return self._decrypt(c.encrypted_key)
|
||||
return None
|
||||
|
||||
def get_any_available_key(self, engine_type: str) -> str | None:
|
||||
for c in self._keys.get(engine_type, []):
|
||||
if c.status in self._USABLE_STATUSES:
|
||||
return self._decrypt(c.encrypted_key)
|
||||
return None
|
||||
|
||||
def remove_key(self, engine_type: str, key_hint: str) -> bool:
|
||||
configs = self._keys.get(engine_type, [])
|
||||
for i, c in enumerate(configs):
|
||||
|
|
|
|||
|
|
@ -0,0 +1,418 @@
|
|||
import uuid
|
||||
|
||||
import pytest
|
||||
import pytest_asyncio
|
||||
from httpx import ASGITransport, AsyncClient
|
||||
from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
|
||||
from sqlalchemy.pool import StaticPool
|
||||
|
||||
from app.api.deps import get_current_user, get_db
|
||||
from app.database import Base
|
||||
from app.main import app
|
||||
from app.models.user import User
|
||||
from app.services.api_key_manager import APIKeyManager, KeySource
|
||||
from app.services.auth import hash_password
|
||||
from app.services.usage_tracker import UsageTracker
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def async_engine():
|
||||
engine = create_async_engine(
|
||||
"sqlite+aiosqlite:///:memory:",
|
||||
connect_args={"check_same_thread": False},
|
||||
poolclass=StaticPool,
|
||||
)
|
||||
async with engine.begin() as conn:
|
||||
await conn.run_sync(Base.metadata.create_all)
|
||||
yield engine
|
||||
await engine.dispose()
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def async_session(async_engine):
|
||||
async_session_maker = async_sessionmaker(
|
||||
async_engine,
|
||||
class_=AsyncSession,
|
||||
expire_on_commit=False,
|
||||
autoflush=False,
|
||||
autocommit=False,
|
||||
)
|
||||
async with async_session_maker() as session:
|
||||
yield session
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def test_user(async_session):
|
||||
user = User(
|
||||
id=uuid.uuid4(),
|
||||
email="test@example.com",
|
||||
password_hash=hash_password("Test@123456"),
|
||||
name="Test User",
|
||||
plan="free",
|
||||
max_queries=5,
|
||||
is_active=True,
|
||||
email_verified=True,
|
||||
)
|
||||
async_session.add(user)
|
||||
await async_session.commit()
|
||||
await async_session.refresh(user)
|
||||
return user
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
def key_manager():
|
||||
return APIKeyManager()
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
def usage_tracker(test_user):
|
||||
uid = str(test_user.id)
|
||||
tracker = UsageTracker()
|
||||
tracker.record(
|
||||
user_id=uid,
|
||||
brand_id="brand-1",
|
||||
engine_type="deepseek",
|
||||
query="test query",
|
||||
input_tokens=100,
|
||||
output_tokens=200,
|
||||
cost=0.01,
|
||||
)
|
||||
tracker.record(
|
||||
user_id=uid,
|
||||
brand_id="brand-1",
|
||||
engine_type="chatgpt",
|
||||
query="test query 2",
|
||||
input_tokens=500,
|
||||
output_tokens=1000,
|
||||
cost=0.05,
|
||||
)
|
||||
return tracker
|
||||
|
||||
|
||||
@pytest_asyncio.fixture
|
||||
async def async_client(async_session, test_user, key_manager, usage_tracker):
|
||||
async def override_get_db():
|
||||
yield async_session
|
||||
|
||||
async def override_get_current_user():
|
||||
return test_user
|
||||
|
||||
app.dependency_overrides[get_db] = override_get_db
|
||||
app.dependency_overrides[get_current_user] = override_get_current_user
|
||||
|
||||
transport = ASGITransport(app=app)
|
||||
async with AsyncClient(transport=transport, base_url="http://test") as client:
|
||||
yield client
|
||||
|
||||
app.dependency_overrides.clear()
|
||||
|
||||
|
||||
class TestAddAPIKey:
|
||||
@pytest.mark.asyncio
|
||||
async def test_add_key_success(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
|
||||
response = await async_client.post(
|
||||
"/api/v1/api-keys/",
|
||||
json={
|
||||
"engine_type": "chatgpt",
|
||||
"api_key": "sk-abcdef1234567890",
|
||||
"source": "user",
|
||||
},
|
||||
)
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["engine_type"] == "chatgpt"
|
||||
assert "key_hint" in data
|
||||
assert data["key_hint"].startswith("sk-")
|
||||
assert data["status"] == "active"
|
||||
assert "api_key" not in data
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_add_key_no_plaintext_in_response(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
|
||||
raw_key = "sk-super-secret-key-12345678"
|
||||
response = await async_client.post(
|
||||
"/api/v1/api-keys/",
|
||||
json={
|
||||
"engine_type": "deepseek",
|
||||
"api_key": raw_key,
|
||||
"source": "user",
|
||||
},
|
||||
)
|
||||
|
||||
assert response.status_code == 200
|
||||
text = response.text
|
||||
assert raw_key not in text
|
||||
|
||||
|
||||
class TestListAPIKeys:
|
||||
@pytest.mark.asyncio
|
||||
async def test_list_keys_success(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
key_manager.add_key("chatgpt", "sk-abcdef1234567890", source=KeySource.USER)
|
||||
key_manager.add_key("deepseek", "dsk-xyz9876543210", source=KeySource.ENV)
|
||||
|
||||
response = await async_client.get("/api/v1/api-keys/")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert "items" in data
|
||||
assert len(data["items"]) == 2
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_list_keys_filter_by_engine(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
key_manager.add_key("chatgpt", "sk-abcdef1234567890", source=KeySource.USER)
|
||||
key_manager.add_key("deepseek", "dsk-xyz9876543210", source=KeySource.ENV)
|
||||
|
||||
response = await async_client.get("/api/v1/api-keys/?engine_type=chatgpt")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert len(data["items"]) == 1
|
||||
assert data["items"][0]["engine_type"] == "chatgpt"
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_list_keys_masked(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
key_manager.add_key("chatgpt", "sk-abcdef1234567890", source=KeySource.USER)
|
||||
|
||||
response = await async_client.get("/api/v1/api-keys/")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
for item in data["items"]:
|
||||
assert "api_key" not in item
|
||||
assert "encrypted_key" not in item
|
||||
assert "key_hint" in item
|
||||
|
||||
|
||||
class TestDeleteAPIKey:
|
||||
@pytest.mark.asyncio
|
||||
async def test_delete_key_success(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
config = key_manager.add_key("chatgpt", "sk-abcdef1234567890", source=KeySource.USER)
|
||||
|
||||
response = await async_client.delete(
|
||||
f"/api/v1/api-keys/chatgpt/{config.key_hint}"
|
||||
)
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["deleted"] is True
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_delete_key_not_found(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
|
||||
response = await async_client.delete("/api/v1/api-keys/chatgpt/nonexistent")
|
||||
|
||||
assert response.status_code == 404
|
||||
|
||||
|
||||
class TestVerifyAPIKey:
|
||||
@pytest.mark.asyncio
|
||||
async def test_verify_key_success(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
key_manager.add_key("chatgpt", "sk-abcdef1234567890", source=KeySource.USER)
|
||||
|
||||
response = await async_client.post(
|
||||
"/api/v1/api-keys/verify",
|
||||
json={"engine_type": "chatgpt"},
|
||||
)
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["engine_type"] == "chatgpt"
|
||||
assert data["status"] == "active"
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_verify_key_no_key_configured(self, async_client, key_manager):
|
||||
from app.api.api_keys import set_key_manager
|
||||
|
||||
set_key_manager(key_manager)
|
||||
|
||||
response = await async_client.post(
|
||||
"/api/v1/api-keys/verify",
|
||||
json={"engine_type": "perplexity"},
|
||||
)
|
||||
|
||||
assert response.status_code == 404
|
||||
|
||||
|
||||
class TestGetEngines:
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_engines_success(self, async_client):
|
||||
response = await async_client.get("/api/v1/api-keys/engines")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert "engines" in data
|
||||
assert len(data["engines"]) > 0
|
||||
|
||||
engine = data["engines"][0]
|
||||
assert "type" in engine
|
||||
assert "cost_tier" in engine
|
||||
assert "has_free_tier" in engine
|
||||
assert "requires_own_key" in engine
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_engines_contains_deepseek(self, async_client):
|
||||
response = await async_client.get("/api/v1/api-keys/engines")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
types = [e["type"] for e in data["engines"]]
|
||||
assert "deepseek" in types
|
||||
|
||||
deepseek = next(e for e in data["engines"] if e["type"] == "deepseek")
|
||||
assert deepseek["cost_tier"] == "free"
|
||||
assert deepseek["has_free_tier"] is True
|
||||
assert deepseek["requires_own_key"] is False
|
||||
assert "input_price" in deepseek
|
||||
assert "output_price" in deepseek
|
||||
|
||||
|
||||
class TestUsageSummary:
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_usage_summary(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/summary?period=month")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["period"] == "month"
|
||||
assert data["total_queries"] == 2
|
||||
assert data["total_cost"] > 0
|
||||
assert "by_engine" in data
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_usage_summary_day_period(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/summary?period=day")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["period"] == "day"
|
||||
|
||||
|
||||
class TestUsageQuota:
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_quota(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/quota")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert "used" in data
|
||||
assert "limit" in data
|
||||
assert "usage_percentage" in data
|
||||
assert "status" in data
|
||||
assert data["status"] in ("ok", "warning", "exceeded")
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_quota_ok_status(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/quota")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert data["status"] == "ok"
|
||||
assert data["usage_percentage"] < 100
|
||||
|
||||
|
||||
class TestUsageByEngine:
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_usage_by_engine(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/by-engine")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
assert "engines" in data
|
||||
assert len(data["engines"]) > 0
|
||||
|
||||
engine = data["engines"][0]
|
||||
assert "type" in engine
|
||||
assert "queries" in engine
|
||||
assert "cost" in engine
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_get_usage_by_engine_contains_data(self, async_client, usage_tracker):
|
||||
from app.api.usage import set_usage_tracker
|
||||
|
||||
set_usage_tracker(usage_tracker)
|
||||
|
||||
response = await async_client.get("/api/v1/usage/by-engine")
|
||||
|
||||
assert response.status_code == 200
|
||||
data = response.json()
|
||||
types = [e["type"] for e in data["engines"]]
|
||||
assert "deepseek" in types
|
||||
assert "chatgpt" in types
|
||||
|
||||
|
||||
class TestUnauthorizedAccess:
|
||||
@pytest.mark.asyncio
|
||||
async def test_api_keys_unauthorized_returns_401(self, async_session):
|
||||
async def override_get_db():
|
||||
yield async_session
|
||||
|
||||
app.dependency_overrides[get_db] = override_get_db
|
||||
|
||||
transport = ASGITransport(app=app)
|
||||
async with AsyncClient(transport=transport, base_url="http://test") as client:
|
||||
headers = {"Authorization": "Bearer invalid_token"}
|
||||
response = await client.get("/api/v1/api-keys/", headers=headers)
|
||||
assert response.status_code == 401
|
||||
|
||||
app.dependency_overrides.clear()
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_usage_unauthorized_returns_401(self, async_session):
|
||||
async def override_get_db():
|
||||
yield async_session
|
||||
|
||||
app.dependency_overrides[get_db] = override_get_db
|
||||
|
||||
transport = ASGITransport(app=app)
|
||||
async with AsyncClient(transport=transport, base_url="http://test") as client:
|
||||
headers = {"Authorization": "Bearer invalid_token"}
|
||||
response = await client.get("/api/v1/usage/summary", headers=headers)
|
||||
assert response.status_code == 401
|
||||
|
||||
app.dependency_overrides.clear()
|
||||
|
|
@ -17,8 +17,18 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Crown, Check, X, Loader2, AlertTriangle, CheckCircle, Compass, Bell, TrendingDown, TrendingUp, Users, Globe } from "lucide-react";
|
||||
import { Crown, Check, X, Loader2, AlertTriangle, CheckCircle, Compass, Bell, TrendingDown, TrendingUp, Users, Globe, Key, Eye, EyeOff, Shield, Zap, CircleDot, Info } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { fetchWithAuth } from "@/lib/api/client";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
interface PlanFeature {
|
||||
name: string;
|
||||
|
|
@ -623,7 +633,7 @@ function AlertSettingsTab() {
|
|||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await api.alerts.getSettings(token, selectedBrandId);
|
||||
const data = await api.alerts.getSettings(selectedBrandId, token);
|
||||
setSettings((data as { items: AlertSettingItem[] }).items || []);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "加载告警设置失败");
|
||||
|
|
@ -644,7 +654,7 @@ function AlertSettingsTab() {
|
|||
enabled: s.enabled,
|
||||
threshold: s.threshold ?? undefined,
|
||||
}));
|
||||
await api.alerts.updateSettings(token, updateData);
|
||||
await api.alerts.updateSettings(updateData, token);
|
||||
setSuccess(true);
|
||||
setTimeout(() => setSuccess(false), 3000);
|
||||
} catch (err) {
|
||||
|
|
@ -860,6 +870,404 @@ function AlertSettingsTab() {
|
|||
);
|
||||
}
|
||||
|
||||
type TierType = "free" | "low" | "mid" | "high";
|
||||
type KeyStatus = "configured" | "unconfigured" | "validating" | "invalid";
|
||||
|
||||
interface EngineProfile {
|
||||
label: string;
|
||||
group: "domestic" | "international";
|
||||
tier: TierType;
|
||||
inputPrice: number;
|
||||
outputPrice: number;
|
||||
hasFreeTier: boolean;
|
||||
requiresOwnKey: boolean;
|
||||
envVar: string;
|
||||
}
|
||||
|
||||
const ENGINE_PROFILES: Record<string, EngineProfile> = {
|
||||
deepseek: { label: "DeepSeek", group: "domestic", tier: "free", inputPrice: 0.25, outputPrice: 6.0, hasFreeTier: true, requiresOwnKey: false, envVar: "DEEPSEEK_API_KEY" },
|
||||
qwen: { label: "通义千问", group: "domestic", tier: "free", inputPrice: 0.3, outputPrice: 0.6, hasFreeTier: true, requiresOwnKey: false, envVar: "DASHSCOPE_API_KEY" },
|
||||
wenxin: { label: "文心一言", group: "domestic", tier: "free", inputPrice: 0.012, outputPrice: 0.012, hasFreeTier: true, requiresOwnKey: false, envVar: "BAIDU_QIANFAN_API_KEY" },
|
||||
kimi: { label: "Kimi", group: "domestic", tier: "low", inputPrice: 12.0, outputPrice: 12.0, hasFreeTier: true, requiresOwnKey: false, envVar: "MOONSHOT_API_KEY" },
|
||||
doubao: { label: "豆包", group: "domestic", tier: "low", inputPrice: 0.5, outputPrice: 0.9, hasFreeTier: true, requiresOwnKey: false, envVar: "DOUBAO_API_KEY" },
|
||||
gemini: { label: "Google Gemini", group: "international", tier: "low", inputPrice: 0.5, outputPrice: 2.0, hasFreeTier: true, requiresOwnKey: false, envVar: "GOOGLE_API_KEY" },
|
||||
yuanbao: { label: "腾讯元宝", group: "domestic", tier: "mid", inputPrice: 0.8, outputPrice: 2.0, hasFreeTier: true, requiresOwnKey: false, envVar: "HUNYUAN_API_KEY" },
|
||||
chatgpt: { label: "ChatGPT", group: "international", tier: "high", inputPrice: 1.0, outputPrice: 4.0, hasFreeTier: false, requiresOwnKey: true, envVar: "OPENAI_API_KEY" },
|
||||
perplexity: { label: "Perplexity", group: "international", tier: "high", inputPrice: 35.0, outputPrice: 35.0, hasFreeTier: false, requiresOwnKey: true, envVar: "PERPLEXITY_API_KEY" },
|
||||
};
|
||||
|
||||
const TIER_CONFIG: Record<TierType, { label: string; className: string }> = {
|
||||
free: { label: "免费", className: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100" },
|
||||
low: { label: "低成本", className: "bg-blue-100 text-blue-700 hover:bg-blue-100" },
|
||||
mid: { label: "中成本", className: "bg-amber-100 text-amber-700 hover:bg-amber-100" },
|
||||
high: { label: "高成本", className: "bg-red-100 text-red-700 hover:bg-red-100" },
|
||||
};
|
||||
|
||||
const KEY_STATUS_CONFIG: Record<KeyStatus, { label: string; className: string; icon: React.ElementType }> = {
|
||||
configured: { label: "已配置", className: "bg-emerald-100 text-emerald-700", icon: CheckCircle },
|
||||
unconfigured: { label: "未配置", className: "bg-gray-100 text-gray-500", icon: X },
|
||||
validating: { label: "验证中", className: "bg-blue-100 text-blue-700", icon: Loader2 },
|
||||
invalid: { label: "无效", className: "bg-red-100 text-red-700", icon: AlertTriangle },
|
||||
};
|
||||
|
||||
function ApiConfigTab() {
|
||||
const { data: session } = useSession();
|
||||
const token = session?.accessToken;
|
||||
|
||||
const [keyStatuses, setKeyStatuses] = useState<Record<string, KeyStatus>>({});
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [selectedEngine, setSelectedEngine] = useState<string>("");
|
||||
const [apiKeyInput, setApiKeyInput] = useState("");
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [validating, setValidating] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadKeyStatuses();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
async function loadKeyStatuses() {
|
||||
if (!token) return;
|
||||
try {
|
||||
const data = await fetchWithAuth("/api/v1/api-keys/", {}, token) as { items: { engine_type: string; status: string; key_hint: string; source: string }[] };
|
||||
const statuses: Record<string, KeyStatus> = {};
|
||||
for (const k of data.items) {
|
||||
statuses[k.engine_type] = k.status === "active" ? "configured" : k.status === "invalid" ? "invalid" : "configured";
|
||||
}
|
||||
Object.keys(ENGINE_PROFILES).forEach((engine) => {
|
||||
if (!(engine in statuses)) {
|
||||
statuses[engine] = "unconfigured";
|
||||
}
|
||||
});
|
||||
setKeyStatuses(statuses);
|
||||
} catch {
|
||||
const statuses: Record<string, KeyStatus> = {};
|
||||
Object.keys(ENGINE_PROFILES).forEach((engine) => {
|
||||
statuses[engine] = "unconfigured";
|
||||
});
|
||||
setKeyStatuses(statuses);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddKey() {
|
||||
if (!token || !selectedEngine || !apiKeyInput.trim()) return;
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
await fetchWithAuth("/api/v1/api-keys/", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ engine_type: selectedEngine, api_key: apiKeyInput.trim(), source: "user" }),
|
||||
}, token);
|
||||
setKeyStatuses((prev) => ({ ...prev, [selectedEngine]: "configured" }));
|
||||
setSuccess(`${ENGINE_PROFILES[selectedEngine].label} API Key 已保存`);
|
||||
setDialogOpen(false);
|
||||
setSelectedEngine("");
|
||||
setApiKeyInput("");
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "保存失败");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteKey(engine: string) {
|
||||
if (!token) return;
|
||||
try {
|
||||
const listData = await fetchWithAuth("/api/v1/api-keys/", {}, token) as { items: { engine_type: string; key_hint: string; source: string; status: string }[] };
|
||||
const keyItem = listData.items.find((k) => k.engine_type === engine);
|
||||
if (!keyItem) {
|
||||
setError("未找到该引擎的API Key");
|
||||
return;
|
||||
}
|
||||
await fetchWithAuth(`/api/v1/api-keys/${engine}/${encodeURIComponent(keyItem.key_hint)}`, {
|
||||
method: "DELETE",
|
||||
}, token);
|
||||
setKeyStatuses((prev) => ({ ...prev, [engine]: "unconfigured" }));
|
||||
setSuccess(`${ENGINE_PROFILES[engine].label} API Key 已删除`);
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "删除失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleValidateKey(engine: string) {
|
||||
if (!token) return;
|
||||
setValidating(engine);
|
||||
setKeyStatuses((prev) => ({ ...prev, [engine]: "validating" }));
|
||||
try {
|
||||
const data = await fetchWithAuth("/api/v1/api-keys/verify", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ engine_type: engine }),
|
||||
}, token) as { engine_type: string; status: string };
|
||||
const isValid = data.status === "active";
|
||||
setKeyStatuses((prev) => ({ ...prev, [engine]: isValid ? "configured" : "invalid" }));
|
||||
setSuccess(isValid ? `${ENGINE_PROFILES[engine].label} API Key 验证通过` : `${ENGINE_PROFILES[engine].label} API Key 无效`);
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch {
|
||||
setKeyStatuses((prev) => ({ ...prev, [engine]: "invalid" }));
|
||||
setError("验证请求失败");
|
||||
setTimeout(() => setError(null), 3000);
|
||||
} finally {
|
||||
setValidating(null);
|
||||
}
|
||||
}
|
||||
|
||||
function openAddDialog(engine?: string) {
|
||||
setSelectedEngine(engine || "");
|
||||
setApiKeyInput("");
|
||||
setShowKey(false);
|
||||
setError(null);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
const domesticEngines = Object.entries(ENGINE_PROFILES).filter(([, p]) => p.group === "domestic");
|
||||
const internationalEngines = Object.entries(ENGINE_PROFILES).filter(([, p]) => p.group === "international");
|
||||
|
||||
function renderEngineCard(engineKey: string, profile: EngineProfile) {
|
||||
const status = keyStatuses[engineKey] || "unconfigured";
|
||||
const statusConfig = KEY_STATUS_CONFIG[status];
|
||||
const tierConfig = TIER_CONFIG[profile.tier];
|
||||
const StatusIcon = statusConfig.icon;
|
||||
const isValidating = validating === engineKey;
|
||||
|
||||
return (
|
||||
<div key={engineKey} className="flex flex-col gap-3 rounded-lg border p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-muted">
|
||||
<Key className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm">{profile.label}</span>
|
||||
<Badge className={tierConfig.className}>{tierConfig.label}</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
输入 ¥{profile.inputPrice}/百万Token · 输出 ¥{profile.outputPrice}/百万Token
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={statusConfig.className}>
|
||||
<StatusIcon className={`mr-1 h-3 w-3 ${isValidating ? "animate-spin" : ""}`} />
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
{profile.hasFreeTier && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Zap className="h-3 w-3 text-emerald-500" />
|
||||
含免费额度
|
||||
</span>
|
||||
)}
|
||||
{profile.requiresOwnKey && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Shield className="h-3 w-3 text-amber-500" />
|
||||
需自带Key
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<CircleDot className="h-3 w-3" />
|
||||
{profile.envVar}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-auto">
|
||||
{status === "unconfigured" ? (
|
||||
<Button size="sm" onClick={() => openAddDialog(engineKey)}>
|
||||
<Key className="mr-1 h-3 w-3" />
|
||||
添加Key
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleValidateKey(engineKey)}
|
||||
disabled={isValidating}
|
||||
>
|
||||
{isValidating ? (
|
||||
<Loader2 className="mr-1 h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<Shield className="mr-1 h-3 w-3" />
|
||||
)}
|
||||
验证
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => handleDeleteKey(engineKey)}
|
||||
disabled={isValidating}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="flex items-center gap-2 rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
|
||||
<CheckCircle className="h-4 w-4 shrink-0" />
|
||||
<span>{success}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Key className="h-5 w-5 text-blue-600" />
|
||||
国内引擎
|
||||
</CardTitle>
|
||||
<CardDescription className="mt-1">国内AI引擎API密钥配置</CardDescription>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => openAddDialog()}>
|
||||
<Key className="mr-1 h-3 w-3" />
|
||||
添加Key
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{domesticEngines.map(([key, profile]) => renderEngineCard(key, profile))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Globe className="h-5 w-5 text-purple-600" />
|
||||
国际引擎
|
||||
</CardTitle>
|
||||
<CardDescription>国际AI引擎API密钥配置（需科学上网环境）</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{internationalEngines.map(([key, profile]) => renderEngineCard(key, profile))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Info className="h-5 w-5 text-muted-foreground" />
|
||||
成本说明
|
||||
</CardTitle>
|
||||
<CardDescription>各引擎价格层级和免费额度信息</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{(["free", "low", "mid", "high"] as TierType[]).map((tier) => (
|
||||
<div key={tier} className="rounded-lg border p-3">
|
||||
<Badge className={TIER_CONFIG[tier].className}>{TIER_CONFIG[tier].label}</Badge>
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
{tier === "free" && "输入/输出价格极低，含免费额度"}
|
||||
{tier === "low" && "输入/输出价格较低，部分含免费额度"}
|
||||
{tier === "mid" && "中等价格，适合高频调用场景"}
|
||||
{tier === "high" && "价格较高，需自带API Key"}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
价格单位：元/百万Token。实际费用以各引擎官方定价为准。标注"需自带Key"的引擎不提供平台共享Key，需配置您自己的API密钥。
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>添加API Key</DialogTitle>
|
||||
<DialogDescription>为指定AI引擎配置API密钥</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>选择引擎</Label>
|
||||
<Select value={selectedEngine} onValueChange={setSelectedEngine}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择引擎" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>国内引擎</SelectLabel>
|
||||
{domesticEngines.map(([key, profile]) => (
|
||||
<SelectItem key={key} value={key}>{profile.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>国际引擎</SelectLabel>
|
||||
{internationalEngines.map(([key, profile]) => (
|
||||
<SelectItem key={key} value={key}>{profile.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>API Key</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showKey ? "text" : "password"}
|
||||
placeholder="请输入API Key"
|
||||
value={apiKeyInput}
|
||||
onChange={(e) => setApiKeyInput(e.target.value)}
|
||||
className="pr-10"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3"
|
||||
onClick={() => setShowKey(!showKey)}
|
||||
>
|
||||
{showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
{selectedEngine && ENGINE_PROFILES[selectedEngine] && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
环境变量名: {ENGINE_PROFILES[selectedEngine].envVar}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAddKey} disabled={saving || !selectedEngine || !apiKeyInput.trim()}>
|
||||
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
保存
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
|
|
@ -873,6 +1281,7 @@ export default function SettingsPage() {
|
|||
<TabsTrigger value="profile">个人资料</TabsTrigger>
|
||||
<TabsTrigger value="password">密码修改</TabsTrigger>
|
||||
<TabsTrigger value="subscription">订阅管理</TabsTrigger>
|
||||
<TabsTrigger value="api">API配置</TabsTrigger>
|
||||
<TabsTrigger value="alerts">告警设置</TabsTrigger>
|
||||
<TabsTrigger value="onboarding">引导</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -901,6 +1310,9 @@ export default function SettingsPage() {
|
|||
<TabsContent value="subscription" className="mt-4">
|
||||
<SubscriptionTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="api" className="mt-4">
|
||||
<ApiConfigTab />
|
||||
</TabsContent>
|
||||
<TabsContent value="alerts" className="mt-4">
|
||||
<AlertSettingsTab />
|
||||
</TabsContent>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,396 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
import { useApi } from "@/lib/hooks/use-api";
|
||||
|
||||
type TimeRange = "7d" | "30d" | "month";
|
||||
|
||||
const TIME_RANGE_LABELS: Record<TimeRange, string> = {
|
||||
"7d": "最近7天",
|
||||
"30d": "最近30天",
|
||||
month: "本月",
|
||||
};
|
||||
|
||||
const PIE_COLORS = [
|
||||
"#3b82f6",
|
||||
"#8b5cf6",
|
||||
"#ec4899",
|
||||
"#f59e0b",
|
||||
"#10b981",
|
||||
"#6366f1",
|
||||
"#ef4444",
|
||||
"#14b8a6",
|
||||
"#f97316",
|
||||
];
|
||||
|
||||
interface QuotaData {
|
||||
used: number;
|
||||
limit: number;
|
||||
percentage: number;
|
||||
status: "normal" | "warning" | "exceeded";
|
||||
}
|
||||
|
||||
interface TrendItem {
|
||||
date: string;
|
||||
cost: number;
|
||||
}
|
||||
|
||||
interface EngineUsageItem {
|
||||
engine: string;
|
||||
label: string;
|
||||
queries: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cost: number;
|
||||
}
|
||||
|
||||
interface UsageData {
|
||||
quota: QuotaData;
|
||||
trends: TrendItem[];
|
||||
engineDistribution: { engine: string; label: string; cost: number }[];
|
||||
engineUsage: EngineUsageItem[];
|
||||
}
|
||||
|
||||
const MOCK_USAGE_DATA: UsageData = {
|
||||
quota: { used: 45.6, limit: 100, percentage: 45.6, status: "normal" },
|
||||
trends: [
|
||||
{ date: "05-19", cost: 5.2 },
|
||||
{ date: "05-20", cost: 6.8 },
|
||||
{ date: "05-21", cost: 4.5 },
|
||||
{ date: "05-22", cost: 7.3 },
|
||||
{ date: "05-23", cost: 8.1 },
|
||||
{ date: "05-24", cost: 6.9 },
|
||||
{ date: "05-25", cost: 7.0 },
|
||||
],
|
||||
engineDistribution: [
|
||||
{ engine: "deepseek", label: "DeepSeek", cost: 15.2 },
|
||||
{ engine: "chatgpt", label: "ChatGPT", cost: 12.8 },
|
||||
{ engine: "qwen", label: "通义千问", cost: 8.5 },
|
||||
{ engine: "gemini", label: "Google Gemini", cost: 5.3 },
|
||||
{ engine: "kimi", label: "Kimi", cost: 3.8 },
|
||||
],
|
||||
engineUsage: [
|
||||
{ engine: "deepseek", label: "DeepSeek", queries: 1250, inputTokens: 3200000, outputTokens: 1800000, cost: 15.2 },
|
||||
{ engine: "chatgpt", label: "ChatGPT", queries: 890, inputTokens: 2100000, outputTokens: 1500000, cost: 12.8 },
|
||||
{ engine: "qwen", label: "通义千问", queries: 720, inputTokens: 1800000, outputTokens: 900000, cost: 8.5 },
|
||||
{ engine: "gemini", label: "Google Gemini", queries: 450, inputTokens: 1100000, outputTokens: 600000, cost: 5.3 },
|
||||
{ engine: "kimi", label: "Kimi", queries: 320, inputTokens: 800000, outputTokens: 400000, cost: 3.8 },
|
||||
{ engine: "wenxin", label: "文心一言", queries: 280, inputTokens: 700000, outputTokens: 350000, cost: 0.02 },
|
||||
{ engine: "doubao", label: "豆包", queries: 210, inputTokens: 520000, outputTokens: 280000, cost: 0.5 },
|
||||
{ engine: "yuanbao", label: "腾讯元宝", queries: 150, inputTokens: 380000, outputTokens: 200000, cost: 0.7 },
|
||||
{ engine: "perplexity", label: "Perplexity", queries: 30, inputTokens: 75000, outputTokens: 40000, cost: 2.6 },
|
||||
],
|
||||
};
|
||||
|
||||
function formatTokenCount(count: number): string {
|
||||
if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
|
||||
if (count >= 1000) return `${(count / 1000).toFixed(0)}K`;
|
||||
return String(count);
|
||||
}
|
||||
|
||||
function formatCurrency(value: number): string {
|
||||
return `¥${value.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function CircularProgress({ percentage, size = 120, strokeWidth = 10 }: { percentage: number; size?: number; strokeWidth?: number }) {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (percentage / 100) * circumference;
|
||||
|
||||
const color =
|
||||
percentage >= 90 ? "#ef4444" : percentage >= 70 ? "#f59e0b" : "#10b981";
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex items-center justify-center">
|
||||
<svg width={size} height={size} className="-rotate-90">
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={strokeWidth}
|
||||
className="text-muted/30"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
strokeLinecap="round"
|
||||
className="transition-all duration-500"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute flex flex-col items-center">
|
||||
<span className="text-2xl font-bold" style={{ color }}>
|
||||
{percentage.toFixed(1)}%
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">已使用</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function QuotaStatusBadge({ status }: { status: "normal" | "warning" | "exceeded" }) {
|
||||
const config = {
|
||||
normal: { label: "正常", className: "bg-emerald-100 text-emerald-700 hover:bg-emerald-100", icon: CheckCircle },
|
||||
warning: { label: "预警", className: "bg-amber-100 text-amber-700 hover:bg-amber-100", icon: AlertTriangle },
|
||||
exceeded: { label: "超限", className: "bg-red-100 text-red-700 hover:bg-red-100", icon: AlertTriangle },
|
||||
};
|
||||
const c = config[status];
|
||||
const Icon = c.icon;
|
||||
return (
|
||||
<Badge className={c.className}>
|
||||
<Icon className="mr-1 h-3 w-3" />
|
||||
{c.label}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
export default function UsagePage() {
|
||||
const [timeRange, setTimeRange] = useState<TimeRange>("7d");
|
||||
|
||||
const { data: usageData, isLoading, refresh } = useApi<UsageData>(
|
||||
`/api/v1/usage/summary?period=${timeRange === "7d" ? "week" : timeRange === "30d" ? "month" : "month"}`
|
||||
);
|
||||
|
||||
const data = usageData || MOCK_USAGE_DATA;
|
||||
|
||||
const totalCost = useMemo(() => {
|
||||
return data.engineUsage.reduce((sum, item) => sum + item.cost, 0);
|
||||
}, [data.engineUsage]);
|
||||
|
||||
const totalQueries = useMemo(() => {
|
||||
return data.engineUsage.reduce((sum, item) => sum + item.queries, 0);
|
||||
}, [data.engineUsage]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">用量统计</h1>
|
||||
<p className="text-muted-foreground">监控AI引擎调用成本和配额使用情况</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(["7d", "30d", "month"] as TimeRange[]).map((range) => (
|
||||
<Button
|
||||
key={range}
|
||||
variant={timeRange === range ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setTimeRange(range)}
|
||||
>
|
||||
{TIME_RANGE_LABELS[range]}
|
||||
</Button>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={refresh} disabled={isLoading}>
|
||||
<RefreshCw className={`mr-1 h-3 w-3 ${isLoading ? "animate-spin" : ""}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
<p className="mt-4 text-sm text-muted-foreground">正在加载用量数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-blue-100 p-2">
|
||||
<DollarSign className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">本月已用金额</p>
|
||||
<p className="text-2xl font-bold">{formatCurrency(data.quota.used)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-purple-100 p-2">
|
||||
<TrendingUp className="h-5 w-5 text-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">配额上限</p>
|
||||
<p className="text-2xl font-bold">{formatCurrency(data.quota.limit)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-lg bg-emerald-100 p-2">
|
||||
<CheckCircle className="h-5 w-5 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">配额状态</p>
|
||||
<QuotaStatusBadge status={data.quota.status} />
|
||||
</div>
|
||||
</div>
|
||||
<CircularProgress percentage={data.quota.percentage} size={80} strokeWidth={8} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">用量趋势</CardTitle>
|
||||
<CardDescription>每日成本变化趋势</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={data.trends}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-muted-foreground"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 12 }}
|
||||
className="text-muted-foreground"
|
||||
tickFormatter={(v) => `¥${v}`}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => [formatCurrency(value), "成本"]}
|
||||
labelFormatter={(label) => `日期: ${label}`}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="cost"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth={2}
|
||||
dot={{ r: 4, fill: "#3b82f6" }}
|
||||
activeDot={{ r: 6 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">引擎用量分布</CardTitle>
|
||||
<CardDescription>各引擎成本占比</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data.engineDistribution}
|
||||
cx="50%"
|
||||
cy="45%"
|
||||
innerRadius={50}
|
||||
outerRadius={80}
|
||||
paddingAngle={2}
|
||||
dataKey="cost"
|
||||
nameKey="label"
|
||||
>
|
||||
{data.engineDistribution.map((_, index) => (
|
||||
<Cell key={`cell-${index}`} fill={PIE_COLORS[index % PIE_COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value: number) => [formatCurrency(value), "成本"]}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="bottom"
|
||||
iconType="circle"
|
||||
iconSize={8}
|
||||
formatter={(value: string) => (
|
||||
<span className="text-xs">{value}</span>
|
||||
)}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">引擎用量明细</CardTitle>
|
||||
<CardDescription>
|
||||
共 {totalQueries} 次查询，总成本 {formatCurrency(totalCost)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>引擎名称</TableHead>
|
||||
<TableHead className="text-right">查询次数</TableHead>
|
||||
<TableHead className="text-right">输入Token</TableHead>
|
||||
<TableHead className="text-right">输出Token</TableHead>
|
||||
<TableHead className="text-right">成本</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.engineUsage.map((item) => (
|
||||
<TableRow key={item.engine}>
|
||||
<TableCell className="font-medium">{item.label}</TableCell>
|
||||
<TableCell className="text-right">{item.queries.toLocaleString()}</TableCell>
|
||||
<TableCell className="text-right">{formatTokenCount(item.inputTokens)}</TableCell>
|
||||
<TableCell className="text-right">{formatTokenCount(item.outputTokens)}</TableCell>
|
||||
<TableCell className="text-right font-medium">{formatCurrency(item.cost)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue