feat: onboarding tunnel step UX improvements

- Rename "Skip" to "Next" / "跳过" to "下一步" across all locales
- Show loading spinner only when auto-redirecting (localhost), hide it otherwise
- Replace plain tunnel URL text with a clickable link
- Remove redundant duplicate anchor in non-localhost done/dns_wait phase
This commit is contained in:
haorwen
2026-06-22 10:41:53 +08:00
parent ff03844603
commit 4c2500144a
10 changed files with 34 additions and 42 deletions
@@ -195,28 +195,25 @@ export default function GetPublicDomain() {
if (phase === "done" && tunnelUrl) {
return (
<div className="flex-center flex-col h-full text-center gap-6 dark:text-gray-100 px-4 md:max-w-md m-auto">
<div className="w-10 h-10 border-4 border-green-400 border-t-transparent rounded-full animate-spin" />
<span className="font-mono text-sm break-all text-green-600 dark:text-green-400">
{isLocalhost && (
<div className="w-10 h-10 border-4 border-green-400 border-t-transparent rounded-full animate-spin" />
)}
<a
href={tunnelUrl}
target="_blank"
rel="noopener noreferrer"
className="font-mono text-sm break-all text-green-600 dark:text-green-400 underline"
>
{tunnelUrl}
</span>
</a>
{isLocalhost ? (
<span className="text-lg font-semibold">
{t("tunnel_redirect_countdown", { seconds: countdown })}
</span>
) : (
<div className="flex flex-col items-center gap-3">
<a
href={tunnelUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 underline text-sm"
>
{tunnelUrl}
</a>
<StyledButton className="w-32 h-11" onClick={nextStep}>
{t("tunnel_opt_in_skip")}
</StyledButton>
</div>
<StyledButton className="w-32 h-11" onClick={nextStep}>
{t("tunnel_opt_in_skip")}
</StyledButton>
)}
</div>
);
+13 -18
View File
@@ -165,11 +165,18 @@ export default function WelcomePage() {
if (phase === "dns_wait" || phase === "redirecting") {
return (
<div className="flex-center flex-col h-full text-center gap-6 dark:text-gray-100 px-4 md:max-w-md m-auto">
<div className="w-10 h-10 border-4 border-green-400 border-t-transparent rounded-full animate-spin" />
{isLocalhost && (
<div className="w-10 h-10 border-4 border-green-400 border-t-transparent rounded-full animate-spin" />
)}
{tunnelUrl && (
<span className="font-mono text-sm break-all text-green-600 dark:text-green-400">
<a
href={tunnelUrl}
target="_blank"
rel="noopener noreferrer"
className="font-mono text-sm break-all text-green-600 dark:text-green-400 underline"
>
{tunnelUrl}
</span>
</a>
)}
<p className="text-sm text-gray-500 dark:text-gray-400">
{t("tunnel_dns_warning")}
@@ -179,21 +186,9 @@ export default function WelcomePage() {
{t("tunnel_redirect_countdown", { seconds: countdown })}
</span>
) : (
<div className="flex flex-col items-center gap-3">
{tunnelUrl && (
<a
href={tunnelUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 underline text-sm"
>
{tunnelUrl}
</a>
)}
<StyledButton className="w-32 h-11" onClick={nextStep}>
{t("tunnel_opt_in_skip")}
</StyledButton>
</div>
<StyledButton className="w-32 h-11" onClick={nextStep}>
{t("tunnel_opt_in_skip")}
</StyledButton>
)}
</div>
);