feat: finish new play page

src/components/PageLayout.tsx

@@ -1,7 +1,7 @@
+import { BackButton } from './BackButton';
 import { LogoutButton } from './LogoutButton';
 import MobileBottomNav from './MobileBottomNav';
 import MobileHeader from './MobileHeader';
-import { useSidebar } from './Sidebar';
 import Sidebar from './Sidebar';
 import { ThemeToggle } from './ThemeToggle';
 
@@ -11,40 +11,48 @@ interface PageLayoutProps {
 }
 
 const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
-  const { isCollapsed } = useSidebar();
-
   return (
-    <>
-      {/* 桌面端布局 */}
-      <div className='hidden md:grid md:grid-cols-[auto_1fr] w-full'>
-        <Sidebar activePath={activePath} />
-        <div
-          className={`relative min-w-0 transition-all duration-300 ${
-            isCollapsed ? 'col-start-2' : 'col-start-2'
-          }`}
-        >
+    <div className='w-full min-h-screen'>
+      {/* 移动端头部 */}
+      <MobileHeader showBackButton={activePath === '/play'} />
+
+      {/* 主要布局容器 */}
+      <div className='flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
+        {/* 侧边栏 - 桌面端显示，移动端隐藏 */}
+        <div className='hidden md:block'>
+          <Sidebar activePath={activePath} />
+        </div>
+
+        {/* 主内容区域 */}
+        <div className='relative min-w-0 flex-1 transition-all duration-300'>
+          {/* 桌面端左上角返回按钮 */}
+          <div className='absolute top-3 left-1 z-20 hidden md:flex'>
+            <BackButton />
+          </div>
+
+          {/* 桌面端顶部按钮 */}
           <div className='absolute top-2 right-4 z-20 hidden md:flex items-center gap-2'>
             <LogoutButton />
             <ThemeToggle />
           </div>
-          {children}
+
+          {/* 主内容 */}
+          <main
+            className='flex-1 md:min-h-0 mb-14 md:mb-0'
+            style={{
+              paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
+            }}
+          >
+            {children}
+          </main>
         </div>
       </div>
 
-      {/* 移动端布局 */}
-      <div className='md:hidden flex flex-col min-h-screen w-full'>
-        <MobileHeader />
-        <main
-          className='flex-1 mb-14'
-          style={{
-            paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
-          }}
-        >
-          {children}
-        </main>
+      {/* 移动端底部导航 */}
+      <div className='md:hidden'>
         <MobileBottomNav activePath={activePath} />
       </div>
-    </>
+    </div>
   );
 };