消息区域已分成两部分：消息列表(自动填充剩余空间)和控制面板+输入框(固定底部)

使用flex布局实现垂直分区

client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -56,17 +56,19 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
       {/* 消息和控制面板列 */}
       <div className={`${showVideo ? 'w-full md:w-96 flex-1' : 'flex-1'} flex flex-col`}>
         {/* 消息区域 */}
-        <div className="bg-white shadow-lg p-4">
-          <div className="h-full flex flex-col">
-            {/* 消息列表 */}
-            <div className="flex-1 overflow-y-auto mb-1">
-              {messageList.map((msg, i) => (
-                <div key={i} className="text-sm mb-1">{msg}</div>
-              ))}
+        <div className="flex flex-col h-full">
+          {/* 消息列表 - 填充剩余空间 */}
+          <div className="flex-1 overflow-y-auto bg-white shadow-lg p-4">
+            {messageList.map((msg, i) => (
+              <div key={i} className="text-sm mb-1">{msg}</div>
+            ))}
             </div>
+          </div>
 
+          {/* 底部固定区域 */}
+          <div className="bg-white shadow-lg p-4">
             {/* 控制面板 */}
-            <div className="bg-white shadow-lg p-2 flex flex-col gap-3 mb-1 border-b border-gray-200">
+            <div className="p-2 flex flex-col gap-3 mb-1 border-b border-gray-200">
               <div className="flex flex-wrap gap-2">
                 {role === Role.Teacher && (
                   <button
@@ -137,7 +139,8 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
               </div>
             </div>
 
-            <div className="relative">
+            {/* 消息输入框 */}
+            <div className="relative mt-2">
               <textarea
                 value={msgText}
                 onChange={(e) => setMsgText(e.target.value)}
@@ -153,7 +156,6 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
               </button>
             </div>
           </div>
-        </div>
       </div>
     </div>
   );