From 029d882b53d9ed32fdffdf90d6582da86fdaaec8 Mon Sep 17 00:00:00 2001
From: "sylor_huang@126.com" <sylor_huang@126.com>
Date: Tue, 9 Jun 2020 14:13:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Order/Detail.js               | 171 ++++++------
 src/forge/Order/order.css               |  37 ++-
 src/forge/Upload/attachment.js          |   2 +-
 src/forge/comments/children_comments.js |  64 +++--
 src/forge/comments/comments.js          | 342 ++++++++++++------------
 5 files changed, 315 insertions(+), 301 deletions(-)

diff --git a/src/forge/Order/Detail.js b/src/forge/Order/Detail.js
index c0fd1e451..8bd8de671 100644
--- a/src/forge/Order/Detail.js
+++ b/src/forge/Order/Detail.js
@@ -204,100 +204,103 @@ class Detail extends Component {
 
     return (
       <div className="ProjectListIndex">
-        <div className="list-right">
-          <div className="grid-item pd20 border-1f">
-            <Link
-              to={`/users/${data && data.author_login}`}
-              className="show-user-link"
-            >
-              <img
-                className="user_img"
-                src={getImageUrl(`images/${data && data.author_picture}`)}
-                alt=""
-                width="50"
-                height="50"
-              />
-            </Link>
-            <div className="ml10">
-              <div className="ver-middle">
-                <span className="mr10 ver-middle">
-                  <span className="font-16">
-                    【
-                    {data && data.issue_classify === "issue"
-                      ? data.tracker
+        <div className="item-list-right">
+          <div className="background-f boder-4">
+            <div className="grid-item border-1f pd20 ">
+              <Link
+                to={`/users/${data && data.author_login}`}
+                className="show-user-link"
+              >
+                <img
+                  className="user_img"
+                  src={getImageUrl(`images/${data && data.author_picture}`)}
+                  alt=""
+                  width="50"
+                  height="50"
+                />
+              </Link>
+              <div className="ml10">
+                <div className="ver-middle">
+                  <span className="mr10 ver-middle">
+                    <span className="font-16">
+                      【
+                      {data && data.issue_classify === "issue"
                         ? data.tracker
-                        : "缺陷"
-                      : "合并请求"}
-                    】
+                          ? data.tracker
+                          : "缺陷"
+                        : "合并请求"}
+                      】
+                    </span>
+                    <span className="font-16 fwb">{data && data.subject}</span>
                   </span>
-                  <span className="font-16 fwb">{data && data.subject}</span>
-                </span>
 
-                {data && data.priority && (
-                  <Tag color={get_color(data.priority)}>{data.priority}</Tag>
-                )}
-              </div>
-              <div className="mt10">
-                <span className="color-grey-9 mr5">由</span>
-                <Link
-                  to={`/users/${data && data.author_login}`}
-                  className="show-user-link color-blue"
-                >
-                  {data && data.author_name}
-                </Link>
-                <span className="color-grey-9 ml5">
-                  添加于 {data && data.created_at}
-                </span>
-                {data && data.user_permission ? (
-                  <span className="pull-right">
-                    <a className="color-blue fr" onClick={this.copydetail}>
-                      复制
-                    </a>
-                    <Popconfirm
-                      placement="bottom"
-                      title={"您确定要删除吗"}
-                      okText="是"
-                      cancelText="否"
-                      onConfirm={() => this.deletedetail(orderId)}
-                    >
-                      <a
-                        className="color-blue fr"
-                        style={{ marginLeft: 20, marginRight: 20 }}
-                      >
-                        删除
+                  {data && data.priority && (
+                    <Tag color={get_color(data.priority)}>{data.priority}</Tag>
+                  )}
+                </div>
+                <div className="mt10">
+                  <span className="color-grey-9 mr5">由</span>
+                  <Link
+                    to={`/users/${data && data.author_login}`}
+                    className="show-user-link color-blue"
+                  >
+                    {data && data.author_name}
+                  </Link>
+                  <span className="color-grey-9 ml5">
+                    添加于 {data && data.created_at}
+                  </span>
+                  {data && data.user_permission ? (
+                    <span className="pull-right">
+                      <a className="color-blue fr" onClick={this.copydetail}>
+                        复制
                       </a>
-                    </Popconfirm>
+                      <Popconfirm
+                        placement="bottom"
+                        title={"您确定要删除吗"}
+                        okText="是"
+                        cancelText="否"
+                        onConfirm={() => this.deletedetail(orderId)}
+                      >
+                        <a
+                          className="color-blue fr"
+                          style={{ marginLeft: 20, marginRight: 20 }}
+                        >
+                          删除
+                        </a>
+                      </Popconfirm>
 
-                    <Link
-                      to={`/projects/${projectsId}/orders/${orderId}/updatedetail`}
-                      className="color-blue fr"
-                    >
-                      编辑
-                    </Link>
-                  </span>
-                ) : (
-                  ""
-                )}
+                      <Link
+                        to={`/projects/${projectsId}/orders/${orderId}/updatedetail`}
+                        className="color-blue fr"
+                      >
+                        编辑
+                      </Link>
+                    </span>
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-          <div className="pd20">
-            <div className="detail_p">
-              {data && data.description && data.description.length > 0 ? (
-                this.commentCtx(data.description)
+            <div className="pd20">
+              <div className="detail_p">
+                {data && data.description && data.description.length > 0 ? (
+                  this.commentCtx(data.description)
+                ) : (
+                  <span className="color-grey-9 ml3 mr3">没有描述</span>
+                )}
+              </div>
+              {data && data.attachments && data.attachments.length > 0 ? (
+                <Attachments
+                  attachments={data.attachments}
+                  showNotification={this.props.showNotification}
+                />
               ) : (
-                <span className="color-grey-9 ml3 mr3">没有描述</span>
+                ""
               )}
             </div>
-            {data && data.attachments && data.attachments.length > 0 ? (
-              <Attachments
-                attachments={data.attachments}
-                showNotification={this.props.showNotification}
-              />
-            ) : (
-              ""
-            )}
           </div>
+
           <Comments
             order_id={orderId}
             showNotification={this.props.showNotification}
@@ -305,7 +308,7 @@ class Detail extends Component {
           />
         </div>
         <div className="list-left list-left-padding">
-          <div className="list-right-item-padding background-f">
+          <div className="list-right-item-padding background-f boder-4">
             <p className="grid-item-left pb15">
               <span className="issue_detail_info">分支:</span>
               <span>{data && data.branch_name ? data.branch_name : "--"}</span>
diff --git a/src/forge/Order/order.css b/src/forge/Order/order.css
index 9850f36af..449554883 100644
--- a/src/forge/Order/order.css
+++ b/src/forge/Order/order.css
@@ -568,7 +568,7 @@ a.issue-type-button.active:hover {
 }
 .item-list-right {
   width: 74%;
-  padding: 0px 15px 10px 0;
+    /* padding: 10px; */
 }
 .detail_edit_action {
   padding: 10px;
@@ -608,6 +608,12 @@ a.issue-type-button.active:hover {
   align-items: center;
   grid-template-columns: 1fr max-content;
 }
+.grid-item-top {
+  display: grid;
+  align-items: center;
+  grid-template-columns: max-content 1fr;
+  align-items: flex-start;
+}
 .fwb {
   font-weight: bold;
 }
@@ -655,15 +661,27 @@ a.issue-type-button.active:hover {
   padding: 0 0 0 20px !important;
 }
 .comment-background {
-  background: rgba(250, 250, 250, 1);
-  /* padding: 15px;  */
-  border: 1px solid #f4f4f4;
+  background: #fff;
+  border-radius: 4px;
+  padding: 0 15px 15px; 
+  /* border: 1px solid #f4f4f4; */
 }
 .border-bottom-comment {
   border-bottom: 1px solid #eee;
 }
-.comment-background .ant-list-header {
-  padding: 20px;
+
+.custom-comment-tabs .ant-tabs-top-bar{
+  border-bottom: none;
+  padding: 15px 0;
+}
+.custom-comment-tabs .search-count-button{
+  line-height: 18px;
+  margin-left: 8px;
+  background-color: rgba(235,244,254,1);
+  color: #1890ff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 9px;
 }
 .comment-background .ant-list-item {
   padding: 16px;
@@ -684,8 +702,7 @@ a.issue-type-button.active:hover {
   box-shadow: none;
 }
 .children-comment-bg {
-  background: rgba(241, 248, 255, 1);
-  border: 1px solid rgba(238, 238, 238, 1);
+  background:rgba(250,250,250,1);
 }
 
 .display-in{
@@ -706,4 +723,6 @@ a.issue-type-button.active:hover {
   border-radius: 4px;
   margin-right: 5px;
   vertical-align: middle;
-}
\ No newline at end of file
+}
+.boder-4{border-radius: 4px;}
+.pbt20{padding: 20px 0;}
\ No newline at end of file
diff --git a/src/forge/Upload/attachment.js b/src/forge/Upload/attachment.js
index 812156f30..664fa15cd 100644
--- a/src/forge/Upload/attachment.js
+++ b/src/forge/Upload/attachment.js
@@ -47,7 +47,7 @@ class Attachment extends Component{
       <div>
         {
           attachments ?
-            <div className="attachmentsList mt20">
+            <div className="attachmentsList mt5">
               {
                 attachments.map((item,key)=>{
                   return(
diff --git a/src/forge/comments/children_comments.js b/src/forge/comments/children_comments.js
index 5d5e3d80e..0157942da 100644
--- a/src/forge/comments/children_comments.js
+++ b/src/forge/comments/children_comments.js
@@ -121,7 +121,7 @@ class children_comments extends Component {
     const renderList = (item) => {
       return (
         <div className="width100">
-          <div className="grid-item pb10">
+          <div className="grid-item pb5">
             <Link
               to={`/users/${item && item.user_login}`}
               className="show-user-link"
@@ -134,37 +134,12 @@ class children_comments extends Component {
                 height="30"
               />
             </Link>
-            <span className="grid-item">
-              <span>
-                <Link
-                  to={`/users/${item && item.user_login}`}
-                  className="show-user-link color-blue ml10"
-                >
-                  {item && item.user_name}
-                </Link>
-                <span className="color-grey-8 ml20">{item.created_at}</span>
-              </span>
-
-              <span className="text-right">
-                {current_user &&
-                (current_user.admin ||
-                  current_user.login === item.user_login) ? (
-                  <Popconfirm
-                    placement="bottom"
-                    title={"确定要删除当前评论吗?"}
-                    okText="是"
-                    cancelText="否"
-                    onConfirm={() => this.deleteorder(item.id)}
-                  >
-                    <Button type="link">
-                      <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
-                    </Button>
-                  </Popconfirm>
-                ) : (
-                  ""
-                )}
-              </span>
-            </span>
+            <Link
+              to={`/users/${item && item.user_login}`}
+              className="show-user-link color-black ml10 fwb"
+            >
+              {item && item.user_name}
+            </Link>
           </div>
           <div className="ml30">
             {this.commentCtx(item.content)}
@@ -180,6 +155,29 @@ class children_comments extends Component {
             ) : (
               ""
             )}
+            <div className="mt5">
+                <span className="color-grey-8">{item.created_at}</span>
+                <span className="ml20">
+                  {current_user &&
+                  (current_user.admin ||
+                    current_user.login === item.user_login) ? (
+                    <Popconfirm
+                      placement="bottom"
+                      title={"确定要删除当前评论吗?"}
+                      okText="是"
+                      cancelText="否"
+                      onConfirm={() => this.deleteorder(item.id)}
+                    >
+                      <Button type="link">
+                      <i className="iconfont icon-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
+                      <span className="font-12 color-grey-6">删除</span>
+                      </Button>
+                    </Popconfirm>
+                  ) : (
+                    ""
+                  )}
+                </span>
+              </div>
           </div>
         </div>
       );
@@ -188,7 +186,7 @@ class children_comments extends Component {
     return (
       <div>
         {search_count > 0 && (
-          <div className="children-comment-bg">
+          <div className="children-comment-bg mt10">
             <List
               size="large"
               loading={isSpin}
diff --git a/src/forge/comments/comments.js b/src/forge/comments/comments.js
index 2e763e416..a783db55b 100644
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@@ -5,13 +5,13 @@ import axios from "axios";
 import Upload from "../Upload/Index";
 import UploadImg from "../Images/upload.png";
 import { getImageUrl } from "educoder";
-import { List, Popconfirm, Pagination, Button } from "antd";
+import { List, Popconfirm, Pagination, Button, Tabs, Avatar } from "antd";
 import Attachments from "../Upload/attachment";
 import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
 import RenderHtml from "../../components/render-html";
 import ChildrenComments from "./children_comments";
 import "../Order/order.css";
-
+const { TabPane } = Tabs;
 class comments extends Component {
   constructor(props) {
     super(props);
@@ -303,99 +303,71 @@ class comments extends Component {
       </React.Fragment>
     );
 
+    // const comment_meditor = (
+
+    // )
+
     const new_comment = (is_reply, item_id) => {
       return (
-        <div>
-          {(current_user && current_user.login) ? (
-            <div>
-              <div className="grid-item pb10">
-                <Link
-                  to={`/users/${current_user && current_user.login}`}
-                  className="show-user-link"
-                >
-                  <img
-                    className="radius"
-                    src={getImageUrl(
-                      `images/${current_user && current_user.image_url}`
-                    )}
-                    alt=""
-                    width="30"
-                    height="30"
-                  />
-                </Link>
-                <Link
-                  to={`/users/${current_user && current_user.login}`}
-                  className="show-user-link color-blue ml10"
-                >
-                  {current_user && current_user.real_name}
-                </Link>
-              </div>
-              <MDEditor
-                placeholder={"添加评论..."}
-                height={200}
-                mdID={
-                  item_id
-                    ? "orderdetail-add-descriptions" + item_id
-                    : "orderdetail-add-descriptions"
-                }
-                initValue={is_reply ? reply_content : content}
-                onChange={
-                  is_reply ? this.replyContentChange : this.onContentChange
-                }
-              ></MDEditor>
-              <p className="quillFlag">
-                {quillFlag && <span className="">请输入评论内容</span>}
-              </p>
-              <Upload
-                className="commentStyle"
-                isComplete={attachment_clean}
-                load={this.UploadFunc}
-                icon={
-                  <img
-                    src={UploadImg}
-                    width="58"
-                    alt=""
-                    style={{ marginBottom: 15 }}
-                  />
-                }
-                size={100}
-                showNotification={this.props.showNotification}
-              />
-              <p className="clearfix mt20 text-right">
-                {is_reply && (
-                  <Button
-                    onClick={this.cancel_reply}
-                    size="large"
-                    className="mr15"
-                  >
-                    取消
-                  </Button>
-                )}
-                <Button
-                  type="primary"
-                  onClick={this.addjournals}
-                  loading={journal_spin}
-                  size="large"
-                >
-                  评论
-                </Button>
-              </p>
-            </div>
-          ) : (
-            <div className="mt15">
-              <span className="reply-comment-input">
-                    <Button
-                      className="add_reply_button"
-                      onClick={() => this.add_reply("")}
-                    >
-                      <span>我要回复</span>
-                    </Button>
-                  </span>
-              {/* <a className="" onClick={() => this.loginModal()}>
-              登录
-          </a>并参与到对话中 */}
-            </div>
-          )}
+        <div className="grid-item-top pb10">
+          <Link
+            to={`/users/${current_user && current_user.login}`}
+            className="show-user-link mr10"
+          >
+            <img
+              className="radius"
+              src={getImageUrl(
+                `images/${current_user && current_user.image_url}`
+              )}
+              alt=""
+              width="30"
+              height="30"
+            />
+          </Link>
+          <div>
+            <MDEditor
+              placeholder={"添加评论..."}
+              height={200}
+              mdID={
+                item_id
+                  ? "orderdetail-add-descriptions" + item_id
+                  : "orderdetail-add-descriptions"
+              }
+              initValue={is_reply ? reply_content : content}
+              onChange={
+                is_reply ? this.replyContentChange : this.onContentChange
+              }
+            ></MDEditor>
+            <p className="quillFlag">
+              {quillFlag && <span className="">请输入评论内容</span>}
+            </p>
+            <Upload
+              className="commentStyle"
+              isComplete={attachment_clean}
+              load={this.UploadFunc}
+              icon={
+                <img
+                  src={UploadImg}
+                  width="58"
+                  alt=""
+                  style={{ marginBottom: 15 }}
+                />
+              }
+              size={100}
+              showNotification={this.props.showNotification}
+            />
+            <p className="clearfix mt20">
+              <Button
+                type="primary"
+                onClick={this.addjournals}
+                loading={journal_spin}
+                className="mr15"
+              >
+                评论
+              </Button>
+              <Button onClick={this.cancel_reply}>取消</Button>
+            </p>
+          </div>
         </div>
       );
     };
@@ -403,7 +375,7 @@ class comments extends Component {
     const renderList = (item) => {
       return (
         <div className="width100">
-          <div className="grid-item pb10">
+          <div className="pb5">
             <Link
               to={`/users/${item && item.user_login}`}
               className="show-user-link"
@@ -416,37 +388,12 @@ class comments extends Component {
                 height="30"
               />
             </Link>
-            <span className="grid-item">
-              <span>
-                <Link
-                  to={`/users/${item && item.user_login}`}
-                  className="show-user-link color-blue ml10"
-                >
-                  {item && item.user_name}
-                </Link>
-                <span className="color-grey-8 ml20">{item.created_at}</span>
-              </span>
-
-              <span className="text-right">
-                {current_user &&
-                (current_user.admin ||
-                  current_user.login === item.user_login) ? (
-                  <Popconfirm
-                    placement="bottom"
-                    title={"确定要删除当前评论吗?"}
-                    okText="是"
-                    cancelText="否"
-                    onConfirm={() => this.deleteorder(item.id)}
-                  >
-                    <Button type="link">
-                      <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
-                    </Button>
-                  </Popconfirm>
-                ) : (
-                  ""
-                )}
-              </span>
-            </span>
+            <Link
+              to={`/users/${item && item.user_login}`}
+              className="show-user-link color-black ml10 fwb"
+            >
+              {item && item.user_name}
+            </Link>
           </div>
           <div className="ml30">
             {item.content ? (
@@ -466,6 +413,46 @@ class comments extends Component {
             ) : (
               ""
             )}
+            <div className="grid-item mt5">
+              <span className="color-grey-8">{item.created_at}</span>
+              <span className="text-right">
+                {current_user &&
+                (current_user.admin ||
+                  current_user.login === item.user_login) ? (
+                  <Popconfirm
+                    placement="bottom"
+                    title={"确定要删除当前评论吗?"}
+                    okText="是"
+                    cancelText="否"
+                    onConfirm={() => this.deleteorder(item.id)}
+                  >
+                    <Button type="link">
+                      <i className="iconfont icon-shanchu3 font-15 color-grey-6 mr5 ver-middle"></i>
+                      <span className="font-12 color-grey-6">删除</span>
+                    </Button>
+                  </Popconfirm>
+                ) : (
+                  ""
+                )}
+                <Button
+                  type="link"
+                  className="ml-10"
+                  onClick={() => this.add_reply(item.id)}
+                >
+                  <i className="iconfont icon-huifu1 font-15 color-grey-6 mr5 ver-middle"></i>
+                  <span className="font-12 color-grey-6">回复</span>
+                </Button>
+              </span>
+            </div>
+            {current_user && (
+              <div>
+                {is_reply && reply_id && reply_id === item.id ? (
+                  <div className="pt20">{new_comment(is_reply, item.id)}</div>
+                ) : (
+                  ""
+                )}
+              </div>
+            )}
             <ChildrenComments
               order_id={orderId}
               parent_id={item.id}
@@ -474,61 +461,68 @@ class comments extends Component {
               {...this.props}
             ></ChildrenComments>
           </div>
-
-          {current_user && (
-            <div>
-              {is_reply && reply_id && reply_id === item.id ? (
-                <div className="pd20">{new_comment(is_reply, item.id)}</div>
-              ) : (
-                <div className="grid-item mt15">
-                  <Link
-                    to={`/users/${current_user && current_user.login}`}
-                    className="show-user-link mr10"
-                  >
-                    <img
-                      className="radius"
-                      src={getImageUrl(
-                        `images/${current_user && current_user.image_url}`
-                      )}
-                      alt=""
-                      width="30"
-                      height="30"
-                    />
-                  </Link>
-                  <span className="reply-comment-input">
-                    <Button
-                      className="add_reply_button"
-                      onClick={() => this.add_reply(item.id)}
-                    >
-                      <span>我要回复</span>
-                    </Button>
-                  </span>
-                </div>
-              )}
-            </div>
-          )}
         </div>
       );
     };
 
     return (
-      <div className="pd20">
-        <div className="comment-background">
-          {journalsdata && journalsdata.journals_total_count > 0 ? (
-            <List
-              size="large"
-              loading={isSpin}
-              header={<div>回复({journalsdata.journals_total_count})</div>}
-              dataSource={journalsdata.issue_journals}
-              renderItem={(item) => <List.Item>{renderList(item)}</List.Item>}
-            />
-          ) : (
-            <div className="ant-list-header border-bottom-comment">
-              <div>回复({search_count})</div>
-            </div>
-          )}
+      <div className="mt20">
+        <div className="comment-background pd10 mb10">
+          <Tabs defaultActiveKey="1" className="custom-comment-tabs">
+            <TabPane
+              tab={
+                <span className="ml-3 font-16">
+                  评论
+                  {search_count > 0 && (
+                    <span className="search-count-button">{search_count}</span>
+                  )}
+                </span>
+              }
+              key="1"
+            >
+              <div className="mb10">
+                {is_reply && !reply_id ? (
+                  <div className="pd20">{new_comment(is_reply, undefined)}</div>
+                ) : (
+                  <div className="children-comment-bg pd20 grid-item">
+                    <img
+                      className="radius"
+                      src={getImageUrl(
+                        `images/${
+                          current_user
+                            ? current_user.image_url
+                            : "avatars/User/b"
+                        }`
+                      )}
+                      alt=""
+                      width="30"
+                      height="30"
+                    />
+                    <span className="reply-comment-input mr20">
+                      <Button
+                        className="add_reply_button ml15"
+                        onClick={() => this.add_reply(undefined)}
+                      >
+                        <span>添加评论...</span>
+                      </Button>
+                    </span>
+                  </div>
+                )}
+              </div>
+              {journalsdata && journalsdata.journals_total_count > 0 && (
+                <List
+                  size="large"
+                  loading={isSpin}
+                  header=""
+                  dataSource={journalsdata.issue_journals}
+                  renderItem={(item) => (
+                    <List.Item>{renderList(item)}</List.Item>
+                  )}
+                />
+              )}
+            </TabPane>
+          </Tabs>
           {Paginations}
-          <div className="pd20 border-top-e">{new_comment()}</div>
         </div>
       </div>
     );