forgeplus-react/src/forge/Wiki/Preview.jsx

import React, { useEffect, useCallback, useState } from 'react';
import { Input, Button,  Select, Dropdown, Icon, Menu, message } from 'antd';
import CopyTool from '../Component/CopyTool';
import { wikiPages, getWiki, } from './api';
import { httpUrl } from './fetch';
import './Index.scss';
const InputGroup = Input.Group;
const { Option } = Select;

export default (props) => {

  const { match, history, showNotification, project, projectDetail } = props;
  const permission = projectDetail && projectDetail.permission && projectDetail.permission !== "Reporter";

  let projectsId = match.params.projectsId;
  let owner = match.params.owner;

  let projectName = match.params.projectName;
  let projectId = match.params.projectId;

  console.log('projectName:');
  console.log(projectName);

  const [checkItem, setCheckItem] = useState({});
  const [itemDetail, setItemDetail] = useState({});

  const [fileArr, setFileArr] = useState([]);
  const [urlType, setUrlType] = useState('HTTPS');

  useEffect(() => {
    projectsId && wikiPages({
      owner: owner,
      repo: projectsId,
      projectId: projectId,
    }).then(res => {
      if (res && res.message === "200") {
        setFileArr(res.data);
        if (res.data.length) {
          setCheckItem(res.data[0]);
        };
      } else {
        showNotification("加载失败")
      }
    });
  }, [project])


  useEffect(() => {
    projectsId && checkItem.name && getWiki({
      owner: owner,
      repo: projectsId,
      pagename: checkItem.name,
      projectId: projectId,
    }).then(res => {
      if (res && res.message === "200") {
        setItemDetail(res.data);
      } else {
        showNotification("加载失败")
      }
    });
  }, [project, checkItem]);

  function goEdit() {
    history.push(`/projects/${owner}/${projectsId}/wiki/edit/${checkItem.name}`);
  }

  function goBack() {
    history.push(`/projects/${owner}/${projectsId}/wiki`);
  }

  // 支持 Markdown，Html，Pdf格式文件
  const menu = (
    <Menu >
      <Menu.Item key="1" onClick={() => { downloadWiki('markdown') }}>
        Markdown
      </Menu.Item>
      <Menu.Item key="2" onClick={() => { downloadWiki('html') }}>
        HTML
      </Menu.Item>
      <Menu.Item key="3" onClick={() => { downloadWiki('pdf') }}>
        PDF
      </Menu.Item>
    </Menu>
  );

  function downloadWiki(type) {
    window.open(`${httpUrl}/api/wikiExport/wikiExport-wrapper?repoName=${projectsId}&owner=${owner}&type=${type}&projectName=${projectName}&projectId=${projectId}`);
  }


  return (
    <div className="wiki-preview">
      <div className="preview-head">
        <div className="preview-head-left" onClick={goBack}>
          <i className="iconfont icon-wendangyulan_icon mr3"></i>
          <span className="ml10">{projectName}</span>
        </div>
        <div className="preview-head-right">
          <span className="copy-desc">克隆地址</span>
          {
            checkItem.wiki_clone_link && <InputGroup className="copy-url" compact>
              <Select dropdownClassName="wiki-url-type" defaultValue="HTTPS" onChange={(v) => { console.log(v); setUrlType(v) }}>
                <Option value="HTTPS">HTTPS</Option>
                <Option value="SSH">SSH</Option>
              </Select>
              <Input id="wikiUrl" value={urlType === 'HTTPS' ? checkItem.wiki_clone_link.https : checkItem.wiki_clone_link.ssh} />
              <CopyTool className="copy-wiki" inputId="wikiUrl"/>
            </InputGroup>
          }

          <Dropdown overlay={menu}>
            <Button className="ml10">导出<Icon type="caret-down" /></Button>
          </Dropdown>
        </div>
      </div>


      <div className="wiki-body">
        <div className="wiki-nav">
          {
            fileArr.map(item => {
              return <div className={`${item.name === checkItem.name ? 'active' : ''} wiki-nav-title`} key={item.name} onClick={() => { setCheckItem(item) }}>
                <span className="nav-title-left" >
                  <i className="iconfont icon-wenjianjia2 mr3"></i>
                  <span className="nav-title-left-text">{item.name}</span>
                </span>
              </div>
            })
          }

        </div>

        <div className="wiki-content">
          <div className="wiki-content-head">
            <h3>{checkItem.name}</h3>
            {permission && <Button type="primary" onClick={goEdit}>编辑</Button>}
          </div>

          <div className="wiki-content-detail editor-content-panel markdown-body" dangerouslySetInnerHTML={{ __html: itemDetail && itemDetail.simple_content }} ></div>
        </div>
      </div>


    </div>
  )
}