25:04:03 19:20:32 v0.6.0.6

VERSION

@@ -1 +1 @@
-v0.6.0.3
+v0.6.0.6

constant/setup.go

@@ -0,0 +1,3 @@
+package constant
+
+var Setup = false

constant/user_setting.go

@@ -1,11 +1,12 @@
 package constant
 
 var (
-	UserSettingNotifyType            = "notify_type"             // QuotaWarningType 额度预警类型
-	UserSettingQuotaWarningThreshold = "quota_warning_threshold" // QuotaWarningThreshold 额度预警阈值
-	UserSettingWebhookUrl            = "webhook_url"             // WebhookUrl webhook地址
-	UserSettingWebhookSecret         = "webhook_secret"          // WebhookSecret webhook密钥
-	UserSettingNotificationEmail     = "notification_email"      // NotificationEmail 通知邮箱地址
+	UserSettingNotifyType            = "notify_type"                    // QuotaWarningType 额度预警类型
+	UserSettingQuotaWarningThreshold = "quota_warning_threshold"        // QuotaWarningThreshold 额度预警阈值
+	UserSettingWebhookUrl            = "webhook_url"                    // WebhookUrl webhook地址
+	UserSettingWebhookSecret         = "webhook_secret"                 // WebhookSecret webhook密钥
+	UserSettingNotificationEmail     = "notification_email"             // NotificationEmail 通知邮箱地址
+	UserAcceptUnsetRatioModel        = "accept_unset_model_ratio_model" // AcceptUnsetRatioModel 是否接受未设置价格的模型
 )
 
 var (

controller/channel-test.go

@@ -105,6 +105,11 @@ func testChannel(channel *model.Channel, testModel string) (err error, openAIErr
 	request := buildTestRequest(testModel)
 	common.SysLog(fmt.Sprintf("testing channel %d with model %s , info %v ", channel.Id, testModel, info))
 
+	priceData, err := helper.ModelPriceHelper(c, info, 0, int(request.MaxTokens))
+	if err != nil {
+		return err, nil
+	}
+
 	adaptor.Init(info)
 
 	convertedRequest, err := adaptor.ConvertOpenAIRequest(c, info, request)
@@ -143,10 +148,7 @@ func testChannel(channel *model.Channel, testModel string) (err error, openAIErr
 		return err, nil
 	}
 	info.PromptTokens = usage.PromptTokens
-	priceData, err := helper.ModelPriceHelper(c, info, usage.PromptTokens, int(request.MaxTokens))
-	if err != nil {
-		return err, nil
-	}
+
 	quota := 0
 	if !priceData.UsePrice {
 		quota = usage.PromptTokens + int(math.Round(float64(usage.CompletionTokens)*priceData.CompletionRatio))

controller/misc.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"net/http"
 	"one-api/common"
+	"one-api/constant"
 	"one-api/model"
 	"one-api/setting"
 	"one-api/setting/operation_setting"
@@ -72,6 +73,7 @@ func GetStatus(c *gin.Context) {
 			"oidc_enabled":                system_setting.GetOIDCSettings().Enabled,
 			"oidc_client_id":              system_setting.GetOIDCSettings().ClientId,
 			"oidc_authorization_endpoint": system_setting.GetOIDCSettings().AuthorizationEndpoint,
+			"setup":                       constant.Setup,
 		},
 	})
 	return

controller/option.go

@@ -53,11 +53,12 @@ func UpdateOption(c *gin.Context) {
 			return
 		}
 	case "oidc.enabled":
-		if option.Value == "true" && system_setting.GetOIDCSettings().Enabled {
+		if option.Value == "true" && system_setting.GetOIDCSettings().ClientId == "" {
 			c.JSON(http.StatusOK, gin.H{
 				"success": false,
 				"message": "无法启用 OIDC 登录，请先填入 OIDC Client Id 以及 OIDC Client Secret！",
 			})
+			return
 		}
 	case "LinuxDOOAuthEnabled":
 		if option.Value == "true" && common.LinuxDOClientId == "" {
@@ -89,6 +90,15 @@ func UpdateOption(c *gin.Context) {
 				"success": false,
 				"message": "无法启用 Turnstile 校验，请先填入 Turnstile 校验相关配置信息！",
 			})
+
+			return
+		}
+	case "TelegramOAuthEnabled":
+		if option.Value == "true" && common.TelegramBotToken == "" {
+			c.JSON(http.StatusOK, gin.H{
+				"success": false,
+				"message": "无法启用 Telegram OAuth，请先填入 Telegram Bot Token！",
+			})
 			return
 		}
 	case "GroupRatio":
@@ -100,6 +110,7 @@ func UpdateOption(c *gin.Context) {
 			})
 			return
 		}
