merging

src/forge/Information/Pages/homepage/component/introduction.jsx

@@ -0,0 +1,46 @@
+import React , { useEffect, useState } from 'react';
+import { getZoneStatistics } from '../../../api';
+import '../index.scss';
+
+// 专区简介，文字在左，图在右
+// statistics: 是否展示统计区域
+function Introduction({data, statistics=true}) {
+  const {id, firstTitle, introductionContent, introductionImage} = data || {};
+  const label = {
+    communityUserCount: "社区用户",
+    cmsDocVisits: "文章访问数",
+    projectCount: "代码仓库",
+    resourceCount: "社区资源",
+    cmsDocCount: "社区新闻",
+    specialProjectCount: "重大项目",
+  }
+  const [data1, setData1] = useState({});
+
+  useEffect(()=>{
+    id && getZoneStatistics(id).then(res=>{
+      setData1(res.data && res.data.data)
+    })
+  }, [id])
+
+  return <div className='introduction_1_bg'>
+    <div className='introduction_1 width1200 pt50 pb60'>
+      <div className='firstTitle font-bd font-30 mb50 align'>
+        {firstTitle}
+        <span className='firstTitle_back font-34'>ABOUT  US</span>
+      </div>
+      <div>
+        {introductionImage && <img src={introductionImage} alt="" width="526px" align="right" hspace="35" vspace="10"/>}
+        {introductionContent && <span dangerouslySetInnerHTML={{ __html: introductionContent }} className='font-16' style={{lineHeight: '40px'}}></span>}
+      </div>
+      {statistics && <div className='df wrap mt50 between'>
+        {Object.keys(label).map(item=>{
+          return <div className='align font-16'>
+            <span className='font-34 color-blue font-bd'>{data1[item]}</span><br/>
+            {label[item]}
+          </div>
+        })}
+      </div>}
+    </div>
+  </div>
+}
+export default Introduction;

src/forge/Information/Pages/homepage/component/news.jsx

@@ -0,0 +1,173 @@
+import React , { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getDirListById, getSubDocList } from '../../../api';
+import { Badge, Col, Icon, Row } from 'antd';
+import dirpng from '../image/new3.png'
+import new4 from '../image/new4.png';
+import new5 from '../image/new5.png';
+import new6 from '../image/new6.png';
+import new7 from '../image/new7.png';
+import new8 from '../image/new8.png';
+import new9 from '../image/new9.png';
+import new10 from '../image/new10.png';
+import new11 from '../image/new11.png';
+import new12 from '../image/new12.png';
+import new13 from '../image/new13.png';
+import '../index.scss';
+import Nodata from '../../../../Nodata';
+
+function News({data, subTitle, firstDirIntro, secondDirIntro}) {
+  const {firstTitle, key, homepageCmsTitle, id} = data || {};
+  const logoByName = {
+    "智慧城市OS": new4,
+    "智慧交通OS": new5,
+    "智慧建设OS": new6,
+    "机器人OS": new7,
+    "智能家居OS": new8,
+    "桌面OS": new9,
+    "服务器OS": new10,
+    "移动智能终端OS": new11,
+    "嵌入式及物联网OS": new12,
+    "云OS": new13
+  }
+  const [dirList, setDirList] = useState([]);
+  const firstDir = dirList[0];
+  const secondDir = dirList[1];
+  const dirs = dirList.slice(2)
+  
+  // const rows = Math.ceil(dirs.length / 6);
+  const [docListByFirstDir, setDocListByFirstDir] = useState([]);
+  const [docListBySecondDir, setDocListBySecondDir] = useState([]);
+  const [docListByDir, setDocListByDir] = useState([]);
+  const [activeDirId, setActiveDirId] = useState(undefined);
+  const [total, setTotal] = useState(0);
+
+  useEffect(()=>{
+    id && getDirListById(id).then(res=>{
+      if(res){
+        const rows = res.data.rows
+        setDirList(rows);
+        // 获取第一个栏目的第一条文章
+        rows[0] && getDocById(rows[0].id, 1, (data)=>{
+          setDocListByFirstDir(data)
+        })
+        // 获取第2个栏目的第一条文章
+        rows[1] && getDocById(rows[1].id, 8, (data)=>{
+          setDocListBySecondDir(data)
+        })
+        rows[2] && setActiveDirId(rows[2].id)
+      }
+    })
+  }, [id])
+
+  useEffect(()=>{
+    activeDirId && getDocById(activeDirId, 4, (data)=>{
+      setDocListByDir(data)
+    }, (data)=>{setTotal(data)})
+  }, [activeDirId])
+  
+  // 根据招聘专栏的id获取其栏目下的招聘文章
+  function getDocById(dirId, pageSize=10, setData, setTotal1){
+    getSubDocList(dirId,{pageSize:pageSize,pageNum:1,auditStatus:1}).then(result=>{
+      if(result && result.data.rows){
+        let rows = result.data.rows;
+        setData(rows);
+        setTotal1 && setTotal1(result.data.total)
+      }
+    })
+  }
+
+  const renderItems = () => {
+    const itemsPerRow = 6;
+    let rendered = [];
+    let currentRow = [];
+
+    dirs.forEach((item, index) => {
+      
+      // 添加项目到当前行
+      currentRow.push(
+        <div key={item.id} className="center pointer mb20 n_1_dir" onClick={()=>{setActiveDirId(item.id)}}>
+          <img src={logoByName[item.name] || new4} width={86}/>
+          <p className={activeDirId === item.id && "activeDir pb3"}>{item.name}</p>
+        </div>
+      );
+
+      // 如果达到每行项目数或是最后一个项目
+      if ((index + 1) % itemsPerRow === 0 || index === dirs.length - 1) {
+        // 将当前行添加到渲染列表
+        rendered = rendered.concat(currentRow);
+        
+        if (currentRow.some(item => item.key === activeDirId?.toString())) {
+          rendered.push(
+            <div className=' mt30 pl15 pr15' key="doc" style={{flex: "0 0 100%", overflow: 'hidden'}}>
+              <div className='df wrap between'>
+                {docListByDir.map(item=>{
+                  return <div className='docDetailByNews_1 mb20'>
+                    <Link to={`/zone/${key}/newdetail/${item.id}`} className="font-15">
+                      <Badge color="#466AFF"/>
+                      <span className='pl5'>{item.name}</span>
+                    </Link>
+                    <p className='task-hide color777'>{item.summary}</p>
+                  </div>
+                })}
+                {!docListByDir.length && <div className='mb20 pl40 font-15'>暂无数据~</div>}
+              </div>
+              {total > 4 && <div className='align'><Link to={`/zone/uos/news/${activeDirId}`} onClick={()=>{window.scrollTo(0,450)}} className="color-blue font-15">查看更多<i className='iconfont icon-jiantou1 ml10 font-12'></i></Link></div>}
+            </div>
+          );
+        }
+        // 重置当前行
+        currentRow = [];
+      }
+    });
+    return rendered;
+  };
+
+  return <div className='news_1_bg'>
+    <div className='news_1 width1200 pt50 pb60'>
+      <p className='font-bd font-30 mb15 align task-hide'>{homepageCmsTitle}</p>
+      <p className='font-16 align color212 mb50'>{subTitle}</p>
+      <div className='df mb80'>
+        {/* 第一个顺序栏目 */}
+        {firstDir && <div className='firstDir clearfix'>
+          <p className='font-16 task-hide'>
+            {firstDir.name}
+            <Link style={{color: 'white'}} className='fr font-15' to={`/zone/uos/news/${firstDir.id}`}>更多<Icon type="arrow-right" className="ml5"/></Link>
+          </p>
+          <div style={{fontFamily:"FangSong", height: 200}} className='font-24 ml85 mr80 flexCenter font-bd'>{firstDirIntro}</div>
+          {docListByFirstDir[0] && <div className='pt10 pb10 pl20 docByFirstDir task-hide'>
+            <Badge color="white" className='mr10'/>
+            <Link to={`/zone/${key}/newdetail/${docListByFirstDir[0].id}`} className="font-15" style={{color: 'white'}}>{docListByFirstDir[0].name}</Link>
+          </div>}
+        </div>}
+        {/* 第二个顺序栏目 */}
+        {secondDir && <div className='secondDir flex1 ml30'>
+          <div className='flexCenter pt15 pb15' style={{backgroundColor: '#F5F5F5'}}>
+            <div className='img-box ml20 mr20'>
+              <img src={dirpng}/>
+            </div>
+            <div>
+              <p className='font-17 font-bd task-hide'>{secondDir.name}</p>
+              <p className='color627'>{secondDirIntro}</p>
+            </div>
+          </div>
+          <Row className='docBySecondDir pl25 pr30 pt10 pb30 mr0' type="flex" style={{alignContent: "flex-start", marginLeft: 0}} gutter={16}>
+            {docListBySecondDir.map(item=>{
+              return <Col span={12} className='mt15 task-hide pr15 font-15'>
+                <Link to={`/zone/${key}/newdetail/${item.id}`}>
+                  <Badge color="#466AFF" className='mr10'/>
+                  {item.name}
+                </Link>
+              </Col>
+            })}
+            {docListBySecondDir && !docListBySecondDir.length && <div style={{margin: '0 auto', maxHeight: '230px'}}><Nodata small _html="暂无数据"/></div>}
+          </Row>
+        </div>}
+      </div>
+      <div className='df wrap backWhite pt15 pb15 pl10 pr10'>
+        {renderItems()}
+      </div>
+    </div>
+  </div>
+}
+export default News;

