Fix 404 layout

front/src/App.tsx

@@ -11,6 +11,7 @@ import { fetchArticles, reset_identity_token, getSiteNotice, type Article } from
 import { useLayout } from './context/LayoutContext';
 import './App.css';
 import { Eye24Regular, EyeOff24Regular, Copy24Regular } from '@fluentui/react-icons';
+import NotFound from './components/NotFound';
 import NoticeModal from './components/NoticeModal';
 import type { NoticeData } from './components/NoticeModal';
 
@@ -153,8 +154,6 @@ const Home: React.FC<{ onPreviewImage: (src: string, alt?: string) => void }> =
   );
 };
 
-const NotFound = () => <h1>404 Not Found</h1>;
-
 const NoticeOverlay: React.FC = () => {
   const { settings } = useLayout();
   const [noticeData, setNoticeData] = useState<NoticeData | null>(null);
@@ -316,8 +315,8 @@ function App() {
           <Route path="create" element={<CreatePost />} />
           <Route path="panel" element={<Panel />} />
           <Route path="about" element={<About />} />
-          <Route path="*" element={<NotFound />} />
         </Route>
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   );

front/src/components/NotFound.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { makeStyles, tokens, Card, CardHeader, CardPreview, Text, Button, Title1, Subtitle1, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { ArrowLeft24Regular, Home24Regular } from '@fluentui/react-icons';
+
+const useStyles = makeStyles({
+  page: {
+    position: 'fixed',
+    inset: 0,
+    width: '100vw',
+    height: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: tokens.colorNeutralBackground3,
+    padding: tokens.spacingHorizontalXL,
+    overflow: 'auto',
+    boxSizing: 'border-box',
+  },
+  card: {
+    width: 'min(720px, 92vw)',
+    borderRadius: tokens.borderRadiusLarge,
+    overflow: 'hidden',
+    boxShadow: tokens.shadow8,
+  },
+  header: {
+    paddingLeft: tokens.spacingHorizontalXL,
+    paddingRight: tokens.spacingHorizontalXL,
+    paddingTop: tokens.spacingVerticalM,
+    paddingBottom: tokens.spacingVerticalM,
+  },
+  preview: {
+    height: '140px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: `linear-gradient(135deg, ${tokens.colorBrandBackground} 0%, ${tokens.colorBrandBackground2} 50%, ${tokens.colorPaletteBlueBackground2} 100%)`,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+  content: {
+    paddingLeft: tokens.spacingHorizontalXL,
+    paddingRight: tokens.spacingHorizontalXL,
+    paddingTop: tokens.spacingVerticalL,
+    paddingBottom: tokens.spacingVerticalL,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+  },
+  actions: {
+    display: 'flex',
+    gap: tokens.spacingHorizontalM,
+    marginTop: tokens.spacingVerticalL,
+  },
+});
+
+const NotFound: React.FC = () => {
+  const styles = useStyles();
+  const navigate = useNavigate();
+
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <div className={styles.page}>
+        <Card className={styles.card}>
+          <CardHeader className={styles.header} header={<Title1 style={{ margin: 0 }}>😕 404 Not Found</Title1>} />
+          <CardPreview>
+            <div className={styles.preview} />
+          </CardPreview>
+          <div className={styles.content}>
+            <Subtitle1>页面被当成小鱼干吃掉了喵😭</Subtitle1>
+            <Text>请检查链接是否正确，或者点击下方按钮继续浏览</Text>
+            <div className={styles.actions}>
+              <Button appearance="primary" icon={<ArrowLeft24Regular />} onClick={() => navigate(-1)}>
+                返回上一页
+              </Button>
+              <Button appearance="secondary" icon={<Home24Regular />} onClick={() => navigate('/') }>
+                返回首页
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </FluentProvider>
+  );
+};
+
+export default NotFound;