chore: update copy

* feat: Update default API version for Azure OpenAI.

* chore: update other theme

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

.github/workflows/docker-image-amd64-en.yml

@@ -20,6 +20,13 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v3
 
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi      
+
       - name: Save version info
         run: |
           git describe --tags > VERSION 

.github/workflows/docker-image-amd64.yml

@@ -20,6 +20,13 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v3
 
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi        
+
       - name: Save version info
         run: |
           git describe --tags > VERSION 

.github/workflows/docker-image-arm64.yml

@@ -21,6 +21,13 @@ jobs:
       - name: Check out the repo
         uses: actions/checkout@v3
 
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi
+
       - name: Save version info
         run: |
           git describe --tags > VERSION 

.github/workflows/linux-release.yml

@@ -20,6 +20,12 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi
       - uses: actions/setup-node@v3
         with:
           node-version: 16

.github/workflows/macos-release.yml

@@ -20,6 +20,12 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi
       - uses: actions/setup-node@v3
         with:
           node-version: 16

.github/workflows/windows-release.yml

@@ -23,6 +23,12 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+      - name: Check repository URL
+        run: |
+          REPO_URL=$(git config --get remote.origin.url)
+          if [[ $REPO_URL == *"pro" ]]; then
+            exit 1
+          fi
       - uses: actions/setup-node@v3
         with:
           node-version: 16

Dockerfile

@@ -12,6 +12,10 @@ WORKDIR /web/berry
 RUN npm install
 RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
 
+WORKDIR /web/air
+RUN npm install
+RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+
 FROM golang AS builder2
 
 ENV GO111MODULE=on \

README.md

