Merge pull request #101 from besscroft/dev

v0.9.5
besscroft · Jul 12, 2024 · 1e91b4a · 1e91b4a
2 parents 47a6f0f + 6d48dbd
commit 1e91b4a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 34 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,20 +29,17 @@ export default function MasonryItem() {
     data: MasonryViewData,
   }
 
-  async function handleOnClick() {
-    const url = window.location.origin + (pathname === '/' ? '/preview/' : pathname + '/preview/') + MasonryViewData.id
-    if (navigator.canShare({ url })) {
-      try {
-        await navigator.share({
-          title: MasonryViewData.title,
-          text: MasonryViewData.detail,
-          url: url
-        });
-      } catch (error) {
-        toast.warning('分享发生错误！', { duration: 500 })
-      }
+  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 {
-      toast.warning('您的浏览器不支持！', { duration: 500 })
+      const [prev, next] = [MasonryViewDataList.at(idx-1), MasonryViewDataList.at(idx+1)]
+      if (handle === 'prev') {
+        setMasonryViewData(prev || MasonryViewData)
+      } else {
+        setMasonryViewData(next || MasonryViewData)
+      }
     }
   }
 
@@ -87,21 +84,6 @@ export default function MasonryItem() {
             <p>{MasonryViewData.title}</p>
           </div>
           <div className="flex items-center space-x-4">
-            {
-              navigator.canShare && typeof navigator.canShare === 'function' &&
-              <Tooltip content="分享">
-                <Button
-                  isIconOnly
-                  variant="shadow"
-                  size="sm"
-                  aria-label="分享"
-                  className="bg-white dark:bg-gray-800"
-                  onClick={() => handleOnClick()}
-                >
-                  <Share2 size={20}/>
-                </Button>
-              </Tooltip>
-            }
             <Tooltip content="切换主题">
               <Button
                 isIconOnly
@@ -141,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,
         })),