Update LICENSE

perf: 优化数据看板性能和显示效果
update README.md
2024-01-08 19:48:30 +08:00 · 2024-01-08 18:49:10 +08:00 · 2024-01-08 16:26:00 +08:00 · 2024-01-08 16:25:17 +08:00 · 2024-01-08 11:32:27 +08:00 · 2024-01-08 11:25:22 +08:00
40 changed files with 1376 additions and 404 deletions
@@ -1,10 +1,6 @@
 MIT License

-New API
-Copyright (c) 2023 CalciumIon
-
-Based on One API
-Copyright (c) 2023 JustSong
+Copyright (c) 2024 Calcium-Ion

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -33,7 +33,10 @@
 8. 支持第三方模型 **gps** （gpt-4-gizmo-*），在渠道中添加自定义模型gpt-4-gizmo-*即可
 9. 兼容原版One API的数据库，可直接使用原版数据库（one-api.db）
 10. 支持模型按次数收费，可在 系统设置-运营设置 中设置
-11. 支持gemini-pro模型
+11. 支持gemini-pro，gemini-pro-vision模型
+12. 支持渠道**加权随机**
+13. 数据看板
+14. 可设置令牌能调用的模型

 ## 部署
 ### 基于 Docker 进行部署
@@ -46,9 +49,11 @@ docker run --name new-api -d --restart always -p 3000:3000 -e SQL_DSN="root:1234
 ```

 ## 交流群
-<img src="https://github.com/Calcium-Ion/new-api/assets/61247483/de536a8a-0161-47a7-a0a2-66ef6de81266" width="500">
+<img src="https://github.com/Calcium-Ion/new-api/assets/61247483/de536a8a-0161-47a7-a0a2-66ef6de81266" width="300">

 ## 界面截图
+![image](https://github.com/Calcium-Ion/new-api/assets/61247483/ad0e7aae-0203-471c-9716-2d83768927d4)
+
 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/d1ac216e-0804-4105-9fdc-66b35022d861)

 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/3ca0b282-00ff-4c96-bf9d-e29ef615c605)  
@@ -56,8 +61,11 @@ docker run --name new-api -d --restart always -p 3000:3000 -e SQL_DSN="root:1234
 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/90d7d763-6a77-4b36-9f76-2bb30f18583d)
 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/e414228a-3c35-429a-b298-6451d76d9032)
 夜间模式  
+![image](https://github.com/Calcium-Ion/new-api/assets/61247483/1c66b593-bb9e-4757-9720-ff2759539242)
+
 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/5b3228e8-2556-44f7-97d6-4f8d8ee6effa)  
 ![image](https://github.com/Calcium-Ion/new-api/assets/61247483/af9a07ee-5101-4b3d-8bd9-ae21a4fd7e9e)

+## Star History

-
+[![Star History Chart](https://api.star-history.com/svg?repos=Calcium-Ion/new-api&type=Date)](https://star-history.com/#Calcium-Ion/new-api&Date)
@@ -24,6 +24,9 @@ var ChatLink = ""
 var QuotaPerUnit = 500 * 1000.0 // $0.002 / 1K tokens
 var DisplayInCurrencyEnabled = true
 var DisplayTokenStatEnabled = true
+var DrawingEnabled = true
+var DataExportEnabled = true
+var DataExportInterval = 5 // unit: minute

 // Any options with "Secret", "Token" in its key won't be return by GetOptions

@@ -14,7 +14,7 @@ import (
 // 1 === $0.002 / 1K tokens
 // 1 === ￥0.014 / 1k tokens
 var ModelRatio = map[string]float64{
-	"midjourney":                50,
+	//"midjourney":                50,
 	"gpt-4-gizmo-*":             15,
 	"gpt-4":                     15,
 	"gpt-4-0314":                15,
@@ -32,6 +32,8 @@ var ModelRatio = map[string]float64{
 	"gpt-3.5-turbo-16k-0613":    1.5,
 	"gpt-3.5-turbo-instruct":    0.75, // $0.0015 / 1K tokens
 	"gpt-3.5-turbo-1106":        0.5,  // $0.001 / 1K tokens
+	"babbage-002":               0.2,  // $0.0004 / 1K tokens
+	"davinci-002":               1,    // $0.002 / 1K tokens
 	"text-ada-001":              0.2,
 	"text-babbage-001":          0.25,
 	"text-curie-001":            1,
@@ -80,6 +82,12 @@ var ModelRatio = map[string]float64{

 var ModelPrice = map[string]float64{
 	"gpt-4-gizmo-*": 0.1,
+	"mj_imagine":    0.1,
+	"mj_variation":  0.1,
+	"mj_reroll":     0.1,
+	"mj_blend":      0.1,
+	"mj_describe":   0.05,
+	"mj_upscale":    0.05,
 }

 func ModelPrice2JSONString() string {
@@ -101,7 +109,7 @@ func GetModelPrice(name string) float64 {
 	}
 	price, ok := ModelPrice[name]
 	if !ok {
-		//SysError("model price not found: " + name)
+		SysError("model price not found: " + name)
 		return -1
 	}
 	return price
@@ -34,6 +34,8 @@ func GetStatus(c *gin.Context) {
 			"quota_per_unit":      common.QuotaPerUnit,
 			"display_in_currency": common.DisplayInCurrencyEnabled,
 			"enable_batch_update": common.BatchUpdateEnabled,
+			"enable_drawing":      common.DrawingEnabled,
+			"enable_data_export":  common.DataExportEnabled,
 		},
 	})
 	return
@@ -360,6 +360,24 @@ func init() {
 			Root:       "code-davinci-edit-001",
 			Parent:     nil,
 		},
+		{
+			Id:         "babbage-002",
+			Object:     "model",
+			Created:    1677649963,
+			OwnedBy:    "openai",
+			Permission: permission,
+			Root:       "babbage-002",
+			Parent:     nil,
+		},
+		{
+			Id:         "davinci-002",
+			Object:     "model",
+			Created:    1677649963,
+			OwnedBy:    "openai",
+			Permission: permission,
+			Root:       "davinci-002",
+			Parent:     nil,
+		},
 		{
 			Id:         "claude-instant-1",
 			Object:     "model",
@@ -55,9 +55,18 @@ type MidjourneyWithoutStatus struct {
 	ChannelId   int    `json:"channel_id"`
 }

+var DefaultModelPrice = map[string]float64{
+	"mj_imagine":   0.1,
+	"mj_variation": 0.1,
+	"mj_reroll":    0.1,
+	"mj_blend":     0.1,
+	"mj_describe":  0.05,
+	"mj_upscale":   0.05,
+}
+
 func RelayMidjourneyImage(c *gin.Context) {
 	taskId := c.Param("id")
-	midjourneyTask := model.GetByMJId(taskId)
+	midjourneyTask := model.GetByOnlyMJId(taskId)
 	if midjourneyTask == nil {
 		c.JSON(400, gin.H{
 			"error": "midjourney_task_not_found",
@@ -71,14 +80,27 @@ func RelayMidjourneyImage(c *gin.Context) {
 		})
 	}
 	defer resp.Body.Close()
-	data, err := io.ReadAll(resp.Body)
-	if err != nil {
-		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+	if resp.StatusCode != http.StatusOK {
+		responseBody, _ := io.ReadAll(resp.Body)
+		c.JSON(resp.StatusCode, gin.H{
+			"error": string(responseBody),
+		})
 		return
 	}
-	c.Header("Content-Type", "image/jpeg")
-	//c.HeaderBar("Content-Length", string(rune(len(data))))
-	c.Data(http.StatusOK, "image/jpeg", data)
+	// 从Content-Type头获取MIME类型
+	contentType := resp.Header.Get("Content-Type")
+	if contentType == "" {
+		// 如果无法确定内容类型，则默认为jpeg
+		contentType = "image/jpeg"
+	}
+	// 设置响应的内容类型
+	c.Writer.Header().Set("Content-Type", contentType)
+	// 将图片流式传输到响应体
+	_, err = io.Copy(c.Writer, resp.Body)
+	if err != nil {
+		log.Println("Failed to stream image:", err)
+	}
+	return
 }

 func relayMidjourneyNotify(c *gin.Context) *MidjourneyResponse {
@@ -92,7 +114,7 @@ func relayMidjourneyNotify(c *gin.Context) *MidjourneyResponse {
 			Result:      "",
 		}
 	}
-	midjourneyTask := model.GetByMJId(midjRequest.MjId)
+	midjourneyTask := model.GetByOnlyMJId(midjRequest.MjId)
 	if midjourneyTask == nil {
 		return &MidjourneyResponse{
 			Code:        4,
@@ -121,16 +143,7 @@ func relayMidjourneyNotify(c *gin.Context) *MidjourneyResponse {
 	return nil
 }

-func relayMidjourneyTask(c *gin.Context, relayMode int) *MidjourneyResponse {
-	taskId := c.Param("id")
-	originTask := model.GetByMJId(taskId)
-	if originTask == nil {
-		return &MidjourneyResponse{
-			Code:        4,
-			Description: "task_no_found",
-		}
-	}
-	var midjourneyTask Midjourney
+func getMidjourneyTaskModel(c *gin.Context, originTask *model.Midjourney) (midjourneyTask Midjourney) {
 	midjourneyTask.MjId = originTask.MjId
 	midjourneyTask.Progress = originTask.Progress
 	midjourneyTask.PromptEn = originTask.PromptEn
@@ -150,14 +163,65 @@ func relayMidjourneyTask(c *gin.Context, relayMode int) *MidjourneyResponse {
 	midjourneyTask.Action = originTask.Action
 	midjourneyTask.Description = originTask.Description
 	midjourneyTask.Prompt = originTask.Prompt
-	jsonMap, err := json.Marshal(midjourneyTask)
-	if err != nil {
-		return &MidjourneyResponse{
-			Code:        4,
-			Description: "unmarshal_response_body_failed",
+	return
+}
+
+func relayMidjourneyTask(c *gin.Context, relayMode int) *MidjourneyResponse {
+	userId := c.GetInt("id")
+	var err error
+	var respBody []byte
+	switch relayMode {
+	case RelayModeMidjourneyTaskFetch:
+		taskId := c.Param("id")
+		originTask := model.GetByMJId(userId, taskId)
+		if originTask == nil {
+			return &MidjourneyResponse{
+				Code:        4,
+				Description: "task_no_found",
+			}
+		}
+		midjourneyTask := getMidjourneyTaskModel(c, originTask)
+		respBody, err = json.Marshal(midjourneyTask)
+		if err != nil {
+			return &MidjourneyResponse{
+				Code:        4,
+				Description: "unmarshal_response_body_failed",
+			}
+		}
+	case RelayModeMidjourneyTaskFetchByCondition:
+		var condition = struct {
+			IDs []string `json:"ids"`
+		}{}
+		err = c.BindJSON(&condition)
+		if err != nil {
+			return &MidjourneyResponse{
+				Code:        4,
+				Description: "do_request_failed",
+			}
+		}
+		var tasks []Midjourney
+		if len(condition.IDs) != 0 {
+			originTasks := model.GetByMJIds(userId, condition.IDs)
+			for _, originTask := range originTasks {
+				midjourneyTask := getMidjourneyTaskModel(c, originTask)
+				tasks = append(tasks, midjourneyTask)
+			}
+		}
+		if tasks == nil {
+			tasks = make([]Midjourney, 0)
+		}
+		respBody, err = json.Marshal(tasks)
+		if err != nil {
+			return &MidjourneyResponse{
+				Code:        4,
+				Description: "unmarshal_response_body_failed",
+			}
 		}
 	}
-	_, err = io.Copy(c.Writer, bytes.NewBuffer(jsonMap))
+
+	c.Writer.Header().Set("Content-Type", "application/json")
+
+	_, err = io.Copy(c.Writer, bytes.NewBuffer(respBody))
 	if err != nil {
 		return &MidjourneyResponse{
 			Code:        4,
@@ -167,6 +231,18 @@ func relayMidjourneyTask(c *gin.Context, relayMode int) *MidjourneyResponse {
 	return nil
 }

+const (
+	// type 1 根据 mode 价格不同
+	MJSubmitActionImagine   = "IMAGINE"
+	MJSubmitActionVariation = "VARIATION" //变换
+	MJSubmitActionBlend     = "BLEND"     //混图
+
+	MJSubmitActionReroll = "REROLL" //重新生成
+	// type 2 固定价格
+	MJSubmitActionDescribe = "DESCRIBE"
+	MJSubmitActionUpscale  = "UPSCALE" // 放大
+)
+
 func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 	imageModel := "midjourney"

@@ -186,6 +262,7 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 			}
 		}
 	}
+
 	if relayMode == RelayModeMidjourneyImagine { //绘画任务，此类任务可重复
 		if midjRequest.Prompt == "" {
 			return &MidjourneyResponse{
@@ -199,7 +276,45 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 	} else if relayMode == RelayModeMidjourneyBlend { //绘画任务，此类任务可重复
 		midjRequest.Action = "BLEND"
 	} else if midjRequest.TaskId != "" { //放大、变换任务，此类任务，如果重复且已有结果，远端api会直接返回最终结果
-		originTask := model.GetByMJId(midjRequest.TaskId)
+		mjId := ""
+		if relayMode == RelayModeMidjourneyChange {
+			if midjRequest.TaskId == "" {
+				return &MidjourneyResponse{
+					Code:        4,
+					Description: "taskId_is_required",
+				}
+			} else if midjRequest.Action == "" {
+				return &MidjourneyResponse{
+					Code:        4,
+					Description: "action_is_required",
+				}
+			} else if midjRequest.Index == 0 {
+				return &MidjourneyResponse{
+					Code:        4,
+					Description: "index_can_only_be_1_2_3_4",
+				}
+			}
+			//action = midjRequest.Action
+			mjId = midjRequest.TaskId
+		} else if relayMode == RelayModeMidjourneySimpleChange {
+			if midjRequest.Content == "" {
+				return &MidjourneyResponse{
+					Code:        4,
+					Description: "content_is_required",
+				}
+			}
+			params := convertSimpleChangeParams(midjRequest.Content)
+			if params == nil {
+				return &MidjourneyResponse{
+					Code:        4,
+					Description: "content_parse_failed",
+				}
+			}
+			mjId = params.ID
+			midjRequest.Action = params.Action
+		}
+
+		originTask := model.GetByMJId(userId, mjId)
 		if originTask == nil {
 			return &MidjourneyResponse{
 				Code:        4,
@@ -229,23 +344,6 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 			log.Printf("检测到此操作为放大、变换，获取原channel信息: %s,%s", strconv.Itoa(originTask.ChannelId), channel.GetBaseURL())
 		}
 		midjRequest.Prompt = originTask.Prompt
-	} else if relayMode == RelayModeMidjourneyChange {
-		if midjRequest.TaskId == "" {
-			return &MidjourneyResponse{
-				Code:        4,
-				Description: "taskId_is_required",
-			}
-		} else if midjRequest.Action == "" {
-			return &MidjourneyResponse{
-				Code:        4,
-				Description: "action_is_required",
-			}
-		} else if midjRequest.Index == 0 {
-			return &MidjourneyResponse{
-				Code:        4,
-				Description: "index_can_only_be_1_2_3_4",
-			}
-		}
 	}

 	// map model name
@@ -292,18 +390,27 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 	} else {
 		requestBody = c.Request.Body
 	}
-
-	modelRatio := common.GetModelRatio(imageModel)
-	groupRatio := common.GetGroupRatio(group)
-	ratio := modelRatio * groupRatio
-	userQuota, err := model.CacheGetUserQuota(userId)
-
-	sizeRatio := 1.0
-	if midjRequest.Action == "UPSCALE" {
-		sizeRatio = 0.2
+	mjAction := "mj_" + strings.ToLower(midjRequest.Action)
+	modelPrice := common.GetModelPrice(mjAction)
+	// 如果没有配置价格，则使用默认价格
+	if modelPrice == -1 {
+		defaultPrice, ok := DefaultModelPrice[mjAction]
+		if !ok {
+			modelPrice = 0.1
+		} else {
+			modelPrice = defaultPrice
+		}
 	}
-
-	quota := int(ratio * sizeRatio * 1000)
+	groupRatio := common.GetGroupRatio(group)
+	ratio := modelPrice * groupRatio
+	userQuota, err := model.CacheGetUserQuota(userId)
+	if err != nil {
+		return &MidjourneyResponse{
+			Code:        4,
+			Description: err.Error(),
+		}
+	}
+	quota := int(ratio * common.QuotaPerUnit)

 	if consumeQuota && userQuota-quota < 0 {
 		return &MidjourneyResponse{
@@ -369,7 +476,7 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 			}
 			if quota != 0 {
 				tokenName := c.GetString("token_name")
-				logContent := fmt.Sprintf("模型倍率 %.2f，分组倍率 %.2f", modelRatio, groupRatio)
+				logContent := fmt.Sprintf("模型固定价格 %.2f，分组倍率 %.2f，操作 %s", modelPrice, groupRatio, midjRequest.Action)
 				model.RecordConsumeLog(ctx, userId, channelId, 0, 0, imageModel, tokenName, quota, logContent, tokenId, userQuota)
 				model.UpdateUserUsedQuotaAndRequestCount(userId, quota)
 				channelId := c.GetInt("channel_id")
@@ -504,3 +611,38 @@ func relayMidjourneySubmit(c *gin.Context, relayMode int) *MidjourneyResponse {
 	}
 	return nil
 }
+
+type taskChangeParams struct {
+	ID     string
+	Action string
+	Index  int
+}
+
+func convertSimpleChangeParams(content string) *taskChangeParams {
+	split := strings.Split(content, " ")
+	if len(split) != 2 {
+		return nil
+	}
+
+	action := strings.ToLower(split[1])
+	changeParams := &taskChangeParams{}
+	changeParams.ID = split[0]
+
+	if action[0] == 'u' {
+		changeParams.Action = "UPSCALE"
+	} else if action[0] == 'v' {
+		changeParams.Action = "VARIATION"
+	} else if action == "r" {
+		changeParams.Action = "REROLL"
+		return changeParams
+	} else {
+		return nil
+	}
+
+	index, err := strconv.Atoi(action[1:2])
+	if err != nil || index < 1 || index > 4 {
+		return nil
+	}
+	changeParams.Index = index
+	return changeParams
+}
@@ -95,8 +95,10 @@ const (
 	RelayModeMidjourneyDescribe
 	RelayModeMidjourneyBlend
 	RelayModeMidjourneyChange
+	RelayModeMidjourneySimpleChange
 	RelayModeMidjourneyNotify
 	RelayModeMidjourneyTaskFetch
+	RelayModeMidjourneyTaskFetchByCondition
 	RelayModeAudio
 )

@@ -263,6 +265,7 @@ type MidjourneyRequest struct {
 	State       string   `json:"state"`
 	TaskId      string   `json:"taskId"`
 	Base64Array []string `json:"base64Array"`
+	Content     string   `json:"content"`
 }

 type MidjourneyResponse struct {
@@ -342,14 +345,19 @@ func RelayMidjourney(c *gin.Context) {
 		relayMode = RelayModeMidjourneyNotify
 	} else if strings.HasPrefix(c.Request.URL.Path, "/mj/submit/change") {
 		relayMode = RelayModeMidjourneyChange
-	} else if strings.HasPrefix(c.Request.URL.Path, "/mj/task") {
+	} else if strings.HasPrefix(c.Request.URL.Path, "/mj/submit/simple-change") {
+		relayMode = RelayModeMidjourneyChange
+	} else if strings.HasSuffix(c.Request.URL.Path, "/fetch") {
 		relayMode = RelayModeMidjourneyTaskFetch
+	} else if strings.HasSuffix(c.Request.URL.Path, "/list-by-condition") {
+		relayMode = RelayModeMidjourneyTaskFetchByCondition
 	}
+
 	var err *MidjourneyResponse
 	switch relayMode {
 	case RelayModeMidjourneyNotify:
 		err = relayMidjourneyNotify(c)
-	case RelayModeMidjourneyTaskFetch:
+	case RelayModeMidjourneyTaskFetch, RelayModeMidjourneyTaskFetchByCondition:
 		err = relayMidjourneyTask(c, relayMode)
 	default:
 		err = relayMidjourneySubmit(c, relayMode)
@@ -217,6 +217,8 @@ func UpdateToken(c *gin.Context) {
 		cleanToken.ExpiredTime = token.ExpiredTime
 		cleanToken.RemainQuota = token.RemainQuota
 		cleanToken.UnlimitedQuota = token.UnlimitedQuota
+		cleanToken.ModelLimitsEnabled = token.ModelLimitsEnabled
+		cleanToken.ModelLimits = token.ModelLimits
 	}
 	err = cleanToken.Update()
 	if err != nil {
@@ -0,0 +1,48 @@
+package controller
+
+import (
+	"github.com/gin-gonic/gin"
+	"net/http"
+	"one-api/model"
+	"strconv"
+)
+
+func GetAllQuotaDates(c *gin.Context) {
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	username := c.Query("username")
+	dates, err := model.GetAllQuotaDates(startTimestamp, endTimestamp, username)
+	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":    dates,
+	})
+	return
+}
+
+func GetUserQuotaDates(c *gin.Context) {
+	userId := c.GetInt("id")
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	dates, err := model.GetQuotaDataByUserId(userId, startTimestamp, endTimestamp)
+	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":    dates,
+	})
+	return
+}
@@ -67,6 +67,10 @@ func main() {
 		go model.SyncOptions(common.SyncFrequency)
 		go model.SyncChannelCache(common.SyncFrequency)
 	}
+
+	// 数据看板
+	go model.UpdateQuotaData()
+
 	if os.Getenv("CHANNEL_UPDATE_FREQUENCY") != "" {
 		frequency, err := strconv.Atoi(os.Getenv("CHANNEL_UPDATE_FREQUENCY"))
 		if err != nil {
@@ -100,7 +104,15 @@ func main() {

 	// Initialize HTTP server
 	server := gin.New()
-	server.Use(gin.Recovery())
+	server.Use(gin.CustomRecovery(func(c *gin.Context, err any) {
+		common.SysError(fmt.Sprintf("panic detected: %v", err))
+		c.JSON(http.StatusInternalServerError, gin.H{
+			"error": gin.H{
+				"message": fmt.Sprintf("Panic detected, error: %v. Please submit a issue here: https://github.com/Calcium-Ion/new-api", err),
+				"type":    "new_api_panic",
+			},
+		})
+	}))
 	// This will cause SSE not to work!!!
 	//server.Use(gzip.Gzip(gzip.DefaultCompression))
 	server.Use(middleware.RequestId())
@@ -115,6 +115,12 @@ func TokenAuth() func(c *gin.Context) {
 		c.Set("id", token.UserId)
 		c.Set("token_id", token.Id)
 		c.Set("token_name", token.Name)
+		if token.ModelLimitsEnabled {
+			c.Set("token_model_limit_enabled", true)
+			c.Set("token_model_limit", token.GetModelLimitsMap())
+		} else {
+			c.Set("token_model_limit_enabled", false)
+		}
 		requestURL := c.Request.URL.String()
 		consumeQuota := true
 		if strings.HasPrefix(requestURL, "/v1/models") {
@@ -50,7 +50,7 @@ func Distribute() func(c *gin.Context) {
 				err = common.UnmarshalBodyReusable(c, &modelRequest)
 			}
 			if err != nil {
-				abortWithMessage(c, http.StatusBadRequest, "无效的请求")
+				abortWithMessage(c, http.StatusBadRequest, "无效的请求: "+err.Error())
 				return
 			}
 			if strings.HasPrefix(c.Request.URL.Path, "/v1/moderations") {
@@ -77,6 +77,27 @@ func Distribute() func(c *gin.Context) {
 					}
 				}
 			}
+			// check token model mapping
+			modelLimitEnable := c.GetBool("token_model_limit_enabled")
+			if modelLimitEnable {
+				s, ok := c.Get("token_model_limit")
+				var tokenModelLimit map[string]bool
+				if ok {
+					tokenModelLimit = s.(map[string]bool)
+				} else {
+					tokenModelLimit = map[string]bool{}
+				}
+				if tokenModelLimit != nil {
+					if _, ok := tokenModelLimit[modelRequest.Model]; !ok {
+						abortWithMessage(c, http.StatusForbidden, "该令牌无权访问模型 "+modelRequest.Model)
+						return
+					}
+				} else {
+					// token model limit is empty, all models are not allowed
+					abortWithMessage(c, http.StatusForbidden, "该令牌无权访问任何模型")
+					return
+				}
+			}
 			channel, err = model.CacheGetRandomSatisfiedChannel(userGroup, modelRequest.Model)
 			if err != nil {
 				message := fmt.Sprintf("当前分组 %s 下对于模型 %s 无可用渠道", userGroup, modelRequest.Model)
@@ -0,0 +1,28 @@
+package middleware
+
+import (
+	"fmt"
+	"github.com/gin-gonic/gin"
+	"net/http"
+	"one-api/common"
+	"runtime/debug"
+)
+
+func RelayPanicRecover() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		defer func() {
+			if err := recover(); err != nil {
+				common.SysError(fmt.Sprintf("panic detected: %v", err))
+				common.SysError(fmt.Sprintf("stacktrace from panic: %s", string(debug.Stack())))
+				c.JSON(http.StatusInternalServerError, gin.H{
+					"error": gin.H{
+						"message": fmt.Sprintf("Panic detected, error: %v. Please submit a issue here: https://github.com/Calcium-Ion/new-api", err),
+						"type":    "new_api_panic",
+					},
+				})
+				c.Abort()
+			}
+		}()
+		c.Next()
+	}
+}
@@ -6,8 +6,8 @@ import (
 )

 type Ability struct {
-	Group     string `json:"group" gorm:"type:varchar(255);primaryKey;autoIncrement:false"`
-	Model     string `json:"model" gorm:"primaryKey;autoIncrement:false"`
+	Group     string `json:"group" gorm:"type:varchar(64);primaryKey;autoIncrement:false"`
+	Model     string `json:"model" gorm:"type:varchar(64);primaryKey;autoIncrement:false"`
 	ChannelId int    `json:"channel_id" gorm:"primaryKey;autoIncrement:false;index"`
 	Enabled   bool   `json:"enabled"`
 	Priority  *int64 `json:"priority" gorm:"bigint;default:0;index"`
@@ -21,7 +21,7 @@ type Channel struct {
 	Balance            float64 `json:"balance"` // in USD
 	BalanceUpdatedTime int64   `json:"balance_updated_time" gorm:"bigint"`
 	Models             string  `json:"models"`
-	Group              string  `json:"group" gorm:"type:varchar(255);default:'default'"`
+	Group              string  `json:"group" gorm:"type:varchar(64);default:'default'"`
 	UsedQuota          int64   `json:"used_quota" gorm:"bigint;default:0"`
 	ModelMapping       *string `json:"model_mapping" gorm:"type:varchar(1024);default:''"`
 	Priority           *int64  `json:"priority" gorm:"bigint;default:0"`
@@ -9,7 +9,7 @@ import (
 )

 type Log struct {
-	Id               int    `json:"id;index:idx_created_at_id,priority:1"`
+	Id               int    `json:"id" gorm:"index:idx_created_at_id,priority:1"`
 	UserId           int    `json:"user_id" gorm:"index"`
 	CreatedAt        int64  `json:"created_at" gorm:"bigint;index:idx_created_at_id,priority:2;index:idx_created_at_type"`
 	Type             int    `json:"type" gorm:"index:idx_created_at_type"`
@@ -59,9 +59,10 @@ func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptToke
 	if !common.LogConsumeEnabled {
 		return
 	}
+	username := GetUsernameById(userId)
 	log := &Log{
 		UserId:           userId,
-		Username:         GetUsernameById(userId),
+		Username:         username,
 		CreatedAt:        common.GetTimestamp(),
 		Type:             LogTypeConsume,
 		Content:          content,
@@ -77,6 +78,9 @@ func RecordConsumeLog(ctx context.Context, userId int, channelId int, promptToke
 	if err != nil {
 		common.LogError(ctx, "failed to record log: "+err.Error())
 	}
+	if common.DataExportEnabled {
+		LogQuotaData(userId, username, modelName, quota, common.GetTimestamp())
+	}
 }

 func GetAllLogs(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, startIdx int, num int, channel int) (logs []*Log, err error) {
@@ -127,6 +127,10 @@ func InitDB() (err error) {
 		if err != nil {
 			return err
 		}
+		err = db.AutoMigrate(&QuotaData{})
+		if err != nil {
+			return err
+		}
 		common.SysLog("database migrated")
 		err = createRootAccountIfNeed()
 		return err
@@ -96,7 +96,7 @@ func GetAllUnFinishTasks() []*Midjourney {
 	return tasks
 }

-func GetByMJId(mjId string) *Midjourney {
+func GetByOnlyMJId(mjId string) *Midjourney {
 	var mj *Midjourney
 	var err error
 	err = DB.Where("mj_id = ?", mjId).First(&mj).Error
@@ -106,6 +106,26 @@ func GetByMJId(mjId string) *Midjourney {
 	return mj
 }

+func GetByMJId(userId int, mjId string) *Midjourney {
+	var mj *Midjourney
+	var err error
+	err = DB.Where("user_id = ? and mj_id = ?", userId, mjId).First(&mj).Error
+	if err != nil {
+		return nil
+	}
+	return mj
+}
+
+func GetByMJIds(userId int, mjIds []string) []*Midjourney {
+	var mj []*Midjourney
+	var err error
+	err = DB.Where("user_id = ? and mj_id in (?)", userId, mjIds).Find(&mj).Error
+	if err != nil {
+		return nil
+	}
+	return mj
+}
+
 func GetMjByuId(id int) *Midjourney {
 	var mj *Midjourney
 	var err error
@@ -37,6 +37,8 @@ func InitOptionMap() {
 	common.OptionMap["LogConsumeEnabled"] = strconv.FormatBool(common.LogConsumeEnabled)
 	common.OptionMap["DisplayInCurrencyEnabled"] = strconv.FormatBool(common.DisplayInCurrencyEnabled)
 	common.OptionMap["DisplayTokenStatEnabled"] = strconv.FormatBool(common.DisplayTokenStatEnabled)
+	common.OptionMap["DrawingEnabled"] = strconv.FormatBool(common.DrawingEnabled)
+	common.OptionMap["DataExportEnabled"] = strconv.FormatBool(common.DataExportEnabled)
 	common.OptionMap["ChannelDisableThreshold"] = strconv.FormatFloat(common.ChannelDisableThreshold, 'f', -1, 64)
 	common.OptionMap["EmailDomainRestrictionEnabled"] = strconv.FormatBool(common.EmailDomainRestrictionEnabled)
 	common.OptionMap["EmailDomainWhitelist"] = strings.Join(common.EmailDomainWhitelist, ",")
@@ -76,6 +78,7 @@ func InitOptionMap() {
 	common.OptionMap["ChatLink"] = common.ChatLink
 	common.OptionMap["QuotaPerUnit"] = strconv.FormatFloat(common.QuotaPerUnit, 'f', -1, 64)
 	common.OptionMap["RetryTimes"] = strconv.Itoa(common.RetryTimes)
+	common.OptionMap["DataExportInterval"] = strconv.Itoa(common.DataExportInterval)

 	common.OptionMapRWMutex.Unlock()
 	loadOptionsFromDatabase()
@@ -157,6 +160,12 @@ func updateOptionMap(key string, value string) (err error) {
 			common.LogConsumeEnabled = boolValue
 		case "DisplayInCurrencyEnabled":
 			common.DisplayInCurrencyEnabled = boolValue
+		case "DisplayTokenStatEnabled":
+			common.DisplayTokenStatEnabled = boolValue
+		case "DrawingEnabled":
+			common.DrawingEnabled = boolValue
+		case "DataExportEnabled":
+			common.DataExportEnabled = boolValue
 		}
 	}
 	switch key {
@@ -217,6 +226,8 @@ func updateOptionMap(key string, value string) (err error) {
 		common.PreConsumedQuota, _ = strconv.Atoi(value)
 	case "RetryTimes":
 		common.RetryTimes, _ = strconv.Atoi(value)
+	case "DataExportInterval":
+		common.DataExportInterval, _ = strconv.Atoi(value)
 	case "ModelRatio":
 		err = common.UpdateModelRatioByJSONString(value)
 	case "GroupRatio":
@@ -10,17 +10,19 @@ import (
 )

 type Token struct {
-	Id             int    `json:"id"`
-	UserId         int    `json:"user_id"`
-	Key            string `json:"key" gorm:"type:char(48);uniqueIndex"`
-	Status         int    `json:"status" gorm:"default:1"`
-	Name           string `json:"name" gorm:"index" `
-	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"`
-	UnlimitedQuota bool   `json:"unlimited_quota" gorm:"default:false"`
-	UsedQuota      int    `json:"used_quota" gorm:"default:0"` // used quota
+	Id                 int    `json:"id"`
+	UserId             int    `json:"user_id"`
+	Key                string `json:"key" gorm:"type:char(48);uniqueIndex"`
+	Status             int    `json:"status" gorm:"default:1"`
+	Name               string `json:"name" gorm:"index" `
+	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"`
+	UnlimitedQuota     bool   `json:"unlimited_quota" gorm:"default:false"`
+	ModelLimitsEnabled bool   `json:"model_limits_enabled" gorm:"default:false"`
+	ModelLimits        string `json:"model_limits" gorm:"type:varchar(1024);default:''"`
+	UsedQuota          int    `json:"used_quota" gorm:"default:0"` // used quota
 }

 func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
