feat: 首页切换背景

react-ui/src/components/RightContent/AvatarDropdown.tsx

@@ -74,7 +74,7 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, isHome = false
    * 退出登录，并且将当前的 url 保存
    */
   const loginOut = async () => {
-    const { origin } = location;
+    // const { origin } = location;
     const [res] = await to(getLabelStudioUrl());
     if (res && res.data) {
       oauthLogout(`${res.data}/oauth/logout`);
@@ -88,11 +88,11 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, isHome = false
     if (clientInfo) {
       const { logoutUri } = clientInfo;
       location.replace(logoutUri);
-      if (isHome) {
-        setTimeout(() => {
-          location.replace(origin);
-        }, 1);
-      }
+      // if (isHome) {
+      //   setTimeout(() => {
+      //     location.replace(origin);
+      //   }, 1);
+      // }
     } else {
       if (isHome) {
         location.reload();

react-ui/src/pages/Home/components/Intro/index.less

@@ -7,6 +7,9 @@
   height: @home-info-height;
   overflow: hidden;
   background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: 100% 100%;
 
   &__content {
     position: relative;
@@ -15,7 +18,7 @@
     flex-direction: column;
     align-items: center;
     padding: 1.25rem @home-padding-x 0;
-    background-image: url(@/assets/img/home/header-bg.png);
+    // background-image: url(@/assets/img/home/header-bg.png);
     background-repeat: no-repeat;
     background-position: left top;
     background-size: 100% 100%;

react-ui/src/pages/Home/components/Intro/index.tsx

@@ -1,11 +1,23 @@
+import miniHeaderImage from '@/assets/img/home/header-bg-mini.png';
+import headerImage from '@/assets/img/home/header-bg.png';
 import { convertRemToPx } from '@/utils';
 import { useNavigate } from '@umijs/max';
-import { motion, useMotionTemplate, useScroll, useSpring, useTransform } from 'motion/react';
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValueEvent,
+  useScroll,
+  useSpring,
+  useTransform,
+} from 'motion/react';
+import { useState } from 'react';
 import NavBar from '../NavBar';
 import StatisticsBlock from '../Statistics';
 import styles from './index.less';
 
 function IntroBlock() {
+  const [backgroundImage1, setBackgroundImage1] = useState(undefined);
+  const [backgroundImage2, setBackgroundImage2] = useState(headerImage);
   const navigate = useNavigate();
   const { scrollY } = useScroll();
   const springValue = useSpring(scrollY, {
@@ -15,10 +27,8 @@ function IntroBlock() {
   });
 
   const initialHeight = convertRemToPx(35);
-  console.log(initialHeight);
-
-  const height = useTransform(() => `max(calc(35rem - ${springValue.get()}px), 5rem)`);
-  // const left = useTransform(() => `min(${springValue.get()}px, 16.25rem)`);
+  const minHeight = convertRemToPx(4.7);
+  const height = useTransform(() => `max(calc(35rem - ${springValue.get()}px), 4.7rem)`);
   const left = useTransform(springValue, [0, initialHeight], [0.0, 16.25]);
   const leftRem = useMotionTemplate`${left}rem`;
   const radius = useTransform(springValue, [0, initialHeight], [0.0, 2.5]);
@@ -26,6 +36,10 @@ function IntroBlock() {
   const top = useTransform(springValue, [0, initialHeight], [0, 10]);
   const paddingX = useTransform(springValue, [0, initialHeight], [16.25, 10]);
   const paddingXRem = useMotionTemplate`1.25rem ${paddingX}rem 0`;
+  useMotionValueEvent(scrollY, 'change', (value) => {
+    setBackgroundImage1(value > initialHeight - minHeight ? miniHeaderImage : undefined);
+    setBackgroundImage2(value > initialHeight - minHeight ? undefined : headerImage);
+  });
 
   return (
     <motion.div
@@ -36,13 +50,17 @@ function IntroBlock() {
         right: leftRem,
         borderRadius: radiusRem,
         top: top,
+        backgroundImage: `url(${backgroundImage1})`,
       }}
       transition={{
         type: 'spring',
         duration: 0.3,
       }}
     >
-      <motion.div className={styles['intro__content']} style={{ padding: paddingXRem }}>
+      <motion.div
+        className={styles['intro__content']}
+        style={{ padding: paddingXRem, backgroundImage: `url(${backgroundImage2})` }}
+      >
         <NavBar></NavBar>
         <div className={styles['intro__title']}>智能材料科研平台</div>
         <div className={styles['intro__desc']}>

react-ui/src/pages/Home/components/NavBar/index.less

@@ -16,6 +16,7 @@
     margin-right: 6.625rem;
     font-size: 1.375rem;
     font-family: WenYiHei;
+    line-height: 2.2rem;
   }
 
   &__menu-item {
@@ -38,6 +39,8 @@
       height: 2.15rem;
 
       .ant-avatar {
+        width: 1.875rem;
+        height: 1.875rem;
         margin-right: 0 !important;
       }
     }