Merge branch 'main' into anln

2024-08-14 13:34:31 +08:00 · 2024-08-14 13:34:31 +08:00 · 0e0d00ee7e
parent ecef92f919 068bfaef5d
commit 0e0d00ee7e
7 changed files with 196 additions and 102 deletions
--- a/app/login/index.module.scss
+++ b/app/login/index.module.scss
@ -1,9 +1,9 @@

 .customTabs {
  border: none;
-  --active-line-color: #ff8383;
-  --active-title-color: #fff;
-  --title-color: #a0a0a0;
+  --active-line-color: #ff8383!important;
+  --active-title-color: #fff!important;
+  --title-color: #a0a0a0!important;
  --inactive-title-color: #FFFFFF80;
  --tab-border-color: #ff8383;
 }
--- a/app/my/relationship/index.module.scss
+++ b/app/my/relationship/index.module.scss
@ -9,6 +9,12 @@
 .jumboTabs>div>div:last-child{
    grid-template-columns: repeat(2, 1fr);
 }
+.jumboTabs {
+    &>div:first-child{
+        position: sticky;
+        top: 52px;
+    }
+}
 .listTimeBox>div,.listTimeBox>div>div{
    width: 100%;
    padding-right: 0;
--- a/app/my/relationship/page.js
+++ b/app/my/relationship/page.js
@ -106,7 +106,7 @@ export default function Relationship() {
  };
  return (
    <div className={styles.relationshipBox}>
-      <div className="p-4 fixed top-0 z-10 w-full">
+      <div className="px-4 pt-4 sticky top-0 z-10 w-full bg-[#070415]">
        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
          <FontAwesomeIcon
            icon={faAngleLeft}
@ -119,7 +119,7 @@ export default function Relationship() {
        <p className="text-base text-center leading-9">关系</p>
      </div>
      {/* 内容 */}
-      <div className="pt-16 px-4">
+      <div className="px-4">
        <JumboTabs
          onChange={(key) => setCurrentKey(key)}
          activeKey={currentKey}
--- a/app/page.js
+++ b/app/page.js
@ -133,6 +133,11 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth", // 可选，平滑滚动效果
+    });
    const list = await getRecommPostList(1);
    setCommenPostList(list);
    setHasMore(true);
@ -207,10 +212,10 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
  const [followPostList, setFollowPostList] = useState([]);
  const [currentTime, setCurrentTime] = useState();
  const [offset, setOffset] = useState(0);
-  const [ids, setIds] = useState([]);
+  const ids = useRef(null)
  useEffect(() => {
    getFollowIds().then((res) => {
-      setIds(res);
+      ids.current=res;
      getFollowPostList(res, 0);
    });
  }, []);
@ -229,10 +234,16 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
    // });
    // throw new Error("刷新失败");
    // getRecommPostList(1);
-    await getFollowPostList(ids, 0);
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth", // 可选，平滑滚动效果
+    });
+    // setFollowPostList([]);
+    await getFollowPostList(ids.current, 0);
  }
  async function loadMore() {
-    await getFollowPostList(ids, offset);
+    await getFollowPostList(ids.current, offset);
    // const newList = [...followPostList, ...list];
    // setFollowPostList(newList);
  }
@ -265,7 +276,7 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
        }
      );
      // debugger;
-      console.log("offset", followsResponse.data.offset);
+      // console.log("offset", followsResponse.data.offset);
      setOffset(followsResponse.data.offset);
      setHasMore(followsResponse.data.more);
      setLoading(false);
