From 7bc8d114233592244c2e1a247ac695a6934895c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E5=AE=87?= Date: Mon, 22 Dec 2025 15:12:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=8B=E6=8B=89=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E3=80=81=E6=96=B0=E5=A2=9E=E5=8A=A8=E7=94=BB=E3=80=81?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/factory/components/Feature/index.jsx | 44 +++--- src/factory/components/Feature/index.scss | 21 ++- src/factory/components/News/index.scss | 2 + src/factory/components/Resource/index.scss | 24 ++- src/factory/components/Resource2/index.scss | 10 +- src/factory/components/Scene/index.scss | 1 + src/factory/index.scss | 33 ++++- src/factory/lessons/index.scss | 21 ++- src/factory/news/index.jsx | 81 +++++++---- .../resource/developmentTools/index.jsx | 137 +++++++++++------- .../resource/developmentTools/index.scss | 1 + .../resource/softwareProject/index.jsx | 124 +++++++++------- 12 files changed, 324 insertions(+), 175 deletions(-) diff --git a/src/factory/components/Feature/index.jsx b/src/factory/components/Feature/index.jsx index 3e589aa7..2fcc77d4 100644 --- a/src/factory/components/Feature/index.jsx +++ b/src/factory/components/Feature/index.jsx @@ -39,29 +39,31 @@ function Feature(props) { return (
-

工厂引擎，全面赋能XX软件敏捷开发

-
-
-
-

智能化驱动，释放研发新效能

-

AI深度融入需求分析、代码生成、测试验证等关键环节，大幅提升开发效率

- - -
-
-

数字化纳管，掌控研发全链路

-

研发活动及制品全流程数字化纳管，支持精准决策和持续优化

- - -
-
-
-
-

敏捷化协同，实现能力极速交付

-

打破用户-研发团队-运维团队协作壁垒，大幅缩短交付周期

+
+

工厂引擎，全面赋能XX软件敏捷开发

+
+
+
+

智能化驱动，释放研发新效能

+

AI深度融入需求分析、代码生成、测试验证等关键环节，大幅提升开发效率

+ + +
+
+

数字化纳管，掌控研发全链路

+

研发活动及制品全流程数字化纳管，支持精准决策和持续优化

+ + +
+
+
+

敏捷化协同，实现能力极速交付

+

打破用户-研发团队-运维团队协作壁垒，大幅缩短交付周期

+
- + +
diff --git a/src/factory/components/Feature/index.scss b/src/factory/components/Feature/index.scss index 157c86d5..1595f42f 100644 --- a/src/factory/components/Feature/index.scss +++ b/src/factory/components/Feature/index.scss @@ -1,10 +1,19 @@ .factory-feature { - margin: auto; - padding-top: 67px; - background-image: url('../../../images/factory/feature-bg.png'); - background-repeat: no-repeat; - background-size: 100% auto; - background-position: center -0px; + + .feature-container { + opacity: 0; + transform: scale(0.9); + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: auto; + padding-top: 67px; + background-image: url('../../../images/factory/feature-bg.png'); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center -0px; + } h1 { color: #ffffff !important; } diff --git a/src/factory/components/News/index.scss b/src/factory/components/News/index.scss index 31be3c58..6c620457 100644 --- a/src/factory/components/News/index.scss +++ b/src/factory/components/News/index.scss @@ -81,6 +81,7 @@ margin-top: 69px; &-left { + opacity: 0; width: 1153px; height: 475px; background-image: url('../../../images/factory/news-1-left.png'); @@ -170,6 +171,7 @@ } &-right { + opacity: 0; background: url('../../../images/factory/news-1-right.png'), #ffffff; background-repeat: no-repeat; background-size: 100% 100%; diff --git a/src/factory/components/Resource/index.scss b/src/factory/components/Resource/index.scss index 7b3678d9..18bd9159 100644 --- a/src/factory/components/Resource/index.scss +++ b/src/factory/components/Resource/index.scss @@ -167,6 +167,7 @@ margin-top: 21px; line-height: 26px; } + button { &:hover { border-color: #164ce4; @@ -182,6 +183,7 @@ height: 622px; background: #d5dfff; z-index: 3; + .content-item3 { width: 385px; height: 246px; @@ -192,20 +194,25 @@ display: flex; flex-direction: column; margin-right: 15px; + .item-desc { margin-top: 27px; } + .item-btn { margin-top: auto; + button { margin-right: 20px; background-color: #ffffff; color: #091221; + &:nth-child(1) { background-color: #091221; color: #ffffff; border: none; } + &:nth-child(2) { &:hover { border-color: #164ce4; @@ -264,6 +271,7 @@ color: #164ce4; font-size: 14px; width: fit-content; + &:hover { opacity: 0.7; } @@ -317,7 +325,7 @@ overflow: hidden; } - button{ + button { margin-top: auto; width: 84px; height: 36px; @@ -337,18 +345,4 @@ } } } - - @keyframes resourceShow { - to { - opacity: 1; - transform: scale(1); - } -} - -} - -.animate-active { - .resource-container { - animation: resourceShow 0.8s ease-in-out forwards; - } } \ No newline at end of file diff --git a/src/factory/components/Resource2/index.scss b/src/factory/components/Resource2/index.scss index e5f0bf7f..aeb4133d 100644 --- a/src/factory/components/Resource2/index.scss +++ b/src/factory/components/Resource2/index.scss @@ -23,6 +23,7 @@ } &-left { + opacity: 0; width: 997px; height: 600px; background-image: url('../../../images/factory/lessons-left-bg.webp'); @@ -113,7 +114,7 @@ } &-right { - + opacity: 0; .standard, .manual { background-repeat: no-repeat; @@ -179,6 +180,13 @@ margin-left: 35px; } + h3 { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 285px; + } + p { margin-top: 15px; display: -webkit-box; diff --git a/src/factory/components/Scene/index.scss b/src/factory/components/Scene/index.scss index 2ca6190c..50315d7f 100644 --- a/src/factory/components/Scene/index.scss +++ b/src/factory/components/Scene/index.scss @@ -2,6 +2,7 @@ margin-top: 70px; .scene-list { + opacity: 0; margin-top: 43px; display: flex; flex-wrap: wrap; diff --git a/src/factory/index.scss b/src/factory/index.scss index 4846cf95..b4705d20 100644 --- a/src/factory/index.scss +++ b/src/factory/index.scss @@ -154,15 +154,39 @@ } .animate-active { - .module-title { + + .module-title, + video, + .news-1-left, + .news-1-right, + .resource2-content-left, + .resource2-content-right, + .scene-list { animation: fadeInUp 0.8s ease-out forwards; } + + .resource-container, .feature-container { + animation: resourceShow 0.8s ease-in-out forwards; + } + + video, + .news-1-left, + .resource2-content-left, + .scene-list { + animation-delay: 0.2s; // 延迟 0.2s 执行 + } + + .news-1-right, + .resource2-content-right { + animation-delay: 0.4s; // 延迟 0.2s 执行 + } } &-video { margin-top: 83px; video { + opacity: 0; margin-top: 31px; width: 1144px; height: 654px; @@ -188,4 +212,11 @@ opacity: 1; transform: translateY(0); } +} + +@keyframes resourceShow { + to { + opacity: 1; + transform: scale(1); + } } \ No newline at end of file diff --git a/src/factory/lessons/index.scss b/src/factory/lessons/index.scss index f25bb0a4..933b4931 100644 --- a/src/factory/lessons/index.scss +++ b/src/factory/lessons/index.scss @@ -330,6 +330,7 @@ font-size: 16px; } } + .button-wrapper { width: 100%; height: 80px; @@ -338,6 +339,7 @@ justify-content: center; display: none; margin-top: auto; + button { cursor: pointer; width: 449px; @@ -353,15 +355,18 @@ } } } + &:hover { .chapter-info { height: 302px; background: #ffffff; margin-top: -73px; } + .chapter-tag { display: none; } + .button-wrapper { display: flex; } @@ -397,10 +402,15 @@ h4 { color: #164ce4; } + &:hover { - .line-1,.line-2,.line-3 { + + .line-1, + .line-2, + .line-3 { opacity: 1; - } + } + .line-1 { animation: wave1 1.2s ease-in-out infinite; } @@ -568,14 +578,20 @@ &-head { display: flex; + h4 { line-height: 33px; font-family: alibabaBold; font-weight: 700; color: #091221; font-size: 24px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } + button { + flex-shrink: 0; cursor: pointer; margin-left: auto; margin-right: 88px; @@ -618,6 +634,7 @@ transform: scale(1.1); } } + button { opacity: 1; } diff --git a/src/factory/news/index.jsx b/src/factory/news/index.jsx index 2c31b939..6071e248 100644 --- a/src/factory/news/index.jsx +++ b/src/factory/news/index.jsx @@ -12,7 +12,8 @@ import headerBottom from '../../images/factory/news/header-bottom.png' import bodyBg from '../../images/factory/news/news-bg.webp' import '../common.scss' import { Link } from "react-router-dom"; -import moment from "moment"; +import moment from "moment"; +import InfiniteScroll from 'react-infinite-scroller'; const backList = [back1, back2, back3] @@ -27,6 +28,11 @@ function Index(props) { const [isVisible, setIsVisible] = useState(false); const carouselEL = useRef(null); const containerRef = useRef(null); + const pageSize = 10 + const [pageNum, setPageNum] = useState(1) + const [hasMore, setHasMore] = useState(true) + const [loading, setLoading] = useState(false) + const [total, setTotal] = useState(0) useEffect(() => { const observer = new IntersectionObserver((entries) => { @@ -68,12 +74,23 @@ function Index(props) { }) } - const getFullList = () => { - getSubDocList(dirId, { isHomepage: 0 }).then(res => { - const rows = res.data.rows - setNewsList1(rows.slice(0, 2)) - setNewsList2(rows.slice(2, 6)) - setNewsList3(rows.splice(6)) + const getFullList = (isMore = false) => { + if (!hasMore) return + setLoading(true) + getSubDocList(dirId, { isHomepage: 0, pageSize, pageNum : isMore || pageNum }).then(res => { + const rows = res.data.rows + + setLoading(false) + if (isMore) { + setPageNum(isMore) + setNewsList3([...newsList3, ...rows]) + } else { + setNewsList1(rows.slice(0, 2)) + setNewsList2(rows.slice(2, 6)) + setNewsList3(rows.slice(6)) + } + setHasMore(res.data.total > (isMore ? 6 + newsList3.length + rows.length : rows.length)) + setTotal(res.data.total) }) } @@ -193,28 +210,38 @@ function Index(props) { }) }
-
- { - newsList3.map((item, index) => { - return
-
- -
-
-

{item.name}

-

{item.summary}

-
- {item.publishTime} - - 查看详情 - - + { getFullList(e) }} + hasMore={!loading && hasMore} + > +
+ + { + newsList3.map((item, index) => { + return
+
+ +
+
+

{item.name}

+

{item.summary}

+
+ {item.publishTime} + + 查看详情 + + +
-
- }) - } -
+ }) + } +
+ +
) diff --git a/src/factory/resource/developmentTools/index.jsx b/src/factory/resource/developmentTools/index.jsx index db566594..52ef4e98 100644 --- a/src/factory/resource/developmentTools/index.jsx +++ b/src/factory/resource/developmentTools/index.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState, useRef } from 'react'; import './index.scss'; import { getSourceList, getSourceZoneList, httpUrl } from '../../api' -import { factoryZoneId, lessonId , versionId, toolId } from '../../../constants/factory' +import { factoryZoneId, lessonId, versionId, toolId } from '../../../constants/factory' import KFIcon from '../../../components/KFIcon'; import bg1 from '../../../images/factory/resource/tools-top-1.webp'; import bg2 from '../../../images/factory/resource/tools-top-2.webp'; @@ -14,6 +14,7 @@ import ActionItem from '../components/ActionItem'; import '../../common.scss' import { downloadFunc } from '../../../forge/Utils/utils' import { Link } from "react-router-dom"; +import InfiniteScroll from 'react-infinite-scroller'; const bgList = [bg1, bg2, bg3] @@ -28,39 +29,55 @@ function Index(props) { const [newList, setNewList] = useState([]); const [selectedType, setSelectedType] = useState(null); + const pageSize = 10 + const [pageNum, setPageNum] = useState(1) + const [loading, setLoading] = useState(false) + + const hasMore = useRef(true) + useEffect(() => { - getFullList(); + // getFullList(); getTypeList(); + getNewList() }, []); useEffect(() => { - if (selectedType) { - getTypeSourceList() - } else { - getFullList() - } + setPageNum(1) + hasMore.current = true + getFullList() }, [selectedType]) - const getFullList = () => { + const getFullList = (isMore = false) => { + if (!hasMore.current) return + let params = { + id: factoryZoneId, + keywords: toolId, + pageNum: isMore ? isMore : pageNum, + pageSize + } - getSourceList({ id: factoryZoneId, keywords: toolId }).then(res => { + if (selectedType) params.domainId = selectedType + setLoading(true) + getSourceList(params).then(res => { + setLoading(false) if (res.data.rows) { const rows = res.data.rows - setTopList(rows.slice(0, 3)); - setNewList(rows.slice(0, 2)); - setContentList(rows.slice(3, 9)); - setFullList(rows.slice(9)); + if (isMore) { + setPageNum(isMore) + setFullList([...fullList, ...rows]) + } else if (selectedType) { + setContentList(res.data.rows.slice(0, 6)); + setFullList(res.data.rows.slice(6)); + } else { + setTopList(rows.slice(0, 3)); + setContentList(rows.slice(3, 9)); + setFullList(rows.slice(9)); + } + hasMore.current = res.data.total > (isMore ? selectedType ? 6 : 9 + fullList.length + rows.length : rows.length) } }); }; - const getTypeSourceList = () => { - getSourceList({ id: factoryZoneId, domainId: selectedType }).then(res => { - setContentList(res.data.rows.slice(0, 6)); - setFullList(res.data.rows.slice(6)); - }); - } - const getTypeList = () => { getSourceZoneList(factoryZoneId).then(response => { if (response && response.data) { @@ -69,6 +86,13 @@ function Index(props) { }).catch(error => { }) } + const getNewList = () => { + getSourceList({ id: factoryZoneId, sort: 'createTime', keywords: toolId }).then(res => { + const rows = res.data.rows + setNewList(rows.slice(0, 2)); + }); + } + const getBackgroundImage = (index) => { const row = Math.floor(index / 4); // 行号 const col = index % 4; // 列号（行内位置） @@ -103,7 +127,7 @@ function Index(props) { {item.domainName}

{item.summary}

- +
) }) @@ -146,7 +170,7 @@ function Index(props) {
- +
}) @@ -171,7 +195,7 @@ function Index(props) {

{item.summary}

- + }) @@ -179,36 +203,45 @@ function Index(props) { + { + fullList.length > 0 && { getFullList(e) }} + hasMore={!loading && hasMore.current} + >
+ { + fullList.map((item, index) => { + const createUser = item.createUser + return +
-
- { - fullList.map((item, index) => { - const createUser = item.createUser - return -
- - -
- -
{item.name}
-
-
- {item.summary} -
-
- {item.downloadCount} -
-
-
-
- - -
-
- - }) - } -
+ +
+ +
{item.name}
+
+
+ {item.summary} +
+
+ {item.downloadCount} +
+
+
+
+ + +
+
+ + }) + } +
+ + } ) } diff --git a/src/factory/resource/developmentTools/index.scss b/src/factory/resource/developmentTools/index.scss index 9ff7dfbc..78c16d7b 100644 --- a/src/factory/resource/developmentTools/index.scss +++ b/src/factory/resource/developmentTools/index.scss @@ -3,6 +3,7 @@ flex-direction: column; align-items: center; margin-top: -50px; + padding-bottom: 100px; &-top { display: flex; diff --git a/src/factory/resource/softwareProject/index.jsx b/src/factory/resource/softwareProject/index.jsx index 1793ccea..a9e884d3 100644 --- a/src/factory/resource/softwareProject/index.jsx +++ b/src/factory/resource/softwareProject/index.jsx @@ -18,6 +18,7 @@ import bg8 from '../../../images/factory/resource/project-bottom-1.webp' import ActionItem from '../components/ActionItem'; import '../../common.scss' import { Link } from 'react-router-dom'; +import InfiniteScroll from 'react-infinite-scroller'; const bgList = [bg1, bg2, bg3] @@ -28,6 +29,10 @@ function Index(props) { const [topList, setTopList] = useState([]); const [contentList, setContentList] = useState([]); const [fullList, setFullList] = useState([]); + const pageSize = 10 + const [pageNum, setPageNum] = useState(1) + const [hasMore, setHasMore] = useState(true) + const [loading, setLoading] = useState(false) useEffect(() => { getFullList(); @@ -40,12 +45,24 @@ function Index(props) { }); }; - const getFullList = () => { - getProjectsLists(factoryZoneId, { isHomepage: 0 }).then(res => { - // 前面四个项目作为 contentList - setContentList(res.data.rows.slice(0, 4)); - // 后面项目作为 fullList - setFullList(res.data.rows.slice(4)); + const getFullList = (isMore = false) => { + if (!hasMore) return + setLoading(true) + getProjectsLists(factoryZoneId, { isHomepage: 0, pageSize, pageNum: isMore || pageNum }).then(res => { + const rows = res.data.rows + setLoading(false) + + if (isMore) { + setPageNum(isMore) + setFullList([...fullList, ...rows]) + } else { + // 前面四个项目作为 contentList + setContentList(res.data.rows.slice(0, 4)); + // 后面项目作为 fullList + setFullList(res.data.rows.slice(4)); + } + setHasMore(res.data.total > (isMore ? 4 + fullList.length + rows.length : rows.length)) + // setTotal(res.data.total) }); }; @@ -126,56 +143,63 @@ function Index(props) { + { getFullList(e) }} + hasMore={!loading && hasMore} + > +
+ { + fullList.map((item, index) => { + const project = item.projectProperties + project.praisesCount = 3 + project.forkedCount = 3 + return +
+ { + index % 2 === 0 && + } -
- { - fullList.map((item, index) => { - const project = item.projectProperties - project.praisesCount = 3 - project.forkedCount = 3 - return -
- { - index % 2 === 0 && - } - -
- -
{project.name}
-
- { - project.description &&
- {project.description} +
+ +
{project.name}
- } - -
{ - project.topics && project.topics.split(',').splice(0, 3).map((topic, index) => { - return ( - {topic} - ) - }) + project.description &&
+ {project.description} +
} + +
+ { + project.topics && project.topics.split(',').splice(0, 3).map((topic, index) => { + return ( + {topic} + ) + }) + } +
+ +
+ + { + project.praisesCount > 0 && {project.praisesCount} + } + { + project.forkedCount > 0 && {project.forkedCount} + } +
- -
- - { - project.praisesCount > 0 && {project.praisesCount} - } - { - project.forkedCount > 0 && {project.forkedCount} - } +
+
-
-
- -
- - }) - } -
+ + }) + } +
+
)