QuentinHsu 6f415428d3 perf(web): improve frontend table rendering and pinned columns/UI table (#5405)
* refactor(web): centralize data table implementation

- route all TanStack table setup through a shared data-table hook to remove repeated state and row model wiring.
- move table rendering, static table wrappers, empty states, and primitive exports behind the data-table module.
- update feature tables and configuration editors to share the same table UX while preserving their existing workflows.

* refactor(web): trim data table public API

- remove unused data-table exports and dead static table helper types.
- keep internal table header, skeleton, empty state, and faceted filter helpers private to the data-table module.
- route feature imports through the data-table barrel to avoid subpath coupling.

* refactor(web): unify table rendering components

- centralize static table headers, bodies, empty states, and shared class names behind the data-table package.
- migrate settings, pricing, channel, key, subscription, and model tables to the shared table APIs.
- remove data-table exports for low-level table primitives so feature code uses one supported abstraction.

* perf(web): keep list tables fixed within page content

- make shared data table pages fill available height and scroll row data inside the table body.
- add a fixed content layout mode so selected list pages avoid page-level scrolling.
- apply the fixed table behavior to keys, logs, channels, models, users, redemptions, and subscriptions.

* perf(web): refine table pagination controls

- show total row counts instead of redundant page range text.
- tighten visible page buttons so pagination fits constrained table widths.
- align pagination controls and tune text hierarchy for clearer scanning.

* perf(web): stabilize model pricing table columns

- keep model pricing columns at fixed widths so headers do not collapse in narrow layouts.
- truncate long model names and pricing summaries within their cells instead of squeezing adjacent columns.

* refactor(web): simplify data table rendering internals

- split table body rendering into focused helpers for loading, empty, and row states.
- extract static table row and cell class resolution to reduce branching in the main component.
- reuse a single pagination page-size option list to avoid duplicated constants.

* perf(pricing): reduce dynamic pricing table render work

- reuse dynamic pricing field metadata instead of rebuilding it inside table columns.
- precompute formatted dynamic prices per tier and group to avoid repeated entry mapping for each cell.
- simplify select option construction in related dialogs while preserving the same choices.

* refactor(web): streamline pricing table rendering

- reuse translated endpoint select options between trigger data and menu items.
- precompute dynamic pricing maps per group so table cells only resolve formatted values.
- add local dynamic pricing type aliases to keep helper signatures readable.

* refactor(web): merge pricing table imports

* refactor(web): merge upstream ratio table imports

* refactor(web): merge channel selector table imports

* refactor(web): simplify tiered pricing select items

* refactor(web): reuse model ratio row state

* refactor(web): rely on table view row defaults

* refactor(web): reuse pagination state values

* refactor(web): hoist pagination size select items

* refactor(web): clarify static table body rows

* refactor(web): extract table page pagination rendering

* fix(web): remove direct hast type dependency

- rely on Shiki transformer contextual typing for line nodes.
- allow frontend typecheck to pass without an undeclared hast package.

* refactor(web): trim data table hook return API

- return only the TanStack table instance from useDataTable.
- keep internal state handling private because callers do not consume it directly.

* refactor(web): keep static table empty row private

- stop exporting the internal StaticDataTableEmptyRow helper.
- keep the public static table API focused on the table component and column type.

* refactor(web): hide data table view props from barrel

* refactor(web): remove stale long text lint override

* fix(web): keep pinned table columns opaque

- apply pinned column background classes after custom column classes.
- use an opaque hover background so scrolled content cannot show through fixed cells.

* refactor(data-table): organize shared table components

- group table primitives, page composition, toolbar controls, static tables, and hooks by responsibility.
- split shared view types, row rendering, header rendering, and pinned-column styling out of the main table view.
- keep the public data-table barrel stable while documenting the new ownership boundaries.

* fix(web): stabilize split table column sizing

- derive default colgroup widths from visible columns when split headers or header sizing are enabled.
- apply a fixed table layout with computed minimum width so header and body columns stay aligned.
- keep split-header containers from leaking horizontal overflow and avoid extra pinned-column borders.

* fix(web): set stable table utility column widths

- assign fixed widths to selection columns so shared colgroup sizing keeps checkbox cells compact.
- size id columns in redemption and user tables to keep split headers aligned with body rows.

* fix(web): align model metadata icon cells

- render compact provider avatars in the metadata icon column instead of wide wordmarks.
- position icons in a fixed-size wrapper so they line up with the existing icon header alignment.

* fix(status-badge): hide status dot by default

* fix(web): prevent user invite info overlap

- give the invite info and created-at columns explicit widths so table sizing reserves enough space.
- allow invite badges to wrap within the cell instead of spilling into adjacent columns.

* perf(data-table): cache pinned column class resolution

- reuse the pinned column lookup while table props stay stable to reduce repeated per-render work.
- share the resolved column class handler across unified and split-header table layouts.
- localize page-number screen reader labels so pagination remains accessible in every locale.

* refactor(data-table): tighten static table modes

- make StaticDataTable distinguish data-driven and children-only usage through explicit prop shapes.
- remove unsupported columns-without-data fallback after confirming no repository callers rely on it.
- default manual table modes away from unused local row models to reduce repeated table work.

* fix(data-table): make pinned edit column opaque

- use an opaque muted background for the active action column so sticky cells do not reveal scrolled content underneath.

* fix(data-table): prevent narrow column overlap

- apply stable header sizing to remaining desktop data table pages so constrained layouts scroll instead of compressing cells.
- add explicit widths for key, quota, badge, and timestamp columns that contain fixed-format content.
- constrain masked values and timestamp cells with truncation to keep content inside its assigned column.

* fix(table): align table cell content with headers

- remove extra inline padding from masked table text buttons so values start at the cell edge.
- tag status badges and offset leading badges inside table cells to match header text alignment.

* fix(table): prevent admin list column overflow

- widen redemption and subscription table columns so masked codes, timestamps, and localized headers fit.
- localize subscription ID headers and add Received amount translations across supported locales.

* fix(provider-badge): unify provider icon spacing

- add a shared provider badge component for icon and status label layout.
- reuse it in channel type and model vendor columns so OpenAI icons align consistently.
2026-06-11 02:36:41 +08:00
2026-02-25 14:55:33 +08:00
2026-05-24 16:19:27 +08:00
2026-05-24 16:19:27 +08:00
2026-01-26 20:24:28 +08:00
2026-05-12 21:53:54 +08:00
2026-05-12 21:53:54 +08:00
2026-05-12 21:53:54 +08:00
2023-06-02 14:20:40 +08:00

new-api

New API

🍥 Next-Generation Large Model Gateway and AI Asset Management System

中文 | English | Français | 日本語

license release docker docker GoReportCard

Calcium-Ion%2Fnew-api | Trendshift

Quick StartKey FeaturesDeploymentDocumentationHelp

📝 Project Description

Note

This is an open-source project developed based on One API

Important

  • This project is intended solely for lawful and authorized AI API gateway, organization-level authentication, multi-model management, usage analytics, cost accounting, and private deployment scenarios.
  • Users must lawfully obtain upstream API keys, accounts, model services, and interface permissions, and must comply with upstream terms of service and applicable laws and regulations.
  • Users should ensure their use complies with upstream terms of service and applicable laws and regulations.
  • When providing generative AI services to the public, users should comply with applicable regulatory requirements and fulfill all filing, licensing, content safety, real-name verification, log retention, tax, and upstream authorization obligations required by their jurisdiction.

🤝 Trusted Partners

No particular order

Cherry Studio Peking University UCloud Alibaba Cloud IO.NET


🙏 Special Thanks

JetBrains Logo

Thanks to JetBrains for providing free open-source development license for this project


🚀 Quick Start

# Clone the project
git clone https://github.com/QuantumNous/new-api.git
cd new-api

# Edit docker-compose.yml configuration
nano docker-compose.yml

# Start the service
docker-compose up -d
Using Docker Commands
# Pull the latest image
docker pull calciumion/new-api:latest

# Using SQLite (default)
docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e TZ=Asia/Shanghai \
  -v ./data:/data \
  calciumion/new-api:latest

# Using MySQL
docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e SQL_DSN="root:123456@tcp(localhost:3306)/oneapi" \
  -e TZ=Asia/Shanghai \
  -v ./data:/data \
  calciumion/new-api:latest

💡 Tip: -v ./data:/data will save data in the data folder of the current directory, you can also change it to an absolute path like -v /your/custom/path:/data


🎉 After deployment is complete, visit http://localhost:3000 to start using!

Warning

When operating this project as a public generative AI service or API resale service, users should first complete all required filing, licensing, content safety, real-name verification, log retention, tax, payment, and upstream authorization obligations.

📖 For more deployment methods, please refer to Deployment Guide


📚 Documentation

Quick Navigation:

Category Link
🚀 Deployment Guide Installation Documentation
⚙️ Environment Configuration Environment Variables
📡 API Documentation API Documentation
FAQ FAQ
💬 Community Interaction Communication Channels

Key Features

For detailed features, please refer to Features Introduction

🎨 Core Functions

Feature Description
🎨 New UI Modern user interface design
🌍 Multi-language Supports Chinese, English, French, Japanese
🔄 Data Compatibility Fully compatible with the original One API database
📈 Data Dashboard Visual console and statistical analysis
🔒 Permission Management Token grouping, model restrictions, user management

💰 Authorized Usage Accounting and Billing

  • Internal top-up and quota allocation for lawful authorized scenarios (EPay, Stripe)
  • Organization-level per-request, usage-based, and cache-hit cost accounting
  • Cache billing statistics for OpenAI, Azure, DeepSeek, Claude, Qwen, and supported models
  • Flexible billing policies for internal management or authorized enterprise customers

🔐 Authorization and Security

  • 😈 Discord authorization login
  • 🤖 LinuxDO authorization login
  • 📱 Telegram authorization login
  • 🔑 OIDC unified authentication

🚀 Advanced Features

API Format Support:

Intelligent Routing:

  • ⚖️ Channel weighted random
  • 🔄 Automatic retry on failure
  • 🚦 User-level model rate limiting

Format Conversion:

  • 🔄 OpenAI Compatible ⇄ Claude Messages
  • 🔄 OpenAI Compatible → Google Gemini
  • 🔄 Google Gemini → OpenAI Compatible - Text only, function calling not supported yet
  • 🚧 OpenAI Compatible ⇄ OpenAI Responses - In development
  • 🔄 Thinking-to-content functionality

Reasoning Effort Support:

View detailed configuration

OpenAI series models:

  • o3-mini-high - High reasoning effort
  • o3-mini-medium - Medium reasoning effort
  • o3-mini-low - Low reasoning effort
  • gpt-5-high - High reasoning effort
  • gpt-5-medium - Medium reasoning effort
  • gpt-5-low - Low reasoning effort

Claude thinking models:

  • claude-3-7-sonnet-20250219-thinking - Enable thinking mode

Google Gemini series models:

  • gemini-2.5-flash-thinking - Enable thinking mode
  • gemini-2.5-flash-nothinking - Disable thinking mode
  • gemini-2.5-pro-thinking - Enable thinking mode
  • gemini-2.5-pro-thinking-128 - Enable thinking mode with thinking budget of 128 tokens
  • You can also append -low, -medium, or -high to any Gemini model name to request the corresponding reasoning effort (no extra thinking-budget suffix needed).

🤖 Model Support

For details, please refer to API Documentation - Gateway Interface

Model Type Description Documentation
🤖 OpenAI GPTs gpt-4-gizmo-* series -
🎨 Midjourney-Proxy Midjourney-Proxy(Plus) Documentation
🎵 Suno-API Suno API Documentation
🔄 Rerank Cohere, Jina Documentation
💬 Claude Messages format Documentation
🌐 Gemini Google Gemini format Documentation
🔧 Dify ChatFlow mode -
🎯 Custom upstream Supports configuring legally authorized upstream endpoints -

📡 Supported Interfaces

View complete interface list

🚢 Deployment

Tip

Latest Docker image: calciumion/new-api:latest

📋 Deployment Requirements

Component Requirement
Local database SQLite (Docker must mount /data directory)
Remote database MySQL ≥ 5.7.8 or PostgreSQL ≥ 9.6
Container engine Docker / Docker Compose

⚙️ Environment Variable Configuration

Common environment variable configuration
Variable Name Description Default Value
SESSION_SECRET Session secret (required for multi-machine deployment) -
CRYPTO_SECRET Encryption secret (required for Redis) -
SQL_DSN Database connection string -
REDIS_CONN_STRING Redis connection string -
STREAMING_TIMEOUT Streaming timeout (seconds) 300
STREAM_SCANNER_MAX_BUFFER_MB Max per-line buffer (MB) for the stream scanner; increase when upstream sends huge image/base64 payloads 64
MAX_REQUEST_BODY_MB Max request body size (MB, counted after decompression; prevents huge requests/zip bombs from exhausting memory). Exceeding it returns 413 32
AZURE_DEFAULT_API_VERSION Azure API version 2025-04-01-preview
ERROR_LOG_ENABLED Error log switch false
PYROSCOPE_URL Pyroscope server address -
PYROSCOPE_APP_NAME Pyroscope application name new-api
PYROSCOPE_BASIC_AUTH_USER Pyroscope basic auth user -
PYROSCOPE_BASIC_AUTH_PASSWORD Pyroscope basic auth password -
PYROSCOPE_MUTEX_RATE Pyroscope mutex sampling rate 5
PYROSCOPE_BLOCK_RATE Pyroscope block sampling rate 5
HOSTNAME Hostname tag for Pyroscope new-api

📖 Complete configuration: Environment Variables Documentation

🔧 Deployment Methods

Method 1: Docker Compose (Recommended)
# Clone the project
git clone https://github.com/QuantumNous/new-api.git
cd new-api

# Edit configuration
nano docker-compose.yml

# Start service
docker-compose up -d
Method 2: Docker Commands

Using SQLite:

docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e TZ=Asia/Shanghai \
  -v ./data:/data \
  calciumion/new-api:latest

Using MySQL:

docker run --name new-api -d --restart always \
  -p 3000:3000 \
  -e SQL_DSN="root:123456@tcp(localhost:3306)/oneapi" \
  -e TZ=Asia/Shanghai \
  -v ./data:/data \
  calciumion/new-api:latest

💡 Path explanation:

  • ./data:/data - Relative path, data saved in the data folder of the current directory
  • You can also use absolute path, e.g.: /your/custom/path:/data
Method 3: BaoTa Panel
  1. Install BaoTa Panel (≥ 9.2.0 version)
  2. Search for New-API in the application store
  3. One-click installation

📖 Tutorial with images

⚠️ Multi-machine Deployment Considerations

Warning

  • Must set SESSION_SECRET - Otherwise login status inconsistent
  • Shared Redis must set CRYPTO_SECRET - Otherwise data cannot be decrypted

🔄 Channel Retry and Cache

Retry configuration: Settings → Operation Settings → General Settings → Failure Retry Count

Cache configuration:

  • REDIS_CONN_STRING: Redis cache (recommended)
  • MEMORY_CACHE_ENABLED: Memory cache

Upstream Projects

Project Description
One API Original project base
Midjourney-Proxy Midjourney interface support

Supporting Tools

Project Description
new-api-key-tool Key quota query tool
new-api-horizon New API high-performance optimized version

💬 Help Support

📖 Documentation Resources

Resource Link
📘 FAQ FAQ
💬 Community Interaction Communication Channels
🐛 Issue Feedback Issue Feedback
📚 Complete Documentation Official Documentation

🤝 Contribution Guide

Welcome all forms of contribution!

  • 🐛 Report Bugs
  • 💡 Propose New Features
  • 📝 Improve Documentation
  • 🔧 Submit Code

🌟 Star History

Star History Chart


💖 Thank you for using New API

If this project is helpful to you, welcome to give us a Star

Official DocumentationIssue FeedbackLatest Release

Built with ❤️ by QuantumNous

S
Description
No description provided
Readme AGPL-3.0 40 MiB
Languages
Go 99.6%
PowerShell 0.1%
Makefile 0.1%