opti: 状态样式优化

client/containers/Project/Interface/InterfaceList/InterfaceList.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import {
-  Table, Tag, Button, Modal, message, Tooltip
+  Table, Button, Modal, message, Tooltip
 } from 'antd';
 import AddInterfaceForm from './AddInterfaceForm';
 import { fetchInterfaceList} from '../../../../reducer/modules/interface.js';
@@ -134,16 +134,16 @@ class InterfaceList extends Component {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
-      width: 12,
+      width: 14,
       render: (item) => {
         return <div>{item === 'done' ?
-          <Tag color="#87d068">完成</Tag>
+          <span className="tag-status done">已完成</span>
           :
-          <Tag color="#f50">未完成</Tag>
+          <span className="tag-status undone">未完成</span>
         }</div>
       },
       filters: [{
-        text: '完成',
+        text: '已完成',
         value: 'done'
       }, {
         text: '未完成',

client/containers/Project/Interface/InterfaceList/View.js

@@ -234,20 +234,10 @@ class View extends Component {
     }];
     let status = {
       undone: "未完成",
-      done: "完成"
-    }
-    let statusColor = {
-      undone: {
-        bac: "rgb(255, 85, 0)",
-        color: "white"
-      },
-      done:{
-        bac: "rgb(135, 208, 104)",
-        color: "white"
-      }
+      done: "已完成"
     }
     let methodColor = variable.METHOD_COLOR[this.props.curData.method?this.props.curData.method.toLowerCase():"get"];
-    statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
+    // statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
     let h = this.countEnter(this.props.curData.req_body_other);
     const aceEditor = <div style={{display:this.props.curData.req_body_other&&this.props.curData.req_body_type==="json"?"block":"none"}} className="colBody">
       <span className="colKey">请求Body：</span>
@@ -269,7 +259,7 @@ class View extends Component {
       </div>
       <div className="colstatus">
         <span className="colKey">状态：</span>
-        <span style={{backgroundColor:statusColor.bac,color: statusColor.color}} className="colValue">{status[this.props.curData.status]}</span>
+        <span className={'tag-status ' + this.props.curData.status}>{status[this.props.curData.status]}</span>
       </div>
       <div className="colAddTime">
         <span className="colKey">创建时间：</span>

client/styles/common.scss

@@ -97,3 +97,22 @@ em {
     width: min-content !important;
   }
 }
+
+.tag-status {
+  &::before {
+    content: '';
+    display: inline-block;
+    margin-right: 6px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    position: relative;
+    bottom: 1px;
+  }
+  &.done::before {
+    background-color: #57cf27;
+  }
+  &.undone::before {
+    background-color: #ff561b;
+  }
+}