@ -276,7 +287,14 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
        //   position: "top",
        // });
      } else {
-        setFollowPostList((old) => [...old, ...followsResponse.data.list]);
+        
+        setFollowPostList((old) => {
+          if(!offset){
+            return followsResponse.data.list;
+          }else{
+            return [...old, ...followsResponse.data.list]
+          }
+        });
      }
    } else {
      setLoading(false);
@ -303,8 +321,8 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
        ))}
        {!followPostList?.length && (
          <div
-            className={`flex flex-col items-center justify-center  h-screen`}
-            // style={{ height: `${scrollHeight - 98}px` }}
+            className={`flex flex-col items-center justify-center h-screen`}
+            style={{ height: `calc(100vh - 133px)` }}
          >
            <Empty type="nodata" />
          </div>
--- a/app/space/page.js
+++ b/app/space/page.js
@ -35,7 +35,6 @@ export default function Space() {
  const [scrollHeight, setScrollHeight] = useState(0);
  const [offset, setOffset] = useState(0);
  const [loading, setLoading] = useState(false);
-  const scrollRef = useRef(null);
  const router = useRouter();
  // 获取屏幕高度
  // const scrollHeight = 600;
@ -182,7 +181,7 @@ export default function Space() {
                            <VisitingCard data={item} />
                          </li>
                        ))}
-                        <li onClick={() => router.replace("/search")}>
+                        <li onClick={() => router.push("/search")}>
                          <div
                            // onPress={() => navigation.navigate("Stream")}
                            // onClick={}
@ -259,7 +258,7 @@ export default function Space() {
        </Swiper.Item>
        <Swiper.Item>
          {!!activeIndex && (
-            <div className="px-4 pb-20" ref={scrollRef}>
+            <div className="px-4 pb-20" >
              <List className="scrollbarBox_hidden">
                {loading && !dataList.length && (
                  <>
@ -305,7 +304,12 @@ export default function Space() {
          size="xl"
          // onClick={firstRequest}
          onClick={() => {
-            scrollRef.current?.scrollTo(0, 0);
+            // scrollRef.current?.scrollTo(0, 0);
+            window.scrollTo({
+              top: 0,
+              left: 0,
+              behavior: "smooth", // 可选，平滑滚动效果
+            });
            firstRequest();
          }}
        />
--- a/components/BottomNav/index.js
+++ b/components/BottomNav/index.js
@ -1,58 +1,103 @@
-"use client"
+"use client";

-import React from 'react'
-import { NavBar, TabBar,Image,Icon } from 'antd-mobile'
-import {
-  AppOutline,
-  MessageOutline,
-  UnorderedListOutline,
-  UserOutline,
-} from 'antd-mobile-icons'
-import './index.css'
-import { usePathname, useRouter } from 'next/navigation'
-export default function BottomNav(){
-    // const history = useHistory()
-    // const location = useLocation()
-    // const { pathname } = location
-  
-    // const setRouteActive = (value) => {
-    //   history.push(value)
-    // }
-    const pathname = usePathname()
-    const router = useRouter()
-    const setRouteActive = (value) => {
-        router.push(value)
-    }
-    const tabs = [
-      {
-        key: '/',
-        title: '广场',
-        icon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/postblur.png"} /></div>,
-        activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/postfocus.png"} /></div>,
-      },
-      {
-        key: '/space',
-        title: '空间',
-        icon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/space_blur.png"} /></div>,
-        activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/space_focus.png"} /></div>,
-      },
-      {
-        key: '/my',
-        title: '我的',
-        icon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/myblur.png"} /></div>,
-        activeIcon: <div className='w-8 h-8'><Image placeholder="" src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/myfocus.png" }/></div>,
-      },
-    ]
-    const checkPath = () => {
-      const pathnames = ["/", "/space", "/my"];
-      const isActive = pathnames.some(path => path === pathname);
-      return isActive;
-    };
-    return (
-      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)} className={!checkPath() ? 'hidden' : ''}>
-        {tabs.map(item => (
-          <TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} className='text-[#ffffff40]'/>
-        ))}
-      </TabBar>
-    )
-}
+import React from "react";
+import { TabBar, Image } from "antd-mobile";
+import "./index.css";
+import { usePathname, useRouter } from "next/navigation";
+
+export default function BottomNav() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const setRouteActive = (value) => {
+    router.replace(value);
+  };
+  const tabs = [
+    {
+      key: "/",
+      title: "广场",
+      icon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postblur.png"}
+          />
+        </div>
+      ),
+      activeIcon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={
+              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/postfocus.png"
+            }
+          />
+        </div>
+      ),
+    },
+    {
+      key: "/space",
+      title: "空间",
+      icon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={
+              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_blur.png"
+            }
+          />
+        </div>
+      ),
+      activeIcon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={
+              process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/space_focus.png"
+            }
+          />
+        </div>
+      ),
+    },
+    {
+      key: "/my",
+      title: "我的",
+      icon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myblur.png"}
+          />
+        </div>
+      ),
+      activeIcon: (
+        <div className="w-8 h-8">
+          <Image
+            placeholder=""
+            src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/myfocus.png"}
+          />
+        </div>
+      ),
+    },
+  ];
+  const checkPath = () => {
+    const pathnames = ["/", "/space", "/my"];
+    const isActive = pathnames.some((path) => path === pathname);
+    return isActive;
+  };
+  return (
+    <TabBar
+      activeKey={pathname}
+      onChange={(value) => setRouteActive(value)}
+      className={!checkPath() ? "hidden" : ""}
+    >
+      {tabs.map((item) => (
+        <TabBar.Item
+          key={item.key}
+          icon={pathname === item.key ? item.activeIcon : item.icon}
+          title={item.title}
+          className="text-[#ffffff40]"
+        />
+      ))}
+    </TabBar>
+  );
+}
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@ -36,15 +36,15 @@ export default function Photos({
        type: "img",
        url: item.urls?.[0],
        // fullwidth:item.w>item.h，
-        w:item.w,
-        h:item.h,
+        w: item.w,
+        h: item.h,
      }));
      let videoArr = media.videos.map((item) => ({
        type: "video",
        url: item.cover_urls?.[0],
        mp4: item.urls?.[0],
-        w:item.cover_w,
-        h:item.cover_h,
+        w: item.cover_w,
+        h: item.cover_h,
        // fullwidth:item.cover_w>item.cover_h
      }));
      let arr = [...imgArr, ...videoArr];
@ -60,6 +60,8 @@ export default function Photos({
                  mp4: newPhotos[0]?.type === "video",
                  url: newPhotos[0]?.url,
                  type: "hid",
+                  w: newPhotos[0]?.w,
+                  h: newPhotos[0]?.h,
                };
          });
      }
