diff --git a/src/components/button/index.jsx b/src/components/button/index.jsx
new file mode 100644
index 000000000..872a52dc4
--- /dev/null
+++ b/src/components/button/index.jsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useRef } from 'react';
+import './index.scss';
+
+export const FlowBorderButton = ({
+ className = '',
+ children,
+ href = '/',
+ onClick,
+ ...restProps
+}) => {
+ return
+
+ {children}
+
+}
+
+const GlowButton = ({
+ className = '',
+ children,
+ href = '/',
+ onClick,
+ ...restProps
+}) => {
+ const buttonRef = useRef(null);
+
+ useEffect(() => {
+ const button = buttonRef.current;
+ if (!button) return;
+
+ const handleMouseMove = (e) => {
+ const rect = button.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ button.style.setProperty('--mouse-x', `${x}px`);
+ button.style.setProperty('--mouse-y', `${y}px`);
+ };
+
+ button.addEventListener('mousemove', handleMouseMove);
+
+ return () => {
+ button.removeEventListener('mousemove', handleMouseMove);
+ };
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default GlowButton;
\ No newline at end of file
diff --git a/src/components/button/index.scss b/src/components/button/index.scss
new file mode 100644
index 000000000..9570faa1f
--- /dev/null
+++ b/src/components/button/index.scss
@@ -0,0 +1,88 @@
+a.glow-button {
+ background: linear-gradient(95deg, #1466ec 4.2%, #7066ff 99.19%);
+ border-radius: 10px;
+ color: #ffffff;
+ font-size: 18px;
+ padding: 7px 34px;
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ cursor: pointer;
+
+ // 初始化鼠标变量
+ --mouse-x: 0px;
+ --mouse-y: 0px;
+
+ // 光圈效果
+ &::after {
+ content: " ";
+ position: absolute;
+ left: var(--mouse-x);
+ top: var(--mouse-y);
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ background-image: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
+ opacity: 0;
+ mix-blend-mode: overlay;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ z-index: 1;
+ }
+
+ &:hover::after {
+ opacity: 0.5;
+ }
+
+ &:hover {
+ color: #ffffff;
+ text-decoration: none;
+ }
+}
+
+a.flowBorderButton{
+ color:#091221;
+ background-color: white;
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 16px;
+ border-radius: 1rem;
+ border: 1px solid rgb(229 229 234 / 1);
+ .flowBorder{
+ border-radius: inherit;
+ position: absolute;
+ left: 0;
+ top: 0;
+ --duration: 8s;
+ background-image: radial-gradient(transparent, transparent, #A07CFE, #FE8FB5, #FFBE7B, transparent, transparent);
+ background-size: 300% 300%;
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ padding: 1px;
+ animation: shine var(--duration) linear infinite;
+ width: 100%;
+ height: 100%;
+ }
+ &:hover{
+ color:inherit;
+ box-shadow: 0 0 8px rgba(160, 124, 254, .3), 0 0 16px rgba(254, 143, 181, .2), 0 0 24px rgba(255, 190, 123, .1);
+ }
+}
+
+@keyframes shine {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: 100% 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/forge/Information/Pages/project/cateList/CategorySection.jsx b/src/forge/Information/Pages/project/cateList/CategorySection.jsx
new file mode 100644
index 000000000..75a9e5ddb
--- /dev/null
+++ b/src/forge/Information/Pages/project/cateList/CategorySection.jsx
@@ -0,0 +1,130 @@
+import { useState, useEffect, Fragment } from 'react';
+import { projectCateConfig } from '../projectCateConfig';
+import icon6 from '../../../img/project/icon6.png'
+import GlowButton from '../../../../../components/button';
+import Nodata from '../../../../Nodata';
+import { Divider } from 'antd';
+
+function CategorySection({ category, index, zoneId, nsccTitle }) {
+ const cateConfig = projectCateConfig.getCateName(category.name, index);
+ const projects = category.homepageProjects
+
+
+ // 根据分类索引决定布局类型
+ const getLayoutType = (index) => {
+ const layouts = [
+ 'layout-1', // 大气海洋环境：左侧大图 + 右侧单项目
+ 'layout-2', // 天文地球物理：左侧文字列表 + 右侧网格
+ 'layout-3', // 工业设计制造：顶部标题 + 下方网格
+ 'layout-4', // 新能源新材料：顶部标题 + 混合布局
+ 'layout-5', // 生物医药健康：左侧展示图 + 右侧混合
+ 'layout-6' // 工具：渐变横幅 + 网格
+ ];
+ return layouts[index] || 'layout-3';
+ };
+
+ const layoutType = getLayoutType(index);
+
+ // 渲染项目卡片
+ const renderProjects = (showBtn) => {
+ if (!projects || projects.length === 0) {
+ return ;
+ }
+
+ return projects.map((item, pIndex) => (
+
+
+ {item.projectProperties && item.projectProperties.description && (
+
+ {item.projectProperties.description}
+
+ )}
+ {item.projectProperties && item.projectProperties.topics && (
+
+ {item.projectProperties.topics.split(",").map((t, k) => (
+ - {t}
+ ))}
+
+ )}
+
+
+ {item.projectType &&
{item.projectType}}
+ {item.projectProperties && item.projectProperties.language &&
+
+ {item.projectProperties.language}
+ }
+
+ {item.projectProperties && item.projectProperties.timeAgo &&
更新于{item.projectProperties.timeAgo}}
+
+ {!!showBtn &&
查看详情}
+
+ {nsccTitle(category.name, 0.3, "pt30")}
+
{cateConfig.description}
+
查看更多
+
+
+
+ {nsccTitle(category.name, 0.3, "pt30")}
+
{cateConfig.description}
+
查看更多
+
+
+
+
+
+
+
+ {renderProjects(false)}
+
+
+
+ {nsccTitle(category.name, 0.3, "pt80 center")}
+
{cateConfig.description}
+
+
+
天文及固体地球物理研究
+ {["天文地球物理是超算重要应用，研究宇宙及地球深部问题", "研究多尺度耦合，数据量大，向计算驱动转型", "超算助力科研模拟，支撑基础研究与灾害预警"].map((point, pIndex) => (
+
+
+
{point}
+
+ ))}
+
查看更多
+
+
+
+ {renderProjects(false)}
+
+
+
+
+
+ {parter_title()}
+
+ )}
+
+ );
+}
+
+export default CategorySection;
diff --git a/src/forge/Information/Pages/project/cateList/index.jsx b/src/forge/Information/Pages/project/cateList/index.jsx
index e2891c638..3cf49a3aa 100644
--- a/src/forge/Information/Pages/project/cateList/index.jsx
+++ b/src/forge/Information/Pages/project/cateList/index.jsx
@@ -1,17 +1,29 @@
import { useEffect, useState } from 'react';
import { Spin } from 'antd';
-import { getProjectsTypeLists } from '../../../api';
+import { getProjectsTypeLists, getZoneStatistics, getProjectListByScore, getProjectsLists } from '../../../api';
import { projectCateConfig } from '../projectCateConfig';
import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../../utils';
import { setZoneVisits } from '../../../api';
import '../index.scss';
import './index.scss';
import Nodata from '../../../../Nodata';
+import CategorySection from './CategorySection';
+import GlowButton, { FlowBorderButton } from '../../../../../components/button';
+import AddProjects from '../../../Component/addProjects';
function ProjectCateList(props) {
- const { id } = props;
+ const { id, role } = props;
const [ typeList, setTypeList ] = useState(undefined);
+ const [ statistics, setStatistics ] = useState(undefined);
const [ loading, setLoading ] = useState(false);
+ const [ categoryProjects, setCategoryProjects ] = useState({});
+ const [ visible ,setVisible ] =useState(false);
+ const statsData = [
+ { label: '开源项目', value: statistics?.projectCount || 0, suffix: '个' },
+ { label: '领域分类', value: statistics?.categoryCount || 0, suffix: '个' },
+ { label: '行业应用场景', value: statistics?.applicationCount || 0, suffix: '个' },
+ { label: '贡献者', value: statistics?.contributorCount || 0, suffix: '个' }
+ ];
// 页面访问统计
useEffect(() => {
@@ -29,44 +41,123 @@ function ProjectCateList(props) {
if (id) {
setLoading(true);
getTypeList();
+ getStatistics();
}
}, [id]);
function getTypeList() {
- getProjectsTypeLists(id).then(result => {
- if (result) {
- setTypeList(result.data.rows.slice(0,6));
- }
- setLoading(false);
- }).catch(() => {
- setLoading(false);
+ getProjectsLists(id, {
+ isHomepage: 1
+ }).then(homepageRes => {
+ getProjectsTypeLists(id).then(result => {
+ if (result && result.data && result.data.rows) {
+ // 获取首页推荐项目列表
+ const homepageProjects = homepageRes && homepageRes.data && homepageRes.data.rows ? homepageRes.data.rows : [];
+ // 将首页推荐项目按分类名称分组后注入到分类类型数据中
+ const typeListWithHomepage = result.data.rows.map(item => {
+ // 筛选出属于该分类的首页推荐项目
+ const homepageProjectsForCategory = homepageProjects.filter(
+ p => p.projectType === item.name
+ );
+ return {
+ ...item,
+ homepageProjects: homepageProjectsForCategory
+ };
+ });
+ setTypeList(typeListWithHomepage.slice(0,6));
+ }
+ setLoading(false);
+ }).catch(() => {
+ setLoading(false);
+ });
});
}
+ function getStatistics() {
+ getZoneStatistics(id).then(result => {
+ if (result && result.data) {
+ setStatistics(result.data);
+ }
+ });
+ }
+
+ function getCategoryProjects(categoryId, index) {
+ if (categoryId && !categoryProjects[categoryId]) {
+ getProjectListByScore(id, {
+ type: categoryId,
+ pageSize: 6
+ }).then(result => {
+ if (result && result.data && result.data.rows) {
+ setCategoryProjects(prev => ({
+ ...prev,
+ [categoryId]: result.data.rows
+ }));
+ }
+ });
+ }
+ }
+ const nsccTitle = (title, delay=0.1, classname)=>
+ {title.split("").map((char, index) => (
+
+ {char}
+
+ ))}
+
+
return (
-
- {"开源项目·汇聚智慧".split("").map((char, index) => (
-
- {char}
-
- ))}
-
-
汇聚全球开发者力量，共建高性能超算新生态
-
-
- {typeList && !!typeList.length ?
- {typeList.map((item, index)=>{
- const cate = projectCateConfig.getCateName(item.name, index)
- return
-
-
{item.name}
-
{cate.description}
-
查看详情
+
setVisible(false)} role={role && role.role} onFresh={()=>{}}/>
+ {/* 数据统计部分 */}
+
+ {nsccTitle("数聚开源力量，实时见证开源生态的每一次进化", 0.1, "center pt80")}
+
+
+ {statsData.map((stat, index) => (
+
+
+ {stat.value}
+ {stat.suffix}
+
+
{stat.label}
- })}
-
:
}
-
+ ))}
+
+ {role && role.role !== "None" &&
+ {role.role === "Member" ? "我的项目" : "管理项目" }
+ {
+ e.stopPropagation();
+ setVisible(true)
+ }}>添加项目
+
}
+
+
+ {/* 分类介绍部分 */}
+
+ {typeList && !!typeList.length && (
+
+ {typeList.map((item, index) => (
+
+ ))}
+
+ )}
+
+
+ {/* 底部区域 */}
+