From d113fc5de14849fa1e1991c2ddd1074abdb2b1c3 Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Tue, 9 Apr 2024 22:09:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=87=E7=AD=BE=E5=92=8C=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/list/page.tsx     | 130 ++++++++++++++++++++++++++++++++----
 app/admin/tag/page.tsx      | 117 ++++++++++++++++++++++++++++----
 app/admin/upload/page.tsx   |  25 +++++--
 components/AListTabs.tsx    |   2 +-
 components/UploadSelect.tsx |  56 ++++++++++++++++
 5 files changed, 296 insertions(+), 34 deletions(-)
 create mode 100644 components/UploadSelect.tsx

diff --git a/app/admin/list/page.tsx b/app/admin/list/page.tsx
index 1e61847..cf6971b 100644
--- a/app/admin/list/page.tsx
+++ b/app/admin/list/page.tsx
@@ -1,22 +1,126 @@
-import { Card, CardBody } from '@nextui-org/card'
+'use client'
+
+import React from 'react'
+import { Card, CardHeader } from '@nextui-org/card'
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
+import { Table } from 'antd'
+import type { TableProps } from 'antd'
+import useSWR from 'swr'
+import { fetcher } from '~/utils/fetcher'
+import { toast } from 'sonner'
+import { DeleteDocumentBulkIcon, EditDocumentBulkIcon, SendFilledIcon, LinkIcon } from '@nextui-org/shared-icons'
+
+interface DataType {
+  id: number;
+  tag: string;
+  url: string;
+  exif: any;
+  rating: number;
+  detail: string;
+  show: number;
+  sort: number;
+}
+
+const iconClasses = 'text-xl text-default-500 pointer-events-none flex-shrink-0'
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: '标签',
+    dataIndex: 'tag',
+  },
+  {
+    title: '评分',
+    dataIndex: 'rating',
+  },
+  {
+    title: '说明',
+    dataIndex: 'detail',
+  },
+  {
+    title: '显示',
+    dataIndex: 'show',
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (_, record) => (
+      <Dropdown>
+        <DropdownTrigger>
+          <Button
+            isIconOnly
+            variant="bordered"
+          >
+            <SendFilledIcon />
+          </Button>
+        </DropdownTrigger>
+        <DropdownMenu variant="faded" aria-label="图片操作选项卡">
+          <DropdownItem
+            key="edit"
+            description="编辑图片信息"
+            startContent={<EditDocumentBulkIcon className={iconClasses} />}
+            onClick={() => toast.warning('还没写！')}
+          >
+            编辑
+          </DropdownItem>
+          <DropdownItem
+            key="edit"
+            description="同步图片地址"
+            startContent={<LinkIcon className={iconClasses} />}
+            onClick={() => toast.warning('还没写！')}
+          >
+            同步
+          </DropdownItem>
+          <DropdownItem
+            key="delete"
+            description="删除图片"
+            startContent={<DeleteDocumentBulkIcon className={iconClasses + ' text-red-500'} />}
+            onClick={() => toast.warning('还没写！')}
+          >
+            删除
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    ),
+  },
+];
 
 export default async function List() {
+  const { data, error, isLoading, isValidating, mutate  } = useSWR('/api/get-images', fetcher)
+
+  if (error) {
+    toast.error('数据获取失败！')
+  }
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
-        <CardBody>
-          <p>
-            图片维护
-          </p>
-        </CardBody>
-      </Card>
-      <Card className="flex-1">
-        <CardBody>
-          <p>
-            图片维护页面
-          </p>
-        </CardBody>
+        <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>
+          </div>
+          <Button
+            color="primary"
+            radius="full"
+            size="sm"
+            isLoading={isValidating}
+            onClick={() => mutate()}
+          >
+            刷新
+          </Button>
+        </CardHeader>
       </Card>
+      <Table
+        bordered
+        columns={columns}
+        dataSource={data}
+        loading={isValidating}
+      />
     </div>
   )
 }