@ -71,15 +73,15 @@ export default function Photos({
      setCurrentPhotos(newPhotos);
    }
  }, [media]);
-  useEffect(()=>{
+  useEffect(() => {
    // window.addEventListener('resize', (e)=>{
    //   // alert(window.innerHeight)
    //   setMaskHeight(window.innerHeight)
    // });
-    return ()=>{
+    return () => {
      // window.removeEventListener("resize")
-    }
-  },[])
+    };
+  }, []);
  const showPhotos = (photos, index) => {
    currentIndex.current = index;
    const interval = setInterval(() => {
@ -144,7 +146,7 @@ export default function Photos({
      photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
    }`;
    // mediaDom.appendChild(btns);
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflow = "hidden";
    ImageViewer.clear();
    ImageViewer.Multi.show({
      images: photos.map((item) => item?.url),
@ -159,25 +161,29 @@ export default function Photos({
        mediaDom.className = `${
          photos[index]?.type == "hid" ? "mediaDom photos-body" : "mediaDom"
        }`;
-        const leftBtn = document.getElementsByClassName("imagesBtnsControllerLeft")[0]
-        const rightBtn = document.getElementsByClassName("imagesBtnsControllerRight")[0]
-        if(leftBtn && rightBtn){
-          if(!index){
-            leftBtn.style.opacity=0.5
-            rightBtn.style.opacity=1
-          }else if(index==currentPhotos.length-1){
-            leftBtn.style.opacity=1
-            rightBtn.style.opacity=0.5
-          }else{
-            leftBtn.style.opacity=1
-            rightBtn.style.opacity=1
+        const leftBtn = document.getElementsByClassName(
+          "imagesBtnsControllerLeft"
+        )[0];
+        const rightBtn = document.getElementsByClassName(
+          "imagesBtnsControllerRight"
+        )[0];
+        if (leftBtn && rightBtn) {
+          if (!index) {
+            leftBtn.style.opacity = 0.5;
+            rightBtn.style.opacity = 1;
+          } else if (index == currentPhotos.length - 1) {
+            leftBtn.style.opacity = 1;
+            rightBtn.style.opacity = 0.5;
+          } else {
+            leftBtn.style.opacity = 1;
+            rightBtn.style.opacity = 1;
          }
        }
      },
      afterClose: () => {
        mediaDom.remove();
        clearInterval(interval);
-        document.body.style.overflow = 'auto';
+        document.body.style.overflow = "auto";
      },
      classNames: { body: "photos-bodyBox" },
    });
@ -201,7 +207,7 @@ export default function Photos({
    return hidden ? (
      <div className="flex justify-center">
        <div
-          className="rounded-full bg-[#131313d4] -mt-[50vh] h-max w-max px-4 py-2 text-primary"
+          className="rounded-full text-base -mt-[50vh] h-max w-max px-6 py-3 bg-primary"
          onClick={() => {
            fatherDom && fatherDom.remove();
            router.push(
@ -216,6 +222,7 @@ export default function Photos({
                )
            );
          }}
+          style={{ marginTop: "calc(-85px )" }}
        >
          此内容暂未解锁，立即解锁
        </div>
@ -226,13 +233,15 @@ export default function Photos({
    <>
      <div
        className={`${
-          currentPhotos.length > 1 ? "grid grid-cols-3 gap-1.5 min-h-[24vw]" : "w-max"
+          currentPhotos.length > 1
+            ? "grid grid-cols-3 gap-1.5 min-h-[24vw]"
+            : "auto"
        }`}
      >
        {currentPhotos.map((item, index) => {
          return (
            <div
-              className={`relative`}
+              className={`relative w-max`}
              // style={{ width:  }}
              key={index}
              onClick={() => {
@ -266,12 +275,24 @@ export default function Photos({
                    placeholder={
                      <div className="w-full min-h-[24vw] bg-[#1d1d1d] rounded"></div>
                    }
-                    width={currentPhotos.length > 1 ? "24vw" : item.w>item.h?`calc(100vw - 72px  - 2rem)`:`calc(46vw * ${item.w/item.h})`}
-                    height={currentPhotos.length > 1 ? "24vw" : item.w>item.h? `calc((100vw - 72px  - 2rem) * ${item.h/item.w})`:"46vw"}
+                    width={
+                      currentPhotos.length > 1
+                        ? "24vw"
+                        : item.w > item.h
+                        ? `calc(100vw - 72px  - 2rem)`
+                        : `calc(46vw * ${item.w / item.h})`
+                    }
+                    height={
+                      currentPhotos.length > 1
+                        ? "24vw"
+                        : item.w > item.h
+                        ? `calc((100vw - 72px  - 2rem) * ${item.h / item.w})`
+                        : "46vw"
+                    }
                    className={`rounded max-w-full ${
                      item?.type == "hid" && type == "space" ? "imageBlur" : ""
                    }`}
-                    fit={currentPhotos.length > 1?"cover":"contain"}
+                    fit={currentPhotos.length > 1 ? "cover" : "contain"}
                    src={item?.url}
                  />
                </div>