ios增加web版入口

app/page.jsx

@@ -3,8 +3,8 @@
 import React, { useState, useEffect } from "react";
 import InOtherApp from "@/components/InOtherApp";
 import Footer from "@/components/Footer";
-import Link from "next/link";
 import IosInstallStepModal from "@/components/IosInstallStepModal/page";
+import { getCookie } from "cookies-next";
 
 export default function Home() {
   const [deviceType, setDeviceType] = useState("");
@@ -154,7 +154,7 @@ export default function Home() {
             <p className="mt-3 text-white text-sm font-normal">手机扫码下载</p>
           )}
         </div>
-        <div className="flex flex-col items-center">
+        <div className="flex flex-col items-center gap-2">
           {deviceType !== "pc" && (
             <div
               className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
@@ -173,16 +173,17 @@ export default function Home() {
               安装
             </div>
           )}
-          {deviceType !== "Android" && (
-            <p className="mt-3 text-white text-sm font-normal">
-              安装前请卸载旧版本，详情请
-              <Link
-                className="link text-primary cursor-pointer"
-                href="/doc/ioshowtoinstall"
+          {deviceType === "ios" && (
+            <div
+              className="btn bg-[#FFFFFF1A] rounded-full text-white text-lg font-medium w-64 h-14"
+              onClick={() => {
+                const inviter = getCookie("inviter");
+                const url = `https://app.tiefen.fun?inviter=${inviter}`;
+                window.location.href = url;
+              }}
             >
-                查看帮助
-              </Link>
-            </p>
+              手机网页版
+            </div>
           )}
         </div>
       </div>

app/zone/[user_id]/page.jsx

@@ -11,6 +11,20 @@ import { useRouter } from "next/navigation";
 
 export default function Zone({ params }) {
   const router = useRouter();
+
+  const [deviceType, setDeviceType] = useState("");
+  useEffect(() => {
+    const userAgent = navigator.userAgent;
+    //区分设备类型
+    if (/Android/i.test(userAgent)) {
+      setDeviceType("Android");
+    } else if (/iPhone|iPad|iPod/i.test(userAgent)) {
+      setDeviceType("ios");
+    } else {
+      setDeviceType("pc");
+    }
+  }, []);
+
   //页面数据
   const [data, setData] = useState({});
   useEffect(() => {
@@ -53,10 +67,27 @@ export default function Zone({ params }) {
     copy(
       `【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/zone/${data?.streamer_ext?.user_id}`
     );
-    Modal.alert({
+    Modal.show(
+      deviceType === "ios"
+        ? {
             showCloseButton: true,
-      confirmText: "前往下载",
-      onConfirm: () => router.push("/"),
+            closeOnAction: true,
+            actions: [
+              {
+                key: "download",
+                text: "前往下载",
+                primary: true,
+                onClick: () => router.push("/"),
+              },
+              {
+                key: "web",
+                text: "手机网页版",
+                onClick: () =>
+                  router.push(
+                    `https://app.tiefen.fun?inviter=${data?.streamer_ext?.user_id}`
+                  ),
+              },
+            ],
             content: (
               <div className="p-2">
                 <p className="text-white text-base font-medium">
@@ -64,7 +95,27 @@ export default function Zone({ params }) {
                 </p>
               </div>
             ),
-    });
+          }
+        : {
+            showCloseButton: true,
+            closeOnAction: true,
+            actions: [
+              {
+                key: "download",
+                text: "前往下载",
+                primary: true,
+                onClick: () => router.push("/"),
+              },
+            ],
+            content: (
+              <div className="p-2">
+                <p className="text-white text-base font-medium">
+                  {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
+                </p>
+              </div>
+            ),
+          }
+    );
   };
 
   return (

components/IosInstallStepModal/page.jsx

@@ -50,10 +50,10 @@ export default function IosInstallStepModal({ isVisible, setIsVisible }) {
           </svg>
           <div className="flex flex-col gap-1 mb-4">
             <p className="text-white text-center font-medium text-sm">
-              请等待安装完成，然后开始设置
+              安装前请先删除旧版APP
             </p>
             <p className="text-white text-center font-medium text-sm">
-              若安装后无法正常使用，请删除旧版APP
+              请等待安装完成，然后开始设置
             </p>
             <p className="text-white text-center font-medium text-sm">
               请务必按以下步骤进行设置，详细