Merge pull request #4142 from seefs001/fix/skip_failure_option

fix: 修复 失败后不重试 配置项写到内存被覆盖

.env.example

@@ -19,6 +19,8 @@
 # HOSTNAME=your-hostname
 
 # 数据库相关配置
+# 启用错误日志记录
+# ERROR_LOG_ENABLED=true
 # 数据库连接字符串
 # SQL_DSN=user:password@tcp(127.0.0.1:3306)/dbname?parseTime=true
 # 日志数据库连接字符串

controller/pricing.go

@@ -1,6 +1,7 @@
 package controller
 
 import (
+	"github.com/QuantumNous/new-api/common"
 	"github.com/QuantumNous/new-api/model"
 	"github.com/QuantumNous/new-api/service"
 	"github.com/QuantumNous/new-api/setting/ratio_setting"
@@ -8,6 +9,30 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
+func filterPricingByUsableGroups(pricing []model.Pricing, usableGroup map[string]string) []model.Pricing {
+	if len(pricing) == 0 {
+		return pricing
+	}
+	if len(usableGroup) == 0 {
+		return []model.Pricing{}
+	}
+
+	filtered := make([]model.Pricing, 0, len(pricing))
+	for _, item := range pricing {
+		if common.StringsContains(item.EnableGroup, "all") {
+			filtered = append(filtered, item)
+			continue
+		}
+		for _, group := range item.EnableGroup {
+			if _, ok := usableGroup[group]; ok {
+				filtered = append(filtered, item)
+				break
+			}
+		}
+	}
+	return filtered
+}
+
 func GetPricing(c *gin.Context) {
 	pricing := model.GetPricing()
 	userId, exists := c.Get("id")
@@ -31,6 +56,7 @@ func GetPricing(c *gin.Context) {
 	}
 
 	usableGroup = service.GetUserUsableGroups(group)
+	pricing = filterPricingByUsableGroups(pricing, usableGroup)
 	// check groupRatio contains usableGroup
 	for group := range ratio_setting.GetGroupRatioCopy() {
 		if _, ok := usableGroup[group]; !ok {

controller/token.go

@@ -334,3 +334,26 @@ func DeleteTokenBatch(c *gin.Context) {
 		"data":    count,
 	})
 }
+
+func GetTokenKeysBatch(c *gin.Context) {
+	tokenBatch := TokenBatch{}
+	if err := c.ShouldBindJSON(&tokenBatch); err != nil || len(tokenBatch.Ids) == 0 {
+		common.ApiErrorI18n(c, i18n.MsgInvalidParams)
+		return
+	}
+	if len(tokenBatch.Ids) > 100 {
+		common.ApiErrorI18n(c, i18n.MsgBatchTooMany, map[string]any{"Max": 100})
+		return
+	}
+	userId := c.GetInt("id")
+	tokens, err := model.GetTokenKeysByIds(tokenBatch.Ids, userId)
+	if err != nil {
+		common.ApiError(c, err)
+		return
+	}
+	keysMap := make(map[int]string)
+	for _, t := range tokens {
+		keysMap[t.Id] = t.GetFullKey()
+	}
+	common.ApiSuccess(c, gin.H{"keys": keysMap})
+}

controller/usedata.go

@@ -27,6 +27,21 @@ func GetAllQuotaDates(c *gin.Context) {
 	return
 }
 
+func GetQuotaDatesByUser(c *gin.Context) {
+	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)
+	endTimestamp, _ := strconv.ParseInt(c.Query("end_timestamp"), 10, 64)
+	dates, err := model.GetQuotaDataGroupByUser(startTimestamp, endTimestamp)
+	if err != nil {
+		common.ApiError(c, err)
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"success": true,
+		"message": "",
+		"data":    dates,
+	})
+}
+
 func GetUserQuotaDates(c *gin.Context) {
 	userId := c.GetInt("id")
 	startTimestamp, _ := strconv.ParseInt(c.Query("start_timestamp"), 10, 64)

go.mod

@@ -8,9 +8,9 @@ require (
 	github.com/abema/go-mp4 v1.4.1
 	github.com/andybalholm/brotli v1.1.1
 	github.com/anknown/ahocorasick v0.0.0-20190904063843-d75dbd5169c0
-	github.com/aws/aws-sdk-go-v2 v1.41.2
+	github.com/aws/aws-sdk-go-v2 v1.41.5
 	github.com/aws/aws-sdk-go-v2/credentials v1.19.10
-	github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.0
+	github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.4
 	github.com/aws/smithy-go v1.24.2
 	github.com/bytedance/gopkg v0.1.3
 	github.com/gin-contrib/cors v1.7.2
@@ -63,9 +63,9 @@ require (
 require (
 	github.com/DmitriyVTitov/size v1.5.0 // indirect
 	github.com/anknown/darts v0.0.0-20151216065714-83ff685239e6 // indirect
-	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.5 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.18 // indirect
-	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.18 // indirect
+	github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.8 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.21 // indirect
+	github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.21 // indirect
 	github.com/beorn7/perks v1.0.1 // indirect
 	github.com/boombuler/barcode v1.1.0 // indirect
 	github.com/bytedance/sonic v1.14.1 // indirect

go.sum

@@ -12,18 +12,18 @@ github.com/anknown/ahocorasick v0.0.0-20190904063843-d75dbd5169c0 h1:onfun1RA+Kc
 github.com/anknown/ahocorasick v0.0.0-20190904063843-d75dbd5169c0/go.mod h1:4yg+jNTYlDEzBjhGS96v+zjyA3lfXlFd5CiTLIkPBLI=
 github.com/anknown/darts v0.0.0-20151216065714-83ff685239e6 h1:HblK3eJHq54yET63qPCTJnks3loDse5xRmmqHgHzwoI=
 github.com/anknown/darts v0.0.0-20151216065714-83ff685239e6/go.mod h1:pbiaLIeYLUbgMY1kwEAdwO6UKD5ZNwdPGQlwokS9fe8=
-github.com/aws/aws-sdk-go-v2 v1.41.2 h1:LuT2rzqNQsauaGkPK/7813XxcZ3o3yePY0Iy891T2ls=
-github.com/aws/aws-sdk-go-v2 v1.41.2/go.mod h1:IvvlAZQXvTXznUPfRVfryiG1fbzE2NGK6m9u39YQ+S4=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.5 h1:zWFmPmgw4sveAYi1mRqG+E/g0461cJ5M4bJ8/nc6d3Q=
-github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.5/go.mod h1:nVUlMLVV8ycXSb7mSkcNu9e3v/1TJq2RTlrPwhYWr5c=
+github.com/aws/aws-sdk-go-v2 v1.41.5 h1:dj5kopbwUsVUVFgO4Fi5BIT3t4WyqIDjGKCangnV/yY=
+github.com/aws/aws-sdk-go-v2 v1.41.5/go.mod h1:mwsPRE8ceUUpiTgF7QmQIJ7lgsKUPQOUl3o72QBrE1o=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.8 h1:eBMB84YGghSocM7PsjmmPffTa+1FBUeNvGvFou6V/4o=
+github.com/aws/aws-sdk-go-v2/aws/protocol/eventstream v1.7.8/go.mod h1:lyw7GFp3qENLh7kwzf7iMzAxDn+NzjXEAGjKS2UOKqI=
 github.com/aws/aws-sdk-go-v2/credentials v1.19.10 h1:EEhmEUFCE1Yhl7vDhNOI5OCL/iKMdkkYFTRpZXNw7m8=
 github.com/aws/aws-sdk-go-v2/credentials v1.19.10/go.mod h1:RnnlFCAlxQCkN2Q379B67USkBMu1PipEEiibzYN5UTE=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.18 h1:F43zk1vemYIqPAwhjTjYIz0irU2EY7sOb/F5eJ3HuyM=
-github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.18/go.mod h1:w1jdlZXrGKaJcNoL+Nnrj+k5wlpGXqnNrKoP22HvAug=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.18 h1:xCeWVjj0ki0l3nruoyP2slHsGArMxeiiaoPN5QZH6YQ=
-github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.18/go.mod h1:r/eLGuGCBw6l36ZRWiw6PaZwPXb6YOj+i/7MizNl5/k=
-github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.0 h1:TDKR8ACRw7G+GFaQlhoy6biu+8q6ZtSddQCy9avMdMI=
-github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.0/go.mod h1:XlhOh5Ax/lesqN4aZCUgj9vVJed5VoXYHHFYGAlJEwU=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.21 h1:Rgg6wvjjtX8bNHcvi9OnXWwcE0a2vGpbwmtICOsvcf4=
+github.com/aws/aws-sdk-go-v2/internal/configsources v1.4.21/go.mod h1:A/kJFst/nm//cyqonihbdpQZwiUhhzpqTsdbhDdRF9c=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.21 h1:PEgGVtPoB6NTpPrBgqSE5hE/o47Ij9qk/SEZFbUOe9A=
+github.com/aws/aws-sdk-go-v2/internal/endpoints/v2 v2.7.21/go.mod h1:p+hz+PRAYlY3zcpJhPwXlLC4C+kqn70WIHwnzAfs6ps=
+github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.4 h1:W6tKfa/s37faUnwJ71pGqsBO7/wfUX1L7tVprupQGo4=
+github.com/aws/aws-sdk-go-v2/service/bedrockruntime v1.50.4/go.mod h1:BZ+9thH0QOTDUwE8KAv/ZwUzsNC7CSMJXj/wtnZMs5k=
 github.com/aws/smithy-go v1.24.2 h1:FzA3bu/nt/vDvmnkg+R8Xl46gmzEDam6mZ1hzmwXFng=
 github.com/aws/smithy-go v1.24.2/go.mod h1:YE2RhdIuDbA5E5bTdciG9KrW3+TiEONeUWCqxX9i1Fc=
 github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=

i18n/keys.go

@@ -25,6 +25,7 @@ const (
 	MsgDeleteFailed      = "common.delete_failed"
 	MsgAlreadyExists     = "common.already_exists"
 	MsgNameCannotBeEmpty = "common.name_cannot_be_empty"
+	MsgBatchTooMany      = "common.batch_too_many"
 )
 
 // Token related messages

i18n/locales/en.yaml

@@ -21,6 +21,7 @@ common.delete_success: "Deletion successful"
 common.delete_failed: "Deletion failed"
 common.already_exists: "Already exists"
 common.name_cannot_be_empty: "Name cannot be empty"
+common.batch_too_many: "Too many items in batch request, maximum is {{.Max}}"
 
 # Token messages
 token.name_too_long: "Token name is too long"

i18n/locales/zh-CN.yaml

@@ -22,6 +22,7 @@ common.delete_success: "删除成功"
 common.delete_failed: "删除失败"
 common.already_exists: "已存在"
 common.name_cannot_be_empty: "名称不能为空"
+common.batch_too_many: "批量请求数量过多，最多 {{.Max}} 条"
 
 # Token messages
 token.name_too_long: "令牌名称过长"

i18n/locales/zh-TW.yaml

@@ -22,6 +22,7 @@ common.delete_success: "刪除成功"
 common.delete_failed: "刪除失敗"
 common.already_exists: "已存在"
 common.name_cannot_be_empty: "名稱不能為空"
+common.batch_too_many: "批次請求數量過多，最多 {{.Max}} 條"
 
 # Token messages
 token.name_too_long: "令牌名稱過長"

model/token.go

@@ -481,3 +481,11 @@ func BatchDeleteTokens(ids []int, userId int) (int, error) {
 
 	return len(tokens), nil
 }
+
+func GetTokenKeysByIds(ids []int, userId int) ([]Token, error) {
+	var tokens []Token
+	err := DB.Select("id", commonKeyCol).
+		Where("user_id = ? AND id IN (?)", userId, ids).
+		Find(&tokens).Error
+	return tokens, err
+}

model/usedata.go

@@ -115,6 +115,16 @@ func GetQuotaDataByUserId(userId int, startTime int64, endTime int64) (quotaData
 	return quotaDatas, err
 }
 
+func GetQuotaDataGroupByUser(startTime int64, endTime int64) (quotaData []*QuotaData, err error) {
+	var quotaDatas []*QuotaData
+	err = DB.Table("quota_data").
+		Select("username, created_at, sum(count) as count, sum(quota) as quota, sum(token_used) as token_used").
+		Where("created_at >= ? and created_at <= ?", startTime, endTime).
+		Group("username, created_at").
+		Find(&quotaDatas).Error
+	return quotaDatas, err
+}
+
 func GetAllQuotaDates(startTime int64, endTime int64, username string) (quotaData []*QuotaData, err error) {
 	if username != "" {
 		return GetQuotaDataByUsername(username, startTime, endTime)

relay/channel/claude/relay-claude.go

@@ -809,7 +809,16 @@ func HandleStreamFinalResponse(c *gin.Context, info *relaycommon.RelayInfo, clau
 		if common.DebugEnabled {
 			common.SysLog("claude response usage is not complete, maybe upstream error")
 		}
-		claudeInfo.Usage = service.ResponseText2Usage(c, claudeInfo.ResponseText.String(), info.UpstreamModelName, claudeInfo.Usage.PromptTokens)
+		// 只补缺失字段，不整份覆盖——保留 message_start 已拿到的 cache 字段
+		fallback := service.ResponseText2Usage(c, claudeInfo.ResponseText.String(), info.UpstreamModelName, info.GetEstimatePromptTokens())
+		if claudeInfo.Usage.CompletionTokens == 0 ||
+			(!claudeInfo.Done && fallback.CompletionTokens > claudeInfo.Usage.CompletionTokens) {
+			claudeInfo.Usage.CompletionTokens = fallback.CompletionTokens
+		}
+		if claudeInfo.Usage.PromptTokens == 0 {
+			claudeInfo.Usage.PromptTokens = fallback.PromptTokens
+		}
+		claudeInfo.Usage.TotalTokens = claudeInfo.Usage.PromptTokens + claudeInfo.Usage.CompletionTokens
 	}
 	if claudeInfo.Usage != nil {
 		claudeInfo.Usage.UsageSemantic = "anthropic"

relay/common/relay_info.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"strconv"
 	"strings"
 	"time"
 
@@ -690,6 +691,7 @@ func (t *TaskSubmitReq) UnmarshalJSON(data []byte) error {
 	type Alias TaskSubmitReq
 	aux := &struct {
 		Metadata json.RawMessage `json:"metadata,omitempty"`
+		Duration json.RawMessage `json:"duration,omitempty"`
 		*Alias
 	}{
 		Alias: (*Alias)(t),
@@ -699,6 +701,20 @@ func (t *TaskSubmitReq) UnmarshalJSON(data []byte) error {
 		return err
 	}
 
+	if len(aux.Duration) > 0 {
+		var durationInt int
+		if err := common.Unmarshal(aux.Duration, &durationInt); err == nil {
+			t.Duration = durationInt
+		} else {
+			var durationStr string
+			if err := common.Unmarshal(aux.Duration, &durationStr); err == nil && durationStr != "" {
+				if v, err := strconv.Atoi(durationStr); err == nil {
+					t.Duration = v
+				}
+			}
+		}
+	}
+
 	if len(aux.Metadata) > 0 {
 		var metadataStr string
 		if err := common.Unmarshal(aux.Metadata, &metadataStr); err == nil && metadataStr != "" {

relay/common/relay_utils.go

@@ -204,7 +204,9 @@ func ValidateBasicTaskRequest(c *gin.Context, info *RelayInfo, action string) *d
 		if err != nil {
 			return createTaskError(err, "invalid_multipart_form", http.StatusBadRequest, true)
 		}
-	} else if err := common.UnmarshalBodyReusable(c, &req); err != nil {
+	}
+	// 为了metadata字段的兼容性，统一UnmarshalBodyReusable
+	if err := common.UnmarshalBodyReusable(c, &req); err != nil {
 		return createTaskError(err, "invalid_request", http.StatusBadRequest, true)
 	}
 

router/api-router.go

@@ -257,6 +257,7 @@ func SetApiRouter(router *gin.Engine) {
 			tokenRoute.PUT("/", controller.UpdateToken)
 			tokenRoute.DELETE("/:id", controller.DeleteToken)
 			tokenRoute.POST("/batch", controller.DeleteTokenBatch)
+			tokenRoute.POST("/batch/keys", middleware.CriticalRateLimit(), middleware.DisableCache(), controller.GetTokenKeysBatch)
 		}
 
 		usageRoute := apiRouter.Group("/usage")
@@ -292,6 +293,7 @@ func SetApiRouter(router *gin.Engine) {
 
 		dataRoute := apiRouter.Group("/data")
 		dataRoute.GET("/", middleware.AdminAuth(), controller.GetAllQuotaDates)
+		dataRoute.GET("/users", middleware.AdminAuth(), controller.GetQuotaDatesByUser)
 		dataRoute.GET("/self", middleware.UserAuth(), controller.GetUserQuotaDates)
 
 		logRoute.Use(middleware.CORS(), middleware.CriticalRateLimit())

service/channel_affinity.go

@@ -166,12 +166,22 @@ func GetChannelAffinityCacheStats() ChannelAffinityCacheStats {
 			unknown++
 			continue
 		}
-		if rule.IncludeUsingGroup {
+		if rule.IncludeModelName {
 			if len(parts) < 3 {
 				unknown++
 				continue
 			}
 		}
+		if rule.IncludeUsingGroup {
+			minParts := 3
+			if rule.IncludeModelName {
+				minParts = 4
+			}
+			if len(parts) < minParts {
+				unknown++
+				continue
+			}
+		}
 		byRuleName[ruleName]++
 	}
 
@@ -319,11 +329,14 @@ func extractChannelAffinityValue(c *gin.Context, src operation_setting.ChannelAf
 	}
 }
 
-func buildChannelAffinityCacheKeySuffix(rule operation_setting.ChannelAffinityRule, usingGroup string, affinityValue string) string {
-	parts := make([]string, 0, 3)
+func buildChannelAffinityCacheKeySuffix(rule operation_setting.ChannelAffinityRule, modelName string, usingGroup string, affinityValue string) string {
+	parts := make([]string, 0, 4)
 	if rule.IncludeRuleName && rule.Name != "" {
 		parts = append(parts, rule.Name)
 	}
+	if rule.IncludeModelName && modelName != "" {
+		parts = append(parts, modelName)
+	}
 	if rule.IncludeUsingGroup && usingGroup != "" {
 		parts = append(parts, usingGroup)
 	}
@@ -573,7 +586,7 @@ func GetPreferredChannelByAffinity(c *gin.Context, modelName string, usingGroup
 		if ttlSeconds <= 0 {
 			ttlSeconds = setting.DefaultTTLSeconds
 		}
-		cacheKeySuffix := buildChannelAffinityCacheKeySuffix(rule, usingGroup, affinityValue)
+		cacheKeySuffix := buildChannelAffinityCacheKeySuffix(rule, modelName, usingGroup, affinityValue)
 		cacheKeyFull := channelAffinityCacheNamespace + ":" + cacheKeySuffix
 		setChannelAffinityContext(c, channelAffinityMeta{
 			CacheKey:       cacheKeyFull,

service/channel_affinity_template_test.go

@@ -193,7 +193,7 @@ func TestChannelAffinityHitCodexTemplatePassHeadersEffective(t *testing.T) {
 	require.NotNil(t, codexRule)
 
 	affinityValue := fmt.Sprintf("pc-hit-%d", time.Now().UnixNano())
-	cacheKeySuffix := buildChannelAffinityCacheKeySuffix(*codexRule, "default", affinityValue)
+	cacheKeySuffix := buildChannelAffinityCacheKeySuffix(*codexRule, "gpt-5", "default", affinityValue)
 
 	cache := getChannelAffinityCache()
 	require.NoError(t, cache.SetWithTTL(cacheKeySuffix, 9527, time.Minute))

setting/operation_setting/channel_affinity_setting.go

@@ -20,9 +20,10 @@ type ChannelAffinityRule struct {
 
 	ParamOverrideTemplate map[string]interface{} `json:"param_override_template,omitempty"`
 
-	SkipRetryOnFailure bool `json:"skip_retry_on_failure,omitempty"`
+	SkipRetryOnFailure bool `json:"skip_retry_on_failure"`
 
 	IncludeUsingGroup bool `json:"include_using_group"`
+	IncludeModelName  bool `json:"include_model_name"`
 	IncludeRuleName   bool `json:"include_rule_name"`
 }
 

web/src/components/common/ErrorBoundary.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Empty, Button } from '@douyinfe/semi-ui';
+import {
+  IllustrationFailure,
+  IllustrationFailureDark,
+} from '@douyinfe/semi-illustrations';
+import { withTranslation } from 'react-i18next';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const { t } = this.props;
+      return (
+        <div className='flex flex-col justify-center items-center h-screen p-8'>
+          <Empty
+            image={
+              <IllustrationFailure style={{ width: 250, height: 250 }} />
+            }
+            darkModeImage={
+              <IllustrationFailureDark style={{ width: 250, height: 250 }} />
+            }
+            description={t('页面渲染出错，请刷新页面重试')}
+          />
+          <Button
+            theme='solid'
+            type='primary'
+            style={{ marginTop: 16 }}
+            onClick={() => window.location.reload()}
+          >
+            {t('刷新页面')}
+          </Button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default withTranslation()(ErrorBoundary);

web/src/components/dashboard/ChartsPanel.jsx

@@ -29,6 +29,9 @@ const ChartsPanel = ({
   spec_model_line,
   spec_pie,
   spec_rank_bar,
+  spec_user_rank,
+  spec_user_trend,
+  isAdminUser,
   CARD_PROPS,
   CHART_CONFIG,
   FLEX_CENTER_GAP2,
@@ -51,9 +54,15 @@ const ChartsPanel = ({
             onChange={setActiveChartTab}
           >
             <TabPane tab={<span>{t('消耗分布')}</span>} itemKey='1' />
-            <TabPane tab={<span>{t('消耗趋势')}</span>} itemKey='2' />
+            <TabPane tab={<span>{t('调用趋势')}</span>} itemKey='2' />
             <TabPane tab={<span>{t('调用次数分布')}</span>} itemKey='3' />
             <TabPane tab={<span>{t('调用次数排行')}</span>} itemKey='4' />
+            {isAdminUser && (
+              <TabPane tab={<span>{t('用户消耗排行')}</span>} itemKey='5' />
+            )}
+            {isAdminUser && (
+              <TabPane tab={<span>{t('用户消耗趋势')}</span>} itemKey='6' />
+            )}
           </Tabs>
         </div>
       }
@@ -72,6 +81,12 @@ const ChartsPanel = ({
         {activeChartTab === '4' && (
           <VChart spec={spec_rank_bar} option={CHART_CONFIG} />
         )}
+        {activeChartTab === '5' && isAdminUser && (
+          <VChart spec={spec_user_rank} option={CHART_CONFIG} />
+        )}
+        {activeChartTab === '6' && isAdminUser && (
+          <VChart spec={spec_user_trend} option={CHART_CONFIG} />
+        )}
       </div>
     </Card>
   );

web/src/components/dashboard/index.jsx

@@ -86,12 +86,22 @@ const Dashboard = () => {
   );
 
   // ========== 数据处理 ==========
+  const loadUserData = async () => {
+    if (dashboardData.isAdminUser) {
+      const userData = await dashboardData.loadUserQuotaData();
+      if (userData && userData.length > 0) {
+        dashboardCharts.updateUserChartData(userData);
+      }
+    }
+  };
+
   const initChart = async () => {
     await dashboardData.loadQuotaData().then((data) => {
       if (data && data.length > 0) {
         dashboardCharts.updateChartData(data);
       }
     });
+    await loadUserData();
     await dashboardData.loadUptimeData();
   };
 
@@ -100,10 +110,12 @@ const Dashboard = () => {
     if (data && data.length > 0) {
       dashboardCharts.updateChartData(data);
     }
+    await loadUserData();
   };
 
   const handleSearchConfirm = async () => {
     await dashboardData.handleSearchConfirm(dashboardCharts.updateChartData);
+    await loadUserData();
   };
 
   // ========== 数据准备 ==========
@@ -182,6 +194,9 @@ const Dashboard = () => {
             spec_model_line={dashboardCharts.spec_model_line}
             spec_pie={dashboardCharts.spec_pie}
             spec_rank_bar={dashboardCharts.spec_rank_bar}
+            spec_user_rank={dashboardCharts.spec_user_rank}
+            spec_user_trend={dashboardCharts.spec_user_trend}
+            isAdminUser={dashboardData.isAdminUser}
             CARD_PROPS={CARD_PROPS}
             CHART_CONFIG={CHART_CONFIG}
             FLEX_CENTER_GAP2={FLEX_CENTER_GAP2}

web/src/components/layout/PageLayout.jsx

@@ -23,6 +23,7 @@ import SiderBar from './SiderBar';
 import App from '../../App';
 import FooterBar from './Footer';
 import { ToastContainer } from 'react-toastify';
+import ErrorBoundary from '../common/ErrorBoundary';
 import React, { useContext, useEffect, useState } from 'react';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
@@ -216,7 +217,9 @@ const PageLayout = () => {
               position: 'relative',
             }}
           >
-            <App />
+            <ErrorBoundary>
+              <App />
+            </ErrorBoundary>
           </Content>
           {!shouldHideFooter && (
             <Layout.Footer

web/src/components/settings/RatioSetting.jsx

@@ -21,9 +21,8 @@ import React, { useEffect, useState } from 'react';
 import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 
+import ModelPricingCombined from '../../pages/Setting/Ratio/ModelPricingCombined';
 import GroupRatioSettings from '../../pages/Setting/Ratio/GroupRatioSettings';
-import ModelRatioSettings from '../../pages/Setting/Ratio/ModelRatioSettings';
-import ModelSettingsVisualEditor from '../../pages/Setting/Ratio/ModelSettingsVisualEditor';
 import ModelRatioNotSetEditor from '../../pages/Setting/Ratio/ModelRationNotSetEditor';
 import UpstreamRatioSync from '../../pages/Setting/Ratio/UpstreamRatioSync';
 
@@ -95,18 +94,14 @@ const RatioSetting = () => {
 
   return (
     <Spin spinning={loading} size='large'>
-      {/* 模型倍率设置以及价格编辑器 */}
       <Card style={{ marginTop: '10px' }}>
-        <Tabs type='card' defaultActiveKey='visual'>
-          <Tabs.TabPane tab={t('模型倍率设置')} itemKey='model'>
-            <ModelRatioSettings options={inputs} refresh={onRefresh} />
+        <Tabs type='card' defaultActiveKey='pricing'>
+          <Tabs.TabPane tab={t('模型定价设置')} itemKey='pricing'>
+            <ModelPricingCombined options={inputs} refresh={onRefresh} />
           </Tabs.TabPane>
           <Tabs.TabPane tab={t('分组相关设置')} itemKey='group'>
             <GroupRatioSettings options={inputs} refresh={onRefresh} />
           </Tabs.TabPane>
-          <Tabs.TabPane tab={t('价格设置')} itemKey='visual'>
-            <ModelSettingsVisualEditor options={inputs} refresh={onRefresh} />
-          </Tabs.TabPane>
           <Tabs.TabPane tab={t('未设置价格模型')} itemKey='unset_models'>
             <ModelRatioNotSetEditor options={inputs} refresh={onRefresh} />
           </Tabs.TabPane>

web/src/components/table/tokens/TokensColumnDefs.jsx

@@ -88,7 +88,7 @@ const renderStatus = (text, record, t) => {
 };
 
 // Render group column
-const renderGroupColumn = (text, record, t) => {
+const renderGroupColumn = (text, record, t, groupRatios = {}) => {
   if (text === 'auto') {
     return (
       <Tooltip
@@ -104,7 +104,17 @@ const renderGroupColumn = (text, record, t) => {
       </Tooltip>
     );
   }
-  return renderGroup(text);
+  const ratio = groupRatios[text];
+  return (
+    <span className='flex items-center gap-1'>
+      {renderGroup(text)}
+      {ratio !== undefined && (
+        <Tag size='small' color='green' shape='circle'>
+          {ratio}x
+        </Tag>
+      )}
+    </span>
+  );
 };
 
 // Render token key column with show/hide and copy functionality
@@ -469,6 +479,7 @@ export const getTokensColumns = ({
   setEditingToken,
   setShowEdit,
   refresh,
+  groupRatios = {},
 }) => {
   return [
     {
@@ -490,7 +501,7 @@ export const getTokensColumns = ({
       title: t('分组'),
       dataIndex: 'group',
       key: 'group',
-      render: (text, record) => renderGroupColumn(text, record, t),
+      render: (text, record) => renderGroupColumn(text, record, t, groupRatios),
     },
     {
       title: t('密钥'),

web/src/components/table/tokens/TokensTable.jsx

@@ -49,6 +49,7 @@ const TokensTable = (tokensData) => {
     setEditingToken,
     setShowEdit,
     refresh,
+    groupRatios,
     t,
   } = tokensData;
 
@@ -67,6 +68,7 @@ const TokensTable = (tokensData) => {
       setEditingToken,
       setShowEdit,
       refresh,
+      groupRatios,
     });
   }, [
     t,
@@ -81,6 +83,7 @@ const TokensTable = (tokensData) => {
     setEditingToken,
     setShowEdit,
     refresh,
+    groupRatios,
   ]);
 
   // Handle compact mode by removing fixed positioning

web/src/components/table/tokens/modals/EditTokenModal.jsx

@@ -366,6 +366,14 @@ const EditTokenModal = (props) => {
                         placeholder={t('令牌分组，默认为用户的分组')}
                         optionList={groups}
                         renderOptionItem={renderGroupOption}
+                        filter={(input, option) => {
+                          const q = input.toLowerCase();
+                          return (
+                            option.value?.toLowerCase().includes(q) ||
+                            (typeof option.label === 'string' &&
+                              option.label.toLowerCase().includes(q))
+                          );
+                        }}
                         showClear
                         style={{ width: '100%' }}
                       />

web/src/helpers/dashboard.jsx

@@ -387,3 +387,58 @@ export const generateChartTimePoints = (
 
   return chartTimePoints;
 };
+
+// ========== 用户维度数据处理 ==========
+export const processUserData = (data, dataExportDefaultTime, limit = 10) => {
+  const userQuotaTotal = new Map();
+  data.forEach((item) => {
+    const prev = userQuotaTotal.get(item.username) || 0;
+    userQuotaTotal.set(item.username, prev + item.quota);
+  });
+
+  const sorted = Array.from(userQuotaTotal.entries()).sort(
+    (a, b) => b[1] - a[1],
+  );
+  const topUsers = sorted.slice(0, limit).map(([u]) => u);
+  const topUserSet = new Set(topUsers);
+
+  const rankingData = sorted.slice(0, limit).map(([username, quota]) => ({
+    User: username,
+    Quota: quota,
+  }));
+
+  const showYear = isDataCrossYear(data.map((item) => item.created_at));
+
+  const timeUserMap = new Map();
+  const allTimePoints = new Set();
+
+  data.forEach((item) => {
+    const timeKey = timestamp2string1(
+      item.created_at,
+      dataExportDefaultTime,
+      showYear,
+    );
+    allTimePoints.add(timeKey);
+    const user = topUserSet.has(item.username) ? item.username : null;
+    if (!user) return;
+    const key = `${timeKey}-${user}`;
+    const prev = timeUserMap.get(key) || { quota: 0 };
+    timeUserMap.set(key, { quota: prev.quota + item.quota });
+  });
+
+  const sortedTimePoints = Array.from(allTimePoints).sort();
+  const trendData = [];
+  sortedTimePoints.forEach((time) => {
+    topUsers.forEach((user) => {
+      const key = `${time}-${user}`;
+      const val = timeUserMap.get(key);
+      trendData.push({
+        Time: time,
+        User: user,
+        Quota: val?.quota || 0,
+      });
+    });
+  });
+
+  return { rankingData, trendData, topUsers };
+};

web/src/helpers/token.js

@@ -33,6 +33,20 @@ export async function fetchTokenKey(tokenId) {
   return data.key;
 }
 
+/**
+ * 批量获取多个令牌的真实 key
+ * @param {number[]} tokenIds
+ * @returns {Promise<Record<number, string>>} 返回 {id: key} map，key 不带 sk- 前缀
+ */
+export async function fetchTokenKeysBatch(tokenIds) {
+  const response = await API.post('/api/token/batch/keys', { ids: tokenIds });
+  const { success, data, message } = response.data || {};
+  if (!success || !data?.keys) {
+    throw new Error(message || 'Failed to fetch token keys');
+  }
+  return data.keys;
+}
+
 /**
  * 获取可用的 token keys
  * @returns {Promise<string[]>} 返回 active 状态的不带 sk- 前缀的真实 token key 数组

web/src/hooks/dashboard/useDashboardCharts.jsx

@@ -34,8 +34,14 @@ import {
   updateChartSpec,
   updateMapValue,
   initializeMaps,
+  processUserData,
 } from '../../helpers/dashboard';
 
+const USER_COLORS = [
+  '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+  '#ec4899', '#06b6d4', '#f97316', '#6366f1', '#14b8a6',
+];
+
 export const useDashboardCharts = (
   dataExportDefaultTime,
   setTrendData,
@@ -179,7 +185,6 @@ export const useDashboardCharts = (
     },
   });
 
-  // 模型消耗趋势折线图
   const [spec_model_line, setSpecModelLine] = useState({
     type: 'line',
     data: [
@@ -197,7 +202,7 @@ export const useDashboardCharts = (
     },
     title: {
       visible: true,
-      text: t('模型消耗趋势'),
+      text: t('调用趋势'),
       subtext: '',
     },
     tooltip: {
@@ -215,7 +220,6 @@ export const useDashboardCharts = (
     },
   });
 
-  // 模型调用次数排行柱状图
   const [spec_rank_bar, setSpecRankBar] = useState({
     type: 'bar',
     data: [
@@ -259,6 +263,76 @@ export const useDashboardCharts = (
     },
   });
 
+  // ========== Admin: 用户消耗排行 ==========
+  const [spec_user_rank, setSpecUserRank] = useState({
+    type: 'bar',
+    data: [{ id: 'userRankData', values: [] }],
+    xField: 'rawQuota',
+    yField: 'User',
+    seriesField: 'User',
+    direction: 'horizontal',
+    legends: { visible: false },
+    title: {
+      visible: true,
+      text: t('用户消耗排行'),
+      subtext: '',
+    },
+    bar: {
+      state: { hover: { stroke: '#000', lineWidth: 1 } },
+    },
+    label: {
+      visible: true,
+      position: 'outside',
+      formatMethod: (value, datum) => renderQuota(datum['rawQuota'] || 0, 2),
+    },
+    axes: [{
+      orient: 'left',
+      type: 'band',
+      label: { visible: true },
+    }, {
+      orient: 'bottom',
+      type: 'linear',
+      visible: false,
+    }],
+    tooltip: {
+      mark: {
+        content: [{
+          key: (datum) => datum['User'],
+          value: (datum) => renderQuota(datum['rawQuota'] || 0, 4),
+        }],
+      },
+    },
+    color: { type: 'ordinal', range: USER_COLORS },
+  });
+
+  // ========== Admin: 用户消耗趋势 ==========
+  const [spec_user_trend, setSpecUserTrend] = useState({
+    type: 'area',
+    data: [{ id: 'userTrendData', values: [] }],
+    xField: 'Time',
+    yField: 'rawQuota',
+    seriesField: 'User',
+    stack: false,
+    legends: { visible: true, selectMode: 'single' },
+    title: {
+      visible: true,
+      text: t('用户消耗趋势'),
+      subtext: '',
+    },
+    area: { style: { fillOpacity: 0.15 } },
+    line: { style: { lineWidth: 2 } },
+    point: { visible: false },
+    tooltip: {
+      mark: {
+        content: [{
+          key: (datum) => datum['User'],
+          value: (datum) => renderQuota(datum['rawQuota'] || 0, 4),
+        }],
+      },
+    },
+    color: { type: 'ordinal', range: USER_COLORS },
+  });
+
   // ========== 数据处理函数 ==========
   const generateModelColors = useCallback((uniqueModels, modelColors) => {
     const newModelColors = {};
@@ -426,6 +500,51 @@ export const useDashboardCharts = (
     ],
   );
 
+  // ========== 用户维度图表数据处理 ==========
+  const updateUserChartData = useCallback(
+    (data) => {
+      const { rankingData, trendData: userTrend } = processUserData(
+        data,
+        dataExportDefaultTime,
+        10,
+      );
+
+      const userRankValues = rankingData.map((item) => ({
+        User: item.User,
+        rawQuota: item.Quota,
+        Quota: getQuotaWithUnit(item.Quota, 4),
+      })).sort((a, b) => a.rawQuota - b.rawQuota);
+
+      const totalUserQuota = rankingData.reduce((s, i) => s + i.Quota, 0);
+
+      setSpecUserRank((prev) => ({
+        ...prev,
+        data: [{ id: 'userRankData', values: userRankValues }],
+        title: {
+          ...prev.title,
+          subtext: `${t('总计')}：${renderQuota(totalUserQuota, 2)}`,
+        },
+      }));
+
+      const userTrendValues = userTrend.map((item) => ({
+        Time: item.Time,
+        User: item.User,
+        rawQuota: item.Quota,
+        Usage: item.Quota ? getQuotaWithUnit(item.Quota, 4) : 0,
+      }));
+
+      setSpecUserTrend((prev) => ({
+        ...prev,
+        data: [{ id: 'userTrendData', values: userTrendValues }],
+        title: {
+          ...prev.title,
+          subtext: `${t('总计')}：${renderQuota(totalUserQuota, 2)}`,
+        },
+      }));
+    },
+    [dataExportDefaultTime, t],
+  );
+
   // ========== 初始化图表主题 ==========
   useEffect(() => {
     initVChartSemiTheme({
@@ -434,14 +553,14 @@ export const useDashboardCharts = (
   }, []);
 
   return {
-    // 图表规格
     spec_pie,
     spec_line,
     spec_model_line,
     spec_rank_bar,
-
-    // 函数
+    spec_user_rank,
+    spec_user_trend,
     updateChartData,
+    updateUserChartData,
     generateModelColors,
   };
 };

web/src/hooks/dashboard/useDashboardData.js

@@ -213,6 +213,27 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
     }
   }, [activeUptimeTab]);
 
+  const loadUserQuotaData = useCallback(async () => {
+    if (!isAdminUser) return [];
+    try {
+      const { start_timestamp, end_timestamp } = inputs;
+      const localStartTimestamp = Date.parse(start_timestamp) / 1000;
+      const localEndTimestamp = Date.parse(end_timestamp) / 1000;
+      const url = `/api/data/users?start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+      const res = await API.get(url);
+      const { success, message, data } = res.data;
+      if (success) {
+        return data || [];
+      } else {
+        showError(message);
+        return [];
+      }
+    } catch (err) {
+      console.error(err);
+      return [];
+    }
+  }, [inputs, isAdminUser]);
+
   const getUserData = useCallback(async () => {
     let res = await API.get(`/api/user/self`);
     const { success, message, data } = res.data;
@@ -311,6 +332,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
     showSearchModal,
     handleCloseModal,
     loadQuotaData,
+    loadUserQuotaData,
     loadUptimeData,
     getUserData,
     refresh,

web/src/hooks/tokens/useTokensData.jsx

@@ -31,6 +31,7 @@ import { ITEMS_PER_PAGE } from '../../constants';
 import { useTableCompactMode } from '../common/useTableCompactMode';
 import {
   fetchTokenKey as fetchTokenKeyById,
+  fetchTokenKeysBatch,
   getServerAddress,
   encodeChannelConnectionString,
 } from '../../helpers/token';
@@ -41,6 +42,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
   // Basic state
   const [tokens, setTokens] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [groupRatios, setGroupRatios] = useState({});
   const [activePage, setActivePage] = useState(1);
   const [tokenCount, setTokenCount] = useState(0);
   const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
@@ -408,14 +410,17 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
       return;
     }
     try {
-      const keys = await Promise.all(
-        selectedKeys.map((token) => fetchTokenKey(token, { suppressError: true })),
-      );
+      const ids = selectedKeys.map((token) => token.id);
+      const keysMap = await fetchTokenKeysBatch(ids);
+
+      setResolvedTokenKeys((prev) => ({ ...prev, ...keysMap }));
+
       let content = '';
-      for (let i = 0; i < selectedKeys.length; i++) {
-        const fullKey = keys[i];
+      for (const token of selectedKeys) {
+        const fullKey = keysMap[token.id];
+        if (!fullKey) continue;
         if (copyType === 'name+key') {
-          content += `${selectedKeys[i].name}    sk-${fullKey}\n`;
+          content += `${token.name}    sk-${fullKey}\n`;
         } else {
           content += `sk-${fullKey}\n`;
         }
@@ -433,6 +438,17 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
       .catch((reason) => {
         showError(reason);
       });
+    API.get('/api/user/self/groups')
+      .then((res) => {
+        if (res.data.success && res.data.data) {
+          const ratios = {};
+          for (const [name, info] of Object.entries(res.data.data)) {
+            ratios[name] = info.ratio;
+          }
+          setGroupRatios(ratios);
+        }
+      })
+      .catch(() => {});
   }, [pageSize]);
 
   return {
@@ -443,6 +459,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     tokenCount,
     pageSize,
     searching,
+    groupRatios,
 
     // Selection state
     selectedKeys,

web/src/i18n/locales/zh-CN.json

@@ -2314,6 +2314,10 @@
     "调用次数": "调用次数",
     "调用次数分布": "调用次数分布",
     "调用次数排行": "调用次数排行",
+    "调用趋势": "调用趋势",
+    "模型排行": "模型排行",
+    "用户消耗排行": "用户消耗排行",
+    "用户消耗趋势": "用户消耗趋势",
     "调试信息": "调试信息",
     "谨慎": "谨慎",
     "警告": "警告",
@@ -2980,6 +2984,8 @@
     "从剪贴板粘贴配置": "从剪贴板粘贴配置",
     "剪贴板中未检测到连接信息": "剪贴板中未检测到连接信息",
     "连接信息已填入": "连接信息已填入",
-    "无法读取剪贴板": "无法读取剪贴板"
+    "无法读取剪贴板": "无法读取剪贴板",
+    "页面渲染出错，请刷新页面重试": "页面渲染出错，请刷新页面重试",
+    "刷新页面": "刷新页面"
   }
 }

web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx

@@ -103,6 +103,7 @@ const RULES_JSON_PLACEHOLDER = `[
     },
     "skip_retry_on_failure": false,
     "include_using_group": true,
+    "include_model_name": false,
     "include_rule_name": true
   }
 ]`;
@@ -191,6 +192,36 @@ const parseOptionalObjectJson = (jsonString, label) => {
   }
 };
 
+const buildChannelAffinityRulePayload = ({
+  values,
+  isEdit,
+  editingRuleId,
+  rulesLength,
+  modelRegex,
+  pathRegex,
+  keySources,
+  userAgentInclude,
+  paramOverrideTemplate,
+}) => ({
+  id: isEdit ? editingRuleId : rulesLength,
+  name: (values?.name || '').trim(),
+  model_regex: modelRegex,
+  path_regex: pathRegex,
+  key_sources: keySources,
+  value_regex: (values?.value_regex || '').trim(),
+  ttl_seconds: Number(values?.ttl_seconds || 0),
+  include_using_group: !!values?.include_using_group,
+  include_model_name: !!values?.include_model_name,
+  include_rule_name: !!values?.include_rule_name,
+  skip_retry_on_failure: !!values?.skip_retry_on_failure,
+  ...(userAgentInclude.length > 0
+    ? { user_agent_include: userAgentInclude }
+    : {}),
+  ...(paramOverrideTemplate
+    ? { param_override_template: paramOverrideTemplate }
+    : {}),
+});
+
 export default function SettingsChannelAffinity(props) {
   const { t } = useTranslation();
   const { Text } = Typography;
@@ -246,6 +277,7 @@ export default function SettingsChannelAffinity(props) {
       ttl_seconds: Number(r.ttl_seconds || 0),
       skip_retry_on_failure: !!r.skip_retry_on_failure,
       include_using_group: r.include_using_group ?? true,
+      include_model_name: !!r.include_model_name,
       include_rule_name: r.include_rule_name ?? true,
       param_override_template_json: r.param_override_template
         ? stringifyPretty(r.param_override_template)
@@ -454,14 +486,12 @@ export default function SettingsChannelAffinity(props) {
       const templates = [
         CHANNEL_AFFINITY_RULE_TEMPLATES.codexCli,
         CHANNEL_AFFINITY_RULE_TEMPLATES.claudeCli,
-      ].map(
-        (tpl) => {
-          const baseTemplate = cloneChannelAffinityTemplate(tpl);
-          const name = makeUniqueName(existingNames, tpl.name);
-          existingNames.add(name);
-          return { ...baseTemplate, name };
-        },
-      );
+      ].map((tpl) => {
+        const baseTemplate = cloneChannelAffinityTemplate(tpl);
+        const name = makeUniqueName(existingNames, tpl.name);
+        existingNames.add(name);
+        return { ...baseTemplate, name };
+      });
 
       const next = [...(rules || []), ...templates].map((r, idx) => ({
         ...(r || {}),
@@ -581,8 +611,9 @@ export default function SettingsChannelAffinity(props) {
       title: t('作用域'),
       render: (_, record) => {
         const tags = [];
-        if (record?.include_using_group) tags.push('分组');
-        if (record?.include_rule_name) tags.push('规则');
+        if (record?.include_using_group) tags.push(t('分组'));
+        if (record?.include_model_name) tags.push(t('模型'));
+        if (record?.include_rule_name) tags.push(t('规则'));
         if (tags.length === 0) return '-';
         return tags.map((x) => (
           <Tag key={x} style={{ marginRight: 4 }}>
@@ -650,6 +681,7 @@ export default function SettingsChannelAffinity(props) {
       ttl_seconds: 0,
       skip_retry_on_failure: false,
       include_using_group: true,
+      include_model_name: false,
       include_rule_name: true,
     };
     setEditingRule(nextRule);
@@ -712,26 +744,17 @@ export default function SettingsChannelAffinity(props) {
         return showError(t(paramTemplateValidation.message));
       }
 
-      const rulePayload = {
-        id: isEdit ? editingRule.id : rules.length,
-        name: (values.name || '').trim(),
-        model_regex: modelRegex,
-        path_regex: normalizeStringList(values.path_regex_text),
-        key_sources: keySourcesValidation.value,
-        value_regex: (values.value_regex || '').trim(),
-        ttl_seconds: Number(values.ttl_seconds || 0),
-        include_using_group: !!values.include_using_group,
-        include_rule_name: !!values.include_rule_name,
-        ...(values.skip_retry_on_failure
-          ? { skip_retry_on_failure: true }
-          : {}),
-        ...(userAgentInclude.length > 0
-          ? { user_agent_include: userAgentInclude }
-          : {}),
-        ...(paramTemplateValidation.value
-          ? { param_override_template: paramTemplateValidation.value }
-          : {}),
-      };
+      const rulePayload = buildChannelAffinityRulePayload({
+        values,
+        isEdit,
+        editingRuleId: editingRule?.id,
+        rulesLength: rules.length,
+        modelRegex,
+        pathRegex: normalizeStringList(values.path_regex_text),
+        keySources: keySourcesValidation.value,
+        userAgentInclude,
+        paramOverrideTemplate: paramTemplateValidation.value,
+      });
 
       if (!rulePayload.name) return showError(t('名称不能为空'));
 
@@ -1251,7 +1274,7 @@ export default function SettingsChannelAffinity(props) {
               </Row>
 
               <Row gutter={16}>
-                <Col xs={24} sm={12}>
+                <Col xs={24} sm={8}>
                   <Form.Switch
                     field='include_using_group'
                     label={t('作用域：包含分组')}
@@ -1262,7 +1285,16 @@ export default function SettingsChannelAffinity(props) {
                     )}
                   </Text>
                 </Col>
-                <Col xs={24} sm={12}>
+                <Col xs={24} sm={8}>
+                  <Form.Switch
+                    field='include_model_name'
+                    label={t('作用域：包含模型名称')}
+                  />
+                  <Text type='tertiary' size='small'>
+                    {t('开启后，模型名称会参与 cache key（不同模型隔离）。')}
+                  </Text>
+                </Col>
+                <Col xs={24} sm={8}>
                   <Form.Switch
                     field='include_rule_name'
                     label={t('作用域：包含规则名称')}

web/src/pages/Setting/Ratio/GroupRatioSettings.jsx

@@ -17,8 +17,23 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import {
+  Button,
+  Col,
+  Collapsible,
+  Form,
+  Radio,
+  RadioGroup,
+  Row,
+  SideSheet,
+  Spin,
+  Switch,
+  Tabs,
+  Typography,
+} from '@douyinfe/semi-ui';
+import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { IconHelpCircle } from '@douyinfe/semi-icons';
 import {
   compareObjects,
   API,
@@ -28,10 +43,37 @@ import {
   verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import GroupTable from './components/GroupTable';
+import AutoGroupList from './components/AutoGroupList';
+import GroupGroupRatioRules from './components/GroupGroupRatioRules';
+import GroupSpecialUsableRules from './components/GroupSpecialUsableRules';
+
+const { Text, Title, Paragraph } = Typography;
+
+const OPTION_KEYS = [
+  'GroupRatio',
+  'UserUsableGroups',
+  'GroupGroupRatio',
+  'group_ratio_setting.group_special_usable_group',
+  'AutoGroups',
+  'DefaultUseAutoGroup',
+];
+
+function parseJSONSafe(str, fallback) {
+  if (!str || !str.trim()) return fallback;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return fallback;
+  }
+}
 
 export default function GroupRatioSettings(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [editMode, setEditMode] = useState('visual');
+  const [showGuide, setShowGuide] = useState(false);
+
   const [inputs, setInputs] = useState({
     GroupRatio: '',
     UserUsableGroups: '',
@@ -42,80 +84,189 @@ export default function GroupRatioSettings(props) {
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
+  const dataVersionRef = useRef(0);
+
+  const groupNames = useMemo(() => {
+    const ratioMap = parseJSONSafe(inputs.GroupRatio, {});
+    return Object.keys(ratioMap);
+  }, [inputs.GroupRatio]);
 
   async function onSubmit() {
+    if (editMode === 'manual') {
+      try {
+        await refForm.current.validate();
+      } catch {
+        showError(t('请检查输入'));
+        return;
+      }
+    }
+
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) {
+      return showWarning(t('你似乎并没有修改什么'));
+    }
+
+    const requestQueue = updateArray.map((item) => {
+      const value =
+        typeof inputs[item.key] === 'boolean'
+          ? String(inputs[item.key])
+          : inputs[item.key];
+      return API.put('/api/option/', { key: item.key, value });
+    });
+
+    setLoading(true);
     try {
-      await refForm.current
-        .validate()
-        .then(() => {
-          const updateArray = compareObjects(inputs, inputsRow);
-          if (!updateArray.length)
-            return showWarning(t('你似乎并没有修改什么'));
-
-          const requestQueue = updateArray.map((item) => {
-            const value =
-              typeof inputs[item.key] === 'boolean'
-                ? String(inputs[item.key])
-                : inputs[item.key];
-            return API.put('/api/option/', { key: item.key, value });
-          });
-
-          setLoading(true);
-          Promise.all(requestQueue)
-            .then((res) => {
-              if (res.includes(undefined)) {
-                return showError(
-                  requestQueue.length > 1
-                    ? t('部分保存失败，请重试')
-                    : t('保存失败'),
-                );
-              }
-
-              for (let i = 0; i < res.length; i++) {
-                if (!res[i].data.success) {
-                  return showError(res[i].data.message);
-                }
-              }
-
-              showSuccess(t('保存成功'));
-              props.refresh();
-            })
-            .catch((error) => {
-              console.error('Unexpected error:', error);
-              showError(t('保存失败，请重试'));
-            })
-            .finally(() => {
-              setLoading(false);
-            });
-        })
-        .catch(() => {
-          showError(t('请检查输入'));
-        });
+      const res = await Promise.all(requestQueue);
+      if (res.includes(undefined)) {
+        return showError(
+          requestQueue.length > 1
+            ? t('部分保存失败，请重试')
+            : t('保存失败'),
+        );
+      }
+      for (let i = 0; i < res.length; i++) {
+        if (!res[i].data.success) {
+          return showError(res[i].data.message);
+        }
+      }
+      showSuccess(t('保存成功'));
+      props.refresh();
     } catch (error) {
-      showError(t('请检查输入'));
-      console.error(error);
+      console.error('Unexpected error:', error);
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
     }
   }
 
   useEffect(() => {
     const currentInputs = {};
     for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
+      if (OPTION_KEYS.includes(key)) {
         currentInputs[key] = props.options[key];
       }
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    dataVersionRef.current += 1;
+    if (refForm.current) {
+      refForm.current.setValues(currentInputs);
+    }
   }, [props.options]);
 
-  return (
-    <Spin spinning={loading}>
-      <Form
-        values={inputs}
-        getFormApi={(formAPI) => (refForm.current = formAPI)}
-        style={{ marginBottom: 15 }}
-      >
+  const handleGroupTableChange = useCallback(
+    ({ GroupRatio, UserUsableGroups }) => {
+      setInputs((prev) => ({ ...prev, GroupRatio, UserUsableGroups }));
+    },
+    [],
+  );
+
+  const handleAutoGroupsChange = useCallback((value) => {
+    setInputs((prev) => ({ ...prev, AutoGroups: value }));
+  }, []);
+
+  const handleGroupGroupRatioChange = useCallback((value) => {
+    setInputs((prev) => ({ ...prev, GroupGroupRatio: value }));
+  }, []);
+
+  const handleSpecialUsableChange = useCallback((value) => {
+    setInputs((prev) => ({
+      ...prev,
+      'group_ratio_setting.group_special_usable_group': value,
+    }));
+  }, []);
+
+  const dv = dataVersionRef.current;
+
+  const renderVisualMode = () => (
+    <Form key='form-visual' values={inputs} style={{ marginBottom: 15 }}>
+      <Form.Section text={t('分组管理')}>
+        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
+          {t('倍率用于计费乘数，勾选「用户可选」后用户可在创建令牌时选择该分组')}
+        </Text>
+        <GroupTable
+          key={`gt_${dv}`}
+          groupRatio={inputs.GroupRatio}
+          userUsableGroups={inputs.UserUsableGroups}
+          onChange={handleGroupTableChange}
+        />
+      </Form.Section>
+
+      <Form.Section text={t('自动分组')}>
+        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
+          {t('令牌分组设为 auto 时，按以下顺序依次尝试选择可用分组，排在前面的优先级更高')}
+        </Text>
+        <Row gutter={16}>
+          <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+            <Form.Slot label={t('默认使用auto分组')}>
+              <div className='flex items-center gap-2'>
+                <Switch
+                  checked={!!inputs.DefaultUseAutoGroup}
+                  size='default'
+                  checkedText='｜'
+                  uncheckedText='〇'
+                  onChange={(value) =>
+                    setInputs((prev) => ({
+                      ...prev,
+                      DefaultUseAutoGroup: value,
+                    }))
+                  }
+                />
+              </div>
+              <Text type='tertiary' size='small' style={{ marginTop: 4 }}>
+                {t('开启后创建令牌默认选择auto分组，初始令牌也将设为auto')}
+              </Text>
+            </Form.Slot>
+          </Col>
+        </Row>
+        <AutoGroupList
+          key={`ag_${dv}`}
+          value={inputs.AutoGroups}
+          groupNames={groupNames}
+          onChange={handleAutoGroupsChange}
+        />
+      </Form.Section>
+
+      <Form.Section text={t('分组特殊倍率')}>
+        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
+          {t('当某个分组的用户使用另一个分组的令牌时，可设置特殊倍率覆盖基础倍率。例如：vip 分组的用户使用 default 分组时倍率为 0.5')}
+        </Text>
+        <GroupGroupRatioRules
+          key={`ggr_${dv}`}
+          value={inputs.GroupGroupRatio}
+          groupNames={groupNames}
+          onChange={handleGroupGroupRatioChange}
+        />
+      </Form.Section>
+
+      <Form.Section text={t('分组特殊可用分组')}>
+        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
+          {t('为特定用户分组配置可用分组的增减规则。「添加」为该分组新增可用分组，「移除」移除默认可用分组，「追加」直接追加分组')}
+        </Text>
+        <GroupSpecialUsableRules
+          key={`gsu_${dv}`}
+          value={inputs['group_ratio_setting.group_special_usable_group']}
+          groupNames={groupNames}
+          onChange={handleSpecialUsableChange}
+        />
+      </Form.Section>
+    </Form>
+  );
+
+  useEffect(() => {
+    if (editMode === 'manual' && refForm.current) {
+      refForm.current.setValues(inputs);
+    }
+  }, [editMode]);
+
+  const renderManualMode = () => (
+    <Form
+      key='form-manual'
+      initValues={inputs}
+      getFormApi={(formAPI) => (refForm.current = formAPI)}
+      style={{ marginBottom: 15 }}
+    >
+      <Form.Section text={t('分组JSON设置')}>
         <Row gutter={16}>
           <Col xs={24} sm={16}>
             <Form.TextArea
@@ -134,7 +285,9 @@ export default function GroupRatioSettings(props) {
                   message: t('不是合法的 JSON 字符串'),
                 },
               ]}
-              onChange={(value) => setInputs({ ...inputs, GroupRatio: value })}
+              onChange={(value) =>
+                setInputs((prev) => ({ ...prev, GroupRatio: value }))
+              }
             />
           </Col>
         </Row>
@@ -142,7 +295,9 @@ export default function GroupRatioSettings(props) {
           <Col xs={24} sm={16}>
             <Form.TextArea
               label={t('用户可选分组')}
-              placeholder={t('为一个 JSON 文本，键为分组名称，值为分组描述')}
+              placeholder={t(
+                '为一个 JSON 文本，键为分组名称，值为分组描述',
+              )}
               extraText={t(
                 '用户新建令牌时可选的分组，格式为 JSON 字符串，例如：{"vip": "VIP 用户", "test": "测试"}，表示用户可以选择 vip 分组和 test 分组',
               )}
@@ -157,7 +312,7 @@ export default function GroupRatioSettings(props) {
                 },
               ]}
               onChange={(value) =>
-                setInputs({ ...inputs, UserUsableGroups: value })
+                setInputs((prev) => ({ ...prev, UserUsableGroups: value }))
               }
             />
           </Col>
@@ -181,7 +336,7 @@ export default function GroupRatioSettings(props) {
                 },
               ]}
               onChange={(value) =>
-                setInputs({ ...inputs, GroupGroupRatio: value })
+                setInputs((prev) => ({ ...prev, GroupGroupRatio: value }))
               }
             />
           </Col>
@@ -205,10 +360,10 @@ export default function GroupRatioSettings(props) {
                 },
               ]}
               onChange={(value) =>
-                setInputs({
-                  ...inputs,
+                setInputs((prev) => ({
+                  ...prev,
                   'group_ratio_setting.group_special_usable_group': value,
-                })
+                }))
               }
             />
           </Col>
@@ -225,29 +380,23 @@ export default function GroupRatioSettings(props) {
               rules={[
                 {
                   validator: (rule, value) => {
-                    if (!value || value.trim() === '') {
-                      return true; // Allow empty values
-                    }
-
-                    // First check if it's valid JSON
+                    if (!value || value.trim() === '') return true;
                     try {
                       const parsed = JSON.parse(value);
-
-                      // Check if it's an array
-                      if (!Array.isArray(parsed)) {
-                        return false;
-                      }
-
-                      // Check if every element is a string
+                      if (!Array.isArray(parsed)) return false;
                       return parsed.every((item) => typeof item === 'string');
-                    } catch (error) {
+                    } catch {
                       return false;
                     }
                   },
-                  message: t('必须是有效的 JSON 字符串数组，例如：["g1","g2"]'),
+                  message: t(
+                    '必须是有效的 JSON 字符串数组，例如：["g1","g2"]',
+                  ),
                 },
               ]}
-              onChange={(value) => setInputs({ ...inputs, AutoGroups: value })}
+              onChange={(value) =>
+                setInputs((prev) => ({ ...prev, AutoGroups: value }))
+              }
             />
           </Col>
         </Row>
@@ -259,13 +408,351 @@ export default function GroupRatioSettings(props) {
               )}
               field={'DefaultUseAutoGroup'}
               onChange={(value) =>
-                setInputs({ ...inputs, DefaultUseAutoGroup: value })
+                setInputs((prev) => ({
+                  ...prev,
+                  DefaultUseAutoGroup: value,
+                }))
               }
             />
           </Col>
         </Row>
-      </Form>
-      <Button onClick={onSubmit}>{t('保存分组相关设置')}</Button>
+      </Form.Section>
+    </Form>
+  );
+
+  const GuideSection = ({ title, children }) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div style={{ marginTop: 16 }}>
+        <Button
+          theme='borderless'
+          size='small'
+          icon={open ? <IconChevronUp /> : <IconChevronDown />}
+          onClick={() => setOpen(!open)}
+          style={{ padding: '4px 0', color: 'var(--semi-color-primary)' }}
+        >
+          {title}
+        </Button>
+        <Collapsible isOpen={open} keepDOM>
+          <div
+            style={{
+              background: 'var(--semi-color-fill-0)',
+              padding: '12px 16px',
+              borderRadius: 8,
+              marginTop: 8,
+            }}
+          >
+            {children}
+          </div>
+        </Collapsible>
+      </div>
+    );
+  };
+
+  const CodeBlock = ({ children }) => (
+    <pre
+      style={{
+        background: 'var(--semi-color-bg-2)',
+        border: '1px solid var(--semi-color-border)',
+        padding: '10px 14px',
+        borderRadius: 6,
+        fontFamily: 'monospace',
+        fontSize: 13,
+        margin: '8px 0',
+        whiteSpace: 'pre-wrap',
+        lineHeight: 1.6,
+        overflowX: 'auto',
+      }}
+    >
+      {children}
+    </pre>
+  );
+
+  const renderGuide = () => (
+    <SideSheet
+      title={t('分组设置使用说明')}
+      visible={showGuide}
+      onCancel={() => setShowGuide(false)}
+      width={560}
+      bodyStyle={{ overflow: 'auto', padding: '0 24px 24px' }}
+    >
+      <Tabs type='line' size='small'>
+        <Tabs.TabPane tab={t('概览')} itemKey='overview'>
+          <div style={{ paddingTop: 20 }}>
+            <Title heading={5}>{t('什么是分组？')}</Title>
+            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
+              {t(
+                '分组是用于控制计费倍率和模型访问权限的核心概念。每个用户属于一个分组，每个令牌也可以指定使用某个分组。',
+              )}
+            </Paragraph>
+            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
+              {t(
+                '通过分组可以实现不同用户等级的差异化定价，例如 VIP 用户享受更低的 API 调用费用。',
+              )}
+            </Paragraph>
+
+            <GuideSection title={t('核心概念')}>
+              <Paragraph style={{ lineHeight: 1.8 }}>
+                <Text strong>{t('用户分组')}</Text>{' — '}
+                {t('由管理员分配，决定用户身份等级（如 default、vip）。')}
+              </Paragraph>
+              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
+                <Text strong>{t('令牌分组')}</Text>{' — '}
+                {t('用户创建令牌时选择的分组，决定该令牌的实际计费倍率。一个用户可以创建多个令牌，使用不同分组。')}
+              </Paragraph>
+              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
+                <Text strong>{t('倍率')}</Text>{' — '}
+                {t('计费乘数，倍率越低费用越低。例如倍率 0.5 表示半价。')}
+              </Paragraph>
+              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
+                <Text strong>{t('用户可选')}</Text>{' — '}
+                {t('勾选后，该分组会出现在用户创建令牌时的下拉菜单中。未勾选的分组只能由管理员分配，用户自己无法选择。')}
+              </Paragraph>
+              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
+                <Text strong>{t('自动分组')}</Text>{' — '}
+                {t('令牌分组设为 auto 时，系统按优先级顺序自动选择一个可用分组。')}
+              </Paragraph>
+            </GuideSection>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane tab={t('分组管理')} itemKey='groups'>
+          <div style={{ paddingTop: 20 }}>
+            <Title heading={5}>{t('创建和管理分组')}</Title>
+            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
+              {t('每个分组代表一个价格档位。管理员创建分组后，可以选择哪些档位对用户开放自选。')}
+            </Paragraph>
+
+            <GuideSection title={t('查看示例')}>
+              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
+                {t('场景：站点提供两个价格档位，用户可以按需选择')}
+              </Paragraph>
+              <CodeBlock>
+                {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
+                {t('两个分组都勾选了「用户可选」，所以用户创建令牌时可以看到这两个选项：')}
+              </Paragraph>
+              <CodeBlock>
+                {t('用户创建令牌 → 选择分组下拉框：')}{'\n'}
+                {`  ├─ standard (${t('标准价格')})`}{'\n'}
+                {`  └─ premium  (${t('高级套餐，半价优惠')})`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
+                {t('选择 premium 创建的令牌，调用 API 时费用为 standard 的 50%。')}
+              </Paragraph>
+              <Paragraph size='small' style={{ marginTop: 16, lineHeight: 1.8 }}>
+                <Text strong>{t('对比：不勾选「用户可选」的场景')}</Text>
+              </Paragraph>
+              <Paragraph size='small' style={{ marginTop: 4, lineHeight: 1.8 }}>
+                {t('假设再加两个分组 default 和 vip，但不勾选用户可选：')}
+              </Paragraph>
+              <CodeBlock>
+                {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\ndefault   1.0     ${t('否')}        ${t('管理员分配的基础分组')}\nvip       0.5     ${t('否')}        ${t('管理员分配的优惠分组')}\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 8, lineHeight: 1.8 }}>
+                {t('此时用户创建令牌时只能看到 standard 和 premium：')}
+              </Paragraph>
+              <CodeBlock>
+                {t('用户创建令牌 → 选择分组下拉框：')}{'\n'}
+                {`  ├─ standard (${t('标准价格')})`}{'\n'}
+                {`  └─ premium  (${t('高级套餐，半价优惠')})`}{'\n\n'}
+                {`  ${t('不会出现')} default ${t('和')} vip`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 8, lineHeight: 1.8 }}>
+                {t('default 和 vip 只能由管理员在「用户管理」中分配给用户。适用于按用户等级定价、内部测试等不希望用户自主选择的场景。')}
+              </Paragraph>
+              <Paragraph size='small' style={{ marginTop: 12, lineHeight: 1.8 }}>
+                <Text strong>{t('用户分组的联动作用')}</Text>
+              </Paragraph>
+              <Paragraph size='small' style={{ lineHeight: 1.8 }}>
+                {t('管理员给用户分配的分组（如 vip）不仅决定用户身份，还会影响后续两个功能：')}
+              </Paragraph>
+              <Paragraph size='small' style={{ lineHeight: 1.8, marginTop: 4 }}>
+                {'1. '}<Text strong>{t('特殊倍率')}</Text>{' — '}
+                {t('可以根据用户分组设置不同的计费倍率。例如 vip 用户使用 standard 令牌时倍率从 1.0 降为 0.8。')}
+              </Paragraph>
+              <Paragraph size='small' style={{ lineHeight: 1.8, marginTop: 2 }}>
+                {'2. '}<Text strong>{t('可用分组')}</Text>{' — '}
+                {t('可以根据用户分组增减令牌可选的分组范围。例如 vip 用户额外开放 premium 分组，或移除某个分组的选择权。')}
+              </Paragraph>
+              <Paragraph size='small' type='tertiary' style={{ lineHeight: 1.8, marginTop: 6 }}>
+                {t('详见「特殊倍率」和「可用分组」标签页。')}
+              </Paragraph>
+            </GuideSection>
+
+            <GuideSection title={t('JSON 格式参考')}>
+              <Paragraph size='small' style={{ marginBottom: 4 }}>
+                <Text strong code>GroupRatio</Text>{' — '}{t('分组名称到倍率的映射')}
+              </Paragraph>
+              <CodeBlock>{`{"default": 1, "vip": 0.5, "standard": 1, "premium": 0.5}`}</CodeBlock>
+              <Paragraph size='small' style={{ marginBottom: 4, marginTop: 8 }}>
+                <Text strong code>UserUsableGroups</Text>{' — '}{t('用户可选分组的名称和描述（只包含勾选了用户可选的分组）')}
+              </Paragraph>
+              <CodeBlock>{`{"standard": "${t('标准价格')}", "premium": "${t('高级套餐，半价优惠')}"}`}</CodeBlock>
+            </GuideSection>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane tab={t('自动分组')} itemKey='auto'>
+          <div style={{ paddingTop: 20 }}>
+            <Title heading={5}>{t('自动分组选择')}</Title>
+            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
+              {t('当令牌分组设为 auto 时，系统按列表顺序依次选择可用分组。排在前面的优先级更高。')}
+            </Paragraph>
+
+            <GuideSection title={t('查看示例')}>
+              <Paragraph size='small' type='tertiary' style={{ marginBottom: 6 }}>
+                {t('场景：设置自动选择优先级')}
+              </Paragraph>
+              <CodeBlock>
+                {`1. default    ${t('最高优先级')}\n2. vip`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 6, lineHeight: 1.6 }}>
+                {t('开启「默认使用 auto 分组」后，新建令牌和初始令牌都会自动设为 auto。')}
+              </Paragraph>
+            </GuideSection>
+
+            <GuideSection title={t('JSON 格式参考')}>
+              <Paragraph size='small' style={{ marginBottom: 4 }}>
+                <Text strong code>AutoGroups</Text>{' — '}{t('有序字符串数组')}
+              </Paragraph>
+              <CodeBlock>{`["default", "vip"]`}</CodeBlock>
+            </GuideSection>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane tab={t('特殊倍率')} itemKey='ratios'>
+          <div style={{ paddingTop: 20 }}>
+            <Title heading={5}>{t('跨分组特殊倍率')}</Title>
+            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
+              {t('正常情况下，令牌的计费倍率由令牌所选的分组决定。特殊倍率可以根据「用户所在分组」进一步覆盖这个倍率。')}
+            </Paragraph>
+            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
+              {t('简单来说：同一个令牌分组，不同等级的用户可以享受不同的价格。')}
+            </Paragraph>
+
+            <GuideSection title={t('查看示例')}>
+              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
+                {t('场景：站点有 standard（倍率 1.0）和 premium（倍率 0.5）两个分组，希望 vip 用户使用 standard 令牌时也能享受折扣')}
+              </Paragraph>
+              <Paragraph size='small' style={{ marginBottom: 8, lineHeight: 1.8 }}>
+                <Text strong>{t('不配置特殊倍率时：')}</Text>
+              </Paragraph>
+              <CodeBlock>
+                {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价，和普通用户一样')})`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, marginBottom: 8, lineHeight: 1.8 }}>
+                <Text strong>{t('配置特殊倍率后：')}</Text>
+              </Paragraph>
+              <CodeBlock>
+                {`${t('用户分组')}    ${t('使用分组')}    ${t('倍率')}\n────────────────────────────\nvip       standard   0.8\nvip       premium    0.3`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
+                {t('配置后的效果：')}
+              </Paragraph>
+              <CodeBlock>
+                {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('不变')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 0.8  (${t('享受 8 折')})\nvip ${t('用户')}  + premium  ${t('令牌')} → ${t('倍率')} 0.3  (${t('从 0.5 降到 0.3')})`}
+              </CodeBlock>
+              <Paragraph size='small' type='tertiary' style={{ marginTop: 10, lineHeight: 1.8 }}>
+                {t('只有配置了规则的组合才会覆盖，未配置的组合仍使用令牌分组的基础倍率。')}
+              </Paragraph>
+            </GuideSection>
+
+            <GuideSection title={t('JSON 格式参考')}>
+              <Paragraph size='small' style={{ marginBottom: 4 }}>
+                <Text strong code>GroupGroupRatio</Text>{' — '}{t('嵌套映射：用户分组 → 使用分组 → 倍率')}
+              </Paragraph>
+              <CodeBlock>{`{\n  "vip": {\n    "standard": 0.8,\n    "premium": 0.3\n  }\n}`}</CodeBlock>
+            </GuideSection>
+          </div>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane tab={t('可用分组')} itemKey='usable'>
+          <div style={{ paddingTop: 20 }}>
+            <Title heading={5}>{t('特殊可用分组规则')}</Title>
+            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
+              {t('默认情况下，所有用户创建令牌时看到的可选分组列表是一样的（即「用户可选」列勾选的分组）。')}
+            </Paragraph>
+            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
+              {t('通过此功能，可以根据用户所在分组，为不同等级的用户展示不同的可选列表。')}
+            </Paragraph>
+
+            <GuideSection title={t('查看示例')}>
+              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
+                {t('场景：站点有 standard 和 premium 两个用户可选分组。希望 vip 用户额外看到 exclusive 分组，同时不再看到 standard 分组')}
+              </Paragraph>
+              <Paragraph size='small' style={{ marginBottom: 8, lineHeight: 1.8 }}>
+                <Text strong>{t('不配置规则时，所有用户看到的下拉框一样：')}</Text>
+              </Paragraph>
+              <CodeBlock>
+                {`${t('所有用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, marginBottom: 8, lineHeight: 1.8 }}>
+                <Text strong>{t('为 vip 用户配置规则：')}</Text>
+              </Paragraph>
+              <CodeBlock>
+                {`${t('用户分组')}    ${t('操作')}        ${t('目标分组')}    ${t('描述')}\n──────────────────────────────────────────\nvip       ${t('添加')} (+:)   exclusive   ${t('专属分组')}\nvip       ${t('移除')} (-:)   standard    -`}
+              </CodeBlock>
+              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
+                {t('配置后的效果：')}
+              </Paragraph>
+              <CodeBlock>
+                {`${t('普通用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium\n\nvip ${t('用户')} → ${t('创建令牌可选')}:\n  ├─ premium     (${t('保留')})\n  └─ exclusive   (${t('新增')})\n\n  ${t('standard 已被移除，vip 用户看不到')}`}
+              </CodeBlock>
+
+              <Paragraph size='small' style={{ marginTop: 14, lineHeight: 1.8 }}>
+                <Text strong>{t('三种操作的区别：')}</Text>
+              </Paragraph>
+              <CodeBlock>
+                {`${t('添加')} (+:)  → ${t('在默认列表基础上新增一个分组')}\n${t('移除')} (-:)  → ${t('从默认列表中去掉一个分组')}\n${t('追加')}       → ${t('直接追加（和添加类似，但无前缀）')}`}
+              </CodeBlock>
+            </GuideSection>
+
+            <GuideSection title={t('JSON 格式参考')}>
+              <Paragraph size='small' style={{ marginBottom: 4 }}>
+                <Text strong code>group_special_usable_group</Text>
+              </Paragraph>
+              <CodeBlock>{`{\n  "vip": {\n    "+:exclusive": "${t('专属分组')}",\n    "-:standard": "remove"\n  }\n}`}</CodeBlock>
+              <Paragraph size='small' type='tertiary' style={{ marginTop: 6, lineHeight: 1.6 }}>
+                {t('键的前缀 +: 表示添加，-: 表示移除，无前缀表示追加。值为分组描述（移除时填 "remove"）。')}
+              </Paragraph>
+            </GuideSection>
+          </div>
+        </Tabs.TabPane>
+      </Tabs>
+    </SideSheet>
+  );
+
+  return (
+    <Spin spinning={loading}>
+      <div style={{ marginBottom: 15 }}>
+        <div className='flex items-center gap-3' style={{ marginTop: 12, marginBottom: 16 }}>
+          <RadioGroup
+            type='button'
+            size='small'
+            value={editMode}
+            onChange={(e) => setEditMode(e.target.value)}
+          >
+            <Radio value='visual'>{t('可视化编辑')}</Radio>
+            <Radio value='manual'>{t('手动编辑')}</Radio>
+          </RadioGroup>
+          <Button
+            icon={<IconHelpCircle />}
+            theme='borderless'
+            type='tertiary'
+            size='small'
+            onClick={() => setShowGuide(true)}
+          >
+            {t('使用说明')}
+          </Button>
+        </div>
+        {editMode === 'visual' ? renderVisualMode() : renderManualMode()}
+      </div>
+      <Button size='default' onClick={onSubmit}>
+        {t('保存分组相关设置')}
+      </Button>
+      {renderGuide()}
     </Spin>
   );
 }

web/src/pages/Setting/Ratio/ModelPricingCombined.jsx

@@ -0,0 +1,50 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState } from 'react';
+import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import ModelPricingEditor from './components/ModelPricingEditor';
+import ModelRatioSettings from './ModelRatioSettings';
+
+export default function ModelPricingCombined({ options, refresh }) {
+  const { t } = useTranslation();
+  const [editMode, setEditMode] = useState('visual');
+
+  return (
+    <div>
+      <div style={{ marginTop: 12, marginBottom: 16 }}>
+        <RadioGroup
+          type='button'
+          size='small'
+          value={editMode}
+          onChange={(e) => setEditMode(e.target.value)}
+        >
+          <Radio value='visual'>{t('可视化编辑')}</Radio>
+          <Radio value='manual'>{t('手动编辑')}</Radio>
+        </RadioGroup>
+      </div>
+      {editMode === 'visual' ? (
+        <ModelPricingEditor options={options} refresh={refresh} />
+      ) : (
+        <ModelRatioSettings options={options} refresh={refresh} />
+      )}
+    </div>
+  );
+}

web/src/pages/Setting/Ratio/components/AutoGroupList.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Button,
+  Select,
+  Typography,
+  Popconfirm,
+  Tag,
+} from '@douyinfe/semi-ui';
+import {
+  IconPlus,
+  IconDelete,
+  IconChevronUp,
+  IconChevronDown,
+} from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+
+const { Text } = Typography;
+
+let _idCounter = 0;
+const uid = () => `ag_${++_idCounter}`;
+
+function parseAutoGroups(str) {
+  if (!str || !str.trim()) return [];
+  try {
+    const parsed = JSON.parse(str);
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((item) => typeof item === 'string')
+      .map((name) => ({ _id: uid(), name }));
+  } catch {
+    return [];
+  }
+}
+
+function serializeAutoGroups(items) {
+  const names = items.map((i) => i.name).filter(Boolean);
+  return names.length === 0 ? '' : JSON.stringify(names);
+}
+
+export default function AutoGroupList({ value, groupNames = [], onChange }) {
+  const { t } = useTranslation();
+
+  const [items, setItems] = useState(() => parseAutoGroups(value));
+
+  const emitChange = useCallback(
+    (newItems) => {
+      setItems(newItems);
+      onChange?.(serializeAutoGroups(newItems));
+    },
+    [onChange],
+  );
+
+  const groupOptions = useMemo(
+    () => groupNames.map((n) => ({ value: n, label: n })),
+    [groupNames],
+  );
+
+  const addItem = useCallback(() => {
+    emitChange([...items, { _id: uid(), name: '' }]);
+  }, [items, emitChange]);
+
+  const removeItem = useCallback(
+    (id) => {
+      emitChange(items.filter((i) => i._id !== id));
+    },
+    [items, emitChange],
+  );
+
+  const updateItem = useCallback(
+    (id, name) => {
+      emitChange(items.map((i) => (i._id === id ? { ...i, name } : i)));
+    },
+    [items, emitChange],
+  );
+
+  const moveUp = useCallback(
+    (index) => {
+      if (index <= 0) return;
+      const next = [...items];
+      [next[index - 1], next[index]] = [next[index], next[index - 1]];
+      emitChange(next);
+    },
+    [items, emitChange],
+  );
+
+  const moveDown = useCallback(
+    (index) => {
+      if (index >= items.length - 1) return;
+      const next = [...items];
+      [next[index], next[index + 1]] = [next[index + 1], next[index]];
+      emitChange(next);
+    },
+    [items, emitChange],
+  );
+
+  if (items.length === 0) {
+    return (
+      <div>
+        <Text type='tertiary' className='block text-center py-4'>
+          {t('暂无自动分组，点击下方按钮添加')}
+        </Text>
+        <div className='mt-2 flex justify-center'>
+          <Button icon={<IconPlus />} theme='outline' onClick={addItem}>
+            {t('添加分组')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className='space-y-2'>
+        {items.map((item, index) => (
+          <div
+            key={item._id}
+            className='flex items-center gap-2'
+          >
+            <Tag size='small' color='blue' className='shrink-0'>
+              {index + 1}
+            </Tag>
+            <Select
+              size='small'
+              filter
+              value={item.name || undefined}
+              placeholder={t('选择分组')}
+              optionList={groupOptions}
+              onChange={(v) => updateItem(item._id, v)}
+              style={{ flex: 1 }}
+              allowCreate
+              position='bottomLeft'
+            />
+            <Button
+              icon={<IconChevronUp />}
+              theme='borderless'
+              size='small'
+              disabled={index === 0}
+              onClick={() => moveUp(index)}
+            />
+            <Button
+              icon={<IconChevronDown />}
+              theme='borderless'
+              size='small'
+              disabled={index === items.length - 1}
+              onClick={() => moveDown(index)}
+            />
+            <Popconfirm
+              title={t('确认移除？')}
+              onConfirm={() => removeItem(item._id)}
+              position='left'
+            >
+              <Button
+                icon={<IconDelete />}
+                type='danger'
+                theme='borderless'
+                size='small'
+              />
+            </Popconfirm>
+          </div>
+        ))}
+      </div>
+      <div className='mt-3 flex justify-center'>
+        <Button icon={<IconPlus />} theme='outline' onClick={addItem}>
+          {t('添加分组')}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx

@@ -0,0 +1,206 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Button,
+  InputNumber,
+  Select,
+  Typography,
+  Popconfirm,
+} from '@douyinfe/semi-ui';
+import { IconPlus, IconDelete } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import CardTable from '../../../../components/common/ui/CardTable';
+
+const { Text } = Typography;
+
+let _idCounter = 0;
+const uid = () => `ggr_${++_idCounter}`;
+
+function parseJSON(str) {
+  if (!str || !str.trim()) return {};
+  try {
+    return JSON.parse(str);
+  } catch {
+    return {};
+  }
+}
+
+function flattenRules(nested) {
+  const rules = [];
+  for (const [userGroup, inner] of Object.entries(nested)) {
+    if (typeof inner !== 'object' || inner === null) continue;
+    for (const [usingGroup, ratio] of Object.entries(inner)) {
+      rules.push({
+        _id: uid(),
+        userGroup,
+        usingGroup,
+        ratio: typeof ratio === 'number' ? ratio : 1,
+      });
+    }
+  }
+  return rules;
+}
+
+function nestRules(rules) {
+  const result = {};
+  rules.forEach(({ userGroup, usingGroup, ratio }) => {
+    if (!userGroup || !usingGroup) return;
+    if (!result[userGroup]) result[userGroup] = {};
+    result[userGroup][usingGroup] = ratio;
+  });
+  return result;
+}
+
+export function serializeGroupGroupRatio(rules) {
+  const nested = nestRules(rules);
+  return Object.keys(nested).length === 0
+    ? ''
+    : JSON.stringify(nested, null, 2);
+}
+
+export default function GroupGroupRatioRules({
+  value,
+  groupNames = [],
+  onChange,
+}) {
+  const { t } = useTranslation();
+
+  const [rules, setRules] = useState(() => flattenRules(parseJSON(value)));
+
+  const emitChange = useCallback(
+    (newRules) => {
+      setRules(newRules);
+      onChange?.(serializeGroupGroupRatio(newRules));
+    },
+    [onChange],
+  );
+
+  const updateRule = useCallback(
+    (id, field, val) => {
+      const next = rules.map((r) =>
+        r._id === id ? { ...r, [field]: val } : r,
+      );
+      emitChange(next);
+    },
+    [rules, emitChange],
+  );
+
+  const addRule = useCallback(() => {
+    emitChange([
+      ...rules,
+      { _id: uid(), userGroup: '', usingGroup: '', ratio: 1 },
+    ]);
+  }, [rules, emitChange]);
+
+  const removeRule = useCallback(
+    (id) => {
+      emitChange(rules.filter((r) => r._id !== id));
+    },
+    [rules, emitChange],
+  );
+
+  const groupOptions = useMemo(
+    () => groupNames.map((n) => ({ value: n, label: n })),
+    [groupNames],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        title: t('用户分组'),
+        dataIndex: 'userGroup',
+        key: 'userGroup',
+        width: 200,
+        render: (_, record) => (
+          <Select
+            size='small'
+            filter
+            value={record.userGroup || undefined}
+            placeholder={t('选择用户分组')}
+            optionList={groupOptions}
+            onChange={(v) => updateRule(record._id, 'userGroup', v)}
+            style={{ width: '100%' }}
+            allowCreate
+            position='bottomLeft'
+          />
+        ),
+      },
+      {
+        title: t('使用分组'),
+        dataIndex: 'usingGroup',
+        key: 'usingGroup',
+        width: 200,
+        render: (_, record) => (
+          <Select
+            size='small'
+            filter
+            value={record.usingGroup || undefined}
+            placeholder={t('选择使用分组')}
+            optionList={groupOptions}
+            onChange={(v) => updateRule(record._id, 'usingGroup', v)}
+            style={{ width: '100%' }}
+            allowCreate
+            position='bottomLeft'
+          />
+        ),
+      },
+      {
+        title: t('倍率'),
+        dataIndex: 'ratio',
+        key: 'ratio',
+        width: 140,
+        render: (_, record) => (
+          <InputNumber
+            size='small'
+            min={0}
+            step={0.1}
+            value={record.ratio}
+            style={{ width: '100%' }}
+            onChange={(v) => updateRule(record._id, 'ratio', v ?? 0)}
+          />
+        ),
+      },
+      {
+        title: '',
+        key: 'actions',
+        width: 50,
+        render: (_, record) => (
+          <Popconfirm
+            title={t('确认删除该规则？')}
+            onConfirm={() => removeRule(record._id)}
+            position='left'
+          >
+            <Button
+              icon={<IconDelete />}
+              type='danger'
+              theme='borderless'
+              size='small'
+            />
+          </Popconfirm>
+        ),
+      },
+    ],
+    [t, groupOptions, updateRule, removeRule],
+  );
+
+  return (
+    <div>
+      <CardTable
+        columns={columns}
+        dataSource={rules}
+        rowKey='_id'
+        hidePagination
+        size='small'
+        empty={
+          <Text type='tertiary'>
+            {t('暂无规则，点击下方按钮添加')}
+          </Text>
+        }
+      />
+      <div className='mt-3 flex justify-center'>
+        <Button icon={<IconPlus />} theme='outline' onClick={addRule}>
+          {t('添加规则')}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx

@@ -0,0 +1,276 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Button,
+  Input,
+  Select,
+  Tag,
+  Typography,
+  Popconfirm,
+} from '@douyinfe/semi-ui';
+import { IconPlus, IconDelete } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import CardTable from '../../../../components/common/ui/CardTable';
+
+const { Text } = Typography;
+
+let _idCounter = 0;
+const uid = () => `gsu_${++_idCounter}`;
+
+const OP_ADD = 'add';
+const OP_REMOVE = 'remove';
+const OP_APPEND = 'append';
+
+function parsePrefix(rawKey) {
+  if (rawKey.startsWith('+:')) {
+    return { op: OP_ADD, groupName: rawKey.slice(2) };
+  }
+  if (rawKey.startsWith('-:')) {
+    return { op: OP_REMOVE, groupName: rawKey.slice(2) };
+  }
+  return { op: OP_APPEND, groupName: rawKey };
+}
+
+function toRawKey(op, groupName) {
+  if (op === OP_ADD) return `+:${groupName}`;
+  if (op === OP_REMOVE) return `-:${groupName}`;
+  return groupName;
+}
+
+function parseJSON(str) {
+  if (!str || !str.trim()) return {};
+  try {
+    return JSON.parse(str);
+  } catch {
+    return {};
+  }
+}
+
+function flattenRules(nested) {
+  const rules = [];
+  for (const [userGroup, inner] of Object.entries(nested)) {
+    if (typeof inner !== 'object' || inner === null) continue;
+    for (const [rawKey, desc] of Object.entries(inner)) {
+      const { op, groupName } = parsePrefix(rawKey);
+      rules.push({
+        _id: uid(),
+        userGroup,
+        op,
+        targetGroup: groupName,
+        description: op === OP_REMOVE ? 'remove' : (typeof desc === 'string' ? desc : ''),
+      });
+    }
+  }
+  return rules;
+}
+
+function nestRules(rules) {
+  const result = {};
+  rules.forEach(({ userGroup, op, targetGroup, description }) => {
+    if (!userGroup || !targetGroup) return;
+    if (!result[userGroup]) result[userGroup] = {};
+    const key = toRawKey(op, targetGroup);
+    result[userGroup][key] = description;
+  });
+  return result;
+}
+
+export function serializeGroupSpecialUsable(rules) {
+  const nested = nestRules(rules);
+  return Object.keys(nested).length === 0
+    ? ''
+    : JSON.stringify(nested, null, 2);
+}
+
+const OP_TAG_MAP = {
+  [OP_ADD]: { color: 'green', label: '添加 (+:)' },
+  [OP_REMOVE]: { color: 'red', label: '移除 (-:)' },
+  [OP_APPEND]: { color: 'blue', label: '追加' },
+};
+
+export default function GroupSpecialUsableRules({
+  value,
+  groupNames = [],
+  onChange,
+}) {
+  const { t } = useTranslation();
+
+  const [rules, setRules] = useState(() => flattenRules(parseJSON(value)));
+
+  const emitChange = useCallback(
+    (newRules) => {
+      setRules(newRules);
+      onChange?.(serializeGroupSpecialUsable(newRules));
+    },
+    [onChange],
+  );
+
+  const updateRule = useCallback(
+    (id, field, val) => {
+      const next = rules.map((r) => {
+        if (r._id !== id) return r;
+        const updated = { ...r, [field]: val };
+        if (field === 'op' && val === OP_REMOVE) {
+          updated.description = 'remove';
+        } else if (field === 'op' && r.op === OP_REMOVE && val !== OP_REMOVE) {
+          if (updated.description === 'remove') updated.description = '';
+        }
+        return updated;
+      });
+      emitChange(next);
+    },
+    [rules, emitChange],
+  );
+
+  const addRule = useCallback(() => {
+    emitChange([
+      ...rules,
+      {
+        _id: uid(),
+        userGroup: '',
+        op: OP_APPEND,
+        targetGroup: '',
+        description: '',
+      },
+    ]);
+  }, [rules, emitChange]);
+
+  const removeRule = useCallback(
+    (id) => {
+      emitChange(rules.filter((r) => r._id !== id));
+    },
+    [rules, emitChange],
+  );
+
+  const groupOptions = useMemo(
+    () => groupNames.map((n) => ({ value: n, label: n })),
+    [groupNames],
+  );
+
+  const opOptions = useMemo(
+    () => [
+      { value: OP_ADD, label: t('添加 (+:)') },
+      { value: OP_REMOVE, label: t('移除 (-:)') },
+      { value: OP_APPEND, label: t('追加') },
+    ],
+    [t],
+  );
+
+  const columns = useMemo(
+    () => [
+      {
+        title: t('用户分组'),
+        dataIndex: 'userGroup',
+        key: 'userGroup',
+        width: 180,
+        render: (_, record) => (
+          <Select
+            size='small'
+            filter
+            value={record.userGroup || undefined}
+            placeholder={t('选择用户分组')}
+            optionList={groupOptions}
+            onChange={(v) => updateRule(record._id, 'userGroup', v)}
+            style={{ width: '100%' }}
+            allowCreate
+            position='bottomLeft'
+          />
+        ),
+      },
+      {
+        title: t('操作'),
+        dataIndex: 'op',
+        key: 'op',
+        width: 140,
+        render: (_, record) => (
+          <Select
+            size='small'
+            value={record.op}
+            optionList={opOptions}
+            onChange={(v) => updateRule(record._id, 'op', v)}
+            style={{ width: '100%' }}
+            renderSelectedItem={(optionNode) => {
+              const tagInfo = OP_TAG_MAP[optionNode.value] || {};
+              return (
+                <Tag size='small' color={tagInfo.color}>
+                  {optionNode.label}
+                </Tag>
+              );
+            }}
+          />
+        ),
+      },
+      {
+        title: t('目标分组'),
+        dataIndex: 'targetGroup',
+        key: 'targetGroup',
+        width: 180,
+        render: (_, record) => (
+          <Input
+            size='small'
+            value={record.targetGroup}
+            placeholder={t('分组名称')}
+            onChange={(v) => updateRule(record._id, 'targetGroup', v)}
+          />
+        ),
+      },
+      {
+        title: t('描述'),
+        dataIndex: 'description',
+        key: 'description',
+        render: (_, record) =>
+          record.op === OP_REMOVE ? (
+            <Text type='tertiary' size='small'>-</Text>
+          ) : (
+            <Input
+              size='small'
+              value={record.description}
+              placeholder={t('分组描述')}
+              onChange={(v) => updateRule(record._id, 'description', v)}
+            />
+          ),
+      },
+      {
+        title: '',
+        key: 'actions',
+        width: 50,
+        render: (_, record) => (
+          <Popconfirm
+            title={t('确认删除该规则？')}
+            onConfirm={() => removeRule(record._id)}
+            position='left'
+          >
+            <Button
+              icon={<IconDelete />}
+              type='danger'
+              theme='borderless'
+              size='small'
+            />
+          </Popconfirm>
+        ),
+      },
+    ],
+    [t, groupOptions, opOptions, updateRule, removeRule],
+  );
+
+  return (
+    <div>
+      <CardTable
+        columns={columns}
+        dataSource={rules}
+        rowKey='_id'
+        hidePagination
+        size='small'
+        empty={
+          <Text type='tertiary'>
+            {t('暂无规则，点击下方按钮添加')}
+          </Text>
+        }
+      />
+      <div className='mt-3 flex justify-center'>
+        <Button icon={<IconPlus />} theme='outline' onClick={addRule}>
+          {t('添加规则')}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/pages/Setting/Ratio/components/GroupTable.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+  Button,
+  Input,
+  InputNumber,
+  Checkbox,
+  Typography,
+  Popconfirm,
+} from '@douyinfe/semi-ui';
+import { IconPlus, IconDelete } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import CardTable from '../../../../components/common/ui/CardTable';
+
+const { Text } = Typography;
+
+let _idCounter = 0;
+const uid = () => `gr_${++_idCounter}`;
+
+function parseJSON(str, fallback) {
+  if (!str || !str.trim()) return fallback;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return fallback;
+  }
+}
+
+function buildRows(groupRatioStr, userUsableGroupsStr) {
+  const ratioMap = parseJSON(groupRatioStr, {});
+  const usableMap = parseJSON(userUsableGroupsStr, {});
+
+  const allNames = new Set([
+    ...Object.keys(ratioMap),
+    ...Object.keys(usableMap),
+  ]);
+
+  return Array.from(allNames).map((name) => ({
+    _id: uid(),
+    name,
+    ratio: ratioMap[name] ?? 1,
+    selectable: name in usableMap,
+    description: usableMap[name] ?? '',
+  }));
+}
+
+export function serializeGroupTable(rows) {
+  const groupRatio = {};
+  const userUsableGroups = {};
+
+  rows.forEach((row) => {
+    if (!row.name) return;
+    groupRatio[row.name] = row.ratio;
+    if (row.selectable) {
+      userUsableGroups[row.name] = row.description;
+    }
+  });
+
+  return {
+    GroupRatio: JSON.stringify(groupRatio, null, 2),
+    UserUsableGroups: JSON.stringify(userUsableGroups, null, 2),
+  };
+}
+
+export default function GroupTable({
+  groupRatio,
+  userUsableGroups,
+  onChange,
+}) {
+  const { t } = useTranslation();
+
+  const [rows, setRows] = useState(() =>
+    buildRows(groupRatio, userUsableGroups),
+  );
+
+  const emitChange = useCallback(
+    (newRows) => {
+      setRows(newRows);
+      onChange?.(serializeGroupTable(newRows));
+    },
+    [onChange],
+  );
+
+  const updateRow = useCallback(
+    (id, field, value) => {
+      const next = rows.map((r) =>
+        r._id === id ? { ...r, [field]: value } : r,
+      );
+      emitChange(next);
+    },
+    [rows, emitChange],
+  );
+
+  const addRow = useCallback(() => {
+    const existingNames = new Set(rows.map((r) => r.name));
+    let counter = 1;
+    let newName = `group_${counter}`;
+    while (existingNames.has(newName)) {
+      counter++;
+      newName = `group_${counter}`;
+    }
+    emitChange([
+      ...rows,
+      {
+        _id: uid(),
+        name: newName,
+        ratio: 1,
+        selectable: true,
+        description: '',
+      },
+    ]);
+  }, [rows, emitChange]);
+
+  const removeRow = useCallback(
+    (id) => {
+      emitChange(rows.filter((r) => r._id !== id));
+    },
+    [rows, emitChange],
+  );
+
+  const groupNames = useMemo(() => rows.map((r) => r.name), [rows]);
+
+  const duplicateNames = useMemo(() => {
+    const counts = {};
+    groupNames.forEach((n) => {
+      counts[n] = (counts[n] || 0) + 1;
+    });
+    return new Set(Object.keys(counts).filter((k) => counts[k] > 1));
+  }, [groupNames]);
+
+  const columns = useMemo(
+    () => [
+      {
+        title: t('分组名称'),
+        dataIndex: 'name',
+        key: 'name',
+        width: 180,
+        render: (_, record) => (
+          <Input
+            size='small'
+            value={record.name}
+            status={duplicateNames.has(record.name) ? 'warning' : undefined}
+            onChange={(v) => updateRow(record._id, 'name', v)}
+          />
+        ),
+      },
+      {
+        title: t('倍率'),
+        dataIndex: 'ratio',
+        key: 'ratio',
+        width: 120,
+        render: (_, record) => (
+          <InputNumber
+            size='small'
+            min={0}
+            step={0.1}
+            value={record.ratio}
+            style={{ width: '100%' }}
+            onChange={(v) => updateRow(record._id, 'ratio', v ?? 0)}
+          />
+        ),
+      },
+      {
+        title: t('用户可选'),
+        dataIndex: 'selectable',
+        key: 'selectable',
+        width: 90,
+        align: 'center',
+        render: (_, record) => (
+          <Checkbox
+            checked={record.selectable}
+            onChange={(e) =>
+              updateRow(record._id, 'selectable', e.target.checked)
+            }
+          />
+        ),
+      },
+      {
+        title: t('描述'),
+        dataIndex: 'description',
+        key: 'description',
+        render: (_, record) =>
+          record.selectable ? (
+            <Input
+              size='small'
+              value={record.description}
+              placeholder={t('分组描述')}
+              onChange={(v) => updateRow(record._id, 'description', v)}
+            />
+          ) : (
+            <Text type='tertiary' size='small'>
+              -
+            </Text>
+          ),
+      },
+      {
+        title: '',
+        key: 'actions',
+        width: 50,
+        render: (_, record) => (
+          <Popconfirm
+            title={t('确认删除该分组？')}
+            onConfirm={() => removeRow(record._id)}
+            position='left'
+          >
+            <Button
+              icon={<IconDelete />}
+              type='danger'
+              theme='borderless'
+              size='small'
+            />
+          </Popconfirm>
+        ),
+      },
+    ],
+    [t, duplicateNames, updateRow, removeRow],
+  );
+
+  return (
+    <div>
+      <CardTable
+        columns={columns}
+        dataSource={rows}
+        rowKey='_id'
+        hidePagination
+        size='small'
+        empty={
+          <Text type='tertiary'>{t('暂无分组，点击下方按钮添加')}</Text>
+        }
+      />
+      <div className='mt-3 flex justify-center'>
+        <Button icon={<IconPlus />} theme='outline' onClick={addRow}>
+          {t('添加分组')}
+        </Button>
+      </div>
+      {duplicateNames.size > 0 && (
+        <Text type='warning' size='small' className='mt-2 block'>
+          {t('存在重复的分组名称：')}{Array.from(duplicateNames).join(', ')}
+        </Text>
+      )}
+    </div>
+  );
+}