From 7874d27486567e99a68518d00ce358a9a285e6ba Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 2 Jun 2025 04:35:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20feat(playground):=20unify=20Sett?=
 =?UTF-8?q?ingsPanel=20header=20design=20with=20DebugPanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add consistent title section with gradient icon and heading
- Include close button in mobile view for better UX consistency
- Standardize mobile and desktop ConfigManager styling
- Adjust layout structure and padding for visual alignment
- Use Settings icon with purple-to-pink gradient to match design system

This change ensures both SettingsPanel and DebugPanel have identical
header layouts and interaction patterns across all screen sizes.
---
 .../components/playground/SettingsPanel.js    | 46 ++++++++++++-------
 web/src/pages/Playground/index.js             |  4 +-
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/web/src/components/playground/SettingsPanel.js b/web/src/components/playground/SettingsPanel.js
index db881c26..aea08fe1 100644
--- a/web/src/components/playground/SettingsPanel.js
+++ b/web/src/components/playground/SettingsPanel.js
@@ -2,19 +2,16 @@ import React from 'react';
 import {
   Card,
   Select,
-  TextArea,
   Typography,
   Button,
   Switch,
-  Divider,
-  Banner,
 } from '@douyinfe/semi-ui';
 import {
   Sparkles,
   Users,
   ToggleLeft,
   X,
-  AlertTriangle,
+  Settings,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { renderGroupOption } from '../../helpers/render.js';
@@ -54,32 +51,47 @@ const SettingsPanel = ({
 
   return (
     <Card
-      className={`h-full flex flex-col ${styleState.isMobile ? 'rounded-none border-none shadow-none' : ''}`}
+      className="h-full flex flex-col"
       bordered={false}
       bodyStyle={{
-        padding: styleState.isMobile ? '24px' : '24px 24px 16px 24px',
+        padding: styleState.isMobile ? '16px' : '24px',
         height: '100%',
         display: 'flex',
         flexDirection: 'column'
       }}
     >
-      {styleState.isMobile && (
-        <div className="flex items-center justify-between mb-4">
-          {/* 移动端显示配置管理下拉菜单和关闭按钮 */}
-          <ConfigManager
-            currentConfig={currentConfig}
-            onConfigImport={onConfigImport}
-            onConfigReset={onConfigReset}
-            styleState={styleState}
-            messages={messages}
-          />
+      {/* 标题区域 - 与调试面板保持一致 */}
+      <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 !text-gray-600 hover:!text-red-600 hover:!bg-red-50"
+            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>
       )}
diff --git a/web/src/pages/Playground/index.js b/web/src/pages/Playground/index.js
index 0e7958ab..fcb993c0 100644
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -362,7 +362,7 @@ const Playground = () => {
               flexShrink: 0,
               minWidth: styleState.isMobile ? '100%' : 320,
               maxWidth: styleState.isMobile ? '100%' : 320,
-              height: styleState.isMobile ? 'auto' : 'calc(100vh - 64px)',
+              height: styleState.isMobile ? 'auto' : 'calc(100vh - 66px)',
               overflow: 'auto',
               position: styleState.isMobile ? 'fixed' : 'relative',
               zIndex: styleState.isMobile ? 1000 : 1,
@@ -399,7 +399,7 @@ const Playground = () => {
         )}
 
         <Layout.Content className="relative flex-1 overflow-hidden">
-          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-64px)]">
+          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-66px)]">
             <div className="flex-1 flex flex-col">
               <ChatArea
                 chatRef={chatRef}