项目详情右侧增加实践课程链接的显示

src/forge/Main/CoderDepot.jsx

@@ -42,6 +42,7 @@ function CoderDepot(props){
   const [ openModal , setOpenModal ] = useState(false);
   const [ desc , setDesc ] = useState(undefined);
   const [ website , setWebsite ] = useState(undefined);
+  const [ lesson_url , setLessonUrl ] = useState(undefined);
 
   const owner = props.match.params.owner;
   const projectsId = props.match.params.projectsId;
@@ -52,6 +53,7 @@ function CoderDepot(props){
       setProjectDetail(props.projectDetail);
       setDesc(props.projectDetail.description);
       setWebsite(props.projectDetail.website);
+      setLessonUrl(props.projectDetail.lesson_url);
     }
   },[props])
 
@@ -213,20 +215,21 @@ function CoderDepot(props){
       </Menu>
     </div>
   )
-  function okUpdate(d,w){
+  function okUpdate(d,w,l){
     const url = `/${owner}/${projectsId}.json`;
     axios.put(url,{
-      description:d,website:w
+      description:d,website:w,lesson_url:l
     }).then(result=>{
       if(result && result.data && result.data.id){
         setDesc(result.data.description);
         setWebsite(result.data.website);
+        setLessonUrl(result.data.lesson_url);
       }
     })
   }
   return(
     <WhiteBack>
-      <UpdateDescModal desc={desc} website={website} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
+      <UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
       <Spin spinning={isSpin}>
         {
           (dirInfo || fileInfo) && 
@@ -371,7 +374,7 @@ function CoderDepot(props){
                         website &&
                         <p className="color-grey-6 df">
                           <i className="iconfont icon-lianjie2 font-15 mr10 color-grey-9"></i>
-                          <span style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px"}}>{website}</span>
+                          <a href={website} target="_blank" style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px",textDecoration:"underline"}}>{website}</a>
                         </p>
                       }
                       <p>
@@ -390,6 +393,14 @@ function CoderDepot(props){
                         </p>
                       }
                     </div>
+                    {
+                      lesson_url &&
+                      <div>
+                        <Divider />
+                        <p className="font-16 color-grey-6">实践课程</p>
+                        <a href={lesson_url} target="_blank" className="color-grey-6" style={{textDecoration:"underline"}}>{lesson_url}</a>
+                      </div>
+                    }
                     {/* 发布 */}
                     {
                       projectDetail && projectDetail.release_versions &&

src/forge/Main/sub/UpdateDescModal.jsx

@@ -2,13 +2,13 @@ import React , { forwardRef, useEffect } from 'react';
 import {Form , Modal , Input } from 'antd';
 import "./sub.scss";
 const { TextArea } = Input;
-function UpdateDescModal({form , visible , onCancel , onOk,desc,website}){
+function UpdateDescModal({form , visible , onCancel , onOk,desc,website,lesson_url}){
   const { getFieldDecorator, validateFields , setFieldsValue } = form;
 
   useEffect(()=>{
     if(desc || website){
       setFieldsValue({
-        website,desc
+        website,desc,lesson_url
       })
     }
   },[desc,website])
@@ -17,7 +17,7 @@ function UpdateDescModal({form , visible , onCancel , onOk,desc,website}){
     validateFields((err,values)=>{
       if(!err){
         onCancel();
-        onOk(values.desc,values.website)
+        onOk(values.desc,values.website,values.lesson_url)
       }
     })
   }
@@ -49,6 +49,13 @@ function UpdateDescModal({form , visible , onCancel , onOk,desc,website}){
             <Input placeholder="website链接"/>
           )}
         </Form.Item>
+        <Form.Item label="实践课程">
+          {getFieldDecorator("lesson_url",{
+            rules:[]
+          })(
+            <Input placeholder="实践课程链接"/>
+          )}
+        </Form.Item>
       </Form>
     </Modal>
   )