112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
"use client";
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
import { Mask } from "antd-mobile";
|
||
import Link from "next/link";
|
||
|
||
export default function IosInstallStepModal({ isVisible, setIsVisible }) {
|
||
const [stepIndex, setStepIndex] = useState(1);
|
||
useEffect(() => {
|
||
if (!isVisible) {
|
||
setStepIndex(1);
|
||
return;
|
||
}
|
||
const timeoutId = setTimeout(
|
||
() =>
|
||
setStepIndex((prev) => {
|
||
if (prev === 6) return 1;
|
||
return prev + 1;
|
||
}),
|
||
3000
|
||
);
|
||
return () => {
|
||
clearTimeout(timeoutId);
|
||
};
|
||
}, [isVisible, stepIndex]);
|
||
|
||
return (
|
||
<Mask
|
||
visible={isVisible}
|
||
onMaskClick={() => setIsVisible(false)}
|
||
opacity="thick"
|
||
>
|
||
<div className="w-full h-screen flex justify-center items-center">
|
||
<div className="flex flex-col relative items-center py-8 px-4 bg-[#17161A] rounded-2xl w-4/5">
|
||
<svg
|
||
onClick={() => setIsVisible(!isVisible)}
|
||
className="absolute right-4 top-4"
|
||
viewBox="0 0 1024 1024"
|
||
width="20"
|
||
height="20"
|
||
>
|
||
<path
|
||
d="M155.00305177 868.99694823c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112l631.60998534-631.60998534c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0s21.96904297 60.41486817 0 82.38391112l-631.60998534 631.60998534c-21.96904297 21.96904297-60.41486817 21.96904297-82.38391112 0z"
|
||
fill="#ffffff"
|
||
></path>
|
||
<path
|
||
d="M155.00305177 155.00305177c21.96904297-21.96904297 60.41486817-21.96904297 82.38391112 0l631.60998534 631.60998534c21.96904297 21.96904297 21.96904297 60.41486817 0 82.38391112s-60.41486817 21.96904297-82.38391112 0l-631.60998534-631.60998534c-21.96904297-21.96904297-21.96904297-60.41486817 0-82.38391112z"
|
||
fill="#ffffff"
|
||
></path>
|
||
</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">
|
||
请等待安装完成，然后开始设置
|
||
</p>
|
||
<p className="text-white text-center font-medium text-sm">
|
||
请务必按以下步骤进行设置，详细
|
||
<Link
|
||
className="link text-primary cursor-pointer"
|
||
href="/doc/ioshowtoinstall"
|
||
>
|
||
安装教程
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
<img
|
||
src={
|
||
process.env.NEXT_PUBLIC_CDN_URL +
|
||
`/public/images/iosinstall_${stepIndex}.png`
|
||
}
|
||
alt=""
|
||
/>
|
||
<div className="mt-4 flex w-full h-12 rounded-full items-center justify-center bg-primary">
|
||
{stepIndex === 1 && (
|
||
<p className="text-base font-medium text-white">
|
||
第1步：打开【设置】
|
||
</p>
|
||
)}
|
||
{stepIndex === 2 && (
|
||
<p className="text-base font-medium text-white">
|
||
第2步：点击【通用】
|
||
</p>
|
||
)}
|
||
{stepIndex === 3 && (
|
||
<p className="text-base font-medium text-white">
|
||
第3步：点击【VPN与设备管理】
|
||
</p>
|
||
)}
|
||
{stepIndex === 4 && (
|
||
<p className="text-base font-medium text-white">
|
||
第4步：点击【证书】
|
||
</p>
|
||
)}
|
||
{stepIndex === 5 && (
|
||
<p className="text-base font-medium text-white">
|
||
第5步：点击【信任证书】
|
||
</p>
|
||
)}
|
||
{stepIndex === 6 && (
|
||
<p className="text-base font-medium text-white">
|
||
第6步：在弹出页点击【信任】
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Mask>
|
||
);
|
||
}
|