Merge branch 'factory-hxy' of http://172.20.32.203:3000/durian/forgeplus-react into factory

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 (
+    <div
+      ref={containerRef}
+      className="move-item"
+    >
+      {texts[activeIndex]}
+    </div>
+  );
+};
+
+export default AutoSwitchText;

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;
+}

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 (
     <div className={`resource ${ searchValue ? 'resource-search' : '' }`}>
@@ -94,6 +105,15 @@ function Index(props) {
           <div className="circle-item"></div>
           <div className="circle-item"></div>
         </div>
+        <div className="box-wrapper">
+          {
+            [0,1,2,3,4,5].map(() => {
+              const list = [...projectList.sort((a, b) => { return Math.random() - 0.5 } )]
+              return <BlurBox texts={list} interval={ 3000 + Math.random() * 2000 }></BlurBox>
+            })
+          }
+          
+        </div>
         <h2><span>资源中枢，</span>共享复用释放生态力量</h2>
         <div className="search-box">
           <Input className="search-input" value={searchValue} placeholder="搜索资源" onKeyDown={kewDown} allowClear onChange={cleanSearch}></Input>

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: 205px;
+      }
+
+      div:nth-child(2) {
+        top: 140px;
+        left: 270px;
+      }
+
+      div:nth-child(3) {
+        top: 210px;
+        left: 200px;
+      }
+
+      div:nth-child(4) {
+        top: 70px;
+        right: 205px;
+        left: unset;
+      }
+
+      div:nth-child(5) {
+        top: 140px;
+        right: 270px;
+        left: unset;
+
+      }
+
+      div:nth-child(6) {
+        top: 210px;
+        right: 200px;
+        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%;