feat: 新增 tag 编辑 Sheet

app/admin/tag/page.tsx

@@ -6,6 +6,7 @@ import { HandleProps } from '~/types'
 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'
 
 export default async function List() {
 
@@ -36,6 +37,7 @@ export default async function List() {
       </Card>
       <TagList {...props} />
       <TagAddSheet />
+      <TagEditSheet />
     </div>
   )
 }

components/admin/tag/TagEditSheet.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
+
+export default function TagEditSheet() {
+  const { tagEdit, tag, setTagEdit } = useButtonStore(
+    (state) => state,
+  )
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={tagEdit}
+      onOpenChange={() => setTagEdit(!tagEdit, null)}
+    >
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>{tag?.name}</SheetTitle>
+          <SheetDescription>
+            {tag?.detail}
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  )
+}

components/admin/tag/TagList.tsx

@@ -13,26 +13,23 @@ import {
 } from '~/components/ui/ContextMenu'
 import { toast } from 'sonner'
 import DefaultTag from '~/components/admin/tag/DefaultTag'
+import { TagType } from '~/types'
+import { useButtonStore } from '~/app/providers/button-store-Providers'
 
-interface DataType {
-  id: number;
-  name: string;
-  tag_value: string;
-  detail: string;
-  show: number;
-  sort: number;
-}
 
 export default function TagList(props : Readonly<HandleProps>) {
   const { data, isLoading, error } = useSWRHydrated(props)
+  const { setTagEdit } = useButtonStore(
+    (state) => state,
+  )
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {
         !isLoading && !error && data ?
           <>
             <DefaultTag />
-            {data.map((tag: DataType) => (
+            {data.map((tag: TagType) => (
             <ContextMenu key={tag.id}>
               <ContextMenuTrigger>
                 <Card>
@@ -79,8 +76,14 @@ export default function TagList(props : Readonly<HandleProps>) {
                 </Card>
               </ContextMenuTrigger>
               <ContextMenuContent>
-                <ContextMenuItem className="cursor-pointer" onClick={() => toast.warning('还没写！')}>编辑</ContextMenuItem>
-                <ContextMenuItem className="cursor-pointer" onClick={() => toast.warning('还没写！')}>删除</ContextMenuItem>
+                <ContextMenuItem
+                  className="cursor-pointer"
+                  onClick={() => setTagEdit(true, tag)}
+                >编辑</ContextMenuItem>
+                <ContextMenuItem
+                  className="cursor-pointer"
+                  onClick={() => toast.warning('还没写！')}
+                >删除</ContextMenuItem>
               </ContextMenuContent>
             </ContextMenu>
             ))}

stores/buttonStores.ts

@@ -1,22 +1,32 @@
 import { createStore } from 'zustand/vanilla'
 import { persist, createJSONStorage } from 'zustand/middleware'
+import { TagType } from '~/types'
 
 export type ButtonState = {
   tagAdd: boolean
+  tagEdit: boolean
+  tag: TagType | null
 }
 
 export type ButtonActions = {
   setTagAdd: (tagAdd: boolean) => void
+  setTagEdit: (tagEdit: boolean, tag: TagType | null) => void
 }
 
 export type ButtonStore = ButtonState & ButtonActions
 
 export const initButtonStore = (): ButtonState => {
-  return { tagAdd: false }
+  return {
+    tagAdd: false,
+    tagEdit: false,
+    tag: null
+  }
 }
 
 export const defaultInitState: ButtonState = {
   tagAdd: false,
+  tagEdit: false,
+  tag: null
 }
 
 export const createButtonStore = (
@@ -29,6 +39,10 @@ export const createButtonStore = (
         setTagAdd: (tagAddValue) => set(() => ({
           tagAdd: tagAddValue
         })),
+        setTagEdit: (tagEditValue, tagValue) => set(() => ({
+          tagEdit: tagEditValue,
+          tag: tagValue
+        }))
       }),
       {
         name: 'pic-impact-button-storage', // name of the item in the storage (must be unique)

types/index.ts

@@ -7,4 +7,13 @@ export type IconSvgProps = SVGProps<SVGSVGElement> & {
 export type HandleProps = {
   handle: () => any
   args: string
+}
+
+export type TagType = {
+  id: number;
+  name: string;
+  tag_value: string;
+  detail: string;
+  show: number;
+  sort: number;
 }