fixed: 重要行添加样式处理

src/forge/Quality/index.js

@@ -18,6 +18,7 @@ function Quality(props){
     const [questionList,setQuestionList] = useState([]) //对应问题列表
     const [isDetail,setDetail] = useState(false) //对应问题列表
     const [codeDetailValue,setCodeDetailValue] = useState("") //对应问题列表
+    const [indexValue,setIndexValue] = useState(null)
     const severityList = {
         'BLOCKER':  "致命缺陷",
         "MINOR":"严重缺陷",
@@ -29,6 +30,12 @@ function Quality(props){
         getTask()
     },[])
   
+    useEffect(()=>{
+        if(indexValue){
+            const domBox = document.getElementsByClassName('CodeMirror-code')[0].childNodes[indexValue]
+            domBox.style.cssText='border:1px solid red; padding: 5px;border-radius: 10px;color: black;background: lemonchiffon;'
+        }
+    },[indexValue])
     const getTask = () => {
         axios.get(`/${owner}/${projectsId}/sonar_tasks.json`)
        .then(({data:{data,message,status}}) => {
@@ -74,18 +81,21 @@ function Quality(props){
     const getCodeDetailData = (item) => {
         axios.get(`/${owner}/${projectsId}/sonar_tasks/code_source.json?component=${item.component}&task_id=${sonarList.task_id}`)
         .then(({data:{data,message,status}})=>{
+            data.splice(item.line,0,{code:document.getElementById('htmlDOM').innerHTML,line:item.line})
             const text = data.map(item => item.code).join("\n")
             const dom = document.createElement("div");
             dom.innerHTML = text;
+            setDetail(true)
             setCodeDetailValue(dom.innerText)
+            setIndexValue(item.line?item.line:'')
         })
     }
     const handleCodeDetail = (item) => {
-        setDetail(true)
         getCodeDetailData(item)
     }
     const handleBack = () => {
         setDetail(false)
+        setIndexValue(null)
     }
 
     return (
@@ -99,9 +109,8 @@ function Quality(props){
                 <div className="quality-fill mr35"><img alt='' src={codesmell}/>Codesmell<span className="ml3">{sonarList.codeSmell}</span></div>
                 <div>
                     <div className="quality-total mr20">代码量统计：{sonarList.codeLines}</div>
-                    {/* <div className="quality-total mr20">代码量统计：{sonarList.codeLines}</div> */}
                     <div className="quality-total mr20">检测语言：{sonarList.language}</div>
-                    <div className="quality-total mr20">最后检测时间：{moment(sonarList.updated_at).format("YYYY-MM-DD HH:mm")}</div>
+                    {statuts !== -1 && <div className="quality-total mr20">最后检测时间：{moment(sonarList.updated_at).format("YYYY-MM-DD HH:mm")}</div>}
                 </div>
             </div>
             <div className={`wrap-header-btn ${statuts===-1?'blue':statuts===0?'green':'orange'}`} onClick={handlecheck}>{(statuts===-1)?"开始检测":(statuts===0)?"重新检测":"正在检测"}</div>
@@ -110,8 +119,8 @@ function Quality(props){
                 {questionList.map((item,index)=>{
                     return <div key={index} className='message-item' onClick={()=>handleCodeDetail(item)}>
                                 {item.component}
-                                <div className="message-item-content mb30 mt10">
+                                <div className="message-item-content mb30 mt10" >
-                                    <img alt="" src={bugRed}/>{item.message}
+                                    <img alt="" src={bugRed}/><span id="htmlDOM">{item.message}&nbsp;&nbsp;&nbsp;</span>
                                     <div className="message-item-content-serverity">缺陷类型：{severityList[item.severity]}<span className="ml15">line：{item.line}行</span></div>
                                 </div>
                             </div>
@@ -121,31 +130,14 @@ function Quality(props){
             </div>:
             <div className="wrap-code">
                 <Button type="primary" onClick={handleBack} >返回</Button>
-                <div className='span'></div>
-                {/* {codeDetailValue.length >0 && <div dangerouslySetInnerHTML={{__html:codeDetailValue.map(item => item.code).join("<br/>")}}/>} */}
                 <Meditor
-                 content={
+                 content={codeDetailValue || "" }
-                    codeDetailValue || "" //.map(item => item.code).join("\n")
-                }
                  readOnly={true}
                  editorType="update"
-                //  currentBranch={currentBranch}
                 />
-                    {/* <MonacoEditor
-                        height="100vh"
-                        width="100%"
-                        value={codeDetailValue.map(item => item.code).join("\n")}
-                        theme="vs-dark"
-                        options={{
-                        "readOnly": true,
-                        "minimap": { "enabled": false },
-                        "lineNumbers":false
-                        }}
-                    /> */}
             </div>
             }
         </div>
-
       </React.Fragment>
     );
 }

src/forge/Quality/index.scss

@@ -9,35 +9,29 @@
     font-weight: 600;
     color: #434D6C;
     cursor: pointer;
-    .message-item-content{
+}
-        width: 1104px;
+.message-item-content{
-        height: 63px;
+    width: 1104px;
-        border-radius: 4px;
+    height: 63px;
-        border: 1px solid #DDDDDD;
+    border-radius: 4px;
-        padding: 8px 16px;
+    border: 1px solid #DDDDDD;
-        overflow: hidden;
+    padding: 8px 16px;
-        white-space: nowrap;
+    overflow: hidden;
-        text-overflow: ellipsis;
+    white-space: nowrap;
-        img{
+    text-overflow: ellipsis;
-            margin-right: 10px;
+    img{
-            vertical-align: baseline;
+        margin-right: 10px;
-        }
+        vertical-align: baseline;
-        .message-item-content-serverity{
-            height: 17px;
-            font-size: 12px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-            color: #434D6C;
-            line-height: 17px;
-        }
-    }
-    .message-item-content:before{
-        content: '';
-        background-color: red;
-        width: 5px;
-        height: 100%;
     }
 }
+.message-item-content-serverity{
+    height: 17px;
+    font-size: 12px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #434D6C;
+    line-height: 17px;
+}
 .wrap-header{
     display: flex;
     margin: 30px auto;