chore(release): v3.3.0

### 🛠 修复
- 修复了 WAF 站点为空绑定规则时请求异常的问题，规范空站点绑定为数组并兼容历史 JSON 空值，避免请求时 Lua 处理失败。
- 修复了 WAF PoW 验证在部分场景下的异常。
- 修复了 Pages 部署文件列表请求与后端路由不一致的问题，并补充回归测试。
- 默认关闭 Redis maintenance notification 自动协商，并应用到平台与 Asynq 客户端，减少在不支持的 Redis 服务上的兼容性警告。
- 修复了 WAF 规则编辑器画布状态不稳定的问题：改用 React Flow 受控节点状态，支持删除节点与连线，节点属性仅在选中后展示。

### ⚡️ 优化与改进
- 新增 WAF 可组合规则可视化编排能力，提供基于 React Flow 的规则编辑器、有序图形 API 与运行时 DAG 执行；规则仅在 OpenResty reload 时发布，并通过校验和驱动的 IP 组快照在受界共享内存中协调。
- 完善 WAF 地域匹配数据，使用完整国家与一级行政区数据，国家选项同时显示中文名称与 ISO 代码，行政区支持按名称或代码搜索。
- Agent 现内置国家与城市地址库，首次启动无需下载即可使用地区匹配，并会在后续自动更新数据。
- 优化了 SQL 日志输出：常规查询日志下调至 debug 级别，慢查询与错误日志不再输出 SQL 文本，避免敏感参数在生产日志中暴露。

### 💄 其他/体验
- 优化了 WAF 规则编辑器初始视图，缩小编排区高度与首次适配缩放比例，默认显示更多画布上下文。
- 服务启动监听就绪后再打印服务横幅，避免在监听失败时显示误导性信息。
- 改进了日志打印输出。

.env.example

@@ -1,7 +1,8 @@
 # ──────────────────────────────────────────────────────────────────────────────
 # openflare — 环境变量配置模板
 # 复制此文件为 .env 并填入实际值:  cp .env.example .env
-# 环境变量优先级高于 config.yaml / config.docker.yaml
+# 环境变量优先级高于 config.yaml
+# docker compose 会读取本文件（env_file: .env）并替换 compose 中的 ${VAR}
 # ──────────────────────────────────────────────────────────────────────────────
 
 # ─── 时区 ─────────────────────────────────────────────────────────────────────
@@ -22,15 +23,16 @@ APP_SESSION_HTTP_ONLY=true
 # HTTPS 部署时设为 true，HTTP 环境必须为 false
 APP_SESSION_SECURE=true
 
-# ─── 数据库 ────────────────────────────────────────────────────────────────────
+# ─── 数据库（PostgreSQL）──────────────────────────────────────────────────────
 # 设置 DB_HOST 后自动启用 PostgreSQL，也可通过 DB_ENABLED 显式控制
 # DB_ENABLED=false 时使用 SQLite 作为后备数据库
 DB_ENABLED=true
 # SQLITE_PATH=./data/openflare.db
+# compose 内应用连服务名；本机直连 Docker 映射端口时用 127.0.0.1
 DB_HOST=postgres
 DB_PORT=5432
-DB_USERNAME=postgres
-DB_PASSWORD=postgres
+DB_USERNAME=openflare
+DB_PASSWORD=replace-with-strong-password
 DB_NAME=openflare
 DB_SSL_MODE=disable
 DB_TIMEZONE=Asia/Shanghai
@@ -38,7 +40,7 @@ DB_TIMEZONE=Asia/Shanghai
 # DB_MAX_IDLE_CONN=16
 # DB_MAX_OPEN_CONN=128
 
-# ─── Redis ─────────────────────────────────────────────────────────────────────
+# ─── Redis / Valkey ────────────────────────────────────────────────────────────
 # 设置 REDIS_ADDR 后自动启用，也可通过 REDIS_ENABLED 显式控制
 REDIS_ENABLED=true
 REDIS_ADDR=redis:6379
@@ -47,13 +49,22 @@ REDIS_ADDR=redis:6379
 # REDIS_DB=0
 REDIS_KEY_PREFIX=openflare:
 # REDIS_POOL_SIZE=100
+# 启动时开关；修改后需重启服务
+REDIS_MAINT_NOTIFICATIONS=false
+# compose 宿主机映射端口（仅 docker-compose 使用）
+# REDIS_PORT=6379
 
-# ─── ClickHouse（必需）────────────────────────────────────────────────────
+# ─── ClickHouse（必需）────────────────────────────────────────────────────────
+# CLICKHOUSE_HOST 设置后会自动启用；测试环境可显式 CLICKHOUSE_ENABLED=true 做 live 联调
+CLICKHOUSE_ENABLED=true
+# compose 内：clickhouse:9000；本机连映射端口：127.0.0.1:9000
 CLICKHOUSE_HOST=clickhouse:9000
 CLICKHOUSE_USERNAME=default
-CLICKHOUSE_PASSWORD=123456
+# 须与 compose clickhouse 服务密码一致（首次初始化后改密码需清 data/clickhouse_data）
+CLICKHOUSE_PASSWORD=replace-with-clickhouse-password
 CLICKHOUSE_NAME=openflare
 
+
 # ─── 日志 ──────────────────────────────────────────────────────────────────────
 LOG_LEVEL=info
 LOG_FORMAT=console
@@ -67,6 +78,11 @@ OTEL_EXPORTER_OTLP_INSECURE=true
 OTEL_SAMPLING_RATE=0.0
 # 全局 Tracer 命名空间，默认为 github.com/Rain-kl/OpenFlare
 # OTEL_TRACER_NAME=github.com/Rain-kl/OpenFlare
+# compose 可选端口覆盖
+# JAEGER_VERSION=2.19.0
+# JAEGER_UI_PORT=16686
+# JAEGER_OTLP_GRPC_PORT=4317
+# JAEGER_OTLP_HTTP_PORT=4318
 
 # ─── Worker ────────────────────────────────────────────────────────────────────
 # WORKER_CONCURRENCY=20

.gitignore

@@ -77,4 +77,8 @@ profile.cov
 .grok
 /.gomodcache/
 *.mmdb
-!internal/apps/agent/geoipdata/GeoLite2-Country.mmdb
+!internal/apps/agent/geoipdata/GeoLite2-Country.mmdb
+!internal/apps/agent/geoipdata/GeoLite2-City.mmdb
+
+/.superpowers/
+/.worktrees/

AGENTS.md

@@ -56,6 +56,7 @@
 - 所有 HTTP 路由仅在 `internal/router/router.go` 中注册。
 - 当 API Handler 发生变化时，更新 Swagger 文档（运行 `make swagger`）。
 - 在完成代码开发后必须运行 `make code-check`, 并修复报错。
+- 在完成代码开发后或者 git 提交前必须运行 `make prettier` 格式化代码。
 - 需要缓存或文件管理能力时，必须复用现有平台实现，禁止在业务包中自行创建缓存目录、直接管理缓存文件或重复封装存储后端。
 - 文件摄取必须通过 `upload.Ingest`（`upload.PolicyCreate` / `PolicyDedupNewRecord` / `PolicyResolveExisting`）；删除必须通过 `upload.Remove` 或 `upload.RemoveOwned`。禁止业务模块直接调用 `repository.CreateUpload` / `repository.SoftDeleteUpload`，禁止 `db.Create(&model.Upload{})` 旁路写 `w_uploads`。
 - 禁止在 `init()` 中注册跨模块集成（任务 Handler、推送内置事件、域事件监听器、任务完成钩子）。统一通过 `internal/bootstrap` 在 `internal/cmd` 入口显式装配。
@@ -70,9 +71,16 @@
 3. **开发计划与交接**：
     * 正在进行的开发计划或 AI 接手交接发生变化时，在 `docs/plan/` 下更新对应的开发计划或接手文档，并使用相应模板初始化。
 4. **文档与变更日志**：
-    * 当相关内容发生变化时，同步更新对应的**中文文档**（不要同步英文文档）。
-    * 代码或配置变更完成后，必须在 [`docs/changelog/index.md`](./docs/changelog/index.md) 的 `[Unreleased]` 区块补充对应变更条目。
-    * **纯文档变更（如 `docs/` 下的 Markdown 文档、README 等）不需要写入 changelog。**
+	* 当相关内容发生变化时，同步更新对应的**中文文档**（不要同步英文文档）。
+	* 代码或配置变更完成后，必须在 [`docs/changelog/index.md`](./docs/changelog/index.md) 的 `[Unreleased]` 区块补充对应变更条目。
+	* **纯文档变更（如 `docs/` 下的 Markdown 文档、README 等）不需要写入 changelog。**
+	* 更新 changelog 时遵循以下书写规则：
+	  1. 合并重复或相近的变更，不按提交逐条罗列。
+	  2. 不记录格式化、临时调试、无关重构等对用户无意义的变更。
+	  3. 使用用户可理解的表述，不描述内部实现细节。
+	  4. 每条均使用完整中文句子，并尽量说明修复或优化的内容及其带来的效果。
+	  5. 仅基于实际变更撰写，不编造提交或代码中不存在的信息。
+	  6. 不记录 Token、密钥、私有地址等敏感信息；没有内容的分类可以省略。
 
 ## 项目介绍
 
@@ -354,4 +362,3 @@ frontend/lib/services/<service-name>/
 - 服务类继承 `BaseService`，定义 `basePath`，并暴露有类型的静态方法。
 - **防止回调 `this` 上下文丢失（核心规范）**：在传递服务类的静态方法作为组件事件回调（如 `onClick`）或 React Query 的 `mutationFn`/`queryFn` 时，**禁止直接传递静态方法引用**（如 `mutationFn: DnsAccountService.create`），必须使用箭头函数包裹以防止 `this` 上下文丢失导致运行时崩溃（如 `mutationFn: (payload) => DnsAccountService.create(payload)`）。
 - 在 `frontend/lib/services/index.ts` 中注册新服务。
-

Makefile

@@ -1,4 +1,4 @@
-.PHONY: swagger license license-check build-embedded build-test cross-build code-check build-backend build-frontend build-agent build-relay build-flared build-all
+.PHONY: swagger license license-check prettier build-embedded build-test cross-build code-check build-backend build-frontend build-agent build-relay build-flared build-all
 
 VERSION ?= dev
 BUILD_DATE ?= $(shell date -u +'%Y-%m-%dT%H:%M:%SZ')
@@ -13,6 +13,12 @@ license:
 license-check:
 	scripts/update_go_license.sh --check
 
+prettier:
+	@echo "==> Formatting backend Go source..."
+	gofmt -w $$(find . -type f -name '*.go' -not -path './.git/*' -not -path './frontend/*')
+	@echo "==> Formatting frontend source..."
+	cd frontend && pnpm format
+
 build-embedded:
 	@echo "==> Building embedded frontend version=$(VERSION) build_date=$(BUILD_DATE)..."
 	cd frontend && \

README.en.md

@@ -56,7 +56,7 @@ Quick links:
 ```yaml
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     restart: unless-stopped
     env_file: .env
     environment:
@@ -64,7 +64,7 @@ services:
     ports:
       - "3000:3000"
     volumes:
-      - ./uploads:/app/uploads
+      - openflare_uploads:/app/uploads
     depends_on:
       postgres:
         condition: service_healthy
@@ -77,13 +77,13 @@ services:
     image: postgres:17-alpine
     restart: unless-stopped
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
-      - ./data/postgres_data:/var/lib/postgresql/data
+      - openflare_postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -93,7 +93,7 @@ services:
     restart: unless-stopped
     command: ["valkey-server", "--appendonly", "yes"]
     volumes:
-      - ./data/valkey:/data
+      - openflare_redis_data:/data
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 10s
@@ -105,19 +105,25 @@ services:
     image: clickhouse/clickhouse-server:25.3-alpine
     restart: unless-stopped
     environment:
-      CLICKHOUSE_DB: openflare
-      CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: 123456
+      CLICKHOUSE_DB: ${CLICKHOUSE_NAME:-openflare}
+      CLICKHOUSE_USER: ${CLICKHOUSE_USERNAME:-default}
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: ${TZ:-Asia/Shanghai}
     volumes:
-      - ./data/clickhouse_data:/var/lib/clickhouse
+      - openflare_clickhouse_data:/var/lib/clickhouse
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "${CLICKHOUSE_USERNAME:-default}", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
       start_period: 15s
+
+volumes:
+    openflare_uploads:
+    openflare_postgres_data:
+    openflare_redis_data:
+    openflare_clickhouse_data:
 ```
 
 ```bash

README.md

@@ -48,16 +48,41 @@ OpenFlare 是开源 CDN 编排与边缘安全平台。它支持反向代理、
 * **SSO 单点登录**：支持 GitHub OAuth 与标准 OIDC 协议，无缝接入企业身份提供商实现统一登录。
 * **统一观测**：聚合节点请求指标、实时访问日志明细、宿主机与 Nginx 资源快照、健康事件以及网络波动补传缓冲。
 
+## 界面预览
+
+### 仪表盘总览
+
+![OpenFlare dashboard overview](./docs/assets/readme/dashboard-overview.png)
+
+### 节点详情
+
+![OpenFlare node detail](./docs/assets/readme/node-detail.png)
+
+### 配置新增
+
+![OpenFlare version release](./docs/assets/readme/proxy-route-detail.png)
+
 ## 快速开始
 
 ### 1. 启动 Server
 
 使用 docker-compose
 
+```bash
+# 下载环境变量模板并创建 .env 文件
+curl -o .env.example https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/.env.example
+cp .env.example .env
+
+# ClickHouse 服务端：curl performance.xml 到 ./config/clickhouse，并以单文件方式挂载到 config.d
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
+```
+
 ```yaml
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     restart: unless-stopped
     env_file: .env
     environment:
@@ -65,7 +90,7 @@ services:
     ports:
       - "3000:3000"
     volumes:
-      - ./uploads:/app/uploads
+      - openflare_uploads:/app/uploads
     depends_on:
       postgres:
         condition: service_healthy
@@ -78,13 +103,13 @@ services:
     image: postgres:17-alpine
     restart: unless-stopped
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
-      - ./data/postgres_data:/var/lib/postgresql/data
+      - openflare_postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -94,7 +119,7 @@ services:
     restart: unless-stopped
     command: ["valkey-server", "--appendonly", "yes"]
     volumes:
-      - ./data/valkey:/data
+      - openflare_redis_data:/data
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 10s
@@ -106,19 +131,30 @@ services:
     image: clickhouse/clickhouse-server:25.3-alpine
     restart: unless-stopped
     environment:
-      CLICKHOUSE_DB: openflare
-      CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: 123456
+      CLICKHOUSE_DB: ${CLICKHOUSE_NAME:-openflare}
+      CLICKHOUSE_USER: ${CLICKHOUSE_USERNAME:-default}
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: ${TZ:-Asia/Shanghai}
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     volumes:
-      - ./data/clickhouse_data:/var/lib/clickhouse
+      - openflare_clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "${CLICKHOUSE_USERNAME:-default}", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
       start_period: 15s
+
+volumes:
+    openflare_uploads:
+    openflare_postgres_data:
+    openflare_redis_data:
+    openflare_clickhouse_data:
 ```
 
 详细部署说明见 [部署文档](https://open-flare.pages.dev/deployment/deployment)。
@@ -150,20 +186,6 @@ docker run -d --name openflare-agent --restart unless-stopped \
   ghcr.io/rain-kl/openflare-agent:latest
 ```
 
-## 界面预览
-
-### 仪表盘总览
-
-![OpenFlare dashboard overview](./docs/assets/readme/dashboard-overview.png)
-
-### 节点详情
-
-![OpenFlare node detail](./docs/assets/readme/node-detail.png)
-
-### 配置新增
-
-![OpenFlare version release](./docs/assets/readme/proxy-route-detail.png)
-
 ## 开源协议
 
 本项目采用 [Apache License 2.0](./LICENSE) 开源。

cmd/agent/main.go

@@ -66,6 +66,7 @@ func main() {
 		"lua_dir", cfg.LuaDir,
 		"runtime_config_dir", cfg.RuntimeConfigDir,
 		"mmdb_path", cfg.MMDBPath,
+		"city_mmdb_path", cfg.CityMMDBPath,
 	)
 
 	client := httpclient.New(cfg.ServerURL, cfg.InitialAuthToken(), cfg.RequestTimeout.Duration())
@@ -81,6 +82,8 @@ func main() {
 		LuaDir:                       cfg.LuaDir,
 		NginxLuaDir:                  cfg.OpenrestyLuaDir,
 		RuntimeConfigDir:             cfg.RuntimeConfigDir,
+		MMDBPath:                     cfg.MMDBPath,
+		CityMMDBPath:                 cfg.CityMMDBPath,
 		PagesDir:                     cfg.PagesDir,
 		OpenrestyObservabilityListen: nginx.ObservabilityListenAddress(cfg.OpenrestyObservabilityPort),
 		OpenrestyObservabilityPort:   cfg.OpenrestyObservabilityPort,
@@ -122,10 +125,9 @@ func main() {
 	}
 
 	ctx, stop := signal.NotifyContext(context.Background(), syscall.SIGINT, syscall.SIGTERM)
-	geoIPUpdater := &geoipupdate.Updater{
-		MMDBPath:       cfg.MMDBPath,
-		DownloadURL:    cfg.MMDBDownloadURL,
-		UpdateInterval: cfg.MMDBUpdateInterval.Duration(),
+	geoIPUpdater := newGeoIPUpdater(cfg)
+	if err = geoIPUpdater.EnsureInitialDatabases(ctx); err != nil {
+		slog.Warn("failed to prepare GeoIP databases before agent startup", "error", err)
 	}
 	go geoIPUpdater.Run(ctx)
 	slog.Info("agent process started")
@@ -138,3 +140,13 @@ func main() {
 	stop()
 	slog.Info("agent process stopped")
 }
+
+func newGeoIPUpdater(cfg *config.Config) *geoipupdate.Updater {
+	return &geoipupdate.Updater{
+		MMDBPath:        cfg.MMDBPath,
+		DownloadURL:     cfg.MMDBDownloadURL,
+		CityMMDBPath:    cfg.CityMMDBPath,
+		CityDownloadURL: cfg.CityMMDBDownloadURL,
+		UpdateInterval:  cfg.MMDBUpdateInterval.Duration(),
+	}
+}

cmd/agent/main_test.go

@@ -0,0 +1,24 @@
+package main
+
+import (
+	"testing"
+	"time"
+
+	"github.com/Rain-kl/Wavelet/internal/apps/agent/config"
+)
+
+func TestNewGeoIPUpdaterWiresCountryAndCity(t *testing.T) {
+	cfg := &config.Config{
+		MMDBPath:            "/data/GeoLite2-Country.mmdb",
+		MMDBDownloadURL:     "https://geo.example/GeoLite2-Country.mmdb",
+		CityMMDBPath:        "/data/GeoLite2-City.mmdb",
+		CityMMDBDownloadURL: "https://geo.example/GeoLite2-City.mmdb",
+		MMDBUpdateInterval:  config.MillisecondDuration(time.Hour),
+	}
+	updater := newGeoIPUpdater(cfg)
+	if updater.MMDBPath != cfg.MMDBPath || updater.DownloadURL != cfg.MMDBDownloadURL ||
+		updater.CityMMDBPath != cfg.CityMMDBPath || updater.CityDownloadURL != cfg.CityMMDBDownloadURL ||
+		updater.UpdateInterval != time.Hour {
+		t.Fatalf("GeoIP updater wiring incomplete: %#v", updater)
+	}
+}

config.example.yaml

@@ -31,7 +31,7 @@ database:
   max_open_conn: 128
   conn_max_lifetime: 1800
   conn_max_idle_time: 600
-  log_level: "info"            # error | warn | info | debug | silent
+  log_level: "info"            # error | warn | info | debug | silent；SQL 语句仅在 log.level=debug 时输出
   ssl_mode: "disable"
   time_zone: "UTC"
   application_name: "openflare-server"
@@ -67,6 +67,7 @@ redis:
   max_retries: 3
   pool_timeout: 4
   conn_max_idle_time: 300
+  maint_notifications: false # 启动时开关；启用 Redis maintenance notifications 自动协商，修改后需重启
 
 # ─── Logging ────────────────────────────────────────────────────────────────────
 log:
@@ -99,15 +100,18 @@ otel:
 
 
 # ─── ClickHouse (required) ──────────────────────────────────────────────────────
+# Analytics / observability OLAP store. Telemetry writes are best-effort (async batch).
 clickhouse:
   enabled: true
   hosts:
-    - "127.0.0.1:9000"
+    - "127.0.0.1:9000"        # compose 内应用可用 clickhouse:9000（经 CLICKHOUSE_HOST）
   username: "default"
-  password: "123456"
+  password: "replace-with-clickhouse-password"  # 与 .env / compose CLICKHOUSE_PASSWORD 一致
   database: "openflare"
-  max_idle_conn: 10
-  max_open_conn: 100
+  max_idle_conn: 8            # keep warm sockets low to save client + server RAM
+  max_open_conn: 16           # cap concurrent native sessions on modest CH boxes
   conn_max_lifetime: 3600
   dial_timeout: 5
-  block_buffer_size: 10
+  block_buffer_size: 32       # rows buffered per block; 32 is enough for our batch sizes
+  # Runtime client also enables async_insert (wait_for_async_insert=1, busy_timeout≈2s)
+  # in internal/db/clickhouse.go — not configured via YAML.

config/clickhouse/performance.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+  Tuned for small control-plane hosts (e.g. 3c6g).
+
+  background_pool_size * background_merges_mutations_concurrency_ratio must stay
+  greater than merge_tree number_of_free_entries_in_pool_to_execute_mutation
+  (ClickHouse 25.x refuses to start otherwise). Keep the merge free-entry
+  thresholds low so a small pool remains valid.
+-->
+<clickhouse>
+    <max_concurrent_queries>20</max_concurrent_queries>
+    <background_pool_size>4</background_pool_size>
+    <background_merges_mutations_concurrency_ratio>2</background_merges_mutations_concurrency_ratio>
+    <background_schedule_pool_size>4</background_schedule_pool_size>
+    <background_common_pool_size>2</background_common_pool_size>
+    <background_fetches_pool_size>2</background_fetches_pool_size>
+    <background_move_pool_size>1</background_move_pool_size>
+    <mark_cache_size>268435456</mark_cache_size>
+    <uncompressed_cache_size>0</uncompressed_cache_size>
+    <merge_tree>
+        <number_of_free_entries_in_pool_to_execute_mutation>2</number_of_free_entries_in_pool_to_execute_mutation>
+        <number_of_free_entries_in_pool_to_lower_max_size_of_merge>2</number_of_free_entries_in_pool_to_lower_max_size_of_merge>
+        <number_of_free_entries_in_pool_to_execute_optimize_entire_partition>2</number_of_free_entries_in_pool_to_execute_optimize_entire_partition>
+    </merge_tree>
+</clickhouse>

docker-compose.yaml

@@ -5,7 +5,7 @@ services:
       dockerfile: docker/Dockerfile
       args:
         VERSION: v0.9.9
-#    image: ghcr.io/rain-kl/openflare-server:latest
+#    image: ghcr.io/rain-kl/openflare:latest
     restart: unless-stopped
     env_file: .env
     environment:
@@ -34,13 +34,13 @@ services:
     ports:
       - "5432:5432"
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
       - ./data/postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -74,18 +74,23 @@ services:
     image: clickhouse/clickhouse-server:25.3-alpine
     restart: unless-stopped
     environment:
-      CLICKHOUSE_DB: openflare
-      CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: 123456
+      CLICKHOUSE_DB: ${CLICKHOUSE_NAME:-openflare}
+      CLICKHOUSE_USER: ${CLICKHOUSE_USERNAME:-default}
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: ${TZ:-Asia/Shanghai}
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     ports:
-      - "${CLICKHOUSE_HTTP_PORT:-8123}:8123"
-      - "${CLICKHOUSE_NATIVE_PORT:-9000}:9000"
+      - "8123:8123"
+      - "9000:9000"
     volumes:
       - ./data/clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "${CLICKHOUSE_USERNAME:-default}", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -105,7 +110,7 @@ services:
       - ./data/agent/:/data
     environment:
       OPENFLARE_SERVER_URL: "http://host.docker.internal:3000"
-      OPENFLARE_AGENT_TOKEN: "3f7b66c9329a0cf253e71a86681223aa"
+      OPENFLARE_AGENT_TOKEN: "af2fb112f36a0055ec25dd164c908fea"
       LOG_LEVEL: "debug"
     extra_hosts:
       - "host.docker.internal:host-gateway"

docs/changelog/index.md

@@ -11,6 +11,9 @@ sidebar: false
 ## 重大变更
 
 > [!IMPORTANT]
+> 
+> 3.1.2 版本更新了 CLickHouse 部署配置。
+> 
 > 3.0.0 版本为 Wavelet 平台迁移与架构重构版本，涉及数据库表结构、环境变量以及前后端底层架构的重大变更。请务必在升级前备份数据库，并且更新到 V2.3.4。
 > 目前已知的兼容性问题：
 > - Pages 无法迁移, 升级前请先手动下载并备份 Pages 静态站点的 ZIP 包，升级后重新创建。
@@ -18,27 +21,94 @@ sidebar: false
 
 ## [unreleased]
 
+## [v3.3.0] - 2026-07-14
+
+### 新增
+
+- WAF 规则现支持可视化编排、版本冲突保护和按顺序绑定路由，便于创建和维护复杂的防护策略。
+- WAF IP 组现支持按城市匹配来源地址，帮助更精细地控制访问范围。
+
+### 变更
+
+- 优化了 WAF 规则编辑器的初始视图和操作方式，编辑规则时可看到更多上下文并可直接管理节点、连线和启用状态。
+- WAF 地域匹配编辑器改用完整国家与一级行政区数据，国家选项同时显示中文名称和 ISO 代码，行政区支持按名称或代码搜索。
+- Agent 现内置国家和城市地址库，首次启动无需下载即可使用地区匹配功能，并会在后续自动更新数据。
+- 默认关闭 Redis maintenance notifications 自动协商，减少不支持该功能的 Redis 服务产生兼容性警告。
+
+### 移除
+
+- 移除了 WAF 旧版固定名单与人机验证配置；升级后请在发布前使用新的可视化规则重新编排防护策略。
+
+
+## [v3.2.0] - 2026-07-12
+
+### 新增
+
+- 新增网站和域名管理能力，并提供 24 小时、7 天和 30 天的流量概览，便于集中查看访问趋势和已提供的数据量。
+
+### 变更
+
+- 网站管理入口调整为网站详情中的概览、域名、路由、证书和设置页面，域名与证书的关联方式更加统一。
+- 配置发布、边缘代理和监控现统一从网站域名读取域名与证书，减少配置不一致导致的运行问题。
+- 自动清理说明明确了分析数据的最短保留期限，便于管理员预期数据保存时间。
+
+### 移除
+
+- 移除了旧版托管域名管理入口，请改用网站及网站域名管理功能。
+- 移除了网站、域名、路由和 WAF 相关对象的备注字段；证书和源站备注仍可继续使用。
+
+### 修复
+
+- 修复了网站概览中已提供的数据量无法统计的问题，使流量数据更加准确。
+- 修复了嵌入式前端打开网站详情时可能错误跳回首页的问题。
+- 修复了 Docker 部署中 ClickHouse 可能无法从宿主机访问的问题。
+
+## [v3.1.2] - 2026-07-10
+
+### 修复
+
+- 修复了节点和仪表盘在 24 小时范围内容量、网络与磁盘趋势数据不完整的问题。
+- 优化了 ClickHouse 的写入、查询和后台处理方式，降低节点空闲时的资源占用并提升高负载下的稳定性。
+- 修复了数据保留清理和写入失败重试的统计问题，使清理结果和运行状态更可信。
+- 改进了小规格环境下的 ClickHouse 部署配置，减少启动和连接争用问题。
+
+## [v3.1.1] - 2026-07-06
+
+### 修改
+
+- 默认关闭登录页面的人机验证，减少普通登录流程的额外操作；管理员仍可按需启用。
+
+## [v3.1.0] - 2026-07-04
+
+### 变更
+
+- 优化了分析数据的写入、查询、缓存和自动过期策略，降低高频心跳和访问日志对系统资源的影响。
+- 调整了 ClickHouse 的连接、批处理和 Docker 部署配置，提升小规格环境下的运行稳定性。
+- 收紧了审计访问日志的请求头记录范围并进行脱敏，减少敏感数据暴露风险。
+- 更新了管理后台的文档入口和全局搜索范围，使常用功能更容易查找。
+
+### 修复
+
+- 修复了数据库迁移、系统自更新和设置页跳转可能失败的问题。
+
 ## [v3.0.2] - 2026-06-30
 
 ### 修复
 
-- 修复 PostgreSQL 自增主键序列在历史数据迁移（INSERT 指定显式 ID）后与实际数据不同步的问题，通过新增全局序列同步脚本一键重置所有相关表的自增计数器。
+- 修复了历史数据迁移后 PostgreSQL 自增编号可能与现有数据冲突的问题，避免后续创建记录失败。
 
 ## [v3.0.1] - 2026-06-30
 
 ### 新增
 
-- 新增管理后台用户个人信息编辑与重置密码功能。
-- 新增用户列表邮箱列展示以及基于邮箱的搜索过滤。
-- 后端新增 `reset-passwd` 命令行工具，支持通过命令行直接重置用户密码。
+- 新增用户资料编辑、密码重置和按邮箱搜索功能，便于管理员维护用户账号。
+- 新增命令行密码重置工具，方便无法登录管理后台时恢复账号访问。
 
 ### 修复
 
-- 修复添加 DNS 账号时因直接传递 class static 方法作为 React Query 的 mutationFn 导致 JavaScript 丢失 `this` 上下文报错 `this.post is not a function` 的问题。
-- 修复侧边栏一级菜单项当前页面字体颜色被硬编码为 `#6366F1` 的问题，改用 CSS 主题变量 `text-sidebar-primary`，以保证在多主题系统下的色彩一致性。
-- 修复默认（Default）主题因遗漏声明 `destructive-foreground` 变量，导致删除按钮（如确认删除证书弹窗）在某些状态下渲染为黑底黑字而无法阅读的问题。
-- 修复 Cobra 命令行初始化注册逻辑，确保所有应用运行模式（All, API, Worker, Scheduler）都正确注册为 Cobra 子命令。
-- 优化系统设置页面的色彩定义，移除硬编码的 Indigo 靛蓝色以适配多主题切换。
+- 修复了创建 DNS 账号可能失败的问题。
+- 修复了主题切换后侧边栏和危险操作按钮颜色异常的问题，提升界面可读性。
+- 修复了部分服务运行模式无法正确启动的问题。
 
 ## [v3.0.0] - 2026-06-27
 
@@ -50,10 +120,11 @@ sidebar: false
 
 ### 重大重构说明
 
-本项目近期完成了**前后端底层架构的重大迁移与重构**，将原有的独立控制端重构为基于 **Wavelet 统一开发框架** 的全新架构：
-- **后端重构**：全面接入 Wavelet 服务平台，收敛并复用了标准的用户管理、安全验证（PoW/邮件验证）、RAM L1 缓存以及 Redis 订阅发布同步机制。配置体系从原 `of_options` 物理表完全迁移合并至标准系统配置框架 `w_system_configs`（类型归为 `business` 业务级配置），废弃原进程级 `OptionMap` 热重载。
-- **前端重构**：管理后台前端使用 Next.js App Router、TypeScript 与 Tailwind CSS（基于 shadcn/ui 组件库与 Wavelet 设计风格）进行了完全重写，提供了更具呼吸感和一致性的用户界面，优化了配置版本预览与发布体验。
-- **架构解耦**：将原有“站点 (Site)”配置体系拆分为 **「网站管理 -> 域名列表」**（处理域名与证书绑定）与 **「规则管理」**（处理反向代理、静态托管、WAF 和缓存等路由匹配规则）两个维度，极大地提升了复杂拓扑配置的灵活性。内网穿透隧道也统一作为 `tunnel_client` 类型节点整合进了 **「节点管理」** 中。
+本版本完成了控制面的重大升级：
+
+- 管理后台重构为统一的用户、登录验证和系统设置体验，配置管理更加集中。
+- 网站管理拆分为域名、路由、静态托管、WAF 和缓存等独立能力，更适合维护复杂站点配置。
+- Tunnel 节点统一纳入节点管理，配置发布和运行状态查看更加一致。
 
 
 ## [v2.3.4] - 2026-06-17

docs/config.ts

@@ -73,6 +73,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         { text: '概览', link: '' },
         { text: '快速开始', link: 'quick-start' },
         { text: 'TLS 证书与自动续期', link: 'certificates' },
+        { text: 'Zone 域名迁移', link: 'zone-domain-migration' },
         { text: '新建反代配置', link: 'proxy-config' },
         { text: 'Pages 静态托管使用', link: 'pages-usage' },
         { text: '内网穿透与隧道使用', link: 'tunnel-usage' },
@@ -125,9 +126,11 @@ function sidebarDesign(): DefaultTheme.SidebarItem[] {
       items: [
         { text: '产品边界', link: '' },
         { text: '系统架构', link: 'architecture' },
+        { text: 'Zone 与域名资源设计', link: 'zone-design' },
         { text: 'Agent 与发布模型', link: 'agent-design' },
         { text: '内网穿透隧道设计', link: 'tunnel-design' },
         { text: 'WAF 设计', link: 'waf-design' },
+        { text: 'WAF 可编排规则设计', link: 'waf-orchestration-design' },
         { text: 'Pages 静态托管设计', link: 'pages-design' },
         { text: 'Uptime Kuma 监控同步设计', link: 'kuma-design' },
         { text: '登录验证码设计', link: 'login-captcha' }
@@ -135,4 +138,3 @@ function sidebarDesign(): DefaultTheme.SidebarItem[] {
     }
   ]
 }
-

docs/deployment/deployment.md

@@ -81,6 +81,7 @@ Agent：
 仓库根目录已提供完整 `docker-compose.yaml`（含 PostgreSQL、Redis、ClickHouse、Jaeger）。
 
 ```bash
+curl -o .env.example https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/.env.example
 cp .env.example .env
 # 编辑 .env，至少修改 APP_SESSION_SECRET 与数据库密码
 docker compose up -d

docs/deployment/server.md

@@ -8,6 +8,29 @@ OpenFlare Server 是 Gin + GORM 单体控制面，负责管理端 UI、管理 AP
 > **关于外部依赖**：
 > OpenFlare 系统内建了对后台异步任务（Asynq 框架）及海量节点日志分析与度量指标（观测面板）的支持。因此，**无论采用何种部署模式，系统都必须依赖 Redis（或 Valkey）与 ClickHouse 的运行**。各个部署方案的主要差异在于主关系型数据库的选择（SQLite vs PostgreSQL）以及是否启用链路追踪服务（Jaeger）。
 
+> [!TIP]
+> **ClickHouse 服务端性能配置（推荐挂载）**  
+> 控制面常见为小规格主机（如 3c6g）。仓库提供的 `performance.xml` 会收紧后台 merge/mutation 线程池，避免默认配置在小机器上静置 CPU 偏高或 ClickHouse 25.x 启动校验失败。  
+> 将本地 `./config/clickhouse/performance.xml` 以单文件方式挂载到容器 `/etc/clickhouse-server/config.d/performance.xml`，以保留官方镜像内置的 Docker 网络监听配置。
+
+部署前将配置拉到本地：
+
+```bash
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
+```
+
+在 ClickHouse 服务的 `volumes` 中增加（与数据卷并列）：
+
+```yaml
+volumes:
+  - ./data/clickhouse_data:/var/lib/clickhouse   # 或 named volume
+  - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
+```
+
+修改 `performance.xml` 后需 `docker compose restart clickhouse` 才生效。
+
 ---
 
 ## 方式一：Docker 部署 (推荐)
@@ -27,7 +50,7 @@ version: '3.8'
 
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     container_name: openflare-server
     restart: unless-stopped
     ports:
@@ -71,10 +94,15 @@ services:
       CLICKHOUSE_PASSWORD: 123456
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: Asia/Shanghai
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     volumes:
       - ./data/clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "default", "--password", "123456", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -84,6 +112,9 @@ services:
 运行启动命令：
 
 ```bash
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
 docker compose up -d
 ```
 
@@ -100,7 +131,7 @@ docker compose up -d
 ```yaml
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     restart: unless-stopped
     env_file: .env
     environment:
@@ -108,7 +139,7 @@ services:
     ports:
       - "3000:3000"
     volumes:
-      - ./uploads:/app/uploads
+      - openflare_uploads:/app/uploads
     depends_on:
       postgres:
         condition: service_healthy
@@ -121,13 +152,13 @@ services:
     image: postgres:17-alpine
     restart: unless-stopped
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
-      - ./data/postgres_data:/var/lib/postgresql/data
+      - openflare_postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -137,7 +168,7 @@ services:
     restart: unless-stopped
     command: ["valkey-server", "--appendonly", "yes"]
     volumes:
-      - ./data/valkey:/data
+      - openflare_redis_data:/data
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 10s
@@ -149,24 +180,39 @@ services:
     image: clickhouse/clickhouse-server:25.3-alpine
     restart: unless-stopped
     environment:
-      CLICKHOUSE_DB: openflare
-      CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: replace-with-clickhouse-password
+      CLICKHOUSE_DB: ${CLICKHOUSE_NAME:-openflare}
+      CLICKHOUSE_USER: ${CLICKHOUSE_USERNAME:-default}
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: ${TZ:-Asia/Shanghai}
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     volumes:
-      - ./data/clickhouse_data:/var/lib/clickhouse
+      - openflare_clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "${CLICKHOUSE_USERNAME:-default}", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
       start_period: 15s
+
+volumes:
+    openflare_uploads:
+    openflare_postgres_data:
+    openflare_redis_data:
+    openflare_clickhouse_data:
 ```
 
 创建对应的 `.env` 文件来配置系统环境变量（可复制并修改根目录下的 `.env.example`）：
 
 ```bash
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
+curl -o .env.example https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/.env.example
 cp .env.example .env
 # 编辑 .env 文件，填入对应的数据库、Redis、ClickHouse 连接地址、密码与 APP_SESSION_SECRET
 
@@ -188,7 +234,7 @@ version: '3.8'
 
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     restart: unless-stopped
     env_file: .env
     environment:
@@ -199,7 +245,7 @@ services:
     ports:
       - "3000:3000"
     volumes:
-      - ./uploads:/app/uploads
+      - openflare_uploads:/app/uploads
     depends_on:
       postgres:
         condition: service_healthy
@@ -214,13 +260,13 @@ services:
     image: postgres:17-alpine
     restart: unless-stopped
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
-      - ./data/postgres_data:/var/lib/postgresql/data
+      - openflare_postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -230,7 +276,7 @@ services:
     restart: unless-stopped
     command: ["valkey-server", "--appendonly", "yes"]
     volumes:
-      - ./data/valkey:/data
+      - openflare_redis_data:/data
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 10s
@@ -252,24 +298,39 @@ services:
     image: clickhouse/clickhouse-server:25.3-alpine
     restart: unless-stopped
     environment:
-      CLICKHOUSE_DB: openflare
-      CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: replace-with-clickhouse-password
+      CLICKHOUSE_DB: ${CLICKHOUSE_NAME:-openflare}
+      CLICKHOUSE_USER: ${CLICKHOUSE_USERNAME:-default}
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: ${TZ:-Asia/Shanghai}
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     volumes:
-      - ./data/clickhouse_data:/var/lib/clickhouse
+      - openflare_clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "${CLICKHOUSE_USERNAME:-default}", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
       start_period: 15s
+
+volumes:
+  openflare_uploads:
+  openflare_postgres_data:
+  openflare_redis_data:
+  openflare_clickhouse_data:
 ```
 
 启动并验证：
 
 ```bash
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
+curl -o .env.example https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/.env.example
 cp .env.example .env
 # 编辑 .env 文件并确保设置好 APP_SESSION_SECRET 密码
 
@@ -290,7 +351,7 @@ docker compose up -d
 | Go | `1.25+` |
 | Node.js | `18+` |
 | pnpm | 推荐通过 `corepack enable` 使用项目声明的 pnpm |
-| 外部服务 | 必须在本地或远端运行 Redis (Valkey) 和 ClickHouse 实例 |
+| 外部服务 | 必须在本地或远端运行 Redis (Valkey) 和 ClickHouse 实例；ClickHouse 建议挂载仓库提供的 `performance.xml`（见上文「ClickHouse 服务端性能配置」） |
 
 ### 1. 构建管理端前端
 

docs/design/architecture.md

@@ -130,8 +130,10 @@ OpenResty (Agent, TLS/WAF)
 
 ### 3. WAF 安全过滤流
 * WAF 引擎嵌入在 OpenResty 请求生命周期中。
-* 过滤规则直接从 Agent 落地在节点本地的 `waf_config.json` 及 `waf_ip_groups.json` 读取，判决逻辑白名单优先、黑名单层层过滤，完全在本地内存中完成，不产生数据库或网络 I/O 损耗。
-* *IP组增量同步、自动 IP 组计算与拦截响应机制详见：[WAF 设计文档](./waf-design.md)*
+* WAF 规则由控制面以可视化 DAG 编排，发布时编译为运行态图；OpenResty reload 后由每个 Worker 加载一次，后续请求只遍历内存对象。
+* 全局规则固定前置，路由绑定规则按显式顺序执行；当前规则抵达“通过”后继续下一条，抵达“阻止”则立即返回该节点配置的拦截响应。
+* IP 组成员独立热更新：协调 Worker 每 5 秒检查一次 checksum，仅在变化时加载完整快照，各 Worker 的请求路径始终读取本地内存对象。
+* *IP 组来源与同步机制详见：[WAF 设计文档](./waf-design.md)；图模型、执行语义与发布约束详见：[WAF 可编排规则设计](./waf-orchestration-design.md)。*
 
 ---
 
@@ -139,7 +141,7 @@ OpenResty (Agent, TLS/WAF)
 
 当前系统核心实体包括：
 
-* **反代与配置**：`proxy_routes` (网站配置), `origins` (源站), `config_versions` (配置版本), `tls_certificates` (证书), `managed_domains` (托管域名).
+* **反代与配置**：`zones` (根域管理边界), `zone_domains` (明确域名与证书/路由关联), `proxy_routes` (路由策略), `origins` (源站), `config_versions` (配置版本), `tls_certificates` (证书). 详见 [Zone 与域名资源设计](./zone-design.md)。
 * **Pages 静态托管**：`pages_projects` (Pages项目), `pages_deployments` (不可变部署), `pages_deployment_files` (部署文件清单).
 * **节点与穿透**：`nodes` (节点), `tunnels` (隧道客户端), `node_system_profiles` (系统概况), `apply_logs` (应用日志).
 * **WAF 与安全**：`waf_rule_groups` (WAF规则组), `waf_ip_groups` (WAF IP组), `waf_rule_group_bindings` (网站WAF绑定).
@@ -154,9 +156,9 @@ OpenResty (Agent, TLS/WAF)
 | 完整配置版本，而不是在线 patch | 让预览、激活、历史和回滚有稳定边界，保证节点状态一致                        |
 | Agent 主动拉取                 | Server 不需要 SSH 权限，降低安全风险；支持 HTTP 与 WebSocket 双协议灵活切换 |
 | 全局单激活版本                 | 降低控制面复杂度，保证所有节点默认一致；提供一键秒级回滚的稳定机制           |
-| 网站配置聚合多域名             | 支持单个业务站点共享站点级策略，同时支持按域名灵活绑定不同的 TLS 证书        |
+| Zone 域名与路由策略分离        | Zone 提供根域入口与域名边界；路由仍可复用同一套站点级策略并按域名绑定证书        |
 | 内网穿透基于 frp 整合          | 复用成熟隧道协议，避免自研隧道引起稳定性风险；其 Vhost 机制天然适配反代路由 |
-| 运行时配置与控制库解耦         | 如 WAF 运行时只读取本地 JSON 规则包，配置变更通过差分广播或快速重载热生效    |
+| 运行时配置与控制库解耦         | WAF 规则发布时编译并随 OpenResty reload 加载；动态 IP 组通过 checksum 驱动的内存快照独立刷新 |
 
 ---
 
@@ -167,8 +169,9 @@ OpenResty (Agent, TLS/WAF)
 1. **[产品边界](./index.md)**：了解 OpenFlare 核心定位与不允许逾越的设计边界。
 3. **[Agent 与发布模型](./agent-design.md)**：理解版本快照同步及失败回滚的安全兜底逻辑。
 4. **细分领域设计**：
+   * Zone 与域名相关开发：阅读 [Zone 与域名资源设计](./zone-design.md)。
    * 穿透相关开发：阅读 [内网穿透隧道设计](./tunnel-design.md)。
-   * WAF 相关开发：阅读 [WAF 设计](./waf-design.md)。
+   * WAF 相关开发：阅读 [WAF 设计](./waf-design.md) 与 [WAF 可编排规则设计](./waf-orchestration-design.md)。
    * Pages 托管开发：阅读 [Pages 静态托管设计](./pages-design.md)。
    * 监控同步开发：阅读 [Uptime Kuma 监控同步设计](./kuma-design.md)。
 5. **[仓库结构](./index.md#仓库结构)**：明确各个物理目录分层职责，避免堆砌和重复开发。

docs/design/index.md

@@ -22,11 +22,12 @@ OpenFlare 适合需要统一管理多台 OpenResty 代理节点的团队，具
 | 能力 | 说明 | 详细设计/使用指南 |
 | --- | --- | --- |
 | **反代配置管理** | 以网站规则（Proxy Route）为聚合边界，支持多域名与多上游负载均衡 | [新建反代配置](../guide/proxy-config.md) |
+| **Zone 与域名管理** | 以可注册根域为管理入口，聚合明确域名、域名证书与反代路由 | [Zone 与域名资源设计](./zone-design.md) |
 | **配置版本控制** | 支持全局单一激活版本的预览、发布、不可变快照历史与秒级一键回滚 | [Agent 与发布模型](./agent-design.md) |
-| **WAF 安全防护** | 全局与自定义规则组，支持手动/自动/订阅型 IP 组，GeoIP 准入与 PoW CC 防护 | [WAF 设计](./waf-design.md) / [WAF 使用指南](../guide/waf-usage.md) |
+| **WAF 安全防护** | 支持可视化 DAG 编排规则、手动/自动/订阅型 IP 组、GeoIP 匹配与 PoW CC 防护 | [WAF 设计](./waf-design.md) / [WAF 可编排规则设计](./waf-orchestration-design.md) / [WAF 使用指南](../guide/waf-usage.md) |
 | **内网穿透** | 通过中继节点（Relay）与内网客户端（OpenFlared），反向穿透暴露内网 Web 服务 | [内网穿透设计](./tunnel-design.md) / [穿透使用指南](../guide/tunnel-usage.md) |
 | **Pages 静态托管** | 直接上传前端 zip 包，由边缘节点拉取并由 OpenResty 本地服务，支持 API 反代与 SPA Fallback | [Pages 静态托管设计](./pages-design.md) |
-| **TLS 证书自动续期** | 绑定 managed_domains 并通过 ACME 协议向 Let's Encrypt 申请/续期证书 | [新建反代配置](../guide/proxy-config.md) |
+| **TLS 证书自动续期** | 将证书显式绑定到 Zone 域名，并通过 ACME 协议向 Let's Encrypt 申请/续期证书 | [Zone 与域名资源设计](./zone-design.md) |
 | **多节点监控与观测** | 收集节点资源快照、健康事件，聚合请求指标与访问日志明细 | [系统架构](./architecture.md) |
 
 ---
@@ -190,4 +191,3 @@ OpenFlare 已收敛为**单 monorepo**（Go 模块 `github.com/Rain-kl/Wavelet`
 * 发布、同步、回滚与 Agent 模型变化：更新 [Agent 与发布模型](./agent-design.md)。
 * 部署方式变化：更新 [部署说明](../deployment/deployment.md) 与 README。
 * 配置项变化：更新 [配置项参考](../reference/configuration.md)。
-

docs/design/waf-design.md

@@ -1,130 +1,15 @@
-# WAF 设计文档
+# WAF 设计
 
-你会学到：OpenFlare 边缘 Web 应用防火墙（WAF）的核心架构、动态 IP 组异步差分同步模型、OpenResty Lua 高性能缓存方案以及完整的请求过滤与判定逻辑。
+OpenFlare WAF 的现行规则模型是可视化 DAG。节点语义、图约束、多规则顺序、发布编译与迁移边界统一以 [WAF 可编排规则设计](./waf-orchestration-design.md) 为准。
 
----
+## 系统边界
 
-## 需求分析
+Server 保存带坐标和修订号的编辑图，发布时再次校验并编译为紧凑运行图；Agent 原子写入快照并 reload OpenResty；请求热路径只遍历 Worker 内存中的不可变图。
 
-在互联网公开环境中，Web 应用程序面临着各种各样的安全威胁（如扫描器踩点、刷接口、针对特定地域的恶意网络爬虫、勒索攻击及 CC 攻击等）。如果直接把恶意请求放行给源站（Origin Server），会导致：
-1. **源站负载飙升**：高频的数据库查询与 CPU 运算极易耗尽服务器资源。
-2. **敏感接口被刷**：登录、注册、短信验证码接口容易被恶意滥用导致财产损失。
-3. **数据泄露风险**：恶意的通用漏洞探测行为无法被提前拦截。
+IP 组独立于规则拓扑更新。手动、订阅和自动 IP 组由控制面维护，Agent 先原子替换 JSON、最后更新 checksum。协调 Worker 每 5 秒检查 checksum，仅变化时读取完整快照并分发给其它 Worker；失败时保留上一份有效数据。完整运行时快照上限为 20 MiB，Server 发布/同步与 Agent 落盘使用同一序列化校验；OpenResty 使用独立的 64 MiB 共享字典和非淘汰写入，容量不足时拒绝新版本而不破坏已提交快照。
 
-因此，OpenFlare 需要在最前端的数据面（OpenResty）构建一套 **高性能、可弹性伸缩的 WAF 过滤引擎**。该引擎能够在最接近用户的边缘层以毫秒级的极低开销对恶意请求进行深度过滤，减轻源站压力，并提供防 CC（PoW 挑战）、IP 黑白名单与地域级别拦截等核心安全防护能力。
+地域节点使用 Country 与 City MMDB。Agent 首次启动时从程序内嵌数据库初始化缺失文件，后续按配置周期下载更新，请求处理始终读取 OpenResty 已加载的数据库。数据库不可用时地域匹配返回 `false` 并限频告警，不允许因数据损坏意外放行其它执行错误。
 
----
+## 安全顺序
 
-## 核心功能
-
-OpenFlare WAF 包含以下核心防护维度：
-
-* **IP 级拦截（IP 黑白名单）**：支持单 IP、CIDR 网段过滤，支持将上万 IP 聚合为 IP 组进行高效比对。
-* **地域黑白名单（GeoIP 限制）**：集成 MaxMind 数据库，支持针对国家（Country）和省份/地区（Region）执行精准准入控制。
-* **自定义拦截响应**：支持针对不同的过滤规则自定义阻断状态码（如 403, 418）以及个性化的 HTML 拦截页面。
-* **人机挑战（PoW CC 防护）**：支持无感人机挑战，通过计算 Hash 碰撞防止自动化脚本和僵尸网络（Botnet）对接口进行并发冲击。
-
----
-
-## IP 组设计与动态异步同步
-
-IP 组是 WAF 进行高效黑白名单管控的核心容器。OpenFlare 将 IP 组根据更新频率与产生渠道分为三类：
-
-### 1. IP 组类型
-* **手动 IP 组（Manual）**：由管理员在控制面板上手动输入 IP 或 CIDR 列表。主要用于静态的信任 IP 或长期的封禁。
-* **订阅 IP 组（Subscription）**：配置远程文本（按行分隔）或标准的 JSON 订阅地址。Server 侧的定时任务会周期性抓取远程订阅源并自动解析导入。主要用于集成开源的威胁情报库、云厂商的 IP 范围等。
-* **自动 IP 组（Automatic）**：**最具弹性的动态防护通道**。控制面的定时扫描任务会读取所有节点的访问日志，按照设定的 Expr 规则（例如：“5分钟内请求 `/api/login` 接口触发 401 超过 50 次”）进行聚合分析，一旦匹配，自动将该恶意源 IP 写入封禁组，并指定封禁时长。
-
-### 2. 异步差分同步设计 (不触发 Nginx Reload)
-在传统的 Nginx WAF 设计中，IP 黑名单的更新通常需要重写配置并 reload。如果恶意 IP 封禁以秒级或分钟级高频触发，频繁 reload 会导致 Nginx 频繁新建 Worker 进程并销毁老进程，导致性能骤降。
-
-OpenFlare 采用 **动态 IP 组异步差分同步设计**：
-
-```text
-WAF IP 成员更新 (手动/订阅/自动自动触发)
-        |
-        v
-Server 更新数据库并计算该 IP 组的全新 MD5 Checksum
-        |
-        +----------------------------------------+
-        | (WebSocket 实时广播)                   | (心跳兜底比对)
-        v                                        v
-Server 立即向所有 Agent 推送变更组的完整成员       Agent 心跳上报本地所有 IP 组的 Checksum 映射表
-        |                                        |
-        |                                        v
-        |                                Server 发现 Checksum 不一致，下发变更的 IP 组成员
-        v                                        |
-Agent 接收成员数据，将其以 JSON 形式写入本地磁盘路径：waf_ip_groups.json
-        |
-        v (Lua 内存感知)
-OpenResty Lua 引擎通过 MD5 校验和秒级感知文件变化并热更新内存，无需 reload 进程
-```
-
-通过这一架构，上万个高频变动的动态黑名单 IP 的落地和生效，**全程无需 reload 任何 Nginx 进程**，极大地保护了网关的高并发性能。
-
----
-
-## 规则组与网站绑定
-
-* **WAF 规则组（Rule Group）**：WAF 过滤政策的最小逻辑集合。一条规则组内可以包含 IP 黑白名单、IP 组引用、地域限制及防 CC 挑战配置。
-* **全局规则组（Global）**：当规则组被标记为 `is_global = true` 时，该规则组对节点上托管的**所有网站路由**默认生效。
-* **网站绑定绑定（Site Binding）**：网站路由（Proxy Route）可以绑定一个或多个非全局规则组。判定时，会执行 `全局规则组 + 绑定规则组` 的并集逻辑。
-
----
-
-## 实现方案与高性能缓存
-
-WAF 在 OpenResty 的 `access_by_lua` 阶段被触发，核心由 Lua 文件与本地落地的 JSON 配置构成。
-
-### 1. 物理结构
-* `waf_config.json`：包含所有规则组的元数据、国家地域限制、以及网站（Site）与规则组的关联映射。
-* `waf_ip_groups.json`：包含所有同步下来的 IP 组与对应的 IP 列表。
-* `waf/runtime.lua`：WAF 规则比对的实际运行时引擎。
-* `waf/check.lua`：接入层入口，负责包引入与 check() 触发。
-
-### 2. 共享内存字典 (ngx.shared) 高性能缓存设计
-在每次 Web 请求进来时都读取磁盘上的 JSON 文件并进行解码，会导致磁盘 I/O 成为严重的性能瓶颈。
-
-OpenFlare 利用 **OpenResty 共享内存字典 (ngx.shared.openflare_waf_config)** 设计了二级缓存机制：
-
-1. **零文件 I/O 路径**：
-   在 Lua 中，每次执行 `check()` 时，首先利用 `ngx.md5` 瞬间计算本地磁盘 JSON 文件的 MD5 哈希（这一操作几乎为零耗时，因为文件已被操作系统 Page Cache 缓存）。
-2. **哈希比对与热加载**：
-   比对共享内存中存储的缓存哈希键（`_config_hash`）。
-   * **若哈希未发生变化**：直接从共享内存字典中读取已解码、存在内存中的 Lua Table 配置，整个校验过程完全基于**共享内存操作**，耗时在 **微秒级** 级别。
-   * **若哈希不一致**：说明 Agent 刚刚落地了新的 WAF 规则或 IP 组，Lua 自动读取磁盘文件并使用 `cjson.decode` 解码，解码后的数据及全新的 MD5 写入共享内存，供后续 Worker 进程无缝读取。
-
----
-
-## 应用流程与判定判定控制逻辑
-
-当一个 HTTP/HTTPS 请求到达 OpenResty 后，WAF 会在 `access` 阶段按下图所示的漏斗判决链进行逐步匹配拦截：
-
-### 1. WAF 判定流程图
-
-```mermaid
-flowchart TD
-    A[请求进入 access 阶段] --> B[获取当前请求的 Site Name]
-    B --> C[在共享内存中加载与此 Site 绑定的所有活跃规则组]
-    C --> D{匹配到 IP 白名单 / 白名单 IP 组?}
-    D -- 是 (匹配成功) --> E[放行请求 - ALLOW]
-    D -- 否 --> F{匹配到国家/地区地域白名单?}
-    F -- 是 (匹配成功) --> E
-    F -- 否 --> G{匹配到 IP 黑名单 / 黑名单 IP 组?}
-    G -- 是 (匹配成功) --> H[阻断请求 - BLOCK]
-    G -- 否 --> I{匹配到国家/地区地域黑名单?}
-    I -- 是 (匹配成功) --> H
-    I -- 否 --> J{是否启用了防 CC PoW 验证?}
-    J -- 是 --> K[转交防 CC 模块处理]
-    J -- 否 --> L[无安全风险，正常放行]
-
-    H --> M[退出并返回规则组配置的自定义状态码与拦截响应体]
-```
-
-### 2. 判决步骤细则
-1. **白名单前置**：
-   为了防止误杀以及保障核心回源流量（如搜索引擎蜘蛛、CDN 回源 IP、办公区出口）的顺畅，WAF **优先匹配 IP 白名单与地域白名单**。一旦白名单匹配成功，直接绕过后续的所有黑名单检测和 CC 挑战，立刻放行。如果请求未命中白名单，则继续向下进行黑名单检测及其他后续判定。
-2. **黑名单强力阻断**：
-   如果在白名单判定中未被捕获，请求将进入黑名单漏斗。一旦请求源 IP 命中 IP 黑名单、命中引用的黑名单 IP 组、或是处于被禁止的国家/地区范围内，Lua 引擎立即将 `ngx.ctx.openflare_waf_blocked` 标记设为 `true`。
-3. **输出响应**：
-   命中黑名单后，Lua 提取匹配到规则组的 `block_status_code`（默认返回 418 / 403）和 `block_response_body`（拦截页面 HTML），通过 `ngx.say()` 输出响应体并执行 `ngx.exit(status)` 平滑退出请求，防止请求继续向后透传。
+启用的全局规则固定前置；路由规则按绑定 sequence 执行。阻止节点立即终止，通过节点仅结束当前规则，全部规则通过后才进入回源链路。未知节点、缺失出口或步数超限一律阻止请求。

docs/design/waf-orchestration-design.md

@@ -0,0 +1,126 @@
+# WAF 可编排规则设计
+
+本文定义 OpenFlare WAF 从固定判定链重构为可视化有向无环图（DAG）的目标架构、数据模型、执行语义、发布模型与迁移边界。IP 组的来源与成员计算仍遵循 [WAF 设计](./waf-design.md)，本文只改变规则如何组合和执行。
+
+## 目标与边界
+
+用户新增 WAF 规则时只输入名称。Server 随即创建一张合法的默认图 `开始 → 通过`，前端进入基于 React Flow 的独立编排页面。用户通过添加处理单元、配置节点并连接分支构建策略，不再填写固定顺序的黑白名单与 PoW 表单。
+
+第一阶段支持以下节点：
+
+| 节点 | 数量约束 | 输入 | 输出 | 配置 |
+| --- | --- | --- | --- | --- |
+| 开始 | 每张图恰好一个 | 无 | `next` | 无 |
+| 通过 | 每张图恰好一个 | 一个或多个 | 无 | 无 |
+| 阻止 | 可创建多个 | 一个或多个 | 无 | HTTP 状态码、HTML 响应体 |
+| IP 匹配 | 可创建多个 | 一个或多个 | `true`、`false` | IP、CIDR、IP 组 ID |
+| 地域匹配 | 可创建多个 | 一个或多个 | `true`、`false` | 国家代码、地区代码 |
+| PoW | 可创建多个 | 一个或多个 | `next` | 算法、难度、会话 TTL、挑战 TTL |
+
+IP 匹配和地域匹配不区分黑名单或白名单。`true` 只表示请求匹配节点配置，`false` 只表示未匹配；放行或阻止的业务含义完全由连线决定。PoW 验证完成后沿 `next` 继续，未完成时由挑战页面接管当前请求，不产生 `false` 分支。
+
+不在第一阶段实现循环、脚本节点、任意表达式节点、子图调用和跨规则跳转。
+
+## 控制面架构
+
+规则图采用控制面编辑态和数据面运行态分离的双模型：
+
+1. React Flow 编辑器提交版本化图 JSON，其中包含节点 ID、节点类型、显示名称、坐标、类型化配置和连线。
+2. Server 对整张图执行权威校验，通过后以单个事务保存图并递增修订号。
+3. 配置发布时，Server 再次校验所有启用规则，将图编译为不含坐标、标签等 UI 字段的紧凑运行时 DAG，并收集被引用的 IP 组 ID。
+4. Agent 原子落盘完整发布快照并 reload OpenResty。新 Worker 启动时只加载和解析一次规则 JSON。
+5. 请求热路径只遍历 Worker 内存中的不可变运行时图，不读取文件、不计算 checksum、不解析 JSON。
+
+编辑态 JSON 使用明确的 `schema_version`。节点配置使用按节点类型区分的结构，不允许用无约束键值对象绕过 Server 校验。初始安全上限为每条规则 128 个节点、256 条边和 256 KiB 编辑态 JSON；这些限制由 API 和发布编译器共同执行。
+
+## 图结构约束
+
+规则保存与发布必须满足全部约束：
+
+* 图是有向无环图，禁止自环和任意循环。
+* 恰好存在一个开始节点和一个通过节点；阻止节点可以存在多个。
+* 开始节点无入边且恰好有一个 `next` 出口；通过和阻止节点无出口。
+* IP 匹配与地域匹配的 `true`、`false` 出口必须各连接一次；PoW 的 `next` 必须连接一次。
+* 除终止节点外不得存在悬空出口；每个非开始节点至少有一条入边。
+* 所有节点都必须从开始节点可达，且从每个可执行节点出发都能抵达通过或阻止。
+* 边的源端口必须属于源节点类型；同一源端口不得连接多个目标。
+* 节点 ID 在图内唯一，边 ID 在图内唯一，所有边引用的节点必须存在。
+* 节点配置必须通过对应类型的字段、范围、引用存在性和体积校验。
+
+前端提供即时校验和连线限制以改善体验，但 Server 是唯一权威校验方。删除节点时前端同步删除关联边并将规则标记为未保存；图恢复合法前禁止保存。
+
+## 多规则执行语义
+
+一个路由可以绑定多条自定义规则。绑定关系是有序列表，并遵循以下顺序：
+
+1. 启用的全局规则固定最先执行，不参与路由侧排序。
+2. 路由绑定的启用规则按绑定顺序依次执行。
+3. 当前规则抵达阻止节点时立即输出该节点配置的响应并终止请求。
+4. 当前规则抵达通过节点时，只表示当前规则执行完成；若仍有后续规则则继续执行。
+5. 全部规则均抵达通过节点后，请求才真正放行并进入后续 OpenResty/回源链路。
+
+运行时图在发布前已经过完整校验。若 Lua 执行器仍遇到未知节点、未知端口、缺失目标或超过节点步数上限，则记录限频错误并阻止请求，避免损坏的安全配置意外放行。
+
+## IP 组内存刷新
+
+规则拓扑只在发布并 reload OpenResty 时生效；IP 组成员仍可由手动、订阅或自动任务独立更新，不要求发布或 reload。
+
+IP 组采用协调 Worker、共享快照和 Worker 本地对象的两级缓存：
+
+1. 请求始终读取当前 Worker 内存中的 IP 组对象，不访问文件或共享字典中的 JSON。
+2. 每 5 秒只有一个取得共享锁的 Worker 读取轻量 checksum 文件。
+3. checksum 未变化时立即结束，不读取完整 `waf_ip_groups.json`。
+4. checksum 变化时，协调 Worker 读取并验证一次完整 JSON，再把原始快照按 checksum 写入独立的 64 MiB `ngx.shared.openflare_waf_ip_groups`，最后更新提交指针。
+5. 其他 Worker 发现共享版本变化后，从共享内存取得快照、解析并原子替换各自的本地对象，不重复读取磁盘。
+6. 刷新失败时继续使用上一份有效对象，限频记录错误，并在下一周期重试。
+
+Agent 必须先原子替换 IP 组 JSON，最后原子更新 checksum，使 Worker 永远不会把半写入文件识别为新版本。Server 发布/同步和 Agent 落盘共同执行 20 MiB 聚合快照上限；共享字典使用不会强制淘汰旧键的安全写入，失败时保留当前与上一代不可变快照。
+
+## API 与编辑器
+
+创建接口只接受规则名称，创建成功后返回带默认图的规则详情。规则元数据、图保存和路由绑定使用独立操作，避免修改启用状态或绑定时覆盖画布。
+
+图详情包含 `revision`。保存请求提交 `revision + graph`，Server 仅在修订号匹配时更新并递增修订号；不匹配时返回冲突，前端提示重新加载，禁止静默覆盖其他页面的修改。路由绑定接口接受有序规则 ID 数组。
+
+React Flow 编辑页采用全宽画布和固定右侧属性栏：
+
+* 顶部提供返回、规则名称、启用状态、校验状态和保存操作。
+* 画布使用紧凑高度和较小的首次适配缩放，支持缩放、平移、框选、删除、自动布局和 MiniMap/Controls 等必要导航能力；节点拖动由 React Flow 本地受控状态实时处理，拖动结束后才把坐标写回编辑图。
+* “添加处理单元”提供 IP 匹配、地域匹配、PoW 和阻止；开始与通过由默认图提供且不可删除或重复添加。
+* 选中普通节点或连线后可使用画布删除按钮或 Delete/Backspace 删除；删除节点时同步移除关联连线。
+* 右侧属性栏默认隐藏，选中节点后才显示并用于编辑配置；点击连线或画布空白处时收起。
+* 地域匹配属性使用完整国家与 ISO 3166-2 一级行政区数据；国家选项同时显示本地化名称与代码，行政区支持按国家名、行政区名或代码搜索，避免一次渲染数千个选项。
+* 离开存在未保存变更的页面前必须提示；保存冲突和 Server 校验错误应定位到相关节点或边。
+
+WAF 列表展示规则名称、启用状态、节点数量、应用路由数量和更新时间。新建规则的对话框只有名称字段，成功后立即导航到编排页面。
+
+## 持久化与迁移
+
+规则记录增加版本化图 JSON 与修订号；绑定记录增加执行顺序。图作为一个聚合整体保存，不拆成节点表和边表，以保证编辑操作的事务边界，并让新增节点类型不必频繁扩展数据库 Schema。
+
+升级现有安装时：
+
+* 保留规则名称、全局标记、启用状态及路由绑定关系。
+* 所有规则图重置为 `开始 → 通过`，不迁移旧 IP/地域名单、PoW 或拦截响应配置。
+* 现有绑定按稳定顺序写入顺序字段；全局规则仍固定前置。
+* 新图和运行时稳定后移除旧规则字段、固定顺序编译逻辑和旧前端表单，不长期维护双执行器。
+
+该迁移会让旧防护配置停止生效，升级说明必须显著提示管理员在发布下一版本前重新编排规则。
+
+## 发布、失败与回滚
+
+规则图只在配置发布时生效。发布前校验或编译失败时拒绝发布，当前活动版本保持不变。Agent 写入、OpenResty 配置检查或 reload 失败时，应用流程失败并恢复上一份有效发布版本。
+
+新 Worker 只接受完整且可解析的规则运行态配置。旧 Worker 在 OpenResty 优雅 reload 期间继续使用旧内存图，新 Worker 使用新图，因此请求不会观察到半更新状态。
+
+地域数据库不可用时，地域匹配返回 `false` 并限频告警，保持现有行为。IP 组刷新失败时保留旧内存快照。PoW 未完成由挑战模块接管请求，不视为执行错误；PoW 节点配置先以短期键写入 OpenResty 共享内存，再通过 `ngx.exec` 的显式参数传给内部挑战处理器，不能依赖内部重定向保留 `ngx.ctx` 或隐式继承请求参数。发布快照中的空规则绑定必须编码为 JSON 空数组；运行时将旧快照中的 `null` 可选数组按空数组处理，禁止因 `cjson` 的 `ngx.null` userdata 中断请求。
+
+## 测试与验收
+
+* Go 单元测试覆盖图结构、端口、可达性、终止性、节点配置、体积限制、编译结果、修订冲突和绑定顺序。
+* 数据库测试覆盖 PostgreSQL/SQLite 迁移、默认图、旧绑定稳定排序和回滚。
+* Lua 测试覆盖所有节点出口、多规则顺序、全局规则前置、多个阻止响应、PoW 接管和损坏运行时图保护。
+* Agent/OpenResty 测试覆盖发布 reload、加载一次、失败回滚、IP 组五秒 checksum 刷新和旧快照保留。
+* 前端测试覆盖创建后导航、特殊节点唯一性、连线限制、属性编辑、即时校验、未保存提示和并发冲突。
+* 集成测试从控制面创建并编排规则，发布后用真实请求验证放行、阻止、PoW 和 IP 组热刷新。
+* API 变更后运行 `make swagger`；完成实现后运行前端检查与构建以及 `make code-check`。

docs/design/zone-design.md

@@ -0,0 +1,100 @@
+# Zone 与域名资源设计
+
+## 目标
+
+将“网站”重构为以可注册根域为入口的 Zone 管理体验。`example.com` 之类的 Zone 是稳定的管理边界；用户通过稳定 ID 路径进入该 Zone，查看并维护其中明确声明的域名、域名所绑定的反代路由和证书，以及路由级 WAF、Pages 等能力。
+
+本设计替代 `managed_domains` 的概念、表与 API。它不引入权威 DNS 解析记录管理。
+
+## 范围与约束
+
+* Zone 根域使用 Public Suffix List 解析，例如 `api.example.co.uk` 归属 `example.co.uk`。
+* URL 使用 ID：列表为 `/websites`，详情为 `/websites/:zoneId`；不使用域名作为 URL 参数。
+* Zone 域名必须是明确的 FQDN，禁止录入 `*.example.com`。TLS 证书可仍含通配符 SAN，并用于覆盖明确的 Zone 域名。
+* 一个 Zone 域名至多关联一条反代路由；一条反代路由可关联多个 Zone 域名，因而可跨 Zone 共享同一套上游、缓存、限流、WAF 与 Pages 配置。
+* 不新增 DNS 记录、边缘函数、预览子域或租户隔离能力。
+
+## 核心模型
+
+```mermaid
+erDiagram
+  ZONES ||--o{ ZONE_DOMAINS : contains
+  PROXY_ROUTES ||--o{ ZONE_DOMAINS : serves
+  TLS_CERTIFICATES ||--o{ ZONE_DOMAINS : secures
+  PROXY_ROUTES ||--o{ WAF_RULE_GROUP_BINDINGS : applies
+  PAGES_PROJECTS ||--o{ PROXY_ROUTES : backs
+
+  ZONES {
+    uint id PK
+    string domain UK
+  }
+  ZONE_DOMAINS {
+    uint id PK
+    uint zone_id
+    uint proxy_route_id
+    string domain UK
+    uint cert_id
+  }
+```
+
+### `of_zones`
+
+保存根域、创建时间与更新时间。根域全局唯一且创建后不可原地修改；需要变更时新建 Zone 并迁移域名。删除 Zone 前必须先清空其 Zone 域名。
+
+### `of_zone_domains`
+
+保存 `zone_id`、明确 `domain`、可空的 `proxy_route_id`、可空的 `cert_id` 及时间戳。`domain` 全局唯一；所有关系字段建立索引但不建立物理外键。`proxy_route_id` 允许为空，以承接已准备证书但尚未配置反代的历史域名。
+
+`of_proxy_routes` 逐步移除 `domain`、`domains`、`cert_id`、`cert_ids` 与 `domain_cert_ids` 等域名/证书冗余列。路由不得再指定任何 TLS 证书；路由名称 `site_name` 成为稳定的人类可读标识，编译器从关联的 Zone 域名读取 `server_name` 与其 `cert_id`。这使每个明确域名的证书只有一个来源。
+
+## 业务与 API
+
+管理端新增 Zone 资源：
+
+* `GET/POST /api/v1/d/zones`
+* `GET/POST /api/v1/d/zones/:id/update`
+* `POST /api/v1/d/zones/:id/delete`
+* `GET/POST /api/v1/d/zones/:id/domains`
+* `POST /api/v1/d/zones/:id/domains/:domainID/update`
+* `POST /api/v1/d/zones/:id/domains/:domainID/delete`
+* `GET /api/v1/d/zones/:id/overview`
+
+反代路由的创建、更新请求改用 `zone_domain_ids`，不再提交 `domains`、`cert_id`、`cert_ids` 或 `domain_cert_ids`。服务端在事务中验证域名归属、全局唯一性和证书 SAN 覆盖；失败通过 `response.Abort*` 统一返回。删除已绑定路由的 Zone 域名必须先解除或删除该路由；删除仍有域名的 Zone 必须拒绝。
+
+WAF、Pages、上游与发布版本仍属于 `proxy_routes`。Zone 概览只聚合展示其域名关联的路由状态，不复制或重新定义这些配置。
+
+## 前端体验
+
+`/websites` 只展示 Zone 根域，显示已配置域名数、路由数与状态，并提供搜索、创建和操作菜单。点击进入 `/websites/:zoneId`。
+
+详情页包含：
+
+* 概览：域名、路由和有效证书统计；域名—路由—证书摘要；路由级 WAF 与 Pages 摘要。
+* 域名：明确 FQDN 的列表、证书选择和关联路由；不显示或接受通配符域名。
+* 路由：筛选到当前 Zone 的路由并链接到既有路由详情。
+* 证书：当前 Zone 域名实际引用的证书。
+* 设置：Zone 备注和受保护的删除操作。
+
+新增路由时从 Zone 域名中选择；用户也可以先在 Zone 中登记域名，再绑定路由。全局反代路由入口保留，但改用同一套 Zone 域名选择器。
+
+## 数据迁移
+
+本次改造分两个发布阶段，以免 SQL 用错误的“末两段域名”规则处理多级公共后缀。操作细则见 [Zone 域名迁移与发布验收](../guide/zone-domain-migration.md)。
+
+1. **第一阶段 DDL**：PostgreSQL 与 SQLite 同版本 Goose 创建 `of_zones` / `of_zone_domains`；暂时保留 `of_managed_domains` 与路由冗余列。
+2. **数据导入（自动）**：Server 启动时 `migrator.Migrate()` 先应用 goose SQL 至 `202607120002`，再自动导入旧路由域名 / `managed_domains`（`publicsuffix` 解析注册根域，写入 `cert_id` 与 `proxy_route_id`），最后继续后续 SQL。冲突时启动失败；修复后重启可幂等重试。无需手动命令。
+3. **代码切换**：控制面 API、配置快照、渲染、前端均以 Zone 域名为唯一来源；路由写入仅使用 `zone_domain_ids`。
+4. **第二阶段清理**：Goose SQL `202607130001_drop_legacy_route_domain_columns` 删除 `of_managed_domains` 与 `of_proxy_routes` 冗余列。Down 仅恢复开发库空结构，不回填历史数据。
+
+### 运行时模型边界
+
+* 持久化：域名与证书只存在于 `of_zone_domains`；`of_proxy_routes` 仅保存路由策略（上游、缓存、限流、WAF 绑定键等）。
+* 渲染：配置快照在内存中组装临时 `Domains` / `DomainCertIDs` 供 OpenResty 渲染，不写回数据库。
+* 结构迁移仅使用 `internal/db/migrator/goose/{postgres,sqlite}/*.sql`；启动时自动导入历史域名，第二阶段后旧列不存在则为空操作。
+
+## 验证
+
+* 单元测试：Public Suffix List 分组、FQDN / 通配符拒绝、跨 Zone 路由、证书 SAN 覆盖、删除保护及迁移幂等性；清理后断言旧列/旧表不存在。
+* 集成测试：Zone、Zone 域名与路由 API 的成功与失败响应；现有路由迁移后生成相同 OpenResty 域名与证书配置。
+* 前端测试：Zone 列表、ID 路由、详情加载 / 错误 / 空状态、域名选择器与 API 负载。
+* 手动验证：迁移前后比较激活配置快照中的 `server_name` 和证书路径，发布后使用根域及各子域请求验证路由。

docs/guide/index.md

@@ -11,14 +11,15 @@ OpenFlare 是一套自托管的 OpenResty 控制面。它把反向代理网站
 1. [快速开始](./quick-start.md)：用 Docker Compose 启动 Server，登录管理端，并接入第一个 Agent。
 2. [发布第一份配置](./first-site.md)：快速新建一条最基础的 HTTP 反代站点规则，并验证节点生效状态。
 3. [新建反代配置](./proxy-config.md)：一步一步了解如何从证书导入与申请开始，配置 HTTPS 加密与上游源站管理。
-4. [Pages 静态托管使用](./pages-usage.md)：了解静态项目 ZIP 上传限制、SPA Fallback、以及内置 API 反向代理配置。
-5. [内网穿透与隧道使用](./tunnel-usage.md)：部署 Relay 与 Client，实现安全、无公网 IP 反向穿透。
-6. [WAF 安全防护使用](./waf-usage.md)：配置 WAF 规则组，掌握 IP 黑白名单、自动/订阅 IP 组、地域限制与 PoW CC 防护。
-7. [WAF 自动 IP 组语法](./waf-ip-group-expr.md)：编写自动 IP 组 Expr 规则，了解关键字含义和预设规则。
-8. [Uptime Kuma 监控同步](./uptime-kuma.md)：配置并使用 Uptime Kuma 自动差分同步和监控范围控制。
-9. [SSO 登录配置](./sso.md)：配置 GitHub 或 OIDC 实现第三方单点登录 (SSO) 接入。
-10. [故障排查](./troubleshooting.md)：按症状排查登录、数据库、节点同步、OpenResty 应用和前端构建问题。
-11. [引用与致谢](./credits.md)：查看系统依赖的优秀开源项目与社区致谢清单。
+4. [Zone 域名迁移](./zone-domain-migration.md)：从旧托管域名/路由内嵌域名升级到 Zone 模型（goose 自动导入），含备份、验收与回滚说明。
+5. [Pages 静态托管使用](./pages-usage.md)：了解静态项目 ZIP 上传限制、SPA Fallback、以及内置 API 反向代理配置。
+6. [内网穿透与隧道使用](./tunnel-usage.md)：部署 Relay 与 Client，实现安全、无公网 IP 反向穿透。
+7. [WAF 安全防护使用](./waf-usage.md)：配置 WAF 规则组，掌握 IP 黑白名单、自动/订阅 IP 组、地域限制与 PoW CC 防护。
+8. [WAF 自动 IP 组语法](./waf-ip-group-expr.md)：编写自动 IP 组 Expr 规则，了解关键字含义和预设规则。
+9. [Uptime Kuma 监控同步](./uptime-kuma.md)：配置并使用 Uptime Kuma 自动差分同步和监控范围控制。
+10. [SSO 登录配置](./sso.md)：配置 GitHub 或 OIDC 实现第三方单点登录 (SSO) 接入。
+11. [故障排查](./troubleshooting.md)：按症状排查登录、数据库、节点同步、OpenResty 应用和前端构建问题。
+12. [引用与致谢](./credits.md)：查看系统依赖的优秀开源项目与社区致谢清单。
 
 ## 按角色查找
 

docs/guide/quick-start.md

@@ -30,6 +30,14 @@ Agent 统一通过 OpenResty 二进制控制运行时。本地部署需要节点
 
 为了保证异步任务队列（Asynq 框架）及可观测流量看板功能完整运行，快速开始推荐采用 **PostgreSQL + Redis + ClickHouse** 经典单机版编排。
 
+先拉取 ClickHouse 服务端性能配置到 `./config/clickhouse`，并以单文件方式挂载：
+
+```bash
+mkdir -p ./config/clickhouse
+curl -fsSL -o ./config/clickhouse/performance.xml \
+  https://raw.githubusercontent.com/Rain-kl/OpenFlare/refs/heads/main/config/clickhouse/performance.xml
+```
+
 在空目录中创建 `docker-compose.yaml`：
 
 ```yaml
@@ -37,26 +45,26 @@ version: '3.8'
 
 services:
   openflare:
-    image: ghcr.io/rain-kl/openflare-server:latest
+    image: ghcr.io/rain-kl/openflare:latest
     container_name: openflare-server
     restart: unless-stopped
     ports:
       - "3000:3000"
     volumes:
-      - ./uploads:/app/uploads
+      - openflare_uploads:/app/uploads
     environment:
       TZ: Asia/Shanghai
       APP_SESSION_SECRET: 'replace-with-a-long-random-string' # 生产环境请替换为长随机字符串
       DB_ENABLED: "true"
       DB_HOST: "postgres"
       DB_PORT: "5432"
-      DB_USERNAME: "openflare"
-      DB_PASSWORD: "replace-with-strong-password"
-      DB_NAME: "openflare"
+      DB_USERNAME: "${DB_USERNAME:-openflare}"
+      DB_PASSWORD: "${DB_PASSWORD:-replace-with-strong-password}"
+      DB_NAME: "${DB_NAME:-openflare}"
       REDIS_ENABLED: "true"
-      REDIS_ADDRS: "redis:6379"
+      REDIS_ADDR: "redis:6379"
       CLICKHOUSE_ENABLED: "true"
-      CLICKHOUSE_HOSTS: "clickhouse:9000"
+      CLICKHOUSE_HOST: "clickhouse:9000"
     depends_on:
       postgres:
         condition: service_healthy
@@ -69,13 +77,13 @@ services:
     image: postgres:17-alpine
     restart: unless-stopped
     environment:
-      POSTGRES_DB: openflare
-      POSTGRES_USER: openflare
-      POSTGRES_PASSWORD: replace-with-strong-password
+      POSTGRES_DB: ${DB_NAME:-openflare}
+      POSTGRES_USER: ${DB_USERNAME:-openflare}
+      POSTGRES_PASSWORD: ${DB_PASSWORD:-replace-with-strong-password}
     volumes:
-      - ./data/postgres_data:/var/lib/postgresql/data
+      - openflare_postgres_data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U openflare -d openflare"]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USERNAME:-openflare} -d ${DB_NAME:-openflare}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -85,7 +93,7 @@ services:
     restart: unless-stopped
     command: ["valkey-server", "--appendonly", "yes"]
     volumes:
-      - ./data/valkey:/data
+      - openflare_redis_data:/data
     healthcheck:
       test: ["CMD", "valkey-cli", "ping"]
       interval: 10s
@@ -98,17 +106,28 @@ services:
     environment:
       CLICKHOUSE_DB: openflare
       CLICKHOUSE_USER: default
-      CLICKHOUSE_PASSWORD: 123456
+      CLICKHOUSE_PASSWORD: ${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}
       CLICKHOUSE_DEFAULT_ACCESS_MANAGEMENT: 1
       TZ: Asia/Shanghai
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
     volumes:
-      - ./data/clickhouse_data:/var/lib/clickhouse
+      - openflare_clickhouse_data:/var/lib/clickhouse
+      - ./config/clickhouse/performance.xml:/etc/clickhouse-server/config.d/performance.xml:ro
     healthcheck:
-      test: ["CMD", "clickhouse-client", "--query", "SELECT 1"]
+      test: ["CMD", "clickhouse-client", "--user", "default", "--password", "${CLICKHOUSE_PASSWORD:-replace-with-clickhouse-password}", "--query", "SELECT 1"]
       interval: 10s
       timeout: 5s
       retries: 5
       start_period: 15s
+
+volumes:
+    openflare_uploads:
+    openflare_postgres_data:
+    openflare_redis_data:
+    openflare_clickhouse_data:
 ```
 
 启动服务：

docs/guide/waf-usage.md

@@ -1,176 +1,31 @@
 # WAF 安全防护使用
 
-你会学到：OpenFlare 边缘 Web 应用防火墙 (WAF) 的工作原理、防护维度，如何管理与引用三类 IP 组（手动、订阅与基于 Expr 的自动 IP 组），配置防 CC 挑战（PoW 人机验证）与地域级拦截，以及如何在不 reload 进程的情况下实现 IP 组成员的秒级热更新。
+OpenFlare WAF 使用可视化有向无环图编排规则。新建规则时只填写名称，系统创建默认的“开始 → 通过”图并进入编辑器。
 
----
+## 节点与连线
 
-## 核心概念
+- **开始**：每条规则唯一，沿 `next` 进入图。
+- **通过**：结束当前规则；若路由仍有后续规则则继续执行。
+- **阻止**：立即按配置的状态码和 HTML 响应终止请求。
+- **IP 匹配**：配置 IP、CIDR 或 IP 组，分别连接 `true`、`false`。
+- **地域匹配**：按国家或 ISO 3166-2 一级行政区代码分支；国家列表同时显示中文名称与代码，行政区可按国家名、行政区名或代码搜索。Country 与 City MMDB 缺失时由 Agent 从程序内嵌数据库初始化，并按配置周期更新。City MMDB 不可用时按未匹配处理。
+- **PoW**：未完成挑战时接管请求，验证通过后沿 `next` 继续。
 
-在配置安全策略前，你需要理解 WAF 的几个核心组成部分：
+服务端会拒绝循环、悬空出口、不可达节点、重复端口连接和无效配置。保存时携带页面加载得到的 `revision`；发生 409 冲突时应重新加载，避免覆盖他人修改。
 
-| 概念 | 说明 | 作用范围与生效方式 |
-| --- | --- | --- |
-| **WAF 规则组 (Rule Group)** | 安全规则的逻辑集合。包括：IP 黑白名单（直接录入或引用 IP 组）、国家/地区地域限制、防 CC 挑战（PoW）以及自定义拦截响应。 | 支持全局生效或绑定到单个/多个网站。**修改规则组定义必须发布并激活配置版本**。 |
-| **IP 组 (IP Group)** | 存放单个 IP 或 CIDR 网段的列表容器。分为**手动**、**订阅**与**自动**三类。WAF 规则组可通过 ID 引用 IP 组。 | 属于动态资源。**IP 组成员的增减支持 WebSocket 秒级无缝热同步，无需 reload 进程**。 |
-| **人机挑战 (CC PoW)** | 基于 Proof of Work (工作量证明) 的人机验证挑战。通过让浏览器计算特定难度的哈希碰撞，静默阻断恶意刷接口的自动化脚本与 Bot，保障正常用户体验。 | 位于规则组内的配置 Tab。**修改 PoW 参数必须发布并激活配置版本**。 |
+选中普通节点或连线后，可点击画布右上角的删除按钮，或按 Delete/Backspace 删除。删除节点会同时删除关联连线；唯一的“开始”和“通过”节点不可删除。拖动节点只在松开时记录最终坐标，不会在移动过程中反复重建画布状态。
 
----
+右侧节点属性栏默认隐藏，点击节点后显示；点击连线或画布空白区域后自动收起。
 
-## 推荐配置顺序
+编排区默认使用较紧凑的高度和较小的首次缩放比例，仍可通过滚轮或画布 Controls 自由缩放。
 
-配置网站的安全防护时，推荐按这个顺序进行：
+## 绑定与生效
 
-1. 进入左侧菜单 **「安全性」->「IP 组」**，创建所需的 **手动 IP 组** (如开发者白名单) 或 **自动 IP 组** (如根据 404 扫描自动封禁的 IP)。
-2. 创建或编辑 **WAF 规则组**（菜单路径 **「安全性」->「WAF」**）：
-   * 绑定需要引用或阻断的 IP 组。
-   * 配置国家或省份的地域黑白名单限制。
-   * (可选) 在 `PoW` 标签页配置人机挑战参数。
-   * 在 `拦截返回` 标签页设定自定义状态码（如 403, 418）和 HTML 拦截页。
-3. 将规则组关联到对应的 **路由规则**（在 **「规则管理」** 页面编辑对应规则，并在「WAF」选项卡中勾选关联规则组）。
-4. 发布并激活配置版本，使边缘节点 (Agent) 开始应用 WAF 规则过滤流量。
+启用的全局规则固定最先执行；路由绑定的自定义规则严格按列表顺序执行。调整顺序后需要发布配置版本，规则拓扑才会随 OpenResty reload 生效。
 
----
+IP 组成员是动态资源。Agent 每 5 秒检查 checksum，变化后在 Worker 间更新内存快照，无需重新发布规则或 reload。手动、订阅与自动 IP 组均可被 IP 匹配节点引用。单次完整 IP 组运行时快照最多 20 MiB；超过上限时发布或同步会返回错误，并继续使用上一份有效快照。
 
-## 详细步骤指南
+> [!IMPORTANT]
+> 从旧固定黑白名单/地域/PoW 表单升级时，规则图会重置为“开始 → 通过”，旧策略字段不会迁移。请在发布新版本前逐条重新编排并验证规则。
 
-### 第一步：管理与配置 IP 组
-
-IP 组是进行大批量 IP 过滤的基石。OpenFlare 提供了极富弹性的三类 IP 组：
-
-#### 1. 手动 IP 组 (Manual)
-*   **用途**：静态维护一些确定受信任或确定需长期拦截的 IP/网段。
-*   **配置**：点击「创建 IP 组」-> 类型选择「手动」-> 按行直接填入 IP 或 CIDR 格式（例如 `192.168.1.100` 或 `10.0.0.0/24`）。
-
-#### 2. 订阅 IP 组 (Subscription)
-*   **用途**：接入第三方开源威胁情报库、云厂商公布的官方网段（如 Cloudflare, GitHub Action IP 列表），或团队内部统一维护的动态 IP 源。
-*   **配置参数**：
-    *   **订阅 URL**：必须是合法的 `http` 或 `https` 链接。
-    *   **订阅格式**：支持 `Text` 与 `JSON` 两种数据格式：
-        *   **Text 格式**：纯文本格式。按行分隔读取 IP/CIDR，会自动过滤掉以 `#` 开头的注释行和空白行。
-        *   **JSON 格式**：当订阅源是一个结构化的 JSON 响应时，需要编写 **映射规则 (Mapping Rule)** 从 JSON 数据中提取 IP 列表。
-    *   **映射规则**：使用类似 JSONPath 的轻量点语法定位 IP 数组，支持以 `[]` 展开数组。例如：
-        *   若 JSON 结构为 `{"data": {"ips": ["1.1.1.1", "2.2.2.2"]}}`，则映射规则填写 `$.data.ips[]`（或 `data.ips[]`）。
-        *   若 JSON 根节点本身即为字符串数组（如 `["1.1.1.1", "2.2.2.2"]`），映射规则留空或填写 `$` 即可。
-    *   **同步间隔 (分钟)**：该订阅组自动同步的周期，默认为 `1440` 分钟（24小时），允许范围为 `5` 至 `43200` 分钟。
-*   **安全限额与同步频率**：
-    *   为防止恶意或超大订阅源造成系统负担，单次抓取上限限制为 **2 MiB**，网络拉取超时为 15 秒。
-    *   Server 默认每 5 分钟在后台扫描一次到期的订阅 IP 组并拉取同步。
-
-> [!TIP]
-> 关于 WAF 的动态 IP 组异步差分同步模型（WebSocket 实时热同步、不触发 Nginx Reload 机制）以及高性能 Lua 缓存方案等底层设计细节，请参阅 [WAF 设计](../design/waf-design.md)。
-
-#### 3. 自动 IP 组 (Automatic)
-*   **用途**：**最具杀伤力的防扫描、防爆破自动通道**。
-*   **配置**：类型选择「自动」-> 编写 Expr 日志聚合逻辑。你可以直接引用系统内置的预设：
-    *   **单 IP 404 高频扫描**：`request_count > 100 && StatusRatio(404) >= 0.8` (单个 IP 最近一小时请求超 100 次且 404 响应占比超 80%)。
-    *   **单 IP 直连访问异常**：`ip_host_count > 50 && ip_host_ratio > 0.5` (绕过域名直接通过 IP 地址进行高频请求)。
-*   **测试与立即执行**：保存前可点击 **「测试规则」** 按钮预览当前日志窗口被命中的 IP。保存后可点击 **「立即执行」** 直接聚合日志并生成封禁名单。
-
-> [!TIP]
-> 自动 IP 组的详细语法和可用指标请参阅 [WAF 自动 IP 组规则语法](./waf-ip-group-expr.md)。
-
----
-
-### 第二步：创建与配置 WAF 规则组
-
-1. 导航至左侧菜单 **「安全性」->「WAF」**，点击 **「创建规则组」**。
-2. 填写规则组名称（如 `production-api-shield`），选择是否为「全局规则组」。
-3. 进入规则组详情，在下方几个配置 Tab 中依次设置：
-
-#### 1. 黑白名单配置 (Allow / Block Lists)
-*   **直录 IP**：可直接在框内按行填入临时需要白名单放行或黑名单阻断的单个 IP 或网段。
-*   **IP 组引用**：点击「绑定 IP 组」，选择你在第一步中配置好的手动、自动或订阅 IP 组。白名单引用会直接放行，黑名单引用则直接阻断。
-
-#### 2. 地域限制 (GeoIP)
-*   **说明**：OpenFlare 集成了 GeoIP 地理位置解析。
-*   **配置**：可开启地域限制开关，模式可选择「仅允许」或「禁止」。
-*   *   例如，若你的服务只服务于国内，可以将模式设为「仅允许」，并在国家列表中勾选 `中国`。
-*   *   支持细化到具体省份/地区（Region），一键拦截特定地理区域的恶意流量。
-
-#### 3. 人机挑战配置 (PoW CC 防护)
-*   **说明**：开启防 CC 的人机挑战。当请求触发防CC机制时，浏览器会渲染一个静默挑战页面，并在几百毫秒内完成数学计算（哈希碰撞）。通过后会被写入 Cookie，后续访问直接放行。此过程对真实用户几乎无感，但能完美拦截不支持 JS/不具备计算能力的爆破脚本与 CC 僵尸工具。
-*   **核心参数**：
-    *   **开启状态**：启用/禁用。
-    *   **哈希难度**：控制碰撞难度（建议设定为 `4` 或 `5`）。
-    *   **Cookie 有效期**：挑战通过后，在多长时间内免验证（例如 `3600` 秒）。
-    *   **自定义挑战 HTML**：可定制挑战中的 Loading 页面风格，让其融入你的业务设计。
-
-#### 4. 拦截返回 (Block Response)
-*   **说明**：设定 WAF 规则拦截恶意请求时的返回行为。
-*   **配置**：
-    *   **拦截状态码**：可自定义拦截响应的 HTTP 状态码，例如标准的 `403`，或带有趣味性质的 `418 (I'm a teapot)`。
-    *   **拦截响应体**：可在此输入自定义的 HTML 内容，展示给被拦截的攻击者（如：“WAF 拦截：你的请求已被记录”）。
-
----
-
-### 第三步：将规则组关联到路由规则
-
-规则组配置完成后，并不会自动生效，你需要将其与具体的路由规则绑定。
-
-*   **关联配置步骤**：进入 **「规则管理」** 页面，点击进入对应反代或静态托管规则的详情，切换到 **「WAF」** 选项卡，勾选并绑定刚才创建的 WAF 规则组。
-
-> [!NOTE]
-> 如果规则组被标记为 **「全局规则组 (is_global)」**，它将自动应用到网关上托管的**所有网站**，无需手动执行绑定。
-
----
-
-### 第四步：发布并生效配置
-
-1. 如果你修改了 **规则组定义**、**GeoIP 范围**、**PoW 防CC难度** 或 **网站的绑定关系**：
-   * 你需要点击管理端右上角的 **「配置预览」** -> **「发布并激活」**。
-   * Agent 拉取并校验新版本后，将重写本地 OpenResty 核心配置文件（`waf_config.json` 等）并平滑重载进程使策略生效。
-2. 如果你只是更新了 **IP 组的成员名单**（如：在手动 IP 组中删减了一个 IP，或者自动 IP 组定时聚合出了一批新的封禁 IP）：
-   * **不需要做任何发布操作！**
-   * Server 会在数据库更新后立即计算 IP 组全新的 Checksum 摘要。
-   * 控制面会通过 **WebSocket 长连接实时向所有在线的 Agent 广播** 变更的 IP 组成员，Agent 接收后会增量覆写到本地的运行时磁盘文件 `waf_ip_groups.json`。
-   * OpenResty Lua 引擎在处理新请求时，会在微秒级计算文件哈希，若发现 Checksum 变更则实时重载入内存字典（`ngx.shared`），**整个过程全程不需要 reload 任何 Nginx 服务，对线上高并发业务毫无影响**。
-   * 即使 WebSocket 连接意外中断，Agent 也会在每周期心跳中上报本地 Checksum，由 Server 差分补齐下发，确保万无一失。
-
----
-
-## WAF 判定逻辑 (过滤漏斗)
-
-当一个外部请求到达 OpenResty 数据面时，WAF 运行时引擎会以微秒级的极速开销进行如下判决流检测。只要判定出明确结果，即不再向下执行：
-
-```text
-       请求进入 access 阶段
-                 │
-                 ▼
-       获取当前请求绑定的所有规则组 (全局规则组 + 自定义规则组)
-                 │
-                 ▼
-      1. 匹配 IP 白名单 / 白名单 IP 组? ──────(是)─────► [ 放行 (ALLOW) ]
-                 │ (否)
-                 ▼
-      2. 匹配国家 / 省份地域白名单? ────────(是)─────► [ 放行 (ALLOW) ]
-                 │ (否)
-                 ▼
-      3. 匹配 IP 黑名单 / 黑名单 IP 组? ──────(是)─────► [ 拦截 (BLOCK) ] ──► 返回自定义状态码与HTML拦截页
-                 │ (否)
-                 ▼
-      4. 匹配国家 / 省份地域黑名单? ────────(是)─────► [ 拦截 (BLOCK) ] ──► 返回自定义状态码与HTML拦截页
-                 │ (否)
-                 ▼
-      5. 该站点是否启用了 PoW CC 防护?
-                 ├───(是)───► [ 校验 PoW Cookie ] ──(验证通过)──► [ 放行 (ALLOW) ]
-                 │                   │
-                 │                 (未通过)
-                 │                   ▼
-                 │             [ 渲染 PoW 挑战页 ] ──(计算正确)──► 写入 Cookie 并放行
-                 ▼
-      6. 未触发任何策略，属于正常业务流量 ───────────────► [ 放行 (ALLOW) ]
-```
-
----
-
-## 最佳实践与调优建议
-
-*   **白名单放行语义**：一旦某个生效规则组配置了 IP 白名单、白名单 IP 组或地域白名单，且请求命中了其中至少一条白名单规则，该请求将被直接放行，并优先绕过后续的黑名单与 PoW 检查；未命中的请求则会继续进行黑名单等后续防护校验。
-*   **白名单前置与保护**：在部署高强度黑名单或地域屏蔽前，建议首先创建一个「受信任 IP 组」，放入你团队的办公室出口 IP、本地开发 IP 以及可能访问你的第三方回调源站 IP（如微信、支付宝支付回调地址），并在规则组的**白名单**中优先引入。这可以有效防止误杀，确保信任的 IP 即使命中黑名单或 CC 限制也能无阻碍访问。
-*   **合理微调 PoW 难度**：人机 CC 挑战的哈希碰撞计算（`challenge_difficulty`）是一把双刃剑。
-    *   难度值 `3`：几乎瞬间完成计算，防 CC 强度低。
-    *   难度值 `4`：普通手机/低端浏览器在 100~300ms 内完成计算，防护性能良好。
-    *   难度值 `5`：需要 500ms~2s，防护性强，但低配端可能会感觉稍显卡顿。
-    *   难度值 `6` 及以上：计算量呈指数级上升，可能导致移动端用户浏览器 CPU 持续打满卡死。**因此强烈建议在生产环境选用 `4` 或 `5`**。
-*   **善用“测试规则”**：对于自动 IP 组，在点击保存之前务必点击 **「测试规则」**。通过分析当前窗口内被命中的 IP 列表，确认你的 Expr 表达式阈值（如请求数、404占比等）配置是否过宽或过紧，防止由于阈值配置不合理导致大面积误封正常用户。
-*   **分离静态与动态黑名单**：不要将需要长期封禁的静态恶意 IP 填入自动封禁组（因为自动聚合的名单随时会被新的执行窗口覆盖）。应该将确定的恶意 IP 录入到一个专门的「手动封禁 IP 组」中，并让规则组同时引用该手动组与自动组。
+架构、图校验和失败回滚细节见 [WAF 可编排规则设计](../design/waf-orchestration-design.md)。

docs/guide/zone-domain-migration.md

@@ -0,0 +1,52 @@
+# Zone 域名迁移与发布验收
+
+从旧版 `managed_domains` / 反代路由内嵌域名列迁移到 Zone + Zone 域名模型时，数据导入与表结构升级均由 **Server 启动时的 goose 自动迁移**完成，无需单独执行导入命令。
+
+## 升级时发生了什么
+
+启动（或滚动升级）包含 Zone 改造的 Server 版本时，**无需手动命令**，`migrator.Migrate()` 自动：
+
+1. 应用 goose SQL：创建 `of_zones` / `of_zone_domains`（若尚未存在）。
+2. **自动导入**旧路由域名列（及无路由域名时的 `of_managed_domains`）为 Zone / Zone 域名，并绑定 `proxy_route_id` / `cert_id`（公共后缀列表解析注册根域）。
+3. 继续 goose SQL：删除 `of_managed_domains` 与 `of_proxy_routes` 冗余域名/证书列。
+
+导入幂等：已存在的域名会跳过或补绑路由。
+
+**若历史数据无法解析（冲突域名、无效根域、证书不存在等），启动失败。** 修复数据或恢复备份后再次启动即可重试。
+
+## 建议操作
+
+### 1. 升级前备份
+
+```bash
+# PostgreSQL 示例
+pg_dump "$DATABASE_URL" > openflare-pre-zone-$(date +%Y%m%d).sql
+
+# 或复制备份卷 / 快照；SQLite 则复制 data 目录中的库文件
+```
+
+可选：在管理端记下当前**激活配置版本号**与 checksum，便于配置回滚对比。
+
+### 2. 升级并启动 Server
+
+部署新版本并启动即可。观察启动日志中的 goose 成功信息；若出现「迁移 Zone 失败（N 个冲突）」则按日志中的冲突项修复源数据后重启。
+
+### 3. 升级后检查
+
+1. 管理端 **网站** `/websites`：Zone 根域与域名计数是否合理。
+2. Zone 详情：域名、证书、关联路由 ID。
+3. **反代路由**：域名绑定来自 Zone 域名，而非旧手写字段。
+
+### 4. 配置预览与发布
+
+1. 在管理端查看配置差异 / 预览。
+2. **逐路由**核对：`server_name` 集合、证书路径、WAF Route ID、Pages 引用。
+3. **允许**旧快照 JSON 中路由上的冗余 `domain` / `domains` / `cert_ids` 消失。
+4. **不允许**数据面语义变化。
+5. 预览通过后发布；需要时在配置版本中激活升级前版本做配置回滚。数据库回退请使用升级前备份（Down 迁移不回填业务域名数据）。
+
+## 相关文档
+
+* [Zone 与域名资源设计](../design/zone-design.md)
+* [新建反代配置](./proxy-config.md)
+* [发布第一份配置](./first-site.md)

docs/plan/20260710-clickhouse-p0-p3-fix.md

@@ -0,0 +1,22 @@
+# ClickHouse P0–P3 修复计划
+
+> 状态: 已完成（已合并主工作区，`make code-check` 通过）  
+> 策略: 4 个互不干扰 worktree 并行，最后由主代理合并
+
+## 任务拆分
+
+| ID | Worktree 主题 | 范围 | 禁止改动 |
+|----|---------------|------|----------|
+| WT1 | P0 清理语义 C1 | cleanup maintenance / delete / tasks | chwriter、dashboard、DDL 新 MV |
+| WT2 | 写路径 C2+H1+H2+H3 | chwriter、batchwriter、risk_control、model store 分层、status 指标 | goose 迁移、dashboard 读逻辑 |
+| WT3 | 读路径 H4+H5 | 最新快照查询、metric/openresty 小时 MV + 读路径 | chwriter、cleanup |
+| WT4 | P3 打磨 | 连接池/async_insert、traffic hourly TTL、UV 语义 | model store 分层、cleanup |
+
+## 合并顺序
+
+1. WT1 → 2. WT2 → 3. WT3 → 4. WT4  
+（迁移文件时间戳已错开，changelog 由主代理统一写）
+
+## 验收
+
+各 worktree: 相关 `go test` + 可运行部分；合并后 `make code-check`。

docs/plan/20260712-zone-domain-refactor.md

@@ -0,0 +1,491 @@
+# Zone 与域名资源重构 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 以稳定 ID 的 Zone 管理入口和正规化 Zone 域名替代 `managed_domains` 及反代路由中的域名/证书冗余字段，同时保持配置发布后的 OpenResty 行为不变。
+
+**Architecture:** `of_zones` 管理可注册根域；`of_zone_domains` 是明确 FQDN、证书和反代路由之间的唯一关联来源。反代路由保留路由策略，配置快照在控制面联查 Zone 域名与证书后生成现有 OpenResty 配置格式。第一发布阶段保留旧列供可重复执行的历史数据导入读取；生产快照对比通过后才执行第二阶段清理。
+
+**Tech Stack:** Go 1.25、Gin、GORM、goose（PostgreSQL/SQLite）、`golang.org/x/net/publicsuffix`、Next.js App Router、TypeScript、TanStack Query、shadcn/ui。
+
+## Global Constraints
+
+* Zone URL 必须为 `/websites/:zoneId`，不得使用域名作为路由参数。
+* Zone 根域由 `publicsuffix.EffectiveTLDPlusOne` 解析；Zone 域名只接受明确 FQDN，拒绝 `*.`。
+* TLS 证书可含通配符 SAN；证书只能由 `of_zone_domains.cert_id` 指定，`of_proxy_routes` 不再保存证书字段。
+* `of_zone_domains.domain` 全局唯一；同一 Zone 域名至多绑定一条反代路由，路由可关联多个 Zone 的域名。
+* 不建立物理数据库外键；所有关联列必须建立显式索引。
+* 所有 HTTP 路由仅通过 `internal/router/v1/openflare/` 的管理端注册器委派；Handler 使用 `response.Abort*` 报错并补全 Swagger。
+* 不新增 DNS 记录管理、边缘函数、预览子域或多租户能力。
+* 每次 API 变更运行 `make swagger`；每个实现任务结束运行对应测试；完成前必须运行 `make code-check`。
+
+---
+
+## File Structure
+
+| 路径 | 职责 |
+| --- | --- |
+| `internal/db/migrator/goose/{postgres,sqlite}/202607120001_create_zone_domain_tables.sql` | 第一阶段 Zone/ZoneDomain DDL 与索引。 |
+| `internal/model/openflare_zone.go` | Zone、ZoneDomain 模型及数据访问。 |
+| `internal/apps/openflare/zone/{logics.go,routers.go,errs.go,legacy_import.go}` | Zone CRUD、概览、输入验证和历史导入。 |
+| `internal/cmd/migrate_zones.go` | 显式、可重复运行的历史 Zone 数据导入命令。 |
+| `internal/router/v1/openflare/register_zone.go` | `/api/v1/d/zones` 路由注册。 |
+| `internal/apps/openflare/proxy_route/*` | 以 `zone_domain_ids` 取代域名与证书输入。 |
+| `internal/apps/openflare/config_version/*`、`pkg/render/openresty/*` | 快照与 OpenResty 渲染改为使用 Zone 域名。 |
+| `frontend/lib/services/openflare/{zone.service.ts,types.ts,index.ts}` | Zone API 类型和服务。 |
+| `frontend/vitest.config.ts`、`frontend/tests/zone/*.test.tsx` | Zone 页面与域名选择器的最小前端测试运行环境。 |
+| `frontend/app/(main)/websites/*` | Zone 列表、`[zoneId]` 动态详情页和局部组件。 |
+| `frontend/app/(main)/proxy-routes/*` | Zone 域名选择器替换旧域名/证书编辑器。 |
+| `internal/db/migrator/goose/{postgres,sqlite}/202607130001_drop_legacy_route_domain_columns.sql` | 第二阶段删除旧表、列与索引。 |
+
+### Task 1: 第一阶段 Schema、模型与迁移测试
+
+**Files:**
+- Create: `internal/db/migrator/goose/postgres/202607120001_create_zone_domain_tables.sql`
+- Create: `internal/db/migrator/goose/sqlite/202607120001_create_zone_domain_tables.sql`
+- Create: `internal/model/openflare_zone.go`
+- Create: `internal/model/openflare_zone_test.go`
+- Modify: `internal/model/openflare_proxy_route.go`
+- Test: `internal/db/migrator/migrator_test.go`
+
+**Interfaces:**
+- Produces: `model.Zone`, `model.ZoneDomain`, `ListZoneDomainsByRouteID(ctx, routeID)`, `ReplaceZoneDomainRouteBindings(ctx, routeID, domainIDs)`.
+- Consumes: existing `model.ProxyRoute` and `model.TLSCertificate` IDs; no physical FK.
+
+- [x] **Step 1: 写失败的模型与迁移测试**
+
+```go
+func TestReplaceZoneDomainRouteBindingsRejectsForeignDomain(t *testing.T) {
+    // Create zones and domains, then assert a domain cannot be bound twice.
+}
+```
+
+Run: `go test ./internal/model ./internal/db/migrator -run 'Zone|Migrat' -count=1`
+
+Expected: FAIL，因为 Zone 模型和 goose 文件尚不存在。
+
+- [x] **Step 2: 新建双方言 DDL**
+
+```sql
+CREATE TABLE IF NOT EXISTS of_zones (
+  id BIGSERIAL PRIMARY KEY,
+  domain VARCHAR(255) NOT NULL,
+  remark VARCHAR(255) NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_of_zones_domain ON of_zones (domain);
+
+CREATE TABLE IF NOT EXISTS of_zone_domains (
+  id BIGSERIAL PRIMARY KEY,
+  zone_id BIGINT NOT NULL,
+  proxy_route_id BIGINT,
+  domain VARCHAR(255) NOT NULL,
+  cert_id BIGINT,
+  remark VARCHAR(255) NOT NULL DEFAULT '',
+  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+CREATE UNIQUE INDEX IF NOT EXISTS idx_of_zone_domains_domain ON of_zone_domains (domain);
+CREATE INDEX IF NOT EXISTS idx_of_zone_domains_zone_id ON of_zone_domains (zone_id);
+CREATE INDEX IF NOT EXISTS idx_of_zone_domains_proxy_route_id ON of_zone_domains (proxy_route_id);
+CREATE INDEX IF NOT EXISTS idx_of_zone_domains_cert_id ON of_zone_domains (cert_id);
+```
+
+SQLite 使用 `INTEGER PRIMARY KEY AUTOINCREMENT`、`DATETIME`，字段/索引语义完全对齐。此任务不得删除旧列或旧表。
+
+- [x] **Step 3: 实现模型和受事务保护的绑定替换**
+
+```go
+type Zone struct { ID uint; Domain string; Remark string; CreatedAt time.Time; UpdatedAt time.Time }
+type ZoneDomain struct { ID uint; ZoneID uint; ProxyRouteID *uint; Domain string; CertID *uint; Remark string; CreatedAt time.Time; UpdatedAt time.Time }
+
+func ReplaceZoneDomainRouteBindings(ctx context.Context, routeID uint, domainIDs []uint) error
+```
+
+实现先锁定/读取请求域名，拒绝已绑定到其他路由的记录，再把当前路由已绑定但不在 `domainIDs` 的记录置空，最后将请求记录写为 `routeID`；所有动作放在同一 `db.DB(ctx).Transaction` 内。
+
+- [x] **Step 4: 运行模型与迁移测试**
+
+Run: `go test ./internal/model ./internal/db/migrator -run 'Zone|Migrat' -count=1`
+
+Expected: PASS，空 SQLite 库可应用迁移，唯一域名和绑定排他性受保护。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add internal/db/migrator/goose internal/model
+git commit -m "feat(zone): add normalized zone domain schema"
+```
+
+### Task 2: Zone 领域逻辑、历史导入命令与管理 API
+
+**Files:**
+- Create: `internal/apps/openflare/zone/{logics.go,routers.go,errs.go,legacy_import.go,logics_test.go}`
+- Create: `internal/cmd/migrate_zones.go`
+- Create: `internal/router/v1/openflare/register_zone.go`
+- Modify: `internal/cmd/root.go`
+- Modify: `internal/router/v1/openflare/register_tls.go`
+- Test: `internal/apps/openflare/integration/security_test.go`
+
+**Interfaces:**
+- Produces: `zone.Create`, `zone.Update`, `zone.GetOverview`, `zone.ImportLegacy(ctx) (ImportReport, error)` and Zone REST handlers.
+- Consumes: Task 1 models; legacy `managed_domains` and proxy-route columns only inside `ImportLegacy`.
+
+- [x] **Step 1: 写失败的逻辑与 API 测试**
+
+```go
+func TestCreateZoneDomainRejectsWildcard(t *testing.T) { _, err := CreateDomain(ctx, zoneID, DomainInput{Domain: "*.example.com"}); require.EqualError(t, err, errDomainWildcardUnsupported) }
+func TestLegacyImportUsesEffectiveTLDPlusOne(t *testing.T) {
+    root, err := zoneRoot("api.example.co.uk")
+    require.NoError(t, err)
+    require.Equal(t, "example.co.uk", root)
+}
+```
+
+集成测试请求 `POST /api/v1/d/zones/`、`POST /api/v1/d/zones/:id/domains`，并断言错误响应使用 400 信封。
+
+- [x] **Step 2: 实现精确域名和 Zone 归属验证**
+
+```go
+func zoneRoot(domain string) (string, error) { return publicsuffix.EffectiveTLDPlusOne(strings.ToLower(strings.TrimSpace(domain))) }
+func CreateDomain(ctx context.Context, zoneID uint, input DomainInput) (*model.ZoneDomain, error)
+```
+
+拒绝空值、协议、路径和 `*`；要求 `zoneRoot(input.Domain) == zone.Domain`；若 `cert_id` 非空，验证 TLS 证书存在。Zone 根域创建也必须经 `EffectiveTLDPlusOne` 验证且输入等于结果。
+
+- [x] **Step 3: 实现显式导入命令**
+
+```go
+var migrateZonesCmd = &cobra.Command{Use: "migrate-zones", RunE: func(_ *cobra.Command, _ []string) error {
+    report, err := zone.ImportLegacy(context.Background())
+    return report.LogAndReturn(err)
+}}
+```
+
+导入以事务执行：用 `routeidentity.DecodeDomains(route.Domains, route.Domain)` 读取旧路由；按 `domain_cert_ids` 的同一索引写入 `zone_domains.cert_id`；只在无路由域名时导入旧 `managed_domains`。发现无效根域、通配符记录或全局域名冲突时回滚并输出全部冲突项。重复执行不得生成重复 Zone/ZoneDomain。
+
+- [x] **Step 4: 注册 API 并删除旧 managed-domain 路由**
+
+```go
+zoneGroup := apiGroup.Group("/zones")
+zoneGroup.Use(apiutil.AdminMiddlewares()...)
+zoneGroup.GET("/", zone.ListHandler)
+zoneGroup.POST("/", zone.CreateHandler)
+zoneGroup.GET("/:id/overview", zone.GetOverviewHandler)
+```
+
+把 `managed-domains` 路由块从 `register_tls.go` 移除；每个 Handler 使用 `apiutil.BindJSON` 和 `response.AbortBadRequest/AbortNotFound/AbortConflict`。
+
+- [x] **Step 5: 验证并 Commit**
+
+Run: `go test ./internal/apps/openflare/zone ./internal/apps/openflare/integration -count=1 && make swagger`
+
+Expected: PASS，Swagger 不再含 `/managed-domains` 且包含 `/zones`。
+
+```bash
+git add internal/apps/openflare/zone internal/cmd internal/router/v1/openflare docs
+git commit -m "feat(zone): add zone management api and legacy importer"
+```
+
+### Task 3: 反代路由改用 ZoneDomain 关联
+
+**Files:**
+- Modify: `internal/apps/openflare/proxy_route/{logics.go,helpers.go,build_helpers.go,routers.go,errs.go,logics_test.go}`
+- Modify: `internal/model/openflare_proxy_route.go`
+- Modify: `internal/apps/openflare/tls/logics.go`
+- Modify: `internal/apps/openflare/origin/logics.go`
+
+**Interfaces:**
+- Consumes: `zone_domain_ids []uint` and Task 1 binding API.
+- Produces: `proxy_route.Input{ZoneDomainIDs []uint}`, `proxy_route.View{ZoneDomains []ZoneDomainView}`.
+
+- [x] **Step 1: 写失败的路由逻辑测试**
+
+```go
+input := Input{SiteName: "api", ZoneDomainIDs: []uint{domainA.ID, domainB.ID}, EnableHTTPS: true}
+view, err := CreateProxyRoute(ctx, input)
+require.NoError(t, err)
+require.Equal(t, []uint{domainA.ID, domainB.ID}, view.ZoneDomainIDs)
+```
+
+同时覆盖：空 `zone_domain_ids`、重复 ID、其他路由已占用域名、HTTPS 域名无证书、证书 SAN 不覆盖。
+
+- [x] **Step 2: 删除路由输入/视图中的旧域名与证书字段**
+
+```go
+type ZoneDomainBindingInput struct {
+    ZoneDomainIDs []uint `json:"zone_domain_ids"`
+}
+type ZoneDomainView struct { ID uint `json:"id"`; ZoneID uint `json:"zone_id"`; Domain string `json:"domain"`; CertID *uint `json:"cert_id"` }
+```
+
+移除 `Input.Domain`、`Input.Domains`、`Input.CertID`、`Input.CertIDs`、`Input.DomainCertIDs` 及对应 View 字段；删除旧证书派生辅助函数与 `WebsiteService.match` 所需后端逻辑。
+
+- [x] **Step 3: 用关联记录验证并构建路由**
+
+在 `buildProxyRoute` 中读取所有 `ZoneDomainIDs`，对每个 HTTPS 域名调用现有 `validateCertificateCoverage`，再调用 `ReplaceZoneDomainRouteBindings`。更新/删除路由也必须在事务内同步解除关联。来源、证书删除检查和 Origin 路由摘要改从 `zone_domains` 查询域名/证书。
+
+- [x] **Step 4: 运行路由和 TLS 回归测试**
+
+Run: `go test ./internal/apps/openflare/proxy_route ./internal/apps/openflare/tls ./internal/apps/openflare/origin -count=1`
+
+Expected: PASS；任一证书已被 Zone 域名引用时，删除证书被拒绝。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add internal/apps/openflare/proxy_route internal/apps/openflare/tls internal/apps/openflare/origin internal/model
+git commit -m "refactor(proxy): bind routes through zone domains"
+```
+
+### Task 4: 配置快照、渲染与关联消费者
+
+**Files:**
+- Modify: `internal/apps/openflare/config_version/{snapshot.go,helpers.go,logics.go,logics_test.go,certificate_snapshot_test.go,pages_snapshot.go}`
+- Modify: `pkg/render/openresty/{types.go,render.go,render_route.go,render_test.go}`
+- Modify: `internal/apps/openflare/{flared/logics.go,uptimekuma/sync.go}`
+- Modify: `internal/apps/openflare/routeidentity/identity.go`
+
+**Interfaces:**
+- Produces: snapshot/render `Route{SiteName, Domains, DomainCertIDs}` built transiently from ZoneDomain rows; neither DB model nor API stores those fields.
+
+- [x] **Step 1: 写快照等价性失败测试**
+
+```go
+func TestBuildSnapshotReadsZoneDomainCertificates(t *testing.T) {
+    // Two explicit ZoneDomains with different certs must render two TLS server blocks.
+}
+```
+
+加入 Pages、Tunnel、WAF 绑定测试，断言 Route ID 与 `site_name` 未改变。
+
+- [x] **Step 2: 在快照边界联查并生成临时渲染字段**
+
+```go
+domains, err := model.ListZoneDomainsByRouteID(ctx, route.ID)
+snapshotRoute.Domains = maps.Values(domainNames)
+snapshotRoute.DomainCertIDs = certIDsInDomainOrder(domains)
+```
+
+`pkg/render/openresty.Route` 可继续保留 `Domains` 与 `DomainCertIDs`，因为它是不可变配置快照的渲染输入；移除其中持久化主域/证书回退逻辑，所有错误消息改用 `SiteName`。
+
+- [x] **Step 3: 移除旧字段回退路径**
+
+删除 `routeidentity.DecodeDomains` 对持久化 `route.Domain` 的依赖；Flared、Uptime Kuma、配置 diff、WAF 文档和 Pages 错误信息都从 snapshot/ZoneDomain 查询的明确域名获取显示文本。
+
+- [x] **Step 4: 运行数据面测试**
+
+Run: `go test ./internal/apps/openflare/config_version ./pkg/render/openresty ./internal/apps/openflare/flared ./internal/apps/openflare/uptimekuma -count=1`
+
+Expected: PASS；迁移后的路由产生的 `server_name`、证书支持文件和 WAF RouteID 绑定与迁移前一致。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add internal/apps/openflare/config_version internal/apps/openflare/flared internal/apps/openflare/uptimekuma internal/apps/openflare/routeidentity pkg/render/openresty
+git commit -m "refactor(config): render routes from zone domains"
+```
+
+### Task 5: Zone 前端服务与 ID 动态页面
+
+**Files:**
+- Create: `frontend/lib/services/openflare/zone.service.ts`
+- Create: `frontend/vitest.config.ts`
+- Create: `frontend/tests/zone/{websites-page.test.tsx,zone-page.test.tsx}`
+- Modify: `frontend/lib/services/openflare/{types.ts,index.ts}`
+- Modify: `frontend/lib/services/index.ts`
+- Modify: `frontend/app/(main)/websites/page.tsx`
+- Create: `frontend/app/(main)/websites/[zoneId]/page.tsx`
+- Create: `frontend/app/(main)/websites/[zoneId]/components/{zone-overview.tsx,zone-domains-table.tsx,zone-route-summary.tsx,zone-editor-dialog.tsx,zone-domain-dialog.tsx}`
+- Delete: `frontend/app/(main)/websites/detail/page.tsx`
+- Delete: `frontend/app/(main)/websites/detail/page-client.tsx`
+- Delete: legacy Website/managed-domain-only components after imports are removed.
+
+**Interfaces:**
+- Produces: `ZoneService.list/getOverview/create/update/delete`, `ZoneDomainService.create/update/delete` and `ZoneOverview` TypeScript types.
+
+- [x] **Step 1: 写服务与页面行为测试**
+
+先安装仅用于本次页面测试的开发依赖：
+
+```bash
+cd frontend && pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom
+```
+
+```ts
+expect(ZoneService.getOverview).toHaveBeenCalledWith(42)
+expect(screen.getByRole('heading', {name: 'example.com'})).toBeVisible()
+```
+
+覆盖 `/websites/42` 的加载、404、空域名、搜索列表和从列表点击 ID 链接。
+
+- [x] **Step 2: 实现类型化服务与查询键**
+
+```ts
+export interface ZoneDomainItem { id: number; zone_id: number; proxy_route_id: number | null; domain: string; cert_id: number | null; remark: string }
+export class ZoneService extends OpenFlareBaseService { protected static override basePath = '/api/v1/d/zones' }
+export const zoneQueryKey = ['openflare', 'zones'] as const
+```
+
+所有 React Query 回调使用箭头函数，避免静态 service `this` 丢失。
+
+- [x] **Step 3: 用 Next 动态段实现 Zone 详情**
+
+```tsx
+export default async function ZonePage({params}: PageProps<'/websites/[zoneId]'>) {
+  const {zoneId} = await params
+  return <ZonePageClient zoneId={Number(zoneId)} />
+}
+```
+
+遵循本地 Next 文档：动态 `params` 是 Promise；无效或非正整数 ID 显示既有 `EmptyStateWithBorder`，不把域名写入 URL。主页面只维护页面骨架和 Tabs，具体 Tab 放入同目录组件。
+
+- [x] **Step 4: 实现列表和详情交互**
+
+列表仅渲染 Zone 根域及计数；详情使用概览、域名、路由、证书、设置 Tabs。域名弹窗拒绝 `*.`，但证书选择器不限制其 SAN。删除 Zone/域名使用确认对话框和服务端错误文案。
+
+- [x] **Step 5: 验证并 Commit**
+
+Run: `cd frontend && pnpm exec vitest run && pnpm lint`
+
+Expected: PASS。
+
+```bash
+git add frontend/lib/services frontend/app/'(main)'/websites
+git commit -m "feat(web): add zone-based website management"
+```
+
+### Task 6: 反代路由前端切换到 Zone 域名选择器
+
+**Files:**
+- Create: `frontend/app/(main)/proxy-routes/components/zone-domain-selector.tsx`
+- Create: `frontend/tests/zone/zone-domain-selector.test.tsx`
+- Modify: `frontend/app/(main)/proxy-routes/{components/proxy-route-create-sheet.tsx,components/helpers.ts,page-client.tsx}`
+- Modify: `frontend/app/(main)/proxy-routes/detail/{helpers.ts,page-client.tsx,components/domain-section.tsx}`
+- Delete: `frontend/app/(main)/proxy-routes/detail/components/domain-list-input.tsx`
+- Modify: `frontend/lib/services/openflare/types.ts`
+
+**Interfaces:**
+- Consumes: `ZoneDomainItem[]` and route `zone_domain_ids: number[]`.
+- Produces: selector values with explicit domain/Zone/证书信息；不发送任何旧域名或证书字段。
+
+- [x] **Step 1: 写失败的选择器测试**
+
+```tsx
+render(<ZoneDomainSelector value={[7]} onChange={onChange} domains={[apiDomain]} />)
+expect(screen.getByText('api.example.com')).toBeVisible()
+expect(onChange).toHaveBeenCalledWith([7])
+```
+
+覆盖搜索、跨 Zone 多选、已被其他路由占用的禁用项和 HTTPS 缺少证书的表单错误。
+
+- [x] **Step 2: 移除旧前端负载与自动匹配**
+
+从 `ProxyRouteItem`/`ProxyRouteMutationPayload` 删除 `domain`、`domains`、`primary_domain`、`cert_id`、`cert_ids`、`domain_cert_ids`；删除 `WebsiteService.match` 及 `DomainListInput` 自动填证书交互。
+
+- [x] **Step 3: 实现 Zone 域名选择和保存负载**
+
+```ts
+mutationFn: (payload) => ProxyRouteService.update(route.id, {
+  ...payload,
+  zone_domain_ids: selectedDomainIDs,
+})
+```
+
+展示每个选择项的 FQDN、所属 Zone 与证书；路由详情的“域名”区只编辑关联关系，证书链接跳转 Zone 详情而非路由内编辑。
+
+- [x] **Step 4: 运行前端类型和交互测试**
+
+Run: `cd frontend && pnpm exec tsc --noEmit`
+
+Expected: PASS；不存在旧持久化域名/证书字段的 TypeScript 引用。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add frontend/app/'(main)'/proxy-routes frontend/lib/services/openflare/types.ts
+git commit -m "refactor(web): select route domains from zones"
+```
+
+### Task 7: 第一发布阶段验证、文档与发布前数据检查
+
+**Files:**
+- Modify: `docs/design/zone-design.md`
+- Modify: `docs/changelog/index.md`
+- Modify: generated `docs/{docs.go,swagger.json,swagger.yaml}`
+- Create: `docs/guide/zone-domain-migration.md`
+
+- [x] **Step 1: 为导入命令写可操作迁移指南**
+
+文档写明备份、执行 `wavelet migrate-zones`、读取导入报告、发布预览、比较 `server_name`/证书支持文件、发布激活和回滚步骤；不允许在报告有冲突时继续。
+
+- [x] **Step 2: 生成 Swagger 和更新未发布变更**
+
+Run: `make swagger`
+
+在 `[Unreleased]` 记录 Zone 管理、反代路由域名正规化和移除 managed-domain API。
+
+- [x] **Step 3: 运行全量质量门禁**
+
+Run: `go test ./... && make code-check`
+
+Expected: PASS。
+
+- [x] **Step 4: 做快照等价性验收**
+
+在升级前导出活动版本，在导入后生成预览；逐个比较所有路由的明确 `server_name` 集合、证书路径、WAF RouteID 绑定与 Pages 部署引用。只允许旧快照的域名/证书冗余 JSON 消失，不允许数据面语义变化。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add docs
+git commit -m "docs(zone): add migration and release verification guide"
+```
+
+### Task 8: 第二发布阶段——删除旧表和冗余列
+
+**Precondition:** 已在生产环境完成 Task 7 的导入、预览对比和至少一次发布/回滚验证；`migrate-zones` 报告无冲突。
+
+**Files:**
+- Create: `internal/db/migrator/goose/postgres/202607130001_drop_legacy_route_domain_columns.sql`
+- Create: `internal/db/migrator/goose/sqlite/202607130001_drop_legacy_route_domain_columns.sql`
+- Delete: `internal/model/openflare_managed_domain.go`
+- Delete: `internal/apps/openflare/tls/managed_domain.go`
+- Delete: `internal/apps/openflare/tls/helpers.go` 中仅用于旧路由证书数组的函数
+- Modify: legacy迁移相关测试、模型测试与 `docs/design/zone-design.md`
+
+- [x] **Step 1: 写空库与升级库清理失败测试**
+
+```go
+func TestLegacyRouteColumnsAreAbsentAfterCleanup(t *testing.T) {
+    require.False(t, db.DB(ctx).Migrator().HasColumn(&model.ProxyRoute{}, "domain"))
+}
+```
+
+- [x] **Step 2: 编写双方言清理 DDL**
+
+PostgreSQL 删除旧唯一索引和 `domain`、`domains`、`cert_id`、`cert_ids`、`domain_cert_ids`，再删除 `of_managed_domains`；SQLite 使用重建 `of_proxy_routes` 表的迁移方式保留所有非旧字段与索引。Down 仅在开发数据库恢复旧结构，不回填历史数据。
+
+- [x] **Step 3: 删除旧读取代码与测试 fixture**
+
+删除所有 `route.Domain`、`route.Domains`、`route.CertID`、`route.CertIDs`、`route.DomainCertIDs` 的持久化引用；让编译器、Uptime Kuma、Flared、来源摘要及 API 只使用 ZoneDomain 查询结果。
+
+- [x] **Step 4: 验证升级和完整回归**
+
+Run: `go test ./internal/db/migrator ./internal/model ./internal/apps/openflare/... ./pkg/render/openresty -count=1 && make code-check`
+
+Expected: PASS；全仓搜索不再发现旧 `ManagedDomain` 业务代码、`ProxyRoute` 持久化字段或管理端 API；渲染快照中的临时 `DomainCertIDs` 类型允许保留。
+
+- [x] **Step 5: Commit**
+
+```bash
+git add internal/db/migrator internal/model internal/apps frontend docs
+git commit -m "refactor(zone): remove legacy route domain storage"
+```
+
+## Plan Self-Review
+
+* Spec coverage: Tasks 1–4 交付正规化数据模型、API、迁移与数据面；Tasks 5–6 交付 ID 路由和 Zone 交互；Tasks 7–8 覆盖质量门禁与旧表清理。
+* Placeholder scan: 无待定标记或未定义的实现步骤；所有删除动作在明确的生产验证前置条件后执行。
+* Type consistency: 路由写入统一使用 `zone_domain_ids`，持久化关系统一为 `ZoneDomain.ProxyRouteID`，渲染边界仅使用临时 `Domains`/`DomainCertIDs`。

docs/plan/20260713-waf-orchestration.md

@@ -0,0 +1,639 @@
+# WAF 可编排规则实现计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 将固定顺序的 WAF 规则组重构为可用 React Flow 编辑、发布时编译、OpenResty 内存执行的有序 DAG 规则系统。
+
+**Architecture:** 控制面以带修订号的版本化 JSON 保存整张编辑态图，Server 保存与发布时执行同一套强校验并编译为精简运行态 DAG。规则仅随配置发布和 OpenResty reload 加载一次；动态 IP 组由协调 Worker 每 5 秒检查 checksum，变化时更新共享快照和各 Worker 本地内存对象。
+
+**Tech Stack:** Go 1.25、Gin、GORM、goose、PostgreSQL/SQLite、OpenResty Lua、Next.js 16 App Router、React 19、TypeScript、`@xyflow/react`、TanStack Query、shadcn/ui、Vitest。
+
+## 实现状态（2026-07-13）
+
+Tasks 1–11 已实现，包含三段数据库迁移、图模型与编译器、规则 API、发布快照、OpenResty 内存执行器、IP 组协调刷新、React Flow 编辑器、有序绑定、GeoLite2 City/Country 支持以及中文文档与 Swagger 更新。React Flow 画布使用本地受控节点状态处理拖动，并支持显式或键盘删除普通节点与连线。Country 与 City MMDB 均随 Agent 内嵌，缺失文件在启动时从程序内初始化，网络仅用于后续周期更新。地域属性栏使用完整国家与 ISO 3166-2 一级行政区数据，国家同时展示中文名称与代码，行政区支持按名称或代码搜索。发布器保证空规则绑定编码为 `[]`，Lua 运行时兼容旧快照中的 `null` 数组，避免未启用或空绑定规则导致请求 500。PoW 节点通过共享内存暂存配置，并以 `ngx.exec` 显式参数把配置键传入内部挑战处理器，避免内部重定向丢失请求上下文后误报节点未执行。
+
+当前工作区已完成 `go test ./...`、前端全量 Vitest（56 项）、`make swagger`、`make code-check` 与 `git diff --check` 验证。Next.js 生产构建在本机持续停留于 Turbopack 的 `Creating an optimized production build ...`，未返回编译错误或成功状态，故不计为通过。
+
+## Global Constraints
+
+- 每张图恰好一个 `start` 和一个 `allow`；`block` 可多个；图必须无环、无悬空、无不可达节点，所有路径必须抵达 `allow` 或 `block`。
+- `ip_match` 与 `geo_match` 只输出 `true`/`false`，分别表示匹配与未匹配；`pow` 只输出 `next`。
+- 全局规则固定前置；路由自定义规则按绑定 `sequence` 升序执行；当前规则 `allow` 后继续下一条，`block` 立即终止。
+- 规则运行态 JSON 仅在 OpenResty reload 后由 Worker 加载一次；请求路径禁止文件 I/O、checksum 和 JSON 解码。
+- IP 组请求路径始终读取 Worker 本地对象；整个实例每 5 秒最多一个 Worker 检查 checksum。
+- 迁移只保留规则名称、全局标记、启用状态和绑定关系，旧策略统一重置为 `开始 → 通过`。
+- 所有 HTTP 路由仅在 `internal/router/router.go` 的既有分发体系中通过 `internal/router/v1/openflare/register_waf.go` 注册；API 失败使用 `response.Abort*`。
+- API Handler 变化后运行 `make swagger`；代码完成后运行 `make code-check`；代码变更写入 `docs/changelog/index.md` 的 `[Unreleased]`。
+- 前端不得删除 `frontend/node_modules`；使用 shadcn variant 与全局 CSS 变量，页面根容器保持 `w-full py-6 px-1`。
+- 实现前阅读 `.agent/skills/database-migration/SKILL.md`、`.agent/skills/new-api/SKILL.md`、`.agent/skills/shadcn/SKILL.md` 以及 `frontend/node_modules/next/dist/docs/01-app/03-api-reference/03-file-conventions/page.md` 等匹配的 Next.js 本地文档。
+
+---
+
+## 1. 目标与背景
+
+当前 `OpenFlareWAFRuleGroup` 把 IP/地域黑白名单、PoW 与阻止响应平铺为固定字段，Lua 按硬编码顺序判断，无法表达用户自定义分支。本次交付包含图模型、强校验、API、迁移、发布编译、Lua DAG 执行、有序绑定、IP 组五秒内存刷新和 React Flow 编辑器；不包含循环、脚本节点、表达式节点、子图和跨规则跳转。
+
+## 2. 数据与控制流
+
+```mermaid
+flowchart LR
+  UI[React Flow 编辑态图] -->|revision + graph| API[Server 校验与保存]
+  API --> DB[(规则 graph JSON)]
+  DB --> PUB[发布编译器]
+  PUB --> SNAP[运行态 DAG 快照]
+  SNAP --> AGENT[Agent 原子落盘]
+  AGENT -->|reload| LUA[OpenResty Worker 内存]
+  IPS[IP 组异步更新] -->|JSON 后 checksum| TIMER[5 秒协调定时器]
+  TIMER --> SHM[ngx.shared 原始快照]
+  SHM --> LUA
+```
+
+## 3. 文件结构与职责
+
+- `internal/apps/openflare/waf/graph_types.go`：编辑态图、节点配置、运行态图和默认图类型。
+- `internal/apps/openflare/waf/graph_validate.go`：结构、端口、配置、引用、可达性和终止性校验。
+- `internal/apps/openflare/waf/graph_compile.go`：删除 UI 字段、编译索引化 DAG、收集 IP 组引用。
+- `internal/apps/openflare/waf/rule_logics.go`：规则元数据、修订保存和有序绑定逻辑；从现有过大的 `logics.go` 中抽离规则职责。
+- `internal/apps/openflare/waf/rule_routers.go`：规则 API Handler 与 Swagger；IP 组 Handler 留在现有文件或后续独立拆分。
+- `internal/apps/agent/nginx/waf_assets.go`：只负责嵌入 Lua 文件；实际 Lua 拆到 `internal/apps/agent/nginx/waf_runtime.lua` 与 `waf_ip_groups.lua` 并使用 `go:embed`，避免继续膨胀 Go 字符串。
+- `frontend/app/(main)/waf/page.tsx`：规则/IP 组列表和仅名称创建流程。
+- `frontend/app/(main)/waf/rules/editor/page.tsx`：静态可导出的编辑器路由入口，通过查询参数读取规则 ID，避免 Next 静态导出的动态参数限制。
+- `frontend/app/(main)/waf/rules/editor/components/`：画布、节点、节点库、属性栏和校验提示，单文件保持低于 600 行。
+
+---
+
+### Task 1: 数据库迁移与持久化模型
+
+**Files:**
+- Create: `internal/db/migrator/goose/postgres/202607150001_orchestrate_waf_rules.sql`
+- Create: `internal/db/migrator/goose/sqlite/202607150001_orchestrate_waf_rules.sql`
+- Create: `internal/db/migrator/goose/postgres/202607150002_reset_waf_rule_graphs.sql`
+- Create: `internal/db/migrator/goose/sqlite/202607150002_reset_waf_rule_graphs.sql`
+- Modify: `internal/model/openflare_waf.go`
+- Create: `internal/model/openflare_waf_graph_test.go`
+
+**Interfaces:**
+- Produces: `Graph string`, `Revision uint64`, `Sequence int`；`UpdateOpenFlareWAFRuleGraph(ctx, id, revision, graph) (uint64, error)`；绑定查询按 `sequence, id` 排序。
+- Consumes: 现有 `OpenFlareWAFRuleGroup` 与 `OpenFlareWAFRuleGroupBinding`。
+
+- [ ] **Step 1: 阅读数据库迁移 Skill 并写迁移失败测试**
+
+测试建立旧 Schema、插入两个规则和无序绑定、执行迁移后断言图统一为默认图、`revision = 1`、绑定顺序稳定。测试核心断言：
+
+```go
+require.JSONEq(t, `{"schema_version":1,"nodes":[{"id":"start","type":"start","position":{"x":0,"y":0},"config":{}},{"id":"allow","type":"allow","position":{"x":320,"y":0},"config":{}}],"edges":[{"id":"start-allow","source":"start","source_handle":"next","target":"allow"}]}`, group.Graph)
+assert.Equal(t, uint64(1), group.Revision)
+assert.Equal(t, []int{0, 1}, []int{bindings[0].Sequence, bindings[1].Sequence})
+```
+
+- [ ] **Step 2: 运行模型测试确认失败**
+
+Run: `go test ./internal/model -run 'TestOpenFlareWAFGraph|TestReplaceOpenFlareWAFRuleGroupBindings' -count=1`
+
+Expected: FAIL，缺少新字段或迁移列。
+
+- [ ] **Step 3: 编写 PostgreSQL 与 SQLite goose 迁移**
+
+`202607150001` 只执行 DDL：两端都增加 `graph TEXT NOT NULL`、`revision BIGINT/INTEGER NOT NULL DEFAULT 1`、`sequence INTEGER NOT NULL DEFAULT 0`。`202607150002` 只执行 DML：用确定性的 `id` 顺序为每个 `proxy_route_id` 回填 sequence，并将所有 graph 重置为同一默认 JSON。Down 分别恢复数据语义与旧列结构；不要创建物理外键，禁止把 DDL 与 DML 放入同一个迁移文件。
+
+- [ ] **Step 4: 实现乐观锁与有序绑定模型方法**
+
+```go
+var ErrWAFRuleRevisionConflict = errors.New("waf rule revision conflict")
+
+func UpdateOpenFlareWAFRuleGraph(ctx context.Context, id uint, revision uint64, graph string) (uint64, error) {
+    result := db.DB(ctx).Model(&OpenFlareWAFRuleGroup{}).
+        Where("id = ? AND revision = ?", id, revision).
+        Updates(map[string]any{"graph": graph, "revision": gorm.Expr("revision + 1")})
+    if result.Error != nil { return 0, result.Error }
+    if result.RowsAffected != 1 { return 0, ErrWAFRuleRevisionConflict }
+    return revision + 1, nil
+}
+```
+
+绑定替换在事务中按输入下标写 `Sequence: index`；查询显式 `Order("sequence asc").Order("id asc")`。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `go test ./internal/model ./internal/db/migrator/... -count=1`
+
+Expected: PASS。
+
+Commit: `feat(waf): add graph persistence and binding order`
+
+---
+
+### Task 2: 图类型、默认图和强校验器
+
+**Files:**
+- Create: `internal/apps/openflare/waf/graph_types.go`
+- Create: `internal/apps/openflare/waf/graph_validate.go`
+- Create: `internal/apps/openflare/waf/graph_validate_test.go`
+- Modify: `internal/apps/openflare/waf/errs.go`
+
+**Interfaces:**
+- Produces: `RuleGraph`, `RuleNode`, `RuleEdge`, `DefaultRuleGraph() RuleGraph`, `ValidateRuleGraph(ctx context.Context, graph RuleGraph, ipGroupExists func(context.Context, uint) (bool, error)) error`。
+- Consumes: Task 1 的 JSON 持久化字段。
+
+- [ ] **Step 1: 写表驱动失败测试**
+
+覆盖合法默认图、重复 start/allow、环、不可达节点、悬空端口、错误 handle、同 handle 多目标、无终止路径、未知类型、无效 IP/CIDR、缺失 IP 组、非法国家/地区、PoW 范围和超限图。
+
+```go
+tests := []struct{name string; mutate func(*RuleGraph); want string}{
+    {"cycle", addCycle, "规则图不能包含循环"},
+    {"missing false edge", removeFalseEdge, "节点 match-1 的 false 出口未连接"},
+    {"unreachable", addUnreachableNode, "节点 orphan 无法从开始节点到达"},
+}
+```
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/openflare/waf -run TestValidateRuleGraph -count=1`
+
+Expected: FAIL，类型和校验函数不存在。
+
+- [ ] **Step 3: 定义带判别联合的图类型**
+
+```go
+type RuleNodeType string
+const (
+    RuleNodeStart RuleNodeType = "start"
+    RuleNodeAllow RuleNodeType = "allow"
+    RuleNodeBlock RuleNodeType = "block"
+    RuleNodeIPMatch RuleNodeType = "ip_match"
+    RuleNodeGeoMatch RuleNodeType = "geo_match"
+    RuleNodePoW RuleNodeType = "pow"
+)
+type RuleGraph struct { SchemaVersion int `json:"schema_version"`; Nodes []RuleNode `json:"nodes"`; Edges []RuleEdge `json:"edges"` }
+type RuleEdge struct { ID, Source, SourceHandle, Target string }
+```
+
+`RuleNode.Config` 先用 `json.RawMessage` 解码到明确的 `IPMatchConfig`、`GeoMatchConfig`、`PoWNodeConfig`、`BlockNodeConfig`，禁止透传未知字段。
+
+- [ ] **Step 4: 实现结构和 DFS/Kahn 校验**
+
+先检查大小、ID、类型、端口和配置，再用 Kahn 检测环，用从 start 的 DFS 检测可达性，用反向图从所有终止节点遍历检测终止性。错误文案携带节点/边 ID，供前端定位。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `go test ./internal/apps/openflare/waf -run 'Test(DefaultRuleGraph|ValidateRuleGraph)' -count=1`
+
+Expected: PASS。
+
+Commit: `feat(waf): validate composable rule graphs`
+
+---
+
+### Task 3: 运行态图编译器
+
+**Files:**
+- Create: `internal/apps/openflare/waf/graph_compile.go`
+- Create: `internal/apps/openflare/waf/graph_compile_test.go`
+
+**Interfaces:**
+- Produces: `CompileRuleGraph(graph RuleGraph) (RuntimeRuleGraph, error)`、`ReferencedIPGroupIDs(graph RuleGraph) []uint`。
+- Consumes: Task 2 的已校验图类型。
+
+- [ ] **Step 1: 写编译快照测试**
+
+断言位置和显示名不进入 JSON、节点通过 ID map O(1) 查找、出口按 handle 编译、IP 组 ID 去重排序。
+
+```go
+compiled, err := CompileRuleGraph(graph)
+require.NoError(t, err)
+assert.Equal(t, "start", compiled.Entry)
+assert.Equal(t, "allow", compiled.Nodes["match"].Next["true"])
+assert.Equal(t, []uint{2, 7}, ReferencedIPGroupIDs(graph))
+```
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/openflare/waf -run 'TestCompileRuleGraph|TestReferencedIPGroupIDs' -count=1`
+
+Expected: FAIL，编译接口不存在。
+
+- [ ] **Step 3: 实现确定性编译**
+
+输出结构只保留 `entry`、按节点 ID 索引的类型化运行配置和 handle→target 映射；序列化前对可排序切片排序，确保相同图生成相同快照和 checksum。
+
+- [ ] **Step 4: 运行测试并提交**
+
+Run: `go test ./internal/apps/openflare/waf -run 'TestCompileRuleGraph|TestReferencedIPGroupIDs' -count=1`
+
+Expected: PASS。
+
+Commit: `feat(waf): compile rule graphs for runtime`
+
+---
+
+### Task 4: 规则 API、修订冲突与有序绑定
+
+**Files:**
+- Create: `internal/apps/openflare/waf/rule_logics.go`
+- Create: `internal/apps/openflare/waf/rule_routers.go`
+- Create: `internal/apps/openflare/waf/rule_logics_test.go`
+- Modify: `internal/apps/openflare/waf/logics.go`
+- Modify: `internal/apps/openflare/waf/routers.go`
+- Modify: `internal/router/v1/openflare/register_waf.go`
+
+**Interfaces:**
+- Produces: `CreateRuleInput{Name string}`、`SaveRuleGraphInput{Revision uint64; Graph RuleGraph}`、`UpdateRuleMetaInput{Name string; Enabled bool}`；创建、详情、元数据、图保存、删除和有序绑定 API。
+- Consumes: Tasks 1–3 的模型、默认图和校验器。
+
+- [ ] **Step 1: 阅读 new-api Skill，写逻辑与 Handler 失败测试**
+
+覆盖只传名称创建默认图、空名 400、图非法 400、revision 冲突 409、绑定顺序往返不变、全局规则不能被路由绑定排序覆盖。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/openflare/waf ./internal/router/v1/openflare -run 'Test(CreateRule|SaveRuleGraph|ReplaceSiteRuleGroups)' -count=1`
+
+Expected: FAIL，API 输入与路由尚未实现。
+
+- [ ] **Step 3: 实现 logic 与安全错误映射**
+
+```go
+func SaveRuleGraph(ctx context.Context, id uint, input SaveRuleGraphInput) (*RuleView, error) {
+    if err := ValidateRuleGraph(ctx, input.Graph, ipGroupExists); err != nil { return nil, err }
+    raw, err := json.Marshal(input.Graph)
+    if err != nil { return nil, err }
+    if _, err = model.UpdateOpenFlareWAFRuleGraph(ctx, id, input.Revision, string(raw)); err != nil { return nil, err }
+    return GetRule(ctx, id)
+}
+```
+
+数据库/编码错误用 `pkg/logger` 记录后映射 `AbortInternal`；校验错误用 `AbortBadRequest`；revision 冲突用 `AbortConflict`。
+
+- [ ] **Step 4: 注册路由并补全 Swagger**
+
+保留 `/rule-groups` 路径以减少前端与兼容面变化，但将创建 payload 改为仅名称，新增 `POST /rule-groups/:id/graph` 与 `POST /rule-groups/:id/meta`。所有 `@Failure 400/404/409/500` 与统一 response envelope 完整声明。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `go test ./internal/apps/openflare/waf ./internal/router/v1/openflare -count=1`
+
+Expected: PASS。
+
+Commit: `feat(api): expose orchestrated waf rules`
+
+---
+
+### Task 5: 发布快照与规则顺序
+
+**Files:**
+- Modify: `internal/apps/openflare/config_version/snapshot.go`
+- Modify: `internal/apps/openflare/config_version/logics_test.go`
+- Create: `internal/apps/openflare/config_version/waf_graph_snapshot_test.go`
+
+**Interfaces:**
+- Produces: 发布快照中的 `rule_groups[].graph` 运行态 DAG、按 sequence 排序的 `bindings[].rule_group_ids`、图引用 IP 组集合。
+- Consumes: Task 3 编译器与 Task 1 有序绑定。
+
+- [ ] **Step 1: 写失败测试**
+
+建立全局规则和两个自定义图，绑定顺序 `[customB, customA]`，断言快照保持该顺序、运行图无 position、只包含图引用的 IP 组；非法启用图阻止预览/发布。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/openflare/config_version -run 'TestWAFGraphSnapshot|TestBuildSnapshotRejectsInvalidWAFGraph' -count=1`
+
+Expected: FAIL，快照仍输出旧固定字段并按 ID 排序。
+
+- [ ] **Step 3: 替换固定字段快照编译**
+
+删除 `snapshotWAFRuleGroup` 的旧黑白名单/PoW 字段，加入 `Graph waf.RuntimeRuleGraph`；`buildSnapshotWAFIPGroups` 从所有编辑图的 `ReferencedIPGroupIDs` 聚合；绑定不再按 group ID 排序。
+
+- [ ] **Step 4: 运行测试并提交**
+
+Run: `go test ./internal/apps/openflare/config_version ./internal/apps/openflare/integration -count=1`
+
+Expected: PASS。
+
+Commit: `feat(waf): publish ordered runtime graphs`
+
+---
+
+### Task 6: OpenResty 内存 DAG 执行器
+
+**Files:**
+- Create: `internal/apps/agent/nginx/waf_runtime.lua`
+- Create: `internal/apps/agent/nginx/waf_runtime_spec.lua`
+- Modify: `internal/apps/agent/nginx/waf_assets.go`
+- Modify: `internal/apps/agent/nginx/waf_assets_test.go`
+- Modify: `internal/apps/agent/nginx/manager.go`
+- Modify: `internal/apps/agent/nginx/manager_test.go`
+- Modify: `internal/apps/agent/nginx/pow_assets.go`
+
+**Interfaces:**
+- Produces: `require("waf.runtime").check()`，模块加载时读取一次规则配置，请求时执行内存 DAG。
+- Consumes: Task 5 的运行态快照；现有 PoW challenge/session 代码。
+
+- [ ] **Step 1: 写 Lua 执行器失败测试**
+
+用 stub `ngx` 覆盖 IP true/false、地域 true/false、PoW 接管/完成、多个 block 响应、全局前置、自定义顺序、未知节点 fail-closed、请求期间 `io.open` 调用次数为 0。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/agent/nginx -run 'TestWAFRuntime' -count=1`
+
+Expected: FAIL，运行时仍为固定链且每次请求读取配置。
+
+- [ ] **Step 3: 将规则加载移到 Lua 模块初始化**
+
+```lua
+local rules_config = assert(load_json_once(runtime_dir .. "/waf_config.json"))
+
+function _M.check()
+  local rules = active_rules_for_site(rules_config, ngx.var.openflare_waf_site or "")
+  for _, rule in ipairs(rules) do
+    local decision = execute_graph(rule.graph)
+    if decision.kind == "block" then return render_block(decision.config) end
+  end
+end
+```
+
+在 `manager.go` 生成的 `http` 块中显式加入 `init_worker_by_lua_block { require("waf.runtime").init() }`，使新 Worker 在 reload 启动阶段完成读取与解析，而不是推迟到首个请求。模块缓存使每个 Worker 只解析一次；执行器设置最大步数为节点数，任何损坏图都记录限频错误并返回阻止响应。
+
+- [ ] **Step 4: 将 PoW 变为节点执行接口**
+
+抽取现有 PoW runtime 为 `pow.evaluate(config)`：完成返回 `true`，未完成直接输出/重定向挑战并返回接管标记。移除“按站点选择第一个 pow_enabled 规则”的旧扫描逻辑。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `go test ./internal/apps/agent/nginx ./internal/apps/agent/sync -count=1`
+
+Expected: PASS。
+
+Commit: `feat(agent): execute waf graphs from worker memory`
+
+---
+
+### Task 7: IP 组 checksum 与五秒内存刷新
+
+**Files:**
+- Create: `internal/apps/agent/nginx/waf_ip_groups.lua`
+- Create: `internal/apps/agent/nginx/waf_ip_groups_spec.lua`
+- Modify: `internal/apps/agent/sync/service.go`
+- Modify: `internal/apps/agent/sync/service_test.go`
+- Modify: `internal/apps/agent/nginx/waf_assets.go`
+
+**Interfaces:**
+- Produces: `waf_ip_groups.json.checksum`；Lua `ip_groups.current()` 返回 Worker 本地对象；协调刷新间隔固定 5 秒。
+- Consumes: 现有 Agent IP 组同步 payload 与独立的 `ngx.shared.openflare_waf_ip_groups`（64 MiB）；完整运行时快照上限为 20 MiB。
+
+- [ ] **Step 1: 写失败测试**
+
+断言 Agent 先原子替换 JSON、最后原子替换 checksum；Lua 稳定状态 15 秒只读取 checksum 3 次且不读 JSON；变化时全实例只读一次 JSON；非法新 JSON 保留旧对象。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/agent/sync ./internal/apps/agent/nginx -run 'TestWAFIPGroup(Checksum|Refresh)' -count=1`
+
+Expected: FAIL，checksum sidecar 和定时器不存在。
+
+- [ ] **Step 3: Agent 写 checksum sidecar**
+
+checksum 使用 Agent 已有快照 checksum；写入采用同目录临时文件、fsync/close、rename 的现有原子文件工具。严格顺序为 JSON rename 成功后 checksum rename。
+
+- [ ] **Step 4: 实现协调 Worker 刷新**
+
+```lua
+local function tick(premature)
+  if premature then return end
+  local ok = shared:add("ip_refresh_lock", true, 4)
+  if ok then refresh_from_checksum() end
+  adopt_shared_snapshot_if_changed()
+end
+ngx.timer.every(5, tick)
+```
+
+协调 Worker 变化时把 raw JSON 和 checksum 写共享字典；每个 Worker 只在 shared version 变化时 decode 到模块局部 `current_groups`。请求只调用 `ip_groups.current()`。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `go test ./internal/apps/agent/nginx ./internal/apps/agent/sync -count=1`
+
+Expected: PASS。
+
+Commit: `perf(waf): refresh ip groups by checksum timer`
+
+---
+
+### Task 8: 前端类型、Service 与创建流程
+
+**Files:**
+- Modify: `frontend/package.json`
+- Modify: `frontend/pnpm-lock.yaml`
+- Modify: `frontend/lib/services/openflare/types.ts`
+- Modify: `frontend/lib/services/openflare/waf.service.ts`
+- Modify: `frontend/app/(main)/waf/page.tsx`
+- Create: `frontend/app/(main)/waf/components/create-rule-dialog.tsx`
+- Modify: `frontend/app/(main)/waf/components/rule-groups-table.tsx`
+- Delete after replacement: `frontend/app/(main)/waf/components/rule-group-sheet.tsx`
+- Test: `frontend/tests/unit/waf-rule-service.test.ts`
+
+**Interfaces:**
+- Produces: TypeScript 判别联合 `WAFRuleNode`、`WAFRuleGraph`、`WAFRule`；`WafService.createRule({name})`、`saveRuleGraph(id, {revision, graph})`。
+- Consumes: Task 4 API。
+
+- [ ] **Step 1: 阅读 shadcn 与 Next 本地文档，安装 React Flow**
+
+Run: `cd frontend && pnpm add @xyflow/react`
+
+Expected: `package.json` 与 lockfile 增加同一版本的 `@xyflow/react`。
+
+- [ ] **Step 2: 写 Service 与创建流程失败测试**
+
+断言创建 payload 只有 `{name}`，保存包含 revision，创建成功导航到 `/waf/rules/editor?id=<id>`，不再打开旧规则大表单。
+
+- [ ] **Step 3: 运行测试确认失败**
+
+Run: `cd frontend && pnpm vitest run tests/unit/waf-rule-service.test.ts`
+
+Expected: FAIL，旧 payload 仍要求固定字段。
+
+- [ ] **Step 4: 实现类型、Service 和名称对话框**
+
+```ts
+export type WAFRuleNode =
+  | {id: string; type: 'start'; position: XYPosition; config: Record<string, never>}
+  | {id: string; type: 'ip_match'; position: XYPosition; config: IPMatchConfig}
+  | {id: string; type: 'geo_match'; position: XYPosition; config: GeoMatchConfig}
+  | {id: string; type: 'pow'; position: XYPosition; config: PoWNodeConfig}
+  | {id: string; type: 'allow'; position: XYPosition; config: Record<string, never>}
+  | {id: string; type: 'block'; position: XYPosition; config: BlockNodeConfig};
+```
+
+静态方法作为 React Query 回调时继续用箭头函数包裹。列表创建成功后 `router.push('/waf/rules/editor?id=' + rule.id)`。
+
+- [ ] **Step 5: 运行测试并提交**
+
+Run: `cd frontend && pnpm vitest run tests/unit/waf-rule-service.test.ts && pnpm lint`
+
+Expected: PASS。
+
+Commit: `feat(frontend): create orchestrated waf rules`
+
+---
+
+### Task 9: React Flow 编排器与固定属性栏
+
+**Files:**
+- Create: `frontend/app/(main)/waf/rules/editor/page.tsx`
+- Create: `frontend/app/(main)/waf/rules/editor/components/rule-flow-canvas.tsx`
+- Create: `frontend/app/(main)/waf/rules/editor/components/rule-node.tsx`
+- Create: `frontend/app/(main)/waf/rules/editor/components/node-library.tsx`
+- Create: `frontend/app/(main)/waf/rules/editor/components/node-properties.tsx`
+- Create: `frontend/app/(main)/waf/rules/editor/components/graph-validation.ts`
+- Create: `frontend/app/(main)/waf/rules/editor/components/graph-validation.test.ts`
+- Create: `frontend/app/(main)/waf/rules/editor/components/unsaved-changes.tsx`
+
+**Interfaces:**
+- Produces: 全宽 React Flow 编辑器；前端 `validateGraph(graph): GraphIssue[]`；Server 错误节点定位。
+- Consumes: Task 8 类型与 Service。
+
+- [ ] **Step 1: 写前端图校验失败测试**
+
+覆盖唯一 start/allow、必需 handle、禁止环、不可达、终止性以及删除节点同步删边。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `cd frontend && pnpm vitest run 'app/(main)/waf/rules/editor/components/graph-validation.test.ts'`
+
+Expected: FAIL，校验器不存在。
+
+- [ ] **Step 3: 实现页面骨架和数据状态**
+
+`page.tsx` 直接维护 query、mutation、React Flow nodes/edges、dirty、selection 和右侧栏状态，不创建同名中转容器。根节点使用 `w-full py-6 px-1`，标题严格使用既定图标和 `h1` 规范。
+
+- [ ] **Step 4: 实现节点、handle 和连线约束**
+
+`start/pow` 只显示 `next` source handle，`ip_match/geo_match` 显示 `true`、`false`，`allow/block` 只显示 target handle。`isValidConnection` 阻止错误端口、同端口重复连接和形成环；start/allow 禁止删除。
+
+- [ ] **Step 5: 实现固定右侧属性栏**
+
+属性栏按节点判别联合渲染 IP/CIDR 与 IP 组多选、国家/地区多选、PoW 配置、阻止状态码与 HTML。颜色和阴影通过节点组件 variant/CSS 变量集中定义，不在业务调用点硬编码。
+
+- [ ] **Step 6: 实现保存、冲突和未保存提示**
+
+仅图合法时启用保存；409 显示“规则已在其他页面更新，请重新加载”；Server 返回节点/边 ID 时选中并聚焦；浏览器离开和应用内返回均提示未保存变更。
+
+- [ ] **Step 7: 运行测试、构建并提交**
+
+Run: `cd frontend && pnpm vitest run && pnpm lint && pnpm build`
+
+Expected: PASS；静态导出包含 `/waf/rules/editor`。
+
+Commit: `feat(frontend): add visual waf rule composer`
+
+---
+
+### Task 10: 路由绑定排序 UI 与旧界面清理
+
+**Files:**
+- Modify: `frontend/app/(main)/waf/components/site-binding-sheet.tsx`
+- Modify: `frontend/app/(main)/proxy-routes/detail/components/waf-section.tsx`
+- Modify: `frontend/app/(main)/waf/components/helpers.ts`（删除仅旧规则表单使用的导出；若清空则删除文件）
+- Delete: `frontend/app/(main)/waf/components/pow-config-panel.tsx`
+- Delete: `frontend/app/(main)/waf/components/rule-entry-dialog.tsx`
+- Delete: `frontend/app/(main)/waf/components/rule-list-section.tsx`
+- Test: `frontend/tests/unit/waf-binding-order.test.tsx`
+
+**Interfaces:**
+- Produces: 拖拽或上下移动的有序绑定列表，提交 ID 顺序不被排序。
+- Consumes: Task 4 有序绑定 API 和 Task 8 Service。
+
+- [ ] **Step 1: 写绑定顺序失败测试**
+
+选择规则 A/B/C，移动为 C/A/B，断言 API payload 为 `{ids:[C,A,B]}`；全局规则单独展示为固定前置且不可拖动。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `cd frontend && pnpm vitest run tests/unit/waf-binding-order.test.tsx`
+
+Expected: FAIL，当前 UI 只表达集合。
+
+- [ ] **Step 3: 实现排序并删除旧固定表单组件**
+
+复用项目现有 `@dnd-kit/sortable`；为键盘用户提供上移/下移操作。清理旧字段、旧 PoW 面板和不再引用的 helper，保留 IP 组管理组件。
+
+- [ ] **Step 4: 运行测试并提交**
+
+Run: `cd frontend && pnpm vitest run && pnpm lint && pnpm build`
+
+Expected: PASS。
+
+Commit: `refactor(frontend): order waf bindings and remove legacy editor`
+
+---
+
+### Task 11: 旧后端字段清理、Swagger、中文文档与端到端验证
+
+**Files:**
+- Create: `internal/db/migrator/goose/postgres/202607150003_drop_legacy_waf_rule_fields.sql`
+- Create: `internal/db/migrator/goose/sqlite/202607150003_drop_legacy_waf_rule_fields.sql`
+- Modify: `internal/model/openflare_waf.go`
+- Modify: `internal/apps/openflare/waf/logics_test.go`
+- Modify: `docs/design/waf-design.md`
+- Modify: `docs/guide/waf-usage.md`
+- Modify: `docs/changelog/index.md`
+- Generated: `docs/docs.go`, `docs/swagger.json`, `docs/swagger.yaml`
+
+**Interfaces:**
+- Produces: 无旧固定策略字段的最终 Schema 与中文使用文档。
+- Consumes: Tasks 1–10 的完整替代实现。
+
+- [ ] **Step 1: 写迁移与集成失败测试**
+
+断言最终表不再包含 `block_status_code`、`ip_whitelist`、`ip_blacklist`、地域名单、`pow_enabled`、`pow_config`；端到端图分别产生 allow、block、PoW 接管，IP 组变化在 5–10 秒内生效。
+
+- [ ] **Step 2: 运行测试确认失败**
+
+Run: `go test ./internal/apps/openflare/integration ./internal/model -run 'TestOrchestratedWAF|TestLegacyWAFColumnsRemoved' -count=1`
+
+Expected: FAIL，旧列仍存在。
+
+- [ ] **Step 3: 删除旧列和旧代码路径**
+
+PostgreSQL 直接 `DROP COLUMN`；SQLite 使用项目支持版本的 `DROP COLUMN` 或重建表迁移并复制 `id/name/enabled/is_global/graph/revision/timestamps`。删除 Go model/view/input 中的旧字段和固定链 helper，确保仓库中业务代码不再引用它们。
+
+- [ ] **Step 4: 更新中文文档与 changelog**
+
+`waf-design.md` 删除固定链作为现行设计的表述，链接可编排设计；`waf-usage.md` 写创建、节点语义、绑定顺序、发布生效和迁移警告；`[Unreleased]` 增加 WAF 可视编排、发布加载和 IP 组刷新条目。
+
+- [ ] **Step 5: 生成 Swagger 并运行全量验证**
+
+Run: `make swagger`
+
+Expected: PASS，生成文件包含新 graph/meta API 与 409 response。
+
+Run: `go test ./... -count=1`
+
+Expected: PASS。
+
+Run: `cd frontend && pnpm vitest run && pnpm lint && pnpm build`
+
+Expected: PASS。
+
+Run: `make code-check`
+
+Expected: PASS，无格式、lint、测试或生成文件差异。
+
+- [ ] **Step 6: 最终人工数据面验收**
+
+创建规则并编排 `开始 → IP 匹配 → true:通过 / false:地域匹配 → true:阻止A / false:PoW → 通过`，绑定到测试路由并发布。用命中/未命中 IP、不同 GeoIP 和无 PoW cookie 请求验证三个分支；更新引用 IP 组后不发布，确认 5–10 秒内结果变化且 OpenResty 未 reload。
+
+- [ ] **Step 7: 提交**
+
+Commit: `feat(waf): complete composable rule orchestration`
+
+## 4. 最终验收标准
+
+- 用户新增规则时只输入名称并立即进入 React Flow 编排器。
+- 默认规则为 `开始 → 通过`；特殊节点与处理节点满足设计约束。
+- Server 和前端均拒绝非法图，发布再次校验，revision 冲突返回 409。
+- 全局规则固定前置，自定义规则严格按绑定顺序执行。
+- OpenResty 请求路径对规则与 IP 组均为纯内存读取。
+- 规则只在发布 reload 时加载；IP 组每 5 秒 checksum 检查且仅变化时读取完整 JSON。
+- PostgreSQL、SQLite、Go、Lua、前端、Swagger、构建与 `make code-check` 全部通过。

docs/plan/clickhouse-cpu-optimization.md

@@ -0,0 +1,47 @@
+# ClickHouse CPU 性能优化计划
+
+> PLAN_ID: `63ba981b`  
+> 状态: 已完成（含 Phase 2 遗留治理）  
+> 目标: 完成 P0–P2 优化，降低 ClickHouse CPU 占用
+
+## 背景
+
+ClickHouse CPU 偏高由写入侧（小 part 频繁 flush、心跳同步 DELETE mutation）与查询侧（无 LIMIT 全表扫、高频轮询、WAF 全量拉日志）叠加导致。
+
+## PR Plan
+
+### PR 1: 写入路径 P0 优化
+
+- **Description:** 移除心跳路径同步 `ALTER DELETE`；为 `batchwriter` 增加 `MinBatchSize`；调大可观测 writer 批次与 flush 间隔；为 openresty/frps/frpc 补全去重。
+- **Files/components affected:** `internal/apps/openflare/agent/observability.go`, `internal/db/batchwriter/`, `internal/apps/openflare/chwriter/`, `internal/db/batchwriter/*_test.go`
+- **Dependencies:** None
+
+### PR 2: ClickHouse 客户端与配置 P1
+
+- **Description:** 启用 `async_insert` 等写入优化 settings；提高 `block_buffer_size` 默认值；更新 `config.example.yaml` 与配置模型注释。
+- **Files/components affected:** `internal/db/clickhouse.go`, `internal/config/model.go`, `internal/config/config.go`, `config.example.yaml`
+- **Dependencies:** None
+
+### PR 3: Dashboard 与可观测查询 P0
+
+- **Description:** 消除 `limit=0` 无界查询；复用已有限制数据构建趋势；增加服务端短 TTL 缓存；降低前端轮询频率。
+- **Files/components affected:** `internal/apps/openflare/dashboard/logics.go`, `internal/apps/openflare/observability/node_logics.go`, `frontend/app/(main)/page.tsx`, `frontend/app/(main)/nodes/components/node-observability.tsx`
+- **Dependencies:** None
+
+### PR 4: 访问日志与 WAF 查询 P0/P1
+
+- **Description:** WAF IP 同步改为 ClickHouse 侧聚合；IP 汇总与折叠日志 SQL 分页；消除 count 重复全量扫描；列表 API 强制默认时间窗口。
+- **Files/components affected:** `internal/apps/openflare/waf/ip_group_sync.go`, `internal/repository/analytics/node_access_log_stats.go`, `internal/model/openflare_access_log.go`, `internal/apps/openflare/observability/access_log_logics.go`, `internal/repository/analytics/access_log_stats.go`
+- **Dependencies:** None
+
+### PR 5: ClickHouse DDL 与数据规范化 P1
+
+- **Description:** 为 7 张分析表添加 TTL；收窄 `of_node_access_logs` ORDER BY；插入时规范化 `remote_addr`（去 trim 查询）；将可观测 obs 三表纳入自动清理。
+- **Files/components affected:** `internal/db/migrator/goose/clickhouse/`, `internal/repository/analytics/node_access_log_writer.go`, `internal/apps/openflare/tasks/database_cleanup.go`, `internal/model/analytics/`
+- **Dependencies:** PR 1
+
+### PR 6: 基础设施与审计减负 P2
+
+- **Description:** Docker ClickHouse 服务端基础调优；审计日志 headers 截断/精简；更新 changelog。
+- **Files/components affected:** `docker-compose.yaml`, `docker/clickhouse/` (if needed), `internal/apps/risk_control/middleware.go`, `docs/changelog/index.md`
+- **Dependencies:** None

docs/plan/index.md

@@ -11,7 +11,10 @@
 
 ## 正在进行的计划
 
-当前暂无正在进行的开发计划或 AI 接手计划。所有历史迁移与重构项目（如后端/前端向 Wavelet 平台的迁移、边缘运行时重构等）均已完成开发并上线，对应的临时计划文档已归档清理。
+当前进行中的开发计划：
+
+* [Zone 与域名资源重构](./20260712-zone-domain-refactor.md)：以 Zone 和正规化 Zone 域名替代托管域名及反代路由中的域名/证书冗余字段。
+* [WAF 可编排规则](./20260713-waf-orchestration.md)：使用 React Flow 编辑 DAG 规则，发布时编译并由 OpenResty 纯内存执行。
 
 ## 使用建议
 

docs/reference/cli.md

@@ -40,6 +40,14 @@ GOCACHE=/tmp/openflare-go-cache go test ./...
 make code-check
 ```
 
+自动格式化后端 Go 与前端 TypeScript、JavaScript、CSS 等源码：
+
+```bash
+make prettier
+```
+
+该命令使用 `gofmt` 格式化后端，并使用项目固定版本的 Prettier 格式化 `frontend/` 源码；构建产物、依赖、公开静态资源和锁文件会被忽略。
+
 ## Frontend
 
 开发：
@@ -155,4 +163,4 @@ pnpm dev
 ```bash
 cd docs
 pnpm build:embed
-```
+```

docs/reference/configuration.md

@@ -97,15 +97,24 @@ Server 的所有核心基础配置定义在 `config.yaml` 中，且均支持环
 | `redis.db` | `REDIS_DB` | Redis 逻辑数据库编号 | `0` |
 | `redis.key_prefix` | `REDIS_KEY_PREFIX` | 系统在 Redis 中使用的键前缀 | `openflare:` |
 | `redis.pool_size` | `REDIS_POOL_SIZE` | Redis 连接池大小 | `100` |
+| `redis.maint_notifications` | `REDIS_MAINT_NOTIFICATIONS` | 启动时是否启用 Redis maintenance notifications 自动协商；兼容性不明时保持关闭，修改后需重启 | `false` |
 
 ### 4. ClickHouse 配置 (`clickhouse:`)
+
+> **说明**：下列为 OpenFlare **客户端**连接参数。ClickHouse **服务端**小规格调优：将 `performance.xml` curl 到 `./config/clickhouse/`，再以单文件方式挂载至容器的 `config.d/performance.xml`，详见 [启动 Server](../deployment/server.md)。
+
 | 配置文件 YAML 路径 | 对应覆盖环境变量 | 作用说明 | 默认值 |
 | --- | --- | --- | --- |
 | `clickhouse.enabled` | `CLICKHOUSE_ENABLED` | 是否启用 ClickHouse。**系统节点指标与访问日志在此进行海量写入** | `true` |
 | `clickhouse.hosts` | `CLICKHOUSE_HOST` | ClickHouse 集群连接地址数组（环境变量仅设置单地址） | `["127.0.0.1:9000"]` |
 | `clickhouse.username` | `CLICKHOUSE_USERNAME` | ClickHouse 账号用户名 | `default` |
-| `clickhouse.password` | `CLICKHOUSE_PASSWORD` | ClickHouse 密码 | `123456` |
+| `clickhouse.password` | `CLICKHOUSE_PASSWORD` | ClickHouse 密码 | `replace-with-clickhouse-password` |
 | `clickhouse.database` | `CLICKHOUSE_NAME` | ClickHouse 存储的数据库名称 | `openflare` |
+| `clickhouse.max_idle_conn` | - | 客户端空闲连接数（小规格默认偏低） | `8` |
+| `clickhouse.max_open_conn` | - | 客户端最大打开连接数 | `16` |
+| `clickhouse.conn_max_lifetime` | - | 连接最大存活时间（秒） | `3600` |
+| `clickhouse.dial_timeout` | - | 建连超时（秒） | `5` |
+| `clickhouse.block_buffer_size` | - | 原生协议 block 缓冲行数 | `32` |
 
 ### 5. 系统日志配置 (`log:`)
 | 配置文件 YAML 路径 | 对应覆盖环境变量 | 作用说明 | 默认值 |
@@ -161,7 +170,7 @@ Server 的所有核心基础配置定义在 `config.yaml` 中，且均支持环
 ### 2. 人机安全校验 (PoW Captcha)
 | 配置键 (Key) | 数据类型 | 作用说明 | 默认值 |
 | --- | --- | --- | --- |
-| `cap_login_enabled` | `bool` | 是否在登录界面强制要求进行本地 PoW 算力防爆破人机验证 | `true` |
+| `cap_login_enabled` | `bool` | 是否在登录界面强制要求进行本地 PoW 算力防爆破人机验证 | `false` |
 | `cap_auto_solve` | `bool` | 打开页面后是否由浏览器自动开始后台背景计算算力（无需用户手动点击）| `true` |
 | `cap_challenge_count` | `int` | 人机验证所需的计算难题数。数量越大，计算要求时间越长（推荐 1～5） | `1` |
 | `cap_challenge_difficulty`| `int`| 每次计算所需的 PoW 哈希前缀匹配难度。推荐数值在 3-5 之间 | `4` |
@@ -278,6 +287,8 @@ Server 的所有核心基础配置定义在 `config.yaml` 中，且均支持环
 | `OPENFLARE_MMDB_PATH` | WAF GeoIP mmdb 路径，可覆盖 `agent.json` | 空 |
 | `OPENFLARE_MMDB_UPDATE_INTERVAL` | WAF GeoIP mmdb 更新间隔，可覆盖 `agent.json` | 空 |
 | `OPENFLARE_MMDB_DOWNLOAD_URL` | WAF GeoIP mmdb 下载地址，可覆盖 `agent.json` | 空 |
+| `OPENFLARE_CITY_MMDB_PATH` | WAF 地区匹配 City MMDB 路径，可覆盖 `agent.json` | 空 |
+| `OPENFLARE_CITY_MMDB_DOWNLOAD_URL` | WAF City MMDB 下载地址，可覆盖 `agent.json` | 空 |
 
 ---
 
@@ -307,8 +318,10 @@ Server 的所有核心基础配置定义在 `config.yaml` 中，且均支持环
 | `runtime_config_dir` | Agent 运行时配置写入目录，如 `pow_config.json` | 否 | `data_dir/etc/openflare` |
 | `pages_dir` | Pages 静态部署包解压与当前部署目录 | 否 | `data_dir/var/lib/openflare/pages` |
 | `mmdb_path` | WAF GeoIP mmdb 文件路径 | 否 | `data_dir/etc/openflare/GeoLite2-Country.mmdb` |
+| `city_mmdb_path` | WAF 地区匹配 City MMDB 文件路径 | 否 | `data_dir/etc/openflare/GeoLite2-City.mmdb` |
 | `mmdb_update_interval` | WAF GeoIP mmdb 更新间隔 | 否 | `86400000` 毫秒 (24h) |
-| `mmdb_download_url` | WAF GeoIP mmdb 下载地址 | 否 | 内置 GeoLite2 Country 下载地址 |
+| `mmdb_download_url` | WAF GeoIP mmdb 周期更新地址 | 否 | GeoLite2 Country 更新地址；首次缺失时从程序内嵌数据库初始化 |
+| `city_mmdb_download_url` | WAF City MMDB 周期更新地址 | 否 | GeoLite2 City 更新地址；首次缺失时从程序内嵌数据库初始化 |
 | `observability_buffer_path` | 观测补报缓冲文件路径 | 否 | `data_dir/var/lib/openflare/observability-buffer.json` |
 | `observability_replay_minutes` | 自动补传最近观测窗口分钟数 | 否 | `15` |
 | `state_path` | Agent 本地状态文件路径 | 否 | `data_dir/var/lib/openflare/agent-state.json` |

docs/superpowers/specs/2026-07-12-zone-domain-design.md

@@ -0,0 +1,13 @@
+# Zone 域名重构规格
+
+已确认的设计：
+
+* `/websites` 展示可注册根域 Zone；详情 URL 使用 `/websites/:zoneId`。
+* `managed_domains` 将被彻底替换为 `of_zones` 与 `of_zone_domains`。
+* Zone 域名是 `of_proxy_routes` 域名与证书的规范化来源；一个域名至多连接一条路由，一条路由可含多个 Zone 的域名。
+* `of_proxy_routes` 移除 `cert_id`、`cert_ids` 与 `domain_cert_ids`，不再指定证书；配置编译只从关联 Zone 域名的 `cert_id` 查询证书。
+* Zone 域名只允许明确 FQDN；允许把含 `*.example.com` SAN 的 TLS 证书绑定到明确域名，但不允许通配符域名记录。
+* 路由仍拥有上游、缓存、限流、WAF 与 Pages；Zone 只提供聚合管理和展示。
+* 迁移先建新表、用 Public Suffix List 回填和验证，再在后续独立发布中移除旧表及冗余列。
+
+完整设计、API、迁移与验证策略见 [Zone 与域名资源设计](../../design/zone-design.md)。

frontend/.prettierignore

@@ -0,0 +1,7 @@
+.next/
+node_modules/
+out/
+coverage/
+public/
+next-env.d.ts
+pnpm-lock.yaml

frontend/.prettierrc.json

@@ -0,0 +1,14 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "preserve"
+}

frontend/README.md

@@ -22,11 +22,13 @@ Modern frontend application for the Wavelet scaffold framework.
 ### Installation
 
 1. Install dependencies:
+
    ```bash
    pnpm install
    ```
 
 2. Run the development server:
+
    ```bash
    pnpm dev
    ```

frontend/README_zh.md

@@ -22,11 +22,13 @@ Wavelet 脚手架系统的现代化前端应用。
 ### 安装
 
 1. 安装依赖:
+
    ```bash
    pnpm install
    ```
 
 2. 运行开发服务器:
+
    ```bash
    pnpm dev
    ```

frontend/app/(auth)/login/page.tsx

@@ -1,10 +1,10 @@
-import {Suspense} from "react"
-import {LoginPage} from "@/components/auth/login-page"
+import { Suspense } from 'react';
+import { LoginPage } from '@/components/auth/login-page';
 
 export default function Page() {
   return (
     <Suspense>
       <LoginPage />
     </Suspense>
-  )
+  );
 }

frontend/app/(auth)/register/page.tsx

@@ -1,10 +1,10 @@
-import {Suspense} from "react"
-import {RegisterPage} from "@/components/auth/register-page"
+import { Suspense } from 'react';
+import { RegisterPage } from '@/components/auth/register-page';
 
 export default function Page() {
   return (
     <Suspense>
       <RegisterPage />
     </Suspense>
-  )
+  );
 }

frontend/app/(docs)/docs/api/page.tsx

@@ -1,15 +1,17 @@
-import {LegalPageLayout} from "@/components/common/docs/legal-page-layout";
-import {apiSections, DOCS_LAST_UPDATED} from "@/components/common/docs/api";
+import { LegalPageLayout } from '@/components/common/docs/legal-page-layout';
+import { apiSections, DOCS_LAST_UPDATED } from '@/components/common/docs/api';
 
 export default function ApiDocPage() {
   return (
     <LegalPageLayout
-      title="API 接口文档"
+      title='API 接口文档'
       lastUpdated={DOCS_LAST_UPDATED}
       sections={apiSections}
       description={
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          OpenFlare 提供简单、强大的 API 接口，支持多种编程语言和开发环境。通过标准化的 RESTful 接口，您可以轻松地与后端服务进行集成与二次开发。
+        <p className='text-muted-foreground text-sm leading-relaxed'>
+          OpenFlare 提供简单、强大的 API
+          接口，支持多种编程语言和开发环境。通过标准化的 RESTful
+          接口，您可以轻松地与后端服务进行集成与二次开发。
         </p>
       }
     />

frontend/app/(docs)/docs/how-to-use/page.tsx

@@ -1,16 +1,17 @@
-import {LegalPageLayout} from "@/components/common/docs/legal-page-layout";
-import {howToUseSections} from "@/components/common/docs/how-to-use";
-import {DOCS_LAST_UPDATED} from "@/components/common/docs/api";
+import { LegalPageLayout } from '@/components/common/docs/legal-page-layout';
+import { howToUseSections } from '@/components/common/docs/how-to-use';
+import { DOCS_LAST_UPDATED } from '@/components/common/docs/api';
 
 export default function HowToUsePage() {
   return (
     <LegalPageLayout
-      title="平台使用指南"
+      title='平台使用指南'
       lastUpdated={DOCS_LAST_UPDATED}
       sections={howToUseSections}
       description={
-        <p className="text-muted-foreground text-sm leading-relaxed">
-          欢迎使用 OpenFlare 管理平台。本文档将引导您快速了解平台的核心组件、角色权限设计及二次开发流程，帮助您快速上手开发。
+        <p className='text-muted-foreground text-sm leading-relaxed'>
+          欢迎使用 OpenFlare
+          管理平台。本文档将引导您快速了解平台的核心组件、角色权限设计及二次开发流程，帮助您快速上手开发。
         </p>
       }
     />

frontend/app/(docs)/docs/privacy-policy/page.tsx

@@ -1,20 +1,20 @@
-import {LegalPageLayout} from "@/components/common/docs/legal-page-layout"
-import {privacySections} from "@/components/common/docs/privacy"
-import {TERMS_LAST_UPDATED} from "@/components/common/docs/terms"
+import { LegalPageLayout } from '@/components/common/docs/legal-page-layout';
+import { privacySections } from '@/components/common/docs/privacy';
+import { TERMS_LAST_UPDATED } from '@/components/common/docs/terms';
 
 export default function PrivacyPolicyPage() {
   return (
     <LegalPageLayout
-      title="隐私政策 (Privacy)"
+      title='隐私政策 (Privacy)'
       lastUpdated={TERMS_LAST_UPDATED}
       sections={privacySections}
       description={
         <span>
           我们非常重视您的隐私保护。本政策将向您透明地展示我们如何收集、使用、存储您的个人信息，
-          <br className="hidden md:block" />
+          <br className='hidden md:block' />
           以及您享有的相关权利。
         </span>
       }
     />
-  )
+  );
 }

frontend/app/(docs)/docs/terms-of-service/page.tsx

@@ -1,17 +1,16 @@
-import {LegalPageLayout} from "@/components/common/docs/legal-page-layout"
-import {TERMS_LAST_UPDATED, termsSections} from "@/components/common/docs/terms"
+import { LegalPageLayout } from '@/components/common/docs/legal-page-layout';
+import {
+  TERMS_LAST_UPDATED,
+  termsSections,
+} from '@/components/common/docs/terms';
 
 export default function TermsOfServicePage() {
   return (
     <LegalPageLayout
-      title="服务协议 (Terms)"
+      title='服务协议 (Terms)'
       lastUpdated={TERMS_LAST_UPDATED}
       sections={termsSections}
-      description={
-        <span>
-          为了保障您的合法权益，请您仔细阅读以下条款。
-        </span>
-      }
+      description={<span>为了保障您的合法权益，请您仔细阅读以下条款。</span>}
     />
-  )
+  );
 }

frontend/app/(main)/access-logs/components/access-log-filters.tsx

@@ -1,21 +1,27 @@
-"use client"
+'use client';
 
-import {Search} from "lucide-react"
+import { Search } from 'lucide-react';
 
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import type {AccessLogTab, SearchDraft} from "./access-log-utils"
-import {PAGE_SIZE_OPTIONS} from "./access-log-utils"
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { AccessLogTab, SearchDraft } from './access-log-utils';
+import { PAGE_SIZE_OPTIONS } from './access-log-utils';
 
 interface AccessLogFiltersProps {
-  tab: AccessLogTab
-  draft: SearchDraft
-  pageSize: number
-  onDraftChange: (draft: SearchDraft) => void
-  onPageSizeChange: (pageSize: number) => void
-  onSearch: () => void
-  onReset: () => void
+  tab: AccessLogTab;
+  draft: SearchDraft;
+  pageSize: number;
+  onDraftChange: (draft: SearchDraft) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  onSearch: () => void;
+  onReset: () => void;
 }
 
 export function AccessLogFilters({
@@ -27,78 +33,84 @@ export function AccessLogFilters({
   onSearch,
   onReset,
 }: AccessLogFiltersProps) {
-  const showPath = tab === "list" || tab === "folds"
+  const showPath = tab === 'list' || tab === 'folds';
 
   return (
-    <div className="space-y-3">
-      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-        <div className="space-y-1.5">
-          <p className="text-xs font-medium text-muted-foreground">节点 ID</p>
-          <div className="relative">
-            <Search className="absolute left-2.5 top-2.5 size-3.5 text-muted-foreground" />
+    <div className='space-y-3'>
+      <div className='grid gap-3 md:grid-cols-2 xl:grid-cols-4'>
+        <div className='space-y-1.5'>
+          <p className='text-xs font-medium text-muted-foreground'>节点 ID</p>
+          <div className='relative'>
+            <Search className='absolute left-2.5 top-2.5 size-3.5 text-muted-foreground' />
             <Input
               value={draft.nodeId}
               onChange={(e) =>
                 onDraftChange({ ...draft, nodeId: e.target.value })
               }
               onKeyDown={(e) => {
-                if (e.key === "Enter") onSearch()
+                if (e.key === 'Enter') onSearch();
               }}
-              placeholder="按 node_id 搜索"
-              className="pl-8 h-9 text-xs"
+              placeholder='按 node_id 搜索'
+              className='pl-8 h-9 text-xs'
             />
           </div>
         </div>
-        <div className="space-y-1.5">
-          <p className="text-xs font-medium text-muted-foreground">来源 IP</p>
+        <div className='space-y-1.5'>
+          <p className='text-xs font-medium text-muted-foreground'>来源 IP</p>
           <Input
             value={draft.remoteAddr}
             onChange={(e) =>
               onDraftChange({ ...draft, remoteAddr: e.target.value })
             }
             onKeyDown={(e) => {
-              if (e.key === "Enter") onSearch()
+              if (e.key === 'Enter') onSearch();
             }}
-            placeholder="按 IP 搜索"
-            className="h-9 text-xs"
+            placeholder='按 IP 搜索'
+            className='h-9 text-xs'
           />
         </div>
-        <div className="space-y-1.5">
-          <p className="text-xs font-medium text-muted-foreground">访问域名</p>
+        <div className='space-y-1.5'>
+          <p className='text-xs font-medium text-muted-foreground'>访问域名</p>
           <Input
             value={draft.host}
             onChange={(e) => onDraftChange({ ...draft, host: e.target.value })}
             onKeyDown={(e) => {
-              if (e.key === "Enter") onSearch()
+              if (e.key === 'Enter') onSearch();
             }}
-            placeholder="按域名搜索"
-            className="h-9 text-xs"
+            placeholder='按域名搜索'
+            className='h-9 text-xs'
           />
         </div>
         {showPath ? (
-          <div className="space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground">请求路径</p>
+          <div className='space-y-1.5'>
+            <p className='text-xs font-medium text-muted-foreground'>
+              请求路径
+            </p>
             <Input
               value={draft.path}
-              onChange={(e) => onDraftChange({ ...draft, path: e.target.value })}
+              onChange={(e) =>
+                onDraftChange({ ...draft, path: e.target.value })
+              }
               onKeyDown={(e) => {
-                if (e.key === "Enter") onSearch()
+                if (e.key === 'Enter') onSearch();
               }}
-              placeholder="按路径搜索"
-              className="h-9 text-xs"
+              placeholder='按路径搜索'
+              className='h-9 text-xs'
             />
           </div>
         ) : null}
       </div>
 
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-        <div className="space-y-1.5 w-full sm:max-w-[180px]">
-          <p className="text-xs font-medium text-muted-foreground">每页条数</p>
+      <div className='flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between'>
+        <div className='space-y-1.5 w-full sm:max-w-[180px]'>
+          <p className='text-xs font-medium text-muted-foreground'>每页条数</p>
           <Select
             value={String(pageSize)}
-            onValueChange={(value) => onPageSizeChange(Number.parseInt(value, 10))}
+            onValueChange={(value) =>
+              onPageSizeChange(Number.parseInt(value, 10))
+            }
           >
-            <SelectTrigger className="h-9 text-xs">
+            <SelectTrigger className='h-9 text-xs'>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -110,15 +122,15 @@ export function AccessLogFilters({
             </SelectContent>
           </Select>
         </div>
-        <div className="flex gap-2">
-          <Button size="sm" onClick={onSearch}>
+        <div className='flex gap-2'>
+          <Button size='sm' onClick={onSearch}>
             筛选
           </Button>
-          <Button variant="outline" size="sm" onClick={onReset}>
+          <Button variant='outline' size='sm' onClick={onReset}>
             清空
           </Button>
         </div>
       </div>
     </div>
-  )
+  );
 }

frontend/app/(main)/access-logs/components/access-log-utils.ts

@@ -1,48 +1,48 @@
-export type AccessLogTab = "list" | "folds" | "ip-summary" | "ip-trend"
+export type AccessLogTab = 'list' | 'folds' | 'ip-summary' | 'ip-trend';
 
 export type SearchDraft = {
-  nodeId: string
-  remoteAddr: string
-  host: string
-  path: string
-}
+  nodeId: string;
+  remoteAddr: string;
+  host: string;
+  path: string;
+};
 
-export const PAGE_SIZE_OPTIONS = [20, 50, 100, 200]
+export const PAGE_SIZE_OPTIONS = [20, 50, 100, 200];
 
 export const DETAIL_SORT_OPTIONS = [
-  { value: "logged_at:desc", label: "时间从新到旧" },
-  { value: "logged_at:asc", label: "时间从旧到新" },
-  { value: "status_code:desc", label: "状态码从高到低" },
-  { value: "status_code:asc", label: "状态码从低到高" },
-  { value: "remote_addr:asc", label: "IP 正序" },
-  { value: "remote_addr:desc", label: "IP 倒序" },
-]
+  { value: 'logged_at:desc', label: '时间从新到旧' },
+  { value: 'logged_at:asc', label: '时间从旧到新' },
+  { value: 'status_code:desc', label: '状态码从高到低' },
+  { value: 'status_code:asc', label: '状态码从低到高' },
+  { value: 'remote_addr:asc', label: 'IP 正序' },
+  { value: 'remote_addr:desc', label: 'IP 倒序' },
+];
 
 export const FOLD_SORT_OPTIONS = [
-  { value: "bucket_started_at:desc", label: "时间桶从新到旧" },
-  { value: "bucket_started_at:asc", label: "时间桶从旧到新" },
-  { value: "request_count:desc", label: "访问次数从高到低" },
-  { value: "request_count:asc", label: "访问次数从低到高" },
-]
+  { value: 'bucket_started_at:desc', label: '时间桶从新到旧' },
+  { value: 'bucket_started_at:asc', label: '时间桶从旧到新' },
+  { value: 'request_count:desc', label: '访问次数从高到低' },
+  { value: 'request_count:asc', label: '访问次数从低到高' },
+];
 
 export const IP_SORT_OPTIONS = [
-  { value: "total_requests:desc", label: "总访问次数从高到低" },
-  { value: "total_requests:asc", label: "总访问次数从低到高" },
-  { value: "recent_requests:desc", label: "3 小时访问次数从高到低" },
-  { value: "last_seen_at:desc", label: "最后访问时间从新到旧" },
-]
+  { value: 'total_requests:desc', label: '总访问次数从高到低' },
+  { value: 'total_requests:asc', label: '总访问次数从低到高' },
+  { value: 'recent_requests:desc', label: '3 小时访问次数从高到低' },
+  { value: 'last_seen_at:desc', label: '最后访问时间从新到旧' },
+];
 
 export function parseSortValue(value: string) {
-  const [sortBy = "logged_at", sortOrder = "desc"] = value.split(":")
+  const [sortBy = 'logged_at', sortOrder = 'desc'] = value.split(':');
   return {
     sortBy,
-    sortOrder: sortOrder === "asc" ? ("asc" as const) : ("desc" as const),
-  }
+    sortOrder: sortOrder === 'asc' ? ('asc' as const) : ('desc' as const),
+  };
 }
 
 export function formatCompactNumber(value: number) {
-  return new Intl.NumberFormat("zh-CN", {
-    notation: value >= 10000 ? "compact" : "standard",
+  return new Intl.NumberFormat('zh-CN', {
+    notation: value >= 10000 ? 'compact' : 'standard',
     maximumFractionDigits: 1,
-  }).format(value)
-}
+  }).format(value);
+}

frontend/app/(main)/access-logs/components/cleanup-dialog.tsx

@@ -1,7 +1,7 @@
-"use client"
+'use client';
 
-import {useState} from "react"
-import {Loader2} from "lucide-react"
+import { useState } from 'react';
+import { Loader2 } from 'lucide-react';
 
 import {
   AlertDialog,
@@ -11,19 +11,25 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
-const CLEANUP_PRESETS = [3, 7, 30]
+const CLEANUP_PRESETS = [3, 7, 30];
 
 interface CleanupDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onConfirm: (retentionDays: number) => void
-  loading: boolean
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (retentionDays: number) => void;
+  loading: boolean;
 }
 
 export function CleanupDialog({
@@ -32,24 +38,24 @@ export function CleanupDialog({
   onConfirm,
   loading,
 }: CleanupDialogProps) {
-  const [mode, setMode] = useState<string>("7")
-  const [customDays, setCustomDays] = useState("14")
-  const [error, setError] = useState<string | null>(null)
+  const [mode, setMode] = useState<string>('7');
+  const [customDays, setCustomDays] = useState('14');
+  const [error, setError] = useState<string | null>(null);
 
   const handleConfirm = () => {
     const retentionDays =
-      mode === "custom"
+      mode === 'custom'
         ? Number.parseInt(customDays, 10)
-        : Number.parseInt(mode, 10)
+        : Number.parseInt(mode, 10);
 
     if (!Number.isFinite(retentionDays) || retentionDays < 1) {
-      setError("保留天数必须大于 0")
-      return
+      setError('保留天数必须大于 0');
+      return;
     }
 
-    setError(null)
-    onConfirm(retentionDays)
-  }
+    setError(null);
+    onConfirm(retentionDays);
+  };
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
@@ -61,8 +67,8 @@ export function CleanupDialog({
           </AlertDialogDescription>
         </AlertDialogHeader>
 
-        <div className="space-y-3">
-          <div className="space-y-1.5">
+        <div className='space-y-3'>
+          <div className='space-y-1.5'>
             <Label>保留策略</Label>
             <Select value={mode} onValueChange={setMode}>
               <SelectTrigger>
@@ -74,17 +80,17 @@ export function CleanupDialog({
                     保留最近 {days} 天
                   </SelectItem>
                 ))}
-                <SelectItem value="custom">自定义天数</SelectItem>
+                <SelectItem value='custom'>自定义天数</SelectItem>
               </SelectContent>
             </Select>
           </div>
 
-          {mode === "custom" ? (
-            <div className="space-y-1.5">
-              <Label htmlFor="customDays">自定义保留天数</Label>
+          {mode === 'custom' ? (
+            <div className='space-y-1.5'>
+              <Label htmlFor='customDays'>自定义保留天数</Label>
               <Input
-                id="customDays"
-                type="number"
+                id='customDays'
+                type='number'
                 min={1}
                 value={customDays}
                 onChange={(e) => setCustomDays(e.target.value)}
@@ -93,23 +99,27 @@ export function CleanupDialog({
             </div>
           ) : null}
 
-          {error ? <p className="text-xs text-destructive">{error}</p> : null}
+          {error ? <p className='text-xs text-destructive'>{error}</p> : null}
         </div>
 
         <AlertDialogFooter>
           <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
-          <Button variant="destructive" onClick={handleConfirm} disabled={loading}>
+          <Button
+            variant='destructive'
+            onClick={handleConfirm}
+            disabled={loading}
+          >
             {loading ? (
               <>
-                <Loader2 className="size-4 animate-spin mr-1" />
+                <Loader2 className='size-4 animate-spin mr-1' />
                 清理中...
               </>
             ) : (
-              "确认清理"
+              '确认清理'
             )}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  )
+  );
 }

frontend/app/(main)/access-logs/page.tsx

@@ -1,24 +1,42 @@
-"use client"
+'use client';
 
-import {useCallback, useEffect, useMemo, useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts"
-import {RefreshCw, ScrollText, Trash2} from "lucide-react"
-import {toast} from "sonner"
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { RefreshCw, ScrollText, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {AccessLogService} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { AccessLogService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {AccessLogFilters} from "./components/access-log-filters"
+import { AccessLogFilters } from './components/access-log-filters';
 import {
   type AccessLogTab,
   DETAIL_SORT_OPTIONS,
@@ -27,19 +45,19 @@ import {
   IP_SORT_OPTIONS,
   parseSortValue,
   type SearchDraft,
-} from "./components/access-log-utils"
-import {CleanupDialog} from "./components/cleanup-dialog"
+} from './components/access-log-utils';
+import { CleanupDialog } from './components/cleanup-dialog';
 
 const trendChartConfig = {
-  requests: { label: "请求数", color: "hsl(var(--primary))" },
-} satisfies ChartConfig
+  requests: { label: '请求数', color: 'hsl(var(--primary))' },
+} satisfies ChartConfig;
 
 const emptyDraft: SearchDraft = {
-  nodeId: "",
-  remoteAddr: "",
-  host: "",
-  path: "",
-}
+  nodeId: '',
+  remoteAddr: '',
+  host: '',
+  path: '',
+};
 
 function PaginationBar({
   page,
@@ -48,48 +66,66 @@ function PaginationBar({
   onPrev,
   onNext,
 }: {
-  page: number
-  hasMore: boolean
-  loading: boolean
-  onPrev: () => void
-  onNext: () => void
+  page: number;
+  hasMore: boolean;
+  loading: boolean;
+  onPrev: () => void;
+  onNext: () => void;
 }) {
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-t border-dashed">
-      <p className="text-xs text-muted-foreground">当前第 {page + 1} 页</p>
-      <div className="flex gap-2">
-        <Button variant="outline" size="sm" disabled={loading || page <= 0} onClick={onPrev}>
+    <div className='flex items-center justify-between px-4 py-3 border-t border-dashed'>
+      <p className='text-xs text-muted-foreground'>当前第 {page + 1} 页</p>
+      <div className='flex gap-2'>
+        <Button
+          variant='outline'
+          size='sm'
+          disabled={loading || page <= 0}
+          onClick={onPrev}
+        >
           上一页
         </Button>
-        <Button variant="outline" size="sm" disabled={loading || !hasMore} onClick={onNext}>
+        <Button
+          variant='outline'
+          size='sm'
+          disabled={loading || !hasMore}
+          onClick={onNext}
+        >
           下一页
         </Button>
       </div>
     </div>
-  )
+  );
 }
 
 export default function AccessLogsPage() {
-  const queryClient = useQueryClient()
-  const [tab, setTab] = useState<AccessLogTab>("list")
-  const [draft, setDraft] = useState<SearchDraft>(emptyDraft)
-  const [filters, setFilters] = useState<SearchDraft>(emptyDraft)
-  const [pageSize, setPageSize] = useState(20)
-  const [page, setPage] = useState(0)
-  const [detailSort, setDetailSort] = useState("logged_at:desc")
-  const [foldSort, setFoldSort] = useState("bucket_started_at:desc")
-  const [ipSort, setIpSort] = useState("total_requests:desc")
-  const [foldMinutes, setFoldMinutes] = useState<3 | 5>(3)
-  const [trendIp, setTrendIp] = useState("")
-  const [appliedTrendIp, setAppliedTrendIp] = useState("")
-  const [cleanupOpen, setCleanupOpen] = useState(false)
+  const queryClient = useQueryClient();
+  const [tab, setTab] = useState<AccessLogTab>('list');
+  const [draft, setDraft] = useState<SearchDraft>(emptyDraft);
+  const [filters, setFilters] = useState<SearchDraft>(emptyDraft);
+  const [pageSize, setPageSize] = useState(20);
+  const [page, setPage] = useState(0);
+  const [detailSort, setDetailSort] = useState('logged_at:desc');
+  const [foldSort, setFoldSort] = useState('bucket_started_at:desc');
+  const [ipSort, setIpSort] = useState('total_requests:desc');
+  const [foldMinutes, setFoldMinutes] = useState<3 | 5>(3);
+  const [trendIp, setTrendIp] = useState('');
+  const [appliedTrendIp, setAppliedTrendIp] = useState('');
+  const [cleanupOpen, setCleanupOpen] = useState(false);
 
-  const detailSortState = parseSortValue(detailSort)
-  const foldSortState = parseSortValue(foldSort)
-  const ipSortState = parseSortValue(ipSort)
+  const detailSortState = parseSortValue(detailSort);
+  const foldSortState = parseSortValue(foldSort);
+  const ipSortState = parseSortValue(ipSort);
 
   const listQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "list", filters, page, pageSize, detailSort],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'list',
+      filters,
+      page,
+      pageSize,
+      detailSort,
+    ],
     queryFn: () =>
       AccessLogService.list({
         node_id: filters.nodeId || undefined,
@@ -101,11 +137,20 @@ export default function AccessLogsPage() {
         sort_by: detailSortState.sortBy,
         sort_order: detailSortState.sortOrder,
       }),
-    enabled: tab === "list",
-  })
+    enabled: tab === 'list',
+  });
 
   const foldsQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "folds", filters, page, pageSize, foldSort, foldMinutes],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'folds',
+      filters,
+      page,
+      pageSize,
+      foldSort,
+      foldMinutes,
+    ],
     queryFn: () =>
       AccessLogService.listFolds({
         node_id: filters.nodeId || undefined,
@@ -118,11 +163,19 @@ export default function AccessLogsPage() {
         sort_order: foldSortState.sortOrder,
         fold_minutes: foldMinutes,
       }),
-    enabled: tab === "folds",
-  })
+    enabled: tab === 'folds',
+  });
 
   const ipSummaryQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "ip-summary", filters, page, pageSize, ipSort],
+    queryKey: [
+      'openflare',
+      'access-logs',
+      'ip-summary',
+      filters,
+      page,
+      pageSize,
+      ipSort,
+    ],
     queryFn: () =>
       AccessLogService.listIPSummaries({
         node_id: filters.nodeId || undefined,
@@ -133,11 +186,11 @@ export default function AccessLogsPage() {
         sort_by: ipSortState.sortBy,
         sort_order: ipSortState.sortOrder,
       }),
-    enabled: tab === "ip-summary",
-  })
+    enabled: tab === 'ip-summary',
+  });
 
   const ipTrendQuery = useQuery({
-    queryKey: ["openflare", "access-logs", "ip-trend", filters, appliedTrendIp],
+    queryKey: ['openflare', 'access-logs', 'ip-trend', filters, appliedTrendIp],
     queryFn: () =>
       AccessLogService.getIPTrend({
         node_id: filters.nodeId || undefined,
@@ -146,50 +199,52 @@ export default function AccessLogsPage() {
         hours: 24,
         bucket_minutes: 30,
       }),
-    enabled: tab === "ip-trend" && appliedTrendIp !== "",
-  })
+    enabled: tab === 'ip-trend' && appliedTrendIp !== '',
+  });
 
   const cleanupMutation = useMutation({
     mutationFn: (retentionDays: number) =>
       AccessLogService.cleanup({ retention_days: retentionDays }),
     onSuccess: async (result) => {
-      toast.success(`已清理 ${result.deleted_count} 条日志`)
-      setCleanupOpen(false)
-      await queryClient.invalidateQueries({ queryKey: ["openflare", "access-logs"] })
+      toast.success(`已清理 ${result.deleted_count} 条日志`);
+      setCleanupOpen(false);
+      await queryClient.invalidateQueries({
+        queryKey: ['openflare', 'access-logs'],
+      });
     },
     onError: (error) => {
-      toast.error(error instanceof Error ? error.message : "清理失败")
+      toast.error(error instanceof Error ? error.message : '清理失败');
     },
-  })
+  });
 
   const activeSummary = useMemo(() => {
-    if (tab === "list" && listQuery.data) {
+    if (tab === 'list' && listQuery.data) {
       return {
         totalRecord: listQuery.data.total_record,
         totalIp: listQuery.data.total_ip,
-      }
+      };
     }
-    if (tab === "folds" && foldsQuery.data) {
+    if (tab === 'folds' && foldsQuery.data) {
       return {
         totalRecord: foldsQuery.data.total_record,
         totalIp: foldsQuery.data.total_ip,
-      }
+      };
     }
-    if (tab === "ip-summary" && ipSummaryQuery.data) {
+    if (tab === 'ip-summary' && ipSummaryQuery.data) {
       return {
         totalRecord: 0,
         totalIp: ipSummaryQuery.data.total_ip,
-      }
+      };
     }
-    return { totalRecord: 0, totalIp: 0 }
-  }, [tab, listQuery.data, foldsQuery.data, ipSummaryQuery.data])
+    return { totalRecord: 0, totalIp: 0 };
+  }, [tab, listQuery.data, foldsQuery.data, ipSummaryQuery.data]);
 
   const trendChartData = useMemo(() => {
     return (ipTrendQuery.data?.points ?? []).map((point) => ({
       label: formatDateTime(point.bucket_started_at).slice(5),
       requests: point.request_count,
-    }))
-  }, [ipTrendQuery.data?.points])
+    }));
+  }, [ipTrendQuery.data?.points]);
 
   const handleSearch = useCallback(() => {
     setFilters({
@@ -197,93 +252,116 @@ export default function AccessLogsPage() {
       remoteAddr: draft.remoteAddr.trim(),
       host: draft.host.trim(),
       path: draft.path.trim(),
-    })
-    setPage(0)
-  }, [draft])
+    });
+    setPage(0);
+  }, [draft]);
 
   const handleReset = () => {
-    setDraft(emptyDraft)
-    setFilters(emptyDraft)
-    setPage(0)
-    setTrendIp("")
-    setAppliedTrendIp("")
-  }
+    setDraft(emptyDraft);
+    setFilters(emptyDraft);
+    setPage(0);
+    setTrendIp('');
+    setAppliedTrendIp('');
+  };
 
   useEffect(() => {
-    setPage(0)
-  }, [tab, pageSize])
+    setPage(0);
+  }, [tab, pageSize]);
 
   const refreshActive = () => {
-    if (tab === "list") void listQuery.refetch()
-    if (tab === "folds") void foldsQuery.refetch()
-    if (tab === "ip-summary") void ipSummaryQuery.refetch()
-    if (tab === "ip-trend") void ipTrendQuery.refetch()
-  }
+    if (tab === 'list') void listQuery.refetch();
+    if (tab === 'folds') void foldsQuery.refetch();
+    if (tab === 'ip-summary') void ipSummaryQuery.refetch();
+    if (tab === 'ip-trend') void ipTrendQuery.refetch();
+  };
 
   const isFetching =
     listQuery.isFetching ||
     foldsQuery.isFetching ||
     ipSummaryQuery.isFetching ||
-    ipTrendQuery.isFetching
+    ipTrendQuery.isFetching;
 
   return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center gap-2">
-          <ScrollText className="size-5 text-primary" />
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-2'>
+          <ScrollText className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">访问日志</h1>
-            <p className="text-sm text-muted-foreground">
+            <h1 className='text-2xl font-semibold tracking-tight'>访问日志</h1>
+            <p className='text-sm text-muted-foreground'>
               按节点、IP、域名与路径检索，支持时间折叠、IP 汇总与趋势分析。
             </p>
           </div>
         </div>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={refreshActive} disabled={isFetching}>
-            <RefreshCw className={`size-3.5 mr-1 ${isFetching ? "animate-spin" : ""}`} />
+        <div className='flex gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={refreshActive}
+            disabled={isFetching}
+          >
+            <RefreshCw
+              className={`size-3.5 mr-1 ${isFetching ? 'animate-spin' : ''}`}
+            />
             刷新
           </Button>
-          <Button variant="destructive" size="sm" onClick={() => setCleanupOpen(true)}>
-            <Trash2 className="size-3.5 mr-1" />
+          <Button
+            variant='destructive'
+            size='sm'
+            onClick={() => setCleanupOpen(true)}
+          >
+            <Trash2 className='size-3.5 mr-1' />
             清理日志
           </Button>
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-3">
+      <div className='grid gap-3 sm:grid-cols-3'>
         {[
-          { label: "访问记录", value: formatCompactNumber(activeSummary.totalRecord) },
-          { label: "来源 IP", value: formatCompactNumber(activeSummary.totalIp) },
           {
-            label: "当前视图",
+            label: '访问记录',
+            value: formatCompactNumber(activeSummary.totalRecord),
+          },
+          {
+            label: '来源 IP',
+            value: formatCompactNumber(activeSummary.totalIp),
+          },
+          {
+            label: '当前视图',
             value:
-              tab === "list"
-                ? "明细日志"
-                : tab === "folds"
-                  ? "时间折叠"
-                  : tab === "ip-summary"
-                    ? "IP 汇总"
-                    : "IP 趋势",
+              tab === 'list'
+                ? '明细日志'
+                : tab === 'folds'
+                  ? '时间折叠'
+                  : tab === 'ip-summary'
+                    ? 'IP 汇总'
+                    : 'IP 趋势',
           },
         ].map((item) => (
-          <div key={item.label} className="rounded-lg border border-dashed px-4 py-3">
-            <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div
+            key={item.label}
+            className='rounded-lg border border-dashed px-4 py-3'
+          >
+            <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
               {item.label}
             </p>
-            <p className="mt-1 text-lg font-semibold">{item.value}</p>
+            <p className='mt-1 text-lg font-semibold'>{item.value}</p>
           </div>
         ))}
       </div>
 
-      <Tabs value={tab} onValueChange={(value) => setTab(value as AccessLogTab)}>
-        <TabsList className="grid w-full grid-cols-2 lg:grid-cols-4">
-          <TabsTrigger value="list">明细列表</TabsTrigger>
-          <TabsTrigger value="folds">时间折叠</TabsTrigger>
-          <TabsTrigger value="ip-summary">IP 汇总</TabsTrigger>
-          <TabsTrigger value="ip-trend">IP 趋势</TabsTrigger>
+      <Tabs
+        value={tab}
+        onValueChange={(value) => setTab(value as AccessLogTab)}
+      >
+        <TabsList className='grid w-full grid-cols-2 lg:grid-cols-4'>
+          <TabsTrigger value='list'>明细列表</TabsTrigger>
+          <TabsTrigger value='folds'>时间折叠</TabsTrigger>
+          <TabsTrigger value='ip-summary'>IP 汇总</TabsTrigger>
+          <TabsTrigger value='ip-trend'>IP 趋势</TabsTrigger>
         </TabsList>
 
-        <div className="mt-4 rounded-lg border border-dashed bg-background p-4">
+        <div className='mt-4 rounded-lg border border-dashed bg-background p-4'>
           <AccessLogFilters
             tab={tab}
             draft={draft}
@@ -295,12 +373,12 @@ export default function AccessLogsPage() {
           />
         </div>
 
-        <TabsContent value="list" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-dashed">
-              <p className="text-sm font-medium">明细日志</p>
+        <TabsContent value='list' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex items-center justify-between px-4 py-3 border-b border-dashed'>
+              <p className='text-sm font-medium'>明细日志</p>
               <Select value={detailSort} onValueChange={setDetailSort}>
-                <SelectTrigger className="h-8 w-44 text-xs">
+                <SelectTrigger className='h-8 w-44 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -313,38 +391,50 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {listQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
-                  message={listQuery.error instanceof Error ? listQuery.error.message : "加载失败"}
+                  message={
+                    listQuery.error instanceof Error
+                      ? listQuery.error.message
+                      : '加载失败'
+                  }
                   onRetry={() => void listQuery.refetch()}
                 />
               </div>
             ) : listQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (listQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无访问日志" />
+              <EmptyStateWithBorder title='暂无访问日志' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">时间</TableHead>
-                    <TableHead className="text-xs">节点</TableHead>
-                    <TableHead className="text-xs">IP</TableHead>
-                    <TableHead className="text-xs">域名</TableHead>
-                    <TableHead className="text-xs">路径</TableHead>
-                    <TableHead className="text-xs">状态码</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>时间</TableHead>
+                    <TableHead className='text-xs'>节点</TableHead>
+                    <TableHead className='text-xs'>IP</TableHead>
+                    <TableHead className='text-xs'>域名</TableHead>
+                    <TableHead className='text-xs'>路径</TableHead>
+                    <TableHead className='text-xs'>状态码</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(listQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.id} className="border-dashed">
-                      <TableCell className="text-xs">{formatDateTime(item.logged_at)}</TableCell>
-                      <TableCell className="text-xs">{item.node_name || item.node_id}</TableCell>
-                      <TableCell className="text-xs font-mono">{item.remote_addr}</TableCell>
-                      <TableCell className="text-xs">{item.host}</TableCell>
-                      <TableCell className="text-xs max-w-48 truncate">{item.path}</TableCell>
+                    <TableRow key={item.id} className='border-dashed'>
+                      <TableCell className='text-xs'>
+                        {formatDateTime(item.logged_at)}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.node_name || item.node_id}
+                      </TableCell>
+                      <TableCell className='text-xs font-mono'>
+                        {item.remote_addr}
+                      </TableCell>
+                      <TableCell className='text-xs'>{item.host}</TableCell>
+                      <TableCell className='text-xs max-w-48 truncate'>
+                        {item.path}
+                      </TableCell>
                       <TableCell>
-                        <Badge variant="outline" className="text-[10px]">
+                        <Badge variant='outline' className='text-[10px]'>
                           {item.status_code}
                         </Badge>
                       </TableCell>
@@ -363,26 +453,28 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="folds" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b border-dashed">
-              <div className="flex items-center gap-2">
-                <p className="text-sm font-medium">时间折叠</p>
+        <TabsContent value='folds' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex flex-wrap items-center justify-between gap-2 px-4 py-3 border-b border-dashed'>
+              <div className='flex items-center gap-2'>
+                <p className='text-sm font-medium'>时间折叠</p>
                 <Select
                   value={String(foldMinutes)}
-                  onValueChange={(value) => setFoldMinutes(Number(value) as 3 | 5)}
+                  onValueChange={(value) =>
+                    setFoldMinutes(Number(value) as 3 | 5)
+                  }
                 >
-                  <SelectTrigger className="h-8 w-36 text-xs">
+                  <SelectTrigger className='h-8 w-36 text-xs'>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="3">3 分钟桶</SelectItem>
-                    <SelectItem value="5">5 分钟桶</SelectItem>
+                    <SelectItem value='3'>3 分钟桶</SelectItem>
+                    <SelectItem value='5'>5 分钟桶</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
               <Select value={foldSort} onValueChange={setFoldSort}>
-                <SelectTrigger className="h-8 w-44 text-xs">
+                <SelectTrigger className='h-8 w-44 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -395,12 +487,12 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {foldsQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
                   message={
                     foldsQuery.error instanceof Error
                       ? foldsQuery.error.message
-                      : "加载失败"
+                      : '加载失败'
                   }
                   onRetry={() => void foldsQuery.refetch()}
                 />
@@ -408,32 +500,47 @@ export default function AccessLogsPage() {
             ) : foldsQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (foldsQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无折叠数据" />
+              <EmptyStateWithBorder title='暂无折叠数据' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">时间桶</TableHead>
-                    <TableHead className="text-xs">请求数</TableHead>
-                    <TableHead className="text-xs">独立 IP</TableHead>
-                    <TableHead className="text-xs">独立域名</TableHead>
-                    <TableHead className="text-xs">2xx</TableHead>
-                    <TableHead className="text-xs">4xx</TableHead>
-                    <TableHead className="text-xs">5xx</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>时间桶</TableHead>
+                    <TableHead className='text-xs'>请求数</TableHead>
+                    <TableHead className='text-xs'>独立 IP</TableHead>
+                    <TableHead className='text-xs'>独立域名</TableHead>
+                    <TableHead className='text-xs'>2xx</TableHead>
+                    <TableHead className='text-xs'>4xx</TableHead>
+                    <TableHead className='text-xs'>5xx</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(foldsQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.bucket_started_at} className="border-dashed">
-                      <TableCell className="text-xs">
+                    <TableRow
+                      key={item.bucket_started_at}
+                      className='border-dashed'
+                    >
+                      <TableCell className='text-xs'>
                         {formatDateTime(item.bucket_started_at)}
                       </TableCell>
-                      <TableCell className="text-xs">{item.request_count}</TableCell>
-                      <TableCell className="text-xs">{item.unique_ip_count}</TableCell>
-                      <TableCell className="text-xs">{item.unique_host_count}</TableCell>
-                      <TableCell className="text-xs">{item.success_count}</TableCell>
-                      <TableCell className="text-xs">{item.client_error_count}</TableCell>
-                      <TableCell className="text-xs">{item.server_error_count}</TableCell>
+                      <TableCell className='text-xs'>
+                        {item.request_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.unique_ip_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.unique_host_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.success_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.client_error_count}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.server_error_count}
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>
@@ -449,12 +556,12 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="ip-summary" className="mt-4">
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-dashed">
-              <p className="text-sm font-medium">IP 汇总</p>
+        <TabsContent value='ip-summary' className='mt-4'>
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background'>
+            <div className='flex items-center justify-between px-4 py-3 border-b border-dashed'>
+              <p className='text-sm font-medium'>IP 汇总</p>
               <Select value={ipSort} onValueChange={setIpSort}>
-                <SelectTrigger className="h-8 w-52 text-xs">
+                <SelectTrigger className='h-8 w-52 text-xs'>
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -467,12 +574,12 @@ export default function AccessLogsPage() {
               </Select>
             </div>
             {ipSummaryQuery.isError ? (
-              <div className="p-4">
+              <div className='p-4'>
                 <ErrorInline
                   message={
                     ipSummaryQuery.error instanceof Error
                       ? ipSummaryQuery.error.message
-                      : "加载失败"
+                      : '加载失败'
                   }
                   onRetry={() => void ipSummaryQuery.refetch()}
                 />
@@ -480,24 +587,30 @@ export default function AccessLogsPage() {
             ) : ipSummaryQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : (ipSummaryQuery.data?.items ?? []).length === 0 ? (
-              <EmptyStateWithBorder title="暂无 IP 汇总数据" />
+              <EmptyStateWithBorder title='暂无 IP 汇总数据' />
             ) : (
               <Table>
-                <TableHeader className="bg-muted/40">
-                  <TableRow className="border-dashed hover:bg-transparent">
-                    <TableHead className="text-xs">IP</TableHead>
-                    <TableHead className="text-xs">总请求数</TableHead>
-                    <TableHead className="text-xs">近 3 小时</TableHead>
-                    <TableHead className="text-xs">最后访问</TableHead>
+                <TableHeader className='bg-muted/40'>
+                  <TableRow className='border-dashed hover:bg-transparent'>
+                    <TableHead className='text-xs'>IP</TableHead>
+                    <TableHead className='text-xs'>总请求数</TableHead>
+                    <TableHead className='text-xs'>近 3 小时</TableHead>
+                    <TableHead className='text-xs'>最后访问</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {(ipSummaryQuery.data?.items ?? []).map((item) => (
-                    <TableRow key={item.remote_addr} className="border-dashed">
-                      <TableCell className="text-xs font-mono">{item.remote_addr}</TableCell>
-                      <TableCell className="text-xs">{item.total_requests}</TableCell>
-                      <TableCell className="text-xs">{item.recent_requests}</TableCell>
-                      <TableCell className="text-xs">
+                    <TableRow key={item.remote_addr} className='border-dashed'>
+                      <TableCell className='text-xs font-mono'>
+                        {item.remote_addr}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.total_requests}
+                      </TableCell>
+                      <TableCell className='text-xs'>
+                        {item.recent_requests}
+                      </TableCell>
+                      <TableCell className='text-xs'>
                         {formatDateTime(item.last_seen_at)}
                       </TableCell>
                     </TableRow>
@@ -515,19 +628,21 @@ export default function AccessLogsPage() {
           </div>
         </TabsContent>
 
-        <TabsContent value="ip-trend" className="mt-4 space-y-4">
-          <div className="rounded-lg border border-dashed bg-background p-4 flex flex-col gap-3 sm:flex-row sm:items-end">
-            <div className="space-y-1.5 flex-1">
-              <p className="text-xs font-medium text-muted-foreground">趋势 IP</p>
+        <TabsContent value='ip-trend' className='mt-4 space-y-4'>
+          <div className='rounded-lg border border-dashed bg-background p-4 flex flex-col gap-3 sm:flex-row sm:items-end'>
+            <div className='space-y-1.5 flex-1'>
+              <p className='text-xs font-medium text-muted-foreground'>
+                趋势 IP
+              </p>
               <input
-                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-xs"
+                className='flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-xs'
                 value={trendIp}
                 onChange={(e) => setTrendIp(e.target.value)}
-                placeholder="输入要分析趋势的 IP 地址"
+                placeholder='输入要分析趋势的 IP 地址'
               />
             </div>
             <Button
-              size="sm"
+              size='sm'
               onClick={() => setAppliedTrendIp(trendIp.trim())}
               disabled={!trendIp.trim()}
             >
@@ -535,9 +650,9 @@ export default function AccessLogsPage() {
             </Button>
           </div>
 
-          <div className="rounded-lg border border-dashed overflow-hidden bg-background p-4">
+          <div className='rounded-lg border border-dashed overflow-hidden bg-background p-4'>
             {!appliedTrendIp ? (
-              <EmptyStateWithBorder description="请输入 IP 地址后查看 24 小时访问趋势。" />
+              <EmptyStateWithBorder description='请输入 IP 地址后查看 24 小时访问趋势。' />
             ) : ipTrendQuery.isLoading ? (
               <LoadingStateWithBorder />
             ) : ipTrendQuery.isError ? (
@@ -545,28 +660,41 @@ export default function AccessLogsPage() {
                 message={
                   ipTrendQuery.error instanceof Error
                     ? ipTrendQuery.error.message
-                    : "加载失败"
+                    : '加载失败'
                 }
                 onRetry={() => void ipTrendQuery.refetch()}
               />
             ) : trendChartData.length === 0 ? (
-              <EmptyStateWithBorder description="该 IP 在选定时间范围内没有访问记录。" />
+              <EmptyStateWithBorder description='该 IP 在选定时间范围内没有访问记录。' />
             ) : (
-              <div className="space-y-3">
-                <p className="text-sm font-medium">
+              <div className='space-y-3'>
+                <p className='text-sm font-medium'>
                   {appliedTrendIp} · 近 {ipTrendQuery.data?.hours ?? 24} 小时
                 </p>
-                <ChartContainer config={trendChartConfig} className="h-64 w-full">
+                <ChartContainer
+                  config={trendChartConfig}
+                  className='h-64 w-full'
+                >
                   <AreaChart data={trendChartData}>
                     <CartesianGrid vertical={false} />
-                    <XAxis dataKey="label" tickLine={false} axisLine={false} fontSize={10} />
-                    <YAxis tickLine={false} axisLine={false} fontSize={10} width={40} />
+                    <XAxis
+                      dataKey='label'
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={10}
+                    />
+                    <YAxis
+                      tickLine={false}
+                      axisLine={false}
+                      fontSize={10}
+                      width={40}
+                    />
                     <ChartTooltip content={<ChartTooltipContent />} />
                     <Area
-                      type="monotone"
-                      dataKey="requests"
-                      stroke="var(--color-requests)"
-                      fill="var(--color-requests)"
+                      type='monotone'
+                      dataKey='requests'
+                      stroke='var(--color-requests)'
+                      fill='var(--color-requests)'
                       fillOpacity={0.2}
                     />
                   </AreaChart>
@@ -584,5 +712,5 @@ export default function AccessLogsPage() {
         loading={cleanupMutation.isPending}
       />
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/database/components/cache-manager.tsx

@@ -1,16 +1,22 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
-import {HardDrive, RefreshCw, Trash2} from "lucide-react"
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { HardDrive, RefreshCw, Trash2 } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Skeleton} from "@/components/ui/skeleton"
-import {Label} from "@/components/ui/label"
-import {Input} from "@/components/ui/input"
-import {Switch} from "@/components/ui/switch"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
 import {
   Dialog,
   DialogContent,
@@ -18,183 +24,205 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import type {CacheStatus} from "@/lib/services/admin"
-import services from "@/lib/services"
+} from '@/components/ui/dialog';
+import type { CacheStatus } from '@/lib/services/admin';
+import services from '@/lib/services';
 
 /**
  * 格式化字节大小
  */
 const formatBytes = (bytes: number) => {
-  if (bytes === 0) return "0 Bytes"
-  const k = 1024
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-}
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
 
 /**
  * 格式化数字，每3位加逗号
  */
 const formatNumber = (num: number | string) => {
-  if (num === undefined || num === null) return "0"
-  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
-}
+  if (num === undefined || num === null) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ',');
+};
 
 interface CacheManagerProps {
-  refreshTrigger: number
+  refreshTrigger: number;
 }
 
 export function CacheManager({ refreshTrigger }: CacheManagerProps) {
-  const [cacheStatus, setCacheStatus] = useState<CacheStatus | null>(null)
-  const [loadingCache, setLoadingCache] = useState<boolean>(true)
-  const [savingConfig, setSavingConfig] = useState<boolean>(false)
-  const [clearingCache, setClearingCache] = useState<boolean>(false)
-  const [showClearConfirm, setShowClearConfirm] = useState<boolean>(false)
+  const [cacheStatus, setCacheStatus] = useState<CacheStatus | null>(null);
+  const [loadingCache, setLoadingCache] = useState<boolean>(true);
+  const [savingConfig, setSavingConfig] = useState<boolean>(false);
+  const [clearingCache, setClearingCache] = useState<boolean>(false);
+  const [showClearConfirm, setShowClearConfirm] = useState<boolean>(false);
 
   // 策略配置表单状态
-  const [maxSizeMB, setMaxSizeMB] = useState<string>("100")
-  const [ttlMinutes, setTtlMinutes] = useState<string>("60")
-  const [lruEnabled, setLruEnabled] = useState<boolean>(true)
+  const [maxSizeMB, setMaxSizeMB] = useState<string>('100');
+  const [ttlMinutes, setTtlMinutes] = useState<string>('60');
+  const [lruEnabled, setLruEnabled] = useState<boolean>(true);
 
   // 获取磁盘缓存状态
   const fetchCacheStatus = useCallback(async (isSilent = false) => {
-    if (!isSilent) setLoadingCache(true)
+    if (!isSilent) setLoadingCache(true);
     try {
-      const data = await services.adminCache.getCacheStatus()
-      setCacheStatus(data)
-      setMaxSizeMB(data.max_size_mb.toString())
-      setTtlMinutes(data.ttl_minutes.toString())
-      setLruEnabled(data.lru_enabled)
+      const data = await services.adminCache.getCacheStatus();
+      setCacheStatus(data);
+      setMaxSizeMB(data.max_size_mb.toString());
+      setTtlMinutes(data.ttl_minutes.toString());
+      setLruEnabled(data.lru_enabled);
     } catch (err) {
-      toast.error("获取磁盘缓存状态失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('获取磁盘缓存状态失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setLoadingCache(false)
+      setLoadingCache(false);
     }
-  }, [])
+  }, []);
 
   // 保存配置
   const handleSaveConfig = async (e: React.FormEvent) => {
-    e.preventDefault()
-    const size = parseInt(maxSizeMB, 10)
-    const ttl = parseInt(ttlMinutes, 10)
+    e.preventDefault();
+    const size = parseInt(maxSizeMB, 10);
+    const ttl = parseInt(ttlMinutes, 10);
     if (isNaN(size) || size < 1) {
-      toast.error("保存失败", { description: "最大容量限制必须是大于等于 1 的整数" })
-      return
+      toast.error('保存失败', {
+        description: '最大容量限制必须是大于等于 1 的整数',
+      });
+      return;
     }
     if (isNaN(ttl) || ttl < 0) {
-      toast.error("保存失败", { description: "默认过期时间必须是大于等于 0 的整数" })
-      return
+      toast.error('保存失败', {
+        description: '默认过期时间必须是大于等于 0 的整数',
+      });
+      return;
     }
-    setSavingConfig(true)
+    setSavingConfig(true);
     try {
       await services.adminCache.updateCacheConfig({
         max_size_mb: size,
         ttl_minutes: ttl,
         lru_enabled: lruEnabled,
-      })
-      toast.success("保存成功", { description: "磁盘缓存策略已热更新" })
-      await fetchCacheStatus(true)
+      });
+      toast.success('保存成功', { description: '磁盘缓存策略已热更新' });
+      await fetchCacheStatus(true);
     } catch (err) {
-      toast.error("保存配置失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('保存配置失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setSavingConfig(false)
+      setSavingConfig(false);
     }
-  }
+  };
 
   // 清空磁盘缓存数据
   const handleClearCache = async () => {
-    setClearingCache(true)
+    setClearingCache(true);
     try {
-      await services.adminCache.clearCache()
-      toast.success("清空成功", { description: "缓存数据已全部清除" })
-      setShowClearConfirm(false)
-      await fetchCacheStatus(true)
+      await services.adminCache.clearCache();
+      toast.success('清空成功', { description: '缓存数据已全部清除' });
+      setShowClearConfirm(false);
+      await fetchCacheStatus(true);
     } catch (err) {
-      toast.error("清空缓存失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('清空缓存失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setClearingCache(false)
+      setClearingCache(false);
     }
-  }
+  };
 
   // 初始化拉取
   useEffect(() => {
-    fetchCacheStatus()
-  }, [fetchCacheStatus])
+    fetchCacheStatus();
+  }, [fetchCacheStatus]);
 
   // 当外部刷新触发器改变时自动刷新
   useEffect(() => {
-    fetchCacheStatus(true)
-  }, [refreshTrigger, fetchCacheStatus])
+    fetchCacheStatus(true);
+  }, [refreshTrigger, fetchCacheStatus]);
 
   return (
-    <Card className="border-border/40 bg-card/50 backdrop-blur-sm shadow-sm">
-      <CardHeader className="pb-3 border-b border-dashed flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div className="space-y-0.5">
-          <div className="flex items-center gap-2">
-            <HardDrive className="size-4 text-primary animate-pulse" />
-            <CardTitle className="text-sm font-semibold">缓存管理</CardTitle>
+    <Card className='border-border/40 bg-card/50 backdrop-blur-sm shadow-sm'>
+      <CardHeader className='pb-3 border-b border-dashed flex flex-col md:flex-row md:items-center md:justify-between gap-4'>
+        <div className='space-y-0.5'>
+          <div className='flex items-center gap-2'>
+            <HardDrive className='size-4 text-primary animate-pulse' />
+            <CardTitle className='text-sm font-semibold'>缓存管理</CardTitle>
           </div>
-          <CardDescription className="text-[11px]">管理和监控系统级磁盘缓存的资源占用、生命周期及淘汰策略</CardDescription>
+          <CardDescription className='text-[11px]'>
+            管理和监控系统级磁盘缓存的资源占用、生命周期及淘汰策略
+          </CardDescription>
         </div>
 
         <Button
-          size="sm"
-          variant="secondary"
-          className="h-8 gap-1.5 text-xs self-start md:self-auto"
+          size='sm'
+          variant='secondary'
+          className='h-8 gap-1.5 text-xs self-start md:self-auto'
           onClick={() => fetchCacheStatus(true)}
           disabled={loadingCache}
         >
-          <RefreshCw className={`size-3 ${loadingCache ? "animate-spin" : ""}`} />
+          <RefreshCw
+            className={`size-3 ${loadingCache ? 'animate-spin' : ''}`}
+          />
           刷新状态
         </Button>
       </CardHeader>
-      <CardContent className="pt-4">
+      <CardContent className='pt-4'>
         {loadingCache && !cacheStatus ? (
-          <div className="space-y-3 py-6">
-            <Skeleton className="h-6 w-full" />
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
+          <div className='space-y-3 py-6'>
+            <Skeleton className='h-6 w-full' />
+            <Skeleton className='h-10 w-full' />
+            <Skeleton className='h-10 w-full' />
           </div>
         ) : cacheStatus ? (
-          <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <div className='grid grid-cols-1 lg:grid-cols-5 gap-6'>
             {/* 左边：状态区 (2/5 cols) */}
-            <div className="lg:col-span-2 space-y-4">
-              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">运行状态</h4>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className='lg:col-span-2 space-y-4'>
+              <h4 className='text-xs font-semibold text-muted-foreground uppercase tracking-wider'>
+                运行状态
+              </h4>
+              <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
                 {/* 已占空间 */}
-                <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
-                  <p className="text-[10px] text-muted-foreground font-medium mb-1">已用空间</p>
-                  <p className="text-xl font-bold tracking-tight text-foreground">
+                <div className='p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300'>
+                  <p className='text-[10px] text-muted-foreground font-medium mb-1'>
+                    已用空间
+                  </p>
+                  <p className='text-xl font-bold tracking-tight text-foreground'>
                     {formatBytes(cacheStatus.total_size)}
                   </p>
                 </div>
                 {/* Key数量 */}
-                <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
-                  <p className="text-[10px] text-muted-foreground font-medium mb-1">缓存键数量</p>
-                  <p className="text-xl font-bold tracking-tight text-foreground">
-                    {formatNumber(cacheStatus.keys_count)} <span className="text-xs text-muted-foreground font-normal">个文件</span>
+                <div className='p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300'>
+                  <p className='text-[10px] text-muted-foreground font-medium mb-1'>
+                    缓存键数量
+                  </p>
+                  <p className='text-xl font-bold tracking-tight text-foreground'>
+                    {formatNumber(cacheStatus.keys_count)}{' '}
+                    <span className='text-xs text-muted-foreground font-normal'>
+                      个文件
+                    </span>
                   </p>
                 </div>
               </div>
 
               {/* 存储路径 */}
-              <div className="p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300">
-                <p className="text-[10px] text-muted-foreground font-medium mb-1.5">缓存基准目录</p>
-                <code className="text-xs font-mono bg-muted/60 px-2 py-1 rounded-md block truncate" title={cacheStatus.base_path}>
+              <div className='p-4 rounded-xl border border-border/40 bg-background/30 backdrop-blur-xs hover:border-primary/20 transition-all duration-300'>
+                <p className='text-[10px] text-muted-foreground font-medium mb-1.5'>
+                  缓存基准目录
+                </p>
+                <code
+                  className='text-xs font-mono bg-muted/60 px-2 py-1 rounded-md block truncate'
+                  title={cacheStatus.base_path}
+                >
                   {cacheStatus.base_path}
                 </code>
               </div>
               <Button
-                variant="secondary"
-                size="sm"
-                className="h-8 text-xs font-medium w-full"
+                variant='secondary'
+                size='sm'
+                className='h-8 text-xs font-medium w-full'
                 onClick={() => setShowClearConfirm(true)}
               >
                 立即清空缓存
@@ -202,111 +230,125 @@ export function CacheManager({ refreshTrigger }: CacheManagerProps) {
             </div>
 
             {/* 右边：配置区 (3/5 cols) */}
-            <div className="lg:col-span-3 border-t lg:border-t-0 lg:border-l border-border/40 pt-6 lg:pt-0 lg:pl-6 space-y-4">
-              <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">策略配置</h4>
-              <form onSubmit={handleSaveConfig} className="space-y-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                  <div className="space-y-1.5">
-                    <Label htmlFor="maxSizeMB" className="text-xs font-medium">最大容量限制 (MB)</Label>
+            <div className='lg:col-span-3 border-t lg:border-t-0 lg:border-l border-border/40 pt-6 lg:pt-0 lg:pl-6 space-y-4'>
+              <h4 className='text-xs font-semibold text-muted-foreground uppercase tracking-wider'>
+                策略配置
+              </h4>
+              <form onSubmit={handleSaveConfig} className='space-y-4'>
+                <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+                  <div className='space-y-1.5'>
+                    <Label htmlFor='maxSizeMB' className='text-xs font-medium'>
+                      最大容量限制 (MB)
+                    </Label>
                     <Input
-                      id="maxSizeMB"
-                      type="number"
-                      min="1"
+                      id='maxSizeMB'
+                      type='number'
+                      min='1'
                       value={maxSizeMB}
                       onChange={(e) => setMaxSizeMB(e.target.value)}
-                      className="h-8 text-xs bg-background/50 border-border/40"
-                      placeholder="例如 100"
+                      className='h-8 text-xs bg-background/50 border-border/40'
+                      placeholder='例如 100'
                       required
                     />
-                    <p className="text-[9px] text-muted-foreground">当总大小超出该值时，自动触发淘汰算法</p>
+                    <p className='text-[9px] text-muted-foreground'>
+                      当总大小超出该值时，自动触发淘汰算法
+                    </p>
                   </div>
 
-                  <div className="space-y-1.5">
-                    <Label htmlFor="ttlMinutes" className="text-xs font-medium">生存时间限制 (分钟)</Label>
+                  <div className='space-y-1.5'>
+                    <Label htmlFor='ttlMinutes' className='text-xs font-medium'>
+                      生存时间限制 (分钟)
+                    </Label>
                     <Input
-                      id="ttlMinutes"
-                      type="number"
-                      min="0"
+                      id='ttlMinutes'
+                      type='number'
+                      min='0'
                       value={ttlMinutes}
                       onChange={(e) => setTtlMinutes(e.target.value)}
-                      className="h-8 text-xs bg-background/50 border-border/40"
-                      placeholder="例如 60，0 表示永不过期"
+                      className='h-8 text-xs bg-background/50 border-border/40'
+                      placeholder='例如 60，0 表示永不过期'
                       required
                     />
-                    <p className="text-[9px] text-muted-foreground">缓存项的最长存活时间，超期后将失效被清理</p>
+                    <p className='text-[9px] text-muted-foreground'>
+                      缓存项的最长存活时间，超期后将失效被清理
+                    </p>
                   </div>
                 </div>
 
-                <div className="flex items-start justify-between p-4 rounded-xl border border-border/40 bg-background/20">
-                  <div className="space-y-1 pr-4">
-                    <Label htmlFor="lruEnabled" className="text-xs font-semibold block cursor-pointer">
+                <div className='flex items-start justify-between p-4 rounded-xl border border-border/40 bg-background/20'>
+                  <div className='space-y-1 pr-4'>
+                    <Label
+                      htmlFor='lruEnabled'
+                      className='text-xs font-semibold block cursor-pointer'
+                    >
                       启用 LRU 淘汰机制
                     </Label>
-                    <span className="text-[10px] text-muted-foreground block">
+                    <span className='text-[10px] text-muted-foreground block'>
                       在到达最大容量限制时，自动移除最久未被访问的缓存项。关闭该功能仅清理过期项。
                     </span>
                   </div>
                   <Switch
-                    id="lruEnabled"
+                    id='lruEnabled'
                     checked={lruEnabled}
                     onCheckedChange={setLruEnabled}
                   />
                 </div>
 
-                <div className="flex justify-end pt-2">
+                <div className='flex justify-end pt-2'>
                   <Button
-                    type="submit"
+                    type='submit'
                     disabled={savingConfig}
-                    className="h-8 text-xs px-4"
+                    className='h-8 text-xs px-4'
                   >
-                    {savingConfig ? "正在保存..." : "保存设置"}
+                    {savingConfig ? '正在保存...' : '保存设置'}
                   </Button>
                 </div>
               </form>
             </div>
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
-            <HardDrive className="size-8 opacity-45 mb-2" />
-            <span className="text-xs">未加载到缓存状态信息</span>
+          <div className='flex flex-col items-center justify-center py-10 text-muted-foreground'>
+            <HardDrive className='size-8 opacity-45 mb-2' />
+            <span className='text-xs'>未加载到缓存状态信息</span>
           </div>
         )}
       </CardContent>
 
       {/* 清除缓存确认对话框 */}
       <Dialog open={showClearConfirm} onOpenChange={setShowClearConfirm}>
-        <DialogContent className="sm:max-w-md">
+        <DialogContent className='sm:max-w-md'>
           <DialogHeader>
-            <DialogTitle className="text-sm font-semibold flex items-center gap-2 text-destructive">
-              <Trash2 className="size-4" />
+            <DialogTitle className='text-sm font-semibold flex items-center gap-2 text-destructive'>
+              <Trash2 className='size-4' />
               确认清空所有缓存？
             </DialogTitle>
-            <DialogDescription className="text-xs text-muted-foreground pt-1">
-              该操作将彻底清空磁盘目录下的全部缓存文件（包含临时解压、处理后的图片及各种块文件），重置键数量统计为 0。此操作不可撤销，且可能导致用户拉取资源时出现一过性的响应变慢。
+            <DialogDescription className='text-xs text-muted-foreground pt-1'>
+              该操作将彻底清空磁盘目录下的全部缓存文件（包含临时解压、处理后的图片及各种块文件），重置键数量统计为
+              0。此操作不可撤销，且可能导致用户拉取资源时出现一过性的响应变慢。
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter className="flex gap-2 justify-end mt-4">
+          <DialogFooter className='flex gap-2 justify-end mt-4'>
             <Button
-              variant="outline"
-              size="sm"
-              className="h-8 text-xs"
+              variant='outline'
+              size='sm'
+              className='h-8 text-xs'
               onClick={() => setShowClearConfirm(false)}
               disabled={clearingCache}
             >
               取消
             </Button>
             <Button
-              variant="destructive"
-              size="sm"
-              className="h-8 text-xs"
+              variant='destructive'
+              size='sm'
+              className='h-8 text-xs'
               onClick={handleClearCache}
               disabled={clearingCache}
             >
-              {clearingCache ? "清理中..." : "确认清空"}
+              {clearingCache ? '清理中...' : '确认清空'}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </Card>
-  )
+  );
 }

frontend/app/(main)/admin/database/components/sql-console.tsx

@@ -1,182 +1,210 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useRef, useState} from "react"
-import {useTheme} from "next-themes"
-import CodeMirror from "@uiw/react-codemirror"
-import {sql} from "@codemirror/lang-sql"
-import {toast} from "sonner"
-import {ArrowLeft, Play, RefreshCw, Terminal, Trash2,} from "lucide-react"
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { useTheme } from 'next-themes';
+import CodeMirror from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { toast } from 'sonner';
+import { ArrowLeft, Play, RefreshCw, Terminal, Trash2 } from 'lucide-react';
 
-import {Button} from "@/components/ui/button"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import type {ExecuteSQLResponse} from "@/lib/services/db-manage"
-import {DbManageService} from "@/lib/services/db-manage"
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { ExecuteSQLResponse } from '@/lib/services/db-manage';
+import { DbManageService } from '@/lib/services/db-manage';
 
 /**
  * 格式化表格单元格内容
  */
 const formatCellValue = (val: unknown): string => {
-  if (val === null || val === undefined) return "-"
-  if (typeof val === "boolean") return val ? "true" : "false"
-  if (typeof val === "object") {
+  if (val === null || val === undefined) return '-';
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (typeof val === 'object') {
     try {
-      return JSON.stringify(val)
+      return JSON.stringify(val);
     } catch {
-      return "[Object]"
+      return '[Object]';
     }
   }
-  return String(val)
-}
+  return String(val);
+};
 
 interface SQLConsoleProps {
-  dbType?: string // "postgres" | "sqlite"
-  onClose: () => void
+  dbType?: string; // "postgres" | "sqlite"
+  onClose: () => void;
 }
 
 export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
   // SQL 控制台状态
-  const [sqlQuery, setSqlQuery] = useState<string>("")
-  const [executingSQL, setExecutingSQL] = useState<boolean>(false)
-  const [sqlResult, setSqlResult] = useState<ExecuteSQLResponse | null>(null)
-  const [sqlError, setSqlError] = useState<string | null>(null)
+  const [sqlQuery, setSqlQuery] = useState<string>('');
+  const [executingSQL, setExecutingSQL] = useState<boolean>(false);
+  const [sqlResult, setSqlResult] = useState<ExecuteSQLResponse | null>(null);
+  const [sqlError, setSqlError] = useState<string | null>(null);
 
   // 拖拽与主题状态
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [editorHeight, setEditorHeight] = useState<number>(240)
-  const { resolvedTheme } = useTheme()
-  const cmTheme = resolvedTheme === "dark" ? "dark" : "light"
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = useState<number>(240);
+  const { resolvedTheme } = useTheme();
+  const cmTheme = resolvedTheme === 'dark' ? 'dark' : 'light';
 
   const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault()
-    const startY = e.clientY
-    const startHeight = editorHeight
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = editorHeight;
 
     const handleMouseMove = (moveEvent: MouseEvent) => {
-      if (!containerRef.current) return
-      const deltaY = moveEvent.clientY - startY
-      const containerHeight = containerRef.current.getBoundingClientRect().height
-      const newHeight = startHeight + deltaY
+      if (!containerRef.current) return;
+      const deltaY = moveEvent.clientY - startY;
+      const containerHeight =
+        containerRef.current.getBoundingClientRect().height;
+      const newHeight = startHeight + deltaY;
 
       // Limit editor height between 80px and containerHeight - 80px
       if (newHeight > 80 && newHeight < containerHeight - 80) {
-        setEditorHeight(newHeight)
+        setEditorHeight(newHeight);
       }
-    }
+    };
 
     const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
 
-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
 
   // 执行 SQL 查询
   const handleExecuteSQL = async () => {
-    if (!sqlQuery.trim()) return
-    setExecutingSQL(true)
-    setSqlResult(null)
-    setSqlError(null)
+    if (!sqlQuery.trim()) return;
+    setExecutingSQL(true);
+    setSqlResult(null);
+    setSqlError(null);
     try {
-      const result = await DbManageService.executeSQL(sqlQuery)
-      setSqlResult(result)
-      toast.success("SQL 执行成功")
+      const result = await DbManageService.executeSQL(sqlQuery);
+      setSqlResult(result);
+      toast.success('SQL 执行成功');
     } catch (err) {
-      setSqlError(err instanceof Error ? err.message : "未知执行错误")
-      toast.error("SQL 执行失败")
+      setSqlError(err instanceof Error ? err.message : '未知执行错误');
+      toast.error('SQL 执行失败');
     } finally {
-      setExecutingSQL(false)
+      setExecutingSQL(false);
     }
-  }
+  };
 
   // Preset SQL 选择器
   const handlePresetSQLChange = (query: string) => {
-    setSqlQuery(query)
-  }
+    setSqlQuery(query);
+  };
 
   const handleClose = () => {
-    setSqlResult(null)
-    setSqlError(null)
-    onClose()
-  }
+    setSqlResult(null);
+    setSqlError(null);
+    onClose();
+  };
 
   return (
-    <div className="py-6 px-1 space-y-6 w-full">
+    <div className='py-6 px-1 space-y-6 w-full'>
       {/* 顶部控制与标题 */}
-      <div className="flex items-center justify-between pb-2">
-        <div className="flex items-center gap-3">
+      <div className='flex items-center justify-between pb-2'>
+        <div className='flex items-center gap-3'>
           <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8"
+            variant='outline'
+            size='icon'
+            className='h-8 w-8'
             onClick={handleClose}
           >
-            <ArrowLeft className="size-4" />
+            <ArrowLeft className='size-4' />
           </Button>
-          <div className="flex items-center gap-2">
-            <Terminal className="size-5 text-primary" />
+          <div className='flex items-center gap-2'>
+            <Terminal className='size-5 text-primary' />
             <div>
-              <h1 className="text-2xl font-semibold tracking-tight">SQL 查询终端</h1>
+              <h1 className='text-2xl font-semibold tracking-tight'>
+                SQL 查询终端
+              </h1>
             </div>
           </div>
         </div>
-        <div className="text-xs text-muted-foreground font-mono">
-          {dbType === "postgres" ? "PostgreSQL Connected" : "SQLite Connected"}
+        <div className='text-xs text-muted-foreground font-mono'>
+          {dbType === 'postgres' ? 'PostgreSQL Connected' : 'SQLite Connected'}
         </div>
       </div>
 
       {/* 类似于 VS Code 的单个整体编辑器+结果区域，固定高度，有分水岭拖拽调整大小 */}
       <div
         ref={containerRef}
-        className="w-full border border-border/40 bg-card/60 backdrop-blur-md rounded-lg overflow-hidden flex flex-col shadow-sm h-[calc(100vh-140px)] min-h-[500px]"
+        className='w-full border border-border/40 bg-card/60 backdrop-blur-md rounded-lg overflow-hidden flex flex-col shadow-sm h-[calc(100vh-140px)] min-h-[500px]'
       >
         {/* 顶部编辑工具栏 */}
-        <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 shrink-0 gap-4 flex-wrap">
-          <div className="flex items-center gap-2">
-            <Terminal className="size-4 text-primary" />
-            <span className="text-xs font-semibold">SQL 编辑器</span>
+        <div className='flex items-center justify-between px-4 py-2 border-b bg-muted/40 shrink-0 gap-4 flex-wrap'>
+          <div className='flex items-center gap-2'>
+            <Terminal className='size-4 text-primary' />
+            <span className='text-xs font-semibold'>SQL 编辑器</span>
           </div>
 
-          <div className="flex items-center gap-3 flex-wrap">
+          <div className='flex items-center gap-3 flex-wrap'>
             {/* 快速模板 */}
-            <div className="flex items-center gap-1.5">
-              <span className="text-[11px] text-muted-foreground">快速模板:</span>
+            <div className='flex items-center gap-1.5'>
+              <span className='text-[11px] text-muted-foreground'>
+                快速模板:
+              </span>
               <Select onValueChange={handlePresetSQLChange}>
-                <SelectTrigger className="h-7 w-[180px] text-[11px] bg-background">
-                  <SelectValue placeholder="选择预设 SQL" />
+                <SelectTrigger className='h-7 w-[180px] text-[11px] bg-background'>
+                  <SelectValue placeholder='选择预设 SQL' />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="SELECT * FROM users LIMIT 10;">查询用户 (SELECT users)</SelectItem>
-                  <SelectItem value="SELECT * FROM uploads LIMIT 10;">查询文件 (SELECT uploads)</SelectItem>
-                  <SelectItem value="SELECT * FROM task_executions ORDER BY created_at DESC LIMIT 10;">查询任务流水 (SELECT task_executions)</SelectItem>
-                  <SelectItem value="SELECT sqlite_version();">SQLite 版本 (SQLite only)</SelectItem>
-                  <SelectItem value="SELECT version();">PostgreSQL 版本 (Postgres only)</SelectItem>
+                  <SelectItem value='SELECT * FROM users LIMIT 10;'>
+                    查询用户 (SELECT users)
+                  </SelectItem>
+                  <SelectItem value='SELECT * FROM uploads LIMIT 10;'>
+                    查询文件 (SELECT uploads)
+                  </SelectItem>
+                  <SelectItem value='SELECT * FROM task_executions ORDER BY created_at DESC LIMIT 10;'>
+                    查询任务流水 (SELECT task_executions)
+                  </SelectItem>
+                  <SelectItem value='SELECT sqlite_version();'>
+                    SQLite 版本 (SQLite only)
+                  </SelectItem>
+                  <SelectItem value='SELECT version();'>
+                    PostgreSQL 版本 (Postgres only)
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
 
             {/* 控制按钮 */}
-            <div className="flex items-center gap-1.5">
+            <div className='flex items-center gap-1.5'>
               <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                onClick={() => setSqlQuery("")}
-                title="清空编辑器"
+                variant='ghost'
+                size='icon'
+                className='h-7 w-7 text-muted-foreground hover:text-foreground'
+                onClick={() => setSqlQuery('')}
+                title='清空编辑器'
               >
-                <Trash2 className="size-3.5" />
+                <Trash2 className='size-3.5' />
               </Button>
               <Button
-                size="sm"
-                className="h-7 px-3 gap-1 text-[11px]"
+                size='sm'
+                className='h-7 px-3 gap-1 text-[11px]'
                 onClick={handleExecuteSQL}
                 disabled={executingSQL || !sqlQuery.trim()}
               >
-                <Play className="size-3" />
-                {executingSQL ? "运行中..." : "运行"}
+                <Play className='size-3' />
+                {executingSQL ? '运行中...' : '运行'}
               </Button>
             </div>
           </div>
@@ -185,15 +213,15 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
         {/* 上半区：编辑器输入框 */}
         <div
           style={{ height: editorHeight }}
-          className="w-full overflow-hidden relative min-h-[100px] bg-background"
+          className='w-full overflow-hidden relative min-h-[100px] bg-background'
         >
           <CodeMirror
             value={sqlQuery}
-            height="100%"
+            height='100%'
             extensions={[sql()]}
             theme={cmTheme}
             onChange={(value) => setSqlQuery(value)}
-            className="h-full text-xs font-mono"
+            className='h-full text-xs font-mono'
             basicSetup={{
               lineNumbers: true,
               foldGutter: true,
@@ -207,82 +235,107 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
         {/* 拖动分割线 */}
         <div
           onMouseDown={handleMouseDown}
-          className="h-1.5 bg-border/60 hover:bg-primary/50 cursor-row-resize transition-colors flex items-center justify-center shrink-0 select-none z-10"
-          title="拖动调整大小"
+          className='h-1.5 bg-border/60 hover:bg-primary/50 cursor-row-resize transition-colors flex items-center justify-center shrink-0 select-none z-10'
+          title='拖动调整大小'
         >
-          <div className="w-8 h-1 rounded bg-muted-foreground/30" />
+          <div className='w-8 h-1 rounded bg-muted-foreground/30' />
         </div>
 
         {/* 下半区：查看结果 (可滑动查看) */}
-        <div className="flex-1 min-h-[100px] flex flex-col overflow-hidden bg-muted/10">
+        <div className='flex-1 min-h-[100px] flex flex-col overflow-hidden bg-muted/10'>
           {/* 结果栏工具提示 */}
-          <div className="flex items-center justify-between px-4 py-1.5 border-b bg-muted/20 shrink-0 text-[11px] text-muted-foreground font-mono">
-            <span className="font-semibold">执行输出</span>
+          <div className='flex items-center justify-between px-4 py-1.5 border-b bg-muted/20 shrink-0 text-[11px] text-muted-foreground font-mono'>
+            <span className='font-semibold'>执行输出</span>
             {sqlResult && (
               <span>
-                类型: {sqlResult.type.toUpperCase()} | 耗时: {sqlResult.execution_time_ms} ms
+                类型: {sqlResult.type.toUpperCase()} | 耗时:{' '}
+                {sqlResult.execution_time_ms} ms
               </span>
             )}
           </div>
 
           {/* 滚动结果内容 */}
-          <div className="flex-1 overflow-auto p-4 min-h-0">
+          <div className='flex-1 overflow-auto p-4 min-h-0'>
             {executingSQL && (
-              <div className="flex flex-col items-center justify-center h-full py-10 space-y-2">
-                <RefreshCw className="size-5 text-primary animate-spin" />
-                <span className="text-xs text-muted-foreground">正在在数据库执行查询，请稍候...</span>
+              <div className='flex flex-col items-center justify-center h-full py-10 space-y-2'>
+                <RefreshCw className='size-5 text-primary animate-spin' />
+                <span className='text-xs text-muted-foreground'>
+                  正在在数据库执行查询，请稍候...
+                </span>
               </div>
             )}
 
             {sqlError && (
-              <div className="bg-destructive/10 border border-destructive/20 text-destructive font-mono text-xs p-4 rounded-lg overflow-auto h-full max-h-[300px]">
-                <p className="font-semibold mb-1">SQL 执行报错 (Error):</p>
-                <pre className="whitespace-pre-wrap">{sqlError}</pre>
+              <div className='bg-destructive/10 border border-destructive/20 text-destructive font-mono text-xs p-4 rounded-lg overflow-auto h-full max-h-[300px]'>
+                <p className='font-semibold mb-1'>SQL 执行报错 (Error):</p>
+                <pre className='whitespace-pre-wrap'>{sqlError}</pre>
               </div>
             )}
 
             {sqlResult && (
-              <div className="h-full flex flex-col">
-                {sqlResult.type === "select" && sqlResult.columns && sqlResult.columns.length > 0 && (
-                  <div className="border rounded-md overflow-auto max-w-full max-h-full bg-background relative flex-1 min-h-0">
-                    <Table className="text-xs">
-                      <TableHeader className="bg-muted/40 font-semibold sticky top-0 z-10">
-                        <TableRow>
-                          {sqlResult.columns.map((col) => (
-                            <TableHead key={col} className="font-semibold text-foreground py-2">{col}</TableHead>
-                          ))}
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {sqlResult.results && sqlResult.results.length > 0 ? (
-                          sqlResult.results.map((row, rIndex) => (
-                            <TableRow key={rIndex} className="hover:bg-muted/10">
-                              {sqlResult.columns!.map((col) => (
-                                <TableCell key={col} className="font-mono py-1.5">
-                                  <span className="truncate max-w-[240px] block" title={formatCellValue(row[col])}>
-                                    {formatCellValue(row[col])}
-                                  </span>
-                                </TableCell>
-                              ))}
-                            </TableRow>
-                          ))
-                        ) : (
+              <div className='h-full flex flex-col'>
+                {sqlResult.type === 'select' &&
+                  sqlResult.columns &&
+                  sqlResult.columns.length > 0 && (
+                    <div className='border rounded-md overflow-auto max-w-full max-h-full bg-background relative flex-1 min-h-0'>
+                      <Table className='text-xs'>
+                        <TableHeader className='bg-muted/40 font-semibold sticky top-0 z-10'>
                           <TableRow>
-                            <TableCell colSpan={sqlResult.columns.length} className="text-center py-10 text-muted-foreground">
-                              查询结果为空
-                            </TableCell>
+                            {sqlResult.columns.map((col) => (
+                              <TableHead
+                                key={col}
+                                className='font-semibold text-foreground py-2'
+                              >
+                                {col}
+                              </TableHead>
+                            ))}
                           </TableRow>
-                        )}
-                      </TableBody>
-                    </Table>
-                  </div>
-                )}
+                        </TableHeader>
+                        <TableBody>
+                          {sqlResult.results && sqlResult.results.length > 0 ? (
+                            sqlResult.results.map((row, rIndex) => (
+                              <TableRow
+                                key={rIndex}
+                                className='hover:bg-muted/10'
+                              >
+                                {sqlResult.columns!.map((col) => (
+                                  <TableCell
+                                    key={col}
+                                    className='font-mono py-1.5'
+                                  >
+                                    <span
+                                      className='truncate max-w-[240px] block'
+                                      title={formatCellValue(row[col])}
+                                    >
+                                      {formatCellValue(row[col])}
+                                    </span>
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            ))
+                          ) : (
+                            <TableRow>
+                              <TableCell
+                                colSpan={sqlResult.columns.length}
+                                className='text-center py-10 text-muted-foreground'
+                              >
+                                查询结果为空
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}
 
-                {sqlResult.type === "exec" && (
-                  <div className="bg-primary/5 border border-primary/10 text-primary-foreground font-mono text-xs p-6 rounded-lg text-center my-auto">
-                    <p className="text-foreground text-sm font-semibold">SQL 执行成功</p>
-                    <p className="text-muted-foreground mt-2">
-                      受影响行数: {sqlResult.affected_rows} 行，耗时 {sqlResult.execution_time_ms} 毫秒。
+                {sqlResult.type === 'exec' && (
+                  <div className='bg-primary/5 border border-primary/10 text-primary-foreground font-mono text-xs p-6 rounded-lg text-center my-auto'>
+                    <p className='text-foreground text-sm font-semibold'>
+                      SQL 执行成功
+                    </p>
+                    <p className='text-muted-foreground mt-2'>
+                      受影响行数: {sqlResult.affected_rows} 行，耗时{' '}
+                      {sqlResult.execution_time_ms} 毫秒。
                     </p>
                   </div>
                 )}
@@ -290,14 +343,16 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
             )}
 
             {!executingSQL && !sqlResult && !sqlError && (
-              <div className="flex flex-col items-center justify-center h-full py-10 text-muted-foreground opacity-60">
-                <Terminal className="size-8 mb-2" />
-                <span className="text-xs">编辑器就绪，请在上方编写 SQL 并运行查看结果</span>
+              <div className='flex flex-col items-center justify-center h-full py-10 text-muted-foreground opacity-60'>
+                <Terminal className='size-8 mb-2' />
+                <span className='text-xs'>
+                  编辑器就绪，请在上方编写 SQL 并运行查看结果
+                </span>
               </div>
             )}
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/database/components/table-browser.tsx

@@ -1,157 +1,195 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
-import {Layers, RefreshCw} from "lucide-react"
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Layers, RefreshCw } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Skeleton} from "@/components/ui/skeleton"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import {Button} from "@/components/ui/button"
-import type {TableDataResponse} from "@/lib/services/db-manage"
-import {DbManageService} from "@/lib/services/db-manage"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import type { TableDataResponse } from '@/lib/services/db-manage';
+import { DbManageService } from '@/lib/services/db-manage';
 
 /**
  * 格式化数字，每3位加逗号
  */
 const formatNumber = (num: number | string) => {
-  if (num === undefined || num === null) return "0"
-  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
-}
+  if (num === undefined || num === null) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ',');
+};
 
 /**
  * 格式化表格单元格内容
  */
 const formatCellValue = (val: unknown): string => {
-  if (val === null || val === undefined) return "-"
-  if (typeof val === "boolean") return val ? "true" : "false"
-  if (typeof val === "object") {
+  if (val === null || val === undefined) return '-';
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (typeof val === 'object') {
     try {
-      return JSON.stringify(val)
+      return JSON.stringify(val);
     } catch {
-      return "[Object]"
+      return '[Object]';
     }
   }
-  return String(val)
-}
+  return String(val);
+};
 
 interface TableBrowserProps {
-  tables: string[]
-  loadingTables: boolean
-  refreshTrigger: number
+  tables: string[];
+  loadingTables: boolean;
+  refreshTrigger: number;
 }
 
-export function TableBrowser({ tables, loadingTables, refreshTrigger }: TableBrowserProps) {
-  const [selectedTable, setSelectedTable] = useState<string>("")
-  const [tableData, setTableData] = useState<TableDataResponse | null>(null)
-  const [page, setPage] = useState<number>(1)
-  const [loadingData, setLoadingData] = useState<boolean>(false)
-  const pageSize = 10
+export function TableBrowser({
+  tables,
+  loadingTables,
+  refreshTrigger,
+}: TableBrowserProps) {
+  const [selectedTable, setSelectedTable] = useState<string>('');
+  const [tableData, setTableData] = useState<TableDataResponse | null>(null);
+  const [page, setPage] = useState<number>(1);
+  const [loadingData, setLoadingData] = useState<boolean>(false);
+  const pageSize = 10;
 
   // 获取具体表数据
-  const fetchTableData = useCallback(async (tableName: string, targetPage: number, size: number) => {
-    if (!tableName) return
-    setLoadingData(true)
-    try {
-      const data = await DbManageService.getTableData({
-        table: tableName,
-        page: targetPage,
-        pageSize: size,
-      })
-      setTableData(data)
-    } catch (err) {
-      toast.error(`获取数据表 ${tableName} 数据失败`, {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
-    } finally {
-      setLoadingData(false)
-    }
-  }, [])
+  const fetchTableData = useCallback(
+    async (tableName: string, targetPage: number, size: number) => {
+      if (!tableName) return;
+      setLoadingData(true);
+      try {
+        const data = await DbManageService.getTableData({
+          table: tableName,
+          page: targetPage,
+          pageSize: size,
+        });
+        setTableData(data);
+      } catch (err) {
+        toast.error(`获取数据表 ${tableName} 数据失败`, {
+          description: err instanceof Error ? err.message : '未知错误',
+        });
+      } finally {
+        setLoadingData(false);
+      }
+    },
+    [],
+  );
 
   // 默认选择第一张表
   useEffect(() => {
     if (tables.length > 0 && !selectedTable) {
-      setSelectedTable(tables[0])
+      setSelectedTable(tables[0]);
     }
-  }, [tables, selectedTable])
+  }, [tables, selectedTable]);
 
   // 当选中的表、页码或外部刷新触发器改变时获取数据
   useEffect(() => {
     if (selectedTable) {
-      fetchTableData(selectedTable, page, pageSize)
+      fetchTableData(selectedTable, page, pageSize);
     }
-  }, [selectedTable, page, pageSize, refreshTrigger, fetchTableData])
+  }, [selectedTable, page, pageSize, refreshTrigger, fetchTableData]);
 
   // 处理页码改变
   const handlePageChange = (newPage: number) => {
-    setPage(newPage)
-  }
+    setPage(newPage);
+  };
 
   // 处理表切换
   const handleTableChange = (value: string) => {
-    setSelectedTable(value)
-    setPage(1) // 切换表重置为第一页
-  }
+    setSelectedTable(value);
+    setPage(1); // 切换表重置为第一页
+  };
 
   return (
-    <Card className="border-border/40 bg-card/50 backdrop-blur-sm shadow-sm">
-      <CardHeader className="pb-3 border-b border-dashed flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-        <div className="space-y-0.5">
-          <CardTitle className="text-sm font-semibold">数据表浏览器</CardTitle>
-          <CardDescription className="text-[11px]">浏览数据库中的物理数据表详情及内容</CardDescription>
+    <Card className='border-border/40 bg-card/50 backdrop-blur-sm shadow-sm'>
+      <CardHeader className='pb-3 border-b border-dashed flex flex-col md:flex-row md:items-center md:justify-between gap-4'>
+        <div className='space-y-0.5'>
+          <CardTitle className='text-sm font-semibold'>数据表浏览器</CardTitle>
+          <CardDescription className='text-[11px]'>
+            浏览数据库中的物理数据表详情及内容
+          </CardDescription>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className='flex items-center gap-2'>
           {loadingTables ? (
-            <Skeleton className="h-8 w-48" />
+            <Skeleton className='h-8 w-48' />
           ) : (
             <Select value={selectedTable} onValueChange={handleTableChange}>
-              <SelectTrigger className="h-8 w-[200px] text-xs bg-background border-border/40">
-                <SelectValue placeholder="选择数据表" />
+              <SelectTrigger className='h-8 w-[200px] text-xs bg-background border-border/40'>
+                <SelectValue placeholder='选择数据表' />
               </SelectTrigger>
-              <SelectContent className="max-h-[300px]">
+              <SelectContent className='max-h-[300px]'>
                 {tables.map((t) => (
-                  <SelectItem key={t} value={t} className="text-xs font-mono">{t}</SelectItem>
+                  <SelectItem key={t} value={t} className='text-xs font-mono'>
+                    {t}
+                  </SelectItem>
                 ))}
               </SelectContent>
             </Select>
           )}
         </div>
       </CardHeader>
-      <CardContent className="pt-4">
+      <CardContent className='pt-4'>
         {loadingData && !tableData ? (
-          <div className="space-y-3 py-6">
-            <Skeleton className="h-6 w-full" />
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
+          <div className='space-y-3 py-6'>
+            <Skeleton className='h-6 w-full' />
+            <Skeleton className='h-10 w-full' />
+            <Skeleton className='h-10 w-full' />
+            <Skeleton className='h-10 w-full' />
           </div>
         ) : tableData && tableData.columns.length > 0 ? (
-          <div className="space-y-4">
+          <div className='space-y-4'>
             {/* 数据表格区域 */}
-            <div className="border rounded-md overflow-x-auto max-w-full bg-background/50 relative">
+            <div className='border rounded-md overflow-x-auto max-w-full bg-background/50 relative'>
               {loadingData && (
-                <div className="absolute inset-0 bg-background/40 backdrop-blur-[1px] flex items-center justify-center z-10">
-                  <RefreshCw className="size-5 text-primary animate-spin" />
+                <div className='absolute inset-0 bg-background/40 backdrop-blur-[1px] flex items-center justify-center z-10'>
+                  <RefreshCw className='size-5 text-primary animate-spin' />
                 </div>
               )}
-              <Table className="text-xs">
-                <TableHeader className="bg-muted/40 font-semibold sticky top-0">
+              <Table className='text-xs'>
+                <TableHeader className='bg-muted/40 font-semibold sticky top-0'>
                   <TableRow>
                     {tableData.columns.map((col) => (
-                      <TableHead key={col} className="font-semibold text-foreground py-2.5">{col}</TableHead>
+                      <TableHead
+                        key={col}
+                        className='font-semibold text-foreground py-2.5'
+                      >
+                        {col}
+                      </TableHead>
                     ))}
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {tableData.results && tableData.results.length > 0 ? (
                     tableData.results.map((row, rIndex) => (
-                      <TableRow key={rIndex} className="hover:bg-muted/10">
+                      <TableRow key={rIndex} className='hover:bg-muted/10'>
                         {tableData.columns.map((col) => (
-                          <TableCell key={col} className="font-mono py-2">
-                            <span className="truncate max-w-[200px] block" title={formatCellValue(row[col])}>
+                          <TableCell key={col} className='font-mono py-2'>
+                            <span
+                              className='truncate max-w-[200px] block'
+                              title={formatCellValue(row[col])}
+                            >
                               {formatCellValue(row[col])}
                             </span>
                           </TableCell>
@@ -160,7 +198,10 @@ export function TableBrowser({ tables, loadingTables, refreshTrigger }: TableBro
                     ))
                   ) : (
                     <TableRow>
-                      <TableCell colSpan={tableData.columns.length} className="text-center py-10 text-muted-foreground">
+                      <TableCell
+                        colSpan={tableData.columns.length}
+                        className='text-center py-10 text-muted-foreground'
+                      >
                         表中无记录数据
                       </TableCell>
                     </TableRow>
@@ -170,29 +211,36 @@ export function TableBrowser({ tables, loadingTables, refreshTrigger }: TableBro
             </div>
 
             {/* 分页控制 */}
-            <div className="flex items-center justify-between text-xs text-muted-foreground flex-wrap gap-2 pt-2 border-t border-dashed">
+            <div className='flex items-center justify-between text-xs text-muted-foreground flex-wrap gap-2 pt-2 border-t border-dashed'>
               <div>
-                总行数: <span className="font-mono text-foreground font-semibold">{formatNumber(tableData.total)}</span> 条记录
+                总行数:{' '}
+                <span className='font-mono text-foreground font-semibold'>
+                  {formatNumber(tableData.total)}
+                </span>{' '}
+                条记录
               </div>
-              <div className="flex items-center gap-2">
+              <div className='flex items-center gap-2'>
                 <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-7 px-2 text-[11px]"
+                  variant='outline'
+                  size='sm'
+                  className='h-7 px-2 text-[11px]'
                   onClick={() => handlePageChange(page - 1)}
                   disabled={page <= 1 || loadingData}
                 >
                   上一页
                 </Button>
-                <span className="text-xs px-2 font-mono">
-                  第 {page} / {Math.max(1, Math.ceil(tableData.total / pageSize))} 页
+                <span className='text-xs px-2 font-mono'>
+                  第 {page} /{' '}
+                  {Math.max(1, Math.ceil(tableData.total / pageSize))} 页
                 </span>
                 <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-7 px-2 text-[11px]"
+                  variant='outline'
+                  size='sm'
+                  className='h-7 px-2 text-[11px]'
                   onClick={() => handlePageChange(page + 1)}
-                  disabled={page >= Math.ceil(tableData.total / pageSize) || loadingData}
+                  disabled={
+                    page >= Math.ceil(tableData.total / pageSize) || loadingData
+                  }
                 >
                   下一页
                 </Button>
@@ -200,12 +248,12 @@ export function TableBrowser({ tables, loadingTables, refreshTrigger }: TableBro
             </div>
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
-            <Layers className="size-8 opacity-45 mb-2" />
-            <span className="text-xs">未选择数据表或表结构无法加载</span>
+          <div className='flex flex-col items-center justify-center py-10 text-muted-foreground'>
+            <Layers className='size-8 opacity-45 mb-2' />
+            <span className='text-xs'>未选择数据表或表结构无法加载</span>
           </div>
         )}
       </CardContent>
     </Card>
-  )
+  );
 }

frontend/app/(main)/admin/database/page-client.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import dynamic from "next/dynamic"
-import * as React from "react"
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
+import dynamic from 'next/dynamic';
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import {
   Activity,
   Cpu,
@@ -15,134 +15,142 @@ import {
   RefreshCw,
   Server,
   Terminal,
-} from "lucide-react"
+} from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Skeleton} from "@/components/ui/skeleton"
-import services from "@/lib/services"
-import type {DBOverview} from "@/lib/services/db-manage"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import services from '@/lib/services';
+import type { DBOverview } from '@/lib/services/db-manage';
 
 const sectionFallback = (
-  <div className="h-48 animate-pulse rounded-lg border border-border/40 bg-muted/20" />
-)
+  <div className='h-48 animate-pulse rounded-lg border border-border/40 bg-muted/20' />
+);
 
 const TableBrowser = dynamic(
-  () => import("./components/table-browser").then((mod) => mod.TableBrowser),
+  () => import('./components/table-browser').then((mod) => mod.TableBrowser),
   { loading: () => sectionFallback },
-)
+);
 
 const CacheManager = dynamic(
-  () => import("./components/cache-manager").then((mod) => mod.CacheManager),
+  () => import('./components/cache-manager').then((mod) => mod.CacheManager),
   { loading: () => sectionFallback },
-)
+);
 
 const SQLConsole = dynamic(
-  () => import("./components/sql-console").then((mod) => mod.SQLConsole),
+  () => import('./components/sql-console').then((mod) => mod.SQLConsole),
   { ssr: false },
-)
+);
 
 /**
  * 格式化数字，每3位加逗号
  */
 const formatNumber = (num: number | string) => {
-  if (num === undefined || num === null) return "0"
-  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
-}
+  if (num === undefined || num === null) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
 
 export function DatabasePageClient() {
   // 核心状态
-  const [overview, setOverview] = useState<DBOverview | null>(null)
-  const [tables, setTables] = useState<string[]>([])
-  const [loadingOverview, setLoadingOverview] = useState<boolean>(true)
-  const [loadingTables, setLoadingTables] = useState<boolean>(true)
-  const [exporting, setExporting] = useState<boolean>(false)
+  const [overview, setOverview] = useState<DBOverview | null>(null);
+  const [tables, setTables] = useState<string[]>([]);
+  const [loadingOverview, setLoadingOverview] = useState<boolean>(true);
+  const [loadingTables, setLoadingTables] = useState<boolean>(true);
+  const [exporting, setExporting] = useState<boolean>(false);
 
   // 协调子组件刷新与视图切换状态
-  const [showConsole, setShowConsole] = useState<boolean>(false)
-  const [refreshTrigger, setRefreshTrigger] = useState<number>(0)
+  const [showConsole, setShowConsole] = useState<boolean>(false);
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0);
 
   // 1. 获取运行概览
   const fetchOverview = useCallback(async (isSilent = false) => {
-    if (!isSilent) setLoadingOverview(true)
+    if (!isSilent) setLoadingOverview(true);
     try {
-      const data = await services.dbManage.getOverview()
-      setOverview(data)
+      const data = await services.dbManage.getOverview();
+      setOverview(data);
     } catch (err) {
-      toast.error("获取数据库概览失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('获取数据库概览失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setLoadingOverview(false)
+      setLoadingOverview(false);
     }
-  }, [])
+  }, []);
 
   // 2. 获取表列表
   const fetchTables = useCallback(async () => {
-    setLoadingTables(true)
+    setLoadingTables(true);
     try {
-      const data = await services.dbManage.listTables()
-      setTables(data)
+      const data = await services.dbManage.listTables();
+      setTables(data);
     } catch (err) {
-      toast.error("获取数据库数据表列表失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('获取数据库数据表列表失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setLoadingTables(false)
+      setLoadingTables(false);
     }
-  }, [])
+  }, []);
 
   // 3. 协调刷新
   const handleRefreshAll = () => {
-    fetchOverview()
-    fetchTables()
-    setRefreshTrigger((prev) => prev + 1)
-  }
+    fetchOverview();
+    fetchTables();
+    setRefreshTrigger((prev) => prev + 1);
+  };
 
   // 4. 导出数据库备份
   const handleExport = async () => {
-    setExporting(true)
+    setExporting(true);
     try {
-      const { blob, filename } = await services.dbManage.exportDatabase()
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      a.remove()
-      URL.revokeObjectURL(url)
-      toast.success("数据库导出成功", { description: `已下载归档文件: ${filename}` })
+      const { blob, filename } = await services.dbManage.exportDatabase();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      toast.success('数据库导出成功', {
+        description: `已下载归档文件: ${filename}`,
+      });
     } catch (err) {
-      toast.error("数据库导出失败", {
-        description: err instanceof Error ? err.message : "导出异常",
-      })
+      toast.error('数据库导出失败', {
+        description: err instanceof Error ? err.message : '导出异常',
+      });
     } finally {
-      setExporting(false)
+      setExporting(false);
     }
-  }
+  };
 
   // 初始化加载
   useEffect(() => {
-    fetchOverview()
-    fetchTables()
-  }, [fetchOverview, fetchTables])
+    fetchOverview();
+    fetchTables();
+  }, [fetchOverview, fetchTables]);
 
   // 渲染概览卡片骨架
   const renderOverviewSkeleton = () => (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+    <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4'>
       {Array.from({ length: 6 }).map((_, i) => (
-        <Card key={i} className="border-border/40 bg-card/50">
-          <CardHeader className="pb-2">
-            <Skeleton className="h-4 w-16" />
+        <Card key={i} className='border-border/40 bg-card/50'>
+          <CardHeader className='pb-2'>
+            <Skeleton className='h-4 w-16' />
           </CardHeader>
           <CardContent>
-            <Skeleton className="h-6 w-24" />
+            <Skeleton className='h-6 w-24' />
           </CardContent>
         </Card>
       ))}
     </div>
-  )
+  );
 
   // 渲染 SQL 查询控台全屏视图
   if (showConsole) {
@@ -151,110 +159,136 @@ export function DatabasePageClient() {
         dbType={overview?.type}
         onClose={() => setShowConsole(false)}
       />
-    )
+    );
   }
 
   // 正常页面排版布局
   return (
-    <div className="py-6 px-1 space-y-6 w-full">
+    <div className='py-6 px-1 space-y-6 w-full'>
       {/* 顶部控制与标题 */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4">
-        <div className="flex items-center gap-2">
-          <Database className="size-5 text-primary" />
+      <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4'>
+        <div className='flex items-center gap-2'>
+          <Database className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">数据管理</h1>
+            <h1 className='text-2xl font-semibold tracking-tight'>数据管理</h1>
           </div>
         </div>
         <Button
-          size="sm"
-          variant="secondary"
-          className="h-8 gap-1.5 text-xs self-start sm:self-auto"
+          size='sm'
+          variant='secondary'
+          className='h-8 gap-1.5 text-xs self-start sm:self-auto'
           onClick={handleRefreshAll}
           disabled={loadingOverview}
         >
-          <RefreshCw className={`size-3 ${loadingOverview ? "animate-spin" : ""}`} />
+          <RefreshCw
+            className={`size-3 ${loadingOverview ? 'animate-spin' : ''}`}
+          />
           刷新数据
         </Button>
       </div>
 
       {/* 1. 概览指标卡片组 */}
-      {loadingOverview ? (
-        renderOverviewSkeleton()
-      ) : (
-        overview && (
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-            {/* 卡片1: 数据库类型 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">数据库类型</CardDescription>
-                <Server className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm font-bold uppercase">{overview.type}</div>
-              </CardContent>
-            </Card>
+      {loadingOverview
+        ? renderOverviewSkeleton()
+        : overview && (
+            <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4'>
+              {/* 卡片1: 数据库类型 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    数据库类型
+                  </CardDescription>
+                  <Server className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-sm font-bold uppercase'>
+                    {overview.type}
+                  </div>
+                </CardContent>
+              </Card>
 
-            {/* 卡片2: 数据库版本 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">版本信息</CardDescription>
-                <Cpu className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-xs font-semibold truncate" title={overview.version}>
-                  {overview.version.split(" ").slice(0, 2).join(" ")}
-                </div>
-              </CardContent>
-            </Card>
+              {/* 卡片2: 数据库版本 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    版本信息
+                  </CardDescription>
+                  <Cpu className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div
+                    className='text-xs font-semibold truncate'
+                    title={overview.version}
+                  >
+                    {overview.version.split(' ').slice(0, 2).join(' ')}
+                  </div>
+                </CardContent>
+              </Card>
 
-            {/* 卡片3: 数据库名称 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">名称/路径</CardDescription>
-                <Database className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-xs font-semibold truncate" title={overview.name}>
-                  {overview.name.substring(overview.name.lastIndexOf("/") + 1)}
-                </div>
-              </CardContent>
-            </Card>
+              {/* 卡片3: 数据库名称 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    名称/路径
+                  </CardDescription>
+                  <Database className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div
+                    className='text-xs font-semibold truncate'
+                    title={overview.name}
+                  >
+                    {overview.name.substring(
+                      overview.name.lastIndexOf('/') + 1,
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
 
-            {/* 卡片4: 数据库大小 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">数据库大小</CardDescription>
-                <HardDrive className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm font-bold">{overview.size}</div>
-              </CardContent>
-            </Card>
+              {/* 卡片4: 数据库大小 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    数据库大小
+                  </CardDescription>
+                  <HardDrive className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-sm font-bold'>{overview.size}</div>
+                </CardContent>
+              </Card>
 
-            {/* 卡片5: 表数量 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">物理数据表</CardDescription>
-                <Layers className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm font-bold">{formatNumber(overview.table_count)}</div>
-              </CardContent>
-            </Card>
+              {/* 卡片5: 表数量 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    物理数据表
+                  </CardDescription>
+                  <Layers className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-sm font-bold'>
+                    {formatNumber(overview.table_count)}
+                  </div>
+                </CardContent>
+              </Card>
 
-            {/* 卡片6: 连接数 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <CardDescription className="text-[10px] font-medium">活跃连接数</CardDescription>
-                <Activity className="size-3.5 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-sm font-bold">{formatNumber(overview.connections)}</div>
-              </CardContent>
-            </Card>
-          </div>
-        )
-      )}
+              {/* 卡片6: 连接数 */}
+              <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-sm hover:border-primary/20 transition-all duration-300'>
+                <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                  <CardDescription className='text-[10px] font-medium'>
+                    活跃连接数
+                  </CardDescription>
+                  <Activity className='size-3.5 text-muted-foreground' />
+                </CardHeader>
+                <CardContent>
+                  <div className='text-sm font-bold'>
+                    {formatNumber(overview.connections)}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
 
       {/* 2. 数据表浏览器区块 */}
       <TableBrowser
@@ -264,60 +298,64 @@ export function DatabasePageClient() {
       />
 
       {/* 3. 缓存管理区块 */}
-      <CacheManager
-        refreshTrigger={refreshTrigger}
-      />
+      <CacheManager refreshTrigger={refreshTrigger} />
 
       {/* 4. 底部功能卡片区 */}
-      <Card className="border-border/40 bg-card/50 backdrop-blur-sm shadow-sm">
-        <CardHeader className="pb-3 border-b border-dashed">
-          <CardTitle className="text-sm font-semibold">功能区</CardTitle>
-          <CardDescription className="text-[11px]">数据库导出及自定义高级 SQL 执行终端</CardDescription>
+      <Card className='border-border/40 bg-card/50 backdrop-blur-sm shadow-sm'>
+        <CardHeader className='pb-3 border-b border-dashed'>
+          <CardTitle className='text-sm font-semibold'>功能区</CardTitle>
+          <CardDescription className='text-[11px]'>
+            数据库导出及自定义高级 SQL 执行终端
+          </CardDescription>
         </CardHeader>
-        <CardContent className="pt-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <CardContent className='pt-4'>
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
             {/* 功能一: 数据库导出 */}
-            <div className="flex items-center justify-between p-4 border border-dashed rounded-lg hover:bg-muted/20 transition-colors duration-150">
-              <div className="space-y-1 pr-4">
-                <p className="text-xs font-semibold flex items-center gap-1.5">
-                  <Download className="size-4 text-primary" />
+            <div className='flex items-center justify-between p-4 border border-dashed rounded-lg hover:bg-muted/20 transition-colors duration-150'>
+              <div className='space-y-1 pr-4'>
+                <p className='text-xs font-semibold flex items-center gap-1.5'>
+                  <Download className='size-4 text-primary' />
                   数据库备份导出
                 </p>
-                <p className="text-[10px] text-muted-foreground">
-                  直接导出并下载物理数据库镜像文件（SQLite 导出 .db，PostgreSQL 导出为打包的 .sql 文本文件）
+                <p className='text-[10px] text-muted-foreground'>
+                  直接导出并下载物理数据库镜像文件（SQLite 导出 .db，PostgreSQL
+                  导出为打包的 .sql 文本文件）
                 </p>
               </div>
               <Button
-                size="sm"
-                variant="outline"
-                className="h-8 text-xs gap-1"
+                size='sm'
+                variant='outline'
+                className='h-8 text-xs gap-1'
                 onClick={handleExport}
                 disabled={exporting}
               >
-                <RefreshCw className={`size-3 ${exporting ? "animate-spin" : ""}`} />
-                {exporting ? "正在准备..." : "开始导出"}
+                <RefreshCw
+                  className={`size-3 ${exporting ? 'animate-spin' : ''}`}
+                />
+                {exporting ? '正在准备...' : '开始导出'}
               </Button>
             </div>
 
             {/* 功能二: SQL 查询终端 */}
-            <div className="flex items-center justify-between p-4 border border-dashed rounded-lg hover:bg-muted/20 transition-colors duration-150">
-              <div className="space-y-1 pr-4">
-                <p className="text-xs font-semibold flex items-center gap-1.5">
-                  <Terminal className="size-4 text-primary" />
+            <div className='flex items-center justify-between p-4 border border-dashed rounded-lg hover:bg-muted/20 transition-colors duration-150'>
+              <div className='space-y-1 pr-4'>
+                <p className='text-xs font-semibold flex items-center gap-1.5'>
+                  <Terminal className='size-4 text-primary' />
                   SQL 查询控台
                 </p>
-                <p className="text-[10px] text-muted-foreground">
-                  打开在线 SQL 控制终端，执行原生的 SQL 进行数据筛选、更新、调试或性能优化
+                <p className='text-[10px] text-muted-foreground'>
+                  打开在线 SQL 控制终端，执行原生的 SQL
+                  进行数据筛选、更新、调试或性能优化
                 </p>
               </div>
               <Button
-                size="sm"
-                className="h-8 text-xs gap-1 bg-primary text-primary-foreground hover:bg-primary/95"
+                size='sm'
+                className='h-8 text-xs gap-1 bg-primary text-primary-foreground hover:bg-primary/95'
                 onClick={() => {
-                  setShowConsole(true)
+                  setShowConsole(true);
                 }}
               >
-                <FileText className="size-3.5" />
+                <FileText className='size-3.5' />
                 进入控台
               </Button>
             </div>
@@ -325,5 +363,5 @@ export function DatabasePageClient() {
         </CardContent>
       </Card>
     </div>
-  )
-}
+  );
+}

frontend/app/(main)/admin/database/page.tsx

@@ -1,5 +1,5 @@
-import {DatabasePageClient} from "./page-client"
+import { DatabasePageClient } from './page-client';
 
 export default function DatabasePage() {
-  return <DatabasePageClient />
-}
+  return <DatabasePageClient />;
+}

frontend/app/(main)/admin/demo/page.tsx

@@ -1,82 +1,176 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {Code} from "lucide-react"
+import * as React from 'react';
+import { Code } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 // 引入模块化拆分后的 Tab 子组件
-import {DashboardTab} from "./tabs/dashboard-tab"
-import {TableTab} from "./tabs/table-tab"
-import {ControlsTab} from "./tabs/controls-tab"
+import { DashboardTab } from './tabs/dashboard-tab';
+import { TableTab } from './tabs/table-tab';
+import { ControlsTab } from './tabs/controls-tab';
 
 export default function HeaderDemoPage() {
-  const [activeTab, setActiveTab] = React.useState("dashboard")
+  const [activeTab, setActiveTab] = React.useState('dashboard');
 
   return (
-    <div className="py-6 px-1 space-y-6">
+    <div className='py-6 px-1 space-y-6'>
       {/* 1. 标准页面标题 */}
-      <div className="flex items-center gap-2">
-        <Code className="size-5 text-primary" />
+      <div className='flex items-center gap-2'>
+        <Code className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">开发规范示例</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>
+            开发规范示例
+          </h1>
         </div>
       </div>
 
       {/* 说明区域 */}
-      <Card className="border-dashed shadow-none">
-        <CardHeader className="pb-3">
-          <div className="flex items-center gap-2">
-            <Code className="size-4 text-primary" />
-            <CardTitle className="text-base font-semibold">规范说明</CardTitle>
+      <Card className='border-dashed shadow-none'>
+        <CardHeader className='pb-3'>
+          <div className='flex items-center gap-2'>
+            <Code className='size-4 text-primary' />
+            <CardTitle className='text-base font-semibold'>规范说明</CardTitle>
           </div>
           <CardDescription>
             此页面展示了后台 Sidebar 关联页面的标准标题栏布局，供开发参考。
           </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">核心规范细节与编写原则：</h3>
-            <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
-              <li><strong>结构专注</strong>：页面标题区必须保持绝对干净。请不要在标题下方放置任何描述段落或小字副标题，让页面在视线进入时保持极简与信息纯粹。</li>
-              <li><strong>容器与上边距对齐</strong>：使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex items-center gap-2</code> 作为标题行基础容器（不含下边框），外层统一使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">py-6 px-1</code> (或 <code className="bg-muted px-1 py-0.5 rounded font-mono">py-6</code>) 进行上边距的视觉对齐，确保切换菜单时顶部高度感一致。</li>
-              <li><strong>图标呈现</strong>：直接将 Lucide 图标组件嵌套于标题容器中，应用 <code className="bg-muted px-1 py-0.5 rounded font-mono">size-5 text-primary</code> 样式。禁止为图标包裹任何背景色小卡片、圆角或装饰性边框。</li>
-              <li><strong>文本样式标准</strong>：文本使用且仅使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">{'h1 className="text-2xl font-semibold tracking-tight"'}</code>，禁用字重加粗（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">font-bold</code>）或任何渐变色，保证全站字体一致性。</li>
-              <li><strong>Tabs 模块化拆分</strong>：凡是带有多个 Tab 页切换的页面，**禁止**将所有 Tab 的渲染代码堆积在同一个物理页面主文件内。每个 Tab 页对应的 Content 必须单独拆分为独立组件文件（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">tabs/events-tab.tsx</code> 或就近放在 <code className="bg-muted px-1 py-0.5 rounded font-mono">components/</code> 下），主页面文件只负责维护当前 Tab 的激活状态及外层骨架布局。</li>
-              <li><strong>复杂度驱动的区块拆分</strong>：不仅是 Tabs 切换，当一个页面代码行数超过 600 行时，必须将高密度区块拆分为子组件。路由专属、不复用的子组件应放在对应路由的特征目录中（如 <code className="bg-muted px-1 py-0.5 rounded font-mono">app/(main)/admin/database/components/</code>），只有真正跨页面复用的组件才进入全局 <code className="bg-muted px-1 py-0.5 rounded font-mono">components/common/</code>。典型标杆案例参考“数据管理” (<code className="bg-muted px-1 py-0.5 rounded font-mono">/admin/database</code>) 的 <code className="bg-muted px-1 py-0.5 rounded font-mono">table-browser.tsx</code>、<code className="bg-muted px-1 py-0.5 rounded font-mono">cache-manager.tsx</code> 与 <code className="bg-muted px-1 py-0.5 rounded font-mono">sql-console.tsx</code>。</li>
+        <CardContent className='space-y-4'>
+          <div className='space-y-2'>
+            <h3 className='text-xs font-semibold uppercase tracking-wider text-muted-foreground'>
+              核心规范细节与编写原则：
+            </h3>
+            <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
+              <li>
+                <strong>结构专注</strong>
+                ：页面标题区必须保持绝对干净。请不要在标题下方放置任何描述段落或小字副标题，让页面在视线进入时保持极简与信息纯粹。
+              </li>
+              <li>
+                <strong>容器与上边距对齐</strong>：使用{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  flex items-center gap-2
+                </code>{' '}
+                作为标题行基础容器（不含下边框），外层统一使用{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  py-6 px-1
+                </code>{' '}
+                (或{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  py-6
+                </code>
+                ) 进行上边距的视觉对齐，确保切换菜单时顶部高度感一致。
+              </li>
+              <li>
+                <strong>图标呈现</strong>：直接将 Lucide
+                图标组件嵌套于标题容器中，应用{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  size-5 text-primary
+                </code>{' '}
+                样式。禁止为图标包裹任何背景色小卡片、圆角或装饰性边框。
+              </li>
+              <li>
+                <strong>文本样式标准</strong>：文本使用且仅使用{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  {'h1 className="text-2xl font-semibold tracking-tight"'}
+                </code>
+                ，禁用字重加粗（如{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  font-bold
+                </code>
+                ）或任何渐变色，保证全站字体一致性。
+              </li>
+              <li>
+                <strong>Tabs 模块化拆分</strong>：凡是带有多个 Tab
+                页切换的页面，**禁止**将所有 Tab
+                的渲染代码堆积在同一个物理页面主文件内。每个 Tab 页对应的
+                Content 必须单独拆分为独立组件文件（如{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  tabs/events-tab.tsx
+                </code>{' '}
+                或就近放在{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  components/
+                </code>{' '}
+                下），主页面文件只负责维护当前 Tab 的激活状态及外层骨架布局。
+              </li>
+              <li>
+                <strong>复杂度驱动的区块拆分</strong>：不仅是 Tabs
+                切换，当一个页面代码行数超过 600
+                行时，必须将高密度区块拆分为子组件。路由专属、不复用的子组件应放在对应路由的特征目录中（如{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  app/(main)/admin/database/components/
+                </code>
+                ），只有真正跨页面复用的组件才进入全局{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  components/common/
+                </code>
+                。典型标杆案例参考“数据管理” (
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  /admin/database
+                </code>
+                ) 的{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  table-browser.tsx
+                </code>
+                、
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  cache-manager.tsx
+                </code>{' '}
+                与{' '}
+                <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                  sql-console.tsx
+                </code>
+                。
+              </li>
             </ul>
           </div>
         </CardContent>
       </Card>
 
       {/* Tabs 切换 */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
-          <TabsTrigger value="dashboard" className="px-0 pb-2 text-xs font-semibold">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
+        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
+          <TabsTrigger
+            value='dashboard'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             仪表盘与指标卡片
           </TabsTrigger>
-          <TabsTrigger value="table" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='table'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             数据表格规范
           </TabsTrigger>
-          <TabsTrigger value="controls" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='controls'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             输入控件与表单
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="dashboard" className="focus-visible:outline-none">
+        <TabsContent value='dashboard' className='focus-visible:outline-none'>
           <DashboardTab />
         </TabsContent>
-        <TabsContent value="table" className="focus-visible:outline-none">
+        <TabsContent value='table' className='focus-visible:outline-none'>
           <TableTab />
         </TabsContent>
-        <TabsContent value="controls" className="focus-visible:outline-none">
+        <TabsContent value='controls' className='focus-visible:outline-none'>
           <ControlsTab />
         </TabsContent>
       </Tabs>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/demo/tabs/controls-tab.tsx

@@ -1,100 +1,148 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {Code} from "lucide-react"
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Label} from "@/components/ui/label"
-import {Input} from "@/components/ui/input"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Checkbox} from "@/components/ui/checkbox"
-import {Button} from "@/components/ui/button"
+import * as React from 'react';
+import { Code } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
 
 export function ControlsTab() {
   const [formData, setFormData] = React.useState({
-    name: "",
-    category: "database",
+    name: '',
+    category: 'database',
     allowNotify: true,
-    channel: "all",
-  })
+    channel: 'all',
+  });
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
       {/* 控件展示 */}
-      <Card className="border-dashed shadow-none">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm font-semibold">表单与输入框交互演示</CardTitle>
-          <CardDescription>包含按钮变体、下拉选择、多选框及基础输入框的标准样式</CardDescription>
+      <Card className='border-dashed shadow-none'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-sm font-semibold'>
+            表单与输入框交互演示
+          </CardTitle>
+          <CardDescription>
+            包含按钮变体、下拉选择、多选框及基础输入框的标准样式
+          </CardDescription>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className='space-y-4'>
           {/* 输入框 */}
-          <div className="space-y-1.5">
-            <Label htmlFor="task-name" className="text-xs font-medium text-foreground">任务名称</Label>
+          <div className='space-y-1.5'>
+            <Label
+              htmlFor='task-name'
+              className='text-xs font-medium text-foreground'
+            >
+              任务名称
+            </Label>
             <Input
-              id="task-name"
+              id='task-name'
               value={formData.name}
-              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
-              placeholder="输入要创建的任务描述..."
-              className="h-8 text-xs shadow-none bg-background focus-visible:ring-1"
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, name: e.target.value }))
+              }
+              placeholder='输入要创建的任务描述...'
+              className='h-8 text-xs shadow-none bg-background focus-visible:ring-1'
             />
-            <p className="text-[10px] text-muted-foreground">任务名称将用于后台执行记录的可读性显示</p>
+            <p className='text-[10px] text-muted-foreground'>
+              任务名称将用于后台执行记录的可读性显示
+            </p>
           </div>
 
           {/* 下拉框 */}
-          <div className="space-y-1.5">
-            <Label className="text-xs font-medium text-foreground">任务分类</Label>
+          <div className='space-y-1.5'>
+            <Label className='text-xs font-medium text-foreground'>
+              任务分类
+            </Label>
             <Select
               value={formData.category}
-              onValueChange={(val) => setFormData(prev => ({ ...prev, category: val }))}
+              onValueChange={(val) =>
+                setFormData((prev) => ({ ...prev, category: val }))
+              }
             >
-              <SelectTrigger className="h-8 text-xs shadow-none bg-background focus:ring-1">
+              <SelectTrigger className='h-8 text-xs shadow-none bg-background focus:ring-1'>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="database">数据库运维</SelectItem>
-                <SelectItem value="sync">数据批量同步</SelectItem>
-                <SelectItem value="cleanup">过期磁盘清理</SelectItem>
+                <SelectItem value='database'>数据库运维</SelectItem>
+                <SelectItem value='sync'>数据批量同步</SelectItem>
+                <SelectItem value='cleanup'>过期磁盘清理</SelectItem>
               </SelectContent>
             </Select>
           </div>
 
           {/* 多选框 Checkbox */}
-          <div className="flex items-start gap-2.5 p-3 bg-muted/30 border border-dashed rounded-lg">
+          <div className='flex items-start gap-2.5 p-3 bg-muted/30 border border-dashed rounded-lg'>
             <Checkbox
-              id="allow-notify"
+              id='allow-notify'
               checked={formData.allowNotify}
-              onCheckedChange={(checked) => setFormData(prev => ({ ...prev, allowNotify: checked === true }))}
-              className="mt-0.5"
+              onCheckedChange={(checked) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  allowNotify: checked === true,
+                }))
+              }
+              className='mt-0.5'
             />
-            <div className="grid gap-1">
+            <div className='grid gap-1'>
               <label
-                htmlFor="allow-notify"
-                className="text-xs font-medium text-foreground cursor-pointer select-none leading-none"
+                htmlFor='allow-notify'
+                className='text-xs font-medium text-foreground cursor-pointer select-none leading-none'
               >
                 允许触发异步通知推送
               </label>
-              <p className="text-[10px] text-muted-foreground leading-normal">
+              <p className='text-[10px] text-muted-foreground leading-normal'>
                 勾选后，在当前后台任务顺利执行结束时，会关联派发多渠道通知推送。
               </p>
             </div>
           </div>
 
           {/* 按钮变体 */}
-          <div className="pt-2">
-            <div className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">按钮样式对齐：</div>
-            <div className="flex flex-wrap items-center gap-2">
-              <Button size="sm" className="h-8 text-xs shadow-none">
+          <div className='pt-2'>
+            <div className='text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2'>
+              按钮样式对齐：
+            </div>
+            <div className='flex flex-wrap items-center gap-2'>
+              <Button size='sm' className='h-8 text-xs shadow-none'>
                 主要操作 (Primary)
               </Button>
-              <Button variant="secondary" size="sm" className="h-8 text-xs shadow-none">
+              <Button
+                variant='secondary'
+                size='sm'
+                className='h-8 text-xs shadow-none'
+              >
                 次要操作 (Secondary)
               </Button>
-              <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
+              <Button
+                variant='outline'
+                size='sm'
+                className='h-8 border-dashed text-xs shadow-none'
+              >
                 辅助线框 (Outline)
               </Button>
-              <Button variant="ghost" size="sm" className="h-8 text-xs hover:bg-muted">
+              <Button
+                variant='ghost'
+                size='sm'
+                className='h-8 text-xs hover:bg-muted'
+              >
                 幽灵按钮 (Ghost)
               </Button>
             </div>
@@ -103,38 +151,84 @@ export function ControlsTab() {
       </Card>
 
       {/* 控件设计规范说明 */}
-      <Card className="border-dashed shadow-none bg-muted/20">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
-            <Code className="size-4 text-primary" />
+      <Card className='border-dashed shadow-none bg-muted/20'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
+            <Code className='size-4 text-primary' />
             表单设计规范
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4 text-xs text-muted-foreground">
-          <div className="space-y-2 leading-relaxed">
-            <p className="font-semibold text-foreground text-[11px]">1. 统一控件高度与投影：</p>
+        <CardContent className='space-y-4 text-xs text-muted-foreground'>
+          <div className='space-y-2 leading-relaxed'>
+            <p className='font-semibold text-foreground text-[11px]'>
+              1. 统一控件高度与投影：
+            </p>
             <p>
-              输入框 (<code className="bg-muted px-1 py-0.5 rounded font-mono">Input</code>) 与下拉选择器 (<code className="bg-muted px-1 py-0.5 rounded font-mono">SelectTrigger</code>) 的高度应统一限制为小号高度 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8</code>，字体大小使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs</code>，并使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">shadow-none</code> 去除原生的重叠阴影。
+              输入框 (
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                Input
+              </code>
+              ) 与下拉选择器 (
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                SelectTrigger
+              </code>
+              ) 的高度应统一限制为小号高度{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                h-8
+              </code>
+              ，字体大小使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                text-xs
+              </code>
+              ，并使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                shadow-none
+              </code>{' '}
+              去除原生的重叠阴影。
             </p>
 
-            <p className="font-semibold text-foreground text-[11px] pt-1">2. Checkbox 与文本的对齐：</p>
+            <p className='font-semibold text-foreground text-[11px] pt-1'>
+              2. Checkbox 与文本的对齐：
+            </p>
             <p>
-              Checkbox 应在左侧垂直偏上对齐，使用容器 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex items-start gap-2.5</code> 排列。Checkbox 组件本身添加 <code className="bg-muted px-1 py-0.5 rounded font-mono">mt-0.5</code>，从而在多行描述文本的情况下依然保持良好的顶对齐，避免出现居中对齐导致的凌乱感。
+              Checkbox 应在左侧垂直偏上对齐，使用容器{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                flex items-start gap-2.5
+              </code>{' '}
+              排列。Checkbox 组件本身添加{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                mt-0.5
+              </code>
+              ，从而在多行描述文本的情况下依然保持良好的顶对齐，避免出现居中对齐导致的凌乱感。
             </p>
 
-            <p className="font-semibold text-foreground text-[11px] pt-1">3. 按钮使用策略：</p>
+            <p className='font-semibold text-foreground text-[11px] pt-1'>
+              3. 按钮使用策略：
+            </p>
             <p>
-              普通主表单及新增/保存按钮，一律使用默认 Primary 按钮或次要 <code className="bg-muted px-1 py-0.5 rounded font-mono">{'variant="secondary"'}</code> 按钮，小号高度统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-8 text-xs</code>。线框按钮必须带有 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 类。
+              普通主表单及新增/保存按钮，一律使用默认 Primary 按钮或次要{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                {'variant="secondary"'}
+              </code>{' '}
+              按钮，小号高度统一采用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                h-8 text-xs
+              </code>
+              。线框按钮必须带有{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                border-dashed shadow-none
+              </code>{' '}
+              类。
             </p>
           </div>
 
-          <div className="bg-background/80 p-3 rounded border border-border/40 font-mono text-[10px] space-y-2 overflow-x-auto">
+          <div className='bg-background/80 p-3 rounded border border-border/40 font-mono text-[10px] space-y-2 overflow-x-auto'>
             <div>{`// 1. Label 与 Input 对齐`}</div>
             <div>{`<div className="space-y-1.5">
   <Label htmlFor="id" className="text-xs font-medium text-foreground">标题</Label>
   <Input id="id" className="h-8 text-xs shadow-none" />
 </div>`}</div>
-            <div className="pt-2">{`// 2. Checkbox 顶对齐`}</div>
+            <div className='pt-2'>{`// 2. Checkbox 顶对齐`}</div>
             <div>{`<div className="flex items-start gap-2.5">
   <Checkbox id="c" className="mt-0.5" />
   <div className="grid gap-1">
@@ -146,5 +240,5 @@ export function ControlsTab() {
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/demo/tabs/dashboard-tab.tsx

@@ -1,61 +1,81 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {Code, Cpu, Database, HardDrive} from "lucide-react"
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
-import {Progress} from "@/components/ui/progress"
+import * as React from 'react';
+import { Code, Cpu, Database, HardDrive } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
 
 export function DashboardTab() {
   return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div className='space-y-6'>
+      <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
         {/* CPU */}
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <span className="text-xs font-medium text-muted-foreground">容器 CPU 使用率</span>
-            <Cpu className="size-4 text-primary" />
+        <Card className='border-dashed shadow-none'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2'>
+            <span className='text-xs font-medium text-muted-foreground'>
+              容器 CPU 使用率
+            </span>
+            <Cpu className='size-4 text-primary' />
           </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="text-2xl font-semibold tracking-tight">42.8 %</div>
-            <Progress value={42.8} className="h-1.5" />
-            <p className="text-[10px] text-muted-foreground flex items-center gap-1">
-              <span className="size-1.5 rounded-full bg-emerald-500 inline-block animate-pulse" />
+          <CardContent className='space-y-2'>
+            <div className='text-2xl font-semibold tracking-tight'>42.8 %</div>
+            <Progress value={42.8} className='h-1.5' />
+            <p className='text-[10px] text-muted-foreground flex items-center gap-1'>
+              <span className='size-1.5 rounded-full bg-emerald-500 inline-block animate-pulse' />
               容器运行正常，负载平稳
             </p>
           </CardContent>
         </Card>
 
         {/* Storage */}
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <span className="text-xs font-medium text-muted-foreground">存储已用容量</span>
-            <HardDrive className="size-4 text-primary" />
+        <Card className='border-dashed shadow-none'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2'>
+            <span className='text-xs font-medium text-muted-foreground'>
+              存储已用容量
+            </span>
+            <HardDrive className='size-4 text-primary' />
           </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="text-2xl font-semibold tracking-tight">72.4 GB <span className="text-xs text-muted-foreground">/ 100 GB</span></div>
-            <Progress value={72.4} className="h-1.5" />
-            <p className="text-[10px] text-muted-foreground">
+          <CardContent className='space-y-2'>
+            <div className='text-2xl font-semibold tracking-tight'>
+              72.4 GB{' '}
+              <span className='text-xs text-muted-foreground'>/ 100 GB</span>
+            </div>
+            <Progress value={72.4} className='h-1.5' />
+            <p className='text-[10px] text-muted-foreground'>
               数据已同步远端 S3 存储桶，支持自动过期
             </p>
           </CardContent>
         </Card>
 
         {/* DB Overview */}
-        <Card className="border-dashed shadow-none">
-          <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <span className="text-xs font-medium text-muted-foreground">物理数据库</span>
-            <Database className="size-4 text-primary" />
+        <Card className='border-dashed shadow-none'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2'>
+            <span className='text-xs font-medium text-muted-foreground'>
+              物理数据库
+            </span>
+            <Database className='size-4 text-primary' />
           </CardHeader>
-          <CardContent className="space-y-2">
-            <div className="text-2xl font-semibold tracking-tight">PostgreSQL <span className="text-xs font-normal text-muted-foreground">(v16.2)</span></div>
-            <div className="flex items-center gap-3 text-xs text-muted-foreground">
-              <div>活跃连接: <span className="font-semibold text-foreground">12</span></div>
-              <div>总表数量: <span className="font-semibold text-foreground">34</span></div>
+          <CardContent className='space-y-2'>
+            <div className='text-2xl font-semibold tracking-tight'>
+              PostgreSQL{' '}
+              <span className='text-xs font-normal text-muted-foreground'>
+                (v16.2)
+              </span>
             </div>
-            <p className="text-[10px] text-muted-foreground">
+            <div className='flex items-center gap-3 text-xs text-muted-foreground'>
+              <div>
+                活跃连接:{' '}
+                <span className='font-semibold text-foreground'>12</span>
+              </div>
+              <div>
+                总表数量:{' '}
+                <span className='font-semibold text-foreground'>34</span>
+              </div>
+            </div>
+            <p className='text-[10px] text-muted-foreground'>
               链接池自动维护中，最大连接限制为 100
             </p>
           </CardContent>
@@ -63,23 +83,53 @@ export function DashboardTab() {
       </div>
 
       {/* 指标卡片规范与代码 */}
-      <Card className="border-dashed shadow-none bg-muted/20">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
-            <Code className="size-4 text-primary" />
+      <Card className='border-dashed shadow-none bg-muted/20'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
+            <Code className='size-4 text-primary' />
             指标卡片 & 仪表盘设计规范
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
-          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
-            <li>指标卡片统一采用 <code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed shadow-none</code> 作为边框和投影。</li>
-            <li>头部使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">flex flex-row items-center justify-between pb-2</code> 布局，左侧为标题小字，右侧为直接呈现的 Lucide 图标。</li>
-            <li>数值强调使用且仅使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-2xl font-semibold tracking-tight</code> 展示。</li>
-            <li>进度条使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">h-1.5</code> 细条高度，不喧宾夺主。</li>
-            <li>底部的次要说明信息必须统一使用 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-[10px] text-muted-foreground</code> 等辅助类。</li>
+        <CardContent className='space-y-4'>
+          <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
+            <li>
+              指标卡片统一采用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                border-dashed shadow-none
+              </code>{' '}
+              作为边框和投影。
+            </li>
+            <li>
+              头部使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                flex flex-row items-center justify-between pb-2
+              </code>{' '}
+              布局，左侧为标题小字，右侧为直接呈现的 Lucide 图标。
+            </li>
+            <li>
+              数值强调使用且仅使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                text-2xl font-semibold tracking-tight
+              </code>{' '}
+              展示。
+            </li>
+            <li>
+              进度条使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                h-1.5
+              </code>{' '}
+              细条高度，不喧宾夺主。
+            </li>
+            <li>
+              底部的次要说明信息必须统一使用{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                text-[10px] text-muted-foreground
+              </code>{' '}
+              等辅助类。
+            </li>
           </ul>
-          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
-{`<Card className="border-dashed shadow-none">
+          <pre className='text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed'>
+            {`<Card className="border-dashed shadow-none">
   <CardHeader className="flex flex-row items-center justify-between pb-2">
     <span className="text-xs font-medium text-muted-foreground">指标标题</span>
     <Cpu className="size-4 text-primary" />
@@ -94,5 +144,5 @@ export function DashboardTab() {
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/demo/tabs/table-tab.tsx

@@ -1,92 +1,171 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {Code, Edit, ListFilter, Plus, Search, Trash2} from "lucide-react"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import {Badge} from "@/components/ui/badge"
-import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
+import * as React from 'react';
+import { Code, Edit, ListFilter, Plus, Search, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 export function TableTab() {
   const mockTableData = [
-    { id: "TX-1002", name: "用户信息批量同步导出", type: "数据同步", status: "success", duration: "1.2s", time: "2026-06-15 14:22" },
-    { id: "TX-1003", name: "系统数据库每周自动备份归档", type: "数据库运维", status: "running", duration: "在执行中", time: "2026-06-15 15:00" },
-    { id: "TX-1004", name: "远端S3过期缓存对象自动清理任务", type: "磁盘清理", status: "failed", duration: "0.4s", time: "2026-06-15 10:05" },
-  ]
+    {
+      id: 'TX-1002',
+      name: '用户信息批量同步导出',
+      type: '数据同步',
+      status: 'success',
+      duration: '1.2s',
+      time: '2026-06-15 14:22',
+    },
+    {
+      id: 'TX-1003',
+      name: '系统数据库每周自动备份归档',
+      type: '数据库运维',
+      status: 'running',
+      duration: '在执行中',
+      time: '2026-06-15 15:00',
+    },
+    {
+      id: 'TX-1004',
+      name: '远端S3过期缓存对象自动清理任务',
+      type: '磁盘清理',
+      status: 'failed',
+      duration: '0.4s',
+      time: '2026-06-15 10:05',
+    },
+  ];
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       {/* 表格控制工具栏 */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <div className="relative w-64">
-            <Search className="absolute left-2.5 top-2.5 size-3 text-muted-foreground" />
-            <Input placeholder="输入任务名称搜索..." className="h-8 pl-8 text-xs w-full shadow-none border-dashed bg-background" />
+      <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3'>
+        <div className='flex items-center gap-2'>
+          <div className='relative w-64'>
+            <Search className='absolute left-2.5 top-2.5 size-3 text-muted-foreground' />
+            <Input
+              placeholder='输入任务名称搜索...'
+              className='h-8 pl-8 text-xs w-full shadow-none border-dashed bg-background'
+            />
           </div>
-          <Button variant="outline" size="sm" className="h-8 border-dashed text-xs shadow-none">
-            <ListFilter className="size-3 mr-1" />
+          <Button
+            variant='outline'
+            size='sm'
+            className='h-8 border-dashed text-xs shadow-none'
+          >
+            <ListFilter className='size-3 mr-1' />
             过滤
           </Button>
         </div>
-        <Button size="sm" className="h-8 text-xs shadow-none">
-          <Plus className="size-3.5 mr-1" />
+        <Button size='sm' className='h-8 text-xs shadow-none'>
+          <Plus className='size-3.5 mr-1' />
           新建任务
         </Button>
       </div>
 
       {/* 数据表格本身 */}
-      <div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
-        <Table className="w-full caption-bottom text-sm min-w-full">
-          <TableHeader className="bg-muted/40">
-            <TableRow className="border-dashed hover:bg-transparent">
-              <TableHead className="w-[100px] text-xs font-semibold">任务编号</TableHead>
-              <TableHead className="text-xs font-semibold">执行任务名称</TableHead>
-              <TableHead className="w-[120px] text-xs font-semibold">任务类型</TableHead>
-              <TableHead className="w-[100px] text-xs font-semibold">状态</TableHead>
-              <TableHead className="w-[100px] text-xs font-semibold">执行耗时</TableHead>
-              <TableHead className="w-[150px] text-xs font-semibold">触发时间</TableHead>
-              <TableHead className="w-[80px] text-xs font-semibold text-right">操作</TableHead>
+      <div className='border border-dashed shadow-none rounded-lg overflow-hidden bg-background'>
+        <Table className='w-full caption-bottom text-sm min-w-full'>
+          <TableHeader className='bg-muted/40'>
+            <TableRow className='border-dashed hover:bg-transparent'>
+              <TableHead className='w-[100px] text-xs font-semibold'>
+                任务编号
+              </TableHead>
+              <TableHead className='text-xs font-semibold'>
+                执行任务名称
+              </TableHead>
+              <TableHead className='w-[120px] text-xs font-semibold'>
+                任务类型
+              </TableHead>
+              <TableHead className='w-[100px] text-xs font-semibold'>
+                状态
+              </TableHead>
+              <TableHead className='w-[100px] text-xs font-semibold'>
+                执行耗时
+              </TableHead>
+              <TableHead className='w-[150px] text-xs font-semibold'>
+                触发时间
+              </TableHead>
+              <TableHead className='w-[80px] text-xs font-semibold text-right'>
+                操作
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {mockTableData.map((row) => (
-              <TableRow key={row.id} className="border-dashed hover:bg-muted/10 transition-colors">
-                <TableCell className="font-mono text-xs font-semibold">{row.id}</TableCell>
-                <TableCell className="text-xs font-medium text-foreground">{row.name}</TableCell>
-                <TableCell className="text-xs text-muted-foreground">{row.type}</TableCell>
+              <TableRow
+                key={row.id}
+                className='border-dashed hover:bg-muted/10 transition-colors'
+              >
+                <TableCell className='font-mono text-xs font-semibold'>
+                  {row.id}
+                </TableCell>
+                <TableCell className='text-xs font-medium text-foreground'>
+                  {row.name}
+                </TableCell>
+                <TableCell className='text-xs text-muted-foreground'>
+                  {row.type}
+                </TableCell>
                 <TableCell>
-                  {row.status === "success" && (
-                    <Badge variant="outline" className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2 font-medium">
-                      <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
+                  {row.status === 'success' && (
+                    <Badge
+                      variant='outline'
+                      className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2 font-medium'
+                    >
+                      <span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
                       成功
                     </Badge>
                   )}
-                  {row.status === "running" && (
-                    <Badge variant="outline" className="text-[10px] bg-blue-500/10 border-blue-500/20 text-blue-600 rounded-full py-0 px-2 font-medium">
-                      <span className="size-1 bg-blue-500 rounded-full mr-1.5 shrink-0 animate-pulse" />
+                  {row.status === 'running' && (
+                    <Badge
+                      variant='outline'
+                      className='text-[10px] bg-blue-500/10 border-blue-500/20 text-blue-600 rounded-full py-0 px-2 font-medium'
+                    >
+                      <span className='size-1 bg-blue-500 rounded-full mr-1.5 shrink-0 animate-pulse' />
                       运行中
                     </Badge>
                   )}
-                  {row.status === "failed" && (
-                    <Badge variant="outline" className="text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2 font-medium">
-                      <span className="size-1 bg-destructive rounded-full mr-1.5 shrink-0" />
+                  {row.status === 'failed' && (
+                    <Badge
+                      variant='outline'
+                      className='text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2 font-medium'
+                    >
+                      <span className='size-1 bg-destructive rounded-full mr-1.5 shrink-0' />
                       失败
                     </Badge>
                   )}
                 </TableCell>
-                <TableCell className="text-xs text-muted-foreground font-mono">{row.duration}</TableCell>
-                <TableCell className="text-xs text-muted-foreground">{row.time}</TableCell>
-                <TableCell className="text-right">
-                  <div className="flex items-center justify-end gap-1.5">
-                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-muted text-muted-foreground">
-                      <Edit className="size-3" />
+                <TableCell className='text-xs text-muted-foreground font-mono'>
+                  {row.duration}
+                </TableCell>
+                <TableCell className='text-xs text-muted-foreground'>
+                  {row.time}
+                </TableCell>
+                <TableCell className='text-right'>
+                  <div className='flex items-center justify-end gap-1.5'>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='h-6 w-6 rounded hover:bg-muted text-muted-foreground'
+                    >
+                      <Edit className='size-3' />
                     </Button>
-                    <Button variant="ghost" size="icon" className="h-6 w-6 rounded hover:bg-destructive/10 text-destructive">
-                      <Trash2 className="size-3" />
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='h-6 w-6 rounded hover:bg-destructive/10 text-destructive'
+                    >
+                      <Trash2 className='size-3' />
                     </Button>
                   </div>
                 </TableCell>
@@ -97,23 +176,62 @@ export function TableTab() {
       </div>
 
       {/* 表格规范指引 */}
-      <Card className="border-dashed shadow-none bg-muted/20">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
-            <Code className="size-4 text-primary" />
+      <Card className='border-dashed shadow-none bg-muted/20'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
+            <Code className='size-4 text-primary' />
             表格设计规范与代码模板
           </CardTitle>
         </CardHeader>
-        <CardContent className="space-y-4">
-          <ul className="list-disc pl-4 text-xs text-muted-foreground space-y-1.5">
-            <li>表格容器必须统一使用带有虚线边框的容器，即类名：<code className="bg-muted px-1 py-0.5 rounded font-mono">border border-dashed shadow-none rounded-lg overflow-hidden bg-background</code>。</li>
-            <li>表头背景设为 <code className="bg-muted px-1 py-0.5 rounded font-mono">bg-muted/40</code>。表头表项字号统一为小字粗体 <code className="bg-muted px-1 py-0.5 rounded font-mono">text-xs font-semibold</code>。</li>
-            <li>单元格行与列之间使用虚线分割（<code className="bg-muted px-1 py-0.5 rounded font-mono">border-dashed</code>）。表格行悬浮交互采用温和过渡色 <code className="bg-muted px-1 py-0.5 rounded font-mono">hover:bg-muted/10 transition-colors</code>。</li>
-            <li>编码、主键或唯一 ID 类字段一律采用等宽字体呈现：<code className="bg-muted px-1 py-0.5 rounded font-mono">font-mono text-xs</code>。</li>
-            <li>状态标签（Badge）尽量圆角化（<code className="bg-muted px-1 py-0.5 rounded font-mono">rounded-full py-0 px-2</code>），并以浅背景配以各自对应的图标圆点，以实现现代、高对比度的视觉质感。</li>
+        <CardContent className='space-y-4'>
+          <ul className='list-disc pl-4 text-xs text-muted-foreground space-y-1.5'>
+            <li>
+              表格容器必须统一使用带有虚线边框的容器，即类名：
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                border border-dashed shadow-none rounded-lg overflow-hidden
+                bg-background
+              </code>
+              。
+            </li>
+            <li>
+              表头背景设为{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                bg-muted/40
+              </code>
+              。表头表项字号统一为小字粗体{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                text-xs font-semibold
+              </code>
+              。
+            </li>
+            <li>
+              单元格行与列之间使用虚线分割（
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                border-dashed
+              </code>
+              ）。表格行悬浮交互采用温和过渡色{' '}
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                hover:bg-muted/10 transition-colors
+              </code>
+              。
+            </li>
+            <li>
+              编码、主键或唯一 ID 类字段一律采用等宽字体呈现：
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                font-mono text-xs
+              </code>
+              。
+            </li>
+            <li>
+              状态标签（Badge）尽量圆角化（
+              <code className='bg-muted px-1 py-0.5 rounded font-mono'>
+                rounded-full py-0 px-2
+              </code>
+              ），并以浅背景配以各自对应的图标圆点，以实现现代、高对比度的视觉质感。
+            </li>
           </ul>
-          <pre className="text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed">
-{`<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
+          <pre className='text-[11px] font-mono text-muted-foreground overflow-x-auto p-3 bg-background rounded border border-border/40 leading-relaxed'>
+            {`<div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
   <Table>
     <TableHeader className="bg-muted/40">
       <TableRow className="border-dashed hover:bg-transparent">
@@ -138,5 +256,5 @@ export function TableTab() {
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/files/components/file-list.tsx

@@ -1,8 +1,8 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {AnimatePresence, motion} from "motion/react"
+import * as React from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'motion/react';
 import {
   Download,
   Eye,
@@ -16,14 +16,21 @@ import {
   Trash2,
   Upload,
   X,
-} from "lucide-react"
-import {toast} from "sonner"
+} from 'lucide-react';
+import { toast } from 'sonner';
 
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Badge} from "@/components/ui/badge"
-import {Checkbox} from "@/components/ui/checkbox"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -33,207 +40,236 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from "@/components/ui/sheet"
-import {FileImagePreview} from "@/components/common/file-image-preview"
-import services, {formatFileSize} from "@/lib/services"
-import type {Upload as UploadRecord} from "@/lib/services/upload/types"
+} from '@/components/ui/alert-dialog';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { FileImagePreview } from '@/components/common/file-image-preview';
+import services, { formatFileSize } from '@/lib/services';
+import type { Upload as UploadRecord } from '@/lib/services/upload/types';
 
 /* ─── 工具函数 ─────────────────────────────────────────── */
 
-function getFileIcon(mimeType: string, className = "size-8") {
-  if (mimeType.startsWith("image/")) return <FileImage className={`${className} text-blue-400`} />
-  if (mimeType.startsWith("video/")) return <FileVideo className={`${className} text-purple-400`} />
-  if (mimeType.startsWith("audio/")) return <FileAudio className={`${className} text-green-400`} />
-  if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip"))
-    return <FileArchive className={`${className} text-amber-400`} />
-  return <FileText className={`${className} text-slate-400`} />
+function getFileIcon(mimeType: string, className = 'size-8') {
+  if (mimeType.startsWith('image/'))
+    return <FileImage className={`${className} text-blue-400`} />;
+  if (mimeType.startsWith('video/'))
+    return <FileVideo className={`${className} text-purple-400`} />;
+  if (mimeType.startsWith('audio/'))
+    return <FileAudio className={`${className} text-green-400`} />;
+  if (
+    mimeType.includes('zip') ||
+    mimeType.includes('tar') ||
+    mimeType.includes('gzip')
+  )
+    return <FileArchive className={`${className} text-amber-400`} />;
+  return <FileText className={`${className} text-slate-400`} />;
 }
 
 function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleString("zh-CN", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  })
+  return new Date(dateStr).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 }
 
 export function FileList() {
-  const queryClient = useQueryClient()
-  const [keyword, setKeyword] = React.useState("")
-  const [debouncedKeyword, setDebouncedKeyword] = React.useState("")
-  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set())
-  const [deleteTarget, setDeleteTarget] = React.useState<UploadRecord | null>(null)
-  const [detailTarget, setDetailTarget] = React.useState<UploadRecord | null>(null)
-  const [page, setPage] = React.useState(1)
-  const pageSize = 15 // 表格视图下 15 条更紧凑
+  const queryClient = useQueryClient();
+  const [keyword, setKeyword] = React.useState('');
+  const [debouncedKeyword, setDebouncedKeyword] = React.useState('');
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());
+  const [deleteTarget, setDeleteTarget] = React.useState<UploadRecord | null>(
+    null,
+  );
+  const [detailTarget, setDetailTarget] = React.useState<UploadRecord | null>(
+    null,
+  );
+  const [page, setPage] = React.useState(1);
+  const pageSize = 15; // 表格视图下 15 条更紧凑
 
   // 搜索防抖
   React.useEffect(() => {
     const timer = setTimeout(() => {
-      setDebouncedKeyword(keyword)
-      setPage(1)
-    }, 400)
-    return () => clearTimeout(timer)
-  }, [keyword])
+      setDebouncedKeyword(keyword);
+      setPage(1);
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [keyword]);
 
   // 文件列表查询
   const listQuery = useQuery({
-    queryKey: ["files", "all", page, pageSize, debouncedKeyword],
-    queryFn: () => services.adminUpload.listUploads(page, pageSize, debouncedKeyword || undefined),
-  })
+    queryKey: ['files', 'all', page, pageSize, debouncedKeyword],
+    queryFn: () =>
+      services.adminUpload.listUploads(
+        page,
+        pageSize,
+        debouncedKeyword || undefined,
+      ),
+  });
 
   const storageDriverQuery = useQuery({
-    queryKey: ["admin", "storage-config", "driver"],
+    queryKey: ['admin', 'storage-config', 'driver'],
     queryFn: async () => {
-      const record = await services.adminSystemConfig.getSystemConfig("storage_config")
-      const cfg = JSON.parse(record.value) as {driver?: string}
-      return cfg.driver ?? "local"
+      const record =
+        await services.adminSystemConfig.getSystemConfig('storage_config');
+      const cfg = JSON.parse(record.value) as { driver?: string };
+      return cfg.driver ?? 'local';
     },
-  })
+  });
 
-  const files = listQuery.data?.items ?? []
-  const total = listQuery.data?.total ?? 0
-  const totalPages = Math.ceil(total / pageSize)
+  const files = listQuery.data?.items ?? [];
+  const total = listQuery.data?.total ?? 0;
+  const totalPages = Math.ceil(total / pageSize);
 
-  const isAllSelected = files.length > 0 && files.every((f) => selectedIds.has(f.id))
-  const isSomeSelected = files.length > 0 && files.some((f) => selectedIds.has(f.id)) && !isAllSelected
+  const isAllSelected =
+    files.length > 0 && files.every((f) => selectedIds.has(f.id));
+  const isSomeSelected =
+    files.length > 0 &&
+    files.some((f) => selectedIds.has(f.id)) &&
+    !isAllSelected;
 
   const handleSelectAll = () => {
     if (isAllSelected) {
       setSelectedIds((prev) => {
-        const next = new Set(prev)
-        files.forEach((f) => next.delete(f.id))
-        return next
-      })
+        const next = new Set(prev);
+        files.forEach((f) => next.delete(f.id));
+        return next;
+      });
     } else {
       setSelectedIds((prev) => {
-        const next = new Set(prev)
-        files.forEach((f) => next.add(f.id))
-        return next
-      })
+        const next = new Set(prev);
+        files.forEach((f) => next.add(f.id));
+        return next;
+      });
     }
-  }
+  };
 
   // 删除单文件
   const deleteMutation = useMutation({
     mutationFn: (id: string) => services.adminUpload.deleteFile(id),
     onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["files", "my"] })
-      void queryClient.invalidateQueries({ queryKey: ["files", "stats"] })
-      toast.success("文件已删除")
-      setDeleteTarget(null)
+      void queryClient.invalidateQueries({ queryKey: ['files', 'my'] });
+      void queryClient.invalidateQueries({ queryKey: ['files', 'stats'] });
+      toast.success('文件已删除');
+      setDeleteTarget(null);
     },
-    onError: (err: Error) => toast.error(err.message || "删除失败"),
-  })
+    onError: (err: Error) => toast.error(err.message || '删除失败'),
+  });
 
   // 批量 ZIP 下载
   const batchDownloadMutation = useMutation({
     mutationFn: (ids: string[]) => services.adminUpload.batchDownload(ids),
     onSuccess: (blob) => {
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = "batch_download.zip"
-      a.click()
-      URL.revokeObjectURL(url)
-      toast.success("批量下载已开始")
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'batch_download.zip';
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success('批量下载已开始');
     },
-    onError: () => toast.error("批量下载失败"),
-  })
+    onError: () => toast.error('批量下载失败'),
+  });
 
   const toggleSelect = (id: string) => {
     setSelectedIds((prev) => {
-      const next = new Set(prev)
+      const next = new Set(prev);
       if (next.has(id)) {
-        next.delete(id)
+        next.delete(id);
       } else {
-        next.add(id)
+        next.add(id);
       }
-      return next
-    })
-  }
+      return next;
+    });
+  };
 
-  const clearSelection = () => setSelectedIds(new Set())
+  const clearSelection = () => setSelectedIds(new Set());
 
-  const selectAll = () => setSelectedIds(new Set(files.map((f) => f.id)))
+  const selectAll = () => setSelectedIds(new Set(files.map((f) => f.id)));
 
   const handleDownload = (file: UploadRecord) => {
-    const url = services.adminUpload.getDownloadUrl(file.id)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = file.file_name
-    a.click()
-  }
+    const url = services.adminUpload.getDownloadUrl(file.id);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.file_name;
+    a.click();
+  };
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       {/* 搜索栏 */}
-      <div className="flex items-center gap-3">
-        <div className="relative flex-1 max-w-sm">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+      <div className='flex items-center gap-3'>
+        <div className='relative flex-1 max-w-sm'>
+          <Search className='absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground' />
           <Input
-            placeholder="搜索文件名..."
-            className="pl-8 h-8 text-xs border-dashed rounded-lg focus-visible:ring-0"
+            placeholder='搜索文件名...'
+            className='pl-8 h-8 text-xs border-dashed rounded-lg focus-visible:ring-0'
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
           />
           {keyword && (
             <button
-              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              onClick={() => setKeyword("")}
+              className='absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground'
+              onClick={() => setKeyword('')}
             >
-              <X className="size-3" />
+              <X className='size-3' />
             </button>
           )}
         </div>
         {files.length > 0 && (
           <Button
-            size="sm"
-            variant="ghost"
-            className="text-xs h-8 border border-dashed text-muted-foreground"
-            onClick={selectedIds.size === files.length ? clearSelection : selectAll}
+            size='sm'
+            variant='ghost'
+            className='text-xs h-8 border border-dashed text-muted-foreground'
+            onClick={
+              selectedIds.size === files.length ? clearSelection : selectAll
+            }
           >
-            {selectedIds.size === files.length ? "取消全选" : "全选本页"}
+            {selectedIds.size === files.length ? '取消全选' : '全选本页'}
           </Button>
         )}
 
         {/* 打包下载等批量操作 */}
-        <div className="flex items-center gap-2 ml-auto shrink-0">
+        <div className='flex items-center gap-2 ml-auto shrink-0'>
           <AnimatePresence>
             {selectedIds.size > 0 && (
               <motion.div
                 initial={{ opacity: 0, scale: 0.9 }}
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.9 }}
-                className="flex items-center gap-2"
+                className='flex items-center gap-2'
               >
-                <Badge variant="secondary" className="text-xs px-2.5">
+                <Badge variant='secondary' className='text-xs px-2.5'>
                   已选 {selectedIds.size} 个
                 </Badge>
                 <Button
-                  size="sm"
-                  variant="outline"
-                  className="border-dashed text-xs h-8"
+                  size='sm'
+                  variant='outline'
+                  className='border-dashed text-xs h-8'
                   onClick={() => batchDownloadMutation.mutate([...selectedIds])}
                   disabled={batchDownloadMutation.isPending}
                 >
                   {batchDownloadMutation.isPending ? (
-                    <Loader2 className="size-3.5 mr-1 animate-spin" />
+                    <Loader2 className='size-3.5 mr-1 animate-spin' />
                   ) : (
-                    <FileArchive className="size-3.5 mr-1" />
+                    <FileArchive className='size-3.5 mr-1' />
                   )}
                   打包下载
                 </Button>
                 <Button
-                  size="sm"
-                  variant="ghost"
-                  className="text-xs h-8 px-2"
+                  size='sm'
+                  variant='ghost'
+                  className='text-xs h-8 px-2'
                   onClick={clearSelection}
                 >
-                  <X className="size-3.5" />
+                  <X className='size-3.5' />
                 </Button>
               </motion.div>
             )}
@@ -241,131 +277,152 @@ export function FileList() {
         </div>
 
         {total > 0 && (
-          <span className="text-xs text-muted-foreground shrink-0">共 {total} 个文件</span>
+          <span className='text-xs text-muted-foreground shrink-0'>
+            共 {total} 个文件
+          </span>
         )}
       </div>
 
       {/* 文件列表 Table */}
       {listQuery.isPending ? (
-        <div className="flex items-center justify-center py-20">
-          <Loader2 className="size-6 animate-spin text-sky-500" />
+        <div className='flex items-center justify-center py-20'>
+          <Loader2 className='size-6 animate-spin text-sky-500' />
         </div>
       ) : files.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-20 gap-4 text-muted-foreground">
-          <Upload className="size-12 text-muted-foreground/30" />
-          <p className="text-sm">
-            {debouncedKeyword ? "没有匹配的文件" : "您还没有上传任何文件"}
+        <div className='flex flex-col items-center justify-center py-20 gap-4 text-muted-foreground'>
+          <Upload className='size-12 text-muted-foreground/30' />
+          <p className='text-sm'>
+            {debouncedKeyword ? '没有匹配的文件' : '您还没有上传任何文件'}
           </p>
         </div>
       ) : (
-        <div className="border border-dashed rounded-xl bg-card overflow-hidden">
+        <div className='border border-dashed rounded-xl bg-card overflow-hidden'>
           <Table>
             <TableHeader>
-              <TableRow className="hover:bg-transparent border-dashed">
-                <TableHead className="w-[50px] pl-4 py-3">
+              <TableRow className='hover:bg-transparent border-dashed'>
+                <TableHead className='w-[50px] pl-4 py-3'>
                   <Checkbox
-                    checked={isAllSelected || (isSomeSelected ? "indeterminate" : false)}
+                    checked={
+                      isAllSelected ||
+                      (isSomeSelected ? 'indeterminate' : false)
+                    }
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
-                <TableHead className="w-[80px] py-3">预览</TableHead>
-                <TableHead className="w-[180px] py-3">ID</TableHead>
-                <TableHead className="py-3">文件名</TableHead>
-                <TableHead className="max-w-[200px] truncate py-3">路径</TableHead>
-                <TableHead className="w-[100px] py-3">业务类别</TableHead>
-                <TableHead className="w-[125px] py-3">MIME类型</TableHead>
-                <TableHead className="w-[100px] py-3">大小</TableHead>
-                <TableHead className="w-[150px] py-3">上传时间</TableHead>
-                <TableHead className="w-[120px] text-right pr-4 py-3">操作</TableHead>
+                <TableHead className='w-[80px] py-3'>预览</TableHead>
+                <TableHead className='w-[180px] py-3'>ID</TableHead>
+                <TableHead className='py-3'>文件名</TableHead>
+                <TableHead className='max-w-[200px] truncate py-3'>
+                  路径
+                </TableHead>
+                <TableHead className='w-[100px] py-3'>业务类别</TableHead>
+                <TableHead className='w-[125px] py-3'>MIME类型</TableHead>
+                <TableHead className='w-[100px] py-3'>大小</TableHead>
+                <TableHead className='w-[150px] py-3'>上传时间</TableHead>
+                <TableHead className='w-[120px] text-right pr-4 py-3'>
+                  操作
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {files.map((file) => {
-                const isSelected = selectedIds.has(file.id)
+                const isSelected = selectedIds.has(file.id);
                 return (
                   <TableRow
                     key={file.id}
                     className={`border-dashed hover:bg-muted/30 transition-colors ${
-                      isSelected ? "bg-sky-500/5 hover:bg-sky-500/10" : ""
+                      isSelected ? 'bg-sky-500/5 hover:bg-sky-500/10' : ''
                     }`}
                   >
-                    <TableCell className="pl-4 py-3">
+                    <TableCell className='pl-4 py-3'>
                       <Checkbox
                         checked={isSelected}
                         onCheckedChange={() => toggleSelect(file.id)}
                       />
                     </TableCell>
-                    <TableCell className="py-3">
-                      <div className="flex items-center justify-center size-9 rounded-lg bg-muted/40 overflow-hidden border">
-                        {file.mime_type.startsWith("image/") ? (
+                    <TableCell className='py-3'>
+                      <div className='flex items-center justify-center size-9 rounded-lg bg-muted/40 overflow-hidden border'>
+                        {file.mime_type.startsWith('image/') ? (
                           <FileImagePreview
                             fileId={file.id}
                             alt={file.file_name}
-                            quality="low"
-                            variant="compact"
-                            className="size-full object-cover"
+                            quality='low'
+                            variant='compact'
+                            className='size-full object-cover'
                           />
                         ) : (
-                          getFileIcon(file.mime_type, "size-4.5")
+                          getFileIcon(file.mime_type, 'size-4.5')
                         )}
                       </div>
                     </TableCell>
-                    <TableCell className="py-3 font-mono text-[11px] text-muted-foreground select-all">
+                    <TableCell className='py-3 font-mono text-[11px] text-muted-foreground select-all'>
                       {file.id}
                     </TableCell>
-                    <TableCell className="py-3 font-medium max-w-[180px] truncate text-xs" title={file.file_name}>
+                    <TableCell
+                      className='py-3 font-medium max-w-[180px] truncate text-xs'
+                      title={file.file_name}
+                    >
                       {file.file_name}
                     </TableCell>
-                    <TableCell className="py-3 font-mono text-[11px] max-w-[200px] truncate text-muted-foreground select-all" title={file.file_path}>
+                    <TableCell
+                      className='py-3 font-mono text-[11px] max-w-[200px] truncate text-muted-foreground select-all'
+                      title={file.file_path}
+                    >
                       {file.file_path}
                     </TableCell>
-                    <TableCell className="py-3">
-                      <Badge variant="secondary" className="text-[10px] py-0 px-1.5 font-normal rounded-md">
+                    <TableCell className='py-3'>
+                      <Badge
+                        variant='secondary'
+                        className='text-[10px] py-0 px-1.5 font-normal rounded-md'
+                      >
                         {file.type}
                       </Badge>
                     </TableCell>
-                    <TableCell className="py-3 text-[11px] text-muted-foreground truncate max-w-[125px]" title={file.mime_type}>
+                    <TableCell
+                      className='py-3 text-[11px] text-muted-foreground truncate max-w-[125px]'
+                      title={file.mime_type}
+                    >
                       {file.mime_type}
                     </TableCell>
-                    <TableCell className="py-3 text-xs">
+                    <TableCell className='py-3 text-xs'>
                       {formatFileSize(file.file_size)}
                     </TableCell>
-                    <TableCell className="py-3 text-xs text-muted-foreground">
+                    <TableCell className='py-3 text-xs text-muted-foreground'>
                       {formatDate(file.created_at)}
                     </TableCell>
-                    <TableCell className="py-3 text-right pr-4">
-                      <div className="flex items-center justify-end gap-0.5">
+                    <TableCell className='py-3 text-right pr-4'>
+                      <div className='flex items-center justify-end gap-0.5'>
                         <Button
-                          size="icon"
-                          variant="ghost"
-                          className="h-7 w-7 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground"
-                          title="查看详情"
+                          size='icon'
+                          variant='ghost'
+                          className='h-7 w-7 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground'
+                          title='查看详情'
                           onClick={() => setDetailTarget(file)}
                         >
-                          <Eye className="size-3.5" />
+                          <Eye className='size-3.5' />
                         </Button>
                         <Button
-                          size="icon"
-                          variant="ghost"
-                          className="h-7 w-7 rounded-md hover:bg-muted"
-                          title="下载"
+                          size='icon'
+                          variant='ghost'
+                          className='h-7 w-7 rounded-md hover:bg-muted'
+                          title='下载'
                           onClick={() => handleDownload(file)}
                         >
-                          <Download className="size-3.5" />
+                          <Download className='size-3.5' />
                         </Button>
                         <Button
-                          size="icon"
-                          variant="ghost"
-                          className="h-7 w-7 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
-                          title="删除"
+                          size='icon'
+                          variant='ghost'
+                          className='h-7 w-7 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive'
+                          title='删除'
                           onClick={() => setDeleteTarget(file)}
                         >
-                          <Trash2 className="size-3.5" />
+                          <Trash2 className='size-3.5' />
                         </Button>
                       </div>
                     </TableCell>
                   </TableRow>
-                )
+                );
               })}
             </TableBody>
           </Table>
@@ -374,23 +431,23 @@ export function FileList() {
 
       {/* 分页 */}
       {totalPages > 1 && (
-        <div className="flex items-center justify-center gap-2 pt-2">
+        <div className='flex items-center justify-center gap-2 pt-2'>
           <Button
-            size="sm"
-            variant="outline"
-            className="border-dashed text-xs h-7 px-3"
+            size='sm'
+            variant='outline'
+            className='border-dashed text-xs h-7 px-3'
             disabled={page <= 1}
             onClick={() => setPage((p) => p - 1)}
           >
             上一页
           </Button>
-          <span className="text-xs text-muted-foreground">
+          <span className='text-xs text-muted-foreground'>
             {page} / {totalPages}
           </span>
           <Button
-            size="sm"
-            variant="outline"
-            className="border-dashed text-xs h-7 px-3"
+            size='sm'
+            variant='outline'
+            className='border-dashed text-xs h-7 px-3'
             disabled={page >= totalPages}
             onClick={() => setPage((p) => p + 1)}
           >
@@ -400,29 +457,34 @@ export function FileList() {
       )}
 
       {/* 详情查看 Sheet */}
-      <Sheet open={!!detailTarget} onOpenChange={(open) => !open && setDetailTarget(null)}>
-        <SheetContent className="w-full sm:max-w-md overflow-y-auto p-6">
-          <SheetHeader className="border-b pb-4 px-0">
+      <Sheet
+        open={!!detailTarget}
+        onOpenChange={(open) => !open && setDetailTarget(null)}
+      >
+        <SheetContent className='w-full sm:max-w-md overflow-y-auto p-6'>
+          <SheetHeader className='border-b pb-4 px-0'>
             <SheetTitle>文件详情</SheetTitle>
-            <SheetDescription>查看文件的完整元数据与配置属性。</SheetDescription>
+            <SheetDescription>
+              查看文件的完整元数据与配置属性。
+            </SheetDescription>
           </SheetHeader>
 
           {detailTarget && (
-            <div className="space-y-6 py-4">
+            <div className='space-y-6 py-4'>
               {/* 大图/格式预览 */}
-              <div className="flex items-center justify-center h-48 rounded-xl bg-muted/30 border border-dashed overflow-hidden p-2">
-                {detailTarget.mime_type.startsWith("image/") ? (
+              <div className='flex items-center justify-center h-48 rounded-xl bg-muted/30 border border-dashed overflow-hidden p-2'>
+                {detailTarget.mime_type.startsWith('image/') ? (
                   <FileImagePreview
                     fileId={detailTarget.id}
                     alt={detailTarget.file_name}
-                    quality="low"
-                    className="max-h-full max-w-full object-contain rounded-lg shadow-sm"
-                    fallbackClassName="min-h-32 w-full rounded-lg"
+                    quality='low'
+                    className='max-h-full max-w-full object-contain rounded-lg shadow-sm'
+                    fallbackClassName='min-h-32 w-full rounded-lg'
                   />
                 ) : (
-                  <div className="flex flex-col items-center gap-3">
-                    {getFileIcon(detailTarget.mime_type, "size-14")}
-                    <span className="text-xs font-medium text-muted-foreground uppercase">
+                  <div className='flex flex-col items-center gap-3'>
+                    {getFileIcon(detailTarget.mime_type, 'size-14')}
+                    <span className='text-xs font-medium text-muted-foreground uppercase'>
                       {detailTarget.extension} 文件
                     </span>
                   </div>
@@ -430,76 +492,123 @@ export function FileList() {
               </div>
 
               {/* 元数据列表 */}
-              <div className="space-y-4 text-xs">
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">文件 ID</span>
-                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.id}</span>
-                </div>
-
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">文件名</span>
-                  <span className="col-span-2 break-all font-medium text-foreground/90">{detailTarget.file_name}</span>
-                </div>
-
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">存储路径</span>
-                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.file_path}</span>
-                </div>
-
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">大小</span>
-                  <span className="col-span-2 text-foreground/90">
-                    {formatFileSize(detailTarget.file_size)} ({detailTarget.file_size.toLocaleString()} 字节)
+              <div className='space-y-4 text-xs'>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    文件 ID
+                  </span>
+                  <span className='col-span-2 font-mono break-all select-all text-foreground/90'>
+                    {detailTarget.id}
                   </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">MIME 类型</span>
-                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.mime_type}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    文件名
+                  </span>
+                  <span className='col-span-2 break-all font-medium text-foreground/90'>
+                    {detailTarget.file_name}
+                  </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">文件后缀</span>
-                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.extension}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    存储路径
+                  </span>
+                  <span className='col-span-2 font-mono break-all select-all text-foreground/90'>
+                    {detailTarget.file_path}
+                  </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">Hash (SHA-256)</span>
-                  <span className="col-span-2 font-mono break-all select-all text-foreground/90">{detailTarget.hash}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    大小
+                  </span>
+                  <span className='col-span-2 text-foreground/90'>
+                    {formatFileSize(detailTarget.file_size)} (
+                    {detailTarget.file_size.toLocaleString()} 字节)
+                  </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">业务类型</span>
-                  <span className="col-span-2">
-                    <Badge variant="secondary" className="text-[10px] py-0 px-2 rounded-md font-normal">
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    MIME 类型
+                  </span>
+                  <span className='col-span-2 font-mono text-foreground/90'>
+                    {detailTarget.mime_type}
+                  </span>
+                </div>
+
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    文件后缀
+                  </span>
+                  <span className='col-span-2 font-mono text-foreground/90'>
+                    {detailTarget.extension}
+                  </span>
+                </div>
+
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    Hash (SHA-256)
+                  </span>
+                  <span className='col-span-2 font-mono break-all select-all text-foreground/90'>
+                    {detailTarget.hash}
+                  </span>
+                </div>
+
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    业务类型
+                  </span>
+                  <span className='col-span-2'>
+                    <Badge
+                      variant='secondary'
+                      className='text-[10px] py-0 px-2 rounded-md font-normal'
+                    >
                       {detailTarget.type}
                     </Badge>
                   </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">存储驱动</span>
-                  <span className="col-span-2 font-mono text-foreground/90">{storageDriverQuery.data ?? "local"}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    存储驱动
+                  </span>
+                  <span className='col-span-2 font-mono text-foreground/90'>
+                    {storageDriverQuery.data ?? 'local'}
+                  </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">上传者 ID</span>
-                  <span className="col-span-2 font-mono text-foreground/90">{detailTarget.user_id}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    上传者 ID
+                  </span>
+                  <span className='col-span-2 font-mono text-foreground/90'>
+                    {detailTarget.user_id}
+                  </span>
                 </div>
 
-                <div className="grid grid-cols-3 gap-2 border-b border-dashed pb-2">
-                  <span className="text-muted-foreground font-medium">上传时间</span>
-                  <span className="col-span-2 text-foreground/90">{formatDate(detailTarget.created_at)}</span>
+                <div className='grid grid-cols-3 gap-2 border-b border-dashed pb-2'>
+                  <span className='text-muted-foreground font-medium'>
+                    上传时间
+                  </span>
+                  <span className='col-span-2 text-foreground/90'>
+                    {formatDate(detailTarget.created_at)}
+                  </span>
                 </div>
 
-                {detailTarget.metadata && Object.keys(detailTarget.metadata).length > 0 && (
-                  <div className="space-y-1.5 pt-2">
-                    <span className="text-muted-foreground font-medium block">额外元数据</span>
-                    <pre className="p-3 bg-muted/40 border rounded-lg text-[10px] font-mono overflow-x-auto text-foreground/90 max-h-40 overflow-y-auto">
-                      {JSON.stringify(detailTarget.metadata, null, 2)}
-                    </pre>
-                  </div>
-                )}
+                {detailTarget.metadata &&
+                  Object.keys(detailTarget.metadata).length > 0 && (
+                    <div className='space-y-1.5 pt-2'>
+                      <span className='text-muted-foreground font-medium block'>
+                        额外元数据
+                      </span>
+                      <pre className='p-3 bg-muted/40 border rounded-lg text-[10px] font-mono overflow-x-auto text-foreground/90 max-h-40 overflow-y-auto'>
+                        {JSON.stringify(detailTarget.metadata, null, 2)}
+                      </pre>
+                    </div>
+                  )}
               </div>
             </div>
           )}
@@ -507,29 +616,40 @@ export function FileList() {
       </Sheet>
 
       {/* 删除确认 Dialog */}
-      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+      <AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>确认删除文件</AlertDialogTitle>
             <AlertDialogDescription>
-              确定要删除文件{" "}
-              <span className="font-semibold text-foreground">「{deleteTarget?.file_name}」</span>{" "}
+              确定要删除文件{' '}
+              <span className='font-semibold text-foreground'>
+                「{deleteTarget?.file_name}」
+              </span>{' '}
               吗？此操作不可撤销。
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleteMutation.isPending}>取消</AlertDialogCancel>
+            <AlertDialogCancel disabled={deleteMutation.isPending}>
+              取消
+            </AlertDialogCancel>
             <AlertDialogAction
-              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
+              onClick={() =>
+                deleteTarget && deleteMutation.mutate(deleteTarget.id)
+              }
               disabled={deleteMutation.isPending}
-              className="bg-destructive hover:bg-destructive/90 text-destructive-foreground"
+              className='bg-destructive hover:bg-destructive/90 text-destructive-foreground'
             >
-              {deleteMutation.isPending && <Loader2 className="mr-1.5 size-3.5 animate-spin" />}
+              {deleteMutation.isPending && (
+                <Loader2 className='mr-1.5 size-3.5 animate-spin' />
+              )}
               确认删除
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/files/components/file-stats.tsx

@@ -1,12 +1,35 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useQuery} from "@tanstack/react-query"
-import {Database, Files, HardDrive, Info, Loader2, TrendingUp, Upload,} from "lucide-react"
-import {Area, AreaChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis,} from "recharts"
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  Database,
+  Files,
+  HardDrive,
+  Info,
+  Loader2,
+  TrendingUp,
+  Upload,
+} from 'lucide-react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Cell,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
 
-import {Button} from "@/components/ui/button"
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import {
   ChartConfig,
   ChartContainer,
@@ -14,265 +37,322 @@ import {
   ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
-import services, {formatFileSize} from "@/lib/services"
+} from '@/components/ui/chart';
+import services, { formatFileSize } from '@/lib/services';
 
 const categoryMap: Record<string, string> = {
-  "图片": "images",
-  "视频": "videos",
-  "音频": "audio",
-  "文档": "documents",
-  "压缩包": "archives",
-  "其他": "others",
-}
+  图片: 'images',
+  视频: 'videos',
+  音频: 'audio',
+  文档: 'documents',
+  压缩包: 'archives',
+  其他: 'others',
+};
 
 const statsChartConfig = {
   images: {
-    label: "图片",
-    color: "hsl(var(--chart-1))",
+    label: '图片',
+    color: 'hsl(var(--chart-1))',
   },
   videos: {
-    label: "视频",
-    color: "hsl(var(--chart-2))",
+    label: '视频',
+    color: 'hsl(var(--chart-2))',
   },
   audio: {
-    label: "音频",
-    color: "hsl(var(--chart-3))",
+    label: '音频',
+    color: 'hsl(var(--chart-3))',
   },
   documents: {
-    label: "文档",
-    color: "hsl(var(--chart-4))",
+    label: '文档',
+    color: 'hsl(var(--chart-4))',
   },
   archives: {
-    label: "压缩包",
-    color: "hsl(var(--chart-5))",
+    label: '压缩包',
+    color: 'hsl(var(--chart-5))',
   },
   others: {
-    label: "其他",
-    color: "hsl(var(--chart-6))",
+    label: '其他',
+    color: 'hsl(var(--chart-6))',
   },
   count: {
-    label: "新增文件数",
-    color: "hsl(var(--primary))",
+    label: '新增文件数',
+    color: 'hsl(var(--primary))',
   },
   size: {
-    label: "新增大小",
-    color: "hsl(var(--chart-2))",
+    label: '新增大小',
+    color: 'hsl(var(--chart-2))',
   },
-} satisfies ChartConfig
+} satisfies ChartConfig;
 
 export function FileStats() {
-  const [trendMetric, setTrendMetric] = React.useState<"count" | "size">("count")
+  const [trendMetric, setTrendMetric] = React.useState<'count' | 'size'>(
+    'count',
+  );
 
   const statsQuery = useQuery({
-    queryKey: ["files", "stats"],
+    queryKey: ['files', 'stats'],
     queryFn: () => services.adminUpload.getFileStats(),
     staleTime: 0,
-    refetchOnMount: "always",
-  })
+    refetchOnMount: 'always',
+  });
 
-  const stats = statsQuery.data
+  const stats = statsQuery.data;
 
   const trendData = React.useMemo(() => {
-    if (!stats?.trend) return []
+    if (!stats?.trend) return [];
     return stats.trend.map((item) => ({
       ...item,
       formattedDate: item.date.substring(5), // YYYY-MM-DD -> MM-DD
-      value: trendMetric === "count" ? item.count : item.size,
-    }))
-  }, [stats?.trend, trendMetric])
+      value: trendMetric === 'count' ? item.count : item.size,
+    }));
+  }, [stats?.trend, trendMetric]);
 
   const categoryCountData = React.useMemo(() => {
-    if (!stats?.categories) return []
+    if (!stats?.categories) return [];
     return stats.categories
       .filter((c) => c.count > 0)
       .map((c) => {
-        const key = categoryMap[c.name] || "others"
+        const key = categoryMap[c.name] || 'others';
         return {
           name: key,
           value: c.count,
           fill: `var(--color-${key})`,
-        }
-      })
-  }, [stats?.categories])
+        };
+      });
+  }, [stats?.categories]);
 
   const categorySizeData = React.useMemo(() => {
-    if (!stats?.categories) return []
+    if (!stats?.categories) return [];
     return stats.categories
       .filter((c) => c.size > 0)
       .map((c) => {
-        const key = categoryMap[c.name] || "others"
+        const key = categoryMap[c.name] || 'others';
         return {
           name: key,
           value: c.size,
           fill: `var(--color-${key})`,
-        }
-      })
-  }, [stats?.categories])
+        };
+      });
+  }, [stats?.categories]);
 
   const maxStats = React.useMemo(() => {
     if (!stats?.categories || stats.categories.length === 0) {
-      return { maxCountName: "无", maxCount: 0, maxSizeName: "无", maxSize: 0 }
+      return { maxCountName: '无', maxCount: 0, maxSizeName: '无', maxSize: 0 };
     }
-    let maxCountName = "无"
-    let maxCount = 0
-    let maxSizeName = "无"
-    let maxSize = 0
+    let maxCountName = '无';
+    let maxCount = 0;
+    let maxSizeName = '无';
+    let maxSize = 0;
 
     stats.categories.forEach((cat) => {
       if (cat.count > maxCount) {
-        maxCount = cat.count
-        maxCountName = cat.name
+        maxCount = cat.count;
+        maxCountName = cat.name;
       }
       if (cat.size > maxSize) {
-        maxSize = cat.size
-        maxSizeName = cat.name
+        maxSize = cat.size;
+        maxSizeName = cat.name;
       }
-    })
+    });
 
-    return { maxCountName, maxCount, maxSizeName, maxSize }
-  }, [stats?.categories])
+    return { maxCountName, maxCount, maxSizeName, maxSize };
+  }, [stats?.categories]);
 
   const trendSummary = React.useMemo(() => {
-    if (!stats?.trend) return { count: 0, size: 0 }
+    if (!stats?.trend) return { count: 0, size: 0 };
     return stats.trend.reduce(
       (acc, curr) => ({
         count: acc.count + curr.count,
         size: acc.size + curr.size,
       }),
-      { count: 0, size: 0 }
-    )
-  }, [stats?.trend])
+      { count: 0, size: 0 },
+    );
+  }, [stats?.trend]);
 
   if (statsQuery.isLoading) {
     return (
-      <div className="flex items-center justify-center py-32">
-        <Loader2 className="size-8 animate-spin text-sky-500" />
+      <div className='flex items-center justify-center py-32'>
+        <Loader2 className='size-8 animate-spin text-sky-500' />
       </div>
-    )
+    );
   }
 
   if (!stats || stats.total_count === 0) {
     return (
-      <div className="flex flex-col items-center justify-center py-24 border border-dashed rounded-xl bg-card text-muted-foreground gap-4">
-        <Upload className="size-14 text-muted-foreground/25" />
-        <div className="text-center space-y-1">
-          <p className="font-medium">暂无上传数据</p>
-          <p className="text-xs text-muted-foreground">上传文件后即可在此查看容量与文件分布分析。</p>
+      <div className='flex flex-col items-center justify-center py-24 border border-dashed rounded-xl bg-card text-muted-foreground gap-4'>
+        <Upload className='size-14 text-muted-foreground/25' />
+        <div className='text-center space-y-1'>
+          <p className='font-medium'>暂无上传数据</p>
+          <p className='text-xs text-muted-foreground'>
+            上传文件后即可在此查看容量与文件分布分析。
+          </p>
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       {/* 四个指标卡片 */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Card className="bg-card/25 border-border/40 hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-xs font-semibold tracking-tight text-muted-foreground">总文件数</CardTitle>
-            <Files className="size-4 text-sky-500" />
+      <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
+              总文件数
+            </CardTitle>
+            <Files className='size-4 text-sky-500' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono text-sky-500">
-              {stats.total_count.toLocaleString()}{" "}
-              <span className="text-xs font-normal text-muted-foreground">个</span>
+            <div className='text-2xl font-bold font-mono text-sky-500'>
+              {stats.total_count.toLocaleString()}{' '}
+              <span className='text-xs font-normal text-muted-foreground'>
+                个
+              </span>
             </div>
-            <p className="text-[10px] text-muted-foreground mt-1">您上传的可用文件数量汇总</p>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              您上传的可用文件数量汇总
+            </p>
           </CardContent>
         </Card>
 
-        <Card className="bg-card/25 border-border/40 hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-xs font-semibold tracking-tight text-muted-foreground">占用存储容量</CardTitle>
-            <Database className="size-4 text-emerald-500" />
+        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
+              占用存储容量
+            </CardTitle>
+            <Database className='size-4 text-emerald-500' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono text-emerald-500">{formatFileSize(stats.total_size)}</div>
-            <p className="text-[10px] text-muted-foreground mt-1">文件实际在磁盘/S3中占用的总空间</p>
-          </CardContent>
-        </Card>
-
-        <Card className="bg-card/25 border-border/40 hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-xs font-semibold tracking-tight text-muted-foreground">近 7 天新增文件</CardTitle>
-            <TrendingUp className="size-4 text-indigo-500" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold font-mono text-indigo-500">
-              +{trendSummary.count.toLocaleString()}{" "}
-              <span className="text-xs font-normal text-muted-foreground">个</span>
+            <div className='text-2xl font-bold font-mono text-emerald-500'>
+              {formatFileSize(stats.total_size)}
             </div>
-            <p className="text-[10px] text-muted-foreground mt-1">最近 7 天上传成功的文件总数</p>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              文件实际在磁盘/S3中占用的总空间
+            </p>
           </CardContent>
         </Card>
 
-        <Card className="bg-card/25 border-border/40 hover:shadow-md transition-shadow">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-xs font-semibold tracking-tight text-muted-foreground">近 7 天新增大小</CardTitle>
-            <HardDrive className="size-4 text-amber-500" />
+        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
+              近 7 天新增文件
+            </CardTitle>
+            <TrendingUp className='size-4 text-indigo-500' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono text-amber-500">+{formatFileSize(trendSummary.size)}</div>
-            <p className="text-[10px] text-muted-foreground mt-1">最近 7 天上传所消耗的存储带宽</p>
+            <div className='text-2xl font-bold font-mono text-indigo-500'>
+              +{trendSummary.count.toLocaleString()}{' '}
+              <span className='text-xs font-normal text-muted-foreground'>
+                个
+              </span>
+            </div>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              最近 7 天上传成功的文件总数
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className='bg-card/25 border-border/40 hover:shadow-md transition-shadow'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-xs font-semibold tracking-tight text-muted-foreground'>
+              近 7 天新增大小
+            </CardTitle>
+            <HardDrive className='size-4 text-amber-500' />
+          </CardHeader>
+          <CardContent>
+            <div className='text-2xl font-bold font-mono text-amber-500'>
+              +{formatFileSize(trendSummary.size)}
+            </div>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              最近 7 天上传所消耗的存储带宽
+            </p>
           </CardContent>
         </Card>
       </div>
 
       {/* 7 天新增趋势折线图 */}
-      <Card className="bg-card/20 border-border/40">
-        <CardHeader className="flex flex-row items-center justify-between">
+      <Card className='bg-card/20 border-border/40'>
+        <CardHeader className='flex flex-row items-center justify-between'>
           <div>
-            <CardTitle className="text-sm font-bold">最近 7 天新增趋势</CardTitle>
-            <CardDescription className="text-xs">按日统计近一周期内的上传波动</CardDescription>
+            <CardTitle className='text-sm font-bold'>
+              最近 7 天新增趋势
+            </CardTitle>
+            <CardDescription className='text-xs'>
+              按日统计近一周期内的上传波动
+            </CardDescription>
           </div>
-          <div className="flex items-center gap-1 border rounded-lg p-0.5 bg-muted/30">
+          <div className='flex items-center gap-1 border rounded-lg p-0.5 bg-muted/30'>
             <Button
-              size="sm"
-              variant={trendMetric === "count" ? "secondary" : "ghost"}
-              className="h-7 text-xs px-2.5 rounded-md"
-              onClick={() => setTrendMetric("count")}
+              size='sm'
+              variant={trendMetric === 'count' ? 'secondary' : 'ghost'}
+              className='h-7 text-xs px-2.5 rounded-md'
+              onClick={() => setTrendMetric('count')}
             >
               新增数量 (个)
             </Button>
             <Button
-              size="sm"
-              variant={trendMetric === "size" ? "secondary" : "ghost"}
-              className="h-7 text-xs px-2.5 rounded-md"
-              onClick={() => setTrendMetric("size")}
+              size='sm'
+              variant={trendMetric === 'size' ? 'secondary' : 'ghost'}
+              className='h-7 text-xs px-2.5 rounded-md'
+              onClick={() => setTrendMetric('size')}
             >
               新增大小 (MB)
             </Button>
           </div>
         </CardHeader>
-        <CardContent className="pl-2 pr-4 pt-2">
-          <div className="h-[280px] w-full">
-            <ChartContainer config={statsChartConfig} className="w-full h-full">
-              <AreaChart data={trendData} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
+        <CardContent className='pl-2 pr-4 pt-2'>
+          <div className='h-[280px] w-full'>
+            <ChartContainer config={statsChartConfig} className='w-full h-full'>
+              <AreaChart
+                data={trendData}
+                margin={{ top: 10, right: 10, left: 10, bottom: 0 }}
+              >
                 <defs>
-                  <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="var(--color-count)" stopOpacity={0.3} />
-                    <stop offset="95%" stopColor="var(--color-count)" stopOpacity={0.01} />
+                  <linearGradient id='colorCount' x1='0' y1='0' x2='0' y2='1'>
+                    <stop
+                      offset='5%'
+                      stopColor='var(--color-count)'
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset='95%'
+                      stopColor='var(--color-count)'
+                      stopOpacity={0.01}
+                    />
                   </linearGradient>
-                  <linearGradient id="colorSize" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="var(--color-size)" stopOpacity={0.3} />
-                    <stop offset="95%" stopColor="var(--color-size)" stopOpacity={0.01} />
+                  <linearGradient id='colorSize' x1='0' y1='0' x2='0' y2='1'>
+                    <stop
+                      offset='5%'
+                      stopColor='var(--color-size)'
+                      stopOpacity={0.3}
+                    />
+                    <stop
+                      offset='95%'
+                      stopColor='var(--color-size)'
+                      stopOpacity={0.01}
+                    />
                   </linearGradient>
                 </defs>
-                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border)/40)" />
+                <CartesianGrid
+                  strokeDasharray='3 3'
+                  vertical={false}
+                  stroke='hsl(var(--border)/40)'
+                />
                 <XAxis
-                  dataKey="formattedDate"
+                  dataKey='formattedDate'
                   tickLine={false}
                   axisLine={false}
                   tickMargin={8}
-                  style={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
+                  style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
                 />
                 <YAxis
                   tickLine={false}
                   axisLine={false}
                   tickMargin={8}
-                  style={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }}
-                  tickFormatter={(v) => (trendMetric === "size" ? formatFileSize(v) : v.toString())}
+                  style={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+                  tickFormatter={(v) =>
+                    trendMetric === 'size' ? formatFileSize(v) : v.toString()
+                  }
                 />
                 <ChartTooltip
                   cursor={false}
@@ -280,37 +360,52 @@ export function FileStats() {
                     <ChartTooltipContent
                       hideLabel
                       formatter={(value) => {
-                        const label = trendMetric === "count" ? "新增文件数" : "新增大小"
+                        const label =
+                          trendMetric === 'count' ? '新增文件数' : '新增大小';
                         const formattedValue =
-                          trendMetric === "size" ? formatFileSize(Number(value)) : `${value} 个`
+                          trendMetric === 'size'
+                            ? formatFileSize(Number(value))
+                            : `${value} 个`;
                         return (
                           <>
-                            <div className="flex items-center gap-1.5">
+                            <div className='flex items-center gap-1.5'>
                               <span
-                                className="size-2 rounded-full animate-pulse"
+                                className='size-2 rounded-full animate-pulse'
                                 style={{
                                   backgroundColor:
-                                    trendMetric === "count" ? "var(--color-count)" : "var(--color-size)",
+                                    trendMetric === 'count'
+                                      ? 'var(--color-count)'
+                                      : 'var(--color-size)',
                                 }}
                               />
-                              <span className="text-muted-foreground">{label}</span>
+                              <span className='text-muted-foreground'>
+                                {label}
+                              </span>
                             </div>
-                            <span className="text-foreground font-mono font-medium tabular-nums ml-auto">
+                            <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                               {formattedValue}
                             </span>
                           </>
-                        )
+                        );
                       }}
                     />
                   }
                 />
                 <Area
-                  type="monotone"
-                  dataKey="value"
-                  stroke={trendMetric === "count" ? "var(--color-count)" : "var(--color-size)"}
+                  type='monotone'
+                  dataKey='value'
+                  stroke={
+                    trendMetric === 'count'
+                      ? 'var(--color-count)'
+                      : 'var(--color-size)'
+                  }
                   strokeWidth={2.5}
                   fillOpacity={1}
-                  fill={trendMetric === "count" ? "url(#colorCount)" : "url(#colorSize)"}
+                  fill={
+                    trendMetric === 'count'
+                      ? 'url(#colorCount)'
+                      : 'url(#colorSize)'
+                  }
                 />
               </AreaChart>
             </ChartContainer>
@@ -319,30 +414,37 @@ export function FileStats() {
       </Card>
 
       {/* 两个饼图分布 */}
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className='grid gap-6 md:grid-cols-2'>
         {/* 饼图 1: 格式数量分布 */}
-        <Card className="bg-card/20 border-border/40 flex flex-col">
+        <Card className='bg-card/20 border-border/40 flex flex-col'>
           <CardHeader>
-            <CardTitle className="text-sm font-bold">文件格式数量分布</CardTitle>
-            <CardDescription className="text-xs">各种格式类型的文件个数占比</CardDescription>
+            <CardTitle className='text-sm font-bold'>
+              文件格式数量分布
+            </CardTitle>
+            <CardDescription className='text-xs'>
+              各种格式类型的文件个数占比
+            </CardDescription>
           </CardHeader>
-          <CardContent className="flex-1 flex flex-col justify-between gap-4">
+          <CardContent className='flex-1 flex flex-col justify-between gap-4'>
             {categoryCountData.length === 0 ? (
-              <div className="h-[240px] flex items-center justify-center text-xs text-muted-foreground">
+              <div className='h-[240px] flex items-center justify-center text-xs text-muted-foreground'>
                 暂无分类数据
               </div>
             ) : (
-              <div className="h-[240px] w-full">
-                <ChartContainer config={statsChartConfig} className="w-full h-full">
+              <div className='h-[240px] w-full'>
+                <ChartContainer
+                  config={statsChartConfig}
+                  className='w-full h-full'
+                >
                   <PieChart>
                     <Pie
                       data={categoryCountData}
-                      cx="50%"
-                      cy="50%"
+                      cx='50%'
+                      cy='50%'
                       innerRadius={60}
                       outerRadius={80}
                       paddingAngle={3}
-                      dataKey="value"
+                      dataKey='value'
                     >
                       {categoryCountData.map((entry, index) => (
                         <Cell key={`cell-${index}`} fill={entry.fill} />
@@ -354,66 +456,88 @@ export function FileStats() {
                         <ChartTooltipContent
                           hideLabel
                           formatter={(value, name) => {
-                            const configObj = statsChartConfig[name as keyof typeof statsChartConfig]
-                            const label = configObj?.label || name
-                            const color = configObj?.color || "hsl(var(--muted))"
+                            const configObj =
+                              statsChartConfig[
+                                name as keyof typeof statsChartConfig
+                              ];
+                            const label = configObj?.label || name;
+                            const color =
+                              configObj?.color || 'hsl(var(--muted))';
                             return (
                               <>
-                                <div className="flex items-center gap-1.5">
-                                  <span className="size-2 rounded-full" style={{ backgroundColor: color }} />
-                                  <span className="text-muted-foreground">{label}</span>
+                                <div className='flex items-center gap-1.5'>
+                                  <span
+                                    className='size-2 rounded-full'
+                                    style={{ backgroundColor: color }}
+                                  />
+                                  <span className='text-muted-foreground'>
+                                    {label}
+                                  </span>
                                 </div>
-                                <span className="text-foreground font-mono font-medium tabular-nums ml-auto">
+                                <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                                   {value} 个
                                 </span>
                               </>
-                            )
+                            );
                           }}
                         />
                       }
                     />
                     <ChartLegend
-                      content={<ChartLegendContent nameKey="name" />}
-                      className="flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4"
+                      content={<ChartLegendContent nameKey='name' />}
+                      className='flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4'
                     />
                   </PieChart>
                 </ChartContainer>
               </div>
             )}
-            <div className="bg-sky-500/5 border border-sky-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-sky-600 dark:text-sky-400">
-              <Info className="size-4 shrink-0 mt-0.5" />
-              <p className="leading-normal">
-                文件类型中数量最多的是{" "}
-                <strong className="font-bold">「{maxStats.maxCountName}」</strong>，累计上传了{" "}
-                <strong className="font-mono font-bold">{maxStats.maxCount}</strong> 个文件。
+            <div className='bg-sky-500/5 border border-sky-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-sky-600 dark:text-sky-400'>
+              <Info className='size-4 shrink-0 mt-0.5' />
+              <p className='leading-normal'>
+                文件类型中数量最多的是{' '}
+                <strong className='font-bold'>
+                  「{maxStats.maxCountName}」
+                </strong>
+                ，累计上传了{' '}
+                <strong className='font-mono font-bold'>
+                  {maxStats.maxCount}
+                </strong>{' '}
+                个文件。
               </p>
             </div>
           </CardContent>
         </Card>
 
         {/* 饼图 2: 格式容量分布 */}
-        <Card className="bg-card/20 border-border/40 flex flex-col">
+        <Card className='bg-card/20 border-border/40 flex flex-col'>
           <CardHeader>
-            <CardTitle className="text-sm font-bold">文件占用容量分布</CardTitle>
-            <CardDescription className="text-xs">各种格式类型的文件大小占比</CardDescription>
+            <CardTitle className='text-sm font-bold'>
+              文件占用容量分布
+            </CardTitle>
+            <CardDescription className='text-xs'>
+              各种格式类型的文件大小占比
+            </CardDescription>
           </CardHeader>
-          <CardContent className="flex-1 flex flex-col justify-between gap-4">
+          <CardContent className='flex-1 flex flex-col justify-between gap-4'>
             {categorySizeData.length === 0 ? (
-              <div className="h-[240px] flex items-center justify-center text-xs text-muted-foreground">
+              <div className='h-[240px] flex items-center justify-center text-xs text-muted-foreground'>
                 暂无容量数据
               </div>
             ) : (
-              <div className="h-[240px] w-full">
-                <ChartContainer config={statsChartConfig} className="w-full h-full">
+              <div className='h-[240px] w-full'>
+                <ChartContainer
+                  config={statsChartConfig}
+                  className='w-full h-full'
+                >
                   <PieChart>
                     <Pie
                       data={categorySizeData}
-                      cx="50%"
-                      cy="50%"
+                      cx='50%'
+                      cy='50%'
                       innerRadius={60}
                       outerRadius={80}
                       paddingAngle={3}
-                      dataKey="value"
+                      dataKey='value'
                     >
                       {categorySizeData.map((entry, index) => (
                         <Cell key={`cell-${index}`} fill={entry.fill} />
@@ -425,38 +549,52 @@ export function FileStats() {
                         <ChartTooltipContent
                           hideLabel
                           formatter={(value, name) => {
-                            const configObj = statsChartConfig[name as keyof typeof statsChartConfig]
-                            const label = configObj?.label || name
-                            const color = configObj?.color || "hsl(var(--muted))"
+                            const configObj =
+                              statsChartConfig[
+                                name as keyof typeof statsChartConfig
+                              ];
+                            const label = configObj?.label || name;
+                            const color =
+                              configObj?.color || 'hsl(var(--muted))';
                             return (
                               <>
-                                <div className="flex items-center gap-1.5">
-                                  <span className="size-2 rounded-full" style={{ backgroundColor: color }} />
-                                  <span className="text-muted-foreground">{label}</span>
+                                <div className='flex items-center gap-1.5'>
+                                  <span
+                                    className='size-2 rounded-full'
+                                    style={{ backgroundColor: color }}
+                                  />
+                                  <span className='text-muted-foreground'>
+                                    {label}
+                                  </span>
                                 </div>
-                                <span className="text-foreground font-mono font-medium tabular-nums ml-auto">
+                                <span className='text-foreground font-mono font-medium tabular-nums ml-auto'>
                                   {formatFileSize(Number(value))}
                                 </span>
                               </>
-                            )
+                            );
                           }}
                         />
                       }
                     />
                     <ChartLegend
-                      content={<ChartLegendContent nameKey="name" />}
-                      className="flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4"
+                      content={<ChartLegendContent nameKey='name' />}
+                      className='flex-wrap justify-center gap-x-4 gap-y-1 text-[11px] pt-4'
                     />
                   </PieChart>
                 </ChartContainer>
               </div>
             )}
-            <div className="bg-emerald-500/5 border border-emerald-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-emerald-600 dark:text-emerald-400">
-              <Info className="size-4 shrink-0 mt-0.5" />
-              <p className="leading-normal">
-                文件类型中占用存储最大的是{" "}
-                <strong className="font-bold">「{maxStats.maxSizeName}」</strong>，共消耗了{" "}
-                <strong className="font-mono font-bold">{formatFileSize(maxStats.maxSize)}</strong>{" "}
+            <div className='bg-emerald-500/5 border border-emerald-500/10 rounded-lg p-3 flex items-start gap-2.5 text-xs text-emerald-600 dark:text-emerald-400'>
+              <Info className='size-4 shrink-0 mt-0.5' />
+              <p className='leading-normal'>
+                文件类型中占用存储最大的是{' '}
+                <strong className='font-bold'>
+                  「{maxStats.maxSizeName}」
+                </strong>
+                ，共消耗了{' '}
+                <strong className='font-mono font-bold'>
+                  {formatFileSize(maxStats.maxSize)}
+                </strong>{' '}
                 存储容量。
               </p>
             </div>
@@ -464,5 +602,5 @@ export function FileStats() {
         </Card>
       </div>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/files/components/storage-config-tab.tsx

@@ -1,104 +1,130 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {Database, Loader2, Play, Save} from "lucide-react"
-import {toast} from "sonner"
+import * as React from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Database, Loader2, Play, Save } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card"
-import {Field, FieldDescription, FieldGroup, FieldLabel} from "@/components/ui/field"
-import {Input} from "@/components/ui/input"
-import {Progress} from "@/components/ui/progress"
-import {Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Switch} from "@/components/ui/switch"
-import services from "@/lib/services"
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import services from '@/lib/services';
 import type {
   ObjectStorageConfig,
   StorageConfig,
   StorageDriver,
   TaskExecution,
-  TaskExecutionStatus
-} from "@/lib/services/admin/types"
+  TaskExecutionStatus,
+} from '@/lib/services/admin/types';
 
-const storageConfigKey = "storage_config"
-const storageMigrationTaskType = "storage_migration"
+const storageConfigKey = 'storage_config';
+const storageMigrationTaskType = 'storage_migration';
 
 const driverLabels: Record<StorageDriver, string> = {
-  local: "本地文件系统",
-  s3: "AWS S3",
-  r2: "Cloudflare R2",
-  minio: "MinIO",
-  oss: "阿里云 OSS",
-  webdav: "WebDAV",
-}
+  local: '本地文件系统',
+  s3: 'AWS S3',
+  r2: 'Cloudflare R2',
+  minio: 'MinIO',
+  oss: '阿里云 OSS',
+  webdav: 'WebDAV',
+};
 
 const emptyObjectConfig: ObjectStorageConfig = {
-  endpoint: "",
-  region: "",
-  bucket: "",
-  access_key_id: "",
-  secret_access_key: "",
+  endpoint: '',
+  region: '',
+  bucket: '',
+  access_key_id: '',
+  secret_access_key: '',
   path_style: false,
-  key_prefix: "",
-  cdn_url: "",
-}
+  key_prefix: '',
+  cdn_url: '',
+};
 
 function normalizeConfig(config: StorageConfig): StorageConfig {
-  const s3 = {...emptyObjectConfig, ...config.s3}
-  const r2 = {...emptyObjectConfig, ...config.r2}
-  const minio = {...emptyObjectConfig, ...config.minio}
-  const oss = {...emptyObjectConfig, ...config.oss}
-  const webdav = {...config.webdav}
+  const s3 = { ...emptyObjectConfig, ...config.s3 };
+  const r2 = { ...emptyObjectConfig, ...config.r2 };
+  const minio = { ...emptyObjectConfig, ...config.minio };
+  const oss = { ...emptyObjectConfig, ...config.oss };
+  const webdav = { ...config.webdav };
   return {
     ...config,
-    local: {root: config.local?.root || "."},
-    s3: {...s3, region: s3.region || "us-east-1"},
-    r2: {...r2, region: r2.region || "auto"},
-    minio: {...minio, region: minio.region || "us-east-1", path_style: config.minio?.path_style ?? true},
+    local: { root: config.local?.root || '.' },
+    s3: { ...s3, region: s3.region || 'us-east-1' },
+    r2: { ...r2, region: r2.region || 'auto' },
+    minio: {
+      ...minio,
+      region: minio.region || 'us-east-1',
+      path_style: config.minio?.path_style ?? true,
+    },
     oss,
     webdav: {
-      endpoint: webdav.endpoint || "",
-      username: webdav.username || "",
-      password: webdav.password || "",
-      base_path: webdav.base_path || "",
+      endpoint: webdav.endpoint || '',
+      username: webdav.username || '',
+      password: webdav.password || '',
+      base_path: webdav.base_path || '',
     },
-  }
+  };
 }
 
 type StorageMigrationView = {
-  state: "idle" | TaskExecutionStatus
-  id?: string
-  task_id?: string
-  source_driver?: StorageDriver
-  target_driver?: StorageDriver
-  error?: string
-}
+  state: 'idle' | TaskExecutionStatus;
+  id?: string;
+  task_id?: string;
+  source_driver?: StorageDriver;
+  target_driver?: StorageDriver;
+  error?: string;
+};
 
 type StorageMigrationPayload = {
-  target: StorageConfig
-}
+  target: StorageConfig;
+};
 
 function parseMigrationPayload(payload: string): StorageConfig | undefined {
   try {
-    const parsed = JSON.parse(payload) as Partial<StorageMigrationPayload>
-    return parsed.target ? normalizeConfig(parsed.target) : undefined
+    const parsed = JSON.parse(payload) as Partial<StorageMigrationPayload>;
+    return parsed.target ? normalizeConfig(parsed.target) : undefined;
   } catch {
-    return undefined
+    return undefined;
   }
 }
 
 function driverLabel(driver?: StorageDriver): string {
-  return driver ? driverLabels[driver] : "未知"
+  return driver ? driverLabels[driver] : '未知';
 }
 
-function latestMigration(executions: TaskExecution[], current?: StorageConfig): StorageMigrationView {
-  const execution = executions[0]
-  if (!execution || execution.status === "succeeded") {
-    return {state: "idle"}
+function latestMigration(
+  executions: TaskExecution[],
+  current?: StorageConfig,
+): StorageMigrationView {
+  const execution = executions[0];
+  if (!execution || execution.status === 'succeeded') {
+    return { state: 'idle' };
   }
-  const target = parseMigrationPayload(execution.payload)
+  const target = parseMigrationPayload(execution.payload);
   return {
     state: execution.status,
     id: execution.id,
@@ -106,227 +132,339 @@ function latestMigration(executions: TaskExecution[], current?: StorageConfig):
     source_driver: current?.driver,
     target_driver: target?.driver,
     error: execution.error_message,
-  }
+  };
 }
 
 export function StorageConfigTab() {
-  const queryClient = useQueryClient()
-  const [config, setConfig] = React.useState<StorageConfig | null>(null)
+  const queryClient = useQueryClient();
+  const [config, setConfig] = React.useState<StorageConfig | null>(null);
   const query = useQuery({
-    queryKey: ["admin", "storage-config"],
+    queryKey: ['admin', 'storage-config'],
     queryFn: async () => {
       const [configRecord, executions] = await Promise.all([
         services.adminSystemConfig.getSystemConfig(storageConfigKey),
-        services.adminTask.listTaskExecutions({task_type: storageMigrationTaskType, page: 1, page_size: 1}),
-      ])
-      const current = normalizeConfig(JSON.parse(configRecord.value) as StorageConfig)
-      const migration = latestMigration(executions.items, current)
+        services.adminTask.listTaskExecutions({
+          task_type: storageMigrationTaskType,
+          page: 1,
+          page_size: 1,
+        }),
+      ]);
+      const current = normalizeConfig(
+        JSON.parse(configRecord.value) as StorageConfig,
+      );
+      const migration = latestMigration(executions.items, current);
       return {
         config: current,
         migration,
-      }
+      };
     },
     refetchInterval: (result) => {
-      const state = result.state.data?.migration.state
-      return state === "pending" || state === "running" ? 2000 : false
+      const state = result.state.data?.migration.state;
+      return state === 'pending' || state === 'running' ? 2000 : false;
     },
-  })
+  });
 
   React.useEffect(() => {
     if (query.data?.config) {
       setConfig((current) => {
-        const normalized = normalizeConfig(query.data.config)
+        const normalized = normalizeConfig(query.data.config);
         if (current) {
           return {
             ...normalized,
             driver: current.driver,
-          }
+          };
         }
-        return normalized
-      })
+        return normalized;
+      });
     }
-  }, [query.data?.config])
+  }, [query.data?.config]);
 
   const saveMutation = useMutation({
     mutationFn: async (value: StorageConfig) => {
       await services.adminSystemConfig.updateSystemConfig(storageConfigKey, {
         value: JSON.stringify(value),
-      })
+      });
     },
     onSuccess: () => {
-      toast.success("存储配置已保存")
-      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+      toast.success('存储配置已保存');
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'storage-config'],
+      });
     },
     onError: (error: Error) => {
-      toast.error(error.message || "保存存储配置失败")
-      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+      toast.error(error.message || '保存存储配置失败');
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'storage-config'],
+      });
     },
-  })
+  });
 
   const migrateMutation = useMutation({
     mutationFn: async (value: StorageConfig) => {
-      const payload: StorageMigrationPayload = {target: value}
+      const payload: StorageMigrationPayload = { target: value };
       return services.adminTask.dispatchTask({
         task_type: storageMigrationTaskType,
         payload: JSON.stringify(payload),
-      })
+      });
     },
     onSuccess: () => {
-      toast.success("存储迁移任务已下发")
-      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+      toast.success('存储迁移任务已下发');
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'storage-config'],
+      });
     },
     onError: (error: Error) => {
-      toast.error(error.message || "下发存储迁移任务失败")
-      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+      toast.error(error.message || '下发存储迁移任务失败');
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'storage-config'],
+      });
     },
-  })
+  });
   const runMutation = useMutation({
-    mutationFn: (executionID: string) => services.adminTask.retryTaskExecution(executionID),
+    mutationFn: (executionID: string) =>
+      services.adminTask.retryTaskExecution(executionID),
     onSuccess: () => {
-      toast.success("存储迁移任务已重新下发")
-      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+      toast.success('存储迁移任务已重新下发');
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'storage-config'],
+      });
     },
-    onError: (error: Error) => toast.error(error.message || "运行存储迁移失败"),
-  })
+    onError: (error: Error) => toast.error(error.message || '运行存储迁移失败'),
+  });
 
   if (query.isPending || !config) {
-    return <div className="flex justify-center py-20"><Loader2 className="animate-spin" /></div>
+    return (
+      <div className='flex justify-center py-20'>
+        <Loader2 className='animate-spin' />
+      </div>
+    );
   }
 
-  const migration = query.data?.migration
-  const isReadOnly = migration ? migration.state !== "idle" : false
+  const migration = query.data?.migration;
+  const isReadOnly = migration ? migration.state !== 'idle' : false;
   const isFormDisabled =
-    (migration ? (migration.state === "pending" || migration.state === "running") : false) ||
+    (migration
+      ? migration.state === 'pending' || migration.state === 'running'
+      : false) ||
     saveMutation.isPending ||
-    migrateMutation.isPending
+    migrateMutation.isPending;
 
-  const updateObject = (driver: "s3" | "r2" | "minio" | "oss", patch: Partial<ObjectStorageConfig>) => {
-    setConfig((current) => current ? {
-      ...current,
-      [driver]: {...current[driver], ...patch},
-    } : current)
-  }
+  const updateObject = (
+    driver: 's3' | 'r2' | 'minio' | 'oss',
+    patch: Partial<ObjectStorageConfig>,
+  ) => {
+    setConfig((current) =>
+      current
+        ? {
+            ...current,
+            [driver]: { ...current[driver], ...patch },
+          }
+        : current,
+    );
+  };
 
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div className='flex w-full flex-col gap-6'>
       {isReadOnly && migration && (
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
+            <CardTitle className='flex items-center gap-2'>
               存储维护模式
-              <Badge variant={migration.state === "failed" ? "destructive" : "secondary"}>
+              <Badge
+                variant={
+                  migration.state === 'failed' ? 'destructive' : 'secondary'
+                }
+              >
                 {migration.state}
               </Badge>
             </CardTitle>
             <CardDescription>
-              {driverLabel(migration.source_driver)} → {driverLabel(migration.target_driver)}。迁移期间文件只允许读取，禁止上传、删除和清理。
+              {driverLabel(migration.source_driver)} →{' '}
+              {driverLabel(migration.target_driver)}
+              。迁移期间文件只允许读取，禁止上传、删除和清理。
             </CardDescription>
           </CardHeader>
-          <CardContent className="flex flex-col gap-3">
-            <Progress value={migration.state === "succeeded" ? 100 : undefined} />
-            <p className="text-sm text-muted-foreground">
-              迁移进度请查看任务执行日志：{migration.task_id || "尚未下发"}
+          <CardContent className='flex flex-col gap-3'>
+            <Progress
+              value={migration.state === 'succeeded' ? 100 : undefined}
+            />
+            <p className='text-sm text-muted-foreground'>
+              迁移进度请查看任务执行日志：{migration.task_id || '尚未下发'}
             </p>
-            {migration.error && <p className="text-sm text-destructive">{migration.error}</p>}
+            {migration.error && (
+              <p className='text-sm text-destructive'>{migration.error}</p>
+            )}
           </CardContent>
           <CardFooter>
             <Button
-              variant="outline"
-              disabled={migration.state !== "failed" || !migration.id || runMutation.isPending}
+              variant='outline'
+              disabled={
+                migration.state !== 'failed' ||
+                !migration.id ||
+                runMutation.isPending
+              }
               onClick={() => migration.id && runMutation.mutate(migration.id)}
             >
-              {runMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Play data-icon="inline-start" />}
+              {runMutation.isPending ? (
+                <Loader2 data-icon='inline-start' className='animate-spin' />
+              ) : (
+                <Play data-icon='inline-start' />
+              )}
               重试迁移
             </Button>
           </CardFooter>
         </Card>
       )}
 
-      <Card className="border border-dashed shadow-sm">
-        <CardHeader className="border-b border-dashed pb-4">
-          <div className="flex items-center gap-2">
-            <div className="rounded-lg bg-indigo-500/10 p-1.5 text-indigo-500">
-              <Database className="size-4" />
+      <Card className='border border-dashed shadow-sm'>
+        <CardHeader className='border-b border-dashed pb-4'>
+          <div className='flex items-center gap-2'>
+            <div className='rounded-lg bg-indigo-500/10 p-1.5 text-indigo-500'>
+              <Database className='size-4' />
             </div>
             <div>
-              <CardTitle className="text-base font-semibold">文件存储</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className='text-base font-semibold'>
+                文件存储
+              </CardTitle>
+              <CardDescription className='text-xs'>
                 默认使用本地存储。配置系统文件的存储媒介，切换存储类型且已有文件时，系统会自动进入维护模式并迁移文件。
               </CardDescription>
             </div>
           </div>
         </CardHeader>
-        <CardContent className="pt-6">
-          <FieldGroup className="space-y-6">
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-              <Field className="flex flex-col gap-1.5 md:col-span-2">
-                <FieldLabel className="text-xs font-semibold">存储类型</FieldLabel>
+        <CardContent className='pt-6'>
+          <FieldGroup className='space-y-6'>
+            <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+              <Field className='flex flex-col gap-1.5 md:col-span-2'>
+                <FieldLabel className='text-xs font-semibold'>
+                  存储类型
+                </FieldLabel>
                 <Select
                   value={config.driver}
                   disabled={isFormDisabled}
-                  onValueChange={(value) => setConfig({...config, driver: value as StorageDriver})}
+                  onValueChange={(value) =>
+                    setConfig({ ...config, driver: value as StorageDriver })
+                  }
                 >
-                  <SelectTrigger className="w-full border-dashed bg-card text-xs">
+                  <SelectTrigger className='w-full border-dashed bg-card text-xs'>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
-                      {(Object.keys(driverLabels) as StorageDriver[]).map((driver) => (
-                        <SelectItem key={driver} value={driver}>{driverLabels[driver]}</SelectItem>
-                      ))}
+                      {(Object.keys(driverLabels) as StorageDriver[]).map(
+                        (driver) => (
+                          <SelectItem key={driver} value={driver}>
+                            {driverLabels[driver]}
+                          </SelectItem>
+                        ),
+                      )}
                     </SelectGroup>
                   </SelectContent>
                 </Select>
               </Field>
 
-              {config.driver === "local" && (
-                <div className="md:col-span-2">
+              {config.driver === 'local' && (
+                <div className='md:col-span-2'>
                   <TextField
-                    label="根目录"
+                    label='根目录'
                     value={config.local.root}
-                    placeholder="."
-                    onChange={(root) => setConfig({...config, local: {root}})}
+                    placeholder='.'
+                    onChange={(root) =>
+                      setConfig({ ...config, local: { root } })
+                    }
                   />
                 </div>
               )}
 
-              {(config.driver === "s3" || config.driver === "r2" || config.driver === "minio" || config.driver === "oss") && (
+              {(config.driver === 's3' ||
+                config.driver === 'r2' ||
+                config.driver === 'minio' ||
+                config.driver === 'oss') && (
                 <ObjectFields
-                  driver={config.driver as "s3" | "r2" | "minio" | "oss"}
-                  value={config[config.driver as "s3" | "r2" | "minio" | "oss"]}
-                  onChange={(patch) => updateObject(config.driver as "s3" | "r2" | "minio" | "oss", patch)}
+                  driver={config.driver as 's3' | 'r2' | 'minio' | 'oss'}
+                  value={config[config.driver as 's3' | 'r2' | 'minio' | 'oss']}
+                  onChange={(patch) =>
+                    updateObject(
+                      config.driver as 's3' | 'r2' | 'minio' | 'oss',
+                      patch,
+                    )
+                  }
                 />
               )}
 
-              {config.driver === "webdav" && (
+              {config.driver === 'webdav' && (
                 <>
-                  <div className="md:col-span-2">
-                    <TextField label="服务地址" value={config.webdav.endpoint} placeholder="https://dav.example.com" onChange={(endpoint) => setConfig({...config, webdav: {...config.webdav, endpoint}})} />
+                  <div className='md:col-span-2'>
+                    <TextField
+                      label='服务地址'
+                      value={config.webdav.endpoint}
+                      placeholder='https://dav.example.com'
+                      onChange={(endpoint) =>
+                        setConfig({
+                          ...config,
+                          webdav: { ...config.webdav, endpoint },
+                        })
+                      }
+                    />
                   </div>
-                  <TextField label="用户名" value={config.webdav.username} onChange={(username) => setConfig({...config, webdav: {...config.webdav, username}})} />
-                  <TextField label="密码" type="password" value={config.webdav.password} onChange={(password) => setConfig({...config, webdav: {...config.webdav, password}})} />
-                  <div className="md:col-span-2">
-                    <TextField label="基础路径" value={config.webdav.base_path} placeholder="openflare" onChange={(base_path) => setConfig({...config, webdav: {...config.webdav, base_path}})} />
+                  <TextField
+                    label='用户名'
+                    value={config.webdav.username}
+                    onChange={(username) =>
+                      setConfig({
+                        ...config,
+                        webdav: { ...config.webdav, username },
+                      })
+                    }
+                  />
+                  <TextField
+                    label='密码'
+                    type='password'
+                    value={config.webdav.password}
+                    onChange={(password) =>
+                      setConfig({
+                        ...config,
+                        webdav: { ...config.webdav, password },
+                      })
+                    }
+                  />
+                  <div className='md:col-span-2'>
+                    <TextField
+                      label='基础路径'
+                      value={config.webdav.base_path}
+                      placeholder='openflare'
+                      onChange={(base_path) =>
+                        setConfig({
+                          ...config,
+                          webdav: { ...config.webdav, base_path },
+                        })
+                      }
+                    />
                   </div>
                 </>
               )}
             </div>
           </FieldGroup>
         </CardContent>
-        <CardFooter className="justify-end gap-2 flex-col sm:flex-row items-end sm:items-center border-t border-dashed pt-4 mt-6">
+        <CardFooter className='justify-end gap-2 flex-col sm:flex-row items-end sm:items-center border-t border-dashed pt-4 mt-6'>
           {config.driver !== query.data?.config.driver && (
-            <span className="text-xs text-amber-500 mr-auto text-left max-w-md">
-              ⚠️ 您已切换存储类型。点击「保存配置」将立即切换活动存储引擎，并同步更新已有文件的存储驱动标记。仅在需要复制物理文件时才使用「开始迁移」。
+            <span className='text-xs text-amber-500 mr-auto text-left max-w-md'>
+              ⚠️
+              您已切换存储类型。点击「保存配置」将立即切换活动存储引擎，并同步更新已有文件的存储驱动标记。仅在需要复制物理文件时才使用「开始迁移」。
             </span>
           )}
-          <div className="flex gap-2">
+          <div className='flex gap-2'>
             <Button
-              variant="outline"
+              variant='outline'
               disabled={isFormDisabled}
               onClick={() => saveMutation.mutate(config)}
-              className="border-dashed"
+              className='border-dashed'
             >
-              {saveMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Save data-icon="inline-start" />}
+              {saveMutation.isPending ? (
+                <Loader2 data-icon='inline-start' className='animate-spin' />
+              ) : (
+                <Save data-icon='inline-start' />
+              )}
               保存配置
             </Button>
             {config.driver !== query.data?.config.driver && (
@@ -334,7 +472,11 @@ export function StorageConfigTab() {
                 disabled={isFormDisabled}
                 onClick={() => migrateMutation.mutate(config)}
               >
-                {migrateMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Play data-icon="inline-start" />}
+                {migrateMutation.isPending ? (
+                  <Loader2 data-icon='inline-start' className='animate-spin' />
+                ) : (
+                  <Play data-icon='inline-start' />
+                )}
                 开始迁移
               </Button>
             )}
@@ -342,7 +484,7 @@ export function StorageConfigTab() {
         </CardFooter>
       </Card>
     </div>
-  )
+  );
 }
 
 function ObjectFields({
@@ -350,41 +492,87 @@ function ObjectFields({
   value,
   onChange,
 }: {
-  driver: "s3" | "r2" | "minio" | "oss"
-  value: ObjectStorageConfig
-  onChange: (patch: Partial<ObjectStorageConfig>) => void
+  driver: 's3' | 'r2' | 'minio' | 'oss';
+  value: ObjectStorageConfig;
+  onChange: (patch: Partial<ObjectStorageConfig>) => void;
 }) {
   return (
     <>
-      {driver === "r2" && (
-        <div className="md:col-span-2">
-          <TextField label="Account ID" value={value.account_id || ""} onChange={(account_id) => onChange({account_id})} />
+      {driver === 'r2' && (
+        <div className='md:col-span-2'>
+          <TextField
+            label='Account ID'
+            value={value.account_id || ''}
+            onChange={(account_id) => onChange({ account_id })}
+          />
         </div>
       )}
-      {driver !== "s3" && (
-        <div className="md:col-span-2">
-          <TextField label="Endpoint" value={value.endpoint} placeholder="https://..." onChange={(endpoint) => onChange({endpoint})} />
+      {driver !== 's3' && (
+        <div className='md:col-span-2'>
+          <TextField
+            label='Endpoint'
+            value={value.endpoint}
+            placeholder='https://...'
+            onChange={(endpoint) => onChange({ endpoint })}
+          />
         </div>
       )}
-      <TextField label="Region" value={value.region} onChange={(region) => onChange({region})} />
-      <TextField label="Bucket" value={value.bucket} onChange={(bucket) => onChange({bucket})} />
-      <TextField label="Access Key ID" value={value.access_key_id} onChange={(access_key_id) => onChange({access_key_id})} />
-      <TextField label="Secret Access Key" type="password" value={value.secret_access_key} onChange={(secret_access_key) => onChange({secret_access_key})} />
-      <TextField label="对象前缀" value={value.key_prefix} placeholder="uploads" onChange={(key_prefix) => onChange({key_prefix})} />
-      <TextField label="CDN 地址" value={value.cdn_url} placeholder="https://cdn.example.com" onChange={(cdn_url) => onChange({cdn_url})} />
-      {(driver === "s3" || driver === "minio") && (
-        <div className="md:col-span-2">
-          <Field orientation="horizontal" className="flex items-center justify-between border border-dashed rounded-lg p-4 bg-muted/30">
-            <div className="flex flex-col gap-0.5">
-              <FieldLabel className="text-xs font-semibold cursor-pointer">Path Style</FieldLabel>
-              <FieldDescription className="text-[11px] leading-relaxed text-muted-foreground">MinIO 等自托管 S3 通常需要开启。</FieldDescription>
+      <TextField
+        label='Region'
+        value={value.region}
+        onChange={(region) => onChange({ region })}
+      />
+      <TextField
+        label='Bucket'
+        value={value.bucket}
+        onChange={(bucket) => onChange({ bucket })}
+      />
+      <TextField
+        label='Access Key ID'
+        value={value.access_key_id}
+        onChange={(access_key_id) => onChange({ access_key_id })}
+      />
+      <TextField
+        label='Secret Access Key'
+        type='password'
+        value={value.secret_access_key}
+        onChange={(secret_access_key) => onChange({ secret_access_key })}
+      />
+      <TextField
+        label='对象前缀'
+        value={value.key_prefix}
+        placeholder='uploads'
+        onChange={(key_prefix) => onChange({ key_prefix })}
+      />
+      <TextField
+        label='CDN 地址'
+        value={value.cdn_url}
+        placeholder='https://cdn.example.com'
+        onChange={(cdn_url) => onChange({ cdn_url })}
+      />
+      {(driver === 's3' || driver === 'minio') && (
+        <div className='md:col-span-2'>
+          <Field
+            orientation='horizontal'
+            className='flex items-center justify-between border border-dashed rounded-lg p-4 bg-muted/30'
+          >
+            <div className='flex flex-col gap-0.5'>
+              <FieldLabel className='text-xs font-semibold cursor-pointer'>
+                Path Style
+              </FieldLabel>
+              <FieldDescription className='text-[11px] leading-relaxed text-muted-foreground'>
+                MinIO 等自托管 S3 通常需要开启。
+              </FieldDescription>
             </div>
-            <Switch checked={value.path_style} onCheckedChange={(path_style) => onChange({path_style})} />
+            <Switch
+              checked={value.path_style}
+              onCheckedChange={(path_style) => onChange({ path_style })}
+            />
           </Field>
         </div>
       )}
     </>
-  )
+  );
 }
 
 function TextField({
@@ -392,24 +580,24 @@ function TextField({
   value,
   onChange,
   placeholder,
-  type = "text",
+  type = 'text',
 }: {
-  label: string
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  type?: React.HTMLInputTypeAttribute
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: React.HTMLInputTypeAttribute;
 }) {
   return (
-    <Field className="flex flex-col gap-1.5">
-      <FieldLabel className="text-xs font-semibold">{label}</FieldLabel>
+    <Field className='flex flex-col gap-1.5'>
+      <FieldLabel className='text-xs font-semibold'>{label}</FieldLabel>
       <Input
         type={type}
         value={value}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
-        className="border-dashed bg-card text-xs"
+        className='border-dashed bg-card text-xs'
       />
     </Field>
-  )
+  );
 }

frontend/app/(main)/admin/files/page.tsx

@@ -1,59 +1,65 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {motion} from "motion/react"
-import {FolderOpen} from "lucide-react"
+import * as React from 'react';
+import { motion } from 'motion/react';
+import { FolderOpen } from 'lucide-react';
 
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {FileStats} from "./components/file-stats"
-import {FileList} from "./components/file-list"
-import {StorageConfigTab} from "./components/storage-config-tab"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { FileStats } from './components/file-stats';
+import { FileList } from './components/file-list';
+import { StorageConfigTab } from './components/storage-config-tab';
 
 export default function FilesPage() {
-  const [activeTab, setActiveTab] = React.useState("stats")
+  const [activeTab, setActiveTab] = React.useState('stats');
 
   return (
     <motion.div
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, ease: "easeOut" }}
-      className="flex w-full flex-col gap-6 py-6"
+      transition={{ duration: 0.35, ease: 'easeOut' }}
+      className='flex w-full flex-col gap-6 py-6'
     >
       {/* 顶部标题区 */}
-      <div className="flex items-center gap-2">
-        <FolderOpen className="size-5 text-primary" />
+      <div className='flex items-center gap-2'>
+        <FolderOpen className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">存储管理</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>存储管理</h1>
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
-          <TabsTrigger value="stats" className="px-0 pb-2 text-xs font-semibold">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
+        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
+          <TabsTrigger
+            value='stats'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             文件存储信息
           </TabsTrigger>
-          <TabsTrigger value="list" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger value='list' className='px-0 pb-2 text-xs font-semibold'>
             文件列表
           </TabsTrigger>
-          <TabsTrigger value="storage" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='storage'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             存储配置
           </TabsTrigger>
         </TabsList>
 
         {/* ──────── TAB 1: 统计看板 ──────── */}
-        <TabsContent value="stats" className="outline-hidden">
-          {activeTab === "stats" ? <FileStats /> : null}
+        <TabsContent value='stats' className='outline-hidden'>
+          {activeTab === 'stats' ? <FileStats /> : null}
         </TabsContent>
 
         {/* ──────── TAB 2: 文件列表 ──────── */}
-        <TabsContent value="list" className="outline-hidden">
-          {activeTab === "list" ? <FileList /> : null}
+        <TabsContent value='list' className='outline-hidden'>
+          {activeTab === 'list' ? <FileList /> : null}
         </TabsContent>
 
-        <TabsContent value="storage" className="outline-hidden">
-          {activeTab === "storage" ? <StorageConfigTab /> : null}
+        <TabsContent value='storage' className='outline-hidden'>
+          {activeTab === 'storage' ? <StorageConfigTab /> : null}
         </TabsContent>
       </Tabs>
     </motion.div>
-  )
+  );
 }

frontend/app/(main)/admin/layout.tsx

@@ -1,18 +1,16 @@
-"use client"
+'use client';
 
-import {AdminUsersProvider} from "@/contexts/admin-users-context"
-import {RequireAdminAuth} from "@/components/auth/require-auth"
+import { AdminUsersProvider } from '@/contexts/admin-users-context';
+import { RequireAdminAuth } from '@/components/auth/require-auth';
 
 export default function AdminLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <RequireAdminAuth>
-      <AdminUsersProvider>
-        {children}
-      </AdminUsersProvider>
+      <AdminUsersProvider>{children}</AdminUsersProvider>
     </RequireAdminAuth>
-  )
-}
+  );
+}

frontend/app/(main)/admin/logs/components/access-analytics.tsx

@@ -14,209 +14,282 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-"use client"
+'use client';
 
-import {useCallback, useEffect, useState} from "react"
-import {BarChart3, Globe, RefreshCw, TrendingUp, Users, XCircle} from "lucide-react"
-import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts"
+import { useCallback, useEffect, useState } from 'react';
+import {
+  BarChart3,
+  Globe,
+  RefreshCw,
+  TrendingUp,
+  Users,
+  XCircle,
+} from 'lucide-react';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
 
-import services from "@/lib/services"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent} from "@/components/ui/chart"
-import {Spinner} from "@/components/ui/spinner"
+import services from '@/lib/services';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { Spinner } from '@/components/ui/spinner';
 
 interface TrendData {
-  date: string
-  count: number
+  date: string;
+  count: number;
 }
 
 interface BrowserData {
-  browser: string
-  count: number
+  browser: string;
+  count: number;
 }
 
 interface TopUserData {
-  user_id: string
-  username: string
-  nickname: string
-  count: number
+  user_id: string;
+  username: string;
+  nickname: string;
+  count: number;
 }
 
 const chartConfig = {
   count: {
-    label: "请求量",
-    color: "hsl(var(--primary))",
+    label: '请求量',
+    color: 'hsl(var(--primary))',
   },
-} satisfies ChartConfig
+} satisfies ChartConfig;
 
 // Format YYYY-MM-DD to MM/DD
 function formatDateLabel(dateStr: string) {
-  if (!dateStr || dateStr.length < 10) return dateStr
-  const parts = dateStr.split("-")
+  if (!dateStr || dateStr.length < 10) return dateStr;
+  const parts = dateStr.split('-');
   if (parts.length === 3) {
-    return `${parts[1]}/${parts[2]}`
+    return `${parts[1]}/${parts[2]}`;
   }
-  return dateStr
+  return dateStr;
 }
 
 export function AccessAnalytics() {
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-  const [clickhouseDisabled, setClickhouseDisabled] = useState(false)
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [clickhouseDisabled, setClickhouseDisabled] = useState(false);
 
-  const [trend, setTrend] = useState<TrendData[]>([])
-  const [browsers, setBrowsers] = useState<BrowserData[]>([])
-  const [topUsers, setTopUsers] = useState<TopUserData[]>([])
+  const [trend, setTrend] = useState<TrendData[]>([]);
+  const [browsers, setBrowsers] = useState<BrowserData[]>([]);
+  const [topUsers, setTopUsers] = useState<TopUserData[]>([]);
 
   const fetchAnalytics = useCallback(async () => {
     try {
-      setLoading(true)
-      setError(null)
-      const data = await services.adminLog.getLogsAnalytics()
+      setLoading(true);
+      setError(null);
+      const data = await services.adminLog.getLogsAnalytics();
 
       // Formats the date labels for the X-axis representation
-      const formattedTrend = (data.trend || []).map(item => ({
+      const formattedTrend = (data.trend || []).map((item) => ({
         ...item,
-        formattedDate: formatDateLabel(item.date)
-      }))
+        formattedDate: formatDateLabel(item.date),
+      }));
 
-      setTrend(formattedTrend)
-      setBrowsers(data.browsers || [])
-      setTopUsers(data.top_users || [])
-      setClickhouseDisabled(false)
+      setTrend(formattedTrend);
+      setBrowsers(data.browsers || []);
+      setTopUsers(data.top_users || []);
+      setClickhouseDisabled(false);
     } catch (err) {
-      const errorInstance = err instanceof Error ? err : new Error("获取数据统计失败")
-      const errMsg = errorInstance.message || ""
-      if (errMsg.includes("ClickHouse") || errMsg.includes("未启用")) {
-        setClickhouseDisabled(true)
+      const errorInstance =
+        err instanceof Error ? err : new Error('获取数据统计失败');
+      const errMsg = errorInstance.message || '';
+      if (errMsg.includes('ClickHouse') || errMsg.includes('未启用')) {
+        setClickhouseDisabled(true);
       } else {
-        setError(errorInstance)
+        setError(errorInstance);
       }
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    fetchAnalytics()
-  }, [fetchAnalytics])
+    fetchAnalytics();
+  }, [fetchAnalytics]);
 
-  const totalBrowserRequests = browsers.reduce((sum, item) => sum + item.count, 0)
-  const totalTrendRequests = trend.reduce((sum, item) => sum + item.count, 0)
+  const totalBrowserRequests = browsers.reduce(
+    (sum, item) => sum + item.count,
+    0,
+  );
+  const totalTrendRequests = trend.reduce((sum, item) => sum + item.count, 0);
 
   if (clickhouseDisabled) {
     return (
-      <div className="flex flex-col items-center justify-center p-8 border border-dashed rounded-lg bg-card text-center my-6 min-h-[300px]">
-        <XCircle className="size-10 text-muted-foreground mb-3" />
-        <h3 className="text-base font-semibold">ClickHouse 未启用</h3>
-        <p className="text-sm text-muted-foreground mt-1 max-w-[400px] mb-4">
-          当前系统配置未启用 ClickHouse 存储，系统不会收集用户访问日志。如需使用此功能，请在后端 `config.yaml` 配置文件中配置并启用 ClickHouse。
+      <div className='flex flex-col items-center justify-center p-8 border border-dashed rounded-lg bg-card text-center my-6 min-h-[300px]'>
+        <XCircle className='size-10 text-muted-foreground mb-3' />
+        <h3 className='text-base font-semibold'>ClickHouse 未启用</h3>
+        <p className='text-sm text-muted-foreground mt-1 max-w-[400px] mb-4'>
+          当前系统配置未启用 ClickHouse
+          存储，系统不会收集用户访问日志。如需使用此功能，请在后端 `config.yaml`
+          配置文件中配置并启用 ClickHouse。
         </p>
       </div>
-    )
+    );
   }
 
   if (error) {
-    return <ErrorInline error={error} onRetry={fetchAnalytics} />
+    return <ErrorInline error={error} onRetry={fetchAnalytics} />;
   }
 
   if (loading) {
-    return <LoadingStateWithBorder icon={BarChart3} description="加载访问统计指标中..." />
+    return (
+      <LoadingStateWithBorder
+        icon={BarChart3}
+        description='加载访问统计指标中...'
+      />
+    );
   }
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       {/* Overview Cards */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <Card className="bg-card/25 border-border/40">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-sm font-semibold tracking-tight">近 7 天总请求数</CardTitle>
-            <TrendingUp className="size-4 text-muted-foreground" />
+      <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
+        <Card className='bg-card/25 border-border/40'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-sm font-semibold tracking-tight'>
+              近 7 天总请求数
+            </CardTitle>
+            <TrendingUp className='size-4 text-muted-foreground' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono">{totalTrendRequests.toLocaleString()}</div>
-            <p className="text-[10px] text-muted-foreground mt-1">系统记录的所有成功认证的访问总频次</p>
+            <div className='text-2xl font-bold font-mono'>
+              {totalTrendRequests.toLocaleString()}
+            </div>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              系统记录的所有成功认证的访问总频次
+            </p>
           </CardContent>
         </Card>
-        <Card className="bg-card/25 border-border/40">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-sm font-semibold tracking-tight">活跃终端分类数</CardTitle>
-            <Globe className="size-4 text-muted-foreground" />
+        <Card className='bg-card/25 border-border/40'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-sm font-semibold tracking-tight'>
+              活跃终端分类数
+            </CardTitle>
+            <Globe className='size-4 text-muted-foreground' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono">{browsers.length}</div>
-            <p className="text-[10px] text-muted-foreground mt-1">在一周内发起请求的浏览器代理大类统计</p>
+            <div className='text-2xl font-bold font-mono'>
+              {browsers.length}
+            </div>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              在一周内发起请求的浏览器代理大类统计
+            </p>
           </CardContent>
         </Card>
-        <Card className="bg-card/25 border-border/40 sm:col-span-2 lg:col-span-1">
-          <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-            <CardTitle className="text-sm font-semibold tracking-tight">活跃独立用户数</CardTitle>
-            <Users className="size-4 text-muted-foreground" />
+        <Card className='bg-card/25 border-border/40 sm:col-span-2 lg:col-span-1'>
+          <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+            <CardTitle className='text-sm font-semibold tracking-tight'>
+              活跃独立用户数
+            </CardTitle>
+            <Users className='size-4 text-muted-foreground' />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold font-mono">{topUsers.length}</div>
-            <p className="text-[10px] text-muted-foreground mt-1">一周内累计发起高频请求的注册账户总量</p>
+            <div className='text-2xl font-bold font-mono'>
+              {topUsers.length}
+            </div>
+            <p className='text-[10px] text-muted-foreground mt-1'>
+              一周内累计发起高频请求的注册账户总量
+            </p>
           </CardContent>
         </Card>
       </div>
 
       {/* Access Trend Chart */}
-      <Card className="bg-card/20 border-border/40">
-        <CardHeader className="flex flex-row items-center justify-between">
+      <Card className='bg-card/20 border-border/40'>
+        <CardHeader className='flex flex-row items-center justify-between'>
           <div>
-            <CardTitle className="text-base font-bold">一周访问量趋势</CardTitle>
-            <CardDescription className="text-xs">
+            <CardTitle className='text-base font-bold'>
+              一周访问量趋势
+            </CardTitle>
+            <CardDescription className='text-xs'>
               展现系统最近 7 天内的每日 API 请求曲线
             </CardDescription>
           </div>
-          <Button variant="ghost" size="icon" className="size-8" onClick={fetchAnalytics} disabled={loading}>
-            {loading ? <Spinner className="size-4" /> : <RefreshCw className="size-4 text-muted-foreground" />}
+          <Button
+            variant='ghost'
+            size='icon'
+            className='size-8'
+            onClick={fetchAnalytics}
+            disabled={loading}
+          >
+            {loading ? (
+              <Spinner className='size-4' />
+            ) : (
+              <RefreshCw className='size-4 text-muted-foreground' />
+            )}
           </Button>
         </CardHeader>
-        <CardContent className="pl-2 pr-4 pt-2">
+        <CardContent className='pl-2 pr-4 pt-2'>
           {trend.length === 0 ? (
-            <EmptyStateWithBorder icon={TrendingUp} description="暂无趋势数据" />
+            <EmptyStateWithBorder
+              icon={TrendingUp}
+              description='暂无趋势数据'
+            />
           ) : (
-            <div className="h-[280px] w-full">
-              <ChartContainer config={chartConfig} className="w-full h-full aspect-auto">
+            <div className='h-[280px] w-full'>
+              <ChartContainer
+                config={chartConfig}
+                className='w-full h-full aspect-auto'
+              >
                 <AreaChart
                   data={trend}
                   margin={{ top: 10, right: 10, left: -20, bottom: 0 }}
                 >
                   <defs>
-                    <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="var(--color-count)" stopOpacity={0.3} />
-                      <stop offset="95%" stopColor="var(--color-count)" stopOpacity={0.01} />
+                    <linearGradient id='colorCount' x1='0' y1='0' x2='0' y2='1'>
+                      <stop
+                        offset='5%'
+                        stopColor='var(--color-count)'
+                        stopOpacity={0.3}
+                      />
+                      <stop
+                        offset='95%'
+                        stopColor='var(--color-count)'
+                        stopOpacity={0.01}
+                      />
                     </linearGradient>
                   </defs>
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                  <CartesianGrid strokeDasharray='3 3' vertical={false} />
                   <XAxis
-                    dataKey="formattedDate"
+                    dataKey='formattedDate'
                     tickLine={false}
                     axisLine={false}
                     dy={10}
-                    className="font-mono"
+                    className='font-mono'
                   />
                   <YAxis
                     tickLine={false}
                     axisLine={false}
                     dx={-10}
-                    className="font-mono"
+                    className='font-mono'
                   />
                   <ChartTooltip content={<ChartTooltipContent />} />
                   <Area
-                    type="monotone"
-                    dataKey="count"
-                    stroke="var(--color-count)"
+                    type='monotone'
+                    dataKey='count'
+                    stroke='var(--color-count)'
                     strokeWidth={2}
                     fillOpacity={1}
-                    fill="url(#colorCount)"
-                    name="请求次数"
+                    fill='url(#colorCount)'
+                    name='请求次数'
                   />
                 </AreaChart>
               </ChartContainer>
@@ -226,46 +299,56 @@ export function AccessAnalytics() {
       </Card>
 
       {/* Two Columns for Ranking Statistics */}
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className='grid gap-6 md:grid-cols-2'>
         {/* Browser Rankings */}
-        <Card className="bg-card/20 border-border/40 flex flex-col h-full">
+        <Card className='bg-card/20 border-border/40 flex flex-col h-full'>
           <CardHeader>
-            <CardTitle className="text-base font-bold flex items-center gap-1.5">
-              <Globe className="size-4.5 text-muted-foreground" />
+            <CardTitle className='text-base font-bold flex items-center gap-1.5'>
+              <Globe className='size-4.5 text-muted-foreground' />
               使用的浏览器排行
             </CardTitle>
-            <CardDescription className="text-xs">
+            <CardDescription className='text-xs'>
               基于请求头 User-Agent 智能分类的一周占比统计
             </CardDescription>
           </CardHeader>
-          <CardContent className="flex-1">
+          <CardContent className='flex-1'>
             {browsers.length === 0 ? (
-              <EmptyStateWithBorder icon={Globe} description="暂无浏览器排行数据" />
+              <EmptyStateWithBorder
+                icon={Globe}
+                description='暂无浏览器排行数据'
+              />
             ) : (
-              <div className="space-y-4">
+              <div className='space-y-4'>
                 {browsers.map((item, index) => {
-                  const percent = totalBrowserRequests > 0 ? (item.count / totalBrowserRequests) * 100 : 0
+                  const percent =
+                    totalBrowserRequests > 0
+                      ? (item.count / totalBrowserRequests) * 100
+                      : 0;
                   return (
-                    <div key={item.browser} className="space-y-1.5">
-                      <div className="flex items-center justify-between text-xs font-medium">
-                        <span className="flex items-center gap-2">
-                          <Badge variant="outline" className="px-1.5 py-0 h-5 font-mono text-[10px] select-none">
+                    <div key={item.browser} className='space-y-1.5'>
+                      <div className='flex items-center justify-between text-xs font-medium'>
+                        <span className='flex items-center gap-2'>
+                          <Badge
+                            variant='outline'
+                            className='px-1.5 py-0 h-5 font-mono text-[10px] select-none'
+                          >
                             {index + 1}
                           </Badge>
-                          <span className="font-semibold">{item.browser}</span>
+                          <span className='font-semibold'>{item.browser}</span>
                         </span>
-                        <span className="text-muted-foreground font-mono text-xs">
-                          {item.count.toLocaleString()} 次 ({percent.toFixed(1)}%)
+                        <span className='text-muted-foreground font-mono text-xs'>
+                          {item.count.toLocaleString()} 次 ({percent.toFixed(1)}
+                          %)
                         </span>
                       </div>
-                      <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
+                      <div className='h-2 w-full rounded-full bg-muted overflow-hidden'>
                         <div
-                          className="h-full bg-primary rounded-full transition-all duration-500"
+                          className='h-full bg-primary rounded-full transition-all duration-500'
                           style={{ width: `${percent}%` }}
                         />
                       </div>
                     </div>
-                  )
+                  );
                 })}
               </div>
             )}
@@ -273,39 +356,50 @@ export function AccessAnalytics() {
         </Card>
 
         {/* Top Users */}
-        <Card className="bg-card/20 border-border/40 flex flex-col h-full">
+        <Card className='bg-card/20 border-border/40 flex flex-col h-full'>
           <CardHeader>
-            <CardTitle className="text-base font-bold flex items-center gap-1.5">
-              <Users className="size-4.5 text-muted-foreground" />
+            <CardTitle className='text-base font-bold flex items-center gap-1.5'>
+              <Users className='size-4.5 text-muted-foreground' />
               最活跃的用户排行 (Top 10)
             </CardTitle>
-            <CardDescription className="text-xs">
+            <CardDescription className='text-xs'>
               统计最近一周发起接口访问请求数量最多的账户
             </CardDescription>
           </CardHeader>
-          <CardContent className="flex-1">
+          <CardContent className='flex-1'>
             {topUsers.length === 0 ? (
-              <EmptyStateWithBorder icon={Users} description="暂无活跃用户数据" />
+              <EmptyStateWithBorder
+                icon={Users}
+                description='暂无活跃用户数据'
+              />
             ) : (
-              <div className="divide-y divide-border/40">
+              <div className='divide-y divide-border/40'>
                 {topUsers.map((user) => (
-                  <div key={user.user_id} className="flex items-center justify-between py-2.5 first:pt-0 last:pb-0">
-                    <div className="flex items-center gap-3">
-                      <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-xs select-none">
-                        {(user.username || "U").slice(0, 1).toUpperCase()}
+                  <div
+                    key={user.user_id}
+                    className='flex items-center justify-between py-2.5 first:pt-0 last:pb-0'
+                  >
+                    <div className='flex items-center gap-3'>
+                      <div className='flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-xs select-none'>
+                        {(user.username || 'U').slice(0, 1).toUpperCase()}
                       </div>
-                      <div className="truncate max-w-[180px] sm:max-w-xs">
-                        <div className="text-xs font-bold leading-tight truncate">
-                          {user.username || "未知"}
+                      <div className='truncate max-w-[180px] sm:max-w-xs'>
+                        <div className='text-xs font-bold leading-tight truncate'>
+                          {user.username || '未知'}
                         </div>
-                        <div className="text-[10px] text-muted-foreground leading-normal truncate">
-                          {user.nickname ? `(${user.nickname})` : "(无昵称)"} | ID: {user.user_id}
+                        <div className='text-[10px] text-muted-foreground leading-normal truncate'>
+                          {user.nickname ? `(${user.nickname})` : '(无昵称)'} |
+                          ID: {user.user_id}
                         </div>
                       </div>
                     </div>
-                    <div className="text-right shrink-0">
-                      <div className="text-xs font-bold font-mono">{user.count.toLocaleString()}</div>
-                      <div className="text-[9px] text-muted-foreground uppercase font-bold tracking-wider">次请求</div>
+                    <div className='text-right shrink-0'>
+                      <div className='text-xs font-bold font-mono'>
+                        {user.count.toLocaleString()}
+                      </div>
+                      <div className='text-[9px] text-muted-foreground uppercase font-bold tracking-wider'>
+                        次请求
+                      </div>
                     </div>
                   </div>
                 ))}
@@ -315,5 +409,5 @@ export function AccessAnalytics() {
         </Card>
       </div>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/logs/components/access-logs.tsx

@@ -14,441 +14,540 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-"use client"
+'use client';
 
-import {useMemo, useState} from "react"
-import {useQuery} from "@tanstack/react-query"
-import {toast} from "sonner"
-import {format} from "date-fns"
-import {Activity, ChevronLeft, ChevronRight, Copy, Eye, RotateCcw, Search, XCircle} from "lucide-react"
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+import {
+  Activity,
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Eye,
+  RotateCcw,
+  Search,
+  XCircle,
+} from 'lucide-react';
 
-import services from "@/lib/services"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle} from "@/components/ui/sheet"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
+import services from '@/lib/services';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 
 interface AccessLog {
-	id: string
-	user_id: string
-	username: string
-	nickname: string
-	path: string
-	method: string
-	ip: string
-	user_agent: string
-	headers: string
-	status: number
-	latency: number
-	created_at: string
+  id: string;
+  user_id: string;
+  username: string;
+  nickname: string;
+  path: string;
+  method: string;
+  ip: string;
+  user_agent: string;
+  headers: string;
+  status: number;
+  latency: number;
+  created_at: string;
 }
 
-const PAGE_SIZE = 15
+const PAGE_SIZE = 15;
 
 function formatDateTime(value?: string | null) {
-	if (!value) return "-"
-	const date = new Date(value)
-	if (Number.isNaN(date.getTime())) return value
-	return format(date, "yyyy-MM-dd HH:mm:ss")
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return format(date, 'yyyy-MM-dd HH:mm:ss');
 }
 
 function formatLatency(ms: number) {
-	if (ms < 1000) return `${ms}ms`
-	return `${(ms / 1000).toFixed(2)}s`
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
 }
 
 function statusVariant(status: number) {
-	if (status >= 500) return "destructive"
-	if (status >= 400) return "destructive"
-	if (status >= 300) return "outline"
-	return "secondary"
+  if (status >= 500) return 'destructive';
+  if (status >= 400) return 'destructive';
+  if (status >= 300) return 'outline';
+  return 'secondary';
 }
 
 function isClickhouseDisabledError(error: Error) {
-	const errMsg = error.message || ""
-	return errMsg.includes("ClickHouse") || errMsg.includes("未启用")
+  const errMsg = error.message || '';
+  return errMsg.includes('ClickHouse') || errMsg.includes('未启用');
 }
 
 export function AccessLogs() {
-	const [page, setPage] = useState(1)
+  const [page, setPage] = useState(1);
 
-	// 搜索过滤条件
-	const [usernameFilter, setUsernameFilter] = useState("")
-	const [pathFilter, setPathFilter] = useState("")
-	const [startTimeFilter, setStartTimeFilter] = useState("")
-	const [endTimeFilter, setEndTimeFilter] = useState("")
+  // 搜索过滤条件
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const [pathFilter, setPathFilter] = useState('');
+  const [startTimeFilter, setStartTimeFilter] = useState('');
+  const [endTimeFilter, setEndTimeFilter] = useState('');
 
-	// 实际提交的搜索条件
-	const [searchParams, setSearchParams] = useState({
-		username: "",
-		path: "",
-		start_time: "",
-		end_time: "",
-	})
+  // 实际提交的搜索条件
+  const [searchParams, setSearchParams] = useState({
+    username: '',
+    path: '',
+    start_time: '',
+    end_time: '',
+  });
 
-	const [selectedLog, setSelectedLog] = useState<AccessLog | null>(null)
-	const [detailOpen, setDetailOpen] = useState(false)
+  const [selectedLog, setSelectedLog] = useState<AccessLog | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
 
-	const logsQuery = useQuery({
-		queryKey: ["admin", "access-logs", page, searchParams],
-		queryFn: async () => {
-			let startISO = ""
-			if (searchParams.start_time) {
-				startISO = new Date(searchParams.start_time).toISOString()
-			}
-			let endISO = ""
-			if (searchParams.end_time) {
-				endISO = new Date(searchParams.end_time).toISOString()
-			}
+  const logsQuery = useQuery({
+    queryKey: ['admin', 'access-logs', page, searchParams],
+    queryFn: async () => {
+      let startISO = '';
+      if (searchParams.start_time) {
+        startISO = new Date(searchParams.start_time).toISOString();
+      }
+      let endISO = '';
+      if (searchParams.end_time) {
+        endISO = new Date(searchParams.end_time).toISOString();
+      }
 
-			return services.adminLog.getAccessLogs({
-				page,
-				page_size: PAGE_SIZE,
-				username: searchParams.username || undefined,
-				path: searchParams.path || undefined,
-				start_time: startISO || undefined,
-				end_time: endISO || undefined,
-			})
-		},
-		retry: false,
-	})
+      return services.adminLog.getAccessLogs({
+        page,
+        page_size: PAGE_SIZE,
+        username: searchParams.username || undefined,
+        path: searchParams.path || undefined,
+        start_time: startISO || undefined,
+        end_time: endISO || undefined,
+      });
+    },
+    retry: false,
+  });
 
-	const logs = logsQuery.data?.list ?? []
-	const total = logsQuery.data?.total ?? 0
-	const loading = logsQuery.isPending || logsQuery.isFetching
-	const clickhouseDisabled = logsQuery.isError && isClickhouseDisabledError(logsQuery.error)
-	const error = logsQuery.isError && !clickhouseDisabled ? logsQuery.error : null
+  const logs = logsQuery.data?.list ?? [];
+  const total = logsQuery.data?.total ?? 0;
+  const loading = logsQuery.isPending || logsQuery.isFetching;
+  const clickhouseDisabled =
+    logsQuery.isError && isClickhouseDisabledError(logsQuery.error);
+  const error =
+    logsQuery.isError && !clickhouseDisabled ? logsQuery.error : null;
 
-	const totalPages = useMemo(() => Math.max(1, Math.ceil(total / PAGE_SIZE)), [total])
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(total / PAGE_SIZE)),
+    [total],
+  );
 
-	const handleSearch = (e: React.FormEvent) => {
-		e.preventDefault()
-		setPage(1)
-		setSearchParams({
-			username: usernameFilter.trim(),
-			path: pathFilter.trim(),
-			start_time: startTimeFilter,
-			end_time: endTimeFilter,
-		})
-	}
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setPage(1);
+    setSearchParams({
+      username: usernameFilter.trim(),
+      path: pathFilter.trim(),
+      start_time: startTimeFilter,
+      end_time: endTimeFilter,
+    });
+  };
 
-	const handleReset = () => {
-		setUsernameFilter("")
-		setPathFilter("")
-		setStartTimeFilter("")
-		setEndTimeFilter("")
-		setPage(1)
-		setSearchParams({
-			username: "",
-			path: "",
-			start_time: "",
-			end_time: "",
-		})
-	}
+  const handleReset = () => {
+    setUsernameFilter('');
+    setPathFilter('');
+    setStartTimeFilter('');
+    setEndTimeFilter('');
+    setPage(1);
+    setSearchParams({
+      username: '',
+      path: '',
+      start_time: '',
+      end_time: '',
+    });
+  };
 
-	const handlePageChange = (newPage: number) => {
-		setPage(newPage)
-	}
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
 
-	const copyToClipboard = (text: string, subject: string) => {
-		navigator.clipboard.writeText(text)
-		toast.success(`${subject}已复制到剪贴板`)
-	}
+  const copyToClipboard = (text: string, subject: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success(`${subject}已复制到剪贴板`);
+  };
 
-	// Prettify Headers JSON string
-	const getPrettyHeaders = (headersRaw?: string) => {
-		if (!headersRaw) return "暂无头部数据"
-		try {
-			const parsed = JSON.parse(headersRaw)
-			return JSON.stringify(parsed, null, 2)
-		} catch {
-			return headersRaw
-		}
-	}
+  // Prettify Headers JSON string
+  const getPrettyHeaders = (headersRaw?: string) => {
+    if (!headersRaw) return '暂无头部数据';
+    try {
+      const parsed = JSON.parse(headersRaw);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return headersRaw;
+    }
+  };
 
-	if (clickhouseDisabled) {
-		return (
-			<div className="flex flex-col items-center justify-center p-8 border border-dashed rounded-lg bg-card text-center my-6 min-h-[300px]">
-				<XCircle className="size-10 text-muted-foreground mb-3" />
-				<h3 className="text-base font-semibold">ClickHouse 未启用</h3>
-				<p className="text-sm text-muted-foreground mt-1 max-w-[400px] mb-4">
-					当前系统配置未启用 ClickHouse 存储，系统不会收集用户访问日志。如需使用此功能，请在后端 `config.yaml` 配置文件中配置并启用 ClickHouse。
-				</p>
-			</div>
-		)
-	}
+  if (clickhouseDisabled) {
+    return (
+      <div className='flex flex-col items-center justify-center p-8 border border-dashed rounded-lg bg-card text-center my-6 min-h-[300px]'>
+        <XCircle className='size-10 text-muted-foreground mb-3' />
+        <h3 className='text-base font-semibold'>ClickHouse 未启用</h3>
+        <p className='text-sm text-muted-foreground mt-1 max-w-[400px] mb-4'>
+          当前系统配置未启用 ClickHouse
+          存储，系统不会收集用户访问日志。如需使用此功能，请在后端 `config.yaml`
+          配置文件中配置并启用 ClickHouse。
+        </p>
+      </div>
+    );
+  }
 
-	if (error) {
-		return <ErrorInline error={error} onRetry={() => void logsQuery.refetch()} />
-	}
+  if (error) {
+    return (
+      <ErrorInline error={error} onRetry={() => void logsQuery.refetch()} />
+    );
+  }
 
-	return (
-		<div className="space-y-4">
-			{/* Filters */}
-			<form onSubmit={handleSearch} className="grid gap-3 p-4 border rounded-lg bg-card/30 md:grid-cols-5 items-end">
-				<div className="grid gap-1.5">
-					<Label htmlFor="search-user" className="text-xs">用户名</Label>
-					<Input
-						id="search-user"
-						placeholder="输入用户名搜索..."
-						value={usernameFilter}
-						onChange={(e) => setUsernameFilter(e.target.value)}
-						className="h-8 text-xs"
-					/>
-				</div>
-				<div className="grid gap-1.5">
-					<Label htmlFor="search-path" className="text-xs">接口路径</Label>
-					<Input
-						id="search-path"
-						placeholder="模糊匹配路径..."
-						value={pathFilter}
-						onChange={(e) => setPathFilter(e.target.value)}
-						className="h-8 text-xs"
-					/>
-				</div>
-				<div className="grid gap-1.5">
-					<Label htmlFor="search-start" className="text-xs">起始时间</Label>
-					<Input
-						id="search-start"
-						type="datetime-local"
-						value={startTimeFilter}
-						onChange={(e) => setStartTimeFilter(e.target.value)}
-						className="h-8 text-xs"
-					/>
-				</div>
-				<div className="grid gap-1.5">
-					<Label htmlFor="search-end" className="text-xs">结束时间</Label>
-					<Input
-						id="search-end"
-						type="datetime-local"
-						value={endTimeFilter}
-						onChange={(e) => setEndTimeFilter(e.target.value)}
-						className="h-8 text-xs"
-					/>
-				</div>
-				<div className="flex gap-2">
-					<Button type="submit" size="sm" className="h-8 flex-1">
-						<Search className="size-3.5 mr-1" />
-						搜索
-					</Button>
-					<Button type="button" variant="outline" size="sm" onClick={handleReset} className="h-8 flex-1">
-						<RotateCcw className="size-3.5 mr-1" />
-						重置
-					</Button>
-				</div>
-			</form>
+  return (
+    <div className='space-y-4'>
+      {/* Filters */}
+      <form
+        onSubmit={handleSearch}
+        className='grid gap-3 p-4 border rounded-lg bg-card/30 md:grid-cols-5 items-end'
+      >
+        <div className='grid gap-1.5'>
+          <Label htmlFor='search-user' className='text-xs'>
+            用户名
+          </Label>
+          <Input
+            id='search-user'
+            placeholder='输入用户名搜索...'
+            value={usernameFilter}
+            onChange={(e) => setUsernameFilter(e.target.value)}
+            className='h-8 text-xs'
+          />
+        </div>
+        <div className='grid gap-1.5'>
+          <Label htmlFor='search-path' className='text-xs'>
+            接口路径
+          </Label>
+          <Input
+            id='search-path'
+            placeholder='模糊匹配路径...'
+            value={pathFilter}
+            onChange={(e) => setPathFilter(e.target.value)}
+            className='h-8 text-xs'
+          />
+        </div>
+        <div className='grid gap-1.5'>
+          <Label htmlFor='search-start' className='text-xs'>
+            起始时间
+          </Label>
+          <Input
+            id='search-start'
+            type='datetime-local'
+            value={startTimeFilter}
+            onChange={(e) => setStartTimeFilter(e.target.value)}
+            className='h-8 text-xs'
+          />
+        </div>
+        <div className='grid gap-1.5'>
+          <Label htmlFor='search-end' className='text-xs'>
+            结束时间
+          </Label>
+          <Input
+            id='search-end'
+            type='datetime-local'
+            value={endTimeFilter}
+            onChange={(e) => setEndTimeFilter(e.target.value)}
+            className='h-8 text-xs'
+          />
+        </div>
+        <div className='flex gap-2'>
+          <Button type='submit' size='sm' className='h-8 flex-1'>
+            <Search className='size-3.5 mr-1' />
+            搜索
+          </Button>
+          <Button
+            type='button'
+            variant='outline'
+            size='sm'
+            onClick={handleReset}
+            className='h-8 flex-1'
+          >
+            <RotateCcw className='size-3.5 mr-1' />
+            重置
+          </Button>
+        </div>
+      </form>
 
-			{/* Loading Table */}
-			{loading && logs.length === 0 ? (
-				<LoadingStateWithBorder icon={Activity} description="加载访问日志中..." />
-			) : logs.length === 0 ? (
-				<EmptyStateWithBorder icon={Activity} description="未查询到任何访问日志数据" />
-			) : (
-				<div className="rounded-lg border bg-card overflow-hidden">
-					<Table className="min-w-[900px]">
-						<TableHeader>
-							<TableRow className="hover:bg-transparent">
-								<TableHead className="w-[100px]">请求方法</TableHead>
-								<TableHead className="min-w-[200px]">路径</TableHead>
-								<TableHead className="w-[150px]">用户</TableHead>
-								<TableHead className="w-[120px]">IP</TableHead>
-								<TableHead className="w-[90px]">状态</TableHead>
-								<TableHead className="w-[100px]">耗时</TableHead>
-								<TableHead className="w-[170px]">请求时间</TableHead>
-								<TableHead className="w-[80px] text-center">详情</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{logs.map((log) => (
-								<TableRow key={log.id} className="hover:bg-muted/30">
-									<TableCell>
-										<Badge variant="outline" className="font-mono font-semibold uppercase text-xs">
-											{log.method}
-										</Badge>
-									</TableCell>
-									<TableCell className="font-mono text-xs break-all max-w-[280px]">
-										{log.path}
-									</TableCell>
-									<TableCell>
-										<div className="flex flex-col">
-											<span className="text-xs font-medium">{log.username || "未知用户"}</span>
-											{log.nickname && (
-												<span className="text-[10px] text-muted-foreground">({log.nickname})</span>
-											)}
-										</div>
-									</TableCell>
-									<TableCell className="font-mono text-xs text-muted-foreground">
-										{log.ip}
-									</TableCell>
-									<TableCell>
-										<Badge variant={statusVariant(log.status)}>
-											{log.status}
-										</Badge>
-									</TableCell>
-									<TableCell className="font-mono text-xs text-muted-foreground">
-										{formatLatency(log.latency)}
-									</TableCell>
-									<TableCell className="font-mono text-[11px] text-muted-foreground">
-										{formatDateTime(log.created_at)}
-									</TableCell>
-									<TableCell className="text-center">
-										<Button
-											variant="ghost"
-											size="icon"
-											className="size-7 hover:bg-muted"
-											onClick={() => {
-												setSelectedLog(log)
-												setDetailOpen(true)
-											}}
-										>
-											<Eye className="size-3.5" />
-										</Button>
-									</TableCell>
-								</TableRow>
-							))}
-						</TableBody>
-					</Table>
-				</div>
-			)}
+      {/* Loading Table */}
+      {loading && logs.length === 0 ? (
+        <LoadingStateWithBorder
+          icon={Activity}
+          description='加载访问日志中...'
+        />
+      ) : logs.length === 0 ? (
+        <EmptyStateWithBorder
+          icon={Activity}
+          description='未查询到任何访问日志数据'
+        />
+      ) : (
+        <div className='rounded-lg border bg-card overflow-hidden'>
+          <Table className='min-w-[900px]'>
+            <TableHeader>
+              <TableRow className='hover:bg-transparent'>
+                <TableHead className='w-[100px]'>请求方法</TableHead>
+                <TableHead className='min-w-[200px]'>路径</TableHead>
+                <TableHead className='w-[150px]'>用户</TableHead>
+                <TableHead className='w-[120px]'>IP</TableHead>
+                <TableHead className='w-[90px]'>状态</TableHead>
+                <TableHead className='w-[100px]'>耗时</TableHead>
+                <TableHead className='w-[170px]'>请求时间</TableHead>
+                <TableHead className='w-[80px] text-center'>详情</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {logs.map((log) => (
+                <TableRow key={log.id} className='hover:bg-muted/30'>
+                  <TableCell>
+                    <Badge
+                      variant='outline'
+                      className='font-mono font-semibold uppercase text-xs'
+                    >
+                      {log.method}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className='font-mono text-xs break-all max-w-[280px]'>
+                    {log.path}
+                  </TableCell>
+                  <TableCell>
+                    <div className='flex flex-col'>
+                      <span className='text-xs font-medium'>
+                        {log.username || '未知用户'}
+                      </span>
+                      {log.nickname && (
+                        <span className='text-[10px] text-muted-foreground'>
+                          ({log.nickname})
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className='font-mono text-xs text-muted-foreground'>
+                    {log.ip}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant(log.status)}>
+                      {log.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className='font-mono text-xs text-muted-foreground'>
+                    {formatLatency(log.latency)}
+                  </TableCell>
+                  <TableCell className='font-mono text-[11px] text-muted-foreground'>
+                    {formatDateTime(log.created_at)}
+                  </TableCell>
+                  <TableCell className='text-center'>
+                    <Button
+                      variant='ghost'
+                      size='icon'
+                      className='size-7 hover:bg-muted'
+                      onClick={() => {
+                        setSelectedLog(log);
+                        setDetailOpen(true);
+                      }}
+                    >
+                      <Eye className='size-3.5' />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
 
-			{/* Pagination */}
-			{logs.length > 0 && (
-				<div className="flex items-center justify-between py-1">
-					<div className="text-xs text-muted-foreground">
-						共 {total} 条记录，当前第 {page}/{totalPages} 页
-					</div>
-					<div className="flex items-center gap-2">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => handlePageChange(Math.max(1, page - 1))}
-							disabled={page <= 1 || loading}
-							className="h-8 text-xs"
-						>
-							<ChevronLeft className="size-3.5 mr-1" />
-							上一页
-						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
-							disabled={page >= totalPages || loading}
-							className="h-8 text-xs"
-						>
-							下一页
-							<ChevronRight className="size-3.5 ml-1" />
-						</Button>
-					</div>
-				</div>
-			)}
+      {/* Pagination */}
+      {logs.length > 0 && (
+        <div className='flex items-center justify-between py-1'>
+          <div className='text-xs text-muted-foreground'>
+            共 {total} 条记录，当前第 {page}/{totalPages} 页
+          </div>
+          <div className='flex items-center gap-2'>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => handlePageChange(Math.max(1, page - 1))}
+              disabled={page <= 1 || loading}
+              className='h-8 text-xs'
+            >
+              <ChevronLeft className='size-3.5 mr-1' />
+              上一页
+            </Button>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => handlePageChange(Math.min(totalPages, page + 1))}
+              disabled={page >= totalPages || loading}
+              className='h-8 text-xs'
+            >
+              下一页
+              <ChevronRight className='size-3.5 ml-1' />
+            </Button>
+          </div>
+        </div>
+      )}
 
-			{/* Detail Drawer */}
-			<Sheet open={detailOpen} onOpenChange={setDetailOpen}>
-				<SheetContent className="w-full p-0 sm:max-w-[640px] flex flex-col h-full bg-background border-l">
-					<SheetHeader className="border-b px-5 py-4 shrink-0">
-						<SheetTitle className="text-lg font-bold">访问日志详情</SheetTitle>
-						<SheetDescription className="text-xs">
-							访问 ID: {selectedLog?.id}
-						</SheetDescription>
-					</SheetHeader>
+      {/* Detail Drawer */}
+      <Sheet open={detailOpen} onOpenChange={setDetailOpen}>
+        <SheetContent className='w-full p-0 sm:max-w-[640px] flex flex-col h-full bg-background border-l'>
+          <SheetHeader className='border-b px-5 py-4 shrink-0'>
+            <SheetTitle className='text-lg font-bold'>访问日志详情</SheetTitle>
+            <SheetDescription className='text-xs'>
+              访问 ID: {selectedLog?.id}
+            </SheetDescription>
+          </SheetHeader>
 
-					{selectedLog ? (
-						<div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
-							{/* Summary Details */}
-							<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-								<div className="rounded-lg border p-3 bg-muted/10">
-									<div className="text-[10px] text-muted-foreground uppercase font-bold tracking-wider">请求方法</div>
-									<div className="mt-1 font-mono text-sm font-bold uppercase">{selectedLog.method}</div>
-								</div>
-								<div className="rounded-lg border p-3 bg-muted/10">
-									<div className="text-[10px] text-muted-foreground uppercase font-bold tracking-wider">响应状态</div>
-									<div className="mt-1">
-										<Badge variant={statusVariant(selectedLog.status)}>
-											{selectedLog.status}
-										</Badge>
-									</div>
-								</div>
-								<div className="rounded-lg border p-3 bg-muted/10">
-									<div className="text-[10px] text-muted-foreground uppercase font-bold tracking-wider">耗时</div>
-									<div className="mt-1 font-mono text-sm">{formatLatency(selectedLog.latency)}</div>
-								</div>
-								<div className="rounded-lg border p-3 bg-muted/10 col-span-2 sm:col-span-1">
-									<div className="text-[10px] text-muted-foreground uppercase font-bold tracking-wider">IP 地址</div>
-									<div className="mt-1 font-mono text-sm">{selectedLog.ip}</div>
-								</div>
-								<div className="rounded-lg border p-3 bg-muted/10 col-span-2">
-									<div className="text-[10px] text-muted-foreground uppercase font-bold tracking-wider">用户</div>
-									<div className="mt-1 text-sm font-medium">
-										{selectedLog.username ? `${selectedLog.username} (${selectedLog.nickname || '无昵称'})` : "未知/游客"}
-										<span className="block font-mono text-[10px] text-muted-foreground mt-0.5">ID: {selectedLog.user_id}</span>
-									</div>
-								</div>
-							</div>
+          {selectedLog ? (
+            <div className='flex-1 overflow-y-auto px-5 py-4 space-y-5'>
+              {/* Summary Details */}
+              <div className='grid grid-cols-2 gap-3 sm:grid-cols-3'>
+                <div className='rounded-lg border p-3 bg-muted/10'>
+                  <div className='text-[10px] text-muted-foreground uppercase font-bold tracking-wider'>
+                    请求方法
+                  </div>
+                  <div className='mt-1 font-mono text-sm font-bold uppercase'>
+                    {selectedLog.method}
+                  </div>
+                </div>
+                <div className='rounded-lg border p-3 bg-muted/10'>
+                  <div className='text-[10px] text-muted-foreground uppercase font-bold tracking-wider'>
+                    响应状态
+                  </div>
+                  <div className='mt-1'>
+                    <Badge variant={statusVariant(selectedLog.status)}>
+                      {selectedLog.status}
+                    </Badge>
+                  </div>
+                </div>
+                <div className='rounded-lg border p-3 bg-muted/10'>
+                  <div className='text-[10px] text-muted-foreground uppercase font-bold tracking-wider'>
+                    耗时
+                  </div>
+                  <div className='mt-1 font-mono text-sm'>
+                    {formatLatency(selectedLog.latency)}
+                  </div>
+                </div>
+                <div className='rounded-lg border p-3 bg-muted/10 col-span-2 sm:col-span-1'>
+                  <div className='text-[10px] text-muted-foreground uppercase font-bold tracking-wider'>
+                    IP 地址
+                  </div>
+                  <div className='mt-1 font-mono text-sm'>{selectedLog.ip}</div>
+                </div>
+                <div className='rounded-lg border p-3 bg-muted/10 col-span-2'>
+                  <div className='text-[10px] text-muted-foreground uppercase font-bold tracking-wider'>
+                    用户
+                  </div>
+                  <div className='mt-1 text-sm font-medium'>
+                    {selectedLog.username
+                      ? `${selectedLog.username} (${selectedLog.nickname || '无昵称'})`
+                      : '未知/游客'}
+                    <span className='block font-mono text-[10px] text-muted-foreground mt-0.5'>
+                      ID: {selectedLog.user_id}
+                    </span>
+                  </div>
+                </div>
+              </div>
 
-							{/* Path */}
-							<div className="grid gap-2">
-								<Label className="text-xs font-bold text-muted-foreground">请求路径</Label>
-								<div className="rounded-md border bg-muted/30 px-3 py-2 font-mono text-xs break-all">
-									{selectedLog.path}
-								</div>
-							</div>
+              {/* Path */}
+              <div className='grid gap-2'>
+                <Label className='text-xs font-bold text-muted-foreground'>
+                  请求路径
+                </Label>
+                <div className='rounded-md border bg-muted/30 px-3 py-2 font-mono text-xs break-all'>
+                  {selectedLog.path}
+                </div>
+              </div>
 
-							{/* Request Time */}
-							<div className="grid gap-2">
-								<Label className="text-xs font-bold text-muted-foreground">请求时间</Label>
-								<div className="font-mono text-xs">{formatDateTime(selectedLog.created_at)}</div>
-							</div>
+              {/* Request Time */}
+              <div className='grid gap-2'>
+                <Label className='text-xs font-bold text-muted-foreground'>
+                  请求时间
+                </Label>
+                <div className='font-mono text-xs'>
+                  {formatDateTime(selectedLog.created_at)}
+                </div>
+              </div>
 
-							{/* User Agent */}
-							<div className="grid gap-2">
-								<div className="flex items-center justify-between">
-									<Label className="text-xs font-bold text-muted-foreground">User-Agent</Label>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="size-6 text-muted-foreground hover:text-foreground"
-										onClick={() => copyToClipboard(selectedLog.user_agent, "User-Agent")}
-										title="复制 User-Agent"
-									>
-										<Copy className="size-3" />
-									</Button>
-								</div>
-								<div className="rounded-md border bg-muted/20 px-3 py-2 text-xs font-mono break-all max-h-24 overflow-y-auto leading-relaxed">
-									{selectedLog.user_agent}
-								</div>
-							</div>
+              {/* User Agent */}
+              <div className='grid gap-2'>
+                <div className='flex items-center justify-between'>
+                  <Label className='text-xs font-bold text-muted-foreground'>
+                    User-Agent
+                  </Label>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='size-6 text-muted-foreground hover:text-foreground'
+                    onClick={() =>
+                      copyToClipboard(selectedLog.user_agent, 'User-Agent')
+                    }
+                    title='复制 User-Agent'
+                  >
+                    <Copy className='size-3' />
+                  </Button>
+                </div>
+                <div className='rounded-md border bg-muted/20 px-3 py-2 text-xs font-mono break-all max-h-24 overflow-y-auto leading-relaxed'>
+                  {selectedLog.user_agent}
+                </div>
+              </div>
 
-							{/* Headers */}
-							<div className="grid gap-2 flex-1">
-								<div className="flex items-center justify-between">
-									<Label className="text-xs font-bold text-muted-foreground">Request Headers</Label>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="size-6 text-muted-foreground hover:text-foreground"
-										onClick={() => copyToClipboard(getPrettyHeaders(selectedLog.headers), "Headers")}
-										title="复制 Headers"
-									>
-										<Copy className="size-3" />
-									</Button>
-								</div>
-								<pre className="overflow-auto rounded-md border bg-[#0d1117] p-3 text-xs leading-relaxed text-gray-300 font-mono max-h-[300px]">
-									{getPrettyHeaders(selectedLog.headers)}
-								</pre>
-							</div>
-						</div>
-					) : (
-						<div className="flex-grow flex items-center justify-center">
-							<EmptyStateWithBorder icon={Activity} description="未选中日志明细" />
-						</div>
-					)}
-				</SheetContent>
-			</Sheet>
-		</div>
-	)
-}
+              {/* Headers */}
+              <div className='grid gap-2 flex-1'>
+                <div className='flex items-center justify-between'>
+                  <Label className='text-xs font-bold text-muted-foreground'>
+                    Request Headers
+                  </Label>
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='size-6 text-muted-foreground hover:text-foreground'
+                    onClick={() =>
+                      copyToClipboard(
+                        getPrettyHeaders(selectedLog.headers),
+                        'Headers',
+                      )
+                    }
+                    title='复制 Headers'
+                  >
+                    <Copy className='size-3' />
+                  </Button>
+                </div>
+                <pre className='overflow-auto rounded-md border bg-[#0d1117] p-3 text-xs leading-relaxed text-gray-300 font-mono max-h-[300px]'>
+                  {getPrettyHeaders(selectedLog.headers)}
+                </pre>
+              </div>
+            </div>
+          ) : (
+            <div className='flex-grow flex items-center justify-center'>
+              <EmptyStateWithBorder
+                icon={Activity}
+                description='未选中日志明细'
+              />
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

frontend/app/(main)/admin/logs/components/app-logs.tsx

@@ -14,92 +14,103 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-"use client"
+'use client';
 
-import {memo, useCallback, useEffect, useRef, useState} from "react"
-import {useVirtualizer} from "@tanstack/react-virtual"
-import {toast} from "sonner"
-import {ArrowDown, ChevronUp, Loader2} from "lucide-react"
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { toast } from 'sonner';
+import { ArrowDown, ChevronUp, Loader2 } from 'lucide-react';
 
-import services from "@/lib/services"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {Button} from "@/components/ui/button"
+import services from '@/lib/services';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Button } from '@/components/ui/button';
 
 interface LogEntry {
-  index: number
-  data: string
+  index: number;
+  data: string;
 }
 
 // Distance (px) from bottom to treat as "at bottom"
-const BOTTOM_THRESHOLD = 40
-const LOG_LINE_ESTIMATE_PX = 20
-const LOG_VIRTUAL_OVERSCAN = 24
+const BOTTOM_THRESHOLD = 40;
+const LOG_LINE_ESTIMATE_PX = 20;
+const LOG_VIRTUAL_OVERSCAN = 24;
 
-const LogLine = memo(function LogLine({data}: {data: string}) {
-  const level = parseLogLevel(data)
-  const color = level === "error"
-    ? "text-red-400"
-    : level === "warn"
-      ? "text-yellow-400"
-      : level === "debug"
-        ? "text-gray-500"
-        : "text-gray-300"
+const LogLine = memo(function LogLine({ data }: { data: string }) {
+  const level = parseLogLevel(data);
+  const color =
+    level === 'error'
+      ? 'text-red-400'
+      : level === 'warn'
+        ? 'text-yellow-400'
+        : level === 'debug'
+          ? 'text-gray-500'
+          : 'text-gray-300';
 
   return (
-    <div className={`${color} whitespace-pre-wrap break-all px-2 py-0.5 rounded hover:bg-white/5`}>
+    <div
+      className={`${color} whitespace-pre-wrap break-all px-2 py-0.5 rounded hover:bg-white/5`}
+    >
       {data}
     </div>
-  )
-})
+  );
+});
 
 function getApiBaseUrl(): string {
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     // If NEXT_PUBLIC_WAVELET_BACKEND_URL is set, use it. Otherwise, use origin.
-    const base = process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || ""
-    if (base.startsWith("http")) return base
+    const base = process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || '';
+    if (base.startsWith('http')) return base;
 
     // Relative URL fallback
-    const proto = window.location.protocol
-    const host = window.location.host
-    return `${proto}//${host}${base}`
+    const proto = window.location.protocol;
+    const host = window.location.host;
+    return `${proto}//${host}${base}`;
   }
-  return process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || ""
+  return process.env.NEXT_PUBLIC_WAVELET_BACKEND_URL || '';
 }
 
 function buildWsUrl(): string {
-  const base = getApiBaseUrl()
-  const wsBase = base.replace(/^http/, "ws")
-  return `${wsBase}/api/v1/admin/logs/ws`
+  const base = getApiBaseUrl();
+  const wsBase = base.replace(/^http/, 'ws');
+  return `${wsBase}/api/v1/admin/logs/ws`;
 }
 
-function parseLogLevel(line: string): "debug" | "info" | "warn" | "error" | "unknown" {
-  const lower = line.toLowerCase()
-  if (lower.includes("\"level\":\"error\"") || lower.includes("level=error")) return "error"
-  if (lower.includes("\"level\":\"warn\"") || lower.includes("level=warn")) return "warn"
-  if (lower.includes("\"level\":\"debug\"") || lower.includes("level=debug")) return "debug"
-  if (lower.includes("\"level\":\"info\"") || lower.includes("level=info")) return "info"
-  return "unknown"
+function parseLogLevel(
+  line: string,
+): 'debug' | 'info' | 'warn' | 'error' | 'unknown' {
+  const lower = line.toLowerCase();
+  if (lower.includes('"level":"error"') || lower.includes('level=error'))
+    return 'error';
+  if (lower.includes('"level":"warn"') || lower.includes('level=warn'))
+    return 'warn';
+  if (lower.includes('"level":"debug"') || lower.includes('level=debug'))
+    return 'debug';
+  if (lower.includes('"level":"info"') || lower.includes('level=info'))
+    return 'info';
+  return 'unknown';
 }
 
 export function AppLogs() {
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
-  const [logs, setLogs] = useState<LogEntry[]>([])
-  const [hasMore, setHasMore] = useState(false)
-  const [nextCursor, setNextCursor] = useState(0)
-  const [loadingMore, setLoadingMore] = useState(false)
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState(0);
+  const [loadingMore, setLoadingMore] = useState(false);
 
   // autoScroll = true → new logs auto-scroll to bottom
-  const [autoScroll, setAutoScroll] = useState(true)
+  const [autoScroll, setAutoScroll] = useState(true);
 
-  const containerRef = useRef<HTMLDivElement>(null)
-  const wsRef = useRef<WebSocket | null>(null)
-  const autoScrollRef = useRef(autoScroll)
-  const isUserScrolling = useRef(false)
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const autoScrollRef = useRef(autoScroll);
+  const isUserScrolling = useRef(false);
 
-  useEffect(() => { autoScrollRef.current = autoScroll }, [autoScroll])
+  useEffect(() => {
+    autoScrollRef.current = autoScroll;
+  }, [autoScroll]);
 
   const rowVirtualizer = useVirtualizer({
     count: logs.length,
@@ -107,200 +118,222 @@ export function AppLogs() {
     estimateSize: () => LOG_LINE_ESTIMATE_PX,
     overscan: LOG_VIRTUAL_OVERSCAN,
     measureElement: (element) => element.getBoundingClientRect().height,
-  })
+  });
 
   // ---- Scroll detection ------------------------------------------------
   const handleScroll = useCallback(() => {
-    const el = containerRef.current
-    if (!el) return
+    const el = containerRef.current;
+    if (!el) return;
 
-    if (!isUserScrolling.current) return
+    if (!isUserScrolling.current) return;
 
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD
+    const atBottom =
+      el.scrollHeight - el.scrollTop - el.clientHeight < BOTTOM_THRESHOLD;
     if (atBottom && !autoScrollRef.current) {
-      setAutoScroll(true)
+      setAutoScroll(true);
     } else if (!atBottom && autoScrollRef.current) {
-      setAutoScroll(false)
+      setAutoScroll(false);
     }
-  }, [])
+  }, []);
 
-  const handleWheel = useCallback(() => { isUserScrolling.current = true }, [])
-  const handleTouchStart = useCallback(() => { isUserScrolling.current = true }, [])
+  const handleWheel = useCallback(() => {
+    isUserScrolling.current = true;
+  }, []);
+  const handleTouchStart = useCallback(() => {
+    isUserScrolling.current = true;
+  }, []);
 
   useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
+    const el = containerRef.current;
+    if (!el) return;
 
-    let timer: ReturnType<typeof setTimeout>
+    let timer: ReturnType<typeof setTimeout>;
     const onScrollEnd = () => {
-      clearTimeout(timer)
-      timer = setTimeout(() => { isUserScrolling.current = false }, 150)
-    }
-    el.addEventListener("scroll", onScrollEnd, { passive: true })
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        isUserScrolling.current = false;
+      }, 150);
+    };
+    el.addEventListener('scroll', onScrollEnd, { passive: true });
     return () => {
-      el.removeEventListener("scroll", onScrollEnd)
-      clearTimeout(timer)
-    }
-  }, [])
+      el.removeEventListener('scroll', onScrollEnd);
+      clearTimeout(timer);
+    };
+  }, []);
 
   // ---- Auto-scroll to bottom when new logs arrive ----------------------
   useEffect(() => {
-    if (!autoScroll || !containerRef.current) return
-    isUserScrolling.current = false
-    const el = containerRef.current
+    if (!autoScroll || !containerRef.current) return;
+    isUserScrolling.current = false;
+    const el = containerRef.current;
     requestAnimationFrame(() => {
-      el.scrollTop = el.scrollHeight
-    })
-  }, [logs, autoScroll])
+      el.scrollTop = el.scrollHeight;
+    });
+  }, [logs, autoScroll]);
 
   // ---- Data fetching ---------------------------------------------------
   const fetchLogs = useCallback(async (cursor: number = 0) => {
     try {
-      return await services.adminLog.getLogs(cursor)
+      return await services.adminLog.getLogs(cursor);
     } catch (err) {
-      throw err instanceof Error ? err : new Error("获取日志失败")
+      throw err instanceof Error ? err : new Error('获取日志失败');
     }
-  }, [])
+  }, []);
 
-  const loadHistory = useCallback(async (cursor: number = 0) => {
-    const isInitial = cursor === 0
-    if (isInitial) {
-      setLoading(true)
-      setError(null)
-    } else {
-      setLoadingMore(true)
-    }
-
-    try {
-      const data = await fetchLogs(cursor)
+  const loadHistory = useCallback(
+    async (cursor: number = 0) => {
+      const isInitial = cursor === 0;
       if (isInitial) {
-        setLogs(data.lines || [])
+        setLoading(true);
+        setError(null);
       } else {
-        const el = containerRef.current
-        const previousScrollHeight = el?.scrollHeight ?? 0
-        setLogs(prev => [...(data.lines || []), ...prev])
+        setLoadingMore(true);
+      }
 
-        requestAnimationFrame(() => {
-          if (!el) return
-          isUserScrolling.current = false
-          el.scrollTop = el.scrollHeight - previousScrollHeight
-        })
+      try {
+        const data = await fetchLogs(cursor);
+        if (isInitial) {
+          setLogs(data.lines || []);
+        } else {
+          const el = containerRef.current;
+          const previousScrollHeight = el?.scrollHeight ?? 0;
+          setLogs((prev) => [...(data.lines || []), ...prev]);
+
+          requestAnimationFrame(() => {
+            if (!el) return;
+            isUserScrolling.current = false;
+            el.scrollTop = el.scrollHeight - previousScrollHeight;
+          });
+        }
+        setHasMore(data.has_more);
+        setNextCursor(data.next_cursor);
+      } catch (err) {
+        if (isInitial) {
+          setError(err instanceof Error ? err : new Error('获取日志失败'));
+        } else {
+          toast.error('加载更早日志失败');
+        }
+      } finally {
+        if (isInitial) setLoading(false);
+        else setLoadingMore(false);
       }
-      setHasMore(data.has_more)
-      setNextCursor(data.next_cursor)
-    } catch (err) {
-      if (isInitial) {
-        setError(err instanceof Error ? err : new Error("获取日志失败"))
-      } else {
-        toast.error("加载更早日志失败")
-      }
-    } finally {
-      if (isInitial) setLoading(false)
-      else setLoadingMore(false)
-    }
-  }, [fetchLogs])
+    },
+    [fetchLogs],
+  );
 
   // ---- WebSocket -------------------------------------------------------
   const connectWs = useCallback(() => {
-    if (wsRef.current) wsRef.current.close()
+    if (wsRef.current) wsRef.current.close();
 
-    const ws = new WebSocket(buildWsUrl())
-    wsRef.current = ws
+    const ws = new WebSocket(buildWsUrl());
+    wsRef.current = ws;
 
     ws.onmessage = (event) => {
       try {
-        const msg = JSON.parse(event.data)
-        if (msg.type === "log" && msg.data) {
-          const entry: LogEntry = msg.data
-          setLogs(prev => {
-            const next = [...prev, entry]
-            return next.length > 2000 ? next.slice(-2000) : next
-          })
+        const msg = JSON.parse(event.data);
+        if (msg.type === 'log' && msg.data) {
+          const entry: LogEntry = msg.data;
+          setLogs((prev) => {
+            const next = [...prev, entry];
+            return next.length > 2000 ? next.slice(-2000) : next;
+          });
         }
-      } catch { /* ignore */ }
-    }
+      } catch {
+        /* ignore */
+      }
+    };
 
-    ws.onclose = () => { wsRef.current = null }
-  }, [])
+    ws.onclose = () => {
+      wsRef.current = null;
+    };
+  }, []);
 
   // ---- Initialize ------------------------------------------------------
   useEffect(() => {
-    loadHistory(0).then(() => connectWs())
+    loadHistory(0).then(() => connectWs());
     return () => {
-      wsRef.current?.close()
-      wsRef.current = null
-    }
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   // ---- Actions ---------------------------------------------------------
   const scrollToBottom = useCallback(() => {
-    setAutoScroll(true)
+    setAutoScroll(true);
     requestAnimationFrame(() => {
       if (containerRef.current) {
-        containerRef.current.scrollTop = containerRef.current.scrollHeight
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
       }
-    })
-  }, [])
+    });
+  }, []);
 
   const handleLoadMore = useCallback(() => {
-    if (nextCursor > 0) loadHistory(nextCursor)
-  }, [nextCursor, loadHistory])
+    if (nextCursor > 0) loadHistory(nextCursor);
+  }, [nextCursor, loadHistory]);
 
   // ---- Render ----------------------------------------------------------
-  if (loading) return <LoadingStateWithBorder />
-  if (error) return <ErrorInline error={error} onRetry={() => loadHistory(0)} />
+  if (loading) return <LoadingStateWithBorder />;
+  if (error)
+    return <ErrorInline error={error} onRetry={() => loadHistory(0)} />;
 
   return (
-    <div className="flex flex-col h-full relative">
+    <div className='flex flex-col h-full relative'>
       {/* Log viewer — fixed height, scrollable */}
       <div
         ref={containerRef}
         onScroll={handleScroll}
         onWheel={handleWheel}
         onTouchStart={handleTouchStart}
-        className="h-[calc(100vh-270px)] overflow-y-auto overflow-x-hidden rounded-lg border border-border/40 bg-[#0d1117] font-mono text-[13px] leading-5 relative"
+        className='h-[calc(100vh-270px)] overflow-y-auto overflow-x-hidden rounded-lg border border-border/40 bg-[#0d1117] font-mono text-[13px] leading-5 relative'
       >
         {/* Load older logs */}
         {hasMore && (
-          <div className="sticky top-0 z-10 flex justify-center py-1.5 bg-[#0d1117]/90 backdrop-blur-sm">
+          <div className='sticky top-0 z-10 flex justify-center py-1.5 bg-[#0d1117]/90 backdrop-blur-sm'>
             <Button
-              variant="ghost"
-              size="sm"
+              variant='ghost'
+              size='sm'
               onClick={handleLoadMore}
               disabled={loadingMore}
-              className="text-muted-foreground hover:text-foreground h-7 text-xs"
+              className='text-muted-foreground hover:text-foreground h-7 text-xs'
             >
-              {loadingMore
-                ? <><Loader2 className="size-3 mr-1.5 animate-spin" />加载中...</>
-                : <><ChevronUp className="size-3 mr-1.5" />加载更早日志</>
-              }
+              {loadingMore ? (
+                <>
+                  <Loader2 className='size-3 mr-1.5 animate-spin' />
+                  加载中...
+                </>
+              ) : (
+                <>
+                  <ChevronUp className='size-3 mr-1.5' />
+                  加载更早日志
+                </>
+              )}
             </Button>
           </div>
         )}
 
         {logs.length === 0 ? (
-          <div className="px-4 py-8 text-center text-gray-500">暂无日志</div>
+          <div className='px-4 py-8 text-center text-gray-500'>暂无日志</div>
         ) : (
           <div
-            className="relative px-3 py-3"
-            style={{height: `${rowVirtualizer.getTotalSize()}px`}}
+            className='relative px-3 py-3'
+            style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
           >
             {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const entry = logs[virtualRow.index]
-              if (!entry) return null
+              const entry = logs[virtualRow.index];
+              if (!entry) return null;
 
               return (
                 <div
                   key={entry.index}
                   ref={rowVirtualizer.measureElement}
                   data-index={virtualRow.index}
-                  className="absolute top-0 left-0 w-full"
-                  style={{transform: `translateY(${virtualRow.start}px)`}}
+                  className='absolute top-0 left-0 w-full'
+                  style={{ transform: `translateY(${virtualRow.start}px)` }}
                 >
                   <LogLine data={entry.data} />
                 </div>
-              )
+              );
             })}
           </div>
         )}
@@ -308,18 +341,18 @@ export function AppLogs() {
 
       {/* Floating "back to latest" button */}
       {!autoScroll && (
-        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20">
+        <div className='absolute bottom-6 left-1/2 -translate-x-1/2 z-20'>
           <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
             onClick={scrollToBottom}
-            className="shadow-lg bg-background/80 backdrop-blur-sm border-border/50"
+            className='shadow-lg bg-background/80 backdrop-blur-sm border-border/50'
           >
-            <ArrowDown className="size-3.5 mr-1.5" />
+            <ArrowDown className='size-3.5 mr-1.5' />
             回到最新
           </Button>
         </div>
       )}
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/logs/page-client.tsx

@@ -1,66 +1,76 @@
-"use client"
+'use client';
 
-import dynamic from "next/dynamic"
-import {Activity, BarChart3, Terminal} from "lucide-react"
+import dynamic from 'next/dynamic';
+import { Activity, BarChart3, Terminal } from 'lucide-react';
 
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 const tabFallback = (
-  <div className="h-64 animate-pulse rounded-lg border border-border/40 bg-muted/20" />
-)
+  <div className='h-64 animate-pulse rounded-lg border border-border/40 bg-muted/20' />
+);
 
 const AccessAnalytics = dynamic(
-  () => import("./components/access-analytics").then((mod) => mod.AccessAnalytics),
+  () =>
+    import('./components/access-analytics').then((mod) => mod.AccessAnalytics),
   { loading: () => tabFallback },
-)
+);
 
 const AccessLogs = dynamic(
-  () => import("./components/access-logs").then((mod) => mod.AccessLogs),
+  () => import('./components/access-logs').then((mod) => mod.AccessLogs),
   { loading: () => tabFallback },
-)
+);
 
 const AppLogs = dynamic(
-  () => import("./components/app-logs").then((mod) => mod.AppLogs),
+  () => import('./components/app-logs').then((mod) => mod.AppLogs),
   { loading: () => tabFallback },
-)
+);
 
 export function LogsPageClient() {
   return (
-    <div className="flex flex-col h-full space-y-6 py-6">
+    <div className='flex flex-col h-full space-y-6 py-6'>
       {/* Header */}
-      <div className="flex items-center gap-2">
-        <Terminal className="size-5 text-primary" />
+      <div className='flex items-center gap-2'>
+        <Terminal className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">系统日志</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>系统日志</h1>
         </div>
       </div>
       {/* Tabs Layout */}
-      <Tabs defaultValue="analytics" className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
-          <TabsTrigger value="analytics" className="px-0 pb-2 text-xs font-semibold flex items-center gap-1.5">
-            <BarChart3 className="size-3.5" />
+      <Tabs defaultValue='analytics' className='w-full'>
+        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
+          <TabsTrigger
+            value='analytics'
+            className='px-0 pb-2 text-xs font-semibold flex items-center gap-1.5'
+          >
+            <BarChart3 className='size-3.5' />
             访问分析
           </TabsTrigger>
-          <TabsTrigger value="access" className="px-0 pb-2 text-xs font-semibold flex items-center gap-1.5">
-            <Activity className="size-3.5" />
+          <TabsTrigger
+            value='access'
+            className='px-0 pb-2 text-xs font-semibold flex items-center gap-1.5'
+          >
+            <Activity className='size-3.5' />
             用户访问日志
           </TabsTrigger>
-          <TabsTrigger value="app" className="px-0 pb-2 text-xs font-semibold flex items-center gap-1.5">
-            <Terminal className="size-3.5" />
+          <TabsTrigger
+            value='app'
+            className='px-0 pb-2 text-xs font-semibold flex items-center gap-1.5'
+          >
+            <Terminal className='size-3.5' />
             应用运行日志
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="analytics" className="mt-0 outline-none flex-1">
+        <TabsContent value='analytics' className='mt-0 outline-none flex-1'>
           <AccessAnalytics />
         </TabsContent>
-        <TabsContent value="access" className="mt-0 outline-none flex-1">
+        <TabsContent value='access' className='mt-0 outline-none flex-1'>
           <AccessLogs />
         </TabsContent>
-        <TabsContent value="app" className="mt-0 outline-none flex-1">
+        <TabsContent value='app' className='mt-0 outline-none flex-1'>
           <AppLogs />
         </TabsContent>
       </Tabs>
     </div>
-  )
-}
+  );
+}

frontend/app/(main)/admin/logs/page.tsx

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {LogsPageClient} from "./page-client"
+import { LogsPageClient } from './page-client';
 
 export default function LogsPage() {
-  return <LogsPageClient />
-}
+  return <LogsPageClient />;
+}

frontend/app/(main)/admin/push/components/histories-tab.tsx

@@ -1,21 +1,40 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {useQuery} from "@tanstack/react-query"
-import {ChevronLeft, ChevronRight, History, RefreshCw, Search,} from "lucide-react"
+import * as React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import {
+  ChevronLeft,
+  ChevronRight,
+  History,
+  RefreshCw,
+  Search,
+} from 'lucide-react';
 
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Badge} from "@/components/ui/badge"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {cn} from "@/lib/utils"
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { cn } from '@/lib/utils';
 
 import {
   Dialog,
@@ -24,156 +43,205 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from '@/components/ui/dialog';
 
-import type {PushHistory} from "@/lib/services/push"
-import {PushService} from "@/lib/services/push"
+import type { PushHistory } from '@/lib/services/push';
+import { PushService } from '@/lib/services/push';
 
-function getLevelBadgeVariant(level: string): "outline" | "secondary" | "destructive" | "default" {
+function getLevelBadgeVariant(
+  level: string,
+): 'outline' | 'secondary' | 'destructive' | 'default' {
   switch (level) {
-    case "CRITICAL":
-      return "destructive"
-    case "IMPORTANT":
-      return "default"
+    case 'CRITICAL':
+      return 'destructive';
+    case 'IMPORTANT':
+      return 'default';
     default:
-      return "outline"
+      return 'outline';
   }
 }
 
 export function HistoriesTab() {
-  const [historyPage, setHistoryPage] = React.useState(1)
-  const [historySearch, setHistorySearch] = React.useState("")
-  const [historyStatus, setHistoryStatus] = React.useState("all")
+  const [historyPage, setHistoryPage] = React.useState(1);
+  const [historySearch, setHistorySearch] = React.useState('');
+  const [historyStatus, setHistoryStatus] = React.useState('all');
 
-  const [detailOpen, setDetailOpen] = React.useState(false)
-  const [selectedHistory, setSelectedHistory] = React.useState<PushHistory | null>(null)
+  const [detailOpen, setDetailOpen] = React.useState(false);
+  const [selectedHistory, setSelectedHistory] =
+    React.useState<PushHistory | null>(null);
 
   const handleRowClick = (hist: PushHistory) => {
-    setSelectedHistory(hist)
-    setDetailOpen(true)
-  }
+    setSelectedHistory(hist);
+    setDetailOpen(true);
+  };
 
   const historiesQuery = useQuery({
-    queryKey: ["admin", "push-histories", historyPage, historySearch, historyStatus],
+    queryKey: [
+      'admin',
+      'push-histories',
+      historyPage,
+      historySearch,
+      historyStatus,
+    ],
     queryFn: () =>
       PushService.listHistories({
         page: historyPage,
         page_size: 10,
         event_key: historySearch || undefined,
-        status: historyStatus === "all" ? undefined : historyStatus,
+        status: historyStatus === 'all' ? undefined : historyStatus,
       }),
-  })
+  });
 
   return (
-    <div className="pt-4 space-y-4">
-      <div className="flex flex-col sm:flex-row gap-2">
-        <div className="relative flex-1">
-          <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+    <div className='pt-4 space-y-4'>
+      <div className='flex flex-col sm:flex-row gap-2'>
+        <div className='relative flex-1'>
+          <Search className='absolute left-2.5 top-2.5 size-4 text-muted-foreground' />
           <Input
-            type="text"
-            placeholder="输入事件键过滤..."
-            className="pl-8 text-xs h-9"
+            type='text'
+            placeholder='输入事件键过滤...'
+            className='pl-8 text-xs h-9'
             value={historySearch}
-            onChange={e => {
-              setHistorySearch(e.target.value)
-              setHistoryPage(1)
+            onChange={(e) => {
+              setHistorySearch(e.target.value);
+              setHistoryPage(1);
             }}
           />
         </div>
-        <div className="w-[150px]">
+        <div className='w-[150px]'>
           <Select
             value={historyStatus}
-            onValueChange={val => {
-              setHistoryStatus(val)
-              setHistoryPage(1)
+            onValueChange={(val) => {
+              setHistoryStatus(val);
+              setHistoryPage(1);
             }}
           >
-            <SelectTrigger className="text-xs h-9">
-              <SelectValue placeholder="发送状态" />
+            <SelectTrigger className='text-xs h-9'>
+              <SelectValue placeholder='发送状态' />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all" className="text-xs">全部状态</SelectItem>
-              <SelectItem value="success" className="text-xs">发送成功</SelectItem>
-              <SelectItem value="failed" className="text-xs">发送失败</SelectItem>
+              <SelectItem value='all' className='text-xs'>
+                全部状态
+              </SelectItem>
+              <SelectItem value='success' className='text-xs'>
+                发送成功
+              </SelectItem>
+              <SelectItem value='failed' className='text-xs'>
+                发送失败
+              </SelectItem>
             </SelectContent>
           </Select>
         </div>
         <Button
-          variant="outline"
-          size="icon"
-          className="h-9 w-9 shrink-0"
+          variant='outline'
+          size='icon'
+          className='h-9 w-9 shrink-0'
           onClick={() => historiesQuery.refetch()}
         >
-          <RefreshCw className={cn("size-3.5", historiesQuery.isFetching && "animate-spin")} />
+          <RefreshCw
+            className={cn(
+              'size-3.5',
+              historiesQuery.isFetching && 'animate-spin',
+            )}
+          />
         </Button>
       </div>
 
-      <div className="border rounded-lg overflow-hidden">
+      <div className='border rounded-lg overflow-hidden'>
         <Table>
           <TableHeader>
-            <TableRow className="bg-muted/30">
-              <TableHead className="text-xs font-semibold">事件</TableHead>
-              <TableHead className="text-xs font-semibold">渠道</TableHead>
-              <TableHead className="text-xs font-semibold">目标</TableHead>
-              <TableHead className="text-xs font-semibold">标题</TableHead>
-              <TableHead className="text-xs font-semibold">等级</TableHead>
-              <TableHead className="text-xs font-semibold">状态</TableHead>
-              <TableHead className="text-xs font-semibold">时间</TableHead>
+            <TableRow className='bg-muted/30'>
+              <TableHead className='text-xs font-semibold'>事件</TableHead>
+              <TableHead className='text-xs font-semibold'>渠道</TableHead>
+              <TableHead className='text-xs font-semibold'>目标</TableHead>
+              <TableHead className='text-xs font-semibold'>标题</TableHead>
+              <TableHead className='text-xs font-semibold'>等级</TableHead>
+              <TableHead className='text-xs font-semibold'>状态</TableHead>
+              <TableHead className='text-xs font-semibold'>时间</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {historiesQuery.isLoading ? (
               <TableRow>
-                <TableCell colSpan={7} className="h-32">
-                  <LoadingStateWithBorder icon={History} description="加载推送历史记录中..." className="border-0 shadow-none" />
+                <TableCell colSpan={7} className='h-32'>
+                  <LoadingStateWithBorder
+                    icon={History}
+                    description='加载推送历史记录中...'
+                    className='border-0 shadow-none'
+                  />
                 </TableCell>
               </TableRow>
             ) : historiesQuery.isError ? (
               <TableRow>
-                <TableCell colSpan={7} className="h-32">
-                  <ErrorInline error={historiesQuery.error} onRetry={() => historiesQuery.refetch()} className="justify-center" />
+                <TableCell colSpan={7} className='h-32'>
+                  <ErrorInline
+                    error={historiesQuery.error}
+                    onRetry={() => historiesQuery.refetch()}
+                    className='justify-center'
+                  />
                 </TableCell>
               </TableRow>
             ) : (historiesQuery.data?.results ?? []).length === 0 ? (
               <TableRow>
-                <TableCell colSpan={7} className="h-32 text-center text-xs text-muted-foreground">
+                <TableCell
+                  colSpan={7}
+                  className='h-32 text-center text-xs text-muted-foreground'
+                >
                   无推送历史数据
                 </TableCell>
               </TableRow>
             ) : (
-              (historiesQuery.data?.results ?? []).map(hist => (
+              (historiesQuery.data?.results ?? []).map((hist) => (
                 <TableRow
                   key={hist.id}
-                  className="hover:bg-muted/10 cursor-pointer transition-colors"
+                  className='hover:bg-muted/10 cursor-pointer transition-colors'
                   onClick={() => handleRowClick(hist)}
                 >
-                  <TableCell className="text-xs font-mono font-medium">{hist.event_key}</TableCell>
-                  <TableCell className="text-xs uppercase font-semibold text-muted-foreground">
-                    {hist.channel === "email" ? "邮件" : hist.channel}
+                  <TableCell className='text-xs font-mono font-medium'>
+                    {hist.event_key}
                   </TableCell>
-                  <TableCell className="text-xs font-mono text-muted-foreground max-w-[120px] truncate" title={hist.target}>
+                  <TableCell className='text-xs uppercase font-semibold text-muted-foreground'>
+                    {hist.channel === 'email' ? '邮件' : hist.channel}
+                  </TableCell>
+                  <TableCell
+                    className='text-xs font-mono text-muted-foreground max-w-[120px] truncate'
+                    title={hist.target}
+                  >
                     {hist.target}
                   </TableCell>
-                  <TableCell className="text-xs max-w-[180px] truncate" title={hist.content}>{hist.title}</TableCell>
-                  <TableCell className="text-xs">
-                    <Badge variant={getLevelBadgeVariant(hist.level)} className="text-[10px] font-semibold">
+                  <TableCell
+                    className='text-xs max-w-[180px] truncate'
+                    title={hist.content}
+                  >
+                    {hist.title}
+                  </TableCell>
+                  <TableCell className='text-xs'>
+                    <Badge
+                      variant={getLevelBadgeVariant(hist.level)}
+                      className='text-[10px] font-semibold'
+                    >
                       {hist.level}
                     </Badge>
                   </TableCell>
-                  <TableCell className="text-xs">
+                  <TableCell className='text-xs'>
                     <Badge
-                      variant={hist.status === "success" ? "secondary" : "destructive"}
-                      className="text-[10px] font-semibold"
+                      variant={
+                        hist.status === 'success' ? 'secondary' : 'destructive'
+                      }
+                      className='text-[10px] font-semibold'
                     >
-                      {hist.status === "success" ? "成功" : "失败"}
+                      {hist.status === 'success' ? '成功' : '失败'}
                     </Badge>
-                    {hist.status !== "success" && hist.error_msg && (
-                      <div className="text-[10px] text-muted-foreground font-mono truncate max-w-[180px] mt-1" title={hist.error_msg}>
+                    {hist.status !== 'success' && hist.error_msg && (
+                      <div
+                        className='text-[10px] text-muted-foreground font-mono truncate max-w-[180px] mt-1'
+                        title={hist.error_msg}
+                      >
                         {hist.error_msg}
                       </div>
                     )}
                   </TableCell>
-                  <TableCell className="text-[11px] text-muted-foreground whitespace-nowrap">
+                  <TableCell className='text-[11px] text-muted-foreground whitespace-nowrap'>
                     {new Date(hist.created_at).toLocaleString()}
                   </TableCell>
                 </TableRow>
@@ -184,27 +252,27 @@ export function HistoriesTab() {
       </div>
 
       {historiesQuery.data && historiesQuery.data.total > 0 && (
-        <div className="flex justify-between items-center text-xs text-muted-foreground">
+        <div className='flex justify-between items-center text-xs text-muted-foreground'>
           <span>共 {historiesQuery.data.total} 条历史记录</span>
-          <div className="flex items-center gap-1.5">
+          <div className='flex items-center gap-1.5'>
             <Button
-              variant="outline"
-              size="icon"
+              variant='outline'
+              size='icon'
               disabled={historyPage === 1}
-              onClick={() => setHistoryPage(p => Math.max(1, p - 1))}
-              className="h-8 w-8"
+              onClick={() => setHistoryPage((p) => Math.max(1, p - 1))}
+              className='h-8 w-8'
             >
-              <ChevronLeft className="size-4" />
+              <ChevronLeft className='size-4' />
             </Button>
-            <span className="text-xs font-medium px-2">{historyPage}</span>
+            <span className='text-xs font-medium px-2'>{historyPage}</span>
             <Button
-              variant="outline"
-              size="icon"
+              variant='outline'
+              size='icon'
               disabled={historyPage * 10 >= historiesQuery.data.total}
-              onClick={() => setHistoryPage(p => p + 1)}
-              className="h-8 w-8"
+              onClick={() => setHistoryPage((p) => p + 1)}
+              className='h-8 w-8'
             >
-              <ChevronRight className="size-4" />
+              <ChevronRight className='size-4' />
             </Button>
           </div>
         </div>
@@ -212,10 +280,10 @@ export function HistoriesTab() {
 
       {/* ==================== 对话框：推送详情 ==================== */}
       <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
-        <DialogContent className="sm:max-w-[550px] max-h-[85vh] overflow-y-auto">
+        <DialogContent className='sm:max-w-[550px] max-h-[85vh] overflow-y-auto'>
           <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <History className="size-5 text-primary" />
+            <DialogTitle className='flex items-center gap-2'>
+              <History className='size-5 text-primary' />
               推送通知详情
             </DialogTitle>
             <DialogDescription>
@@ -224,76 +292,109 @@ export function HistoriesTab() {
           </DialogHeader>
 
           {selectedHistory && (
-            <div className="space-y-4 py-4 text-xs">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">事件标识</span>
-                  <div className="font-mono bg-muted/40 p-2 rounded border">{selectedHistory.event_key}</div>
+            <div className='space-y-4 py-4 text-xs'>
+              <div className='grid grid-cols-2 gap-4'>
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    事件标识
+                  </span>
+                  <div className='font-mono bg-muted/40 p-2 rounded border'>
+                    {selectedHistory.event_key}
+                  </div>
                 </div>
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">发送渠道</span>
-                  <div className="bg-muted/40 p-2 rounded border uppercase font-medium">
-                    {selectedHistory.channel === "email" ? "邮件推送" : selectedHistory.channel}
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    发送渠道
+                  </span>
+                  <div className='bg-muted/40 p-2 rounded border uppercase font-medium'>
+                    {selectedHistory.channel === 'email'
+                      ? '邮件推送'
+                      : selectedHistory.channel}
                   </div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">推送目标</span>
-                  <div className="font-mono bg-muted/40 p-2 rounded border truncate" title={selectedHistory.target}>
+              <div className='grid grid-cols-2 gap-4'>
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    推送目标
+                  </span>
+                  <div
+                    className='font-mono bg-muted/40 p-2 rounded border truncate'
+                    title={selectedHistory.target}
+                  >
                     {selectedHistory.target}
                   </div>
                 </div>
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">发送时间</span>
-                  <div className="bg-muted/40 p-2 rounded border">
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    发送时间
+                  </span>
+                  <div className='bg-muted/40 p-2 rounded border'>
                     {new Date(selectedHistory.created_at).toLocaleString()}
                   </div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">通知等级</span>
+              <div className='grid grid-cols-2 gap-4'>
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    通知等级
+                  </span>
                   <div>
-                    <Badge variant={getLevelBadgeVariant(selectedHistory.level)} className="text-[10px] font-semibold py-0.5 px-2">
+                    <Badge
+                      variant={getLevelBadgeVariant(selectedHistory.level)}
+                      className='text-[10px] font-semibold py-0.5 px-2'
+                    >
                       {selectedHistory.level}
                     </Badge>
                   </div>
                 </div>
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-muted-foreground block">发送状态</span>
+                <div className='space-y-1.5'>
+                  <span className='font-semibold text-muted-foreground block'>
+                    发送状态
+                  </span>
                   <div>
                     <Badge
-                      variant={selectedHistory.status === "success" ? "secondary" : "destructive"}
-                      className="text-[10px] font-semibold py-0.5 px-2"
+                      variant={
+                        selectedHistory.status === 'success'
+                          ? 'secondary'
+                          : 'destructive'
+                      }
+                      className='text-[10px] font-semibold py-0.5 px-2'
                     >
-                      {selectedHistory.status === "success" ? "成功" : "失败"}
+                      {selectedHistory.status === 'success' ? '成功' : '失败'}
                     </Badge>
                   </div>
                 </div>
               </div>
 
-              {selectedHistory.status === "failed" && selectedHistory.error_msg && (
-                <div className="space-y-1.5">
-                  <span className="font-semibold text-destructive block">失败原因</span>
-                  <div className="font-mono text-destructive bg-destructive/10 p-2.5 rounded border border-destructive/20 whitespace-pre-wrap break-all">
-                    {selectedHistory.error_msg}
+              {selectedHistory.status === 'failed' &&
+                selectedHistory.error_msg && (
+                  <div className='space-y-1.5'>
+                    <span className='font-semibold text-destructive block'>
+                      失败原因
+                    </span>
+                    <div className='font-mono text-destructive bg-destructive/10 p-2.5 rounded border border-destructive/20 whitespace-pre-wrap break-all'>
+                      {selectedHistory.error_msg}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
 
-              <div className="space-y-1.5">
-                <span className="font-semibold text-muted-foreground block">通知标题</span>
-                <div className="bg-muted/30 p-2.5 rounded border font-medium text-[13px]">
+              <div className='space-y-1.5'>
+                <span className='font-semibold text-muted-foreground block'>
+                  通知标题
+                </span>
+                <div className='bg-muted/30 p-2.5 rounded border font-medium text-[13px]'>
                   {selectedHistory.title}
                 </div>
               </div>
 
-              <div className="space-y-1.5">
-                <span className="font-semibold text-muted-foreground block">通知内容</span>
-                <div className="bg-muted/30 p-3 rounded border whitespace-pre-wrap break-all leading-relaxed font-sans text-xs">
+              <div className='space-y-1.5'>
+                <span className='font-semibold text-muted-foreground block'>
+                  通知内容
+                </span>
+                <div className='bg-muted/30 p-3 rounded border whitespace-pre-wrap break-all leading-relaxed font-sans text-xs'>
                   {selectedHistory.content}
                 </div>
               </div>
@@ -301,12 +402,17 @@ export function HistoriesTab() {
           )}
 
           <DialogFooter>
-            <Button variant="outline" size="sm" onClick={() => setDetailOpen(false)} className="h-9 text-xs">
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => setDetailOpen(false)}
+              className='h-9 text-xs'
+            >
               关闭
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/push/page.tsx

@@ -1,65 +1,76 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import * as React from "react"
-import {motion} from "motion/react"
-import {Bell, History, Layers, Settings} from "lucide-react"
+import * as React from 'react';
+import { motion } from 'motion/react';
+import { Bell, History, Layers, Settings } from 'lucide-react';
 
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {EventsTab} from "./components/events-tab"
-import {HistoriesTab} from "./components/histories-tab"
-import {SettingsTab} from "./components/settings-tab"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EventsTab } from './components/events-tab';
+import { HistoriesTab } from './components/histories-tab';
+import { SettingsTab } from './components/settings-tab';
 
 export default function PushAdminPage() {
-  const [activeTab, setActiveTab] = React.useState("events")
+  const [activeTab, setActiveTab] = React.useState('events');
 
   return (
     <motion.div
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, ease: "easeOut" }}
-      className="w-full py-6 space-y-6"
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+      className='w-full py-6 space-y-6'
     >
-      <div className="flex items-center gap-2">
-        <Bell className="size-5 text-primary" />
+      <div className='flex items-center gap-2'>
+        <Bell className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">通知推送管理</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>
+            通知推送管理
+          </h1>
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8">
-          <TabsTrigger value="events" className="px-0 pb-2 text-xs font-semibold">
-            <Layers className="size-3.5 mr-1" />
+      <Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
+        <TabsList variant='line' className='w-fit inline-flex gap-8'>
+          <TabsTrigger
+            value='events'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
+            <Layers className='size-3.5 mr-1' />
             事件管理
           </TabsTrigger>
-          <TabsTrigger value="histories" className="px-0 pb-2 text-xs font-semibold">
-            <History className="size-3.5 mr-1" />
+          <TabsTrigger
+            value='histories'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
+            <History className='size-3.5 mr-1' />
             通知历史
           </TabsTrigger>
-          <TabsTrigger value="settings" className="px-0 pb-2 text-xs font-semibold">
-            <Settings className="size-3.5 mr-1" />
+          <TabsTrigger
+            value='settings'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
+            <Settings className='size-3.5 mr-1' />
             通道管理与设置
           </TabsTrigger>
         </TabsList>
 
         {/* ==================== 1. 事件管理 TAB ==================== */}
-        <TabsContent value="events" className="focus-visible:outline-none">
+        <TabsContent value='events' className='focus-visible:outline-none'>
           <EventsTab />
         </TabsContent>
 
         {/* ==================== 2. 通知历史 TAB ==================== */}
-        <TabsContent value="histories" className="focus-visible:outline-none">
+        <TabsContent value='histories' className='focus-visible:outline-none'>
           <HistoriesTab />
         </TabsContent>
 
         {/* ==================== 3. 通道管理与设置 TAB ==================== */}
-        <TabsContent value="settings" className="focus-visible:outline-none">
+        <TabsContent value='settings' className='focus-visible:outline-none'>
           <SettingsTab />
         </TabsContent>
       </Tabs>
     </motion.div>
-  )
+  );
 }

frontend/app/(main)/admin/settings/components/openflare-ops-utils.ts

@@ -1,183 +1,228 @@
-import type {OptionItem} from "@/lib/services/openflare"
+import type { OptionItem } from '@/lib/services/openflare';
 
 export type OpenFlareOpsFields = {
-  agent_heartbeat_interval: string
-  agent_websocket_upgrade_enabled: boolean
-  node_offline_threshold: string
-  agent_update_repo: string
-  geoip_provider: string
-  server_address: string
-  uptime_kuma_enabled: boolean
-  uptime_kuma_url: string
-  uptime_kuma_username: string
-  uptime_kuma_password: string
-  uptime_kuma_monitor_scope: string
-  uptime_kuma_selected_sites: string
-  uptime_kuma_sync_interval: string
-  uptime_kuma_interval: string
-  uptime_kuma_retry: string
-  uptime_kuma_retry_interval: string
-  uptime_kuma_timeout: string
-  database_auto_cleanup_enabled: boolean
-  database_auto_cleanup_retention_days: string
-}
+  agent_heartbeat_interval: string;
+  agent_websocket_upgrade_enabled: boolean;
+  node_offline_threshold: string;
+  agent_update_repo: string;
+  geoip_provider: string;
+  server_address: string;
+  uptime_kuma_enabled: boolean;
+  uptime_kuma_url: string;
+  uptime_kuma_username: string;
+  uptime_kuma_password: string;
+  uptime_kuma_monitor_scope: string;
+  uptime_kuma_selected_sites: string;
+  uptime_kuma_sync_interval: string;
+  uptime_kuma_interval: string;
+  uptime_kuma_retry: string;
+  uptime_kuma_retry_interval: string;
+  uptime_kuma_timeout: string;
+  database_auto_cleanup_enabled: boolean;
+  database_auto_cleanup_retention_days: string;
+};
 
 export const defaultOpenFlareOpsFields: OpenFlareOpsFields = {
-  agent_heartbeat_interval: "10000",
+  agent_heartbeat_interval: '10000',
   agent_websocket_upgrade_enabled: true,
-  node_offline_threshold: "120000",
-  agent_update_repo: "Rain-kl/OpenFlare",
-  geoip_provider: "ipinfo",
-  server_address: "",
+  node_offline_threshold: '120000',
+  agent_update_repo: 'Rain-kl/OpenFlare',
+  geoip_provider: 'ipinfo',
+  server_address: '',
   uptime_kuma_enabled: false,
-  uptime_kuma_url: "",
-  uptime_kuma_username: "",
-  uptime_kuma_password: "",
-  uptime_kuma_monitor_scope: "all",
-  uptime_kuma_selected_sites: "",
-  uptime_kuma_sync_interval: "5",
-  uptime_kuma_interval: "60",
-  uptime_kuma_retry: "0",
-  uptime_kuma_retry_interval: "60",
-  uptime_kuma_timeout: "48",
+  uptime_kuma_url: '',
+  uptime_kuma_username: '',
+  uptime_kuma_password: '',
+  uptime_kuma_monitor_scope: 'all',
+  uptime_kuma_selected_sites: '',
+  uptime_kuma_sync_interval: '5',
+  uptime_kuma_interval: '60',
+  uptime_kuma_retry: '0',
+  uptime_kuma_retry_interval: '60',
+  uptime_kuma_timeout: '48',
   database_auto_cleanup_enabled: false,
-  database_auto_cleanup_retention_days: "30",
-}
+  database_auto_cleanup_retention_days: '30',
+};
 
 export const INSTALLER_SCRIPT_URL =
-  "https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-agent.sh"
+  'https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-agent.sh';
 
 export function optionsToMap(options: OptionItem[]) {
   return options.reduce<Record<string, string>>((accumulator, option) => {
-    accumulator[option.key] = option.value
-    return accumulator
-  }, {})
+    accumulator[option.key] = option.value;
+    return accumulator;
+  }, {});
 }
 
 function toBoolean(value: string | undefined, fallback: boolean) {
-  if (value === undefined) return fallback
-  return value === "true"
+  if (value === undefined) return fallback;
+  return value === 'true';
 }
 
 export function mapOptionsToOpsFields(
   optionMap: Record<string, string>,
-  serverAddress = "",
+  serverAddress = '',
 ): OpenFlareOpsFields {
   return {
-    agent_heartbeat_interval: optionMap.agent_heartbeat_interval ?? "10000",
-    agent_websocket_upgrade_enabled: toBoolean(optionMap.agent_websocket_upgrade_enabled, true),
-    node_offline_threshold: optionMap.node_offline_threshold ?? "120000",
-    agent_update_repo: optionMap.agent_update_repo ?? "Rain-kl/OpenFlare",
-    geoip_provider: optionMap.geoip_provider ?? "ipinfo",
+    agent_heartbeat_interval: optionMap.agent_heartbeat_interval ?? '10000',
+    agent_websocket_upgrade_enabled: toBoolean(
+      optionMap.agent_websocket_upgrade_enabled,
+      true,
+    ),
+    node_offline_threshold: optionMap.node_offline_threshold ?? '120000',
+    agent_update_repo: optionMap.agent_update_repo ?? 'Rain-kl/OpenFlare',
+    geoip_provider: optionMap.geoip_provider ?? 'ipinfo',
     server_address: optionMap.server_address || serverAddress,
     uptime_kuma_enabled: toBoolean(optionMap.uptime_kuma_enabled, false),
-    uptime_kuma_url: optionMap.uptime_kuma_url ?? "",
-    uptime_kuma_username: optionMap.uptime_kuma_username ?? "",
-    uptime_kuma_password: "",
-    uptime_kuma_monitor_scope: optionMap.uptime_kuma_monitor_scope ?? "all",
-    uptime_kuma_selected_sites: optionMap.uptime_kuma_selected_sites ?? "",
-    uptime_kuma_sync_interval: optionMap.uptime_kuma_sync_interval ?? "5",
-    uptime_kuma_interval: optionMap.uptime_kuma_interval ?? "60",
-    uptime_kuma_retry: optionMap.uptime_kuma_retry ?? "0",
-    uptime_kuma_retry_interval: optionMap.uptime_kuma_retry_interval ?? "60",
-    uptime_kuma_timeout: optionMap.uptime_kuma_timeout ?? "48",
-    database_auto_cleanup_enabled: toBoolean(optionMap.database_auto_cleanup_enabled, false),
-    database_auto_cleanup_retention_days: optionMap.database_auto_cleanup_retention_days ?? "30",
-  }
+    uptime_kuma_url: optionMap.uptime_kuma_url ?? '',
+    uptime_kuma_username: optionMap.uptime_kuma_username ?? '',
+    uptime_kuma_password: '',
+    uptime_kuma_monitor_scope: optionMap.uptime_kuma_monitor_scope ?? 'all',
+    uptime_kuma_selected_sites: optionMap.uptime_kuma_selected_sites ?? '',
+    uptime_kuma_sync_interval: optionMap.uptime_kuma_sync_interval ?? '5',
+    uptime_kuma_interval: optionMap.uptime_kuma_interval ?? '60',
+    uptime_kuma_retry: optionMap.uptime_kuma_retry ?? '0',
+    uptime_kuma_retry_interval: optionMap.uptime_kuma_retry_interval ?? '60',
+    uptime_kuma_timeout: optionMap.uptime_kuma_timeout ?? '48',
+    database_auto_cleanup_enabled: toBoolean(
+      optionMap.database_auto_cleanup_enabled,
+      false,
+    ),
+    database_auto_cleanup_retention_days:
+      optionMap.database_auto_cleanup_retention_days ?? '30',
+  };
 }
 
 export function formatDurationLabel(value: string) {
-  const milliseconds = Number.parseInt(value, 10)
-  if (Number.isNaN(milliseconds)) return value
-  if (milliseconds >= 60000) return `${milliseconds / 60000} 分钟`
-  return `${milliseconds / 1000} 秒`
+  const milliseconds = Number.parseInt(value, 10);
+  if (Number.isNaN(milliseconds)) return value;
+  if (milliseconds >= 60000) return `${milliseconds / 60000} 分钟`;
+  return `${milliseconds / 1000} 秒`;
 }
 
 export function normalizeServerUrl(value: string) {
-  return value.trim().replace(/\/+$/, "")
+  return value.trim().replace(/\/+$/, '');
 }
 
 export function getBrowserOrigin() {
-  if (typeof window === "undefined") return ""
-  return normalizeServerUrl(window.location.origin)
+  if (typeof window === 'undefined') return '';
+  return normalizeServerUrl(window.location.origin);
 }
 
-export function buildDiscoveryCommand(serverUrl: string, discoveryToken: string) {
+export function buildDiscoveryCommand(
+  serverUrl: string,
+  discoveryToken: string,
+) {
   return [
     `curl -fsSL ${INSTALLER_SCRIPT_URL} | bash -s -- \\`,
     `  --server-url ${normalizeServerUrl(serverUrl)} \\`,
     `  --discovery-token ${discoveryToken}`,
-  ].join("\n")
+  ].join('\n');
 }
 
 export function validateAgentFields(fields: OpenFlareOpsFields) {
-  const heartbeat = Number.parseInt(fields.agent_heartbeat_interval, 10)
-  const offline = Number.parseInt(fields.node_offline_threshold, 10)
+  const heartbeat = Number.parseInt(fields.agent_heartbeat_interval, 10);
+  const offline = Number.parseInt(fields.node_offline_threshold, 10);
   if (Number.isNaN(heartbeat) || heartbeat < 5000) {
-    throw new Error("心跳间隔不能小于 5000 毫秒。")
+    throw new Error('心跳间隔不能小于 5000 毫秒。');
   }
   if (Number.isNaN(offline) || offline < 10000) {
-    throw new Error("离线阈值不能小于 10000 毫秒。")
+    throw new Error('离线阈值不能小于 10000 毫秒。');
   }
 }
 
 export function validateUptimeKumaFields(fields: OpenFlareOpsFields) {
-  const syncInt = Number.parseInt(fields.uptime_kuma_sync_interval, 10)
-  const interval = Number.parseInt(fields.uptime_kuma_interval, 10)
-  const retry = Number.parseInt(fields.uptime_kuma_retry, 10)
-  const retryInt = Number.parseInt(fields.uptime_kuma_retry_interval, 10)
-  const timeout = Number.parseInt(fields.uptime_kuma_timeout, 10)
+  const syncInt = Number.parseInt(fields.uptime_kuma_sync_interval, 10);
+  const interval = Number.parseInt(fields.uptime_kuma_interval, 10);
+  const retry = Number.parseInt(fields.uptime_kuma_retry, 10);
+  const retryInt = Number.parseInt(fields.uptime_kuma_retry_interval, 10);
+  const timeout = Number.parseInt(fields.uptime_kuma_timeout, 10);
 
   if (fields.uptime_kuma_enabled) {
-    if (!fields.uptime_kuma_url.trim()) throw new Error("请输入 Uptime Kuma 地址。")
-    if (!fields.uptime_kuma_username.trim()) throw new Error("请输入 Uptime Kuma 用户名。")
+    if (!fields.uptime_kuma_url.trim())
+      throw new Error('请输入 Uptime Kuma 地址。');
+    if (!fields.uptime_kuma_username.trim())
+      throw new Error('请输入 Uptime Kuma 用户名。');
   }
-  if (Number.isNaN(syncInt) || syncInt <= 0) throw new Error("同步间隔必须为正整数。")
-  if (Number.isNaN(interval) || interval <= 0) throw new Error("心跳间隔必须为正整数。")
-  if (Number.isNaN(retry) || retry < 0) throw new Error("重试次数必须为非负整数。")
-  if (Number.isNaN(retryInt) || retryInt <= 0) throw new Error("心跳重试间隔必须为正整数。")
-  if (Number.isNaN(timeout) || timeout <= 0) throw new Error("请求超时必须为正整数。")
+  if (Number.isNaN(syncInt) || syncInt <= 0)
+    throw new Error('同步间隔必须为正整数。');
+  if (Number.isNaN(interval) || interval <= 0)
+    throw new Error('心跳间隔必须为正整数。');
+  if (Number.isNaN(retry) || retry < 0)
+    throw new Error('重试次数必须为非负整数。');
+  if (Number.isNaN(retryInt) || retryInt <= 0)
+    throw new Error('心跳重试间隔必须为正整数。');
+  if (Number.isNaN(timeout) || timeout <= 0)
+    throw new Error('请求超时必须为正整数。');
 }
 
 export function validateDatabaseAutoCleanup(fields: OpenFlareOpsFields) {
-  const retentionDays = Number.parseInt(fields.database_auto_cleanup_retention_days, 10)
+  const retentionDays = Number.parseInt(
+    fields.database_auto_cleanup_retention_days,
+    10,
+  );
   if (Number.isNaN(retentionDays) || retentionDays < 1) {
-    throw new Error("自动清理保留天数至少为 1 天。")
+    throw new Error('自动清理保留天数至少为 1 天。');
   }
 }
 
 export function agentOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateAgentFields(fields)
+  validateAgentFields(fields);
   return [
-    { key: "agent_heartbeat_interval", value: fields.agent_heartbeat_interval },
-    { key: "agent_websocket_upgrade_enabled", value: String(fields.agent_websocket_upgrade_enabled) },
-    { key: "node_offline_threshold", value: fields.node_offline_threshold },
-    { key: "agent_update_repo", value: fields.agent_update_repo.trim() },
-    { key: "geoip_provider", value: fields.geoip_provider },
-  ]
+    { key: 'agent_heartbeat_interval', value: fields.agent_heartbeat_interval },
+    {
+      key: 'agent_websocket_upgrade_enabled',
+      value: String(fields.agent_websocket_upgrade_enabled),
+    },
+    { key: 'node_offline_threshold', value: fields.node_offline_threshold },
+    { key: 'agent_update_repo', value: fields.agent_update_repo.trim() },
+    { key: 'geoip_provider', value: fields.geoip_provider },
+  ];
 }
 
-export function uptimeKumaOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateUptimeKumaFields(fields)
+export function uptimeKumaOptionEntries(
+  fields: OpenFlareOpsFields,
+): OptionItem[] {
+  validateUptimeKumaFields(fields);
   return [
-    { key: "uptime_kuma_enabled", value: String(fields.uptime_kuma_enabled) },
-    { key: "uptime_kuma_url", value: fields.uptime_kuma_url.trim() },
-    { key: "uptime_kuma_username", value: fields.uptime_kuma_username.trim() },
-    { key: "uptime_kuma_password", value: fields.uptime_kuma_password },
-    { key: "uptime_kuma_monitor_scope", value: fields.uptime_kuma_monitor_scope },
-    { key: "uptime_kuma_selected_sites", value: fields.uptime_kuma_selected_sites },
-    { key: "uptime_kuma_sync_interval", value: fields.uptime_kuma_sync_interval },
-    { key: "uptime_kuma_interval", value: fields.uptime_kuma_interval },
-    { key: "uptime_kuma_retry", value: fields.uptime_kuma_retry },
-    { key: "uptime_kuma_retry_interval", value: fields.uptime_kuma_retry_interval },
-    { key: "uptime_kuma_timeout", value: fields.uptime_kuma_timeout },
-  ]
+    { key: 'uptime_kuma_enabled', value: String(fields.uptime_kuma_enabled) },
+    { key: 'uptime_kuma_url', value: fields.uptime_kuma_url.trim() },
+    { key: 'uptime_kuma_username', value: fields.uptime_kuma_username.trim() },
+    { key: 'uptime_kuma_password', value: fields.uptime_kuma_password },
+    {
+      key: 'uptime_kuma_monitor_scope',
+      value: fields.uptime_kuma_monitor_scope,
+    },
+    {
+      key: 'uptime_kuma_selected_sites',
+      value: fields.uptime_kuma_selected_sites,
+    },
+    {
+      key: 'uptime_kuma_sync_interval',
+      value: fields.uptime_kuma_sync_interval,
+    },
+    { key: 'uptime_kuma_interval', value: fields.uptime_kuma_interval },
+    { key: 'uptime_kuma_retry', value: fields.uptime_kuma_retry },
+    {
+      key: 'uptime_kuma_retry_interval',
+      value: fields.uptime_kuma_retry_interval,
+    },
+    { key: 'uptime_kuma_timeout', value: fields.uptime_kuma_timeout },
+  ];
 }
 
-export function databaseAutoCleanupEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateDatabaseAutoCleanup(fields)
+export function databaseAutoCleanupEntries(
+  fields: OpenFlareOpsFields,
+): OptionItem[] {
+  validateDatabaseAutoCleanup(fields);
   return [
-    { key: "database_auto_cleanup_enabled", value: String(fields.database_auto_cleanup_enabled) },
-    { key: "database_auto_cleanup_retention_days", value: fields.database_auto_cleanup_retention_days },
-  ]
+    {
+      key: 'database_auto_cleanup_enabled',
+      value: String(fields.database_auto_cleanup_enabled),
+    },
+    {
+      key: 'database_auto_cleanup_retention_days',
+      value: fields.database_auto_cleanup_retention_days,
+    },
+  ];
 }

frontend/app/(main)/admin/settings/components/system-status.tsx

@@ -1,206 +1,242 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useCallback, useEffect, useRef, useState} from "react"
-import {toast} from "sonner"
-import {Activity, Cpu, Database, HardDrive, Layers, RefreshCw} from "lucide-react"
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Switch} from "@/components/ui/switch"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import {Badge} from "@/components/ui/badge"
-import {Progress} from "@/components/ui/progress"
-import {Skeleton} from "@/components/ui/skeleton"
-import type {SystemStatus} from "@/lib/services/admin"
-import services from "@/lib/services"
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Activity,
+  Cpu,
+  Database,
+  HardDrive,
+  Layers,
+  RefreshCw,
+} from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { SystemStatus } from '@/lib/services/admin';
+import services from '@/lib/services';
 
 /**
  * 格式化数字，每3位加逗号
  */
 const formatNumber = (num: number | string) => {
-  if (num === undefined || num === null) return "0"
-  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
-}
+  if (num === undefined || num === null) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ',');
+};
 
 /**
  * 运行时系统状态展示与管理组件
  */
 export function SystemStatusManager() {
-  const [status, setStatus] = useState<SystemStatus | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [wavelet, setWavelet] = useState(false)
-  const [autoRefresh, setAutoRefresh] = useState(true)
-  const [intervalTime, setIntervalTime] = useState("5000") // 默认5秒
+  const [status, setStatus] = useState<SystemStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [wavelet, setWavelet] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [intervalTime, setIntervalTime] = useState('5000'); // 默认5秒
 
-  const intervalRef = useRef<NodeJS.Timeout | null>(null)
-  const prevStatusRef = useRef<SystemStatus | null>(null)
-  const [changedFields, setChangedFields] = useState<Record<string, boolean>>({})
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const prevStatusRef = useRef<SystemStatus | null>(null);
+  const [changedFields, setChangedFields] = useState<Record<string, boolean>>(
+    {},
+  );
 
   // 获取状态数据
   const fetchStatus = useCallback(async (isSilent = false) => {
-    if (!isSilent) setWavelet(true)
+    if (!isSilent) setWavelet(true);
     try {
-      const data = await services.adminStatus.getSystemStatus()
+      const data = await services.adminStatus.getSystemStatus();
 
       // 检测变化的字段用于微动画效果
       if (prevStatusRef.current) {
-        const changes: Record<string, boolean> = {}
+        const changes: Record<string, boolean> = {};
         Object.keys(data).forEach((key) => {
-          const k = key as keyof SystemStatus
+          const k = key as keyof SystemStatus;
           if (prevStatusRef.current && prevStatusRef.current[k] !== data[k]) {
-            changes[k] = true
+            changes[k] = true;
           }
-        })
-        setChangedFields(changes)
+        });
+        setChangedFields(changes);
         // 1秒后清除变化状态
         setTimeout(() => {
-          setChangedFields({})
-        }, 1000)
+          setChangedFields({});
+        }, 1000);
       }
 
-      setStatus(data)
-      prevStatusRef.current = data
+      setStatus(data);
+      prevStatusRef.current = data;
     } catch (err) {
-      toast.error("获取系统状态失败", {
-        description: err instanceof Error ? err.message : "请求时发生未知错误"
-      })
+      toast.error('获取系统状态失败', {
+        description: err instanceof Error ? err.message : '请求时发生未知错误',
+      });
     } finally {
-      setLoading(false)
-      setWavelet(false)
+      setLoading(false);
+      setWavelet(false);
     }
-  }, [])
+  }, []);
 
   // 轮询逻辑
   useEffect(() => {
     // 首次加载
-    fetchStatus()
-  }, [fetchStatus])
+    fetchStatus();
+  }, [fetchStatus]);
 
   useEffect(() => {
     if (intervalRef.current) {
-      clearInterval(intervalRef.current)
+      clearInterval(intervalRef.current);
     }
 
     if (autoRefresh) {
-      const time = parseInt(intervalTime, 10)
+      const time = parseInt(intervalTime, 10);
       intervalRef.current = setInterval(() => {
-        fetchStatus(true)
-      }, time)
+        fetchStatus(true);
+      }, time);
     }
 
     return () => {
       if (intervalRef.current) {
-        clearInterval(intervalRef.current)
+        clearInterval(intervalRef.current);
       }
-    }
-  }, [autoRefresh, intervalTime, fetchStatus])
+    };
+  }, [autoRefresh, intervalTime, fetchStatus]);
 
   // 计算内存分配百分比 (Alloc / Sys)
   const getMemoryUsagePercent = () => {
-    if (!status) return 0
+    if (!status) return 0;
 
     const parseSizeToBytes = (sizeStr: string): number => {
-      const parts = sizeStr.split(" ")
-      if (parts.length < 2) return 0
-      const value = parseFloat(parts[0])
-      const unit = parts[1].toLowerCase()
+      const parts = sizeStr.split(' ');
+      if (parts.length < 2) return 0;
+      const value = parseFloat(parts[0]);
+      const unit = parts[1].toLowerCase();
 
-      if (unit.startsWith("gib")) return value * 1024 * 1024 * 1024
-      if (unit.startsWith("mib")) return value * 1024 * 1024
-      if (unit.startsWith("kib")) return value * 1024
-      return value
-    }
+      if (unit.startsWith('gib')) return value * 1024 * 1024 * 1024;
+      if (unit.startsWith('mib')) return value * 1024 * 1024;
+      if (unit.startsWith('kib')) return value * 1024;
+      return value;
+    };
 
-    const alloc = parseSizeToBytes(status.alloc)
-    const sys = parseSizeToBytes(status.sys)
-    if (sys === 0) return 0
-    return Math.min(Math.round((alloc / sys) * 100), 100)
-  }
+    const alloc = parseSizeToBytes(status.alloc);
+    const sys = parseSizeToBytes(status.sys);
+    if (sys === 0) return 0;
+    return Math.min(Math.round((alloc / sys) * 100), 100);
+  };
 
   // 闪烁动画类
   const getPulseClass = (field: string) => {
-    return changedFields[field] ? "animate-pulse text-primary font-bold transition-all duration-300 scale-105 inline-block" : "transition-all duration-300"
-  }
+    return changedFields[field]
+      ? 'animate-pulse text-primary font-bold transition-all duration-300 scale-105 inline-block'
+      : 'transition-all duration-300';
+  };
 
-  const RenderMetricRow = ({ label, value, field }: { label: string; value: string | number; field?: string }) => (
-    <div className="flex items-center justify-between py-2 border-b border-dashed border-border/40 last:border-b-0 hover:bg-muted/30 px-2 rounded-sm transition-colors duration-150">
-      <span className="text-xs font-medium text-muted-foreground">{label}</span>
-      <span className={`text-xs font-mono font-medium ${field ? getPulseClass(field) : ""}`}>
-        {typeof value === "number" ? formatNumber(value) : value}
+  const RenderMetricRow = ({
+    label,
+    value,
+    field,
+  }: {
+    label: string;
+    value: string | number;
+    field?: string;
+  }) => (
+    <div className='flex items-center justify-between py-2 border-b border-dashed border-border/40 last:border-b-0 hover:bg-muted/30 px-2 rounded-sm transition-colors duration-150'>
+      <span className='text-xs font-medium text-muted-foreground'>{label}</span>
+      <span
+        className={`text-xs font-mono font-medium ${field ? getPulseClass(field) : ''}`}
+      >
+        {typeof value === 'number' ? formatNumber(value) : value}
       </span>
     </div>
-  )
+  );
 
   if (loading) {
     return (
-      <div className="space-y-6 p-1">
-        <div className="flex items-center justify-between border-b border-border/40 pb-4">
-          <div className="space-y-1">
-            <Skeleton className="h-6 w-32" />
-            <Skeleton className="h-4 w-48" />
+      <div className='space-y-6 p-1'>
+        <div className='flex items-center justify-between border-b border-border/40 pb-4'>
+          <div className='space-y-1'>
+            <Skeleton className='h-6 w-32' />
+            <Skeleton className='h-4 w-48' />
           </div>
-          <div className="flex items-center gap-3">
-            <Skeleton className="h-8 w-24" />
-            <Skeleton className="h-8 w-16" />
-            <Skeleton className="h-8 w-8" />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-8 w-24' />
+            <Skeleton className='h-8 w-16' />
+            <Skeleton className='h-8 w-8' />
           </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className="py-6 px-1 space-y-6">
+    <div className='py-6 px-1 space-y-6'>
       {/* 顶部控制栏 */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4">
-        <div className="flex items-center gap-2">
-          <Activity className="size-5 text-primary" />
+      <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4'>
+        <div className='flex items-center gap-2'>
+          <Activity className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">系统状态</h1>
+            <h1 className='text-2xl font-semibold tracking-tight'>系统状态</h1>
           </div>
         </div>
 
-        <div className="flex items-center flex-wrap gap-4 bg-muted/30 p-1.5 rounded-lg border border-border/40 backdrop-blur-sm">
-          <div className="flex items-center gap-2 px-1">
+        <div className='flex items-center flex-wrap gap-4 bg-muted/30 p-1.5 rounded-lg border border-border/40 backdrop-blur-sm'>
+          <div className='flex items-center gap-2 px-1'>
             <Switch
-              id="auto-refresh"
+              id='auto-refresh'
               checked={autoRefresh}
               onCheckedChange={setAutoRefresh}
             />
-            <label htmlFor="auto-refresh" className="text-xs font-medium cursor-pointer select-none">
+            <label
+              htmlFor='auto-refresh'
+              className='text-xs font-medium cursor-pointer select-none'
+            >
               自动刷新
             </label>
           </div>
 
           {autoRefresh && (
             <Select value={intervalTime} onValueChange={setIntervalTime}>
-              <SelectTrigger className="h-7 w-20 text-[11px] bg-background border-border/40">
+              <SelectTrigger className='h-7 w-20 text-[11px] bg-background border-border/40'>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="1000">1s</SelectItem>
-                <SelectItem value="2000">2s</SelectItem>
-                <SelectItem value="5000">5s</SelectItem>
-                <SelectItem value="10000">10s</SelectItem>
+                <SelectItem value='1000'>1s</SelectItem>
+                <SelectItem value='2000'>2s</SelectItem>
+                <SelectItem value='5000'>5s</SelectItem>
+                <SelectItem value='10000'>10s</SelectItem>
               </SelectContent>
             </Select>
           )}
 
           <Button
-            size="sm"
-            variant="secondary"
-            className="h-7 text-[11px] gap-1.5"
+            size='sm'
+            variant='secondary'
+            className='h-7 text-[11px] gap-1.5'
             onClick={() => fetchStatus()}
             disabled={wavelet}
           >
-            <RefreshCw className={`size-3 ${wavelet ? "animate-spin" : ""}`} />
+            <RefreshCw className={`size-3 ${wavelet ? 'animate-spin' : ''}`} />
             刷新
           </Button>
         </div>
@@ -209,130 +245,277 @@ export function SystemStatusManager() {
       {status && (
         <>
           {/* 主网格排版 */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
             {/* 1. 服务概览 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">服务概览</CardTitle>
-                  <CardDescription className="text-[10px]">服务的基础生命指标</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    服务概览
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    服务的基础生命指标
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Activity className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Activity className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="服务运行时间" value={status.uptime} field="uptime" />
-                <RenderMetricRow label="当前 Goroutines 数量" value={status.num_goroutine} field="num_goroutine" />
-                <RenderMetricRow label="Heap 对象数量" value={status.heap_objects} field="heap_objects" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='服务运行时间'
+                  value={status.uptime}
+                  field='uptime'
+                />
+                <RenderMetricRow
+                  label='当前 Goroutines 数量'
+                  value={status.num_goroutine}
+                  field='num_goroutine'
+                />
+                <RenderMetricRow
+                  label='Heap 对象数量'
+                  value={status.heap_objects}
+                  field='heap_objects'
+                />
               </CardContent>
             </Card>
 
             {/* 2. 内存统计 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">内存统计</CardTitle>
-                  <CardDescription className="text-[10px]">主内存消耗概览</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    内存统计
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    主内存消耗概览
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Cpu className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Cpu className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="space-y-1">
-                  <RenderMetricRow label="当前内存使用量" value={status.alloc} field="alloc" />
-                  <RenderMetricRow label="所有已分配的内存" value={status.total_alloc} field="total_alloc" />
-                  <RenderMetricRow label="内存占用量" value={status.sys} field="sys" />
-                  <RenderMetricRow label="下次 GC 内存回收量" value={status.next_gc} field="next_gc" />
+              <CardContent className='space-y-3'>
+                <div className='space-y-1'>
+                  <RenderMetricRow
+                    label='当前内存使用量'
+                    value={status.alloc}
+                    field='alloc'
+                  />
+                  <RenderMetricRow
+                    label='所有已分配的内存'
+                    value={status.total_alloc}
+                    field='total_alloc'
+                  />
+                  <RenderMetricRow
+                    label='内存占用量'
+                    value={status.sys}
+                    field='sys'
+                  />
+                  <RenderMetricRow
+                    label='下次 GC 内存回收量'
+                    value={status.next_gc}
+                    field='next_gc'
+                  />
                 </div>
                 {/* 物理内存水位比例 */}
-                <div className="space-y-1 px-1 pt-1">
-                  <div className="flex justify-between text-[10px] text-muted-foreground">
+                <div className='space-y-1 px-1 pt-1'>
+                  <div className='flex justify-between text-[10px] text-muted-foreground'>
                     <span>当前使用率 (Alloc / Sys)</span>
-                    <span className="font-mono">{getMemoryUsagePercent()}%</span>
+                    <span className='font-mono'>
+                      {getMemoryUsagePercent()}%
+                    </span>
                   </div>
-                  <Progress value={getMemoryUsagePercent()} className="h-1.5" />
+                  <Progress value={getMemoryUsagePercent()} className='h-1.5' />
                 </div>
               </CardContent>
             </Card>
 
             {/* 3. 堆/栈详情 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">堆/栈详情</CardTitle>
-                  <CardDescription className="text-[10px]">运行时堆栈内存空间细节</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    堆/栈详情
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    运行时堆栈内存空间细节
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Database className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Database className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="当前 Heap 内存使用量" value={status.heap_alloc} field="heap_alloc" />
-                <RenderMetricRow label="Heap 内存占用量" value={status.heap_sys} field="heap_sys" />
-                <RenderMetricRow label="Heap 内存空闲量" value={status.heap_idle} field="heap_idle" />
-                <RenderMetricRow label="正在使用的 Heap 内存" value={status.heap_inuse} field="heap_inuse" />
-                <RenderMetricRow label="已释放的 Heap 内存" value={status.heap_released} field="heap_released" />
-                <RenderMetricRow label="启动 Stack 使用量" value={status.stack_inuse} field="stack_inuse" />
-                <RenderMetricRow label="已分配的 Stack 内存" value={status.stack_sys} field="stack_sys" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='当前 Heap 内存使用量'
+                  value={status.heap_alloc}
+                  field='heap_alloc'
+                />
+                <RenderMetricRow
+                  label='Heap 内存占用量'
+                  value={status.heap_sys}
+                  field='heap_sys'
+                />
+                <RenderMetricRow
+                  label='Heap 内存空闲量'
+                  value={status.heap_idle}
+                  field='heap_idle'
+                />
+                <RenderMetricRow
+                  label='正在使用的 Heap 内存'
+                  value={status.heap_inuse}
+                  field='heap_inuse'
+                />
+                <RenderMetricRow
+                  label='已释放的 Heap 内存'
+                  value={status.heap_released}
+                  field='heap_released'
+                />
+                <RenderMetricRow
+                  label='启动 Stack 使用量'
+                  value={status.stack_inuse}
+                  field='stack_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 Stack 内存'
+                  value={status.stack_sys}
+                  field='stack_sys'
+                />
               </CardContent>
             </Card>
 
             {/* 4. 底层组件与结构体 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">底层及结构体内存</CardTitle>
-                  <CardDescription className="text-[10px]">运行时底层管理结构体开销</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    底层及结构体内存
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    运行时底层管理结构体开销
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <HardDrive className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <HardDrive className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="MSpan 结构内存使用量" value={status.mspan_inuse} field="mspan_inuse" />
-                <RenderMetricRow label="已分配的 MSpan 结构内存" value={status.mspan_sys} field="mspan_sys" />
-                <RenderMetricRow label="MCache 结构内存使用量" value={status.mcache_inuse} field="mcache_inuse" />
-                <RenderMetricRow label="已分配的 MCache 结构内存" value={status.mcache_sys} field="mcache_sys" />
-                <RenderMetricRow label="已分配的剖析哈希表内存" value={status.buck_hash_sys} field="buck_hash_sys" />
-                <RenderMetricRow label="已分配的 GC 元数据内存" value={status.gc_sys} field="gc_sys" />
-                <RenderMetricRow label="其它已分配的系统内存" value={status.other_sys} field="other_sys" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='MSpan 结构内存使用量'
+                  value={status.mspan_inuse}
+                  field='mspan_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 MSpan 结构内存'
+                  value={status.mspan_sys}
+                  field='mspan_sys'
+                />
+                <RenderMetricRow
+                  label='MCache 结构内存使用量'
+                  value={status.mcache_inuse}
+                  field='mcache_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 MCache 结构内存'
+                  value={status.mcache_sys}
+                  field='mcache_sys'
+                />
+                <RenderMetricRow
+                  label='已分配的剖析哈希表内存'
+                  value={status.buck_hash_sys}
+                  field='buck_hash_sys'
+                />
+                <RenderMetricRow
+                  label='已分配的 GC 元数据内存'
+                  value={status.gc_sys}
+                  field='gc_sys'
+                />
+                <RenderMetricRow
+                  label='其它已分配的系统内存'
+                  value={status.other_sys}
+                  field='other_sys'
+                />
               </CardContent>
             </Card>
 
             {/* 5. 垃圾回收与分配计数 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300 md:col-span-2">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">垃圾回收与分配计数</CardTitle>
-                  <CardDescription className="text-[10px]">GC 历史数据与分配频次</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300 md:col-span-2'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    垃圾回收与分配计数
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    GC 历史数据与分配频次
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Layers className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Layers className='size-4' />
                 </Badge>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
+                <div className='grid grid-cols-1 sm:grid-cols-2 gap-x-6'>
                   <div>
-                    <RenderMetricRow label="GC 执行次数" value={status.num_gc} field="num_gc" />
-                    <RenderMetricRow label="距离上次 GC 时间" value={status.last_gc_time} field="last_gc_time" />
-                    <RenderMetricRow label="GC 暂停时间总量" value={status.pause_total_ns} field="pause_total_ns" />
-                    <RenderMetricRow label="上次 GC 暂停时间" value={status.last_pause} field="last_pause" />
+                    <RenderMetricRow
+                      label='GC 执行次数'
+                      value={status.num_gc}
+                      field='num_gc'
+                    />
+                    <RenderMetricRow
+                      label='距离上次 GC 时间'
+                      value={status.last_gc_time}
+                      field='last_gc_time'
+                    />
+                    <RenderMetricRow
+                      label='GC 暂停时间总量'
+                      value={status.pause_total_ns}
+                      field='pause_total_ns'
+                    />
+                    <RenderMetricRow
+                      label='上次 GC 暂停时间'
+                      value={status.last_pause}
+                      field='last_pause'
+                    />
                   </div>
                   <div>
-                    <RenderMetricRow label="内存分配次数" value={status.mallocs} field="mallocs" />
-                    <RenderMetricRow label="内存释放次数" value={status.frees} field="frees" />
-                    <RenderMetricRow label="指针查找次数" value={status.lookups} field="lookups" />
+                    <RenderMetricRow
+                      label='内存分配次数'
+                      value={status.mallocs}
+                      field='mallocs'
+                    />
+                    <RenderMetricRow
+                      label='内存释放次数'
+                      value={status.frees}
+                      field='frees'
+                    />
+                    <RenderMetricRow
+                      label='指针查找次数'
+                      value={status.lookups}
+                      field='lookups'
+                    />
                   </div>
                 </div>
               </CardContent>
             </Card>
-
           </div>
         </>
       )}
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/settings/components/uptimekuma-site-modal.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import {useEffect, useMemo, useState} from "react"
-import {useQuery} from "@tanstack/react-query"
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import {Button} from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -11,17 +11,17 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {ProxyRouteService} from "@/lib/services/openflare"
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ProxyRouteService } from '@/lib/services/openflare';
 
 type UptimeKumaSiteSelectModalProps = {
-  open: boolean
-  selectedSites: string[]
-  onOpenChange: (open: boolean) => void
-  onSave: (sites: string[]) => void
-}
+  open: boolean;
+  selectedSites: string[];
+  onOpenChange: (open: boolean) => void;
+  onSave: (sites: string[]) => void;
+};
 
 export function UptimeKumaSiteSelectModal({
   open,
@@ -29,60 +29,66 @@ export function UptimeKumaSiteSelectModal({
   onOpenChange,
   onSave,
 }: UptimeKumaSiteSelectModalProps) {
-  const [searchTerm, setSearchTerm] = useState("")
-  const [tempSelected, setTempSelected] = useState<Set<string>>(new Set())
+  const [searchTerm, setSearchTerm] = useState('');
+  const [tempSelected, setTempSelected] = useState<Set<string>>(new Set());
 
   const routesQuery = useQuery({
-    queryKey: ["openflare", "proxy-routes"],
+    queryKey: ['openflare', 'proxy-routes'],
     queryFn: () => ProxyRouteService.list(),
     enabled: open,
-  })
+  });
 
   useEffect(() => {
-    if (!open) return
-    setTempSelected(new Set(selectedSites.map((site) => site.trim()).filter(Boolean)))
-    setSearchTerm("")
-  }, [open, selectedSites])
+    if (!open) return;
+    setTempSelected(
+      new Set(selectedSites.map((site) => site.trim()).filter(Boolean)),
+    );
+    setSearchTerm('');
+  }, [open, selectedSites]);
 
   const filteredRoutes = useMemo(() => {
-    const routes = routesQuery.data ?? []
-    const keyword = searchTerm.trim().toLowerCase()
-    if (!keyword) return routes
-    return routes.filter(
-      (route) =>
+    const routes = routesQuery.data ?? [];
+    const keyword = searchTerm.trim().toLowerCase();
+    if (!keyword) return routes;
+    return routes.filter((route) => {
+      const domains = (route.zone_domains ?? [])
+        .map((item) => item.domain)
+        .join(' ');
+      return (
         route.site_name.toLowerCase().includes(keyword) ||
-        route.primary_domain.toLowerCase().includes(keyword),
-    )
-  }, [routesQuery.data, searchTerm])
+        domains.toLowerCase().includes(keyword)
+      );
+    });
+  }, [routesQuery.data, searchTerm]);
 
   const toggleSite = (siteName: string) => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      if (next.has(siteName)) next.delete(siteName)
-      else next.add(siteName)
-      return next
-    })
-  }
+      const next = new Set(previous);
+      if (next.has(siteName)) next.delete(siteName);
+      else next.add(siteName);
+      return next;
+    });
+  };
 
   const handleSelectAll = () => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      filteredRoutes.forEach((route) => next.add(route.site_name))
-      return next
-    })
-  }
+      const next = new Set(previous);
+      filteredRoutes.forEach((route) => next.add(route.site_name));
+      return next;
+    });
+  };
 
   const handleDeselectAll = () => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      filteredRoutes.forEach((route) => next.delete(route.site_name))
-      return next
-    })
-  }
+      const next = new Set(previous);
+      filteredRoutes.forEach((route) => next.delete(route.site_name));
+      return next;
+    });
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className='max-w-2xl'>
         <DialogHeader>
           <DialogTitle>选择监控站点</DialogTitle>
           <DialogDescription>
@@ -90,86 +96,111 @@ export function UptimeKumaSiteSelectModal({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="space-y-1.5">
+        <div className='space-y-4'>
+          <div className='space-y-1.5'>
             <Label>搜索站点</Label>
             <Input
               value={searchTerm}
               onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder="按名称或域名搜索..."
+              placeholder='按名称或域名搜索...'
             />
           </div>
 
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" variant="outline" size="sm" onClick={handleSelectAll}>
+          <div className='flex flex-wrap gap-2'>
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleSelectAll}
+            >
               全选过滤项
             </Button>
-            <Button type="button" variant="outline" size="sm" onClick={handleDeselectAll}>
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleDeselectAll}
+            >
               清空过滤项
             </Button>
           </div>
 
-          <div className="max-h-72 overflow-y-auto rounded-lg border">
+          <div className='max-h-72 overflow-y-auto rounded-lg border'>
             {routesQuery.isLoading ? (
-              <p className="p-4 text-sm text-muted-foreground">加载站点列表...</p>
+              <p className='p-4 text-sm text-muted-foreground'>
+                加载站点列表...
+              </p>
             ) : routesQuery.isError ? (
-              <p className="p-4 text-sm text-destructive">
+              <p className='p-4 text-sm text-destructive'>
                 {routesQuery.error instanceof Error
                   ? routesQuery.error.message
-                  : "加载站点失败"}
+                  : '加载站点失败'}
               </p>
             ) : filteredRoutes.length === 0 ? (
-              <p className="p-4 text-sm text-muted-foreground">无匹配的站点</p>
+              <p className='p-4 text-sm text-muted-foreground'>无匹配的站点</p>
             ) : (
-              <table className="w-full text-left text-sm">
-                <thead className="sticky top-0 bg-muted/60 text-xs uppercase text-muted-foreground">
+              <table className='w-full text-left text-sm'>
+                <thead className='sticky top-0 bg-muted/60 text-xs uppercase text-muted-foreground'>
                   <tr>
-                    <th className="w-12 px-3 py-2">选择</th>
-                    <th className="px-3 py-2">站点名称</th>
-                    <th className="px-3 py-2">主域名</th>
+                    <th className='w-12 px-3 py-2'>选择</th>
+                    <th className='px-3 py-2'>站点名称</th>
+                    <th className='px-3 py-2'>主域名</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y">
+                <tbody className='divide-y'>
                   {filteredRoutes.map((route) => {
-                    const checked = tempSelected.has(route.site_name)
+                    const checked = tempSelected.has(route.site_name);
                     return (
                       <tr
                         key={route.id}
-                        className="cursor-pointer hover:bg-muted/30"
+                        className='cursor-pointer hover:bg-muted/30'
                         onClick={() => toggleSite(route.site_name)}
                       >
-                        <td className="px-3 py-2" onClick={(event) => event.stopPropagation()}>
+                        <td
+                          className='px-3 py-2'
+                          onClick={(event) => event.stopPropagation()}
+                        >
                           <input
-                            type="checkbox"
+                            type='checkbox'
                             checked={checked}
                             onChange={() => toggleSite(route.site_name)}
-                            className="size-4 rounded border-input"
+                            className='size-4 rounded border-input'
                           />
                         </td>
-                        <td className="px-3 py-2 font-medium">{route.site_name}</td>
-                        <td className="px-3 py-2 text-muted-foreground">{route.primary_domain}</td>
+                        <td className='px-3 py-2 font-medium'>
+                          {route.site_name}
+                        </td>
+                        <td className='px-3 py-2 text-muted-foreground'>
+                          {(route.zone_domains ?? [])
+                            .map((item) => item.domain)
+                            .join(', ') || '—'}
+                        </td>
                       </tr>
-                    )
+                    );
                   })}
                 </tbody>
               </table>
             )}
           </div>
 
-          <p className="text-right text-xs text-muted-foreground">
+          <p className='text-right text-xs text-muted-foreground'>
             已选择 {tempSelected.size} 个监控站点
           </p>
         </div>
 
         <DialogFooter>
-          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+          <Button
+            type='button'
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+          >
             取消
           </Button>
           <Button
-            type="button"
+            type='button'
             onClick={() => {
-              onSave(Array.from(tempSelected))
-              onOpenChange(false)
+              onSave(Array.from(tempSelected));
+              onOpenChange(false);
             }}
           >
             保存选择
@@ -177,5 +208,5 @@ export function UptimeKumaSiteSelectModal({
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+}

frontend/app/(main)/admin/settings/page-client.tsx

@@ -1,155 +1,225 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-"use client"
+'use client';
 
-import dynamic from "next/dynamic"
-import {useEffect, useMemo} from "react"
-import {useQuery} from "@tanstack/react-query"
-import {Loader2, Settings} from "lucide-react"
-import {useRouter} from "next/navigation"
-import {motion} from "motion/react"
+import dynamic from 'next/dynamic';
+import { useEffect, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Loader2, Settings } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { motion } from 'motion/react';
 
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {useAuth} from "@/components/providers/auth-provider"
-import services from "@/lib/services"
-import type {SystemConfig} from "@/lib/services/admin"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useAuth } from '@/components/providers/auth-provider';
+import services from '@/lib/services';
+import type { SystemConfig } from '@/lib/services/admin';
 
 const tabFallback = (
-  <div className="h-64 animate-pulse rounded-lg border border-border/40 bg-muted/20" />
-)
+  <div className='h-64 animate-pulse rounded-lg border border-border/40 bg-muted/20' />
+);
 
 const SecurityTab = dynamic(
-  () => import("@/components/common/settings/security-tab").then((mod) => mod.SecurityTab),
+  () =>
+    import('@/components/common/settings/security-tab').then(
+      (mod) => mod.SecurityTab,
+    ),
   { loading: () => tabFallback },
-)
+);
 
 const OperationTab = dynamic(
-  () => import("@/components/common/settings/operation-tab").then((mod) => mod.OperationTab),
+  () =>
+    import('@/components/common/settings/operation-tab').then(
+      (mod) => mod.OperationTab,
+    ),
   { loading: () => tabFallback },
-)
+);
 
 const SystemTab = dynamic(
-  () => import("@/components/common/settings/system-tab").then((mod) => mod.SystemTab),
+  () =>
+    import('@/components/common/settings/system-tab').then(
+      (mod) => mod.SystemTab,
+    ),
   { loading: () => tabFallback },
-)
+);
 
 const OtherTab = dynamic(
-  () => import("@/components/common/settings/other-tab").then((mod) => mod.OtherTab),
+  () =>
+    import('@/components/common/settings/other-tab').then(
+      (mod) => mod.OtherTab,
+    ),
   { loading: () => tabFallback },
-)
+);
 
 const InfoTab = dynamic(
-  () => import("@/components/common/settings/info-tab").then((mod) => mod.InfoTab),
+  () =>
+    import('@/components/common/settings/info-tab').then((mod) => mod.InfoTab),
   { loading: () => tabFallback },
-)
+);
 
 const SystemStatusManager = dynamic(
-  () => import("./components/system-status").then((mod) => mod.SystemStatusManager),
+  () =>
+    import('./components/system-status').then((mod) => mod.SystemStatusManager),
   { loading: () => tabFallback },
-)
+);
 
 const OpenFlareOpsSettings = dynamic(
-  () => import("./components/openflare-ops").then((mod) => mod.OpenFlareOpsSettings),
+  () =>
+    import('./components/openflare-ops').then(
+      (mod) => mod.OpenFlareOpsSettings,
+    ),
   { loading: () => tabFallback },
-)
+);
 
 function systemConfigMap(configs: SystemConfig[]) {
   return configs.reduce<Record<string, SystemConfig>>((accumulator, config) => {
-    accumulator[config.key] = config
-    return accumulator
-  }, {})
+    accumulator[config.key] = config;
+    return accumulator;
+  }, {});
 }
 
 export function AdminSettingsPageClient() {
-  const { user, loading } = useAuth()
-  const router = useRouter()
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const activeTab = useMemo(() => {
+    const rawTab = searchParams.get('tab');
+    const validTabs = [
+      'openflare-ops',
+      'security',
+      'operation',
+      'system',
+      'other',
+      'status',
+      'info',
+    ];
+    return rawTab && validTabs.includes(rawTab) ? rawTab : 'openflare-ops';
+  }, [searchParams]);
+
+  const handleTabChange = (value: string) => {
+    router.push(`/admin/settings?tab=${value}`);
+  };
 
   const systemConfigsQuery = useQuery({
-    queryKey: ["admin", "system-configs"],
-    queryFn: () => services.adminSystemConfig.listSystemConfigs("system"),
+    queryKey: ['admin', 'system-configs'],
+    queryFn: () => services.adminSystemConfig.listSystemConfigs('system'),
     enabled: !!user?.is_admin,
-  })
+  });
 
   const configs = useMemo(
     () => systemConfigMap(systemConfigsQuery.data ?? []),
     [systemConfigsQuery.data],
-  )
+  );
 
   useEffect(() => {
     if (!loading && (!user || !user.is_admin)) {
-      router.replace("/settings/profile")
+      router.replace('/settings/profile');
     }
-  }, [user, loading, router])
+  }, [user, loading, router]);
 
   if (loading || !user || !user.is_admin) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Loader2 className="size-6 animate-spin text-primary" />
+      <div className='flex items-center justify-center min-h-[400px]'>
+        <Loader2 className='size-6 animate-spin text-primary' />
       </div>
-    )
+    );
   }
 
   return (
     <motion.div
       initial={{ opacity: 0, y: 15 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, ease: "easeOut" }}
-      className="py-6 space-y-6 w-full"
+      transition={{ duration: 0.35, ease: 'easeOut' }}
+      className='py-6 space-y-6 w-full'
     >
-      <div className="flex items-center gap-2">
-        <Settings className="size-5 text-primary" />
+      <div className='flex items-center gap-2'>
+        <Settings className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">系统设置</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>系统设置</h1>
         </div>
       </div>
-      <Tabs defaultValue="security" className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
-          <TabsTrigger value="openflare-ops" className="px-0 pb-2 text-xs font-semibold">
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className='w-full'
+      >
+        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
+          <TabsTrigger
+            value='openflare-ops'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             OpenFlare
           </TabsTrigger>
-          <TabsTrigger value="security" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='security'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             安全设置
           </TabsTrigger>
-          <TabsTrigger value="operation" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='operation'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             业务设置
           </TabsTrigger>
-          <TabsTrigger value="system" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='system'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             系统设置
           </TabsTrigger>
-          <TabsTrigger value="other" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='other'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             其他设置
           </TabsTrigger>
-          <TabsTrigger value="status" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='status'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             系统状态
           </TabsTrigger>
-          <TabsTrigger value="info" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger value='info' className='px-0 pb-2 text-xs font-semibold'>
             系统信息
           </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="security" className="focus-visible:outline-none">
-          <SecurityTab configs={configs} systemConfigsQuery={systemConfigsQuery} />
+        <TabsContent value='security' className='focus-visible:outline-none'>
+          <SecurityTab
+            configs={configs}
+            systemConfigsQuery={systemConfigsQuery}
+          />
         </TabsContent>
-        <TabsContent value="operation" className="focus-visible:outline-none">
-          <OperationTab configs={configs} systemConfigsQuery={systemConfigsQuery} />
+        <TabsContent value='operation' className='focus-visible:outline-none'>
+          <OperationTab
+            configs={configs}
+            systemConfigsQuery={systemConfigsQuery}
+          />
         </TabsContent>
-        <TabsContent value="system" className="focus-visible:outline-none">
-          <SystemTab configs={configs} systemConfigsQuery={systemConfigsQuery} />
+        <TabsContent value='system' className='focus-visible:outline-none'>
+          <SystemTab
+            configs={configs}
+            systemConfigsQuery={systemConfigsQuery}
+          />
         </TabsContent>
-        <TabsContent value="status" className="focus-visible:outline-none">
+        <TabsContent value='status' className='focus-visible:outline-none'>
           <SystemStatusManager />
         </TabsContent>
-        <TabsContent value="other" className="focus-visible:outline-none">
+        <TabsContent value='other' className='focus-visible:outline-none'>
           <OtherTab configs={configs} />
         </TabsContent>
-        <TabsContent value="info" className="focus-visible:outline-none">
+        <TabsContent value='info' className='focus-visible:outline-none'>
           <InfoTab />
         </TabsContent>
-        <TabsContent value="openflare-ops" className="focus-visible:outline-none">
+        <TabsContent
+          value='openflare-ops'
+          className='focus-visible:outline-none'
+        >
           <OpenFlareOpsSettings />
         </TabsContent>
       </Tabs>
     </motion.div>
-  )
+  );
 }

frontend/app/(main)/admin/settings/page.tsx

@@ -1,8 +1,20 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
-import {AdminSettingsPageClient} from "./page-client"
+import { Suspense } from 'react';
+import { Loader2 } from 'lucide-react';
+import { AdminSettingsPageClient } from './page-client';
 
 export default function AdminSettingsPage() {
-  return <AdminSettingsPageClient />
-}
+  return (
+    <Suspense
+      fallback={
+        <div className='flex items-center justify-center min-h-[400px]'>
+          <Loader2 className='size-6 animate-spin text-primary' />
+        </div>
+      }
+    >
+      <AdminSettingsPageClient />
+    </Suspense>
+  );
+}

frontend/app/(main)/admin/system/page.tsx

@@ -1,16 +1,18 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {Input} from "@/components/ui/input"
-import {Switch} from "@/components/ui/switch"
-import {ManageDetailPanel, ManagePage} from "@/components/common/general/manage-pannel"
-import {Tabs, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {ShieldCheck} from "lucide-react"
-
-import {formatDateTime} from "@/lib/utils"
-import type {SystemConfig} from "@/lib/services/admin"
-import {AdminProvider, useAdmin} from "@/contexts/admin-context"
+import * as React from 'react';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import {
+  ManageDetailPanel,
+  ManagePage,
+} from '@/components/common/general/manage-pannel';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ShieldCheck } from 'lucide-react';
 
+import { formatDateTime } from '@/lib/utils';
+import type { SystemConfig } from '@/lib/services/admin';
+import { AdminProvider, useAdmin } from '@/contexts/admin-context';
 
 /**
  * 系统配置
@@ -38,43 +40,51 @@ function SystemConfigDetailPanel({
   editData,
   onEditDataChange,
   onSave,
-  saving
+  saving,
 }: {
-  config: SystemConfig | null
-  editData: Partial<SystemConfig>
-  onEditDataChange: (field: keyof SystemConfig, value: SystemConfig[keyof SystemConfig]) => void
-  onSave: () => void
-  saving: boolean
+  config: SystemConfig | null;
+  editData: Partial<SystemConfig>;
+  onEditDataChange: (
+    field: keyof SystemConfig,
+    value: SystemConfig[keyof SystemConfig],
+  ) => void;
+  onSave: () => void;
+  saving: boolean;
 }) {
-
   return (
-    <ManageDetailPanel
-      isEmpty={!config}
-      onSave={onSave}
-      saving={saving}
-    >
-      <div className="grid grid-cols-1 gap-0">
-        <div className="border border-dashed rounded-lg">
-          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
-            <label className="text-xs font-medium text-muted-foreground">配置键</label>
-            <p className="text-xs text-muted-foreground font-mono">{config?.key}</p>
+    <ManageDetailPanel isEmpty={!config} onSave={onSave} saving={saving}>
+      <div className='grid grid-cols-1 gap-0'>
+        <div className='border border-dashed rounded-lg'>
+          <div className='px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              配置键
+            </label>
+            <p className='text-xs text-muted-foreground font-mono'>
+              {config?.key}
+            </p>
           </div>
 
-          <div className="pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
-            <label className="text-xs font-medium text-muted-foreground">配置值</label>
-            <div className="flex gap-1 w-[90%] justify-end items-center pr-3">
+          <div className='pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              配置值
+            </label>
+            <div className='flex gap-1 w-[90%] justify-end items-center pr-3'>
               {config?.key.endsWith('_enabled') ? (
                 <Switch
-                  checked={editData.value !== undefined ? editData.value === 'true' : (config?.value === 'true')}
+                  checked={
+                    editData.value !== undefined
+                      ? editData.value === 'true'
+                      : config?.value === 'true'
+                  }
                   onCheckedChange={(checked) => {
-                    onEditDataChange('value', checked ? 'true' : 'false')
+                    onEditDataChange('value', checked ? 'true' : 'false');
                   }}
                 />
               ) : (
                 <Input
                   type={
-                    config?.key && (
-                      config.key.endsWith('_limit') ||
+                    config?.key &&
+                    (config.key.endsWith('_limit') ||
                       config.key.endsWith('_minutes') ||
                       config.key.endsWith('_days') ||
                       config.key.endsWith('_seconds') ||
@@ -85,79 +95,100 @@ function SystemConfigDetailPanel({
                       config.key.includes('max_') ||
                       config.key.includes('min_') ||
                       config.key.includes('limit') ||
-                      config.key.includes('count')
-                    ) ? "number" : "text"
+                      config.key.includes('count'))
+                      ? 'number'
+                      : 'text'
+                  }
+                  step='1'
+                  min='0'
+                  value={
+                    editData.value !== undefined
+                      ? editData.value
+                      : config?.value || ''
+                  }
+                  placeholder={
+                    editData.value === undefined && !config?.value ? '必需' : ''
                   }
-                  step="1"
-                  min="0"
-                  value={editData.value !== undefined ? editData.value : (config?.value || '')}
-                  placeholder={editData.value === undefined && !config?.value ? '必需' : ''}
                   onChange={(e) => {
-                    const value = e.target.value
+                    const value = e.target.value;
                     if (value === '') {
-                      onEditDataChange('value', '')
-                      return
+                      onEditDataChange('value', '');
+                      return;
                     }
-                    onEditDataChange('value', value)
+                    onEditDataChange('value', value);
                   }}
-                  className="!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]"
+                  className='!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]'
                   style={{
-                    MozAppearance: 'textfield'
+                    MozAppearance: 'textfield',
                   }}
                 />
               )}
             </div>
           </div>
 
-          <div className="pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
-            <label className="text-xs font-medium text-muted-foreground">配置描述</label>
-            <div className="flex gap-1 w-[90%]">
+          <div className='pl-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              配置描述
+            </label>
+            <div className='flex gap-1 w-[90%]'>
               <Input
-                type="text"
-                value={editData.description !== undefined ? editData.description : (config?.description || '')}
-                placeholder="可选描述"
+                type='text'
+                value={
+                  editData.description !== undefined
+                    ? editData.description
+                    : config?.description || ''
+                }
+                placeholder='可选描述'
                 onChange={(e) => {
-                  const value = e.target.value
-                  onEditDataChange('description', value)
+                  const value = e.target.value;
+                  onEditDataChange('description', value);
                 }}
-                className="!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px]"
+                className='!text-[12px] text-right h-4 rounded-none border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:!text-[12px]'
               />
             </div>
           </div>
 
-          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
-            <label className="text-xs font-medium text-muted-foreground">公共可见</label>
+          <div className='px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              公共可见
+            </label>
             <Switch
               checked={(editData.visibility ?? config?.visibility ?? 0) === 1}
               onCheckedChange={(checked) => {
-                onEditDataChange('visibility', checked ? 1 : 0)
+                onEditDataChange('visibility', checked ? 1 : 0);
               }}
             />
           </div>
 
-          <div className="px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0">
-            <label className="text-xs font-medium text-muted-foreground">配置类型</label>
-            <span className={`text-[11px] px-1.5 py-0.5 rounded font-medium ${
-              config?.type === 'system'
-                ? 'bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
-                : 'bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400'
-            }`}>
+          <div className='px-3 py-2 flex items-center justify-between border-b border-dashed last:border-b-0'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              配置类型
+            </label>
+            <span
+              className={`text-[11px] px-1.5 py-0.5 rounded font-medium ${
+                config?.type === 'system'
+                  ? 'bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
+                  : 'bg-indigo-500/10 text-indigo-600 dark:bg-indigo-500/20 dark:text-indigo-400'
+              }`}
+            >
               {config?.type === 'system' ? '系统配置' : '业务配置'}
             </span>
           </div>
 
-          <div className="px-3 py-2 flex items-center justify-between">
-            <label className="text-xs font-medium text-muted-foreground">创建时间</label>
-            <p className="text-xs text-muted-foreground">{config ? formatDateTime(config.created_at) : ''}</p>
+          <div className='px-3 py-2 flex items-center justify-between'>
+            <label className='text-xs font-medium text-muted-foreground'>
+              创建时间
+            </label>
+            <p className='text-xs text-muted-foreground'>
+              {config ? formatDateTime(config.created_at) : ''}
+            </p>
           </div>
         </div>
       </div>
     </ManageDetailPanel>
-  )
+  );
 }
 
-
-
 /**
  * 系统配置管理组件
  *
@@ -173,34 +204,39 @@ export function SystemConfigs() {
     systemConfigsLoading: loading,
     systemConfigsError: error,
     refetchSystemConfigs,
-    updateSystemConfig
-  } = useAdmin()
+    updateSystemConfig,
+  } = useAdmin();
 
-  const [activeTab, setActiveTab] = React.useState<'system' | 'business'>('business')
+  const [activeTab, setActiveTab] = React.useState<'system' | 'business'>(
+    'business',
+  );
 
   React.useEffect(() => {
-    refetchSystemConfigs(activeTab)
-  }, [activeTab, refetchSystemConfigs])
+    refetchSystemConfigs(activeTab);
+  }, [activeTab, refetchSystemConfigs]);
 
   const getInitialEditData = (config: SystemConfig) => ({
     value: config.value,
     visibility: config.visibility,
-    description: config.description
-  })
+    description: config.description,
+  });
 
-  const handleSave = async (config: SystemConfig, editData: Partial<SystemConfig>) => {
-    if (!config) return
+  const handleSave = async (
+    config: SystemConfig,
+    editData: Partial<SystemConfig>,
+  ) => {
+    if (!config) return;
 
     await updateSystemConfig(config.key, {
       value: editData.value ?? config.value,
       visibility: editData.visibility ?? config.visibility,
-      description: editData.description ?? config.description
-    })
-  }
+      description: editData.description ?? config.description,
+    });
+  };
 
   return (
     <ManagePage<SystemConfig>
-      title="系统配置"
+      title='系统配置'
       icon={ShieldCheck}
       data={configs}
       loading={loading}
@@ -209,23 +245,72 @@ export function SystemConfigs() {
       getInitialEditData={getInitialEditData}
       onSave={handleSave}
       getId={(config) => config.key}
-      emptyDescription="未发现系统配置"
-      loadingDescription="配置加载中"
+      emptyDescription='未发现系统配置'
+      loadingDescription='配置加载中'
       headerExtra={
-        <Tabs value={activeTab} onValueChange={(val) => setActiveTab(val as 'system' | 'business')} className="w-[180px]">
-          <TabsList className="grid w-full grid-cols-2 h-8">
-            <TabsTrigger value="business" className="text-[11px] h-7">业务配置</TabsTrigger>
-            <TabsTrigger value="system" className="text-[11px] h-7">系统配置</TabsTrigger>
+        <Tabs
+          value={activeTab}
+          onValueChange={(val) => setActiveTab(val as 'system' | 'business')}
+          className='w-[180px]'
+        >
+          <TabsList className='grid w-full grid-cols-2 h-8'>
+            <TabsTrigger value='business' className='text-[11px] h-7'>
+              业务配置
+            </TabsTrigger>
+            <TabsTrigger value='system' className='text-[11px] h-7'>
+              系统配置
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       }
       columns={[
-        { header: "配置键", cell: (item) => <span className="font-mono font-medium">{item.key}</span>, width: "200px" },
-        { header: "配置值", cell: (item) => <span className="truncate max-w-[120px] inline-block" title={item.value}>{item.value}</span>, width: "120px" },
-        { header: "公共可见", cell: (item) => <span>{item.visibility === 1 ? "可见" : "不可见"}</span>, width: "80px" },
-        { header: "描述", cell: (item) => <span className="truncate max-w-[200px] inline-block text-muted-foreground" title={item.description}>{item.description}</span>, width: "200px" },
+        {
+          header: '配置键',
+          cell: (item) => (
+            <span className='font-mono font-medium'>{item.key}</span>
+          ),
+          width: '200px',
+        },
+        {
+          header: '配置值',
+          cell: (item) => (
+            <span
+              className='truncate max-w-[120px] inline-block'
+              title={item.value}
+            >
+              {item.value}
+            </span>
+          ),
+          width: '120px',
+        },
+        {
+          header: '公共可见',
+          cell: (item) => (
+            <span>{item.visibility === 1 ? '可见' : '不可见'}</span>
+          ),
+          width: '80px',
+        },
+        {
+          header: '描述',
+          cell: (item) => (
+            <span
+              className='truncate max-w-[200px] inline-block text-muted-foreground'
+              title={item.description}
+            >
+              {item.description}
+            </span>
+          ),
+          width: '200px',
+        },
       ]}
-      renderDetail={({ selected, hovered, editData, onEditDataChange, onSave, saving }) => (
+      renderDetail={({
+        selected,
+        hovered,
+        editData,
+        onEditDataChange,
+        onSave,
+        saving,
+      }) => (
         <SystemConfigDetailPanel
           config={selected || hovered}
           editData={editData}
@@ -235,7 +320,7 @@ export function SystemConfigs() {
         />
       )}
     />
-  )
+  );
 }
 
 export default function SystemConfigPage() {
@@ -243,5 +328,5 @@ export default function SystemConfigPage() {
     <AdminProvider>
       <SystemConfigs />
     </AdminProvider>
-  )
+  );
 }

frontend/app/(main)/admin/tasks/components/task-executions.tsx

@@ -1,201 +1,278 @@
-"use client"
+'use client';
 
-import {useMemo, useState} from "react"
-import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {toast} from "sonner"
-import {format} from "date-fns"
-import {Activity, ChevronLeft, ChevronRight, RefreshCw, RotateCcw} from "lucide-react"
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { format } from 'date-fns';
+import {
+  Activity,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  RotateCcw,
+} from 'lucide-react';
 
-import services from "@/lib/services"
-import type {TaskExecution, TaskExecutionStatus, TaskMeta} from "@/lib/services/admin"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Label} from "@/components/ui/label"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle} from "@/components/ui/sheet"
-import {Spinner} from "@/components/ui/spinner"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
+import services from '@/lib/services';
+import type {
+  TaskExecution,
+  TaskExecutionStatus,
+  TaskMeta,
+} from '@/lib/services/admin';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 
 const STATUS_LABELS: Record<TaskExecutionStatus, string> = {
-  pending: "等待中",
-  running: "执行中",
-  succeeded: "成功",
-  failed: "失败",
-}
+  pending: '等待中',
+  running: '执行中',
+  succeeded: '成功',
+  failed: '失败',
+};
 
 const TRIGGER_LABELS: Record<string, string> = {
-  system: "系统",
-  manual: "手动",
-  retry: "重试",
-  schedule: "定时",
-}
+  system: '系统',
+  manual: '手动',
+  retry: '重试',
+  schedule: '定时',
+};
 
-const PAGE_SIZE = 10
+const PAGE_SIZE = 10;
 
 function formatDateTime(value?: string | null) {
-  if (!value) return "-"
-  const date = new Date(value)
-  if (Number.isNaN(date.getTime())) return value
-  return format(date, "yyyy-MM-dd HH:mm:ss")
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return format(date, 'yyyy-MM-dd HH:mm:ss');
 }
 
 function formatDuration(duration: number) {
-  if (!duration) return "-"
-  if (duration < 1000) return `${ duration }ms`
-  return `${ (duration / 1000).toFixed(2) }s`
+  if (!duration) return '-';
+  if (duration < 1000) return `${duration}ms`;
+  return `${(duration / 1000).toFixed(2)}s`;
 }
 
 function statusVariant(status: TaskExecutionStatus) {
-  if (status === "failed") return "destructive"
-  if (status === "succeeded") return "secondary"
-  return "outline"
+  if (status === 'failed') return 'destructive';
+  if (status === 'succeeded') return 'secondary';
+  return 'outline';
 }
 
 export function TaskExecutionsManager() {
-  const queryClient = useQueryClient()
-  const [executionsPage, setExecutionsPage] = useState(1)
-  const [executionStatus, setExecutionStatus] = useState<TaskExecutionStatus | "all">("all")
-  const [executionTaskType, setExecutionTaskType] = useState<string>("all")
-  const [selectedExecutionId, setSelectedExecutionId] = useState<string | null>(null)
-  const [executionPreview, setExecutionPreview] = useState<TaskExecution | null>(null)
-  const [detailOpen, setDetailOpen] = useState(false)
+  const queryClient = useQueryClient();
+  const [executionsPage, setExecutionsPage] = useState(1);
+  const [executionStatus, setExecutionStatus] = useState<
+    TaskExecutionStatus | 'all'
+  >('all');
+  const [executionTaskType, setExecutionTaskType] = useState<string>('all');
+  const [selectedExecutionId, setSelectedExecutionId] = useState<string | null>(
+    null,
+  );
+  const [executionPreview, setExecutionPreview] =
+    useState<TaskExecution | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
 
   const taskTypesQuery = useQuery({
-    queryKey: ["admin", "task-types"],
+    queryKey: ['admin', 'task-types'],
     queryFn: () => services.adminTask.getTaskTypes(),
-  })
+  });
 
   const executionsQuery = useQuery({
-    queryKey: ["admin", "task-executions", executionsPage, executionStatus, executionTaskType],
-    queryFn: () => services.adminTask.listTaskExecutions({
-      page: executionsPage,
-      page_size: PAGE_SIZE,
-      status: executionStatus === "all" ? undefined : executionStatus,
-      task_type: executionTaskType === "all" ? undefined : executionTaskType,
-    }),
-  })
+    queryKey: [
+      'admin',
+      'task-executions',
+      executionsPage,
+      executionStatus,
+      executionTaskType,
+    ],
+    queryFn: () =>
+      services.adminTask.listTaskExecutions({
+        page: executionsPage,
+        page_size: PAGE_SIZE,
+        status: executionStatus === 'all' ? undefined : executionStatus,
+        task_type: executionTaskType === 'all' ? undefined : executionTaskType,
+      }),
+  });
 
   const detailQuery = useQuery({
-    queryKey: ["admin", "task-execution", selectedExecutionId],
+    queryKey: ['admin', 'task-execution', selectedExecutionId],
     queryFn: () => services.adminTask.getTaskExecution(selectedExecutionId!),
     enabled: detailOpen && !!selectedExecutionId,
-  })
+  });
 
   const retryMutation = useMutation({
     mutationFn: (id: string) => services.adminTask.retryTaskExecution(id),
     onSuccess: (taskID) => {
-      toast.success("任务已重新下发", {
-        description: `新任务 ID：${ taskID }`,
-      })
-      void queryClient.invalidateQueries({ queryKey: ["admin", "task-executions"] })
+      toast.success('任务已重新下发', {
+        description: `新任务 ID：${taskID}`,
+      });
+      void queryClient.invalidateQueries({
+        queryKey: ['admin', 'task-executions'],
+      });
     },
     onError: (err: Error) => {
-      toast.error("任务重试失败", {
-        description: err.message || "未知错误",
-      })
+      toast.error('任务重试失败', {
+        description: err.message || '未知错误',
+      });
     },
-  })
+  });
 
-  const taskTypes: TaskMeta[] = taskTypesQuery.data ?? []
-  const executions = executionsQuery.data?.items ?? []
-  const executionsTotal = executionsQuery.data?.total ?? 0
-  const executionsLoading = executionsQuery.isPending || executionsQuery.isFetching
-  const executionsError = executionsQuery.isError ? executionsQuery.error : null
-  const selectedExecution = detailQuery.data ?? executionPreview
-  const detailLoading = detailQuery.isFetching
+  const taskTypes: TaskMeta[] = taskTypesQuery.data ?? [];
+  const executions = executionsQuery.data?.items ?? [];
+  const executionsTotal = executionsQuery.data?.total ?? 0;
+  const executionsLoading =
+    executionsQuery.isPending || executionsQuery.isFetching;
+  const executionsError = executionsQuery.isError
+    ? executionsQuery.error
+    : null;
+  const selectedExecution = detailQuery.data ?? executionPreview;
+  const detailLoading = detailQuery.isFetching;
 
   const totalPages = useMemo(
     () => Math.max(1, Math.ceil(executionsTotal / PAGE_SIZE)),
     [executionsTotal],
-  )
+  );
 
   const openExecutionDetail = (execution: TaskExecution) => {
-    setExecutionPreview(execution)
-    setSelectedExecutionId(execution.id)
-    setDetailOpen(true)
-  }
+    setExecutionPreview(execution);
+    setSelectedExecutionId(execution.id);
+    setDetailOpen(true);
+  };
 
-  const handleStatusChange = (value: TaskExecutionStatus | "all") => {
-    setExecutionStatus(value)
-    setExecutionsPage(1)
-  }
+  const handleStatusChange = (value: TaskExecutionStatus | 'all') => {
+    setExecutionStatus(value);
+    setExecutionsPage(1);
+  };
 
   const handleTaskTypeChange = (value: string) => {
-    setExecutionTaskType(value)
-    setExecutionsPage(1)
-  }
+    setExecutionTaskType(value);
+    setExecutionsPage(1);
+  };
 
   return (
-    <div className="space-y-6">
-      <br/>
-      <div className="flex flex-col gap-3 border-b border-border pb-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex flex-wrap items-center gap-2">
-          <Select value={executionStatus} onValueChange={(value) => handleStatusChange(value as TaskExecutionStatus | "all")}>
-            <SelectTrigger size="sm" className="w-[120px]">
-              <SelectValue placeholder="状态" />
+    <div className='space-y-6'>
+      <br />
+      <div className='flex flex-col gap-3 border-b border-border pb-3 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex flex-wrap items-center gap-2'>
+          <Select
+            value={executionStatus}
+            onValueChange={(value) =>
+              handleStatusChange(value as TaskExecutionStatus | 'all')
+            }
+          >
+            <SelectTrigger size='sm' className='w-[120px]'>
+              <SelectValue placeholder='状态' />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">全部状态</SelectItem>
-              <SelectItem value="pending">等待中</SelectItem>
-              <SelectItem value="running">执行中</SelectItem>
-              <SelectItem value="succeeded">成功</SelectItem>
-              <SelectItem value="failed">失败</SelectItem>
+              <SelectItem value='all'>全部状态</SelectItem>
+              <SelectItem value='pending'>等待中</SelectItem>
+              <SelectItem value='running'>执行中</SelectItem>
+              <SelectItem value='succeeded'>成功</SelectItem>
+              <SelectItem value='failed'>失败</SelectItem>
             </SelectContent>
           </Select>
-          <Select value={executionTaskType} onValueChange={handleTaskTypeChange}>
-            <SelectTrigger size="sm" className="w-[180px]">
-              <SelectValue placeholder="任务类型" />
+          <Select
+            value={executionTaskType}
+            onValueChange={handleTaskTypeChange}
+          >
+            <SelectTrigger size='sm' className='w-[180px]'>
+              <SelectValue placeholder='任务类型' />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">全部任务</SelectItem>
+              <SelectItem value='all'>全部任务</SelectItem>
               {taskTypes.map((task) => (
-                <SelectItem key={task.type} value={task.type}>{task.name || task.type}</SelectItem>
+                <SelectItem key={task.type} value={task.type}>
+                  {task.name || task.type}
+                </SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="sm" onClick={() => void executionsQuery.refetch()} disabled={executionsLoading}>
-            {executionsLoading ? <Spinner className="size-4" /> : <RefreshCw className="size-4" />}
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => void executionsQuery.refetch()}
+            disabled={executionsLoading}
+          >
+            {executionsLoading ? (
+              <Spinner className='size-4' />
+            ) : (
+              <RefreshCw className='size-4' />
+            )}
             刷新
           </Button>
         </div>
       </div>
 
       {executionsError ? (
-        <div className="p-8 border border-dashed rounded-lg bg-card">
-          <ErrorInline error={executionsError} onRetry={() => void executionsQuery.refetch()} className="justify-center" />
+        <div className='p-8 border border-dashed rounded-lg bg-card'>
+          <ErrorInline
+            error={executionsError}
+            onRetry={() => void executionsQuery.refetch()}
+            className='justify-center'
+          />
         </div>
       ) : executionsLoading && executions.length === 0 ? (
-        <LoadingStateWithBorder icon={Activity} description="加载任务执行记录中..." />
+        <LoadingStateWithBorder
+          icon={Activity}
+          description='加载任务执行记录中...'
+        />
       ) : executions.length === 0 ? (
-        <EmptyStateWithBorder icon={Activity} description="暂无任务执行记录" />
+        <EmptyStateWithBorder icon={Activity} description='暂无任务执行记录' />
       ) : (
-        <div className="rounded-lg border bg-card">
-          <Table className="min-w-[900px]">
+        <div className='rounded-lg border bg-card'>
+          <Table className='min-w-[900px]'>
             <TableHeader>
-              <TableRow className="hover:bg-transparent">
-                <TableHead className="w-[180px]">任务</TableHead>
-                <TableHead className="w-[100px]">状态</TableHead>
-                <TableHead className="w-[110px]">触发</TableHead>
-                <TableHead className="w-[120px]">重试</TableHead>
-                <TableHead className="w-[120px]">耗时</TableHead>
-                <TableHead className="min-w-[220px]">结果/错误</TableHead>
-                <TableHead className="w-[170px]">创建时间</TableHead>
+              <TableRow className='hover:bg-transparent'>
+                <TableHead className='w-[180px]'>任务</TableHead>
+                <TableHead className='w-[100px]'>状态</TableHead>
+                <TableHead className='w-[110px]'>触发</TableHead>
+                <TableHead className='w-[120px]'>重试</TableHead>
+                <TableHead className='w-[120px]'>耗时</TableHead>
+                <TableHead className='min-w-[220px]'>结果/错误</TableHead>
+                <TableHead className='w-[170px]'>创建时间</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {executions.map((execution) => (
                 <TableRow
                   key={execution.id}
-                  className="cursor-pointer"
+                  className='cursor-pointer'
                   onClick={() => openExecutionDetail(execution)}
                 >
                   <TableCell>
-                    <div className="flex flex-col gap-1">
-                      <span className="text-sm font-medium">{execution.task_name || execution.task_type}</span>
-                      <span className="font-mono text-[11px] text-muted-foreground">{execution.task_id}</span>
+                    <div className='flex flex-col gap-1'>
+                      <span className='text-sm font-medium'>
+                        {execution.task_name || execution.task_type}
+                      </span>
+                      <span className='font-mono text-[11px] text-muted-foreground'>
+                        {execution.task_id}
+                      </span>
                     </div>
                   </TableCell>
                   <TableCell>
@@ -204,18 +281,21 @@ export function TaskExecutionsManager() {
                     </Badge>
                   </TableCell>
                   <TableCell>
-                    <Badge variant="outline">{TRIGGER_LABELS[execution.triggered_by] || execution.triggered_by}</Badge>
+                    <Badge variant='outline'>
+                      {TRIGGER_LABELS[execution.triggered_by] ||
+                        execution.triggered_by}
+                    </Badge>
                   </TableCell>
-                  <TableCell className="font-mono text-xs text-muted-foreground">
+                  <TableCell className='font-mono text-xs text-muted-foreground'>
                     {execution.retry_count}/{execution.max_retry}
                   </TableCell>
-                  <TableCell className="font-mono text-xs text-muted-foreground">
+                  <TableCell className='font-mono text-xs text-muted-foreground'>
                     {formatDuration(execution.duration)}
                   </TableCell>
-                  <TableCell className="max-w-[320px] truncate text-xs text-muted-foreground">
-                    {execution.error_message || execution.result || "-"}
+                  <TableCell className='max-w-[320px] truncate text-xs text-muted-foreground'>
+                    {execution.error_message || execution.result || '-'}
                   </TableCell>
-                  <TableCell className="font-mono text-[11px] text-muted-foreground">
+                  <TableCell className='font-mono text-[11px] text-muted-foreground'>
                     {formatDateTime(execution.created_at)}
                   </TableCell>
                 </TableRow>
@@ -225,150 +305,192 @@ export function TaskExecutionsManager() {
         </div>
       )}
 
-      <div className="flex items-center justify-between">
-        <div className="text-xs text-muted-foreground">
+      <div className='flex items-center justify-between'>
+        <div className='text-xs text-muted-foreground'>
           共 {executionsTotal} 条，当前第 {executionsPage}/{totalPages} 页
         </div>
-        <div className="flex items-center gap-2">
+        <div className='flex items-center gap-2'>
           <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
             onClick={() => setExecutionsPage((page) => Math.max(1, page - 1))}
             disabled={executionsPage <= 1 || executionsLoading}
           >
-            <ChevronLeft className="size-4" />
+            <ChevronLeft className='size-4' />
             上一页
           </Button>
           <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setExecutionsPage((page) => Math.min(totalPages, page + 1))}
+            variant='outline'
+            size='sm'
+            onClick={() =>
+              setExecutionsPage((page) => Math.min(totalPages, page + 1))
+            }
             disabled={executionsPage >= totalPages || executionsLoading}
           >
             下一页
-            <ChevronRight className="size-4" />
+            <ChevronRight className='size-4' />
           </Button>
         </div>
       </div>
 
       <Sheet open={detailOpen} onOpenChange={setDetailOpen}>
-        <SheetContent className="w-full p-0 sm:max-w-[640px]">
-          <SheetHeader className="border-b">
+        <SheetContent className='w-full p-0 sm:max-w-[640px]'>
+          <SheetHeader className='border-b'>
             <SheetTitle>任务执行详情</SheetTitle>
             <SheetDescription>
-              {selectedExecution?.task_name || selectedExecution?.task_type || "任务记录"}
+              {selectedExecution?.task_name ||
+                selectedExecution?.task_type ||
+                '任务记录'}
             </SheetDescription>
           </SheetHeader>
 
-          <div className="flex-1 overflow-y-auto px-4 pb-4">
+          <div className='flex-1 overflow-y-auto px-4 pb-4'>
             {detailLoading && !selectedExecution ? (
-              <LoadingStateWithBorder icon={Activity} description="加载任务详情中..." />
+              <LoadingStateWithBorder
+                icon={Activity}
+                description='加载任务详情中...'
+              />
             ) : selectedExecution ? (
-              <div className="space-y-5 py-4">
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="rounded-lg border p-3">
-                    <div className="text-xs text-muted-foreground">状态</div>
-                    <div className="mt-2">
+              <div className='space-y-5 py-4'>
+                <div className='grid grid-cols-2 gap-3'>
+                  <div className='rounded-lg border p-3'>
+                    <div className='text-xs text-muted-foreground'>状态</div>
+                    <div className='mt-2'>
                       <Badge variant={statusVariant(selectedExecution.status)}>
-                        {STATUS_LABELS[selectedExecution.status] || selectedExecution.status}
+                        {STATUS_LABELS[selectedExecution.status] ||
+                          selectedExecution.status}
                       </Badge>
                     </div>
                   </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="text-xs text-muted-foreground">触发来源</div>
-                    <div className="mt-2 text-sm font-medium">
-                      {TRIGGER_LABELS[selectedExecution.triggered_by] || selectedExecution.triggered_by}
+                  <div className='rounded-lg border p-3'>
+                    <div className='text-xs text-muted-foreground'>
+                      触发来源
+                    </div>
+                    <div className='mt-2 text-sm font-medium'>
+                      {TRIGGER_LABELS[selectedExecution.triggered_by] ||
+                        selectedExecution.triggered_by}
                     </div>
                   </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="text-xs text-muted-foreground">重试次数</div>
-                    <div className="mt-2 font-mono text-sm">
-                      {selectedExecution.retry_count}/{selectedExecution.max_retry}
+                  <div className='rounded-lg border p-3'>
+                    <div className='text-xs text-muted-foreground'>
+                      重试次数
+                    </div>
+                    <div className='mt-2 font-mono text-sm'>
+                      {selectedExecution.retry_count}/
+                      {selectedExecution.max_retry}
                     </div>
                   </div>
-                  <div className="rounded-lg border p-3">
-                    <div className="text-xs text-muted-foreground">耗时</div>
-                    <div className="mt-2 font-mono text-sm">
+                  <div className='rounded-lg border p-3'>
+                    <div className='text-xs text-muted-foreground'>耗时</div>
+                    <div className='mt-2 font-mono text-sm'>
                       {formatDuration(selectedExecution.duration)}
                     </div>
                   </div>
                 </div>
 
-                <div className="grid gap-2">
+                <div className='grid gap-2'>
                   <Label>任务标识</Label>
-                  <div className="rounded-md border bg-muted/40 px-3 py-2 font-mono text-xs break-all">
+                  <div className='rounded-md border bg-muted/40 px-3 py-2 font-mono text-xs break-all'>
                     {selectedExecution.task_id}
                   </div>
                 </div>
 
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-                  <div className="grid gap-2">
+                <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                  <div className='grid gap-2'>
                     <Label>创建时间</Label>
-                    <div className="font-mono text-xs text-muted-foreground">{formatDateTime(selectedExecution.created_at)}</div>
+                    <div className='font-mono text-xs text-muted-foreground'>
+                      {formatDateTime(selectedExecution.created_at)}
+                    </div>
                   </div>
-                  <div className="grid gap-2">
+                  <div className='grid gap-2'>
                     <Label>开始时间</Label>
-                    <div className="font-mono text-xs text-muted-foreground">{formatDateTime(selectedExecution.started_at)}</div>
+                    <div className='font-mono text-xs text-muted-foreground'>
+                      {formatDateTime(selectedExecution.started_at)}
+                    </div>
                   </div>
-                  <div className="grid gap-2">
+                  <div className='grid gap-2'>
                     <Label>结束时间</Label>
-                    <div className="font-mono text-xs text-muted-foreground">{formatDateTime(selectedExecution.finished_at)}</div>
+                    <div className='font-mono text-xs text-muted-foreground'>
+                      {formatDateTime(selectedExecution.finished_at)}
+                    </div>
                   </div>
-                  <div className="grid gap-2">
+                  <div className='grid gap-2'>
                     <Label>更新时间</Label>
-                    <div className="font-mono text-xs text-muted-foreground">{formatDateTime(selectedExecution.updated_at)}</div>
+                    <div className='font-mono text-xs text-muted-foreground'>
+                      {formatDateTime(selectedExecution.updated_at)}
+                    </div>
                   </div>
                 </div>
 
-                <div className="grid gap-2">
+                <div className='grid gap-2'>
                   <Label>执行结果</Label>
-                  <div className="min-h-10 rounded-md border bg-muted/30 px-3 py-2 text-sm whitespace-pre-wrap break-all">
-                    {selectedExecution.result || "-"}
+                  <div className='min-h-10 rounded-md border bg-muted/30 px-3 py-2 text-sm whitespace-pre-wrap break-all'>
+                    {selectedExecution.result || '-'}
                   </div>
                 </div>
 
                 {selectedExecution.error_message && (
-                  <div className="grid gap-2">
+                  <div className='grid gap-2'>
                     <Label>错误信息</Label>
-                    <div className="rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive whitespace-pre-wrap break-all">
+                    <div className='rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive whitespace-pre-wrap break-all'>
                       {selectedExecution.error_message}
                     </div>
                   </div>
                 )}
 
-                <div className="grid gap-2">
+                <div className='grid gap-2'>
                   <Label>Payload</Label>
-                  <pre className="max-h-40 overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed">
-                    {selectedExecution.payload || "{}"}
+                  <pre className='max-h-40 overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed'>
+                    {selectedExecution.payload || '{}'}
                   </pre>
                 </div>
 
-                <div className="grid gap-2">
+                <div className='grid gap-2'>
                   <Label>执行日志</Label>
-                  <pre className="min-h-48 max-h-[420px] overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed whitespace-pre-wrap">
-                    {selectedExecution.log || "暂无日志"}
+                  <pre className='min-h-48 max-h-[420px] overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed whitespace-pre-wrap'>
+                    {selectedExecution.log || '暂无日志'}
                   </pre>
                 </div>
               </div>
             ) : (
-              <EmptyStateWithBorder icon={Activity} description="未选择任务记录" />
+              <EmptyStateWithBorder
+                icon={Activity}
+                description='未选择任务记录'
+              />
             )}
           </div>
 
-          <SheetFooter className="border-t">
-            <Button variant="outline" onClick={() => void detailQuery.refetch()} disabled={!selectedExecutionId || detailLoading}>
-              {detailLoading ? <Spinner className="size-4" /> : <RefreshCw className="size-4" />}
+          <SheetFooter className='border-t'>
+            <Button
+              variant='outline'
+              onClick={() => void detailQuery.refetch()}
+              disabled={!selectedExecutionId || detailLoading}
+            >
+              {detailLoading ? (
+                <Spinner className='size-4' />
+              ) : (
+                <RefreshCw className='size-4' />
+              )}
               刷新详情
             </Button>
-            {selectedExecution && selectedExecution.status === "failed" && selectedExecution.retryable && (
-              <Button onClick={() => retryMutation.mutate(selectedExecution.id)} disabled={retryMutation.isPending}>
-                {retryMutation.isPending ? <Spinner className="size-4" /> : <RotateCcw className="size-4" />}
-                重试任务
-              </Button>
-            )}
+            {selectedExecution &&
+              selectedExecution.status === 'failed' &&
+              selectedExecution.retryable && (
+                <Button
+                  onClick={() => retryMutation.mutate(selectedExecution.id)}
+                  disabled={retryMutation.isPending}
+                >
+                  {retryMutation.isPending ? (
+                    <Spinner className='size-4' />
+                  ) : (
+                    <RotateCcw className='size-4' />
+                  )}
+                  重试任务
+                </Button>
+              )}
           </SheetFooter>
         </SheetContent>
       </Sheet>
     </div>
-  )
-}
+  );
+}

frontend/app/(main)/admin/tasks/components/task-manager.tsx

@@ -1,116 +1,150 @@
-"use client"
+'use client';
 
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Textarea} from "@/components/ui/textarea"
-import {Switch} from "@/components/ui/switch"
-import {Spinner} from "@/components/ui/spinner"
-import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from "@/components/ui/dialog"
-import {Calendar as CalendarIcon, Clock, Info, Layers, Play} from "lucide-react"
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Calendar as CalendarIcon,
+  Clock,
+  Info,
+  Layers,
+  Play,
+} from 'lucide-react';
 
-import type {DispatchTaskRequest, TaskMeta} from "@/lib/services/admin"
-import services from "@/lib/services"
-import {buildTaskPayload} from "@/lib/task-param-utils"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {Badge} from "@/components/ui/badge"
-import {cn} from "@/lib/utils"
+import type { DispatchTaskRequest, TaskMeta } from '@/lib/services/admin';
+import services from '@/lib/services';
+import { buildTaskPayload } from '@/lib/task-param-utils';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
 
-import {format} from "date-fns"
-import {zhCN} from "date-fns/locale"
-import {Calendar} from "@/components/ui/calendar"
-import {Popover, PopoverContent, PopoverTrigger,} from "@/components/ui/popover"
+import { format } from 'date-fns';
+import { zhCN } from 'date-fns/locale';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 
-const TASK_CONFIGS: Record<string, { icon: React.ComponentType<{ className?: string }>, color: string, gradient: string }> = {
-  'order_sync': {
-    icon: Layers,
-    color: "text-blue-600 dark:text-blue-400",
-    gradient: "from-blue-500/10 via-blue-500/5 to-transparent border-blue-200/50 dark:border-blue-800/50 hover:border-blue-400 dark:hover:border-blue-500",
-  },
-  'user_gamification': {
-    icon: Play,
-    color: "text-amber-600 dark:text-amber-400",
-    gradient: "from-amber-500/10 via-amber-500/5 to-transparent border-amber-200/50 dark:border-amber-800/50 hover:border-amber-400 dark:hover:border-amber-500",
-  },
-  'dispute_auto_refund': {
-    icon: Clock,
-    color: "text-rose-600 dark:text-rose-400",
-    gradient: "from-rose-500/10 via-rose-500/5 to-transparent border-rose-200/50 dark:border-rose-800/50 hover:border-rose-400 dark:hover:border-rose-500",
+const TASK_CONFIGS: Record<
+  string,
+  {
+    icon: React.ComponentType<{ className?: string }>;
+    color: string;
+    gradient: string;
   }
-}
+> = {
+  order_sync: {
+    icon: Layers,
+    color: 'text-blue-600 dark:text-blue-400',
+    gradient:
+      'from-blue-500/10 via-blue-500/5 to-transparent border-blue-200/50 dark:border-blue-800/50 hover:border-blue-400 dark:hover:border-blue-500',
+  },
+  user_gamification: {
+    icon: Play,
+    color: 'text-amber-600 dark:text-amber-400',
+    gradient:
+      'from-amber-500/10 via-amber-500/5 to-transparent border-amber-200/50 dark:border-amber-800/50 hover:border-amber-400 dark:hover:border-amber-500',
+  },
+  dispute_auto_refund: {
+    icon: Clock,
+    color: 'text-rose-600 dark:text-rose-400',
+    gradient:
+      'from-rose-500/10 via-rose-500/5 to-transparent border-rose-200/50 dark:border-rose-800/50 hover:border-rose-400 dark:hover:border-rose-500',
+  },
+};
 
 const DEFAULT_TASK_CONFIG = {
   icon: Layers,
-  color: "text-zinc-600 dark:text-zinc-400",
-  gradient: "from-zinc-500/10 via-zinc-500/5 to-transparent border-zinc-200/50 dark:border-zinc-800/50 hover:border-zinc-400 dark:hover:border-zinc-500",
-}
+  color: 'text-zinc-600 dark:text-zinc-400',
+  gradient:
+    'from-zinc-500/10 via-zinc-500/5 to-transparent border-zinc-200/50 dark:border-zinc-800/50 hover:border-zinc-400 dark:hover:border-zinc-500',
+};
 
-function DatePickerWithTime({ date, setDate }: { date: Date | undefined, setDate: (date: Date | undefined) => void }) {
-  const timeString = date ? format(date, "HH:mm:ss") : ""
+function DatePickerWithTime({
+  date,
+  setDate,
+}: {
+  date: Date | undefined;
+  setDate: (date: Date | undefined) => void;
+}) {
+  const timeString = date ? format(date, 'HH:mm:ss') : '';
 
   const handleDateSelect = (newDate: Date | undefined) => {
     if (!newDate) {
-      setDate(undefined)
-      return
+      setDate(undefined);
+      return;
     }
 
-    const updated = new Date(newDate)
+    const updated = new Date(newDate);
 
     if (date) {
-      updated.setHours(date.getHours())
-      updated.setMinutes(date.getMinutes())
-      updated.setSeconds(date.getSeconds())
+      updated.setHours(date.getHours());
+      updated.setMinutes(date.getMinutes());
+      updated.setSeconds(date.getSeconds());
     } else {
-      updated.setHours(0, 0, 0, 0)
+      updated.setHours(0, 0, 0, 0);
     }
 
-    setDate(updated)
-  }
+    setDate(updated);
+  };
 
   const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTime = e.target.value
-    if (!newTime) return
+    const newTime = e.target.value;
+    if (!newTime) return;
 
     if (date) {
-      const [hours, minutes, seconds] = newTime.split(':').map(Number)
-      const updated = new Date(date)
-      updated.setHours(hours || 0)
-      updated.setMinutes(minutes || 0)
-      updated.setSeconds(seconds || 0)
-      setDate(updated)
+      const [hours, minutes, seconds] = newTime.split(':').map(Number);
+      const updated = new Date(date);
+      updated.setHours(hours || 0);
+      updated.setMinutes(minutes || 0);
+      updated.setSeconds(seconds || 0);
+      setDate(updated);
     } else {
-      const today = new Date()
-      const [hours, minutes, seconds] = newTime.split(':').map(Number)
-      today.setHours(hours || 0)
-      today.setMinutes(minutes || 0)
-      today.setSeconds(seconds || 0)
-      setDate(today)
+      const today = new Date();
+      const [hours, minutes, seconds] = newTime.split(':').map(Number);
+      today.setHours(hours || 0);
+      today.setMinutes(minutes || 0);
+      today.setSeconds(seconds || 0);
+      setDate(today);
     }
-  }
+  };
 
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex-1">
+    <div className='flex items-center gap-2'>
+      <div className='flex-1'>
         <Popover>
           <PopoverTrigger asChild>
             <Button
-              variant={"outline"}
+              variant={'outline'}
               className={cn(
-                "w-full justify-start text-left font-normal text-xs h-8",
-                !date && "text-muted-foreground"
+                'w-full justify-start text-left font-normal text-xs h-8',
+                !date && 'text-muted-foreground',
               )}
             >
-              <CalendarIcon className="mr-1 size-3" />
-              {date ? format(date, "yyyy-MM-dd") : <span>选择日期</span>}
+              <CalendarIcon className='mr-1 size-3' />
+              {date ? format(date, 'yyyy-MM-dd') : <span>选择日期</span>}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
+          <PopoverContent className='w-auto p-0' align='start'>
             <Calendar
-              mode="single"
+              mode='single'
               selected={date}
               onSelect={handleDateSelect}
               locale={zhCN}
@@ -118,197 +152,218 @@ function DatePickerWithTime({ date, setDate }: { date: Date | undefined, setDate
           </PopoverContent>
         </Popover>
       </div>
-      <div className="w-[120px]">
+      <div className='w-[120px]'>
         <Input
-          type="time"
-          step="1"
+          type='time'
+          step='1'
           value={timeString}
           onChange={handleTimeChange}
-          className="text-xs font-mono"
+          className='text-xs font-mono'
         />
       </div>
     </div>
-  )
+  );
 }
 
 export function TaskManager() {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-  const [taskTypes, setTaskTypes] = useState<TaskMeta[]>([])
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [taskTypes, setTaskTypes] = useState<TaskMeta[]>([]);
 
-  const [dispatching, setDispatching] = useState(false)
-  const [selectedTaskType, setSelectedTaskType] = useState<string | null>(null)
-  const [dialogOpen, setDialogOpen] = useState(false)
+  const [dispatching, setDispatching] = useState(false);
+  const [selectedTaskType, setSelectedTaskType] = useState<string | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
-  const [startTime, setStartTime] = useState<Date | undefined>(undefined)
-  const [endTime, setEndTime] = useState<Date | undefined>(undefined)
-  const [userId, setUserId] = useState("")
-  const [paramValues, setParamValues] = useState<Record<string, string>>({})
+  const [startTime, setStartTime] = useState<Date | undefined>(undefined);
+  const [endTime, setEndTime] = useState<Date | undefined>(undefined);
+  const [userId, setUserId] = useState('');
+  const [paramValues, setParamValues] = useState<Record<string, string>>({});
 
   const fetchTaskTypes = useCallback(async () => {
     try {
-      setLoading(true)
-      setError(null)
-      const data = await services.adminTask.getTaskTypes()
-      setTaskTypes(data)
+      setLoading(true);
+      setError(null);
+      const data = await services.adminTask.getTaskTypes();
+      setTaskTypes(data);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error('加载任务类型失败'))
+      setError(err instanceof Error ? err : new Error('加载任务类型失败'));
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    fetchTaskTypes()
-  }, [fetchTaskTypes])
+    fetchTaskTypes();
+  }, [fetchTaskTypes]);
 
   useEffect(() => {
     if (selectedTaskType) {
-      const targetTask = taskTypes.find(t => t.type === selectedTaskType)
+      const targetTask = taskTypes.find((t) => t.type === selectedTaskType);
       if (targetTask?.params) {
-        const initialValues: Record<string, string> = {}
-        targetTask.params.forEach(p => {
-          initialValues[p.name] = ""
-        })
-        setParamValues(initialValues)
+        const initialValues: Record<string, string> = {};
+        targetTask.params.forEach((p) => {
+          initialValues[p.name] = '';
+        });
+        setParamValues(initialValues);
       } else {
-        setParamValues({})
+        setParamValues({});
       }
     }
-  }, [selectedTaskType, taskTypes])
+  }, [selectedTaskType, taskTypes]);
 
   const handleDispatch = async () => {
-    if (!selectedTaskType) return
+    if (!selectedTaskType) return;
 
     try {
-      setDispatching(true)
+      setDispatching(true);
 
-      const targetTask = taskTypes.find(t => t.type === selectedTaskType)
+      const targetTask = taskTypes.find((t) => t.type === selectedTaskType);
 
       const params: DispatchTaskRequest = {
-        task_type: selectedTaskType
-      }
+        task_type: selectedTaskType,
+      };
 
       if (targetTask?.supports_time) {
-        if (startTime) params.start_time = startTime.toISOString()
-        if (endTime) params.end_time = endTime.toISOString()
+        if (startTime) params.start_time = startTime.toISOString();
+        if (endTime) params.end_time = endTime.toISOString();
       }
 
       if (targetTask?.type === 'user_gamification') {
-        if (userId) params.user_id = userId
+        if (userId) params.user_id = userId;
       }
 
       // Handle dynamic parameters — type coercion (number vs string) is
       // centralised in buildTaskPayload; do not inline it here.
       if (targetTask?.params && targetTask.params.length > 0) {
-        const { payload, error } = buildTaskPayload(targetTask.params, paramValues)
+        const { payload, error } = buildTaskPayload(
+          targetTask.params,
+          paramValues,
+        );
         if (error) {
-          toast.error(error)
-          setDispatching(false)
-          return
+          toast.error(error);
+          setDispatching(false);
+          return;
         }
-        params.payload = payload ?? undefined
+        params.payload = payload ?? undefined;
       }
 
-      const taskID = await services.adminTask.dispatchTask(params)
+      const taskID = await services.adminTask.dispatchTask(params);
 
       toast.success('任务下发成功', {
-        description: `已成功将任务 ${ targetTask?.name || selectedTaskType } 加入队列：${ taskID }`
-      })
-      setDialogOpen(false)
+        description: `已成功将任务 ${targetTask?.name || selectedTaskType} 加入队列：${taskID}`,
+      });
+      setDialogOpen(false);
 
-      setStartTime(undefined)
-      setEndTime(undefined)
-      setUserId("")
-      setParamValues({})
+      setStartTime(undefined);
+      setEndTime(undefined);
+      setUserId('');
+      setParamValues({});
     } catch (err) {
       toast.error('任务下发失败', {
-        description: err instanceof Error ? err.message : '未知错误'
-      })
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setDispatching(false)
+      setDispatching(false);
     }
-  }
+  };
 
   const openDispatchDialog = (type: string) => {
-    setSelectedTaskType(type)
-    setDialogOpen(true)
-  }
+    setSelectedTaskType(type);
+    setDialogOpen(true);
+  };
 
   const getSelectedTaskMeta = () => {
-    return taskTypes.find(t => t.type === selectedTaskType)
-  }
+    return taskTypes.find((t) => t.type === selectedTaskType);
+  };
 
   return (
-    <div className="space-y-6">
-      <br/>
+    <div className='space-y-6'>
+      <br />
 
-      <div className="space-y-6">
+      <div className='space-y-6'>
         {error ? (
-          <div className="p-8 border border-dashed rounded-xl bg-card">
-            <ErrorInline error={error} onRetry={fetchTaskTypes} className="justify-center" />
+          <div className='p-8 border border-dashed rounded-xl bg-card'>
+            <ErrorInline
+              error={error}
+              onRetry={fetchTaskTypes}
+              className='justify-center'
+            />
           </div>
         ) : loading && taskTypes.length === 0 ? (
-          <LoadingStateWithBorder icon={Layers} description="加载任务类型中..." />
+          <LoadingStateWithBorder
+            icon={Layers}
+            description='加载任务类型中...'
+          />
         ) : taskTypes.length === 0 ? (
-          <EmptyStateWithBorder icon={Layers} description="暂无可用任务类型" />
+          <EmptyStateWithBorder icon={Layers} description='暂无可用任务类型' />
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4'>
             {taskTypes.map((task, index) => {
-              const config = TASK_CONFIGS[task.type] || DEFAULT_TASK_CONFIG
+              const config = TASK_CONFIGS[task.type] || DEFAULT_TASK_CONFIG;
 
               return (
                 <div
-                  key={`${ task.type }-${ index }`}
+                  key={`${task.type}-${index}`}
                   className={cn(
-                    "relative group overflow-hidden rounded-xl border bg-gradient-to-br transition-all duration-500",
-                    config.gradient
+                    'relative group overflow-hidden rounded-xl border bg-gradient-to-br transition-all duration-500',
+                    config.gradient,
                   )}
                 >
-                  <div className="relative h-full bg-card/40 backdrop-blur-sm p-4 flex flex-col justify-between hover:bg-card/0 transition-colors duration-500">
-                    <div className="space-y-2">
-                      <div className="flex items-start justify-between">
-                        <div className="space-y-1">
-                          <h3 className="font-semibold text-base tracking-tight">{task.name}</h3>
-                          <p className="text-xs text-muted-foreground leading-relaxed line-clamp-2 min-h-[36px]">
+                  <div className='relative h-full bg-card/40 backdrop-blur-sm p-4 flex flex-col justify-between hover:bg-card/0 transition-colors duration-500'>
+                    <div className='space-y-2'>
+                      <div className='flex items-start justify-between'>
+                        <div className='space-y-1'>
+                          <h3 className='font-semibold text-base tracking-tight'>
+                            {task.name}
+                          </h3>
+                          <p className='text-xs text-muted-foreground leading-relaxed line-clamp-2 min-h-[36px]'>
                             {task.description}
                           </p>
                         </div>
-                        <Badge variant="secondary" className="font-mono text-[10px] bg-background/50 backdrop-blur-md border px-1.5 h-5">
+                        <Badge
+                          variant='secondary'
+                          className='font-mono text-[10px] bg-background/50 backdrop-blur-md border px-1.5 h-5'
+                        >
                           {task.queue}
                         </Badge>
                       </div>
 
-                      <div className="flex flex-wrap gap-1.5">
-                        <Badge variant="outline" className="text-[9px] h-4.5 bg-background/50 font-mono text-muted-foreground border-border/50 px-1">
+                      <div className='flex flex-wrap gap-1.5'>
+                        <Badge
+                          variant='outline'
+                          className='text-[9px] h-4.5 bg-background/50 font-mono text-muted-foreground border-border/50 px-1'
+                        >
                           类型：{task.type}
                         </Badge>
-                        <Badge variant="outline" className="text-[9px] h-4.5 bg-background/50 font-mono text-muted-foreground border-border/50 px-1">
+                        <Badge
+                          variant='outline'
+                          className='text-[9px] h-4.5 bg-background/50 font-mono text-muted-foreground border-border/50 px-1'
+                        >
                           重试：{task.max_retry}
                         </Badge>
                       </div>
                     </div>
 
-                    <div className="pt-4 mt-1">
+                    <div className='pt-4 mt-1'>
                       <Button
-                        className="w-full h-7 text-xs"
-                        variant="secondary"
+                        className='w-full h-7 text-xs'
+                        variant='secondary'
                         onClick={() => openDispatchDialog(task.type)}
                       >
-                        <Play className="size-3 mr-1" />
+                        <Play className='size-3 mr-1' />
                         立即执行
                       </Button>
                     </div>
                   </div>
                 </div>
-              )
+              );
             })}
           </div>
         )}
       </div>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="sm:max-w-[500px]">
+        <DialogContent className='sm:max-w-[500px]'>
           <DialogHeader>
             <DialogTitle>下发任务</DialogTitle>
             <DialogDescription>
@@ -316,81 +371,111 @@ export function TaskManager() {
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
+          <div className='grid gap-4 py-4'>
+            <div className='grid gap-2'>
               <Label>执行任务</Label>
-              <div className="flex items-center gap-2 p-2 rounded-lg bg-muted/50">
+              <div className='flex items-center gap-2 p-2 rounded-lg bg-muted/50'>
                 {(() => {
-                  const meta = getSelectedTaskMeta()
-                  if (!meta) return null
-                  const config = TASK_CONFIGS[meta.type] || DEFAULT_TASK_CONFIG
-                  const Icon = config.icon
+                  const meta = getSelectedTaskMeta();
+                  if (!meta) return null;
+                  const config = TASK_CONFIGS[meta.type] || DEFAULT_TASK_CONFIG;
+                  const Icon = config.icon;
                   return (
                     <>
-                      <div className={cn("p-2", config.color)}>
-                        <Icon className="size-4" />
+                      <div className={cn('p-2', config.color)}>
+                        <Icon className='size-4' />
                       </div>
-                      <div className="flex flex-col">
-                        <span className="text-xs font-medium">{meta.name}</span>
-                        <span className="text-[10px] text-muted-foreground font-mono">{meta.type}</span>
+                      <div className='flex flex-col'>
+                        <span className='text-xs font-medium'>{meta.name}</span>
+                        <span className='text-[10px] text-muted-foreground font-mono'>
+                          {meta.type}
+                        </span>
                       </div>
                     </>
-                  )
+                  );
                 })()}
               </div>
             </div>
 
             {(() => {
-              const targetTask = getSelectedTaskMeta()
+              const targetTask = getSelectedTaskMeta();
               if (targetTask?.supports_time) {
                 return (
                   <>
-                    <div className="grid gap-2">
+                    <div className='grid gap-2'>
                       <Label>开始时间</Label>
-                      <DatePickerWithTime date={startTime} setDate={setStartTime} />
-                      <p className="text-xs text-muted-foreground">选择同步的起始时间点</p>
+                      <DatePickerWithTime
+                        date={startTime}
+                        setDate={setStartTime}
+                      />
+                      <p className='text-xs text-muted-foreground'>
+                        选择同步的起始时间点
+                      </p>
                     </div>
-                    <div className="grid gap-2">
+                    <div className='grid gap-2'>
                       <Label>结束时间</Label>
                       <DatePickerWithTime date={endTime} setDate={setEndTime} />
-                      <p className="text-xs text-muted-foreground">选择同步的结束时间点</p>
+                      <p className='text-xs text-muted-foreground'>
+                        选择同步的结束时间点
+                      </p>
                     </div>
                   </>
-                )
+                );
               }
-              return null
+              return null;
             })()}
 
             {(() => {
-              const targetTask = getSelectedTaskMeta()
-              if (!targetTask || !targetTask.params || targetTask.params.length === 0) {
-                return null
+              const targetTask = getSelectedTaskMeta();
+              if (
+                !targetTask ||
+                !targetTask.params ||
+                targetTask.params.length === 0
+              ) {
+                return null;
               }
               return (
-                <div className="space-y-4">
+                <div className='space-y-4'>
                   {targetTask.params.map((param) => (
-                    <div key={param.name} className="grid gap-2">
-                      <Label htmlFor={`param-${param.name}`} className="flex items-center gap-1">
+                    <div key={param.name} className='grid gap-2'>
+                      <Label
+                        htmlFor={`param-${param.name}`}
+                        className='flex items-center gap-1'
+                      >
                         {param.label}
-                        {param.required && <span className="text-destructive font-bold">*</span>}
+                        {param.required && (
+                          <span className='text-destructive font-bold'>*</span>
+                        )}
                       </Label>
                       {param.type === 'text' ? (
                         <Textarea
                           id={`param-${param.name}`}
                           placeholder={param.placeholder}
-                          className="text-xs min-h-[80px]"
-                          value={paramValues[param.name] || ""}
-                          onChange={(e) => setParamValues(prev => ({ ...prev, [param.name]: e.target.value }))}
+                          className='text-xs min-h-[80px]'
+                          value={paramValues[param.name] || ''}
+                          onChange={(e) =>
+                            setParamValues((prev) => ({
+                              ...prev,
+                              [param.name]: e.target.value,
+                            }))
+                          }
                         />
                       ) : param.type === 'boolean' ? (
-                        <div className="flex items-center gap-2 pt-1 h-9">
+                        <div className='flex items-center gap-2 pt-1 h-9'>
                           <Switch
                             id={`param-${param.name}`}
                             checked={paramValues[param.name] === 'true'}
-                            onCheckedChange={(checked) => setParamValues(prev => ({ ...prev, [param.name]: checked ? 'true' : 'false' }))}
+                            onCheckedChange={(checked) =>
+                              setParamValues((prev) => ({
+                                ...prev,
+                                [param.name]: checked ? 'true' : 'false',
+                              }))
+                            }
                           />
-                          <span className="text-xs text-muted-foreground">
-                            {paramValues[param.name] === 'true' ? '开启' : '关闭'}
+                          <span className='text-xs text-muted-foreground'>
+                            {paramValues[param.name] === 'true'
+                              ? '开启'
+                              : '关闭'}
                           </span>
                         </div>
                       ) : (
@@ -398,47 +483,68 @@ export function TaskManager() {
                           id={`param-${param.name}`}
                           type={param.type === 'number' ? 'number' : 'text'}
                           placeholder={param.placeholder}
-                          className="text-xs"
-                          value={paramValues[param.name] || ""}
-                          onChange={(e) => setParamValues(prev => ({ ...prev, [param.name]: e.target.value }))}
+                          className='text-xs'
+                          value={paramValues[param.name] || ''}
+                          onChange={(e) =>
+                            setParamValues((prev) => ({
+                              ...prev,
+                              [param.name]: e.target.value,
+                            }))
+                          }
                         />
                       )}
                       {param.description && (
-                        <p className="text-[10px] text-muted-foreground">{param.description}</p>
+                        <p className='text-[10px] text-muted-foreground'>
+                          {param.description}
+                        </p>
                       )}
                     </div>
                   ))}
                 </div>
-              )
+              );
             })()}
 
             {(() => {
-              const targetTask = getSelectedTaskMeta()
-              const hasTime = targetTask?.supports_time
-              const hasParams = targetTask?.params && targetTask.params.length > 0
+              const targetTask = getSelectedTaskMeta();
+              const hasTime = targetTask?.supports_time;
+              const hasParams =
+                targetTask?.params && targetTask.params.length > 0;
               if (!hasTime && !hasParams) {
                 return (
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/50 p-3 rounded-md border border-dashed">
-                    <Info className="h-4 w-4" />
+                  <div className='flex items-center gap-2 text-sm text-muted-foreground bg-muted/50 p-3 rounded-md border border-dashed'>
+                    <Info className='h-4 w-4' />
                     <span>此任务无需额外配置参数，确认后将直接下发。</span>
                   </div>
-                )
+                );
               }
-              return null
+              return null;
             })()}
           </div>
 
           <DialogFooter>
-            <Button variant="ghost" onClick={() => setDialogOpen(false)} disabled={dispatching} className="h-8 text-xs">
+            <Button
+              variant='ghost'
+              onClick={() => setDialogOpen(false)}
+              disabled={dispatching}
+              className='h-8 text-xs'
+            >
               取消
             </Button>
-            <Button onClick={handleDispatch} disabled={dispatching} className="h-8 text-xs">
-              {dispatching ? <Spinner className="size-3" /> : <Play className="size-3" />}
+            <Button
+              onClick={handleDispatch}
+              disabled={dispatching}
+              className='h-8 text-xs'
+            >
+              {dispatching ? (
+                <Spinner className='size-3' />
+              ) : (
+                <Play className='size-3' />
+              )}
               {dispatching ? '下发中' : '启动'}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/tasks/components/task-schedules.tsx

@@ -1,100 +1,119 @@
-"use client"
+'use client';
 
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Textarea} from "@/components/ui/textarea"
-import {Switch} from "@/components/ui/switch"
-import {Spinner} from "@/components/ui/spinner"
-import {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from "@/components/ui/dialog"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import {Clock, Edit2, Info, Plus, RefreshCw, Trash2} from "lucide-react"
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Clock, Edit2, Info, Plus, RefreshCw, Trash2 } from 'lucide-react';
 
-import type {CreateScheduleRequest, Schedule, TaskMeta, UpdateScheduleRequest} from "@/lib/services/admin"
-import services from "@/lib/services"
-import {buildTaskPayload} from "@/lib/task-param-utils"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
+import type {
+  CreateScheduleRequest,
+  Schedule,
+  TaskMeta,
+  UpdateScheduleRequest,
+} from '@/lib/services/admin';
+import services from '@/lib/services';
+import { buildTaskPayload } from '@/lib/task-param-utils';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
 
 export function TaskSchedulesManager() {
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error | null>(null)
-  const [schedules, setSchedules] = useState<Schedule[]>([])
-  const [taskTypes, setTaskTypes] = useState<TaskMeta[]>([])
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [schedules, setSchedules] = useState<Schedule[]>([]);
+  const [taskTypes, setTaskTypes] = useState<TaskMeta[]>([]);
 
   // Modal States
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [submitLoading, setSubmitLoading] = useState(false)
-  const [editingSchedule, setEditingSchedule] = useState<Schedule | null>(null)
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [editingSchedule, setEditingSchedule] = useState<Schedule | null>(null);
 
   // Delete States
-  const [deleteOpen, setDeleteOpen] = useState(false)
-  const [deletingId, setDeletingId] = useState<string | null>(null)
-  const [deleteLoading, setDeleteLoading] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
 
   // Form Fields
-  const [name, setName] = useState("")
-  const [selectedTaskType, setSelectedTaskType] = useState("")
-  const [cron, setCron] = useState("")
-  const [isActive, setIsActive] = useState(true)
-  const [paramValues, setParamValues] = useState<Record<string, string>>({})
+  const [name, setName] = useState('');
+  const [selectedTaskType, setSelectedTaskType] = useState('');
+  const [cron, setCron] = useState('');
+  const [isActive, setIsActive] = useState(true);
+  const [paramValues, setParamValues] = useState<Record<string, string>>({});
 
   // Fetch Schedules & Task Types
   const fetchData = useCallback(async () => {
     try {
-      setLoading(true)
-      setError(null)
+      setLoading(true);
+      setError(null);
       const [schedulesData, taskTypesData] = await Promise.all([
         services.adminTask.listSchedules(),
-        services.adminTask.getTaskTypes()
-      ])
-      setSchedules(schedulesData || [])
-      setTaskTypes(taskTypesData || [])
+        services.adminTask.getTaskTypes(),
+      ]);
+      setSchedules(schedulesData || []);
+      setTaskTypes(taskTypesData || []);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error("加载定时任务配置失败"))
+      setError(err instanceof Error ? err : new Error('加载定时任务配置失败'));
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    fetchData()
-  }, [fetchData])
+    fetchData();
+  }, [fetchData]);
 
   // Track task type selection to initialize parameters
   useEffect(() => {
     if (selectedTaskType) {
-      const targetTask = taskTypes.find(t => t.type === selectedTaskType)
+      const targetTask = taskTypes.find((t) => t.type === selectedTaskType);
       if (editingSchedule && editingSchedule.task_type === selectedTaskType) {
         // Parse existing payload when editing the same task type
         try {
-          const parsed = JSON.parse(editingSchedule.payload || "{}")
-          const values: Record<string, string> = {}
-          targetTask?.params?.forEach(p => {
-            values[p.name] = String(parsed[p.name] ?? "")
-          })
-          setParamValues(values)
+          const parsed = JSON.parse(editingSchedule.payload || '{}');
+          const values: Record<string, string> = {};
+          targetTask?.params?.forEach((p) => {
+            values[p.name] = String(parsed[p.name] ?? '');
+          });
+          setParamValues(values);
         } catch {
-          const initialValues: Record<string, string> = {}
-          targetTask?.params?.forEach(p => {
-            initialValues[p.name] = ""
-          })
-          setParamValues(initialValues)
+          const initialValues: Record<string, string> = {};
+          targetTask?.params?.forEach((p) => {
+            initialValues[p.name] = '';
+          });
+          setParamValues(initialValues);
         }
       } else {
-        const initialValues: Record<string, string> = {}
-        targetTask?.params?.forEach(p => {
-          initialValues[p.name] = ""
-        })
-        setParamValues(initialValues)
+        const initialValues: Record<string, string> = {};
+        targetTask?.params?.forEach((p) => {
+          initialValues[p.name] = '';
+        });
+        setParamValues(initialValues);
       }
     } else {
-      setParamValues({})
+      setParamValues({});
     }
-  }, [selectedTaskType, taskTypes, editingSchedule])
+  }, [selectedTaskType, taskTypes, editingSchedule]);
 
   const handleToggleActive = async (schedule: Schedule) => {
     try {
@@ -103,61 +122,70 @@ export function TaskSchedulesManager() {
         task_type: schedule.task_type,
         cron: schedule.cron,
         payload: schedule.payload,
-        is_active: !schedule.is_active
-      })
+        is_active: !schedule.is_active,
+      });
 
-      setSchedules(prev => prev.map(s => s.id === schedule.id ? updated : s))
-      toast.success(updated.is_active ? `已启用定时任务：${updated.name}` : `已停用定时任务：${updated.name}`)
+      setSchedules((prev) =>
+        prev.map((s) => (s.id === schedule.id ? updated : s)),
+      );
+      toast.success(
+        updated.is_active
+          ? `已启用定时任务：${updated.name}`
+          : `已停用定时任务：${updated.name}`,
+      );
     } catch (err) {
-      toast.error("修改任务状态失败", {
-        description: err instanceof Error ? err.message : "未知错误"
-      })
+      toast.error('修改任务状态失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     }
-  }
+  };
 
   const openCreateDialog = () => {
-    setEditingSchedule(null)
-    setName("")
-    setSelectedTaskType(taskTypes[0]?.type || "")
-    setCron("0 */2 * * *")
-    setIsActive(true)
-    setParamValues({})
-    setDialogOpen(true)
-  }
+    setEditingSchedule(null);
+    setName('');
+    setSelectedTaskType(taskTypes[0]?.type || '');
+    setCron('0 */2 * * *');
+    setIsActive(true);
+    setParamValues({});
+    setDialogOpen(true);
+  };
 
   const openEditDialog = (schedule: Schedule) => {
-    setEditingSchedule(schedule)
-    setName(schedule.name)
-    setSelectedTaskType(schedule.task_type)
-    setCron(schedule.cron)
-    setIsActive(schedule.is_active)
-    setDialogOpen(true)
-  }
+    setEditingSchedule(schedule);
+    setName(schedule.name);
+    setSelectedTaskType(schedule.task_type);
+    setCron(schedule.cron);
+    setIsActive(schedule.is_active);
+    setDialogOpen(true);
+  };
 
   const handleSubmit = async () => {
     if (!name.trim()) {
-      toast.error("任务名称不能为空")
-      return
+      toast.error('任务名称不能为空');
+      return;
     }
     if (!cron.trim()) {
-      toast.error("Cron 表达式不能为空")
-      return
+      toast.error('Cron 表达式不能为空');
+      return;
     }
 
     try {
-      setSubmitLoading(true)
+      setSubmitLoading(true);
 
-      const targetTask = taskTypes.find(t => t.type === selectedTaskType)
-      let payloadStr = '{}'
+      const targetTask = taskTypes.find((t) => t.type === selectedTaskType);
+      let payloadStr = '{}';
 
       if (targetTask?.params && targetTask.params.length > 0) {
-        const { payload, error } = buildTaskPayload(targetTask.params, paramValues)
+        const { payload, error } = buildTaskPayload(
+          targetTask.params,
+          paramValues,
+        );
         if (error) {
-          toast.error(error)
-          setSubmitLoading(false)
-          return
+          toast.error(error);
+          setSubmitLoading(false);
+          return;
         }
-        payloadStr = payload ?? '{}'
+        payloadStr = payload ?? '{}';
       }
 
       if (editingSchedule) {
@@ -166,145 +194,182 @@ export function TaskSchedulesManager() {
           task_type: selectedTaskType,
           cron,
           payload: payloadStr,
-          is_active: isActive
-        }
-        const updated = await services.adminTask.updateSchedule(editingSchedule.id, req)
-        setSchedules(prev => prev.map(s => s.id === editingSchedule.id ? updated : s))
-        toast.success("定时任务更新成功")
+          is_active: isActive,
+        };
+        const updated = await services.adminTask.updateSchedule(
+          editingSchedule.id,
+          req,
+        );
+        setSchedules((prev) =>
+          prev.map((s) => (s.id === editingSchedule.id ? updated : s)),
+        );
+        toast.success('定时任务更新成功');
       } else {
         const req: CreateScheduleRequest = {
           name,
           task_type: selectedTaskType,
           cron,
           payload: payloadStr,
-          is_active: isActive
-        }
-        const created = await services.adminTask.createSchedule(req)
-        setSchedules(prev => [created, ...prev])
-        toast.success("定时任务创建成功")
+          is_active: isActive,
+        };
+        const created = await services.adminTask.createSchedule(req);
+        setSchedules((prev) => [created, ...prev]);
+        toast.success('定时任务创建成功');
       }
 
-      setDialogOpen(false)
+      setDialogOpen(false);
     } catch (err) {
-      toast.error("提交失败", {
-        description: err instanceof Error ? err.message : "未知错误"
-      })
+      toast.error('提交失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setSubmitLoading(false)
+      setSubmitLoading(false);
     }
-  }
+  };
 
   const openDeleteDialog = (id: string) => {
-    setDeletingId(id)
-    setDeleteOpen(true)
-  }
+    setDeletingId(id);
+    setDeleteOpen(true);
+  };
 
   const handleDelete = async () => {
-    if (!deletingId) return
+    if (!deletingId) return;
     try {
-      setDeleteLoading(true)
-      await services.adminTask.deleteSchedule(deletingId)
-      setSchedules(prev => prev.filter(s => s.id !== deletingId))
-      toast.success("定时任务删除成功")
-      setDeleteOpen(false)
+      setDeleteLoading(true);
+      await services.adminTask.deleteSchedule(deletingId);
+      setSchedules((prev) => prev.filter((s) => s.id !== deletingId));
+      toast.success('定时任务删除成功');
+      setDeleteOpen(false);
     } catch (err) {
-      toast.error("删除失败", {
-        description: err instanceof Error ? err.message : "未知错误"
-      })
+      toast.error('删除失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setDeleteLoading(false)
+      setDeleteLoading(false);
     }
-  }
+  };
 
   const getSelectedTaskMeta = () => {
-    return taskTypes.find(t => t.type === selectedTaskType)
-  }
+    return taskTypes.find((t) => t.type === selectedTaskType);
+  };
 
   const getTaskName = (type: string) => {
-    const meta = taskTypes.find(t => t.type === type)
-    return meta ? meta.name : type
-  }
+    const meta = taskTypes.find((t) => t.type === type);
+    return meta ? meta.name : type;
+  };
 
   return (
-    <div className="space-y-6">
-      <br/>
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
-            {loading ? <Spinner className="size-4" /> : <RefreshCw className="size-4" />}
+    <div className='space-y-6'>
+      <br />
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={fetchData}
+            disabled={loading}
+          >
+            {loading ? (
+              <Spinner className='size-4' />
+            ) : (
+              <RefreshCw className='size-4' />
+            )}
             刷新
           </Button>
-          <Button size="sm" onClick={openCreateDialog} disabled={taskTypes.length === 0} variant={'secondary'}>
-            <Plus className="size-4 mr-1" />
+          <Button
+            size='sm'
+            onClick={openCreateDialog}
+            disabled={taskTypes.length === 0}
+            variant={'secondary'}
+          >
+            <Plus className='size-4 mr-1' />
             新增定时任务
           </Button>
         </div>
       </div>
 
       {error ? (
-        <div className="p-8 border border-dashed rounded-lg bg-card">
-          <ErrorInline error={error} onRetry={fetchData} className="justify-center" />
+        <div className='p-8 border border-dashed rounded-lg bg-card'>
+          <ErrorInline
+            error={error}
+            onRetry={fetchData}
+            className='justify-center'
+          />
         </div>
       ) : loading && schedules.length === 0 ? (
-        <LoadingStateWithBorder icon={Clock} description="加载定时任务配置中..." />
+        <LoadingStateWithBorder
+          icon={Clock}
+          description='加载定时任务配置中...'
+        />
       ) : schedules.length === 0 ? (
-        <EmptyStateWithBorder icon={Clock} description="暂无定时任务配置，点击上方按钮新增" />
+        <EmptyStateWithBorder
+          icon={Clock}
+          description='暂无定时任务配置，点击上方按钮新增'
+        />
       ) : (
-        <div className="rounded-lg border bg-card">
-          <Table className="min-w-[800px]">
+        <div className='rounded-lg border bg-card'>
+          <Table className='min-w-[800px]'>
             <TableHeader>
-              <TableRow className="hover:bg-transparent">
-                <TableHead className="w-[180px]">任务名称</TableHead>
-                <TableHead className="w-[160px]">关联异步任务</TableHead>
-                <TableHead className="w-[120px]">Cron 表达式</TableHead>
-                <TableHead className="min-w-[200px]">执行参数 (Payload)</TableHead>
-                <TableHead className="w-[100px] text-center">启用状态</TableHead>
-                <TableHead className="w-[120px] text-right">操作</TableHead>
+              <TableRow className='hover:bg-transparent'>
+                <TableHead className='w-[180px]'>任务名称</TableHead>
+                <TableHead className='w-[160px]'>关联异步任务</TableHead>
+                <TableHead className='w-[120px]'>Cron 表达式</TableHead>
+                <TableHead className='min-w-[200px]'>
+                  执行参数 (Payload)
+                </TableHead>
+                <TableHead className='w-[100px] text-center'>
+                  启用状态
+                </TableHead>
+                <TableHead className='w-[120px] text-right'>操作</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {schedules.map((schedule) => (
                 <TableRow key={schedule.id}>
-                  <TableCell className="font-medium">{schedule.name}</TableCell>
+                  <TableCell className='font-medium'>{schedule.name}</TableCell>
                   <TableCell>
-                    <div className="flex flex-col gap-0.5">
-                      <span className="text-xs font-semibold">{getTaskName(schedule.task_type)}</span>
-                      <span className="font-mono text-[10px] text-muted-foreground">{schedule.task_type}</span>
+                    <div className='flex flex-col gap-0.5'>
+                      <span className='text-xs font-semibold'>
+                        {getTaskName(schedule.task_type)}
+                      </span>
+                      <span className='font-mono text-[10px] text-muted-foreground'>
+                        {schedule.task_type}
+                      </span>
                     </div>
                   </TableCell>
-                  <TableCell className="font-mono text-xs text-blue-600 dark:text-blue-400 font-semibold">
+                  <TableCell className='font-mono text-xs text-blue-600 dark:text-blue-400 font-semibold'>
                     {schedule.cron}
                   </TableCell>
-                  <TableCell className="max-w-[300px] truncate">
-                    <code className="text-xs bg-muted/60 px-1 py-0.5 rounded font-mono">
-                      {schedule.payload || "{}"}
+                  <TableCell className='max-w-[300px] truncate'>
+                    <code className='text-xs bg-muted/60 px-1 py-0.5 rounded font-mono'>
+                      {schedule.payload || '{}'}
                     </code>
                   </TableCell>
-                  <TableCell className="text-center">
-                    <div className="flex justify-center">
+                  <TableCell className='text-center'>
+                    <div className='flex justify-center'>
                       <Switch
                         checked={schedule.is_active}
                         onCheckedChange={() => handleToggleActive(schedule)}
                       />
                     </div>
                   </TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex items-center justify-end gap-1.5">
+                  <TableCell className='text-right'>
+                    <div className='flex items-center justify-end gap-1.5'>
                       <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+                        variant='ghost'
+                        size='icon'
+                        className='h-7 w-7 text-muted-foreground hover:text-foreground'
                         onClick={() => openEditDialog(schedule)}
                       >
-                        <Edit2 className="size-3.5" />
+                        <Edit2 className='size-3.5' />
                       </Button>
                       <Button
-                        variant="ghost"
-                        size="icon"
-                        className="h-7 w-7 text-destructive hover:text-destructive/90"
+                        variant='ghost'
+                        size='icon'
+                        className='h-7 w-7 text-destructive hover:text-destructive/90'
                         onClick={() => openDeleteDialog(schedule.id)}
                       >
-                        <Trash2 className="size-3.5" />
+                        <Trash2 className='size-3.5' />
                       </Button>
                     </div>
                   </TableCell>
@@ -317,36 +382,38 @@ export function TaskSchedulesManager() {
 
       {/* Add / Edit Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="sm:max-w-[500px]">
+        <DialogContent className='sm:max-w-[500px]'>
           <DialogHeader>
-            <DialogTitle>{editingSchedule ? "修改定时任务" : "新增定时任务"}</DialogTitle>
+            <DialogTitle>
+              {editingSchedule ? '修改定时任务' : '新增定时任务'}
+            </DialogTitle>
             <DialogDescription>
               配置定时任务的调度参数和运行载荷。
             </DialogDescription>
           </DialogHeader>
 
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="sched-name">任务名称</Label>
+          <div className='grid gap-4 py-4'>
+            <div className='grid gap-2'>
+              <Label htmlFor='sched-name'>任务名称</Label>
               <Input
-                id="sched-name"
-                placeholder="例如：每日数据清理"
+                id='sched-name'
+                placeholder='例如：每日数据清理'
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className="text-xs"
+                className='text-xs'
               />
             </div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="sched-type">关联异步任务</Label>
+            <div className='grid gap-2'>
+              <Label htmlFor='sched-type'>关联异步任务</Label>
               <select
-                id="sched-type"
+                id='sched-type'
                 value={selectedTaskType}
                 onChange={(e) => setSelectedTaskType(e.target.value)}
                 disabled={!!editingSchedule}
-                className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                className='flex h-8 w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
               >
-                {taskTypes.map(t => (
+                {taskTypes.map((t) => (
                   <option key={t.type} value={t.type}>
                     {t.name} ({t.type})
                   </option>
@@ -354,66 +421,96 @@ export function TaskSchedulesManager() {
               </select>
             </div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="sched-cron">Cron 表达式</Label>
+            <div className='grid gap-2'>
+              <Label htmlFor='sched-cron'>Cron 表达式</Label>
               <Input
-                id="sched-cron"
-                placeholder="e.g. 0 */2 * * * 或 @daily"
+                id='sched-cron'
+                placeholder='e.g. 0 */2 * * * 或 @daily'
                 value={cron}
                 onChange={(e) => setCron(e.target.value)}
-                className="text-xs font-mono"
+                className='text-xs font-mono'
               />
-              <p className="text-[10px] text-muted-foreground">使用标准 5 位 Cron 字段格式（分钟、小时、日期、月份、星期几）。</p>
+              <p className='text-[10px] text-muted-foreground'>
+                使用标准 5 位 Cron 字段格式（分钟、小时、日期、月份、星期几）。
+              </p>
             </div>
 
-            <div className="flex items-center justify-between rounded-lg border p-3">
-              <div className="space-y-0.5">
-                <Label htmlFor="sched-active">启用状态</Label>
-                <p className="text-[10px] text-muted-foreground">决定此定时任务是否会定时触发执行。</p>
+            <div className='flex items-center justify-between rounded-lg border p-3'>
+              <div className='space-y-0.5'>
+                <Label htmlFor='sched-active'>启用状态</Label>
+                <p className='text-[10px] text-muted-foreground'>
+                  决定此定时任务是否会定时触发执行。
+                </p>
               </div>
               <Switch
-                id="sched-active"
+                id='sched-active'
                 checked={isActive}
                 onCheckedChange={setIsActive}
               />
             </div>
 
             {(() => {
-              const targetTask = getSelectedTaskMeta()
-              if (!targetTask || !targetTask.params || targetTask.params.length === 0) {
+              const targetTask = getSelectedTaskMeta();
+              if (
+                !targetTask ||
+                !targetTask.params ||
+                targetTask.params.length === 0
+              ) {
                 return (
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/40 p-3 rounded-md border border-dashed">
-                    <Info className="h-4 w-4 shrink-0" />
+                  <div className='flex items-center gap-2 text-xs text-muted-foreground bg-muted/40 p-3 rounded-md border border-dashed'>
+                    <Info className='h-4 w-4 shrink-0' />
                     <span>所选任务类型不需要运行参数参数。</span>
                   </div>
-                )
+                );
               }
               return (
-                <div className="space-y-4 pt-2 border-t">
-                  <Label className="text-xs font-semibold">运行参数配置 (Payload)</Label>
+                <div className='space-y-4 pt-2 border-t'>
+                  <Label className='text-xs font-semibold'>
+                    运行参数配置 (Payload)
+                  </Label>
                   {targetTask.params.map((param) => (
-                    <div key={param.name} className="grid gap-2 pl-2 border-l-2 border-muted">
-                      <Label htmlFor={`param-${param.name}`} className="flex items-center gap-1 text-xs">
+                    <div
+                      key={param.name}
+                      className='grid gap-2 pl-2 border-l-2 border-muted'
+                    >
+                      <Label
+                        htmlFor={`param-${param.name}`}
+                        className='flex items-center gap-1 text-xs'
+                      >
                         {param.label}
-                        {param.required && <span className="text-destructive font-bold">*</span>}
+                        {param.required && (
+                          <span className='text-destructive font-bold'>*</span>
+                        )}
                       </Label>
                       {param.type === 'text' ? (
                         <Textarea
                           id={`param-${param.name}`}
                           placeholder={param.placeholder}
-                          className="text-xs min-h-[70px]"
-                          value={paramValues[param.name] || ""}
-                          onChange={(e) => setParamValues(prev => ({ ...prev, [param.name]: e.target.value }))}
+                          className='text-xs min-h-[70px]'
+                          value={paramValues[param.name] || ''}
+                          onChange={(e) =>
+                            setParamValues((prev) => ({
+                              ...prev,
+                              [param.name]: e.target.value,
+                            }))
+                          }
                         />
                       ) : param.type === 'boolean' ? (
-                        <div className="flex items-center gap-2 pt-1 h-9">
+                        <div className='flex items-center gap-2 pt-1 h-9'>
                           <Switch
                             id={`param-${param.name}`}
                             checked={paramValues[param.name] === 'true'}
-                            onCheckedChange={(checked) => setParamValues(prev => ({ ...prev, [param.name]: checked ? 'true' : 'false' }))}
+                            onCheckedChange={(checked) =>
+                              setParamValues((prev) => ({
+                                ...prev,
+                                [param.name]: checked ? 'true' : 'false',
+                              }))
+                            }
                           />
-                          <span className="text-xs text-muted-foreground">
-                            {paramValues[param.name] === 'true' ? '开启' : '关闭'}
+                          <span className='text-xs text-muted-foreground'>
+                            {paramValues[param.name] === 'true'
+                              ? '开启'
+                              : '关闭'}
                           </span>
                         </div>
                       ) : (
@@ -421,27 +518,43 @@ export function TaskSchedulesManager() {
                           id={`param-${param.name}`}
                           type={param.type === 'number' ? 'number' : 'text'}
                           placeholder={param.placeholder}
-                          className="text-xs"
-                          value={paramValues[param.name] || ""}
-                          onChange={(e) => setParamValues(prev => ({ ...prev, [param.name]: e.target.value }))}
+                          className='text-xs'
+                          value={paramValues[param.name] || ''}
+                          onChange={(e) =>
+                            setParamValues((prev) => ({
+                              ...prev,
+                              [param.name]: e.target.value,
+                            }))
+                          }
                         />
                       )}
                       {param.description && (
-                        <p className="text-[10px] text-muted-foreground">{param.description}</p>
+                        <p className='text-[10px] text-muted-foreground'>
+                          {param.description}
+                        </p>
                       )}
                     </div>
                   ))}
                 </div>
-              )
+              );
             })()}
           </div>
 
           <DialogFooter>
-            <Button variant="ghost" onClick={() => setDialogOpen(false)} disabled={submitLoading} className="h-8 text-xs">
+            <Button
+              variant='ghost'
+              onClick={() => setDialogOpen(false)}
+              disabled={submitLoading}
+              className='h-8 text-xs'
+            >
               取消
             </Button>
-            <Button onClick={handleSubmit} disabled={submitLoading} className="h-8 text-xs">
-              {submitLoading && <Spinner className="size-3 mr-1" />}
+            <Button
+              onClick={handleSubmit}
+              disabled={submitLoading}
+              className='h-8 text-xs'
+            >
+              {submitLoading && <Spinner className='size-3 mr-1' />}
               {editingSchedule ? '保存修改' : '确认创建'}
             </Button>
           </DialogFooter>
@@ -450,24 +563,34 @@ export function TaskSchedulesManager() {
 
       {/* Delete Confirmation */}
       <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
-        <DialogContent className="sm:max-w-[400px]">
+        <DialogContent className='sm:max-w-[400px]'>
           <DialogHeader>
             <DialogTitle>删除定时任务</DialogTitle>
             <DialogDescription>
               确定要删除此定时任务吗？该操作不可撤销，且会立即取消其在调度器中的调度计划。
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button variant="ghost" onClick={() => setDeleteOpen(false)} disabled={deleteLoading} className="h-8 text-xs">
+          <DialogFooter className='gap-2 sm:gap-0'>
+            <Button
+              variant='ghost'
+              onClick={() => setDeleteOpen(false)}
+              disabled={deleteLoading}
+              className='h-8 text-xs'
+            >
               取消
             </Button>
-            <Button variant="destructive" onClick={handleDelete} disabled={deleteLoading} className="h-8 text-xs">
-              {deleteLoading && <Spinner className="size-3 mr-1" />}
+            <Button
+              variant='destructive'
+              onClick={handleDelete}
+              disabled={deleteLoading}
+              className='h-8 text-xs'
+            >
+              {deleteLoading && <Spinner className='size-3 mr-1' />}
               确认删除
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/tasks/page.tsx

@@ -1,65 +1,80 @@
-"use client"
+'use client';
 
-import {Suspense} from "react"
-import {useRouter, useSearchParams} from "next/navigation"
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {TaskManager} from "./components/task-manager"
-import {TaskSchedulesManager} from "./components/task-schedules"
-import {TaskExecutionsManager} from "./components/task-executions"
-import {Spinner} from "@/components/ui/spinner"
-import {Layers} from "lucide-react"
+import { Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TaskManager } from './components/task-manager';
+import { TaskSchedulesManager } from './components/task-schedules';
+import { TaskExecutionsManager } from './components/task-executions';
+import { Spinner } from '@/components/ui/spinner';
+import { Layers } from 'lucide-react';
 
 function TasksPageContent() {
-  const searchParams = useSearchParams()
-  const router = useRouter()
-  const activeTab = searchParams.get("tab") || "tasks"
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const activeTab = searchParams.get('tab') || 'tasks';
 
   const handleTabChange = (value: string) => {
-    router.push(`/admin/tasks?tab=${value}`)
-  }
+    router.push(`/admin/tasks?tab=${value}`);
+  };
   return (
-    <div className="py-6 space-y-6">
-      <div className="flex items-center gap-2">
-        <Layers className="size-5 text-primary" />
+    <div className='py-6 space-y-6'>
+      <div className='flex items-center gap-2'>
+        <Layers className='size-5 text-primary' />
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">任务管理</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>任务管理</h1>
         </div>
       </div>
 
-      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-        <TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
-          <TabsTrigger value="tasks" className="px-0 pb-2 text-xs font-semibold">
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className='w-full'
+      >
+        <TabsList variant='line' className='w-fit inline-flex gap-8 mb-6'>
+          <TabsTrigger
+            value='tasks'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             任务管理
           </TabsTrigger>
-          <TabsTrigger value="schedules" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='schedules'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             定时任务
           </TabsTrigger>
-          <TabsTrigger value="executions" className="px-0 pb-2 text-xs font-semibold">
+          <TabsTrigger
+            value='executions'
+            className='px-0 pb-2 text-xs font-semibold'
+          >
             任务日志
           </TabsTrigger>
         </TabsList>
-        <TabsContent value="tasks" className="space-y-4 outline-none">
+        <TabsContent value='tasks' className='space-y-4 outline-none'>
           <TaskManager />
         </TabsContent>
-        <TabsContent value="schedules" className="space-y-4 outline-none">
+        <TabsContent value='schedules' className='space-y-4 outline-none'>
           <TaskSchedulesManager />
         </TabsContent>
-        <TabsContent value="executions" className="space-y-4 outline-none">
+        <TabsContent value='executions' className='space-y-4 outline-none'>
           <TaskExecutionsManager />
         </TabsContent>
       </Tabs>
     </div>
-  )
+  );
 }
 
 export default function TasksPage() {
   return (
-    <Suspense fallback={
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Spinner className="h-8 w-8" />
-      </div>
-    }>
+    <Suspense
+      fallback={
+        <div className='flex items-center justify-center min-h-[400px]'>
+          <Spinner className='h-8 w-8' />
+        </div>
+      }
+    >
       <TasksPageContent />
     </Suspense>
-  )
+  );
 }

frontend/app/(main)/admin/users/components/create-user-modal.tsx

@@ -1,91 +1,97 @@
-"use client"
+'use client';
 
-import {useEffect, useState} from "react"
-import {Button} from "@/components/ui/button"
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Switch} from "@/components/ui/switch"
-import {useAdminUsers} from "@/contexts/admin-users-context"
-import type {CreateUserRequest} from "@/lib/services/admin"
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import type { CreateUserRequest } from '@/lib/services/admin';
 
 const emptyForm: CreateUserRequest = {
-  username: "",
-  password: "",
-  nickname: "",
-  email: "",
+  username: '',
+  password: '',
+  nickname: '',
+  email: '',
   is_active: true,
   is_admin: false,
-}
+};
 
 export function CreateUserModal({
   isOpen,
   onClose,
 }: {
-  isOpen: boolean
-  onClose: () => void
+  isOpen: boolean;
+  onClose: () => void;
 }) {
-  const { createUser } = useAdminUsers()
-  const [form, setForm] = useState<CreateUserRequest>(emptyForm)
-  const [saving, setSaving] = useState(false)
-  const [errors, setErrors] = useState<Record<string, string>>({})
+  const { createUser } = useAdminUsers();
+  const [form, setForm] = useState<CreateUserRequest>(emptyForm);
+  const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
 
   useEffect(() => {
     if (isOpen) {
-      setForm(emptyForm)
-      setErrors({})
+      setForm(emptyForm);
+      setErrors({});
     } else {
-      setSaving(false)
+      setSaving(false);
     }
-  }, [isOpen])
+  }, [isOpen]);
 
   const validate = () => {
-    const newErrors: Record<string, string> = {}
+    const newErrors: Record<string, string> = {};
     if (!form.username.trim()) {
-      newErrors.username = "用户名不能为空"
+      newErrors.username = '用户名不能为空';
     } else if (form.username.trim().length < 3) {
-      newErrors.username = "用户名长度不能少于 3 位"
+      newErrors.username = '用户名长度不能少于 3 位';
     }
 
     if (!form.email.trim()) {
-      newErrors.email = "邮箱不能为空"
+      newErrors.email = '邮箱不能为空';
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) {
-      newErrors.email = "邮箱格式不正确"
+      newErrors.email = '邮箱格式不正确';
     }
 
     if (!form.password) {
-      newErrors.password = "密码不能为空"
+      newErrors.password = '密码不能为空';
     } else if (form.password.length < 8) {
-      newErrors.password = "密码长度不能少于 8 位"
+      newErrors.password = '密码长度不能少于 8 位';
     }
 
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
 
   const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!validate()) return
+    e.preventDefault();
+    if (!validate()) return;
 
-    setSaving(true)
+    setSaving(true);
     try {
       await createUser({
         ...form,
         username: form.username.trim(),
         nickname: form.nickname?.trim() || undefined,
         email: form.email.trim(),
-      })
-      onClose()
+      });
+      onClose();
     } catch {
       // Errors are already handled by context toast notifications
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-md">
+      <DialogContent className='max-w-md'>
         <DialogHeader>
           <DialogTitle>新增用户</DialogTitle>
           <DialogDescription>
@@ -93,90 +99,106 @@ export function CreateUserModal({
           </DialogDescription>
         </DialogHeader>
 
-        <form onSubmit={handleSave} className="space-y-4 pt-2">
-          <div className="space-y-1.5">
-            <Label htmlFor="username">用户名</Label>
+        <form onSubmit={handleSave} className='space-y-4 pt-2'>
+          <div className='space-y-1.5'>
+            <Label htmlFor='username'>用户名</Label>
             <Input
-              id="username"
+              id='username'
               value={form.username}
-              onChange={(e) => setForm((prev) => ({ ...prev, username: e.target.value }))}
-              placeholder="请输入用户名 (至少 3 位)"
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, username: e.target.value }))
+              }
+              placeholder='请输入用户名 (至少 3 位)'
             />
             {errors.username && (
-              <p className="text-xs text-destructive">{errors.username}</p>
+              <p className='text-xs text-destructive'>{errors.username}</p>
             )}
           </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="nickname">昵称 (选填)</Label>
+          <div className='space-y-1.5'>
+            <Label htmlFor='nickname'>昵称 (选填)</Label>
             <Input
-              id="nickname"
+              id='nickname'
               value={form.nickname}
-              onChange={(e) => setForm((prev) => ({ ...prev, nickname: e.target.value }))}
-              placeholder="请输入昵称"
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, nickname: e.target.value }))
+              }
+              placeholder='请输入昵称'
             />
           </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="email">邮箱</Label>
+          <div className='space-y-1.5'>
+            <Label htmlFor='email'>邮箱</Label>
             <Input
-              id="email"
-              type="email"
+              id='email'
+              type='email'
               value={form.email}
-              onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
-              placeholder="请输入邮箱地址"
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, email: e.target.value }))
+              }
+              placeholder='请输入邮箱地址'
             />
             {errors.email && (
-              <p className="text-xs text-destructive">{errors.email}</p>
+              <p className='text-xs text-destructive'>{errors.email}</p>
             )}
           </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="password">密码</Label>
+          <div className='space-y-1.5'>
+            <Label htmlFor='password'>密码</Label>
             <Input
-              id="password"
-              type="password"
+              id='password'
+              type='password'
               value={form.password}
-              onChange={(e) => setForm((prev) => ({ ...prev, password: e.target.value }))}
-              placeholder="请输入登录密码 (至少 8 位)"
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, password: e.target.value }))
+              }
+              placeholder='请输入登录密码 (至少 8 位)'
             />
             {errors.password && (
-              <p className="text-xs text-destructive">{errors.password}</p>
+              <p className='text-xs text-destructive'>{errors.password}</p>
             )}
           </div>
 
-          <div className="flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10">
+          <div className='flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10'>
             <div>
-              <div className="font-medium text-sm">启用账户</div>
-              <div className="text-xs text-muted-foreground">禁用后此账号将无法登录系统。</div>
+              <div className='font-medium text-sm'>启用账户</div>
+              <div className='text-xs text-muted-foreground'>
+                禁用后此账号将无法登录系统。
+              </div>
             </div>
             <Switch
               checked={form.is_active}
-              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: checked }))}
+              onCheckedChange={(checked) =>
+                setForm((prev) => ({ ...prev, is_active: checked }))
+              }
             />
           </div>
 
-          <div className="flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10">
+          <div className='flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10'>
             <div>
-              <div className="font-medium text-sm">管理员权限</div>
-              <div className="text-xs text-muted-foreground">开启后此账号将拥有后台管理权限。</div>
+              <div className='font-medium text-sm'>管理员权限</div>
+              <div className='text-xs text-muted-foreground'>
+                开启后此账号将拥有后台管理权限。
+              </div>
             </div>
             <Switch
               checked={form.is_admin}
-              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_admin: checked }))}
+              onCheckedChange={(checked) =>
+                setForm((prev) => ({ ...prev, is_admin: checked }))
+              }
             />
           </div>
 
-          <div className="flex justify-end gap-2 pt-2 border-t mt-2">
-            <Button variant="outline" type="button" onClick={onClose}>
+          <div className='flex justify-end gap-2 pt-2 border-t mt-2'>
+            <Button variant='outline' type='button' onClick={onClose}>
               取消
             </Button>
-            <Button type="submit" disabled={saving} variant="secondary">
-              {saving ? "创建中..." : "创建"}
+            <Button type='submit' disabled={saving} variant='secondary'>
+              {saving ? '创建中...' : '创建'}
             </Button>
           </div>
         </form>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

frontend/app/(main)/admin/users/components/edit-user-modal.tsx

@@ -1,14 +1,20 @@
-"use client"
+'use client';
 
-import {useEffect, useState} from "react"
-import {Button} from "@/components/ui/button"
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {Switch} from "@/components/ui/switch"
-import {useAdminUsers} from "@/contexts/admin-users-context"
-import {useAuth} from "@/components/providers/auth-provider"
-import type {AdminUser} from "@/lib/services/admin"
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import { useAuth } from '@/components/providers/auth-provider';
+import type { AdminUser } from '@/lib/services/admin';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -17,15 +23,15 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from "@/components/ui/alert-dialog"
-import {Loader2} from "lucide-react"
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Loader2 } from 'lucide-react';
 
 interface EditUserForm {
-  nickname: string
-  email: string
-  is_admin: boolean
-  password?: string
+  nickname: string;
+  email: string;
+  is_admin: boolean;
+  password?: string;
 }
 
 export function EditUserModal({
@@ -33,115 +39,116 @@ export function EditUserModal({
   onClose,
   user,
 }: {
-  isOpen: boolean
-  onClose: () => void
-  user: AdminUser | null
+  isOpen: boolean;
+  onClose: () => void;
+  user: AdminUser | null;
 }) {
-  const { updateUser, deleteUser, getUserDetail } = useAdminUsers()
-  const { user: currentUser } = useAuth()
+  const { updateUser, deleteUser, getUserDetail } = useAdminUsers();
+  const { user: currentUser } = useAuth();
 
-  const isSelf = currentUser && user && currentUser.id.toString() === user.id.toString()
+  const isSelf =
+    currentUser && user && currentUser.id.toString() === user.id.toString();
 
   const [form, setForm] = useState<EditUserForm>({
-    nickname: "",
-    email: "",
+    nickname: '',
+    email: '',
     is_admin: false,
-    password: "",
-  })
-  const [saving, setSaving] = useState(false)
-  const [errors, setErrors] = useState<Record<string, string>>({})
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+    password: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   useEffect(() => {
-    let active = true
+    let active = true;
     if (isOpen && user) {
       setForm({
-        nickname: user.nickname || "",
-        email: user.email || "",
+        nickname: user.nickname || '',
+        email: user.email || '',
         is_admin: user.is_admin || false,
-        password: "",
-      })
-      setErrors({})
+        password: '',
+      });
+      setErrors({});
 
       getUserDetail(user.id)
         .then((detail) => {
           if (active && detail) {
             setForm({
-              nickname: detail.nickname || "",
-              email: detail.email || "",
+              nickname: detail.nickname || '',
+              email: detail.email || '',
               is_admin: detail.is_admin || false,
-              password: "",
-            })
+              password: '',
+            });
           }
         })
         .catch(() => {
           // ignore fetching error
-        })
+        });
     } else {
-      setSaving(false)
+      setSaving(false);
     }
     return () => {
-      active = false
-    }
-  }, [isOpen, user, getUserDetail])
+      active = false;
+    };
+  }, [isOpen, user, getUserDetail]);
 
   const validate = () => {
-    const newErrors: Record<string, string> = {}
+    const newErrors: Record<string, string> = {};
 
     if (!form.email.trim()) {
-      newErrors.email = "邮箱不能为空"
+      newErrors.email = '邮箱不能为空';
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) {
-      newErrors.email = "邮箱格式不正确"
+      newErrors.email = '邮箱格式不正确';
     }
 
     if (form.password && form.password.length < 8) {
-      newErrors.password = "密码长度不能少于 8 位"
+      newErrors.password = '密码长度不能少于 8 位';
     }
 
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
 
   const handleSave = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!user || !validate()) return
+    e.preventDefault();
+    if (!user || !validate()) return;
 
-    setSaving(true)
+    setSaving(true);
     try {
       await updateUser(user.id, {
         nickname: form.nickname.trim() || undefined,
         email: form.email.trim(),
         is_admin: form.is_admin,
         password: form.password?.trim() || undefined,
-      })
-      onClose()
+      });
+      onClose();
     } catch {
       // Errors are handled by context toast notifications
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleDelete = async () => {
-    if (!user) return
-    setSaving(true)
+    if (!user) return;
+    setSaving(true);
     try {
-      await deleteUser(user)
-      onClose()
+      await deleteUser(user);
+      onClose();
     } catch {
       // Errors are handled by context toast notifications
     } finally {
-      setSaving(false)
-      setShowDeleteConfirm(false)
+      setSaving(false);
+      setShowDeleteConfirm(false);
     }
-  }
+  };
 
-  if (!user) return null
+  if (!user) return null;
 
   return (
     <>
       <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-        <DialogContent className="max-w-md">
+        <DialogContent className='max-w-md'>
           <DialogHeader>
             <DialogTitle>编辑用户</DialogTitle>
             <DialogDescription>
@@ -149,89 +156,102 @@ export function EditUserModal({
             </DialogDescription>
           </DialogHeader>
 
-          <form onSubmit={handleSave} className="space-y-4 pt-2">
-            <div className="space-y-1.5">
-              <Label htmlFor="username" className="text-xs text-muted-foreground">用户名 (不可修改)</Label>
+          <form onSubmit={handleSave} className='space-y-4 pt-2'>
+            <div className='space-y-1.5'>
+              <Label
+                htmlFor='username'
+                className='text-xs text-muted-foreground'
+              >
+                用户名 (不可修改)
+              </Label>
               <Input
-                id="username"
+                id='username'
                 value={user.username}
                 disabled
-                className="bg-muted/50 cursor-not-allowed select-none font-mono"
+                className='bg-muted/50 cursor-not-allowed select-none font-mono'
               />
             </div>
 
-            <div className="space-y-1.5">
-              <Label htmlFor="nickname">昵称 (选填)</Label>
+            <div className='space-y-1.5'>
+              <Label htmlFor='nickname'>昵称 (选填)</Label>
               <Input
-                id="nickname"
+                id='nickname'
                 value={form.nickname}
-                onChange={(e) => setForm((prev) => ({ ...prev, nickname: e.target.value }))}
-                placeholder="请输入昵称"
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, nickname: e.target.value }))
+                }
+                placeholder='请输入昵称'
               />
             </div>
 
-            <div className="space-y-1.5">
-              <Label htmlFor="email">邮箱</Label>
+            <div className='space-y-1.5'>
+              <Label htmlFor='email'>邮箱</Label>
               <Input
-                id="email"
-                type="email"
+                id='email'
+                type='email'
                 value={form.email}
-                onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
-                placeholder="请输入邮箱地址"
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, email: e.target.value }))
+                }
+                placeholder='请输入邮箱地址'
               />
               {errors.email && (
-                <p className="text-xs text-destructive">{errors.email}</p>
+                <p className='text-xs text-destructive'>{errors.email}</p>
               )}
             </div>
 
-            <div className="space-y-1.5">
-              <Label htmlFor="password">重置密码 (选填)</Label>
+            <div className='space-y-1.5'>
+              <Label htmlFor='password'>重置密码 (选填)</Label>
               <Input
-                id="password"
-                type="password"
+                id='password'
+                type='password'
                 value={form.password}
-                onChange={(e) => setForm((prev) => ({ ...prev, password: e.target.value }))}
-                placeholder="留空表示保持当前密码，输入则重置 (至少 8 位)"
+                onChange={(e) =>
+                  setForm((prev) => ({ ...prev, password: e.target.value }))
+                }
+                placeholder='留空表示保持当前密码，输入则重置 (至少 8 位)'
               />
               {errors.password && (
-                <p className="text-xs text-destructive">{errors.password}</p>
+                <p className='text-xs text-destructive'>{errors.password}</p>
               )}
             </div>
 
-            <div className="flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10">
+            <div className='flex items-center justify-between rounded-lg border border-dashed p-3 bg-muted/10'>
               <div>
-                <div className="font-medium text-sm">管理员权限</div>
-                <div className="text-xs text-muted-foreground">
-                  {isSelf ? "不能撤销当前登录用户的管理员权限。" : "开启后此账号将拥有后台管理权限。"}
+                <div className='font-medium text-sm'>管理员权限</div>
+                <div className='text-xs text-muted-foreground'>
+                  {isSelf
+                    ? '不能撤销当前登录用户的管理员权限。'
+                    : '开启后此账号将拥有后台管理权限。'}
                 </div>
               </div>
               <Switch
                 checked={form.is_admin}
                 disabled={!!isSelf || saving}
                 onCheckedChange={async (checked) => {
-                  setForm((prev) => ({ ...prev, is_admin: checked }))
-                  setSaving(true)
+                  setForm((prev) => ({ ...prev, is_admin: checked }));
+                  setSaving(true);
                   try {
                     await updateUser(user.id, {
                       nickname: form.nickname.trim() || undefined,
                       email: form.email.trim(),
                       is_admin: checked,
-                    })
+                    });
                   } catch {
-                    setForm((prev) => ({ ...prev, is_admin: !checked }))
+                    setForm((prev) => ({ ...prev, is_admin: !checked }));
                   } finally {
-                    setSaving(false)
+                    setSaving(false);
                   }
                 }}
               />
             </div>
 
-            <div className="flex justify-between items-center pt-2 border-t mt-2">
+            <div className='flex justify-between items-center pt-2 border-t mt-2'>
               <div>
                 {!user.is_admin && (
                   <Button
-                    type="button"
-                    variant="destructive"
+                    type='button'
+                    variant='destructive'
                     onClick={() => setShowDeleteConfirm(true)}
                     disabled={saving}
                   >
@@ -239,12 +259,17 @@ export function EditUserModal({
                   </Button>
                 )}
               </div>
-              <div className="flex gap-2">
-                <Button variant="outline" type="button" onClick={onClose} disabled={saving}>
+              <div className='flex gap-2'>
+                <Button
+                  variant='outline'
+                  type='button'
+                  onClick={onClose}
+                  disabled={saving}
+                >
                   取消
                 </Button>
-                <Button type="submit" disabled={saving} variant="secondary">
-                  {saving ? "保存中..." : "保存"}
+                <Button type='submit' disabled={saving} variant='secondary'>
+                  {saving ? '保存中...' : '保存'}
                 </Button>
               </div>
             </div>
@@ -257,24 +282,25 @@ export function EditUserModal({
           <AlertDialogHeader>
             <AlertDialogTitle>确认删除用户</AlertDialogTitle>
             <AlertDialogDescription>
-              确定要删除用户 {user.nickname || user.username} 吗？该操作会移除用户账号，删除后无法撤销。
+              确定要删除用户 {user.nickname || user.username}{' '}
+              吗？该操作会移除用户账号，删除后无法撤销。
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={saving}>取消</AlertDialogCancel>
             <AlertDialogAction
               onClick={(e) => {
-                e.preventDefault()
-                handleDelete()
+                e.preventDefault();
+                handleDelete();
               }}
               disabled={saving}
             >
-              {saving && <Loader2 className="size-3 animate-spin mr-1" />}
+              {saving && <Loader2 className='size-3 animate-spin mr-1' />}
               确认删除
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </>
-  )
+  );
 }

frontend/app/(main)/admin/users/components/user-detail-sheet.tsx

@@ -1,21 +1,29 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {Globe, Loader2, Mail, MapPin, ShieldCheck, Smartphone, UserCheck,} from "lucide-react"
+import * as React from 'react';
+import {
+  Globe,
+  Loader2,
+  Mail,
+  MapPin,
+  ShieldCheck,
+  Smartphone,
+  UserCheck,
+} from 'lucide-react';
 
-import {Button} from "@/components/ui/button"
-import {Badge} from "@/components/ui/badge"
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
-import {Sheet, SheetContent, SheetTitle} from "@/components/ui/sheet"
-import type {AdminUser} from "@/lib/services/admin"
-import {formatDateTime} from "@/lib/utils"
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet';
+import type { AdminUser } from '@/lib/services/admin';
+import { formatDateTime } from '@/lib/utils';
 
 interface UserDetailSheetProps {
-  selectedUser: AdminUser | null
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-  detailLoading: boolean
-  onStatusToggle: (user: AdminUser) => Promise<void>
+  selectedUser: AdminUser | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  detailLoading: boolean;
+  onStatusToggle: (user: AdminUser) => Promise<void>;
 }
 
 export function UserDetailSheet({
@@ -25,36 +33,43 @@ export function UserDetailSheet({
   detailLoading,
   onStatusToggle,
 }: UserDetailSheetProps) {
-
-  const displayValue = (value?: string) => value && value.trim() ? value : "-"
+  const displayValue = (value?: string) =>
+    value && value.trim() ? value : '-';
 
   return (
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-[400px] w-full p-0 flex flex-col gap-0">
-        <SheetTitle className="px-5 py-3">用户档案</SheetTitle>
+      <SheetContent className='sm:max-w-[400px] w-full p-0 flex flex-col gap-0'>
+        <SheetTitle className='px-5 py-3'>用户档案</SheetTitle>
 
         {selectedUser && (
           <>
-            <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
-              <div className="flex flex-col pb-6">
-                <div className="px-5 py-6 border-b border-border/50">
-                  <div className="flex flex-col items-center text-center gap-3">
-                    <Avatar className="h-20 w-20 rounded-full border-4 border-background ring-1 ring-border/20">
+            <div className='flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'>
+              <div className='flex flex-col pb-6'>
+                <div className='px-5 py-6 border-b border-border/50'>
+                  <div className='flex flex-col items-center text-center gap-3'>
+                    <Avatar className='h-20 w-20 rounded-full border-4 border-background ring-1 ring-border/20'>
                       <AvatarImage src={selectedUser.avatar_url} />
-                      <AvatarFallback className="rounded-full text-xl font-medium bg-secondary text-secondary-foreground">
+                      <AvatarFallback className='rounded-full text-xl font-medium bg-secondary text-secondary-foreground'>
                         {selectedUser.username.substring(0, 2).toUpperCase()}
                       </AvatarFallback>
                     </Avatar>
 
-                    <div className="space-y-1.5">
-                      <h3 className="text-lg font-bold tracking-tight">{selectedUser.nickname}</h3>
-                      <div className="flex items-center justify-center gap-2">
-                        <code className="px-1.5 py-0.5 rounded-md bg-muted text-[10px] font-mono text-muted-foreground">@{selectedUser.username}</code>
-                        <Badge variant="secondary" className="h-4.5 px-1.5 text-[9px] uppercase font-medium">
+                    <div className='space-y-1.5'>
+                      <h3 className='text-lg font-bold tracking-tight'>
+                        {selectedUser.nickname}
+                      </h3>
+                      <div className='flex items-center justify-center gap-2'>
+                        <code className='px-1.5 py-0.5 rounded-md bg-muted text-[10px] font-mono text-muted-foreground'>
+                          @{selectedUser.username}
+                        </code>
+                        <Badge
+                          variant='secondary'
+                          className='h-4.5 px-1.5 text-[9px] uppercase font-medium'
+                        >
                           UID: {selectedUser.id}
                         </Badge>
                         {selectedUser.is_admin && (
-                          <Badge className="h-4.5 px-1.5 text-[9px] uppercase font-medium">
+                          <Badge className='h-4.5 px-1.5 text-[9px] uppercase font-medium'>
                             Admin
                           </Badge>
                         )}
@@ -62,91 +77,132 @@ export function UserDetailSheet({
                     </div>
 
                     {detailLoading && (
-                      <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
-                        <Loader2 className="size-3 animate-spin" />
+                      <div className='flex items-center gap-1 text-[10px] text-muted-foreground'>
+                        <Loader2 className='size-3 animate-spin' />
                         正在刷新详情
                       </div>
                     )}
 
-                    <div className="gap-4 w-full max-w-[240px] mt-1 pt-4 border-t border-border/50">
-                      <div className="flex flex-col gap-0.5">
-                        <span className="text-[9px] uppercase tracking-widest text-muted-foreground font-medium">注册时间</span>
-                        <span className="font-mono text-xs font-semibold">{formatDateTime(selectedUser.created_at).split(' ')[0]}</span>
+                    <div className='gap-4 w-full max-w-[240px] mt-1 pt-4 border-t border-border/50'>
+                      <div className='flex flex-col gap-0.5'>
+                        <span className='text-[9px] uppercase tracking-widest text-muted-foreground font-medium'>
+                          注册时间
+                        </span>
+                        <span className='font-mono text-xs font-semibold'>
+                          {
+                            formatDateTime(selectedUser.created_at).split(
+                              ' ',
+                            )[0]
+                          }
+                        </span>
                       </div>
                     </div>
                   </div>
                 </div>
 
-                <div className="p-6 space-y-6">
-                  <div className="space-y-4">
-                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1">个人资料</h4>
-                    <div className="rounded-lg border divide-y bg-background/50">
-                      <div className="flex items-center justify-between gap-4 p-3.5 text-sm">
-                        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                          <Mail className="size-3" />
+                <div className='p-6 space-y-6'>
+                  <div className='space-y-4'>
+                    <h4 className='text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1'>
+                      个人资料
+                    </h4>
+                    <div className='rounded-lg border divide-y bg-background/50'>
+                      <div className='flex items-center justify-between gap-4 p-3.5 text-sm'>
+                        <span className='flex items-center gap-2 text-[10px] text-muted-foreground'>
+                          <Mail className='size-3' />
                           邮箱
                         </span>
-                        <span className="min-w-0 truncate text-right text-[10px]">{displayValue(selectedUser.email)}</span>
+                        <span className='min-w-0 truncate text-right text-[10px]'>
+                          {displayValue(selectedUser.email)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between gap-4 p-3.5 text-sm">
-                        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                          <Smartphone className="size-3" />
+                      <div className='flex items-center justify-between gap-4 p-3.5 text-sm'>
+                        <span className='flex items-center gap-2 text-[10px] text-muted-foreground'>
+                          <Smartphone className='size-3' />
                           手机
                         </span>
-                        <span className="min-w-0 truncate text-right text-[10px]">{displayValue(selectedUser.phone)}</span>
+                        <span className='min-w-0 truncate text-right text-[10px]'>
+                          {displayValue(selectedUser.phone)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between gap-4 p-3.5 text-sm">
-                        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                          <span className="size-3 flex items-center justify-center font-bold text-[9px]">⚧</span>
+                      <div className='flex items-center justify-between gap-4 p-3.5 text-sm'>
+                        <span className='flex items-center gap-2 text-[10px] text-muted-foreground'>
+                          <span className='size-3 flex items-center justify-center font-bold text-[9px]'>
+                            ⚧
+                          </span>
                           性别
                         </span>
-                        <span className="min-w-0 truncate text-right text-[10px]">{displayValue(selectedUser.gender)}</span>
+                        <span className='min-w-0 truncate text-right text-[10px]'>
+                          {displayValue(selectedUser.gender)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between gap-4 p-3.5 text-sm">
-                        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                          <MapPin className="size-3" />
+                      <div className='flex items-center justify-between gap-4 p-3.5 text-sm'>
+                        <span className='flex items-center gap-2 text-[10px] text-muted-foreground'>
+                          <MapPin className='size-3' />
                           所在地
                         </span>
-                        <span className="min-w-0 truncate text-right text-[10px]">{displayValue(selectedUser.location)}</span>
+                        <span className='min-w-0 truncate text-right text-[10px]'>
+                          {displayValue(selectedUser.location)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between gap-4 p-3.5 text-sm">
-                        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
-                          <Globe className="size-3" />
+                      <div className='flex items-center justify-between gap-4 p-3.5 text-sm'>
+                        <span className='flex items-center gap-2 text-[10px] text-muted-foreground'>
+                          <Globe className='size-3' />
                           网站
                         </span>
-                        <span className="min-w-0 truncate text-right text-[10px]">{displayValue(selectedUser.website)}</span>
+                        <span className='min-w-0 truncate text-right text-[10px]'>
+                          {displayValue(selectedUser.website)}
+                        </span>
                       </div>
-                      <div className="flex flex-col gap-2 p-3.5 text-sm">
-                        <span className="text-[10px] text-muted-foreground">简介</span>
-                        <span className="break-words text-[10px] leading-5">{displayValue(selectedUser.bio)}</span>
+                      <div className='flex flex-col gap-2 p-3.5 text-sm'>
+                        <span className='text-[10px] text-muted-foreground'>
+                          简介
+                        </span>
+                        <span className='break-words text-[10px] leading-5'>
+                          {displayValue(selectedUser.bio)}
+                        </span>
                       </div>
                     </div>
                   </div>
 
-                  <div className="space-y-4">
-                    <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1">系统记录</h4>
-                    <div className="rounded-lg border divide-y bg-background/50">
-                      <div className="flex items-center justify-between p-3.5 text-sm">
-                        <span className="text-[10px]">账户状态</span>
-                        <Badge variant={selectedUser.is_active ? "secondary" : "outline"} className="text-[10px]">
-                          {selectedUser.is_active ? "正常" : "禁用"}
+                  <div className='space-y-4'>
+                    <h4 className='text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1'>
+                      系统记录
+                    </h4>
+                    <div className='rounded-lg border divide-y bg-background/50'>
+                      <div className='flex items-center justify-between p-3.5 text-sm'>
+                        <span className='text-[10px]'>账户状态</span>
+                        <Badge
+                          variant={
+                            selectedUser.is_active ? 'secondary' : 'outline'
+                          }
+                          className='text-[10px]'
+                        >
+                          {selectedUser.is_active ? '正常' : '禁用'}
                         </Badge>
                       </div>
-                      <div className="flex items-center justify-between p-3.5 text-sm">
-                        <span className="text-[10px]">管理员</span>
-                        <span className="font-mono text-[10px]">{selectedUser.is_admin ? "是" : "否"}</span>
+                      <div className='flex items-center justify-between p-3.5 text-sm'>
+                        <span className='text-[10px]'>管理员</span>
+                        <span className='font-mono text-[10px]'>
+                          {selectedUser.is_admin ? '是' : '否'}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between p-3.5 text-sm">
-                        <span className="text-[10px]">最后登录</span>
-                        <span className="font-mono text-[10px]">{formatDateTime(selectedUser.last_login_at)}</span>
+                      <div className='flex items-center justify-between p-3.5 text-sm'>
+                        <span className='text-[10px]'>最后登录</span>
+                        <span className='font-mono text-[10px]'>
+                          {formatDateTime(selectedUser.last_login_at)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between p-3.5 text-sm">
-                        <span className="text-[10px]">注册时间</span>
-                        <span className="font-mono text-[10px]">{formatDateTime(selectedUser.created_at)}</span>
+                      <div className='flex items-center justify-between p-3.5 text-sm'>
+                        <span className='text-[10px]'>注册时间</span>
+                        <span className='font-mono text-[10px]'>
+                          {formatDateTime(selectedUser.created_at)}
+                        </span>
                       </div>
-                      <div className="flex items-center justify-between p-3.5 text-sm">
-                        <span className="text-[10px]">最后更新</span>
-                        <span className="font-mono text-[10px]">{formatDateTime(selectedUser.updated_at)}</span>
+                      <div className='flex items-center justify-between p-3.5 text-sm'>
+                        <span className='text-[10px]'>最后更新</span>
+                        <span className='font-mono text-[10px]'>
+                          {formatDateTime(selectedUser.updated_at)}
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -154,20 +210,20 @@ export function UserDetailSheet({
               </div>
 
               {!selectedUser.is_admin && (
-                <div className="p-4 border-t bg-background/80 backdrop-blur-md shrink-0">
+                <div className='p-4 border-t bg-background/80 backdrop-blur-md shrink-0'>
                   <Button
-                    variant={selectedUser.is_active ? "destructive" : "default"}
-                    className="w-full h-9 text-xs font-medium transition-all active:scale-[0.98]"
+                    variant={selectedUser.is_active ? 'destructive' : 'default'}
+                    className='w-full h-9 text-xs font-medium transition-all active:scale-[0.98]'
                     onClick={() => onStatusToggle(selectedUser)}
                   >
                     {selectedUser.is_active ? (
                       <>
-                        <ShieldCheck className="size-3 mr-1" />
+                        <ShieldCheck className='size-3 mr-1' />
                         封禁账户
                       </>
                     ) : (
                       <>
-                        <UserCheck className="size-3 mr-1" />
+                        <UserCheck className='size-3 mr-1' />
                         解除封禁
                       </>
                     )}
@@ -179,5 +235,5 @@ export function UserDetailSheet({
         )}
       </SheetContent>
     </Sheet>
-  )
+  );
 }

frontend/app/(main)/admin/users/components/user-filter-bar.tsx

@@ -1,14 +1,27 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {ChevronDown, ChevronLeft, ChevronRight, Filter, Loader2, Search, X} from "lucide-react"
+import * as React from 'react';
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Filter,
+  Loader2,
+  Search,
+  X,
+} from 'lucide-react';
 
-import {Button} from "@/components/ui/button"
-import {Badge} from "@/components/ui/badge"
-import {Separator} from "@/components/ui/separator"
-import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu"
-import {useAdminUsers} from "@/contexts/admin-users-context"
-import {cn} from "@/lib/utils"
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import { cn } from '@/lib/utils';
 
 export function UserFilterBar() {
   const {
@@ -26,33 +39,35 @@ export function UserFilterBar() {
     setSearchUsername,
     setSearchEmail,
     setStatusFilter,
-    fetchUsers
-  } = useAdminUsers()
+    fetchUsers,
+  } = useAdminUsers();
 
-  const totalPages = Math.ceil(total / pageSize)
-  const hasSearchFilter = Boolean(searchUserId || searchUsername || searchEmail)
+  const totalPages = Math.ceil(total / pageSize);
+  const hasSearchFilter = Boolean(
+    searchUserId || searchUsername || searchEmail,
+  );
 
   return (
-    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
-      <div className="flex items-center gap-2 flex-wrap">
+    <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3'>
+      <div className='flex items-center gap-2 flex-wrap'>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              variant="outline"
-              size="sm"
+              variant='outline'
+              size='sm'
               className={cn(
-                "h-5 border-dashed text-[10px] font-medium shadow-none focus-visible:ring-0",
-                hasSearchFilter && "bg-primary/5 border-primary/20"
+                'h-5 border-dashed text-[10px] font-medium shadow-none focus-visible:ring-0',
+                hasSearchFilter && 'bg-primary/5 border-primary/20',
               )}
             >
-              <Search className="size-3 mr-1" />
+              <Search className='size-3 mr-1' />
               搜索
               {hasSearchFilter && (
                 <>
-                  <Separator orientation="vertical" className="mx-1" />
+                  <Separator orientation='vertical' className='mx-1' />
                   <Badge
-                    variant="default"
-                    className="text-[10px] h-3 px-1 rounded-full"
+                    variant='default'
+                    className='text-[10px] h-3 px-1 rounded-full'
                   >
                     !
                   </Badge>
@@ -60,35 +75,35 @@ export function UserFilterBar() {
               )}
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56 p-3" align="start">
-            <div className="space-y-2.5">
+          <DropdownMenuContent className='w-56 p-3' align='start'>
+            <div className='space-y-2.5'>
               <input
-                className="w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background"
-                placeholder="输入用户 ID..."
+                className='w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background'
+                placeholder='输入用户 ID...'
                 value={searchUserId}
                 onChange={(e) => setSearchUserId(e.target.value)}
               />
               <input
-                className="w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background"
-                placeholder="输入 username..."
+                className='w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background'
+                placeholder='输入 username...'
                 value={searchUsername}
                 onChange={(e) => setSearchUsername(e.target.value)}
               />
               <input
-                className="w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background"
-                placeholder="输入邮箱..."
+                className='w-full h-7 px-2 text-xs border border-dashed rounded-md outline-none focus:border-primary bg-background'
+                placeholder='输入邮箱...'
                 value={searchEmail}
                 onChange={(e) => setSearchEmail(e.target.value)}
               />
               {hasSearchFilter && (
                 <Button
-                  variant="ghost"
-                  size="sm"
-                  className="w-full h-6 text-xs"
+                  variant='ghost'
+                  size='sm'
+                  className='w-full h-6 text-xs'
                   onClick={() => {
-                    setSearchUserId("")
-                    setSearchUsername("")
-                    setSearchEmail("")
+                    setSearchUserId('');
+                    setSearchUsername('');
+                    setSearchEmail('');
                   }}
                 >
                   清除
@@ -101,21 +116,21 @@ export function UserFilterBar() {
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
-              variant="outline"
-              size="sm"
+              variant='outline'
+              size='sm'
               className={cn(
-                "h-5 border-dashed text-[10px] font-medium shadow-none focus-visible:ring-0",
-                statusFilter !== 'all' && "bg-primary/5 border-primary/20"
+                'h-5 border-dashed text-[10px] font-medium shadow-none focus-visible:ring-0',
+                statusFilter !== 'all' && 'bg-primary/5 border-primary/20',
               )}
             >
-              <Filter className="size-3" />
+              <Filter className='size-3' />
               状态
               {statusFilter !== 'all' && (
                 <>
-                  <Separator orientation="vertical" className="mx-1" />
+                  <Separator orientation='vertical' className='mx-1' />
                   <Badge
-                    variant="default"
-                    className="text-[10px] h-3 px-1 rounded-full"
+                    variant='default'
+                    className='text-[10px] h-3 px-1 rounded-full'
                   >
                     1
                   </Badge>
@@ -123,107 +138,130 @@ export function UserFilterBar() {
               )}
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-[120px]" align="start">
+          <DropdownMenuContent className='w-[120px]' align='start'>
             <DropdownMenuItem
-              onSelect={(e) => { e.preventDefault(); setStatusFilter('all') }}
+              onSelect={(e) => {
+                e.preventDefault();
+                setStatusFilter('all');
+              }}
             >
-              <div className={cn(
-                "mr-2 flex size-3 items-center justify-center rounded-sm border border-primary",
-                statusFilter === 'all'
-                  ? "bg-primary text-primary-foreground"
-                  : "opacity-50"
-              )} />
-              <span className="text-xs">全部状态</span>
+              <div
+                className={cn(
+                  'mr-2 flex size-3 items-center justify-center rounded-sm border border-primary',
+                  statusFilter === 'all'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50',
+                )}
+              />
+              <span className='text-xs'>全部状态</span>
             </DropdownMenuItem>
             <DropdownMenuItem
-              onSelect={(e) => { e.preventDefault(); setStatusFilter('active') }}
+              onSelect={(e) => {
+                e.preventDefault();
+                setStatusFilter('active');
+              }}
             >
-              <div className={cn(
-                "mr-2 flex size-3 items-center justify-center rounded-sm border border-primary",
-                statusFilter === 'active'
-                  ? "bg-primary text-primary-foreground"
-                  : "opacity-50"
-              )} />
-              <span className="text-xs">正常</span>
+              <div
+                className={cn(
+                  'mr-2 flex size-3 items-center justify-center rounded-sm border border-primary',
+                  statusFilter === 'active'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50',
+                )}
+              />
+              <span className='text-xs'>正常</span>
             </DropdownMenuItem>
             <DropdownMenuItem
-              onSelect={(e) => { e.preventDefault(); setStatusFilter('inactive') }}
+              onSelect={(e) => {
+                e.preventDefault();
+                setStatusFilter('inactive');
+              }}
             >
-              <div className={cn(
-                "mr-2 flex size-3 items-center justify-center rounded-sm border border-primary",
-                statusFilter === 'inactive'
-                  ? "bg-primary text-primary-foreground"
-                  : "opacity-50"
-              )} />
-              <span className="text-xs">禁用</span>
+              <div
+                className={cn(
+                  'mr-2 flex size-3 items-center justify-center rounded-sm border border-primary',
+                  statusFilter === 'inactive'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50',
+                )}
+              />
+              <span className='text-xs'>禁用</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
 
         {(hasSearchFilter || statusFilter !== 'all') && (
           <>
-            <Separator orientation="vertical" className="h-6 hidden sm:block" />
+            <Separator orientation='vertical' className='h-6 hidden sm:block' />
             <Button
-              variant="ghost"
-              size="sm"
+              variant='ghost'
+              size='sm'
               onClick={() => {
-                setSearchUserId("")
-                setSearchUsername("")
-                setSearchEmail("")
-                setStatusFilter('all')
+                setSearchUserId('');
+                setSearchUsername('');
+                setSearchEmail('');
+                setStatusFilter('all');
               }}
-              className="h-5 px-2 lg:px-3 text-[11px] font-medium text-muted-foreground hover:text-foreground"
+              className='h-5 px-2 lg:px-3 text-[11px] font-medium text-muted-foreground hover:text-foreground'
             >
-              <X className="size-3" />
+              <X className='size-3' />
               清空筛选
             </Button>
           </>
         )}
       </div>
 
-      <Separator className="lg:hidden" />
+      <Separator className='lg:hidden' />
 
-      <div className="flex items-center gap-1.5 self-end lg:self-auto">
-        <span className="text-[10px] text-muted-foreground whitespace-nowrap">
+      <div className='flex items-center gap-1.5 self-end lg:self-auto'>
+        <span className='text-[10px] text-muted-foreground whitespace-nowrap'>
           {total} 条记录
         </span>
-        <div className="flex items-center border border-dashed rounded-md shadow-none">
+        <div className='flex items-center border border-dashed rounded-md shadow-none'>
           <Button
-            variant="ghost"
-            size="icon"
-            className="h-5.5 w-6 rounded-none rounded-l-md disabled:opacity-30"
+            variant='ghost'
+            size='icon'
+            className='h-5.5 w-6 rounded-none rounded-l-md disabled:opacity-30'
             onClick={() => setPage(Math.max(1, page - 1))}
             disabled={page <= 1 || loading}
           >
-            <ChevronLeft className="size-3" />
+            <ChevronLeft className='size-3' />
           </Button>
-          <span className="text-[10px] font-mono text-muted-foreground px-2 border-x border-dashed">
+          <span className='text-[10px] font-mono text-muted-foreground px-2 border-x border-dashed'>
             {page}/{totalPages}
           </span>
           <Button
-            variant="ghost"
-            size="icon"
-            className="h-5.5 w-6 rounded-none rounded-r-md disabled:opacity-30"
+            variant='ghost'
+            size='icon'
+            className='h-5.5 w-6 rounded-none rounded-r-md disabled:opacity-30'
             onClick={() => setPage(Math.min(totalPages, page + 1))}
             disabled={page >= totalPages || loading}
           >
-            <ChevronRight className="size-3" />
+            <ChevronRight className='size-3' />
           </Button>
         </div>
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" size="sm" className="h-6 border-dashed text-[10px] px-2 font-mono shadow-none" disabled={loading}>
+            <Button
+              variant='outline'
+              size='sm'
+              className='h-6 border-dashed text-[10px] px-2 font-mono shadow-none'
+              disabled={loading}
+            >
               {pageSize}条/页
-              <ChevronDown className="size-3 opacity-50" />
+              <ChevronDown className='size-3 opacity-50' />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            {[20, 50, 100].map(size => (
+          <DropdownMenuContent align='end'>
+            {[20, 50, 100].map((size) => (
               <DropdownMenuItem
                 key={size}
                 onClick={() => setPageSize(size)}
-                className={cn("font-mono text-xs", pageSize === size && "bg-accent")}
+                className={cn(
+                  'font-mono text-xs',
+                  pageSize === size && 'bg-accent',
+                )}
               >
                 {size}条/页
               </DropdownMenuItem>
@@ -232,16 +270,16 @@ export function UserFilterBar() {
         </DropdownMenu>
 
         <Button
-          variant="outline"
-          size="icon"
-          className="h-6 w-6 border-dashed shadow-none"
+          variant='outline'
+          size='icon'
+          className='h-6 w-6 border-dashed shadow-none'
           onClick={() => fetchUsers(true)}
           disabled={loading}
-          title="刷新数据"
+          title='刷新数据'
         >
-          <Loader2 className={cn("size-3", loading && "animate-spin")} />
+          <Loader2 className={cn('size-3', loading && 'animate-spin')} />
         </Button>
       </div>
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/users/page.tsx

@@ -1,82 +1,93 @@
-"use client"
+'use client';
 
-import {useEffect, useState} from "react"
-import {Button} from "@/components/ui/button"
-import {Switch} from "@/components/ui/switch"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import {Badge} from "@/components/ui/badge"
-import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
-import {Eye, Layers, Pencil, Plus, UserRound, UserX,} from "lucide-react"
-import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip"
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Eye, Layers, Pencil, Plus, UserRound, UserX } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
-import type {AdminUser} from "@/lib/services/admin"
-import {formatDateTime} from "@/lib/utils"
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
-import {ErrorInline} from "@/components/layout/error"
-import {useAdminUsers} from "@/contexts/admin-users-context"
-import {CreateUserModal} from "./components/create-user-modal"
-import {UserFilterBar} from "./components/user-filter-bar"
-import {UserDetailSheet} from "./components/user-detail-sheet"
-import {EditUserModal} from "./components/edit-user-modal"
+import type { AdminUser } from '@/lib/services/admin';
+import { formatDateTime } from '@/lib/utils';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { ErrorInline } from '@/components/layout/error';
+import { useAdminUsers } from '@/contexts/admin-users-context';
+import { CreateUserModal } from './components/create-user-modal';
+import { UserFilterBar } from './components/user-filter-bar';
+import { UserDetailSheet } from './components/user-detail-sheet';
+import { EditUserModal } from './components/edit-user-modal';
 
 export default function UsersPage() {
-  const {
-    users,
-    loading,
-    error,
-    fetchUsers,
-    getUserDetail,
-    updateUserStatus
-  } = useAdminUsers()
+  const { users, loading, error, fetchUsers, getUserDetail, updateUserStatus } =
+    useAdminUsers();
 
-  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null)
-  const [detailOpen, setDetailOpen] = useState(false)
-  const [detailLoading, setDetailLoading] = useState(false)
-  const [createModalOpen, setCreateModalOpen] = useState(false)
-  const [editTarget, setEditTarget] = useState<AdminUser | null>(null)
+  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<AdminUser | null>(null);
 
   useEffect(() => {
-    fetchUsers()
-  }, [fetchUsers])
+    fetchUsers();
+  }, [fetchUsers]);
 
   const handleStatusToggle = async (user: AdminUser) => {
-    await updateUserStatus(user)
+    await updateUserStatus(user);
 
     if (selectedUser?.id === user.id) {
-      setSelectedUser(prev => prev ? { ...prev, is_active: !prev.is_active } : null)
+      setSelectedUser((prev) =>
+        prev ? { ...prev, is_active: !prev.is_active } : null,
+      );
     }
-  }
+  };
 
   const handleShowDetail = async (user: AdminUser) => {
-    setSelectedUser(user)
-    setDetailOpen(true)
-    setDetailLoading(true)
+    setSelectedUser(user);
+    setDetailOpen(true);
+    setDetailLoading(true);
 
     try {
-      const detail = await getUserDetail(user.id)
-      setSelectedUser(detail)
+      const detail = await getUserDetail(user.id);
+      setSelectedUser(detail);
     } catch {
-      setSelectedUser(user)
+      setSelectedUser(user);
     } finally {
-      setDetailLoading(false)
+      setDetailLoading(false);
     }
-  }
-
-
+  };
 
   return (
-    <div className="py-6 space-y-4">
+    <div className='py-6 space-y-4'>
       {/* 顶部标题栏 */}
-      <div className="flex items-center justify-between pb-2">
-        <div className="flex items-center gap-2">
-          <UserRound className="size-5 text-primary" />
+      <div className='flex items-center justify-between pb-2'>
+        <div className='flex items-center gap-2'>
+          <UserRound className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">用户管理</h1>
+            <h1 className='text-2xl font-semibold tracking-tight'>用户管理</h1>
           </div>
         </div>
-        <Button variant="secondary" size="sm" className="h-7 text-xs" onClick={() => setCreateModalOpen(true)}>
-          <Plus className="size-3.5 mr-1" />
+        <Button
+          variant='secondary'
+          size='sm'
+          className='h-7 text-xs'
+          onClick={() => setCreateModalOpen(true)}
+        >
+          <Plus className='size-3.5 mr-1' />
           新增用户
         </Button>
       </div>
@@ -85,75 +96,108 @@ export default function UsersPage() {
       <UserFilterBar />
 
       {error ? (
-        <div className="p-8 border border-dashed rounded-lg">
-          <ErrorInline error={error} onRetry={() => fetchUsers(true)} className="justify-center" />
+        <div className='p-8 border border-dashed rounded-lg'>
+          <ErrorInline
+            error={error}
+            onRetry={() => fetchUsers(true)}
+            className='justify-center'
+          />
         </div>
       ) : loading && users.length === 0 ? (
-        <LoadingStateWithBorder icon={Layers} description="加载用户列表中..." />
+        <LoadingStateWithBorder icon={Layers} description='加载用户列表中...' />
       ) : users.length === 0 ? (
-        <EmptyStateWithBorder icon={UserX} description="暂无用户数据" />
+        <EmptyStateWithBorder icon={UserX} description='暂无用户数据' />
       ) : (
-        <div className="border border-dashed shadow-none rounded-lg overflow-hidden">
+        <div className='border border-dashed shadow-none rounded-lg overflow-hidden'>
           <TooltipProvider delayDuration={0}>
-          <Table className="w-full caption-bottom text-sm min-w-full">
-            <TableHeader className="sticky top-0 z-20 bg-background">
-              <TableRow className="border-b border-dashed hover:bg-transparent">
-                <TableHead className="w-[90px] whitespace-nowrap py-2 h-8">ID</TableHead>
-                <TableHead className="w-[120px] whitespace-nowrap py-2 h-8">用户</TableHead>
-                <TableHead className="whitespace-nowrap min-w-[160px] py-2 h-8 pl-4">邮箱</TableHead>
-                <TableHead className="whitespace-nowrap min-w-[140px] py-2 h-8">上次登陆</TableHead>
-                <TableHead className="whitespace-nowrap min-w-[140px] py-2 h-8">注册时间</TableHead>
-                <TableHead className="whitespace-nowrap min-w-[140px] py-2 h-8">上次更新</TableHead>
-                <TableHead className="sticky right-0 text-center bg-background z-10 w-[110px] py-2 h-8">操作</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {users.map((user) => (
-                <TableRow
-                  key={user.id}
-                  className="border-dashed hover:bg-muted/30 cursor-pointer group"
-                  onClick={() => handleShowDetail(user)}
-                >
-                  <TableCell className="font-mono text-[11px] text-muted-foreground py-1">{user.id}</TableCell>
-                  <TableCell className="py-1">
-                    <div className="flex items-center gap-2">
-                      <Avatar className="h-7 w-7 rounded-sm border">
-                        <AvatarImage src={user.avatar_url} />
-                        <AvatarFallback className="rounded-sm text-[10px]">
-                          {user.username.substring(0, 2).toUpperCase()}
-                        </AvatarFallback>
-                      </Avatar>
-                      <div className="flex flex-col gap-0">
-                        <div className="flex items-center gap-1.5">
-                          <span className="font-medium text-[11px] leading-tight max-w-[100px] truncate" title={user.nickname}>{user.nickname}</span>
-                          {user.is_admin && (
-                            <Badge variant="secondary" className="text-[9px] h-3.5 px-0.5 rounded-[2px] font-normal leading-none tracking-tighter">
-                              ADM
-                            </Badge>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-[10px] text-muted-foreground font-mono leading-tight">@{user.username}</span>
+            <Table className='w-full caption-bottom text-sm min-w-full'>
+              <TableHeader className='sticky top-0 z-20 bg-background'>
+                <TableRow className='border-b border-dashed hover:bg-transparent'>
+                  <TableHead className='w-[90px] whitespace-nowrap py-2 h-8'>
+                    ID
+                  </TableHead>
+                  <TableHead className='w-[120px] whitespace-nowrap py-2 h-8'>
+                    用户
+                  </TableHead>
+                  <TableHead className='whitespace-nowrap min-w-[160px] py-2 h-8 pl-4'>
+                    邮箱
+                  </TableHead>
+                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
+                    上次登陆
+                  </TableHead>
+                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
+                    注册时间
+                  </TableHead>
+                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
+                    上次更新
+                  </TableHead>
+                  <TableHead className='sticky right-0 text-center bg-background z-10 w-[110px] py-2 h-8'>
+                    操作
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map((user) => (
+                  <TableRow
+                    key={user.id}
+                    className='border-dashed hover:bg-muted/30 cursor-pointer group'
+                    onClick={() => handleShowDetail(user)}
+                  >
+                    <TableCell className='font-mono text-[11px] text-muted-foreground py-1'>
+                      {user.id}
+                    </TableCell>
+                    <TableCell className='py-1'>
+                      <div className='flex items-center gap-2'>
+                        <Avatar className='h-7 w-7 rounded-sm border'>
+                          <AvatarImage src={user.avatar_url} />
+                          <AvatarFallback className='rounded-sm text-[10px]'>
+                            {user.username.substring(0, 2).toUpperCase()}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className='flex flex-col gap-0'>
+                          <div className='flex items-center gap-1.5'>
+                            <span
+                              className='font-medium text-[11px] leading-tight max-w-[100px] truncate'
+                              title={user.nickname}
+                            >
+                              {user.nickname}
+                            </span>
+                            {user.is_admin && (
+                              <Badge
+                                variant='secondary'
+                                className='text-[9px] h-3.5 px-0.5 rounded-[2px] font-normal leading-none tracking-tighter'
+                              >
+                                ADM
+                              </Badge>
+                            )}
+                          </div>
+                          <div className='flex items-center gap-1.5'>
+                            <span className='text-[10px] text-muted-foreground font-mono leading-tight'>
+                              @{user.username}
+                            </span>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  </TableCell>
+                    </TableCell>
 
-                  <TableCell className="text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4">
-                    {user.email || "-"}
-                  </TableCell>
+                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4'>
+                      {user.email || '-'}
+                    </TableCell>
 
-                  <TableCell className="text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4">
-                    {formatDateTime(user.last_login_at)}
-                  </TableCell>
-                  <TableCell className="text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1">
-                    {formatDateTime(user.created_at)}
-                  </TableCell>
-                  <TableCell className="text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1">
-                    {formatDateTime(user.updated_at)}
-                  </TableCell>
-                  <TableCell className="sticky right-0 text-center bg-background z-10 py-1" onClick={(e) => e.stopPropagation()}>
-                    <div className="flex items-center justify-center gap-0.5">
+                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4'>
+                      {formatDateTime(user.last_login_at)}
+                    </TableCell>
+                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1'>
+                      {formatDateTime(user.created_at)}
+                    </TableCell>
+                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1'>
+                      {formatDateTime(user.updated_at)}
+                    </TableCell>
+                    <TableCell
+                      className='sticky right-0 text-center bg-background z-10 py-1'
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <div className='flex items-center justify-center gap-0.5'>
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <div>
@@ -161,44 +205,56 @@ export default function UsersPage() {
                                 checked={user.is_active}
                                 onCheckedChange={() => handleStatusToggle(user)}
                                 disabled={user.is_admin}
-                                className="scale-75"
+                                className='scale-75'
                               />
                             </div>
                           </TooltipTrigger>
-                          <TooltipContent side="top" className="text-xs">
-                            {user.is_admin ? '管理员账户' : user.is_active ? '禁用账户' : '启用账户'}
+                          <TooltipContent side='top' className='text-xs'>
+                            {user.is_admin
+                              ? '管理员账户'
+                              : user.is_active
+                                ? '禁用账户'
+                                : '启用账户'}
                           </TooltipContent>
                         </Tooltip>
 
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground" onClick={() => handleShowDetail(user)}>
-                              <Eye className="size-3" />
+                            <Button
+                              variant='ghost'
+                              size='icon'
+                              className='h-6 w-6 text-muted-foreground hover:text-foreground'
+                              onClick={() => handleShowDetail(user)}
+                            >
+                              <Eye className='size-3' />
                             </Button>
                           </TooltipTrigger>
-                          <TooltipContent side="top" className="text-xs">
+                          <TooltipContent side='top' className='text-xs'>
                             查看详情
                           </TooltipContent>
                         </Tooltip>
 
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-6 w-6 text-muted-foreground hover:text-foreground" onClick={() => setEditTarget(user)}>
-                              <Pencil className="size-3" />
+                            <Button
+                              variant='ghost'
+                              size='icon'
+                              className='h-6 w-6 text-muted-foreground hover:text-foreground'
+                              onClick={() => setEditTarget(user)}
+                            >
+                              <Pencil className='size-3' />
                             </Button>
                           </TooltipTrigger>
-                          <TooltipContent side="top" className="text-xs">
+                          <TooltipContent side='top' className='text-xs'>
                             编辑用户
                           </TooltipContent>
                         </Tooltip>
-
-
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
           </TooltipProvider>
         </div>
       )}
@@ -219,10 +275,11 @@ export default function UsersPage() {
         onClose={() => setEditTarget(null)}
       />
 
-
-
       {/* 新建用户模态弹窗 */}
-      <CreateUserModal isOpen={createModalOpen} onClose={() => setCreateModalOpen(false)} />
+      <CreateUserModal
+        isOpen={createModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+      />
     </div>
-  )
+  );
 }

frontend/app/(main)/apply-logs/components/log-detail-sheet.tsx

@@ -1,108 +1,129 @@
-"use client"
+'use client';
 
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from "@/components/ui/sheet"
-import type {ApplyLogItem} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import type { ApplyLogItem } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
 interface LogDetailSheetProps {
-  log: ApplyLogItem | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
+  log: ApplyLogItem | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }
 
 function getResultBadge(result: string) {
-  if (result === "success") {
+  if (result === 'success') {
     return (
       <Badge
-        variant="outline"
-        className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2"
+        variant='outline'
+        className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2'
       >
-        <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
+        <span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
         成功
       </Badge>
-    )
+    );
   }
-  if (result === "warning") {
+  if (result === 'warning') {
     return (
       <Badge
-        variant="outline"
-        className="text-[10px] bg-amber-500/10 border-amber-500/20 text-amber-600 rounded-full py-0 px-2"
+        variant='outline'
+        className='text-[10px] bg-amber-500/10 border-amber-500/20 text-amber-600 rounded-full py-0 px-2'
       >
-        <span className="size-1 bg-amber-500 rounded-full mr-1.5 shrink-0" />
+        <span className='size-1 bg-amber-500 rounded-full mr-1.5 shrink-0' />
         警告
       </Badge>
-    )
+    );
   }
   return (
     <Badge
-      variant="outline"
-      className="text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2"
+      variant='outline'
+      className='text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2'
     >
-      <span className="size-1 bg-destructive rounded-full mr-1.5 shrink-0" />
+      <span className='size-1 bg-destructive rounded-full mr-1.5 shrink-0' />
       失败
     </Badge>
-  )
+  );
 }
 
-export function LogDetailSheet({ log, open, onOpenChange }: LogDetailSheetProps) {
+export function LogDetailSheet({
+  log,
+  open,
+  onOpenChange,
+}: LogDetailSheetProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-md w-full p-0 flex flex-col gap-0">
-        <SheetHeader className="px-5 py-4 border-b">
+      <SheetContent className='sm:max-w-md w-full p-0 flex flex-col gap-0'>
+        <SheetHeader className='px-5 py-4 border-b'>
           <SheetTitle>应用日志详情</SheetTitle>
-          <SheetDescription>查看单条应用日志的完整结果与校验信息。</SheetDescription>
+          <SheetDescription>
+            查看单条应用日志的完整结果与校验信息。
+          </SheetDescription>
         </SheetHeader>
 
         {log ? (
-          <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
-            <div className="flex flex-wrap gap-2">
+          <div className='flex-1 overflow-y-auto px-5 py-4 space-y-4'>
+            <div className='flex flex-wrap gap-2'>
               {getResultBadge(log.result)}
-              <Badge variant="outline" className="text-[10px] rounded-full">
+              <Badge variant='outline' className='text-[10px] rounded-full'>
                 Node: {log.node_id}
               </Badge>
-              <Badge variant="outline" className="text-[10px] rounded-full">
+              <Badge variant='outline' className='text-[10px] rounded-full'>
                 版本: {log.version}
               </Badge>
             </div>
 
-            <div className="grid gap-3 text-xs">
+            <div className='grid gap-3 text-xs'>
               <div>
-                <p className="text-muted-foreground">创建时间</p>
-                <p className="font-medium">{formatDateTime(log.created_at)}</p>
+                <p className='text-muted-foreground'>创建时间</p>
+                <p className='font-medium'>{formatDateTime(log.created_at)}</p>
               </div>
               <div>
-                <p className="text-muted-foreground">目标 Checksum</p>
-                <p className="font-mono break-all">{log.checksum || "—"}</p>
+                <p className='text-muted-foreground'>目标 Checksum</p>
+                <p className='font-mono break-all'>{log.checksum || '—'}</p>
               </div>
               <div>
-                <p className="text-muted-foreground">主配置摘要</p>
-                <p className="font-mono break-all">{log.main_config_checksum || "—"}</p>
+                <p className='text-muted-foreground'>主配置摘要</p>
+                <p className='font-mono break-all'>
+                  {log.main_config_checksum || '—'}
+                </p>
               </div>
               <div>
-                <p className="text-muted-foreground">路由配置摘要</p>
-                <p className="font-mono break-all">{log.route_config_checksum || "—"}</p>
+                <p className='text-muted-foreground'>路由配置摘要</p>
+                <p className='font-mono break-all'>
+                  {log.route_config_checksum || '—'}
+                </p>
               </div>
               <div>
-                <p className="text-muted-foreground">支持文件数</p>
-                <p className="font-medium">{log.support_file_count}</p>
+                <p className='text-muted-foreground'>支持文件数</p>
+                <p className='font-medium'>{log.support_file_count}</p>
               </div>
             </div>
 
-            <div className="rounded-lg border border-dashed p-3">
-              <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-2">消息</p>
-              <pre className="text-xs whitespace-pre-wrap break-words">{log.message || "—"}</pre>
+            <div className='rounded-lg border border-dashed p-3'>
+              <p className='text-[10px] uppercase tracking-wider text-muted-foreground mb-2'>
+                消息
+              </p>
+              <pre className='text-xs whitespace-pre-wrap break-words'>
+                {log.message || '—'}
+              </pre>
             </div>
           </div>
         ) : null}
 
-        <SheetFooter className="px-5 py-4 border-t">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+        <SheetFooter className='px-5 py-4 border-t'>
+          <Button variant='outline' onClick={() => onOpenChange(false)}>
             关闭
           </Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
-  )
+  );
 }

frontend/app/(main)/apply-logs/page-client.tsx

@@ -1,14 +1,14 @@
-"use client"
+'use client';
 
-import {useCallback, useEffect, useMemo, useState} from "react"
-import Link from "next/link"
-import {useSearchParams} from "next/navigation"
-import {ClipboardList, Eye, RefreshCw, Search, Trash2} from "lucide-react"
-import {toast} from "sonner"
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { ClipboardList, Eye, RefreshCw, Search, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
-import {EmptyStateWithBorder} from "@/components/layout/empty"
-import {ErrorInline} from "@/components/layout/error"
-import {LoadingStateWithBorder} from "@/components/layout/loading"
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -18,226 +18,248 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import {Badge} from "@/components/ui/badge"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/components/ui/table"
-import {type ApplyLogItem, ApplyLogService,} from "@/lib/services/openflare"
-import {formatDateTime} from "@/lib/utils"
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { type ApplyLogItem, ApplyLogService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {LogDetailSheet} from "./components/log-detail-sheet"
+import { LogDetailSheet } from './components/log-detail-sheet';
 
-const PAGE_SIZE_OPTIONS = [20, 50, 100]
+const PAGE_SIZE_OPTIONS = [20, 50, 100];
 
 function truncateHash(value: string) {
-  if (!value) return "—"
-  return value.length > 12 ? `${value.slice(0, 12)}...` : value
+  if (!value) return '—';
+  return value.length > 12 ? `${value.slice(0, 12)}...` : value;
 }
 
 function getResultBadge(result: string) {
-  if (result === "success") {
+  if (result === 'success') {
     return (
       <Badge
-        variant="outline"
-        className="text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2"
+        variant='outline'
+        className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2'
       >
-        <span className="size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0" />
+        <span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
         成功
       </Badge>
-    )
+    );
   }
-  if (result === "warning") {
+  if (result === 'warning') {
     return (
       <Badge
-        variant="outline"
-        className="text-[10px] bg-amber-500/10 border-amber-500/20 text-amber-600 rounded-full py-0 px-2"
+        variant='outline'
+        className='text-[10px] bg-amber-500/10 border-amber-500/20 text-amber-600 rounded-full py-0 px-2'
       >
-        <span className="size-1 bg-amber-500 rounded-full mr-1.5 shrink-0" />
+        <span className='size-1 bg-amber-500 rounded-full mr-1.5 shrink-0' />
         警告
       </Badge>
-    )
+    );
   }
   return (
     <Badge
-      variant="outline"
-      className="text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2"
+      variant='outline'
+      className='text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2'
     >
-      <span className="size-1 bg-destructive rounded-full mr-1.5 shrink-0" />
+      <span className='size-1 bg-destructive rounded-full mr-1.5 shrink-0' />
       失败
     </Badge>
-  )
+  );
 }
 
 export function ApplyLogsPageClient() {
-  const searchParams = useSearchParams()
-  const initialNodeId = searchParams.get("node_id")?.trim() ?? ""
+  const searchParams = useSearchParams();
+  const initialNodeId = searchParams.get('node_id')?.trim() ?? '';
 
-  const [nodeFilterInput, setNodeFilterInput] = useState(initialNodeId)
-  const [nodeFilter, setNodeFilter] = useState(initialNodeId)
-  const [pageNo, setPageNo] = useState(1)
-  const [pageSize, setPageSize] = useState(20)
+  const [nodeFilterInput, setNodeFilterInput] = useState(initialNodeId);
+  const [nodeFilter, setNodeFilter] = useState(initialNodeId);
+  const [pageNo, setPageNo] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
 
-  const [rows, setRows] = useState<ApplyLogItem[]>([])
-  const [current, setCurrent] = useState(1)
-  const [total, setTotal] = useState(0)
-  const [totalPage, setTotalPage] = useState(0)
+  const [rows, setRows] = useState<ApplyLogItem[]>([]);
+  const [current, setCurrent] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [totalPage, setTotalPage] = useState(0);
 
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const [selectedLog, setSelectedLog] = useState<ApplyLogItem | null>(null)
-  const [detailOpen, setDetailOpen] = useState(false)
-  const [cleanupOpen, setCleanupOpen] = useState(false)
-  const [cleaning, setCleaning] = useState(false)
+  const [selectedLog, setSelectedLog] = useState<ApplyLogItem | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [cleanupOpen, setCleanupOpen] = useState(false);
+  const [cleaning, setCleaning] = useState(false);
 
   const summary = useMemo(() => {
-    const nodeIds = new Set(rows.map((item) => item.node_id))
+    const nodeIds = new Set(rows.map((item) => item.node_id));
     return [
-      { label: "总记录数", value: total },
-      { label: "当前页", value: current },
-      { label: "总页数", value: totalPage },
-      { label: "当前页节点数", value: nodeIds.size },
-    ]
-  }, [rows, total, current, totalPage])
+      { label: '总记录数', value: total },
+      { label: '当前页', value: current },
+      { label: '总页数', value: totalPage },
+      { label: '当前页节点数', value: nodeIds.size },
+    ];
+  }, [rows, total, current, totalPage]);
 
   const fetchLogs = useCallback(async () => {
-    setLoading(true)
-    setError(null)
+    setLoading(true);
+    setError(null);
     try {
       const data = await ApplyLogService.list({
         node_id: nodeFilter || undefined,
         pageNo,
         pageSize,
-      })
-      setRows(data.rows)
-      setCurrent(data.current)
-      setTotal(data.total)
-      setTotalPage(data.totalPage)
+      });
+      setRows(data.rows);
+      setCurrent(data.current);
+      setTotal(data.total);
+      setTotalPage(data.totalPage);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "加载失败")
+      setError(err instanceof Error ? err.message : '加载失败');
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }, [nodeFilter, pageNo, pageSize])
+  }, [nodeFilter, pageNo, pageSize]);
 
   useEffect(() => {
-    void fetchLogs()
-  }, [fetchLogs])
+    void fetchLogs();
+  }, [fetchLogs]);
 
   useEffect(() => {
-    const nodeId = searchParams.get("node_id")?.trim()
-    if (!nodeId) return
-    setNodeFilterInput(nodeId)
-    setNodeFilter(nodeId)
-    setPageNo(1)
-  }, [searchParams])
+    const nodeId = searchParams.get('node_id')?.trim();
+    if (!nodeId) return;
+    setNodeFilterInput(nodeId);
+    setNodeFilter(nodeId);
+    setPageNo(1);
+  }, [searchParams]);
 
   const handleSearch = () => {
-    setPageNo(1)
-    setNodeFilter(nodeFilterInput.trim())
-  }
+    setPageNo(1);
+    setNodeFilter(nodeFilterInput.trim());
+  };
 
   const handleResetFilters = () => {
-    setNodeFilterInput("")
-    setNodeFilter("")
-    setPageNo(1)
-  }
+    setNodeFilterInput('');
+    setNodeFilter('');
+    setPageNo(1);
+  };
 
   const handleCleanupLogs = async () => {
-    setCleaning(true)
+    setCleaning(true);
     try {
-      const result = await ApplyLogService.cleanup({ delete_all: true })
-      toast.success("应用日志已清空", {
+      const result = await ApplyLogService.cleanup({ delete_all: true });
+      toast.success('应用日志已清空', {
         description: `共删除 ${result.deleted_count} 条记录`,
-      })
-      setCleanupOpen(false)
-      setPageNo(1)
-      await fetchLogs()
+      });
+      setCleanupOpen(false);
+      setPageNo(1);
+      await fetchLogs();
     } catch (err) {
-      toast.error("清空应用日志失败", {
-        description: err instanceof Error ? err.message : "未知错误",
-      })
+      toast.error('清空应用日志失败', {
+        description: err instanceof Error ? err.message : '未知错误',
+      });
     } finally {
-      setCleaning(false)
+      setCleaning(false);
     }
-  }
+  };
 
   return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center gap-2">
-          <ClipboardList className="size-5 text-primary" />
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-2'>
+          <ClipboardList className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">应用日志</h1>
-            <p className="text-sm text-muted-foreground">
+            <h1 className='text-2xl font-semibold tracking-tight'>应用日志</h1>
+            <p className='text-sm text-muted-foreground'>
               查看节点应用配置的成功、警告和失败记录，支持按 node_id 过滤。
             </p>
           </div>
         </div>
 
-        <div className="flex flex-wrap gap-2">
-          <Button variant="outline" size="sm" onClick={() => void fetchLogs()} disabled={loading}>
-            <RefreshCw className={`size-3.5 mr-1 ${loading ? "animate-spin" : ""}`} />
+        <div className='flex flex-wrap gap-2'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => void fetchLogs()}
+            disabled={loading}
+          >
+            <RefreshCw
+              className={`size-3.5 mr-1 ${loading ? 'animate-spin' : ''}`}
+            />
             刷新
           </Button>
           <Button
-            variant="outline"
-            size="sm"
+            variant='outline'
+            size='sm'
             onClick={() => setCleanupOpen(true)}
             disabled={loading || cleaning || total === 0}
           >
-            <Trash2 className="size-3.5 mr-1" />
+            <Trash2 className='size-3.5 mr-1' />
             清空日志
           </Button>
-          <Button variant="outline" size="sm" asChild>
-            <Link href="/nodes">返回节点</Link>
+          <Button variant='outline' size='sm' asChild>
+            <Link href='/nodes'>返回节点</Link>
           </Button>
         </div>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
         {summary.map((item) => (
           <div
             key={item.label}
-            className="rounded-lg border border-dashed px-4 py-3 bg-background"
+            className='rounded-lg border border-dashed px-4 py-3 bg-background'
           >
-            <p className="text-[10px] uppercase tracking-wider text-muted-foreground">
+            <p className='text-[10px] uppercase tracking-wider text-muted-foreground'>
               {item.label}
             </p>
-            <p className="mt-1 text-lg font-semibold">{item.value}</p>
+            <p className='mt-1 text-lg font-semibold'>{item.value}</p>
           </div>
         ))}
       </div>
 
-      <div className="flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
-        <div className="grid flex-1 gap-3 md:grid-cols-[minmax(0,1fr)_160px]">
-          <div className="space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground">Node ID</p>
-            <div className="relative">
-              <Search className="absolute left-2.5 top-2.5 size-3.5 text-muted-foreground" />
+      <div className='flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between'>
+        <div className='grid flex-1 gap-3 md:grid-cols-[minmax(0,1fr)_160px]'>
+          <div className='space-y-1.5'>
+            <p className='text-xs font-medium text-muted-foreground'>Node ID</p>
+            <div className='relative'>
+              <Search className='absolute left-2.5 top-2.5 size-3.5 text-muted-foreground' />
               <Input
                 value={nodeFilterInput}
                 onChange={(e) => setNodeFilterInput(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter") handleSearch()
+                  if (e.key === 'Enter') handleSearch();
                 }}
-                placeholder="输入 node_id 过滤应用日志"
-                className="pl-8 h-9 text-xs"
+                placeholder='输入 node_id 过滤应用日志'
+                className='pl-8 h-9 text-xs'
               />
             </div>
           </div>
-          <div className="space-y-1.5">
-            <p className="text-xs font-medium text-muted-foreground">每页条数</p>
+          <div className='space-y-1.5'>
+            <p className='text-xs font-medium text-muted-foreground'>
+              每页条数
+            </p>
             <Select
               value={String(pageSize)}
               onValueChange={(value) => {
-                setPageSize(Number.parseInt(value, 10))
-                setPageNo(1)
+                setPageSize(Number.parseInt(value, 10));
+                setPageNo(1);
               }}
             >
-              <SelectTrigger className="h-9 text-xs">
+              <SelectTrigger className='h-9 text-xs'>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -250,71 +272,83 @@ export function ApplyLogsPageClient() {
             </Select>
           </div>
         </div>
-        <div className="flex flex-wrap gap-2">
-          <Button size="sm" onClick={handleSearch}>
+        <div className='flex flex-wrap gap-2'>
+          <Button size='sm' onClick={handleSearch}>
             筛选
           </Button>
-          <Button variant="outline" size="sm" onClick={handleResetFilters}>
+          <Button variant='outline' size='sm' onClick={handleResetFilters}>
             重置筛选
           </Button>
         </div>
       </div>
 
-      {error ? <ErrorInline message={error} onRetry={() => void fetchLogs()} /> : null}
+      {error ? (
+        <ErrorInline message={error} onRetry={() => void fetchLogs()} />
+      ) : null}
 
-      <div className="border border-dashed shadow-none rounded-lg overflow-hidden bg-background">
+      <div className='border border-dashed shadow-none rounded-lg overflow-hidden bg-background'>
         {loading ? (
           <LoadingStateWithBorder />
         ) : rows.length === 0 ? (
           <EmptyStateWithBorder
-            title="暂无应用日志"
-            description="当前筛选条件下没有可展示的应用记录。"
+            title='暂无应用日志'
+            description='当前筛选条件下没有可展示的应用记录。'
           />
         ) : (
           <Table>
-            <TableHeader className="bg-muted/40">
-              <TableRow className="border-dashed hover:bg-transparent">
-                <TableHead className="text-xs font-semibold">Node ID</TableHead>
-                <TableHead className="text-xs font-semibold">版本</TableHead>
-                <TableHead className="text-xs font-semibold">结果</TableHead>
-                <TableHead className="text-xs font-semibold">Checksum</TableHead>
-                <TableHead className="text-xs font-semibold">时间</TableHead>
-                <TableHead className="text-xs font-semibold">消息</TableHead>
-                <TableHead className="text-xs font-semibold text-right">操作</TableHead>
+            <TableHeader className='bg-muted/40'>
+              <TableRow className='border-dashed hover:bg-transparent'>
+                <TableHead className='text-xs font-semibold'>Node ID</TableHead>
+                <TableHead className='text-xs font-semibold'>版本</TableHead>
+                <TableHead className='text-xs font-semibold'>结果</TableHead>
+                <TableHead className='text-xs font-semibold'>
+                  Checksum
+                </TableHead>
+                <TableHead className='text-xs font-semibold'>时间</TableHead>
+                <TableHead className='text-xs font-semibold'>消息</TableHead>
+                <TableHead className='text-xs font-semibold text-right'>
+                  操作
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {rows.map((log) => (
                 <TableRow
                   key={log.id}
-                  className="border-dashed hover:bg-muted/10 transition-colors align-top"
+                  className='border-dashed hover:bg-muted/10 transition-colors align-top'
                 >
-                  <TableCell className="text-xs font-medium">{log.node_id}</TableCell>
-                  <TableCell className="text-xs text-muted-foreground">{log.version}</TableCell>
+                  <TableCell className='text-xs font-medium'>
+                    {log.node_id}
+                  </TableCell>
+                  <TableCell className='text-xs text-muted-foreground'>
+                    {log.version}
+                  </TableCell>
                   <TableCell>{getResultBadge(log.result)}</TableCell>
                   <TableCell
-                    className="text-xs font-mono text-muted-foreground"
+                    className='text-xs font-mono text-muted-foreground'
                     title={log.checksum}
                   >
                     {truncateHash(log.checksum)}
                   </TableCell>
-                  <TableCell className="text-xs text-muted-foreground">
+                  <TableCell className='text-xs text-muted-foreground'>
                     {formatDateTime(log.created_at)}
                   </TableCell>
-                  <TableCell className="text-xs text-muted-foreground max-w-56">
-                    <div className="line-clamp-2 break-words">{log.message || "—"}</div>
+                  <TableCell className='text-xs text-muted-foreground max-w-56'>
+                    <div className='line-clamp-2 break-words'>
+                      {log.message || '—'}
+                    </div>
                   </TableCell>
-                  <TableCell className="text-right">
+                  <TableCell className='text-right'>
                     <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-7 text-xs"
+                      variant='ghost'
+                      size='sm'
+                      className='h-7 text-xs'
                       onClick={() => {
-                        setSelectedLog(log)
-                        setDetailOpen(true)
+                        setSelectedLog(log);
+                        setDetailOpen(true);
                       }}
                     >
-                      <Eye className="size-3 mr-1" />
+                      <Eye className='size-3 mr-1' />
                       详情
                     </Button>
                   </TableCell>
@@ -326,22 +360,22 @@ export function ApplyLogsPageClient() {
       </div>
 
       {!loading && rows.length > 0 ? (
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <p className="text-xs text-muted-foreground">
+        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+          <p className='text-xs text-muted-foreground'>
             第 {current} / {Math.max(totalPage, 1)} 页，共 {total} 条记录。
           </p>
-          <div className="flex gap-2">
+          <div className='flex gap-2'>
             <Button
-              variant="outline"
-              size="sm"
+              variant='outline'
+              size='sm'
               disabled={current <= 1}
               onClick={() => setPageNo((prev) => Math.max(1, prev - 1))}
             >
               上一页
             </Button>
             <Button
-              variant="outline"
-              size="sm"
+              variant='outline'
+              size='sm'
               disabled={totalPage === 0 || current >= totalPage}
               onClick={() =>
                 setPageNo((prev) =>
@@ -366,24 +400,25 @@ export function ApplyLogsPageClient() {
           <AlertDialogHeader>
             <AlertDialogTitle>确认清空应用日志？</AlertDialogTitle>
             <AlertDialogDescription>
-              该操作将删除全部 {total} 条应用日志记录，且不可撤销。清空后节点仍会照常上报新的应用结果。
+              该操作将删除全部 {total}{' '}
+              条应用日志记录，且不可撤销。清空后节点仍会照常上报新的应用结果。
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={cleaning}>取消</AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
               disabled={cleaning}
               onClick={(event) => {
-                event.preventDefault()
-                void handleCleanupLogs()
+                event.preventDefault();
+                void handleCleanupLogs();
               }}
             >
-              {cleaning ? "清空中..." : "确认清空"}
+              {cleaning ? '清空中...' : '确认清空'}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }

frontend/app/(main)/apply-logs/page.tsx

@@ -1,20 +1,20 @@
-import {Suspense} from 'react';
+import { Suspense } from 'react';
 
-import {Skeleton} from '@/components/ui/skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
 
-import {ApplyLogsPageClient} from './page-client';
+import { ApplyLogsPageClient } from './page-client';
 
 function ApplyLogsPageFallback() {
   return (
-    <div className="py-6 px-1 space-y-6">
-      <Skeleton className="h-8 w-40" />
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <Skeleton className="h-16 w-full" />
-        <Skeleton className="h-16 w-full" />
-        <Skeleton className="h-16 w-full" />
-        <Skeleton className="h-16 w-full" />
+    <div className='py-6 px-1 space-y-6'>
+      <Skeleton className='h-8 w-40' />
+      <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-4'>
+        <Skeleton className='h-16 w-full' />
+        <Skeleton className='h-16 w-full' />
+        <Skeleton className='h-16 w-full' />
+        <Skeleton className='h-16 w-full' />
       </div>
-      <Skeleton className="h-96 w-full" />
+      <Skeleton className='h-96 w-full' />
     </div>
   );
 }
@@ -25,4 +25,4 @@ export default function ApplyLogsPage() {
       <ApplyLogsPageClient />
     </Suspense>
   );
-}
+}

frontend/app/(main)/certificates/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {useMemo, useState} from 'react';
-import {FileKey, Plus, RefreshCw, Trash2} from 'lucide-react';
-import {toast} from 'sonner';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { FileKey, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
 import {
   AlertDialog,
@@ -15,21 +15,30 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {TlsCertificateService} from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import type { TlsCertificateItem } from '@/lib/services/openflare';
+import { TlsCertificateService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
-import {CertificateApplyDialog} from '../websites/components/certificate-apply-dialog';
-import {CertificateDetailDialog} from '../websites/components/certificate-detail-dialog';
-import {CertificateEditorDialog} from '../websites/components/certificate-editor-dialog';
-import {CertificateImportDialog} from '../websites/components/certificate-import-dialog';
-import {WebsiteStatusBadge} from '../websites/components/status-badge';
-import {getCertificateStatus, getErrorMessage} from '../websites/components/website-utils';
+import { CertificateApplyDialog } from '../websites/components/certificate-apply-dialog';
+import { CertificateDetailDialog } from '../websites/components/certificate-detail-dialog';
+import { CertificateEditorDialog } from '../websites/components/certificate-editor-dialog';
+import { CertificateImportDialog } from '../websites/components/certificate-import-dialog';
+import { WebsiteStatusBadge } from '../websites/components/status-badge';
+import {
+  getCertificateStatus,
+  getErrorMessage,
+} from '../websites/components/website-utils';
 
 const certificatesQueryKey = ['openflare', 'tls-certificates'];
 
@@ -41,9 +50,14 @@ export default function CertificatesPage() {
   const [applyOpen, setApplyOpen] = useState(false);
   const [detailOpen, setDetailOpen] = useState(false);
   const [editorOpen, setEditorOpen] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<TlsCertificateItem | null>(null);
-  const [selectedCertificateId, setSelectedCertificateId] = useState<number | null>(null);
-  const [applyCertificate, setApplyCertificate] = useState<TlsCertificateItem | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<TlsCertificateItem | null>(
+    null,
+  );
+  const [selectedCertificateId, setSelectedCertificateId] = useState<
+    number | null
+  >(null);
+  const [applyCertificate, setApplyCertificate] =
+    useState<TlsCertificateItem | null>(null);
   const [applyMode, setApplyMode] = useState<CertificateApplyMode>('edit-acme');
 
   const certificatesQuery = useQuery({
@@ -56,7 +70,7 @@ export default function CertificatesPage() {
     onSuccess: async () => {
       toast.success('证书已删除');
       setDeleteTarget(null);
-      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
+      await queryClient.invalidateQueries({ queryKey: certificatesQueryKey });
     },
     onError: (error) => toast.error(getErrorMessage(error)),
   });
@@ -65,7 +79,7 @@ export default function CertificatesPage() {
     mutationFn: (id: number) => TlsCertificateService.renew(id),
     onSuccess: async (cert) => {
       toast.success(`证书 ${cert.name} 续期任务已提交`);
-      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
+      await queryClient.invalidateQueries({ queryKey: certificatesQueryKey });
     },
     onError: (error) => toast.error(getErrorMessage(error)),
   });
@@ -87,85 +101,103 @@ export default function CertificatesPage() {
   };
 
   return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center gap-2">
-          <FileKey className="size-5 text-primary" />
-          <h1 className="text-2xl font-semibold tracking-tight">证书</h1>
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-2'>
+          <FileKey className='size-5 text-primary' />
+          <h1 className='text-2xl font-semibold tracking-tight'>证书</h1>
         </div>
-        <div className="flex flex-wrap gap-2">
+        <div className='flex flex-wrap gap-2'>
           <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => void queryClient.invalidateQueries({queryKey: certificatesQueryKey})}
+            variant='outline'
+            size='sm'
+            className='h-7 text-xs'
+            onClick={() =>
+              void queryClient.invalidateQueries({
+                queryKey: certificatesQueryKey,
+              })
+            }
           >
-            <RefreshCw className="size-3.5 mr-1" />
+            <RefreshCw className='size-3.5 mr-1' />
             刷新证书
           </Button>
           <Button
-            variant="secondary"
-            size="sm"
-            className="h-7 text-xs"
+            variant='secondary'
+            size='sm'
+            className='h-7 text-xs'
             onClick={() => setImportOpen(true)}
           >
             导入证书
           </Button>
-          <Button size="sm" className="h-7 text-xs" onClick={() => setApplyOpen(true)}>
-            <Plus className="size-3.5 mr-1" />
+          <Button
+            size='sm'
+            className='h-7 text-xs'
+            onClick={() => setApplyOpen(true)}
+          >
+            <Plus className='size-3.5 mr-1' />
             申请证书
           </Button>
         </div>
       </div>
 
-      <Card className="border-dashed shadow-none">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base font-semibold">证书列表</CardTitle>
+      <Card className='border-dashed shadow-none'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-base font-semibold'>证书列表</CardTitle>
           <CardDescription>
             展示证书有效期、备注和状态，支持查看详情、编辑内容或删除证书。
           </CardDescription>
         </CardHeader>
         <CardContent>
           {certificatesQuery.isLoading ? (
-            <LoadingStateWithBorder icon={FileKey} description="加载证书列表中..." />
+            <LoadingStateWithBorder
+              icon={FileKey}
+              description='加载证书列表中...'
+            />
           ) : certificatesQuery.isError ? (
-            <div className="p-8 border border-dashed rounded-lg">
+            <div className='p-8 border border-dashed rounded-lg'>
               <ErrorInline
                 message={getErrorMessage(certificatesQuery.error)}
                 onRetry={() => void certificatesQuery.refetch()}
-                className="justify-center"
+                className='justify-center'
               />
             </div>
           ) : certificates.length === 0 ? (
             <EmptyStateWithBorder
               icon={FileKey}
-              description="暂无证书，点击右上角「导入证书」或「申请证书」开始录入。"
+              description='暂无证书，点击右上角「导入证书」或「申请证书」开始录入。'
             />
           ) : (
-            <div className="space-y-3">
+            <div className='space-y-3'>
               {certificates.map((certificate) => {
                 const status = getCertificateStatus(certificate);
 
                 return (
                   <div
                     key={certificate.id}
-                    className="rounded-lg border bg-card px-4 py-3"
+                    className='rounded-lg border bg-card px-4 py-3'
                   >
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="space-y-2">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <p className="text-sm font-semibold">{certificate.name}</p>
-                          <WebsiteStatusBadge label={status.label} tone={status.tone} />
+                    <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                      <div className='space-y-2'>
+                        <div className='flex flex-wrap items-center gap-2'>
+                          <p className='text-sm font-semibold'>
+                            {certificate.name}
+                          </p>
+                          <WebsiteStatusBadge
+                            label={status.label}
+                            tone={status.tone}
+                          />
                         </div>
-                        <div className="text-xs leading-5 text-muted-foreground space-y-0.5">
+                        <div className='text-xs leading-5 text-muted-foreground space-y-0.5'>
                           <p>生效：{formatDateTime(certificate.not_before)}</p>
                           <p>到期：{formatDateTime(certificate.not_after)}</p>
                           <p>
                             来源：
-                            {certificate.provider === 'acme' ? 'ACME 申请' : '手动上传'}
+                            {certificate.provider === 'acme'
+                              ? 'ACME 申请'
+                              : '手动上传'}
                           </p>
                           {certificate.apply_status === 'applying' ? (
-                            <p className="text-blue-600">
+                            <p className='text-blue-600'>
                               状态：
                               {certificate.provider === 'upload'
                                 ? '转换申请中...'
@@ -173,9 +205,11 @@ export default function CertificatesPage() {
                             </p>
                           ) : null}
                           {certificate.apply_status === 'error' ? (
-                            <p className="text-destructive">
+                            <p className='text-destructive'>
                               状态：
-                              {certificate.provider === 'upload' ? '转换失败' : '申请失败'}
+                              {certificate.provider === 'upload'
+                                ? '转换失败'
+                                : '申请失败'}
                               （{certificate.apply_message}）
                             </p>
                           ) : null}
@@ -183,11 +217,11 @@ export default function CertificatesPage() {
                         </div>
                       </div>
 
-                      <div className="flex flex-wrap gap-1">
+                      <div className='flex flex-wrap gap-1'>
                         <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs'
                           onClick={() => {
                             setSelectedCertificateId(certificate.id);
                             setDetailOpen(true);
@@ -196,18 +230,18 @@ export default function CertificatesPage() {
                           查看
                         </Button>
                         <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs'
                           onClick={() => handleOpenEditor(certificate)}
                         >
                           编辑
                         </Button>
                         {certificate.provider === 'acme' ? (
                           <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-7 text-xs"
+                            variant='outline'
+                            size='sm'
+                            className='h-7 text-xs'
                             disabled={renewMutation.isPending}
                             onClick={() => renewMutation.mutate(certificate.id)}
                           >
@@ -215,12 +249,12 @@ export default function CertificatesPage() {
                           </Button>
                         ) : null}
                         <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs text-destructive"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs text-destructive'
                           onClick={() => setDeleteTarget(certificate)}
                         >
-                          <Trash2 className="size-3" />
+                          <Trash2 className='size-3' />
                         </Button>
                       </div>
                     </div>
@@ -291,7 +325,9 @@ export default function CertificatesPage() {
         certificateId={selectedCertificateId}
         open={editorOpen}
         onOpenChange={setEditorOpen}
-        onSaved={(certificate) => toast.success(`证书 ${certificate.name} 已更新`)}
+        onSaved={(certificate) =>
+          toast.success(`证书 ${certificate.name} 已更新`)
+        }
         onConvert={(certificate) => {
           setEditorOpen(false);
           setApplyMode('convert-upload');
@@ -314,8 +350,10 @@ export default function CertificatesPage() {
           <AlertDialogFooter>
             <AlertDialogCancel>取消</AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              onClick={() =>
+                deleteTarget && deleteMutation.mutate(deleteTarget.id)
+              }
             >
               删除
             </AlertDialogAction>
@@ -324,4 +362,4 @@ export default function CertificatesPage() {
       </AlertDialog>
     </div>
   );
-}
+}

frontend/app/(main)/components/dashboard/capacity-trend-chart.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {TrendChart} from '@/components/data/trend-chart';
+import { TrendChart } from '@/components/data/trend-chart';
 import {
   Card,
   CardContent,
@@ -8,9 +8,9 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import type {CapacityTrendPoint} from '@/lib/services/openflare';
+import type { CapacityTrendPoint } from '@/lib/services/openflare';
 
-import {formatPercent, formatTrendHour} from './dashboard-utils';
+import { formatPercent, formatTrendHour } from './dashboard-utils';
 
 export function CapacityTrendChart({
   points,
@@ -22,14 +22,16 @@ export function CapacityTrendChart({
   description?: string;
 }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">{title}</CardTitle>
-        <CardDescription className="text-xs">{description}</CardDescription>
+        <CardTitle className='text-sm font-semibold'>{title}</CardTitle>
+        <CardDescription className='text-xs'>{description}</CardDescription>
       </CardHeader>
       <CardContent>
         <TrendChart
-          labels={points.map((point) => formatTrendHour(point.bucket_started_at))}
+          labels={points.map((point) =>
+            formatTrendHour(point.bucket_started_at),
+          )}
           yAxisValueFormatter={formatPercent}
           series={[
             {
@@ -51,4 +53,4 @@ export function CapacityTrendChart({
       </CardContent>
     </Card>
   );
-}
+}

frontend/app/(main)/components/dashboard/dashboard-utils.ts

@@ -12,4 +12,4 @@ export function formatTrendHour(value: string) {
     return '—';
   }
   return `${date.getHours().toString().padStart(2, '0')}:00`;
-}
+}

frontend/app/(main)/components/dashboard/data/country-centroids.json

@@ -1,682 +1,172 @@
 {
-  "Afghanistan": [
-    65.99254367483304,
-    33.83349410470984
-  ],
-  "Angola": [
-    17.563198329790602,
-    -12.334557680834592
-  ],
-  "Albania": [
-    20.035803636476235,
-    41.179283471608585
-  ],
-  "United Arab Emirates": [
-    54.30345828396012,
-    23.905698042805522
-  ],
-  "Argentina": [
-    -65.15670576062132,
-    -35.178771590782524
-  ],
-  "Armenia": [
-    44.929379894609674,
-    40.29884592895426
-  ],
-  "France": [
-    165.43817082439585,
-    -21.285375782391018
-  ],
-  "Australia": [
-    134.361180723562,
-    -25.574955774991995
-  ],
-  "Austria": [
-    14.10165807418182,
-    47.57042831528493
-  ],
-  "Azerbaijan": [
-    47.636777782137415,
-    40.3311508093757
-  ],
-  "Burundi": [
-    29.873065896828848,
-    -3.3802825292327188
-  ],
-  "Belgium": [
-    4.628129604331132,
-    50.646494813466056
-  ],
-  "Benin": [
-    2.323507643298733,
-    9.63048313950481
-  ],
-  "Burkina Faso": [
-    -1.7757430610210276,
-    12.260370131848955
-  ],
-  "Bangladesh": [
-    90.21009840315206,
-    23.88793565572049
-  ],
-  "Bulgaria": [
-    25.225364036830744,
-    42.77785706066581
-  ],
-  "The Bahamas": [
-    -78.02733865351972,
-    24.719920319716515
-  ],
-  "Bosnia and Herzegovina": [
-    17.762461846176542,
-    44.16398853722456
-  ],
-  "Belarus": [
-    28.04895281233843,
-    53.53432933090482
-  ],
-  "Belize": [
-    -88.72096138346826,
-    17.17073148225863
-  ],
-  "Bolivia": [
-    -64.69104972918655,
-    -16.70141507507877
-  ],
-  "Brazil": [
-    -53.113858151998855,
-    -10.827995867833263
-  ],
-  "Brunei": [
-    114.54229268997476,
-    4.451218476864121
-  ],
-  "Bhutan": [
-    90.40562361681495,
-    27.40133623508629
-  ],
-  "Botswana": [
-    23.791788508036337,
-    -22.185333985163894
-  ],
-  "Central African Republic": [
-    20.490781591297914,
-    6.563625165826992
-  ],
-  "Canada": [
-    -102.31777616484295,
-    57.94457487676815
-  ],
-  "Switzerland": [
-    8.205812860319684,
-    46.805544047201984
-  ],
-  "Chile": [
-    -71.34891661948937,
-    -35.98028631773855
-  ],
-  "China": [
-    103.79804331240364,
-    36.61094167680319
-  ],
-  "Ivory Coast": [
-    -5.569771898429842,
-    7.626172775954684
-  ],
-  "Cameroon": [
-    12.739868035578002,
-    5.692692453534944
-  ],
-  "Democratic Republic of the Congo": [
-    23.64811688254194,
-    -2.8775533309965056
-  ],
-  "Republic of the Congo": [
-    15.21207418503586,
-    -0.8564004333096924
-  ],
-  "Colombia": [
-    -73.07794094917405,
-    3.9235618261252663
-  ],
-  "Costa Rica": [
-    -84.21742467558424,
-    9.986463158070535
-  ],
-  "Cuba": [
-    -78.8954025482625,
-    21.62136808001903
-  ],
-  "Northern Cyprus": [
-    33.39079188058263,
-    35.225753269439686
-  ],
-  "Cyprus": [
-    33.02409208254226,
-    34.91304424540028
-  ],
-  "Czech Republic": [
-    15.330767057694615,
-    49.70160772219921
-  ],
-  "Germany": [
-    10.380496796525602,
-    51.083853487429664
-  ],
-  "Djibouti": [
-    42.56788631653962,
-    11.745988995518626
-  ],
-  "Denmark": [
-    -41.29088868109839,
-    74.72535220460091
-  ],
-  "Dominican Republic": [
-    -70.48595892120278,
-    18.896879062003393
-  ],
-  "Algeria": [
-    2.6175172555729325,
-    28.158202786113698
-  ],
-  "Ecuador": [
-    -78.38384779532852,
-    -1.4454571869341688
-  ],
-  "Egypt": [
-    29.86739912685152,
-    26.49286512797635
-  ],
-  "Eritrea": [
-    38.835037148217566,
-    15.359809600209143
-  ],
-  "Spain": [
-    -3.5708365129134876,
-    40.391564705240064
-  ],
-  "Estonia": [
-    25.811350172874032,
-    58.69303019372469
-  ],
-  "Ethiopia": [
-    39.60372599651433,
-    8.621595995236198
-  ],
-  "Finland": [
-    26.28958351526606,
-    64.52279699210293
-  ],
-  "Fiji": [
-    177.98415179869738,
-    -17.827004078184217
-  ],
-  "United Kingdom": [
-    -36.367082569942795,
-    -54.468348288665524
-  ],
-  "Gabon": [
-    11.774048593462979,
-    -0.5859798536474902
-  ],
-  "Georgia": [
-    43.48650319000057,
-    42.175027555818694
-  ],
-  "Ghana": [
-    -1.2150159067556041,
-    7.94078880601944
-  ],
-  "Guinea": [
-    -10.943568403941383,
-    10.44078010915303
-  ],
-  "Gambia": [
-    -16.21304964555284,
-    13.37062695465985
-  ],
-  "Guinea Bissau": [
-    -14.929646023453557,
-    12.05088889829685
-  ],
-  "Equatorial Guinea": [
-    10.481670786028316,
-    1.5660796013647418
-  ],
-  "Greece": [
-    22.53435219348475,
-    39.517734832602365
-  ],
-  "Guatemala": [
-    -90.35344030476544,
-    15.679044168855697
-  ],
-  "Guyana": [
-    -58.978019347627985,
-    4.800329726037504
-  ],
-  "Honduras": [
-    -86.65651796671759,
-    14.821029518594349
-  ],
-  "Croatia": [
-    16.458685366615978,
-    45.18567759026696
-  ],
-  "Haiti": [
-    -72.67866559866681,
-    18.916195586860297
-  ],
-  "Hungary": [
-    19.410867145831855,
-    47.168542742918525
-  ],
-  "Indonesia": [
-    101.52237404492608,
-    -0.44681277438152994
-  ],
-  "India": [
-    79.58636900833257,
-    22.901586798523514
-  ],
-  "Ireland": [
-    -8.117695195030898,
-    53.2341315203433
-  ],
-  "Iran": [
-    54.266246557433305,
-    32.57616445788996
-  ],
-  "Iraq": [
-    43.74006501790808,
-    33.0341456153028
-  ],
-  "Iceland": [
-    -18.509670948264166,
-    65.03034972428229
-  ],
-  "Israel": [
-    35.241573878810335,
-    31.94758544099519
-  ],
-  "Italy": [
-    12.16233842748749,
-    43.51281131035235
-  ],
-  "Jamaica": [
-    -77.32850498837172,
-    18.172957893241634
-  ],
-  "Jordan": [
-    36.76131486689134,
-    31.237145277490367
-  ],
-  "Japan": [
-    137.97352453982398,
-    36.589925009528365
-  ],
-  "Kashmir": [
-    77.08733723957188,
-    35.415738932286466
-  ],
-  "Kazakhstan": [
-    67.27815427190085,
-    48.155989088140196
-  ],
-  "Kenya": [
-    37.795078751163835,
-    0.5967194222965451
-  ],
-  "Kyrgyzstan": [
-    74.58224715420873,
-    41.48363475100716
-  ],
-  "Cambodia": [
-    104.90702345739547,
-    12.717932969523966
-  ],
-  "South Korea": [
-    127.87280447602005,
-    36.475157799464604
-  ],
-  "Kosovo": [
-    20.851519165302378,
-    42.51783231278167
-  ],
-  "Kuwait": [
-    47.566177395781736,
-    29.316145203902064
-  ],
-  "Laos": [
-    103.75263811609112,
-    18.494354885305256
-  ],
-  "Lebanon": [
-    35.88502277707876,
-    33.91528991779158
-  ],
-  "Liberia": [
-    -9.325867879201954,
-    6.453996218817175
-  ],
-  "Libya": [
-    18.008785486000946,
-    27.031457363755713
-  ],
-  "Sri Lanka": [
-    80.70055059693914,
-    7.649883097905021
-  ],
-  "Lesotho": [
-    28.24303757633595,
-    -29.57351232727891
-  ],
-  "Lithuania": [
-    23.872793668340726,
-    55.3142460584835
-  ],
-  "Luxembourg": [
-    6.070340274408408,
-    49.76746140228473
-  ],
-  "Latvia": [
-    24.89496154477673,
-    56.853143698564296
-  ],
-  "Morocco": [
-    -8.459192831832421,
-    29.83932361976915
-  ],
-  "Moldova": [
-    28.446472517363826,
-    47.2017924696845
-  ],
-  "Madagascar": [
-    46.70172536870331,
-    -19.374776628372288
-  ],
-  "Mexico": [
-    -102.51849775988345,
-    23.943713432682014
-  ],
-  "Macedonia": [
-    21.704642152886493,
-    41.60373573782414
-  ],
-  "Mali": [
-    -3.5321833143642736,
-    17.347810147640345
-  ],
-  "Myanmar": [
-    96.49588816533908,
-    21.22201469728619
-  ],
-  "Montenegro": [
-    19.233365413523355,
-    42.78395456212118
-  ],
-  "Mongolia": [
-    103.06423533091326,
-    46.82560864032323
-  ],
-  "Mozambique": [
-    35.53173663088568,
-    -17.27297477254694
-  ],
-  "Mauritania": [
-    -10.34307896458181,
-    20.259793585678146
-  ],
-  "Malawi": [
-    34.288911351438394,
-    -13.200363393826267
-  ],
-  "Malaysia": [
-    114.69201508943004,
-    3.57724156754415
-  ],
-  "Namibia": [
-    17.208945346875193,
-    -22.132302890947404
-  ],
-  "Niger": [
-    9.384787308614277,
-    17.41758190683491
-  ],
-  "Nigeria": [
-    8.074235448092892,
-    9.58958974174772
-  ],
-  "Nicaragua": [
-    -85.03229930746807,
-    12.835548864379284
-  ],
-  "Netherlands": [
-    5.646194278986089,
-    52.27734132368374
-  ],
-  "Norway": [
-    13.994247649210363,
-    64.32249798565987
-  ],
-  "Nepal": [
-    83.9234099472594,
-    28.243335814044734
-  ],
-  "New Zealand": [
-    170.54047059084724,
-    -43.955381757717255
-  ],
-  "Oman": [
-    56.08271927344639,
-    20.573738446088598
-  ],
-  "Pakistan": [
-    69.32988114530586,
-    29.951585862562073
-  ],
-  "Panama": [
-    -80.05970573973497,
-    8.521692369504816
-  ],
-  "Peru": [
-    -74.38850244798846,
-    -9.156316252308201
-  ],
-  "Philippines": [
-    121.45754828266669,
-    15.948824272939182
-  ],
-  "Papua New Guinea": [
-    144.22896759838426,
-    -6.607045399379529
-  ],
-  "Poland": [
-    19.379892383012464,
-    52.11963086628078
-  ],
-  "United States of America": [
-    -99.14669730710926,
-    39.52689381707972
-  ],
-  "North Korea": [
-    127.21551783512186,
-    40.144856985239926
-  ],
-  "Portugal": [
-    -7.977838817691485,
-    39.6854900148663
-  ],
-  "Paraguay": [
-    -58.39900641582761,
-    -23.223895588708068
-  ],
-  "Qatar": [
-    51.170816022848,
-    25.32876608728452
-  ],
-  "Romania": [
-    24.971632366248883,
-    45.84560772065747
-  ],
-  "Russia": [
-    99.05228241954488,
-    61.677043847105494
-  ],
-  "Rwanda": [
-    29.91765145538139,
-    -1.9953628964377972
-  ],
-  "Western Sahara": [
-    -12.218085234851758,
-    24.221135708939354
-  ],
-  "Saudi Arabia": [
-    44.5342871199886,
-    24.122854227726673
-  ],
-  "Sudan": [
-    29.946243665370346,
-    15.99205876641883
-  ],
-  "South Sudan": [
-    30.253827921202955,
-    7.307277152400154
-  ],
-  "Senegal": [
-    -14.472411019597182,
-    14.338613732351318
-  ],
-  "Solomon Islands": [
-    160.156396875585,
-    -9.628589831637283
-  ],
-  "Sierra Leone": [
-    -11.82013204896783,
-    8.575093438325089
-  ],
-  "El Salvador": [
-    -88.86593554283397,
-    13.734573052971413
-  ],
-  "Somaliland": [
-    46.25513292885051,
-    9.729995248781385
-  ],
-  "Somalia": [
-    45.706539856671256,
-    4.747960517798881
-  ],
-  "Republic of Serbia": [
-    20.766249889622852,
-    44.19998417744864
-  ],
-  "Suriname": [
-    -55.91029765824739,
-    4.126766010517478
-  ],
-  "Slovakia": [
-    19.47296461136286,
-    48.71540683451534
-  ],
-  "Slovenia": [
-    14.771193461021065,
-    46.10807043333343
-  ],
-  "Sweden": [
-    16.752551082675275,
-    62.8354879894394
-  ],
-  "Swaziland": [
-    31.47664514492297,
-    -26.563545981108437
-  ],
-  "Syria": [
-    38.50449031631095,
-    35.01769370592341
-  ],
-  "Chad": [
-    18.645815630757973,
-    15.32729896930035
-  ],
-  "Togo": [
-    0.949513544830056,
-    8.576560980195756
-  ],
-  "Thailand": [
-    101.01060253224972,
-    15.132319216387051
-  ],
-  "Tajikistan": [
-    70.98712700685866,
-    38.55204366339685
-  ],
-  "Turkmenistan": [
-    59.39292286662992,
-    39.1098173228857
-  ],
-  "East Timor": [
-    125.78222644041995,
-    -8.858373836074785
-  ],
-  "Trinidad and Tobago": [
-    -61.270458833911896,
-    10.339930045317969
-  ],
-  "Tunisia": [
-    9.546832905099203,
-    34.12673069029241
-  ],
-  "Turkey": [
-    35.424986274948736,
-    38.998407240706534
-  ],
-  "United Republic of Tanzania": [
-    34.79490109621088,
-    -6.276146393386636
-  ],
-  "Uganda": [
-    32.36575488492427,
-    1.2757695499320103
-  ],
-  "Ukraine": [
-    31.381193375918794,
-    49.01345298489402
-  ],
-  "Uruguay": [
-    -56.01665573850212,
-    -32.80651677440885
-  ],
-  "Uzbekistan": [
-    63.148826727968626,
-    41.7502616897204
-  ],
-  "Venezuela": [
-    -66.1882174671549,
-    7.118299933056809
-  ],
-  "Vietnam": [
-    106.29939096235873,
-    16.63088189612042
-  ],
-  "Vanuatu": [
-    166.84228659210697,
-    -15.266627310669035
-  ],
-  "Yemen": [
-    47.546351590294876,
-    15.935825615412996
-  ],
-  "South Africa": [
-    25.160630055943862,
-    -29.008774283210798
-  ],
-  "Zambia": [
-    27.775321721593084,
-    -13.460954386993254
-  ],
-  "Zimbabwe": [
-    29.850564118889274,
-    -19.00677451616593
-  ]
+  "Afghanistan": [65.99254367483304, 33.83349410470984],
+  "Angola": [17.563198329790602, -12.334557680834592],
+  "Albania": [20.035803636476235, 41.179283471608585],
+  "United Arab Emirates": [54.30345828396012, 23.905698042805522],
+  "Argentina": [-65.15670576062132, -35.178771590782524],
+  "Armenia": [44.929379894609674, 40.29884592895426],
+  "France": [165.43817082439585, -21.285375782391018],
+  "Australia": [134.361180723562, -25.574955774991995],
+  "Austria": [14.10165807418182, 47.57042831528493],
+  "Azerbaijan": [47.636777782137415, 40.3311508093757],
+  "Burundi": [29.873065896828848, -3.3802825292327188],
+  "Belgium": [4.628129604331132, 50.646494813466056],
+  "Benin": [2.323507643298733, 9.63048313950481],
+  "Burkina Faso": [-1.7757430610210276, 12.260370131848955],
+  "Bangladesh": [90.21009840315206, 23.88793565572049],
+  "Bulgaria": [25.225364036830744, 42.77785706066581],
+  "The Bahamas": [-78.02733865351972, 24.719920319716515],
+  "Bosnia and Herzegovina": [17.762461846176542, 44.16398853722456],
+  "Belarus": [28.04895281233843, 53.53432933090482],
+  "Belize": [-88.72096138346826, 17.17073148225863],
+  "Bolivia": [-64.69104972918655, -16.70141507507877],
+  "Brazil": [-53.113858151998855, -10.827995867833263],
+  "Brunei": [114.54229268997476, 4.451218476864121],
+  "Bhutan": [90.40562361681495, 27.40133623508629],
+  "Botswana": [23.791788508036337, -22.185333985163894],
+  "Central African Republic": [20.490781591297914, 6.563625165826992],
+  "Canada": [-102.31777616484295, 57.94457487676815],
+  "Switzerland": [8.205812860319684, 46.805544047201984],
+  "Chile": [-71.34891661948937, -35.98028631773855],
+  "China": [103.79804331240364, 36.61094167680319],
+  "Ivory Coast": [-5.569771898429842, 7.626172775954684],
+  "Cameroon": [12.739868035578002, 5.692692453534944],
+  "Democratic Republic of the Congo": [23.64811688254194, -2.8775533309965056],
+  "Republic of the Congo": [15.21207418503586, -0.8564004333096924],
+  "Colombia": [-73.07794094917405, 3.9235618261252663],
+  "Costa Rica": [-84.21742467558424, 9.986463158070535],
+  "Cuba": [-78.8954025482625, 21.62136808001903],
+  "Northern Cyprus": [33.39079188058263, 35.225753269439686],
+  "Cyprus": [33.02409208254226, 34.91304424540028],
+  "Czech Republic": [15.330767057694615, 49.70160772219921],
+  "Germany": [10.380496796525602, 51.083853487429664],
+  "Djibouti": [42.56788631653962, 11.745988995518626],
+  "Denmark": [-41.29088868109839, 74.72535220460091],
+  "Dominican Republic": [-70.48595892120278, 18.896879062003393],
+  "Algeria": [2.6175172555729325, 28.158202786113698],
+  "Ecuador": [-78.38384779532852, -1.4454571869341688],
+  "Egypt": [29.86739912685152, 26.49286512797635],
+  "Eritrea": [38.835037148217566, 15.359809600209143],
+  "Spain": [-3.5708365129134876, 40.391564705240064],
+  "Estonia": [25.811350172874032, 58.69303019372469],
+  "Ethiopia": [39.60372599651433, 8.621595995236198],
+  "Finland": [26.28958351526606, 64.52279699210293],
+  "Fiji": [177.98415179869738, -17.827004078184217],
+  "United Kingdom": [-36.367082569942795, -54.468348288665524],
+  "Gabon": [11.774048593462979, -0.5859798536474902],
+  "Georgia": [43.48650319000057, 42.175027555818694],
+  "Ghana": [-1.2150159067556041, 7.94078880601944],
+  "Guinea": [-10.943568403941383, 10.44078010915303],
+  "Gambia": [-16.21304964555284, 13.37062695465985],
+  "Guinea Bissau": [-14.929646023453557, 12.05088889829685],
+  "Equatorial Guinea": [10.481670786028316, 1.5660796013647418],
+  "Greece": [22.53435219348475, 39.517734832602365],
+  "Guatemala": [-90.35344030476544, 15.679044168855697],
+  "Guyana": [-58.978019347627985, 4.800329726037504],
+  "Honduras": [-86.65651796671759, 14.821029518594349],
+  "Croatia": [16.458685366615978, 45.18567759026696],
+  "Haiti": [-72.67866559866681, 18.916195586860297],
+  "Hungary": [19.410867145831855, 47.168542742918525],
+  "Indonesia": [101.52237404492608, -0.44681277438152994],
+  "India": [79.58636900833257, 22.901586798523514],
+  "Ireland": [-8.117695195030898, 53.2341315203433],
+  "Iran": [54.266246557433305, 32.57616445788996],
+  "Iraq": [43.74006501790808, 33.0341456153028],
+  "Iceland": [-18.509670948264166, 65.03034972428229],
+  "Israel": [35.241573878810335, 31.94758544099519],
+  "Italy": [12.16233842748749, 43.51281131035235],
+  "Jamaica": [-77.32850498837172, 18.172957893241634],
+  "Jordan": [36.76131486689134, 31.237145277490367],
+  "Japan": [137.97352453982398, 36.589925009528365],
+  "Kashmir": [77.08733723957188, 35.415738932286466],
+  "Kazakhstan": [67.27815427190085, 48.155989088140196],
+  "Kenya": [37.795078751163835, 0.5967194222965451],
+  "Kyrgyzstan": [74.58224715420873, 41.48363475100716],
+  "Cambodia": [104.90702345739547, 12.717932969523966],
+  "South Korea": [127.87280447602005, 36.475157799464604],
+  "Kosovo": [20.851519165302378, 42.51783231278167],
+  "Kuwait": [47.566177395781736, 29.316145203902064],
+  "Laos": [103.75263811609112, 18.494354885305256],
+  "Lebanon": [35.88502277707876, 33.91528991779158],
+  "Liberia": [-9.325867879201954, 6.453996218817175],
+  "Libya": [18.008785486000946, 27.031457363755713],
+  "Sri Lanka": [80.70055059693914, 7.649883097905021],
+  "Lesotho": [28.24303757633595, -29.57351232727891],
+  "Lithuania": [23.872793668340726, 55.3142460584835],
+  "Luxembourg": [6.070340274408408, 49.76746140228473],
+  "Latvia": [24.89496154477673, 56.853143698564296],
+  "Morocco": [-8.459192831832421, 29.83932361976915],
+  "Moldova": [28.446472517363826, 47.2017924696845],
+  "Madagascar": [46.70172536870331, -19.374776628372288],
+  "Mexico": [-102.51849775988345, 23.943713432682014],
+  "Macedonia": [21.704642152886493, 41.60373573782414],
+  "Mali": [-3.5321833143642736, 17.347810147640345],
+  "Myanmar": [96.49588816533908, 21.22201469728619],
+  "Montenegro": [19.233365413523355, 42.78395456212118],
+  "Mongolia": [103.06423533091326, 46.82560864032323],
+  "Mozambique": [35.53173663088568, -17.27297477254694],
+  "Mauritania": [-10.34307896458181, 20.259793585678146],
+  "Malawi": [34.288911351438394, -13.200363393826267],
+  "Malaysia": [114.69201508943004, 3.57724156754415],
+  "Namibia": [17.208945346875193, -22.132302890947404],
+  "Niger": [9.384787308614277, 17.41758190683491],
+  "Nigeria": [8.074235448092892, 9.58958974174772],
+  "Nicaragua": [-85.03229930746807, 12.835548864379284],
+  "Netherlands": [5.646194278986089, 52.27734132368374],
+  "Norway": [13.994247649210363, 64.32249798565987],
+  "Nepal": [83.9234099472594, 28.243335814044734],
+  "New Zealand": [170.54047059084724, -43.955381757717255],
+  "Oman": [56.08271927344639, 20.573738446088598],
+  "Pakistan": [69.32988114530586, 29.951585862562073],
+  "Panama": [-80.05970573973497, 8.521692369504816],
+  "Peru": [-74.38850244798846, -9.156316252308201],
+  "Philippines": [121.45754828266669, 15.948824272939182],
+  "Papua New Guinea": [144.22896759838426, -6.607045399379529],
+  "Poland": [19.379892383012464, 52.11963086628078],
+  "United States of America": [-99.14669730710926, 39.52689381707972],
+  "North Korea": [127.21551783512186, 40.144856985239926],
+  "Portugal": [-7.977838817691485, 39.6854900148663],
+  "Paraguay": [-58.39900641582761, -23.223895588708068],
+  "Qatar": [51.170816022848, 25.32876608728452],
+  "Romania": [24.971632366248883, 45.84560772065747],
+  "Russia": [99.05228241954488, 61.677043847105494],
+  "Rwanda": [29.91765145538139, -1.9953628964377972],
+  "Western Sahara": [-12.218085234851758, 24.221135708939354],
+  "Saudi Arabia": [44.5342871199886, 24.122854227726673],
+  "Sudan": [29.946243665370346, 15.99205876641883],
+  "South Sudan": [30.253827921202955, 7.307277152400154],
+  "Senegal": [-14.472411019597182, 14.338613732351318],
+  "Solomon Islands": [160.156396875585, -9.628589831637283],
+  "Sierra Leone": [-11.82013204896783, 8.575093438325089],
+  "El Salvador": [-88.86593554283397, 13.734573052971413],
+  "Somaliland": [46.25513292885051, 9.729995248781385],
+  "Somalia": [45.706539856671256, 4.747960517798881],
+  "Republic of Serbia": [20.766249889622852, 44.19998417744864],
+  "Suriname": [-55.91029765824739, 4.126766010517478],
+  "Slovakia": [19.47296461136286, 48.71540683451534],
+  "Slovenia": [14.771193461021065, 46.10807043333343],
+  "Sweden": [16.752551082675275, 62.8354879894394],
+  "Swaziland": [31.47664514492297, -26.563545981108437],
+  "Syria": [38.50449031631095, 35.01769370592341],
+  "Chad": [18.645815630757973, 15.32729896930035],
+  "Togo": [0.949513544830056, 8.576560980195756],
+  "Thailand": [101.01060253224972, 15.132319216387051],
+  "Tajikistan": [70.98712700685866, 38.55204366339685],
+  "Turkmenistan": [59.39292286662992, 39.1098173228857],
+  "East Timor": [125.78222644041995, -8.858373836074785],
+  "Trinidad and Tobago": [-61.270458833911896, 10.339930045317969],
+  "Tunisia": [9.546832905099203, 34.12673069029241],
+  "Turkey": [35.424986274948736, 38.998407240706534],
+  "United Republic of Tanzania": [34.79490109621088, -6.276146393386636],
+  "Uganda": [32.36575488492427, 1.2757695499320103],
+  "Ukraine": [31.381193375918794, 49.01345298489402],
+  "Uruguay": [-56.01665573850212, -32.80651677440885],
+  "Uzbekistan": [63.148826727968626, 41.7502616897204],
+  "Venezuela": [-66.1882174671549, 7.118299933056809],
+  "Vietnam": [106.29939096235873, 16.63088189612042],
+  "Vanuatu": [166.84228659210697, -15.266627310669035],
+  "Yemen": [47.546351590294876, 15.935825615412996],
+  "South Africa": [25.160630055943862, -29.008774283210798],
+  "Zambia": [27.775321721593084, -13.460954386993254],
+  "Zimbabwe": [29.850564118889274, -19.00677451616593]
 }

frontend/app/(main)/components/dashboard/distribution-rank-charts.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {RankChart} from '@/components/data/rank-chart';
+import { RankChart } from '@/components/data/rank-chart';
 import {
   Card,
   CardContent,
@@ -8,7 +8,10 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import type {DistributionItem, TrafficDistributions} from '@/lib/services/openflare';
+import type {
+  DistributionItem,
+  TrafficDistributions,
+} from '@/lib/services/openflare';
 
 function toRankItems(items: DistributionItem[]) {
   return items.map((item) => ({
@@ -23,18 +26,18 @@ export function SourceDistributionChart({
   items: TrafficDistributions['source_countries'];
 }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">来源分布</CardTitle>
-        <CardDescription className="text-xs">
+        <CardTitle className='text-sm font-semibold'>来源分布</CardTitle>
+        <CardDescription className='text-xs'>
           聚合最近 24 小时主要来源国家。
         </CardDescription>
       </CardHeader>
       <CardContent>
         <RankChart
           items={toRankItems(items)}
-          color="#38bdf8"
-          emptyMessage="暂无来源分布数据"
+          color='#38bdf8'
+          emptyMessage='暂无来源分布数据'
         />
       </CardContent>
     </Card>
@@ -47,10 +50,10 @@ export function StatusCodeDistributionChart({
   items: TrafficDistributions['status_codes'];
 }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">状态码分布</CardTitle>
-        <CardDescription className="text-xs">
+        <CardTitle className='text-sm font-semibold'>状态码分布</CardTitle>
+        <CardDescription className='text-xs'>
           快速判断成功响应是否仍是主流，以及错误码是否有抬升。
         </CardDescription>
       </CardHeader>
@@ -60,8 +63,8 @@ export function StatusCodeDistributionChart({
             ...item,
             label: `HTTP ${item.label}`,
           }))}
-          color="#f59e0b"
-          emptyMessage="暂无状态码分布"
+          color='#f59e0b'
+          emptyMessage='暂无状态码分布'
         />
       </CardContent>
     </Card>
@@ -74,20 +77,20 @@ export function TopDomainChart({
   items: TrafficDistributions['top_domains'];
 }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">Top Domain</CardTitle>
-        <CardDescription className="text-xs">
+        <CardTitle className='text-sm font-semibold'>Top Domain</CardTitle>
+        <CardDescription className='text-xs'>
           观察主要流量集中在哪些域名。
         </CardDescription>
       </CardHeader>
       <CardContent>
         <RankChart
           items={toRankItems(items)}
-          color="#34d399"
-          emptyMessage="暂无域名分布"
+          color='#34d399'
+          emptyMessage='暂无域名分布'
         />
       </CardContent>
     </Card>
   );
-}
+}

frontend/app/(main)/components/dashboard/geo-distribution-list.tsx

@@ -1,12 +1,18 @@
 'use client';
 
-import {Globe2} from 'lucide-react';
+import { Globe2 } from 'lucide-react';
 
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {Progress} from '@/components/ui/progress';
-import type {DistributionItem} from '@/lib/services/openflare';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import type { DistributionItem } from '@/lib/services/openflare';
 
-import {formatCompactNumber} from './dashboard-utils';
+import { formatCompactNumber } from './dashboard-utils';
 
 export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
   const sortedItems = [...items]
@@ -15,34 +21,34 @@ export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
   const maxValue = sortedItems[0]?.value ?? 0;
 
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
-          <Globe2 className="size-4 text-primary" />
+        <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
+          <Globe2 className='size-4 text-primary' />
           来源国家分布
         </CardTitle>
-        <CardDescription className="text-xs">
+        <CardDescription className='text-xs'>
           聚合最近 24 小时主要来源国家。
         </CardDescription>
       </CardHeader>
       <CardContent>
         {sortedItems.length === 0 ? (
-          <div className="flex min-h-[180px] items-center justify-center text-xs text-muted-foreground">
+          <div className='flex min-h-[180px] items-center justify-center text-xs text-muted-foreground'>
             暂无来源分布数据
           </div>
         ) : (
-          <div className="space-y-3">
+          <div className='space-y-3'>
             {sortedItems.map((item) => {
               const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
               return (
-                <div key={item.key} className="space-y-1.5">
-                  <div className="flex items-center justify-between text-xs">
-                    <span className="font-medium">{item.key || '未知'}</span>
-                    <span className="font-mono tabular-nums text-muted-foreground">
+                <div key={item.key} className='space-y-1.5'>
+                  <div className='flex items-center justify-between text-xs'>
+                    <span className='font-medium'>{item.key || '未知'}</span>
+                    <span className='font-mono tabular-nums text-muted-foreground'>
                       {formatCompactNumber(item.value)}
                     </span>
                   </div>
-                  <Progress value={ratio} className="h-1.5" />
+                  <Progress value={ratio} className='h-1.5' />
                 </div>
               );
             })}

frontend/app/(main)/components/dashboard/network-disk-trend-chart.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import {TrendChart} from '@/components/data/trend-chart';
-import {Card, CardContent, CardHeader, CardTitle,} from '@/components/ui/card';
-import type {DiskIOTrendPoint, NetworkTrendPoint} from '@/lib/services/openflare';
+import { TrendChart } from '@/components/data/trend-chart';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type {
+  DiskIOTrendPoint,
+  NetworkTrendPoint,
+} from '@/lib/services/openflare';
 
-import {formatBytes, formatTrendHour} from './dashboard-utils';
+import { formatBytes, formatTrendHour } from './dashboard-utils';
 
 export function NetworkDiskTrendChart({
   networkPoints,
@@ -14,16 +17,20 @@ export function NetworkDiskTrendChart({
   diskPoints: DiskIOTrendPoint[];
 }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">24 小时网络与磁盘趋势</CardTitle>
+        <CardTitle className='text-sm font-semibold'>
+          24 小时网络与磁盘趋势
+        </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-6">
+      <CardContent className='space-y-6'>
         <TrendChart
-          labels={networkPoints.map((point) => formatTrendHour(point.bucket_started_at))}
+          labels={networkPoints.map((point) =>
+            formatTrendHour(point.bucket_started_at),
+          )}
           height={180}
-          summaryScope="total"
-          summaryHint="近 24 小时"
+          summaryScope='total'
+          summaryHint='近 24 小时'
           yAxisValueFormatter={formatBytes}
           series={[
             {
@@ -44,10 +51,12 @@ export function NetworkDiskTrendChart({
         />
 
         <TrendChart
-          labels={diskPoints.map((point) => formatTrendHour(point.bucket_started_at))}
+          labels={diskPoints.map((point) =>
+            formatTrendHour(point.bucket_started_at),
+          )}
           height={180}
-          summaryScope="total"
-          summaryHint="近 24 小时"
+          summaryScope='total'
+          summaryHint='近 24 小时'
           yAxisValueFormatter={formatBytes}
           series={[
             {

frontend/app/(main)/components/dashboard/node-health-table.tsx

@@ -2,13 +2,26 @@
 
 import Link from 'next/link';
 
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import type {DashboardNodeHealth} from '@/lib/services/openflare';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { DashboardNodeHealth } from '@/lib/services/openflare';
 
-import {NodeStatusBadge} from '../../nodes/components/node-status-badge';
+import { NodeStatusBadge } from '../../nodes/components/node-status-badge';
 import {
   formatRelativeTime,
   getNodeStatusLabel,
@@ -17,7 +30,7 @@ import {
   getOpenrestyStatusTone,
   isWSConnectedLastSeen,
 } from '../../nodes/components/node-utils';
-import {formatCompactNumber, formatPercent} from './dashboard-utils';
+import { formatCompactNumber, formatPercent } from './dashboard-utils';
 
 export function NodeHealthTable({ nodes }: { nodes: DashboardNodeHealth[] }) {
   const sortedNodes = [...nodes].sort((left, right) => {
@@ -38,52 +51,57 @@ export function NodeHealthTable({ nodes }: { nodes: DashboardNodeHealth[] }) {
   });
 
   return (
-    <Card className="border-dashed shadow-none">
-      <CardHeader className="flex flex-row items-start justify-between gap-4">
+    <Card className='border-dashed shadow-none'>
+      <CardHeader className='flex flex-row items-start justify-between gap-4'>
         <div>
-          <CardTitle className="text-sm font-semibold">节点健康列表</CardTitle>
-          <CardDescription className="text-xs">
+          <CardTitle className='text-sm font-semibold'>节点健康列表</CardTitle>
+          <CardDescription className='text-xs'>
             按异常数量和资源压力排序。
           </CardDescription>
         </div>
-        <Button variant="outline" size="sm" className="h-8 text-xs" asChild>
-          <Link href="/nodes">进入节点页</Link>
+        <Button variant='outline' size='sm' className='h-8 text-xs' asChild>
+          <Link href='/nodes'>进入节点页</Link>
         </Button>
       </CardHeader>
       <CardContent>
         {sortedNodes.length === 0 ? (
           <EmptyStateWithBorder
-            title="暂无节点"
-            description="节点接入后，这里会展示系统健康与容量摘要。"
+            title='暂无节点'
+            description='节点接入后，这里会展示系统健康与容量摘要。'
           />
         ) : (
-          <div className="border border-dashed rounded-lg overflow-hidden">
+          <div className='border border-dashed rounded-lg overflow-hidden'>
             <Table>
               <TableHeader>
-                <TableRow className="border-dashed hover:bg-transparent">
-                  <TableHead className="py-2 h-8">节点</TableHead>
-                  <TableHead className="py-2 h-8">状态</TableHead>
-                  <TableHead className="py-2 h-8">CPU / 内存</TableHead>
-                  <TableHead className="py-2 h-8">请求 / 错误</TableHead>
-                  <TableHead className="py-2 h-8">活动异常</TableHead>
-                  <TableHead className="py-2 h-8">最近心跳</TableHead>
-                  <TableHead className="py-2 h-8 text-right">操作</TableHead>
+                <TableRow className='border-dashed hover:bg-transparent'>
+                  <TableHead className='py-2 h-8'>节点</TableHead>
+                  <TableHead className='py-2 h-8'>状态</TableHead>
+                  <TableHead className='py-2 h-8'>CPU / 内存</TableHead>
+                  <TableHead className='py-2 h-8'>请求 / 错误</TableHead>
+                  <TableHead className='py-2 h-8'>活动异常</TableHead>
+                  <TableHead className='py-2 h-8'>最近心跳</TableHead>
+                  <TableHead className='py-2 h-8 text-right'>操作</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
                 {sortedNodes.slice(0, 12).map((node) => (
-                  <TableRow key={node.node_id} className="border-dashed align-top">
-                    <TableCell className="py-3">
-                      <div className="space-y-1">
-                        <p className="font-medium">{node.name}</p>
-                        <p className="text-xs text-muted-foreground">{node.node_id}</p>
-                        <p className="text-xs text-muted-foreground">
+                  <TableRow
+                    key={node.node_id}
+                    className='border-dashed align-top'
+                  >
+                    <TableCell className='py-3'>
+                      <div className='space-y-1'>
+                        <p className='font-medium'>{node.name}</p>
+                        <p className='text-xs text-muted-foreground'>
+                          {node.node_id}
+                        </p>
+                        <p className='text-xs text-muted-foreground'>
                           {node.geo_name || '未配置地图点位'}
                         </p>
                       </div>
                     </TableCell>
-                    <TableCell className="py-3">
-                      <div className="flex flex-wrap gap-1.5">
+                    <TableCell className='py-3'>
+                      <div className='flex flex-wrap gap-1.5'>
                         <NodeStatusBadge
                           label={getNodeStatusLabel(node.status)}
                           tone={getNodeStatusTone(node.status)}
@@ -94,29 +112,36 @@ export function NodeHealthTable({ nodes }: { nodes: DashboardNodeHealth[] }) {
                         />
                       </div>
                     </TableCell>
-                    <TableCell className="py-3 text-sm text-muted-foreground">
+                    <TableCell className='py-3 text-sm text-muted-foreground'>
                       {formatPercent(node.cpu_usage_percent)} /{' '}
                       {formatPercent(node.memory_usage_percent)}
                     </TableCell>
-                    <TableCell className="py-3 text-sm text-muted-foreground">
+                    <TableCell className='py-3 text-sm text-muted-foreground'>
                       {formatCompactNumber(node.request_count)} /{' '}
                       {formatCompactNumber(node.error_count)}
                     </TableCell>
-                    <TableCell className="py-3">
+                    <TableCell className='py-3'>
                       <NodeStatusBadge
                         label={String(node.active_event_count)}
-                        tone={node.active_event_count > 0 ? 'danger' : 'success'}
+                        tone={
+                          node.active_event_count > 0 ? 'danger' : 'success'
+                        }
                       />
                     </TableCell>
-                    <TableCell className="py-3 text-xs text-muted-foreground">
+                    <TableCell className='py-3 text-xs text-muted-foreground'>
                       {isWSConnectedLastSeen(node.last_seen_at)
                         ? 'WS 已连接'
                         : node.last_seen_at
                           ? formatRelativeTime(node.last_seen_at)
                           : '暂无'}
                     </TableCell>
-                    <TableCell className="py-3 text-right">
-                      <Button variant="ghost" size="sm" className="h-8 text-xs" asChild>
+                    <TableCell className='py-3 text-right'>
+                      <Button
+                        variant='ghost'
+                        size='sm'
+                        className='h-8 text-xs'
+                        asChild
+                      >
                         <Link href={`/nodes/detail?id=${node.id}`}>详情</Link>
                       </Button>
                     </TableCell>

frontend/app/(main)/components/dashboard/node-rank-panel.tsx

@@ -1,13 +1,8 @@
 'use client';
 
-import {RankChart} from '@/components/data/rank-chart';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import type {DashboardNodeHealth} from '@/lib/services/openflare';
+import { RankChart } from '@/components/data/rank-chart';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { DashboardNodeHealth } from '@/lib/services/openflare';
 
 function buildNodeRankItems(
   nodes: DashboardNodeHealth[],
@@ -31,25 +26,25 @@ function buildNodeRankItems(
     }));
 }
 
-export function NodeRankPanel({nodes}: {nodes: DashboardNodeHealth[]}) {
+export function NodeRankPanel({ nodes }: { nodes: DashboardNodeHealth[] }) {
   return (
-    <Card className="border-dashed shadow-none">
+    <Card className='border-dashed shadow-none'>
       <CardHeader>
-        <CardTitle className="text-sm font-semibold">Top 节点榜单</CardTitle>
+        <CardTitle className='text-sm font-semibold'>Top 节点榜单</CardTitle>
       </CardHeader>
-      <CardContent className="grid gap-6">
+      <CardContent className='grid gap-6'>
         <div>
-          <p className="mb-3 text-xs tracking-[0.22em] text-muted-foreground uppercase">
+          <p className='mb-3 text-xs tracking-[0.22em] text-muted-foreground uppercase'>
             流量最高节点
           </p>
           <RankChart
             items={buildNodeRankItems(nodes, (node) => node.request_count)}
-            color="#38bdf8"
-            emptyMessage="暂无流量榜单"
+            color='#38bdf8'
+            emptyMessage='暂无流量榜单'
           />
         </div>
         <div>
-          <p className="mb-3 text-xs tracking-[0.22em] text-muted-foreground uppercase">
+          <p className='mb-3 text-xs tracking-[0.22em] text-muted-foreground uppercase'>
             容量压力节点
           </p>
           <RankChart
@@ -62,12 +57,12 @@ export function NodeRankPanel({nodes}: {nodes: DashboardNodeHealth[]}) {
                 ),
               ),
             )}
-            color="#ef4444"
+            color='#ef4444'
             valueFormatter={(value) => `${value}%`}
-            emptyMessage="暂无容量压力数据"
+            emptyMessage='暂无容量压力数据'
           />
         </div>
       </CardContent>
     </Card>
   );
-}
+}