eric/gitlab-instance-0a899031_nomadvip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-27 19:35:39 -05:00
parent e1ed5a56dc
commit b099437738
7 changed files with 125 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/HomeClient.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { HomePageSkeleton } from "@/app/components/HomePageSkeleton";
import { triggerPay } from "@/app/lib/triggerPay";
import { getPayEnv, getDeviceFromEnv } from "@/app/lib/payEnv";
import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";
@@ -753,7 +754,7 @@ export default function HomeClient() {
/>
</>
) : (
<div className="min-h-screen bg-[var(--background)]" aria-hidden />
<HomePageSkeleton variant="main" />
)}
</VipLayout>
</>

5
app/HomeClientLoader.tsx
View File

@@ -1,12 +1,11 @@
"use client";
import dynamic from "next/dynamic";
import { HomePageSkeleton } from "./components/HomePageSkeleton";
const HomeClient = dynamic(() => import("./HomeClient"), {
ssr: false,
loading: () => (
<div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]" aria-hidden />
),
loading: () => <HomePageSkeleton />,
});
export function HomeClientLoader() {

63
app/components/HomePageSkeleton.tsx Normal file
View File

@@ -0,0 +1,63 @@
function SkeletonBlocks() {
return (
<div className="space-y-6">
<div className="mx-auto h-9 max-w-lg rounded-lg bg-[var(--muted)] animate-pulse" />
<div className="mx-auto h-[min(40vh,280px)] w-full max-w-3xl rounded-2xl bg-[var(--muted)]/70 animate-pulse" />
<div className="flex flex-wrap justify-center gap-3">
<div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
<div className="h-12 w-40 rounded-xl bg-[var(--muted)] animate-pulse" />
</div>
<div className="mx-auto mt-8 max-w-2xl space-y-3">
<div className="h-4 w-full rounded bg-[var(--muted)] animate-pulse" />
<div className="h-4 w-[90%] rounded bg-[var(--muted)] animate-pulse" />
<div className="h-4 w-[75%] rounded bg-[var(--muted)] animate-pulse" />
</div>
</div>
);
}
type HomePageSkeletonProps = {
className?: string;
/** full：整页含顶栏；main：仅主内容区（已包在 VipLayout 内时用） */
variant?: "full" | "main";
};
/**
* 首页骨架（Server/Client 均可引用），保证首屏 HTML 即有可见结构，避免白屏。
*/
export function HomePageSkeleton({
className = "",
variant = "full",
}: HomePageSkeletonProps) {
const main = (
<main className="mx-auto w-full max-w-[1200px] flex-1 px-4 py-8 sm:px-6">
<SkeletonBlocks />
</main>
);
if (variant === "main") {
return (
<div
className={`min-h-[50vh] bg-[var(--background)] text-[var(--foreground)] ${className}`}
aria-busy="true"
aria-label="页面加载中"
>
{main}
</div>
);
}
return (
<div
className={`flex min-h-screen flex-col bg-[var(--background)] text-[var(--foreground)] ${className}`}
aria-busy="true"
aria-label="页面加载中"
>
<header className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3 sm:px-6">
<div className="h-7 w-28 rounded-md bg-[var(--muted)] animate-pulse" />
<div className="h-9 w-24 rounded-lg bg-[var(--muted)] animate-pulse" />
</header>
{main}
</div>
);
}

12
app/https-upgrade.ts Normal file
View File

@@ -0,0 +1,12 @@
/**
* 微信等环境可能以 http 打开 vip 域名，导致 Cookie/支付与 https 不一致。
* 在任意 JS 执行前立即跳转到 https（middleware 之外的兜底）。
*/
export const httpsUpgradeScript = `
(function(){
var h=location.hostname;
if(h!=="vip.hackrobot.cn"&&h!=="www.vip.hackrobot.cn")return;
if(location.protocol!=="http:")return;
location.replace("https://"+h+location.pathname+location.search+location.hash);
})();
`;

2
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import { ThemeProvider } from "./providers/ThemeProvider";
import { httpsUpgradeScript } from "./https-upgrade";
import { themeInitScript } from "./theme-init";
export const metadata: Metadata = {
@@ -16,6 +17,7 @@ export default function RootLayout({
return (
<html lang="zh-CN" suppressHydrationWarning>
<body className="antialiased">
<script dangerouslySetInnerHTML={{ __html: httpsUpgradeScript }} />
<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
<ThemeProvider>{children}</ThemeProvider>
</body>

13
app/page.tsx
View File

@@ -1,5 +1,16 @@
import { HomePageSkeleton } from "./components/HomePageSkeleton";
import { HomeClientLoader } from "./HomeClientLoader";
export default function Page() {
return <HomeClientLoader />;
return (
<div className="relative min-h-screen bg-[var(--background)]">
{/* SSR 即输出骨架，JS 未执行前也不白屏 */}
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
<HomePageSkeleton />
</div>
<div className="relative z-[1] min-h-screen">
<HomeClientLoader />
</div>
</div>
);
}

32
middleware.ts Normal file
View File

@@ -0,0 +1,32 @@
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
/** 生产域名：微信内访问无协议或 http 时常异常，统一 308 到 HTTPS */
const FORCE_HTTPS_HOSTS = new Set(["vip.hackrobot.cn", "www.vip.hackrobot.cn"]);
export function middleware(request: NextRequest) {
const rawHost = request.headers.get("host");
const host = rawHost?.split(":")[0]?.toLowerCase() ?? "";
if (!host || !FORCE_HTTPS_HOSTS.has(host)) {
return NextResponse.next();
}
const forwarded = request.headers.get("x-forwarded-proto");
const proto = forwarded?.split(",")[0]?.trim().toLowerCase();
const url = request.nextUrl.clone();
const isHttp =
proto === "http" ||
(proto === undefined && url.protocol === "http:");
if (isHttp) {
url.protocol = "https:";
return NextResponse.redirect(url, 308);
}
return NextResponse.next();
}
export const config = {
matcher: ["/:path*"],
};