src/forge/Information/Pages/homepage/component/partner.jsx

@@ -0,0 +1,52 @@
+import React , { useEffect, useState } from 'react';
+import { getPartnerList } from '../../../api';
+import '../index.scss';
+
+function Partner({data}) {
+  const {id, key, homepagePartnersTitle} = data || {};
+  const [ list , setList ] = useState([]);
+
+  useEffect(()=>{
+    id && getPartnerList(id).then(response=>{
+      if(response && response.data){
+        const rows = response.data.rows;
+        setList(rows[0] && rows[0].zonePartnersList);
+      }
+    }).catch(error=>{})
+  },[id])
+
+  const rows = Math.ceil(list.length / 11); // 每两行为一个周期，共11个格子
+  
+  const gridItems = [];
+
+  const item = (item, index) => (
+    <div key={index} className={`partner_1_logo flexCenter align ${item.link && 'pointer'}`} onClick={()=>{item.link && window.open(item.link)}}>
+      <img src={item.logo} alt=''/>
+    </div>
+  )
+
+  // 将items数组分成每两行为一个周期的数组
+  for (let i = 0; i < rows; i++) {
+    const rowItems = list.slice(i * 11, i * 11 + 11);
+    
+    gridItems.push(
+      <div key={i} className='logoList'>
+        {rowItems.slice(0, 6).map(item)}
+      </div>
+    );
+
+    gridItems.push(
+      <div key={i + rows} className='logoList' style={{margin: '20px auto' }}>
+        {rowItems.slice(6, 11).map(item)}
+      </div>
+    );
+  }
+
+  return <div className='partner_1_bg'>
+    <div className='partner_1 width1200 pt50 pb60'>
+      <p className='font-bd font-30 mb10 task-hide center mb50'>{homepagePartnersTitle}</p>
+      <div>{gridItems}</div>
+    </div>
+  </div>
+}
+export default Partner;

