112 lines
4.0 KiB
React
112 lines
4.0 KiB
React
|
"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">
|
|||
|
|
请等待安装完成，然后开始设置
|
|||
|
|
</p>
|
|||
|
|
<p className="text-white text-center font-medium text-sm">
|
|||
|
|
若安装后无法正常使用，请删除旧版APP
|
|||
|
|
</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>
|
|||
|
|
);
|
|||
|
|
}
|