feat: 标签和图片列表

besscroft · Apr 9, 2024 · d113fc5 · d113fc5
1 parent e9210d3
commit d113fc5
Show file tree

Hide file tree

Showing 5 changed files with 296 additions and 34 deletions.
diff --git 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>
   )
 }
diff --git 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>
   )
 }
diff --git 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
@@ -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
@@ -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>
+  )
+}