feat: scroll layout

Author: wkylin

src/components/index.ts

@@ -149,3 +149,4 @@ export { default as Video } from './stateless/Video'
 export { default as Watermark } from './stateless/Watermark'
 // export { default as WaveBackground } from './stateless/WaveBackground'
 export { default as WordRotate } from './stateless/WordRotate'
+export { default as ScrollLayout } from './stateless/ScrollLayout'

src/components/stateless/ScrollLayout/index.module.less

@@ -0,0 +1,81 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+.content {
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+
+  // &::-webkit-scrollbar {
+  //   width: 8px;
+  // }
+
+  // &::-webkit-scrollbar-track {
+  //   background: #f1f1f1;
+  //   border-radius: 4px;
+  // }
+
+  // &::-webkit-scrollbar-thumb {
+  //   background: #888;
+  //   border-radius: 4px;
+  //   transition: background 0.2s ease;
+
+  //   &:hover {
+  //     background: #555;
+  //   }
+
+  //   &:active {
+  //     background: #333;
+  //   }
+  // }
+
+  // scrollbar-width: thin;
+  // scrollbar-color: #888 #f1f1f1;
+}
+
+.footer {
+  flex-shrink: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+// :global(.dark) {
+//   .header,
+//   .footer {
+//     background-color: #1f2937;
+//     border-color: #374151;
+//   }
+
+//   .content {
+//     &::-webkit-scrollbar-track {
+//       background: #1f2937;
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//       background: #4b5563;
+
+//       &:hover {
+//         background: #6b7280;
+//       }
+
+//       &:active {
+//         background: #9ca3af;
+//       }
+//     }
+
+//     scrollbar-color: #4b5563 #1f2937;
+//   }
+// }

src/components/stateless/ScrollLayout/index.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import type { ReactNode, CSSProperties } from 'react'
+import styles from './index.module.less'
+
+interface ScrollLayoutProps {
+  header?: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  headerHeight?: number
+  footerHeight?: number
+  className?: string
+  headerClassName?: string
+  footerClassName?: string
+  contentClassName?: string
+  headerStyle?: CSSProperties
+  footerStyle?: CSSProperties
+  contentStyle?: CSSProperties
+}
+
+const ScrollLayout = ({
+  header,
+  footer,
+  children,
+  headerHeight = 60,
+  footerHeight = 60,
+  className = '',
+  headerClassName = '',
+  footerClassName = '',
+  contentClassName = '',
+  headerStyle = {},
+  footerStyle = {},
+  contentStyle = {},
+}: ScrollLayoutProps) => {
+  return (
+    <div className={`${styles.container} ${className}`}>
+      {header && (
+        <header
+          className={`${styles.header} ${headerClassName}`}
+          style={{ height: `${headerHeight}px`, ...headerStyle }}
+        >
+          {header}
+        </header>
+      )}
+      <main className={`${styles.content} ${contentClassName}`} style={contentStyle}>
+        {children}
+      </main>
+      {footer && (
+        <footer
+          className={`${styles.footer} ${footerClassName}`}
+          style={{ height: `${footerHeight}px`, ...footerStyle }}
+        >
+          {footer}
+        </footer>
+      )}
+    </div>
+  )
+}
+
+export default ScrollLayout

src/pages/demo/index.jsx

@@ -19,6 +19,7 @@ import GradientStats from '@stateless/GradientStats'
 import WaveBackground from '@stateless/WaveBackground'
 import MarketingHero from '@stateless/MarketingHero'
 import ScriptView from '@stateless/ScriptView'
+import ScrollLayout from '@stateless/ScrollLayout'
 import AnimatedList from '@stateless/AnimatedList'
 // import AnimationTabs from '@stateless/AnimationTabs'
 import StickyCard from '@stateless/StickyCard'
@@ -266,6 +267,34 @@ const ProDemo = () => {
     <FixTabPanel>
       <PageContainer>
         <OneTimePasscode length={6} variant="compact" onComplete={() => {}} />
+        <div style={{ height: '400px' }}>
+          <ScrollLayout
+            headerHeight={60}
+            footerHeight={60}
+            header={
+              <div className="flex h-full items-center justify-between px-6">
+                <h1 className="text-xl font-bold">ScrollLayout 组件示例</h1>
+              </div>
+            }
+            footer={
+              <div className="flex h-full items-center justify-center text-sm">
+                <p>© 2025 ScrollLayout - 支持自定义样式</p>
+              </div>
+            }
+          >
+            <div className="space-y-4 p-6">
+              <h2 className="text-lg font-semibold">中间内容区域（可滚动）</h2>
+              {Array.from({ length: 30 }, (_, i) => (
+                <div key={i} className="rounded-lg p-4 shadow-sm">
+                  <h3 className="font-medium">内容块 {i + 1}</h3>
+                  <p className="text-muted-foreground mt-2 text-sm">
+                    这是一个灵活的布局组件，支持可选的 header/footer，自定义高度和样式
+                  </p>
+                </div>
+              ))}
+            </div>
+          </ScrollLayout>
+        </div>
         <MusicPlayer />
         <TransferHistory />
         <FixCarousel />