all

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+.next
+.git
+.env*
+npm-debug.log*
+pnpm-debug.log*
+.pnpm-store
+README.md
+.gitignore
+.dockerignore
+Dockerfile
+docker-compose.yml 

.env

@@ -1,9 +0,0 @@
-psql -h db.ttzfpnlvvfthtatadsrr.supabase.co -p 5432 -d postgres -U postgres
-
-# POSTGRES_HOST= 
-# POSTGRES_PORT=
-# POSTGRES_USER=
-# POSTGRES_PASSWORD= udh4Lo8wXKzriqzC
-# POSTGRES_DATABASE=
-
-NZRn4OW6azoR1YOewock6BZfXY7rRgq6F4SngcM9RicjPJ3xaX

.env.example

@@ -0,0 +1,21 @@
+# OpenWebUI Configuration
+OPENWEBUI_DOMAIN=your_openwebui_domain # OpenWebUI domain, e.g. https://chat.example.com
+OPENWEBUI_API_KEY=your_api_key # OpenWebUI API key for fetching model list
+
+# Access Control
+ACCESS_TOKEN=your-access-token-here # Used for Monitor page login
+API_KEY=your-api-key-here # Used for authentication when sending requests to Monitor
+
+# Price Configuration (Optional, $/million tokens)
+# DEFAULT_MODEL_INPUT_PRICE=60  # Default input price for models
+# DEFAULT_MODEL_OUTPUT_PRICE=60  # Default output price for models
+# DEFAULT_MODEL_PER_MSG_PRICE=-1 # Default price per message for models, -1 means charging by tokens
+# INIT_BALANCE=0 # Initial balance for users, optional
+# COST_ON_INLET=0 # Pre-deduction amount on inlet, can be a fixed number (e.g. 0.1) or model-specific (e.g. gpt-4:0.32,gpt-3.5:0.01)
+
+# PostgreSQL Database Configuration (Optional, configure these if using external database)
+# POSTGRES_HOST=
+# POSTGRES_PORT=
+# POSTGRES_USER=
+# POSTGRES_PASSWORD=
+# POSTGRES_DATABASE=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env*.local

Dockerfile

@@ -1 +1,39 @@
-FROM ghcr.io/variantconst/openwebui-monitor:latest
+# 使用 Node.js 官方镜像作为基础镜像
+FROM node:18-alpine
+
+# 设置工作目录
+WORKDIR /app
+
+# 安装必要的系统依赖
+RUN apk add --no-cache \
+    python3 \
+    make \
+    g++ \
+    gcc \
+    libc-dev \
+    netcat-openbsd \
+    postgresql-client
+
+# 全局安装 pnpm
+RUN npm install -g pnpm
+
+# 复制 package.json 和 pnpm-lock.yaml
+COPY package.json pnpm-lock.yaml ./
+
+# 安装依赖
+RUN pnpm install --no-frozen-lockfile
+
+# 复制项目文件
+COPY . .
+
+# 添加执行权限到启动脚本
+RUN chmod +x start.sh
+
+# 构建应用
+RUN pnpm build
+
+# 暴露端口
+EXPOSE 3000
+
+# 使用启动脚本
+CMD ["./start.sh"] 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 VariantConst
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/api/config/key/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function GET() {
+  const apiKey = process.env.API_KEY;
+
+  if (!apiKey) {
+    return NextResponse.json(
+      { error: "API Key Not Configured" },
+      { status: 500 }
+    );
+  }
+
+  return NextResponse.json({ apiKey });
+}

app/api/config/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { headers } from "next/headers";
+
+export async function GET() {
+  const headersList = headers();
+  const token = headersList.get("authorization")?.split(" ")[1];
+  const expectedToken = process.env.ACCESS_TOKEN;
+
+  if (!token || token !== expectedToken) {
+    return NextResponse.json(
+      {
+        apiKey: "Unauthorized",
+        status: 401,
+      },
+      { status: 401 }
+    );
+  }
+
+  return NextResponse.json({
+    apiKey: process.env.API_KEY || "Unconfigured",
+    status: 200,
+  });
+}

app/api/users/[id]/balance/route.ts

@@ -0,0 +1,42 @@
+import { query } from "@/lib/db/client";
+import { NextResponse } from "next/server";
+
+export async function PUT(
+  req: Request,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { balance } = await req.json();
+    const userId = params.id;
+
+    if (typeof balance !== "number") {
+      return NextResponse.json(
+        { error: "Balance must be positive" },
+        { status: 400 }
+      );
+    }
+
+    const result = await query(
+      `UPDATE users
+       SET balance = $1
+       WHERE id = $2
+       RETURNING id, email, balance`,
+      [balance, userId]
+    );
+
+    if (result.rows.length === 0) {
+      return NextResponse.json(
+        { error: "User does not exist" },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(result.rows[0]);
+  } catch (error) {
+    console.error("Fail to update user balance:", error);
+    return NextResponse.json(
+      { error: "Fail to update user balance" },
+      { status: 500 }
+    );
+  }
+}

app/api/users/[id]/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import { deleteUser } from "@/lib/db/users";
+import { query } from "@/lib/db/client";
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    await deleteUser(params.id);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Fail to delete user:", error);
+    return NextResponse.json({ error: "Fail to delete user" }, { status: 500 });
+  }
+}
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { deleted } = await req.json();
+
+    const result = await query(
+      `UPDATE users 
+       SET deleted = $1 
+       WHERE id = $2 
+       RETURNING *`,
+      [deleted, params.id]
+    );
+
+    if (result.rowCount === 0) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    return NextResponse.json({
+      success: true,
+      user: result.rows[0],
+    });
+  } catch (error) {
+    console.error("Failed to update user:", error);
+    return NextResponse.json(
+      { error: "Failed to update user" },
+      { status: 500 }
+    );
+  }
+}

app/api/users/route.ts

@@ -0,0 +1,67 @@
+import { NextRequest, NextResponse } from "next/server";
+import { query } from "@/lib/db/client";
+import { ensureUserTableExists } from "@/lib/db/users";
+
+export async function GET(req: NextRequest) {
+  try {
+    // 确保表结构正确
+    await ensureUserTableExists();
+
+    const { searchParams } = new URL(req.url);
+    const page = parseInt(searchParams.get("page") || "1");
+    const pageSize = parseInt(searchParams.get("pageSize") || "20");
+    const sortField = searchParams.get("sortField");
+    const sortOrder = searchParams.get("sortOrder");
+    const search = searchParams.get("search");
+    const deleted = searchParams.get("deleted") === "true";
+
+    // 构建查询条件
+    const conditions = [`deleted = ${deleted}`];
+    const params = [];
+    let paramIndex = 1;
+
+    if (search) {
+      conditions.push(
+        `(LOWER(name) LIKE $${paramIndex} OR LOWER(email) LIKE $${paramIndex})`
+      );
+      params.push(`%${search.toLowerCase()}%`);
+      paramIndex++;
+    }
+
+    const whereClause = `WHERE ${conditions.join(" AND ")}`;
+
+    // 获取总记录数
+    const countResult = await query(
+      `SELECT COUNT(*) FROM users ${whereClause}`,
+      params
+    );
+    const total = parseInt(countResult.rows[0].count);
+
+    // 获取分页数据
+    const result = await query(
+      `SELECT id, email, name, role, balance, deleted, created_at 
+       FROM users 
+       ${whereClause} 
+       ${
+         sortField
+           ? `ORDER BY ${sortField} ${sortOrder === "descend" ? "DESC" : "ASC"}`
+           : "ORDER BY created_at DESC"
+       }
+       LIMIT $${paramIndex} OFFSET $${paramIndex + 1}`,
+      [...params, pageSize, (page - 1) * pageSize]
+    );
+
+    return NextResponse.json({
+      users: result.rows,
+      total,
+      page,
+      pageSize,
+    });
+  } catch (error) {
+    console.error("Failed to fetch users:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch users" },
+      { status: 500 }
+    );
+  }
+}

app/api/v1/inlet/route.ts

