fix: check if token is nil before using it

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

@@ -1,4 +1,4 @@
-name: Publish Docker image (amd64)
+name: Publish Docker image (amd64, English)
 
 on:
   push:
@@ -33,20 +33,12 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Log in to the Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Extract metadata (tags, labels) for Docker
         id: meta
         uses: docker/metadata-action@v4
         with:
           images: |
             justsong/one-api-en
-            ghcr.io/one-api-en
 
       - name: Build and push Docker images
         uses: docker/build-push-action@v3

README.en.md

@@ -0,0 +1,284 @@
+<p align="right">
+    <a href="./README.md">中文</a> | <strong>English</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/public/logo.png" width="150" height="150" alt="one-api logo"></a>
+</p>
+
+<div align="center">
+
+# One API
+
+_✨ The all-in-one OpenAI interface, integrates various API access methods, ready to use ✨_
+
+</div>
+
+<p align="center">
+  <a href="https://raw.githubusercontent.com/songquanpeng/one-api/main/LICENSE">
+    <img src="https://img.shields.io/github/license/songquanpeng/one-api?color=brightgreen" alt="license">
+  </a>
+  <a href="https://github.com/songquanpeng/one-api/releases/latest">
+    <img src="https://img.shields.io/github/v/release/songquanpeng/one-api?color=brightgreen&include_prereleases" alt="release">
+  </a>
+  <a href="https://hub.docker.com/repository/docker/justsong/one-api">
+    <img src="https://img.shields.io/docker/pulls/justsong/one-api?color=brightgreen" alt="docker pull">
+  </a>
+  <a href="https://github.com/songquanpeng/one-api/releases/latest">
+    <img src="https://img.shields.io/github/downloads/songquanpeng/one-api/total?color=brightgreen&include_prereleases" alt="release">
+  </a>
+  <a href="https://goreportcard.com/report/github.com/songquanpeng/one-api">
+    <img src="https://goreportcard.com/badge/github.com/songquanpeng/one-api" alt="GoReportCard">
+  </a>
+</p>
+
+<p align="center">
+  <a href="#deployment">Deployment Tutorial</a>
+  ·
+  <a href="#usage">Usage</a>
+  ·
+  <a href="https://github.com/songquanpeng/one-api/issues">Feedback</a>
+  ·
+  <a href="#screenshots">Screenshots</a>
+  ·
+  <a href="https://openai.justsong.cn/">Live Demo</a>
+  ·
+  <a href="#faq">FAQ</a>
+  ·
+  <a href="#related-projects">Related Projects</a>
+  ·
+  <a href="https://iamazing.cn/page/reward">Donate</a>
+</p>
+
+> **Warning**: This README is translated by ChatGPT. Please feel free to submit a PR if you find any translation errors.
+
+> **Warning**: The Docker image for English version is `justsong/one-api-en`.
+
+> **Note**: The latest image pulled from Docker may be an `alpha` release. Specify the version manually if you require stability.
+
+## Features
+1. Supports multiple API access channels. Welcome PRs or issue submissions for additional channels:
+    + [x] Official OpenAI channel (support proxy configuration)
+    + [x] **Azure OpenAI API**
+    + [x] [OpenAI-SB](https://openai-sb.com)
+    + [x] [API2D](https://api2d.com/r/197971)
+    + [x] [OhMyGPT](https://aigptx.top?aff=uFpUl2Kf)
+    + [x] [AI Proxy](https://aiproxy.io/?i=OneAPI) (invitation code: `OneAPI`)
+    + [x] [API2GPT](http://console.api2gpt.com/m/00002S)
+    + [x] [CloseAI](https://console.closeai-asia.com/r/2412)
+    + [x] [AI.LS](https://ai.ls)
+    + [x] [OpenAI Max](https://openaimax.com)
+    + [x] Custom channel: Various third-party proxy services not included in the list
+2. Supports access to multiple channels through **load balancing**.
+3. Supports **stream mode** that enables typewriter-like effect through stream transmission.
+4. Supports **multi-machine deployment**. [See here](#multi-machine-deployment) for more details.
+5. Supports **token management** that allows setting token expiration time and usage count.
+6. Supports **voucher management** that enables batch generation and export of vouchers. Vouchers can be used for account balance replenishment.
+7. Supports **channel management** that allows bulk creation of channels.
+8. Supports **user grouping** and **channel grouping** for setting different rates for different groups.
+9. Supports channel **model list configuration**.
+10. Supports **quota details checking**.
+11. Supports **user invite rewards**.
+12. Allows display of balance in USD.
+13. Supports announcement publishing, recharge link setting, and initial balance setting for new users.
+14. Offers rich **customization** options:
+    1. Supports customization of system name, logo, and footer.
+    2. Supports customization of homepage and about page using HTML & Markdown code, or embedding a standalone webpage through iframe.
+15. Supports management API access through system access tokens.
+16. Supports Cloudflare Turnstile user verification.
+17. Supports user management and multiple user login/registration methods:
+    + Email login/registration and password reset via email.
+    + [GitHub OAuth](https://github.com/settings/applications/new).
+    + WeChat Official Account authorization (requires additional deployment of [WeChat Server](https://github.com/songquanpeng/wechat-server)).
+18. Immediate support and encapsulation of other major model APIs as they become available.
+
+## Deployment
+### Docker Deployment
+Deployment command: `docker run --name one-api -d --restart always -p 3000:3000 -e TZ=Asia/Shanghai -v /home/ubuntu/data/one-api:/data justsong/one-api-en`
+
+Update command: `docker run --rm -v /var/run/docker.sock:/var/run/docker.sock containrrr/watchtower -cR`
+
+The first `3000` in `-p 3000:3000` is the port of the host, which can be modified as needed.
+
+Data will be saved in the `/home/ubuntu/data/one-api` directory on the host. Ensure that the directory exists and has write permissions, or change it to a suitable directory.
+
+Nginx reference configuration:
+```
+server{
+   server_name openai.justsong.cn;  # Modify your domain name accordingly
+   
+   location / {
+          client_max_body_size  64m;
+          proxy_http_version 1.1;
+          proxy_pass http://localhost:3000;  # Modify your port accordingly
+          proxy_set_header Host $host;
+          proxy_set_header X-Forwarded-For $remote_addr;
+          proxy_cache_bypass $http_upgrade;
+          proxy_set_header Accept-Encoding gzip;
+   }
+}
+```
+
+Next, configure HTTPS with Let's Encrypt certbot:
+```bash
+# Install certbot on Ubuntu:
+sudo snap install --classic certbot
+sudo ln -s /snap/bin/certbot /usr/bin/certbot
+# Generate certificates & modify Nginx configuration
+sudo certbot --nginx
+# Follow the prompts
+# Restart Nginx
+sudo service nginx restart
+```
+
+The initial account username is `root` and password is `123456`.
+
+### Manual Deployment
+1. Download the executable file from [GitHub Releases](https://github.com/songquanpeng/one-api/releases/latest) or compile from source:
+   ```shell
+   git clone https://github.com/songquanpeng/one-api.git
+   
+   # Build the frontend
+   cd one-api/web
+   npm install
+   npm run build
+
+   # Build the backend
+   cd ..
+   go mod download
+   go build -ldflags "-s -w" -o one-api
+   ```
+2. Run:
+   ```shell
+   chmod u+x one-api
+   ./one-api --port 3000 --log-dir ./logs
+   ```
+3. Access [http://localhost:3000/](http://localhost:3000/) and log in. The initial account username is `root` and password is `123456`.
+
+For more detailed deployment tutorials, please refer to [this page](https://iamazing.cn/page/how-to-deploy-a-website).
+
+### Multi-machine Deployment
+1. Set the same `SESSION_SECRET` for all servers.
+2. Set `SQL_DSN` and use MySQL instead of SQLite. All servers should connect to the same database.
+3. Set the `NODE_TYPE` for all non-master nodes to `slave`.
+4. Set `SYNC_FREQUENCY` for servers to periodically sync configurations from the database.
+5. Non-master nodes can optionally set `FRONTEND_BASE_URL` to redirect page requests to the master server.
+6. Install Redis separately on non-master nodes, and configure `REDIS_CONN_STRING` so that the database can be accessed with zero latency when the cache has not expired.
+7. If the main server also has high latency accessing the database, Redis must be enabled and `SYNC_FREQUENCY` must be set to periodically sync configurations from the database.
+
+Please refer to the [environment variables](#environment-variables) section for details on using environment variables.
+
+### Deployment on Control Panels (e.g., Baota)
+Refer to [#175](https://github.com/songquanpeng/one-api/issues/175) for detailed instructions.
+
+If you encounter a blank page after deployment, refer to [#97](https://github.com/songquanpeng/one-api/issues/97) for possible solutions.
+
+### Deployment on Third-Party Platforms
+<details>
+<summary><strong>Deployment on Zeabur</strong></summary>
+<div>
+
+> Zeabur's servers are located overseas, automatically solving network issues, and the free quota is sufficient for personal usage.
+
+1. First, fork the code.
+2. Go to [Zeabur](https://zeabur.com/), log in, and enter the console.
+3. Create a new project. In Service -> Add Service, select Marketplace, and choose MySQL. Note down the connection parameters (username, password, address, and port).
+4. Copy the connection parameters and run ```create database `one-api` ``` to create the database.
+5. Then, in Service -> Add Service, select Git (authorization is required for the first use) and choose your forked repository.
+6. Automatic deployment will start, but please cancel it for now. Go to the Variable tab, add a `PORT` with a value of `3000`, and then add a `SQL_DSN` with a value of `<username>:<password>@tcp(<addr>:<port>)/one-api`. Save the changes. Please note that if `SQL_DSN` is not set, data will not be persisted, and the data will be lost after redeployment.
+7. Select Redeploy.
+8. In the Domains tab, select a suitable domain name prefix, such as "my-one-api". The final domain name will be "my-one-api.zeabur.app". You can also CNAME your own domain name.
+9. Wait for the deployment to complete, and click on the generated domain name to access One API.
+
+</div>
+</details>
+
+## Configuration
+The system is ready to use out of the box.
+
+You can configure it by setting environment variables or command line parameters.
+
+After the system starts, log in as the `root` user to further configure the system.
+
+## Usage
+Add your API Key on the `Channels` page, and then add an access token on the `Tokens` page.
+
+You can then use your access token to access One API. The usage is consistent with the [OpenAI API](https://platform.openai.com/docs/api-reference/introduction).
+
+In places where the OpenAI API is used, remember to set the API Base to your One API deployment address, for example: `https://openai.justsong.cn`. The API Key should be the token generated in One API.
+
+Note that the specific API Base format depends on the client you are using.
+
+```mermaid
+graph LR
+    A(User)
+    A --->|Request| B(One API)
+    B -->|Relay Request| C(OpenAI)
+    B -->|Relay Request| D(Azure)
+    B -->|Relay Request| E(Other downstream channels)
+```
+
+To specify which channel to use for the current request, you can add the channel ID after the token, for example: `Authorization: Bearer ONE_API_KEY-CHANNEL_ID`.
+Note that the token needs to be created by an administrator to specify the channel ID.
+
+If the channel ID is not provided, load balancing will be used to distribute the requests to multiple channels.
+
+### Environment Variables
+1. `REDIS_CONN_STRING`: When set, Redis will be used as the storage for request rate limiting instead of memory.
+    + Example: `REDIS_CONN_STRING=redis://default:redispw@localhost:49153`
+2. `SESSION_SECRET`: When set, a fixed session key will be used to ensure that cookies of logged-in users are still valid after the system restarts.
+    + Example: `SESSION_SECRET=random_string`
+3. `SQL_DSN`: When set, the specified database will be used instead of SQLite. Please use MySQL version 8.0.
+    + Example: `SQL_DSN=root:123456@tcp(localhost:3306)/oneapi`
+4. `FRONTEND_BASE_URL`: When set, the specified frontend address will be used instead of the backend address.
+    + Example: `FRONTEND_BASE_URL=https://openai.justsong.cn`
+5. `SYNC_FREQUENCY`: When set, the system will periodically sync configurations from the database, with the unit in seconds. If not set, no sync will happen.
+    + Example: `SYNC_FREQUENCY=60`
+6. `NODE_TYPE`: When set, specifies the node type. Valid values are `master` and `slave`. If not set, it defaults to `master`.
+    + Example: `NODE_TYPE=slave`
+7. `CHANNEL_UPDATE_FREQUENCY`: When set, it periodically updates the channel balances, with the unit in minutes. If not set, no update will happen.
+    + Example: `CHANNEL_UPDATE_FREQUENCY=1440`
+8. `CHANNEL_TEST_FREQUENCY`: When set, it periodically tests the channels, with the unit in minutes. If not set, no test will happen.
+    + Example: `CHANNEL_TEST_FREQUENCY=1440`
+9. `REQUEST_INTERVAL`: The time interval (in seconds) between requests when updating channel balances and testing channel availability. Default is no interval.
+    + Example: `POLLING_INTERVAL=5`
+
+### Command Line Parameters
+1. `--port <port_number>`: Specifies the port number on which the server listens. Defaults to `3000`.
+    + Example: `--port 3000`
+2. `--log-dir <log_dir>`: Specifies the log directory. If not set, the logs will not be saved.
+    + Example: `--log-dir ./logs`
+3. `--version`: Prints the system version number and exits.
+4. `--help`: Displays the command usage help and parameter descriptions.
+
+## Screenshots
+![channel](https://user-images.githubusercontent.com/39998050/233837954-ae6683aa-5c4f-429f-a949-6645a83c9490.png)
+![token](https://user-images.githubusercontent.com/39998050/233837971-dab488b7-6d96-43af-b640-a168e8d1c9bf.png)
+
+## FAQ
+1. What is quota? How is it calculated? Does One API have quota calculation issues?
+    + Quota = Group multiplier * Model multiplier * (number of prompt tokens + number of completion tokens * completion multiplier)
+    + The completion multiplier is fixed at 1.33 for GPT3.5 and 2 for GPT4, consistent with the official definition.
+    + If it is not a stream mode, the official API will return the total number of tokens consumed. However, please note that the consumption multipliers for prompts and completions are different.
+2. Why does it prompt "insufficient quota" even though my account balance is sufficient?
+    + Please check if your token quota is sufficient. It is separate from the account balance.
+    + The token quota is used to set the maximum usage and can be freely set by the user.
+3. It says "No available channels" when trying to use a channel. What should I do?
+    + Please check the user and channel group settings.
+    + Also check the channel model settings.
+4. Channel testing reports an error: "invalid character '<' looking for beginning of value"
+    + This error occurs when the returned value is not valid JSON but an HTML page.
+    + Most likely, the IP of your deployment site or the node of the proxy has been blocked by CloudFlare.
+5. ChatGPT Next Web reports an error: "Failed to fetch"
+    + Do not set `BASE_URL` during deployment.
+    + Double-check that your interface address and API Key are correct.
+
+## Related Projects
+[FastGPT](https://github.com/c121914yu/FastGPT): Build an AI knowledge base in three minutes
+
+## Note
+This project is an open-source project. Please use it in compliance with OpenAI's [Terms of Use](https://openai.com/policies/terms-of-use) and **applicable laws and regulations**. It must not be used for illegal purposes.
+
+This project is open-sourced under the MIT license. One must somehow retain the copyright information of One API.
+
+According to the MIT license, users should bear the risk and responsibility of using this project, and the developer of this open-source project is not responsible for this.

README.md

@@ -1,3 +1,8 @@
+<p align="right">
+   <strong>中文</strong> | <a href="./README.en.md">English</a>
+</p>
+
+
 <p align="center">
   <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/public/logo.png" width="150" height="150" alt="one-api logo"></a>
 </p>

controller/billing.go

@@ -32,6 +32,9 @@ func GetSubscription(c *gin.Context) {
 	if common.DisplayInCurrencyEnabled {
 		amount /= common.QuotaPerUnit
 	}
+	if token != nil && token.UnlimitedQuota {
+		amount = 99999999.9999
+	}
 	subscription := OpenAISubscriptionResponse{
 		Object:             "billing_subscription",
 		HasPaymentMethod:   true,
@@ -71,7 +74,7 @@ func GetUsage(c *gin.Context) {
 	}
 	usage := OpenAIUsageResponse{
 		Object:     "list",
-		TotalUsage: amount,
+		TotalUsage: amount * 100,
 	}
 	c.JSON(200, usage)
 	return

controller/log.go

@@ -13,7 +13,12 @@ func GetAllLogs(c *gin.Context) {
 		p = 0
 	}
 	logType, _ := strconv.Atoi(c.Query("type"))
-	logs, err := model.GetAllLogs(logType, p*common.ItemsPerPage, common.ItemsPerPage)
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	username := c.Query("username")
+	tokenName := c.Query("token_name")
+	modelName := c.Query("model_name")
+	logs, err := model.GetAllLogs(logType, startTimestamp, endTimestamp, modelName, username, tokenName, p*common.ItemsPerPage, common.ItemsPerPage)
 	if err != nil {
 		c.JSON(200, gin.H{
 			"success": false,
@@ -35,7 +40,11 @@ func GetUserLogs(c *gin.Context) {
 	}
 	userId := c.GetInt("id")
 	logType, _ := strconv.Atoi(c.Query("type"))
-	logs, err := model.GetUserLogs(userId, logType, p*common.ItemsPerPage, common.ItemsPerPage)
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	tokenName := c.Query("token_name")
+	modelName := c.Query("model_name")
+	logs, err := model.GetUserLogs(userId, logType, startTimestamp, endTimestamp, modelName, tokenName, p*common.ItemsPerPage, common.ItemsPerPage)
 	if err != nil {
 		c.JSON(200, gin.H{
 			"success": false,
@@ -84,3 +93,41 @@ func SearchUserLogs(c *gin.Context) {
 		"data":    logs,
 	})
 }
+
+func GetLogsStat(c *gin.Context) {
+	logType, _ := strconv.Atoi(c.Query("type"))
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	tokenName := c.Query("token_name")
+	username := c.Query("username")
+	modelName := c.Query("model_name")
+	quotaNum := model.SumUsedQuota(logType, startTimestamp, endTimestamp, modelName, username, tokenName)
+	//tokenNum := model.SumUsedToken(logType, startTimestamp, endTimestamp, modelName, username, "")
+	c.JSON(200, gin.H{
+		"success": true,
+		"message": "",
+		"data": gin.H{
+			"quota": quotaNum,
+			//"token": tokenNum,
+		},
+	})
+}
+
+func GetLogsSelfStat(c *gin.Context) {
+	username := c.GetString("username")
+	logType, _ := strconv.Atoi(c.Query("type"))
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	tokenName := c.Query("token_name")
+	modelName := c.Query("model_name")
+	quotaNum := model.SumUsedQuota(logType, startTimestamp, endTimestamp, modelName, username, tokenName)
+	//tokenNum := model.SumUsedToken(logType, startTimestamp, endTimestamp, modelName, username, tokenName)
+	c.JSON(200, gin.H{
+		"success": true,
+		"message": "",
+		"data": gin.H{
+			"quota": quotaNum,
+			//"token": tokenNum,
+		},
+	})
+}

controller/relay-text.go

@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"bytes"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"io"
@@ -29,6 +30,25 @@ func relayTextHelper(c *gin.Context, relayMode int) *OpenAIErrorWithStatusCode {
 	if relayMode == RelayModeModeration && textRequest.Model == "" {
 		textRequest.Model = "text-moderation-latest"
 	}
+	// request validation
+	if textRequest.Model == "" {
+		return errorWrapper(errors.New("model is required"), "required_field_missing", http.StatusBadRequest)
+	}
+	switch relayMode {
+	case RelayModeCompletions:
+		if textRequest.Prompt == "" {
+			return errorWrapper(errors.New("prompt is required"), "required_field_missing", http.StatusBadRequest)
+		}
+	case RelayModeChatCompletions:
+		if len(textRequest.Messages) == 0 {
+			return errorWrapper(errors.New("messages is required"), "required_field_missing", http.StatusBadRequest)
+		}
+	case RelayModeEmbeddings:
+	case RelayModeModeration:
+		if textRequest.Input == "" {
+			return errorWrapper(errors.New("input is required"), "required_field_missing", http.StatusBadRequest)
+		}
+	}
 	baseURL := common.ChannelBaseURLs[channelType]
 	requestURL := c.Request.URL.String()
 	if c.GetString("base_url") != "" {
@@ -58,6 +78,7 @@ func relayTextHelper(c *gin.Context, relayMode int) *OpenAIErrorWithStatusCode {
 		return err
 	}
 	var promptTokens int
+	var completionTokens int
 	switch relayMode {
 	case RelayModeChatCompletions:
 		promptTokens = countTokenMessages(textRequest.Messages, textRequest.Model)
@@ -123,30 +144,40 @@ func relayTextHelper(c *gin.Context, relayMode int) *OpenAIErrorWithStatusCode {
 	defer func() {
 		if consumeQuota {
 			quota := 0
-			completionRatio := 1.34 // default for gpt-3
+			completionRatio := 1.333333 // default for gpt-3
 			if strings.HasPrefix(textRequest.Model, "gpt-4") {
 				completionRatio = 2
 			}
 			if isStream {
-				responseTokens := countTokenText(streamResponseText, textRequest.Model)
-				quota = promptTokens + int(float64(responseTokens)*completionRatio)
+				completionTokens = countTokenText(streamResponseText, textRequest.Model)
 			} else {
-				quota = textResponse.Usage.PromptTokens + int(float64(textResponse.Usage.CompletionTokens)*completionRatio)
+				promptTokens = textResponse.Usage.PromptTokens
+				completionTokens = textResponse.Usage.CompletionTokens
 			}
+			quota = promptTokens + int(float64(completionTokens)*completionRatio)
 			quota = int(float64(quota) * ratio)
 			if ratio != 0 && quota <= 0 {
 				quota = 1
 			}
+			totalTokens := promptTokens + completionTokens
+			if totalTokens == 0 {
+				// in this case, must be some error happened
+				// we cannot just return, because we may have to return the pre-consumed quota
+				quota = 0
+			}
 			quotaDelta := quota - preConsumedQuota
 			err := model.PostConsumeTokenQuota(tokenId, quotaDelta)
 			if err != nil {
 				common.SysError("error consuming token remain quota: " + err.Error())
 			}
-			tokenName := c.GetString("token_name")
-			model.RecordLog(userId, model.LogTypeConsume, fmt.Sprintf("通过令牌「%s」使用模型 %s 消耗 %s（模型倍率 %.2f，分组倍率 %.2f）", tokenName, textRequest.Model, common.LogQuota(quota), modelRatio, groupRatio))
-			model.UpdateUserUsedQuotaAndRequestCount(userId, quota)
-			channelId := c.GetInt("channel_id")
-			model.UpdateChannelUsedQuota(channelId, quota)
+			if quota != 0 {
+				tokenName := c.GetString("token_name")
+				logContent := fmt.Sprintf("模型倍率 %.2f，分组倍率 %.2f", modelRatio, groupRatio)
+				model.RecordConsumeLog(userId, promptTokens, completionTokens, textRequest.Model, tokenName, quota, logContent)
+				model.UpdateUserUsedQuotaAndRequestCount(userId, quota)
+				channelId := c.GetInt("channel_id")
+				model.UpdateChannelUsedQuota(channelId, quota)
+			}
 		}
 	}()
 

i18n/en.json

@@ -366,12 +366,12 @@
   "添加新的用户": "Add New User",
   "自定义": "Custom",
   "等价金额": "Equivalent Amount",
-  "错误": "Error",
-  "错误：未登录或登录已过期，请重新登录": "Error: Not logged in or login has expired, please log in again",
-  "错误：请求次数过多，请稍后再试": "Error: Too many requests, please try again later",
-  "错误：服务器内部错误，请联系管理员": "Error: Server internal error, please contact the administrator",
+  "未登录或登录已过期，请重新登录": "Not logged in or login has expired, please log in again",
+  "请求次数过多，请稍后再试": "Too many requests, please try again later",
+  "服务器内部错误，请联系管理员": "Server internal error, please contact the administrator",
   "本站仅作演示之用，无服务端": "This site is for demonstration purposes only, no server-side",
-  "错误：": "Error:",
+  "超级管理员未设置充值链接！": "Super administrator has not set the recharge link!",
+  "错误：": "Error: ",
   "新版本可用：${data.version}，请使用快捷键 Shift + F5 刷新页面": "New version available: ${data.version}, please refresh the page using shortcut Shift + F5",
   "无法正常连接至服务器": "Unable to connect to the server normally",
   "管理渠道": "Manage Channels",
@@ -384,7 +384,7 @@
   "系统配置": "System Configuration",
   "系统配置总览": "System Configuration Overview",
   "邮箱验证": "Email Verification",
-  "未": "Not ",
+  "未启用": "Not Enabled",
   "GitHub 身份验证": "GitHub Authentication",
   "微信身份验证": "WeChat Authentication",
   "Turnstile 用户校验": "Turnstile User Verification",
@@ -411,9 +411,50 @@
   "其他设置": "Other Settings",
   "项目仓库地址": "Project Repository Address",
   "可在设置页面设置关于内容，支持 HTML & Markdown": "You can set the content about in the settings page, support HTML & Markdown",
-  "由{' '}": "build by{' '}",
+  "由{' '}": "built by{' '}",
   "构建，源代码遵循{' '}": ", the source code licensed under{' '}",
   "MIT 协议": "MIT License",
   "充值额度": "Recharge Quota",
-  "获取兑换码": "Get Redeem Code"
-}
+  "获取兑换码": "Get Redeem Code",
+  "一个月后过期": "Expires after one month",
+  "一天后过期": "Expires after one day",
+  "一小时后过期": "Expires after one hour",
+  "一分钟后过期": "Expires after one minute",
+  "创建新的令牌": "Create New Token",
+  "注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note that the quota of the token is only used to limit the maximum quota usage of the token itself, and the actual usage is limited by the remaining quota of the account.",
+  "设置为无限额度": "Set to unlimited quota",
+  "更新令牌信息": "Update Token Information",
+  "请输入充值码！": "Please enter the recharge code!",
+  "请输入名称": "Please enter a name",
+  "请输入密钥，一行一个": "Please enter the key, one per line",
+  "请输入额度": "Please enter the quota",
+  "令牌创建成功": "Token created successfully",
+  "令牌更新成功": "Token updated successfully",
+  "充值成功！": "Recharge successful!",
+  "更新用户信息": "Update User Information",
+  "请输入新的用户名": "Please enter a new username",
+  "密码": "Password",
+  "请输入新的密码": "Please enter a new password",
+  "显示名称": "Display Name",
+  "请输入新的显示名称": "Please enter a new display name",
+  "已绑定的 GitHub 账户": "GitHub Account Bound",
+  "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改": "This item is read-only. Users need to bind through the relevant binding button on the personal settings page, and cannot be modified directly",
+  "已绑定的微信账户": "WeChat Account Bound",
+  "已绑定的邮箱账户": "Email Account Bound",
+  "用户信息更新成功！": "User information updated successfully!",
+  "模型倍率 %.2f，分组倍率 %.2f": "model rate %.2f, group rate %.2f",
+  "使用明细（总消耗额度：{renderQuota(stat.quota)}）": "Usage Details (Total Consumption Quota: {renderQuota(stat.quota)})",
+  "用户名称": "User Name",
+  "令牌名称": "Token Name",
+  "留空则查询全部用户": "Leave blank to query all users",
+  "留空则查询全部令牌": "Leave blank to query all tokens",
+  "模型名称": "Model Name",
+  "留空则查询全部模型": "Leave blank to query all models",
+  "起始时间": "Start Time",
+  "结束时间": "End Time",
+  "查询": "Query",
+  "提示": "Prompt",
+  "补全": "Completion",
+  "消耗额度": "Used Quota",
+  "可选值": "Optional Values"
+}

model/log.go

@@ -6,11 +6,17 @@ import (
 )
 
 type Log struct {
-	Id        int    `json:"id"`
-	UserId    int    `json:"user_id" gorm:"index"`
-	CreatedAt int64  `json:"created_at" gorm:"bigint"`
-	Type      int    `json:"type" gorm:"index"`
-	Content   string `json:"content"`
+	Id               int    `json:"id"`
+	UserId           int    `json:"user_id"`
+	CreatedAt        int64  `json:"created_at" gorm:"bigint;index"`
+	Type             int    `json:"type" gorm:"index"`
+	Content          string `json:"content"`
+	Username         string `json:"username" gorm:"index;default:''"`
+	TokenName        string `json:"token_name" gorm:"index;default:''"`
+	ModelName        string `json:"model_name" gorm:"index;default:''"`
+	Quota            int    `json:"quota" gorm:"default:0"`
+	PromptTokens     int    `json:"prompt_tokens" gorm:"default:0"`
+	CompletionTokens int    `json:"completion_tokens" gorm:"default:0"`
 }
 
 const (
@@ -27,6 +33,7 @@ func RecordLog(userId int, logType int, content string) {
 	}
 	log := &Log{
 		UserId:    userId,
+		Username:  GetUsernameById(userId),
 		CreatedAt: common.GetTimestamp(),
 		Type:      logType,
 		Content:   content,
@@ -37,24 +44,73 @@ func RecordLog(userId int, logType int, content string) {
 	}
 }
 
-func GetAllLogs(logType int, startIdx int, num int) (logs []*Log, err error) {
+func RecordConsumeLog(userId int, promptTokens int, completionTokens int, modelName string, tokenName string, quota int, content string) {
+	if !common.LogConsumeEnabled {
+		return
+	}
+	log := &Log{
+		UserId:           userId,
+		Username:         GetUsernameById(userId),
+		CreatedAt:        common.GetTimestamp(),
+		Type:             LogTypeConsume,
+		Content:          content,
+		PromptTokens:     promptTokens,
+		CompletionTokens: completionTokens,
+		TokenName:        tokenName,
+		ModelName:        modelName,
+		Quota:            quota,
+	}
+	err := DB.Create(log).Error
+	if err != nil {
+		common.SysError("failed to record log: " + err.Error())
+	}
+}
+
+func GetAllLogs(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string, startIdx int, num int) (logs []*Log, err error) {
 	var tx *gorm.DB
 	if logType == LogTypeUnknown {
 		tx = DB
 	} else {
 		tx = DB.Where("type = ?", logType)
 	}
+	if modelName != "" {
+		tx = tx.Where("model_name = ?", modelName)
+	}
+	if username != "" {
+		tx = tx.Where("username = ?", username)
+	}
+	if tokenName != "" {
+		tx = tx.Where("token_name = ?", tokenName)
+	}
+	if startTimestamp != 0 {
+		tx = tx.Where("created_at >= ?", startTimestamp)
+	}
+	if endTimestamp != 0 {
+		tx = tx.Where("created_at <= ?", endTimestamp)
+	}
 	err = tx.Order("id desc").Limit(num).Offset(startIdx).Find(&logs).Error
 	return logs, err
 }
 
-func GetUserLogs(userId int, logType int, startIdx int, num int) (logs []*Log, err error) {
+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)
 	} else {
 		tx = DB.Where("user_id = ? and type = ?", userId, logType)
 	}
+	if modelName != "" {
+		tx = tx.Where("model_name = ?", modelName)
+	}
+	if tokenName != "" {
+		tx = tx.Where("token_name = ?", tokenName)
+	}
+	if startTimestamp != 0 {
+		tx = tx.Where("created_at >= ?", startTimestamp)
+	}
+	if endTimestamp != 0 {
+		tx = tx.Where("created_at <= ?", endTimestamp)
+	}
 	err = tx.Order("id desc").Limit(num).Offset(startIdx).Omit("id").Find(&logs).Error
 	return logs, err
 }
@@ -68,3 +124,45 @@ func SearchUserLogs(userId int, keyword string) (logs []*Log, err error) {
 	err = DB.Where("user_id = ? and type = ?", userId, keyword).Order("id desc").Limit(common.MaxRecentItems).Omit("id").Find(&logs).Error
 	return logs, err
 }
+
+func SumUsedQuota(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string) (quota int) {
+	tx := DB.Table("logs").Select("sum(quota)")
+	if username != "" {
+		tx = tx.Where("username = ?", username)
+	}
+	if tokenName != "" {
+		tx = tx.Where("token_name = ?", tokenName)
+	}
+	if startTimestamp != 0 {
+		tx = tx.Where("created_at >= ?", startTimestamp)
+	}
+	if endTimestamp != 0 {
+		tx = tx.Where("created_at <= ?", endTimestamp)
+	}
+	if modelName != "" {
+		tx = tx.Where("model_name = ?", modelName)
+	}
+	tx.Where("type = ?", LogTypeConsume).Scan(&quota)
+	return quota
+}
+
+func SumUsedToken(logType int, startTimestamp int64, endTimestamp int64, modelName string, username string, tokenName string) (token int) {
+	tx := DB.Table("logs").Select("sum(prompt_tokens) + sum(completion_tokens)")
+	if username != "" {
+		tx = tx.Where("username = ?", username)
+	}
+	if tokenName != "" {
+		tx = tx.Where("token_name = ?", tokenName)
+	}
+	if startTimestamp != 0 {
+		tx = tx.Where("created_at >= ?", startTimestamp)
+	}
+	if endTimestamp != 0 {
+		tx = tx.Where("created_at <= ?", endTimestamp)
+	}
+	if modelName != "" {
+		tx = tx.Where("model_name = ?", modelName)
+	}
+	tx.Where("type = ?", LogTypeConsume).Scan(&token)
+	return token
+}

model/user.go

@@ -303,3 +303,8 @@ func UpdateUserUsedQuotaAndRequestCount(id int, quota int) {
 		common.SysError("failed to update user used quota and request count: " + err.Error())
 	}
 }
+
+func GetUsernameById(id int) (username string) {
+	DB.Model(&User{}).Where("id = ?", id).Select("username").Find(&username)
+	return username
+}

router/api-router.go

@@ -96,6 +96,8 @@ func SetApiRouter(router *gin.Engine) {
 		}
 		logRoute := apiRouter.Group("/log")
 		logRoute.GET("/", middleware.AdminAuth(), controller.GetAllLogs)
+		logRoute.GET("/stat", middleware.AdminAuth(), controller.GetLogsStat)
+		logRoute.GET("/self/stat", middleware.UserAuth(), controller.GetLogsSelfStat)
 		logRoute.GET("/search", middleware.AdminAuth(), controller.SearchAllLogs)
 		logRoute.GET("/self", middleware.UserAuth(), controller.GetUserLogs)
 		logRoute.GET("/self/search", middleware.UserAuth(), controller.SearchUserLogs)

web/src/components/LogsTable.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Label, Pagination, Select, Table } from 'semantic-ui-react';
+import { Button, Form, Header, Label, Pagination, Segment, Select, Table } from 'semantic-ui-react';
 import { API, isAdmin, showError, timestamp2string } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
+import { renderQuota } from '../helpers/render';
 
 function renderTimestamp(timestamp) {
   return (
@@ -14,7 +15,7 @@ function renderTimestamp(timestamp) {
 
 const MODE_OPTIONS = [
   { key: 'all', text: '全部用户', value: 'all' },
-  { key: 'self', text: '当前用户', value: 'self' },
+  { key: 'self', text: '当前用户', value: 'self' }
 ];
 
 const LOG_OPTIONS = [
@@ -47,13 +48,58 @@ const LogsTable = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [searching, setSearching] = useState(false);
   const [logType, setLogType] = useState(0);
-  const [mode, setMode] = useState('self'); // all, self
-  const showModePanel = isAdmin();
+  const isAdminUser = isAdmin();
+  let now = new Date();
+  const [inputs, setInputs] = useState({
+    username: '',
+    token_name: '',
+    model_name: '',
+    start_timestamp: timestamp2string(0),
+    end_timestamp: timestamp2string(now.getTime() / 1000 + 3600)
+  });
+  const { username, token_name, model_name, start_timestamp, end_timestamp } = inputs;
+
+  const [stat, setStat] = useState({
+    quota: 0,
+    token: 0
+  });
+
+  const handleInputChange = (e, { name, value }) => {
+    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}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setStat(data);
+    } else {
+      showError(message);
+    }
+  };
 
   const loadLogs = async (startIdx) => {
-    let url = `/api/log/self/?p=${startIdx}&type=${logType}`;
-    if (mode === 'all') {
-      url = `/api/log/?p=${startIdx}&type=${logType}`;
+    let url = '';
+    let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+    let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+    if (isAdminUser) {
+      url = `/api/log/?p=${startIdx}&type=${logType}&username=${username}&token_name=${token_name}&model_name=${model_name}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+    } else {
+      url = `/api/log/self/?p=${startIdx}&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;
@@ -61,7 +107,7 @@ const LogsTable = () => {
       if (startIdx === 0) {
         setLogs(data);
       } else {
-        let newLogs = logs;
+        let newLogs = [...logs];
         newLogs.push(...data);
         setLogs(newLogs);
       }
@@ -83,20 +129,18 @@ const LogsTable = () => {
 
   const refresh = async () => {
     setLoading(true);
+    setActivePage(1)
     await loadLogs(0);
+    if (isAdminUser) {
+      getLogStat().then();
+    } else {
+      getLogSelfStat().then();
+    }
   };
 
-  useEffect(() => {
-    loadLogs(0)
-      .then()
-      .catch((reason) => {
-        showError(reason);
-      });
-  }, []);
-
   useEffect(() => {
     refresh().then();
-  }, [mode, logType]);
+  }, [logType]);
 
   const searchLogs = async () => {
     if (searchKeyword === '') {
@@ -125,9 +169,17 @@ const LogsTable = () => {
     if (logs.length === 0) return;
     setLoading(true);
     let sortedLogs = [...logs];
-    sortedLogs.sort((a, b) => {
-      return ('' + a[key]).localeCompare(b[key]);
-    });
+    if (typeof sortedLogs[0][key] === 'string'){
+      sortedLogs.sort((a, b) => {
+        return ('' + a[key]).localeCompare(b[key]);
+      });
+    } else {
+      sortedLogs.sort((a, b) => {
+        if (a[key] === b[key]) return 0;
+        if (a[key] > b[key]) return -1;
+        if (a[key] < b[key]) return 1;
+      });
+    }
     if (sortedLogs[0].id === logs[0].id) {
       sortedLogs.reverse();
     }
@@ -137,118 +189,178 @@ const LogsTable = () => {
 
   return (
     <>
-      <Table basic>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                sortLog('created_time');
-              }}
-              width={3}
-            >
-              时间
-            </Table.HeaderCell>
+      <Segment>
+        <Header as='h3'>使用明细（总消耗额度：{renderQuota(stat.quota)}）</Header>
+        <Form>
+          <Form.Group>
             {
-              showModePanel && (
-                <Table.HeaderCell
+              isAdminUser && (
+                <Form.Input fluid label={'用户名称'} width={2} value={username}
+                            placeholder={'可选值'} name='username'
+                            onChange={handleInputChange} />
+              )
+            }
+            <Form.Input fluid label={'令牌名称'} width={isAdminUser ? 2 : 3} value={token_name}
+                        placeholder={'可选值'} name='token_name' onChange={handleInputChange} />
+            <Form.Input fluid label='模型名称' width={isAdminUser ? 2 : 3} value={model_name} placeholder='可选值'
+                        name='model_name'
+                        onChange={handleInputChange} />
+            <Form.Input fluid label='起始时间' width={4} value={start_timestamp} type='datetime-local'
+                        name='start_timestamp'
+                        onChange={handleInputChange} />
+            <Form.Input fluid label='结束时间' width={4} value={end_timestamp} type='datetime-local'
+                        name='end_timestamp'
+                        onChange={handleInputChange} />
+            <Form.Button fluid label='操作' width={2} onClick={refresh}>查询</Form.Button>
+          </Form.Group>
+        </Form>
+        <Table basic compact size='small'>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('created_time');
+                }}
+                width={3}
+              >
+                时间
+              </Table.HeaderCell>
+              {
+                isAdminUser && <Table.HeaderCell
                   style={{ cursor: 'pointer' }}
                   onClick={() => {
-                    sortLog('user_id');
+                    sortLog('username');
                   }}
                   width={1}
                 >
                   用户
                 </Table.HeaderCell>
-              )
-            }
-            <Table.HeaderCell
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                sortLog('type');
-              }}
-              width={2}
-            >
-              类型
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              style={{ cursor: 'pointer' }}
-              onClick={() => {
-                sortLog('content');
-              }}
-              width={showModePanel ? 10 : 11}
-            >
-              详情
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {logs
-            .slice(
-              (activePage - 1) * ITEMS_PER_PAGE,
-              activePage * ITEMS_PER_PAGE
-            )
-            .map((log, idx) => {
-              if (log.deleted) return <></>;
-              return (
-                <Table.Row key={log.created_at}>
-                  <Table.Cell>{renderTimestamp(log.created_at)}</Table.Cell>
-                  {
-                    showModePanel && (
-                      <Table.Cell><Label>{log.user_id}</Label></Table.Cell>
-                    )
-                  }
-                  <Table.Cell>{renderType(log.type)}</Table.Cell>
-                  <Table.Cell>{log.content}</Table.Cell>
-                </Table.Row>
-              );
-            })}
-        </Table.Body>
-
-        <Table.Footer>
-          <Table.Row>
-            <Table.HeaderCell colSpan={showModePanel ? '5' : '4'}>
-              {
-                showModePanel && (
-                  <Select
-                    placeholder='选择模式'
-                    options={MODE_OPTIONS}
-                    style={{ marginRight: '8px' }}
-                    name='mode'
-                    value={mode}
-                    onChange={(e, { name, value }) => {
-                      setMode(value);
-                    }}
-                  />
-                )
               }
-              <Select
-                placeholder='选择明细分类'
-                options={LOG_OPTIONS}
-                style={{ marginRight: '8px' }}
-                name='logType'
-                value={logType}
-                onChange={(e, { name, value }) => {
-                  setLogType(value);
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('token_name');
                 }}
-              />
-              <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
-              <Pagination
-                floated='right'
-                activePage={activePage}
-                onPageChange={onPaginationChange}
-                size='small'
-                siblingRange={1}
-                totalPages={
-                  Math.ceil(logs.length / ITEMS_PER_PAGE) +
-                  (logs.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
-                }
-              />
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Footer>
-      </Table>
+                width={1}
+              >
+                令牌
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('type');
+                }}
+                width={1}
+              >
+                类型
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('model_name');
+                }}
+                width={2}
+              >
+                模型
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('prompt_tokens');
+                }}
+                width={1}
+              >
+                提示
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('completion_tokens');
+                }}
+                width={1}
+              >
+                补全
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('quota');
+                }}
+                width={2}
+              >
+                消耗额度
+              </Table.HeaderCell>
+              <Table.HeaderCell
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  sortLog('content');
+                }}
+                width={isAdminUser ? 4 : 5}
+              >
+                详情
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {logs
+              .slice(
+                (activePage - 1) * ITEMS_PER_PAGE,
+                activePage * ITEMS_PER_PAGE
+              )
+              .map((log, idx) => {
+                if (log.deleted) return <></>;
+                return (
+                  <Table.Row key={log.created_at}>
+                    <Table.Cell>{renderTimestamp(log.created_at)}</Table.Cell>
+                    {
+                      isAdminUser && (
+                        <Table.Cell>{log.username ? <Label>{log.username}</Label> : ''}</Table.Cell>
+                      )
+                    }
+                    <Table.Cell>{log.token_name ? <Label basic>{log.token_name}</Label> : ''}</Table.Cell>
+                    <Table.Cell>{renderType(log.type)}</Table.Cell>
+                    <Table.Cell>{log.model_name ? <Label basic>{log.model_name}</Label> : ''}</Table.Cell>
+                    <Table.Cell>{log.prompt_tokens ? log.prompt_tokens : ''}</Table.Cell>
+                    <Table.Cell>{log.completion_tokens ? log.completion_tokens : ''}</Table.Cell>
+                    <Table.Cell>{log.quota ? renderQuota(log.quota, 6) : ''}</Table.Cell>
+                    <Table.Cell>{log.content}</Table.Cell>
+                  </Table.Row>
+                );
+              })}
+          </Table.Body>
+
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan={'9'}>
+                <Select
+                  placeholder='选择明细分类'
+                  options={LOG_OPTIONS}
+                  style={{ marginRight: '8px' }}
+                  name='logType'
+                  value={logType}
+                  onChange={(e, { name, value }) => {
+                    setLogType(value);
+                  }}
+                />
+                <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+                <Pagination
+                  floated='right'
+                  activePage={activePage}
+                  onPageChange={onPaginationChange}
+                  size='small'
+                  siblingRange={1}
+                  totalPages={
+                    Math.ceil(logs.length / ITEMS_PER_PAGE) +
+                    (logs.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                  }
+                />
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Segment>
     </>
   );
 };

web/src/pages/Log/index.js

@@ -4,10 +4,7 @@ import LogsTable from '../../components/LogsTable';
 
 const Token = () => (
   <>
-    <Segment>
-      <Header as='h3'>额度明细</Header>
-      <LogsTable />
-    </Segment>
+    <LogsTable />
   </>
 );