src/forge/Information/Pages/homepage/component/project.jsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import '../index.scss';
+import { getProjectListByScore, getProjectsTypeLists } from '../../../api';
+import { Carousel, Divider, Spin } from 'antd';
+import Nodata from '../../../../Nodata';
+
+function Project({ data, subTitle }) {
+  const { id, homepageProjectTitle } = data || {};
+  const [typeList, setTypeList] = useState([]);
+  const [typeId, setTypeId] = useState(undefined);
+  const [lists, setLists] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const pages = [];
+
+  useEffect(() => {
+    id && getProjectsTypeLists(id).then(result => {
+      if (result) {
+        const rows = result.data.rows;
+        rows[0] && setTypeId(rows[0].id)
+        setTypeList(rows);
+      }
+    }).catch(() => { })
+  }, [id])
+
+  useEffect(() => {
+    if (typeId) {
+      setLoading(true);
+      getProjectListByScore(id, {
+        pageNum: page,
+        pageSize: 6,
+        projectTypeId: typeId
+      }).then(result => {
+        if (result) {
+          setLists(result.data.rows);
+          setTotal(result.data.total);
+          setLoading(false);
+        }
+      }).catch(() => { })
+    }
+  }, [id, typeId, page])
+
+  const listPerPage = 6;
+  for (let i = 0; i < Math.ceil(total / listPerPage); i++) {
+    const start = i * listPerPage;
+    const end = start + listPerPage;
+    pages.push(lists.slice(start, end));
+  }
+
+  return <div className='project_1_bg'>
+    <div className='project_1 width1200 pt50 pb60'>
+      <p className='font-bd font-30 mb15 align task-hide'>{homepageProjectTitle}</p>
+      <p className='font-16 align color212 mb30'>{subTitle}</p>
+      <div className='flexCenter align'>
+        {typeList.slice(0, 3).map((item, index) => {
+          return <div className={`proTypeBox flexCenter font-17 mr30 pointer ${typeId === item.id && "active"}`} onClick={() => { setTypeId(item.id); setPage(1) }}>
+            <span className={`icon${index} mr5`}></span>
+            {item.name}
+          </div>
+        })}
+      </div>
+      <Spin spinning={loading}>
+        <Carousel className='zone_1_carousel' afterChange={(current)=>{setLoading(true);setPage(current+1)}}>
+          {pages.map((page1, index) => (
+            <div key={index}>
+              <div className='df wrap between mt60 pl10 pr10 mb25'>
+                {lists.map((i, index) => {
+                  const { extra: { commitCount, contributorsCount, lastWeekScore, scoreChange } } = i || {}
+                  const order = page >= 2 ? (page-1)*6+index+1 : index+1;
+                  return <div key={`index${i.id}`} className={`proDetailByProject_1 padding20-30 backWhite mb30`}>
+                    <a onClick={() => window.open(i.projectURL)}>
+                      <span className={`mr10 font-22 p_1_order align p_1_order${order}`}>{order}</span>
+                      <span className='font-bd font-17'>{i.projectProperties && i.projectProperties.name}</span>
+                    </a>
+                    <div className="pd_desc task-hide-2 mt15">
+                      {i.projectProperties.description || "暂无描述"}
+                    </div>
+                    <div style={{ minHeight: 34 }}>
+                      {
+                        i.projectProperties && i.projectProperties.topics &&
+                        <ul className="pd_tag pb10">
+                          {
+                            i.projectProperties.topics.split(",").map(t => {
+                              return (
+                                <li>{t}</li>
+                              )
+                            })
+                          }
+                        </ul>
+                      }
+                    </div>
+                    <p className='flexCenter between'>
+                      <div>
+                        <span className='color6B7 mr5'>开发者</span>{contributorsCount || 0}
+                        <Divider type="vertical" style={{ margin: '0 15px' }} />
+                        <span className='color6B7 mr5'>历史提交总量</span>{commitCount || 0}
+                        <Divider type="vertical" style={{ margin: '0 15px' }} />
+                        <span className='color6B7 mr5'>活跃度</span>{lastWeekScore || 0}
+                      </div>
+                      {!!scoreChange && <span className='font-18 font-bd fr'>
+                        <span className='mr10' style={{ fontFamily: "YouSheBiaoTiHei", color: '#495BA2' }}>较上周</span>
+                        <span className={scoreChange > 0 ? 'color-red' : "color-green"}>{scoreChange > 0 ? `+${scoreChange}` : scoreChange}</span>
+                      </span>}
+                    </p>
+                  </div>
+                })}
+              </div>
+            </div>
+          ))}
+        </Carousel>
+        {!loading && lists.length === 0 && <Nodata _html="暂无数据" />}
+      </Spin>
+    </div>
+  </div>
+}
+export default Project;

src/forge/Information/Pages/homepage/component/source.jsx