@@ -79,6 +79,8 @@ _✨ 通过标准的 OpenAI API 格式访问所有的大模型，开箱即用
    + [ ] [字节云雀大模型](https://www.volcengine.com/product/ark) (WIP)
    + [x] [MINIMAX](https://api.minimax.chat/)
    + [x] [Groq](https://wow.groq.com/)
+   + [x] [Ollama](https://github.com/ollama/ollama)
+   + [x] [零一万物](https://platform.lingyiwanwu.com/)
 2. 支持配置镜像以及众多[第三方代理服务](https://iamazing.cn/page/openai-api-third-party-services)。
 3. 支持通过**负载均衡**的方式访问多个渠道。
 4. 支持 **stream 模式**，可以通过流式传输实现打字机效果。
@@ -379,6 +381,7 @@ graph LR
 19. `ENABLE_METRIC`：是否根据请求成功率禁用渠道，默认不开启，可选值为 `true` 和 `false`。
 20. `METRIC_QUEUE_SIZE`：请求成功率统计队列大小，默认为 `10`。
 21. `METRIC_SUCCESS_RATE_THRESHOLD`：请求成功率阈值，默认为 `0.8`。
+22. `INITIAL_ROOT_TOKEN`：如果设置了该值，则在系统首次启动时会自动创建一个值为该环境变量值的 root 用户令牌。
 
 ### 命令行参数
 1. `--port <port_number>`: 指定服务器监听的端口号，默认为 `3000`。

common/config/config.go

@@ -1,7 +1,7 @@
 package config
 
 import (
-	"github.com/songquanpeng/one-api/common/helper"
+	"github.com/songquanpeng/one-api/common/env"
 	"os"
 	"strconv"
 	"sync"
@@ -76,14 +76,14 @@ var MessagePusherToken = ""
 var TurnstileSiteKey = ""
 var TurnstileSecretKey = ""
 
-var QuotaForNewUser = 0
-var QuotaForInviter = 0
-var QuotaForInvitee = 0
+var QuotaForNewUser int64 = 0
+var QuotaForInviter int64 = 0
+var QuotaForInvitee int64 = 0
 var ChannelDisableThreshold = 5.0
 var AutomaticDisableChannelEnabled = false
 var AutomaticEnableChannelEnabled = false
-var QuotaRemindThreshold = 1000
-var PreConsumedQuota = 500
+var QuotaRemindThreshold int64 = 1000
+var PreConsumedQuota int64 = 500
 var ApproximateTokenEnabled = false
 var RetryTimes = 0
 
@@ -94,28 +94,29 @@ var IsMasterNode = os.Getenv("NODE_TYPE") != "slave"
 var requestInterval, _ = strconv.Atoi(os.Getenv("POLLING_INTERVAL"))
 var RequestInterval = time.Duration(requestInterval) * time.Second
 
-var SyncFrequency = helper.GetOrDefaultEnvInt("SYNC_FREQUENCY", 10*60) // unit is second
+var SyncFrequency = env.Int("SYNC_FREQUENCY", 10*60) // unit is second
 
 var BatchUpdateEnabled = false
-var BatchUpdateInterval = helper.GetOrDefaultEnvInt("BATCH_UPDATE_INTERVAL", 5)
+var BatchUpdateInterval = env.Int("BATCH_UPDATE_INTERVAL", 5)
 
-var RelayTimeout = helper.GetOrDefaultEnvInt("RELAY_TIMEOUT", 0) // unit is second
+var RelayTimeout = env.Int("RELAY_TIMEOUT", 0) // unit is second
 
-var GeminiSafetySetting = helper.GetOrDefaultEnvString("GEMINI_SAFETY_SETTING", "BLOCK_NONE")
+var GeminiSafetySetting = env.String("GEMINI_SAFETY_SETTING", "BLOCK_NONE")
 
-var Theme = helper.GetOrDefaultEnvString("THEME", "default")
+var Theme = env.String("THEME", "default")
 var ValidThemes = map[string]bool{
 	"default": true,
 	"berry":   true,
+	"air":     true,
 }
 
 // All duration's unit is seconds
 // Shouldn't larger then RateLimitKeyExpirationDuration
 var (
-	GlobalApiRateLimitNum            = helper.GetOrDefaultEnvInt("GLOBAL_API_RATE_LIMIT", 180)
+	GlobalApiRateLimitNum            = env.Int("GLOBAL_API_RATE_LIMIT", 180)
 	GlobalApiRateLimitDuration int64 = 3 * 60
 
-	GlobalWebRateLimitNum            = helper.GetOrDefaultEnvInt("GLOBAL_WEB_RATE_LIMIT", 60)
+	GlobalWebRateLimitNum            = env.Int("GLOBAL_WEB_RATE_LIMIT", 60)
 	GlobalWebRateLimitDuration int64 = 3 * 60
 
 	UploadRateLimitNum            = 10
@@ -130,8 +131,10 @@ var (
 
 var RateLimitKeyExpirationDuration = 20 * time.Minute
 
-var EnableMetric = helper.GetOrDefaultEnvBool("ENABLE_METRIC", false)
-var MetricQueueSize = helper.GetOrDefaultEnvInt("METRIC_QUEUE_SIZE", 10)
-var MetricSuccessRateThreshold = helper.GetOrDefaultEnvFloat64("METRIC_SUCCESS_RATE_THRESHOLD", 0.8)
-var MetricSuccessChanSize = helper.GetOrDefaultEnvInt("METRIC_SUCCESS_CHAN_SIZE", 1024)
-var MetricFailChanSize = helper.GetOrDefaultEnvInt("METRIC_FAIL_CHAN_SIZE", 128)
+var EnableMetric = env.Bool("ENABLE_METRIC", false)
+var MetricQueueSize = env.Int("METRIC_QUEUE_SIZE", 10)
+var MetricSuccessRateThreshold = env.Float64("METRIC_SUCCESS_RATE_THRESHOLD", 0.8)
+var MetricSuccessChanSize = env.Int("METRIC_SUCCESS_CHAN_SIZE", 1024)
+var MetricFailChanSize = env.Int("METRIC_FAIL_CHAN_SIZE", 128)
+
+var InitialRootToken = os.Getenv("INITIAL_ROOT_TOKEN")

common/constants.go

@@ -69,6 +69,8 @@ const (
 	ChannelTypeMinimax
 	ChannelTypeMistral
 	ChannelTypeGroq
+	ChannelTypeOllama
+	ChannelTypeLingYiWanWu
 
 	ChannelTypeDummy
 )
@@ -104,6 +106,8 @@ var ChannelBaseURLs = []string{
 	"https://api.minimax.chat",                  // 27
 	"https://api.mistral.ai",                    // 28
 	"https://api.groq.com/openai",               // 29
+	"http://localhost:11434",                    // 30
+	"https://api.lingyiwanwu.com",               // 31
 }
 
 const (

common/database.go

@@ -1,9 +1,12 @@
 package common
 
-import "github.com/songquanpeng/one-api/common/helper"
+import (
+	"github.com/songquanpeng/one-api/common/env"
+)
 
 var UsingSQLite = false
 var UsingPostgreSQL = false
+var UsingMySQL = false
 
 var SQLitePath = "one-api.db"
-var SQLiteBusyTimeout = helper.GetOrDefaultEnvInt("SQLITE_BUSY_TIMEOUT", 3000)
+var SQLiteBusyTimeout = env.Int("SQLITE_BUSY_TIMEOUT", 3000)

common/env/helper.go

@@ -0,0 +1,42 @@
+package env
+
+import (
+	"os"
+	"strconv"
+)
+
+func Bool(env string, defaultValue bool) bool {
+	if env == "" || os.Getenv(env) == "" {
+		return defaultValue
+	}
+	return os.Getenv(env) == "true"
+}
+
+func Int(env string, defaultValue int) int {
+	if env == "" || os.Getenv(env) == "" {
+		return defaultValue
+	}
+	num, err := strconv.Atoi(os.Getenv(env))
+	if err != nil {
+		return defaultValue
+	}
+	return num
+}
+
+func Float64(env string, defaultValue float64) float64 {
+	if env == "" || os.Getenv(env) == "" {
+		return defaultValue
+	}
+	num, err := strconv.ParseFloat(os.Getenv(env), 64)
+	if err != nil {
+		return defaultValue
+	}
+	return num
+}
+
+func String(env string, defaultValue string) string {
+	if env == "" || os.Getenv(env) == "" {
+		return defaultValue
+	}
+	return os.Getenv(env)
+}

common/helper/helper.go

@@ -3,12 +3,10 @@ package helper
 import (
 	"fmt"
 	"github.com/google/uuid"
-	"github.com/songquanpeng/one-api/common/logger"
 	"html/template"
 	"log"
 	"math/rand"
 	"net"
-	"os"
 	"os/exec"
 	"runtime"
 	"strconv"
@@ -187,6 +185,10 @@ func GetTimeString() string {
 	return fmt.Sprintf("%s%d", now.Format("20060102150405"), now.UnixNano()%1e9)
 }
 
+func GenRequestID() string {
+	return GetTimeString() + GetRandomNumberString(8)
+}
+
 func Max(a int, b int) int {
 	if a >= b {
 		return a
@@ -195,44 +197,6 @@ func Max(a int, b int) int {
 	}
 }
 
-func GetOrDefaultEnvBool(env string, defaultValue bool) bool {
-	if env == "" || os.Getenv(env) == "" {
-		return defaultValue
-	}
-	return os.Getenv(env) == "true"
-}
-
-func GetOrDefaultEnvInt(env string, defaultValue int) int {
-	if env == "" || os.Getenv(env) == "" {
-		return defaultValue
-	}
-	num, err := strconv.Atoi(os.Getenv(env))
-	if err != nil {
-		logger.SysError(fmt.Sprintf("failed to parse %s: %s, using default value: %d", env, err.Error(), defaultValue))
-		return defaultValue
-	}
-	return num
-}
-
-func GetOrDefaultEnvFloat64(env string, defaultValue float64) float64 {
-	if env == "" || os.Getenv(env) == "" {
-		return defaultValue
-	}
-	num, err := strconv.ParseFloat(os.Getenv(env), 64)
-	if err != nil {
-		logger.SysError(fmt.Sprintf("failed to parse %s: %s, using default value: %f", env, err.Error(), defaultValue))
-		return defaultValue
-	}
-	return num
-}
-
-func GetOrDefaultEnvString(env string, defaultValue string) string {
-	if env == "" || os.Getenv(env) == "" {
-		return defaultValue
-	}
-	return os.Getenv(env)
-}
-
 func AssignOrDefault(value string, defaultValue string) string {
 	if len(value) != 0 {
 		return value

common/logger/logger.go

@@ -4,6 +4,8 @@ import (
 	"context"
 	"fmt"
 	"github.com/gin-gonic/gin"
+	"github.com/songquanpeng/one-api/common/config"
+	"github.com/songquanpeng/one-api/common/helper"
 	"io"
 	"log"
 	"os"
@@ -54,7 +56,9 @@ func SysError(s string) {
 }
 
 func Debug(ctx context.Context, msg string) {
-	logHelper(ctx, loggerDEBUG, msg)
+	if config.DebugEnabled {
+		logHelper(ctx, loggerDEBUG, msg)
+	}
 }
 
 func Info(ctx context.Context, msg string) {
@@ -91,6 +95,9 @@ func logHelper(ctx context.Context, level string, msg string) {
 		writer = gin.DefaultWriter
 	}
 	id := ctx.Value(RequestIdKey)
+	if id == nil {
+		id = helper.GenRequestID()
+	}
 	now := time.Now()
 	_, _ = fmt.Fprintf(writer, "[%s] %v | %s | %s \n", level, now.Format("2006/01/02 - 15:04:05"), id, msg)
 	if !setupLogWorking {

common/model-ratio.go

@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"github.com/songquanpeng/one-api/common/logger"
 	"strings"
-	"time"
 )
 
 const (
@@ -31,7 +30,7 @@ var ModelRatio = map[string]float64{
 	"gpt-4-0125-preview":      5,    // $0.01 / 1K tokens
 	"gpt-4-turbo-preview":     5,    // $0.01 / 1K tokens
 	"gpt-4-vision-preview":    5,    // $0.01 / 1K tokens
-	"gpt-3.5-turbo":           0.75, // $0.0015 / 1K tokens
+	"gpt-3.5-turbo":           0.25, // $0.0005 / 1K tokens
 	"gpt-3.5-turbo-0301":      0.75,
 	"gpt-3.5-turbo-0613":      0.75,
 	"gpt-3.5-turbo-16k":       1.5, // $0.003 / 1K tokens
@@ -69,15 +68,19 @@ var ModelRatio = map[string]float64{
 	"claude-instant-1.2":       0.8 / 1000 * USD,
 	"claude-2.0":               8.0 / 1000 * USD,
 	"claude-2.1":               8.0 / 1000 * USD,
-	"claude-3-haiku-20240229":  0.25 / 1000 * USD,
+	"claude-3-haiku-20240307":  0.25 / 1000 * USD,
 	"claude-3-sonnet-20240229": 3.0 / 1000 * USD,
 	"claude-3-opus-20240229":   15.0 / 1000 * USD,
 	// https://cloud.baidu.com/doc/WENXINWORKSHOP/s/hlrk4akp7
-	"ERNIE-Bot":         0.8572,     // ￥0.012 / 1k tokens
-	"ERNIE-Bot-turbo":   0.5715,     // ￥0.008 / 1k tokens
-	"ERNIE-Bot-4":       0.12 * RMB, // ￥0.12 / 1k tokens
-	"ERNIE-Bot-8k":      0.024 * RMB,
-	"Embedding-V1":      0.1429, // ￥0.002 / 1k tokens
+	"ERNIE-Bot":       0.8572,     // ￥0.012 / 1k tokens
+	"ERNIE-Bot-turbo": 0.5715,     // ￥0.008 / 1k tokens
+	"ERNIE-Bot-4":     0.12 * RMB, // ￥0.12 / 1k tokens
+	"ERNIE-Bot-8k":    0.024 * RMB,
+	"Embedding-V1":    0.1429, // ￥0.002 / 1k tokens
+	"bge-large-zh":    0.002 * RMB,
+	"bge-large-en":    0.002 * RMB,
+	"bge-large-8k":    0.002 * RMB,
+	// https://ai.google.dev/pricing
 	"PaLM-2":            1,
 	"gemini-pro":        1, // $0.00025 / 1k characters -> $0.001 / 1k tokens
 	"gemini-pro-vision": 1, // $0.00025 / 1k characters -> $0.001 / 1k tokens
@@ -130,6 +133,10 @@ var ModelRatio = map[string]float64{
 	"llama2-7b-2048":     0.1 / 1000 * USD,
 	"mixtral-8x7b-32768": 0.27 / 1000 * USD,
 	"gemma-7b-it":        0.1 / 1000 * USD,
+	// https://platform.lingyiwanwu.com/docs#-计费单元
+	"yi-34b-chat-0205": 2.5 / 1000 * RMB,
+	"yi-34b-chat-200k": 12.0 / 1000 * RMB,
+	"yi-vl-plus":       6.0 / 1000 * RMB,
 }
 
 var CompletionRatio = map[string]float64{}
@@ -217,7 +224,7 @@ func GetCompletionRatio(name string) float64 {
 		return ratio
 	}
 	if strings.HasPrefix(name, "gpt-3.5") {
-		if strings.HasSuffix(name, "0125") {
+		if name == "gpt-3.5-turbo" || strings.HasSuffix(name, "0125") {
 			// https://openai.com/blog/new-embedding-models-and-api-updates
 			// Updated GPT-3.5 Turbo model and lower pricing
 			return 3
@@ -225,15 +232,6 @@ func GetCompletionRatio(name string) float64 {
 		if strings.HasSuffix(name, "1106") {
 			return 2
 		}
-		if name == "gpt-3.5-turbo" || name == "gpt-3.5-turbo-16k" {
-			// TODO: clear this after 2023-12-11
-			now := time.Now()
-			// https://platform.openai.com/docs/models/continuous-model-upgrades
-			// if after 2023-12-11, use 2
-			if now.After(time.Date(2023, 12, 11, 0, 0, 0, 0, time.UTC)) {
-				return 2
-			}
-		}
 		return 4.0 / 3.0
 	}
 	if strings.HasPrefix(name, "gpt-4") {

common/utils.go

@@ -5,7 +5,7 @@ import (
 	"github.com/songquanpeng/one-api/common/config"
 )
 
-func LogQuota(quota int) string {
+func LogQuota(quota int64) string {
 	if config.DisplayInCurrencyEnabled {
 		return fmt.Sprintf("＄%.6f 额度", float64(quota)/config.QuotaPerUnit)
 	} else {

controller/billing.go

@@ -8,8 +8,8 @@ import (
 )
 
 func GetSubscription(c *gin.Context) {
-	var remainQuota int
-	var usedQuota int
+	var remainQuota int64
+	var usedQuota int64
 	var err error
 	var token *model.Token
 	var expiredTime int64
@@ -60,7 +60,7 @@ func GetSubscription(c *gin.Context) {
 }
 
 func GetUsage(c *gin.Context) {
-	var quota int
+	var quota int64
 	var err error
 	var token *model.Token
 	if config.DisplayTokenStatEnabled {

controller/channel-test.go

@@ -30,7 +30,7 @@ import (
 
 func buildTestRequest() *relaymodel.GeneralOpenAIRequest {
 	testRequest := &relaymodel.GeneralOpenAIRequest{
-		MaxTokens: 1,
+		MaxTokens: 2,
 		Stream:    false,
 		Model:     "gpt-3.5-turbo",
 	}

controller/token.go

@@ -16,7 +16,10 @@ func GetAllTokens(c *gin.Context) {
 	if p < 0 {
 		p = 0
 	}
-	tokens, err := model.GetAllUserTokens(userId, p*config.ItemsPerPage, config.ItemsPerPage)
+
+	order := c.Query("order")
+	tokens, err := model.GetAllUserTokens(userId, p*config.ItemsPerPage, config.ItemsPerPage, order)
+
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,

controller/user.go

@@ -180,24 +180,27 @@ func Register(c *gin.Context) {
 }
 
 func GetAllUsers(c *gin.Context) {
-	p, _ := strconv.Atoi(c.Query("p"))
-	if p < 0 {
-		p = 0
-	}
-	users, err := model.GetAllUsers(p*config.ItemsPerPage, config.ItemsPerPage)
-	if err != nil {
-		c.JSON(http.StatusOK, gin.H{
-			"success": false,
-			"message": err.Error(),
-		})
-		return
-	}
-	c.JSON(http.StatusOK, gin.H{
-		"success": true,
-		"message": "",
-		"data":    users,
-	})
-	return
+    p, _ := strconv.Atoi(c.Query("p"))
+    if p < 0 {
+        p = 0
+    }
+    
+    order := c.DefaultQuery("order", "")
+    users, err := model.GetAllUsers(p*config.ItemsPerPage, config.ItemsPerPage, order)
+	
+    if err != nil {
+        c.JSON(http.StatusOK, gin.H{
+            "success": false,
+            "message": err.Error(),
+        })
+        return
+    }
+    
+    c.JSON(http.StatusOK, gin.H{
+        "success": true,
+        "message": "",
+        "data":    users,
+    })
 }
 
 func SearchUsers(c *gin.Context) {

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.4'
 
 services:
   one-api:
-    image: justsong/one-api:latest
+    image: "${REGISTRY:-docker.io}/justsong/one-api:latest"
     container_name: one-api
     restart: always
     command: --log-dir /app/logs
@@ -29,12 +29,12 @@ services:
       retries: 3
 
   redis:
-    image: redis:latest
+    image: "${REGISTRY:-docker.io}/redis:latest"
     container_name: redis
     restart: always
 
   db:
-    image: mysql:8.2.0
+    image: "${REGISTRY:-docker.io}/mysql:8.2.0"
     restart: always
     container_name: mysql
     volumes:

go.mod

@@ -42,7 +42,8 @@ require (
 	github.com/gorilla/sessions v1.2.1 // indirect
 	github.com/jackc/pgpassfile v1.0.0 // indirect
 	github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a // indirect
-	github.com/jackc/pgx/v5 v5.3.1 // indirect
+	github.com/jackc/pgx/v5 v5.5.4 // indirect
+	github.com/jackc/puddle/v2 v2.2.1 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -58,8 +59,9 @@ require (
 	github.com/ugorji/go/codec v1.2.11 // indirect
 	golang.org/x/arch v0.3.0 // indirect
 	golang.org/x/net v0.17.0 // indirect
+	golang.org/x/sync v0.1.0 // indirect
 	golang.org/x/sys v0.15.0 // indirect
 	golang.org/x/text v0.14.0 // indirect
-	google.golang.org/protobuf v1.30.0 // indirect
+	google.golang.org/protobuf v1.33.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

go.sum

@@ -73,8 +73,10 @@ github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsI
 github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
 github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a h1:bbPeKD0xmW/Y25WS6cokEszi5g+S0QxI/d45PkRi7Nk=
 github.com/jackc/pgservicefile v0.0.0-20221227161230-091c0ba34f0a/go.mod h1:5TJZWKEWniPve33vlWYSoGYefn3gLQRzjfDlhSJ9ZKM=
-github.com/jackc/pgx/v5 v5.3.1 h1:Fcr8QJ1ZeLi5zsPZqQeUZhNhxfkkKBOgJuYkJHoBOtU=
-github.com/jackc/pgx/v5 v5.3.1/go.mod h1:t3JDKnCBlYIc0ewLF0Q7B8MXmoIaBOZj/ic7iHozM/8=
+github.com/jackc/pgx/v5 v5.5.4 h1:Xp2aQS8uXButQdnCMWNmvx6UysWQQC+u1EoizjguY+8=
+github.com/jackc/pgx/v5 v5.5.4/go.mod h1:ez9gk+OAat140fv9ErkZDYFWmXLfV+++K0uAOiwgm1A=
+github.com/jackc/puddle/v2 v2.2.1 h1:RhxXJtFG022u4ibrCSMSiu5aOq1i77R3OHKNJj77OAk=
+github.com/jackc/puddle/v2 v2.2.1/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.4/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
@@ -157,6 +159,8 @@ golang.org/x/image v0.14.0/go.mod h1:HUYqC05R2ZcZ3ejNQsIHQDQiwWM4JBqmm6MKANTp4LE
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.17.0 h1:pVaXccu2ozPjCXewfr1S7xza/zcXTity9cCdXQYSjIM=
 golang.org/x/net v0.17.0/go.mod h1:NxSsAGuq816PNPmqtQdLE42eU2Fs7NoRIZrHJAlaCOE=
+golang.org/x/sync v0.1.0 h1:wsuoTGHzEhffawBOhz5CYhcrV4IdKZbEyZjBMuTp12o=
+golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -177,8 +181,8 @@ golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IV
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
-google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
-google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.33.0 h1:uNO2rsAINq/JlFpSdYEKIZ0uKD/R9cpdv0T+yoGwGmI=
+google.golang.org/protobuf v1.33.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=

main.go

@@ -30,11 +30,25 @@ func main() {
 	if config.DebugEnabled {
 		logger.SysLog("running in debug mode")
 	}
+	var err error
 	// Initialize SQL Database
-	err := model.InitDB()
+	model.DB, err = model.InitDB("SQL_DSN")
 	if err != nil {
 		logger.FatalLog("failed to initialize database: " + err.Error())
 	}
+	if os.Getenv("LOG_SQL_DSN") != "" {
+		logger.SysLog("using secondary database for table logs")
+		model.LOG_DB, err = model.InitDB("LOG_SQL_DSN")
+		if err != nil {
+			logger.FatalLog("failed to initialize secondary database: " + err.Error())
+		}
+	} else {
+		model.LOG_DB = model.DB
+	}
+	err = model.CreateRootAccountIfNeed()
+	if err != nil {
+		logger.FatalLog("database init error: " + err.Error())
+	}
 	defer func() {
 		err := model.CloseDB()
 		if err != nil {

middleware/request-id.go

@@ -9,7 +9,7 @@ import (
 
 func RequestId() func(c *gin.Context) {
 	return func(c *gin.Context) {
-		id := helper.GetTimeString() + helper.GetRandomNumberString(8)
+		id := helper.GenRequestID()
 		c.Set(logger.RequestIdKey, id)
 		ctx := context.WithValue(c.Request.Context(), logger.RequestIdKey, id)
 		c.Request = c.Request.WithContext(ctx)

model/cache.go

@@ -1,6 +1,7 @@
 package model
 
 import (
+	"context"
 	"encoding/json"
 	"errors"
 	"fmt"
@@ -70,31 +71,42 @@ func CacheGetUserGroup(id int) (group string, err error) {
 	return group, err
 }
 
-func CacheGetUserQuota(id int) (quota int, err error) {
+func fetchAndUpdateUserQuota(ctx context.Context, id int) (quota int64, err error) {
+	quota, err = GetUserQuota(id)
+	if err != nil {
+		return 0, err
+	}
+	err = common.RedisSet(fmt.Sprintf("user_quota:%d", id), fmt.Sprintf("%d", quota), time.Duration(UserId2QuotaCacheSeconds)*time.Second)
+	if err != nil {
+		logger.Error(ctx, "Redis set user quota error: "+err.Error())
+	}
+	return
+}
+
+func CacheGetUserQuota(ctx context.Context, id int) (quota int64, err error) {
 	if !common.RedisEnabled {
 		return GetUserQuota(id)
 	}
 	quotaString, err := common.RedisGet(fmt.Sprintf("user_quota:%d", id))
 	if err != nil {
-		quota, err = GetUserQuota(id)
-		if err != nil {
-			return 0, err
-		}
-		err = common.RedisSet(fmt.Sprintf("user_quota:%d", id), fmt.Sprintf("%d", quota), time.Duration(UserId2QuotaCacheSeconds)*time.Second)
-		if err != nil {
-			logger.SysError("Redis set user quota error: " + err.Error())
-		}
-		return quota, err
+		return fetchAndUpdateUserQuota(ctx, id)
 	}
-	quota, err = strconv.Atoi(quotaString)
-	return quota, err
+	quota, err = strconv.ParseInt(quotaString, 10, 64)
+	if err != nil {
+		return 0, nil
+	}
+	if quota <= config.PreConsumedQuota { // when user's quota is less than pre-consumed quota, we need to fetch from db
+		logger.Infof(ctx, "user %d's cached quota is too low: %d, refreshing from db", quota, id)
+		return fetchAndUpdateUserQuota(ctx, id)
+	}
+	return quota, nil
 }
 
-func CacheUpdateUserQuota(id int) error {
+func CacheUpdateUserQuota(ctx context.Context, id int) error {
 	if !common.RedisEnabled {
 		return nil
 	}
-	quota, err := CacheGetUserQuota(id)
+	quota, err := CacheGetUserQuota(ctx, id)
 	if err != nil {
 		return err
 	}
@@ -102,7 +114,7 @@ func CacheUpdateUserQuota(id int) error {
 	return err
 }
 
-func CacheDecreaseUserQuota(id int, quota int) error {
+func CacheDecreaseUserQuota(id int, quota int64) error {
 	if !common.RedisEnabled {
 		return nil
 	}

model/channel.go

@@ -178,7 +178,7 @@ func UpdateChannelStatusById(id int, status int) {
 	}
 }
 
-func UpdateChannelUsedQuota(id int, quota int) {
+func UpdateChannelUsedQuota(id int, quota int64) {
 	if config.BatchUpdateEnabled {
 		addNewRecord(BatchUpdateTypeChannelUsedQuota, id, quota)
 		return
@@ -186,7 +186,7 @@ func UpdateChannelUsedQuota(id int, quota int) {
 	updateChannelUsedQuota(id, quota)
 }
 
-func updateChannelUsedQuota(id int, quota int) {
+func updateChannelUsedQuota(id int, quota int64) {
 	err := DB.Model(&Channel{}).Where("id = ?", id).Update("used_quota", gorm.Expr("used_quota + ?", quota)).Error
 	if err != nil {
 		logger.SysError("failed to update channel used quota: " + err.Error())

model/log.go

@@ -45,13 +45,13 @@ func RecordLog(userId int, logType int, content string) {
 		Type:      logType,
 		Content:   content,
 	}
-	err := DB.Create(log).Error
+	err := LOG_DB.Create(log).Error
 	if err != nil {
 		logger.SysError("failed to record log: " + err.Error())
 	}
 }
 
-func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptTokens int, completionTokens int, modelName string, tokenName string, quota int, content string) {
+func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptTokens int, completionTokens int, modelName string, tokenName string, quota int64, content string) {
 	logger.Info(ctx, fmt.Sprintf("record consume log: userId=%d, channelId=%d, promptTokens=%d, completionTokens=%d, modelName=%s, tokenName=%s, quota=%d, content=%s", userId, channelId, promptTokens, completionTokens, modelName, tokenName, quota, content))
 	if !config.LogConsumeEnabled {
 		return
@@ -66,10 +66,10 @@ func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptToke
 		CompletionTokens: completionTokens,
 		TokenName:        tokenName,
 		ModelName:        modelName,
-		Quota:            quota,
+		Quota:            int(quota),
 		ChannelId:        channelId,
 	}
-	err := DB.Create(log).Error
+	err := LOG_DB.Create(log).Error
 	if err != nil {
 		logger.Error(ctx, "failed to record log: "+err.Error())
 	}
@@ -78,9 +78,9 @@ func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptToke
 func GetAllLogs(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, startIdx int, num int, channel int) (logs []*Log, err error) {
 	var tx *gorm.DB
 	if logType == LogTypeUnknown {
-		tx = DB
+		tx = LOG_DB
 	} else {
-		tx = DB.Where("type = ?", logType)
+		tx = LOG_DB.Where("type = ?", logType)
 	}
 	if modelName != "" {
 		tx = tx.Where("model_name = ?", modelName)
@@ -107,9 +107,9 @@ func GetAllLogs(logType int, startTimestamp int64, endTimestamp int64, modelName
 func GetUserLogs(userId int, logType int, startTimestamp int64, endTimestamp int64, modelName string, tokenName string, startIdx int, num int) (logs []*Log, err error) {
 	var tx *gorm.DB
 	if logType == LogTypeUnknown {
-		tx = DB.Where("user_id = ?", userId)
+		tx = LOG_DB.Where("user_id = ?", userId)
 	} else {
-		tx = DB.Where("user_id = ? and type = ?", userId, logType)
+		tx = LOG_DB.Where("user_id = ? and type = ?", userId, logType)
 	}
 	if modelName != "" {
 		tx = tx.Where("model_name = ?", modelName)
@@ -128,17 +128,17 @@ func GetUserLogs(userId int, logType int, startTimestamp int64, endTimestamp int
 }
 
 func SearchAllLogs(keyword string) (logs []*Log, err error) {
-	err = DB.Where("type = ? or content LIKE ?", keyword, keyword+"%").Order("id desc").Limit(config.MaxRecentItems).Find(&logs).Error
+	err = LOG_DB.Where("type = ? or content LIKE ?", keyword, keyword+"%").Order("id desc").Limit(config.MaxRecentItems).Find(&logs).Error
 	return logs, err
 }
 
 func SearchUserLogs(userId int, keyword string) (logs []*Log, err error) {
-	err = DB.Where("user_id = ? and type = ?", userId, keyword).Order("id desc").Limit(config.MaxRecentItems).Omit("id").Find(&logs).Error
+	err = LOG_DB.Where("user_id = ? and type = ?", userId, keyword).Order("id desc").Limit(config.MaxRecentItems).Omit("id").Find(&logs).Error
 	return logs, err
 }
 
-func SumUsedQuota(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, channel int) (quota int) {
-	tx := DB.Table("logs").Select("ifnull(sum(quota),0)")
+func SumUsedQuota(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, channel int) (quota int64) {
+	tx := LOG_DB.Table("logs").Select("ifnull(sum(quota),0)")
 	if username != "" {
 		tx = tx.Where("username = ?", username)
 	}
@@ -162,7 +162,7 @@ func SumUsedQuota(logType int, startTimestamp int64, endTimestamp int64, modelNa
 }
 
 func SumUsedToken(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string) (token int) {
-	tx := DB.Table("logs").Select("ifnull(sum(prompt_tokens),0) + ifnull(sum(completion_tokens),0)")
+	tx := LOG_DB.Table("logs").Select("ifnull(sum(prompt_tokens),0) + ifnull(sum(completion_tokens),0)")
 	if username != "" {
 		tx = tx.Where("username = ?", username)
 	}
@@ -183,7 +183,7 @@ func SumUsedToken(logType int, startTimestamp int64, endTimestamp int64, modelNa
 }
 
 func DeleteOldLog(targetTimestamp int64) (int64, error) {
-	result := DB.Where("created_at < ?", targetTimestamp).Delete(&Log{})
+	result := LOG_DB.Where("created_at < ?", targetTimestamp).Delete(&Log{})
 	return result.RowsAffected, result.Error
 }
 
@@ -207,7 +207,7 @@ func SearchLogsByDayAndModel(userId, start, end int) (LogStatistics []*LogStatis
 		groupSelect = "strftime('%Y-%m-%d', datetime(created_at, 'unixepoch')) as day"
 	}
 
-	err = DB.Raw(`
+	err = LOG_DB.Raw(`
 		SELECT `+groupSelect+`,
 		model_name, count(1) as request_count,
 		sum(quota) as quota,

model/main.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"github.com/songquanpeng/one-api/common"
 	"github.com/songquanpeng/one-api/common/config"
+	"github.com/songquanpeng/one-api/common/env"
 	"github.com/songquanpeng/one-api/common/helper"
 	"github.com/songquanpeng/one-api/common/logger"
 	"gorm.io/driver/mysql"
@@ -16,12 +17,13 @@ import (
 )
 
 var DB *gorm.DB
+var LOG_DB *gorm.DB
 
-func createRootAccountIfNeed() error {
+func CreateRootAccountIfNeed() error {
 	var user User
 	//if user.Status != util.UserStatusEnabled {
 	if err := DB.First(&user).Error; err != nil {
-		logger.SysLog("no user exists, create a root user for you: username is root, password is 123456")
+		logger.SysLog("no user exists, creating a root user for you: username is root, password is 123456")
 		hashedPassword, err := common.Password2Hash("123456")
 		if err != nil {
 			return err
@@ -33,16 +35,32 @@ func createRootAccountIfNeed() error {
 			Status:      common.UserStatusEnabled,
 			DisplayName: "Root User",
 			AccessToken: helper.GetUUID(),
-			Quota:       100000000,
+			Quota:       500000000000000,
 		}
 		DB.Create(&rootUser)
+		if config.InitialRootToken != "" {
+			logger.SysLog("creating initial root token as requested")
+			token := Token{
+				Id:             1,
+				UserId:         rootUser.Id,
+				Key:            config.InitialRootToken,
+				Status:         common.TokenStatusEnabled,
+				Name:           "Initial Root Token",
+				CreatedTime:    helper.GetTimestamp(),
+				AccessedTime:   helper.GetTimestamp(),
+				ExpiredTime:    -1,
+				RemainQuota:    500000000000000,
+				UnlimitedQuota: true,
+			}
+			DB.Create(&token)
+		}
 	}
 	return nil
 }
 
-func chooseDB() (*gorm.DB, error) {
-	if os.Getenv("SQL_DSN") != "" {
-		dsn := os.Getenv("SQL_DSN")
+func chooseDB(envName string) (*gorm.DB, error) {
+	if os.Getenv(envName) != "" {
+		dsn := os.Getenv(envName)
 		if strings.HasPrefix(dsn, "postgres://") {
 			// Use PostgreSQL
 			logger.SysLog("using PostgreSQL as database")
@@ -56,6 +74,7 @@ func chooseDB() (*gorm.DB, error) {
 		}
 		// Use MySQL
 		logger.SysLog("using MySQL as database")
+		common.UsingMySQL = true
 		return gorm.Open(mysql.Open(dsn), &gorm.Config{
 			PrepareStmt: true, // precompile SQL
 		})
@@ -69,67 +88,78 @@ func chooseDB() (*gorm.DB, error) {
 	})
 }
 
-func InitDB() (err error) {
-	db, err := chooseDB()
+func InitDB(envName string) (db *gorm.DB, err error) {
+	db, err = chooseDB(envName)
 	if err == nil {
 		if config.DebugSQLEnabled {
 			db = db.Debug()
 		}
-		DB = db
-		sqlDB, err := DB.DB()
+		sqlDB, err := db.DB()
 		if err != nil {
-			return err
+			return nil, err
 		}
-		sqlDB.SetMaxIdleConns(helper.GetOrDefaultEnvInt("SQL_MAX_IDLE_CONNS", 100))
-		sqlDB.SetMaxOpenConns(helper.GetOrDefaultEnvInt("SQL_MAX_OPEN_CONNS", 1000))
-		sqlDB.SetConnMaxLifetime(time.Second * time.Duration(helper.GetOrDefaultEnvInt("SQL_MAX_LIFETIME", 60)))
+		sqlDB.SetMaxIdleConns(env.Int("SQL_MAX_IDLE_CONNS", 100))
+		sqlDB.SetMaxOpenConns(env.Int("SQL_MAX_OPEN_CONNS", 1000))
+		sqlDB.SetConnMaxLifetime(time.Second * time.Duration(env.Int("SQL_MAX_LIFETIME", 60)))
 
 		if !config.IsMasterNode {
-			return nil
+			return db, err
+		}
+		if common.UsingMySQL {
+			_, _ = sqlDB.Exec("DROP INDEX idx_channels_key ON channels;") // TODO: delete this line when most users have upgraded
 		}
 		logger.SysLog("database migration started")
 		err = db.AutoMigrate(&Channel{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&Token{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&User{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&Option{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&Redemption{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&Ability{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		err = db.AutoMigrate(&Log{})
 		if err != nil {
-			return err
+			return nil, err
 		}
 		logger.SysLog("database migrated")
-		err = createRootAccountIfNeed()
-		return err
+		return db, err
 	} else {
 		logger.FatalLog(err)
 	}
-	return err
+	return db, err
 }
 
-func CloseDB() error {
-	sqlDB, err := DB.DB()
+func closeDB(db *gorm.DB) error {
+	sqlDB, err := db.DB()
 	if err != nil {
 		return err
 	}
 	err = sqlDB.Close()
 	return err
 }
+
+func CloseDB() error {
+	if LOG_DB != DB {
+		err := closeDB(LOG_DB)
+		if err != nil {
+			return err
+		}
+	}
+	return closeDB(DB)
+}

model/option.go

@@ -61,11 +61,11 @@ func InitOptionMap() {
 	config.OptionMap["MessagePusherToken"] = ""
 	config.OptionMap["TurnstileSiteKey"] = ""
 	config.OptionMap["TurnstileSecretKey"] = ""
-	config.OptionMap["QuotaForNewUser"] = strconv.Itoa(config.QuotaForNewUser)
-	config.OptionMap["QuotaForInviter"] = strconv.Itoa(config.QuotaForInviter)
-	config.OptionMap["QuotaForInvitee"] = strconv.Itoa(config.QuotaForInvitee)
-	config.OptionMap["QuotaRemindThreshold"] = strconv.Itoa(config.QuotaRemindThreshold)
-	config.OptionMap["PreConsumedQuota"] = strconv.Itoa(config.PreConsumedQuota)
+	config.OptionMap["QuotaForNewUser"] = strconv.FormatInt(config.QuotaForNewUser, 10)
+	config.OptionMap["QuotaForInviter"] = strconv.FormatInt(config.QuotaForInviter, 10)
+	config.OptionMap["QuotaForInvitee"] = strconv.FormatInt(config.QuotaForInvitee, 10)
+	config.OptionMap["QuotaRemindThreshold"] = strconv.FormatInt(config.QuotaRemindThreshold, 10)
+	config.OptionMap["PreConsumedQuota"] = strconv.FormatInt(config.PreConsumedQuota, 10)
 	config.OptionMap["ModelRatio"] = common.ModelRatio2JSONString()
 	config.OptionMap["GroupRatio"] = common.GroupRatio2JSONString()
 	config.OptionMap["CompletionRatio"] = common.CompletionRatio2JSONString()
@@ -193,15 +193,15 @@ func updateOptionMap(key string, value string) (err error) {
 	case "TurnstileSecretKey":
 		config.TurnstileSecretKey = value
 	case "QuotaForNewUser":
-		config.QuotaForNewUser, _ = strconv.Atoi(value)
+		config.QuotaForNewUser, _ = strconv.ParseInt(value, 10, 64)
 	case "QuotaForInviter":
-		config.QuotaForInviter, _ = strconv.Atoi(value)
+		config.QuotaForInviter, _ = strconv.ParseInt(value, 10, 64)
 	case "QuotaForInvitee":
-		config.QuotaForInvitee, _ = strconv.Atoi(value)
+		config.QuotaForInvitee, _ = strconv.ParseInt(value, 10, 64)
 	case "QuotaRemindThreshold":
-		config.QuotaRemindThreshold, _ = strconv.Atoi(value)
+		config.QuotaRemindThreshold, _ = strconv.ParseInt(value, 10, 64)
 	case "PreConsumedQuota":
-		config.PreConsumedQuota, _ = strconv.Atoi(value)
+		config.PreConsumedQuota, _ = strconv.ParseInt(value, 10, 64)
 	case "RetryTimes":
 		config.RetryTimes, _ = strconv.Atoi(value)
 	case "ModelRatio":

model/redemption.go

@@ -14,7 +14,7 @@ type Redemption struct {
 	Key          string `json:"key" gorm:"type:char(32);uniqueIndex"`
 	Status       int    `json:"status" gorm:"default:1"`
 	Name         string `json:"name" gorm:"index"`
-	Quota        int    `json:"quota" gorm:"default:100"`
+	Quota        int64  `json:"quota" gorm:"bigint;default:100"`
 	CreatedTime  int64  `json:"created_time" gorm:"bigint"`
 	RedeemedTime int64  `json:"redeemed_time" gorm:"bigint"`
 	Count        int    `json:"count" gorm:"-:all"` // only for api request
@@ -42,7 +42,7 @@ func GetRedemptionById(id int) (*Redemption, error) {
 	return &redemption, err
 }
 
-func Redeem(key string, userId int) (quota int, err error) {
+func Redeem(key string, userId int) (quota int64, err error) {
 	if key == "" {
 		return 0, errors.New("未提供兑换码")
 	}

model/token.go

@@ -20,15 +20,26 @@ type Token struct {
 	CreatedTime    int64  `json:"created_time" gorm:"bigint"`
 	AccessedTime   int64  `json:"accessed_time" gorm:"bigint"`
 	ExpiredTime    int64  `json:"expired_time" gorm:"bigint;default:-1"` // -1 means never expired
-	RemainQuota    int    `json:"remain_quota" gorm:"default:0"`
+	RemainQuota    int64  `json:"remain_quota" gorm:"bigint;default:0"`
 	UnlimitedQuota bool   `json:"unlimited_quota" gorm:"default:false"`
-	UsedQuota      int    `json:"used_quota" gorm:"default:0"` // used quota
+	UsedQuota      int64  `json:"used_quota" gorm:"bigint;default:0"` // used quota
 }
 
-func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
+func GetAllUserTokens(userId int, startIdx int, num int, order string) ([]*Token, error) {
 	var tokens []*Token
 	var err error
-	err = DB.Where("user_id = ?", userId).Order("id desc").Limit(num).Offset(startIdx).Find(&tokens).Error
+	query := DB.Where("user_id = ?", userId)
+	
+	switch order {
+	case "remain_quota":
+		query = query.Order("unlimited_quota desc, remain_quota desc")
+	case "used_quota":
+		query = query.Order("used_quota desc")
+	default:
+		query = query.Order("id desc")
+	}
+	
+	err = query.Limit(num).Offset(startIdx).Find(&tokens).Error
 	return tokens, err
 }
 
@@ -138,7 +149,7 @@ func DeleteTokenById(id int, userId int) (err error) {
 	return token.Delete()
 }
 
-func IncreaseTokenQuota(id int, quota int) (err error) {
+func IncreaseTokenQuota(id int, quota int64) (err error) {
 	if quota < 0 {
 		return errors.New("quota 不能为负数！")
 	}
@@ -149,7 +160,7 @@ func IncreaseTokenQuota(id int, quota int) (err error) {
 	return increaseTokenQuota(id, quota)
 }
 
-func increaseTokenQuota(id int, quota int) (err error) {
+func increaseTokenQuota(id int, quota int64) (err error) {
 	err = DB.Model(&Token{}).Where("id = ?", id).Updates(
 		map[string]interface{}{
 			"remain_quota":  gorm.Expr("remain_quota + ?", quota),
@@ -160,7 +171,7 @@ func increaseTokenQuota(id int, quota int) (err error) {
 	return err
 }
 
-func DecreaseTokenQuota(id int, quota int) (err error) {
+func DecreaseTokenQuota(id int, quota int64) (err error) {
 	if quota < 0 {
 		return errors.New("quota 不能为负数！")
 	}
@@ -171,7 +182,7 @@ func DecreaseTokenQuota(id int, quota int) (err error) {
 	return decreaseTokenQuota(id, quota)
 }
 
-func decreaseTokenQuota(id int, quota int) (err error) {
+func decreaseTokenQuota(id int, quota int64) (err error) {
 	err = DB.Model(&Token{}).Where("id = ?", id).Updates(
 		map[string]interface{}{
 			"remain_quota":  gorm.Expr("remain_quota - ?", quota),
@@ -182,7 +193,7 @@ func decreaseTokenQuota(id int, quota int) (err error) {
 	return err
 }
 
-func PreConsumeTokenQuota(tokenId int, quota int) (err error) {
+func PreConsumeTokenQuota(tokenId int, quota int64) (err error) {
 	if quota < 0 {
 		return errors.New("quota 不能为负数！")
 	}
@@ -232,7 +243,7 @@ func PreConsumeTokenQuota(tokenId int, quota int) (err error) {
 	return err
 }
 
-func PostConsumeTokenQuota(tokenId int, quota int) (err error) {
+func PostConsumeTokenQuota(tokenId int, quota int64) (err error) {
 	token, err := GetTokenById(tokenId)
 	if quota > 0 {
 		err = DecreaseUserQuota(token.UserId, quota)

model/user.go

@@ -26,9 +26,9 @@ type User struct {
 	WeChatId         string `json:"wechat_id" gorm:"column:wechat_id;index"`
 	VerificationCode string `json:"verification_code" gorm:"-:all"`                                    // this field is only for Email verification, don't save it to database!
 	AccessToken      string `json:"access_token" gorm:"type:char(32);column:access_token;uniqueIndex"` // this token is for system management
-	Quota            int    `json:"quota" gorm:"type:int;default:0"`
-	UsedQuota        int    `json:"used_quota" gorm:"type:int;default:0;column:used_quota"` // used quota
-	RequestCount     int    `json:"request_count" gorm:"type:int;default:0;"`               // request number
+	Quota            int64  `json:"quota" gorm:"bigint;default:0"`
+	UsedQuota        int64  `json:"used_quota" gorm:"bigint;default:0;column:used_quota"` // used quota
+	RequestCount     int    `json:"request_count" gorm:"type:int;default:0;"`             // request number
 	Group            string `json:"group" gorm:"type:varchar(32);default:'default'"`
 	AffCode          string `json:"aff_code" gorm:"type:varchar(32);column:aff_code;uniqueIndex"`
 	InviterId        int    `json:"inviter_id" gorm:"type:int;column:inviter_id;index"`
@@ -40,9 +40,22 @@ func GetMaxUserId() int {
 	return user.Id
 }
 
-func GetAllUsers(startIdx int, num int) (users []*User, err error) {
-	err = DB.Order("id desc").Limit(num).Offset(startIdx).Omit("password").Where("status != ?", common.UserStatusDeleted).Find(&users).Error
-	return users, err
+func GetAllUsers(startIdx int, num int, order string) (users []*User, err error) {
+    query := DB.Limit(num).Offset(startIdx).Omit("password").Where("status != ?", common.UserStatusDeleted)
+    
+    switch order {
+    case "quota":
+        query = query.Order("quota desc")
+    case "used_quota":
+        query = query.Order("used_quota desc")
+    case "request_count":
+        query = query.Order("request_count desc")
+    default:
+        query = query.Order("id desc")
+    }
+    
+    err = query.Find(&users).Error
+    return users, err
 }
 
 func SearchUsers(keyword string) (users []*User, err error) {
@@ -274,12 +287,12 @@ func ValidateAccessToken(token string) (user *User) {
 	return nil
 }
 
-func GetUserQuota(id int) (quota int, err error) {
+func GetUserQuota(id int) (quota int64, err error) {
 	err = DB.Model(&User{}).Where("id = ?", id).Select("quota").Find(&quota).Error
 	return quota, err
 }
 
-func GetUserUsedQuota(id int) (quota int, err error) {
+func GetUserUsedQuota(id int) (quota int64, err error) {
 	err = DB.Model(&User{}).Where("id = ?", id).Select("used_quota").Find(&quota).Error
 	return quota, err
 }
@@ -299,7 +312,7 @@ func GetUserGroup(id int) (group string, err error) {
 	return group, err
 }
 
-func IncreaseUserQuota(id int, quota int) (err error) {
+func IncreaseUserQuota(id int, quota int64) (err error) {
 	if quota < 0 {
 		return errors.New("quota 不能为负数！")
 	}
@@ -310,12 +323,12 @@ func IncreaseUserQuota(id int, quota int) (err error) {
 	return increaseUserQuota(id, quota)
 }
 
-func increaseUserQuota(id int, quota int) (err error) {
+func increaseUserQuota(id int, quota int64) (err error) {
 	err = DB.Model(&User{}).Where("id = ?", id).Update("quota", gorm.Expr("quota + ?", quota)).Error
 	return err
 }
 
-func DecreaseUserQuota(id int, quota int) (err error) {
+func DecreaseUserQuota(id int, quota int64) (err error) {
 	if quota < 0 {
 		return errors.New("quota 不能为负数！")
 	}
@@ -326,7 +339,7 @@ func DecreaseUserQuota(id int, quota int) (err error) {
 	return decreaseUserQuota(id, quota)
 }
 
-func decreaseUserQuota(id int, quota int) (err error) {
+func decreaseUserQuota(id int, quota int64) (err error) {
 	err = DB.Model(&User{}).Where("id = ?", id).Update("quota", gorm.Expr("quota - ?", quota)).Error
 	return err
 }
@@ -336,7 +349,7 @@ func GetRootUserEmail() (email string) {
 	return email
 }
 
-func UpdateUserUsedQuotaAndRequestCount(id int, quota int) {
+func UpdateUserUsedQuotaAndRequestCount(id int, quota int64) {
 	if config.BatchUpdateEnabled {
 		addNewRecord(BatchUpdateTypeUsedQuota, id, quota)
 		addNewRecord(BatchUpdateTypeRequestCount, id, 1)
@@ -345,7 +358,7 @@ func UpdateUserUsedQuotaAndRequestCount(id int, quota int) {
 	updateUserUsedQuotaAndRequestCount(id, quota, 1)
 }
 
-func updateUserUsedQuotaAndRequestCount(id int, quota int, count int) {
+func updateUserUsedQuotaAndRequestCount(id int, quota int64, count int) {
 	err := DB.Model(&User{}).Where("id = ?", id).Updates(
 		map[string]interface{}{
 			"used_quota":    gorm.Expr("used_quota + ?", quota),
@@ -357,7 +370,7 @@ func updateUserUsedQuotaAndRequestCount(id int, quota int, count int) {
 	}
 }
 
-func updateUserUsedQuota(id int, quota int) {
+func updateUserUsedQuota(id int, quota int64) {
 	err := DB.Model(&User{}).Where("id = ?", id).Updates(
 		map[string]interface{}{
 			"used_quota": gorm.Expr("used_quota + ?", quota),

model/utils.go

@@ -16,12 +16,12 @@ const (
 	BatchUpdateTypeCount // if you add a new type, you need to add a new map and a new lock
 )
 
-var batchUpdateStores []map[int]int
+var batchUpdateStores []map[int]int64
 var batchUpdateLocks []sync.Mutex
 
 func init() {
 	for i := 0; i < BatchUpdateTypeCount; i++ {
-		batchUpdateStores = append(batchUpdateStores, make(map[int]int))
+		batchUpdateStores = append(batchUpdateStores, make(map[int]int64))
 		batchUpdateLocks = append(batchUpdateLocks, sync.Mutex{})
 	}
 }
@@ -35,7 +35,7 @@ func InitBatchUpdater() {
 	}()
 }
 
-func addNewRecord(type_ int, id int, value int) {
+func addNewRecord(type_ int, id int, value int64) {
 	batchUpdateLocks[type_].Lock()
 	defer batchUpdateLocks[type_].Unlock()
 	if _, ok := batchUpdateStores[type_][id]; !ok {
@@ -50,7 +50,7 @@ func batchUpdate() {
 	for i := 0; i < BatchUpdateTypeCount; i++ {
 		batchUpdateLocks[i].Lock()
 		store := batchUpdateStores[i]
-		batchUpdateStores[i] = make(map[int]int)
+		batchUpdateStores[i] = make(map[int]int64)
 		batchUpdateLocks[i].Unlock()
 		// TODO: maybe we can combine updates with same key?
 		for key, value := range store {
@@ -68,7 +68,7 @@ func batchUpdate() {
 			case BatchUpdateTypeUsedQuota:
 				updateUserUsedQuota(key, value)
 			case BatchUpdateTypeRequestCount:
-				updateUserRequestCount(key, value)
+				updateUserRequestCount(key, int(value))
 			case BatchUpdateTypeChannelUsedQuota:
 				updateChannelUsedQuota(key, value)
 			}

pull_request_template.md

@@ -1,9 +1,10 @@
 [//]: # (请按照以下格式关联 issue)
-[//]: # (请在提交 PR 前确认所提交的功能可用，附上截图即可，这将有助于项目维护者 review & merge 该 PR，谢谢)
+[//]: # (请在提交 PR 前确认所提交的功能可用，需要附上截图，谢谢)
 [//]: # (项目维护者一般仅在周末处理 PR，因此如若未能及时回复希望能理解)
 [//]: # (开发者交流群：910657413)
 [//]: # (请在提交 PR 之前删除上面的注释)
 
 close #issue_number
 
-我已确认该 PR 已自测通过，相关截图如下：
+我已确认该 PR 已自测通过，相关截图如下：
+（此处放上测试通过的截图，如果不涉及前端改动或从 UI 上无法看出，请放终端启动成功的截图）

relay/channel/ali/adaptor.go

@@ -32,6 +32,9 @@ func (a *Adaptor) GetRequestURL(meta *util.RelayMeta) (string, error) {
 
 func (a *Adaptor) SetupRequestHeader(c *gin.Context, req *http.Request, meta *util.RelayMeta) error {
 	channel.SetupCommonRequestHeader(c, req, meta)
+	if meta.IsStream {
+		req.Header.Set("Accept", "text/event-stream")
+	}
 	req.Header.Set("Authorization", "Bearer "+meta.APIKey)
 	if meta.IsStream {
 		req.Header.Set("X-DashScope-SSE", "enable")

relay/channel/anthropic/adaptor.go

@@ -59,5 +59,5 @@ func (a *Adaptor) GetModelList() []string {
 }
 
 func (a *Adaptor) GetChannelName() string {
-	return "authropic"
+	return "anthropic"
 }

relay/channel/anthropic/constants.go

@@ -2,7 +2,7 @@ package anthropic
 
 var ModelList = []string{
 	"claude-instant-1.2", "claude-2.0", "claude-2.1",
-	"claude-3-haiku-20240229",
+	"claude-3-haiku-20240307",
 	"claude-3-sonnet-20240229",
 	"claude-3-opus-20240229",
 }

relay/channel/baidu/adaptor.go

@@ -3,14 +3,15 @@ package baidu
 import (
 	"errors"
 	"fmt"
+	"io"
+	"net/http"
+	"strings"
+
 	"github.com/gin-gonic/gin"
 	"github.com/songquanpeng/one-api/relay/channel"
 	"github.com/songquanpeng/one-api/relay/constant"
 	"github.com/songquanpeng/one-api/relay/model"
 	"github.com/songquanpeng/one-api/relay/util"
-	"io"
-	"net/http"
-	"strings"
 )
 
 type Adaptor struct {
@@ -23,7 +24,13 @@ func (a *Adaptor) Init(meta *util.RelayMeta) {
 func (a *Adaptor) GetRequestURL(meta *util.RelayMeta) (string, error) {
 	// https://cloud.baidu.com/doc/WENXINWORKSHOP/s/clntwmv7t
 	suffix := "chat/"
-	if strings.HasPrefix("Embedding", meta.ActualModelName) {
+	if strings.HasPrefix(meta.ActualModelName, "Embedding") {
+		suffix = "embeddings/"
+	}
+	if strings.HasPrefix(meta.ActualModelName, "bge-large") {
+		suffix = "embeddings/"
+	}
+	if strings.HasPrefix(meta.ActualModelName, "tao-8k") {
 		suffix = "embeddings/"
 	}
 	switch meta.ActualModelName {
@@ -45,6 +52,12 @@ func (a *Adaptor) GetRequestURL(meta *util.RelayMeta) (string, error) {
 		suffix += "bloomz_7b1"
 	case "Embedding-V1":
 		suffix += "embedding-v1"
+	case "bge-large-zh":
+		suffix += "bge_large_zh"
+	case "bge-large-en":
+		suffix += "bge_large_en"
+	case "tao-8k":
+		suffix += "tao_8k"
 	default:
 		suffix += meta.ActualModelName
 	}

relay/channel/baidu/constants.go

@@ -7,4 +7,7 @@ var ModelList = []string{
 	"ERNIE-Speed",
 	"ERNIE-Bot-turbo",
 	"Embedding-V1",
+	"bge-large-zh",
+	"bge-large-en",
+	"tao-8k",
 }

relay/channel/baidu/main.go

@@ -32,9 +32,16 @@ type Message struct {
 }
 
 type ChatRequest struct {
-	Messages []Message `json:"messages"`
-	Stream   bool      `json:"stream"`
-	UserId   string    `json:"user_id,omitempty"`
+	Messages        []Message `json:"messages"`
+	Temperature     float64   `json:"temperature,omitempty"`
+	TopP            float64   `json:"top_p,omitempty"`
+	PenaltyScore    float64   `json:"penalty_score,omitempty"`
+	Stream          bool      `json:"stream,omitempty"`
+	System          string    `json:"system,omitempty"`
+	DisableSearch   bool      `json:"disable_search,omitempty"`
+	EnableCitation  bool      `json:"enable_citation,omitempty"`
+	MaxOutputTokens int       `json:"max_output_tokens,omitempty"`
+	UserId          string    `json:"user_id,omitempty"`
 }
 
 type Error struct {
@@ -45,28 +52,28 @@ type Error struct {
 var baiduTokenStore sync.Map
 
 func ConvertRequest(request model.GeneralOpenAIRequest) *ChatRequest {
-	messages := make([]Message, 0, len(request.Messages))
+	baiduRequest := ChatRequest{
+		Messages:        make([]Message, 0, len(request.Messages)),
+		Temperature:     request.Temperature,
+		TopP:            request.TopP,
+		PenaltyScore:    request.FrequencyPenalty,
+		Stream:          request.Stream,
+		DisableSearch:   false,
+		EnableCitation:  false,
+		MaxOutputTokens: request.MaxTokens,
+		UserId:          request.User,
+	}
 	for _, message := range request.Messages {
 		if message.Role == "system" {
-			messages = append(messages, Message{
-				Role:    "user",
-				Content: message.StringContent(),
-			})
-			messages = append(messages, Message{
-				Role:    "assistant",
-				Content: "Okay",
-			})
+			baiduRequest.System = message.StringContent()
 		} else {
-			messages = append(messages, Message{
+			baiduRequest.Messages = append(baiduRequest.Messages, Message{
 				Role:    message.Role,
 				Content: message.StringContent(),
 			})
 		}
 	}
-	return &ChatRequest{
-		Messages: messages,
-		Stream:   request.Stream,
-	}
+	return &baiduRequest
 }
 
 func responseBaidu2OpenAI(response *ChatResponse) *openai.TextResponse {

relay/channel/gemini/constants.go

@@ -1,5 +1,7 @@
 package gemini
 
+// https://ai.google.dev/models/gemini
+
 var ModelList = []string{
 	"gemini-pro", "gemini-1.0-pro-001",
 	"gemini-pro-vision", "gemini-1.0-pro-vision-001",

relay/channel/lingyiwanwu/constants.go

@@ -0,0 +1,9 @@
+package lingyiwanwu
+
+// https://platform.lingyiwanwu.com/docs
+
+var ModelList = []string{
+	"yi-34b-chat-0205",
+	"yi-34b-chat-200k",
+	"yi-vl-plus",
+}

relay/channel/ollama/adaptor.go

@@ -0,0 +1,65 @@
+package ollama
+
+import (
+	"errors"
+	"fmt"
+	"github.com/gin-gonic/gin"
+	"github.com/songquanpeng/one-api/relay/channel"
+	"github.com/songquanpeng/one-api/relay/constant"
+	"github.com/songquanpeng/one-api/relay/model"
+	"github.com/songquanpeng/one-api/relay/util"
+	"io"
+	"net/http"
+)
+
+type Adaptor struct {
+}
+
+func (a *Adaptor) Init(meta *util.RelayMeta) {
+
+}
+
+func (a *Adaptor) GetRequestURL(meta *util.RelayMeta) (string, error) {
+	// https://github.com/ollama/ollama/blob/main/docs/api.md
+	fullRequestURL := fmt.Sprintf("%s/api/chat", meta.BaseURL)
+	return fullRequestURL, nil
+}
+
+func (a *Adaptor) SetupRequestHeader(c *gin.Context, req *http.Request, meta *util.RelayMeta) error {
+	channel.SetupCommonRequestHeader(c, req, meta)
+	req.Header.Set("Authorization", "Bearer "+meta.APIKey)
+	return nil
+}
+
+func (a *Adaptor) ConvertRequest(c *gin.Context, relayMode int, request *model.GeneralOpenAIRequest) (any, error) {
+	if request == nil {
+		return nil, errors.New("request is nil")
+	}
+	switch relayMode {
+	case constant.RelayModeEmbeddings:
+		return nil, errors.New("not supported")
+	default:
+		return ConvertRequest(*request), nil
+	}
+}
+
+func (a *Adaptor) DoRequest(c *gin.Context, meta *util.RelayMeta, requestBody io.Reader) (*http.Response, error) {
+	return channel.DoRequestHelper(a, c, meta, requestBody)
+}
+
+func (a *Adaptor) DoResponse(c *gin.Context, resp *http.Response, meta *util.RelayMeta) (usage *model.Usage, err *model.ErrorWithStatusCode) {
+	if meta.IsStream {
+		err, usage = StreamHandler(c, resp)
+	} else {
+		err, usage = Handler(c, resp)
+	}
+	return
+}
+
+func (a *Adaptor) GetModelList() []string {
+	return ModelList
+}
+
+func (a *Adaptor) GetChannelName() string {
+	return "ollama"
+}

relay/channel/ollama/constants.go

@@ -0,0 +1,5 @@
+package ollama
+
+var ModelList = []string{
+	"qwen:0.5b-chat",
+}

relay/channel/ollama/main.go

@@ -0,0 +1,178 @@
+package ollama
+
+import (
+	"bufio"
+	"context"
+	"encoding/json"
+	"fmt"
+	"github.com/gin-gonic/gin"
+	"github.com/songquanpeng/one-api/common"
+	"github.com/songquanpeng/one-api/common/helper"
+	"github.com/songquanpeng/one-api/common/logger"
+	"github.com/songquanpeng/one-api/relay/channel/openai"
+	"github.com/songquanpeng/one-api/relay/constant"
+	"github.com/songquanpeng/one-api/relay/model"
+	"io"
+	"net/http"
+	"strings"
+)
+
+func ConvertRequest(request model.GeneralOpenAIRequest) *ChatRequest {
+	ollamaRequest := ChatRequest{
+		Model: request.Model,
+		Options: &Options{
+			Seed:             int(request.Seed),
+			Temperature:      request.Temperature,
+			TopP:             request.TopP,
+			FrequencyPenalty: request.FrequencyPenalty,
+			PresencePenalty:  request.PresencePenalty,
+		},
+		Stream: request.Stream,
+	}
+	for _, message := range request.Messages {
+		ollamaRequest.Messages = append(ollamaRequest.Messages, Message{
+			Role:    message.Role,
+			Content: message.StringContent(),
+		})
+	}
+	return &ollamaRequest
+}
+
+func responseOllama2OpenAI(response *ChatResponse) *openai.TextResponse {
+	choice := openai.TextResponseChoice{
+		Index: 0,
+		Message: model.Message{
+			Role:    response.Message.Role,
+			Content: response.Message.Content,
+		},
+	}
+	if response.Done {
+		choice.FinishReason = "stop"
+	}
+	fullTextResponse := openai.TextResponse{
+		Id:      fmt.Sprintf("chatcmpl-%s", helper.GetUUID()),
+		Object:  "chat.completion",
+		Created: helper.GetTimestamp(),
+		Choices: []openai.TextResponseChoice{choice},
+		Usage: model.Usage{
+			PromptTokens:     response.PromptEvalCount,
+			CompletionTokens: response.EvalCount,
+			TotalTokens:      response.PromptEvalCount + response.EvalCount,
+		},
+	}
+	return &fullTextResponse
+}
+
+func streamResponseOllama2OpenAI(ollamaResponse *ChatResponse) *openai.ChatCompletionsStreamResponse {
+	var choice openai.ChatCompletionsStreamResponseChoice
+	choice.Delta.Role = ollamaResponse.Message.Role
+	choice.Delta.Content = ollamaResponse.Message.Content
+	if ollamaResponse.Done {
+		choice.FinishReason = &constant.StopFinishReason
+	}
+	response := openai.ChatCompletionsStreamResponse{
+		Id:      fmt.Sprintf("chatcmpl-%s", helper.GetUUID()),
+		Object:  "chat.completion.chunk",
+		Created: helper.GetTimestamp(),
+		Model:   ollamaResponse.Model,
+		Choices: []openai.ChatCompletionsStreamResponseChoice{choice},
+	}
+	return &response
+}
+
+func StreamHandler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusCode, *model.Usage) {
+	var usage model.Usage
+	scanner := bufio.NewScanner(resp.Body)
+	scanner.Split(func(data []byte, atEOF bool) (advance int, token []byte, err error) {
+		if atEOF && len(data) == 0 {
+			return 0, nil, nil
+		}
+		if i := strings.Index(string(data), "}\n"); i >= 0 {
+			return i + 2, data[0:i], nil
+		}
+		if atEOF {
+			return len(data), data, nil
+		}
+		return 0, nil, nil
+	})
+	dataChan := make(chan string)
+	stopChan := make(chan bool)
+	go func() {
+		for scanner.Scan() {
+			data := strings.TrimPrefix(scanner.Text(), "}")
+			dataChan <- data + "}"
+		}
+		stopChan <- true
+	}()
+	common.SetEventStreamHeaders(c)
+	c.Stream(func(w io.Writer) bool {
+		select {
+		case data := <-dataChan:
+			var ollamaResponse ChatResponse
+			err := json.Unmarshal([]byte(data), &ollamaResponse)
+			if err != nil {
+				logger.SysError("error unmarshalling stream response: " + err.Error())
+				return true
+			}
+			if ollamaResponse.EvalCount != 0 {
+				usage.PromptTokens = ollamaResponse.PromptEvalCount
+				usage.CompletionTokens = ollamaResponse.EvalCount
+				usage.TotalTokens = ollamaResponse.PromptEvalCount + ollamaResponse.EvalCount
+			}
+			response := streamResponseOllama2OpenAI(&ollamaResponse)
+			jsonResponse, err := json.Marshal(response)
+			if err != nil {
+				logger.SysError("error marshalling stream response: " + err.Error())
+				return true
+			}
+			c.Render(-1, common.CustomEvent{Data: "data: " + string(jsonResponse)})
+			return true
+		case <-stopChan:
+			c.Render(-1, common.CustomEvent{Data: "data: [DONE]"})
+			return false
+		}
+	})
+	err := resp.Body.Close()
+	if err != nil {
+		return openai.ErrorWrapper(err, "close_response_body_failed", http.StatusInternalServerError), nil
+	}
+	return nil, &usage
+}
+
+func Handler(c *gin.Context, resp *http.Response) (*model.ErrorWithStatusCode, *model.Usage) {
+	ctx := context.TODO()
+	var ollamaResponse ChatResponse
+	responseBody, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return openai.ErrorWrapper(err, "read_response_body_failed", http.StatusInternalServerError), nil
+	}
+	logger.Debugf(ctx, "ollama response: %s", string(responseBody))
+	err = resp.Body.Close()
+	if err != nil {
+		return openai.ErrorWrapper(err, "close_response_body_failed", http.StatusInternalServerError), nil
+	}
+	err = json.Unmarshal(responseBody, &ollamaResponse)
+	if err != nil {
+		return openai.ErrorWrapper(err, "unmarshal_response_body_failed", http.StatusInternalServerError), nil
+	}
+	if ollamaResponse.Error != "" {
+		return &model.ErrorWithStatusCode{
+			Error: model.Error{
+				Message: ollamaResponse.Error,
+				Type:    "ollama_error",
+				Param:   "",
+				Code:    "ollama_error",
+			},
+			StatusCode: resp.StatusCode,
+		}, nil
+	}
+	fullTextResponse := responseOllama2OpenAI(&ollamaResponse)
+	jsonResponse, err := json.Marshal(fullTextResponse)
+	if err != nil {
+		return openai.ErrorWrapper(err, "marshal_response_body_failed", http.StatusInternalServerError), nil
+	}
+	c.Writer.Header().Set("Content-Type", "application/json")
+	c.Writer.WriteHeader(resp.StatusCode)
+	_, err = c.Writer.Write(jsonResponse)
+	return nil, &fullTextResponse.Usage
+}

relay/channel/ollama/model.go

@@ -0,0 +1,37 @@
+package ollama
+
+type Options struct {
+	Seed             int     `json:"seed,omitempty"`
+	Temperature      float64 `json:"temperature,omitempty"`
+	TopK             int     `json:"top_k,omitempty"`
+	TopP             float64 `json:"top_p,omitempty"`
+	FrequencyPenalty float64 `json:"frequency_penalty,omitempty"`
+	PresencePenalty  float64 `json:"presence_penalty,omitempty"`
+}
+
+type Message struct {
+	Role    string   `json:"role,omitempty"`
+	Content string   `json:"content,omitempty"`
+	Images  []string `json:"images,omitempty"`
+}
+
+type ChatRequest struct {
+	Model    string    `json:"model,omitempty"`
+	Messages []Message `json:"messages,omitempty"`
+	Stream   bool      `json:"stream"`
+	Options  *Options  `json:"options,omitempty"`
+}
+
+type ChatResponse struct {
+	Model           string  `json:"model,omitempty"`
+	CreatedAt       string  `json:"created_at,omitempty"`
+	Message         Message `json:"message,omitempty"`
+	Response        string  `json:"response,omitempty"` // for stream response
+	Done            bool    `json:"done,omitempty"`
+	TotalDuration   int     `json:"total_duration,omitempty"`
+	LoadDuration    int     `json:"load_duration,omitempty"`
+	PromptEvalCount int     `json:"prompt_eval_count,omitempty"`
+	EvalCount       int     `json:"eval_count,omitempty"`
+	EvalDuration    int     `json:"eval_duration,omitempty"`
+	Error           string  `json:"error,omitempty"`
+}

relay/channel/openai/compatible.go

@@ -5,6 +5,7 @@ import (
 	"github.com/songquanpeng/one-api/relay/channel/ai360"
 	"github.com/songquanpeng/one-api/relay/channel/baichuan"
 	"github.com/songquanpeng/one-api/relay/channel/groq"
+	"github.com/songquanpeng/one-api/relay/channel/lingyiwanwu"
 	"github.com/songquanpeng/one-api/relay/channel/minimax"
 	"github.com/songquanpeng/one-api/relay/channel/mistral"
 	"github.com/songquanpeng/one-api/relay/channel/moonshot"
@@ -18,6 +19,7 @@ var CompatibleChannels = []int{
 	common.ChannelTypeMinimax,
 	common.ChannelTypeMistral,
 	common.ChannelTypeGroq,
+	common.ChannelTypeLingYiWanWu,
 }
 
 func GetCompatibleChannelMeta(channelType int) (string, []string) {
@@ -36,6 +38,8 @@ func GetCompatibleChannelMeta(channelType int) (string, []string) {
 		return "mistralai", mistral.ModelList
 	case common.ChannelTypeGroq:
 		return "groq", groq.ModelList
+	case common.ChannelTypeLingYiWanWu:
+		return "lingyiwanwu", lingyiwanwu.ModelList
 	default:
 		return "openai", ModelList
 	}

relay/channel/zhipu/adaptor.go

@@ -9,6 +9,7 @@ import (
 	"github.com/songquanpeng/one-api/relay/model"
 	"github.com/songquanpeng/one-api/relay/util"
 	"io"
+	"math"
 	"net/http"
 	"strings"
 )
@@ -52,9 +53,13 @@ func (a *Adaptor) ConvertRequest(c *gin.Context, relayMode int, request *model.G
 	if request == nil {
 		return nil, errors.New("request is nil")
 	}
-	if request.TopP >= 1 {
-		request.TopP = 0.99
-	}
+	// TopP (0.0, 1.0)
+	request.TopP = math.Min(0.99, request.TopP)
+	request.TopP = math.Max(0.01, request.TopP)
+
+	// Temperature (0.0, 1.0)
+	request.Temperature = math.Min(0.99, request.Temperature)
+	request.Temperature = math.Max(0.01, request.Temperature)
 	a.SetVersionByModeName(request.Model)
 	if a.APIVersion == "v4" {
 		return request, nil

relay/constant/api_type.go

@@ -15,6 +15,7 @@ const (
 	APITypeAIProxyLibrary
 	APITypeTencent
 	APITypeGemini
+	APITypeOllama
 
 	APITypeDummy // this one is only for count, do not add any channel after this
 )
@@ -40,6 +41,8 @@ func ChannelType2APIType(channelType int) int {
 		apiType = APITypeTencent
 	case common.ChannelTypeGemini:
 		apiType = APITypeGemini
+	case common.ChannelTypeOllama:
+		apiType = APITypeOllama
 	}
 	return apiType
 }

relay/controller/audio.go

@@ -22,6 +22,7 @@ import (
 )
 
 func RelayAudioHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatusCode {
+	ctx := c.Request.Context()
 	audioModel := "whisper-1"
 
 	tokenId := c.GetInt("token_id")
@@ -49,16 +50,16 @@ func RelayAudioHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 	modelRatio := common.GetModelRatio(audioModel)
 	groupRatio := common.GetGroupRatio(group)
 	ratio := modelRatio * groupRatio
-	var quota int
-	var preConsumedQuota int
+	var quota int64
+	var preConsumedQuota int64
 	switch relayMode {
 	case constant.RelayModeAudioSpeech:
-		preConsumedQuota = int(float64(len(ttsRequest.Input)) * ratio)
+		preConsumedQuota = int64(float64(len(ttsRequest.Input)) * ratio)
 		quota = preConsumedQuota
 	default:
-		preConsumedQuota = int(float64(config.PreConsumedQuota) * ratio)
+		preConsumedQuota = int64(float64(config.PreConsumedQuota) * ratio)
 	}
-	userQuota, err := model.CacheGetUserQuota(userId)
+	userQuota, err := model.CacheGetUserQuota(ctx, userId)
 	if err != nil {
 		return openai.ErrorWrapper(err, "get_user_quota_failed", http.StatusInternalServerError)
 	}
@@ -103,10 +104,15 @@ func RelayAudioHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 	}
 
 	fullRequestURL := util.GetFullRequestURL(baseURL, requestURL, channelType)
-	if relayMode == constant.RelayModeAudioTranscription && channelType == common.ChannelTypeAzure {
-		// https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line#rest-api
+	if channelType == common.ChannelTypeAzure {
 		apiVersion := util.GetAzureAPIVersion(c)
-		fullRequestURL = fmt.Sprintf("%s/openai/deployments/%s/audio/transcriptions?api-version=%s", baseURL, audioModel, apiVersion)
+		if relayMode == constant.RelayModeAudioTranscription {
+			// https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line#rest-api
+			fullRequestURL = fmt.Sprintf("%s/openai/deployments/%s/audio/transcriptions?api-version=%s", baseURL, audioModel, apiVersion)
+		} else if relayMode == constant.RelayModeAudioSpeech {
+			// https://learn.microsoft.com/en-us/azure/ai-services/openai/text-to-speech-quickstart?tabs=command-line#rest-api
+			fullRequestURL = fmt.Sprintf("%s/openai/deployments/%s/audio/speech?api-version=%s", baseURL, audioModel, apiVersion)
+		}
 	}
 
 	requestBody := &bytes.Buffer{}
@@ -122,7 +128,7 @@ func RelayAudioHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 		return openai.ErrorWrapper(err, "new_request_failed", http.StatusInternalServerError)
 	}
 
-	if relayMode == constant.RelayModeAudioTranscription && channelType == common.ChannelTypeAzure {
+	if (relayMode == constant.RelayModeAudioTranscription || relayMode == constant.RelayModeAudioSpeech) && channelType == common.ChannelTypeAzure {
 		// https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line#rest-api
 		apiKey := c.Request.Header.Get("Authorization")
 		apiKey = strings.TrimPrefix(apiKey, "Bearer ")
@@ -183,7 +189,7 @@ func RelayAudioHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 		if err != nil {
 			return openai.ErrorWrapper(err, "get_text_from_body_err", http.StatusInternalServerError)
 		}
-		quota = openai.CountTokenText(text, audioModel)
+		quota = int64(openai.CountTokenText(text, audioModel))
 		resp.Body = io.NopCloser(bytes.NewBuffer(responseBody))
 	}
 	if resp.StatusCode != http.StatusOK {

relay/controller/helper.go

@@ -107,18 +107,18 @@ func getPromptTokens(textRequest *relaymodel.GeneralOpenAIRequest, relayMode int
 	return 0
 }
 
-func getPreConsumedQuota(textRequest *relaymodel.GeneralOpenAIRequest, promptTokens int, ratio float64) int {
+func getPreConsumedQuota(textRequest *relaymodel.GeneralOpenAIRequest, promptTokens int, ratio float64) int64 {
 	preConsumedTokens := config.PreConsumedQuota
 	if textRequest.MaxTokens != 0 {
-		preConsumedTokens = promptTokens + textRequest.MaxTokens
+		preConsumedTokens = int64(promptTokens) + int64(textRequest.MaxTokens)
 	}
-	return int(float64(preConsumedTokens) * ratio)
+	return int64(float64(preConsumedTokens) * ratio)
 }
 
-func preConsumeQuota(ctx context.Context, textRequest *relaymodel.GeneralOpenAIRequest, promptTokens int, ratio float64, meta *util.RelayMeta) (int, *relaymodel.ErrorWithStatusCode) {
+func preConsumeQuota(ctx context.Context, textRequest *relaymodel.GeneralOpenAIRequest, promptTokens int, ratio float64, meta *util.RelayMeta) (int64, *relaymodel.ErrorWithStatusCode) {
 	preConsumedQuota := getPreConsumedQuota(textRequest, promptTokens, ratio)
 
-	userQuota, err := model.CacheGetUserQuota(meta.UserId)
+	userQuota, err := model.CacheGetUserQuota(ctx, meta.UserId)
 	if err != nil {
 		return preConsumedQuota, openai.ErrorWrapper(err, "get_user_quota_failed", http.StatusInternalServerError)
 	}
@@ -144,16 +144,16 @@ func preConsumeQuota(ctx context.Context, textRequest *relaymodel.GeneralOpenAIR
 	return preConsumedQuota, nil
 }
 
-func postConsumeQuota(ctx context.Context, usage *relaymodel.Usage, meta *util.RelayMeta, textRequest *relaymodel.GeneralOpenAIRequest, ratio float64, preConsumedQuota int, modelRatio float64, groupRatio float64) {
+func postConsumeQuota(ctx context.Context, usage *relaymodel.Usage, meta *util.RelayMeta, textRequest *relaymodel.GeneralOpenAIRequest, ratio float64, preConsumedQuota int64, modelRatio float64, groupRatio float64) {
 	if usage == nil {
 		logger.Error(ctx, "usage is nil, which is unexpected")
 		return
 	}
-	quota := 0
+	var quota int64
 	completionRatio := common.GetCompletionRatio(textRequest.Model)
 	promptTokens := usage.PromptTokens
 	completionTokens := usage.CompletionTokens
-	quota = int(math.Ceil((float64(promptTokens) + float64(completionTokens)*completionRatio) * ratio))
+	quota = int64(math.Ceil((float64(promptTokens) + float64(completionTokens)*completionRatio) * ratio))
 	if ratio != 0 && quota <= 0 {
 		quota = 1
 	}
@@ -168,7 +168,7 @@ func postConsumeQuota(ctx context.Context, usage *relaymodel.Usage, meta *util.R
 	if err != nil {
 		logger.Error(ctx, "error consuming token remain quota: "+err.Error())
 	}
-	err = model.CacheUpdateUserQuota(meta.UserId)
+	err = model.CacheUpdateUserQuota(ctx, meta.UserId)
 	if err != nil {
 		logger.Error(ctx, "error update user quota cache: "+err.Error())
 	}

relay/controller/image.go

@@ -61,7 +61,7 @@ func RelayImageHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 	if meta.ChannelType == common.ChannelTypeAzure {
 		// https://learn.microsoft.com/en-us/azure/ai-services/openai/dall-e-quickstart?tabs=dalle3%2Ccommand-line&pivots=rest-api
 		apiVersion := util.GetAzureAPIVersion(c)
-		// https://{resource_name}.openai.azure.com/openai/deployments/dall-e-3/images/generations?api-version=2023-06-01-preview
+		// https://{resource_name}.openai.azure.com/openai/deployments/dall-e-3/images/generations?api-version=2024-03-01-preview
 		fullRequestURL = fmt.Sprintf("%s/openai/deployments/%s/images/generations?api-version=%s", meta.BaseURL, imageRequest.Model, apiVersion)
 	}
 
@@ -79,9 +79,9 @@ func RelayImageHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 	modelRatio := common.GetModelRatio(imageRequest.Model)
 	groupRatio := common.GetGroupRatio(meta.Group)
 	ratio := modelRatio * groupRatio
-	userQuota, err := model.CacheGetUserQuota(meta.UserId)
+	userQuota, err := model.CacheGetUserQuota(ctx, meta.UserId)
 
-	quota := int(ratio*imageCostRatio*1000) * imageRequest.N
+	quota := int64(ratio*imageCostRatio*1000) * int64(imageRequest.N)
 
 	if userQuota-quota < 0 {
 		return openai.ErrorWrapper(errors.New("user quota is not enough"), "insufficient_user_quota", http.StatusForbidden)
@@ -125,7 +125,7 @@ func RelayImageHelper(c *gin.Context, relayMode int) *relaymodel.ErrorWithStatus
 		if err != nil {
 			logger.SysError("error consuming token remain quota: " + err.Error())
 		}
-		err = model.CacheUpdateUserQuota(meta.UserId)
+		err = model.CacheUpdateUserQuota(ctx, meta.UserId)
 		if err != nil {
 			logger.SysError("error update user quota cache: " + err.Error())
 		}

relay/controller/text.go

@@ -74,6 +74,7 @@ func RelayTextHelper(c *gin.Context) *model.ErrorWithStatusCode {
 		if err != nil {
 			return openai.ErrorWrapper(err, "json_marshal_failed", http.StatusInternalServerError)
 		}
+		logger.Debugf(ctx, "converted request: \n%s", string(jsonData))
 		requestBody = bytes.NewBuffer(jsonData)
 	}
 

relay/helper/main.go

@@ -7,6 +7,7 @@ import (
 	"github.com/songquanpeng/one-api/relay/channel/anthropic"
 	"github.com/songquanpeng/one-api/relay/channel/baidu"
 	"github.com/songquanpeng/one-api/relay/channel/gemini"
+	"github.com/songquanpeng/one-api/relay/channel/ollama"
 	"github.com/songquanpeng/one-api/relay/channel/openai"
 	"github.com/songquanpeng/one-api/relay/channel/palm"
 	"github.com/songquanpeng/one-api/relay/channel/tencent"
@@ -37,6 +38,8 @@ func GetAdaptor(apiType int) channel.Adaptor {
 		return &xunfei.Adaptor{}
 	case constant.APITypeZhipu:
 		return &zhipu.Adaptor{}
+	case constant.APITypeOllama:
+		return &ollama.Adaptor{}
 	}
 	return nil
 }

relay/util/billing.go

@@ -6,7 +6,7 @@ import (
 	"github.com/songquanpeng/one-api/model"
 )
 
-func ReturnPreConsumedQuota(ctx context.Context, preConsumedQuota int, tokenId int) {
+func ReturnPreConsumedQuota(ctx context.Context, preConsumedQuota int64, tokenId int) {
 	if preConsumedQuota != 0 {
 		go func(ctx context.Context) {
 			// return pre-consumed quota

relay/util/common.go

@@ -35,10 +35,17 @@ func ShouldDisableChannel(err *relaymodel.Error, statusCode int) bool {
 		return true
 	case "permission_error":
 		return true
+	case "forbidden":
+		return true
 	}
 	if err.Code == "invalid_api_key" || err.Code == "account_deactivated" {
 		return true
 	}
+	if strings.HasPrefix(err.Message, "Your credit balance is too low") { // anthropic
+		return true
+	} else if strings.HasPrefix(err.Message, "This organization has been disabled.") {
+		return true
+	}
 	return false
 }
 
@@ -148,20 +155,20 @@ func GetFullRequestURL(baseURL string, requestURL string, channelType int) strin
 	return fullRequestURL
 }
 
-func PostConsumeQuota(ctx context.Context, tokenId int, quotaDelta int, totalQuota int, userId int, channelId int, modelRatio float64, groupRatio float64, modelName string, tokenName string) {
+func PostConsumeQuota(ctx context.Context, tokenId int, quotaDelta int64, totalQuota int64, userId int, channelId int, modelRatio float64, groupRatio float64, modelName string, tokenName string) {
 	// quotaDelta is remaining quota to be consumed
 	err := model.PostConsumeTokenQuota(tokenId, quotaDelta)
 	if err != nil {
 		logger.SysError("error consuming token remain quota: " + err.Error())
 	}
-	err = model.CacheUpdateUserQuota(userId)
+	err = model.CacheUpdateUserQuota(ctx, userId)
 	if err != nil {
 		logger.SysError("error update user quota cache: " + err.Error())
 	}
 	// totalQuota is total quota consumed
 	if totalQuota != 0 {
 		logContent := fmt.Sprintf("模型倍率 %.2f，分组倍率 %.2f", modelRatio, groupRatio)
-		model.RecordConsumeLog(ctx, userId, channelId, totalQuota, 0, modelName, tokenName, totalQuota, logContent)
+		model.RecordConsumeLog(ctx, userId, channelId, int(totalQuota), 0, modelName, tokenName, totalQuota, logContent)
 		model.UpdateUserUsedQuotaAndRequestCount(userId, totalQuota)
 		model.UpdateChannelUsedQuota(channelId, totalQuota)
 	}

router/dashboard.go

@@ -9,6 +9,7 @@ import (
 
 func SetDashboardRouter(router *gin.Engine) {
 	apiRouter := router.Group("/")
+	apiRouter.Use(middleware.CORS())
 	apiRouter.Use(gzip.Gzip(gzip.DefaultCompression))
 	apiRouter.Use(middleware.GlobalAPIRateLimit())
 	apiRouter.Use(middleware.TokenAuth())

web/README.md

@@ -9,7 +9,7 @@
 1. 在 `web` 文件夹下新建一个文件夹，文件夹名为主题名。
 2. 把你的主题文件放到这个文件夹下。
 3. 修改你的 `package.json` 文件，把 `build` 命令改为：`"build": "react-scripts build && mv -f build ../build/default"`，其中 `default` 为你的主题名。
-4. 修改 `common/constants.go` 中的 `ValidThemes`，把你的主题名称注册进去。
+4. 修改 `common/config/config.go` 中的 `ValidThemes`，把你的主题名称注册进去。
 5. 修改 `web/THEMES` 文件，这里也需要同步修改。
 
 ## 主题列表
@@ -33,6 +33,12 @@
 |![image](https://github.com/songquanpeng/one-api/assets/42402987/fb2b1c64-ef24-4027-9b80-0cd9d945a47f)|![image](https://github.com/songquanpeng/one-api/assets/42402987/b6b649ec-2888-4324-8b2d-d5e11554eed6)|
 |![image](https://github.com/songquanpeng/one-api/assets/42402987/6d3b22e0-436b-4e26-8911-bcc993c6a2bd)|![image](https://github.com/songquanpeng/one-api/assets/42402987/eef1e224-7245-44d7-804e-9d1c8fa3f29c)|
 
+### 主题：air
+由 [Calon](https://github.com/Calcium-Ion) 开发。
+|![image](https://github.com/songquanpeng/songquanpeng.github.io/assets/39998050/1ddb274b-a715-4e81-858b-857d520b6ff4)|![image](https://github.com/songquanpeng/songquanpeng.github.io/assets/39998050/163b0b8e-1f73-49cb-b632-3dcb986b56d5)|
+|:---:|:---:|
+
+
 #### 开发说明
 
 请查看 [web/berry/README.md](https://github.com/songquanpeng/one-api/tree/main/web/berry/README.md)

web/THEMES

@@ -1,2 +1,3 @@
 default
 berry
+air

web/air/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.idea
+package-lock.json
+yarn.lock

web/air/README.md

@@ -0,0 +1,21 @@
+# React Template
+
+## Basic Usages
+
+```shell
+# Runs the app in the development mode
+npm start
+
+# Builds the app for production to the `build` folder
+npm run build
+```
+
+If you want to change the default server, please set `REACT_APP_SERVER` environment variables before build,
+for example: `REACT_APP_SERVER=http://your.domain.com`.
+
+Before you start editing, make sure your `Actions on Save` options have `Optimize imports` & `Run Prettier` enabled.
+
+## Reference
+
+1. https://github.com/OIerDb-ng/OIerDb
+2. https://github.com/cornflourblue/react-hooks-redux-registration-login-example

web/air/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "react-template",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@douyinfe/semi-icons": "^2.46.1",
+    "@douyinfe/semi-ui": "^2.46.1",
+    "@visactor/react-vchart": "~1.8.8",
+    "@visactor/vchart": "~1.8.8",
+    "@visactor/vchart-semi-theme": "~1.8.8",
+    "axios": "^0.27.2",
+    "history": "^5.3.0",
+    "marked": "^4.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-fireworks": "^1.0.4",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "react-telegram-login": "^1.1.2",
+    "react-toastify": "^9.0.8",
+    "react-turnstile": "^1.0.5",
+    "semantic-ui-css": "^2.5.0",
+    "semantic-ui-react": "^2.1.3",
+    "usehooks-ts": "^2.9.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build && mv -f build ../build/air",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "prettier": "2.8.8",
+    "typescript": "4.4.2"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "jsxSingleQuote": true
+  },
+  "proxy": "http://localhost:3000"
+}

web/air/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="logo.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#ffffff" />
+  <meta
+          name="description"
+          content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
+  />
+  <title>One API</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+</html>

web/air/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

web/air/src/App.js

@@ -0,0 +1,242 @@
+import React, { lazy, Suspense, useContext, useEffect } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import Loading from './components/Loading';
+import User from './pages/User';
+import { PrivateRoute } from './components/PrivateRoute';
+import RegisterForm from './components/RegisterForm';
+import LoginForm from './components/LoginForm';
+import NotFound from './pages/NotFound';
+import Setting from './pages/Setting';
+import EditUser from './pages/User/EditUser';
+import { getLogo, getSystemName } from './helpers';
+import PasswordResetForm from './components/PasswordResetForm';
+import GitHubOAuth from './components/GitHubOAuth';
+import PasswordResetConfirm from './components/PasswordResetConfirm';
+import { UserContext } from './context/User';
+import Channel from './pages/Channel';
+import Token from './pages/Token';
+import EditChannel from './pages/Channel/EditChannel';
+import Redemption from './pages/Redemption';
+import TopUp from './pages/TopUp';
+import Log from './pages/Log';
+import Chat from './pages/Chat';
+import { Layout } from '@douyinfe/semi-ui';
+import Midjourney from './pages/Midjourney';
+import Detail from './pages/Detail';
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
+
+function App() {
+  const [userState, userDispatch] = useContext(UserContext);
+  // const [statusState, statusDispatch] = useContext(StatusContext);
+
+  const loadUser = () => {
+    let user = localStorage.getItem('user');
+    if (user) {
+      let data = JSON.parse(user);
+      userDispatch({ type: 'login', payload: data });
+    }
+  };
+
+  useEffect(() => {
+    loadUser();
+    let systemName = getSystemName();
+    if (systemName) {
+      document.title = systemName;
+    }
+    let logo = getLogo();
+    if (logo) {
+      let linkElement = document.querySelector('link[rel~=\'icon\']');
+      if (linkElement) {
+        linkElement.href = logo;
+      }
+    }
+  }, []);
+
+  return (
+    <Layout>
+      <Layout.Content>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <Home />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/channel"
+            element={
+              <PrivateRoute>
+                <Channel />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/channel/edit/:id"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <EditChannel />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/channel/add"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <EditChannel />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/token"
+            element={
+              <PrivateRoute>
+                <Token />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/redemption"
+            element={
+              <PrivateRoute>
+                <Redemption />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/user"
+            element={
+              <PrivateRoute>
+                <User />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/user/edit/:id"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <EditUser />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/user/edit"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <EditUser />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/user/reset"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <PasswordResetConfirm />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/login"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <LoginForm />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/register"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <RegisterForm />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/reset"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <PasswordResetForm />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/oauth/github"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <GitHubOAuth />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/setting"
+            element={
+              <PrivateRoute>
+                <Suspense fallback={<Loading></Loading>}>
+                  <Setting />
+                </Suspense>
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/topup"
+            element={
+              <PrivateRoute>
+                <Suspense fallback={<Loading></Loading>}>
+                  <TopUp />
+                </Suspense>
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/log"
+            element={
+              <PrivateRoute>
+                <Log />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/detail"
+            element={
+              <PrivateRoute>
+                <Detail />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/midjourney"
+            element={
+              <PrivateRoute>
+                <Midjourney />
+              </PrivateRoute>
+            }
+          />
+          <Route
+            path="/about"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <About />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/chat"
+            element={
+              <Suspense fallback={<Loading></Loading>}>
+                <Chat />
+              </Suspense>
+            }
+          />
+          <Route path="*" element={
+            <NotFound />
+          } />
+        </Routes>
+      </Layout.Content>
+    </Layout>
+  );
+}
+
+export default App;

web/air/src/components/ChannelsTable.js

@@ -0,0 +1,738 @@
+import React, { useEffect, useState } from 'react';
+import { API, isMobile, shouldShowPrompt, showError, showInfo, showSuccess, timestamp2string } from '../helpers';
+
+import { CHANNEL_OPTIONS, ITEMS_PER_PAGE } from '../constants';
+import { renderGroup, renderNumberWithPoint, renderQuota } from '../helpers/render';
+import {
+  Button,
+  Dropdown,
+  Form,
+  InputNumber,
+  Popconfirm,
+  Space,
+  SplitButtonGroup,
+  Switch,
+  Table,
+  Tag,
+  Tooltip,
+  Typography
+} from '@douyinfe/semi-ui';
+import EditChannel from '../pages/Channel/EditChannel';
+import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+
+function renderTimestamp(timestamp) {
+  return (
+    <>
+      {timestamp2string(timestamp)}
+    </>
+  );
+}
+
+let type2label = undefined;
+
+function renderType(type) {
+  if (!type2label) {
+    type2label = new Map();
+    for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
+      type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
+    }
+    type2label[0] = { value: 0, text: '未知类型', color: 'grey' };
+  }
+  return <Tag size="large" color={type2label[type]?.color}>{type2label[type]?.text}</Tag>;
+}
+
+const ChannelsTable = () => {
+  const columns = [
+    // {
+    //     title: '',
+    //     dataIndex: 'checkbox',
+    //     className: 'checkbox',
+    // },
+    {
+      title: 'ID',
+      dataIndex: 'id'
+    },
+    {
+      title: '名称',
+      dataIndex: 'name'
+    },
+    // {
+    //   title: '分组',
+    //   dataIndex: 'group',
+    //   render: (text, record, index) => {
+    //     return (
+    //       <div>
+    //         <Space spacing={2}>
+    //           {
+    //             text.split(',').map((item, index) => {
+    //               return (renderGroup(item));
+    //             })
+    //           }
+    //         </Space>
+    //       </div>
+    //     );
+    //   }
+    // },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderType(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderStatus(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '响应时间',
+      dataIndex: 'response_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderResponseTime(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '已用/剩余',
+      dataIndex: 'expired_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <Space spacing={1}>
+              <Tooltip content={'已用额度'}>
+                <Tag color="white" type="ghost" size="large">{renderQuota(record.used_quota)}</Tag>
+              </Tooltip>
+              <Tooltip content={'剩余额度' + record.balance + '，点击更新'}>
+                <Tag color="white" type="ghost" size="large" onClick={() => {
+                  updateChannelBalance(record);
+                }}>${renderNumberWithPoint(record.balance)}</Tag>
+              </Tooltip>
+            </Space>
+          </div>
+        );
+      }
+    },
+    {
+      title: '优先级',
+      dataIndex: 'priority',
+      render: (text, record, index) => {
+        return (
+          <div>
+            <InputNumber
+              style={{ width: 70 }}
+              name="priority"
+              onBlur={e => {
+                manageChannel(record.id, 'priority', record, e.target.value);
+              }}
+              keepFocus={true}
+              innerButtons
+              defaultValue={record.priority}
+              min={-999}
+            />
+          </div>
+        );
+      }
+    },
+    // {
+    //   title: '权重',
+    //   dataIndex: 'weight',
+    //   render: (text, record, index) => {
+    //     return (
+    //       <div>
+    //         <InputNumber
+    //           style={{ width: 70 }}
+    //           name="weight"
+    //           onBlur={e => {
+    //             manageChannel(record.id, 'weight', record, e.target.value);
+    //           }}
+    //           keepFocus={true}
+    //           innerButtons
+    //           defaultValue={record.weight}
+    //           min={0}
+    //         />
+    //       </div>
+    //     );
+    //   }
+    // },
+    {
+      title: '',
+      dataIndex: 'operate',
+      render: (text, record, index) => (
+        <div>
+          {/* <SplitButtonGroup style={{ marginRight: 1 }} aria-label="测试操作项目组">
+            <Button theme="light" onClick={() => {
+              testChannel(record, '');
+            }}>测试</Button>
+            <Dropdown trigger="click" position="bottomRight" menu={record.test_models}
+            >
+              <Button style={{ padding: '8px 4px' }} type="primary" icon={<IconTreeTriangleDown />}></Button>
+            </Dropdown>
+          </SplitButtonGroup> */}
+          <Button theme='light' type='primary' style={{ marginRight: 1 }} onClick={() => testChannel(record)}>测试</Button>
+          <Popconfirm
+            title="确定是否要删除此渠道？"
+            content="此修改将不可逆"
+            okType={'danger'}
+            position={'left'}
+            onConfirm={() => {
+              manageChannel(record.id, 'delete', record).then(
+                () => {
+                  removeRecord(record.id);
+                }
+              );
+            }}
+          >
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+          </Popconfirm>
+          {
+            record.status === 1 ?
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageChannel(
+                    record.id,
+                    'disable',
+                    record
+                  );
+                }
+              }>禁用</Button> :
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageChannel(
+                    record.id,
+                    'enable',
+                    record
+                  );
+                }
+              }>启用</Button>
+          }
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
+            () => {
+              setEditingChannel(record);
+              setShowEdit(true);
+            }
+          }>编辑</Button>
+        </div>
+      )
+    }
+  ];
+
+  const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [idSort, setIdSort] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searchGroup, setSearchGroup] = useState('');
+  const [searchModel, setSearchModel] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [updatingBalance, setUpdatingBalance] = useState(false);
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
+  const [showPrompt, setShowPrompt] = useState(shouldShowPrompt('channel-test'));
+  const [channelCount, setChannelCount] = useState(pageSize);
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [showEdit, setShowEdit] = useState(false);
+  const [enableBatchDelete, setEnableBatchDelete] = useState(false);
+  const [editingChannel, setEditingChannel] = useState({
+    id: undefined
+  });
+  const [selectedChannels, setSelectedChannels] = useState([]);
+
+  const removeRecord = id => {
+    let newDataSource = [...channels];
+    if (id != null) {
+      let idx = newDataSource.findIndex(data => data.id === id);
+
+      if (idx > -1) {
+        newDataSource.splice(idx, 1);
+        setChannels(newDataSource);
+      }
+    }
+  };
+
+  const setChannelFormat = (channels) => {
+    for (let i = 0; i < channels.length; i++) {
+      channels[i].key = '' + channels[i].id;
+      let test_models = [];
+      channels[i].models.split(',').forEach((item, index) => {
+        test_models.push({
+          node: 'item',
+          name: item,
+          onClick: () => {
+            testChannel(channels[i], item);
+          }
+        });
+      });
+      channels[i].test_models = test_models;
+    }
+    // data.key = '' + data.id
+    setChannels(channels);
+    if (channels.length >= pageSize) {
+      setChannelCount(channels.length + pageSize);
+    } else {
+      setChannelCount(channels.length);
+    }
+  };
+
+  const loadChannels = async (startIdx, pageSize, idSort) => {
+    setLoading(true);
+    const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}&id_sort=${idSort}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setChannelFormat(data);
+      } else {
+        let newChannels = [...channels];
+        newChannels.splice(startIdx * pageSize, data.length, ...data);
+        setChannelFormat(newChannels);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const refresh = async () => {
+    await loadChannels(activePage - 1, pageSize, idSort);
+  };
+
+  useEffect(() => {
+    // console.log('default effect')
+    const localIdSort = localStorage.getItem('id-sort') === 'true';
+    const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
+    setIdSort(localIdSort);
+    setPageSize(localPageSize);
+    loadChannels(0, localPageSize, localIdSort)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+    fetchGroups().then();
+  }, []);
+
+  const manageChannel = async (id, action, record, value) => {
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/channel/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/channel/', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/channel/', data);
+        break;
+      case 'priority':
+        if (value === '') {
+          return;
+        }
+        data.priority = parseInt(value);
+        res = await API.put('/api/channel/', data);
+        break;
+      case 'weight':
+        if (value === '') {
+          return;
+        }
+        data.weight = parseInt(value);
+        if (data.weight < 0) {
+          data.weight = 0;
+        }
+        res = await API.put('/api/channel/', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let channel = res.data.data;
+      let newChannels = [...channels];
+      if (action === 'delete') {
+
+      } else {
+        record.status = channel.status;
+      }
+      setChannels(newChannels);
+    } else {
+      showError(message);
+    }
+  };
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Tag size="large" color="green">已启用</Tag>;
+      case 2:
+        return (
+          <Tag size="large" color="yellow">
+            已禁用
+          </Tag>
+        );
+      case 3:
+        return (
+          <Tag size="large" color="yellow">
+            自动禁用
+          </Tag>
+        );
+      default:
+        return (
+          <Tag size="large" color="grey">
+            未知状态
+          </Tag>
+        );
+    }
+  };
+
+  const renderResponseTime = (responseTime) => {
+    let time = responseTime / 1000;
+    time = time.toFixed(2) + ' 秒';
+    if (responseTime === 0) {
+      return <Tag size="large" color="grey">未测试</Tag>;
+    } else if (responseTime <= 1000) {
+      return <Tag size="large" color="green">{time}</Tag>;
+    } else if (responseTime <= 3000) {
+      return <Tag size="large" color="lime">{time}</Tag>;
+    } else if (responseTime <= 5000) {
+      return <Tag size="large" color="yellow">{time}</Tag>;
+    } else {
+      return <Tag size="large" color="red">{time}</Tag>;
+    }
+  };
+
+  const searchChannels = async (searchKeyword, searchGroup, searchModel) => {
+    if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
+      // if keyword is blank, load files instead.
+      await loadChannels(0, pageSize, idSort);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setChannels(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const testChannel = async (record, model) => {
+    const res = await API.get(`/api/channel/test/${record.id}?model=${model}`);
+    const { success, message, time } = res.data;
+    if (success) {
+      record.response_time = time * 1000;
+      record.test_time = Date.now() / 1000;
+      showInfo(`通道 ${record.name} 测试成功，耗时 ${time.toFixed(2)} 秒。`);
+    } else {
+      showError(message);
+    }
+  };
+
+  const testChannels = async (scope) => {
+    const res = await API.get(`/api/channel/test?scope=${scope}`);
+    const { success, message } = res.data;
+    if (success) {
+      showInfo('已成功开始测试通道，请刷新页面查看结果。');
+    } else {
+      showError(message);
+    }
+  };
+
+  const deleteAllDisabledChannels = async () => {
+    const res = await API.delete(`/api/channel/disabled`);
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess(`已删除所有禁用渠道，共计 ${data} 个`);
+      await refresh();
+    } else {
+      showError(message);
+    }
+  };
+
+  const updateChannelBalance = async (record) => {
+    const res = await API.get(`/api/channel/update_balance/${record.id}/`);
+    const { success, message, balance } = res.data;
+    if (success) {
+      record.balance = balance;
+      record.balance_updated_time = Date.now() / 1000;
+      showInfo(`通道 ${record.name} 余额更新成功！`);
+    } else {
+      showError(message);
+    }
+  };
+
+  const updateAllChannelsBalance = async () => {
+    setUpdatingBalance(true);
+    const res = await API.get(`/api/channel/update_balance`);
+    const { success, message } = res.data;
+    if (success) {
+      showInfo('已更新完毕所有已启用通道余额！');
+    } else {
+      showError(message);
+    }
+    setUpdatingBalance(false);
+  };
+
+  const batchDeleteChannels = async () => {
+    if (selectedChannels.length === 0) {
+      showError('请先选择要删除的通道！');
+      return;
+    }
+    setLoading(true);
+    let ids = [];
+    selectedChannels.forEach((channel) => {
+      ids.push(channel.id);
+    });
+    const res = await API.post(`/api/channel/batch`, { ids: ids });
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess(`已删除 ${data} 个通道！`);
+      await refresh();
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const fixChannelsAbilities = async () => {
+    const res = await API.post(`/api/channel/fix`);
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess(`已修复 ${data} 个通道！`);
+      await refresh();
+    } else {
+      showError(message);
+    }
+  };
+
+  let pageData = channels.slice((activePage - 1) * pageSize, activePage * pageSize);
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(channels.length / pageSize) + 1) {
+      // In this case we have to load more data and then append them.
+      loadChannels(page - 1, pageSize, idSort).then(r => {
+      });
+    }
+  };
+
+  const handlePageSizeChange = async (size) => {
+    localStorage.setItem('page-size', size + '');
+    setPageSize(size);
+    setActivePage(1);
+    loadChannels(0, size, idSort)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  };
+
+  const fetchGroups = async () => {
+    try {
+      let res = await API.get(`/api/group/`);
+      // add 'all' option
+      // res.data.data.unshift('all');
+      setGroupOptions(res.data.data.map((group) => ({
+        label: group,
+        value: group
+      })));
+    } catch (error) {
+      showError(error.message);
+    }
+  };
+
+  const closeEdit = () => {
+    setShowEdit(false);
+  };
+
+  const handleRow = (record, index) => {
+    if (record.status !== 1) {
+      return {
+        style: {
+          background: 'var(--semi-color-disabled-border)'
+        }
+      };
+    } else {
+      return {};
+    }
+  };
+
+
+  return (
+    <>
+      <EditChannel refresh={refresh} visible={showEdit} handleClose={closeEdit} editingChannel={editingChannel} />
+      <div style={{ display: "flex", placeItems: "center", justifyContent: "space-between" }}>
+        <Form onSubmit={() => {
+          searchChannels(searchKeyword, searchGroup, searchModel);
+        }} labelPosition="left">
+          <div style={{ display: 'flex' }}>
+            <Space>
+              <Form.Input
+                field="search_keyword"
+                label="搜索"
+                placeholder="ID，名称和密钥 ..."
+                value={searchKeyword}
+                loading={searching}
+                onChange={(v) => {
+                  setSearchKeyword(v.trim());
+                }}
+              />
+              {/* <Form.Input
+              field="search_model"
+              label="模型"
+              placeholder="模型关键字"
+              value={searchModel}
+              loading={searching}
+              onChange={(v) => {
+                setSearchModel(v.trim());
+              }}
+            />
+            <Form.Select field="group" label="分组" optionList={groupOptions} onChange={(v) => {
+              setSearchGroup(v);
+              searchChannels(searchKeyword, v, searchModel);
+            }} /> */}
+              <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+                style={{ marginRight: 8 }}>查询</Button>
+            </Space>
+          </div>
+        </Form>
+        <div style={{
+          display: isMobile() ? '' : 'flex',
+          marginTop: isMobile() ? 0 : -45,
+          zIndex: 999,
+          position: 'relative',
+          pointerEvents: 'none'
+        }}>
+          <Space style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}>
+            <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
+              () => {
+                setEditingChannel({
+                  id: undefined
+                });
+                setShowEdit(true);
+              }
+            }>添加新的渠道</Button>
+            <Popconfirm
+              title="确定？"
+              okType={'warning'}
+              onConfirm={() => { testChannels("all") }}
+              position={isMobile() ? 'top' : 'left'}
+            >
+              <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试所有通道</Button>
+            </Popconfirm>
+            <Popconfirm
+              title="确定？"
+              okType={'warning'}
+              onConfirm={() => { testChannels("disabled") }}
+              position={isMobile() ? 'top' : 'left'}
+            >
+              <Button theme="light" type="warning" style={{ marginRight: 8 }}>测试禁用渠道</Button>
+            </Popconfirm>
+            {/* <Popconfirm
+            title="确定？"
+            okType={'secondary'}
+            onConfirm={updateAllChannelsBalance}
+          >
+            <Button theme="light" type="secondary" style={{ marginRight: 8 }}>更新所有已启用通道余额</Button>
+          </Popconfirm> */}
+            <Popconfirm
+              title="确定是否要删除禁用通道？"
+              content="此修改将不可逆"
+              okType={'danger'}
+              onConfirm={deleteAllDisabledChannels}
+              position={isMobile() ? 'top' : 'left'}
+            >
+              <Button theme="light" type="danger" style={{ marginRight: 8 }}>删除禁用通道</Button>
+            </Popconfirm>
+
+            <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={refresh}>刷新</Button>
+          </Space>
+          {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
+
+          {/*</div>*/}
+        </div>
+        {/* <div style={{ marginTop: 20 }}>
+          <Space>
+            <Typography.Text strong>开启批量删除</Typography.Text>
+            <Switch label="开启批量删除" uncheckedText="关" aria-label="是否开启批量删除" onChange={(v) => {
+              setEnableBatchDelete(v);
+            }}></Switch>
+            <Popconfirm
+              title="确定是否要删除所选通道？"
+              content="此修改将不可逆"
+              okType={'danger'}
+              onConfirm={batchDeleteChannels}
+              disabled={!enableBatchDelete}
+              position={'top'}
+            >
+              <Button disabled={!enableBatchDelete} theme="light" type="danger"
+                style={{ marginRight: 8 }}>删除所选通道</Button>
+            </Popconfirm>
+            <Popconfirm
+              title="确定是否要修复数据库一致性？"
+              content="进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用"
+              okType={'warning'}
+              onConfirm={fixChannelsAbilities}
+              position={'top'}
+            >
+              <Button theme="light" type="secondary" style={{ marginRight: 8 }}>修复数据库一致性</Button>
+            </Popconfirm>
+          </Space>
+        </div>
+        <div style={{ marginTop: 10, display: 'flex' }}>
+          <Space>
+            <Space>
+              <Typography.Text strong>使用ID排序</Typography.Text>
+              <Switch checked={idSort} label="使用ID排序" uncheckedText="关" aria-label="是否用ID排序" onChange={(v) => {
+                localStorage.setItem('id-sort', v + '');
+                setIdSort(v);
+                loadChannels(0, pageSize, v)
+                  .then()
+                  .catch((reason) => {
+                    showError(reason);
+                  });
+              }}></Switch>
+            </Space>
+          </Space>
+        </div> */}
+      </div>
+      <Table className={'channel-table'} style={{ marginTop: 15 }} columns={columns} dataSource={pageData} pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: channelCount,
+        pageSizeOpts: [10, 20, 50, 100],
+        showSizeChanger: true,
+        formatPageText: (page) => '',
+        onPageSizeChange: (size) => {
+          handlePageSizeChange(size).then();
+        },
+        onPageChange: handlePageChange
+      }} loading={loading} onRow={handleRow} rowSelection={
+        enableBatchDelete ?
+          {
+            onChange: (selectedRowKeys, selectedRows) => {
+              // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+              setSelectedChannels(selectedRows);
+            }
+          } : null
+      } />
+    </>
+  );
+};
+
+export default ChannelsTable;

web/air/src/components/Footer.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+import { Container, Segment } from 'semantic-ui-react';
+import { getFooterHTML, getSystemName } from '../helpers';
+
+const Footer = () => {
+  const systemName = getSystemName();
+  const [footer, setFooter] = useState(getFooterHTML());
+  let remainCheckTimes = 5;
+
+  const loadFooter = () => {
+    let footer_html = localStorage.getItem('footer_html');
+    if (footer_html) {
+      setFooter(footer_html);
+    }
+  };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (remainCheckTimes <= 0) {
+        clearInterval(timer);
+        return;
+      }
+      remainCheckTimes--;
+      loadFooter();
+    }, 200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <Segment vertical>
+      <Container textAlign='center'>
+        {footer ? (
+          <div
+            className='custom-footer'
+            dangerouslySetInnerHTML={{ __html: footer }}
+          ></div>
+        ) : (
+          <div className='custom-footer'>
+            <a
+              href='https://github.com/songquanpeng/one-api'
+              target='_blank'
+            >
+              {systemName} {process.env.REACT_APP_VERSION}{' '}
+            </a>
+            由{' '}
+            <a href='https://github.com/songquanpeng' target='_blank'>
+              JustSong
+            </a>{' '}
+            构建，主题 air 来自{' '}
+            <a href='https://github.com/Calcium-Ion' target='_blank'>
+              Calon
+            </a>{' '}，源代码遵循{' '}
+            <a href='https://opensource.org/licenses/mit-license.php'>
+              MIT 协议
+            </a>
+          </div>
+        )}
+      </Container>
+    </Segment>
+  );
+};
+
+export default Footer;

web/air/src/components/GitHubOAuth.js

@@ -0,0 +1,58 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../helpers';
+import { UserContext } from '../context/User';
+
+const GitHubOAuth = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [userState, userDispatch] = useContext(UserContext);
+  const [prompt, setPrompt] = useState('处理中...');
+  const [processing, setProcessing] = useState(true);
+
+  let navigate = useNavigate();
+
+  const sendCode = async (code, state, count) => {
+    const res = await API.get(`/api/oauth/github?code=${code}&state=${state}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (message === 'bind') {
+        showSuccess('绑定成功！');
+        navigate('/setting');
+      } else {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        navigate('/');
+      }
+    } else {
+      showError(message);
+      if (count === 0) {
+        setPrompt(`操作失败，重定向至登录界面中...`);
+        navigate('/setting'); // in case this is failed to bind GitHub
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, state, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    let state = searchParams.get('state');
+    sendCode(code, state, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size="large">{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default GitHubOAuth;

web/air/src/components/HeaderBar.js

@@ -0,0 +1,161 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
+
+import { API, getLogo, getSystemName, showSuccess } from '../helpers';
+import '../index.css';
+
+import fireworks from 'react-fireworks';
+
+import { IconHelpCircle, IconKey, IconUser } from '@douyinfe/semi-icons';
+import { Avatar, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui';
+import { stringToColor } from '../helpers/render';
+
+// HeaderBar Buttons
+let headerButtons = [
+  {
+    text: '关于',
+    itemKey: 'about',
+    to: '/about',
+    icon: <IconHelpCircle />
+  }
+];
+
+if (localStorage.getItem('chat_link')) {
+  headerButtons.splice(1, 0, {
+    name: '聊天',
+    to: '/chat',
+    icon: 'comments'
+  });
+}
+
+const HeaderBar = () => {
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+
+  const [showSidebar, setShowSidebar] = useState(false);
+  const [dark, setDark] = useState(false);
+  const systemName = getSystemName();
+  const logo = getLogo();
+  var themeMode = localStorage.getItem('theme-mode');
+  const currentDate = new Date();
+  // enable fireworks on new year(1.1 and 2.9-2.24)
+  const isNewYear = (currentDate.getMonth() === 0 && currentDate.getDate() === 1) || (currentDate.getMonth() === 1 && currentDate.getDate() >= 9 && currentDate.getDate() <= 24);
+
+  async function logout() {
+    setShowSidebar(false);
+    await API.get('/api/user/logout');
+    showSuccess('注销成功!');
+    userDispatch({ type: 'logout' });
+    localStorage.removeItem('user');
+    navigate('/login');
+  }
+
+  const handleNewYearClick = () => {
+    fireworks.init('root', {});
+    fireworks.start();
+    setTimeout(() => {
+      fireworks.stop();
+      setTimeout(() => {
+        window.location.reload();
+      }, 10000);
+    }, 3000);
+  };
+
+  useEffect(() => {
+    if (themeMode === 'dark') {
+      switchMode(true);
+    }
+    if (isNewYear) {
+      console.log('Happy New Year!');
+    }
+  }, []);
+
+  const switchMode = (model) => {
+    const body = document.body;
+    if (!model) {
+      body.removeAttribute('theme-mode');
+      localStorage.setItem('theme-mode', 'light');
+    } else {
+      body.setAttribute('theme-mode', 'dark');
+      localStorage.setItem('theme-mode', 'dark');
+    }
+    setDark(model);
+  };
+  return (
+    <>
+      <Layout>
+        <div style={{ width: '100%' }}>
+          <Nav
+            mode={'horizontal'}
+            // bodyStyle={{ height: 100 }}
+            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
+              const routerMap = {
+                about: '/about',
+                login: '/login',
+                register: '/register'
+              };
+              return (
+                <Link
+                  style={{ textDecoration: 'none' }}
+                  to={routerMap[props.itemKey]}
+                >
+                  {itemElement}
+                </Link>
+              );
+            }}
+            selectedKeys={[]}
+            // items={headerButtons}
+            onSelect={key => {
+
+            }}
+            footer={
+              <>
+                {isNewYear &&
+                  // happy new year
+                  <Dropdown
+                    position="bottomRight"
+                    render={
+                      <Dropdown.Menu>
+                        <Dropdown.Item onClick={handleNewYearClick}>Happy New Year!!!</Dropdown.Item>
+                      </Dropdown.Menu>
+                    }
+                  >
+                    <Nav.Item itemKey={'new-year'} text={'🏮'} />
+                  </Dropdown>
+                }
+                <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
+                <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
+                {userState.user ?
+                  <>
+                    <Dropdown
+                      position="bottomRight"
+                      render={
+                        <Dropdown.Menu>
+                          <Dropdown.Item onClick={logout}>退出</Dropdown.Item>
+                        </Dropdown.Menu>
+                      }
+                    >
+                      <Avatar size="small" color={stringToColor(userState.user.username)} style={{ margin: 4 }}>
+                        {userState.user.username[0]}
+                      </Avatar>
+                      <span>{userState.user.username}</span>
+                    </Dropdown>
+                  </>
+                  :
+                  <>
+                    <Nav.Item itemKey={'login'} text={'登录'} icon={<IconKey />} />
+                    <Nav.Item itemKey={'register'} text={'注册'} icon={<IconUser />} />
+                  </>
+                }
+              </>
+            }
+          >
+          </Nav>
+        </div>
+      </Layout>
+    </>
+  );
+};
+
+export default HeaderBar;

web/air/src/components/Loading.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+
+const Loading = ({ prompt: name = 'page' }) => {
+  return (
+    <Segment style={{ height: 100 }}>
+      <Dimmer active inverted>
+        <Loader indeterminate>加载{name}中...</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default Loading;

web/air/src/components/LoginForm.js

@@ -0,0 +1,254 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { UserContext } from '../context/User';
+import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
+import { onGitHubOAuthClicked } from './utils';
+import Turnstile from 'react-turnstile';
+import { Button, Card, Divider, Form, Icon, Layout, Modal } from '@douyinfe/semi-ui';
+import Title from '@douyinfe/semi-ui/lib/es/typography/title';
+import Text from '@douyinfe/semi-ui/lib/es/typography/text';
+import TelegramLoginButton from 'react-telegram-login';
+
+import { IconGithubLogo } from '@douyinfe/semi-icons';
+import WeChatIcon from './WeChatIcon';
+
+const LoginForm = () => {
+  const [inputs, setInputs] = useState({
+    username: '',
+    password: '',
+    wechat_verification_code: ''
+  });
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [submitted, setSubmitted] = useState(false);
+  const { username, password } = inputs;
+  const [userState, userDispatch] = useContext(UserContext);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  let navigate = useNavigate();
+  const [status, setStatus] = useState({});
+  const logo = getLogo();
+
+  useEffect(() => {
+    if (searchParams.get('expired')) {
+      showError('未登录或登录已过期，请重新登录！');
+    }
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setStatus(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  }, []);
+
+  const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+
+  const onWeChatLoginClicked = () => {
+    setShowWeChatLoginModal(true);
+  };
+
+  const onSubmitWeChatVerificationCode = async () => {
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    const res = await API.get(
+      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+      localStorage.setItem('user', JSON.stringify(data));
+      navigate('/');
+      showSuccess('登录成功！');
+      setShowWeChatLoginModal(false);
+    } else {
+      showError(message);
+    }
+  };
+
+  function handleChange(name, value) {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setSubmitted(true);
+    if (username && password) {
+      const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
+        username,
+        password
+      });
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        if (username === 'root' && password === '123456') {
+          Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
+        }
+        navigate('/token');
+      } else {
+        showError(message);
+      }
+    } else {
+      showError('请输入用户名和密码！');
+    }
+  }
+
+  // 添加Telegram登录处理函数
+  const onTelegramLoginClicked = async (response) => {
+    const fields = ['id', 'first_name', 'last_name', 'username', 'photo_url', 'auth_date', 'hash', 'lang'];
+    const params = {};
+    fields.forEach((field) => {
+      if (response[field]) {
+        params[field] = response[field];
+      }
+    });
+    const res = await API.get(`/api/oauth/telegram/login`, { params });
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+      localStorage.setItem('user', JSON.stringify(data));
+      showSuccess('登录成功！');
+      navigate('/');
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <div>
+      <Layout>
+        <Layout.Header>
+        </Layout.Header>
+        <Layout.Content>
+          <div style={{ justifyContent: 'center', display: 'flex', marginTop: 120 }}>
+            <div style={{ width: 500 }}>
+              <Card>
+                <Title heading={2} style={{ textAlign: 'center' }}>
+                  用户登录
+                </Title>
+                <Form>
+                  <Form.Input
+                    field={'username'}
+                    label={'用户名'}
+                    placeholder="用户名"
+                    name="username"
+                    onChange={(value) => handleChange('username', value)}
+                  />
+                  <Form.Input
+                    field={'password'}
+                    label={'密码'}
+                    placeholder="密码"
+                    name="password"
+                    type="password"
+                    onChange={(value) => handleChange('password', value)}
+                  />
+
+                  <Button theme="solid" style={{ width: '100%' }} type={'primary'} size="large"
+                          htmlType={'submit'} onClick={handleSubmit}>
+                    登录
+                  </Button>
+                </Form>
+                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
+                  <Text>
+                    没有账号请先 <Link to="/register">注册账号</Link>
+                  </Text>
+                  <Text>
+                    忘记密码 <Link to="/reset">点击重置</Link>
+                  </Text>
+                </div>
+                {status.github_oauth || status.wechat_login || status.telegram_oauth ? (
+                  <>
+                    <Divider margin="12px" align="center">
+                      第三方登录
+                    </Divider>
+                    <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
+                      {status.github_oauth ? (
+                        <Button
+                          type="primary"
+                          icon={<IconGithubLogo />}
+                          onClick={() => onGitHubOAuthClicked(status.github_client_id)}
+                        />
+                      ) : (
+                        <></>
+                      )}
+                      {status.wechat_login ? (
+                        <Button
+                          type="primary"
+                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
+                          icon={<Icon svg={<WeChatIcon />} />}
+                          onClick={onWeChatLoginClicked}
+                        />
+                      ) : (
+                        <></>
+                      )}
+
+                      {status.telegram_oauth ? (
+                        <TelegramLoginButton dataOnauth={onTelegramLoginClicked} botName={status.telegram_bot_name} />
+                      ) : (
+                        <></>
+                      )}
+                    </div>
+                  </>
+                ) : (
+                  <></>
+                )}
+                <Modal
+                  title="微信扫码登录"
+                  visible={showWeChatLoginModal}
+                  maskClosable={true}
+                  onOk={onSubmitWeChatVerificationCode}
+                  onCancel={() => setShowWeChatLoginModal(false)}
+                  okText={'登录'}
+                  size={'small'}
+                  centered={true}
+                >
+                  <div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>
+                    <img src={status.wechat_qrcode} />
+                  </div>
+                  <div style={{ textAlign: 'center' }}>
+                    <p>
+                      微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                    </p>
+                  </div>
+                  <Form size="large">
+                    <Form.Input
+                      field={'wechat_verification_code'}
+                      placeholder="验证码"
+                      label={'验证码'}
+                      value={inputs.wechat_verification_code}
+                      onChange={(value) => handleChange('wechat_verification_code', value)}
+                    />
+                  </Form>
+                </Modal>
+              </Card>
+              {turnstileEnabled ? (
+                <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+
+        </Layout.Content>
+      </Layout>
+    </div>
+  );
+};
+
+export default LoginForm;

web/air/src/components/LogsTable.js

@@ -0,0 +1,401 @@
+import React, { useEffect, useState } from 'react';
+import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { Avatar, Button, Form, Layout, Modal, Select, Space, Spin, Table, Tag } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderNumber, renderQuota, stringToColor } from '../helpers/render';
+import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
+
+const { Header } = Layout;
+
+function renderTimestamp(timestamp) {
+  return (<>
+    {timestamp2string(timestamp)}
+  </>);
+}
+
+const MODE_OPTIONS = [{ key: 'all', text: '全部用户', value: 'all' }, { key: 'self', text: '当前用户', value: 'self' }];
+
+const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'lime', 'orange', 'pink', 'purple', 'red', 'teal', 'violet', 'yellow'];
+
+function renderType(type) {
+  switch (type) {
+    case 1:
+      return <Tag color="cyan" size="large"> 充值 </Tag>;
+    case 2:
+      return <Tag color="lime" size="large"> 消费 </Tag>;
+    case 3:
+      return <Tag color="orange" size="large"> 管理 </Tag>;
+    case 4:
+      return <Tag color="purple" size="large"> 系统 </Tag>;
+    default:
+      return <Tag color="black" size="large"> 未知 </Tag>;
+  }
+}
+
+function renderIsStream(bool) {
+  if (bool) {
+    return <Tag color="blue" size="large">流</Tag>;
+  } else {
+    return <Tag color="purple" size="large">非流</Tag>;
+  }
+}
+
+function renderUseTime(type) {
+  const time = parseInt(type);
+  if (time < 101) {
+    return <Tag color="green" size="large"> {time} s </Tag>;
+  } else if (time < 300) {
+    return <Tag color="orange" size="large"> {time} s </Tag>;
+  } else {
+    return <Tag color="red" size="large"> {time} s </Tag>;
+  }
+}
+
+const LogsTable = () => {
+  const columns = [{
+    title: '时间', dataIndex: 'timestamp2string'
+  }, {
+    title: '渠道',
+    dataIndex: 'channel',
+    className: isAdmin() ? 'tableShow' : 'tableHiddle',
+    render: (text, record, index) => {
+      return (isAdminUser ? record.type === 0 || record.type === 2 ? <div>
+        {<Tag color={colors[parseInt(text) % colors.length]} size="large"> {text} </Tag>}
+      </div> : <></> : <></>);
+    }
+  }, {
+    title: '用户',
+    dataIndex: 'username',
+    className: isAdmin() ? 'tableShow' : 'tableHiddle',
+    render: (text, record, index) => {
+      return (isAdminUser ? <div>
+        <Avatar size="small" color={stringToColor(text)} style={{ marginRight: 4 }}
+          onClick={() => showUserInfo(record.user_id)}>
+          {typeof text === 'string' && text.slice(0, 1)}
+        </Avatar>
+        {text}
+      </div> : <></>);
+    }
+  }, {
+    title: '令牌', dataIndex: 'token_name', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        <Tag color="grey" size="large" onClick={() => {
+          copyText(text);
+        }}> {text} </Tag>
+      </div> : <></>);
+    }
+  }, {
+    title: '类型', dataIndex: 'type', render: (text, record, index) => {
+      return (<div>
+        {renderType(text)}
+      </div>);
+    }
+  }, {
+    title: '模型', dataIndex: 'model_name', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        <Tag color={stringToColor(text)} size="large" onClick={() => {
+          copyText(text);
+        }}> {text} </Tag>
+      </div> : <></>);
+    }
+  },
+  // {
+  //   title: '用时', dataIndex: 'use_time', render: (text, record, index) => {
+  //     return (<div>
+  //       <Space>
+  //         {renderUseTime(text)}
+  //         {renderIsStream(record.is_stream)}
+  //       </Space>
+  //     </div>);
+  //   }
+  // },
+  {
+    title: '提示', dataIndex: 'prompt_tokens', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        {<span> {text} </span>}
+      </div> : <></>);
+    }
+  }, {
+    title: '补全', dataIndex: 'completion_tokens', render: (text, record, index) => {
+      return (parseInt(text) > 0 && (record.type === 0 || record.type === 2) ? <div>
+        {<span> {text} </span>}
+      </div> : <></>);
+    }
+  }, {
+    title: '花费', dataIndex: 'quota', render: (text, record, index) => {
+      return (record.type === 0 || record.type === 2 ? <div>
+        {renderQuota(text, 6)}
+      </div> : <></>);
+    }
+  }, {
+    title: '详情', dataIndex: 'content', render: (text, record, index) => {
+      return <Paragraph ellipsis={{ rows: 2, showTooltip: { type: 'popover', opts: { style: { width: 240 } } } }}
+        style={{ maxWidth: 240 }}>
+        {text}
+      </Paragraph>;
+    }
+  }];
+
+  const [logs, setLogs] = useState([]);
+  const [showStat, setShowStat] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [loadingStat, setLoadingStat] = useState(false);
+  const [activePage, setActivePage] = useState(1);
+  const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [logType, setLogType] = useState(0);
+  const isAdminUser = isAdmin();
+  let now = new Date();
+  // 初始化start_timestamp为前一天
+  const [inputs, setInputs] = useState({
+    username: '',
+    token_name: '',
+    model_name: '',
+    start_timestamp: timestamp2string(now.getTime() / 1000 - 86400),
+    end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
+    channel: ''
+  });
+  const { username, token_name, model_name, start_timestamp, end_timestamp, channel } = inputs;
+
+  const [stat, setStat] = useState({
+    quota: 0, token: 0
+  });
+
+  const handleInputChange = (value, name) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const getLogSelfStat = async () => {
+    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+    let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+    let res = await API.get(`/api/log/self/stat?type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setStat(data);
+    } else {
+      showError(message);
+    }
+  };
+
+  const getLogStat = async () => {
+    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+    let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+    let res = await API.get(`/api/log/stat?type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setStat(data);
+    } else {
+      showError(message);
+    }
+  };
+
+  const handleEyeClick = async () => {
+    setLoadingStat(true);
+    if (isAdminUser) {
+      await getLogStat();
+    } else {
+      await getLogSelfStat();
+    }
+    setShowStat(true);
+    setLoadingStat(false);
+  };
+
+  const showUserInfo = async (userId) => {
+    if (!isAdminUser) {
+      return;
+    }
+    const res = await API.get(`/api/user/${userId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      Modal.info({
+        title: '用户信息', content: <div style={{ padding: 12 }}>
+          <p>用户名: {data.username}</p>
+          <p>余额: {renderQuota(data.quota)}</p>
+          <p>已用额度：{renderQuota(data.used_quota)}</p>
+          <p>请求次数：{renderNumber(data.request_count)}</p>
+        </div>, centered: true
+      });
+    } else {
+      showError(message);
+    }
+  };
+
+  const setLogsFormat = (logs) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i].timestamp2string = timestamp2string(logs[i].created_at);
+      logs[i].key = '' + logs[i].id;
+    }
+    // data.key = '' + data.id
+    setLogs(logs);
+    setLogCount(logs.length + ITEMS_PER_PAGE);
+    // console.log(logCount);
+  };
+
+  const loadLogs = async (startIdx, pageSize, logType = 0) => {
+    setLoading(true);
+
+    let url = '';
+    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+    let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+    if (isAdminUser) {
+      url = `/api/log/?p=${startIdx}&page_size=${pageSize}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}&channel=${channel}`;
+    } else {
+      url = `/api/log/self/?p=${startIdx}&page_size=${pageSize}&type=${logType}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+    }
+    const res = await API.get(url);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setLogsFormat(data);
+      } else {
+        let newLogs = [...logs];
+        newLogs.splice(startIdx * pageSize, data.length, ...data);
+        setLogsFormat(newLogs);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const pageData = logs.slice((activePage - 1) * pageSize, activePage * pageSize);
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(logs.length / pageSize) + 1) {
+      // In this case we have to load more data and then append them.
+      loadLogs(page - 1, pageSize).then(r => {
+      });
+    }
+  };
+
+  const handlePageSizeChange = async (size) => {
+    localStorage.setItem('page-size', size + '');
+    setPageSize(size);
+    setActivePage(1);
+    loadLogs(0, size)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  };
+
+  const refresh = async (localLogType) => {
+    // setLoading(true);
+    setActivePage(1);
+    await loadLogs(0, pageSize, localLogType);
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制：' + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  useEffect(() => {
+    // console.log('default effect')
+    const localPageSize = parseInt(localStorage.getItem('page-size')) || ITEMS_PER_PAGE;
+    setPageSize(localPageSize);
+    loadLogs(0, localPageSize)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const searchLogs = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadLogs(0, pageSize);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/log/self/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setLogs(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  return (<>
+    <Layout>
+      <Header>
+        <Spin spinning={loadingStat}>
+          <h3>使用明细（总消耗额度：
+            <span onClick={handleEyeClick} style={{
+              cursor: 'pointer', color: 'gray'
+            }}>{showStat ? renderQuota(stat.quota) : '点击查看'}</span>
+            ）
+          </h3>
+        </Spin>
+      </Header>
+      <Form layout="horizontal" style={{ marginTop: 10 }}>
+        <>
+          <Form.Input field="token_name" label="令牌名称" style={{ width: 176 }} value={token_name}
+            placeholder={'可选值'} name="token_name"
+            onChange={value => handleInputChange(value, 'token_name')} />
+          <Form.Input field="model_name" label="模型名称" style={{ width: 176 }} value={model_name}
+            placeholder="可选值"
+            name="model_name"
+            onChange={value => handleInputChange(value, 'model_name')} />
+          <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
+            initValue={start_timestamp}
+            value={start_timestamp} type="dateTime"
+            name="start_timestamp"
+            onChange={value => handleInputChange(value, 'start_timestamp')} />
+          <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
+            initValue={end_timestamp}
+            value={end_timestamp} type="dateTime"
+            name="end_timestamp"
+            onChange={value => handleInputChange(value, 'end_timestamp')} />
+          {isAdminUser && <>
+            <Form.Input field="channel" label="渠道 ID" style={{ width: 176 }} value={channel}
+              placeholder="可选值" name="channel"
+              onChange={value => handleInputChange(value, 'channel')} />
+            <Form.Input field="username" label="用户名称" style={{ width: 176 }} value={username}
+              placeholder={'可选值'} name="username"
+              onChange={value => handleInputChange(value, 'username')} />
+          </>}
+          <Form.Section>
+            <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+              onClick={refresh} loading={loading}>查询</Button>
+          </Form.Section>
+        </>
+      </Form>
+      <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: logCount,
+        pageSizeOpts: [10, 20, 50, 100],
+        showSizeChanger: true,
+        onPageSizeChange: (size) => {
+          handlePageSizeChange(size).then();
+        },
+        onPageChange: handlePageChange
+      }} />
+      <Select defaultValue="0" style={{ width: 120 }} onChange={(value) => {
+        setLogType(parseInt(value));
+        refresh(parseInt(value)).then();
+      }}>
+        <Select.Option value="0">全部</Select.Option>
+        <Select.Option value="1">充值</Select.Option>
+        <Select.Option value="2">消费</Select.Option>
+        <Select.Option value="3">管理</Select.Option>
+        <Select.Option value="4">系统</Select.Option>
+      </Select>
+    </Layout>
+  </>);
+};
+
+export default LogsTable;

web/air/src/components/MjLogsTable.js

@@ -0,0 +1,454 @@
+import React, { useEffect, useState } from 'react';
+import { API, copy, isAdmin, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { Banner, Button, Form, ImagePreview, Layout, Modal, Progress, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
+
+
+const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
+  'light-blue', 'lime', 'orange', 'pink',
+  'purple', 'red', 'teal', 'violet', 'yellow'
+];
+
+function renderType(type) {
+  switch (type) {
+    case 'IMAGINE':
+      return <Tag color="blue" size="large">绘图</Tag>;
+    case 'UPSCALE':
+      return <Tag color="orange" size="large">放大</Tag>;
+    case 'VARIATION':
+      return <Tag color="purple" size="large">变换</Tag>;
+    case 'HIGH_VARIATION':
+      return <Tag color="purple" size="large">强变换</Tag>;
+    case 'LOW_VARIATION':
+      return <Tag color="purple" size="large">弱变换</Tag>;
+    case 'PAN':
+      return <Tag color="cyan" size="large">平移</Tag>;
+    case 'DESCRIBE':
+      return <Tag color="yellow" size="large">图生文</Tag>;
+    case 'BLEND':
+      return <Tag color="lime" size="large">图混合</Tag>;
+    case 'SHORTEN':
+      return <Tag color="pink" size="large">缩词</Tag>;
+    case 'REROLL':
+      return <Tag color="indigo" size="large">重绘</Tag>;
+    case 'INPAINT':
+      return <Tag color="violet" size="large">局部重绘-提交</Tag>;
+    case 'ZOOM':
+      return <Tag color="teal" size="large">变焦</Tag>;
+    case 'CUSTOM_ZOOM':
+      return <Tag color="teal" size="large">自定义变焦-提交</Tag>;
+    case 'MODAL':
+      return <Tag color="green" size="large">窗口处理</Tag>;
+    case 'SWAP_FACE':
+      return <Tag color="light-green" size="large">换脸</Tag>;
+    default:
+      return <Tag color="white" size="large">未知</Tag>;
+  }
+}
+
+
+function renderCode(code) {
+  switch (code) {
+    case 1:
+      return <Tag color="green" size="large">已提交</Tag>;
+    case 21:
+      return <Tag color="lime" size="large">等待中</Tag>;
+    case 22:
+      return <Tag color="orange" size="large">重复提交</Tag>;
+    case 0:
+      return <Tag color="yellow" size="large">未提交</Tag>;
+    default:
+      return <Tag color="white" size="large">未知</Tag>;
+  }
+}
+
+
+function renderStatus(type) {
+  // Ensure all cases are string literals by adding quotes.
+  switch (type) {
+    case 'SUCCESS':
+      return <Tag color="green" size="large">成功</Tag>;
+    case 'NOT_START':
+      return <Tag color="grey" size="large">未启动</Tag>;
+    case 'SUBMITTED':
+      return <Tag color="yellow" size="large">队列中</Tag>;
+    case 'IN_PROGRESS':
+      return <Tag color="blue" size="large">执行中</Tag>;
+    case 'FAILURE':
+      return <Tag color="red" size="large">失败</Tag>;
+    case 'MODAL':
+      return <Tag color="yellow" size="large">窗口等待</Tag>;
+    default:
+      return <Tag color="white" size="large">未知</Tag>;
+  }
+}
+
+const renderTimestamp = (timestampInSeconds) => {
+  const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
+
+  const year = date.getFullYear(); // 获取年份
+  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
+  const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
+  const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
+  const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
+  const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
+};
+
+
+const LogsTable = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalContent, setModalContent] = useState('');
+  const columns = [
+    {
+      title: '提交时间',
+      dataIndex: 'submit_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderTimestamp(text / 1000)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '渠道',
+      dataIndex: 'channel_id',
+      className: isAdmin() ? 'tableShow' : 'tableHiddle',
+      render: (text, record, index) => {
+        return (
+
+          <div>
+            <Tag color={colors[parseInt(text) % colors.length]} size="large" onClick={() => {
+              copyText(text); // 假设copyText是用于文本复制的函数
+            }}> {text} </Tag>
+          </div>
+
+        );
+      }
+    },
+    {
+      title: '类型',
+      dataIndex: 'action',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderType(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '任务ID',
+      dataIndex: 'mj_id',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {text}
+          </div>
+        );
+      }
+    },
+    {
+      title: '提交结果',
+      dataIndex: 'code',
+      className: isAdmin() ? 'tableShow' : 'tableHiddle',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderCode(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '任务状态',
+      dataIndex: 'status',
+      className: isAdmin() ? 'tableShow' : 'tableHiddle',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderStatus(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '进度',
+      dataIndex: 'progress',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {
+              // 转换例如100%为数字100，如果text未定义，返回0
+              <Progress stroke={record.status === 'FAILURE' ? 'var(--semi-color-warning)' : null}
+                        percent={text ? parseInt(text.replace('%', '')) : 0} showInfo={true}
+                        aria-label="drawing progress" />
+            }
+          </div>
+        );
+      }
+    },
+    {
+      title: '结果图片',
+      dataIndex: 'image_url',
+      render: (text, record, index) => {
+        if (!text) {
+          return '无';
+        }
+        return (
+          <Button
+            onClick={() => {
+              setModalImageUrl(text);  // 更新图片URL状态
+              setIsModalOpenurl(true);    // 打开模态框
+            }}
+          >
+            查看图片
+          </Button>
+        );
+      }
+    },
+    {
+      title: 'Prompt',
+      dataIndex: 'prompt',
+      render: (text, record, index) => {
+        // 如果text未定义，返回替代文本，例如空字符串''或其他
+        if (!text) {
+          return '无';
+        }
+
+        return (
+          <Typography.Text
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
+            onClick={() => {
+              setModalContent(text);
+              setIsModalOpen(true);
+            }}
+          >
+            {text}
+          </Typography.Text>
+        );
+      }
+    },
+    {
+      title: 'PromptEn',
+      dataIndex: 'prompt_en',
+      render: (text, record, index) => {
+        // 如果text未定义，返回替代文本，例如空字符串''或其他
+        if (!text) {
+          return '无';
+        }
+
+        return (
+          <Typography.Text
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
+            onClick={() => {
+              setModalContent(text);
+              setIsModalOpen(true);
+            }}
+          >
+            {text}
+          </Typography.Text>
+        );
+      }
+    },
+    {
+      title: '失败原因',
+      dataIndex: 'fail_reason',
+      render: (text, record, index) => {
+        // 如果text未定义，返回替代文本，例如空字符串''或其他
+        if (!text) {
+          return '无';
+        }
+
+        return (
+          <Typography.Text
+            ellipsis={{ showTooltip: true }}
+            style={{ width: 100 }}
+            onClick={() => {
+              setModalContent(text);
+              setIsModalOpen(true);
+            }}
+          >
+            {text}
+          </Typography.Text>
+        );
+      }
+    }
+
+  ];
+
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
+  const [logType, setLogType] = useState(0);
+  const isAdminUser = isAdmin();
+  const [isModalOpenurl, setIsModalOpenurl] = useState(false);
+  const [showBanner, setShowBanner] = useState(false);
+
+  // 定义模态框图片URL的状态和更新函数
+  const [modalImageUrl, setModalImageUrl] = useState('');
+  let now = new Date();
+  // 初始化start_timestamp为前一天
+  const [inputs, setInputs] = useState({
+    channel_id: '',
+    mj_id: '',
+    start_timestamp: timestamp2string(now.getTime() / 1000 - 2592000),
+    end_timestamp: timestamp2string(now.getTime() / 1000 + 3600)
+  });
+  const { channel_id, mj_id, start_timestamp, end_timestamp } = inputs;
+
+  const [stat, setStat] = useState({
+    quota: 0,
+    token: 0
+  });
+
+  const handleInputChange = (value, name) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+
+  const setLogsFormat = (logs) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i].timestamp2string = timestamp2string(logs[i].created_at);
+      logs[i].key = '' + logs[i].id;
+    }
+    // data.key = '' + data.id
+    setLogs(logs);
+    setLogCount(logs.length + ITEMS_PER_PAGE);
+    // console.log(logCount);
+  };
+
+  const loadLogs = async (startIdx) => {
+    setLoading(true);
+
+    let url = '';
+    let localStartTimestamp = Date.parse(start_timestamp);
+    let localEndTimestamp = Date.parse(end_timestamp);
+    if (isAdminUser) {
+      url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+    } else {
+      url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+    }
+    const res = await API.get(url);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setLogsFormat(data);
+      } else {
+        let newLogs = [...logs];
+        newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+        setLogsFormat(newLogs);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const pageData = logs.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
+      // In this case we have to load more data and then append them.
+      loadLogs(page - 1).then(r => {
+      });
+    }
+  };
+
+  const refresh = async () => {
+    // setLoading(true);
+    setActivePage(1);
+    await loadLogs(0);
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制：' + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  useEffect(() => {
+    refresh().then();
+  }, [logType]);
+
+  useEffect(() => {
+    const mjNotifyEnabled = localStorage.getItem('mj_notify_enabled');
+    if (mjNotifyEnabled !== 'true') {
+      setShowBanner(true);
+    }
+  }, []);
+
+  return (
+    <>
+
+      <Layout>
+        {isAdminUser && showBanner ? <Banner
+          type="info"
+          description="当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。"
+        /> : <></>
+        }
+        <Form layout="horizontal" style={{ marginTop: 10 }}>
+          <>
+            <Form.Input field="channel_id" label="渠道 ID" style={{ width: 176 }} value={channel_id}
+                        placeholder={'可选值'} name="channel_id"
+                        onChange={value => handleInputChange(value, 'channel_id')} />
+            <Form.Input field="mj_id" label="任务 ID" style={{ width: 176 }} value={mj_id}
+                        placeholder="可选值"
+                        name="mj_id"
+                        onChange={value => handleInputChange(value, 'mj_id')} />
+            <Form.DatePicker field="start_timestamp" label="起始时间" style={{ width: 272 }}
+                             initValue={start_timestamp}
+                             value={start_timestamp} type="dateTime"
+                             name="start_timestamp"
+                             onChange={value => handleInputChange(value, 'start_timestamp')} />
+            <Form.DatePicker field="end_timestamp" fluid label="结束时间" style={{ width: 272 }}
+                             initValue={end_timestamp}
+                             value={end_timestamp} type="dateTime"
+                             name="end_timestamp"
+                             onChange={value => handleInputChange(value, 'end_timestamp')} />
+
+            <Form.Section>
+              <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+                      onClick={refresh}>查询</Button>
+            </Form.Section>
+          </>
+        </Form>
+        <Table style={{ marginTop: 5 }} columns={columns} dataSource={pageData} pagination={{
+          currentPage: activePage,
+          pageSize: ITEMS_PER_PAGE,
+          total: logCount,
+          pageSizeOpts: [10, 20, 50, 100],
+          onPageChange: handlePageChange
+        }} loading={loading} />
+        <Modal
+          visible={isModalOpen}
+          onOk={() => setIsModalOpen(false)}
+          onCancel={() => setIsModalOpen(false)}
+          closable={null}
+          bodyStyle={{ height: '400px', overflow: 'auto' }} // 设置模态框内容区域样式
+          width={800} // 设置模态框宽度
+        >
+          <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
+        </Modal>
+        <ImagePreview
+          src={modalImageUrl}
+          visible={isModalOpenurl}
+          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
+        />
+
+      </Layout>
+    </>
+  );
+};
+
+export default LogsTable;

web/air/src/components/OperationSetting.js

@@ -0,0 +1,389 @@
+import React, { useEffect, useState } from 'react';
+import { Divider, Form, Grid, Header } from 'semantic-ui-react';
+import { API, showError, showSuccess, timestamp2string, verifyJSON } from '../helpers';
+
+const OperationSetting = () => {
+  let now = new Date();
+  let [inputs, setInputs] = useState({
+    QuotaForNewUser: 0,
+    QuotaForInviter: 0,
+    QuotaForInvitee: 0,
+    QuotaRemindThreshold: 0,
+    PreConsumedQuota: 0,
+    ModelRatio: '',
+    CompletionRatio: '',
+    GroupRatio: '',
+    TopUpLink: '',
+    ChatLink: '',
+    QuotaPerUnit: 0,
+    AutomaticDisableChannelEnabled: '',
+    AutomaticEnableChannelEnabled: '',
+    ChannelDisableThreshold: 0,
+    LogConsumeEnabled: '',
+    DisplayInCurrencyEnabled: '',
+    DisplayTokenStatEnabled: '',
+    ApproximateTokenEnabled: '',
+    RetryTimes: 0
+  });
+  const [originInputs, setOriginInputs] = useState({});
+  let [loading, setLoading] = useState(false);
+  let [historyTimestamp, setHistoryTimestamp] = useState(timestamp2string(now.getTime() / 1000 - 30 * 24 * 3600)); // a month ago
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key === 'ModelRatio' || item.key === 'GroupRatio' || item.key === 'CompletionRatio') {
+          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+        }
+        if (item.value === '{}') {
+          item.value = '';
+        }
+        newInputs[item.key] = item.value;
+      });
+      setInputs(newInputs);
+      setOriginInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions().then();
+  }, []);
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    if (key.endsWith('Enabled')) {
+      value = inputs[key] === 'true' ? 'false' : 'true';
+    }
+    const res = await API.put('/api/option/', {
+      key,
+      value
+    });
+    const { success, message } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const handleInputChange = async (e, { name, value }) => {
+    if (name.endsWith('Enabled')) {
+      await updateOption(name, value);
+    } else {
+      setInputs((inputs) => ({ ...inputs, [name]: value }));
+    }
+  };
+
+  const submitConfig = async (group) => {
+    switch (group) {
+      case 'monitor':
+        if (originInputs['ChannelDisableThreshold'] !== inputs.ChannelDisableThreshold) {
+          await updateOption('ChannelDisableThreshold', inputs.ChannelDisableThreshold);
+        }
+        if (originInputs['QuotaRemindThreshold'] !== inputs.QuotaRemindThreshold) {
+          await updateOption('QuotaRemindThreshold', inputs.QuotaRemindThreshold);
+        }
+        break;
+      case 'ratio':
+        if (originInputs['ModelRatio'] !== inputs.ModelRatio) {
+          if (!verifyJSON(inputs.ModelRatio)) {
+            showError('模型倍率不是合法的 JSON 字符串');
+            return;
+          }
+          await updateOption('ModelRatio', inputs.ModelRatio);
+        }
+        if (originInputs['GroupRatio'] !== inputs.GroupRatio) {
+          if (!verifyJSON(inputs.GroupRatio)) {
+            showError('分组倍率不是合法的 JSON 字符串');
+            return;
+          }
+          await updateOption('GroupRatio', inputs.GroupRatio);
+        }
+        if (originInputs['CompletionRatio'] !== inputs.CompletionRatio) {
+          if (!verifyJSON(inputs.CompletionRatio)) {
+            showError('补全倍率不是合法的 JSON 字符串');
+            return;
+          }
+          await updateOption('CompletionRatio', inputs.CompletionRatio);
+        }
+        break;
+      case 'quota':
+        if (originInputs['QuotaForNewUser'] !== inputs.QuotaForNewUser) {
+          await updateOption('QuotaForNewUser', inputs.QuotaForNewUser);
+        }
+        if (originInputs['QuotaForInvitee'] !== inputs.QuotaForInvitee) {
+          await updateOption('QuotaForInvitee', inputs.QuotaForInvitee);
+        }
+        if (originInputs['QuotaForInviter'] !== inputs.QuotaForInviter) {
+          await updateOption('QuotaForInviter', inputs.QuotaForInviter);
+        }
+        if (originInputs['PreConsumedQuota'] !== inputs.PreConsumedQuota) {
+          await updateOption('PreConsumedQuota', inputs.PreConsumedQuota);
+        }
+        break;
+      case 'general':
+        if (originInputs['TopUpLink'] !== inputs.TopUpLink) {
+          await updateOption('TopUpLink', inputs.TopUpLink);
+        }
+        if (originInputs['ChatLink'] !== inputs.ChatLink) {
+          await updateOption('ChatLink', inputs.ChatLink);
+        }
+        if (originInputs['QuotaPerUnit'] !== inputs.QuotaPerUnit) {
+          await updateOption('QuotaPerUnit', inputs.QuotaPerUnit);
+        }
+        if (originInputs['RetryTimes'] !== inputs.RetryTimes) {
+          await updateOption('RetryTimes', inputs.RetryTimes);
+        }
+        break;
+    }
+  };
+
+  const deleteHistoryLogs = async () => {
+    console.log(inputs);
+    const res = await API.delete(`/api/log/?target_timestamp=${Date.parse(historyTimestamp) / 1000}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess(`${data} 条日志已清理！`);
+      return;
+    }
+    showError('日志清理失败：' + message);
+  };
+
+  return (
+    <Grid columns={1}>
+      <Grid.Column>
+        <Form loading={loading}>
+          <Header as='h3'>
+            通用设置
+          </Header>
+          <Form.Group widths={4}>
+            <Form.Input
+              label='充值链接'
+              name='TopUpLink'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.TopUpLink}
+              type='link'
+              placeholder='例如发卡网站的购买链接'
+            />
+            <Form.Input
+              label='聊天页面链接'
+              name='ChatLink'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.ChatLink}
+              type='link'
+              placeholder='例如 ChatGPT Next Web 的部署地址'
+            />
+            <Form.Input
+              label='单位美元额度'
+              name='QuotaPerUnit'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaPerUnit}
+              type='number'
+              step='0.01'
+              placeholder='一单位货币能兑换的额度'
+            />
+            <Form.Input
+              label='失败重试次数'
+              name='RetryTimes'
+              type={'number'}
+              step='1'
+              min='0'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.RetryTimes}
+              placeholder='失败重试次数'
+            />
+          </Form.Group>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.DisplayInCurrencyEnabled === 'true'}
+              label='以货币形式显示额度'
+              name='DisplayInCurrencyEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.DisplayTokenStatEnabled === 'true'}
+              label='Billing 相关 API 显示令牌额度而非用户额度'
+              name='DisplayTokenStatEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.ApproximateTokenEnabled === 'true'}
+              label='使用近似的方式估算 token 数以减少计算量'
+              name='ApproximateTokenEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={() => {
+            submitConfig('general').then();
+          }}>保存通用设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            日志设置
+          </Header>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.LogConsumeEnabled === 'true'}
+              label='启用额度消费日志记录'
+              name='LogConsumeEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Group widths={4}>
+            <Form.Input label='目标时间' value={historyTimestamp} type='datetime-local'
+                        name='history_timestamp'
+                        onChange={(e, { name, value }) => {
+                          setHistoryTimestamp(value);
+                        }} />
+          </Form.Group>
+          <Form.Button onClick={() => {
+            deleteHistoryLogs().then();
+          }}>清理历史日志</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            监控设置
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='最长响应时间'
+              name='ChannelDisableThreshold'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.ChannelDisableThreshold}
+              type='number'
+              min='0'
+              placeholder='单位秒，当运行通道全部测试时，超过此时间将自动禁用通道'
+            />
+            <Form.Input
+              label='额度提醒阈值'
+              name='QuotaRemindThreshold'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaRemindThreshold}
+              type='number'
+              min='0'
+              placeholder='低于此额度时将发送邮件提醒用户'
+            />
+          </Form.Group>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.AutomaticDisableChannelEnabled === 'true'}
+              label='失败时自动禁用通道'
+              name='AutomaticDisableChannelEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.AutomaticEnableChannelEnabled === 'true'}
+              label='成功时自动启用通道'
+              name='AutomaticEnableChannelEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={() => {
+            submitConfig('monitor').then();
+          }}>保存监控设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            额度设置
+          </Header>
+          <Form.Group widths={4}>
+            <Form.Input
+              label='新用户初始额度'
+              name='QuotaForNewUser'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaForNewUser}
+              type='number'
+              min='0'
+              placeholder='例如：100'
+            />
+            <Form.Input
+              label='请求预扣费额度'
+              name='PreConsumedQuota'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.PreConsumedQuota}
+              type='number'
+              min='0'
+              placeholder='请求结束后多退少补'
+            />
+            <Form.Input
+              label='邀请新用户奖励额度'
+              name='QuotaForInviter'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaForInviter}
+              type='number'
+              min='0'
+              placeholder='例如：2000'
+            />
+            <Form.Input
+              label='新用户使用邀请码奖励额度'
+              name='QuotaForInvitee'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.QuotaForInvitee}
+              type='number'
+              min='0'
+              placeholder='例如：1000'
+            />
+          </Form.Group>
+          <Form.Button onClick={() => {
+            submitConfig('quota').then();
+          }}>保存额度设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            倍率设置
+          </Header>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='模型倍率'
+              name='ModelRatio'
+              onChange={handleInputChange}
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete='new-password'
+              value={inputs.ModelRatio}
+              placeholder='为一个 JSON 文本，键为模型名称，值为倍率'
+            />
+          </Form.Group>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='补全倍率'
+              name='CompletionRatio'
+              onChange={handleInputChange}
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete='new-password'
+              value={inputs.CompletionRatio}
+              placeholder='为一个 JSON 文本，键为模型名称，值为倍率，此处的倍率设置是模型补全倍率相较于提示倍率的比例，使用该设置可强制覆盖 One API 的内部比例'
+            />
+          </Form.Group>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='分组倍率'
+              name='GroupRatio'
+              onChange={handleInputChange}
+              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
+              autoComplete='new-password'
+              value={inputs.GroupRatio}
+              placeholder='为一个 JSON 文本，键为分组名称，值为倍率'
+            />
+          </Form.Group>
+          <Form.Button onClick={() => {
+            submitConfig('ratio').then();
+          }}>保存倍率设置</Form.Button>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default OperationSetting;

web/air/src/components/OtherSetting.js

@@ -0,0 +1,225 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react';
+import { API, showError, showSuccess } from '../helpers';
+import { marked } from 'marked';
+import { Link } from 'react-router-dom';
+
+const OtherSetting = () => {
+  let [inputs, setInputs] = useState({
+    Footer: '',
+    Notice: '',
+    About: '',
+    SystemName: '',
+    Logo: '',
+    HomePageContent: '',
+    Theme: ''
+  });
+  let [loading, setLoading] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [updateData, setUpdateData] = useState({
+    tag_name: '',
+    content: ''
+  });
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        if (item.key in inputs) {
+          newInputs[item.key] = item.value;
+        }
+      });
+      setInputs(newInputs);
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions().then();
+  }, []);
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    const res = await API.put('/api/option/', {
+      key,
+      value
+    });
+    const { success, message } = res.data;
+    if (success) {
+      setInputs((inputs) => ({ ...inputs, [key]: value }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const handleInputChange = async (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const submitNotice = async () => {
+    await updateOption('Notice', inputs.Notice);
+  };
+
+  const submitFooter = async () => {
+    await updateOption('Footer', inputs.Footer);
+  };
+
+  const submitSystemName = async () => {
+    await updateOption('SystemName', inputs.SystemName);
+  };
+
+  const submitTheme = async () => {
+    await updateOption('Theme', inputs.Theme);
+  };
+
+  const submitLogo = async () => {
+    await updateOption('Logo', inputs.Logo);
+  };
+
+  const submitAbout = async () => {
+    await updateOption('About', inputs.About);
+  };
+
+  const submitOption = async (key) => {
+    await updateOption(key, inputs[key]);
+  };
+
+  const openGitHubRelease = () => {
+    window.location =
+      'https://github.com/songquanpeng/one-api/releases/latest';
+  };
+
+  const checkUpdate = async () => {
+    const res = await API.get(
+      'https://api.github.com/repos/songquanpeng/one-api/releases/latest'
+    );
+    const { tag_name, body } = res.data;
+    if (tag_name === process.env.REACT_APP_VERSION) {
+      showSuccess(`已是最新版本：${tag_name}`);
+    } else {
+      setUpdateData({
+        tag_name: tag_name,
+        content: marked.parse(body)
+      });
+      setShowUpdateModal(true);
+    }
+  };
+
+  return (
+    <Grid columns={1}>
+      <Grid.Column>
+        <Form loading={loading}>
+          <Header as='h3'>通用设置</Header>
+          <Form.Button onClick={checkUpdate}>检查更新</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='公告'
+              placeholder='在此输入新的公告内容，支持 Markdown & HTML 代码'
+              value={inputs.Notice}
+              name='Notice'
+              onChange={handleInputChange}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitNotice}>保存公告</Form.Button>
+          <Divider />
+          <Header as='h3'>个性化设置</Header>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='系统名称'
+              placeholder='在此输入系统名称'
+              value={inputs.SystemName}
+              name='SystemName'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitSystemName}>设置系统名称</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label={<label>主题名称（<Link
+                to='https://github.com/songquanpeng/one-api/blob/main/web/README.md'>当前可用主题</Link>）</label>}
+              placeholder='请输入主题名称'
+              value={inputs.Theme}
+              name='Theme'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitTheme}>设置主题（重启生效）</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='Logo 图片地址'
+              placeholder='在此输入 Logo 图片地址'
+              value={inputs.Logo}
+              name='Logo'
+              type='url'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitLogo}>设置 Logo</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='首页内容'
+              placeholder='在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。'
+              value={inputs.HomePageContent}
+              name='HomePageContent'
+              onChange={handleInputChange}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={() => submitOption('HomePageContent')}>保存首页内容</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='关于'
+              placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'
+              value={inputs.About}
+              name='About'
+              onChange={handleInputChange}
+              style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitAbout}>保存关于</Form.Button>
+          <Message>移除 One API
+            的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。</Message>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='页脚'
+              placeholder='在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'
+              value={inputs.Footer}
+              name='Footer'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitFooter}>设置页脚</Form.Button>
+        </Form>
+      </Grid.Column>
+      <Modal
+        onClose={() => setShowUpdateModal(false)}
+        onOpen={() => setShowUpdateModal(true)}
+        open={showUpdateModal}
+      >
+        <Modal.Header>新版本：{updateData.tag_name}</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>
+          </Modal.Description>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={() => setShowUpdateModal(false)}>关闭</Button>
+          <Button
+            content='详情'
+            onClick={() => {
+              setShowUpdateModal(false);
+              openGitHubRelease();
+            }}
+          />
+        </Modal.Actions>
+      </Modal>
+    </Grid>
+  );
+};
+
+export default OtherSetting;

web/air/src/components/PasswordResetConfirm.js

@@ -0,0 +1,113 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import { API, copy, showError, showNotice } from '../helpers';
+import { useSearchParams } from 'react-router-dom';
+
+const PasswordResetConfirm = () => {
+  const [inputs, setInputs] = useState({
+    email: '',
+    token: ''
+  });
+  const { email, token } = inputs;
+
+  const [loading, setLoading] = useState(false);
+
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+
+  const [newPassword, setNewPassword] = useState('');
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    let token = searchParams.get('token');
+    let email = searchParams.get('email');
+    setInputs({
+      token,
+      email
+    });
+  }, []);
+
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval);
+  }, [disableButton, countdown]);
+
+  async function handleSubmit(e) {
+    setDisableButton(true);
+    if (!email) return;
+    setLoading(true);
+    const res = await API.post(`/api/user/reset`, {
+      email,
+      token
+    });
+    const { success, message } = res.data;
+    if (success) {
+      let password = res.data.data;
+      setNewPassword(password);
+      await copy(password);
+      showNotice(`新密码已复制到剪贴板：${password}`);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as="h2" color="" textAlign="center">
+          <Image src="/logo.png" /> 密码重置确认
+        </Header>
+        <Form size="large">
+          <Segment>
+            <Form.Input
+              fluid
+              icon="mail"
+              iconPosition="left"
+              placeholder="邮箱地址"
+              name="email"
+              value={email}
+              readOnly
+            />
+            {newPassword && (
+              <Form.Input
+                fluid
+                icon="lock"
+                iconPosition="left"
+                placeholder="新密码"
+                name="newPassword"
+                value={newPassword}
+                readOnly
+                onClick={(e) => {
+                  e.target.select();
+                  navigator.clipboard.writeText(newPassword);
+                  showNotice(`密码已复制到剪贴板：${newPassword}`);
+                }}
+              />
+            )}
+            <Button
+              color="green"
+              fluid
+              size="large"
+              onClick={handleSubmit}
+              loading={loading}
+              disabled={disableButton}
+            >
+              {disableButton ? `密码重置完成` : '提交'}
+            </Button>
+          </Segment>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default PasswordResetConfirm;

web/air/src/components/PasswordResetForm.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
+import { API, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+
+const PasswordResetForm = () => {
+  const [inputs, setInputs] = useState({
+    email: ''
+  });
+  const { email } = inputs;
+
+  const [loading, setLoading] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval);
+  }, [disableButton, countdown]);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setInputs(inputs => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    setDisableButton(true);
+    if (!email) return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/reset_password?email=${email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('重置邮件发送成功，请检查邮箱！');
+      setInputs({ ...inputs, email: '' });
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as="h2" color="" textAlign="center">
+          <Image src="/logo.png" /> 密码重置
+        </Header>
+        <Form size="large">
+          <Segment>
+            <Form.Input
+              fluid
+              icon="mail"
+              iconPosition="left"
+              placeholder="邮箱地址"
+              name="email"
+              value={email}
+              onChange={handleChange}
+            />
+            {turnstileEnabled ? (
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            <Button
+              color="green"
+              fluid
+              size="large"
+              onClick={handleSubmit}
+              loading={loading}
+              disabled={disableButton}
+            >
+              {disableButton ? `重试 (${countdown})` : '提交'}
+            </Button>
+          </Segment>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default PasswordResetForm;

web/air/src/components/PersonalSetting.js

@@ -0,0 +1,653 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { API, copy, isRoot, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+import { UserContext } from '../context/User';
+import { onGitHubOAuthClicked } from './utils';
+import {
+  Avatar,
+  Banner,
+  Button,
+  Card,
+  Descriptions,
+  Image,
+  Input,
+  InputNumber,
+  Layout,
+  Modal,
+  Space,
+  Tag,
+  Typography
+} from '@douyinfe/semi-ui';
+import { getQuotaPerUnit, renderQuota, renderQuotaWithPrompt, stringToColor } from '../helpers/render';
+import TelegramLoginButton from 'react-telegram-login';
+
+const PersonalSetting = () => {
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+
+  const [inputs, setInputs] = useState({
+    wechat_verification_code: '',
+    email_verification_code: '',
+    email: '',
+    self_account_deletion_confirmation: '',
+    set_new_password: '',
+    set_new_password_confirmation: ''
+  });
+  const [status, setStatus] = useState({});
+  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+  const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
+  const [showEmailBindModal, setShowEmailBindModal] = useState(false);
+  const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+  const [affLink, setAffLink] = useState('');
+  const [systemToken, setSystemToken] = useState('');
+  // const [models, setModels] = useState([]);
+  const [openTransfer, setOpenTransfer] = useState(false);
+  const [transferAmount, setTransferAmount] = useState(0);
+
+  useEffect(() => {
+    // let user = localStorage.getItem('user');
+    // if (user) {
+    //   userDispatch({ type: 'login', payload: user });
+    // }
+    // console.log(localStorage.getItem('user'))
+
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setStatus(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+    getUserData().then(
+      (res) => {
+        console.log(userState);
+      }
+    );
+    // loadModels().then();
+    getAffLink().then();
+    setTransferAmount(getQuotaPerUnit());
+  }, []);
+
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval); // Clean up on unmount
+  }, [disableButton, countdown]);
+
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const generateAccessToken = async () => {
+    const res = await API.get('/api/user/token');
+    const { success, message, data } = res.data;
+    if (success) {
+      setSystemToken(data);
+      await copy(data);
+      showSuccess(`令牌已重置并已复制到剪贴板`);
+    } else {
+      showError(message);
+    }
+  };
+
+  const getAffLink = async () => {
+    const res = await API.get('/api/user/aff');
+    const { success, message, data } = res.data;
+    if (success) {
+      let link = `${window.location.origin}/register?aff=${data}`;
+      setAffLink(link);
+    } else {
+      showError(message);
+    }
+  };
+
+  const getUserData = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+    } else {
+      showError(message);
+    }
+  };
+
+  // const loadModels = async () => {
+  //   let res = await API.get(`/api/user/models`);
+  //   const { success, message, data } = res.data;
+  //   if (success) {
+  //     setModels(data);
+  //     console.log(data);
+  //   } else {
+  //     showError(message);
+  //   }
+  // };
+
+  const handleAffLinkClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(`邀请链接已复制到剪切板`);
+  };
+
+  const handleSystemTokenClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(`系统令牌已复制到剪切板`);
+  };
+
+  const deleteAccount = async () => {
+    if (inputs.self_account_deletion_confirmation !== userState.user.username) {
+      showError('请输入你的账户名以确认删除！');
+      return;
+    }
+
+    const res = await API.delete('/api/user/self');
+    const { success, message } = res.data;
+
+    if (success) {
+      showSuccess('账户已删除！');
+      await API.get('/api/user/logout');
+      userDispatch({ type: 'logout' });
+      localStorage.removeItem('user');
+      navigate('/login');
+    } else {
+      showError(message);
+    }
+  };
+
+  const bindWeChat = async () => {
+    if (inputs.wechat_verification_code === '') return;
+    const res = await API.get(
+      `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('微信账户绑定成功！');
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+  };
+
+  const changePassword = async () => {
+    if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
+      showError('两次输入的密码不一致！');
+      return;
+    }
+    const res = await API.put(
+      `/api/user/self`,
+      {
+        password: inputs.set_new_password
+      }
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('密码修改成功！');
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+    setShowChangePasswordModal(false);
+  };
+
+  const transfer = async () => {
+    if (transferAmount < getQuotaPerUnit()) {
+      showError('划转金额最低为' + renderQuota(getQuotaPerUnit()));
+      return;
+    }
+    const res = await API.post(
+      `/api/user/aff_transfer`,
+      {
+        quota: transferAmount
+      }
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(message);
+      setOpenTransfer(false);
+      getUserData().then();
+    } else {
+      showError(message);
+    }
+  };
+
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') {
+      showError('请输入邮箱！');
+      return;
+    }
+    setDisableButton(true);
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('验证码发送成功，请检查邮箱！');
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const bindEmail = async () => {
+    if (inputs.email_verification_code === '') {
+      showError('请输入邮箱验证码！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('邮箱账户绑定成功！');
+      setShowEmailBindModal(false);
+      userState.user.email = inputs.email;
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const getUsername = () => {
+    if (userState.user) {
+      return userState.user.username;
+    } else {
+      return 'null';
+    }
+  };
+
+  const handleCancel = () => {
+    setOpenTransfer(false);
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制：' + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  return (
+    <div>
+      <Layout>
+        <Layout.Content>
+          <Modal
+            title="请输入要划转的数量"
+            visible={openTransfer}
+            onOk={transfer}
+            onCancel={handleCancel}
+            maskClosable={false}
+            size={'small'}
+            centered={true}
+          >
+            <div style={{ marginTop: 20 }}>
+              <Typography.Text>{`可用额度${renderQuotaWithPrompt(userState?.user?.aff_quota)}`}</Typography.Text>
+              <Input style={{ marginTop: 5 }} value={userState?.user?.aff_quota} disabled={true}></Input>
+            </div>
+            <div style={{ marginTop: 20 }}>
+              <Typography.Text>{`划转额度${renderQuotaWithPrompt(transferAmount)} 最低` + renderQuota(getQuotaPerUnit())}</Typography.Text>
+              <div>
+                <InputNumber min={0} style={{ marginTop: 5 }} value={transferAmount}
+                  onChange={(value) => setTransferAmount(value)} disabled={false}></InputNumber>
+              </div>
+            </div>
+          </Modal>
+          <div style={{ marginTop: 20 }}>
+            <Card
+              title={
+                <Card.Meta
+                  avatar={<Avatar size="default" color={stringToColor(getUsername())}
+                    style={{ marginRight: 4 }}>
+                    {typeof getUsername() === 'string' && getUsername().slice(0, 1)}
+                  </Avatar>}
+                  title={<Typography.Text>{getUsername()}</Typography.Text>}
+                  description={isRoot() ? <Tag color="red">管理员</Tag> : <Tag color="blue">普通用户</Tag>}
+                ></Card.Meta>
+              }
+              headerExtraContent={
+                <>
+                  <Space vertical align="start">
+                    <Tag color="green">{'ID: ' + userState?.user?.id}</Tag>
+                    <Tag color="blue">{userState?.user?.group}</Tag>
+                  </Space>
+                </>
+              }
+              footer={
+                <Descriptions row>
+                  <Descriptions.Item itemKey="当前余额">{renderQuota(userState?.user?.quota)}</Descriptions.Item>
+                  <Descriptions.Item itemKey="历史消耗">{renderQuota(userState?.user?.used_quota)}</Descriptions.Item>
+                  <Descriptions.Item itemKey="请求次数">{userState.user?.request_count}</Descriptions.Item>
+                </Descriptions>
+              }
+            >
+              <Typography.Title heading={6}>调用信息</Typography.Title>
+              {/* <Typography.Title heading={6}>可用模型</Typography.Title>
+              <div style={{ marginTop: 10 }}>
+                <Space wrap>
+                  {models.map((model) => (
+                    <Tag key={model} color="cyan" onClick={() => {
+                      copyText(model);
+                    }}>
+                      {model}
+                    </Tag>
+                  ))}
+                </Space>
+              </div> */}
+            </Card>
+            {/* <Card
+              footer={
+                <div>
+                  <Typography.Text>邀请链接</Typography.Text>
+                  <Input
+                    style={{ marginTop: 10 }}
+                    value={affLink}
+                    onClick={handleAffLinkClick}
+                    readOnly
+                  />
+                </div>
+              }
+            >
+              <Typography.Title heading={6}>邀请信息</Typography.Title>
+              <div style={{ marginTop: 10 }}>
+                <Descriptions row>
+                  <Descriptions.Item itemKey="待使用收益">
+                    <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
+                      {
+                        renderQuota(userState?.user?.aff_quota)
+                      }
+                    </span>
+                    <Button type={'secondary'} onClick={() => setOpenTransfer(true)} size={'small'}
+                      style={{ marginLeft: 10 }}>划转</Button>
+                  </Descriptions.Item>
+                  <Descriptions.Item
+                    itemKey="总收益">{renderQuota(userState?.user?.aff_history_quota)}</Descriptions.Item>
+                  <Descriptions.Item itemKey="邀请人数">{userState?.user?.aff_count}</Descriptions.Item>
+                </Descriptions>
+              </div>
+            </Card> */}
+            <Card>
+              <Typography.Title heading={6}>邀请链接</Typography.Title>
+              <Input
+                style={{ marginTop: 10 }}
+                value={affLink}
+                onClick={handleAffLinkClick}
+                readOnly
+              />
+            </Card>
+            <Card>
+              <Typography.Title heading={6}>个人信息</Typography.Title>
+              <div style={{ marginTop: 20 }}>
+                <Typography.Text strong>邮箱</Typography.Text>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>
+                    <Input
+                      value={userState.user && userState.user.email !== '' ? userState.user.email : '未绑定'}
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button onClick={() => {
+                      setShowEmailBindModal(true);
+                    }}>{
+                        userState.user && userState.user.email !== '' ? '修改绑定' : '绑定邮箱'
+                      }</Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>微信</Typography.Text>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>
+                    <Input
+                      value={userState.user && userState.user.wechat_id !== '' ? '已绑定' : '未绑定'}
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button disabled={(userState.user && userState.user.wechat_id !== '') || !status.wechat_login}>
+                      {
+                        status.wechat_login ? '绑定' : '未启用'
+                      }
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>GitHub</Typography.Text>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>
+                    <Input
+                      value={userState.user && userState.user.github_id !== '' ? userState.user.github_id : '未绑定'}
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      onClick={() => {
+                        onGitHubOAuthClicked(status.github_client_id);
+                      }}
+                      disabled={(userState.user && userState.user.github_id !== '') || !status.github_oauth}
+                    >
+                      {
+                        status.github_oauth ? '绑定' : '未启用'
+                      }
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>Telegram</Typography.Text>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>
+                    <Input
+                      value={userState.user && userState.user.telegram_id !== '' ? userState.user.telegram_id : '未绑定'}
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    {status.telegram_oauth ?
+                      userState.user.telegram_id !== '' ? <Button disabled={true}>已绑定</Button>
+                        : <TelegramLoginButton dataAuthUrl="/api/oauth/telegram/bind"
+                          botName={status.telegram_bot_name} />
+                      : <Button disabled={true}>未启用</Button>
+                    }
+                  </div>
+                </div>
+              </div> */}
+
+              <div style={{ marginTop: 10 }}>
+                <Space>
+                  <Button onClick={generateAccessToken}>生成系统访问令牌</Button>
+                  <Button onClick={() => {
+                    setShowChangePasswordModal(true);
+                  }}>修改密码</Button>
+                  <Button type={'danger'} onClick={() => {
+                    setShowAccountDeleteModal(true);
+                  }}>删除个人账户</Button>
+                </Space>
+
+                {systemToken && (
+                  <Input
+                    readOnly
+                    value={systemToken}
+                    onClick={handleSystemTokenClick}
+                    style={{ marginTop: '10px' }}
+                  />
+                )}
+                {
+                  status.wechat_login && (
+                    <Button
+                      onClick={() => {
+                        setShowWeChatBindModal(true);
+                      }}
+                    >
+                      绑定微信账号
+                    </Button>
+                  )
+                }
+                <Modal
+                  onCancel={() => setShowWeChatBindModal(false)}
+                  // onOpen={() => setShowWeChatBindModal(true)}
+                  visible={showWeChatBindModal}
+                  size={'mini'}
+                >
+                  <Image src={status.wechat_qrcode} />
+                  <div style={{ textAlign: 'center' }}>
+                    <p>
+                      微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                    </p>
+                  </div>
+                  <Input
+                    placeholder="验证码"
+                    name="wechat_verification_code"
+                    value={inputs.wechat_verification_code}
+                    onChange={(v) => handleInputChange('wechat_verification_code', v)}
+                  />
+                  <Button color="" fluid size="large" onClick={bindWeChat}>
+                    绑定
+                  </Button>
+                </Modal>
+              </div>
+            </Card>
+            <Modal
+              onCancel={() => setShowEmailBindModal(false)}
+              // onOpen={() => setShowEmailBindModal(true)}
+              onOk={bindEmail}
+              visible={showEmailBindModal}
+              size={'small'}
+              centered={true}
+              maskClosable={false}
+            >
+              <Typography.Title heading={6}>绑定邮箱地址</Typography.Title>
+              <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
+                <Input
+                  fluid
+                  placeholder="输入邮箱地址"
+                  onChange={(value) => handleInputChange('email', value)}
+                  name="email"
+                  type="email"
+                />
+                <Button onClick={sendVerificationCode}
+                  disabled={disableButton || loading}>
+                  {disableButton ? `重新发送(${countdown})` : '获取验证码'}
+                </Button>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Input
+                  fluid
+                  placeholder="验证码"
+                  name="email_verification_code"
+                  value={inputs.email_verification_code}
+                  onChange={(value) => handleInputChange('email_verification_code', value)}
+                />
+              </div>
+              {turnstileEnabled ? (
+                <Turnstile
+                  sitekey={turnstileSiteKey}
+                  onVerify={(token) => {
+                    setTurnstileToken(token);
+                  }}
+                />
+              ) : (
+                <></>
+              )}
+            </Modal>
+            <Modal
+              onCancel={() => setShowAccountDeleteModal(false)}
+              visible={showAccountDeleteModal}
+              size={'small'}
+              centered={true}
+              onOk={deleteAccount}
+            >
+              <div style={{ marginTop: 20 }}>
+                <Banner
+                  type="danger"
+                  description="您正在删除自己的帐户，将清空所有数据且不可恢复"
+                  closeIcon={null}
+                />
+              </div>
+              <div style={{ marginTop: 20 }}>
+                <Input
+                  placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
+                  name="self_account_deletion_confirmation"
+                  value={inputs.self_account_deletion_confirmation}
+                  onChange={(value) => handleInputChange('self_account_deletion_confirmation', value)}
+                />
+                {turnstileEnabled ? (
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Modal>
+            <Modal
+              onCancel={() => setShowChangePasswordModal(false)}
+              visible={showChangePasswordModal}
+              size={'small'}
+              centered={true}
+              onOk={changePassword}
+            >
+              <div style={{ marginTop: 20 }}>
+                <Input
+                  name="set_new_password"
+                  placeholder="新密码"
+                  value={inputs.set_new_password}
+                  onChange={(value) => handleInputChange('set_new_password', value)}
+                />
+                <Input
+                  style={{ marginTop: 20 }}
+                  name="set_new_password_confirmation"
+                  placeholder="确认新密码"
+                  value={inputs.set_new_password_confirmation}
+                  onChange={(value) => handleInputChange('set_new_password_confirmation', value)}
+                />
+                {turnstileEnabled ? (
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Modal>
+          </div>
+
+        </Layout.Content>
+      </Layout>
+    </div>
+  );
+};
+
+export default PersonalSetting;

web/air/src/components/PrivateRoute.js

@@ -0,0 +1,13 @@
+import { Navigate } from 'react-router-dom';
+
+import { history } from '../helpers';
+
+
+function PrivateRoute({ children }) {
+  if (!localStorage.getItem('user')) {
+    return <Navigate to="/login" state={{ from: history.location }} />;
+  }
+  return children;
+}
+
+export { PrivateRoute };

web/air/src/components/RedemptionsTable.js

@@ -0,0 +1,406 @@
+import React, { useEffect, useState } from 'react';
+import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';
+import { Button, Form, Modal, Popconfirm, Popover, Table, Tag } from '@douyinfe/semi-ui';
+import EditRedemption from '../pages/Redemption/EditRedemption';
+
+function renderTimestamp(timestamp) {
+  return (
+    <>
+      {timestamp2string(timestamp)}
+    </>
+  );
+}
+
+function renderStatus(status) {
+  switch (status) {
+    case 1:
+      return <Tag color="green" size="large">未使用</Tag>;
+    case 2:
+      return <Tag color="red" size="large"> 已禁用 </Tag>;
+    case 3:
+      return <Tag color="grey" size="large"> 已使用 </Tag>;
+    default:
+      return <Tag color="black" size="large"> 未知状态 </Tag>;
+  }
+}
+
+const RedemptionsTable = () => {
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id'
+    },
+    {
+      title: '名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderStatus(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '额度',
+      dataIndex: 'quota',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderQuota(parseInt(text))}
+          </div>
+        );
+      }
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderTimestamp(text)}
+          </div>
+        );
+      }
+    },
+    // {
+    //   title: '兑换人ID',
+    //   dataIndex: 'used_user_id',
+    //   render: (text, record, index) => {
+    //     return (
+    //       <div>
+    //         {text === 0 ? '无' : text}
+    //       </div>
+    //     );
+    //   }
+    // },
+    {
+      title: '',
+      dataIndex: 'operate',
+      render: (text, record, index) => (
+        <div>
+          <Popover
+            content={
+              record.key
+            }
+            style={{ padding: 20 }}
+            position="top"
+          >
+            <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
+          </Popover>
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
+                  onClick={async (text) => {
+                    await copyText(record.key);
+                  }}
+          >复制</Button>
+          <Popconfirm
+            title="确定是否要删除此兑换码？"
+            content="此修改将不可逆"
+            okType={'danger'}
+            position={'left'}
+            onConfirm={() => {
+              manageRedemption(record.id, 'delete', record).then(
+                () => {
+                  removeRecord(record.key);
+                }
+              );
+            }}
+          >
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+          </Popconfirm>
+          {
+            record.status === 1 ?
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageRedemption(
+                    record.id,
+                    'disable',
+                    record
+                  );
+                }
+              }>禁用</Button> :
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageRedemption(
+                    record.id,
+                    'enable',
+                    record
+                  );
+                }
+              } disabled={record.status === 3}>启用</Button>
+          }
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
+            () => {
+              setEditingRedemption(record);
+              setShowEdit(true);
+            }
+          } disabled={record.status !== 1}>编辑</Button>
+        </div>
+      )
+    }
+  ];
+
+  const [redemptions, setRedemptions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [editingRedemption, setEditingRedemption] = useState({
+    id: undefined
+  });
+  const [showEdit, setShowEdit] = useState(false);
+
+  const closeEdit = () => {
+    setShowEdit(false);
+  };
+
+  // const setCount = (data) => {
+  //     if (data.length >= (activePage) * ITEMS_PER_PAGE) {
+  //         setTokenCount(data.length + 1);
+  //     } else {
+  //         setTokenCount(data.length);
+  //     }
+  // }
+
+  const setRedemptionFormat = (redeptions) => {
+    // for (let i = 0; i < redeptions.length; i++) {
+    //     redeptions[i].key = '' + redeptions[i].id;
+    // }
+    // data.key = '' + data.id
+    setRedemptions(redeptions);
+    if (redeptions.length >= (activePage) * ITEMS_PER_PAGE) {
+      setTokenCount(redeptions.length + 1);
+    } else {
+      setTokenCount(redeptions.length);
+    }
+  };
+
+  const loadRedemptions = async (startIdx) => {
+    const res = await API.get(`/api/redemption/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setRedemptionFormat(data);
+      } else {
+        let newRedemptions = redemptions;
+        newRedemptions.push(...data);
+        setRedemptionFormat(newRedemptions);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const removeRecord = key => {
+    let newDataSource = [...redemptions];
+    if (key != null) {
+      let idx = newDataSource.findIndex(data => data.key === key);
+
+      if (idx > -1) {
+        newDataSource.splice(idx, 1);
+        setRedemptions(newDataSource);
+      }
+    }
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制到剪贴板！');
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadRedemptions(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadRedemptions(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const refresh = async () => {
+    await loadRedemptions(activePage - 1);
+  };
+
+  const manageRedemption = async (id, action, record) => {
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/redemption/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/redemption/?status_only=true', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/redemption/?status_only=true', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let redemption = res.data.data;
+      let newRedemptions = [...redemptions];
+      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      if (action === 'delete') {
+
+      } else {
+        record.status = redemption.status;
+      }
+      setRedemptions(newRedemptions);
+    } else {
+      showError(message);
+    }
+  };
+
+  const searchRedemptions = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadRedemptions(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setRedemptions(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (value) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortRedemption = (key) => {
+    if (redemptions.length === 0) return;
+    setLoading(true);
+    let sortedRedemptions = [...redemptions];
+    sortedRedemptions.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedRedemptions[0].id === redemptions[0].id) {
+      sortedRedemptions.reverse();
+    }
+    setRedemptions(sortedRedemptions);
+    setLoading(false);
+  };
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
+      // In this case we have to load more data and then append them.
+      loadRedemptions(page - 1).then(r => {
+      });
+    }
+  };
+
+  let pageData = redemptions.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+  const rowSelection = {
+    onSelect: (record, selected) => {
+    },
+    onSelectAll: (selected, selectedRows) => {
+    },
+    onChange: (selectedRowKeys, selectedRows) => {
+      setSelectedKeys(selectedRows);
+    }
+  };
+
+  const handleRow = (record, index) => {
+    if (record.status !== 1) {
+      return {
+        style: {
+          background: 'var(--semi-color-disabled-border)'
+        }
+      };
+    } else {
+      return {};
+    }
+  };
+
+  return (
+    <>
+      <EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit}
+                      handleClose={closeEdit}></EditRedemption>
+      <Form onSubmit={searchRedemptions}>
+        <Form.Input
+          label="搜索关键字"
+          field="keyword"
+          icon="search"
+          iconPosition="left"
+          placeholder="关键字(id或者名称)"
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+      </Form>
+
+      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
+        currentPage: activePage,
+        pageSize: ITEMS_PER_PAGE,
+        total: tokenCount,
+        // showSizeChanger: true,
+        // pageSizeOptions: [10, 20, 50, 100],
+        formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
+        // onPageSizeChange: (size) => {
+        //   setPageSize(size);
+        //   setActivePage(1);
+        // },
+        onPageChange: handlePageChange
+      }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
+      </Table>
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
+        () => {
+          setEditingRedemption({
+            id: undefined
+          });
+          setShowEdit(true);
+        }
+      }>添加兑换码</Button>
+      <Button label="复制所选兑换码" type="warning" onClick={
+        async () => {
+          if (selectedKeys.length === 0) {
+            showError('请至少选择一个兑换码！');
+            return;
+          }
+          let keys = '';
+          for (let i = 0; i < selectedKeys.length; i++) {
+            keys += selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
+          }
+          await copyText(keys);
+        }
+      }>复制所选兑换码到剪贴板</Button>
+    </>
+  );
+};
+
+export default RedemptionsTable;

web/air/src/components/RegisterForm.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { API, getLogo, showError, showInfo, showSuccess } from '../helpers';
+import Turnstile from 'react-turnstile';
+
+const RegisterForm = () => {
+  const [inputs, setInputs] = useState({
+    username: '',
+    password: '',
+    password2: '',
+    email: '',
+    verification_code: ''
+  });
+  const { username, password, password2 } = inputs;
+  const [showEmailVerification, setShowEmailVerification] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const logo = getLogo();
+  let affCode = new URLSearchParams(window.location.search).get('aff');
+  if (affCode) {
+    localStorage.setItem('aff', affCode);
+  }
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setShowEmailVerification(status.email_verification);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  });
+
+  let navigate = useNavigate();
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    console.log(name, value);
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  }
+
+  async function handleSubmit(e) {
+    if (password.length < 8) {
+      showInfo('密码长度不得小于 8 位！');
+      return;
+    }
+    if (password !== password2) {
+      showInfo('两次输入的密码不一致');
+      return;
+    }
+    if (username && password) {
+      if (turnstileEnabled && turnstileToken === '') {
+        showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+        return;
+      }
+      setLoading(true);
+      if (!affCode) {
+        affCode = localStorage.getItem('aff');
+      }
+      inputs.aff_code = affCode;
+      const res = await API.post(
+        `/api/user/register?turnstile=${turnstileToken}`,
+        inputs
+      );
+      const { success, message } = res.data;
+      if (success) {
+        navigate('/login');
+        showSuccess('注册成功！');
+      } else {
+        showError(message);
+      }
+      setLoading(false);
+    }
+  }
+
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') return;
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('验证码发送成功，请检查你的邮箱！');
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <Grid textAlign="center" style={{ marginTop: '48px' }}>
+      <Grid.Column style={{ maxWidth: 450 }}>
+        <Header as="h2" color="" textAlign="center">
+          <Image src={logo} /> 新用户注册
+        </Header>
+        <Form size="large">
+          <Segment>
+            <Form.Input
+              fluid
+              icon="user"
+              iconPosition="left"
+              placeholder="输入用户名，最长 12 位"
+              onChange={handleChange}
+              name="username"
+            />
+            <Form.Input
+              fluid
+              icon="lock"
+              iconPosition="left"
+              placeholder="输入密码，最短 8 位，最长 20 位"
+              onChange={handleChange}
+              name="password"
+              type="password"
+            />
+            <Form.Input
+              fluid
+              icon="lock"
+              iconPosition="left"
+              placeholder="输入密码，最短 8 位，最长 20 位"
+              onChange={handleChange}
+              name="password2"
+              type="password"
+            />
+            {showEmailVerification ? (
+              <>
+                <Form.Input
+                  fluid
+                  icon="mail"
+                  iconPosition="left"
+                  placeholder="输入邮箱地址"
+                  onChange={handleChange}
+                  name="email"
+                  type="email"
+                  action={
+                    <Button onClick={sendVerificationCode} disabled={loading}>
+                      获取验证码
+                    </Button>
+                  }
+                />
+                <Form.Input
+                  fluid
+                  icon="lock"
+                  iconPosition="left"
+                  placeholder="输入验证码"
+                  onChange={handleChange}
+                  name="verification_code"
+                />
+              </>
+            ) : (
+              <></>
+            )}
+            {turnstileEnabled ? (
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            ) : (
+              <></>
+            )}
+            <Button
+              color="green"
+              fluid
+              size="large"
+              onClick={handleSubmit}
+              loading={loading}
+            >
+              注册
+            </Button>
+          </Segment>
+        </Form>
+        <Message>
+          已有账户？
+          <Link to="/login" className="btn btn-link">
+            点击登录
+          </Link>
+        </Message>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default RegisterForm;

web/air/src/components/SiderBar.js

@@ -0,0 +1,214 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { UserContext } from '../context/User';
+import { StatusContext } from '../context/Status';
+
+import { API, getLogo, getSystemName, isAdmin, isMobile, showError } from '../helpers';
+import '../index.css';
+
+import {
+  IconCalendarClock,
+  IconComment,
+  IconCreditCard,
+  IconGift,
+  IconHistogram,
+  IconHome,
+  IconImage,
+  IconKey,
+  IconLayers,
+  IconSetting,
+  IconUser
+} from '@douyinfe/semi-icons';
+import { Layout, Nav } from '@douyinfe/semi-ui';
+
+// HeaderBar Buttons
+
+const SiderBar = () => {
+  const [userState, userDispatch] = useContext(UserContext);
+  const [statusState, statusDispatch] = useContext(StatusContext);
+  const defaultIsCollapsed = isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true';
+
+  let navigate = useNavigate();
+  const [selectedKeys, setSelectedKeys] = useState(['home']);
+  const systemName = getSystemName();
+  const logo = getLogo();
+  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
+
+  const headerButtons = useMemo(() => [
+    {
+      text: '首页',
+      itemKey: 'home',
+      to: '/',
+      icon: <IconHome />
+    },
+    {
+      text: '渠道',
+      itemKey: 'channel',
+      to: '/channel',
+      icon: <IconLayers />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '聊天',
+      itemKey: 'chat',
+      to: '/chat',
+      icon: <IconComment />,
+      className: localStorage.getItem('chat_link') ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '令牌',
+      itemKey: 'token',
+      to: '/token',
+      icon: <IconKey />
+    },
+    {
+      text: '兑换',
+      itemKey: 'redemption',
+      to: '/redemption',
+      icon: <IconGift />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '充值',
+      itemKey: 'topup',
+      to: '/topup',
+      icon: <IconCreditCard />
+    },
+    {
+      text: '用户',
+      itemKey: 'user',
+      to: '/user',
+      icon: <IconUser />,
+      className: isAdmin() ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '日志',
+      itemKey: 'log',
+      to: '/log',
+      icon: <IconHistogram />
+    },
+    {
+      text: '数据看板',
+      itemKey: 'detail',
+      to: '/detail',
+      icon: <IconCalendarClock />,
+      className: localStorage.getItem('enable_data_export') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '绘图',
+      itemKey: 'midjourney',
+      to: '/midjourney',
+      icon: <IconImage />,
+      className: localStorage.getItem('enable_drawing') === 'true' ? 'semi-navigation-item-normal' : 'tableHiddle'
+    },
+    {
+      text: '设置',
+      itemKey: 'setting',
+      to: '/setting',
+      icon: <IconSetting />
+    }
+    // {
+    //     text: '关于',
+    //     itemKey: 'about',
+    //     to: '/about',
+    //     icon: <IconAt/>
+    // }
+  ], [localStorage.getItem('enable_data_export'), localStorage.getItem('enable_drawing'), localStorage.getItem('chat_link'), isAdmin()]);
+
+  const loadStatus = async () => {
+    const res = await API.get('/api/status');
+    const { success, data } = res.data;
+    if (success) {
+      localStorage.setItem('status', JSON.stringify(data));
+      statusDispatch({ type: 'set', payload: data });
+      localStorage.setItem('system_name', data.system_name);
+      localStorage.setItem('logo', data.logo);
+      localStorage.setItem('footer_html', data.footer_html);
+      localStorage.setItem('quota_per_unit', data.quota_per_unit);
+      localStorage.setItem('display_in_currency', data.display_in_currency);
+      localStorage.setItem('enable_drawing', data.enable_drawing);
+      localStorage.setItem('enable_data_export', data.enable_data_export);
+      localStorage.setItem('data_export_default_time', data.data_export_default_time);
+      localStorage.setItem('default_collapse_sidebar', data.default_collapse_sidebar);
+      localStorage.setItem('mj_notify_enabled', data.mj_notify_enabled);
+      if (data.chat_link) {
+        localStorage.setItem('chat_link', data.chat_link);
+      } else {
+        localStorage.removeItem('chat_link');
+      }
+      if (data.chat_link2) {
+        localStorage.setItem('chat_link2', data.chat_link2);
+      } else {
+        localStorage.removeItem('chat_link2');
+      }
+    } else {
+      showError('无法正常连接至服务器！');
+    }
+  };
+
+  useEffect(() => {
+    loadStatus().then(() => {
+      setIsCollapsed(isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true');
+    });
+  }, []);
+
+  return (
+    <>
+      <Layout>
+        <div style={{ height: '100%' }}>
+          <Nav
+            // bodyStyle={{ maxWidth: 200 }}
+            style={{ maxWidth: 200 }}
+            defaultIsCollapsed={isMobile() || localStorage.getItem('default_collapse_sidebar') === 'true'}
+            isCollapsed={isCollapsed}
+            onCollapseChange={collapsed => {
+              setIsCollapsed(collapsed);
+            }}
+            selectedKeys={selectedKeys}
+            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
+              const routerMap = {
+                home: '/',
+                channel: '/channel',
+                token: '/token',
+                redemption: '/redemption',
+                topup: '/topup',
+                user: '/user',
+                log: '/log',
+                midjourney: '/midjourney',
+                setting: '/setting',
+                about: '/about',
+                chat: '/chat',
+                detail: '/detail'
+              };
+              return (
+                <Link
+                  style={{ textDecoration: 'none' }}
+                  to={routerMap[props.itemKey]}
+                >
+                  {itemElement}
+                </Link>
+              );
+            }}
+            items={headerButtons}
+            onSelect={key => {
+              setSelectedKeys([key.itemKey]);
+            }}
+            header={{
+              logo: <img src={logo} alt="logo" style={{ marginRight: '0.75em' }} />,
+              text: systemName
+            }}
+            // footer={{
+            //   text: '© 2021 NekoAPI',
+            // }}
+          >
+
+            <Nav.Footer collapseButton={true}>
+            </Nav.Footer>
+          </Nav>
+        </div>
+      </Layout>
+    </>
+  );
+};
+
+export default SiderBar;

web/air/src/components/SystemSetting.js

@@ -0,0 +1,590 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Divider, Form, Grid, Header, Modal, Message } from 'semantic-ui-react';
+import { API, removeTrailingSlash, showError } from '../helpers';
+
+const SystemSetting = () => {
+  let [inputs, setInputs] = useState({
+    PasswordLoginEnabled: '',
+    PasswordRegisterEnabled: '',
+    EmailVerificationEnabled: '',
+    GitHubOAuthEnabled: '',
+    GitHubClientId: '',
+    GitHubClientSecret: '',
+    Notice: '',
+    SMTPServer: '',
+    SMTPPort: '',
+    SMTPAccount: '',
+    SMTPFrom: '',
+    SMTPToken: '',
+    ServerAddress: '',
+    Footer: '',
+    WeChatAuthEnabled: '',
+    WeChatServerAddress: '',
+    WeChatServerToken: '',
+    WeChatAccountQRCodeImageURL: '',
+    MessagePusherAddress: '',
+    MessagePusherToken: '',
+    TurnstileCheckEnabled: '',
+    TurnstileSiteKey: '',
+    TurnstileSecretKey: '',
+    RegisterEnabled: '',
+    EmailDomainRestrictionEnabled: '',
+    EmailDomainWhitelist: ''
+  });
+  const [originInputs, setOriginInputs] = useState({});
+  let [loading, setLoading] = useState(false);
+  const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
+  const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
+  const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false);
+
+  const getOptions = async () => {
+    const res = await API.get('/api/option/');
+    const { success, message, data } = res.data;
+    if (success) {
+      let newInputs = {};
+      data.forEach((item) => {
+        newInputs[item.key] = item.value;
+      });
+      setInputs({
+        ...newInputs,
+        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
+      });
+      setOriginInputs(newInputs);
+
+      setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(',').map((item) => {
+        return { key: item, text: item, value: item };
+      }));
+    } else {
+      showError(message);
+    }
+  };
+
+  useEffect(() => {
+    getOptions().then();
+  }, []);
+
+  const updateOption = async (key, value) => {
+    setLoading(true);
+    switch (key) {
+      case 'PasswordLoginEnabled':
+      case 'PasswordRegisterEnabled':
+      case 'EmailVerificationEnabled':
+      case 'GitHubOAuthEnabled':
+      case 'WeChatAuthEnabled':
+      case 'TurnstileCheckEnabled':
+      case 'EmailDomainRestrictionEnabled':
+      case 'RegisterEnabled':
+        value = inputs[key] === 'true' ? 'false' : 'true';
+        break;
+      default:
+        break;
+    }
+    const res = await API.put('/api/option/', {
+      key,
+      value
+    });
+    const { success, message } = res.data;
+    if (success) {
+      if (key === 'EmailDomainWhitelist') {
+        value = value.split(',');
+      }
+      setInputs((inputs) => ({
+        ...inputs, [key]: value
+      }));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const handleInputChange = async (e, { name, value }) => {
+    if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
+      // block disabling password login
+      setShowPasswordWarningModal(true);
+      return;
+    }
+    if (
+      name === 'Notice' ||
+      name.startsWith('SMTP') ||
+      name === 'ServerAddress' ||
+      name === 'GitHubClientId' ||
+      name === 'GitHubClientSecret' ||
+      name === 'WeChatServerAddress' ||
+      name === 'WeChatServerToken' ||
+      name === 'WeChatAccountQRCodeImageURL' ||
+      name === 'TurnstileSiteKey' ||
+      name === 'TurnstileSecretKey' ||
+      name === 'EmailDomainWhitelist'
+    ) {
+      setInputs((inputs) => ({ ...inputs, [name]: value }));
+    } else {
+      await updateOption(name, value);
+    }
+  };
+
+  const submitServerAddress = async () => {
+    let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
+    await updateOption('ServerAddress', ServerAddress);
+  };
+
+  const submitSMTP = async () => {
+    if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
+      await updateOption('SMTPServer', inputs.SMTPServer);
+    }
+    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
+      await updateOption('SMTPAccount', inputs.SMTPAccount);
+    }
+    if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
+      await updateOption('SMTPFrom', inputs.SMTPFrom);
+    }
+    if (
+      originInputs['SMTPPort'] !== inputs.SMTPPort &&
+      inputs.SMTPPort !== ''
+    ) {
+      await updateOption('SMTPPort', inputs.SMTPPort);
+    }
+    if (
+      originInputs['SMTPToken'] !== inputs.SMTPToken &&
+      inputs.SMTPToken !== ''
+    ) {
+      await updateOption('SMTPToken', inputs.SMTPToken);
+    }
+  };
+
+
+  const submitEmailDomainWhitelist = async () => {
+    if (
+      originInputs['EmailDomainWhitelist'] !== inputs.EmailDomainWhitelist.join(',') &&
+      inputs.SMTPToken !== ''
+    ) {
+      await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
+    }
+  };
+
+  const submitWeChat = async () => {
+    if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
+      await updateOption(
+        'WeChatServerAddress',
+        removeTrailingSlash(inputs.WeChatServerAddress)
+      );
+    }
+    if (
+      originInputs['WeChatAccountQRCodeImageURL'] !==
+      inputs.WeChatAccountQRCodeImageURL
+    ) {
+      await updateOption(
+        'WeChatAccountQRCodeImageURL',
+        inputs.WeChatAccountQRCodeImageURL
+      );
+    }
+    if (
+      originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
+      inputs.WeChatServerToken !== ''
+    ) {
+      await updateOption('WeChatServerToken', inputs.WeChatServerToken);
+    }
+  };
+
+  const submitMessagePusher = async () => {
+    if (originInputs['MessagePusherAddress'] !== inputs.MessagePusherAddress) {
+      await updateOption(
+        'MessagePusherAddress',
+        removeTrailingSlash(inputs.MessagePusherAddress)
+      );
+    }
+    if (
+      originInputs['MessagePusherToken'] !== inputs.MessagePusherToken &&
+      inputs.MessagePusherToken !== ''
+    ) {
+      await updateOption('MessagePusherToken', inputs.MessagePusherToken);
+    }
+  };
+
+  const submitGitHubOAuth = async () => {
+    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
+      await updateOption('GitHubClientId', inputs.GitHubClientId);
+    }
+    if (
+      originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
+      inputs.GitHubClientSecret !== ''
+    ) {
+      await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
+    }
+  };
+
+  const submitTurnstile = async () => {
+    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
+      await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
+    }
+    if (
+      originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
+      inputs.TurnstileSecretKey !== ''
+    ) {
+      await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
+    }
+  };
+
+  const submitNewRestrictedDomain = () => {
+    const localDomainList = inputs.EmailDomainWhitelist;
+    if (restrictedDomainInput !== '' && !localDomainList.includes(restrictedDomainInput)) {
+      setRestrictedDomainInput('');
+      setInputs({
+        ...inputs,
+        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
+      });
+      setEmailDomainWhitelist([...EmailDomainWhitelist, {
+        key: restrictedDomainInput,
+        text: restrictedDomainInput,
+        value: restrictedDomainInput,
+      }]);
+    }
+  }
+
+  return (
+    <Grid columns={1}>
+      <Grid.Column>
+        <Form loading={loading}>
+          <Header as='h3'>通用设置</Header>
+          <Form.Group widths='equal'>
+            <Form.Input
+              label='服务器地址'
+              placeholder='例如：https://yourdomain.com'
+              value={inputs.ServerAddress}
+              name='ServerAddress'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitServerAddress}>
+            更新服务器地址
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>配置登录注册</Header>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.PasswordLoginEnabled === 'true'}
+              label='允许通过密码进行登录'
+              name='PasswordLoginEnabled'
+              onChange={handleInputChange}
+            />
+            {
+              showPasswordWarningModal &&
+              <Modal
+                open={showPasswordWarningModal}
+                onClose={() => setShowPasswordWarningModal(false)}
+                size={'tiny'}
+                style={{ maxWidth: '450px' }}
+              >
+                <Modal.Header>警告</Modal.Header>
+                <Modal.Content>
+                  <p>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</p>
+                </Modal.Content>
+                <Modal.Actions>
+                  <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
+                  <Button
+                    color='yellow'
+                    onClick={async () => {
+                      setShowPasswordWarningModal(false);
+                      await updateOption('PasswordLoginEnabled', 'false');
+                    }}
+                  >
+                    确定
+                  </Button>
+                </Modal.Actions>
+              </Modal>
+            }
+            <Form.Checkbox
+              checked={inputs.PasswordRegisterEnabled === 'true'}
+              label='允许通过密码进行注册'
+              name='PasswordRegisterEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.EmailVerificationEnabled === 'true'}
+              label='通过密码注册时需要进行邮箱验证'
+              name='EmailVerificationEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.GitHubOAuthEnabled === 'true'}
+              label='允许通过 GitHub 账户登录 & 注册'
+              name='GitHubOAuthEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.WeChatAuthEnabled === 'true'}
+              label='允许通过微信登录 & 注册'
+              name='WeChatAuthEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Form.Group inline>
+            <Form.Checkbox
+              checked={inputs.RegisterEnabled === 'true'}
+              label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
+              name='RegisterEnabled'
+              onChange={handleInputChange}
+            />
+            <Form.Checkbox
+              checked={inputs.TurnstileCheckEnabled === 'true'}
+              label='启用 Turnstile 用户校验'
+              name='TurnstileCheckEnabled'
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+          <Divider />
+          <Header as='h3'>
+            配置邮箱域名白名单
+            <Header.Subheader>用以防止恶意用户利用临时邮箱批量注册</Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Checkbox
+              label='启用邮箱域名白名单'
+              name='EmailDomainRestrictionEnabled'
+              onChange={handleInputChange}
+              checked={inputs.EmailDomainRestrictionEnabled === 'true'}
+            />
+          </Form.Group>
+          <Form.Group widths={2}>
+            <Form.Dropdown
+              label='允许的邮箱域名'
+              placeholder='允许的邮箱域名'
+              name='EmailDomainWhitelist'
+              required
+              fluid
+              multiple
+              selection
+              onChange={handleInputChange}
+              value={inputs.EmailDomainWhitelist}
+              autoComplete='new-password'
+              options={EmailDomainWhitelist}
+            />
+            <Form.Input
+              label='添加新的允许的邮箱域名'
+              action={
+                <Button type='button' onClick={() => {
+                  submitNewRestrictedDomain();
+                }}>填入</Button>
+              }
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  submitNewRestrictedDomain();
+                }
+              }}
+              autoComplete='new-password'
+              placeholder='输入新的允许的邮箱域名'
+              value={restrictedDomainInput}
+              onChange={(e, { value }) => {
+                setRestrictedDomainInput(value);
+              }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitEmailDomainWhitelist}>保存邮箱域名白名单设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 SMTP
+            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='SMTP 服务器地址'
+              name='SMTPServer'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.SMTPServer}
+              placeholder='例如：smtp.qq.com'
+            />
+            <Form.Input
+              label='SMTP 端口'
+              name='SMTPPort'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.SMTPPort}
+              placeholder='默认: 587'
+            />
+            <Form.Input
+              label='SMTP 账户'
+              name='SMTPAccount'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.SMTPAccount}
+              placeholder='通常是邮箱地址'
+            />
+          </Form.Group>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='SMTP 发送者邮箱'
+              name='SMTPFrom'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.SMTPFrom}
+              placeholder='通常和邮箱地址保持一致'
+            />
+            <Form.Input
+              label='SMTP 访问凭证'
+              name='SMTPToken'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='new-password'
+              checked={inputs.RegisterEnabled === 'true'}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 GitHub OAuth App
+            <Header.Subheader>
+              用以支持通过 GitHub 进行登录注册，
+              <a href='https://github.com/settings/developers' target='_blank'>
+                点击此处
+              </a>
+              管理你的 GitHub OAuth App
+            </Header.Subheader>
+          </Header>
+          <Message>
+            Homepage URL 填 <code>{inputs.ServerAddress}</code>
+            ，Authorization callback URL 填{' '}
+            <code>{`${inputs.ServerAddress}/oauth/github`}</code>
+          </Message>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='GitHub Client ID'
+              name='GitHubClientId'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.GitHubClientId}
+              placeholder='输入你注册的 GitHub OAuth APP 的 ID'
+            />
+            <Form.Input
+              label='GitHub Client Secret'
+              name='GitHubClientSecret'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='new-password'
+              value={inputs.GitHubClientSecret}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitGitHubOAuth}>
+            保存 GitHub OAuth 设置
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 WeChat Server
+            <Header.Subheader>
+              用以支持通过微信进行登录注册，
+              <a
+                href='https://github.com/songquanpeng/wechat-server'
+                target='_blank'
+              >
+                点击此处
+              </a>
+              了解 WeChat Server
+            </Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='WeChat Server 服务器地址'
+              name='WeChatServerAddress'
+              placeholder='例如：https://yourdomain.com'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.WeChatServerAddress}
+            />
+            <Form.Input
+              label='WeChat Server 访问凭证'
+              name='WeChatServerToken'
+              type='password'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.WeChatServerToken}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+            <Form.Input
+              label='微信公众号二维码图片链接'
+              name='WeChatAccountQRCodeImageURL'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.WeChatAccountQRCodeImageURL}
+              placeholder='输入一个图片链接'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitWeChat}>
+            保存 WeChat Server 设置
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 Message Pusher
+            <Header.Subheader>
+              用以推送报警信息，
+              <a
+                href='https://github.com/songquanpeng/message-pusher'
+                target='_blank'
+              >
+                点击此处
+              </a>
+              了解 Message Pusher
+            </Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='Message Pusher 推送地址'
+              name='MessagePusherAddress'
+              placeholder='例如：https://msgpusher.com/push/your_username'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.MessagePusherAddress}
+            />
+            <Form.Input
+              label='Message Pusher 访问凭证'
+              name='MessagePusherToken'
+              type='password'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.MessagePusherToken}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitMessagePusher}>
+            保存 Message Pusher 设置
+          </Form.Button>
+          <Divider />
+          <Header as='h3'>
+            配置 Turnstile
+            <Header.Subheader>
+              用以支持用户校验，
+              <a href='https://dash.cloudflare.com/' target='_blank'>
+                点击此处
+              </a>
+              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
+            </Header.Subheader>
+          </Header>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='Turnstile Site Key'
+              name='TurnstileSiteKey'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.TurnstileSiteKey}
+              placeholder='输入你注册的 Turnstile Site Key'
+            />
+            <Form.Input
+              label='Turnstile Secret Key'
+              name='TurnstileSecretKey'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='new-password'
+              value={inputs.TurnstileSecretKey}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitTurnstile}>
+            保存 Turnstile 设置
+          </Form.Button>
+        </Form>
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+export default SystemSetting;

web/air/src/components/TokensTable.js

@@ -0,0 +1,621 @@
+import React, { useEffect, useState } from 'react';
+import { API, copy, showError, showSuccess, timestamp2string } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';
+import { Button, Dropdown, Form, Modal, Popconfirm, Popover, SplitButtonGroup, Table, Tag } from '@douyinfe/semi-ui';
+
+import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import EditToken from '../pages/Token/EditToken';
+
+const COPY_OPTIONS = [
+  { key: 'next', text: 'ChatGPT Next Web', value: 'next' },
+  { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
+  { key: 'opencat', text: 'OpenCat', value: 'opencat' }
+];
+
+const OPEN_LINK_OPTIONS = [
+  { key: 'ama', text: 'ChatGPT Web & Midjourney', value: 'ama' },
+  { key: 'opencat', text: 'OpenCat', value: 'opencat' }
+];
+
+function renderTimestamp(timestamp) {
+  return (
+    <>
+      {timestamp2string(timestamp)}
+    </>
+  );
+}
+
+function renderStatus(status, model_limits_enabled = false) {
+  switch (status) {
+    case 1:
+      if (model_limits_enabled) {
+        return <Tag color="green" size="large">已启用：限制模型</Tag>;
+      } else {
+        return <Tag color="green" size="large">已启用</Tag>;
+      }
+    case 2:
+      return <Tag color="red" size="large"> 已禁用 </Tag>;
+    case 3:
+      return <Tag color="yellow" size="large"> 已过期 </Tag>;
+    case 4:
+      return <Tag color="grey" size="large"> 已耗尽 </Tag>;
+    default:
+      return <Tag color="black" size="large"> 未知状态 </Tag>;
+  }
+}
+
+const TokensTable = () => {
+
+  const link_menu = [
+    {
+      node: 'item', key: 'next', name: 'ChatGPT Next Web', onClick: () => {
+        onOpenLink('next');
+      }
+    },
+    { node: 'item', key: 'ama', name: 'AMA 问天', value: 'ama' },
+    {
+      node: 'item', key: 'next-mj', name: 'ChatGPT Web & Midjourney', value: 'next-mj', onClick: () => {
+        onOpenLink('next-mj');
+      }
+    },
+    { node: 'item', key: 'opencat', name: 'OpenCat', value: 'opencat' }
+  ];
+
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderStatus(text, record.model_limits_enabled)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '已用额度',
+      dataIndex: 'used_quota',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderQuota(parseInt(text))}
+          </div>
+        );
+      }
+    },
+    {
+      title: '剩余额度',
+      dataIndex: 'remain_quota',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {record.unlimited_quota ? <Tag size={'large'} color={'white'}>无限制</Tag> :
+              <Tag size={'large'} color={'light-blue'}>{renderQuota(parseInt(text))}</Tag>}
+          </div>
+        );
+      }
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'created_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {renderTimestamp(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '过期时间',
+      dataIndex: 'expired_time',
+      render: (text, record, index) => {
+        return (
+          <div>
+            {record.expired_time === -1 ? '永不过期' : renderTimestamp(text)}
+          </div>
+        );
+      }
+    },
+    {
+      title: '',
+      dataIndex: 'operate',
+      render: (text, record, index) => (
+        <div>
+          <Popover
+            content={
+              'sk-' + record.key
+            }
+            style={{ padding: 20 }}
+            position="top"
+          >
+            <Button theme="light" type="tertiary" style={{ marginRight: 1 }}>查看</Button>
+          </Popover>
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }}
+                  onClick={async (text) => {
+                    await copyText('sk-' + record.key);
+                  }}
+          >复制</Button>
+          <SplitButtonGroup style={{ marginRight: 1 }} aria-label="项目操作按钮组">
+            <Button theme="light" style={{ color: 'rgba(var(--semi-teal-7), 1)' }} onClick={() => {
+              onOpenLink('next', record.key);
+            }}>聊天</Button>
+            <Dropdown trigger="click" position="bottomRight" menu={
+              [
+                {
+                  node: 'item',
+                  key: 'next',
+                  disabled: !localStorage.getItem('chat_link'),
+                  name: 'ChatGPT Next Web',
+                  onClick: () => {
+                    onOpenLink('next', record.key);
+                  }
+                },
+                {
+                  node: 'item',
+                  key: 'next-mj',
+                  disabled: !localStorage.getItem('chat_link2'),
+                  name: 'ChatGPT Web & Midjourney',
+                  onClick: () => {
+                    onOpenLink('next-mj', record.key);
+                  }
+                },
+                {
+                  node: 'item', key: 'ama', name: 'AMA 问天（BotGem）', onClick: () => {
+                    onOpenLink('ama', record.key);
+                  }
+                },
+                {
+                  node: 'item', key: 'opencat', name: 'OpenCat', onClick: () => {
+                    onOpenLink('opencat', record.key);
+                  }
+                }
+              ]
+            }
+            >
+              <Button style={{ padding: '8px 4px', color: 'rgba(var(--semi-teal-7), 1)' }} type="primary"
+                      icon={<IconTreeTriangleDown />}></Button>
+            </Dropdown>
+          </SplitButtonGroup>
+          <Popconfirm
+            title="确定是否要删除此令牌？"
+            content="此修改将不可逆"
+            okType={'danger'}
+            position={'left'}
+            onConfirm={() => {
+              manageToken(record.id, 'delete', record).then(
+                () => {
+                  removeRecord(record.key);
+                }
+              );
+            }}
+          >
+            <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+          </Popconfirm>
+          {
+            record.status === 1 ?
+              <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageToken(
+                    record.id,
+                    'disable',
+                    record
+                  );
+                }
+              }>禁用</Button> :
+              <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={
+                async () => {
+                  manageToken(
+                    record.id,
+                    'enable',
+                    record
+                  );
+                }
+              }>启用</Button>
+          }
+          <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={
+            () => {
+              setEditingToken(record);
+              setShowEdit(true);
+            }
+          }>编辑</Button>
+        </div>
+      )
+    }
+  ];
+
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
+  const [showEdit, setShowEdit] = useState(false);
+  const [tokens, setTokens] = useState([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [tokenCount, setTokenCount] = useState(pageSize);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searchToken, setSearchToken] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [showTopUpModal, setShowTopUpModal] = useState(false);
+  const [targetTokenIdx, setTargetTokenIdx] = useState(0);
+  const [editingToken, setEditingToken] = useState({
+    id: undefined
+  });
+  const [orderBy, setOrderBy] = useState('');
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+
+  const closeEdit = () => {
+    setShowEdit(false);
+    setTimeout(() => {
+      setEditingToken({
+        id: undefined
+      });
+    }, 500);
+  };
+
+  const setTokensFormat = (tokens) => {
+    setTokens(tokens);
+    if (tokens.length >= pageSize) {
+      setTokenCount(tokens.length + pageSize);
+    } else {
+      setTokenCount(tokens.length);
+    }
+  };
+
+  let pageData = tokens.slice((activePage - 1) * pageSize, activePage * pageSize);
+  const loadTokens = async (startIdx) => {
+    setLoading(true);
+    const res = await API.get(`/api/token/?p=${startIdx}&size=${pageSize}&order=${orderBy}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setTokensFormat(data);
+      } else {
+        let newTokens = [...tokens];
+        newTokens.splice(startIdx * pageSize, data.length, ...data);
+        setTokensFormat(newTokens);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(tokens.length / pageSize) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadTokens(activePage - 1, orderBy);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  const refresh = async () => {
+    await loadTokens(activePage - 1);
+  };
+
+  const onCopy = async (type, key) => {
+    let status = localStorage.getItem('status');
+    let serverAddress = '';
+    if (status) {
+      status = JSON.parse(status);
+      serverAddress = status.server_address;
+    }
+    if (serverAddress === '') {
+      serverAddress = window.location.origin;
+    }
+    let encodedServerAddress = encodeURIComponent(serverAddress);
+    const nextLink = localStorage.getItem('chat_link');
+    const mjLink = localStorage.getItem('chat_link2');
+    let nextUrl;
+
+    if (nextLink) {
+      nextUrl = nextLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+    } else {
+      nextUrl = `https://chat.oneapi.pro/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+    }
+
+    let url;
+    switch (type) {
+      case 'ama':
+        url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+        break;
+      case 'opencat':
+        url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
+        break;
+      case 'next':
+        url = nextUrl;
+        break;
+      default:
+        url = `sk-${key}`;
+    }
+    // if (await copy(url)) {
+    //     showSuccess('已复制到剪贴板！');
+    // } else {
+    //     showWarning('无法复制到剪贴板，请手动复制，已将令牌填入搜索框。');
+    //     setSearchKeyword(url);
+    // }
+  };
+
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess('已复制到剪贴板！');
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+    }
+  };
+
+  const onOpenLink = async (type, key) => {
+    let status = localStorage.getItem('status');
+    let serverAddress = '';
+    if (status) {
+      status = JSON.parse(status);
+      serverAddress = status.server_address;
+    }
+    if (serverAddress === '') {
+      serverAddress = window.location.origin;
+    }
+    let encodedServerAddress = encodeURIComponent(serverAddress);
+    const chatLink = localStorage.getItem('chat_link');
+    const mjLink = localStorage.getItem('chat_link2');
+    let defaultUrl;
+
+    if (chatLink) {
+      defaultUrl = chatLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+    }
+    let url;
+    switch (type) {
+      case 'ama':
+        url = `ama://set-api-key?server=${encodedServerAddress}&key=sk-${key}`;
+        break;
+      case 'opencat':
+        url = `opencat://team/join?domain=${encodedServerAddress}&token=sk-${key}`;
+        break;
+      case 'next-mj':
+        url = mjLink + `/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+        break;
+      default:
+        if (!chatLink) {
+          showError('管理员未设置聊天链接');
+          return;
+        }
+        url = defaultUrl;
+    }
+
+    window.open(url, '_blank');
+  };
+
+  useEffect(() => {
+    loadTokens(0, orderBy)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, [pageSize, orderBy]);
+
+  const removeRecord = key => {
+    let newDataSource = [...tokens];
+    if (key != null) {
+      let idx = newDataSource.findIndex(data => data.key === key);
+
+      if (idx > -1) {
+        newDataSource.splice(idx, 1);
+        setTokensFormat(newDataSource);
+      }
+    }
+  };
+
+  const manageToken = async (id, action, record) => {
+    setLoading(true);
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/token/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/token/?status_only=true', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/token/?status_only=true', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let token = res.data.data;
+      let newTokens = [...tokens];
+      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      if (action === 'delete') {
+
+      } else {
+        record.status = token.status;
+        // newTokens[realIdx].status = token.status;
+      }
+      setTokensFormat(newTokens);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const searchTokens = async () => {
+    if (searchKeyword === '' && searchToken === '') {
+      // if keyword is blank, load files instead.
+      await loadTokens(0);
+      setActivePage(1);
+      setOrderBy('');
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/token/search?keyword=${searchKeyword}&token=${searchToken}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setTokensFormat(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (value) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const handleSearchTokenChange = async (value) => {
+    setSearchToken(value.trim());
+  };
+
+  const sortToken = (key) => {
+    if (tokens.length === 0) return;
+    setLoading(true);
+    let sortedTokens = [...tokens];
+    sortedTokens.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedTokens[0].id === tokens[0].id) {
+      sortedTokens.reverse();
+    }
+    setTokens(sortedTokens);
+    setLoading(false);
+  };
+
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(tokens.length / pageSize) + 1) {
+      // In this case we have to load more data and then append them.
+      loadTokens(page - 1).then(r => {
+      });
+    }
+  };
+
+  const rowSelection = {
+    onSelect: (record, selected) => {
+    },
+    onSelectAll: (selected, selectedRows) => {
+    },
+    onChange: (selectedRowKeys, selectedRows) => {
+      setSelectedKeys(selectedRows);
+    }
+  };
+
+  const handleRow = (record, index) => {
+    if (record.status !== 1) {
+      return {
+        style: {
+          background: 'var(--semi-color-disabled-border)'
+        }
+      };
+    } else {
+      return {};
+    }
+  };
+
+  const handleOrderByChange = (e, { value }) => {
+    setOrderBy(value);
+    setActivePage(1);
+    setDropdownVisible(false);
+  };
+
+  const renderSelectedOption = (orderBy) => {
+    switch (orderBy) {
+      case 'remain_quota':
+        return '按剩余额度排序';
+      case 'used_quota':
+        return '按已用额度排序';
+      default:
+        return '默认排序';
+    }
+  };
+
+  return (
+    <>
+      <EditToken refresh={refresh} editingToken={editingToken} visiable={showEdit} handleClose={closeEdit}></EditToken>
+      <Form layout="horizontal" style={{ marginTop: 10 }} labelPosition={'left'}>
+        <Form.Input
+          field="keyword"
+          label="搜索关键字"
+          placeholder="令牌名称"
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+        {/* <Form.Input
+          field="token"
+          label="Key"
+          placeholder="密钥"
+          value={searchToken}
+          loading={searching}
+          onChange={handleSearchTokenChange}
+        /> */}
+        <Button label="查询" type="primary" htmlType="submit" className="btn-margin-right"
+                onClick={searchTokens} style={{ marginRight: 8 }}>查询</Button>
+      </Form>
+
+      <Table style={{ marginTop: 20 }} columns={columns} dataSource={pageData} pagination={{
+        currentPage: activePage,
+        pageSize: pageSize,
+        total: tokenCount,
+        showSizeChanger: true,
+        pageSizeOptions: [10, 20, 50, 100],
+        formatPageText: (page) => `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
+        onPageSizeChange: (size) => {
+          setPageSize(size);
+          setActivePage(1);
+        },
+        onPageChange: handlePageChange
+      }} loading={loading} rowSelection={rowSelection} onRow={handleRow}>
+      </Table>
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
+        () => {
+          setEditingToken({
+            id: undefined
+          });
+          setShowEdit(true);
+        }
+      }>添加令牌</Button>
+      <Button label="复制所选令牌" type="warning" onClick={
+        async () => {
+          if (selectedKeys.length === 0) {
+            showError('请至少选择一个令牌！');
+            return;
+          }
+          let keys = '';
+          for (let i = 0; i < selectedKeys.length; i++) {
+            keys += selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+          }
+          await copyText(keys);
+        }
+      }>复制所选令牌到剪贴板</Button>
+      <Dropdown
+        trigger="click"
+        position="bottomLeft"
+        visible={dropdownVisible}
+        onVisibleChange={(visible) => setDropdownVisible(visible)}
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: '' })}>默认排序</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: 'remain_quota' })}>按剩余额度排序</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: 'used_quota' })}>按已用额度排序</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+      <Button style={{ marginLeft: '10px' }}>{renderSelectedOption(orderBy)}</Button>
+      </Dropdown>
+    </>
+  );
+};
+
+export default TokensTable;

web/air/src/components/UsersTable.js

@@ -0,0 +1,376 @@
+import React, { useEffect, useState } from 'react';
+import { API, showError, showSuccess } from '../helpers';
+import { Button, Form, Popconfirm, Space, Table, Tag, Tooltip, Dropdown } from '@douyinfe/semi-ui';
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderGroup, renderNumber, renderQuota } from '../helpers/render';
+import AddUser from '../pages/User/AddUser';
+import EditUser from '../pages/User/EditUser';
+
+function renderRole(role) {
+  switch (role) {
+    case 1:
+      return <Tag size="large">普通用户</Tag>;
+    case 10:
+      return <Tag color="yellow" size="large">管理员</Tag>;
+    case 100:
+      return <Tag color="orange" size="large">超级管理员</Tag>;
+    default:
+      return <Tag color="red" size="large">未知身份</Tag>;
+  }
+}
+
+const UsersTable = () => {
+  const columns = [{
+    title: 'ID', dataIndex: 'id'
+  }, {
+    title: '用户名', dataIndex: 'username'
+  }, {
+    title: '分组', dataIndex: 'group', render: (text, record, index) => {
+      return (<div>
+        {renderGroup(text)}
+      </div>);
+    }
+  }, {
+    title: '统计信息', dataIndex: 'info', render: (text, record, index) => {
+      return (<div>
+        <Space spacing={1}>
+          <Tooltip content={'剩余额度'}>
+            <Tag color="white" size="large">{renderQuota(record.quota)}</Tag>
+          </Tooltip>
+          <Tooltip content={'已用额度'}>
+            <Tag color="white" size="large">{renderQuota(record.used_quota)}</Tag>
+          </Tooltip>
+          <Tooltip content={'调用次数'}>
+            <Tag color="white" size="large">{renderNumber(record.request_count)}</Tag>
+          </Tooltip>
+        </Space>
+      </div>);
+    }
+  },
+  // {
+  //   title: '邀请信息', dataIndex: 'invite', render: (text, record, index) => {
+  //     return (<div>
+  //       <Space spacing={1}>
+  //         <Tooltip content={'邀请人数'}>
+  //           <Tag color="white" size="large">{renderNumber(record.aff_count)}</Tag>
+  //         </Tooltip>
+  //         <Tooltip content={'邀请总收益'}>
+  //           <Tag color="white" size="large">{renderQuota(record.aff_history_quota)}</Tag>
+  //         </Tooltip>
+  //         <Tooltip content={'邀请人ID'}>
+  //           {record.inviter_id === 0 ? <Tag color="white" size="large">无</Tag> :
+  //             <Tag color="white" size="large">{record.inviter_id}</Tag>}
+  //         </Tooltip>
+  //       </Space>
+  //     </div>);
+  //   }
+  // },
+  {
+    title: '角色', dataIndex: 'role', render: (text, record, index) => {
+      return (<div>
+        {renderRole(text)}
+      </div>);
+    }
+  },
+  {
+    title: '状态', dataIndex: 'status', render: (text, record, index) => {
+      return (<div>
+        {renderStatus(text)}
+      </div>);
+    }
+  },
+  {
+    title: '', dataIndex: 'operate', render: (text, record, index) => (<div>
+      <>
+        <Popconfirm
+          title="确定？"
+          okType={'warning'}
+          onConfirm={() => {
+            manageUser(record.username, 'promote', record);
+          }}
+        >
+          <Button theme="light" type="warning" style={{ marginRight: 1 }}>提升</Button>
+        </Popconfirm>
+        <Popconfirm
+          title="确定？"
+          okType={'warning'}
+          onConfirm={() => {
+            manageUser(record.username, 'demote', record);
+          }}
+        >
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }}>降级</Button>
+        </Popconfirm>
+        {record.status === 1 ?
+          <Button theme="light" type="warning" style={{ marginRight: 1 }} onClick={async () => {
+            manageUser(record.username, 'disable', record);
+          }}>禁用</Button> :
+          <Button theme="light" type="secondary" style={{ marginRight: 1 }} onClick={async () => {
+            manageUser(record.username, 'enable', record);
+          }} disabled={record.status === 3}>启用</Button>}
+        <Button theme="light" type="tertiary" style={{ marginRight: 1 }} onClick={() => {
+          setEditingUser(record);
+          setShowEditUser(true);
+        }}>编辑</Button>
+      </>
+      <Popconfirm
+        title="确定是否要删除此用户？"
+        content="硬删除，此修改将不可逆"
+        okType={'danger'}
+        position={'left'}
+        onConfirm={() => {
+          manageUser(record.username, 'delete', record).then(() => {
+            removeRecord(record.id);
+          });
+        }}
+      >
+        <Button theme="light" type="danger" style={{ marginRight: 1 }}>删除</Button>
+      </Popconfirm>
+    </div>)
+  }];
+
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [userCount, setUserCount] = useState(ITEMS_PER_PAGE);
+  const [showAddUser, setShowAddUser] = useState(false);
+  const [showEditUser, setShowEditUser] = useState(false);
+  const [editingUser, setEditingUser] = useState({
+    id: undefined
+  });
+  const [orderBy, setOrderBy] = useState('');
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+
+  const setCount = (data) => {
+    if (data.length >= (activePage) * ITEMS_PER_PAGE) {
+      setUserCount(data.length + 1);
+    } else {
+      setUserCount(data.length);
+    }
+  };
+
+  const removeRecord = key => {
+    console.log(key);
+    let newDataSource = [...users];
+    if (key != null) {
+      let idx = newDataSource.findIndex(data => data.id === key);
+
+      if (idx > -1) {
+        newDataSource.splice(idx, 1);
+        setUsers(newDataSource);
+      }
+    }
+  };
+
+  const loadUsers = async (startIdx) => {
+    const res = await API.get(`/api/user/?p=${startIdx}&order=${orderBy}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setUsers(data);
+        setCount(data);
+      } else {
+        let newUsers = users;
+        newUsers.push(...data);
+        setUsers(newUsers);
+        setCount(newUsers);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadUsers(activePage - 1, orderBy);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadUsers(0, orderBy)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, [orderBy]);
+
+  const manageUser = async (username, action, record) => {
+    const res = await API.post('/api/user/manage', {
+      username, action
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let user = res.data.data;
+      let newUsers = [...users];
+      if (action === 'delete') {
+
+      } else {
+        record.status = user.status;
+        record.role = user.role;
+      }
+      setUsers(newUsers);
+    } else {
+      showError(message);
+    }
+  };
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Tag size="large">已激活</Tag>;
+      case 2:
+        return (<Tag size="large" color="red">
+          已封禁
+        </Tag>);
+      default:
+        return (<Tag size="large" color="grey">
+          未知状态
+        </Tag>);
+    }
+  };
+
+  const searchUsers = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadUsers(0);
+      setActivePage(1);
+      setOrderBy('');
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setUsers(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (value) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortUser = (key) => {
+    if (users.length === 0) return;
+    setLoading(true);
+    let sortedUsers = [...users];
+    sortedUsers.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedUsers[0].id === users[0].id) {
+      sortedUsers.reverse();
+    }
+    setUsers(sortedUsers);
+    setLoading(false);
+  };
+
+  const handlePageChange = page => {
+    setActivePage(page);
+    if (page === Math.ceil(users.length / ITEMS_PER_PAGE) + 1) {
+      // In this case we have to load more data and then append them.
+      loadUsers(page - 1).then(r => {
+      });
+    }
+  };
+
+  const pageData = users.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+
+  const closeAddUser = () => {
+    setShowAddUser(false);
+  };
+
+  const closeEditUser = () => {
+    setShowEditUser(false);
+    setEditingUser({
+      id: undefined
+    });
+  };
+
+  const refresh = async () => {
+    if (searchKeyword === '') {
+      await loadUsers(activePage - 1);
+    } else {
+      await searchUsers();
+    }
+  };
+
+  const handleOrderByChange = (e, { value }) => {
+    setOrderBy(value);
+    setActivePage(1);
+    setDropdownVisible(false);
+  };
+
+  const renderSelectedOption = (orderBy) => {
+    switch (orderBy) {
+      case 'quota':
+        return '按剩余额度排序';
+      case 'used_quota':
+        return '按已用额度排序';
+      case 'request_count':
+        return '按请求次数排序';
+      default:
+        return '默认排序';
+    }
+  };
+
+  return (
+    <>
+      <AddUser refresh={refresh} visible={showAddUser} handleClose={closeAddUser}></AddUser>
+      <EditUser refresh={refresh} visible={showEditUser} handleClose={closeEditUser}
+        editingUser={editingUser}></EditUser>
+      <Form onSubmit={searchUsers}>
+        <Form.Input
+          label="搜索关键字"
+          icon="search"
+          field="keyword"
+          iconPosition="left"
+          placeholder="搜索用户的 ID，用户名，显示名称，以及邮箱地址 ..."
+          value={searchKeyword}
+          loading={searching}
+          onChange={value => handleKeywordChange(value)}
+        />
+      </Form>
+
+      <Table columns={columns} dataSource={pageData} pagination={{
+        currentPage: activePage,
+        pageSize: ITEMS_PER_PAGE,
+        total: userCount,
+        pageSizeOpts: [10, 20, 50, 100],
+        onPageChange: handlePageChange
+      }} loading={loading} />
+      <Button theme="light" type="primary" style={{ marginRight: 8 }} onClick={
+        () => {
+          setShowAddUser(true);
+        }
+      }>添加用户</Button>
+      <Dropdown
+        trigger="click"
+        position="bottomLeft"
+        visible={dropdownVisible}
+        onVisibleChange={(visible) => setDropdownVisible(visible)}
+        render={
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: '' })}>默认排序</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: 'quota' })}>按剩余额度排序</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: 'used_quota' })}>按已用额度排序</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleOrderByChange('', { value: 'request_count' })}>按请求次数排序</Dropdown.Item>
+          </Dropdown.Menu>
+        }
+      >
+        <Button style={{ marginLeft: '10px' }}>{renderSelectedOption(orderBy)}</Button>
+      </Dropdown>
+    </>
+  );
+};
+
+export default UsersTable;

web/air/src/components/WeChatIcon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon } from '@douyinfe/semi-ui';
+
+const WeChatIcon = () => {
+  function CustomIcon() {
+    return <svg t="1709714447384" className="icon" viewBox="0 0 1024 1024" version="1.1"
+                xmlns="http://www.w3.org/2000/svg" p-id="5091" width="16" height="16">
+      <path
+        d="M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z"
+        p-id="5092"></path>
+      <path
+        d="M866.7 792.7c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-0.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 2.4 0 4.7-0.9 6.4-2.6 1.7-1.7 2.6-4 2.6-6.4 0-2.2-0.9-4.4-1.4-6.6-0.3-1.2-7.6-28.3-12.2-45.3-0.5-1.9-0.9-3.8-0.9-5.7 0.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9z m179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-0.1 19.8-16.2 35.9-36 35.9z"
+        p-id="5093"></path>
+    </svg>;
+  }
+
+  return (
+    <div>
+      <Icon svg={<CustomIcon />} />
+    </div>
+  );
+};
+
+export default WeChatIcon;

web/air/src/components/utils.js

@@ -0,0 +1,20 @@
+import { API, showError } from '../helpers';
+
+export async function getOAuthState() {
+  const res = await API.get('/api/oauth/state');
+  const { success, message, data } = res.data;
+  if (success) {
+    return data;
+  } else {
+    showError(message);
+    return '';
+  }
+}
+
+export async function onGitHubOAuthClicked(github_client_id) {
+  const state = await getOAuthState();
+  if (!state) return;
+  window.open(
+    `https://github.com/login/oauth/authorize?client_id=${github_client_id}&state=${state}&scope=user:email`
+  );
+}

web/air/src/constants/channel.constants.js

@@ -0,0 +1,37 @@
+export const CHANNEL_OPTIONS = [
+  { key: 1, text: 'OpenAI', value: 1, color: 'green' },
+  { key: 14, text: 'Anthropic Claude', value: 14, color: 'black' },
+  { key: 3, text: 'Azure OpenAI', value: 3, color: 'olive' },
+  { key: 11, text: 'Google PaLM2', value: 11, color: 'orange' },
+  { key: 24, text: 'Google Gemini', value: 24, color: 'orange' },
+  { key: 28, text: 'Mistral AI', value: 28, color: 'orange' },
+  { key: 15, text: '百度文心千帆', value: 15, color: 'blue' },
+  { key: 17, text: '阿里通义千问', value: 17, color: 'orange' },
+  { key: 18, text: '讯飞星火认知', value: 18, color: 'blue' },
+  { key: 16, text: '智谱 ChatGLM', value: 16, color: 'violet' },
+  { key: 19, text: '360 智脑', value: 19, color: 'blue' },
+  { key: 25, text: 'Moonshot AI', value: 25, color: 'black' },
+  { key: 23, text: '腾讯混元', value: 23, color: 'teal' },
+  { key: 26, text: '百川大模型', value: 26, color: 'orange' },
+  { key: 27, text: 'MiniMax', value: 27, color: 'red' },
+  { key: 29, text: 'Groq', value: 29, color: 'orange' },
+  { key: 30, text: 'Ollama', value: 30, color: 'black' },
+  { key: 31, text: '零一万物', value: 31, color: 'green' },
+  { key: 8, text: '自定义渠道', value: 8, color: 'pink' },
+  { key: 22, text: '知识库：FastGPT', value: 22, color: 'blue' },
+  { key: 21, text: '知识库：AI Proxy', value: 21, color: 'purple' },
+  { key: 20, text: '代理：OpenRouter', value: 20, color: 'black' },
+  { key: 2, text: '代理：API2D', value: 2, color: 'blue' },
+  { key: 5, text: '代理：OpenAI-SB', value: 5, color: 'brown' },
+  { key: 7, text: '代理：OhMyGPT', value: 7, color: 'purple' },
+  { key: 10, text: '代理：AI Proxy', value: 10, color: 'purple' },
+  { key: 4, text: '代理：CloseAI', value: 4, color: 'teal' },
+  { key: 6, text: '代理：OpenAI Max', value: 6, color: 'violet' },
+  { key: 9, text: '代理：AI.LS', value: 9, color: 'yellow' },
+  { key: 12, text: '代理：API2GPT', value: 12, color: 'blue' },
+  { key: 13, text: '代理：AIGC2D', value: 13, color: 'purple' }
+];
+
+for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
+  CHANNEL_OPTIONS[i].label = CHANNEL_OPTIONS[i].text;
+}

web/air/src/constants/common.constant.js

@@ -0,0 +1 @@
+export const ITEMS_PER_PAGE = 10; // this value must keep same as the one defined in backend!

web/air/src/constants/index.js

@@ -0,0 +1,4 @@
+export * from './toast.constants';
+export * from './user.constants';
+export * from './common.constant';
+export * from './channel.constants';

web/air/src/constants/toast.constants.js

@@ -0,0 +1,7 @@
+export const toastConstants = {
+  SUCCESS_TIMEOUT: 1500,
+  INFO_TIMEOUT: 3000,
+  ERROR_TIMEOUT: 5000,
+  WARNING_TIMEOUT: 10000,
+  NOTICE_TIMEOUT: 20000
+};

web/air/src/constants/user.constants.js

@@ -0,0 +1,19 @@
+export const userConstants = {
+    REGISTER_REQUEST: 'USERS_REGISTER_REQUEST',
+    REGISTER_SUCCESS: 'USERS_REGISTER_SUCCESS',
+    REGISTER_FAILURE: 'USERS_REGISTER_FAILURE',
+
+    LOGIN_REQUEST: 'USERS_LOGIN_REQUEST',
+    LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS',
+    LOGIN_FAILURE: 'USERS_LOGIN_FAILURE',
+    
+    LOGOUT: 'USERS_LOGOUT',
+
+    GETALL_REQUEST: 'USERS_GETALL_REQUEST',
+    GETALL_SUCCESS: 'USERS_GETALL_SUCCESS',
+    GETALL_FAILURE: 'USERS_GETALL_FAILURE',
+
+    DELETE_REQUEST: 'USERS_DELETE_REQUEST',
+    DELETE_SUCCESS: 'USERS_DELETE_SUCCESS',
+    DELETE_FAILURE: 'USERS_DELETE_FAILURE'    
+};

web/air/src/context/Status/index.js

@@ -0,0 +1,19 @@
+// contexts/User/index.jsx
+
+import React from 'react';
+import { initialState, reducer } from './reducer';
+
+export const StatusContext = React.createContext({
+  state: initialState,
+  dispatch: () => null,
+});
+
+export const StatusProvider = ({ children }) => {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+
+  return (
+    <StatusContext.Provider value={[state, dispatch]}>
+      {children}
+    </StatusContext.Provider>
+  );
+};

web/air/src/context/Status/reducer.js

@@ -0,0 +1,20 @@
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case 'set':
+      return {
+        ...state,
+        status: action.payload,
+      };
+    case 'unset':
+      return {
+        ...state,
+        status: undefined,
+      };
+    default:
+      return state;
+  }
+};
+
+export const initialState = {
+  status: undefined,
+};

web/air/src/context/User/index.js

@@ -0,0 +1,19 @@
+// contexts/User/index.jsx
+
+import React from "react"
+import { reducer, initialState } from "./reducer"
+
+export const UserContext = React.createContext({
+  state: initialState,
+  dispatch: () => null
+})
+
+export const UserProvider = ({ children }) => {
+  const [state, dispatch] = React.useReducer(reducer, initialState)
+
+  return (
+    <UserContext.Provider value={[ state, dispatch ]}>
+      { children }
+    </UserContext.Provider>
+  )
+}

web/air/src/context/User/reducer.js

@@ -0,0 +1,21 @@
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case 'login':
+      return {
+        ...state,
+        user: action.payload
+      };
+    case 'logout':
+      return {
+        ...state,
+        user: undefined
+      };
+
+    default:
+      return state;
+  }
+};
+
+export const initialState = {
+  user: undefined
+};

web/air/src/helpers/api.js

@@ -0,0 +1,13 @@
+import { showError } from './utils';
+import axios from 'axios';
+
+export const API = axios.create({
+  baseURL: process.env.REACT_APP_SERVER ? process.env.REACT_APP_SERVER : '',
+});
+
+API.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    showError(error);
+  }
+);