feat: 新增详情页照片切换功能

besscroft · Jul 12, 2024 · 94ff8c5 · 94ff8c5
1 parent 15fe8a6
commit 94ff8c5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 6 deletions.
diff --git a/components/BlurImage.tsx b/components/BlurImage.tsx
@@ -4,8 +4,8 @@ import React from 'react'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
 import { Image } from '@nextui-org/image'
 
-export default function BlurImage({ photo }: { photo: any }) {
-  const { setMasonryView, setMasonryViewData } = useButtonStore(
+export default function BlurImage({ photo, dataList }: { photo: any, dataList: any }) {
+  const { setMasonryView, setMasonryViewData, setMasonryViewDataList } = useButtonStore(
     (state) => state,
   )
 
@@ -23,6 +23,7 @@ export default function BlurImage({ photo }: { photo: any }) {
         onClick={() => {
           setMasonryView(true)
           setMasonryViewData(photo)
+          setMasonryViewDataList(dataList)
         }}
         className="duration-700 ease-in-out group-hover:opacity-75 cursor-pointer transition-all will-change-transform hover:scale-[1.01]"
       />

diff --git a/components/Masonry.tsx b/components/Masonry.tsx
@@ -75,7 +75,7 @@ export default function Masonry(props : Readonly<ImageHandleProps>) {
           })) || []
         }
         renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto }) => (
-          <BlurImage key={photo.id} photo={photo} />
+          <BlurImage key={photo.id} photo={photo} dataList={dataList} />
         )}
       />
       <div className="flex items-center justify-center my-4">

diff --git a/components/MasonryItem.tsx b/components/MasonryItem.tsx
@@ -7,7 +7,7 @@ import {
 import { useButtonStore } from '~/app/providers/button-store-Providers'
 import { CopyrightType, DataProps, ImageType } from '~/types'
 import { Image, Tabs, Tab, Card, CardHeader, CardBody, CardFooter, Button, Chip, Link, Avatar, Tooltip } from '@nextui-org/react'
-import { Aperture, Camera, Image as ImageIcon, Images, Link as LinkIcon, ImageDown, Languages, CalendarDays, X, SunMedium, MoonStar, Copyright, Crosshair, Timer, CircleGauge, Share2 } from 'lucide-react'
+import { Aperture, ArrowLeft, ArrowRight, Camera, Image as ImageIcon, Images, Link as LinkIcon, ImageDown, Languages, CalendarDays, X, SunMedium, MoonStar, Copyright, Crosshair, Timer, CircleGauge, Share2 } from 'lucide-react'
 import * as React from 'react'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next-nprogress-bar'
@@ -19,7 +19,7 @@ import useSWR from 'swr'
 export default function MasonryItem() {
   const router = useRouter()
   const pathname = usePathname()
-  const { MasonryView, MasonryViewData, setMasonryView, setMasonryViewData } = useButtonStore(
+  const { MasonryView, MasonryViewData, MasonryViewDataList, setMasonryView, setMasonryViewData } = useButtonStore(
     (state) => state,
   )
   const {data: download = false, mutate: setDownload} = useSWR(['masonry/download', MasonryViewData.url], null)
@@ -29,6 +29,20 @@ export default function MasonryItem() {
     data: MasonryViewData,
   }
 
+  async function loadingHandle(handle: string) {
+    const idx = MasonryViewDataList.findIndex((item: ImageType) => MasonryViewData.id === item.id)
+    if (handle === 'next' && idx === MasonryViewDataList.length - 1) {
+      setMasonryViewData(MasonryViewDataList[0] || MasonryViewData)
+    } else {
+      const [prev, next] = [MasonryViewDataList.at(idx-1), MasonryViewDataList.at(idx+1)]
+      if (handle === 'prev') {
+        setMasonryViewData(prev || MasonryViewData)
+      } else {
+        setMasonryViewData(next || MasonryViewData)
+      }
+    }
+  }
+
   async function downloadImg() {
     setDownload(true)
     try {
@@ -109,7 +123,30 @@ export default function MasonryItem() {
             />
           </div>
           <div className="flex w-full flex-col">
-            <Tabs aria-label="图片预览选择项" color="primary" variant="bordered">
+            {
+              MasonryViewDataList.length > 0 &&
+              <div className="flex w-full space-x-2 mb-2">
+                <Button
+                  color="primary"
+                  className="w-full"
+                  variant="bordered"
+                  startContent={<ArrowLeft />}
+                  onClick={() => loadingHandle('prev')}
+                >
+                  上一张
+                </Button>
+                <Button
+                  color="primary"
+                  className="w-full"
+                  variant="bordered"
+                  startContent={<ArrowRight />}
+                  onClick={() => loadingHandle('next')}
+                >
+                  下一张
+                </Button>
+              </div>
+            }
+            <Tabs className="w-full block" aria-label="图片预览选择项" color="primary" variant="bordered">
               <Tab
                 key="detail"
                 title={

diff --git a/stores/buttonStores.ts b/stores/buttonStores.ts
@@ -21,6 +21,7 @@ export type ButtonState = {
   aListData: Config[]
   MasonryView: boolean
   MasonryViewData: ImageType
+  MasonryViewDataList: ImageType[]
   tagHelp: boolean
   imageHelp: boolean
   uploadHelp: boolean
@@ -45,6 +46,7 @@ export type ButtonActions = {
   setAListEditData: (aListData: Config[]) => void
   setMasonryView: (masonryView: boolean) => void
   setMasonryViewData: (masonryViewData: ImageType) => void
+  setMasonryViewDataList: (masonryViewDataList: ImageType[]) => void
   setTagHelp: (tagHelp: boolean) => void
   setImageHelp: (imageHelp: boolean) => void
   setUploadHelp: (uploadHelp: boolean) => void
@@ -72,6 +74,7 @@ export const initButtonStore = (): ButtonState => {
     aListData: [] as Config[],
     MasonryView: false,
     MasonryViewData: {} as ImageType,
+    MasonryViewDataList: [] as ImageType[],
     tagHelp: false,
     imageHelp: false,
     uploadHelp: false,
@@ -97,6 +100,7 @@ export const defaultInitState: ButtonState = {
   aListData: [] as Config[],
   MasonryView: false,
   MasonryViewData: {} as ImageType,
+  MasonryViewDataList: [] as ImageType[],
   tagHelp: false,
   imageHelp: false,
   uploadHelp: false,
@@ -163,6 +167,9 @@ export const createButtonStore = (
         setMasonryViewData: (masonryViewDataValue) => set(() => ({
           MasonryViewData: masonryViewDataValue,
         })),
+        setMasonryViewDataList: (masonryViewDataListValue) => set(() => ({
+          MasonryViewDataList: masonryViewDataListValue,
+        })),
         setTagHelp: (tagHelpValue) => set(() => ({
           tagHelp: tagHelpValue,
         })),