feat: 添加图片旋转功能支持

example/App.jsx

@@ -96,9 +96,13 @@ class App extends React.Component {
   _getStaticImages() {
     let images = [];
     for (let i = 2; i < 12; i++) {
+      // 为部分图片添加旋转效果作为示例
+      const rotateAngle = i === 3 ? 90 : i === 5 ? 180 : i === 7 ? 270 : 0;
       images.push({
         original: `${PREFIX_URL}${i}.jpg`,
         thumbnail: `${PREFIX_URL}${i}t.jpg`,
+        rotate: rotateAngle,
+        description: rotateAngle > 0 ? `旋转 ${rotateAngle}° 的图片` : undefined,
       });
     }
 

src/components/ImageGallery.jsx

@@ -1436,6 +1436,7 @@ class ImageGallery extends React.Component {
         sizes={item.sizes}
         loading={item.loading}
         srcSet={item.srcSet}
+        rotate={item.rotate}
       />
     );
   }
@@ -1644,6 +1645,7 @@ ImageGallery.propTypes = {
       imageSet: imageSetType,
       srcSet: string,
       sizes: string,
+      rotate: number, // 图片旋转角度，支持任意数值（通常为 0, 90, 180, 270）
     })
   ).isRequired,
   showNav: bool,

src/components/Item.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { bool, func, string } from "prop-types";
+import { bool, func, number, string } from "prop-types";
 
 const defaultProps = {
   description: "",
@@ -12,6 +12,7 @@ const defaultProps = {
   sizes: "",
   srcSet: "",
   loading: "eager",
+  rotate: 0,
 };
 
 const Item = React.memo((props) => {
@@ -29,8 +30,12 @@ const Item = React.memo((props) => {
     sizes,
     srcSet,
     loading,
+    rotate,
   } = { ...defaultProps, ...props };
   const itemSrc = isFullscreen ? fullscreen || original : original;
+
+  // 构建图片样式，支持旋转变换
+  const imageStyle = rotate !== 0 ? { transform: `rotate(${rotate}deg)` } : undefined;
 
   return (
     <React.Fragment>
@@ -43,6 +48,7 @@ const Item = React.memo((props) => {
         width={originalWidth}
         sizes={sizes}
         title={originalTitle}
+        style={imageStyle}
         onLoad={(event) => handleImageLoaded(event, original)}
         onError={onImageError}
         loading={loading}
@@ -70,6 +76,7 @@ Item.propTypes = {
   sizes: string,
   srcSet: string,
   loading: string,
+  rotate: number, // 图片旋转角度，支持任意数值（通常为 0, 90, 180, 270）
 };
 
 export default Item;