前端¶
技术选型¶
选择React作为前端框架。使用Ant Design组件库进行开发。
架构设计¶
模块设计¶
主页¶
App.tsx¶
使用<Routes/>配合useNavigate()和顶部Menu实现全局页面路由
从cookie中获得用户类别，以1.判断用户是否登录 2.确定顶部Menu的显示内容
index.tsx¶
主页页面。实现了排行榜、平台公告和广告嵌入。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/advertise/get_ad?type=horizontal&num=4 |
string[] |
请求广告图片url |
/api/user/get_all_tag_score |
string |
请求排行榜信息 |
用户管理 user/¶
register.tsx¶
用户注册页面。
函数
| 函数名 | 功能 |
|---|---|
sendCode |
获得邮箱验证码 |
handleSubmit |
提交注册表单 |
login.tsx¶
用户登录页面。支持以用户密码和人脸识别两种方式登录。
函数
| 函数名 | 功能 |
|---|---|
handleSubmit |
提交登录表单 |
capture |
人脸识别验证 |
userinfo.tsx¶
用户信息页面。通过<Row> <Col>进行布局。支持查看、修改用户信息。
参数
| 参数名 | 功能 |
|---|---|
user_id |
被举报用户id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/user/userinfo/${user_id} |
User |
获取用户信息 |
函数
| 函数名 | 功能 |
|---|---|
handleResetInvitecode |
重置验证码 |
usermodify.tsx¶
用户信息修改页面。
主组件UserModify通过侧边栏的Menu导向下列子组件：
ModifyPassword:通过输入原密码修改密码ModifyPasswordbyEmail:通过邮件修改密码ModifyEmail:修改邮箱ModifyFace:录入人脸信息
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/user/userinfo/${user_id} |
User |
获取用户信息 |
函数
| 函数名 | 功能 |
|---|---|
handleModifyPassword |
修改密码 |
handleSubmitEmail |
修改邮箱 |
capture |
录入人脸 |
VipPage.tsx¶
个人银行和会员页面。
主组件VipPage通过顶部的Menu导向下列子组件：
ModifyBankAccount:修改银行卡BankAccount:查看银行卡Recharge:充值VipInfo:会员信息Withdraw:提现
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/user/userinfo/${user_id} |
User |
获取用户信息 |
函数
| 函数名 | 功能 |
|---|---|
handleModifyBankAccount |
修改银行账户 |
UserRecharge |
充值 |
UserWithdraw |
提现 |
UserRecharge |
充值 |
UserSetVip |
充值VIP会员 |
reportuserpage.tsx¶
举报用户页面。
参数
| 参数名 | 功能 |
|---|---|
user_id |
被举报用户id |
函数
| 函数名 | 功能 |
|---|---|
handleReportUser |
举报用户 |
reportmessagePage.tsx¶
管理员获取所有举报信息。 请求
| 请求url | 返回值 | 功能 |
|---|---|---|
api/review/reportmessage |
Reportmessage[] |
获取所有举报信息 |
函数
| 函数名 | 功能 |
|---|---|
handleAccept |
举报通过 |
handleReject |
举报不通过 |
allusers.tsx¶
管理员获取全部用户信息。可以在该界面审核通过需求方用户，封禁和解禁用户。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/user/get_all_users?type=all |
User[] |
获取全部用户信息 |
任务相关 task/¶
templateTaskCreate.tsx¶
创建任务组件。通过useState
管理标签的添加和删除、自定义任务中输入框和选择题的添加与删除。上传文件的组件使用<Upload.Dragger>
函数
| 函数名 | 功能 |
|---|---|
handleSubmit |
创建任务 |
createtask.tsx¶
创建任务页面。根据左侧Menu的不同任务类型，传递参数给templateTaskCreate组件以渲染页面。
checktask.tsx¶
管理员审核任务。
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
当前任务信息 |
函数
| 函数名 | 功能 |
|---|---|
handleCheckClick |
审核任务 |
handlePrevQuestionClick |
上一题 |
handleNextQuestionClick |
下一题 |
alltasks.tsx¶
管理员¶
获得全部任务。可以点击任务以审核。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/get_all_tasks |
Task[] |
获取全部任务 |
标注方¶
获得全部自由接取任务。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/get_all_tasks |
Task[] |
获取全部自由接取任务 |
tasklist.tsx¶
获取该用户的全部任务任务。
从cookie中获得user_id和用户类别user_type。
通过顶部的Menu导向不同类型的任务。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/get_my_tasks |
Task[] |
获取我的任务 |
对于不同用户类型返回不同任务:
需求方¶
返回该用户发布的任务。顶部Menu会根据审核情况进行分类
标注方¶
返回该用户被分发的任务。顶部Menu会根据接取情况、完成情况进行分类
中介¶
返回该用户被委托的任务。
taskpage.tsx¶
任务详情页面。
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
当前任务信息 |
需求方¶
函数
| 函数名 | 功能 |
|---|---|
handleDistribute |
分发任务 |
handleDelete |
删除任务 |
标注方¶
函数
| 函数名 | 功能 |
|---|---|
handleAccept |
接受任务 |
handleRefuse |
拒绝任务 |
handleContinue |
继续任务 |
handleDownload |
下载题目数据 |
子组件:UploadProps 用于上传批量标注结果。
中介¶
函数
| 函数名 | 功能 |
|---|---|
update_taglist |
获取所有可以分发的标注方 |
taskmodify.tsx¶
修改任务页面。
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
当前任务信息 |
函数
| 函数名 | 功能 |
|---|---|
handleSubmit |
修改任务 |
task_taginfo.tsx¶
返回当前题目的标注情况。支持预览题目内容。
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
当前任务信息 |
/api/task/taginfo/${task_id} |
TagInfo[] |
获得当前任务所有题目的完成情况 |
questionPage.tsx¶
题目页面。标注方可以在该页面完成任务中的每道题目
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
question_id |
题目id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/taginfo/${task_id} |
TagInfo[] |
获得当前任务所有题目的完成情况 |
/api/task/startquestion/${task_id}/${question_id} |
无 | 设置当前题目为"开始标注" |
函数
| 函数名 | 功能 |
|---|---|
handleConfirmClick |
提交题目 |
handlePrevQuestionClick |
上一题 |
handleNextQuestionClick |
下一题 |
distributedUserlist.tsx¶
需求方获取当前任务的分发用户列表。可以在列表中进行审核用户结果、导出数据、重新分发等操作。
参数
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
获得当前任务数据 |
函数
| 函数名 | 功能 |
|---|---|
handleReview |
跳转审核用户界面 |
handleDownloadUser |
下载用户标注结果 |
handleDownloadAll |
下载全部标注结果 |
handleRedistribute |
重新分发 |
handleReportUser |
跳转举报用户界面 |
reviewpage.tsx¶
需求方审核标注方的标注结果。
| 参数名 | 功能 |
|---|---|
task_id |
任务id |
user_id |
被审核标注方id |
type |
审核方式 |
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/task/${task_id} |
Task |
获得当前任务数据 |
/api/review/manual_check/${task_id}/${user_id} |
Qinfo |
获取该用户的标注数据 |
函数
| 函数名 | 功能 |
|---|---|
handleAcceptClick |
审核通过 |
handleRefuseClick |
审核拒绝 |
handlePrevQuestionClick |
上一题 |
handleNextQuestionClick |
下一题 |
广告商相关ad/¶
ad_list.tsx¶
获取当前自己发布的广告。
请求
| 请求url | 返回值 | 功能 |
|---|---|---|
/api/advertise/get_my_ad |
Ad[] |
获取当前自己发布的广告 |
函数
| 函数名 | 功能 |
|---|---|
handleTimeChange |
更改广告时长 |
handleViewAd |
查看广告 |
handleFinish |
提交表单以续费广告 |
publish.tsx¶
广告商发布广告。
函数
| 函数名 | 功能 |
|---|---|
handleTimeChange |
更改广告时长 |
Publishad |
发布广告 |
handleChange |
上传广告图片 |
组件¶
utils/interface.tsx¶
定义了各种数据类型。主要如下：
| 数据类型 | 定义 |
|---|---|
User |
用户类 |
Task |
任务类 |
Question |
题目类 |
Qinfo |
完成后的题目数据 |
Result |
题目标注结果 |
CurrentTagUserList |
任务标注方列表 |
utils/network.tsx¶
发送请求的network wrapper.
使用异步的network.request向后端发送请求。将几种通用的错误响应内置在wrapper中。
task/question/textProp.tsx¶
渲染文本题目数据的组件。
task/question/imageProp.tsx¶
渲染图像题目数据的组件。
task/question/audioProp.tsx¶
渲染音频题目数据的组件。
task/question/videoProp.tsx¶
渲染视频题目数据的组件。
task/question/tripletProp.tsx¶
渲染三元组题目数据的组件。
task/question/humanFaceProp.tsx¶
渲染人脸骨骼打点题目数据的组件。
task/question/imageSelectProp.tsx¶
渲染图片框选题目数据的组件。
task/question/ThreeDProp.tsx¶
渲染3D点云题目数据的组件。