ADD：样式变好看~

package.json

@@ -57,7 +57,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.isequal": "^4.5.5",
     "@umijs/route-utils": "^1.0.33",
-    "antd": "^4.12.0",
+    "antd": "^4.15.6",
     "bizcharts": "^3.5.3-beta.0",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",

src/pages/edit/components/Step2/index.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message } from 'antd';
+import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag } from 'antd';
 import { connect } from 'umi';
 import styles from './index.less';
 import {
@@ -10,7 +10,7 @@ import {
   EditOutlined,
   EyeOutlined,
 } from '@ant-design/icons';
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
 import { recurrent, severity, bug_categories } from './const';
 import { timeToString } from '../../utils';
 
@@ -22,6 +22,14 @@ const formItemLayout = {
     span: 19,
   },
 };
+const modalFormItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
 const images = [
   '../../assents/noArrived.png',
   '../../assents/yellowFlag.png',
@@ -34,8 +42,10 @@ const Step2 = (props) => {
   const [addCaseForm] = Form.useForm();
   const [addBugForm] = Form.useForm();
 
-  const { data, dispatch, reportCommonInfo,
-    testCaseList, caseBugList, categories,pathInfo } = props;
+  const {
+    data, dispatch, reportCommonInfo,
+    testCaseList, caseBugList, categories, pathInfo,
+  } = props;
 
   const [showTaskRecommendModal, setTaskRecommendModal] = useState(true);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
@@ -52,10 +62,10 @@ const Step2 = (props) => {
     return null;
   }
 
-  const handleEditReportInfo = ()=>{
-    console.log('sss')
+  const handleEditReportInfo = () => {
+    console.log('sss');
 
-  }
+  };
 
   const initEcharts = () => {
     let item_color = 'rgba(226,245,240,1)';
@@ -65,23 +75,23 @@ const Step2 = (props) => {
       {
         'name': '暂无Bug',
         'icon': images[0],
-        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
       },
       {
         'name': '已有Bug',
         'icon': images[1],
-        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
       },
       {
         'name': '我的Bug',
         'icon': images[2],
-        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
       },
       {
         'name': '推荐页面',
         'icon': images[3],
-        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
-      }
+        'itemStyle': { 'normal': { 'color': item_color, 'borderColor': border_color } },
+      },
     ];
     let option2 = {
       legend: {     //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
@@ -96,13 +106,13 @@ const Step2 = (props) => {
       tooltip: {
         trigger: 'item',
         triggerOn: 'mousemove',
-        formatter: function (params) {
+        formatter: function(params) {
           if (params.data.category == 1) {
             return params.name + '<br>' + '我发现/所有: 0/' + params.value;
           } else {
             return '还未有人在该页面发现Bug,努力寻找第一个Bug吧!';
           }
-        }
+        },
       },
       grid: {
         z: 1,    //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
@@ -112,7 +122,7 @@ const Step2 = (props) => {
         bottom: '3%',
         containLabel: true,
         splitLine: {
-          show: false    //隐藏分割线
+          show: false,    //隐藏分割线
         },
 
       },
@@ -122,28 +132,28 @@ const Step2 = (props) => {
           type: 'category',
           data: [],
           axisLine: {
-            show: false
+            show: false,
           },
           splitLine: {
-            show: false
+            show: false,
           },
           splitArea: {
             interval: 'auto',
-            show: false
-          }
-        }
+            show: false,
+          },
+        },
       ],
 
       yAxis: [ //这里有很多的show，必须都设置成不显示
         {
           type: 'value',
           axisLine: {
-            show: false
+            show: false,
           },
           splitLine: {
-            show: false
+            show: false,
           },
-        }
+        },
       ],
       series: [
         {
@@ -163,8 +173,8 @@ const Step2 = (props) => {
               position: 'left',
               verticalAlign: 'middle',
               align: 'right',
-              fontSize: 9
-            }
+              fontSize: 9,
+            },
           },
 
           leaves: {
@@ -172,15 +182,15 @@ const Step2 = (props) => {
               normal: {
                 position: 'right',
                 verticalAlign: 'middle',
-                align: 'left'
-              }
-            }
+                align: 'left',
+              },
+            },
           },
 
           expandAndCollapse: true,
           initialTreeDepth: 4,
           animationDuration: 550,