@@ -0,0 +1,66 @@
+import { NextResponse } from "next/server";
+import { getOrCreateUser } from "@/lib/db/users";
+import { query } from "@/lib/db/client";
+import { getModelInletCost } from "@/lib/utils/inlet-cost";
+
+export async function POST(req: Request) {
+  try {
+    const data = await req.json();
+    const user = await getOrCreateUser(data.user);
+    const modelId = data.body?.model;
+
+    // 如果用户被拉黑,返回余额为 -1
+    if (user.deleted) {
+      return NextResponse.json({
+        success: true,
+        balance: -1,
+        message: "Request successful",
+      });
+    }
+
+    // 获取预扣费金额
+    const inletCost = getModelInletCost(modelId);
+
+    // 预扣费
+    if (inletCost > 0) {
+      const userResult = await query(
+        `UPDATE users 
+         SET balance = LEAST(
+           balance - CAST($1 AS DECIMAL(16,4)),
+           999999.9999
+         )
+         WHERE id = $2 AND NOT deleted
+         RETURNING balance`,
+        [inletCost, user.id]
+      );
+
+      if (userResult.rows.length === 0) {
+        throw new Error("Failed to update user balance");
+      }
+
+      return NextResponse.json({
+        success: true,
+        balance: Number(userResult.rows[0].balance),
+        inlet_cost: inletCost,
+        message: "Request successful",
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      balance: Number(user.balance),
+      message: "Request successful",
+    });
+  } catch (error) {
+    console.error("Inlet error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error ? error.message : "Error dealing with request",
+        error_type: error instanceof Error ? error.name : "UNKNOWN_ERROR",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/v1/models/price/route.ts

@@ -0,0 +1,114 @@
+import { NextRequest, NextResponse } from "next/server";
+import { updateModelPrice } from "@/lib/db";
+
+interface PriceUpdate {
+  id: string;
+  input_price: number;
+  output_price: number;
+  per_msg_price: number;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const data = await request.json();
+    console.log("Raw data received:", data);
+
+    // 从对象中提取模型数组
+    const updates = data.updates || data;
+    if (!Array.isArray(updates)) {
+      console.error("Invalid data format - expected array:", updates);
+      return NextResponse.json(
+        { error: "Invalid data format" },
+        { status: 400 }
+      );
+    }
+
+    // 验证并转换数据格式
+    const validUpdates = updates
+      .map((update: any) => ({
+        id: update.id,
+        input_price: Number(update.input_price),
+        output_price: Number(update.output_price),
+        per_msg_price: Number(update.per_msg_price ?? -1),
+      }))
+      .filter((update: PriceUpdate) => {
+        const isValidPrice = (price: number) =>
+          !isNaN(price) && isFinite(price);
+
+        if (
+          !update.id ||
+          !isValidPrice(update.input_price) ||
+          !isValidPrice(update.output_price) ||
+          !isValidPrice(update.per_msg_price)
+        ) {
+          console.log("Skipping invalid data:", update);
+          return false;
+        }
+        return true;
+      });
+
+    console.log("Update data after processing:", validUpdates);
+    console.log(
+      `Successfully verified price updating requests of ${validUpdates.length} models`
+    );
+
+    // 执行批量更新并收集结果
+    const results = await Promise.all(
+      validUpdates.map(async (update: PriceUpdate) => {
+        try {
+          console.log("Updating model prices:", {
+            id: update.id,
+            input_price: update.input_price,
+            output_price: update.output_price,
+            per_msg_price: update.per_msg_price,
+          });
+
+          const result = await updateModelPrice(
+            update.id,
+            update.input_price,
+            update.output_price,
+            update.per_msg_price
+          );
+
+          console.log("Update results:", {
+            id: update.id,
+            success: !!result,
+            result,
+          });
+
+          return {
+            id: update.id,
+            success: !!result,
+            data: result,
+          };
+        } catch (error) {
+          console.error("Fail to update:", {
+            id: update.id,
+            error: error instanceof Error ? error.message : "Unknown error",
+          });
+          return {
+            id: update.id,
+            success: false,
+            error: error instanceof Error ? error.message : "Unknown error",
+          };
+        }
+      })
+    );
+
+    const successCount = results.filter((r) => r.success).length;
+    console.log(`Successfully updated prices of ${successCount} models`);
+
+    return NextResponse.json({
+      success: true,
+      message: `Successfully updated prices of ${successCount} models`,
+      results,
+    });
+  } catch (error) {
+    console.error("Batch update failed:", error);
+    return NextResponse.json({ error: "Batch update failed" }, { status: 500 });
+  }
+}
+
+export async function OPTIONS() {
+  return NextResponse.json({}, { status: 200 });
+}

app/api/v1/models/route.ts

@@ -0,0 +1,146 @@
+import { NextResponse } from "next/server";
+import { ensureTablesExist, getOrCreateModelPrices } from "@/lib/db";
+
+interface ModelInfo {
+  id: string;
+  base_model_id: string;
+  name: string;
+  params: {
+    system: string;
+  };
+  meta: {
+    profile_image_url: string;
+  };
+}
+
+interface ModelResponse {
+  data: {
+    id: string;
+    name: string;
+    info: ModelInfo;
+  }[];
+}
+
+export async function GET() {
+  try {
+    // Ensure database is initialized
+    await ensureTablesExist();
+
+    const domain = process.env.OPENWEBUI_DOMAIN;
+    if (!domain) {
+      throw new Error("OPENWEBUI_DOMAIN environment variable is not set.");
+    }
+
+    // Normalize API URL
+    const apiUrl = domain.replace(/\/+$/, "") + "/api/models";
+
+    const response = await fetch(apiUrl, {
+      headers: {
+        Authorization: `Bearer ${process.env.OPENWEBUI_API_KEY}`,
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      console.error("API response status:", response.status);
+      console.error("API response text:", await response.text());
+      throw new Error(`Failed to fetch models: ${response.status}`);
+    }
+
+    // Get response text for debugging
+    const responseText = await response.text();
+    // console.log("API response:", responseText);
+
+    let data: ModelResponse;
+    try {
+      data = JSON.parse(responseText);
+    } catch (error) {
+      console.error("Failed to parse JSON:", error);
+      throw new Error("Invalid JSON response from API");
+    }
+
+    console.log("data:", data);
+
+    if (!data || !Array.isArray(data.data)) {
+      console.error("Unexpected API response structure:", data);
+      throw new Error("Unexpected API response structure");
+    }
+
+    // Get price information for all models
+    const modelsWithPrices = await getOrCreateModelPrices(
+      data.data.map((item) => {
+        // 处理形如 gemini_search.gemini-2.0-flash 的派生模型ID
+        let baseModelId = item.info?.base_model_id;
+
+        // 如果没有明确的base_model_id，尝试从ID中提取
+        if (!baseModelId && item.id) {
+          const idParts = String(item.id).split(".");
+          if (idParts.length > 1) {
+            baseModelId = idParts[idParts.length - 1];
+          }
+        }
+
+        return {
+          id: String(item.id),
+          name: String(item.name),
+          base_model_id: baseModelId,
+        };
+      })
+    );
+
+    const validModels = data.data.map((item, index) => {
+      // 处理形如 gemini_search.gemini-2.0-flash 的派生模型ID
+      let baseModelId = item.info?.base_model_id || "";
+
+      // 如果没有明确的base_model_id，尝试从ID中提取
+      if (!baseModelId && item.id) {
+        const idParts = String(item.id).split(".");
+        if (idParts.length > 1) {
+          baseModelId = idParts[idParts.length - 1];
+        }
+      }
+
+      return {
+        id: modelsWithPrices[index].id,
+        base_model_id: baseModelId,
+        name: modelsWithPrices[index].name,
+        imageUrl: item.info?.meta?.profile_image_url || "/static/favicon.png",
+        system_prompt: item.info?.params?.system || "",
+        input_price: modelsWithPrices[index].input_price,
+        output_price: modelsWithPrices[index].output_price,
+        per_msg_price: modelsWithPrices[index].per_msg_price,
+        updated_at: modelsWithPrices[index].updated_at,
+      };
+    });
+
+    return NextResponse.json(validModels);
+  } catch (error) {
+    console.error("Error fetching models:", error);
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error ? error.message : "Failed to fetch models",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+// Add inlet endpoint
+export async function POST(req: Request) {
+  const data = await req.json();
+
+  return new Response("Inlet placeholder response", {
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+// Add outlet endpoint
+export async function PUT(req: Request) {
+  const data = await req.json();
+  // console.log("Outlet received:", JSON.stringify(data, null, 2));
+
+  return new Response("Outlet placeholder response", {
+    headers: { "Content-Type": "application/json" },
+  });
+}

app/api/v1/models/sync-all-prices/route.ts

@@ -0,0 +1,112 @@
+import { NextRequest, NextResponse } from "next/server";
+import { pool } from "@/lib/db";
+
+export async function POST(request: NextRequest) {
+  try {
+    const client = await pool.connect();
+    try {
+      // 1. 获取所有有效的派生模型（base_model_id 存在且在数据库中有对应记录）
+      const derivedModelsResult = await client.query(`
+        SELECT d.id, d.name, d.base_model_id 
+        FROM model_prices d
+        JOIN model_prices b ON d.base_model_id = b.id
+        WHERE d.base_model_id IS NOT NULL
+      `);
+
+      if (derivedModelsResult.rows.length === 0) {
+        return NextResponse.json({
+          success: true,
+          message: "No derived models found",
+          syncedModels: [],
+        });
+      }
+
+      const derivedModels = derivedModelsResult.rows;
+      const syncResults = [];
+
+      // 2. 为每个派生模型同步价格
+      for (const derivedModel of derivedModels) {
+        try {
+          // 获取上游模型价格
+          const baseModelResult = await client.query(
+            `SELECT input_price, output_price, per_msg_price FROM model_prices WHERE id = $1`,
+            [derivedModel.base_model_id]
+          );
+
+          if (baseModelResult.rows.length === 0) {
+            syncResults.push({
+              id: derivedModel.id,
+              name: derivedModel.name,
+              success: false,
+              error: "Base model not found",
+            });
+            continue;
+          }
+
+          const baseModel = baseModelResult.rows[0];
+
+          // 更新派生模型价格
+          const updateResult = await client.query(
+            `UPDATE model_prices 
+             SET 
+               input_price = $2,
+               output_price = $3,
+               per_msg_price = $4,
+               updated_at = CURRENT_TIMESTAMP
+             WHERE id = $1
+             RETURNING *`,
+            [
+              derivedModel.id,
+              baseModel.input_price,
+              baseModel.output_price,
+              baseModel.per_msg_price,
+            ]
+          );
+
+          const updatedModel = updateResult.rows[0];
+
+          syncResults.push({
+            id: updatedModel.id,
+            name: updatedModel.name,
+            base_model_id: derivedModel.base_model_id,
+            success: true,
+            input_price: Number(updatedModel.input_price),
+            output_price: Number(updatedModel.output_price),
+            per_msg_price: Number(updatedModel.per_msg_price),
+          });
+        } catch (error) {
+          console.error(`Error syncing model ${derivedModel.id}:`, error);
+          syncResults.push({
+            id: derivedModel.id,
+            name: derivedModel.name,
+            success: false,
+            error: error instanceof Error ? error.message : "Unknown error",
+          });
+        }
+      }
+
+      const successCount = syncResults.filter((r) => r.success).length;
+
+      return NextResponse.json({
+        success: true,
+        message: `Successfully synced ${successCount} of ${derivedModels.length} derived models`,
+        syncedModels: syncResults,
+      });
+    } finally {
+      client.release();
+    }
+  } catch (error) {
+    console.error("Sync all prices failed:", error);
+    return NextResponse.json(
+      {
+        error: "Sync all prices failed",
+        message: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return NextResponse.json({}, { status: 200 });
+}

app/api/v1/models/sync-price/route.ts

@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from "next/server";
+import { pool } from "@/lib/db";
+
+export async function POST(request: NextRequest) {
+  try {
+    const data = await request.json();
+    const { modelId } = data;
+
+    if (!modelId) {
+      return NextResponse.json(
+        { error: "Model ID is required" },
+        { status: 400 }
+      );
+    }
+
+    const client = await pool.connect();
+    try {
+      // 1. 获取派生模型信息
+      const derivedModelResult = await client.query(
+        `SELECT id, name, base_model_id FROM model_prices WHERE id = $1`,
+        [modelId]
+      );
+
+      if (derivedModelResult.rows.length === 0) {
+        return NextResponse.json({ error: "Model not found" }, { status: 404 });
+      }
+
+      const derivedModel = derivedModelResult.rows[0];
+      let baseModelId = derivedModel.base_model_id;
+
+      // 如果数据库中没有base_model_id，尝试从ID中提取
+      if (!baseModelId) {
+        const idParts = modelId.split(".");
+        if (idParts.length > 1) {
+          baseModelId = idParts[idParts.length - 1];
+
+          // 更新数据库中的base_model_id
+          await client.query(
+            `UPDATE model_prices SET base_model_id = $2 WHERE id = $1`,
+            [modelId, baseModelId]
+          );
+        }
+      }
+
+      if (!baseModelId) {
+        return NextResponse.json(
+          { error: "Model does not have a base model" },
+          { status: 400 }
+        );
+      }
+
+      // 2. 获取上游模型价格
+      const baseModelResult = await client.query(
+        `SELECT input_price, output_price, per_msg_price FROM model_prices WHERE id = $1`,
+        [baseModelId]
+      );
+
+      if (baseModelResult.rows.length === 0) {
+        return NextResponse.json(
+          { error: "Base model not found" },
+          { status: 404 }
+        );
+      }
+
+      const baseModel = baseModelResult.rows[0];
+
+      // 3. 更新派生模型价格
+      const updateResult = await client.query(
+        `UPDATE model_prices 
+         SET 
+           input_price = $2,
+           output_price = $3,
+           per_msg_price = $4,
+           updated_at = CURRENT_TIMESTAMP
+         WHERE id = $1
+         RETURNING *`,
+        [
+          modelId,
+          baseModel.input_price,
+          baseModel.output_price,
+          baseModel.per_msg_price,
+        ]
+      );
+
+      const updatedModel = updateResult.rows[0];
+
+      return NextResponse.json({
+        success: true,
+        message: `Successfully synced prices from ${baseModelId} to ${modelId}`,
+        data: {
+          id: updatedModel.id,
+          name: updatedModel.name,
+          base_model_id: baseModelId,
+          input_price: Number(updatedModel.input_price),
+          output_price: Number(updatedModel.output_price),
+          per_msg_price: Number(updatedModel.per_msg_price),
+          updated_at: updatedModel.updated_at,
+        },
+      });
+    } finally {
+      client.release();
+    }
+  } catch (error) {
+    console.error("Sync price failed:", error);
+    return NextResponse.json(
+      {
+        error: "Sync price failed",
+        message: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function OPTIONS() {
+  return NextResponse.json({}, { status: 200 });
+}

app/api/v1/models/test/route.ts

@@ -0,0 +1,82 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  try {
+    const { modelId } = await req.json();
+
+    if (!modelId) {
+      return NextResponse.json({
+        success: false,
+        message: "Model ID cannot be empty",
+      });
+    }
+
+    const domain = process.env.OPENWEBUI_DOMAIN;
+    const apiKey = process.env.OPENWEBUI_API_KEY;
+
+    if (!domain || !apiKey) {
+      return NextResponse.json({
+        success: false,
+        message: "Environment variables not configured correctly",
+      });
+    }
+
+    const apiUrl = domain.replace(/\/+$/, "") + "/api/chat/completions";
+
+    const response = await fetch(apiUrl, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model: modelId,
+        messages: [
+          {
+            role: "user",
+            content: "test, just say hi",
+          },
+        ],
+      }),
+    });
+
+    const responseText = await response.text();
+    let data;
+
+    try {
+      data = JSON.parse(responseText);
+    } catch (e) {
+      return NextResponse.json({
+        success: false,
+        message: `Fail to resolve response: ${responseText}`,
+      });
+    }
+
+    if (!response.ok) {
+      return NextResponse.json({
+        success: false,
+        message:
+          data.error ||
+          `API request failed: ${response.status} ${response.statusText}`,
+      });
+    }
+
+    if (!data.choices?.[0]?.message?.content) {
+      return NextResponse.json({
+        success: false,
+        message: "Invalid response format",
+      });
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Test successful",
+      response: data.choices[0].message.content,
+    });
+  } catch (error) {
+    return NextResponse.json({
+      success: false,
+      message: error instanceof Error ? error.message : "Unknown error",
+    });
+  }
+}

app/api/v1/outlet/route.ts

@@ -0,0 +1,216 @@
+import { NextResponse } from "next/server";
+import { encode } from "gpt-tokenizer/model/gpt-4";
+import { Pool, PoolClient } from "pg";
+import { createClient } from "@vercel/postgres";
+import { query, getClient } from "@/lib/db/client";
+import { getModelInletCost } from "@/lib/utils/inlet-cost";
+
+const isVercel = process.env.VERCEL === "1";
+
+interface Message {
+  role: string;
+  content: string;
+}
+
+interface ModelPrice {
+  id: string;
+  name: string;
+  input_price: number;
+  output_price: number;
+  per_msg_price: number;
+}
+
+type DbClient = ReturnType<typeof createClient> | Pool | PoolClient;
+
+async function getModelPrice(modelId: string): Promise<ModelPrice | null> {
+  const result = await query(
+    `SELECT id, name, input_price, output_price, per_msg_price 
+     FROM model_prices 
+     WHERE id = $1`,
+    [modelId]
+  );
+
+  if (result.rows[0]) {
+    return result.rows[0];
+  }
+
+  // If no price is found in the database, use the default price
+  const defaultInputPrice = parseFloat(
+    process.env.DEFAULT_MODEL_INPUT_PRICE || "60"
+  );
+  const defaultOutputPrice = parseFloat(
+    process.env.DEFAULT_MODEL_OUTPUT_PRICE || "60"
+  );
+
+  // Verify that the default price is a valid non-negative number
+  if (
+    isNaN(defaultInputPrice) ||
+    defaultInputPrice < 0 ||
+    isNaN(defaultOutputPrice) ||
+    defaultOutputPrice < 0
+  ) {
+    return null;
+  }
+
+  return {
+    id: modelId,
+    name: modelId,
+    input_price: defaultInputPrice,
+    output_price: defaultOutputPrice,
+    per_msg_price: -1, // Default to token-based pricing
+  };
+}
+
+export async function POST(req: Request) {
+  const client = (await getClient()) as DbClient;
+  let pgClient: DbClient | null = null;
+
+  try {
+    // Get a dedicated transaction client
+    if (isVercel) {
+      pgClient = client;
+    } else {
+      pgClient = await (client as Pool).connect();
+    }
+
+    const data = await req.json();
+    console.log("请求数据:", JSON.stringify(data, null, 2));
+    const modelId = data.body.model;
+    const userId = data.user.id;
+    const userName = data.user.name || "Unknown User";
+
+    // Start a transaction
+    await query("BEGIN");
+
+    // Get model price
+    const modelPrice = await getModelPrice(modelId);
+    if (!modelPrice) {
+      throw new Error(`Fail to fetch price info of model ${modelId}`);
+    }
+
+    // Calculate tokens
+    const lastMessage = data.body.messages[data.body.messages.length - 1];
+
+    let inputTokens: number;
+    let outputTokens: number;
+    if (
+      lastMessage.usage &&
+      lastMessage.usage.prompt_tokens &&
+      lastMessage.usage.completion_tokens
+    ) {
+      inputTokens = lastMessage.usage.prompt_tokens;
+      outputTokens = lastMessage.usage.completion_tokens;
+    } else {
+      outputTokens = encode(lastMessage.content).length;
+      const totalTokens = data.body.messages.reduce(
+        (sum: number, msg: Message) => sum + encode(msg.content).length,
+        0
+      );
+      inputTokens = totalTokens - outputTokens;
+    }
+
+    // Calculate total cost
+    let totalCost: number;
+    if (outputTokens === 0) {
+      // If output tokens are 0, no charge
+      totalCost = 0;
+      console.log("No charge for zero output tokens");
+    } else if (modelPrice.per_msg_price >= 0) {
+      // If fixed pricing is set, use it directly
+      totalCost = Number(modelPrice.per_msg_price);
+      console.log(
+        `Using fixed pricing: ${totalCost} (${modelPrice.per_msg_price} per message)`
+      );
+    } else {
+      // Otherwise, calculate price by token quantity
+      const inputCost = (inputTokens / 1_000_000) * modelPrice.input_price;
+      const outputCost = (outputTokens / 1_000_000) * modelPrice.output_price;
+      totalCost = inputCost + outputCost;
+    }
+
+    // Get the pre-deducted cost when getting inlet
+    const inletCost = getModelInletCost(modelId);
+
+    // The actual cost to be deducted = total cost - pre-deducted cost
+    const actualCost = totalCost - inletCost;
+
+    // Get and update user balance
+    const userResult = await query(
+      `UPDATE users 
+       SET balance = LEAST(
+         balance - CAST($1 AS DECIMAL(16,4)),
+         999999.9999
+       )
+       WHERE id = $2
+       RETURNING balance`,
+      [actualCost, userId]
+    );
+
+    if (userResult.rows.length === 0) {
+      throw new Error("User does not exist");
+    }
+
+    const newBalance = Number(userResult.rows[0].balance);
+
+    if (newBalance > 999999.9999) {
+      throw new Error("Balance exceeds maximum allowed value");
+    }
+
+    // Record usage
+    await query(
+      `INSERT INTO user_usage_records (
+        user_id, nickname, model_name, 
+        input_tokens, output_tokens, 
+        cost, balance_after
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7)`,
+      [
+        userId,
+        userName,
+        modelId,
+        inputTokens,
+        outputTokens,
+        totalCost,
+        newBalance,
+      ]
+    );
+
+    await query("COMMIT");
+
+    console.log(
+      JSON.stringify({
+        success: true,
+        inputTokens,
+        outputTokens,
+        totalCost,
+        newBalance,
+        message: "Request successful",
+      })
+    );
+
+    return NextResponse.json({
+      success: true,
+      inputTokens,
+      outputTokens,
+      totalCost,
+      newBalance,
+      message: "Request successful",
+    });
+  } catch (error) {
+    await query("ROLLBACK");
+    console.error("Outlet error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error ? error.message : "Error processing request",
+        error_type: error instanceof Error ? error.name : "UNKNOWN_ERROR",
+      },
+      { status: 500 }
+    );
+  } finally {
+    // Only release connection in non-Vercel environment
+    if (!isVercel && pgClient && "release" in pgClient) {
+      pgClient.release();
+    }
+  }
+}

app/api/v1/panel/database/export/route.ts

@@ -0,0 +1,56 @@
+import { pool } from "@/lib/db";
+import { NextResponse } from "next/server";
+import { PoolClient } from "pg";
+
+export async function GET() {
+  let client: PoolClient | null = null;
+
+  try {
+    // 获取数据库连接
+    client = await pool.connect();
+
+    // 获取所有表的数据
+    const users = await client.query("SELECT * FROM users ORDER BY id");
+    const modelPrices = await client.query(
+      "SELECT * FROM model_prices ORDER BY id"
+    );
+    const records = await client.query(
+      "SELECT * FROM user_usage_records ORDER BY id"
+    );
+
+    // 构建导出数据结构
+    const exportData = {
+      version: "1.0",
+      timestamp: new Date().toISOString(),
+      data: {
+        users: users.rows,
+        model_prices: modelPrices.rows,
+        user_usage_records: records.rows,
+      },
+    };
+
+    // 设置响应头
+    const headers = new Headers();
+    headers.set("Content-Type", "application/json");
+    headers.set(
+      "Content-Disposition",
+      `attachment; filename=openwebui_monitor_backup_${
+        new Date().toISOString().split("T")[0]
+      }.json`
+    );
+
+    return new Response(JSON.stringify(exportData, null, 2), {
+      headers,
+    });
+  } catch (error) {
+    console.error("Fail to export database:", error);
+    return NextResponse.json(
+      { error: "Fail to export database" },
+      { status: 500 }
+    );
+  } finally {
+    if (client) {
+      client.release();
+    }
+  }
+}

app/api/v1/panel/database/import/route.ts

@@ -0,0 +1,97 @@
+import { pool } from "@/lib/db";
+import { NextResponse } from "next/server";
+import { PoolClient } from "pg";
+
+export async function POST(req: Request) {
+  let client: PoolClient | null = null;
+
+  try {
+    const data = await req.json();
+
+    // 验证数据格式
+    if (!data.version || !data.data) {
+      throw new Error("Invalid import data format");
+    }
+
+    // 获取数据库连接
+    client = await pool.connect();
+
+    // 开启事务
+    await client.query("BEGIN");
+
+    try {
+      // 清空现有数据
+      await client.query("TRUNCATE TABLE user_usage_records CASCADE");
+      await client.query("TRUNCATE TABLE model_prices CASCADE");
+      await client.query("TRUNCATE TABLE users CASCADE");
+
+      // 导入用户数据
+      if (data.data.users?.length) {
+        for (const user of data.data.users) {
+          await client.query(
+            `INSERT INTO users (id, email, name, role, balance)
+             VALUES ($1, $2, $3, $4, $5)`,
+            [user.id, user.email, user.name, user.role, user.balance]
+          );
+        }
+      }
+
+      // 导入模型价格
+      if (data.data.model_prices?.length) {
+        for (const price of data.data.model_prices) {
+          await client.query(
+            `INSERT INTO model_prices (id, name, input_price, output_price)
+             VALUES ($1, $2, $3, $4)`,
+            [price.id, price.name, price.input_price, price.output_price]
+          );
+        }
+      }
+
+      // 导入使用记录
+      if (data.data.user_usage_records?.length) {
+        for (const record of data.data.user_usage_records) {
+          await client.query(
+            `INSERT INTO user_usage_records (
+              user_id, nickname, use_time, model_name, 
+              input_tokens, output_tokens, cost, balance_after
+            ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)`,
+            [
+              record.user_id,
+              record.nickname,
+              record.use_time,
+              record.model_name,
+              record.input_tokens,
+              record.output_tokens,
+              record.cost,
+              record.balance_after,
+            ]
+          );
+        }
+      }
+
+      await client.query("COMMIT");
+
+      return NextResponse.json({
+        success: true,
+        message: "Data import successful",
+      });
+    } catch (error) {
+      await client.query("ROLLBACK");
+      throw error;
+    }
+  } catch (error) {
+    console.error("Fail to import database:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error:
+          error instanceof Error ? error.message : "Fail to import database",
+      },
+      { status: 500 }
+    );
+  } finally {
+    if (client) {
+      client.release();
+    }
+  }
+}

app/api/v1/panel/records/export/route.ts

@@ -0,0 +1,70 @@
+import { pool } from "@/lib/db";
+import { NextResponse } from "next/server";
+import { PoolClient } from "pg";
+
+export async function GET() {
+  let client: PoolClient | null = null;
+  try {
+    client = await pool.connect();
+
+    const records = await client.query(`
+      SELECT 
+        nickname,
+        use_time,
+        model_name,
+        input_tokens,
+        output_tokens,
+        cost,
+        balance_after
+      FROM user_usage_records
+      ORDER BY use_time DESC
+    `);
+
+    // 生成 CSV 内容
+    const csvHeaders = [
+      "User",
+      "Time",
+      "Model",
+      "Input tokens",
+      "Output tokens",
+      "Cost",
+      "Balance",
+    ];
+    const rows = records.rows.map((record) => [
+      record.nickname,
+      new Date(record.use_time).toLocaleString(),
+      record.model_name,
+      record.input_tokens,
+      record.output_tokens,
+      Number(record.cost).toFixed(4),
+      Number(record.balance_after).toFixed(4),
+    ]);
+
+    const csvContent = [
+      csvHeaders.join(","),
+      ...rows.map((row) => row.join(",")),
+    ].join("\n");
+
+    // 设置响应头
+    const responseHeaders = new Headers();
+    responseHeaders.set("Content-Type", "text/csv; charset=utf-8");
+    responseHeaders.set(
+      "Content-Disposition",
+      "attachment; filename=usage_records.csv"
+    );
+
+    return new Response(csvContent, {
+      headers: responseHeaders,
+    });
+  } catch (error) {
+    console.error("Fail to export records:", error);
+    return NextResponse.json(
+      { error: "Fail to export records" },
+      { status: 500 }
+    );
+  } finally {
+    if (client) {
+      client.release();
+    }
+  }
+}

app/api/v1/panel/records/route.ts

@@ -0,0 +1,89 @@
+import { pool } from "@/lib/db";
+import { NextResponse } from "next/server";
+import { PoolClient } from "pg";
+
+export async function GET(req: Request) {
+  let client: PoolClient | null = null;
+  try {
+    const { searchParams } = new URL(req.url);
+    const page = parseInt(searchParams.get("page") || "1");
+    const pageSize = parseInt(searchParams.get("pageSize") || "10");
+    const sortField = searchParams.get("sortField");
+    const sortOrder = searchParams.get("sortOrder");
+    const users = searchParams.get("users")?.split(",") || [];
+    const models = searchParams.get("models")?.split(",") || [];
+
+    client = await pool.connect();
+
+    // 构建查询条件
+    const conditions = [];
+    const params = [];
+    let paramIndex = 1;
+
+    if (users.length > 0) {
+      conditions.push(`nickname = ANY($${paramIndex})`);
+      params.push(users);
+      paramIndex++;
+    }
+
+    if (models.length > 0) {
+      conditions.push(`model_name = ANY($${paramIndex})`);
+      params.push(models);
+      paramIndex++;
+    }
+
+    const whereClause =
+      conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+
+    // 构建排序
+    const orderClause = sortField
+      ? `ORDER BY ${sortField} ${sortOrder === "descend" ? "DESC" : "ASC"}`
+      : "ORDER BY use_time DESC";
+
+    // 获取总记录数
+    const countQuery = `
+      SELECT COUNT(*) 
+      FROM user_usage_records 
+      ${whereClause}
+    `;
+    const countResult = await client.query(countQuery, params);
+
+    // 获取分页数据
+    const offset = (page - 1) * pageSize;
+    const dataQuery = `
+      SELECT 
+        user_id,
+        nickname,
+        use_time,
+        model_name,
+        input_tokens,
+        output_tokens,
+        cost,
+        balance_after
+      FROM user_usage_records 
+      ${whereClause}
+      ${orderClause}
+      LIMIT $${paramIndex} OFFSET $${paramIndex + 1}
+    `;
+
+    const dataParams = [...params, pageSize, offset];
+    const records = await client.query(dataQuery, dataParams);
+
+    const total = parseInt(countResult.rows[0].count);
+
+    return NextResponse.json({
+      records: records.rows,
+      total,
+    });
+  } catch (error) {
+    console.error("Fail to fetch usage records:", error);
+    return NextResponse.json(
+      { error: "Fail to fetch usage records" },
+      { status: 500 }
+    );
+  } finally {
+    if (client) {
+      client.release();
+    }
+  }
+}

app/api/v1/panel/usage/route.ts

@@ -0,0 +1,90 @@
+import { NextResponse } from "next/server";
+import { pool } from "@/lib/db";
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const startTime = searchParams.get("startTime");
+    const endTime = searchParams.get("endTime");
+
+    const timeFilter =
+      startTime && endTime ? `WHERE use_time >= $1 AND use_time <= $2` : "";
+
+    const params = startTime && endTime ? [startTime, endTime] : [];
+
+    const [modelResult, userResult, timeRangeResult, statsResult] =
+      await Promise.all([
+        pool.query(
+          `
+        SELECT 
+          model_name,
+          COUNT(*) as total_count,
+          COALESCE(SUM(cost), 0) as total_cost
+        FROM user_usage_records
+        ${timeFilter}
+        GROUP BY model_name
+        ORDER BY total_cost DESC
+      `,
+          params
+        ),
+        pool.query(
+          `
+        SELECT 
+          nickname,
+          COUNT(*) as total_count,
+          COALESCE(SUM(cost), 0) as total_cost
+        FROM user_usage_records
+        ${timeFilter}
+        GROUP BY nickname
+        ORDER BY total_cost DESC
+      `,
+          params
+        ),
+        pool.query(`
+        SELECT 
+          MIN(use_time) as min_time,
+          MAX(use_time) as max_time
+        FROM user_usage_records
+      `),
+        pool.query(
+          `
+        SELECT 
+          COALESCE(SUM(input_tokens + output_tokens), 0) as total_tokens,
+          COUNT(*) as total_calls
+        FROM user_usage_records
+        ${timeFilter}
+      `,
+          params
+        ),
+      ]);
+
+    const formattedData = {
+      models: modelResult.rows.map((row) => ({
+        model_name: row.model_name,
+        total_count: parseInt(row.total_count),
+        total_cost: parseFloat(row.total_cost),
+      })),
+      users: userResult.rows.map((row) => ({
+        nickname: row.nickname,
+        total_count: parseInt(row.total_count),
+        total_cost: parseFloat(row.total_cost),
+      })),
+      timeRange: {
+        minTime: timeRangeResult.rows[0].min_time,
+        maxTime: timeRangeResult.rows[0].max_time,
+      },
+      stats: {
+        totalTokens: parseInt(statsResult.rows[0].total_tokens),
+        totalCalls: parseInt(statsResult.rows[0].total_calls),
+      },
+    };
+
+    return NextResponse.json(formattedData);
+  } catch (error) {
+    console.error("Fail to fetch usage records:", error);
+    return NextResponse.json(
+      { error: "Fail to fetch usage records" },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,278 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+@layer utilities {
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in-delay {
+    animation: fadeIn 0.6s ease-out 0.2s forwards;
+    opacity: 0;
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-slide-up {
+    animation: slide-up 0.3s ease-out;
+  }
+}
+
+.custom-modal .ant-modal-content {
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+.custom-modal .ant-modal-header {
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.custom-modal .ant-modal-body {
+  padding: 0;
+}
+
+.custom-modal .ant-modal-close {
+  top: 20px;
+  right: 20px;
+}
+
+.custom-modal .ant-btn {
+  height: 40px;
+  border-radius: 8px;
+}
+
+.custom-tooltip-simple .ant-tooltip-inner {
+  padding: 0;
+  border-radius: 8px;
+  min-width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.custom-tooltip-simple .ant-tooltip-arrow {
+  display: none;
+}
+
+/* 更新模态框样式 */
+.update-modal .ant-modal-content {
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+}
+
+.update-modal .ant-modal-footer {
+  margin-top: 24px;
+  border-top: none;
+  padding: 0;
+}
+
+.update-modal .ant-modal-footer .ant-btn {
+  height: 38px;
+  padding: 0 24px;
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+.update-modal .ant-modal-footer .ant-btn-primary {
+  background: rgb(59 130 246);
+  border-color: rgb(59 130 246);
+  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
+}
+
+.update-modal .ant-modal-footer .ant-btn-primary:hover {
+  background: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+}
+
+.update-modal .ant-modal-footer .ant-btn-default {
+  border-color: #e5e7eb;
+  color: #6b7280;
+}
+
+.update-modal .ant-modal-footer .ant-btn-default:hover {
+  border-color: #d1d5db;
+  color: #4b5563;
+  background: #f9fafb;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+
+.bg-dot-pattern {
+  background-image: radial-gradient(
+    circle at center,
+    hsl(var(--foreground) / 0.1) 1px,
+    transparent 1px
+  );
+  background-size: 24px 24px;
+}
+
+.bg-dot-pattern-dark {
+  background-image: radial-gradient(
+    circle at center,
+    hsl(var(--foreground) / 0.2) 1px,
+    transparent 1px
+  );
+  background-size: 24px 24px;
+}
+
+/* 添加以下样式 */
+@media (max-width: 640px) {
+  .toaster-group {
+    --viewport-padding: 16px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+    width: calc(100% - var(--viewport-padding) * 2);
+  }
+
+  .toast {
+    --viewport-padding: 16px;
+    width: 100%;
+    border-radius: 12px;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+/* 自定义日期选择器样式 */
+.custom-date-picker {
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  border: 1px solid hsl(var(--border));
+  background-color: hsl(var(--background));
+}
+
+.custom-date-picker .ant-picker-panel {
+  background-color: hsl(var(--background));
+}
+
+.custom-date-picker
+  .ant-picker-cell-in-view.ant-picker-cell-selected
+  .ant-picker-cell-inner {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+.custom-date-picker
+  .ant-picker-cell-in-view.ant-picker-cell-today
+  .ant-picker-cell-inner::before {
+  border-color: hsl(var(--primary));
+}
+
+.custom-date-picker
+  .ant-picker-time-panel-column
+  > li.ant-picker-time-panel-cell-selected
+  .ant-picker-time-panel-cell-inner {
+  background-color: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.custom-date-picker .ant-picker-ranges {
+  border-top: 1px solid hsl(var(--border));
+}

app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import Header from "@/components/Header";
+import AuthCheck from "@/components/AuthCheck";
+import { Toaster } from "@/components/ui/toaster";
+import I18nProvider from "@/components/I18nProvider";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "OpenWebUI Monitor",
+  description: "Monitor and analyze your OpenWebUI usage data",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="zh-CN">
+      <body>
+        <div id="modal-root" className="relative z-[100]" />
+        <I18nProvider>
+          <AuthCheck>
+            <Header />
+            {children}
+          </AuthCheck>
+          <Toaster />
+        </I18nProvider>
+      </body>
+    </html>
+  );
+}

app/models/page.tsx

@@ -0,0 +1,1051 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Table, message, Tooltip } from "antd";
+import {
+  DownloadOutlined,
+  ExperimentOutlined,
+  CheckOutlined,
+  CloseOutlined,
+  InfoCircleOutlined,
+  UpOutlined,
+} from "@ant-design/icons";
+import type { ColumnsType } from "antd/es/table";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { Progress } from "antd";
+import { toast, Toaster } from "sonner";
+import { EditableCell } from "@/components/editable-cell";
+
+interface ModelResponse {
+  id: string;
+  name: string;
+  base_model_id: string;
+  system_prompt: string;
+  imageUrl: string;
+  input_price: number;
+  output_price: number;
+  per_msg_price: number;
+}
+
+interface Model {
+  id: string;
+  name: string;
+  base_model_id: string;
+  system_prompt: string;
+  imageUrl: string;
+  input_price: number;
+  output_price: number;
+  per_msg_price: number;
+  testStatus?: "success" | "error" | "testing";
+  syncStatus?: "syncing" | "success" | "error";
+}
+
+const TestStatusIndicator = ({ status }: { status: Model["testStatus"] }) => {
+  if (!status) return null;
+
+  const variants = {
+    testing: {
+      container: "bg-blue-100",
+      icon: "w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin",
+    },
+    success: {
+      container: "bg-green-100",
+      icon: "text-[10px] text-green-500",
+    },
+    error: {
+      container: "bg-red-100",
+      icon: "text-[10px] text-red-500",
+    },
+  };
+
+  const variant = variants[status];
+
+  return (
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      className={`w-4 h-4 rounded-full ${variant.container} flex items-center justify-center`}
+    >
+      {status === "testing" ? (
+        <div className={variant.icon} />
+      ) : status === "success" ? (
+        <CheckOutlined className={variant.icon} />
+      ) : (
+        <CloseOutlined className={variant.icon} />
+      )}
+    </motion.div>
+  );
+};
+
+const TestProgressPanel = ({
+  isVisible,
+  models,
+  isComplete,
+  t,
+}: {
+  isVisible: boolean;
+  models: Model[];
+  isComplete: boolean;
+  t: (key: string) => string;
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const successCount = models.filter((m) => m.testStatus === "success").length;
+  const errorCount = models.filter((m) => m.testStatus === "error").length;
+  const testingCount = models.filter((m) => m.testStatus === "testing").length;
+  const totalCount = models.length;
+  const progress = Math.round(((successCount + errorCount) / totalCount) * 100);
+
+  useEffect(() => {
+    if (testingCount > 0) {
+      setIsExpanded(true);
+    }
+  }, [testingCount]);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          className="rounded-xl bg-card border shadow-sm overflow-hidden"
+        >
+          <div className="p-6 space-y-6">
+            <div
+              className="flex items-center justify-between cursor-pointer"
+              onClick={() => setIsExpanded(!isExpanded)}
+            >
+              <div className="flex items-center gap-3">
+                <h3 className="text-lg font-semibold">
+                  {isComplete
+                    ? t("models.testComplete")
+                    : t("models.testingModels")}
+                </h3>
+                <TestStatusIndicator
+                  status={
+                    testingCount > 0
+                      ? "testing"
+                      : isComplete
+                      ? "success"
+                      : "error"
+                  }
+                />
+              </div>
+              <motion.div
+                animate={{ rotate: isExpanded ? 180 : 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <UpOutlined className="text-lg text-muted-foreground" />
+              </motion.div>
+            </div>
+
+            <AnimatePresence initial={false}>
+              {isExpanded && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: "auto", opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="space-y-6 overflow-hidden"
+                >
+                  <div className="space-y-4">
+                    <Progress
+                      percent={progress}
+                      strokeColor={{
+                        "0%": "#4F46E5",
+                        "100%": "#10B981",
+                      }}
+                      trailColor="#E5E7EB"
+                      className="!m-0"
+                    />
+
+                    <div className="grid grid-cols-3 gap-4">
+                      <div className="space-y-1">
+                        <div className="text-2xl font-semibold text-green-500">
+                          {successCount}
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          {t("models.testSuccess")}
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-2xl font-semibold text-red-500">
+                          {errorCount}
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          {t("models.testFailed")}
+                        </div>
+                      </div>
+                      <div className="space-y-1">
+                        <div className="text-2xl font-semibold text-blue-500">
+                          {testingCount}
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          {t("models.testing")}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <motion.div
+                    className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"
+                    initial="hidden"
+                    animate="visible"
+                    variants={{
+                      visible: {
+                        transition: {
+                          staggerChildren: 0.05,
+                        },
+                      },
+                    }}
+                  >
+                    {models.map((model) => (
+                      <motion.div
+                        key={model.id}
+                        variants={{
+                          hidden: { opacity: 0, y: 20 },
+                          visible: { opacity: 1, y: 0 },
+                        }}
+                        className="flex items-center gap-2 p-2 rounded-lg bg-muted/50"
+                      >
+                        <Image
+                          src={model.imageUrl}
+                          alt={model.name}
+                          width={24}
+                          height={24}
+                          className="rounded-full"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-medium truncate">
+                            {model.name}
+                          </div>
+                        </div>
+                        <TestStatusIndicator status={model.testStatus} />
+                      </motion.div>
+                    ))}
+                  </motion.div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const LoadingState = ({ t }: { t: (key: string) => string }) => (
+  <div className="flex flex-col items-center justify-center py-12 px-4">
+    <div className="h-12 w-12 rounded-full border-4 border-primary/10 border-t-primary animate-spin mb-4" />
+    <h3 className="text-lg font-medium text-foreground/70">
+      {t("models.loading")}
+    </h3>
+  </div>
+);
+
+export default function ModelsPage() {
+  const { t } = useTranslation("common");
+  const [models, setModels] = useState<Model[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editingCell, setEditingCell] = useState<{
+    id: string;
+    field: "input_price" | "output_price" | "per_msg_price";
+  } | null>(null);
+  const [testing, setTesting] = useState(false);
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [isTestComplete, setIsTestComplete] = useState(false);
+  const [syncing, setSyncing] = useState(false);
+
+  useEffect(() => {
+    const fetchModels = async () => {
+      try {
+        const response = await fetch("/api/v1/models");
+        if (!response.ok) {
+          throw new Error(t("error.model.failToFetchModels"));
+        }
+        const data = (await response.json()) as ModelResponse[];
+        setModels(
+          data.map((model: ModelResponse) => ({
+            ...model,
+            input_price: model.input_price ?? 60,
+            output_price: model.output_price ?? 60,
+            per_msg_price: model.per_msg_price ?? -1,
+          }))
+        );
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : t("error.model.unknownError")
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchModels();
+  }, []);
+
+  useEffect(() => {
+    const fetchApiKey = async () => {
+      try {
+        const response = await fetch("/api/config/key");
+        if (!response.ok) {
+          throw new Error(
+            `${t("error.model.failToFetchApiKey")}: ${response.status}`
+          );
+        }
+        const data = await response.json();
+        if (!data.apiKey) {
+          throw new Error(t("error.model.ApiKeyNotConfigured"));
+        }
+        setApiKey(data.apiKey);
+      } catch (error) {
+        console.error(t("error.model.failToFetchApiKey"), error);
+        message.error(
+          error instanceof Error
+            ? error.message
+            : t("error.model.failToFetchApiKey")
+        );
+      }
+    };
+
+    fetchApiKey();
+  }, []);
+
+  const handlePriceUpdate = async (
+    id: string,
+    field: "input_price" | "output_price" | "per_msg_price",
+    value: number
+  ): Promise<void> => {
+    try {
+      const model = models.find((m) => m.id === id);
+      if (!model) return;
+
+      const validValue = Number(value);
+      if (
+        field !== "per_msg_price" &&
+        (!isFinite(validValue) || validValue < 0)
+      ) {
+        throw new Error(t("error.model.nonePositiveNumber"));
+      }
+      if (field === "per_msg_price" && !isFinite(validValue)) {
+        throw new Error(t("error.model.invalidNumber"));
+      }
+
+      const input_price =
+        field === "input_price" ? validValue : model.input_price;
+      const output_price =
+        field === "output_price" ? validValue : model.output_price;
+      const per_msg_price =
+        field === "per_msg_price" ? validValue : model.per_msg_price;
+
+      const response = await fetch("/api/v1/models/price", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          updates: [
+            {
+              id,
+              input_price: Number(input_price),
+              output_price: Number(output_price),
+              per_msg_price: Number(per_msg_price),
+            },
+          ],
+        }),
+      });
+
+      const data = await response.json();
+      if (!response.ok)
+        throw new Error(data.error || t("error.model.priceUpdateFail"));
+
+      if (data.results && data.results[0]?.success) {
+        setModels((prevModels) =>
+          prevModels.map((model) =>
+            model.id === id
+              ? {
+                  ...model,
+                  input_price: Number(data.results[0].data.input_price),
+                  output_price: Number(data.results[0].data.output_price),
+                  per_msg_price: Number(data.results[0].data.per_msg_price),
+                }
+              : model
+          )
+        );
+        toast.success(t("error.model.priceUpdateSuccess"));
+      } else {
+        throw new Error(
+          data.results[0]?.error || t("error.model.priceUpdateFail")
+        );
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : t("error.model.priceUpdateFail")
+      );
+      throw err;
+    }
+  };
+
+  const handleTestSingleModel = async (model: Model) => {
+    try {
+      setModels((prev) =>
+        prev.map((m) =>
+          m.id === model.id ? { ...m, testStatus: "testing" } : m
+        )
+      );
+
+      const result = await testModel(model);
+
+      setModels((prev) =>
+        prev.map((m) =>
+          m.id === model.id
+            ? { ...m, testStatus: result.success ? "success" : "error" }
+            : m
+        )
+      );
+    } catch (error) {
+      setModels((prev) =>
+        prev.map((m) => (m.id === model.id ? { ...m, testStatus: "error" } : m))
+      );
+    }
+  };
+
+  const handleSyncAllDerivedModels = async () => {
+    try {
+      setSyncing(true);
+
+      const response = await fetch("/api/v1/models/sync-all-prices", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || t("models.syncFail"));
+      }
+
+      // 更新模型数据
+      if (data.syncedModels && data.syncedModels.length > 0) {
+        setModels((prev) =>
+          prev.map((model) => {
+            const syncedModel = data.syncedModels.find(
+              (m: any) => m.id === model.id && m.success
+            );
+            if (syncedModel) {
+              return {
+                ...model,
+                input_price: syncedModel.input_price,
+                output_price: syncedModel.output_price,
+                per_msg_price: syncedModel.per_msg_price,
+              };
+            }
+            return model;
+          })
+        );
+
+        if (data.syncedModels.every((m: any) => m.success)) {
+          toast.success(t("models.syncAllSuccess"));
+        } else {
+          toast.warning(t("models.syncAllFail"));
+        }
+      } else {
+        toast.info(t("models.noDerivedModels"));
+      }
+    } catch (error) {
+      console.error("Sync all derived models failed:", error);
+      toast.error(
+        error instanceof Error ? error.message : t("models.syncFail")
+      );
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const columns: ColumnsType<Model> = [
+    {
+      title: t("models.table.name"),
+      key: "model",
+      width: 200,
+      render: (_, record) => (
+        <div className="flex items-center gap-3 relative">
+          <div
+            className="relative cursor-pointer"
+            onClick={() => handleTestSingleModel(record)}
+          >
+            {record.imageUrl && (
+              <Image
+                src={record.imageUrl}
+                alt={record.name}
+                width={32}
+                height={32}
+                className="rounded-full object-cover"
+              />
+            )}
+            {record.testStatus && (
+              <div className="absolute -top-1 -right-1">
+                {record.testStatus === "testing" && (
+                  <div className="w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center">
+                    <div className="w-3 h-3 rounded-full border-2 border-blue-500 border-t-transparent animate-spin" />
+                  </div>
+                )}
+                {record.testStatus === "success" && (
+                  <div className="w-4 h-4 rounded-full bg-green-100 flex items-center justify-center">
+                    <CheckOutlined className="text-[10px] text-green-500" />
+                  </div>
+                )}
+                {record.testStatus === "error" && (
+                  <div className="w-4 h-4 rounded-full bg-red-100 flex items-center justify-center">
+                    <CloseOutlined className="text-[10px] text-red-500" />
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="font-medium min-w-0 flex-1">
+            <div className="truncate">{record.name}</div>
+            <div className="text-xs text-gray-500 truncate opacity-60">
+              {record.id}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: t("models.table.inputPrice"),
+      key: "input_price",
+      width: 150,
+      dataIndex: "input_price",
+      sorter: (a, b) => a.input_price - b.input_price,
+      sortDirections: ["descend", "ascend", "descend"],
+      render: (_, record) => renderPriceCell("input_price", record, true),
+    },
+    {
+      title: t("models.table.outputPrice"),
+      key: "output_price",
+      width: 150,
+      dataIndex: "output_price",
+      sorter: (a, b) => a.output_price - b.output_price,
+      sortDirections: ["descend", "ascend", "descend"],
+      render: (_, record) => renderPriceCell("output_price", record, true),
+    },
+    {
+      title: (
+        <span>
+          {t("models.table.perMsgPrice")}{" "}
+          <Tooltip title={t("models.table.perMsgPriceTooltip")}>
+            <InfoCircleOutlined className="text-gray-400 cursor-help" />
+          </Tooltip>
+        </span>
+      ),
+      key: "per_msg_price",
+      width: 150,
+      dataIndex: "per_msg_price",
+      sorter: (a, b) => a.per_msg_price - b.per_msg_price,
+      sortDirections: ["descend", "ascend", "descend"],
+      render: (_, record) => renderPriceCell("per_msg_price", record, true),
+    },
+  ];
+
+  const handleExportPrices = () => {
+    const priceData = models.map((model) => ({
+      id: model.id,
+      input_price: model.input_price,
+      output_price: model.output_price,
+      per_msg_price: model.per_msg_price,
+    }));
+
+    const blob = new Blob([JSON.stringify(priceData, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `model_prices_${new Date().toISOString().split("T")[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImportPrices = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const importedData = JSON.parse(e.target?.result as string);
+
+        if (!Array.isArray(importedData)) {
+          throw new Error(t("error.model.invalidImportFormat"));
+        }
+
+        const validUpdates = importedData.filter((item) =>
+          models.some((model) => model.id === item.id)
+        );
+
+        const response = await fetch("/api/v1/models/price", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            updates: validUpdates,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(t("error.model.batchPriceUpdateFail"));
+        }
+
+        const data = await response.json();
+        console.log(t("error.model.serverResponse"), data);
+
+        if (data.results) {
+          setModels((prevModels) =>
+            prevModels.map((model) => {
+              const update = data.results.find(
+                (r: any) => r.id === model.id && r.success && r.data
+              );
+              if (update) {
+                return {
+                  ...model,
+                  input_price: Number(update.data.input_price),
+                  output_price: Number(update.data.output_price),
+                  per_msg_price: Number(update.data.per_msg_price),
+                };
+              }
+              return model;
+            })
+          );
+        }
+
+        message.success(
+          `${t("error.model.updateSuccess")} ${
+            data.results.filter((r: any) => r.success).length
+          } ${t("error.model.numberOfModelPrice")}`
+        );
+      } catch (err) {
+        console.error(t("error.model.failToImport"), err);
+        message.error(
+          err instanceof Error ? err.message : t("error.model.failToImport")
+        );
+      }
+    };
+    reader.readAsText(file);
+    return false;
+  };
+
+  const testModel = async (
+    model: Model
+  ): Promise<{
+    id: string;
+    success: boolean;
+    error?: string;
+  }> => {
+    if (!apiKey) {
+      return {
+        id: model.id,
+        success: false,
+        error: t("error.model.ApiKeyNotFetched"),
+      };
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000);
+
+    try {
+      const response = await fetch("/api/v1/models/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify({
+          modelId: model.id,
+        }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+      const data = await response.json();
+
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || t("error.model.failToTest"));
+      }
+
+      return {
+        id: model.id,
+        success: true,
+      };
+    } catch (error) {
+      clearTimeout(timeoutId);
+      return {
+        id: model.id,
+        success: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : t("error.model.unknownError"),
+      };
+    }
+  };
+
+  const handleTestModels = async () => {
+    if (!apiKey) {
+      message.error(t("error.model.failToTestWithoutApiKey"));
+      return;
+    }
+
+    try {
+      setModels((prev) => prev.map((m) => ({ ...m, testStatus: "testing" })));
+      setTesting(true);
+      setIsTestComplete(false);
+
+      const testPromises = models.map((model) =>
+        testModel(model).then((result) => {
+          setModels((prev) =>
+            prev.map((m) =>
+              m.id === model.id
+                ? { ...m, testStatus: result.success ? "success" : "error" }
+                : m
+            )
+          );
+          return result;
+        })
+      );
+
+      await Promise.all(testPromises);
+      setIsTestComplete(true);
+    } catch (error) {
+      console.error(t("error.model.failToTest"), error);
+      message.error(t("error.model.failToTest"));
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  // 修改表格样式
+  const tableClassName = `
+    [&_.ant-table]:!border-b-0 
+    [&_.ant-table-container]:!rounded-xl 
+    [&_.ant-table-container]:!border-hidden
+    [&_.ant-table-cell]:!border-border/40
+    [&_.ant-table-thead_.ant-table-cell]:!bg-muted/30
+    [&_.ant-table-thead_.ant-table-cell]:!text-muted-foreground
+    [&_.ant-table-thead_.ant-table-cell]:!font-medium
+    [&_.ant-table-thead_.ant-table-cell]:!text-sm
+    [&_.ant-table-thead]:!border-b
+    [&_.ant-table-thead]:border-border/40
+    [&_.ant-table-row]:!transition-colors
+    [&_.ant-table-row:hover>*]:!bg-muted/60
+    [&_.ant-table-tbody_.ant-table-row]:!cursor-pointer
+    [&_.ant-table-tbody_.ant-table-cell]:!py-4
+    [&_.ant-table-row:last-child>td]:!border-b-0
+    [&_.ant-table-cell:first-child]:!pl-6
+    [&_.ant-table-cell:last-child]:!pr-6
+  `;
+
+  // 修改移动端卡片组件
+  const MobileCard = ({ record }: { record: Model }) => {
+    const isPerMsgEnabled = record.per_msg_price >= 0;
+
+    return (
+      <div
+        className="p-4 sm:p-6 bg-card rounded-xl border border-border/40 
+        shadow-sm hover:shadow-md transition-all duration-200 space-y-4"
+      >
+        <div className="flex items-center gap-3">
+          <div
+            className="relative cursor-pointer group shrink-0"
+            onClick={() => handleTestSingleModel(record)}
+          >
+            <div className="relative">
+              {record.imageUrl && (
+                <Image
+                  src={record.imageUrl}
+                  alt={record.name}
+                  width={40}
+                  height={40}
+                  className="rounded-xl object-cover transition-transform group-hover:scale-105"
+                />
+              )}
+              <div className="absolute inset-0 rounded-xl ring-1 ring-inset ring-black/5"></div>
+            </div>
+            {record.testStatus && (
+              <div className="absolute -top-1 -right-1 z-10">
+                <TestStatusIndicator status={record.testStatus} />
+              </div>
+            )}
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-base font-semibold tracking-tight truncate">
+              {record.name}
+            </h3>
+            <p className="text-xs text-muted-foreground/80 truncate font-mono">
+              {record.id}
+            </p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 sm:gap-4">
+          {[
+            {
+              label: t("models.table.mobile.inputPrice"),
+              field: "input_price" as const,
+              disabled: isPerMsgEnabled,
+            },
+            {
+              label: t("models.table.mobile.outputPrice"),
+              field: "output_price" as const,
+              disabled: isPerMsgEnabled,
+            },
+            {
+              label: t("models.table.mobile.perMsgPrice"),
+              field: "per_msg_price" as const,
+              disabled: false,
+            },
+          ].map(({ label, field, disabled }) => (
+            <div
+              key={field}
+              className={`space-y-1.5 ${disabled ? "opacity-50" : ""}`}
+            >
+              <span className="text-xs text-muted-foreground/80 block truncate">
+                {label}
+              </span>
+              {renderPriceCell(field, record, false)}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  // 将 renderPriceCell 修改为接收一个额外的 showTooltip 参数
+  const renderPriceCell = (
+    field: "input_price" | "output_price" | "per_msg_price",
+    record: Model,
+    showTooltip: boolean = true
+  ) => {
+    const isEditing =
+      editingCell?.id === record.id && editingCell?.field === field;
+    const currentValue = Number(record[field]);
+    const isDisabled = field !== "per_msg_price" && record.per_msg_price >= 0;
+
+    return (
+      <EditableCell
+        value={currentValue}
+        isEditing={isEditing}
+        onEdit={() => setEditingCell({ id: record.id, field })}
+        onSubmit={async (value) => {
+          try {
+            await handlePriceUpdate(record.id, field, value);
+            setEditingCell(null);
+          } catch {
+            // 错误已经在 handlePriceUpdate 中处理
+          }
+        }}
+        t={t}
+        disabled={isDisabled}
+        onCancel={() => setEditingCell(null)}
+        tooltipText={
+          showTooltip && isDisabled
+            ? t("models.table.priceOverriddenByPerMsg")
+            : undefined
+        }
+        placeholder={t("models.table.enterPrice")}
+        validateValue={(value) => ({
+          isValid:
+            field === "per_msg_price"
+              ? isFinite(value)
+              : isFinite(value) && value >= 0,
+          errorMessage:
+            field === "per_msg_price"
+              ? t("models.table.invalidNumber")
+              : t("models.table.nonePositiveNumber"),
+        })}
+        isPerMsgPrice={field === "per_msg_price"}
+      />
+    );
+  };
+
+  if (error) {
+    return <div className="p-4 text-red-500">错误: {error}</div>;
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-24 space-y-8">
+      {/* 添加 Toaster 组件 */}
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+
+      {/* 页面标题部分 */}
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold tracking-tight">
+          {t("models.title")}
+        </h1>
+        <p className="text-muted-foreground">{t("models.description")}</p>
+      </div>
+
+      {/* 操作按钮组 */}
+      <div className="flex flex-wrap gap-4">
+        <Button
+          variant="default"
+          size="default"
+          onClick={handleTestModels}
+          className="relative flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white shadow-sm hover:shadow-md transition-all duration-200"
+          disabled={testing && !isTestComplete}
+        >
+          <motion.div
+            animate={testing ? { rotate: 360 } : { rotate: 0 }}
+            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+          >
+            <ExperimentOutlined className="h-4 w-4" />
+          </motion.div>
+          {testing ? t("models.testing") : t("models.testAll")}
+          <Tooltip title={t("models.testTooltip")}>
+            <InfoCircleOutlined className="h-3.5 w-3.5 text-white/80 hover:text-white" />
+          </Tooltip>
+        </Button>
+
+        <Button
+          variant="default"
+          size="default"
+          onClick={handleSyncAllDerivedModels}
+          className="relative flex items-center gap-2 px-4 py-2 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-white shadow-sm hover:shadow-md transition-all duration-200"
+          disabled={syncing}
+        >
+          <motion.div
+            animate={syncing ? { rotate: 360 } : { rotate: 0 }}
+            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
+            </svg>
+          </motion.div>
+          {syncing ? t("models.syncing") : t("models.syncAllDerivedModels")}
+          <Tooltip title={t("models.syncTooltip")}>
+            <InfoCircleOutlined className="h-3.5 w-3.5 text-white/80 hover:text-white" />
+          </Tooltip>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="default"
+          onClick={handleExportPrices}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white hover:bg-gray-50 text-zinc-800 border border-zinc-200 shadow-sm hover:shadow-md transition-all duration-200"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+            />
+          </svg>
+          {t("models.exportConfig")}
+        </Button>
+
+        <Button
+          variant="outline"
+          size="default"
+          className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white hover:bg-gray-50 text-zinc-800 border border-zinc-200 shadow-sm hover:shadow-md transition-all duration-200"
+          onClick={() => document.getElementById("import-input")?.click()}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+            />
+          </svg>
+          {t("models.importConfig")}
+        </Button>
+        <input
+          id="import-input"
+          type="file"
+          accept=".json"
+          className="hidden"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              handleImportPrices(file);
+            }
+            e.target.value = "";
+          }}
+        />
+      </div>
+
+      {/* 替换原有的TestProgress组件 */}
+      <TestProgressPanel
+        isVisible={testing || isTestComplete}
+        models={models}
+        isComplete={isTestComplete}
+        t={t}
+      />
+
+      {/* 桌面端表格视图 */}
+      <div className="hidden sm:block">
+        <div className="rounded-xl border border-border/40 bg-card shadow-sm overflow-hidden">
+          {loading ? (
+            <LoadingState t={t} />
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={models}
+              rowKey="id"
+              loading={false}
+              pagination={false}
+              size="middle"
+              className={tableClassName}
+              scroll={{ x: 500 }}
+              rowClassName={() => "group"}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* 移动端卡片视图 */}
+      <div className="sm:hidden">
+        {loading ? (
+          <LoadingState t={t} />
+        ) : (
+          <div className="grid gap-4">
+            {models.map((model) => (
+              <MobileCard key={model.id} record={model} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { FiDatabase, FiUsers, FiBarChart2, FiGithub } from "react-icons/fi";
+import { CloseOutlined } from "@ant-design/icons";
+import { APP_VERSION } from "@/lib/version";
+import { message } from "antd";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern";
+import { cn } from "@/lib/utils";
+
+export default function HomePage() {
+  const { t } = useTranslation("common");
+  const [isUpdateVisible, setIsUpdateVisible] = useState(false);
+  const [latestVersion, setLatestVersion] = useState("");
+
+  useEffect(() => {
+    const checkUpdate = async () => {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/variantconst/openwebui-monitor/releases/latest"
+        );
+        const data = await response.json();
+        const latestVer = data.tag_name;
+        if (!latestVer) {
+          return;
+        }
+
+        const currentVer = APP_VERSION.replace(/^v/, "");
+        const newVer = latestVer.replace(/^v/, "");
+
+        // 检查是否有更新且用户未禁用该版本的提示
+        const ignoredVersion = localStorage.getItem("ignoredVersion");
+        if (currentVer !== newVer && ignoredVersion !== latestVer) {
+          setLatestVersion(latestVer);
+          setIsUpdateVisible(true);
+        }
+      } catch (error) {
+        console.error(t("header.messages.updateCheckFailed"), error);
+      }
+    };
+
+    checkUpdate();
+  }, [t]);
+
+  const handleUpdate = () => {
+    window.open(
+      "https://github.com/VariantConst/OpenWebUI-Monitor/releases/latest",
+      "_blank"
+    );
+    setIsUpdateVisible(false);
+  };
+
+  const handleIgnore = () => {
+    localStorage.setItem("ignoredVersion", latestVersion);
+    setIsUpdateVisible(false);
+    message.success(t("update.ignore"));
+  };
+
+  return (
+    <main className="relative min-h-screen w-full overflow-hidden bg-gradient-to-br from-rose-50 via-slate-50 to-teal-50 pt-16">
+      {/* 新增动态网格背景 */}
+      <AnimatedGridPattern
+        numSquares={30}
+        maxOpacity={0.03}
+        duration={3}
+        repeatDelay={1}
+        className={cn(
+          "[mask-image:radial-gradient(1200px_circle_at_center,white,transparent)]",
+          "absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-12 z-0"
+        )}
+      />
+
+      {/* 装饰性背景模糊圆 */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] bg-gradient-to-br from-rose-100/20 via-slate-100/20 to-teal-100/20 rounded-full blur-3xl opacity-40" />
+      <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-pink-100/10 to-indigo-100/10 rounded-full blur-3xl opacity-30" />
+      <div className="absolute bottom-1/4 right-1/4 w-[700px] h-[700px] bg-gradient-to-br from-teal-100/10 to-slate-100/10 rounded-full blur-3xl opacity-30" />
+
+      {/* 修改主要内容容器，使用flex布局固定GitHub在底部 */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="min-h-[calc(100vh-4rem)] flex flex-col relative z-10"
+      >
+        {/* 标题区域保持不变 */}
+        <motion.div className="flex-1 flex flex-col items-center justify-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="w-full space-y-6 sm:space-y-8 mb-12 sm:mb-16 px-4"
+          >
+            <div className="text-center space-y-2">
+              <motion.h1
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 bg-clip-text text-transparent mb-2 sm:mb-3 tracking-tight"
+              >
+                {t("common.appName")}
+              </motion.h1>
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.2 }}
+                className="text-sm sm:text-base md:text-lg text-slate-600/90 max-w-2xl mx-auto font-light"
+              >
+                {t("common.description")}
+              </motion.p>
+            </div>
+          </motion.div>
+
+          {/* 重新设计的导航区域 */}
+          <div className="w-full max-w-2xl px-4 sm:px-6">
+            <div className="relative">
+              {/* 装饰性背景 */}
+              <div className="absolute inset-0 bg-gradient-to-r from-rose-100/20 via-slate-100/20 to-teal-100/20 blur-3xl -z-10" />
+
+              {/* 新的垂直导航设计 */}
+              <div className="space-y-4">
+                {[
+                  {
+                    path: "/models",
+                    icon: <FiDatabase className="w-6 h-6" />,
+                    title: t("home.features.models.title"),
+                    desc: t("home.features.models.description"),
+                    gradient: "from-blue-500/80 to-indigo-500/80",
+                    lightColor: "bg-blue-50/50",
+                    borderColor: "border-blue-200/20",
+                    iconColor: "text-blue-500/70",
+                  },
+                  {
+                    path: "/users",
+                    icon: <FiUsers className="w-6 h-6" />,
+                    title: t("home.features.users.title"),
+                    desc: t("home.features.users.description"),
+                    gradient: "from-rose-500/80 to-pink-500/80",
+                    lightColor: "bg-rose-50/50",
+                    borderColor: "border-rose-200/20",
+                    iconColor: "text-rose-500/70",
+                  },
+                  {
+                    path: "/panel",
+                    icon: <FiBarChart2 className="w-6 h-6" />,
+                    title: t("home.features.stats.title"),
+                    desc: t("home.features.stats.description"),
+                    gradient: "from-emerald-500/80 to-teal-500/80",
+                    lightColor: "bg-emerald-50/50",
+                    borderColor: "border-emerald-200/20",
+                    iconColor: "text-emerald-500/70",
+                  },
+                ].map((item, index) => (
+                  <Link
+                    key={item.path}
+                    href={item.path}
+                    className="group block"
+                  >
+                    <motion.div
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: index * 0.1 }}
+                      className="relative bg-white rounded-2xl overflow-hidden transition-all duration-500 
+                        shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] 
+                        hover:shadow-[0_8px_30px_-4px_rgba(0,0,0,0.12)]"
+                    >
+                      {/* 移除边框设计，只保留渐变背景 */}
+                      <div
+                        className={`absolute inset-0 bg-gradient-to-r ${item.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-500`}
+                      />
+
+                      {/* 内容区域 */}
+                      <div className="relative p-6">
+                        <div className="flex items-center gap-4">
+                          {/* 图标容器 - 使用投影替代边框 */}
+                          <div
+                            className={cn(
+                              "p-3 rounded-xl transition-all duration-500",
+                              item.lightColor,
+                              item.iconColor,
+                              "shadow-[0_2px_10px_-2px_rgba(0,0,0,0.05)]",
+                              "group-hover:bg-white/10 group-hover:text-white group-hover:shadow-none"
+                            )}
+                          >
+                            {item.icon}
+                          </div>
+
+                          {/* 文字内容 */}
+                          <div className="flex-1 min-w-0">
+                            <h3 className="text-lg font-medium text-slate-800 group-hover:text-white transition-colors mb-1">
+                              {item.title}
+                            </h3>
+                            <p className="text-sm text-slate-600 group-hover:text-white/90 transition-colors">
+                              {item.desc}
+                            </p>
+                          </div>
+
+                          {/* 箭头 */}
+                          <div
+                            className={cn(
+                              "transform transition-all duration-300",
+                              item.iconColor,
+                              "group-hover:text-white group-hover:translate-x-1"
+                            )}
+                          >
+                            <svg
+                              className="w-5 h-5"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={1.5}
+                                d="M9 5l7 7-7 7"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </motion.div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* GitHub 图标固定在底部 */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6 }}
+          className="py-8 text-center"
+        >
+          <a
+            href="https://github.com/VariantConst/OpenWebUI-Monitor"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex p-2 text-slate-400 hover:text-slate-600 transition-colors"
+          >
+            <FiGithub className="w-6 h-6" />
+          </a>
+        </motion.div>
+      </motion.div>
+
+      {/* 更新提示框样式修改 */}
+      {isUpdateVisible && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="fixed bottom-4 right-4 z-50 w-auto max-w-[calc(100%-2rem)]"
+        >
+          <div className="bg-white rounded-lg shadow-2xl p-3 border border-gray-200 w-fit">
+            <div className="flex items-center gap-2 text-gray-600 text-sm">
+              <span className="whitespace-nowrap">
+                {t("update.newVersion")} {latestVersion}
+              </span>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleIgnore}
+                  className="text-xs hover:text-gray-900 transition-colors"
+                >
+                  {t("update.ignore")}
+                </button>
+                <span className="text-gray-300">|</span>
+                <button
+                  onClick={handleUpdate}
+                  className="text-xs text-blue-500 hover:text-blue-600 transition-colors"
+                >
+                  {t("update.update")}
+                </button>
+              </div>
+              <button
+                onClick={() => setIsUpdateVisible(false)}
+                className="text-gray-400 hover:text-gray-500 ml-1"
+              >
+                <CloseOutlined className="text-[10px]" />
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </main>
+  );
+}

app/panel/page.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Head from "next/head";
+import dayjs from "dayjs";
+import type { TablePaginationConfig } from "antd/es/table";
+import type { SorterResult } from "antd/es/table/interface";
+import type { FilterValue } from "antd/es/table/interface";
+import { message } from "antd";
+import TimeRangeSelector, {
+  TimeRangeType,
+} from "@/components/panel/TimeRangeSelector";
+import ModelDistributionChart from "@/components/panel/ModelDistributionChart";
+import UserRankingChart from "@/components/panel/UserRankingChart";
+import UsageRecordsTable from "@/components/panel/UsageRecordsTable";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { toast, Toaster } from "sonner";
+import { Card } from "@/components/ui/card";
+import {
+  BarChartOutlined,
+  PieChartOutlined,
+  TableOutlined,
+} from "@ant-design/icons";
+import { Crown, Trophy } from "lucide-react";
+
+interface ModelUsage {
+  model_name: string;
+  total_cost: number;
+  total_count: number;
+}
+
+interface UserUsage {
+  nickname: string;
+  total_cost: number;
+  total_count: number;
+}
+
+interface UsageData {
+  models: ModelUsage[];
+  users: UserUsage[];
+  timeRange: {
+    minTime: string;
+    maxTime: string;
+  };
+  stats?: {
+    totalTokens: number;
+    totalCalls: number;
+  };
+}
+
+interface UsageRecord {
+  id: number;
+  nickname: string;
+  use_time: string;
+  model_name: string;
+  input_tokens: number;
+  output_tokens: number;
+  cost: number;
+  balance_after: number;
+}
+
+interface TableParams {
+  pagination: TablePaginationConfig;
+  sortField?: string;
+  sortOrder?: "ascend" | "descend" | undefined;
+  filters?: Record<string, FilterValue | null>;
+}
+
+export default function PanelPage() {
+  const { t } = useTranslation("common");
+  const [loading, setLoading] = useState(true);
+  const [tableLoading, setTableLoading] = useState(true);
+  const [dateRange, setDateRange] = useState<[Date, Date]>([
+    new Date(), // 将在加载数据后更新
+    new Date(),
+  ]);
+  const [availableTimeRange, setAvailableTimeRange] = useState<{
+    minTime: Date;
+    maxTime: Date;
+  }>({
+    minTime: new Date(),
+    maxTime: new Date(),
+  });
+  const [usageData, setUsageData] = useState<UsageData>({
+    models: [],
+    users: [],
+    timeRange: {
+      minTime: "",
+      maxTime: "",
+    },
+  });
+  const [pieMetric, setPieMetric] = useState<"cost" | "count">("cost");
+  const [barMetric, setBarMetric] = useState<"cost" | "count">("cost");
+  const [records, setRecords] = useState<UsageRecord[]>([]);
+  const [tableParams, setTableParams] = useState<TableParams>({
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+    filters: {
+      nickname: null,
+      model_name: null,
+    },
+  });
+  const [timeRangeType, setTimeRangeType] = useState<TimeRangeType>("all");
+
+  const fetchUsageData = async (range: [Date, Date]) => {
+    setLoading(true);
+    try {
+      const startTime = dayjs(range[0]).startOf("day").toISOString();
+      const endTime = dayjs(range[1]).endOf("day").toISOString();
+
+      const url = `/api/v1/panel/usage?startTime=${startTime}&endTime=${endTime}`;
+      const response = await fetch(url);
+
+      if (!response.ok) throw new Error("Failed to fetch data");
+
+      const data = await response.json();
+      setUsageData(data);
+
+      // 如果是全部时间范围,更新可用时间范围
+      if (timeRangeType === "all") {
+        const minTime = new Date(data.timeRange.minTime);
+        const maxTime = new Date(data.timeRange.maxTime);
+        setAvailableTimeRange({ minTime, maxTime });
+      }
+    } catch (error) {
+      console.error(t("error.panel.fetchUsageDataFail"), error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchRecords = async (params: TableParams, range: [Date, Date]) => {
+    setTableLoading(true);
+    try {
+      const searchParams = new URLSearchParams();
+      searchParams.append("page", params.pagination.current?.toString() || "1");
+      searchParams.append(
+        "pageSize",
+        params.pagination.pageSize?.toString() || "10"
+      );
+
+      // 添加排序和过滤参数
+      if (params.sortField) {
+        searchParams.append("sortField", params.sortField);
+        searchParams.append("sortOrder", params.sortOrder || "ascend");
+      }
+      if (params.filters?.nickname?.length) {
+        searchParams.append("users", params.filters.nickname.join(","));
+      }
+      if (params.filters?.model_name?.length) {
+        searchParams.append("models", params.filters.model_name.join(","));
+      }
+
+      // 添加日期范围
+      searchParams.append(
+        "startDate",
+        dayjs(range[0]).startOf("day").format("YYYY-MM-DD")
+      );
+      searchParams.append(
+        "endDate",
+        dayjs(range[1]).endOf("day").format("YYYY-MM-DD")
+      );
+
+      const response = await fetch(
+        `/api/v1/panel/records?${searchParams.toString()}`
+      );
+      const data = await response.json();
+
+      setRecords(data.records);
+      setTableParams({
+        ...params,
+        pagination: {
+          ...params.pagination,
+          total: data.total,
+        },
+      });
+    } catch (error) {
+      message.error(t("error.panel.fetchUsageDataFail"));
+    } finally {
+      setTableLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const loadInitialData = async () => {
+      // 获取全部时间范围的数据
+      const response = await fetch("/api/v1/panel/usage");
+      const data = await response.json();
+
+      const minTime = dayjs(data.timeRange.minTime).startOf("day").toDate();
+      const maxTime = dayjs(data.timeRange.maxTime).endOf("day").toDate();
+      setAvailableTimeRange({ minTime, maxTime });
+
+      // 设置为全部时间范围
+      const allTimeRange: [Date, Date] = [minTime, maxTime];
+      setDateRange(allTimeRange);
+      setTimeRangeType("all");
+
+      await fetchUsageData(allTimeRange);
+      await fetchRecords(tableParams, allTimeRange);
+    };
+
+    loadInitialData();
+  }, []);
+
+  const handleTimeRangeChange = async (
+    range: [Date, Date],
+    type: TimeRangeType
+  ) => {
+    setTimeRangeType(type);
+    setDateRange(range);
+    await fetchUsageData(range);
+    await fetchRecords(tableParams, range);
+  };
+
+  const getReportTitle = (type: TimeRangeType, t: (key: string) => string) => {
+    switch (type) {
+      case "today":
+        return t("panel.report.daily");
+      case "week":
+        return t("panel.report.weekly");
+      case "month":
+        return t("panel.report.monthly");
+      case "30days":
+        return t("panel.report.thirtyDays");
+      case "all":
+        return t("panel.report.overall");
+      case "custom":
+        return t("panel.report.custom");
+      default:
+        return "";
+    }
+  };
+
+  const renderDateRangeLabel = () => {
+    // 如果是同一天，只显示一个日期
+    if (dayjs(dateRange[0]).isSame(dateRange[1], "day")) {
+      return dayjs(dateRange[0]).format("YYYY-MM-DD");
+    }
+    // 否则显示日期范围
+    return `${dayjs(dateRange[0]).format("YYYY-MM-DD")} ~ ${dayjs(
+      dateRange[1]
+    ).format("YYYY-MM-DD")}`;
+  };
+
+  const formatNumber = (num: number): string => {
+    if (num >= 1_000_000_000) {
+      return (num / 1_000_000_000).toFixed(1) + "B";
+    }
+    if (num >= 1_000_000) {
+      return (num / 1_000_000).toFixed(1) + "M";
+    }
+    if (num >= 1_000) {
+      return (num / 1_000).toFixed(1) + "K";
+    }
+    return num.toLocaleString();
+  };
+
+  const handleTableChange = (
+    pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<UsageRecord> | SorterResult<UsageRecord>[]
+  ) => {
+    const processedFilters = Object.fromEntries(
+      Object.entries(filters).map(([key, value]) => [
+        key,
+        Array.isArray(value) && value.length === 0 ? null : value,
+      ])
+    );
+
+    const newParams: TableParams = {
+      pagination,
+      filters: processedFilters,
+      sortField: Array.isArray(sorter) ? undefined : sorter.field?.toString(),
+      sortOrder: Array.isArray(sorter)
+        ? undefined
+        : (sorter.order as "ascend" | "descend" | undefined),
+    };
+    setTableParams(newParams);
+    fetchRecords(newParams, dateRange);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{t("panel.header")}</title>
+      </Head>
+
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-24 space-y-8">
+        <div className="space-y-4 pt-8">
+          <h1 className="text-3xl font-bold tracking-tight">
+            {t("panel.title")}
+          </h1>
+          <p className="text-muted-foreground">{t("panel.description")}</p>
+        </div>
+
+        <TimeRangeSelector
+          timeRange={dateRange}
+          timeRangeType={timeRangeType}
+          availableTimeRange={availableTimeRange}
+          onTimeRangeChange={handleTimeRangeChange}
+        />
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="col-span-full bg-gradient-to-br from-card to-card/95 text-card-foreground rounded-xl border shadow-sm overflow-hidden"
+          >
+            <div className="relative">
+              <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 pointer-events-none" />
+
+              <div className="relative p-6 space-y-6">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center rounded-xl shrink-0">
+                    <BarChartOutlined className="text-xl text-primary" />
+                  </div>
+                  <div className="space-y-1">
+                    <h3 className="text-2xl font-semibold bg-gradient-to-br from-foreground to-foreground/80 bg-clip-text text-transparent">
+                      {getReportTitle(timeRangeType, t)}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {renderDateRangeLabel()}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
+                  <div className="col-span-2 md:col-span-1 space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {t("panel.overview.totalCost")}
+                    </p>
+                    <p className="text-2xl font-bold text-primary">
+                      {loading
+                        ? "-"
+                        : `${t("common.currency")}${usageData.models
+                            .reduce((sum, model) => sum + model.total_cost, 0)
+                            .toFixed(2)}`}
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {t("panel.overview.totalCalls")}
+                    </p>
+                    <p className="text-2xl font-bold text-emerald-600">
+                      {loading
+                        ? "-"
+                        : formatNumber(usageData.stats?.totalCalls || 0)}
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {t("panel.overview.totalTokens")}
+                    </p>
+                    <p className="text-2xl font-bold text-emerald-600">
+                      {loading
+                        ? "-"
+                        : formatNumber(usageData.stats?.totalTokens || 0)}
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {t("panel.overview.totalUsers")}
+                    </p>
+                    <p className="text-2xl font-bold text-amber-600">
+                      {loading ? "-" : usageData.users.length}
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">
+                      {t("panel.overview.totalModels")}
+                    </p>
+                    <p className="text-2xl font-bold text-violet-600">
+                      {loading ? "-" : usageData.models.length}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-2">
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Crown className="w-4 h-4 text-amber-500" />
+                      <h4 className="font-medium">
+                        {t("panel.report.mostUsedModel")}
+                      </h4>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-lg font-medium">
+                        {loading
+                          ? "-"
+                          : usageData.models.length > 0
+                          ? usageData.models.reduce((prev, current) =>
+                              current.total_count > prev.total_count
+                                ? current
+                                : prev
+                            ).model_name
+                          : "-"}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {loading
+                          ? "-"
+                          : usageData.models.length > 0
+                          ? t("panel.report.usageCount", {
+                              count: usageData.models.reduce((prev, current) =>
+                                current.total_count > prev.total_count
+                                  ? current
+                                  : prev
+                              ).total_count,
+                            })
+                          : "-"}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-2">
+                      <Trophy className="w-4 h-4 text-rose-500" />
+                      <h4 className="font-medium">
+                        {t("panel.report.topUser")}
+                      </h4>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-lg font-medium">
+                        {loading
+                          ? "-"
+                          : usageData.users.length > 0
+                          ? usageData.users.reduce((prev, current) =>
+                              current.total_cost > prev.total_cost
+                                ? current
+                                : prev
+                            ).nickname
+                          : "-"}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {loading
+                          ? "-"
+                          : usageData.users.length > 0
+                          ? t("panel.report.spentAmount", {
+                              amount: usageData.users
+                                .reduce((prev, current) =>
+                                  current.total_cost > prev.total_cost
+                                    ? current
+                                    : prev
+                                )
+                                .total_cost.toFixed(2),
+                            })
+                          : "-"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="py-6 bg-card text-card-foreground"
+        >
+          <ModelDistributionChart
+            loading={loading}
+            models={usageData.models}
+            metric={pieMetric}
+            onMetricChange={setPieMetric}
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="py-6 bg-card text-card-foreground"
+        >
+          <UserRankingChart
+            loading={loading}
+            users={usageData.users}
+            metric={barMetric}
+            onMetricChange={setBarMetric}
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="py-6 bg-card text-card-foreground"
+        >
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold tracking-tight flex items-center gap-2">
+                <TableOutlined className="text-primary" />
+                {t("panel.usageDetails.title")}
+              </h2>
+            </div>
+            <UsageRecordsTable
+              loading={tableLoading}
+              records={records}
+              tableParams={tableParams}
+              models={usageData.models}
+              users={usageData.users}
+              onTableChange={handleTableChange}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </>
+  );
+}

app/records/page.tsx

@@ -0,0 +1,332 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Table, DatePicker, Space } from "antd";
+import type { ColumnsType, TablePaginationConfig } from "antd/es/table";
+import type { FilterValue, SorterResult } from "antd/es/table/interface";
+import {
+  DownloadOutlined,
+  CalendarOutlined,
+  TableOutlined,
+} from "@ant-design/icons";
+import type { RangePickerProps } from "antd/es/date-picker";
+import zhCN from "antd/lib/locale/zh_CN";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { toast, Toaster } from "sonner";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+const { RangePicker } = DatePicker;
+
+interface UsageRecord {
+  id: number;
+  nickname: string;
+  use_time: string;
+  model_name: string;
+  input_tokens: number;
+  output_tokens: number;
+  cost: number;
+  balance_after: number;
+}
+
+interface TableParams {
+  pagination: TablePaginationConfig;
+  sortField?: string;
+  sortOrder?: string;
+  filters?: Record<string, FilterValue | null>;
+  dateRange?: RangePickerProps["value"];
+}
+
+export default function RecordsPage() {
+  const { t } = useTranslation("common");
+  const [loading, setLoading] = useState(true);
+  const [records, setRecords] = useState<UsageRecord[]>([]);
+  const [users, setUsers] = useState<string[]>([]);
+  const [models, setModels] = useState<string[]>([]);
+  const [tableParams, setTableParams] = useState<TableParams>({
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    },
+  });
+
+  const columns: ColumnsType<UsageRecord> = [
+    {
+      title: t("records.columns.user"),
+      dataIndex: "nickname",
+      key: "nickname",
+      filters: users.map((user) => ({ text: user, value: user })),
+      filterMode: "tree",
+      filterSearch: true,
+      width: 200,
+      render: (text) => <div className="font-medium">{text}</div>,
+    },
+    {
+      title: t("records.columns.time"),
+      dataIndex: "use_time",
+      key: "use_time",
+      render: (text) => (
+        <div className="text-muted-foreground">
+          {new Date(text).toLocaleString()}
+        </div>
+      ),
+      sorter: true,
+      width: 180,
+    },
+    {
+      title: t("records.columns.model"),
+      dataIndex: "model_name",
+      key: "model_name",
+      filters: models.map((model) => ({ text: model, value: model })),
+      filterMode: "tree",
+      filterSearch: true,
+      width: 200,
+    },
+    {
+      title: t("records.columns.tokens"),
+      dataIndex: "input_tokens",
+      key: "input_tokens",
+      align: "right",
+      sorter: true,
+      width: 120,
+      render: (input, record) => (
+        <div className="space-y-1">
+          <div className="text-xs text-muted-foreground">输入: {input}</div>
+          <div className="text-xs text-muted-foreground">
+            输出: {record.output_tokens}
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: t("records.columns.cost"),
+      dataIndex: "cost",
+      key: "cost",
+      align: "right",
+      width: 120,
+      render: (value) => (
+        <div className="font-medium text-primary">
+          {t("common.currency")}
+          {Number(value).toFixed(4)}
+        </div>
+      ),
+      sorter: true,
+    },
+    {
+      title: t("records.columns.balance"),
+      dataIndex: "balance_after",
+      key: "balance_after",
+      align: "right",
+      width: 120,
+      render: (value) => (
+        <div className="font-medium">
+          {t("common.currency")}
+          {Number(value).toFixed(4)}
+        </div>
+      ),
+      sorter: true,
+    },
+  ];
+
+  const fetchRecords = async (params: TableParams) => {
+    setLoading(true);
+    try {
+      const searchParams = new URLSearchParams();
+      searchParams.append("page", params.pagination.current?.toString() || "1");
+      searchParams.append(
+        "pageSize",
+        params.pagination.pageSize?.toString() || "10"
+      );
+
+      if (params.sortField) {
+        searchParams.append("sortField", params.sortField);
+        searchParams.append("sortOrder", params.sortOrder || "ascend");
+      }
+
+      if (params.dateRange) {
+        const [start, end] = params.dateRange;
+        if (start && end) {
+          searchParams.append("startDate", start.format("YYYY-MM-DD"));
+          searchParams.append("endDate", end.format("YYYY-MM-DD"));
+        }
+      }
+
+      if (params.filters) {
+        if (params.filters.nickname) {
+          searchParams.append("user", params.filters.nickname[0] as string);
+        }
+        if (params.filters.model_name) {
+          searchParams.append("model", params.filters.model_name[0] as string);
+        }
+      }
+
+      const response = await fetch(
+        `/api/v1/panel/records?${searchParams.toString()}`
+      );
+      const data = await response.json();
+
+      setRecords(data.records);
+      setTableParams({
+        ...params,
+        pagination: {
+          ...params.pagination,
+          total: data.total,
+        },
+      });
+
+      // 设置筛选选项
+      setUsers(data.users as string[]);
+      setModels(data.models as string[]);
+    } catch (error) {
+      toast.error(t("error.panel.fetchUsageDataFail"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRecords(tableParams);
+  }, []);
+
+  const handleTableChange = (
+    pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<UsageRecord> | SorterResult<UsageRecord>[]
+  ) => {
+    const newParams: TableParams = {
+      pagination,
+      filters,
+      sortField: Array.isArray(sorter) ? undefined : sorter.field?.toString(),
+      sortOrder: Array.isArray(sorter)
+        ? undefined
+        : sorter.order === null
+        ? undefined
+        : sorter.order,
+      dateRange: tableParams.dateRange,
+    };
+    setTableParams(newParams);
+    fetchRecords(newParams);
+  };
+
+  const handleExport = async () => {
+    try {
+      const response = await fetch("/api/v1/panel/records/export");
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `usage_records_${
+        new Date().toISOString().split("T")[0]
+      }.csv`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      toast.error(t("error.model.failToExport"));
+    }
+  };
+
+  // 修改表格样式
+  const tableClassName = `
+    [&_.ant-table]:!border-b-0 
+    [&_.ant-table-container]:!rounded-xl 
+    [&_.ant-table-container]:!border-hidden
+    [&_.ant-table-cell]:!border-border/40
+    [&_.ant-table-thead_.ant-table-cell]:!bg-muted/30
+    [&_.ant-table-thead_.ant-table-cell]:!text-muted-foreground
+    [&_.ant-table-thead_.ant-table-cell]:!font-medium
+    [&_.ant-table-thead_.ant-table-cell]:!text-sm
+    [&_.ant-table-thead]:!border-b
+    [&_.ant-table-thead]:border-border/40
+    [&_.ant-table-row]:!transition-colors
+    [&_.ant-table-row:hover>*]:!bg-muted/60
+    [&_.ant-table-tbody_.ant-table-row]:!cursor-pointer
+    [&_.ant-table-tbody_.ant-table-cell]:!py-4
+    [&_.ant-table-row:last-child>td]:!border-b-0
+    [&_.ant-table-cell:first-child]:!pl-6
+    [&_.ant-table-cell:last-child]:!pr-6
+  `;
+
+  return (
+    <>
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-24 space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-3xl font-bold tracking-tight">
+            {t("records.title")}
+          </h1>
+          <p className="text-muted-foreground">{t("records.description")}</p>
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          <Card className="p-6">
+            <div className="space-y-6">
+              <div className="flex flex-col sm:flex-row justify-between gap-4">
+                <div className="flex items-center gap-2">
+                  <CalendarOutlined className="text-primary" />
+                  <span className="font-medium">{t("records.dateRange")}</span>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <RangePicker
+                    locale={zhCN.DatePicker}
+                    className="!w-full sm:!w-auto"
+                    onChange={(dates) => {
+                      const newParams = {
+                        ...tableParams,
+                        dateRange: dates,
+                        pagination: { ...tableParams.pagination, current: 1 },
+                      };
+                      setTableParams(newParams);
+                      fetchRecords(newParams);
+                    }}
+                  />
+                  <Button
+                    variant="outline"
+                    className="flex items-center gap-2"
+                    onClick={handleExport}
+                  >
+                    <DownloadOutlined />
+                    {t("records.export")}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="overflow-x-auto">
+                <Table
+                  columns={columns}
+                  dataSource={records}
+                  rowKey="id"
+                  pagination={{
+                    ...tableParams.pagination,
+                    className: "!justify-end",
+                    showTotal: (total) =>
+                      `${t("common.total")} ${total} ${t("common.count")}`,
+                  }}
+                  loading={loading}
+                  onChange={handleTableChange}
+                  className={tableClassName}
+                  scroll={{ x: 800 }}
+                />
+              </div>
+            </div>
+          </Card>
+        </motion.div>
+      </div>
+    </>
+  );
+}

app/token/page.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useState } from "react";
+import { toast, Toaster } from "sonner";
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { HelpCircle, Loader2, Key, LockKeyhole } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern";
+
+export default function TokenPage() {
+  const [token, setToken] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [showToken, setShowToken] = useState(false);
+  const { t } = useTranslation("common");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token.trim()) {
+      toast.error(t("auth.accessTokenRequired"));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      localStorage.setItem("access_token", token);
+      const res = await fetch("/api/config", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (res.ok) {
+        toast.success(t("auth.loginSuccess"));
+        window.location.href = "/";
+      } else {
+        toast.error(t("auth.invalidToken"));
+        localStorage.removeItem("access_token");
+      }
+    } catch (error) {
+      toast.error(t("auth.verificationFailed"));
+      localStorage.removeItem("access_token");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 via-slate-50 to-teal-50 relative overflow-hidden">
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+
+      <AnimatedGridPattern
+        numSquares={30}
+        maxOpacity={0.03}
+        duration={3}
+        repeatDelay={1}
+        className={cn(
+          "[mask-image:radial-gradient(1200px_circle_at_center,white,transparent)]",
+          "absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-12 z-0"
+        )}
+      />
+
+      {/* 装饰性背景模糊圆 */}
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] bg-gradient-to-br from-rose-100/20 via-slate-100/20 to-teal-100/20 rounded-full blur-3xl opacity-40" />
+      <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-gradient-to-br from-pink-100/10 to-indigo-100/10 rounded-full blur-3xl opacity-30" />
+      <div className="absolute bottom-1/4 right-1/4 w-[700px] h-[700px] bg-gradient-to-br from-teal-100/10 to-slate-100/10 rounded-full blur-3xl opacity-30" />
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-md space-y-10 z-10 px-6"
+      >
+        <motion.div
+          initial={{ scale: 0.5, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="text-center space-y-6"
+        >
+          <div className="mx-auto w-20 h-20 flex items-center justify-center">
+            <img
+              src="/icon.png"
+              alt="Logo"
+              className="w-20 h-20 object-contain drop-shadow-xl"
+            />
+          </div>
+          <h1 className="text-3xl font-bold bg-gradient-to-br from-slate-800 via-slate-700 to-slate-800 bg-clip-text text-transparent">
+            {t("common.appName")}
+          </h1>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="backdrop-blur-[20px] bg-white/[0.08] p-10 rounded-[2.5rem] border border-white/20 shadow-2xl relative overflow-hidden 
+            hover:shadow-[0_8px_60px_rgba(120,119,198,0.15)] transition-shadow duration-300 group"
+        >
+          {/* 新增流光边框效果 */}
+          <div
+            className="absolute inset-0 rounded-[2.5rem] p-[2px] 
+            bg-gradient-to-br from-white/30 via-transparent to-transparent 
+            [mask:linear-gradient(black,black)_content-box,linear-gradient(black,black)] 
+            [mask-composite:xor] opacity-30 group-hover:opacity-50 transition-opacity"
+          ></div>
+
+          {/* 新增动态粒子背景 */}
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-slate-100/5 via-transparent to-transparent opacity-20" />
+
+          <motion.form
+            onSubmit={handleSubmit}
+            className="space-y-8 relative"
+            initial="hidden"
+            animate="visible"
+            variants={{
+              hidden: { opacity: 0 },
+              visible: {
+                opacity: 1,
+                transition: {
+                  staggerChildren: 0.1,
+                  delayChildren: 0.3,
+                },
+              },
+            }}
+          >
+            <motion.div
+              className="space-y-6"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+              }}
+            >
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-3">
+                  <Key className="h-5 w-5 text-slate-500/80" />
+                  <Label
+                    htmlFor="token"
+                    className="text-sm font-medium text-slate-600/90 tracking-wide"
+                  >
+                    {t("auth.accessToken")}
+                  </Label>
+                  <TooltipProvider delayDuration={300}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-4 w-4 text-slate-400 hover:text-slate-600 cursor-pointer transition-colors" />
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="right"
+                        className="max-w-[260px] text-xs"
+                      >
+                        {t("auth.accessTokenHelp")}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <div className="relative">
+                  <Input
+                    id="token"
+                    type={showToken ? "text" : "password"}
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    placeholder={t("auth.accessTokenPlaceholder")}
+                    className="w-full bg-white/20 border-2 border-slate-300/30 hover:border-slate-400/50 
+                      focus:border-slate-500/80 focus:ring-2 focus:ring-slate-400/20 
+                      transition-all duration-300 placeholder:text-slate-500/70 
+                      shadow-sm hover:shadow-md focus:shadow-lg pl-12
+                      [&:focus]:bg-white/30 backdrop-blur-sm rounded-xl h-14 text-base"
+                    autoComplete="off"
+                  />
+                  <LockKeyhole className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500/70" />
+                </div>
+              </div>
+            </motion.div>
+
+            <motion.div
+              className="flex items-center space-x-2"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 },
+              }}
+            >
+              <Checkbox
+                id="showToken"
+                checked={showToken}
+                onCheckedChange={(checked) => setShowToken(checked as boolean)}
+                className="text-slate-600 focus:ring-slate-500 border-2 border-slate-300/50 data-[state=checked]:border-slate-600 data-[state=checked]:bg-slate-600/90"
+              />
+              <Label
+                htmlFor="showToken"
+                className="text-sm font-medium text-slate-600 cursor-pointer select-none"
+              >
+                {t("auth.showToken")}
+              </Label>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: 0.5 }}
+            >
+              <Button
+                onClick={handleSubmit}
+                className="w-full h-14 font-semibold bg-gradient-to-r from-slate-700/90 to-slate-800/90 
+                  hover:from-slate-800 hover:to-slate-900 text-white/95 
+                  shadow-xl shadow-slate-500/10 hover:shadow-slate-500/20 
+                  transition-all duration-300 rounded-xl
+                  hover:scale-[0.98] transform-gpu
+                  border border-white/10
+                  hover:after:opacity-100
+                  relative overflow-hidden
+                  after:absolute after:inset-0 after:bg-[radial-gradient(200px_circle_at_center,_rgba(255,255,255,0.15)_0%,_transparent_80%)] 
+                  after:opacity-0 after:transition-opacity after:duration-300"
+                disabled={loading}
+                size="lg"
+              >
+                {loading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <Loader2 className="h-5 w-5 animate-spin" />
+                    {t("auth.verifying")}
+                  </span>
+                ) : (
+                  <span className="tracking-wide">{t("common.confirm")}</span>
+                )}
+              </Button>
+            </motion.div>
+          </motion.form>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

app/users/page.tsx

@@ -0,0 +1,980 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Table, Input, message, Modal } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useTranslation } from "react-i18next";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Trash2, Search, X, Unlock, Lock } from "lucide-react";
+import { EditableCell } from "@/components/editable-cell";
+import { motion, AnimatePresence } from "framer-motion";
+import { createPortal } from "react-dom";
+import { toast, Toaster } from "sonner";
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  balance: number;
+  deleted: boolean;
+}
+
+interface TFunction {
+  (key: string): string;
+  (key: string, options: { name: string }): string;
+}
+
+const TABLE_STYLES = `
+  [&_.ant-table]:!border-b-0 
+  [&_.ant-table-container]:!rounded-xl 
+  [&_.ant-table-container]:!border-hidden
+  [&_.ant-table-cell]:!border-border/40
+  [&_.ant-table-thead_.ant-table-cell]:!bg-muted/30
+  [&_.ant-table-thead_.ant-table-cell]:!text-muted-foreground
+  [&_.ant-table-thead_.ant-table-cell]:!font-medium
+  [&_.ant-table-thead_.ant-table-cell]:!text-sm
+  [&_.ant-table-thead]:!border-b
+  [&_.ant-table-thead]:border-border/40
+  [&_.ant-table-row]:!transition-colors
+  [&_.ant-table-row:hover>*]:!bg-muted/60
+  [&_.ant-table-tbody_.ant-table-row]:!cursor-pointer
+  [&_.ant-table-tbody_.ant-table-cell]:!py-4
+  [&_.ant-table-row:last-child>td]:!border-b-0
+  [&_.ant-table-cell:first-child]:!pl-6
+  [&_.ant-table-cell:last-child]:!pr-6
+  [&_.ant-pagination]:!px-6
+  [&_.ant-pagination]:!py-4
+  [&_.ant-pagination]:!border-t
+  [&_.ant-pagination]:border-border/40
+  [&_.ant-pagination-item]:!rounded-lg
+  [&_.ant-pagination-item]:!border-border/40
+  [&_.ant-pagination-item-active]:!bg-primary/10
+  [&_.ant-pagination-item-active]:!border-primary/30
+  [&_.ant-pagination-item-active>a]:!text-primary
+  [&_.ant-pagination-prev_.ant-pagination-item-link]:!rounded-lg
+  [&_.ant-pagination-next_.ant-pagination-item-link]:!rounded-lg
+  [&_.ant-pagination-prev_.ant-pagination-item-link]:!border-border/40
+  [&_.ant-pagination-next_.ant-pagination-item-link]:!border-border/40
+`;
+
+const formatBalance = (balance: number | string) => {
+  const num = typeof balance === "number" ? balance : Number(balance);
+  return isFinite(num) ? num.toFixed(4) : "0.0000";
+};
+
+const UserDetailsModal = ({
+  user,
+  onClose,
+  t,
+}: {
+  user: User | null;
+  onClose: () => void;
+  t: TFunction;
+}) => {
+  if (!user) return null;
+
+  return createPortal(
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center"
+      style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.95, opacity: 0 }}
+        transition={{ type: "spring", duration: 0.3 }}
+        className="w-full max-w-lg mx-auto px-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="bg-card rounded-2xl border border-border/50 shadow-xl overflow-hidden">
+          <div className="relative px-6 pt-6">
+            <motion.button
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="absolute right-4 top-4 p-2 rounded-full hover:bg-muted/80 transition-colors"
+              onClick={onClose}
+            >
+              <X className="w-4 h-4 text-muted-foreground" />
+            </motion.button>
+            <div className="flex items-center gap-4 mb-6">
+              <div className="h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center text-primary font-medium text-2xl">
+                {user.name.charAt(0).toUpperCase()}
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold mb-1">{user.name}</h3>
+                <span className="px-2.5 py-1 text-xs rounded-full bg-primary/10 text-primary font-medium">
+                  {user.role}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="px-6 pb-6">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="space-y-6"
+            >
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <div className="text-sm text-muted-foreground">
+                    {t("users.email")}
+                  </div>
+                  <div className="p-3 bg-muted/50 rounded-lg text-sm break-all">
+                    {user.email}
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm text-muted-foreground">
+                    {t("users.id")}
+                  </div>
+                  <div className="p-3 bg-muted/50 rounded-lg text-sm font-mono break-all">
+                    {user.id}
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="text-sm text-muted-foreground">
+                    {t("users.balance")}
+                  </div>
+                  <div className="p-3 bg-muted/50 rounded-lg text-sm">
+                    {formatBalance(user.balance)}
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>,
+    document.getElementById("modal-root") || document.body
+  );
+};
+
+const BlockConfirmModal = ({
+  user,
+  onClose,
+  onConfirm,
+  t,
+}: {
+  user: User | null;
+  onClose: () => void;
+  onConfirm: () => void;
+  t: TFunction;
+}) => {
+  if (!user) return null;
+
+  return createPortal(
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center"
+      style={{ position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0, y: 20 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        exit={{ scale: 0.95, opacity: 0, y: 20 }}
+        transition={{ type: "spring", duration: 0.3 }}
+        className="w-full max-w-md mx-auto px-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="bg-card rounded-2xl border border-border/50 shadow-xl overflow-hidden">
+          <div className="p-6">
+            <div className="flex items-center gap-4 mb-6">
+              <div
+                className={`
+                h-12 w-12 rounded-full flex items-center justify-center
+                ${
+                  user.deleted
+                    ? "bg-primary/10 text-primary"
+                    : "bg-destructive/10 text-destructive"
+                }
+              `}
+              >
+                {user.deleted ? (
+                  <Unlock className="w-6 h-6" />
+                ) : (
+                  <Lock className="w-6 h-6" />
+                )}
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold mb-1">
+                  {user.deleted
+                    ? t("users.blacklist.unblockConfirm.title")
+                    : t("users.blacklist.blockConfirm.title")}
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  {user.deleted
+                    ? t("users.blacklist.unblockConfirm.description", {
+                        name: user.name,
+                      })
+                    : t("users.blacklist.blockConfirm.description", {
+                        name: user.name,
+                      })}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <motion.button
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                onClick={onClose}
+                className="flex-1 px-4 py-2 rounded-xl bg-muted/60 hover:bg-muted/80 
+                  text-muted-foreground font-medium transition-colors"
+              >
+                {t("common.cancel")}
+              </motion.button>
+              <motion.button
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                onClick={onConfirm}
+                className={`
+                  flex-1 px-4 py-2 rounded-xl font-medium text-white
+                  transition-colors
+                  ${
+                    user.deleted
+                      ? "bg-primary hover:bg-primary/90"
+                      : "bg-destructive hover:bg-destructive/90"
+                  }
+                `}
+              >
+                {user.deleted
+                  ? t("users.blacklist.unblock")
+                  : t("users.blacklist.block")}
+              </motion.button>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>,
+    document.getElementById("modal-root") || document.body
+  );
+};
+
+// 修改 LoadingState 组件,添加 t 参数
+const LoadingState = ({ t }: { t: TFunction }) => (
+  <div className="flex flex-col items-center justify-center py-12 px-4">
+    <div className="h-12 w-12 rounded-full border-4 border-primary/10 border-t-primary animate-spin mb-4" />
+    <h3 className="text-lg font-medium text-foreground/70">
+      {t("users.loading")}
+    </h3>
+  </div>
+);
+
+export default function UsersPage() {
+  const { t } = useTranslation("common");
+  const [users, setUsers] = useState<User[]>([]);
+  const [blacklistUsers, setBlacklistUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [editingKey, setEditingKey] = useState<string>("");
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);
+  const [sortInfo, setSortInfo] = useState<{
+    field: string | null;
+    order: "ascend" | "descend" | null;
+  }>({
+    field: null,
+    order: null,
+  });
+  const [searchText, setSearchText] = useState("");
+  const [showBlacklist, setShowBlacklist] = useState(false);
+  const [blacklistCurrentPage, setBlacklistCurrentPage] = useState(1);
+  const [blacklistTotal, setBlacklistTotal] = useState(0);
+
+  const fetchUsers = async (page: number, isBlacklist: boolean = false) => {
+    setLoading(true);
+    try {
+      let url = `/api/users?page=${page}&deleted=${isBlacklist}`;
+      if (sortInfo.field && sortInfo.order) {
+        url += `&sortField=${sortInfo.field}&sortOrder=${sortInfo.order}`;
+      }
+      if (searchText) {
+        url += `&search=${encodeURIComponent(searchText)}`;
+      }
+
+      const res = await fetch(url);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      if (isBlacklist) {
+        setBlacklistUsers(data.users);
+        setBlacklistTotal(data.total);
+      } else {
+        setUsers(data.users);
+        setTotal(data.total);
+      }
+    } catch (err) {
+      console.error(err);
+      message.error(t("users.message.fetchError"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchBlacklistTotal = async () => {
+    try {
+      const res = await fetch(`/api/users?page=1&deleted=true&pageSize=1`);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      setBlacklistTotal(data.total);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers(currentPage, false);
+    fetchBlacklistTotal();
+  }, [currentPage, sortInfo, searchText]);
+
+  useEffect(() => {
+    if (showBlacklist) {
+      fetchUsers(blacklistCurrentPage, true);
+    }
+  }, [blacklistCurrentPage, showBlacklist, sortInfo, searchText]);
+
+  const handleUpdateBalance = async (userId: string, newBalance: number) => {
+    try {
+      const res = await fetch(`/api/users/${userId}/balance`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ balance: newBalance }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+
+      // 立即更新本地数据
+      setUsers(
+        users.map((user) =>
+          user.id === userId ? { ...user, balance: newBalance } : user
+        )
+      );
+
+      // 然后再显示成功提示并清除编辑状态
+      toast.success(t("users.message.updateBalance.success"));
+      setEditingKey("");
+
+      // 最后再重新获取完整列表
+      fetchUsers(currentPage, false);
+    } catch (err) {
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t("users.message.updateBalance.error")
+      );
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    if (!userToDelete) return;
+
+    try {
+      const res = await fetch(`/api/users/${userToDelete.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          deleted: !userToDelete.deleted,
+        }),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.message);
+      }
+
+      if (!userToDelete.deleted) {
+        const newTotal = total - 1;
+        const maxPage = Math.ceil(newTotal / 20);
+        if (currentPage > maxPage && maxPage > 0) {
+          setCurrentPage(maxPage);
+        } else {
+          fetchUsers(currentPage, false);
+        }
+        setBlacklistTotal((prev) => prev + 1);
+      } else {
+        const newBlacklistTotal = blacklistTotal - 1;
+        const maxBlacklistPage = Math.ceil(newBlacklistTotal / 20);
+        if (blacklistCurrentPage > maxBlacklistPage && maxBlacklistPage > 0) {
+          setBlacklistCurrentPage(maxBlacklistPage);
+        } else {
+          fetchUsers(blacklistCurrentPage, true);
+        }
+        setBlacklistTotal((prev) => prev - 1);
+      }
+
+      if (userToDelete.deleted) {
+        fetchUsers(currentPage, false);
+      } else if (showBlacklist) {
+        fetchUsers(blacklistCurrentPage, true);
+      }
+
+      toast.success(
+        userToDelete.deleted
+          ? t("users.message.unblockSuccess")
+          : t("users.message.blockSuccess")
+      );
+    } catch (err) {
+      toast.error(
+        userToDelete.deleted
+          ? t("users.message.unblockError")
+          : t("users.message.blockError")
+      );
+    } finally {
+      setUserToDelete(null);
+    }
+  };
+
+  const UserCard = ({ record }: { record: User }) => {
+    return (
+      <div
+        className="p-4 sm:p-6 bg-card rounded-xl border border-border/40 
+        shadow-sm hover:shadow-md transition-all duration-200"
+      >
+        <div className="flex items-start gap-4">
+          <div
+            className="flex-1 min-w-0 flex items-start gap-4 cursor-pointer"
+            onClick={() => setSelectedUser(record)}
+          >
+            <div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary font-medium text-lg shrink-0">
+              {record.name.charAt(0).toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0 space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <h3 className="text-base font-semibold tracking-tight max-w-[160px] truncate">
+                  {record.name}
+                </h3>
+                <span className="px-2 py-0.5 text-xs rounded-full bg-primary/10 text-primary font-medium">
+                  {record.role}
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground max-w-[240px] truncate">
+                {record.email}
+              </p>
+            </div>
+          </div>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setUserToDelete(record);
+            }}
+            className={`
+              shrink-0
+              p-2
+              rounded-md
+              transition-colors
+              ${
+                record.deleted
+                  ? "text-muted-foreground/60 hover:text-muted-foreground"
+                  : "text-muted-foreground/60 hover:text-muted-foreground"
+              }
+            `}
+          >
+            {record.deleted ? (
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 15l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                />
+              </svg>
+            )}
+          </button>
+        </div>
+
+        <div className="mt-6">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">
+              {t("users.balance")}
+            </span>
+            <div className="flex-1 max-w-[200px]">
+              <EditableCell
+                value={record.balance}
+                isEditing={record.id === editingKey}
+                onEdit={() => setEditingKey(record.id)}
+                onSubmit={(value) => handleUpdateBalance(record.id, value)}
+                onCancel={() => setEditingKey("")}
+                t={t}
+                validateValue={(value) => ({
+                  isValid: isFinite(value),
+                  errorMessage: t("error.invalidNumber"),
+                  maxValue: 999999.9999,
+                })}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const getColumns = (isBlacklist: boolean = false): ColumnsType<User> => {
+    const baseColumns: ColumnsType<User> = [
+      {
+        title: t("users.userInfo"),
+        key: "userInfo",
+        width: "65%",
+        render: (_, record) => (
+          <div
+            className="flex items-center gap-4 cursor-pointer py-1"
+            onClick={() => setSelectedUser(record)}
+          >
+            <div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary font-medium">
+              {record.name.charAt(0).toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="font-medium max-w-[200px] truncate">
+                  {record.name}
+                </span>
+                <span className="px-2 py-0.5 text-xs rounded-full bg-primary/10 text-primary font-medium">
+                  {record.role}
+                </span>
+              </div>
+              <div className="text-sm text-muted-foreground max-w-[280px] truncate">
+                {record.email}
+              </div>
+            </div>
+          </div>
+        ),
+      },
+      {
+        title: t("users.balance"),
+        dataIndex: "balance",
+        key: "balance",
+        width: "35%",
+        align: "left",
+        sorter: {
+          compare: (a, b) => a.balance - b.balance,
+          multiple: 1,
+        },
+        render: (balance: number, record) => {
+          const isEditing = record.id === editingKey;
+
+          return (
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <EditableCell
+                  value={balance}
+                  isEditing={isEditing}
+                  onEdit={() => setEditingKey(record.id)}
+                  onSubmit={(value) => handleUpdateBalance(record.id, value)}
+                  onCancel={() => setEditingKey("")}
+                  t={t}
+                  validateValue={(value) => ({
+                    isValid: isFinite(value),
+                    errorMessage: t("error.invalidNumber"),
+                    maxValue: 999999.9999,
+                  })}
+                />
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        title: t("users.actions"),
+        key: "actions",
+        width: "48px",
+        align: "center",
+        render: (_, record) => (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setUserToDelete(record);
+            }}
+            className={`
+              p-2
+              rounded-md
+              transition-colors
+              ${
+                record.deleted
+                  ? "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/40"
+                  : "text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/40"
+              }
+            `}
+          >
+            {record.deleted ? (
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 15l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                />
+              </svg>
+            )}
+          </button>
+        ),
+      },
+    ];
+
+    return baseColumns;
+  };
+
+  const SearchBar = () => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [searchValue, setSearchValue] = useState(searchText);
+
+    const handleSearch = () => {
+      setSearchText(searchValue);
+    };
+
+    const handleClear = () => {
+      setSearchValue("");
+      setTimeout(() => {
+        setSearchText("");
+      }, 0);
+    };
+
+    return (
+      <motion.div
+        initial={false}
+        animate={{
+          boxShadow: isFocused
+            ? "0 4px 24px rgba(0, 0, 0, 0.08)"
+            : "0 2px 8px rgba(0, 0, 0, 0.04)",
+        }}
+        className="relative w-full rounded-2xl bg-card border border-border/40 overflow-hidden"
+      >
+        <motion.div
+          initial={false}
+          animate={{
+            height: "100%",
+            width: "3px",
+            left: 0,
+            opacity: isFocused ? 1 : 0,
+          }}
+          className="absolute top-0 bg-primary"
+          style={{ originY: 0 }}
+          transition={{ type: "spring", stiffness: 500, damping: 30 }}
+        />
+
+        <div className="relative flex items-center">
+          <div className="absolute left-4 text-muted-foreground/60 pointer-events-none z-10">
+            <Search className="h-4 w-4" />
+          </div>
+
+          <Input
+            type="search"
+            autoComplete="off"
+            spellCheck="false"
+            placeholder={t("users.searchPlaceholder")}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleSearch();
+              }
+            }}
+            className="
+              w-full
+              pl-12
+              pr-24
+              py-3
+              h-12
+              leading-normal
+              bg-transparent
+              border-0
+              ring-0
+              focus:ring-0
+              placeholder:text-muted-foreground/50
+              text-base
+              [&::-webkit-search-cancel-button]:hidden
+            "
+            allowClear={{
+              clearIcon: searchValue ? (
+                <motion.button
+                  initial={{ scale: 0.5, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.5, opacity: 0 }}
+                  className="p-1.5 hover:bg-muted/80 rounded-full transition-colors z-10 
+                    bg-muted/60 text-muted-foreground/70"
+                  onClick={handleClear}
+                >
+                  <X className="h-3 w-3" />
+                </motion.button>
+              ) : null,
+            }}
+          />
+
+          <div className="absolute right-4 flex items-center pointer-events-auto z-20">
+            <button
+              onClick={handleSearch}
+              className="text-xs bg-primary/10 text-primary hover:bg-primary/20 
+                transition-colors px-3 py-1.5 rounded-full font-medium"
+            >
+              {t("users.search")}
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    );
+  };
+
+  // 添加空状态组件
+  const EmptyState = ({ searchText }: { searchText: string }) => (
+    <div className="flex flex-col items-center justify-center py-12 px-4">
+      <div className="h-12 w-12 rounded-full bg-muted/40 flex items-center justify-center mb-4">
+        <Search className="h-6 w-6 text-muted-foreground/50" />
+      </div>
+      <h3 className="text-lg font-medium text-foreground mb-2">
+        {t("users.noResults.title")}
+      </h3>
+      <p className="text-sm text-muted-foreground text-center max-w-[300px]">
+        {searchText
+          ? t("users.noResults.withFilter", { filter: searchText })
+          : t("users.noResults.default")}
+      </p>
+    </div>
+  );
+
+  return (
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pt-24 space-y-8">
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+      <div className="space-y-4">
+        <h1 className="text-3xl font-bold tracking-tight">
+          {t("users.title")}
+        </h1>
+        <p className="text-muted-foreground">{t("users.description")}</p>
+      </div>
+
+      <SearchBar />
+
+      <div className="hidden sm:block">
+        <div className="rounded-xl border border-border/40 bg-card shadow-sm overflow-hidden">
+          {loading ? (
+            <LoadingState t={t} />
+          ) : users.filter((user) => !user.deleted).length > 0 ? (
+            <Table
+              columns={getColumns(false)}
+              dataSource={users
+                .filter((user) => !user.deleted)
+                .map((user) => ({
+                  key: user.id,
+                  ...user,
+                  balance: Number(user.balance),
+                }))}
+              rowKey="id"
+              loading={false}
+              className={TABLE_STYLES}
+              pagination={{
+                total,
+                pageSize: 20,
+                current: currentPage,
+                onChange: (page) => {
+                  setCurrentPage(page);
+                  setEditingKey("");
+                },
+                showTotal: (total) => (
+                  <span className="text-sm text-muted-foreground">
+                    {t("users.total")} {total} {t("users.totalRecords")}
+                  </span>
+                ),
+              }}
+              scroll={{ x: 500 }}
+              onChange={(pagination, filters, sorter) => {
+                if (Array.isArray(sorter)) return;
+                setSortInfo({
+                  field: sorter.columnKey as string,
+                  order: sorter.order || null,
+                });
+              }}
+            />
+          ) : (
+            <EmptyState searchText={searchText} />
+          )}
+        </div>
+      </div>
+
+      <div className="sm:hidden">
+        <div className="grid gap-4">
+          {loading ? (
+            <LoadingState t={t} />
+          ) : users.filter((user) => !user.deleted).length > 0 ? (
+            users
+              .filter((user) => !user.deleted)
+              .map((user) => <UserCard key={user.id} record={user} />)
+          ) : (
+            <EmptyState searchText={searchText} />
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <button
+          onClick={() => setShowBlacklist(!showBlacklist)}
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <svg
+            className={`w-4 h-4 transition-transform ${
+              showBlacklist ? "rotate-180" : ""
+            }`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+          {t("users.blacklist.title")} ({blacklistTotal})
+        </button>
+
+        {showBlacklist && (
+          <div className="space-y-4">
+            <div className="hidden sm:block">
+              <div className="rounded-xl border border-border/40 bg-card shadow-sm overflow-hidden">
+                {loading ? (
+                  <LoadingState t={t} />
+                ) : blacklistUsers.length > 0 ? (
+                  <Table
+                    columns={getColumns(true)}
+                    dataSource={blacklistUsers.map((user) => ({
+                      key: user.id,
+                      ...user,
+                      balance: Number(user.balance),
+                    }))}
+                    rowKey="id"
+                    loading={false}
+                    className={TABLE_STYLES}
+                    pagination={{
+                      total: blacklistTotal,
+                      pageSize: 20,
+                      current: blacklistCurrentPage,
+                      onChange: (page) => {
+                        setBlacklistCurrentPage(page);
+                        setEditingKey("");
+                      },
+                      showTotal: (total) => (
+                        <span className="text-sm text-muted-foreground">
+                          {t("users.total")} {total} {t("users.totalRecords")}
+                        </span>
+                      ),
+                    }}
+                  />
+                ) : (
+                  <EmptyState searchText={searchText} />
+                )}
+              </div>
+            </div>
+
+            <div className="sm:hidden">
+              <div className="grid gap-4">
+                {loading ? (
+                  <LoadingState t={t} />
+                ) : blacklistUsers.length > 0 ? (
+                  blacklistUsers.map((user) => (
+                    <UserCard key={user.id} record={user} />
+                  ))
+                ) : (
+                  <EmptyState searchText={searchText} />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <AnimatePresence>
+        {selectedUser && (
+          <UserDetailsModal
+            user={selectedUser}
+            onClose={() => setSelectedUser(null)}
+            t={t}
+          />
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {userToDelete && (
+          <BlockConfirmModal
+            user={userToDelete}
+            onClose={() => setUserToDelete(null)}
+            onConfirm={handleDeleteUser}
+            t={t}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/AuthCheck.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+export default function AuthCheck({ children }: { children: React.ReactNode }) {
+  const [isAuthorized, setIsAuthorized] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      // 如果已经在token页面，不需要检查
+      if (pathname === "/token") {
+        setIsLoading(false);
+        setIsAuthorized(true);
+        return;
+      }
+
+      const token = localStorage.getItem("access_token");
+      if (!token) {
+        router.push("/token");
+        return;
+      }
+
+      try {
+        const res = await fetch("/api/config", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!res.ok) {
+          localStorage.removeItem("access_token");
+          router.push("/token");
+          return;
+        }
+
+        setIsAuthorized(true);
+      } catch (error) {
+        localStorage.removeItem("access_token");
+        router.push("/token");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    checkAuth();
+  }, [router, pathname]);
+
+  // 显示加载状态或空白页面
+  if (isLoading || !isAuthorized) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

components/DatabaseBackup.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { toast, Toaster } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { DatabaseIcon, DownloadIcon, UploadIcon, Loader2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface DatabaseBackupProps {
+  open: boolean;
+  onClose: () => void;
+  token?: string;
+}
+
+export default function DatabaseBackup({
+  open,
+  onClose,
+  token,
+}: DatabaseBackupProps) {
+  const { t } = useTranslation("common");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isExporting, setIsExporting] = useState(false);
+  const [isImporting, setIsImporting] = useState(false);
+
+  const handleExport = async () => {
+    if (!token) {
+      toast.error(t("auth.unauthorized"));
+      return;
+    }
+
+    setIsExporting(true);
+    try {
+      const response = await fetch("/api/v1/panel/database/export", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(t("backup.export.error"));
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `openwebui_monitor_backup_${
+        new Date().toISOString().split("T")[0]
+      }.json`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success(t("backup.export.success"));
+    } catch (error) {
+      console.error(t("backup.export.error"), error);
+      toast.error(t("backup.export.error"));
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    if (!token) {
+      toast.error(t("auth.unauthorized"));
+      return;
+    }
+
+    setIsImporting(true);
+    try {
+      const content = await file.text();
+      const data = JSON.parse(content);
+
+      const response = await fetch("/api/v1/panel/database/import", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        throw new Error(t("backup.import.error"));
+      }
+
+      const result = await response.json();
+
+      if (result.success) {
+        toast.success(t("backup.import.success"));
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      } else {
+        throw new Error(result.error || t("backup.import.error"));
+      }
+    } catch (err) {
+      console.error(t("backup.import.error"), err);
+      toast.error(
+        err instanceof Error ? err.message : t("backup.import.error")
+      );
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+      {open && (
+        <Dialog open={open} onOpenChange={onClose}>
+          <DialogContent className="w-[calc(100%-2rem)] !max-w-[400px] rounded-lg backdrop-blur-lg bg-white/90 border border-white/20 shadow-xl md:px-6">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+            >
+              <DialogHeader>
+                <div className="flex items-center gap-2">
+                  <motion.div
+                    initial={{ scale: 0.8, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ delay: 0.1 }}
+                    className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-primary/10"
+                  >
+                    <DatabaseIcon className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+                  </motion.div>
+                  <DialogTitle className="text-base sm:text-lg">
+                    {t("backup.title")}
+                  </DialogTitle>
+                </div>
+                <DialogDescription className="pt-2 text-sm">
+                  {t("backup.description")}
+                </DialogDescription>
+              </DialogHeader>
+
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.2 }}
+                className="grid grid-cols-1 gap-3 sm:gap-4 py-3 sm:py-4"
+              >
+                <Card
+                  className={cn(
+                    "cursor-pointer transition-all duration-300 hover:bg-accent/5",
+                    "group relative overflow-hidden backdrop-blur-sm bg-white/50 border-white/20",
+                    "hover:shadow-lg hover:scale-[1.02] transform-gpu"
+                  )}
+                  onClick={handleExport}
+                >
+                  <CardContent className="flex items-center gap-3 sm:gap-4 p-4 sm:p-6">
+                    <div className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors duration-300">
+                      {isExporting ? (
+                        <Loader2 className="h-5 w-5 sm:h-6 sm:w-6 text-primary animate-spin" />
+                      ) : (
+                        <DownloadIcon className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
+                      )}
+                    </div>
+                    <div className="space-y-0.5 sm:space-y-1">
+                      <h3 className="font-medium leading-none text-sm sm:text-base group-hover:text-primary transition-colors duration-300">
+                        {t("backup.export.title")}
+                      </h3>
+                      <p className="text-xs sm:text-sm text-muted-foreground group-hover:text-primary/80 transition-colors duration-300">
+                        {t("backup.export.description")}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card
+                  className={cn(
+                    "cursor-pointer transition-all duration-300 hover:bg-accent/5",
+                    "group relative overflow-hidden backdrop-blur-sm bg-white/50 border-white/20",
+                    "hover:shadow-lg hover:scale-[1.02] transform-gpu"
+                  )}
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".json"
+                    onChange={handleImport}
+                    className="hidden"
+                  />
+                  <CardContent className="flex items-center gap-3 sm:gap-4 p-4 sm:p-6">
+                    <div className="flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors duration-300">
+                      {isImporting ? (
+                        <Loader2 className="h-5 w-5 sm:h-6 sm:w-6 text-primary animate-spin" />
+                      ) : (
+                        <UploadIcon className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
+                      )}
+                    </div>
+                    <div className="space-y-0.5 sm:space-y-1">
+                      <h3 className="font-medium leading-none text-sm sm:text-base group-hover:text-primary transition-colors duration-300">
+                        {t("backup.import.title")}
+                      </h3>
+                      <p className="text-xs sm:text-sm text-muted-foreground group-hover:text-primary/80 transition-colors duration-300">
+                        {t("backup.import.description")}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </motion.div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </AnimatePresence>
+  );
+}

components/Header.tsx

@@ -0,0 +1,543 @@
+"use client";
+
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { Dropdown, Modal } from "antd";
+import { toast, Toaster } from "sonner";
+import type { MenuProps } from "antd";
+import {
+  Copy,
+  LogOut,
+  Database,
+  Github,
+  Menu,
+  Globe,
+  X,
+  Settings,
+  ChevronDown,
+} from "lucide-react";
+import DatabaseBackup from "./DatabaseBackup";
+import { APP_VERSION } from "@/lib/version";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { createRoot } from "react-dom/client";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { FiDatabase, FiUsers, FiBarChart2 } from "react-icons/fi";
+
+export default function Header() {
+  const { t, i18n } = useTranslation("common");
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isBackupModalOpen, setIsBackupModalOpen] = useState(false);
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isSettingsExpanded, setIsSettingsExpanded] = useState(false);
+
+  // 将函数声明移到前面
+  const handleLanguageChange = async (newLang: string) => {
+    await i18n.changeLanguage(newLang);
+    localStorage.setItem("language", newLang);
+  };
+
+  // 如果是token页面，只显示语言切换按钮
+  const isTokenPage = pathname === "/token";
+
+  if (isTokenPage) {
+    return (
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16">
+          <div className="h-full flex items-center justify-between">
+            <div className="text-xl font-semibold bg-gradient-to-r from-gray-900 via-indigo-800 to-gray-900 bg-clip-text text-transparent">
+              {t("common.appName")}
+            </div>
+            <button
+              className="p-2 rounded-lg hover:bg-gray-50/80 transition-colors relative group"
+              onClick={() =>
+                handleLanguageChange(i18n.language === "zh" ? "en" : "zh")
+              }
+            >
+              <Globe className="w-5 h-5 text-gray-600 group-hover:text-blue-500 transition-colors" />
+              <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-medium bg-gray-100 text-gray-600 rounded-full border border-gray-200 shadow-sm px-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                {i18n.language === "zh"
+                  ? t("header.language.zh")
+                  : t("header.language.en")}
+              </span>
+            </button>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  const [apiKey, setApiKey] = useState(t("common.loading"));
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    setAccessToken(token);
+
+    if (!token) {
+      router.push("/token");
+      return;
+    }
+
+    // 验证token的有效性
+    fetch("/api/config", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+      .then((res) => {
+        if (!res.ok) {
+          // 如果token无效，清除token并重定向
+          localStorage.removeItem("access_token");
+          router.push("/token");
+          return;
+        }
+        return res.json();
+      })
+      .then((data) => {
+        if (data) {
+          setApiKey(data.apiKey);
+        }
+      })
+      .catch(() => {
+        setApiKey(t("common.error"));
+        // 发生错误时也清除token并重定向
+        localStorage.removeItem("access_token");
+        router.push("/token");
+      });
+  }, [router, t]);
+
+  const handleCopyApiKey = () => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      toast.error(t("header.messages.unauthorized"));
+      return;
+    }
+    navigator.clipboard.writeText(apiKey);
+    toast.success(t("header.messages.apiKeyCopied"));
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("access_token");
+    window.location.href = "/token";
+  };
+
+  const checkUpdate = async () => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      toast.error(t("header.messages.unauthorized"));
+      return;
+    }
+
+    setIsCheckingUpdate(true);
+    try {
+      const response = await fetch(
+        "https://api.github.com/repos/variantconst/openwebui-monitor/releases/latest"
+      );
+      const data = await response.json();
+      const latestVersion = data.tag_name;
+
+      if (!latestVersion) {
+        throw new Error(t("header.messages.getVersionFailed"));
+      }
+
+      const currentVer = APP_VERSION.replace(/^v/, "");
+      const latestVer = latestVersion.replace(/^v/, "");
+
+      if (currentVer === latestVer) {
+        toast.success(`${t("header.messages.latestVersion")} v${APP_VERSION}`);
+      } else {
+        return new Promise((resolve) => {
+          const dialog = document.createElement("div");
+          document.body.appendChild(dialog);
+
+          const DialogComponent = () => {
+            const [open, setOpen] = useState(true);
+
+            const handleClose = () => {
+              setOpen(false);
+              document.body.removeChild(dialog);
+              resolve(null);
+            };
+
+            const handleUpdate = () => {
+              window.open(
+                "https://github.com/VariantConst/OpenWebUI-Monitor/releases/latest",
+                "_blank"
+              );
+              handleClose();
+            };
+
+            return (
+              <Dialog open={open} onOpenChange={handleClose}>
+                <DialogContent className="w-[calc(100%-2rem)] !max-w-[70vw] sm:max-w-[425px] rounded-lg">
+                  <DialogHeader>
+                    <div className="flex items-center gap-2">
+                      <div className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-primary/10">
+                        <Github className="w-4 h-4 text-gray-500" />
+                      </div>
+                      <DialogTitle className="text-base sm:text-lg">
+                        {t("header.update.newVersion")}
+                      </DialogTitle>
+                    </div>
+                  </DialogHeader>
+                  <div className="flex flex-col gap-3 sm:gap-4 py-3 sm:py-4">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm sm:text-base text-muted-foreground">
+                        {t("header.update.currentVersion")}
+                      </span>
+                      <span className="font-mono text-sm sm:text-base">
+                        v{APP_VERSION}
+                      </span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm sm:text-base text-muted-foreground">
+                        {t("header.update.latestVersion")}
+                      </span>
+                      <span className="font-mono text-sm sm:text-base text-primary">
+                        {latestVersion}
+                      </span>
+                    </div>
+                  </div>
+                  <DialogFooter className="gap-2 sm:gap-3">
+                    <Button
+                      variant="outline"
+                      onClick={handleClose}
+                      className="h-8 sm:h-10 text-sm sm:text-base"
+                    >
+                      {t("header.update.skipUpdate")}
+                    </Button>
+                    <Button
+                      onClick={handleUpdate}
+                      className="h-8 sm:h-10 text-sm sm:text-base bg-primary hover:bg-primary/90 text-primary-foreground"
+                    >
+                      {t("header.update.goToUpdate")}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            );
+          };
+
+          createRoot(dialog).render(<DialogComponent />);
+        });
+      }
+    } catch (error) {
+      toast.error(t("header.messages.updateCheckFailed"));
+      console.error(t("header.messages.updateCheckFailed"), error);
+    } finally {
+      setIsCheckingUpdate(false);
+    }
+  };
+
+  const navigationItems = [
+    {
+      path: "/models",
+      icon: <FiDatabase className="w-5 h-5" />,
+      label: t("home.features.models.title"),
+      color: "from-blue-500/10 to-indigo-500/10",
+      hoverColor: "group-hover:text-blue-600",
+    },
+    {
+      path: "/users",
+      icon: <FiUsers className="w-5 h-5" />,
+      label: t("home.features.users.title"),
+      color: "from-rose-500/10 to-pink-500/10",
+      hoverColor: "group-hover:text-rose-600",
+    },
+    {
+      path: "/panel",
+      icon: <FiBarChart2 className="w-5 h-5" />,
+      label: t("home.features.stats.title"),
+      color: "from-emerald-500/10 to-teal-500/10",
+      hoverColor: "group-hover:text-emerald-600",
+    },
+  ];
+
+  const settingsItems = [
+    {
+      icon: <Copy className="w-5 h-5" />,
+      label: t("header.menu.copyApiKey"),
+      onClick: handleCopyApiKey,
+      color: "from-blue-500/20 to-indigo-500/20",
+    },
+    {
+      icon: <Database className="w-5 h-5" />,
+      label: t("header.menu.dataBackup"),
+      onClick: () => setIsBackupModalOpen(true),
+      color: "from-rose-500/20 to-pink-500/20",
+    },
+    {
+      icon: <Github className="w-5 h-5" />,
+      label: t("header.menu.checkUpdate"),
+      onClick: checkUpdate,
+      color: "from-emerald-500/20 to-teal-500/20",
+    },
+    {
+      icon: <LogOut className="w-5 h-5" />,
+      label: t("header.menu.logout"),
+      onClick: handleLogout,
+      color: "from-orange-500/20 to-red-500/20",
+    },
+  ];
+
+  const menuItems = [
+    // 在小屏幕上将导航项添加到菜单中，但需要特殊处理
+    ...(!isTokenPage
+      ? navigationItems.map((item) => ({
+          ...item,
+          onClick: () => router.push(item.path), // 为导航项添加 onClick 处理
+        }))
+      : []),
+    {
+      icon: <Copy className="w-5 h-5" />,
+      label: t("header.menu.copyApiKey"),
+      onClick: handleCopyApiKey,
+      color: "from-blue-500/20 to-indigo-500/20",
+    },
+    {
+      icon: <Database className="w-5 h-5" />,
+      label: t("header.menu.dataBackup"),
+      onClick: () => setIsBackupModalOpen(true),
+      color: "from-rose-500/20 to-pink-500/20",
+    },
+    {
+      icon: <Github className="w-5 h-5" />,
+      label: t("header.menu.checkUpdate"),
+      onClick: checkUpdate,
+      color: "from-emerald-500/20 to-teal-500/20",
+    },
+    {
+      icon: <LogOut className="w-5 h-5" />,
+      label: t("header.menu.logout"),
+      onClick: handleLogout,
+      color: "from-orange-500/20 to-red-500/20",
+    },
+  ];
+
+  // 在navigationItems数组后添加
+  const actionItems = [
+    {
+      icon: <Globe className="w-5 h-5" />,
+      label: i18n.language === "zh" ? "简体中文" : "English",
+      onClick: () => handleLanguageChange(i18n.language === "zh" ? "en" : "zh"),
+      color: "from-gray-100 to-gray-50",
+      hoverColor: "group-hover:text-gray-900",
+    },
+    {
+      icon: <Settings className="w-5 h-5" />,
+      label: t("header.menu.settings"),
+      onClick: () => setIsMenuOpen(true),
+      color: "from-gray-100 to-gray-50",
+      hoverColor: "group-hover:text-gray-900",
+    },
+  ];
+
+  return (
+    <>
+      <Toaster
+        richColors
+        position="top-center"
+        theme="light"
+        expand
+        duration={1500}
+      />
+      <motion.header
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 shadow-sm"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 h-16">
+          <div className="h-full flex items-center justify-between">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.1 }}
+            >
+              <Link
+                href="/"
+                className="text-xl font-semibold bg-gradient-to-r from-gray-900 via-indigo-800 to-gray-900 bg-clip-text text-transparent"
+              >
+                {t("common.appName")}
+              </Link>
+            </motion.div>
+
+            {/* 右侧内容 */}
+            <div className="flex items-center gap-4">
+              {/* 导航项 - 仅在大屏幕显示 */}
+              {!isTokenPage && (
+                <div className="hidden md:flex items-center gap-3">
+                  {navigationItems.map((item) => (
+                    <Link
+                      key={item.path}
+                      href={item.path}
+                      className="group relative"
+                    >
+                      <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r hover:bg-gradient-to-br transition-all duration-300 relative">
+                        <div
+                          className={`absolute inset-0 bg-gradient-to-r ${item.color} rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300`}
+                        />
+                        <span
+                          className={`relative z-10 ${item.hoverColor} transition-colors duration-300`}
+                        >
+                          {item.icon}
+                        </span>
+                        <span className="relative z-10 text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors duration-300">
+                          {item.label}
+                        </span>
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+
+              {/* 语言切换和菜单按钮 */}
+              <div className="flex items-center gap-3">
+                {actionItems.map((item, index) => (
+                  <button
+                    key={index}
+                    onClick={item.onClick}
+                    className="group relative"
+                  >
+                    <div className="flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r hover:bg-gradient-to-br transition-all duration-300 relative">
+                      <div
+                        className={`absolute inset-0 bg-gradient-to-r ${item.color} rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300`}
+                      />
+                      <span
+                        className={`relative z-10 ${item.hoverColor} transition-colors duration-300`}
+                      >
+                        {item.icon}
+                      </span>
+                      <span className="relative z-10 hidden md:block text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors duration-300">
+                        {item.label}
+                      </span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.header>
+
+      <AnimatePresence>
+        {isMenuOpen && (
+          <>
+            {/* 背景遮罩 */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 md:bg-black/10"
+              onClick={() => setIsMenuOpen(false)}
+            />
+
+            {/* 菜单面板 - 响应式布局 */}
+            <motion.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 25, stiffness: 200 }}
+              className="fixed top-0 right-0 h-full bg-white/95 backdrop-blur-xl z-50 w-full max-w-[480px] md:top-[calc(4rem+0.5rem)] md:h-auto md:mr-6 md:rounded-2xl md:border md:shadow-xl md:max-h-[calc(100vh-5rem)] overflow-hidden shadow-lg border-l border-gray-100/50"
+            >
+              {/* 内容容器 */}
+              <div className="relative h-full flex flex-col">
+                {/* 顶部栏 */}
+                <div className="flex items-center justify-between p-4 border-b border-gray-100/50">
+                  <h2 className="text-lg font-medium bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
+                    {t("header.menu.settings")}
+                  </h2>
+                  <button
+                    onClick={() => setIsMenuOpen(false)}
+                    className="p-1.5 rounded-lg hover:bg-gray-100/80 transition-all duration-200"
+                  >
+                    <X className="w-5 h-5 text-gray-500" />
+                  </button>
+                </div>
+
+                {/* 菜单项列表 */}
+                <div className="flex-1 overflow-y-auto p-2">
+                  <div className="space-y-1">
+                    {/* 导航项 - 仅在移动端显示 */}
+                    <div className="md:hidden space-y-1">
+                      {navigationItems.map((item, index) => (
+                        <motion.button
+                          key={item.path}
+                          initial={{ opacity: 0, x: 20 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{ delay: index * 0.05 }}
+                          onClick={() => {
+                            setIsMenuOpen(false);
+                            router.push(item.path);
+                          }}
+                          className="w-full group"
+                        >
+                          <div className="flex items-center gap-3 p-3 rounded-xl hover:bg-gradient-to-r hover:from-gray-50/50 hover:to-gray-100/50 transition-all duration-300">
+                            <span
+                              className={`${item.hoverColor} transition-colors duration-300`}
+                            >
+                              {item.icon}
+                            </span>
+                            <span className="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors duration-300">
+                              {item.label}
+                            </span>
+                          </div>
+                        </motion.button>
+                      ))}
+                    </div>
+
+                    {/* 设置选项 - 直接显示所有选项 */}
+                    <div className="border-t border-gray-100/50 pt-2 md:border-t-0 md:pt-0">
+                      {settingsItems.map((item, index) => (
+                        <motion.button
+                          key={item.label}
+                          initial={{ opacity: 0, x: 20 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{
+                            delay:
+                              (index + navigationItems.length * 0.05) * 0.05,
+                          }}
+                          onClick={() => {
+                            setIsMenuOpen(false);
+                            item.onClick();
+                          }}
+                          className="w-full group"
+                        >
+                          <div className="flex items-center gap-3 p-3 rounded-xl hover:bg-gradient-to-r hover:from-gray-50/50 hover:to-gray-100/50 transition-all duration-300">
+                            <span className="text-gray-500 group-hover:text-gray-900 transition-colors duration-300">
+                              {item.icon}
+                            </span>
+                            <span className="text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors duration-300">
+                              {item.label}
+                            </span>
+                          </div>
+                        </motion.button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+
+      <DatabaseBackup
+        open={isBackupModalOpen}
+        onClose={() => setIsBackupModalOpen(false)}
+        token={accessToken || undefined}
+      />
+    </>
+  );
+}

components/I18nProvider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { PropsWithChildren, useEffect } from "react";
+import i18next from "i18next";
+import { I18nextProvider, initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import enCommon from "@/locales/en/common.json";
+import zhCommon from "@/locales/zh/common.json";
+
+const i18n = i18next
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        common: enCommon,
+      },
+      zh: {
+        common: zhCommon,
+      },
+    },
+    fallbackLng: "zh",
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default function I18nProvider({ children }: PropsWithChildren) {
+  return <I18nextProvider i18n={i18next}>{children}</I18nextProvider>;
+}

components/editable-cell.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Input } from "antd";
+import { Button } from "@/components/ui/button";
+import { CheckOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import { toast } from "sonner";
+
+interface EditableCellProps {
+  value: number;
+  isEditing: boolean;
+  onEdit: () => void;
+  onSubmit: (value: number) => Promise<void>;
+  onCancel: () => void;
+  t: (key: string, options?: { max?: number }) => string;
+  disabled?: boolean;
+  tooltipText?: string;
+  placeholder?: string;
+  validateValue?: (value: number) => {
+    isValid: boolean;
+    errorMessage?: string;
+    maxValue?: number;
+  };
+  isPerMsgPrice?: boolean;
+}
+
+export function EditableCell({
+  value,
+  isEditing,
+  onEdit,
+  onSubmit,
+  onCancel,
+  t,
+  disabled = false,
+  tooltipText,
+  placeholder,
+  validateValue = (value) => ({ isValid: true }),
+  isPerMsgPrice = false,
+}: EditableCellProps) {
+  const numericValue = typeof value === "number" ? value : Number(value);
+  const originalValue = numericValue >= 0 ? numericValue.toFixed(4) : "";
+  const [inputValue, setInputValue] = useState(originalValue);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      setInputValue(originalValue);
+    }
+  }, [isEditing, originalValue]);
+
+  useEffect(() => {
+    if (isEditing) {
+      const handleClickOutside = (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+        if (!target.closest(".editable-cell-input")) {
+          onCancel();
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isEditing, onCancel]);
+
+  const handleSubmit = async () => {
+    try {
+      setIsSaving(true);
+      const numValue = Number(inputValue);
+      const validation = validateValue(numValue);
+
+      if (!validation.isValid) {
+        toast.error(validation.errorMessage || t("error.invalidInput"));
+        return;
+      }
+
+      if (validation.maxValue !== undefined && numValue > validation.maxValue) {
+        toast.error(t("error.exceedsMaxValue", { max: validation.maxValue }));
+        return;
+      }
+
+      await onSubmit(numValue);
+    } catch (err) {
+      // 错误已在父组件中处理
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className={`relative ${disabled ? "opacity-50" : ""}`}>
+      {isEditing ? (
+        <div className="relative editable-cell-input flex items-center gap-1.5">
+          <Input
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            className="
+              !w-[calc(100%-32px)]
+              !border
+              !border-slate-200
+              focus:!border-slate-300
+              !bg-white
+              !shadow-sm
+              hover:!shadow
+              focus:!shadow-md
+              !px-2
+              !py-1
+              !h-7
+              flex-1
+              !rounded-lg
+              !text-slate-600
+              !text-sm
+              !font-medium
+              placeholder:!text-slate-400/70
+              transition-all
+              duration-200
+              focus:!ring-2
+              focus:!ring-slate-200/50
+              focus:!ring-offset-0
+            "
+            placeholder={placeholder || t("common.enterValue")}
+            onPressEnter={handleSubmit}
+            autoFocus
+            disabled={isSaving}
+          />
+          <Button
+            size="sm"
+            variant="ghost"
+            className={`
+              h-7 w-7
+              flex-shrink-0
+              bg-gradient-to-r from-slate-500/80 to-slate-600/80
+              hover:from-slate-600 hover:to-slate-700
+              text-white/90
+              shadow-sm
+              rounded-lg
+              transition-all
+              duration-200
+              hover:scale-105
+              active:scale-95
+              p-0
+              flex
+              items-center
+              justify-center
+              ${isSaving ? "cursor-not-allowed opacity-70" : ""}
+            `}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleSubmit();
+            }}
+            disabled={isSaving}
+          >
+            {isSaving ? (
+              <div className="w-3 h-3 rounded-full border-2 border-white/90 border-t-transparent animate-spin" />
+            ) : (
+              <CheckOutlined className="text-xs" />
+            )}
+          </Button>
+        </div>
+      ) : (
+        <div
+          onClick={disabled ? undefined : onEdit}
+          className={`
+            group
+            px-2
+            py-1
+            rounded-lg
+            transition-colors
+            duration-200
+            ${
+              disabled
+                ? "cursor-not-allowed line-through"
+                : "cursor-pointer hover:bg-primary/5"
+            }
+          `}
+        >
+          <span
+            className={`
+              font-medium
+              text-sm
+              transition-colors
+              duration-200
+              ${
+                disabled
+                  ? "text-muted-foreground/60"
+                  : "text-primary/80 group-hover:text-primary"
+              }
+            `}
+          >
+            {isPerMsgPrice && numericValue < 0 ? (
+              <span className="text-muted-foreground/60">
+                {t("common.notSet")}
+              </span>
+            ) : (
+              <>
+                {numericValue.toFixed(4)}
+                {tooltipText && (
+                  <Tooltip title={tooltipText}>
+                    <InfoCircleOutlined className="ml-1 text-muted-foreground/60" />
+                  </Tooltip>
+                )}
+              </>
+            )}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

components/models/TestProgress.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { Progress } from "@/components/ui/progress";
+import { CheckCircle2, XCircle, Clock } from "lucide-react";
+import { useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+interface TestProgressProps {
+  isVisible: boolean;
+  models: Array<{
+    id: string;
+    name: string;
+    testStatus?: "success" | "error" | "testing";
+  }>;
+  isComplete: boolean;
+}
+
+export function TestProgress({
+  isVisible,
+  models,
+  isComplete,
+}: TestProgressProps) {
+  const { t } = useTranslation("common");
+  const [expandedSection, setExpandedSection] = useState<
+    "success" | "error" | null
+  >(null);
+
+  const totalModels = models.length;
+  const testedModels = models.filter(
+    (m) => m.testStatus && m.testStatus !== "testing"
+  ).length;
+  const successModels = models.filter((m) => m.testStatus === "success");
+  const failedModels = isComplete
+    ? models.filter((m) => m.testStatus !== "success")
+    : models.filter((m) => m.testStatus === "error");
+  const pendingModels = models.filter(
+    (m) => !m.testStatus || m.testStatus === "testing"
+  );
+  const progress = (testedModels / totalModels) * 100;
+
+  const StatusSection = ({
+    type,
+    models,
+    count,
+    icon,
+    color,
+    label,
+  }: {
+    type: "success" | "error" | "pending";
+    models: typeof successModels;
+    count: number;
+    icon: JSX.Element;
+    color: string;
+    label: string;
+  }) => (
+    <div
+      className={cn(
+        "rounded-lg p-4 transition-colors duration-200",
+        color,
+        type !== "pending" &&
+          expandedSection === type &&
+          "ring-2 ring-primary ring-offset-2",
+        type !== "pending" && "hover:bg-opacity-80 cursor-pointer"
+      )}
+      onClick={() =>
+        type !== "pending" &&
+        setExpandedSection(
+          expandedSection === type ? null : (type as "success" | "error")
+        )
+      }
+    >
+      <div className="flex items-center gap-2">
+        <div className="flex-shrink-0">{icon}</div>
+        <div>
+          <div className="text-sm font-medium">{count}</div>
+          <div className="text-xs text-muted-foreground">{label}</div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <AnimatePresence mode="wait">
+      {isVisible && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          className="overflow-hidden"
+        >
+          <div className="bg-card border rounded-lg p-4 mb-6">
+            <div className="space-y-4">
+              {isComplete ? (
+                <>
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="text-sm text-left pb-2"
+                  >
+                    <span className="text-muted-foreground">
+                      {t("models.test.result.complete")}
+                    </span>
+                  </motion.div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="col-span-1">
+                      <StatusSection
+                        type="success"
+                        models={successModels}
+                        count={successModels.length}
+                        icon={
+                          <CheckCircle2 className="w-5 h-5 text-green-500" />
+                        }
+                        color="bg-green-50"
+                        label={t("models.test.status.valid")}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <StatusSection
+                        type="error"
+                        models={failedModels}
+                        count={failedModels.length}
+                        icon={<XCircle className="w-5 h-5 text-red-500" />}
+                        color="bg-red-50"
+                        label={t("models.test.status.invalid")}
+                      />
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className="grid grid-cols-3 gap-4">
+                    <StatusSection
+                      type="success"
+                      models={successModels}
+                      count={successModels.length}
+                      icon={<CheckCircle2 className="w-5 h-5 text-green-500" />}
+                      color="bg-green-50"
+                      label={t("models.test.status.valid")}
+                    />
+                    <StatusSection
+                      type="error"
+                      models={failedModels}
+                      count={failedModels.length}
+                      icon={<XCircle className="w-5 h-5 text-red-500" />}
+                      color="bg-red-50"
+                      label={t("models.test.status.invalid")}
+                    />
+                    <StatusSection
+                      type="pending"
+                      models={pendingModels}
+                      count={pendingModels.length}
+                      icon={<Clock className="w-5 h-5 text-blue-500" />}
+                      color="bg-blue-50"
+                      label={t("models.test.status.pending")}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        {t("models.test.progress.title")}
+                      </span>
+                      <span className="font-medium whitespace-nowrap ml-4">
+                        {testedModels} / {totalModels}
+                      </span>
+                    </div>
+                    <Progress value={progress} className="h-2" />
+                  </div>
+                </>
+              )}
+
+              <AnimatePresence mode="wait">
+                {expandedSection && (
+                  <motion.div
+                    key={expandedSection}
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="pt-3 border-t">
+                      <div className="text-sm font-medium mb-3">
+                        {expandedSection === "success"
+                          ? t("models.test.result.success")
+                          : t("models.test.result.failed")}
+                      </div>
+                      <ScrollArea className="h-[200px] pr-4">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                          {(expandedSection === "success"
+                            ? successModels
+                            : failedModels
+                          ).map((model) => (
+                            <motion.div
+                              key={model.id}
+                              initial={{ x: -20, opacity: 0 }}
+                              animate={{ x: 0, opacity: 1 }}
+                              className="flex items-center gap-2 p-2 rounded-md bg-gray-50/80"
+                            >
+                              {expandedSection === "success" ? (
+                                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0" />
+                              ) : (
+                                <XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
+                              )}
+                              <span className="text-sm text-muted-foreground truncate">
+                                {model.name}
+                              </span>
+                            </motion.div>
+                          ))}
+                        </div>
+                      </ScrollArea>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

components/panel/ModelDistributionChart.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import ReactECharts from "echarts-for-react";
+import type { ECharts } from "echarts";
+import { Card as ShadcnCard } from "@/components/ui/card";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { MetricToggle } from "@/components/ui/metric-toggle";
+import { useTranslation } from "react-i18next";
+import { PieChartOutlined } from "@ant-design/icons";
+import { motion } from "framer-motion";
+
+interface ModelUsage {
+  model_name: string;
+  total_cost: number;
+  total_count: number;
+}
+
+interface ModelDistributionChartProps {
+  loading: boolean;
+  models: ModelUsage[];
+  metric: "cost" | "count";
+  onMetricChange: (metric: "cost" | "count") => void;
+}
+
+const getPieOption = (
+  models: ModelUsage[],
+  metric: "cost" | "count",
+  t: (key: string) => string
+) => {
+  const pieData = models
+    .map((item) => ({
+      type: item.model_name,
+      value: metric === "cost" ? Number(item.total_cost) : item.total_count,
+    }))
+    .filter((item) => item.value > 0);
+
+  const total = pieData.reduce((sum, item) => sum + item.value, 0);
+
+  const sortedData = [...pieData]
+    .sort((a, b) => b.value - a.value)
+    .reduce((acc, curr) => {
+      const percentage = (curr.value / total) * 100;
+      if (percentage < 5) {
+        const otherIndex = acc.findIndex(
+          (item) => item.name === t("panel.modelUsage.others")
+        );
+        if (otherIndex >= 0) {
+          acc[otherIndex].value += curr.value;
+        } else {
+          acc.push({
+            name: t("panel.modelUsage.others"),
+            value: curr.value,
+          });
+        }
+      } else {
+        acc.push({
+          name: curr.type,
+          value: curr.value,
+        });
+      }
+      return acc;
+    }, [] as { name: string; value: number }[]);
+
+  const isSmallScreen = window.innerWidth < 640;
+
+  return {
+    tooltip: {
+      show: true,
+      trigger: "item",
+      backgroundColor: "rgba(255, 255, 255, 0.98)",
+      borderColor: "rgba(0, 0, 0, 0.05)",
+      borderWidth: 1,
+      padding: [14, 18],
+      textStyle: {
+        color: "#333",
+        fontSize: 13,
+        lineHeight: 20,
+      },
+      formatter: (params: any) => {
+        const percentage = ((params.value / total) * 100).toFixed(1);
+        return `
+          <div class="flex flex-col gap-1.5">
+            <div class="font-medium text-gray-800">${params.name}</div>
+            <div class="flex items-center gap-2">
+              <span class="inline-block w-2 h-2 rounded-full" style="background-color: ${
+                params.color
+              }"></span>
+              <span class="text-sm">
+                ${metric === "cost" ? t("panel.byAmount") : t("panel.byCount")}
+              </span>
+              <span class="font-mono text-sm font-medium text-gray-900">
+                ${
+                  metric === "cost"
+                    ? `${t("common.currency")}${params.value.toFixed(4)}`
+                    : `${params.value} ${t("common.count")}`
+                }
+              </span>
+            </div>
+            <div class="text-xs text-gray-500">
+              占 <span class="font-medium text-gray-700">${percentage}%</span>
+            </div>
+          </div>
+        `;
+      },
+      extraCssText:
+        "box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-radius: 8px;",
+    },
+    legend: {
+      show: true,
+      orient: "horizontal",
+      bottom: isSmallScreen ? 20 : 10,
+      type: "scroll",
+      itemWidth: 16,
+      itemHeight: 16,
+      itemGap: 20,
+      textStyle: {
+        fontSize: 13,
+        color: "#555",
+        padding: [0, 0, 0, 4],
+      },
+      pageIconSize: 12,
+      pageTextStyle: {
+        color: "#666",
+      },
+    },
+    series: [
+      {
+        name: metric === "cost" ? t("panel.byAmount") : t("panel.byCount"),
+        type: "pie",
+        radius: isSmallScreen ? ["35%", "65%"] : ["45%", "75%"],
+        center: ["50%", "45%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 6,
+          borderWidth: 2,
+          borderColor: "#fff",
+          shadowBlur: 8,
+          shadowColor: "rgba(0, 0, 0, 0.1)",
+        },
+        label: {
+          show: !isSmallScreen,
+          position: "outside",
+          alignTo: "labelLine",
+          margin: 6,
+          formatter: (params: any) => {
+            const percentage = ((params.value / total) * 100).toFixed(1);
+            return [
+              `{name|${params.name}}`,
+              `{value|${
+                metric === "cost"
+                  ? `${t("common.currency")}${params.value.toFixed(4)}`
+                  : `${params.value} ${t("common.count")}`
+              }}`,
+              `{per|${percentage}%}`,
+            ].join("\n");
+          },
+          rich: {
+            name: {
+              fontSize: 13,
+              color: "#444",
+              padding: [0, 0, 3, 0],
+              fontWeight: 500,
+              width: 120,
+              overflow: "break",
+            },
+            value: {
+              fontSize: 12,
+              color: "#666",
+              padding: [3, 0],
+              fontFamily: "monospace",
+            },
+            per: {
+              fontSize: 12,
+              color: "#888",
+              padding: [2, 0, 0, 0],
+            },
+          },
+          lineHeight: 16,
+        },
+        labelLayout: {
+          hideOverlap: true,
+          moveOverlap: "shiftY",
+        },
+        labelLine: {
+          show: !isSmallScreen,
+          length: 20,
+          length2: 20,
+          minTurnAngle: 90,
+          maxSurfaceAngle: 90,
+          smooth: true,
+        },
+        data: sortedData,
+        zlevel: 0,
+        padAngle: 2,
+        emphasis: {
+          scale: true,
+          scaleSize: 8,
+          focus: "self",
+          itemStyle: {
+            shadowBlur: 16,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.15)",
+          },
+          label: {
+            show: !isSmallScreen,
+          },
+          labelLine: {
+            show: !isSmallScreen,
+            lineStyle: {
+              width: 2,
+            },
+          },
+        },
+        select: {
+          disabled: true,
+        },
+      },
+    ],
+    graphic: [
+      {
+        type: "text",
+        left: "center",
+        top: "40%",
+        style: {
+          text:
+            metric === "cost"
+              ? `${t("common.total")}\n${t("common.currency")}${total.toFixed(
+                  2
+                )}`
+              : `${t("common.total")}\n${total}${t("common.count")}`,
+          textAlign: "center",
+          fontSize: 15,
+          fontWeight: "500",
+          lineHeight: 22,
+          fill: "#333",
+        },
+        zlevel: 2,
+      },
+    ],
+    animation: true,
+    animationDuration: 500,
+    universalTransition: true,
+  };
+};
+
+export default function ModelDistributionChart({
+  loading,
+  models,
+  metric,
+  onMetricChange,
+}: ModelDistributionChartProps) {
+  const chartRef = useRef<ECharts>();
+  const { t } = useTranslation("common");
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current) {
+        chartRef.current.resize();
+        chartRef.current.setOption(getPieOption(models, metric, t));
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [metric, models, t]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+      className="col-span-full bg-gradient-to-br from-card to-card/95 text-card-foreground rounded-xl border shadow-sm overflow-hidden"
+    >
+      <div className="relative">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 pointer-events-none" />
+
+        <div className="relative p-6 space-y-6">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+            <div className="flex items-center gap-3 flex-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center rounded-xl shrink-0">
+                <PieChartOutlined className="text-xl text-primary" />
+              </div>
+              <div className="space-y-1">
+                <h3 className="text-2xl font-semibold bg-gradient-to-br from-foreground to-foreground/80 bg-clip-text text-transparent">
+                  {t("panel.modelUsage.title")}
+                </h3>
+              </div>
+            </div>
+            <div className="sm:ml-auto">
+              <MetricToggle value={metric} onChange={onMetricChange} />
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="h-[350px] sm:h-[450px] flex items-center justify-center">
+              <Skeleton className="w-full h-full rounded-lg" />
+            </div>
+          ) : (
+            <div className="h-[350px] sm:h-[450px] transition-all duration-300">
+              <ReactECharts
+                option={getPieOption(models, metric, t)}
+                style={{ height: "100%", width: "100%" }}
+                onChartReady={(instance) => (chartRef.current = instance)}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}

components/panel/TimeRangeSelector.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import dayjs from "dayjs";
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "react-i18next";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Calendar as CalendarIcon,
+  Clock,
+  Sun,
+  CalendarDays,
+  CalendarRange,
+  CalendarClock,
+  CalendarCheck,
+} from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { zhCN } from "date-fns/locale";
+
+export type TimeRangeType =
+  | "today"
+  | "week"
+  | "month"
+  | "30days"
+  | "all"
+  | "custom";
+
+interface TimeRangeSelectorProps {
+  timeRange: [Date, Date];
+  timeRangeType: TimeRangeType;
+  availableTimeRange: {
+    minTime: Date;
+    maxTime: Date;
+  };
+  onTimeRangeChange: (range: [Date, Date], type: TimeRangeType) => void;
+}
+
+const checkTimeRangeType = (
+  startTime: dayjs.Dayjs,
+  endTime: dayjs.Dayjs,
+  availableTimeRange: { minTime: Date; maxTime: Date }
+): TimeRangeType => {
+  if (
+    dayjs(startTime).isSame(availableTimeRange.minTime, "hour") &&
+    dayjs(endTime).isSame(availableTimeRange.maxTime, "hour")
+  ) {
+    return "all";
+  }
+
+  const now = dayjs();
+  const isToday = startTime.isSame(now.startOf("day")) && endTime.isSame(now);
+  const isWeek = startTime.isSame(now.startOf("week")) && endTime.isSame(now);
+  const isMonth = startTime.isSame(now.startOf("month")) && endTime.isSame(now);
+  const is30Days =
+    startTime.isSame(now.subtract(30, "day"), "hour") && endTime.isSame(now);
+
+  if (isToday) return "today";
+  if (isWeek) return "week";
+  if (isMonth) return "month";
+  if (is30Days) return "30days";
+
+  return "custom";
+};
+
+export default function TimeRangeSelector({
+  timeRange,
+  timeRangeType,
+  availableTimeRange,
+  onTimeRangeChange,
+}: TimeRangeSelectorProps) {
+  const { t, i18n } = useTranslation("common");
+  const [isCustomOpen, setIsCustomOpen] = useState(false);
+  const [startOpen, setStartOpen] = useState(false);
+  const [endOpen, setEndOpen] = useState(false);
+
+  const [startDate, setStartDate] = useState<Date>(timeRange[0]);
+  const [endDate, setEndDate] = useState<Date>(timeRange[1]);
+
+  useEffect(() => {
+    setStartDate(timeRange[0]);
+    setEndDate(timeRange[1]);
+  }, [timeRange]);
+
+  const timeOptions = [
+    {
+      id: "today",
+      type: "today" as TimeRangeType,
+      label: t("panel.timeRange.timeOptions.day"),
+      icon: Sun,
+      getRange: () =>
+        [dayjs().startOf("day").toDate(), dayjs().endOf("day").toDate()] as [
+          Date,
+          Date
+        ],
+    },
+    {
+      id: "week",
+      type: "week" as TimeRangeType,
+      label: t("panel.timeRange.timeOptions.week"),
+      icon: CalendarDays,
+      getRange: () =>
+        [dayjs().startOf("week").toDate(), dayjs().endOf("week").toDate()] as [
+          Date,
+          Date
+        ],
+    },
+    {
+      id: "month",
+      type: "month" as TimeRangeType,
+      label: t("panel.timeRange.timeOptions.month"),
+      icon: CalendarRange,
+      getRange: () =>
+        [
+          dayjs().startOf("month").toDate(),
+          dayjs().endOf("month").toDate(),
+        ] as [Date, Date],
+    },
+    {
+      id: "30days",
+      type: "30days" as TimeRangeType,
+      label: t("panel.timeRange.timeOptions.30Days"),
+      icon: CalendarClock,
+      getRange: () =>
+        [
+          dayjs().subtract(29, "days").startOf("day").toDate(),
+          dayjs().endOf("day").toDate(),
+        ] as [Date, Date],
+    },
+    {
+      id: "all",
+      type: "all" as TimeRangeType,
+      label: t("panel.timeRange.timeOptions.all"),
+      icon: CalendarCheck,
+      getRange: () =>
+        [
+          dayjs(availableTimeRange.minTime).startOf("day").toDate(),
+          dayjs(availableTimeRange.maxTime).endOf("day").toDate(),
+        ] as [Date, Date],
+    },
+  ];
+
+  const handleTimeOptionClick = (type: TimeRangeType) => {
+    const option = timeOptions.find((opt) => opt.type === type);
+    if (!option) return;
+
+    const range = option.getRange();
+    setStartDate(range[0]);
+    setEndDate(range[1]);
+    setIsCustomOpen(false);
+    onTimeRangeChange(range, type);
+  };
+
+  const handleCustomButtonClick = () => {
+    const isOpening = !isCustomOpen;
+    setIsCustomOpen(isOpening);
+
+    if (isOpening) {
+      onTimeRangeChange([startDate, endDate], "custom");
+    }
+  };
+
+  const handleDateChange = (start?: Date, end?: Date) => {
+    if (!start || !end) return;
+
+    const newStart = dayjs(start).startOf("day").toDate();
+    const newEnd = dayjs(end).endOf("day").toDate();
+
+    setStartDate(newStart);
+    setEndDate(newEnd);
+    onTimeRangeChange([newStart, newEnd], "custom");
+  };
+
+  const formatDate = (date?: Date) => {
+    if (!date) return t("panel.timeRange.selectDate");
+    return format(date, "yyyy-MM-dd", {
+      locale: i18n.language === "zh" ? zhCN : undefined,
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2 text-lg font-medium">
+        <Clock className="w-5 h-5 text-primary" />
+        <h3>{t("panel.timeRange.title")}</h3>
+      </div>
+
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
+          {timeOptions.map(({ id, type, label, icon: Icon }) => (
+            <motion.div
+              key={id}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <Button
+                variant={timeRangeType === type ? "default" : "outline"}
+                className="w-full h-full min-h-[52px] flex flex-col gap-1.5 items-center justify-center"
+                onClick={() => handleTimeOptionClick(type)}
+              >
+                <Icon className="w-4 h-4" />
+                <span className="text-sm">{label}</span>
+              </Button>
+            </motion.div>
+          ))}
+
+          <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+            <Button
+              variant={timeRangeType === "custom" ? "default" : "outline"}
+              className="w-full h-full min-h-[52px] flex flex-col gap-1.5 items-center justify-center"
+              onClick={handleCustomButtonClick}
+            >
+              <CalendarIcon className="w-4 h-4" />
+              <span className="text-sm">
+                {t("panel.timeRange.timeOptions.custom")}
+              </span>
+            </Button>
+          </motion.div>
+        </div>
+
+        <AnimatePresence>
+          {isCustomOpen && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: "auto" }}
+              exit={{ opacity: 0, height: 0 }}
+              className="space-y-3"
+            >
+              <div className="text-sm text-muted-foreground">
+                {t("panel.timeRange.customRange")}
+              </div>
+              <div className="flex flex-col sm:flex-row gap-3">
+                <Popover open={startOpen} onOpenChange={setStartOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="secondary"
+                      className={cn(
+                        "justify-start text-left font-normal w-full sm:w-[240px]",
+                        !startDate && "text-muted-foreground"
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {formatDate(startDate)}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={startDate}
+                      defaultMonth={startDate}
+                      onSelect={(date) => {
+                        if (date) {
+                          handleDateChange(date, endDate);
+                          setStartOpen(false);
+                        }
+                      }}
+                      disabled={(date) =>
+                        endDate ? dayjs(date).isAfter(endDate, "day") : false
+                      }
+                      initialFocus
+                      locale={i18n.language === "zh" ? zhCN : undefined}
+                    />
+                  </PopoverContent>
+                </Popover>
+
+                <Popover open={endOpen} onOpenChange={setEndOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="secondary"
+                      className={cn(
+                        "justify-start text-left font-normal w-full sm:w-[240px]",
+                        !endDate && "text-muted-foreground"
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {formatDate(endDate)}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={endDate}
+                      defaultMonth={endDate}
+                      onSelect={(date) => {
+                        if (date) {
+                          handleDateChange(startDate, date);
+                          setEndOpen(false);
+                        }
+                      }}
+                      disabled={(date) =>
+                        startDate
+                          ? dayjs(date).isBefore(startDate, "day")
+                          : false
+                      }
+                      initialFocus
+                      locale={i18n.language === "zh" ? zhCN : undefined}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

components/panel/UsageRecordsTable.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useState } from "react";
+import { Table, TablePaginationConfig, Select } from "antd";
+import type { FilterValue } from "antd/es/table/interface";
+import type { SorterResult } from "antd/es/table/interface";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+interface UsageRecord {
+  id: number;
+  nickname: string;
+  use_time: string;
+  model_name: string;
+  input_tokens: number;
+  output_tokens: number;
+  cost: number;
+  balance_after: number;
+}
+
+interface TableParams {
+  pagination: TablePaginationConfig;
+  sortField?: string;
+  sortOrder?: string;
+  filters?: Record<string, FilterValue | null>;
+}
+
+interface Props {
+  loading: boolean;
+  records: UsageRecord[];
+  tableParams: TableParams;
+  models: { model_name: string }[];
+  users: { nickname: string }[];
+  onTableChange: (
+    pagination: TablePaginationConfig,
+    filters: Record<string, FilterValue | null>,
+    sorter: SorterResult<UsageRecord> | SorterResult<UsageRecord>[]
+  ) => void;
+}
+
+const MobileCard = ({
+  record,
+  t,
+}: {
+  record: UsageRecord;
+  t: (key: string) => string;
+}) => {
+  return (
+    <div className="p-4 bg-white rounded-xl border border-gray-100/80 shadow-sm transition-all duration-200 hover:shadow-md hover:border-gray-200/80">
+      <div className="flex justify-between items-start mb-4">
+        <div className="space-y-1">
+          <div className="font-medium text-gray-900">{record.nickname}</div>
+          <div className="text-xs text-gray-500 flex items-center gap-1.5">
+            <div className="w-1 h-1 rounded-full bg-gray-300" />
+            {dayjs(record.use_time).format("YYYY-MM-DD HH:mm:ss")}
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="font-medium text-primary">
+            ¥{Number(record.cost).toFixed(4)}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">
+            {t("panel.usageDetails.table.balance")}: ¥
+            {Number(record.balance_after).toFixed(4)}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4 bg-gray-50/70 rounded-lg p-3">
+        <div className="flex-1 min-w-0">
+          <div className="text-xs text-gray-500 mb-1.5">
+            {t("panel.usageDetails.table.model")}
+          </div>
+          <div className="text-sm text-gray-700 font-medium truncate">
+            {record.model_name}
+          </div>
+        </div>
+        <div className="shrink-0">
+          <div className="text-xs text-gray-500 mb-1.5">Tokens</div>
+          <div className="text-sm text-gray-700 font-medium tabular-nums">
+            {(record.input_tokens + record.output_tokens).toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function UsageRecordsTable({
+  loading,
+  records,
+  tableParams,
+  models,
+  users,
+  onTableChange,
+}: Props) {
+  const { t } = useTranslation("common");
+
+  const [filters, setFilters] = useState<Record<string, FilterValue | null>>(
+    tableParams.filters || {}
+  );
+
+  const handleFilterChange = (field: string, value: string[] | null) => {
+    const newFilters = {
+      ...filters,
+      [field]: value,
+    };
+    setFilters(newFilters);
+    onTableChange(tableParams.pagination, newFilters, {});
+  };
+
+  const columns = [
+    {
+      title: t("panel.usageDetails.table.user"),
+      dataIndex: "nickname",
+      key: "nickname",
+      width: 120,
+      filters: users.map((user) => ({
+        text: user.nickname,
+        value: user.nickname,
+      })),
+      filterMode: "menu" as const,
+      filtered: filters.nickname ? filters.nickname.length > 0 : false,
+      filteredValue: filters.nickname || null,
+    },
+    {
+      title: t("panel.usageDetails.table.time"),
+      dataIndex: "use_time",
+      key: "use_time",
+      width: 180,
+      sorter: true,
+      render: (time: string) => dayjs(time).format("YYYY-MM-DD HH:mm:ss"),
+    },
+    {
+      title: t("panel.usageDetails.table.model"),
+      dataIndex: "model_name",
+      key: "model_name",
+      width: 150,
+      filters: models.map((model) => ({
+        text: model.model_name,
+        value: model.model_name,
+      })),
+      filterMode: "menu" as const,
+      filtered: filters.model_name ? filters.model_name.length > 0 : false,
+      filteredValue: filters.model_name || null,
+    },
+    {
+      title: t("panel.usageDetails.table.tokens"),
+      key: "tokens",
+      width: 120,
+      sorter: true,
+      render: (_: unknown, record: UsageRecord) =>
+        (record.input_tokens + record.output_tokens).toLocaleString(),
+    },
+    {
+      title: t("panel.usageDetails.table.cost"),
+      dataIndex: "cost",
+      key: "cost",
+      width: 100,
+      sorter: true,
+      render: (_: unknown, record: UsageRecord) =>
+        `${t("common.currency")}${Number(record.cost).toFixed(4)}`,
+    },
+    {
+      title: t("panel.usageDetails.table.balance"),
+      dataIndex: "balance_after",
+      key: "balance_after",
+      width: 100,
+      sorter: true,
+      render: (_: unknown, record: UsageRecord) =>
+        `${t("common.currency")}${Number(record.balance_after).toFixed(2)}`,
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="sm:hidden space-y-3">
+        <Select
+          mode="multiple"
+          placeholder={t("panel.usageDetails.table.user")}
+          className="w-full"
+          value={filters.nickname as string[]}
+          onChange={(value) => handleFilterChange("nickname", value)}
+          options={users.map((user) => ({
+            label: user.nickname,
+            value: user.nickname,
+          }))}
+          maxTagCount="responsive"
+        />
+        <Select
+          mode="multiple"
+          placeholder={t("panel.usageDetails.table.model")}
+          className="w-full"
+          value={filters.model_name as string[]}
+          onChange={(value) => handleFilterChange("model_name", value)}
+          options={models.map((model) => ({
+            label: model.model_name,
+            value: model.model_name,
+          }))}
+          maxTagCount="responsive"
+        />
+      </div>
+
+      {/* 桌面设备表格 */}
+      <div className="hidden sm:block">
+        <Table
+          columns={columns}
+          dataSource={records}
+          loading={loading}
+          onChange={onTableChange}
+          pagination={{
+            ...tableParams.pagination,
+            className: "px-2",
+            showTotal: (total) => `${t("common.total")} ${total}`,
+            itemRender: (page, type, originalElement) => {
+              if (type === "prev") {
+                return (
+                  <button className="px-2 py-0.5 hover:text-primary">
+                    {t("common.prev")}
+                  </button>
+                );
+              }
+              if (type === "next") {
+                return (
+                  <button className="px-2 py-0.5 hover:text-primary">
+                    {t("common.next")}
+                  </button>
+                );
+              }
+              return originalElement;
+            },
+          }}
+          rowKey="id"
+          scroll={{ x: 800 }}
+          className="bg-background rounded-md border [&_.ant-table-thead]:bg-muted [&_.ant-table-thead>tr>th]:bg-transparent [&_.ant-table-thead>tr>th]:text-muted-foreground [&_.ant-table-tbody>tr>td]:border-muted [&_.ant-table-tbody>tr:last-child>td]:border-b-0 [&_.ant-table-tbody>tr:hover>td]:bg-muted/50 [&_.ant-pagination]:flex [&_.ant-pagination]:items-center [&_.ant-pagination]:px-2 [&_.ant-pagination]:py-4 [&_.ant-pagination]:border-t [&_.ant-pagination]:border-muted [&_.ant-pagination-item]:border-muted [&_.ant-pagination-item]:bg-transparent [&_.ant-pagination-item]:hover:border-primary [&_.ant-pagination-item]:hover:text-primary [&_.ant-pagination-item-active]:border-primary [&_.ant-pagination-item-active]:text-primary [&_.ant-pagination-item-active]:bg-transparent [&_.ant-pagination-prev]:hover:text-primary [&_.ant-pagination-next]:hover:text-primary [&_.ant-pagination-prev>button]:hover:border-primary [&_.ant-pagination-next>button]:hover:border-primary [&_.ant-pagination-options]:ml-auto [&_.ant-select]:border-muted [&_.ant-select]:hover:border-primary [&_.ant-select-focused]:border-primary"
+        />
+      </div>
+
+      {/* 移动设备卡片列表 */}
+      <div className="sm:hidden space-y-4">
+        {loading ? (
+          <div className="flex justify-center py-8">
+            <div className="w-6 h-6 border-2 border-primary/30 border-t-primary animate-spin rounded-full" />
+          </div>
+        ) : (
+          <>
+            <div className="space-y-3">
+              {records.map((record) => (
+                <MobileCard key={record.id} record={record} t={t} />
+              ))}
+            </div>
+            <Table
+              dataSource={[]}
+              loading={loading}
+              onChange={onTableChange}
+              pagination={{
+                ...tableParams.pagination,
+                size: "small",
+                className:
+                  "flex justify-center [&_.ant-pagination-options]:hidden",
+              }}
+              className="[&_.ant-pagination]:!mt-0 [&_.ant-table]:hidden [&_.ant-pagination-item]:!bg-white"
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

components/panel/UserRankingChart.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { Spin, Skeleton } from "antd";
+import ReactECharts from "echarts-for-react";
+import type { ECharts } from "echarts";
+import { MetricToggle } from "@/components/ui/metric-toggle";
+import { useTranslation } from "react-i18next";
+import { BarChartOutlined } from "@ant-design/icons";
+import { Card as ShadcnCard } from "@/components/ui/card";
+import { motion } from "framer-motion";
+
+interface UserUsage {
+  nickname: string;
+  total_cost: number;
+  total_count: number;
+}
+
+interface UserRankingChartProps {
+  loading: boolean;
+  users: UserUsage[];
+  metric: "cost" | "count";
+  onMetricChange: (metric: "cost" | "count") => void;
+}
+
+const getBarOption = (
+  users: UserUsage[],
+  metric: "cost" | "count",
+  t: (key: string) => string
+) => {
+  const columnData = users
+    .map((item) => ({
+      nickname: item.nickname,
+      value: metric === "cost" ? Number(item.total_cost) : item.total_count,
+    }))
+    .sort((a, b) => b.value - a.value);
+
+  const isSmallScreen = window.innerWidth < 640;
+
+  return {
+    tooltip: {
+      show: false,
+    },
+    grid: {
+      top: isSmallScreen ? "8%" : "4%",
+      bottom: isSmallScreen ? "2%" : "1%",
+      left: "4%",
+      right: "4%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: columnData.map((item) =>
+        item.nickname.length > 12
+          ? item.nickname.slice(0, 10) + "..."
+          : item.nickname
+      ),
+      axisLabel: {
+        inside: false,
+        color: "#555",
+        fontSize: 12,
+        rotate: 35,
+        interval: 0,
+        hideOverlap: true,
+        padding: [0, 0, 0, 0],
+        verticalAlign: "middle",
+        align: "right",
+        margin: 8,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eee",
+          width: 2,
+        },
+      },
+      z: 10,
+    },
+    yAxis: {
+      type: "value",
+      name: "",
+      nameTextStyle: {
+        color: "#666",
+        fontSize: 13,
+        padding: [0, 0, 0, 0],
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#eee",
+          width: 2,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: "#eee",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#f5f5f5",
+          width: 2,
+        },
+      },
+      axisLabel: {
+        color: "#666",
+        fontSize: 12,
+        formatter: (value: number) => {
+          if (metric === "cost") {
+            return `¥${value.toFixed(1)}`;
+          }
+          return `${value}次`;
+        },
+      },
+    },
+    dataZoom: [
+      {
+        type: "inside",
+        start: 0,
+        end: Math.min(100, Math.max(100 * (15 / columnData.length), 40)),
+        zoomLock: true,
+        moveOnMouseMove: true,
+      },
+    ],
+    series: [
+      {
+        type: "bar",
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(99, 133, 255, 0.85)",
+              },
+              {
+                offset: 1,
+                color: "rgba(99, 133, 255, 0.4)",
+              },
+            ],
+          },
+          borderRadius: [8, 8, 0, 0],
+        },
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(99, 133, 255, 0.95)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(99, 133, 255, 0.5)",
+                },
+              ],
+            },
+            shadowBlur: 10,
+            shadowColor: "rgba(99, 133, 255, 0.2)",
+          },
+        },
+        barWidth: "35%",
+        data: columnData.map((item) => item.value),
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.08)",
+          borderRadius: [8, 8, 0, 0],
+        },
+        label: {
+          show: !isSmallScreen,
+          position: "top",
+          formatter: (params: any) => {
+            return metric === "cost"
+              ? `${params.value.toFixed(2)}`
+              : `${params.value}`;
+          },
+          fontSize: 11,
+          color: "#666",
+          distance: 2,
+          fontFamily: "monospace",
+        },
+      },
+    ],
+    animation: true,
+    animationDuration: 800,
+    animationEasing: "cubicOut" as const,
+  };
+};
+
+export default function UserRankingChart({
+  loading,
+  users,
+  metric,
+  onMetricChange,
+}: UserRankingChartProps) {
+  const { t } = useTranslation("common");
+  const chartRef = useRef<ECharts>();
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current) {
+        chartRef.current.resize();
+        chartRef.current.setOption(getBarOption(users, metric, t));
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [metric, users, t]);
+
+  const onChartReady = (instance: ECharts) => {
+    chartRef.current = instance;
+    const zoomSize = 6;
+    let isZoomed = false; // 增加一个状态变量
+
+    instance.on("click", (params) => {
+      const dataLength = users.length;
+
+      if (!isZoomed) {
+        // 第一次点击，放大区域
+        instance.dispatchAction({
+          type: "dataZoom",
+          startValue:
+            users[Math.max(params.dataIndex - zoomSize / 2, 0)].nickname,
+          endValue:
+            users[Math.min(params.dataIndex + zoomSize / 2, dataLength - 1)]
+              .nickname,
+        });
+        isZoomed = true;
+      } else {
+        // 第二次点击，还原缩放
+        instance.dispatchAction({
+          type: "dataZoom",
+          start: 0,
+          end: 100,
+        });
+        isZoomed = false;
+      }
+    });
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+      className="col-span-full bg-gradient-to-br from-card to-card/95 text-card-foreground rounded-xl border shadow-sm overflow-hidden"
+    >
+      <div className="relative">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-primary/5 pointer-events-none" />
+
+        <div className="relative p-6 space-y-6">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+            <div className="flex items-center gap-3 flex-1">
+              <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center rounded-xl shrink-0">
+                <BarChartOutlined className="text-xl text-primary" />
+              </div>
+              <div className="space-y-1">
+                <h3 className="text-2xl font-semibold bg-gradient-to-br from-foreground to-foreground/80 bg-clip-text text-transparent">
+                  {t("panel.userUsageChart.title")}
+                </h3>
+              </div>
+            </div>
+            <div className="sm:ml-auto">
+              <MetricToggle value={metric} onChange={onMetricChange} />
+            </div>
+          </div>
+
+          {loading ? (
+            <div className="h-[350px] sm:h-[450px] flex items-center justify-center">
+              <Skeleton className="w-full h-full rounded-lg" />
+            </div>
+          ) : (
+            <div className="h-[350px] sm:h-[450px] transition-all duration-300">
+              <ReactECharts
+                option={getBarOption(users, metric, t)}
+                style={{ height: "100%", width: "100%" }}
+                onChartReady={onChartReady}
+                className="bar-chart"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}

components/ui/accordion.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}