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

maqiang877 · 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>