💄 feat(playground): unify SettingsPanel header design with DebugPanel

- 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.

web/src/components/playground/SettingsPanel.js

@@ -2,19 +2,16 @@ import React from 'react';
 import {
 import {
   Card,
   Card,
   Select,
   Select,
-  TextArea,
   Typography,
   Typography,
   Button,
   Button,
   Switch,
   Switch,
-  Divider,
-  Banner,
 } from '@douyinfe/semi-ui';
 } from '@douyinfe/semi-ui';
 import {
 import {
   Sparkles,
   Sparkles,
   Users,
   Users,
   ToggleLeft,
   ToggleLeft,
   X,
   X,
-  AlertTriangle,
+  Settings,
 } from 'lucide-react';
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import { renderGroupOption } from '../../helpers/render.js';
 import { renderGroupOption } from '../../helpers/render.js';
@@ -54,32 +51,47 @@ const SettingsPanel = ({
 
 
   return (
   return (
     <Card
     <Card
-      className={`h-full flex flex-col ${styleState.isMobile ? 'rounded-none border-none shadow-none' : ''}`}
+      className="h-full flex flex-col"
       bordered={false}
       bordered={false}
       bodyStyle={{
       bodyStyle={{
-        padding: styleState.isMobile ? '24px' : '24px 24px 16px 24px',
+        padding: styleState.isMobile ? '16px' : '24px',
         height: '100%',
         height: '100%',
         display: 'flex',
         display: 'flex',
         flexDirection: 'column'
         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
           <Button
             icon={<X size={16} />}
             icon={<X size={16} />}
             onClick={onCloseSettings}
             onClick={onCloseSettings}
             theme="borderless"
             theme="borderless"
             type="tertiary"
             type="tertiary"
             size="small"
             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>
         </div>
       )}
       )}

web/src/pages/Playground/index.js

@@ -362,7 +362,7 @@ const Playground = () => {
               flexShrink: 0,
               flexShrink: 0,
               minWidth: styleState.isMobile ? '100%' : 320,
               minWidth: styleState.isMobile ? '100%' : 320,
               maxWidth: 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',
               overflow: 'auto',
               position: styleState.isMobile ? 'fixed' : 'relative',
               position: styleState.isMobile ? 'fixed' : 'relative',
               zIndex: styleState.isMobile ? 1000 : 1,
               zIndex: styleState.isMobile ? 1000 : 1,
@@ -399,7 +399,7 @@ const Playground = () => {
         )}
         )}
 
 
         <Layout.Content className="relative flex-1 overflow-hidden">
         <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">
             <div className="flex-1 flex flex-col">
               <ChatArea
               <ChatArea
                 chatRef={chatRef}
                 chatRef={chatRef}