feat: 新增图片帮助弹窗，优化功能描述

chengetech · May 22, 2024 · 7190b5c · 7190b5c
1 parent 523af79
commit 7190b5c
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 27 deletions.
diff --git a/app/admin/tag/page.tsx b/app/admin/tag/page.tsx
@@ -28,7 +28,7 @@ export default async function List() {
         <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>
+              <h4 className="text-small font-semibold leading-none text-default-600 select-none">相册管理</h4>
             </div>
           </div>
           <div className="flex items-center space-x-2">

diff --git a/components/admin/dashboard/TagTable.tsx b/components/admin/dashboard/TagTable.tsx
@@ -14,9 +14,9 @@ export default function TagTable(props: Readonly<DataProps>) {
           <span className="text-xl font-semibold">{props.data?.showTotal || 0}张</span>
         </CardBody>
       </Card>
-      <Table aria-label="每个标签对应的数量">
+      <Table aria-label="每个相册对应的数量">
         <TableHeader>
-          <TableColumn>标签</TableColumn>
+          <TableColumn>相册</TableColumn>
           <TableColumn>数量/张</TableColumn>
           <TableColumn>显示/张</TableColumn>
         </TableHeader>

diff --git a/components/admin/list/ImageHelpSheet.tsx b/components/admin/list/ImageHelpSheet.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+
+export default function ImageHelpSheet() {
+  const { imageHelp, setImageHelp } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={imageHelp}
+      onOpenChange={(open: boolean) => {
+        if (!open) {
+          setImageHelp(false)
+        }
+      }}
+      modal={false}
+    >
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>帮助</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <p>
+              您在当前页面可以维护图片的数据。
+            </p>
+            <p>
+              您可以为每一张图片打上标签，但请注意不要用特殊字符。
+              为了兼容 SSR 场景，通过路由来获取的参数，如果有特殊字符可能会没法正确访问数据。
+              您可以通过点击图片标签，来访问所有包含该标签的图片。
+            </p>
+            <p>
+              注意，如果您将⌈图片⌋设置为⌈禁用状态⌋，那么未登录时无法以任何方式获取该图片的信息，但不影响通过链接访问图片，因为这个权限由存储方管理。
+            </p>
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/components/admin/list/ListProps.tsx b/components/admin/list/ListProps.tsx
@@ -27,14 +27,15 @@ import {
   Badge,
   Spinner
 } from '@nextui-org/react'
-import { ArrowDown10, Pencil, Trash, Eye, EyeOff, ScanSearch } from 'lucide-react'
+import { ArrowDown10, Pencil, Trash, Eye, EyeOff, ScanSearch, CircleHelp } from 'lucide-react'
 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'
 import { motion } from 'framer-motion'
+import ImageHelpSheet from '~/components/admin/list/ImageHelpSheet'
 
 export default function ListProps(props : Readonly<ImageServerHandleProps>) {
   const [pageNum, setPageNum] = useState(1)
@@ -47,7 +48,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [updateShowLoading, setUpdateShowLoading] = useState(false)
   const [updateShowId, setUpdateShowId] = useState(0)
-  const { setImageEdit, setImageEditData, setImageView, setImageViewData } = useButtonStore(
+  const { setImageEdit, setImageEditData, setImageView, setImageViewData, setImageHelp } = useButtonStore(
     (state) => state,
   )
   const { data: tags, isLoading: tagsLoading } = useSWR('/api/v1/get-tags', fetcher)
@@ -107,8 +108,8 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
         <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="请选择标签"
+              label="相册"
+              placeholder="请选择相册"
               className="min-w-xs"
               size="sm"
               isLoading={tagsLoading}
@@ -136,6 +137,15 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
             </Select>
           </div>
           <div className="flex items-center space-x-1">
+            <Button
+              isIconOnly
+              size="sm"
+              color="warning"
+              aria-label="帮助"
+              onClick={() => setImageHelp(true)}
+            >
+              <CircleHelp />
+            </Button>
             <Button
               color="primary"
               radius="full"
@@ -172,25 +182,25 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                     <Badge content={image.tag_values.split(",").length} color="primary">
                       <Popover placement="top" shadow="sm">
                         <PopoverTrigger className="cursor-pointer">
-                          <Chip variant="shadow" className="flex-1" aria-label="标签">{image.tag_names.length > 8 ? image.tag_names.substring(0, 8) + '...' : image.tag_names}</Chip>
+                          <Chip variant="shadow" className="flex-1" aria-label="相册">{image.tag_names.length > 8 ? image.tag_names.substring(0, 8) + '...' : image.tag_names}</Chip>
                         </PopoverTrigger>
                         <PopoverContent>
                           <div className="px-1 py-2 select-none">
-                            <div className="text-small font-bold">标签</div>
-                            <div className="text-tiny">图片标签，在对应的路由上显示</div>
+                            <div className="text-small font-bold">相册</div>
+                            <div className="text-tiny">图片在对应的相册上显示</div>
                           </div>
                         </PopoverContent>
                       </Popover>
                     </Badge>
                     :
                     <Popover placement="top" shadow="sm">
                       <PopoverTrigger className="cursor-pointer">
-                        <Chip variant="shadow" className="flex-1" aria-label="标签">{image.tag_names}</Chip>
+                        <Chip variant="shadow" className="flex-1" aria-label="相册">{image.tag_names}</Chip>
                       </PopoverTrigger>
                       <PopoverContent>
                         <div className="px-1 py-2 select-none">
-                          <div className="text-small font-bold">标签</div>
-                          <div className="text-tiny">图片标签，在对应的路由上显示</div>
+                          <div className="text-small font-bold">相册</div>
+                          <div className="text-tiny">图片在对应的相册上显示</div>
                         </div>
                       </PopoverContent>
                     </Popover>
@@ -333,6 +343,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
       </Modal>
       <ImageEditSheet {...{...props, pageNum, tag}} />
       <ImageView />
+      <ImageHelpSheet />
     </div>
   )
 }
diff --git a/components/admin/tag/TagAddSheet.tsx b/components/admin/tag/TagAddSheet.tsx
@@ -58,7 +58,7 @@ export default function TagAddSheet(props : Readonly<HandleProps>) {
     >
       <SheetContent side="left">
         <SheetHeader>
-          <SheetTitle>新增标签</SheetTitle>
+          <SheetTitle>新增相册</SheetTitle>
           <SheetDescription className="space-y-2">
             <Input
               isRequired
@@ -67,8 +67,8 @@ export default function TagAddSheet(props : Readonly<HandleProps>) {
               isClearable
               type="text"
               variant="bordered"
-              label="标签名称"
-              placeholder="输入标签名称"
+              label="相册名称"
+              placeholder="输入相册名称"
             />
             <Input
               isRequired

diff --git a/components/admin/tag/TagEditSheet.tsx b/components/admin/tag/TagEditSheet.tsx
@@ -62,7 +62,7 @@ export default function TagEditSheet(props : Readonly<HandleProps>) {
     >
       <SheetContent side="left">
         <SheetHeader>
-          <SheetTitle>编辑标签</SheetTitle>
+          <SheetTitle>编辑相册</SheetTitle>
           <SheetDescription className="space-y-2">
             <Input
               isRequired
@@ -71,8 +71,8 @@ export default function TagEditSheet(props : Readonly<HandleProps>) {
               isClearable
               type="text"
               variant="bordered"
-              label="标签名称"
-              placeholder="输入标签名称"
+              label="相册名称"
+              placeholder="输入相册名称"
             />
             <Input
               isRequired

diff --git a/components/admin/tag/TagHelpSheet.tsx b/components/admin/tag/TagHelpSheet.tsx
@@ -24,10 +24,13 @@ export default function TagHelpSheet() {
           <SheetTitle>帮助</SheetTitle>
           <SheetDescription className="space-y-2">
             <p>
-              您要展示除⌈首页⌋外的其它相册，需要添加新的⌈标签⌋，并标记为可显示状态。
+              您要展示除⌈首页⌋外的其它相册，需要添加新的⌈相册⌋，并标记为可显示状态。
             </p>
             <p>
-              ⌈标签⌋的⌈路由⌋需要带 / 前缀。
+              ⌈相册⌋的⌈路由⌋需要带 / 前缀。
+            </p>
+            <p>
+              注意，如果您将⌈相册⌋设置为⌈禁用状态⌋，那么未登录时无法以任何方式获取该⌈相册⌋下的图片信息。
             </p>
           </SheetDescription>
         </SheetHeader>

diff --git a/components/admin/upload/FileUpload.tsx b/components/admin/upload/FileUpload.tsx
@@ -108,7 +108,7 @@ export default function FileUpload() {
         return
       }
       if (tagArray.length === 0 || tagArray[0] === '') {
-        toast.warning('请先选择标签！')
+        toast.warning('请先选择相册！')
         return
       }
       const data = {
@@ -156,7 +156,7 @@ export default function FileUpload() {
       toast.warning('请先选择挂载目录！')
       file.abort()
     } else if (tagArray.length === 0 || tagArray[0] === '') {
-      toast.warning('请先选择标签！')
+      toast.warning('请先选择相册！')
       file.abort()
     } else {
       toast.info('正在上传文件！')
@@ -346,8 +346,8 @@ export default function FileUpload() {
               isRequired
               size="sm"
               variant="bordered"
-              label="标签"
-              placeholder="请选择标签"
+              label="相册"
+              placeholder="请选择相册"
               isLoading={isLoading}
               selectedKeys={tag}
               onSelectionChange={(keys: any) => {

diff --git a/components/layout/BaseSide.tsx b/components/layout/BaseSide.tsx
@@ -64,7 +64,7 @@ export const BaseSide = () => {
             startContent={<Milestone size={20} className={iconClasses}/>}
             onClick={() => router.push('/admin/tag')}
           >
-            <span className={textClasses}>标签管理</span>
+            <span className={textClasses}>相册管理</span>
           </ListboxItem>
           <ListboxItem
             className={cn(

diff --git a/components/layout/VaulDrawer.tsx b/components/layout/VaulDrawer.tsx
@@ -95,7 +95,7 @@ export default function VaulDrawer() {
                         className={pathname === '/admin/tag' ? activeClasses : ''}
                       >
                         <Drawer.Close className="w-full text-left">
-                          标签管理
+                          相册管理
                         </Drawer.Close>
                       </ListboxItem>
                       <ListboxItem

diff --git a/stores/buttonStores.ts b/stores/buttonStores.ts
@@ -19,6 +19,7 @@ export type ButtonState = {
   MasonryView: boolean
   MasonryViewData: ImageType
   tagHelp: boolean
+  imageHelp: boolean
 }
 
 export type ButtonActions = {
@@ -38,6 +39,7 @@ export type ButtonActions = {
   setMasonryView: (masonryView: boolean) => void
   setMasonryViewData: (masonryViewData: ImageType) => void
   setTagHelp: (tagHelp: boolean) => void
+  setImageHelp: (imageHelp: boolean) => void
 }
 
 export type ButtonStore = ButtonState & ButtonActions
@@ -60,6 +62,7 @@ export const initButtonStore = (): ButtonState => {
     MasonryView: false,
     MasonryViewData: {} as ImageType,
     tagHelp: false,
+    imageHelp: false,
   }
 }
 
@@ -80,6 +83,7 @@ export const defaultInitState: ButtonState = {
   MasonryView: false,
   MasonryViewData: {} as ImageType,
   tagHelp: false,
+  imageHelp: false,
 }
 
 export const createButtonStore = (
@@ -137,6 +141,9 @@ export const createButtonStore = (
         setTagHelp: (tagHelpValue) => set(() => ({
           tagHelp: tagHelpValue,
         })),
+        setImageHelp: (imageHelpValue) => set(() => ({
+          imageHelp: imageHelpValue,
+        })),
       }),
       {
         name: 'pic-impact-button-storage', // name of the item in the storage (must be unique)