From f6a004c202640dc6a249bc9aca895dd1262cc16d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Wed, 9 Nov 2022 09:48:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=84=8F=E8=A7=81=E5=8F=8D=E9=A6=88=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                     | 54 ++++++++++++++++++++++++++++++
 src/App.js                      |  2 +-
 src/forge/Component/SiderBar.js | 59 ++++++++++++++++++++++++++++++---
 3 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 96c761b6a..fcf5cb956 100644
--- a/src/App.css
+++ b/src/App.css
@@ -141,3 +141,57 @@ body {
   }
 }
 
+.feedBackModal .ant-modal-header{
+  border-bottom: none;
+  background: none;
+  padding: 16px 24px 0;
+}
+
+.feedBackModal .ant-modal-title{
+  font-weight:500 !important;
+  color:#151d40;
+  font-size:18px;
+}
+.feedBackModal .anticon-close{
+  font-size: 22px;
+}
+.feedBackModal .ant-modal-footer{
+  border-top: none;
+  text-align: center;
+  padding-bottom: 40px;
+}
+
+.feedBackModal .ant-modal-content{
+  background-image:linear-gradient(359.37deg,#ebf3ff 0%,#f8fbff 55.01%,#cbdbff 100%);
+  border:1.5px solid #ffffff;
+}
+
+.feedBackModal .feedBackText{
+  padding: 20px;
+  font-size:15px;
+  color:#202d40;
+}
+.feedBackModal .feedBackText::placeholder{
+  color:#afb7c2;
+}
+.feedBackModal .gotoIssueFeedBack{
+  color: rgba(70, 106, 255, 1);
+}
+.feedBackBox{
+  position: relative;
+  background-color: white;
+}
+.feedBackText.errorInput{
+  border: 1px solid #f60011;
+}
+.errorInput{
+  background-color:rgba(255, 0, 0, 0.04) !important;
+}
+.ant-input.errorInput:hover{
+  background-color: white !important;
+}
+.countNumBox{
+  position: absolute;
+  bottom: 2px;
+  right: 10px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 022e06e06..9d7745691 100644
--- a/src/App.js
+++ b/src/App.js
@@ -297,7 +297,7 @@ class App extends Component {
           <MuiThemeProvider theme={theme}>
             <LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
             {/* <GlccModal /> */}
-            {!pathName || (pathName && pathName.indexOf("glcc") === -1) ? <SiderBar /> : <SiderBarHelp/>}
+            {!pathName || (pathName && pathName.indexOf("glcc") === -1) ? <SiderBar {...this.props}/> : <SiderBarHelp/>}
             {/* <Router> */}
             <Switch>
               {/* wiki预览 */}
diff --git a/src/forge/Component/SiderBar.js b/src/forge/Component/SiderBar.js
index a5c4836d9..c0cae2ce2 100644
--- a/src/forge/Component/SiderBar.js
+++ b/src/forge/Component/SiderBar.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Popover , Tooltip } from 'antd';
+import { Button, Input, message, Modal, Popover , Tooltip } from 'antd';
 import './Component.scss';
 import axios from 'axios';
 import ShareModal from './SiderBarShareModal';
@@ -20,16 +20,25 @@ $(window).scroll(function () {
   }
 });
 
-function SiderBar() {
+function SiderBar(props) {
+  const {location, history} = 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);
 
   useEffect(()=>{
     getFAQ();
     getCurrentUser();
     //页面加载完成之后隐藏回到顶点
     $(".-task-sidebar .gotop").hide();
+    // 意见反馈弹窗
+    if(search && search.indexOf('feedback') !== -1){
+      setFeedBackModal(true)
+    }
   },[])
 
   function getFAQ(){
@@ -74,14 +83,38 @@ function SiderBar() {
     </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('请填写您的反馈建议');
+    }
+  }
+
   return (
     <div className={"-task-sidebar"} >
       {/* 平台反馈 */}
       <Tooltip title="意见反馈" placement={"left"} overlayClassName="tooltipBox">
-        <div className="consult">
-          <a href={login ? `/Gitlink/forgeplus/issues/new?type=feedback`:`/login?go_page=/Gitlink/forgeplus/issues/new?type=feedback`}>
+        <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>
+          {/* </a> */}
         </div>
       </Tooltip>
 
@@ -113,6 +146,22 @@ function SiderBar() {
           <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('/xxq250/BootstrapAdmin/issues/new?type=feedback')}} className='gotoIssueFeedBack'>点击此处</a>留言</div>
+      </Modal>
     </div>
   )
 }