From b09943773875c50aea3ff784d765efac3b167655 Mon Sep 17 00:00:00 2001
From: eric <xiaoshuang.eric@gmail.com>
Date: Fri, 27 Mar 2026 19:35:39 -0500
Subject: [PATCH] 's'

---
 app/HomeClient.tsx                  |  3 +-
 app/HomeClientLoader.tsx            |  5 +--
 app/components/HomePageSkeleton.tsx | 63 +++++++++++++++++++++++++++++
 app/https-upgrade.ts                | 12 ++++++
 app/layout.tsx                      |  2 +
 app/page.tsx                        | 13 +++++-
 middleware.ts                       | 32 +++++++++++++++
 7 files changed, 125 insertions(+), 5 deletions(-)
 create mode 100644 app/components/HomePageSkeleton.tsx
 create mode 100644 app/https-upgrade.ts
 create mode 100644 middleware.ts

diff --git a/app/HomeClient.tsx b/app/HomeClient.tsx
index e845f42..b5658a3 100644
--- a/app/HomeClient.tsx
+++ b/app/HomeClient.tsx
@@ -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>
     </>
diff --git a/app/HomeClientLoader.tsx b/app/HomeClientLoader.tsx
index 408e1a2..3d7f80d 100644
--- a/app/HomeClientLoader.tsx
+++ b/app/HomeClientLoader.tsx
@@ -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() {
diff --git a/app/components/HomePageSkeleton.tsx b/app/components/HomePageSkeleton.tsx
new file mode 100644
index 0000000..f6c17b8
--- /dev/null
+++ b/app/components/HomePageSkeleton.tsx
@@ -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>
+  );
+}
diff --git a/app/https-upgrade.ts b/app/https-upgrade.ts
new file mode 100644
index 0000000..9d1180a
--- /dev/null
+++ b/app/https-upgrade.ts
@@ -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);
+})();
+`;
diff --git a/app/layout.tsx b/app/layout.tsx
index 657dd82..b5b9ee4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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>
diff --git a/app/page.tsx b/app/page.tsx
index f788218..7801860 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
+  );
 }
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..b7e72a5
--- /dev/null
+++ b/middleware.ts
@@ -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*"],
+};