From 8f96865ebf6e01417f6197e2da6f62fd3f1a6b95 Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sun, 1 Mar 2026 16:31:02 +0000
Subject: [PATCH] =?UTF-8?q?fix(=E7=BB=83=E4=B9=A0):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=B5=8C=E5=A5=97=E6=BB=9A=E5=8A=A8=E5=92=8C=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E7=A9=BA=E7=99=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout: 将 h-screen 改为 min-h-screen，移除嵌套滚动容器
- ProcessPracticePage: 底部区域从 fixed 改为 sticky，移除动态高度计算
- 使用 flex 布局管理页面结构，消除双滚动条和大片空白
- 清理未使用的 state 和 imports

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 src/components/layout/Layout.tsx  |  6 +++---
 src/pages/ProcessPracticePage.tsx | 35 +++++--------------------------
 2 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 0dc9c36..0725ca5 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -14,19 +14,19 @@ export function Layout({ children }: LayoutProps) {
 
   return (
     <div className={clsx('min-h-screen', darkMode && 'dark')}>
-      <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="flex min-h-screen bg-gray-50 dark:bg-gray-900">
         {/* 侧边栏 */}
         <Sidebar />
 
         {/* 主内容区 */}
-        <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex flex-1 flex-col">
           {/* 顶部导航 */}
           <Header />
 
           {/* 页面内容 */}
           <main
             className={clsx(
-              'flex-1 overflow-y-auto p-6 transition-all duration-300',
+              'flex-1 p-6 transition-all duration-300',
               sidebarOpen ? 'lg:ml-64' : 'lg:ml-20'
             )}
           >
diff --git a/src/pages/ProcessPracticePage.tsx b/src/pages/ProcessPracticePage.tsx
index d7c8107..fd37fd2 100644
--- a/src/pages/ProcessPracticePage.tsx
+++ b/src/pages/ProcessPracticePage.tsx
@@ -9,14 +9,10 @@ import {
 import { PracticeMatrix } from '@/components/practice/PracticeMatrix'
 import { InputArea } from '@/components/practice/InputArea'
 import { HintInfo } from '@/components/practice/HintInfo'
-import { useAppStore } from '@/stores/useAppStore'
-import { clsx } from 'clsx'
 
 type CharStatus = 'pending' | 'correct' | 'error'
 
 export default function ProcessPracticePage() {
-  const sidebarOpen = useAppStore((s) => s.sidebarOpen)
-
   // 生成格子顺序
   const [cellSequence] = useState<CellInfo[]>(() => generateCellSequence())
 
@@ -64,8 +60,6 @@ export default function ProcessPracticePage() {
   } | null>(null)
   const [inputLocked, setInputLocked] = useState(false)
   const latestInputRef = useRef<string[]>([])
-  const bottomAreaRef = useRef<HTMLDivElement>(null)
-  const [bottomHeight, setBottomHeight] = useState(0)
 
   // 初始化输入框
   useEffect(() => {
@@ -96,19 +90,6 @@ export default function ProcessPracticePage() {
     }
   }, [answeredCells, currentCellId])
 
-  // 动态计算底部固定区域高度
-  useEffect(() => {
-    const updateBottomHeight = () => {
-      if (bottomAreaRef.current) {
-        setBottomHeight(bottomAreaRef.current.offsetHeight)
-      }
-    }
-
-    updateBottomHeight()
-    window.addEventListener('resize', updateBottomHeight)
-    return () => window.removeEventListener('resize', updateBottomHeight)
-  }, [userInput.length]) // 当输入框数量变化时重新计算
-
   // 切换到指定格子
   const switchToCell = useCallback(
     (cell: CellInfo) => {
@@ -371,7 +352,7 @@ export default function ProcessPracticePage() {
   }, [cellSequence])
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
       {/* 顶部进度条 */}
       <div className="sticky top-0 z-20 bg-white dark:bg-gray-800 shadow-sm">
         <div className="max-w-7xl mx-auto px-4 py-3">
@@ -405,7 +386,7 @@ export default function ProcessPracticePage() {
       </div>
 
       {/* 主内容区域 */}
-      <div style={{ paddingBottom: `${bottomHeight}px` }}>
+      <div className="flex-1 overflow-y-auto pb-10">
         {/* 矩阵区域 */}
         <div className="max-w-7xl mx-auto py-4">
           <PracticeMatrix
@@ -420,15 +401,9 @@ export default function ProcessPracticePage() {
         </div>
       </div>
 
-      {/* 底部固定区域 */}
-      <div
-        ref={bottomAreaRef}
-        className={clsx(
-          'fixed bottom-0 left-0 right-0 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 z-10 transition-all duration-300',
-          sidebarOpen ? 'lg:ml-64' : 'lg:ml-20'
-        )}
-      >
-        <div className="max-w-7xl mx-auto">
+      {/* 底部固定区域（粘附底部，参与文档流） */}
+      <div className="sticky bottom-0 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md border-t border-gray-200 dark:border-gray-700 z-10">
+        <div className="max-w-7xl mx-auto px-6">
           {/* 输入区域 */}
           <div className="py-4 border-b border-gray-200/50 dark:border-gray-700/50">
             <div className="flex items-center justify-center gap-3">