@@ -0,0 +1,89 @@
+import React , { useEffect, useState } from 'react';
+import { getSourceList, getSourceZoneList } from '../../../api';
+import png from '../image/source2.png'
+import { Spin } from 'antd';
+import { Link } from 'react-router-dom';
+import Nodata from '../../../../Nodata';
+import '../index.scss';
+
+function Source({data, subTitle}) {
+  const {id, key, homepageResourceTitle="资源发布"} = data || {};
+  const [ chooseZoneId , setChooseZoneId ] = useState(undefined);
+  const [ zoneList , setZoneList ] = useState([]);
+  const [ sourceList , setSourceList ] = useState([]);
+  const [ total , setTotal ] = useState(0);
+  const [ isSpin , setIsSpin ] = useState(true);
+
+  useEffect(()=>{
+    id && getSourceZoneList(id).then(response=>{
+      if(response && response.data){
+        const rows = response.data.rows;
+        rows[0] && setChooseZoneId(rows[0].id)
+        setZoneList(rows);
+      }
+    }).catch(error=>{})
+  },[id])
+
+  useEffect(()=>{
+    if(chooseZoneId){
+      setIsSpin(true);
+      getSourceList({
+        id,pageSize:4,pageNum:1,domainId:chooseZoneId
+      }).then(response=>{
+        if(response){
+          setSourceList(response.data.rows);
+          setTotal(response.data.total);
+          setIsSpin(false);
+        }
+      }).catch(error=>{})
+      }
+  },[chooseZoneId])
+
+  return <div className='source_1_bg'>
+    <div className='source_1 width1200 pt50 pb60 flexCenter'>
+      <div className='mr50' style={{width: '37%'}}>
+        <p className='font-bd font-30 mb10 task-hide'>{homepageResourceTitle}</p>
+        <p className='font-15 color212 mb20'>{subTitle}</p>
+        <p className='mb30'><a href={`/zone/${key}/source`} className='color-blue'>前往资源中心 {'>'} </a></p>
+        {zoneList.slice(0,2).map(item=>{
+          return <div className={`pointer s_1_zone flexCenter between font-18 mt20 ${chooseZoneId === item.id && "active"}`} onClick={()=>{setChooseZoneId(item.id);}}>
+            {item.name}
+            <img src={png} width="74px" alt=''/>
+            <img src={require('../image/source3.png')} width="53px" alt='' className='active_1'/>
+          </div>
+        })}
+      </div>
+      <div className='flex1'>
+        <Spin spinning={isSpin}>
+          <div className='df wrap between'>
+            {sourceList.map(i=>{
+              const time = i.updateTime || i.createTime
+              return <div className='s_1_souce mr25 mt30'>
+                <div className='flexCenter between m15' style={{minHeight: 90}}>
+                  <div style={{width: '0'}} className='flex1'>
+                    <p className='task-hide'><Link to={`/zone/${key}/source/${i.id}`} className=" font-17 font-bd">{i.name}</Link></p>
+                    <p className="task-hide-2 color212">{i.summary}</p>
+                  </div>
+                  <img src={require("../image/new3.png")} width={48} className='ml10'/>
+                </div>
+                <div className='flexCenter between'>
+                  <span className='color848'>{time && time.split(" ")[0].replace(/-/g, '.')}</span>
+                  <Link className='color-blue' to={`/zone/${key}/source/${i.id}`}>
+                    <img src={require("../image/source4.png")} width={25} className='normalImg'/>
+                    <img src={require("../image/source5.png")} width={25} className='hoverImg'/>
+                    <span className='pl5'>下载</span>
+                  </Link>
+                </div>
+                
+              </div>
+            })}
+          </div>
+          <div style={{marginLeft: 150}}>
+            {!isSpin && !sourceList.length && <Nodata _html="暂无数据"/>}
+          </div>
+        </Spin>
+      </div>
+    </div>
+  </div>
+}
+export default Source;

src/forge/Information/Pages/homepage/component/specialProjects.jsx

