forgeplus-react/src/forge/Component/SiderBar.js

import React, { useEffect, useState } from 'react';
import { Button, Input, message, Modal, Popover , Tooltip } from 'antd';
import './Component.scss';
import axios from 'axios';
import ShareModal from './SiderBarShareModal';

const $ = window.$;

$(window).scroll(function () {
  if ($(".gotop").length > 0) {
    if ($(document).scrollTop() > 0) {
      $(".-task-sidebar .gotop").show();
      $(".gotop").click(function () {
        $("html,body").scrollTop(0);
      });
    }
    if ($(document).scrollTop() === 0) {
      $(".-task-sidebar .gotop").hide();
    }
  }
});

function SiderBar(props) {
  const {location, history,user} = props;
  const {search, pathname} = location;
  const [ data , setData ] = useState([]);
  const [ visible , setVisible ] = useState(false);
  const [ login , setLogin ]= useState(false);
  const [ feedBackModal, setFeedBackModal] = useState(false);
  const [ feedBackValue, setFeedBackValue] = useState(undefined);
  const [ failApply, setFailApply] = useState(undefined);
  console.log(props,window.location);
  
  useEffect(()=>{
    user && setLogin(user.login);
  },[user])
  
  useEffect(()=>{
    getFAQ();
    // getCurrentUser();
    //页面加载完成之后隐藏回到顶点
    $(".-task-sidebar .gotop").hide();
    // 意见反馈弹窗
    if(search && search.indexOf('feedback') !== -1 && search.indexOf('type=feedback') === -1){
      // 用户已经在issue中反馈，刷新页面不弹出意见反馈
      setFeedBackModal(true)
    }
  },[])

  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>
      <ul className="faqUl">
        {
          list && list.map((i,k)=>{
            return(
              <li key={i.question+k}><a href={`${i.url}`} title={i.question} target="_blank">{i.question}</a></li>
            )
          })
        }
      </ul>
    </div>
  }

  function shareContent(){
    return <div>
      <ul className="shareUl">
        <p className="titlecontent">分享到</p>
        <li onClick={()=>setVisible(true)}><i className="iconfont icon-weixin2" style={{color:"#62b900"}}></i></li>
      </ul>
    </div>
  }

  // 意见反馈按钮点击事件
  function feedBackClick(){
    if(login){
      setFeedBackModal(true);
    }else{
      history.push(`/login?go_page=${pathname}?feedback`);
    }
  }

  function applyFeedBack(){
    if(feedBackValue){
      setFailApply(undefined);
      setFeedBackModal(false);
      setFeedBackValue(undefined);
      axios.post(`/v1/${login}/feedbacks`,{content: feedBackValue}).then(res=>{
        if(res && res.data && !res.data.status){
          message.success('反馈成功');
        }
      })
    }else{
      setFailApply('请填写您的反馈建议');
    }
  }

  function loginAi(){
    if(!user.login){
      return props.showLoginDialog();
    }
    let origin = window.location.origin;
    let preOrigin = origin.indexOf("gitlink") ? `https://testai.trustie.net`:`https://ai.gitlink.org.cn/chat`;
    const url = `${preOrigin}/login`;
    const regurl = `${preOrigin}/register`;
    axios.post(regurl,{username:user.login,password:"12345678"}).then(res=>{
      axios.post(url,{username:user.login,password:"12345678"}).then(res=>{
        if(res && res.data){
          window.open(`${preOrigin}/chat`);
        }
      }).catch(error=>{})
    }).catch(error=>{})
    
  }

  return (
    <div className={"-task-sidebar"} >
      {/* 超算智能助手 */}
      { location.pathname.indexOf("/zone/NSCC")>-1 && 
        <Tooltip title="智能助手" placement={"left"} overlayClassName="tooltipBox">
          <div className="consult" onClick={loginAi} style={{cursor: 'pointer'}}>
            <i className="iconfont icon-zhinengzhushou font-34" ></i>
          </div>
        </Tooltip>
      }
      {/* 平台反馈 */}
      <Tooltip title="意见反馈" placement={"left"} overlayClassName="tooltipBox">
        <div className="consult" onClick={feedBackClick} style={{cursor: 'pointer'}}>
          {/* <a href={login ? `/Gitlink/forgeplus/issues/new?type=feedback`:`/login?go_page=/Gitlink/forgeplus/issues/new?type=feedback`}> */}
            <i className="iconfont icon-yijianfankui2"></i>
          {/* </a> */}
        </div>
      </Tooltip>

      {/* 帮助 */}
      {
        data && data.length > 0 && (data[0] && data[0].question) ? 
        <Popover title="帮助" content={content(data)} overlayClassName="helpBox" placement={"left"}>
          <div className="feedback">
            <i className="iconfont icon-bangzhu1 font-22"></i>
          </div>
        </Popover>
        :""
      }

      {/* 分享 */}
      {/* <div className="scan pr" title="微信扫一扫">
        <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
      </div>*/}
      <ShareModal visible={visible} urlValue={window.location.href} onCancel={()=>setVisible(false)}/>
      <Popover content={shareContent()} overlayClassName="helpBox shareContent" placement={"left"}>
        <div className="consult">
          <i className="iconfont icon-fenxiang"></i>
        </div> 
      </Popover>

      {/* 返回顶部 */}
      <Tooltip title="返回顶部" placement={"left"} overlayClassName="tooltipBox">
        <div className="gotop">
          <a><i className="iconfont icon-huidaodingbu1"></i></a>
        </div>
      </Tooltip>

      <Modal
        width={610}
        className='feedBackModal'
        visible={feedBackModal}
        onCancel={()=>{setFeedBackModal(false); history.push(pathname)}}
        title={'意见反馈'}
        footer={<Button type='primary' style={{width: '300px', height: '36px'}} onClick={applyFeedBack}>提交</Button>}>
          <div className='feedBackBox'>
            <Input.TextArea autoSize={{minRows: 9}} placeholder='请在此处填写您的宝贵意见，若经采纳，我们将通过邮件与您沟通' className={`feedBackText ${failApply ? 'errorInput' : ''}`} maxLength={500} value={feedBackValue} onChange={(e)=>{setFeedBackValue(e.target.value); e.target.value && e.target.value.length && setFailApply(undefined);}}/>
            <span className='countNumBox'>{(feedBackValue && feedBackValue.length) || 0}/500</span>
          </div>
          {/* /Gitlink/forgeplus */}
          {failApply && <div className='mt10' style={{color: '#f60011'}}>{failApply}</div>}
          <div className='mt15 font-15 pln'>若需上传截图，请<a onClick={()=>{setFeedBackModal(false); history.push('/Gitlink/forgeplus/issues/new?type=feedback')}} className='gotoIssueFeedBack'>点击此处</a>留言</div>
      </Modal>
    </div>
  )
}

export default SiderBar;