feat: 新增 tag 帮助 sheet

app/admin/tag/page.tsx

@@ -7,6 +7,8 @@ import React from 'react'
 import TagAddSheet from '~/components/admin/tag/TagAddSheet'
 import TagAddButton from '~/components/admin/tag/TagAddButton'
 import TagEditSheet from '~/components/admin/tag/TagEditSheet'
+import TagHelpSheet from '~/components/admin/tag/TagHelpSheet'
+import TagHelp from '~/components/admin/tag/TagHelp'
 
 export default async function List() {
 
@@ -30,6 +32,7 @@ export default async function List() {
             </div>
           </div>
           <div className="flex items-center space-x-2">
+            <TagHelp />
             <TagAddButton />
             <RefreshButton {...props} />
           </div>
@@ -38,6 +41,7 @@ export default async function List() {
       <TagList {...props} />
       <TagAddSheet {...props} />
       <TagEditSheet {...props} />
+      <TagHelpSheet />
     </div>
   )
 }

components/admin/tag/TagHelp.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { Button } from '@nextui-org/react'
+import React from 'react'
+import { CircleHelp } from 'lucide-react'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+
+export default function TagHelp() {
+  const { setTagHelp } = useButtonStore(
+    (state) => state,
+  )
+  return (
+    <Button
+      isIconOnly
+      size="sm"
+      color="warning"
+      aria-label="帮助"
+      onClick={() => setTagHelp(true)}
+    >
+      <CircleHelp />
+    </Button>
+  )
+}

components/admin/tag/TagHelpSheet.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+
+export default function TagHelpSheet() {
+  const { tagHelp, setTagHelp } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={tagHelp}
+      onOpenChange={(open: boolean) => {
+        if (!open) {
+          setTagHelp(false)
+        }
+      }}
+      modal={false}
+    >
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>帮助</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <p>
+              您要展示除⌈首页⌋外的其它相册，需要添加新的⌈标签⌋，并标记为可显示状态。
+            </p>
+            <p>
+              ⌈标签⌋的⌈路由⌋需要带 / 前缀。
+            </p>
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}

stores/buttonStores.ts

@@ -18,6 +18,7 @@ export type ButtonState = {
   aListData: Config[]
   MasonryView: boolean
   MasonryViewData: ImageType
+  tagHelp: boolean
 }
 
 export type ButtonActions = {
@@ -36,6 +37,7 @@ export type ButtonActions = {
   setAListEditData: (aListData: Config[]) => void
   setMasonryView: (masonryView: boolean) => void
   setMasonryViewData: (masonryViewData: ImageType) => void
+  setTagHelp: (tagHelp: boolean) => void
 }
 
 export type ButtonStore = ButtonState & ButtonActions
@@ -57,6 +59,7 @@ export const initButtonStore = (): ButtonState => {
     aListData: [] as Config[],
     MasonryView: false,
     MasonryViewData: {} as ImageType,
+    tagHelp: false,
   }
 }
 
@@ -76,6 +79,7 @@ export const defaultInitState: ButtonState = {
   aListData: [] as Config[],
   MasonryView: false,
   MasonryViewData: {} as ImageType,
+  tagHelp: false,
 }
 
 export const createButtonStore = (
@@ -130,6 +134,9 @@ export const createButtonStore = (
         setMasonryViewData: (masonryViewDataValue) => set(() => ({
           MasonryViewData: masonryViewDataValue,
         })),
+        setTagHelp: (tagHelpValue) => set(() => ({
+          tagHelp: tagHelpValue,
+        })),
       }),
       {
         name: 'pic-impact-button-storage', // name of the item in the storage (must be unique)