From b00378feff3662610854f230be16b2cc0c705f39 Mon Sep 17 00:00:00 2001
From: 79E <5980844@qq.com>
Date: Wed, 31 May 2023 14:19:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E7=BB=98=E7=94=BB?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=8F=B0=E7=9A=84=E5=B1=95=E7=A4=BA=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/draw/index.module.less | 10 +++++++++-
 src/pages/draw/index.tsx         | 32 +++++++++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/pages/draw/index.module.less b/src/pages/draw/index.module.less
index 96356bf..eb0b5fc 100644
--- 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
index 8d8bf94..94c3417 100644
--- 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>