update ui

src/views/Community/index.js

@@ -19,6 +19,7 @@ import {
   HStack,
   VStack,
   Text,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 
 // 导入组件
@@ -52,6 +53,23 @@ const Community = () => {
   // Ref：用于首次滚动到内容区域
   const containerRef = useRef(null);
 
+  // 响应式容器宽度
+  const containerMaxW = useBreakpointValue({
+    base: '100%',        // 移动端：全宽
+    sm: '100%',          // 小屏：全宽
+    md: '100%',          // 中屏：全宽
+    lg: '1200px',        // 大屏：1200px
+    xl: '1400px',        // 超大屏：1400px
+  });
+
+  // 响应式内边距
+  const containerPx = useBreakpointValue({
+    base: 2,             // 移动端：最小内边距
+    sm: 3,
+    md: 4,
+    lg: 6,
+  });
+
   // ⚡ 通知权限引导
   const { browserPermission, requestBrowserPermission } = useNotification();
 
@@ -145,7 +163,7 @@ const Community = () => {
   return (
     <Box minH="100vh" bg={bgColor}>
       {/* 主内容区域 */}
-      <Container ref={containerRef} maxW="1400px" pt={6} pb={8}>
+      <Container ref={containerRef} maxW={containerMaxW} px={containerPx} pt={{ base: 3, md: 6 }} pb={{ base: 4, md: 8 }}>
         {/* 通知权限提示横幅 */}
         {showNotificationBanner && (
           <Alert