@@ -0,0 +1,193 @@
+import React , { useEffect, useState } from 'react';
+import { getSpecialProjectDetail, getSpecialProjectList, getSpecialProjectTypeList } from '../../../api';
+import { Col, Divider, Row, Tag } from 'antd';
+import Nodata from '../../../../Nodata';
+import '../index.scss';
+
+function SpecialProjects({data, subTitle}) {
+  const {key, homepageSpecialProjectTitle, id} = data || {};
+  const [typeList, setTypeList] = useState([]);
+  const [typeId , setTypeId] = useState(undefined);
+  const [projectList, setProjectList] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [projectDetail, setProjectDetail] = useState({});
+
+  useEffect(()=>{
+    id && getSpecialProjectTypeList(id, {
+      pageNum: 1,
+      pageSize: 4,
+    }).then(res=>{
+      if(res){
+        const rows = res.data.rows;
+        rows[0] && setTypeId(rows[0].id)
+        setTypeList(rows);
+      }
+    })
+  }, [id])
+
+  useEffect(()=>{
+    typeId && getSpecialProjectList(id, typeId).then(res=>{
+      if(res){
+        const rows = res.data.rows;
+        // rows[0] && setTypeId(rows[0].id)
+        setProjectList(rows);
+      }
+    })
+  }, [typeId])
+
+  useEffect(()=>{
+    selectedItem && getSpecialProjectDetail(selectedItem).then(res=>{
+      if(res){
+        const rows = res.data.rows;
+        // 根据类型分类
+        const rowsByType = rows.reduce((acc, item) => {
+          // 如果acc中没有当前item.type的数组，则创建一个
+          if (!acc[item.type]) {
+            acc[item.type] = [];
+          }
+          // 将当前item添加到对应type的数组中
+          acc[item.type].push(item);
+          return acc;
+        }, {});
+        setProjectDetail({
+          detail: projectList.find(item => item.id === selectedItem),
+          ...rowsByType
+        });
+      }
+    })
+  }, [selectedItem])
+
+  const itemsPerRow = 3;
+
+  const handleItemClick = (id) => {
+    setSelectedItem(selectedItem === id ? null : id);
+  };
+
+  const list = (title, table1, table2, list)=>{
+    return !!list.length && <React.Fragment>
+      <p className='leftBox font-16 font-bd'>{title}</p>
+      <Divider dashed className="margin0-20"/>
+      <Row className='s_p_rowList mb30 font-15'>
+        <Col span={14} className='s_p_rowList_t font-bd'>{table1}</Col>
+        <Col span={10} className='s_p_rowList_t font-bd'>{table2}</Col>
+        {list.map(item=>{
+          const {author} = item;
+          const detail = item.relevancyObject;
+          const {name, createUser, id} = detail
+          return <React.Fragment>
+            <Col span={14} className='task-hide'>
+              <a href={`/zone/${key}/source/${id}`}>
+                {title === "论文" ? <img src={require('../image/s_project1.png')} width={24} className='mr10'/> : title === "专利" ? <img src={require('../image/s_project2.png')} width={24} className='mr10'/> : <img src={createUser.avatar}/>}
+                {name}
+              </a>
+            </Col>
+            <Col span={10} className='task-hide'>{author}</Col>
+          </React.Fragment>
+        })}
+      </Row>
+      {!list.length && <Nodata _html="暂无数据" small/>}
+    </React.Fragment>
+  }
+
+  const list2 = (title, table1, table2, list)=>{
+    return !!list.length && <React.Fragment>
+      <p className='leftBox font-16 font-bd'>{title}</p>
+      <Divider dashed className="margin0-20"/>
+      <Row className='s_p_rowList mb30 font-15'>
+        <Col span={24} className='s_p_rowList_t font-bd'>{table1}</Col>
+        {list.map(item=>{
+          const {relevancyObject:{projectURL, projectProperties:{name, authorImageUrl}}} = item;
+          return <React.Fragment>
+            <Col span={24}>
+              <a href={projectURL}>
+                <img src={authorImageUrl} width={24} className='mr10' style={{borderRadius: '50%'}}/>
+                {name}
+              </a>
+            </Col>
+          </React.Fragment>
+        })}
+      </Row>
+      {!list.length && <Nodata _html="暂无数据" small/>}
+    </React.Fragment>
+  }
+
+  const renderItems = () => {
+    let rendered = [];
+    let currentRow = [];
+
+    projectList.forEach((item, index) => {
+      // 添加项目到当前行
+      currentRow.push(
+        <div
+          key={item.id}
+          className={`s_p_detail ${selectedItem === item.id ? 'active' : ''}`}
+          onClick={() => handleItemClick(item.id)}
+        >
+          <span className={`font-bd font-22 s_p_d_order align s_p_d_order${index+1}`}>{index+1}</span>
+          <div className='font-bd font-17 task-hide-2 mb5'>{item.name}</div>
+          <div className='task-hide-2 color6B7' style={{minHeight: '56px'}}>摘要：{item.description}</div>
+          <p style={{color: '#75798A'}} className='mt3'><i className='iconfont icon-chengyuan2 font-15 mr5'></i>{item.projectLeader}</p>
+        </div>
+      );
+
+      // 如果达到每行项目数或是最后一个项目
+      if ((index + 1) % itemsPerRow === 0 || index === projectList.length - 1) {
+        // 将当前行添加到渲染列表
+        rendered = rendered.concat(currentRow);
+        
+        // 如果当前行包含选中项，添加详情面板
+        if (currentRow.some(item => item.key === selectedItem?.toString())) {
+          
+          const {detail, PAPER=[], PATENT=[], PROJECT=[]} = projectDetail;
+          const {name, projectLeader, awards, description} = detail || {};
+          rendered.push(
+            <div key={`details-${selectedItem}`} className="item-details">
+              <div className="details-content">
+                <div className='s_p_head'>
+                  <Tag color='#466AFF' style={{padding: '0 2px'}}>项目</Tag><span className='font-20 font-bd'>{name}</span>
+                  <p className='mt10 font-15 pb5'>项目负责人：<span className='color212'>{projectLeader}</span></p>
+                  <p className='font-15 pb5'>奖项：<span className='color-blue'>{awards}</span></p>
+                  <p className='font-15 pb5'>摘要：<span className='color212'>{description}</span></p>
+                </div>
+                <div style={{padding: '22px 33px'}}>
+                  {list("论文", "论文标题", "作者", PAPER)}
+                  {list("专利", "专利标题", "作者", PATENT)}
+                  {list2("开源项目", "项目名称", "参与者", PROJECT)}
+                  {!PAPER.length && !PATENT.length && !PROJECT.length && <Nodata _html="暂无数据" small/>}
+                </div>
+              </div>
+            </div>
+          );
+        }
+        
+        // 重置当前行
+        currentRow = [];
+      }
+    });
+    return rendered;
+  };
+
+  return <div className='specialProjects_1_bg'>
+    <div className='specialProjects_1 width1200 pt50 pb60'>
+      <p className='font-bd font-30 mb15 align task-hide'>{homepageSpecialProjectTitle}</p>
+      <p className='font-16 align color212 mb50'>{subTitle}</p>
+      <div className='flexCenter align mb50'>
+        {typeList.map((item, index)=>{
+          return <div className={`proTypeBox flexCenter mr30 color212 pointer pl5 pr5 ${typeId === item.id && "active"}`} onClick={()=>{setTypeId(item.id)}}>
+            <span className={`s_p_order font-25 mr10 color-blue`}>
+              <span className='s_p_order_1'>{index < 9 ? `0${index+1}` : index+1}</span>
+              <span className={`s_p_order_icon s_p_order_icon${index}`}></span>
+              <img src={require('../image/s_project3.png')} width="18"/>
+            </span>
+            <span className='font-17 font-bd task-hide'>{item.name}</span>
+          </div>
+        })}
+      </div>
+      <div className='df wrap between'>
+        {renderItems()}
+        <div style={{margin: '0 auto'}}>{!projectList.length && <Nodata _html="暂无数据"/>}</div>
+      </div>
+    </div>
+  </div>
+}
+export default SpecialProjects;

src/forge/Information/Pages/homepage/component/vip.jsx

