From fde2a7edeeb23c9ddea8aa9b599070eaa09633cf Mon Sep 17 00:00:00 2001
From: besscroft <besscroft@foxmail.com>
Date: Tue, 9 Apr 2024 00:45:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/admin/layout.tsx         |  4 ++-
 app/admin/upload/page.tsx    |  6 ++--
 app/api/file-upload/route.ts | 46 +++++++++++++++++++++++++++++
 components/FileUpload.tsx    | 56 ++++++++++++++++++++++++++++++++++++
 style/globals.css            |  4 +++
 5 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 app/api/file-upload/route.ts
 create mode 100644 components/FileUpload.tsx

diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index 6510ccc..58c71d9 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -2,6 +2,8 @@ import DashHeader from '~/components/DashHeader'
 import { BaseSide } from '~/components/BaseSide'
 import Transitions, { Animate } from '~/components/Transitions'
 
+import { AntdRegistry } from '@ant-design/nextjs-registry'
+
 export default function AdminLayout({
   children,
 }: Readonly<{
@@ -18,7 +20,7 @@ export default function AdminLayout({
             </aside>
             <main className="flex w-full h-full flex-1 flex-col overflow-hidden p-2">
               <Animate className="flex-1">
-                {children}
+                <AntdRegistry>{children}</AntdRegistry>
               </Animate>
             </main>
           </div>
diff --git a/app/admin/upload/page.tsx b/app/admin/upload/page.tsx
index d06ef24..cd7add0 100644
--- a/app/admin/upload/page.tsx
+++ b/app/admin/upload/page.tsx
@@ -1,6 +1,8 @@
 import { Card, CardBody } from '@nextui-org/card'
+import FileUpload from '~/components/FileUpload'
 
 export default async function Upload() {
+
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Card>
@@ -12,9 +14,7 @@ export default async function Upload() {
       </Card>
       <Card className="flex-1">
         <CardBody>
-          <p>
-            上传页面
-          </p>
+          <FileUpload />
         </CardBody>
       </Card>
     </div>
diff --git a/app/api/file-upload/route.ts b/app/api/file-upload/route.ts
new file mode 100644
index 0000000..a3a581a
--- /dev/null
+++ b/app/api/file-upload/route.ts
@@ -0,0 +1,46 @@
+import { fetchAListInfo } from '~/server/lib/query'
+
+export async function POST(request: Request) {
+  const formData = await request.formData()
+
+  const file = formData.get('file')
+  const storage = formData.get('storage')
+  const type = formData.get('type')
+  const mountPath = formData.get('mountPath') || ''
+
+  if (storage && storage.toString() === 's3') {
+    return Response.json({ url: '' })
+  } else {
+    const findConfig = await fetchAListInfo()
+    const alistToken = findConfig.find((item) => item.config_key === 'alist_token')?.config_value || '';
+    const alistUrl = findConfig.find((item) => item.config_key === 'alist_url')?.config_value || '';
+
+    const filePath = encodeURIComponent(`${mountPath.toString() === '/' ? '' : mountPath}/${type}/${file?.name}`)
+    console.log(filePath)
+    const data = await fetch(`${alistUrl}/api/fs/put`, {
+      method: 'PUT',
+      headers: {
+        'Authorization': alistToken.toString(),
+        'File-Path': filePath.toString(),
+      },
+      body: file,
+    }).then((res) => res.json())
+    if (data?.code === 200) {
+      const res = await fetch(`${alistUrl}/api/fs/get`, {
+        method: 'POST',
+        headers: {
+          'Authorization': alistToken.toString(),
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ path: decodeURIComponent(filePath) })
+      }).then((res) => res.json())
+      console.log(res)
+      if (res?.code === 200) {
+        return Response.json({ code: 200, message: '文件上传成功！', data: res?.data })
+      } else {
+        return Response.json({ code: 500, message: '文件路径获取失败！', data: null })
+      }
+    }
+  }
+  return Response.json({ code: 500, message: '文件上传失败！', data: null })
+}
\ No newline at end of file
diff --git a/components/FileUpload.tsx b/components/FileUpload.tsx
new file mode 100644
index 0000000..1cd4680
--- /dev/null
+++ b/components/FileUpload.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+import { InboxOutlined } from '@ant-design/icons'
+import type { UploadProps } from 'antd'
+import { Upload } from 'antd'
+import { toast } from 'sonner'
+
+export default function FileUpload() {
+
+  const { Dragger } = Upload;
+
+  async function onRequestUpload(option: any) {
+    const formData = new FormData()
+
+    formData.append('file', option.file)
+    formData.append('storage', 'alist')
+    formData.append('type', 'test')
+    formData.append('mountPath', '/')
+    const data = await fetch('/api/file-upload', {
+      method: 'POST',
+      body: formData
+    }).then((res) => res.json())
+    console.log(data)
+    if (data?.code === 200) {
+      option.onSuccess(option.file)
+      toast.success('文件上传成功！')
+    } else {
+      option.onError(option.file)
+      toast.error('文件上传失败！')
+    }
+  }
+
+  const props: UploadProps = {
+    listType: "picture",
+    name: 'file',
+    multiple: false,
+    maxCount: 1,
+    customRequest: (file) => onRequestUpload(file),
+    onChange: (event) => {
+      console.log(event)
+    }
+  }
+
+  return (
+    <Dragger {...props}>
+      <p className="ant-upload-drag-icon">
+        <InboxOutlined />
+      </p>
+      <p className="ant-upload-text">点击上传文件或拖拽文件到这里</p>
+      <p className="ant-upload-hint">
+        Vercel 等平台 Free 订阅限制上传大小 6M。
+      </p>
+    </Dragger>
+  )
+}
\ No newline at end of file
diff --git a/style/globals.css b/style/globals.css
index ea734f5..8e27b09 100644
--- a/style/globals.css
+++ b/style/globals.css
@@ -15,3 +15,7 @@
     --background-end-rgb: 0, 0, 0;
   }
 }
+
+.ant-upload-list-item-progress {
+  display: none;
+}