实现投稿ui

front/src/layouts/MainLayout.tsx

@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
 import Footer from './components/Footer';
+import StatusDisplay from '../components/StatusDisplay';
 import { LayoutProvider, useLayout } from '../context/LayoutContext';
 
 const useStyles = makeStyles({
@@ -21,12 +22,13 @@ const useStyles = makeStyles({
   container: {
     display: 'flex',
     flex: '1 1 auto',
+    overflow: 'hidden',
+    height: 'calc(100vh - 64px)', // 减去 Header 的高度
     position: 'relative',
   },
   content: {
     flex: '1 1 auto',
     padding: '20px',
-    paddingBottom: '64px',
     overflowY: 'auto',
     display: 'flex',
     flexDirection: 'column',
@@ -36,6 +38,17 @@ const useStyles = makeStyles({
     minHeight: 0,
     boxSizing: 'border-box',
   },
+  rightPanel: {
+    width: '240px',
+    flexShrink: 0,
+    borderLeft: `1px solid ${tokens.colorNeutralStroke1}`,
+    padding: '20px',
+    backgroundColor: tokens.colorNeutralBackground1,
+    overflowY: 'auto',
+    '@media (max-width: 768px)': {
+      display: 'none',
+    },
+  }
 });
 
 const LayoutContent = ({ toasterId }: { toasterId: string }) => {
@@ -51,6 +64,9 @@ const LayoutContent = ({ toasterId }: { toasterId: string }) => {
           <main className={styles.content}>
             <Outlet />
           </main>
+          <aside className={styles.rightPanel}>
+            <StatusDisplay />
+          </aside>
         </div>
         <Footer />
         <Toaster toasterId={toasterId} position="top-end" />