处理屏幕问题和添加主屏幕提示

app/globals.css

@@ -3,18 +3,17 @@
 @tailwind utilities;
 body{
   color:#fff;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  /* padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom); */
 }
 footer{
   /* Fallback for non-iOS devices */
   bottom: 0;
-
   /* iOS 11.0+ */
-  bottom: constant(safe-area-inset-bottom);
+  padding-bottom: constant(safe-area-inset-bottom);
 
   /* iOS 11.2+ */
-  bottom: env(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
 }
 /* :root {
   --foreground-rgb: 0, 0, 0;

app/layout.js

@@ -74,7 +74,7 @@ export default function RootLayout({ children }) {
         {/* <!-- 在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效； --> */}
         <meta
           name="apple-mobile-web-app-status-bar-style"
-          content="black-translucent"
+          content="#ffffff"
         />
         {/* <!-- apple-touch-startup-image用来配置启动动画 --> */}
         {/* <!-- 这里要注意，这里图片的尺寸要和设备的静态图片显示尺寸完全对应，差一个像素都会导致启动动画无法显示 --> */}

app/login/page.js

@@ -15,7 +15,7 @@ import { useRouter } from "next/navigation";
 import styles from "./index.module.scss";
 import { JSEncrypt } from "jsencrypt";
 import { handleLogin } from "@/store/actions";
-import { saveUserInfo, get } from "@/utils/storeInfo";
+import { saveUserInfo, get, save } from "@/utils/storeInfo";
 import { connect } from "react-redux";
 import { cryptoPassword } from "@/utils/crypto";
 import requireAPI from "@/utils/requireAPI";