@@ -0,0 +1,68 @@
+import React , { useEffect, useState } from 'react';
+import { getVIPLists } from '../../../api';
+import { Carousel } from 'antd';
+import '../index.scss';
+import Nodata from '../../../../Nodata';
+
+function Member({data, subTitle}) {
+  const {id, key, homepageMemberTitle} = data || {};
+  const [typeList, setTypeList] = useState([]);
+  const [typeId, setTypeId] = useState(undefined);
+  const [ vipsMap , setVipsMap ] = useState({});
+  const list = vipsMap[typeId] || []
+  const pages = [];
+
+  useEffect(()=>{
+    id && getVIPLists(id).then(response=>{
+      if(response && response.data){
+        const rows = response.data.rows;
+        const vips = {}
+        const types = rows.map(item=>{
+          const {id, typeName, zoneMemberList} = item
+          vips[id] = zoneMemberList;
+          return {id, typeName}
+        })
+        types[0] && setTypeId(types[0].id)
+        setTypeList(types);
+        setVipsMap(vips);
+      }
+    }).catch(error=>{})
+  },[id])
+
+  const listPerPage = 4;
+  for (let i = 0; i < Math.ceil(list.length / listPerPage); i++) {
+    const start = i * listPerPage;
+    const end = start + listPerPage;
+    pages.push(list.slice(start, end));
+  }
+
+  return <div className='vip_1_bg backWhite'>
+    <div className='vip_1 width1200 pt50 pb60'>
+      <p className='font-bd font-30 mb15 task-hide center'>{homepageMemberTitle}</p>
+      <div className='mb60 center'>
+        {typeList.map(item=>{
+          return <a className={`${typeId === item.id && "active"} v_type pb10 mr40 font-16`} onClick={()=>{setTypeId(item.id)}}>{item.typeName}</a>
+        })}
+      </div>
+      <Carousel className='zone_1_carousel'>
+        {pages.map((page, index) => (
+          <div>
+            <div key={index} className='df wrap between mb40'>
+              {page.map((item) => (
+                <div key={item.id} className="flexCenter mb30" style={{width: '46.6%'}}>
+                  <img src={item.imageUrl} className='image_v_1 mr50'/>
+                  <div className='flex1'>
+                    <p className="font-bd font-18 pb25 task-hide">{item.name}</p>
+                    <div className='intro_v_1 font-15'>{item.introduction || "暂无描述"}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </Carousel>
+      {list && !list.length && <Nodata _html="暂无数据" small/>}
+    </div>
+  </div>
+}
+export default Member;

src/forge/Information/Pages/homepage/index.scss

@@ -0,0 +1,462 @@
+.width1200{
+  width: 1200px;
+  margin:0px auto;
+}
+.align{
+  text-align: center;
+  justify-content: center;
+}
+.wrap{
+  flex-wrap: wrap;
+}
+.between{
+  justify-content: space-between
+}
+.color-theme{
+  color: $primary-color;
+}
+.color212{
+  color: #212F54;
+}
+.color627{
+  color: #62729D;
+}
+.color6B7{
+  color: #6B707C;
+}
+.color777{
+  color: #777E99
+}
+.color848{
+  color: #848992;
+}
+.backWhite{
+  background-color: white;
+}
+.pointer{
+  cursor: pointer;
+}
+.zone_1_carousel{
+  .slick-dots li button:before{
+    font-size: 12px;
+  }
+  .slick-dots li.slick-active button:before, .slick-dots li button:before{
+    color: $primary-color;
+    opacity: 1;
+  }
+  .slick-dots li button{
+    background: none !important;
+  }
+}
+.introduction_1_bg{
+  background-image: url('./image/intro1.png');
+  background-size: 100% 100%;
+}
+.introduction_1{
+  .firstTitle{
+    position: relative;
+    z-index: 1;
+    .firstTitle_back{
+      position: absolute;
+      top: 90%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+      color: #D9D9D9;
+    }
+  }
+}
+.news_1_bg{
+  background-image: url('./image/new1.png');
+  background-size: 100% 100%;
+  .firstDir{
+    background-image: url('./image/new2.png');
+    background-size: 100% 100%;
+    color: white;
+    width: 476px;
+    position: relative;
+    &>p{
+      padding: 10px 20px;
+      background: linear-gradient( 101deg, rgba(255,255,255,0.21) 0%, rgba(255,255,255,0) 100%);
+    }
+    .docByFirstDir{
+      background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.36) 49%, rgba(0,0,0,0.6) 100%);
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+  .secondDir{
+    border-top: 8px solid $primary-color;
+    .img-box{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: #FFFFFF;
+      img{
+        width: 80%;
+        margin: 4px;
+      }
+    }
+  }
+  .docBySecondDir{
+    background: #FFFFFF;
+    min-height: 230px;
+    .none_panels{
+      min-height: 205px;
+    }
+  }
+  .docDetailByNews_1{
+    width: 48%;
+    background-color: #F8F8F8;
+    padding: 20px 30px;
+    &:hover{
+      background-color: #F1F4FF;
+    }
+  }
+  .n_1_dir{
+    width: 195px;
+  }
+}
+
+.news_1_bg .activeDir, .vip_1_bg .v_type.active{
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: $primary-color;
+    width: 30%;
+    height: 4px;
+    bottom: -8px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 3px;
+  }
+}
+.project_1_bg{
+  .proDetailByProject_1{
+    flex: 0 0 48%;
+    border-radius: 6px;
+    &:hover{
+      box-shadow: 0px 0px 10px 1px rgba(28,48,175,0.41);
+    }
+    &>a{
+      color: #181818;
+      &:hover{
+        color: $primary-color;
+      }
+    }
+    .pd_desc{
+      min-height: 55px;
+      color: #6B707C;
+    }
+    .pd_tag{
+      display: flex;
+      align-items: center;
+      li{
+        height:24px;
+        line-height:24px;
+        background-color:var(--tag-back);
+        border-radius:2px;
+        margin-right: 12px;
+        color: var(--primary-color);
+        font-size:13px;
+        padding:0px 7px;
+      }
+    }
+  }
+  .p_1_order{
+    display: inline-block;
+    width: 36px;
+    height: 25px;
+    line-height: 25px;
+    border-radius: 5px;
+    background-color: #485BA7;
+    font-family: "YouSheBiaoTiHei";
+    color: white;
+  }
+  .p_1_order1{
+    background: linear-gradient( 94deg, #FF0000 0%, #FF6B00 100%);
+  }
+  .p_1_order2{
+    background: linear-gradient( 94deg, #FF8000 0%, #FF9244 100%);
+  }
+  .p_1_order3{
+    background: linear-gradient( 94deg, #FFB300 0%, #FFC400 100%);
+  }
+}
+.project_1_bg .proTypeBox, .specialProjects_1_bg .proTypeBox{
+  width: 280px;
+  height: 63px;
+  background: #F5F6F7;
+  border-radius: 8px;
+  border: 1px solid #8DA8D7;
+  color: #212F54;
+  justify-content: center;
+  &.active{
+    background-image: url('./image/proTypeBack.png');
+    background-size: 100% 100%;
+    border: none;
+    color: white;
+    .icon0{
+      background-image: url('./image/proType1_active.png');
+    }
+    .icon1{
+      background-image: url('./image/proType2_active.png');
+    }
+    .icon2{
+      background-image: url('./image/proType3_active.png');
+    }
+    .s_p_order_1, .s_p_order>img{
+      display: none;
+    }
+    .s_p_order_icon{
+      margin-top: 18px;
+      display: inline-block;
+      background-image: url('./image/s_project4.png');
+    }
+    .s_p_order_icon1{
+      background-image: url('./image/s_project5.png');
+    }
+    .s_p_order_icon2{
+      background-image: url('./image/s_project6.png');
+    }
+    .s_p_order_icon3{
+      background-image: url('./image/s_project7.png');
+    }
+  }
+  .icon1, .s_p_order_icon, .icon0, .icon2{
+    width: 22px;
+    height: 22px;
+    background-size: 100% 100%;
+  }
+  .icon0{
+    width: 19px;
+    height: 18px;
+    background-image: url('./image/proType1.png');
+  }
+  .icon1{
+    background-image: url('./image/proType2.png');
+  }
+  .icon2{
+    width: 25px;
+    height: 19px;
+    background-image: url('./image/proType3.png');
+  }
+
+}
+.source_1_bg{
+  background-color: white;
+  background-image: url('./image/source1.png');
+  background-size: 100% 100%;
+  .s_1_zone{
+    width: 80%;
+    padding: 5px 40px 5px 30px;
+    background: #F4F5F8;
+    box-shadow: 0px 0px 6px 1px #F0F0F0;
+    border-radius: 6px;
+    border: 2px solid #FFFFFF;
+    position: relative;
+    .active_1{
+      display: none;
+    }
+    &.active{
+      &::before{
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 6px;
+        height: 32px;
+        background-color: #0052D9;
+        border-radius: 3px;
+      }
+      .active_1{
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
+  }
+  .s_1_souce{
+    padding: 10px 25px 20px 25px;
+    width: 325px;
+    background: #FCFCFC;
+    border-radius: 6px 6px 6px 6px;
+    border: 1px solid #E9E9E9;
+    &:hover{
+      background: linear-gradient( 94deg, #2A4AD0 0%, #2B76D8 100%);
+      box-shadow: 0px 0px 10px 1px rgba(28,48,175,0.08);
+      a, p, div, span{
+        color: white !important;
+      }
+      .hoverImg{
+        display: inline-block;
+      }
+    }
+    .hoverImg, &:hover .normalImg{
+      display: none;
+    }
+  }
+}
+.partner_1_bg{
+  background: #F2F4F8;
+  .partner_1_logo{
+    width: 170px;
+    height: 70px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 15px 1px rgba(28,48,175,0.08);
+    border-radius: 8px 8px 8px 8px;
+    &>img{
+      max-width: 90%;
+      max-height: 100%;
+    }
+  }
+  .logoList{
+    display: flex;
+    gap: 30px;
+    justify-items: center;
+    justify-content: center;
+  }
+}
+.vip_1_bg{
+  .v_type{
+    color: #212F54;
+    &.active{
+      color: $primary-color;
+    }
+    &.active::after{
+      width: 75%;
+      height: 2px;
+      bottom: -4px;
+    }
+  }
+  .intro_v_1{
+    background-color: #F5F7FA;
+    padding: 15px;
+    min-height: 90px;
+  }
+  .image_v_1{
+    width: 180px;
+    height: 150px;
+    object-fit: scale-down;
+  }
+}
+.specialProjects_1_bg{
+  background-image: url('./image/s_project.png');
+  background-size: 100% 100%;
+  .s_p_detail+div:not(.item-details){
+    flex: 0 0 calc(33.333% - 20px);
+    margin: 0 0 35px 0 !important;
+  }
+  .s_p_detail{
+    flex: 0 0 calc(33.333% - 20px);
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px 1px rgba(28,48,175,0.08);
+    border-radius: 7px 7px 7px 7px;
+    position: relative;
+    padding: 35px;
+    margin-bottom: 35px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    .s_p_d_order{
+      width: 36px;
+      height: 30px;
+      line-height: 30px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: 6px 0px 6px 0px;
+      background: linear-gradient( 159deg, #F0F3FF 0%, #E0E6FF 100%);
+      font-family: YouSheBiaoTiHei;
+      color: #354790;
+    }
+    .s_p_d_order1{
+      color: #D97F07;
+      background: linear-gradient( 159deg, #FFEDCA 0%, #FFD791 100%);
+    }
+    .s_p_d_order2{
+      color: #566F90;
+      background: linear-gradient( 159deg, #D9E1EB 0%, #B5C9DE 100%);
+    }
+    .s_p_d_order3{
+      color: #C95E23;
+      background: linear-gradient( 159deg, #F9D4B1 0%, #EAA562 100%);
+    }
+    &:focus-visible{
+      outline: none;
+    }
+    &:hover{
+      border: 1px solid $primary-color;
+    }
+    &.active{
+      border: 1px solid $primary-color;
+      position: relative;
+      &::after,&::before {
+        content: '';
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        border-style: solid;
+        border-width: 20px;
+      }
+
+      &::after {
+        border-color: #fff transparent transparent transparent;
+        z-index: 2;
+        bottom: -39px; 
+      }
+
+      &::before {
+        border-color: $primary-color transparent transparent transparent;
+        z-index: 1;
+        bottom: -40px; 
+      }
+    }
+  }
+  .item-details {
+    flex: 0 0 100%;
+    margin: 0 0 30px;
+    overflow: hidden;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 10px 1px rgba(88,116,255,0.18);
+    border-radius: 4px;
+  }
+  .leftBox{
+    position: relative;
+    padding-left: 16px;
+    &::after{
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 8px;
+      width: 5px;
+      height: 16px;
+      background: #4154F1;
+      border-radius: 1px;
+    }
+  }
+  .s_p_head{
+    padding: 22px 33px;
+    background-color: #F8FAFF;
+  }
+  .s_p_rowList{
+    .s_p_rowList_t{
+      padding: 15px 35px;
+      background: rgba(65,84,241,0.04);
+    }
+    &>.ant-col{
+      padding: 15px 35px;
+      border-bottom: 1px solid #E2E4F3;
+    }
+  }
+  .s_p_order{
+    position: relative;
+    font-family: YouSheBiaoTiHei;
+    &>img{
+      position: absolute;
+      bottom: 10px;
+      right: -8px;
+    }
+  }
+}

src/forge/Information/Pages/homepage/uos.jsx

@@ -0,0 +1,27 @@
+import React,{  } from 'react';
+import Introduction from './component/introduction';
+import News from './component/news';
+import Project from './component/project';
+import Source from './component/source';
+import Member from './component/vip';
+import Partner from './component/partner';
+import SpecialProjects from './component/specialProjects';
+import '../../indexZone1.scss'
+import './index.scss'
+
+function HeaderPageUos(props){
+  const { data } = props;
+  
+  return(
+    <div className="uos_homepage_box">
+      <Introduction data={data}/>
+      <SpecialProjects data={data} subTitle="掌握领域动态，紧跟专项研究，洞察泛在操作系统最新进展"/>
+      <News data={data} subTitle="掌握领域动态，紧跟专项研究，洞察泛在操作系统最新进展" firstDirIntro="CCF开源发展委员会“泛在操作系统开源生态”工作组" secondDirIntro="拥抱技术，与开发者携手预见未来！"/>
+      <Project data={data} subTitle="探索前沿泛在项目，引领跨领域创新实践"/>
+      <Source data={data} subTitle="集萃一站式文献与应用，助力构建高效、安全的泛在操作系统生态"/>
+      <Member data={data}/>
+      <Partner data={data}/>
+    </div>
+  )
+}
+export default HeaderPageUos;

src/forge/Information/api.js

@@ -61,7 +61,7 @@ export function getDocList(id){
   })
 }
 
-
+// 获取文章列表
 export function getSubDocList(id,params){
   return fetch({
     url:`/cms/doc/open/dir/${id}/docList`,
@@ -69,6 +69,14 @@ export function getSubDocList(id,params){
     params
   })
 }
+// 获取文章列表（带内容）
+export function getDocAndContentList(id,params){
+  return fetch({
+    url:`/cms/doc/open/dir/${id}/docContentList`,
+    method: 'get',
+    params
+  })
+}
 // 专区会员
 export function getVIPAllList(id){
   return fetch({
@@ -338,14 +346,46 @@ export function getDataSetdetail(datasetId,params) {
   })
 }
 
+export function getSpecialProjectTypeList(id,params) {
+  return fetch({
+    url: `/zone/open/${id}/specialProjectType/list`,
+    method: 'GET',
+    params
+  })
+}
 
+export function getSpecialProjectList(id, specialProjectTypeId,params) {
+  return fetch({
+    url: `/zone/open/${id}/specialProjectType/${specialProjectTypeId}/specialProjectList`,
+    method: 'GET',
+    params
+  })
+}
 
+export function getSpecialProjectDetail(specialProjectId,params) {
+  return fetch({
+    url: `/zone/open/specialProject/${specialProjectId}/specialProjectRelevancyList`,
+    method: 'GET',
+    params
+  })
+}
 
+// 专区统计数据
+export function getZoneStatistics(id) {
+  return fetch({
+    url: `/zone/open/${id}/statistics`,
+    method: 'GET',
+  })
+}
 
-
-
-
-
+// 专区项目列表（带活跃度）
+export function getProjectListByScore(id,params) {
+  return fetch({
+    url: `/zone/open/${id}/projectByScore/list`,
+    method: 'GET',
+    params
+  })
+}
 
 // 获取已开通企业的组织列表
 export function getOrzCompanyList(){
@@ -386,4 +426,4 @@ export function getRoleList(){
       method: 'get',
     })
   }
-  
+  

src/forge/Information/index.jsx

@@ -90,6 +90,11 @@ const HomePageByJCC = Loadable({
   loader : () => import("./Pages/JCC/homePage"),
   loading : Loading,
 });
+
+const HomePageByUos = Loadable({
+  loader : () => import("./Pages/homepage/uos"),
+  loading : Loading,
+});
 const DatasetFileList = Loadable({
   loader : () => import("./Pages/dataset/fileList"),
   loading : Loading,
@@ -110,6 +115,9 @@ function Index(props){
   const sourcedetail = pathname.indexOf(`/zone/${deptId}/newdetail/`)>-1 && isPhone();
   const {current_user} = props;
 
+  console.log('deptId', deptId);
+  
+
   useEffect(()=>{
     if(deptId && deptId === "KYDS7th"){
       window.location.href = 'https://gitlink.org.cn/competitions/2024';
@@ -283,6 +291,7 @@ function Index(props){
           render={(p) => (
             deptId==="CCF-ODC" ? <HeaderPageCCF {...props} {...p} data={data} id={id} temp={ temp } />:
             deptId === "JCC" ? <HomePageByJCC {...props} {...p} data={data} id={id}/>:
+            deptId === "uos" ? <HomePageByUos {...props} {...p} data={data} id={id}/>:
             temp === tempEnum.zone ? <HeaderPage {...props} {...p} data={data} id={id} temp={ temp }/>:
             <HeaderPageZone1 {...props} {...p} data={data} id={id} temp={ temp }/>
           )}

src/forge/Information/index.scss

@@ -85,7 +85,7 @@
       }
       .sub_t{
         margin-top: 35px;
-        max-width:536px;
+        max-width:600px;
         line-height:40px;
         color:rgba(225,225,225,0.9);
         font-size:16px;