feat(upload): add cos upload (#7)

* feat(event): add delete event * feat(upload): add COS upload helper * feat(tip): add slug tip
FurryConsChina · Dec 23, 2024 · 134fba6 · 134fba6
1 parent c758721
commit 134fba6
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "antd": "^5.22.4",
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
+    "cos-js-sdk-v5": "^1.8.7",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
     "mantine-form-zod-resolver": "^1.1.0",

diff --git a/src/api/dashboard/event.ts b/src/api/dashboard/event.ts
@@ -35,3 +35,11 @@ export async function updateEvent(event: EditableEventType) {
 
   return res.data;
 }
+
+export async function deleteEvent(id: string) {
+  const res = await Axios.post<{ success: boolean }>("/event/delete", {
+    id,
+  });
+
+  return res.data;
+}
diff --git a/src/api/dashboard/organization.ts b/src/api/dashboard/organization.ts
@@ -26,7 +26,9 @@ export async function getAllOrganizations(params: { search?: string }) {
 }
 
 export async function getOrganizationDetail(params: { id: string }) {
-  const res = await Axios.get<OrganizationType>(`/organization/detail/${params.id}`);
+  const res = await Axios.get<OrganizationType>(
+    `/organization/detail/${params.id}`
+  );
 
   return res.data;
 }
@@ -50,3 +52,11 @@ export async function updateOrganization(
 
   return res.data;
 }
+
+export async function deleteOrganization(id: string) {
+  const res = await Axios.post<{ success: boolean }>("/organization/delete", {
+    id,
+  });
+
+  return res.data;
+}
diff --git a/src/api/dashboard/upload.ts b/src/api/dashboard/upload.ts
@@ -8,3 +8,18 @@ export async function uploadStatic(form: FormData) {
 
   return res.data;
 }
+
+export async function getUploadSignature({ pathKey }: { pathKey: string }) {
+  const res = await Axios.post<{
+    tempSecretId: string;
+    tempSecretKey: string;
+    sessionToken: string;
+    startTime: number;
+    expiredTime: number;
+    bucket: string;
+    region: string;
+    key: string;
+  }>("/third/upload/sign", { pathKey });
+
+  return res.data;
+}
diff --git a/src/components/UploadImage/index.tsx b/src/components/UploadImage/index.tsx
@@ -1,4 +1,5 @@
 import { uploadStatic } from '@/api/dashboard/upload';
+import { uploadToCOS } from '@/utils/cos';
 import {
   Button,
   Card,
@@ -85,13 +86,17 @@ export default function UploadImage({
         });
       }
 
-      let formData = new FormData();
+      // let formData = new FormData();
       const imagePath = `${pathPrefix}${imageName}.${imageMIME}`;
-      formData.append('imageKey', `${pathPrefix}${imageName}.${imageMIME}`);
-      formData.append('image', images[0], images[0].name);
-      const uploadRes = await uploadStatic(formData);
+      // formData.append('imageKey', `${pathPrefix}${imageName}.${imageMIME}`);
+      // formData.append('image', images[0], images[0].name);
+      // const uploadRes = await uploadStatic(formData);
+      const uploadRes = await uploadToCOS({
+        pathKey: imagePath,
+        file: images[0],
+      });
       console.log('uploadRes', uploadRes);
-      if (uploadRes?.S3UploadRes?.ETag) {
+      if (uploadRes?.ETag) {
         setLoading(false);
         onUploadSuccess(imagePath);
         notifications.show({

diff --git a/src/pages/dashboard/event/components/EventList/index.tsx b/src/pages/dashboard/event/components/EventList/index.tsx
@@ -1,26 +1,22 @@
-import { Input, Space, Table, TableColumnType, Tag } from 'antd';
-import dayjs from 'dayjs';
 import {
   ActionIcon,
   Badge,
   Button,
   Menu,
-  rem,
-  TextInput,
   Tooltip,
-  UnstyledButton,
+  rem
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
+import { Input, Space, Table, type TableColumnType, Tag } from 'antd';
+import dayjs from 'dayjs';
 
-import type { ColumnsType } from 'antd/es/table';
+import { cleanPageCache } from '@/api/dashboard/cache';
 import {
   EventScaleLabel,
   EventStatusColor,
   EventStatusLabel,
 } from '@/consts/event';
 import type { EventType } from '@/types/event';
-import { useMutation } from '@tanstack/react-query';
-import { cleanPageCache } from '@/api/dashboard/cache';
 import {
   IconEdit,
   IconInfoCircle,
@@ -30,6 +26,8 @@ import {
   IconSearch,
   IconTrash,
 } from '@tabler/icons-react';
+import { useMutation } from '@tanstack/react-query';
+import type { ColumnsType } from 'antd/es/table';
 import { useNavigate } from 'react-router-dom';
 
 import type { List } from '@/types/Request';
@@ -40,17 +38,25 @@ function EventList({
   pagination,
   isPending,
   updatePagination,
+  onDeleteEvent,
 }: {
   data: List<EventType>;
-  pagination: { current: number; pageSize: number; search?: string };
+  pagination: {
+    current: number;
+    pageSize: number;
+    search?: string;
+    orgSearch?: string;
+  };
   isPending: boolean;
   updatePagination: React.Dispatch<
     React.SetStateAction<{
       current: number;
       pageSize: number;
       search?: string;
+      orgSearch?: string;
     }>
   >;
+  onDeleteEvent: (id: string) => void;
 }) {
   const { mutate: refreshPage } = useMutation({
     mutationFn: cleanPageCache,
@@ -292,7 +298,9 @@ function EventList({
               <Menu.Label>危险</Menu.Label>
               <Menu.Item
                 color="red"
-                disabled
+                onClick={() => {
+                  onDeleteEvent(record.id);
+                }}
                 leftSection={
                   <IconTrash style={{ width: rem(14), height: rem(14) }} />
                 }

diff --git a/src/pages/dashboard/event/edit/index.tsx b/src/pages/dashboard/event/edit/index.tsx
@@ -175,7 +175,7 @@ function EventEditorContent({ event }: { event?: EventType }) {
       return;
     }
 
-    return `${selectedYear}-${selectedMonth}-${city}-con`;
+    return `${selectedYear}-${selectedMonth}-${city.toLowerCase()}-con`;
   };
 
   const handleSubmit = async (formData: formType) => {
@@ -318,6 +318,7 @@ function EventEditorContent({ event }: { event?: EventType }) {
                 withAsterisk
                 label="城市Slug"
                 placeholder="请填写城市的拼音"
+                description="请使用城市的完整拼音，比如：guangzhou，不要使用缩写和大写。"
                 {...form.getInputProps('citySlug')}
               />
             </Group>

diff --git a/src/pages/dashboard/event/page.tsx b/src/pages/dashboard/event/page.tsx
@@ -1,26 +1,44 @@
 import { Button, Group, Title } from '@mantine/core';
 import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { getEventList } from '@/api/dashboard/event';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { deleteEvent, getEventList } from '@/api/dashboard/event';
 import DefaultContainer from '@/components/Container';
 import EventList from '@/pages/dashboard/event/components/EventList';
 import { IconCirclePlus } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
+import { notifications } from '@mantine/notifications';
 
 export default function EventPage() {
   const navigate = useNavigate();
 
-  const [pagination, setPagination] = useState({
+  const [pagination, setPagination] = useState<{
+    current: number;
+    pageSize: number;
+    search?: string;
+    orgSearch?: string;
+  }>({
     current: 1,
     pageSize: 20,
     search: undefined,
+    orgSearch: undefined,
   });
 
   const { isPending, isError, data, error, refetch } = useQuery({
     queryKey: ['event-list', pagination],
     queryFn: () => getEventList(pagination),
   });
 
+  const { mutate: onDeleteEvent } = useMutation({
+    mutationFn: deleteEvent,
+    onSuccess: () => {
+      notifications.show({
+        title: '删除成功',
+        message: '删除展商成功，如果是误操作请马上联系管理员。',
+      });
+      refetch();
+    },
+  });
+
   return (
     <>
       <DefaultContainer className="sticky top-0 z-10">
@@ -44,6 +62,7 @@ export default function EventPage() {
           isPending={isPending}
           pagination={pagination}
           updatePagination={setPagination}
+          onDeleteEvent={onDeleteEvent}
         />
       </div>
     </>

diff --git a/src/pages/dashboard/organization/edit/index.tsx b/src/pages/dashboard/organization/edit/index.tsx
@@ -211,6 +211,7 @@ function OrganizationEditorContent({
                 label="展商Slug"
                 disabled={!!organization?.id}
                 placeholder="请输入展商Slug"
+                description="请不要使用大写"
                 {...form.getInputProps('slug')}
               />
             </Group>

diff --git a/src/utils/cos.ts b/src/utils/cos.ts
@@ -0,0 +1,43 @@
+import COS from "cos-js-sdk-v5";
+
+import { getUploadSignature } from "@/api/dashboard/upload";
+
+export async function uploadToCOS({
+  pathKey,
+  file,
+}: {
+  pathKey: string;
+  file: File;
+}) {
+  const signedKey = await getUploadSignature({ pathKey });
+
+  const {
+    tempSecretId,
+    tempSecretKey,
+    sessionToken,
+    startTime,
+    expiredTime,
+    bucket,
+    region,
+    key,
+  } = signedKey;
+  const cos = new COS({
+    SecretId: tempSecretId,
+    SecretKey: tempSecretKey,
+    SecurityToken: sessionToken,
+    StartTime: startTime,
+    ExpiredTime: expiredTime,
+  });
+
+  const uploadRes = await cos.uploadFile({
+    Bucket: bucket,
+    Region: region,
+    Key: key,
+    Body: file, // 要上传的文件对象。
+    onProgress: (progressData) => {
+      console.log("上传进度：", progressData);
+    },
+  });
+
+  return uploadRes;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1755,6 +1755,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cos-js-sdk-v5@npm:^1.8.7":
+  version: 1.8.7
+  resolution: "cos-js-sdk-v5@npm:1.8.7"
+  dependencies:
+    fast-xml-parser: "npm:4.5.0"
+  checksum: 10c0/2ba2e3c4d2823f5a8d758dbba51ef311cc1115cb3053009f35ac0a6cdf646685095843513d75b7258bf9d2230f065575132e66fec1fda4f9edf0607107507224
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^8.1.3":
   version: 8.3.6
   resolution: "cosmiconfig@npm:8.3.6"
@@ -2093,6 +2102,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-xml-parser@npm:4.5.0":
+  version: 4.5.0
+  resolution: "fast-xml-parser@npm:4.5.0"
+  dependencies:
+    strnum: "npm:^1.0.5"
+  bin:
+    fxparser: src/cli/cli.js
+  checksum: 10c0/71d206c9e137f5c26af88d27dde0108068a5d074401901d643c500c36e95dfd828333a98bda020846c41f5b9b364e2b0e9be5b19b0bdcab5cf31559c07b80a95
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.17.1
   resolution: "fastq@npm:1.17.1"
@@ -2127,6 +2147,7 @@ __metadata:
     antd: "npm:^5.22.4"
     axios: "npm:^1.7.9"
     clsx: "npm:^2.1.1"
+    cos-js-sdk-v5: "npm:^1.8.7"
     dayjs: "npm:^1.11.13"
     lodash: "npm:^4.17.21"
     mantine-form-zod-resolver: "npm:^1.1.0"
@@ -4301,6 +4322,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strnum@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "strnum@npm:1.0.5"
+  checksum: 10c0/64fb8cc2effbd585a6821faa73ad97d4b553c8927e49086a162ffd2cc818787643390b89d567460a8e74300148d11ac052e21c921ef2049f2987f4b1b89a7ff1
+  languageName: node
+  linkType: hard
+
 "stylis@npm:^4.3.3":
   version: 4.3.4
   resolution: "stylis@npm:4.3.4"