Merge pull request '代码库文件详情' (#120) from caishi/forgeplus-react:feature_repo_second_page into feature_repo_second_page

2021-10-09 13:58:44 +08:00 · 2021-10-09 13:58:44 +08:00 · 256ab53e90
parent e7b977cc6b bdf6c7afe4
commit 256ab53e90
10 changed files with 142 additions and 86 deletions
--- a/src/forge/Branch/Select.jsx
+++ b/src/forge/Branch/Select.jsx
@ -51,7 +51,7 @@ export default (({ projectsId , branch , owner , changeBranch , branchList , tag
  );
  return(
    <Dropdown placement='bottomLeft' visible={visible} overlay={menu} overlayClassName="branch-tagBox-list" trigger={['click']} >
-      <div className="branch-tagBox" ref={refBox} onClick={()=>setVisible(true)}>
+      <div className="branch-tagBox" ref={refBox} onClick={()=>setVisible(visible ? false : true)}>
        {/* {nav === 0 ?"分支":"标签"} */}
        <span className="color-grey-9 mr3 ml8"><i className="iconfont icon-fenzhi2 font-18"></i></span>
        <span className="ant-dropdown-link task-hide" style={{fontWeight:"500",minWidth:"45px",maxWidth:"270px"}}>
--- a/src/forge/DevOps/Dispose/PipelineName.jsx
+++ b/src/forge/DevOps/Dispose/PipelineName.jsx
@ -51,7 +51,7 @@ function PipelineName({visible,onCancel,onOk,value ,branchList}){
            })
          }
        </Select>
-        <Select mode="multiple" allowClear value={eventValue} dropdownClassName="chooseCon" style={{width:"180px",marginLeft:"10px"}} onChange={(e)=>{console.log(e);setEventValue(e)}}>
+        <Select mode="multiple" allowClear value={eventValue} dropdownClassName="chooseCon" style={{width:"180px",marginLeft:"10px"}} onChange={(e)=>{setEventValue(e)}}>
          {
            EVENT.map((item,key)=>{
              return(
--- a/src/forge/DevOps/ssh/XmlPanel.jsx
+++ b/src/forge/DevOps/ssh/XmlPanel.jsx
@ -24,7 +24,6 @@ function onLayout(term, el) {
          entry.target.offsetHeight,
          term,
        );
-        console.log('cols, rows', cols, rows);
        term.resize(cols, rows);
        mediator.publish('ssh-xterm-resize', {
          columns: cols,
@ -139,12 +138,10 @@ export default ({ sshConfigData, sid }) => {
            }, 1000);
          }
          isFirstConnected.current = true;
-          console.log('event:', event);

          const data = Base64.decode(event.data.toString());
          let w = term._core._renderService.dimensions.actualCellWidth || 9.5;

-          console.log('data:', data, w, term);
          term.write(data);
        };

--- a/src/forge/Head/Header.js
+++ b/src/forge/Head/Header.js
@ -120,7 +120,6 @@ class NewHeader extends Component {
    })
  };
  HideAddcoursestypess = (i) => {
-    console.log("调用了");
    this.setState({
      Addcoursestypes: false,
      mydisplay: true,
@ -269,7 +268,7 @@ class NewHeader extends Component {
              )
            })
          }
-          <li><Link to={`/settings/profile`}>设置</Link></li>
+          {/* <li><Link to={`/settings/profile`}>设置</Link></li> */}
        <Menu.Item><a onClick={() => this.educoderloginysl()}>退出</a></Menu.Item>
      </Menu>
    )
--- a/src/forge/Main/CoderDepot.jsx
+++ b/src/forge/Main/CoderDepot.jsx
@ -340,6 +340,7 @@ function CoderDepot(props){
  const mdFlag = n && n.substring(n.length-3,n.length) === ".md";

  const { current_user } = props;
+  const baseOper = projectDetail && projectDetail.permission;
  const baseOperate = projectDetail && projectDetail.permission && projectDetail.permission !=="Reporter";
  const fileOperate = type === "dir" && projectDetail && projectDetail.type !== 2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));

@ -420,14 +421,14 @@ function CoderDepot(props){
                    </AlignCenter>
                    <AlignCenter className="depotBtn">
                      {
-                        baseOperate && ((projectDetail.type !== 2 && pullsFlag) || issuesFlag )&&
+                        ((baseOperate && projectDetail.type !== 2 && pullsFlag) || (baseOper && issuesFlag)) &&
                        <div className="addOptionBtn">
                          {
-                            projectDetail.type !== 2 && pullsFlag &&
+                            baseOperate && projectDetail.type !== 2 && pullsFlag &&
                            <CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/pulls/new/${branchName || defaultBranch}`)} >+ 合并请求</CheckProfile>
                          }
                          {
-                            issuesFlag &&
+                            baseOper && issuesFlag &&
                            <CheckProfile {...props} sureFunc={()=>urlLink(`/${owner}/${projectsId}/issues/new`)} >+ 易修</CheckProfile>
                          }
                        </div>
@ -576,7 +577,7 @@ function CoderDepot(props){
                      <Contributors contributors={projectDetail.contributors} owner={owner} projectsId={projectsId} />
                    }
                    {/* 语言 */}
-                    { projectDetail && projectDetail.languages &&
+                    { projectDetail && projectDetail.languages && 
                      <React.Fragment>
                        <Divider />
                        <LanguagePower languages={projectDetail.languages}/>
--- a/src/forge/Main/CoderDepotPath.jsx
+++ b/src/forge/Main/CoderDepotPath.jsx
@ -13,7 +13,6 @@ function CoderDepotPath({treeValuePath , returnUlr , returnMain , getPathUrl , i
          {identifier}
        </a>
        {treeValuePath.map((item, key) => {
-          console.log(result)
          return (
            <React.Fragment>
              {
--- a/src/forge/Main/CoderRootFileDetail.js
+++ b/src/forge/Main/CoderRootFileDetail.js
@ -1,10 +1,12 @@
 import React, { Component } from "react";
-import { Popconfirm , Select } from "antd";
+import { Popconfirm , Select , Dropdown , Spin , Anchor } from "antd";
 import "./list.scss";
 import axios from "axios";
 import Meditor from "../Newfile/m_editor";
 import RenderHtml from "../../components/render-html";
+import ReadmeCatelogue from "./sub/ReadmeCatelogue";

+const $ = window.$;
 function bytesToSize(bytes) {
  if (bytes === 0) return "0 B";
  let k = 1024,
@ -19,7 +21,8 @@ class CoderRootFileDetail extends Component {
      value: undefined,
      language: undefined,
      languages: undefined,
-      description: props.detail.content
+      description: props.detail.content,
+      menuList:undefined
    };
  }

@ -169,6 +172,31 @@ class CoderRootFileDetail extends Component {
    });
  };

+  renderMenulist=()=>{
+    const { description } = this.state;
+      if(description){
+        const items = $.map($("#files-md").find("h1,h2,h3,h4,h5,h6"), function (el, _) {
+          const anchor = el.id;
+          const level = el.tagName.replace("H", "");
+          const href = `#${anchor}`;
+          return { href:`${href}`,text:el.textContent , level:level }
+        });
+        return items;
+      }
+    return [];
+  }
+
+  menu=()=>{
+    const menuList = this.renderMenulist();
+    if(menuList && menuList.length > 0){
+      return(
+        <ReadmeCatelogue menuList={menuList} hash={this.props.history.location.hash}/>
+      )
+    }else{
+      return <Spin />
+    }
+  }
+
  render() {
    const {
      readOnly,
@ -186,79 +214,88 @@ class CoderRootFileDetail extends Component {
    const Option = Select.Option;
    return (
      <React.Fragment>
-        <div className="grid-item branchTitle">
-          <div className="grid-item">
-            <span className="ml20 color-grey-6 font-16">
+        <Anchor className="griditemAnchor" offsetTop={70} targetOffset={160}>
+          <div className="griditemCate">
+            {
+              md && readOnly &&
+              <Dropdown overlay={this.menu()} trigger={['hover']} overlayClassName="menuslist">
+                <span className="catelogue mr20">
+                  <i className="iconfont icon-muluicon font-12 mr5"></i>
+                  <span>目录</span>
+                </span>
+              </Dropdown>
+            }
+            <span className="color-grey-6 font-16">
              {bytesToSize(detail && detail.size)}
            </span>
          </div>
          <p className="text-right">
-            {flag && platform && (
-              <div>
-                {readOnly ? (
-                  <span>
-                    {
-                      !detail.direct_download?
-                        <span>
-                          <a onClick={() => this.DownLoadFile(detail.download_url)} className="ml20">
-                            <i className="iconfont icon-xiazai1 font-15 color-grey-6"></i>
-                          </a>
-                          {
-                            type !==2  &&
-                            <a onClick={() => this.EditFile(false)} className="ml20">
-                              <i className="iconfont icon-bianji1 font-15 color-grey-6"></i>
+              {flag && platform && (
+                <div>
+                  {readOnly ? (
+                    <span>
+                      {
+                        !detail.direct_download?
+                          <span>
+                            <a onClick={() => this.DownLoadFile(detail.download_url)} className="ml20">
+                              <i className="iconfont icon-xiazai1 font-15 color-grey-6"></i>
                            </a>
-                          }
-                        </span>:""
-                    }
-                  </span>
-                ) : (
-                    <React.Fragment>
-                      <Select
-                        showSearch={true}
-                        placeholder={"请选择文本语言"}
-                        style={{ width: 200 }}
-                        value={language}
-                        onChange={this.select_language}
-                      >
-                        <Option value={undefined}>请选择文本语言</Option>
-                        {languages &&
-                          languages.map((item, key) => {
-                            return (
-                              <Option value={item} key={key}>
-                                {item}
-                              </Option>
-                            );
-                          })}
-                      </Select>
-                      <button
-                        type="button"
-                        className="ant-btn ant-btn-sm ml20"
-                        onClick={() => this.EditFile(true)}
-                      >
-                        <span>取 消</span>
-                      </button>
-                    </React.Fragment>
-                  )}
-                {
-                  type !==2 &&
-                  <Popconfirm
-                    title="确认删除这个文件？"
-                    className="ml20"
-                    okText="确定"
-                    cancelText="取消"
-                    onConfirm={this.deleteFile}
-                  >
-                    <a>
-                      <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
-                    </a>
-                  </Popconfirm>
-                }
-                
-              </div>
-            )}
-          </p>
-        </div>
+                            {
+                              type !==2  &&
+                              <a onClick={() => this.EditFile(false)} className="ml20">
+                                <i className="iconfont icon-bianji1 font-15 color-grey-6"></i>
+                              </a>
+                            }
+                          </span>:""
+                      }
+                    </span>
+                  ) : (
+                      <React.Fragment>
+                        <Select
+                          showSearch={true}
+                          placeholder={"请选择文本语言"}
+                          style={{ width: 200 }}
+                          value={language}
+                          onChange={this.select_language}
+                        >
+                          <Option value={undefined}>请选择文本语言</Option>
+                          {languages &&
+                            languages.map((item, key) => {
+                              return (
+                                <Option value={item} key={key}>
+                                  {item}
+                                </Option>
+                              );
+                            })}
+                        </Select>
+                        <button
+                          type="button"
+                          className="ant-btn ant-btn-sm ml20"
+                          onClick={() => this.EditFile(true)}
+                        >
+                          <span>取 消</span>
+                        </button>
+                      </React.Fragment>
+                    )}
+                  {
+                    type !==2 &&
+                    <Popconfirm
+                      title="确认删除这个文件？"
+                      className="ml20"
+                      okText="确定"
+                      cancelText="取消"
+                      onConfirm={this.deleteFile}
+                    >
+                      <a>
+                        <i className="iconfont icon-shanchu font-15 color-grey-6"></i>
+                      </a>
+                    </Popconfirm>
+                  }
+                  
+                </div>
+              )}
+            </p>
+        </Anchor>
        <div>
          {detail.image_type ? (
            <div className="edu-txt-center pt20 pb20">
@ -272,7 +309,7 @@ class CoderRootFileDetail extends Component {
            </div>
          ) : (
            md && readOnly ?
-              <div className="files-md">
+              <div className="files-md" id="files-md">
                <RenderHtml className="file-md imageLayerParent" value={description}  url={this.props.history.location}/>
              </div>
              :
--- a/src/forge/Main/Index.scss
+++ b/src/forge/Main/Index.scss
@ -461,4 +461,24 @@
 .coderSubPage{
  width: 1200px;
  margin:0px auto;
+}
+.griditemAnchor{
+  margin-left: 0px;
+  padding: 0px;
+  border-bottom: 1px solid #ddd;
+  .ant-anchor{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+  }
+  .griditemCate{
+    color: #333;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    .catelogue{
+      margin-left: 0px;
+    }
+  }
 }
--- a/src/forge/Main/list.scss
+++ b/src/forge/Main/list.scss
@ -575,6 +575,9 @@
  border:1px solid #ddd;
  margin-top: 18px;
  border-radius: 4px;
+  .ant-anchor-wrapper{
+    overflow: unset!important;
+  }
 }
 .commonBox .commonBox-title{
  padding:0px 20px;
--- a/src/forge/Main/sub/ReadmeCatelogue.jsx
+++ b/src/forge/Main/sub/ReadmeCatelogue.jsx
@ -1,7 +1,7 @@
-import React , { useState , useEffect } from 'react';
+import React , { useState } from 'react';
 import { Anchor , Input } from 'antd';
 import './sub.scss';
-import { Base64 } from 'js-base64';
+import { useEffect } from 'react';

 const { Link } = Anchor;

@ -18,7 +18,7 @@ function ReadmeCatelogue({ menuList , hash }) {
  function changeValue(e) {
    setValue(e.target.value);
    if(e.target.value){
-      let m = menuList.filter(i=>i.text.indexOf(e.target.value)>-1);
+      let m = menuList.filter(i=>i.text.toLowerCase().indexOf(e.target.value.toLowerCase())>-1);
      setMenu(m);
    }else{
      setMenu(menuList);