t0ng7u 0eaeef5723 📚 refactor(dashboard): modularize dashboard page into reusable hooks and components
## Overview
Refactored the monolithic dashboard page (~1200 lines) into a modular architecture following the project's global layout pattern. The main `Detail/index.js` is now simplified to match other page entry files like `Midjourney/index.js`.

## Changes Made

### 🏗️ Architecture Changes
- **Before**: Single large file `pages/Detail/index.js` containing all dashboard logic
- **After**: Modular structure with dedicated hooks, components, and helpers

### 📁 New Files Created
- `hooks/dashboard/useDashboardData.js` - Core data management and API calls
- `hooks/dashboard/useDashboardStats.js` - Statistics computation and memoization
- `hooks/dashboard/useDashboardCharts.js` - Chart specifications and data processing
- `constants/dashboard.constants.js` - UI config, time options, and chart defaults
- `helpers/dashboard.js` - Utility functions for data processing and UI helpers
- `components/dashboard/index.jsx` - Main dashboard component integrating all modules
- `components/dashboard/modals/SearchModal.jsx` - Search modal component

### 🔧 Updated Files
- `constants/index.js` - Added dashboard constants export
- `helpers/index.js` - Added dashboard helpers export
- `pages/Detail/index.js` - Simplified to minimal wrapper (~20 lines)

### 🐛 Bug Fixes
- Fixed SearchModal DatePicker onChange to properly convert Date objects to timestamp strings
- Added missing localStorage update for `data_export_default_time` persistence
- Corrected data flow between search confirmation and chart updates
- Ensured proper chart data refresh after search parameter changes

###  Key Improvements
- **Separation of Concerns**: Data, stats, and charts logic isolated into dedicated hooks
- **Reusability**: Components and hooks can be easily reused across the application
- **Maintainability**: Smaller, focused files easier to understand and modify
- **Consistency**: Follows established project patterns for global folder organization
- **Performance**: Proper memoization and callback optimization maintained

### 🎯 Functional Verification
-  All dashboard panels (model analysis, resource consumption, performance metrics) update correctly
-  Search functionality works with proper parameter validation
-  Chart data refreshes properly after search/filter operations
-  User interface remains identical to original implementation
-  All existing features preserved without regression

### 🔄 Data Flow
```
User Input → SearchModal → useDashboardData → API Call → useDashboardCharts → UI Update
```

## Breaking Changes
None. All existing functionality preserved.

## Migration Notes
The refactored dashboard maintains 100% API compatibility and identical user experience while providing a cleaner, more maintainable codebase structure.
2025-07-20 15:47:02 +08:00
2025-07-13 13:36:33 +08:00
2025-07-10 16:29:38 +08:00
2025-07-10 16:29:38 +08:00
2024-05-24 21:12:31 +08:00
2025-06-09 14:57:01 +08:00
2023-06-22 11:37:44 +08:00
2023-06-02 14:20:40 +08:00

中文 | English

new-api

New API

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

Calcium-Ion%2Fnew-api | Trendshift

license release docker docker GoReportCard

📝 Project Description

Note

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

Important

📚 Documentation

For detailed documentation, please visit our official Wiki: https://docs.newapi.pro/

You can also access the AI-generated DeepWiki: Ask DeepWiki

Key Features

New API offers a wide range of features, please refer to Features Introduction for details:

  1. 🎨 Brand new UI interface
  2. 🌍 Multi-language support
  3. 💰 Online recharge functionality (YiPay)
  4. 🔍 Support for querying usage quotas with keys (works with neko-api-key-tool)
  5. 🔄 Compatible with the original One API database
  6. 💵 Support for pay-per-use model pricing
  7. ⚖️ Support for weighted random channel selection
  8. 📈 Data dashboard (console)
  9. 🔒 Token grouping and model restrictions
  10. 🤖 Support for more authorization login methods (LinuxDO, Telegram, OIDC)
  11. 🔄 Support for Rerank models (Cohere and Jina), API Documentation
  12. Support for OpenAI Realtime API (including Azure channels), API Documentation
  13. Support for Claude Messages format, API Documentation
  14. Support for entering chat interface via /chat2link route
  15. 🧠 Support for setting reasoning effort through model name suffixes:
    1. OpenAI o-series models
      • Add -high suffix for high reasoning effort (e.g.: o3-mini-high)
      • Add -medium suffix for medium reasoning effort (e.g.: o3-mini-medium)
      • Add -low suffix for low reasoning effort (e.g.: o3-mini-low)
    2. Claude thinking models
      • Add -thinking suffix to enable thinking mode (e.g.: claude-3-7-sonnet-20250219-thinking)
  16. 🔄 Thinking-to-content functionality
  17. 🔄 Model rate limiting for users
  18. 💰 Cache billing support, which allows billing at a set ratio when cache is hit:
    1. Set the Prompt Cache Ratio option in System Settings-Operation Settings
    2. Set Prompt Cache Ratio in the channel, range 0-1, e.g., setting to 0.5 means billing at 50% when cache is hit
    3. Supported channels:
      • OpenAI
      • Azure
      • DeepSeek
      • Claude

