fix: 图片管理优化

app/admin/list/page.tsx

@@ -1,28 +1,25 @@
-import { fetchImagesList, fetchImagesTotal } from '~/server/lib/query'
-import { HandleListProps } from '~/types'
+import {
+  fetchServerImagesListByTag,
+  fetchServerImagesPageTotalByTag
+} from '~/server/lib/query'
+import { ImageServerHandleProps } from '~/types'
 import ListProps from '~/components/admin/list/ListProps'
 
 export default async function List() {
-  const getData = async (pageNum: number) => {
+  const getData = async (pageNum: number, tag: string) => {
     'use server'
-    return await fetchImagesList(pageNum)
+    return await fetchServerImagesListByTag(pageNum, tag)
   }
 
-  const data = await getData(1)
-
-  const getTotal = async () => {
+  const getTotal = async (tag: string) => {
     'use server'
-    return await fetchImagesTotal()
+    return await fetchServerImagesPageTotalByTag(tag)
   }
 
-  const total = await getTotal()
-
-  const props: HandleListProps = {
+  const props: ImageServerHandleProps = {
     handle: getData,
-    args: 'getImages',
+    args: 'getImages-server',
     totalHandle: getTotal,
-    data: data,
-    total: total
   }
 
   return (

components/Masonry.tsx

@@ -5,11 +5,11 @@ import { ImageHandleProps, ImageType } from '~/types'
 import PhotoAlbum from 'react-photo-album'
 import { Button } from '@nextui-org/react'
 import { useSWRInfiniteHook } from '~/hooks/useSWRInfiniteHook'
-import { useSWRPageTotalHooks } from '~/hooks/useSWRPageTotalHooks'
+import { useSWRPageTotalHook } from '~/hooks/useSWRPageTotalHook'
 
 export default function Masonry(props : Readonly<ImageHandleProps>) {
   const [pageNum, setPageNum] = useState(1)
-  const { data: pageTotal } = useSWRPageTotalHooks(props)
+  const { data: pageTotal } = useSWRPageTotalHook(props)
   const { data, isLoading, mutate } = useSWRInfiniteHook(props, pageNum)
 
   const [dataList, setDataList] = useState<ImageType[]>([])

components/admin/list/ImageEditSheet.tsx

@@ -2,15 +2,15 @@
 
 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 { ImageServerHandleProps, ImageType } from '~/types'
+import { useSWRInfiniteServerHook } from '~/hooks/useSWRInfiniteServerHook'
 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)
+export default function ImageEditSheet(props : Readonly<ImageServerHandleProps & { pageNum: number } & { tag: string }>) {
+  const { pageNum, tag, ...restProps } = props
+  const { mutate } = useSWRInfiniteServerHook(restProps, pageNum, tag)
   const { imageEdit, image, setImageEdit, setImageEditData } = useButtonStore(
     (state) => state,
   )

components/admin/list/ListProps.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useState } from 'react'
-import { HandleListProps, ImageType } from '~/types'
-import { usePageSWRHydrated } from '~/hooks/usePageSWRHydrated'
-import { useTotalSWRHydrated } from '~/hooks/useTotalSWRHydrated'
+import { ImageServerHandleProps, ImageType, TagType } from '~/types'
+import { useSWRInfiniteServerHook } from '~/hooks/useSWRInfiniteServerHook'
+import { useSWRPageTotalServerHook } from '~/hooks/useSWRPageTotalServerHook'
 import {
   Card,
   CardBody,
@@ -20,6 +20,8 @@ import {
   ModalFooter,
   Button,
   Pagination,
+  Select,
+  SelectItem,
 } from '@nextui-org/react'
 import { ArrowDown10 } from 'lucide-react'
 import {
@@ -32,17 +34,22 @@ 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'
+import { fetcher } from '~/utils/fetcher'
+import useSWR from 'swr'
 
-export default function ListProps(props : Readonly<HandleListProps>) {
+export default function ListProps(props : Readonly<ImageServerHandleProps>) {
   const [pageNum, setPageNum] = useState(1)
-  const { data, isLoading, error, mutate } = usePageSWRHydrated(props, pageNum)
-  const { data: total, isLoading: totalLoading, error: totalError, mutate: totalMutate } = useTotalSWRHydrated(props)
+  const [tagArray, setTagArray] = useState(new Set([] as string[]))
+  const [tag, setTag] = useState('')
+  const { data, isLoading, error, mutate } = useSWRInfiniteServerHook(props, pageNum, tag)
+  const { data: total, mutate: totalMutate } = useSWRPageTotalServerHook(props, tag)
   const [isOpen, setIsOpen] = useState(false)
   const [image, setImage] = useState({} as ImageType)
   const [deleteLoading, setDeleteLoading] = useState(false)
   const { setImageEdit, setImageEditData, setImageView, setImageViewData } = useButtonStore(
     (state) => state,
   )
+  const { data: tags, isLoading: tagsLoading } = useSWR('/api/v1/get-tags', fetcher)
 
   async function deleteImage() {
     setDeleteLoading(true)
@@ -68,11 +75,35 @@ export default function ListProps(props : Readonly<HandleListProps>) {
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card shadow="sm">
-        <CardHeader className="justify-between">
-          <div className="flex gap-5">
-            <div className="flex flex-col gap-1 items-start justify-center">
-              <h4 className="text-small font-semibold leading-none text-default-600 select-none">图片维护</h4>
-            </div>
+        <CardHeader className="justify-between space-x-2">
+          <div className="flex items-center justify-center w-full sm:w-64 md:w-80">
+            <Select
+              label="标签"
+              placeholder="请选择标签"
+              className="min-w-xs"
+              isLoading={tagsLoading}
+              selectedKeys={tagArray}
+              onSelectionChange={async (keys: any) => {
+                const updatedSet = new Set([] as string[]);
+                updatedSet.add(keys?.currentKey);
+                setTagArray(updatedSet)
+                setTag(keys?.currentKey)
+                await totalMutate()
+                await mutate()
+              }}
+            >
+              <SelectItem key="all" value="all">
+                全部
+              </SelectItem>
+              <SelectItem key="/" value="/">
+                首页
+              </SelectItem>
+              {tags?.map((tag: TagType) => (
+                <SelectItem key={tag.tag_value} value={tag.tag_value}>
+                  {tag.name}
+                </SelectItem>
+              ))}
+            </Select>
           </div>
           <div className="flex items-center space-x-1">
             <Button
@@ -82,6 +113,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
               variant="shadow"
               isLoading={isLoading}
               onClick={async () => {
+                await totalMutate()
                 await mutate()
               }}
             >
@@ -166,6 +198,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
         color="primary"
         size="sm"
         page={pageNum}
+        isDisabled={!total || total === 0}
         onChange={async (page) => {
           setPageNum(page)
           await mutate()
@@ -202,7 +235,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      <ImageEditSheet {...{...props, pageNum}} />
+      <ImageEditSheet {...{...props, pageNum, tag}} />
       <ImageView />
     </div>
   )

hooks/useSWRInfiniteServerHook.ts

@@ -0,0 +1,18 @@
+import useSWR from 'swr'
+import { ImageServerHandleProps } from '~/types'
+
+export const useSWRInfiniteServerHook = ({ handle, args }: ImageServerHandleProps, pageNum: number, tag: string)   => {
+  const { data, error, isLoading, isValidating, mutate } = useSWR([args, pageNum],
+    () => {
+      return handle(pageNum, tag)
+    }, {
+    revalidateOnFocus: false
+  })
+
+  return {
+    data,
+    error,
+    isLoading: isLoading || isValidating,
+    mutate
+  }
+}

hooks/useSWRPageTotalHooks.ts → hooks/useSWRPageTotalHook.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr'
 import { ImageHandleProps } from '~/types'
 
-export const useSWRPageTotalHooks = ({ args, totalHandle, tag }: ImageHandleProps)   => {
+export const useSWRPageTotalHook = ({ args, totalHandle, tag }: ImageHandleProps)   => {
   const { data, error, isLoading, isValidating, mutate } = useSWR([args, tag],
     () => {
       return totalHandle(tag)

hooks/useSWRPageTotalServerHook.ts

@@ -0,0 +1,16 @@
+import useSWR from 'swr'
+import { ImageServerHandleProps } from '~/types'
+
+export const useSWRPageTotalServerHook = ({ args, totalHandle }: ImageServerHandleProps, tag: string)   => {
+  const { data, error, isLoading, isValidating, mutate } = useSWR([args, tag],
+    () => {
+      return totalHandle(tag)
+    })
+
+  return {
+    data,
+    error,
+    isLoading: isLoading || isValidating,
+    mutate
+  }
+}

server/lib/query.ts

@@ -57,39 +57,52 @@ export async function fetchTagsList() {
   return findAll;
 }
 
-export async function fetchImagesList(pageNum: number) {
+export async function fetchServerImagesListByTag(pageNum: number, tag: string) {
+  if (tag === 'all') {
+    tag = ''
+  }
   if (pageNum < 1) {
     pageNum = 1
   }
   const findAll = await db.images.findMany({
     skip: (pageNum - 1) * 8,
     take: 8,
     where: {
-      del: 0
+      del: 0,
+      tag: tag && tag !== '' ? tag : {
+        not: ''
+      },
+      show: 0
     }
   })
 
   return findAll;
 }
 
-export async function fetchTags() {
-  const findAll = await db.tags.findMany({
+export async function fetchServerImagesPageTotalByTag(tag: string) {
+  if (tag === 'all') {
+    tag = ''
+  }
+  const pageTotal = await db.images.count({
     where: {
-      del: 0
+      del: 0,
+      tag: tag && tag !== '' ? tag : {
+        not: ''
+      },
+      show: 0
     }
   })
-
-  return findAll;
+  return pageTotal > 0 ? Math.ceil(pageTotal / 8) : 0
 }
 
-export async function fetchImagesTotal() {
-  const total = await db.images.count({
+export async function fetchTags() {
+  const findAll = await db.tags.findMany({
     where: {
       del: 0
     }
   })
 
-  return total > 0 ? Math.ceil(total / 8) : 0;
+  return findAll;
 }
 
 export async function fetchClientImagesListByTag(pageNum: number, tag: string) {

types/index.ts

@@ -1,20 +1,12 @@
-import { SVGProps } from 'react'
-
-export type IconSvgProps = SVGProps<SVGSVGElement> & {
-  size?: number;
-};
-
 export type HandleProps = {
   handle: () => any
   args: string
 }
 
-export type HandleListProps = {
-  handle: (pageNum: number) => any
+export type ImageServerHandleProps = {
+  handle: (pageNum: number, tag: string) => any
   args: string
-  totalHandle: () => any
-  data: any
-  total: number
+  totalHandle: (tag: string) => any
 }
 
 export type ImageHandleProps = {