-          animationDurationUpdate: 750
+          animationDurationUpdate: 750,
         },
         {
           name: categories[0].name,
@@ -190,8 +200,8 @@ const Step2 = (props) => {
           itemStyle: {
             normal: {
               color: '#41C468',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
-            }
-          }
+            },
+          },
         },
         {
           name: categories[1].name,
@@ -201,8 +211,8 @@ const Step2 = (props) => {
           itemStyle: {
             normal: {
               color: '#70C1B3',
-            }
-          }
+            },
+          },
         },
         {
           name: categories[2].name,
@@ -212,8 +222,8 @@ const Step2 = (props) => {
           itemStyle: {
             normal: {
               color: '#00A1E9',
-            }
-          }
+            },
+          },
         },
         {
           name: categories[3].name,
@@ -223,14 +233,14 @@ const Step2 = (props) => {
           itemStyle: {
             normal: {
               color: '#00A1E9',
-            }
-          }
-        }
-      ]
-    }
+            },
+          },
+        },
+      ],
+    };
     const chart = echarts.init(document.getElementById('myChart'));
     chart.setOption(option2);
-  }
+  };
 
   const handleAddOrEditTestCase = () => {
     addCaseForm.validateFields().then((res) => {
@@ -290,14 +300,14 @@ const Step2 = (props) => {
       formData.append('page', `${res.page1}-${res.page2}-${res.page3}`);
       //新建bug
       dispatch({
-        type:'editReport/createCaseBug',
+        type: 'editReport/createCaseBug',
         payload: {
           formData,
-          useCase:currentTestCaseRef.current.id
-        }
-      }).then(res=>{
-        console.log(res.status)
-      })
+          useCase: currentTestCaseRef.current.id,
+        },
+      }).then(res => {
+        console.log(res.status);
+      });
     });
   };
 
@@ -307,7 +317,7 @@ const Step2 = (props) => {
     dispatch({
       type: 'editReport/getCaseBugList',
       payload: caseItem.id,
-    })
+    });
   };
 
   const handleEditTestCase = (item) => {
@@ -335,34 +345,34 @@ const Step2 = (props) => {
         case_take_id: '1718-1718',
         report_id: reportCommonInfo.id,
       },
-    })
+    });
     dispatch({
       type: 'editReport/getBugRecommendPath',
       payload: {
         case_take_id: '1718-1718',
         report_id: reportCommonInfo.id,
       },
-    })
+    });
     dispatch({
       type: 'editReport/getBugRecommendList',
       payload: {
         case_take_id: '1718-1718',
         report_id: reportCommonInfo.id,
       },
-    })
+    });
     setTaskRecommendModal(true);
     initEcharts();
-  }
+  };
 
-  const handleSelectPage1 = (val) =>{
-    let item = categories.find(x=>x.item === val);
-    setPage2List(item.children)
-  }
+  const handleSelectPage1 = (val) => {
+    let item = categories.find(x => x.item === val);
+    setPage2List(item.children);
+  };
 
-  const handleSelectPage2 = (val) =>{
-    let item = page2List.find(x=>x.item === val);
-    setPage3List(item.children)
-  }
+  const handleSelectPage2 = (val) => {
+    let item = page2List.find(x => x.item === val);
+    setPage3List(item.children);
+  };
 
   useEffect(() => {
     //判断是否已经有报告
@@ -379,7 +389,7 @@ const Step2 = (props) => {
       dispatch({
         type: 'editReport/getTestCaseList',
         payload: { report_id: reportCommonInfo.id },
-      }).then((res)=>{
+      }).then((res) => {
         currentTestCaseRef.current = res;
         // setCurrActiveTestCase(res);
       });
@@ -388,7 +398,7 @@ const Step2 = (props) => {
         payload: { examId: 1945 },
       });
     });
