分享功能（仅微信）+ 合并请求增加状态的显示，合并请求详情增加（冲突情况下的提示）

2021-05-21 16:44:40 +08:00 · 2021-05-21 16:44:40 +08:00 · a1bd41795a
parent 09bf75c6c3
commit a1bd41795a
11 changed files with 177 additions and 54 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -14030,13 +14030,13 @@
    },
    "qr.js": {
      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/qr.js/download/qr.js-0.0.0.tgz",
      "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
    },
    "qrcode.react": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.0.tgz",
-      "integrity": "sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/qrcode.react/download/qrcode.react-1.0.1.tgz",
+      "integrity": "sha1-KDS7UOXidf/lr2kG7/FTkf6eOKU=",
      "requires": {
        "loose-envify": "^1.4.0",
        "prop-types": "^15.6.0",
--- a/package.json
+++ b/package.json
@ -63,7 +63,7 @@
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "prop-types": "^15.6.1",
-    "qrcode.react": "^1.0.0",
+    "qrcode.react": "^1.0.1",
    "qs": "^6.9.3",
    "quill": "^1.3.7",
    "quill-delta-to-html": "^0.11.0",
--- a/src/App.js
+++ b/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>
 								{/*项目*/}
--- a/src/AppConfig.js
+++ b/src/AppConfig.js
@ -32,7 +32,7 @@ export function initAxiosInterceptors(props) {
  // 判断网络是否连接
  initOnlineOfflineListener();

-  var proxy = "http://192.168.1.37:3000";
+  var proxy = "https://testforgeplus.trustie.net";
  //响应前的设置
  axios.interceptors.request.use(
    config => {
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@ -205,17 +205,33 @@ li.ant-menu-item{

@media screen and (max-width: 1920px){
  .-task-sidebar{
-    right:240px;
+    right:220px;
  }
 }
-@media screen and (max-width: 1500px){
+@media screen and (max-width: 1750px){
  .-task-sidebar{
-    right:100px;
+    right:160px;
+  }
+}
+@media screen and (max-width: 1650px){
+  .-task-sidebar{
+    right:115px;
+  }
+}
+@media screen and (max-width: 1550px){
+  .-task-sidebar{
+    right:90px;
+  }
+}
+@media screen and (max-width: 1450px){
+  .-task-sidebar{
+    right:45px;
  }
 }
@media screen and (max-width: 1200px){
  .-task-sidebar{
    right:0px;
+    display: none;
  }
 }
 .-task-sidebar>div {
@ -246,6 +262,9 @@ li.ant-menu-item{
 .helpBox{
  width: 260px;
  z-index: 103;
+  &.shareContent{
+    width: 200px;
+  }
  .ant-popover-inner-content{
    padding:0px;
  }
@ -281,6 +300,17 @@ li.ant-menu-item{
      }
    }
  }
+  .shareUl{
+    padding:10px 0px;
+    display: flex;
+    align-items: center;
+    .titlecontent{
+      margin-right: 20px;
+    }
+    li > i{
+      font-size: 32px!important;
+    }
+  }
 }


--- a/src/forge/Component/SiderBar.js
+++ b/src/forge/Component/SiderBar.js
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Popover , Tooltip } from 'antd';
 import './Component.scss';
 import axios from 'axios';
+import ShareModal from './SiderBarShareModal';

 const $ = window.$;

@ -21,6 +22,7 @@ $(window).scroll(function () {

 function SiderBar() {
  const [ data , setData ] = useState([]);
+  const [ visible , setVisible ] = useState(false);

  useEffect(()=>{
    getFAQ();
@ -48,30 +50,40 @@ function SiderBar() {
      </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>
+  }
  return (
    <div className={"-task-sidebar"} >
-        {
-          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>
-            </div>
-          </Popover>
-          :""
-        }
-        {/* <div className="scan pr" title="微信扫一扫">
-          <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
-        </div>
-        <div className="consult" title='在线咨询'>
-          <a target="_blank" className="color_white" href="//shang.qq.com/wpa/qunwpa?idkey=2f2043d88c1bd61d182b98bf1e061c6185e23055bec832c07d8148fe11c5a6cd">
-            <i className="iconfont icon-qqzaixianzixun color-white font-22"></i>
-          </a>
-        </div> */}
-        <div className="gotop">
-          <Tooltip title="返回顶部" placement={"left"}>
-            <a><i className="iconfont icon-huidaodingbu1"></i></a>
-          </Tooltip>
-        </div>
+      <ShareModal visible={visible} urlValue={window.location.href} onCancel={()=>setVisible(false)}/>
+      {
+        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>
+          </div>
+        </Popover>
+        :""
+      }
+      {/* <div className="scan pr" title="微信扫一扫">
+        <span className="inline erweima"><i className="iconfont icon-erweima color-white font-22 fl"></i></span>
+      </div>*/}
+      <Popover content={shareContent()} overlayClassName="helpBox shareContent" placement={"left"}>
+        <div className="consult">
+          <i className="iconfont icon-fenxiang1"></i>
+        </div> 
+      </Popover>
+      <div className="gotop">
+        <Tooltip title="返回顶部" placement={"right"}>
+          <a><i className="iconfont icon-huidaodingbu1"></i></a>
+        </Tooltip>
+      </div>
    </div>
  )
 }
--- a/src/forge/Component/SiderBarShareModal.jsx
+++ b/src/forge/Component/SiderBarShareModal.jsx
@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal } from 'antd';
+import QRCode  from 'qrcode.react';
+
+function SiderBarShareModal({visible,urlValue,onCancel}) {
+  return(
+    <Modal
+      title={"分享到微信"}
+      visible={visible}
+      width="500px"
+      closable={true}
+      footer={false}
+      onCancel={onCancel}
+    >
+      <div style={{textAlign:"center"}}>
+        {urlValue &&<QRCode
+          value={urlValue}
+          size={200}
+          fgColor="#000000"
+          style={{margin:"20px"}}
+        />}
+        <p>打开微信“扫一扫”,点击右上角菜单，即可将网页分享至朋友圈</p>
+      </div>
+    </Modal>
+  )
+}
+export default SiderBarShareModal;
--- a/src/forge/Merge/Index.scss
+++ b/src/forge/Merge/Index.scss
@ -0,0 +1,21 @@
+.i_open{
+  color: #28BD6C!important;
+}
+.i_merged{
+  color: #4C9ED3!important;
+}
+.i_closed{
+  color: #FA6400!important;
+}
+.pr_tags_open{
+  border:1px solid #28BD6C;
+  color: #28BD6C;
+}
+.pr_tags_merged{
+  border:1px solid #4C9ED3;
+  color: #4C9ED3;
+}
+.pr_tags_closed{
+  border:1px solid #FA6400;
+  color: #FA6400;
+}
--- a/src/forge/Merge/MergeItem.js
+++ b/src/forge/Merge/MergeItem.js
@ -49,10 +49,12 @@ class MergeItem extends Component {
    const renderList = () => {
      if (issues && issues.length > 0) {
        return issues.map((item, key) => {
+          let status = item.pull_request_staus;
          return (
            <div className="issueItem">
              <div className="flex-1">
                <p className="mb15 df" style={{ alignItems: "center" }}>
+                  <i className={`iconfont icon-hebingqingqiu1 font-14 mr3 i_${status}`}></i>
                  <Link
                    to={`/projects/${owner}/${projectsId}/pulls/${item.pull_request_id}/Messagecount`}
                    className="hide-1 font-15 color-grey-3 fwb lineh-30 mr10"
@ -60,10 +62,10 @@ class MergeItem extends Component {
                  >
                    {item.name}
                  </Link>
-                  <Tag className={`pr_tags_${item.pull_request_staus}`}>
-                    {item.pull_request_staus === "merged"
+                  <Tag className={`pr_tags_${status}`}>
+                    {status === "merged"
                      ? "已合并"
-                      : item.pull_request_staus === "closed"
+                      : status === "closed"
                      ? "已拒绝"
                      : "开启的"}
                  </Tag>
--- a/src/forge/Merge/MessageCount.js
+++ b/src/forge/Merge/MessageCount.js
@ -241,6 +241,34 @@ class MessageCount extends Component {
    )
  }

+  // 点击按钮复制功能
+  jsCopy = () => {
+    const copyEle = document.querySelector('#descContent') // 获取要复制的节点
+    const range = document.createRange(); // 创造range
+    window.getSelection().removeAllRanges(); //清除页面中已有的selection
+    range.selectNode(copyEle); // 选中需要复制的节点
+    window.getSelection().addRange(range); // 执行选中元素
+    document.execCommand("Copy"); // 执行copy操作
+  }
+
+  mergeabledMes=()=>{
+    return(
+      <div className="clearfix">
+        <p className="fl">该Pull Request无法自动合并，你通过如下命令，手动合并</p>
+        <i className="iconfont icon-fuzhi font-16 fr" onClick={()=>this.jsCopy()}></i>
+      </div>
+    )
+  }
+  mergeabledDesc=(base,head)=>{
+    return(
+      <ul id="descContent">
+        <li>git fetch origin</li>
+        <li>git checkout -b {`${base}`} origin/{`${base}`}</li>
+        <li>git merge {`${head}`}</li>
+      </ul>
+    )
+  }
+
  render() {
    const { projectsId, mergeId , owner } = this.props.match.params;
    
@ -323,7 +351,6 @@ class MessageCount extends Component {
                            to={`/projects/${owner}/${projectsId}/tree/${data.pull_request.base}`}
                            className="ver-middle"
                          >
-                            {/* {data.pull_request.is_fork ? data.pull_request.base : `${data.pull_request.pull_request_user}:${data.pull_request.base}`} */}
                            {data.issue.project_author_name}:{data.pull_request.base}
                          </Link>
                        </Tag>
@ -388,12 +415,6 @@ class MessageCount extends Component {
                  </div>
                  <div className="ml10">
                    <div className="mt15 text-right" style={{display:"flex",justifyContent:"flex-end"}}>
-                      {/* <span className="composeButton">
-                        <Dropdown overlay={this.copyItem()} visible={copyVisible} onClick={(e)=>this.setCopyVisible(e)}>
-                          <span>复制</span>
-                        </Dropdown>
-                        <span>下载为<i className="iconfont icon-sanjiaoxing-down color-blue"></i></span>
-                      </span> */}
                      {operate && (
                          <Button
                            type="green"
@ -440,18 +461,14 @@ class MessageCount extends Component {
                    type="success"
                  />
                )}
-                {pr_status === 0 && projectDetail && projectDetail.permission !=="Reporter" && (
+                {operate && (
                  <Spin spinning={SpinFlag}>
                    <div
                      style={{
                        display:
                          this.state.mergekey === "rebase"
-                            ? this.state.buttonshow === "none"
-                              ? "block"
-                              : "none"
-                            : !ismesrge
-                            ? "block"
-                            : "none",
+                            ? this.state.buttonshow === "none" ? "block" : "none"
+                            : !ismesrge ? "block" : "none",
                      }}
                    >
                      <p className="mb15">
@ -460,15 +477,25 @@ class MessageCount extends Component {
                          type="primary"
                          onClick={this.submitmerge}
                          icon={<Icon type="caret-down" />}
+                          disabled={!pull_request || (pull_request && !pull_request.mergeable) }
                        >
                          {this.state.mergename}
                        </Dropdown.Button>
                      </p>
-                      <Alert
-                        message="该合并请求可以进行自动合并操作"
-                        type="success"
-                        showIcon
-                      />
+                      {pull_request && pull_request.mergeable
+                        ?
+                        <Alert
+                          message="该合并请求可以进行自动合并操作"
+                          type="success"
+                          showIcon
+                        />:
+                        <Alert
+                          message={this.mergeabledMes()}
+                          type="error"
+                          description={this.mergeabledDesc(pull_request.base,pull_request.head)}
+                          showIcon
+                        />
+                      }
                    </div>
                    <div>
                      <div
--- a/src/forge/Merge/merge.js
+++ b/src/forge/Merge/merge.js
@ -5,6 +5,7 @@ import "../Order/order.css";
 import "../Order/index.scss";
 import NoneData from "./no_data";
 import OrderItem from "./MergeItem";
+import './Index.scss';

 import axios from "axios";

@ -282,6 +283,7 @@ class merge extends Component {
                className={status_type === "1" ? "active" : ""}
                onClick={() => this.openorder("1")}
              >
+                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_open"></i>
                <label>开启的</label>
                <span>{data && data.open_count}</span>
              </li>
@ -289,6 +291,7 @@ class merge extends Component {
                className={status_type === "11" ? "active" : ""}
                onClick={() => this.openorder("11")}
              >
+                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_merged"></i>
                <label>已合并</label>
                <span>{data && data.merged_issues_size}</span>
              </li>
@ -296,6 +299,7 @@ class merge extends Component {
                className={status_type === "2" ? "active" : ""}
                onClick={() => this.openorder("2")}
              >
+                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_closed"></i>
                <label>已拒绝</label>
                <span>{data && data.close_count}</span>
              </li>