右侧按钮-帮助和返回顶部

src/App.js

@@ -205,7 +205,7 @@ class App extends Component {
 				<ConfigProvider locale={zhCN}>
 					<MuiThemeProvider theme={theme}>
 						<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
-						{/* <SiderBar /> */}
+						<SiderBar />
 						<Router>
 							<Switch>
 								{/*项目*/}

src/AppConfig.js

@@ -32,7 +32,7 @@ export function initAxiosInterceptors(props) {
   // 判断网络是否连接
   initOnlineOfflineListener();
 
-  var proxy = "https://testforgeplus.trustie.net";
+  var proxy = "http://192.168.1.37:3000";
   //响应前的设置
   axios.interceptors.request.use(
     config => {

src/forge/Component/Component.scss

@@ -198,9 +198,8 @@ li.ant-menu-item{
 .-task-sidebar {
   position: fixed;
   width: 40px;
-  height: 180px;
   right: 0;
-  bottom: 20px !important;
+  bottom: 80px;
   z-index: 10;
 }
 
@@ -246,18 +245,43 @@ li.ant-menu-item{
 }
 .helpBox{
   width: 260px;
+  z-index: 103;
   .ant-popover-inner-content{
-    padding:15px 20px;
+    padding:0px;
   }
-  &>p.title{
+  p.titlecontent{
     font-size: 18px;
     color: #333;
     line-height: 20px;
-    margin-bottom: 15px;
+    padding:15px 20px;
+  }
+  .faqUl{
+    padding:0px 20px 10px;
+    max-height: 220px;
+    overflow-y: auto;
+    li{
+      background: #F5F5F5;
+      border-radius: 20px;
+      padding:0px 20px;
+      color: #333;
+      height: 34px;
+      line-height: 34px;
+      margin-bottom: 10px;
+      a{
+        display: block;
+      }
+      &:hover{
+        background-color: #D1E9FF;
+        a{
+          color: #333!important;
+        }
+      }
+    }
   }
 }
 
 
+
 .-task-desc {
   background: #494949;
   width: 90px;

src/forge/Component/SiderBar.js

@@ -1,6 +1,7 @@
-import React from 'react';
-import { Popover } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Popover , Tooltip } from 'antd';
 import './Component.scss';
+import axios from 'axios';
 
 const $ = window.$;
 
@@ -19,18 +20,45 @@ $(window).scroll(function () {
 });
 
 function SiderBar() {
-  const content = (
-    <div>
-      <p>帮助</p>
-    </div>
+  const [ data , setData ] = useState([]);
+
+  useEffect(()=>{
+    getFAQ();
+  },[])
+
+  function getFAQ(){
+    const url = `/faqs.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setData(result.data);
+      }
+    }).catch(error=>{})
+  }
+  function content(list){
+    return <div>
+      <p className="titlecontent">帮助</p>
+      <ul className="faqUl">
+        {
+          list && list.map((i,k)=>{
+            return(
+              <li><a href={`${i.url}`} target="_blank">{i.question}</a></li>
             )
+          })
+        }
+      </ul>
+    </div>
+  }
   return (
     <div className={"-task-sidebar"} >
-        <div className="feedback" title="意见反馈">
-          <Popover content={content} overlayClassName="helpBox" placement={"left"}>
+        {
+          data && data.length > 0 && (data[0] && data[0].question) ? 
+          <Popover content={content(data)} overlayClassName="helpBox" placement={"left"}>
+            <div className="feedback">
               <i className="iconfont icon-bangzhu font-22"></i>
-          </Popover>
             </div>
+          </Popover>
+          :""
+        }
         {/* <div className="scan pr" title="微信扫一扫">
           <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
         </div>
@@ -39,10 +67,10 @@ function SiderBar() {
             <i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
           </a>
         </div> */}
-        <div className="gotop" title="返回顶部">
-          <a>
-            <i className="iconfont icon-huidaodingbu1"></i>
-          </a>
+        <div className="gotop">
+          <Tooltip title="返回顶部" placement={"left"}>
+            <a><i className="iconfont icon-huidaodingbu1"></i></a>
+          </Tooltip>
         </div>
     </div>
   )