some css

frontend_refactor/src/App.css

@@ -1 +1,5 @@
 @import '~antd/dist/antd.css';
+
+body {
+    background-color: #eef2f3;
+}

frontend_refactor/src/containers/SubmitForm.js

@@ -1,6 +1,6 @@
 import React, {createRef} from "react";
-import {Button, Input, Select, Upload} from "antd";
-import { UploadOutlined } from '@ant-design/icons';
+import {Button, Card, Divider, Input, Select, Upload, message} from "antd";
+import {UploadOutlined} from '@ant-design/icons';
 
 import {BACKEND_URL} from "../config";
 import axios from "axios";
@@ -27,20 +27,25 @@ class SubmitForm extends React.Component {
     heightRef = createRef();
 
     state = {
-        choice: types[0][0]
+        choice: types[0][0],
+        submitted: false
     }
 
     choiceChange = (type) => {
-        this.setState({choice: type})
+        this.setState({choice: type, submitted: false})
         this.res = {}
     }
 
     submitForm = () => {
+        this.setState({submitted: true})
         axios.post(BACKEND_URL + "/analysis", {
             type: this.state.choice,
             data: this.res
         }).then(r => {
             this.props.onNewTask(r.data.data.task_uuid)
+        }).catch(e => {
+            message.error("提交出错: " + JSON.stringify(e))
+            this.setState({submitted: false})
         })
     }
 
@@ -49,43 +54,54 @@ class SubmitForm extends React.Component {
             console.log(info)
             if (info.file.status === 'done') {
                 this.res[res_type] = info.file.response.data.uuid
+            } else if (info.file.status === 'error') {
+                message.error(`文件上传失败: ` + JSON.stringify(info.file.response));
             }
         };
     }
 
     onHeightChange = () => {
-        this.res['height'] = this.heightRef.current.input.value * 1
+        this.res['height'] = this.heightRef.current.input.value
     }
 
     render() {
         return (
-            <>
-                <Select defaultValue={types[0]} style={{ width: 200 }} onChange={this.choiceChange}>
-                    {types.map(x => <Select.Option value={x[0]}>{x[1]}</Select.Option>)}
-                </Select>
-
-                {
-                    this.state.choice === "PHOTO_STANDING" ?
-                        <>
-                            身高: <Input ref={this.heightRef} onChange={this.onHeightChange}/>
-                            <Upload name="file" action={BACKEND_URL + "/photos"} onChange={this.uploadFile("front")}>
-                                <Button icon={<UploadOutlined />}>上传正面照片</Button>
-                            </Upload>
-                            <Upload name="file" action={BACKEND_URL + "/photos"} onChange={this.uploadFile("right")}>
-                                <Button icon={<UploadOutlined />}>上传侧面照片</Button>
-                            </Upload>
-                        </> :
-                        <>
-                            <Upload name="file" action={BACKEND_URL + "/videos"} onChange={this.uploadFile("video_uuid")}>
-                                <Button icon={<UploadOutlined />}>上传视频</Button>
-                            </Upload>
-                        </>
-                }
-
-                <Button type="primary" htmlType="submit" onClick={this.submitForm}>
-                    开始分析
-                </Button>
-            </>
+            <div>
+                <Card style={{height: "40%", width: "80%", margin: "0 auto", marginTop: 30}}>
+                    <Select defaultValue={types[0]} style={{width: 200}} onChange={this.choiceChange}>
+                        {types.map(x => <Select.Option value={x[0]}>{x[1]}</Select.Option>)}
+                    </Select>
+
+                    <Divider/>
+                    {
+                        this.state.choice === "PHOTO_STANDING" ?
+                            <>
+                                <Input placeholder="请输入你的身高" ref={this.heightRef} onChange={this.onHeightChange}/>
+                                <br/><br/>
+                                <Upload maxCount={1} name="file" action={BACKEND_URL + "/photos"} onChange={this.uploadFile("front")}>
+                                    <Button icon={<UploadOutlined/>}>上传正面照片</Button>
+                                </Upload>
+                                <br/>
+                                <Upload maxCount={1} name="file" action={BACKEND_URL + "/photos"} onChange={this.uploadFile("right")}>
+                                    <Button icon={<UploadOutlined/>}>上传侧面照片</Button>
+                                </Upload>
+                            </> :
+                            <>
+                                <Upload maxCount={1} name="file" action={BACKEND_URL + "/videos"}
+                                        onChange={this.uploadFile("video_uuid")}>
+                                    <Button icon={<UploadOutlined/>}>上传视频</Button>
+                                </Upload>
+                            </>
+                    }
+
+                    <br/>
+                    <Button type="primary" htmlType="submit" onClick={this.submitForm} disabled={this.state.submitted}>
+                        开始分析
+                    </Button>
+                </Card>
+
+
+            </div>
         );
 
 

frontend_refactor/src/containers/TaskList.js

@@ -27,7 +27,7 @@ class TaskList extends React.Component {
 
     render() {
         return (
-            <>
+            <div>
                 {
                     this.props.tasks.map(x => (
                         <>
@@ -37,7 +37,7 @@ class TaskList extends React.Component {
                         </>
                     ))
                 }
-            </>
+            </div>
         );
     }