Skip to content

Commit 4434441

Browse files
yulitao-byteyulitao-byte
committed
feat: 增加 任务挑战赛、AI算法赛 结果提交功能
1 parent dfc944e commit 4434441

File tree

2 files changed

+213
-156
lines changed

2 files changed

+213
-156
lines changed

‎src/ActivityHelp/TabResult.tsx‎

Lines changed: 65 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,82 @@
1-
import {
2-
Button,
3-
Form,
4-
Input,
5-
Message,
6-
Tabs,
7-
Upload,
8-
} from "@arco-design/web-react";
9-
import { UploadItem } from "@arco-design/web-react/es/Upload";
10-
import { IconCheck } from "@arco-design/web-react/icon";
11-
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
12-
import { useState } from "react";
1+
import { Tabs } from "@arco-design/web-react";
2+
import UploadResult from "./components/UploadResult";
133

144
export default function TabResult() {
15-
const [file, setFile] = useState<UploadItem>();
16-
const [uploading, setUploading] = useState(false);
17-
const [form] = Form.useForm();
18-
19-
const upload = (phoneNumber: string) => {
20-
if (!file) return;
21-
22-
const formData = new FormData();
23-
formData.append("key", `submissions/${phoneNumber}/${file.name}`);
24-
formData.append("file", file.originFile!);
25-
26-
setUploading(true);
27-
fetch("https://paper-challenge.tos-s3-cn-beijing.volces.com", {
28-
method: "POST",
29-
body: formData,
30-
}).then(
31-
(res) => {
32-
if (res.ok) {
33-
setUploading(false);
34-
setFile(undefined);
35-
Message.success(`压缩包提交成功: ${file.name}`);
36-
return;
37-
}
38-
39-
setUploading(false);
40-
setFile(undefined);
41-
Message.error("压缩包提交失败");
42-
},
43-
() => {
44-
setUploading(false);
45-
setFile(undefined);
46-
Message.error("压缩包提交失败");
47-
}
48-
);
49-
};
50-
51-
const upload2 = () => {
52-
const client = new S3Client({
53-
endpoint: "https://tos-s3-cn-beijing.volces.com",
54-
region: "cn-beijing",
55-
credentials: {
56-
accessKeyId: "aaaa",
57-
secretAccessKey: "bbbb",
58-
},
59-
});
60-
61-
client
62-
.send(
63-
new PutObjectCommand({
64-
Bucket: "paper-challenge",
65-
Key: "mm.txt",
66-
Body: "kkk",
67-
})
68-
)
69-
.then(
70-
(res) => {
71-
res;
72-
73-
Message.success("上传成功");
74-
},
75-
(err) => {
76-
Message.error(`上传失败: ${err}`);
77-
}
78-
);
79-
};
80-
815
return (
826
<>
837
<div className="font-medium text-lg mb-6">✍🏻 结果提交</div>
848

859
<Tabs type="card-gutter">
8610
<Tabs.TabPane key="1" title="论文挑战赛">
87-
<Upload
88-
className="mb-3"
89-
autoUpload={false}
90-
showUploadList={false}
91-
drag
92-
accept=".zip,.rar"
93-
tip="只能上传 1 个压缩包，压缩包格式仅支持 zip、rar"
94-
onChange={(_, file) => {
95-
setFile(file);
96-
}}
97-
/>
98-
99-
<div style={{ fontSize: 13 }} className="text-gray-500 mb-10">
100-
<div>📢 温馨提示：</div>
101-
<div>
102-
1. 论文挑战赛需要提交选定的论文、复现报告、导出的workspace压缩包，
103-
<span style={{ color: "#D08D06" }} className="font-medium">
104-
以整体压缩包形式提交
105-
</span>
106-
</div>
107-
<div>
108-
2. 压缩包名称请按照大赛提供的格式提交，如：
109-
<span style={{ color: "#D08D06" }} className="font-medium">
110-
参赛团队名称-workspace名称.zip
111-
</span>
112-
</div>
113-
</div>
11+
<UploadResult
12+
bucketEndpoint="https://paper-challenge.tos-s3-cn-beijing.volces.com"
13+
tip={
14+
<div style={{ fontSize: 13 }} className="text-gray-500 mb-10">
15+
<div>📢 温馨提示：</div>
11416

115-
<Form
116-
form={form}
117-
style={{ width: 600 }}
118-
labelCol={{ span: 6 }}
119-
wrapperCol={{ span: 18 }}
120-
labelAlign="left"
121-
onSubmit={(values) => {
122-
upload(values.phoneNumber);
123-
}}
124-
>
125-
<Form.Item required label={<span>当前已选压缩包</span>}>
126-
<div style={{ color: "#1664FF" }} className="text-sm">
127-
{file?.name || "-"}
17+
<div>
18+
1.
19+
论文挑战赛需要提交选定的论文、复现报告、导出的workspace压缩包，
20+
<span style={{ color: "#D08D06" }} className="font-medium">
21+
以整体压缩包形式提交
22+
</span>
23+
</div>
24+
<div>
25+
2. 压缩包名称请按照大赛提供的格式提交，如：
26+
<span style={{ color: "#D08D06" }} className="font-medium">
27+
参赛团队名称-workspace名称.zip
28+
</span>
29+
</div>
12830
</div>
129-
</Form.Item>
130-
<Form.Item
131-
required
132-
label={<span>参赛手机号码</span>}
133-
rules={[
134-
{
135-
validator(value, callback) {
136-
if (!value) {
137-
return callback("不能为空");
138-
}
139-
140-
const val = value as string;
141-
if (/^1[0-9]{10}$/.test(val)) {
142-
return callback();
143-
}
144-
return callback("格式不正确");
145-
},
146-
},
147-
]}
148-
field="phoneNumber"
149-
>
150-
<Input placeholder="请输入" />
151-
</Form.Item>
152-
153-
<div>
154-
<Button
155-
icon={<IconCheck />}
156-
type="primary"
157-
htmlType="submit"
158-
loading={uploading}
159-
disabled={!file}
160-
>
161-
{uploading ? "正在提交" : "确认提交"}
162-
</Button>
163-
</div>
164-
</Form>
31+
}
32+
/>
16533
</Tabs.TabPane>
16634
<Tabs.TabPane key="2" title="任务挑战赛">
167-
敬请期待
35+
<UploadResult
36+
bucketEndpoint="https://task-challenge.tos-cn-beijing.volces.com"
37+
tip={
38+
<div style={{ fontSize: 13 }} className="text-gray-500 mb-10">
39+
<div>📢 温馨提示：</div>
40+
41+
<div>
42+
1.
43+
任务挑战赛需要提交介绍文档、大模型应用代码、导出的workspace压缩包，
44+
<span style={{ color: "#D08D06" }} className="font-medium">
45+
以整体压缩包形式提交
46+
</span>
47+
</div>
48+
<div>
49+
2. 压缩包名称请按照大赛提供的格式提交，如：
50+
<span style={{ color: "#D08D06" }} className="font-medium">
51+
参赛团队名称-workspace名称.zip
52+
</span>
53+
</div>
54+
</div>
55+
}
56+
/>
16857
</Tabs.TabPane>
16958
<Tabs.TabPane key="3" title="AI算法赛">
170-
敬请期待
59+
<UploadResult
60+
bucketEndpoint="https://ai-challenge.tos-cn-beijing.volces.com"
61+
tip={
62+
<div style={{ fontSize: 13 }} className="text-gray-500 mb-10">
63+
<div>📢 温馨提示：</div>
64+
65+
<div>
66+
1. AI算法赛需要提交预测结果文件，
67+
<span style={{ color: "#D08D06" }} className="font-medium">
68+
以整体压缩包形式提交
69+
</span>
70+
</div>
71+
<div>
72+
2. 压缩包名称请按照大赛提供的格式提交，如：
73+
<span style={{ color: "#D08D06" }} className="font-medium">
74+
参赛团队名称-选择AI赛题名称.zip
75+
</span>
76+
</div>
77+
</div>
78+
}
79+
/>
17180
</Tabs.TabPane>
17281
</Tabs>
17382
</>

‎src/ActivityHelp/components/UploadResult.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { Button, Form, Input, Message, Upload } from "@arco-design/web-react";
2+
import { UploadItem } from "@arco-design/web-react/es/Upload";
3+
import { IconCheck } from "@arco-design/web-react/icon";
4+
import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3";
5+
import { ReactNode, useState } from "react";
6+
7+
export default function UploadResult({
8+
bucketEndpoint,
9+
tip,
10+
}: {
11+
bucketEndpoint: string;
12+
tip: ReactNode;
13+
}) {
14+
const [file, setFile] = useState<UploadItem>();
15+
const [uploading, setUploading] = useState(false);
16+
const [form] = Form.useForm();
17+
18+
const upload = (phoneNumber: string) => {
19+
if (!file) return;
20+
21+
const formData = new FormData();
22+
formData.append("key", `submissions/${phoneNumber}/${file.name}`);
23+
formData.append("file", file.originFile!);
24+
25+
setUploading(true);
26+
fetch(bucketEndpoint, {
27+
method: "POST",
28+
body: formData,
29+
}).then(
30+
(res) => {
31+
if (res.ok) {
32+
setUploading(false);
33+
setFile(undefined);
34+
Message.success(`压缩包提交成功: ${file.name}`);
35+
return;
36+
}
37+
38+
setUploading(false);
39+
setFile(undefined);
40+
Message.error("压缩包提交失败");
41+
},
42+
() => {
43+
setUploading(false);
44+
setFile(undefined);
45+
Message.error("压缩包提交失败");
46+
}
47+
);
48+
};
49+
50+
const upload2 = () => {
51+
const client = new S3Client({
52+
endpoint: "https://tos-s3-cn-beijing.volces.com",
53+
region: "cn-beijing",
54+
credentials: {
55+
accessKeyId: "aaaa",
56+
secretAccessKey: "bbbb",
57+
},
58+
});
59+
60+
client
61+
.send(
62+
new PutObjectCommand({
63+
Bucket: "paper-challenge",
64+
Key: "mm.txt",
65+
Body: "kkk",
66+
})
67+
)
68+
.then(
69+
(res) => {
70+
res;
71+
72+
Message.success("上传成功");
73+
},
74+
(err) => {
75+
Message.error(`上传失败: ${err}`);
76+
}
77+
);
78+
};
79+
80+
return (
81+
<>
82+
<Upload
83+
className="mb-3"
84+
autoUpload={false}
85+
showUploadList={false}
86+
drag
87+
accept=".zip,.rar"
88+
tip="只能上传 1 个压缩包，压缩包格式仅支持 zip、rar"
89+
onChange={(_, file) => {
90+
setFile(file);
91+
}}
92+
/>
93+
94+
{tip}
95+
96+
<Form
97+
form={form}
98+
style={{ width: 600 }}
99+
labelCol={{ span: 6 }}
100+
wrapperCol={{ span: 18 }}
101+
labelAlign="left"
102+
onSubmit={(values) => {
103+
upload(values.phoneNumber);
104+
}}
105+
>
106+
<Form.Item required label={<span>当前已选压缩包</span>}>
107+
<div style={{ color: "#1664FF" }} className="text-sm">
108+
{file?.name || "-"}
109+
</div>
110+
</Form.Item>
111+
<Form.Item
112+
required
113+
label={<span>参赛手机号码</span>}
114+
rules={[
115+
{
116+
validator(value, callback) {
117+
if (!value) {
118+
return callback("不能为空");
119+
}
120+
121+
const val = value as string;
122+
if (/^1[0-9]{10}$/.test(val)) {
123+
return callback();
124+
}
125+
return callback("格式不正确");
126+
},
127+
},
128+
]}
129+
field="phoneNumber"
130+
>
131+
<Input placeholder="请输入" />
132+
</Form.Item>
133+
134+
<div>
135+
<Button
136+
icon={<IconCheck />}
137+
type="primary"
138+
htmlType="submit"
139+
loading={uploading}
140+
disabled={!file}
141+
>
142+
{uploading ? "正在提交" : "确认提交"}
143+
</Button>
144+
</div>
145+
</Form>
146+
</>
147+
);
148+
}

0 commit comments

Comments
 (0)