@@ -169,7 +169,11 @@ function Login({ handleLogin }) {
       saveUserInfo(data, mobilePhone, regionCode);
       signIn(data);
       handleLogin({ isSignin: true, userToken: data.data.token });
-
+      if(get("firstLogin")==null){
+        save("firstLogin",1)
+      }else{
+        save("firstLogin",0)
+      }
       router.push(
         !data?.data?.is_enabled && type != "password"
           ? "/my/setting/editPassword?is_enabled=" + data?.data?.is_enabled

app/my/page.js

@@ -34,7 +34,7 @@ const My = () => {
     setUserInfo({ ...oldUserInfo, ...data.data,...account.data.account });
   };
   return (
-    <div className={`h-screen p-4 pb-20 bg-no-repeat bg-contain bg-top`}
+    <div className={`p-4 pb-20 bg-no-repeat bg-contain bg-top`}
     style={{backgroundImage:`url(${process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/images/profilebackground.png"})`}}
     >
       <div className="flex justify-end items-center z-10 w-full mb-4">

app/page.js

@@ -18,8 +18,8 @@ import Link from "next/link";
 import requireAPI from "@/utils/requireAPI";
 import Empty from "@/components/Empty";
 import { get } from "@/utils/storeInfo";
-import { useSearchParams } from "next/navigation";
 import StreamerNavigator from "@/components/StreamerNavigator";
+import AddToHome from "@/components/AddToHome";
 const variables = {
   "@active-line-color": "#f00", // 将主题色改为红色
 };
@@ -28,22 +28,15 @@ const tabItems = [
   { key: "follow", title: "关注" },
 ];
 
-// const scrollHeight = 700;
-// const scrollHeight = window.innerHeight-126
 export default function Home() {
   const recommPostRef = useRef();
   const followPostRef = useRef();
-  const searchParams = useSearchParams();
   const swiperRef = useRef(null);
   const [activeIndex, setActiveIndex] = useState(0);
   
+
   const [scrollHeight, setScrollHeight] = useState(0);
-  // 获取屏幕高度
-  // const scrollHeight = 600;
-  useEffect(() => {
-    setScrollHeight(window.innerHeight);
-    // getData(0)
-  }, []);
+  
   const childrenFunc = () => {
     if (!activeIndex) {
       recommPostRef.current?.doRefresh();
@@ -52,10 +45,7 @@ export default function Home() {
     }
   };
   return (
-    <div
-      className="overflow-x-hidden"
-      style={{ maxHeight: `${scrollHeight}px` }}
-    >
+    <div>
       <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
         <Tabs
           activeKey={tabItems[activeIndex].key}
@@ -114,6 +104,7 @@ export default function Home() {
         <FontAwesomeIcon icon={faRefresh} size="xl" />
       </div>
       <StreamerNavigator userId={Number(get("inviter"))} />
+      <AddToHome/>
     </div>
   );
 }
@@ -186,8 +177,8 @@ const RecommPostList = forwardRef(({ scrollHeight }, ref) => {
         ))}
         {commenPostList?.length == 0 && !loading && (
           <div
-            className={`flex flex-col items-center justify-center`}
-            style={{ height: `${scrollHeight}px` }}
+            className={`flex flex-col items-center justify-center h-screen`}
+            // style={{ height: `${scrollHeight}px` }}
           >
             <Empty type="nodata" />
           </div>
@@ -208,8 +199,8 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
   const [ids, setIds] = useState([]);
   useEffect(() => {
     getFollowIds().then((res) => {
-      setIds(res)
-      getFollowPostList(res,0)
+      setIds(res);
+      getFollowPostList(res, 0);
     });
   }, []);
   useImperativeHandle(
@@ -248,7 +239,6 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
     return data;
   };
   const getFollowPostList = async (data, offset) => {
-    
     if (data.data.list.length > 0) {
       //查关注主播展示资料
       const followsResponse = await requireAPI(
@@ -264,7 +254,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);
@@ -275,7 +265,7 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
           position: "top",
         });
       } else {
-        setFollowPostList(old=>[...old,...followsResponse.data.list]);
+        setFollowPostList((old) => [...old, ...followsResponse.data.list]);
       }
     } else {
       setLoading(false);
@@ -302,8 +292,8 @@ const FollowPostList = forwardRef(({ scrollHeight }, ref) => {
         ))}
         {!followPostList?.length && (
           <div
-            className={`flex flex-col items-center justify-center`}
-            style={{ height: `${scrollHeight - 98}px` }}
+            className={`flex flex-col items-center justify-center  h-screen`}
+            // style={{ height: `${scrollHeight - 98}px` }}
           >
             <Empty type="nodata" />
           </div>

app/space/page.js

@@ -130,8 +130,8 @@ export default function Space() {
   }
   return (
     <div
-      className="h-screen overflow-x-hidden"
-      // style={{ maxHeight: `${scrollHeight}px` }}
+      className=""
+      
     >
       <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
         <Tabs
@@ -228,8 +228,8 @@ export default function Space() {
                     </div>
                   ) : (
                     <div
-                      className={`flex flex-col items-center justify-center`}
-                      style={{ height: `${scrollHeight}px` }}
+                      className={`flex flex-col items-center justify-center h-screen`}
+                      // style={{ height: `${scrollHeight}px` }}
                     >
                       <Empty type="nospace" />
                       <div className="flex flex-col mt-6">
@@ -251,8 +251,8 @@ export default function Space() {
                 </>
               ) : (
                 <div
-                  className="w-full text-center flex items-center justify-center"
-                  style={{ height: scrollHeight - 60 + "px" }}
+                  className="w-full text-center flex items-center justify-center  h-screen"
+                  // style={{ height: scrollHeight - 60 + "px" }}
                 >
                   <SpinLoading />
                 </div>

components/AddToHome/index.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React,{useState,useEffect} from "react";
+import { Image ,Toast} from "antd-mobile";
+import { get,save } from "@/utils/storeInfo";
+export default function AddToHome() {
+  const [firstLogin, setFirstLogin] = useState("0");
+  useEffect(() => {
+    if(!(("standalone" in window.navigator) && window.navigator.standalone)
+    ){
+      setFirstLogin(get("firstLogin"))
+    }
+
+  }, []);
+  return (
+    firstLogin=="1"?<div
+      className="fixed top-0 z-[999] flex flex-col justify-end items-center h-screen w-screen bg-[#262626b0]"
+      onClick={() => {save("firstLogin", 0);setFirstLogin("0")}}
+    >
+      <div className="font-bold text-xl mb-2 flex items-center">
+        点击
+        <Image
+          fit="cover"
+          // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+          src={"/icons/ios_share.png"}
+          placeholder=""
+          width={32}
+          height={32}
+        />
+        添加到主屏幕
+      </div>
+      <Image
+        fit="cover"
+        // src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL+"/icons/nodata.png"}
+        src={"/images/addToHome.png"}
+        placeholder=""
+        width={54}
+        height={54}
+      />
+    </div>:null
+  );
+}

components/Photos/index.js

@@ -101,7 +101,7 @@ export default function Photos({
       title: "",
       content: (
         <div className="h-screen flex justify-center items-center">
-          <div className="flex flex-col gap-2 -mt-12">
+          <div className="flex flex-col gap-2 -mt-24">
             <div className="flex w-full justify-end">
               <div
                 className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"

utils/requireAPI.js

@@ -24,7 +24,7 @@ export default function customFetch(method, url, options = {}, needMid) {
     newBody.mid = mid;
   }
   const body = JSON.stringify({ ...base, ...newBody });
-  console.log("newBody", body,url);
+  // console.log("newBody", body,url);
 
   // 合并选项
   const mergedOptions = { ...defaultOptions, body };