💄 refactor(playground): migrate inline styles to TailwindCSS v3 classes

- Replace all inline style objects with TailwindCSS utility classes
- Convert Layout and Layout.Sider component styles to responsive classes
- Simplify conditional styling logic using template literals
- Maintain existing responsive design and functionality
- Improve code readability and maintainability

Changes include:
- Layout: height/background styles → h-full bg-transparent
- Sider: complex style object → conditional className with mobile/desktop variants
- Debug panel overlay: inline styles → utility classes (fixed, z-[1000], etc.)
- Remove redundant style props while preserving visual consistency

web/src/components/playground/FloatingButtons.js

@@ -80,7 +80,7 @@ const FloatingButtons = ({
               ? 'linear-gradient(to right, #e11d48, #be123c)'
               : 'linear-gradient(to right, #4f46e5, #6366f1)',
           }}
-          className="lg:hidden !rounded-full !p-0"
+          className="lg:hidden"
         />
       )}
     </>

web/src/pages/Playground/index.js

@@ -371,28 +371,18 @@ const Playground = () => {
   }, [setMessage, saveMessagesImmediately]);
 
   return (
-    <div className="h-full bg-gray-50 mt-[60px]">
+    <div className="h-full">
-      <Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
+      <Layout className="h-full bg-transparent flex flex-col md:flex-row">
         {(showSettings || !isMobile) && (
           <Layout.Sider
-            style={{
+            className={`
-              background: 'transparent',
+              bg-transparent border-r-0 flex-shrink-0 overflow-auto mt-[60px]
-              borderRight: 'none',
+              ${isMobile
-              flexShrink: 0,
+                ? 'fixed top-0 left-0 right-0 bottom-0 z-[1000] w-full h-auto bg-white shadow-lg'
-              minWidth: isMobile ? '100%' : 320,
+                : 'relative z-[1] w-80 h-[calc(100vh-66px)]'
-              maxWidth: isMobile ? '100%' : 320,
+              }
-              height: isMobile ? 'auto' : 'calc(100vh - 66px)',
+            `}
-              overflow: 'auto',
-              position: isMobile ? 'fixed' : 'relative',
-              zIndex: isMobile ? 1000 : 1,
-              width: '100%',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }}
             width={isMobile ? '100%' : 320}
-            className={isMobile ? 'bg-white shadow-lg' : ''}
           >
             <OptimizedSettingsPanel
               inputs={inputs}
@@ -418,7 +408,7 @@ const Playground = () => {
         )}
 
         <Layout.Content className="relative flex-1 overflow-hidden">
-          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-66px)]">
+          <div className="overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-66px)] mt-[60px]">
             <div className="flex-1 flex flex-col">
               <ChatArea
                 chatRef={chatRef}
@@ -455,19 +445,7 @@ const Playground = () => {
 
           {/* 调试面板 - 移动端覆盖层 */}
           {showDebugPanel && isMobile && (
-            <div
+            <div className="fixed top-0 left-0 right-0 bottom-0 z-[1000] bg-white overflow-auto shadow-lg">
-              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}