feat(ui): update website components and styles - Enhance overall UI components - Update global styles and theme configurations

Author: CC11001100

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

@@ -1,5 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
+import Zoom from 'yet-another-react-lightbox/plugins/zoom';
+import Counter from 'yet-another-react-lightbox/plugins/counter';
+import 'yet-another-react-lightbox/plugins/counter.css';
 
 const QrCodeItem = styled.div`
   display: flex;
@@ -23,6 +28,12 @@ const QrCodeImage = styled.img`
   height: auto;
   border-radius: 8px;
   margin-bottom: 1.5rem;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  
+  &:hover {
+    transform: scale(1.03);
+  }
 `;
 
 const QrCodeText = styled.p`
@@ -50,29 +61,68 @@ interface QrCodeCardProps {
   text: string;
   linkUrl?: string;
   linkText?: string;
+  onClick?: () => void;
 }
 
 const QrCodeCard: React.FC<QrCodeCardProps> = ({ 
   imageUrl, 
   imageAlt, 
   text,
   linkUrl,
-  linkText
+  linkText,
+  onClick
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleImageClick = () => {
+    if (onClick) {
+      onClick();
+    } else {
+      setIsOpen(true);
+    }
+  };
+
   return (
-    <QrCodeItem>
-      <QrCodeImage src={imageUrl} alt={imageAlt} />
-      <QrCodeText>
-        {linkUrl && linkText ? (
-          <>
-            <StyledLink href={linkUrl} target="_blank">{linkText}</StyledLink>
-            {" "}或{text}
-          </>
-        ) : (
-          text
-        )}
-      </QrCodeText>
-    </QrCodeItem>
+    <>
+      <QrCodeItem>
+        <QrCodeImage 
+          src={imageUrl} 
+          alt={imageAlt} 
+          onClick={handleImageClick}
+          title="点击查看大图"
+        />
+        <QrCodeText>
+          {linkUrl && linkText ? (
+            <>
+              <StyledLink href={linkUrl} target="_blank">{linkText}</StyledLink>
+              {" "}或{text}
+            </>
+          ) : (
+            text
+          )}
+        </QrCodeText>
+      </QrCodeItem>
+
+      {!onClick && (
+        <Lightbox
+          open={isOpen}
+          close={() => setIsOpen(false)}
+          slides={[{ src: imageUrl, alt: imageAlt }]}
+          plugins={[Zoom, Counter]}
+          zoom={{
+            maxZoomPixelRatio: 3,
+            zoomInMultiplier: 1.5,
+          }}
+          carousel={{
+            finite: true,
+          }}
+          render={{
+            buttonPrev: () => null,
+            buttonNext: () => null,
+          }}
+        />
+      )}
+    </>
   );
 };
 

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

@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
+import Zoom from 'yet-another-react-lightbox/plugins/zoom';
+import Counter from 'yet-another-react-lightbox/plugins/counter';
+import 'yet-another-react-lightbox/plugins/counter.css';
+import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
+import 'yet-another-react-lightbox/plugins/thumbnails.css';
 import QrCodeCard from './QrCodeCard';
 import { qrCodes } from './QrCodeData';
 
@@ -36,6 +43,22 @@ const QrCodesContainer = styled.div`
 `;
 
 const Community: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [photoIndex, setPhotoIndex] = useState(0);
+
+  // 为Lightbox准备图片数据
+  const slides = qrCodes.map(qrCode => ({
+    src: qrCode.imageUrl,
+    alt: qrCode.imageAlt,
+    title: qrCode.text
+  }));
+
+  // 处理打开Lightbox并设置初始图片
+  const openLightbox = (index: number) => {
+    setPhotoIndex(index);
+    setIsOpen(true);
+  };
+
   return (
     <CommunityContainer id="community">
       <CommunityContent>
@@ -50,9 +73,28 @@ const Community: React.FC = () => {
               text={qrCode.text}
               linkUrl={qrCode.linkUrl}
               linkText={qrCode.linkText}
+              onClick={() => openLightbox(index)}
             />
           ))}
         </QrCodesContainer>
+
+        {/* 全局图片查看器 */}
+        <Lightbox
+          open={isOpen}
+          close={() => setIsOpen(false)}
+          slides={slides}
+          index={photoIndex}
+          plugins={[Zoom, Counter, Thumbnails]}
+          zoom={{
+            maxZoomPixelRatio: 3,
+            zoomInMultiplier: 1.5,
+          }}
+          thumbnails={{
+            position: 'bottom',
+            width: 120,
+            height: 80,
+          }}
+        />
       </CommunityContent>
     </CommunityContainer>
   );