fix: 完善标签部分

besscroft · Apr 15, 2024 · 2c9b745 · 2c9b745
1 parent f317ba5
commit 2c9b745
Show file tree

Hide file tree

Showing 19 changed files with 491 additions and 113 deletions.
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
@@ -18,7 +18,7 @@ export default function AdminLayout({
             <aside className="hidden w-[200px] flex-col sm:flex">
               <BaseSide/>
             </aside>
-            <main className="flex w-full h-full flex-1 flex-col overflow-hidden p-2">
+            <main className="flex w-full h-full flex-1 flex-col p-2">
               <Animate className="flex-1">
                 <AntdRegistry>{children}</AntdRegistry>
               </Animate>

diff --git a/app/admin/tag/page.tsx b/app/admin/tag/page.tsx
@@ -36,8 +36,8 @@ export default async function List() {
         </CardHeader>
       </Card>
       <TagList {...props} />
-      <TagAddSheet />
-      <TagEditSheet />
+      <TagAddSheet {...props} />
+      <TagEditSheet {...props} />
     </div>
   )
 }
diff --git a/app/api/get-images/route.ts b/app/api/get-images/route.ts
diff --git a/app/api/get-tags/route.ts b/app/api/get-tags/route.ts
diff --git a/app/api/alist-info/route.ts → app/api/v1/alist-info/route.ts b/app/api/alist-info/route.ts → app/api/v1/alist-info/route.ts
diff --git a/app/api/file-upload/route.ts → app/api/v1/file-upload/route.ts b/app/api/file-upload/route.ts → app/api/v1/file-upload/route.ts
diff --git a/app/api/s3-info/route.ts → app/api/v1/s3-info/route.ts b/app/api/s3-info/route.ts → app/api/v1/s3-info/route.ts
diff --git a/app/api/v1/tag-add/route.ts b/app/api/v1/tag-add/route.ts
@@ -0,0 +1,9 @@
+import 'server-only'
+import { insertTag } from '~/server/lib/operate'
+import { NextRequest } from 'next/server'
+
+export async function POST(req: NextRequest) {
+  const tag = await req.json()
+  const data = await insertTag(tag);
+  return Response.json(data)
+}
diff --git a/app/api/v1/tag-delete/[id]/route.ts b/app/api/v1/tag-delete/[id]/route.ts
@@ -0,0 +1,11 @@
+import 'server-only'
+import { deleteTag } from '~/server/lib/operate'
+import { NextRequest } from 'next/server'
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const data = await deleteTag(params.id);
+  return Response.json(data)
+}
diff --git a/app/api/v1/tag-update/route.ts b/app/api/v1/tag-update/route.ts
@@ -0,0 +1,9 @@
+import 'server-only'
+import { updateTag } from '~/server/lib/operate'
+import { NextRequest } from 'next/server'
+
+export async function PUT(req: NextRequest) {
+  const tag = await req.json()
+  const data = await updateTag(tag);
+  return Response.json(data)
+}
diff --git a/components/admin/settings/AListTabs.tsx b/components/admin/settings/AListTabs.tsx
@@ -6,7 +6,7 @@ import { fetcher } from '~/utils/fetcher'
 import { toast } from 'sonner'
 
 export default function AListTabs() {
-  const { data, error, isLoading } = useSWR('/api/alist-info', fetcher)
+  const { data, error, isLoading } = useSWR('/api/v1/alist-info', fetcher)
 
   if (error) {
     toast.error('请求失败！')

diff --git a/components/admin/settings/S3Tabs.tsx b/components/admin/settings/S3Tabs.tsx
@@ -6,7 +6,7 @@ import { fetcher } from '~/utils/fetcher'
 import { toast } from 'sonner'
 
 export default function S3Tabs() {
-  const { data, error, isLoading } = useSWR('/api/s3-info', fetcher)
+  const { data, error, isLoading } = useSWR('/api/v1/s3-info', fetcher)
 
   if (error) {
     toast.error('请求失败！')

diff --git a/components/admin/tag/TagAddSheet.tsx b/components/admin/tag/TagAddSheet.tsx
@@ -2,11 +2,44 @@
 
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { Button, Input, Switch, cn, Textarea } from '@nextui-org/react'
+import {HandleProps, TagType} from '~/types'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { useSWRHydrated } from '~/hooks/useSWRHydrated'
 
-export default function TagAddSheet() {
+export default function TagAddSheet(props : Readonly<HandleProps>) {
+  const { isLoading, mutate, error } = useSWRHydrated(props)
   const { tagAdd, setTagAdd } = useButtonStore(
     (state) => state,
   )
+  const [data, setData] = useState({} as TagType)
+  const [loading, setLoading] = useState(false)
+
+  async function submit() {
+    if (!data.name || !data.tag_value) {
+      toast.error('请先填写必填项！')
+      return
+    }
+    try {
+      setLoading(true)
+      const res = await fetch('/api/v1/tag-add', {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+        method: 'POST',
+      }).then(response => response.json())
+      toast.success('添加成功！')
+      setTagAdd(false)
+      setData({} as TagType)
+      await mutate()
+    } catch (e) {
+      toast.error('添加失败！')
+    } finally {
+      setLoading(false)
+    }
+  }
 
   return (
     <Sheet
@@ -16,10 +49,83 @@ export default function TagAddSheet() {
     >
       <SheetContent side="left">
         <SheetHeader>
-          <SheetTitle>Are you absolutely sure?</SheetTitle>
-          <SheetDescription>
-            This action cannot be undone. This will permanently delete your account
-            and remove your data from our servers.
+          <SheetTitle>新增标签</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <Input
+              isRequired
+              value={data.name}
+              onValueChange={(value) => setData({ ...data, name: value })}
+              isClearable
+              type="text"
+              variant="bordered"
+              label="标签名称"
+              placeholder="输入标签名称"
+            />
+            <Input
+              isRequired
+              value={data.tag_value}
+              onValueChange={(value) => setData({ ...data, tag_value: value })}
+              isClearable
+              type="text"
+              variant="bordered"
+              label="路由"
+              placeholder="输入路由"
+            />
+            <Textarea
+              value={data.detail}
+              onValueChange={(value) => setData({ ...data, detail: value })}
+              label="详情"
+              variant="bordered"
+              placeholder="输入详情"
+              disableAnimation
+              disableAutosize
+              classNames={{
+                input: "resize-y min-h-[40px]",
+              }}
+            />
+            <Input
+              value={String(data.sort)}
+              onValueChange={(value) => setData({ ...data, sort: Number(value) })}
+              type="number"
+              variant="bordered"
+              label="排序"
+              placeholder="0"
+            />
+            <Switch
+              value={data.show === 0 ? 'true' : 'false'}
+              onValueChange={(value) => setData({ ...data, 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>

diff --git a/components/admin/tag/TagEditSheet.tsx b/components/admin/tag/TagEditSheet.tsx
@@ -2,23 +2,137 @@
 
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '~/components/ui/Sheet'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
+import { HandleProps, TagType } from '~/types'
+import { useSWRHydrated } from '~/hooks/useSWRHydrated'
+import { Button, cn, Input, Switch, Textarea } from '@nextui-org/react'
+import { useState } from 'react'
+import { toast } from 'sonner'
 
-export default function TagEditSheet() {
-  const { tagEdit, tag, setTagEdit } = useButtonStore(
+export default function TagEditSheet(props : Readonly<HandleProps>) {
+  const { isLoading, mutate, error } = useSWRHydrated(props)
+  const { tagEdit, tag, setTagEdit, setTagEditData } = useButtonStore(
     (state) => state,
   )
+  const [loading, setLoading] = useState(false)
+
+  async function submit() {
+    if (!tag?.name || !tag?.tag_value) {
+      toast.error('请先填写必填项！')
+      return
+    }
+    try {
+      setLoading(true)
+      const res = await fetch('/api/v1/tag-update', {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(tag),
+        method: 'PUT',
+      }).then(response => response.json())
+      toast.success('更新成功！')
+      setTagEditData({} as TagType)
+      setTagEdit(false)
+      await mutate()
+    } catch (e) {
+      toast.error('更新失败！')
+    } finally {
+      setLoading(false)
+    }
+  }
 
   return (
     <Sheet
       defaultOpen={false}
       open={tagEdit}
-      onOpenChange={() => setTagEdit(!tagEdit, null)}
+      onOpenChange={(open) => {
+        if (!open) {
+          setTagEdit(false)
+        }
+      }}
     >
       <SheetContent side="left">
         <SheetHeader>
-          <SheetTitle>{tag?.name}</SheetTitle>
-          <SheetDescription>
-            {tag?.detail}
+          <SheetTitle>编辑标签</SheetTitle>
+          <SheetDescription className="space-y-2">
+            <Input
+              isRequired
+              value={tag?.name}
+              onValueChange={(value) => setTagEditData({ ...tag, name: value })}
+              isClearable
+              type="text"
+              variant="bordered"
+              label="标签名称"
+              placeholder="输入标签名称"
+            />
+            <Input
+              isRequired
+              value={tag?.tag_value}
+              onValueChange={(value) => setTagEditData({ ...tag, tag_value: value })}
+              isClearable
+              type="text"
+              variant="bordered"
+              label="路由"
+              placeholder="输入路由"
+            />
+            <Textarea
+              value={tag?.detail}
+              onValueChange={(value) => setTagEditData({ ...tag, detail: value })}
+              label="详情"
+              variant="bordered"
+              placeholder="输入详情"
+              disableAnimation
+              disableAutosize
+              classNames={{
+                input: "resize-y min-h-[40px]",
+              }}
+            />
+            <Input
+              value={String(tag?.sort)}
+              onValueChange={(value) => setTagEditData({ ...tag, sort: Number(value) })}
+              type="number"
+              variant="bordered"
+              label="排序"
+              placeholder="0"
+            />
+            <Switch
+              isSelected={tag?.show === 0}
+              value={tag?.show === 0 ? 'true' : 'false'}
+              onValueChange={(value) => {
+                console.log(value)
+                setTagEditData({ ...tag, 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>