@@ -107,7 +109,7 @@ func (token *Token) Insert() error {
 // Update Make sure your token's fields is completed, because this will update non-zero values
 func (token *Token) Update() error {
 	var err error
-	err = DB.Model(token).Select("name", "status", "expired_time", "remain_quota", "unlimited_quota").Updates(token).Error
+	err = DB.Model(token).Select("name", "status", "expired_time", "remain_quota", "unlimited_quota", "model_limits_enabled", "model_limits").Updates(token).Error
 	return err
 }

@@ -122,6 +124,36 @@ func (token *Token) Delete() error {
 	return err
 }

+func (token *Token) IsModelLimitsEnabled() bool {
+	return token.ModelLimitsEnabled
+}
+
+func (token *Token) GetModelLimits() []string {
+	if token.ModelLimits == "" {
+		return []string{}
+	}
+	return strings.Split(token.ModelLimits, ",")
+}
+
+func (token *Token) GetModelLimitsMap() map[string]bool {
+	limits := token.GetModelLimits()
+	limitsMap := make(map[string]bool)
+	for _, limit := range limits {
+		limitsMap[limit] = true
+	}
+	return limitsMap
+}
+
+func DisableModelLimits(tokenId int) error {
+	token, err := GetTokenById(tokenId)
+	if err != nil {
+		return err
+	}
+	token.ModelLimitsEnabled = false
+	token.ModelLimits = ""
+	return token.Update()
+}
+
 func DeleteTokenById(id int, userId int) (err error) {
 	// Why we need userId here? In case user want to delete other's token.
 	if id == 0 || userId == 0 {
@@ -0,0 +1,115 @@
+package model
+
+import (
+	"fmt"
+	"one-api/common"
+	"sync"
+	"time"
+)
+
+// QuotaData 柱状图数据
+type QuotaData struct {
+	Id        int    `json:"id"`
+	UserID    int    `json:"user_id" gorm:"index"`
+	Username  string `json:"username" gorm:"index:idx_qdt_model_user_name,priority:2;size:64;default:''"`
+	ModelName string `json:"model_name" gorm:"index:idx_qdt_model_user_name,priority:1;size:64;default:''"`
+	CreatedAt int64  `json:"created_at" gorm:"bigint;index:idx_qdt_created_at,priority:2"`
+	Count     int    `json:"count" gorm:"default:0"`
+	Quota     int    `json:"quota" gorm:"default:0"`
+}
+
+func UpdateQuotaData() {
+	// recover
+	defer func() {
+		if r := recover(); r != nil {
+			common.SysLog(fmt.Sprintf("UpdateQuotaData panic: %s", r))
+		}
+	}()
+	for {
+		if common.DataExportEnabled {
+			common.SysLog("正在更新数据看板数据...")
+			SaveQuotaDataCache()
+		}
+		time.Sleep(time.Duration(common.DataExportInterval) * time.Minute)
+	}
+}
+
+var CacheQuotaData = make(map[string]*QuotaData)
+var CacheQuotaDataLock = sync.Mutex{}
+
+func LogQuotaDataCache(userId int, username string, modelName string, quota int, createdAt int64) {
+	// 只精确到小时
+	createdAt = createdAt - (createdAt % 3600)
+	key := fmt.Sprintf("%d-%s-%s-%d", userId, username, modelName, createdAt)
+	quotaData, ok := CacheQuotaData[key]
+	if ok {
+		quotaData.Count += 1
+		quotaData.Quota += quota
+	} else {
+		quotaData = &QuotaData{
+			UserID:    userId,
+			Username:  username,
+			ModelName: modelName,
+			CreatedAt: createdAt,
+			Count:     1,
+			Quota:     quota,
+		}
+	}
+	CacheQuotaData[key] = quotaData
+}
+
+func LogQuotaData(userId int, username string, modelName string, quota int, createdAt int64) {
+	CacheQuotaDataLock.Lock()
+	defer CacheQuotaDataLock.Unlock()
+	LogQuotaDataCache(userId, username, modelName, quota, createdAt)
+}
+
+func SaveQuotaDataCache() {
+	CacheQuotaDataLock.Lock()
+	defer CacheQuotaDataLock.Unlock()
+	size := len(CacheQuotaData)
+	// 如果缓存中有数据，就保存到数据库中
+	// 1. 先查询数据库中是否有数据
+	// 2. 如果有数据，就更新数据
+	// 3. 如果没有数据，就插入数据
+	for _, quotaData := range CacheQuotaData {
+		quotaDataDB := &QuotaData{}
+		DB.Table("quota_data").Where("user_id = ? and username = ? and model_name = ? and created_at = ?",
+			quotaData.UserID, quotaData.Username, quotaData.ModelName, quotaData.CreatedAt).First(quotaDataDB)
+		if quotaDataDB.Id > 0 {
+			quotaDataDB.Count += quotaData.Count
+			quotaDataDB.Quota += quotaData.Quota
+			DB.Table("quota_data").Save(quotaDataDB)
+		} else {
+			DB.Table("quota_data").Create(quotaData)
+		}
+	}
+	CacheQuotaData = make(map[string]*QuotaData)
+	common.SysLog(fmt.Sprintf("保存数据看板数据成功，共保存%d条数据", size))
+}
+
+func GetQuotaDataByUsername(username string, startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
+	var quotaDatas []*QuotaData
+	// 从quota_data表中查询数据
+	err = DB.Table("quota_data").Where("username = ?", username).Find(&quotaDatas).Error
+	return quotaDatas, err
+}
+
+func GetQuotaDataByUserId(userId int, startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
+	var quotaDatas []*QuotaData
+	// 从quota_data表中查询数据
+	err = DB.Table("quota_data").Where("user_id = ? and created_at >= ? and created_at <= ?", userId, startTime, endTime).Find(&quotaDatas).Error
+	return quotaDatas, err
+}
+
+func GetAllQuotaDates(startTime int64, endTime int64, username string) (quotaData []*QuotaData, err error) {
+	if username != "" {
+		return GetQuotaDataByUsername(username, startTime, endTime)
+	}
+	var quotaDatas []*QuotaData
+	// 从quota_data表中查询数据
+	// only select model_name, sum(count) as count, sum(quota) as quota, model_name, created_at from quota_data group by model_name, created_at;
+	//err = DB.Table("quota_data").Where("created_at >= ? and created_at <= ?", startTime, endTime).Find(&quotaDatas).Error
+	err = DB.Table("quota_data").Select("model_name, sum(count) as count, sum(quota) as quota, created_at").Where("created_at >= ? and created_at <= ?", startTime, endTime).Group("model_name, created_at").Find(&quotaDatas).Error
+	return quotaDatas, err
+}
@@ -6,6 +6,7 @@ import (
 	"gorm.io/gorm"
 	"one-api/common"
 	"strings"
+	"time"
 )

 // User if you add sensitive fields, don't forget to clean them in setupLogin function.
@@ -202,9 +203,13 @@ func (user *User) Update(updatePassword bool) error {
 		}
 	}
 	newUser := *user
-
 	DB.First(&user, user.Id)
 	err = DB.Model(user).Updates(newUser).Error
+	if err == nil {
+		if common.RedisEnabled {
+			_ = common.RedisSet(fmt.Sprintf("user_group:%d", user.Id), user.Group, time.Duration(UserId2GroupCacheSeconds)*time.Second)
+		}
+	}
 	return err
 }

@@ -114,6 +114,10 @@ func SetApiRouter(router *gin.Engine) {
 		logRoute.GET("/self", middleware.UserAuth(), controller.GetUserLogs)
 		logRoute.GET("/self/search", middleware.UserAuth(), controller.SearchUserLogs)

+		dataRoute := apiRouter.Group("/data")
+		dataRoute.GET("/", middleware.AdminAuth(), controller.GetAllQuotaDates)
+		dataRoute.GET("/self", middleware.UserAuth(), controller.GetUserQuotaDates)
+
 		logRoute.Use(middleware.CORS())
 		{
 			logRoute.GET("/token", controller.GetLogByKey)
@@ -17,7 +17,7 @@ func SetRelayRouter(router *gin.Engine) {
 		modelsRouter.GET("/:model", controller.RetrieveModel)
 	}
 	relayV1Router := router.Group("/v1")
-	relayV1Router.Use(middleware.TokenAuth(), middleware.Distribute())
+	relayV1Router.Use(middleware.RelayPanicRecover(), middleware.TokenAuth(), middleware.Distribute())
 	{
 		relayV1Router.POST("/completions", controller.Relay)
 		relayV1Router.POST("/chat/completions", controller.Relay)
@@ -49,10 +49,12 @@ func SetRelayRouter(router *gin.Engine) {
 	{
 		relayMjRouter.POST("/submit/imagine", controller.RelayMidjourney)
 		relayMjRouter.POST("/submit/change", controller.RelayMidjourney)
+		relayMjRouter.POST("/submit/simple-change", controller.RelayMidjourney)
 		relayMjRouter.POST("/submit/describe", controller.RelayMidjourney)
 		relayMjRouter.POST("/submit/blend", controller.RelayMidjourney)
 		relayMjRouter.POST("/notify", controller.RelayMidjourney)
 		relayMjRouter.GET("/task/:id/fetch", controller.RelayMidjourney)
+		relayMjRouter.POST("/task/list-by-condition", controller.RelayMidjourney)
 	}
 	//relayMjRouter.Use()
 }
@@ -3,7 +3,10 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@douyinfe/semi-ui": "^2.45.2",
+    "@douyinfe/semi-ui": "^2.46.1",
+    "@visactor/vchart": "~1.7.2",
+    "@visactor/react-vchart": "~1.7.2",
+    "@visactor/vchart-semi-theme": "~1.7.2",
    "axios": "^0.27.2",
    "history": "^5.3.0",
    "marked": "^4.1.1",
@@ -44,7 +47,8 @@
    ]
  },
  "devDependencies": {
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "typescript": "4.4.2"
  },
  "prettier": {
    "singleQuote": true,
@@ -23,10 +23,10 @@ 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);
@@ -49,6 +49,8 @@ function App() {
      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);
      if (data.chat_link) {
        localStorage.setItem('chat_link', data.chat_link);
      } else {
@@ -228,6 +230,14 @@ function App() {
                        </PrivateRoute>
                    }
                />
+                <Route
+                    path='/detail'
+                    element={
+                        <PrivateRoute>
+                            <Detail />
+                        </PrivateRoute>
+                    }
+                />
                <Route
                    path='/midjourney'
                    element={
@@ -287,7 +287,7 @@ const LogsTable = () => {
        // data.key = '' + data.id
        setLogs(logs);
        setLogCount(logs.length + ITEMS_PER_PAGE);
-        console.log(logCount);
+        // console.log(logCount);
    }

    const loadLogs = async (startIdx) => {
@@ -422,7 +422,6 @@ const LogsTable = () => {
                                         value={end_timestamp} type='dateTime'
                                         name='end_timestamp'
                                         onChange={value => handleInputChange(value, 'end_timestamp')}/>
-                        {/*<Form.Button fluid label='操作' width={2} onClick={refresh}>查询</Form.Button>*/}
                        {
                            isAdminUser && <>
                                <Form.Input field="channel" label='渠道 ID' style={{width: 176}} value={channel}
@@ -307,7 +307,7 @@ const LogsTable = () => {
        // data.key = '' + data.id
        setLogs(logs);
        setLogCount(logs.length + ITEMS_PER_PAGE);
-        console.log(logCount);
+        // console.log(logCount);
    }

    const loadLogs = async (startIdx) => {
@@ -3,7 +3,8 @@ 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({
+    let now = new Date();
+    let [inputs, setInputs] = useState({
        QuotaForNewUser: 0,
        QuotaForInviter: 0,
        QuotaForInvitee: 0,
@@ -20,28 +21,32 @@ const OperationSetting = () => {
        LogConsumeEnabled: '',
        DisplayInCurrencyEnabled: '',
        DisplayTokenStatEnabled: '',
+        DrawingEnabled: '',
+        DataExportEnabled: '',
+        DataExportInterval: 5,
        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
+    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 === 'ModelPrice') {
-          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+    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 === 'ModelPrice') {
+                    item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+                }
+                newInputs[item.key] = item.value;
+            });
+            setInputs(newInputs);
+            setOriginInputs(newInputs);
+        } else {
+            showError(message);
        }
-        newInputs[item.key] = item.value;
-      });
-      setInputs(newInputs);
-      setOriginInputs(newInputs);
-    } else {
-      showError(message);
-    }
-  };
+    };

    useEffect(() => {
        getOptions().then();
@@ -66,87 +71,88 @@ const OperationSetting = () => {
    };

    const handleInputChange = async (e, {name, value}) => {
-        if (name.endsWith('Enabled')) {
+        if (name.endsWith('Enabled') || name === 'DataExportInterval') {
            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);
+    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['ModelPrice'] !== inputs.ModelPrice) {
+                    if (!verifyJSON(inputs.ModelPrice)) {
+                        showError('模型固定价格不是合法的 JSON 字符串');
+                        return;
+                    }
+                    await updateOption('ModelPrice', inputs.ModelPrice);
+                }
+                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;
        }
-        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['ModelPrice'] !== inputs.ModelPrice) {
-              if (!verifyJSON(inputs.ModelPrice)) {
-                  showError('模型固定价格不是合法的 JSON 字符串');
-                  return;
-              }
-              await updateOption('ModelPrice', inputs.ModelPrice);
-          }
-        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 (
+        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}>
@@ -208,31 +214,58 @@ const OperationSetting = () => {
                            name='DisplayTokenStatEnabled'
                            onChange={handleInputChange}
                        />
+                        <Form.Checkbox
+                            checked={inputs.DrawingEnabled === 'true'}
+                            label='启用绘图功能'
+                            name='DrawingEnabled'
+                            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>
+                    }}>保存通用设置</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 inline>
+                        <Form.Checkbox
+                            checked={inputs.DataExportEnabled === 'true'}
+                            label='启用数据看板（实验性）'
+                            name='DataExportEnabled'
+                            onChange={handleInputChange}
+                        />
+                        <Form.Input
+                            label='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
+                            name='DataExportInterval'
+                            type={'number'}
+                            step='1'
+                            min='1'
+                            onChange={handleInputChange}
+                            autoComplete='new-password'
+                            value={inputs.DataExportInterval}
+                            placeholder='数据看板更新间隔（分钟，设置过短会影响数据库性能）'
+                        />
+                    </Form.Group>
+                    <Divider/>
+                    <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'>
                        监控设置
@@ -394,7 +394,7 @@ const RedemptionsTable = () => {
                    }
                    let keys = "";
                    for (let i = 0; i < selectedKeys.length; i++) {
-                        keys += selectedKeys[i].name + "    sk-" + selectedKeys[i].key + "\n";
+                        keys += selectedKeys[i].name + "    " + selectedKeys[i].key + "\n";
                    }
                    await copyText(keys);
                }
@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useMemo, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {UserContext} from '../context/User';

@@ -6,7 +6,7 @@ import {API, getLogo, getSystemName, isAdmin, isMobile, showSuccess} from '../he
 import '../index.css';

 import {
-    IconAt,
+    IconCalendarClock,
    IconHistogram,
    IconGift,
    IconKey,
@@ -21,78 +21,6 @@ import {
 import {Nav, Avatar, Dropdown, Layout} from '@douyinfe/semi-ui';

 // HeaderBar Buttons
-let headerButtons = [
-    {
-        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: 'midjourney',
-        to: '/midjourney',
-        icon: <IconImage/>
-    },
-    {
-        text: '设置',
-        itemKey: 'setting',
-        to: '/setting',
-        icon: <IconSetting/>
-    },
-    // {
-    //     text: '关于',
-    //     itemKey: 'about',
-    //     to: '/about',
-    //     icon: <IconAt/>
-    // }
-];

 const SiderBar = () => {
    const [userState, userDispatch] = useContext(UserContext);
@@ -101,6 +29,87 @@ const SiderBar = () => {
    const [showSidebar, setShowSidebar] = useState(false);
    const systemName = getSystemName();
    const logo = getLogo();
+    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()]);
+

    async function logout() {
        setShowSidebar(false);
@@ -133,6 +142,7 @@ const SiderBar = () => {
                                setting: "/setting",
                                about: "/about",
                                chat: "/chat",
+                                detail: "/detail",
                            };
                            return (
                                <Link
@@ -43,10 +43,14 @@ function renderTimestamp(timestamp) {
    );
 }

-function renderStatus(status) {
+function renderStatus(status, model_limits_enabled = false) {
    switch (status) {
        case 1:
-            return <Tag color='green' size='large'>已启用</Tag>;
+            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:
@@ -78,7 +82,7 @@ const TokensTable = () => {
            render: (text, record, index) => {
                return (
                    <div>
-                        {renderStatus(text)}
+                        {renderStatus(text, record.model_limits_enabled)}
                    </div>
                );
            },
@@ -224,6 +228,11 @@ const TokensTable = () => {

    const closeEdit = () => {
        setShowEdit(false);
+        setTimeout(() => {
+            setEditingToken({
+                id: undefined,
+            });
+        }, 500);
    }

    const setTokensFormat = (tokens) => {
@@ -1,114 +1,129 @@
-import { Label } from 'semantic-ui-react';
+import {Label} from 'semantic-ui-react';
 import {Tag} from "@douyinfe/semi-ui";

 export function renderText(text, limit) {
-  if (text.length > limit) {
-    return text.slice(0, limit - 3) + '...';
-  }
-  return text;
+    if (text.length > limit) {
+        return text.slice(0, limit - 3) + '...';
+    }
+    return text;
 }

 export function renderGroup(group) {
-  if (group === '') {
-    return <Tag size='large'>default</Tag>;
-  }
-  let groups = group.split(',');
-  groups.sort();
-  return <>
-    {groups.map((group) => {
-      if (group === 'vip' || group === 'pro') {
-        return <Tag size='large' color='yellow'>{group}</Tag>;
-      } else if (group === 'svip' || group === 'premium') {
-        return <Tag size='large' color='red'>{group}</Tag>;
-      }
-      if (group === 'default') {
-        return <Tag size='large'>{group}</Tag>;
-      } else {
-        return <Tag size='large' color={stringToColor(group)}>{group}</Tag>;
-      }
-    })}
-  </>;
+    if (group === '') {
+        return <Tag size='large'>default</Tag>;
+    }
+    let groups = group.split(',');
+    groups.sort();
+    return <>
+        {groups.map((group) => {
+            if (group === 'vip' || group === 'pro') {
+                return <Tag size='large' color='yellow'>{group}</Tag>;
+            } else if (group === 'svip' || group === 'premium') {
+                return <Tag size='large' color='red'>{group}</Tag>;
+            }
+            if (group === 'default') {
+                return <Tag size='large'>{group}</Tag>;
+            } else {
+                return <Tag size='large' color={stringToColor(group)}>{group}</Tag>;
+            }
+        })}
+    </>;
 }

 export function renderNumber(num) {
-  if (num >= 1000000000) {
-    return (num / 1000000000).toFixed(1) + 'B';
-  } else if (num >= 1000000) {
-    return (num / 1000000).toFixed(1) + 'M';
-  } else if (num >= 10000) {
-    return (num / 1000).toFixed(1) + 'k';
-  } else {
+    if (num >= 1000000000) {
+        return (num / 1000000000).toFixed(1) + 'B';
+    } else if (num >= 1000000) {
+        return (num / 1000000).toFixed(1) + 'M';
+    } else if (num >= 10000) {
+        return (num / 1000).toFixed(1) + 'k';
+    } else {
+        return num;
+    }
+}
+
+export function renderQuotaNumberWithDigit(num, digits = 2) {
+    let displayInCurrency = localStorage.getItem('display_in_currency');
+    num = num.toFixed(digits);
+    if (displayInCurrency) {
+        return '$' + num;
+    }
    return num;
-  }
 }

 export function renderNumberWithPoint(num) {
-  num = num.toFixed(2);
-  if (num >= 100000) {
-    // Convert number to string to manipulate it
-    let numStr = num.toString();
-    // Find the position of the decimal point
-    let decimalPointIndex = numStr.indexOf('.');
+    num = num.toFixed(2);
+    if (num >= 100000) {
+        // Convert number to string to manipulate it
+        let numStr = num.toString();
+        // Find the position of the decimal point
+        let decimalPointIndex = numStr.indexOf('.');

-    let wholePart = numStr;
-    let decimalPart = '';
+        let wholePart = numStr;
+        let decimalPart = '';

-    // If there is a decimal point, split the number into whole and decimal parts
-    if (decimalPointIndex !== -1) {
-      wholePart = numStr.slice(0, decimalPointIndex);
-      decimalPart = numStr.slice(decimalPointIndex);
+        // If there is a decimal point, split the number into whole and decimal parts
+        if (decimalPointIndex !== -1) {
+            wholePart = numStr.slice(0, decimalPointIndex);
+            decimalPart = numStr.slice(decimalPointIndex);
+        }
+
+        // Take the first two and last two digits of the whole number part
+        let shortenedWholePart = wholePart.slice(0, 2) + '..' + wholePart.slice(-2);
+
+        // Return the formatted number
+        return shortenedWholePart + decimalPart;
    }

-    // Take the first two and last two digits of the whole number part
-    let shortenedWholePart = wholePart.slice(0, 2) + '..' + wholePart.slice(-2);
-
-    // Return the formatted number
-    return shortenedWholePart + decimalPart;
-  }
-
-  // If the number is less than 100,000, return it unmodified
-  return num;
+    // If the number is less than 100,000, return it unmodified
+    return num;
 }

 export function getQuotaPerUnit() {
-  let quotaPerUnit = localStorage.getItem('quota_per_unit');
-  quotaPerUnit = parseFloat(quotaPerUnit);
-  return quotaPerUnit;
+    let quotaPerUnit = localStorage.getItem('quota_per_unit');
+    quotaPerUnit = parseFloat(quotaPerUnit);
+    return quotaPerUnit;
+}
+
+export function getQuotaWithUnit(quota, digits = 6) {
+    let quotaPerUnit = localStorage.getItem('quota_per_unit');
+    quotaPerUnit = parseFloat(quotaPerUnit);
+    return (quota / quotaPerUnit).toFixed(digits);
 }

 export function renderQuota(quota, digits = 2) {
-  let quotaPerUnit = localStorage.getItem('quota_per_unit');
-  let displayInCurrency = localStorage.getItem('display_in_currency');
-  quotaPerUnit = parseFloat(quotaPerUnit);
-  displayInCurrency = displayInCurrency === 'true';
-  if (displayInCurrency) {
-    return '$' + (quota / quotaPerUnit).toFixed(digits);
-  }
-  return renderNumber(quota);
+    let quotaPerUnit = localStorage.getItem('quota_per_unit');
+    let displayInCurrency = localStorage.getItem('display_in_currency');
+    quotaPerUnit = parseFloat(quotaPerUnit);
+    displayInCurrency = displayInCurrency === 'true';
+    if (displayInCurrency) {
+        return '$' + (quota / quotaPerUnit).toFixed(digits);
+    }
+    return renderNumber(quota);
 }

 export function renderQuotaWithPrompt(quota, digits) {
-  let displayInCurrency = localStorage.getItem('display_in_currency');
-  displayInCurrency = displayInCurrency === 'true';
-  if (displayInCurrency) {
-    return `（等价金额：${renderQuota(quota, digits)}）`;
-  }
-  return '';
+    let displayInCurrency = localStorage.getItem('display_in_currency');
+    displayInCurrency = displayInCurrency === 'true';
+    if (displayInCurrency) {
+        return `（等价金额：${renderQuota(quota, digits)}）`;
+    }
+    return '';
 }

 const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo',
-  'light-blue', 'lime', 'orange', 'pink',
-  'purple', 'red', 'teal', 'violet', 'yellow'
+    'light-blue', 'lime', 'orange', 'pink',
+    'purple', 'red', 'teal', 'violet', 'yellow'
 ]

 export function stringToColor(str) {
-  let sum = 0;
-  // 对字符串中的每个字符进行操作
-  for (let i = 0; i < str.length; i++) {
-    // 将字符的ASCII值加到sum中
-    sum += str.charCodeAt(i);
-  }
-  // 使用模运算得到个位数
-  let i = sum % colors.length;
-  return colors[i];
+    let sum = 0;
+    // 对字符串中的每个字符进行操作
+    for (let i = 0; i < str.length; i++) {
+        // 将字符的ASCII值加到sum中
+        sum += str.charCodeAt(i);
+    }
+    // 使用模运算得到个位数
+    let i = sum % colors.length;
+    return colors[i];
 }
@@ -171,6 +171,32 @@ export function timestamp2string(timestamp) {
  );
 }

+export function timestamp2string1(timestamp) {
+  let date = new Date(timestamp * 1000);
+  // let year = date.getFullYear().toString();
+  let month = (date.getMonth() + 1).toString();
+  let day = date.getDate().toString();
+  let hour = date.getHours().toString();
+  if (month.length === 1) {
+    month = '0' + month;
+  }
+  if (day.length === 1) {
+    day = '0' + day;
+  }
+  if (hour.length === 1) {
+    hour = '0' + hour;
+  }
+  return (
+      // year +
+      // '-' +
+      month +
+      '-' +
+      day +
+      ' ' +
+      hour + ":00"
+  );
+}
+
 export function downloadTextAsFile(text, filename) {
  let blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
  let url = URL.createObjectURL(blob);
@@ -1,7 +1,8 @@
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+import VChart from "@visactor/vchart";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
-import {Container} from 'semantic-ui-react';
 import App from './App';
 import HeaderBar from './components/HeaderBar';
 import Footer from './components/Footer';
@@ -14,6 +15,11 @@ import {StatusProvider} from './context/Status';
 import {Layout} from "@douyinfe/semi-ui";
 import SiderBar from "./components/SiderBar";

+// initialization
+initVChartSemiTheme({
+    isWatchingThemeSwitch: true,
+});
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const {Sider, Content, Header} = Layout;
 root.render(
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Header, Segment } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 import {Layout} from "@douyinfe/semi-ui";
@@ -0,0 +1,292 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {Button, Col, Form, Layout, Row, Spin} from "@douyinfe/semi-ui";
+import VChart from '@visactor/vchart';
+import {useEffectOnce} from "usehooks-ts";
+import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
+import {getQuotaWithUnit, renderNumber, renderQuotaNumberWithDigit} from "../../helpers/render";
+
+const Detail = (props) => {
+
+    let now = new Date();
+    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 isAdminUser = isAdmin();
+    const initialized = useRef(false)
+    const [modelDataChart, setModelDataChart] = useState(null);
+    const [modelDataPieChart, setModelDataPieChart] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [quotaData, setQuotaData] = useState([]);
+    const [quotaDataPie, setQuotaDataPie] = useState([]);
+    const [quotaDataLine, setQuotaDataLine] = useState([]);
+
+    const handleInputChange = (value, name) => {
+        setInputs((inputs) => ({...inputs, [name]: value}));
+    };
+
+    const spec_line = {
+        type: 'bar',
+        data: [
+            {
+                id: 'barData',
+                values: [
+                ]
+            }
+        ],
+        xField: 'Time',
+        yField: 'Usage',
+        seriesField: 'Model',
+        stack: true,
+        legends: {
+            visible: true
+        },
+        title: {
+            visible: true,
+            text: '模型消耗分布（小时）'
+        },
+        bar: {
+            // The state style of bar
+            state: {
+                hover: {
+                    stroke: '#000',
+                    lineWidth: 1
+                }
+            }
+        },
+        tooltip: {
+            mark: {
+                content: [
+                    {
+                        key: datum => datum['Model'],
+                        value: datum => renderQuotaNumberWithDigit(datum['Usage'], 4)
+                    }
+                ]
+            },
+            dimension: {
+                content: [
+                    {
+                        key: datum => datum['Model'],
+                        value: datum => datum['Usage']
+                    }
+                ],
+                updateContent: array => {
+                    // sort by value
+                    array.sort((a, b) => b.value - a.value);
+                    // add $
+                    for (let i = 0; i < array.length; i++) {
+                        array[i].value = renderQuotaNumberWithDigit(array[i].value, 4);
+                    }
+                    return array;
+                }
+            }
+        }
+    };
+
+    const spec_pie = {
+        type: 'pie',
+        data: [
+            {
+                id: 'id0',
+                values: [
+                    { type: 'null', value: '0' },
+                ]
+            }
+        ],
+        outerRadius: 0.8,
+        innerRadius: 0.5,
+        padAngle: 0.6,
+        valueField: 'value',
+        categoryField: 'type',
+        pie: {
+            style: {
+                cornerRadius: 10
+            },
+            state: {
+                hover: {
+                    outerRadius: 0.85,
+                    stroke: '#000',
+                    lineWidth: 1
+                },
+                selected: {
+                    outerRadius: 0.85,
+                    stroke: '#000',
+                    lineWidth: 1
+                }
+            }
+        },
+        title: {
+            visible: true,
+            text: '模型调用次数占比'
+        },
+        legends: {
+            visible: true,
+            orient: 'left'
+        },
+        label: {
+            visible: true
+        },
+        tooltip: {
+            mark: {
+                content: [
+                    {
+                        key: datum => datum['type'],
+                        value: datum => renderNumber(datum['value'])
+                    }
+                ]
+            }
+        }
+    };
+
+    const loadQuotaData = async (lineChart, pieChart) => {
+        setLoading(true);
+
+        let url = '';
+        let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+        let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+        if (isAdminUser) {
+            url = `/api/data/?username=${username}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+        } else {
+            url = `/api/data/self/?start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+        }
+        const res = await API.get(url);
+        const {success, message, data} = res.data;
+        if (success) {
+            setQuotaData(data);
+            if (data.length === 0) {
+                data.push({
+                    'count': 0,
+                    'model_name': '无数据',
+                    'quota': 0,
+                    'created_at': now.getTime() / 1000
+                })
+            }
+            updateChart(lineChart, pieChart, data);
+        } else {
+            showError(message);
+        }
+        setLoading(false);
+    };
+
+    const refresh = async () => {
+        await loadQuotaData(modelDataChart, modelDataPieChart);
+    };
+
+    const initChart  = async () => {
+        let lineChart = modelDataChart
+        if (!modelDataChart) {
+            lineChart = new VChart(spec_line, {dom: 'model_data'});
+            setModelDataChart(lineChart);
+            lineChart.renderAsync();
+        }
+        let pieChart = modelDataPieChart
+        if (!modelDataPieChart) {
+            pieChart = new VChart(spec_pie, {dom: 'model_pie'});
+            setModelDataPieChart(pieChart);
+            pieChart.renderAsync();
+        }
+        console.log('init vchart');
+        await loadQuotaData(lineChart, pieChart)
+    }
+
+    const updateChart = (lineChart, pieChart, data) => {
+        if (isAdminUser) {
+            // 将所有用户合并
+        }
+        let pieData = [];
+        let lineData = [];
+        for (let i = 0; i < data.length; i++) {
+            const item = data[i];
+            // 合并model_name
+            let pieItem = pieData.find(it => it.type === item.model_name);
+            if (pieItem) {
+                pieItem.value += item.count;
+            } else {
+                pieData.push({
+                    "type": item.model_name,
+                    "value": item.count
+                });
+            }
+            // 合并created_at和model_name 为 lineData, created_at 数据类型是小时的时间戳
+            // 转换日期格式
+            let createTime = timestamp2string1(item.created_at);
+            let lineItem = lineData.find(it => it.Time === createTime && it.Model === item.model_name);
+            if (lineItem) {
+                lineItem.Usage += parseFloat(getQuotaWithUnit(item.quota));
+            } else {
+                lineData.push({
+                    "Time": createTime,
+                    "Model": item.model_name,
+                    "Usage": parseFloat(getQuotaWithUnit(item.quota))
+                });
+            }
+
+        }
+        // sort by count
+        pieData.sort((a, b) => b.value - a.value);
+        pieChart.updateData('id0', pieData);
+        lineChart.updateData('barData', lineData);
+        pieChart.reLayout();
+        lineChart.reLayout();
+    }
+
+    useEffect(() => {
+        if (!initialized.current) {
+            initialized.current = true;
+            initChart();
+        }
+    }, []);
+
+    return (
+        <>
+            <Layout>
+                <Layout.Header>
+                    <h3>数据看板</h3>
+                </Layout.Header>
+                <Layout.Content>
+                    <Form layout='horizontal' style={{marginTop: 10}}>
+                        <>
+                            <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="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>
+                    <Spin spinning={loading}>
+                        <div style={{height: 500}}>
+                            <div id="model_pie" style={{width: '100%', minWidth: 100}}></div>
+                        </div>
+                        <div style={{height: 500}}>
+                            <div id="model_data" style={{width: '100%', minWidth: 100}}></div>
+                        </div>
+                    </Spin>
+                </Layout.Content>
+            </Layout>
+        </>
+    );
+};
+
+
+export default Detail;
@@ -2,22 +2,37 @@ import React, {useEffect, useRef, useState} from 'react';
 import {useParams, useNavigate} from 'react-router-dom';
 import {API, isMobile, showError, showSuccess, timestamp2string} from '../../helpers';
 import {renderQuota, renderQuotaWithPrompt} from '../../helpers/render';
-import {Layout, SideSheet, Button, Space, Spin, Banner, Input, DatePicker, AutoComplete, Typography} from "@douyinfe/semi-ui";
+import {
+    Layout,
+    SideSheet,
+    Button,
+    Space,
+    Spin,
+    Banner,
+    Input,
+    DatePicker,
+    AutoComplete,
+    Typography,
+    Checkbox, Select
+} from "@douyinfe/semi-ui";
 import Title from "@douyinfe/semi-ui/lib/es/typography/title";
 import {Divider} from "semantic-ui-react";

 const EditToken = (props) => {
-    const isEdit = props.editingToken.id !== undefined;
+    const [isEdit, setIsEdit] = useState(false);
    const [loading, setLoading] = useState(isEdit);
    const originInputs = {
        name: '',
        remain_quota: isEdit ? 0 : 500000,
        expired_time: -1,
-        unlimited_quota: false
+        unlimited_quota: false,
+        model_limits_enabled: false,
+        model_limits: [],
    };
    const [inputs, setInputs] = useState(originInputs);
-    const {name, remain_quota, expired_time, unlimited_quota} = inputs;
+    const {name, remain_quota, expired_time, unlimited_quota, model_limits_enabled, model_limits} = inputs;
    // const [visible, setVisible] = useState(false);
+    const [models, setModels] = useState({});
    const navigate = useNavigate();
    const handleInputChange = (name, value) => {
        setInputs((inputs) => ({...inputs, [name]: value}));
@@ -44,6 +59,20 @@ const EditToken = (props) => {
        setInputs({...inputs, unlimited_quota: !unlimited_quota});
    };

+    const loadModels = async () => {
+        let res = await API.get(`/api/user/models`);
+        const {success, message, data} = res.data;
+        if (success) {
+            let localModelOptions = data.map((model) => ({
+                label: model,
+                value: model
+            }));
+            setModels(localModelOptions);
+        } else {
+            showError(message);
+        }
+    }
+
    const loadToken = async () => {
        setLoading(true);
        let res = await API.get(`/api/token/${props.editingToken.id}`);
@@ -52,6 +81,11 @@ const EditToken = (props) => {
            if (data.expired_time !== -1) {
                data.expired_time = timestamp2string(data.expired_time);
            }
+            if (data.model_limits !== '') {
+                data.model_limits = data.model_limits.split(',');
+            } else {
+                data.model_limits = [];
+            }
            setInputs(data);
        } else {
            showError(message);
@@ -59,17 +93,22 @@ const EditToken = (props) => {
        setLoading(false);
    };
    useEffect(() => {
-        if (isEdit) {
-            loadToken().then(
-                () => {
-                    // console.log(inputs);
-                }
-            );
-        } else {
-            setInputs(originInputs);
-        }
+        setIsEdit(props.editingToken.id !== undefined);
    }, [props.editingToken.id]);

+    useEffect(() => {
+       if (!isEdit) {
+           setInputs(originInputs);
+       } else {
+           loadToken().then(
+               () => {
+                   // console.log(inputs);
+               }
+           );
+       }
+       loadModels();
+    }, [isEdit]);
+
    // 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1
    const [tokenCount, setTokenCount] = useState(1);

@@ -107,7 +146,7 @@ const EditToken = (props) => {
                }
                localInputs.expired_time = Math.ceil(time / 1000);
            }
-
+            localInputs.model_limits = localInputs.model_limits.join(',');
            let res = await API.put(`/api/token/`, {...localInputs, id: parseInt(props.editingToken.id)});
            const {success, message} = res.data;
            if (success) {
@@ -137,7 +176,7 @@ const EditToken = (props) => {
                    }
                    localInputs.expired_time = Math.ceil(time / 1000);
                }
-
+                localInputs.model_limits = localInputs.model_limits.join(',');
                let res = await API.post(`/api/token/`, localInputs);
                const {success, message} = res.data;

@@ -234,7 +273,7 @@ const EditToken = (props) => {
                        value={remain_quota}
                        autoComplete='new-password'
                        type='number'
-                        position={'top'}
+                        // position={'top'}
                        data={[
                            {value: 500000, label: '1$'},
                            {value: 5000000, label: '10$'},
@@ -245,27 +284,30 @@ const EditToken = (props) => {
                        ]}
                        disabled={unlimited_quota}
                    />
-                    <div style={{marginTop: 20}}>
-                        <Typography.Text>新建数量</Typography.Text>
-                    </div>
+
                    {!isEdit && (
-                        <AutoComplete
-                            style={{ marginTop: 8 }}
-                            label='数量'
-                            placeholder={'请选择或输入创建令牌的数量'}
-                            onChange={(value) => handleTokenCountChange(value)}
-                            onSelect={(value) => handleTokenCountChange(value)}
-                            value={tokenCount.toString()}
-                            autoComplete='off'
-                            type='number'
-                            data={[
-                                { value: 10, label: '10个' },
-                                { value: 20, label: '20个' },
-                                { value: 30, label: '30个' },
-                                { value: 100, label: '100个' },
-                            ]}
-                            disabled={unlimited_quota}
-                        />
+                        <>
+                            <div style={{marginTop: 20}}>
+                                <Typography.Text>新建数量</Typography.Text>
+                            </div>
+                            <AutoComplete
+                                style={{ marginTop: 8 }}
+                                label='数量'
+                                placeholder={'请选择或输入创建令牌的数量'}
+                                onChange={(value) => handleTokenCountChange(value)}
+                                onSelect={(value) => handleTokenCountChange(value)}
+                                value={tokenCount.toString()}
+                                autoComplete='off'
+                                type='number'
+                                data={[
+                                    { value: 10, label: '10个' },
+                                    { value: 20, label: '20个' },
+                                    { value: 30, label: '30个' },
+                                    { value: 100, label: '100个' },
+                                ]}
+                                disabled={unlimited_quota}
+                            />
+                        </>
                    )}

                    <div>
@@ -273,6 +315,34 @@ const EditToken = (props) => {
                            setUnlimitedQuota();
                        }}>{unlimited_quota ? '取消无限额度' : '设为无限额度'}</Button>
                    </div>
+                    <Divider/>
+                    <div style={{marginTop: 10, display: 'flex'}}>
+                        <Space>
+                            <Checkbox
+                                name='model_limits_enabled'
+                                checked={model_limits_enabled}
+                                onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
+                            >
+                            </Checkbox>
+                            <Typography.Text>启用模型限制（非必要，不建议启用）</Typography.Text>
+                        </Space>
+                    </div>
+
+                    <Select
+                        style={{marginTop: 8}}
+                        placeholder={'请选择该渠道所支持的模型'}
+                        name='models'
+                        required
+                        multiple
+                        selection
+                        onChange={value => {
+                            handleInputChange('model_limits', value);
+                        }}
+                        value={inputs.model_limits}
+                        autoComplete='new-password'
+                        optionList={models}
+                        disabled={!model_limits_enabled}
+                    />
                </Spin>
            </SideSheet>
        </>
@@ -131,7 +131,7 @@ const TopUp = () => {
    }, []);

    const renderAmount = () => {
-        console.log(amount);
+        // console.log(amount);
        return amount + '元';
    }
Author	SHA1	Message	Date
Calcium-Ion	b428c63d58	Update LICENSE	2024-01-08 19:48:30 +08:00
CaIon	1fdcb65c69	perf: 优化数据看板性能和显示效果	2024-01-08 18:49:10 +08:00
CaIon	1d6b3282a1	update README.md	2024-01-08 16:26:00 +08:00
CaIon	8d9e04427b	feat: 可设置令牌能调用的模型	2024-01-08 16:25:17 +08:00
CaIon	6e906442f6	perf: 美化数据看板	2024-01-08 11:32:27 +08:00
CaIon	35579b6254	fix: fix JSON tag in Log struct	2024-01-08 11:25:22 +08:00
CaIon	4e0ee9375c	删除前端无用log	2024-01-08 11:24:47 +08:00
CaIon	d2dd7d5960	fix: 减少username和model_name字段长度为64	2024-01-08 10:11:36 +08:00
CaIon	85a1540a2e	fix: 减少group和model字段长度为64	2024-01-08 10:08:20 +08:00
Calcium-Ion	87e36af5f6	Update README.md	2024-01-08 00:25:12 +08:00
CaIon	1556578432	fix: 修复侧边导航栏需要刷新才出现选项的问题	2024-01-07 23:54:51 +08:00
CaIon	40735b9d09	fix: 修复mj固定价格设置无效的问题	2024-01-07 23:40:06 +08:00
CaIon	2903c2303b	fix: 数据面板次数统计错误	2024-01-07 23:28:27 +08:00
CaIon	70ec0682f9	fix: recover panic	2024-01-07 22:25:03 +08:00
CaIon	c92f327283	fix: 索引长度	2024-01-07 22:16:20 +08:00
CaIon	aca1a55609	fix: 索引名称长度	2024-01-07 22:07:17 +08:00
CaIon	d9107379e9	fix: fix gemini panic	2024-01-07 21:27:28 +08:00
CaIon	171315e674	fix: 修复数据看板饼图显示错误	2024-01-07 20:48:09 +08:00
CaIon	b45f3b1844	feat: 完善数据看板选择时间区间	2024-01-07 19:47:35 +08:00
CaIon	7f60a91953	fix: 优化数据看板更新逻辑	2024-01-07 18:33:41 +08:00
CaIon	dd0abc9447	feat: 新增数据看板	2024-01-07 18:31:14 +08:00
CaIon	ae77b5313f	feat: 允许关闭绘图选项	2024-01-07 18:31:04 +08:00
CaIon	6504c5baeb	fix: 修复兑换码复制带sk-	2024-01-06 21:49:11 +08:00
CaIon	b051871f5c	修复mj计费问题	2024-01-05 12:23:26 +08:00
Calcium-Ion	5abb7448aa	Merge pull request #41 from Calcium-Ion/optimize/mj optimize: MJ 部分调整、优化	2024-01-03 22:45:23 +08:00
Calcium-Ion	f349b33207	Merge pull request #42 from Tailen/main feat: 添加 davinci-002 和 babbage-002 模型	2024-01-03 22:43:28 +08:00
Hao Mei	d36a9303d2	feat: add support for davinci-002 and babbage-002	2024-01-03 20:19:00 +08:00
Xyfacai	825f59e162	optimize: MJ 部分调整、优化 MJ 增加simple-change、list接口，变换和重试操作区别出来，价格与绘图一样优化图片返回	2024-01-01 22:46:05 +08:00
CaIon	abe948c5c1	update README.md	2023-12-29 16:08:50 +08:00
CaIon	e0234a677c	更新用户时刷新缓存数据	2023-12-29 00:00:23 +08:00
CaIon	e4c9f56ca0	update README.md	2023-12-28 23:59:57 +08:00
CaIon	8926f42313	无效的请求返回具体原因	2023-12-28 23:59:46 +08:00