重构：将Community组件模块化，拆分样式和功能代码

Author: CC11001100

office-website/src/components/Community.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { 
+  QrCodeItem, 
+  QrCodeImage, 
+  QrCodeText, 
+  StyledLink 
+} from '../../styles/components/Community.styles';
+
+interface QrCodeCardProps {
+  imageUrl: string;
+  imageAlt: string;
+  text: string;
+  linkUrl?: string;
+  linkText?: string;
+}
+
+const QrCodeCard: React.FC<QrCodeCardProps> = ({ 
+  imageUrl, 
+  imageAlt, 
+  text,
+  linkUrl,
+  linkText
+}) => {
+  return (
+    <QrCodeItem>
+      <QrCodeImage src={imageUrl} alt={imageAlt} />
+      <QrCodeText>
+        {linkUrl && linkText ? (
+          <>
+            <StyledLink href={linkUrl} target="_blank">{linkText}</StyledLink>
+            {" "}或{text}
+          </>
+        ) : (
+          text
+        )}
+      </QrCodeText>
+    </QrCodeItem>
+  );
+};
+
+export default QrCodeCard; 

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

@@ -0,0 +1,27 @@
+export interface QrCodeCardData {
+  imageUrl: string;
+  imageAlt: string;
+  text: string;
+  linkUrl?: string;
+  linkText?: string;
+}
+
+export const qrCodes: QrCodeCardData[] = [
+  {
+    imageUrl: "https://cdn.jsdelivr.net/gh/JSREI/.github/profile/README.assets/image-20241016230653669.png",
+    imageAlt: "微信交流群二维码",
+    text: "扫码加入逆向技术微信交流群"
+  },
+  {
+    imageUrl: "https://cdn.jsdelivr.net/gh/JSREI/.github/profile/README.assets/image-20231030132026541-7614065.png",
+    imageAlt: "个人微信二维码",
+    text: "如群二维码过期，可以加我个人微信，发送【逆向群】拉你进群"
+  },
+  {
+    imageUrl: "https://cdn.jsdelivr.net/gh/JSREI/.github/profile/README.assets/image-20241016231143315.png",
+    imageAlt: "TG交流群二维码",
+    text: "扫码加入TG交流群",
+    linkUrl: "https://t.me/jsreijsrei",
+    linkText: "点此"
+  }
+]; 

office-website/src/components/Community/QrCodeData.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { 
+  CommunityContainer, 
+  CommunityContent, 
+  CommunityTitle, 
+  QrCodesContainer 
+} from '../../styles/components/Community.styles';
+import QrCodeCard from './QrCodeCard';
+import { qrCodes } from './QrCodeData';
+
+const Community: React.FC = () => {
+  return (
+    <CommunityContainer id="community">
+      <CommunityContent>
+        <CommunityTitle>逆向技术交流群</CommunityTitle>
+        
+        <QrCodesContainer>
+          {qrCodes.map((qrCode, index) => (
+            <QrCodeCard
+              key={`qr-code-${index}`}
+              imageUrl={qrCode.imageUrl}
+              imageAlt={qrCode.imageAlt}
+              text={qrCode.text}
+              linkUrl={qrCode.linkUrl}
+              linkText={qrCode.linkText}
+            />
+          ))}
+        </QrCodesContainer>
+      </CommunityContent>
+    </CommunityContainer>
+  );
+};
+
+export default Community; 

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

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+export const CommunityContainer = styled.section`
+  padding: 5rem 0;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+export const CommunityContent = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+`;
+
+export const CommunityTitle = styled.h2`
+  color: ${({ theme }) => theme.colors.heading};
+  font-size: 2.25rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 2.5rem;
+`;
+
+export 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;
+  }
+`;
+
+export 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};
+  }
+`;
+
+export const QrCodeImage = styled.img`
+  width: 200px;
+  height: auto;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+`;
+
+export const QrCodeText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1.6;
+`;
+
+export 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;
+  }
+`;