From 8bc6ddbca8e1e668358701d6294567996b166394 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 20 Jul 2025 18:30:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20refactor(playground):=20migrate?=
 =?UTF-8?q?=20inline=20styles=20to=20TailwindCSS=20v3=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../components/playground/FloatingButtons.js  |  2 +-
 web/src/pages/Playground/index.js             | 44 +++++--------------
 2 files changed, 12 insertions(+), 34 deletions(-)

diff --git a/web/src/components/playground/FloatingButtons.js b/web/src/components/playground/FloatingButtons.js
index 539c53b3..87a3b0b5 100644
--- a/web/src/components/playground/FloatingButtons.js
+++ b/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"
         />
       )}
     </>
diff --git a/web/src/pages/Playground/index.js b/web/src/pages/Playground/index.js
index 88ebc538..f31cefb7 100644
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -371,28 +371,18 @@ const Playground = () => {
   }, [setMessage, saveMessagesImmediately]);
 
   return (
-    <div className="h-full bg-gray-50 mt-[60px]">
-      <Layout style={{ height: '100%', background: 'transparent' }} className="flex flex-col md:flex-row">
+    <div className="h-full">
+      <Layout className="h-full bg-transparent flex flex-col md:flex-row">
         {(showSettings || !isMobile) && (
           <Layout.Sider
-            style={{
-              background: 'transparent',
-              borderRight: 'none',
-              flexShrink: 0,
-              minWidth: isMobile ? '100%' : 320,
-              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,
-            }}
+            className={`
+              bg-transparent border-r-0 flex-shrink-0 overflow-auto mt-[60px]
+              ${isMobile
+                ? 'fixed top-0 left-0 right-0 bottom-0 z-[1000] w-full h-auto bg-white shadow-lg'
+                : 'relative z-[1] w-80 h-[calc(100vh-66px)]'
+              }
+            `}
             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
-              style={{
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 1000,
-                backgroundColor: 'white',
-                overflow: 'auto',
-              }}
-              className="shadow-lg"
-            >
+            <div className="fixed top-0 left-0 right-0 bottom-0 z-[1000] bg-white overflow-auto shadow-lg">
               <OptimizedDebugPanel
                 debugData={debugData}
                 activeDebugTab={activeDebugTab}