From b8c7af62e9eb7a3be700c989eade43433a7977ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E5=AE=87?= Date: Fri, 26 Dec 2025 17:36:25 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=A8=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/factory/components/BlurBox/index.jsx | 77 +++++++++++++++++++++++ src/factory/components/BlurBox/index.scss | 21 +++++++ src/factory/resource/index.jsx | 26 +++++++- src/factory/resource/index.scss | 45 ++++++++++++- 4 files changed, 165 insertions(+), 4 deletions(-) create mode 100644 src/factory/components/BlurBox/index.jsx create mode 100644 src/factory/components/BlurBox/index.scss diff --git a/src/factory/components/BlurBox/index.jsx b/src/factory/components/BlurBox/index.jsx new file mode 100644 index 000000000..a4c71915f --- /dev/null +++ b/src/factory/components/BlurBox/index.jsx @@ -0,0 +1,77 @@ +import { useState, useEffect, useRef } from 'react'; +import './index.scss'; + +const AutoSwitchText = ({ + texts = [], + interval = 2000, + autoPlay = true, + transitionDuration = 2000, // 单个过渡动画时长 +}) => { + const [activeIndex, setActiveIndex] = useState(0); + const [isTransitioning, setIsTransitioning] = useState(false); + const timerRef = useRef(null); + const containerRef = useRef(null); + + // 切换到下一个文案 + const switchToNext = () => { + if (texts.length <= 1 || isTransitioning) return; + + setIsTransitioning(true); + + // 动画阶段1：缩小模糊 + if (containerRef.current) { + containerRef.current.style.transform = 'scaleX(0.66)'; + containerRef.current.style.filter = 'blur(3px)'; + containerRef.current.style.opacity = '0.4'; + } + + // 等待缩小完成 + setTimeout(() => { + // 切换索引 + setActiveIndex((prev) => (prev + 1) % texts.length); + + // 动画阶段2：展开清晰 + setTimeout(() => { + if (containerRef.current) { + containerRef.current.style.transform = 'scaleX(1)'; + containerRef.current.style.filter = 'blur(0)'; + containerRef.current.style.opacity = '0.64'; + } + + // 动画完成 + setTimeout(() => { + setIsTransitioning(false); + }, transitionDuration * 0.3); + }, transitionDuration * 0.2); + }, transitionDuration * 0.5); + }; + + // 自动播放 + useEffect(() => { + if (!autoPlay || texts.length <= 1) return; + const startInterval = () => { + timerRef.current = setInterval(switchToNext, interval); + }; + + startInterval(); + + return () => { + if (timerRef.current) { + clearInterval(timerRef.current); + } + }; + }, [texts, interval, autoPlay]); + + if (texts.length === 0) return null; + + return ( +
+ {texts[activeIndex]} +
+ ); +}; + +export default AutoSwitchText; \ No newline at end of file diff --git a/src/factory/components/BlurBox/index.scss b/src/factory/components/BlurBox/index.scss new file mode 100644 index 000000000..de73617f4 --- /dev/null +++ b/src/factory/components/BlurBox/index.scss @@ -0,0 +1,21 @@ +.move-item { + position: absolute; + top: 50px; + left: 400px; + opacity: 64%; + height: 24px; + background: #ffffff; + border-radius: 22px; + max-width: 114px; + min-width: 80px; + line-height: 24px; + font-family: alibabareg; + color: #37393d; + font-size: 11px; + text-align: center; + padding: 0px 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + transition: all 1s ease-in-out; +} \ No newline at end of file diff --git a/src/factory/resource/index.jsx b/src/factory/resource/index.jsx index 7082c26b4..cc5addef3 100644 --- a/src/factory/resource/index.jsx +++ b/src/factory/resource/index.jsx @@ -8,8 +8,9 @@ import Loadable from "react-loadable"; import Loading from "../../Loading"; import Search from './components/Search/index' import { Input } from 'antd'; - - +import BlurBox from '../components/BlurBox' +import { getProjectsLists } from '../api' +import { factoryZoneId } from '../../constants/factory' const FactoryVersion = Loadable({ loader: () => import("./factoryVersion/index"), @@ -39,6 +40,7 @@ function Index(props) { const [selectedType, setSelectedType] = useState() const [searchValue, setSearchValue] = useState('') + const [projectList, setProjectList] = useState([]) const searchRef = useRef(null) @@ -57,7 +59,7 @@ function Index(props) { for( let i of typeMap) { if (props.location.pathname.includes(i.key)) matchPath = i.key } - + getProjectList() setSelectedType(matchPath || typeMap[0].key) }, []) @@ -84,6 +86,15 @@ function Index(props) { } } + const getProjectList = (isMore = false) => { + getProjectsLists(factoryZoneId, { isHomepage: 0, pageSize: 6, pageNum: 1 }).then(res => { + const rows = res.data.rows + if (rows) { + setProjectList(rows.map(e => { return e.projectProperties.fullName.split('/')[1]})) + } + }); + }; + return (
@@ -94,6 +105,15 @@ function Index(props) {
+
+ { + [0,1,2,3,4,5].map(() => { + const list = [...projectList.sort((a, b) => { return Math.random() - 0.5 } )] + return + }) + } + +

资源中枢，共享复用释放生态力量

diff --git a/src/factory/resource/index.scss b/src/factory/resource/index.scss index c074890fd..e82054b6a 100644 --- a/src/factory/resource/index.scss +++ b/src/factory/resource/index.scss @@ -1,6 +1,7 @@ .resource { background-color: #f1f6fd; min-height: calc(100vh - 58px); + &-search { background-color: #ffffff; } @@ -15,6 +16,47 @@ background-size: 100% 100%; position: relative; + .box-wrapper { + position: absolute; + width: 1600px; + height: 410px; + + div:nth-child(1) { + top: 70px; + left: 145px; + } + + div:nth-child(2) { + top: 140px; + left: 210px; + } + + div:nth-child(3) { + top: 190px; + left: 140px; + } + + div:nth-child(4) { + top: 70px; + right: 145px; + left: unset; + } + + div:nth-child(5) { + top: 140px; + right: 210px; + left: unset; + + } + + div:nth-child(6) { + top: 190px; + right: 140px; + left: unset; + + } + } + .circle-wrapper { width: 1600px; position: absolute; @@ -41,7 +83,7 @@ // 使用循环创建多个圆圈 @for $i from 1 through $circle-count { &:nth-child(#{$i}) { - $size: 800px + ($i * 2px); + $size: 400px + ($i * 2px); $delay: ( $i - 1) * ($animation-duration / $circle-count ); @@ -124,6 +166,7 @@ line-height: 40px; font-family: alibabareg; font-size: 15px; + input { border: none; width: 100%; From 7d30f7f17c0c77121092cf6bce8b21e0775a7a2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E5=AE=87?= Date: Fri, 26 Dec 2025 17:55:15 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=8A=A8=E6=95=88=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/factory/resource/index.jsx | 2 +- src/factory/resource/index.scss | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/factory/resource/index.jsx b/src/factory/resource/index.jsx index cc5addef3..c22ee1cbb 100644 --- a/src/factory/resource/index.jsx +++ b/src/factory/resource/index.jsx @@ -109,7 +109,7 @@ function Index(props) { { [0,1,2,3,4,5].map(() => { const list = [...projectList.sort((a, b) => { return Math.random() - 0.5 } )] - return + return }) } diff --git a/src/factory/resource/index.scss b/src/factory/resource/index.scss index e82054b6a..463356552 100644 --- a/src/factory/resource/index.scss +++ b/src/factory/resource/index.scss @@ -23,35 +23,35 @@ div:nth-child(1) { top: 70px; - left: 145px; + left: 205px; } div:nth-child(2) { top: 140px; - left: 210px; + left: 270px; } div:nth-child(3) { - top: 190px; - left: 140px; + top: 210px; + left: 200px; } div:nth-child(4) { top: 70px; - right: 145px; + right: 205px; left: unset; } div:nth-child(5) { top: 140px; - right: 210px; + right: 270px; left: unset; } div:nth-child(6) { - top: 190px; - right: 140px; + top: 210px; + right: 200px; left: unset; }