refactor: Enhance UI layout and styling with responsive design improvements

style: Enhance LogsTable header tags with improved styling and visual hierarchy
refactor: Make Channel Setting nullable and improve setting handling #836
2026-04-05 21:47:00 +00:00 · 2025-03-10 03:25:02 +08:00 · 2025-03-10 00:34:24 +08:00 · 2025-03-09 23:42:48 +08:00 · 2025-03-09 21:24:19 +08:00 · 2025-03-09 21:23:33 +08:00
31 changed files with 1154 additions and 353 deletions
--- a/README.en.md
+++ b/README.en.md
@@ -65,6 +65,14 @@
    - Add suffix `-low` to set low reasoning effort
 17. 🔄 Thinking to content option `thinking_to_content` in `Channel->Edit->Channel Extra Settings`, default is `false`, when `true`, the `reasoning_content` of the thinking content will be converted to `<think>` tags and concatenated to the content returned.
 18. 🔄 Model rate limit, support setting total request limit and successful request limit in `System Settings->Rate Limit Settings`
+19. 💰 Cache billing support, when enabled can charge a configurable ratio for cache hits:
+    1. Set `Prompt Cache Ratio` in `System Settings -> Operation Settings`
+    2. Set `Prompt Cache Ratio` in channel settings, range 0-1 (e.g., 0.5 means 50% charge on cache hits)
+    3. Supported channels:
+        - [x] OpenAI
+        - [x] Azure 
+        - [x] DeepSeek
+        - [ ] Claude

 ## Model Support
 This version additionally supports:
--- a/README.md
+++ b/README.md
@@ -74,6 +74,14 @@
        - 添加后缀 `-thinking` 启用思考模式 (例如: `claude-3-7-sonnet-20250219-thinking`)
 18. 🔄 思考转内容，支持在 `渠道-编辑-渠道额外设置` 中设置 `thinking_to_content` 选项，默认`false`，开启后会将思考内容`reasoning_content`转换为`<think>`标签拼接到内容中返回。
 19. 🔄 模型限流，支持在 `系统设置-速率限制设置` 中设置模型限流，支持设置总请求数限制和成功请求数限制
+20. 💰 缓存计费支持，开启后可以在缓存命中时按照设定的比例计费：
+    1. 在 `系统设置-运营设置` 中设置 `提示缓存倍率` 选项
+    2. 在渠道中设置 `提示缓存倍率`，范围 0-1，例如设置为 0.5 表示缓存命中时按照 50% 计费
+    3. 支持的渠道：
+        - [x] OpenAI
+        - [x] Azure
+        - [x] DeepSeek
+        - [ ] Claude

 ## 模型支持
 此版本额外支持以下模型：
--- a/common/constants.go
+++ b/common/constants.go
@@ -15,8 +15,9 @@ var SystemName = "New API"
 var Footer = ""
 var Logo = ""
 var TopUpLink = ""
-var ChatLink = ""
-var ChatLink2 = ""
+
+// var ChatLink = ""
+// var ChatLink2 = ""
 var QuotaPerUnit = 500 * 1000.0 // $0.002 / 1K tokens
 var DisplayInCurrencyEnabled = true
 var DisplayTokenStatEnabled = true