+
 	}
 	err = model.UpdateOption(option.Key, option.Value)
 	if err != nil {

controller/setup.go

@@ -0,0 +1,173 @@
+package controller
+
+import (
+	"github.com/gin-gonic/gin"
+	"one-api/common"
+	"one-api/constant"
+	"one-api/model"
+	"one-api/setting/operation_setting"
+	"time"
+)
+
+type Setup struct {
+	Status       bool   `json:"status"`
+	RootInit     bool   `json:"root_init"`
+	DatabaseType string `json:"database_type"`
+}
+
+type SetupRequest struct {
+	Username           string `json:"username"`
+	Password           string `json:"password"`
+	ConfirmPassword    string `json:"confirmPassword"`
+	SelfUseModeEnabled bool   `json:"SelfUseModeEnabled"`
+	DemoSiteEnabled    bool   `json:"DemoSiteEnabled"`
+}
+
+func GetSetup(c *gin.Context) {
+	setup := Setup{
+		Status: constant.Setup,
+	}
+	if constant.Setup {
+		c.JSON(200, gin.H{
+			"success": true,
+			"data":    setup,
+		})
+		return
+	}
+	setup.RootInit = model.RootUserExists()
+	if common.UsingMySQL {
+		setup.DatabaseType = "mysql"
+	}
+	if common.UsingPostgreSQL {
+		setup.DatabaseType = "postgres"
+	}
+	if common.UsingSQLite {
+		setup.DatabaseType = "sqlite"
+	}
+	c.JSON(200, gin.H{
+		"success": true,
+		"data":    setup,
+	})
+}
+
+func PostSetup(c *gin.Context) {
+	// Check if setup is already completed
+	if constant.Setup {
+		c.JSON(400, gin.H{
+			"success": false,
+			"message": "系统已经初始化完成",
+		})
+		return
+	}
+
+	// Check if root user already exists
+	rootExists := model.RootUserExists()
+
+	var req SetupRequest
+	err := c.ShouldBindJSON(&req)
+	if err != nil {
+		c.JSON(400, gin.H{
+			"success": false,
+			"message": "请求参数有误",
+		})
+		return
+	}
+
+	// If root doesn't exist, validate and create admin account
+	if !rootExists {
+		// Validate password
+		if req.Password != req.ConfirmPassword {
+			c.JSON(400, gin.H{
+				"success": false,
+				"message": "两次输入的密码不一致",
+			})
+			return
+		}
+
+		if len(req.Password) < 8 {
+			c.JSON(400, gin.H{
+				"success": false,
+				"message": "密码长度至少为8个字符",
+			})
+			return
+		}
+
+		// Create root user
+		hashedPassword, err := common.Password2Hash(req.Password)
+		if err != nil {
+			c.JSON(500, gin.H{
+				"success": false,
+				"message": "系统错误: " + err.Error(),
+			})
+			return
+		}
+		rootUser := model.User{
+			Username:    req.Username,
+			Password:    hashedPassword,
+			Role:        common.RoleRootUser,
+			Status:      common.UserStatusEnabled,
+			DisplayName: "Root User",
+			AccessToken: nil,
+			Quota:       100000000,
+		}
+		err = model.DB.Create(&rootUser).Error
+		if err != nil {
+			c.JSON(500, gin.H{
+				"success": false,
+				"message": "创建管理员账号失败: " + err.Error(),
+			})
+			return
+		}
+	}
+
+	// Set operation modes
+	operation_setting.SelfUseModeEnabled = req.SelfUseModeEnabled
+	operation_setting.DemoSiteEnabled = req.DemoSiteEnabled
+
+	// Save operation modes to database for persistence
+	err = model.UpdateOption("SelfUseModeEnabled", boolToString(req.SelfUseModeEnabled))
+	if err != nil {
+		c.JSON(500, gin.H{
+			"success": false,
+			"message": "保存自用模式设置失败: " + err.Error(),
+		})
+		return
+	}
+
+	err = model.UpdateOption("SelfUseModeEnabled", boolToString(req.DemoSiteEnabled))
+	if err != nil {
+		c.JSON(500, gin.H{
+			"success": false,
+			"message": "保存演示站点模式设置失败: " + err.Error(),
+		})
+		return
+	}
+
+	// Update setup status
+	constant.Setup = true
+
+	setup := model.Setup{
+		Version:       common.Version,
+		InitializedAt: time.Now().Unix(),
+	}
+	err = model.DB.Create(&setup).Error
+	if err != nil {
+		c.JSON(500, gin.H{
+			"success": false,
+			"message": "系统初始化失败: " + err.Error(),
+		})
+		return
+	}
+
+	c.JSON(200, gin.H{
+		"success": true,
+		"message": "系统初始化成功",
+	})
+}
+
+func boolToString(b bool) string {
+	if b {
+		return "true"
+	}
+	return "false"
+}

controller/user.go

@@ -913,11 +913,12 @@ func TopUp(c *gin.Context) {
 }
 
 type UpdateUserSettingRequest struct {
-	QuotaWarningType      string  `json:"notify_type"`
-	QuotaWarningThreshold float64 `json:"quota_warning_threshold"`
-	WebhookUrl            string  `json:"webhook_url,omitempty"`
-	WebhookSecret         string  `json:"webhook_secret,omitempty"`
-	NotificationEmail     string  `json:"notification_email,omitempty"`
+	QuotaWarningType           string  `json:"notify_type"`
+	QuotaWarningThreshold      float64 `json:"quota_warning_threshold"`
+	WebhookUrl                 string  `json:"webhook_url,omitempty"`
+	WebhookSecret              string  `json:"webhook_secret,omitempty"`
+	NotificationEmail          string  `json:"notification_email,omitempty"`
+	AcceptUnsetModelRatioModel bool    `json:"accept_unset_model_ratio_model"`
 }
 
 func UpdateUserSetting(c *gin.Context) {
@@ -993,6 +994,7 @@ func UpdateUserSetting(c *gin.Context) {
 	settings := map[string]interface{}{
 		constant.UserSettingNotifyType:            req.QuotaWarningType,
 		constant.UserSettingQuotaWarningThreshold: req.QuotaWarningThreshold,
+		"accept_unset_model_ratio_model":          req.AcceptUnsetModelRatioModel,
 	}
 
 	// 如果是webhook类型,添加webhook相关设置

docs/channel/other_setting.md

@@ -11,7 +11,7 @@
     - 类型为字符串，填写代理地址（例如 socks5 协议的代理地址）
 
 3. thinking_to_content
-   - 用于标识是否将思考内容`reasoning_conetnt`转换为`<think>`标签拼接到内容中返回
+   - 用于标识是否将思考内容`reasoning_content`转换为`<think>`标签拼接到内容中返回
    - 类型为布尔值，设置为 true 时启用思考内容转换
 
 --------------------------------------------------------------
@@ -30,4 +30,4 @@
 
 --------------------------------------------------------------
 
-通过调整上述 JSON 配置中的值，可以灵活控制渠道的额外行为，比如是否进行格式化以及使用特定的网络代理。
+通过调整上述 JSON 配置中的值，可以灵活控制渠道的额外行为，比如是否进行格式化以及使用特定的网络代理。

middleware/distributor.go

@@ -212,6 +212,7 @@ func SetupContextForSelectedChannel(c *gin.Context, channel *model.Channel, mode
 	c.Set("channel_name", channel.Name)
 	c.Set("channel_type", channel.Type)
 	c.Set("channel_setting", channel.GetSetting())
+	c.Set("param_override", channel.GetParamOverride())
 	if nil != channel.OpenAIOrganization && "" != *channel.OpenAIOrganization {
 		c.Set("channel_organization", *channel.OpenAIOrganization)
 	}

model/channel.go

@@ -36,6 +36,7 @@ type Channel struct {
 	OtherInfo         string  `json:"other_info"`
 	Tag               *string `json:"tag" gorm:"index"`
 	Setting           *string `json:"setting" gorm:"type:text"`
+	ParamOverride     *string `json:"param_override" gorm:"type:text"`
 }
 
 func (channel *Channel) GetModels() []string {
@@ -511,6 +512,17 @@ func (channel *Channel) SetSetting(setting map[string]interface{}) {
 	channel.Setting = common.GetPointer[string](string(settingBytes))
 }
 
+func (channel *Channel) GetParamOverride() map[string]interface{} {
+	paramOverride := make(map[string]interface{})
+	if channel.ParamOverride != nil && *channel.ParamOverride != "" {
+		err := json.Unmarshal([]byte(*channel.ParamOverride), &paramOverride)
+		if err != nil {
+			common.SysError("failed to unmarshal param override: " + err.Error())
+		}
+	}
+	return paramOverride
+}
+
 func GetChannelsByIds(ids []int) ([]*Channel, error) {
 	var channels []*Channel
 	err := DB.Where("id in (?)", ids).Find(&channels).Error

model/main.go

@@ -3,6 +3,7 @@ package model
 import (
 	"log"
 	"one-api/common"
+	"one-api/constant"
 	"os"
 	"strings"
 	"sync"
@@ -55,6 +56,26 @@ func createRootAccountIfNeed() error {
 	return nil
 }
 
+func checkSetup() {
+	if GetSetup() == nil {
+		if RootUserExists() {
+			common.SysLog("system is not initialized, but root user exists")
+			// Create setup record
+			setup := Setup{
+				Version:       common.Version,
+				InitializedAt: time.Now().Unix(),
+			}
+			err := DB.Create(&setup).Error
+			if err != nil {
+				common.SysLog("failed to create setup record: " + err.Error())
+			}
+			constant.Setup = true
+		} else {
+			constant.Setup = false
+		}
+	}
+}
+
 func chooseDB(envName string) (*gorm.DB, error) {
 	defer func() {
 		initCol()
@@ -214,8 +235,10 @@ func migrateDB() error {
 	if err != nil {
 		return err
 	}
+	err = DB.AutoMigrate(&Setup{})
 	common.SysLog("database migrated")
-	err = createRootAccountIfNeed()
+	checkSetup()
+	//err = createRootAccountIfNeed()
 	return err
 }
 

model/setup.go

@@ -0,0 +1,16 @@
+package model
+
+type Setup struct {
+	ID            uint   `json:"id" gorm:"primaryKey"`
+	Version       string `json:"version" gorm:"type:varchar(50);not null"`
+	InitializedAt int64  `json:"initialized_at" gorm:"type:bigint;not null"`
+}
+
+func GetSetup() *Setup {
+	var setup Setup
+	err := DB.First(&setup).Error
+	if err != nil {
+		return nil
+	}
+	return &setup
+}

model/user.go

@@ -808,3 +808,12 @@ func (user *User) FillUserByLinuxDOId() error {
 	err := DB.Where("linux_do_id = ?", user.LinuxDOId).First(user).Error
 	return err
 }
+
+func RootUserExists() bool {
+	var user User
+	err := DB.Where("role = ?", common.RoleRootUser).First(&user).Error
+	if err != nil {
+		return false
+	}
+	return true
+}

relay/channel/dify/relay-dify.go

@@ -198,6 +198,12 @@ func streamResponseDify2OpenAI(difyResponse DifyChunkChatCompletionResponse) *dt
 			choice.Delta.SetReasoningContent(text + "\n")
 		}
 	} else if difyResponse.Event == "message" || difyResponse.Event == "agent_message" {
+		if difyResponse.Answer == "<details style=\"color:gray;background-color: #f8f8f8;padding: 8px;border-radius: 4px;\" open> <summary> Thinking... </summary>\n" {
+			difyResponse.Answer = "<think>"
+		} else if difyResponse.Answer == "</details>" {
+			difyResponse.Answer = "</think>"
+		}
+
 		choice.Delta.SetContentString(difyResponse.Answer)
 	}
 	response.Choices = append(response.Choices, choice)

relay/common/relay_info.go

@@ -76,6 +76,7 @@ type RelayInfo struct {
 	AudioUsage           bool
 	ReasoningEffort      string
 	ChannelSetting       map[string]interface{}
+	ParamOverride        map[string]interface{}
 	UserSetting          map[string]interface{}
 	UserEmail            string
 	UserQuota            int
@@ -131,6 +132,7 @@ func GenRelayInfo(c *gin.Context) *RelayInfo {
 	channelType := c.GetInt("channel_type")
 	channelId := c.GetInt("channel_id")
 	channelSetting := c.GetStringMap("channel_setting")
+	paramOverride := c.GetStringMap("param_override")
 
 	tokenId := c.GetInt("token_id")
 	tokenKey := c.GetString("token_key")
@@ -168,6 +170,7 @@ func GenRelayInfo(c *gin.Context) *RelayInfo {
 		ApiKey:         strings.TrimPrefix(c.Request.Header.Get("Authorization"), "Bearer "),
 		Organization:   c.GetString("channel_organization"),
 		ChannelSetting: channelSetting,
+		ParamOverride:  paramOverride,
 		RelayFormat:    RelayFormatOpenAI,
 		ThinkingContentInfo: ThinkingContentInfo{
 			IsFirstThinkingContent:  true,

relay/helper/price.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"one-api/common"
+	constant2 "one-api/constant"
 	relaycommon "one-api/relay/common"
 	"one-api/setting"
 	"one-api/setting/operation_setting"
@@ -40,10 +41,19 @@ func ModelPriceHelper(c *gin.Context, info *relaycommon.RelayInfo, promptTokens
 		var success bool
 		modelRatio, success = operation_setting.GetModelRatio(info.OriginModelName)
 		if !success {
-			if info.UserId == 1 {
-				return PriceData{}, fmt.Errorf("模型 %s 倍率或价格未配置，请设置或开始自用模式；Model %s ratio or price not set, please set or start self-use mode", info.OriginModelName, info.OriginModelName)
-			} else {
-				return PriceData{}, fmt.Errorf("模型 %s 倍率或价格未配置, 请联系管理员设置；Model %s ratio or price not set, please contact administrator to set", info.OriginModelName, info.OriginModelName)
+			acceptUnsetRatio := false
+			if accept, ok := info.UserSetting[constant2.UserAcceptUnsetRatioModel]; ok {
+				b, ok := accept.(bool)
+				if ok {
+					acceptUnsetRatio = b
+				}
+			}
+			if !acceptUnsetRatio {
+				if info.UserId == 1 {
+					return PriceData{}, fmt.Errorf("模型 %s 倍率或价格未配置，请设置或开始自用模式；Model %s ratio or price not set, please set or start self-use mode", info.OriginModelName, info.OriginModelName)
+				} else {
+					return PriceData{}, fmt.Errorf("模型 %s 倍率或价格未配置, 请联系管理员设置；Model %s ratio or price not set, please contact administrator to set", info.OriginModelName, info.OriginModelName)
+				}
 			}
 		}
 		completionRatio = operation_setting.GetCompletionRatio(info.OriginModelName)

relay/relay-text.go

@@ -168,6 +168,23 @@ func TextHelper(c *gin.Context) (openaiErr *dto.OpenAIErrorWithStatusCode) {
 		if err != nil {
 			return service.OpenAIErrorWrapperLocal(err, "json_marshal_failed", http.StatusInternalServerError)
 		}
+
+		// apply param override
+		if len(relayInfo.ParamOverride) > 0 {
+			reqMap := make(map[string]interface{})
+			err = json.Unmarshal(jsonData, &reqMap)
+			if err != nil {
+				return service.OpenAIErrorWrapperLocal(err, "param_override_unmarshal_failed", http.StatusInternalServerError)
+			}
+			for key, value := range relayInfo.ParamOverride {
+				reqMap[key] = value
+			}
+			jsonData, err = json.Marshal(reqMap)
+			if err != nil {
+				return service.OpenAIErrorWrapperLocal(err, "param_override_marshal_failed", http.StatusInternalServerError)
+			}
+		}
+
 		if common.DebugEnabled {
 			println("requestBody: ", string(jsonData))
 		}

router/api-router.go

@@ -13,6 +13,8 @@ func SetApiRouter(router *gin.Engine) {
 	apiRouter.Use(gzip.Gzip(gzip.DefaultCompression))
 	apiRouter.Use(middleware.GlobalAPIRateLimit())
 	{
+		apiRouter.GET("/setup", controller.GetSetup)
+		apiRouter.POST("/setup", controller.PostSetup)
 		apiRouter.GET("/status", controller.GetStatus)
 		apiRouter.GET("/models", middleware.UserAuth(), controller.DashboardListModels)
 		apiRouter.GET("/status/test", middleware.AdminAuth(), controller.TestStatus)

setting/operation_setting/cache_ratio.go

@@ -14,6 +14,8 @@ var defaultCacheRatio = map[string]float64{
 	"o1-preview":                          0.5,
 	"o1-mini-2024-09-12":                  0.5,
 	"o1-mini":                             0.5,
+	"o3-mini":                             0.5,
+	"o3-mini-2025-01-31":                  0.5,
 	"gpt-4o-2024-11-20":                   0.5,
 	"gpt-4o-2024-08-06":                   0.5,
 	"gpt-4o":                              0.5,
@@ -21,6 +23,8 @@ var defaultCacheRatio = map[string]float64{
 	"gpt-4o-mini":                         0.5,
 	"gpt-4o-realtime-preview":             0.5,
 	"gpt-4o-mini-realtime-preview":        0.5,
+	"gpt-4.5-preview":                     0.5,
+	"gpt-4.5-preview-2025-02-27":          0.5,
 	"deepseek-chat":                       0.25,
 	"deepseek-reasoner":                   0.25,
 	"deepseek-coder":                      0.25,

setting/operation_setting/model-ratio.go

@@ -375,6 +375,17 @@ func GetCompletionRatio(name string) float64 {
 			return ratio
 		}
 	}
+	hardCodedRatio, contain := getHardcodedCompletionModelRatio(name)
+	if contain {
+		return hardCodedRatio
+	}
+	if ratio, ok := CompletionRatio[name]; ok {
+		return ratio
+	}
+	return hardCodedRatio
+}
+
+func getHardcodedCompletionModelRatio(name string) (float64, bool) {
 	lowercaseName := strings.ToLower(name)
 	if strings.HasPrefix(name, "gpt-4-gizmo") {
 		name = "gpt-4-gizmo-*"
@@ -385,87 +396,86 @@ func GetCompletionRatio(name string) float64 {
 	if strings.HasPrefix(name, "gpt-4") && !strings.HasSuffix(name, "-all") && !strings.HasSuffix(name, "-gizmo-*") {
 		if strings.HasPrefix(name, "gpt-4o") {
 			if name == "gpt-4o-2024-05-13" {
-				return 3
+				return 3, true
 			}
-			return 4
+			return 4, true
 		}
-		if strings.HasPrefix(name, "gpt-4.5") {
-			return 2
+		// gpt-4.5-preview匹配
+		if strings.HasPrefix(name, "gpt-4.5-preview") {
+			return 2, true
 		}
-		if strings.HasPrefix(name, "gpt-4-turbo") || strings.HasSuffix(name, "preview") {
-			return 3
+		if strings.HasPrefix(name, "gpt-4-turbo") || strings.HasSuffix(name, "gpt-4-1106") || strings.HasSuffix(name, "gpt-4-1105") {
+			return 3, true
 		}
-		return 2
+		// 没有特殊标记的 gpt-4 模型默认倍率为 2
+		return 2, false
 	}
 	if strings.HasPrefix(name, "o1") || strings.HasPrefix(name, "o3") {
-		return 4
+		return 4, true
 	}
 	if name == "chatgpt-4o-latest" {
-		return 3
+		return 3, true
 	}
 	if strings.Contains(name, "claude-instant-1") {
-		return 3
+		return 3, true
 	} else if strings.Contains(name, "claude-2") {
-		return 3
+		return 3, true
 	} else if strings.Contains(name, "claude-3") {
-		return 5
+		return 5, true
 	}
 	if strings.HasPrefix(name, "gpt-3.5") {
 		if name == "gpt-3.5-turbo" || strings.HasSuffix(name, "0125") {
 			// https://openai.com/blog/new-embedding-models-and-api-updates
 			// Updated GPT-3.5 Turbo model and lower pricing
-			return 3
+			return 3, true
 		}
 		if strings.HasSuffix(name, "1106") {
-			return 2
+			return 2, true
 		}
-		return 4.0 / 3.0
+		return 4.0 / 3.0, true
 	}
 	if strings.HasPrefix(name, "mistral-") {
-		return 3
+		return 3, true
 	}
 	if strings.HasPrefix(name, "gemini-") {
-		return 4
+		return 4, true
 	}
 	if strings.HasPrefix(name, "command") {
 		switch name {
 		case "command-r":
-			return 3
+			return 3, true
 		case "command-r-plus":
-			return 5
+			return 5, true
 		case "command-r-08-2024":
-			return 4
+			return 4, true
 		case "command-r-plus-08-2024":
-			return 4
+			return 4, true
 		default:
-			return 4
+			return 4, true
 		}
 	}
 	// hint 只给官方上4倍率，由于开源模型供应商自行定价，不对其进行补全倍率进行强制对齐
 	if lowercaseName == "deepseek-chat" || lowercaseName == "deepseek-reasoner" {
-		return 4
+		return 4, true
 	}
 	if strings.HasPrefix(name, "ERNIE-Speed-") {
-		return 2
+		return 2, true
 	} else if strings.HasPrefix(name, "ERNIE-Lite-") {
-		return 2
+		return 2, true
 	} else if strings.HasPrefix(name, "ERNIE-Character") {
-		return 2
+		return 2, true
 	} else if strings.HasPrefix(name, "ERNIE-Functions") {
-		return 2
+		return 2, true
 	}
 	switch name {
 	case "llama2-70b-4096":
-		return 0.8 / 0.64
+		return 0.8 / 0.64, true
 	case "llama3-8b-8192":
-		return 2
+		return 2, true
 	case "llama3-70b-8192":
-		return 0.79 / 0.59
-	}
-	if ratio, ok := CompletionRatio[name]; ok {
-		return ratio
+		return 0.79 / 0.59, true
 	}
-	return 1
+	return 1, false
 }
 
 func GetAudioRatio(name string) float64 {

web/src/App.js

@@ -25,6 +25,7 @@ import Task from "./pages/Task/index.js";
 import Playground from './pages/Playground/Playground.js';
 import OAuth2Callback from "./components/OAuth2Callback.js";
 import PersonalSetting from './components/PersonalSetting.js';
+import Setup from './pages/Setup/index.js';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -44,6 +45,14 @@ function App() {
             </Suspense>
           }
         />
+        <Route
+          path='/setup'
+          element={
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
+              <Setup />
+            </Suspense>
+          }
+        />
         <Route
           path='/channel'
           element={

web/src/components/LinuxDoIcon.js

@@ -6,17 +6,27 @@ const LinuxDoIcon = (props) => {
     return (
       <svg
         className='icon'
-        viewBox='0 0 24 24'
+        viewBox='0 0 16 16'
         version='1.1'
         xmlns='http://www.w3.org/2000/svg'
         width='1em'
         height='1em'
         {...props}
       >
-        <path
-          d='M19.7,17.6c-0.1-0.2-0.2-0.4-0.2-0.6c0-0.4-0.2-0.7-0.5-1c-0.1-0.1-0.3-0.2-0.4-0.2c0.6-1.8-0.3-3.6-1.3-4.9c0,0,0,0,0,0c-0.8-1.2-2-2.1-1.9-3.7c0-1.9,0.2-5.4-3.3-5.1C8.5,2.3,9.5,6,9.4,7.3c0,1.1-0.5,2.2-1.3,3.1c-0.2,0.2-0.4,0.5-0.5,0.7c-1,1.2-1.5,2.8-1.5,4.3c-0.2,0.2-0.4,0.4-0.5,0.6c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.3,0.2-0.5,0.3c-0.4,0.1-0.7,0.3-0.9,0.7c-0.1,0.3-0.2,0.7-0.1,1.1c0.1,0.2,0.1,0.4,0,0.7c-0.2,0.4-0.2,0.9,0,1.4c0.3,0.4,0.8,0.5,1.5,0.6c0.5,0,1.1,0.2,1.6,0.4l0,0c0.5,0.3,1.1,0.5,1.7,0.5c0.3,0,0.7-0.1,1-0.2c0.3-0.2,0.5-0.4,0.6-0.7c0.4,0,1-0.2,1.7-0.2c0.6,0,1.2,0.2,2,0.1c0,0.1,0,0.2,0.1,0.3c0.2,0.5,0.7,0.9,1.3,1c0.1,0,0.1,0,0.2,0c0.8-0.1,1.6-0.5,2.1-1.1l0,0c0.4-0.4,0.9-0.7,1.4-0.9c0.6-0.3,1-0.5,1.1-1C20.3,18.6,20.1,18.2,19.7,17.6z M12.8,4.8c0.6,0.1,1.1,0.6,1,1.2c0,0.3-0.1,0.6-0.3,0.9c0,0,0,0-0.1,0c-0.2-0.1-0.3-0.1-0.4-0.2c0.1-0.1,0.1-0.3,0.2-0.5c0-0.4-0.2-0.7-0.4-0.7c-0.3,0-0.5,0.3-0.5,0.7c0,0,0,0.1,0,0.1c-0.1-0.1-0.3-0.1-0.4-0.2c0,0,0-0.1,0-0.1C11.8,5.5,12.2,4.9,12.8,4.8z M12.5,6.8c0.1,0.1,0.3,0.2,0.4,0.2c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.4,0.2,0.4,0.5c0,0.3-0.3,0.6-0.9,0.8c-0.2,0.1-0.3,0.1-0.4,0.2c-0.3,0.2-0.6,0.3-1,0.3c-0.3,0-0.6-0.2-0.8-0.4c-0.1-0.1-0.2-0.2-0.4-0.3C10.1,8.2,9.9,8,9.8,7.7c0-0.1,0.1-0.2,0.2-0.3c0.3-0.2,0.4-0.3,0.5-0.4l0.1-0.1c0.2-0.3,0.6-0.5,1-0.5C11.9,6.5,12.2,6.6,12.5,6.8z M10.4,5c0.4,0,0.7,0.4,0.8,1.1c0,0.1,0,0.1,0,0.2c-0.1,0-0.3,0.1-0.4,0.2c0,0,0-0.1,0-0.2c0-0.3-0.2-0.6-0.4-0.5c-0.2,0-0.3,0.3-0.3,0.6c0,0.2,0.1,0.3,0.2,0.4l0,0c0,0-0.1,0.1-0.2,0.1C9.9,6.7,9.7,6.4,9.7,6.1C9.7,5.5,10,5,10.4,5z M9.4,21.1c-0.7,0.3-1.6,0.2-2.2-0.2c-0.6-0.3-1.1-0.4-1.8-0.4c-0.5-0.1-1-0.1-1.1-0.3c-0.1-0.2-0.1-0.5,0.1-1c0.1-0.3,0.1-0.6,0-0.9c-0.1-0.3-0.1-0.5,0-0.8C4.5,17.2,4.7,17.1,5,17c0.3-0.1,0.5-0.2,0.7-0.4c0.1-0.1,0.2-0.2,0.3-0.4c0.3-0.4,0.5-0.6,0.8-0.6c0.6,0.1,1.1,1,1.5,1.9c0.2,0.3,0.4,0.7,0.7,1c0.4,0.5,0.9,1.2,0.9,1.6C9.9,20.6,9.7,20.9,9.4,21.1z M14.3,18.9c0,0.1,0,0.1-0.1,0.2c-1.2,0.9-2.8,1-4.1,0.3c-0.2-0.3-0.4-0.6-0.6-0.9c0.9-0.1,0.7-1.3-1.2-2.5c-2-1.3-0.6-3.7,0.1-4.8c0.1-0.1,0.1,0-0.3,0.8c-0.3,0.6-0.9,2.1-0.1,3.2c0-0.8,0.2-1.6,0.5-2.4c0.7-1.3,1.2-2.8,1.5-4.3c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.3,0.6,0.4,0.9,0.4c0,0,0.1,0,0.1,0c0.4,0,0.8-0.1,1.1-0.4c0.1-0.1,0.2-0.2,0.4-0.2c0.3-0.1,0.6-0.3,0.9-0.6c0.4,1.3,0.8,2.5,1.4,3.6c0.4,0.8,0.7,1.6,0.9,2.5c0.3,0,0.7,0.1,1,0.3c0.8,0.4,1.1,0.7,1,1.2c-0.1,0-0.1,0-0.2,0c0-0.3-0.2-0.6-0.9-0.9c-0.7-0.3-1.3-0.3-1.5,0.4c-0.1,0-0.2,0.1-0.3,0.1c-0.8,0.4-0.8,1.5-0.9,2.6C14.5,18.2,14.4,18.5,14.3,18.9z M18.9,19.5c-0.6,0.2-1.1,0.6-1.5,1.1c-0.4,0.6-1.1,1-1.9,0.9c-0.4,0-0.8-0.3-0.9-0.7c-0.1-0.6-0.1-1.2,0.2-1.8c0.1-0.4,0.2-0.7,0.3-1.1c0.1-1.2,0.1-1.9,0.6-2.2h0c0,0.5,0.3,0.8,0.7,1c0.5,0,1-0.1,1.4-0.5c0.1,0,0.1,0,0.2,0c0.3,0,0.5,0,0.7,0.2c0.2,0.2,0.3,0.5,0.3,0.7c0,0.3,0.2,0.6,0.3,0.9c0.5,0.5,0.5,0.8,0.5,0.9C19.7,19.1,19.3,19.3,18.9,19.5z M9.9,7.5c-0.1,0-0.1,0-0.1,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0,0c0.1,0,0.1,0.1,0.1,0.1c0.3,0.4,0.8,0.6,1.4,0.7c0.5-0.1,1-0.2,1.5-0.6c0.2-0.1,0.4-0.2,0.6-0.3c0.1,0,0.1-0.1,0.1-0.1c0-0.1,0-0.1-0.1-0.1l0,0c-0.2,0.1-0.5,0.2-0.7,0.3c-0.4,0.3-0.9,0.5-1.4,0.5c-0.5,0-0.9-0.3-1.2-0.6C10.1,7.6,10,7.5,9.9,7.5z'
-          fill='currentColor'
-        />
+        <g id='linuxdo_icon' data-name='linuxdo_icon'>
+          <path
+            d='m7.44,0s.09,0,.13,0c.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0q.12,0,.25,0t.26.08c.15.03.29.06.44.08,1.97.38,3.78,1.47,4.95,3.11.04.06.09.12.13.18.67.96,1.15,2.11,1.3,3.28q0,.19.09.26c0,.15,0,.29,0,.44,0,.04,0,.09,0,.13,0,.09,0,.19,0,.28,0,.14,0,.29,0,.43,0,.09,0,.18,0,.27,0,.08,0,.17,0,.25q0,.19-.08.26c-.03.15-.06.29-.08.44-.38,1.97-1.47,3.78-3.11,4.95-.06.04-.12.09-.18.13-.96.67-2.11,1.15-3.28,1.3q-.19,0-.26.09c-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25,0q-.19,0-.26-.08c-.15-.03-.29-.06-.44-.08-1.97-.38-3.78-1.47-4.95-3.11q-.07-.09-.13-.18c-.67-.96-1.15-2.11-1.3-3.28q0-.19-.09-.26c0-.15,0-.29,0-.44,0-.04,0-.09,0-.13,0-.09,0-.19,0-.28,0-.14,0-.29,0-.43,0-.09,0-.18,0-.27,0-.08,0-.17,0-.25q0-.19.08-.26c.03-.15.06-.29.08-.44.38-1.97,1.47-3.78,3.11-4.95.06-.04.12-.09.18-.13C4.42.73,5.57.26,6.74.1,7,.07,7.15,0,7.44,0Z'
+            fill='#EFEFEF'
+          />
+          <path
+            d='m1.27,11.33h13.45c-.94,1.89-2.51,3.21-4.51,3.88-1.99.59-3.96.37-5.8-.57-1.25-.7-2.67-1.9-3.14-3.3Z'
+            fill='#FEB005'
+          />
+          <path
+            d='m12.54,1.99c.87.7,1.82,1.59,2.18,2.68H1.27c.87-1.74,2.33-3.13,4.2-3.78,2.44-.79,5-.47,7.07,1.1Z'
+            fill='#1D1D1F'
+          />
+        </g>
       </svg>
     );
   }
@@ -24,4 +34,4 @@ const LinuxDoIcon = (props) => {
   return <Icon svg={<CustomIcon />} />;
 };
 
-export default LinuxDoIcon;
+export default LinuxDoIcon;

web/src/components/PersonalSetting.js

@@ -1,824 +1,852 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {useNavigate} from 'react-router-dom';
+import React, { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
-    API,
-    copy,
-    isRoot,
-    showError,
-    showInfo,
-    showSuccess,
+  API,
+  copy,
+  isRoot,
+  showError,
+  showInfo,
+  showSuccess
 } from '../helpers';
 import Turnstile from 'react-turnstile';
-import {UserContext} from '../context/User';
-import {onGitHubOAuthClicked, onOIDCClicked, onLinuxDOOAuthClicked} from './utils';
+import { UserContext } from '../context/User';
+import { onGitHubOAuthClicked, onOIDCClicked, onLinuxDOOAuthClicked } from './utils';
 import {
-    Avatar,
-    Banner,
-    Button,
-    Card,
-    Descriptions,
-    Image,
-    Input,
-    InputNumber,
-    Layout,
-    Modal,
-    Space,
-    Tag,
-    Typography,
-    Collapsible,
-    Select,
-    Radio,
-    RadioGroup,
-    AutoComplete,
+  Avatar,
+  Banner,
+  Button,
+  Card,
+  Descriptions,
+  Image,
+  Input,
+  InputNumber,
+  Layout,
+  Modal,
+  Space,
+  Tag,
+  Typography,
+  Collapsible,
+  Select,
+  Radio,
+  RadioGroup,
+  AutoComplete,
+  Checkbox,
+  Tabs,
+  TabPane
 } from '@douyinfe/semi-ui';
 import {
-    getQuotaPerUnit,
-    renderQuota,
-    renderQuotaWithPrompt,
-    stringToColor,
+  getQuotaPerUnit,
+  renderQuota,
+  renderQuotaWithPrompt,
+  stringToColor
 } from '../helpers/render';
 import TelegramLoginButton from 'react-telegram-login';
 import { useTranslation } from 'react-i18next';
 
 const PersonalSetting = () => {
-    const [userState, userDispatch] = useContext(UserContext);
-    let navigate = useNavigate();
-    const { t } = useTranslation();
+  const [userState, userDispatch] = useContext(UserContext);
+  let navigate = useNavigate();
+  const { t } = useTranslation();
 
-    const [inputs, setInputs] = useState({
-        wechat_verification_code: '',
-        email_verification_code: '',
-        email: '',
-        self_account_deletion_confirmation: '',
-        set_new_password: '',
-        set_new_password_confirmation: '',
-    });
-    const [status, setStatus] = useState({});
-    const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
-    const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
-    const [showEmailBindModal, setShowEmailBindModal] = useState(false);
-    const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
-    const [turnstileEnabled, setTurnstileEnabled] = useState(false);
-    const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
-    const [turnstileToken, setTurnstileToken] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [disableButton, setDisableButton] = useState(false);
-    const [countdown, setCountdown] = useState(30);
-    const [affLink, setAffLink] = useState('');
-    const [systemToken, setSystemToken] = useState('');
-    const [models, setModels] = useState([]);
-    const [openTransfer, setOpenTransfer] = useState(false);
-    const [transferAmount, setTransferAmount] = useState(0);
-    const [isModelsExpanded, setIsModelsExpanded] = useState(() => {
-        // Initialize from localStorage if available
-        const savedState = localStorage.getItem('modelsExpanded');
-        return savedState ? JSON.parse(savedState) : false;
-    });
-    const MODELS_DISPLAY_COUNT = 10;  // 默认显示的模型数量
-    const [notificationSettings, setNotificationSettings] = useState({
-        warningType: 'email',
-        warningThreshold: 100000,
-        webhookUrl: '',
-        webhookSecret: '',
-        notificationEmail: ''
+  const [inputs, setInputs] = useState({
+    wechat_verification_code: '',
+    email_verification_code: '',
+    email: '',
+    self_account_deletion_confirmation: '',
+    set_new_password: '',
+    set_new_password_confirmation: ''
+  });
+  const [status, setStatus] = useState({});
+  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
+  const [showWeChatBindModal, setShowWeChatBindModal] = useState(false);
+  const [showEmailBindModal, setShowEmailBindModal] = useState(false);
+  const [showAccountDeleteModal, setShowAccountDeleteModal] = useState(false);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+  const [countdown, setCountdown] = useState(30);
+  const [affLink, setAffLink] = useState('');
+  const [systemToken, setSystemToken] = useState('');
+  const [models, setModels] = useState([]);
+  const [openTransfer, setOpenTransfer] = useState(false);
+  const [transferAmount, setTransferAmount] = useState(0);
+  const [isModelsExpanded, setIsModelsExpanded] = useState(() => {
+    // Initialize from localStorage if available
+    const savedState = localStorage.getItem('modelsExpanded');
+    return savedState ? JSON.parse(savedState) : false;
+  });
+  const MODELS_DISPLAY_COUNT = 10;  // 默认显示的模型数量
+  const [notificationSettings, setNotificationSettings] = useState({
+    warningType: 'email',
+    warningThreshold: 100000,
+    webhookUrl: '',
+    webhookSecret: '',
+    notificationEmail: '',
+    acceptUnsetModelRatioModel: false
+  });
+  const [showWebhookDocs, setShowWebhookDocs] = useState(false);
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      setStatus(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+    getUserData().then((res) => {
+      console.log(userState);
     });
-    const [showWebhookDocs, setShowWebhookDocs] = useState(false);
+    loadModels().then();
+    getAffLink().then();
+    setTransferAmount(getQuotaPerUnit());
+  }, []);
 
-    useEffect(() => {
-        let status = localStorage.getItem('status');
-        if (status) {
-            status = JSON.parse(status);
-            setStatus(status);
-            if (status.turnstile_check) {
-                setTurnstileEnabled(true);
-                setTurnstileSiteKey(status.turnstile_site_key);
-            }
-        }
-        getUserData().then((res) => {
-            console.log(userState);
-        });
-        loadModels().then();
-        getAffLink().then();
-        setTransferAmount(getQuotaPerUnit());
-    }, []);
+  useEffect(() => {
+    let countdownInterval = null;
+    if (disableButton && countdown > 0) {
+      countdownInterval = setInterval(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    } else if (countdown === 0) {
+      setDisableButton(false);
+      setCountdown(30);
+    }
+    return () => clearInterval(countdownInterval); // Clean up on unmount
+  }, [disableButton, countdown]);
 
-    useEffect(() => {
-        let countdownInterval = null;
-        if (disableButton && countdown > 0) {
-            countdownInterval = setInterval(() => {
-                setCountdown(countdown - 1);
-            }, 1000);
-        } else if (countdown === 0) {
-            setDisableButton(false);
-            setCountdown(30);
-        }
-        return () => clearInterval(countdownInterval); // Clean up on unmount
-    }, [disableButton, countdown]);
+  useEffect(() => {
+    if (userState?.user?.setting) {
+      const settings = JSON.parse(userState.user.setting);
+      setNotificationSettings({
+        warningType: settings.notify_type || 'email',
+        warningThreshold: settings.quota_warning_threshold || 500000,
+        webhookUrl: settings.webhook_url || '',
+        webhookSecret: settings.webhook_secret || '',
+        notificationEmail: settings.notification_email || '',
+        acceptUnsetModelRatioModel: settings.accept_unset_model_ratio_model || false
+      });
+    }
+  }, [userState?.user?.setting]);
 
-    useEffect(() => {
-        if (userState?.user?.setting) {
-            const settings = JSON.parse(userState.user.setting);
-            setNotificationSettings({
-                warningType: settings.notify_type || 'email',
-                warningThreshold: settings.quota_warning_threshold || 500000,
-                webhookUrl: settings.webhook_url || '',
-                webhookSecret: settings.webhook_secret || '',
-                notificationEmail: settings.notification_email || ''
-            });
-        }
-    }, [userState?.user?.setting]);
+  // Save models expanded state to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('modelsExpanded', JSON.stringify(isModelsExpanded));
+  }, [isModelsExpanded]);
 
-    // Save models expanded state to localStorage whenever it changes
-    useEffect(() => {
-        localStorage.setItem('modelsExpanded', JSON.stringify(isModelsExpanded));
-    }, [isModelsExpanded]);
+  const handleInputChange = (name, value) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
 
-    const handleInputChange = (name, value) => {
-        setInputs((inputs) => ({...inputs, [name]: value}));
-    };
+  const generateAccessToken = async () => {
+    const res = await API.get('/api/user/token');
+    const { success, message, data } = res.data;
+    if (success) {
+      setSystemToken(data);
+      await copy(data);
+      showSuccess(t('令牌已重置并已复制到剪贴板'));
+    } else {
+      showError(message);
+    }
+  };
 
-    const generateAccessToken = async () => {
-        const res = await API.get('/api/user/token');
-        const {success, message, data} = res.data;
-        if (success) {
-            setSystemToken(data);
-            await copy(data);
-            showSuccess(t('令牌已重置并已复制到剪贴板'));
-        } else {
-            showError(message);
-        }
-    };
+  const getAffLink = async () => {
+    const res = await API.get('/api/user/aff');
+    const { success, message, data } = res.data;
+    if (success) {
+      let link = `${window.location.origin}/register?aff=${data}`;
+      setAffLink(link);
+    } else {
+      showError(message);
+    }
+  };
 
-    const getAffLink = async () => {
-        const res = await API.get('/api/user/aff');
-        const {success, message, data} = res.data;
-        if (success) {
-            let link = `${window.location.origin}/register?aff=${data}`;
-            setAffLink(link);
-        } else {
-            showError(message);
-        }
-    };
+  const getUserData = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      userDispatch({ type: 'login', payload: data });
+    } else {
+      showError(message);
+    }
+  };
 
-    const getUserData = async () => {
-        let res = await API.get(`/api/user/self`);
-        const {success, message, data} = res.data;
-        if (success) {
-            userDispatch({type: 'login', payload: data});
-        } else {
-            showError(message);
-        }
-    };
+  const loadModels = async () => {
+    let res = await API.get(`/api/user/models`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data != null) {
+        setModels(data);
+      }
+    } else {
+      showError(message);
+    }
+  };
 
-    const loadModels = async () => {
-        let res = await API.get(`/api/user/models`);
-        const {success, message, data} = res.data;
-        if (success) {
-            if (data != null) {
-                setModels(data);
-            }
-        } else {
-            showError(message);
-        }
-    };
+  const handleAffLinkClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(t('邀请链接已复制到剪切板'));
+  };
 
-    const handleAffLinkClick = async (e) => {
-        e.target.select();
-        await copy(e.target.value);
-        showSuccess(t('邀请链接已复制到剪切板'));
-    };
+  const handleSystemTokenClick = async (e) => {
+    e.target.select();
+    await copy(e.target.value);
+    showSuccess(t('系统令牌已复制到剪切板'));
+  };
 
-    const handleSystemTokenClick = async (e) => {
-        e.target.select();
-        await copy(e.target.value);
-        showSuccess(t('系统令牌已复制到剪切板'));
-    };
+  const deleteAccount = async () => {
+    if (inputs.self_account_deletion_confirmation !== userState.user.username) {
+      showError(t('请输入你的账户名以确认删除！'));
+      return;
+    }
 
-    const deleteAccount = async () => {
-        if (inputs.self_account_deletion_confirmation !== userState.user.username) {
-            showError(t('请输入你的账户名以确认删除！'));
-            return;
-        }
+    const res = await API.delete('/api/user/self');
+    const { success, message } = res.data;
 
-        const res = await API.delete('/api/user/self');
-        const {success, message} = res.data;
+    if (success) {
+      showSuccess(t('账户已删除！'));
+      await API.get('/api/user/logout');
+      userDispatch({ type: 'logout' });
+      localStorage.removeItem('user');
+      navigate('/login');
+    } else {
+      showError(message);
+    }
+  };
 
-        if (success) {
-            showSuccess(t('账户已删除！'));
-            await API.get('/api/user/logout');
-            userDispatch({type: 'logout'});
-            localStorage.removeItem('user');
-            navigate('/login');
-        } else {
-            showError(message);
-        }
-    };
+  const bindWeChat = async () => {
+    if (inputs.wechat_verification_code === '') return;
+    const res = await API.get(
+      `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('微信账户绑定成功！'));
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+  };
 
-    const bindWeChat = async () => {
-        if (inputs.wechat_verification_code === '') return;
-        const res = await API.get(
-            `/api/oauth/wechat/bind?code=${inputs.wechat_verification_code}`,
-        );
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess(t('微信账户绑定成功！'));
-            setShowWeChatBindModal(false);
-        } else {
-            showError(message);
-        }
-    };
+  const changePassword = async () => {
+    if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
+      showError(t('两次输入的密码不一致！'));
+      return;
+    }
+    const res = await API.put(`/api/user/self`, {
+      password: inputs.set_new_password
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('密码修改成功！'));
+      setShowWeChatBindModal(false);
+    } else {
+      showError(message);
+    }
+    setShowChangePasswordModal(false);
+  };
 
-    const changePassword = async () => {
-        if (inputs.set_new_password !== inputs.set_new_password_confirmation) {
-            showError(t('两次输入的密码不一致！'));
-            return;
-        }
-        const res = await API.put(`/api/user/self`, {
-            password: inputs.set_new_password,
-        });
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess(t('密码修改成功！'));
-            setShowWeChatBindModal(false);
-        } else {
-            showError(message);
-        }
-        setShowChangePasswordModal(false);
-    };
+  const transfer = async () => {
+    if (transferAmount < getQuotaPerUnit()) {
+      showError(t('划转金额最低为') + ' ' + renderQuota(getQuotaPerUnit()));
+      return;
+    }
+    const res = await API.post(`/api/user/aff_transfer`, {
+      quota: transferAmount
+    });
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(message);
+      setOpenTransfer(false);
+      getUserData().then();
+    } else {
+      showError(message);
+    }
+  };
 
-    const transfer = async () => {
-        if (transferAmount < getQuotaPerUnit()) {
-            showError(t('划转金额最低为') + ' ' + renderQuota(getQuotaPerUnit()));
-            return;
-        }
-        const res = await API.post(`/api/user/aff_transfer`, {
-            quota: transferAmount,
-        });
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess(message);
-            setOpenTransfer(false);
-            getUserData().then();
-        } else {
-            showError(message);
-        }
-    };
+  const sendVerificationCode = async () => {
+    if (inputs.email === '') {
+      showError(t('请输入邮箱！'));
+      return;
+    }
+    setDisableButton(true);
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('验证码发送成功，请检查邮箱！'));
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
 
-    const sendVerificationCode = async () => {
-        if (inputs.email === '') {
-            showError(t('请输入邮箱！'));
-            return;
-        }
-        setDisableButton(true);
-        if (turnstileEnabled && turnstileToken === '') {
-            showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
-            return;
-        }
-        setLoading(true);
-        const res = await API.get(
-            `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
-        );
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess(t('验证码发送成功，请检查邮箱！'));
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
+  const bindEmail = async () => {
+    if (inputs.email_verification_code === '') {
+      showError(t('请输入邮箱验证码！'));
+      return;
+    }
+    setLoading(true);
+    const res = await API.get(
+      `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess(t('邮箱账户绑定成功！'));
+      setShowEmailBindModal(false);
+      userState.user.email = inputs.email;
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
 
-    const bindEmail = async () => {
-        if (inputs.email_verification_code === '') {
-            showError(t('请输入邮箱验证码！'));
-            return;
-        }
-        setLoading(true);
-        const res = await API.get(
-            `/api/oauth/email/bind?email=${inputs.email}&code=${inputs.email_verification_code}`,
-        );
-        const {success, message} = res.data;
-        if (success) {
-            showSuccess(t('邮箱账户绑定成功！'));
-            setShowEmailBindModal(false);
-            userState.user.email = inputs.email;
-        } else {
-            showError(message);
-        }
-        setLoading(false);
-    };
+  const getUsername = () => {
+    if (userState.user) {
+      return userState.user.username;
+    } else {
+      return 'null';
+    }
+  };
 
-    const getUsername = () => {
-        if (userState.user) {
-            return userState.user.username;
-        } else {
-            return 'null';
-        }
-    };
+  const handleCancel = () => {
+    setOpenTransfer(false);
+  };
 
-    const handleCancel = () => {
-        setOpenTransfer(false);
-    };
+  const copyText = async (text) => {
+    if (await copy(text)) {
+      showSuccess(t('已复制：') + text);
+    } else {
+      // setSearchKeyword(text);
+      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+    }
+  };
 
-    const copyText = async (text) => {
-        if (await copy(text)) {
-            showSuccess(t('已复制：') + text);
-        } else {
-            // setSearchKeyword(text);
-            Modal.error({title: t('无法复制到剪贴板，请手动复制'), content: text});
-        }
-    };
+  const handleNotificationSettingChange = (type, value) => {
+    setNotificationSettings(prev => ({
+      ...prev,
+      [type]: value.target ? value.target.value : value  // 处理 Radio 事件对象
+    }));
+  };
 
-    const handleNotificationSettingChange = (type, value) => {
-        setNotificationSettings(prev => ({
-            ...prev,
-            [type]: value.target ? value.target.value : value  // 处理 Radio 事件对象
-        }));
-    };
+  const saveNotificationSettings = async () => {
+    try {
+      const res = await API.put('/api/user/setting', {
+        notify_type: notificationSettings.warningType,
+        quota_warning_threshold: parseFloat(notificationSettings.warningThreshold),
+        webhook_url: notificationSettings.webhookUrl,
+        webhook_secret: notificationSettings.webhookSecret,
+        notification_email: notificationSettings.notificationEmail,
+        accept_unset_model_ratio_model: notificationSettings.acceptUnsetModelRatioModel
+      });
 
-    const saveNotificationSettings = async () => {
-        try {
-            const res = await API.put('/api/user/setting', {
-                notify_type: notificationSettings.warningType,
-                quota_warning_threshold: parseFloat(notificationSettings.warningThreshold),
-                webhook_url: notificationSettings.webhookUrl,
-                webhook_secret: notificationSettings.webhookSecret,
-                notification_email: notificationSettings.notificationEmail
-            });
-            
-            if (res.data.success) {
-                showSuccess(t('通知设置已更新'));
-                await getUserData();
-            } else {
-                showError(res.data.message);
-            }
-        } catch (error) {
-            showError(t('更新通知设置失败'));
-        }
-    };
+      if (res.data.success) {
+        showSuccess(t('通知设置已更新'));
+        await getUserData();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(t('更新通知设置失败'));
+    }
+  };
 
-    return (
+  return (
 
-        <div>
-            <Layout>
-                <Layout.Content>
-                    <Modal
-                        title={t('请输入要划转的数量')}
-                        visible={openTransfer}
-                        onOk={transfer}
-                        onCancel={handleCancel}
-                        maskClosable={false}
-                        size={'small'}
-                        centered={true}
+    <div>
+      <Layout>
+        <Layout.Content>
+          <Modal
+            title={t('请输入要划转的数量')}
+            visible={openTransfer}
+            onOk={transfer}
+            onCancel={handleCancel}
+            maskClosable={false}
+            size={'small'}
+            centered={true}
+          >
+            <div style={{ marginTop: 20 }}>
+              <Typography.Text>{t('可用额度')}{renderQuotaWithPrompt(userState?.user?.aff_quota)}</Typography.Text>
+              <Input
+                style={{ marginTop: 5 }}
+                value={userState?.user?.aff_quota}
+                disabled={true}
+              ></Input>
+            </div>
+            <div style={{ marginTop: 20 }}>
+              <Typography.Text>
+                {t('划转额度')}{renderQuotaWithPrompt(transferAmount)} {t('最低') + renderQuota(getQuotaPerUnit())}
+              </Typography.Text>
+              <div>
+                <InputNumber
+                  min={0}
+                  style={{ marginTop: 5 }}
+                  value={transferAmount}
+                  onChange={(value) => setTransferAmount(value)}
+                  disabled={false}
+                ></InputNumber>
+              </div>
+            </div>
+          </Modal>
+          <div>
+            <Card
+              title={
+                <Card.Meta
+                  avatar={
+                    <Avatar
+                      size="default"
+                      color={stringToColor(getUsername())}
+                      style={{ marginRight: 4 }}
                     >
-                        <div style={{marginTop: 20}}>
-                            <Typography.Text>{t('可用额度')}{renderQuotaWithPrompt(userState?.user?.aff_quota)}</Typography.Text>
-                            <Input
-                                style={{marginTop: 5}}
-                                value={userState?.user?.aff_quota}
-                                disabled={true}
-                            ></Input>
-                        </div>
-                        <div style={{marginTop: 20}}>
-                            <Typography.Text>
-                                {t('划转额度')}{renderQuotaWithPrompt(transferAmount)} {t('最低') + renderQuota(getQuotaPerUnit())}
-                            </Typography.Text>
-                            <div>
-                                <InputNumber
-                                    min={0}
-                                    style={{marginTop: 5}}
-                                    value={transferAmount}
-                                    onChange={(value) => setTransferAmount(value)}
-                                    disabled={false}
-                                ></InputNumber>
-                            </div>
-                        </div>
-                    </Modal>
-                    <div>
-                        <Card
-                            title={
-                                <Card.Meta
-                                    avatar={
-                                        <Avatar
-                                            size='default'
-                                            color={stringToColor(getUsername())}
-                                            style={{marginRight: 4}}
-                                        >
-                                            {typeof getUsername() === 'string' &&
-                                                getUsername().slice(0, 1)}
-                                        </Avatar>
-                                    }
-                                    title={<Typography.Text>{getUsername()}</Typography.Text>}
-                                    description={
-                                        isRoot() ? (
-                                            <Tag color='red'>{t('管理员')}</Tag>
-                                        ) : (
-                                            <Tag color='blue'>{t('普通用户')}</Tag>
-                                        )
-                                    }
-                                ></Card.Meta>
-                            }
-                            headerExtraContent={
-                                <>
-                                    <Space vertical align='start'>
-                                        <Tag color='green'>{'ID: ' + userState?.user?.id}</Tag>
-                                        <Tag color='blue'>{userState?.user?.group}</Tag>
-                                    </Space>
-                                </>
-                            }
-                            footer={
-                            <>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                                    <Typography.Title heading={6}>{t('可用模型')}</Typography.Title>
-                                </div>
-                                <div style={{marginTop: 10}}>
-                                    {models.length <= MODELS_DISPLAY_COUNT ? (
-                                        <Space wrap>
-                                            {models.map((model) => (
-                                                <Tag
-                                                    key={model}
-                                                    color='cyan'
-                                                    onClick={() => {
-                                                        copyText(model);
-                                                    }}
-                                                >
-                                                    {model}
-                                                </Tag>
-                                            ))}
-                                        </Space>
-                                    ) : (
-                                        <>
-                                            <Collapsible isOpen={isModelsExpanded}>
-                                                <Space wrap>
-                                                    {models.map((model) => (
-                                                        <Tag
-                                                            key={model}
-                                                            color='cyan'
-                                                            onClick={() => {
-                                                                copyText(model);
-                                                            }}
-                                                        >
-                                                            {model}
-                                                        </Tag>
-                                                    ))}
-                                                    <Tag 
-                                                        color='blue' 
-                                                        type="light"
-                                                        style={{ cursor: 'pointer' }}
-                                                        onClick={() => setIsModelsExpanded(false)}
-                                                    >
-                                                        {t('收起')}
-                                                    </Tag>
-                                                </Space>
-                                            </Collapsible>
-                                            {!isModelsExpanded && (
-                                                <Space wrap>
-                                                    {models.slice(0, MODELS_DISPLAY_COUNT).map((model) => (
-                                                        <Tag
-                                                            key={model}
-                                                            color='cyan'
-                                                            onClick={() => {
-                                                                copyText(model);
-                                                            }}
-                                                        >
-                                                            {model}
-                                                        </Tag>
-                                                    ))}
-                                                    <Tag 
-                                                        color='blue'
-                                                        type="light"
-                                                        style={{ cursor: 'pointer' }}
-                                                        onClick={() => setIsModelsExpanded(true)}
-                                                    >
-                                                        {t('更多')} {models.length - MODELS_DISPLAY_COUNT} {t('个模型')}
-                                                    </Tag>
-                                                </Space>
-                                            )}
-                                        </>
-                                    )}
-                                </div>
-                            </>
+                      {typeof getUsername() === 'string' &&
+                        getUsername().slice(0, 1)}
+                    </Avatar>
+                  }
+                  title={<Typography.Text>{getUsername()}</Typography.Text>}
+                  description={
+                    isRoot() ? (
+                      <Tag color="red">{t('管理员')}</Tag>
+                    ) : (
+                      <Tag color="blue">{t('普通用户')}</Tag>
+                    )
+                  }
+                ></Card.Meta>
+              }
+              headerExtraContent={
+                <>
+                  <Space vertical align="start">
+                    <Tag color="green">{'ID: ' + userState?.user?.id}</Tag>
+                    <Tag color="blue">{userState?.user?.group}</Tag>
+                  </Space>
+                </>
+              }
+              footer={
+                <>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Typography.Title heading={6}>{t('可用模型')}</Typography.Title>
+                  </div>
+                  <div style={{ marginTop: 10 }}>
+                    {models.length <= MODELS_DISPLAY_COUNT ? (
+                      <Space wrap>
+                        {models.map((model) => (
+                          <Tag
+                            key={model}
+                            color="cyan"
+                            onClick={() => {
+                              copyText(model);
+                            }}
+                          >
+                            {model}
+                          </Tag>
+                        ))}
+                      </Space>
+                    ) : (
+                      <>
+                        <Collapsible isOpen={isModelsExpanded}>
+                          <Space wrap>
+                            {models.map((model) => (
+                              <Tag
+                                key={model}
+                                color="cyan"
+                                onClick={() => {
+                                  copyText(model);
+                                }}
+                              >
+                                {model}
+                              </Tag>
+                            ))}
+                            <Tag
+                              color="blue"
+                              type="light"
+                              style={{ cursor: 'pointer' }}
+                              onClick={() => setIsModelsExpanded(false)}
+                            >
+                              {t('收起')}
+                            </Tag>
+                          </Space>
+                        </Collapsible>
+                        {!isModelsExpanded && (
+                          <Space wrap>
+                            {models.slice(0, MODELS_DISPLAY_COUNT).map((model) => (
+                              <Tag
+                                key={model}
+                                color="cyan"
+                                onClick={() => {
+                                  copyText(model);
+                                }}
+                              >
+                                {model}
+                              </Tag>
+                            ))}
+                            <Tag
+                              color="blue"
+                              type="light"
+                              style={{ cursor: 'pointer' }}
+                              onClick={() => setIsModelsExpanded(true)}
+                            >
+                              {t('更多')} {models.length - MODELS_DISPLAY_COUNT} {t('个模型')}
+                            </Tag>
+                          </Space>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </>
 
-                            }
-                        >
-                            <Descriptions row>
-                                <Descriptions.Item itemKey={t('当前余额')}>
-                                    {renderQuota(userState?.user?.quota)}
-                                </Descriptions.Item>
-                                <Descriptions.Item itemKey={t('历史消耗')}>
-                                    {renderQuota(userState?.user?.used_quota)}
-                                </Descriptions.Item>
-                                <Descriptions.Item itemKey={t('请求次数')}>
-                                    {userState.user?.request_count}
-                                </Descriptions.Item>
-                            </Descriptions>
-                        </Card>
-                        <Card
-                            style={{marginTop: 10}}
-                            footer={
-                                <div>
-                                    <Typography.Text>{t('邀请链接')}</Typography.Text>
-                                    <Input
-                                        style={{marginTop: 10}}
-                                        value={affLink}
-                                        onClick={handleAffLinkClick}
-                                        readOnly
-                                    />
-                                </div>
-                            }
-                        >
-                            <Typography.Title heading={6}>{t('邀请信息')}</Typography.Title>
-                            <div style={{marginTop: 10}}>
-                                <Descriptions row>
-                                    <Descriptions.Item itemKey={t('待使用收益')}>
-                                        <span style={{color: 'rgba(var(--semi-red-5), 1)'}}>
+              }
+            >
+              <Descriptions row>
+                <Descriptions.Item itemKey={t('当前余额')}>
+                  {renderQuota(userState?.user?.quota)}
+                </Descriptions.Item>
+                <Descriptions.Item itemKey={t('历史消耗')}>
+                  {renderQuota(userState?.user?.used_quota)}
+                </Descriptions.Item>
+                <Descriptions.Item itemKey={t('请求次数')}>
+                  {userState.user?.request_count}
+                </Descriptions.Item>
+              </Descriptions>
+            </Card>
+            <Card
+              style={{ marginTop: 10 }}
+              footer={
+                <div>
+                  <Typography.Text>{t('邀请链接')}</Typography.Text>
+                  <Input
+                    style={{ marginTop: 10 }}
+                    value={affLink}
+                    onClick={handleAffLinkClick}
+                    readOnly
+                  />
+                </div>
+              }
+            >
+              <Typography.Title heading={6}>{t('邀请信息')}</Typography.Title>
+              <div style={{ marginTop: 10 }}>
+                <Descriptions row>
+                  <Descriptions.Item itemKey={t('待使用收益')}>
+                                        <span style={{ color: 'rgba(var(--semi-red-5), 1)' }}>
                                             {renderQuota(userState?.user?.aff_quota)}
                                         </span>
-                                        <Button
-                                            type={'secondary'}
-                                            onClick={() => setOpenTransfer(true)}
-                                            size={'small'}
-                                            style={{marginLeft: 10}}
-                                        >
-                                            {t('划转')}
-                                        </Button>
-                                    </Descriptions.Item>
-                                    <Descriptions.Item itemKey={t('总收益')}>
-                                        {renderQuota(userState?.user?.aff_history_quota)}
-                                    </Descriptions.Item>
-                                    <Descriptions.Item itemKey={t('邀请人数')}>
-                                        {userState?.user?.aff_count}
-                                    </Descriptions.Item>
-                                </Descriptions>
-                            </div>
-                        </Card>
-                        <Card style={{marginTop: 10}}>
-                            <Typography.Title heading={6}>{t('个人信息')}</Typography.Title>
-                            <div style={{marginTop: 20}}>
-                                <Typography.Text strong>{t('邮箱')}</Typography.Text>
-                                <div
-                                    style={{display: 'flex', justifyContent: 'space-between'}}
-                                >
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.email !== ''
-                                                    ? userState.user.email
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        <Button
-                                            onClick={() => {
-                                                setShowEmailBindModal(true);
-                                            }}
-                                        >
-                                            {userState.user && userState.user.email !== ''
-                                                ? t('修改绑定')
-                                                : t('绑定邮箱')}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Typography.Text strong>{t('微信')}</Typography.Text>
-                                <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.wechat_id !== ''
-                                                    ? t('已绑定')
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        <Button
-                                            disabled={!status.wechat_login}
-                                            onClick={() => {
-                                                setShowWeChatBindModal(true);
-                                            }}
-                                        >
-                                            {userState.user && userState.user.wechat_id !== ''
-                                                ? t('修改绑定')
-                                                : status.wechat_login 
-                                                    ? t('绑定') 
-                                                    : t('未启用')}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Typography.Text strong>{t('GitHub')}</Typography.Text>
-                                <div
-                                    style={{display: 'flex', justifyContent: 'space-between'}}
-                                >
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.github_id !== ''
-                                                    ? userState.user.github_id
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        <Button
-                                            onClick={() => {
-                                                onGitHubOAuthClicked(status.github_client_id);
-                                            }}
-                                            disabled={
-                                                (userState.user && userState.user.github_id !== '') ||
-                                                !status.github_oauth
-                                            }
-                                        >
-                                            {status.github_oauth ? t('绑定') : t('未启用')}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Typography.Text strong>{t('OIDC')}</Typography.Text>
-                                <div
-                                    style={{display: 'flex', justifyContent: 'space-between'}}
-                                >
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.oidc_id !== ''
-                                                    ? userState.user.oidc_id
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        <Button
-                                            onClick={() => {
-                                                onOIDCClicked(status.oidc_authorization_endpoint, status.oidc_client_id);
-                                            }}
-                                            disabled={
-                                                (userState.user && userState.user.oidc_id !== '') ||
-                                                !status.oidc_enabled
-                                            }
-                                        >
-                                            {status.oidc_enabled ? t('绑定') : t('未启用')}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Typography.Text strong>{t('Telegram')}</Typography.Text>
-                                <div
-                                    style={{display: 'flex', justifyContent: 'space-between'}}
-                                >
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.telegram_id !== ''
-                                                    ? userState.user.telegram_id
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        {status.telegram_oauth ? (
-                                            userState.user.telegram_id !== '' ? (
-                                                <Button disabled={true}>{t('已绑定')}</Button>
-                                            ) : (
-                                                <TelegramLoginButton
-                                                    dataAuthUrl='/api/oauth/telegram/bind'
-                                                    botName={status.telegram_bot_name}
-                                                />
-                                            )
-                                        ) : (
-                                            <Button disabled={true}>{t('未启用')}</Button>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Typography.Text strong>{t('LinuxDO')}</Typography.Text>
-                                <div
-                                    style={{display: 'flex', justifyContent: 'space-between'}}
-                                >
-                                    <div>
-                                        <Input
-                                            value={
-                                                userState.user && userState.user.linux_do_id !== ''
-                                                    ? userState.user.linux_do_id
-                                                    : t('未绑定')
-                                            }
-                                            readonly={true}
-                                        ></Input>
-                                    </div>
-                                    <div>
-                                        <Button
-                                            onClick={() => {
-                                                onLinuxDOOAuthClicked(status.linuxdo_client_id);
-                                            }}
-                                            disabled={
-                                                (userState.user && userState.user.linux_do_id !== '') ||
-                                                !status.linuxdo_oauth
-                                            }
-                                        >
-                                            {status.linuxdo_oauth ? t('绑定') : t('未启用')}
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Space>
-                                    <Button onClick={generateAccessToken}>
-                                        {t('生成系统访问令牌')}
-                                    </Button>
-                                    <Button
-                                        onClick={() => {
-                                            setShowChangePasswordModal(true);
-                                        }}
-                                    >
-                                        {t('修改密码')}
-                                    </Button>
-                                    <Button
-                                        type={'danger'}
-                                        onClick={() => {
-                                            setShowAccountDeleteModal(true);
-                                        }}
-                                    >
-                                        {t('删除个人账户')}
-                                    </Button>
-                                </Space>
+                    <Button
+                      type={'secondary'}
+                      onClick={() => setOpenTransfer(true)}
+                      size={'small'}
+                      style={{ marginLeft: 10 }}
+                    >
+                      {t('划转')}
+                    </Button>
+                  </Descriptions.Item>
+                  <Descriptions.Item itemKey={t('总收益')}>
+                    {renderQuota(userState?.user?.aff_history_quota)}
+                  </Descriptions.Item>
+                  <Descriptions.Item itemKey={t('邀请人数')}>
+                    {userState?.user?.aff_count}
+                  </Descriptions.Item>
+                </Descriptions>
+              </div>
+            </Card>
+            <Card style={{ marginTop: 10 }}>
+              <Typography.Title heading={6}>{t('个人信息')}</Typography.Title>
+              <div style={{ marginTop: 20 }}>
+                <Typography.Text strong>{t('邮箱')}</Typography.Text>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.email !== ''
+                          ? userState.user.email
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      onClick={() => {
+                        setShowEmailBindModal(true);
+                      }}
+                    >
+                      {userState.user && userState.user.email !== ''
+                        ? t('修改绑定')
+                        : t('绑定邮箱')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>{t('微信')}</Typography.Text>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.wechat_id !== ''
+                          ? t('已绑定')
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      disabled={!status.wechat_login}
+                      onClick={() => {
+                        setShowWeChatBindModal(true);
+                      }}
+                    >
+                      {userState.user && userState.user.wechat_id !== ''
+                        ? t('修改绑定')
+                        : status.wechat_login
+                          ? t('绑定')
+                          : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>{t('GitHub')}</Typography.Text>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.github_id !== ''
+                          ? userState.user.github_id
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      onClick={() => {
+                        onGitHubOAuthClicked(status.github_client_id);
+                      }}
+                      disabled={
+                        (userState.user && userState.user.github_id !== '') ||
+                        !status.github_oauth
+                      }
+                    >
+                      {status.github_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>{t('OIDC')}</Typography.Text>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.oidc_id !== ''
+                          ? userState.user.oidc_id
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      onClick={() => {
+                        onOIDCClicked(status.oidc_authorization_endpoint, status.oidc_client_id);
+                      }}
+                      disabled={
+                        (userState.user && userState.user.oidc_id !== '') ||
+                        !status.oidc_enabled
+                      }
+                    >
+                      {status.oidc_enabled ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>{t('Telegram')}</Typography.Text>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.telegram_id !== ''
+                          ? userState.user.telegram_id
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    {status.telegram_oauth ? (
+                      userState.user.telegram_id !== '' ? (
+                        <Button disabled={true}>{t('已绑定')}</Button>
+                      ) : (
+                        <TelegramLoginButton
+                          dataAuthUrl="/api/oauth/telegram/bind"
+                          botName={status.telegram_bot_name}
+                        />
+                      )
+                    ) : (
+                      <Button disabled={true}>{t('未启用')}</Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Typography.Text strong>{t('LinuxDO')}</Typography.Text>
+                <div
+                  style={{ display: 'flex', justifyContent: 'space-between' }}
+                >
+                  <div>
+                    <Input
+                      value={
+                        userState.user && userState.user.linux_do_id !== ''
+                          ? userState.user.linux_do_id
+                          : t('未绑定')
+                      }
+                      readonly={true}
+                    ></Input>
+                  </div>
+                  <div>
+                    <Button
+                      onClick={() => {
+                        onLinuxDOOAuthClicked(status.linuxdo_client_id);
+                      }}
+                      disabled={
+                        (userState.user && userState.user.linux_do_id !== '') ||
+                        !status.linuxdo_oauth
+                      }
+                    >
+                      {status.linuxdo_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Space>
+                  <Button onClick={generateAccessToken}>
+                    {t('生成系统访问令牌')}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      setShowChangePasswordModal(true);
+                    }}
+                  >
+                    {t('修改密码')}
+                  </Button>
+                  <Button
+                    type={'danger'}
+                    onClick={() => {
+                      setShowAccountDeleteModal(true);
+                    }}
+                  >
+                    {t('删除个人账户')}
+                  </Button>
+                </Space>
 
-                                {systemToken && (
-                                    <Input
-                                        readOnly
-                                        value={systemToken}
-                                        onClick={handleSystemTokenClick}
-                                        style={{marginTop: '10px'}}
-                                    />
-                                )}
-                                <Modal
-                                    onCancel={() => setShowWeChatBindModal(false)}
-                                    visible={showWeChatBindModal}
-                                    size={'small'}
-                                >
-                                    <Image src={status.wechat_qrcode}/>
-                                    <div style={{textAlign: 'center'}}>
-                                        <p>
-                                            微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
-                                        </p>
-                                    </div>
-                                    <Input
-                                        placeholder='验证码'
-                                        name='wechat_verification_code'
-                                        value={inputs.wechat_verification_code}
-                                        onChange={(v) =>
-                                            handleInputChange('wechat_verification_code', v)
-                                        }
-                                    />
-                                    <Button color='' fluid size='large' onClick={bindWeChat}>
-                                        {t('绑定')}
-                                    </Button>
-                                </Modal>
-                            </div>
-                        </Card>
-                        <Card style={{marginTop: 10}}>
-                            <Typography.Title heading={6}>{t('通知设置')}</Typography.Title>
-                            <div style={{marginTop: 20}}>
-                                <Typography.Text strong>{t('通知方式')}</Typography.Text>
-                                <div style={{marginTop: 10}}>
-                                    <RadioGroup
-                                        value={notificationSettings.warningType}
-                                        onChange={value => handleNotificationSettingChange('warningType', value)}
-                                    >
-                                        <Radio value="email">{t('邮件通知')}</Radio>
-                                        <Radio value="webhook">{t('Webhook通知')}</Radio>
-                                    </RadioGroup>
-                                </div>
+                {systemToken && (
+                  <Input
+                    readOnly
+                    value={systemToken}
+                    onClick={handleSystemTokenClick}
+                    style={{ marginTop: '10px' }}
+                  />
+                )}
+                <Modal
+                  onCancel={() => setShowWeChatBindModal(false)}
+                  visible={showWeChatBindModal}
+                  size={'small'}
+                >
+                  <Image src={status.wechat_qrcode} />
+                  <div style={{ textAlign: 'center' }}>
+                    <p>
+                      微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
+                    </p>
+                  </div>
+                  <Input
+                    placeholder="验证码"
+                    name="wechat_verification_code"
+                    value={inputs.wechat_verification_code}
+                    onChange={(v) =>
+                      handleInputChange('wechat_verification_code', v)
+                    }
+                  />
+                  <Button color="" fluid size="large" onClick={bindWeChat}>
+                    {t('绑定')}
+                  </Button>
+                </Modal>
+              </div>
+            </Card>
+            <Card style={{ marginTop: 10 }}>
+              <Tabs type="line" defaultActiveKey="price">
+                <TabPane tab={t('价格设置')} itemKey="price">
+                  <div style={{ marginTop: 20 }}>
+                    <Typography.Text strong>{t('接受未设置价格模型')}</Typography.Text>
+                    <div style={{ marginTop: 10 }}>
+                      <Checkbox
+                        checked={notificationSettings.acceptUnsetModelRatioModel}
+                        onChange={e => handleNotificationSettingChange('acceptUnsetModelRatioModel', e.target.checked)}
+                      >
+                        {t('接受未设置价格模型')}
+                      </Checkbox>
+                      <Typography.Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+                        {t('当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用')}
+                      </Typography.Text>
+                    </div>
+                  </div>
+                </TabPane>
+                <TabPane tab={t('通知设置')} itemKey="notification">
+                  <div style={{ marginTop: 20 }}>
+                    <Typography.Text strong>{t('通知方式')}</Typography.Text>
+                    <div style={{ marginTop: 10 }}>
+                      <RadioGroup
+                        value={notificationSettings.warningType}
+                        onChange={value => handleNotificationSettingChange('warningType', value)}
+                      >
+                        <Radio value="email">{t('邮件通知')}</Radio>
+                        <Radio value="webhook">{t('Webhook通知')}</Radio>
+                      </RadioGroup>
+                    </div>
+                  </div>
+                  {notificationSettings.warningType === 'webhook' && (
+                    <>
+                      <div style={{ marginTop: 20 }}>
+                        <Typography.Text strong>{t('Webhook地址')}</Typography.Text>
+                        <div style={{ marginTop: 10 }}>
+                          <Input
+                            value={notificationSettings.webhookUrl}
+                            onChange={val => handleNotificationSettingChange('webhookUrl', val)}
+                            placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')}
+                          />
+                          <Typography.Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+                            {t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')}
+                          </Typography.Text>
+                          <Typography.Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+                            <div style={{ cursor: 'pointer' }} onClick={() => setShowWebhookDocs(!showWebhookDocs)}>
+                              {t('Webhook请求结构')} {showWebhookDocs ? '▼' : '▶'}
                             </div>
-                            {notificationSettings.warningType === 'webhook' && (
-                                <>
-                                    <div style={{marginTop: 20}}>
-                                        <Typography.Text strong>{t('Webhook地址')}</Typography.Text>
-                                        <div style={{marginTop: 10}}>
-                                            <Input
-                                                value={notificationSettings.webhookUrl}
-                                                onChange={val => handleNotificationSettingChange('webhookUrl', val)}
-                                                placeholder={t('请输入Webhook地址，例如: https://example.com/webhook')}
-                                            />
-                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
-                                                {t('只支持https，系统将以 POST 方式发送通知，请确保地址可以接收 POST 请求')}
-                                            </Typography.Text>
-                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
-                                                <div style={{cursor: 'pointer'}} onClick={() => setShowWebhookDocs(!showWebhookDocs)}>
-                                                    {t('Webhook请求结构')} {showWebhookDocs ? '▼' : '▶'}
-                                                </div>
-                                                <Collapsible isOpen={showWebhookDocs}>
-                                                    <pre style={{marginTop: 4, background: 'var(--semi-color-fill-0)', padding: 8, borderRadius: 4}}>
+                            <Collapsible isOpen={showWebhookDocs}>
+                            <pre style={{
+                              marginTop: 4,
+                              background: 'var(--semi-color-fill-0)',
+                              padding: 8,
+                              borderRadius: 4
+                            }}>
 {`{
     "type": "quota_exceed",      // 通知类型
     "title": "标题",             // 通知标题
@@ -835,202 +863,205 @@ const PersonalSetting = () => {
     "values": ["$0.99"],
     "timestamp": 1739950503
 }`}
-                                                    </pre>
-                                                </Collapsible>
-                                            </Typography.Text>
-                                        </div>
-                                    </div>
-                                    <div style={{marginTop: 20}}>
-                                        <Typography.Text strong>{t('接口凭证（可选）')}</Typography.Text>
-                                        <div style={{marginTop: 10}}>
-                                            <Input
-                                                value={notificationSettings.webhookSecret}
-                                                onChange={val => handleNotificationSettingChange('webhookSecret', val)}
-                                                placeholder={t('请输入密钥')}
-                                            />
-                                            <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
-                                                {t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')}
-                                            </Typography.Text>
-                                            <Typography.Text type="secondary" style={{marginTop: 4, display: 'block'}}>
-                                                {t('Authorization: Bearer your-secret-key')}
-                                            </Typography.Text>
-                                        </div>
-                                    </div>
-                                </>
-                            )}
-                            {notificationSettings.warningType === 'email' && (
-                                <div style={{marginTop: 20}}>
-                                    <Typography.Text strong>{t('通知邮箱')}</Typography.Text>
-                                    <div style={{marginTop: 10}}>
-                                        <Input
-                                            value={notificationSettings.notificationEmail}
-                                            onChange={val => handleNotificationSettingChange('notificationEmail', val)}
-                                            placeholder={t('留空则使用账号绑定的邮箱')}
-                                        />
-                                        <Typography.Text type="secondary" style={{marginTop: 8, display: 'block'}}>
-                                            {t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')}
-                                        </Typography.Text>
-                                    </div>
-                                </div>
-                            )}
-                            <div style={{marginTop: 20}}>
-                                <Typography.Text strong>{t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)}</Typography.Text>
-                                <div style={{marginTop: 10}}>
-                                    <AutoComplete
-                                        value={notificationSettings.warningThreshold}
-                                        onChange={val => handleNotificationSettingChange('warningThreshold', val)}
-                                        style={{width: 200}}
-                                        placeholder={t('请输入预警额度')}
-                                        data={[
-                                            { value: 100000, label: '0.2$' },
-                                            { value: 500000, label: '1$' },
-                                            { value: 1000000, label: '5$' },
-                                            { value: 5000000, label: '10$' }
-                                        ]}
-                                    />
-                                </div>
-                                <Typography.Text type="secondary" style={{marginTop: 10, display: 'block'}}>
-                                    {t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')}
-                                </Typography.Text>
-                            </div>
-                            <div style={{marginTop: 20}}>
-                                <Button type="primary" onClick={saveNotificationSettings}>
-                                    {t('保存设置')}
-                                </Button>
-                            </div>
-                        </Card>
-                        <Modal
-                            onCancel={() => setShowEmailBindModal(false)}
-                            onOk={bindEmail}
-                            visible={showEmailBindModal}
-                            size={'small'}
-                            centered={true}
-                            maskClosable={false}
-                        >
-                            <Typography.Title heading={6}>{t('绑定邮箱地址')}</Typography.Title>
-                            <div
-                                style={{
-                                    marginTop: 20,
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                }}
-                            >
-                                <Input
-                                    fluid
-                                    placeholder='输入邮箱地址'
-                                    onChange={(value) => handleInputChange('email', value)}
-                                    name='email'
-                                    type='email'
-                                />
-                                <Button
-                                    onClick={sendVerificationCode}
-                                    disabled={disableButton || loading}
-                                >
-                                    {disableButton ? `重新发送 (${countdown})` : '获取验证码'}
-                                </Button>
-                            </div>
-                            <div style={{marginTop: 10}}>
-                                <Input
-                                    fluid
-                                    placeholder='验证码'
-                                    name='email_verification_code'
-                                    value={inputs.email_verification_code}
-                                    onChange={(value) =>
-                                        handleInputChange('email_verification_code', value)
-                                    }
-                                />
-                            </div>
-                            {turnstileEnabled ? (
-                                <Turnstile
-                                    sitekey={turnstileSiteKey}
-                                    onVerify={(token) => {
-                                        setTurnstileToken(token);
-                                    }}
-                                />
-                            ) : (
-                                <></>
-                            )}
-                        </Modal>
-                        <Modal
-                            onCancel={() => setShowAccountDeleteModal(false)}
-                            visible={showAccountDeleteModal}
-                            size={'small'}
-                            centered={true}
-                            onOk={deleteAccount}
-                        >
-                            <div style={{marginTop: 20}}>
-                                <Banner
-                                    type='danger'
-                                    description='您正在删除自己的帐户，将清空所有数据且不可恢复'
-                                    closeIcon={null}
-                                />
-                            </div>
-                            <div style={{marginTop: 20}}>
-                                <Input
-                                    placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
-                                    name='self_account_deletion_confirmation'
-                                    value={inputs.self_account_deletion_confirmation}
-                                    onChange={(value) =>
-                                        handleInputChange(
-                                            'self_account_deletion_confirmation',
-                                            value,
-                                        )
-                                    }
-                                />
-                                {turnstileEnabled ? (
-                                    <Turnstile
-                                        sitekey={turnstileSiteKey}
-                                        onVerify={(token) => {
-                                            setTurnstileToken(token);
-                                        }}
-                                    />
-                                ) : (
-                                    <></>
-                                )}
-                            </div>
-                        </Modal>
-                        <Modal
-                            onCancel={() => setShowChangePasswordModal(false)}
-                            visible={showChangePasswordModal}
-                            size={'small'}
-                            centered={true}
-                            onOk={changePassword}
-                        >
-                            <div style={{marginTop: 20}}>
-                                <Input
-                                    name='set_new_password'
-                                    placeholder={t('新密码')}
-                                    value={inputs.set_new_password}
-                                    onChange={(value) =>
-                                        handleInputChange('set_new_password', value)
-                                    }
-                                />
-                                <Input
-                                    style={{marginTop: 20}}
-                                    name='set_new_password_confirmation'
-                                    placeholder={t('确认新密码')}
-                                    value={inputs.set_new_password_confirmation}
-                                    onChange={(value) =>
-                                        handleInputChange('set_new_password_confirmation', value)
-                                    }
-                                />
-                                {turnstileEnabled ? (
-                                    <Turnstile
-                                        sitekey={turnstileSiteKey}
-                                        onVerify={(token) => {
-                                            setTurnstileToken(token);
-                                        }}
-                                    />
-                                ) : (
-                                    <></>
-                                )}
-                            </div>
-                        </Modal>
+                            </pre>
+                            </Collapsible>
+                          </Typography.Text>
+                        </div>
+                      </div>
+                      <div style={{ marginTop: 20 }}>
+                        <Typography.Text strong>{t('接口凭证（可选）')}</Typography.Text>
+                        <div style={{ marginTop: 10 }}>
+                          <Input
+                            value={notificationSettings.webhookSecret}
+                            onChange={val => handleNotificationSettingChange('webhookSecret', val)}
+                            placeholder={t('请输入密钥')}
+                          />
+                          <Typography.Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+                            {t('密钥将以 Bearer 方式添加到请求头中，用于验证webhook请求的合法性')}
+                          </Typography.Text>
+                          <Typography.Text type="secondary" style={{ marginTop: 4, display: 'block' }}>
+                            {t('Authorization: Bearer your-secret-key')}
+                          </Typography.Text>
+                        </div>
+                      </div>
+                    </>
+                  )}
+                  {notificationSettings.warningType === 'email' && (
+                    <div style={{ marginTop: 20 }}>
+                      <Typography.Text strong>{t('通知邮箱')}</Typography.Text>
+                      <div style={{ marginTop: 10 }}>
+                        <Input
+                          value={notificationSettings.notificationEmail}
+                          onChange={val => handleNotificationSettingChange('notificationEmail', val)}
+                          placeholder={t('留空则使用账号绑定的邮箱')}
+                        />
+                        <Typography.Text type="secondary" style={{ marginTop: 8, display: 'block' }}>
+                          {t('设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱')}
+                        </Typography.Text>
+                      </div>
                     </div>
-                </Layout.Content>
-            </Layout>
-        </div>
-    );
+                  )}
+                  <div style={{ marginTop: 20 }}>
+                    <Typography.Text
+                      strong>{t('额度预警阈值')} {renderQuotaWithPrompt(notificationSettings.warningThreshold)}</Typography.Text>
+                    <div style={{ marginTop: 10 }}>
+                      <AutoComplete
+                        value={notificationSettings.warningThreshold}
+                        onChange={val => handleNotificationSettingChange('warningThreshold', val)}
+                        style={{ width: 200 }}
+                        placeholder={t('请输入预警额度')}
+                        data={[
+                          { value: 100000, label: '0.2$' },
+                          { value: 500000, label: '1$' },
+                          { value: 1000000, label: '5$' },
+                          { value: 5000000, label: '10$' }
+                        ]}
+                      />
+                    </div>
+                    <Typography.Text type="secondary" style={{ marginTop: 10, display: 'block' }}>
+                      {t('当剩余额度低于此数值时，系统将通过选择的方式发送通知')}
+                    </Typography.Text>
+                  </div>
+                </TabPane>
+              </Tabs>
+              <div style={{ marginTop: 20 }}>
+                <Button type="primary" onClick={saveNotificationSettings}>
+                  {t('保存设置')}
+                </Button>
+              </div>
+            </Card>
+            <Modal
+              onCancel={() => setShowEmailBindModal(false)}
+              onOk={bindEmail}
+              visible={showEmailBindModal}
+              size={'small'}
+              centered={true}
+              maskClosable={false}
+            >
+              <Typography.Title heading={6}>{t('绑定邮箱地址')}</Typography.Title>
+              <div
+                style={{
+                  marginTop: 20,
+                  display: 'flex',
+                  justifyContent: 'space-between'
+                }}
+              >
+                <Input
+                  fluid
+                  placeholder="输入邮箱地址"
+                  onChange={(value) => handleInputChange('email', value)}
+                  name="email"
+                  type="email"
+                />
+                <Button
+                  onClick={sendVerificationCode}
+                  disabled={disableButton || loading}
+                >
+                  {disableButton ? `重新发送 (${countdown})` : '获取验证码'}
+                </Button>
+              </div>
+              <div style={{ marginTop: 10 }}>
+                <Input
+                  fluid
+                  placeholder="验证码"
+                  name="email_verification_code"
+                  value={inputs.email_verification_code}
+                  onChange={(value) =>
+                    handleInputChange('email_verification_code', value)
+                  }
+                />
+              </div>
+              {turnstileEnabled ? (
+                <Turnstile
+                  sitekey={turnstileSiteKey}
+                  onVerify={(token) => {
+                    setTurnstileToken(token);
+                  }}
+                />
+              ) : (
+                <></>
+              )}
+            </Modal>
+            <Modal
+              onCancel={() => setShowAccountDeleteModal(false)}
+              visible={showAccountDeleteModal}
+              size={'small'}
+              centered={true}
+              onOk={deleteAccount}
+            >
+              <div style={{ marginTop: 20 }}>
+                <Banner
+                  type="danger"
+                  description="您正在删除自己的帐户，将清空所有数据且不可恢复"
+                  closeIcon={null}
+                />
+              </div>
+              <div style={{ marginTop: 20 }}>
+                <Input
+                  placeholder={`输入你的账户名 ${userState?.user?.username} 以确认删除`}
+                  name="self_account_deletion_confirmation"
+                  value={inputs.self_account_deletion_confirmation}
+                  onChange={(value) =>
+                    handleInputChange(
+                      'self_account_deletion_confirmation',
+                      value
+                    )
+                  }
+                />
+                {turnstileEnabled ? (
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Modal>
+            <Modal
+              onCancel={() => setShowChangePasswordModal(false)}
+              visible={showChangePasswordModal}
+              size={'small'}
+              centered={true}
+              onOk={changePassword}
+            >
+              <div style={{ marginTop: 20 }}>
+                <Input
+                  name="set_new_password"
+                  placeholder={t('新密码')}
+                  value={inputs.set_new_password}
+                  onChange={(value) =>
+                    handleInputChange('set_new_password', value)
+                  }
+                />
+                <Input
+                  style={{ marginTop: 20 }}
+                  name="set_new_password_confirmation"
+                  placeholder={t('确认新密码')}
+                  value={inputs.set_new_password_confirmation}
+                  onChange={(value) =>
+                    handleInputChange('set_new_password_confirmation', value)
+                  }
+                />
+                {turnstileEnabled ? (
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </Modal>
+          </div>
+        </Layout.Content>
+      </Layout>
+    </div>
+  );
 };
 
 export default PersonalSetting;

web/src/components/SystemSetting.js

@@ -1,16 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Button,
-  Divider,
   Form,
-  Grid,
-  Header,
-  Message,
+  Row,
+  Col,
+  Typography,
   Modal,
-} from 'semantic-ui-react';
-import { API, removeTrailingSlash, showError, showSuccess, verifyJSON } from '../helpers';
-
-import { useTheme } from '../context/Theme';
+  Banner,
+  TagInput,
+  Spin,
+} from '@douyinfe/semi-ui';
+const { Text } = Typography;
+import {
+  removeTrailingSlash,
+  showError,
+  showSuccess,
+  verifyJSON,
+} from '../helpers/utils';
+import { API } from '../helpers/api';
 
 const SystemSetting = () => {
   let [inputs, setInputs] = useState({
@@ -64,144 +71,138 @@ const SystemSetting = () => {
     LinuxDOClientId: '',
     LinuxDOClientSecret: '',
   });
-  const [originInputs, setOriginInputs] = useState({});
-  let [loading, setLoading] = useState(false);
-  const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
-  const [restrictedDomainInput, setRestrictedDomainInput] = useState('');
-  const [showPasswordWarningModal, setShowPasswordWarningModal] =
-    useState(false);
 
-  const theme = useTheme();
-  const isDark = theme === 'dark';
+  const [originInputs, setOriginInputs] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const formApiRef = useRef(null);
+  const [emailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
+  const [showPasswordLoginConfirmModal, setShowPasswordLoginConfirmModal] = useState(false);
+  const [linuxDOOAuthEnabled, setLinuxDOOAuthEnabled] = useState(false);
 
   const getOptions = async () => {
+    setLoading(true);
     const res = await API.get('/api/option/');
     const { success, message, data } = res.data;
     if (success) {
       let newInputs = {};
       data.forEach((item) => {
-        if (item.key === 'TopupGroupRatio') {
-          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+        switch (item.key) {
+          case 'TopupGroupRatio':
+            item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+            break;
+          case 'EmailDomainWhitelist':
+            setEmailDomainWhitelist(item.value ? item.value.split(',') : []);
+            break;
+          case 'PasswordLoginEnabled':
+          case 'PasswordRegisterEnabled':
+          case 'EmailVerificationEnabled':
+          case 'GitHubOAuthEnabled':
+          case 'WeChatAuthEnabled':
+          case 'TelegramOAuthEnabled':
+          case 'RegisterEnabled':
+          case 'TurnstileCheckEnabled':
+          case 'EmailDomainRestrictionEnabled':
+          case 'EmailAliasRestrictionEnabled':
+          case 'SMTPSSLEnabled':
+          case 'LinuxDOOAuthEnabled':
+          case 'oidc.enabled':
+            item.value = item.value === 'true';
+            break;
+          case 'Price':
+          case 'MinTopUp':
+            item.value = parseFloat(item.value);
+            break;
+          default:
+            break;
         }
         newInputs[item.key] = item.value;
       });
-      setInputs({
-        ...newInputs,
-        EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(','),
-      });
+      setInputs(newInputs);
       setOriginInputs(newInputs);
-
-      setEmailDomainWhitelist(
-        newInputs.EmailDomainWhitelist.split(',').map((item) => {
-          return { key: item, text: item, value: item };
-        }),
-      );
+      if (formApiRef.current) {
+        formApiRef.current.setValues(newInputs);
+      }
+      setIsLoaded(true);
     } else {
       showError(message);
     }
+    setLoading(false);
   };
 
   useEffect(() => {
-    getOptions().then();
+    getOptions();
   }, []);
-  useEffect(() => {}, [inputs.EmailDomainWhitelist]);
 
-  const updateOption = async (key, value) => {
+  const updateOptions = async (options) => {
     setLoading(true);
-    switch (key) {
-      case 'PasswordLoginEnabled':
-      case 'PasswordRegisterEnabled':
-      case 'EmailVerificationEnabled':
-      case 'GitHubOAuthEnabled':
-      case 'oidc.enabled':
-      case 'LinuxDOOAuthEnabled':
-      case 'WeChatAuthEnabled':
-      case 'TelegramOAuthEnabled':
-      case 'TurnstileCheckEnabled':
-      case 'EmailDomainRestrictionEnabled':
-      case 'EmailAliasRestrictionEnabled':
-      case 'SMTPSSLEnabled':
-      case 'RegisterEnabled':
-        value = inputs[key] === 'true' ? 'false' : 'true';
-        break;
-      default:
-        break;
-    }
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
-    if (success) {
-      if (key === 'EmailDomainWhitelist') {
-        value = value.split(',');
+    try {
+      // 分离 checkbox 类型的选项和其他选项
+      const checkboxOptions = options.filter(opt => 
+        opt.key.toLowerCase().endsWith('enabled')
+      );
+      const otherOptions = options.filter(opt => 
+        !opt.key.toLowerCase().endsWith('enabled')
+      );
+
+      // 处理 checkbox 类型的选项
+      for (const opt of checkboxOptions) {
+        const res = await API.put('/api/option/', {
+          key: opt.key,
+          value: opt.value.toString()
+        });
+        if (!res.data.success) {
+          showError(res.data.message);
+          return;
+        }
       }
-      if (key === 'Price') {
-        value = parseFloat(value);
+
+      // 处理其他选项
+      if (otherOptions.length > 0) {
+        const requestQueue = otherOptions.map(opt => 
+          API.put('/api/option/', {
+            key: opt.key,
+            value: typeof opt.value === 'boolean' ? opt.value.toString() : opt.value
+          })
+        );
+
+        const results = await Promise.all(requestQueue);
+        
+        // 检查所有请求是否成功
+        const errorResults = results.filter(res => !res.data.success);
+        errorResults.forEach(res => {
+          showError(res.data.message);
+        });
       }
-      setInputs((inputs) => ({
-        ...inputs,
-        [key]: value,
-      }));
-    } else {
-      showError(message);
+
+      showSuccess('更新成功');
+      // 更新本地状态
+      const newInputs = { ...inputs };
+      options.forEach(opt => {
+        newInputs[opt.key] = opt.value;
+      });
+      setInputs(newInputs);
+    } catch (error) {
+      showError('更新失败');
     }
     setLoading(false);
   };
 
-  const handleInputChange = async (e, { name, value }) => {
-    if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
-      // block disabling password login
-      setShowPasswordWarningModal(true);
-      return;
-    }
-    if (
-      name === 'Notice' ||
-      (name.startsWith('SMTP') && name !== 'SMTPSSLEnabled') ||
-      name === 'ServerAddress' ||
-      name === 'WorkerUrl' ||
-      name === 'WorkerValidKey' ||
-      name === 'EpayId' ||
-      name === 'EpayKey' ||
-      name === 'Price' ||
-      name === 'PayAddress' ||
-      name === 'GitHubClientId' ||
-      name === 'GitHubClientSecret' ||
-      name === 'oidc.well_known' ||
-      name === 'oidc.client_id' ||
-      name === 'oidc.client_secret' ||
-      name === 'oidc.authorization_endpoint' ||
-      name === 'oidc.token_endpoint' ||
-      name === 'oidc.user_info_endpoint' ||
-      name === 'WeChatServerAddress' ||
-      name === 'WeChatServerToken' ||
-      name === 'WeChatAccountQRCodeImageURL' ||
-      name === 'TurnstileSiteKey' ||
-      name === 'TurnstileSecretKey' ||
-      name === 'EmailDomainWhitelist' ||
-      name === 'TopupGroupRatio' ||
-      name === 'TelegramBotToken' ||
-      name === 'TelegramBotName' ||
-      name === 'LinuxDOClientId' ||
-      name === 'LinuxDOClientSecret'
-    ) {
-      setInputs((inputs) => ({ ...inputs, [name]: value }));
-    } else {
-      await updateOption(name, value);
-    }
+  const handleFormChange = (values) => {
+    setInputs(values);
   };
 
   const submitServerAddress = async () => {
     let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
-    await updateOption('ServerAddress', ServerAddress);
+    await updateOptions([{ key: 'ServerAddress', value: ServerAddress }]);
   };
 
   const submitWorker = async () => {
     let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl);
-    await updateOption('WorkerUrl', WorkerUrl);
-    if (inputs.WorkerValidKey !== '') {
-      await updateOption('WorkerValidKey', inputs.WorkerValidKey);
-    }
+    await updateOptions([
+      { key: 'WorkerUrl', value: WorkerUrl },
+      { key: 'WorkerValidKey', value: inputs.WorkerValidKey }
+    ]);
   };
 
   const submitPayAddress = async () => {
@@ -214,89 +215,105 @@ const SystemSetting = () => {
         showError('充值分组倍率不是合法的 JSON 字符串');
         return;
       }
-      await updateOption('TopupGroupRatio', inputs.TopupGroupRatio);
     }
-    let PayAddress = removeTrailingSlash(inputs.PayAddress);
-    await updateOption('PayAddress', PayAddress);
+    
+    const options = [
+      { key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) }
+    ];
+    
     if (inputs.EpayId !== '') {
-      await updateOption('EpayId', inputs.EpayId);
+      options.push({ key: 'EpayId', value: inputs.EpayId });
     }
     if (inputs.EpayKey !== undefined && inputs.EpayKey !== '') {
-      await updateOption('EpayKey', inputs.EpayKey);
+      options.push({ key: 'EpayKey', value: inputs.EpayKey });
+    }
+    if (inputs.Price !== '') {
+      options.push({ key: 'Price', value: inputs.Price.toString() });
+    }
+    if (inputs.MinTopUp !== '') {
+      options.push({ key: 'MinTopUp', value: inputs.MinTopUp.toString() });
+    }
+    if (inputs.CustomCallbackAddress !== '') {
+      options.push({ key: 'CustomCallbackAddress', value: inputs.CustomCallbackAddress });
     }
-    await updateOption('Price', '' + inputs.Price);
+    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
+      options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
+    }
+    
+    await updateOptions(options);
   };
 
   const submitSMTP = async () => {
+    const options = [];
+    
     if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
-      await updateOption('SMTPServer', inputs.SMTPServer);
+      options.push({ key: 'SMTPServer', value: inputs.SMTPServer });
     }
     if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
-      await updateOption('SMTPAccount', inputs.SMTPAccount);
+      options.push({ key: 'SMTPAccount', value: inputs.SMTPAccount });
     }
     if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
-      await updateOption('SMTPFrom', inputs.SMTPFrom);
+      options.push({ key: 'SMTPFrom', value: inputs.SMTPFrom });
+    }
+    if (originInputs['SMTPPort'] !== inputs.SMTPPort && inputs.SMTPPort !== '') {
+      options.push({ key: 'SMTPPort', value: inputs.SMTPPort });
     }
-    if (
-      originInputs['SMTPPort'] !== inputs.SMTPPort &&
-      inputs.SMTPPort !== ''
-    ) {
-      await updateOption('SMTPPort', inputs.SMTPPort);
+    if (originInputs['SMTPToken'] !== inputs.SMTPToken && inputs.SMTPToken !== '') {
+      options.push({ key: 'SMTPToken', value: inputs.SMTPToken });
     }
-    if (
-      originInputs['SMTPToken'] !== inputs.SMTPToken &&
-      inputs.SMTPToken !== ''
-    ) {
-      await updateOption('SMTPToken', inputs.SMTPToken);
+    
+    if (options.length > 0) {
+      await updateOptions(options);
     }
   };
 
   const submitEmailDomainWhitelist = async () => {
-    if (
-      originInputs['EmailDomainWhitelist'] !==
-        inputs.EmailDomainWhitelist.join(',') &&
-      inputs.SMTPToken !== ''
-    ) {
-      await updateOption(
-        'EmailDomainWhitelist',
-        inputs.EmailDomainWhitelist.join(','),
-      );
+    if (Array.isArray(emailDomainWhitelist)) {
+      await updateOptions([{ 
+        key: 'EmailDomainWhitelist', 
+        value: emailDomainWhitelist.join(',') 
+      }]);
+    } else {
+      showError('邮箱域名白名单格式不正确');
     }
   };
 
   const submitWeChat = async () => {
+    const options = [];
+    
     if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
-      await updateOption(
-        'WeChatServerAddress',
-        removeTrailingSlash(inputs.WeChatServerAddress),
-      );
+      options.push({ 
+        key: 'WeChatServerAddress', 
+        value: removeTrailingSlash(inputs.WeChatServerAddress) 
+      });
     }
-    if (
-      originInputs['WeChatAccountQRCodeImageURL'] !==
-      inputs.WeChatAccountQRCodeImageURL
-    ) {
-      await updateOption(
-        'WeChatAccountQRCodeImageURL',
-        inputs.WeChatAccountQRCodeImageURL,
-      );
+    if (originInputs['WeChatAccountQRCodeImageURL'] !== inputs.WeChatAccountQRCodeImageURL) {
+      options.push({ 
+        key: 'WeChatAccountQRCodeImageURL', 
+        value: inputs.WeChatAccountQRCodeImageURL 
+      });
     }
-    if (
-      originInputs['WeChatServerToken'] !== inputs.WeChatServerToken &&
-      inputs.WeChatServerToken !== ''
-    ) {
-      await updateOption('WeChatServerToken', inputs.WeChatServerToken);
+    if (originInputs['WeChatServerToken'] !== inputs.WeChatServerToken && inputs.WeChatServerToken !== '') {
+      options.push({ key: 'WeChatServerToken', value: inputs.WeChatServerToken });
+    }
+    
+    if (options.length > 0) {
+      await updateOptions(options);
     }
   };
 
   const submitGitHubOAuth = async () => {
+    const options = [];
+    
     if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
-      await updateOption('GitHubClientId', inputs.GitHubClientId);
+      options.push({ key: 'GitHubClientId', value: inputs.GitHubClientId });
+    }
+    if (originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && inputs.GitHubClientSecret !== '') {
+      options.push({ key: 'GitHubClientSecret', value: inputs.GitHubClientSecret });
     }
-    if (
-      originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
-      inputs.GitHubClientSecret !== ''
-    ) {
-      await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
+    
+    if (options.length > 0) {
+      await updateOptions(options);
     }
   };
 
@@ -315,679 +332,599 @@ const SystemSetting = () => {
       } catch (err) {
         console.error(err);
         showError("获取 OIDC 配置失败，请检查网络状况和 Well-Known URL 是否正确");
+        return;
       }
     }
 
+    const options = [];
+    
     if (originInputs['oidc.well_known'] !== inputs['oidc.well_known']) {
-      await updateOption('oidc.well_known', inputs['oidc.well_known']);
+      options.push({ key: 'oidc.well_known', value: inputs['oidc.well_known'] });
     }
     if (originInputs['oidc.client_id'] !== inputs['oidc.client_id']) {
-      await updateOption('oidc.client_id', inputs['oidc.client_id']);
+      options.push({ key: 'oidc.client_id', value: inputs['oidc.client_id'] });
     }
     if (originInputs['oidc.client_secret'] !== inputs['oidc.client_secret'] && inputs['oidc.client_secret'] !== '') {
-      await updateOption('oidc.client_secret', inputs['oidc.client_secret']);
+      options.push({ key: 'oidc.client_secret', value: inputs['oidc.client_secret'] });
     }
     if (originInputs['oidc.authorization_endpoint'] !== inputs['oidc.authorization_endpoint']) {
-      await updateOption('oidc.authorization_endpoint', inputs['oidc.authorization_endpoint']);
+      options.push({ key: 'oidc.authorization_endpoint', value: inputs['oidc.authorization_endpoint'] });
     }
     if (originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']) {
-      await updateOption('oidc.token_endpoint', inputs['oidc.token_endpoint']);
+      options.push({ key: 'oidc.token_endpoint', value: inputs['oidc.token_endpoint'] });
     }
     if (originInputs['oidc.user_info_endpoint'] !== inputs['oidc.user_info_endpoint']) {
-      await updateOption('oidc.user_info_endpoint', inputs['oidc.user_info_endpoint']);
+      options.push({ key: 'oidc.user_info_endpoint', value: inputs['oidc.user_info_endpoint'] });
     }
-  }
+    
+    if (options.length > 0) {
+      await updateOptions(options);
+    }
+  };
 
   const submitTelegramSettings = async () => {
-    // await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
-    await updateOption('TelegramBotToken', inputs.TelegramBotToken);
-    await updateOption('TelegramBotName', inputs.TelegramBotName);
+    const options = [
+      { key: 'TelegramBotToken', value: inputs.TelegramBotToken },
+      { key: 'TelegramBotName', value: inputs.TelegramBotName }
+    ];
+    await updateOptions(options);
   };
 
   const submitTurnstile = async () => {
+    const options = [];
+    
     if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
-      await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
+      options.push({ key: 'TurnstileSiteKey', value: inputs.TurnstileSiteKey });
     }
-    if (
-      originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
-      inputs.TurnstileSecretKey !== ''
-    ) {
-      await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
+    if (originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey && inputs.TurnstileSecretKey !== '') {
+      options.push({ key: 'TurnstileSecretKey', value: inputs.TurnstileSecretKey });
     }
-  };
-
-  const submitNewRestrictedDomain = () => {
-    const localDomainList = inputs.EmailDomainWhitelist;
-    if (
-      restrictedDomainInput !== '' &&
-      !localDomainList.includes(restrictedDomainInput)
-    ) {
-      setRestrictedDomainInput('');
-      setInputs({
-        ...inputs,
-        EmailDomainWhitelist: [...localDomainList, restrictedDomainInput],
-      });
-      setEmailDomainWhitelist([
-        ...EmailDomainWhitelist,
-        {
-          key: restrictedDomainInput,
-          text: restrictedDomainInput,
-          value: restrictedDomainInput,
-        },
-      ]);
+    
+    if (options.length > 0) {
+      await updateOptions(options);
     }
   };
 
   const submitLinuxDOOAuth = async () => {
+    const options = [];
+    
     if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId) {
-      await updateOption('LinuxDOClientId', inputs.LinuxDOClientId);
+      options.push({ key: 'LinuxDOClientId', value: inputs.LinuxDOClientId });
     }
-    if (
-      originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret &&
-      inputs.LinuxDOClientSecret !== ''
-    ) {
-      await updateOption('LinuxDOClientSecret', inputs.LinuxDOClientSecret);
+    if (originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret && inputs.LinuxDOClientSecret !== '') {
+      options.push({ key: 'LinuxDOClientSecret', value: inputs.LinuxDOClientSecret });
+    }
+    
+    if (options.length > 0) {
+      await updateOptions(options);
     }
   };
 
+  const handleCheckboxChange = async (optionKey, event) => {
+    const value = event.target.checked;
+    
+    if (optionKey === 'PasswordLoginEnabled' && !value) {
+      setShowPasswordLoginConfirmModal(true);
+    } else {
+      await updateOptions([{ key: optionKey, value }]);
+    }
+    if (optionKey === 'LinuxDOOAuthEnabled') {
+      setLinuxDOOAuthEnabled(value);
+    }
+  };
+
+  const handlePasswordLoginConfirm = async () => {
+    await updateOptions([{ key: 'PasswordLoginEnabled', value: false }]);
+    setShowPasswordLoginConfirmModal(false);
+  };
+
   return (
-    <Grid columns={1}>
-      <Grid.Column>
-        <Form loading={loading} inverted={isDark}>
-          <Header as='h3' inverted={isDark}>
-            通用设置
-          </Header>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='服务器地址'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.ServerAddress}
-              name='ServerAddress'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitServerAddress}>
-            更新服务器地址
-          </Form.Button>
-          <Header as='h3' inverted={isDark}>
-            代理设置（支持{' '}
-            <a
-              href='https://github.com/Calcium-Ion/new-api-worker'
-              target='_blank'
-              rel='noreferrer'
-            >
-              new-api-worker
-            </a>
-            ）
-          </Header>
-          <Message info>
-            注意：代理功能仅对图片请求和 Webhook 请求生效，不会影响其他 API 请求。如需配置 API 请求代理，请参考
-            <a
-              href='https://github.com/Calcium-Ion/new-api/blob/main/docs/channel/other_setting.md'
-              target='_blank'
-              rel='noreferrer'
-            >
-              {' '}API 代理设置文档
-            </a>
-            。
-          </Message>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='Worker地址，不填写则不启用代理'
-              placeholder='例如：https://workername.yourdomain.workers.dev'
-              value={inputs.WorkerUrl}
-              name='WorkerUrl'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='Worker密钥，根据你部署的 Worker 填写'
-              placeholder='例如：your_secret_key'
-              value={inputs.WorkerValidKey}
-              name='WorkerValidKey'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitWorker}>更新Worker设置</Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            支付设置（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
-          </Header>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='支付地址，不填写则不启用在线支付'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.PayAddress}
-              name='PayAddress'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='易支付商户ID'
-              placeholder='例如：0001'
-              value={inputs.EpayId}
-              name='EpayId'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='易支付商户密钥'
-              placeholder='敏感信息不会发送到前端显示'
-              value={inputs.EpayKey}
-              name='EpayKey'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group widths='equal'>
-            <Form.Input
-              label='回调地址，不填写则使用上方服务器地址作为回调地址'
-              placeholder='例如：https://yourdomain.com'
-              value={inputs.CustomCallbackAddress}
-              name='CustomCallbackAddress'
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='充值价格（x元/美金）'
-              placeholder='例如：7，就是7元/美金'
-              value={inputs.Price}
-              name='Price'
-              min={0}
-              onChange={handleInputChange}
-            />
-            <Form.Input
-              label='最低充值美元数量（以美金为单位，如果使用额度请自行换算！）'
-              placeholder='例如：2，就是最低充值2$'
-              value={inputs.MinTopUp}
-              name='MinTopUp'
-              min={1}
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group widths='equal'>
-            <Form.TextArea
-              label='充值分组倍率'
-              name='TopupGroupRatio'
-              onChange={handleInputChange}
-              style={{ minHeight: 250, fontFamily: 'JetBrains Mono, Consolas' }}
-              autoComplete='new-password'
-              value={inputs.TopupGroupRatio}
-              placeholder='为一个 JSON 文本，键为组名称，值为倍率'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitPayAddress}>更新支付设置</Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置登录注册
-          </Header>
-          <Form.Group inline>
-            <Form.Checkbox
-              checked={inputs.PasswordLoginEnabled === 'true'}
-              label='允许通过密码进行登录'
-              name='PasswordLoginEnabled'
-              onChange={handleInputChange}
-            />
-            {showPasswordWarningModal && (
-              <Modal
-                open={showPasswordWarningModal}
-                onClose={() => setShowPasswordWarningModal(false)}
-                size={'tiny'}
-                style={{ maxWidth: '450px' }}
-              >
-                <Modal.Header>警告</Modal.Header>
-                <Modal.Content>
-                  <p>
-                    取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？
-                  </p>
-                </Modal.Content>
-                <Modal.Actions>
-                  <Button onClick={() => setShowPasswordWarningModal(false)}>
-                    取消
-                  </Button>
-                  <Button
-                    color='yellow'
-                    onClick={async () => {
-                      setShowPasswordWarningModal(false);
-                      await updateOption('PasswordLoginEnabled', 'false');
-                    }}
+    <div style={{ padding: '20px' }}>
+      {isLoaded ? (
+        <Form
+          initValues={inputs}
+          onValueChange={handleFormChange}
+          getFormApi={(api) => (formApiRef.current = api)}
+        >
+          {({ formState, values, formApi }) => (
+            <>
+              <Form.Section text='通用设置'>
+                <Form.Input
+                  field='ServerAddress'
+                  label='服务器地址'
+                  placeholder='例如：https://yourdomain.com'
+                  style={{ width: '100%' }}
+                />
+                <Button onClick={submitServerAddress}>更新服务器地址</Button>
+              </Form.Section>
+
+              <Form.Section text='代理设置'>
+                <Text>
+                  （支持{' '}
+                  <a
+                    href='https://github.com/Calcium-Ion/new-api-worker'
+                    target='_blank'
+                    rel='noreferrer'
                   >
-                    确定
-                  </Button>
-                </Modal.Actions>
-              </Modal>
-            )}
-            <Form.Checkbox
-              checked={inputs.PasswordRegisterEnabled === 'true'}
-              label='允许通过密码进行注册'
-              name='PasswordRegisterEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.EmailVerificationEnabled === 'true'}
-              label='通过密码注册时需要进行邮箱验证'
-              name='EmailVerificationEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.GitHubOAuthEnabled === 'true'}
-              label='允许通过 GitHub 账户登录 & 注册'
-              name='GitHubOAuthEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-                checked={inputs['oidc.enabled'] === 'true'}
-                label='允许通过 OIDC 登录 & 注册'
-                name='oidc.enabled'
-                onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.LinuxDOOAuthEnabled === 'true'}
-              label='允许通过 LinuxDO 账户登录 & 注册'
-              name='LinuxDOOAuthEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.WeChatAuthEnabled === 'true'}
-              label='允许通过微信登录 & 注册'
-              name='WeChatAuthEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.TelegramOAuthEnabled === 'true'}
-              label='允许通过 Telegram 进行登录'
-              name='TelegramOAuthEnabled'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Form.Group inline>
-            <Form.Checkbox
-              checked={inputs.RegisterEnabled === 'true'}
-              label='允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）'
-              name='RegisterEnabled'
-              onChange={handleInputChange}
-            />
-            <Form.Checkbox
-              checked={inputs.TurnstileCheckEnabled === 'true'}
-              label='启用 Turnstile 用户校验'
-              name='TurnstileCheckEnabled'
-              onChange={handleInputChange}
-            />
-          </Form.Group>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置邮箱域名白名单
-            <Header.Subheader>
-              用以防止恶意用户利用临时邮箱批量注册
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用邮箱域名白名单'
-              name='EmailDomainRestrictionEnabled'
-              onChange={handleInputChange}
-              checked={inputs.EmailDomainRestrictionEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用邮箱别名限制（例如：ab.cd@gmail.com）'
-              name='EmailAliasRestrictionEnabled'
-              onChange={handleInputChange}
-              checked={inputs.EmailAliasRestrictionEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Group widths={2}>
-            <Form.Dropdown
-              label='允许的邮箱域名'
-              placeholder='允许的邮箱域名'
-              name='EmailDomainWhitelist'
-              required
-              fluid
-              multiple
-              selection
-              onChange={handleInputChange}
-              value={inputs.EmailDomainWhitelist}
-              autoComplete='new-password'
-              options={EmailDomainWhitelist}
-            />
-            <Form.Input
-              label='添加新的允许的邮箱域名'
-              action={
+                    new-api-worker
+                  </a>
+                  ）
+                </Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='WorkerUrl'
+                      label='Worker地址'
+                      placeholder='例如：https://workername.yourdomain.workers.dev'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='WorkerValidKey'
+                      label='Worker密钥'
+                      placeholder='敏感信息不会发送到前端显示'
+                      type='password'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitWorker}>更新Worker设置</Button>
+              </Form.Section>
+
+              <Form.Section text='支付设置'>
+                <Text>
+                  （当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）
+                </Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='PayAddress'
+                      label='支付地址'
+                      placeholder='例如：https://yourdomain.com'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='EpayId'
+                      label='易支付商户ID'
+                      placeholder='例如：0001'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='EpayKey'
+                      label='易支付商户密钥'
+                      placeholder='敏感信息不会发送到前端显示'
+                      type='password'
+                    />
+                  </Col>
+                </Row>
+                <Row
+                  gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                  style={{ marginTop: 16 }}
+                >
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='CustomCallbackAddress'
+                      label='回调地址'
+                      placeholder='例如：https://yourdomain.com'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.InputNumber
+                      field='Price'
+                      precision={2}
+                      label='充值价格（x元/美金）'
+                      placeholder='例如：7，就是7元/美金'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.InputNumber
+                      field='MinTopUp'
+                      label='最低充值美元数量'
+                      placeholder='例如：2，就是最低充值2$'
+                    />
+                  </Col>
+                </Row>
+                <Form.TextArea
+                  field='TopupGroupRatio'
+                  label='充值分组倍率'
+                  placeholder='为一个 JSON 文本，键为组名称，值为倍率'
+                  autosize
+                />
+                <Button onClick={submitPayAddress}>更新支付设置</Button>
+              </Form.Section>
+
+              <Form.Section text='配置登录注册'>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Checkbox
+                      field='PasswordLoginEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('PasswordLoginEnabled', e)
+                      }
+                    >
+                      允许通过密码进行登录
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='PasswordRegisterEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('PasswordRegisterEnabled', e)
+                      }
+                    >
+                      允许通过密码进行注册
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='EmailVerificationEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('EmailVerificationEnabled', e)
+                      }
+                    >
+                      通过密码注册时需要进行邮箱验证
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='RegisterEnabled'
+                      noLabel
+                      onChange={(e) => handleCheckboxChange('RegisterEnabled', e)}
+                    >
+                      允许新用户注册
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='TurnstileCheckEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('TurnstileCheckEnabled', e)
+                      }
+                    >
+                      启用 Turnstile 用户校验
+                    </Form.Checkbox>
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Checkbox
+                      field='GitHubOAuthEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('GitHubOAuthEnabled', e)
+                      }
+                    >
+                      允许通过 GitHub 账户登录 & 注册
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='LinuxDOOAuthEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('LinuxDOOAuthEnabled', e)
+                      }
+                    >
+                      允许通过 Linux DO 账户登录 & 注册
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='WeChatAuthEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('WeChatAuthEnabled', e)
+                      }
+                    >
+                      允许通过微信登录 & 注册
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='TelegramOAuthEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('TelegramOAuthEnabled', e)
+                      }
+                    >
+                      允许通过 Telegram 进行登录
+                    </Form.Checkbox>
+                    <Form.Checkbox
+                      field='oidc.enabled'
+                      noLabel
+                      onChange={(e) => handleCheckboxChange('oidc.enabled', e)}
+                    >
+                      允许通过 OIDC 进行登录
+                    </Form.Checkbox>
+                  </Col>
+                </Row>
+              </Form.Section>
+
+              <Form.Section text='配置邮箱域名白名单'>
+                <Text>用以防止恶意用户利用临时邮箱批量注册</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Checkbox
+                      field='EmailDomainRestrictionEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('EmailDomainRestrictionEnabled', e)
+                      }
+                    >
+                      启用邮箱域名白名单
+                    </Form.Checkbox>
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Checkbox
+                      field='EmailAliasRestrictionEnabled'
+                      noLabel
+                      onChange={(e) =>
+                        handleCheckboxChange('EmailAliasRestrictionEnabled', e)
+                      }
+                    >
+                      启用邮箱别名限制
+                    </Form.Checkbox>
+                  </Col>
+                </Row>
+                <TagInput
+                  value={emailDomainWhitelist}
+                  onChange={setEmailDomainWhitelist}
+                  placeholder='输入域名后回车'
+                  style={{ width: '100%', marginTop: 16 }}
+                />
                 <Button
-                  type='button'
-                  onClick={() => {
-                    submitNewRestrictedDomain();
-                  }}
+                  onClick={submitEmailDomainWhitelist}
+                  style={{ marginTop: 10 }}
                 >
-                  填入
+                  保存邮箱域名白名单设置
                 </Button>
-              }
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  submitNewRestrictedDomain();
-                }
-              }}
-              autoComplete='new-password'
-              placeholder='输入新的允许的邮箱域名'
-              value={restrictedDomainInput}
-              onChange={(e, { value }) => {
-                setRestrictedDomainInput(value);
-              }}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitEmailDomainWhitelist}>
-            保存邮箱域名白名单设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 SMTP
-            <Header.Subheader>用以支持系统的邮件发送</Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='SMTP 服务器地址'
-              name='SMTPServer'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPServer}
-              placeholder='例如：smtp.qq.com'
-            />
-            <Form.Input
-              label='SMTP 端口'
-              name='SMTPPort'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPPort}
-              placeholder='默认: 587'
-            />
-            <Form.Input
-              label='SMTP 账户'
-              name='SMTPAccount'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPAccount}
-              placeholder='通常是邮箱地址'
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='SMTP 发送者邮箱'
-              name='SMTPFrom'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.SMTPFrom}
-              placeholder='通常和邮箱地址保持一致'
-            />
-            <Form.Input
-              label='SMTP 访问凭证'
-              name='SMTPToken'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              checked={inputs.RegisterEnabled === 'true'}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Group widths={3}>
-            <Form.Checkbox
-              label='启用SMTP SSL（465端口强制开启）'
-              name='SMTPSSLEnabled'
-              onChange={handleInputChange}
-              checked={inputs.SMTPSSLEnabled === 'true'}
-            />
-          </Form.Group>
-          <Form.Button onClick={submitSMTP}>保存 SMTP 设置</Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 GitHub OAuth App
-            <Header.Subheader>
-              用以支持通过 GitHub 进行登录注册，
-              <a
-                href='https://github.com/settings/developers'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              管理你的 GitHub OAuth App
-            </Header.Subheader>
-          </Header>
-          <Message>
-            Homepage URL 填 <code>{inputs.ServerAddress}</code>
-            ，Authorization callback URL 填{' '}
-            <code>{`${inputs.ServerAddress}/oauth/github`}</code>
-          </Message>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='GitHub Client ID'
-              name='GitHubClientId'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.GitHubClientId}
-              placeholder='输入你注册的 GitHub OAuth APP 的 ID'
-            />
-            <Form.Input
-              label='GitHub Client Secret'
-              name='GitHubClientSecret'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              value={inputs.GitHubClientSecret}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitGitHubOAuth}>
-            保存 GitHub OAuth 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 WeChat Server
-            <Header.Subheader>
-              用以支持通过微信进行登录注册，
-              <a
-                href='https://github.com/songquanpeng/wechat-server'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              了解 WeChat Server
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='WeChat Server 服务器地址'
-              name='WeChatServerAddress'
-              placeholder='例如：https://yourdomain.com'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatServerAddress}
-            />
-            <Form.Input
-              label='WeChat Server 访问凭证'
-              name='WeChatServerToken'
-              type='password'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatServerToken}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-            <Form.Input
-              label='微信公众号二维码图片链接'
-              name='WeChatAccountQRCodeImageURL'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.WeChatAccountQRCodeImageURL}
-              placeholder='输入一个图片链接'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitWeChat}>
-            保存 WeChat Server 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 Telegram 登录
-          </Header>
-          <Form.Group inline>
-            <Form.Input
-              label='Telegram Bot Token'
-              name='TelegramBotToken'
-              onChange={handleInputChange}
-              value={inputs.TelegramBotToken}
-              placeholder='输入你的 Telegram Bot Token'
-            />
-            <Form.Input
-              label='Telegram Bot 名称'
-              name='TelegramBotName'
-              onChange={handleInputChange}
-              value={inputs.TelegramBotName}
-              placeholder='输入你的 Telegram Bot 名称'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitTelegramSettings}>
-            保存 Telegram 登录设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 Turnstile
-            <Header.Subheader>
-              用以支持用户校验，
-              <a
-                href='https://dash.cloudflare.com/'
-                target='_blank'
-                rel='noreferrer'
-              >
-                点击此处
-              </a>
-              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
-            </Header.Subheader>
-          </Header>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='Turnstile Site Key'
-              name='TurnstileSiteKey'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.TurnstileSiteKey}
-              placeholder='输入你注册的 Turnstile Site Key'
-            />
-            <Form.Input
-              label='Turnstile Secret Key'
-              name='TurnstileSecretKey'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              value={inputs.TurnstileSecretKey}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitTurnstile}>
-            保存 Turnstile 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 LinuxDO OAuth App
-            <Header.Subheader>
-              用以支持通过 LinuxDO 进行登录注册，
-              <a
-                href='https://connect.linux.do/'
-                target='_blank'
-                rel='noreferrer'
+              </Form.Section>
+
+              <Form.Section text='配置 SMTP'>
+                <Text>用以支持系统的邮件发送</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input field='SMTPServer' label='SMTP 服务器地址' />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input field='SMTPPort' label='SMTP 端口' />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input field='SMTPAccount' label='SMTP 账户' />
+                  </Col>
+                </Row>
+                <Row
+                  gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                  style={{ marginTop: 16 }}
+                >
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input field='SMTPFrom' label='SMTP 发送者邮箱' />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='SMTPToken'
+                      label='SMTP 访问凭证'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Checkbox
+                      field='SMTPSSLEnabled'
+                      noLabel
+                      onChange={(e) => handleCheckboxChange('SMTPSSLEnabled', e)}
+                    >
+                      启用SMTP SSL
+                    </Form.Checkbox>
+                  </Col>
+                </Row>
+                <Button onClick={submitSMTP}>保存 SMTP 设置</Button>
+              </Form.Section>
+
+              <Form.Section text='配置 OIDC'>
+                <Text>用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP</Text>
+                <Banner
+                  type='info'
+                  description={`主页链接填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，重定向 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/oidc`}
+                  style={{ marginBottom: 20, marginTop: 16 }}
+                />
+                <Text>若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.well_known'
+                      label='Well-Known URL'
+                      placeholder='请输入 OIDC 的 Well-Known URL'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.client_id'
+                      label='Client ID'
+                      placeholder='输入 OIDC 的 Client ID'
+                    />
+                  </Col>
+                </Row>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.client_secret'
+                      label='Client Secret'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.authorization_endpoint'
+                      label='Authorization Endpoint'
+                      placeholder='输入 OIDC 的 Authorization Endpoint'
+                    />
+                  </Col>
+                </Row>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.token_endpoint'
+                      label='Token Endpoint'
+                      placeholder='输入 OIDC 的 Token Endpoint'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='oidc.user_info_endpoint'
+                      label='User Info Endpoint'
+                      placeholder='输入 OIDC 的 Userinfo Endpoint'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitOIDCSettings}>保存 OIDC 设置</Button>
+              </Form.Section>
+
+              <Form.Section text='配置 GitHub OAuth App'>
+                <Text>用以支持通过 GitHub 进行登录注册</Text>
+                <Banner
+                  type='info'
+                  description={`Homepage URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}，Authorization callback URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/github`}
+                  style={{ marginBottom: 20, marginTop: 16 }}
+                />
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input field='GitHubClientId' label='GitHub Client ID' />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='GitHubClientSecret'
+                      label='GitHub Client Secret'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitGitHubOAuth}>
+                  保存 GitHub OAuth 设置
+                </Button>
+              </Form.Section>
+              <Form.Section text='配置 Linux DO OAuth'>
+                <Text>
+                  用以支持通过 Linux DO 进行登录注册
+                  <a
+                    href='https://connect.linux.do/'
+                    target='_blank'
+                    rel='noreferrer'
+                    style={{ display: 'inline-block', marginLeft: 4, marginRight: 4 }}
+                  >
+                    点击此处
+                  </a>
+                  管理你的 LinuxDO OAuth App
+                </Text>
+                <Banner
+                  type='info'
+                  description={`回调 URL 填 ${inputs.ServerAddress ? inputs.ServerAddress : '网站地址'}/oauth/linuxdo`}
+                  style={{ marginBottom: 20, marginTop: 16 }}
+                />
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input 
+                      field='LinuxDOClientId' 
+                      label='Linux DO Client ID'
+                      placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='LinuxDOClientSecret'
+                      label='Linux DO Client Secret'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitLinuxDOOAuth}>
+                  保存 Linux DO OAuth 设置
+                </Button>
+              </Form.Section>
+              <Form.Section text='配置 WeChat Server'>
+                <Text>用以支持通过微信进行登录注册</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='WeChatServerAddress'
+                      label='WeChat Server 服务器地址'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='WeChatServerToken'
+                      label='WeChat Server 访问凭证'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+                    <Form.Input
+                      field='WeChatAccountQRCodeImageURL'
+                      label='微信公众号二维码图片链接'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitWeChat}>保存 WeChat Server 设置</Button>
+              </Form.Section>
+              <Form.Section text='配置 Telegram 登录'>
+                <Text>用以支持通过 Telegram 进行登录注册</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='TelegramBotToken'
+                      label='Telegram Bot Token'
+                      placeholder='敏感信息不会发送到前端显示'
+                      type='password'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='TelegramBotName'
+                      label='Telegram Bot 名称'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitTelegramSettings}>
+                  保存 Telegram 登录设置
+                </Button>
+              </Form.Section>
+              <Form.Section text='配置 Turnstile'>
+                <Text>用以支持用户校验</Text>
+                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='TurnstileSiteKey'
+                      label='Turnstile Site Key'
+                    />
+                  </Col>
+                  <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                    <Form.Input
+                      field='TurnstileSecretKey'
+                      label='Turnstile Secret Key'
+                      type='password'
+                      placeholder='敏感信息不会发送到前端显示'
+                    />
+                  </Col>
+                </Row>
+                <Button onClick={submitTurnstile}>保存 Turnstile 设置</Button>
+              </Form.Section>
+            
+              <Modal
+                title="确认取消密码登录"
+                visible={showPasswordLoginConfirmModal}
+                onOk={handlePasswordLoginConfirm}
+                onCancel={() => {
+                  setShowPasswordLoginConfirmModal(false);
+                  formApiRef.current.setValue('PasswordLoginEnabled', true);
+                }}
+                okText="确认"
+                cancelText="取消"
               >
-                点击此处
-              </a>
-              管理你的 LinuxDO OAuth App
-            </Header.Subheader>
-          </Header>
-          <Message>
-            Homepage URL 填 <code>{inputs.ServerAddress}</code>
-            ，Authorization callback URL 填{' '}
-            <code>{`${inputs.ServerAddress}/oauth/linuxdo`}</code>
-          </Message>
-          <Form.Group widths={3}>
-            <Form.Input
-              label='LinuxDO Client ID'
-              name='LinuxDOClientId'
-              onChange={handleInputChange}
-              autoComplete='new-password'
-              value={inputs.LinuxDOClientId}
-              placeholder='输入你注册的 LinuxDO OAuth APP 的 ID'
-            />
-            <Form.Input
-              label='LinuxDO Client Secret'
-              name='LinuxDOClientSecret'
-              onChange={handleInputChange}
-              type='password'
-              autoComplete='new-password'
-              value={inputs.LinuxDOClientSecret}
-              placeholder='敏感信息不会发送到前端显示'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitLinuxDOOAuth}>
-            保存 LinuxDO OAuth 设置
-          </Form.Button>
-          <Divider />
-          <Header as='h3' inverted={isDark}>
-            配置 OIDC
-            <Header.Subheader>
-              用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP
-            </Header.Subheader>
-          </Header>
-          <Message>
-            主页链接填 <code>{ inputs.ServerAddress }</code>，
-            重定向 URL 填 <code>{ `${ inputs.ServerAddress }/oauth/oidc` }</code>
-          </Message>
-          <Message>
-            若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置
-          </Message>
-          <Form.Group widths={3}>
-            <Form.Input
-                label='Client ID'
-                name='oidc.client_id'
-                onChange={handleInputChange}
-                value={inputs['oidc.client_id']}
-                placeholder='输入 OIDC 的 Client ID'
-            />
-            <Form.Input
-                label='Client Secret'
-                name='oidc.client_secret'
-                onChange={handleInputChange}
-                type='password'
-                value={inputs['oidc.client_secret']}
-                placeholder='敏感信息不会发送到前端显示'
-            />
-            <Form.Input
-                label='Well-Known URL'
-                name='oidc.well_known'
-                onChange={handleInputChange}
-                value={inputs['oidc.well_known']}
-                placeholder='请输入 OIDC 的 Well-Known URL'
-            />
-            <Form.Input
-                label='Authorization Endpoint'
-                name='oidc.authorization_endpoint'
-                onChange={handleInputChange}
-                value={inputs['oidc.authorization_endpoint']}
-                placeholder='输入 OIDC 的 Authorization Endpoint'
-            />
-            <Form.Input
-                label='Token Endpoint'
-                name='oidc.token_endpoint'
-                onChange={handleInputChange}
-                value={inputs['oidc.token_endpoint']}
-                placeholder='输入 OIDC 的 Token Endpoint'
-            />
-            <Form.Input
-                label='Userinfo Endpoint'
-                name='oidc.user_info_endpoint'
-                onChange={handleInputChange}
-                value={inputs['oidc.user_info_endpoint']}
-                placeholder='输入 OIDC 的 Userinfo Endpoint'
-            />
-          </Form.Group>
-          <Form.Button onClick={submitOIDCSettings}>
-            保存 OIDC 设置
-          </Form.Button>
+                <p>您确定要取消密码登录功能吗？这可能会影响用户的登录方式。</p>
+              </Modal>
+            </>
+          )}
         </Form>
-      </Grid.Column>
-    </Grid>
+      ) : (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+          <Spin size="large" />
+        </div>
+      )}
+    </div>
   );
 };
 
-export default SystemSetting;
+export default SystemSetting;

web/src/context/Style/index.js

@@ -60,6 +60,9 @@ export const StyleProvider = ({ children }) => {
       if (pathname === '' || pathname === '/' || pathname.includes('/home') || pathname.includes('/chat')) {
         dispatch({ type: 'SET_SIDER', payload: false });
         dispatch({ type: 'SET_INNER_PADDING', payload: false });
+      } else if (pathname === '/setup') {
+        dispatch({ type: 'SET_SIDER', payload: false });
+        dispatch({ type: 'SET_INNER_PADDING', payload: false });
       } else {
         // Only show sidebar on non-mobile devices by default
         dispatch({ type: 'SET_SIDER', payload: !isMobile() });

web/src/i18n/locales/en.json

@@ -1275,6 +1275,7 @@
   "代理站地址": "Base URL",
   "对于官方渠道，new-api已经内置地址，除非是第三方代理站点或者Azure的特殊接入地址，否则不需要填写": "For official channels, the new-api has a built-in address. Unless it is a third-party proxy site or a special Azure access address, there is no need to fill it in",
   "渠道额外设置": "Channel extra settings",
+  "参数覆盖": "Parameters override",
   "模型请求速率限制": "Model request rate limit",
   "启用用户模型请求速率限制（可能会影响高并发性能）": "Enable user model request rate limit (may affect high concurrency performance)",
   "限制周期": "Limit period",

web/src/pages/Channel/EditChannel.js

@@ -983,6 +983,23 @@ const EditChannel = (props) => {
               </Typography.Text>
             </Space>
           </>
+          <>
+            <div style={{ marginTop: 10 }}>
+              <Typography.Text strong>
+                {t('参数覆盖')}：
+              </Typography.Text>
+            </div>
+            <TextArea
+              placeholder={t('此项可选，用于覆盖请求参数。不支持覆盖 stream 参数。为一个 JSON 字符串，例如：') + '\n{\n  "temperature": 0\n}'}
+              name="setting"
+              onChange={(value) => {
+                handleInputChange('param_override', value);
+              }}
+              autosize
+              value={inputs.param_override}
+              autoComplete="new-password"
+            />
+          </>
           {inputs.type === 1 && (
             <>
               <div style={{ marginTop: 10 }}>

web/src/pages/Home/index.js

@@ -66,6 +66,10 @@ const Home = () => {
   };
 
   useEffect(() => {
+    if (statusState.status?.setup === false) {
+      window.location.href = '/setup';
+      return;
+    }
     displayNotice().then();
     displayHomePageContent().then();
   });

web/src/pages/Setting/Operation/SettingsGeneral.js

@@ -27,9 +27,10 @@ export default function GeneralSettings(props) {
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
 
-  function onChange(value, e) {
-    const name = e.target.id;
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  function handleFieldChange(fieldName) {
+    return (value) => {
+      setInputs((inputs) => ({ ...inputs, [fieldName]: value }));
+    };
   }
 
   function onSubmit() {
@@ -98,7 +99,7 @@ export default function GeneralSettings(props) {
                   label={t('充值链接')}
                   initValue={''}
                   placeholder={t('例如发卡网站的购买链接')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('TopUpLink')}
                   showClear
                 />
               </Col>
@@ -108,7 +109,7 @@ export default function GeneralSettings(props) {
                   label={t('文档地址')}
                   initValue={''}
                   placeholder={t('例如 https://docs.newapi.pro')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('general_setting.docs_link')}
                   showClear
                 />
               </Col>
@@ -118,7 +119,7 @@ export default function GeneralSettings(props) {
                   label={t('单位美元额度')}
                   initValue={''}
                   placeholder={t('一单位货币能兑换的额度')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('QuotaPerUnit')}
                   showClear
                   onClick={() => setShowQuotaWarning(true)}
                 />
@@ -129,7 +130,7 @@ export default function GeneralSettings(props) {
                   label={t('失败重试次数')}
                   initValue={''}
                   placeholder={t('失败重试次数')}
-                  onChange={onChange}
+                  onChange={handleFieldChange('RetryTimes')}
                   showClear
                 />
               </Col>
@@ -142,12 +143,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      DisplayInCurrencyEnabled: value,
-                    });
-                  }}
+                  onChange={handleFieldChange('DisplayInCurrencyEnabled')}
                 />
               </Col>
               <Col xs={24} sm={12} md={8} lg={8} xl={8}>
@@ -157,12 +153,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DisplayTokenStatEnabled: value,
-                    })
-                  }
+                  onChange={handleFieldChange('DisplayTokenStatEnabled')}
                 />
               </Col>
               <Col xs={24} sm={12} md={8} lg={8} xl={8}>
@@ -172,12 +163,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DefaultCollapseSidebar: value,
-                    })
-                  }
+                  onChange={handleFieldChange('DefaultCollapseSidebar')}
                 />
               </Col>
             </Row>
@@ -189,12 +175,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DemoSiteEnabled: value
-                    })
-                  }
+                  onChange={handleFieldChange('DemoSiteEnabled')}
                 />
               </Col>
               <Col xs={24} sm={12} md={8} lg={8} xl={8}>
@@ -205,12 +186,7 @@ export default function GeneralSettings(props) {
                   size='default'
                   checkedText='｜'
                   uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      SelfUseModeEnabled: value
-                    })
-                  }
+                  onChange={handleFieldChange('SelfUseModeEnabled')}
                 />
               </Col>
             </Row>

web/src/pages/Setup/index.js

@@ -0,0 +1,252 @@
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import { Card, Col, Row, Form, Button, Typography, Space, RadioGroup, Radio, Modal, Banner } from '@douyinfe/semi-ui';
+import { API, showError, showNotice, timestamp2string } from '../../helpers';
+import { StatusContext } from '../../context/Status';
+import { marked } from 'marked';
+import { StyleContext } from '../../context/Style/index.js';
+import { useTranslation } from 'react-i18next';
+import { IconHelpCircle, IconInfoCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
+
+const Setup = () => {
+  const { t, i18n } = useTranslation();
+  const [statusState] = useContext(StatusContext);
+  const [styleState, styleDispatch] = useContext(StyleContext);
+  const [loading, setLoading] = useState(false);
+  const [selfUseModeInfoVisible, setUsageModeInfoVisible] = useState(false);
+  const [setupStatus, setSetupStatus] = useState({
+    status: false,
+    root_init: false,
+    database_type: ''
+  });
+  const { Text, Title } = Typography;
+  const formRef = useRef(null);
+  
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    usageMode: 'external'
+  });
+
+  useEffect(() => {
+    fetchSetupStatus();
+  }, []);
+
+  const fetchSetupStatus = async () => {
+    try {
+      const res = await API.get('/api/setup');
+      const { success, data } = res.data;
+      if (success) {
+        setSetupStatus(data);
+        
+        // If setup is already completed, redirect to home
+        if (data.status) {
+          window.location.href = '/';
+        }
+      } else {
+        showError(t('获取初始化状态失败'));
+      }
+    } catch (error) {
+      console.error('Failed to fetch setup status:', error);
+      showError(t('获取初始化状态失败'));
+    }
+  };
+
+  const handleUsageModeChange = (val) => {
+    setFormData({...formData, usageMode: val});
+  };
+
+  const onSubmit = () => {
+    if (!formRef.current) {
+      console.error("Form reference is null");
+      showError(t('表单引用错误，请刷新页面重试'));
+      return;
+    }
+    
+    const values = formRef.current.getValues();
+    console.log("Form values:", values);
+    
+    // For root_init=false, validate admin username and password
+    if (!setupStatus.root_init) {
+      if (!values.username || !values.username.trim()) {
+        showError(t('请输入管理员用户名'));
+        return;
+      }
+      
+      if (!values.password || values.password.length < 8) {
+        showError(t('密码长度至少为8个字符'));
+        return;
+      }
+      
+      if (values.password !== values.confirmPassword) {
+        showError(t('两次输入的密码不一致'));
+        return;
+      }
+    }
+    
+    // Prepare submission data
+    const formValues = {...values};
+    formValues.SelfUseModeEnabled = values.usageMode === 'self';
+    formValues.DemoSiteEnabled = values.usageMode === 'demo';
+    
+    // Remove usageMode as it's not needed by the backend
+    delete formValues.usageMode;
+    
+    console.log("Submitting data to backend:", formValues);
+    setLoading(true);
+    
+    // Submit to backend
+    API.post('/api/setup', formValues)
+      .then(res => {
+        const { success, message } = res.data;
+        console.log("API response:", res.data);
+        
+        if (success) {
+          showNotice(t('系统初始化成功，正在跳转...'));
+          setTimeout(() => {
+            window.location.reload();
+          }, 1500);
+        } else {
+          showError(message || t('初始化失败，请重试'));
+        }
+      })
+      .catch(error => {
+        console.error('API error:', error);
+        showError(t('系统初始化失败，请重试'));
+        setLoading(false);
+      })
+      .finally(() => {
+        // setLoading(false);
+      });
+  };
+
+  return (
+    <>
+      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
+        <Card>
+          <Title heading={2} style={{ marginBottom: '24px' }}>{t('系统初始化')}</Title>
+          
+          {setupStatus.database_type === 'sqlite' && (
+            <Banner
+              type="warning"
+              icon={<IconAlertTriangle size="large" />}
+              closeIcon={null}
+              title={t('数据库警告')}
+              description={
+                <div>
+                  <p>{t('您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！')}</p>
+                  <p>{t('建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。')}</p>
+                </div>
+              }
+              style={{ marginBottom: '24px' }}
+            />
+          )}
+          
+          <Form
+            getFormApi={(formApi) => { formRef.current = formApi; console.log("Form API set:", formApi); }}
+            initValues={formData}
+          >
+            {setupStatus.root_init ? (
+              <Banner
+                type="info"
+                icon={<IconInfoCircle />}
+                closeIcon={null}
+                description={t('管理员账号已经初始化过，请继续设置系统参数')}
+                style={{ marginBottom: '24px' }}
+              />
+            ) : (
+              <Form.Section text={t('管理员账号')}>
+                <Form.Input
+                  field="username"
+                  label={t('用户名')}
+                  placeholder={t('请输入管理员用户名')}
+                  showClear
+                  onChange={(value) => setFormData({...formData, username: value})}
+                />
+                <Form.Input
+                  field="password"
+                  label={t('密码')}
+                  placeholder={t('请输入管理员密码')}
+                  type="password"
+                  showClear
+                  onChange={(value) => setFormData({...formData, password: value})}
+                />
+                <Form.Input
+                  field="confirmPassword"
+                  label={t('确认密码')}
+                  placeholder={t('请确认管理员密码')}
+                  type="password"
+                  showClear
+                  onChange={(value) => setFormData({...formData, confirmPassword: value})}
+                />
+              </Form.Section>
+            )}
+            
+            <Form.Section text={
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                {t('系统设置')}
+              </div>
+            }>
+              <Form.RadioGroup 
+                field="usageMode" 
+                label={
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    {t('使用模式')}
+                    <IconHelpCircle 
+                      style={{ marginLeft: '4px', color: 'var(--semi-color-primary)', verticalAlign: 'middle', cursor: 'pointer' }} 
+                      onClick={(e) => {
+                        // e.preventDefault();
+                        // e.stopPropagation();
+                        setUsageModeInfoVisible(true);
+                      }}
+                    />
+                  </div>
+                }
+                extraText={t('可在初始化后修改')}
+                initValue="external"
+                onChange={handleUsageModeChange}
+              >
+                <Form.Radio value="external">{t('对外运营模式')}</Form.Radio>
+                <Form.Radio value="self">{t('自用模式')}</Form.Radio>
+                <Form.Radio value="demo">{t('演示站点模式')}</Form.Radio>
+              </Form.RadioGroup>
+            </Form.Section>
+          </Form>
+
+          <div style={{ marginTop: '24px', textAlign: 'right' }}>
+            <Button type="primary" onClick={onSubmit} loading={loading}>
+              {t('初始化系统')}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <Modal
+        title={t('使用模式说明')}
+        visible={selfUseModeInfoVisible}
+        onOk={() => setUsageModeInfoVisible(false)}
+        onCancel={() => setUsageModeInfoVisible(false)}
+        closeOnEsc={true}
+        okText={t('确定')}
+        cancelText={null}
+      >
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('对外运营模式')}</Title>
+          <p>{t('默认模式，适用于为多个用户提供服务的场景。')}</p>
+          <p>{t('此模式下，系统将计算每次调用的用量，您需要对每个模型都设置价格，如果没有设置价格，用户将无法使用该模型。')}</p>
+        </div>
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('自用模式')}</Title>
+          <p>{t('适用于个人使用的场景。')}</p>
+          <p>{t('不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。')}</p>
+        </div>
+        <div style={{ padding: '8px 0' }}>
+          <Title heading={6}>{t('演示站点模式')}</Title>
+          <p>{t('适用于展示系统功能的场景。')}</p>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default Setup;