-  }, [dispatch,reportCommonInfo.id]);
+  }, [dispatch, reportCommonInfo.id]);
 
   return (
     <div>
@@ -441,20 +451,20 @@ const Step2 = (props) => {
         <div className={styles.reportContainer}>
           <Row gutter={10}>
             <Col span={8}>
-              <div>
-                <Row gutter={10} style={{ marginBottom: 10 }}>
-                  <Col span={20}><h3>测试用例列表</h3></Col>
-                  <Col span={4}>
-                    <Button size="small" onClick={() => {
-                      handleClickAddCase();
-                    }}>
-                      <PlusOutlined className={styles.addIcon} />
-                      用例
-                    </Button>
-                  </Col>
-                </Row>
+
+              <div gutter={10} className={styles.testCaseTitle}>
+                <h3>测试用例列表</h3>
+
+                <Button size="small" type="primary"
+                        onClick={() => {
+                          handleClickAddCase();
+                        }}>
+                  <PlusOutlined className={styles.addIcon} />
+                  用例
+                </Button>
               </div>
 
+
               <div className={styles.testCaseList}>
                 {testCaseList && testCaseList.map((item) => {
                   return (
@@ -480,40 +490,53 @@ const Step2 = (props) => {
               <Row gutter={10} style={{ marginBottom: 10 }}>
                 <Col span={20}><h3>缺陷列表</h3></Col>
                 <Col span={2}>
-                  <Button size="small" onClick={() => handleClickAddBug()}>
+                  <Button size="small" type="primary" onClick={() => handleClickAddBug()}>
                     <PlusOutlined className={styles.addIcon} />
                     缺陷
                   </Button>
                 </Col>
                 <Col span={2}>
-                  <Button size="small" onClick={() => handleClickRecommendBtn()}>
+                  <Button size="small" className={styles.recommendBtn}
+                          onClick={() => handleClickRecommendBtn()}>
                     <ForkOutlined className={styles.addIcon} />
                     推荐
                   </Button>
                 </Col>
               </Row>
               <div className={styles.testBugList}>
-                {caseBugList && caseBugList.map((item) => {
+                {caseBugList&&caseBugList.length ? caseBugList.map((item) => {
                   return (
                     <div className={styles.testBugItem} key={item.detail.id}>
                       <Row gutter={10}>
-                        <Col span={20}>
-                          <div><span className={styles.bugItemTitle}>Bug标题:</span>{item.detail.title}</div>
-                          <div><span className={styles.bugItemTitle}>复现程度:</span>{recurrent[item.detail.recurrent]}
-                          </div>
-                          <div><span className={styles.bugItemTitle}>严重程度:</span>{severity[item.detail.severity]}</div>
-                          <div><span
-                            className={styles.bugItemTitle}>缺陷分类:</span>{item.detail.bug_category}
+                        <Col span={12}>
+                          <div>
+                            <div className={styles.testBugItemTitleBlock}>
+                              <span className={styles.testBugItemTitle}>标题：</span>
+                              <span className={styles.testBugItemTitleDetail}>{item.detail.title}</span>
+                              <Tag color="cyan">{recurrent[item.detail.recurrent]}</Tag>
+                              <Tag color="red">{severity[item.detail.severity]}</Tag>
+                              <Tag color="geekblue">{item.detail.bug_category}</Tag>
+                            </div>
+                            <div className={styles.testBugItemTitleBlock}>
+                              <span className={styles.testBugItemTitle}>路径：</span>
+                              {item.detail.bug_page}
+                            </div>
+                            <div className={styles.testBugItemTitleBlock}>
+                              <span className={styles.testBugItemTitle}>描述：</span>
+                              {item.detail.description}
+                            </div>
                           </div>
                         </Col>
-                        <Col span={4}>
-                          <Button size='small' style={{ marginTop: 10 }}>
-                            <EyeOutlined />详情</Button>
+                        <Col span={12} className={styles.bugImgList}>
+                          <img src={require('../../assets/report1.jpeg')} alt='bug_img'/>
+                          <img src={require('../../assets/report2.jpeg')} alt='bug_img'/>
+                          <img src={require('../../assets/report3.jpeg')} alt='bug_img'/>
                         </Col>
                       </Row>
+
                     </div>
                   );
-                })}
+                }) : <div>当前用例暂无提交记录，快去创建第一个BUG吧~</div>}
               </div>
             </Col>
 
@@ -536,7 +559,7 @@ const Step2 = (props) => {
       >
         <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
         <Form
-          {...formItemLayout}
+          {...modalFormItemLayout}
           form={addCaseForm}
           layout="horizontal"
           className={styles.stepForm}
@@ -579,7 +602,7 @@ const Step2 = (props) => {
           </Form.Item>
           <Form.Item
             label="预期结果"
-            name="result"
+            name="description"
             rules={[
               {
                 required: true,
@@ -608,7 +631,7 @@ const Step2 = (props) => {
         <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
         <Form
           form={addBugForm}
-          {...formItemLayout}
+          {...modalFormItemLayout}
           layout="horizontal"
           className={styles.stepForm}
         >
@@ -651,7 +674,9 @@ const Step2 = (props) => {
                     },
                   ]}
                 >
-                  <Select onSelect={(val)=>{handleSelectPage1(val)}}>
+                  <Select onSelect={(val) => {
+                    handleSelectPage1(val);
+                  }}>
                     {categories.map((item) => {
                       return <Select.Option value={item.item} key={item.item}>{item.item}
                       </Select.Option>;
@@ -670,9 +695,11 @@ const Step2 = (props) => {
                   ]}
                 >
                   <Select disabled={!page2List.length}
-                    onSelect={(val)=>{handleSelectPage2(val)}}>
-                    {page2List.map((item)=>{
-                        return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>
+                          onSelect={(val) => {
+                            handleSelectPage2(val);
+                          }}>
+                    {page2List.map((item) => {
+                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                     })}
                   </Select>
                 </Form.Item>
@@ -688,8 +715,8 @@ const Step2 = (props) => {
                   ]}
                 >
                   <Select disabled={!page3List.length}>
-                    {page3List.map((item)=>{
-                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>
+                    {page3List.map((item) => {
+                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                     })}
                   </Select>
                 </Form.Item>
@@ -780,5 +807,5 @@ export default connect(({ editReport, loading }) => ({
   testCaseList: editReport.testCaseList,
   caseBugList: editReport.caseBugList,
   categories: editReport.categories,
-  pathInfo:editReport.pathInfo
+  pathInfo: editReport.pathInfo,
 }))(Step2);

src/pages/edit/components/Step2/index.less

@@ -48,28 +48,27 @@
 .editReportInfoIcon:hover {
   color: #1890ff;
 }
-
+.testCaseTitle{
+  margin-right: 30px;
+  margin-bottom: 10px;
+  display:flex;
+  justify-content: space-between;
+}
 .testCaseList {
   width:100%;
   height: 500px;
   padding-right: 30px;
   border-right: 1px solid #eee;
   .activeCase {
-    background-color: #88c8f3;
-    color:white;
-    border-left: 5px solid #015e9d;
+    color:black;
+    border-left: 5px solid #2490ff;
   }
 
   .testCaseItem {
     padding:10px;
-    border-left: 5px solid #efefef;
+    font-size: 16px;
     box-shadow: 0 0 5px #aaa;
     margin-bottom:20px;
-    .bugItemTitle {
-      font-size: 18px;
-      line-height: 26px;
-      font-weight: bold;
-    }
     .editTestBug{
       cursor: pointer;
     }
@@ -89,13 +88,41 @@
     }
   }
 }
-
+.recommendBtn{
+  background-color:#67c23a;
+  border: none;
+  color: white;
+  &:hover{
+    background-color: #8dd06b;
+    color: white;
+  }
+}
 .testBugList {
   .testBugItem {
     padding:10px;
+    font-size: 16px;
     box-shadow: 0 0 5px #aaa;;
     margin-bottom:20px;
+    .testBugItemTitleBlock{
+      .testBugItemTitle {
+        display: inline-block;
+        margin:5px 10px 10px 10px;
+        line-height: 22px;
+      }
+      .testBugItemTitleDetail {
+        display: inline-block;
+        margin-right: 30px;
+      }
+    }
+    .bugImgList {
+      img {
+        width: 100px;
+        height: 100px;
+        margin:5px 10px;
+      }
+    }
   }
+
   :global {
     .ant-form-item {
       margin-bottom: 0;