笔记图片查看 可切换

src/Column/components/ColumnContent.tsx

@@ -3,7 +3,7 @@ import useRequest from '@ahooksjs/use-request/es'
 import { useHistory } from 'react-router-dom'
 import dayjs from 'dayjs'
 
-import { Modal, message, Watermark } from 'antd'
+import { Modal, message, Watermark, Image } from 'antd'
 import { StarFilled, StarOutlined, EyeOutlined } from '@ant-design/icons'
 import { ReactComponent as Close } from 'assets/close.svg'
 
@@ -311,15 +311,17 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
                 ))}
               </div>
               <div className="operate-file-wrapper">
-                {detail?.ImgUrlList?.map((item, index) => (
-                  <React.Fragment key={index}>
-                    {item && (
-                      <div className="operate-image-item" key={item} onClick={handleOnClickPicture.bind(this, item)}>
-                        <img src={item} alt={'图片' + item} className="operate-image" />
-                      </div>
-                    )}
-                  </React.Fragment>
-                ))}
+                <Image.PreviewGroup>
+                  {detail?.ImgUrlList?.map((item, index) => (
+                    <React.Fragment key={index}>
+                      {item && (
+                        <div className="operate-image-item" key={item}>
+                          <Image width={112} height={112} src={item} />
+                        </div>
+                      )}
+                    </React.Fragment>
+                  ))}
+                </Image.PreviewGroup>
               </div>
               <div className="columndetail-category-label g-flex g-flex-v-center g-flex-wap">
                 {type !== 'list' ? (