fix: 修复usage页面未显示缓存写入的问题

chore: 更新docker的postgres版本为18
fix: 设置默认logo作为favicon
2026-04-06 16:30:22 +08:00 · 2025-12-19 16:57:31 +08:00 · 2025-12-19 16:42:03 +08:00 · 2025-12-19 16:41:00 +08:00 · 2025-12-19 16:39:25 +08:00 · 2025-12-19 16:00:09 +08:00
21 changed files with 628 additions and 137 deletions
--- a/backend/internal/handler/admin/account_handler.go
+++ b/backend/internal/handler/admin/account_handler.go
@@ -3,6 +3,7 @@ package admin
 import (
 	"strconv"

+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/pkg/response"
 	"sub2api/internal/service"

@@ -186,6 +187,11 @@ func (h *AccountHandler) Delete(c *gin.Context) {
 	response.Success(c, gin.H{"message": "Account deleted successfully"})
 }

+// TestAccountRequest represents the request body for testing an account
+type TestAccountRequest struct {
+	ModelID string `json:"model_id"`
+}
+
 // Test handles testing account connectivity with SSE streaming
 // POST /api/v1/admin/accounts/:id/test
 func (h *AccountHandler) Test(c *gin.Context) {
@@ -195,8 +201,12 @@ func (h *AccountHandler) Test(c *gin.Context) {
 		return
 	}

+	var req TestAccountRequest
+	// Allow empty body, model_id is optional
+	_ = c.ShouldBindJSON(&req)
+
 	// Use AccountTestService to test the account with SSE streaming
-	if err := h.accountTestService.TestAccountConnection(c, accountID); err != nil {
+	if err := h.accountTestService.TestAccountConnection(c, accountID, req.ModelID); err != nil {
 		// Error already sent via SSE, just log
 		return
 	}
@@ -231,16 +241,20 @@ func (h *AccountHandler) Refresh(c *gin.Context) {
 		return
 	}

-	// Update account credentials
-	newCredentials := map[string]interface{}{
-		"access_token":  tokenInfo.AccessToken,
-		"token_type":    tokenInfo.TokenType,
-		"expires_in":    tokenInfo.ExpiresIn,
-		"expires_at":    tokenInfo.ExpiresAt,
-		"refresh_token": tokenInfo.RefreshToken,
-		"scope":         tokenInfo.Scope,
+	// Copy existing credentials to preserve non-token settings (e.g., intercept_warmup_requests)
+	newCredentials := make(map[string]interface{})
+	for k, v := range account.Credentials {
+		newCredentials[k] = v
 	}

+	// Update token-related fields
+	newCredentials["access_token"] = tokenInfo.AccessToken
+	newCredentials["token_type"] = tokenInfo.TokenType
+	newCredentials["expires_in"] = tokenInfo.ExpiresIn
+	newCredentials["expires_at"] = tokenInfo.ExpiresAt
+	newCredentials["refresh_token"] = tokenInfo.RefreshToken
+	newCredentials["scope"] = tokenInfo.Scope
+
 	updatedAccount, err := h.adminService.UpdateAccount(c.Request.Context(), accountID, &service.UpdateAccountInput{
 		Credentials: newCredentials,
 	})
@@ -535,3 +549,58 @@ func (h *AccountHandler) SetSchedulable(c *gin.Context) {

 	response.Success(c, account)
 }
+
+// GetAvailableModels handles getting available models for an account
+// GET /api/v1/admin/accounts/:id/models
+func (h *AccountHandler) GetAvailableModels(c *gin.Context) {
+	accountID, err := strconv.ParseInt(c.Param("id"), 10, 64)
+	if err != nil {
+		response.BadRequest(c, "Invalid account ID")
+		return
+	}
+
+	account, err := h.adminService.GetAccount(c.Request.Context(), accountID)
+	if err != nil {
+		response.NotFound(c, "Account not found")
+		return
+	}
+
+	// For OAuth and Setup-Token accounts: return default models
+	if account.IsOAuth() {
+		response.Success(c, claude.DefaultModels)
+		return
+	}
+
+	// For API Key accounts: return models based on model_mapping
+	mapping := account.GetModelMapping()
+	if mapping == nil || len(mapping) == 0 {
+		// No mapping configured, return default models
+		response.Success(c, claude.DefaultModels)
+		return
+	}
+
+	// Return mapped models (keys of the mapping are the available model IDs)
+	var models []claude.Model
+	for requestedModel := range mapping {
+		// Try to find display info from default models
+		var found bool
+		for _, dm := range claude.DefaultModels {
+			if dm.ID == requestedModel {
+				models = append(models, dm)
+				found = true
+				break
+			}
+		}
+		// If not found in defaults, create a basic entry
+		if !found {
+			models = append(models, claude.Model{
+				ID:          requestedModel,
+				Type:        "model",
+				DisplayName: requestedModel,
+				CreatedAt:   "",
+			})
+		}
+	}
+
+	response.Success(c, models)
+}
--- a/backend/internal/handler/gateway_handler.go
+++ b/backend/internal/handler/gateway_handler.go
@@ -7,10 +7,12 @@ import (
 	"io"
 	"log"
 	"net/http"
+	"strings"
 	"time"

 	"sub2api/internal/middleware"
 	"sub2api/internal/model"
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/service"

 	"github.com/gin-gonic/gin"
@@ -126,6 +128,16 @@ func (h *GatewayHandler) Messages(c *gin.Context) {
 		return
 	}

+	// 检查预热请求拦截（在账号选择后、转发前检查）
+	if account.IsInterceptWarmupEnabled() && isWarmupRequest(body) {
+		if req.Stream {
+			sendMockWarmupStream(c, req.Model)
+		} else {
+			sendMockWarmupResponse(c, req.Model)
+		}
+		return
+	}
+
 	// 3. 获取账号并发槽位
 	accountReleaseFunc, err := h.acquireAccountSlotWithWait(c, account, req.Stream, &streamStarted)
 	if err != nil {
@@ -285,29 +297,8 @@ func (h *GatewayHandler) waitForSlotWithPing(c *gin.Context, slotType string, id
 // Models handles listing available models
 // GET /v1/models
 func (h *GatewayHandler) Models(c *gin.Context) {
-	models := []gin.H{
-		{
-			"id":           "claude-opus-4-5-20251101",
-			"type":         "model",
-			"display_name": "Claude Opus 4.5",
-			"created_at":   "2025-11-01T00:00:00Z",
-		},
-		{
-			"id":           "claude-sonnet-4-5-20250929",
-			"type":         "model",
-			"display_name": "Claude Sonnet 4.5",
-			"created_at":   "2025-09-29T00:00:00Z",
-		},
-		{
-			"id":           "claude-haiku-4-5-20251001",
-			"type":         "model",
-			"display_name": "Claude Haiku 4.5",
-			"created_at":   "2025-10-01T00:00:00Z",
-		},
-	}
-
 	c.JSON(http.StatusOK, gin.H{
-		"data":   models,
+		"data":   claude.DefaultModels,
 		"object": "list",
 	})
 }
@@ -509,3 +500,89 @@ func (h *GatewayHandler) CountTokens(c *gin.Context) {
 		return
 	}
 }
+
+// isWarmupRequest 检测是否为预热请求（标题生成、Warmup等）
+func isWarmupRequest(body []byte) bool {
+	// 快速检查：如果body不包含关键字，直接返回false
+	bodyStr := string(body)
+	if !strings.Contains(bodyStr, "title") && !strings.Contains(bodyStr, "Warmup") {
+		return false
+	}
+
+	// 解析完整请求
+	var req struct {
+		Messages []struct {
+			Content []struct {
+				Type string `json:"type"`
+				Text string `json:"text"`
+			} `json:"content"`
+		} `json:"messages"`
+		System []struct {
+			Text string `json:"text"`
+		} `json:"system"`
+	}
+	if err := json.Unmarshal(body, &req); err != nil {
+		return false
+	}
+
+	// 检查 messages 中的标题提示模式
+	for _, msg := range req.Messages {
+		for _, content := range msg.Content {
+			if content.Type == "text" {
+				if strings.Contains(content.Text, "Please write a 5-10 word title for the following conversation:") ||
+					content.Text == "Warmup" {
+					return true
+				}
+			}
+		}
+	}
+
+	// 检查 system 中的标题提取模式
+	for _, system := range req.System {
+		if strings.Contains(system.Text, "nalyze if this message indicates a new conversation topic. If it does, extract a 2-3 word title") {
+			return true
+		}
+	}
+
+	return false
+}
+
+// sendMockWarmupStream 发送流式 mock 响应（用于预热请求拦截）
+func sendMockWarmupStream(c *gin.Context, model string) {
+	c.Header("Content-Type", "text/event-stream")
+	c.Header("Cache-Control", "no-cache")
+	c.Header("Connection", "keep-alive")
+	c.Header("X-Accel-Buffering", "no")
+
+	events := []string{
+		`event: message_start` + "\n" + `data: {"message":{"content":[],"id":"msg_mock_warmup","model":"` + model + `","role":"assistant","stop_reason":null,"stop_sequence":null,"type":"message","usage":{"input_tokens":10,"output_tokens":0}},"type":"message_start"}`,
+		`event: content_block_start` + "\n" + `data: {"content_block":{"text":"","type":"text"},"index":0,"type":"content_block_start"}`,
+		`event: content_block_delta` + "\n" + `data: {"delta":{"text":"New","type":"text_delta"},"index":0,"type":"content_block_delta"}`,
+		`event: content_block_delta` + "\n" + `data: {"delta":{"text":" Conversation","type":"text_delta"},"index":0,"type":"content_block_delta"}`,
+		`event: content_block_stop` + "\n" + `data: {"index":0,"type":"content_block_stop"}`,
+		`event: message_delta` + "\n" + `data: {"delta":{"stop_reason":"end_turn","stop_sequence":null},"type":"message_delta","usage":{"input_tokens":10,"output_tokens":2}}`,
+		`event: message_stop` + "\n" + `data: {"type":"message_stop"}`,
+	}
+
+	for _, event := range events {
+		_, _ = c.Writer.WriteString(event + "\n\n")
+		c.Writer.Flush()
+		time.Sleep(20 * time.Millisecond)
+	}
+}
+
+// sendMockWarmupResponse 发送非流式 mock 响应（用于预热请求拦截）
+func sendMockWarmupResponse(c *gin.Context, model string) {
+	c.JSON(http.StatusOK, gin.H{
+		"id":      "msg_mock_warmup",
+		"type":    "message",
+		"role":    "assistant",
+		"model":   model,
+		"content": []gin.H{{"type": "text", "text": "New Conversation"}},
+		"stop_reason": "end_turn",
+		"usage": gin.H{
+			"input_tokens":  10,
+			"output_tokens": 2,
+		},
+	})
+}
--- a/backend/internal/model/account.go
+++ b/backend/internal/model/account.go
@@ -263,3 +263,17 @@ func (a *Account) ShouldHandleErrorCode(statusCode int) bool {
 	}
 	return false
 }
+
+// IsInterceptWarmupEnabled 检查是否启用预热请求拦截
+// 启用后，标题生成、Warmup等预热请求将返回mock响应，不消耗上游token
+func (a *Account) IsInterceptWarmupEnabled() bool {
+	if a.Credentials == nil {
+		return false
+	}
+	if v, ok := a.Credentials["intercept_warmup_requests"]; ok {
+		if enabled, ok := v.(bool); ok {
+			return enabled
+		}
+	}
+	return false
+}
--- a/backend/internal/pkg/claude/constants.go
+++ b/backend/internal/pkg/claude/constants.go
@@ -0,0 +1,74 @@
+package claude
+
+// Claude Code 客户端相关常量
+
+// Beta header 常量
+const (
+	BetaOAuth                    = "oauth-2025-04-20"
+	BetaClaudeCode               = "claude-code-20250219"
+	BetaInterleavedThinking      = "interleaved-thinking-2025-05-14"
+	BetaFineGrainedToolStreaming = "fine-grained-tool-streaming-2025-05-14"
+)
+
+// DefaultBetaHeader Claude Code 客户端默认的 anthropic-beta header
+const DefaultBetaHeader = BetaClaudeCode + "," + BetaOAuth + "," + BetaInterleavedThinking + "," + BetaFineGrainedToolStreaming
+
+// HaikuBetaHeader Haiku 模型使用的 anthropic-beta header（不需要 claude-code beta）
+const HaikuBetaHeader = BetaOAuth + "," + BetaInterleavedThinking
+
+// Claude Code 客户端默认请求头
+var DefaultHeaders = map[string]string{
+	"User-Agent":                                "claude-cli/2.0.62 (external, cli)",
+	"X-Stainless-Lang":                          "js",
+	"X-Stainless-Package-Version":               "0.52.0",
+	"X-Stainless-OS":                            "Linux",
+	"X-Stainless-Arch":                          "x64",
+	"X-Stainless-Runtime":                       "node",
+	"X-Stainless-Runtime-Version":               "v22.14.0",
+	"X-Stainless-Retry-Count":                   "0",
+	"X-Stainless-Timeout":                       "60",
+	"X-App":                                     "cli",
+	"Anthropic-Dangerous-Direct-Browser-Access": "true",
+}
+
+// Model 表示一个 Claude 模型
+type Model struct {
+	ID          string `json:"id"`
+	Type        string `json:"type"`
+	DisplayName string `json:"display_name"`
+	CreatedAt   string `json:"created_at"`
+}
+
+// DefaultModels Claude Code 客户端支持的默认模型列表
+var DefaultModels = []Model{
+	{
+		ID:          "claude-opus-4-5-20251101",
+		Type:        "model",
+		DisplayName: "Claude Opus 4.5",
+		CreatedAt:   "2025-11-01T00:00:00Z",
+	},
+	{
+		ID:          "claude-sonnet-4-5-20250929",
+		Type:        "model",
+		DisplayName: "Claude Sonnet 4.5",
+		CreatedAt:   "2025-09-29T00:00:00Z",
+	},
+	{
+		ID:          "claude-haiku-4-5-20251001",
+		Type:        "model",
+		DisplayName: "Claude Haiku 4.5",
+		CreatedAt:   "2025-10-01T00:00:00Z",
+	},
+}
+
+// DefaultModelIDs 返回默认模型的 ID 列表
+func DefaultModelIDs() []string {
+	ids := make([]string, len(DefaultModels))
+	for i, m := range DefaultModels {
+		ids[i] = m.ID
+	}
+	return ids
+}
+
+// DefaultTestModel 测试时使用的默认模型
+const DefaultTestModel = "claude-sonnet-4-5-20250929"
--- a/backend/internal/server/router.go
+++ b/backend/internal/server/router.go
@@ -189,6 +189,7 @@ func registerRoutes(r *gin.Engine, h *handler.Handlers, s *service.Services, rep
 				accounts.GET("/:id/today-stats", h.Admin.Account.GetTodayStats)
 				accounts.POST("/:id/clear-rate-limit", h.Admin.Account.ClearRateLimit)
 				accounts.POST("/:id/schedulable", h.Admin.Account.SetSchedulable)
+				accounts.GET("/:id/models", h.Admin.Account.GetAvailableModels)
 				accounts.POST("/batch", h.Admin.Account.BatchCreate)

 				// OAuth routes
--- a/backend/internal/service/account_test_service.go
+++ b/backend/internal/service/account_test_service.go
@@ -15,6 +15,7 @@ import (
 	"strings"
 	"time"

+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/repository"

 	"github.com/gin-gonic/gin"
@@ -23,7 +24,6 @@ import (

 const (
 	testClaudeAPIURL = "https://api.anthropic.com/v1/messages"
-	testModel        = "claude-sonnet-4-5-20250929"
 )

 // TestEvent represents a SSE event for account testing
@@ -62,10 +62,10 @@ func generateSessionString() string {
 	return fmt.Sprintf("user_%s_account__session_%s", hex64, sessionUUID)
 }

-// createTestPayload creates a minimal test request payload for OAuth/Setup Token accounts
-func createTestPayload() map[string]interface{} {
+// createTestPayload creates a Claude Code style test request payload
+func createTestPayload(modelID string) map[string]interface{} {
 	return map[string]interface{}{
-		"model": testModel,
+		"model": modelID,
 		"messages": []map[string]interface{}{
 			{
 				"role": "user",
@@ -98,23 +98,10 @@ func createTestPayload() map[string]interface{} {
 	}
 }

-// createApiKeyTestPayload creates a simpler test request payload for API Key accounts
-func createApiKeyTestPayload(model string) map[string]interface{} {
-	return map[string]interface{}{
-		"model": model,
-		"messages": []map[string]interface{}{
-			{
-				"role":    "user",
-				"content": "hi",
-			},
-		},
-		"max_tokens": 1024,
-		"stream":     true,
-	}
-}
-
 // TestAccountConnection tests an account's connection by sending a test request
-func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int64) error {
+// All account types use full Claude Code client characteristics, only auth header differs
+// modelID is optional - if empty, defaults to claude.DefaultTestModel
+func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int64, modelID string) error {
 	ctx := c.Request.Context()

 	// Get account
@@ -123,14 +110,30 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 		return s.sendErrorAndEnd(c, "Account not found")
 	}

-	// Determine authentication method based on account type
+	// Determine the model to use
+	testModelID := modelID
+	if testModelID == "" {
+		testModelID = claude.DefaultTestModel
+	}
+
+	// For API Key accounts with model mapping, map the model
+	if account.Type == "apikey" {
+		mapping := account.GetModelMapping()
+		if mapping != nil && len(mapping) > 0 {
+			if mappedModel, exists := mapping[testModelID]; exists {
+				testModelID = mappedModel
+			}
+		}
+	}
+
+	// Determine authentication method and API URL
 	var authToken string
-	var authType string // "bearer" for OAuth, "apikey" for API Key
+	var useBearer bool
 	var apiURL string

 	if account.IsOAuth() {
-		// OAuth or Setup Token account
-		authType = "bearer"
+		// OAuth or Setup Token - use Bearer token
+		useBearer = true
 		apiURL = testClaudeAPIURL
 		authToken = account.GetCredential("access_token")
 		if authToken == "" {
@@ -141,7 +144,7 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 		needRefresh := false
 		if expiresAtStr := account.GetCredential("expires_at"); expiresAtStr != "" {
 			expiresAt, err := strconv.ParseInt(expiresAtStr, 10, 64)
-			if err == nil && time.Now().Unix()+300 > expiresAt { // 5 minute buffer
+			if err == nil && time.Now().Unix()+300 > expiresAt {
 				needRefresh = true
 			}
 		}
@@ -154,19 +157,17 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 			authToken = tokenInfo.AccessToken
 		}
 	} else if account.Type == "apikey" {
-		// API Key account
-		authType = "apikey"
+		// API Key - use x-api-key header
+		useBearer = false
 		authToken = account.GetCredential("api_key")
 		if authToken == "" {
 			return s.sendErrorAndEnd(c, "No API key available")
 		}

-		// Get base URL (use default if not set)
 		apiURL = account.GetBaseURL()
 		if apiURL == "" {
 			apiURL = "https://api.anthropic.com"
 		}
-		// Append /v1/messages endpoint
 		apiURL = strings.TrimSuffix(apiURL, "/") + "/v1/messages"
 	} else {
 		return s.sendErrorAndEnd(c, fmt.Sprintf("Unsupported account type: %s", account.Type))
@@ -179,37 +180,32 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 	c.Writer.Header().Set("X-Accel-Buffering", "no")
 	c.Writer.Flush()

-	// Create test request payload
-	var payload map[string]interface{}
-	var actualModel string
-	if authType == "apikey" {
-		// Use simpler payload for API Key (without Claude Code specific fields)
-		// Apply model mapping if configured
-		actualModel = account.GetMappedModel(testModel)
-		payload = createApiKeyTestPayload(actualModel)
-	} else {
-		actualModel = testModel
-		payload = createTestPayload()
-	}
+	// Create Claude Code style payload (same for all account types)
+	payload := createTestPayload(testModelID)
 	payloadBytes, _ := json.Marshal(payload)

-	// Send test_start event with model info
-	s.sendEvent(c, TestEvent{Type: "test_start", Model: actualModel})
+	// Send test_start event
+	s.sendEvent(c, TestEvent{Type: "test_start", Model: testModelID})

 	req, err := http.NewRequestWithContext(ctx, "POST", apiURL, bytes.NewReader(payloadBytes))
 	if err != nil {
 		return s.sendErrorAndEnd(c, "Failed to create request")
 	}

-	// Set headers based on auth type
+	// Set common headers
 	req.Header.Set("Content-Type", "application/json")
 	req.Header.Set("anthropic-version", "2023-06-01")
+	req.Header.Set("anthropic-beta", claude.DefaultBetaHeader)

-	if authType == "bearer" {
+	// Apply Claude Code client headers
+	for key, value := range claude.DefaultHeaders {
+		req.Header.Set(key, value)
+	}
+
+	// Set authentication header
+	if useBearer {
 		req.Header.Set("Authorization", "Bearer "+authToken)
-		req.Header.Set("anthropic-beta", "prompt-caching-2024-07-31,interleaved-thinking-2025-05-14,output-128k-2025-02-19")
 	} else {
-		// API Key uses x-api-key header
 		req.Header.Set("x-api-key", authToken)
 	}

@@ -252,7 +248,6 @@ func (s *AccountTestService) processStream(c *gin.Context, body io.Reader) error
 		line, err := reader.ReadString('\n')
 		if err != nil {
 			if err == io.EOF {
-				// Stream ended, send complete event
 				s.sendEvent(c, TestEvent{Type: "test_complete", Success: true})
 				return nil
 			}
--- a/backend/internal/service/gateway_service.go
+++ b/backend/internal/service/gateway_service.go
@@ -20,6 +20,7 @@ import (

 	"sub2api/internal/config"
 	"sub2api/internal/model"
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/repository"

 	"github.com/gin-gonic/gin"
@@ -602,13 +603,10 @@ func (s *GatewayService) buildUpstreamRequest(ctx context.Context, c *gin.Contex
 // getBetaHeader 处理anthropic-beta header
 // 对于OAuth账号，需要确保包含oauth-2025-04-20
 func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) string {
-	const oauthBeta = "oauth-2025-04-20"
-	const claudeCodeBeta = "claude-code-20250219"
-
 	// 如果客户端传了anthropic-beta
 	if clientBetaHeader != "" {
 		// 已包含oauth beta则直接返回
-		if strings.Contains(clientBetaHeader, oauthBeta) {
+		if strings.Contains(clientBetaHeader, claude.BetaOAuth) {
 			return clientBetaHeader
 		}

@@ -621,7 +619,7 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str
 		// 在claude-code-20250219后面插入oauth beta
 		claudeCodeIdx := -1
 		for i, p := range parts {
-			if p == claudeCodeBeta {
+			if p == claude.BetaClaudeCode {
 				claudeCodeIdx = i
 				break
 			}
@@ -631,13 +629,13 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str
 			// 在claude-code后面插入
 			newParts := make([]string, 0, len(parts)+1)
 			newParts = append(newParts, parts[:claudeCodeIdx+1]...)
-			newParts = append(newParts, oauthBeta)
+			newParts = append(newParts, claude.BetaOAuth)
 			newParts = append(newParts, parts[claudeCodeIdx+1:]...)
 			return strings.Join(newParts, ",")
 		}

 		// 没有claude-code，放在第一位
-		return oauthBeta + "," + clientBetaHeader
+		return claude.BetaOAuth + "," + clientBetaHeader
 	}

 	// 客户端没传，根据模型生成
@@ -651,10 +649,10 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str

 	// haiku模型不需要claude-code beta
 	if strings.Contains(strings.ToLower(modelID), "haiku") {
-		return "oauth-2025-04-20,interleaved-thinking-2025-05-14"
+		return claude.HaikuBetaHeader
 	}

-	return "claude-code-20250219,oauth-2025-04-20,interleaved-thinking-2025-05-14,fine-grained-tool-streaming-2025-05-14"
+	return claude.DefaultBetaHeader
 }

 func (s *GatewayService) forceRefreshToken(ctx context.Context, account *model.Account) (string, string, error) {
--- a/deploy/docker-compose.yml
+++ b/deploy/docker-compose.yml
@@ -96,7 +96,7 @@ services:
  # PostgreSQL Database
  # ===========================================================================
  postgres:
-    image: postgres:15-alpine
+    image: postgres:18-alpine
    container_name: sub2api-postgres
    restart: unless-stopped
    volumes:
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sub2API - AI API Gateway</title>
  </head>
--- a/frontend/src/api/admin/accounts.ts
+++ b/frontend/src/api/admin/accounts.ts
@@ -11,6 +11,7 @@ import type {
  PaginatedResponse,
  AccountUsageInfo,
  WindowStats,
+  ClaudeModel,
 } from '@/types';

 /**
@@ -247,6 +248,16 @@ export async function setSchedulable(id: number, schedulable: boolean): Promise<
  return data;
 }

+/**
+ * Get available models for an account
+ * @param id - Account ID
+ * @returns List of available models for this account
+ */
+export async function getAvailableModels(id: number): Promise<ClaudeModel[]> {
+  const { data } = await apiClient.get<ClaudeModel[]>(`/admin/accounts/${id}/models`);
+  return data;
+}
+
 export const accountsAPI = {
  list,
  getById,
@@ -262,6 +273,7 @@ export const accountsAPI = {
  getTodayStats,
  clearRateLimit,
  setSchedulable,
+  getAvailableModels,
  generateAuthUrl,
  exchangeCode,
  batchCreate,
--- a/frontend/src/components/account/AccountTestModal.vue
+++ b/frontend/src/components/account/AccountTestModal.vue
@@ -36,6 +36,23 @@
        </span>
      </div>

+      <!-- Model Selection -->
+      <div class="space-y-1.5">
+        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('admin.accounts.selectTestModel') }}
+        </label>
+        <select
+          v-model="selectedModelId"
+          :disabled="loadingModels || status === 'connecting'"
+          class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-dark-500 bg-white dark:bg-dark-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <option v-if="loadingModels" value="">{{ t('common.loading') }}...</option>
+          <option v-for="model in availableModels" :key="model.id" :value="model.id">
+            {{ model.display_name }} ({{ model.id }})
+          </option>
+        </select>
+      </div>
+
      <!-- Terminal Output -->
      <div class="relative group">
        <div
@@ -125,10 +142,10 @@
        </button>
        <button
          @click="startTest"
-          :disabled="status === 'connecting'"
+          :disabled="status === 'connecting' || !selectedModelId"
          :class="[
            'px-4 py-2 text-sm font-medium rounded-lg transition-all flex items-center gap-2',
-            status === 'connecting'
+            status === 'connecting' || !selectedModelId
              ? 'bg-primary-400 text-white cursor-not-allowed'
              : status === 'success'
                ? 'bg-green-500 hover:bg-green-600 text-white'
@@ -161,7 +178,8 @@
 import { ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/common/Modal.vue'
-import type { Account } from '@/types'
+import { adminAPI } from '@/api/admin'
+import type { Account, ClaudeModel } from '@/types'

 const { t } = useI18n()

@@ -184,17 +202,44 @@ const status = ref<'idle' | 'connecting' | 'success' | 'error'>('idle')
 const outputLines = ref<OutputLine[]>([])
 const streamingContent = ref('')
 const errorMessage = ref('')
+const availableModels = ref<ClaudeModel[]>([])
+const selectedModelId = ref('')
+const loadingModels = ref(false)
 let eventSource: EventSource | null = null

-// Reset state when modal opens
-watch(() => props.show, (newVal) => {
-  if (newVal) {
+// Load available models when modal opens
+watch(() => props.show, async (newVal) => {
+  if (newVal && props.account) {
    resetState()
+    await loadAvailableModels()
  } else {
    closeEventSource()
  }
 })

+const loadAvailableModels = async () => {
+  if (!props.account) return
+
+  loadingModels.value = true
+  selectedModelId.value = '' // Reset selection before loading
+  try {
+    availableModels.value = await adminAPI.accounts.getAvailableModels(props.account.id)
+    // Default to first model (usually Sonnet)
+    if (availableModels.value.length > 0) {
+      // Try to select Sonnet as default, otherwise use first model
+      const sonnetModel = availableModels.value.find(m => m.id.includes('sonnet'))
+      selectedModelId.value = sonnetModel?.id || availableModels.value[0].id
+    }
+  } catch (error) {
+    console.error('Failed to load available models:', error)
+    // Fallback to empty list
+    availableModels.value = []
+    selectedModelId.value = ''
+  } finally {
+    loadingModels.value = false
+  }
+}
+
 const resetState = () => {
  status.value = 'idle'
  outputLines.value = []
@@ -227,7 +272,7 @@ const scrollToBottom = async () => {
 }

 const startTest = async () => {
-  if (!props.account) return
+  if (!props.account || !selectedModelId.value) return

  resetState()
  status.value = 'connecting'
@@ -247,7 +292,8 @@ const startTest = async () => {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
        'Content-Type': 'application/json'
-      }
+      },
+      body: JSON.stringify({ model_id: selectedModelId.value })
    })

    if (!response.ok) {
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -418,6 +418,31 @@
        </div>
      </div>

+      <!-- Intercept Warmup Requests (all account types) -->
+      <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+          </div>
+          <button
+            type="button"
+            @click="interceptWarmupRequests = !interceptWarmupRequests"
+            :class="[
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+              interceptWarmupRequests ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+            ]"
+          >
+            <span
+              :class="[
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                interceptWarmupRequests ? 'translate-x-5' : 'translate-x-0'
+              ]"
+            />
+          </button>
+        </div>
+      </div>
+
      <div>
        <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
        <ProxySelector
@@ -590,6 +615,7 @@ const allowedModels = ref<string[]>([])
 const customErrorCodesEnabled = ref(false)
 const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
+const interceptWarmupRequests = ref(false)

 // Common models for whitelist
 const commonModels = [
@@ -758,6 +784,7 @@ const resetForm = () => {
  customErrorCodesEnabled.value = false
  selectedErrorCodes.value = []
  customErrorCodeInput.value = null
+  interceptWarmupRequests.value = false
  oauth.resetState()
  oauthFlowRef.value?.reset()
 }
@@ -801,6 +828,11 @@ const handleSubmit = async () => {
    credentials.custom_error_codes = [...selectedErrorCodes.value]
  }

+  // Add intercept warmup requests setting
+  if (interceptWarmupRequests.value) {
+    credentials.intercept_warmup_requests = true
+  }
+
  form.credentials = credentials

  submitting.value = true
@@ -847,11 +879,17 @@ const handleExchangeCode = async () => {

    const extra = oauth.buildExtraInfo(tokenInfo)

+    // Merge interceptWarmupRequests into credentials
+    const credentials = {
+      ...tokenInfo,
+      ...(interceptWarmupRequests.value ? { intercept_warmup_requests: true } : {})
+    }
+
    await adminAPI.accounts.create({
      name: form.name,
      platform: form.platform,
      type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
-      credentials: tokenInfo,
+      credentials,
      extra,
      proxy_id: form.proxy_id,
      concurrency: form.concurrency,
@@ -901,11 +939,17 @@ const handleCookieAuth = async (sessionKey: string) => {
        const extra = oauth.buildExtraInfo(tokenInfo)
        const accountName = keys.length > 1 ? `${form.name} #${i + 1}` : form.name

+        // Merge interceptWarmupRequests into credentials
+        const credentials = {
+          ...tokenInfo,
+          ...(interceptWarmupRequests.value ? { intercept_warmup_requests: true } : {})
+        }
+
        await adminAPI.accounts.create({
          name: accountName,
          platform: form.platform,
          type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
-          credentials: tokenInfo,
+          credentials,
          extra,
          proxy_id: form.proxy_id,
          concurrency: form.concurrency,
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -286,6 +286,31 @@
        </div>
      </div>

+      <!-- Intercept Warmup Requests (all account types) -->
+      <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+          </div>
+          <button
+            type="button"
+            @click="interceptWarmupRequests = !interceptWarmupRequests"
+            :class="[
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+              interceptWarmupRequests ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+            ]"
+          >
+            <span
+              :class="[
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                interceptWarmupRequests ? 'translate-x-5' : 'translate-x-0'
+              ]"
+            />
+          </button>
+        </div>
+      </div>
+
      <div>
        <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
        <ProxySelector
@@ -401,6 +426,7 @@ const allowedModels = ref<string[]>([])
 const customErrorCodesEnabled = ref(false)
 const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
+const interceptWarmupRequests = ref(false)

 // Common models for whitelist
 const commonModels = [
@@ -459,6 +485,10 @@ watch(() => props.account, (newAccount) => {
    form.status = newAccount.status as 'active' | 'inactive'
    form.group_ids = newAccount.group_ids || []

+    // Load intercept warmup requests setting (applies to all account types)
+    const credentials = newAccount.credentials as Record<string, unknown> | undefined
+    interceptWarmupRequests.value = credentials?.intercept_warmup_requests === true
+
    // Initialize API Key fields for apikey type
    if (newAccount.type === 'apikey' && newAccount.credentials) {
      const credentials = newAccount.credentials as Record<string, unknown>
@@ -630,6 +660,23 @@ const handleSubmit = async () => {
        newCredentials.custom_error_codes = [...selectedErrorCodes.value]
      }

+      // Add intercept warmup requests setting
+      if (interceptWarmupRequests.value) {
+        newCredentials.intercept_warmup_requests = true
+      }
+
+      updatePayload.credentials = newCredentials
+    } else {
+      // For oauth/setup-token types, only update intercept_warmup_requests if changed
+      const currentCredentials = props.account.credentials as Record<string, unknown> || {}
+      const newCredentials: Record<string, unknown> = { ...currentCredentials }
+
+      if (interceptWarmupRequests.value) {
+        newCredentials.intercept_warmup_requests = true
+      } else {
+        delete newCredentials.intercept_warmup_requests
+      }
+
      updatePayload.credentials = newCredentials
    }

--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -207,7 +207,7 @@ const pageDescription = computed(() => {
 });

 function toggleMobileSidebar() {
-  appStore.toggleSidebar();
+  appStore.toggleMobileSidebar();
 }

 function toggleDropdown() {
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -36,6 +36,7 @@
            class="sidebar-link mb-1"
            :class="{ 'sidebar-link-active': isActive(item.path) }"
            :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
          >
            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
            <transition name="fade">
@@ -58,6 +59,7 @@
            class="sidebar-link mb-1"
            :class="{ 'sidebar-link-active': isActive(item.path) }"
            :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
          >
            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
            <transition name="fade">
@@ -77,6 +79,7 @@
            class="sidebar-link mb-1"
            :class="{ 'sidebar-link-active': isActive(item.path) }"
            :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
          >
            <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
            <transition name="fade">
@@ -142,9 +145,9 @@ const appStore = useAppStore();
 const authStore = useAuthStore();

 const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+const mobileOpen = computed(() => appStore.mobileOpen);
 const isAdmin = computed(() => authStore.isAdmin);
 const isDark = ref(document.documentElement.classList.contains('dark'));
-const mobileOpen = ref(false);

 // Site settings
 const siteName = ref('Sub2API');
@@ -303,7 +306,15 @@ function toggleTheme() {
 }

 function closeMobile() {
-  mobileOpen.value = false;
+  appStore.setMobileOpen(false);
+}
+
+function handleMenuItemClick() {
+  if (mobileOpen.value) {
+    setTimeout(() => {
+      appStore.setMobileOpen(false);
+    }, 150);
+  }
 }

 function isActive(path: string): boolean {
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -266,6 +266,8 @@ export default {
    sync: 'Sync',
    in: 'In',
    out: 'Out',
+    cacheRead: 'Read',
+    cacheWrite: 'Write',
    rate: 'Rate',
    original: 'Original',
    billed: 'Billed',
@@ -696,6 +698,8 @@ export default {
      enterErrorCode: 'Enter error code (100-599)',
      invalidErrorCode: 'Please enter a valid HTTP error code (100-599)',
      errorCodeExists: 'This error code is already selected',
+      interceptWarmupRequests: 'Intercept Warmup Requests',
+      interceptWarmupRequestsDesc: 'When enabled, warmup requests like title generation will return mock responses without consuming upstream tokens',
      proxy: 'Proxy',
      noProxy: 'No Proxy',
      concurrency: 'Concurrency',
@@ -777,6 +781,7 @@ export default {
      copyOutput: 'Copy output',
      startingTestForAccount: 'Starting test for account: {name}',
      testAccountTypeLabel: 'Account type: {type}',
+      selectTestModel: 'Select Test Model',
      testModel: 'claude-sonnet-4-5-20250929',
      testPrompt: 'Prompt: "hi"',
    },
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -266,6 +266,8 @@ export default {
    sync: '同步',
    in: '输入',
    out: '输出',
+    cacheRead: '读取',
+    cacheWrite: '写入',
    rate: '倍率',
    original: '原始',
    billed: '计费',
@@ -786,6 +788,8 @@ export default {
      enterErrorCode: '输入错误码 (100-599)',
      invalidErrorCode: '请输入有效的 HTTP 错误码 (100-599)',
      errorCodeExists: '该错误码已被选中',
+      interceptWarmupRequests: '拦截预热请求',
+      interceptWarmupRequestsDesc: '启用后，标题生成等预热请求将返回 mock 响应，不消耗上游 token',
      proxy: '代理',
      noProxy: '无代理',
      concurrency: '并发数',
@@ -865,6 +869,7 @@ export default {
      copyOutput: '复制输出',
      startingTestForAccount: '开始测试账号：{name}',
      testAccountTypeLabel: '账号类型：{type}',
+      selectTestModel: '选择测试模型',
      testModel: 'claude-sonnet-4-5-20250929',
      testPrompt: '提示词："hi"',
    },
--- a/frontend/src/stores/app.ts
+++ b/frontend/src/stores/app.ts
@@ -12,6 +12,7 @@ export const useAppStore = defineStore('app', () => {
  // ==================== State ====================

  const sidebarCollapsed = ref<boolean>(false);
+  const mobileOpen = ref<boolean>(false);
  const loading = ref<boolean>(false);
  const toasts = ref<Toast[]>([]);

@@ -50,6 +51,21 @@ export const useAppStore = defineStore('app', () => {
    sidebarCollapsed.value = collapsed;
  }

+  /**
+   * Toggle mobile sidebar open state
+   */
+  function toggleMobileSidebar(): void {
+    mobileOpen.value = !mobileOpen.value;
+  }
+
+  /**
+   * Set mobile sidebar open state explicitly
+   * @param open - Whether mobile sidebar should be open
+   */
+  function setMobileOpen(open: boolean): void {
+    mobileOpen.value = open;
+  }
+
  /**
   * Set global loading state
   * @param isLoading - Whether app is in loading state
@@ -257,6 +273,7 @@ export const useAppStore = defineStore('app', () => {
  return {
    // State
    sidebarCollapsed,
+    mobileOpen,
    loading,
    toasts,

@@ -275,6 +292,8 @@ export const useAppStore = defineStore('app', () => {
    // Actions
    toggleSidebar,
    setSidebarCollapsed,
+    toggleMobileSidebar,
+    setMobileOpen,
    setLoading,
    showToast,
    showSuccess,
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -285,6 +285,14 @@ export type AccountType = 'oauth' | 'setup-token' | 'apikey';
 export type OAuthAddMethod = 'oauth' | 'setup-token';
 export type ProxyProtocol = 'http' | 'https' | 'socks5';

+// Claude Model type (returned by /v1/models and account models API)
+export interface ClaudeModel {
+  id: string;
+  type: string;
+  display_name: string;
+  created_at: string;
+}
+
 export interface Proxy {
  id: number;
  name: string;
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -43,13 +43,12 @@
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
-            <div>
+            <div class="min-w-0 flex-1">
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <div class="flex items-baseline gap-2">
-                <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
-                <span class="text-xs text-gray-400 dark:text-gray-500 line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}</p>
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
+              </p>
            </div>
          </div>
        </div>
@@ -195,17 +194,40 @@
          </template>

          <template #cell-tokens="{ row }">
-            <div class="text-sm">
-              <div class="flex items-center gap-1">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.in') }}</span>
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
-                <span class="text-gray-400 dark:text-gray-500">/</span>
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.out') }}</span>
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+            <div class="text-sm space-y-1.5">
+              <!-- Input / Output Tokens -->
+              <div class="flex items-center gap-2">
+                <!-- Input -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                </div>
+                <!-- Output -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                </div>
              </div>
-              <div v-if="row.cache_read_tokens > 0" class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-                <span>{{ t('dashboard.cache') }}</span>
-                <span class="font-medium">{{ row.cache_read_tokens.toLocaleString() }}</span>
+              <!-- Cache Tokens (Read + Write) -->
+              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
+                <!-- Cache Read -->
+                <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                  </svg>
+                  <span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                </div>
+                <!-- Cache Write -->
+                <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                  <span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                </div>
              </div>
            </div>
          </template>
@@ -458,6 +480,16 @@ const formatTokens = (value: number): string => {
  return value.toLocaleString()
 }

+// Compact format for cache tokens in table cells
+const formatCacheTokens = (value: number): string => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(1)}K`
+  }
+  return value.toLocaleString()
+}
+
 const formatDateTime = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleString('en-US', {
@@ -538,7 +570,7 @@ const exportToCSV = () => {
    return
  }

-  const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
+  const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
  const rows = usageLogs.value.map(log => [
    log.user?.email || '',
    log.api_key?.name || '',
@@ -547,6 +579,7 @@ const exportToCSV = () => {
    log.input_tokens,
    log.output_tokens,
    log.cache_read_tokens,
+    log.cache_creation_tokens,
    log.total_cost.toFixed(6),
    log.billing_type === 1 ? 'Subscription' : 'Balance',
    log.duration_ms,
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -43,13 +43,12 @@
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
-            <div>
+            <div class="min-w-0 flex-1">
              <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <div class="flex items-baseline gap-2">
-                <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
-                <span class="text-xs text-gray-400 dark:text-gray-500 line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}</p>
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
+              </p>
            </div>
          </div>
        </div>
@@ -138,17 +137,40 @@
          </template>

          <template #cell-tokens="{ row }">
-            <div class="text-sm">
-              <div class="flex items-center gap-1">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.in') }}</span>
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
-                <span class="text-gray-400 dark:text-gray-500">/</span>
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.out') }}</span>
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+            <div class="text-sm space-y-1.5">
+              <!-- Input / Output Tokens -->
+              <div class="flex items-center gap-2">
+                <!-- Input -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                </div>
+                <!-- Output -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                </div>
              </div>
-              <div v-if="row.cache_read_tokens > 0" class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
-                <span>{{ t('dashboard.cache') }}</span>
-                <span class="font-medium">{{ row.cache_read_tokens.toLocaleString() }}</span>
+              <!-- Cache Tokens (Read + Write) -->
+              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
+                <!-- Cache Read -->
+                <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+                  </svg>
+                  <span class="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                </div>
+                <!-- Cache Write -->
+                <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                  <span class="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                </div>
              </div>
            </div>
          </template>
@@ -332,6 +354,16 @@ const formatTokens = (value: number): string => {
  return value.toLocaleString()
 }

+// Compact format for cache tokens in table cells
+const formatCacheTokens = (value: number): string => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(1)}K`
+  }
+  return value.toLocaleString()
+}
+
 const formatDateTime = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleString('en-US', {
@@ -416,13 +448,14 @@ const exportToCSV = () => {
    return
  }

-  const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
+  const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
  const rows = usageLogs.value.map(log => [
    log.model,
    log.stream ? 'Stream' : 'Sync',
    log.input_tokens,
    log.output_tokens,
    log.cache_read_tokens,
+    log.cache_creation_tokens,
    log.total_cost.toFixed(6),
    log.billing_type === 1 ? 'Subscription' : 'Balance',
    log.first_token_ms ?? '',
Author	SHA1	Message	Date
shaw	7fd94ab78b	fix: 修复usage页面未显示缓存写入的问题	2025-12-19 16:57:31 +08:00
shaw	078529e51e	chore: 更新docker的postgres版本为18	2025-12-19 16:42:03 +08:00
shaw	23a4cf11c8	fix: 设置默认logo作为favicon	2025-12-19 16:41:00 +08:00
shaw	d1f0902ec0	feat(account): 支持账号级别拦截预热请求 - 新增 intercept_warmup_requests 配置项，存储在 credentials 字段 - 启用后，标题生成、Warmup 等预热请求返回 mock 响应，不消耗上游 token - 前端支持所有账号类型（OAuth、Setup Token、API Key）的开关配置 - 修复 OAuth 凭证刷新时丢失非 token 配置的问题	2025-12-19 16:39:25 +08:00
shaw	ee86dbca9d	feat(account): 账号测试支持选择模型 - 新增 GET /api/v1/admin/accounts/:id/models 接口获取账号可用模型 - 账号测试弹窗新增模型选择下拉框 - 测试时支持传入 model_id 参数，不传则默认使用 Sonnet - API Key 账号支持根据 model_mapping 映射测试模型 - 将模型常量提取到 claude 包统一管理	2025-12-19 16:00:09 +08:00
Wesley Liddick	733d4c2b85	Merge pull request #6 from dexcoder6/main fix(frontend): 修复移动端菜单栏和使用记录页面 UI 问题	2025-12-19 02:59:05 -05:00
dexcoder6	406d3f3cab	fix(frontend): 修复移动端菜单栏和使用记录页面 UI 问题 - 修复移动端无法打开菜单栏的问题 - 在 app.ts 中添加 mobileOpen 状态管理 - 修复 AppHeader.vue 中移动端菜单按钮调用错误的方法 - 修复 AppSidebar.vue 使用本地 ref 而非全局状态的问题 - 添加移动端菜单自动关闭功能 - 点击菜单项后自动关闭侧边栏 - 添加 150ms 延迟以显示关闭动画 - 修复使用记录页面总消费卡片溢出问题 - 调整总消费卡片布局，将删除线价格移至说明行 - 添加 min-w-0 flex-1 防止内容溢出 - 保持与其他卡片高度一致 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2025-12-19 15:55:42 +08:00
shaw	1ed93a5fd0	refactor: 提取 Claude 客户端常量到独立包 - 新增 internal/pkg/claude 包统一管理 Claude Code 相关常量 - 统一账号测试逻辑，所有账号类型使用相同的 Claude Code 风格请求 - 网关服务使用常量包替换硬编码的 beta header 字符串	2025-12-19 15:22:52 +08:00