forgeplus-react/src/forge/Information/Pages/sourceDetail.jsx

import React , { useEffect , useState } from 'react';
import { Badge, Breadcrumb } from 'antd';
import SourceFile from '../img/sourceFile.png';
import { getFileByZone, getSourceDetail } from '../api';
import { Link } from 'react-router-dom';
import { httpUrl } from '../fetch';
import { AlignCenter, FlexAJ } from '../../Component/layout';
import SourceIcon from '../img/sourceIcon.png';
import { addMeta, setSeoMeta } from 'educoder';
import {getUniqueIdentifier,getUserName,getBrowserPlatform,getBrowserBrand} from '../utils';
import {setZoneVisits} from '../api'
import axios from 'axios';
import RenderHtml from '../../../components/render-html';


function SourceDetail(props){
  const { deptId , sourceid } = props.match.params;
  const [ detail , setDetail ] = useState(undefined);
  const [files, setFiles] = useState([]); 
  const [mdFiles, setMdFiles] = useState([]); 
  const [mdContents, setMdContents] = useState(undefined);
  
  const zonedetail = props.data;
  const {temp} = props;

  useEffect(()=>{
    let uuid = getUniqueIdentifier()
    let url = props.location.pathname
    let platform = getBrowserPlatform()
    let browser = getBrowserBrand()
    let username = getUserName(props.current_user)
    // if(!username) uuid = getUniqueIdentifier()
    let remark = ` 操作系统：${platform};浏览器：${browser};`
    setZoneVisits({url,username,uuid,remark})
  },[])

  useEffect(()=>{
    if(sourceid){
      getDetails();
    }
  },[sourceid])

  useEffect(()=>{
    // 设置网页标题
    if(detail){
      const { name, domainName, summary} = detail;
      document.title = `${ name }/${ domainName }`;
      addMeta('Keywords', `${ name },${ domainName },${ summary }`);
    }
    return componentWillUnmount
  }, [detail])

  function componentWillUnmount() {
    if (zonedetail) {
      document.title= zonedetail.mainTitle;
      setSeoMeta(`${zonedetail.name},`, zonedetail.name, zonedetail.subTitle, `/zone/${deptId}`)
    }
  }

  function getDetails() {
    getSourceDetail(sourceid).then(response => {
      if (response) {
        setDetail(response.data.data);
        const { fileList } = response.data.data;
        if (deptId === "NSCC") {
          initMDContent(fileList)
        }else{
          setFiles(fileList);
        }

      }
    }).catch(error => { })
  }

  async function initMDContent(fileList) {
    const mdFileList = fileList.filter(item =>
      item.fileOriginName && item.fileOriginName.toLowerCase().endsWith('.md')
    );

    const nonMdFiles = fileList.filter(item =>
      !item.fileOriginName || !item.fileOriginName.toLowerCase().endsWith('.md')
    );
    setFiles(nonMdFiles);

    if (mdFileList.length > 0) {
      setMdFiles(mdFileList);
      
      try {
        const contents = await Promise.all(
          mdFileList.map(async (file) => {
            const res = await axios.get(`${httpUrl}/file/open/download/${file.fileId}`, {
              responseType: 'text'
            });
            return { [file.fileId]: res.data };
          })
        );
        
        // 合并所有结果为单个对象
        setMdContents(contents.reduce((acc, item) => ({ ...acc, ...item }), {}));
        
      } catch (error) {
        console.error('获取 md 文件失败:', error);
      }
    }
  }

  return(
    <div className="boxmain"style={{paddingBottom:"40px"}}>
      <Breadcrumb separator=">" style={{paddingTop:"20px"}}>
        <Breadcrumb.Item><Link className="primaryColor" to={`/zone/${deptId}/source`}>资源列表</Link></Breadcrumb.Item>
        <Breadcrumb.Item>详情页</Breadcrumb.Item>
      </Breadcrumb>
      {
        detail &&
        <div className="source_detail_box">
          <div className="s_d_title">
            <FlexAJ>
              <AlignCenter style={{flex: 1}}>
                <span className='domainNameBoxD font-13 mr15'>{detail.domainName}</span>
                <span className='font-22' style={{flex: 1}}>{detail.name}</span>
              </AlignCenter>
              <div className="load_count">
                <img src={SourceIcon} alt="" width="18px" className="mr5" style={{marginTop: '-4px'}}/><span style={{color:"#5e6685"}}>{detail.downloadCount}</span>
              </div>
            </FlexAJ>
            {detail.createUser && detail.createUser.avatar && <Link to={`/${detail.createUser.userName}`}><img alt='' src={detail.createUser.avatar} className='publicUserAvatar mr10'/></Link>}
            {detail.createUser && <Link className='mr20' to={`/${detail.createUser.userName}`}>{detail.createUser.nickName}</Link>}
            <span className='mr20'>发布于{detail.updateTime || detail.createTime}</span>
            {detail.auditStatus === '0' && <Badge color={temp === "zone" ? "#466aff" : "#089f7f"} text="待审核" className='pass'/> }
            {detail.auditStatus === '2' && <Badge color="#eb1212" text="未通过" className='failed'/> }
          </div>
          {mdContents && Object.keys(mdContents).length > 0 ? <div className="md-preview-box">
            {mdFiles.map((file) => (
              <div key={file.fileId} className="pb20">
                <RenderHtml className="editor-content-panel mt20 imageLayerParent" value={ mdContents[file.fileId] || '加载中...' } url={history.location}/>
              </div>
            ))}
          </div> : <div className='pb20' dangerouslySetInnerHTML={{ __html: detail.summary }} ></div>}
          {
            files && files.length > 0 &&
            <ul className="files_box">
              {
                files.map((i,k)=>{
                  return(
                    <li>
                      <img src={SourceFile} alt="" width="20px" className="mr12"/>
                      <span className="task-hide">{i.fileOriginName}</span>
                      <span style={{width: '340px'}}>{i.zoneResourceType.name}</span>
                      <span>{i.fileSizeInfo}</span>
                      <a href={`${httpUrl}/file/open/download/${i.fileId}`} download className="f_b_load primaryColor">下载</a>
                    </li>
                  )
                })
              }
            </ul>
          }
        </div>
      }
    </div>
  )
}
export default SourceDetail;