\ No newline at end of file
diff --git a/app/admin/tag/page.tsx b/app/admin/tag/page.tsx
index 695c44a..b03b9ed 100644
--- a/app/admin/tag/page.tsx
+++ b/app/admin/tag/page.tsx
@@ -1,22 +1,111 @@
-import { Card, CardBody } from '@nextui-org/card'
+'use client'
+
+import React from 'react'
+import { Card, CardHeader } from '@nextui-org/card'
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react'
+import { Table } from 'antd'
+import type { TableProps } from 'antd'
+import useSWR from 'swr'
+import { fetcher } from '~/utils/fetcher'
+import { toast } from 'sonner'
+import { DeleteDocumentBulkIcon, EditDocumentBulkIcon, SendFilledIcon } from '@nextui-org/shared-icons'
+
+interface DataType {
+  id: number;
+  name: string;
+  tag_value: string;
+  detail: string;
+  show: number;
+}
+
+const iconClasses = 'text-xl text-default-500 pointer-events-none flex-shrink-0'
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: '标签名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '标签值',
+    dataIndex: 'tag_value',
+  },
+  {
+    title: '说明',
+    dataIndex: 'detail',
+  },
+  {
+    title: '显示',
+    dataIndex: 'show',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    render: (_, record) => (
+      <Dropdown>
+        <DropdownTrigger>
+          <Button
+            isIconOnly
+            variant="bordered"
+          >
+            <SendFilledIcon />
+          </Button>
+        </DropdownTrigger>
+        <DropdownMenu variant="faded" aria-label="标签操作选项卡">
+          <DropdownItem
+            key="edit"
+            description="编辑标签信息"
+            startContent={<EditDocumentBulkIcon className={iconClasses} />}
+            onClick={() => toast.warning('还没写！')}
+          >
+            编辑
+          </DropdownItem>
+          <DropdownItem
+            key="delete"
+            description="删除标签"
+            startContent={<DeleteDocumentBulkIcon className={iconClasses + ' text-red-500'} />}
+            onClick={() => toast.warning('还没写！')}
+          >
+            删除
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    ),
+  },
+];
+
+export default function List(callback: any, deps: React.DependencyList) {
+  const { data, error, isLoading, isValidating, mutate  } = useSWR('/api/get-tags', fetcher)
+
+  if (error) {
+    toast.error('数据获取失败！')
+  }
 
-export default async function List() {
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
-        <CardBody>
-          <p>
-            标签管理
-          </p>
-        </CardBody>
-      </Card>
-      <Card className="flex-1">
-        <CardBody>
-          <p>
-            标签管理页面
-          </p>
-        </CardBody>
+        <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>
+          </div>
+          <Button
+            color="primary"
+            radius="full"
+            size="sm"
+            isLoading={isValidating}
+            onClick={() => mutate()}
+          >
+            刷新
+          </Button>
+        </CardHeader>
       </Card>
+      <Table
+        bordered
+        columns={columns}
+        dataSource={data}
+        loading={isValidating}
+      />
     </div>
   )
 }
\ No newline at end of file
diff --git a/app/admin/upload/page.tsx b/app/admin/upload/page.tsx
index cd7add0..f031681 100644
--- a/app/admin/upload/page.tsx
+++ b/app/admin/upload/page.tsx
@@ -1,18 +1,31 @@
-import { Card, CardBody } from '@nextui-org/card'
+import { Card, CardBody, CardHeader } from '@nextui-org/card'
 import FileUpload from '~/components/FileUpload'
+import { Button } from '@nextui-org/react'
+import UploadSelect from '~/components/UploadSelect'
 
 export default async function Upload() {
 
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
-        <CardBody>
-          <p>
-            上传
-          </p>
-        </CardBody>
+        <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>
+          </div>
+          <Button
+            color="primary"
+            radius="full"
+            size="sm"
+          >
+            提交
+          </Button>
+        </CardHeader>
       </Card>
       <Card className="flex-1">
+        <UploadSelect />
         <CardBody>
           <FileUpload />
         </CardBody>
diff --git a/components/AListTabs.tsx b/components/AListTabs.tsx
index 6bb467b..0adefda 100644
--- a/components/AListTabs.tsx
+++ b/components/AListTabs.tsx
@@ -43,7 +43,7 @@ export default function AListTabs() {
                 data.map((item: any) => (
                   <TableRow key={item.id}>
                     <TableCell>{item.config_key}</TableCell>
-                    <TableCell>{item.config_value || 'N&A'}</TableCell>
+                    <TableCell className="truncate max-w-60">{item.config_value || 'N&A'}</TableCell>
                   </TableRow>
                 ))
               }
diff --git a/components/UploadSelect.tsx b/components/UploadSelect.tsx
new file mode 100644
index 0000000..af92018
--- /dev/null
+++ b/components/UploadSelect.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { Button, Select, SelectItem } from '@nextui-org/react'
+import {CardHeader} from "@nextui-org/card";
+
+export default async function UploadSelect() {
+  const animals = [
+    {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
+    {label: "Dog", value: "dog", description: "The most popular pet in the world"},
+    {label: "Elephant", value: "elephant", description: "The largest land animal"},
+  ];
+
+  const storages = [
+    {
+      label: 'S3',
+      value: 's3',
+    },
+    {
+      label: 'AList',
+      value: 'alist',
+    }
+  ]
+
+  return (
+    <CardHeader className="justify-between space-x-1">
+      <Select
+        isRequired
+        color="primary"
+        variant="bordered"
+        label="存储"
+        placeholder="请选择存储"
+        defaultSelectedKeys={["cat"]}
+      >
+        {storages.map((storage) => (
+          <SelectItem key={storage.value} value={storage.value}>
+            {storage.label}
+          </SelectItem>
+        ))}
+      </Select>
+      <Select
+        isRequired
+        color="secondary"
+        variant="bordered"
+        label="标签"
+        placeholder="请选择标签"
+        defaultSelectedKeys={["cat"]}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.value} value={animal.value}>
+            {animal.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </CardHeader>
+  )
+}