fix: 更新绘画控制台的展示形式

79E · May 31, 2023 · b00378f · b00378f
1 parent 17eda7e
commit b00378f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/src/pages/draw/index.module.less b/src/pages/draw/index.module.less
@@ -13,18 +13,26 @@
             max-width: 900px;
             align-self: center;
             overflow: auto;
+			padding-bottom: 100px;
             &::-webkit-scrollbar {
                 display: none;
             }
         }
         &_two{
+			max-width: 1000px;
+			margin: auto;
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
             padding: 12px 12px 20px;
+			transition: bottom 0.4s ease-in-out;
         }
     }
 
 	&_config{
 		padding: 12px 20px 20px;
-		background-color: rgba(231,234,243,.5);
+		background-color: rgba(231,234,243,1);
 		position: relative;
 		top: 8px;
 		border-top-right-radius: 12px;

diff --git a/src/pages/draw/index.tsx b/src/pages/draw/index.tsx
@@ -11,7 +11,7 @@ import {
   notification,
   message
 } from 'antd'
-import { useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { drawStore, userStore } from '@/store'
 import OpenAiLogo from '@/components/OpenAiLogo'
 import { postImagesGenerations } from '@/request/api'
@@ -24,6 +24,10 @@ function DrawPage() {
   const { token, setLoginModal } = userStore()
   const { historyDrawImages, clearhistoryDrawImages, addDrawImage } = drawStore()
 
+  const containerOneRef = useRef<HTMLDivElement>(null)
+  const containerTwoRef = useRef<HTMLDivElement>(null)
+  const [bottom, setBottom] = useState(0);
+
   const [drawConfig, setDrawConfig] = useState({
     prompt: '',
     n: 1,
@@ -75,11 +79,28 @@ function DrawPage() {
       })
   }
 
+  const handleScroll = () => {
+	const twoClientHeight = containerTwoRef.current?.clientHeight || 0;
+	const oneScrollTop = containerOneRef.current?.scrollTop || 0;
+	if(oneScrollTop > 100){
+		setBottom(-(twoClientHeight + 100));
+	}else{
+		setBottom(0);
+	}
+  }
+
+  useLayoutEffect(()=>{
+	containerOneRef.current?.addEventListener('scroll', handleScroll);
+    return () => {
+		containerOneRef.current?.removeEventListener('scroll', handleScroll);
+    };
+  },[])
+
   return (
     <div className={styles.drawPage}>
       <Layout>
         <div className={styles.drawPage_container}>
-          <div className={styles.drawPage_container_one}>
+          <div className={styles.drawPage_container_one} ref={containerOneRef}>
             <div className={styles.drawPage_header}>
               <img
                 src="https://www.imageoss.com/images/2023/05/05/Midjourneybf2f31b4a2ac2dc9.png"
@@ -143,7 +164,12 @@ function DrawPage() {
               </Image.PreviewGroup>
             </div>
           </div>
-          <div className={styles.drawPage_container_two}>
+          <div className={styles.drawPage_container_two}
+		  	style={{
+				bottom: bottom
+			}}
+			ref={containerTwoRef}
+          >
             <div className={styles.drawPage_config}>
               <Space direction="vertical">
                 <p>图片尺寸({drawConfig.size})</p>