refactor(community): 重构Community组件及QrCodeCard子组件，优化代码结构与样式管理

Author: CC11001100

office-website/src/components/Community/QrCodeCard.tsx

@@ -1,10 +1,48 @@
 import React from 'react';
-import { 
-  QrCodeItem, 
-  QrCodeImage, 
-  QrCodeText, 
-  StyledLink 
-} from '../../styles/components/Community.styles';
+import styled from 'styled-components';
+
+const QrCodeItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 240px;
+  background-color: white;
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: ${({ theme }) => theme.boxShadow.medium};
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: ${({ theme }) => theme.boxShadow.large};
+  }
+`;
+
+const QrCodeImage = styled.img`
+  width: 200px;
+  height: auto;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+`;
+
+const QrCodeText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1.6;
+`;
+
+const StyledLink = styled.a`
+  color: ${({ theme }) => theme.colors.primary};
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  
+  &:hover {
+    color: ${({ theme }) => theme.colors.primaryDark};
+    text-decoration: underline;
+  }
+`;
 
 interface QrCodeCardProps {
   imageUrl: string;

office-website/src/components/Community/index.tsx

@@ -1,13 +1,40 @@
 import React from 'react';
-import { 
-  CommunityContainer, 
-  CommunityContent, 
-  CommunityTitle, 
-  QrCodesContainer 
-} from '../../styles/components/Community.styles';
+import styled from 'styled-components';
 import QrCodeCard from './QrCodeCard';
 import { qrCodes } from './QrCodeData';
 
+const CommunityContainer = styled.section`
+  padding: 5rem 0;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+const CommunityContent = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+`;
+
+const CommunityTitle = styled.h2`
+  color: ${({ theme }) => theme.colors.heading};
+  font-size: 2.25rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 2.5rem;
+`;
+
+const QrCodesContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 3rem;
+  margin: 3rem 0;
+  
+  @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
 const Community: React.FC = () => {
   return (
     <CommunityContainer id="community">