Model Support

This version supports multiple models, please refer to API Documentation-Relay Interface for details:

  1. Third-party models gpts (gpt-4-gizmo-*)
  2. Third-party channel Midjourney-Proxy(Plus) interface, API Documentation
  3. Third-party channel Suno API interface, API Documentation
  4. Custom channels, supporting full call address input
  5. Rerank models (Cohere and Jina), API Documentation
  6. Claude Messages format, API Documentation
  7. Dify, currently only supports chatflow

Environment Variable Configuration

For detailed configuration instructions, please refer to Installation Guide-Environment Variables Configuration:

  • GENERATE_DEFAULT_TOKEN: Whether to generate initial tokens for newly registered users, default is false
  • STREAMING_TIMEOUT: Streaming response timeout, default is 120 seconds
  • DIFY_DEBUG: Whether to output workflow and node information for Dify channels, default is true
  • FORCE_STREAM_OPTION: Whether to override client stream_options parameter, default is true
  • GET_MEDIA_TOKEN: Whether to count image tokens, default is true
  • GET_MEDIA_TOKEN_NOT_STREAM: Whether to count image tokens in non-streaming cases, default is true
  • UPDATE_TASK: Whether to update asynchronous tasks (Midjourney, Suno), default is true
  • COHERE_SAFETY_SETTING: Cohere model safety settings, options are NONE, CONTEXTUAL, STRICT, default is NONE
  • GEMINI_VISION_MAX_IMAGE_NUM: Maximum number of images for Gemini models, default is 16
  • MAX_FILE_DOWNLOAD_MB: Maximum file download size in MB, default is 20
  • CRYPTO_SECRET: Encryption key used for encrypting database content
  • AZURE_DEFAULT_API_VERSION: Azure channel default API version, default is 2025-04-01-preview
  • NOTIFICATION_LIMIT_DURATION_MINUTE: Notification limit duration, default is 10 minutes
  • NOTIFY_LIMIT_COUNT: Maximum number of user notifications within the specified duration, default is 2
  • ERROR_LOG_ENABLED=true: Whether to record and display error logs, default is false

Deployment

For detailed deployment guides, please refer to Installation Guide-Deployment Methods:

Tip

Latest Docker image: calciumion/new-api:latest

Multi-machine Deployment Considerations

  • Environment variable SESSION_SECRET must be set, otherwise login status will be inconsistent across multiple machines
  • If sharing Redis, CRYPTO_SECRET must be set, otherwise Redis content cannot be accessed across multiple machines

Deployment Requirements

  • Local database (default): SQLite (Docker deployment must mount the /data directory)
  • Remote database: MySQL version >= 5.7.8, PgSQL version >= 9.6

Deployment Methods

Using BaoTa Panel Docker Feature

Install BaoTa Panel (version 9.2.0 or above), find New-API in the application store and install it. Tutorial with images

# Download the project
git clone https://github.com/Calcium-Ion/new-api.git
cd new-api
# Edit docker-compose.yml as needed
# Start
docker-compose up -d

Using Docker Image Directly

# Using SQLite
docker run --name new-api -d --restart always -p 3000:3000 -e TZ=Asia/Shanghai -v /home/ubuntu/data/new-api:/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 /home/ubuntu/data/new-api:/data calciumion/new-api:latest

Channel Retry and Cache

Channel retry functionality has been implemented, you can set the number of retries in Settings->Operation Settings->General Settings. It is recommended to enable caching.

Cache Configuration Method

  1. REDIS_CONN_STRING: Set Redis as cache
  2. MEMORY_CACHE_ENABLED: Enable memory cache (no need to set manually if Redis is set)

API Documentation

For detailed API documentation, please refer to API Documentation:

Other projects based on New API:

  • new-api-horizon: High-performance optimized version of New API
  • VoAPI: Frontend beautified version based on New API

Help and Support

If you have any questions, please refer to Help and Support:

🌟 Star History

Star History Chart

Description
No description provided
Readme 26 MiB
Languages
JavaScript 54.5%
Go 44.6%
CSS 0.7%