chore: update docker image workflows

- Added support for multiple platforms (linux/amd64, linux/arm64) in docker-image-alpha.yml.
- Removed outdated docker-image-amd64.yml and docker-image-arm64.yml workflows.
- Deleted linux-release.yml, macos-release.yml, and windows-release.yml as part of workflow cleanup.

.github/workflows/docker-image-alpha.yml

@@ -1,14 +1,15 @@
-name: Publish Docker image (arm64)
+name: Publish Docker image (alpha)
 
 on:
   push:
-    tags:
-      - '*'
+    branches:
+      - alpha
   workflow_dispatch:
     inputs:
       name:
-        description: 'reason'
+        description: "reason"
         required: false
+
 jobs:
   push_to_registries:
     name: Push Docker image to multiple registries
@@ -22,13 +23,7 @@ jobs:
 
       - name: Save version info
         run: |
-          git describe --tags > VERSION 
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+          echo "alpha-$(date +'%Y%m%d')-$(git rev-parse --short HEAD)" > VERSION
 
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
@@ -50,6 +45,9 @@ jobs:
           images: |
             calciumion/new-api
             ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=alpha
+            type=raw,value=alpha-{{date 'YYYYMMDD'}}-{{sha}}
 
       - name: Build and push Docker images
         uses: docker/build-push-action@v5
@@ -58,4 +56,4 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}

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

@@ -1,54 +0,0 @@
-name: Publish Docker image (amd64)
-
-on:
-  push:
-    tags:
-      - '*'
-  workflow_dispatch:
-    inputs:
-      name:
-        description: 'reason'
-        required: false
-jobs:
-  push_to_registries:
-    name: Push Docker image to multiple registries
-    runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Save version info
-        run: |
-          git describe --tags > VERSION 
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            calciumion/new-api
-            ghcr.io/${{ github.repository }}
-
-      - name: Build and push Docker images
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/linux-release.yml

@@ -1,54 +0,0 @@
-name: Linux Release
-permissions:
-  contents: write
-
-on:
-  push:
-    tags:
-      - '*'
-      - '!*-alpha*'
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: Build Frontend
-        env:
-          CI: ""
-        run: |
-          cd web
-          npm install
-          REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        with:
-          go-version: '>=1.18.0'
-      - name: Build Backend (amd64)
-        run: |
-          go mod download
-          go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)' -extldflags '-static'" -o one-api
-
-      - name: Build Backend (arm64)
-        run: |
-          sudo apt-get update
-          DEBIAN_FRONTEND=noninteractive sudo apt-get install -y gcc-aarch64-linux-gnu
-          CC=aarch64-linux-gnu-gcc CGO_ENABLED=1 GOOS=linux GOARCH=arm64 go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)' -extldflags '-static'" -o one-api-arm64
-
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        if: startsWith(github.ref, 'refs/tags/')
-        with:
-          files: |
-            one-api
-            one-api-arm64
-          draft: true
-          generate_release_notes: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/macos-release.yml

@@ -1,45 +0,0 @@
-name: macOS Release
-permissions:
-  contents: write
-
-on:
-  push:
-    tags:
-      - '*'
-      - '!*-alpha*'
-jobs:
-  release:
-    runs-on: macos-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: Build Frontend
-        env:
-          CI: ""
-        run: |
-          cd web
-          npm install
-          REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        with:
-          go-version: '>=1.18.0'
-      - name: Build Backend
-        run: |
-          go mod download
-          go build -ldflags "-X 'one-api/common.Version=$(git describe --tags)'" -o one-api-macos
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        if: startsWith(github.ref, 'refs/tags/')
-        with:
-          files: one-api-macos
-          draft: true
-          generate_release_notes: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/windows-release.yml

@@ -1,48 +0,0 @@
-name: Windows Release
-permissions:
-  contents: write
-
-on:
-  push:
-    tags:
-      - '*'
-      - '!*-alpha*'
-jobs:
-  release:
-    runs-on: windows-latest
-    defaults:
-      run:
-        shell: bash
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: Build Frontend
-        env:
-          CI: ""
-        run: |
-          cd web
-          npm install
-          REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        with:
-          go-version: '>=1.18.0'
-      - name: Build Backend
-        run: |
-          go mod download
-          go build -ldflags "-s -w -X 'one-api/common.Version=$(git describe --tags)'" -o one-api.exe
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        if: startsWith(github.ref, 'refs/tags/')
-        with:
-          files: one-api.exe
-          draft: true
-          generate_release_notes: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.en.md

@@ -110,6 +110,7 @@ For detailed configuration instructions, please refer to [Installation Guide-Env
 - `AZURE_DEFAULT_API_VERSION`: Azure channel default API version, default is `2025-04-01-preview`
 - `NOTIFICATION_LIMIT_DURATION_MINUTE`: Notification limit duration, default is `10` minutes
 - `NOTIFY_LIMIT_COUNT`: Maximum number of user notifications within the specified duration, default is `2`
+- `ERROR_LOG_ENABLED=true`: Whether to record and display error logs, default is `false`
 
 ## Deployment
 

README.md

@@ -110,6 +110,7 @@ New API提供了丰富的功能，详细特性请参考[特性说明](https://do
 - `AZURE_DEFAULT_API_VERSION`：Azure渠道默认API版本，默认 `2025-04-01-preview`
 - `NOTIFICATION_LIMIT_DURATION_MINUTE`：通知限制持续时间，默认 `10`分钟
 - `NOTIFY_LIMIT_COUNT`：用户通知在指定持续时间内的最大数量，默认 `2`
+- `ERROR_LOG_ENABLED=true`: 是否记录并显示错误日志，默认`false`
 
 ## 部署
 

controller/channel.go

@@ -119,8 +119,11 @@ func FetchUpstreamModels(c *gin.Context) {
 		baseURL = channel.GetBaseURL()
 	}
 	url := fmt.Sprintf("%s/v1/models", baseURL)
-	if channel.Type == common.ChannelTypeGemini {
+	switch channel.Type {
+	case common.ChannelTypeGemini:
 		url = fmt.Sprintf("%s/v1beta/openai/models", baseURL)
+	case common.ChannelTypeAli:
+		url = fmt.Sprintf("%s/compatible-mode/v1/models", baseURL)
 	}
 	body, err := GetResponseBody("GET", url, channel, GetAuthHeader(channel.Key))
 	if err != nil {

dto/openai_request.go

@@ -2,6 +2,7 @@ package dto
 
 import (
 	"encoding/json"
+	"one-api/common"
 	"strings"
 )
 
@@ -43,6 +44,7 @@ type GeneralOpenAIRequest struct {
 	ResponseFormat   *ResponseFormat   `json:"response_format,omitempty"`
 	EncodingFormat   any               `json:"encoding_format,omitempty"`
 	Seed             float64           `json:"seed,omitempty"`
+	ParallelTooCalls *bool             `json:"parallel_tool_calls,omitempty"`
 	Tools            []ToolCallRequest `json:"tools,omitempty"`
 	ToolChoice       any               `json:"tool_choice,omitempty"`
 	User             string            `json:"user,omitempty"`
@@ -53,6 +55,14 @@ type GeneralOpenAIRequest struct {
 	Audio            any               `json:"audio,omitempty"`
 	EnableThinking   any               `json:"enable_thinking,omitempty"` // ali
 	ExtraBody        any               `json:"extra_body,omitempty"`
+	WebSearchOptions *WebSearchOptions `json:"web_search_options,omitempty"`
+}
+
+func (r *GeneralOpenAIRequest) ToMap() map[string]any {
+	result := make(map[string]any)
+	data, _ := common.EncodeJson(r)
+	_ = common.DecodeJson(data, &result)
+	return result
 }
 
 type ToolCallRequest struct {
@@ -72,11 +82,11 @@ type StreamOptions struct {
 	IncludeUsage bool `json:"include_usage,omitempty"`
 }
 
-func (r GeneralOpenAIRequest) GetMaxTokens() int {
+func (r *GeneralOpenAIRequest) GetMaxTokens() int {
 	return int(r.MaxTokens)
 }
 
-func (r GeneralOpenAIRequest) ParseInput() []string {
+func (r *GeneralOpenAIRequest) ParseInput() []string {
 	if r.Input == nil {
 		return nil
 	}
@@ -371,6 +381,11 @@ func (m *Message) ParseContent() []MediaContent {
 	return contentList
 }
 
+type WebSearchOptions struct {
+	SearchContextSize string          `json:"search_context_size,omitempty"`
+	UserLocation      json.RawMessage `json:"user_location,omitempty"`
+}
+
 type OpenAIResponsesRequest struct {
 	Model              string               `json:"model"`
 	Input              json.RawMessage      `json:"input,omitempty"`

relay/channel/ali/adaptor.go

@@ -57,6 +57,12 @@ func (a *Adaptor) ConvertOpenAIRequest(c *gin.Context, info *relaycommon.RelayIn
 	if request == nil {
 		return nil, errors.New("request is nil")
 	}
+
+	// fix: ali parameter.enable_thinking must be set to false for non-streaming calls
+	if !info.IsStream {
+		request.EnableThinking = false
+	}
+
 	switch info.RelayMode {
 	default:
 		aliReq := requestOpenAI2Ali(*request)

relay/channel/api_request.go

@@ -104,6 +104,65 @@ func DoWssRequest(a Adaptor, c *gin.Context, info *common.RelayInfo, requestBody
 	return targetConn, nil
 }
 
+func startPingKeepAlive(c *gin.Context, pingInterval time.Duration) context.CancelFunc {
+	pingerCtx, stopPinger := context.WithCancel(context.Background())
+
+	gopool.Go(func() {
+		defer func() {
+			if common2.DebugEnabled {
+				println("SSE ping goroutine stopped.")
+			}
+		}()
+
+		if pingInterval <= 0 {
+			pingInterval = helper.DefaultPingInterval
+		}
+
+		ticker := time.NewTicker(pingInterval)
+		// 退出时清理 ticker
+		defer ticker.Stop()
+
+		var pingMutex sync.Mutex
+		if common2.DebugEnabled {
+			println("SSE ping goroutine started")
+		}
+
+		for {
+			select {
+			// 发送 ping 数据
+			case <-ticker.C:
+				if err := sendPingData(c, &pingMutex); err != nil {
+					return
+				}
+			// 收到退出信号
+			case <-pingerCtx.Done():
+				return
+			// request 结束
+			case <-c.Request.Context().Done():
+				return
+			}
+		}
+	})
+
+	return stopPinger
+}
+
+func sendPingData(c *gin.Context, mutex *sync.Mutex) error {
+	mutex.Lock()
+	defer mutex.Unlock()
+
+	err := helper.PingData(c)
+	if err != nil {
+		common2.LogError(c, "SSE ping error: "+err.Error())
+		return err
+	}
+
+	if common2.DebugEnabled {
+		println("SSE ping data sent.")
+	}
+	return nil
+}
+
 func doRequest(c *gin.Context, req *http.Request, info *common.RelayInfo) (*http.Response, error) {
 	var client *http.Client
 	var err error
@@ -115,68 +174,28 @@ func doRequest(c *gin.Context, req *http.Request, info *common.RelayInfo) (*http
 	} else {
 		client = service.GetHttpClient()
 	}
-	// 流式请求 ping 保活
-	var stopPinger func()
-	generalSettings := operation_setting.GetGeneralSetting()
-	pingEnabled := generalSettings.PingIntervalEnabled
-	var pingerWg sync.WaitGroup
+
 	if info.IsStream {
 		helper.SetEventStreamHeaders(c)
-		pingInterval := time.Duration(generalSettings.PingIntervalSeconds) * time.Second
-		var pingerCtx context.Context
-		pingerCtx, stopPinger = context.WithCancel(c.Request.Context())
 
-		if pingEnabled {
-			pingerWg.Add(1)
-			gopool.Go(func() {
-				defer pingerWg.Done()
-				if pingInterval <= 0 {
-					pingInterval = helper.DefaultPingInterval
-				}
-
-				ticker := time.NewTicker(pingInterval)
-				defer ticker.Stop()
-				var pingMutex sync.Mutex
-				if common2.DebugEnabled {
-					println("SSE ping goroutine started")
-				}
-
-				for {
-					select {
-					case <-ticker.C:
-						pingMutex.Lock()
-						err2 := helper.PingData(c)
-						pingMutex.Unlock()
-						if err2 != nil {
-							common2.LogError(c, "SSE ping error: "+err.Error())
-							return
-						}
-						if common2.DebugEnabled {
-							println("SSE ping data sent.")
-						}
-					case <-pingerCtx.Done():
-						if common2.DebugEnabled {
-							println("SSE ping goroutine stopped.")
-						}
-						return
-					}
-				}
-			})
+		// 处理流式请求的 ping 保活
+		generalSettings := operation_setting.GetGeneralSetting()
+		if generalSettings.PingIntervalEnabled {
+			pingInterval := time.Duration(generalSettings.PingIntervalSeconds) * time.Second
+			stopPinger := startPingKeepAlive(c, pingInterval)
+			defer stopPinger()
 		}
 	}
 
 	resp, err := client.Do(req)
-	// request结束后停止ping
-	if info.IsStream && pingEnabled {
-		stopPinger()
-		pingerWg.Wait()
-	}
+
 	if err != nil {
 		return nil, err
 	}
 	if resp == nil {
 		return nil, errors.New("resp is nil")
 	}
+
 	_ = req.Body.Close()
 	_ = c.Request.Body.Close()
 	return resp, nil

relay/channel/aws/constants.go

@@ -11,6 +11,8 @@ var awsModelIDMap = map[string]string{
 	"claude-3-5-sonnet-20241022": "anthropic.claude-3-5-sonnet-20241022-v2:0",
 	"claude-3-5-haiku-20241022":  "anthropic.claude-3-5-haiku-20241022-v1:0",
 	"claude-3-7-sonnet-20250219": "anthropic.claude-3-7-sonnet-20250219-v1:0",
+	"claude-sonnet-4-20250514":   "anthropic.claude-sonnet-4-20250514-v1:0",
+	"claude-opus-4-20250514":     "anthropic.claude-opus-4-20250514-v1:0",
 }
 
 var awsModelCanCrossRegionMap = map[string]map[string]bool{
@@ -41,6 +43,16 @@ var awsModelCanCrossRegionMap = map[string]map[string]bool{
 	},
 	"anthropic.claude-3-7-sonnet-20250219-v1:0": {
 		"us": true,
+		"ap": true,
+		"eu": true,
+	},
+	"anthropic.claude-sonnet-4-20250514-v1:0": {
+		"us": true,
+		"ap": true,
+		"eu": true,
+	},
+	"anthropic.claude-opus-4-20250514-v1:0": {
+		"us": true,
 	},
 }
 

relay/channel/baidu_v2/adaptor.go

@@ -9,6 +9,7 @@ import (
 	"one-api/relay/channel"
 	"one-api/relay/channel/openai"
 	relaycommon "one-api/relay/common"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 )
@@ -49,6 +50,18 @@ func (a *Adaptor) ConvertOpenAIRequest(c *gin.Context, info *relaycommon.RelayIn
 	if request == nil {
 		return nil, errors.New("request is nil")
 	}
+	if strings.HasSuffix(info.UpstreamModelName, "-search") {
+		info.UpstreamModelName = strings.TrimSuffix(info.UpstreamModelName, "-search")
+		request.Model = info.UpstreamModelName
+		toMap := request.ToMap()
+		toMap["web_search"] = map[string]any{
+			"enable":          true,
+			"enable_citation": true,
+			"enable_trace":    true,
+			"enable_status":   false,
+		}
+		return toMap, nil
+	}
 	return request, nil
 }
 

relay/channel/claude/constants.go

@@ -13,6 +13,10 @@ var ModelList = []string{
 	"claude-3-5-sonnet-20241022",
 	"claude-3-7-sonnet-20250219",
 	"claude-3-7-sonnet-20250219-thinking",
+	"claude-sonnet-4-20250514",
+	"claude-sonnet-4-20250514-thinking",
+	"claude-opus-4-20250514",
+	"claude-opus-4-20250514-thinking",
 }
 
 var ChannelName = "claude"

relay/channel/gemini/relay-gemini.go

@@ -18,6 +18,24 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
+var geminiSupportedMimeTypes = map[string]bool{
+	"application/pdf": true,
+	"audio/mpeg":      true,
+	"audio/mp3":       true,
+	"audio/wav":       true,
+	"image/png":       true,
+	"image/jpeg":      true,
+	"text/plain":      true,
+	"video/mov":       true,
+	"video/mpeg":      true,
+	"video/mp4":       true,
+	"video/mpg":       true,
+	"video/avi":       true,
+	"video/wmv":       true,
+	"video/mpegps":    true,
+	"video/flv":       true,
+}
+
 // Setting safety to the lowest possible values since Gemini is already powerless enough
 func CovertGemini2OpenAI(textRequest dto.GeneralOpenAIRequest, info *relaycommon.RelayInfo) (*GeminiChatRequest, error) {
 
@@ -39,15 +57,22 @@ func CovertGemini2OpenAI(textRequest dto.GeneralOpenAIRequest, info *relaycommon
 	}
 
 	if model_setting.GetGeminiSettings().ThinkingAdapterEnabled {
-		if strings.HasSuffix(info.OriginModelName, "-thinking") {
-			budgetTokens := model_setting.GetGeminiSettings().ThinkingAdapterBudgetTokensPercentage * float64(geminiRequest.GenerationConfig.MaxOutputTokens)
-			if budgetTokens == 0 || budgetTokens > 24576 {
-				budgetTokens = 24576
-			}
-			geminiRequest.GenerationConfig.ThinkingConfig = &GeminiThinkingConfig{
-				ThinkingBudget:  common.GetPointer(int(budgetTokens)),
-				IncludeThoughts: true,
-			}
+	        if strings.HasSuffix(info.OriginModelName, "-thinking") {
+	            // 如果模型名以 gemini-2.5-pro 开头，不设置 ThinkingBudget
+	            if strings.HasPrefix(info.OriginModelName, "gemini-2.5-pro") {
+	                geminiRequest.GenerationConfig.ThinkingConfig = &GeminiThinkingConfig{
+	                    IncludeThoughts: true,
+	                }
+	            } else {
+	                budgetTokens := model_setting.GetGeminiSettings().ThinkingAdapterBudgetTokensPercentage * float64(geminiRequest.GenerationConfig.MaxOutputTokens)
+	                if budgetTokens == 0 || budgetTokens > 24576 {
+	                    budgetTokens = 24576
+	                }
+	                geminiRequest.GenerationConfig.ThinkingConfig = &GeminiThinkingConfig{
+	                    ThinkingBudget:  common.GetPointer(int(budgetTokens)),
+	                    IncludeThoughts: true,
+	                }
+	            }
 		} else if strings.HasSuffix(info.OriginModelName, "-nothinking") {
 			geminiRequest.GenerationConfig.ThinkingConfig = &GeminiThinkingConfig{
 				ThinkingBudget: common.GetPointer(0),
@@ -208,14 +233,20 @@ func CovertGemini2OpenAI(textRequest dto.GeneralOpenAIRequest, info *relaycommon
 				}
 				// 判断是否是url
 				if strings.HasPrefix(part.GetImageMedia().Url, "http") {
-					// 是url，获取图片的类型和base64编码的数据
+					// 是url，获取文件的类型和base64编码的数据
 					fileData, err := service.GetFileBase64FromUrl(part.GetImageMedia().Url)
 					if err != nil {
-						return nil, fmt.Errorf("get file base64 from url failed: %s", err.Error())
+						return nil, fmt.Errorf("get file base64 from url '%s' failed: %w", part.GetImageMedia().Url, err)
 					}
+
+					// 校验 MimeType 是否在 Gemini 支持的白名单中
+					if _, ok := geminiSupportedMimeTypes[strings.ToLower(fileData.MimeType)]; !ok {
+						return nil, fmt.Errorf("MIME type '%s' from URL '%s' is not supported by Gemini. Supported types are: %v", fileData.MimeType, part.GetImageMedia().Url, getSupportedMimeTypesList())
+					}
+
 					parts = append(parts, GeminiPart{
 						InlineData: &GeminiInlineData{
-							MimeType: fileData.MimeType,
+							MimeType: fileData.MimeType, // 使用原始的 MimeType，因为大小写可能对API有意义
 							Data:     fileData.Base64Data,
 						},
 					})
@@ -284,100 +315,126 @@ func CovertGemini2OpenAI(textRequest dto.GeneralOpenAIRequest, info *relaycommon
 	return &geminiRequest, nil
 }
 
+// Helper function to get a list of supported MIME types for error messages
+func getSupportedMimeTypesList() []string {
+	keys := make([]string, 0, len(geminiSupportedMimeTypes))
+	for k := range geminiSupportedMimeTypes {
+		keys = append(keys, k)
+	}
+	return keys
+}
+
 // cleanFunctionParameters recursively removes unsupported fields from Gemini function parameters.
 func cleanFunctionParameters(params interface{}) interface{} {
 	if params == nil {
 		return nil
 	}
 
-	paramMap, ok := params.(map[string]interface{})
-	if !ok {
-		// Not a map, return as is (e.g., could be an array or primitive)
-		return params
-	}
+	switch v := params.(type) {
+	case map[string]interface{}:
+		// Create a copy to avoid modifying the original
+		cleanedMap := make(map[string]interface{})
+		for k, val := range v {
+			cleanedMap[k] = val
+		}
 
-	// Create a copy to avoid modifying the original
-	cleanedMap := make(map[string]interface{})
-	for k, v := range paramMap {
-		cleanedMap[k] = v
-	}
+		// Remove unsupported root-level fields
+		delete(cleanedMap, "default")
+		delete(cleanedMap, "exclusiveMaximum")
+		delete(cleanedMap, "exclusiveMinimum")
+		delete(cleanedMap, "$schema")
+		delete(cleanedMap, "additionalProperties")
 
-	// Remove unsupported root-level fields
-	delete(cleanedMap, "default")
-	delete(cleanedMap, "exclusiveMaximum")
-	delete(cleanedMap, "exclusiveMinimum")
-	delete(cleanedMap, "$schema")
-	delete(cleanedMap, "additionalProperties")
-
-	// Clean properties
-	if props, ok := cleanedMap["properties"].(map[string]interface{}); ok && props != nil {
-		cleanedProps := make(map[string]interface{})
-		for propName, propValue := range props {
-			propMap, ok := propValue.(map[string]interface{})
-			if !ok {
-				cleanedProps[propName] = propValue // Keep non-map properties
-				continue
-			}
-
-			// Create a copy of the property map
-			cleanedPropMap := make(map[string]interface{})
-			for k, v := range propMap {
-				cleanedPropMap[k] = v
-			}
-
-			// Remove unsupported fields
-			delete(cleanedPropMap, "default")
-			delete(cleanedPropMap, "exclusiveMaximum")
-			delete(cleanedPropMap, "exclusiveMinimum")
-			delete(cleanedPropMap, "$schema")
-			delete(cleanedPropMap, "additionalProperties")
-
-			// Check and clean 'format' for string types
-			if propType, typeExists := cleanedPropMap["type"].(string); typeExists && propType == "string" {
-				if formatValue, formatExists := cleanedPropMap["format"].(string); formatExists {
-					if formatValue != "enum" && formatValue != "date-time" {
-						delete(cleanedPropMap, "format")
-					}
+		// Check and clean 'format' for string types
+		if propType, typeExists := cleanedMap["type"].(string); typeExists && propType == "string" {
+			if formatValue, formatExists := cleanedMap["format"].(string); formatExists {
+				if formatValue != "enum" && formatValue != "date-time" {
+					delete(cleanedMap, "format")
 				}
 			}
+		}
 
-			// Recursively clean nested properties within this property if it's an object/array
-			// Check the type before recursing
-			if propType, typeExists := cleanedPropMap["type"].(string); typeExists && (propType == "object" || propType == "array") {
-				cleanedProps[propName] = cleanFunctionParameters(cleanedPropMap)
-			} else {
-				cleanedProps[propName] = cleanedPropMap // Assign the cleaned map back if not recursing
+		// Clean properties
+		if props, ok := cleanedMap["properties"].(map[string]interface{}); ok && props != nil {
+			cleanedProps := make(map[string]interface{})
+			for propName, propValue := range props {
+				cleanedProps[propName] = cleanFunctionParameters(propValue)
 			}
-
+			cleanedMap["properties"] = cleanedProps
 		}
-		cleanedMap["properties"] = cleanedProps
-	}
 
-	// Recursively clean items in arrays if needed (e.g., type: array, items: { ... })
-	if items, ok := cleanedMap["items"].(map[string]interface{}); ok && items != nil {
-		cleanedMap["items"] = cleanFunctionParameters(items)
-	}
-	// Also handle items if it's an array of schemas
-	if itemsArray, ok := cleanedMap["items"].([]interface{}); ok {
-		cleanedItemsArray := make([]interface{}, len(itemsArray))
-		for i, item := range itemsArray {
-			cleanedItemsArray[i] = cleanFunctionParameters(item)
+		// Recursively clean items in arrays
+		if items, ok := cleanedMap["items"].(map[string]interface{}); ok && items != nil {
+			cleanedMap["items"] = cleanFunctionParameters(items)
 		}
-		cleanedMap["items"] = cleanedItemsArray
-	}
-
-	// Recursively clean other schema composition keywords if necessary
-	for _, field := range []string{"allOf", "anyOf", "oneOf"} {
-		if nested, ok := cleanedMap[field].([]interface{}); ok {
-			cleanedNested := make([]interface{}, len(nested))
-			for i, item := range nested {
-				cleanedNested[i] = cleanFunctionParameters(item)
+		// Also handle items if it's an array of schemas
+		if itemsArray, ok := cleanedMap["items"].([]interface{}); ok {
+			cleanedItemsArray := make([]interface{}, len(itemsArray))
+			for i, item := range itemsArray {
+				cleanedItemsArray[i] = cleanFunctionParameters(item)
 			}
-			cleanedMap[field] = cleanedNested
+			cleanedMap["items"] = cleanedItemsArray
 		}
-	}
 
-	return cleanedMap
+		// Recursively clean other schema composition keywords
+		for _, field := range []string{"allOf", "anyOf", "oneOf"} {
+			if nested, ok := cleanedMap[field].([]interface{}); ok {
+				cleanedNested := make([]interface{}, len(nested))
+				for i, item := range nested {
+					cleanedNested[i] = cleanFunctionParameters(item)
+				}
+				cleanedMap[field] = cleanedNested
+			}
+		}
+
+		// Recursively clean patternProperties
+		if patternProps, ok := cleanedMap["patternProperties"].(map[string]interface{}); ok {
+			cleanedPatternProps := make(map[string]interface{})
+			for pattern, schema := range patternProps {
+				cleanedPatternProps[pattern] = cleanFunctionParameters(schema)
+			}
+			cleanedMap["patternProperties"] = cleanedPatternProps
+		}
+
+		// Recursively clean definitions
+		if definitions, ok := cleanedMap["definitions"].(map[string]interface{}); ok {
+			cleanedDefinitions := make(map[string]interface{})
+			for defName, defSchema := range definitions {
+				cleanedDefinitions[defName] = cleanFunctionParameters(defSchema)
+			}
+			cleanedMap["definitions"] = cleanedDefinitions
+		}
+
+		// Recursively clean $defs (newer JSON Schema draft)
+		if defs, ok := cleanedMap["$defs"].(map[string]interface{}); ok {
+			cleanedDefs := make(map[string]interface{})
+			for defName, defSchema := range defs {
+				cleanedDefs[defName] = cleanFunctionParameters(defSchema)
+			}
+			cleanedMap["$defs"] = cleanedDefs
+		}
+
+		// Clean conditional keywords
+		for _, field := range []string{"if", "then", "else", "not"} {
+			if nested, ok := cleanedMap[field]; ok {
+				cleanedMap[field] = cleanFunctionParameters(nested)
+			}
+		}
+
+		return cleanedMap
+
+	case []interface{}:
+		// Handle arrays of schemas
+		cleanedArray := make([]interface{}, len(v))
+		for i, item := range v {
+			cleanedArray[i] = cleanFunctionParameters(item)
+		}
+		return cleanedArray
+
+	default:
+		// Not a map or array, return as is (e.g., could be a primitive)
+		return params
+	}
 }
 
 func removeAdditionalPropertiesWithDepth(schema interface{}, depth int) interface{} {

relay/channel/openai/relay-openai.go

@@ -273,36 +273,25 @@ func OpenaiHandler(c *gin.Context, resp *http.Response, info *relaycommon.RelayI
 }
 
 func OpenaiTTSHandler(c *gin.Context, resp *http.Response, info *relaycommon.RelayInfo) (*dto.OpenAIErrorWithStatusCode, *dto.Usage) {
-	responseBody, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return service.OpenAIErrorWrapper(err, "read_response_body_failed", http.StatusInternalServerError), nil
-	}
-	err = resp.Body.Close()
-	if err != nil {
-		return service.OpenAIErrorWrapper(err, "close_response_body_failed", http.StatusInternalServerError), nil
-	}
-	// Reset response body
-	resp.Body = io.NopCloser(bytes.NewBuffer(responseBody))
-	// We shouldn't set the header before we parse the response body, because the parse part may fail.
-	// And then we will have to send an error response, but in this case, the header has already been set.
-	// So the httpClient will be confused by the response.
-	// For example, Postman will report error, and we cannot check the response at all.
+	// the status code has been judged before, if there is a body reading failure,
+	// it should be regarded as a non-recoverable error, so it should not return err for external retry.
+	// Analogous to nginx's load balancing, it will only retry if it can't be requested or 
+	// if the upstream returns a specific status code, once the upstream has already written the header, 
+	// the subsequent failure of the response body should be regarded as a non-recoverable error, 
+	// and can be terminated directly.
+	defer resp.Body.Close()
+	usage := &dto.Usage{}
+	usage.PromptTokens = info.PromptTokens
+	usage.TotalTokens = info.PromptTokens
 	for k, v := range resp.Header {
 		c.Writer.Header().Set(k, v[0])
 	}
 	c.Writer.WriteHeader(resp.StatusCode)
-	_, err = io.Copy(c.Writer, resp.Body)
+	c.Writer.WriteHeaderNow()
+	_, err := io.Copy(c.Writer, resp.Body)
 	if err != nil {
-		return service.OpenAIErrorWrapper(err, "copy_response_body_failed", http.StatusInternalServerError), nil
+		common.LogError(c, err.Error())
 	}
-	err = resp.Body.Close()
-	if err != nil {
-		return service.OpenAIErrorWrapper(err, "close_response_body_failed", http.StatusInternalServerError), nil
-	}
-
-	usage := &dto.Usage{}
-	usage.PromptTokens = info.PromptTokens
-	usage.TotalTokens = info.PromptTokens
 	return nil, usage
 }
 

relay/channel/vertex/adaptor.go

@@ -31,6 +31,8 @@ var claudeModelMap = map[string]string{
 	"claude-3-5-sonnet-20240620": "claude-3-5-sonnet@20240620",
 	"claude-3-5-sonnet-20241022": "claude-3-5-sonnet-v2@20241022",
 	"claude-3-7-sonnet-20250219": "claude-3-7-sonnet@20250219",
+	"claude-sonnet-4-20250514":   "claude-sonnet-4@20250514",
+	"claude-opus-4-20250514":     "claude-opus-4@20250514",
 }
 
 const anthropicVersion = "vertex-2023-10-16"
@@ -93,14 +95,23 @@ func (a *Adaptor) GetRequestURL(info *relaycommon.RelayInfo) (string, error) {
 		} else {
 			suffix = "generateContent"
 		}
-		return fmt.Sprintf(
-			"https://%s-aiplatform.googleapis.com/v1/projects/%s/locations/%s/publishers/google/models/%s:%s",
-			region,
-			adc.ProjectID,
-			region,
-			info.UpstreamModelName,
-			suffix,
-		), nil
+		if region == "global" {
+			return fmt.Sprintf(
+				"https://aiplatform.googleapis.com/v1/projects/%s/locations/global/publishers/google/models/%s:%s",
+				adc.ProjectID,
+				info.UpstreamModelName,
+				suffix,
+			), nil
+		} else {
+			return fmt.Sprintf(
+				"https://%s-aiplatform.googleapis.com/v1/projects/%s/locations/%s/publishers/google/models/%s:%s",
+				region,
+				adc.ProjectID,
+				region,
+				info.UpstreamModelName,
+				suffix,
+			), nil
+		}
 	} else if a.RequestMode == RequestModeClaude {
 		if info.IsStream {
 			suffix = "streamRawPredict?alt=sse"

relay/relay-image.go

@@ -41,16 +41,31 @@ func getAndValidImageRequest(c *gin.Context, info *relaycommon.RelayInfo) (*dto.
 				imageRequest.Quality = "standard"
 			}
 		}
+		if imageRequest.N == 0 {
+			imageRequest.N = 1
+		}
 	default:
 		err := common.UnmarshalBodyReusable(c, imageRequest)
 		if err != nil {
 			return nil, err
 		}
+
+		if imageRequest.Model == "" {
+			imageRequest.Model = "dall-e-3"
+		}
+
+		if strings.Contains(imageRequest.Size, "×") {
+			return nil, errors.New("size an unexpected error occurred in the parameter, please use 'x' instead of the multiplication sign '×'")
+		}
+
 		// Not "256x256", "512x512", or "1024x1024"
 		if imageRequest.Model == "dall-e-2" || imageRequest.Model == "dall-e" {
 			if imageRequest.Size != "" && imageRequest.Size != "256x256" && imageRequest.Size != "512x512" && imageRequest.Size != "1024x1024" {
 				return nil, errors.New("size must be one of 256x256, 512x512, or 1024x1024 for dall-e-2 or dall-e")
 			}
+			if imageRequest.Size == "" {
+				imageRequest.Size = "1024x1024"
+			}
 		} else if imageRequest.Model == "dall-e-3" {
 			if imageRequest.Size != "" && imageRequest.Size != "1024x1024" && imageRequest.Size != "1024x1792" && imageRequest.Size != "1792x1024" {
 				return nil, errors.New("size must be one of 1024x1024, 1024x1792 or 1792x1024 for dall-e-3")
@@ -58,74 +73,24 @@ func getAndValidImageRequest(c *gin.Context, info *relaycommon.RelayInfo) (*dto.
 			if imageRequest.Quality == "" {
 				imageRequest.Quality = "standard"
 			}
-			// N should between 1 and 10
-			//if imageRequest.N != 0 && (imageRequest.N < 1 || imageRequest.N > 10) {
-			//	return service.OpenAIErrorWrapper(errors.New("n must be between 1 and 10"), "invalid_field_value", http.StatusBadRequest)
-			//}
+			if imageRequest.Size == "" {
+				imageRequest.Size = "1024x1024"
+			}
+		} else if imageRequest.Model == "gpt-image-1" {
+			if imageRequest.Quality == "" {
+				imageRequest.Quality = "auto"
+			}
+		}
+
+		if imageRequest.Prompt == "" {
+			return nil, errors.New("prompt is required")
+		}
+
+		if imageRequest.N == 0 {
+			imageRequest.N = 1
 		}
 	}
 
-	if imageRequest.Prompt == "" {
-		return nil, errors.New("prompt is required")
-	}
-
-	if imageRequest.Model == "" {
-		imageRequest.Model = "dall-e-2"
-	}
-	if strings.Contains(imageRequest.Size, "×") {
-		return nil, errors.New("size an unexpected error occurred in the parameter, please use 'x' instead of the multiplication sign '×'")
-	}
-	if imageRequest.N == 0 {
-		imageRequest.N = 1
-	}
-	if imageRequest.Size == "" {
-		imageRequest.Size = "1024x1024"
-	}
-
-	err := common.UnmarshalBodyReusable(c, imageRequest)
-	if err != nil {
-		return nil, err
-	}
-	if imageRequest.Prompt == "" {
-		return nil, errors.New("prompt is required")
-	}
-	if strings.Contains(imageRequest.Size, "×") {
-		return nil, errors.New("size an unexpected error occurred in the parameter, please use 'x' instead of the multiplication sign '×'")
-	}
-	if imageRequest.N == 0 {
-		imageRequest.N = 1
-	}
-	if imageRequest.Size == "" {
-		imageRequest.Size = "1024x1024"
-	}
-	if imageRequest.Model == "" {
-		imageRequest.Model = "dall-e-2"
-	}
-	// x.ai grok-2-image not support size, quality or style
-	if imageRequest.Size == "empty" {
-		imageRequest.Size = ""
-	}
-
-	// Not "256x256", "512x512", or "1024x1024"
-	if imageRequest.Model == "dall-e-2" || imageRequest.Model == "dall-e" {
-		if imageRequest.Size != "" && imageRequest.Size != "256x256" && imageRequest.Size != "512x512" && imageRequest.Size != "1024x1024" {
-			return nil, errors.New("size must be one of 256x256, 512x512, or 1024x1024, dall-e-3 1024x1792 or 1792x1024")
-		}
-	} else if imageRequest.Model == "dall-e-3" {
-		if imageRequest.Size != "" && imageRequest.Size != "1024x1024" && imageRequest.Size != "1024x1792" && imageRequest.Size != "1792x1024" {
-			return nil, errors.New("size must be one of 256x256, 512x512, or 1024x1024, dall-e-3 1024x1792 or 1792x1024")
-		}
-		if imageRequest.Quality == "" {
-			imageRequest.Quality = "standard"
-		}
-		//if imageRequest.N != 1 {
-		//	return nil, errors.New("n must be 1")
-		//}
-	}
-	// N should between 1 and 10
-	//if imageRequest.N != 0 && (imageRequest.N < 1 || imageRequest.N > 10) {
-	//	return service.OpenAIErrorWrapper(errors.New("n must be between 1 and 10"), "invalid_field_value", http.StatusBadRequest)
-	//}
 	if setting.ShouldCheckPromptSensitive() {
 		words, err := service.CheckSensitiveInput(imageRequest.Prompt)
 		if err != nil {
@@ -229,6 +194,10 @@ func ImageHelper(c *gin.Context) *dto.OpenAIErrorWithStatusCode {
 		requestBody = bytes.NewBuffer(jsonData)
 	}
 
+	if common.DebugEnabled {
+		println(fmt.Sprintf("image request body: %s", requestBody))
+	}
+
 	statusCodeMappingStr := c.GetString("status_code_mapping")
 
 	resp, err := adaptor.DoRequest(c, relayInfo, requestBody)

relay/relay-text.go

@@ -47,6 +47,20 @@ func getAndValidateTextRequest(c *gin.Context, relayInfo *relaycommon.RelayInfo)
 	if textRequest.Model == "" {
 		return nil, errors.New("model is required")
 	}
+	if textRequest.WebSearchOptions != nil {
+		if textRequest.WebSearchOptions.SearchContextSize != "" {
+			validSizes := map[string]bool{
+				"high":   true,
+				"medium": true,
+				"low":    true,
+			}
+			if !validSizes[textRequest.WebSearchOptions.SearchContextSize] {
+				return nil, errors.New("invalid search_context_size, must be one of: high, medium, low")
+			}
+		} else {
+			textRequest.WebSearchOptions.SearchContextSize = "medium"
+		}
+	}
 	switch relayInfo.RelayMode {
 	case relayconstant.RelayModeCompletions:
 		if textRequest.Prompt == "" {
@@ -76,6 +90,10 @@ func TextHelper(c *gin.Context) (openaiErr *dto.OpenAIErrorWithStatusCode) {
 
 	// get & validate textRequest 获取并验证文本请求
 	textRequest, err := getAndValidateTextRequest(c, relayInfo)
+	if textRequest.WebSearchOptions != nil {
+		c.Set("chat_completion_web_search_context_size", textRequest.WebSearchOptions.SearchContextSize)
+	}
+
 	if err != nil {
 		common.LogError(c, fmt.Sprintf("getAndValidateTextRequest failed: %s", err.Error()))
 		return service.OpenAIErrorWrapperLocal(err, "invalid_text_request", http.StatusBadRequest)
@@ -370,9 +388,20 @@ func postConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 			dWebSearchQuota = decimal.NewFromFloat(webSearchPrice).
 				Mul(decimal.NewFromInt(int64(webSearchTool.CallCount))).
 				Div(decimal.NewFromInt(1000)).Mul(dGroupRatio).Mul(dQuotaPerUnit)
-			extraContent += fmt.Sprintf("Web Search 调用 %d 次，上下文大小 %s，调用花费 $%s",
+			extraContent += fmt.Sprintf("Web Search 调用 %d 次，上下文大小 %s，调用花费 %s",
 				webSearchTool.CallCount, webSearchTool.SearchContextSize, dWebSearchQuota.String())
 		}
+	} else if strings.HasSuffix(modelName, "search-preview") {
+		// search-preview 模型不支持 response api
+		searchContextSize := ctx.GetString("chat_completion_web_search_context_size")
+		if searchContextSize == "" {
+			searchContextSize = "medium"
+		}
+		webSearchPrice = operation_setting.GetWebSearchPricePerThousand(modelName, searchContextSize)
+		dWebSearchQuota = decimal.NewFromFloat(webSearchPrice).
+			Div(decimal.NewFromInt(1000)).Mul(dGroupRatio).Mul(dQuotaPerUnit)
+		extraContent += fmt.Sprintf("Web Search 调用 1 次，上下文大小 %s，调用花费 %s",
+			searchContextSize, dWebSearchQuota.String())
 	}
 	// file search tool 计费
 	var dFileSearchQuota decimal.Decimal
@@ -463,10 +492,16 @@ func postConsumeQuota(ctx *gin.Context, relayInfo *relaycommon.RelayInfo,
 		other["image_ratio"] = imageRatio
 		other["image_output"] = imageTokens
 	}
-	if !dWebSearchQuota.IsZero() && relayInfo.ResponsesUsageInfo != nil {
-		if webSearchTool, exists := relayInfo.ResponsesUsageInfo.BuiltInTools[dto.BuildInToolWebSearchPreview]; exists {
+	if !dWebSearchQuota.IsZero() {
+		if relayInfo.ResponsesUsageInfo != nil {
+			if webSearchTool, exists := relayInfo.ResponsesUsageInfo.BuiltInTools[dto.BuildInToolWebSearchPreview]; exists {
+				other["web_search"] = true
+				other["web_search_call_count"] = webSearchTool.CallCount
+				other["web_search_price"] = webSearchPrice
+			}
+		} else if strings.HasSuffix(modelName, "search-preview") {
 			other["web_search"] = true
-			other["web_search_call_count"] = webSearchTool.CallCount
+			other["web_search_call_count"] = 1
 			other["web_search_price"] = webSearchPrice
 		}
 	}

setting/operation_setting/cache_ratio.go

@@ -36,6 +36,10 @@ var defaultCacheRatio = map[string]float64{
 	"claude-3-5-sonnet-20241022":          0.1,
 	"claude-3-7-sonnet-20250219":          0.1,
 	"claude-3-7-sonnet-20250219-thinking": 0.1,
+	"claude-sonnet-4-20250514":            0.1,
+	"claude-sonnet-4-20250514-thinking":   0.1,
+	"claude-opus-4-20250514":              0.1,
+	"claude-opus-4-20250514-thinking":     0.1,
 }
 
 var defaultCreateCacheRatio = map[string]float64{
@@ -47,6 +51,10 @@ var defaultCreateCacheRatio = map[string]float64{
 	"claude-3-5-sonnet-20241022":          1.25,
 	"claude-3-7-sonnet-20250219":          1.25,
 	"claude-3-7-sonnet-20250219-thinking": 1.25,
+	"claude-sonnet-4-20250514":            1.25,
+	"claude-sonnet-4-20250514-thinking":   1.25,
+	"claude-opus-4-20250514":              1.25,
+	"claude-opus-4-20250514-thinking":     1.25,
 }
 
 //var defaultCreateCacheRatio = map[string]float64{}

setting/operation_setting/model-ratio.go

@@ -114,7 +114,9 @@ var defaultModelRatio = map[string]float64{
 	"claude-3-5-sonnet-20241022":                1.5,
 	"claude-3-7-sonnet-20250219":                1.5,
 	"claude-3-7-sonnet-20250219-thinking":       1.5,
+	"claude-sonnet-4-20250514":                  1.5,
 	"claude-3-opus-20240229":                    7.5, // $15 / 1M tokens
+	"claude-opus-4-20250514":                    7.5,
 	"ERNIE-4.0-8K":                              0.120 * RMB,
 	"ERNIE-3.5-8K":                              0.012 * RMB,
 	"ERNIE-3.5-8K-0205":                         0.024 * RMB,
@@ -440,13 +442,15 @@ func getHardcodedCompletionModelRatio(name string) (float64, bool) {
 	if name == "chatgpt-4o-latest" {
 		return 3, true
 	}
-	if strings.Contains(name, "claude-instant-1") {
-		return 3, true
-	} else if strings.Contains(name, "claude-2") {
-		return 3, true
-	} else if strings.Contains(name, "claude-3") {
+
+	if strings.Contains(name, "claude-3") {
 		return 5, true
+	} else if strings.Contains(name, "claude-sonnet-4") || strings.Contains(name, "claude-opus-4") {
+		return 5, true
+	} else if strings.Contains(name, "claude-instant-1") || strings.Contains(name, "claude-2") {
+		return 3, true
 	}
+
 	if strings.HasPrefix(name, "gpt-3.5") {
 		if name == "gpt-3.5-turbo" || strings.HasSuffix(name, "0125") {
 			// https://openai.com/blog/new-embedding-models-and-api-updates

web/package.json

@@ -6,27 +6,42 @@
   "dependencies": {
     "@douyinfe/semi-icons": "^2.63.1",
     "@douyinfe/semi-ui": "^2.69.1",
+    "@lobehub/icons": "^2.0.0",
     "@visactor/react-vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
     "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "^0.27.2",
+    "clsx": "^2.1.1",
+    "country-flag-icons": "^1.5.19",
     "dayjs": "^1.11.11",
     "history": "^5.3.0",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "katex": "^0.16.22",
+    "lucide-react": "^0.511.0",
     "marked": "^4.1.1",
+    "mermaid": "^11.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-fireworks": "^1.0.4",
+    "react-i18next": "^13.0.0",
+    "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^6.3.0",
     "react-telegram-login": "^1.1.2",
     "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "semantic-ui-offline": "^2.5.0",
     "semantic-ui-react": "^2.1.3",
     "sse": "https://github.com/mpetazzoni/sse.js",
-    "i18next": "^23.16.8",
-    "react-i18next": "^13.0.0",
-    "i18next-browser-languagedetector": "^7.2.0"
+    "unist-util-visit": "^5.0.0",
+    "use-debounce": "^10.0.4"
   },
   "scripts": {
     "dev": "vite",
@@ -54,9 +69,13 @@
     ]
   },
   "devDependencies": {
+    "@douyinfe/semi-webpack-plugin": "^2.78.0",
     "@so1ve/prettier-config": "^3.1.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
     "prettier": "^3.0.0",
+    "tailwindcss": "^3",
     "typescript": "4.4.2",
     "vite": "^5.2.0"
   },

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/App.js

@@ -22,11 +22,12 @@ import { Layout } from '@douyinfe/semi-ui';
 import Midjourney from './pages/Midjourney';
 import Pricing from './pages/Pricing/index.js';
 import Task from './pages/Task/index.js';
-import Playground from './pages/Playground/Playground.js';
+import Playground from './pages/Playground/index.js';
 import OAuth2Callback from './components/OAuth2Callback.js';
 import PersonalSetting from './components/PersonalSetting.js';
 import Setup from './pages/Setup/index.js';
 import SetupCheck from './components/SetupCheck';
+import AuthRedirect from './components/AuthRedirect';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -55,7 +56,7 @@ function App() {
           }
         />
         <Route
-          path='/channel'
+          path='/console/channel'
           element={
             <PrivateRoute>
               <Channel />
@@ -63,7 +64,7 @@ function App() {
           }
         />
         <Route
-          path='/channel/edit/:id'
+          path='/console/channel/edit/:id'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditChannel />
@@ -71,7 +72,7 @@ function App() {
           }
         />
         <Route
-          path='/channel/add'
+          path='/console/channel/add'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditChannel />
@@ -79,7 +80,7 @@ function App() {
           }
         />
         <Route
-          path='/token'
+          path='/console/token'
           element={
             <PrivateRoute>
               <Token />
@@ -87,7 +88,7 @@ function App() {
           }
         />
         <Route
-          path='/playground'
+          path='/console/playground'
           element={
             <PrivateRoute>
               <Playground />
@@ -95,7 +96,7 @@ function App() {
           }
         />
         <Route
-          path='/redemption'
+          path='/console/redemption'
           element={
             <PrivateRoute>
               <Redemption />
@@ -103,7 +104,7 @@ function App() {
           }
         />
         <Route
-          path='/user'
+          path='/console/user'
           element={
             <PrivateRoute>
               <User />
@@ -111,7 +112,7 @@ function App() {
           }
         />
         <Route
-          path='/user/edit/:id'
+          path='/console/user/edit/:id'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditUser />
@@ -119,7 +120,7 @@ function App() {
           }
         />
         <Route
-          path='/user/edit'
+          path='/console/user/edit'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <EditUser />
@@ -138,7 +139,9 @@ function App() {
           path='/login'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
-              <LoginForm />
+              <AuthRedirect>
+                <LoginForm />
+              </AuthRedirect>
             </Suspense>
           }
         />
@@ -146,7 +149,9 @@ function App() {
           path='/register'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
-              <RegisterForm />
+              <AuthRedirect>
+                <RegisterForm />
+              </AuthRedirect>
             </Suspense>
           }
         />
@@ -183,7 +188,7 @@ function App() {
           }
         />
         <Route
-          path='/setting'
+          path='/console/setting'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -193,7 +198,7 @@ function App() {
           }
         />
         <Route
-          path='/personal'
+          path='/console/personal'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -203,7 +208,7 @@ function App() {
           }
         />
         <Route
-          path='/topup'
+          path='/console/topup'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -213,7 +218,7 @@ function App() {
           }
         />
         <Route
-          path='/log'
+          path='/console/log'
           element={
             <PrivateRoute>
               <Log />
@@ -221,7 +226,7 @@ function App() {
           }
         />
         <Route
-          path='/detail'
+          path='/console'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -231,7 +236,7 @@ function App() {
           }
         />
         <Route
-          path='/midjourney'
+          path='/console/midjourney'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -241,7 +246,7 @@ function App() {
           }
         />
         <Route
-          path='/task'
+          path='/console/task'
           element={
             <PrivateRoute>
               <Suspense fallback={<Loading></Loading>} key={location.pathname}>
@@ -267,7 +272,7 @@ function App() {
           }
         />
         <Route
-          path='/chat/:id?'
+          path='/console/chat/:id?'
           element={
             <Suspense fallback={<Loading></Loading>} key={location.pathname}>
               <Chat />

web/src/components/AuthRedirect.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+const AuthRedirect = ({ children }) => {
+  const user = localStorage.getItem('user');
+
+  if (user) {
+    return <Navigate to="/console" replace />;
+  }
+
+  return children;
+};
+
+export default AuthRedirect; 

web/src/components/Footer.js

@@ -1,15 +1,16 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useMemo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getFooterHTML, getSystemName } from '../helpers';
-import { Layout, Tooltip } from '@douyinfe/semi-ui';
-import { StyleContext } from '../context/Style/index.js';
+import { Typography } from '@douyinfe/semi-ui';
+import { getFooterHTML, getLogo, getSystemName } from '../helpers';
+import { StatusContext } from '../context/Status';
 
 const FooterBar = () => {
   const { t } = useTranslation();
-  const systemName = getSystemName();
   const [footer, setFooter] = useState(getFooterHTML());
-  const [styleState] = useContext(StyleContext);
-  let remainCheckTimes = 5;
+  const systemName = getSystemName();
+  const logo = getLogo();
+  const [statusState] = useContext(StatusContext);
+  const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
 
   const loadFooter = () => {
     let footer_html = localStorage.getItem('footer_html');
@@ -18,56 +19,93 @@ const FooterBar = () => {
     }
   };
 
-  const defaultFooter = (
-    <div className='custom-footer'>
-      <a
-        href='https://github.com/Calcium-Ion/new-api'
-        target='_blank'
-        rel='noreferrer'
-      >
-        New API {import.meta.env.VITE_REACT_APP_VERSION}{' '}
-      </a>
-      {t('由')}{' '}
-      <a href='https://github.com/Calcium-Ion' target='_blank' rel='noreferrer'>
-        Calcium-Ion
-      </a>{' '}
-      {t('开发，基于')}{' '}
-      <a
-        href='https://github.com/songquanpeng/one-api'
-        target='_blank'
-        rel='noreferrer'
-      >
-        One API
-      </a>
-    </div>
-  );
+  const currentYear = new Date().getFullYear();
+
+  const customFooter = useMemo(() => (
+    <footer className="relative bg-gray-900 dark:bg-[#1C1F23] h-auto py-16 px-6 md:px-24 w-full flex flex-col items-center justify-between overflow-hidden">
+      <div className="absolute hidden md:block top-[204px] left-[-100px] w-[151px] h-[151px] rounded-full bg-[#FFD166]"></div>
+      <div className="absolute md:hidden bottom-[20px] left-[-50px] w-[80px] h-[80px] rounded-full bg-[#FFD166] opacity-60"></div>
+
+      {isDemoSiteMode && (
+        <div className="flex flex-col md:flex-row justify-between w-full max-w-[1110px] mb-10 gap-8">
+          <div className="flex-shrink-0">
+            <img
+              src={logo}
+              alt={systemName}
+              className="w-16 h-16 rounded-full bg-gray-800 p-1.5 object-contain"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 w-full">
+            <div className="text-left">
+              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('关于我们')}</p>
+              <div className="flex flex-col gap-4">
+                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('关于项目')}</a>
+                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('联系我们')}</a>
+                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('功能特性')}</a>
+              </div>
+            </div>
+
+            <div className="text-left">
+              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('文档')}</p>
+              <div className="flex flex-col gap-4">
+                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('快速开始')}</a>
+                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('安装指南')}</a>
+                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">{t('API 文档')}</a>
+              </div>
+            </div>
+
+            <div className="text-left">
+              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('相关项目')}</p>
+              <div className="flex flex-col gap-4">
+                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">One API</a>
+                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">Midjourney-Proxy</a>
+                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">chatnio</a>
+                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">neko-api-key-tool</a>
+              </div>
+            </div>
+
+            <div className="text-left">
+              <p className="!text-[#d9dbe1] font-semibold mb-5">{t('基于New API的项目')}</p>
+              <div className="flex flex-col gap-4">
+                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">new-api-horizon</a>
+                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-[#d9dbe1]">VoAPI</a> */}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-6">
+        <div className="flex flex-wrap items-center gap-2">
+          <Typography.Text className="text-sm !text-[#d9dbe1]">© {currentYear} {systemName}. {t('版权所有')}</Typography.Text>
+        </div>
+
+        {isDemoSiteMode && (
+          <div className="text-sm">
+            <span className="!text-[#d9dbe1]">{t('设计与开发由')} </span>
+            <span className="!text-[#01ffc3]">Douyin FE</span>
+            <span className="!text-[#d9dbe1]"> & </span>
+            <a href="https://github.com/QuantumNous" target="_blank" rel="noreferrer" className="!text-[#01ffc3] hover:!text-[#01ffc3]">QuantumNous</a>
+          </div>
+        )}
+      </div>
+    </footer>
+  ), [logo, systemName, t, currentYear, isDemoSiteMode]);
 
   useEffect(() => {
-    const timer = setInterval(() => {
-      if (remainCheckTimes <= 0) {
-        clearInterval(timer);
-        return;
-      }
-      remainCheckTimes--;
-      loadFooter();
-    }, 200);
-    return () => clearTimeout(timer);
+    loadFooter();
   }, []);
 
   return (
-    <div
-      style={{
-        textAlign: 'center',
-        paddingBottom: '5px',
-      }}
-    >
+    <div className="w-full">
       {footer ? (
         <div
-          className='custom-footer'
+          className="custom-footer"
           dangerouslySetInnerHTML={{ __html: footer }}
         ></div>
       ) : (
-        defaultFooter
+        customFooter
       )}
     </div>
   );

web/src/components/HeaderBar.js

@@ -1,168 +1,92 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { useSetTheme, useTheme } from '../context/Theme';
 import { useTranslation } from 'react-i18next';
-
-import { API, getLogo, getSystemName, isMobile, showSuccess } from '../helpers';
-import '../index.css';
-
+import { API, getLogo, getSystemName, showSuccess } from '../helpers';
 import fireworks from 'react-fireworks';
+import { CN, GB } from 'country-flag-icons/react/3x2';
+import NoticeModal from './NoticeModal';
 
 import {
   IconClose,
-  IconHelpCircle,
-  IconHome,
-  IconHomeStroked,
-  IconIndentLeft,
-  IconComment,
-  IconKey,
   IconMenu,
-  IconNoteMoneyStroked,
-  IconPriceTag,
-  IconUser,
   IconLanguage,
-  IconInfoCircle,
+  IconChevronDown,
+  IconSun,
+  IconMoon,
+  IconExit,
+  IconUserSetting,
   IconCreditCard,
-  IconTerminal,
+  IconKey,
+  IconBell,
 } from '@douyinfe/semi-icons';
 import {
   Avatar,
   Button,
   Dropdown,
-  Layout,
-  Nav,
-  Switch,
   Tag,
+  Typography,
+  Skeleton,
 } from '@douyinfe/semi-ui';
 import { stringToColor } from '../helpers/render';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
-import { StyleContext } from '../context/Style/index.js';
 import { StatusContext } from '../context/Status/index.js';
-
-// 自定义顶部栏样式
-const headerStyle = {
-  boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
-  borderBottom: '1px solid var(--semi-color-border)',
-  background: 'var(--semi-color-bg-0)',
-  transition: 'all 0.3s ease',
-  width: '100%',
-};
-
-// 自定义顶部栏按钮样式
-const headerItemStyle = {
-  borderRadius: '4px',
-  margin: '0 4px',
-  transition: 'all 0.3s ease',
-};
-
-// 自定义顶部栏按钮悬停样式
-const headerItemHoverStyle = {
-  backgroundColor: 'var(--semi-color-primary-light-default)',
-  color: 'var(--semi-color-primary)',
-};
-
-// 自定义顶部栏Logo样式
-const logoStyle = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: '10px',
-  padding: '0 10px',
-  height: '100%',
-};
-
-// 自定义顶部栏系统名称样式
-const systemNameStyle = {
-  fontWeight: 'bold',
-  fontSize: '18px',
-  background:
-    'linear-gradient(45deg, var(--semi-color-primary), var(--semi-color-secondary))',
-  WebkitBackgroundClip: 'text',
-  WebkitTextFillColor: 'transparent',
-  padding: '0 5px',
-};
-
-// 自定义顶部栏按钮图标样式
-const headerIconStyle = {
-  fontSize: '18px',
-  transition: 'all 0.3s ease',
-};
-
-// 自定义头像样式
-const avatarStyle = {
-  margin: '4px',
-  cursor: 'pointer',
-  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-  transition: 'all 0.3s ease',
-};
-
-// 自定义下拉菜单样式
-const dropdownStyle = {
-  borderRadius: '8px',
-  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-  overflow: 'hidden',
-};
-
-// 自定义主题切换开关样式
-const switchStyle = {
-  margin: '0 8px',
-};
+import { useStyle, styleActions } from '../context/Style/index.js';
 
 const HeaderBar = () => {
   const { t, i18n } = useTranslation();
   const [userState, userDispatch] = useContext(UserContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
   const [statusState, statusDispatch] = useContext(StatusContext);
+  const { state: styleState, dispatch: styleDispatch } = useStyle();
+  const [isLoading, setIsLoading] = useState(true);
   let navigate = useNavigate();
   const [currentLang, setCurrentLang] = useState(i18n.language);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const location = useLocation();
+  const [noticeVisible, setNoticeVisible] = useState(false);
 
   const systemName = getSystemName();
   const logo = getLogo();
   const currentDate = new Date();
-  // enable fireworks on new year(1.1 and 2.9-2.24)
   const isNewYear = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
 
-  // Check if self-use mode is enabled
   const isSelfUseMode = statusState?.status?.self_use_mode_enabled || false;
   const docsLink = statusState?.status?.docs_link || '';
   const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
 
-  let buttons = [
+  const theme = useTheme();
+  const setTheme = useSetTheme();
+
+  const mainNavLinks = [
     {
       text: t('首页'),
       itemKey: 'home',
       to: '/',
-      icon: <IconHome style={headerIconStyle} />,
     },
     {
       text: t('控制台'),
-      itemKey: 'detail',
-      to: '/',
-      icon: <IconTerminal style={headerIconStyle} />,
+      itemKey: 'console',
+      to: '/console',
     },
     {
       text: t('定价'),
       itemKey: 'pricing',
       to: '/pricing',
-      icon: <IconPriceTag style={headerIconStyle} />,
     },
-    // Only include the docs button if docsLink exists
     ...(docsLink
       ? [
-          {
-            text: t('文档'),
-            itemKey: 'docs',
-            isExternal: true,
-            externalLink: docsLink,
-            icon: <IconHelpCircle style={headerIconStyle} />,
-          },
-        ]
+        {
+          text: t('文档'),
+          itemKey: 'docs',
+          isExternal: true,
+          externalLink: docsLink,
+        },
+      ]
       : []),
     {
       text: t('关于'),
       itemKey: 'about',
       to: '/about',
-      icon: <IconInfoCircle style={headerIconStyle} />,
     },
   ];
 
@@ -172,6 +96,7 @@ const HeaderBar = () => {
     userDispatch({ type: 'logout' });
     localStorage.removeItem('user');
     navigate('/login');
+    setMobileMenuOpen(false);
   }
 
   const handleNewYearClick = () => {
@@ -179,31 +104,24 @@ const HeaderBar = () => {
     fireworks.start();
     setTimeout(() => {
       fireworks.stop();
-      setTimeout(() => {
-        window.location.reload();
-      }, 10000);
     }, 3000);
   };
 
-  const theme = useTheme();
-  const setTheme = useSetTheme();
-
   useEffect(() => {
     if (theme === 'dark') {
       document.body.setAttribute('theme-mode', 'dark');
+      document.documentElement.classList.add('dark');
     } else {
       document.body.removeAttribute('theme-mode');
+      document.documentElement.classList.remove('dark');
     }
-    // 发送当前主题模式给子页面
+
     const iframe = document.querySelector('iframe');
     if (iframe) {
       iframe.contentWindow.postMessage({ themeMode: theme }, '*');
     }
 
-    if (isNewYear) {
-      console.log('Happy New Year!');
-    }
-  }, [theme]);
+  }, [theme, isNewYear]);
 
   useEffect(() => {
     const handleLanguageChanged = (lng) => {
@@ -215,279 +133,404 @@ const HeaderBar = () => {
     };
 
     i18n.on('languageChanged', handleLanguageChanged);
-
     return () => {
       i18n.off('languageChanged', handleLanguageChanged);
     };
   }, [i18n]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
   const handleLanguageChange = (lang) => {
     i18n.changeLanguage(lang);
+    setMobileMenuOpen(false);
   };
 
-  return (
-    <>
-      <Layout>
-        <div style={{ width: '100%' }}>
-          <Nav
-            className={'topnav'}
-            mode={'horizontal'}
-            style={headerStyle}
-            itemStyle={headerItemStyle}
-            hoverStyle={headerItemHoverStyle}
-            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {
-              const routerMap = {
-                about: '/about',
-                login: '/login',
-                register: '/register',
-                pricing: '/pricing',
-                detail: '/detail',
-                home: '/',
-                chat: '/chat',
-              };
-              return (
-                <div
-                  onClick={(e) => {
-                    if (props.itemKey === 'home') {
-                      styleDispatch({
-                        type: 'SET_INNER_PADDING',
-                        payload: false,
-                      });
-                      styleDispatch({ type: 'SET_SIDER', payload: false });
-                    } else {
-                      styleDispatch({
-                        type: 'SET_INNER_PADDING',
-                        payload: true,
-                      });
-                      if (!styleState.isMobile) {
-                        styleDispatch({ type: 'SET_SIDER', payload: true });
-                      }
-                    }
-                  }}
+  const handleNavLinkClick = (itemKey) => {
+    if (itemKey === 'home') {
+      styleDispatch(styleActions.setSider(false));
+    }
+    setMobileMenuOpen(false);
+  };
+
+  const renderNavLinks = (isMobileView = false, isLoading = false) => {
+    if (isLoading) {
+      const skeletonLinkClasses = isMobileView
+        ? 'flex items-center gap-1 p-3 w-full rounded-md'
+        : 'flex items-center gap-1 p-2 rounded-md';
+      return Array(4)
+        .fill(null)
+        .map((_, index) => (
+          <div key={index} className={skeletonLinkClasses}>
+            <Skeleton.Title style={{ width: isMobileView ? 100 : 60, height: 16 }} />
+          </div>
+        ));
+    }
+
+    return mainNavLinks.map((link) => {
+      const commonLinkClasses = isMobileView
+        ? 'flex items-center gap-1 p-3 w-full text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors font-semibold'
+        : 'flex items-center gap-1 p-2 text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors rounded-md font-semibold';
+
+      const linkContent = (
+        <span>{link.text}</span>
+      );
+
+      if (link.isExternal) {
+        return (
+          <a
+            key={link.itemKey}
+            href={link.externalLink}
+            target='_blank'
+            rel='noopener noreferrer'
+            className={commonLinkClasses}
+            onClick={() => handleNavLinkClick(link.itemKey)}
+          >
+            {linkContent}
+          </a>
+        );
+      }
+
+      let targetPath = link.to;
+      if (link.itemKey === 'console' && !userState.user) {
+        targetPath = '/login';
+      }
+
+      return (
+        <Link
+          key={link.itemKey}
+          to={targetPath}
+          className={commonLinkClasses}
+          onClick={() => handleNavLinkClick(link.itemKey)}
+        >
+          {linkContent}
+        </Link>
+      );
+    });
+  };
+
+  const renderUserArea = () => {
+    if (isLoading) {
+      return (
+        <div className="flex items-center p-1 rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1">
+          <Skeleton.Avatar size="extra-small" className="shadow-sm" />
+          <div className="ml-1.5 mr-1">
+            <Skeleton.Title style={{ width: styleState.isMobile ? 15 : 50, height: 12 }} />
+          </div>
+        </div>
+      );
+    }
+
+    if (userState.user) {
+      return (
+        <Dropdown
+          position="bottomRight"
+          render={
+            <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/personal');
+                  setMobileMenuOpen(false);
+                }}
+                className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              >
+                <div className="flex items-center gap-2">
+                  <IconUserSetting size="small" className="text-gray-500 dark:text-gray-400" />
+                  <span>{t('个人设置')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/token');
+                  setMobileMenuOpen(false);
+                }}
+                className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              >
+                <div className="flex items-center gap-2">
+                  <IconKey size="small" className="text-gray-500 dark:text-gray-400" />
+                  <span>{t('API令牌')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={() => {
+                  navigate('/console/topup');
+                  setMobileMenuOpen(false);
+                }}
+                className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              >
+                <div className="flex items-center gap-2">
+                  <IconCreditCard size="small" className="text-gray-500 dark:text-gray-400" />
+                  <span>{t('钱包')}</span>
+                </div>
+              </Dropdown.Item>
+              <Dropdown.Item onClick={logout} className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white">
+                <div className="flex items-center gap-2">
+                  <IconExit size="small" className="text-gray-500 dark:text-gray-400" />
+                  <span>{t('退出')}</span>
+                </div>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          }
+        >
+          <Button
+            theme="borderless"
+            type="tertiary"
+            className="flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
+          >
+            <Avatar
+              size="extra-small"
+              color={stringToColor(userState.user.username)}
+              className="mr-1"
+            >
+              {userState.user.username[0].toUpperCase()}
+            </Avatar>
+            <span className="hidden md:inline">
+              <Typography.Text className="!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1">
+                {userState.user.username}
+              </Typography.Text>
+            </span>
+            <IconChevronDown className="text-xs text-semi-color-text-2 dark:text-gray-400" />
+          </Button>
+        </Dropdown>
+      );
+    } else {
+      const showRegisterButton = !isSelfUseMode;
+
+      const commonSizingAndLayoutClass = "flex items-center justify-center !py-[10px] !px-1.5";
+
+      const loginButtonSpecificStyling = "!bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 transition-colors";
+      let loginButtonClasses = `${commonSizingAndLayoutClass} ${loginButtonSpecificStyling}`;
+
+      let registerButtonClasses = `${commonSizingAndLayoutClass}`;
+
+      const loginButtonTextSpanClass = "!text-xs !text-semi-color-text-1 dark:!text-gray-300 !p-1.5";
+      const registerButtonTextSpanClass = "!text-xs !text-white !p-1.5";
+
+      if (showRegisterButton) {
+        if (styleState.isMobile) {
+          loginButtonClasses += " !rounded-full";
+        } else {
+          loginButtonClasses += " !rounded-l-full !rounded-r-none";
+        }
+        registerButtonClasses += " !rounded-r-full !rounded-l-none";
+      } else {
+        loginButtonClasses += " !rounded-full";
+      }
+
+      return (
+        <div className="flex items-center">
+          <Link to="/login" onClick={() => handleNavLinkClick('login')} className="flex">
+            <Button
+              theme="borderless"
+              type="tertiary"
+              className={loginButtonClasses}
+            >
+              <span className={loginButtonTextSpanClass}>
+                {t('登录')}
+              </span>
+            </Button>
+          </Link>
+          {showRegisterButton && (
+            <div className="hidden md:block">
+              <Link to="/register" onClick={() => handleNavLinkClick('register')} className="flex -ml-px">
+                <Button
+                  theme="solid"
+                  type="primary"
+                  className={registerButtonClasses}
                 >
-                  {props.isExternal ? (
-                    <a
-                      className='header-bar-text'
-                      style={{ textDecoration: 'none' }}
-                      href={props.externalLink}
-                      target='_blank'
-                      rel='noopener noreferrer'
-                    >
-                      {itemElement}
-                    </a>
+                  <span className={registerButtonTextSpanClass}>
+                    {t('注册')}
+                  </span>
+                </Button>
+              </Link>
+            </div>
+          )}
+        </div>
+      );
+    }
+  };
+
+  // 检查当前路由是否以/console开头
+  const isConsoleRoute = location.pathname.startsWith('/console');
+
+  return (
+    <header className="text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg">
+      <NoticeModal
+        visible={noticeVisible}
+        onClose={() => setNoticeVisible(false)}
+        isMobile={styleState.isMobile}
+      />
+      <div className="w-full px-4">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <div className="md:hidden">
+              <Button
+                icon={
+                  isConsoleRoute
+                    ? (styleState.showSider ? <IconClose className="text-lg" /> : <IconMenu className="text-lg" />)
+                    : (mobileMenuOpen ? <IconClose className="text-lg" /> : <IconMenu className="text-lg" />)
+                }
+                aria-label={
+                  isConsoleRoute
+                    ? (styleState.showSider ? t('关闭侧边栏') : t('打开侧边栏'))
+                    : (mobileMenuOpen ? t('关闭菜单') : t('打开菜单'))
+                }
+                onClick={() => {
+                  if (isConsoleRoute) {
+                    // 控制侧边栏的显示/隐藏，无论是否移动设备
+                    styleDispatch(styleActions.toggleSider());
+                  } else {
+                    // 控制HeaderBar自己的移动菜单
+                    setMobileMenuOpen(!mobileMenuOpen);
+                  }
+                }}
+                theme="borderless"
+                type="tertiary"
+                className="!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700"
+              />
+            </div>
+            <Link to="/" onClick={() => handleNavLinkClick('home')} className="flex items-center gap-2 group ml-2">
+              {isLoading ? (
+                <Skeleton.Image className="h-7 md:h-8 !rounded-full" style={{ width: 32, height: 32 }} />
+              ) : (
+                <img src={logo} alt="logo" className="h-7 md:h-8 transition-transform duration-300 ease-in-out group-hover:scale-105 rounded-full" />
+              )}
+              <div className="hidden md:flex items-center gap-2">
+                <div className="flex items-center gap-2">
+                  {isLoading ? (
+                    <Skeleton.Title style={{ width: 120, height: 24 }} />
                   ) : (
-                    <Link
-                      className='header-bar-text'
-                      style={{ textDecoration: 'none' }}
-                      to={routerMap[props.itemKey]}
+                    <Typography.Title heading={4} className="!text-lg !font-semibold !mb-0 
+                                                          bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400
+                                                          bg-clip-text text-transparent">
+                      {systemName}
+                    </Typography.Title>
+                  )}
+                  {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
+                    <Tag
+                      color={isSelfUseMode ? 'purple' : 'blue'}
+                      className="text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm"
+                      size="small"
+                      shape='circle'
                     >
-                      {itemElement}
-                    </Link>
+                      {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                    </Tag>
                   )}
                 </div>
-              );
-            }}
-            selectedKeys={[]}
-            // items={headerButtons}
-            onSelect={(key) => {}}
-            header={
-              styleState.isMobile
-                ? {
-                    logo: (
-                      <div
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          position: 'relative',
-                        }}
-                      >
-                        {!styleState.showSider ? (
-                          <Button
-                            icon={<IconMenu />}
-                            theme='light'
-                            aria-label={t('展开侧边栏')}
-                            onClick={() =>
-                              styleDispatch({
-                                type: 'SET_SIDER',
-                                payload: true,
-                              })
-                            }
-                          />
-                        ) : (
-                          <Button
-                            icon={<IconIndentLeft />}
-                            theme='light'
-                            aria-label={t('闭侧边栏')}
-                            onClick={() =>
-                              styleDispatch({
-                                type: 'SET_SIDER',
-                                payload: false,
-                              })
-                            }
-                          />
-                        )}
-                        {(isSelfUseMode || isDemoSiteMode) && (
-                          <Tag
-                            color={isSelfUseMode ? 'purple' : 'blue'}
-                            style={{
-                              position: 'absolute',
-                              top: '-8px',
-                              right: '-15px',
-                              fontSize: '0.7rem',
-                              padding: '0 4px',
-                              height: 'auto',
-                              lineHeight: '1.2',
-                              zIndex: 1,
-                              pointerEvents: 'none',
-                            }}
-                          >
-                            {isSelfUseMode ? t('自用模式') : t('演示站点')}
-                          </Tag>
-                        )}
-                      </div>
-                    ),
-                  }
-                : {
-                    logo: (
-                      <div style={logoStyle}>
-                        <img src={logo} alt='logo' style={{ height: '28px' }} />
-                      </div>
-                    ),
-                    text: (
-                      <div
-                        style={{
-                          position: 'relative',
-                          display: 'inline-block',
-                        }}
-                      >
-                        <span style={systemNameStyle}>{systemName}</span>
-                        {(isSelfUseMode || isDemoSiteMode) && (
-                          <Tag
-                            color={isSelfUseMode ? 'purple' : 'blue'}
-                            style={{
-                              position: 'absolute',
-                              top: '-10px',
-                              right: '-25px',
-                              fontSize: '0.7rem',
-                              padding: '0 4px',
-                              whiteSpace: 'nowrap',
-                              zIndex: 1,
-                              boxShadow: '0 0 3px rgba(255, 255, 255, 0.7)',
-                            }}
-                          >
-                            {isSelfUseMode ? t('自用模式') : t('演示站点')}
-                          </Tag>
-                        )}
-                      </div>
-                    ),
-                  }
-            }
-            items={buttons}
-            footer={
-              <>
-                {isNewYear && (
-                  // happy new year
-                  <Dropdown
-                    position='bottomRight'
-                    render={
-                      <Dropdown.Menu style={dropdownStyle}>
-                        <Dropdown.Item onClick={handleNewYearClick}>
-                          Happy New Year!!!
-                        </Dropdown.Item>
-                      </Dropdown.Menu>
-                    }
-                  >
-                    <Nav.Item itemKey={'new-year'} text={'🎉'} />
-                  </Dropdown>
-                )}
-                {/* <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} /> */}
-                <>
-                  <Switch
-                    checkedText='🌞'
-                    size={styleState.isMobile ? 'default' : 'large'}
-                    checked={theme === 'dark'}
-                    uncheckedText='🌙'
-                    style={switchStyle}
-                    onChange={(checked) => {
-                      setTheme(checked);
-                    }}
-                  />
-                </>
-                <Dropdown
-                  position='bottomRight'
-                  render={
-                    <Dropdown.Menu style={dropdownStyle}>
-                      <Dropdown.Item
-                        onClick={() => handleLanguageChange('zh')}
-                        type={currentLang === 'zh' ? 'primary' : 'tertiary'}
-                      >
-                        中文
-                      </Dropdown.Item>
-                      <Dropdown.Item
-                        onClick={() => handleLanguageChange('en')}
-                        type={currentLang === 'en' ? 'primary' : 'tertiary'}
-                      >
-                        English
-                      </Dropdown.Item>
-                    </Dropdown.Menu>
-                  }
+              </div>
+            </Link>
+            {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
+              <div className="md:hidden">
+                <Tag
+                  color={isSelfUseMode ? 'purple' : 'blue'}
+                  className="ml-2 text-xs px-1 py-0.5 rounded whitespace-nowrap shadow-sm"
+                  size="small"
+                  shape='circle'
                 >
-                  <Nav.Item
-                    itemKey={'language'}
-                    icon={<IconLanguage style={headerIconStyle} />}
-                  />
-                </Dropdown>
-                {userState.user ? (
-                  <>
-                    <Dropdown
-                      position='bottomRight'
-                      render={
-                        <Dropdown.Menu style={dropdownStyle}>
-                          <Dropdown.Item onClick={logout}>
-                            {t('退出')}
-                          </Dropdown.Item>
-                        </Dropdown.Menu>
-                      }
-                    >
-                      <Avatar
-                        size='small'
-                        color={stringToColor(userState.user.username)}
-                        style={avatarStyle}
-                      >
-                        {userState.user.username[0]}
-                      </Avatar>
-                      {styleState.isMobile ? null : (
-                        <Text style={{ marginLeft: '4px', fontWeight: '500' }}>
-                          {userState.user.username}
-                        </Text>
-                      )}
-                    </Dropdown>
-                  </>
-                ) : (
-                  <>
-                    <Nav.Item
-                      itemKey={'login'}
-                      text={!styleState.isMobile ? t('登录') : null}
-                      icon={<IconUser style={headerIconStyle} />}
-                    />
-                    {
-                      // Hide register option in self-use mode
-                      !styleState.isMobile && !isSelfUseMode && (
-                        <Nav.Item
-                          itemKey={'register'}
-                          text={t('注册')}
-                          icon={<IconKey style={headerIconStyle} />}
-                        />
-                      )
-                    }
-                  </>
-                )}
-              </>
-            }
-          ></Nav>
+                  {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                </Tag>
+              </div>
+            )}
+
+            <nav className="hidden md:flex items-center gap-1 lg:gap-2 ml-6">
+              {renderNavLinks(false, isLoading)}
+            </nav>
+          </div>
+
+          <div className="flex items-center gap-2 md:gap-3">
+            {isNewYear && (
+              <Dropdown
+                position="bottomRight"
+                render={
+                  <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
+                    <Dropdown.Item onClick={handleNewYearClick} className="!text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-gray-600">
+                      Happy New Year!!! 🎉
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                }
+              >
+                <Button
+                  theme="borderless"
+                  type="tertiary"
+                  icon={<span className="text-xl">🎉</span>}
+                  aria-label="New Year"
+                  className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 rounded-full"
+                />
+              </Dropdown>
+            )}
+
+            <Button
+              icon={<IconBell className="text-lg" />}
+              aria-label={t('系统公告')}
+              onClick={() => setNoticeVisible(true)}
+              theme="borderless"
+              type="tertiary"
+              className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 hover:bg-semi-color-fill-1 dark:hover:bg-semi-color-fill-2"
+            />
+
+            <Button
+              icon={theme === 'dark' ? <IconSun size="large" className="text-yellow-500" /> : <IconMoon size="large" className="text-gray-300" />}
+              aria-label={t('切换主题')}
+              onClick={() => setTheme(theme === 'dark' ? false : true)}
+              theme="borderless"
+              type="tertiary"
+              className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 hover:bg-semi-color-fill-1 dark:hover:bg-semi-color-fill-2"
+            />
+
+            <Dropdown
+              position="bottomRight"
+              render={
+                <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
+                  <Dropdown.Item
+                    onClick={() => handleLanguageChange('zh')}
+                    className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'zh' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+                  >
+                    <CN title="中文" className="!w-5 !h-auto" />
+                    <span>中文</span>
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    onClick={() => handleLanguageChange('en')}
+                    className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'en' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
+                  >
+                    <GB title="English" className="!w-5 !h-auto" />
+                    <span>English</span>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              }
+            >
+              <Button
+                icon={<IconLanguage className="text-lg" />}
+                aria-label={t('切换语言')}
+                theme="borderless"
+                type="tertiary"
+                className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 hover:bg-semi-color-fill-1 dark:hover:bg-semi-color-fill-2"
+              />
+            </Dropdown>
+
+            {renderUserArea()}
+          </div>
         </div>
-      </Layout>
-    </>
+      </div>
+
+      <div className="md:hidden">
+        <div
+          className={`
+            absolute top-16 left-0 right-0 bg-semi-color-bg-0 
+            shadow-lg p-3
+            transform transition-all duration-300 ease-in-out
+            ${(!isConsoleRoute && mobileMenuOpen) ? 'translate-y-0 opacity-100 visible' : '-translate-y-4 opacity-0 invisible'}
+          `}
+        >
+          <nav className="flex flex-col gap-1">
+            {renderNavLinks(true, isLoading)}
+          </nav>
+        </div>
+      </div>
+    </header>
   );
 };
 

web/src/components/Loading.js

@@ -1,11 +1,23 @@
 import React from 'react';
 import { Spin } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+
+const Loading = ({ prompt: name = '', size = 'large' }) => {
+  const { t } = useTranslation();
 
-const Loading = ({ prompt: name = 'page' }) => {
   return (
-    <Spin style={{ height: 100 }} spinning={true}>
-      加载{name}中...
-    </Spin>
+    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
+      <div className="flex flex-col items-center">
+        <Spin
+          size={size}
+          spinning={true}
+          tip={null}
+        />
+        <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
+          {name ? t('加载{{name}}中...', { name }) : t('加载中...')}
+        </span>
+      </div>
+    </div>
   );
 };
 

web/src/components/LoginForm.js

@@ -8,6 +8,7 @@ import {
   showInfo,
   showSuccess,
   updateAPI,
+  getSystemName,
 } from '../helpers';
 import {
   onGitHubOAuthClicked,
@@ -21,19 +22,19 @@ import {
   Divider,
   Form,
   Icon,
-  Layout,
   Modal,
 } from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import TelegramLoginButton from 'react-telegram-login';
 
-import { IconGithubLogo, IconAlarm } from '@douyinfe/semi-icons';
-import OIDCIcon from './OIDCIcon.js';
-import WeChatIcon from './WeChatIcon';
+import { IconGithubLogo, IconMail, IconLock } from '@douyinfe/semi-icons';
+import OIDCIcon from './common/logo/OIDCIcon.js';
+import WeChatIcon from './common/logo/WeChatIcon.js';
 import { setUserData } from '../helpers/data.js';
-import LinuxDoIcon from './LinuxDoIcon.js';
+import LinuxDoIcon from './common/logo/LinuxDoIcon.js';
 import { useTranslation } from 'react-i18next';
+import Background from '../images/example.png';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -51,9 +52,20 @@ const LoginForm = () => {
   let navigate = useNavigate();
   const [status, setStatus] = useState({});
   const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+  const [showEmailLogin, setShowEmailLogin] = useState(false);
+  const [wechatLoading, setWechatLoading] = useState(false);
+  const [githubLoading, setGithubLoading] = useState(false);
+  const [oidcLoading, setOidcLoading] = useState(false);
+  const [linuxdoLoading, setLinuxdoLoading] = useState(false);
+  const [emailLoginLoading, setEmailLoginLoading] = useState(false);
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
+  const [otherLoginOptionsLoading, setOtherLoginOptionsLoading] = useState(false);
+  const [wechatCodeSubmitLoading, setWechatCodeSubmitLoading] = useState(false);
   const { t } = useTranslation();
 
   const logo = getLogo();
+  const systemName = getSystemName();
 
   let affCode = new URLSearchParams(window.location.search).get('aff');
   if (affCode) {
@@ -76,7 +88,9 @@ const LoginForm = () => {
   }, []);
 
   const onWeChatLoginClicked = () => {
+    setWechatLoading(true);
     setShowWeChatLoginModal(true);
+    setWechatLoading(false);
   };
 
   const onSubmitWeChatVerificationCode = async () => {
@@ -84,20 +98,27 @@ const LoginForm = () => {
       showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
       return;
     }
-    const res = await API.get(
-      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`,
-    );
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-      localStorage.setItem('user', JSON.stringify(data));
-      setUserData(data);
-      updateAPI();
-      navigate('/');
-      showSuccess('登录成功！');
-      setShowWeChatLoginModal(false);
-    } else {
-      showError(message);
+    setWechatCodeSubmitLoading(true);
+    try {
+      const res = await API.get(
+        `/api/oauth/wechat?code=${inputs.wechat_verification_code}`,
+      );
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        setUserData(data);
+        updateAPI();
+        navigate('/');
+        showSuccess('登录成功！');
+        setShowWeChatLoginModal(false);
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError('登录失败，请重试');
+    } finally {
+      setWechatCodeSubmitLoading(false);
     }
   };
 
@@ -111,33 +132,40 @@ const LoginForm = () => {
       return;
     }
     setSubmitted(true);
-    if (username && password) {
-      const res = await API.post(
-        `/api/user/login?turnstile=${turnstileToken}`,
-        {
-          username,
-          password,
-        },
-      );
-      const { success, message, data } = res.data;
-      if (success) {
-        userDispatch({ type: 'login', payload: data });
-        setUserData(data);
-        updateAPI();
-        showSuccess('登录成功！');
-        if (username === 'root' && password === '123456') {
-          Modal.error({
-            title: '您正在使用默认密码！',
-            content: '请立刻修改默认密码！',
-            centered: true,
-          });
+    setLoginLoading(true);
+    try {
+      if (username && password) {
+        const res = await API.post(
+          `/api/user/login?turnstile=${turnstileToken}`,
+          {
+            username,
+            password,
+          },
+        );
+        const { success, message, data } = res.data;
+        if (success) {
+          userDispatch({ type: 'login', payload: data });
+          setUserData(data);
+          updateAPI();
+          showSuccess('登录成功！');
+          if (username === 'root' && password === '123456') {
+            Modal.error({
+              title: '您正在使用默认密码！',
+              content: '请立刻修改默认密码！',
+              centered: true,
+            });
+          }
+          navigate('/console');
+        } else {
+          showError(message);
         }
-        navigate('/token');
       } else {
-        showError(message);
+        showError('请输入用户名和密码！');
       }
-    } else {
-      showError('请输入用户名和密码！');
+    } catch (error) {
+      showError('登录失败，请重试');
+    } finally {
+      setLoginLoading(false);
     }
   }
 
@@ -159,225 +187,342 @@ const LoginForm = () => {
         params[field] = response[field];
       }
     });
-    const res = await API.get(`/api/oauth/telegram/login`, { params });
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-      localStorage.setItem('user', JSON.stringify(data));
-      showSuccess('登录成功！');
-      setUserData(data);
-      updateAPI();
-      navigate('/');
-    } else {
-      showError(message);
+    try {
+      const res = await API.get(`/api/oauth/telegram/login`, { params });
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        setUserData(data);
+        updateAPI();
+        navigate('/');
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError('登录失败，请重试');
     }
   };
 
-  return (
-    <div>
-      <Layout>
-        <Layout.Header></Layout.Header>
-        <Layout.Content>
-          <div
-            style={{
-              justifyContent: 'center',
-              display: 'flex',
-              marginTop: 120,
-            }}
-          >
-            <div style={{ width: 500 }}>
-              <Card>
-                <Title heading={2} style={{ textAlign: 'center' }}>
-                  {t('用户登录')}
-                </Title>
-                <Form>
-                  <Form.Input
-                    field={'username'}
-                    label={t('用户名/邮箱')}
-                    placeholder={t('用户名/邮箱')}
-                    name='username'
-                    onChange={(value) => handleChange('username', value)}
-                  />
-                  <Form.Input
-                    field={'password'}
-                    label={t('密码')}
-                    placeholder={t('密码')}
-                    name='password'
-                    type='password'
-                    onChange={(value) => handleChange('password', value)}
-                  />
+  // 包装的GitHub登录点击处理
+  const handleGitHubClick = () => {
+    setGithubLoading(true);
+    try {
+      onGitHubOAuthClicked(status.github_client_id);
+    } finally {
+      // 由于重定向，这里不会执行到，但为了完整性添加
+      setTimeout(() => setGithubLoading(false), 3000);
+    }
+  };
+
+  // 包装的OIDC登录点击处理
+  const handleOIDCClick = () => {
+    setOidcLoading(true);
+    try {
+      onOIDCClicked(
+        status.oidc_authorization_endpoint,
+        status.oidc_client_id
+      );
+    } finally {
+      // 由于重定向，这里不会执行到，但为了完整性添加
+      setTimeout(() => setOidcLoading(false), 3000);
+    }
+  };
+
+  // 包装的LinuxDO登录点击处理
+  const handleLinuxDOClick = () => {
+    setLinuxdoLoading(true);
+    try {
+      onLinuxDOOAuthClicked(status.linuxdo_client_id);
+    } finally {
+      // 由于重定向，这里不会执行到，但为了完整性添加
+      setTimeout(() => setLinuxdoLoading(false), 3000);
+    }
+  };
+
+  // 包装的邮箱登录选项点击处理
+  const handleEmailLoginClick = () => {
+    setEmailLoginLoading(true);
+    setShowEmailLogin(true);
+    setEmailLoginLoading(false);
+  };
+
+  // 包装的重置密码点击处理
+  const handleResetPasswordClick = () => {
+    setResetPasswordLoading(true);
+    navigate('/reset');
+    setResetPasswordLoading(false);
+  };
+
+  // 包装的其他登录选项点击处理
+  const handleOtherLoginOptionsClick = () => {
+    setOtherLoginOptionsLoading(true);
+    setShowEmailLogin(false);
+    setOtherLoginOptionsLoading(false);
+  };
+
+  const renderOAuthOptions = () => {
+    return (
+      <div className="flex flex-col items-center">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center mb-6 gap-2">
+            <img src={logo} alt="Logo" className="h-10 rounded-full" />
+            <Title heading={3} className='!text-white'>{systemName}</Title>
+          </div>
+
+          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <div className="flex justify-center pt-6 pb-2">
+              <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('登 录')}</Title>
+            </div>
+            <div className="px-2 py-8">
+              <div className="space-y-3">
+                {status.wechat_login && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<Icon svg={<WeChatIcon />} style={{ color: '#07C160' }} />}
+                    size="large"
+                    onClick={onWeChatLoginClicked}
+                    loading={wechatLoading}
+                  >
+                    <span className="ml-3">{t('使用 微信 继续')}</span>
+                  </Button>
+                )}
+
+                {status.github_oauth && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<IconGithubLogo size="large" style={{ color: '#24292e' }} />}
+                    size="large"
+                    onClick={handleGitHubClick}
+                    loading={githubLoading}
+                  >
+                    <span className="ml-3">{t('使用 GitHub 继续')}</span>
+                  </Button>
+                )}
+
+                {status.oidc_enabled && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<OIDCIcon style={{ color: '#1877F2' }} />}
+                    size="large"
+                    onClick={handleOIDCClick}
+                    loading={oidcLoading}
+                  >
+                    <span className="ml-3">{t('使用 OIDC 继续')}</span>
+                  </Button>
+                )}
+
+                {status.linuxdo_oauth && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<LinuxDoIcon style={{ color: '#E95420', width: '20px', height: '20px' }} />}
+                    size="large"
+                    onClick={handleLinuxDOClick}
+                    loading={linuxdoLoading}
+                  >
+                    <span className="ml-3">{t('使用 LinuxDO 继续')}</span>
+                  </Button>
+                )}
+
+                {status.telegram_oauth && (
+                  <div className="flex justify-center my-2">
+                    <TelegramLoginButton
+                      dataOnauth={onTelegramLoginClicked}
+                      botName={status.telegram_bot_name}
+                    />
+                  </div>
+                )}
+
+                <Divider margin='12px' align='center'>
+                  {t('或')}
+                </Divider>
+
+                <Button
+                  theme="solid"
+                  type="primary"
+                  className="w-full h-12 flex items-center justify-center bg-black text-white !rounded-full hover:bg-gray-800 transition-colors"
+                  icon={<IconMail size="large" />}
+                  size="large"
+                  onClick={handleEmailLoginClick}
+                  loading={emailLoginLoading}
+                >
+                  <span className="ml-3">{t('使用 邮箱 登录')}</span>
+                </Button>
+              </div>
+
+              <div className="mt-6 text-center text-sm">
+                <Text>{t('没有账户？')} <Link to="/register" className="text-blue-600 hover:text-blue-800 font-medium">{t('注册')}</Link></Text>
+              </div>
+            </div>
+          </Card>
+
+          {turnstileEnabled && (
+            <div className="flex justify-center mt-6">
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderEmailLoginForm = () => {
+    return (
+      <div className="flex flex-col items-center">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center mb-6 gap-2">
+            <img src={logo} alt="Logo" className="h-10 rounded-full" />
+            <Title heading={3}>{systemName}</Title>
+          </div>
+
+          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <div className="flex justify-center pt-6 pb-2">
+              <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('登 录')}</Title>
+            </div>
+            <div className="px-2 py-8">
+              <Form className="space-y-3">
+                <Form.Input
+                  field="username"
+                  label={t('邮箱')}
+                  placeholder={t('请输入您的邮箱地址')}
+                  name="username"
+                  size="large"
+                  className="!rounded-md"
+                  onChange={(value) => handleChange('username', value)}
+                  prefix={<IconMail />}
+                />
+
+                <Form.Input
+                  field="password"
+                  label={t('密码')}
+                  placeholder={t('请输入您的密码')}
+                  name="password"
+                  mode="password"
+                  size="large"
+                  className="!rounded-md"
+                  onChange={(value) => handleChange('password', value)}
+                  prefix={<IconLock />}
+                />
+
+                <div className="space-y-2 pt-2">
+                  <Button
+                    theme="solid"
+                    className="w-full !rounded-full"
+                    type="primary"
+                    htmlType="submit"
+                    size="large"
+                    onClick={handleSubmit}
+                    loading={loginLoading}
+                  >
+                    {t('继续')}
+                  </Button>
 
                   <Button
-                    theme='solid'
-                    style={{ width: '100%' }}
-                    type={'primary'}
-                    size='large'
-                    htmlType={'submit'}
-                    onClick={handleSubmit}
+                    theme="borderless"
+                    type='tertiary'
+                    className="w-full !rounded-full"
+                    size="large"
+                    onClick={handleResetPasswordClick}
+                    loading={resetPasswordLoading}
                   >
-                    {t('登录')}
+                    {t('忘记密码？')}
                   </Button>
-                </Form>
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    marginTop: 20,
-                  }}
-                >
-                  <Text>
-                    {t('没有账户？')}{' '}
-                    <Link to='/register'>{t('点击注册')}</Link>
-                  </Text>
-                  <Text>
-                    {t('忘记密码？')} <Link to='/reset'>{t('点击重置')}</Link>
-                  </Text>
                 </div>
-                {status.github_oauth ||
-                status.oidc_enabled ||
-                status.wechat_login ||
-                status.telegram_oauth ||
-                status.linuxdo_oauth ? (
-                  <>
-                    <Divider margin='12px' align='center'>
-                      {t('第三方登录')}
-                    </Divider>
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                        marginTop: 20,
-                      }}
-                    >
-                      {status.github_oauth ? (
-                        <Button
-                          type='primary'
-                          icon={<IconGithubLogo />}
-                          onClick={() =>
-                            onGitHubOAuthClicked(status.github_client_id)
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.oidc_enabled ? (
-                        <Button
-                          type='primary'
-                          icon={<OIDCIcon />}
-                          onClick={() =>
-                            onOIDCClicked(
-                              status.oidc_authorization_endpoint,
-                              status.oidc_client_id,
-                            )
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.linuxdo_oauth ? (
-                        <Button
-                          icon={<LinuxDoIcon />}
-                          onClick={() =>
-                            onLinuxDOOAuthClicked(status.linuxdo_client_id)
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.wechat_login ? (
-                        <Button
-                          type='primary'
-                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
-                          icon={<Icon svg={<WeChatIcon />} />}
-                          onClick={onWeChatLoginClicked}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                    </div>
-                    {status.telegram_oauth ? (
-                      <>
-                        <div
-                          style={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            marginTop: 5,
-                          }}
-                        >
-                          <TelegramLoginButton
-                            dataOnauth={onTelegramLoginClicked}
-                            botName={status.telegram_bot_name}
-                          />
-                        </div>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-                  </>
-                ) : (
-                  <></>
-                )}
-                <Modal
-                  title={t('微信扫码登录')}
-                  visible={showWeChatLoginModal}
-                  maskClosable={true}
-                  onOk={onSubmitWeChatVerificationCode}
-                  onCancel={() => setShowWeChatLoginModal(false)}
-                  okText={t('登录')}
-                  size={'small'}
-                  centered={true}
+              </Form>
+
+              <Divider margin='12px' align='center'>
+                {t('或')}
+              </Divider>
+
+              <div className="mt-4 text-center">
+                <Button
+                  theme="outline"
+                  type="tertiary"
+                  className="w-full !rounded-full"
+                  size="large"
+                  onClick={handleOtherLoginOptionsClick}
+                  loading={otherLoginOptionsLoading}
                 >
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItem: 'center',
-                      flexDirection: 'column',
-                    }}
-                  >
-                    <img src={status.wechat_qrcode} />
-                  </div>
-                  <div style={{ textAlign: 'center' }}>
-                    <p>
-                      {t(
-                        '微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）',
-                      )}
-                    </p>
-                  </div>
-                  <Form size='large'>
-                    <Form.Input
-                      field={'wechat_verification_code'}
-                      placeholder={t('验证码')}
-                      label={t('验证码')}
-                      value={inputs.wechat_verification_code}
-                      onChange={(value) =>
-                        handleChange('wechat_verification_code', value)
-                      }
-                    />
-                  </Form>
-                </Modal>
-              </Card>
-              {turnstileEnabled ? (
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    marginTop: 20,
-                  }}
-                >
-                  <Turnstile
-                    sitekey={turnstileSiteKey}
-                    onVerify={(token) => {
-                      setTurnstileToken(token);
-                    }}
-                  />
-                </div>
-              ) : (
-                <></>
-              )}
+                  {t('其他登录选项')}
+                </Button>
+              </div>
             </div>
-          </div>
-        </Layout.Content>
-      </Layout>
+          </Card>
+        </div>
+      </div>
+    );
+  };
+
+  // 微信登录模态框
+  const renderWeChatLoginModal = () => {
+    return (
+      <Modal
+        title={t('微信扫码登录')}
+        visible={showWeChatLoginModal}
+        maskClosable={true}
+        onOk={onSubmitWeChatVerificationCode}
+        onCancel={() => setShowWeChatLoginModal(false)}
+        okText={t('登录')}
+        size="small"
+        centered={true}
+        okButtonProps={{
+          loading: wechatCodeSubmitLoading,
+        }}
+      >
+        <div className="flex flex-col items-center">
+          <img src={status.wechat_qrcode} alt="微信二维码" className="mb-4" />
+        </div>
+
+        <div className="text-center mb-4">
+          <p>{t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}</p>
+        </div>
+
+        <Form size="large">
+          <Form.Input
+            field="wechat_verification_code"
+            placeholder={t('验证码')}
+            label={t('验证码')}
+            value={inputs.wechat_verification_code}
+            onChange={(value) => handleChange('wechat_verification_code', value)}
+          />
+        </Form>
+      </Modal>
+    );
+  };
+
+  return (
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+      {/* 背景图片容器 - 放大并保持居中 */}
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
+        style={{
+          backgroundImage: `url(${Background})`
+        }}
+      ></div>
+
+      {/* 半透明遮罩层 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
+
+      <div className="w-full max-w-sm relative z-10">
+        {showEmailLogin || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
+          ? renderEmailLoginForm()
+          : renderOAuthOptions()}
+        {renderWeChatLoginModal()}
+      </div>
     </div>
   );
 };

web/src/components/LogsTable.js

@@ -14,8 +14,6 @@ import {
   Avatar,
   Button,
   Descriptions,
-  Form,
-  Layout,
   Modal,
   Popover,
   Select,
@@ -25,6 +23,11 @@ import {
   Tag,
   Tooltip,
   Checkbox,
+  Card,
+  Typography,
+  Divider,
+  Input,
+  DatePicker,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
 import {
@@ -42,10 +45,17 @@ import {
 } from '../helpers/render';
 import Paragraph from '@douyinfe/semi-ui/lib/es/typography/paragraph';
 import { getLogOther } from '../helpers/other.js';
-import { StyleContext } from '../context/Style/index.js';
-import { IconInherit, IconRefresh, IconSetting } from '@douyinfe/semi-icons';
+import {
+  IconRefresh,
+  IconSetting,
+  IconEyeOpened,
+  IconSearch,
+  IconCoinMoneyStroked,
+  IconPulse,
+  IconTypograph,
+} from '@douyinfe/semi-icons';
 
-const { Header } = Layout;
+const { Text } = Typography;
 
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
@@ -81,37 +91,37 @@ const LogsTable = () => {
     switch (type) {
       case 1:
         return (
-          <Tag color='cyan' size='large'>
+          <Tag color='cyan' size='large' shape='circle'>
             {t('充值')}
           </Tag>
         );
       case 2:
         return (
-          <Tag color='lime' size='large'>
+          <Tag color='lime' size='large' shape='circle'>
             {t('消费')}
           </Tag>
         );
       case 3:
         return (
-          <Tag color='orange' size='large'>
+          <Tag color='orange' size='large' shape='circle'>
             {t('管理')}
           </Tag>
         );
       case 4:
         return (
-          <Tag color='purple' size='large'>
+          <Tag color='purple' size='large' shape='circle'>
             {t('系统')}
           </Tag>
         );
       case 5:
         return (
-          <Tag color='red' size='large'>
+          <Tag color='red' size='large' shape='circle'>
             {t('错误')}
           </Tag>
         );
       default:
         return (
-          <Tag color='grey' size='large'>
+          <Tag color='grey' size='large' shape='circle'>
             {t('未知')}
           </Tag>
         );
@@ -121,13 +131,13 @@ const LogsTable = () => {
   function renderIsStream(bool) {
     if (bool) {
       return (
-        <Tag color='blue' size='large'>
+        <Tag color='blue' size='large' shape='circle'>
           {t('流')}
         </Tag>
       );
     } else {
       return (
-        <Tag color='purple' size='large'>
+        <Tag color='purple' size='large' shape='circle'>
           {t('非流')}
         </Tag>
       );
@@ -138,21 +148,21 @@ const LogsTable = () => {
     const time = parseInt(type);
     if (time < 101) {
       return (
-        <Tag color='green' size='large'>
+        <Tag color='green' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
       );
     } else if (time < 300) {
       return (
-        <Tag color='orange' size='large'>
+        <Tag color='orange' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
       );
     } else {
       return (
-        <Tag color='red' size='large'>
+        <Tag color='red' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
@@ -165,21 +175,21 @@ const LogsTable = () => {
     time = time.toFixed(1);
     if (time < 3) {
       return (
-        <Tag color='green' size='large'>
+        <Tag color='green' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
       );
     } else if (time < 10) {
       return (
-        <Tag color='orange' size='large'>
+        <Tag color='orange' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
       );
     } else {
       return (
-        <Tag color='red' size='large'>
+        <Tag color='red' size='large' shape='circle'>
           {' '}
           {time} s{' '}
         </Tag>
@@ -198,8 +208,9 @@ const LogsTable = () => {
         <Tag
           color={stringToColor(record.model_name)}
           size='large'
+          shape='circle'
           onClick={(event) => {
-            copyText(event, record.model_name).then((r) => {});
+            copyText(event, record.model_name).then((r) => { });
           }}
         >
           {' '}
@@ -217,8 +228,9 @@ const LogsTable = () => {
                     <Tag
                       color={stringToColor(record.model_name)}
                       size='large'
+                      shape='circle'
                       onClick={(event) => {
-                        copyText(event, record.model_name).then((r) => {});
+                        copyText(event, record.model_name).then((r) => { });
                       }}
                     >
                       {t('请求并计费模型')} {record.model_name}{' '}
@@ -226,9 +238,10 @@ const LogsTable = () => {
                     <Tag
                       color={stringToColor(other.upstream_model_name)}
                       size='large'
+                      shape='circle'
                       onClick={(event) => {
                         copyText(event, other.upstream_model_name).then(
-                          (r) => {},
+                          (r) => { },
                         );
                       }}
                     >
@@ -241,8 +254,9 @@ const LogsTable = () => {
               <Tag
                 color={stringToColor(record.model_name)}
                 size='large'
+                shape='circle'
                 onClick={(event) => {
-                  copyText(event, record.model_name).then((r) => {});
+                  copyText(event, record.model_name).then((r) => { });
                 }}
                 suffixIcon={
                   <IconRefresh
@@ -254,17 +268,6 @@ const LogsTable = () => {
                 {record.model_name}{' '}
               </Tag>
             </Popover>
-            {/*<Tooltip content={t('实际模型')}>*/}
-            {/*  <Tag*/}
-            {/*    color={stringToColor(other.upstream_model_name)}*/}
-            {/*    size='large'*/}
-            {/*    onClick={(event) => {*/}
-            {/*      copyText(event, other.upstream_model_name).then(r => {});*/}
-            {/*    }}*/}
-            {/*  >*/}
-            {/*    {' '}{other.upstream_model_name}{' '}*/}
-            {/*  </Tag>*/}
-            {/*</Tooltip>*/}
           </Space>
         </>
       );
@@ -371,11 +374,13 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TIME,
       title: t('时间'),
       dataIndex: 'timestamp2string',
+      width: 180,
     },
     {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel',
+      width: 80,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -386,6 +391,7 @@ const LogsTable = () => {
                   <Tag
                     color={colors[parseInt(text) % colors.length]}
                     size='large'
+                    shape='circle'
                   >
                     {' '}
                     {text}{' '}
@@ -405,6 +411,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
       dataIndex: 'username',
+      width: 150,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return isAdminUser ? (
@@ -431,12 +438,14 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TOKEN,
       title: t('令牌'),
       dataIndex: 'token_name',
+      width: 160,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <div>
             <Tag
               color='grey'
               size='large'
+              shape='circle'
               onClick={(event) => {
                 //cancel the row click event
                 copyText(event, text);
@@ -455,6 +464,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.GROUP,
       title: t('分组'),
       dataIndex: 'group',
+      width: 120,
       render: (text, record, index) => {
         if (record.type === 0 || record.type === 2 || record.type === 5) {
           if (record.group) {
@@ -487,6 +497,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
+      width: 100,
       render: (text, record, index) => {
         return <>{renderType(text)}</>;
       },
@@ -495,6 +506,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.MODEL,
       title: t('模型'),
       dataIndex: 'model_name',
+      width: 160,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{renderModelName(record)}</>
@@ -507,6 +519,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.USE_TIME,
       title: t('用时/首字'),
       dataIndex: 'use_time',
+      width: 160,
       render: (text, record, index) => {
         if (record.is_stream) {
           let other = getLogOther(record.other);
@@ -535,6 +548,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.PROMPT,
       title: t('提示'),
       dataIndex: 'prompt_tokens',
+      width: 100,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{<span> {text} </span>}</>
@@ -547,6 +561,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.COMPLETION,
       title: t('补全'),
       dataIndex: 'completion_tokens',
+      width: 100,
       render: (text, record, index) => {
         return parseInt(text) > 0 &&
           (record.type === 0 || record.type === 2 || record.type === 5) ? (
@@ -560,6 +575,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.COST,
       title: t('花费'),
       dataIndex: 'quota',
+      width: 120,
       render: (text, record, index) => {
         return record.type === 0 || record.type === 2 || record.type === 5 ? (
           <>{renderQuota(text, 6)}</>
@@ -572,6 +588,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.RETRY,
       title: t('重试'),
       dataIndex: 'retry',
+      width: 160,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         let content = t('渠道') + `：${record.channel}`;
@@ -600,6 +617,7 @@ const LogsTable = () => {
       key: COLUMN_KEYS.DETAILS,
       title: t('详情'),
       dataIndex: 'content',
+      width: 200,
       render: (text, record, index) => {
         let other = getLogOther(record.other);
         if (other == null || record.type !== 2) {
@@ -620,21 +638,21 @@ const LogsTable = () => {
         }
         let content = other?.claude
           ? renderClaudeModelPriceSimple(
-              other.model_ratio,
-              other.model_price,
-              other.group_ratio,
-              other.cache_tokens || 0,
-              other.cache_ratio || 1.0,
-              other.cache_creation_tokens || 0,
-              other.cache_creation_ratio || 1.0,
-            )
+            other.model_ratio,
+            other.model_price,
+            other.group_ratio,
+            other.cache_tokens || 0,
+            other.cache_ratio || 1.0,
+            other.cache_creation_tokens || 0,
+            other.cache_creation_ratio || 1.0,
+          )
           : renderModelPriceSimple(
-              other.model_ratio,
-              other.model_price,
-              other.group_ratio,
-              other.cache_tokens || 0,
-              other.cache_ratio || 1.0,
-            );
+            other.model_ratio,
+            other.model_price,
+            other.group_ratio,
+            other.cache_tokens || 0,
+            other.cache_ratio || 1.0,
+          );
         return (
           <Paragraph
             ellipsis={{
@@ -673,15 +691,29 @@ const LogsTable = () => {
         visible={showColumnSelector}
         onCancel={() => setShowColumnSelector(false)}
         footer={
-          <>
-            <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-            <Button onClick={() => setShowColumnSelector(false)}>
+          <div className="flex justify-end">
+            <Button
+              theme="light"
+              onClick={() => initDefaultColumns()}
+              className="!rounded-full"
+            >
+              {t('重置')}
+            </Button>
+            <Button
+              theme="light"
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
               {t('取消')}
             </Button>
-            <Button type='primary' onClick={() => setShowColumnSelector(false)}>
+            <Button
+              type='primary'
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
               {t('确定')}
             </Button>
-          </>
+          </div>
         }
       >
         <div style={{ marginBottom: 20 }}>
@@ -697,15 +729,8 @@ const LogsTable = () => {
           </Checkbox>
         </div>
         <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            maxHeight: '400px',
-            overflowY: 'auto',
-            border: '1px solid var(--semi-color-border)',
-            borderRadius: '6px',
-            padding: '16px',
-          }}
+          className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4"
+          style={{ border: '1px solid var(--semi-color-border)' }}
         >
           {allColumns.map((column) => {
             // Skip admin-only columns for non-admin users
@@ -721,7 +746,7 @@ const LogsTable = () => {
             return (
               <div
                 key={column.key}
-                style={{ width: '50%', marginBottom: 16, paddingRight: 8 }}
+                className="w-1/2 mb-4 pr-2"
               >
                 <Checkbox
                   checked={!!visibleColumns[column.key]}
@@ -739,7 +764,6 @@ const LogsTable = () => {
     );
   };
 
-  const [styleState, styleDispatch] = useContext(StyleContext);
   const [logs, setLogs] = useState([]);
   const [expandData, setExpandData] = useState({});
   const [showStat, setShowStat] = useState(false);
@@ -921,27 +945,27 @@ const LogsTable = () => {
           key: t('日志详情'),
           value: other?.claude
             ? renderClaudeLogContent(
-                other?.model_ratio,
-                other.completion_ratio,
-                other.model_price,
-                other.group_ratio,
-                other.cache_ratio || 1.0,
-                other.cache_creation_ratio || 1.0,
-              )
+              other?.model_ratio,
+              other.completion_ratio,
+              other.model_price,
+              other.group_ratio,
+              other.cache_ratio || 1.0,
+              other.cache_creation_ratio || 1.0,
+            )
             : renderLogContent(
-                other?.model_ratio,
-                other.completion_ratio,
-                other.model_price,
-                other.group_ratio,
-                other?.user_group_ratio,
-                false,
-                1.0,
-                undefined,
-                other.web_search || false,
-                other.web_search_call_count || 0,
-                other.file_search || false,
-                other.file_search_call_count || 0,
-              ),
+              other?.model_ratio,
+              other.completion_ratio,
+              other.model_price,
+              other.group_ratio,
+              other?.user_group_ratio,
+              false,
+              1.0,
+              undefined,
+              other.web_search || false,
+              other.web_search_call_count || 0,
+              other.file_search || false,
+              other.file_search_call_count || 0,
+            ),
         });
       }
       if (logs[i].type === 2) {
@@ -1056,7 +1080,7 @@ const LogsTable = () => {
 
   const handlePageChange = (page) => {
     setActivePage(page);
-    loadLogs(page, pageSize, logType).then((r) => {});
+    loadLogs(page, pageSize, logType).then((r) => { });
   };
 
   const handlePageSizeChange = async (size) => {
@@ -1104,86 +1128,63 @@ const LogsTable = () => {
   return (
     <>
       {renderColumnSelector()}
-      <Layout>
-        <Header>
-          <Spin spinning={loadingStat}>
-            <Space>
-              <Tag
-                color='blue'
-                size='large'
-                style={{
-                  padding: 15,
-                  borderRadius: '8px',
-                  fontWeight: 500,
-                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                }}
-              >
-                {t('消耗额度')}: {renderQuota(stat.quota)}
-              </Tag>
-              <Tag
-                color='pink'
-                size='large'
-                style={{
-                  padding: 15,
-                  borderRadius: '8px',
-                  fontWeight: 500,
-                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                }}
-              >
-                RPM: {stat.rpm}
-              </Tag>
-              <Tag
-                color='white'
-                size='large'
-                style={{
-                  padding: 15,
-                  border: 'none',
-                  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-                  borderRadius: '8px',
-                  fontWeight: 500,
-                }}
-              >
-                TPM: {stat.tpm}
-              </Tag>
-            </Space>
-          </Spin>
-        </Header>
-        <Form layout='horizontal' style={{ marginTop: 10 }}>
-          <>
-            <Form.Section>
-              <div style={{ marginBottom: 10 }}>
-                {styleState.isMobile ? (
-                  <div>
-                    <Form.DatePicker
-                      field='start_timestamp'
-                      label={t('起始时间')}
-                      style={{ width: 272 }}
-                      initValue={start_timestamp}
-                      type='dateTime'
-                      onChange={(value) => {
-                        console.log(value);
-                        handleInputChange(value, 'start_timestamp');
-                      }}
-                    />
-                    <Form.DatePicker
-                      field='end_timestamp'
-                      fluid
-                      label={t('结束时间')}
-                      style={{ width: 272 }}
-                      initValue={end_timestamp}
-                      type='dateTime'
-                      onChange={(value) =>
-                        handleInputChange(value, 'end_timestamp')
-                      }
-                    />
-                  </div>
-                ) : (
-                  <Form.DatePicker
-                    field='range_timestamp'
-                    label={t('时间范围')}
-                    initValue={[start_timestamp, end_timestamp]}
+      <Card
+        className="!rounded-2xl overflow-hidden mb-4"
+        title={
+          <div className="flex flex-col w-full">
+            <Spin spinning={loadingStat}>
+              <Space>
+                <Tag
+                  color='blue'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    borderRadius: '9999px',
+                    fontWeight: 500,
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  }}
+                >
+                  {t('消耗额度')}: {renderQuota(stat.quota)}
+                </Tag>
+                <Tag
+                  color='pink'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    borderRadius: '9999px',
+                    fontWeight: 500,
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                  }}
+                >
+                  RPM: {stat.rpm}
+                </Tag>
+                <Tag
+                  color='white'
+                  size='large'
+                  style={{
+                    padding: 15,
+                    border: 'none',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    borderRadius: '9999px',
+                    fontWeight: 500,
+                  }}
+                >
+                  TPM: {stat.tpm}
+                </Tag>
+              </Space>
+            </Spin>
+
+            <Divider margin="12px" />
+
+            {/* 搜索表单区域 */}
+            <div className="flex flex-col gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {/* 时间选择器 */}
+                <div className="col-span-1 lg:col-span-2">
+                  <DatePicker
+                    className="w-full"
+                    value={[start_timestamp, end_timestamp]}
                     type='dateTimeRange'
-                    name='range_timestamp'
                     onChange={(value) => {
                       if (Array.isArray(value) && value.length === 2) {
                         handleInputChange(value[0], 'start_timestamp');
@@ -1191,100 +1192,113 @@ const LogsTable = () => {
                       }
                     }}
                   />
+                </div>
+
+                {/* 日志类型选择器 */}
+                <Select
+                  value={logType.toString()}
+                  placeholder={t('日志类型')}
+                  className="!rounded-full"
+                  onChange={(value) => {
+                    setLogType(parseInt(value));
+                    loadLogs(0, pageSize, parseInt(value));
+                  }}
+                >
+                  <Select.Option value='0'>{t('全部')}</Select.Option>
+                  <Select.Option value='1'>{t('充值')}</Select.Option>
+                  <Select.Option value='2'>{t('消费')}</Select.Option>
+                  <Select.Option value='3'>{t('管理')}</Select.Option>
+                  <Select.Option value='4'>{t('系统')}</Select.Option>
+                  <Select.Option value='5'>{t('错误')}</Select.Option>
+                </Select>
+
+                {/* 其他搜索字段 */}
+                <Input
+                  prefix={<IconSearch />}
+                  placeholder={t('令牌名称')}
+                  value={token_name}
+                  onChange={(value) => handleInputChange(value, 'token_name')}
+                  className="!rounded-full"
+                  showClear
+                />
+
+                <Input
+                  prefix={<IconSearch />}
+                  placeholder={t('模型名称')}
+                  value={model_name}
+                  onChange={(value) => handleInputChange(value, 'model_name')}
+                  className="!rounded-full"
+                  showClear
+                />
+
+                <Input
+                  prefix={<IconSearch />}
+                  placeholder={t('分组')}
+                  value={group}
+                  onChange={(value) => handleInputChange(value, 'group')}
+                  className="!rounded-full"
+                  showClear
+                />
+
+                {isAdminUser && (
+                  <>
+                    <Input
+                      prefix={<IconSearch />}
+                      placeholder={t('渠道 ID')}
+                      value={channel}
+                      onChange={(value) => handleInputChange(value, 'channel')}
+                      className="!rounded-full"
+                      showClear
+                    />
+                    <Input
+                      prefix={<IconSearch />}
+                      placeholder={t('用户名称')}
+                      value={username}
+                      onChange={(value) => handleInputChange(value, 'username')}
+                      className="!rounded-full"
+                      showClear
+                    />
+                  </>
                 )}
               </div>
-            </Form.Section>
-            <Form.Input
-              field='token_name'
-              label={t('令牌名称')}
-              value={token_name}
-              placeholder={t('可选值')}
-              name='token_name'
-              onChange={(value) => handleInputChange(value, 'token_name')}
-            />
-            <Form.Input
-              field='model_name'
-              label={t('模型名称')}
-              value={model_name}
-              placeholder={t('可选值')}
-              name='model_name'
-              onChange={(value) => handleInputChange(value, 'model_name')}
-            />
-            <Form.Input
-              field='group'
-              label={t('分组')}
-              value={group}
-              placeholder={t('可选值')}
-              name='group'
-              onChange={(value) => handleInputChange(value, 'group')}
-            />
-            {isAdminUser && (
-              <>
-                <Form.Input
-                  field='channel'
-                  label={t('渠道 ID')}
-                  value={channel}
-                  placeholder={t('可选值')}
-                  name='channel'
-                  onChange={(value) => handleInputChange(value, 'channel')}
-                />
-                <Form.Input
-                  field='username'
-                  label={t('用户名称')}
-                  value={username}
-                  placeholder={t('可选值')}
-                  name='username'
-                  onChange={(value) => handleInputChange(value, 'username')}
-                />
-              </>
-            )}
-            <Button
-              label={t('查询')}
-              type='primary'
-              htmlType='submit'
-              className='btn-margin-right'
-              onClick={refresh}
-              loading={loading}
-              style={{ marginTop: 24 }}
-            >
-              {t('查询')}
-            </Button>
-            <Form.Section></Form.Section>
-          </>
-        </Form>
-        <div style={{ marginTop: 10 }}>
-          <Select
-            defaultValue='0'
-            style={{ width: 120 }}
-            onChange={(value) => {
-              setLogType(parseInt(value));
-              loadLogs(0, pageSize, parseInt(value));
-            }}
-          >
-            <Select.Option value='0'>{t('全部')}</Select.Option>
-            <Select.Option value='1'>{t('充值')}</Select.Option>
-            <Select.Option value='2'>{t('消费')}</Select.Option>
-            <Select.Option value='3'>{t('管理')}</Select.Option>
-            <Select.Option value='4'>{t('系统')}</Select.Option>
-            <Select.Option value='5'>{t('错误')}</Select.Option>
-          </Select>
-          <Button
-            theme='light'
-            type='tertiary'
-            icon={<IconSetting />}
-            onClick={() => setShowColumnSelector(true)}
-            style={{ marginLeft: 8 }}
-          >
-            {t('列设置')}
-          </Button>
-        </div>
+
+              {/* 操作按钮区域 */}
+              <div className="flex justify-between items-center pt-2">
+                <div></div>
+                <div className="flex gap-2">
+                  <Button
+                    type='primary'
+                    onClick={refresh}
+                    loading={loading}
+                    className="!rounded-full"
+                  >
+                    {t('查询')}
+                  </Button>
+                  <Button
+                    theme='light'
+                    type='tertiary'
+                    icon={<IconSetting />}
+                    onClick={() => setShowColumnSelector(true)}
+                    className="!rounded-full"
+                  >
+                    {t('列设置')}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        shadows='hover'
+      >
         <Table
-          style={{ marginTop: 5 }}
           columns={getVisibleColumns()}
           expandedRowRender={expandRowRender}
           expandRowByClick={true}
           dataSource={logs}
           rowKey='key'
+          loading={loading}
+          className="rounded-xl overflow-hidden"
+          size="middle"
           pagination={{
             formatPageText: (page) =>
               t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
@@ -1295,7 +1309,7 @@ const LogsTable = () => {
             currentPage: activePage,
             pageSize: pageSize,
             total: logCount,
-            pageSizeOpts: [10, 20, 50, 100],
+            pageSizeOptions: [10, 20, 50, 100],
             showSizeChanger: true,
             onPageSizeChange: (size) => {
               handlePageSizeChange(size);
@@ -1303,7 +1317,7 @@ const LogsTable = () => {
             onPageChange: handlePageChange,
           }}
         />
-      </Layout>
+      </Card>
     </>
   );
 };

web/src/components/MjLogsTable.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   API,
   copy,
@@ -9,19 +10,29 @@ import {
 } from '../helpers';
 
 import {
-  Banner,
   Button,
-  Form,
+  Card,
+  Checkbox,
+  DatePicker,
+  Divider,
   ImagePreview,
+  Input,
   Layout,
   Modal,
   Progress,
+  Skeleton,
   Table,
   Tag,
   Typography,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
-import { useTranslation } from 'react-i18next';
+import {
+  IconEyeOpened,
+  IconSearch,
+  IconSetting,
+} from '@douyinfe/semi-icons';
+
+const { Text } = Typography;
 
 const colors = [
   'amber',
@@ -41,111 +52,205 @@ const colors = [
   'yellow',
 ];
 
+// 定义列键值常量
+const COLUMN_KEYS = {
+  SUBMIT_TIME: 'submit_time',
+  DURATION: 'duration',
+  CHANNEL: 'channel',
+  TYPE: 'type',
+  TASK_ID: 'task_id',
+  SUBMIT_RESULT: 'submit_result',
+  TASK_STATUS: 'task_status',
+  PROGRESS: 'progress',
+  IMAGE: 'image',
+  PROMPT: 'prompt',
+  PROMPT_EN: 'prompt_en',
+  FAIL_REASON: 'fail_reason',
+};
+
 const LogsTable = () => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
+
+  // 列可见性状态
+  const [visibleColumns, setVisibleColumns] = useState({});
+  const [showColumnSelector, setShowColumnSelector] = useState(false);
+  const isAdminUser = isAdmin();
+
+  // 加载保存的列偏好设置
+  useEffect(() => {
+    const savedColumns = localStorage.getItem('mj-logs-table-columns');
+    if (savedColumns) {
+      try {
+        const parsed = JSON.parse(savedColumns);
+        const defaults = getDefaultColumnVisibility();
+        const merged = { ...defaults, ...parsed };
+        setVisibleColumns(merged);
+      } catch (e) {
+        console.error('Failed to parse saved column preferences', e);
+        initDefaultColumns();
+      }
+    } else {
+      initDefaultColumns();
+    }
+  }, []);
+
+  // 获取默认列可见性
+  const getDefaultColumnVisibility = () => {
+    return {
+      [COLUMN_KEYS.SUBMIT_TIME]: true,
+      [COLUMN_KEYS.DURATION]: true,
+      [COLUMN_KEYS.CHANNEL]: isAdminUser,
+      [COLUMN_KEYS.TYPE]: true,
+      [COLUMN_KEYS.TASK_ID]: true,
+      [COLUMN_KEYS.SUBMIT_RESULT]: isAdminUser,
+      [COLUMN_KEYS.TASK_STATUS]: true,
+      [COLUMN_KEYS.PROGRESS]: true,
+      [COLUMN_KEYS.IMAGE]: true,
+      [COLUMN_KEYS.PROMPT]: true,
+      [COLUMN_KEYS.PROMPT_EN]: true,
+      [COLUMN_KEYS.FAIL_REASON]: true,
+    };
+  };
+
+  // 初始化默认列可见性
+  const initDefaultColumns = () => {
+    const defaults = getDefaultColumnVisibility();
+    setVisibleColumns(defaults);
+    localStorage.setItem('mj-logs-table-columns', JSON.stringify(defaults));
+  };
+
+  // 处理列可见性变化
+  const handleColumnVisibilityChange = (columnKey, checked) => {
+    const updatedColumns = { ...visibleColumns, [columnKey]: checked };
+    setVisibleColumns(updatedColumns);
+  };
+
+  // 处理全选
+  const handleSelectAll = (checked) => {
+    const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]);
+    const updatedColumns = {};
+
+    allKeys.forEach((key) => {
+      if ((key === COLUMN_KEYS.CHANNEL || key === COLUMN_KEYS.SUBMIT_RESULT) && !isAdminUser) {
+        updatedColumns[key] = false;
+      } else {
+        updatedColumns[key] = checked;
+      }
+    });
+
+    setVisibleColumns(updatedColumns);
+  };
+
+  // 更新表格时保存列可见性
+  useEffect(() => {
+    if (Object.keys(visibleColumns).length > 0) {
+      localStorage.setItem('mj-logs-table-columns', JSON.stringify(visibleColumns));
+    }
+  }, [visibleColumns]);
+
   function renderType(type) {
     switch (type) {
       case 'IMAGINE':
         return (
-          <Tag color='blue' size='large'>
+          <Tag color='blue' size='large' shape='circle'>
             {t('绘图')}
           </Tag>
         );
       case 'UPSCALE':
         return (
-          <Tag color='orange' size='large'>
+          <Tag color='orange' size='large' shape='circle'>
             {t('放大')}
           </Tag>
         );
       case 'VARIATION':
         return (
-          <Tag color='purple' size='large'>
+          <Tag color='purple' size='large' shape='circle'>
             {t('变换')}
           </Tag>
         );
       case 'HIGH_VARIATION':
         return (
-          <Tag color='purple' size='large'>
+          <Tag color='purple' size='large' shape='circle'>
             {t('强变换')}
           </Tag>
         );
       case 'LOW_VARIATION':
         return (
-          <Tag color='purple' size='large'>
+          <Tag color='purple' size='large' shape='circle'>
             {t('弱变换')}
           </Tag>
         );
       case 'PAN':
         return (
-          <Tag color='cyan' size='large'>
+          <Tag color='cyan' size='large' shape='circle'>
             {t('平移')}
           </Tag>
         );
       case 'DESCRIBE':
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('图生文')}
           </Tag>
         );
       case 'BLEND':
         return (
-          <Tag color='lime' size='large'>
+          <Tag color='lime' size='large' shape='circle'>
             {t('图混合')}
           </Tag>
         );
       case 'UPLOAD':
         return (
-          <Tag color='blue' size='large'>
+          <Tag color='blue' size='large' shape='circle'>
             上传文件
           </Tag>
         );
       case 'SHORTEN':
         return (
-          <Tag color='pink' size='large'>
+          <Tag color='pink' size='large' shape='circle'>
             {t('缩词')}
           </Tag>
         );
       case 'REROLL':
         return (
-          <Tag color='indigo' size='large'>
+          <Tag color='indigo' size='large' shape='circle'>
             {t('重绘')}
           </Tag>
         );
       case 'INPAINT':
         return (
-          <Tag color='violet' size='large'>
+          <Tag color='violet' size='large' shape='circle'>
             {t('局部重绘-提交')}
           </Tag>
         );
       case 'ZOOM':
         return (
-          <Tag color='teal' size='large'>
+          <Tag color='teal' size='large' shape='circle'>
             {t('变焦')}
           </Tag>
         );
       case 'CUSTOM_ZOOM':
         return (
-          <Tag color='teal' size='large'>
+          <Tag color='teal' size='large' shape='circle'>
             {t('自定义变焦-提交')}
           </Tag>
         );
       case 'MODAL':
         return (
-          <Tag color='green' size='large'>
+          <Tag color='green' size='large' shape='circle'>
             {t('窗口处理')}
           </Tag>
         );
       case 'SWAP_FACE':
         return (
-          <Tag color='light-green' size='large'>
+          <Tag color='light-green' size='large' shape='circle'>
             {t('换脸')}
           </Tag>
         );
       default:
         return (
-          <Tag color='white' size='large'>
+          <Tag color='white' size='large' shape='circle'>
             {t('未知')}
           </Tag>
         );
@@ -156,31 +261,31 @@ const LogsTable = () => {
     switch (code) {
       case 1:
         return (
-          <Tag color='green' size='large'>
+          <Tag color='green' size='large' shape='circle'>
             {t('已提交')}
           </Tag>
         );
       case 21:
         return (
-          <Tag color='lime' size='large'>
+          <Tag color='lime' size='large' shape='circle'>
             {t('等待中')}
           </Tag>
         );
       case 22:
         return (
-          <Tag color='orange' size='large'>
+          <Tag color='orange' size='large' shape='circle'>
             {t('重复提交')}
           </Tag>
         );
       case 0:
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('未提交')}
           </Tag>
         );
       default:
         return (
-          <Tag color='white' size='large'>
+          <Tag color='white' size='large' shape='circle'>
             {t('未知')}
           </Tag>
         );
@@ -191,43 +296,43 @@ const LogsTable = () => {
     switch (type) {
       case 'SUCCESS':
         return (
-          <Tag color='green' size='large'>
+          <Tag color='green' size='large' shape='circle'>
             {t('成功')}
           </Tag>
         );
       case 'NOT_START':
         return (
-          <Tag color='grey' size='large'>
+          <Tag color='grey' size='large' shape='circle'>
             {t('未启动')}
           </Tag>
         );
       case 'SUBMITTED':
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('队列中')}
           </Tag>
         );
       case 'IN_PROGRESS':
         return (
-          <Tag color='blue' size='large'>
+          <Tag color='blue' size='large' shape='circle'>
             {t('执行中')}
           </Tag>
         );
       case 'FAILURE':
         return (
-          <Tag color='red' size='large'>
+          <Tag color='red' size='large' shape='circle'>
             {t('失败')}
           </Tag>
         );
       case 'MODAL':
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('窗口等待')}
           </Tag>
         );
       default:
         return (
-          <Tag color='white' size='large'>
+          <Tag color='white' size='large' shape='circle'>
             {t('未知')}
           </Tag>
         );
@@ -257,87 +362,105 @@ const LogsTable = () => {
     const color = durationSec > 60 ? 'red' : 'green';
 
     return (
-      <Tag color={color} size='large'>
+      <Tag color={color} size='large' shape='circle'>
         {durationSec} {t('秒')}
       </Tag>
     );
   }
-  const columns = [
+
+  // 定义所有列
+  const allColumns = [
     {
+      key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text / 1000)}</div>;
       },
     },
     {
+      key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
-      dataIndex: 'finish_time', // 以finish_time作为dataIndex
-      key: 'finish_time',
+      dataIndex: 'finish_time',
+      width: 120,
       render: (finish, record) => {
-        // 假设record.start_time是存在的，并且finish是完成时间的时间戳
         return renderDuration(record.submit_time, finish);
       },
     },
     {
+      key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
+      width: 100,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
-        return (
+        return isAdminUser ? (
           <div>
             <Tag
               color={colors[parseInt(text) % colors.length]}
               size='large'
+              shape='circle'
               onClick={() => {
-                copyText(text); // 假设copyText是用于文本复制的函数
+                copyText(text);
               }}
             >
               {' '}
               {text}{' '}
             </Tag>
           </div>
+        ) : (
+          <></>
         );
       },
     },
     {
+      key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
     },
     {
+      key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'mj_id',
+      width: 200,
       render: (text, record, index) => {
         return <div>{text}</div>;
       },
     },
     {
+      key: COLUMN_KEYS.SUBMIT_RESULT,
       title: t('提交结果'),
       dataIndex: 'code',
+      width: 120,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
-        return <div>{renderCode(text)}</div>;
+        return isAdminUser ? <div>{renderCode(text)}</div> : <></>;
       },
     },
     {
+      key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
+      width: 120,
       className: isAdmin() ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
     },
     {
+      key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
+      width: 160,
       render: (text, record, index) => {
         return (
           <div>
             {
-              // 转换例如100%为数字100，如果text未定义，返回0
               <Progress
                 stroke={
                   record.status === 'FAILURE'
@@ -354,8 +477,10 @@ const LogsTable = () => {
       },
     },
     {
+      key: COLUMN_KEYS.IMAGE,
       title: t('结果图片'),
       dataIndex: 'image_url',
+      width: 120,
       render: (text, record, index) => {
         if (!text) {
           return t('无');
@@ -363,8 +488,8 @@ const LogsTable = () => {
         return (
           <Button
             onClick={() => {
-              setModalImageUrl(text); // 更新图片URL状态
-              setIsModalOpenurl(true); // 打开模态框
+              setModalImageUrl(text);
+              setIsModalOpenurl(true);
             }}
           >
             {t('查看图片')}
@@ -373,10 +498,11 @@ const LogsTable = () => {
       },
     },
     {
+      key: COLUMN_KEYS.PROMPT,
       title: 'Prompt',
       dataIndex: 'prompt',
+      width: 200,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
@@ -396,10 +522,11 @@ const LogsTable = () => {
       },
     },
     {
+      key: COLUMN_KEYS.PROMPT_EN,
       title: 'PromptEn',
       dataIndex: 'prompt_en',
+      width: 200,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
@@ -419,10 +546,11 @@ const LogsTable = () => {
       },
     },
     {
+      key: COLUMN_KEYS.FAIL_REASON,
       title: t('失败原因'),
       dataIndex: 'fail_reason',
+      width: 160,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
           return t('无');
         }
@@ -443,12 +571,17 @@ const LogsTable = () => {
     },
   ];
 
+  // 根据可见性设置过滤列
+  const getVisibleColumns = () => {
+    return allColumns.filter((column) => visibleColumns[column.key]);
+  };
+
   const [logs, setLogs] = useState([]);
   const [loading, setLoading] = useState(true);
   const [activePage, setActivePage] = useState(1);
   const [logCount, setLogCount] = useState(ITEMS_PER_PAGE);
   const [logType, setLogType] = useState(0);
-  const isAdminUser = isAdmin();
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
   const [isModalOpenurl, setIsModalOpenurl] = useState(false);
   const [showBanner, setShowBanner] = useState(false);
 
@@ -480,20 +613,20 @@ const LogsTable = () => {
     }
     // data.key = '' + data.id
     setLogs(logs);
-    setLogCount(logs.length + ITEMS_PER_PAGE);
+    setLogCount(logs.length + pageSize);
     // console.log(logCount);
   };
 
-  const loadLogs = async (startIdx) => {
+  const loadLogs = async (startIdx, pageSize = ITEMS_PER_PAGE) => {
     setLoading(true);
 
     let url = '';
     let localStartTimestamp = Date.parse(start_timestamp);
     let localEndTimestamp = Date.parse(end_timestamp);
     if (isAdminUser) {
-      url = `/api/mj/?p=${startIdx}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+      url = `/api/mj/?p=${startIdx}&page_size=${pageSize}&channel_id=${channel_id}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     } else {
-      url = `/api/mj/self/?p=${startIdx}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+      url = `/api/mj/self/?p=${startIdx}&page_size=${pageSize}&mj_id=${mj_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     }
     const res = await API.get(url);
     const { success, message, data } = res.data;
@@ -502,7 +635,7 @@ const LogsTable = () => {
         setLogsFormat(data);
       } else {
         let newLogs = [...logs];
-        newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+        newLogs.splice(startIdx * pageSize, data.length, ...data);
         setLogsFormat(newLogs);
       }
     } else {
@@ -512,35 +645,44 @@ const LogsTable = () => {
   };
 
   const pageData = logs.slice(
-    (activePage - 1) * ITEMS_PER_PAGE,
-    activePage * ITEMS_PER_PAGE,
+    (activePage - 1) * pageSize,
+    activePage * pageSize,
   );
 
   const handlePageChange = (page) => {
     setActivePage(page);
-    if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
+    if (page === Math.ceil(logs.length / pageSize) + 1) {
       // In this case we have to load more data and then append them.
-      loadLogs(page - 1).then((r) => {});
+      loadLogs(page - 1, pageSize).then((r) => { });
     }
   };
 
+  const handlePageSizeChange = async (size) => {
+    localStorage.setItem('mj-page-size', size + '');
+    setPageSize(size);
+    setActivePage(1);
+    await loadLogs(0, size);
+  };
+
   const refresh = async () => {
     // setLoading(true);
     setActivePage(1);
-    await loadLogs(0);
+    await loadLogs(0, pageSize);
   };
 
   const copyText = async (text) => {
     if (await copy(text)) {
-      showSuccess('已复制：' + text);
+      showSuccess(t('已复制：') + text);
     } else {
       // setSearchKeyword(text);
-      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
     }
   };
 
   useEffect(() => {
-    refresh().then();
+    const localPageSize = parseInt(localStorage.getItem('mj-page-size')) || ITEMS_PER_PAGE;
+    setPageSize(localPageSize);
+    loadLogs(0, localPageSize).then();
   }, [logType]);
 
   useEffect(() => {
@@ -550,93 +692,207 @@ const LogsTable = () => {
     }
   }, []);
 
+  // 列选择器模态框
+  const renderColumnSelector = () => {
+    return (
+      <Modal
+        title={t('列设置')}
+        visible={showColumnSelector}
+        onCancel={() => setShowColumnSelector(false)}
+        footer={
+          <div className="flex justify-end">
+            <Button
+              theme="light"
+              onClick={() => initDefaultColumns()}
+              className="!rounded-full"
+            >
+              {t('重置')}
+            </Button>
+            <Button
+              theme="light"
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
+              {t('取消')}
+            </Button>
+            <Button
+              type='primary'
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
+              {t('确定')}
+            </Button>
+          </div>
+        }
+      >
+        <div style={{ marginBottom: 20 }}>
+          <Checkbox
+            checked={Object.values(visibleColumns).every((v) => v === true)}
+            indeterminate={
+              Object.values(visibleColumns).some((v) => v === true) &&
+              !Object.values(visibleColumns).every((v) => v === true)
+            }
+            onChange={(e) => handleSelectAll(e.target.checked)}
+          >
+            {t('全选')}
+          </Checkbox>
+        </div>
+        <div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4" style={{ border: '1px solid var(--semi-color-border)' }}>
+          {allColumns.map((column) => {
+            // 为非管理员用户跳过管理员专用列
+            if (
+              !isAdminUser &&
+              (column.key === COLUMN_KEYS.CHANNEL ||
+                column.key === COLUMN_KEYS.SUBMIT_RESULT)
+            ) {
+              return null;
+            }
+
+            return (
+              <div key={column.key} className="w-1/2 mb-4 pr-2">
+                <Checkbox
+                  checked={!!visibleColumns[column.key]}
+                  onChange={(e) =>
+                    handleColumnVisibilityChange(column.key, e.target.checked)
+                  }
+                >
+                  {column.title}
+                </Checkbox>
+              </div>
+            );
+          })}
+        </div>
+      </Modal>
+    );
+  };
+
   return (
     <>
+      {renderColumnSelector()}
       <Layout>
-        {isAdminUser && showBanner ? (
-          <Banner
-            type='info'
-            description={t(
-              '当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。',
-            )}
-          />
-        ) : (
-          <></>
-        )}
-        <Form layout='horizontal' style={{ marginTop: 10 }}>
-          <>
-            <Form.Input
-              field='channel_id'
-              label={t('渠道 ID')}
-              style={{ width: 176 }}
-              value={channel_id}
-              placeholder={t('可选值')}
-              name='channel_id'
-              onChange={(value) => handleInputChange(value, 'channel_id')}
-            />
-            <Form.Input
-              field='mj_id'
-              label={t('任务 ID')}
-              style={{ width: 176 }}
-              value={mj_id}
-              placeholder={t('可选值')}
-              name='mj_id'
-              onChange={(value) => handleInputChange(value, 'mj_id')}
-            />
-            <Form.DatePicker
-              field='start_timestamp'
-              label={t('起始时间')}
-              style={{ width: 272 }}
-              initValue={start_timestamp}
-              value={start_timestamp}
-              type='dateTime'
-              name='start_timestamp'
-              onChange={(value) => handleInputChange(value, 'start_timestamp')}
-            />
-            <Form.DatePicker
-              field='end_timestamp'
-              fluid
-              label={t('结束时间')}
-              style={{ width: 272 }}
-              initValue={end_timestamp}
-              value={end_timestamp}
-              type='dateTime'
-              name='end_timestamp'
-              onChange={(value) => handleInputChange(value, 'end_timestamp')}
-            />
+        <Card
+          className="!rounded-2xl overflow-hidden mb-4"
+          title={
+            <div className="flex flex-col w-full">
+              <div className="flex flex-col md:flex-row justify-between items-center">
+                <div className="flex items-center text-orange-500 mb-2 md:mb-0">
+                  <IconEyeOpened className="mr-2" />
+                  {loading ? (
+                    <Skeleton.Title
+                      style={{
+                        width: 300,
+                        marginBottom: 0,
+                        marginTop: 0
+                      }}
+                    />
+                  ) : (
+                    <Text>
+                      {isAdminUser && showBanner
+                        ? t('当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。')
+                        : t('Midjourney 任务记录')}
+                    </Text>
+                  )}
+                </div>
+              </div>
+
+              <Divider margin="12px" />
+
+              {/* 搜索表单区域 */}
+              <div className="flex flex-col gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  {/* 时间选择器 */}
+                  <div className="col-span-1 lg:col-span-2">
+                    <DatePicker
+                      className="w-full"
+                      value={[start_timestamp, end_timestamp]}
+                      type='dateTimeRange'
+                      onChange={(value) => {
+                        if (Array.isArray(value) && value.length === 2) {
+                          handleInputChange(value[0], 'start_timestamp');
+                          handleInputChange(value[1], 'end_timestamp');
+                        }
+                      }}
+                    />
+                  </div>
+
+                  {/* 任务 ID */}
+                  <Input
+                    prefix={<IconSearch />}
+                    placeholder={t('任务 ID')}
+                    value={mj_id}
+                    onChange={(value) => handleInputChange(value, 'mj_id')}
+                    className="!rounded-full"
+                    showClear
+                  />
+
+                  {/* 渠道 ID - 仅管理员可见 */}
+                  {isAdminUser && (
+                    <Input
+                      prefix={<IconSearch />}
+                      placeholder={t('渠道 ID')}
+                      value={channel_id}
+                      onChange={(value) => handleInputChange(value, 'channel_id')}
+                      className="!rounded-full"
+                      showClear
+                    />
+                  )}
+                </div>
+
+                {/* 操作按钮区域 */}
+                <div className="flex justify-between items-center pt-2">
+                  <div></div>
+                  <div className="flex gap-2">
+                    <Button
+                      type='primary'
+                      onClick={refresh}
+                      loading={loading}
+                      className="!rounded-full"
+                    >
+                      {t('查询')}
+                    </Button>
+                    <Button
+                      theme='light'
+                      type='tertiary'
+                      icon={<IconSetting />}
+                      onClick={() => setShowColumnSelector(true)}
+                      className="!rounded-full"
+                    >
+                      {t('列设置')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+          shadows='hover'
+        >
+          <Table
+            columns={getVisibleColumns()}
+            dataSource={pageData}
+            rowKey='key'
+            loading={loading}
+            className="rounded-xl overflow-hidden"
+            size="middle"
+            pagination={{
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: logCount,
+                }),
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: logCount,
+              pageSizeOptions: [10, 20, 50, 100],
+              showSizeChanger: true,
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size);
+              },
+              onPageChange: handlePageChange,
+            }}
+          />
+        </Card>
 
-            <Form.Section>
-              <Button
-                label={t('查询')}
-                type='primary'
-                htmlType='submit'
-                className='btn-margin-right'
-                onClick={refresh}
-              >
-                {t('查询')}
-              </Button>
-            </Form.Section>
-          </>
-        </Form>
-        <Table
-          style={{ marginTop: 5 }}
-          columns={columns}
-          dataSource={pageData}
-          pagination={{
-            currentPage: activePage,
-            pageSize: ITEMS_PER_PAGE,
-            total: logCount,
-            pageSizeOpts: [10, 20, 50, 100],
-            onPageChange: handlePageChange,
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: logCount,
-              }),
-          }}
-          loading={loading}
-        />
         <Modal
           visible={isModalOpen}
           onOk={() => setIsModalOpen(false)}

web/src/components/ModelPricing.js

@@ -3,7 +3,6 @@ import { API, copy, showError, showInfo, showSuccess } from '../helpers';
 import { useTranslation } from 'react-i18next';
 
 import {
-  Banner,
   Input,
   Layout,
   Modal,
@@ -14,15 +13,22 @@ import {
   Popover,
   ImagePreview,
   Button,
+  Card,
+  Tabs,
+  TabPane,
+  Dropdown,
 } from '@douyinfe/semi-ui';
 import {
-  IconMore,
   IconVerify,
-  IconUploadError,
   IconHelpCircle,
+  IconSearch,
+  IconCopy,
+  IconInfoCircle,
+  IconCrown,
 } from '@douyinfe/semi-icons';
 import { UserContext } from '../context/User/index.js';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
+import { AlertCircle } from 'lucide-react';
+import { MODEL_CATEGORIES } from '../constants';
 
 const ModelPricing = () => {
   const { t } = useTranslation();
@@ -32,6 +38,8 @@ const ModelPricing = () => {
   const [modalImageUrl, setModalImageUrl] = useState('');
   const [isModalOpenurl, setIsModalOpenurl] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState('default');
+  const [activeKey, setActiveKey] = useState('all');
+  const [pageSize, setPageSize] = useState(10);
 
   const rowSelection = useMemo(
     () => ({
@@ -49,6 +57,7 @@ const ModelPricing = () => {
     const newFilteredValue = value ? [value] : [];
     setFilteredValue(newFilteredValue);
   };
+
   const handleCompositionStart = () => {
     compositionRef.current.isComposition = true;
   };
@@ -61,17 +70,16 @@ const ModelPricing = () => {
   };
 
   function renderQuotaType(type) {
-    // Ensure all cases are string literals by adding quotes.
     switch (type) {
       case 1:
         return (
-          <Tag color='teal' size='large'>
+          <Tag color='teal' size='large' shape='circle'>
             {t('按次计费')}
           </Tag>
         );
       case 0:
         return (
-          <Tag color='violet' size='large'>
+          <Tag color='violet' size='large' shape='circle'>
             {t('按量计费')}
           </Tag>
         );
@@ -88,15 +96,9 @@ const ModelPricing = () => {
         }
         position='top'
         key={available}
-        style={{
-          backgroundColor: 'rgba(var(--semi-blue-4),1)',
-          borderColor: 'rgba(var(--semi-blue-4),1)',
-          color: 'var(--semi-color-white)',
-          borderWidth: 1,
-          borderStyle: 'solid',
-        }}
+        className="bg-green-50"
       >
-        <IconVerify style={{ color: 'green' }} size='large' />
+        <IconVerify style={{ color: 'rgb(22 163 74)' }} size='large' />
       </Popover>
     ) : null;
   }
@@ -106,7 +108,6 @@ const ModelPricing = () => {
       title: t('可用性'),
       dataIndex: 'available',
       render: (text, record, index) => {
-        // if record.enable_groups contains selectedGroup, then available is true
         return renderAvailable(record.enable_groups.includes(selectedGroup));
       },
       sorter: (a, b) => {
@@ -115,28 +116,29 @@ const ModelPricing = () => {
         return Number(aAvailable) - Number(bAvailable);
       },
       defaultSortOrder: 'descend',
+      width: 100,
     },
     {
       title: t('模型名称'),
       dataIndex: 'model_name',
       render: (text, record, index) => {
         return (
-          <>
-            <Tag
-              color='green'
-              size='large'
-              onClick={() => {
-                copyText(text);
-              }}
-            >
-              {text}
-            </Tag>
-          </>
+          <Tag
+            color='green'
+            size='large'
+            shape='circle'
+            onClick={() => {
+              copyText(text);
+            }}
+          >
+            {text}
+          </Tag>
         );
       },
       onFilter: (value, record) =>
         record.model_name.toLowerCase().includes(value.toLowerCase()),
       filteredValue,
+      width: 200,
     },
     {
       title: t('计费类型'),
@@ -145,19 +147,19 @@ const ModelPricing = () => {
         return renderQuotaType(parseInt(text));
       },
       sorter: (a, b) => a.quota_type - b.quota_type,
+      width: 120,
     },
     {
       title: t('可用分组'),
       dataIndex: 'enable_groups',
       render: (text, record, index) => {
-        // enable_groups is a string array
         return (
-          <Space>
+          <Space wrap>
             {text.map((group) => {
               if (usableGroup[group]) {
                 if (group === selectedGroup) {
                   return (
-                    <Tag color='blue' size='large' prefixIcon={<IconVerify />}>
+                    <Tag color='blue' size='large' shape='circle' prefixIcon={<IconVerify />}>
                       {group}
                     </Tag>
                   );
@@ -175,6 +177,7 @@ const ModelPricing = () => {
                           }),
                         );
                       }}
+                      className="cursor-pointer hover:opacity-80 transition-opacity !rounded-full"
                     >
                       {group}
                     </Tag>
@@ -188,56 +191,40 @@ const ModelPricing = () => {
     },
     {
       title: () => (
-        <span style={{ display: 'flex', alignItems: 'center' }}>
-          {t('倍率')}
-          <Popover
-            content={
-              <div style={{ padding: 8 }}>
-                {t('倍率是为了方便换算不同价格的模型')}
-                <br />
-                {t('点击查看倍率说明')}
-              </div>
-            }
-            position='top'
-            style={{
-              backgroundColor: 'rgba(var(--semi-blue-4),1)',
-              borderColor: 'rgba(var(--semi-blue-4),1)',
-              color: 'var(--semi-color-white)',
-              borderWidth: 1,
-              borderStyle: 'solid',
-            }}
-          >
+        <div className="flex items-center space-x-1">
+          <span>{t('倍率')}</span>
+          <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
             <IconHelpCircle
+              className="text-blue-500 cursor-pointer"
               onClick={() => {
                 setModalImageUrl('/ratio.png');
                 setIsModalOpenurl(true);
               }}
             />
-          </Popover>
-        </span>
+          </Tooltip>
+        </div>
       ),
       dataIndex: 'model_ratio',
       render: (text, record, index) => {
         let content = text;
         let completionRatio = parseFloat(record.completion_ratio.toFixed(3));
         content = (
-          <>
-            <Text>
+          <div className="space-y-1">
+            <div className="text-gray-700">
               {t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
-            </Text>
-            <br />
-            <Text>
+            </div>
+            <div className="text-gray-700">
               {t('补全倍率')}：
               {record.quota_type === 0 ? completionRatio : t('无')}
-            </Text>
-            <br />
-            <Text>
+            </div>
+            <div className="text-gray-700">
               {t('分组倍率')}：{groupRatio[selectedGroup]}
-            </Text>
-          </>
+            </div>
+          </div>
         );
-        return <div>{content}</div>;
+        return content;
       },
+      width: 200,
     },
     {
       title: t('模型价格'),
@@ -245,7 +232,6 @@ const ModelPricing = () => {
       render: (text, record, index) => {
         let content = text;
         if (record.quota_type === 0) {
-          // 这里的 *2 是因为 1倍率=0.002刀，请勿删除
           let inputRatioPrice =
             record.model_ratio * 2 * groupRatio[selectedGroup];
           let completionRatioPrice =
@@ -254,26 +240,26 @@ const ModelPricing = () => {
             2 *
             groupRatio[selectedGroup];
           content = (
-            <>
-              <Text>
-                {t('提示')} ${inputRatioPrice} / 1M tokens
-              </Text>
-              <br />
-              <Text>
-                {t('补全')} ${completionRatioPrice} / 1M tokens
-              </Text>
-            </>
+            <div className="space-y-1">
+              <div className="text-gray-700">
+                {t('提示')} ${inputRatioPrice.toFixed(3)} / 1M tokens
+              </div>
+              <div className="text-gray-700">
+                {t('补全')} ${completionRatioPrice.toFixed(3)} / 1M tokens
+              </div>
+            </div>
           );
         } else {
           let price = parseFloat(text) * groupRatio[selectedGroup];
           content = (
-            <>
-              ${t('模型价格')}：${price}
-            </>
+            <div className="text-gray-700">
+              ${t('模型价格')}：${price.toFixed(3)}
+            </div>
           );
         }
-        return <div>{content}</div>;
+        return content;
       },
+      width: 250,
     },
   ];
 
@@ -288,12 +274,10 @@ const ModelPricing = () => {
       models[i].key = models[i].model_name;
       models[i].group_ratio = groupRatio[models[i].model_name];
     }
-    // sort by quota_type
     models.sort((a, b) => {
       return a.quota_type - b.quota_type;
     });
 
-    // sort by model_name, start with gpt is max, other use localeCompare
     models.sort((a, b) => {
       if (a.model_name.startsWith('gpt') && !b.model_name.startsWith('gpt')) {
         return -1;
@@ -312,9 +296,7 @@ const ModelPricing = () => {
 
   const loadPricing = async () => {
     setLoading(true);
-
-    let url = '';
-    url = `/api/pricing`;
+    let url = '/api/pricing';
     const res = await API.get(url);
     const { success, message, data, group_ratio, usable_group } = res.data;
     if (success) {
@@ -334,10 +316,9 @@ const ModelPricing = () => {
 
   const copyText = async (text) => {
     if (await copy(text)) {
-      showSuccess('已复制：' + text);
+      showSuccess(t('已复制：') + text);
     } else {
-      // setSearchKeyword(text);
-      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
     }
   };
 
@@ -345,88 +326,285 @@ const ModelPricing = () => {
     refresh().then();
   }, []);
 
-  return (
-    <>
-      <Layout>
-        {userState.user ? (
-          <Banner
-            type='success'
-            fullMode={false}
-            closeIcon='null'
-            description={t('您的默认分组为：{{group}}，分组倍率为：{{ratio}}', {
-              group: userState.user.group,
-              ratio: groupRatio[userState.user.group],
-            })}
-          />
-        ) : (
-          <Banner
-            type='warning'
-            fullMode={false}
-            closeIcon='null'
-            description={t('您还未登陆，显示的价格为默认分组倍率: {{ratio}}', {
-              ratio: groupRatio['default'],
-            })}
-          />
-        )}
-        <br />
-        <Banner
-          type='info'
-          fullMode={false}
-          description={
-            <div>
-              {t(
-                '按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）',
-              )}
-            </div>
-          }
-          closeIcon='null'
-        />
-        <br />
-        <Space style={{ marginBottom: 16 }}>
+  const modelCategories = MODEL_CATEGORIES(t);
+
+  const renderArrow = (items, pos, handleArrowClick) => {
+    const style = {
+      width: 32,
+      height: 32,
+      margin: '0 12px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: '100%',
+      background: 'rgba(var(--semi-grey-1), 1)',
+      color: 'var(--semi-color-text)',
+      cursor: 'pointer',
+    };
+    return (
+      <Dropdown
+        render={
+          <Dropdown.Menu>
+            {items.map(item => (
+              <Dropdown.Item
+                key={item.itemKey}
+                onClick={() => setActiveKey(item.itemKey)}
+                icon={modelCategories[item.itemKey]?.icon}
+              >
+                {modelCategories[item.itemKey]?.label || item.itemKey}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        }
+      >
+        <div style={style} onClick={handleArrowClick}>
+          {pos === 'start' ? '←' : '→'}
+        </div>
+      </Dropdown>
+    );
+  };
+
+  // 检查分类是否有对应的模型
+  const availableCategories = useMemo(() => {
+    if (!models.length) return ['all'];
+
+    return Object.entries(modelCategories).filter(([key, category]) => {
+      if (key === 'all') return true;
+      return models.some(model => category.filter(model));
+    }).map(([key]) => key);
+  }, [models]);
+
+  // 渲染标签页
+  const renderTabs = () => {
+    return (
+      <Tabs
+        renderArrow={renderArrow}
+        activeKey={activeKey}
+        type="card"
+        collapsible
+        onChange={key => setActiveKey(key)}
+        className="mt-2"
+      >
+        {Object.entries(modelCategories)
+          .filter(([key]) => availableCategories.includes(key))
+          .map(([key, category]) => (
+            <TabPane
+              tab={
+                <span className="flex items-center gap-2">
+                  {category.icon && <span className="w-4 h-4">{category.icon}</span>}
+                  {category.label}
+                </span>
+              }
+              itemKey={key}
+              key={key}
+            />
+          ))}
+      </Tabs>
+    );
+  };
+
+  // 优化过滤逻辑
+  const filteredModels = useMemo(() => {
+    let result = models;
+
+    // 先按分类过滤
+    if (activeKey !== 'all') {
+      result = result.filter(model => modelCategories[activeKey].filter(model));
+    }
+
+    // 再按搜索词过滤
+    if (filteredValue.length > 0) {
+      const searchTerm = filteredValue[0].toLowerCase();
+      result = result.filter(model =>
+        model.model_name.toLowerCase().includes(searchTerm)
+      );
+    }
+
+    return result;
+  }, [activeKey, models, filteredValue]);
+
+  // 搜索和操作区组件
+  const SearchAndActions = useMemo(() => (
+    <Card className="!rounded-xl mb-6" shadows='hover'>
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex-1 min-w-[200px]">
           <Input
+            prefix={<IconSearch />}
             placeholder={t('模糊搜索模型名称')}
-            style={{ width: 200 }}
+            className="!rounded-lg"
             onCompositionStart={handleCompositionStart}
             onCompositionEnd={handleCompositionEnd}
             onChange={handleChange}
             showClear
+            size="large"
           />
-          <Button
-            theme='light'
-            type='tertiary'
-            style={{ width: 150 }}
-            onClick={() => {
-              copyText(selectedRowKeys);
-            }}
-            disabled={selectedRowKeys == ''}
-          >
-            {t('复制选中模型')}
-          </Button>
-        </Space>
-        <Table
-          style={{ marginTop: 5 }}
-          columns={columns}
-          dataSource={models}
-          loading={loading}
-          pagination={{
-            formatPageText: (page) =>
-              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-                start: page.currentStart,
-                end: page.currentEnd,
-                total: models.length,
-              }),
-            pageSize: models.length,
-            showSizeChanger: false,
-          }}
-          rowSelection={rowSelection}
-        />
-        <ImagePreview
-          src={modalImageUrl}
-          visible={isModalOpenurl}
-          onVisibleChange={(visible) => setIsModalOpenurl(visible)}
-        />
+        </div>
+        <Button
+          theme='light'
+          type='primary'
+          icon={<IconCopy />}
+          onClick={() => copyText(selectedRowKeys)}
+          disabled={selectedRowKeys.length === 0}
+          className="!rounded-lg !bg-blue-500 hover:!bg-blue-600 text-white"
+          size="large"
+        >
+          {t('复制选中模型')}
+        </Button>
+      </div>
+    </Card>
+  ), [selectedRowKeys, t]);
+
+  // 表格组件
+  const ModelTable = useMemo(() => (
+    <Card className="!rounded-xl overflow-hidden" shadows='hover'>
+      <Table
+        columns={columns}
+        dataSource={filteredModels}
+        loading={loading}
+        rowSelection={rowSelection}
+        className="custom-table"
+        pagination={{
+          defaultPageSize: 10,
+          pageSize: pageSize,
+          showSizeChanger: true,
+          pageSizeOptions: [10, 20, 50, 100],
+          formatPageText: (page) =>
+            t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+              start: page.currentStart,
+              end: page.currentEnd,
+              total: filteredModels.length,
+            }),
+          onPageSizeChange: (size) => setPageSize(size),
+        }}
+      />
+    </Card>
+  ), [filteredModels, loading, columns, rowSelection, pageSize, t]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Layout>
+        <Layout.Content>
+          <div className="flex justify-center p-4 sm:p-6 md:p-8">
+            <div className="w-full">
+              {/* 主卡片容器 */}
+              <Card className="!rounded-2xl shadow-lg border-0">
+                {/* 顶部状态卡片 */}
+                <Card
+                  className="!rounded-2xl !border-0 !shadow-md overflow-hidden mb-6"
+                  style={{
+                    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 25%, #a855f7 50%, #c084fc 75%, #d8b4fe 100%)',
+                    position: 'relative'
+                  }}
+                  bodyStyle={{ padding: 0 }}
+                >
+                  {/* 装饰性背景元素 */}
+                  <div className="absolute inset-0 overflow-hidden">
+                    <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                    <div className="absolute -bottom-16 -left-16 w-48 h-48 bg-white opacity-3 rounded-full"></div>
+                    <div className="absolute top-1/2 right-1/4 w-24 h-24 bg-yellow-400 opacity-10 rounded-full"></div>
+                  </div>
+
+                  <div className="relative p-6 sm:p-8" style={{ color: 'white' }}>
+                    <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 lg:gap-6">
+                      <div className="flex items-start">
+                        <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-white/10 flex items-center justify-center mr-3 sm:mr-4">
+                          <IconCrown size="large" className="text-white" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div className="text-base sm:text-lg font-semibold mb-1 sm:mb-2">
+                            {t('模型定价')}
+                          </div>
+                          <div className="text-sm text-white/80">
+                            {userState.user ? (
+                              <div className="flex items-center">
+                                <IconVerify className="mr-1.5 flex-shrink-0" size="small" />
+                                <span className="truncate">
+                                  {t('当前分组')}: {userState.user.group}，{t('倍率')}: {groupRatio[userState.user.group]}
+                                </span>
+                              </div>
+                            ) : (
+                              <div className="flex items-center">
+                                <AlertCircle size={14} className="mr-1.5 flex-shrink-0" />
+                                <span className="truncate">
+                                  {t('未登录，使用默认分组倍率')}: {groupRatio['default']}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="grid grid-cols-3 gap-2 sm:gap-3 mt-2 lg:mt-0">
+                        <div
+                          className="text-center px-2 py-2 sm:px-3 sm:py-2.5 bg-white/10 rounded-lg backdrop-blur-sm hover:bg-white/20 transition-colors duration-200"
+                          style={{ backdropFilter: 'blur(10px)' }}
+                        >
+                          <div className="text-xs text-white/70 mb-0.5">{t('分组倍率')}</div>
+                          <div className="text-sm sm:text-base font-semibold">{groupRatio[selectedGroup] || '1.0'}x</div>
+                        </div>
+                        <div
+                          className="text-center px-2 py-2 sm:px-3 sm:py-2.5 bg-white/10 rounded-lg backdrop-blur-sm hover:bg-white/20 transition-colors duration-200"
+                          style={{ backdropFilter: 'blur(10px)' }}
+                        >
+                          <div className="text-xs text-white/70 mb-0.5">{t('可用模型')}</div>
+                          <div className="text-sm sm:text-base font-semibold">
+                            {models.filter(m => m.enable_groups.includes(selectedGroup)).length}
+                          </div>
+                        </div>
+                        <div
+                          className="text-center px-2 py-2 sm:px-3 sm:py-2.5 bg-white/10 rounded-lg backdrop-blur-sm hover:bg-white/20 transition-colors duration-200"
+                          style={{ backdropFilter: 'blur(10px)' }}
+                        >
+                          <div className="text-xs text-white/70 mb-0.5">{t('计费类型')}</div>
+                          <div className="text-sm sm:text-base font-semibold">2</div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 计费说明 */}
+                    <div className="mt-4 sm:mt-5">
+                      <div className="flex items-start">
+                        <div
+                          className="w-full flex items-start space-x-2 px-3 py-2 sm:px-4 sm:py-2.5 rounded-lg text-xs sm:text-sm"
+                          style={{
+                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                            color: 'white',
+                            backdropFilter: 'blur(10px)'
+                          }}
+                        >
+                          <IconInfoCircle className="flex-shrink-0 mt-0.5" size="small" />
+                          <span>
+                            {t('按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）')}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400" style={{ opacity: 0.6 }}></div>
+                  </div>
+                </Card>
+
+                {/* 模型分类 Tabs */}
+                <div className="mb-6">
+                  {renderTabs()}
+
+                  {/* 搜索和表格区域 */}
+                  {SearchAndActions}
+                  {ModelTable}
+                </div>
+
+                {/* 倍率说明图预览 */}
+                <ImagePreview
+                  src={modalImageUrl}
+                  visible={isModalOpenurl}
+                  onVisibleChange={(visible) => setIsModalOpenurl(visible)}
+                />
+              </Card>
+            </div>
+          </div>
+        </Layout.Content>
       </Layout>
-    </>
+    </div>
   );
 };
 

web/src/components/ModelSetting.js

@@ -39,7 +39,9 @@ const ModelSetting = () => {
           item.key === 'claude.default_max_tokens' ||
           item.key === 'gemini.supported_imagine_models'
         ) {
-          item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+          if (item.value !== '') {
+            item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+          }
         }
         if (item.key.endsWith('Enabled') || item.key.endsWith('enabled')) {
           newInputs[item.key] = item.value === 'true' ? true : false;
@@ -60,6 +62,7 @@ const ModelSetting = () => {
       // showSuccess('刷新成功');
     } catch (error) {
       showError('刷新失败');
+      console.error(error);
     } finally {
       setLoading(false);
     }

web/src/components/NoticeModal.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Modal, Empty } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { API, showError } from '../helpers';
+import { marked } from 'marked';
+import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
+
+const NoticeModal = ({ visible, onClose, isMobile }) => {
+    const { t } = useTranslation();
+    const [noticeContent, setNoticeContent] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleCloseTodayNotice = () => {
+        const today = new Date().toDateString();
+        localStorage.setItem('notice_close_date', today);
+        onClose();
+    };
+
+    const displayNotice = async () => {
+        setLoading(true);
+        try {
+            const res = await API.get('/api/notice');
+            const { success, message, data } = res.data;
+            if (success) {
+                if (data !== '') {
+                    const htmlNotice = marked.parse(data);
+                    setNoticeContent(htmlNotice);
+                } else {
+                    setNoticeContent('');
+                }
+            } else {
+                showError(message);
+            }
+        } catch (error) {
+            showError(error.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (visible) {
+            displayNotice();
+        }
+    }, [visible]);
+
+    const renderContent = () => {
+        if (loading) {
+            return <div className="py-12"><Empty description={t('加载中...')} /></div>;
+        }
+
+        if (!noticeContent) {
+            return (
+                <div className="py-12">
+                    <Empty
+                        image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
+                        darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
+                        description={t('暂无公告')}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <div
+                dangerouslySetInnerHTML={{ __html: noticeContent }}
+                className="max-h-[60vh] overflow-y-auto pr-2"
+                style={{
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'var(--semi-color-tertiary) transparent'
+                }}
+            />
+        );
+    };
+
+    return (
+        <Modal
+            title={t('系统公告')}
+            visible={visible}
+            onCancel={onClose}
+            footer={(
+                <div className="flex justify-end">
+                    <Button type='secondary' className='!rounded-full' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
+                    <Button type="primary" className='!rounded-full' onClick={onClose}>{t('关闭公告')}</Button>
+                </div>
+            )}
+            size={isMobile ? 'full-width' : 'large'}
+        >
+            {renderContent()}
+        </Modal>
+    );
+};
+
+export default NoticeModal; 

web/src/components/OAuth2Callback.js

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { Spin, Typography, Space } from '@douyinfe/semi-ui';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { API, showError, showSuccess, updateAPI } from '../helpers';
 import { UserContext } from '../context/User';
@@ -52,11 +52,15 @@ const OAuth2Callback = (props) => {
   }, []);
 
   return (
-    <Segment style={{ minHeight: '300px' }}>
-      <Dimmer active inverted>
-        <Loader size='large'>{prompt}</Loader>
-      </Dimmer>
-    </Segment>
+    <div className="flex items-center justify-center min-h-[300px] w-full bg-white rounded-lg shadow p-6">
+      <Space vertical align="center">
+        <Spin size="large" spinning={processing}>
+          <div className="min-h-[200px] min-w-[200px] flex items-center justify-center">
+            <Typography.Text type="secondary">{prompt}</Typography.Text>
+          </div>
+        </Spin>
+      </Space>
+    </div>
   );
 };
 

web/src/components/PageLayout.js

@@ -5,19 +5,27 @@ import App from '../App.js';
 import FooterBar from './Footer.js';
 import { ToastContainer } from 'react-toastify';
 import React, { useContext, useEffect } from 'react';
-import { StyleContext } from '../context/Style/index.js';
+import { useStyle } from '../context/Style/index.js';
 import { useTranslation } from 'react-i18next';
 import { API, getLogo, getSystemName, showError } from '../helpers/index.js';
 import { setStatusData } from '../helpers/data.js';
 import { UserContext } from '../context/User/index.js';
 import { StatusContext } from '../context/Status/index.js';
+import { useLocation } from 'react-router-dom';
 const { Sider, Content, Header, Footer } = Layout;
 
 const PageLayout = () => {
   const [userState, userDispatch] = useContext(UserContext);
   const [statusState, statusDispatch] = useContext(StatusContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const { state: styleState } = useStyle();
   const { i18n } = useTranslation();
+  const location = useLocation();
+
+  const shouldHideFooter = location.pathname === '/console/playground' || location.pathname.startsWith('/console/chat');
+
+  const shouldInnerPadding = location.pathname.includes('/console') &&
+    !location.pathname.startsWith('/console/chat') &&
+    location.pathname !== '/console/playground';
 
   const loadUser = () => {
     let user = localStorage.getItem('user');
@@ -61,15 +69,8 @@ const PageLayout = () => {
     if (savedLang) {
       i18n.changeLanguage(savedLang);
     }
-
-    // 默认显示侧边栏
-    styleDispatch({ type: 'SET_SIDER', payload: true });
   }, [i18n]);
 
-  // 获取侧边栏折叠状态
-  const isSidebarCollapsed =
-    localStorage.getItem('default_collapse_sidebar') === 'true';
-
   return (
     <Layout
       style={{
@@ -84,19 +85,19 @@ const PageLayout = () => {
           padding: 0,
           height: 'auto',
           lineHeight: 'normal',
-          position: styleState.isMobile ? 'sticky' : 'fixed',
+          position: 'fixed',
           width: '100%',
           top: 0,
           zIndex: 100,
-          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
+          borderBottom: '1px solid var(--semi-color-border)',
         }}
       >
         <HeaderBar />
       </Header>
       <Layout
         style={{
-          marginTop: styleState.isMobile ? '0' : '56px',
-          height: styleState.isMobile ? 'auto' : 'calc(100vh - 56px)',
+          marginTop: '64px',
+          height: 'calc(100vh - 64px)',
           overflow: styleState.isMobile ? 'visible' : 'auto',
           display: 'flex',
           flexDirection: 'column',
@@ -107,13 +108,11 @@ const PageLayout = () => {
             style={{
               position: 'fixed',
               left: 0,
-              top: '56px',
+              top: '64px',
               zIndex: 99,
-              background: 'var(--semi-color-bg-1)',
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
               border: 'none',
               paddingRight: '0',
-              height: 'calc(100vh - 56px)',
+              height: 'calc(100vh - 64px)',
             }}
           >
             <SiderBar />
@@ -139,21 +138,23 @@ const PageLayout = () => {
               flex: '1 0 auto',
               overflowY: styleState.isMobile ? 'visible' : 'auto',
               WebkitOverflowScrolling: 'touch',
-              padding: styleState.shouldInnerPadding ? '24px' : '0',
+              padding: shouldInnerPadding ? '24px' : '0',
               position: 'relative',
               marginTop: styleState.isMobile ? '2px' : '0',
             }}
           >
             <App />
           </Content>
-          <Layout.Footer
-            style={{
-              flex: '0 0 auto',
-              width: '100%',
-            }}
-          >
-            <FooterBar />
-          </Layout.Footer>
+          {!shouldHideFooter && (
+            <Layout.Footer
+              style={{
+                flex: '0 0 auto',
+                width: '100%',
+              }}
+            >
+              <FooterBar />
+            </Layout.Footer>
+          )}
         </Layout>
       </Layout>
       <ToastContainer />

web/src/components/PasswordResetConfirm.js

@@ -1,9 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
-import { API, copy, showError, showNotice } from '../helpers';
-import { useSearchParams } from 'react-router-dom';
+import { API, copy, showError, showNotice, getLogo, getSystemName } from '../helpers';
+import { useSearchParams, Link } from 'react-router-dom';
+import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
+import { IconMail, IconLock } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import Background from '../images/example.png';
+
+const { Text, Title } = Typography;
 
 const PasswordResetConfirm = () => {
+  const { t } = useTranslation();
   const [inputs, setInputs] = useState({
     email: '',
     token: '',
@@ -11,13 +17,15 @@ const PasswordResetConfirm = () => {
   const { email, token } = inputs;
 
   const [loading, setLoading] = useState(false);
-
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
-
   const [newPassword, setNewPassword] = useState('');
 
   const [searchParams, setSearchParams] = useSearchParams();
+
+  const logo = getLogo();
+  const systemName = getSystemName();
+
   useEffect(() => {
     let token = searchParams.get('token');
     let email = searchParams.get('email');
@@ -41,8 +49,8 @@ const PasswordResetConfirm = () => {
   }, [disableButton, countdown]);
 
   async function handleSubmit(e) {
+    if (!email || !token) return;
     setDisableButton(true);
-    if (!email) return;
     setLoading(true);
     const res = await API.post(`/api/user/reset`, {
       email,
@@ -53,7 +61,7 @@ const PasswordResetConfirm = () => {
       let password = res.data.data;
       setNewPassword(password);
       await copy(password);
-      showNotice(`新密码已复制到剪贴板：${password}`);
+      showNotice(`${t('密码已重置并已复制到剪贴板')}: ${password}`);
     } else {
       showError(message);
     }
@@ -61,52 +69,86 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
-      <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src='/logo.png' /> 密码重置确认
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <Form.Input
-              fluid
-              icon='mail'
-              iconPosition='left'
-              placeholder='邮箱地址'
-              name='email'
-              value={email}
-              readOnly
-            />
-            {newPassword && (
-              <Form.Input
-                fluid
-                icon='lock'
-                iconPosition='left'
-                placeholder='新密码'
-                name='newPassword'
-                value={newPassword}
-                readOnly
-                onClick={(e) => {
-                  e.target.select();
-                  navigator.clipboard.writeText(newPassword);
-                  showNotice(`密码已复制到剪贴板：${newPassword}`);
-                }}
-              />
-            )}
-            <Button
-              color='green'
-              fluid
-              size='large'
-              onClick={handleSubmit}
-              loading={loading}
-              disabled={disableButton}
-            >
-              {disableButton ? `密码重置完成` : '提交'}
-            </Button>
-          </Segment>
-        </Form>
-      </Grid.Column>
-    </Grid>
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+      {/* 背景图片容器 - 放大并保持居中 */}
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
+        style={{
+          backgroundImage: `url(${Background})`
+        }}
+      ></div>
+
+      {/* 半透明遮罩层 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
+
+      <div className="w-full max-w-sm relative z-10">
+        <div className="flex flex-col items-center">
+          <div className="w-full max-w-md">
+            <div className="flex items-center justify-center mb-6 gap-2">
+              <img src={logo} alt="Logo" className="h-10 rounded-full" />
+              <Title heading={3} className='!text-white'>{systemName}</Title>
+            </div>
+
+            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+              <div className="flex justify-center pt-6 pb-2">
+                <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置确认')}</Title>
+              </div>
+              <div className="px-2 py-8">
+                <Form className="space-y-3">
+                  <Form.Input
+                    field="email"
+                    label={t('邮箱')}
+                    name="email"
+                    size="large"
+                    className="!rounded-md"
+                    value={email}
+                    readOnly
+                    prefix={<IconMail />}
+                  />
+
+                  {newPassword && (
+                    <Form.Input
+                      field="newPassword"
+                      label={t('新密码')}
+                      name="newPassword"
+                      size="large"
+                      className="!rounded-md"
+                      value={newPassword}
+                      readOnly
+                      prefix={<IconLock />}
+                      onClick={(e) => {
+                        e.target.select();
+                        navigator.clipboard.writeText(newPassword);
+                        showNotice(`${t('密码已复制到剪贴板')}: ${newPassword}`);
+                      }}
+                    />
+                  )}
+
+                  <div className="space-y-2 pt-2">
+                    <Button
+                      theme="solid"
+                      className="w-full !rounded-full"
+                      type="primary"
+                      htmlType="submit"
+                      size="large"
+                      onClick={handleSubmit}
+                      loading={loading}
+                      disabled={disableButton || newPassword}
+                    >
+                      {newPassword ? t('密码重置完成') : t('提交')}
+                    </Button>
+                  </div>
+                </Form>
+
+                <div className="mt-6 text-center text-sm">
+                  <Text><Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('返回登录')}</Link></Text>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

web/src/components/PasswordResetForm.js

@@ -1,9 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Grid, Header, Image, Segment } from 'semantic-ui-react';
-import { API, showError, showInfo, showSuccess } from '../helpers';
+import { API, getLogo, showError, showInfo, showSuccess, getSystemName } from '../helpers';
 import Turnstile from 'react-turnstile';
+import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
+import { IconMail } from '@douyinfe/semi-icons';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import Background from '../images/example.png';
+
+const { Text, Title } = Typography;
 
 const PasswordResetForm = () => {
+  const { t } = useTranslation();
   const [inputs, setInputs] = useState({
     email: '',
   });
@@ -16,6 +23,20 @@ const PasswordResetForm = () => {
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
 
+  const logo = getLogo();
+  const systemName = getSystemName();
+
+  useEffect(() => {
+    let status = localStorage.getItem('status');
+    if (status) {
+      status = JSON.parse(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
+    }
+  }, []);
+
   useEffect(() => {
     let countdownInterval = null;
     if (disableButton && countdown > 0) {
@@ -29,25 +50,24 @@ const PasswordResetForm = () => {
     return () => clearInterval(countdownInterval);
   }, [disableButton, countdown]);
 
-  function handleChange(e) {
-    const { name, value } = e.target;
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  function handleChange(value) {
+    setInputs((inputs) => ({ ...inputs, email: value }));
   }
 
   async function handleSubmit(e) {
-    setDisableButton(true);
     if (!email) return;
     if (turnstileEnabled && turnstileToken === '') {
-      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      showInfo(t('请稍后几秒重试，Turnstile 正在检查用户环境！'));
       return;
     }
+    setDisableButton(true);
     setLoading(true);
     const res = await API.get(
       `/api/reset_password?email=${email}&turnstile=${turnstileToken}`,
     );
     const { success, message } = res.data;
     if (success) {
-      showSuccess('重置邮件发送成功，请检查邮箱！');
+      showSuccess(t('重置邮件发送成功，请检查邮箱！'));
       setInputs({ ...inputs, email: '' });
     } else {
       showError(message);
@@ -56,46 +76,80 @@ const PasswordResetForm = () => {
   }
 
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
-      <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src='/logo.png' /> 密码重置
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <Form.Input
-              fluid
-              icon='mail'
-              iconPosition='left'
-              placeholder='邮箱地址'
-              name='email'
-              value={email}
-              onChange={handleChange}
-            />
-            {turnstileEnabled ? (
-              <Turnstile
-                sitekey={turnstileSiteKey}
-                onVerify={(token) => {
-                  setTurnstileToken(token);
-                }}
-              />
-            ) : (
-              <></>
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+      {/* 背景图片容器 - 放大并保持居中 */}
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
+        style={{
+          backgroundImage: `url(${Background})`
+        }}
+      ></div>
+
+      {/* 半透明遮罩层 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
+
+      <div className="w-full max-w-sm relative z-10">
+        <div className="flex flex-col items-center">
+          <div className="w-full max-w-md">
+            <div className="flex items-center justify-center mb-6 gap-2">
+              <img src={logo} alt="Logo" className="h-10 rounded-full" />
+              <Title heading={3} className='!text-white'>{systemName}</Title>
+            </div>
+
+            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+              <div className="flex justify-center pt-6 pb-2">
+                <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置')}</Title>
+              </div>
+              <div className="px-2 py-8">
+                <Form className="space-y-3">
+                  <Form.Input
+                    field="email"
+                    label={t('邮箱')}
+                    placeholder={t('请输入您的邮箱地址')}
+                    name="email"
+                    size="large"
+                    className="!rounded-md"
+                    value={email}
+                    onChange={handleChange}
+                    prefix={<IconMail />}
+                  />
+
+                  <div className="space-y-2 pt-2">
+                    <Button
+                      theme="solid"
+                      className="w-full !rounded-full"
+                      type="primary"
+                      htmlType="submit"
+                      size="large"
+                      onClick={handleSubmit}
+                      loading={loading}
+                      disabled={disableButton}
+                    >
+                      {disableButton ? `${t('重试')} (${countdown})` : t('提交')}
+                    </Button>
+                  </div>
+                </Form>
+
+                <div className="mt-6 text-center text-sm">
+                  <Text>{t('想起来了？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
+                </div>
+              </div>
+            </Card>
+
+            {turnstileEnabled && (
+              <div className="flex justify-center mt-6">
+                <Turnstile
+                  sitekey={turnstileSiteKey}
+                  onVerify={(token) => {
+                    setTurnstileToken(token);
+                  }}
+                />
+              </div>
             )}
-            <Button
-              color='green'
-              fluid
-              size='large'
-              onClick={handleSubmit}
-              loading={loading}
-              disabled={disableButton}
-            >
-              {disableButton ? `重试 (${countdown})` : '提交'}
-            </Button>
-          </Segment>
-        </Form>
-      </Grid.Column>
-    </Grid>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

web/src/components/RedemptionsTable.js

@@ -11,17 +11,33 @@ import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
 import {
   Button,
+  Card,
   Divider,
-  Form,
+  Dropdown,
+  Input,
   Modal,
-  Popconfirm,
   Popover,
+  Space,
   Table,
   Tag,
+  Typography,
 } from '@douyinfe/semi-ui';
+import {
+  IconPlus,
+  IconCopy,
+  IconSearch,
+  IconEyeOpened,
+  IconEdit,
+  IconDelete,
+  IconStop,
+  IconPlay,
+  IconMore,
+} from '@douyinfe/semi-icons';
 import EditRedemption from '../pages/Redemption/EditRedemption';
 import { useTranslation } from 'react-i18next';
 
+const { Text } = Typography;
+
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
 }
@@ -33,25 +49,25 @@ const RedemptionsTable = () => {
     switch (status) {
       case 1:
         return (
-          <Tag color='green' size='large'>
+          <Tag color='green' size='large' shape='circle'>
             {t('未使用')}
           </Tag>
         );
       case 2:
         return (
-          <Tag color='red' size='large'>
+          <Tag color='red' size='large' shape='circle'>
             {t('已禁用')}
           </Tag>
         );
       case 3:
         return (
-          <Tag color='grey' size='large'>
+          <Tag color='grey' size='large' shape='circle'>
             {t('已使用')}
           </Tag>
         );
       default:
         return (
-          <Tag color='black' size='large'>
+          <Tag color='black' size='large' shape='circle'>
             {t('未知状态')}
           </Tag>
         );
@@ -62,15 +78,18 @@ const RedemptionsTable = () => {
     {
       title: t('ID'),
       dataIndex: 'id',
+      width: 50,
     },
     {
       title: t('名称'),
       dataIndex: 'name',
+      width: 120,
     },
     {
       title: t('状态'),
       dataIndex: 'status',
       key: 'status',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
@@ -78,6 +97,7 @@ const RedemptionsTable = () => {
     {
       title: t('额度'),
       dataIndex: 'quota',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -85,6 +105,7 @@ const RedemptionsTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -92,6 +113,7 @@ const RedemptionsTable = () => {
     {
       title: t('兑换人ID'),
       dataIndex: 'used_user_id',
+      width: 100,
       render: (text, record, index) => {
         return <div>{text === 0 ? t('无') : text}</div>;
       },
@@ -99,76 +121,108 @@ const RedemptionsTable = () => {
     {
       title: '',
       dataIndex: 'operate',
-      render: (text, record, index) => (
-        <div>
-          <Popover content={record.key} style={{ padding: 20 }} position='top'>
-            <Button theme='light' type='tertiary' style={{ marginRight: 1 }}>
-              {t('查看')}
-            </Button>
-          </Popover>
-          <Button
-            theme='light'
-            type='secondary'
-            style={{ marginRight: 1 }}
-            onClick={async (text) => {
-              await copyText(record.key);
-            }}
-          >
-            {t('复制')}
-          </Button>
-          <Popconfirm
-            title={t('确定是否要删除此兑换码？')}
-            content={t('此修改将不可逆')}
-            okType={'danger'}
-            position={'left'}
-            onConfirm={() => {
-              manageRedemption(record.id, 'delete', record).then(() => {
-                removeRecord(record.key);
+      width: 300,
+      render: (text, record, index) => {
+        // 创建更多操作的下拉菜单项
+        const moreMenuItems = [
+          {
+            node: 'item',
+            name: t('删除'),
+            icon: <IconDelete />,
+            type: 'danger',
+            onClick: () => {
+              Modal.confirm({
+                title: t('确定是否要删除此兑换码？'),
+                content: t('此修改将不可逆'),
+                onOk: () => {
+                  manageRedemption(record.id, 'delete', record).then(() => {
+                    removeRecord(record.key);
+                  });
+                },
               });
-            }}
-          >
-            <Button theme='light' type='danger' style={{ marginRight: 1 }}>
-              {t('删除')}
-            </Button>
-          </Popconfirm>
-          {record.status === 1 ? (
-            <Button
-              theme='light'
-              type='warning'
-              style={{ marginRight: 1 }}
-              onClick={async () => {
-                manageRedemption(record.id, 'disable', record);
-              }}
-            >
-              {t('禁用')}
-            </Button>
-          ) : (
+            },
+          }
+        ];
+
+        // 动态添加启用/禁用按钮
+        if (record.status === 1) {
+          moreMenuItems.push({
+            node: 'item',
+            name: t('禁用'),
+            icon: <IconStop />,
+            type: 'warning',
+            onClick: () => {
+              manageRedemption(record.id, 'disable', record);
+            },
+          });
+        } else {
+          moreMenuItems.push({
+            node: 'item',
+            name: t('启用'),
+            icon: <IconPlay />,
+            type: 'secondary',
+            onClick: () => {
+              manageRedemption(record.id, 'enable', record);
+            },
+            disabled: record.status === 3,
+          });
+        }
+
+        return (
+          <Space>
+            <Popover content={record.key} style={{ padding: 20 }} position='top'>
+              <Button
+                icon={<IconEyeOpened />}
+                theme='light'
+                type='tertiary'
+                size="small"
+                className="!rounded-full"
+              >
+                {t('查看')}
+              </Button>
+            </Popover>
             <Button
+              icon={<IconCopy />}
               theme='light'
               type='secondary'
-              style={{ marginRight: 1 }}
+              size="small"
+              className="!rounded-full"
               onClick={async () => {
-                manageRedemption(record.id, 'enable', record);
+                await copyText(record.key);
               }}
-              disabled={record.status === 3}
             >
-              {t('启用')}
+              {t('复制')}
             </Button>
-          )}
-          <Button
-            theme='light'
-            type='tertiary'
-            style={{ marginRight: 1 }}
-            onClick={() => {
-              setEditingRedemption(record);
-              setShowEdit(true);
-            }}
-            disabled={record.status !== 1}
-          >
-            {t('编辑')}
-          </Button>
-        </div>
-      ),
+            <Button
+              icon={<IconEdit />}
+              theme='light'
+              type='tertiary'
+              size="small"
+              className="!rounded-full"
+              onClick={() => {
+                setEditingRedemption(record);
+                setShowEdit(true);
+              }}
+              disabled={record.status !== 1}
+            >
+              {t('编辑')}
+            </Button>
+            <Dropdown
+              trigger='click'
+              position='bottomRight'
+              menu={moreMenuItems}
+            >
+              <Button
+                icon={<IconMore />}
+                theme='light'
+                type='tertiary'
+                size="small"
+                className="!rounded-full"
+              />
+            </Dropdown>
+          </Space>
+        );
+      },
     },
   ];
 
@@ -187,6 +241,11 @@ const RedemptionsTable = () => {
 
   const closeEdit = () => {
     setShowEdit(false);
+    setTimeout(() => {
+      setEditingRedemption({
+        id: undefined,
+      });
+    }, 500);
   };
 
   const setRedemptionFormat = (redeptions) => {
@@ -225,8 +284,11 @@ const RedemptionsTable = () => {
     if (await copy(text)) {
       showSuccess(t('已复制到剪贴板！'));
     } else {
-      // setSearchKeyword(text);
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      Modal.error({
+        title: t('无法复制到剪贴板，请手动复制'),
+        content: text,
+        size: 'large'
+      });
     }
   };
 
@@ -245,13 +307,14 @@ const RedemptionsTable = () => {
       .catch((reason) => {
         showError(reason);
       });
-  }, []);
+  }, [pageSize]);
 
   const refresh = async () => {
     await loadRedemptions(activePage - 1, pageSize);
   };
 
   const manageRedemption = async (id, action, record) => {
+    setLoading(true);
     let data = { id };
     let res;
     switch (action) {
@@ -272,7 +335,6 @@ const RedemptionsTable = () => {
       showSuccess(t('操作成功完成！'));
       let redemption = res.data.data;
       let newRedemptions = [...redemptions];
-      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
       if (action === 'delete') {
       } else {
         record.status = redemption.status;
@@ -281,6 +343,7 @@ const RedemptionsTable = () => {
     } else {
       showError(message);
     }
+    setLoading(false);
   };
 
   const searchRedemptions = async (keyword, page, pageSize) => {
@@ -333,8 +396,8 @@ const RedemptionsTable = () => {
 
   let pageData = redemptions;
   const rowSelection = {
-    onSelect: (record, selected) => {},
-    onSelectAll: (selected, selectedRows) => {},
+    onSelect: (record, selected) => { },
+    onSelectAll: (selected, selectedRows) => { },
     onChange: (selectedRowKeys, selectedRows) => {
       setSelectedKeys(selectedRows);
     },
@@ -352,6 +415,80 @@ const RedemptionsTable = () => {
     }
   };
 
+  const renderHeader = () => (
+    <div className="flex flex-col w-full">
+      <div className="mb-2">
+        <div className="flex items-center text-orange-500">
+          <IconEyeOpened className="mr-2" />
+          <Text>{t('兑换码可以批量生成和分发，适合用于推广活动或批量充值。')}</Text>
+        </div>
+      </div>
+
+      <Divider margin="12px" />
+
+      <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
+        <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
+          <Button
+            theme='light'
+            type='primary'
+            icon={<IconPlus />}
+            className="!rounded-full w-full md:w-auto"
+            onClick={() => {
+              setEditingRedemption({
+                id: undefined,
+              });
+              setShowEdit(true);
+            }}
+          >
+            {t('添加兑换码')}
+          </Button>
+          <Button
+            type='warning'
+            icon={<IconCopy />}
+            className="!rounded-full w-full md:w-auto"
+            onClick={async () => {
+              if (selectedKeys.length === 0) {
+                showError(t('请至少选择一个兑换码！'));
+                return;
+              }
+              let keys = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                keys +=
+                  selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
+              }
+              await copyText(keys);
+            }}
+          >
+            {t('复制所选兑换码到剪贴板')}
+          </Button>
+        </div>
+
+        <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto order-1 md:order-2">
+          <div className="relative w-full md:w-64">
+            <Input
+              prefix={<IconSearch />}
+              placeholder={t('关键字(id或者名称)')}
+              value={searchKeyword}
+              onChange={handleKeywordChange}
+              className="!rounded-full"
+              showClear
+            />
+          </div>
+          <Button
+            type="primary"
+            onClick={() => {
+              searchRedemptions(searchKeyword, 1, pageSize).then();
+            }}
+            loading={searching}
+            className="!rounded-full w-full md:w-auto"
+          >
+            {t('查询')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <>
       <EditRedemption
@@ -360,88 +497,45 @@ const RedemptionsTable = () => {
         visiable={showEdit}
         handleClose={closeEdit}
       ></EditRedemption>
-      <Form
-        onSubmit={() => {
-          searchRedemptions(searchKeyword, activePage, pageSize).then();
-        }}
-      >
-        <Form.Input
-          label={t('搜索关键字')}
-          field='keyword'
-          icon='search'
-          iconPosition='left'
-          placeholder={t('关键字(id或者名称)')}
-          value={searchKeyword}
-          loading={searching}
-          onChange={handleKeywordChange}
-        />
-      </Form>
-      <Divider style={{ margin: '5px 0 15px 0' }} />
-      <div>
-        <Button
-          theme='light'
-          type='primary'
-          style={{ marginRight: 8 }}
-          onClick={() => {
-            setEditingRedemption({
-              id: undefined,
-            });
-            setShowEdit(true);
-          }}
-        >
-          {t('添加兑换码')}
-        </Button>
-        <Button
-          label={t('复制所选兑换码')}
-          type='warning'
-          onClick={async () => {
-            if (selectedKeys.length === 0) {
-              showError(t('请至少选择一个兑换码！'));
-              return;
-            }
-            let keys = '';
-            for (let i = 0; i < selectedKeys.length; i++) {
-              keys +=
-                selectedKeys[i].name + '    ' + selectedKeys[i].key + '\n';
-            }
-            await copyText(keys);
-          }}
-        >
-          {t('复制所选兑换码到剪贴板')}
-        </Button>
-      </div>
 
-      <Table
-        style={{ marginTop: 20 }}
-        columns={columns}
-        dataSource={pageData}
-        pagination={{
-          currentPage: activePage,
-          pageSize: pageSize,
-          total: tokenCount,
-          showSizeChanger: true,
-          pageSizeOpts: [10, 20, 50, 100],
-          formatPageText: (page) =>
-            t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-              start: page.currentStart,
-              end: page.currentEnd,
-              total: tokenCount,
-            }),
-          onPageSizeChange: (size) => {
-            setPageSize(size);
-            setActivePage(1);
-            if (searchKeyword === '') {
-              loadRedemptions(1, size).then();
-            } else {
-              searchRedemptions(searchKeyword, 1, size).then();
-            }
-          },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-        rowSelection={rowSelection}
-        onRow={handleRow}
-      ></Table>
+      <Card
+        className="!rounded-2xl overflow-hidden"
+        title={renderHeader()}
+        shadows='hover'
+      >
+        <Table
+          columns={columns}
+          dataSource={pageData}
+          pagination={{
+            currentPage: activePage,
+            pageSize: pageSize,
+            total: tokenCount,
+            showSizeChanger: true,
+            pageSizeOptions: [10, 20, 50, 100],
+            formatPageText: (page) =>
+              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                start: page.currentStart,
+                end: page.currentEnd,
+                total: tokenCount,
+              }),
+            onPageSizeChange: (size) => {
+              setPageSize(size);
+              setActivePage(1);
+              if (searchKeyword === '') {
+                loadRedemptions(1, size).then();
+              } else {
+                searchRedemptions(searchKeyword, 1, size).then();
+              }
+            },
+            onPageChange: handlePageChange,
+          }}
+          loading={loading}
+          rowSelection={rowSelection}
+          onRow={handleRow}
+          className="rounded-xl overflow-hidden"
+          size="middle"
+        ></Table>
+      </Card>
     </>
   );
 };

web/src/components/RegisterForm.js

@@ -7,6 +7,7 @@ import {
   showInfo,
   showSuccess,
   updateAPI,
+  getSystemName,
 } from '../helpers';
 import Turnstile from 'react-turnstile';
 import {
@@ -15,24 +16,24 @@ import {
   Divider,
   Form,
   Icon,
-  Layout,
   Modal,
 } from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
-import { IconGithubLogo } from '@douyinfe/semi-icons';
+import { IconGithubLogo, IconMail, IconUser, IconLock, IconKey } from '@douyinfe/semi-icons';
 import {
   onGitHubOAuthClicked,
   onLinuxDOOAuthClicked,
   onOIDCClicked,
 } from './utils.js';
-import OIDCIcon from './OIDCIcon.js';
-import LinuxDoIcon from './LinuxDoIcon.js';
-import WeChatIcon from './WeChatIcon.js';
+import OIDCIcon from './common/logo/OIDCIcon.js';
+import LinuxDoIcon from './common/logo/LinuxDoIcon.js';
+import WeChatIcon from './common/logo/WeChatIcon.js';
 import TelegramLoginButton from 'react-telegram-login/src';
 import { setUserData } from '../helpers/data.js';
 import { UserContext } from '../context/User/index.js';
 import { useTranslation } from 'react-i18next';
+import Background from '../images/example.png';
 
 const RegisterForm = () => {
   const { t } = useTranslation();
@@ -42,6 +43,7 @@ const RegisterForm = () => {
     password2: '',
     email: '',
     verification_code: '',
+    wechat_verification_code: '',
   });
   const { username, password, password2 } = inputs;
   const [showEmailVerification, setShowEmailVerification] = useState(false);
@@ -51,9 +53,21 @@ const RegisterForm = () => {
   const [turnstileToken, setTurnstileToken] = useState('');
   const [loading, setLoading] = useState(false);
   const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);
+  const [showEmailRegister, setShowEmailRegister] = useState(false);
   const [status, setStatus] = useState({});
+  const [wechatLoading, setWechatLoading] = useState(false);
+  const [githubLoading, setGithubLoading] = useState(false);
+  const [oidcLoading, setOidcLoading] = useState(false);
+  const [linuxdoLoading, setLinuxdoLoading] = useState(false);
+  const [emailRegisterLoading, setEmailRegisterLoading] = useState(false);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const [verificationCodeLoading, setVerificationCodeLoading] = useState(false);
+  const [otherRegisterOptionsLoading, setOtherRegisterOptionsLoading] = useState(false);
+  const [wechatCodeSubmitLoading, setWechatCodeSubmitLoading] = useState(false);
   let navigate = useNavigate();
+
   const logo = getLogo();
+  const systemName = getSystemName();
 
   let affCode = new URLSearchParams(window.location.search).get('aff');
   if (affCode) {
@@ -71,10 +85,12 @@ const RegisterForm = () => {
         setTurnstileSiteKey(status.turnstile_site_key);
       }
     }
-  });
+  }, []);
 
   const onWeChatLoginClicked = () => {
+    setWechatLoading(true);
     setShowWeChatLoginModal(true);
+    setWechatLoading(false);
   };
 
   const onSubmitWeChatVerificationCode = async () => {
@@ -82,20 +98,27 @@ const RegisterForm = () => {
       showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
       return;
     }
-    const res = await API.get(
-      `/api/oauth/wechat?code=${inputs.wechat_verification_code}`,
-    );
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-      localStorage.setItem('user', JSON.stringify(data));
-      setUserData(data);
-      updateAPI();
-      navigate('/');
-      showSuccess('登录成功！');
-      setShowWeChatLoginModal(false);
-    } else {
-      showError(message);
+    setWechatCodeSubmitLoading(true);
+    try {
+      const res = await API.get(
+        `/api/oauth/wechat?code=${inputs.wechat_verification_code}`,
+      );
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        setUserData(data);
+        updateAPI();
+        navigate('/');
+        showSuccess('登录成功！');
+        setShowWeChatLoginModal(false);
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError('登录失败，请重试');
+    } finally {
+      setWechatCodeSubmitLoading(false);
     }
   };
 
@@ -117,23 +140,28 @@ const RegisterForm = () => {
         showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
         return;
       }
-      setLoading(true);
-      if (!affCode) {
-        affCode = localStorage.getItem('aff');
+      setRegisterLoading(true);
+      try {
+        if (!affCode) {
+          affCode = localStorage.getItem('aff');
+        }
+        inputs.aff_code = affCode;
+        const res = await API.post(
+          `/api/user/register?turnstile=${turnstileToken}`,
+          inputs,
+        );
+        const { success, message } = res.data;
+        if (success) {
+          navigate('/login');
+          showSuccess('注册成功！');
+        } else {
+          showError(message);
+        }
+      } catch (error) {
+        showError('注册失败，请重试');
+      } finally {
+        setRegisterLoading(false);
       }
-      inputs.aff_code = affCode;
-      const res = await API.post(
-        `/api/user/register?turnstile=${turnstileToken}`,
-        inputs,
-      );
-      const { success, message } = res.data;
-      if (success) {
-        navigate('/login');
-        showSuccess('注册成功！');
-      } else {
-        showError(message);
-      }
-      setLoading(false);
     }
   }
 
@@ -143,17 +171,64 @@ const RegisterForm = () => {
       showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
       return;
     }
-    setLoading(true);
-    const res = await API.get(
-      `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
-    );
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess('验证码发送成功，请检查你的邮箱！');
-    } else {
-      showError(message);
+    setVerificationCodeLoading(true);
+    try {
+      const res = await API.get(
+        `/api/verification?email=${inputs.email}&turnstile=${turnstileToken}`,
+      );
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('验证码发送成功，请检查你的邮箱！');
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError('发送验证码失败，请重试');
+    } finally {
+      setVerificationCodeLoading(false);
     }
-    setLoading(false);
+  };
+
+  const handleGitHubClick = () => {
+    setGithubLoading(true);
+    try {
+      onGitHubOAuthClicked(status.github_client_id);
+    } finally {
+      setTimeout(() => setGithubLoading(false), 3000);
+    }
+  };
+
+  const handleOIDCClick = () => {
+    setOidcLoading(true);
+    try {
+      onOIDCClicked(
+        status.oidc_authorization_endpoint,
+        status.oidc_client_id
+      );
+    } finally {
+      setTimeout(() => setOidcLoading(false), 3000);
+    }
+  };
+
+  const handleLinuxDOClick = () => {
+    setLinuxdoLoading(true);
+    try {
+      onLinuxDOOAuthClicked(status.linuxdo_client_id);
+    } finally {
+      setTimeout(() => setLinuxdoLoading(false), 3000);
+    }
+  };
+
+  const handleEmailRegisterClick = () => {
+    setEmailRegisterLoading(true);
+    setShowEmailRegister(true);
+    setEmailRegisterLoading(false);
+  };
+
+  const handleOtherRegisterOptionsClick = () => {
+    setOtherRegisterOptionsLoading(true);
+    setShowEmailRegister(false);
+    setOtherRegisterOptionsLoading(false);
   };
 
   const onTelegramLoginClicked = async (response) => {
@@ -173,260 +248,323 @@ const RegisterForm = () => {
         params[field] = response[field];
       }
     });
-    const res = await API.get(`/api/oauth/telegram/login`, { params });
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-      localStorage.setItem('user', JSON.stringify(data));
-      showSuccess('登录成功！');
-      setUserData(data);
-      updateAPI();
-      navigate('/');
-    } else {
-      showError(message);
+    try {
+      const res = await API.get(`/api/oauth/telegram/login`, { params });
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        setUserData(data);
+        updateAPI();
+        navigate('/');
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      showError('登录失败，请重试');
     }
   };
 
-  return (
-    <div>
-      <Layout>
-        <Layout.Header></Layout.Header>
-        <Layout.Content>
-          <div
-            style={{
-              justifyContent: 'center',
-              display: 'flex',
-              marginTop: 120,
-            }}
-          >
-            <div style={{ width: 500 }}>
-              <Card>
-                <Title heading={2} style={{ textAlign: 'center' }}>
-                  {t('新用户注册')}
-                </Title>
-                <Form size='large'>
-                  <Form.Input
-                    field={'username'}
-                    label={t('用户名')}
-                    placeholder={t('用户名')}
-                    name='username'
-                    onChange={(value) => handleChange('username', value)}
-                  />
-                  <Form.Input
-                    field={'password'}
-                    label={t('密码')}
-                    placeholder={t('输入密码，最短 8 位，最长 20 位')}
-                    name='password'
-                    type='password'
-                    onChange={(value) => handleChange('password', value)}
-                  />
-                  <Form.Input
-                    field={'password2'}
-                    label={t('确认密码')}
-                    placeholder={t('确认密码')}
-                    name='password2'
-                    type='password'
-                    onChange={(value) => handleChange('password2', value)}
-                  />
-                  {showEmailVerification ? (
-                    <>
-                      <Form.Input
-                        field={'email'}
-                        label={t('邮箱')}
-                        placeholder={t('输入邮箱地址')}
-                        onChange={(value) => handleChange('email', value)}
-                        name='email'
-                        type='email'
-                        suffix={
-                          <Button
-                            onClick={sendVerificationCode}
-                            disabled={loading}
-                          >
-                            {t('获取验证码')}
-                          </Button>
-                        }
-                      />
-                      <Form.Input
-                        field={'verification_code'}
-                        label={t('验证码')}
-                        placeholder={t('输入验证码')}
-                        onChange={(value) =>
-                          handleChange('verification_code', value)
-                        }
-                        name='verification_code'
-                      />
-                    </>
-                  ) : (
-                    <></>
-                  )}
+  const renderOAuthOptions = () => {
+    return (
+      <div className="flex flex-col items-center">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center mb-6 gap-2">
+            <img src={logo} alt="Logo" className="h-10 rounded-full" />
+            <Title heading={3} className='!text-white'>{systemName}</Title>
+          </div>
+
+          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <div className="flex justify-center pt-6 pb-2">
+              <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
+            </div>
+            <div className="px-2 py-8">
+              <div className="space-y-3">
+                {status.wechat_login && (
                   <Button
-                    theme='solid'
-                    style={{ width: '100%' }}
-                    type={'primary'}
-                    size='large'
-                    htmlType={'submit'}
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<Icon svg={<WeChatIcon />} style={{ color: '#07C160' }} />}
+                    size="large"
+                    onClick={onWeChatLoginClicked}
+                    loading={wechatLoading}
+                  >
+                    <span className="ml-3">{t('使用 微信 继续')}</span>
+                  </Button>
+                )}
+
+                {status.github_oauth && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<IconGithubLogo size="large" style={{ color: '#24292e' }} />}
+                    size="large"
+                    onClick={handleGitHubClick}
+                    loading={githubLoading}
+                  >
+                    <span className="ml-3">{t('使用 GitHub 继续')}</span>
+                  </Button>
+                )}
+
+                {status.oidc_enabled && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<OIDCIcon style={{ color: '#1877F2' }} />}
+                    size="large"
+                    onClick={handleOIDCClick}
+                    loading={oidcLoading}
+                  >
+                    <span className="ml-3">{t('使用 OIDC 继续')}</span>
+                  </Button>
+                )}
+
+                {status.linuxdo_oauth && (
+                  <Button
+                    theme='outline'
+                    className="w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors"
+                    type="tertiary"
+                    icon={<LinuxDoIcon style={{ color: '#E95420', width: '20px', height: '20px' }} />}
+                    size="large"
+                    onClick={handleLinuxDOClick}
+                    loading={linuxdoLoading}
+                  >
+                    <span className="ml-3">{t('使用 LinuxDO 继续')}</span>
+                  </Button>
+                )}
+
+                {status.telegram_oauth && (
+                  <div className="flex justify-center my-2">
+                    <TelegramLoginButton
+                      dataOnauth={onTelegramLoginClicked}
+                      botName={status.telegram_bot_name}
+                    />
+                  </div>
+                )}
+
+                <Divider margin='12px' align='center'>
+                  {t('或')}
+                </Divider>
+
+                <Button
+                  theme="solid"
+                  type="primary"
+                  className="w-full h-12 flex items-center justify-center bg-black text-white !rounded-full hover:bg-gray-800 transition-colors"
+                  icon={<IconMail size="large" />}
+                  size="large"
+                  onClick={handleEmailRegisterClick}
+                  loading={emailRegisterLoading}
+                >
+                  <span className="ml-3">{t('使用 邮箱 注册')}</span>
+                </Button>
+              </div>
+
+              <div className="mt-6 text-center text-sm">
+                <Text>{t('已有账户？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
+              </div>
+            </div>
+          </Card>
+
+          {turnstileEnabled && (
+            <div className="flex justify-center mt-6">
+              <Turnstile
+                sitekey={turnstileSiteKey}
+                onVerify={(token) => {
+                  setTurnstileToken(token);
+                }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const renderEmailRegisterForm = () => {
+    return (
+      <div className="flex flex-col items-center">
+        <div className="w-full max-w-md">
+          <div className="flex items-center justify-center mb-6 gap-2">
+            <img src={logo} alt="Logo" className="h-10 rounded-full" />
+            <Title heading={3} className='!text-white'>{systemName}</Title>
+          </div>
+
+          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <div className="flex justify-center pt-6 pb-2">
+              <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
+            </div>
+            <div className="px-2 py-8">
+              <Form className="space-y-3">
+                <Form.Input
+                  field="username"
+                  label={t('用户名')}
+                  placeholder={t('请输入用户名')}
+                  name="username"
+                  size="large"
+                  className="!rounded-md"
+                  onChange={(value) => handleChange('username', value)}
+                  prefix={<IconUser />}
+                />
+
+                <Form.Input
+                  field="password"
+                  label={t('密码')}
+                  placeholder={t('输入密码，最短 8 位，最长 20 位')}
+                  name="password"
+                  mode="password"
+                  size="large"
+                  className="!rounded-md"
+                  onChange={(value) => handleChange('password', value)}
+                  prefix={<IconLock />}
+                />
+
+                <Form.Input
+                  field="password2"
+                  label={t('确认密码')}
+                  placeholder={t('确认密码')}
+                  name="password2"
+                  mode="password"
+                  size="large"
+                  className="!rounded-md"
+                  onChange={(value) => handleChange('password2', value)}
+                  prefix={<IconLock />}
+                />
+
+                {showEmailVerification && (
+                  <>
+                    <Form.Input
+                      field="email"
+                      label={t('邮箱')}
+                      placeholder={t('输入邮箱地址')}
+                      name="email"
+                      type="email"
+                      size="large"
+                      className="!rounded-md"
+                      onChange={(value) => handleChange('email', value)}
+                      prefix={<IconMail />}
+                      suffix={
+                        <Button
+                          onClick={sendVerificationCode}
+                          loading={verificationCodeLoading}
+                          size="small"
+                          className="!rounded-md mr-2"
+                        >
+                          {t('获取验证码')}
+                        </Button>
+                      }
+                    />
+                    <Form.Input
+                      field="verification_code"
+                      label={t('验证码')}
+                      placeholder={t('输入验证码')}
+                      name="verification_code"
+                      size="large"
+                      className="!rounded-md"
+                      onChange={(value) => handleChange('verification_code', value)}
+                      prefix={<IconKey />}
+                    />
+                  </>
+                )}
+
+                <div className="space-y-2 pt-2">
+                  <Button
+                    theme="solid"
+                    className="w-full !rounded-full"
+                    type="primary"
+                    htmlType="submit"
+                    size="large"
                     onClick={handleSubmit}
+                    loading={registerLoading}
                   >
                     {t('注册')}
                   </Button>
-                </Form>
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    marginTop: 20,
-                  }}
+                </div>
+              </Form>
+
+              <Divider margin='12px' align='center'>
+                {t('或')}
+              </Divider>
+
+              <div className="mt-4 text-center">
+                <Button
+                  theme="outline"
+                  type="tertiary"
+                  className="w-full !rounded-full"
+                  size="large"
+                  onClick={handleOtherRegisterOptionsClick}
+                  loading={otherRegisterOptionsLoading}
                 >
-                  <Text>
-                    {t('已有账户？')}
-                    <Link to='/login'>{t('点击登录')}</Link>
-                  </Text>
-                </div>
-                {status.github_oauth ||
-                status.oidc_enabled ||
-                status.wechat_login ||
-                status.telegram_oauth ||
-                status.linuxdo_oauth ? (
-                  <>
-                    <Divider margin='12px' align='center'>
-                      {t('第三方登录')}
-                    </Divider>
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                        marginTop: 20,
-                      }}
-                    >
-                      {status.github_oauth ? (
-                        <Button
-                          type='primary'
-                          icon={<IconGithubLogo />}
-                          onClick={() =>
-                            onGitHubOAuthClicked(status.github_client_id)
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.oidc_enabled ? (
-                        <Button
-                          type='primary'
-                          icon={<OIDCIcon />}
-                          onClick={() =>
-                            onOIDCClicked(
-                              status.oidc_authorization_endpoint,
-                              status.oidc_client_id,
-                            )
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.linuxdo_oauth ? (
-                        <Button
-                          icon={<LinuxDoIcon />}
-                          onClick={() =>
-                            onLinuxDOOAuthClicked(status.linuxdo_client_id)
-                          }
-                        />
-                      ) : (
-                        <></>
-                      )}
-                      {status.wechat_login ? (
-                        <Button
-                          type='primary'
-                          style={{ color: 'rgba(var(--semi-green-5), 1)' }}
-                          icon={<Icon svg={<WeChatIcon />} />}
-                          onClick={onWeChatLoginClicked}
-                        />
-                      ) : (
-                        <></>
-                      )}
-                    </div>
-                    {status.telegram_oauth ? (
-                      <>
-                        <div
-                          style={{
-                            display: 'flex',
-                            justifyContent: 'center',
-                            marginTop: 5,
-                          }}
-                        >
-                          <TelegramLoginButton
-                            dataOnauth={onTelegramLoginClicked}
-                            botName={status.telegram_bot_name}
-                          />
-                        </div>
-                      </>
-                    ) : (
-                      <></>
-                    )}
-                  </>
-                ) : (
-                  <></>
-                )}
-              </Card>
-              <Modal
-                title={t('微信扫码登录')}
-                visible={showWeChatLoginModal}
-                maskClosable={true}
-                onOk={onSubmitWeChatVerificationCode}
-                onCancel={() => setShowWeChatLoginModal(false)}
-                okText={t('登录')}
-                size={'small'}
-                centered={true}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItem: 'center',
-                    flexDirection: 'column',
-                  }}
-                >
-                  <img src={status.wechat_qrcode} />
-                </div>
-                <div style={{ textAlign: 'center' }}>
-                  <p>
-                    {t(
-                      '微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）',
-                    )}
-                  </p>
-                </div>
-                <Form size='large'>
-                  <Form.Input
-                    field={'wechat_verification_code'}
-                    placeholder={t('验证码')}
-                    label={t('验证码')}
-                    value={inputs.wechat_verification_code}
-                    onChange={(value) =>
-                      handleChange('wechat_verification_code', value)
-                    }
-                  />
-                </Form>
-              </Modal>
-              {turnstileEnabled ? (
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    marginTop: 20,
-                  }}
-                >
-                  <Turnstile
-                    sitekey={turnstileSiteKey}
-                    onVerify={(token) => {
-                      setTurnstileToken(token);
-                    }}
-                  />
-                </div>
-              ) : (
-                <></>
-              )}
+                  {t('其他注册选项')}
+                </Button>
+              </div>
+
+              <div className="mt-6 text-center text-sm">
+                <Text>{t('已有账户？')} <Link to="/login" className="text-blue-600 hover:text-blue-800 font-medium">{t('登录')}</Link></Text>
+              </div>
             </div>
-          </div>
-        </Layout.Content>
-      </Layout>
+          </Card>
+        </div>
+      </div>
+    );
+  };
+
+  const renderWeChatLoginModal = () => {
+    return (
+      <Modal
+        title={t('微信扫码登录')}
+        visible={showWeChatLoginModal}
+        maskClosable={true}
+        onOk={onSubmitWeChatVerificationCode}
+        onCancel={() => setShowWeChatLoginModal(false)}
+        okText={t('登录')}
+        size="small"
+        centered={true}
+        okButtonProps={{
+          loading: wechatCodeSubmitLoading,
+        }}
+      >
+        <div className="flex flex-col items-center">
+          <img src={status.wechat_qrcode} alt="微信二维码" className="mb-4" />
+        </div>
+
+        <div className="text-center mb-4">
+          <p>{t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}</p>
+        </div>
+
+        <Form size="large">
+          <Form.Input
+            field="wechat_verification_code"
+            placeholder={t('验证码')}
+            label={t('验证码')}
+            value={inputs.wechat_verification_code}
+            onChange={(value) => handleChange('wechat_verification_code', value)}
+          />
+        </Form>
+      </Modal>
+    );
+  };
+
+  return (
+    <div className="min-h-screen relative flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
+      <div
+        className="absolute inset-0 z-0 bg-cover bg-center scale-125 opacity-100"
+        style={{
+          backgroundImage: `url(${Background})`
+        }}
+      ></div>
+
+      <div className="absolute inset-0 bg-gradient-to-br from-teal-500/30 via-blue-500/30 to-purple-500/30 backdrop-blur-sm z-0"></div>
+
+      <div className="w-full max-w-sm relative z-10">
+        {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
+          ? renderEmailRegisterForm()
+          : renderOAuthOptions()}
+        {renderWeChatLoginModal()}
+      </div>
     </div>
   );
 };

web/src/components/SiderBar.js

@@ -18,7 +18,7 @@ import {
   IconCalendarClock,
   IconChecklistStroked,
   IconComment,
-  IconCommentStroked,
+  IconTerminal,
   IconCreditCard,
   IconGift,
   IconHelpCircle,
@@ -42,7 +42,7 @@ import {
 import { setStatusData } from '../helpers/data.js';
 import { stringToColor } from '../helpers/render.js';
 import { useSetTheme, useTheme } from '../context/Theme/index.js';
-import { StyleContext } from '../context/Style/index.js';
+import { useStyle, styleActions } from '../context/Style/index.js';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 // 自定义侧边栏按钮样式
@@ -77,31 +77,29 @@ const iconStyle = (itemKey, selectedKeys) => {
 // Define routerMap as a constant outside the component
 const routerMap = {
   home: '/',
-  channel: '/channel',
-  token: '/token',
-  redemption: '/redemption',
-  topup: '/topup',
-  user: '/user',
-  log: '/log',
-  midjourney: '/midjourney',
-  setting: '/setting',
+  channel: '/console/channel',
+  token: '/console/token',
+  redemption: '/console/redemption',
+  topup: '/console/topup',
+  user: '/console/user',
+  log: '/console/log',
+  midjourney: '/console/midjourney',
+  setting: '/console/setting',
   about: '/about',
-  detail: '/detail',
+  detail: '/console',
   pricing: '/pricing',
-  task: '/task',
-  playground: '/playground',
-  personal: '/personal',
+  task: '/console/task',
+  playground: '/console/playground',
+  personal: '/console/personal',
 };
 
 const SiderBar = () => {
   const { t } = useTranslation();
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const { state: styleState, dispatch: styleDispatch } = useStyle();
   const [statusState, statusDispatch] = useContext(StatusContext);
-  const defaultIsCollapsed =
-    localStorage.getItem('default_collapse_sidebar') === 'true';
 
   const [selectedKeys, setSelectedKeys] = useState(['home']);
-  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed);
+  const [isCollapsed, setIsCollapsed] = useState(styleState.siderCollapsed);
   const [chatItems, setChatItems] = useState([]);
   const [openedKeys, setOpenedKeys] = useState([]);
   const theme = useTheme();
@@ -249,10 +247,10 @@ const SiderBar = () => {
   const chatMenuItems = useMemo(
     () => [
       {
-        text: 'Playground',
+        text: t('操练场'),
         itemKey: 'playground',
         to: '/playground',
-        icon: <IconCommentStroked />,
+        icon: <IconTerminal />,
       },
       {
         text: t('聊天'),
@@ -270,7 +268,7 @@ const SiderBar = () => {
 
     if (Array.isArray(chats) && chats.length > 0) {
       for (let i = 0; i < chats.length; i++) {
-        newRouterMap['chat' + i] = '/chat/' + i;
+        newRouterMap['chat' + i] = '/console/chat/' + i;
       }
     }
 
@@ -291,7 +289,7 @@ const SiderBar = () => {
             for (let key in chats[i]) {
               chat.text = key;
               chat.itemKey = 'chat' + i;
-              chat.to = '/chat/' + i;
+              chat.to = '/console/chat/' + i;
             }
             chatItems.push(chat);
           }
@@ -315,7 +313,7 @@ const SiderBar = () => {
     );
 
     // Handle chat routes
-    if (!matchingKey && currentPath.startsWith('/chat/')) {
+    if (!matchingKey && currentPath.startsWith('/console/chat/')) {
       const chatIndex = currentPath.split('/').pop();
       if (!isNaN(chatIndex)) {
         matchingKey = 'chat' + chatIndex;
@@ -356,9 +354,8 @@ const SiderBar = () => {
         className='custom-sidebar-nav'
         style={{
           width: isCollapsed ? '60px' : '200px',
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
           borderRight: '1px solid var(--semi-color-border)',
-          background: 'var(--semi-color-bg-1)',
+          background: 'var(--semi-color-bg-0)',
           borderRadius: styleState.isMobile ? '0' : '0 8px 8px 0',
           position: 'relative',
           zIndex: 95,
@@ -366,15 +363,11 @@ const SiderBar = () => {
           overflowY: 'auto',
           WebkitOverflowScrolling: 'touch', // Improve scrolling on iOS devices
         }}
-        defaultIsCollapsed={
-          localStorage.getItem('default_collapse_sidebar') === 'true'
-        }
+        defaultIsCollapsed={styleState.siderCollapsed}
         isCollapsed={isCollapsed}
         onCollapseChange={(collapsed) => {
           setIsCollapsed(collapsed);
-          // styleDispatch({ type: 'SET_SIDER', payload: true });
-          styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
-          localStorage.setItem('default_collapse_sidebar', collapsed);
+          styleDispatch(styleActions.setSiderCollapsed(collapsed));
 
           // 确保在收起侧边栏时有选中的项目，避免不必要的计算
           if (selectedKeys.length === 0) {
@@ -385,7 +378,7 @@ const SiderBar = () => {
 
             if (matchingKey) {
               setSelectedKeys([matchingKey]);
-            } else if (currentPath.startsWith('/chat/')) {
+            } else if (currentPath.startsWith('/console/chat/')) {
               setSelectedKeys(['chat']);
             } else {
               setSelectedKeys(['detail']); // 默认选中首页
@@ -407,12 +400,6 @@ const SiderBar = () => {
           );
         }}
         onSelect={(key) => {
-          if (key.itemKey.toString().startsWith('chat')) {
-            styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
-          } else {
-            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-          }
-
           // 如果点击的是已经展开的子菜单的父项，则收起子菜单
           if (openedKeys.includes(key.itemKey)) {
             setOpenedKeys(openedKeys.filter((k) => k !== key.itemKey));
@@ -516,9 +503,6 @@ const SiderBar = () => {
         ))}
 
         <Nav.Footer
-          style={{
-            paddingBottom: styleState?.isMobile ? '112px' : '',
-          }}
           collapseButton={true}
           collapseText={(collapsed) => {
             if (collapsed) {

web/src/components/TaskLogsTable.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Label } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
 import {
   API,
   copy,
@@ -10,17 +10,28 @@ import {
 } from '../helpers';
 
 import {
-  Table,
-  Tag,
-  Form,
   Button,
+  Card,
+  Checkbox,
+  DatePicker,
+  Divider,
+  Input,
   Layout,
   Modal,
-  Typography,
   Progress,
-  Card,
+  Skeleton,
+  Table,
+  Tag,
+  Typography,
 } from '@douyinfe/semi-ui';
 import { ITEMS_PER_PAGE } from '../constants';
+import {
+  IconEyeOpened,
+  IconSearch,
+  IconSetting,
+} from '@douyinfe/semi-icons';
+
+const { Text } = Typography;
 
 const colors = [
   'amber',
@@ -40,6 +51,20 @@ const colors = [
   'yellow',
 ];
 
+// 定义列键值常量
+const COLUMN_KEYS = {
+  SUBMIT_TIME: 'submit_time',
+  FINISH_TIME: 'finish_time',
+  DURATION: 'duration',
+  CHANNEL: 'channel',
+  PLATFORM: 'platform',
+  TYPE: 'type',
+  TASK_ID: 'task_id',
+  TASK_STATUS: 'task_status',
+  PROGRESS: 'progress',
+  FAIL_REASON: 'fail_reason',
+};
+
 const renderTimestamp = (timestampInSeconds) => {
   const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
 
@@ -79,101 +104,266 @@ function renderDuration(submit_time, finishTime) {
 }
 
 const LogsTable = () => {
+  const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
+
+  // 列可见性状态
+  const [visibleColumns, setVisibleColumns] = useState({});
+  const [showColumnSelector, setShowColumnSelector] = useState(false);
   const isAdminUser = isAdmin();
-  const columns = [
-    {
-      title: '提交时间',
-      dataIndex: 'submit_time',
-      render: (text, record, index) => {
-        return <div>{text ? renderTimestamp(text) : '-'}</div>;
-      },
-    },
-    {
-      title: '结束时间',
-      dataIndex: 'finish_time',
-      render: (text, record, index) => {
-        return <div>{text ? renderTimestamp(text) : '-'}</div>;
-      },
-    },
-    {
-      title: '进度',
-      dataIndex: 'progress',
-      width: 50,
-      render: (text, record, index) => {
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
+
+  // 加载保存的列偏好设置
+  useEffect(() => {
+    const savedColumns = localStorage.getItem('task-logs-table-columns');
+    if (savedColumns) {
+      try {
+        const parsed = JSON.parse(savedColumns);
+        const defaults = getDefaultColumnVisibility();
+        const merged = { ...defaults, ...parsed };
+        setVisibleColumns(merged);
+      } catch (e) {
+        console.error('Failed to parse saved column preferences', e);
+        initDefaultColumns();
+      }
+    } else {
+      initDefaultColumns();
+    }
+  }, []);
+
+  // 获取默认列可见性
+  const getDefaultColumnVisibility = () => {
+    return {
+      [COLUMN_KEYS.SUBMIT_TIME]: true,
+      [COLUMN_KEYS.FINISH_TIME]: true,
+      [COLUMN_KEYS.DURATION]: true,
+      [COLUMN_KEYS.CHANNEL]: isAdminUser,
+      [COLUMN_KEYS.PLATFORM]: true,
+      [COLUMN_KEYS.TYPE]: true,
+      [COLUMN_KEYS.TASK_ID]: true,
+      [COLUMN_KEYS.TASK_STATUS]: true,
+      [COLUMN_KEYS.PROGRESS]: true,
+      [COLUMN_KEYS.FAIL_REASON]: true,
+    };
+  };
+
+  // 初始化默认列可见性
+  const initDefaultColumns = () => {
+    const defaults = getDefaultColumnVisibility();
+    setVisibleColumns(defaults);
+    localStorage.setItem('task-logs-table-columns', JSON.stringify(defaults));
+  };
+
+  // 处理列可见性变化
+  const handleColumnVisibilityChange = (columnKey, checked) => {
+    const updatedColumns = { ...visibleColumns, [columnKey]: checked };
+    setVisibleColumns(updatedColumns);
+  };
+
+  // 处理全选
+  const handleSelectAll = (checked) => {
+    const allKeys = Object.keys(COLUMN_KEYS).map((key) => COLUMN_KEYS[key]);
+    const updatedColumns = {};
+
+    allKeys.forEach((key) => {
+      if (key === COLUMN_KEYS.CHANNEL && !isAdminUser) {
+        updatedColumns[key] = false;
+      } else {
+        updatedColumns[key] = checked;
+      }
+    });
+
+    setVisibleColumns(updatedColumns);
+  };
+
+  // 更新表格时保存列可见性
+  useEffect(() => {
+    if (Object.keys(visibleColumns).length > 0) {
+      localStorage.setItem('task-logs-table-columns', JSON.stringify(visibleColumns));
+    }
+  }, [visibleColumns]);
+
+  const renderType = (type) => {
+    switch (type) {
+      case 'MUSIC':
         return (
-          <div>
-            {
-              // 转换例如100%为数字100，如果text未定义，返回0
-              isNaN(text.replace('%', '')) ? (
-                text
-              ) : (
-                <Progress
-                  width={42}
-                  type='circle'
-                  showInfo={true}
-                  percent={Number(text.replace('%', '') || 0)}
-                  aria-label='drawing progress'
-                />
-              )
-            }
-          </div>
+          <Tag color='grey' size='large' shape='circle'>
+            {t('生成音乐')}
+          </Tag>
         );
+      case 'LYRICS':
+        return (
+          <Tag color='pink' size='large' shape='circle'>
+            {t('生成歌词')}
+          </Tag>
+        );
+      default:
+        return (
+          <Tag color='white' size='large' shape='circle'>
+            {t('未知')}
+          </Tag>
+        );
+    }
+  };
+
+  const renderPlatform = (type) => {
+    switch (type) {
+      case 'suno':
+        return (
+          <Tag color='green' size='large' shape='circle'>
+            Suno
+          </Tag>
+        );
+      default:
+        return (
+          <Tag color='white' size='large' shape='circle'>
+            {t('未知')}
+          </Tag>
+        );
+    }
+  };
+
+  const renderStatus = (type) => {
+    switch (type) {
+      case 'SUCCESS':
+        return (
+          <Tag color='green' size='large' shape='circle'>
+            {t('成功')}
+          </Tag>
+        );
+      case 'NOT_START':
+        return (
+          <Tag color='grey' size='large' shape='circle'>
+            {t('未启动')}
+          </Tag>
+        );
+      case 'SUBMITTED':
+        return (
+          <Tag color='yellow' size='large' shape='circle'>
+            {t('队列中')}
+          </Tag>
+        );
+      case 'IN_PROGRESS':
+        return (
+          <Tag color='blue' size='large' shape='circle'>
+            {t('执行中')}
+          </Tag>
+        );
+      case 'FAILURE':
+        return (
+          <Tag color='red' size='large' shape='circle'>
+            {t('失败')}
+          </Tag>
+        );
+      case 'QUEUED':
+        return (
+          <Tag color='orange' size='large' shape='circle'>
+            {t('排队中')}
+          </Tag>
+        );
+      case 'UNKNOWN':
+        return (
+          <Tag color='white' size='large' shape='circle'>
+            {t('未知')}
+          </Tag>
+        );
+      case '':
+        return (
+          <Tag color='grey' size='large' shape='circle'>
+            {t('正在提交')}
+          </Tag>
+        );
+      default:
+        return (
+          <Tag color='white' size='large' shape='circle'>
+            {t('未知')}
+          </Tag>
+        );
+    }
+  };
+
+  // 定义所有列
+  const allColumns = [
+    {
+      key: COLUMN_KEYS.SUBMIT_TIME,
+      title: t('提交时间'),
+      dataIndex: 'submit_time',
+      width: 180,
+      render: (text, record, index) => {
+        return <div>{text ? renderTimestamp(text) : '-'}</div>;
       },
     },
     {
-      title: '花费时间',
-      dataIndex: 'finish_time', // 以finish_time作为dataIndex
-      key: 'finish_time',
+      key: COLUMN_KEYS.FINISH_TIME,
+      title: t('结束时间'),
+      dataIndex: 'finish_time',
+      width: 180,
+      render: (text, record, index) => {
+        return <div>{text ? renderTimestamp(text) : '-'}</div>;
+      },
+    },
+    {
+      key: COLUMN_KEYS.DURATION,
+      title: t('花费时间'),
+      dataIndex: 'finish_time',
+      width: 120,
       render: (finish, record) => {
-        // 假设record.start_time是存在的，并且finish是完成时间的时间戳
         return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
       },
     },
     {
-      title: '渠道',
+      key: COLUMN_KEYS.CHANNEL,
+      title: t('渠道'),
       dataIndex: 'channel_id',
+      width: 100,
       className: isAdminUser ? 'tableShow' : 'tableHiddle',
       render: (text, record, index) => {
-        return (
+        return isAdminUser ? (
           <div>
             <Tag
               color={colors[parseInt(text) % colors.length]}
               size='large'
+              shape='circle'
               onClick={() => {
-                copyText(text); // 假设copyText是用于文本复制的函数
+                copyText(text);
               }}
             >
-              {' '}
-              {text}{' '}
+              {text}
             </Tag>
           </div>
+        ) : (
+          <></>
         );
       },
     },
     {
-      title: '平台',
+      key: COLUMN_KEYS.PLATFORM,
+      title: t('平台'),
       dataIndex: 'platform',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderPlatform(text)}</div>;
       },
     },
     {
-      title: '类型',
+      key: COLUMN_KEYS.TYPE,
+      title: t('类型'),
       dataIndex: 'action',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderType(text)}</div>;
       },
     },
     {
-      title: '任务ID（点击查看详情）',
+      key: COLUMN_KEYS.TASK_ID,
+      title: t('任务ID'),
       dataIndex: 'task_id',
+      width: 200,
       render: (text, record, index) => {
         return (
           <Typography.Text
             ellipsis={{ showTooltip: true }}
-            //style={{width: 100}}
             onClick={() => {
               setModalContent(JSON.stringify(record, null, 2));
               setIsModalOpen(true);
@@ -185,22 +375,51 @@ const LogsTable = () => {
       },
     },
     {
-      title: '任务状态',
+      key: COLUMN_KEYS.TASK_STATUS,
+      title: t('任务状态'),
       dataIndex: 'status',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderStatus(text)}</div>;
       },
     },
-
     {
-      title: '失败原因',
-      dataIndex: 'fail_reason',
+      key: COLUMN_KEYS.PROGRESS,
+      title: t('进度'),
+      dataIndex: 'progress',
+      width: 160,
+      render: (text, record, index) => {
+        return (
+          <div>
+            {
+              isNaN(text?.replace('%', '')) ? (
+                text || '-'
+              ) : (
+                <Progress
+                  stroke={
+                    record.status === 'FAILURE'
+                      ? 'var(--semi-color-warning)'
+                      : null
+                  }
+                  percent={text ? parseInt(text.replace('%', '')) : 0}
+                  showInfo={true}
+                  aria-label='task progress'
+                />
+              )
+            }
+          </div>
+        );
+      },
+    },
+    {
+      key: COLUMN_KEYS.FAIL_REASON,
+      title: t('失败原因'),
+      dataIndex: 'fail_reason',
+      width: 160,
       render: (text, record, index) => {
-        // 如果text未定义，返回替代文本，例如空字符串''或其他
         if (!text) {
-          return '无';
+          return t('无');
         }
-
         return (
           <Typography.Text
             ellipsis={{ showTooltip: true }}
@@ -217,6 +436,11 @@ const LogsTable = () => {
     },
   ];
 
+  // 根据可见性设置过滤列
+  const getVisibleColumns = () => {
+    return allColumns.filter((column) => visibleColumns[column.key]);
+  };
+
   const [logs, setLogs] = useState([]);
   const [loading, setLoading] = useState(true);
   const [activePage, setActivePage] = useState(1);
@@ -249,16 +473,16 @@ const LogsTable = () => {
     // console.log(logCount);
   };
 
-  const loadLogs = async (startIdx) => {
+  const loadLogs = async (startIdx, pageSize = ITEMS_PER_PAGE) => {
     setLoading(true);
 
     let url = '';
     let localStartTimestamp = parseInt(Date.parse(start_timestamp) / 1000);
     let localEndTimestamp = parseInt(Date.parse(end_timestamp) / 1000);
     if (isAdminUser) {
-      url = `/api/task/?p=${startIdx}&channel_id=${channel_id}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+      url = `/api/task/?p=${startIdx}&page_size=${pageSize}&channel_id=${channel_id}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     } else {
-      url = `/api/task/self?p=${startIdx}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
+      url = `/api/task/self?p=${startIdx}&page_size=${pageSize}&task_id=${task_id}&start_timestamp=${localStartTimestamp}&end_timestamp=${localEndTimestamp}`;
     }
     const res = await API.get(url);
     let { success, message, data } = res.data;
@@ -267,7 +491,7 @@ const LogsTable = () => {
         setLogsFormat(data);
       } else {
         let newLogs = [...logs];
-        newLogs.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+        newLogs.splice(startIdx * pageSize, data.length, ...data);
         setLogsFormat(newLogs);
       }
     } else {
@@ -277,223 +501,236 @@ const LogsTable = () => {
   };
 
   const pageData = logs.slice(
-    (activePage - 1) * ITEMS_PER_PAGE,
-    activePage * ITEMS_PER_PAGE,
+    (activePage - 1) * pageSize,
+    activePage * pageSize,
   );
 
   const handlePageChange = (page) => {
     setActivePage(page);
-    if (page === Math.ceil(logs.length / ITEMS_PER_PAGE) + 1) {
-      // In this case we have to load more data and then append them.
-      loadLogs(page - 1).then((r) => {});
+    if (page === Math.ceil(logs.length / pageSize) + 1) {
+      loadLogs(page - 1, pageSize).then((r) => { });
     }
   };
 
-  const refresh = async () => {
-    // setLoading(true);
+  const handlePageSizeChange = async (size) => {
+    localStorage.setItem('task-page-size', size + '');
+    setPageSize(size);
     setActivePage(1);
-    await loadLogs(0);
+    await loadLogs(0, size);
+  };
+
+  const refresh = async () => {
+    setActivePage(1);
+    await loadLogs(0, pageSize);
   };
 
   const copyText = async (text) => {
     if (await copy(text)) {
-      showSuccess('已复制：' + text);
+      showSuccess(t('已复制：') + text);
     } else {
-      // setSearchKeyword(text);
-      Modal.error({ title: '无法复制到剪贴板，请手动复制', content: text });
+      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
     }
   };
 
   useEffect(() => {
-    refresh().then();
+    const localPageSize = parseInt(localStorage.getItem('task-page-size')) || ITEMS_PER_PAGE;
+    setPageSize(localPageSize);
+    loadLogs(0, localPageSize).then();
   }, [logType]);
 
-  const renderType = (type) => {
-    switch (type) {
-      case 'MUSIC':
-        return (
-          <Label basic color='grey'>
-            {' '}
-            生成音乐{' '}
-          </Label>
-        );
-      case 'LYRICS':
-        return (
-          <Label basic color='pink'>
-            {' '}
-            生成歌词{' '}
-          </Label>
-        );
+  // 列选择器模态框
+  const renderColumnSelector = () => {
+    return (
+      <Modal
+        title={t('列设置')}
+        visible={showColumnSelector}
+        onCancel={() => setShowColumnSelector(false)}
+        footer={
+          <div className="flex justify-end">
+            <Button
+              theme="light"
+              onClick={() => initDefaultColumns()}
+              className="!rounded-full"
+            >
+              {t('重置')}
+            </Button>
+            <Button
+              theme="light"
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
+              {t('取消')}
+            </Button>
+            <Button
+              type='primary'
+              onClick={() => setShowColumnSelector(false)}
+              className="!rounded-full"
+            >
+              {t('确定')}
+            </Button>
+          </div>
+        }
+      >
+        <div style={{ marginBottom: 20 }}>
+          <Checkbox
+            checked={Object.values(visibleColumns).every((v) => v === true)}
+            indeterminate={
+              Object.values(visibleColumns).some((v) => v === true) &&
+              !Object.values(visibleColumns).every((v) => v === true)
+            }
+            onChange={(e) => handleSelectAll(e.target.checked)}
+          >
+            {t('全选')}
+          </Checkbox>
+        </div>
+        <div className="flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4" style={{ border: '1px solid var(--semi-color-border)' }}>
+          {allColumns.map((column) => {
+            // 为非管理员用户跳过管理员专用列
+            if (!isAdminUser && column.key === COLUMN_KEYS.CHANNEL) {
+              return null;
+            }
 
-      default:
-        return (
-          <Label basic color='black'>
-            {' '}
-            未知{' '}
-          </Label>
-        );
-    }
-  };
-
-  const renderPlatform = (type) => {
-    switch (type) {
-      case 'suno':
-        return (
-          <Label basic color='green'>
-            {' '}
-            Suno{' '}
-          </Label>
-        );
-      default:
-        return (
-          <Label basic color='black'>
-            {' '}
-            未知{' '}
-          </Label>
-        );
-    }
-  };
-
-  const renderStatus = (type) => {
-    switch (type) {
-      case 'SUCCESS':
-        return (
-          <Label basic color='green'>
-            {' '}
-            成功{' '}
-          </Label>
-        );
-      case 'NOT_START':
-        return (
-          <Label basic color='black'>
-            {' '}
-            未启动{' '}
-          </Label>
-        );
-      case 'SUBMITTED':
-        return (
-          <Label basic color='yellow'>
-            {' '}
-            队列中{' '}
-          </Label>
-        );
-      case 'IN_PROGRESS':
-        return (
-          <Label basic color='blue'>
-            {' '}
-            执行中{' '}
-          </Label>
-        );
-      case 'FAILURE':
-        return (
-          <Label basic color='red'>
-            {' '}
-            失败{' '}
-          </Label>
-        );
-      case 'QUEUED':
-        return (
-          <Label basic color='red'>
-            {' '}
-            排队中{' '}
-          </Label>
-        );
-      case 'UNKNOWN':
-        return (
-          <Label basic color='red'>
-            {' '}
-            未知{' '}
-          </Label>
-        );
-      case '':
-        return (
-          <Label basic color='black'>
-            {' '}
-            正在提交{' '}
-          </Label>
-        );
-      default:
-        return (
-          <Label basic color='black'>
-            {' '}
-            未知{' '}
-          </Label>
-        );
-    }
+            return (
+              <div key={column.key} className="w-1/2 mb-4 pr-2">
+                <Checkbox
+                  checked={!!visibleColumns[column.key]}
+                  onChange={(e) =>
+                    handleColumnVisibilityChange(column.key, e.target.checked)
+                  }
+                >
+                  {column.title}
+                </Checkbox>
+              </div>
+            );
+          })}
+        </div>
+      </Modal>
+    );
   };
 
   return (
     <>
+      {renderColumnSelector()}
       <Layout>
-        <Form layout='horizontal' labelPosition='inset'>
-          <>
-            {isAdminUser && (
-              <Form.Input
-                field='channel_id'
-                label='渠道 ID'
-                style={{ width: '236px', marginBottom: '10px' }}
-                value={channel_id}
-                placeholder={'可选值'}
-                name='channel_id'
-                onChange={(value) => handleInputChange(value, 'channel_id')}
-              />
-            )}
-            <Form.Input
-              field='task_id'
-              label={'任务 ID'}
-              style={{ width: '236px', marginBottom: '10px' }}
-              value={task_id}
-              placeholder={'可选值'}
-              name='task_id'
-              onChange={(value) => handleInputChange(value, 'task_id')}
-            />
+        <Card
+          className="!rounded-2xl overflow-hidden mb-4"
+          title={
+            <div className="flex flex-col w-full">
+              <div className="flex flex-col md:flex-row justify-between items-center">
+                <div className="flex items-center text-orange-500 mb-2 md:mb-0">
+                  <IconEyeOpened className="mr-2" />
+                  {loading ? (
+                    <Skeleton.Title
+                      style={{
+                        width: 300,
+                        marginBottom: 0,
+                        marginTop: 0
+                      }}
+                    />
+                  ) : (
+                    <Text>{t('任务记录')}</Text>
+                  )}
+                </div>
+              </div>
 
-            <Form.DatePicker
-              field='start_timestamp'
-              label={'起始时间'}
-              style={{ width: '236px', marginBottom: '10px' }}
-              initValue={start_timestamp}
-              value={start_timestamp}
-              type='dateTime'
-              name='start_timestamp'
-              onChange={(value) => handleInputChange(value, 'start_timestamp')}
-            />
-            <Form.DatePicker
-              field='end_timestamp'
-              fluid
-              label={'结束时间'}
-              style={{ width: '236px', marginBottom: '10px' }}
-              initValue={end_timestamp}
-              value={end_timestamp}
-              type='dateTime'
-              name='end_timestamp'
-              onChange={(value) => handleInputChange(value, 'end_timestamp')}
-            />
-            <Button
-              label={'查询'}
-              type='primary'
-              htmlType='submit'
-              className='btn-margin-right'
-              onClick={refresh}
-            >
-              查询
-            </Button>
-          </>
-        </Form>
-        <Card>
+              <Divider margin="12px" />
+
+              {/* 搜索表单区域 */}
+              <div className="flex flex-col gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  {/* 时间选择器 */}
+                  <div className="col-span-1 lg:col-span-2">
+                    <DatePicker
+                      className="w-full"
+                      value={[start_timestamp, end_timestamp]}
+                      type='dateTimeRange'
+                      onChange={(value) => {
+                        if (Array.isArray(value) && value.length === 2) {
+                          handleInputChange(value[0], 'start_timestamp');
+                          handleInputChange(value[1], 'end_timestamp');
+                        }
+                      }}
+                    />
+                  </div>
+
+                  {/* 任务 ID */}
+                  <Input
+                    prefix={<IconSearch />}
+                    placeholder={t('任务 ID')}
+                    value={task_id}
+                    onChange={(value) => handleInputChange(value, 'task_id')}
+                    className="!rounded-full"
+                    showClear
+                  />
+
+                  {/* 渠道 ID - 仅管理员可见 */}
+                  {isAdminUser && (
+                    <Input
+                      prefix={<IconSearch />}
+                      placeholder={t('渠道 ID')}
+                      value={channel_id}
+                      onChange={(value) => handleInputChange(value, 'channel_id')}
+                      className="!rounded-full"
+                      showClear
+                    />
+                  )}
+                </div>
+
+                {/* 操作按钮区域 */}
+                <div className="flex justify-between items-center pt-2">
+                  <div></div>
+                  <div className="flex gap-2">
+                    <Button
+                      type='primary'
+                      onClick={refresh}
+                      loading={loading}
+                      className="!rounded-full"
+                    >
+                      {t('查询')}
+                    </Button>
+                    <Button
+                      theme='light'
+                      type='tertiary'
+                      icon={<IconSetting />}
+                      onClick={() => setShowColumnSelector(true)}
+                      className="!rounded-full"
+                    >
+                      {t('列设置')}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+          shadows='hover'
+        >
           <Table
-            columns={columns}
+            columns={getVisibleColumns()}
             dataSource={pageData}
+            rowKey='key'
+            loading={loading}
+            className="rounded-xl overflow-hidden"
+            size="middle"
             pagination={{
+              formatPageText: (page) =>
+                t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                  start: page.currentStart,
+                  end: page.currentEnd,
+                  total: logCount,
+                }),
               currentPage: activePage,
-              pageSize: ITEMS_PER_PAGE,
+              pageSize: pageSize,
               total: logCount,
-              pageSizeOpts: [10, 20, 50, 100],
+              pageSizeOptions: [10, 20, 50, 100],
+              showSizeChanger: true,
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size);
+              },
               onPageChange: handlePageChange,
             }}
-            loading={loading}
           />
         </Card>
+
         <Modal
           visible={isModalOpen}
           onOk={() => setIsModalOpen(false)}

web/src/components/TokensTable.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   API,
   copy,
@@ -11,21 +12,36 @@ import { ITEMS_PER_PAGE } from '../constants';
 import { renderGroup, renderQuota } from '../helpers/render';
 import {
   Button,
-  Divider,
+  Card,
   Dropdown,
-  Form,
   Modal,
-  Popconfirm,
-  Popover,
   Space,
   SplitButtonGroup,
   Table,
   Tag,
+  Input,
+  Divider,
+  Avatar,
 } from '@douyinfe/semi-ui';
 
-import { IconTreeTriangleDown } from '@douyinfe/semi-icons';
+import {
+  IconPlus,
+  IconCopy,
+  IconSearch,
+  IconTreeTriangleDown,
+  IconEyeOpened,
+  IconEdit,
+  IconDelete,
+  IconStop,
+  IconPlay,
+  IconMore,
+  IconMoneyExchangeStroked,
+  IconHistogram,
+  IconRotate,
+} from '@douyinfe/semi-icons';
 import EditToken from '../pages/Token/EditToken';
 import { useTranslation } from 'react-i18next';
+import { UserContext } from '../context/User';
 
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
@@ -33,44 +49,46 @@ function renderTimestamp(timestamp) {
 
 const TokensTable = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [userState, userDispatch] = useContext(UserContext);
 
   const renderStatus = (status, model_limits_enabled = false) => {
     switch (status) {
       case 1:
         if (model_limits_enabled) {
           return (
-            <Tag color='green' size='large'>
+            <Tag color='green' size='large' shape='circle'>
               {t('已启用：限制模型')}
             </Tag>
           );
         } else {
           return (
-            <Tag color='green' size='large'>
+            <Tag color='green' size='large' shape='circle'>
               {t('已启用')}
             </Tag>
           );
         }
       case 2:
         return (
-          <Tag color='red' size='large'>
+          <Tag color='red' size='large' shape='circle'>
             {t('已禁用')}
           </Tag>
         );
       case 3:
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('已过期')}
           </Tag>
         );
       case 4:
         return (
-          <Tag color='grey' size='large'>
+          <Tag color='grey' size='large' shape='circle'>
             {t('已耗尽')}
           </Tag>
         );
       default:
         return (
-          <Tag color='black' size='large'>
+          <Tag color='black' size='large' shape='circle'>
             {t('未知状态')}
           </Tag>
         );
@@ -81,11 +99,13 @@ const TokensTable = () => {
     {
       title: t('名称'),
       dataIndex: 'name',
+      width: 180,
     },
     {
       title: t('状态'),
       dataIndex: 'status',
       key: 'status',
+      width: 200,
       render: (text, record, index) => {
         return (
           <div>
@@ -100,6 +120,7 @@ const TokensTable = () => {
     {
       title: t('已用额度'),
       dataIndex: 'used_quota',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderQuota(parseInt(text))}</div>;
       },
@@ -107,15 +128,16 @@ const TokensTable = () => {
     {
       title: t('剩余额度'),
       dataIndex: 'remain_quota',
+      width: 120,
       render: (text, record, index) => {
         return (
           <div>
             {record.unlimited_quota ? (
-              <Tag size={'large'} color={'white'}>
+              <Tag size={'large'} color={'white'} shape='circle'>
                 {t('无限制')}
               </Tag>
             ) : (
-              <Tag size={'large'} color={'light-blue'}>
+              <Tag size={'large'} color={'light-blue'} shape='circle'>
                 {renderQuota(parseInt(text))}
               </Tag>
             )}
@@ -126,6 +148,7 @@ const TokensTable = () => {
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
+      width: 180,
       render: (text, record, index) => {
         return <div>{renderTimestamp(text)}</div>;
       },
@@ -133,6 +156,7 @@ const TokensTable = () => {
     {
       title: t('过期时间'),
       dataIndex: 'expired_time',
+      width: 180,
       render: (text, record, index) => {
         return (
           <div>
@@ -144,6 +168,7 @@ const TokensTable = () => {
     {
       title: '',
       dataIndex: 'operate',
+      width: 320,
       render: (text, record, index) => {
         let chats = localStorage.getItem('chats');
         let chatsArray = [];
@@ -151,16 +176,11 @@ const TokensTable = () => {
 
         if (shouldUseCustom) {
           try {
-            // console.log(chats);
             chats = JSON.parse(chats);
-            // check chats is array
             if (Array.isArray(chats)) {
               for (let i = 0; i < chats.length; i++) {
                 let chat = {};
                 chat.node = 'item';
-                // c is a map
-                // chat.key = chats[i].name;
-                // console.log(chats[i])
                 for (let key in chats[i]) {
                   if (chats[i].hasOwnProperty(key)) {
                     chat.key = i;
@@ -178,33 +198,72 @@ const TokensTable = () => {
             showError(t('聊天链接配置错误，请联系管理员'));
           }
         }
+
+        // 创建更多操作的下拉菜单项
+        const moreMenuItems = [
+          {
+            node: 'item',
+            name: t('查看'),
+            icon: <IconEyeOpened />,
+            onClick: () => {
+              Modal.info({
+                title: t('令牌详情'),
+                content: 'sk-' + record.key,
+                size: 'large',
+              });
+            },
+          },
+          {
+            node: 'item',
+            name: t('删除'),
+            icon: <IconDelete />,
+            type: 'danger',
+            onClick: () => {
+              Modal.confirm({
+                title: t('确定是否要删除此令牌？'),
+                content: t('此修改将不可逆'),
+                onOk: () => {
+                  manageToken(record.id, 'delete', record).then(() => {
+                    removeRecord(record.key);
+                  });
+                },
+              });
+            },
+          }
+        ];
+
+        // 动态添加启用/禁用按钮
+        if (record.status === 1) {
+          moreMenuItems.push({
+            node: 'item',
+            name: t('禁用'),
+            icon: <IconStop />,
+            type: 'warning',
+            onClick: () => {
+              manageToken(record.id, 'disable', record);
+            },
+          });
+        } else {
+          moreMenuItems.push({
+            node: 'item',
+            name: t('启用'),
+            icon: <IconPlay />,
+            type: 'secondary',
+            onClick: () => {
+              manageToken(record.id, 'enable', record);
+            },
+          });
+        }
+
         return (
-          <div>
-            <Popover
-              content={'sk-' + record.key}
-              style={{ padding: 20 }}
-              position='top'
-            >
-              <Button theme='light' type='tertiary' style={{ marginRight: 1 }}>
-                {t('查看')}
-              </Button>
-            </Popover>
-            <Button
-              theme='light'
-              type='secondary'
-              style={{ marginRight: 1 }}
-              onClick={async (text) => {
-                await copyText('sk-' + record.key);
-              }}
-            >
-              {t('复制')}
-            </Button>
+          <Space wrap>
             <SplitButtonGroup
-              style={{ marginRight: 1 }}
+              className="!rounded-full overflow-hidden"
               aria-label={t('项目操作按钮组')}
             >
               <Button
                 theme='light'
+                size="small"
                 style={{ color: 'rgba(var(--semi-teal-7), 1)' }}
                 onClick={() => {
                   if (chatsArray.length === 0) {
@@ -227,56 +286,35 @@ const TokensTable = () => {
               >
                 <Button
                   style={{
-                    padding: '8px 4px',
+                    padding: '4px 4px',
                     color: 'rgba(var(--semi-teal-7), 1)',
                   }}
                   type='primary'
                   icon={<IconTreeTriangleDown />}
+                  size="small"
                 ></Button>
               </Dropdown>
             </SplitButtonGroup>
-            <Popconfirm
-              title={t('确定是否要删除此令牌？')}
-              content={t('此修改将不可逆')}
-              okType={'danger'}
-              position={'left'}
-              onConfirm={() => {
-                manageToken(record.id, 'delete', record).then(() => {
-                  removeRecord(record.key);
-                });
+
+            <Button
+              icon={<IconCopy />}
+              theme='light'
+              type='secondary'
+              size="small"
+              className="!rounded-full"
+              onClick={async (text) => {
+                await copyText('sk-' + record.key);
               }}
             >
-              <Button theme='light' type='danger' style={{ marginRight: 1 }}>
-                {t('删除')}
-              </Button>
-            </Popconfirm>
-            {record.status === 1 ? (
-              <Button
-                theme='light'
-                type='warning'
-                style={{ marginRight: 1 }}
-                onClick={async () => {
-                  manageToken(record.id, 'disable', record);
-                }}
-              >
-                {t('禁用')}
-              </Button>
-            ) : (
-              <Button
-                theme='light'
-                type='secondary'
-                style={{ marginRight: 1 }}
-                onClick={async () => {
-                  manageToken(record.id, 'enable', record);
-                }}
-              >
-                {t('启用')}
-              </Button>
-            )}
+              {t('复制')}
+            </Button>
+
             <Button
+              icon={<IconEdit />}
               theme='light'
               type='tertiary'
-              style={{ marginRight: 1 }}
+              size="small"
+              className="!rounded-full"
               onClick={() => {
                 setEditingToken(record);
                 setShowEdit(true);
@@ -284,7 +322,21 @@ const TokensTable = () => {
             >
               {t('编辑')}
             </Button>
-          </div>
+
+            <Dropdown
+              trigger='click'
+              position='bottomRight'
+              menu={moreMenuItems}
+            >
+              <Button
+                icon={<IconMore />}
+                theme='light'
+                type='tertiary'
+                size="small"
+                className="!rounded-full"
+              />
+            </Dropdown>
+          </Space>
         );
       },
     },
@@ -362,7 +414,6 @@ const TokensTable = () => {
   };
 
   const onOpenLink = async (type, url, record) => {
-    // console.log(type, url, key);
     let status = localStorage.getItem('status');
     let serverAddress = '';
     if (status) {
@@ -379,7 +430,26 @@ const TokensTable = () => {
     window.open(url, '_blank');
   };
 
+  // 获取用户数据
+  const getUserData = async () => {
+    try {
+      const res = await API.get(`/api/user/self`);
+      const { success, message, data } = res.data;
+      if (success) {
+        userDispatch({ type: 'login', payload: data });
+      } else {
+        showError(message);
+      }
+    } catch (error) {
+      console.error('获取用户数据失败:', error);
+      showError(t('获取用户数据失败'));
+    }
+  };
+
   useEffect(() => {
+    // 获取用户数据以确保显示正确的余额和使用量
+    getUserData();
+
     loadTokens(0)
       .then()
       .catch((reason) => {
@@ -421,11 +491,9 @@ const TokensTable = () => {
       showSuccess('操作成功完成！');
       let token = res.data.data;
       let newTokens = [...tokens];
-      // let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
       if (action === 'delete') {
       } else {
         record.status = token.status;
-        // newTokens[realIdx].status = token.status;
       }
       setTokensFormat(newTokens);
     } else {
@@ -436,7 +504,6 @@ const TokensTable = () => {
 
   const searchTokens = async () => {
     if (searchKeyword === '' && searchToken === '') {
-      // if keyword is blank, load files instead.
       await loadTokens(0);
       setActivePage(1);
       return;
@@ -480,14 +547,13 @@ const TokensTable = () => {
   const handlePageChange = (page) => {
     setActivePage(page);
     if (page === Math.ceil(tokens.length / pageSize) + 1) {
-      // In this case we have to load more data and then append them.
-      loadTokens(page - 1).then((r) => {});
+      loadTokens(page - 1).then((r) => { });
     }
   };
 
   const rowSelection = {
-    onSelect: (record, selected) => {},
-    onSelectAll: (selected, selectedRows) => {},
+    onSelect: (record, selected) => { },
+    onSelectAll: (selected, selectedRows) => { },
     onChange: (selectedRowKeys, selectedRows) => {
       setSelectedKeys(selectedRows);
     },
@@ -505,6 +571,145 @@ const TokensTable = () => {
     }
   };
 
+  const renderHeader = () => (
+    <div className="flex flex-col w-full">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card
+          shadows='hover'
+          className="bg-blue-50 border-0 !rounded-2xl w-full"
+          headerLine={false}
+          onClick={() => navigate('/console/topup')}
+        >
+          <div className="flex items-center">
+            <Avatar
+              className="mr-3"
+              size="medium"
+              color="blue"
+            >
+              <IconMoneyExchangeStroked size="large" />
+            </Avatar>
+            <div>
+              <div className="text-sm text-gray-500">{t('当前余额')}</div>
+              <div className="text-xl font-semibold">{renderQuota(userState?.user?.quota)}</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card
+          shadows='hover'
+          className="bg-purple-50 border-0 !rounded-2xl w-full"
+          headerLine={false}
+        >
+          <div className="flex items-center">
+            <Avatar
+              className="mr-3"
+              size="medium"
+              color="purple"
+            >
+              <IconHistogram size="large" />
+            </Avatar>
+            <div>
+              <div className="text-sm text-gray-500">{t('累计消费')}</div>
+              <div className="text-xl font-semibold">{renderQuota(userState?.user?.used_quota)}</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card
+          shadows='hover'
+          className="bg-green-50 border-0 !rounded-2xl w-full"
+          headerLine={false}
+        >
+          <div className="flex items-center">
+            <Avatar
+              className="mr-3"
+              size="medium"
+              color="green"
+            >
+              <IconRotate size="large" />
+            </Avatar>
+            <div>
+              <div className="text-sm text-gray-500">{t('请求次数')}</div>
+              <div className="text-xl font-semibold">{userState?.user?.request_count || 0}</div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Divider margin="12px" />
+
+      <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
+        <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
+          <Button
+            theme="light"
+            type="primary"
+            icon={<IconPlus />}
+            className="!rounded-full w-full md:w-auto"
+            onClick={() => {
+              setEditingToken({
+                id: undefined,
+              });
+              setShowEdit(true);
+            }}
+          >
+            {t('添加令牌')}
+          </Button>
+          <Button
+            theme="light"
+            type="warning"
+            icon={<IconCopy />}
+            className="!rounded-full w-full md:w-auto"
+            onClick={async () => {
+              if (selectedKeys.length === 0) {
+                showError(t('请至少选择一个令牌！'));
+                return;
+              }
+              let keys = '';
+              for (let i = 0; i < selectedKeys.length; i++) {
+                keys +=
+                  selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
+              }
+              await copyText(keys);
+            }}
+          >
+            {t('复制所选兑换码到剪贴板')}
+          </Button>
+        </div>
+
+        <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto order-1 md:order-2">
+          <div className="relative w-full md:w-56">
+            <Input
+              prefix={<IconSearch />}
+              placeholder={t('搜索关键字')}
+              value={searchKeyword}
+              onChange={handleKeywordChange}
+              className="!rounded-full"
+              showClear
+            />
+          </div>
+          <div className="relative w-full md:w-56">
+            <Input
+              prefix={<IconSearch />}
+              placeholder={t('密钥')}
+              value={searchToken}
+              onChange={handleSearchTokenChange}
+              className="!rounded-full"
+              showClear
+            />
+          </div>
+          <Button
+            type="primary"
+            onClick={searchTokens}
+            loading={searching}
+            className="!rounded-full w-full md:w-auto"
+          >
+            {t('查询')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <>
       <EditToken
@@ -513,99 +718,40 @@ const TokensTable = () => {
         visiable={showEdit}
         handleClose={closeEdit}
       ></EditToken>
-      <Form
-        layout='horizontal'
-        style={{ marginTop: 10 }}
-        labelPosition={'left'}
-      >
-        <Form.Input
-          field='keyword'
-          label={t('搜索关键字')}
-          placeholder={t('令牌名称')}
-          value={searchKeyword}
-          loading={searching}
-          onChange={handleKeywordChange}
-        />
-        <Form.Input
-          field='token'
-          label={t('密钥')}
-          placeholder={t('密钥')}
-          value={searchToken}
-          loading={searching}
-          onChange={handleSearchTokenChange}
-        />
-        <Button
-          label={t('查询')}
-          type='primary'
-          htmlType='submit'
-          className='btn-margin-right'
-          onClick={searchTokens}
-          style={{ marginRight: 8 }}
-        >
-          {t('查询')}
-        </Button>
-      </Form>
-      <Divider style={{ margin: '15px 0' }} />
-      <div>
-        <Button
-          theme='light'
-          type='primary'
-          style={{ marginRight: 8 }}
-          onClick={() => {
-            setEditingToken({
-              id: undefined,
-            });
-            setShowEdit(true);
-          }}
-        >
-          {t('添加令牌')}
-        </Button>
-        <Button
-          label={t('复制所选令牌')}
-          type='warning'
-          onClick={async () => {
-            if (selectedKeys.length === 0) {
-              showError(t('请至少选择一个令牌！'));
-              return;
-            }
-            let keys = '';
-            for (let i = 0; i < selectedKeys.length; i++) {
-              keys +=
-                selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
-            }
-            await copyText(keys);
-          }}
-        >
-          {t('复制所选令牌到剪贴板')}
-        </Button>
-      </div>
 
-      <Table
-        style={{ marginTop: 20 }}
-        columns={columns}
-        dataSource={pageData}
-        pagination={{
-          currentPage: activePage,
-          pageSize: pageSize,
-          total: tokenCount,
-          showSizeChanger: true,
-          pageSizeOptions: [10, 20, 50, 100],
-          formatPageText: (page) =>
-            t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-              start: page.currentStart,
-              end: page.currentEnd,
-              total: tokens.length,
-            }),
-          onPageSizeChange: (size) => {
-            setPageSize(size);
-            setActivePage(1);
-          },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-        rowSelection={rowSelection}
-        onRow={handleRow}
-      ></Table>
+      <Card
+        className="!rounded-2xl overflow-hidden"
+        title={renderHeader()}
+        shadows='hover'
+      >
+        <Table
+          columns={columns}
+          dataSource={pageData}
+          pagination={{
+            currentPage: activePage,
+            pageSize: pageSize,
+            total: tokenCount,
+            showSizeChanger: true,
+            pageSizeOptions: [10, 20, 50, 100],
+            formatPageText: (page) =>
+              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                start: page.currentStart,
+                end: page.currentEnd,
+                total: tokens.length,
+              }),
+            onPageSizeChange: (size) => {
+              setPageSize(size);
+              setActivePage(1);
+            },
+            onPageChange: handlePageChange,
+          }}
+          loading={loading}
+          rowSelection={rowSelection}
+          onRow={handleRow}
+          className="rounded-xl overflow-hidden"
+          size="middle"
+        ></Table>
+      </Card>
     </>
   );
 };

web/src/components/UsersTable.js

@@ -2,58 +2,103 @@ import React, { useEffect, useState } from 'react';
 import { API, showError, showSuccess } from '../helpers';
 import {
   Button,
-  Form,
-  Popconfirm,
+  Card,
+  Divider,
+  Dropdown,
+  Input,
+  Modal,
+  Select,
   Space,
   Table,
   Tag,
-  Tooltip,
+  Typography,
 } from '@douyinfe/semi-ui';
+import {
+  IconPlus,
+  IconSearch,
+  IconEdit,
+  IconDelete,
+  IconStop,
+  IconPlay,
+  IconMore,
+  IconUserAdd,
+  IconArrowUp,
+  IconArrowDown,
+} from '@douyinfe/semi-icons';
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderGroup, renderNumber, renderQuota } from '../helpers/render';
 import AddUser from '../pages/User/AddUser';
 import EditUser from '../pages/User/EditUser';
 import { useTranslation } from 'react-i18next';
 
+const { Text } = Typography;
+
 const UsersTable = () => {
   const { t } = useTranslation();
 
   function renderRole(role) {
     switch (role) {
       case 1:
-        return <Tag size='large'>{t('普通用户')}</Tag>;
+        return (
+          <Tag size='large' color='blue' shape='circle'>
+            {t('普通用户')}
+          </Tag>
+        );
       case 10:
         return (
-          <Tag color='yellow' size='large'>
+          <Tag color='yellow' size='large' shape='circle'>
             {t('管理员')}
           </Tag>
         );
       case 100:
         return (
-          <Tag color='orange' size='large'>
+          <Tag color='orange' size='large' shape='circle'>
             {t('超级管理员')}
           </Tag>
         );
       default:
         return (
-          <Tag color='red' size='large'>
+          <Tag color='red' size='large' shape='circle'>
             {t('未知身份')}
           </Tag>
         );
     }
   }
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Tag size='large' color='green' shape='circle'>{t('已激活')}</Tag>;
+      case 2:
+        return (
+          <Tag size='large' color='red' shape='circle'>
+            {t('已封禁')}
+          </Tag>
+        );
+      default:
+        return (
+          <Tag size='large' color='grey' shape='circle'>
+            {t('未知状态')}
+          </Tag>
+        );
+    }
+  };
+
   const columns = [
     {
       title: 'ID',
       dataIndex: 'id',
+      width: 50,
     },
     {
       title: t('用户名'),
       dataIndex: 'username',
+      width: 100,
     },
     {
       title: t('分组'),
       dataIndex: 'group',
+      width: 100,
       render: (text, record, index) => {
         return <div>{renderGroup(text)}</div>;
       },
@@ -61,25 +106,20 @@ const UsersTable = () => {
     {
       title: t('统计信息'),
       dataIndex: 'info',
+      width: 280,
       render: (text, record, index) => {
         return (
           <div>
             <Space spacing={1}>
-              <Tooltip content={t('剩余额度')}>
-                <Tag color='white' size='large'>
-                  {renderQuota(record.quota)}
-                </Tag>
-              </Tooltip>
-              <Tooltip content={t('已用额度')}>
-                <Tag color='white' size='large'>
-                  {renderQuota(record.used_quota)}
-                </Tag>
-              </Tooltip>
-              <Tooltip content={t('调用次数')}>
-                <Tag color='white' size='large'>
-                  {renderNumber(record.request_count)}
-                </Tag>
-              </Tooltip>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {t('剩余')}: {renderQuota(record.quota)}
+              </Tag>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {t('已用')}: {renderQuota(record.used_quota)}
+              </Tag>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {t('调用')}: {renderNumber(record.request_count)}
+              </Tag>
             </Space>
           </div>
         );
@@ -88,31 +128,20 @@ const UsersTable = () => {
     {
       title: t('邀请信息'),
       dataIndex: 'invite',
+      width: 250,
       render: (text, record, index) => {
         return (
           <div>
             <Space spacing={1}>
-              <Tooltip content={t('邀请人数')}>
-                <Tag color='white' size='large'>
-                  {renderNumber(record.aff_count)}
-                </Tag>
-              </Tooltip>
-              <Tooltip content={t('邀请总收益')}>
-                <Tag color='white' size='large'>
-                  {renderQuota(record.aff_history_quota)}
-                </Tag>
-              </Tooltip>
-              <Tooltip content={t('邀请人ID')}>
-                {record.inviter_id === 0 ? (
-                  <Tag color='white' size='large'>
-                    {t('无')}
-                  </Tag>
-                ) : (
-                  <Tag color='white' size='large'>
-                    {record.inviter_id}
-                  </Tag>
-                )}
-              </Tooltip>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {t('邀请')}: {renderNumber(record.aff_count)}
+              </Tag>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {t('收益')}: {renderQuota(record.aff_history_quota)}
+              </Tag>
+              <Tag color='white' size='large' shape='circle' className="!text-xs">
+                {record.inviter_id === 0 ? t('无邀请人') : `邀请人: ${record.inviter_id}`}
+              </Tag>
             </Space>
           </div>
         );
@@ -121,6 +150,7 @@ const UsersTable = () => {
     {
       title: t('角色'),
       dataIndex: 'role',
+      width: 120,
       render: (text, record, index) => {
         return <div>{renderRole(text)}</div>;
       },
@@ -128,11 +158,12 @@ const UsersTable = () => {
     {
       title: t('状态'),
       dataIndex: 'status',
+      width: 100,
       render: (text, record, index) => {
         return (
           <div>
             {record.DeletedAt !== null ? (
-              <Tag color='red'>{t('已注销')}</Tag>
+              <Tag color='red' shape='circle'>{t('已注销')}</Tag>
             ) : (
               renderStatus(text)
             )}
@@ -143,92 +174,118 @@ const UsersTable = () => {
     {
       title: '',
       dataIndex: 'operate',
-      render: (text, record, index) => (
-        <div>
-          {record.DeletedAt !== null ? (
-            <></>
-          ) : (
-            <>
-              <Popconfirm
-                title={t('确定？')}
-                okType={'warning'}
-                onConfirm={() => {
+      width: 150,
+      render: (text, record, index) => {
+        if (record.DeletedAt !== null) {
+          return <></>;
+        }
+
+        // 创建更多操作的下拉菜单项
+        const moreMenuItems = [
+          {
+            node: 'item',
+            name: t('提升'),
+            icon: <IconArrowUp />,
+            type: 'warning',
+            onClick: () => {
+              Modal.confirm({
+                title: t('确定要提升此用户吗？'),
+                content: t('此操作将提升用户的权限级别'),
+                onOk: () => {
                   manageUser(record.id, 'promote', record);
-                }}
-              >
-                <Button theme='light' type='warning' style={{ marginRight: 1 }}>
-                  {t('提升')}
-                </Button>
-              </Popconfirm>
-              <Popconfirm
-                title={t('确定？')}
-                okType={'warning'}
-                onConfirm={() => {
+                },
+              });
+            },
+          },
+          {
+            node: 'item',
+            name: t('降级'),
+            icon: <IconArrowDown />,
+            type: 'secondary',
+            onClick: () => {
+              Modal.confirm({
+                title: t('确定要降级此用户吗？'),
+                content: t('此操作将降低用户的权限级别'),
+                onOk: () => {
                   manageUser(record.id, 'demote', record);
-                }}
-              >
-                <Button
-                  theme='light'
-                  type='secondary'
-                  style={{ marginRight: 1 }}
-                >
-                  {t('降级')}
-                </Button>
-              </Popconfirm>
-              {record.status === 1 ? (
-                <Button
-                  theme='light'
-                  type='warning'
-                  style={{ marginRight: 1 }}
-                  onClick={async () => {
-                    manageUser(record.id, 'disable', record);
-                  }}
-                >
-                  {t('禁用')}
-                </Button>
-              ) : (
-                <Button
-                  theme='light'
-                  type='secondary'
-                  style={{ marginRight: 1 }}
-                  onClick={async () => {
-                    manageUser(record.id, 'enable', record);
-                  }}
-                  disabled={record.status === 3}
-                >
-                  {t('启用')}
-                </Button>
-              )}
-              <Button
-                theme='light'
-                type='tertiary'
-                style={{ marginRight: 1 }}
-                onClick={() => {
-                  setEditingUser(record);
-                  setShowEditUser(true);
-                }}
-              >
-                {t('编辑')}
-              </Button>
-              <Popconfirm
-                title={t('确定是否要注销此用户？')}
-                content={t('相当于删除用户，此修改将不可逆')}
-                okType={'danger'}
-                position={'left'}
-                onConfirm={() => {
+                },
+              });
+            },
+          },
+          {
+            node: 'item',
+            name: t('注销'),
+            icon: <IconDelete />,
+            type: 'danger',
+            onClick: () => {
+              Modal.confirm({
+                title: t('确定是否要注销此用户？'),
+                content: t('相当于删除用户，此修改将不可逆'),
+                onOk: () => {
                   manageUser(record.id, 'delete', record).then(() => {
                     removeRecord(record.id);
                   });
-                }}
-              >
-                <Button theme='light' type='danger' style={{ marginRight: 1 }}>
-                  {t('注销')}
-                </Button>
-              </Popconfirm>
-            </>
-          )}
-        </div>
-      ),
+                },
+              });
+            },
+          }
+        ];
+
+        // 动态添加启用/禁用按钮
+        if (record.status === 1) {
+          moreMenuItems.splice(-1, 0, {
+            node: 'item',
+            name: t('禁用'),
+            icon: <IconStop />,
+            type: 'warning',
+            onClick: () => {
+              manageUser(record.id, 'disable', record);
+            },
+          });
+        } else {
+          moreMenuItems.splice(-1, 0, {
+            node: 'item',
+            name: t('启用'),
+            icon: <IconPlay />,
+            type: 'secondary',
+            onClick: () => {
+              manageUser(record.id, 'enable', record);
+            },
+            disabled: record.status === 3,
+          });
+        }
+
+        return (
+          <Space>
+            <Button
+              icon={<IconEdit />}
+              theme='light'
+              type='tertiary'
+              size="small"
+              className="!rounded-full"
+              onClick={() => {
+                setEditingUser(record);
+                setShowEditUser(true);
+              }}
+            >
+              {t('编辑')}
+            </Button>
+            <Dropdown
+              trigger='click'
+              position='bottomRight'
+              menu={moreMenuItems}
+            >
+              <Button
+                icon={<IconMore />}
+                theme='light'
+                type='tertiary'
+                size="small"
+                className="!rounded-full"
+              />
+            </Dropdown>
+          </Space>
+        );
+      },
     },
   ];
 
@@ -311,25 +368,6 @@ const UsersTable = () => {
     }
   };
 
-  const renderStatus = (status) => {
-    switch (status) {
-      case 1:
-        return <Tag size='large'>{t('已激活')}</Tag>;
-      case 2:
-        return (
-          <Tag size='large' color='red'>
-            {t('已封禁')}
-          </Tag>
-        );
-      default:
-        return (
-          <Tag size='large' color='grey'>
-            {t('未知状态')}
-          </Tag>
-        );
-    }
-  };
-
   const searchUsers = async (
     startIdx,
     pageSize,
@@ -420,6 +458,83 @@ const UsersTable = () => {
       });
   };
 
+  const handleRow = (record, index) => {
+    if (record.DeletedAt !== null || record.status !== 1) {
+      return {
+        style: {
+          background: 'var(--semi-color-disabled-border)',
+        },
+      };
+    } else {
+      return {};
+    }
+  };
+
+  const renderHeader = () => (
+    <div className="flex flex-col w-full">
+      <div className="mb-2">
+        <div className="flex items-center text-blue-500">
+          <IconUserAdd className="mr-2" />
+          <Text>{t('用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。')}</Text>
+        </div>
+      </div>
+
+      <Divider margin="12px" />
+
+      <div className="flex flex-col md:flex-row justify-between items-center gap-4 w-full">
+        <div className="flex gap-2 w-full md:w-auto order-2 md:order-1">
+          <Button
+            theme='light'
+            type='primary'
+            icon={<IconPlus />}
+            className="!rounded-full w-full md:w-auto"
+            onClick={() => {
+              setShowAddUser(true);
+            }}
+          >
+            {t('添加用户')}
+          </Button>
+        </div>
+
+        <div className="flex flex-col md:flex-row items-center gap-4 w-full md:w-auto order-1 md:order-2">
+          <div className="relative w-full md:w-64">
+            <Input
+              prefix={<IconSearch />}
+              placeholder={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}
+              value={searchKeyword}
+              onChange={handleKeywordChange}
+              className="!rounded-full"
+              showClear
+            />
+          </div>
+          <div className="w-full md:w-48">
+            <Select
+              placeholder={t('选择分组')}
+              optionList={groupOptions}
+              value={searchGroup}
+              onChange={(value) => {
+                setSearchGroup(value);
+                searchUsers(activePage, pageSize, searchKeyword, value);
+              }}
+              className="!rounded-full w-full"
+              showClear
+            />
+          </div>
+          <Button
+            type="primary"
+            onClick={() => {
+              searchUsers(activePage, pageSize, searchKeyword, searchGroup);
+            }}
+            loading={searching}
+            className="!rounded-full w-full md:w-auto"
+          >
+            {t('查询')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <>
       <AddUser
@@ -433,81 +548,38 @@ const UsersTable = () => {
         handleClose={closeEditUser}
         editingUser={editingUser}
       ></EditUser>
-      <Form
-        onSubmit={() => {
-          searchUsers(activePage, pageSize, searchKeyword, searchGroup);
-        }}
-        labelPosition='left'
+
+      <Card
+        className="!rounded-2xl overflow-hidden"
+        title={renderHeader()}
+        shadows='hover'
       >
-        <div style={{ display: 'flex' }}>
-          <Space>
-            <Tooltip
-              content={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}
-            >
-              <Form.Input
-                label={t('搜索关键字')}
-                icon='search'
-                field='keyword'
-                iconPosition='left'
-                placeholder={t('搜索关键字')}
-                value={searchKeyword}
-                loading={searching}
-                onChange={(value) => handleKeywordChange(value)}
-              />
-            </Tooltip>
-
-            <Form.Select
-              field='group'
-              label={t('分组')}
-              optionList={groupOptions}
-              onChange={(value) => {
-                setSearchGroup(value);
-                searchUsers(activePage, pageSize, searchKeyword, value);
-              }}
-            />
-            <Button
-              label={t('查询')}
-              type='primary'
-              htmlType='submit'
-              className='btn-margin-right'
-            >
-              {t('查询')}
-            </Button>
-            <Button
-              theme='light'
-              type='primary'
-              onClick={() => {
-                setShowAddUser(true);
-              }}
-            >
-              {t('添加用户')}
-            </Button>
-          </Space>
-        </div>
-      </Form>
-
-      <Table
-        columns={columns}
-        dataSource={users}
-        pagination={{
-          formatPageText: (page) =>
-            t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
-              start: page.currentStart,
-              end: page.currentEnd,
-              total: users.length,
-            }),
-          currentPage: activePage,
-          pageSize: pageSize,
-          total: userCount,
-          pageSizeOpts: [10, 20, 50, 100],
-          showSizeChanger: true,
-          onPageSizeChange: (size) => {
-            handlePageSizeChange(size);
-          },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-      />
+        <Table
+          columns={columns}
+          dataSource={users}
+          pagination={{
+            formatPageText: (page) =>
+              t('第 {{start}} - {{end}} 条，共 {{total}} 条', {
+                start: page.currentStart,
+                end: page.currentEnd,
+                total: userCount,
+              }),
+            currentPage: activePage,
+            pageSize: pageSize,
+            total: userCount,
+            pageSizeOpts: [10, 20, 50, 100],
+            showSizeChanger: true,
+            onPageSizeChange: (size) => {
+              handlePageSizeChange(size);
+            },
+            onPageChange: handlePageChange,
+          }}
+          loading={loading}
+          onRow={handleRow}
+          className="rounded-xl overflow-hidden"
+          size="middle"
+        />
+      </Card>
     </>
   );
 };

web/src/components/common/logo/OIDCIcon.js

@@ -11,8 +11,8 @@ const OIDCIcon = (props) => {
         version='1.1'
         xmlns='http://www.w3.org/2000/svg'
         p-id='10969'
-        width='1em'
-        height='1em'
+        width='20'
+        height='20'
       >
         <path
           d='M512 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z m0-882.6c-239.7 0-434.6 195-434.6 434.6s195 434.6 434.6 434.6 434.6-195 434.6-434.6S751.7 77.4 512 77.4z'

web/src/components/common/logo/WeChatIcon.js

@@ -11,8 +11,8 @@ const WeChatIcon = () => {
         version='1.1'
         xmlns='http://www.w3.org/2000/svg'
         p-id='5091'
-        width='16'
-        height='16'
+        width='20'
+        height='20'
       >
         <path
           d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z'

web/src/components/common/markdown/MarkdownRenderer.js

@@ -0,0 +1,514 @@
+import ReactMarkdown from 'react-markdown';
+import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/default.css';
+import './markdown.css';
+import RemarkMath from 'remark-math';
+import RemarkBreaks from 'remark-breaks';
+import RehypeKatex from 'rehype-katex';
+import RemarkGfm from 'remark-gfm';
+import RehypeHighlight from 'rehype-highlight';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import mermaid from 'mermaid';
+import React from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import clsx from 'clsx';
+import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
+import { copy } from '../../../helpers/utils';
+import { IconCopy } from '@douyinfe/semi-icons';
+import { useTranslation } from 'react-i18next';
+import { rehypeSplitWordsIntoSpans } from '../../../utils/rehypeSplitWordsIntoSpans';
+
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose',
+});
+
+export function Mermaid(props) {
+  const ref = useRef(null);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    if (props.code && ref.current) {
+      mermaid
+        .run({
+          nodes: [ref.current],
+          suppressErrors: true,
+        })
+        .catch((e) => {
+          setHasError(true);
+          console.error('[Mermaid] ', e.message);
+        });
+    }
+  }, [props.code]);
+
+  function viewSvgInNewWindow() {
+    const svg = ref.current?.querySelector('svg');
+    if (!svg) return;
+    const text = new XMLSerializer().serializeToString(svg);
+    const blob = new Blob([text], { type: 'image/svg+xml' });
+    const url = URL.createObjectURL(blob);
+    window.open(url, '_blank');
+  }
+
+  if (hasError) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx('mermaid-container')}
+      style={{
+        cursor: 'pointer',
+        overflow: 'auto',
+        padding: '12px',
+        border: '1px solid var(--semi-color-border)',
+        borderRadius: '8px',
+        backgroundColor: 'var(--semi-color-bg-1)',
+        margin: '12px 0',
+      }}
+      ref={ref}
+      onClick={() => viewSvgInNewWindow()}
+    >
+      {props.code}
+    </div>
+  );
+}
+
+export function PreCode(props) {
+  const ref = useRef(null);
+  const [mermaidCode, setMermaidCode] = useState('');
+  const [htmlCode, setHtmlCode] = useState('');
+  const { t } = useTranslation();
+
+  const renderArtifacts = useDebouncedCallback(() => {
+    if (!ref.current) return;
+    const mermaidDom = ref.current.querySelector('code.language-mermaid');
+    if (mermaidDom) {
+      setMermaidCode(mermaidDom.innerText);
+    }
+    const htmlDom = ref.current.querySelector('code.language-html');
+    const refText = ref.current.querySelector('code')?.innerText;
+    if (htmlDom) {
+      setHtmlCode(htmlDom.innerText);
+    } else if (
+      refText?.startsWith('<!DOCTYPE') ||
+      refText?.startsWith('<svg') ||
+      refText?.startsWith('<?xml')
+    ) {
+      setHtmlCode(refText);
+    }
+  }, 600);
+
+  // 处理代码块的换行
+  useEffect(() => {
+    if (ref.current) {
+      const codeElements = ref.current.querySelectorAll('code');
+      const wrapLanguages = [
+        '',
+        'md',
+        'markdown',
+        'text',
+        'txt',
+        'plaintext',
+        'tex',
+        'latex',
+      ];
+      codeElements.forEach((codeElement) => {
+        let languageClass = codeElement.className.match(/language-(\w+)/);
+        let name = languageClass ? languageClass[1] : '';
+        if (wrapLanguages.includes(name)) {
+          codeElement.style.whiteSpace = 'pre-wrap';
+        }
+      });
+      setTimeout(renderArtifacts, 1);
+    }
+  }, []);
+
+  return (
+    <>
+      <pre
+        ref={ref}
+        style={{
+          position: 'relative',
+          backgroundColor: 'var(--semi-color-fill-0)',
+          border: '1px solid var(--semi-color-border)',
+          borderRadius: '6px',
+          padding: '12px',
+          margin: '12px 0',
+          overflow: 'auto',
+          fontSize: '14px',
+          lineHeight: '1.4',
+        }}
+      >
+        <div
+          className="copy-code-button"
+          style={{
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            display: 'flex',
+            gap: '4px',
+            zIndex: 10,
+            opacity: 0,
+            transition: 'opacity 0.2s ease',
+          }}
+        >
+          <Tooltip content={t('复制代码')}>
+            <Button
+              size="small"
+              theme="borderless"
+              icon={<IconCopy />}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (ref.current) {
+                  const code = ref.current.querySelector('code')?.innerText ?? '';
+                  copy(code).then((success) => {
+                    if (success) {
+                      Toast.success(t('代码已复制到剪贴板'));
+                    } else {
+                      Toast.error(t('复制失败，请手动复制'));
+                    }
+                  });
+                }
+              }}
+              style={{
+                padding: '4px',
+                backgroundColor: 'var(--semi-color-bg-2)',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                border: '1px solid var(--semi-color-border)',
+                boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+              }}
+            />
+          </Tooltip>
+        </div>
+        {props.children}
+      </pre>
+      {mermaidCode.length > 0 && (
+        <Mermaid code={mermaidCode} key={mermaidCode} />
+      )}
+      {htmlCode.length > 0 && (
+        <div
+          style={{
+            border: '1px solid var(--semi-color-border)',
+            borderRadius: '8px',
+            padding: '16px',
+            margin: '12px 0',
+            backgroundColor: 'var(--semi-color-bg-1)',
+          }}
+        >
+          <div style={{ marginBottom: '8px', fontSize: '12px', color: 'var(--semi-color-text-2)' }}>
+            HTML预览:
+          </div>
+          <div dangerouslySetInnerHTML={{ __html: htmlCode }} />
+        </div>
+      )}
+    </>
+  );
+}
+
+function CustomCode(props) {
+  const ref = useRef(null);
+  const [collapsed, setCollapsed] = useState(true);
+  const [showToggle, setShowToggle] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (ref.current) {
+      const codeHeight = ref.current.scrollHeight;
+      setShowToggle(codeHeight > 400);
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [props.children]);
+
+  const toggleCollapsed = () => {
+    setCollapsed((collapsed) => !collapsed);
+  };
+
+  const renderShowMoreButton = () => {
+    if (showToggle && collapsed) {
+      return (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '8px',
+            right: '8px',
+            left: '8px',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+        >
+          <Button size="small" onClick={toggleCollapsed} theme="solid">
+            {t('显示更多')}
+          </Button>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <code
+        className={clsx(props?.className)}
+        ref={ref}
+        style={{
+          maxHeight: collapsed ? '400px' : 'none',
+          overflowY: 'hidden',
+          display: 'block',
+          padding: '8px 12px',
+          backgroundColor: 'var(--semi-color-fill-0)',
+          borderRadius: '4px',
+          fontSize: '13px',
+          lineHeight: '1.4',
+        }}
+      >
+        {props.children}
+      </code>
+      {renderShowMoreButton()}
+    </div>
+  );
+}
+
+function escapeBrackets(text) {
+  const pattern =
+    /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g;
+  return text.replace(
+    pattern,
+    (match, codeBlock, squareBracket, roundBracket) => {
+      if (codeBlock) {
+        return codeBlock;
+      } else if (squareBracket) {
+        return `$$${squareBracket}$$`;
+      } else if (roundBracket) {
+        return `$${roundBracket}$`;
+      }
+      return match;
+    },
+  );
+}
+
+function tryWrapHtmlCode(text) {
+  // 尝试包装HTML代码
+  if (text.includes('```')) {
+    return text;
+  }
+  return text
+    .replace(
+      /([`]*?)(\w*?)([\n\r]*?)(<!DOCTYPE html>)/g,
+      (match, quoteStart, lang, newLine, doctype) => {
+        return !quoteStart ? '\n```html\n' + doctype : match;
+      },
+    )
+    .replace(
+      /(<\/body>)([\r\n\s]*?)(<\/html>)([\n\r]*)([`]*)([\n\r]*?)/g,
+      (match, bodyEnd, space, htmlEnd, newLine, quoteEnd) => {
+        return !quoteEnd ? bodyEnd + space + htmlEnd + '\n```\n' : match;
+      },
+    );
+}
+
+function _MarkdownContent(props) {
+  const {
+    content,
+    className,
+    animated = false,
+    previousContentLength = 0,
+  } = props;
+
+  const escapedContent = useMemo(() => {
+    return tryWrapHtmlCode(escapeBrackets(content));
+  }, [content]);
+
+  // 判断是否为用户消息
+  const isUserMessage = className && className.includes('user-message');
+
+  const rehypePluginsBase = useMemo(() => {
+    const base = [
+      RehypeKatex,
+      [
+        RehypeHighlight,
+        {
+          detect: false,
+          ignoreMissing: true,
+        },
+      ],
+    ];
+    if (animated) {
+      base.push([rehypeSplitWordsIntoSpans, { previousContentLength }]);
+    }
+    return base;
+  }, [animated, previousContentLength]);
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
+      rehypePlugins={rehypePluginsBase}
+      components={{
+        pre: PreCode,
+        code: CustomCode,
+        p: (pProps) => <p {...pProps} dir="auto" style={{ lineHeight: '1.6', color: isUserMessage ? 'white' : 'inherit' }} />,
+        a: (aProps) => {
+          const href = aProps.href || '';
+          if (/\.(aac|mp3|opus|wav)$/.test(href)) {
+            return (
+              <figure style={{ margin: '12px 0' }}>
+                <audio controls src={href} style={{ width: '100%' }}></audio>
+              </figure>
+            );
+          }
+          if (/\.(3gp|3g2|webm|ogv|mpeg|mp4|avi)$/.test(href)) {
+            return (
+              <video controls style={{ width: '100%', maxWidth: '100%', margin: '12px 0' }}>
+                <source src={href} />
+              </video>
+            );
+          }
+          const isInternal = /^\/#/i.test(href);
+          const target = isInternal ? '_self' : aProps.target ?? '_blank';
+          return (
+            <a
+              {...aProps}
+              target={target}
+              style={{
+                color: isUserMessage ? '#87CEEB' : 'var(--semi-color-primary)',
+                textDecoration: 'none',
+              }}
+              onMouseEnter={(e) => {
+                e.target.style.textDecoration = 'underline';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.textDecoration = 'none';
+              }}
+            />
+          );
+        },
+        h1: (props) => <h1 {...props} style={{ fontSize: '24px', fontWeight: 'bold', margin: '20px 0 12px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        h2: (props) => <h2 {...props} style={{ fontSize: '20px', fontWeight: 'bold', margin: '18px 0 10px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        h3: (props) => <h3 {...props} style={{ fontSize: '18px', fontWeight: 'bold', margin: '16px 0 8px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        h4: (props) => <h4 {...props} style={{ fontSize: '16px', fontWeight: 'bold', margin: '14px 0 6px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        h5: (props) => <h5 {...props} style={{ fontSize: '14px', fontWeight: 'bold', margin: '12px 0 4px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        h6: (props) => <h6 {...props} style={{ fontSize: '13px', fontWeight: 'bold', margin: '10px 0 4px 0', color: isUserMessage ? 'white' : 'var(--semi-color-text-0)' }} />,
+        blockquote: (props) => (
+          <blockquote
+            {...props}
+            style={{
+              borderLeft: isUserMessage ? '4px solid rgba(255, 255, 255, 0.5)' : '4px solid var(--semi-color-primary)',
+              paddingLeft: '16px',
+              margin: '12px 0',
+              backgroundColor: isUserMessage ? 'rgba(255, 255, 255, 0.1)' : 'var(--semi-color-fill-0)',
+              padding: '8px 16px',
+              borderRadius: '0 4px 4px 0',
+              fontStyle: 'italic',
+              color: isUserMessage ? 'white' : 'inherit',
+            }}
+          />
+        ),
+        ul: (props) => <ul {...props} style={{ margin: '8px 0', paddingLeft: '20px', color: isUserMessage ? 'white' : 'inherit' }} />,
+        ol: (props) => <ol {...props} style={{ margin: '8px 0', paddingLeft: '20px', color: isUserMessage ? 'white' : 'inherit' }} />,
+        li: (props) => <li {...props} style={{ margin: '4px 0', lineHeight: '1.6', color: isUserMessage ? 'white' : 'inherit' }} />,
+        table: (props) => (
+          <div style={{ overflow: 'auto', margin: '12px 0' }}>
+            <table
+              {...props}
+              style={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                border: isUserMessage ? '1px solid rgba(255, 255, 255, 0.3)' : '1px solid var(--semi-color-border)',
+                borderRadius: '6px',
+                overflow: 'hidden',
+              }}
+            />
+          </div>
+        ),
+        th: (props) => (
+          <th
+            {...props}
+            style={{
+              padding: '8px 12px',
+              backgroundColor: isUserMessage ? 'rgba(255, 255, 255, 0.2)' : 'var(--semi-color-fill-1)',
+              border: isUserMessage ? '1px solid rgba(255, 255, 255, 0.3)' : '1px solid var(--semi-color-border)',
+              fontWeight: 'bold',
+              textAlign: 'left',
+              color: isUserMessage ? 'white' : 'inherit',
+            }}
+          />
+        ),
+        td: (props) => (
+          <td
+            {...props}
+            style={{
+              padding: '8px 12px',
+              border: isUserMessage ? '1px solid rgba(255, 255, 255, 0.3)' : '1px solid var(--semi-color-border)',
+              color: isUserMessage ? 'white' : 'inherit',
+            }}
+          />
+        ),
+      }}
+    >
+      {escapedContent}
+    </ReactMarkdown>
+  );
+}
+
+export const MarkdownContent = React.memo(_MarkdownContent);
+
+export function MarkdownRenderer(props) {
+  const {
+    content,
+    loading,
+    fontSize = 14,
+    fontFamily = 'inherit',
+    className,
+    style,
+    animated = false,
+    previousContentLength = 0,
+    ...otherProps
+  } = props;
+
+  return (
+    <div
+      className={clsx('markdown-body', className)}
+      style={{
+        fontSize: `${fontSize}px`,
+        fontFamily: fontFamily,
+        lineHeight: '1.6',
+        color: 'var(--semi-color-text-0)',
+        ...style,
+      }}
+      dir="auto"
+      {...otherProps}
+    >
+      {loading ? (
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          padding: '16px',
+          color: 'var(--semi-color-text-2)',
+        }}>
+          <div style={{
+            width: '16px',
+            height: '16px',
+            border: '2px solid var(--semi-color-border)',
+            borderTop: '2px solid var(--semi-color-primary)',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite',
+          }} />
+          正在渲染...
+        </div>
+      ) : (
+        <MarkdownContent
+          content={content}
+          className={className}
+          animated={animated}
+          previousContentLength={previousContentLength}
+        />
+      )}
+    </div>
+  );
+}
+
+export default MarkdownRenderer; 

web/src/components/common/markdown/markdown.css

@@ -0,0 +1,444 @@
+/* 基础markdown样式 */
+.markdown-body {
+  font-family: inherit;
+  line-height: 1.6;
+  color: var(--semi-color-text-0);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+/* 用户消息样式 - 白色字体适配蓝色背景 */
+.user-message {
+  color: white !important;
+}
+
+.user-message .markdown-body {
+  color: white !important;
+}
+
+.user-message h1,
+.user-message h2,
+.user-message h3,
+.user-message h4,
+.user-message h5,
+.user-message h6 {
+  color: white !important;
+}
+
+.user-message p {
+  color: white !important;
+}
+
+.user-message span {
+  color: white !important;
+}
+
+.user-message div {
+  color: white !important;
+}
+
+.user-message li {
+  color: white !important;
+}
+
+.user-message td,
+.user-message th {
+  color: white !important;
+}
+
+.user-message blockquote {
+  color: white !important;
+  border-left-color: rgba(255, 255, 255, 0.5) !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.user-message code:not(pre code) {
+  color: #000 !important;
+  background-color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.user-message a {
+  color: #87CEEB !important;
+  /* 浅蓝色链接 */
+}
+
+.user-message a:hover {
+  color: #B0E0E6 !important;
+  /* hover时更浅的蓝色 */
+}
+
+/* 表格在用户消息中的样式 */
+.user-message table {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.user-message th {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+.user-message td {
+  border-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* 加载动画 */
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 代码高亮主题 - 适配Semi Design */
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0;
+  background: transparent;
+  color: var(--semi-color-text-0);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--semi-color-text-2);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: var(--semi-color-primary);
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: var(--semi-color-warning);
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: var(--semi-color-success);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: var(--semi-color-primary);
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: var(--semi-color-info);
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: var(--semi-color-primary);
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: var(--semi-color-tertiary);
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: var(--semi-color-warning);
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: var(--semi-color-info);
+}
+
+.hljs-meta {
+  color: var(--semi-color-text-2);
+}
+
+.hljs-deletion {
+  background: var(--semi-color-danger-light-default);
+}
+
+.hljs-addition {
+  background: var(--semi-color-success-light-default);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/* Mermaid容器样式 */
+.mermaid-container {
+  transition: all 0.2s ease;
+}
+
+.mermaid-container:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+}
+
+/* 代码块样式增强 */
+pre {
+  position: relative;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  transition: all 0.2s ease;
+}
+
+pre:hover {
+  border-color: var(--semi-color-primary) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+pre:hover .copy-code-button {
+  opacity: 1 !important;
+}
+
+.copy-code-button {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.copy-code-button:hover {
+  opacity: 1 !important;
+}
+
+.copy-code-button button {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 确保按钮可点击 */
+.copy-code-button .semi-button {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease;
+}
+
+.copy-code-button .semi-button:hover {
+  background-color: var(--semi-color-fill-1) !important;
+  border-color: var(--semi-color-primary) !important;
+  transform: scale(1.05);
+}
+
+/* 表格响应式 */
+@media (max-width: 768px) {
+  .markdown-body table {
+    font-size: 12px;
+  }
+
+  .markdown-body th,
+  .markdown-body td {
+    padding: 6px 8px;
+  }
+}
+
+/* 数学公式样式 */
+.katex {
+  font-size: 1em;
+}
+
+.katex-display {
+  margin: 1em 0;
+  text-align: center;
+}
+
+/* 链接hover效果 */
+.markdown-body a {
+  transition: all 0.2s ease;
+}
+
+/* 引用块样式增强 */
+.markdown-body blockquote {
+  position: relative;
+}
+
+.markdown-body blockquote::before {
+  content: '"';
+  position: absolute;
+  left: -8px;
+  top: -8px;
+  font-size: 24px;
+  color: var(--semi-color-primary);
+  opacity: 0.3;
+}
+
+/* 列表样式增强 */
+.markdown-body ul li::marker {
+  color: var(--semi-color-primary);
+}
+
+.markdown-body ol li::marker {
+  color: var(--semi-color-primary);
+  font-weight: bold;
+}
+
+/* 分隔线样式 */
+.markdown-body hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, var(--semi-color-border), transparent);
+  margin: 24px 0;
+}
+
+/* 图片样式 */
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 12px 0;
+}
+
+/* 内联代码样式 */
+.markdown-body code:not(pre code) {
+  background-color: var(--semi-color-fill-1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: var(--semi-color-primary);
+  border: 1px solid var(--semi-color-border);
+}
+
+/* 标题锚点样式 */
+.markdown-body h1:hover,
+.markdown-body h2:hover,
+.markdown-body h3:hover,
+.markdown-body h4:hover,
+.markdown-body h5:hover,
+.markdown-body h6:hover {
+  position: relative;
+}
+
+/* 任务列表样式 */
+.markdown-body input[type="checkbox"] {
+  margin-right: 8px;
+  transform: scale(1.1);
+}
+
+.markdown-body li.task-list-item {
+  list-style: none;
+  margin-left: -20px;
+}
+
+/* 键盘按键样式 */
+.markdown-body kbd {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: 3px;
+  box-shadow: 0 1px 0 var(--semi-color-border);
+  color: var(--semi-color-text-0);
+  display: inline-block;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+/* 详情折叠样式 */
+.markdown-body details {
+  border: 1px solid var(--semi-color-border);
+  border-radius: 6px;
+  padding: 12px;
+  margin: 12px 0;
+}
+
+.markdown-body summary {
+  cursor: pointer;
+  font-weight: bold;
+  color: var(--semi-color-primary);
+  margin-bottom: 8px;
+}
+
+.markdown-body summary:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* 脚注样式 */
+.markdown-body .footnote-ref {
+  color: var(--semi-color-primary);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.markdown-body .footnote-ref:hover {
+  text-decoration: underline;
+}
+
+/* 警告块样式 */
+.markdown-body .warning {
+  background-color: var(--semi-color-warning-light-default);
+  border-left: 4px solid var(--semi-color-warning);
+  padding: 12px 16px;
+  margin: 12px 0;
+  border-radius: 0 6px 6px 0;
+}
+
+.markdown-body .info {
+  background-color: var(--semi-color-info-light-default);
+  border-left: 4px solid var(--semi-color-info);
+  padding: 12px 16px;
+  margin: 12px 0;
+  border-radius: 0 6px 6px 0;
+}
+
+.markdown-body .success {
+  background-color: var(--semi-color-success-light-default);
+  border-left: 4px solid var(--semi-color-success);
+  padding: 12px 16px;
+  margin: 12px 0;
+  border-radius: 0 6px 6px 0;
+}
+
+.markdown-body .danger {
+  background-color: var(--semi-color-danger-light-default);
+  border-left: 4px solid var(--semi-color-danger);
+  padding: 12px 16px;
+  margin: 12px 0;
+  border-radius: 0 6px 6px 0;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+    filter: blur(3px);
+  }
+  60% {
+    opacity: 0.85;
+    filter: blur(0.5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+  will-change: opacity, transform;
+}

web/src/components/custom/TextInput.js

@@ -1,28 +0,0 @@
-import { Input, Typography } from '@douyinfe/semi-ui';
-import React from 'react';
-
-const TextInput = ({
-  label,
-  name,
-  value,
-  onChange,
-  placeholder,
-  type = 'text',
-}) => {
-  return (
-    <>
-      <div style={{ marginTop: 10 }}>
-        <Typography.Text strong>{label}</Typography.Text>
-      </div>
-      <Input
-        name={name}
-        placeholder={placeholder}
-        onChange={(value) => onChange(value)}
-        value={value}
-        autoComplete='new-password'
-      />
-    </>
-  );
-};
-
-export default TextInput;

web/src/components/custom/TextNumberInput.js

@@ -1,21 +0,0 @@
-import { Input, InputNumber, Typography } from '@douyinfe/semi-ui';
-import React from 'react';
-
-const TextNumberInput = ({ label, name, value, onChange, placeholder }) => {
-  return (
-    <>
-      <div style={{ marginTop: 10 }}>
-        <Typography.Text strong>{label}</Typography.Text>
-      </div>
-      <InputNumber
-        name={name}
-        placeholder={placeholder}
-        onChange={(value) => onChange(value)}
-        value={value}
-        autoComplete='new-password'
-      />
-    </>
-  );
-};
-
-export default TextNumberInput;

web/src/components/playground/ChatArea.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  Card,
+  Chat,
+  Typography,
+  Button,
+} from '@douyinfe/semi-ui';
+import {
+  MessageSquare,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import CustomInputRender from './CustomInputRender';
+
+const ChatArea = ({
+  chatRef,
+  message,
+  inputs,
+  styleState,
+  showDebugPanel,
+  roleInfo,
+  onMessageSend,
+  onMessageCopy,
+  onMessageReset,
+  onMessageDelete,
+  onStopGenerator,
+  onClearMessages,
+  onToggleDebugPanel,
+  renderCustomChatContent,
+  renderChatBoxAction,
+}) => {
+  const { t } = useTranslation();
+
+  const renderInputArea = React.useCallback((props) => {
+    return <CustomInputRender {...props} />;
+  }, []);
+
+  return (
+    <Card
+      className="h-full"
+      bordered={false}
+      bodyStyle={{ padding: 0, height: 'calc(100vh - 66px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
+    >
+      {/* 聊天头部 */}
+      {styleState.isMobile ? (
+        <div className="pt-4"></div>
+      ) : (
+        <div className="px-6 py-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-t-2xl">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur flex items-center justify-center">
+                <MessageSquare size={20} className="text-white" />
+              </div>
+              <div>
+                <Typography.Title heading={5} className="!text-white mb-0">
+                  {t('AI 对话')}
+                </Typography.Title>
+                <Typography.Text className="!text-white/80 text-sm hidden sm:inline">
+                  {inputs.model || t('选择模型开始对话')}
+                </Typography.Text>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                icon={showDebugPanel ? <EyeOff size={14} /> : <Eye size={14} />}
+                onClick={onToggleDebugPanel}
+                theme="borderless"
+                type="primary"
+                size="small"
+                className="!rounded-lg !text-white/80 hover:!text-white hover:!bg-white/10"
+              >
+                {showDebugPanel ? t('隐藏调试') : t('显示调试')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 聊天内容区域 */}
+      <div className="flex-1 overflow-hidden">
+        <Chat
+          ref={chatRef}
+          chatBoxRenderConfig={{
+            renderChatBoxContent: renderCustomChatContent,
+            renderChatBoxAction: renderChatBoxAction,
+            renderChatBoxTitle: () => null,
+          }}
+          renderInputArea={renderInputArea}
+          roleConfig={roleInfo}
+          style={{
+            height: '100%',
+            maxWidth: '100%',
+            overflow: 'hidden'
+          }}
+          chats={message}
+          onMessageSend={onMessageSend}
+          onMessageCopy={onMessageCopy}
+          onMessageReset={onMessageReset}
+          onMessageDelete={onMessageDelete}
+          showClearContext
+          showStopGenerate
+          onStopGenerator={onStopGenerator}
+          onClear={onClearMessages}
+          className="h-full"
+          placeholder={t('请输入您的问题...')}
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default ChatArea; 

web/src/components/playground/CodeViewer.js

@@ -0,0 +1,313 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
+import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { copy } from '../../helpers/utils';
+
+const PERFORMANCE_CONFIG = {
+  MAX_DISPLAY_LENGTH: 50000, // 最大显示字符数
+  PREVIEW_LENGTH: 5000, // 预览长度
+  VERY_LARGE_MULTIPLIER: 2, // 超大内容倍数
+};
+
+const codeThemeStyles = {
+  container: {
+    backgroundColor: '#1e1e1e',
+    color: '#d4d4d4',
+    fontFamily: 'Consolas, "Courier New", Monaco, "SF Mono", monospace',
+    fontSize: '13px',
+    lineHeight: '1.4',
+    borderRadius: '8px',
+    border: '1px solid #3c3c3c',
+    position: 'relative',
+    overflow: 'hidden',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  },
+  content: {
+    height: '100%',
+    overflowY: 'auto',
+    overflowX: 'auto',
+    padding: '16px',
+    margin: 0,
+    whiteSpace: 'pre',
+    wordBreak: 'normal',
+    background: '#1e1e1e',
+  },
+  actionButton: {
+    position: 'absolute',
+    zIndex: 10,
+    backgroundColor: 'rgba(45, 45, 45, 0.9)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    color: '#d4d4d4',
+    borderRadius: '6px',
+    transition: 'all 0.2s ease',
+  },
+  actionButtonHover: {
+    backgroundColor: 'rgba(60, 60, 60, 0.95)',
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    transform: 'scale(1.05)',
+  },
+  noContent: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    color: '#666',
+    fontSize: '14px',
+    fontStyle: 'italic',
+    backgroundColor: 'var(--semi-color-fill-0)',
+    borderRadius: '8px',
+  },
+  performanceWarning: {
+    padding: '8px 12px',
+    backgroundColor: 'rgba(255, 193, 7, 0.1)',
+    border: '1px solid rgba(255, 193, 7, 0.3)',
+    borderRadius: '6px',
+    color: '#ffc107',
+    fontSize: '12px',
+    marginBottom: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+};
+
+const highlightJson = (str) => {
+  return str.replace(
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+    (match) => {
+      let color = '#b5cea8';
+      if (/^"/.test(match)) {
+        color = /:$/.test(match) ? '#9cdcfe' : '#ce9178';
+      } else if (/true|false|null/.test(match)) {
+        color = '#569cd6';
+      }
+      return `<span style="color: ${color}">${match}</span>`;
+    }
+  );
+};
+
+const isJsonLike = (content, language) => {
+  if (language === 'json') return true;
+  const trimmed = content.trim();
+  return (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'));
+};
+
+const formatContent = (content) => {
+  if (!content) return '';
+
+  if (typeof content === 'object') {
+    try {
+      return JSON.stringify(content, null, 2);
+    } catch (e) {
+      return String(content);
+    }
+  }
+
+  if (typeof content === 'string') {
+    try {
+      const parsed = JSON.parse(content);
+      return JSON.stringify(parsed, null, 2);
+    } catch (e) {
+      return content;
+    }
+  }
+
+  return String(content);
+};
+
+const CodeViewer = ({ content, title, language = 'json' }) => {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+  const [isHoveringCopy, setIsHoveringCopy] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const formattedContent = useMemo(() => formatContent(content), [content]);
+
+  const contentMetrics = useMemo(() => {
+    const length = formattedContent.length;
+    const isLarge = length > PERFORMANCE_CONFIG.MAX_DISPLAY_LENGTH;
+    const isVeryLarge = length > PERFORMANCE_CONFIG.MAX_DISPLAY_LENGTH * PERFORMANCE_CONFIG.VERY_LARGE_MULTIPLIER;
+    return { length, isLarge, isVeryLarge };
+  }, [formattedContent.length]);
+
+  const displayContent = useMemo(() => {
+    if (!contentMetrics.isLarge || isExpanded) {
+      return formattedContent;
+    }
+    return formattedContent.substring(0, PERFORMANCE_CONFIG.PREVIEW_LENGTH) +
+      '\n\n// ... 内容被截断以提升性能 ...';
+  }, [formattedContent, contentMetrics.isLarge, isExpanded]);
+
+  const highlightedContent = useMemo(() => {
+    if (contentMetrics.isVeryLarge && !isExpanded) {
+      return displayContent;
+    }
+
+    if (isJsonLike(displayContent, language)) {
+      return highlightJson(displayContent);
+    }
+
+    return displayContent;
+  }, [displayContent, language, contentMetrics.isVeryLarge, isExpanded]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      const textToCopy = typeof content === 'object' && content !== null
+        ? JSON.stringify(content, null, 2)
+        : content;
+
+      const success = await copy(textToCopy);
+      setCopied(true);
+      Toast.success(t('已复制到剪贴板'));
+      setTimeout(() => setCopied(false), 2000);
+
+      if (!success) {
+        throw new Error('Copy operation failed');
+      }
+    } catch (err) {
+      Toast.error(t('复制失败'));
+      console.error('Copy failed:', err);
+    }
+  }, [content, t]);
+
+  const handleToggleExpand = useCallback(() => {
+    if (contentMetrics.isVeryLarge && !isExpanded) {
+      setIsProcessing(true);
+      setTimeout(() => {
+        setIsExpanded(true);
+        setIsProcessing(false);
+      }, 100);
+    } else {
+      setIsExpanded(!isExpanded);
+    }
+  }, [isExpanded, contentMetrics.isVeryLarge]);
+
+  if (!content) {
+    const placeholderText = {
+      preview: t('正在构造请求体预览...'),
+      request: t('暂无请求数据'),
+      response: t('暂无响应数据')
+    }[title] || t('暂无数据');
+
+    return (
+      <div style={codeThemeStyles.noContent}>
+        <span>{placeholderText}</span>
+      </div>
+    );
+  }
+
+  const warningTop = contentMetrics.isLarge ? '52px' : '12px';
+  const contentPadding = contentMetrics.isLarge ? '52px' : '16px';
+
+  return (
+    <div style={codeThemeStyles.container} className="h-full">
+      {/* 性能警告 */}
+      {contentMetrics.isLarge && (
+        <div style={codeThemeStyles.performanceWarning}>
+          <span>⚡</span>
+          <span>
+            {contentMetrics.isVeryLarge
+              ? t('内容较大，已启用性能优化模式')
+              : t('内容较大，部分功能可能受限')}
+          </span>
+        </div>
+      )}
+
+      {/* 复制按钮 */}
+      <div
+        style={{
+          ...codeThemeStyles.actionButton,
+          ...(isHoveringCopy ? codeThemeStyles.actionButtonHover : {}),
+          top: warningTop,
+          right: '12px',
+        }}
+        onMouseEnter={() => setIsHoveringCopy(true)}
+        onMouseLeave={() => setIsHoveringCopy(false)}
+      >
+        <Tooltip content={copied ? t('已复制') : t('复制代码')}>
+          <Button
+            icon={<Copy size={14} />}
+            onClick={handleCopy}
+            size="small"
+            theme="borderless"
+            style={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              color: copied ? '#4ade80' : '#d4d4d4',
+              padding: '6px',
+            }}
+          />
+        </Tooltip>
+      </div>
+
+      {/* 代码内容 */}
+      <div
+        style={{
+          ...codeThemeStyles.content,
+          paddingTop: contentPadding,
+        }}
+        className="model-settings-scroll"
+      >
+        {isProcessing ? (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '200px',
+            color: '#888'
+          }}>
+            <div style={{
+              width: '20px',
+              height: '20px',
+              border: '2px solid #444',
+              borderTop: '2px solid #888',
+              borderRadius: '50%',
+              animation: 'spin 1s linear infinite',
+              marginRight: '8px'
+            }} />
+            {t('正在处理大内容...')}
+          </div>
+        ) : (
+          <div dangerouslySetInnerHTML={{ __html: highlightedContent }} />
+        )}
+      </div>
+
+      {/* 展开/收起按钮 */}
+      {contentMetrics.isLarge && !isProcessing && (
+        <div style={{
+          ...codeThemeStyles.actionButton,
+          bottom: '12px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}>
+          <Tooltip content={isExpanded ? t('收起内容') : t('显示完整内容')}>
+            <Button
+              icon={isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+              onClick={handleToggleExpand}
+              size="small"
+              theme="borderless"
+              style={{
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: '#d4d4d4',
+                padding: '6px 12px',
+              }}
+            >
+              {isExpanded ? t('收起') : t('展开')}
+              {!isExpanded && (
+                <span style={{ fontSize: '11px', opacity: 0.7, marginLeft: '4px' }}>
+                  (+{Math.round((contentMetrics.length - PERFORMANCE_CONFIG.PREVIEW_LENGTH) / 1000)}K)
+                </span>
+              )}
+            </Button>
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodeViewer; 

web/src/components/playground/ConfigManager.js

@@ -0,0 +1,260 @@
+import React, { useRef } from 'react';
+import {
+  Button,
+  Typography,
+  Toast,
+  Modal,
+  Dropdown,
+} from '@douyinfe/semi-ui';
+import {
+  Download,
+  Upload,
+  RotateCcw,
+  Settings2,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { exportConfig, importConfig, clearConfig, hasStoredConfig, getConfigTimestamp } from './configStorage';
+
+const ConfigManager = ({
+  currentConfig,
+  onConfigImport,
+  onConfigReset,
+  styleState,
+  messages,
+}) => {
+  const { t } = useTranslation();
+  const fileInputRef = useRef(null);
+
+  const handleExport = () => {
+    try {
+      // 在导出前先保存当前配置，确保导出的是最新内容
+      const configWithTimestamp = {
+        ...currentConfig,
+        timestamp: new Date().toISOString(),
+      };
+      localStorage.setItem('playground_config', JSON.stringify(configWithTimestamp));
+
+      exportConfig(currentConfig, messages);
+      Toast.success({
+        content: t('配置已导出到下载文件夹'),
+        duration: 3,
+      });
+    } catch (error) {
+      Toast.error({
+        content: t('导出配置失败: ') + error.message,
+        duration: 3,
+      });
+    }
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+      const importedConfig = await importConfig(file);
+
+      Modal.confirm({
+        title: t('确认导入配置'),
+        content: t('导入的配置将覆盖当前设置，是否继续？'),
+        okText: t('确定导入'),
+        cancelText: t('取消'),
+        onOk: () => {
+          onConfigImport(importedConfig);
+          Toast.success({
+            content: t('配置导入成功'),
+            duration: 3,
+          });
+        },
+      });
+    } catch (error) {
+      Toast.error({
+        content: t('导入配置失败: ') + error.message,
+        duration: 3,
+      });
+    } finally {
+      // 重置文件输入，允许重复选择同一文件
+      event.target.value = '';
+    }
+  };
+
+  const handleReset = () => {
+    Modal.confirm({
+      title: t('重置配置'),
+      content: t('将清除所有保存的配置并恢复默认设置，此操作不可撤销。是否继续？'),
+      okText: t('确定重置'),
+      cancelText: t('取消'),
+      okButtonProps: {
+        type: 'danger',
+      },
+      onOk: () => {
+        // 询问是否同时重置消息
+        Modal.confirm({
+          title: t('重置选项'),
+          content: t('是否同时重置对话消息？选择"是"将清空所有对话记录并恢复默认示例；选择"否"将保留当前对话记录。'),
+          okText: t('同时重置消息'),
+          cancelText: t('仅重置配置'),
+          okButtonProps: {
+            type: 'danger',
+          },
+          onOk: () => {
+            clearConfig();
+            onConfigReset({ resetMessages: true });
+            Toast.success({
+              content: t('配置和消息已全部重置'),
+              duration: 3,
+            });
+          },
+          onCancel: () => {
+            clearConfig();
+            onConfigReset({ resetMessages: false });
+            Toast.success({
+              content: t('配置已重置，对话消息已保留'),
+              duration: 3,
+            });
+          },
+        });
+      },
+    });
+  };
+
+  const getConfigStatus = () => {
+    if (hasStoredConfig()) {
+      const timestamp = getConfigTimestamp();
+      if (timestamp) {
+        const date = new Date(timestamp);
+        return t('上次保存: ') + date.toLocaleString();
+      }
+      return t('已有保存的配置');
+    }
+    return t('暂无保存的配置');
+  };
+
+  const dropdownItems = [
+    {
+      node: 'item',
+      name: 'export',
+      onClick: handleExport,
+      children: (
+        <div className="flex items-center gap-2">
+          <Download size={14} />
+          {t('导出配置')}
+        </div>
+      ),
+    },
+    {
+      node: 'item',
+      name: 'import',
+      onClick: handleImportClick,
+      children: (
+        <div className="flex items-center gap-2">
+          <Upload size={14} />
+          {t('导入配置')}
+        </div>
+      ),
+    },
+    {
+      node: 'divider',
+    },
+    {
+      node: 'item',
+      name: 'reset',
+      onClick: handleReset,
+      children: (
+        <div className="flex items-center gap-2 text-red-600">
+          <RotateCcw size={14} />
+          {t('重置配置')}
+        </div>
+      ),
+    },
+  ];
+
+  if (styleState.isMobile) {
+    // 移动端显示简化的下拉菜单
+    return (
+      <>
+        <Dropdown
+          trigger="click"
+          position="bottomLeft"
+          showTick
+          menu={dropdownItems}
+        >
+          <Button
+            icon={<Settings2 size={14} />}
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            className="!rounded-lg !text-gray-600 hover:!text-blue-600 hover:!bg-blue-50"
+          />
+        </Dropdown>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      </>
+    );
+  }
+
+  // 桌面端显示紧凑的按钮组
+  return (
+    <div className="space-y-3">
+      {/* 配置状态信息和重置按钮 */}
+      <div className="flex items-center justify-between">
+        <Typography.Text className="text-xs text-gray-500">
+          {getConfigStatus()}
+        </Typography.Text>
+        <Button
+          icon={<RotateCcw size={12} />}
+          size="small"
+          theme="borderless"
+          type="danger"
+          onClick={handleReset}
+          className="!rounded-full !text-xs !px-2"
+        />
+      </div>
+
+      {/* 导出和导入按钮 */}
+      <div className="flex gap-2">
+        <Button
+          icon={<Download size={12} />}
+          size="small"
+          theme="solid"
+          type="primary"
+          onClick={handleExport}
+          className="!rounded-lg flex-1 !text-xs !h-7"
+        >
+          {t('导出')}
+        </Button>
+
+        <Button
+          icon={<Upload size={12} />}
+          size="small"
+          theme="outline"
+          type="primary"
+          onClick={handleImportClick}
+          className="!rounded-lg flex-1 !text-xs !h-7"
+        >
+          {t('导入')}
+        </Button>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".json"
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+    </div>
+  );
+};
+
+export default ConfigManager; 

web/src/components/playground/CustomInputRender.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+const CustomInputRender = (props) => {
+  const { detailProps } = props;
+  const { clearContextNode, uploadNode, inputNode, sendNode, onClick } = detailProps;
+
+  // 清空按钮
+  const styledClearNode = clearContextNode
+    ? React.cloneElement(clearContextNode, {
+      className: `!rounded-full !bg-gray-100 hover:!bg-red-500 hover:!text-white flex-shrink-0 transition-all ${clearContextNode.props.className || ''}`,
+      style: {
+        ...clearContextNode.props.style,
+        width: '32px',
+        height: '32px',
+        minWidth: '32px',
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }
+    })
+    : null;
+
+  // 发送按钮
+  const styledSendNode = React.cloneElement(sendNode, {
+    className: `!rounded-full !bg-purple-500 hover:!bg-purple-600 flex-shrink-0 transition-all ${sendNode.props.className || ''}`,
+    style: {
+      ...sendNode.props.style,
+      width: '32px',
+      height: '32px',
+      minWidth: '32px',
+      padding: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+  });
+
+  return (
+    <div className="p-2 sm:p-4">
+      <div
+        className="flex items-center gap-2 sm:gap-3 p-2 bg-gray-50 rounded-xl sm:rounded-2xl shadow-sm hover:shadow-md transition-shadow"
+        style={{ border: '1px solid var(--semi-color-border)' }}
+        onClick={onClick}
+      >
+        {/* 清空对话按钮 - 左边 */}
+        {styledClearNode}
+        <div className="flex-1">
+          {inputNode}
+        </div>
+        {/* 发送按钮 - 右边 */}
+        {styledSendNode}
+      </div>
+    </div>
+  );
+};
+
+export default CustomInputRender; 

web/src/components/playground/CustomRequestEditor.js

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import {
+  TextArea,
+  Typography,
+  Button,
+  Switch,
+  Banner,
+} from '@douyinfe/semi-ui';
+import {
+  Code,
+  Edit,
+  Check,
+  X,
+  AlertTriangle,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const CustomRequestEditor = ({
+  customRequestMode,
+  customRequestBody,
+  onCustomRequestModeChange,
+  onCustomRequestBodyChange,
+  defaultPayload,
+}) => {
+  const { t } = useTranslation();
+  const [isValid, setIsValid] = useState(true);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [localValue, setLocalValue] = useState(customRequestBody || '');
+
+  // 当切换到自定义模式时，用默认payload初始化
+  useEffect(() => {
+    if (customRequestMode && (!customRequestBody || customRequestBody.trim() === '')) {
+      const defaultJson = defaultPayload ? JSON.stringify(defaultPayload, null, 2) : '';
+      setLocalValue(defaultJson);
+      onCustomRequestBodyChange(defaultJson);
+    }
+  }, [customRequestMode, defaultPayload, customRequestBody, onCustomRequestBodyChange]);
+
+  // 同步外部传入的customRequestBody到本地状态
+  useEffect(() => {
+    if (customRequestBody !== localValue) {
+      setLocalValue(customRequestBody || '');
+      validateJson(customRequestBody || '');
+    }
+  }, [customRequestBody]);
+
+  // 验证JSON格式
+  const validateJson = (value) => {
+    if (!value.trim()) {
+      setIsValid(true);
+      setErrorMessage('');
+      return true;
+    }
+
+    try {
+      JSON.parse(value);
+      setIsValid(true);
+      setErrorMessage('');
+      return true;
+    } catch (error) {
+      setIsValid(false);
+      setErrorMessage(`JSON格式错误: ${error.message}`);
+      return false;
+    }
+  };
+
+  const handleValueChange = (value) => {
+    setLocalValue(value);
+    validateJson(value);
+    // 始终保存用户输入，让预览逻辑处理JSON解析错误
+    onCustomRequestBodyChange(value);
+  };
+
+  const handleModeToggle = (enabled) => {
+    onCustomRequestModeChange(enabled);
+    if (enabled && defaultPayload) {
+      const defaultJson = JSON.stringify(defaultPayload, null, 2);
+      setLocalValue(defaultJson);
+      onCustomRequestBodyChange(defaultJson);
+    }
+  };
+
+  const formatJson = () => {
+    try {
+      const parsed = JSON.parse(localValue);
+      const formatted = JSON.stringify(parsed, null, 2);
+      setLocalValue(formatted);
+      onCustomRequestBodyChange(formatted);
+      setIsValid(true);
+      setErrorMessage('');
+    } catch (error) {
+      // 如果格式化失败，保持原样
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 自定义模式开关 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Code size={16} className="text-gray-500" />
+          <Typography.Text strong className="text-sm">
+            自定义请求体模式
+          </Typography.Text>
+        </div>
+        <Switch
+          checked={customRequestMode}
+          onChange={handleModeToggle}
+          checkedText="开"
+          uncheckedText="关"
+          size="small"
+        />
+      </div>
+
+      {customRequestMode && (
+        <>
+          {/* 提示信息 */}
+          <Banner
+            type="warning"
+            description="启用此模式后，将使用您自定义的请求体发送API请求，模型配置面板的参数设置将被忽略。"
+            icon={<AlertTriangle size={16} />}
+            className="!rounded-lg"
+            closable={false}
+          />
+
+          {/* JSON编辑器 */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <Typography.Text strong className="text-sm">
+                请求体 JSON
+              </Typography.Text>
+              <div className="flex items-center gap-2">
+                {isValid ? (
+                  <div className="flex items-center gap-1 text-green-600">
+                    <Check size={14} />
+                    <Typography.Text className="text-xs">
+                      格式正确
+                    </Typography.Text>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1 text-red-600">
+                    <X size={14} />
+                    <Typography.Text className="text-xs">
+                      格式错误
+                    </Typography.Text>
+                  </div>
+                )}
+                <Button
+                  theme="borderless"
+                  type="tertiary"
+                  size="small"
+                  icon={<Edit size={14} />}
+                  onClick={formatJson}
+                  disabled={!isValid}
+                  className="!rounded-lg"
+                >
+                  格式化
+                </Button>
+              </div>
+            </div>
+
+            <TextArea
+              value={localValue}
+              onChange={handleValueChange}
+              placeholder='{"model": "gpt-4o", "messages": [...], ...}'
+              autosize={{ minRows: 8, maxRows: 20 }}
+              className={`custom-request-textarea !rounded-lg font-mono text-sm ${!isValid ? '!border-red-500' : ''}`}
+              style={{
+                fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+                lineHeight: '1.5',
+              }}
+            />
+
+            {!isValid && errorMessage && (
+              <Typography.Text type="danger" className="text-xs mt-1 block">
+                {errorMessage}
+              </Typography.Text>
+            )}
+
+            <Typography.Text className="text-xs text-gray-500 mt-2 block">
+              请输入有效的JSON格式的请求体。您可以参考预览面板中的默认请求体格式。
+            </Typography.Text>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CustomRequestEditor; 

web/src/components/playground/DebugPanel.js

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Card,
+  Typography,
+  Tabs,
+  TabPane,
+  Button,
+  Dropdown,
+} from '@douyinfe/semi-ui';
+import {
+  Code,
+  Zap,
+  Clock,
+  X,
+  Eye,
+  Send,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import CodeViewer from './CodeViewer';
+
+const DebugPanel = ({
+  debugData,
+  activeDebugTab,
+  onActiveDebugTabChange,
+  styleState,
+  onCloseDebugPanel,
+  customRequestMode,
+}) => {
+  const { t } = useTranslation();
+
+  const [activeKey, setActiveKey] = useState(activeDebugTab);
+
+  useEffect(() => {
+    setActiveKey(activeDebugTab);
+  }, [activeDebugTab]);
+
+  const handleTabChange = (key) => {
+    setActiveKey(key);
+    onActiveDebugTabChange(key);
+  };
+
+  const renderArrow = (items, pos, handleArrowClick, defaultNode) => {
+    const style = {
+      width: 32,
+      height: 32,
+      margin: '0 12px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: '100%',
+      background: 'rgba(var(--semi-grey-1), 1)',
+      color: 'var(--semi-color-text)',
+      cursor: 'pointer',
+    };
+
+    return (
+      <Dropdown
+        render={
+          <Dropdown.Menu>
+            {items.map(item => {
+              return (
+                <Dropdown.Item
+                  key={item.itemKey}
+                  onClick={() => handleTabChange(item.itemKey)}
+                >
+                  {item.tab}
+                </Dropdown.Item>
+              );
+            })}
+          </Dropdown.Menu>
+        }
+      >
+        {pos === 'start' ? (
+          <div style={style} onClick={handleArrowClick}>
+            ←
+          </div>
+        ) : (
+          <div style={style} onClick={handleArrowClick}>
+            →
+          </div>
+        )}
+      </Dropdown>
+    );
+  };
+
+  return (
+    <Card
+      className="h-full flex flex-col"
+      bordered={false}
+      bodyStyle={{
+        padding: styleState.isMobile ? '16px' : '24px',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      <div className="flex items-center justify-between mb-6 flex-shrink-0">
+        <div className="flex items-center">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-blue-500 flex items-center justify-center mr-3">
+            <Code size={20} className="text-white" />
+          </div>
+          <Typography.Title heading={5} className="mb-0">
+            {t('调试信息')}
+          </Typography.Title>
+        </div>
+
+        {styleState.isMobile && onCloseDebugPanel && (
+          <Button
+            icon={<X size={16} />}
+            onClick={onCloseDebugPanel}
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            className="!rounded-lg"
+          />
+        )}
+      </div>
+
+      <div className="flex-1 overflow-hidden debug-panel">
+        <Tabs
+          renderArrow={renderArrow}
+          type="card"
+          collapsible
+          className="h-full"
+          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+          activeKey={activeKey}
+          onChange={handleTabChange}
+        >
+          <TabPane tab={
+            <div className="flex items-center gap-2">
+              <Eye size={16} />
+              {t('预览请求体')}
+              {customRequestMode && (
+                <span className="px-1.5 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">
+                  自定义
+                </span>
+              )}
+            </div>
+          } itemKey="preview">
+            <CodeViewer
+              content={debugData.previewRequest}
+              title="preview"
+              language="json"
+            />
+          </TabPane>
+
+          <TabPane tab={
+            <div className="flex items-center gap-2">
+              <Send size={16} />
+              {t('实际请求体')}
+            </div>
+          } itemKey="request">
+            <CodeViewer
+              content={debugData.request}
+              title="request"
+              language="json"
+            />
+          </TabPane>
+
+          <TabPane tab={
+            <div className="flex items-center gap-2">
+              <Zap size={16} />
+              {t('响应')}
+            </div>
+          } itemKey="response">
+            <CodeViewer
+              content={debugData.response}
+              title="response"
+              language="json"
+            />
+          </TabPane>
+        </Tabs>
+      </div>
+
+      <div className="flex items-center justify-between mt-4 pt-4 flex-shrink-0">
+        {(debugData.timestamp || debugData.previewTimestamp) && (
+          <div className="flex items-center gap-2">
+            <Clock size={14} className="text-gray-500" />
+            <Typography.Text className="text-xs text-gray-500">
+              {activeKey === 'preview' && debugData.previewTimestamp
+                ? `${t('预览更新')}: ${new Date(debugData.previewTimestamp).toLocaleString()}`
+                : debugData.timestamp
+                  ? `${t('最后请求')}: ${new Date(debugData.timestamp).toLocaleString()}`
+                  : ''}
+            </Typography.Text>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default DebugPanel; 

web/src/components/playground/FloatingButtons.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Button } from '@douyinfe/semi-ui';
+import {
+  Settings,
+  Eye,
+  EyeOff,
+} from 'lucide-react';
+
+const FloatingButtons = ({
+  styleState,
+  showSettings,
+  showDebugPanel,
+  onToggleSettings,
+  onToggleDebugPanel,
+}) => {
+  if (!styleState.isMobile) return null;
+
+  return (
+    <>
+      {/* 设置按钮 */}
+      {!showSettings && (
+        <Button
+          icon={<Settings size={18} />}
+          style={{
+            position: 'fixed',
+            right: 16,
+            bottom: 90,
+            zIndex: 1000,
+            width: 36,
+            height: 36,
+            borderRadius: '50%',
+            padding: 0,
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+            background: 'linear-gradient(to right, #8b5cf6, #6366f1)',
+          }}
+          onClick={onToggleSettings}
+          theme='solid'
+          type='primary'
+          className="lg:hidden"
+        />
+      )}
+
+      {/* 调试按钮 */}
+      {!showSettings && (
+        <Button
+          icon={showDebugPanel ? <EyeOff size={18} /> : <Eye size={18} />}
+          onClick={onToggleDebugPanel}
+          theme="solid"
+          type={showDebugPanel ? "danger" : "primary"}
+          style={{
+            position: 'fixed',
+            right: 16,
+            bottom: 140,
+            zIndex: 1000,
+            width: 36,
+            height: 36,
+            borderRadius: '50%',
+            padding: 0,
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+            background: showDebugPanel
+              ? 'linear-gradient(to right, #e11d48, #be123c)'
+              : 'linear-gradient(to right, #4f46e5, #6366f1)',
+          }}
+          className="lg:hidden !rounded-full !p-0"
+        />
+      )}
+    </>
+  );
+};
+
+export default FloatingButtons; 

web/src/components/playground/ImageUrlInput.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  Input,
+  Typography,
+  Button,
+  Switch,
+} from '@douyinfe/semi-ui';
+import { IconFile } from '@douyinfe/semi-icons';
+import {
+  FileText,
+  Plus,
+  X,
+  Image,
+} from 'lucide-react';
+
+const ImageUrlInput = ({ imageUrls, imageEnabled, onImageUrlsChange, onImageEnabledChange, disabled = false }) => {
+  const handleAddImageUrl = () => {
+    const newUrls = [...imageUrls, ''];
+    onImageUrlsChange(newUrls);
+  };
+
+  const handleUpdateImageUrl = (index, value) => {
+    const newUrls = [...imageUrls];
+    newUrls[index] = value;
+    onImageUrlsChange(newUrls);
+  };
+
+  const handleRemoveImageUrl = (index) => {
+    const newUrls = imageUrls.filter((_, i) => i !== index);
+    onImageUrlsChange(newUrls);
+  };
+
+  return (
+    <div className={disabled ? 'opacity-50' : ''}>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Image size={16} className={imageEnabled && !disabled ? "text-blue-500" : "text-gray-400"} />
+          <Typography.Text strong className="text-sm">
+            图片地址
+          </Typography.Text>
+          {disabled && (
+            <Typography.Text className="text-xs text-orange-600">
+              (已在自定义模式中忽略)
+            </Typography.Text>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={imageEnabled}
+            onChange={onImageEnabledChange}
+            checkedText="启用"
+            uncheckedText="停用"
+            size="small"
+            className="flex-shrink-0"
+            disabled={disabled}
+          />
+          <Button
+            icon={<Plus size={14} />}
+            size="small"
+            theme="solid"
+            type="primary"
+            onClick={handleAddImageUrl}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={!imageEnabled || disabled}
+          />
+        </div>
+      </div>
+
+      {!imageEnabled ? (
+        <Typography.Text className="text-xs text-gray-500 mb-2 block">
+          {disabled ? '图片功能在自定义请求体模式下不可用' : '启用后可添加图片URL进行多模态对话'}
+        </Typography.Text>
+      ) : imageUrls.length === 0 ? (
+        <Typography.Text className="text-xs text-gray-500 mb-2 block">
+          {disabled ? '图片功能在自定义请求体模式下不可用' : '点击 + 按钮添加图片URL进行多模态对话'}
+        </Typography.Text>
+      ) : (
+        <Typography.Text className="text-xs text-gray-500 mb-2 block">
+          已添加 {imageUrls.length} 张图片{disabled ? ' (自定义模式下不可用)' : ''}
+        </Typography.Text>
+      )}
+
+      <div className={`space-y-2 max-h-32 overflow-y-auto image-list-scroll ${!imageEnabled || disabled ? 'opacity-50' : ''}`}>
+        {imageUrls.map((url, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <div className="flex-1">
+              <Input
+                placeholder={`https://example.com/image${index + 1}.jpg`}
+                value={url}
+                onChange={(value) => handleUpdateImageUrl(index, value)}
+                className="!rounded-lg"
+                size="small"
+                prefix={<IconFile size='small' />}
+                disabled={!imageEnabled || disabled}
+              />
+            </div>
+            <Button
+              icon={<X size={12} />}
+              size="small"
+              theme="borderless"
+              type="danger"
+              onClick={() => handleRemoveImageUrl(index)}
+              className="!rounded-full !w-6 !h-6 !p-0 !min-w-0 !text-red-500 hover:!bg-red-50 flex-shrink-0"
+              disabled={!imageEnabled || disabled}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImageUrlInput; 

web/src/components/playground/MessageActions.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+} from '@douyinfe/semi-ui';
+import {
+  RefreshCw,
+  Copy,
+  Trash2,
+  UserCheck,
+  Edit,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const MessageActions = ({
+  message,
+  styleState,
+  onMessageReset,
+  onMessageCopy,
+  onMessageDelete,
+  onRoleToggle,
+  onMessageEdit,
+  isAnyMessageGenerating = false,
+  isEditing = false
+}) => {
+  const { t } = useTranslation();
+
+  const isLoading = message.status === 'loading' || message.status === 'incomplete';
+  const shouldDisableActions = isAnyMessageGenerating || isEditing;
+  const canToggleRole = message.role === 'assistant' || message.role === 'system';
+  const canEdit = !isLoading && message.content && typeof onMessageEdit === 'function' && !isEditing;
+
+  return (
+    <div className="flex items-center gap-0.5">
+      {!isLoading && (
+        <Tooltip content={shouldDisableActions ? t('操作暂时被禁用') : t('重试')} position="top">
+          <Button
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            icon={<RefreshCw size={styleState.isMobile ? 12 : 14} />}
+            onClick={() => !shouldDisableActions && onMessageReset(message)}
+            disabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-blue-600 hover:!bg-blue-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            aria-label={t('重试')}
+          />
+        </Tooltip>
+      )}
+
+      {message.content && (
+        <Tooltip content={t('复制')} position="top">
+          <Button
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            icon={<Copy size={styleState.isMobile ? 12 : 14} />}
+            onClick={() => onMessageCopy(message)}
+            className={`!rounded-full !text-gray-400 hover:!text-green-600 hover:!bg-green-50 ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            aria-label={t('复制')}
+          />
+        </Tooltip>
+      )}
+
+      {canEdit && (
+        <Tooltip content={shouldDisableActions ? t('操作暂时被禁用') : t('编辑')} position="top">
+          <Button
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            icon={<Edit size={styleState.isMobile ? 12 : 14} />}
+            onClick={() => !shouldDisableActions && onMessageEdit(message)}
+            disabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-yellow-600 hover:!bg-yellow-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            aria-label={t('编辑')}
+          />
+        </Tooltip>
+      )}
+
+      {canToggleRole && !isLoading && (
+        <Tooltip
+          content={
+            shouldDisableActions
+              ? t('操作暂时被禁用')
+              : message.role === 'assistant'
+                ? t('切换为System角色')
+                : t('切换为Assistant角色')
+          }
+          position="top"
+        >
+          <Button
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            icon={<UserCheck size={styleState.isMobile ? 12 : 14} />}
+            onClick={() => !shouldDisableActions && onRoleToggle && onRoleToggle(message)}
+            disabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : message.role === 'system' ? '!text-purple-500 hover:!text-purple-700 hover:!bg-purple-50' : '!text-gray-400 hover:!text-purple-600 hover:!bg-purple-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            aria-label={message.role === 'assistant' ? t('切换为System角色') : t('切换为Assistant角色')}
+          />
+        </Tooltip>
+      )}
+
+      {!isLoading && (
+        <Tooltip content={shouldDisableActions ? t('操作暂时被禁用') : t('删除')} position="top">
+          <Button
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            icon={<Trash2 size={styleState.isMobile ? 12 : 14} />}
+            onClick={() => !shouldDisableActions && onMessageDelete(message)}
+            disabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-red-600 hover:!bg-red-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            aria-label={t('删除')}
+          />
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export default MessageActions; 

web/src/components/playground/MessageContent.js

@@ -0,0 +1,313 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  Typography,
+  TextArea,
+  Button,
+} from '@douyinfe/semi-ui';
+import MarkdownRenderer from '../common/markdown/MarkdownRenderer';
+import ThinkingContent from './ThinkingContent';
+import {
+  Loader2,
+  Check,
+  X,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const MessageContent = ({
+  message,
+  className,
+  styleState,
+  onToggleReasoningExpansion,
+  isEditing = false,
+  onEditSave,
+  onEditCancel,
+  editValue,
+  onEditValueChange
+}) => {
+  const { t } = useTranslation();
+  const previousContentLengthRef = useRef(0);
+  const lastContentRef = useRef('');
+
+  const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete';
+
+  useEffect(() => {
+    if (!isThinkingStatus) {
+      previousContentLengthRef.current = 0;
+      lastContentRef.current = '';
+    }
+  }, [isThinkingStatus]);
+
+  if (message.status === 'error') {
+    let errorText;
+
+    if (Array.isArray(message.content)) {
+      const textContent = message.content.find(item => item.type === 'text');
+      errorText = textContent && textContent.text && typeof textContent.text === 'string'
+        ? textContent.text
+        : t('请求发生错误');
+    } else if (typeof message.content === 'string') {
+      errorText = message.content;
+    } else {
+      errorText = t('请求发生错误');
+    }
+
+    return (
+      <div className={`${className} flex items-center p-4 bg-red-50 rounded-xl`}>
+        <Typography.Text type="danger" className="text-sm">
+          {errorText}
+        </Typography.Text>
+      </div>
+    );
+  }
+
+  let currentExtractedThinkingContent = null;
+  let currentDisplayableFinalContent = "";
+  let thinkingSource = null;
+
+  const getTextContent = (content) => {
+    if (Array.isArray(content)) {
+      const textItem = content.find(item => item.type === 'text');
+      return textItem && textItem.text && typeof textItem.text === 'string' ? textItem.text : '';
+    } else if (typeof content === 'string') {
+      return content;
+    }
+    return '';
+  };
+
+  currentDisplayableFinalContent = getTextContent(message.content);
+
+  if (message.role === 'assistant') {
+    let baseContentForDisplay = getTextContent(message.content);
+    let combinedThinkingContent = "";
+
+    if (message.reasoningContent) {
+      combinedThinkingContent = message.reasoningContent;
+      thinkingSource = 'reasoningContent';
+    }
+
+    if (baseContentForDisplay.includes('<think>')) {
+      const thinkTagRegex = /<think>([\s\S]*?)<\/think>/g;
+      let match;
+      let thoughtsFromPairedTags = [];
+      let replyParts = [];
+      let lastIndex = 0;
+
+      while ((match = thinkTagRegex.exec(baseContentForDisplay)) !== null) {
+        replyParts.push(baseContentForDisplay.substring(lastIndex, match.index));
+        thoughtsFromPairedTags.push(match[1]);
+        lastIndex = match.index + match[0].length;
+      }
+      replyParts.push(baseContentForDisplay.substring(lastIndex));
+
+      if (thoughtsFromPairedTags.length > 0) {
+        const pairedThoughtsStr = thoughtsFromPairedTags.join('\n\n---\n\n');
+        if (combinedThinkingContent) {
+          combinedThinkingContent += '\n\n---\n\n' + pairedThoughtsStr;
+        } else {
+          combinedThinkingContent = pairedThoughtsStr;
+        }
+        thinkingSource = thinkingSource ? thinkingSource + ' & <think> tags' : '<think> tags';
+      }
+
+      baseContentForDisplay = replyParts.join('');
+    }
+
+    if (isThinkingStatus) {
+      const lastOpenThinkIndex = baseContentForDisplay.lastIndexOf('<think>');
+      if (lastOpenThinkIndex !== -1) {
+        const fragmentAfterLastOpen = baseContentForDisplay.substring(lastOpenThinkIndex);
+        if (!fragmentAfterLastOpen.includes('</think>')) {
+          const unclosedThought = fragmentAfterLastOpen.substring('<think>'.length).trim();
+          if (unclosedThought) {
+            if (combinedThinkingContent) {
+              combinedThinkingContent += '\n\n---\n\n' + unclosedThought;
+            } else {
+              combinedThinkingContent = unclosedThought;
+            }
+            thinkingSource = thinkingSource ? thinkingSource + ' + streaming <think>' : 'streaming <think>';
+          }
+          baseContentForDisplay = baseContentForDisplay.substring(0, lastOpenThinkIndex);
+        }
+      }
+    }
+
+    currentExtractedThinkingContent = combinedThinkingContent || null;
+    currentDisplayableFinalContent = baseContentForDisplay.replace(/<\/?think>/g, '').trim();
+  }
+
+  const finalExtractedThinkingContent = currentExtractedThinkingContent;
+  const finalDisplayableFinalContent = currentDisplayableFinalContent;
+
+  if (message.role === 'assistant' &&
+    isThinkingStatus &&
+    !finalExtractedThinkingContent &&
+    (!finalDisplayableFinalContent || finalDisplayableFinalContent.trim() === '')) {
+    return (
+      <div className={`${className} flex items-center gap-2 sm:gap-4 bg-gradient-to-r from-purple-50 to-indigo-50`}>
+        <div className="w-5 h-5 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center shadow-lg">
+          <Loader2 className="animate-spin text-white" size={styleState.isMobile ? 16 : 20} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {message.role === 'system' && (
+        <div className="mb-2 sm:mb-4">
+          <div className="flex items-center gap-2 p-2 sm:p-3 bg-gradient-to-r from-amber-50 to-orange-50 rounded-lg" style={{ border: '1px solid var(--semi-color-border)' }}>
+            <div className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-sm">
+              <Typography.Text className="text-white text-xs font-bold">S</Typography.Text>
+            </div>
+            <Typography.Text className="text-amber-700 text-xs sm:text-sm font-medium">
+              {t('系统消息')}
+            </Typography.Text>
+          </div>
+        </div>
+      )}
+
+      {message.role === 'assistant' && (
+        <ThinkingContent
+          message={message}
+          finalExtractedThinkingContent={finalExtractedThinkingContent}
+          thinkingSource={thinkingSource}
+          styleState={styleState}
+          onToggleReasoningExpansion={onToggleReasoningExpansion}
+        />
+      )}
+
+      {isEditing ? (
+        <div className="space-y-3">
+          <TextArea
+            value={editValue}
+            onChange={(value) => onEditValueChange(value)}
+            placeholder={t('请输入消息内容...')}
+            autosize={{ minRows: 3, maxRows: 12 }}
+            style={{
+              resize: 'vertical',
+              fontSize: styleState.isMobile ? '14px' : '15px',
+              lineHeight: '1.6',
+            }}
+            className="!border-blue-200 focus:!border-blue-400 !bg-blue-50/50"
+          />
+          <div className="flex items-center gap-2 w-full">
+            <Button
+              size="small"
+              type="danger"
+              theme="light"
+              icon={<X size={14} />}
+              onClick={onEditCancel}
+              className="flex-1"
+            >
+              {t('取消')}
+            </Button>
+            <Button
+              size="small"
+              type="warning"
+              theme="solid"
+              icon={<Check size={14} />}
+              onClick={onEditSave}
+              disabled={!editValue || editValue.trim() === ''}
+              className="flex-1"
+            >
+              {t('保存')}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        (() => {
+          if (Array.isArray(message.content)) {
+            const textContent = message.content.find(item => item.type === 'text');
+            const imageContents = message.content.filter(item => item.type === 'image_url');
+
+            return (
+              <div>
+                {imageContents.length > 0 && (
+                  <div className="mb-3 space-y-2">
+                    {imageContents.map((imgItem, index) => (
+                      <div key={index} className="max-w-sm">
+                        <img
+                          src={imgItem.image_url.url}
+                          alt={`用户上传的图片 ${index + 1}`}
+                          className="rounded-lg max-w-full h-auto shadow-sm border"
+                          style={{ maxHeight: '300px' }}
+                          onError={(e) => {
+                            e.target.style.display = 'none';
+                            e.target.nextSibling.style.display = 'block';
+                          }}
+                        />
+                        <div
+                          className="text-red-500 text-sm p-2 bg-red-50 rounded-lg border border-red-200"
+                          style={{ display: 'none' }}
+                        >
+                          图片加载失败: {imgItem.image_url.url}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {textContent && textContent.text && typeof textContent.text === 'string' && textContent.text.trim() !== '' && (
+                  <div className={`prose prose-xs sm:prose-sm prose-gray max-w-none overflow-x-auto text-xs sm:text-sm ${message.role === 'user' ? 'user-message' : ''}`}>
+                    <MarkdownRenderer
+                      content={textContent.text}
+                      className={message.role === 'user' ? 'user-message' : ''}
+                      animated={false}
+                      previousContentLength={0}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          if (typeof message.content === 'string') {
+            if (message.role === 'assistant') {
+              if (finalDisplayableFinalContent && finalDisplayableFinalContent.trim() !== '') {
+                // 获取上一次的内容长度
+                let prevLength = 0;
+                if (isThinkingStatus && lastContentRef.current) {
+                  // 只有当前内容包含上一次内容时，才使用上一次的长度
+                  if (finalDisplayableFinalContent.startsWith(lastContentRef.current)) {
+                    prevLength = lastContentRef.current.length;
+                  }
+                }
+
+                // 更新最后内容的引用
+                if (isThinkingStatus) {
+                  lastContentRef.current = finalDisplayableFinalContent;
+                }
+
+                return (
+                  <div className="prose prose-xs sm:prose-sm prose-gray max-w-none overflow-x-auto text-xs sm:text-sm">
+                    <MarkdownRenderer
+                      content={finalDisplayableFinalContent}
+                      className=""
+                      animated={isThinkingStatus}
+                      previousContentLength={prevLength}
+                    />
+                  </div>
+                );
+              }
+            } else {
+              return (
+                <div className={`prose prose-xs sm:prose-sm prose-gray max-w-none overflow-x-auto text-xs sm:text-sm ${message.role === 'user' ? 'user-message' : ''}`}>
+                  <MarkdownRenderer
+                    content={message.content}
+                    className={message.role === 'user' ? 'user-message' : ''}
+                    animated={false}
+                    previousContentLength={0}
+                  />
+                </div>
+              );
+            }
+          }
+
+          return null;
+        })()
+      )}
+    </div>
+  );
+};
+
+export default MessageContent; 

web/src/components/playground/OptimizedComponents.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import MessageContent from './MessageContent';
+import MessageActions from './MessageActions';
+import SettingsPanel from './SettingsPanel';
+import DebugPanel from './DebugPanel';
+
+// 优化的消息内容组件
+export const OptimizedMessageContent = React.memo(MessageContent, (prevProps, nextProps) => {
+  // 只有这些属性变化时才重新渲染
+  return (
+    prevProps.message.id === nextProps.message.id &&
+    prevProps.message.content === nextProps.message.content &&
+    prevProps.message.status === nextProps.message.status &&
+    prevProps.message.role === nextProps.message.role &&
+    prevProps.message.reasoningContent === nextProps.message.reasoningContent &&
+    prevProps.message.isReasoningExpanded === nextProps.message.isReasoningExpanded &&
+    prevProps.isEditing === nextProps.isEditing &&
+    prevProps.editValue === nextProps.editValue &&
+    prevProps.styleState.isMobile === nextProps.styleState.isMobile
+  );
+});
+
+// 优化的消息操作组件
+export const OptimizedMessageActions = React.memo(MessageActions, (prevProps, nextProps) => {
+  return (
+    prevProps.message.id === nextProps.message.id &&
+    prevProps.message.role === nextProps.message.role &&
+    prevProps.isAnyMessageGenerating === nextProps.isAnyMessageGenerating &&
+    prevProps.isEditing === nextProps.isEditing &&
+    prevProps.onMessageReset === nextProps.onMessageReset
+  );
+});
+
+// 优化的设置面板组件
+export const OptimizedSettingsPanel = React.memo(SettingsPanel, (prevProps, nextProps) => {
+  return (
+    JSON.stringify(prevProps.inputs) === JSON.stringify(nextProps.inputs) &&
+    JSON.stringify(prevProps.parameterEnabled) === JSON.stringify(nextProps.parameterEnabled) &&
+    JSON.stringify(prevProps.models) === JSON.stringify(nextProps.models) &&
+    JSON.stringify(prevProps.groups) === JSON.stringify(nextProps.groups) &&
+    prevProps.customRequestMode === nextProps.customRequestMode &&
+    prevProps.customRequestBody === nextProps.customRequestBody &&
+    prevProps.showDebugPanel === nextProps.showDebugPanel &&
+    prevProps.showSettings === nextProps.showSettings &&
+    JSON.stringify(prevProps.previewPayload) === JSON.stringify(nextProps.previewPayload) &&
+    JSON.stringify(prevProps.messages) === JSON.stringify(nextProps.messages)
+  );
+});
+
+// 优化的调试面板组件
+export const OptimizedDebugPanel = React.memo(DebugPanel, (prevProps, nextProps) => {
+  return (
+    prevProps.show === nextProps.show &&
+    prevProps.activeTab === nextProps.activeTab &&
+    JSON.stringify(prevProps.debugData) === JSON.stringify(nextProps.debugData) &&
+    JSON.stringify(prevProps.previewPayload) === JSON.stringify(nextProps.previewPayload) &&
+    prevProps.customRequestMode === nextProps.customRequestMode &&
+    prevProps.showDebugPanel === nextProps.showDebugPanel
+  );
+}); 

web/src/components/playground/ParameterControl.js

@@ -0,0 +1,241 @@
+import React from 'react';
+import {
+  Input,
+  Slider,
+  Typography,
+  Button,
+  Tag,
+} from '@douyinfe/semi-ui';
+import {
+  Hash,
+  Thermometer,
+  Target,
+  Repeat,
+  Ban,
+  Shuffle,
+  Check,
+  X,
+} from 'lucide-react';
+
+const ParameterControl = ({
+  inputs,
+  parameterEnabled,
+  onInputChange,
+  onParameterToggle,
+  disabled = false,
+}) => {
+  return (
+    <>
+      {/* Temperature */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.temperature || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Thermometer size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Temperature
+            </Typography.Text>
+            <Tag size="small" className="!rounded-full">
+              {inputs.temperature}
+            </Tag>
+          </div>
+          <Button
+            theme={parameterEnabled.temperature ? 'solid' : 'borderless'}
+            type={parameterEnabled.temperature ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.temperature ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('temperature')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Typography.Text className="text-xs text-gray-500 mb-2">
+          控制输出的随机性和创造性
+        </Typography.Text>
+        <Slider
+          step={0.1}
+          min={0.1}
+          max={1}
+          value={inputs.temperature}
+          onChange={(value) => onInputChange('temperature', value)}
+          className="mt-2"
+          disabled={!parameterEnabled.temperature || disabled}
+        />
+      </div>
+
+      {/* Top P */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.top_p || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Target size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Top P
+            </Typography.Text>
+            <Tag size="small" className="!rounded-full">
+              {inputs.top_p}
+            </Tag>
+          </div>
+          <Button
+            theme={parameterEnabled.top_p ? 'solid' : 'borderless'}
+            type={parameterEnabled.top_p ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.top_p ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('top_p')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Typography.Text className="text-xs text-gray-500 mb-2">
+          核采样，控制词汇选择的多样性
+        </Typography.Text>
+        <Slider
+          step={0.1}
+          min={0.1}
+          max={1}
+          value={inputs.top_p}
+          onChange={(value) => onInputChange('top_p', value)}
+          className="mt-2"
+          disabled={!parameterEnabled.top_p || disabled}
+        />
+      </div>
+
+      {/* Frequency Penalty */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.frequency_penalty || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Repeat size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Frequency Penalty
+            </Typography.Text>
+            <Tag size="small" className="!rounded-full">
+              {inputs.frequency_penalty}
+            </Tag>
+          </div>
+          <Button
+            theme={parameterEnabled.frequency_penalty ? 'solid' : 'borderless'}
+            type={parameterEnabled.frequency_penalty ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.frequency_penalty ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('frequency_penalty')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Typography.Text className="text-xs text-gray-500 mb-2">
+          频率惩罚，减少重复词汇的出现
+        </Typography.Text>
+        <Slider
+          step={0.1}
+          min={-2}
+          max={2}
+          value={inputs.frequency_penalty}
+          onChange={(value) => onInputChange('frequency_penalty', value)}
+          className="mt-2"
+          disabled={!parameterEnabled.frequency_penalty || disabled}
+        />
+      </div>
+
+      {/* Presence Penalty */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.presence_penalty || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Ban size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Presence Penalty
+            </Typography.Text>
+            <Tag size="small" className="!rounded-full">
+              {inputs.presence_penalty}
+            </Tag>
+          </div>
+          <Button
+            theme={parameterEnabled.presence_penalty ? 'solid' : 'borderless'}
+            type={parameterEnabled.presence_penalty ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.presence_penalty ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('presence_penalty')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Typography.Text className="text-xs text-gray-500 mb-2">
+          存在惩罚，鼓励讨论新话题
+        </Typography.Text>
+        <Slider
+          step={0.1}
+          min={-2}
+          max={2}
+          value={inputs.presence_penalty}
+          onChange={(value) => onInputChange('presence_penalty', value)}
+          className="mt-2"
+          disabled={!parameterEnabled.presence_penalty || disabled}
+        />
+      </div>
+
+      {/* MaxTokens */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.max_tokens || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Hash size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Max Tokens
+            </Typography.Text>
+          </div>
+          <Button
+            theme={parameterEnabled.max_tokens ? 'solid' : 'borderless'}
+            type={parameterEnabled.max_tokens ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.max_tokens ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('max_tokens')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Input
+          placeholder='MaxTokens'
+          name='max_tokens'
+          required
+          autoComplete='new-password'
+          defaultValue={0}
+          value={inputs.max_tokens}
+          onChange={(value) => onInputChange('max_tokens', value)}
+          className="!rounded-lg"
+          disabled={!parameterEnabled.max_tokens || disabled}
+        />
+      </div>
+
+      {/* Seed */}
+      <div className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.seed || disabled ? 'opacity-50' : ''}`}>
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-2">
+            <Shuffle size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              Seed
+            </Typography.Text>
+            <Typography.Text className="text-xs text-gray-400">
+              (可选，用于复现结果)
+            </Typography.Text>
+          </div>
+          <Button
+            theme={parameterEnabled.seed ? 'solid' : 'borderless'}
+            type={parameterEnabled.seed ? 'primary' : 'tertiary'}
+            size="small"
+            icon={parameterEnabled.seed ? <Check size={10} /> : <X size={10} />}
+            onClick={() => onParameterToggle('seed')}
+            className="!rounded-full !w-4 !h-4 !p-0 !min-w-0"
+            disabled={disabled}
+          />
+        </div>
+        <Input
+          placeholder='随机种子 (留空为随机)'
+          name='seed'
+          autoComplete='new-password'
+          value={inputs.seed || ''}
+          onChange={(value) => onInputChange('seed', value === '' ? null : value)}
+          className="!rounded-lg"
+          disabled={!parameterEnabled.seed || disabled}
+        />
+      </div>
+    </>
+  );
+};
+
+export default ParameterControl; 

web/src/components/playground/SettingsPanel.js

@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+  Card,
+  Select,
+  Typography,
+  Button,
+  Switch,
+} from '@douyinfe/semi-ui';
+import {
+  Sparkles,
+  Users,
+  ToggleLeft,
+  X,
+  Settings,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { renderGroupOption } from '../../helpers/render.js';
+import ParameterControl from './ParameterControl';
+import ImageUrlInput from './ImageUrlInput';
+import ConfigManager from './ConfigManager';
+import CustomRequestEditor from './CustomRequestEditor';
+
+const SettingsPanel = ({
+  inputs,
+  parameterEnabled,
+  models,
+  groups,
+  styleState,
+  showDebugPanel,
+  customRequestMode,
+  customRequestBody,
+  onInputChange,
+  onParameterToggle,
+  onCloseSettings,
+  onConfigImport,
+  onConfigReset,
+  onCustomRequestModeChange,
+  onCustomRequestBodyChange,
+  previewPayload,
+  messages,
+}) => {
+  const { t } = useTranslation();
+
+  const currentConfig = {
+    inputs,
+    parameterEnabled,
+    showDebugPanel,
+    customRequestMode,
+    customRequestBody,
+  };
+
+  return (
+    <Card
+      className="h-full flex flex-col"
+      bordered={false}
+      bodyStyle={{
+        padding: styleState.isMobile ? '16px' : '24px',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
+      {/* 标题区域 - 与调试面板保持一致 */}
+      <div className="flex items-center justify-between mb-6 flex-shrink-0">
+        <div className="flex items-center">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-3">
+            <Settings size={20} className="text-white" />
+          </div>
+          <Typography.Title heading={5} className="mb-0">
+            {t('模型配置')}
+          </Typography.Title>
+        </div>
+
+        {styleState.isMobile && onCloseSettings && (
+          <Button
+            icon={<X size={16} />}
+            onClick={onCloseSettings}
+            theme="borderless"
+            type="tertiary"
+            size="small"
+            className="!rounded-lg"
+          />
+        )}
+      </div>
+
+      {/* 移动端配置管理 */}
+      {styleState.isMobile && (
+        <div className="mb-4 flex-shrink-0">
+          <ConfigManager
+            currentConfig={currentConfig}
+            onConfigImport={onConfigImport}
+            onConfigReset={onConfigReset}
+            styleState={{ ...styleState, isMobile: false }}
+            messages={messages}
+          />
+        </div>
+      )}
+
+      <div className="space-y-6 overflow-y-auto flex-1 pr-2 model-settings-scroll">
+        {/* 自定义请求体编辑器 */}
+        <CustomRequestEditor
+          customRequestMode={customRequestMode}
+          customRequestBody={customRequestBody}
+          onCustomRequestModeChange={onCustomRequestModeChange}
+          onCustomRequestBodyChange={onCustomRequestBodyChange}
+          defaultPayload={previewPayload}
+        />
+
+        {/* 分组选择 */}
+        <div className={customRequestMode ? 'opacity-50' : ''}>
+          <div className="flex items-center gap-2 mb-2">
+            <Users size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              {t('分组')}
+            </Typography.Text>
+            {customRequestMode && (
+              <Typography.Text className="text-xs text-orange-600">
+                (已在自定义模式中忽略)
+              </Typography.Text>
+            )}
+          </div>
+          <Select
+            placeholder={t('请选择分组')}
+            name='group'
+            required
+            selection
+            onChange={(value) => onInputChange('group', value)}
+            value={inputs.group}
+            autoComplete='new-password'
+            optionList={groups}
+            renderOptionItem={renderGroupOption}
+            style={{ width: '100%' }}
+            dropdownStyle={{ width: '100%', maxWidth: '100%' }}
+            className="!rounded-lg"
+            disabled={customRequestMode}
+          />
+        </div>
+
+        {/* 模型选择 */}
+        <div className={customRequestMode ? 'opacity-50' : ''}>
+          <div className="flex items-center gap-2 mb-2">
+            <Sparkles size={16} className="text-gray-500" />
+            <Typography.Text strong className="text-sm">
+              {t('模型')}
+            </Typography.Text>
+            {customRequestMode && (
+              <Typography.Text className="text-xs text-orange-600">
+                (已在自定义模式中忽略)
+              </Typography.Text>
+            )}
+          </div>
+          <Select
+            placeholder={t('请选择模型')}
+            name='model'
+            required
+            selection
+            searchPosition='dropdown'
+            filter
+            onChange={(value) => onInputChange('model', value)}
+            value={inputs.model}
+            autoComplete='new-password'
+            optionList={models}
+            style={{ width: '100%' }}
+            dropdownStyle={{ width: '100%', maxWidth: '100%' }}
+            className="!rounded-lg"
+            disabled={customRequestMode}
+          />
+        </div>
+
+        {/* 图片URL输入 */}
+        <div className={customRequestMode ? 'opacity-50' : ''}>
+          <ImageUrlInput
+            imageUrls={inputs.imageUrls}
+            imageEnabled={inputs.imageEnabled}
+            onImageUrlsChange={(urls) => onInputChange('imageUrls', urls)}
+            onImageEnabledChange={(enabled) => onInputChange('imageEnabled', enabled)}
+            disabled={customRequestMode}
+          />
+        </div>
+
+        {/* 参数控制组件 */}
+        <div className={customRequestMode ? 'opacity-50' : ''}>
+          <ParameterControl
+            inputs={inputs}
+            parameterEnabled={parameterEnabled}
+            onInputChange={onInputChange}
+            onParameterToggle={onParameterToggle}
+            disabled={customRequestMode}
+          />
+        </div>
+
+        {/* 流式输出开关 */}
+        <div className={customRequestMode ? 'opacity-50' : ''}>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <ToggleLeft size={16} className="text-gray-500" />
+              <Typography.Text strong className="text-sm">
+                流式输出
+              </Typography.Text>
+              {customRequestMode && (
+                <Typography.Text className="text-xs text-orange-600">
+                  (已在自定义模式中忽略)
+                </Typography.Text>
+              )}
+            </div>
+            <Switch
+              checked={inputs.stream}
+              onChange={(checked) => onInputChange('stream', checked)}
+              checkedText="开"
+              uncheckedText="关"
+              size="small"
+              disabled={customRequestMode}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 桌面端的配置管理放在底部 */}
+      {!styleState.isMobile && (
+        <div className="flex-shrink-0 pt-3">
+          <ConfigManager
+            currentConfig={currentConfig}
+            onConfigImport={onConfigImport}
+            onConfigReset={onConfigReset}
+            styleState={styleState}
+            messages={messages}
+          />
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default SettingsPanel; 

web/src/components/playground/ThinkingContent.js

@@ -0,0 +1,125 @@
+import React, { useEffect, useRef } from 'react';
+import { Typography } from '@douyinfe/semi-ui';
+import MarkdownRenderer from '../common/markdown/MarkdownRenderer';
+import { ChevronRight, ChevronUp, Brain, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const ThinkingContent = ({
+  message,
+  finalExtractedThinkingContent,
+  thinkingSource,
+  styleState,
+  onToggleReasoningExpansion
+}) => {
+  const { t } = useTranslation();
+  const scrollRef = useRef(null);
+  const lastContentRef = useRef('');
+
+  const isThinkingStatus = message.status === 'loading' || message.status === 'incomplete';
+  const headerText = (isThinkingStatus && !message.isThinkingComplete) ? t('思考中...') : t('思考过程');
+
+  useEffect(() => {
+    if (scrollRef.current && finalExtractedThinkingContent && message.isReasoningExpanded) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [finalExtractedThinkingContent, message.isReasoningExpanded]);
+
+  useEffect(() => {
+    if (!isThinkingStatus) {
+      lastContentRef.current = '';
+    }
+  }, [isThinkingStatus]);
+
+  if (!finalExtractedThinkingContent) return null;
+
+  let prevLength = 0;
+  if (isThinkingStatus && lastContentRef.current) {
+    if (finalExtractedThinkingContent.startsWith(lastContentRef.current)) {
+      prevLength = lastContentRef.current.length;
+    }
+  }
+
+  if (isThinkingStatus) {
+    lastContentRef.current = finalExtractedThinkingContent;
+  }
+
+  return (
+    <div className="rounded-xl sm:rounded-2xl mb-2 sm:mb-4 overflow-hidden shadow-sm backdrop-blur-sm">
+      <div
+        className="flex items-center justify-between p-3 cursor-pointer hover:bg-gradient-to-r hover:from-white/20 hover:to-purple-50/30 transition-all"
+        style={{
+          background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
+          position: 'relative'
+        }}
+        onClick={() => onToggleReasoningExpansion(message.id)}
+      >
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+          <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+        </div>
+        <div className="flex items-center gap-2 sm:gap-4 relative">
+          <div className="w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-white/20 flex items-center justify-center shadow-lg">
+            <Brain style={{ color: 'white' }} size={styleState.isMobile ? 12 : 16} />
+          </div>
+          <div className="flex flex-col">
+            <Typography.Text strong style={{ color: 'white' }} className="text-sm sm:text-base">
+              {headerText}
+            </Typography.Text>
+            {thinkingSource && (
+              <Typography.Text style={{ color: 'white' }} className="text-xs mt-0.5 opacity-80 hidden sm:block">
+                来源: {thinkingSource}
+              </Typography.Text>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-2 sm:gap-3 relative">
+          {isThinkingStatus && !message.isThinkingComplete && (
+            <div className="flex items-center gap-1 sm:gap-2">
+              <Loader2 style={{ color: 'white' }} className="animate-spin" size={styleState.isMobile ? 14 : 18} />
+              <Typography.Text style={{ color: 'white' }} className="text-xs sm:text-sm font-medium opacity-90">
+                思考中
+              </Typography.Text>
+            </div>
+          )}
+          {(!isThinkingStatus || message.isThinkingComplete) && (
+            <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/20 flex items-center justify-center">
+              {message.isReasoningExpanded ?
+                <ChevronUp size={styleState.isMobile ? 12 : 16} style={{ color: 'white' }} /> :
+                <ChevronRight size={styleState.isMobile ? 12 : 16} style={{ color: 'white' }} />
+              }
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={`transition-all duration-500 ease-out ${message.isReasoningExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+          } overflow-hidden bg-gradient-to-br from-purple-50 via-indigo-50 to-violet-50`}
+      >
+        {message.isReasoningExpanded && (
+          <div className="p-3 sm:p-5 pt-2 sm:pt-4">
+            <div
+              ref={scrollRef}
+              className="bg-white/70 backdrop-blur-sm rounded-lg sm:rounded-xl p-2 shadow-inner overflow-x-auto overflow-y-auto thinking-content-scroll"
+              style={{
+                maxHeight: '200px',
+                scrollbarWidth: 'thin',
+                scrollbarColor: 'rgba(0, 0, 0, 0.3) transparent'
+              }}
+            >
+              <div className="prose prose-xs sm:prose-sm prose-purple max-w-none text-xs sm:text-sm">
+                <MarkdownRenderer
+                  content={finalExtractedThinkingContent}
+                  className=""
+                  animated={isThinkingStatus}
+                  previousContentLength={prevLength}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ThinkingContent; 

web/src/components/playground/configStorage.js

@@ -0,0 +1,203 @@
+import { STORAGE_KEYS, DEFAULT_CONFIG } from '../../utils/constants';
+
+const MESSAGES_STORAGE_KEY = 'playground_messages';
+
+/**
+ * 保存配置到 localStorage
+ * @param {Object} config - 要保存的配置对象
+ */
+export const saveConfig = (config) => {
+  try {
+    const configToSave = {
+      ...config,
+      timestamp: new Date().toISOString(),
+    };
+    localStorage.setItem(STORAGE_KEYS.CONFIG, JSON.stringify(configToSave));
+  } catch (error) {
+    console.error('保存配置失败:', error);
+  }
+};
+
+/**
+ * 保存消息到 localStorage
+ * @param {Array} messages - 要保存的消息数组
+ */
+export const saveMessages = (messages) => {
+  try {
+    const messagesToSave = {
+      messages,
+      timestamp: new Date().toISOString(),
+    };
+    localStorage.setItem(STORAGE_KEYS.MESSAGES, JSON.stringify(messagesToSave));
+  } catch (error) {
+    console.error('保存消息失败:', error);
+  }
+};
+
+/**
+ * 从 localStorage 加载配置
+ * @returns {Object} 配置对象，如果不存在则返回默认配置
+ */
+export const loadConfig = () => {
+  try {
+    const savedConfig = localStorage.getItem(STORAGE_KEYS.CONFIG);
+    if (savedConfig) {
+      const parsedConfig = JSON.parse(savedConfig);
+
+      const mergedConfig = {
+        inputs: {
+          ...DEFAULT_CONFIG.inputs,
+          ...parsedConfig.inputs,
+        },
+        parameterEnabled: {
+          ...DEFAULT_CONFIG.parameterEnabled,
+          ...parsedConfig.parameterEnabled,
+        },
+        showDebugPanel: parsedConfig.showDebugPanel || DEFAULT_CONFIG.showDebugPanel,
+        customRequestMode: parsedConfig.customRequestMode || DEFAULT_CONFIG.customRequestMode,
+        customRequestBody: parsedConfig.customRequestBody || DEFAULT_CONFIG.customRequestBody,
+      };
+
+      return mergedConfig;
+    }
+  } catch (error) {
+    console.error('加载配置失败:', error);
+  }
+
+  return DEFAULT_CONFIG;
+};
+
+/**
+ * 从 localStorage 加载消息
+ * @returns {Array} 消息数组，如果不存在则返回 null
+ */
+export const loadMessages = () => {
+  try {
+    const savedMessages = localStorage.getItem(STORAGE_KEYS.MESSAGES);
+    if (savedMessages) {
+      const parsedMessages = JSON.parse(savedMessages);
+      return parsedMessages.messages || null;
+    }
+  } catch (error) {
+    console.error('加载消息失败:', error);
+  }
+
+  return null;
+};
+
+/**
+ * 清除保存的配置
+ */
+export const clearConfig = () => {
+  try {
+    localStorage.removeItem(STORAGE_KEYS.CONFIG);
+    localStorage.removeItem(STORAGE_KEYS.MESSAGES); // 同时清除消息
+  } catch (error) {
+    console.error('清除配置失败:', error);
+  }
+};
+
+/**
+ * 清除保存的消息
+ */
+export const clearMessages = () => {
+  try {
+    localStorage.removeItem(STORAGE_KEYS.MESSAGES);
+  } catch (error) {
+    console.error('清除消息失败:', error);
+  }
+};
+
+/**
+ * 检查是否有保存的配置
+ * @returns {boolean} 是否存在保存的配置
+ */
+export const hasStoredConfig = () => {
+  try {
+    return localStorage.getItem(STORAGE_KEYS.CONFIG) !== null;
+  } catch (error) {
+    console.error('检查配置失败:', error);
+    return false;
+  }
+};
+
+/**
+ * 获取配置的最后保存时间
+ * @returns {string|null} 最后保存时间的 ISO 字符串
+ */
+export const getConfigTimestamp = () => {
+  try {
+    const savedConfig = localStorage.getItem(STORAGE_KEYS.CONFIG);
+    if (savedConfig) {
+      const parsedConfig = JSON.parse(savedConfig);
+      return parsedConfig.timestamp || null;
+    }
+  } catch (error) {
+    console.error('获取配置时间戳失败:', error);
+  }
+  return null;
+};
+
+/**
+ * 导出配置为 JSON 文件（包含消息）
+ * @param {Object} config - 要导出的配置
+ * @param {Array} messages - 要导出的消息
+ */
+export const exportConfig = (config, messages = null) => {
+  try {
+    const configToExport = {
+      ...config,
+      messages: messages || loadMessages(), // 包含消息数据
+      exportTime: new Date().toISOString(),
+      version: '1.0',
+    };
+
+    const dataStr = JSON.stringify(configToExport, null, 2);
+    const dataBlob = new Blob([dataStr], { type: 'application/json' });
+
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(dataBlob);
+    link.download = `playground-config-${new Date().toISOString().split('T')[0]}.json`;
+    link.click();
+
+    URL.revokeObjectURL(link.href);
+
+  } catch (error) {
+    console.error('导出配置失败:', error);
+  }
+};
+
+/**
+ * 从文件导入配置（包含消息）
+ * @param {File} file - 包含配置的 JSON 文件
+ * @returns {Promise<Object>} 导入的配置对象
+ */
+export const importConfig = (file) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const importedConfig = JSON.parse(e.target.result);
+
+          if (importedConfig.inputs && importedConfig.parameterEnabled) {
+            // 如果导入的配置包含消息，也一起导入
+            if (importedConfig.messages && Array.isArray(importedConfig.messages)) {
+              saveMessages(importedConfig.messages);
+            }
+
+            resolve(importedConfig);
+          } else {
+            reject(new Error('配置文件格式无效'));
+          }
+        } catch (parseError) {
+          reject(new Error('解析配置文件失败: ' + parseError.message));
+        }
+      };
+      reader.onerror = () => reject(new Error('读取文件失败'));
+      reader.readAsText(file);
+    } catch (error) {
+      reject(new Error('导入配置失败: ' + error.message));
+    }
+  });
+}; 

web/src/components/playground/index.js

@@ -0,0 +1,20 @@
+export { default as SettingsPanel } from './SettingsPanel';
+export { default as ChatArea } from './ChatArea';
+export { default as DebugPanel } from './DebugPanel';
+export { default as MessageContent } from './MessageContent';
+export { default as MessageActions } from './MessageActions';
+export { default as CustomInputRender } from './CustomInputRender';
+export { default as ParameterControl } from './ParameterControl';
+export { default as ImageUrlInput } from './ImageUrlInput';
+export { default as FloatingButtons } from './FloatingButtons';
+export { default as ConfigManager } from './ConfigManager';
+
+export {
+  saveConfig,
+  loadConfig,
+  clearConfig,
+  hasStoredConfig,
+  getConfigTimestamp,
+  exportConfig,
+  importConfig,
+} from './configStorage'; 

web/src/constants/channel.constants.js

@@ -113,7 +113,7 @@ export const CHANNEL_OPTIONS = [
   {
     value: 45,
     color: 'blue',
-    label: '字节火山方舟、豆包、DeepSeek通用',
+    label: '字节火山方舟、豆包通用',
   },
   {
     value: 48,

web/src/constants/index.js

@@ -1,4 +1,5 @@
-export * from './toast.constants';
-export * from './user.constants';
-export * from './common.constant';
 export * from './channel.constants';
+export * from './user.constants';
+export * from './toast.constants';
+export * from './common.constant';
+export * from './model.constants';

web/src/constants/model.constants.js

@@ -0,0 +1,145 @@
+import {
+    OpenAI,
+    Claude,
+    Gemini,
+    Moonshot,
+    Zhipu,
+    Qwen,
+    DeepSeek,
+    Minimax,
+    Wenxin,
+    Spark,
+    Midjourney,
+    Hunyuan,
+    Cohere,
+    Cloudflare,
+    Ai360,
+    Yi,
+    Jina,
+    Mistral,
+    XAI,
+    Ollama,
+    Doubao,
+} from '@lobehub/icons';
+
+export const MODEL_CATEGORIES = (t) => ({
+    all: {
+        label: t('全部模型'),
+        icon: null,
+        filter: () => true
+    },
+    openai: {
+        label: 'OpenAI',
+        icon: <OpenAI />,
+        filter: (model) => model.model_name.toLowerCase().includes('gpt') ||
+            model.model_name.toLowerCase().includes('dall-e') ||
+            model.model_name.toLowerCase().includes('whisper') ||
+            model.model_name.toLowerCase().includes('tts') ||
+            model.model_name.toLowerCase().includes('text-') ||
+            model.model_name.toLowerCase().includes('babbage') ||
+            model.model_name.toLowerCase().includes('davinci') ||
+            model.model_name.toLowerCase().includes('curie') ||
+            model.model_name.toLowerCase().includes('ada')
+    },
+    anthropic: {
+        label: 'Anthropic',
+        icon: <Claude.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('claude')
+    },
+    gemini: {
+        label: 'Gemini',
+        icon: <Gemini.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('gemini')
+    },
+    moonshot: {
+        label: 'Moonshot',
+        icon: <Moonshot />,
+        filter: (model) => model.model_name.toLowerCase().includes('moonshot')
+    },
+    zhipu: {
+        label: t('智谱'),
+        icon: <Zhipu.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('chatglm') ||
+            model.model_name.toLowerCase().includes('glm-')
+    },
+    qwen: {
+        label: t('通义千问'),
+        icon: <Qwen.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('qwen')
+    },
+    deepseek: {
+        label: 'DeepSeek',
+        icon: <DeepSeek.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('deepseek')
+    },
+    minimax: {
+        label: 'MiniMax',
+        icon: <Minimax.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('abab')
+    },
+    baidu: {
+        label: t('文心一言'),
+        icon: <Wenxin.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('ernie')
+    },
+    xunfei: {
+        label: t('讯飞星火'),
+        icon: <Spark.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('spark')
+    },
+    midjourney: {
+        label: 'Midjourney',
+        icon: <Midjourney />,
+        filter: (model) => model.model_name.toLowerCase().includes('mj_')
+    },
+    tencent: {
+        label: t('腾讯混元'),
+        icon: <Hunyuan.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('hunyuan')
+    },
+    cohere: {
+        label: 'Cohere',
+        icon: <Cohere.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('command')
+    },
+    cloudflare: {
+        label: 'Cloudflare',
+        icon: <Cloudflare.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('@cf/')
+    },
+    ai360: {
+        label: t('360智脑'),
+        icon: <Ai360.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('360')
+    },
+    yi: {
+        label: t('零一万物'),
+        icon: <Yi.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('yi')
+    },
+    jina: {
+        label: 'Jina',
+        icon: <Jina />,
+        filter: (model) => model.model_name.toLowerCase().includes('jina')
+    },
+    mistral: {
+        label: 'Mistral AI',
+        icon: <Mistral.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('mistral')
+    },
+    xai: {
+        label: 'xAI',
+        icon: <XAI />,
+        filter: (model) => model.model_name.toLowerCase().includes('grok')
+    },
+    llama: {
+        label: 'Llama',
+        icon: <Ollama />,
+        filter: (model) => model.model_name.toLowerCase().includes('llama')
+    },
+    doubao: {
+        label: t('豆包'),
+        icon: <Doubao.Color />,
+        filter: (model) => model.model_name.toLowerCase().includes('doubao')
+    }
+}); 

web/src/context/Style/index.js

@@ -1,106 +1,227 @@
-// contexts/User/index.jsx
+// contexts/Style/index.js
 
-import React, { useState, useEffect } from 'react';
-import { isMobile } from '../../helpers/index.js';
+import React, { useReducer, useEffect, useMemo, createContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { isMobile as getIsMobile } from '../../helpers/index.js';
 
-export const StyleContext = React.createContext({
-  dispatch: () => null,
-});
+// Action Types
+const ACTION_TYPES = {
+  TOGGLE_SIDER: 'TOGGLE_SIDER',
+  SET_SIDER: 'SET_SIDER',
+  SET_MOBILE: 'SET_MOBILE',
+  SET_SIDER_COLLAPSED: 'SET_SIDER_COLLAPSED',
+  BATCH_UPDATE: 'BATCH_UPDATE',
+};
 
-export const StyleProvider = ({ children }) => {
-  const [state, setState] = useState({
-    isMobile: isMobile(),
-    showSider: false,
-    siderCollapsed: false,
-    shouldInnerPadding: false,
-  });
+// Constants
+const STORAGE_KEYS = {
+  SIDEBAR_COLLAPSED: 'default_collapse_sidebar',
+};
 
-  const dispatch = (action) => {
-    if ('type' in action) {
-      switch (action.type) {
-        case 'TOGGLE_SIDER':
-          setState((prev) => ({ ...prev, showSider: !prev.showSider }));
-          break;
-        case 'SET_SIDER':
-          setState((prev) => ({ ...prev, showSider: action.payload }));
-          break;
-        case 'SET_MOBILE':
-          setState((prev) => ({ ...prev, isMobile: action.payload }));
-          break;
-        case 'SET_SIDER_COLLAPSED':
-          setState((prev) => ({ ...prev, siderCollapsed: action.payload }));
-          break;
-        case 'SET_INNER_PADDING':
-          setState((prev) => ({ ...prev, shouldInnerPadding: action.payload }));
-          break;
-        default:
-          setState((prev) => ({ ...prev, ...action }));
-      }
-    } else {
-      setState((prev) => ({ ...prev, ...action }));
-    }
+const ROUTE_PATTERNS = {
+  CONSOLE: '/console',
+};
+
+/**
+ * 判断路径是否为控制台路由
+ * @param {string} pathname - 路由路径
+ * @returns {boolean} 是否为控制台路由
+ */
+const isConsoleRoute = (pathname) => {
+  return pathname === ROUTE_PATTERNS.CONSOLE ||
+    pathname.startsWith(ROUTE_PATTERNS.CONSOLE + '/');
+};
+
+/**
+ * 获取初始状态
+ * @param {string} pathname - 当前路由路径
+ * @returns {Object} 初始状态对象
+ */
+const getInitialState = (pathname) => {
+  const isMobile = getIsMobile();
+  const isConsole = isConsoleRoute(pathname);
+  const isCollapsed = localStorage.getItem(STORAGE_KEYS.SIDEBAR_COLLAPSED) === 'true';
+
+  return {
+    isMobile,
+    showSider: isConsole && !isMobile,
+    siderCollapsed: isCollapsed,
+    isManualSiderControl: false,
   };
+};
 
+/**
+ * Style reducer
+ * @param {Object} state - 当前状态
+ * @param {Object} action - action 对象
+ * @returns {Object} 新状态
+ */
+const styleReducer = (state, action) => {
+  switch (action.type) {
+    case ACTION_TYPES.TOGGLE_SIDER:
+      return {
+        ...state,
+        showSider: !state.showSider,
+        isManualSiderControl: true,
+      };
+
+    case ACTION_TYPES.SET_SIDER:
+      return {
+        ...state,
+        showSider: action.payload,
+        isManualSiderControl: action.isManualControl ?? false,
+      };
+
+    case ACTION_TYPES.SET_MOBILE:
+      return {
+        ...state,
+        isMobile: action.payload,
+      };
+
+    case ACTION_TYPES.SET_SIDER_COLLAPSED:
+      // 自动保存到 localStorage
+      localStorage.setItem(STORAGE_KEYS.SIDEBAR_COLLAPSED, action.payload.toString());
+      return {
+        ...state,
+        siderCollapsed: action.payload,
+      };
+
+    case ACTION_TYPES.BATCH_UPDATE:
+      return {
+        ...state,
+        ...action.payload,
+      };
+
+    default:
+      return state;
+  }
+};
+
+// Context (内部使用，不导出)
+const StyleContext = createContext(null);
+
+/**
+ * 自定义 Hook - 处理窗口大小变化
+ * @param {Function} dispatch - dispatch 函数
+ * @param {Object} state - 当前状态
+ * @param {string} pathname - 当前路径
+ */
+const useWindowResize = (dispatch, state, pathname) => {
   useEffect(() => {
-    const updateIsMobile = () => {
-      const mobileDetected = isMobile();
-      dispatch({ type: 'SET_MOBILE', payload: mobileDetected });
-
-      // If on mobile, we might want to auto-hide the sidebar
-      if (mobileDetected && state.showSider) {
-        dispatch({ type: 'SET_SIDER', payload: false });
-      }
-    };
-
-    updateIsMobile();
-
-    const updateShowSider = () => {
-      // check pathname
-      const pathname = window.location.pathname;
-      if (
-        pathname === '' ||
-        pathname === '/' ||
-        pathname.includes('/home') ||
-        pathname.includes('/chat')
-      ) {
-        dispatch({ type: 'SET_SIDER', payload: false });
-        dispatch({ type: 'SET_INNER_PADDING', payload: false });
-      } else if (pathname === '/setup') {
-        dispatch({ type: 'SET_SIDER', payload: false });
-        dispatch({ type: 'SET_INNER_PADDING', payload: false });
-      } else {
-        // Only show sidebar on non-mobile devices by default
-        dispatch({ type: 'SET_SIDER', payload: !isMobile() });
-        dispatch({ type: 'SET_INNER_PADDING', payload: true });
-      }
-    };
-
-    updateShowSider();
-
-    const updateSiderCollapsed = () => {
-      const isCollapsed =
-        localStorage.getItem('default_collapse_sidebar') === 'true';
-      dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
-    };
-
-    updateSiderCollapsed();
-
-    // Add event listeners to handle window resize
     const handleResize = () => {
-      updateIsMobile();
+      const isMobile = getIsMobile();
+      dispatch({ type: ACTION_TYPES.SET_MOBILE, payload: isMobile });
+
+      // 只有在非手动控制的情况下，才根据屏幕大小自动调整侧边栏
+      if (!state.isManualSiderControl && isConsoleRoute(pathname)) {
+        dispatch({
+          type: ACTION_TYPES.SET_SIDER,
+          payload: !isMobile,
+          isManualControl: false
+        });
+      }
     };
 
-    window.addEventListener('resize', handleResize);
+    let timeoutId;
+    const debouncedResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleResize, 150);
+    };
 
-    // Cleanup event listener on component unmount
+    window.addEventListener('resize', debouncedResize);
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debouncedResize);
+      clearTimeout(timeoutId);
     };
-  }, []);
+  }, [dispatch, state.isManualSiderControl, pathname]);
+};
+
+/**
+ * 自定义 Hook - 处理路由变化
+ * @param {Function} dispatch - dispatch 函数
+ * @param {string} pathname - 当前路径
+ */
+const useRouteChange = (dispatch, pathname) => {
+  useEffect(() => {
+    const isMobile = getIsMobile();
+    const isConsole = isConsoleRoute(pathname);
+
+    dispatch({
+      type: ACTION_TYPES.BATCH_UPDATE,
+      payload: {
+        showSider: isConsole && !isMobile,
+        isManualSiderControl: false,
+      },
+    });
+  }, [pathname, dispatch]);
+};
+
+/**
+ * 自定义 Hook - 处理移动设备侧边栏自动收起
+ * @param {Object} state - 当前状态
+ * @param {Function} dispatch - dispatch 函数
+ */
+const useMobileSiderAutoHide = (state, dispatch) => {
+  useEffect(() => {
+    // 移动设备上，如果不是手动控制且侧边栏是打开的，则自动关闭
+    if (state.isMobile && state.showSider && !state.isManualSiderControl) {
+      dispatch({ type: ACTION_TYPES.SET_SIDER, payload: false });
+    }
+  }, [state.isMobile, state.showSider, state.isManualSiderControl, dispatch]);
+};
+
+/**
+ * Style Provider 组件
+ */
+export const StyleProvider = ({ children }) => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  const [state, dispatch] = useReducer(
+    styleReducer,
+    pathname,
+    getInitialState
+  );
+
+  useWindowResize(dispatch, state, pathname);
+  useRouteChange(dispatch, pathname);
+  useMobileSiderAutoHide(state, dispatch);
+
+  const contextValue = useMemo(
+    () => ({ state, dispatch }),
+    [state]
+  );
 
   return (
-    <StyleContext.Provider value={[state, dispatch]}>
+    <StyleContext.Provider value={contextValue}>
       {children}
     </StyleContext.Provider>
   );
 };
+
+/**
+ * 自定义 Hook - 使用 StyleContext
+ * @returns {{state: Object, dispatch: Function}} context value
+ */
+export const useStyle = () => {
+  const context = React.useContext(StyleContext);
+  if (!context) {
+    throw new Error('useStyle must be used within StyleProvider');
+  }
+  return context;
+};
+
+// 导出 action creators 以便外部使用
+export const styleActions = {
+  toggleSider: () => ({ type: ACTION_TYPES.TOGGLE_SIDER }),
+  setSider: (show, isManualControl = false) => ({
+    type: ACTION_TYPES.SET_SIDER,
+    payload: show,
+    isManualControl
+  }),
+  setMobile: (isMobile) => ({ type: ACTION_TYPES.SET_MOBILE, payload: isMobile }),
+  setSiderCollapsed: (collapsed) => ({
+    type: ACTION_TYPES.SET_SIDER_COLLAPSED,
+    payload: collapsed
+  }),
+};

web/src/helpers/render.js

@@ -17,7 +17,7 @@ export function renderText(text, limit) {
 export function renderGroup(group) {
   if (group === '') {
     return (
-      <Tag size='large' key='default' color='orange'>
+      <Tag size='large' key='default' color='orange' shape='circle'>
         {i18next.t('用户分组')}
       </Tag>
     );
@@ -39,6 +39,7 @@ export function renderGroup(group) {
           size='large'
           color={tagColors[group] || stringToColor(group)}
           key={group}
+          shape='circle'
           onClick={async (event) => {
             event.stopPropagation();
             if (await copy(group)) {

web/src/helpers/utils.js

@@ -95,6 +95,8 @@ export function showError(error) {
     if (error.name === 'AxiosError') {
       switch (error.response.status) {
         case 401:
+          // 清除用户状态
+          localStorage.removeItem('user');
           // toast.error('错误：未登录或登录已过期，请重新登录！', showErrorOptions);
           window.location.href = '/login?expired=true';
           break;

web/src/hooks/useApiRequest.js

@@ -0,0 +1,407 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SSE } from 'sse';
+import { getUserIdFromLocalStorage } from '../helpers/index.js';
+import {
+  API_ENDPOINTS,
+  MESSAGE_STATUS,
+  DEBUG_TABS
+} from '../utils/constants';
+import {
+  buildApiPayload,
+  handleApiError
+} from '../utils/apiUtils';
+import {
+  processThinkTags,
+  processIncompleteThinkTags
+} from '../utils/messageUtils';
+
+export const useApiRequest = (
+  setMessage,
+  setDebugData,
+  setActiveDebugTab,
+  sseSourceRef,
+  saveMessages
+) => {
+  const { t } = useTranslation();
+
+  // 处理消息自动关闭逻辑的公共函数
+  const applyAutoCollapseLogic = useCallback((message, isThinkingComplete = true) => {
+    const shouldAutoCollapse = isThinkingComplete && !message.hasAutoCollapsed;
+    return {
+      isThinkingComplete,
+      hasAutoCollapsed: shouldAutoCollapse || message.hasAutoCollapsed,
+      isReasoningExpanded: shouldAutoCollapse ? false : message.isReasoningExpanded,
+    };
+  }, []);
+
+  // 流式消息更新
+  const streamMessageUpdate = useCallback((textChunk, type) => {
+    setMessage(prevMessage => {
+      const lastMessage = prevMessage[prevMessage.length - 1];
+      if (!lastMessage) return prevMessage;
+      if (lastMessage.role !== 'assistant') return prevMessage;
+      if (lastMessage.status === MESSAGE_STATUS.ERROR) {
+        return prevMessage;
+      }
+
+      if (lastMessage.status === MESSAGE_STATUS.LOADING ||
+        lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
+
+        let newMessage = { ...lastMessage };
+
+        if (type === 'reasoning') {
+          newMessage = {
+            ...newMessage,
+            reasoningContent: (lastMessage.reasoningContent || '') + textChunk,
+            status: MESSAGE_STATUS.INCOMPLETE,
+            isThinkingComplete: false,
+          };
+        } else if (type === 'content') {
+          const shouldCollapseReasoning = !lastMessage.content && lastMessage.reasoningContent;
+          const newContent = (lastMessage.content || '') + textChunk;
+
+          let shouldCollapseFromThinkTag = false;
+          let thinkingCompleteFromTags = lastMessage.isThinkingComplete;
+
+          if (lastMessage.isReasoningExpanded && newContent.includes('</think>')) {
+            const thinkMatches = newContent.match(/<think>/g);
+            const thinkCloseMatches = newContent.match(/<\/think>/g);
+            if (thinkMatches && thinkCloseMatches &&
+              thinkCloseMatches.length >= thinkMatches.length) {
+              shouldCollapseFromThinkTag = true;
+              thinkingCompleteFromTags = true; // think标签闭合也标记思考完成
+            }
+          }
+
+          // 如果开始接收content内容，且之前有reasoning内容，或者think标签已闭合，则标记思考完成
+          const isThinkingComplete = (lastMessage.reasoningContent && !lastMessage.isThinkingComplete) ||
+            thinkingCompleteFromTags;
+
+          const autoCollapseState = applyAutoCollapseLogic(lastMessage, isThinkingComplete);
+
+          newMessage = {
+            ...newMessage,
+            content: newContent,
+            status: MESSAGE_STATUS.INCOMPLETE,
+            ...autoCollapseState,
+          };
+        }
+
+        return [...prevMessage.slice(0, -1), newMessage];
+      }
+
+      return prevMessage;
+    });
+  }, [setMessage, applyAutoCollapseLogic]);
+
+  // 完成消息
+  const completeMessage = useCallback((status = MESSAGE_STATUS.COMPLETE) => {
+    setMessage(prevMessage => {
+      const lastMessage = prevMessage[prevMessage.length - 1];
+      if (lastMessage.status === MESSAGE_STATUS.COMPLETE ||
+        lastMessage.status === MESSAGE_STATUS.ERROR) {
+        return prevMessage;
+      }
+
+      const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+      const updatedMessages = [
+        ...prevMessage.slice(0, -1),
+        {
+          ...lastMessage,
+          status: status,
+          ...autoCollapseState,
+        }
+      ];
+
+      // 在消息完成时保存，传入更新后的消息列表
+      if (status === MESSAGE_STATUS.COMPLETE || status === MESSAGE_STATUS.ERROR) {
+        setTimeout(() => saveMessages(updatedMessages), 0);
+      }
+
+      return updatedMessages;
+    });
+  }, [setMessage, applyAutoCollapseLogic, saveMessages]);
+
+  // 非流式请求
+  const handleNonStreamRequest = useCallback(async (payload) => {
+    setDebugData(prev => ({
+      ...prev,
+      request: payload,
+      timestamp: new Date().toISOString(),
+      response: null
+    }));
+    setActiveDebugTab(DEBUG_TABS.REQUEST);
+
+    try {
+      const response = await fetch(API_ENDPOINTS.CHAT_COMPLETIONS, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'New-Api-User': getUserIdFromLocalStorage(),
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        let errorBody = '';
+        try {
+          errorBody = await response.text();
+        } catch (e) {
+          errorBody = '无法读取错误响应体';
+        }
+
+        const errorInfo = handleApiError(
+          new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`),
+          response
+        );
+
+        setDebugData(prev => ({
+          ...prev,
+          response: JSON.stringify(errorInfo, null, 2)
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        throw new Error(`HTTP error! status: ${response.status}, body: ${errorBody}`);
+      }
+
+      const data = await response.json();
+
+      setDebugData(prev => ({
+        ...prev,
+        response: JSON.stringify(data, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      if (data.choices?.[0]) {
+        const choice = data.choices[0];
+        let content = choice.message?.content || '';
+        let reasoningContent = choice.message?.reasoning_content || '';
+
+        const processed = processThinkTags(content, reasoningContent);
+
+        setMessage(prevMessage => {
+          const newMessages = [...prevMessage];
+          const lastMessage = newMessages[newMessages.length - 1];
+          if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+            const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+            newMessages[newMessages.length - 1] = {
+              ...lastMessage,
+              content: processed.content,
+              reasoningContent: processed.reasoningContent,
+              status: MESSAGE_STATUS.COMPLETE,
+              ...autoCollapseState,
+            };
+          }
+          return newMessages;
+        });
+      }
+    } catch (error) {
+      console.error('Non-stream request error:', error);
+
+      const errorInfo = handleApiError(error);
+      setDebugData(prev => ({
+        ...prev,
+        response: JSON.stringify(errorInfo, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      setMessage(prevMessage => {
+        const newMessages = [...prevMessage];
+        const lastMessage = newMessages[newMessages.length - 1];
+        if (lastMessage?.status === MESSAGE_STATUS.LOADING) {
+          const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+          newMessages[newMessages.length - 1] = {
+            ...lastMessage,
+            content: t('请求发生错误: ') + error.message,
+            status: MESSAGE_STATUS.ERROR,
+            ...autoCollapseState,
+          };
+        }
+        return newMessages;
+      });
+    }
+  }, [setDebugData, setActiveDebugTab, setMessage, t, applyAutoCollapseLogic]);
+
+  // SSE请求
+  const handleSSE = useCallback((payload) => {
+    setDebugData(prev => ({
+      ...prev,
+      request: payload,
+      timestamp: new Date().toISOString(),
+      response: null
+    }));
+    setActiveDebugTab(DEBUG_TABS.REQUEST);
+
+    const source = new SSE(API_ENDPOINTS.CHAT_COMPLETIONS, {
+      headers: {
+        'Content-Type': 'application/json',
+        'New-Api-User': getUserIdFromLocalStorage(),
+      },
+      method: 'POST',
+      payload: JSON.stringify(payload),
+    });
+
+    sseSourceRef.current = source;
+
+    let responseData = '';
+    let hasReceivedFirstResponse = false;
+
+    source.addEventListener('message', (e) => {
+      if (e.data === '[DONE]') {
+        source.close();
+        sseSourceRef.current = null;
+        setDebugData(prev => ({ ...prev, response: responseData }));
+        completeMessage();
+        return;
+      }
+
+      try {
+        const payload = JSON.parse(e.data);
+        responseData += e.data + '\n';
+
+        if (!hasReceivedFirstResponse) {
+          setActiveDebugTab(DEBUG_TABS.RESPONSE);
+          hasReceivedFirstResponse = true;
+        }
+
+        const delta = payload.choices?.[0]?.delta;
+        if (delta) {
+          if (delta.reasoning_content) {
+            streamMessageUpdate(delta.reasoning_content, 'reasoning');
+          }
+          if (delta.content) {
+            streamMessageUpdate(delta.content, 'content');
+          }
+        }
+      } catch (error) {
+        console.error('Failed to parse SSE message:', error);
+        const errorInfo = `解析错误: ${error.message}`;
+
+        setDebugData(prev => ({
+          ...prev,
+          response: responseData + `\n\nError: ${errorInfo}`
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        streamMessageUpdate(t('解析响应数据时发生错误'), 'content');
+        completeMessage(MESSAGE_STATUS.ERROR);
+      }
+    });
+
+    source.addEventListener('error', (e) => {
+      console.error('SSE Error:', e);
+      const errorMessage = e.data || t('请求发生错误');
+
+      const errorInfo = handleApiError(new Error(errorMessage));
+      errorInfo.readyState = source.readyState;
+
+      setDebugData(prev => ({
+        ...prev,
+        response: responseData + '\n\nSSE Error:\n' + JSON.stringify(errorInfo, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      streamMessageUpdate(errorMessage, 'content');
+      completeMessage(MESSAGE_STATUS.ERROR);
+      sseSourceRef.current = null;
+      source.close();
+    });
+
+    source.addEventListener('readystatechange', (e) => {
+      if (e.readyState >= 2 && source.status !== undefined && source.status !== 200) {
+        const errorInfo = handleApiError(new Error('HTTP状态错误'));
+        errorInfo.status = source.status;
+        errorInfo.readyState = source.readyState;
+
+        setDebugData(prev => ({
+          ...prev,
+          response: responseData + '\n\nHTTP Error:\n' + JSON.stringify(errorInfo, null, 2)
+        }));
+        setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+        source.close();
+        streamMessageUpdate(t('连接已断开'), 'content');
+        completeMessage(MESSAGE_STATUS.ERROR);
+      }
+    });
+
+    try {
+      source.stream();
+    } catch (error) {
+      console.error('Failed to start SSE stream:', error);
+      const errorInfo = handleApiError(error);
+
+      setDebugData(prev => ({
+        ...prev,
+        response: 'Stream启动失败:\n' + JSON.stringify(errorInfo, null, 2)
+      }));
+      setActiveDebugTab(DEBUG_TABS.RESPONSE);
+
+      streamMessageUpdate(t('建立连接时发生错误'), 'content');
+      completeMessage(MESSAGE_STATUS.ERROR);
+    }
+  }, [setDebugData, setActiveDebugTab, streamMessageUpdate, completeMessage, t, applyAutoCollapseLogic]);
+
+  // 停止生成
+  const onStopGenerator = useCallback(() => {
+    // 如果仍有活动的 SSE 连接，首先关闭
+    if (sseSourceRef.current) {
+      sseSourceRef.current.close();
+      sseSourceRef.current = null;
+    }
+
+    // 无论是否存在 SSE 连接，都尝试处理最后一条正在生成的消息
+    setMessage(prevMessage => {
+      if (prevMessage.length === 0) return prevMessage;
+      const lastMessage = prevMessage[prevMessage.length - 1];
+
+      if (lastMessage.status === MESSAGE_STATUS.LOADING ||
+        lastMessage.status === MESSAGE_STATUS.INCOMPLETE) {
+
+        const processed = processIncompleteThinkTags(
+          lastMessage.content || '',
+          lastMessage.reasoningContent || ''
+        );
+
+        const autoCollapseState = applyAutoCollapseLogic(lastMessage, true);
+
+        const updatedMessages = [
+          ...prevMessage.slice(0, -1),
+          {
+            ...lastMessage,
+            status: MESSAGE_STATUS.COMPLETE,
+            reasoningContent: processed.reasoningContent || null,
+            content: processed.content,
+            ...autoCollapseState,
+          }
+        ];
+
+        // 停止生成时也保存，传入更新后的消息列表
+        setTimeout(() => saveMessages(updatedMessages), 0);
+
+        return updatedMessages;
+      }
+      return prevMessage;
+    });
+  }, [setMessage, applyAutoCollapseLogic, saveMessages]);
+
+  // 发送请求
+  const sendRequest = useCallback((payload, isStream) => {
+    if (isStream) {
+      handleSSE(payload);
+    } else {
+      handleNonStreamRequest(payload);
+    }
+  }, [handleSSE, handleNonStreamRequest]);
+
+  return {
+    sendRequest,
+    onStopGenerator,
+    streamMessageUpdate,
+    completeMessage,
+  };
+}; 

web/src/hooks/useDataLoader.js

@@ -0,0 +1,70 @@
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { API, showError } from '../helpers/index.js';
+import { API_ENDPOINTS } from '../utils/constants';
+import { processModelsData, processGroupsData } from '../utils/apiUtils';
+
+export const useDataLoader = (
+  userState,
+  inputs,
+  handleInputChange,
+  setModels,
+  setGroups
+) => {
+  const { t } = useTranslation();
+
+  const loadModels = useCallback(async () => {
+    try {
+      const res = await API.get(API_ENDPOINTS.USER_MODELS);
+      const { success, message, data } = res.data;
+
+      if (success) {
+        const { modelOptions, selectedModel } = processModelsData(data, inputs.model);
+        setModels(modelOptions);
+
+        if (selectedModel !== inputs.model) {
+          handleInputChange('model', selectedModel);
+        }
+      } else {
+        showError(t(message));
+      }
+    } catch (error) {
+      showError(t('加载模型失败'));
+    }
+  }, [inputs.model, handleInputChange, setModels, t]);
+
+  const loadGroups = useCallback(async () => {
+    try {
+      const res = await API.get(API_ENDPOINTS.USER_GROUPS);
+      const { success, message, data } = res.data;
+
+      if (success) {
+        const userGroup = userState?.user?.group || JSON.parse(localStorage.getItem('user'))?.group;
+        const groupOptions = processGroupsData(data, userGroup);
+        setGroups(groupOptions);
+
+        const hasCurrentGroup = groupOptions.some(option => option.value === inputs.group);
+        if (!hasCurrentGroup) {
+          handleInputChange('group', groupOptions[0]?.value || '');
+        }
+      } else {
+        showError(t(message));
+      }
+    } catch (error) {
+      showError(t('加载分组失败'));
+    }
+  }, [userState, inputs.group, handleInputChange, setGroups, t]);
+
+  // 自动加载数据
+  useEffect(() => {
+    if (userState?.user) {
+      loadModels();
+      loadGroups();
+    }
+  }, [userState?.user, loadModels, loadGroups]);
+
+  return {
+    loadModels,
+    loadGroups
+  };
+}; 

web/src/hooks/useMessageActions.js

@@ -0,0 +1,223 @@
+import { useCallback } from 'react';
+import { Toast, Modal } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { getTextContent } from '../utils/messageUtils';
+import { ERROR_MESSAGES } from '../utils/constants';
+
+export const useMessageActions = (message, setMessage, onMessageSend, saveMessages) => {
+  const { t } = useTranslation();
+
+  // 复制消息
+  const handleMessageCopy = useCallback((targetMessage) => {
+    const textToCopy = getTextContent(targetMessage);
+
+    if (!textToCopy) {
+      Toast.warning({
+        content: t(ERROR_MESSAGES.NO_TEXT_CONTENT),
+        duration: 2,
+      });
+      return;
+    }
+
+    const copyToClipboard = async (text) => {
+      if (navigator.clipboard?.writeText) {
+        try {
+          await navigator.clipboard.writeText(text);
+          Toast.success({
+            content: t('消息已复制到剪贴板'),
+            duration: 2,
+          });
+        } catch (err) {
+          console.error('Clipboard API 复制失败:', err);
+          fallbackCopy(text);
+        }
+      } else {
+        fallbackCopy(text);
+      }
+    };
+
+    const fallbackCopy = (text) => {
+      try {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.cssText = `
+          position: fixed;
+          top: -9999px;
+          left: -9999px;
+          opacity: 0;
+          pointer-events: none;
+          z-index: -1;
+        `;
+        textArea.setAttribute('readonly', '');
+
+        document.body.appendChild(textArea);
+        textArea.select();
+        textArea.setSelectionRange(0, text.length);
+
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        if (successful) {
+          Toast.success({
+            content: t('消息已复制到剪贴板'),
+            duration: 2,
+          });
+        } else {
+          throw new Error('execCommand copy failed');
+        }
+      } catch (err) {
+        console.error('回退复制方案也失败:', err);
+
+        let errorMessage = t(ERROR_MESSAGES.COPY_FAILED);
+        if (window.location.protocol === 'http:' && window.location.hostname !== 'localhost') {
+          errorMessage = t(ERROR_MESSAGES.COPY_HTTPS_REQUIRED);
+        } else if (!navigator.clipboard && !document.execCommand) {
+          errorMessage = t(ERROR_MESSAGES.BROWSER_NOT_SUPPORTED);
+        }
+
+        Toast.error({
+          content: errorMessage,
+          duration: 4,
+        });
+      }
+    };
+
+    copyToClipboard(textToCopy);
+  }, [t]);
+
+  // 重新生成消息
+  const handleMessageReset = useCallback((targetMessage) => {
+    setMessage(prevMessages => {
+      // 使用引用查找索引，防止重复 id 造成误匹配
+      let messageIndex = prevMessages.findIndex(msg => msg === targetMessage);
+
+      // 回退到 id 匹配（兼容不同引用场景）
+      if (messageIndex === -1) {
+        messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
+      }
+
+      if (messageIndex === -1) return prevMessages;
+
+      if (targetMessage.role === 'user') {
+        const newMessages = prevMessages.slice(0, messageIndex);
+        const contentToSend = getTextContent(targetMessage);
+
+        setTimeout(() => {
+          onMessageSend(contentToSend);
+        }, 100);
+
+        return newMessages;
+      } else if (targetMessage.role === 'assistant' || targetMessage.role === 'system') {
+        let userMessageIndex = messageIndex - 1;
+        while (userMessageIndex >= 0 && prevMessages[userMessageIndex].role !== 'user') {
+          userMessageIndex--;
+        }
+
+        if (userMessageIndex >= 0) {
+          const userMessage = prevMessages[userMessageIndex];
+          const newMessages = prevMessages.slice(0, userMessageIndex);
+          const contentToSend = getTextContent(userMessage);
+
+          setTimeout(() => {
+            onMessageSend(contentToSend);
+          }, 100);
+
+          return newMessages;
+        }
+      }
+
+      return prevMessages;
+    });
+  }, [setMessage, onMessageSend]);
+
+  // 删除消息
+  const handleMessageDelete = useCallback((targetMessage) => {
+    Modal.confirm({
+      title: t('确认删除'),
+      content: t('确定要删除这条消息吗？'),
+      okText: t('确定'),
+      cancelText: t('取消'),
+      okButtonProps: {
+        type: 'danger',
+      },
+      onOk: () => {
+        setMessage(prevMessages => {
+          // 使用引用查找索引，防止重复 id 造成误匹配
+          let messageIndex = prevMessages.findIndex(msg => msg === targetMessage);
+
+          // 回退到 id 匹配（兼容不同引用场景）
+          if (messageIndex === -1) {
+            messageIndex = prevMessages.findIndex(msg => msg.id === targetMessage.id);
+          }
+
+          if (messageIndex === -1) return prevMessages;
+
+          let updatedMessages;
+          if (targetMessage.role === 'user' && messageIndex < prevMessages.length - 1) {
+            const nextMessage = prevMessages[messageIndex + 1];
+            if (nextMessage.role === 'assistant') {
+              Toast.success({
+                content: t('已删除消息及其回复'),
+                duration: 2,
+              });
+              updatedMessages = prevMessages.filter((_, index) =>
+                index !== messageIndex && index !== messageIndex + 1
+              );
+            } else {
+              Toast.success({
+                content: t('消息已删除'),
+                duration: 2,
+              });
+              updatedMessages = prevMessages.filter(msg => msg.id !== targetMessage.id);
+            }
+          } else {
+            Toast.success({
+              content: t('消息已删除'),
+              duration: 2,
+            });
+            updatedMessages = prevMessages.filter(msg => msg.id !== targetMessage.id);
+          }
+
+          // 删除消息后保存，传入更新后的消息列表
+          setTimeout(() => saveMessages(updatedMessages), 0);
+          return updatedMessages;
+        });
+      },
+    });
+  }, [setMessage, t, saveMessages]);
+
+  // 切换角色
+  const handleRoleToggle = useCallback((targetMessage) => {
+    if (!(targetMessage.role === 'assistant' || targetMessage.role === 'system')) {
+      return;
+    }
+
+    const newRole = targetMessage.role === 'assistant' ? 'system' : 'assistant';
+
+    setMessage(prevMessages => {
+      const updatedMessages = prevMessages.map(msg => {
+        if (msg.id === targetMessage.id &&
+          (msg.role === 'assistant' || msg.role === 'system')) {
+          return { ...msg, role: newRole };
+        }
+        return msg;
+      });
+
+      // 切换角色后保存，传入更新后的消息列表
+      setTimeout(() => saveMessages(updatedMessages), 0);
+      return updatedMessages;
+    });
+
+    Toast.success({
+      content: t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
+      duration: 2,
+    });
+  }, [setMessage, t, saveMessages]);
+
+  return {
+    handleMessageCopy,
+    handleMessageReset,
+    handleMessageDelete,
+    handleRoleToggle,
+  };
+}; 

web/src/hooks/useMessageEdit.js

@@ -0,0 +1,109 @@
+import { useCallback, useState, useRef } from 'react';
+import { Toast, Modal } from '@douyinfe/semi-ui';
+import { useTranslation } from 'react-i18next';
+import { getTextContent, buildApiPayload, createLoadingAssistantMessage } from '../utils/messageUtils';
+import { MESSAGE_ROLES } from '../utils/constants';
+
+export const useMessageEdit = (
+  setMessage,
+  inputs,
+  parameterEnabled,
+  sendRequest,
+  saveMessages
+) => {
+  const { t } = useTranslation();
+  const [editingMessageId, setEditingMessageId] = useState(null);
+  const [editValue, setEditValue] = useState('');
+  const editingMessageRef = useRef(null);
+
+  const handleMessageEdit = useCallback((targetMessage) => {
+    const editableContent = getTextContent(targetMessage);
+    setEditingMessageId(targetMessage.id);
+    editingMessageRef.current = targetMessage;
+    setEditValue(editableContent);
+  }, []);
+
+  const handleEditSave = useCallback(() => {
+    if (!editingMessageId || !editValue.trim()) return;
+
+    setMessage(prevMessages => {
+      let messageIndex = prevMessages.findIndex(msg => msg === editingMessageRef.current);
+
+      if (messageIndex === -1) {
+        messageIndex = prevMessages.findIndex(msg => msg.id === editingMessageId);
+      }
+
+      const targetMessage = prevMessages[messageIndex];
+      let newContent;
+
+      if (Array.isArray(targetMessage.content)) {
+        newContent = targetMessage.content.map(item =>
+          item.type === 'text' ? { ...item, text: editValue.trim() } : item
+        );
+      } else {
+        newContent = editValue.trim();
+      }
+
+      const updatedMessages = prevMessages.map(msg =>
+        msg.id === editingMessageId ? { ...msg, content: newContent } : msg
+      );
+
+      // 处理用户消息编辑后的重新生成
+      if (targetMessage.role === MESSAGE_ROLES.USER) {
+        const hasSubsequentAssistantReply = messageIndex < prevMessages.length - 1 &&
+          prevMessages[messageIndex + 1].role === MESSAGE_ROLES.ASSISTANT;
+
+        if (hasSubsequentAssistantReply) {
+          Modal.confirm({
+            title: t('消息已编辑'),
+            content: t('检测到该消息后有AI回复，是否删除后续回复并重新生成？'),
+            okText: t('重新生成'),
+            cancelText: t('仅保存'),
+            onOk: () => {
+              const messagesUntilUser = updatedMessages.slice(0, messageIndex + 1);
+              setMessage(messagesUntilUser);
+              // 编辑后保存（重新生成的情况），传入更新后的消息列表
+              setTimeout(() => saveMessages(messagesUntilUser), 0);
+
+              setTimeout(() => {
+                const payload = buildApiPayload(messagesUntilUser, null, inputs, parameterEnabled);
+                setMessage(prevMsg => [...prevMsg, createLoadingAssistantMessage()]);
+                sendRequest(payload, inputs.stream);
+              }, 100);
+            },
+            onCancel: () => {
+              setMessage(updatedMessages);
+              // 编辑后保存（仅保存的情况），传入更新后的消息列表
+              setTimeout(() => saveMessages(updatedMessages), 0);
+            }
+          });
+          return prevMessages;
+        }
+      }
+
+      // 编辑后保存（普通情况），传入更新后的消息列表
+      setTimeout(() => saveMessages(updatedMessages), 0);
+      return updatedMessages;
+    });
+
+    setEditingMessageId(null);
+    editingMessageRef.current = null;
+    setEditValue('');
+    Toast.success({ content: t('消息已更新'), duration: 2 });
+  }, [editingMessageId, editValue, t, inputs, parameterEnabled, sendRequest, setMessage, saveMessages]);
+
+  const handleEditCancel = useCallback(() => {
+    setEditingMessageId(null);
+    editingMessageRef.current = null;
+    setEditValue('');
+  }, []);
+
+  return {
+    editingMessageId,
+    editValue,
+    setEditValue,
+    handleMessageEdit,
+    handleEditSave,
+    handleEditCancel
+  };
+}; 

web/src/hooks/usePlaygroundState.js

@@ -0,0 +1,225 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { DEFAULT_MESSAGES, DEFAULT_CONFIG, DEBUG_TABS, MESSAGE_STATUS } from '../utils/constants';
+import { loadConfig, saveConfig, loadMessages, saveMessages } from '../components/playground/configStorage';
+import { processIncompleteThinkTags } from '../utils/messageUtils';
+
+export const usePlaygroundState = () => {
+  // 使用惰性初始化，确保只在组件首次挂载时加载配置和消息
+  const [savedConfig] = useState(() => loadConfig());
+  const [initialMessages] = useState(() => loadMessages() || DEFAULT_MESSAGES);
+
+  // 基础配置状态
+  const [inputs, setInputs] = useState(savedConfig.inputs || DEFAULT_CONFIG.inputs);
+  const [parameterEnabled, setParameterEnabled] = useState(
+    savedConfig.parameterEnabled || DEFAULT_CONFIG.parameterEnabled
+  );
+  const [showDebugPanel, setShowDebugPanel] = useState(
+    savedConfig.showDebugPanel || DEFAULT_CONFIG.showDebugPanel
+  );
+  const [customRequestMode, setCustomRequestMode] = useState(
+    savedConfig.customRequestMode || DEFAULT_CONFIG.customRequestMode
+  );
+  const [customRequestBody, setCustomRequestBody] = useState(
+    savedConfig.customRequestBody || DEFAULT_CONFIG.customRequestBody
+  );
+
+  // UI状态
+  const [showSettings, setShowSettings] = useState(false);
+  const [models, setModels] = useState([]);
+  const [groups, setGroups] = useState([]);
+  const [status, setStatus] = useState({});
+
+  // 消息相关状态 - 使用加载的消息初始化
+  const [message, setMessage] = useState(initialMessages);
+
+  // 调试状态
+  const [debugData, setDebugData] = useState({
+    request: null,
+    response: null,
+    timestamp: null,
+    previewRequest: null,
+    previewTimestamp: null
+  });
+  const [activeDebugTab, setActiveDebugTab] = useState(DEBUG_TABS.PREVIEW);
+  const [previewPayload, setPreviewPayload] = useState(null);
+
+  // 编辑状态
+  const [editingMessageId, setEditingMessageId] = useState(null);
+  const [editValue, setEditValue] = useState('');
+
+  // Refs
+  const sseSourceRef = useRef(null);
+  const chatRef = useRef(null);
+  const saveConfigTimeoutRef = useRef(null);
+  const saveMessagesTimeoutRef = useRef(null);
+
+  // 配置更新函数
+  const handleInputChange = useCallback((name, value) => {
+    setInputs(prev => ({ ...prev, [name]: value }));
+  }, []);
+
+  const handleParameterToggle = useCallback((paramName) => {
+    setParameterEnabled(prev => ({
+      ...prev,
+      [paramName]: !prev[paramName]
+    }));
+  }, []);
+
+  // 消息保存函数 - 改为立即保存，可以接受参数
+  const saveMessagesImmediately = useCallback((messagesToSave) => {
+    // 如果提供了参数，使用参数；否则使用当前状态
+    saveMessages(messagesToSave || message);
+  }, [message]);
+
+  // 配置保存
+  const debouncedSaveConfig = useCallback(() => {
+    if (saveConfigTimeoutRef.current) {
+      clearTimeout(saveConfigTimeoutRef.current);
+    }
+
+    saveConfigTimeoutRef.current = setTimeout(() => {
+      const configToSave = {
+        inputs,
+        parameterEnabled,
+        showDebugPanel,
+        customRequestMode,
+        customRequestBody,
+      };
+      saveConfig(configToSave);
+    }, 1000);
+  }, [inputs, parameterEnabled, showDebugPanel, customRequestMode, customRequestBody]);
+
+  // 配置导入/重置
+  const handleConfigImport = useCallback((importedConfig) => {
+    if (importedConfig.inputs) {
+      setInputs(prev => ({ ...prev, ...importedConfig.inputs }));
+    }
+    if (importedConfig.parameterEnabled) {
+      setParameterEnabled(prev => ({ ...prev, ...importedConfig.parameterEnabled }));
+    }
+    if (typeof importedConfig.showDebugPanel === 'boolean') {
+      setShowDebugPanel(importedConfig.showDebugPanel);
+    }
+    if (importedConfig.customRequestMode) {
+      setCustomRequestMode(importedConfig.customRequestMode);
+    }
+    if (importedConfig.customRequestBody) {
+      setCustomRequestBody(importedConfig.customRequestBody);
+    }
+    // 如果导入的配置包含消息，也恢复消息
+    if (importedConfig.messages && Array.isArray(importedConfig.messages)) {
+      setMessage(importedConfig.messages);
+    }
+  }, []);
+
+  const handleConfigReset = useCallback((options = {}) => {
+    const { resetMessages = false } = options;
+
+    setInputs(DEFAULT_CONFIG.inputs);
+    setParameterEnabled(DEFAULT_CONFIG.parameterEnabled);
+    setShowDebugPanel(DEFAULT_CONFIG.showDebugPanel);
+    setCustomRequestMode(DEFAULT_CONFIG.customRequestMode);
+    setCustomRequestBody(DEFAULT_CONFIG.customRequestBody);
+
+    // 只有在明确指定时才重置消息
+    if (resetMessages) {
+      setMessage([]);
+      setTimeout(() => {
+        setMessage(DEFAULT_MESSAGES);
+      }, 0);
+    }
+  }, []);
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (saveConfigTimeoutRef.current) {
+        clearTimeout(saveConfigTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 页面首次加载时，若最后一条消息仍处于 LOADING/INCOMPLETE 状态，自动修复
+  useEffect(() => {
+    if (!Array.isArray(message) || message.length === 0) return;
+
+    const lastMsg = message[message.length - 1];
+    if (lastMsg.status === MESSAGE_STATUS.LOADING || lastMsg.status === MESSAGE_STATUS.INCOMPLETE) {
+      const processed = processIncompleteThinkTags(
+        lastMsg.content || '',
+        lastMsg.reasoningContent || ''
+      );
+
+      const fixedLastMsg = {
+        ...lastMsg,
+        status: MESSAGE_STATUS.COMPLETE,
+        content: processed.content,
+        reasoningContent: processed.reasoningContent || null,
+        isThinkingComplete: true,
+      };
+
+      const updatedMessages = [...message.slice(0, -1), fixedLastMsg];
+      setMessage(updatedMessages);
+
+      // 保存修复后的消息列表
+      setTimeout(() => saveMessagesImmediately(updatedMessages), 0);
+    }
+  }, []);
+
+  return {
+    // 配置状态
+    inputs,
+    parameterEnabled,
+    showDebugPanel,
+    customRequestMode,
+    customRequestBody,
+
+    // UI状态
+    showSettings,
+    models,
+    groups,
+    status,
+
+    // 消息状态
+    message,
+
+    // 调试状态
+    debugData,
+    activeDebugTab,
+    previewPayload,
+
+    // 编辑状态
+    editingMessageId,
+    editValue,
+
+    // Refs
+    sseSourceRef,
+    chatRef,
+    saveConfigTimeoutRef,
+
+    // 更新函数
+    setInputs,
+    setParameterEnabled,
+    setShowDebugPanel,
+    setCustomRequestMode,
+    setCustomRequestBody,
+    setShowSettings,
+    setModels,
+    setGroups,
+    setStatus,
+    setMessage,
+    setDebugData,
+    setActiveDebugTab,
+    setPreviewPayload,
+    setEditingMessageId,
+    setEditValue,
+
+    // 处理函数
+    handleInputChange,
+    handleParameterToggle,
+    debouncedSaveConfig,
+    saveMessagesImmediately,
+    handleConfigImport,
+    handleConfigReset,
+  };
+}; 

web/src/hooks/useSyncMessageAndCustomBody.js

@@ -0,0 +1,111 @@
+import { useCallback, useRef } from 'react';
+import { MESSAGE_ROLES } from '../utils/constants';
+
+export const useSyncMessageAndCustomBody = (
+  customRequestMode,
+  customRequestBody,
+  message,
+  inputs,
+  setCustomRequestBody,
+  setMessage,
+  debouncedSaveConfig
+) => {
+  const isUpdatingFromMessage = useRef(false);
+  const isUpdatingFromCustomBody = useRef(false);
+  const lastMessageHash = useRef('');
+  const lastCustomBodyHash = useRef('');
+
+  const getMessageHash = useCallback((messages) => {
+    return JSON.stringify(messages.map(msg => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content
+    })));
+  }, []);
+
+  const getCustomBodyHash = useCallback((customBody) => {
+    try {
+      const parsed = JSON.parse(customBody);
+      return JSON.stringify(parsed.messages || []);
+    } catch {
+      return '';
+    }
+  }, []);
+
+  const syncMessageToCustomBody = useCallback(() => {
+    if (!customRequestMode || isUpdatingFromCustomBody.current) return;
+
+    const currentMessageHash = getMessageHash(message);
+    if (currentMessageHash === lastMessageHash.current) return;
+
+    try {
+      isUpdatingFromMessage.current = true;
+      let customPayload;
+
+      try {
+        customPayload = JSON.parse(customRequestBody || '{}');
+      } catch {
+        customPayload = {
+          model: inputs.model || 'gpt-4o',
+          messages: [],
+          temperature: inputs.temperature || 0.7,
+          stream: inputs.stream !== false
+        };
+      }
+
+      customPayload.messages = message.map(msg => ({
+        role: msg.role,
+        content: msg.content
+      }));
+
+      const newCustomBody = JSON.stringify(customPayload, null, 2);
+      setCustomRequestBody(newCustomBody);
+      lastMessageHash.current = currentMessageHash;
+      lastCustomBodyHash.current = getCustomBodyHash(newCustomBody);
+
+      setTimeout(() => {
+        debouncedSaveConfig();
+      }, 0);
+    } finally {
+      isUpdatingFromMessage.current = false;
+    }
+  }, [customRequestMode, customRequestBody, message, inputs.model, inputs.temperature, inputs.stream, getMessageHash, getCustomBodyHash, setCustomRequestBody, debouncedSaveConfig]);
+
+  const syncCustomBodyToMessage = useCallback(() => {
+    if (!customRequestMode || isUpdatingFromMessage.current) return;
+
+    const currentCustomBodyHash = getCustomBodyHash(customRequestBody);
+    if (currentCustomBodyHash === lastCustomBodyHash.current) return;
+
+    try {
+      isUpdatingFromCustomBody.current = true;
+      const customPayload = JSON.parse(customRequestBody || '{}');
+
+      if (customPayload.messages && Array.isArray(customPayload.messages)) {
+        const newMessages = customPayload.messages.map((msg, index) => ({
+          id: msg.id || (index + 1).toString(),
+          role: msg.role || MESSAGE_ROLES.USER,
+          content: msg.content || '',
+          createAt: Date.now(),
+          ...(msg.role === MESSAGE_ROLES.ASSISTANT && {
+            reasoningContent: msg.reasoningContent || '',
+            isReasoningExpanded: false
+          })
+        }));
+
+        setMessage(newMessages);
+        lastCustomBodyHash.current = currentCustomBodyHash;
+        lastMessageHash.current = getMessageHash(newMessages);
+      }
+    } catch (error) {
+      console.warn('同步自定义请求体到消息失败:', error);
+    } finally {
+      isUpdatingFromCustomBody.current = false;
+    }
+  }, [customRequestMode, customRequestBody, getCustomBodyHash, getMessageHash, setMessage]);
+
+  return {
+    syncMessageToCustomBody,
+    syncCustomBodyToMessage
+  };
+}; 

web/src/i18n/locales/en.json

@@ -3,6 +3,20 @@
   "文档": "Docs",
   "控制台": "Console",
   "$%.6f 额度": "$%.6f quota",
+  "或": "or",
+  "登 录": "Log In",
+  "注 册": "Sign Up",
+  "使用 邮箱 登录": "Sign in with Email",
+  "使用 GitHub 继续": "Continue with GitHub",
+  "使用 OIDC 继续": "Continue with OIDC",
+  "使用 微信 继续": "Continue with WeChat",
+  "使用 LinuxDO 继续": "Continue with LinuxDO",
+  "使用 邮箱 注册": "Sign up with Email",
+  "其他登录选项": "Other login options",
+  "其他注册选项": "Other registration options",
+  "请输入您的邮箱地址": "Please enter your email address",
+  "请输入您的密码": "Please enter your password",
+  "继续": "Continue",
   "%d 点额度": "%d point quota",
   "尚未实现": "Not yet implemented",
   "余额不足": "Insufficient quota",
@@ -162,8 +176,8 @@
   "聊天": "Chat",
   "注销成功!": "Logout successful!",
   "注销": "Logout",
-  "登录": "Login",
-  "注册": "Register",
+  "登录": "Sign in",
+  "注册": "Sign up",
   "加载{name}中...": "Loading {name}...",
   "未登录或登录已过期，请重新登录！": "Not logged in or session expired. Please login again!",
   "用户登录": "User Login",
@@ -422,7 +436,7 @@
   "系统设置": "System Settings",
   "其他设置": "Other Settings",
   "项目仓库地址": "Project Repository Address",
-  "可在设置页面设置关于内容，支持 HTML & Markdown": "You can set the content about in the settings page, support HTML & Markdown",
+  "可在设置页面设置关于内容，支持 HTML & Markdown": "The About content can be set on the settings page, supporting HTML & Markdown",
   "由": "developed by",
   "开发，基于": "based on",
   "MIT 协议": "MIT License",
@@ -434,7 +448,7 @@
   "一分钟后过期": "Expires after one minute",
   "创建新的令牌": "Create New Token",
   "令牌分组，默认为用户的分组": "Token group, default is the your's group",
-  "IP白名单（请勿过度信任此功能）": "IP whitelist (do not overly trust this function)",
+  "IP白名单": "IP whitelist",
   "注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note that the quota of the token is only used to limit the maximum quota usage of the token itself, and the actual usage is limited by the remaining quota of the account.",
   "设为无限额度": "Set to unlimited quota",
   "更新令牌信息": "Update Token Information",
@@ -497,6 +511,7 @@
   "模型映射必须是合法的 JSON 格式！": "Model mapping must be in valid JSON format!",
   "取消无限额度": "Cancel unlimited quota",
   "取消": "Cancel",
+  "重置": "Reset",
   "请输入新的剩余额度": "Please enter the new remaining quota",
   "请输入单个兑换码中包含的额度": "Please enter the quota included in a single redemption code",
   "请输入用户名": "Please enter username",
@@ -711,7 +726,7 @@
   "小时": "Hour",
   "新密码": "New Password",
   "重置邮件发送成功，请检查邮箱！": "The reset email was sent successfully, please check your email!",
-  "请输入你的账户名以确认删除！": "Please enter your account name to confirm deletion!",
+  "输入你的账户名{{username}}以确认删除": "Enter your account name{{username}}to confirm deletion",
   "账户已删除！": "Account has been deleted!",
   "微信账户绑定成功！": "WeChat account bound successfully!",
   "两次输入的密码不一致！": "The passwords entered twice are inconsistent!",
@@ -764,7 +779,7 @@
   "邀请码": "Invitation code",
   "输入邀请码": "Enter invitation code",
   "账户": "Account",
-  "邮箱": "Mail",
+  "邮箱": "Email",
   "已有账户？": "Already have an account?",
   "创意任务": "Tasks",
   "用户管理": "User Management",
@@ -852,7 +867,6 @@
   "查看全部": "View all",
   "高延迟": "high latency",
   "异常": "abnormal",
-  "API地址": "API address",
   "的未命名令牌": "unnamed token",
   "令牌更新成功！": "Token updated successfully!",
   "(origin) Discord原链接": "(origin) Discord original link",
@@ -882,7 +896,7 @@
   "渠道分组": "Channel grouping",
   "安全设置(可选)": "Security settings (optional)",
   "IP 限制": "IP restrictions",
-  "启用模型限制（非必要，不建议启用）": "Enable model restrictions (not necessary, not recommended)",
+  "模型限制": "Model restrictions",
   "秒": "Second",
   "更新令牌后需等待几分钟生效": "It will take a few minutes to take effect after updating the token.",
   "一小时": "One hour",
@@ -1100,7 +1114,7 @@
   "请输入组织org-xxx": "Please enter organization org-xxx",
   "默认测试模型": "Default Test Model",
   "不填则为模型列表第一个": "First model in list if empty",
-  "是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道：": "Auto-disable (only effective when auto-disable is enabled). When turned off, this channel will not be automatically disabled:",
+  "是否自动禁用（仅当自动禁用开启时有效），关闭后不会自动禁用该渠道": "Auto-disable (only effective when auto-disable is enabled). When turned off, this channel will not be automatically disabled",
   "状态码复写（仅影响本地判断，不修改返回到上游的状态码）": "Status Code Override (only affects local judgment, does not modify status code returned upstream)",
   "此项可选，用于复写返回的状态码，比如将claude渠道的400错误复写为500（用于重试），请勿滥用该功能，例如：": "Optional, used to override returned status codes, e.g. rewriting Claude channel's 400 error to 500 (for retry). Do not abuse this feature. Example:",
   "渠道标签": "Channel Tag",
@@ -1156,15 +1170,14 @@
   "当前查看的分组为：{{group}}，倍率为：{{ratio}}": "Current group: {{group}}, ratio: {{ratio}}",
   "添加用户": "Add user",
   "角色": "Role",
-  "已绑定的GitHub账户": "已绑定的GitHub账户",
-  "已绑定的Telegram账户": "已绑定的Telegram账户",
+  "已绑定的 Telegram 账户": "Bound Telegram account",
   "新额度": "New quota",
   "需要添加的额度（支持负数）": "Need to add quota (supports negative numbers)",
   "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改": "Read-only, user's personal settings, and cannot be modified directly",
   "请输入新的密码，最短 8 位": "Please enter a new password, at least 8 characterss",
   "添加额度": "Add quota",
   "以下信息不可修改": "The following information cannot be modified",
-  "确定要充值吗": "Check to confirm recharge",
+  "充值确认": "Recharge confirmation",
   "充值数量": "Recharge quantity",
   "实付金额": "Actual payment amount",
   "是否确认充值？": "Confirm recharge?",
@@ -1373,5 +1386,151 @@
   "不需要设置模型价格，系统将弱化用量计算，您可专注于使用模型。": "No need to set the model price, the system will weaken the usage calculation, you can focus on using the model.",
   "适用于展示系统功能的场景。": "Suitable for scenarios where the system functions are displayed.",
   "可在初始化后修改": "Can be modified after initialization",
-  "初始化系统": "Initialize system"
+  "初始化系统": "Initialize system",
+  "支持众多的大模型供应商": "Supporting various LLM providers",
+  "新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产": "Next-generation LLM gateway and AI asset management system, one-click integration with mainstream models, easily manage your AI assets",
+  "开始使用": "Get Started",
+  "关于我们": "About Us",
+  "关于项目": "About Project",
+  "联系我们": "Contact Us",
+  "功能特性": "Features",
+  "快速开始": "Quick Start",
+  "安装指南": "Installation Guide",
+  "API 文档": "API Documentation",
+  "相关项目": "Related Projects",
+  "基于New API的项目": "Projects Based on New API",
+  "版权所有": "All rights reserved",
+  "设计与开发由": "Designed & Developed with love by",
+  "演示站点": "Demo Site",
+  "页面未找到，请检查您的浏览器地址是否正确": "Page not found, please check if your browser address is correct",
+  "New API项目仓库地址：": "New API project repository address: ",
+  "NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。": "NewAPI © {{currentYear}} QuantumNous | Based on One API v0.5.4 © 2023 JustSong.",
+  "本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。": "This project is licensed under the MIT License and must be used in compliance with the Apache-2.0 License.",
+  "管理员暂时未设置任何关于内容": "The administrator has not set any custom About content yet",
+  "早上好": "Good morning",
+  "中午好": "Good afternoon",
+  "下午好": "Good afternoon",
+  "晚上好": "Good evening",
+  "更多提示信息": "More Prompts",
+  "新建": "Create",
+  "更新": "Update",
+  "基本信息": "Basic Information",
+  "设置令牌的基本信息": "Set token basic information",
+  "设置令牌可用额度和数量": "Set token available quota and quantity",
+  "访问限制": "Access Restrictions",
+  "设置令牌的访问限制": "Set token access restrictions",
+  "请勿过度信任此功能，IP可能被伪造": "Do not over-trust this feature, IP can be spoofed",
+  "勾选启用模型限制后可选择": "Select after checking to enable model restrictions",
+  "非必要，不建议启用模型限制": "Not necessary, model restrictions are not recommended",
+  "分组信息": "Group Information",
+  "设置令牌的分组": "Set token grouping",
+  "管理员未设置用户可选分组": "Administrator has not set user-selectable groups",
+  "10个": "10 items",
+  "20个": "20 items",
+  "30个": "30 items",
+  "100个": "100 items",
+  "Midjourney 任务记录": "Midjourney Task Records",
+  "任务记录": "Task Records",
+  "兑换码可以批量生成和分发，适合用于推广活动或批量充值。": "Redemption codes can be batch generated and distributed, suitable for promotion activities or bulk recharge.",
+  "剩余": "Remaining",
+  "已用": "Used",
+  "调用": "Calls",
+  "邀请": "Invitations",
+  "收益": "Earnings",
+  "无邀请人": "No Inviter",
+  "邀请人": "Inviter",
+  "用户管理页面，可以查看和管理所有注册用户的信息、权限和状态。": "User management page, you can view and manage all registered user information, permissions, and status.",
+  "设置兑换码的基本信息": "Set redemption code basic information",
+  "设置兑换码的额度和数量": "Set redemption code quota and quantity",
+  "编辑用户": "Edit User",
+  "权限设置": "Permission Settings",
+  "用户的基本账户信息": "User basic account information",
+  "用户分组和额度管理": "User Group and Quota Management",
+  "绑定信息": "Binding Information",
+  "第三方账户绑定状态（只读）": "Third-party account binding status (read-only)",
+  "已绑定的 OIDC 账户": "Bound OIDC accounts",
+  "使用兑换码充值余额": "Recharge balance with redemption code",
+  "支持多种支付方式": "Support multiple payment methods",
+  "尊敬的": "Dear",
+  "请输入兑换码": "Please enter the redemption code",
+  "在线充值功能未开启": "Online recharge function is not enabled",
+  "管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。": "The administrator has not enabled the online recharge function, please contact the administrator to enable it or recharge with a redemption code.",
+  "点击模型名称可复制": "Click the model name to copy",
+  "管理您的邀请链接和收益": "Manage your invitation link and earnings",
+  "模型与邀请": "Model and Invitation",
+  "账户绑定": "Account Binding",
+  "安全设置": "Security Settings",
+  "系统访问令牌": "System Access Token",
+  "用于API调用的身份验证令牌，请妥善保管": "Authentication token for API calls, please keep it safe",
+  "密码管理": "Password Management",
+  "定期更改密码可以提高账户安全性": "Regularly changing your password can improve account security",
+  "删除账户": "Delete Account",
+  "此操作不可逆，所有数据将被永久删除": "This operation is irreversible, all data will be permanently deleted",
+  "生成令牌": "Generate Token",
+  "通过邮件接收通知": "Receive notifications via email",
+  "通过HTTP请求接收通知": "Receive notifications via HTTP request",
+  "价格设置": "Price Settings",
+  "重新生成": "Regenerate",
+  "绑定微信账户": "Bind WeChat Account",
+  "原密码": "Original Password",
+  "请输入原密码": "Please enter the original password",
+  "请输入新密码": "Please enter the new password",
+  "请再次输入新密码": "Please enter the new password again",
+  "删除账户确认": "Delete Account Confirmation",
+  "请输入您的用户名以确认删除": "Please enter your username to confirm deletion",
+  "接受未设置价格模型": "Accept models without price settings",
+  "当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用": "Accept calls even if the model has no price settings, use only when you trust the website, which may incur high costs",
+  "批量操作": "Batch Operations",
+  "未开始": "Not Started",
+  "测试中": "Testing",
+  "请求时长: ${time}s": "Request time: ${time}s",
+  "搜索模型...": "Search models...",
+  "批量测试${count}个模型": "Batch test ${count} models",
+  "测试中...": "Testing...",
+  "渠道的模型测试": "Channel Model Test",
+  "共": "Total",
+  "确定要测试所有通道吗？": "Are you sure you want to test all channels?",
+  "确定要更新所有已启用通道余额吗？": "Are you sure you want to update the balance of all enabled channels?",
+  "已选择 ${count} 个渠道": "Selected ${count} channels",
+  "渠道的基本配置信息": "Channel basic configuration information",
+  "API 配置": "API Configuration",
+  "API 地址和相关配置": "API URL and related configuration",
+  "模型配置": "Model Configuration",
+  "模型选择和映射设置": "Model selection and mapping settings",
+  "高级设置": "Advanced Settings",
+  "渠道的高级配置选项": "Advanced channel configuration options",
+  "设置说明": "Setting Description",
+  "此项可选，用于配置渠道特定设置，为一个 JSON 字符串，例如：": "This is optional, used to configure channel-specific settings, as a JSON string, for example:",
+  "此项可选，用于覆盖请求参数。不支持覆盖 stream 参数。为一个 JSON 字符串，例如：": "This is optional, used to override request parameters. Does not support overriding the stream parameter. As a JSON string, for example:",
+  "编辑标签": "Edit Tag",
+  "标签信息": "Tag Information",
+  "标签的基本配置": "Tag basic configuration",
+  "所有编辑均为覆盖操作，留空则不更改": "All edits are overwrite operations, leaving blank will not change",
+  "标签名称": "Tag Name",
+  "请选择该渠道所支持的模型，留空则不更改": "Please select the models supported by the channel, leaving blank will not change",
+  "此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改": "This is optional, used to modify the model name in the request body, as a JSON string, the key is the model name in the request, the value is the model name to be replaced, leaving blank will not change",
+  "清空重定向": "Clear redirect",
+  "不更改": "Not change",
+  "用户分组配置": "User group configuration",
+  "请选择可以使用该渠道的分组，留空则不更改": "Please select the groups that can use this channel, leaving blank will not change",
+  "启用全部": "Enable all",
+  "禁用全部": "Disable all",
+  "模型定价": "Model Pricing",
+  "当前分组": "Current group",
+  "全部模型": "All Models",
+  "智谱": "Zhipu AI",
+  "通义千问": "Qwen",
+  "文心一言": "ERNIE Bot",
+  "讯飞星火": "Spark Desk",
+  "腾讯混元": "Hunyuan",
+  "360智脑": "360 AI Brain",
+  "零一万物": "Yi",
+  "豆包": "Doubao",
+  "系统公告": "System Notice",
+  "今日关闭": "Close Today",
+  "关闭公告": "Close Notice",
+  "搜索条件": "Search Conditions",
+  "加载中...": "Loading...",
+  "暂无公告": "No Notice",
+  "操练场": "Playground"
 }

web/src/index.css

@@ -1,3 +1,17 @@
+@layer tailwind-base, semi, tailwind-components, tailwind-utils;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-components {
+  @tailwind components;
+}
+
+@layer tailwind-utils {
+  @tailwind utilities;
+}
+
 body {
   margin: 0;
   padding-top: 0;
@@ -18,111 +32,23 @@ body {
   overflow: hidden;
 }
 
-#root
-  > section
-  > header
-  > section
-  > div
-  > div
-  > div
-  > div.semi-navigation-header-list-outer
-  > div.semi-navigation-list-wrapper
-  > ul
-  > div
-  > a
-  > li
-  > span {
+#root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li>span {
   font-weight: 600 !important;
 }
 
-.semi-descriptions-double-small .semi-descriptions-item {
-  padding-right: 30px;
-}
-
 @media only screen and (max-width: 767px) {
-  /*.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item {*/
-  /*  padding: 0 0;*/
-  /*}*/
-  .topnav {
-    padding: 0 8px;
-  }
 
-  .topnav .semi-navigation-item {
-    margin: 0 1px;
-    padding: 0 4px;
-  }
-
-  .topnav .semi-navigation-list-wrapper {
-    max-width: calc(55vw - 20px);
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-  #root
-    > section
-    > header
-    > section
-    > div
-    > div
-    > div
-    > div.semi-navigation-footer
-    > div
-    > a
-    > li {
+  #root>section>header>section>div>div>div>div.semi-navigation-footer>div>a>li {
     padding: 0 0;
   }
-  #root
-    > section
-    > header
-    > section
-    > div
-    > div
-    > div
-    > div.semi-navigation-header-list-outer
-    > div.semi-navigation-list-wrapper
-    > ul
-    > div
-    > a
-    > li {
+
+  #root>section>header>section>div>div>div>div.semi-navigation-header-list-outer>div.semi-navigation-list-wrapper>ul>div>a>li {
     padding: 0 5px;
   }
-  #root
-    > section
-    > header
-    > section
-    > div
-    > div
-    > div
-    > div.semi-navigation-footer
-    > div:nth-child(1)
-    > a
-    > li {
+
+  #root>section>header>section>div>div>div>div.semi-navigation-footer>div:nth-child(1)>a>li {
     padding: 0 5px;
   }
-  .semi-navigation-footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .semi-table-tbody,
-  .semi-table-row,
-  .semi-table-row-cell {
-    display: block !important;
-    width: auto !important;
-    padding: 2px !important;
-  }
-  .semi-table-row-cell {
-    border-bottom: 0 !important;
-  }
-  .semi-table-tbody > .semi-table-row {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .semi-space {
-    /*display: block!important;*/
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    row-gap: 3px;
-    column-gap: 10px;
-  }
 
   .semi-navigation-horizontal .semi-navigation-header {
     margin-right: 0;
@@ -148,41 +74,27 @@ body {
     height: 100% !important;
   }
 
-  /* 隐藏在移动设备上 */
-  .hide-on-mobile {
-    display: none !important;
+  .semi-table-tbody,
+  .semi-table-row,
+  .semi-table-row-cell {
+    display: block !important;
+    width: auto !important;
+    padding: 2px !important;
+  }
+
+  .semi-table-row-cell {
+    border-bottom: 0 !important;
+  }
+
+  .semi-table-tbody>.semi-table-row {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
 }
 
-.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
-  padding: 16px 14px;
-}
-
-.channel-table {
-  .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
-    padding: 16px 8px;
-  }
-}
-
-/*.semi-layout {*/
-/*  height: 100%;*/
-/*}*/
-
 .tableShow {
   display: revert;
 }
 
-.semi-chat {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  height: 100%;
-}
-
-.semi-chat-chatBox-content {
-  min-width: auto;
-  word-break: break-word;
-}
-
 .tableHiddle {
   display: none !important;
 }
@@ -196,99 +108,10 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-.semi-navigation-item {
-  margin-bottom: 0;
-}
-
-/* 自定义侧边栏按钮悬停效果 */
-.semi-navigation-item:hover {
-  transform: translateX(2px);
-  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
-}
-
-/* 自定义侧边栏按钮选中效果 */
-.semi-navigation-item-selected {
-  position: relative;
-  overflow: hidden;
-}
-
-.semi-navigation-item-selected::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 4px;
-  background-color: var(--semi-color-primary);
-  animation: slideIn 0.3s ease;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-/*.semi-navigation-vertical {*/
-/*  !*flex: 0 0 auto;*!*/
-/*  !*display: flex;*!*/
-/*  !*flex-direction: column;*!*/
-/*  !*width: 100%;*!*/
-/*  height: 100%;*/
-/*  overflow: hidden;*/
-/*}*/
-
-.main-content {
-  padding: 4px;
-  height: 100%;
-}
-
-.small-icon .icon {
-  font-size: 1em !important;
-}
-
 .custom-footer {
   font-size: 1.1em;
 }
 
-/* 顶部栏样式 */
-.topnav {
-  padding: 0 16px;
-}
-
-.topnav .semi-navigation-item {
-  border-radius: 4px;
-  margin: 0 2px;
-  transition: all 0.3s ease;
-}
-
-.topnav .semi-navigation-item:hover {
-  background-color: var(--semi-color-primary-light-default);
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(var(--semi-color-primary-rgb), 0.2);
-}
-
-.topnav .semi-navigation-item-selected {
-  background-color: var(--semi-color-primary-light-default);
-  color: var(--semi-color-primary);
-  font-weight: 600;
-}
-
-/* 顶部栏文本样式 */
-.header-bar-text {
-  color: var(--semi-color-text-0);
-  font-weight: 500;
-  transition: all 0.3s ease;
-}
-
-.header-bar-text:hover {
-  color: var(--semi-color-primary);
-}
-
-/* 自定义滚动条样式 */
 .semi-layout-content::-webkit-scrollbar,
 .semi-sider::-webkit-scrollbar {
   width: 6px;
@@ -311,10 +134,181 @@ code {
   background: transparent;
 }
 
-/* Custom sidebar shadow */
-/*.custom-sidebar-nav {*/
-/*  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
-/*  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
-/*  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
-/*  min-height: 100%;*/
-/*}*/
+.semi-chat-inputBox-sendButton,
+.semi-page-item,
+.semi-navigation-item,
+.semi-tag-closable,
+.semi-datepicker-range-input {
+  border-radius: 9999px;
+}
+
+.semi-tabs-content {
+  padding: 0 !important;
+}
+
+/* 聊天 */
+.semi-chat {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 100%;
+  max-width: 100% !important;
+  width: 100% !important;
+  overflow: hidden !important;
+}
+
+.semi-chat-chatBox {
+  max-width: 100% !important;
+  overflow: hidden !important;
+}
+
+.semi-chat-chatBox-wrap {
+  max-width: 100% !important;
+  overflow: hidden !important;
+}
+
+.semi-chat-chatBox-content {
+  min-width: auto;
+  word-break: break-word;
+  max-width: 100% !important;
+  overflow-wrap: break-word !important;
+}
+
+.semi-chat-content {
+  max-width: 100% !important;
+  overflow: hidden !important;
+}
+
+.semi-chat-list {
+  max-width: 100% !important;
+  overflow-x: hidden !important;
+}
+
+/* 隐藏所有聊天相关区域的滚动条 */
+.semi-chat::-webkit-scrollbar,
+.semi-chat-chatBox::-webkit-scrollbar,
+.semi-chat-chatBox-wrap::-webkit-scrollbar,
+.semi-chat-chatBox-content::-webkit-scrollbar,
+.semi-chat-content::-webkit-scrollbar,
+.semi-chat-list::-webkit-scrollbar {
+  display: none;
+}
+
+.semi-chat,
+.semi-chat-chatBox,
+.semi-chat-chatBox-wrap,
+.semi-chat-chatBox-content,
+.semi-chat-content,
+.semi-chat-list {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.semi-chat-container {
+  overflow-x: hidden !important;
+}
+
+.semi-chat-container::-webkit-scrollbar {
+  display: none;
+}
+
+.semi-chat-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 隐藏模型设置区域的滚动条 */
+.model-settings-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.model-settings-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 思考内容区域滚动条样式 */
+.thinking-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.thinking-content-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 图片列表滚动条样式 */
+.image-list-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.image-list-scroll::-webkit-scrollbar-thumb {
+  background: var(--semi-color-tertiary-light-default);
+  border-radius: 3px;
+}
+
+.image-list-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-tertiary);
+}
+
+.image-list-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 隐藏请求体 JSON TextArea 的滚动条 */
+.custom-request-textarea .semi-input::-webkit-scrollbar {
+  display: none;
+}
+
+.custom-request-textarea .semi-input {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.custom-request-textarea textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.custom-request-textarea textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* 调试面板标签样式 */
+.semi-tabs-content {
+  height: calc(100% - 40px) !important;
+  flex: 1 !important;
+}
+
+.semi-tabs-content .semi-tabs-pane {
+  height: 100% !important;
+  overflow: hidden !important;
+}
+
+.semi-tabs-content .semi-tabs-pane>div {
+  height: 100% !important;
+}
+
+/* 调试面板特定样式 */
+.debug-panel .semi-tabs {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.debug-panel .semi-tabs-bar {
+  flex-shrink: 0 !important;
+}
+
+.debug-panel .semi-tabs-content {
+  flex: 1 !important;
+  overflow: hidden !important;
+}
+
+.semi-chat-chatBox-action {
+  column-gap: 0 !important;
+}
+
+.semi-chat-inputBox-clearButton.semi-button .semi-icon {
+  font-size: 20px !important;
+}

web/src/index.js

@@ -1,18 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import App from './App';
-import HeaderBar from './components/HeaderBar';
-import 'semantic-ui-offline/semantic.min.css';
-import './index.css';
 import { UserProvider } from './context/User';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { StatusProvider } from './context/Status';
 import { Layout } from '@douyinfe/semi-ui';
-import SiderBar from './components/SiderBar';
 import { ThemeProvider } from './context/Theme';
-import FooterBar from './components/Footer';
 import { StyleProvider } from './context/Style/index.js';
 import PageLayout from './components/PageLayout.js';
 import './i18n/i18n.js';

web/src/pages/About/index.js

@@ -1,11 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
-import { Layout } from '@douyinfe/semi-ui';
+import { Empty } from '@douyinfe/semi-ui';
+import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const About = () => {
+  const { t } = useTranslation();
   const [about, setAbout] = useState('');
   const [aboutLoaded, setAboutLoaded] = useState(false);
+  const currentYear = new Date().getFullYear();
 
   const displayAbout = async () => {
     setAbout(localStorage.getItem('about') || '');
@@ -20,7 +25,7 @@ const About = () => {
       localStorage.setItem('about', aboutContent);
     } else {
       showError(message);
-      setAbout('加载关于内容失败...');
+      setAbout(t('加载关于内容失败...'));
     }
     setAboutLoaded(true);
   };
@@ -29,30 +34,39 @@ const About = () => {
     displayAbout().then();
   }, []);
 
+  const emptyStyle = {
+    padding: '24px'
+  };
+
+  const customDescription = (
+    <div style={{ textAlign: 'center' }}>
+      <p>{t('可在设置页面设置关于内容，支持 HTML & Markdown')}</p>
+      {t('New API项目仓库地址：')}
+      <Link to='https://github.com/QuantumNous/new-api' target="_blank">
+        https://github.com/QuantumNous/new-api
+      </Link>
+      <p>
+        {t('NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。', { currentYear })}
+      </p>
+      <p>
+        {t('本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。')}
+      </p>
+    </div>
+  );
+
   return (
     <>
       {aboutLoaded && about === '' ? (
-        <>
-          <Layout>
-            <Layout.Header>
-              <h3>关于</h3>
-            </Layout.Header>
-            <Layout.Content>
-              <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
-              New-API项目仓库地址：
-              <a href='https://github.com/Calcium-Ion/new-api'>
-                https://github.com/Calcium-Ion/new-api
-              </a>
-              <p>
-                NewAPI © 2023 CalciumIon | 基于 One API v0.5.4 © 2023
-                JustSong。
-              </p>
-              <p>
-                本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。
-              </p>
-            </Layout.Content>
-          </Layout>
-        </>
+        <div className="flex justify-center items-center h-screen p-8">
+          <Empty
+            image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
+            darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
+            description={t('管理员暂时未设置任何关于内容')}
+            style={emptyStyle}
+          >
+            {customDescription}
+          </Empty>
+        </div>
       ) : (
         <>
           {about.startsWith('https://') ? (

web/src/pages/Channel/EditTagModal.js

@@ -14,26 +14,35 @@ import {
   Input,
   Typography,
   Spin,
-  Modal,
   Select,
   Banner,
   TextArea,
+  Card,
+  Tag,
 } from '@douyinfe/semi-ui';
-import TextInput from '../../components/custom/TextInput.js';
+import {
+  IconSave,
+  IconClose,
+  IconBookmark,
+  IconUser,
+  IconCode,
+} from '@douyinfe/semi-icons';
 import { getChannelModels } from '../../components/utils.js';
+import { useTranslation } from 'react-i18next';
+
+const { Text, Title } = Typography;
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
 };
 
 const EditTagModal = (props) => {
+  const { t } = useTranslation();
   const { visible, tag, handleClose, refresh } = props;
   const [loading, setLoading] = useState(false);
   const [originModelOptions, setOriginModelOptions] = useState([]);
   const [modelOptions, setModelOptions] = useState([]);
   const [groupOptions, setGroupOptions] = useState([]);
-  const [basicModels, setBasicModels] = useState([]);
-  const [fullModels, setFullModels] = useState([]);
   const [customModel, setCustomModel] = useState('');
   const originInputs = {
     tag: '',
@@ -90,7 +99,6 @@ const EditTagModal = (props) => {
       if (inputs.models.length === 0) {
         setInputs((inputs) => ({ ...inputs, models: localModels }));
       }
-      setBasicModels(localModels);
     }
   };
 
@@ -102,14 +110,6 @@ const EditTagModal = (props) => {
         value: model.id,
       }));
       setOriginModelOptions(localModelOptions);
-      setFullModels(res.data.data.map((model) => model.id));
-      setBasicModels(
-        res.data.data
-          .filter((model) => {
-            return model.id.startsWith('gpt-') || model.id.startsWith('text-');
-          })
-          .map((model) => model.id),
-      );
     } catch (error) {
       showError(error.message);
     }
@@ -238,136 +238,215 @@ const EditTagModal = (props) => {
 
   return (
     <SideSheet
-      title='编辑标签'
+      placement='right'
+      title={
+        <Space>
+          <Tag color="blue" shape="circle">{t('编辑')}</Tag>
+          <Title heading={4} className="m-0">
+            {t('编辑标签')}
+          </Title>
+        </Space>
+      }
+      headerStyle={{
+        borderBottom: '1px solid var(--semi-color-border)',
+        padding: '24px'
+      }}
+      bodyStyle={{
+        backgroundColor: 'var(--semi-color-bg-0)',
+        padding: '0'
+      }}
       visible={visible}
+      width={600}
       onCancel={handleClose}
       footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <div className="flex justify-end bg-white">
           <Space>
-            <Button onClick={handleClose}>取消</Button>
-            <Button type='primary' onClick={handleSave} loading={loading}>
-              保存
+            <Button
+              theme="solid"
+              size="large"
+              className="!rounded-full"
+              onClick={handleSave}
+              loading={loading}
+              icon={<IconSave />}
+            >
+              {t('保存')}
+            </Button>
+            <Button
+              theme="light"
+              size="large"
+              className="!rounded-full"
+              type="primary"
+              onClick={handleClose}
+              icon={<IconClose />}
+            >
+              {t('取消')}
             </Button>
           </Space>
         </div>
       }
+      closeIcon={null}
     >
-      <div style={{ marginTop: 10 }}>
-        <Banner
-          type={'warning'}
-          description={<>所有编辑均为覆盖操作，留空则不更改</>}
-        ></Banner>
-      </div>
       <Spin spinning={loading}>
-        <TextInput
-          label='标签名，留空则解散标签'
-          name='newTag'
-          value={inputs.new_tag}
-          onChange={(value) => setInputs({ ...inputs, new_tag: value })}
-          placeholder='请输入新标签'
-        />
-        <div style={{ marginTop: 10 }}>
-          <Typography.Text strong>模型，留空则不更改：</Typography.Text>
+        <div className="p-6">
+          <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+              background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+              position: 'relative'
+            }}>
+              <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+              </div>
+              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                <IconBookmark size="large" style={{ color: '#ffffff' }} />
+              </div>
+              <div className="relative">
+                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('标签信息')}</Text>
+                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('标签的基本配置')}</div>
+              </div>
+            </div>
+
+            <Banner
+              type="warning"
+              description={t('所有编辑均为覆盖操作，留空则不更改')}
+              className="!rounded-lg mb-4"
+            />
+
+            <div className="space-y-4">
+              <div>
+                <Text strong className="block mb-2">{t('标签名称')}</Text>
+                <Input
+                  value={inputs.new_tag}
+                  onChange={(value) => setInputs({ ...inputs, new_tag: value })}
+                  placeholder={t('请输入新标签，留空则解散标签')}
+                  size="large"
+                  className="!rounded-lg"
+                />
+              </div>
+            </div>
+          </Card>
+
+          <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+              background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
+              position: 'relative'
+            }}>
+              <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+              </div>
+              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                <IconCode size="large" style={{ color: '#ffffff' }} />
+              </div>
+              <div className="relative">
+                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('模型配置')}</Text>
+                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('模型选择和映射设置')}</div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <Text strong className="block mb-2">{t('模型')}</Text>
+                <Select
+                  placeholder={t('请选择该渠道所支持的模型，留空则不更改')}
+                  name='models'
+                  multiple
+                  filter
+                  searchPosition='dropdown'
+                  onChange={(value) => handleInputChange('models', value)}
+                  value={inputs.models}
+                  optionList={modelOptions}
+                  size="large"
+                  className="!rounded-lg"
+                />
+              </div>
+
+              <div>
+                <Input
+                  addonAfter={
+                    <Button type='primary' onClick={addCustomModels} className="!rounded-r-lg">
+                      {t('填入')}
+                    </Button>
+                  }
+                  placeholder={t('输入自定义模型名称')}
+                  value={customModel}
+                  onChange={(value) => setCustomModel(value.trim())}
+                  size="large"
+                  className="!rounded-lg"
+                />
+              </div>
+
+              <div>
+                <Text strong className="block mb-2">{t('模型重定向')}</Text>
+                <TextArea
+                  placeholder={t('此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改')}
+                  name='model_mapping'
+                  onChange={(value) => handleInputChange('model_mapping', value)}
+                  autosize
+                  value={inputs.model_mapping}
+                  className="!rounded-lg font-mono"
+                />
+                <Space className="mt-2">
+                  <Text
+                    className="text-blue-500 cursor-pointer"
+                    onClick={() => handleInputChange('model_mapping', JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2))}
+                  >
+                    {t('填入模板')}
+                  </Text>
+                  <Text
+                    className="text-blue-500 cursor-pointer"
+                    onClick={() => handleInputChange('model_mapping', JSON.stringify({}, null, 2))}
+                  >
+                    {t('清空重定向')}
+                  </Text>
+                  <Text
+                    className="text-blue-500 cursor-pointer"
+                    onClick={() => handleInputChange('model_mapping', '')}
+                  >
+                    {t('不更改')}
+                  </Text>
+                </Space>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="!rounded-2xl shadow-sm border-0">
+            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+              background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
+              position: 'relative'
+            }}>
+              <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+              </div>
+              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                <IconUser size="large" style={{ color: '#ffffff' }} />
+              </div>
+              <div className="relative">
+                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('分组设置')}</Text>
+                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('用户分组配置')}</div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <Text strong className="block mb-2">{t('分组')}</Text>
+                <Select
+                  placeholder={t('请选择可以使用该渠道的分组，留空则不更改')}
+                  name='groups'
+                  multiple
+                  allowAdditions
+                  additionLabel={t('请在系统设置页面编辑分组倍率以添加新的分组：')}
+                  onChange={(value) => handleInputChange('groups', value)}
+                  value={inputs.groups}
+                  optionList={groupOptions}
+                  size="large"
+                  className="!rounded-lg"
+                />
+              </div>
+            </div>
+          </Card>
         </div>
-        <Select
-          placeholder={'请选择该渠道所支持的模型，留空则不更改'}
-          name='models'
-          required
-          multiple
-          selection
-          filter
-          searchPosition='dropdown'
-          onChange={(value) => {
-            handleInputChange('models', value);
-          }}
-          value={inputs.models}
-          autoComplete='new-password'
-          optionList={modelOptions}
-        />
-        <Input
-          addonAfter={
-            <Button type='primary' onClick={addCustomModels}>
-              填入
-            </Button>
-          }
-          placeholder='输入自定义模型名称'
-          value={customModel}
-          onChange={(value) => {
-            setCustomModel(value.trim());
-          }}
-        />
-        <div style={{ marginTop: 10 }}>
-          <Typography.Text strong>分组，留空则不更改：</Typography.Text>
-        </div>
-        <Select
-          placeholder={'请选择可以使用该渠道的分组，留空则不更改'}
-          name='groups'
-          required
-          multiple
-          selection
-          allowAdditions
-          additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
-          onChange={(value) => {
-            handleInputChange('groups', value);
-          }}
-          value={inputs.groups}
-          autoComplete='new-password'
-          optionList={groupOptions}
-        />
-        <div style={{ marginTop: 10 }}>
-          <Typography.Text strong>模型重定向：</Typography.Text>
-        </div>
-        <TextArea
-          placeholder={`此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改`}
-          name='model_mapping'
-          onChange={(value) => {
-            handleInputChange('model_mapping', value);
-          }}
-          autosize
-          value={inputs.model_mapping}
-          autoComplete='new-password'
-        />
-        <Space>
-          <Typography.Text
-            style={{
-              color: 'rgba(var(--semi-blue-5), 1)',
-              userSelect: 'none',
-              cursor: 'pointer',
-            }}
-            onClick={() => {
-              handleInputChange(
-                'model_mapping',
-                JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
-              );
-            }}
-          >
-            填入模板
-          </Typography.Text>
-          <Typography.Text
-            style={{
-              color: 'rgba(var(--semi-blue-5), 1)',
-              userSelect: 'none',
-              cursor: 'pointer',
-            }}
-            onClick={() => {
-              handleInputChange('model_mapping', JSON.stringify({}, null, 2));
-            }}
-          >
-            清空重定向
-          </Typography.Text>
-          <Typography.Text
-            style={{
-              color: 'rgba(var(--semi-blue-5), 1)',
-              userSelect: 'none',
-              cursor: 'pointer',
-            }}
-            onClick={() => {
-              handleInputChange('model_mapping', '');
-            }}
-          >
-            不更改
-          </Typography.Text>
-        </Space>
       </Spin>
     </SideSheet>
   );

web/src/pages/Channel/index.js

@@ -1,20 +1,10 @@
 import React from 'react';
 import ChannelsTable from '../../components/ChannelsTable';
-import { Layout } from '@douyinfe/semi-ui';
-import { useTranslation } from 'react-i18next';
 
 const File = () => {
-  const { t } = useTranslation();
   return (
     <>
-      <Layout>
-        <Layout.Header>
-          <h3>{t('管理渠道')}</h3>
-        </Layout.Header>
-        <Layout.Content>
-          <ChannelsTable />
-        </Layout.Content>
-      </Layout>
+      <ChannelsTable />
     </>
   );
 };

web/src/pages/Detail/index.js

@@ -1,21 +1,32 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+import { useNavigate } from 'react-router-dom';
 
 import {
-  Button,
   Card,
-  Col,
-  Descriptions,
   Form,
-  Layout,
-  Row,
   Spin,
-  Tabs,
+  IconButton,
+  Modal,
+  Avatar,
 } from '@douyinfe/semi-ui';
+import {
+  IconRefresh,
+  IconSearch,
+  IconMoneyExchangeStroked,
+  IconHistogram,
+  IconRotate,
+  IconCoinMoneyStroked,
+  IconTextStroked,
+  IconPulse,
+  IconStopwatchStroked,
+  IconTypograph,
+} from '@douyinfe/semi-icons';
 import { VChart } from '@visactor/react-vchart';
 import {
   API,
   isAdmin,
+  isMobile,
   showError,
   timestamp2string,
   timestamp2string1,
@@ -25,20 +36,17 @@ import {
   modelColorMap,
   renderNumber,
   renderQuota,
-  renderQuotaNumberWithDigit,
-  stringToColor,
   modelToColor,
 } from '../../helpers/render';
 import { UserContext } from '../../context/User/index.js';
-import { StyleContext } from '../../context/Style/index.js';
 import { useTranslation } from 'react-i18next';
 
 const Detail = (props) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const formRef = useRef();
   let now = new Date();
   const [userState, userDispatch] = useContext(UserContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
   const [inputs, setInputs] = useState({
     username: '',
     token_name: '',
@@ -67,6 +75,8 @@ const Detail = (props) => {
   );
   const [pieData, setPieData] = useState([{ type: 'null', value: '0' }]);
   const [lineData, setLineData] = useState([]);
+  const [searchModalVisible, setSearchModalVisible] = useState(false);
+
   const [spec_pie, setSpecPie] = useState({
     type: 'pie',
     data: [
@@ -200,6 +210,22 @@ const Detail = (props) => {
   // 添加一个新的状态来存储模型-颜色映射
   const [modelColors, setModelColors] = useState({});
 
+  // 显示搜索Modal
+  const showSearchModal = () => {
+    setSearchModalVisible(true);
+  };
+
+  // 关闭搜索Modal
+  const handleCloseModal = () => {
+    setSearchModalVisible(false);
+  };
+
+  // 搜索Modal确认按钮
+  const handleSearchConfirm = () => {
+    refresh();
+    setSearchModalVisible(false);
+  };
+
   const handleInputChange = (value, name) => {
     if (name === 'data_export_default_time') {
       setDataExportDefaultTime(value);
@@ -416,165 +442,225 @@ const Detail = (props) => {
     }
   }, []);
 
+  // 数据卡片信息
+  const statsData = [
+    {
+      title: t('当前余额'),
+      value: renderQuota(userState?.user?.quota),
+      icon: <IconMoneyExchangeStroked size="large" />,
+      color: 'bg-blue-50',
+      avatarColor: 'blue',
+      onClick: () => navigate('/console/topup'),
+    },
+    {
+      title: t('历史消耗'),
+      value: renderQuota(userState?.user?.used_quota),
+      icon: <IconHistogram size="large" />,
+      color: 'bg-purple-50',
+      avatarColor: 'purple',
+    },
+    {
+      title: t('请求次数'),
+      value: userState.user?.request_count,
+      icon: <IconRotate size="large" />,
+      color: 'bg-green-50',
+      avatarColor: 'green',
+    },
+    {
+      title: t('统计额度'),
+      value: renderQuota(consumeQuota),
+      icon: <IconCoinMoneyStroked size="large" />,
+      color: 'bg-yellow-50',
+      avatarColor: 'yellow',
+    },
+    {
+      title: t('统计Tokens'),
+      value: isNaN(consumeTokens) ? 0 : consumeTokens,
+      icon: <IconTextStroked size="large" />,
+      color: 'bg-pink-50',
+      avatarColor: 'pink',
+    },
+    {
+      title: t('统计次数'),
+      value: times,
+      icon: <IconPulse size="large" />,
+      color: 'bg-teal-50',
+      avatarColor: 'cyan',
+    },
+    {
+      title: t('平均RPM'),
+      value: (
+        times /
+        ((Date.parse(end_timestamp) - Date.parse(start_timestamp)) / 60000)
+      ).toFixed(3),
+      icon: <IconStopwatchStroked size="large" />,
+      color: 'bg-indigo-50',
+      avatarColor: 'indigo',
+    },
+    {
+      title: t('平均TPM'),
+      value: (() => {
+        const tpm = consumeTokens /
+          ((Date.parse(end_timestamp) - Date.parse(start_timestamp)) / 60000);
+        return isNaN(tpm) ? '0' : tpm.toFixed(3);
+      })(),
+      icon: <IconTypograph size="large" />,
+      color: 'bg-orange-50',
+      avatarColor: 'orange',
+    },
+  ];
+
+  // 获取问候语
+  const getGreeting = () => {
+    const hours = new Date().getHours();
+    let greeting = '';
+
+    if (hours >= 5 && hours < 12) {
+      greeting = t('早上好');
+    } else if (hours >= 12 && hours < 14) {
+      greeting = t('中午好');
+    } else if (hours >= 14 && hours < 18) {
+      greeting = t('下午好');
+    } else {
+      greeting = t('晚上好');
+    }
+
+    const username = userState?.user?.username || '';
+    return `👋${greeting}，${username}`;
+  };
+
   return (
-    <>
-      <Layout>
-        <Layout.Header>
-          <h3>{t('数据看板')}</h3>
-        </Layout.Header>
-        <Layout.Content>
-          <Form ref={formRef} layout='horizontal' style={{ marginTop: 10 }}>
-            <>
-              <Form.DatePicker
-                field='start_timestamp'
-                label={t('起始时间')}
-                style={{ width: 272 }}
-                initValue={start_timestamp}
-                value={start_timestamp}
-                type='dateTime'
-                name='start_timestamp'
-                onChange={(value) =>
-                  handleInputChange(value, 'start_timestamp')
-                }
-              />
-              <Form.DatePicker
-                field='end_timestamp'
-                fluid
-                label={t('结束时间')}
-                style={{ width: 272 }}
-                initValue={end_timestamp}
-                value={end_timestamp}
-                type='dateTime'
-                name='end_timestamp'
-                onChange={(value) => handleInputChange(value, 'end_timestamp')}
-              />
-              <Form.Select
-                field='data_export_default_time'
-                label={t('时间粒度')}
-                style={{ width: 176 }}
-                initValue={dataExportDefaultTime}
-                placeholder={t('时间粒度')}
-                name='data_export_default_time'
-                optionList={[
-                  { label: t('小时'), value: 'hour' },
-                  { label: t('天'), value: 'day' },
-                  { label: t('周'), value: 'week' },
-                ]}
-                onChange={(value) =>
-                  handleInputChange(value, 'data_export_default_time')
-                }
-              ></Form.Select>
-              {isAdminUser && (
-                <>
-                  <Form.Input
-                    field='username'
-                    label={t('用户名称')}
-                    style={{ width: 176 }}
-                    value={username}
-                    placeholder={t('可选值')}
-                    name='username'
-                    onChange={(value) => handleInputChange(value, 'username')}
-                  />
-                </>
-              )}
-              <Button
-                label={t('查询')}
-                type='primary'
-                htmlType='submit'
-                className='btn-margin-right'
-                onClick={refresh}
-                loading={loading}
-                style={{ marginTop: 24 }}
+    <div className="bg-gray-50 h-full">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-2xl font-semibold text-gray-800">{getGreeting()}</h2>
+        <div className="flex gap-3">
+          <IconButton
+            icon={<IconSearch />}
+            onClick={showSearchModal}
+            className="bg-green-500 text-white hover:bg-green-600 !rounded-full"
+          />
+          <IconButton
+            icon={<IconRefresh />}
+            onClick={refresh}
+            loading={loading}
+            className="bg-blue-500 text-white hover:bg-blue-600 !rounded-full"
+          />
+        </div>
+      </div>
+
+      {/* 搜索条件Modal */}
+      <Modal
+        title={t('搜索条件')}
+        visible={searchModalVisible}
+        onOk={handleSearchConfirm}
+        onCancel={handleCloseModal}
+        closeOnEsc={true}
+        size={isMobile() ? 'full-width' : 'small'}
+        centered
+      >
+        <Form ref={formRef} layout='vertical' className="w-full">
+          <Form.DatePicker
+            field='start_timestamp'
+            label={t('起始时间')}
+            className="w-full mb-2 !rounded-lg"
+            initValue={start_timestamp}
+            value={start_timestamp}
+            type='dateTime'
+            name='start_timestamp'
+            size='large'
+            onChange={(value) => handleInputChange(value, 'start_timestamp')}
+          />
+          <Form.DatePicker
+            field='end_timestamp'
+            label={t('结束时间')}
+            className="w-full mb-2 !rounded-lg"
+            initValue={end_timestamp}
+            value={end_timestamp}
+            type='dateTime'
+            name='end_timestamp'
+            size='large'
+            onChange={(value) => handleInputChange(value, 'end_timestamp')}
+          />
+          <Form.Select
+            field='data_export_default_time'
+            label={t('时间粒度')}
+            className="w-full mb-2 !rounded-lg"
+            initValue={dataExportDefaultTime}
+            placeholder={t('时间粒度')}
+            name='data_export_default_time'
+            size='large'
+            optionList={[
+              { label: t('小时'), value: 'hour' },
+              { label: t('天'), value: 'day' },
+              { label: t('周'), value: 'week' },
+            ]}
+            onChange={(value) => handleInputChange(value, 'data_export_default_time')}
+          />
+          {isAdminUser && (
+            <Form.Input
+              field='username'
+              label={t('用户名称')}
+              className="w-full mb-2 !rounded-lg"
+              value={username}
+              placeholder={t('可选值')}
+              name='username'
+              size='large'
+              onChange={(value) => handleInputChange(value, 'username')}
+            />
+          )}
+        </Form>
+      </Modal>
+
+      <Spin spinning={loading}>
+        <div className="mb-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {statsData.map((stat, idx) => (
+              <Card
+                key={idx}
+                shadows='hover'
+                className={`${stat.color} border-0 !rounded-2xl w-full`}
+                headerLine={false}
+                onClick={stat.onClick}
               >
-                {t('查询')}
-              </Button>
-              <Form.Section></Form.Section>
-            </>
-          </Form>
-          <Spin spinning={loading}>
-            <Row
-              gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}
-              style={{ marginTop: 20 }}
-              type='flex'
-              justify='space-between'
-            >
-              <Col span={styleState.isMobile ? 24 : 8}>
-                <Card className='panel-desc-card'>
-                  <Descriptions row size='small'>
-                    <Descriptions.Item itemKey={t('当前余额')}>
-                      {renderQuota(userState?.user?.quota)}
-                    </Descriptions.Item>
-                    <Descriptions.Item itemKey={t('历史消耗')}>
-                      {renderQuota(userState?.user?.used_quota)}
-                    </Descriptions.Item>
-                    <Descriptions.Item itemKey={t('请求次数')}>
-                      {userState.user?.request_count}
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Card>
-              </Col>
-              <Col span={styleState.isMobile ? 24 : 8}>
-                <Card>
-                  <Descriptions row size='small'>
-                    <Descriptions.Item itemKey={t('统计额度')}>
-                      {renderQuota(consumeQuota)}
-                    </Descriptions.Item>
-                    <Descriptions.Item itemKey={t('统计Tokens')}>
-                      {consumeTokens}
-                    </Descriptions.Item>
-                    <Descriptions.Item itemKey={t('统计次数')}>
-                      {times}
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Card>
-              </Col>
-              <Col span={styleState.isMobile ? 24 : 8}>
-                <Card>
-                  <Descriptions row size='small'>
-                    <Descriptions.Item itemKey={t('平均RPM')}>
-                      {(
-                        times /
-                        ((Date.parse(end_timestamp) -
-                          Date.parse(start_timestamp)) /
-                          60000)
-                      ).toFixed(3)}
-                    </Descriptions.Item>
-                    <Descriptions.Item itemKey={t('平均TPM')}>
-                      {(
-                        consumeTokens /
-                        ((Date.parse(end_timestamp) -
-                          Date.parse(start_timestamp)) /
-                          60000)
-                      ).toFixed(3)}
-                    </Descriptions.Item>
-                  </Descriptions>
-                </Card>
-              </Col>
-            </Row>
-            <Card style={{ marginTop: 20 }}>
-              <Tabs type='line' defaultActiveKey='1'>
-                <Tabs.TabPane tab={t('消耗分布')} itemKey='1'>
-                  <div style={{ height: 500 }}>
-                    <VChart
-                      spec={spec_line}
-                      option={{ mode: 'desktop-browser' }}
-                    />
+                <div className="flex items-center">
+                  <Avatar
+                    className="mr-3"
+                    size="medium"
+                    color={stat.avatarColor}
+                  >
+                    {stat.icon}
+                  </Avatar>
+                  <div>
+                    <div className="text-sm text-gray-500">{stat.title}</div>
+                    <div className="text-xl font-semibold">{stat.value}</div>
                   </div>
-                </Tabs.TabPane>
-                <Tabs.TabPane tab={t('调用次数分布')} itemKey='2'>
-                  <div style={{ height: 500 }}>
-                    <VChart
-                      spec={spec_pie}
-                      option={{ mode: 'desktop-browser' }}
-                    />
-                  </div>
-                </Tabs.TabPane>
-              </Tabs>
-            </Card>
-          </Spin>
-        </Layout.Content>
-      </Layout>
-    </>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+          <Card shadows='hover' className="shadow-sm !rounded-2xl" headerLine={true} title={t('模型消耗分布')}>
+            <div style={{ height: 400 }}>
+              <VChart
+                spec={spec_line}
+                option={{ mode: 'desktop-browser' }}
+              />
+            </div>
+          </Card>
+
+          <Card shadows='hover' className="shadow-sm !rounded-2xl" headerLine={true} title={t('模型调用次数占比')}>
+            <div style={{ height: 400 }}>
+              <VChart
+                spec={spec_pie}
+                option={{ mode: 'desktop-browser' }}
+              />
+            </div>
+          </Card>
+        </div>
+      </Spin>
+    </div>
   );
 };
 

web/src/pages/Home/index.js

@@ -1,32 +1,33 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Card, Col, Row } from '@douyinfe/semi-ui';
-import { API, showError, showNotice, timestamp2string } from '../../helpers';
+import { Button, Typography, Tag } from '@douyinfe/semi-ui';
+import { API, showError, isMobile } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
-import { StyleContext } from '../../context/Style/index.js';
 import { useTranslation } from 'react-i18next';
+import { IconGithubLogo } from '@douyinfe/semi-icons';
+import exampleImage from '../../images/example.png';
+import { Link } from 'react-router-dom';
+import NoticeModal from '../../components/NoticeModal';
+import { Moonshot, OpenAI, XAI, Zhipu, Volcengine, Cohere, Claude, Gemini, Suno, Minimax, Wenxin, Spark, Qingyan, DeepSeek, Qwen, Midjourney, Grok, AzureAI, Hunyuan, Xinference } from '@lobehub/icons';
+
+const { Text } = Typography;
 
 const Home = () => {
   const { t, i18n } = useTranslation();
   const [statusState] = useContext(StatusContext);
   const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
   const [homePageContent, setHomePageContent] = useState('');
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const [noticeVisible, setNoticeVisible] = useState(false);
 
-  const displayNotice = async () => {
-    const res = await API.get('/api/notice');
-    const { success, message, data } = res.data;
-    if (success) {
-      let oldNotice = localStorage.getItem('notice');
-      if (data !== oldNotice && data !== '') {
-        const htmlNotice = marked(data);
-        showNotice(htmlNotice, true);
-        localStorage.setItem('notice', data);
-      }
-    } else {
-      showError(message);
+  const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
+
+  useEffect(() => {
+    const lastCloseDate = localStorage.getItem('notice_close_date');
+    const today = new Date().toDateString();
+    if (lastCloseDate !== today) {
+      setNoticeVisible(true);
     }
-  };
+  }, []);
 
   const displayHomePageContent = async () => {
     setHomePageContent(localStorage.getItem('home_page_content') || '');
@@ -45,8 +46,6 @@ const Home = () => {
         const iframe = document.querySelector('iframe');
         if (iframe) {
           const theme = localStorage.getItem('theme-mode') || 'light';
-          // 测试是否正确传递theme-mode给iframe
-          // console.log('Sending theme-mode to iframe:', theme);
           iframe.onload = () => {
             iframe.contentWindow.postMessage({ themeMode: theme }, '*');
             iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
@@ -60,153 +59,165 @@ const Home = () => {
     setHomePageContentLoaded(true);
   };
 
-  const getStartTimeString = () => {
-    const timestamp = statusState?.status?.start_time;
-    return statusState.status ? timestamp2string(timestamp) : '';
-  };
-
   useEffect(() => {
-    displayNotice().then();
     displayHomePageContent().then();
   }, []);
 
   return (
-    <>
+    <div className="w-full overflow-x-hidden">
+      <NoticeModal
+        visible={noticeVisible}
+        onClose={() => setNoticeVisible(false)}
+        isMobile={isMobile()}
+      />
       {homePageContentLoaded && homePageContent === '' ? (
-        <>
-          <Card
-            bordered={false}
-            headerLine={false}
-            title={t('系统状况')}
-            bodyStyle={{ padding: '10px 20px' }}
-          >
-            <Row gutter={16}>
-              <Col span={12}>
-                <Card
-                  title={t('系统信息')}
-                  headerExtraContent={
-                    <span
-                      style={{
-                        fontSize: '12px',
-                        color: 'var(--semi-color-text-1)',
-                      }}
+        <div className="w-full overflow-x-hidden">
+          {/* Banner 部分 */}
+          <div className="w-full border-b border-semi-color-border min-h-[500px] md:h-[650px] lg:h-[750px] relative overflow-x-hidden">
+            <div className="flex flex-col md:flex-row items-center justify-center h-full px-4 py-8 md:py-0">
+              {/* 左侧内容区 */}
+              <div className="flex-shrink-0 w-full md:w-[480px] md:mr-[60px] lg:mr-[120px] mb-8 md:mb-0">
+                <div className="flex items-center gap-2 justify-center md:justify-start">
+                  <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold text-semi-color-text-0 w-auto leading-normal md:leading-[67px]">
+                    {statusState?.status?.system_name}
+                  </h1>
+                  {statusState?.status?.version && (
+                    <Tag color='light-blue' size='large' shape='circle' className="ml-1">
+                      {statusState.status.version}
+                    </Tag>
+                  )}
+                </div>
+                <p className="text-base md:text-lg text-semi-color-text-0 mt-4 md:mt-8 w-full md:w-[480px] leading-7 md:leading-8 text-center md:text-left">
+                  {t('新一代大模型网关与AI资产管理系统，一键接入主流大模型，轻松管理您的AI资产')}
+                </p>
+
+                {/* 操作按钮 */}
+                <div className="mt-6 md:mt-10 flex flex-wrap gap-4 justify-center md:justify-start">
+                  <Link to="/console">
+                    <Button theme="solid" type="primary" size="large" className="!rounded-3xl">
+                      {t('开始使用')}
+                    </Button>
+                  </Link>
+                  {isDemoSiteMode && (
+                    <Button
+                      size="large"
+                      className="flex items-center !rounded-3xl"
+                      icon={<IconGithubLogo />}
+                      onClick={() => window.open('https://github.com/QuantumNous/new-api', '_blank')}
                     >
-                      {t('系统信息总览')}
-                    </span>
-                  }
-                >
-                  <p>
-                    {t('名称')}：{statusState?.status?.system_name}
-                  </p>
-                  <p>
-                    {t('版本')}：
-                    {statusState?.status?.version
-                      ? statusState?.status?.version
-                      : 'unknown'}
-                  </p>
-                  <p>
-                    {t('源码')}：
-                    <a
-                      href='https://github.com/Calcium-Ion/new-api'
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      https://github.com/Calcium-Ion/new-api
-                    </a>
-                  </p>
-                  
-                  <p>
-                    {t('协议')}：
-                    <a
-                      href='https://www.apache.org/licenses/LICENSE-2.0'
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      Apache-2.0 License
-                    </a>
-                  </p>
-                  <p>
-                    {t('启动时间')}：{getStartTimeString()}
-                  </p>
-                </Card>
-              </Col>
-              <Col span={12}>
-                <Card
-                  title={t('系统配置')}
-                  headerExtraContent={
-                    <span
-                      style={{
-                        fontSize: '12px',
-                        color: 'var(--semi-color-text-1)',
-                      }}
-                    >
-                      {t('系统配置总览')}
-                    </span>
-                  }
-                >
-                  <p>
-                    {t('邮箱验证')}：
-                    {statusState?.status?.email_verification === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('GitHub 身份验证')}：
-                    {statusState?.status?.github_oauth === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('OIDC 身份验证')}：
-                    {statusState?.status?.oidc === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('微信身份验证')}：
-                    {statusState?.status?.wechat_login === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('Turnstile 用户校验')}：
-                    {statusState?.status?.turnstile_check === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('Telegram 身份验证')}：
-                    {statusState?.status?.telegram_oauth === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                  <p>
-                    {t('Linux DO 身份验证')}：
-                    {statusState?.status?.linuxdo_oauth === true
-                      ? t('已启用')
-                      : t('未启用')}
-                  </p>
-                </Card>
-              </Col>
-            </Row>
-          </Card>
-        </>
+                      GitHub
+                    </Button>
+                  )}
+                </div>
+
+                {/* 框架兼容性图标 */}
+                <div className="mt-8 md:mt-16">
+                  <div className="flex items-center mb-3 justify-center md:justify-start">
+                    <Text type="tertiary" className="text-lg md:text-xl font-light">
+                      {t('支持众多的大模型供应商')}
+                    </Text>
+                  </div>
+                  <div className="flex flex-wrap items-center relative mt-6 md:mt-8 gap-6 md:gap-8 justify-center md:justify-start">
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Moonshot size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <OpenAI size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <XAI size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Zhipu.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Volcengine.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Cohere.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Claude.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Gemini.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Suno size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Minimax.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Wenxin.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Spark.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Qingyan.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <DeepSeek.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Qwen.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Midjourney size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Grok size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <AzureAI.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Hunyuan.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Xinference.Color size={40} />
+                    </div>
+                    <div className="relative w-8 md:w-10 h-8 md:h-10 flex items-center justify-center">
+                      <Typography.Text className="!text-2xl font-bold">30+</Typography.Text>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* 右侧图片区域 - 在小屏幕上隐藏或调整位置 */}
+              <div className="flex-shrink-0 relative md:mr-[-200px] lg:mr-[-400px] hidden md:block lg:min-w-[1100px]">
+                <div className="absolute w-[320px] md:w-[500px] lg:w-[640px] h-[320px] md:h-[500px] lg:h-[640px] left-[-25px] md:left-[-40px] lg:left-[-50px] top-[-10px] md:top-[-15px] lg:top-[-20px] opacity-60"
+                  style={{ filter: 'blur(120px)' }}>
+                  <div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] top-[80px] md:top-[100px] lg:top-[132px] bg-semi-color-primary rounded-full opacity-30"></div>
+                  <div className="absolute w-[320px] md:w-[400px] lg:w-[474px] h-[320px] md:h-[400px] lg:h-[474px] left-[80px] md:left-[120px] lg:left-[166px] bg-semi-color-tertiary rounded-full opacity-30"></div>
+                </div>
+
+                <img
+                  src={exampleImage}
+                  alt="application demo"
+                  className="relative h-[400px] md:h-[600px] lg:h-[721px] ml-[-15px] md:ml-[-20px] lg:ml-[-30px] mt-[-15px] md:mt-[-20px] lg:mt-[-30px]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       ) : (
-        <>
+        <div className="overflow-x-hidden w-full">
           {homePageContent.startsWith('https://') ? (
             <iframe
               src={homePageContent}
-              style={{ width: '100%', height: '100vh', border: 'none' }}
+              className="w-full h-screen border-none"
             />
           ) : (
             <div
-              style={{ fontSize: 'larger' }}
+              className="text-base md:text-lg p-4 md:p-6 overflow-x-hidden"
               dangerouslySetInnerHTML={{ __html: homePageContent }}
             ></div>
           )}
-        </>
+        </div>
       )}
-    </>
+    </div>
   );
 };
 

web/src/pages/NotFound/index.js

@@ -1,13 +1,19 @@
 import React from 'react';
-import { Message } from 'semantic-ui-react';
+import { Empty } from '@douyinfe/semi-ui';
+import { IllustrationNotFound, IllustrationNotFoundDark } from '@douyinfe/semi-illustrations';
+import { useTranslation } from 'react-i18next';
 
-const NotFound = () => (
-  <>
-    <Message negative>
-      <Message.Header>页面不存在</Message.Header>
-      <p>请检查你的浏览器地址是否正确</p>
-    </Message>
-  </>
-);
+const NotFound = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex justify-center items-center h-screen p-8">
+      <Empty
+        image={<IllustrationNotFound style={{ width: 250, height: 250 }} />}
+        darkModeImage={<IllustrationNotFoundDark style={{ width: 250, height: 250 }} />}
+        description={t('页面未找到，请检查您的浏览器地址是否正确')}
+      />
+    </div>
+  );
+};
 
 export default NotFound;

web/src/pages/Playground/Playground.js

@@ -1,465 +0,0 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { UserContext } from '../../context/User/index.js';
-import {
-  API,
-  getUserIdFromLocalStorage,
-  showError,
-} from '../../helpers/index.js';
-import {
-  Card,
-  Chat,
-  Input,
-  Layout,
-  Select,
-  Slider,
-  TextArea,
-  Typography,
-  Button,
-  Highlight,
-} from '@douyinfe/semi-ui';
-import { SSE } from 'sse';
-import { IconSetting } from '@douyinfe/semi-icons';
-import { StyleContext } from '../../context/Style/index.js';
-import { useTranslation } from 'react-i18next';
-import { renderGroupOption, truncateText } from '../../helpers/render.js';
-
-const roleInfo = {
-  user: {
-    name: 'User',
-    avatar:
-      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
-  },
-  assistant: {
-    name: 'Assistant',
-    avatar: 'logo.png',
-  },
-  system: {
-    name: 'System',
-    avatar:
-      'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
-  },
-};
-
-let id = 4;
-function getId() {
-  return `${id++}`;
-}
-
-const Playground = () => {
-  const { t } = useTranslation();
-
-  const defaultMessage = [
-    {
-      role: 'user',
-      id: '2',
-      createAt: 1715676751919,
-      content: t('你好'),
-    },
-    {
-      role: 'assistant',
-      id: '3',
-      createAt: 1715676751919,
-      content: t('你好，请问有什么可以帮助您的吗？'),
-    },
-  ];
-
-  const [inputs, setInputs] = useState({
-    model: 'gpt-4o-mini',
-    group: '',
-    max_tokens: 0,
-    temperature: 0,
-  });
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [userState, userDispatch] = useContext(UserContext);
-  const [status, setStatus] = useState({});
-  const [systemPrompt, setSystemPrompt] = useState(
-    'You are a helpful assistant. You can help me by answering my questions. You can also ask me questions.',
-  );
-  const [message, setMessage] = useState(defaultMessage);
-  const [models, setModels] = useState([]);
-  const [groups, setGroups] = useState([]);
-  const [showSettings, setShowSettings] = useState(true);
-  const [styleState, styleDispatch] = useContext(StyleContext);
-
-  const handleInputChange = (name, value) => {
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-  };
-
-  useEffect(() => {
-    if (searchParams.get('expired')) {
-      showError(t('未登录或登录已过期，请重新登录！'));
-    }
-    let status = localStorage.getItem('status');
-    if (status) {
-      status = JSON.parse(status);
-      setStatus(status);
-    }
-    loadModels();
-    loadGroups();
-  }, []);
-
-  const loadModels = async () => {
-    let res = await API.get(`/api/user/models`);
-    const { success, message, data } = res.data;
-    if (success) {
-      let localModelOptions = data.map((model) => ({
-        label: model,
-        value: model,
-      }));
-      setModels(localModelOptions);
-    } else {
-      showError(t(message));
-    }
-  };
-
-  const loadGroups = async () => {
-    let res = await API.get(`/api/user/self/groups`);
-    const { success, message, data } = res.data;
-    if (success) {
-      let localGroupOptions = Object.entries(data).map(([group, info]) => ({
-        label: truncateText(info.desc, '50%'),
-        value: group,
-        ratio: info.ratio,
-        fullLabel: info.desc, // 保存完整文本用于tooltip
-      }));
-
-      if (localGroupOptions.length === 0) {
-        localGroupOptions = [
-          {
-            label: t('用户分组'),
-            value: '',
-            ratio: 1,
-          },
-        ];
-      } else {
-        const localUser = JSON.parse(localStorage.getItem('user'));
-        const userGroup =
-          (userState.user && userState.user.group) ||
-          (localUser && localUser.group);
-
-        if (userGroup) {
-          const userGroupIndex = localGroupOptions.findIndex(
-            (g) => g.value === userGroup,
-          );
-          if (userGroupIndex > -1) {
-            const userGroupOption = localGroupOptions.splice(
-              userGroupIndex,
-              1,
-            )[0];
-            localGroupOptions.unshift(userGroupOption);
-          }
-        }
-      }
-
-      setGroups(localGroupOptions);
-      handleInputChange('group', localGroupOptions[0].value);
-    } else {
-      showError(t(message));
-    }
-  };
-
-  const commonOuterStyle = {
-    border: '1px solid var(--semi-color-border)',
-    borderRadius: '16px',
-    margin: '0px 8px',
-  };
-
-  const getSystemMessage = () => {
-    if (systemPrompt !== '') {
-      return {
-        role: 'system',
-        id: '1',
-        createAt: 1715676751919,
-        content: systemPrompt,
-      };
-    }
-  };
-
-  let handleSSE = (payload) => {
-    let source = new SSE('/pg/chat/completions', {
-      headers: {
-        'Content-Type': 'application/json',
-        'New-Api-User': getUserIdFromLocalStorage(),
-      },
-      method: 'POST',
-      payload: JSON.stringify(payload),
-    });
-    source.addEventListener('message', (e) => {
-      // 只有收到 [DONE] 时才结束
-      if (e.data === '[DONE]') {
-        source.close();
-        completeMessage();
-        return;
-      }
-
-      let payload = JSON.parse(e.data);
-      // 检查是否有 delta content
-      if (payload.choices?.[0]?.delta?.content) {
-        generateMockResponse(payload.choices[0].delta.content);
-      }
-    });
-
-    source.addEventListener('error', (e) => {
-      generateMockResponse(e.data);
-      completeMessage('error');
-    });
-
-    source.addEventListener('readystatechange', (e) => {
-      if (e.readyState >= 2) {
-        if (source.status === undefined) {
-          source.close();
-          completeMessage();
-        }
-      }
-    });
-    source.stream();
-  };
-
-  const onMessageSend = useCallback(
-    (content, attachment) => {
-      console.log('attachment: ', attachment);
-      setMessage((prevMessage) => {
-        const newMessage = [
-          ...prevMessage,
-          {
-            role: 'user',
-            content: content,
-            createAt: Date.now(),
-            id: getId(),
-          },
-        ];
-
-        // 将 getPayload 移到这里
-        const getPayload = () => {
-          let systemMessage = getSystemMessage();
-          let messages = newMessage.map((item) => {
-            return {
-              role: item.role,
-              content: item.content,
-            };
-          });
-          if (systemMessage) {
-            messages.unshift(systemMessage);
-          }
-          return {
-            messages: messages,
-            stream: true,
-            model: inputs.model,
-            group: inputs.group,
-            max_tokens: parseInt(inputs.max_tokens),
-            temperature: inputs.temperature,
-          };
-        };
-
-        // 使用更新后的消息状态调用 handleSSE
-        handleSSE(getPayload());
-        newMessage.push({
-          role: 'assistant',
-          content: '',
-          createAt: Date.now(),
-          id: getId(),
-          status: 'loading',
-        });
-        return newMessage;
-      });
-    },
-    [getSystemMessage],
-  );
-
-  const completeMessage = useCallback((status = 'complete') => {
-    // console.log("Complete Message: ", status)
-    setMessage((prevMessage) => {
-      const lastMessage = prevMessage[prevMessage.length - 1];
-      // only change the status if the last message is not complete and not error
-      if (lastMessage.status === 'complete' || lastMessage.status === 'error') {
-        return prevMessage;
-      }
-      return [...prevMessage.slice(0, -1), { ...lastMessage, status: status }];
-    });
-  }, []);
-
-  const generateMockResponse = useCallback((content) => {
-    // console.log("Generate Mock Response: ", content);
-    setMessage((message) => {
-      const lastMessage = message[message.length - 1];
-      let newMessage = { ...lastMessage };
-      if (
-        lastMessage.status === 'loading' ||
-        lastMessage.status === 'incomplete'
-      ) {
-        newMessage = {
-          ...newMessage,
-          content: (lastMessage.content || '') + content,
-          status: 'incomplete',
-        };
-      }
-      return [...message.slice(0, -1), newMessage];
-    });
-  }, []);
-
-  const SettingsToggle = () => {
-    if (!styleState.isMobile) return null;
-    return (
-      <Button
-        icon={<IconSetting />}
-        style={{
-          position: 'absolute',
-          left: showSettings ? -10 : -20,
-          top: '50%',
-          transform: 'translateY(-50%)',
-          zIndex: 1000,
-          width: 40,
-          height: 40,
-          borderRadius: '0 20px 20px 0',
-          padding: 0,
-          boxShadow: '2px 0 8px rgba(0, 0, 0, 0.15)',
-        }}
-        onClick={() => setShowSettings(!showSettings)}
-        theme='solid'
-        type='primary'
-      />
-    );
-  };
-
-  function CustomInputRender(props) {
-    const { detailProps } = props;
-    const { clearContextNode, uploadNode, inputNode, sendNode, onClick } =
-      detailProps;
-
-    return (
-      <div
-        style={{
-          margin: '8px 16px',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'flex-end',
-          borderRadius: 16,
-          padding: 10,
-          border: '1px solid var(--semi-color-border)',
-        }}
-        onClick={onClick}
-      >
-        {/*{uploadNode}*/}
-        {inputNode}
-        {sendNode}
-      </div>
-    );
-  }
-
-  const renderInputArea = useCallback((props) => {
-    return <CustomInputRender {...props} />;
-  }, []);
-
-  return (
-    <Layout style={{ height: '100%' }}>
-      {(showSettings || !styleState.isMobile) && (
-        <Layout.Sider
-          style={{ display: styleState.isMobile ? 'block' : 'initial' }}
-        >
-          <Card style={commonOuterStyle}>
-            <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>{t('分组')}：</Typography.Text>
-            </div>
-            <Select
-              placeholder={t('请选择分组')}
-              name='group'
-              required
-              selection
-              onChange={(value) => {
-                handleInputChange('group', value);
-              }}
-              value={inputs.group}
-              autoComplete='new-password'
-              optionList={groups}
-              renderOptionItem={renderGroupOption}
-              style={{ width: '100%' }}
-            />
-            <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>{t('模型')}：</Typography.Text>
-            </div>
-            <Select
-              placeholder={t('请选择模型')}
-              name='model'
-              required
-              selection
-              searchPosition='dropdown'
-              filter
-              onChange={(value) => {
-                handleInputChange('model', value);
-              }}
-              value={inputs.model}
-              autoComplete='new-password'
-              optionList={models}
-            />
-            <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>Temperature：</Typography.Text>
-            </div>
-            <Slider
-              step={0.1}
-              min={0.1}
-              max={1}
-              value={inputs.temperature}
-              onChange={(value) => {
-                handleInputChange('temperature', value);
-              }}
-            />
-            <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>MaxTokens：</Typography.Text>
-            </div>
-            <Input
-              placeholder='MaxTokens'
-              name='max_tokens'
-              required
-              autoComplete='new-password'
-              defaultValue={0}
-              value={inputs.max_tokens}
-              onChange={(value) => {
-                handleInputChange('max_tokens', value);
-              }}
-            />
-
-            <div style={{ marginTop: 10 }}>
-              <Typography.Text strong>System：</Typography.Text>
-            </div>
-            <TextArea
-              placeholder='System Prompt'
-              name='system'
-              required
-              autoComplete='new-password'
-              autosize
-              defaultValue={systemPrompt}
-              // value={systemPrompt}
-              onChange={(value) => {
-                setSystemPrompt(value);
-              }}
-            />
-          </Card>
-        </Layout.Sider>
-      )}
-      <Layout.Content>
-        <div style={{ height: '100%', position: 'relative' }}>
-          <SettingsToggle />
-          <Chat
-            chatBoxRenderConfig={{
-              renderChatBoxAction: () => {
-                return <div></div>;
-              },
-            }}
-            renderInputArea={renderInputArea}
-            roleConfig={roleInfo}
-            style={commonOuterStyle}
-            chats={message}
-            onMessageSend={onMessageSend}
-            showClearContext
-            onClear={() => {
-              setMessage([]);
-            }}
-          />
-        </div>
-      </Layout.Content>
-    </Layout>
-  );
-};
-
-export default Playground;

web/src/pages/Playground/index.js

@@ -0,0 +1,490 @@
+import React, { useContext, useEffect, useCallback, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Layout, Toast, Modal } from '@douyinfe/semi-ui';
+
+// Context
+import { UserContext } from '../../context/User/index.js';
+import { useStyle, styleActions } from '../../context/Style/index.js';
+
+// Utils and hooks
+import { getLogo } from '../../helpers/index.js';
+import { stringToColor } from '../../helpers/render.js';
+import { usePlaygroundState } from '../../hooks/usePlaygroundState.js';
+import { useMessageActions } from '../../hooks/useMessageActions.js';
+import { useApiRequest } from '../../hooks/useApiRequest.js';
+import { useSyncMessageAndCustomBody } from '../../hooks/useSyncMessageAndCustomBody.js';
+import { useMessageEdit } from '../../hooks/useMessageEdit.js';
+import { useDataLoader } from '../../hooks/useDataLoader.js';
+
+// Constants and utils
+import {
+  DEFAULT_MESSAGES,
+  MESSAGE_ROLES,
+  ERROR_MESSAGES
+} from '../../utils/constants.js';
+import {
+  buildMessageContent,
+  createMessage,
+  createLoadingAssistantMessage,
+  getTextContent,
+  buildApiPayload
+} from '../../utils/messageUtils.js';
+
+// Components
+import {
+  OptimizedSettingsPanel,
+  OptimizedDebugPanel,
+  OptimizedMessageContent,
+  OptimizedMessageActions
+} from '../../components/playground/OptimizedComponents.js';
+import ChatArea from '../../components/playground/ChatArea.js';
+import FloatingButtons from '../../components/playground/FloatingButtons.js';
+
+// 生成头像
+const generateAvatarDataUrl = (username) => {
+  if (!username) {
+    return 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png';
+  }
+  const firstLetter = username[0].toUpperCase();
+  const bgColor = stringToColor(username);
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      <circle cx="16" cy="16" r="16" fill="${bgColor}" />
+      <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="16" fill="#ffffff" font-family="sans-serif">${firstLetter}</text>
+    </svg>
+  `;
+  return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+
+const Playground = () => {
+  const { t } = useTranslation();
+  const [userState] = useContext(UserContext);
+  const { state: styleState, dispatch: styleDispatch } = useStyle();
+  const [searchParams] = useSearchParams();
+
+  const state = usePlaygroundState();
+  const {
+    inputs,
+    parameterEnabled,
+    showDebugPanel,
+    customRequestMode,
+    customRequestBody,
+    showSettings,
+    models,
+    groups,
+    status,
+    message,
+    debugData,
+    activeDebugTab,
+    previewPayload,
+    sseSourceRef,
+    chatRef,
+    handleInputChange,
+    handleParameterToggle,
+    debouncedSaveConfig,
+    saveMessagesImmediately,
+    handleConfigImport,
+    handleConfigReset,
+    setShowSettings,
+    setModels,
+    setGroups,
+    setStatus,
+    setMessage,
+    setDebugData,
+    setActiveDebugTab,
+    setPreviewPayload,
+    setShowDebugPanel,
+    setCustomRequestMode,
+    setCustomRequestBody,
+  } = state;
+
+  // API 请求相关
+  const { sendRequest, onStopGenerator } = useApiRequest(
+    setMessage,
+    setDebugData,
+    setActiveDebugTab,
+    sseSourceRef,
+    saveMessagesImmediately
+  );
+
+  // 数据加载
+  useDataLoader(userState, inputs, handleInputChange, setModels, setGroups);
+
+  // 消息编辑
+  const {
+    editingMessageId,
+    editValue,
+    setEditValue,
+    handleMessageEdit,
+    handleEditSave,
+    handleEditCancel
+  } = useMessageEdit(setMessage, inputs, parameterEnabled, sendRequest, saveMessagesImmediately);
+
+  // 消息和自定义请求体同步
+  const { syncMessageToCustomBody, syncCustomBodyToMessage } = useSyncMessageAndCustomBody(
+    customRequestMode,
+    customRequestBody,
+    message,
+    inputs,
+    setCustomRequestBody,
+    setMessage,
+    debouncedSaveConfig
+  );
+
+  // 角色信息
+  const roleInfo = {
+    user: {
+      name: userState?.user?.username || 'User',
+      avatar: generateAvatarDataUrl(userState?.user?.username),
+    },
+    assistant: {
+      name: 'Assistant',
+      avatar: getLogo(),
+    },
+    system: {
+      name: 'System',
+      avatar: getLogo(),
+    },
+  };
+
+  // 消息操作
+  const messageActions = useMessageActions(message, setMessage, onMessageSend, saveMessagesImmediately);
+
+  // 构建预览请求体
+  const constructPreviewPayload = useCallback(() => {
+    try {
+      // 如果是自定义请求体模式且有自定义内容，直接返回解析后的自定义请求体
+      if (customRequestMode && customRequestBody && customRequestBody.trim()) {
+        try {
+          return JSON.parse(customRequestBody);
+        } catch (parseError) {
+          console.warn('自定义请求体JSON解析失败，回退到默认预览:', parseError);
+        }
+      }
+
+      // 默认预览逻辑
+      let messages = [...message];
+
+      // 如果存在用户消息
+      if (!(messages.length === 0 || messages.every(msg => msg.role !== MESSAGE_ROLES.USER))) {
+        // 处理最后一个用户消息的图片
+        for (let i = messages.length - 1; i >= 0; i--) {
+          if (messages[i].role === MESSAGE_ROLES.USER) {
+            if (inputs.imageEnabled && inputs.imageUrls) {
+              const validImageUrls = inputs.imageUrls.filter(url => url.trim() !== '');
+              if (validImageUrls.length > 0) {
+                const textContent = getTextContent(messages[i]) || '示例消息';
+                const content = buildMessageContent(textContent, validImageUrls, true);
+                messages[i] = { ...messages[i], content };
+              }
+            }
+            break;
+          }
+        }
+      }
+
+      return buildApiPayload(messages, null, inputs, parameterEnabled);
+    } catch (error) {
+      console.error('构造预览请求体失败:', error);
+      return null;
+    }
+  }, [inputs, parameterEnabled, message, customRequestMode, customRequestBody]);
+
+  // 发送消息
+  function onMessageSend(content, attachment) {
+    console.log('attachment: ', attachment);
+
+    // 创建用户消息和加载消息
+    const userMessage = createMessage(MESSAGE_ROLES.USER, content);
+    const loadingMessage = createLoadingAssistantMessage();
+
+    // 如果是自定义请求体模式
+    if (customRequestMode && customRequestBody) {
+      try {
+        const customPayload = JSON.parse(customRequestBody);
+
+        setMessage(prevMessage => {
+          const newMessages = [...prevMessage, userMessage, loadingMessage];
+
+          // 发送自定义请求体
+          sendRequest(customPayload, customPayload.stream !== false);
+
+          // 发送消息后保存，传入新消息列表
+          setTimeout(() => saveMessagesImmediately(newMessages), 0);
+
+          return newMessages;
+        });
+        return;
+      } catch (error) {
+        console.error('自定义请求体JSON解析失败:', error);
+        Toast.error(ERROR_MESSAGES.JSON_PARSE_ERROR);
+        return;
+      }
+    }
+
+    // 默认模式
+    const validImageUrls = inputs.imageUrls.filter(url => url.trim() !== '');
+    const messageContent = buildMessageContent(content, validImageUrls, inputs.imageEnabled);
+    const userMessageWithImages = createMessage(MESSAGE_ROLES.USER, messageContent);
+
+    setMessage(prevMessage => {
+      const newMessages = [...prevMessage, userMessageWithImages];
+
+      const payload = buildApiPayload(newMessages, null, inputs, parameterEnabled);
+      sendRequest(payload, inputs.stream);
+
+      // 禁用图片模式
+      if (inputs.imageEnabled) {
+        setTimeout(() => {
+          handleInputChange('imageEnabled', false);
+        }, 100);
+      }
+
+      // 发送消息后保存，传入新消息列表（包含用户消息和加载消息）
+      const messagesWithLoading = [...newMessages, loadingMessage];
+      setTimeout(() => saveMessagesImmediately(messagesWithLoading), 0);
+
+      return messagesWithLoading;
+    });
+  }
+
+  // 切换推理展开状态
+  const toggleReasoningExpansion = useCallback((messageId) => {
+    setMessage(prevMessages =>
+      prevMessages.map(msg =>
+        msg.id === messageId && msg.role === MESSAGE_ROLES.ASSISTANT
+          ? { ...msg, isReasoningExpanded: !msg.isReasoningExpanded }
+          : msg
+      )
+    );
+  }, [setMessage]);
+
+  // 渲染函数
+  const renderCustomChatContent = useCallback(
+    ({ message, className }) => {
+      const isCurrentlyEditing = editingMessageId === message.id;
+
+      return (
+        <OptimizedMessageContent
+          message={message}
+          className={className}
+          styleState={styleState}
+          onToggleReasoningExpansion={toggleReasoningExpansion}
+          isEditing={isCurrentlyEditing}
+          onEditSave={handleEditSave}
+          onEditCancel={handleEditCancel}
+          editValue={editValue}
+          onEditValueChange={setEditValue}
+        />
+      );
+    },
+    [styleState, editingMessageId, editValue, handleEditSave, handleEditCancel, setEditValue, toggleReasoningExpansion],
+  );
+
+  const renderChatBoxAction = useCallback((props) => {
+    const { message: currentMessage } = props;
+    const isAnyMessageGenerating = message.some(msg =>
+      msg.status === 'loading' || msg.status === 'incomplete'
+    );
+    const isCurrentlyEditing = editingMessageId === currentMessage.id;
+
+    return (
+      <OptimizedMessageActions
+        message={currentMessage}
+        styleState={styleState}
+        onMessageReset={messageActions.handleMessageReset}
+        onMessageCopy={messageActions.handleMessageCopy}
+        onMessageDelete={messageActions.handleMessageDelete}
+        onRoleToggle={messageActions.handleRoleToggle}
+        onMessageEdit={handleMessageEdit}
+        isAnyMessageGenerating={isAnyMessageGenerating}
+        isEditing={isCurrentlyEditing}
+      />
+    );
+  }, [messageActions, styleState, message, editingMessageId, handleMessageEdit]);
+
+  // Effects
+
+  // 同步消息和自定义请求体
+  useEffect(() => {
+    syncMessageToCustomBody();
+  }, [message, syncMessageToCustomBody]);
+
+  useEffect(() => {
+    syncCustomBodyToMessage();
+  }, [customRequestBody, syncCustomBodyToMessage]);
+
+  // 处理URL参数
+  useEffect(() => {
+    if (searchParams.get('expired')) {
+      Toast.warning(t('登录过期，请重新登录！'));
+    }
+  }, [searchParams, t]);
+
+  // 处理窗口大小变化
+  useEffect(() => {
+    const handleResize = () => {
+      const mobile = window.innerWidth < 768;
+      if (styleState.isMobile !== mobile) {
+        styleDispatch(styleActions.setMobile(mobile));
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [styleState.isMobile, styleDispatch]);
+
+  // 构建预览payload
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const preview = constructPreviewPayload();
+      setPreviewPayload(preview);
+      setDebugData(prev => ({
+        ...prev,
+        previewRequest: preview ? JSON.stringify(preview, null, 2) : null,
+        previewTimestamp: preview ? new Date().toISOString() : null
+      }));
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [message, inputs, parameterEnabled, customRequestMode, customRequestBody, constructPreviewPayload, setPreviewPayload, setDebugData]);
+
+  // 自动保存配置
+  useEffect(() => {
+    debouncedSaveConfig();
+  }, [inputs, parameterEnabled, showDebugPanel, customRequestMode, customRequestBody, debouncedSaveConfig]);
+
+  // 清空对话的处理函数
+  const handleClearMessages = useCallback(() => {
+    setMessage([]);
+    // 清空对话后保存，传入空数组
+    setTimeout(() => saveMessagesImmediately([]), 0);
+  }, [setMessage, saveMessagesImmediately]);
+
+  return (
+    <div className="h-full bg-gray-50">
+      <Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
+        {(showSettings || !styleState.isMobile) && (
+          <Layout.Sider
+            style={{
+              background: 'transparent',
+              borderRight: 'none',
+              flexShrink: 0,
+              minWidth: styleState.isMobile ? '100%' : 320,
+              maxWidth: styleState.isMobile ? '100%' : 320,
+              height: styleState.isMobile ? 'auto' : 'calc(100vh - 66px)',
+              overflow: 'auto',
+              position: styleState.isMobile ? 'fixed' : 'relative',
+              zIndex: styleState.isMobile ? 1000 : 1,
+              width: '100%',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+            }}
+            width={styleState.isMobile ? '100%' : 320}
+            className={styleState.isMobile ? 'bg-white shadow-lg' : ''}
+          >
+            <OptimizedSettingsPanel
+              inputs={inputs}
+              parameterEnabled={parameterEnabled}
+              models={models}
+              groups={groups}
+              styleState={styleState}
+              showSettings={showSettings}
+              showDebugPanel={showDebugPanel}
+              customRequestMode={customRequestMode}
+              customRequestBody={customRequestBody}
+              onInputChange={handleInputChange}
+              onParameterToggle={handleParameterToggle}
+              onCloseSettings={() => setShowSettings(false)}
+              onConfigImport={handleConfigImport}
+              onConfigReset={handleConfigReset}
+              onCustomRequestModeChange={setCustomRequestMode}
+              onCustomRequestBodyChange={setCustomRequestBody}
+              previewPayload={previewPayload}
+              messages={message}
+            />
+          </Layout.Sider>
+        )}
+
+        <Layout.Content className="relative flex-1 overflow-hidden">
+          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-66px)]">
+            <div className="flex-1 flex flex-col">
+              <ChatArea
+                chatRef={chatRef}
+                message={message}
+                inputs={inputs}
+                styleState={styleState}
+                showDebugPanel={showDebugPanel}
+                roleInfo={roleInfo}
+                onMessageSend={onMessageSend}
+                onMessageCopy={messageActions.handleMessageCopy}
+                onMessageReset={messageActions.handleMessageReset}
+                onMessageDelete={messageActions.handleMessageDelete}
+                onStopGenerator={onStopGenerator}
+                onClearMessages={handleClearMessages}
+                onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
+                renderCustomChatContent={renderCustomChatContent}
+                renderChatBoxAction={renderChatBoxAction}
+              />
+            </div>
+
+            {/* 调试面板 - 桌面端 */}
+            {showDebugPanel && !styleState.isMobile && (
+              <div className="w-96 flex-shrink-0 h-full">
+                <OptimizedDebugPanel
+                  debugData={debugData}
+                  activeDebugTab={activeDebugTab}
+                  onActiveDebugTabChange={setActiveDebugTab}
+                  styleState={styleState}
+                  customRequestMode={customRequestMode}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* 调试面板 - 移动端覆盖层 */}
+          {showDebugPanel && styleState.isMobile && (
+            <div
+              style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 1000,
+                backgroundColor: 'white',
+                overflow: 'auto',
+              }}
+              className="shadow-lg"
+            >
+              <OptimizedDebugPanel
+                debugData={debugData}
+                activeDebugTab={activeDebugTab}
+                onActiveDebugTabChange={setActiveDebugTab}
+                styleState={styleState}
+                showDebugPanel={showDebugPanel}
+                onCloseDebugPanel={() => setShowDebugPanel(false)}
+                customRequestMode={customRequestMode}
+              />
+            </div>
+          )}
+
+          {/* 浮动按钮 */}
+          <FloatingButtons
+            styleState={styleState}
+            showSettings={showSettings}
+            showDebugPanel={showDebugPanel}
+            onToggleSettings={() => setShowSettings(!showSettings)}
+            onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
+          />
+        </Layout.Content>
+      </Layout>
+    </div>
+  );
+};
+
+export default Playground;

web/src/pages/Redemption/EditRedemption.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -9,7 +8,6 @@ import {
   showSuccess,
 } from '../../helpers';
 import {
-  getQuotaPerUnit,
   renderQuota,
   renderQuotaWithPrompt,
 } from '../../helpers/render';
@@ -22,17 +20,24 @@ import {
   Space,
   Spin,
   Typography,
+  Card,
+  Tag,
 } from '@douyinfe/semi-ui';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
-import { Divider } from 'semantic-ui-react';
+import {
+  IconCreditCard,
+  IconSave,
+  IconClose,
+  IconPlusCircle,
+  IconGift,
+} from '@douyinfe/semi-icons';
+
+const { Text, Title } = Typography;
 
 const EditRedemption = (props) => {
   const { t } = useTranslation();
   const isEdit = props.editingRedemption.id !== undefined;
   const [loading, setLoading] = useState(isEdit);
 
-  const params = useParams();
-  const navigate = useNavigate();
   const originInputs = {
     name: '',
     quota: 100000,
@@ -134,24 +139,46 @@ const EditRedemption = (props) => {
       <SideSheet
         placement={isEdit ? 'right' : 'left'}
         title={
-          <Title level={3}>
-            {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
-          </Title>
+          <Space>
+            {isEdit ?
+              <Tag color="blue" shape="circle">{t('更新')}</Tag> :
+              <Tag color="green" shape="circle">{t('新建')}</Tag>
+            }
+            <Title heading={4} className="m-0">
+              {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
+            </Title>
+          </Space>
         }
-        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
-        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
+        headerStyle={{
+          borderBottom: '1px solid var(--semi-color-border)',
+          padding: '24px'
+        }}
+        bodyStyle={{
+          backgroundColor: 'var(--semi-color-bg-0)',
+          padding: '0'
+        }}
         visible={props.visiable}
+        width={isMobile() ? '100%' : 600}
         footer={
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <div className="flex justify-end bg-white">
             <Space>
-              <Button theme='solid' size={'large'} onClick={submit}>
+              <Button
+                theme="solid"
+                size="large"
+                className="!rounded-full"
+                onClick={submit}
+                icon={<IconSave />}
+                loading={loading}
+              >
                 {t('提交')}
               </Button>
               <Button
-                theme='solid'
-                size={'large'}
-                type={'tertiary'}
+                theme="light"
+                size="large"
+                className="!rounded-full"
+                type="primary"
                 onClick={handleCancel}
+                icon={<IconClose />}
               >
                 {t('取消')}
               </Button>
@@ -160,59 +187,106 @@ const EditRedemption = (props) => {
         }
         closeIcon={null}
         onCancel={() => handleCancel()}
-        width={isMobile() ? '100%' : 600}
       >
         <Spin spinning={loading}>
-          <Input
-            style={{ marginTop: 20 }}
-            label={t('名称')}
-            name='name'
-            placeholder={t('请输入名称')}
-            onChange={(value) => handleInputChange('name', value)}
-            value={name}
-            autoComplete='new-password'
-            required={!isEdit}
-          />
-          <Divider />
-          <div style={{ marginTop: 20 }}>
-            <Typography.Text>
-              {t('额度') + renderQuotaWithPrompt(quota)}
-            </Typography.Text>
+          <div className="p-6">
+            <Card className="!rounded-2xl shadow-sm border-0 mb-6">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconGift size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的基本信息')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <Text strong className="block mb-2">{t('名称')}</Text>
+                  <Input
+                    placeholder={t('请输入名称')}
+                    onChange={(value) => handleInputChange('name', value)}
+                    value={name}
+                    autoComplete="new-password"
+                    size="large"
+                    className="!rounded-lg"
+                    showClear
+                    required={!isEdit}
+                  />
+                </div>
+              </div>
+            </Card>
+
+            <Card className="!rounded-2xl shadow-sm border-0">
+              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
+                background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
+                position: 'relative'
+              }}>
+                <div className="absolute inset-0 overflow-hidden">
+                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                </div>
+                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
+                  <IconCreditCard size="large" style={{ color: '#ffffff' }} />
+                </div>
+                <div className="relative">
+                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('额度设置')}</Text>
+                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的额度和数量')}</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <div className="flex justify-between mb-2">
+                    <Text strong>{t('额度')}</Text>
+                    <Text type="tertiary">{renderQuotaWithPrompt(quota)}</Text>
+                  </div>
+                  <AutoComplete
+                    placeholder={t('请输入额度')}
+                    onChange={(value) => handleInputChange('quota', value)}
+                    value={quota}
+                    autoComplete="new-password"
+                    type="number"
+                    size="large"
+                    className="w-full !rounded-lg"
+                    prefix={<IconCreditCard />}
+                    data={[
+                      { value: 500000, label: '1$' },
+                      { value: 5000000, label: '10$' },
+                      { value: 25000000, label: '50$' },
+                      { value: 50000000, label: '100$' },
+                      { value: 250000000, label: '500$' },
+                      { value: 500000000, label: '1000$' },
+                    ]}
+                  />
+                </div>
+
+                {!isEdit && (
+                  <div>
+                    <Text strong className="block mb-2">{t('生成数量')}</Text>
+                    <Input
+                      placeholder={t('请输入生成数量')}
+                      onChange={(value) => handleInputChange('count', value)}
+                      value={count}
+                      autoComplete="new-password"
+                      type="number"
+                      size="large"
+                      className="!rounded-lg"
+                      prefix={<IconPlusCircle />}
+                    />
+                  </div>
+                )}
+              </div>
+            </Card>
           </div>
-          <AutoComplete
-            style={{ marginTop: 8 }}
-            name='quota'
-            placeholder={t('请输入额度')}
-            onChange={(value) => handleInputChange('quota', value)}
-            value={quota}
-            autoComplete='new-password'
-            type='number'
-            position={'bottom'}
-            data={[
-              { value: 500000, label: '1$' },
-              { value: 5000000, label: '10$' },
-              { value: 25000000, label: '50$' },
-              { value: 50000000, label: '100$' },
-              { value: 250000000, label: '500$' },
-              { value: 500000000, label: '1000$' },
-            ]}
-          />
-          {!isEdit && (
-            <>
-              <Divider />
-              <Typography.Text>{t('生成数量')}</Typography.Text>
-              <Input
-                style={{ marginTop: 8 }}
-                label={t('生成数量')}
-                name='count'
-                placeholder={t('请输入生成数量')}
-                onChange={(value) => handleInputChange('count', value)}
-                value={count}
-                autoComplete='new-password'
-                type='number'
-              />
-            </>
-          )}
         </Spin>
       </SideSheet>
     </>

web/src/pages/Redemption/index.js

@@ -1,20 +1,10 @@
 import React from 'react';
 import RedemptionsTable from '../../components/RedemptionsTable';
-import { Layout } from '@douyinfe/semi-ui';
-import { useTranslation } from 'react-i18next';
 
 const Redemption = () => {
-  const { t } = useTranslation();
   return (
     <>
-      <Layout>
-        <Layout.Header>
-          <h3>{t('管理兑换码')}</h3>
-        </Layout.Header>
-        <Layout.Content>
-          <RedemptionsTable />
-        </Layout.Content>
-      </Layout>
+      <RedemptionsTable />
     </>
   );
 };

web/src/pages/Setting/Model/SettingGeminiModel.js

@@ -27,40 +27,48 @@ export default function SettingGeminiModel(props) {
   const [inputs, setInputs] = useState({
     'gemini.safety_settings': '',
     'gemini.version_settings': '',
-    'gemini.supported_imagine_models': [],
+    'gemini.supported_imagine_models': '',
     'gemini.thinking_adapter_enabled': false,
     'gemini.thinking_adapter_budget_tokens_percentage': 0.6,
   });
   const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(inputs);
 
-  function onSubmit() {
-    const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = String(inputs[item.key]);
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
-    setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
-        }
-        showSuccess(t('保存成功'));
-        props.refresh();
+  async function onSubmit() {
+    await refForm.current
+      .validate()
+      .then(() => {
+        const updateArray = compareObjects(inputs, inputsRow);
+        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+        const requestQueue = updateArray.map((item) => {
+          let value = String(inputs[item.key]);
+          return API.put('/api/option/', {
+            key: item.key,
+            value,
+          });
+        });
+        setLoading(true);
+        Promise.all(requestQueue)
+          .then((res) => {
+            if (requestQueue.length === 1) {
+              if (res.includes(undefined)) return;
+            } else if (requestQueue.length > 1) {
+              if (res.includes(undefined))
+                return showError(t('部分保存失败，请重试'));
+            }
+            showSuccess(t('保存成功'));
+            props.refresh();
+          })
+          .catch(() => {
+            showError(t('保存失败，请重试'));
+          })
+          .finally(() => {
+            setLoading(false);
+          });
       })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
+      .catch((error) => {
+        console.error('Validation failed:', error);
+        showError(t('请检查输入'));
       });
   }
 
@@ -146,6 +154,14 @@ export default function SettingGeminiModel(props) {
                   label={t('支持的图像模型')}
                   placeholder={t('例如：') + '\n' + JSON.stringify(['gemini-2.0-flash-exp-image-generation'], null, 2)}
                   onChange={(value) => setInputs({ ...inputs, 'gemini.supported_imagine_models': value })}
+                  trigger='blur'
+                  stopValidateWithError
+                  rules={[
+                    {
+                      validator: (rule, value) => verifyJSON(value),
+                      message: t('不是合法的 JSON 字符串'),
+                    },
+                  ]}
                 />
               </Col>
             </Row>

web/src/pages/Setup/index.js

@@ -1,21 +1,13 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Card,
-  Col,
-  Row,
   Form,
   Button,
   Typography,
-  Space,
-  RadioGroup,
-  Radio,
   Modal,
   Banner,
 } from '@douyinfe/semi-ui';
-import { API, showError, showNotice, timestamp2string } from '../../helpers';
-import { StatusContext } from '../../context/Status';
-import { marked } from 'marked';
-import { StyleContext } from '../../context/Style/index.js';
+import { API, showError, showNotice } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import {
   IconHelpCircle,
@@ -24,9 +16,7 @@ import {
 } from '@douyinfe/semi-icons';
 
 const Setup = () => {
-  const { t, i18n } = useTranslation();
-  const [statusState] = useContext(StatusContext);
-  const [styleState, styleDispatch] = useContext(StyleContext);
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [selfUseModeInfoVisible, setUsageModeInfoVisible] = useState(false);
   const [setupStatus, setSetupStatus] = useState({