From c281ed8a3c6487c4584a2a83b5f36015a4d1125e Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Wed, 17 Apr 2024 00:08:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/v1/image-update/route.ts         |   9 ++
 components/admin/list/ImageEditSheet.tsx | 116 +++++++++++++++++++++++
 components/admin/list/ImageView.tsx      |  87 +++++++++++++++++
 components/admin/list/ListProps.tsx      |  18 +++-
 components/admin/tag/TagEditSheet.tsx    |   1 +
 components/ui/Sheet.tsx                  |   4 +-
 server/lib/operate.ts                    |  26 +++++
 stores/buttonStores.ts                   |  29 +++---
 8 files changed, 273 insertions(+), 17 deletions(-)
 create mode 100644 app/api/v1/image-update/route.ts
 create mode 100644 components/admin/list/ImageEditSheet.tsx
 create mode 100644 components/admin/list/ImageView.tsx

diff --git a/app/api/v1/image-update/route.ts b/app/api/v1/image-update/route.ts
new file mode 100644
index 0000000..09fca0e
--- /dev/null
+++ b/app/api/v1/image-update/route.ts
@@ -0,0 +1,9 @@
+import 'server-only'
+import { updateImage } from '~/server/lib/operate'
+import { NextRequest } from 'next/server'
+
+export async function PUT(req: NextRequest) {
+  const image = await req.json()
+  const data = await updateImage(image);
+  return Response.json(data)
+}
\ No newline at end of file
diff --git a/components/admin/list/ImageEditSheet.tsx b/components/admin/list/ImageEditSheet.tsx
new file mode 100644
index 0000000..b3cee7b
--- /dev/null
+++ b/components/admin/list/ImageEditSheet.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { HandleListProps, ImageType } from '~/types'
+import { usePageSWRHydrated } from '~/hooks/usePageSWRHydrated'
+import { Button, cn, Input, Switch, Textarea } from '@nextui-org/react'
+import React, { useState } from 'react'
+import { toast } from 'sonner'
+
+export default function ImageEditSheet(props : Readonly<HandleListProps & { pageNum: number }>) {
+  const { pageNum, ...restProps } = props
+  const { mutate } = usePageSWRHydrated(restProps, pageNum)
+  const { imageEdit, image, setImageEdit, setImageEditData } = useButtonStore(
+    (state) => state,
+  )
+  const [loading, setLoading] = useState(false)
+
+  async function submit() {
+    try {
+      setLoading(true)
+      const res = await fetch('/api/v1/image-update', {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(image),
+        method: 'PUT',
+      }).then(response => response.json())
+      toast.success('更新成功！')
+      setImageEditData({} as ImageType)
+      setImageEdit(false)
+      await mutate()
+    } catch (e) {
+      toast.error('更新失败！')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={imageEdit}
+      onOpenChange={(open) => {
+        if (!open) {
+          setImageEdit(false)
+          setImageEditData({} as ImageType)
+        }
+      }}
+    >
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>编辑标签</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <Textarea
+              value={image?.detail}
+              onValueChange={(value) => setImageEditData({ ...image, detail: value })}
+              label="详情"
+              variant="bordered"
+              placeholder="输入详情"
+              disableAnimation
+              disableAutosize
+              classNames={{
+                input: "resize-y min-h-[40px]",
+              }}
+            />
+            <Input
+              value={String(image?.sort)}
+              onValueChange={(value) => setImageEditData({ ...image, sort: Number(value) })}
+              type="number"
+              variant="bordered"
+              label="排序"
+              placeholder="0"
+            />
+            <Switch
+              isSelected={image?.show === 0}
+              value={image?.show === 0 ? 'true' : 'false'}
+              onValueChange={(value) => setImageEditData({ ...image, show: value ? 0 : 1 })}
+              classNames={{
+                base: cn(
+                  "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
+                  "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+                  "data-[selected=true]:border-primary",
+                ),
+                wrapper: "p-0 h-4 overflow-visible",
+                thumb: cn("w-6 h-6 border-2 shadow-lg",
+                  "group-data-[hover=true]:border-primary",
+                  //selected
+                  "group-data-[selected=true]:ml-6",
+                  // pressed
+                  "group-data-[pressed=true]:w-7",
+                  "group-data-[selected]:group-data-[pressed]:ml-4",
+                ),
+              }}
+            >
+              <div className="flex flex-col gap-1">
+                <p className="text-medium">显示状态</p>
+                <p className="text-tiny text-default-400">
+                  是否需要在首页显示图片
+                </p>
+              </div>
+            </Switch>
+            <Button
+              isLoading={loading}
+              color="primary"
+              variant="shadow"
+              onClick={() => submit()}
+            >
+              更新
+            </Button>
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/components/admin/list/ImageView.tsx b/components/admin/list/ImageView.tsx
new file mode 100644
index 0000000..2811ab4
--- /dev/null
+++ b/components/admin/list/ImageView.tsx
@@ -0,0 +1,87 @@
+'use client'
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { ImageType } from '~/types'
+import { cn, Input, Switch, Textarea, Image } from '@nextui-org/react'
+import React from 'react'
+
+export default function ImageView() {
+  const { imageView, imageViewData, setImageView, setImageViewData } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={imageView}
+      onOpenChange={(open) => {
+        if (!open) {
+          setImageView(false)
+          setImageViewData({} as ImageType)
+        }
+      }}
+    >
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>编辑标签</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <Image
+              isBlurred
+              isZoomed
+              src={imageViewData.url}
+              alt={imageViewData.detail}
+            />
+            <Textarea
+              isReadOnly
+              value={imageViewData?.detail}
+              label="详情"
+              variant="bordered"
+              disableAnimation
+              disableAutosize
+              classNames={{
+                input: "resize-y min-h-[40px]",
+              }}
+            />
+            <Input
+              isReadOnly
+              value={String(imageViewData?.sort)}
+              type="number"
+              variant="bordered"
+              label="排序"
+              placeholder="0"
+            />
+            <Switch
+              isDisabled
+              isSelected={imageViewData?.show === 0}
+              value={imageViewData?.show === 0 ? 'true' : 'false'}
+              classNames={{
+                base: cn(
+                  "inline-flex flex-row-reverse w-full max-w-full bg-content1 hover:bg-content2 items-center",
+                  "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+                  "data-[selected=true]:border-primary",
+                ),
+                wrapper: "p-0 h-4 overflow-visible",
+                thumb: cn("w-6 h-6 border-2 shadow-lg",
+                  "group-data-[hover=true]:border-primary",
+                  //selected
+                  "group-data-[selected=true]:ml-6",
+                  // pressed
+                  "group-data-[pressed=true]:w-7",
+                  "group-data-[selected]:group-data-[pressed]:ml-4",
+                ),
+              }}
+            >
+              <div className="flex flex-col gap-1">
+                <p className="text-medium">显示状态</p>
+                <p className="text-tiny text-default-400">
+                  是否需要在首页显示图片
+                </p>
+              </div>
+            </Switch>
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/components/admin/list/ListProps.tsx b/components/admin/list/ListProps.tsx
index aa90014..9413523 100644
--- a/components/admin/list/ListProps.tsx
+++ b/components/admin/list/ListProps.tsx
@@ -30,6 +30,8 @@ import {
 } from '~/components/ui/ContextMenu'
 import { toast } from 'sonner'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
+import ImageEditSheet from '~/components/admin/list/ImageEditSheet'
+import ImageView from '~/components/admin/list/ImageView'
 
 export default function ListProps(props : Readonly<HandleListProps>) {
   const [pageNum, setPageNum] = useState(1)
@@ -38,7 +40,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
   const [isOpen, setIsOpen] = useState(false)
   const [image, setImage] = useState({} as ImageType)
   const [deleteLoading, setDeleteLoading] = useState(false)
-  const { setImageEdit, setImageEditData } = useButtonStore(
+  const { setImageEdit, setImageEditData, setImageView, setImageViewData } = useButtonStore(
     (state) => state,
   )
 
@@ -97,7 +99,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
                   <ContextMenuTrigger>
                     <Card className="h-64">
                       <CardHeader className="flex gap-3">
-                        <p>{image.detail}</p>
+                        <Chip variant="shadow">{image.tag}</Chip>
                       </CardHeader>
                       <CardBody>
                         <p>{image.detail || '没有介绍'}</p>
@@ -128,6 +130,13 @@ export default function ListProps(props : Readonly<HandleListProps>) {
                     </Card>
                   </ContextMenuTrigger>
                   <ContextMenuContent>
+                    <ContextMenuItem
+                      className="cursor-pointer"
+                      onClick={() => {
+                        setImageViewData(image)
+                        setImageView(true)
+                      }}
+                    >查看</ContextMenuItem>
                     <ContextMenuItem
                       className="cursor-pointer"
                       onClick={() => {
@@ -154,11 +163,10 @@ export default function ListProps(props : Readonly<HandleListProps>) {
       <Pagination
         className="!m-0"
         total={total}
-        color="secondary"
+        color="primary"
         size="sm"
         page={pageNum}
         onChange={async (page) => {
-          console.log(page)
           setPageNum(page)
           await mutate()
         }}
@@ -194,6 +202,8 @@ export default function ListProps(props : Readonly<HandleListProps>) {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      <ImageEditSheet {...{...props, pageNum}} />
+      <ImageView {...{...props, pageNum}} />
     </div>
   )
 }
\ No newline at end of file
diff --git a/components/admin/tag/TagEditSheet.tsx b/components/admin/tag/TagEditSheet.tsx
index 82b6e4c..054843a 100644
--- a/components/admin/tag/TagEditSheet.tsx
+++ b/components/admin/tag/TagEditSheet.tsx
@@ -47,6 +47,7 @@ export default function TagEditSheet(props : Readonly<HandleProps>) {
       onOpenChange={(open) => {
         if (!open) {
           setTagEdit(false)
+          setTagEditData({} as TagType)
         }
       }}
     >
diff --git a/components/ui/Sheet.tsx b/components/ui/Sheet.tsx
index 0f850db..f7dd33d 100644
--- a/components/ui/Sheet.tsx
+++ b/components/ui/Sheet.tsx
@@ -38,9 +38,9 @@ const sheetVariants = cva(
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-full sm:w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        left: "inset-y-0 left-0 h-full w-full sm:w-1/3 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
         right:
-          "inset-y-0 right-0 h-full w-full sm:w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "inset-y-0 right-0 h-full w-full sm:w-1/3 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
       },
     },
     defaultVariants: {
diff --git a/server/lib/operate.ts b/server/lib/operate.ts
index b0fab58..63214ea 100644
--- a/server/lib/operate.ts
+++ b/server/lib/operate.ts
@@ -86,4 +86,30 @@ export async function deleteImage(id: number) {
     }
   })
   return resultRow
+}
+
+export async function updateImage(image: ImageType) {
+  if (!image.sort || image.sort < 0) {
+    image.sort = 0
+  }
+  if (!image.rating || image.rating < 0) {
+    image.rating = 0
+  }
+  const resultRow = await db.images.update({
+    where: {
+      id: Number(image.id)
+    },
+    data: {
+      url: image.url,
+      exif: image.exif,
+      tag: image.tag,
+      detail: image.detail,
+      sort: image.sort,
+      show: image.show,
+      rating: image.rating,
+      update_time: new Date(),
+    }
+  }
+  )
+  return resultRow
 }
\ No newline at end of file
diff --git a/stores/buttonStores.ts b/stores/buttonStores.ts
index aec4bdb..92ac5ba 100644
--- a/stores/buttonStores.ts
+++ b/stores/buttonStores.ts
@@ -7,17 +7,19 @@ export type ButtonState = {
   tagEdit: boolean
   tag: TagType
   image: ImageType
-  imageAdd: boolean
   imageEdit: boolean
+  imageViewData: ImageType
+  imageView: boolean
 }
 
 export type ButtonActions = {
   setTagAdd: (tagAdd: boolean) => void
   setTagEdit: (tagEdit: boolean) => void
   setTagEditData: (tag: TagType) => void
-  setImageAdd: (imageAdd: boolean) => void
   setImageEdit: (imageEdit: boolean) => void
   setImageEditData: (image: ImageType) => void
+  setImageView: (imageView: boolean) => void
+  setImageViewData: (imageViewData: ImageType) => void
 }
 
 export type ButtonStore = ButtonState & ButtonActions
@@ -27,9 +29,10 @@ export const initButtonStore = (): ButtonState => {
     tagAdd: false,
     tagEdit: false,
     tag: {} as TagType,
-    imageAdd: false,
     imageEdit: false,
-    image: {} as ImageType
+    image: {} as ImageType,
+    imageView: false,
+    imageViewData: {} as ImageType
   }
 }
 
@@ -37,9 +40,10 @@ export const defaultInitState: ButtonState = {
   tagAdd: false,
   tagEdit: false,
   tag: {} as TagType,
-  imageAdd: false,
   imageEdit: false,
-  image: {} as ImageType
+  image: {} as ImageType,
+  imageView: false,
+  imageViewData: {} as ImageType
 }
 
 export const createButtonStore = (
@@ -58,14 +62,17 @@ export const createButtonStore = (
         setTagEditData: (tagValue) => set(() => ({
           tag: tagValue,
         })),
-        setImageAdd: (imageAddValue) => set(() => ({
-          imageAdd: imageAddValue,
-        })),
         setImageEdit: (imageEditValue) => set(() => ({
           imageEdit: imageEditValue,
         })),
-        setImageEditData: (imageValue) => set(() => ({
-          image: imageValue,
+        setImageEditData: (imageDataValue) => set(() => ({
+          image: imageDataValue,
+        })),
+        setImageView: (imageViewValue) => set(() => ({
+          imageView: imageViewValue,
+        })),
+        setImageViewData: (imageViewDataValue) => set(() => ({
+          imageViewData: imageViewDataValue,
         })),
       }),
       {