--- a/controller/channel-test.go
+++ b/controller/channel-test.go
@@ -83,6 +83,8 @@ func testChannel(channel *model.Channel, testModel string) (err error, openAIErr
 	c.Request.Header.Set("Content-Type", "application/json")
 	c.Set("channel", channel.Type)
 	c.Set("base_url", channel.GetBaseURL())
+	group, _ := model.GetUserGroup(1, false)
+	c.Set("group", group)

 	middleware.SetupContextForSelectedChannel(c, channel, testModel)

@@ -158,7 +160,8 @@ func testChannel(channel *model.Channel, testModel string) (err error, openAIErr
 	tok := time.Now()
 	milliseconds := tok.Sub(tik).Milliseconds()
 	consumedTime := float64(milliseconds) / 1000.0
-	other := service.GenerateTextOtherInfo(c, info, priceData.ModelRatio, priceData.GroupRatio, priceData.CompletionRatio, 0, 0.0, priceData.ModelPrice)
+	other := service.GenerateTextOtherInfo(c, info, priceData.ModelRatio, priceData.GroupRatio, priceData.CompletionRatio,
+		usage.PromptTokensDetails.CachedTokens, priceData.CacheRatio, priceData.ModelPrice)
 	model.RecordConsumeLog(c, 1, channel.Id, usage.PromptTokens, usage.CompletionTokens, info.OriginModelName, "模型测试",
 		quota, "模型测试", 0, quota, int(consumedTime), false, info.Group, other)
 	common.SysLog(fmt.Sprintf("testing channel #%d, response: \n%s", channel.Id, string(respBody)))
@@ -172,10 +175,10 @@ func buildTestRequest(model string) *dto.GeneralOpenAIRequest {
 	}

 	// 先判断是否为 Embedding 模型
-	if strings.Contains(strings.ToLower(model), "embedding") ||
+	if strings.Contains(strings.ToLower(model), "embedding") || // 其他 embedding 模型
 		strings.HasPrefix(model, "m3e") || // m3e 系列模型
-		strings.Contains(model, "bge-") || // bge 系列模型
-		model == "text-embedding-v1" { // 其他 embedding 模型
+		strings.Contains(model, "bge-") {
+		testRequest.Model = model
 		// Embedding 请求
 		testRequest.Input = []string{"hello world"}
 		return testRequest
@@ -183,6 +186,8 @@ func buildTestRequest(model string) *dto.GeneralOpenAIRequest {
 	// 并非Embedding 模型
 	if strings.HasPrefix(model, "o1") || strings.HasPrefix(model, "o3") {
 		testRequest.MaxCompletionTokens = 10
+	} else if strings.Contains(model, "thinking") {
+		testRequest.MaxTokens = 50
 	} else {
 		testRequest.MaxTokens = 10
 	}
--- a/controller/misc.go
+++ b/controller/misc.go
@@ -54,8 +54,7 @@ func GetStatus(c *gin.Context) {
 			"turnstile_check":          common.TurnstileCheckEnabled,
 			"turnstile_site_key":       common.TurnstileSiteKey,
 			"top_up_link":              common.TopUpLink,
-			"chat_link":                common.ChatLink,
-			"chat_link2":               common.ChatLink2,
+			"docs_link":                operation_setting.GetGeneralSetting().DocsLink,
 			"quota_per_unit":           common.QuotaPerUnit,
 			"display_in_currency":      common.DisplayInCurrencyEnabled,
 			"enable_batch_update":      common.BatchUpdateEnabled,
--- a/controller/topup.go
+++ b/controller/topup.go
@@ -2,9 +2,6 @@ package controller

 import (
 	"fmt"
-	"github.com/Calcium-Ion/go-epay/epay"
-	"github.com/gin-gonic/gin"
-	"github.com/samber/lo"
 	"log"
 	"net/url"
 	"one-api/common"
@@ -14,16 +11,21 @@ import (
 	"strconv"
 	"sync"
 	"time"
+
+	"github.com/Calcium-Ion/go-epay/epay"
+	"github.com/gin-gonic/gin"
+	"github.com/samber/lo"
+	"github.com/shopspring/decimal"
 )

 type EpayRequest struct {
-	Amount        int    `json:"amount"`
+	Amount        int64  `json:"amount"`
 	PaymentMethod string `json:"payment_method"`
 	TopUpCode     string `json:"top_up_code"`
 }

 type AmountRequest struct {
-	Amount    int    `json:"amount"`
+	Amount    int64  `json:"amount"`
 	TopUpCode string `json:"top_up_code"`
 }

@@ -41,25 +43,35 @@ func GetEpayClient() *epay.Client {
 	return withUrl
 }

-func getPayMoney(amount float64, group string) float64 {
+func getPayMoney(amount int64, group string) float64 {
+	dAmount := decimal.NewFromInt(amount)
+
 	if !common.DisplayInCurrencyEnabled {
-		amount = amount / common.QuotaPerUnit
+		dQuotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+		dAmount = dAmount.Div(dQuotaPerUnit)
 	}
-	// 别问为什么用float64，问就是这么点钱没必要
+
 	topupGroupRatio := common.GetTopupGroupRatio(group)
 	if topupGroupRatio == 0 {
 		topupGroupRatio = 1
 	}
-	payMoney := amount * setting.Price * topupGroupRatio
-	return payMoney
+
+	dTopupGroupRatio := decimal.NewFromFloat(topupGroupRatio)
+	dPrice := decimal.NewFromFloat(setting.Price)
+
+	payMoney := dAmount.Mul(dPrice).Mul(dTopupGroupRatio)
+
+	return payMoney.InexactFloat64()
 }

-func getMinTopup() int {
+func getMinTopup() int64 {
 	minTopup := setting.MinTopUp
 	if !common.DisplayInCurrencyEnabled {
-		minTopup = minTopup * int(common.QuotaPerUnit)
+		dMinTopup := decimal.NewFromInt(int64(minTopup))
+		dQuotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+		minTopup = int(dMinTopup.Mul(dQuotaPerUnit).IntPart())
 	}
-	return minTopup
+	return int64(minTopup)
 }

 func RequestEpay(c *gin.Context) {
@@ -80,7 +92,7 @@ func RequestEpay(c *gin.Context) {
 		c.JSON(200, gin.H{"message": "error", "data": "获取用户分组失败"})
 		return
 	}
-	payMoney := getPayMoney(float64(req.Amount), group)
+	payMoney := getPayMoney(req.Amount, group)
 	if payMoney < 0.01 {
 		c.JSON(200, gin.H{"message": "error", "data": "充值金额过低"})
 		return
@@ -118,7 +130,9 @@ func RequestEpay(c *gin.Context) {
 	}
 	amount := req.Amount
 	if !common.DisplayInCurrencyEnabled {
-		amount = amount / int(common.QuotaPerUnit)
+		dAmount := decimal.NewFromInt(int64(amount))
+		dQuotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+		amount = dAmount.Div(dQuotaPerUnit).IntPart()
 	}
 	topUp := &model.TopUp{
 		UserId:     id,
@@ -210,13 +224,16 @@ func EpayNotify(c *gin.Context) {
 			}
 			//user, _ := model.GetUserById(topUp.UserId, false)
 			//user.Quota += topUp.Amount * 500000
-			err = model.IncreaseUserQuota(topUp.UserId, topUp.Amount*int(common.QuotaPerUnit), true)
+			dAmount := decimal.NewFromInt(int64(topUp.Amount))
+			dQuotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+			quotaToAdd := int(dAmount.Mul(dQuotaPerUnit).IntPart())
+			err = model.IncreaseUserQuota(topUp.UserId, quotaToAdd, true)
 			if err != nil {
 				log.Printf("易支付回调更新用户失败: %v", topUp)
 				return
 			}
 			log.Printf("易支付回调更新用户成功 %v", topUp)
-			model.RecordLog(topUp.UserId, model.LogTypeTopup, fmt.Sprintf("使用在线充值成功，充值金额: %v，支付金额：%f", common.LogQuota(topUp.Amount*int(common.QuotaPerUnit)), topUp.Money))
+			model.RecordLog(topUp.UserId, model.LogTypeTopup, fmt.Sprintf("使用在线充值成功，充值金额: %v，支付金额：%f", common.LogQuota(quotaToAdd), topUp.Money))
 		}
 	} else {
 		log.Printf("易支付异常回调: %v", verifyInfo)
@@ -241,7 +258,7 @@ func RequestAmount(c *gin.Context) {
 		c.JSON(200, gin.H{"message": "error", "data": "获取用户分组失败"})
 		return
 	}
-	payMoney := getPayMoney(float64(req.Amount), group)
+	payMoney := getPayMoney(req.Amount, group)
 	if payMoney <= 0.01 {
 		c.JSON(200, gin.H{"message": "error", "data": "充值金额过低"})
 		return
--- a/dto/openai_response.go
+++ b/dto/openai_response.go
@@ -166,6 +166,7 @@ type Usage struct {
 	PromptTokens           int                `json:"prompt_tokens"`
 	CompletionTokens       int                `json:"completion_tokens"`
 	TotalTokens            int                `json:"total_tokens"`
+	PromptCacheHitTokens   int                `json:"prompt_cache_hit_tokens,omitempty"`
 	PromptTokensDetails    InputTokenDetails  `json:"prompt_tokens_details"`
 	CompletionTokenDetails OutputTokenDetails `json:"completion_tokens_details"`
 }
--- a/go.mod
+++ b/go.mod
@@ -22,12 +22,12 @@ require (
 	github.com/golang-jwt/jwt v3.2.2+incompatible
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/websocket v1.5.0
-	github.com/jinzhu/copier v0.4.0
 	github.com/joho/godotenv v1.5.1
 	github.com/pkg/errors v0.9.1
 	github.com/pkoukk/tiktoken-go v0.1.7
 	github.com/samber/lo v1.39.0
 	github.com/shirou/gopsutil v3.21.11+incompatible
+	github.com/shopspring/decimal v1.4.0
 	golang.org/x/crypto v0.27.0
 	golang.org/x/image v0.23.0
 	golang.org/x/net v0.28.0
--- a/go.sum
+++ b/go.sum
@@ -117,8 +117,6 @@ github.com/jackc/pgx/v5 v5.7.1 h1:x7SYsPBYDkHDksogeSmZZ5xzThcTgRz++I5E+ePFUcs=
 github.com/jackc/pgx/v5 v5.7.1/go.mod h1:e7O26IywZZ+naJtWWos6i6fvWK+29etgITqrqHLfoZA=
 github.com/jackc/puddle/v2 v2.2.2 h1:PR8nw+E/1w0GLuRFSmiioY6UooMp6KJv0/61nB7icHo=
 github.com/jackc/puddle/v2 v2.2.2/go.mod h1:vriiEXHvEE654aYKXXjOvZM39qJ0q+azkZFrfEOc3H4=
-github.com/jinzhu/copier v0.4.0 h1:w3ciUoD19shMCRargcpm0cm91ytaBhDvuRpz1ODO/U8=
-github.com/jinzhu/copier v0.4.0/go.mod h1:DfbEm0FYsaqBcKcFuvmOZb218JkPGtvSHsKg8S8hyyg=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.4/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
@@ -183,6 +181,8 @@ github.com/samber/lo v1.39.0 h1:4gTz1wUhNYLhFSKl6O+8peW0v2F4BCY034GRpU9WnuA=
 github.com/samber/lo v1.39.0/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
 github.com/shirou/gopsutil v3.21.11+incompatible h1:+1+c1VGhc88SSonWP6foOcLhvnKlUeu/erjjvaPEYiI=
 github.com/shirou/gopsutil v3.21.11+incompatible/go.mod h1:5b4v6he4MtMOwMlS0TUMTu2PcXUg8+E1lC7eC3UO/RA=
+github.com/shopspring/decimal v1.4.0 h1:bxl37RwXBklmTi0C79JfXCEBD1cqqHt0bbgBAGFp81k=
+github.com/shopspring/decimal v1.4.0/go.mod h1:gawqmDU56v4yIKSwfBSFip1HdCCXN8/+DMd9qYNcwME=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
--- a/model/channel.go
+++ b/model/channel.go
@@ -35,7 +35,7 @@ type Channel struct {
 	AutoBan           *int    `json:"auto_ban" gorm:"default:1"`
 	OtherInfo         string  `json:"other_info"`
 	Tag               *string `json:"tag" gorm:"index"`
-	Setting           string  `json:"setting" gorm:"type:text"`
+	Setting           *string `json:"setting" gorm:"type:text"`
 }

 func (channel *Channel) GetModels() []string {
@@ -493,8 +493,8 @@ func SearchTags(keyword string, group string, model string, idSort bool) ([]*str

 func (channel *Channel) GetSetting() map[string]interface{} {
 	setting := make(map[string]interface{})
-	if channel.Setting != "" {
-		err := json.Unmarshal([]byte(channel.Setting), &setting)
+	if channel.Setting != nil && *channel.Setting != "" {
+		err := json.Unmarshal([]byte(*channel.Setting), &setting)
 		if err != nil {
 			common.SysError("failed to unmarshal setting: " + err.Error())
 		}
@@ -508,7 +508,7 @@ func (channel *Channel) SetSetting(setting map[string]interface{}) {
 		common.SysError("failed to marshal setting: " + err.Error())
 		return
 	}
-	channel.Setting = string(settingBytes)
+	channel.Setting = common.GetPointer[string](string(settingBytes))
 }

 func GetChannelsByIds(ids []int) ([]*Channel, error) {
--- a/model/option.go
+++ b/model/option.go
@@ -99,8 +99,8 @@ func InitOptionMap() {
 	common.OptionMap["UserUsableGroups"] = setting.UserUsableGroups2JSONString()
 	common.OptionMap["CompletionRatio"] = operation_setting.CompletionRatio2JSONString()
 	common.OptionMap["TopUpLink"] = common.TopUpLink
-	common.OptionMap["ChatLink"] = common.ChatLink
-	common.OptionMap["ChatLink2"] = common.ChatLink2
+	//common.OptionMap["ChatLink"] = common.ChatLink
+	//common.OptionMap["ChatLink2"] = common.ChatLink2
 	common.OptionMap["QuotaPerUnit"] = strconv.FormatFloat(common.QuotaPerUnit, 'f', -1, 64)
 	common.OptionMap["RetryTimes"] = strconv.Itoa(common.RetryTimes)
 	common.OptionMap["DataExportInterval"] = strconv.Itoa(common.DataExportInterval)
@@ -358,10 +358,10 @@ func updateOptionMap(key string, value string) (err error) {
 		err = operation_setting.UpdateCacheRatioByJSONString(value)
 	case "TopUpLink":
 		common.TopUpLink = value
-	case "ChatLink":
-		common.ChatLink = value
-	case "ChatLink2":
-		common.ChatLink2 = value
+	//case "ChatLink":
+	//	common.ChatLink = value
+	//case "ChatLink2":
+	//	common.ChatLink2 = value
 	case "ChannelDisableThreshold":
 		common.ChannelDisableThreshold, _ = strconv.ParseFloat(value, 64)
 	case "QuotaPerUnit":
--- a/model/topup.go
+++ b/model/topup.go
@@ -3,7 +3,7 @@ package model
 type TopUp struct {
 	Id         int     `json:"id"`
 	UserId     int     `json:"user_id" gorm:"index"`
-	Amount     int     `json:"amount"`
+	Amount     int64   `json:"amount"`
 	Money      float64 `json:"money"`
 	TradeNo    string  `json:"trade_no"`
 	CreateTime int64   `json:"create_time"`
--- a/relay/channel/openai/relay-openai.go
+++ b/relay/channel/openai/relay-openai.go
@@ -254,6 +254,12 @@ func OaiStreamHandler(c *gin.Context, resp *http.Response, info *relaycommon.Rel
 	if !containStreamUsage {
 		usage, _ = service.ResponseText2Usage(responseTextBuilder.String(), info.UpstreamModelName, info.PromptTokens)
 		usage.CompletionTokens += toolCount * 7
+	} else {
+		if info.ChannelType == common.ChannelTypeDeepSeek {
+			if usage.PromptCacheHitTokens != 0 {
+				usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
+			}
+		}
 	}

 	if info.ShouldIncludeUsage && !containStreamUsage {
--- a/relay/relay-text.go
+++ b/relay/relay-text.go
@@ -5,7 +5,6 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"github.com/bytedance/gopkg/util/gopool"
 	"io"
 	"math"
 	"net/http"
@@ -21,6 +20,9 @@ import (
 	"strings"
 	"time"

+	"github.com/bytedance/gopkg/util/gopool"
+	"github.com/shopspring/decimal"
+
 	"github.com/gin-gonic/gin"
 )

@@ -315,24 +317,42 @@ func postConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 	tokenName := ctx.GetString("token_name")
 	completionRatio := priceData.CompletionRatio
 	cacheRatio := priceData.CacheRatio
-	ratio := priceData.ModelRatio * priceData.GroupRatio
 	modelRatio := priceData.ModelRatio
 	groupRatio := priceData.GroupRatio
 	modelPrice := priceData.ModelPrice

-	quota := 0
+	// Convert values to decimal for precise calculation
+	dPromptTokens := decimal.NewFromInt(int64(promptTokens))
+	dCacheTokens := decimal.NewFromInt(int64(cacheTokens))
+	dCompletionTokens := decimal.NewFromInt(int64(completionTokens))
+	dCompletionRatio := decimal.NewFromFloat(completionRatio)
+	dCacheRatio := decimal.NewFromFloat(cacheRatio)
+	dModelRatio := decimal.NewFromFloat(modelRatio)
+	dGroupRatio := decimal.NewFromFloat(groupRatio)
+	dModelPrice := decimal.NewFromFloat(modelPrice)
+	dQuotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+
+	ratio := dModelRatio.Mul(dGroupRatio)
+
+	var quotaCalculateDecimal decimal.Decimal
 	if !priceData.UsePrice {
-		quota = (promptTokens - cacheTokens) + int(math.Round(float64(cacheTokens)*cacheRatio))
-		quota += int(math.Round(float64(completionTokens) * completionRatio))
-		quota = int(math.Round(float64(quota) * ratio))
-		if ratio != 0 && quota <= 0 {
-			quota = 1
+		nonCachedTokens := dPromptTokens.Sub(dCacheTokens)
+		cachedTokensWithRatio := dCacheTokens.Mul(dCacheRatio)
+		promptQuota := nonCachedTokens.Add(cachedTokensWithRatio)
+		completionQuota := dCompletionTokens.Mul(dCompletionRatio)
+
+		quotaCalculateDecimal = promptQuota.Add(completionQuota).Mul(ratio)
+
+		if !ratio.IsZero() && quotaCalculateDecimal.LessThanOrEqual(decimal.Zero) {
+			quotaCalculateDecimal = decimal.NewFromInt(1)
 		}
 	} else {
-		quota = int(modelPrice * common.QuotaPerUnit * groupRatio)
+		quotaCalculateDecimal = dModelPrice.Mul(dQuotaPerUnit).Mul(dGroupRatio)
 	}
+
+	quota := int(quotaCalculateDecimal.Round(0).IntPart())
 	totalTokens := promptTokens + completionTokens
-	
+
 	var logContent string
 	if !priceData.UsePrice {
 		logContent = fmt.Sprintf("模型倍率 %.2f，补全倍率 %.2f，分组倍率 %.2f", modelRatio, completionRatio, groupRatio)
@@ -349,9 +369,6 @@ func postConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 		common.LogError(ctx, fmt.Sprintf("total tokens is 0, cannot consume quota, userId %d, channelId %d, "+
 			"tokenId %d, model %s， pre-consumed quota %d", relayInfo.UserId, relayInfo.ChannelId, relayInfo.TokenId, modelName, preConsumedQuota))
 	} else {
-		//if sensitiveResp != nil {
-		//	logContent += fmt.Sprintf("，敏感词：%s", strings.Join(sensitiveResp.SensitiveWords, ", "))
-		//}
 		quotaDelta := quota - preConsumedQuota
 		if quotaDelta != 0 {
 			err := service.PostConsumeQuota(relayInfo, quotaDelta, preConsumedQuota, true)
@@ -378,8 +395,4 @@ func postConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 	other := service.GenerateTextOtherInfo(ctx, relayInfo, modelRatio, groupRatio, completionRatio, cacheTokens, cacheRatio, modelPrice)
 	model.RecordConsumeLog(ctx, relayInfo.UserId, relayInfo.ChannelId, promptTokens, completionTokens, logModel,
 		tokenName, quota, logContent, relayInfo.TokenId, userQuota, int(useTimeSeconds), relayInfo.IsStream, relayInfo.Group, other)
-
-	//if quota != 0 {
-	//
-	//}
 }
--- a/service/quota.go
+++ b/service/quota.go
@@ -3,8 +3,6 @@ package service
 import (
 	"errors"
 	"fmt"
-	"github.com/bytedance/gopkg/util/gopool"
-	"math"
 	"one-api/common"
 	constant2 "one-api/constant"
 	"one-api/dto"
@@ -16,7 +14,10 @@ import (
 	"strings"
 	"time"

+	"github.com/bytedance/gopkg/util/gopool"
+
 	"github.com/gin-gonic/gin"
+	"github.com/shopspring/decimal"
 )

 type TokenDetails struct {
@@ -36,24 +37,41 @@ type QuotaInfo struct {

 func calculateAudioQuota(info QuotaInfo) int {
 	if info.UsePrice {
-		return int(info.ModelPrice * common.QuotaPerUnit * info.GroupRatio)
+		modelPrice := decimal.NewFromFloat(info.ModelPrice)
+		quotaPerUnit := decimal.NewFromFloat(common.QuotaPerUnit)
+		groupRatio := decimal.NewFromFloat(info.GroupRatio)
+
+		quota := modelPrice.Mul(quotaPerUnit).Mul(groupRatio)
+		return int(quota.IntPart())
 	}

-	completionRatio := operation_setting.GetCompletionRatio(info.ModelName)
-	audioRatio := operation_setting.GetAudioRatio(info.ModelName)
-	audioCompletionRatio := operation_setting.GetAudioCompletionRatio(info.ModelName)
-	ratio := info.GroupRatio * info.ModelRatio
+	completionRatio := decimal.NewFromFloat(operation_setting.GetCompletionRatio(info.ModelName))
+	audioRatio := decimal.NewFromFloat(operation_setting.GetAudioRatio(info.ModelName))
+	audioCompletionRatio := decimal.NewFromFloat(operation_setting.GetAudioCompletionRatio(info.ModelName))

-	quota := info.InputDetails.TextTokens + int(math.Round(float64(info.OutputDetails.TextTokens)*completionRatio))
-	quota += int(math.Round(float64(info.InputDetails.AudioTokens)*audioRatio)) +
-		int(math.Round(float64(info.OutputDetails.AudioTokens)*audioRatio*audioCompletionRatio))
+	groupRatio := decimal.NewFromFloat(info.GroupRatio)
+	modelRatio := decimal.NewFromFloat(info.ModelRatio)
+	ratio := groupRatio.Mul(modelRatio)

-	quota = int(math.Round(float64(quota) * ratio))
-	if ratio != 0 && quota <= 0 {
-		quota = 1
+	inputTextTokens := decimal.NewFromInt(int64(info.InputDetails.TextTokens))
+	outputTextTokens := decimal.NewFromInt(int64(info.OutputDetails.TextTokens))
+	inputAudioTokens := decimal.NewFromInt(int64(info.InputDetails.AudioTokens))
+	outputAudioTokens := decimal.NewFromInt(int64(info.OutputDetails.AudioTokens))
+
+	quota := decimal.Zero
+	quota = quota.Add(inputTextTokens)
+	quota = quota.Add(outputTextTokens.Mul(completionRatio))
+	quota = quota.Add(inputAudioTokens.Mul(audioRatio))
+	quota = quota.Add(outputAudioTokens.Mul(audioRatio).Mul(audioCompletionRatio))
+
+	quota = quota.Mul(ratio)
+
+	// If ratio is not zero and quota is less than or equal to zero, set quota to 1
+	if !ratio.IsZero() && quota.LessThanOrEqual(decimal.Zero) {
+		quota = decimal.NewFromInt(1)
 	}

-	return quota
+	return int(quota.Round(0).IntPart())
 }

 func PreWssConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo, usage *dto.RealtimeUsage) error {
@@ -123,9 +141,9 @@ func PostWssConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo, mod
 	audioOutTokens := usage.OutputTokenDetails.AudioTokens

 	tokenName := ctx.GetString("token_name")
-	completionRatio := operation_setting.GetCompletionRatio(modelName)
-	audioRatio := operation_setting.GetAudioRatio(relayInfo.OriginModelName)
-	audioCompletionRatio := operation_setting.GetAudioCompletionRatio(modelName)
+	completionRatio := decimal.NewFromFloat(operation_setting.GetCompletionRatio(modelName))
+	audioRatio := decimal.NewFromFloat(operation_setting.GetAudioRatio(relayInfo.OriginModelName))
+	audioCompletionRatio := decimal.NewFromFloat(operation_setting.GetAudioCompletionRatio(modelName))

 	quotaInfo := QuotaInfo{
 		InputDetails: TokenDetails{
@@ -147,7 +165,8 @@ func PostWssConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo, mod
 	totalTokens := usage.TotalTokens
 	var logContent string
 	if !usePrice {
-		logContent = fmt.Sprintf("模型倍率 %.2f，补全倍率 %.2f，音频倍率 %.2f，音频补全倍率 %.2f，分组倍率 %.2f", modelRatio, completionRatio, audioRatio, audioCompletionRatio, groupRatio)
+		logContent = fmt.Sprintf("模型倍率 %.2f，补全倍率 %.2f，音频倍率 %.2f，音频补全倍率 %.2f，分组倍率 %.2f",
+			modelRatio, completionRatio.InexactFloat64(), audioRatio.InexactFloat64(), audioCompletionRatio.InexactFloat64(), groupRatio)
 	} else {
 		logContent = fmt.Sprintf("模型价格 %.2f，分组倍率 %.2f", modelPrice, groupRatio)
 	}
@@ -169,7 +188,8 @@ func PostWssConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo, mod
 	if extraContent != "" {
 		logContent += ", " + extraContent
 	}
-	other := GenerateWssOtherInfo(ctx, relayInfo, usage, modelRatio, groupRatio, completionRatio, audioRatio, audioCompletionRatio, modelPrice)
+	other := GenerateWssOtherInfo(ctx, relayInfo, usage, modelRatio, groupRatio,
+		completionRatio.InexactFloat64(), audioRatio.InexactFloat64(), audioCompletionRatio.InexactFloat64(), modelPrice)
 	model.RecordConsumeLog(ctx, relayInfo.UserId, relayInfo.ChannelId, usage.InputTokens, usage.OutputTokens, logModel,
 		tokenName, quota, logContent, relayInfo.TokenId, userQuota, int(useTimeSeconds), relayInfo.IsStream, relayInfo.Group, other)
 }
@@ -185,9 +205,9 @@ func PostAudioConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 	audioOutTokens := usage.CompletionTokenDetails.AudioTokens

 	tokenName := ctx.GetString("token_name")
-	completionRatio := operation_setting.GetCompletionRatio(relayInfo.OriginModelName)
-	audioRatio := operation_setting.GetAudioRatio(relayInfo.OriginModelName)
-	audioCompletionRatio := operation_setting.GetAudioCompletionRatio(relayInfo.OriginModelName)
+	completionRatio := decimal.NewFromFloat(operation_setting.GetCompletionRatio(relayInfo.OriginModelName))
+	audioRatio := decimal.NewFromFloat(operation_setting.GetAudioRatio(relayInfo.OriginModelName))
+	audioCompletionRatio := decimal.NewFromFloat(operation_setting.GetAudioCompletionRatio(relayInfo.OriginModelName))

 	modelRatio := priceData.ModelRatio
 	groupRatio := priceData.GroupRatio
@@ -214,7 +234,8 @@ func PostAudioConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 	totalTokens := usage.TotalTokens
 	var logContent string
 	if !usePrice {
-		logContent = fmt.Sprintf("模型倍率 %.2f，补全倍率 %.2f，音频倍率 %.2f，音频补全倍率 %.2f，分组倍率 %.2f", modelRatio, completionRatio, audioRatio, audioCompletionRatio, groupRatio)
+		logContent = fmt.Sprintf("模型倍率 %.2f，补全倍率 %.2f，音频倍率 %.2f，音频补全倍率 %.2f，分组倍率 %.2f",
+			modelRatio, completionRatio.InexactFloat64(), audioRatio.InexactFloat64(), audioCompletionRatio.InexactFloat64(), groupRatio)
 	} else {
 		logContent = fmt.Sprintf("模型价格 %.2f，分组倍率 %.2f", modelPrice, groupRatio)
 	}
@@ -243,7 +264,8 @@ func PostAudioConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 	if extraContent != "" {
 		logContent += ", " + extraContent
 	}
-	other := GenerateAudioOtherInfo(ctx, relayInfo, usage, modelRatio, groupRatio, completionRatio, audioRatio, audioCompletionRatio, modelPrice)
+	other := GenerateAudioOtherInfo(ctx, relayInfo, usage, modelRatio, groupRatio,
+		completionRatio.InexactFloat64(), audioRatio.InexactFloat64(), audioCompletionRatio.InexactFloat64(), modelPrice)
 	model.RecordConsumeLog(ctx, relayInfo.UserId, relayInfo.ChannelId, usage.PromptTokens, usage.CompletionTokens, logModel,
 		tokenName, quota, logContent, relayInfo.TokenId, userQuota, int(useTimeSeconds), relayInfo.IsStream, relayInfo.Group, other)
 }
--- a/setting/operation_setting/cache_ratio.go
+++ b/setting/operation_setting/cache_ratio.go
@@ -8,19 +8,26 @@ import (

 var defaultCacheRatio = map[string]float64{
 	"gpt-4":                        0.5,
+	"o1":                           0.5,
 	"o1-2024-12-17":                0.5,
 	"o1-preview-2024-09-12":        0.5,
+	"o1-preview":                   0.5,
 	"o1-mini-2024-09-12":           0.5,
+	"o1-mini":                      0.5,
 	"gpt-4o-2024-11-20":            0.5,
 	"gpt-4o-2024-08-06":            0.5,
+	"gpt-4o":                       0.5,
 	"gpt-4o-mini-2024-07-18":       0.5,
+	"gpt-4o-mini":                  0.5,
 	"gpt-4o-realtime-preview":      0.5,
 	"gpt-4o-mini-realtime-preview": 0.5,
-	"deepseek-chat":                0.5,
-	"deepseek-reasoner":            0.5,
-	"deepseek-coder":               0.5,
+	"deepseek-chat":                0.1,
+	"deepseek-reasoner":            0.1,
+	"deepseek-coder":               0.1,
 }

+var defaultCreateCacheRatio = map[string]float64{}
+
 var cacheRatioMap map[string]float64
 var cacheRatioMapMutex sync.RWMutex

@@ -57,7 +64,7 @@ func GetCacheRatio(name string) (float64, bool) {
 	GetCacheRatioMap()
 	ratio, ok := cacheRatioMap[name]
 	if !ok {
-		return 0.5, false // Default to 0.5 if not found
+		return 1, false // Default to 0.5 if not found
 	}
 	return ratio, true
 }
--- a/setting/operation_setting/general_setting.go
+++ b/setting/operation_setting/general_setting.go
@@ -0,0 +1,21 @@
+package operation_setting
+
+import "one-api/setting/config"
+
+type GeneralSetting struct {
+	DocsLink string `json:"docs_link"`
+}
+
+// 默认配置
+var generalSetting = GeneralSetting{
+	DocsLink: "https://docs.newapi.pro",
+}
+
+func init() {
+	// 注册到全局配置管理器
+	config.GlobalConfig.Register("general_setting", &generalSetting)
+}
+
+func GetGeneralSetting() *GeneralSetting {
+	return &generalSetting
+}
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -29,10 +29,12 @@ import {
  Table,
  Tag,
  Tooltip,
-  Typography
+  Typography,
+  Checkbox,
+  Layout
 } from '@douyinfe/semi-ui';
 import EditChannel from '../pages/Channel/EditChannel';
-import { IconList, IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import { IconList, IconTreeTriangleDown, IconClose, IconFilter, IconPlus, IconRefresh, IconSetting } from '@douyinfe/semi-icons';
 import { loadChannelModels } from './utils.js';
 import EditTagModal from '../pages/Channel/EditTagModal.js';
 import TextNumberInput from './custom/TextNumberInput.js';
@@ -141,21 +143,105 @@ const ChannelsTable = () => {
    }
  };

-  const columns = [
-    // {
-    //     title: '',
-    //     dataIndex: 'checkbox',
-    //     className: 'checkbox',
-    // },
+  // Define column keys for selection
+  const COLUMN_KEYS = {
+    ID: 'id',
+    NAME: 'name',
+    GROUP: 'group',
+    TYPE: 'type',
+    STATUS: 'status',
+    RESPONSE_TIME: 'response_time',
+    BALANCE: 'balance',
+    PRIORITY: 'priority',
+    WEIGHT: 'weight',
+    OPERATE: 'operate'
+  };
+
+  // State for column visibility
+  const [visibleColumns, setVisibleColumns] = useState({});
+  const [showColumnSelector, setShowColumnSelector] = useState(false);
+
+  // Load saved column preferences from localStorage
+  useEffect(() => {
+    const savedColumns = localStorage.getItem('channels-table-columns');
+    if (savedColumns) {
+      try {
+        const parsed = JSON.parse(savedColumns);
+        // Make sure all columns are accounted for
+        const defaults = getDefaultColumnVisibility();
+        const merged = { ...defaults, ...parsed };
+        setVisibleColumns(merged);
+      } catch (e) {
+        console.error('Failed to parse saved column preferences', e);
+        initDefaultColumns();
+      }
+    } else {
+      initDefaultColumns();
+    }
+  }, []);
+
+  // Update table when column visibility changes
+  useEffect(() => {
+    if (Object.keys(visibleColumns).length > 0) {
+      // Save to localStorage
+      localStorage.setItem('channels-table-columns', JSON.stringify(visibleColumns));
+    }
+  }, [visibleColumns]);
+
+  // Get default column visibility
+  const getDefaultColumnVisibility = () => {
+    return {
+      [COLUMN_KEYS.ID]: true,
+      [COLUMN_KEYS.NAME]: true,
+      [COLUMN_KEYS.GROUP]: true,
+      [COLUMN_KEYS.TYPE]: true,
+      [COLUMN_KEYS.STATUS]: true,
+      [COLUMN_KEYS.RESPONSE_TIME]: true,
+      [COLUMN_KEYS.BALANCE]: true,
+      [COLUMN_KEYS.PRIORITY]: true,
+      [COLUMN_KEYS.WEIGHT]: true,
+      [COLUMN_KEYS.OPERATE]: true
+    };
+  };
+
+  // Initialize default column visibility
+  const initDefaultColumns = () => {
+    const defaults = getDefaultColumnVisibility();
+    setVisibleColumns(defaults);
+  };
+
+  // Handle column visibility change
+  const handleColumnVisibilityChange = (columnKey, checked) => {
+    const updatedColumns = { ...visibleColumns, [columnKey]: checked };
+    setVisibleColumns(updatedColumns);
+  };
+
+  // Handle "Select All" checkbox
+  const handleSelectAll = (checked) => {
+    const allKeys = Object.keys(COLUMN_KEYS).map(key => COLUMN_KEYS[key]);
+    const updatedColumns = {};
+    
+    allKeys.forEach(key => {
+      updatedColumns[key] = checked;
+    });
+    
+    setVisibleColumns(updatedColumns);
+  };
+
+  // Define all columns with keys
+  const allColumns = [
    {
+      key: COLUMN_KEYS.ID,
      title: t('ID'),
      dataIndex: 'id'
    },
    {
+      key: COLUMN_KEYS.NAME,
      title: t('名称'),
      dataIndex: 'name'
    },
    {
+      key: COLUMN_KEYS.GROUP,
      title: t('分组'),
      dataIndex: 'group',
      render: (text, record, index) => {
@@ -177,6 +263,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.TYPE,
      title: t('类型'),
      dataIndex: 'type',
      render: (text, record, index) => {
@@ -188,6 +275,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.STATUS,
      title: t('状态'),
      dataIndex: 'status',
      render: (text, record, index) => {
@@ -211,6 +299,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.RESPONSE_TIME,
      title: t('响应时间'),
      dataIndex: 'response_time',
      render: (text, record, index) => {
@@ -218,6 +307,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.BALANCE,
      title: t('已用/剩余'),
      dataIndex: 'expired_time',
      render: (text, record, index) => {
@@ -255,6 +345,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.PRIORITY,
      title: t('优先级'),
      dataIndex: 'priority',
      render: (text, record, index) => {
@@ -304,6 +395,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.WEIGHT,
      title: t('权重'),
      dataIndex: 'weight',
      render: (text, record, index) => {
@@ -353,6 +445,7 @@ const ChannelsTable = () => {
      }
    },
    {
+      key: COLUMN_KEYS.OPERATE,
      title: '',
      dataIndex: 'operate',
      render: (text, record, index) => {
@@ -493,6 +586,68 @@ const ChannelsTable = () => {
    }
  ];

+  // Filter columns based on visibility settings
+  const getVisibleColumns = () => {
+    return allColumns.filter(column => visibleColumns[column.key]);
+  };
+
+  // Column selector modal
+  const renderColumnSelector = () => {
+    return (
+      <Modal
+        title={t('列设置')}
+        visible={showColumnSelector}
+        onCancel={() => setShowColumnSelector(false)}
+        footer={
+          <>
+            <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
+            <Button onClick={() => setShowColumnSelector(false)}>{t('取消')}</Button>
+            <Button type="primary" onClick={() => setShowColumnSelector(false)}>{t('确定')}</Button>
+          </>
+        }
+        style={{ width: 500 }}
+        bodyStyle={{ padding: '24px' }}
+      >
+        <div style={{ marginBottom: 20 }}>
+          <Checkbox
+            checked={Object.values(visibleColumns).every(v => v === true)}
+            indeterminate={Object.values(visibleColumns).some(v => v === true) && !Object.values(visibleColumns).every(v => v === true)}
+            onChange={e => handleSelectAll(e.target.checked)}
+          >
+            {t('全选')}
+          </Checkbox>
+        </div>
+        <div style={{ 
+          display: 'flex', 
+          flexWrap: 'wrap', 
+          maxHeight: '400px', 
+          overflowY: 'auto',
+          border: '1px solid var(--semi-color-border)',
+          borderRadius: '6px',
+          padding: '16px'
+        }}>
+          {allColumns.map(column => {
+            // Skip columns without title
+            if (!column.title) {
+              return null;
+            }
+            
+            return (
+              <div key={column.key} style={{ width: '50%', marginBottom: 16, paddingRight: 8 }}>
+                <Checkbox
+                  checked={!!visibleColumns[column.key]}
+                  onChange={e => handleColumnVisibilityChange(column.key, e.target.checked)}
+                >
+                  {column.title}
+                </Checkbox>
+              </div>
+            );
+          })}
+        </div>
+      </Modal>
+    );
+  };
+
  const [channels, setChannels] = useState([]);
  const [loading, setLoading] = useState(true);
  const [activePage, setActivePage] = useState(1);
@@ -1032,6 +1187,7 @@ const ChannelsTable = () => {

  return (
    <>
+      {renderColumnSelector()}
      <EditTagModal
        visible={showEditTag}
        tag={editingTag}
@@ -1238,15 +1394,22 @@ const ChannelsTable = () => {
          >
            {t('批量设置标签')}
          </Button>
+          <Button
+            theme="light"
+            type="tertiary"
+            icon={<IconSetting />}
+            onClick={() => setShowColumnSelector(true)}
+            style={{ marginRight: 8 }}
+          >
+            {t('列设置')}
+          </Button>
        </Space>
-
      </div>


      <Table
-        className={'channel-table'}
-        style={{ marginTop: 15 }}
-        columns={columns}
+        loading={loading}
+        columns={getVisibleColumns()}
        dataSource={pageData}
        pagination={{
          currentPage: activePage,
@@ -1260,7 +1423,6 @@ const ChannelsTable = () => {
          },
          onPageChange: handlePageChange
        }}
-        loading={loading}
        onRow={handleRow}
        rowSelection={
          enableBatchDelete
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -19,7 +19,10 @@ import {
  IconNoteMoneyStroked,
  IconPriceTag,
  IconUser,
-  IconLanguage
+  IconLanguage,
+  IconInfoCircle,
+  IconCreditCard,
+  IconTerminal
 } from '@douyinfe/semi-icons';
 import { Avatar, Button, Dropdown, Layout, Nav, Switch, Tag } from '@douyinfe/semi-ui';
 import { stringToColor } from '../helpers/render';
@@ -27,6 +30,73 @@ import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import { StyleContext } from '../context/Style/index.js';
 import { StatusContext } from '../context/Status/index.js';

+// 自定义顶部栏样式
+const headerStyle = {
+  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+  borderBottom: '1px solid var(--semi-color-border)',
+  background: 'var(--semi-color-bg-0)',
+  transition: 'all 0.3s ease',
+  width: '100%'
+};
+
+// 自定义顶部栏按钮样式
+const headerItemStyle = {
+  borderRadius: '4px',
+  margin: '0 4px',
+  transition: 'all 0.3s ease'
+};
+
+// 自定义顶部栏按钮悬停样式
+const headerItemHoverStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)'
+};
+
+// 自定义顶部栏Logo样式
+const logoStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+  padding: '0 10px',
+  height: '100%'
+};
+
+// 自定义顶部栏系统名称样式
+const systemNameStyle = {
+  fontWeight: 'bold',
+  fontSize: '18px',
+  background: 'linear-gradient(45deg, var(--semi-color-primary), var(--semi-color-secondary))',
+  WebkitBackgroundClip: 'text',
+  WebkitTextFillColor: 'transparent',
+  padding: '0 5px'
+};
+
+// 自定义顶部栏按钮图标样式
+const headerIconStyle = {
+  fontSize: '18px',
+  transition: 'all 0.3s ease'
+};
+
+// 自定义头像样式
+const avatarStyle = {
+  margin: '4px',
+  cursor: 'pointer',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+  transition: 'all 0.3s ease'
+};
+
+// 自定义下拉菜单样式
+const dropdownStyle = {
+  borderRadius: '8px',
+  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+  overflow: 'hidden'
+};
+
+// 自定义主题切换开关样式
+const switchStyle = {
+  margin: '0 8px'
+};
+
 const HeaderBar = () => {
  const { t, i18n } = useTranslation();
  const [userState, userDispatch] = useContext(UserContext);
@@ -44,6 +114,7 @@ const HeaderBar = () => {

  // Check if self-use mode is enabled
  const isSelfUseMode = statusState?.status?.self_use_mode_enabled || false;
+  const docsLink = statusState?.status?.docs_link || '';
  const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;

  let buttons = [
@@ -51,21 +122,33 @@ const HeaderBar = () => {
      text: t('首页'),
      itemKey: 'home',
      to: '/',
+      icon: <IconHome style={headerIconStyle} />,
    },
    {
      text: t('控制台'),
      itemKey: 'detail',
      to: '/',
+      icon: <IconTerminal style={headerIconStyle} />,
    },
    {
      text: t('定价'),
      itemKey: 'pricing',
      to: '/pricing',
+      icon: <IconPriceTag style={headerIconStyle} />,
    },
+    // Only include the docs button if docsLink exists
+    ...(docsLink ? [{
+      text: t('文档'),
+      itemKey: 'docs',
+      isExternal: true,
+      externalLink: docsLink,
+      icon: <IconHelpCircle style={headerIconStyle} />,
+    }] : []),
    {
      text: t('关于'),
      itemKey: 'about',
      to: '/about',
+      icon: <IconInfoCircle style={headerIconStyle} />,
    },
  ];

@@ -135,6 +218,9 @@ const HeaderBar = () => {
          <Nav
            className={'topnav'}
            mode={'horizontal'}
+            style={headerStyle}
+            itemStyle={headerItemStyle}
+            hoverStyle={headerItemHoverStyle}
            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
              const routerMap = {
                about: '/about',
@@ -157,13 +243,25 @@ const HeaderBar = () => {
                    }
                  }
                }}>
-                  <Link
-                    className="header-bar-text"
-                    style={{ textDecoration: 'none' }}
-                    to={routerMap[props.itemKey]}
-                  >
-                    {itemElement}
-                  </Link>
+                  {props.isExternal ? (
+                    <a
+                      className="header-bar-text"
+                      style={{ textDecoration: 'none' }}
+                      href={props.externalLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {itemElement}
+                    </a>
+                  ) : (
+                    <Link
+                      className="header-bar-text"
+                      style={{ textDecoration: 'none' }}
+                      to={routerMap[props.itemKey]}
+                    >
+                      {itemElement}
+                    </Link>
+                  )}
                </div>
              );
            }}
@@ -204,11 +302,13 @@ const HeaderBar = () => {
              ),
            }:{
              logo: (
-                <img src={logo} alt='logo' />
+                <div style={logoStyle}>
+                  <img src={logo} alt='logo' style={{ height: '28px' }} />
+                </div>
              ),
              text: (
                <div style={{ position: 'relative', display: 'inline-block' }}>
-                  {systemName}
+                  <span style={systemNameStyle}>{systemName}</span>
                  {(isSelfUseMode || isDemoSiteMode) && (
                    <Tag 
                      color={isSelfUseMode ? 'purple' : 'blue'}
@@ -237,7 +337,7 @@ const HeaderBar = () => {
                  <Dropdown
                    position='bottomRight'
                    render={
-                      <Dropdown.Menu>
+                      <Dropdown.Menu style={dropdownStyle}>
                        <Dropdown.Item onClick={handleNewYearClick}>
                          Happy New Year!!!
                        </Dropdown.Item>
@@ -254,6 +354,7 @@ const HeaderBar = () => {
                    size={styleState.isMobile?'default':'large'}
                    checked={theme === 'dark'}
                    uncheckedText='🌙'
+                    style={switchStyle}
                    onChange={(checked) => {
                      setTheme(checked);
                    }}
@@ -262,7 +363,7 @@ const HeaderBar = () => {
                <Dropdown
                  position='bottomRight'
                  render={
-                    <Dropdown.Menu>
+                    <Dropdown.Menu style={dropdownStyle}>
                      <Dropdown.Item
                        onClick={() => handleLanguageChange('zh')}
                        type={currentLang === 'zh' ? 'primary' : 'tertiary'}
@@ -280,7 +381,7 @@ const HeaderBar = () => {
                >
                  <Nav.Item
                    itemKey={'language'}
-                    icon={<IconLanguage />}
+                    icon={<IconLanguage style={headerIconStyle} />}
                  />
                </Dropdown>
                {userState.user ? (
@@ -288,7 +389,7 @@ const HeaderBar = () => {
                    <Dropdown
                      position='bottomRight'
                      render={
-                        <Dropdown.Menu>
+                        <Dropdown.Menu style={dropdownStyle}>
                          <Dropdown.Item onClick={logout}>{t('退出')}</Dropdown.Item>
                        </Dropdown.Menu>
                      }
@@ -296,11 +397,11 @@ const HeaderBar = () => {
                      <Avatar
                        size='small'
                        color={stringToColor(userState.user.username)}
-                        style={{ margin: 4 }}
+                        style={avatarStyle}
                      >
                        {userState.user.username[0]}
                      </Avatar>
-                      {styleState.isMobile?null:<Text>{userState.user.username}</Text>}
+                      {styleState.isMobile?null:<Text style={{ marginLeft: '4px', fontWeight: '500' }}>{userState.user.username}</Text>}
                    </Dropdown>
                  </>
                ) : (
@@ -308,7 +409,7 @@ const HeaderBar = () => {
                    <Nav.Item
                      itemKey={'login'}
                      text={!styleState.isMobile?t('登录'):null}
-                      icon={<IconUser />}
+                      icon={<IconUser style={headerIconStyle} />}
                    />
                    {
                      // Hide register option in self-use mode
@@ -316,7 +417,7 @@ const HeaderBar = () => {
                        <Nav.Item
                          itemKey={'register'}
                          text={t('注册')}
-                          icon={<IconKey />}
+                          icon={<IconKey style={headerIconStyle} />}
                        />
                      )
                    }
--- a/web/src/components/LogsTable.js
+++ b/web/src/components/LogsTable.js
@@ -21,7 +21,8 @@ import {
  Spin,
  Table,
  Tag,
-  Tooltip
+  Tooltip,
+  Checkbox
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
 import {
@@ -34,7 +35,7 @@ import {
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 import { getLogOther } from '../helpers/other.js';
 import { StyleContext } from '../context/Style/index.js';
-import { IconInherit, IconRefresh } from '@douyinfe/semi-icons';
+import { IconInherit, IconRefresh, IconSetting } from '@douyinfe/semi-icons';

 const { Header } = Layout;

@@ -215,12 +216,104 @@ const LogsTable = () => {

  }

-  const columns = [
+  // Define column keys for selection
+  const COLUMN_KEYS = {
+    TIME: 'time',
+    CHANNEL: 'channel',
+    USERNAME: 'username',
+    TOKEN: 'token',
+    GROUP: 'group',
+    TYPE: 'type',
+    MODEL: 'model',
+    USE_TIME: 'use_time',
+    PROMPT: 'prompt',
+    COMPLETION: 'completion',
+    COST: 'cost',
+    RETRY: 'retry',
+    DETAILS: 'details'
+  };
+
+  // State for column visibility
+  const [visibleColumns, setVisibleColumns] = useState({});
+  const [showColumnSelector, setShowColumnSelector] = useState(false);
+
+  // Load saved column preferences from localStorage
+  useEffect(() => {
+    const savedColumns = localStorage.getItem('logs-table-columns');
+    if (savedColumns) {
+      try {
+        const parsed = JSON.parse(savedColumns);
+        // Make sure all columns are accounted for
+        const defaults = getDefaultColumnVisibility();
+        const merged = { ...defaults, ...parsed };
+        setVisibleColumns(merged);
+      } catch (e) {
+        console.error('Failed to parse saved column preferences', e);
+        initDefaultColumns();
+      }
+    } else {
+      initDefaultColumns();
+    }
+  }, []);
+
+  // Get default column visibility based on user role
+  const getDefaultColumnVisibility = () => {
+    return {
+      [COLUMN_KEYS.TIME]: true,
+      [COLUMN_KEYS.CHANNEL]: isAdminUser,
+      [COLUMN_KEYS.USERNAME]: isAdminUser,
+      [COLUMN_KEYS.TOKEN]: true,
+      [COLUMN_KEYS.GROUP]: true,
+      [COLUMN_KEYS.TYPE]: true,
+      [COLUMN_KEYS.MODEL]: true,
+      [COLUMN_KEYS.USE_TIME]: true,
+      [COLUMN_KEYS.PROMPT]: true,
+      [COLUMN_KEYS.COMPLETION]: true,
+      [COLUMN_KEYS.COST]: true,
+      [COLUMN_KEYS.RETRY]: isAdminUser,
+      [COLUMN_KEYS.DETAILS]: true
+    };
+  };
+
+  // Initialize default column visibility
+  const initDefaultColumns = () => {
+    const defaults = getDefaultColumnVisibility();
+    setVisibleColumns(defaults);
+    localStorage.setItem('logs-table-columns', JSON.stringify(defaults));
+  };
+
+  // Handle column visibility change
+  const handleColumnVisibilityChange = (columnKey, checked) => {
+    const updatedColumns = { ...visibleColumns, [columnKey]: checked };
+    setVisibleColumns(updatedColumns);
+  };
+
+  // Handle "Select All" checkbox
+  const handleSelectAll = (checked) => {
+    const allKeys = Object.keys(COLUMN_KEYS).map(key => COLUMN_KEYS[key]);
+    const updatedColumns = {};
+    
+    allKeys.forEach(key => {
+      // For admin-only columns, only enable them if user is admin
+      if ((key === COLUMN_KEYS.CHANNEL || key === COLUMN_KEYS.USERNAME || key === COLUMN_KEYS.RETRY) && !isAdminUser) {
+        updatedColumns[key] = false;
+      } else {
+        updatedColumns[key] = checked;
+      }
+    });
+    
+    setVisibleColumns(updatedColumns);
+  };
+
+  // Define all columns
+  const allColumns = [
    {
+      key: COLUMN_KEYS.TIME,
      title: t('时间'),
      dataIndex: 'timestamp2string',
    },
    {
+      key: COLUMN_KEYS.CHANNEL,
      title: t('渠道'),
      dataIndex: 'channel',
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
@@ -249,6 +342,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.USERNAME,
      title: t('用户'),
      dataIndex: 'username',
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
@@ -274,6 +368,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.TOKEN,
      title: t('令牌'),
      dataIndex: 'token_name',
      render: (text, record, index) => {
@@ -297,6 +392,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.GROUP,
      title: t('分组'),
      dataIndex: 'group',
      render: (text, record, index) => {
@@ -333,6 +429,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.TYPE,
      title: t('类型'),
      dataIndex: 'type',
      render: (text, record, index) => {
@@ -340,6 +437,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.MODEL,
      title: t('模型'),
      dataIndex: 'model_name',
      render: (text, record, index) => {
@@ -351,6 +449,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.USE_TIME,
      title: t('用时/首字'),
      dataIndex: 'use_time',
      render: (text, record, index) => {
@@ -360,7 +459,7 @@ const LogsTable = () => {
            <>
              <Space>
                {renderUseTime(text)}
-                {renderFirstUseTime(other.frt)}
+                {renderFirstUseTime(other?.frt)}
                {renderIsStream(record.is_stream)}
              </Space>
            </>
@@ -378,6 +477,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.PROMPT,
      title: t('提示'),
      dataIndex: 'prompt_tokens',
      render: (text, record, index) => {
@@ -389,6 +489,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.COMPLETION,
      title: t('补全'),
      dataIndex: 'completion_tokens',
      render: (text, record, index) => {
@@ -401,6 +502,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.COST,
      title: t('花费'),
      dataIndex: 'quota',
      render: (text, record, index) => {
@@ -412,6 +514,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.RETRY,
      title: t('重试'),
      dataIndex: 'retry',
      className: isAdmin() ? 'tableShow' : 'tableHiddle',
@@ -439,6 +542,7 @@ const LogsTable = () => {
      },
    },
    {
+      key: COLUMN_KEYS.DETAILS,
      title: t('详情'),
      dataIndex: 'content',
      render: (text, record, index) => {
@@ -481,6 +585,76 @@ const LogsTable = () => {
    },
  ];

+  // Update table when column visibility changes
+  useEffect(() => {
+    if (Object.keys(visibleColumns).length > 0) {
+      // Save to localStorage
+      localStorage.setItem('logs-table-columns', JSON.stringify(visibleColumns));
+    }
+  }, [visibleColumns]);
+
+  // Filter columns based on visibility settings
+  const getVisibleColumns = () => {
+    return allColumns.filter(column => visibleColumns[column.key]);
+  };
+
+  // Column selector modal
+  const renderColumnSelector = () => {
+    return (
+      <Modal
+        title={t('列设置')}
+        visible={showColumnSelector}
+        onCancel={() => setShowColumnSelector(false)}
+        footer={
+          <>
+            <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
+            <Button onClick={() => setShowColumnSelector(false)}>{t('取消')}</Button>
+            <Button type="primary" onClick={() => setShowColumnSelector(false)}>{t('确定')}</Button>
+          </>
+        }
+      >
+        <div style={{ marginBottom: 20 }}>
+          <Checkbox
+            checked={Object.values(visibleColumns).every(v => v === true)}
+            indeterminate={Object.values(visibleColumns).some(v => v === true) && !Object.values(visibleColumns).every(v => v === true)}
+            onChange={e => handleSelectAll(e.target.checked)}
+          >
+            {t('全选')}
+          </Checkbox>
+        </div>
+        <div style={{ 
+          display: 'flex', 
+          flexWrap: 'wrap',
+          maxHeight: '400px',
+          overflowY: 'auto',
+          border: '1px solid var(--semi-color-border)',
+          borderRadius: '6px',
+          padding: '16px'
+        }}>
+          {allColumns.map(column => {
+            // Skip admin-only columns for non-admin users
+            if (!isAdminUser && (column.key === COLUMN_KEYS.CHANNEL || 
+                                column.key === COLUMN_KEYS.USERNAME || 
+                                column.key === COLUMN_KEYS.RETRY)) {
+              return null;
+            }
+            
+            return (
+              <div key={column.key} style={{ width: '50%', marginBottom: 16, paddingRight: 8 }}>
+                <Checkbox
+                  checked={!!visibleColumns[column.key]}
+                  onChange={e => handleColumnVisibilityChange(column.key, e.target.checked)}
+                >
+                  {column.title}
+                </Checkbox>
+              </div>
+            );
+          })}
+        </div>
+      </Modal>
+    );
+  };
+
  const [styleState, styleDispatch] = useContext(StyleContext);
  const [logs, setLogs] = useState([]);
  const [expandData, setExpandData] = useState({});
@@ -638,6 +812,12 @@ const LogsTable = () => {
          value: other.text_output,
        });
      }
+      if (other?.cache_tokens > 0) {
+        expandDataLocal.push({
+          key: t('缓存 Tokens'),
+          value: other.cache_tokens,
+        });
+      }
      expandDataLocal.push({
        key: t('日志详情'),
        value: logs[i].content,
@@ -657,29 +837,29 @@ const LogsTable = () => {
        let content = '';
        if (other?.ws || other?.audio) {
          content = renderAudioModelPrice(
-            other.text_input,
-            other.text_output,
-            other.model_ratio,
-            other.model_price,
-            other.completion_ratio,
-            other.audio_input,
-            other.audio_output,
+            other?.text_input,
+            other?.text_output,
+            other?.model_ratio,
+            other?.model_price,
+            other?.completion_ratio,
+            other?.audio_input,
+            other?.audio_output,
            other?.audio_ratio,
            other?.audio_completion_ratio,
-            other.group_ratio,
-            other.cache_tokens || 0,
-            other.cache_ratio || 1.0,
+            other?.group_ratio,
+            other?.cache_tokens || 0,
+            other?.cache_ratio || 1.0,
          );
        } else {
          content = renderModelPrice(
            logs[i].prompt_tokens,
            logs[i].completion_tokens,
-            other.model_ratio,
-            other.model_price,
-            other.completion_ratio,
-            other.group_ratio,
-            other.cache_tokens || 0,
-            other.cache_ratio || 1.0,
+            other?.model_ratio,
+            other?.model_price,
+            other?.completion_ratio,
+            other?.group_ratio,
+            other?.cache_tokens || 0,
+            other?.cache_ratio || 1.0,
          );
        }
        expandDataLocal.push({
@@ -776,17 +956,34 @@ const LogsTable = () => {

  return (
    <>
+      {renderColumnSelector()}
      <Layout>
        <Header>
          <Spin spinning={loadingStat}>
            <Space>
-              <Tag color='green' size='large' style={{ padding: 15 }}>
-                {t('总消耗额度')}: {renderQuota(stat.quota)}
+              <Tag color='blue' size='large' style={{ 
+                padding: 15, 
+                borderRadius: '8px', 
+                fontWeight: 500,
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+              }}>
+                {t('消耗额度')}: {renderQuota(stat.quota)}
              </Tag>
-              <Tag color='blue' size='large' style={{ padding: 15 }}>
+              <Tag color='pink' size='large' style={{ 
+                padding: 15, 
+                borderRadius: '8px', 
+                fontWeight: 500,
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+              }}>
                RPM: {stat.rpm}
              </Tag>
-              <Tag color='purple' size='large' style={{ padding: 15 }}>
+              <Tag color='white' size='large' style={{ 
+                padding: 15, 
+                border: 'none', 
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)', 
+                borderRadius: '8px',
+                fontWeight: 500,
+              }}>
                TPM: {stat.tpm}
              </Tag>
            </Space>
@@ -911,10 +1108,19 @@ const LogsTable = () => {
            <Select.Option value='3'>{t('管理')}</Select.Option>
            <Select.Option value='4'>{t('系统')}</Select.Option>
          </Select>
+          <Button
+            theme='light'
+            type='tertiary'
+            icon={<IconSetting />}
+            onClick={() => setShowColumnSelector(true)}
+            style={{ marginLeft: 8 }}
+          >
+            {t('列设置')}
+          </Button>
        </div>
        <Table
          style={{ marginTop: 5 }}
-          columns={columns}
+          columns={getVisibleColumns()}
          expandedRowRender={expandRowRender}
          expandRowByClick={true}
          dataSource={logs}
--- a/web/src/components/OperationSetting.js
+++ b/web/src/components/OperationSetting.js
@@ -34,8 +34,8 @@ const OperationSetting = () => {
    GroupRatio: '',
    UserUsableGroups: '',
    TopUpLink: '',
-    ChatLink: '',
-    ChatLink2: '', // 添加的新状态变量
+    'general_setting.docs_link': '',
+    // ChatLink2: '', // 添加的新状态变量
    QuotaPerUnit: 0,
    AutomaticDisableChannelEnabled: false,
    AutomaticEnableChannelEnabled: false,
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -62,20 +62,57 @@ const PageLayout = () => {
    if (savedLang) {
      i18n.changeLanguage(savedLang);
    }
+    
+    // 默认显示侧边栏
+    styleDispatch({ type: 'SET_SIDER', payload: true });
  }, [i18n]);

+  // 获取侧边栏折叠状态
+  const isSidebarCollapsed = localStorage.getItem('default_collapse_sidebar') === 'true';
+
  return (
    <Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-      <Header>
+      <Header style={{ 
+        padding: 0, 
+        height: 'auto', 
+        lineHeight: 'normal', 
+        position: 'fixed', 
+        width: '100%', 
+        top: 0, 
+        zIndex: 100,
+        boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)'
+      }}>
        <HeaderBar />
      </Header>
-      <Layout style={{ flex: 1, overflow: 'hidden' }}>
-        <Sider>
-          {styleState.showSider ? <SiderBar /> : null}
-        </Sider>
-        <Layout>
+      <Layout style={{ marginTop: '56px', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
+        {styleState.showSider && (
+          <Sider style={{ 
+            height: 'calc(100vh - 56px)', 
+            position: 'fixed',
+            left: 0,
+            top: '56px',
+            zIndex: 90,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            width: 'auto',
+            background: 'transparent',
+            boxShadow: 'none',
+            border: 'none',
+            paddingRight: '5px'
+          }}>
+            <SiderBar />
+          </Sider>
+        )}
+        <Layout style={{ 
+          marginLeft: styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0', 
+          transition: 'margin-left 0.3s ease'
+        }}>
          <Content
-            style={{ overflowY: 'auto', padding: styleState.shouldInnerPadding? '24px': '0' }}
+            style={{ 
+              height: '100%',
+              overflowY: 'auto', 
+              padding: styleState.shouldInnerPadding? '24px': '0' 
+            }}
          >
            <App />
          </Content>
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { StatusContext } from '../context/Status';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +34,34 @@ import { stringToColor } from '../helpers/render.js';
 import { useSetTheme, useTheme } from '../context/Theme/index.js';
 import { StyleContext } from '../context/Style/index.js';

-// HeaderBar Buttons
+// 自定义侧边栏按钮样式
+const navItemStyle = {
+  borderRadius: '6px',
+  margin: '4px 8px',
+  transition: 'all 0.3s ease'
+};
+
+// 自定义侧边栏按钮悬停样式
+const navItemHoverStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)'
+};
+
+// 自定义侧边栏按钮选中样式
+const navItemSelectedStyle = {
+  backgroundColor: 'var(--semi-color-primary-light-default)',
+  color: 'var(--semi-color-primary)',
+  fontWeight: '600'
+};
+
+// 自定义图标样式
+const iconStyle = (itemKey, selectedKeys) => {
+  return {
+    fontSize: '18px',
+    color: selectedKeys.includes(itemKey) ? 'var(--semi-color-primary)' : 'var(--semi-color-text-2)',
+    transition: 'all 0.3s ease'
+  };
+};

 const SiderBar = () => {
  const { t } = useTranslation();
@@ -46,8 +73,30 @@ const SiderBar = () => {
  const [selectedKeys, setSelectedKeys] = useState(['home']);
  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
  const [chatItems, setChatItems] = useState([]);
+  const [openedKeys, setOpenedKeys] = useState([]);
  const theme = useTheme();
  const setTheme = useSetTheme();
+  const location = useLocation();
+
+  // 预先计算所有可能的图标样式
+  const allItemKeys = useMemo(() => {
+    const keys = ['home', 'channel', 'token', 'redemption', 'topup', 'user', 'log', 'midjourney', 
+                 'setting', 'about', 'chat', 'detail', 'pricing', 'task', 'playground', 'personal'];
+    // 添加聊天项的keys
+    for (let i = 0; i < chatItems.length; i++) {
+      keys.push('chat' + i);
+    }
+    return keys;
+  }, [chatItems]);
+
+  // 使用useMemo一次性计算所有图标样式
+  const iconStyles = useMemo(() => {
+    const styles = {};
+    allItemKeys.forEach(key => {
+      styles[key] = iconStyle(key, selectedKeys);
+    });
+    return styles;
+  }, [allItemKeys, selectedKeys]);

  const routerMap = {
    home: '/',
@@ -190,42 +239,42 @@ const SiderBar = () => {
  );

  useEffect(() => {
-    let localKey = window.location.pathname.split('/')[1];
-    if (localKey === '') {
-      localKey = 'home';
+    const currentPath = location.pathname;
+    const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
+    
+    if (matchingKey) {
+      setSelectedKeys([matchingKey]);
+    } else if (currentPath.startsWith('/chat/')) {
+      setSelectedKeys(['chat']);
    }
-    setSelectedKeys([localKey]);

-    let chatLink = localStorage.getItem('chat_link');
-    if (!chatLink) {
-      let chats = localStorage.getItem('chats');
-      if (chats) {
-        // console.log(chats);
-        try {
-          chats = JSON.parse(chats);
-          if (Array.isArray(chats)) {
-            let chatItems = [];
-            for (let i = 0; i < chats.length; i++) {
-              let chat = {};
-              for (let key in chats[i]) {
-                chat.text = key;
-                chat.itemKey = 'chat' + i;
-                chat.to = '/chat/' + i;
-              }
-              // setRouterMap({ ...routerMap, chat: '/chat/' + i })
-              chatItems.push(chat);
+    let chats = localStorage.getItem('chats');
+    if (chats) {
+      // console.log(chats);
+      try {
+        chats = JSON.parse(chats);
+        if (Array.isArray(chats)) {
+          let chatItems = [];
+          for (let i = 0; i < chats.length; i++) {
+            let chat = {};
+            for (let key in chats[i]) {
+              chat.text = key;
+              chat.itemKey = 'chat' + i;
+              chat.to = '/chat/' + i;
            }
-            setChatItems(chatItems);
+            // setRouterMap({ ...routerMap, chat: '/chat/' + i })
+            chatItems.push(chat);
          }
-        } catch (e) {
-          console.error(e);
-          showError('聊天数据解析失败')
+          setChatItems(chatItems);
        }
+      } catch (e) {
+        console.error(e);
+        showError('聊天数据解析失败')
      }
    }

    setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true');
-  }, []);
+  }, [location.pathname]);

  // Custom divider style
  const dividerStyle = {
@@ -238,40 +287,70 @@ const SiderBar = () => {
    padding: '8px 16px',
    color: 'var(--semi-color-text-2)',
    fontSize: '12px',
-    fontWeight: 'normal',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
  };

  return (
    <>
      <Nav
-        style={{ maxWidth: 200, height: '100%' }}
+        className="custom-sidebar-nav"
+        style={{ 
+          width: isCollapsed ? '60px' : '200px',
+          height: '100%',
+          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
+          borderRight: '1px solid var(--semi-color-border)',
+          background: 'var(--semi-color-bg-0)',
+          borderRadius: '0 8px 8px 0',
+          transition: 'all 0.3s ease',
+          position: 'relative',
+          zIndex: 95
+        }}
        defaultIsCollapsed={
          localStorage.getItem('default_collapse_sidebar') === 'true'
        }
        isCollapsed={isCollapsed}
        onCollapseChange={(collapsed) => {
          setIsCollapsed(collapsed);
+          localStorage.setItem('default_collapse_sidebar', collapsed);
+          // 始终保持侧边栏显示，只是宽度不同
+          styleDispatch({ type: 'SET_SIDER', payload: true });
+          
+          // 确保在收起侧边栏时有选中的项目，避免不必要的计算
+          if (selectedKeys.length === 0) {
+            const currentPath = location.pathname;
+            const matchingKey = Object.keys(routerMap).find(key => routerMap[key] === currentPath);
+            
+            if (matchingKey) {
+              setSelectedKeys([matchingKey]);
+            } else if (currentPath.startsWith('/chat/')) {
+              setSelectedKeys(['chat']);
+            } else {
+              setSelectedKeys(['home']); // 默认选中首页
+            }
+          }
        }}
        selectedKeys={selectedKeys}
+        itemStyle={navItemStyle}
+        hoverStyle={navItemHoverStyle}
+        selectedStyle={navItemSelectedStyle}
        renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
-          let chatLink = localStorage.getItem('chat_link');
-          if (!chatLink) {
-            let chats = localStorage.getItem('chats');
-            if (chats) {
-              chats = JSON.parse(chats);
-              if (Array.isArray(chats) && chats.length > 0) {
-                for (let i = 0; i < chats.length; i++) {
-                  routerMap['chat' + i] = '/chat/' + i;
-                }
-                if (chats.length > 1) {
-                  // delete /chat
-                  if (routerMap['chat']) {
-                    delete routerMap['chat'];
-                  }
-                } else {
-                  // rename /chat to /chat/0
-                  routerMap['chat'] = '/chat/0';
+          let chats = localStorage.getItem('chats');
+          if (chats) {
+            chats = JSON.parse(chats);
+            if (Array.isArray(chats) && chats.length > 0) {
+              for (let i = 0; i < chats.length; i++) {
+                routerMap['chat' + i] = '/chat/' + i;
+              }
+              if (chats.length > 1) {
+                // delete /chat
+                if (routerMap['chat']) {
+                  delete routerMap['chat'];
                }
+              } else {
+                // rename /chat to /chat/0
+                routerMap['chat'] = '/chat/0';
              }
            }
          }
@@ -290,43 +369,49 @@ const SiderBar = () => {
          } else {
            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
          }
+          
+          // 如果点击的是已经展开的子菜单的父项，则收起子菜单
+          if (openedKeys.includes(key.itemKey)) {
+            setOpenedKeys(openedKeys.filter(k => k !== key.itemKey));
+          }
+          
          setSelectedKeys([key.itemKey]);
        }}
+        openKeys={openedKeys}
+        onOpenChange={(data) => {
+          setOpenedKeys(data.openKeys);
+        }}
      >
        {/* Chat Section - Only show if there are chat items */}
-        {chatItems.length > 0 && (
-          <>
-            {chatMenuItems.map((item) => {
-              if (item.items && item.items.length > 0) {
-                return (
-                  <Nav.Sub
-                    key={item.itemKey}
-                    itemKey={item.itemKey}
-                    text={item.text}
-                    icon={item.icon}
-                  >
-                    {item.items.map((subItem) => (
-                      <Nav.Item
-                        key={subItem.itemKey}
-                        itemKey={subItem.itemKey}
-                        text={subItem.text}
-                      />
-                    ))}
-                  </Nav.Sub>
-                );
-              } else {
-                return (
+        {chatMenuItems.map((item) => {
+          if (item.items && item.items.length > 0) {
+            return (
+              <Nav.Sub
+                key={item.itemKey}
+                itemKey={item.itemKey}
+                text={item.text}
+                icon={React.cloneElement(item.icon, { style: iconStyles[item.itemKey] })}
+              >
+                {item.items.map((subItem) => (
                  <Nav.Item
-                    key={item.itemKey}
-                    itemKey={item.itemKey}
-                    text={item.text}
-                    icon={item.icon}
+                    key={subItem.itemKey}
+                    itemKey={subItem.itemKey}
+                    text={subItem.text}
                  />
-                );
-              }
-            })}
-          </>
-        )}
+                ))}
+              </Nav.Sub>
+            );
+          } else {
+            return (
+              <Nav.Item
+                key={item.itemKey}
+                itemKey={item.itemKey}
+                text={item.text}
+                icon={React.cloneElement(item.icon, { style: iconStyles[item.itemKey] })}
+              />
+            );
+          }
+        })}

        {/* Divider */}
        <Divider style={dividerStyle} />
@@ -338,11 +423,30 @@ const SiderBar = () => {
            key={item.itemKey}
            itemKey={item.itemKey}
            text={item.text}
-            icon={item.icon}
+            icon={React.cloneElement(item.icon, { style: iconStyles[item.itemKey] })}
            className={item.className}
          />
        ))}

+        {isAdmin() && (
+          <>
+            {/* Divider */}
+            <Divider style={dividerStyle} />
+
+            {/* Admin Section */}
+            {!isCollapsed && <div style={groupLabelStyle}>{t('管理员')}</div>}
+            {adminItems.map((item) => (
+              <Nav.Item
+                key={item.itemKey}
+                itemKey={item.itemKey}
+                text={item.text}
+                icon={React.cloneElement(item.icon, { style: iconStyles[item.itemKey] })}
+                className={item.className}
+              />
+            ))}
+          </>
+        )}
+
        {/* Divider */}
        <Divider style={dividerStyle} />

@@ -353,31 +457,18 @@ const SiderBar = () => {
            key={item.itemKey}
            itemKey={item.itemKey}
            text={item.text}
-            icon={item.icon}
+            icon={React.cloneElement(item.icon, { style: iconStyles[item.itemKey] })}
            className={item.className}
          />
        ))}

-        {isAdmin() && (
-          <>
-            {/* Divider */}
-            <Divider style={dividerStyle} />
-
-            {/* Admin Section */}
-            {adminItems.map((item) => (
-              <Nav.Item
-                key={item.itemKey}
-                itemKey={item.itemKey}
-                text={item.text}
-                icon={item.icon}
-                className={item.className}
-              />
-            ))}
-          </>
-        )}
-
        <Nav.Footer
          collapseButton={true}
+          style={{
+            borderTop: '1px solid var(--semi-color-border)',
+            padding: '12px 0',
+            marginTop: 'auto'
+          }}
          collapseText={(collapsed)=>
            {
              if(collapsed){
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -144,33 +144,8 @@ const TokensTable = () => {
      render: (text, record, index) => {
        let chats = localStorage.getItem('chats');
        let chatsArray = []
-        let chatLink = localStorage.getItem('chat_link');
-        let mjLink = localStorage.getItem('chat_link2');
        let shouldUseCustom = true;
-        if (chatLink) {
-          shouldUseCustom = false;
-          chatLink += `/#/?settings={"key":"{key}","url":"{address}"}`;
-          chatsArray.push({
-            node: 'item',
-            key: 'default',
-            name: 'ChatGPT Next Web',
-            onClick: () => {
-              onOpenLink('default', chatLink, record);
-            },
-          });
-        }
-        if (mjLink) {
-          shouldUseCustom = false;
-          mjLink += `/#/?settings={"key":"{key}","url":"{address}"}`;
-          chatsArray.push({
-            node: 'item',
-            key: 'mj',
-            name: 'ChatGPT Next Midjourney',
-            onClick: () => {
-              onOpenLink('mj', mjLink, record);
-            },
-          });
-        }
+
        if (shouldUseCustom) {
          try {
            // console.log(chats);
--- a/web/src/helpers/data.js
+++ b/web/src/helpers/data.js
@@ -19,15 +19,20 @@ export function setStatusData(data) {
  );
  localStorage.setItem('mj_notify_enabled', data.mj_notify_enabled);
  if (data.chat_link) {
-    localStorage.setItem('chat_link', data.chat_link);
+    // localStorage.setItem('chat_link', data.chat_link);
  } else {
    localStorage.removeItem('chat_link');
  }
  if (data.chat_link2) {
-    localStorage.setItem('chat_link2', data.chat_link2);
+    // localStorage.setItem('chat_link2', data.chat_link2);
  } else {
    localStorage.removeItem('chat_link2');
  }
+  if (data.docs_link) {
+    localStorage.setItem('docs_link', data.docs_link);
+  } else {
+    localStorage.removeItem('docs_link');
+  }
 }

 export function setUserData(data) {
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -325,31 +325,29 @@ export function renderModelPrice(
    return (
      <>
        <article>
-          <p>{i18next.t('提示：${{price}} * {{ratio}} = ${{total}} / 1M tokens', {
+          <p>{i18next.t('提示价格：${{price}} = ${{total}} / 1M tokens', {
            price: inputRatioPrice,
-            ratio: groupRatio,
-            total: inputRatioPrice * groupRatio
+            total: inputRatioPrice
          })}</p>
-          <p>{i18next.t('补全：${{price}} * {{ratio}} = ${{total}} / 1M tokens', {
-            price: completionRatioPrice,
-            ratio: groupRatio,
-            total: completionRatioPrice * groupRatio
+          <p>{i18next.t('补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})', {
+            price: inputRatioPrice,
+            total: completionRatioPrice,
+            completionRatio: completionRatio
          })}</p>
          {cacheTokens > 0 && (
-            <p>{i18next.t('缓存：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存比例: {{cacheRatio}})', {
-              price: cacheRatioPrice,
-              ratio: groupRatio,
-              total: cacheRatioPrice * groupRatio,
+            <p>{i18next.t('缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})', {
+              price: inputRatioPrice,
+              total: inputRatioPrice * cacheRatio,
              cacheRatio: cacheRatio
            })}</p>
          )}
          <p></p>
          <p>
            {cacheTokens > 0 ? 
-              i18next.t('提示 {{nonCacheInput}} tokens + 缓存 {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}', {
+              i18next.t('提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}', {
                nonCacheInput: inputTokens - cacheTokens,
                cacheInput: cacheTokens,
-                cacheRatio: cacheRatio,
+                cachePrice: inputRatioPrice * cacheRatio,
                price: inputRatioPrice,
                completion: completionTokens,
                compPrice: completionRatioPrice,
@@ -387,7 +385,7 @@ export function renderModelPriceSimple(
    });
  } else {
    if (cacheTokens !== 0) {
-      return i18next.t('模型: {{ratio}} * 分组: {{groupRatio}} * 缓存比例: {{cacheRatio}}', {
+      return i18next.t('模型: {{ratio}} * 分组: {{groupRatio}} * 缓存: {{cacheRatio}}', {
        ratio: modelRatio,
        groupRatio: groupRatio,
        cacheRatio: cacheRatio
@@ -417,7 +415,11 @@ export function renderAudioModelPrice(
 ) {
  // 1 ratio = $0.002 / 1K tokens
  if (modelPrice !== -1) {
-    return '模型价格：$' + modelPrice + ' * 分组倍率：' + groupRatio + ' = $' + modelPrice * groupRatio;
+    return i18next.t('模型价格：${{price}} * 分组倍率：{{ratio}} = ${{total}}', {
+      price: modelPrice,
+      ratio: groupRatio,
+      total: modelPrice * groupRatio
+    });
  } else {
    if (completionRatio === undefined) {
      completionRatio = 0;
@@ -433,76 +435,77 @@ export function renderAudioModelPrice(
    // Calculate effective input tokens (non-cached + cached with ratio applied)
    const effectiveInputTokens = (inputTokens - cacheTokens) + (cacheTokens * cacheRatio);
    
-    let price =
+    let textPrice =
      (effectiveInputTokens / 1000000) * inputRatioPrice * groupRatio +
-      (completionTokens / 1000000) * completionRatioPrice * groupRatio +
+      (completionTokens / 1000000) * completionRatioPrice * groupRatio
+    let audioPrice =
      (audioInputTokens / 1000000) * inputRatioPrice * audioRatio * groupRatio +
      (audioCompletionTokens / 1000000) * inputRatioPrice * audioRatio * audioCompletionRatio * groupRatio;
+    let price = textPrice + audioPrice;
    return (
      <>
        <article>
-          <p>{i18next.t('提示：${{price}} * {{ratio}} = ${{total}} / 1M tokens', {
+          <p>{i18next.t('提示价格：${{price}} = ${{total}} / 1M tokens', {
            price: inputRatioPrice,
-            ratio: groupRatio,
-            total: inputRatioPrice * groupRatio
+            total: inputRatioPrice
          })}</p>
-          <p>{i18next.t('补全：${{price}} * {{ratio}} = ${{total}} / 1M tokens', {
-            price: completionRatioPrice,
-            ratio: groupRatio,
-            total: completionRatioPrice * groupRatio
+          <p>{i18next.t('补全价格：${{price}} * {{completionRatio}} = ${{total}} / 1M tokens (补全倍率: {{completionRatio}})', {
+            price: inputRatioPrice,
+            total: completionRatioPrice,
+            completionRatio: completionRatio
          })}</p>
          {cacheTokens > 0 && (
-            <p>{i18next.t('缓存：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存比例: {{cacheRatio}})', {
-              price: cacheRatioPrice,
-              ratio: groupRatio,
-              total: cacheRatioPrice * groupRatio,
+            <p>{i18next.t('缓存价格：${{price}} * {{cacheRatio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})', {
+              price: inputRatioPrice,
+              total: inputRatioPrice * cacheRatio,
              cacheRatio: cacheRatio
            })}</p>
          )}
-          <p>{i18next.t('音频提示：${{price}} * {{ratio}} * {{audioRatio}} = ${{total}} / 1M tokens', {
+          <p>{i18next.t('音频提示价格：${{price}} * {{audioRatio}} = ${{total}} / 1M tokens (音频倍率: {{audioRatio}})', {
            price: inputRatioPrice,
-            ratio: groupRatio,
-            audioRatio,
-            total: inputRatioPrice * audioRatio * groupRatio
+            total: inputRatioPrice * audioRatio,
+            audioRatio: audioRatio
          })}</p>
-          <p>{i18next.t('音频补全：${{price}} * {{ratio}} * {{audioRatio}} * {{audioCompRatio}} = ${{total}} / 1M tokens', {
+          <p>{i18next.t('音频补全价格：${{price}} * {{audioRatio}} * {{audioCompRatio}} = ${{total}} / 1M tokens (音频补全倍率: {{audioCompRatio}})', {
            price: inputRatioPrice,
-            ratio: groupRatio,
-            audioRatio,
-            audioCompRatio: audioCompletionRatio,
-            total: inputRatioPrice * audioRatio * audioCompletionRatio * groupRatio
+            total: inputRatioPrice * audioRatio * audioCompletionRatio,
+            audioRatio: audioRatio,
+            audioCompRatio: audioCompletionRatio
          })}</p>
          <p>
            {cacheTokens > 0 ? 
-              i18next.t('文字提示 {{nonCacheInput}} tokens + 文字缓存 {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} +', {
+              i18next.t('文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', {
                nonCacheInput: inputTokens - cacheTokens,
                cacheInput: cacheTokens,
-                cacheRatio: cacheRatio,
+                cachePrice: inputRatioPrice * cacheRatio,
                price: inputRatioPrice,
                completion: completionTokens,
-                compPrice: completionRatioPrice
+                compPrice: completionRatioPrice,
+                total: textPrice.toFixed(6)
              }) :
-              i18next.t('文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} +', {
+              i18next.t('文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', {
                input: inputTokens,
                price: inputRatioPrice,
                completion: completionTokens,
-                compPrice: completionRatioPrice
+                compPrice: completionRatioPrice,
+                total: textPrice.toFixed(6)
              })
            }
          </p>
          <p>
-            {i18next.t('音频提示 {{input}} tokens / 1M tokens * ${{price}} * {{audioRatio}} + 音频补全 {{completion}} tokens / 1M tokens * ${{price}} * {{audioRatio}} * {{audioCompRatio}}', {
+            {i18next.t('音频提示 {{input}} tokens / 1M tokens * ${{audioInputPrice}} + 音频补全 {{completion}} tokens / 1M tokens * ${{audioCompPrice}} = ${{total}}', {
              input: audioInputTokens,
              completion: audioCompletionTokens,
-              price: inputRatioPrice,
-              audioRatio,
-              audioCompRatio: audioCompletionRatio
+              audioInputPrice: audioRatio * inputRatioPrice,
+              audioCompPrice: audioRatio * audioCompletionRatio * inputRatioPrice,
+              total: audioPrice.toFixed(6)
            })}
          </p>
          <p>
-            {i18next.t('（文字 + 音频）* 分组倍率 {{ratio}} = ${{total}}', {
-              ratio: groupRatio,
-              total: price.toFixed(6)
+            {i18next.t('总价：文字价格 {{textPrice}} + 音频价格 {{audioPrice}} = ${{total}}', {
+              total: price.toFixed(6),
+              textPrice: textPrice.toFixed(6),
+              audioPrice: audioPrice.toFixed(6)
            })}
          </p>
          <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1338,5 +1338,9 @@
  "0.1-1之间的小数": "Decimal between 0.1 and 1",
  "模型相关设置": "Model related settings",
  "收起侧边栏": "Collapse sidebar",
-  "展开侧边栏": "Expand sidebar"
+  "展开侧边栏": "Expand sidebar",
+  "提示缓存倍率": "Prompt cache ratio",
+  "缓存：${{price}} * {{ratio}} = ${{total}} / 1M tokens (缓存倍率: {{cacheRatio}})": "Cache: ${{price}} * {{ratio}} = ${{total}} / 1M tokens (cache ratio: {{cacheRatio}})",
+  "提示 {{nonCacheInput}} tokens + 缓存 {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}": "Prompt {{nonCacheInput}} tokens + cache {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + completion {{completion}} tokens / 1M tokens * ${{compPrice}} * group {{ratio}} = ${{total}}",
+  "缓存 Tokens": "Cache Tokens"
 }
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,7 +1,7 @@
 body {
  margin: 0;
-  padding-top: 55px;
-  overflow-y: scroll;
+  padding-top: 0;
+  overflow: hidden;
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
@@ -15,6 +15,7 @@ body {
 #root {
  height: 100vh;
  flex-direction: column;
+  overflow: hidden;
 }

 #root > section > header > section > div > div > div > div.semi-navigation-header-list-outer > div.semi-navigation-list-wrapper > ul > div > a > li > span{
@@ -29,6 +30,15 @@ body {
  /*.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {*/
  /*  padding: 0 0;*/
  /*}*/
+  .topnav {
+    padding: 0 8px;
+  }
+  
+  .topnav .semi-navigation-item {
+    margin: 0 1px;
+    padding: 0 4px;
+  }
+  
  .topnav .semi-navigation-list-wrapper {
    max-width: calc(55vw - 20px);
    overflow-x: auto;
@@ -120,6 +130,38 @@ code {
  margin-bottom: 0;
 }

+/* 自定义侧边栏按钮悬停效果 */
+.semi-navigation-item:hover {
+  transform: translateX(2px);
+  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
+}
+
+/* 自定义侧边栏按钮选中效果 */
+.semi-navigation-item-selected {
+  position: relative;
+  overflow: hidden;
+}
+
+.semi-navigation-item-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 4px;
+  background-color: var(--semi-color-primary);
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
 .semi-navigation-vertical {
  /*flex: 0 0 auto;*/
  /*display: flex;*/
@@ -147,3 +189,67 @@ code {
    display: none !important;
  }
 }
+
+/* 顶部栏样式 */
+.topnav {
+  padding: 0 16px;
+}
+
+.topnav .semi-navigation-item {
+  border-radius: 4px;
+  margin: 0 2px;
+  transition: all 0.3s ease;
+}
+
+.topnav .semi-navigation-item:hover {
+  background-color: var(--semi-color-primary-light-default);
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
+}
+
+.topnav .semi-navigation-item-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+  font-weight: 600;
+}
+
+/* 顶部栏文本样式 */
+.header-bar-text {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.header-bar-text:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 自定义滚动条样式 */
+.semi-layout-content::-webkit-scrollbar,
+.semi-sider::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.semi-layout-content::-webkit-scrollbar-thumb,
+.semi-sider::-webkit-scrollbar-thumb {
+  background: var(--semi-color-tertiary-light-default);
+  border-radius: 3px;
+}
+
+.semi-layout-content::-webkit-scrollbar-thumb:hover,
+.semi-sider::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-tertiary);
+}
+
+.semi-layout-content::-webkit-scrollbar-track,
+.semi-sider::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Custom sidebar shadow */
+.custom-sidebar-nav {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
+  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
+}
--- a/web/src/pages/Chat/index.js
+++ b/web/src/pages/Chat/index.js
@@ -10,10 +10,8 @@ const ChatPage = () => {
  const comLink = (key) => {
    // console.log('chatLink:', chatLink);
    if (!serverAddress || !key) return '';
-      let link = localStorage.getItem('chat_link');
-      if (link) {
-          link = `${link}/#/?settings={"key":"sk-${key}","url":"${encodeURIComponent(serverAddress)}"}`;
-      } else if (id) {
+      let link = "";
+      if (id) {
          let chats = localStorage.getItem('chats');
          if (chats) {
              chats = JSON.parse(chats);
--- a/web/src/pages/Setting/Operation/SettingsGeneral.js
+++ b/web/src/pages/Setting/Operation/SettingsGeneral.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Banner, Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import { Banner, Button, Col, Form, Row, Spin, Collapse, Modal } from '@douyinfe/semi-ui';
 import {
  compareObjects,
  API,
@@ -12,10 +12,10 @@ import { useTranslation } from 'react-i18next';
 export default function GeneralSettings(props) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
+  const [showQuotaWarning, setShowQuotaWarning] = useState(false);
  const [inputs, setInputs] = useState({
    TopUpLink: '',
-    ChatLink: '',
-    ChatLink2: '',
+    'general_setting.docs_link': '',
    QuotaPerUnit: '',
    RetryTimes: '',
    DisplayInCurrencyEnabled: false,
@@ -104,20 +104,10 @@ export default function GeneralSettings(props) {
              </Col>
              <Col span={8}>
                <Form.Input
-                  field={'ChatLink'}
-                  label={t('默认聊天页面链接')}
+                  field={'general_setting.docs_link'}
+                  label={t('文档地址')}
                  initValue={''}
-                  placeholder={t('例如 ChatGPT Next Web 的部署地址')}
-                  onChange={onChange}
-                  showClear
-                />
-              </Col>
-              <Col span={8}>
-                <Form.Input
-                  field={'ChatLink2'}
-                  label={t('聊天页面 2 链接')}
-                  initValue={''}
-                  placeholder={t('例如 ChatGPT Next Web 的部署地址')}
+                  placeholder={t('例如 https://docs.newapi.pro')}
                  onChange={onChange}
                  showClear
                />
@@ -130,6 +120,7 @@ export default function GeneralSettings(props) {
                  placeholder={t('一单位货币能兑换的额度')}
                  onChange={onChange}
                  showClear
+                  onClick={() => setShowQuotaWarning(true)}
                />
              </Col>
              <Col span={8}>
@@ -231,6 +222,23 @@ export default function GeneralSettings(props) {
          </Form.Section>
        </Form>
      </Spin>
+      
+      <Modal
+        title={t('警告')}
+        visible={showQuotaWarning}
+        onOk={() => setShowQuotaWarning(false)}
+        onCancel={() => setShowQuotaWarning(false)}
+        closeOnEsc={true}
+        width={500}
+      >
+        <Banner
+          type='warning'
+          description={t('此设置用于系统内部计算，默认值500000是为了精确到6位小数点设计，不推荐修改。')}
+          bordered
+          fullMode={false}
+          closeIcon={null}
+        />
+      </Modal>
    </>
  );
 }
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -16,10 +16,7 @@ const Setting = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [tabActiveKey, setTabActiveKey] = useState('1');
-  let panes = [
-    {
-    },
-  ];
+  let panes = [];

  if (isRoot()) {
    panes.push({
Author	SHA1	Message	Date
1808837298@qq.com	d9cf0885f1	refactor: Enhance UI layout and styling with responsive design improvements	2025-03-10 03:25:02 +08:00
1808837298@qq.com	3ed50787b3	style: Enhance LogsTable header tags with improved styling and visual hierarchy	2025-03-10 00:34:24 +08:00
1808837298@qq.com	97d948cdb1	refactor: Make Channel Setting nullable and improve setting handling #836	2025-03-09 23:42:48 +08:00
1808837298@qq.com	5017fabbfa	fix: Correct typo in group_ratio variable name in LogsTable	2025-03-09 21:24:19 +08:00
1808837298@qq.com	bd5c261b99	fix: Add optional chaining to prevent potential undefined errors in LogsTable #833	2025-03-09 21:23:33 +08:00
1808837298@qq.com	00c2d6c102	feat: Introduce configurable docs link and remove hardcoded chat links - Added a new GeneralSetting struct to manage configurable docs link - Removed hardcoded ChatLink and ChatLink2 variables across multiple files - Updated frontend components to dynamically render docs link from status - Simplified chat and link-related logic in various components - Added a warning modal for quota per unit setting in operation settings	2025-03-09 18:31:16 +08:00
1808837298@qq.com	4a8bb625b8	fix: Refine embedding model detection in channel test	2025-03-09 15:03:07 +08:00
1808837298@qq.com	db01994cd0	refactor: Improve price rendering with clearer token and price calculations	2025-03-08 23:47:02 +08:00
Calcium-Ion	a0ca3effa7	Merge pull request #830 from Calcium-Ion/decimal feat: Improve decimal precision for quota and payment calculationsDecimal	2025-03-08 22:01:15 +08:00
1808837298@qq.com	5a10ebd384	refactor: Update topup amount type from int to int64 for improved precision	2025-03-08 21:59:18 +08:00
1808837298@qq.com	68097c132d	feat: Improve decimal precision for quota and payment calculations - Added github.com/shopspring/decimal for precise floating-point calculations - Refactored quota and payment calculations in multiple files to use decimal arithmetic - Updated go.mod and go.sum to include decimal library - Improved precision in topup, relay, and quota service calculations - Added support for more OpenAI model variants in cache ratio settings	2025-03-08 21:55:50 +08:00
Calcium-Ion	3352bacd35	Merge pull request #828 from Calcium-Ion/ui feat: Add column visibility settings for Channels and Logs tables	2025-03-08 19:55:28 +08:00
1808837298@qq.com	7fcb14e25f	feat: Add column visibility settings for Channels and Logs tables - Implemented dynamic column visibility for ChannelsTable and LogsTable - Added localStorage persistence for column preferences - Introduced column selector modal with select all/reset functionality - Supported role-based default column visibility - Added column settings button to table interfaces	2025-03-08 19:53:07 +08:00
1808837298@qq.com	867187ab4d	refactor: Simplify chat menu items rendering in SiderBar	2025-03-08 19:06:49 +08:00
1808837298@qq.com	3ad96d3b4e	feat: update readme and i18n	2025-03-08 18:13:44 +08:00
Calcium-Ion	d9390ff4c3	Merge pull request #826 from Calcium-Ion/cache feat: Add prompt cache hit tokens support for DeepSeek channel #406	2025-03-08 16:52:19 +08:00
1808837298@qq.com	8c209e2fb9	fix: Adjust DeepSeek cache ratio to 0.1	2025-03-08 16:51:43 +08:00
1808837298@qq.com	a9bfcb0daf	feat: Add prompt cache hit tokens support for DeepSeek channel #406	2025-03-08 16:50:53 +08:00
1808837298@qq.com	bb848b2fe0	refactor: Improve quota calculation precision using floating-point arithmetic	2025-03-08 16:44:08 +08:00
Calcium-Ion	618908f6f8	Merge pull request #821 from Calcium-Ion/cache chore: Update terminology from "cache ratio" to "cache multiplier" in UI and add placeholder for default create cache ratio	2025-03-08 02:49:21 +08:00
1808837298@qq.com	1f4ebddcfa	fix: Update default cache ratio from 0.5 to 1	2025-03-08 02:47:41 +08:00
1808837298@qq.com	6d79d8993e	chore: Update terminology from "cache ratio" to "cache multiplier" in UI and add placeholder for default create cache ratio	2025-03-08 02:44:09 +08:00