Merge PR #62 : refactor(frontend): 前端界面优化与订阅状态管理增强

Merge branch 'main' into feature/ui-improvements-clean
fix(frontend): 移除DataTable中未使用的函数和变量
2026-04-10 10:04:46 +08:00 · 2025-12-28 16:26:13 +08:00 · 2025-12-28 03:22:11 -05:00 · 2025-12-28 14:53:36 +08:00 · 2025-12-28 14:53:36 +08:00 · 2025-12-28 14:53:36 +08:00
112 changed files with 5250 additions and 1578 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -143,3 +143,61 @@ jobs:
          repository: ${{ secrets.DOCKERHUB_USERNAME }}/sub2api
          short-description: "Sub2API - AI API Gateway Platform"
          readme-filepath: ./deploy/DOCKER.md
+
+      # Send Telegram notification
+      - name: Send Telegram Notification
+        env:
+          TELEGRAM_BOT_TOKEN: ${{ secrets.TELEGRAM_BOT_TOKEN }}
+          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
+        continue-on-error: true
+        run: |
+          # 检查必要的环境变量
+          if [ -z "$TELEGRAM_BOT_TOKEN" ] || [ -z "$TELEGRAM_CHAT_ID" ]; then
+            echo "Telegram credentials not configured, skipping notification"
+            exit 0
+          fi
+
+          TAG_NAME=${GITHUB_REF#refs/tags/}
+          VERSION=${TAG_NAME#v}
+          REPO="${{ github.repository }}"
+          DOCKER_IMAGE="${{ secrets.DOCKERHUB_USERNAME }}/sub2api"
+
+          # 获取 tag message 内容
+          TAG_MESSAGE='${{ steps.tag_message.outputs.message }}'
+
+          # 限制消息长度（Telegram 消息限制 4096 字符，预留空间给头尾固定内容）
+          if [ ${#TAG_MESSAGE} -gt 3500 ]; then
+            TAG_MESSAGE="${TAG_MESSAGE:0:3500}..."
+          fi
+
+          # 构建消息内容
+          MESSAGE="🚀 *Sub2API 新版本发布！*"$'\n'$'\n'
+          MESSAGE+="📦 版本号: \`${VERSION}\`"$'\n'$'\n'
+
+          # 添加更新内容
+          if [ -n "$TAG_MESSAGE" ]; then
+            MESSAGE+="${TAG_MESSAGE}"$'\n'$'\n'
+          fi
+
+          MESSAGE+="🐳 *Docker 部署:*"$'\n'
+          MESSAGE+="\`\`\`bash"$'\n'
+          MESSAGE+="docker pull ${DOCKER_IMAGE}:${TAG_NAME}"$'\n'
+          MESSAGE+="docker pull ${DOCKER_IMAGE}:latest"$'\n'
+          MESSAGE+="\`\`\`"$'\n'$'\n'
+          MESSAGE+="🔗 *相关链接:*"$'\n'
+          MESSAGE+="• [GitHub Release](https://github.com/${REPO}/releases/tag/${TAG_NAME})"$'\n'
+          MESSAGE+="• [Docker Hub](https://hub.docker.com/r/${DOCKER_IMAGE})"$'\n'$'\n'
+          MESSAGE+="#Sub2API #Release #${TAG_NAME//./_}"
+
+          # 发送消息
+          curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage" \
+            -H "Content-Type: application/json" \
+            -d "$(jq -n \
+              --arg chat_id "${TELEGRAM_CHAT_ID}" \
+              --arg text "${MESSAGE}" \
+              '{
+                chat_id: $chat_id,
+                text: $text,
+                parse_mode: "Markdown",
+                disable_web_page_preview: true
+              }')"
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,7 @@ frontend/node_modules/
 frontend/dist/
 *.local
 *.tsbuildinfo
+vite.config.d.ts

 # 日志
 npm-debug.log*
--- a/4
+++ b/4
@@ -9,7 +9,7 @@
 # -----------------------------------------------------------------------------
 # Stage 1: Frontend Builder
 # -----------------------------------------------------------------------------
-FROM node:20-alpine AS frontend-builder
+FROM node:24-alpine AS frontend-builder

 WORKDIR /app/frontend

@@ -24,7 +24,7 @@ RUN npm run build
 # -----------------------------------------------------------------------------
 # Stage 2: Backend Builder
 # -----------------------------------------------------------------------------
-FROM golang:1.24-alpine AS backend-builder
+FROM golang:1.25-alpine AS backend-builder

 # Build arguments for version info (set by CI)
 ARG VERSION=docker
--- a/backend/cmd/server/wire_gen.go
+++ b/backend/cmd/server/wire_gen.go
@@ -117,10 +117,12 @@ func initializeApplication(buildInfo handler.BuildInfo) (*Application, error) {
 	billingService := service.NewBillingService(configConfig, pricingService)
 	identityCache := repository.NewIdentityCache(client)
 	identityService := service.NewIdentityService(identityCache)
-	gatewayService := service.NewGatewayService(accountRepository, usageLogRepository, userRepository, userSubscriptionRepository, gatewayCache, configConfig, billingService, rateLimitService, billingCacheService, identityService, httpUpstream)
+	timingWheelService := service.ProvideTimingWheelService()
+	deferredService := service.ProvideDeferredService(accountRepository, timingWheelService)
+	gatewayService := service.NewGatewayService(accountRepository, usageLogRepository, userRepository, userSubscriptionRepository, gatewayCache, configConfig, billingService, rateLimitService, billingCacheService, identityService, httpUpstream, deferredService)
 	geminiMessagesCompatService := service.NewGeminiMessagesCompatService(accountRepository, gatewayCache, geminiTokenProvider, rateLimitService, httpUpstream)
 	gatewayHandler := handler.NewGatewayHandler(gatewayService, geminiMessagesCompatService, userService, concurrencyService, billingCacheService)
-	openAIGatewayService := service.NewOpenAIGatewayService(accountRepository, usageLogRepository, userRepository, userSubscriptionRepository, gatewayCache, configConfig, billingService, rateLimitService, billingCacheService, httpUpstream)
+	openAIGatewayService := service.NewOpenAIGatewayService(accountRepository, usageLogRepository, userRepository, userSubscriptionRepository, gatewayCache, configConfig, billingService, rateLimitService, billingCacheService, httpUpstream, deferredService)
 	openAIGatewayHandler := handler.NewOpenAIGatewayHandler(openAIGatewayService, concurrencyService, billingCacheService)
 	handlerSettingHandler := handler.ProvideSettingHandler(settingService, buildInfo)
 	handlers := handler.ProvideHandlers(authHandler, userHandler, apiKeyHandler, usageHandler, redeemHandler, subscriptionHandler, adminHandlers, gatewayHandler, openAIGatewayHandler, handlerSettingHandler)
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -11,13 +11,14 @@ require (
 	github.com/google/wire v0.7.0
 	github.com/imroc/req/v3 v3.56.0
 	github.com/lib/pq v1.10.9
-	github.com/redis/go-redis/v9 v9.7.3
+	github.com/redis/go-redis/v9 v9.17.2
 	github.com/spf13/viper v1.18.2
 	github.com/stretchr/testify v1.11.1
 	github.com/testcontainers/testcontainers-go/modules/postgres v0.40.0
 	github.com/testcontainers/testcontainers-go/modules/redis v0.40.0
 	github.com/tidwall/gjson v1.18.0
 	github.com/tidwall/sjson v1.2.5
+	github.com/zeromicro/go-zero v1.9.4
 	golang.org/x/crypto v0.44.0
 	golang.org/x/net v0.47.0
 	golang.org/x/term v0.37.0
@@ -49,6 +50,7 @@ require (
 	github.com/docker/go-connections v0.6.0 // indirect
 	github.com/docker/go-units v0.5.0 // indirect
 	github.com/ebitengine/purego v0.8.4 // indirect
+	github.com/fatih/color v1.18.0 // indirect
 	github.com/felixge/httpsnoop v1.0.4 // indirect
 	github.com/fsnotify/fsnotify v1.7.0 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.2 // indirect
@@ -59,7 +61,7 @@ require (
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.14.0 // indirect
-	github.com/go-sql-driver/mysql v1.8.1 // indirect
+	github.com/go-sql-driver/mysql v1.9.0 // indirect
 	github.com/goccy/go-json v0.10.2 // indirect
 	github.com/google/go-querystring v1.1.0 // indirect
 	github.com/google/subcommands v1.2.0 // indirect
@@ -67,9 +69,9 @@ require (
 	github.com/hashicorp/hcl v1.0.0 // indirect
 	github.com/icholy/digest v1.1.0 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
-	github.com/jackc/pgservicefile v0.0.0-20231201235250-de7065d80cb9 // indirect
-	github.com/jackc/pgx/v5 v5.5.5 // indirect
-	github.com/jackc/puddle/v2 v2.2.1 // indirect
+	github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect
+	github.com/jackc/pgx/v5 v5.7.4 // indirect
+	github.com/jackc/puddle/v2 v2.2.2 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -78,7 +80,8 @@ require (
 	github.com/leodido/go-urn v1.2.4 // indirect
 	github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 // indirect
 	github.com/magiconair/properties v1.8.10 // indirect
-	github.com/mattn/go-isatty v0.0.19 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mdelapenya/tlscert v0.2.0 // indirect
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/moby/docker-image-spec v1.3.1 // indirect
@@ -93,7 +96,7 @@ require (
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.1.1 // indirect
-	github.com/pelletier/go-toml/v2 v2.1.0 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect
 	github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c // indirect
@@ -105,6 +108,7 @@ require (
 	github.com/shirou/gopsutil/v4 v4.25.6 // indirect
 	github.com/sirupsen/logrus v1.9.3 // indirect
 	github.com/sourcegraph/conc v0.3.0 // indirect
+	github.com/spaolacci/murmur3 v1.1.0 // indirect
 	github.com/spf13/afero v1.11.0 // indirect
 	github.com/spf13/cast v1.6.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
@@ -123,7 +127,8 @@ require (
 	go.opentelemetry.io/otel/metric v1.37.0 // indirect
 	go.opentelemetry.io/otel/sdk v1.37.0 // indirect
 	go.opentelemetry.io/otel/trace v1.37.0 // indirect
-	go.uber.org/atomic v1.9.0 // indirect
+	go.uber.org/atomic v1.10.0 // indirect
+	go.uber.org/automaxprocs v1.6.0 // indirect
 	go.uber.org/multierr v1.9.0 // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -52,6 +52,8 @@ github.com/docker/go-units v0.5.0 h1:69rxXcBk27SvSaaxTtLh/8llcHD8vYHT7WSdRZ/jvr4
 github.com/docker/go-units v0.5.0/go.mod h1:fgPhTUdO+D/Jk86RDLlptpiXQzgHJF7gydDDbaIK4Dk=
 github.com/ebitengine/purego v0.8.4 h1:CF7LEKg5FFOsASUj0+QwaXf8Ht6TlFxg09+S9wz0omw=
 github.com/ebitengine/purego v0.8.4/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ=
+github.com/fatih/color v1.18.0 h1:S8gINlzdQ840/4pfAwic/ZE0djQEH3wM94VfqLTZcOM=
+github.com/fatih/color v1.18.0/go.mod h1:4FelSpRwEGDpQ12mAdzqdOukCy4u8WUtOY6lkT/6HfU=
 github.com/felixge/httpsnoop v1.0.4 h1:NFTV2Zj1bL4mc9sqWACXbQFVBBg2W3GPvqp8/ESS2Wg=
 github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
 github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHkI4W8=
@@ -80,8 +82,8 @@ github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91
 github.com/go-playground/validator/v10 v10.14.0 h1:vgvQWe3XCz3gIeFDm/HnTIbj6UGmg/+t63MyGU2n5js=
 github.com/go-playground/validator/v10 v10.14.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU=
 github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
-github.com/go-sql-driver/mysql v1.8.1 h1:LedoTUt/eveggdHS9qUFC1EFSa8bU2+1pZjSRpvNJ1Y=
-github.com/go-sql-driver/mysql v1.8.1/go.mod h1:wEBSXgmK//2ZFJyE+qWnIsVGmvmEKlqwuVSjsCm7DZg=
+github.com/go-sql-driver/mysql v1.9.0 h1:Y0zIbQXhQKmQgTp44Y1dp3wTXcn804QoTptLZT1vtvo=
+github.com/go-sql-driver/mysql v1.9.0/go.mod h1:pDetrLJeA3oMujJuvXc8RJoasr589B6A9fwzD3QMrqw=
 github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
 github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
 github.com/golang-jwt/jwt/v5 v5.2.0 h1:d/ix8ftRUorsN+5eMIlF4T6J8CAt9rch3My2winC1Jw=
@@ -113,12 +115,12 @@ github.com/imroc/req/v3 v3.56.0 h1:t6YdqqerYBXhZ9+VjqsQs5wlKxdUNEvsgBhxWc1AEEo=
 github.com/imroc/req/v3 v3.56.0/go.mod h1:cUZSooE8hhzFNOrAbdxuemXDQxFXLQTnu3066jr7ZGk=
 github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
 github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
-github.com/jackc/pgservicefile v0.0.0-20231201235250-de7065d80cb9 h1:L0QtFUgDarD7Fpv9jeVMgy/+Ec0mtnmYuImjTz6dtDA=
-github.com/jackc/pgservicefile v0.0.0-20231201235250-de7065d80cb9/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
-github.com/jackc/pgx/v5 v5.5.5 h1:amBjrZVmksIdNjxGW/IiIMzxMKZFelXbUoPNb+8sjQw=
-github.com/jackc/pgx/v5 v5.5.5/go.mod h1:ez9gk+OAat140fv9ErkZDYFWmXLfV+++K0uAOiwgm1A=
-github.com/jackc/puddle/v2 v2.2.1 h1:RhxXJtFG022u4ibrCSMSiu5aOq1i77R3OHKNJj77OAk=
-github.com/jackc/puddle/v2 v2.2.1/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
+github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 h1:iCEnooe7UlwOQYpKFhBabPMi4aNAfoODPEFNiAnClxo=
+github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
+github.com/jackc/pgx/v5 v5.7.4 h1:9wKznZrhWa2QiHL+NjTSPP6yjl3451BX3imWDnokYlg=
+github.com/jackc/pgx/v5 v5.7.4/go.mod h1:ncY89UGWxg82EykZUwSpUKEfccBGGYq1xjrOpsbsfGQ=
+github.com/jackc/puddle/v2 v2.2.2 h1:PR8nw+E/1w0GLuRFSmiioY6UooMp6KJv0/61nB7icHo=
+github.com/jackc/puddle/v2 v2.2.2/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
@@ -142,8 +144,11 @@ github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
 github.com/magiconair/properties v1.8.10 h1:s31yESBquKXCV9a/ScB3ESkOjUYYv+X0rg8SYxI99mE=
 github.com/magiconair/properties v1.8.10/go.mod h1:Dhd985XPs7jluiymwWYZ0G4Z61jb3vdS329zhj2hYo0=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.15 h1:vfoHhTN1af61xCRSWzFIWzx2YskyMTwHLrExkBOjvxI=
 github.com/mattn/go-sqlite3 v1.14.15/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/mdelapenya/tlscert v0.2.0 h1:7H81W6Z/4weDvZBNOfQte5GpIMo0lGYEeWbkGp5LJHI=
@@ -179,8 +184,8 @@ github.com/opencontainers/go-digest v1.0.0 h1:apOUWs51W5PlhuyGyz9FCeeBIOUDA/6nW8
 github.com/opencontainers/go-digest v1.0.0/go.mod h1:0JzlMkj0TRzQZfJkVvzbP0HBR3IKzErnv2BNG4W4MAM=
 github.com/opencontainers/image-spec v1.1.1 h1:y0fUlFfIZhPF1W537XOLg0/fcx6zcHCJwooC2xJA040=
 github.com/opencontainers/image-spec v1.1.1/go.mod h1:qpqAh3Dmcf36wStyyWU+kCeDgrGnAve2nCC8+7h8Q0M=
-github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
-github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
+github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
@@ -188,12 +193,14 @@ github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRI
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c h1:ncq/mPwQF4JjgDlrVEn3C11VoGHZN7m8qihwgMEtzYw=
 github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
+github.com/prashantv/gostub v1.1.0 h1:BTyx3RfQjRHnUWaGF9oQos79AlQ5k8WNktv7VGvVH4g=
+github.com/prashantv/gostub v1.1.0/go.mod h1:A5zLQHz7ieHGG7is6LLXLz7I8+3LZzsrV0P1IAHhP5U=
 github.com/quic-go/qpack v0.5.1 h1:giqksBPnT/HDtZ6VhtFKgoLOWmlyo9Ei6u9PqzIMbhI=
 github.com/quic-go/qpack v0.5.1/go.mod h1:+PC4XFrEskIVkcLzpEkbLqq1uCoxPhQuvK5rH1ZgaEg=
 github.com/quic-go/quic-go v0.56.0 h1:q/TW+OLismmXAehgFLczhCDTYB3bFmua4D9lsNBWxvY=
 github.com/quic-go/quic-go v0.56.0/go.mod h1:9gx5KsFQtw2oZ6GZTyh+7YEvOxWCL9WZAepnHxgAo6c=
-github.com/redis/go-redis/v9 v9.7.3 h1:YpPyAayJV+XErNsatSElgRZZVCwXX9QzkKYNvO7x0wM=
-github.com/redis/go-redis/v9 v9.7.3/go.mod h1:bGUrSggJ9X9GUmZpZNEOQKaANxSGgOEBRltRTZHSvrA=
+github.com/redis/go-redis/v9 v9.17.2 h1:P2EGsA4qVIM3Pp+aPocCJ7DguDHhqrXNhVcEp4ViluI=
+github.com/redis/go-redis/v9 v9.17.2/go.mod h1:u410H11HMLoB+TP67dz8rL9s6QW2j76l0//kSOd3370=
 github.com/refraction-networking/utls v1.8.1 h1:yNY1kapmQU8JeM1sSw2H2asfTIwWxIkrMJI0pRUOCAo=
 github.com/refraction-networking/utls v1.8.1/go.mod h1:jkSOEkLqn+S/jtpEHPOsVv/4V4EVnelwbMQl4vCWXAM=
 github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII=
@@ -208,6 +215,8 @@ github.com/sirupsen/logrus v1.9.3 h1:dueUQJ1C2q9oE3F7wvmSGAaVtTmUizReu6fjN8uqzbQ
 github.com/sirupsen/logrus v1.9.3/go.mod h1:naHLuLoDiP4jHNo9R0sCBMtWGeIprob74mVsIT4qYEQ=
 github.com/sourcegraph/conc v0.3.0 h1:OQTbbt6P72L20UqAkXXuLOj79LfEanQ+YQFNpLA9ySo=
 github.com/sourcegraph/conc v0.3.0/go.mod h1:Sdozi7LEKbFPqYX2/J+iBAM6HpqSLTASQIKqDmF7Mt0=
+github.com/spaolacci/murmur3 v1.1.0 h1:7c1g84S4BPRrfL5Xrdp6fOJ206sU9y293DDHaoy0bLI=
+github.com/spaolacci/murmur3 v1.1.0/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
 github.com/spf13/afero v1.11.0 h1:WJQKhtpdm3v2IzqG8VMqrr6Rf3UYpEF239Jy9wNepM8=
 github.com/spf13/afero v1.11.0/go.mod h1:GH9Y3pIexgf1MTIWtNGyogA5MwRIDXGUr+hbWNoBjkY=
 github.com/spf13/cast v1.6.0 h1:GEiTHELF+vaR5dhz3VqZfFSzZjYbgeKDpBxQVS4GYJ0=
@@ -228,6 +237,7 @@ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/subosito/gotenv v1.6.0 h1:9NlTDc1FTs4qu0DDq7AEtTPNw6SVm7uBMsUCUjABIf8=
@@ -259,26 +269,30 @@ github.com/xyproto/randomstring v1.0.5 h1:YtlWPoRdgMu3NZtP45drfy1GKoojuR7hmRcnhZ
 github.com/xyproto/randomstring v1.0.5/go.mod h1:rgmS5DeNXLivK7YprL0pY+lTuhNQW3iGxZ18UQApw/E=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
+github.com/zeromicro/go-zero v1.9.4 h1:aRLFoISqAYijABtkbliQC5SsI5TbizJpQvoHc9xup8k=
+github.com/zeromicro/go-zero v1.9.4/go.mod h1:a17JOTch25SWxBcUgJZYps60hygK3pIYdw7nGwlcS38=
 go.opentelemetry.io/auto/sdk v1.1.0 h1:cH53jehLUN6UFLY71z+NDOiNJqDdPRaXzTel0sJySYA=
 go.opentelemetry.io/auto/sdk v1.1.0/go.mod h1:3wSPjt5PWp2RhlCcmmOial7AvC4DQqZb7a7wCow3W8A=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.49.0 h1:jq9TW8u3so/bN+JPT166wjOI6/vQPF6Xe7nMNIltagk=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.49.0/go.mod h1:p8pYQP+m5XfbZm9fxtSKAbM6oIllS7s2AfxrChvc7iw=
 go.opentelemetry.io/otel v1.37.0 h1:9zhNfelUvx0KBfu/gb+ZgeAfAgtWrfHJZcAqFC228wQ=
 go.opentelemetry.io/otel v1.37.0/go.mod h1:ehE/umFRLnuLa/vSccNq9oS1ErUlkkK71gMcN34UG8I=
-go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.19.0 h1:Mne5On7VWdx7omSrSSZvM4Kw7cS7NQkOOmLcgscI51U=
-go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.19.0/go.mod h1:IPtUMKL4O3tH5y+iXVyAXqpAwMuzC1IrxVS81rummfE=
-go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.19.0 h1:IeMeyr1aBvBiPVYihXIaeIZba6b8E1bYp7lbdxK8CQg=
-go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.19.0/go.mod h1:oVdCUtjq9MK9BlS7TtucsQwUcXcymNiEDjgDD2jMtZU=
+go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.24.0 h1:t6wl9SPayj+c7lEIFgm4ooDBZVb01IhLB4InpomhRw8=
+go.opentelemetry.io/otel/exporters/otlp/otlptrace v1.24.0/go.mod h1:iSDOcsnSA5INXzZtwaBPrKp/lWu/V14Dd+llD0oI2EA=
+go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.24.0 h1:Xw8U6u2f8DK2XAkGRFV7BBLENgnTGX9i4rQRxJf+/vs=
+go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracehttp v1.24.0/go.mod h1:6KW1Fm6R/s6Z3PGXwSJN2K4eT6wQB3vXX6CVnYX9NmM=
 go.opentelemetry.io/otel/metric v1.37.0 h1:mvwbQS5m0tbmqML4NqK+e3aDiO02vsf/WgbsdpcPoZE=
 go.opentelemetry.io/otel/metric v1.37.0/go.mod h1:04wGrZurHYKOc+RKeye86GwKiTb9FKm1WHtO+4EVr2E=
 go.opentelemetry.io/otel/sdk v1.37.0 h1:ItB0QUqnjesGRvNcmAcU0LyvkVyGJ2xftD29bWdDvKI=
 go.opentelemetry.io/otel/sdk v1.37.0/go.mod h1:VredYzxUvuo2q3WRcDnKDjbdvmO0sCzOvVAiY+yUkAg=
 go.opentelemetry.io/otel/trace v1.37.0 h1:HLdcFNbRQBE2imdSEgm/kwqmQj1Or1l/7bW6mxVK7z4=
 go.opentelemetry.io/otel/trace v1.37.0/go.mod h1:TlgrlQ+PtQO5XFerSPUYG0JSgGyryXewPGyayAWSBS0=
-go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I=
-go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM=
-go.uber.org/atomic v1.9.0 h1:ECmE8Bn/WFTYwEW/bpKD3M8VtR/zQVbavAoalC1PYyE=
-go.uber.org/atomic v1.9.0/go.mod h1:fEN4uk6kAWBTFdckzkM89CLk9XfWZrxpCo0nPH17wJc=
+go.opentelemetry.io/proto/otlp v1.3.1 h1:TrMUixzpM0yuc/znrFTP9MMRh8trP93mkCiDVeXrui0=
+go.opentelemetry.io/proto/otlp v1.3.1/go.mod h1:0X1WI4de4ZsLrrJNLAQbFeLCm3T7yBkR0XqQ7niQU+8=
+go.uber.org/atomic v1.10.0 h1:9qC72Qh0+3MqyJbAn8YU5xVq1frD8bn3JtD2oXtafVQ=
+go.uber.org/atomic v1.10.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
+go.uber.org/automaxprocs v1.6.0 h1:O3y2/QNTOdbF+e/dpXNNW7Rx2hZ4sTIPyybbxyNqTUs=
+go.uber.org/automaxprocs v1.6.0/go.mod h1:ifeIMSnPZuznNm6jmdzmU3/bfk01Fe2fotchwEFJ8r8=
 go.uber.org/mock v0.6.0 h1:hyF9dfmbgIX5EfOdasqLsWD6xqpNZlXblLB/Dbnwv3Y=
 go.uber.org/mock v0.6.0/go.mod h1:KiVJ4BqZJaMj4svdfmHM0AUx4NJYO8ZNpPnZn1Z+BBU=
 go.uber.org/multierr v1.9.0 h1:7fIwc/ZtS0q++VgcfqFDxSBZVv/Xo49/SYnDFupUwlI=
@@ -301,6 +315,7 @@ golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20210616094352-59db8d763f22/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220704084225-05e143d24a9e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
--- a/backend/internal/handler/admin/redeem_handler.go
+++ b/backend/internal/handler/admin/redeem_handler.go
@@ -30,8 +30,8 @@ type GenerateRedeemCodesRequest struct {
 	Count        int     `json:"count" binding:"required,min=1,max=100"`
 	Type         string  `json:"type" binding:"required,oneof=balance concurrency subscription"`
 	Value        float64 `json:"value" binding:"min=0"`
-	GroupID      *int64  `json:"group_id"`      // 订阅类型必填
-	ValidityDays int     `json:"validity_days"` // 订阅类型使用，默认30天
+	GroupID      *int64  `json:"group_id"`                                    // 订阅类型必填
+	ValidityDays int     `json:"validity_days" binding:"omitempty,max=36500"` // 订阅类型使用，默认30天，最大100年
 }

 // List handles listing all redeem codes with pagination
--- a/backend/internal/handler/admin/subscription_handler.go
+++ b/backend/internal/handler/admin/subscription_handler.go
@@ -41,7 +41,7 @@ func NewSubscriptionHandler(subscriptionService *service.SubscriptionService) *S
 type AssignSubscriptionRequest struct {
 	UserID       int64  `json:"user_id" binding:"required"`
 	GroupID      int64  `json:"group_id" binding:"required"`
-	ValidityDays int    `json:"validity_days"`
+	ValidityDays int    `json:"validity_days" binding:"omitempty,max=36500"` // max 100 years
 	Notes        string `json:"notes"`
 }

@@ -49,13 +49,13 @@ type AssignSubscriptionRequest struct {
 type BulkAssignSubscriptionRequest struct {
 	UserIDs      []int64 `json:"user_ids" binding:"required,min=1"`
 	GroupID      int64   `json:"group_id" binding:"required"`
-	ValidityDays int     `json:"validity_days"`
+	ValidityDays int     `json:"validity_days" binding:"omitempty,max=36500"` // max 100 years
 	Notes        string  `json:"notes"`
 }

 // ExtendSubscriptionRequest represents extend subscription request
 type ExtendSubscriptionRequest struct {
-	Days int `json:"days" binding:"required,min=1"`
+	Days int `json:"days" binding:"required,min=1,max=36500"` // max 100 years
 }

 // List handles listing all subscriptions with pagination and filters
--- a/backend/internal/handler/admin/usage_handler.go
+++ b/backend/internal/handler/admin/usage_handler.go
@@ -40,7 +40,7 @@ func (h *UsageHandler) List(c *gin.Context) {
 	page, pageSize := response.ParsePagination(c)

 	// Parse filters
-	var userID, apiKeyID int64
+	var userID, apiKeyID, accountID, groupID int64
 	if userIDStr := c.Query("user_id"); userIDStr != "" {
 		id, err := strconv.ParseInt(userIDStr, 10, 64)
 		if err != nil {
@@ -59,6 +59,47 @@ func (h *UsageHandler) List(c *gin.Context) {
 		apiKeyID = id
 	}

+	if accountIDStr := c.Query("account_id"); accountIDStr != "" {
+		id, err := strconv.ParseInt(accountIDStr, 10, 64)
+		if err != nil {
+			response.BadRequest(c, "Invalid account_id")
+			return
+		}
+		accountID = id
+	}
+
+	if groupIDStr := c.Query("group_id"); groupIDStr != "" {
+		id, err := strconv.ParseInt(groupIDStr, 10, 64)
+		if err != nil {
+			response.BadRequest(c, "Invalid group_id")
+			return
+		}
+		groupID = id
+	}
+
+	model := c.Query("model")
+
+	var stream *bool
+	if streamStr := c.Query("stream"); streamStr != "" {
+		val, err := strconv.ParseBool(streamStr)
+		if err != nil {
+			response.BadRequest(c, "Invalid stream value, use true or false")
+			return
+		}
+		stream = &val
+	}
+
+	var billingType *int8
+	if billingTypeStr := c.Query("billing_type"); billingTypeStr != "" {
+		val, err := strconv.ParseInt(billingTypeStr, 10, 8)
+		if err != nil {
+			response.BadRequest(c, "Invalid billing_type")
+			return
+		}
+		bt := int8(val)
+		billingType = &bt
+	}
+
 	// Parse date range
 	var startTime, endTime *time.Time
 	if startDateStr := c.Query("start_date"); startDateStr != "" {
@@ -83,10 +124,15 @@ func (h *UsageHandler) List(c *gin.Context) {

 	params := pagination.PaginationParams{Page: page, PageSize: pageSize}
 	filters := usagestats.UsageLogFilters{
-		UserID:    userID,
-		ApiKeyID:  apiKeyID,
-		StartTime: startTime,
-		EndTime:   endTime,
+		UserID:      userID,
+		ApiKeyID:    apiKeyID,
+		AccountID:   accountID,
+		GroupID:     groupID,
+		Model:       model,
+		Stream:      stream,
+		BillingType: billingType,
+		StartTime:   startTime,
+		EndTime:     endTime,
 	}

 	records, result, err := h.usageService.ListWithFilters(c.Request.Context(), params, filters)
--- a/backend/internal/handler/gateway_handler.go
+++ b/backend/internal/handler/gateway_handler.go
@@ -3,6 +3,7 @@ package handler
 import (
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"log"
@@ -127,66 +128,158 @@ func (h *GatewayHandler) Messages(c *gin.Context) {
 		platform = apiKey.Group.Platform
 	}

-	// 选择支持该模型的账号
-	var account *service.Account
 	if platform == service.PlatformGemini {
-		account, err = h.geminiCompatService.SelectAccountForModel(c.Request.Context(), apiKey.GroupID, sessionHash, req.Model)
-	} else {
-		account, err = h.gatewayService.SelectAccountForModel(c.Request.Context(), apiKey.GroupID, sessionHash, req.Model)
-	}
-	if err != nil {
-		h.handleStreamingAwareError(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error(), streamStarted)
-		return
-	}
+		const maxAccountSwitches = 3
+		switchCount := 0
+		failedAccountIDs := make(map[int64]struct{})
+		lastFailoverStatus := 0

-	// 检查预热请求拦截（在账号选择后、转发前检查）
-	if account.IsInterceptWarmupEnabled() && isWarmupRequest(body) {
-		if req.Stream {
-			sendMockWarmupStream(c, req.Model)
-		} else {
-			sendMockWarmupResponse(c, req.Model)
+		for {
+			account, err := h.geminiCompatService.SelectAccountForModelWithExclusions(c.Request.Context(), apiKey.GroupID, sessionHash, req.Model, failedAccountIDs)
+			if err != nil {
+				if len(failedAccountIDs) == 0 {
+					h.handleStreamingAwareError(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error(), streamStarted)
+					return
+				}
+				h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+				return
+			}
+
+			// 检查预热请求拦截（在账号选择后、转发前检查）
+			if account.IsInterceptWarmupEnabled() && isWarmupRequest(body) {
+				if req.Stream {
+					sendMockWarmupStream(c, req.Model)
+				} else {
+					sendMockWarmupResponse(c, req.Model)
+				}
+				return
+			}
+
+			// 3. 获取账号并发槽位
+			accountReleaseFunc, err := h.concurrencyHelper.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, req.Stream, &streamStarted)
+			if err != nil {
+				log.Printf("Account concurrency acquire failed: %v", err)
+				h.handleConcurrencyError(c, err, "account", streamStarted)
+				return
+			}
+
+			// 转发请求
+			result, err := h.geminiCompatService.Forward(c.Request.Context(), c, account, body)
+			if accountReleaseFunc != nil {
+				accountReleaseFunc()
+			}
+			if err != nil {
+				var failoverErr *service.UpstreamFailoverError
+				if errors.As(err, &failoverErr) {
+					failedAccountIDs[account.ID] = struct{}{}
+					if switchCount >= maxAccountSwitches {
+						lastFailoverStatus = failoverErr.StatusCode
+						h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+						return
+					}
+					lastFailoverStatus = failoverErr.StatusCode
+					switchCount++
+					log.Printf("Account %d: upstream error %d, switching account %d/%d", account.ID, failoverErr.StatusCode, switchCount, maxAccountSwitches)
+					continue
+				}
+				// 错误响应已在Forward中处理，这里只记录日志
+				log.Printf("Forward request failed: %v", err)
+				return
+			}
+
+			// 异步记录使用量（subscription已在函数开头获取）
+			go func(result *service.ForwardResult, usedAccount *service.Account) {
+				ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+				defer cancel()
+				if err := h.gatewayService.RecordUsage(ctx, &service.RecordUsageInput{
+					Result:       result,
+					ApiKey:       apiKey,
+					User:         apiKey.User,
+					Account:      usedAccount,
+					Subscription: subscription,
+				}); err != nil {
+					log.Printf("Record usage failed: %v", err)
+				}
+			}(result, account)
+			return
 		}
-		return
 	}

-	// 3. 获取账号并发槽位
-	accountReleaseFunc, err := h.concurrencyHelper.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, req.Stream, &streamStarted)
-	if err != nil {
-		log.Printf("Account concurrency acquire failed: %v", err)
-		h.handleConcurrencyError(c, err, "account", streamStarted)
-		return
-	}
-	if accountReleaseFunc != nil {
-		defer accountReleaseFunc()
-	}
+	const maxAccountSwitches = 3
+	switchCount := 0
+	failedAccountIDs := make(map[int64]struct{})
+	lastFailoverStatus := 0

-	// 转发请求
-	var result *service.ForwardResult
-	if platform == service.PlatformGemini {
-		result, err = h.geminiCompatService.Forward(c.Request.Context(), c, account, body)
-	} else {
-		result, err = h.gatewayService.Forward(c.Request.Context(), c, account, body)
-	}
-	if err != nil {
-		// 错误响应已在Forward中处理，这里只记录日志
-		log.Printf("Forward request failed: %v", err)
-		return
-	}
-
-	// 异步记录使用量（subscription已在函数开头获取）
-	go func() {
-		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
-		defer cancel()
-		if err := h.gatewayService.RecordUsage(ctx, &service.RecordUsageInput{
-			Result:       result,
-			ApiKey:       apiKey,
-			User:         apiKey.User,
-			Account:      account,
-			Subscription: subscription,
-		}); err != nil {
-			log.Printf("Record usage failed: %v", err)
+	for {
+		// 选择支持该模型的账号
+		account, err := h.gatewayService.SelectAccountForModelWithExclusions(c.Request.Context(), apiKey.GroupID, sessionHash, req.Model, failedAccountIDs)
+		if err != nil {
+			if len(failedAccountIDs) == 0 {
+				h.handleStreamingAwareError(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error(), streamStarted)
+				return
+			}
+			h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+			return
 		}
-	}()
+
+		// 检查预热请求拦截（在账号选择后、转发前检查）
+		if account.IsInterceptWarmupEnabled() && isWarmupRequest(body) {
+			if req.Stream {
+				sendMockWarmupStream(c, req.Model)
+			} else {
+				sendMockWarmupResponse(c, req.Model)
+			}
+			return
+		}
+
+		// 3. 获取账号并发槽位
+		accountReleaseFunc, err := h.concurrencyHelper.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, req.Stream, &streamStarted)
+		if err != nil {
+			log.Printf("Account concurrency acquire failed: %v", err)
+			h.handleConcurrencyError(c, err, "account", streamStarted)
+			return
+		}
+
+		// 转发请求
+		result, err := h.gatewayService.Forward(c.Request.Context(), c, account, body)
+		if accountReleaseFunc != nil {
+			accountReleaseFunc()
+		}
+		if err != nil {
+			var failoverErr *service.UpstreamFailoverError
+			if errors.As(err, &failoverErr) {
+				failedAccountIDs[account.ID] = struct{}{}
+				if switchCount >= maxAccountSwitches {
+					lastFailoverStatus = failoverErr.StatusCode
+					h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+					return
+				}
+				lastFailoverStatus = failoverErr.StatusCode
+				switchCount++
+				log.Printf("Account %d: upstream error %d, switching account %d/%d", account.ID, failoverErr.StatusCode, switchCount, maxAccountSwitches)
+				continue
+			}
+			// 错误响应已在Forward中处理，这里只记录日志
+			log.Printf("Forward request failed: %v", err)
+			return
+		}
+
+		// 异步记录使用量（subscription已在函数开头获取）
+		go func(result *service.ForwardResult, usedAccount *service.Account) {
+			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+			defer cancel()
+			if err := h.gatewayService.RecordUsage(ctx, &service.RecordUsageInput{
+				Result:       result,
+				ApiKey:       apiKey,
+				User:         apiKey.User,
+				Account:      usedAccount,
+				Subscription: subscription,
+			}); err != nil {
+				log.Printf("Record usage failed: %v", err)
+			}
+		}(result, account)
+		return
+	}
 }

 // Models handles listing available models
@@ -314,6 +407,28 @@ func (h *GatewayHandler) handleConcurrencyError(c *gin.Context, err error, slotT
 		fmt.Sprintf("Concurrency limit exceeded for %s, please retry later", slotType), streamStarted)
 }

+func (h *GatewayHandler) handleFailoverExhausted(c *gin.Context, statusCode int, streamStarted bool) {
+	status, errType, errMsg := h.mapUpstreamError(statusCode)
+	h.handleStreamingAwareError(c, status, errType, errMsg, streamStarted)
+}
+
+func (h *GatewayHandler) mapUpstreamError(statusCode int) (int, string, string) {
+	switch statusCode {
+	case 401:
+		return http.StatusBadGateway, "upstream_error", "Upstream authentication failed, please contact administrator"
+	case 403:
+		return http.StatusBadGateway, "upstream_error", "Upstream access forbidden, please contact administrator"
+	case 429:
+		return http.StatusTooManyRequests, "rate_limit_error", "Upstream rate limit exceeded, please retry later"
+	case 529:
+		return http.StatusServiceUnavailable, "overloaded_error", "Upstream service overloaded, please retry later"
+	case 500, 502, 503, 504:
+		return http.StatusBadGateway, "upstream_error", "Upstream service temporarily unavailable"
+	default:
+		return http.StatusBadGateway, "upstream_error", "Upstream request failed"
+	}
+}
+
 // handleStreamingAwareError handles errors that may occur after streaming has started
 func (h *GatewayHandler) handleStreamingAwareError(c *gin.Context, status int, errType, message string, streamStarted bool) {
 	if streamStarted {
--- a/backend/internal/handler/gemini_v1beta_handler.go
+++ b/backend/internal/handler/gemini_v1beta_handler.go
@@ -2,6 +2,7 @@ package handler

 import (
 	"context"
+	"errors"
 	"io"
 	"log"
 	"net/http"
@@ -158,44 +159,69 @@ func (h *GatewayHandler) GeminiV1BetaModels(c *gin.Context) {

 	// 3) select account (sticky session based on request body)
 	sessionHash := h.gatewayService.GenerateSessionHash(body)
-	account, err := h.geminiCompatService.SelectAccountForModel(c.Request.Context(), apiKey.GroupID, sessionHash, modelName)
-	if err != nil {
-		googleError(c, http.StatusServiceUnavailable, "No available Gemini accounts: "+err.Error())
-		return
-	}
+	const maxAccountSwitches = 3
+	switchCount := 0
+	failedAccountIDs := make(map[int64]struct{})
+	lastFailoverStatus := 0

-	// 4) account concurrency slot
-	accountReleaseFunc, err := geminiConcurrency.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, stream, &streamStarted)
-	if err != nil {
-		googleError(c, http.StatusTooManyRequests, err.Error())
-		return
-	}
-	if accountReleaseFunc != nil {
-		defer accountReleaseFunc()
-	}
-
-	// 5) forward (writes response to client)
-	result, err := h.geminiCompatService.ForwardNative(c.Request.Context(), c, account, modelName, action, stream, body)
-	if err != nil {
-		// ForwardNative already wrote the response
-		log.Printf("Gemini native forward failed: %v", err)
-		return
-	}
-
-	// 6) record usage async
-	go func() {
-		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
-		defer cancel()
-		if err := h.gatewayService.RecordUsage(ctx, &service.RecordUsageInput{
-			Result:       result,
-			ApiKey:       apiKey,
-			User:         apiKey.User,
-			Account:      account,
-			Subscription: subscription,
-		}); err != nil {
-			log.Printf("Record usage failed: %v", err)
+	for {
+		account, err := h.geminiCompatService.SelectAccountForModelWithExclusions(c.Request.Context(), apiKey.GroupID, sessionHash, modelName, failedAccountIDs)
+		if err != nil {
+			if len(failedAccountIDs) == 0 {
+				googleError(c, http.StatusServiceUnavailable, "No available Gemini accounts: "+err.Error())
+				return
+			}
+			handleGeminiFailoverExhausted(c, lastFailoverStatus)
+			return
 		}
-	}()
+
+		// 4) account concurrency slot
+		accountReleaseFunc, err := geminiConcurrency.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, stream, &streamStarted)
+		if err != nil {
+			googleError(c, http.StatusTooManyRequests, err.Error())
+			return
+		}
+
+		// 5) forward (writes response to client)
+		result, err := h.geminiCompatService.ForwardNative(c.Request.Context(), c, account, modelName, action, stream, body)
+		if accountReleaseFunc != nil {
+			accountReleaseFunc()
+		}
+		if err != nil {
+			var failoverErr *service.UpstreamFailoverError
+			if errors.As(err, &failoverErr) {
+				failedAccountIDs[account.ID] = struct{}{}
+				if switchCount >= maxAccountSwitches {
+					lastFailoverStatus = failoverErr.StatusCode
+					handleGeminiFailoverExhausted(c, lastFailoverStatus)
+					return
+				}
+				lastFailoverStatus = failoverErr.StatusCode
+				switchCount++
+				log.Printf("Gemini account %d: upstream error %d, switching account %d/%d", account.ID, failoverErr.StatusCode, switchCount, maxAccountSwitches)
+				continue
+			}
+			// ForwardNative already wrote the response
+			log.Printf("Gemini native forward failed: %v", err)
+			return
+		}
+
+		// 6) record usage async
+		go func(result *service.ForwardResult, usedAccount *service.Account) {
+			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+			defer cancel()
+			if err := h.gatewayService.RecordUsage(ctx, &service.RecordUsageInput{
+				Result:       result,
+				ApiKey:       apiKey,
+				User:         apiKey.User,
+				Account:      usedAccount,
+				Subscription: subscription,
+			}); err != nil {
+				log.Printf("Record usage failed: %v", err)
+			}
+		}(result, account)
+		return
+	}
 }

 func parseGeminiModelAction(rest string) (model string, action string, err error) {
@@ -217,6 +243,28 @@ func parseGeminiModelAction(rest string) (model string, action string, err error
 	return "", "", &pathParseError{"invalid model action path"}
 }

+func handleGeminiFailoverExhausted(c *gin.Context, statusCode int) {
+	status, message := mapGeminiUpstreamError(statusCode)
+	googleError(c, status, message)
+}
+
+func mapGeminiUpstreamError(statusCode int) (int, string) {
+	switch statusCode {
+	case 401:
+		return http.StatusBadGateway, "Upstream authentication failed, please contact administrator"
+	case 403:
+		return http.StatusBadGateway, "Upstream access forbidden, please contact administrator"
+	case 429:
+		return http.StatusTooManyRequests, "Upstream rate limit exceeded, please retry later"
+	case 529:
+		return http.StatusServiceUnavailable, "Upstream service overloaded, please retry later"
+	case 500, 502, 503, 504:
+		return http.StatusBadGateway, "Upstream service temporarily unavailable"
+	default:
+		return http.StatusBadGateway, "Upstream request failed"
+	}
+}
+
 type pathParseError struct{ msg string }

 func (e *pathParseError) Error() string { return e.msg }
--- a/backend/internal/handler/openai_gateway_handler.go
+++ b/backend/internal/handler/openai_gateway_handler.go
@@ -3,6 +3,7 @@ package handler
 import (
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"log"
@@ -127,49 +128,74 @@ func (h *OpenAIGatewayHandler) Responses(c *gin.Context) {
 	// Generate session hash (from header for OpenAI)
 	sessionHash := h.gatewayService.GenerateSessionHash(c)

-	// Select account supporting the requested model
-	log.Printf("[OpenAI Handler] Selecting account: groupID=%v model=%s", apiKey.GroupID, reqModel)
-	account, err := h.gatewayService.SelectAccountForModel(c.Request.Context(), apiKey.GroupID, sessionHash, reqModel)
-	if err != nil {
-		log.Printf("[OpenAI Handler] SelectAccount failed: %v", err)
-		h.handleStreamingAwareError(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error(), streamStarted)
-		return
-	}
-	log.Printf("[OpenAI Handler] Selected account: id=%d name=%s", account.ID, account.Name)
+	const maxAccountSwitches = 3
+	switchCount := 0
+	failedAccountIDs := make(map[int64]struct{})
+	lastFailoverStatus := 0

-	// 3. Acquire account concurrency slot
-	accountReleaseFunc, err := h.concurrencyHelper.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, reqStream, &streamStarted)
-	if err != nil {
-		log.Printf("Account concurrency acquire failed: %v", err)
-		h.handleConcurrencyError(c, err, "account", streamStarted)
-		return
-	}
-	if accountReleaseFunc != nil {
-		defer accountReleaseFunc()
-	}
-
-	// Forward request
-	result, err := h.gatewayService.Forward(c.Request.Context(), c, account, body)
-	if err != nil {
-		// Error response already handled in Forward, just log
-		log.Printf("Forward request failed: %v", err)
-		return
-	}
-
-	// Async record usage
-	go func() {
-		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
-		defer cancel()
-		if err := h.gatewayService.RecordUsage(ctx, &service.OpenAIRecordUsageInput{
-			Result:       result,
-			ApiKey:       apiKey,
-			User:         apiKey.User,
-			Account:      account,
-			Subscription: subscription,
-		}); err != nil {
-			log.Printf("Record usage failed: %v", err)
+	for {
+		// Select account supporting the requested model
+		log.Printf("[OpenAI Handler] Selecting account: groupID=%v model=%s", apiKey.GroupID, reqModel)
+		account, err := h.gatewayService.SelectAccountForModelWithExclusions(c.Request.Context(), apiKey.GroupID, sessionHash, reqModel, failedAccountIDs)
+		if err != nil {
+			log.Printf("[OpenAI Handler] SelectAccount failed: %v", err)
+			if len(failedAccountIDs) == 0 {
+				h.handleStreamingAwareError(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error(), streamStarted)
+				return
+			}
+			h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+			return
 		}
-	}()
+		log.Printf("[OpenAI Handler] Selected account: id=%d name=%s", account.ID, account.Name)
+
+		// 3. Acquire account concurrency slot
+		accountReleaseFunc, err := h.concurrencyHelper.AcquireAccountSlotWithWait(c, account.ID, account.Concurrency, reqStream, &streamStarted)
+		if err != nil {
+			log.Printf("Account concurrency acquire failed: %v", err)
+			h.handleConcurrencyError(c, err, "account", streamStarted)
+			return
+		}
+
+		// Forward request
+		result, err := h.gatewayService.Forward(c.Request.Context(), c, account, body)
+		if accountReleaseFunc != nil {
+			accountReleaseFunc()
+		}
+		if err != nil {
+			var failoverErr *service.UpstreamFailoverError
+			if errors.As(err, &failoverErr) {
+				failedAccountIDs[account.ID] = struct{}{}
+				if switchCount >= maxAccountSwitches {
+					lastFailoverStatus = failoverErr.StatusCode
+					h.handleFailoverExhausted(c, lastFailoverStatus, streamStarted)
+					return
+				}
+				lastFailoverStatus = failoverErr.StatusCode
+				switchCount++
+				log.Printf("Account %d: upstream error %d, switching account %d/%d", account.ID, failoverErr.StatusCode, switchCount, maxAccountSwitches)
+				continue
+			}
+			// Error response already handled in Forward, just log
+			log.Printf("Forward request failed: %v", err)
+			return
+		}
+
+		// Async record usage
+		go func(result *service.OpenAIForwardResult, usedAccount *service.Account) {
+			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+			defer cancel()
+			if err := h.gatewayService.RecordUsage(ctx, &service.OpenAIRecordUsageInput{
+				Result:       result,
+				ApiKey:       apiKey,
+				User:         apiKey.User,
+				Account:      usedAccount,
+				Subscription: subscription,
+			}); err != nil {
+				log.Printf("Record usage failed: %v", err)
+			}
+		}(result, account)
+		return
+	}
 }

 // handleConcurrencyError handles concurrency-related errors with proper 429 response
@@ -178,6 +204,28 @@ func (h *OpenAIGatewayHandler) handleConcurrencyError(c *gin.Context, err error,
 		fmt.Sprintf("Concurrency limit exceeded for %s, please retry later", slotType), streamStarted)
 }

+func (h *OpenAIGatewayHandler) handleFailoverExhausted(c *gin.Context, statusCode int, streamStarted bool) {
+	status, errType, errMsg := h.mapUpstreamError(statusCode)
+	h.handleStreamingAwareError(c, status, errType, errMsg, streamStarted)
+}
+
+func (h *OpenAIGatewayHandler) mapUpstreamError(statusCode int) (int, string, string) {
+	switch statusCode {
+	case 401:
+		return http.StatusBadGateway, "upstream_error", "Upstream authentication failed, please contact administrator"
+	case 403:
+		return http.StatusBadGateway, "upstream_error", "Upstream access forbidden, please contact administrator"
+	case 429:
+		return http.StatusTooManyRequests, "rate_limit_error", "Upstream rate limit exceeded, please retry later"
+	case 529:
+		return http.StatusServiceUnavailable, "upstream_error", "Upstream service overloaded, please retry later"
+	case 500, 502, 503, 504:
+		return http.StatusBadGateway, "upstream_error", "Upstream service temporarily unavailable"
+	default:
+		return http.StatusBadGateway, "upstream_error", "Upstream request failed"
+	}
+}
+
 // handleStreamingAwareError handles errors that may occur after streaming has started
 func (h *OpenAIGatewayHandler) handleStreamingAwareError(c *gin.Context, status int, errType, message string, streamStarted bool) {
 	if streamStarted {
--- a/backend/internal/handler/usage_handler.go
+++ b/backend/internal/handler/usage_handler.go
@@ -8,6 +8,7 @@ import (
 	"github.com/Wei-Shaw/sub2api/internal/pkg/pagination"
 	"github.com/Wei-Shaw/sub2api/internal/pkg/response"
 	"github.com/Wei-Shaw/sub2api/internal/pkg/timezone"
+	"github.com/Wei-Shaw/sub2api/internal/pkg/usagestats"
 	middleware2 "github.com/Wei-Shaw/sub2api/internal/server/middleware"
 	"github.com/Wei-Shaw/sub2api/internal/service"

@@ -61,16 +62,64 @@ func (h *UsageHandler) List(c *gin.Context) {
 		apiKeyID = id
 	}

-	params := pagination.PaginationParams{Page: page, PageSize: pageSize}
-	var records []service.UsageLog
-	var result *pagination.PaginationResult
-	var err error
+	// Parse additional filters
+	model := c.Query("model")

-	if apiKeyID > 0 {
-		records, result, err = h.usageService.ListByApiKey(c.Request.Context(), apiKeyID, params)
-	} else {
-		records, result, err = h.usageService.ListByUser(c.Request.Context(), subject.UserID, params)
+	var stream *bool
+	if streamStr := c.Query("stream"); streamStr != "" {
+		val, err := strconv.ParseBool(streamStr)
+		if err != nil {
+			response.BadRequest(c, "Invalid stream value, use true or false")
+			return
+		}
+		stream = &val
 	}
+
+	var billingType *int8
+	if billingTypeStr := c.Query("billing_type"); billingTypeStr != "" {
+		val, err := strconv.ParseInt(billingTypeStr, 10, 8)
+		if err != nil {
+			response.BadRequest(c, "Invalid billing_type")
+			return
+		}
+		bt := int8(val)
+		billingType = &bt
+	}
+
+	// Parse date range
+	var startTime, endTime *time.Time
+	if startDateStr := c.Query("start_date"); startDateStr != "" {
+		t, err := timezone.ParseInLocation("2006-01-02", startDateStr)
+		if err != nil {
+			response.BadRequest(c, "Invalid start_date format, use YYYY-MM-DD")
+			return
+		}
+		startTime = &t
+	}
+
+	if endDateStr := c.Query("end_date"); endDateStr != "" {
+		t, err := timezone.ParseInLocation("2006-01-02", endDateStr)
+		if err != nil {
+			response.BadRequest(c, "Invalid end_date format, use YYYY-MM-DD")
+			return
+		}
+		// Set end time to end of day
+		t = t.Add(24*time.Hour - time.Nanosecond)
+		endTime = &t
+	}
+
+	params := pagination.PaginationParams{Page: page, PageSize: pageSize}
+	filters := usagestats.UsageLogFilters{
+		UserID:      subject.UserID, // Always filter by current user for security
+		ApiKeyID:    apiKeyID,
+		Model:       model,
+		Stream:      stream,
+		BillingType: billingType,
+		StartTime:   startTime,
+		EndTime:     endTime,
+	}
+
+	records, result, err := h.usageService.ListWithFilters(c.Request.Context(), params, filters)
 	if err != nil {
 		response.ErrorFrom(c, err)
 		return
@@ -322,24 +371,16 @@ func (h *UsageHandler) DashboardApiKeysUsage(c *gin.Context) {
 		return
 	}

-	// Verify ownership of all requested API keys
-	userApiKeys, _, err := h.apiKeyService.List(c.Request.Context(), subject.UserID, pagination.PaginationParams{Page: 1, PageSize: 1000})
-	if err != nil {
-		response.ErrorFrom(c, err)
+	// Limit the number of API key IDs to prevent SQL parameter overflow
+	if len(req.ApiKeyIDs) > 100 {
+		response.BadRequest(c, "Too many API key IDs (maximum 100 allowed)")
 		return
 	}

-	userApiKeyIDs := make(map[int64]bool)
-	for _, key := range userApiKeys {
-		userApiKeyIDs[key.ID] = true
-	}
-
-	// Filter to only include user's own API keys
-	validApiKeyIDs := make([]int64, 0)
-	for _, id := range req.ApiKeyIDs {
-		if userApiKeyIDs[id] {
-			validApiKeyIDs = append(validApiKeyIDs, id)
-		}
+	validApiKeyIDs, err := h.apiKeyService.VerifyOwnership(c.Request.Context(), subject.UserID, req.ApiKeyIDs)
+	if err != nil {
+		response.ErrorFrom(c, err)
+		return
 	}

 	if len(validApiKeyIDs) == 0 {
--- a/backend/internal/pkg/gemini/models.go
+++ b/backend/internal/pkg/gemini/models.go
@@ -18,8 +18,10 @@ func DefaultModels() []Model {
 	methods := []string{"generateContent", "streamGenerateContent"}
 	return []Model{
 		{Name: "models/gemini-3-pro-preview", SupportedGenerationMethods: methods},
+		{Name: "models/gemini-3-flash-preview", SupportedGenerationMethods: methods},
+		{Name: "models/gemini-2.5-pro", SupportedGenerationMethods: methods},
+		{Name: "models/gemini-2.5-flash", SupportedGenerationMethods: methods},
 		{Name: "models/gemini-2.0-flash", SupportedGenerationMethods: methods},
-		{Name: "models/gemini-2.0-flash-lite", SupportedGenerationMethods: methods},
 		{Name: "models/gemini-1.5-pro", SupportedGenerationMethods: methods},
 		{Name: "models/gemini-1.5-flash", SupportedGenerationMethods: methods},
 		{Name: "models/gemini-1.5-flash-8b", SupportedGenerationMethods: methods},
--- a/backend/internal/pkg/geminicli/models.go
+++ b/backend/internal/pkg/geminicli/models.go
@@ -11,11 +11,11 @@ type Model struct {

 // DefaultModels is the curated Gemini model list used by the admin UI "test account" flow.
 var DefaultModels = []Model{
-	{ID: "gemini-3-pro", Type: "model", DisplayName: "Gemini 3 Pro", CreatedAt: ""},
-	{ID: "gemini-3-flash", Type: "model", DisplayName: "Gemini 3 Flash", CreatedAt: ""},
+	{ID: "gemini-3-pro-preview", Type: "model", DisplayName: "Gemini 3 Pro Preview", CreatedAt: ""},
+	{ID: "gemini-3-flash-preview", Type: "model", DisplayName: "Gemini 3 Flash Preview", CreatedAt: ""},
 	{ID: "gemini-2.5-pro", Type: "model", DisplayName: "Gemini 2.5 Pro", CreatedAt: ""},
 	{ID: "gemini-2.5-flash", Type: "model", DisplayName: "Gemini 2.5 Flash", CreatedAt: ""},
 }

 // DefaultTestModel is the default model to preselect in test flows.
-const DefaultTestModel = "gemini-2.5-pro"
+const DefaultTestModel = "gemini-3-pro-preview"
--- a/backend/internal/pkg/usagestats/usage_log_types.go
+++ b/backend/internal/pkg/usagestats/usage_log_types.go
@@ -127,10 +127,15 @@ type UserDashboardStats struct {

 // UsageLogFilters represents filters for usage log queries
 type UsageLogFilters struct {
-	UserID    int64
-	ApiKeyID  int64
-	StartTime *time.Time
-	EndTime   *time.Time
+	UserID      int64
+	ApiKeyID    int64
+	AccountID   int64
+	GroupID     int64
+	Model       string
+	Stream      *bool
+	BillingType *int8
+	StartTime   *time.Time
+	EndTime     *time.Time
 }

 // UsageStats represents usage statistics
--- a/backend/internal/repository/account_repo.go
+++ b/backend/internal/repository/account_repo.go
@@ -171,6 +171,27 @@ func (r *accountRepository) UpdateLastUsed(ctx context.Context, id int64) error
 	return r.db.WithContext(ctx).Model(&accountModel{}).Where("id = ?", id).Update("last_used_at", now).Error
 }

+func (r *accountRepository) BatchUpdateLastUsed(ctx context.Context, updates map[int64]time.Time) error {
+	if len(updates) == 0 {
+		return nil
+	}
+
+	var caseSql = "UPDATE accounts SET last_used_at = CASE id"
+	var args []any
+	var ids []int64
+
+	for id, ts := range updates {
+		caseSql += " WHEN ? THEN CAST(? AS TIMESTAMP)"
+		args = append(args, id, ts)
+		ids = append(ids, id)
+	}
+
+	caseSql += " END WHERE id IN ?"
+	args = append(args, ids)
+
+	return r.db.WithContext(ctx).Exec(caseSql, args...).Error
+}
+
 func (r *accountRepository) SetError(ctx context.Context, id int64, errorMsg string) error {
 	return r.db.WithContext(ctx).Model(&accountModel{}).Where("id = ?", id).
 		Updates(map[string]any{
--- a/backend/internal/repository/api_key_repo.go
+++ b/backend/internal/repository/api_key_repo.go
@@ -81,6 +81,22 @@ func (r *apiKeyRepository) ListByUserID(ctx context.Context, userID int64, param
 	return outKeys, paginationResultFromTotal(total, params), nil
 }

+func (r *apiKeyRepository) VerifyOwnership(ctx context.Context, userID int64, apiKeyIDs []int64) ([]int64, error) {
+	if len(apiKeyIDs) == 0 {
+		return []int64{}, nil
+	}
+
+	ids := make([]int64, 0, len(apiKeyIDs))
+	err := r.db.WithContext(ctx).
+		Model(&apiKeyModel{}).
+		Where("user_id = ? AND id IN ?", userID, apiKeyIDs).
+		Pluck("id", &ids).Error
+	if err != nil {
+		return nil, err
+	}
+	return ids, nil
+}
+
 func (r *apiKeyRepository) CountByUserID(ctx context.Context, userID int64) (int64, error) {
 	var count int64
 	err := r.db.WithContext(ctx).Model(&apiKeyModel{}).Where("user_id = ?", userID).Count(&count).Error
--- a/backend/internal/repository/auto_migrate.go
+++ b/backend/internal/repository/auto_migrate.go
@@ -1,11 +1,20 @@
 package repository

-import "gorm.io/gorm"
+import (
+	"log"
+	"time"
+
+	"gorm.io/gorm"
+)
+
+// MaxExpiresAt is the maximum allowed expiration date for subscriptions (year 2099)
+// This prevents time.Time JSON serialization errors (RFC 3339 requires year <= 9999)
+var maxExpiresAt = time.Date(2099, 12, 31, 23, 59, 59, 0, time.UTC)

 // AutoMigrate runs schema migrations for all repository persistence models.
 // Persistence models are defined within individual `*_repo.go` files.
 func AutoMigrate(db *gorm.DB) error {
-	return db.AutoMigrate(
+	err := db.AutoMigrate(
 		&userModel{},
 		&apiKeyModel{},
 		&groupModel{},
@@ -17,4 +26,24 @@ func AutoMigrate(db *gorm.DB) error {
 		&settingModel{},
 		&userSubscriptionModel{},
 	)
+	if err != nil {
+		return err
+	}
+
+	// 修复无效的过期时间（年份超过 2099 会导致 JSON 序列化失败）
+	return fixInvalidExpiresAt(db)
+}
+
+// fixInvalidExpiresAt 修复 user_subscriptions 表中无效的过期时间
+func fixInvalidExpiresAt(db *gorm.DB) error {
+	result := db.Model(&userSubscriptionModel{}).
+		Where("expires_at > ?", maxExpiresAt).
+		Update("expires_at", maxExpiresAt)
+	if result.Error != nil {
+		return result.Error
+	}
+	if result.RowsAffected > 0 {
+		log.Printf("[AutoMigrate] Fixed %d subscriptions with invalid expires_at (year > 2099)", result.RowsAffected)
+	}
+	return nil
 }
--- a/backend/internal/repository/claude_oauth_service.go
+++ b/backend/internal/repository/claude_oauth_service.go
@@ -145,7 +145,7 @@ func (s *claudeOAuthService) GetAuthorizationCode(ctx context.Context, sessionKe
 	return fullCode, nil
 }

-func (s *claudeOAuthService) ExchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string) (*oauth.TokenResponse, error) {
+func (s *claudeOAuthService) ExchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string, isSetupToken bool) (*oauth.TokenResponse, error) {
 	client := s.clientFactory(proxyURL)

 	// Parse code which may contain state in format "authCode#state"
@@ -168,6 +168,11 @@ func (s *claudeOAuthService) ExchangeCodeForToken(ctx context.Context, code, cod
 		reqBody["state"] = codeState
 	}

+	// Setup token requires longer expiration (1 year)
+	if isSetupToken {
+		reqBody["expires_in"] = 31536000 // 365 * 24 * 60 * 60 seconds
+	}
+
 	reqBodyJSON, _ := json.Marshal(reqBody)
 	log.Printf("[OAuth] Step 3: Exchanging code for token at %s", s.tokenURL)
 	log.Printf("[OAuth] Step 3 Request Body: %s", string(reqBodyJSON))
@@ -199,16 +204,20 @@ func (s *claudeOAuthService) ExchangeCodeForToken(ctx context.Context, code, cod
 func (s *claudeOAuthService) RefreshToken(ctx context.Context, refreshToken, proxyURL string) (*oauth.TokenResponse, error) {
 	client := s.clientFactory(proxyURL)

-	formData := url.Values{}
-	formData.Set("grant_type", "refresh_token")
-	formData.Set("refresh_token", refreshToken)
-	formData.Set("client_id", oauth.ClientID)
+	// 使用 JSON 格式（与 ExchangeCodeForToken 保持一致）
+	// Anthropic OAuth API 期望 JSON 格式的请求体
+	reqBody := map[string]any{
+		"grant_type":    "refresh_token",
+		"refresh_token": refreshToken,
+		"client_id":     oauth.ClientID,
+	}

 	var tokenResp oauth.TokenResponse

 	resp, err := client.R().
 		SetContext(ctx).
-		SetFormDataFromValues(formData).
+		SetHeader("Content-Type", "application/json").
+		SetBody(reqBody).
 		SetSuccessResult(&tokenResp).
 		Post(s.tokenURL)

--- a/backend/internal/repository/claude_oauth_service_test.go
+++ b/backend/internal/repository/claude_oauth_service_test.go
@@ -6,7 +6,6 @@ import (
 	"io"
 	"net/http"
 	"net/http/httptest"
-	"net/url"
 	"strings"
 	"testing"

@@ -34,7 +33,6 @@ type requestCapture struct {
 	method      string
 	cookies     []*http.Cookie
 	body        []byte
-	formValues  url.Values
 	bodyJSON    map[string]any
 	contentType string
 }
@@ -193,12 +191,13 @@ func (s *ClaudeOAuthServiceSuite) TestGetAuthorizationCode() {

 func (s *ClaudeOAuthServiceSuite) TestExchangeCodeForToken() {
 	tests := []struct {
-		name     string
-		handler  http.HandlerFunc
-		code     string
-		wantErr  bool
-		wantResp *oauth.TokenResponse
-		validate func(captured requestCapture)
+		name         string
+		handler      http.HandlerFunc
+		code         string
+		isSetupToken bool
+		wantErr      bool
+		wantResp     *oauth.TokenResponse
+		validate     func(captured requestCapture)
 	}{
 		{
 			name: "sends_state_when_embedded",
@@ -212,7 +211,8 @@ func (s *ClaudeOAuthServiceSuite) TestExchangeCodeForToken() {
 					Scope:        "s",
 				})
 			},
-			code: "AUTH#STATE2",
+			code:         "AUTH#STATE2",
+			isSetupToken: false,
 			wantResp: &oauth.TokenResponse{
 				AccessToken:  "at",
 				RefreshToken: "rt",
@@ -225,6 +225,29 @@ func (s *ClaudeOAuthServiceSuite) TestExchangeCodeForToken() {
 				require.Equal(s.T(), oauth.ClientID, captured.bodyJSON["client_id"])
 				require.Equal(s.T(), oauth.RedirectURI, captured.bodyJSON["redirect_uri"])
 				require.Equal(s.T(), "ver", captured.bodyJSON["code_verifier"])
+				// Regular OAuth should not include expires_in
+				require.Nil(s.T(), captured.bodyJSON["expires_in"], "regular OAuth should not include expires_in")
+			},
+		},
+		{
+			name: "setup_token_includes_expires_in",
+			handler: func(w http.ResponseWriter, r *http.Request) {
+				w.Header().Set("Content-Type", "application/json")
+				_ = json.NewEncoder(w).Encode(oauth.TokenResponse{
+					AccessToken: "at",
+					TokenType:   "bearer",
+					ExpiresIn:   31536000,
+				})
+			},
+			code:         "AUTH",
+			isSetupToken: true,
+			wantResp: &oauth.TokenResponse{
+				AccessToken: "at",
+			},
+			validate: func(captured requestCapture) {
+				// Setup token should include expires_in with 1 year value
+				require.Equal(s.T(), float64(31536000), captured.bodyJSON["expires_in"],
+					"setup token should include expires_in: 31536000")
 			},
 		},
 		{
@@ -233,8 +256,9 @@ func (s *ClaudeOAuthServiceSuite) TestExchangeCodeForToken() {
 				w.WriteHeader(http.StatusBadRequest)
 				_, _ = w.Write([]byte("bad request"))
 			},
-			code:    "AUTH",
-			wantErr: true,
+			code:         "AUTH",
+			isSetupToken: false,
+			wantErr:      true,
 		},
 	}

@@ -256,7 +280,7 @@ func (s *ClaudeOAuthServiceSuite) TestExchangeCodeForToken() {
 			s.client = client
 			s.client.tokenURL = s.srv.URL

-			resp, err := s.client.ExchangeCodeForToken(context.Background(), tt.code, "ver", "", "")
+			resp, err := s.client.ExchangeCodeForToken(context.Background(), tt.code, "ver", "", "", tt.isSetupToken)

 			if tt.wantErr {
 				require.Error(s.T(), err)
@@ -282,24 +306,53 @@ func (s *ClaudeOAuthServiceSuite) TestRefreshToken() {
 		validate func(captured requestCapture)
 	}{
 		{
-			name: "sends_form",
+			name: "sends_json_format",
 			handler: func(w http.ResponseWriter, r *http.Request) {
 				w.Header().Set("Content-Type", "application/json")
-				_ = json.NewEncoder(w).Encode(oauth.TokenResponse{AccessToken: "at2", TokenType: "bearer", ExpiresIn: 3600})
+				_ = json.NewEncoder(w).Encode(oauth.TokenResponse{
+					AccessToken:  "new_access_token",
+					TokenType:    "bearer",
+					ExpiresIn:    28800,
+					RefreshToken: "new_refresh_token",
+					Scope:        "user:profile user:inference",
+				})
+			},
+			wantResp: &oauth.TokenResponse{
+				AccessToken:  "new_access_token",
+				RefreshToken: "new_refresh_token",
 			},
-			wantResp: &oauth.TokenResponse{AccessToken: "at2"},
 			validate: func(captured requestCapture) {
 				require.Equal(s.T(), http.MethodPost, captured.method, "expected POST")
-				require.Equal(s.T(), "refresh_token", captured.formValues.Get("grant_type"))
-				require.Equal(s.T(), "rt", captured.formValues.Get("refresh_token"))
-				require.Equal(s.T(), oauth.ClientID, captured.formValues.Get("client_id"))
+				// 验证使用 JSON 格式（不是 form 格式）
+				require.True(s.T(), strings.HasPrefix(captured.contentType, "application/json"),
+					"expected JSON content-type, got: %s", captured.contentType)
+				// 验证 JSON body 内容
+				require.Equal(s.T(), "refresh_token", captured.bodyJSON["grant_type"])
+				require.Equal(s.T(), "rt", captured.bodyJSON["refresh_token"])
+				require.Equal(s.T(), oauth.ClientID, captured.bodyJSON["client_id"])
+			},
+		},
+		{
+			name: "returns_new_refresh_token",
+			handler: func(w http.ResponseWriter, r *http.Request) {
+				w.Header().Set("Content-Type", "application/json")
+				_ = json.NewEncoder(w).Encode(oauth.TokenResponse{
+					AccessToken:  "at",
+					TokenType:    "bearer",
+					ExpiresIn:    28800,
+					RefreshToken: "rotated_rt", // Anthropic rotates refresh tokens
+				})
+			},
+			wantResp: &oauth.TokenResponse{
+				AccessToken:  "at",
+				RefreshToken: "rotated_rt",
 			},
 		},
 		{
 			name: "non_200_returns_error",
 			handler: func(w http.ResponseWriter, r *http.Request) {
 				w.WriteHeader(http.StatusUnauthorized)
-				_, _ = w.Write([]byte("unauthorized"))
+				_, _ = w.Write([]byte(`{"error":"invalid_grant"}`))
 			},
 			wantErr: true,
 		},
@@ -311,8 +364,9 @@ func (s *ClaudeOAuthServiceSuite) TestRefreshToken() {

 			s.srv = httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 				captured.method = r.Method
+				captured.contentType = r.Header.Get("Content-Type")
 				captured.body, _ = io.ReadAll(r.Body)
-				captured.formValues, _ = url.ParseQuery(string(captured.body))
+				_ = json.Unmarshal(captured.body, &captured.bodyJSON)
 				tt.handler(w, r)
 			}))
 			defer s.srv.Close()
@@ -331,6 +385,7 @@ func (s *ClaudeOAuthServiceSuite) TestRefreshToken() {

 			require.NoError(s.T(), err)
 			require.Equal(s.T(), tt.wantResp.AccessToken, resp.AccessToken)
+			require.Equal(s.T(), tt.wantResp.RefreshToken, resp.RefreshToken)
 			if tt.validate != nil {
 				tt.validate(captured)
 			}
--- a/backend/internal/repository/usage_log_repo.go
+++ b/backend/internal/repository/usage_log_repo.go
@@ -129,51 +129,67 @@ type DashboardStats = usagestats.DashboardStats
 func (r *usageLogRepository) GetDashboardStats(ctx context.Context) (*DashboardStats, error) {
 	var stats DashboardStats
 	today := timezone.Today()
+	now := time.Now()

-	// 总用户数
-	r.db.WithContext(ctx).Model(&userModel{}).Count(&stats.TotalUsers)
+	// 合并用户统计查询
+	var userStats struct {
+		TotalUsers    int64 `gorm:"column:total_users"`
+		TodayNewUsers int64 `gorm:"column:today_new_users"`
+		ActiveUsers   int64 `gorm:"column:active_users"`
+	}
+	if err := r.db.WithContext(ctx).Raw(`
+		SELECT
+			COUNT(*) as total_users,
+			COUNT(CASE WHEN created_at >= ? THEN 1 END) as today_new_users,
+			(SELECT COUNT(DISTINCT user_id) FROM usage_logs WHERE created_at >= ?) as active_users
+		FROM users
+	`, today, today).Scan(&userStats).Error; err != nil {
+		return nil, err
+	}
+	stats.TotalUsers = userStats.TotalUsers
+	stats.TodayNewUsers = userStats.TodayNewUsers
+	stats.ActiveUsers = userStats.ActiveUsers

-	// 今日新增用户数
-	r.db.WithContext(ctx).Model(&userModel{}).
-		Where("created_at >= ?", today).
-		Count(&stats.TodayNewUsers)
+	// 合并API Key统计查询
+	var apiKeyStats struct {
+		TotalApiKeys  int64 `gorm:"column:total_api_keys"`
+		ActiveApiKeys int64 `gorm:"column:active_api_keys"`
+	}
+	if err := r.db.WithContext(ctx).Raw(`
+		SELECT
+			COUNT(*) as total_api_keys,
+			COUNT(CASE WHEN status = ? THEN 1 END) as active_api_keys
+		FROM api_keys
+	`, service.StatusActive).Scan(&apiKeyStats).Error; err != nil {
+		return nil, err
+	}
+	stats.TotalApiKeys = apiKeyStats.TotalApiKeys
+	stats.ActiveApiKeys = apiKeyStats.ActiveApiKeys

-	// 今日活跃用户数 (今日有请求的用户)
-	r.db.WithContext(ctx).Model(&usageLogModel{}).
-		Distinct("user_id").
-		Where("created_at >= ?", today).
-		Count(&stats.ActiveUsers)
-
-	// 总 API Key 数
-	r.db.WithContext(ctx).Model(&apiKeyModel{}).Count(&stats.TotalApiKeys)
-
-	// 活跃 API Key 数
-	r.db.WithContext(ctx).Model(&apiKeyModel{}).
-		Where("status = ?", service.StatusActive).
-		Count(&stats.ActiveApiKeys)
-
-	// 总账户数
-	r.db.WithContext(ctx).Model(&accountModel{}).Count(&stats.TotalAccounts)
-
-	// 正常账户数 (schedulable=true, status=active)
-	r.db.WithContext(ctx).Model(&accountModel{}).
-		Where("status = ? AND schedulable = ?", service.StatusActive, true).
-		Count(&stats.NormalAccounts)
-
-	// 异常账户数 (status=error)
-	r.db.WithContext(ctx).Model(&accountModel{}).
-		Where("status = ?", service.StatusError).
-		Count(&stats.ErrorAccounts)
-
-	// 限流账户数
-	r.db.WithContext(ctx).Model(&accountModel{}).
-		Where("rate_limited_at IS NOT NULL AND rate_limit_reset_at > ?", time.Now()).
-		Count(&stats.RateLimitAccounts)
-
-	// 过载账户数
-	r.db.WithContext(ctx).Model(&accountModel{}).
-		Where("overload_until IS NOT NULL AND overload_until > ?", time.Now()).
-		Count(&stats.OverloadAccounts)
+	// 合并账户统计查询
+	var accountStats struct {
+		TotalAccounts     int64 `gorm:"column:total_accounts"`
+		NormalAccounts    int64 `gorm:"column:normal_accounts"`
+		ErrorAccounts     int64 `gorm:"column:error_accounts"`
+		RateLimitAccounts int64 `gorm:"column:ratelimit_accounts"`
+		OverloadAccounts  int64 `gorm:"column:overload_accounts"`
+	}
+	if err := r.db.WithContext(ctx).Raw(`
+		SELECT
+			COUNT(*) as total_accounts,
+			COUNT(CASE WHEN status = ? AND schedulable = true THEN 1 END) as normal_accounts,
+			COUNT(CASE WHEN status = ? THEN 1 END) as error_accounts,
+			COUNT(CASE WHEN rate_limited_at IS NOT NULL AND rate_limit_reset_at > ? THEN 1 END) as ratelimit_accounts,
+			COUNT(CASE WHEN overload_until IS NOT NULL AND overload_until > ? THEN 1 END) as overload_accounts
+		FROM accounts
+	`, service.StatusActive, service.StatusError, now, now).Scan(&accountStats).Error; err != nil {
+		return nil, err
+	}
+	stats.TotalAccounts = accountStats.TotalAccounts
+	stats.NormalAccounts = accountStats.NormalAccounts
+	stats.ErrorAccounts = accountStats.ErrorAccounts
+	stats.RateLimitAccounts = accountStats.RateLimitAccounts
+	stats.OverloadAccounts = accountStats.OverloadAccounts

 	// 累计 Token 统计
 	var totalStats struct {
@@ -273,6 +289,88 @@ func (r *usageLogRepository) ListByUserAndTimeRange(ctx context.Context, userID
 	return usageLogModelsToService(logs), nil, err
 }

+// GetUserStatsAggregated returns aggregated usage statistics for a user using database-level aggregation
+func (r *usageLogRepository) GetUserStatsAggregated(ctx context.Context, userID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error) {
+	var stats struct {
+		TotalRequests     int64   `gorm:"column:total_requests"`
+		TotalInputTokens  int64   `gorm:"column:total_input_tokens"`
+		TotalOutputTokens int64   `gorm:"column:total_output_tokens"`
+		TotalCacheTokens  int64   `gorm:"column:total_cache_tokens"`
+		TotalCost         float64 `gorm:"column:total_cost"`
+		TotalActualCost   float64 `gorm:"column:total_actual_cost"`
+		AverageDurationMs float64 `gorm:"column:avg_duration_ms"`
+	}
+
+	err := r.db.WithContext(ctx).Model(&usageLogModel{}).
+		Select(`
+			COUNT(*) as total_requests,
+			COALESCE(SUM(input_tokens), 0) as total_input_tokens,
+			COALESCE(SUM(output_tokens), 0) as total_output_tokens,
+			COALESCE(SUM(cache_creation_tokens + cache_read_tokens), 0) as total_cache_tokens,
+			COALESCE(SUM(total_cost), 0) as total_cost,
+			COALESCE(SUM(actual_cost), 0) as total_actual_cost,
+			COALESCE(AVG(COALESCE(duration_ms, 0)), 0) as avg_duration_ms
+		`).
+		Where("user_id = ? AND created_at >= ? AND created_at < ?", userID, startTime, endTime).
+		Scan(&stats).Error
+
+	if err != nil {
+		return nil, err
+	}
+
+	return &usagestats.UsageStats{
+		TotalRequests:     stats.TotalRequests,
+		TotalInputTokens:  stats.TotalInputTokens,
+		TotalOutputTokens: stats.TotalOutputTokens,
+		TotalCacheTokens:  stats.TotalCacheTokens,
+		TotalTokens:       stats.TotalInputTokens + stats.TotalOutputTokens + stats.TotalCacheTokens,
+		TotalCost:         stats.TotalCost,
+		TotalActualCost:   stats.TotalActualCost,
+		AverageDurationMs: stats.AverageDurationMs,
+	}, nil
+}
+
+// GetApiKeyStatsAggregated returns aggregated usage statistics for an API key using database-level aggregation
+func (r *usageLogRepository) GetApiKeyStatsAggregated(ctx context.Context, apiKeyID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error) {
+	var stats struct {
+		TotalRequests     int64   `gorm:"column:total_requests"`
+		TotalInputTokens  int64   `gorm:"column:total_input_tokens"`
+		TotalOutputTokens int64   `gorm:"column:total_output_tokens"`
+		TotalCacheTokens  int64   `gorm:"column:total_cache_tokens"`
+		TotalCost         float64 `gorm:"column:total_cost"`
+		TotalActualCost   float64 `gorm:"column:total_actual_cost"`
+		AverageDurationMs float64 `gorm:"column:avg_duration_ms"`
+	}
+
+	err := r.db.WithContext(ctx).Model(&usageLogModel{}).
+		Select(`
+			COUNT(*) as total_requests,
+			COALESCE(SUM(input_tokens), 0) as total_input_tokens,
+			COALESCE(SUM(output_tokens), 0) as total_output_tokens,
+			COALESCE(SUM(cache_creation_tokens + cache_read_tokens), 0) as total_cache_tokens,
+			COALESCE(SUM(total_cost), 0) as total_cost,
+			COALESCE(SUM(actual_cost), 0) as total_actual_cost,
+			COALESCE(AVG(COALESCE(duration_ms, 0)), 0) as avg_duration_ms
+		`).
+		Where("api_key_id = ? AND created_at >= ? AND created_at < ?", apiKeyID, startTime, endTime).
+		Scan(&stats).Error
+
+	if err != nil {
+		return nil, err
+	}
+
+	return &usagestats.UsageStats{
+		TotalRequests:     stats.TotalRequests,
+		TotalInputTokens:  stats.TotalInputTokens,
+		TotalOutputTokens: stats.TotalOutputTokens,
+		TotalCacheTokens:  stats.TotalCacheTokens,
+		TotalTokens:       stats.TotalInputTokens + stats.TotalOutputTokens + stats.TotalCacheTokens,
+		TotalCost:         stats.TotalCost,
+		TotalActualCost:   stats.TotalActualCost,
+		AverageDurationMs: stats.AverageDurationMs,
+	}, nil
+}
+
 func (r *usageLogRepository) ListByApiKeyAndTimeRange(ctx context.Context, apiKeyID int64, startTime, endTime time.Time) ([]service.UsageLog, *pagination.PaginationResult, error) {
 	var logs []usageLogModel
 	err := r.db.WithContext(ctx).
@@ -631,6 +729,21 @@ func (r *usageLogRepository) ListWithFilters(ctx context.Context, params paginat
 	if filters.ApiKeyID > 0 {
 		db = db.Where("api_key_id = ?", filters.ApiKeyID)
 	}
+	if filters.AccountID > 0 {
+		db = db.Where("account_id = ?", filters.AccountID)
+	}
+	if filters.GroupID > 0 {
+		db = db.Where("group_id = ?", filters.GroupID)
+	}
+	if filters.Model != "" {
+		db = db.Where("model = ?", filters.Model)
+	}
+	if filters.Stream != nil {
+		db = db.Where("stream = ?", *filters.Stream)
+	}
+	if filters.BillingType != nil {
+		db = db.Where("billing_type = ?", *filters.BillingType)
+	}
 	if filters.StartTime != nil {
 		db = db.Where("created_at >= ?", *filters.StartTime)
 	}
@@ -642,8 +755,8 @@ func (r *usageLogRepository) ListWithFilters(ctx context.Context, params paginat
 		return nil, nil, err
 	}

-	// Preload user and api_key for display
-	if err := db.Preload("User").Preload("ApiKey").
+	// Preload user, api_key, account, and group for display
+	if err := db.Preload("User").Preload("ApiKey").Preload("Account").Preload("Group").
 		Offset(params.Offset()).Limit(params.Limit()).
 		Order("id DESC").Find(&logs).Error; err != nil {
 		return nil, nil, err
--- a/backend/internal/server/api_contract_test.go
+++ b/backend/internal/server/api_contract_test.go
@@ -788,6 +788,25 @@ func (r *stubApiKeyRepo) ListByUserID(ctx context.Context, userID int64, params
 	}, nil
 }

+func (r *stubApiKeyRepo) VerifyOwnership(ctx context.Context, userID int64, apiKeyIDs []int64) ([]int64, error) {
+	if len(apiKeyIDs) == 0 {
+		return []int64{}, nil
+	}
+	seen := make(map[int64]struct{}, len(apiKeyIDs))
+	out := make([]int64, 0, len(apiKeyIDs))
+	for _, id := range apiKeyIDs {
+		if _, ok := seen[id]; ok {
+			continue
+		}
+		seen[id] = struct{}{}
+		key, ok := r.byID[id]
+		if ok && key.UserID == userID {
+			out = append(out, id)
+		}
+	}
+	return out, nil
+}
+
 func (r *stubApiKeyRepo) CountByUserID(ctx context.Context, userID int64) (int64, error) {
 	var count int64
 	for _, key := range r.byID {
@@ -903,6 +922,55 @@ func (r *stubUsageLogRepo) GetUserUsageTrend(ctx context.Context, startTime, end
 	return nil, errors.New("not implemented")
 }

+func (r *stubUsageLogRepo) GetUserStatsAggregated(ctx context.Context, userID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error) {
+	logs := r.userLogs[userID]
+	if len(logs) == 0 {
+		return &usagestats.UsageStats{}, nil
+	}
+
+	var totalRequests int64
+	var totalInputTokens int64
+	var totalOutputTokens int64
+	var totalCacheTokens int64
+	var totalCost float64
+	var totalActualCost float64
+	var totalDuration int64
+	var durationCount int64
+
+	for _, log := range logs {
+		totalRequests++
+		totalInputTokens += int64(log.InputTokens)
+		totalOutputTokens += int64(log.OutputTokens)
+		totalCacheTokens += int64(log.CacheCreationTokens + log.CacheReadTokens)
+		totalCost += log.TotalCost
+		totalActualCost += log.ActualCost
+		if log.DurationMs != nil {
+			totalDuration += int64(*log.DurationMs)
+			durationCount++
+		}
+	}
+
+	var avgDuration float64
+	if durationCount > 0 {
+		avgDuration = float64(totalDuration) / float64(durationCount)
+	}
+
+	return &usagestats.UsageStats{
+		TotalRequests:     totalRequests,
+		TotalInputTokens:  totalInputTokens,
+		TotalOutputTokens: totalOutputTokens,
+		TotalCacheTokens:  totalCacheTokens,
+		TotalTokens:       totalInputTokens + totalOutputTokens + totalCacheTokens,
+		TotalCost:         totalCost,
+		TotalActualCost:   totalActualCost,
+		AverageDurationMs: avgDuration,
+	}, nil
+}
+
+func (r *stubUsageLogRepo) GetApiKeyStatsAggregated(ctx context.Context, apiKeyID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error) {
+	return nil, errors.New("not implemented")
+}
+
 func (r *stubUsageLogRepo) GetBatchUserUsageStats(ctx context.Context, userIDs []int64) (map[int64]*usagestats.BatchUserUsageStats, error) {
 	return nil, errors.New("not implemented")
 }
@@ -924,7 +992,40 @@ func (r *stubUsageLogRepo) GetUserModelStats(ctx context.Context, userID int64,
 }

 func (r *stubUsageLogRepo) ListWithFilters(ctx context.Context, params pagination.PaginationParams, filters usagestats.UsageLogFilters) ([]service.UsageLog, *pagination.PaginationResult, error) {
-	return nil, nil, errors.New("not implemented")
+	logs := r.userLogs[filters.UserID]
+
+	// Apply filters
+	var filtered []service.UsageLog
+	for _, log := range logs {
+		// Apply ApiKeyID filter
+		if filters.ApiKeyID > 0 && log.ApiKeyID != filters.ApiKeyID {
+			continue
+		}
+		// Apply Model filter
+		if filters.Model != "" && log.Model != filters.Model {
+			continue
+		}
+		// Apply Stream filter
+		if filters.Stream != nil && log.Stream != *filters.Stream {
+			continue
+		}
+		// Apply BillingType filter
+		if filters.BillingType != nil && log.BillingType != *filters.BillingType {
+			continue
+		}
+		// Apply time range filters
+		if filters.StartTime != nil && log.CreatedAt.Before(*filters.StartTime) {
+			continue
+		}
+		if filters.EndTime != nil && log.CreatedAt.After(*filters.EndTime) {
+			continue
+		}
+		filtered = append(filtered, log)
+	}
+
+	total := int64(len(filtered))
+	out := paginateLogs(filtered, params)
+	return out, paginationResult(total, params), nil
 }

 func (r *stubUsageLogRepo) GetGlobalStats(ctx context.Context, startTime, endTime time.Time) (*usagestats.UsageStats, error) {
--- a/backend/internal/server/middleware/api_key_auth_google.go
+++ b/backend/internal/server/middleware/api_key_auth_google.go
@@ -8,7 +8,6 @@ import (
 	"github.com/Wei-Shaw/sub2api/internal/service"

 	"github.com/gin-gonic/gin"
-	"gorm.io/gorm"
 )

 // ApiKeyAuthGoogle is a Google-style error wrapper for API key auth.
@@ -30,7 +29,7 @@ func ApiKeyAuthWithSubscriptionGoogle(apiKeyService *service.ApiKeyService, subs

 		apiKey, err := apiKeyService.GetByKey(c.Request.Context(), apiKeyString)
 		if err != nil {
-			if errors.Is(err, gorm.ErrRecordNotFound) {
+			if errors.Is(err, service.ErrApiKeyNotFound) {
 				abortWithGoogleError(c, 401, "Invalid API key")
 				return
 			}
@@ -81,7 +80,11 @@ func ApiKeyAuthWithSubscriptionGoogle(apiKeyService *service.ApiKeyService, subs
 		}

 		c.Set(string(ContextKeyApiKey), apiKey)
-		c.Set(string(ContextKeyUser), apiKey.User)
+		c.Set(string(ContextKeyUser), AuthSubject{
+			UserID:      apiKey.User.ID,
+			Concurrency: apiKey.User.Concurrency,
+		})
+		c.Set(string(ContextKeyUserRole), apiKey.User.Role)
 		c.Next()
 	}
 }
--- a/backend/internal/service/account.go
+++ b/backend/internal/service/account.go
@@ -1,6 +1,10 @@
 package service

-import "time"
+import (
+	"encoding/json"
+	"strconv"
+	"time"
+)

 type Account struct {
 	ID           int64
@@ -82,12 +86,28 @@ func (a *Account) GetCredential(key string) string {
 	if a.Credentials == nil {
 		return ""
 	}
-	if v, ok := a.Credentials[key]; ok {
-		if s, ok := v.(string); ok {
-			return s
-		}
+	v, ok := a.Credentials[key]
+	if !ok || v == nil {
+		return ""
+	}
+
+	// 支持多种类型（兼容历史数据中 expires_at 等字段可能是数字或字符串）
+	switch val := v.(type) {
+	case string:
+		return val
+	case json.Number:
+		// GORM datatypes.JSONMap 使用 UseNumber() 解析，数字类型为 json.Number
+		return val.String()
+	case float64:
+		// JSON 解析后数字默认为 float64
+		return strconv.FormatInt(int64(val), 10)
+	case int64:
+		return strconv.FormatInt(val, 10)
+	case int:
+		return strconv.Itoa(val)
+	default:
+		return ""
 	}
-	return ""
 }

 func (a *Account) GetModelMapping() map[string]string {
--- a/backend/internal/service/account_service.go
+++ b/backend/internal/service/account_service.go
@@ -29,6 +29,7 @@ type AccountRepository interface {
 	ListByPlatform(ctx context.Context, platform string) ([]Account, error)

 	UpdateLastUsed(ctx context.Context, id int64) error
+	BatchUpdateLastUsed(ctx context.Context, updates map[int64]time.Time) error
 	SetError(ctx context.Context, id int64, errorMsg string) error
 	SetSchedulable(ctx context.Context, id int64, schedulable bool) error
 	BindGroups(ctx context.Context, accountID int64, groupIDs []int64) error
@@ -208,20 +209,23 @@ func (s *AccountService) Update(ctx context.Context, id int64, req UpdateAccount
 		account.Status = *req.Status
 	}

-	if err := s.accountRepo.Update(ctx, account); err != nil {
-		return nil, fmt.Errorf("update account: %w", err)
-	}
-
-	// 更新分组绑定
+	// 先验证分组是否存在（在任何写操作之前）
 	if req.GroupIDs != nil {
-		// 验证分组是否存在
 		for _, groupID := range *req.GroupIDs {
 			_, err := s.groupRepo.GetByID(ctx, groupID)
 			if err != nil {
 				return nil, fmt.Errorf("get group: %w", err)
 			}
 		}
+	}

+	// 执行更新
+	if err := s.accountRepo.Update(ctx, account); err != nil {
+		return nil, fmt.Errorf("update account: %w", err)
+	}
+
+	// 绑定分组
+	if req.GroupIDs != nil {
 		if err := s.accountRepo.BindGroups(ctx, account.ID, *req.GroupIDs); err != nil {
 			return nil, fmt.Errorf("bind groups: %w", err)
 		}
--- a/backend/internal/service/account_usage_service.go
+++ b/backend/internal/service/account_usage_service.go
@@ -48,6 +48,10 @@ type UsageLogRepository interface {

 	// Account stats
 	GetAccountUsageStats(ctx context.Context, accountID int64, startTime, endTime time.Time) (*usagestats.AccountUsageStatsResponse, error)
+
+	// Aggregated stats (optimized)
+	GetUserStatsAggregated(ctx context.Context, userID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error)
+	GetApiKeyStatsAggregated(ctx context.Context, apiKeyID int64, startTime, endTime time.Time) (*usagestats.UsageStats, error)
 }

 // usageCache 用于缓存usage数据
--- a/backend/internal/service/admin_service.go
+++ b/backend/internal/service/admin_service.go
@@ -652,11 +652,20 @@ func (s *adminServiceImpl) UpdateAccount(ctx context.Context, id int64, input *U
 		account.Status = input.Status
 	}

+	// 先验证分组是否存在（在任何写操作之前）
+	if input.GroupIDs != nil {
+		for _, groupID := range *input.GroupIDs {
+			if _, err := s.groupRepo.GetByID(ctx, groupID); err != nil {
+				return nil, fmt.Errorf("get group: %w", err)
+			}
+		}
+	}
+
 	if err := s.accountRepo.Update(ctx, account); err != nil {
 		return nil, err
 	}

-	// 更新分组绑定
+	// 绑定分组
 	if input.GroupIDs != nil {
 		if err := s.accountRepo.BindGroups(ctx, account.ID, *input.GroupIDs); err != nil {
 			return nil, err
--- a/backend/internal/service/api_key_service.go
+++ b/backend/internal/service/api_key_service.go
@@ -34,6 +34,7 @@ type ApiKeyRepository interface {
 	Delete(ctx context.Context, id int64) error

 	ListByUserID(ctx context.Context, userID int64, params pagination.PaginationParams) ([]ApiKey, *pagination.PaginationResult, error)
+	VerifyOwnership(ctx context.Context, userID int64, apiKeyIDs []int64) ([]int64, error)
 	CountByUserID(ctx context.Context, userID int64) (int64, error)
 	ExistsByKey(ctx context.Context, key string) (bool, error)
 	ListByGroupID(ctx context.Context, groupID int64, params pagination.PaginationParams) ([]ApiKey, *pagination.PaginationResult, error)
@@ -256,6 +257,18 @@ func (s *ApiKeyService) List(ctx context.Context, userID int64, params paginatio
 	return keys, pagination, nil
 }

+func (s *ApiKeyService) VerifyOwnership(ctx context.Context, userID int64, apiKeyIDs []int64) ([]int64, error) {
+	if len(apiKeyIDs) == 0 {
+		return []int64{}, nil
+	}
+
+	validIDs, err := s.apiKeyRepo.VerifyOwnership(ctx, userID, apiKeyIDs)
+	if err != nil {
+		return nil, fmt.Errorf("verify api key ownership: %w", err)
+	}
+	return validIDs, nil
+}
+
 // GetByID 根据ID获取API Key
 func (s *ApiKeyService) GetByID(ctx context.Context, id int64) (*ApiKey, error) {
 	apiKey, err := s.apiKeyRepo.GetByID(ctx, id)
--- a/backend/internal/service/deferred_service.go
+++ b/backend/internal/service/deferred_service.go
@@ -0,0 +1,76 @@
+package service
+
+import (
+	"context"
+	"log"
+	"sync"
+	"time"
+)
+
+// DeferredService provides deferred batch update functionality
+type DeferredService struct {
+	accountRepo AccountRepository
+	timingWheel *TimingWheelService
+	interval    time.Duration
+
+	lastUsedUpdates sync.Map
+}
+
+// NewDeferredService creates a new DeferredService instance
+func NewDeferredService(accountRepo AccountRepository, timingWheel *TimingWheelService, interval time.Duration) *DeferredService {
+	return &DeferredService{
+		accountRepo: accountRepo,
+		timingWheel: timingWheel,
+		interval:    interval,
+	}
+}
+
+// Start starts the deferred service
+func (s *DeferredService) Start() {
+	s.timingWheel.ScheduleRecurring("deferred:last_used", s.interval, s.flushLastUsed)
+	log.Printf("[DeferredService] Started (interval: %v)", s.interval)
+}
+
+// Stop stops the deferred service
+func (s *DeferredService) Stop() {
+	s.timingWheel.Cancel("deferred:last_used")
+	s.flushLastUsed()
+	log.Printf("[DeferredService] Service stopped")
+}
+
+func (s *DeferredService) ScheduleLastUsedUpdate(accountID int64) {
+	s.lastUsedUpdates.Store(accountID, time.Now())
+}
+
+func (s *DeferredService) flushLastUsed() {
+	updates := make(map[int64]time.Time)
+	s.lastUsedUpdates.Range(func(key, value any) bool {
+		id, ok := key.(int64)
+		if !ok {
+			return true
+		}
+		ts, ok := value.(time.Time)
+		if !ok {
+			return true
+		}
+		updates[id] = ts
+		s.lastUsedUpdates.Delete(key)
+		return true
+	})
+
+	if len(updates) == 0 {
+		return
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	if err := s.accountRepo.BatchUpdateLastUsed(ctx, updates); err != nil {
+		log.Printf("[DeferredService] BatchUpdateLastUsed failed (%d accounts): %v", len(updates), err)
+		for id, ts := range updates {
+			s.lastUsedUpdates.Store(id, ts)
+		}
+	} else {
+		log.Printf("[DeferredService] BatchUpdateLastUsed flushed %d accounts", len(updates))
+	}
+}
--- a/backend/internal/service/gateway_service.go
+++ b/backend/internal/service/gateway_service.go
@@ -81,6 +81,15 @@ type ForwardResult struct {
 	FirstTokenMs *int // 首字时间（流式请求）
 }

+// UpstreamFailoverError indicates an upstream error that should trigger account failover.
+type UpstreamFailoverError struct {
+	StatusCode int
+}
+
+func (e *UpstreamFailoverError) Error() string {
+	return fmt.Sprintf("upstream error: %d (failover)", e.StatusCode)
+}
+
 // GatewayService handles API gateway operations
 type GatewayService struct {
 	accountRepo         AccountRepository
@@ -94,6 +103,7 @@ type GatewayService struct {
 	billingCacheService *BillingCacheService
 	identityService     *IdentityService
 	httpUpstream        HTTPUpstream
+	deferredService     *DeferredService
 }

 // NewGatewayService creates a new GatewayService
@@ -109,6 +119,7 @@ func NewGatewayService(
 	billingCacheService *BillingCacheService,
 	identityService *IdentityService,
 	httpUpstream HTTPUpstream,
+	deferredService *DeferredService,
 ) *GatewayService {
 	return &GatewayService{
 		accountRepo:         accountRepo,
@@ -122,6 +133,7 @@ func NewGatewayService(
 		billingCacheService: billingCacheService,
 		identityService:     identityService,
 		httpUpstream:        httpUpstream,
+		deferredService:     deferredService,
 	}
 }

@@ -274,19 +286,26 @@ func (s *GatewayService) SelectAccount(ctx context.Context, groupID *int64, sess

 // SelectAccountForModel 选择支持指定模型的账号（粘性会话+优先级+模型映射）
 func (s *GatewayService) SelectAccountForModel(ctx context.Context, groupID *int64, sessionHash string, requestedModel string) (*Account, error) {
+	return s.SelectAccountForModelWithExclusions(ctx, groupID, sessionHash, requestedModel, nil)
+}
+
+// SelectAccountForModelWithExclusions selects an account supporting the requested model while excluding specified accounts.
+func (s *GatewayService) SelectAccountForModelWithExclusions(ctx context.Context, groupID *int64, sessionHash string, requestedModel string, excludedIDs map[int64]struct{}) (*Account, error) {
 	// 1. 查询粘性会话
 	if sessionHash != "" {
 		accountID, err := s.cache.GetSessionAccountID(ctx, sessionHash)
 		if err == nil && accountID > 0 {
-			account, err := s.accountRepo.GetByID(ctx, accountID)
-			// 使用IsSchedulable代替IsActive，确保限流/过载账号不会被选中
-			// 同时检查模型支持
-			if err == nil && account.IsSchedulable() && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
-				// 续期粘性会话
-				if err := s.cache.RefreshSessionTTL(ctx, sessionHash, stickySessionTTL); err != nil {
-					log.Printf("refresh session ttl failed: session=%s err=%v", sessionHash, err)
+			if _, excluded := excludedIDs[accountID]; !excluded {
+				account, err := s.accountRepo.GetByID(ctx, accountID)
+				// 使用IsSchedulable代替IsActive，确保限流/过载账号不会被选中
+				// 同时检查模型支持
+				if err == nil && account.IsSchedulable() && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
+					// 续期粘性会话
+					if err := s.cache.RefreshSessionTTL(ctx, sessionHash, stickySessionTTL); err != nil {
+						log.Printf("refresh session ttl failed: session=%s err=%v", sessionHash, err)
+					}
+					return account, nil
 				}
-				return account, nil
 			}
 		}
 	}
@@ -307,6 +326,9 @@ func (s *GatewayService) SelectAccountForModel(ctx context.Context, groupID *int
 	var selected *Account
 	for i := range accounts {
 		acc := &accounts[i]
+		if _, excluded := excludedIDs[acc.ID]; excluded {
+			continue
+		}
 		// 检查模型支持
 		if requestedModel != "" && !acc.IsModelSupported(requestedModel) {
 			continue
@@ -394,6 +416,16 @@ func (s *GatewayService) shouldRetryUpstreamError(account *Account, statusCode i
 	return !account.ShouldHandleErrorCode(statusCode)
 }

+// shouldFailoverUpstreamError determines whether an upstream error should trigger account failover.
+func (s *GatewayService) shouldFailoverUpstreamError(statusCode int) bool {
+	switch statusCode {
+	case 401, 403, 429, 529:
+		return true
+	default:
+		return statusCode >= 500
+	}
+}
+
 // Forward 转发请求到Claude API
 func (s *GatewayService) Forward(ctx context.Context, c *gin.Context, account *Account, body []byte) (*ForwardResult, error) {
 	startTime := time.Now()
@@ -478,9 +510,19 @@ func (s *GatewayService) Forward(ctx context.Context, c *gin.Context, account *A

 	// 处理重试耗尽的情况
 	if resp.StatusCode >= 400 && s.shouldRetryUpstreamError(account, resp.StatusCode) {
+		if s.shouldFailoverUpstreamError(resp.StatusCode) {
+			s.handleRetryExhaustedSideEffects(ctx, resp, account)
+			return nil, &UpstreamFailoverError{StatusCode: resp.StatusCode}
+		}
 		return s.handleRetryExhaustedError(ctx, resp, c, account)
 	}

+	// 处理可切换账号的错误
+	if resp.StatusCode >= 400 && s.shouldFailoverUpstreamError(resp.StatusCode) {
+		s.handleFailoverSideEffects(ctx, resp, account)
+		return nil, &UpstreamFailoverError{StatusCode: resp.StatusCode}
+	}
+
 	// 处理错误响应（不可重试的错误）
 	if resp.StatusCode >= 400 {
 		return s.handleErrorResponse(ctx, resp, c, account)
@@ -692,10 +734,7 @@ func (s *GatewayService) handleErrorResponse(ctx context.Context, resp *http.Res
 	return nil, fmt.Errorf("upstream error: %d", resp.StatusCode)
 }

-// handleRetryExhaustedError 处理重试耗尽后的错误
-// OAuth 403：标记账号异常
-// API Key 未配置错误码：仅返回错误，不标记账号
-func (s *GatewayService) handleRetryExhaustedError(ctx context.Context, resp *http.Response, c *gin.Context, account *Account) (*ForwardResult, error) {
+func (s *GatewayService) handleRetryExhaustedSideEffects(ctx context.Context, resp *http.Response, account *Account) {
 	body, _ := io.ReadAll(resp.Body)
 	statusCode := resp.StatusCode

@@ -707,6 +746,18 @@ func (s *GatewayService) handleRetryExhaustedError(ctx context.Context, resp *ht
 		// API Key 未配置错误码：不标记账号状态
 		log.Printf("Account %d: upstream error %d after %d retries (not marking account)", account.ID, statusCode, maxRetries)
 	}
+}
+
+func (s *GatewayService) handleFailoverSideEffects(ctx context.Context, resp *http.Response, account *Account) {
+	body, _ := io.ReadAll(resp.Body)
+	s.rateLimitService.HandleUpstreamError(ctx, account, resp.StatusCode, resp.Header, body)
+}
+
+// handleRetryExhaustedError 处理重试耗尽后的错误
+// OAuth 403：标记账号异常
+// API Key 未配置错误码：仅返回错误，不标记账号
+func (s *GatewayService) handleRetryExhaustedError(ctx context.Context, resp *http.Response, c *gin.Context, account *Account) (*ForwardResult, error) {
+	s.handleRetryExhaustedSideEffects(ctx, resp, account)

 	// 返回统一的重试耗尽错误响应
 	c.JSON(http.StatusBadGateway, gin.H{
@@ -717,7 +768,7 @@ func (s *GatewayService) handleRetryExhaustedError(ctx context.Context, resp *ht
 		},
 	})

-	return nil, fmt.Errorf("upstream error: %d (retries exhausted)", statusCode)
+	return nil, fmt.Errorf("upstream error: %d (retries exhausted)", resp.StatusCode)
 }

 // streamingResult 流式响应结果
@@ -1047,10 +1098,8 @@ func (s *GatewayService) RecordUsage(ctx context.Context, input *RecordUsageInpu
 		}
 	}

-	// 更新账号最后使用时间
-	if err := s.accountRepo.UpdateLastUsed(ctx, account.ID); err != nil {
-		log.Printf("Update last used failed: %v", err)
-	}
+	// Schedule batch update for account last_used_at
+	s.deferredService.ScheduleLastUsedUpdate(account.ID)

 	return nil
 }
--- a/backend/internal/service/gemini_messages_compat_service.go
+++ b/backend/internal/service/gemini_messages_compat_service.go
@@ -62,14 +62,20 @@ func (s *GeminiMessagesCompatService) GetTokenProvider() *GeminiTokenProvider {
 }

 func (s *GeminiMessagesCompatService) SelectAccountForModel(ctx context.Context, groupID *int64, sessionHash string, requestedModel string) (*Account, error) {
+	return s.SelectAccountForModelWithExclusions(ctx, groupID, sessionHash, requestedModel, nil)
+}
+
+func (s *GeminiMessagesCompatService) SelectAccountForModelWithExclusions(ctx context.Context, groupID *int64, sessionHash string, requestedModel string, excludedIDs map[int64]struct{}) (*Account, error) {
 	cacheKey := "gemini:" + sessionHash
 	if sessionHash != "" {
 		accountID, err := s.cache.GetSessionAccountID(ctx, cacheKey)
 		if err == nil && accountID > 0 {
-			account, err := s.accountRepo.GetByID(ctx, accountID)
-			if err == nil && account.IsSchedulable() && account.Platform == PlatformGemini && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
-				_ = s.cache.RefreshSessionTTL(ctx, cacheKey, geminiStickySessionTTL)
-				return account, nil
+			if _, excluded := excludedIDs[accountID]; !excluded {
+				account, err := s.accountRepo.GetByID(ctx, accountID)
+				if err == nil && account.IsSchedulable() && account.Platform == PlatformGemini && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
+					_ = s.cache.RefreshSessionTTL(ctx, cacheKey, geminiStickySessionTTL)
+					return account, nil
+				}
 			}
 		}
 	}
@@ -88,6 +94,9 @@ func (s *GeminiMessagesCompatService) SelectAccountForModel(ctx context.Context,
 	var selected *Account
 	for i := range accounts {
 		acc := &accounts[i]
+		if _, excluded := excludedIDs[acc.ID]; excluded {
+			continue
+		}
 		if requestedModel != "" && !acc.IsModelSupported(requestedModel) {
 			continue
 		}
@@ -425,6 +434,9 @@ func (s *GeminiMessagesCompatService) Forward(ctx context.Context, c *gin.Contex
 	if resp.StatusCode >= 400 {
 		respBody, _ := io.ReadAll(io.LimitReader(resp.Body, 2<<20))
 		s.handleGeminiUpstreamError(ctx, account, resp.StatusCode, resp.Header, respBody)
+		if s.shouldFailoverGeminiUpstreamError(resp.StatusCode) {
+			return nil, &UpstreamFailoverError{StatusCode: resp.StatusCode}
+		}
 		return nil, s.writeGeminiMappedError(c, resp.StatusCode, respBody)
 	}

@@ -724,6 +736,10 @@ func (s *GeminiMessagesCompatService) ForwardNative(ctx context.Context, c *gin.
 			}, nil
 		}

+		if s.shouldFailoverGeminiUpstreamError(resp.StatusCode) {
+			return nil, &UpstreamFailoverError{StatusCode: resp.StatusCode}
+		}
+
 		respBody = unwrapIfNeeded(isOAuth, respBody)
 		contentType := resp.Header.Get("Content-Type")
 		if contentType == "" {
@@ -795,6 +811,15 @@ func (s *GeminiMessagesCompatService) shouldRetryGeminiUpstreamError(account *Ac
 	}
 }

+func (s *GeminiMessagesCompatService) shouldFailoverGeminiUpstreamError(statusCode int) bool {
+	switch statusCode {
+	case 401, 403, 429, 529:
+		return true
+	default:
+		return statusCode >= 500
+	}
+}
+
 func sleepGeminiBackoff(attempt int) {
 	delay := geminiRetryBaseDelay * time.Duration(1<<uint(attempt-1))
 	if delay > geminiRetryMaxDelay {
--- a/backend/internal/service/oauth_service.go
+++ b/backend/internal/service/oauth_service.go
@@ -20,7 +20,7 @@ type OpenAIOAuthClient interface {
 type ClaudeOAuthClient interface {
 	GetOrganizationUUID(ctx context.Context, sessionKey, proxyURL string) (string, error)
 	GetAuthorizationCode(ctx context.Context, sessionKey, orgUUID, scope, codeChallenge, state, proxyURL string) (string, error)
-	ExchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string) (*oauth.TokenResponse, error)
+	ExchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string, isSetupToken bool) (*oauth.TokenResponse, error)
 	RefreshToken(ctx context.Context, refreshToken, proxyURL string) (*oauth.TokenResponse, error)
 }

@@ -142,8 +142,11 @@ func (s *OAuthService) ExchangeCode(ctx context.Context, input *ExchangeCodeInpu
 		}
 	}

+	// Determine if this is a setup token (scope is inference only)
+	isSetupToken := session.Scope == oauth.ScopeInference
+
 	// Exchange code for token
-	tokenInfo, err := s.exchangeCodeForToken(ctx, input.Code, session.CodeVerifier, session.State, proxyURL)
+	tokenInfo, err := s.exchangeCodeForToken(ctx, input.Code, session.CodeVerifier, session.State, proxyURL, isSetupToken)
 	if err != nil {
 		return nil, err
 	}
@@ -172,10 +175,12 @@ func (s *OAuthService) CookieAuth(ctx context.Context, input *CookieAuthInput) (
 		}
 	}

-	// Determine scope
+	// Determine scope and if this is a setup token
 	scope := fmt.Sprintf("%s %s", oauth.ScopeProfile, oauth.ScopeInference)
+	isSetupToken := false
 	if input.Scope == "inference" {
 		scope = oauth.ScopeInference
+		isSetupToken = true
 	}

 	// Step 1: Get organization info using sessionKey
@@ -203,7 +208,7 @@ func (s *OAuthService) CookieAuth(ctx context.Context, input *CookieAuthInput) (
 	}

 	// Step 4: Exchange code for token
-	tokenInfo, err := s.exchangeCodeForToken(ctx, authCode, codeVerifier, state, proxyURL)
+	tokenInfo, err := s.exchangeCodeForToken(ctx, authCode, codeVerifier, state, proxyURL, isSetupToken)
 	if err != nil {
 		return nil, fmt.Errorf("failed to exchange code: %w", err)
 	}
@@ -228,8 +233,8 @@ func (s *OAuthService) getAuthorizationCode(ctx context.Context, sessionKey, org
 }

 // exchangeCodeForToken exchanges authorization code for tokens
-func (s *OAuthService) exchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string) (*TokenInfo, error) {
-	tokenResp, err := s.oauthClient.ExchangeCodeForToken(ctx, code, codeVerifier, state, proxyURL)
+func (s *OAuthService) exchangeCodeForToken(ctx context.Context, code, codeVerifier, state, proxyURL string, isSetupToken bool) (*TokenInfo, error) {
+	tokenResp, err := s.oauthClient.ExchangeCodeForToken(ctx, code, codeVerifier, state, proxyURL, isSetupToken)
 	if err != nil {
 		return nil, err
 	}
--- a/backend/internal/service/openai_gateway_service.go
+++ b/backend/internal/service/openai_gateway_service.go
@@ -83,6 +83,7 @@ type OpenAIGatewayService struct {
 	rateLimitService    *RateLimitService
 	billingCacheService *BillingCacheService
 	httpUpstream        HTTPUpstream
+	deferredService     *DeferredService
 }

 // NewOpenAIGatewayService creates a new OpenAIGatewayService
@@ -97,6 +98,7 @@ func NewOpenAIGatewayService(
 	rateLimitService *RateLimitService,
 	billingCacheService *BillingCacheService,
 	httpUpstream HTTPUpstream,
+	deferredService *DeferredService,
 ) *OpenAIGatewayService {
 	return &OpenAIGatewayService{
 		accountRepo:         accountRepo,
@@ -109,6 +111,7 @@ func NewOpenAIGatewayService(
 		rateLimitService:    rateLimitService,
 		billingCacheService: billingCacheService,
 		httpUpstream:        httpUpstream,
+		deferredService:     deferredService,
 	}
 }

@@ -129,15 +132,22 @@ func (s *OpenAIGatewayService) SelectAccount(ctx context.Context, groupID *int64

 // SelectAccountForModel selects an account supporting the requested model
 func (s *OpenAIGatewayService) SelectAccountForModel(ctx context.Context, groupID *int64, sessionHash string, requestedModel string) (*Account, error) {
+	return s.SelectAccountForModelWithExclusions(ctx, groupID, sessionHash, requestedModel, nil)
+}
+
+// SelectAccountForModelWithExclusions selects an account supporting the requested model while excluding specified accounts.
+func (s *OpenAIGatewayService) SelectAccountForModelWithExclusions(ctx context.Context, groupID *int64, sessionHash string, requestedModel string, excludedIDs map[int64]struct{}) (*Account, error) {
 	// 1. Check sticky session
 	if sessionHash != "" {
 		accountID, err := s.cache.GetSessionAccountID(ctx, "openai:"+sessionHash)
 		if err == nil && accountID > 0 {
-			account, err := s.accountRepo.GetByID(ctx, accountID)
-			if err == nil && account.IsSchedulable() && account.IsOpenAI() && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
-				// Refresh sticky session TTL
-				_ = s.cache.RefreshSessionTTL(ctx, "openai:"+sessionHash, openaiStickySessionTTL)
-				return account, nil
+			if _, excluded := excludedIDs[accountID]; !excluded {
+				account, err := s.accountRepo.GetByID(ctx, accountID)
+				if err == nil && account.IsSchedulable() && account.IsOpenAI() && (requestedModel == "" || account.IsModelSupported(requestedModel)) {
+					// Refresh sticky session TTL
+					_ = s.cache.RefreshSessionTTL(ctx, "openai:"+sessionHash, openaiStickySessionTTL)
+					return account, nil
+				}
 			}
 		}
 	}
@@ -158,6 +168,9 @@ func (s *OpenAIGatewayService) SelectAccountForModel(ctx context.Context, groupI
 	var selected *Account
 	for i := range accounts {
 		acc := &accounts[i]
+		if _, excluded := excludedIDs[acc.ID]; excluded {
+			continue
+		}
 		// Check model support
 		if requestedModel != "" && !acc.IsModelSupported(requestedModel) {
 			continue
@@ -221,6 +234,20 @@ func (s *OpenAIGatewayService) GetAccessToken(ctx context.Context, account *Acco
 	}
 }

+func (s *OpenAIGatewayService) shouldFailoverUpstreamError(statusCode int) bool {
+	switch statusCode {
+	case 401, 403, 429, 529:
+		return true
+	default:
+		return statusCode >= 500
+	}
+}
+
+func (s *OpenAIGatewayService) handleFailoverSideEffects(ctx context.Context, resp *http.Response, account *Account) {
+	body, _ := io.ReadAll(resp.Body)
+	s.rateLimitService.HandleUpstreamError(ctx, account, resp.StatusCode, resp.Header, body)
+}
+
 // Forward forwards request to OpenAI API
 func (s *OpenAIGatewayService) Forward(ctx context.Context, c *gin.Context, account *Account, body []byte) (*OpenAIForwardResult, error) {
 	startTime := time.Now()
@@ -288,6 +315,10 @@ func (s *OpenAIGatewayService) Forward(ctx context.Context, c *gin.Context, acco

 	// Handle error response
 	if resp.StatusCode >= 400 {
+		if s.shouldFailoverUpstreamError(resp.StatusCode) {
+			s.handleFailoverSideEffects(ctx, resp, account)
+			return nil, &UpstreamFailoverError{StatusCode: resp.StatusCode}
+		}
 		return s.handleErrorResponse(ctx, resp, c, account)
 	}

@@ -744,8 +775,8 @@ func (s *OpenAIGatewayService) RecordUsage(ctx context.Context, input *OpenAIRec
 		}
 	}

-	// Update account last used
-	_ = s.accountRepo.UpdateLastUsed(ctx, account.ID)
+	// Schedule batch update for account last_used_at
+	s.deferredService.ScheduleLastUsedUpdate(account.ID)

 	return nil
 }
--- a/backend/internal/service/subscription_service.go
+++ b/backend/internal/service/subscription_service.go
@@ -10,6 +10,13 @@ import (
 	"github.com/Wei-Shaw/sub2api/internal/pkg/pagination"
 )

+// MaxExpiresAt is the maximum allowed expiration date (year 2099)
+// This prevents time.Time JSON serialization errors (RFC 3339 requires year <= 9999)
+var MaxExpiresAt = time.Date(2099, 12, 31, 23, 59, 59, 0, time.UTC)
+
+// MaxValidityDays is the maximum allowed validity days for subscriptions (100 years)
+const MaxValidityDays = 36500
+
 var (
 	ErrSubscriptionNotFound      = infraerrors.NotFound("SUBSCRIPTION_NOT_FOUND", "subscription not found")
 	ErrSubscriptionExpired       = infraerrors.Forbidden("SUBSCRIPTION_EXPIRED", "subscription has expired")
@@ -111,6 +118,9 @@ func (s *SubscriptionService) AssignOrExtendSubscription(ctx context.Context, in
 	if validityDays <= 0 {
 		validityDays = 30
 	}
+	if validityDays > MaxValidityDays {
+		validityDays = MaxValidityDays
+	}

 	// 已有订阅，执行续期
 	if existingSub != nil {
@@ -125,6 +135,11 @@ func (s *SubscriptionService) AssignOrExtendSubscription(ctx context.Context, in
 			newExpiresAt = now.AddDate(0, 0, validityDays)
 		}

+		// 确保不超过最大过期时间
+		if newExpiresAt.After(MaxExpiresAt) {
+			newExpiresAt = MaxExpiresAt
+		}
+
 		// 更新过期时间
 		if err := s.userSubRepo.ExtendExpiry(ctx, existingSub.ID, newExpiresAt); err != nil {
 			return nil, false, fmt.Errorf("extend subscription: %w", err)
@@ -189,13 +204,21 @@ func (s *SubscriptionService) createSubscription(ctx context.Context, input *Ass
 	if validityDays <= 0 {
 		validityDays = 30
 	}
+	if validityDays > MaxValidityDays {
+		validityDays = MaxValidityDays
+	}

 	now := time.Now()
+	expiresAt := now.AddDate(0, 0, validityDays)
+	if expiresAt.After(MaxExpiresAt) {
+		expiresAt = MaxExpiresAt
+	}
+
 	sub := &UserSubscription{
 		UserID:     input.UserID,
 		GroupID:    input.GroupID,
 		StartsAt:   now,
-		ExpiresAt:  now.AddDate(0, 0, validityDays),
+		ExpiresAt:  expiresAt,
 		Status:     SubscriptionStatusActive,
 		AssignedAt: now,
 		Notes:      input.Notes,
@@ -291,8 +314,17 @@ func (s *SubscriptionService) ExtendSubscription(ctx context.Context, subscripti
 		return nil, ErrSubscriptionNotFound
 	}

+	// 限制延长天数
+	if days > MaxValidityDays {
+		days = MaxValidityDays
+	}
+
 	// 计算新的过期时间
 	newExpiresAt := sub.ExpiresAt.AddDate(0, 0, days)
+	if newExpiresAt.After(MaxExpiresAt) {
+		newExpiresAt = MaxExpiresAt
+	}
+
 	if err := s.userSubRepo.ExtendExpiry(ctx, subscriptionID, newExpiresAt); err != nil {
 		return nil, err
 	}
--- a/backend/internal/service/timing_wheel_service.go
+++ b/backend/internal/service/timing_wheel_service.go
@@ -0,0 +1,63 @@
+package service
+
+import (
+	"log"
+	"sync"
+	"time"
+
+	"github.com/zeromicro/go-zero/core/collection"
+)
+
+// TimingWheelService wraps go-zero's TimingWheel for task scheduling
+type TimingWheelService struct {
+	tw       *collection.TimingWheel
+	stopOnce sync.Once
+}
+
+// NewTimingWheelService creates a new TimingWheelService instance
+func NewTimingWheelService() *TimingWheelService {
+	// 1 second tick, 3600 slots = supports up to 1 hour delay
+	// execute function: runs func() type tasks
+	tw, err := collection.NewTimingWheel(1*time.Second, 3600, func(key, value any) {
+		if fn, ok := value.(func()); ok {
+			fn()
+		}
+	})
+	if err != nil {
+		panic(err)
+	}
+	return &TimingWheelService{tw: tw}
+}
+
+// Start starts the timing wheel
+func (s *TimingWheelService) Start() {
+	log.Println("[TimingWheel] Started (auto-start by go-zero)")
+}
+
+// Stop stops the timing wheel
+func (s *TimingWheelService) Stop() {
+	s.stopOnce.Do(func() {
+		s.tw.Stop()
+		log.Println("[TimingWheel] Stopped")
+	})
+}
+
+// Schedule schedules a one-time task
+func (s *TimingWheelService) Schedule(name string, delay time.Duration, fn func()) {
+	_ = s.tw.SetTimer(name, fn, delay)
+}
+
+// ScheduleRecurring schedules a recurring task
+func (s *TimingWheelService) ScheduleRecurring(name string, interval time.Duration, fn func()) {
+	var schedule func()
+	schedule = func() {
+		fn()
+		_ = s.tw.SetTimer(name, schedule, interval)
+	}
+	_ = s.tw.SetTimer(name, schedule, interval)
+}
+
+// Cancel cancels a scheduled task
+func (s *TimingWheelService) Cancel(name string) {
+	_ = s.tw.RemoveTimer(name)
+}
--- a/backend/internal/service/token_refresh_service.go
+++ b/backend/internal/service/token_refresh_service.go
@@ -106,6 +106,9 @@ func (s *TokenRefreshService) processRefresh() {
 		return
 	}

+	totalAccounts := len(accounts)
+	oauthAccounts := 0 // 可刷新的OAuth账号数
+	needsRefresh := 0  // 需要刷新的账号数
 	refreshed, failed := 0, 0

 	for i := range accounts {
@@ -117,11 +120,15 @@ func (s *TokenRefreshService) processRefresh() {
 				continue
 			}

+			oauthAccounts++
+
 			// 检查是否需要刷新
 			if !refresher.NeedsRefresh(account, refreshWindow) {
-				continue
+				break // 不需要刷新，跳过
 			}

+			needsRefresh++
+
 			// 执行刷新
 			if err := s.refreshWithRetry(ctx, account, refresher); err != nil {
 				log.Printf("[TokenRefresh] Account %d (%s) failed: %v", account.ID, account.Name, err)
@@ -136,9 +143,9 @@ func (s *TokenRefreshService) processRefresh() {
 		}
 	}

-	if refreshed > 0 || failed > 0 {
-		log.Printf("[TokenRefresh] Cycle complete: %d refreshed, %d failed", refreshed, failed)
-	}
+	// 始终打印周期日志，便于跟踪服务运行状态
+	log.Printf("[TokenRefresh] Cycle complete: total=%d, oauth=%d, needs_refresh=%d, refreshed=%d, failed=%d",
+		totalAccounts, oauthAccounts, needsRefresh, refreshed, failed)
 }

 // listActiveAccounts 获取所有active状态的账号
--- a/backend/internal/service/token_refresher.go
+++ b/backend/internal/service/token_refresher.go
@@ -43,18 +43,17 @@ func (r *ClaudeTokenRefresher) CanRefresh(account *Account) bool {
 // NeedsRefresh 检查token是否需要刷新
 // 基于 expires_at 字段判断是否在刷新窗口内
 func (r *ClaudeTokenRefresher) NeedsRefresh(account *Account, refreshWindow time.Duration) bool {
-	expiresAtStr := account.GetCredential("expires_at")
-	if expiresAtStr == "" {
+	s := account.GetCredential("expires_at")
+	if s == "" {
 		return false
 	}

-	expiresAt, err := strconv.ParseInt(expiresAtStr, 10, 64)
+	expiresAt, err := strconv.ParseInt(s, 10, 64)
 	if err != nil {
 		return false
 	}

-	expiryTime := time.Unix(expiresAt, 0)
-	return time.Until(expiryTime) < refreshWindow
+	return time.Until(time.Unix(expiresAt, 0)) < refreshWindow
 }

 // Refresh 执行token刷新
--- a/backend/internal/service/token_refresher_test.go
+++ b/backend/internal/service/token_refresher_test.go
@@ -0,0 +1,214 @@
+//go:build unit
+
+package service
+
+import (
+	"strconv"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestClaudeTokenRefresher_NeedsRefresh(t *testing.T) {
+	refresher := &ClaudeTokenRefresher{}
+	refreshWindow := 30 * time.Minute
+
+	tests := []struct {
+		name        string
+		credentials map[string]any
+		wantRefresh bool
+	}{
+		{
+			name: "expires_at as string - expired",
+			credentials: map[string]any{
+				"expires_at": "1000", // 1970-01-01 00:16:40 UTC, 已过期
+			},
+			wantRefresh: true,
+		},
+		{
+			name: "expires_at as float64 - expired",
+			credentials: map[string]any{
+				"expires_at": float64(1000), // 数字类型，已过期
+			},
+			wantRefresh: true,
+		},
+		{
+			name: "expires_at as string - far future",
+			credentials: map[string]any{
+				"expires_at": "9999999999", // 远未来
+			},
+			wantRefresh: false,
+		},
+		{
+			name: "expires_at as float64 - far future",
+			credentials: map[string]any{
+				"expires_at": float64(9999999999), // 远未来，数字类型
+			},
+			wantRefresh: false,
+		},
+		{
+			name:        "expires_at missing",
+			credentials: map[string]any{},
+			wantRefresh: false,
+		},
+		{
+			name: "expires_at is nil",
+			credentials: map[string]any{
+				"expires_at": nil,
+			},
+			wantRefresh: false,
+		},
+		{
+			name: "expires_at is invalid string",
+			credentials: map[string]any{
+				"expires_at": "invalid",
+			},
+			wantRefresh: false,
+		},
+		{
+			name:        "credentials is nil",
+			credentials: nil,
+			wantRefresh: false,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			account := &Account{
+				Platform:    PlatformAnthropic,
+				Type:        AccountTypeOAuth,
+				Credentials: tt.credentials,
+			}
+
+			got := refresher.NeedsRefresh(account, refreshWindow)
+			require.Equal(t, tt.wantRefresh, got)
+		})
+	}
+}
+
+func TestClaudeTokenRefresher_NeedsRefresh_WithinWindow(t *testing.T) {
+	refresher := &ClaudeTokenRefresher{}
+	refreshWindow := 30 * time.Minute
+
+	// 设置一个在刷新窗口内的时间（当前时间 + 15分钟）
+	expiresAt := time.Now().Add(15 * time.Minute).Unix()
+
+	tests := []struct {
+		name        string
+		credentials map[string]any
+	}{
+		{
+			name: "string type - within refresh window",
+			credentials: map[string]any{
+				"expires_at": strconv.FormatInt(expiresAt, 10),
+			},
+		},
+		{
+			name: "float64 type - within refresh window",
+			credentials: map[string]any{
+				"expires_at": float64(expiresAt),
+			},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			account := &Account{
+				Platform:    PlatformAnthropic,
+				Type:        AccountTypeOAuth,
+				Credentials: tt.credentials,
+			}
+
+			got := refresher.NeedsRefresh(account, refreshWindow)
+			require.True(t, got, "should need refresh when within window")
+		})
+	}
+}
+
+func TestClaudeTokenRefresher_NeedsRefresh_OutsideWindow(t *testing.T) {
+	refresher := &ClaudeTokenRefresher{}
+	refreshWindow := 30 * time.Minute
+
+	// 设置一个在刷新窗口外的时间（当前时间 + 1小时）
+	expiresAt := time.Now().Add(1 * time.Hour).Unix()
+
+	tests := []struct {
+		name        string
+		credentials map[string]any
+	}{
+		{
+			name: "string type - outside refresh window",
+			credentials: map[string]any{
+				"expires_at": strconv.FormatInt(expiresAt, 10),
+			},
+		},
+		{
+			name: "float64 type - outside refresh window",
+			credentials: map[string]any{
+				"expires_at": float64(expiresAt),
+			},
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			account := &Account{
+				Platform:    PlatformAnthropic,
+				Type:        AccountTypeOAuth,
+				Credentials: tt.credentials,
+			}
+
+			got := refresher.NeedsRefresh(account, refreshWindow)
+			require.False(t, got, "should not need refresh when outside window")
+		})
+	}
+}
+
+func TestClaudeTokenRefresher_CanRefresh(t *testing.T) {
+	refresher := &ClaudeTokenRefresher{}
+
+	tests := []struct {
+		name     string
+		platform string
+		accType  string
+		want     bool
+	}{
+		{
+			name:     "anthropic oauth - can refresh",
+			platform: PlatformAnthropic,
+			accType:  AccountTypeOAuth,
+			want:     true,
+		},
+		{
+			name:     "anthropic api-key - cannot refresh",
+			platform: PlatformAnthropic,
+			accType:  AccountTypeApiKey,
+			want:     false,
+		},
+		{
+			name:     "openai oauth - cannot refresh",
+			platform: PlatformOpenAI,
+			accType:  AccountTypeOAuth,
+			want:     false,
+		},
+		{
+			name:     "gemini oauth - cannot refresh",
+			platform: PlatformGemini,
+			accType:  AccountTypeOAuth,
+			want:     false,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			account := &Account{
+				Platform: tt.platform,
+				Type:     tt.accType,
+			}
+
+			got := refresher.CanRefresh(account)
+			require.Equal(t, tt.want, got)
+		})
+	}
+}
--- a/backend/internal/service/usage_service.go
+++ b/backend/internal/service/usage_service.go
@@ -148,22 +148,40 @@ func (s *UsageService) ListByAccount(ctx context.Context, accountID int64, param

 // GetStatsByUser 获取用户的使用统计
 func (s *UsageService) GetStatsByUser(ctx context.Context, userID int64, startTime, endTime time.Time) (*UsageStats, error) {
-	logs, _, err := s.usageRepo.ListByUserAndTimeRange(ctx, userID, startTime, endTime)
+	stats, err := s.usageRepo.GetUserStatsAggregated(ctx, userID, startTime, endTime)
 	if err != nil {
-		return nil, fmt.Errorf("list usage logs: %w", err)
+		return nil, fmt.Errorf("get user stats: %w", err)
 	}

-	return s.calculateStats(logs), nil
+	return &UsageStats{
+		TotalRequests:     stats.TotalRequests,
+		TotalInputTokens:  stats.TotalInputTokens,
+		TotalOutputTokens: stats.TotalOutputTokens,
+		TotalCacheTokens:  stats.TotalCacheTokens,
+		TotalTokens:       stats.TotalTokens,
+		TotalCost:         stats.TotalCost,
+		TotalActualCost:   stats.TotalActualCost,
+		AverageDurationMs: stats.AverageDurationMs,
+	}, nil
 }

 // GetStatsByApiKey 获取API Key的使用统计
 func (s *UsageService) GetStatsByApiKey(ctx context.Context, apiKeyID int64, startTime, endTime time.Time) (*UsageStats, error) {
-	logs, _, err := s.usageRepo.ListByApiKeyAndTimeRange(ctx, apiKeyID, startTime, endTime)
+	stats, err := s.usageRepo.GetApiKeyStatsAggregated(ctx, apiKeyID, startTime, endTime)
 	if err != nil {
-		return nil, fmt.Errorf("list usage logs: %w", err)
+		return nil, fmt.Errorf("get api key stats: %w", err)
 	}

-	return s.calculateStats(logs), nil
+	return &UsageStats{
+		TotalRequests:     stats.TotalRequests,
+		TotalInputTokens:  stats.TotalInputTokens,
+		TotalOutputTokens: stats.TotalOutputTokens,
+		TotalCacheTokens:  stats.TotalCacheTokens,
+		TotalTokens:       stats.TotalTokens,
+		TotalCost:         stats.TotalCost,
+		TotalActualCost:   stats.TotalActualCost,
+		AverageDurationMs: stats.AverageDurationMs,
+	}, nil
 }

 // GetStatsByAccount 获取账号的使用统计
--- a/backend/internal/service/wire.go
+++ b/backend/internal/service/wire.go
@@ -1,6 +1,8 @@
 package service

 import (
+	"time"
+
 	"github.com/Wei-Shaw/sub2api/internal/config"
 	"github.com/google/wire"
 )
@@ -44,6 +46,20 @@ func ProvideTokenRefreshService(
 	return svc
 }

+// ProvideTimingWheelService creates and starts TimingWheelService
+func ProvideTimingWheelService() *TimingWheelService {
+	svc := NewTimingWheelService()
+	svc.Start()
+	return svc
+}
+
+// ProvideDeferredService creates and starts DeferredService
+func ProvideDeferredService(accountRepo AccountRepository, timingWheel *TimingWheelService) *DeferredService {
+	svc := NewDeferredService(accountRepo, timingWheel, 10*time.Second)
+	svc.Start()
+	return svc
+}
+
 // ProviderSet is the Wire provider set for all services
 var ProviderSet = wire.NewSet(
 	// Core services
@@ -80,4 +96,6 @@ var ProviderSet = wire.NewSet(
 	NewCRSSyncService,
 	ProvideUpdateService,
 	ProvideTokenRefreshService,
+	ProvideTimingWheelService,
+	ProvideDeferredService,
 )
--- a/backend/internal/web/embed_on.go
+++ b/backend/internal/web/embed_on.go
@@ -29,7 +29,8 @@ func ServeEmbeddedFrontend() gin.HandlerFunc {
 			strings.HasPrefix(path, "/v1/") ||
 			strings.HasPrefix(path, "/v1beta/") ||
 			strings.HasPrefix(path, "/setup/") ||
-			path == "/health" {
+			path == "/health" ||
+			path == "/responses" {
 			c.Next()
 			return
 		}
--- a/deploy/Caddyfile
+++ b/deploy/Caddyfile
@@ -0,0 +1,184 @@
+# =============================================================================
+# Sub2API Caddy Reverse Proxy Configuration (宿主机部署)
+# =============================================================================
+# 使用方法:
+#   1. 安装 Caddy: https://caddyserver.com/docs/install
+#   2. 修改下方 example.com 为你的域名
+#   3. 确保域名 DNS 已指向服务器
+#   4. 复制配置: sudo cp Caddyfile /etc/caddy/Caddyfile
+#   5. 重载配置: sudo systemctl reload caddy
+#
+# Caddy 会自动申请和续期 Let's Encrypt SSL 证书
+# =============================================================================
+
+# 全局配置
+{
+	# Let's Encrypt 邮箱通知
+	email admin@example.com
+	
+	# 服务器配置
+	servers {
+		# 启用 HTTP/2 和 HTTP/3
+		protocols h1 h2 h3
+		
+		# 超时配置
+		timeouts {
+			read_body 30s
+			read_header 10s
+			write 60s
+			idle 120s
+		}
+	}
+}
+
+# 修改为你的域名
+example.com {
+	# =========================================================================
+	# TLS 安全配置
+	# =========================================================================
+	tls {
+		# 仅使用 TLS 1.2 和 1.3
+		protocols tls1.2 tls1.3
+		
+		# 优先使用的加密套件
+		ciphers TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256 TLS_ECDHE_RSA_WITH_CHACHA20_POLY1305_SHA256 TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256
+	}
+
+	# =========================================================================
+	# 反向代理配置
+	# =========================================================================
+	reverse_proxy localhost:8080 {
+		# 健康检查
+		health_uri /health
+		health_interval 30s
+		health_timeout 10s
+		health_status 200
+		
+		# 负载均衡策略（单节点可忽略，多节点时有用）
+		lb_policy round_robin
+		lb_try_duration 5s
+		lb_try_interval 250ms
+		
+		# 传递真实客户端信息
+		# 兼容 Cloudflare 和直连：后端应优先读取 CF-Connecting-IP，其次 X-Real-IP
+		header_up X-Real-IP {remote_host}
+		header_up X-Forwarded-For {remote_host}
+		header_up X-Forwarded-Proto {scheme}
+		header_up X-Forwarded-Host {host}
+		# 保留 Cloudflare 原始头（如果存在）
+		# 后端获取 IP 的优先级建议: CF-Connecting-IP → X-Real-IP → X-Forwarded-For
+		header_up CF-Connecting-IP {http.request.header.CF-Connecting-IP}
+		
+		# 连接池优化
+		transport http {
+			keepalive 120s
+			keepalive_idle_conns 256
+			read_buffer 16KB
+			write_buffer 16KB
+			compression off
+		}
+		
+		# 故障转移
+		fail_duration 30s
+		max_fails 3
+		unhealthy_status 500 502 503 504
+	}
+
+	# =========================================================================
+	# 压缩配置
+	# =========================================================================
+	encode {
+		zstd
+		gzip 6
+		minimum_length 256
+		match {
+			header Content-Type text/*
+			header Content-Type application/json*
+			header Content-Type application/javascript*
+			header Content-Type application/xml*
+			header Content-Type application/rss+xml*
+			header Content-Type image/svg+xml*
+		}
+	}
+
+	# =========================================================================
+	# 速率限制 (需要 caddy-ratelimit 插件)
+	# 如未安装插件，请注释掉此段
+	# =========================================================================
+	# rate_limit {
+	# 	zone api {
+	# 		key {remote_host}
+	# 		events 100
+	# 		window 1m
+	# 	}
+	# }
+
+	# =========================================================================
+	# 安全响应头
+	# =========================================================================
+	header {
+		# 防止点击劫持
+		X-Frame-Options "SAMEORIGIN"
+		
+		# XSS 保护
+		X-XSS-Protection "1; mode=block"
+		
+		# 防止 MIME 类型嗅探
+		X-Content-Type-Options "nosniff"
+		
+		# 引用策略
+		Referrer-Policy "strict-origin-when-cross-origin"
+		
+		# HSTS - 强制 HTTPS (max-age=1年)
+		Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+		
+		# 内容安全策略 (根据需要调整)
+		# Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:;"
+		
+		# 权限策略
+		Permissions-Policy "accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"
+		
+		# 跨域资源策略
+		Cross-Origin-Opener-Policy "same-origin"
+		Cross-Origin-Embedder-Policy "require-corp"
+		Cross-Origin-Resource-Policy "same-origin"
+		
+		# 移除敏感头
+		-Server
+		-X-Powered-By
+	}
+
+	# =========================================================================
+	# 请求大小限制 (防止大文件攻击)
+	# =========================================================================
+	request_body {
+		max_size 100MB
+	}
+
+	# =========================================================================
+	# 日志配置
+	# =========================================================================
+	log {
+		output file /var/log/caddy/sub2api.log {
+			roll_size 50mb
+			roll_keep 10
+			roll_keep_for 720h
+		}
+		format json
+		level INFO
+	}
+
+	# =========================================================================
+	# 错误处理
+	# =========================================================================
+	handle_errors {
+		respond "{err.status_code} {err.status_text}"
+	}
+}
+
+# =============================================================================
+# HTTP 重定向到 HTTPS (Caddy 默认自动处理，此处显式声明)
+# =============================================================================
+; http://example.com {
+; 	redir https://{host}{uri} permanent
+; }
--- a/deploy/README.md
+++ b/deploy/README.md
@@ -281,6 +281,30 @@ To change after installation:
   sudo systemctl restart sub2api
   ```

+#### Gemini OAuth Configuration
+
+If you need to use AI Studio OAuth for Gemini accounts, add the OAuth client credentials to the systemd service file:
+
+1. Edit the service file:
+   ```bash
+   sudo nano /etc/systemd/system/sub2api.service
+   ```
+
+2. Add your OAuth credentials in the `[Service]` section (after the existing `Environment=` lines):
+   ```ini
+   Environment=GEMINI_OAUTH_CLIENT_ID=your-client-id.apps.googleusercontent.com
+   Environment=GEMINI_OAUTH_CLIENT_SECRET=GOCSPX-your-client-secret
+   ```
+
+3. Reload and restart:
+   ```bash
+   sudo systemctl daemon-reload
+   sudo systemctl restart sub2api
+   ```
+
+> **Note:** Code Assist OAuth does not require any configuration - it uses the built-in Gemini CLI client.
+> See the [Gemini OAuth Configuration](#gemini-oauth-configuration) section above for detailed setup instructions.
+
 #### Application Configuration

 The main config file is at `/etc/sub2api/config.yaml` (created by Setup Wizard).
--- a/deploy/docker-compose.yml
+++ b/deploy/docker-compose.yml
@@ -121,8 +121,8 @@ services:
      timeout: 5s
      retries: 5
      start_period: 10s
-    ports:
-      - 5433:5432
+    # 注意：不暴露端口到宿主机，应用通过内部网络连接
+    # 如需调试，可临时添加：ports: ["127.0.0.1:5433:5432"]

  # ===========================================================================
  # Redis Cache
--- a/deploy/install.sh
+++ b/deploy/install.sh
@@ -404,7 +404,9 @@ configure_server() {

 # Check if running as root
 check_root() {
-    if [ "$EUID" -ne 0 ]; then
+    # Use 'id -u' instead of $EUID for better compatibility
+    # $EUID may not work reliably when script is piped to bash
+    if [ "$(id -u)" -ne 0 ]; then
        print_error "$(msg 'run_as_root')"
        exit 1
    fi
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,12 +2,14 @@
 import { RouterView, useRouter, useRoute } from 'vue-router'
 import { onMounted, watch } from 'vue'
 import Toast from '@/components/common/Toast.vue'
-import { useAppStore } from '@/stores'
+import { useAppStore, useAuthStore, useSubscriptionStore } from '@/stores'
 import { getSetupStatus } from '@/api/setup'

 const router = useRouter()
 const route = useRoute()
 const appStore = useAppStore()
+const authStore = useAuthStore()
+const subscriptionStore = useSubscriptionStore()

 /**
 * Update favicon dynamically
@@ -46,6 +48,24 @@ watch(
  { immediate: true }
 )

+// Watch for authentication state and manage subscription data
+watch(
+  () => authStore.isAuthenticated,
+  (isAuthenticated) => {
+    if (isAuthenticated) {
+      // User logged in: preload subscriptions and start polling
+      subscriptionStore.fetchActiveSubscriptions().catch((error) => {
+        console.error('Failed to preload subscriptions:', error)
+      })
+      subscriptionStore.startPolling()
+    } else {
+      // User logged out: clear data and stop polling
+      subscriptionStore.clear()
+    }
+  },
+  { immediate: true }
+)
+
 onMounted(async () => {
  // Check if setup is needed
  try {
--- a/frontend/src/api/admin/accounts.ts
+++ b/frontend/src/api/admin/accounts.ts
@@ -30,6 +30,9 @@ export async function list(
    type?: string
    status?: string
    search?: string
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<Account>> {
  const { data } = await apiClient.get<PaginatedResponse<Account>>('/admin/accounts', {
@@ -37,7 +40,8 @@ export async function list(
      page,
      page_size: pageSize,
      ...filters
-    }
+    },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/admin/groups.ts
+++ b/frontend/src/api/admin/groups.ts
@@ -26,6 +26,9 @@ export async function list(
    platform?: GroupPlatform
    status?: 'active' | 'inactive'
    is_exclusive?: boolean
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<Group>> {
  const { data } = await apiClient.get<PaginatedResponse<Group>>('/admin/groups', {
@@ -33,7 +36,8 @@ export async function list(
      page,
      page_size: pageSize,
      ...filters
-    }
+    },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/admin/proxies.ts
+++ b/frontend/src/api/admin/proxies.ts
@@ -20,6 +20,9 @@ export async function list(
    protocol?: string
    status?: 'active' | 'inactive'
    search?: string
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<Proxy>> {
  const { data } = await apiClient.get<PaginatedResponse<Proxy>>('/admin/proxies', {
@@ -27,7 +30,8 @@ export async function list(
      page,
      page_size: pageSize,
      ...filters
-    }
+    },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/admin/redeem.ts
+++ b/frontend/src/api/admin/redeem.ts
@@ -25,6 +25,9 @@ export async function list(
    type?: RedeemCodeType
    status?: 'active' | 'used' | 'expired' | 'unused'
    search?: string
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<RedeemCode>> {
  const { data } = await apiClient.get<PaginatedResponse<RedeemCode>>('/admin/redeem-codes', {
@@ -32,7 +35,8 @@ export async function list(
      page,
      page_size: pageSize,
      ...filters
-    }
+    },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/admin/subscriptions.ts
+++ b/frontend/src/api/admin/subscriptions.ts
@@ -27,6 +27,9 @@ export async function list(
    status?: 'active' | 'expired' | 'revoked'
    user_id?: number
    group_id?: number
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<UserSubscription>> {
  const { data } = await apiClient.get<PaginatedResponse<UserSubscription>>(
@@ -36,7 +39,8 @@ export async function list(
        page,
        page_size: pageSize,
        ...filters
-      }
+      },
+      signal: options?.signal
    }
  )
  return data
--- a/frontend/src/api/admin/usage.ts
+++ b/frontend/src/api/admin/usage.ts
@@ -41,9 +41,13 @@ export interface AdminUsageQueryParams extends UsageQueryParams {
 * @param params - Query parameters for filtering and pagination
 * @returns Paginated list of usage logs
 */
-export async function list(params: AdminUsageQueryParams): Promise<PaginatedResponse<UsageLog>> {
+export async function list(
+  params: AdminUsageQueryParams,
+  options?: { signal?: AbortSignal }
+): Promise<PaginatedResponse<UsageLog>> {
  const { data } = await apiClient.get<PaginatedResponse<UsageLog>>('/admin/usage', {
-    params
+    params,
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/admin/users.ts
+++ b/frontend/src/api/admin/users.ts
@@ -11,6 +11,7 @@ import type { User, UpdateUserRequest, PaginatedResponse } from '@/types'
 * @param page - Page number (default: 1)
 * @param pageSize - Items per page (default: 20)
 * @param filters - Optional filters (status, role, search)
+ * @param options - Optional request options (signal)
 * @returns Paginated list of users
 */
 export async function list(
@@ -20,6 +21,9 @@ export async function list(
    status?: 'active' | 'disabled'
    role?: 'admin' | 'user'
    search?: string
+  },
+  options?: {
+    signal?: AbortSignal
  }
 ): Promise<PaginatedResponse<User>> {
  const { data } = await apiClient.get<PaginatedResponse<User>>('/admin/users', {
@@ -27,7 +31,8 @@ export async function list(
      page,
      page_size: pageSize,
      ...filters
-    }
+    },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/keys.ts
+++ b/frontend/src/api/keys.ts
@@ -10,14 +10,19 @@ import type { ApiKey, CreateApiKeyRequest, UpdateApiKeyRequest, PaginatedRespons
 * List all API keys for current user
 * @param page - Page number (default: 1)
 * @param pageSize - Items per page (default: 10)
+ * @param options - Optional request options
 * @returns Paginated list of API keys
 */
 export async function list(
  page: number = 1,
-  pageSize: number = 10
+  pageSize: number = 10,
+  options?: {
+    signal?: AbortSignal
+  }
 ): Promise<PaginatedResponse<ApiKey>> {
  const { data } = await apiClient.get<PaginatedResponse<ApiKey>>('/keys', {
-    params: { page, page_size: pageSize }
+    params: { page, page_size: pageSize },
+    signal: options?.signal
  })
  return data
 }
--- a/frontend/src/api/usage.ts
+++ b/frontend/src/api/usage.ts
@@ -90,8 +90,12 @@ export async function list(
 * @param params - Query parameters for filtering and pagination
 * @returns Paginated list of usage logs
 */
-export async function query(params: UsageQueryParams): Promise<PaginatedResponse<UsageLog>> {
+export async function query(
+  params: UsageQueryParams,
+  config: { signal?: AbortSignal } = {}
+): Promise<PaginatedResponse<UsageLog>> {
  const { data } = await apiClient.get<PaginatedResponse<UsageLog>>('/usage', {
+    ...config,
    params
  })
  return data
@@ -148,8 +152,8 @@ export async function getStatsByDateRange(

 /**
 * Get usage by date range
- * @param startDate - Start date (ISO format)
- * @param endDate - End date (ISO format)
+ * @param startDate - Start date (YYYY-MM-DD format)
+ * @param endDate - End date (YYYY-MM-DD format)
 * @param apiKeyId - Optional API key ID filter
 * @returns Usage logs within date range
 */
@@ -232,15 +236,22 @@ export interface BatchApiKeysUsageResponse {
 /**
 * Get batch usage stats for user's own API keys
 * @param apiKeyIds - Array of API key IDs
+ * @param options - Optional request options
 * @returns Usage stats map keyed by API key ID
 */
 export async function getDashboardApiKeysUsage(
-  apiKeyIds: number[]
+  apiKeyIds: number[],
+  options?: {
+    signal?: AbortSignal
+  }
 ): Promise<BatchApiKeysUsageResponse> {
  const { data } = await apiClient.post<BatchApiKeysUsageResponse>(
    '/usage/dashboard/api-keys-usage',
    {
      api_key_ids: apiKeyIds
+    },
+    {
+      signal: options?.signal
    }
  )
  return data
--- a/frontend/src/components/account/AccountStatsModal.vue
+++ b/frontend/src/components/account/AccountStatsModal.vue
@@ -1,5 +1,10 @@
 <template>
-  <Modal :show="show" :title="t('admin.accounts.usageStatistics')" size="2xl" @close="handleClose">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.usageStatistics')"
+    width="extra-wide"
+    @close="handleClose"
+  >
    <div class="space-y-6">
      <!-- Account Info Header -->
      <div
@@ -226,7 +231,9 @@
                }}</span>
              </div>
              <div class="flex items-center justify-between">
-                <span class="text-xs text-gray-500 dark:text-gray-400">Tokens</span>
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{
+                  t('admin.accounts.stats.tokens')
+                }}</span>
                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{
                  formatTokens(stats.summary.today?.tokens || 0)
                }}</span>
@@ -519,7 +526,7 @@
        </button>
      </div>
    </template>
-  </Modal>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
@@ -537,7 +544,7 @@ import {
  Filler
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
 import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
 import { adminAPI } from '@/api/admin'
--- a/frontend/src/components/account/AccountStatusIndicator.vue
+++ b/frontend/src/components/account/AccountStatusIndicator.vue
@@ -89,6 +89,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Account } from '@/types'
+import { formatTime } from '@/utils/format'

 const props = defineProps<{
  account: Account
@@ -139,13 +140,4 @@ const statusText = computed(() => {
  return props.account.status
 })

-// Format time helper
-const formatTime = (dateStr: string | null | undefined) => {
-  if (!dateStr) return 'N/A'
-  const date = new Date(dateStr)
-  return date.toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
 </script>
--- a/frontend/src/components/account/AccountTestModal.vue
+++ b/frontend/src/components/account/AccountTestModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <Modal
+  <BaseDialog
    :show="show"
    :title="t('admin.accounts.testAccountConnection')"
-    size="md"
+    width="normal"
    @close="handleClose"
  >
    <div class="space-y-4">
@@ -273,17 +273,19 @@
        </button>
      </div>
    </template>
-  </Modal>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import { useClipboard } from '@/composables/useClipboard'
 import { adminAPI } from '@/api/admin'
 import type { Account, ClaudeModel } from '@/types'

 const { t } = useI18n()
+const { copyToClipboard } = useClipboard()

 interface OutputLine {
  text: string
@@ -501,6 +503,6 @@ const handleEvent = (event: {

 const copyOutput = () => {
  const text = outputLines.value.map((l) => l.text).join('\n')
-  navigator.clipboard.writeText(text)
+  copyToClipboard(text, t('admin.accounts.outputCopied'))
 }
 </script>
--- a/frontend/src/components/account/AccountTodayStatsCell.vue
+++ b/frontend/src/components/account/AccountTodayStatsCell.vue
@@ -16,21 +16,27 @@
    <div v-else-if="stats" class="space-y-0.5 text-xs">
      <!-- Requests -->
      <div class="flex items-center gap-1">
-        <span class="text-gray-500 dark:text-gray-400">Req:</span>
+        <span class="text-gray-500 dark:text-gray-400"
+          >{{ t('admin.accounts.stats.requests') }}:</span
+        >
        <span class="font-medium text-gray-700 dark:text-gray-300">{{
          formatNumber(stats.requests)
        }}</span>
      </div>
      <!-- Tokens -->
      <div class="flex items-center gap-1">
-        <span class="text-gray-500 dark:text-gray-400">Tok:</span>
+        <span class="text-gray-500 dark:text-gray-400"
+          >{{ t('admin.accounts.stats.tokens') }}:</span
+        >
        <span class="font-medium text-gray-700 dark:text-gray-300">{{
          formatTokens(stats.tokens)
        }}</span>
      </div>
      <!-- Cost -->
      <div class="flex items-center gap-1">
-        <span class="text-gray-500 dark:text-gray-400">Cost:</span>
+        <span class="text-gray-500 dark:text-gray-400"
+          >{{ t('admin.accounts.stats.cost') }}:</span
+        >
        <span class="font-medium text-emerald-600 dark:text-emerald-400">{{
          formatCurrency(stats.cost)
        }}</span>
@@ -44,6 +50,7 @@

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api/admin'
 import type { Account, WindowStats } from '@/types'
 import { formatNumber, formatCurrency } from '@/utils/format'
@@ -52,6 +59,8 @@ const props = defineProps<{
  account: Account
 }>()

+const { t } = useI18n()
+
 const loading = ref(false)
 const error = ref<string | null>(null)
 const stats = ref<WindowStats | null>(null)
--- a/frontend/src/components/account/AccountUsageCell.vue
+++ b/frontend/src/components/account/AccountUsageCell.vue
@@ -105,6 +105,7 @@

 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api/admin'
 import type { Account, AccountUsageInfo } from '@/types'
 import UsageProgressBar from './UsageProgressBar.vue'
@@ -113,6 +114,8 @@ const props = defineProps<{
  account: Account
 }>()

+const { t } = useI18n()
+
 const loading = ref(false)
 const error = ref<string | null>(null)
 const usageInfo = ref<AccountUsageInfo | null>(null)
@@ -282,7 +285,7 @@ const loadUsage = async () => {
  try {
    usageInfo.value = await adminAPI.accounts.getUsage(props.account.id)
  } catch (e: any) {
-    error.value = 'Failed'
+    error.value = t('common.error')
    console.error('Failed to load usage:', e)
  } finally {
    loading.value = false
--- a/frontend/src/components/account/BulkEditAccountModal.vue
+++ b/frontend/src/components/account/BulkEditAccountModal.vue
@@ -1,6 +1,11 @@
 <template>
-  <Modal :show="show" :title="t('admin.accounts.bulkEdit.title')" size="lg" @close="handleClose">
-    <form class="space-y-5" @submit.prevent="handleSubmit">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.bulkEdit.title')"
+    width="wide"
+    @close="handleClose"
+  >
+    <form id="bulk-edit-account-form" class="space-y-5" @submit.prevent="handleSubmit">
      <!-- Info -->
      <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
        <p class="text-sm text-blue-700 dark:text-blue-400">
@@ -19,20 +24,30 @@
      <!-- Base URL (API Key only) -->
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.baseUrl') }}</label>
+          <label
+            id="bulk-edit-base-url-label"
+            class="input-label mb-0"
+            for="bulk-edit-base-url-enabled"
+          >
+            {{ t('admin.accounts.baseUrl') }}
+          </label>
          <input
            v-model="enableBaseUrl"
+            id="bulk-edit-base-url-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-base-url"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>
        <input
          v-model="baseUrl"
+          id="bulk-edit-base-url"
          type="text"
          :disabled="!enableBaseUrl"
          class="input"
          :class="!enableBaseUrl && 'cursor-not-allowed opacity-50'"
          :placeholder="t('admin.accounts.bulkEdit.baseUrlPlaceholder')"
+          aria-labelledby="bulk-edit-base-url-label"
        />
        <p class="input-hint">
          {{ t('admin.accounts.bulkEdit.baseUrlNotice') }}
@@ -42,15 +57,28 @@
      <!-- Model restriction -->
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.modelRestriction') }}</label>
+          <label
+            id="bulk-edit-model-restriction-label"
+            class="input-label mb-0"
+            for="bulk-edit-model-restriction-enabled"
+          >
+            {{ t('admin.accounts.modelRestriction') }}
+          </label>
          <input
            v-model="enableModelRestriction"
+            id="bulk-edit-model-restriction-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-model-restriction-body"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>

-        <div :class="!enableModelRestriction && 'pointer-events-none opacity-50'">
+        <div
+          id="bulk-edit-model-restriction-body"
+          :class="!enableModelRestriction && 'pointer-events-none opacity-50'"
+          role="group"
+          aria-labelledby="bulk-edit-model-restriction-label"
+        >
          <!-- Mode Toggle -->
          <div class="mb-4 flex gap-2">
            <button
@@ -267,19 +295,27 @@
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
          <div>
-            <label class="input-label mb-0">{{ t('admin.accounts.customErrorCodes') }}</label>
+            <label
+              id="bulk-edit-custom-error-codes-label"
+              class="input-label mb-0"
+              for="bulk-edit-custom-error-codes-enabled"
+            >
+              {{ t('admin.accounts.customErrorCodes') }}
+            </label>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
              {{ t('admin.accounts.customErrorCodesHint') }}
            </p>
          </div>
          <input
            v-model="enableCustomErrorCodes"
+            id="bulk-edit-custom-error-codes-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-custom-error-codes-body"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>

-        <div v-if="enableCustomErrorCodes" class="space-y-3">
+        <div v-if="enableCustomErrorCodes" id="bulk-edit-custom-error-codes-body" class="space-y-3">
          <div class="rounded-lg bg-amber-50 p-3 dark:bg-amber-900/20">
            <p class="text-xs text-amber-700 dark:text-amber-400">
              <svg
@@ -321,11 +357,13 @@
          <div class="flex items-center gap-2">
            <input
              v-model="customErrorCodeInput"
+              id="bulk-edit-custom-error-code-input"
              type="number"
              min="100"
              max="599"
              class="input flex-1"
              :placeholder="t('admin.accounts.enterErrorCode')"
+              aria-labelledby="bulk-edit-custom-error-codes-label"
              @keyup.enter="addCustomErrorCode"
            />
            <button type="button" class="btn btn-secondary px-3" @click="addCustomErrorCode">
@@ -374,20 +412,26 @@
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="flex items-center justify-between">
          <div class="flex-1 pr-4">
-            <label class="input-label mb-0">{{
-              t('admin.accounts.interceptWarmupRequests')
-            }}</label>
+            <label
+              id="bulk-edit-intercept-warmup-label"
+              class="input-label mb-0"
+              for="bulk-edit-intercept-warmup-enabled"
+            >
+              {{ t('admin.accounts.interceptWarmupRequests') }}
+            </label>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
              {{ t('admin.accounts.interceptWarmupRequestsDesc') }}
            </p>
          </div>
          <input
            v-model="enableInterceptWarmup"
+            id="bulk-edit-intercept-warmup-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-intercept-warmup-body"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>
-        <div v-if="enableInterceptWarmup" class="mt-3">
+        <div v-if="enableInterceptWarmup" id="bulk-edit-intercept-warmup-body" class="mt-3">
          <button
            type="button"
            :class="[
@@ -409,15 +453,27 @@
      <!-- Proxy -->
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('admin.accounts.proxy') }}</label>
+          <label
+            id="bulk-edit-proxy-label"
+            class="input-label mb-0"
+            for="bulk-edit-proxy-enabled"
+          >
+            {{ t('admin.accounts.proxy') }}
+          </label>
          <input
            v-model="enableProxy"
+            id="bulk-edit-proxy-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-proxy-body"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>
-        <div :class="!enableProxy && 'pointer-events-none opacity-50'">
-          <ProxySelector v-model="proxyId" :proxies="proxies" />
+        <div id="bulk-edit-proxy-body" :class="!enableProxy && 'pointer-events-none opacity-50'">
+          <ProxySelector
+            v-model="proxyId"
+            :proxies="proxies"
+            aria-labelledby="bulk-edit-proxy-label"
+          />
        </div>
      </div>

@@ -425,38 +481,58 @@
      <div class="grid grid-cols-2 gap-4 border-t border-gray-200 pt-4 dark:border-dark-600">
        <div>
          <div class="mb-3 flex items-center justify-between">
-            <label class="input-label mb-0">{{ t('admin.accounts.concurrency') }}</label>
+            <label
+              id="bulk-edit-concurrency-label"
+              class="input-label mb-0"
+              for="bulk-edit-concurrency-enabled"
+            >
+              {{ t('admin.accounts.concurrency') }}
+            </label>
            <input
              v-model="enableConcurrency"
+              id="bulk-edit-concurrency-enabled"
              type="checkbox"
+              aria-controls="bulk-edit-concurrency"
              class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
            />
          </div>
          <input
            v-model.number="concurrency"
+            id="bulk-edit-concurrency"
            type="number"
            min="1"
            :disabled="!enableConcurrency"
            class="input"
            :class="!enableConcurrency && 'cursor-not-allowed opacity-50'"
+            aria-labelledby="bulk-edit-concurrency-label"
          />
        </div>
        <div>
          <div class="mb-3 flex items-center justify-between">
-            <label class="input-label mb-0">{{ t('admin.accounts.priority') }}</label>
+            <label
+              id="bulk-edit-priority-label"
+              class="input-label mb-0"
+              for="bulk-edit-priority-enabled"
+            >
+              {{ t('admin.accounts.priority') }}
+            </label>
            <input
              v-model="enablePriority"
+              id="bulk-edit-priority-enabled"
              type="checkbox"
+              aria-controls="bulk-edit-priority"
              class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
            />
          </div>
          <input
            v-model.number="priority"
+            id="bulk-edit-priority"
            type="number"
            min="1"
            :disabled="!enablePriority"
            class="input"
            :class="!enablePriority && 'cursor-not-allowed opacity-50'"
+            aria-labelledby="bulk-edit-priority-label"
          />
        </div>
      </div>
@@ -464,39 +540,69 @@
      <!-- Status -->
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('common.status') }}</label>
+          <label
+            id="bulk-edit-status-label"
+            class="input-label mb-0"
+            for="bulk-edit-status-enabled"
+          >
+            {{ t('common.status') }}
+          </label>
          <input
            v-model="enableStatus"
+            id="bulk-edit-status-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-status"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>
-        <div :class="!enableStatus && 'pointer-events-none opacity-50'">
-          <Select v-model="status" :options="statusOptions" />
+        <div id="bulk-edit-status" :class="!enableStatus && 'pointer-events-none opacity-50'">
+          <Select
+            v-model="status"
+            :options="statusOptions"
+            aria-labelledby="bulk-edit-status-label"
+          />
        </div>
      </div>

      <!-- Groups -->
      <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
        <div class="mb-3 flex items-center justify-between">
-          <label class="input-label mb-0">{{ t('nav.groups') }}</label>
+          <label
+            id="bulk-edit-groups-label"
+            class="input-label mb-0"
+            for="bulk-edit-groups-enabled"
+          >
+            {{ t('nav.groups') }}
+          </label>
          <input
            v-model="enableGroups"
+            id="bulk-edit-groups-enabled"
            type="checkbox"
+            aria-controls="bulk-edit-groups"
            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
          />
        </div>
-        <div :class="!enableGroups && 'pointer-events-none opacity-50'">
-          <GroupSelector v-model="groupIds" :groups="groups" />
+        <div id="bulk-edit-groups" :class="!enableGroups && 'pointer-events-none opacity-50'">
+          <GroupSelector
+            v-model="groupIds"
+            :groups="groups"
+            aria-labelledby="bulk-edit-groups-label"
+          />
        </div>
      </div>
+    </form>

-      <!-- Action buttons -->
-      <div class="flex justify-end gap-3 pt-4">
+    <template #footer>
+      <div class="flex justify-end gap-3">
        <button type="button" class="btn btn-secondary" @click="handleClose">
          {{ t('common.cancel') }}
        </button>
-        <button type="submit" :disabled="submitting" class="btn btn-primary">
+        <button
+          type="submit"
+          form="bulk-edit-account-form"
+          :disabled="submitting"
+          class="btn btn-primary"
+        >
          <svg
            v-if="submitting"
            class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -522,8 +628,8 @@
          }}
        </button>
      </div>
-    </form>
-  </Modal>
+    </template>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
@@ -532,7 +638,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { Proxy, Group } from '@/types'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -1,5 +1,10 @@
 <template>
-  <Modal :show="show" :title="t('admin.accounts.createAccount')" size="lg" @close="handleClose">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.createAccount')"
+    width="wide"
+    @close="handleClose"
+  >
    <!-- Step Indicator for OAuth accounts -->
    <div v-if="isOAuthFlow" class="mb-6 flex items-center justify-center">
      <div class="flex items-center space-x-4">
@@ -34,7 +39,12 @@
    </div>

    <!-- Step 1: Basic Info -->
-    <form v-if="step === 1" @submit.prevent="handleSubmit" class="space-y-5">
+    <form
+      v-if="step === 1"
+      id="create-account-form"
+      @submit.prevent="handleSubmit"
+      class="space-y-5"
+    >
      <div>
        <label class="input-label">{{ t('admin.accounts.accountName') }}</label>
        <input
@@ -256,7 +266,7 @@
            </div>
            <div>
              <span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">ChatGPT OAuth</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.types.chatgptOauth') }}</span>
            </div>
          </button>

@@ -294,7 +304,7 @@
            </div>
            <div>
              <span class="block text-sm font-medium text-gray-900 dark:text-white">API Key</span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">Responses API</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.types.responsesApi') }}</span>
            </div>
          </button>
        </div>
@@ -338,7 +348,7 @@
            </div>
            <div>
              <span class="block text-sm font-medium text-gray-900 dark:text-white">OAuth</span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">Google OAuth</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.types.googleOauth') }}</span>
            </div>
          </button>

@@ -408,7 +418,7 @@
                </svg>
              </div>
              <div>
-                <span class="block text-sm font-medium text-gray-900 dark:text-white">Code Assist</span>
+                <span class="block text-sm font-medium text-gray-900 dark:text-white">{{ t('admin.accounts.types.codeAssist') }}</span>
                <span class="block text-xs font-medium text-blue-600 dark:text-blue-400">{{ t('admin.accounts.oauth.gemini.needsProjectId') }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.oauth.gemini.needsProjectIdDesc') }}</span>
              </div>
@@ -468,7 +478,7 @@

              <div
                v-if="!geminiAIStudioOAuthEnabled"
-                class="pointer-events-none absolute left-0 top-full z-10 mt-2 w-[28rem] rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 opacity-0 shadow-sm transition-opacity group-hover:opacity-100 dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200"
+                class="pointer-events-none absolute right-0 top-full z-50 mt-2 w-80 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:border-amber-700 dark:bg-amber-900/40 dark:text-amber-200"
              >
                {{ t('admin.accounts.oauth.gemini.aiStudioNotConfiguredTip') }}
              </div>
@@ -488,7 +498,7 @@
              value="oauth"
              class="mr-2 text-primary-600 focus:ring-primary-500"
            />
-            <span class="text-sm text-gray-700 dark:text-gray-300">Oauth</span>
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('admin.accounts.types.oauth') }}</span>
          </label>
          <label class="flex cursor-pointer items-center">
            <input
@@ -963,11 +973,40 @@
      <!-- Group Selection -->
      <GroupSelector v-model="form.group_ids" :groups="groups" :platform="form.platform" />

-      <div class="flex justify-end gap-3 pt-4">
+    </form>
+
+    <!-- Step 2: OAuth Authorization -->
+    <div v-else class="space-y-5">
+      <OAuthAuthorizationFlow
+        ref="oauthFlowRef"
+        :add-method="form.platform === 'anthropic' ? addMethod : 'oauth'"
+        :auth-url="currentAuthUrl"
+        :session-id="currentSessionId"
+        :loading="currentOAuthLoading"
+        :error="currentOAuthError"
+        :show-help="form.platform === 'anthropic'"
+        :show-proxy-warning="form.platform !== 'openai' && !!form.proxy_id"
+        :allow-multiple="form.platform === 'anthropic'"
+        :show-cookie-option="form.platform === 'anthropic'"
+        :platform="form.platform"
+        :show-project-id="geminiOAuthType === 'code_assist'"
+        @generate-url="handleGenerateUrl"
+        @cookie-auth="handleCookieAuth"
+      />
+
+    </div>
+
+    <template #footer>
+      <div v-if="step === 1" class="flex justify-end gap-3">
        <button @click="handleClose" type="button" class="btn btn-secondary">
          {{ t('common.cancel') }}
        </button>
-        <button type="submit" :disabled="submitting" class="btn btn-primary">
+        <button
+          type="submit"
+          form="create-account-form"
+          :disabled="submitting"
+          class="btn btn-primary"
+        >
          <svg
            v-if="submitting"
            class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -997,28 +1036,7 @@
          }}
        </button>
      </div>
-    </form>
-
-    <!-- Step 2: OAuth Authorization -->
-    <div v-else class="space-y-5">
-      <OAuthAuthorizationFlow
-        ref="oauthFlowRef"
-        :add-method="form.platform === 'anthropic' ? addMethod : 'oauth'"
-        :auth-url="currentAuthUrl"
-        :session-id="currentSessionId"
-        :loading="currentOAuthLoading"
-        :error="currentOAuthError"
-        :show-help="form.platform === 'anthropic'"
-        :show-proxy-warning="form.platform !== 'openai' && !!form.proxy_id"
-        :allow-multiple="form.platform === 'anthropic'"
-        :show-cookie-option="form.platform === 'anthropic'"
-        :platform="form.platform"
-        :show-project-id="geminiOAuthType === 'code_assist'"
-        @generate-url="handleGenerateUrl"
-        @cookie-auth="handleCookieAuth"
-      />
-
-      <div class="flex justify-between gap-3 pt-4">
+      <div v-else class="flex justify-between gap-3">
        <button type="button" class="btn btn-secondary" @click="goBackToBasicInfo">
          {{ t('common.back') }}
        </button>
@@ -1056,8 +1074,8 @@
          }}
        </button>
      </div>
-    </div>
-  </Modal>
+    </template>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
@@ -1073,7 +1091,7 @@ import {
 import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
 import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
 import type { Proxy, Group, AccountPlatform, AccountType } from '@/types'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'
 import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -1,6 +1,16 @@
 <template>
-  <Modal :show="show" :title="t('admin.accounts.editAccount')" size="lg" @close="handleClose">
-    <form v-if="account" @submit.prevent="handleSubmit" class="space-y-5">
+  <BaseDialog
+    :show="show"
+    :title="t('admin.accounts.editAccount')"
+    width="wide"
+    @close="handleClose"
+  >
+    <form
+      v-if="account"
+      id="edit-account-form"
+      @submit.prevent="handleSubmit"
+      class="space-y-5"
+    >
      <div>
        <label class="input-label">{{ t('common.name') }}</label>
        <input v-model="form.name" type="text" required class="input" />
@@ -459,11 +469,19 @@
      <!-- Group Selection -->
      <GroupSelector v-model="form.group_ids" :groups="groups" :platform="account?.platform" />

-      <div class="flex justify-end gap-3 pt-4">
+    </form>
+
+    <template #footer>
+      <div v-if="account" class="flex justify-end gap-3">
        <button @click="handleClose" type="button" class="btn btn-secondary">
          {{ t('common.cancel') }}
        </button>
-        <button type="submit" :disabled="submitting" class="btn btn-primary">
+        <button
+          type="submit"
+          form="edit-account-form"
+          :disabled="submitting"
+          class="btn btn-primary"
+        >
          <svg
            v-if="submitting"
            class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -487,8 +505,8 @@
          {{ submitting ? t('admin.accounts.updating') : t('common.update') }}
        </button>
      </div>
-    </form>
-  </Modal>
+    </template>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
@@ -497,7 +515,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { Account, Proxy, Group } from '@/types'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'
--- a/frontend/src/components/account/OAuthAuthorizationFlow.vue
+++ b/frontend/src/components/account/OAuthAuthorizationFlow.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="rounded-lg border border-blue-200 bg-blue-50 p-6 dark:border-blue-700 dark:bg-blue-900/30"
+    class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/30"
  >
    <div class="flex items-start gap-4">
      <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500">
--- a/frontend/src/components/account/ReAuthAccountModal.vue
+++ b/frontend/src/components/account/ReAuthAccountModal.vue
@@ -1,11 +1,11 @@
 <template>
-  <Modal
+  <BaseDialog
    :show="show"
    :title="t('admin.accounts.reAuthorizeAccount')"
-    size="lg"
+    width="wide"
    @close="handleClose"
  >
-    <div v-if="account" class="space-y-5">
+    <div v-if="account" class="space-y-4">
      <!-- Account Info -->
      <div
        class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700"
@@ -53,8 +53,8 @@
      </div>

      <!-- Add Method Selection (Claude only) -->
-      <div v-if="isAnthropic">
-        <label class="input-label">{{ t('admin.accounts.oauth.authMethod') }}</label>
+      <fieldset v-if="isAnthropic" class="border-0 p-0">
+        <legend class="input-label">{{ t('admin.accounts.oauth.authMethod') }}</legend>
        <div class="mt-2 flex gap-4">
          <label class="flex cursor-pointer items-center">
            <input
@@ -63,7 +63,9 @@
              value="oauth"
              class="mr-2 text-primary-600 focus:ring-primary-500"
            />
-            <span class="text-sm text-gray-700 dark:text-gray-300">Oauth</span>
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{
+              t('admin.accounts.types.oauth')
+            }}</span>
          </label>
          <label class="flex cursor-pointer items-center">
            <input
@@ -77,11 +79,11 @@
            }}</span>
          </label>
        </div>
-      </div>
+      </fieldset>

      <!-- Gemini OAuth Type Selection -->
-      <div v-if="isGemini">
-        <label class="input-label">{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}</label>
+      <fieldset v-if="isGemini" class="border-0 p-0">
+        <legend class="input-label">{{ t('admin.accounts.oauth.gemini.oauthTypeLabel') }}</legend>
        <div class="mt-2 grid grid-cols-2 gap-3">
          <button
            type="button"
@@ -116,7 +118,9 @@
              </svg>
            </div>
            <div>
-              <span class="block text-sm font-medium text-gray-900 dark:text-white">Code Assist</span>
+              <span class="block text-sm font-medium text-gray-900 dark:text-white">{{
+                t('admin.accounts.types.codeAssist')
+              }}</span>
              <span class="block text-xs font-medium text-blue-600 dark:text-blue-400">{{
                t('admin.accounts.oauth.gemini.needsProjectId')
              }}</span>
@@ -183,7 +187,7 @@
            </div>
          </button>
        </div>
-      </div>
+      </fieldset>

      <OAuthAuthorizationFlow
        ref="oauthFlowRef"
@@ -203,7 +207,10 @@
        @cookie-auth="handleCookieAuth"
      />

-      <div class="flex justify-between gap-3 pt-4">
+    </div>
+
+    <template #footer>
+      <div v-if="account" class="flex justify-between gap-3">
        <button type="button" class="btn btn-secondary" @click="handleClose">
          {{ t('common.cancel') }}
        </button>
@@ -241,8 +248,8 @@
          }}
        </button>
      </div>
-    </div>
-  </Modal>
+    </template>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
@@ -258,7 +265,7 @@ import {
 import { useOpenAIOAuth } from '@/composables/useOpenAIOAuth'
 import { useGeminiOAuth } from '@/composables/useGeminiOAuth'
 import type { Account } from '@/types'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import OAuthAuthorizationFlow from './OAuthAuthorizationFlow.vue'

 // Type for exposed OAuthAuthorizationFlow component
--- a/frontend/src/components/account/SyncFromCrsModal.vue
+++ b/frontend/src/components/account/SyncFromCrsModal.vue
@@ -1,12 +1,12 @@
 <template>
-  <Modal
+  <BaseDialog
    :show="show"
    :title="t('admin.accounts.syncFromCrsTitle')"
-    size="lg"
+    width="normal"
    close-on-click-outside
    @close="handleClose"
  >
-    <div class="space-y-4">
+    <form id="sync-from-crs-form" class="space-y-4" @submit.prevent="handleSync">
      <div class="text-sm text-gray-600 dark:text-dark-300">
        {{ t('admin.accounts.syncFromCrsDesc') }}
      </div>
@@ -84,25 +84,30 @@
          </div>
        </div>
      </div>
-    </div>
+    </form>

    <template #footer>
      <div class="flex justify-end gap-3">
-        <button class="btn btn-secondary" :disabled="syncing" @click="handleClose">
+        <button class="btn btn-secondary" type="button" :disabled="syncing" @click="handleClose">
          {{ t('common.cancel') }}
        </button>
-        <button class="btn btn-primary" :disabled="syncing" @click="handleSync">
+        <button
+          class="btn btn-primary"
+          type="submit"
+          form="sync-from-crs-form"
+          :disabled="syncing"
+        >
          {{ syncing ? t('admin.accounts.syncing') : t('admin.accounts.syncNow') }}
        </button>
      </div>
    </template>
-  </Modal>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'

--- a/frontend/src/components/account/UsageProgressBar.vue
+++ b/frontend/src/components/account/UsageProgressBar.vue
@@ -4,7 +4,7 @@
    <div
      v-if="windowStats"
      class="mb-0.5 flex items-center justify-between"
-      :title="`5h 窗口用量统计`"
+      :title="t('admin.accounts.usageWindow.statsTitle')"
    >
      <div
        class="flex cursor-help items-center gap-1.5 text-[9px] text-gray-500 dark:text-gray-400"
@@ -51,6 +51,7 @@

 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { WindowStats } from '@/types'

 const props = defineProps<{
@@ -61,6 +62,8 @@ const props = defineProps<{
  windowStats?: WindowStats | null
 }>()

+const { t } = useI18n()
+
 // Label background colors
 const labelClass = computed(() => {
  const colors = {
--- a/frontend/src/components/common/BaseDialog.vue
+++ b/frontend/src/components/common/BaseDialog.vue
@@ -0,0 +1,118 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="modal-overlay"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      @click.self="handleClose"
+    >
+      <!-- Modal panel -->
+      <div :class="['modal-content', widthClasses]" @click.stop>
+        <!-- Header -->
+        <div class="modal-header">
+          <h3 id="modal-title" class="modal-title">
+            {{ title }}
+          </h3>
+          <button
+            @click="emit('close')"
+            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
+            aria-label="Close modal"
+          >
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="modal-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue'
+
+type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
+
+interface Props {
+  show: boolean
+  title: string
+  width?: DialogWidth
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 'normal',
+  closeOnEscape: true,
+  closeOnClickOutside: false
+})
+
+const emit = defineEmits<Emits>()
+
+const widthClasses = computed(() => {
+  const widths: Record<DialogWidth, string> = {
+    narrow: 'max-w-md',
+    normal: 'max-w-lg',
+    wide: 'max-w-4xl',
+    'extra-wide': 'max-w-6xl',
+    full: 'max-w-7xl'
+  }
+  return widths[props.width]
+})
+
+const handleClose = () => {
+  if (props.closeOnClickOutside) {
+    emit('close')
+  }
+}
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (props.show && props.closeOnEscape && event.key === 'Escape') {
+    emit('close')
+  }
+}
+
+// Prevent body scroll when modal is open
+watch(
+  () => props.show,
+  (isOpen) => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>
--- a/frontend/src/components/common/ConfirmDialog.vue
+++ b/frontend/src/components/common/ConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :show="show" :title="title" size="sm" @close="handleCancel">
+  <BaseDialog :show="show" :title="title" width="narrow" @close="handleCancel">
    <div class="space-y-4">
      <p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
    </div>
@@ -27,11 +27,15 @@
        </button>
      </div>
    </template>
-  </Modal>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
-import Modal from './Modal.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import BaseDialog from './BaseDialog.vue'
+
+const { t } = useI18n()

 interface Props {
  show: boolean
@@ -47,12 +51,13 @@ interface Emits {
  (e: 'cancel'): void
 }

-withDefaults(defineProps<Props>(), {
-  confirmText: 'Confirm',
-  cancelText: 'Cancel',
+const props = withDefaults(defineProps<Props>(), {
  danger: false
 })

+const confirmText = computed(() => props.confirmText || t('common.confirm'))
+const cancelText = computed(() => props.cancelText || t('common.cancel'))
+
 const emit = defineEmits<Emits>()

 const handleConfirm = () => {
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -1,14 +1,25 @@
 <template>
-  <div class="overflow-x-auto">
+  <div
+    ref="tableWrapperRef"
+    class="table-wrapper"
+    :class="{
+      'actions-expanded': actionsExpanded,
+      'is-scrollable': isScrollable
+    }"
+  >
    <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
-      <thead class="bg-gray-50 dark:bg-dark-800">
+      <thead class="table-header bg-gray-50 dark:bg-dark-800">
        <tr>
          <th
-            v-for="column in columns"
+            v-for="(column, index) in columns"
            :key="column.key"
            scope="col"
-            class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            :class="{ 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable }"
+            :class="[
+              'sticky-header-cell py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
+              getAdaptivePaddingClass(),
+              { 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable },
+              getStickyColumnClass(column, index)
+            ]"
            @click="column.sortable && handleSort(column.key)"
          >
            <div class="flex items-center space-x-1">
@@ -37,10 +48,10 @@
          </th>
        </tr>
      </thead>
-      <tbody class="divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-900">
+      <tbody class="table-body divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-900">
        <!-- Loading skeleton -->
        <tr v-if="loading" v-for="i in 5" :key="i">
-          <td v-for="column in columns" :key="column.key" class="whitespace-nowrap px-6 py-4">
+          <td v-for="column in columns" :key="column.key" :class="['whitespace-nowrap py-4', getAdaptivePaddingClass()]">
            <div class="animate-pulse">
              <div class="h-4 w-3/4 rounded bg-gray-200 dark:bg-dark-700"></div>
            </div>
@@ -51,7 +62,7 @@
        <tr v-else-if="!data || data.length === 0">
          <td
            :colspan="columns.length"
-            class="px-6 py-12 text-center text-gray-500 dark:text-dark-400"
+            :class="['py-12 text-center text-gray-500 dark:text-dark-400', getAdaptivePaddingClass()]"
          >
            <slot name="empty">
              <div class="flex flex-col items-center">
@@ -84,11 +95,15 @@
          class="hover:bg-gray-50 dark:hover:bg-dark-800"
        >
          <td
-            v-for="column in columns"
+            v-for="(column, colIndex) in columns"
            :key="column.key"
-            class="whitespace-nowrap px-6 py-4 text-sm text-gray-900 dark:text-gray-100"
+            :class="[
+              'whitespace-nowrap py-4 text-sm text-gray-900 dark:text-gray-100',
+              getAdaptivePaddingClass(),
+              getStickyColumnClass(column, colIndex)
+            ]"
          >
-            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]" :expanded="actionsExpanded">
              {{ column.formatter ? column.formatter(row[column.key], row) : row[column.key] }}
            </slot>
          </td>
@@ -99,24 +114,139 @@
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Column } from './types'

 const { t } = useI18n()

+// 表格容器引用
+const tableWrapperRef = ref<HTMLElement | null>(null)
+const isScrollable = ref(false)
+const actionsColumnNeedsExpanding = ref(false)
+
+// 检查是否可滚动
+const checkScrollable = () => {
+  if (tableWrapperRef.value) {
+    isScrollable.value = tableWrapperRef.value.scrollWidth > tableWrapperRef.value.clientWidth
+  }
+}
+
+// 检查操作列是否需要展开
+const checkActionsColumnWidth = () => {
+  if (!tableWrapperRef.value) return
+
+  // 查找第一行的操作列单元格
+  const firstActionCell = tableWrapperRef.value.querySelector('tbody tr:first-child td:last-child')
+  if (!firstActionCell) return
+
+  // 查找操作列内容的容器div
+  const actionsContainer = firstActionCell.querySelector('div')
+  if (!actionsContainer) return
+
+  // 临时展开以测量完整宽度
+  const wasExpanded = actionsExpanded.value
+  actionsExpanded.value = true
+
+  // 等待DOM更新
+  nextTick(() => {
+    // 测量所有按钮的总宽度
+    const actionItems = actionsContainer.querySelectorAll('button, a, [role="button"]')
+    if (actionItems.length <= 2) {
+      actionsColumnNeedsExpanding.value = false
+      actionsExpanded.value = wasExpanded
+      return
+    }
+
+    // 计算所有按钮的总宽度（包括gap）
+    let totalWidth = 0
+    actionItems.forEach((item, index) => {
+      totalWidth += (item as HTMLElement).offsetWidth
+      if (index < actionItems.length - 1) {
+        totalWidth += 4 // gap-1 = 4px
+      }
+    })
+
+    // 获取单元格可用宽度（减去padding）
+    const cellWidth = (firstActionCell as HTMLElement).clientWidth - 32 // 减去左右padding
+
+    // 如果总宽度超过可用宽度，需要展开功能
+    actionsColumnNeedsExpanding.value = totalWidth > cellWidth
+
+    // 恢复原来的展开状态
+    actionsExpanded.value = wasExpanded
+  })
+}
+
+// 监听尺寸变化
+let resizeObserver: ResizeObserver | null = null
+let resizeHandler: (() => void) | null = null
+
+onMounted(() => {
+  checkScrollable()
+  checkActionsColumnWidth()
+  if (tableWrapperRef.value && typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      checkScrollable()
+      checkActionsColumnWidth()
+    })
+    resizeObserver.observe(tableWrapperRef.value)
+  } else {
+    // 降级方案：不支持 ResizeObserver 时使用 window resize
+    resizeHandler = () => {
+      checkScrollable()
+      checkActionsColumnWidth()
+    }
+    window.addEventListener('resize', resizeHandler)
+  }
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler)
+    resizeHandler = null
+  }
+})
+
 interface Props {
  columns: Column[]
  data: any[]
  loading?: boolean
+  stickyFirstColumn?: boolean
+  stickyActionsColumn?: boolean
+  expandableActions?: boolean
+  actionsCount?: number // 操作按钮总数，用于判断是否需要展开功能
 }

 const props = withDefaults(defineProps<Props>(), {
-  loading: false
+  loading: false,
+  stickyFirstColumn: true,
+  stickyActionsColumn: true,
+  expandableActions: true
 })

 const sortKey = ref<string>('')
 const sortOrder = ref<'asc' | 'desc'>('asc')
+const actionsExpanded = ref(false)
+
+// 数据/列变化时重新检查滚动状态
+// 注意：不能监听 actionsExpanded，因为 checkActionsColumnWidth 会临时修改它，会导致无限循环
+watch(
+  [() => props.data.length, () => props.columns],
+  async () => {
+    await nextTick()
+    checkScrollable()
+    checkActionsColumnWidth()
+  },
+  { flush: 'post' }
+)
+
+// 单独监听展开状态变化，只更新滚动状态
+watch(actionsExpanded, async () => {
+  await nextTick()
+  checkScrollable()
+})

 const handleSort = (key: string) => {
  if (sortKey.value === key) {
@@ -140,4 +270,192 @@ const sortedData = computed(() => {
    return sortOrder.value === 'asc' ? comparison : -comparison
  })
 })
+
+// 检查第一列是否为勾选列
+const hasSelectColumn = computed(() => {
+  return props.columns.length > 0 && props.columns[0].key === 'select'
+})
+
+// 生成固定列的 CSS 类
+const getStickyColumnClass = (column: Column, index: number) => {
+  const classes: string[] = []
+
+  if (props.stickyFirstColumn) {
+    // 如果第一列是勾选列，固定前两列（勾选+名称）
+    if (hasSelectColumn.value) {
+      if (index === 0) {
+        classes.push('sticky-col sticky-col-left-first')
+      } else if (index === 1) {
+        classes.push('sticky-col sticky-col-left-second')
+      }
+    } else {
+      // 否则只固定第一列
+      if (index === 0) {
+        classes.push('sticky-col sticky-col-left')
+      }
+    }
+  }
+
+  // 操作列固定（最后一列）
+  if (props.stickyActionsColumn && column.key === 'actions') {
+    classes.push('sticky-col sticky-col-right')
+  }
+
+  return classes.join(' ')
+}
+
+// 根据列数自适应调整内边距
+const getAdaptivePaddingClass = () => {
+  const columnCount = props.columns.length
+
+  // 列数越多，内边距越小
+  if (columnCount >= 10) {
+    return 'px-2' // 8px
+  } else if (columnCount >= 7) {
+    return 'px-3' // 12px
+  } else if (columnCount >= 5) {
+    return 'px-4' // 16px
+  } else {
+    return 'px-6' // 24px (原始值)
+  }
+}
 </script>
+
+<style scoped>
+/* 表格横向滚动 */
+.table-wrapper {
+  --select-col-width: 52px; /* 勾选列宽度：px-6 (24px*2) + checkbox (16px) */
+  position: relative;
+  overflow-x: auto;
+  isolation: isolate;
+}
+
+/* 表头容器，确保在滚动时覆盖表体内容 */
+.table-wrapper .table-header {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  background-color: rgb(249 250 251);
+}
+
+.dark .table-wrapper .table-header {
+  background-color: rgb(31 41 55);
+}
+
+/* 表体保持在表头下方 */
+.table-body {
+  position: relative;
+  z-index: 0;
+}
+
+/* 所有表头单元格固定在顶部 */
+.sticky-header-cell {
+  position: sticky;
+  top: 0;
+  z-index: 210; /* 必须高于所有表体内容 */
+  background-color: rgb(249 250 251);
+}
+
+.dark .sticky-header-cell {
+  background-color: rgb(31 41 55);
+}
+
+/* Sticky 列基础样式 */
+.sticky-col {
+  position: sticky;
+  z-index: 20; /* 表体固定列 */
+}
+
+/* 单列固定（无勾选列时） */
+.sticky-col-left {
+  left: 0;
+}
+
+/* 双列固定（有勾选列时）：第一列（勾选） */
+.sticky-col-left-first {
+  left: 0;
+}
+
+/* 双列固定（有勾选列时）：第二列（名称） */
+.sticky-col-left-second {
+  left: var(--select-col-width);
+}
+
+/* 操作列固定 */
+.sticky-col-right {
+  right: 0;
+}
+
+/* 表头 sticky 列 - 需要比普通表头单元格更高的 z-index */
+.sticky-header-cell.sticky-col {
+  z-index: 220; /* 高于普通表头单元格和表体固定列 */
+}
+
+/* 表体 sticky 列背景 */
+tbody .sticky-col {
+  background-color: white;
+}
+
+.dark tbody .sticky-col {
+  background-color: rgb(17 24 39);
+}
+
+/* hover 状态保持 */
+tbody tr:hover .sticky-col {
+  background-color: rgb(249 250 251);
+}
+
+.dark tbody tr:hover .sticky-col {
+  background-color: rgb(31 41 55);
+}
+
+/* 阴影只在可滚动时显示 */
+/* 单列固定右侧阴影 */
+.is-scrollable .sticky-col-left::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  transform: translateX(100%);
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+/* 双列固定：只在第二列显示阴影 */
+.is-scrollable .sticky-col-left-second::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  transform: translateX(100%);
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+/* 操作列左侧阴影 */
+.is-scrollable .sticky-col-right::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 10px;
+  transform: translateX(-100%);
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+/* 暗色模式阴影 */
+.dark .is-scrollable .sticky-col-left::after,
+.dark .is-scrollable .sticky-col-left-second::after {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
+}
+
+.dark .is-scrollable .sticky-col-right::before {
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
+}
+</style>
--- a/frontend/src/components/common/DateRangePicker.vue
+++ b/frontend/src/components/common/DateRangePicker.vue
@@ -135,7 +135,22 @@ const localStartDate = ref(props.startDate)
 const localEndDate = ref(props.endDate)
 const activePreset = ref<string | null>('7days')

-const today = computed(() => new Date().toISOString().split('T')[0])
+const today = computed(() => {
+  // Use local timezone to avoid UTC timezone issues
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = String(now.getMonth() + 1).padStart(2, '0')
+  const day = String(now.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+})
+
+// Helper function to format date to YYYY-MM-DD using local timezone
+const formatDateToString = (date: Date): string => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}

 const presets: DatePreset[] = [
  {
@@ -152,7 +167,7 @@ const presets: DatePreset[] = [
    getRange: () => {
      const d = new Date()
      d.setDate(d.getDate() - 1)
-      const yesterday = d.toISOString().split('T')[0]
+      const yesterday = formatDateToString(d)
      return { start: yesterday, end: yesterday }
    }
  },
@@ -163,7 +178,7 @@ const presets: DatePreset[] = [
      const end = today.value
      const d = new Date()
      d.setDate(d.getDate() - 6)
-      const start = d.toISOString().split('T')[0]
+      const start = formatDateToString(d)
      return { start, end }
    }
  },
@@ -174,7 +189,7 @@ const presets: DatePreset[] = [
      const end = today.value
      const d = new Date()
      d.setDate(d.getDate() - 13)
-      const start = d.toISOString().split('T')[0]
+      const start = formatDateToString(d)
      return { start, end }
    }
  },
@@ -185,7 +200,7 @@ const presets: DatePreset[] = [
      const end = today.value
      const d = new Date()
      d.setDate(d.getDate() - 29)
-      const start = d.toISOString().split('T')[0]
+      const start = formatDateToString(d)
      return { start, end }
    }
  },
@@ -194,7 +209,7 @@ const presets: DatePreset[] = [
    value: 'thisMonth',
    getRange: () => {
      const now = new Date()
-      const start = new Date(now.getFullYear(), now.getMonth(), 1).toISOString().split('T')[0]
+      const start = formatDateToString(new Date(now.getFullYear(), now.getMonth(), 1))
      return { start, end: today.value }
    }
  },
@@ -203,8 +218,8 @@ const presets: DatePreset[] = [
    value: 'lastMonth',
    getRange: () => {
      const now = new Date()
-      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1).toISOString().split('T')[0]
-      const end = new Date(now.getFullYear(), now.getMonth(), 0).toISOString().split('T')[0]
+      const start = formatDateToString(new Date(now.getFullYear(), now.getMonth() - 1, 1))
+      const end = formatDateToString(new Date(now.getFullYear(), now.getMonth(), 0))
      return { start, end }
    }
  }
--- a/frontend/src/components/common/EmptyState.vue
+++ b/frontend/src/components/common/EmptyState.vue
@@ -25,7 +25,7 @@

    <!-- Title -->
    <h3 class="empty-state-title">
-      {{ title }}
+      {{ displayTitle }}
    </h3>

    <!-- Description -->
@@ -61,8 +61,12 @@
 </template>

 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { Component } from 'vue'

+const { t } = useI18n()
+
 interface Props {
  icon?: Component | string
  title?: string
@@ -73,11 +77,12 @@ interface Props {
  message?: string
 }

-withDefaults(defineProps<Props>(), {
-  title: 'No data found',
+const props = withDefaults(defineProps<Props>(), {
  description: '',
  actionIcon: true
 })

+const displayTitle = computed(() => props.title || t('common.noData'))
+
 defineEmits(['action'])
 </script>
--- a/frontend/src/components/common/GroupSelector.vue
+++ b/frontend/src/components/common/GroupSelector.vue
@@ -11,7 +11,7 @@
        v-for="group in filteredGroups"
        :key="group.id"
        class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-white dark:hover:bg-dark-700"
-        :title="`${group.rate_multiplier}x rate · ${group.account_count || 0} accounts`"
+        :title="t('admin.groups.rateAndAccounts', { rate: group.rate_multiplier, count: group.account_count || 0 })"
      >
        <input
          type="checkbox"
@@ -40,9 +40,12 @@

 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import GroupBadge from './GroupBadge.vue'
 import type { Group, GroupPlatform } from '@/types'

+const { t } = useI18n()
+
 interface Props {
  modelValue: number[]
  groups: Group[]
--- a/frontend/src/components/common/Pagination.vue
+++ b/frontend/src/components/common/Pagination.vue
@@ -202,14 +202,10 @@ const goToPage = (newPage: number) => {
  }
 }

-const handlePageSizeChange = (value: string | number | null) => {
-  if (value === null) return
+const handlePageSizeChange = (value: string | number | boolean | null) => {
+  if (value === null || typeof value === 'boolean') return
  const newPageSize = typeof value === 'string' ? parseInt(value) : value
  emit('update:pageSize', newPageSize)
-  // Reset to first page when page size changes
-  if (props.page !== 1) {
-    emit('update:page', 1)
-  }
 }
 </script>

--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -30,7 +30,11 @@
    </button>

    <Transition name="select-dropdown">
-      <div v-if="isOpen" class="select-dropdown">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        :class="['select-dropdown', dropdownPosition === 'top' && 'select-dropdown-top']"
+      >
        <!-- Search input -->
        <div v-if="searchable" class="select-search">
          <svg
@@ -60,7 +64,7 @@
        <div class="select-options">
          <div
            v-for="option in filteredOptions"
-            :key="getOptionValue(option) ?? undefined"
+            :key="`${typeof getOptionValue(option)}:${String(getOptionValue(option) ?? '')}`"
            @click="selectOption(option)"
            :class="['select-option', isSelected(option) && 'select-option-selected']"
          >
@@ -96,14 +100,14 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n()

 export interface SelectOption {
-  value: string | number | null
+  value: string | number | boolean | null
  label: string
  disabled?: boolean
  [key: string]: unknown
 }

 interface Props {
-  modelValue: string | number | null | undefined
+  modelValue: string | number | boolean | null | undefined
  options: SelectOption[] | Array<Record<string, unknown>>
  placeholder?: string
  disabled?: boolean
@@ -116,8 +120,8 @@ interface Props {
 }

 interface Emits {
-  (e: 'update:modelValue', value: string | number | null): void
-  (e: 'change', value: string | number | null, option: SelectOption | null): void
+  (e: 'update:modelValue', value: string | number | boolean | null): void
+  (e: 'change', value: string | number | boolean | null, option: SelectOption | null): void
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -141,14 +145,16 @@ const isOpen = ref(false)
 const searchQuery = ref('')
 const containerRef = ref<HTMLElement | null>(null)
 const searchInputRef = ref<HTMLInputElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const dropdownPosition = ref<'bottom' | 'top'>('bottom')

 const getOptionValue = (
  option: SelectOption | Record<string, unknown>
-): string | number | null | undefined => {
+): string | number | boolean | null | undefined => {
  if (typeof option === 'object' && option !== null) {
-    return option[props.valueKey] as string | number | null | undefined
+    return option[props.valueKey] as string | number | boolean | null | undefined
  }
-  return option as string | number | null
+  return option as string | number | boolean | null
 }

 const getOptionLabel = (option: SelectOption | Record<string, unknown>): string => {
@@ -184,13 +190,37 @@ const isSelected = (option: SelectOption | Record<string, unknown>): boolean =>
  return getOptionValue(option) === props.modelValue
 }

+const calculateDropdownPosition = () => {
+  if (!containerRef.value) return
+
+  nextTick(() => {
+    if (!containerRef.value || !dropdownRef.value) return
+
+    const triggerRect = containerRef.value.getBoundingClientRect()
+    const dropdownHeight = dropdownRef.value.offsetHeight || 240 // Max height fallback
+    const viewportHeight = window.innerHeight
+    const spaceBelow = viewportHeight - triggerRect.bottom
+    const spaceAbove = triggerRect.top
+
+    // If not enough space below but enough space above, show dropdown on top
+    if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+      dropdownPosition.value = 'top'
+    } else {
+      dropdownPosition.value = 'bottom'
+    }
+  })
+}
+
 const toggle = () => {
  if (props.disabled) return
  isOpen.value = !isOpen.value
-  if (isOpen.value && props.searchable) {
-    nextTick(() => {
-      searchInputRef.value?.focus()
-    })
+  if (isOpen.value) {
+    calculateDropdownPosition()
+    if (props.searchable) {
+      nextTick(() => {
+        searchInputRef.value?.focus()
+      })
+    }
  }
 }

@@ -275,6 +305,10 @@ onUnmounted(() => {
  @apply overflow-hidden;
 }

+.select-dropdown-top {
+  @apply bottom-full mb-2 mt-0;
+}
+
 .select-search {
  @apply flex items-center gap-2 px-3 py-2;
  @apply border-b border-gray-100 dark:border-dark-700;
@@ -322,6 +356,17 @@ onUnmounted(() => {
 .select-dropdown-enter-from,
 .select-dropdown-leave-to {
  opacity: 0;
+}
+
+/* Animation for dropdown opening downward (default) */
+.select-dropdown:not(.select-dropdown-top).select-dropdown-enter-from,
+.select-dropdown:not(.select-dropdown-top).select-dropdown-leave-to {
  transform: translateY(-8px);
 }
+
+/* Animation for dropdown opening upward */
+.select-dropdown-top.select-dropdown-enter-from,
+.select-dropdown-top.select-dropdown-leave-to {
+  transform: translateY(8px);
+}
 </style>
--- a/frontend/src/components/common/SubscriptionProgressMini.vue
+++ b/frontend/src/components/common/SubscriptionProgressMini.vue
@@ -178,17 +178,19 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useI18n } from 'vue-i18n'
-import subscriptionsAPI from '@/api/subscriptions'
+import { useSubscriptionStore } from '@/stores'
 import type { UserSubscription } from '@/types'

 const { t } = useI18n()

+const subscriptionStore = useSubscriptionStore()
+
 const containerRef = ref<HTMLElement | null>(null)
 const tooltipOpen = ref(false)
-const activeSubscriptions = ref<UserSubscription[]>([])
-const loading = ref(false)

-const hasActiveSubscriptions = computed(() => activeSubscriptions.value.length > 0)
+// Use store data instead of local state
+const activeSubscriptions = computed(() => subscriptionStore.activeSubscriptions)
+const hasActiveSubscriptions = computed(() => subscriptionStore.hasActiveSubscriptions)

 const displaySubscriptions = computed(() => {
  // Sort by most usage (highest percentage first)
@@ -246,7 +248,7 @@ function formatDaysRemaining(expiresAt: string): string {
  const diff = expires.getTime() - now.getTime()
  if (diff < 0) return t('subscriptionProgress.expired')
  const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
-  if (days === 0) return t('subscriptionProgress.expirestoday')
+  if (days === 0) return t('subscriptionProgress.expiresToday')
  if (days === 1) return t('subscriptionProgress.expiresTomorrow')
  return t('subscriptionProgress.daysRemaining', { days })
 }
@@ -275,37 +277,18 @@ function handleClickOutside(event: MouseEvent) {
  }
 }

-async function loadSubscriptions() {
-  try {
-    loading.value = true
-    activeSubscriptions.value = await subscriptionsAPI.getActiveSubscriptions()
-  } catch (error) {
-    console.error('Failed to load subscriptions:', error)
-    activeSubscriptions.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
 onMounted(() => {
  document.addEventListener('click', handleClickOutside)
-  loadSubscriptions()
+  // Trigger initial fetch if not already loaded
+  // The actual data loading is handled by App.vue globally
+  subscriptionStore.fetchActiveSubscriptions().catch((error) => {
+    console.error('Failed to load subscriptions in SubscriptionProgressMini:', error)
+  })
 })

 onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
 })
-
-// Refresh subscriptions periodically (every 5 minutes)
-let refreshInterval: ReturnType<typeof setInterval> | null = null
-onMounted(() => {
-  refreshInterval = setInterval(loadSubscriptions, 5 * 60 * 1000)
-})
-onBeforeUnmount(() => {
-  if (refreshInterval) {
-    clearInterval(refreshInterval)
-  }
-})
 </script>

 <style scoped>
--- a/frontend/src/components/common/VersionBadge.vue
+++ b/frontend/src/components/common/VersionBadge.vue
@@ -10,7 +10,7 @@
            ? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50'
            : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-800 dark:text-dark-400 dark:hover:bg-dark-700'
        ]"
-        :title="hasUpdate ? 'New version available' : 'Up to date'"
+        :title="hasUpdate ? t('version.updateAvailable') : t('version.upToDate')"
      >
        <span v-if="currentVersion" class="font-medium">v{{ currentVersion }}</span>
        <span
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -2,6 +2,7 @@
 export { default as DataTable } from './DataTable.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as Modal } from './Modal.vue'
+export { default as BaseDialog } from './BaseDialog.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
 export { default as StatCard } from './StatCard.vue'
 export { default as Toast } from './Toast.vue'
--- a/frontend/src/components/keys/UseKeyModal.vue
+++ b/frontend/src/components/keys/UseKeyModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <Modal
+  <BaseDialog
    :show="show"
    :title="t('keys.useKeyModal.title')"
-    size="lg"
+    width="wide"
    @close="emit('close')"
  >
    <div class="space-y-4">
@@ -112,14 +112,14 @@
        </button>
      </div>
    </template>
-  </Modal>
+  </BaseDialog>
 </template>

 <script setup lang="ts">
 import { ref, computed, h, watch, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from '@/components/common/Modal.vue'
-import { useAppStore } from '@/stores/app'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import { useClipboard } from '@/composables/useClipboard'
 import type { GroupPlatform } from '@/types'

 interface Props {
@@ -150,7 +150,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()

 const { t } = useI18n()
-const appStore = useAppStore()
+const { copyToClipboard: clipboardCopy } = useClipboard()

 const copiedIndex = ref<number | null>(null)
 const activeTab = ref<string>('unix')
@@ -340,14 +340,12 @@ ${key('requires_openai_auth')} ${operator('=')} ${keyword('true')}`
 }

 const copyContent = async (content: string, index: number) => {
-  try {
-    await navigator.clipboard.writeText(content)
+  const success = await clipboardCopy(content, t('keys.copied'))
+  if (success) {
    copiedIndex.value = index
    setTimeout(() => {
      copiedIndex.value = null
    }, 2000)
-  } catch (error) {
-    appStore.showError(t('common.copyFailed'))
  }
 }
 </script>
--- a/frontend/src/components/layout/TablePageLayout.vue
+++ b/frontend/src/components/layout/TablePageLayout.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="table-page-layout" :class="{ 'mobile-mode': isMobile }">
+    <!-- 固定区域：操作按钮 -->
+    <div v-if="$slots.actions" class="layout-section-fixed">
+      <slot name="actions" />
+    </div>
+
+    <!-- 固定区域：搜索和过滤器 -->
+    <div v-if="$slots.filters" class="layout-section-fixed">
+      <slot name="filters" />
+    </div>
+
+    <!-- 滚动区域：表格 -->
+    <div class="layout-section-scrollable">
+      <div class="card table-scroll-container">
+        <slot name="table" />
+      </div>
+    </div>
+
+    <!-- 固定区域：分页器 -->
+    <div v-if="$slots.pagination" class="layout-section-fixed">
+      <slot name="pagination" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 1024
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+</script>
+
+<style scoped>
+/* 桌面端：Flexbox 布局 */
+.table-page-layout {
+  @apply flex flex-col gap-6;
+  height: calc(100vh - 64px - 4rem); /* 减去 header + lg:p-8 的上下padding */
+}
+
+.layout-section-fixed {
+  @apply flex-shrink-0;
+}
+
+.layout-section-scrollable {
+  @apply flex-1 min-h-0 flex flex-col;
+}
+
+/* 表格滚动容器 - 增强版表体滚动方案 */
+.table-scroll-container {
+  @apply flex flex-col overflow-hidden h-full bg-white dark:bg-dark-800 rounded-2xl border border-gray-200 dark:border-dark-700 shadow-sm;
+}
+
+.table-scroll-container :deep(.table-wrapper) {
+  @apply flex-1 overflow-x-auto overflow-y-auto;
+  /* 确保横向滚动条显示在最底部 */
+  scrollbar-gutter: stable;
+}
+
+.table-scroll-container :deep(table) {
+  @apply w-full;
+  min-width: max-content; /* 关键：确保表格宽度根据内容撑开，从而触发横向滚动 */
+  display: table; /* 使用标准 table 布局以支持 sticky 列 */
+}
+
+.table-scroll-container :deep(thead) {
+  @apply bg-gray-50/80 dark:bg-dark-800/80 backdrop-blur-sm;
+}
+
+.table-scroll-container :deep(tbody) {
+  /* 保持默认 table-row-group 显示，不使用 block */
+}
+
+.table-scroll-container :deep(th) {
+  /* 表头高度和文字加粗优化 */
+  @apply px-5 py-4 text-left text-sm font-bold text-gray-900 dark:text-white border-b border-gray-200 dark:border-dark-700;
+  @apply uppercase tracking-wider; /* 让表头更有设计感 */
+}
+
+.table-scroll-container :deep(td) {
+  @apply px-5 py-4 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-dark-800;
+}
+
+/* 移动端：恢复正常滚动 */
+.table-page-layout.mobile-mode .table-scroll-container {
+  @apply h-auto overflow-visible border-none shadow-none bg-transparent;
+}
+
+.table-page-layout.mobile-mode .layout-section-scrollable {
+  @apply flex-none min-h-fit;
+}
+
+.table-page-layout.mobile-mode .table-scroll-container :deep(.table-wrapper) {
+  @apply overflow-visible;
+}
+
+.table-page-layout.mobile-mode .table-scroll-container :deep(table) {
+  @apply flex-none;
+  display: table;
+  min-width: 100%;
+}
+</style>
--- a/frontend/src/composables/useClipboard.ts
+++ b/frontend/src/composables/useClipboard.ts
@@ -1,40 +1,65 @@
 import { ref } from 'vue'
 import { useAppStore } from '@/stores/app'

+/**
+ * 检测是否支持 Clipboard API（需要安全上下文：HTTPS/localhost）
+ */
+function isClipboardSupported(): boolean {
+  return !!(navigator.clipboard && window.isSecureContext)
+}
+
+/**
+ * 降级方案：使用 textarea + execCommand
+ * 使用 textarea 而非 input，以正确处理多行文本
+ */
+function fallbackCopy(text: string): boolean {
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.style.cssText = 'position:fixed;left:-9999px;top:-9999px'
+  document.body.appendChild(textarea)
+  textarea.select()
+  try {
+    return document.execCommand('copy')
+  } finally {
+    document.body.removeChild(textarea)
+  }
+}
+
 export function useClipboard() {
  const appStore = useAppStore()
  const copied = ref(false)

-  const copyToClipboard = async (text: string, successMessage = 'Copied to clipboard') => {
+  const copyToClipboard = async (
+    text: string,
+    successMessage = 'Copied to clipboard'
+  ): Promise<boolean> => {
    if (!text) return false

-    try {
-      await navigator.clipboard.writeText(text)
-      copied.value = true
-      appStore.showSuccess(successMessage)
-      setTimeout(() => {
-        copied.value = false
-      }, 2000)
-      return true
-    } catch {
-      // Fallback for older browsers
-      const input = document.createElement('input')
-      input.value = text
-      document.body.appendChild(input)
-      input.select()
-      document.execCommand('copy')
-      document.body.removeChild(input)
-      copied.value = true
-      appStore.showSuccess(successMessage)
-      setTimeout(() => {
-        copied.value = false
-      }, 2000)
-      return true
+    let success = false
+
+    if (isClipboardSupported()) {
+      try {
+        await navigator.clipboard.writeText(text)
+        success = true
+      } catch {
+        success = fallbackCopy(text)
+      }
+    } else {
+      success = fallbackCopy(text)
    }
+
+    if (success) {
+      copied.value = true
+      appStore.showSuccess(successMessage)
+      setTimeout(() => {
+        copied.value = false
+      }, 2000)
+    } else {
+      appStore.showError('Copy failed')
+    }
+
+    return success
  }

-  return {
-    copied,
-    copyToClipboard
-  }
+  return { copied, copyToClipboard }
 }
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -30,13 +30,61 @@ export default {
      title: 'Supported Providers',
      description: 'Unified API interface for AI services',
      supported: 'Supported',
-      soon: 'Soon'
+      soon: 'Soon',
+      claude: 'Claude',
+      gemini: 'Gemini',
+      more: 'More'
    },
    footer: {
      allRightsReserved: 'All rights reserved.'
    }
  },

+  // Setup Wizard
+  setup: {
+    title: 'Sub2API Setup',
+    description: 'Configure your Sub2API instance',
+    database: {
+      title: 'Database Configuration',
+      host: 'Host',
+      port: 'Port',
+      username: 'Username',
+      password: 'Password',
+      databaseName: 'Database Name',
+      sslMode: 'SSL Mode',
+      passwordPlaceholder: 'Password',
+      ssl: {
+        disable: 'Disable',
+        require: 'Require',
+        verifyCa: 'Verify CA',
+        verifyFull: 'Verify Full'
+      }
+    },
+    redis: {
+      title: 'Redis Configuration',
+      host: 'Host',
+      port: 'Port',
+      password: 'Password (optional)',
+      database: 'Database',
+      passwordPlaceholder: 'Password'
+    },
+    admin: {
+      title: 'Admin Account',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+      passwordPlaceholder: 'Min 6 characters',
+      confirmPasswordPlaceholder: 'Confirm password',
+      passwordMismatch: 'Passwords do not match'
+    },
+    ready: {
+      title: 'Ready to Install',
+      database: 'Database',
+      redis: 'Redis',
+      adminEmail: 'Admin Email'
+    }
+  },
+
  // Common
  common: {
    loading: 'Loading...',
@@ -71,6 +119,7 @@ export default {
    info: 'Info',
    active: 'Active',
    inactive: 'Inactive',
+    more: 'More',
    close: 'Close',
    enabled: 'Enabled',
    disabled: 'Disabled',
@@ -84,7 +133,14 @@ export default {
    searchPlaceholder: 'Search...',
    noOptionsFound: 'No options found',
    saving: 'Saving...',
-    refresh: 'Refresh'
+    refresh: 'Refresh',
+    time: {
+      never: 'Never',
+      justNow: 'Just now',
+      minutesAgo: '{n}m ago',
+      hoursAgo: '{n}h ago',
+      daysAgo: '{n}d ago'
+    }
  },

  // Navigation
@@ -142,7 +198,20 @@ export default {
    accountCreatedSuccess: 'Account created successfully! Welcome to {siteName}.',
    turnstileExpired: 'Verification expired, please try again',
    turnstileFailed: 'Verification failed, please try again',
-    completeVerification: 'Please complete the verification'
+    completeVerification: 'Please complete the verification',
+    verifyYourEmail: 'Verify Your Email',
+    sessionExpired: 'Session expired',
+    sessionExpiredDesc: 'Please go back to the registration page and start again.',
+    verificationCode: 'Verification Code',
+    verificationCodeHint: 'Enter the 6-digit code sent to your email',
+    sendingCode: 'Sending...',
+    clickToResend: 'Click to resend code',
+    resendCode: 'Resend verification code',
+    oauth: {
+      code: 'Code',
+      state: 'State',
+      fullUrl: 'Full URL'
+    }
  },

  // Dashboard
@@ -207,7 +276,7 @@ export default {
    created: 'Created',
    copyToClipboard: 'Copy to clipboard',
    copied: 'Copied!',
-    importToCcSwitch: 'Import to CC Switch',
+    importToCcSwitch: 'Import to CCS',
    enable: 'Enable',
    disable: 'Disable',
    nameLabel: 'Name',
@@ -276,6 +345,8 @@ export default {
    allApiKeys: 'All API Keys',
    timeRange: 'Time Range',
    exportCsv: 'Export CSV',
+    exporting: 'Exporting...',
+    preparingExport: 'Preparing export...',
    model: 'Model',
    type: 'Type',
    tokens: 'Tokens',
@@ -296,6 +367,7 @@ export default {
    failedToLoad: 'Failed to load usage logs',
    noDataToExport: 'No data to export',
    exportSuccess: 'Usage data exported successfully',
+    exportFailed: 'Failed to export usage data',
    billingType: 'Billing',
    balance: 'Balance',
    subscription: 'Subscription'
@@ -338,7 +410,8 @@ export default {
    subscriptionDays: '{days} days',
    days: ' days',
    codeRedeemSuccess: 'Code redeemed successfully!',
-    failedToRedeem: 'Failed to redeem code. Please check the code and try again.'
+    failedToRedeem: 'Failed to redeem code. Please check the code and try again.',
+    subscriptionRefreshFailed: 'Redeemed successfully, but failed to refresh subscription status.'
  },

  // Profile
@@ -359,6 +432,7 @@ export default {
    updating: 'Updating...',
    updateSuccess: 'Profile updated successfully',
    updateFailed: 'Failed to update profile',
+    usernameRequired: 'Username is required',
    changePassword: 'Change Password',
    currentPassword: 'Current Password',
    newPassword: 'New Password',
@@ -377,6 +451,12 @@ export default {
    noData: 'No data found'
  },

+  // Table
+  table: {
+    expandActions: 'Expand More Actions',
+    collapseActions: 'Collapse Actions'
+  },
+
  // Pagination
  pagination: {
    showing: 'Showing',
@@ -455,6 +535,7 @@ export default {
      actual: 'Actual',
      standard: 'Standard',
      noDataAvailable: 'No data available',
+      recentUsage: 'Recent Usage',
      failedToLoad: 'Failed to load dashboard statistics'
    },

@@ -507,9 +588,13 @@ export default {
      noSubscription: 'No subscription',
      daysRemaining: '{days}d',
      expired: 'Expired',
+      disable: 'Disable',
+      enable: 'Enable',
      disableUser: 'Disable User',
      enableUser: 'Enable User',
      viewApiKeys: 'View API Keys',
+      groups: 'Groups',
+      apiKeys: 'API Keys',
      userApiKeys: 'User API Keys',
      noApiKeys: 'This user has no API keys',
      group: 'Group',
@@ -584,6 +669,7 @@ export default {
        actions: 'Actions',
        billingType: 'Billing Type'
      },
+      rateAndAccounts: '{rate}x rate · {count} accounts',
      accountsCount: '{count} accounts',
      form: {
        name: 'Name',
@@ -742,6 +828,13 @@ export default {
        openai: 'OpenAI',
        gemini: 'Gemini'
      },
+      types: {
+        oauth: 'OAuth',
+        chatgptOauth: 'ChatGPT OAuth',
+        responsesApi: 'Responses API',
+        googleOauth: 'Google OAuth',
+        codeAssist: 'Code Assist'
+      },
      columns: {
        name: 'Name',
        platformType: 'Platform/Type',
@@ -1022,6 +1115,7 @@ export default {
        todayOverview: 'Today Overview',
        cost: 'Cost',
        requests: 'Requests',
+        tokens: 'Tokens',
        highestCostDay: 'Highest Cost Day',
        highestRequestDay: 'Highest Request Day',
        date: 'Date',
@@ -1037,6 +1131,9 @@ export default {
        todayCost: 'Today Cost',
        usageTrend: '30-Day Cost & Request Trend',
        noData: 'No usage data available for this account'
+      },
+      usageWindow: {
+        statsTitle: '5-Hour Window Usage Statistics'
      }
    },

@@ -1070,6 +1167,10 @@ export default {
      enterProxyName: 'Enter proxy name',
      leaveEmptyToKeep: 'Leave empty to keep current',
      optionalAuth: 'Optional authentication',
+      form: {
+        hostPlaceholder: 'proxy.example.com',
+        portPlaceholder: '8080'
+      },
      noProxiesYet: 'No proxies yet',
      createFirstProxy: 'Create your first proxy to route traffic through it.',
      // Batch import
@@ -1077,9 +1178,9 @@ export default {
      batchAdd: 'Quick Add',
      batchInput: 'Proxy List',
      batchInputPlaceholder:
-        "Enter one proxy per line in the following formats:\nsocks5://user:pass{'@'}192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass{'@'}proxy.example.com:443",
+        "Enter one proxy per line in the following formats:\nsocks5://user:pass@192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass@proxy.example.com:443",
      batchInputHint:
-        "Supports http, https, socks5 protocols. Format: protocol://[user:pass{'@'}]host:port",
+        "Supports http, https, socks5 protocols. Format: protocol://[user:pass@]host:port",
      parsedCount: '{count} valid',
      invalidCount: '{count} invalid',
      duplicateCount: '{count} duplicate',
@@ -1174,6 +1275,18 @@ export default {
      searchUserPlaceholder: 'Search user by email...',
      selectedUser: 'Selected',
      user: 'User',
+      account: 'Account',
+      group: 'Group',
+      requestId: 'Request ID',
+      allModels: 'All Models',
+      allAccounts: 'All Accounts',
+      allGroups: 'All Groups',
+      allTypes: 'All Types',
+      allBillingTypes: 'All Billing',
+      inputCost: 'Input Cost',
+      outputCost: 'Output Cost',
+      cacheCreationCost: 'Cache Creation Cost',
+      cacheReadCost: 'Cache Read Cost',
      failedToLoad: 'Failed to load usage records'
    },

@@ -1211,16 +1324,20 @@ export default {
        title: 'Site Settings',
        description: 'Customize site branding',
        siteName: 'Site Name',
+        siteNamePlaceholder: 'Sub2API',
        siteNameHint: 'Displayed in emails and page titles',
        siteSubtitle: 'Site Subtitle',
+        siteSubtitlePlaceholder: 'Subscription to API Conversion Platform',
        siteSubtitleHint: 'Displayed on login and register pages',
        apiBaseUrl: 'API Base URL',
+        apiBaseUrlPlaceholder: 'https://api.example.com',
        apiBaseUrlHint:
          'Used for "Use Key" and "Import to CC Switch" features. Leave empty to use current site URL.',
        contactInfo: 'Contact Info',
        contactInfoPlaceholder: 'e.g., QQ: 123456789',
        contactInfoHint: 'Customer support contact info, displayed on redeem page, profile, etc.',
        docUrl: 'Documentation URL',
+        docUrlPlaceholder: 'https://docs.example.com',
        docUrlHint: 'Link to your documentation site. Leave empty to hide the documentation link.',
        siteLogo: 'Site Logo',
        uploadImage: 'Upload Image',
@@ -1236,12 +1353,18 @@ export default {
        testConnection: 'Test Connection',
        testing: 'Testing...',
        host: 'SMTP Host',
+        hostPlaceholder: 'smtp.gmail.com',
        port: 'SMTP Port',
+        portPlaceholder: '587',
        username: 'SMTP Username',
+        usernamePlaceholder: "your-email{'@'}gmail.com",
        password: 'SMTP Password',
+        passwordPlaceholder: '********',
        passwordHint: 'Leave empty to keep existing password',
        fromEmail: 'From Email',
+        fromEmailPlaceholder: "noreply{'@'}example.com",
        fromName: 'From Name',
+        fromNamePlaceholder: 'Sub2API',
        useTls: 'Use TLS',
        useTlsHint: 'Enable TLS encryption for SMTP connection'
      },
@@ -1249,6 +1372,7 @@ export default {
        title: 'Send Test Email',
        description: 'Send a test email to verify your SMTP configuration',
        recipientEmail: 'Recipient Email',
+        recipientEmailPlaceholder: "test{'@'}example.com",
        sendTestEmail: 'Send Test Email',
        sending: 'Sending...',
        enterRecipientHint: 'Please enter a recipient email address'
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -27,13 +27,61 @@ export default {
      title: '支持的服务商',
      description: 'AI 服务的统一 API 接口',
      supported: '已支持',
-      soon: '即将推出'
+      soon: '即将推出',
+      claude: 'Claude',
+      gemini: 'Gemini',
+      more: '更多'
    },
    footer: {
      allRightsReserved: '保留所有权利。'
    }
  },

+  // Setup Wizard
+  setup: {
+    title: 'Sub2API 安装向导',
+    description: '配置您的 Sub2API 实例',
+    database: {
+      title: '数据库配置',
+      host: '主机',
+      port: '端口',
+      username: '用户名',
+      password: '密码',
+      databaseName: '数据库名称',
+      sslMode: 'SSL 模式',
+      passwordPlaceholder: '密码',
+      ssl: {
+        disable: '禁用',
+        require: '要求',
+        verifyCa: '验证 CA',
+        verifyFull: '完全验证'
+      }
+    },
+    redis: {
+      title: 'Redis 配置',
+      host: '主机',
+      port: '端口',
+      password: '密码（可选）',
+      database: '数据库',
+      passwordPlaceholder: '密码'
+    },
+    admin: {
+      title: '管理员账户',
+      email: '邮箱',
+      password: '密码',
+      confirmPassword: '确认密码',
+      passwordPlaceholder: '至少 6 个字符',
+      confirmPasswordPlaceholder: '确认密码',
+      passwordMismatch: '密码不匹配'
+    },
+    ready: {
+      title: '准备安装',
+      database: '数据库',
+      redis: 'Redis',
+      adminEmail: '管理员邮箱'
+    }
+  },
+
  // Common
  common: {
    loading: '加载中...',
@@ -68,6 +116,7 @@ export default {
    info: '提示',
    active: '启用',
    inactive: '禁用',
+    more: '更多',
    close: '关闭',
    enabled: '已启用',
    disabled: '已禁用',
@@ -81,7 +130,14 @@ export default {
    searchPlaceholder: '搜索...',
    noOptionsFound: '无匹配选项',
    saving: '保存中...',
-    refresh: '刷新'
+    refresh: '刷新',
+    time: {
+      never: '从未',
+      justNow: '刚刚',
+      minutesAgo: '{n}分钟前',
+      hoursAgo: '{n}小时前',
+      daysAgo: '{n}天前'
+    }
  },

  // Navigation
@@ -139,7 +195,20 @@ export default {
    accountCreatedSuccess: '账户创建成功！欢迎使用 {siteName}。',
    turnstileExpired: '验证已过期，请重试',
    turnstileFailed: '验证失败，请重试',
-    completeVerification: '请完成验证'
+    completeVerification: '请完成验证',
+    verifyYourEmail: '验证您的邮箱',
+    sessionExpired: '会话已过期',
+    sessionExpiredDesc: '请返回注册页面重新开始。',
+    verificationCode: '验证码',
+    verificationCodeHint: '请输入发送到您邮箱的6位验证码',
+    sendingCode: '发送中...',
+    clickToResend: '点击重新发送验证码',
+    resendCode: '重新发送验证码',
+    oauth: {
+      code: '授权码',
+      state: '状态',
+      fullUrl: '完整URL'
+    }
  },

  // Dashboard
@@ -204,7 +273,7 @@ export default {
    created: '创建时间',
    copyToClipboard: '复制到剪贴板',
    copied: '已复制！',
-    importToCcSwitch: '导入到 CC Switch',
+    importToCcSwitch: '导入到 CCS',
    enable: '启用',
    disable: '禁用',
    nameLabel: '名称',
@@ -272,6 +341,8 @@ export default {
    allApiKeys: '全部密钥',
    timeRange: '时间范围',
    exportCsv: '导出 CSV',
+    exporting: '导出中...',
+    preparingExport: '正在准备导出...',
    model: '模型',
    type: '类型',
    tokens: 'Token',
@@ -292,6 +363,7 @@ export default {
    failedToLoad: '加载使用记录失败',
    noDataToExport: '没有可导出的数据',
    exportSuccess: '使用数据导出成功',
+    exportFailed: '使用数据导出失败',
    billingType: '消费类型',
    balance: '余额',
    subscription: '订阅'
@@ -334,7 +406,8 @@ export default {
    subscriptionDays: '{days} 天',
    days: '天',
    codeRedeemSuccess: '兑换成功！',
-    failedToRedeem: '兑换失败，请检查兑换码后重试。'
+    failedToRedeem: '兑换失败，请检查兑换码后重试。',
+    subscriptionRefreshFailed: '兑换成功，但订阅状态刷新失败。'
  },

  // Profile
@@ -355,6 +428,7 @@ export default {
    updating: '更新中...',
    updateSuccess: '资料更新成功',
    updateFailed: '资料更新失败',
+    usernameRequired: '用户名不能为空',
    changePassword: '修改密码',
    currentPassword: '当前密码',
    newPassword: '新密码',
@@ -373,6 +447,12 @@ export default {
    noData: '暂无数据'
  },

+  // Table
+  table: {
+    expandActions: '展开更多操作',
+    collapseActions: '收起操作'
+  },
+
  // Pagination
  pagination: {
    showing: '显示',
@@ -527,9 +607,13 @@ export default {
      noSubscription: '暂无订阅',
      daysRemaining: '{days}天',
      expired: '已过期',
+      disable: '禁用',
+      enable: '启用',
      disableUser: '禁用用户',
      enableUser: '启用用户',
      viewApiKeys: '查看 API 密钥',
+      groups: '分组',
+      apiKeys: 'API密钥',
      userApiKeys: '用户 API 密钥',
      noApiKeys: '此用户暂无 API 密钥',
      group: '分组',
@@ -665,10 +749,13 @@ export default {
        priorityHint: '数值越高优先级越高，用于账号调度',
        statusLabel: '状态'
      },
-      exclusive: {
+      exclusiveObj: {
        yes: '是',
        no: '否'
      },
+      exclusive: '独占',
+      exclusiveHint: '启用后，此分组的用户将独占使用分配的账号',
+      rateMultiplierHint: '1.0 = 标准费率，0.5 = 半价，2.0 = 双倍',
      platforms: {
        all: '全部平台',
        claude: 'Claude',
@@ -689,6 +776,7 @@ export default {
      exclusiveFilter: '独占',
      nonExclusive: '非独占',
      public: '公开',
+      rateAndAccounts: '{rate}x 费率 · {count} 个账号',
      accountsCount: '{count} 个账号',
      enterGroupName: '请输入分组名称',
      optionalDescription: '可选描述',
@@ -813,6 +901,7 @@ export default {
      deleteConfirmMessage: "确定要删除账号 '{name}' 吗？",
      refreshCookie: '刷新 Cookie',
      testAccount: '测试账号',
+      searchAccounts: '搜索账号...',
      // Filter options
      allPlatforms: '全部平台',
      allTypes: '全部类型',
@@ -840,6 +929,19 @@ export default {
        lastUsed: '最近使用',
        actions: '操作'
      },
+      clearRateLimit: '清除速率限制',
+      testConnection: '测试连接',
+      reAuthorize: '重新授权',
+      refreshToken: '刷新令牌',
+      noAccountsYet: '暂无账号',
+      createFirstAccount: '添加 AI 平台账号以开始使用 API 网关。',
+      tokenRefreshed: 'Token 刷新成功',
+      accountDeleted: '账号删除成功',
+      rateLimitCleared: '速率限制已清除',
+      setupToken: 'Setup Token',
+      apiKey: 'API Key',
+      deleteConfirm: "确定要删除账号 '{name}' 吗？此操作无法撤销。",
+      failedToClearRateLimit: '清除速率限制失败',
      platforms: {
        claude: 'Claude',
        openai: 'OpenAI',
@@ -848,6 +950,10 @@ export default {
      },
      types: {
        oauth: 'OAuth',
+        chatgptOauth: 'ChatGPT OAuth',
+        responsesApi: 'Responses API',
+        googleOauth: 'Google OAuth',
+        codeAssist: 'Code Assist',
        api_key: 'API Key',
        cookie: 'Cookie'
      },
@@ -857,6 +963,9 @@ export default {
        error: '错误',
        cooldown: '冷却中'
      },
+      usageWindow: {
+        statsTitle: '5小时窗口用量统计'
+      },
      form: {
        nameLabel: '账号名称',
        namePlaceholder: '请输入账号名称',
@@ -1125,6 +1234,7 @@ export default {
        todayOverview: '今日概览',
        cost: '费用',
        requests: '请求',
+        tokens: 'Token',
        highestCostDay: '最高费用日',
        highestRequestDay: '最高请求日',
        date: '日期',
@@ -1217,8 +1327,8 @@ export default {
      batchAdd: '快捷添加',
      batchInput: '代理列表',
      batchInputPlaceholder:
-        "每行输入一个代理，支持以下格式：\nsocks5://user:pass{'@'}192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass{'@'}proxy.example.com:443",
-      batchInputHint: "支持 http、https、socks5 协议，格式：协议://[用户名:密码{'@'}]主机:端口",
+        "每行输入一个代理，支持以下格式：\nsocks5://user:pass@192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass@proxy.example.com:443",
+      batchInputHint: "支持 http、https、socks5 协议，格式：协议://[用户名:密码@]主机:端口",
      parsedCount: '有效 {count} 个',
      invalidCount: '无效 {count} 个',
      duplicateCount: '重复 {count} 个',
@@ -1364,6 +1474,18 @@ export default {
      searchUserPlaceholder: '按邮箱搜索用户...',
      selectedUser: '已选择',
      user: '用户',
+      account: '账户',
+      group: '分组',
+      requestId: '请求ID',
+      allModels: '全部模型',
+      allAccounts: '全部账户',
+      allGroups: '全部分组',
+      allTypes: '全部类型',
+      allBillingTypes: '全部计费',
+      inputCost: '输入成本',
+      outputCost: '输出成本',
+      cacheCreationCost: '缓存创建成本',
+      cacheReadCost: '缓存读取成本',
      failedToLoad: '加载使用记录失败'
    },

@@ -1402,15 +1524,19 @@ export default {
        description: '自定义站点品牌',
        siteName: '站点名称',
        siteNameHint: '显示在邮件和页面标题中',
+        siteNamePlaceholder: 'Sub2API',
        siteSubtitle: '站点副标题',
        siteSubtitleHint: '显示在登录和注册页面',
+        siteSubtitlePlaceholder: '订阅转 API 转换平台',
        apiBaseUrl: 'API 端点地址',
        apiBaseUrlHint: '用于"使用密钥"和"导入到 CC Switch"功能，留空则使用当前站点地址',
+        apiBaseUrlPlaceholder: 'https://api.example.com',
        contactInfo: '客服联系方式',
        contactInfoPlaceholder: '例如：QQ: 123456789',
        contactInfoHint: '填写客服联系方式，将展示在兑换页面、个人资料等位置',
        docUrl: '文档链接',
        docUrlHint: '文档网站的链接。留空则隐藏文档链接。',
+        docUrlPlaceholder: 'https://docs.example.com',
        siteLogo: '站点Logo',
        uploadImage: '上传图片',
        remove: '移除',
@@ -1425,12 +1551,18 @@ export default {
        testConnection: '测试连接',
        testing: '测试中...',
        host: 'SMTP 主机',
+        hostPlaceholder: 'smtp.gmail.com',
        port: 'SMTP 端口',
+        portPlaceholder: '587',
        username: 'SMTP 用户名',
+        usernamePlaceholder: "your-email{'@'}gmail.com",
        password: 'SMTP 密码',
+        passwordPlaceholder: '********',
        passwordHint: '留空以保留现有密码',
        fromEmail: '发件人邮箱',
+        fromEmailPlaceholder: "noreply{'@'}example.com",
        fromName: '发件人名称',
+        fromNamePlaceholder: 'Sub2API',
        useTls: '使用 TLS',
        useTlsHint: '为 SMTP 连接启用 TLS 加密'
      },
@@ -1438,6 +1570,7 @@ export default {
        title: '发送测试邮件',
        description: '发送测试邮件以验证 SMTP 配置',
        recipientEmail: '收件人邮箱',
+        recipientEmailPlaceholder: "test{'@'}example.com",
        sendTestEmail: '发送测试邮件',
        sending: '发送中...',
        enterRecipientHint: '请输入收件人邮箱地址'
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -5,6 +5,7 @@

 export { useAuthStore } from './auth'
 export { useAppStore } from './app'
+export { useSubscriptionStore } from './subscriptions'

 // Re-export types for convenience
 export type { User, LoginRequest, RegisterRequest, AuthResponse } from '@/types'
--- a/frontend/src/stores/subscriptions.ts
+++ b/frontend/src/stores/subscriptions.ts
@@ -0,0 +1,140 @@
+/**
+ * Subscription Store
+ * Global state management for user subscriptions with caching and deduplication
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import subscriptionsAPI from '@/api/subscriptions'
+import type { UserSubscription } from '@/types'
+
+// Cache TTL: 60 seconds
+const CACHE_TTL_MS = 60_000
+
+// Request generation counter to invalidate stale in-flight responses
+let requestGeneration = 0
+
+export const useSubscriptionStore = defineStore('subscriptions', () => {
+  // State
+  const activeSubscriptions = ref<UserSubscription[]>([])
+  const loading = ref(false)
+  const loaded = ref(false)
+  const lastFetchedAt = ref<number | null>(null)
+
+  // In-flight request deduplication
+  let activePromise: Promise<UserSubscription[]> | null = null
+
+  // Auto-refresh interval
+  let pollerInterval: ReturnType<typeof setInterval> | null = null
+
+  // Computed
+  const hasActiveSubscriptions = computed(() => activeSubscriptions.value.length > 0)
+
+  /**
+   * Fetch active subscriptions with caching and deduplication
+   * @param force - Force refresh even if cache is valid
+   */
+  async function fetchActiveSubscriptions(force = false): Promise<UserSubscription[]> {
+    const now = Date.now()
+
+    // Return cached data if valid
+    if (
+      !force &&
+      loaded.value &&
+      lastFetchedAt.value &&
+      now - lastFetchedAt.value < CACHE_TTL_MS
+    ) {
+      return activeSubscriptions.value
+    }
+
+    // Return in-flight request if exists (deduplication)
+    if (activePromise && !force) {
+      return activePromise
+    }
+
+    const currentGeneration = ++requestGeneration
+
+    // Start new request
+    loading.value = true
+    const requestPromise = subscriptionsAPI
+      .getActiveSubscriptions()
+      .then((data) => {
+        if (currentGeneration === requestGeneration) {
+          activeSubscriptions.value = data
+          loaded.value = true
+          lastFetchedAt.value = Date.now()
+        }
+        return data
+      })
+      .catch((error) => {
+        console.error('Failed to fetch active subscriptions:', error)
+        throw error
+      })
+      .finally(() => {
+        if (activePromise === requestPromise) {
+          loading.value = false
+          activePromise = null
+        }
+      })
+
+    activePromise = requestPromise
+
+    return activePromise
+  }
+
+  /**
+   * Start auto-refresh polling 
+   */
+  function startPolling() {
+    if (pollerInterval) return
+
+    pollerInterval = setInterval(() => {
+      fetchActiveSubscriptions(true).catch((error) => {
+        console.error('Subscription polling failed:', error)
+      })
+    }, 5 * 60 * 1000)
+  }
+
+  /**
+   * Stop auto-refresh polling
+   */
+  function stopPolling() {
+    if (pollerInterval) {
+      clearInterval(pollerInterval)
+      pollerInterval = null
+    }
+  }
+
+  /**
+   * Clear all subscription data and stop polling
+   */
+  function clear() {
+    requestGeneration++
+    activePromise = null
+    activeSubscriptions.value = []
+    loaded.value = false
+    lastFetchedAt.value = null
+    stopPolling()
+  }
+
+  /**
+   * Invalidate cache (force next fetch to reload)
+   */
+  function invalidateCache() {
+    lastFetchedAt.value = null
+  }
+
+  return {
+    // State
+    activeSubscriptions,
+    loading,
+    hasActiveSubscriptions,
+
+    // Actions
+    fetchActiveSubscriptions,
+    startPolling,
+    stopPolling,
+    clear,
+    invalidateCache
+  }
+})
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -307,6 +307,35 @@
    @apply flex items-center justify-end gap-3;
  }

+  /* ============ Dialog ============ */
+  .dialog-overlay {
+    @apply fixed inset-0 z-50;
+    @apply bg-black/40 dark:bg-black/60;
+    @apply flex items-center justify-center p-4;
+  }
+
+  .dialog-container {
+    @apply flex w-full flex-col;
+    @apply max-h-[90vh];
+    @apply rounded-2xl bg-white dark:bg-dark-800;
+    @apply shadow-xl;
+  }
+
+  .dialog-header {
+    @apply border-b border-gray-100 px-6 py-4 dark:border-dark-700;
+    @apply flex items-center justify-between;
+  }
+
+  .dialog-body {
+    @apply overflow-y-auto px-6 py-4;
+  }
+
+  .dialog-footer {
+    @apply border-t border-gray-100 px-6 py-4 dark:border-dark-700;
+    @apply bg-gray-50/60 dark:bg-dark-900/40;
+    @apply flex items-center justify-end gap-3;
+  }
+
  /* ============ Toast 通知 ============ */
  .toast {
    @apply fixed right-4 top-4 z-[100];
@@ -488,6 +517,17 @@
    @apply bg-gray-900 text-gray-100;
    @apply overflow-x-auto rounded-xl p-4;
  }
+
+  /* ============ 表格页面布局优化 ============ */
+  /* 表格容器 - 默认仅支持水平滚动 */
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  /* 表头固定时添加底部阴影，增强视觉层次 */
+  .table-wrapper thead.sticky {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  }
 }

@layer utilities {
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -442,22 +442,38 @@ export interface UsageLog {
  user_id: number
  api_key_id: number
  account_id: number | null
+  request_id: string
  model: string
+
+  group_id: number | null
+  subscription_id: number | null
+
  input_tokens: number
  output_tokens: number
  cache_creation_tokens: number
  cache_read_tokens: number
+  cache_creation_5m_tokens: number
+  cache_creation_1h_tokens: number
+
+  input_cost: number
+  output_cost: number
+  cache_creation_cost: number
+  cache_read_cost: number
  total_cost: number
  actual_cost: number
  rate_multiplier: number
+
  billing_type: BillingType
  stream: boolean
  duration_ms: number
  first_token_ms: number | null
  created_at: string
+
  user?: User
  api_key?: ApiKey
  account?: Account
+  group?: Group
+  subscription?: UserSubscription
 }

 export interface RedeemCode {
@@ -677,6 +693,11 @@ export interface UsageQueryParams {
  page_size?: number
  api_key_id?: number
  user_id?: number
+  account_id?: number
+  group_id?: number
+  model?: string
+  stream?: boolean
+  billing_type?: number
  start_date?: string
  end_date?: string
 }
--- a/frontend/src/utils/format.ts
+++ b/frontend/src/utils/format.ts
@@ -3,30 +3,32 @@
 * 参考 CRS 项目的 format.js 实现
 */

+import { i18n } from '@/i18n'
+
 /**
 * 格式化相对时间
 * @param date 日期字符串或 Date 对象
 * @returns 相对时间字符串，如 "5m ago", "2h ago", "3d ago"
 */
 export function formatRelativeTime(date: string | Date | null | undefined): string {
-  if (!date) return 'Never'
+  if (!date) return i18n.global.t('common.time.never')

  const now = new Date()
  const past = new Date(date)
  const diffMs = now.getTime() - past.getTime()

  // 处理未来时间或无效日期
-  if (diffMs < 0 || isNaN(diffMs)) return 'Never'
+  if (diffMs < 0 || isNaN(diffMs)) return i18n.global.t('common.time.never')

  const diffSecs = Math.floor(diffMs / 1000)
  const diffMins = Math.floor(diffSecs / 60)
  const diffHours = Math.floor(diffMins / 60)
  const diffDays = Math.floor(diffHours / 24)

-  if (diffDays > 0) return `${diffDays}d ago`
-  if (diffHours > 0) return `${diffHours}h ago`
-  if (diffMins > 0) return `${diffMins}m ago`
-  return 'Just now'
+  if (diffDays > 0) return i18n.global.t('common.time.daysAgo', { n: diffDays })
+  if (diffHours > 0) return i18n.global.t('common.time.hoursAgo', { n: diffHours })
+  if (diffMins > 0) return i18n.global.t('common.time.minutesAgo', { n: diffMins })
+  return i18n.global.t('common.time.justNow')
 }

 /**
@@ -114,3 +116,30 @@ export function formatDate(
    .replace('mm', minutes)
    .replace('ss', seconds)
 }
+
+/**
+ * 格式化日期（只显示日期部分）
+ * @param date 日期字符串或 Date 对象
+ * @returns 格式化后的日期字符串，格式为 YYYY-MM-DD
+ */
+export function formatDateOnly(date: string | Date | null | undefined): string {
+  return formatDate(date, 'YYYY-MM-DD')
+}
+
+/**
+ * 格式化日期时间（完整格式）
+ * @param date 日期字符串或 Date 对象
+ * @returns 格式化后的日期时间字符串，格式为 YYYY-MM-DD HH:mm:ss
+ */
+export function formatDateTime(date: string | Date | null | undefined): string {
+  return formatDate(date, 'YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 格式化时间（只显示时分）
+ * @param date 日期字符串或 Date 对象
+ * @returns 格式化后的时间字符串，格式为 HH:mm
+ */
+export function formatTime(date: string | Date | null | undefined): string {
+  return formatDate(date, 'HH:mm')
+}
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -385,7 +385,7 @@
            >
              <span class="text-xs font-bold text-white">C</span>
            </div>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">Claude</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.providers.claude') }}</span>
            <span
              class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
              >{{ t('home.providers.supported') }}</span
@@ -415,7 +415,7 @@
            >
              <span class="text-xs font-bold text-white">G</span>
            </div>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">Gemini</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.providers.gemini') }}</span>
            <span
              class="rounded bg-primary-100 px-1.5 py-0.5 text-[10px] font-medium text-primary-600 dark:bg-primary-900/30 dark:text-primary-400"
              >{{ t('home.providers.supported') }}</span
@@ -430,7 +430,7 @@
            >
              <span class="text-xs font-bold text-white">+</span>
            </div>
-            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">More</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-dark-200">{{ t('home.providers.more') }}</span>
            <span
              class="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-dark-700 dark:text-dark-400"
              >{{ t('home.providers.soon') }}</span
--- a/frontend/src/views/NotFoundView.vue
+++ b/frontend/src/views/NotFoundView.vue
@@ -43,7 +43,9 @@

      <!-- Text Content -->
      <div class="mb-8">
-        <h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Page Not Found</h1>
+        <h1 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
+          {{ t('errors.pageNotFound') }}
+        </h1>
        <p class="text-gray-500 dark:text-dark-400">
          The page you are looking for doesn't exist or has been moved.
        </p>
@@ -100,8 +102,10 @@
 </template>

 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'

+const { t } = useI18n()
 const router = useRouter()

 function goBack(): void {
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -1,9 +1,9 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
-        <button
+    <TablePageLayout>
+      <template #actions>
+        <div class="flex justify-end gap-3">
+          <button
          @click="loadAccounts"
          :disabled="loading"
          class="btn btn-secondary"
@@ -23,7 +23,7 @@
            />
          </svg>
        </button>
-        <button @click="showCrsSyncModal = true" class="btn btn-secondary" title="从 CRS 同步">
+        <button @click="showCrsSyncModal = true" class="btn btn-secondary" :title="t('admin.accounts.syncFromCrs')">
          <svg
            class="h-5 w-5"
            fill="none"
@@ -50,11 +50,12 @@
          </svg>
          {{ t('admin.accounts.createAccount') }}
        </button>
-      </div>
+        </div>
+      </template>

-      <!-- Search and Filters -->
-      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div class="relative max-w-md flex-1">
+      <template #filters>
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="relative max-w-md flex-1">
          <svg
            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
            fill="none"
@@ -75,8 +76,8 @@
            class="input pl-10"
            @input="handleSearch"
          />
-        </div>
-        <div class="flex flex-wrap gap-3">
+          </div>
+          <div class="flex flex-wrap gap-3">
          <Select
            v-model="filters.platform"
            :options="platformOptions"
@@ -98,10 +99,12 @@
            class="w-36"
            @change="loadAccounts"
          />
+          </div>
        </div>
-      </div>
+      </template>

-      <!-- Bulk Actions Bar -->
+      <template #table>
+        <!-- Bulk Actions Bar -->
      <div
        v-if="selectedAccountIds.length > 0"
        class="card border-primary-200 bg-primary-50 px-4 py-3 dark:border-primary-800 dark:bg-primary-900/20"
@@ -162,9 +165,7 @@
        </div>
      </div>

-      <!-- Accounts Table -->
-      <div class="card overflow-hidden">
-        <DataTable :columns="columns" :data="accounts" :loading="loading">
+      <DataTable :columns="columns" :data="accounts" :loading="loading">
          <template #cell-select="{ row }">
            <input
              type="checkbox"
@@ -276,132 +277,10 @@

          <template #cell-actions="{ row }">
            <div class="flex items-center gap-1">
-              <!-- Reset Status button for error accounts -->
-              <button
-                v-if="row.status === 'error'"
-                @click="handleResetStatus(row)"
-                class="rounded-lg p-2 text-red-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('admin.accounts.resetStatus')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
-                  />
-                </svg>
-              </button>
-              <!-- Clear Rate Limit button -->
-              <button
-                v-if="isRateLimited(row) || isOverloaded(row)"
-                @click="handleClearRateLimit(row)"
-                class="rounded-lg p-2 text-amber-500 transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20 dark:hover:text-amber-400"
-                :title="t('admin.accounts.clearRateLimit')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </button>
-              <!-- Test Connection button -->
-              <button
-                @click="handleTest(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
-                :title="t('admin.accounts.testConnection')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z"
-                  />
-                </svg>
-              </button>
-              <!-- View Stats button -->
-              <button
-                @click="handleViewStats(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-900/20 dark:hover:text-indigo-400"
-                :title="t('admin.accounts.viewStats')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-                  />
-                </svg>
-              </button>
-              <button
-                v-if="row.type === 'oauth' || row.type === 'setup-token'"
-                @click="handleReAuth(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
-                :title="t('admin.accounts.reAuthorize')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
-                  />
-                </svg>
-              </button>
-              <button
-                v-if="row.type === 'oauth' || row.type === 'setup-token'"
-                @click="handleRefreshToken(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-900/20 dark:hover:text-purple-400"
-                :title="t('admin.accounts.refreshToken')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                  />
-                </svg>
-              </button>
+              <!-- Edit Button -->
              <button
                @click="handleEdit(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
              >
                <svg
                  class="h-4 w-4"
@@ -416,11 +295,13 @@
                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.edit') }}</span>
              </button>
+
+              <!-- Delete Button -->
              <button
                @click="handleDelete(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('common.delete')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
              >
                <svg
                  class="h-4 w-4"
@@ -435,6 +316,30 @@
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.delete') }}</span>
+              </button>
+
+              <!-- More Actions Menu Trigger -->
+              <button
+                :ref="(el) => setActionButtonRef(row.id, el)"
+                @click="openActionMenu(row)"
+                class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
+                :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
+              >
+                <svg
+                  class="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                  />
+                </svg>
+                <span class="text-xs">{{ t('common.more') }}</span>
              </button>
            </div>
          </template>
@@ -448,17 +353,19 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
-    </div>
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+          @update:pageSize="handlePageSizeChange"
+        />
+      </template>
+    </TablePageLayout>

    <!-- Create Account Modal -->
    <CreateAccountModal
@@ -530,17 +437,68 @@
      @close="showBulkEditModal = false"
      @updated="handleBulkUpdated"
    />
+    <!-- Action Menu (Teleported) -->
+    <Teleport to="body">
+      <div
+        v-if="activeMenuId !== null && menuPosition"
+        class="action-menu-content fixed z-[9999] w-52 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
+        :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
+      >
+        <div class="py-1">
+          <template v-for="account in accounts" :key="account.id">
+            <template v-if="account.id === activeMenuId">
+              <button
+                @click="handleTest(account); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                {{ t('admin.accounts.testConnection') }}
+              </button>
+              <button
+                @click="handleViewStats(account); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+                {{ t('admin.accounts.viewStats') }}
+              </button>
+              <template v-if="account.type === 'oauth' || account.type === 'setup-token'">
+                <button @click="handleReAuth(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700">
+                  <svg class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
+                  {{ t('admin.accounts.reAuthorize') }}
+                </button>
+                <button @click="handleRefreshToken(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700">
+                  <svg class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 4l16 16" /></svg>
+                  {{ t('admin.accounts.refreshToken') }}
+                </button>
+              </template>
+
+              <div v-if="account.status === 'error' || isRateLimited(account) || isOverloaded(account)" class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
+
+              <button v-if="account.status === 'error'" @click="handleResetStatus(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-yellow-600 hover:bg-gray-100 dark:text-yellow-400 dark:hover:bg-dark-700">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                {{ t('admin.accounts.resetStatus') }}
+              </button>
+              <button v-if="isRateLimited(account) || isOverloaded(account)" @click="handleClearRateLimit(account); closeActionMenu()" class="flex w-full items-center gap-2 px-4 py-2 text-sm text-amber-600 hover:bg-gray-100 dark:text-amber-400 dark:hover:bg-dark-700">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                {{ t('admin.accounts.clearRateLimit') }}
+              </button>
+            </template>
+          </template>
+        </div>
+      </div>
+    </Teleport>
  </AppLayout>
 </template>

 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { Account, Proxy, Group } from '@/types'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
@@ -620,6 +578,7 @@ const pagination = reactive({
  total: 0,
  pages: 0
 })
+let abortController: AbortController | null = null

 // Modal states
 const showCreateModal = ref(false)
@@ -639,6 +598,49 @@ const statsAccount = ref<Account | null>(null)
 const togglingSchedulable = ref<number | null>(null)
 const bulkDeleting = ref(false)

+// Action Menu State
+const activeMenuId = ref<number | null>(null)
+const menuPosition = ref<{ top: number; left: number } | null>(null)
+const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
+
+const setActionButtonRef = (accountId: number, el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) {
+    actionButtonRefs.value.set(accountId, el)
+  } else {
+    actionButtonRefs.value.delete(accountId)
+  }
+}
+
+const openActionMenu = (account: Account) => {
+  if (activeMenuId.value === account.id) {
+    closeActionMenu()
+  } else {
+    const buttonEl = actionButtonRefs.value.get(account.id)
+    if (buttonEl) {
+      const rect = buttonEl.getBoundingClientRect()
+      // Position menu to the left of the button, slightly below
+      menuPosition.value = {
+        top: rect.bottom + 4,
+        left: rect.right - 208 // w-52 is 208px
+      }
+    }
+    activeMenuId.value = account.id
+  }
+}
+
+const closeActionMenu = () => {
+  activeMenuId.value = null
+  menuPosition.value = null
+}
+
+// Close menu when clicking outside
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.action-menu-trigger') && !target.closest('.action-menu-content')) {
+    closeActionMenu()
+  }
+}
+
 // Bulk selection
 const selectedAccountIds = ref<number[]>([])
 const selectCurrentPageAccounts = () => {
@@ -660,6 +662,9 @@ const isOverloaded = (account: Account): boolean => {

 // Data loading
 const loadAccounts = async () => {
+  abortController?.abort()
+  const currentAbortController = new AbortController()
+  abortController = currentAbortController
  loading.value = true
  try {
    const response = await adminAPI.accounts.list(pagination.page, pagination.page_size, {
@@ -667,15 +672,24 @@ const loadAccounts = async () => {
      type: filters.type || undefined,
      status: filters.status || undefined,
      search: searchQuery.value || undefined
+    }, {
+      signal: currentAbortController.signal
    })
+    if (currentAbortController.signal.aborted) return
    accounts.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
  } catch (error) {
+    const errorInfo = error as { name?: string; code?: string }
+    if (errorInfo?.name === 'AbortError' || errorInfo?.name === 'CanceledError' || errorInfo?.code === 'ERR_CANCELED') {
+      return
+    }
    appStore.showError(t('admin.accounts.failedToLoad'))
    console.error('Error loading accounts:', error)
  } finally {
-    loading.value = false
+    if (abortController === currentAbortController) {
+      loading.value = false
+    }
  }
 }

@@ -712,6 +726,12 @@ const handlePageChange = (page: number) => {
  loadAccounts()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadAccounts()
+}
+
 const handleCrsSynced = () => {
  showCrsSyncModal.value = false
  loadAccounts()
@@ -901,5 +921,12 @@ onMounted(() => {
  loadAccounts()
  loadProxies()
  loadGroups()
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  abortController?.abort()
+  abortController = null
+  document.removeEventListener('click', handleClickOutside)
 })
 </script>
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -1,69 +1,70 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
-        <button
-          @click="loadGroups"
-          :disabled="loading"
-          class="btn btn-secondary"
-          :title="t('common.refresh')"
-        >
-          <svg
-            :class="['h-5 w-5', loading ? 'animate-spin' : '']"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
+    <TablePageLayout>
+      <template #actions>
+        <div class="flex justify-end gap-3">
+          <button
+            @click="loadGroups"
+            :disabled="loading"
+            class="btn btn-secondary"
+            :title="t('common.refresh')"
          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-            />
-          </svg>
-        </button>
-        <button @click="showCreateModal = true" class="btn btn-primary">
-          <svg
-            class="mr-2 h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-width="1.5"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-          </svg>
-          {{ t('admin.groups.createGroup') }}
-        </button>
-      </div>
+            <svg
+              :class="['h-5 w-5', loading ? 'animate-spin' : '']"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+              />
+            </svg>
+          </button>
+          <button @click="showCreateModal = true" class="btn btn-primary">
+            <svg
+              class="mr-2 h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            {{ t('admin.groups.createGroup') }}
+          </button>
+        </div>
+      </template>

-      <!-- Filters -->
-      <div class="flex flex-wrap gap-3">
-        <Select
-          v-model="filters.platform"
-          :options="platformFilterOptions"
-          placeholder="All Platforms"
-          class="w-44"
-          @change="loadGroups"
-        />
-        <Select
-          v-model="filters.status"
-          :options="statusOptions"
-          placeholder="All Status"
-          class="w-40"
-          @change="loadGroups"
-        />
-        <Select
-          v-model="filters.is_exclusive"
-          :options="exclusiveOptions"
-          placeholder="All Groups"
-          class="w-44"
-          @change="loadGroups"
-        />
-      </div>
+      <template #filters>
+        <div class="flex flex-wrap gap-3">
+          <Select
+            v-model="filters.platform"
+            :options="platformFilterOptions"
+            :placeholder="t('admin.groups.allPlatforms')"
+            class="w-44"
+            @change="loadGroups"
+          />
+          <Select
+            v-model="filters.status"
+            :options="statusOptions"
+            :placeholder="t('admin.groups.allStatus')"
+            class="w-40"
+            @change="loadGroups"
+          />
+          <Select
+            v-model="filters.is_exclusive"
+            :options="exclusiveOptions"
+            :placeholder="t('admin.groups.allGroups')"
+            class="w-44"
+            @change="loadGroups"
+          />
+        </div>
+      </template>

-      <!-- Groups Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="groups" :loading="loading">
          <template #cell-name="{ value }">
            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
@@ -165,8 +166,7 @@
            <div class="flex items-center gap-1">
              <button
                @click="handleEdit(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
              >
                <svg
                  class="h-4 w-4"
@@ -181,11 +181,11 @@
                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.edit') }}</span>
              </button>
              <button
                @click="handleDelete(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('common.delete')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
              >
                <svg
                  class="h-4 w-4"
@@ -200,6 +200,7 @@
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.delete') }}</span>
              </button>
            </div>
          </template>
@@ -213,26 +214,28 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
-    </div>
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+          @update:pageSize="handlePageSizeChange"
+        />
+      </template>
+    </TablePageLayout>

    <!-- Create Group Modal -->
-    <Modal
+    <BaseDialog
      :show="showCreateModal"
      :title="t('admin.groups.createGroup')"
-      size="lg"
+      width="normal"
      @close="closeCreateModal"
    >
-      <form @submit.prevent="handleCreateGroup" class="space-y-5">
+      <form id="create-group-form" @submit.prevent="handleCreateGroup" class="space-y-5">
        <div>
          <label class="input-label">{{ t('admin.groups.form.name') }}</label>
          <input
@@ -343,11 +346,19 @@
          </div>
        </div>

+      </form>
+
+      <template #footer>
        <div class="flex justify-end gap-3 pt-4">
          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="create-group-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -371,17 +382,22 @@
            {{ submitting ? t('admin.groups.creating') : t('common.create') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Edit Group Modal -->
-    <Modal
+    <BaseDialog
      :show="showEditModal"
      :title="t('admin.groups.editGroup')"
-      size="lg"
+      width="normal"
      @close="closeEditModal"
    >
-      <form v-if="editingGroup" @submit.prevent="handleUpdateGroup" class="space-y-5">
+      <form
+        v-if="editingGroup"
+        id="edit-group-form"
+        @submit.prevent="handleUpdateGroup"
+        class="space-y-5"
+      >
        <div>
          <label class="input-label">{{ t('admin.groups.form.name') }}</label>
          <input v-model="editForm.name" type="text" required class="input" />
@@ -488,11 +504,19 @@
          </div>
        </div>

+      </form>
+
+      <template #footer>
        <div class="flex justify-end gap-3 pt-4">
          <button @click="closeEditModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="edit-group-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -516,8 +540,8 @@
            {{ submitting ? t('admin.groups.updating') : t('common.update') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Delete Confirmation Dialog -->
    <ConfirmDialog
@@ -541,9 +565,10 @@ import { adminAPI } from '@/api/admin'
 import type { Group, GroupPlatform, SubscriptionType } from '@/types'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
@@ -613,6 +638,8 @@ const pagination = reactive({
  pages: 0
 })

+let abortController: AbortController | null = null
+
 const showCreateModal = ref(false)
 const showEditModal = ref(false)
 const showDeleteDialog = ref(false)
@@ -657,21 +684,33 @@ const deleteConfirmMessage = computed(() => {
 })

 const loadGroups = async () => {
+  if (abortController) {
+    abortController.abort()
+  }
+  const currentController = new AbortController()
+  abortController = currentController
+  const { signal } = currentController
  loading.value = true
  try {
    const response = await adminAPI.groups.list(pagination.page, pagination.page_size, {
      platform: (filters.platform as GroupPlatform) || undefined,
      status: filters.status as any,
      is_exclusive: filters.is_exclusive ? filters.is_exclusive === 'true' : undefined
-    })
+    }, { signal })
+    if (signal.aborted) return
    groups.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
-  } catch (error) {
+  } catch (error: any) {
+    if (signal.aborted || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') {
+      return
+    }
    appStore.showError(t('admin.groups.failedToLoad'))
    console.error('Error loading groups:', error)
  } finally {
-    loading.value = false
+    if (abortController === currentController && !signal.aborted) {
+      loading.value = false
+    }
  }
 }

@@ -680,6 +719,12 @@ const handlePageChange = (page: number) => {
  loadGroups()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadGroups()
+}
+
 const closeCreateModal = () => {
  showCreateModal.value = false
  createForm.name = ''
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -1,9 +1,9 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
-        <button
+    <TablePageLayout>
+      <template #actions>
+        <div class="flex justify-end gap-3">
+          <button
          @click="loadProxies"
          :disabled="loading"
          class="btn btn-secondary"
@@ -35,11 +35,12 @@
          </svg>
          {{ t('admin.proxies.createProxy') }}
        </button>
-      </div>
+        </div>
+      </template>

-      <!-- Search and Filters -->
-      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <div class="relative max-w-md flex-1">
+      <template #filters>
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="relative max-w-md flex-1">
          <svg
            class="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400"
            fill="none"
@@ -60,8 +61,8 @@
            class="input pl-10"
            @input="handleSearch"
          />
-        </div>
-        <div class="flex flex-wrap gap-3">
+          </div>
+          <div class="flex flex-wrap gap-3">
          <Select
            v-model="filters.protocol"
            :options="protocolOptions"
@@ -76,11 +77,11 @@
            class="w-36"
            @change="loadProxies"
          />
+          </div>
        </div>
-      </div>
+      </template>

-      <!-- Proxies Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="proxies" :loading="loading">
          <template #cell-name="{ value }">
            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
@@ -111,8 +112,7 @@
              <button
                @click="handleTestConnection(row)"
                :disabled="testingProxyIds.has(row.id)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
-                :title="t('admin.proxies.testConnection')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
              >
                <svg
                  v-if="testingProxyIds.has(row.id)"
@@ -148,11 +148,11 @@
                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
+                <span class="text-xs">{{ t('admin.proxies.testConnection') }}</span>
              </button>
              <button
                @click="handleEdit(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                :title="t('common.edit')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
              >
                <svg
                  class="h-4 w-4"
@@ -167,11 +167,11 @@
                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.edit') }}</span>
              </button>
              <button
                @click="handleDelete(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('common.delete')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
              >
                <svg
                  class="h-4 w-4"
@@ -186,6 +186,7 @@
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.delete') }}</span>
              </button>
            </div>
          </template>
@@ -199,23 +200,25 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
-    </div>
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+          @update:pageSize="handlePageSizeChange"
+        />
+      </template>
+    </TablePageLayout>

    <!-- Create Proxy Modal -->
-    <Modal
+    <BaseDialog
      :show="showCreateModal"
      :title="t('admin.proxies.createProxy')"
-      size="lg"
+      width="normal"
      @close="closeCreateModal"
    >
      <!-- Tab Switch -->
@@ -269,7 +272,12 @@
      </div>

      <!-- Standard Add Form -->
-      <form v-if="createMode === 'standard'" @submit.prevent="handleCreateProxy" class="space-y-5">
+      <form
+        v-if="createMode === 'standard'"
+        id="create-proxy-form"
+        @submit.prevent="handleCreateProxy"
+        class="space-y-5"
+      >
        <div>
          <label class="input-label">{{ t('admin.proxies.name') }}</label>
          <input
@@ -291,7 +299,7 @@
              v-model="createForm.host"
              type="text"
              required
-              placeholder="proxy.example.com"
+              :placeholder="t('admin.proxies.form.hostPlaceholder')"
              class="input"
            />
          </div>
@@ -303,7 +311,7 @@
              required
              min="1"
              max="65535"
-              placeholder="8080"
+              :placeholder="t('admin.proxies.form.portPlaceholder')"
              class="input"
            />
          </div>
@@ -327,34 +335,6 @@
          />
        </div>

-        <div class="flex justify-end gap-3 pt-4">
-          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
-            {{ t('common.cancel') }}
-          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
-            <svg
-              v-if="submitting"
-              class="-ml-1 mr-2 h-4 w-4 animate-spin"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <circle
-                class="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                stroke-width="4"
-              ></circle>
-              <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-              ></path>
-            </svg>
-            {{ submitting ? t('admin.proxies.creating') : t('common.create') }}
-          </button>
-        </div>
      </form>

      <!-- Batch Add Form -->
@@ -433,11 +413,44 @@
          </div>
        </div>

-        <div class="flex justify-end gap-3 pt-4">
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
          <button
+            v-if="createMode === 'standard'"
+            type="submit"
+            form="create-proxy-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
+            <svg
+              v-if="submitting"
+              class="-ml-1 mr-2 h-4 w-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                class="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                stroke-width="4"
+              ></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {{ submitting ? t('admin.proxies.creating') : t('common.create') }}
+          </button>
+          <button
+            v-else
            @click="handleBatchCreate"
            type="button"
            :disabled="submitting || batchParseResult.valid === 0"
@@ -470,17 +483,22 @@
            }}
          </button>
        </div>
-      </div>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Edit Proxy Modal -->
-    <Modal
+    <BaseDialog
      :show="showEditModal"
      :title="t('admin.proxies.editProxy')"
-      size="lg"
+      width="normal"
      @close="closeEditModal"
    >
-      <form v-if="editingProxy" @submit.prevent="handleUpdateProxy" class="space-y-5">
+      <form
+        v-if="editingProxy"
+        id="edit-proxy-form"
+        @submit.prevent="handleUpdateProxy"
+        class="space-y-5"
+      >
        <div>
          <label class="input-label">{{ t('admin.proxies.name') }}</label>
          <input v-model="editForm.name" type="text" required class="input" />
@@ -524,11 +542,20 @@
          <Select v-model="editForm.status" :options="editStatusOptions" />
        </div>

-        <div class="flex justify-end gap-3 pt-4">
+      </form>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeEditModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            v-if="editingProxy"
+            type="submit"
+            form="edit-proxy-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -552,8 +579,8 @@
            {{ submitting ? t('admin.proxies.updating') : t('common.update') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Delete Confirmation Dialog -->
    <ConfirmDialog
@@ -577,9 +604,10 @@ import { adminAPI } from '@/api/admin'
 import type { Proxy, ProxyProtocol } from '@/types'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
@@ -679,22 +707,44 @@ const editForm = reactive({
  status: 'active' as 'active' | 'inactive'
 })

+let abortController: AbortController | null = null
+
+const isAbortError = (error: unknown) => {
+  if (!error || typeof error !== 'object') return false
+  const maybeError = error as { name?: string; code?: string }
+  return maybeError.name === 'AbortError' || maybeError.code === 'ERR_CANCELED'
+}
+
 const loadProxies = async () => {
+  if (abortController) {
+    abortController.abort()
+  }
+  const currentAbortController = new AbortController()
+  abortController = currentAbortController
  loading.value = true
  try {
    const response = await adminAPI.proxies.list(pagination.page, pagination.page_size, {
      protocol: filters.protocol || undefined,
      status: filters.status as any,
      search: searchQuery.value || undefined
-    })
+    }, { signal: currentAbortController.signal })
+    if (currentAbortController.signal.aborted || abortController !== currentAbortController) {
+      return
+    }
    proxies.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
  } catch (error) {
+    if (isAbortError(error)) {
+      return
+    }
    appStore.showError(t('admin.proxies.failedToLoad'))
    console.error('Error loading proxies:', error)
  } finally {
-    loading.value = false
+    if (abortController === currentAbortController) {
+      loading.value = false
+      abortController = null
+    }
  }
 }

@@ -712,6 +762,12 @@ const handlePageChange = (page: number) => {
  loadProxies()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadProxies()
+}
+
 const closeCreateModal = () => {
  showCreateModal.value = false
  createMode.value = 'standard'
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -1,9 +1,9 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
-        <button
+    <TablePageLayout>
+      <template #actions>
+        <div class="flex justify-end gap-3">
+          <button
          @click="loadCodes"
          :disabled="loading"
          class="btn btn-secondary"
@@ -26,11 +26,12 @@
        <button @click="showGenerateDialog = true" class="btn btn-primary">
          {{ t('admin.redeem.generateCodes') }}
        </button>
-      </div>
+        </div>
+      </template>

-      <!-- Filters and Actions -->
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div class="max-w-md flex-1">
+      <template #filters>
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div class="max-w-md flex-1">
          <input
            v-model="searchQuery"
            type="text"
@@ -38,8 +39,8 @@
            class="input"
            @input="handleSearch"
          />
-        </div>
-        <div class="flex gap-2">
+          </div>
+          <div class="flex gap-2">
          <Select
            v-model="filters.type"
            :options="filterTypeOptions"
@@ -55,11 +56,11 @@
          <button @click="handleExportCodes" class="btn btn-secondary">
            {{ t('admin.redeem.exportCsv') }}
          </button>
+          </div>
        </div>
-      </div>
+      </template>

-      <!-- Redeem Codes Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="codes" :loading="loading">
          <template #cell-code="{ value }">
            <div class="flex items-center space-x-2">
@@ -151,7 +152,7 @@

          <template #cell-used_at="{ value }">
            <span class="text-sm text-gray-500 dark:text-dark-400">{{
-              value ? formatDate(value) : '-'
+              value ? formatDateTime(value) : '-'
            }}</span>
          </template>

@@ -160,8 +161,7 @@
              <button
                v-if="row.status === 'unused'"
                @click="handleDelete(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('common.delete')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
              >
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
@@ -171,29 +171,32 @@
                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                  />
                </svg>
+                <span class="text-xs">{{ t('common.delete') }}</span>
              </button>
              <span v-else class="text-gray-400 dark:text-dark-500">-</span>
            </div>
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+          @update:pageSize="handlePageSizeChange"
+        />

-      <!-- Batch Actions -->
-      <div v-if="filters.status === 'unused'" class="flex justify-end">
-        <button @click="showDeleteUnusedDialog = true" class="btn btn-danger">
-          {{ t('admin.redeem.deleteAllUnused') }}
-        </button>
-      </div>
-    </div>
+        <!-- Batch Actions -->
+        <div v-if="filters.status === 'unused'" class="flex justify-end">
+          <button @click="showDeleteUnusedDialog = true" class="btn btn-danger">
+            {{ t('admin.redeem.deleteAllUnused') }}
+          </button>
+        </div>
+      </template>
+    </TablePageLayout>

    <!-- Delete Confirmation Dialog -->
    <ConfirmDialog
@@ -416,10 +419,13 @@
 import { ref, reactive, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
+import { useClipboard } from '@/composables/useClipboard'
 import { adminAPI } from '@/api/admin'
+import { formatDateTime } from '@/utils/format'
 import type { RedeemCode, RedeemCodeType, Group } from '@/types'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
@@ -427,6 +433,7 @@ import Select from '@/components/common/Select.vue'

 const { t } = useI18n()
 const appStore = useAppStore()
+const { copyToClipboard: clipboardCopy } = useClipboard()

 const showGenerateDialog = ref(false)
 const showResultDialog = ref(false)
@@ -536,6 +543,8 @@ const pagination = reactive({
  pages: 0
 })

+let abortController: AbortController | null = null
+
 const showDeleteDialog = ref(false)
 const showDeleteUnusedDialog = ref(false)
 const deletingCode = ref<RedeemCode | null>(null)
@@ -549,26 +558,47 @@ const generateForm = reactive({
  validity_days: 30
 })

-const formatDate = (dateString: string): string => {
-  return new Date(dateString).toLocaleDateString()
-}
-
 const loadCodes = async () => {
+  if (abortController) {
+    abortController.abort()
+  }
+  const currentController = new AbortController()
+  abortController = currentController
  loading.value = true
  try {
-    const response = await adminAPI.redeem.list(pagination.page, pagination.page_size, {
-      type: filters.type as RedeemCodeType,
-      status: filters.status as any,
-      search: searchQuery.value || undefined
-    })
+    const response = await adminAPI.redeem.list(
+      pagination.page,
+      pagination.page_size,
+      {
+        type: filters.type as RedeemCodeType,
+        status: filters.status as any,
+        search: searchQuery.value || undefined
+      },
+      {
+        signal: currentController.signal
+      }
+    )
+    if (currentController.signal.aborted) {
+      return
+    }
    codes.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
-  } catch (error) {
+  } catch (error: any) {
+    if (
+      currentController.signal.aborted ||
+      error?.name === 'AbortError' ||
+      error?.code === 'ERR_CANCELED'
+    ) {
+      return
+    }
    appStore.showError(t('admin.redeem.failedToLoad'))
    console.error('Error loading redeem codes:', error)
  } finally {
-    loading.value = false
+    if (abortController === currentController && !currentController.signal.aborted) {
+      loading.value = false
+      abortController = null
+    }
  }
 }

@@ -586,6 +616,12 @@ const handlePageChange = (page: number) => {
  loadCodes()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadCodes()
+}
+
 const handleGenerateCodes = async () => {
  // 订阅类型必须选择分组
  if (generateForm.type === 'subscription' && !generateForm.group_id) {
@@ -618,15 +654,12 @@ const handleGenerateCodes = async () => {
 }

 const copyToClipboard = async (text: string) => {
-  try {
-    await navigator.clipboard.writeText(text)
+  const success = await clipboardCopy(text, t('admin.redeem.copied'))
+  if (success) {
    copiedCode.value = text
    setTimeout(() => {
      copiedCode.value = null
    }, 2000)
-  } catch (error) {
-    appStore.showError(t('admin.redeem.failedToCopy'))
-    console.error('Error copying to clipboard:', error)
  }
 }

--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -326,7 +326,12 @@
                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                  {{ t('admin.settings.site.siteName') }}
                </label>
-                <input v-model="form.site_name" type="text" class="input" placeholder="Sub2API" />
+                <input
+                  v-model="form.site_name"
+                  type="text"
+                  class="input"
+                  :placeholder="t('admin.settings.site.siteNamePlaceholder')"
+                />
                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                  {{ t('admin.settings.site.siteNameHint') }}
                </p>
@@ -339,7 +344,7 @@
                  v-model="form.site_subtitle"
                  type="text"
                  class="input"
-                  placeholder="Subscription to API Conversion Platform"
+                  :placeholder="t('admin.settings.site.siteSubtitlePlaceholder')"
                />
                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                  {{ t('admin.settings.site.siteSubtitleHint') }}
@@ -356,7 +361,7 @@
                v-model="form.api_base_url"
                type="text"
                class="input font-mono text-sm"
-                placeholder="https://api.example.com"
+                :placeholder="t('admin.settings.site.apiBaseUrlPlaceholder')"
              />
              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                {{ t('admin.settings.site.apiBaseUrlHint') }}
@@ -388,7 +393,7 @@
                v-model="form.doc_url"
                type="url"
                class="input font-mono text-sm"
-                placeholder="https://docs.example.com"
+                :placeholder="t('admin.settings.site.docUrlPlaceholder')"
              />
              <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                {{ t('admin.settings.site.docUrlHint') }}
@@ -537,7 +542,7 @@
                  v-model="form.smtp_host"
                  type="text"
                  class="input"
-                  placeholder="smtp.gmail.com"
+                  :placeholder="t('admin.settings.smtp.hostPlaceholder')"
                />
              </div>
              <div>
@@ -550,7 +555,7 @@
                  min="1"
                  max="65535"
                  class="input"
-                  placeholder="587"
+                  :placeholder="t('admin.settings.smtp.portPlaceholder')"
                />
              </div>
              <div>
@@ -561,7 +566,7 @@
                  v-model="form.smtp_username"
                  type="text"
                  class="input"
-                  placeholder="your-email@gmail.com"
+                  :placeholder="t('admin.settings.smtp.usernamePlaceholder')"
                />
              </div>
              <div>
@@ -572,7 +577,7 @@
                  v-model="form.smtp_password"
                  type="password"
                  class="input"
-                  placeholder="********"
+                  :placeholder="t('admin.settings.smtp.passwordPlaceholder')"
                />
                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                  {{ t('admin.settings.smtp.passwordHint') }}
@@ -586,7 +591,7 @@
                  v-model="form.smtp_from_email"
                  type="email"
                  class="input"
-                  placeholder="noreply@example.com"
+                  :placeholder="t('admin.settings.smtp.fromEmailPlaceholder')"
                />
              </div>
              <div>
@@ -597,7 +602,7 @@
                  v-model="form.smtp_from_name"
                  type="text"
                  class="input"
-                  placeholder="Sub2API"
+                  :placeholder="t('admin.settings.smtp.fromNamePlaceholder')"
                />
              </div>
            </div>
@@ -639,7 +644,7 @@
                  v-model="testEmailAddress"
                  type="email"
                  class="input"
-                  placeholder="test@example.com"
+                  :placeholder="t('admin.settings.testEmail.recipientEmailPlaceholder')"
                />
              </div>
              <button
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -1,7 +1,8 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
+    <TablePageLayout>
      <!-- Page Header Actions -->
+      <template #actions>
      <div class="flex justify-end gap-3">
        <button
          @click="loadSubscriptions"
@@ -36,8 +37,10 @@
          {{ t('admin.subscriptions.assignSubscription') }}
        </button>
      </div>
+      </template>

      <!-- Filters -->
+      <template #filters>
      <div class="flex flex-wrap gap-3">
        <Select
          v-model="filters.status"
@@ -54,9 +57,10 @@
          @change="loadSubscriptions"
        />
      </div>
+      </template>

      <!-- Subscriptions Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="subscriptions" :loading="loading">
          <template #cell-user="{ row }">
            <div class="flex items-center gap-2">
@@ -222,7 +226,7 @@
                    : 'text-gray-700 dark:text-gray-300'
                "
              >
-                {{ formatDate(value) }}
+                {{ formatDateOnly(value) }}
              </span>
              <div v-if="getDaysRemaining(value) !== null" class="text-xs text-gray-500">
                {{ getDaysRemaining(value) }} {{ t('admin.subscriptions.daysRemaining') }}
@@ -253,8 +257,7 @@
              <button
                v-if="row.status === 'active'"
                @click="handleExtend(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
-                :title="t('admin.subscriptions.extend')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400"
              >
                <svg
                  class="h-4 w-4"
@@ -269,12 +272,12 @@
                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
+                <span class="text-xs">{{ t('admin.subscriptions.extend') }}</span>
              </button>
              <button
                v-if="row.status === 'active'"
                @click="handleRevoke(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('admin.subscriptions.revoke')"
+                class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
              >
                <svg
                  class="h-4 w-4"
@@ -289,6 +292,7 @@
                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
                  />
                </svg>
+                <span class="text-xs">{{ t('admin.subscriptions.revoke') }}</span>
              </button>
            </div>
          </template>
@@ -302,26 +306,33 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

      <!-- Pagination -->
+      <template #pagination>
      <Pagination
        v-if="pagination.total > 0"
        :page="pagination.page"
        :total="pagination.total"
        :page-size="pagination.page_size"
        @update:page="handlePageChange"
+        @update:pageSize="handlePageSizeChange"
      />
-    </div>
+      </template>
+    </TablePageLayout>

    <!-- Assign Subscription Modal -->
-    <Modal
+    <BaseDialog
      :show="showAssignModal"
      :title="t('admin.subscriptions.assignSubscription')"
-      size="lg"
+      width="normal"
      @close="closeAssignModal"
    >
-      <form @submit.prevent="handleAssignSubscription" class="space-y-5">
+      <form
+        id="assign-subscription-form"
+        @submit.prevent="handleAssignSubscription"
+        class="space-y-5"
+      >
        <div>
          <label class="input-label">{{ t('admin.subscriptions.form.user') }}</label>
          <Select
@@ -345,12 +356,18 @@
          <input v-model.number="assignForm.validity_days" type="number" min="1" class="input" />
          <p class="input-hint">{{ t('admin.subscriptions.validityHint') }}</p>
        </div>
-
-        <div class="flex justify-end gap-3 pt-4">
+      </form>
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeAssignModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="assign-subscription-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -374,18 +391,19 @@
            {{ submitting ? t('admin.subscriptions.assigning') : t('admin.subscriptions.assign') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Extend Subscription Modal -->
-    <Modal
+    <BaseDialog
      :show="showExtendModal"
      :title="t('admin.subscriptions.extendSubscription')"
-      size="md"
+      width="narrow"
      @close="closeExtendModal"
    >
      <form
        v-if="extendingSubscription"
+        id="extend-subscription-form"
        @submit.prevent="handleExtendSubscription"
        class="space-y-5"
      >
@@ -401,7 +419,7 @@
            <span class="font-medium text-gray-900 dark:text-white">
              {{
                extendingSubscription.expires_at
-                  ? formatDate(extendingSubscription.expires_at)
+                  ? formatDateOnly(extendingSubscription.expires_at)
                  : t('admin.subscriptions.noExpiration')
              }}
            </span>
@@ -411,17 +429,23 @@
          <label class="input-label">{{ t('admin.subscriptions.form.extendDays') }}</label>
          <input v-model.number="extendForm.days" type="number" min="1" required class="input" />
        </div>
-
-        <div class="flex justify-end gap-3 pt-4">
+      </form>
+      <template #footer>
+        <div v-if="extendingSubscription" class="flex justify-end gap-3">
          <button @click="closeExtendModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="extend-subscription-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            {{ submitting ? t('admin.subscriptions.extending') : t('admin.subscriptions.extend') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Revoke Confirmation Dialog -->
    <ConfirmDialog
@@ -444,10 +468,12 @@ import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { UserSubscription, Group, User } from '@/types'
 import type { Column } from '@/components/common/types'
+import { formatDateOnly } from '@/utils/format'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
@@ -477,6 +503,7 @@ const subscriptions = ref<UserSubscription[]>([])
 const groups = ref<Group[]>([])
 const users = ref<User[]>([])
 const loading = ref(false)
+let abortController: AbortController | null = null
 const filters = reactive({
  status: '',
  group_id: ''
@@ -522,20 +549,36 @@ const subscriptionGroupOptions = computed(() =>
 const userOptions = computed(() => users.value.map((u) => ({ value: u.id, label: u.email })))

 const loadSubscriptions = async () => {
+  if (abortController) {
+    abortController.abort()
+  }
+  const requestController = new AbortController()
+  abortController = requestController
+  const { signal } = requestController
+
  loading.value = true
  try {
    const response = await adminAPI.subscriptions.list(pagination.page, pagination.page_size, {
      status: (filters.status as any) || undefined,
      group_id: filters.group_id ? parseInt(filters.group_id) : undefined
+    }, {
+      signal
    })
+    if (signal.aborted || abortController !== requestController) return
    subscriptions.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
-  } catch (error) {
+  } catch (error: any) {
+    if (signal.aborted || error?.name === 'AbortError' || error?.code === 'ERR_CANCELED') {
+      return
+    }
    appStore.showError(t('admin.subscriptions.failedToLoad'))
    console.error('Error loading subscriptions:', error)
  } finally {
-    loading.value = false
+    if (abortController === requestController) {
+      loading.value = false
+      abortController = null
+    }
  }
 }

@@ -561,6 +604,12 @@ const handlePageChange = (page: number) => {
  loadSubscriptions()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadSubscriptions()
+}
+
 const closeAssignModal = () => {
  showAssignModal.value = false
  assignForm.user_id = null
@@ -640,14 +689,6 @@ const confirmRevoke = async () => {
 }

 // Helper functions
-const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
 const getDaysRemaining = (expiresAt: string): number | null => {
  const now = new Date()
  const expires = new Date(expiresAt)
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -1,10 +1,10 @@
 <template>
  <AppLayout>
    <div class="space-y-6">
-      <!-- Summary Stats Cards -->
+      <!-- Stats Cards -->
      <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-        <!-- Total Requests -->
-        <div class="card p-4">
+          <!-- Total Requests -->
+          <div class="card p-4">
          <div class="flex items-center gap-3">
            <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
              <svg
@@ -130,10 +130,10 @@
            </div>
          </div>
        </div>
-      </div>
+        </div>

-      <!-- Charts Section -->
-      <div class="space-y-4">
+        <!-- Charts Section -->
+        <div class="space-y-4">
        <!-- Chart Controls -->
        <div class="card p-4">
          <div class="flex items-center gap-4">
@@ -157,9 +157,9 @@
        </div>
      </div>

-      <!-- Filters -->
+      <!-- Filters Section -->
      <div class="card">
-        <div class="px-6 py-4">
+          <div class="px-6 py-4">
          <div class="flex flex-wrap items-end gap-4">
            <!-- User Search -->
            <div class="min-w-[200px]">
@@ -224,7 +224,63 @@
                v-model="filters.api_key_id"
                :options="apiKeyOptions"
                :placeholder="t('usage.allApiKeys')"
-                :disabled="!selectedUser && apiKeys.length === 0"
+                searchable
+                @change="applyFilters"
+              />
+            </div>
+
+            <!-- Model Filter -->
+            <div class="min-w-[180px]">
+              <label class="input-label">{{ t('usage.model') }}</label>
+              <Select
+                v-model="filters.model"
+                :options="modelOptions"
+                :placeholder="t('admin.usage.allModels')"
+                searchable
+                @change="applyFilters"
+              />
+            </div>
+
+            <!-- Account Filter -->
+            <div class="min-w-[180px]">
+              <label class="input-label">{{ t('admin.usage.account') }}</label>
+              <Select
+                v-model="filters.account_id"
+                :options="accountOptions"
+                :placeholder="t('admin.usage.allAccounts')"
+                @change="applyFilters"
+              />
+            </div>
+
+            <!-- Stream Type Filter -->
+            <div class="min-w-[150px]">
+              <label class="input-label">{{ t('usage.type') }}</label>
+              <Select
+                v-model="filters.stream"
+                :options="streamOptions"
+                :placeholder="t('admin.usage.allTypes')"
+                @change="applyFilters"
+              />
+            </div>
+
+            <!-- Billing Type Filter -->
+            <div class="min-w-[150px]">
+              <label class="input-label">{{ t('usage.billingType') }}</label>
+              <Select
+                v-model="filters.billing_type"
+                :options="billingTypeOptions"
+                :placeholder="t('admin.usage.allBillingTypes')"
+                @change="applyFilters"
+              />
+            </div>
+
+            <!-- Group Filter -->
+            <div class="min-w-[150px]">
+              <label class="input-label">{{ t('admin.usage.group') }}</label>
+              <Select
+                v-model="filters.group_id"
+                :options="groupOptions"
+                :placeholder="t('admin.usage.allGroups')"
                @change="applyFilters"
              />
            </div>
@@ -252,9 +308,10 @@
        </div>
      </div>

-      <!-- Usage Table -->
+      <!-- Table Section -->
      <div class="card overflow-hidden">
-        <DataTable :columns="columns" :data="usageLogs" :loading="loading">
+        <div class="overflow-auto">
+          <DataTable :columns="columns" :data="usageLogs" :loading="loading">
          <template #cell-user="{ row }">
            <div class="text-sm">
              <span class="font-medium text-gray-900 dark:text-white">{{
@@ -270,10 +327,26 @@
            }}</span>
          </template>

+          <template #cell-account="{ row }">
+            <span class="text-sm text-gray-900 dark:text-white">{{
+              row.account?.name || '-'
+            }}</span>
+          </template>
+
          <template #cell-model="{ value }">
            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
          </template>

+          <template #cell-group="{ row }">
+            <span
+              v-if="row.group"
+              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
+            >
+              {{ row.group.name }}
+            </span>
+            <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
+          </template>
+
          <template #cell-stream="{ row }">
            <span
              class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
@@ -383,7 +456,11 @@
                ${{ row.actual_cost.toFixed(6) }}
              </span>
              <!-- Cost Detail Tooltip -->
-              <div class="group relative">
+              <div
+                class="group relative"
+                @mouseenter="showTooltip($event, row)"
+                @mouseleave="hideTooltip"
+              >
                <div
                  class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50"
                >
@@ -399,39 +476,6 @@
                    />
                  </svg>
                </div>
-                <!-- Tooltip Content (right side) -->
-                <div
-                  class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100"
-                >
-                  <div
-                    class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
-                  >
-                    <div class="space-y-1.5">
-                      <div class="flex items-center justify-between gap-6">
-                        <span class="text-gray-400">{{ t('usage.rate') }}</span>
-                        <span class="font-semibold text-blue-400"
-                          >{{ (row.rate_multiplier || 1).toFixed(2) }}x</span
-                        >
-                      </div>
-                      <div class="flex items-center justify-between gap-6">
-                        <span class="text-gray-400">{{ t('usage.original') }}</span>
-                        <span class="font-medium text-white">${{ row.total_cost.toFixed(6) }}</span>
-                      </div>
-                      <div
-                        class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5"
-                      >
-                        <span class="text-gray-400">{{ t('usage.billed') }}</span>
-                        <span class="font-semibold text-green-400"
-                          >${{ row.actual_cost.toFixed(6) }}</span
-                        >
-                      </div>
-                    </div>
-                    <!-- Tooltip Arrow (left side) -->
-                    <div
-                      class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
-                    ></div>
-                  </div>
-                </div>
              </div>
            </div>
          </template>
@@ -471,10 +515,17 @@
            }}</span>
          </template>

+          <template #cell-request_id="{ row }">
+            <span class="font-mono text-xs text-gray-500 dark:text-gray-400">{{
+              row.request_id || '-'
+            }}</span>
+          </template>
+
          <template #empty>
            <EmptyState :message="t('usage.noRecords')" />
          </template>
        </DataTable>
+        </div>
      </div>

      <!-- Pagination -->
@@ -484,9 +535,70 @@
        :total="pagination.total"
        :page-size="pagination.page_size"
        @update:page="handlePageChange"
+        @update:pageSize="handlePageSizeChange"
      />
    </div>
  </AppLayout>
+
+  <!-- Tooltip Portal -->
+  <Teleport to="body">
+    <div
+      v-if="tooltipVisible"
+      class="fixed z-[9999] pointer-events-none -translate-y-1/2"
+      :style="{
+        left: tooltipPosition.x + 'px',
+        top: tooltipPosition.y + 'px'
+      }"
+    >
+      <div
+        class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
+      >
+        <div class="space-y-1.5">
+          <!-- Cost Breakdown -->
+          <div class="mb-2 border-b border-gray-700 pb-1.5">
+            <div class="text-xs font-semibold text-gray-300 mb-1">成本明细</div>
+            <div v-if="tooltipData && tooltipData.input_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.inputCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.input_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.output_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.outputCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.output_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.cache_creation_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheCreationCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.cache_creation_cost.toFixed(6) }}</span>
+            </div>
+            <div v-if="tooltipData && tooltipData.cache_read_cost > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheReadCost') }}</span>
+              <span class="font-medium text-white">${{ tooltipData.cache_read_cost.toFixed(6) }}</span>
+            </div>
+          </div>
+          <!-- Rate and Summary -->
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.rate') }}</span>
+            <span class="font-semibold text-blue-400"
+              >{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span
+            >
+          </div>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.original') }}</span>
+            <span class="font-medium text-white">${{ tooltipData?.total_cost.toFixed(6) }}</span>
+          </div>
+          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
+            <span class="text-gray-400">{{ t('usage.billed') }}</span>
+            <span class="font-semibold text-green-400"
+              >${{ tooltipData?.actual_cost.toFixed(6) }}</span
+            >
+          </div>
+        </div>
+        <!-- Tooltip Arrow (left side) -->
+        <div
+          class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"
+        ></div>
+      </div>
+    </div>
+  </Teleport>
 </template>

 <script setup lang="ts">
@@ -498,6 +610,7 @@ import AppLayout from '@/components/layout/AppLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
+import { formatDateTime } from '@/utils/format'
 import Select from '@/components/common/Select.vue'
 import DateRangePicker from '@/components/common/DateRangePicker.vue'
 import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
@@ -514,6 +627,11 @@ import type {
 const { t } = useI18n()
 const appStore = useAppStore()

+// Tooltip state
+const tooltipVisible = ref(false)
+const tooltipPosition = ref({ x: 0, y: 0 })
+const tooltipData = ref<UsageLog | null>(null)
+
 // Usage stats from API
 const usageStats = ref<AdminUsageStatsResponse | null>(null)

@@ -532,18 +650,25 @@ const granularityOptions = computed(() => [
 const columns = computed<Column[]>(() => [
  { key: 'user', label: t('admin.usage.user'), sortable: false },
  { key: 'api_key', label: t('usage.apiKeyFilter'), sortable: false },
+  { key: 'account', label: t('admin.usage.account'), sortable: false },
  { key: 'model', label: t('usage.model'), sortable: true },
+  { key: 'group', label: t('admin.usage.group'), sortable: false },
  { key: 'stream', label: t('usage.type'), sortable: false },
  { key: 'tokens', label: t('usage.tokens'), sortable: false },
  { key: 'cost', label: t('usage.cost'), sortable: false },
  { key: 'billing_type', label: t('usage.billingType'), sortable: false },
  { key: 'duration', label: t('usage.duration'), sortable: false },
-  { key: 'created_at', label: t('usage.time'), sortable: true }
+  { key: 'created_at', label: t('usage.time'), sortable: true },
+  { key: 'request_id', label: t('admin.usage.requestId'), sortable: false }
 ])

 const usageLogs = ref<UsageLog[]>([])
 const apiKeys = ref<SimpleApiKey[]>([])
+const models = ref<string[]>([])
+const accounts = ref<any[]>([])
+const groups = ref<any[]>([])
 const loading = ref(false)
+let abortController: AbortController | null = null

 // User search state
 const userSearchKeyword = ref('')
@@ -553,7 +678,7 @@ const showUserDropdown = ref(false)
 const selectedUser = ref<SimpleUser | null>(null)
 let searchTimeout: ReturnType<typeof setTimeout> | null = null

-// API Key options computed from selected user's keys
+// API Key options computed from loaded keys
 const apiKeyOptions = computed(() => {
  return [
    { value: null, label: t('usage.allApiKeys') },
@@ -564,6 +689,53 @@ const apiKeyOptions = computed(() => {
  ]
 })

+// Model options
+const modelOptions = computed(() => {
+  return [
+    { value: null, label: t('admin.usage.allModels') },
+    ...models.value.map((model) => ({
+      value: model,
+      label: model
+    }))
+  ]
+})
+
+// Account options
+const accountOptions = computed(() => {
+  return [
+    { value: null, label: t('admin.usage.allAccounts') },
+    ...accounts.value.map((account) => ({
+      value: account.id,
+      label: account.name
+    }))
+  ]
+})
+
+// Stream type options
+const streamOptions = computed(() => [
+  { value: null, label: t('admin.usage.allTypes') },
+  { value: true, label: t('usage.stream') },
+  { value: false, label: t('usage.sync') }
+])
+
+// Billing type options
+const billingTypeOptions = computed(() => [
+  { value: null, label: t('admin.usage.allBillingTypes') },
+  { value: 0, label: t('usage.balance') },
+  { value: 1, label: t('usage.subscription') }
+])
+
+// Group options
+const groupOptions = computed(() => {
+  return [
+    { value: null, label: t('admin.usage.allGroups') },
+    ...groups.value.map((group) => ({
+      value: group.id,
+      label: group.name
+    }))
+  ]
+})
+
 // Date range state
 const startDate = ref('')
 const endDate = ref('')
@@ -571,6 +743,11 @@ const endDate = ref('')
 const filters = ref<AdminUsageQueryParams>({
  user_id: undefined,
  api_key_id: undefined,
+  account_id: undefined,
+  group_id: undefined,
+  model: undefined,
+  stream: undefined,
+  billing_type: undefined,
  start_date: undefined,
  end_date: undefined
 })
@@ -622,7 +799,7 @@ const selectUser = async (user: SimpleUser) => {
  filters.value.api_key_id = undefined

  // Load API keys for selected user
-  await loadApiKeysForUser(user.id)
+  await loadApiKeys(user.id)
  applyFilters()
 }

@@ -633,10 +810,11 @@ const clearUserFilter = () => {
  filters.value.user_id = undefined
  filters.value.api_key_id = undefined
  apiKeys.value = []
+  loadApiKeys()
  applyFilters()
 }

-const loadApiKeysForUser = async (userId: number) => {
+const loadApiKeys = async (userId?: number) => {
  try {
    apiKeys.value = await adminAPI.usage.searchApiKeys(userId)
  } catch (error) {
@@ -689,18 +867,24 @@ const formatCacheTokens = (value: number): string => {
  return value.toLocaleString()
 }

-const formatDateTime = (dateString: string): string => {
-  const date = new Date(dateString)
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
+const isAbortError = (error: unknown): boolean => {
+  if (error instanceof DOMException && error.name === 'AbortError') {
+    return true
+  }
+  if (typeof error === 'object' && error !== null) {
+    const maybeError = error as { code?: string; name?: string }
+    return maybeError.code === 'ERR_CANCELED' || maybeError.name === 'CanceledError'
+  }
+  return false
 }

 const loadUsageLogs = async () => {
+  if (abortController) {
+    abortController.abort()
+  }
+  const controller = new AbortController()
+  abortController = controller
+  const { signal } = controller
  loading.value = true
  try {
    const params: AdminUsageQueryParams = {
@@ -709,14 +893,23 @@ const loadUsageLogs = async () => {
      ...filters.value
    }

-    const response = await adminAPI.usage.list(params)
+    const response = await adminAPI.usage.list(params, { signal })
+    if (signal.aborted) {
+      return
+    }
    usageLogs.value = response.items
    pagination.value.total = response.total
    pagination.value.pages = response.pages
+
  } catch (error) {
+    if (signal.aborted || isAbortError(error)) {
+      return
+    }
    appStore.showError(t('usage.failedToLoad'))
  } finally {
-    loading.value = false
+    if (!signal.aborted && abortController === controller) {
+      loading.value = false
+    }
  }
 }

@@ -775,6 +968,42 @@ const applyFilters = () => {
  loadChartData()
 }

+// Load filter options
+const loadFilterOptions = async () => {
+  try {
+    const [accountsResponse, groupsResponse] = await Promise.all([
+      adminAPI.accounts.list(1, 1000),
+      adminAPI.groups.list(1, 1000)
+    ])
+    accounts.value = accountsResponse.items || []
+    groups.value = groupsResponse.items || []
+  } catch (error) {
+    console.error('Failed to load filter options:', error)
+  }
+  await loadModelOptions()
+}
+
+const loadModelOptions = async () => {
+  try {
+    const endDate = new Date()
+    const startDateRange = new Date(endDate)
+    startDateRange.setDate(startDateRange.getDate() - 29)
+    const response = await adminAPI.dashboard.getModelStats({
+      start_date: startDateRange.toISOString().split('T')[0],
+      end_date: endDate.toISOString().split('T')[0]
+    })
+    const uniqueModels = new Set<string>()
+    response.models?.forEach((stat) => {
+      if (stat.model) {
+        uniqueModels.add(stat.model)
+      }
+    })
+    models.value = Array.from(uniqueModels).sort()
+  } catch (error) {
+    console.error('Failed to load model options:', error)
+  }
+}
+
 const resetFilters = () => {
  selectedUser.value = null
  userSearchKeyword.value = ''
@@ -783,6 +1012,11 @@ const resetFilters = () => {
  filters.value = {
    user_id: undefined,
    api_key_id: undefined,
+    account_id: undefined,
+    group_id: undefined,
+    model: undefined,
+    stream: undefined,
+    billing_type: undefined,
    start_date: undefined,
    end_date: undefined
  }
@@ -790,6 +1024,7 @@ const resetFilters = () => {
  // Reset date range to default (last 7 days)
  initializeDateRange()
  pagination.value.page = 1
+  loadApiKeys()
  loadUsageLogs()
  loadUsageStats()
  loadChartData()
@@ -800,6 +1035,12 @@ const handlePageChange = (page: number) => {
  loadUsageLogs()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.value.page_size = pageSize
+  pagination.value.page = 1
+  loadUsageLogs()
+}
+
 const exportToCSV = () => {
  if (usageLogs.value.length === 0) {
    appStore.showWarning(t('usage.noDataToExport'))
@@ -856,8 +1097,26 @@ const handleClickOutside = (event: MouseEvent) => {
  }
 }

+// Tooltip functions
+const showTooltip = (event: MouseEvent, row: UsageLog) => {
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+
+  tooltipData.value = row
+  tooltipPosition.value.x = rect.right + 8
+  tooltipPosition.value.y = rect.top + rect.height / 2
+  tooltipVisible.value = true
+}
+
+const hideTooltip = () => {
+  tooltipVisible.value = false
+  tooltipData.value = null
+}
+
 onMounted(() => {
  initializeDateRange()
+  loadFilterOptions()
+  loadApiKeys()
  loadUsageLogs()
  loadUsageStats()
  loadChartData()
@@ -869,5 +1128,8 @@ onUnmounted(() => {
  if (searchTimeout) {
    clearTimeout(searchTimeout)
  }
+  if (abortController) {
+    abortController.abort()
+  }
 })
 </script>
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -1,8 +1,9 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
+    <TablePageLayout>
      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
+      <template #actions>
+        <div class="flex justify-end gap-3">
        <button
          @click="loadUsers"
          :disabled="loading"
@@ -36,8 +37,10 @@
          {{ t('admin.users.createUser') }}
        </button>
      </div>
+      </template>

      <!-- Search and Filters -->
+      <template #filters>
      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div class="relative max-w-md flex-1">
          <svg
@@ -78,10 +81,11 @@
          />
        </div>
      </div>
+      </template>

      <!-- Users Table -->
-      <div class="card overflow-hidden">
-        <DataTable :columns="columns" :data="users" :loading="loading">
+      <template #table>
+        <DataTable :columns="columns" :data="users" :loading="loading" :actions-count="7">
          <template #cell-email="{ value }">
            <div class="flex items-center gap-2">
              <div
@@ -135,7 +139,7 @@
                :subscription-type="sub.group?.subscription_type"
                :rate-multiplier="sub.group?.rate_multiplier"
                :days-remaining="sub.expires_at ? getDaysRemaining(sub.expires_at) : null"
-                :title="sub.expires_at ? formatExpiresAt(sub.expires_at) : ''"
+                :title="sub.expires_at ? formatDateTime(sub.expires_at) : ''"
              />
            </div>
            <span
@@ -191,132 +195,15 @@
          </template>

          <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatDate(value) }}</span>
+            <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatDateTime(value) }}</span>
          </template>

          <template #cell-actions="{ row }">
            <div class="flex items-center gap-1">
-              <!-- Toggle Status (hidden for admin users) -->
-              <button
-                v-if="row.role !== 'admin'"
-                @click="handleToggleStatus(row)"
-                :class="[
-                  'rounded-lg p-2 transition-colors',
-                  row.status === 'active'
-                    ? 'text-gray-500 hover:bg-orange-50 hover:text-orange-600 dark:hover:bg-orange-900/20 dark:hover:text-orange-400'
-                    : 'text-gray-500 hover:bg-green-50 hover:text-green-600 dark:hover:bg-green-900/20 dark:hover:text-green-400'
-                ]"
-                :title="
-                  row.status === 'active'
-                    ? t('admin.users.disableUser')
-                    : t('admin.users.enableUser')
-                "
-              >
-                <svg
-                  v-if="row.status === 'active'"
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-                  />
-                </svg>
-                <svg
-                  v-else
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </button>
-              <!-- Allowed Groups -->
-              <button
-                @click="handleAllowedGroups(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
-                :title="t('admin.users.setAllowedGroups')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
-                  />
-                </svg>
-              </button>
-              <!-- View API Keys -->
-              <button
-                @click="handleViewApiKeys(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-purple-50 hover:text-purple-600 dark:hover:bg-purple-900/20 dark:hover:text-purple-400"
-                :title="t('admin.users.viewApiKeys')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"
-                  />
-                </svg>
-              </button>
-              <!-- Deposit -->
-              <button
-                @click="handleDeposit(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-400"
-                :title="t('admin.users.deposit')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                </svg>
-              </button>
-              <!-- Withdraw -->
-              <button
-                @click="handleWithdraw(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('admin.users.withdraw')"
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
-                </svg>
-              </button>
-              <!-- Edit -->
+              <!-- Edit Button -->
              <button
                @click="handleEdit(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
+                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
                :title="t('common.edit')"
              >
                <svg
@@ -333,24 +220,25 @@
                  />
                </svg>
              </button>
-              <!-- Delete (hidden for admin users) -->
+
+              <!-- More Actions Menu Trigger -->
              <button
-                v-if="row.role !== 'admin'"
-                @click="handleDelete(row)"
-                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                :title="t('common.delete')"
+                :ref="(el) => setActionButtonRef(row.id, el)"
+                @click="openActionMenu(row)"
+                class="action-menu-trigger flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
+                :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
              >
                <svg
-                  class="h-4 w-4"
+                  class="h-5 w-5"
                  fill="none"
-                  stroke="currentColor"
                  viewBox="0 0 24 24"
+                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
-                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                    d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                  />
                </svg>
              </button>
@@ -366,26 +254,131 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

      <!-- Pagination -->
+      <template #pagination>
      <Pagination
        v-if="pagination.total > 0"
        :page="pagination.page"
        :total="pagination.total"
        :page-size="pagination.page_size"
        @update:page="handlePageChange"
+        @update:pageSize="handlePageSizeChange"
      />
-    </div>
+      </template>
+    </TablePageLayout>
+
+    <!-- Action Menu (Teleported) -->
+    <Teleport to="body">
+      <div
+        v-if="activeMenuId !== null && menuPosition"
+        class="action-menu-content fixed z-[9999] w-48 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
+        :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
+      >
+        <div class="py-1">
+          <template v-for="user in users" :key="user.id">
+            <template v-if="user.id === activeMenuId">
+              <!-- View API Keys -->
+              <button
+                @click="handleViewApiKeys(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11.536 16.207l-1.414 1.414a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l-1.414-1.414a2 2 0 010-2.828l1.414-1.414L10.257 6.257A6 6 0 1121 11.257V11.257" />
+                </svg>
+                {{ t('admin.users.apiKeys') }}
+              </button>
+
+              <!-- Allowed Groups -->
+              <button
+                @click="handleAllowedGroups(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                </svg>
+                {{ t('admin.users.groups') }}
+              </button>
+
+              <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
+
+              <!-- Deposit -->
+              <button
+                @click="handleDeposit(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                {{ t('admin.users.deposit') }}
+              </button>
+
+              <!-- Withdraw -->
+              <button
+                @click="handleWithdraw(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg class="h-4 w-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+                </svg>
+                {{ t('admin.users.withdraw') }}
+              </button>
+
+              <div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
+
+              <!-- Toggle Status (not for admin) -->
+              <button
+                v-if="user.role !== 'admin'"
+                @click="handleToggleStatus(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
+              >
+                <svg
+                  v-if="user.status === 'active'"
+                  class="h-4 w-4 text-orange-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                </svg>
+                <svg
+                  v-else
+                  class="h-4 w-4 text-green-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {{ user.status === 'active' ? t('admin.users.disable') : t('admin.users.enable') }}
+              </button>
+
+              <!-- Delete (not for admin) -->
+              <button
+                v-if="user.role !== 'admin'"
+                @click="handleDelete(user); closeActionMenu()"
+                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+              >
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                {{ t('common.delete') }}
+              </button>
+            </template>
+          </template>
+        </div>
+      </div>
+    </Teleport>

    <!-- Create User Modal -->
-    <Modal
+    <BaseDialog
      :show="showCreateModal"
      :title="t('admin.users.createUser')"
-      size="lg"
+      width="normal"
      @close="closeCreateModal"
    >
-      <form @submit.prevent="handleCreateUser" class="space-y-5">
+      <form id="create-user-form" @submit.prevent="handleCreateUser" class="space-y-5">
        <div>
          <label class="input-label">{{ t('admin.users.email') }}</label>
          <input
@@ -507,12 +500,19 @@
            <input v-model.number="createForm.concurrency" type="number" class="input" />
          </div>
        </div>
+      </form>

-        <div class="flex justify-end gap-3 pt-4">
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeCreateModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="create-user-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -536,17 +536,22 @@
            {{ submitting ? t('admin.users.creating') : t('common.create') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Edit User Modal -->
-    <Modal
+    <BaseDialog
      :show="showEditModal"
      :title="t('admin.users.editUser')"
-      size="lg"
+      width="normal"
      @close="closeEditModal"
    >
-      <form v-if="editingUser" @submit.prevent="handleUpdateUser" class="space-y-5">
+      <form
+        v-if="editingUser"
+        id="edit-user-form"
+        @submit.prevent="handleUpdateUser"
+        class="space-y-5"
+      >
        <div>
          <label class="input-label">{{ t('admin.users.email') }}</label>
          <input v-model="editForm.email" type="email" class="input" />
@@ -659,11 +664,19 @@
          <input v-model.number="editForm.concurrency" type="number" class="input" />
        </div>

-        <div class="flex justify-end gap-3 pt-4">
+      </form>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeEditModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
-          <button type="submit" :disabled="submitting" class="btn btn-primary">
+          <button
+            type="submit"
+            form="edit-user-form"
+            :disabled="submitting"
+            class="btn btn-primary"
+          >
            <svg
              v-if="submitting"
              class="-ml-1 mr-2 h-4 w-4 animate-spin"
@@ -687,14 +700,14 @@
            {{ submitting ? t('admin.users.updating') : t('common.update') }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- View API Keys Modal -->
-    <Modal
+    <BaseDialog
      :show="showApiKeysModal"
      :title="t('admin.users.userApiKeys')"
-      size="xl"
+      width="wide"
      @close="closeApiKeysModal"
    >
      <div v-if="viewingUser" class="space-y-4">
@@ -808,7 +821,7 @@
                  />
                </svg>
                <span
-                  >{{ t('admin.users.columns.created') }}: {{ formatDate(key.created_at) }}</span
+                  >{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span
                >
              </div>
            </div>
@@ -823,13 +836,13 @@
          </button>
        </div>
      </template>
-    </Modal>
+    </BaseDialog>

    <!-- Allowed Groups Modal -->
-    <Modal
+    <BaseDialog
      :show="showAllowedGroupsModal"
      :title="t('admin.users.setAllowedGroups')"
-      size="lg"
+      width="normal"
      @close="closeAllowedGroupsModal"
    >
      <div v-if="allowedGroupsUser" class="space-y-4">
@@ -989,16 +1002,21 @@
          </button>
        </div>
      </template>
-    </Modal>
+    </BaseDialog>

    <!-- Deposit/Withdraw Modal -->
-    <Modal
+    <BaseDialog
      :show="showBalanceModal"
      :title="balanceOperation === 'add' ? t('admin.users.deposit') : t('admin.users.withdraw')"
-      size="md"
+      width="narrow"
      @close="closeBalanceModal"
    >
-      <form v-if="balanceUser" @submit.prevent="handleBalanceSubmit" class="space-y-5">
+      <form
+        v-if="balanceUser"
+        id="balance-form"
+        @submit.prevent="handleBalanceSubmit"
+        class="space-y-5"
+      >
        <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
          <div
            class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30"
@@ -1093,12 +1111,16 @@
          </div>
        </div>

-        <div class="flex justify-end gap-3 pt-4">
+      </form>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
          <button @click="closeBalanceModal" type="button" class="btn btn-secondary">
            {{ t('common.cancel') }}
          </button>
          <button
            type="submit"
+            form="balance-form"
            :disabled="
              balanceSubmitting ||
              !balanceForm.amount ||
@@ -1143,8 +1165,8 @@
            }}
          </button>
        </div>
-      </form>
-    </Modal>
+      </template>
+    </BaseDialog>

    <!-- Delete Confirmation Dialog -->
    <ConfirmDialog
@@ -1161,9 +1183,11 @@
 </template>

 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
+import { useClipboard } from '@/composables/useClipboard'
+import { formatDateTime } from '@/utils/format'

 const { t } = useI18n()
 import { adminAPI } from '@/api/admin'
@@ -1171,15 +1195,17 @@ import type { User, ApiKey, Group } from '@/types'
 import type { BatchUserUsageStats } from '@/api/admin/dashboard'
 import type { Column } from '@/components/common/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
 import GroupBadge from '@/components/common/GroupBadge.vue'

 const appStore = useAppStore()
+const { copyToClipboard: clipboardCopy } = useClipboard()

 const columns = computed<Column[]>(() => [
  { key: 'email', label: t('admin.users.columns.user'), sortable: true },
@@ -1235,6 +1261,63 @@ const viewingUser = ref<User | null>(null)
 const userApiKeys = ref<ApiKey[]>([])
 const loadingApiKeys = ref(false)
 const passwordCopied = ref(false)
+let abortController: AbortController | null = null
+
+// Action Menu State
+const activeMenuId = ref<number | null>(null)
+const menuPosition = ref<{ top: number; left: number } | null>(null)
+const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
+
+const setActionButtonRef = (userId: number, el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) {
+    actionButtonRefs.value.set(userId, el)
+  } else {
+    actionButtonRefs.value.delete(userId)
+  }
+}
+
+const openActionMenu = (user: User) => {
+  if (activeMenuId.value === user.id) {
+    closeActionMenu()
+  } else {
+    const buttonEl = actionButtonRefs.value.get(user.id)
+    if (buttonEl) {
+      const rect = buttonEl.getBoundingClientRect()
+      const menuWidth = 192
+      const menuHeight = 240
+      const padding = 8
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+      const left = Math.min(
+        Math.max(rect.right - menuWidth, padding),
+        Math.max(viewportWidth - menuWidth - padding, padding)
+      )
+      let top = rect.bottom + 4
+      if (top + menuHeight > viewportHeight - padding) {
+        top = Math.max(rect.top - menuHeight - 4, padding)
+      }
+      // Position menu near the trigger, clamped to viewport
+      menuPosition.value = {
+        top,
+        left
+      }
+    }
+    activeMenuId.value = user.id
+  }
+}
+
+const closeActionMenu = () => {
+  activeMenuId.value = null
+  menuPosition.value = null
+}
+
+// Close menu when clicking outside
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.action-menu-trigger') && !target.closest('.action-menu-content')) {
+    closeActionMenu()
+  }
+}

 // Allowed groups modal state
 const showAllowedGroupsModal = ref(false)
@@ -1274,15 +1357,6 @@ const editForm = reactive({
 })
 const editPasswordCopied = ref(false)

-const formatDate = (dateString: string): string => {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
 // 计算剩余天数
 const getDaysRemaining = (expiresAt: string): number => {
  const now = new Date()
@@ -1291,12 +1365,6 @@ const getDaysRemaining = (expiresAt: string): number => {
  return Math.ceil(diffMs / (1000 * 60 * 60 * 24))
 }

-// 格式化过期时间（用于 tooltip）
-const formatExpiresAt = (expiresAt: string): string => {
-  const date = new Date(expiresAt)
-  return date.toLocaleString()
-}
-
 const generateRandomPasswordStr = () => {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%^&*'
  let password = ''
@@ -1316,38 +1384,46 @@ const generateEditPassword = () => {

 const copyPassword = async () => {
  if (!createForm.password) return
-  try {
-    await navigator.clipboard.writeText(createForm.password)
+  const success = await clipboardCopy(createForm.password, t('admin.users.passwordCopied'))
+  if (success) {
    passwordCopied.value = true
    setTimeout(() => {
      passwordCopied.value = false
    }, 2000)
-  } catch (error) {
-    appStore.showError(t('common.copyFailed'))
  }
 }

 const copyEditPassword = async () => {
  if (!editForm.password) return
-  try {
-    await navigator.clipboard.writeText(editForm.password)
+  const success = await clipboardCopy(editForm.password, t('admin.users.passwordCopied'))
+  if (success) {
    editPasswordCopied.value = true
    setTimeout(() => {
      editPasswordCopied.value = false
    }, 2000)
-  } catch (error) {
-    appStore.showError(t('common.copyFailed'))
  }
 }

 const loadUsers = async () => {
+  abortController?.abort()
+  const currentAbortController = new AbortController()
+  abortController = currentAbortController
+  const { signal } = currentAbortController
  loading.value = true
  try {
-    const response = await adminAPI.users.list(pagination.page, pagination.page_size, {
-      role: filters.role as any,
-      status: filters.status as any,
-      search: searchQuery.value || undefined
-    })
+    const response = await adminAPI.users.list(
+      pagination.page,
+      pagination.page_size,
+      {
+        role: filters.role as any,
+        status: filters.status as any,
+        search: searchQuery.value || undefined
+      },
+      { signal }
+    )
+    if (signal.aborted) {
+      return
+    }
    users.value = response.items
    pagination.total = response.total
    pagination.pages = response.pages
@@ -1357,16 +1433,28 @@ const loadUsers = async () => {
      const userIds = response.items.map((u) => u.id)
      try {
        const usageResponse = await adminAPI.dashboard.getBatchUsersUsage(userIds)
+        if (signal.aborted) {
+          return
+        }
        usageStats.value = usageResponse.stats
      } catch (e) {
+        if (signal.aborted) {
+          return
+        }
        console.error('Failed to load usage stats:', e)
      }
    }
  } catch (error) {
+    const errorInfo = error as { name?: string; code?: string }
+    if (errorInfo?.name === 'AbortError' || errorInfo?.name === 'CanceledError' || errorInfo?.code === 'ERR_CANCELED') {
+      return
+    }
    appStore.showError(t('admin.users.failedToLoad'))
    console.error('Error loading users:', error)
  } finally {
-    loading.value = false
+    if (abortController === currentAbortController) {
+      loading.value = false
+    }
  }
 }

@@ -1384,6 +1472,12 @@ const handlePageChange = (page: number) => {
  loadUsers()
 }

+const handlePageSizeChange = (pageSize: number) => {
+  pagination.page_size = pageSize
+  pagination.page = 1
+  loadUsers()
+}
+
 const closeCreateModal = () => {
  showCreateModal.value = false
  createForm.email = ''
@@ -1630,5 +1724,10 @@ const handleBalanceSubmit = async () => {

 onMounted(() => {
  loadUsers()
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
 })
 </script>
--- a/frontend/src/views/auth/EmailVerifyView.vue
+++ b/frontend/src/views/auth/EmailVerifyView.vue
@@ -3,7 +3,9 @@
    <div class="space-y-6">
      <!-- Title -->
      <div class="text-center">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Verify Your Email</h2>
+        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+          {{ t('auth.verifyYourEmail') }}
+        </h2>
        <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
          We'll send a verification code to
          <span class="font-medium text-gray-700 dark:text-gray-300">{{ email }}</span>
@@ -32,8 +34,8 @@
            </svg>
          </div>
          <div class="text-sm text-amber-700 dark:text-amber-400">
-            <p class="font-medium">Session expired</p>
-            <p class="mt-1">Please go back to the registration page and start again.</p>
+            <p class="font-medium">{{ t('auth.sessionExpired') }}</p>
+            <p class="mt-1">{{ t('auth.sessionExpiredDesc') }}</p>
          </div>
        </div>
      </div>
@@ -42,7 +44,9 @@
      <form v-else @submit.prevent="handleVerify" class="space-y-5">
        <!-- Verification Code Input -->
        <div>
-          <label for="code" class="input-label text-center"> Verification Code </label>
+          <label for="code" class="input-label text-center">
+            {{ t('auth.verificationCode') }}
+          </label>
          <input
            id="code"
            v-model="verifyCode"
@@ -59,7 +63,7 @@
          <p v-if="errors.code" class="input-error-text text-center">
            {{ errors.code }}
          </p>
-          <p v-else class="input-hint text-center">Enter the 6-digit code sent to your email</p>
+          <p v-else class="input-hint text-center">{{ t('auth.verificationCodeHint') }}</p>
        </div>

        <!-- Code Status -->
@@ -190,9 +194,11 @@
            "
            class="text-sm text-primary-600 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:text-primary-400 dark:hover:text-primary-300"
          >
-            <span v-if="isSendingCode">Sending...</span>
-            <span v-else-if="turnstileEnabled && !showResendTurnstile">Click to resend code</span>
-            <span v-else>Resend verification code</span>
+            <span v-if="isSendingCode">{{ t('auth.sendingCode') }}</span>
+            <span v-else-if="turnstileEnabled && !showResendTurnstile">
+              {{ t('auth.clickToResend') }}
+            </span>
+            <span v-else>{{ t('auth.resendCode') }}</span>
          </button>
        </div>
      </form>
@@ -226,11 +232,14 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { AuthLayout } from '@/components/layout'
 import TurnstileWidget from '@/components/TurnstileWidget.vue'
 import { useAuthStore, useAppStore } from '@/stores'
 import { getPublicSettings, sendVerifyCode } from '@/api/auth'

+const { t } = useI18n()
+
 // ==================== Router & Stores ====================

 const router = useRouter()
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
shaw	fb9d087838	Merge PR #62 : refactor(frontend): 前端界面优化与订阅状态管理增强	2025-12-28 16:26:13 +08:00
Wesley Liddick	18c6686fed	Merge branch 'main' into feature/ui-improvements-clean	2025-12-28 03:22:11 -05:00
IanShaw027	386f6da14d	fix(frontend): 移除DataTable中未使用的函数和变量 - 移除未使用的 hasExpandableActions 计算属性 - 移除未使用的 toggleActionsExpanded 函数 - 修复 TypeScript 类型检查错误	2025-12-28 14:53:36 +08:00
IanShaw027	d895a2c469	refactor(frontend): 移除DataTable表头中废弃的展开/折叠按钮 - 移除操作列表头的展开/折叠按钮和图标 - 该功能已被操作列内的'更多'按钮替代 - 保留底层的展开/收起逻辑供'更多'按钮使用	2025-12-28 14:53:36 +08:00
IanShaw027	5f2d81d154	fix(frontend): 修复UI改进分支中的关键问题 - 修复RedeemView订阅刷新失败导致流程中断的问题将订阅刷新隔离到独立try/catch，失败时仅显示警告 - 修复DataTable resize事件监听器泄漏问题确保添加和移除使用同一个回调引用 - 修复订阅状态缓存导致强制刷新失效的问题 force=true时绕过activePromise缓存，clear()清空缓存 - 修复图表主题切换后颜色不更新的问题添加图表ref并在主题切换时调用update()方法	2025-12-28 14:53:36 +08:00
IanShaw027	4e3499c0d7	fix(frontend): 改进订阅状态实时刷新机制 - 在 Dashboard 页面加载时强制刷新订阅状态 - 在兑换订阅卡密后立即刷新订阅状态 - 清理订阅轮询相关注释	2025-12-28 14:53:36 +08:00
IanShaw027	26cdb1805d	fix(frontend): 补充缺失的BaseDialog组件	2025-12-28 14:53:36 +08:00
IanShaw027	506cb21cb1	refactor(frontend): UI/UX改进和组件优化 - DataTable组件操作列自适应 - 优化各种Modal弹窗 - 统一API调用方式（AbortSignal） - 添加全局订阅状态管理 - 优化各管理视图的交互和布局 - 修复国际化翻译问题	2025-12-28 14:53:36 +08:00
yangjianbo	fd51ff6970	fix: 代码的核心问题是判错条件用错了层级： - apiKeyService.GetByKey(...) 返回的“找不到 API key”在这个项目里通常会被翻译成业务错误（比如 service.ErrApiKeyNotFound 这类 ApplicationError），而不是直接把 gorm.ErrRecordNotFound 透传到中间件层。 - 因此你在中间件里用 errors.Is(err, gorm.ErrRecordNotFound) 去判断“无效 key”，很容易匹配不到（尤其是：后面加 Redis 缓存、换存储实现、或测试里用 stub repo 时，根本不会出现 gorm 的错误）。 - 匹配不到时就会走到 500 Failed to validate API key，导致无效 API key 被错误地当成服务端故障返回 500（应该是 401）。修复思路：中间件不要依赖 gorm 的错误，改成判断业务层错误，例如： if errors.Is(err, service.ErrApiKeyNotFound) { abortWithGoogleError(c, 401, "Invalid API key") return } 如果你把 GetByKey 的“not found”统一封装成业务错误，这样才不会被底层实现（gorm/redis/mock）影响。	2025-12-28 14:34:05 +08:00
程序猿MT	295d71be0a	Merge branch 'Wei-Shaw:main' into main	2025-12-28 13:16:57 +08:00
shaw	9bbe468c91	fix: 修复安装脚本通过 pipe 执行时 root 权限检查失效的问题使用 `id -u` 替代 `$EUID` 进行 root 权限检查。 `$EUID` 是 bash 内置变量，在通过 pipe 执行脚本时可能不可靠。	2025-12-28 12:25:55 +08:00
shaw	fbdff4f34f	fix: 防止订阅过期时间超出 JSON 序列化范围问题：当分配订阅天数过大时，expires_at 年份可能超过 9999，导致 time.Time JSON 序列化失败（RFC 3339 要求年份 <= 9999），使后台无法显示和删除异常数据。修复： - handler 层添加 validity_days 最大值验证（max=36500，即100年） - service 层添加 MaxValidityDays 和 MaxExpiresAt 双重保护 - 启动时自动修复已存在的异常数据（expires_at > 2099年）	2025-12-28 11:45:41 +08:00
shaw	0aa480283f	Merge branch 'feat/deferred-batch-update'	2025-12-28 11:28:06 +08:00
shaw	cd9d31f5f2	fix: 修复NeedsRefresh bug导致刷新失败的问题	2025-12-28 11:23:52 +08:00
noreply	cbfce49aa1	feat: Schedule batch update for account last_used_at Implement deferred batch update mechanism to reduce database load: - Add DeferredService for batching account last_used_at updates - Add TimingWheelService for efficient recurring task scheduling - Integrate with GatewayService and OpenAIGatewayService - Implement BatchUpdateLastUsed repository method using CASE...WHEN SQL - Fix golangci-lint error: Replace interface{} with any Benefits: - Reduces database writes by batching updates (10-second intervals) - Improves request throughput by deferring non-critical updates - Maintains accurate account usage tracking for scheduling	2025-12-28 09:49:54 +08:00
程序猿MT	1d1da7362b	Merge branch 'Wei-Shaw:main' into main	2025-12-27 23:09:48 +08:00
yangjianbo	a8c173f043	Merge branch 'main' of https://github.com/mt21625457/aicodex2api	2025-12-27 23:09:11 +08:00
yangjianbo	97ab649d16	fix(仪表盘): 修复最近用量查询日期参数格式问题：仪表盘“最近用量”调用 /usage 时传入完整 ISO 时间戳（含时分秒/时区），后端 start_date/end_date 仅接受 YYYY-MM-DD，导致请求参数校验失败，页面无法正常展示最近用量。解决： - loadRecentUsage 改为传入 YYYY-MM-DD（从 toISOString() 取日期部分），与后端参数格式约定保持一致 - 补充注释说明：后端会将 end_date 扩展到当日结束时间，以及 toISOString() 为 UTC 可能带来的统计口径差异 - 同步修正 usageAPI.getByDateRange 的参数注释，避免后续误用验证：npm -C frontend run build	2025-12-27 23:08:38 +08:00
程序猿MT	d3e73f1260	feat: 增加caddy 安全配置示例 (#57 ) feat 增加 caddy 示例安全反向代理	2025-12-27 21:36:26 +08:00
程序猿MT	f3da4b202e	Merge branch 'Wei-Shaw:main' into main	2025-12-27 21:32:08 +08:00
yangjianbo	530f6ad81c	feat: 增加caddy 安全配置示例	2025-12-27 21:31:06 +08:00
yangjianbo	3252c378aa	feat 增加 caddy 示例安全反向代理	2025-12-27 21:30:14 +08:00
shaw	b5ca6a654c	Merge branch 'main' of github.com:Wei-Shaw/sub2api # Conflicts:	2025-12-27 21:16:29 +08:00
shaw	94749b12ac	chore: 调整deploy说明以及取消postgres端口暴露	2025-12-27 21:14:08 +08:00
IanShaw	523fa9f71e	fix(frontend): 修复用户仪表板日期格式错误导致请求失败 (#55 ) 修复 loadRecentUsage 函数中日期格式问题，将 ISO 完整格式改为 YYYY-MM-DD 格式，与后端 API 期望一致。	2025-12-27 21:09:43 +08:00
shaw	54636781ea	Merge branch 'feature/datatable-enhancements'	2025-12-27 21:00:37 +08:00
shaw	5187db5ee5	fix(frontend): 修复DataTable无限循环和i18n邮箱解析错误 - 修复DataTable组件watch监听actionsExpanded导致的无限循环卡死问题 - 为AccountsView和UsersView添加actionsCount属性启用操作列展开功能 - 修复i18n翻译中邮箱地址的@符号未转义导致的编译错误	2025-12-27 21:00:26 +08:00
shaw	0b9c4ae69e	fix: 修复claude setup token授权效期短的问题	2025-12-27 20:42:00 +08:00
shaw	0d5a8a95c8	fix: 修复claude token刷新失效的问题	2025-12-27 20:13:39 +08:00
IanShaw027	9cd97c9e1d	fix(frontend): 统一账号编辑弹窗宽度与新增弹窗保持一致问题： - 编辑账号弹窗使用size='lg' - 新增账号弹窗使用size='xl' - 两者宽度不一致，体验不统一修复： - 将EditAccountModal的size从lg改为xl - 与CreateAccountModal保持一致	2025-12-27 20:13:29 +08:00
IanShaw027	d521191e87	fix(frontend): 修复i18n翻译中的Invalid linked format错误问题： - admin/settings页面无法访问，报错'Invalid linked format' - vue-i18n解析器将{'@'}误认为链接格式语法修复： - 将zh.ts和en.ts中的{'@'}替换为直接的@字符 - 影响范围：代理配置相关的翻译字符串	2025-12-27 20:11:13 +08:00
IanShaw027	fd78993b91	feat(frontend): DataTable组件增强 - 操作列宽度自适应和列数自适应padding 新增功能： 1. 操作列宽度自适应 - checkActionsColumnWidth 方法：智能检测操作按钮是否超出列宽 - 临时展开所有按钮测量实际宽度 - 计算包含gap的总宽度 - 与可用宽度对比，自动显示/隐藏"展开"按钮 - 新增 actionsCount prop： - 用于快速判断是否需要展开功能 - 避免DOM查询带来的性能开销 2. 列数自适应padding - getAdaptivePaddingClass 方法：根据列数动态调整内边距 - ≥10列 → px-2 (8px) - ≥7列 → px-3 (12px) - ≥5列 → px-4 (16px) - <5列 → px-6 (24px，原始值) - 让表格在列数较多时更紧凑，提升空间利用率	2025-12-27 20:02:10 +08:00
程序猿MT	937b1fb05d	Merge branch 'Wei-Shaw:main' into main	2025-12-27 20:01:56 +08:00
shaw	80cce858cb	fix(frontend): 修复添加账号弹窗宽度和tooltip被截断问题 - 将弹窗尺寸从 lg 改为 xl，增加内容显示空间 - 修复 AI Studio tooltip 被弹窗边界截断的问题 - 调整定位从 left-0 改为 right-0 - 减小宽度从 w-[28rem] 改为 w-80 - 提高 z-index 确保正确显示	2025-12-27 17:04:38 +08:00
程序猿MT	7bdb0e6b12	Merge branch 'Wei-Shaw:main' into main	2025-12-27 16:48:31 +08:00
shaw	0743652d92	Merge branch 'feature/ui-and-backend-improvements'	2025-12-27 16:33:57 +08:00
IanShaw027	96bec5c9b1	fix(test): 实现GetUserStatsAggregated方法以支持新的统计查询 - 在stubUsageLogRepo中实现GetUserStatsAggregated方法 - 根据userLogs计算统计数据而不是返回错误 - 修复类型转换问题（int转int64）	2025-12-27 16:20:59 +08:00
IanShaw027	cfeb6b8b14	fix(test): 添加缺失的GetUserStatsAggregated方法	2025-12-27 16:15:32 +08:00
IanShaw027	481310dea0	fix(test): 修复CI测试失败 - 修复gofmt格式问题 - 为stubUsageLogRepo添加缺失的GetApiKeyStatsAggregated方法	2025-12-27 16:12:06 +08:00
IanShaw027	ea2821d11d	refactor(frontend): 优化用户视图和设置向导 - 改进API密钥管理界面 - 优化用户使用统计视图 - 完善初始化设置向导	2025-12-27 16:05:36 +08:00
IanShaw027	7a0de1765f	refactor(frontend): 优化管理后台视图 - 改进账户管理视图 - 优化分组管理界面 - 完善代理管理功能 - 增强兑换码管理 - 改进订阅管理视图 - 优化使用统计展示 - 完善用户管理界面	2025-12-27 16:05:16 +08:00
程序猿MT	17c3cb2403	Merge branch 'Wei-Shaw:main' into main	2025-12-27 16:05:11 +08:00
IanShaw027	35b1bc3753	refactor(frontend): 优化格式化工具函数 - 改进数据格式化逻辑 - 增强工具函数可读性	2025-12-27 16:04:56 +08:00
IanShaw027	8d38788672	feat(frontend): 更新国际化翻译 - 新增英文翻译条目 - 完善中文翻译内容 - 改进多语言支持	2025-12-27 16:04:35 +08:00
IanShaw027	c615a4264d	refactor(frontend): 优化通用组件 - 改进ConfirmDialog对话框组件 - 增强DataTable表格组件功能和响应式布局 - 优化EmptyState空状态组件 - 完善SubscriptionProgressMini订阅进度组件	2025-12-27 16:04:16 +08:00
IanShaw027	227d506c53	feat(backend): 增强使用统计和API密钥功能 - 优化使用统计处理逻辑 - 增强API密钥仓储层功能 - 改进账户使用服务 - 完善API契约测试覆盖	2025-12-27 16:03:57 +08:00
IanShaw027	36a86e9ab4	perf(backend): 优化数据库查询性能 - 合并多个独立查询为单个SQL查询 - 减少数据库往返次数 - 提升仪表板统计数据获取效率	2025-12-27 16:03:37 +08:00
shaw	f133b051dc	fix: 修复TG通知workflow语法错误 - 移除if条件中对secrets的直接引用（GitHub Actions不支持） - 改用shell脚本内部检查环境变量是否存在	2025-12-27 16:03:13 +08:00
shaw	7af1bdbf4c	chore: workflow增加TG频道更新通知	2025-12-27 15:55:09 +08:00
shaw	016d7ef645	feat: 增强前端clipboard功能	2025-12-27 15:16:52 +08:00
shaw	f1e47291cd	fix: 修复账号更新时分组绑定操作顺序导致的数据不一致问题原逻辑先执行 Update 再验证 GroupIDs，如果验证失败会导致账号已更新但返回错误。现改为先验证分组是否存在，再执行 Update 和 BindGroups。	2025-12-27 14:57:43 +08:00
shaw	d7e9ae38e4	Merge PR #49 : feat: cc/codex/gemini 增加账号重试功能	2025-12-27 13:59:00 +08:00
程序猿MT	88be981afc	feat: (#47 ) golang 1.24-> 1.25 node 20 -> node 24 具体提升请查看官方文档 Co-authored-by: yangjianbo <yangjianbo@leagsoft.com>	2025-12-27 13:56:14 +08:00
IanShaw	3f92a43170	test: 完善 UsageLogRepo 测试 stub 的过滤逻辑 (#50 )	2025-12-27 13:53:47 +08:00
shaw	2101f1d1c8	fix: 修复claude OAuth账户刷新token失败的bug	2025-12-27 13:50:35 +08:00
daodao97	f0f920e49f	feat: cc/codex/gemini 增加账号重试	2025-12-27 12:27:47 +08:00
daodao97	95583fce83	feat: cc/codex support account retry	2025-12-27 12:05:38 +08:00
程序猿MT	a413fa3b17	Merge branch 'Wei-Shaw:main' into main	2025-12-27 10:58:30 +08:00
yangjianbo	3a8dbf5a99	feat: golang 1.24-> 1.25 node 20 -> node 24 具体提升请查看官方文档	2025-12-27 10:57:53 +08:00
IanShaw	254f12543c	feat(frontend): 前端界面优化与使用统计功能增强 (#46 ) * feat(frontend): 前端界面优化与使用统计功能增强主要改动: 1. 表格布局统一优化 - 新增 TablePageLayout 通用布局组件 - 统一所有管理页面的表格样式和交互 - 优化 DataTable、Pagination、Select 等通用组件 2. 使用统计功能增强 - 管理端: 添加完整的筛选和显示功能 - 用户端: 完善 API Key 列显示 - 后端: 优化使用统计数据结构和查询 3. 账户组件优化 - 优化 AccountStatsModal、AccountUsageCell 等组件 - 统一进度条和统计显示样式 4. 其他改进 - 完善中英文国际化 - 统一页面样式和交互体验 - 优化各视图页面的响应式布局 * fix(test): 修复 stubUsageLogRepo.ListWithFilters 测试 stub 测试用例 GET /api/v1/usage 返回 500 是因为 stub 方法未实现，现在正确返回基于 UserID 过滤的日志数据。 * feat(frontend): 统一日期时间显示格式主要改动: 1. 增强 utils/format.ts: - 新增 formatDateOnly() - 格式: YYYY-MM-DD - 新增 formatDateTime() - 格式: YYYY-MM-DD HH:mm:ss 2. 全局替换视图中的格式化函数: - 移除各视图中的自定义 formatDate 函数 - 统一导入使用 @/utils/format 中的函数 - created_at/updated_at 使用 formatDateTime - expires_at 使用 formatDateOnly 3. 受影响的视图 (8个): - frontend/src/views/user/KeysView.vue - frontend/src/views/user/DashboardView.vue - frontend/src/views/user/UsageView.vue - frontend/src/views/user/RedeemView.vue - frontend/src/views/admin/UsersView.vue - frontend/src/views/admin/UsageView.vue - frontend/src/views/admin/RedeemView.vue - frontend/src/views/admin/SubscriptionsView.vue 效果: - 日期统一显示为 YYYY-MM-DD - 时间统一显示为 YYYY-MM-DD HH:mm:ss - 提升可维护性，避免格式不一致 * fix(frontend): 补充遗漏的时间格式化统一补充修复（基于 code review 发现的遗漏）: 1. 增强 utils/format.ts: - 新增 formatTime() - 格式: HH:mm 2. 修复 4 个遗漏的文件: - src/views/admin/UsersView.vue * 删除 formatExpiresAt()，改用 formatDateTime() * 修复订阅过期时间 tooltip 显示格式不一致问题 - src/views/user/ProfileView.vue * 删除 formatMemberSince()，改用 formatDate(date, 'YYYY-MM') * 统一会员起始时间显示格式 - src/views/user/SubscriptionsView.vue * 修改 formatExpirationDate() 使用 formatDateOnly() * 保留天数计算逻辑 - src/components/account/AccountStatusIndicator.vue * 删除本地 formatTime()，改用 utils/format 中的统一函数 * 修复 rate limit 和 overload 重置时间显示验证: - TypeScript 类型检查通过 ✓ - 前端构建成功 ✓ - 所有剩余的 toLocaleString() 都是数字格式化，属于正确用法 ✓ 效果: - 订阅过期时间统一为 YYYY-MM-DD HH:mm:ss - 会员起始时间统一为 YYYY-MM - 重置时间统一为 HH:mm - 消除所有不规范的原生 locale 方法调用	2025-12-27 10:50:25 +08:00
IanShaw	cf8a64528c	fix: 修复 Gemini API 认证和 /responses 端点路由问题 (#45 ) * fix(middleware): 修复 Gemini API Key 认证中间件用户上下文类型错误修复了 ApiKeyAuthWithSubscriptionGoogle 中间件中设置用户上下文时的类型错误。问题: - 中间件直接设置 `apiKey.User` 对象到上下文 - 导致 handler 中获取 `AuthSubject` 时类型断言失败 - 所有 Gemini v1beta 端点返回 500 "User context not found" 修复: - 改为设置 `AuthSubject` 结构体,与 `api_key_auth.go` 保持一致 - 添加 `ContextKeyUserRole` 设置以完整支持角色检查影响范围: - Gemini v1beta API 端点 (generateContent, streamGenerateContent) - 使用 Google API Key 认证的所有请求测试: - 验证 Gemini CLI 调用成功返回 200 - 确认用户上下文正确传递到 handler * fix(web): 修复 /responses 端点被前端中间件拦截的问题 - 将 /responses 路径添加到 API 白名单，防止其被当作前端路由处理 - 修复 /responses 端点返回 HTML 而非 API 响应的 BUG - 解决 codex CLI stream 在远程服务器上断开连接的问题根本原因: 在 `6c469b4` 提交中添加了 /responses 路由，但未同步更新前端嵌入中间件的 API 白名单，导致该路由被拦截并返回 index.html 而非 API 响应。	2025-12-27 10:50:15 +08:00