fix: 一些样式错误

longsizhuo · longsizhuo · commit dd7f6c47840c · 2026-04-18T06:24:55.000+08:00
diff --git a/app/components/GiscusComments.tsx b/app/components/GiscusComments.tsx
@@ -13,11 +13,21 @@ export function GiscusComments({ className, docId }: GiscusCommentsProps) {
   const { theme } = useTheme();
   const normalizedDocId = typeof docId === "string" ? docId.trim() : "";
   const useSpecificMapping = normalizedDocId.length > 0;
+  // mounted 门槛：SSR 阶段 ThemeProvider 的 useState 初值是 defaultTheme("dark")，
+  // 和客户端 hydrate 后从 localStorage 读到的真实主题可能不同。
+  // 如果这里直接渲染 Giscus，iframe 会以 SSR 的错主题加载；之后即使 key 变化触发
+  // remount，@giscus/react 的 iframe 也可能残留旧 theme。延迟到 mount 后再渲染，
+  // 用的就是客户端已经对齐过 localStorage 的主题。
+  const [mounted, setMounted] = useState(false);
   const [isSystemDark, setIsSystemDark] = useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   });
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     if (theme !== "system" || typeof window === "undefined") return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
@@ -34,6 +44,11 @@ export function GiscusComments({ className, docId }: GiscusCommentsProps) {
     return theme === "dark" ? "dark" : "light";
   }, [isSystemDark, theme]);
 
+  if (!mounted) {
+    // 占位 div 保持布局稳定，避免 mount 前后文档滚动位置跳动
+    return <div className={className} aria-hidden />;
+  }
+
   return (
     <div className={className}>
       <Giscus
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ThemeToggle } from "./ThemeToggle";
+import { LocaleToggle } from "./LocaleToggle";
 import { Button } from "@/components/ui/button";
 import { MessageCircle } from "lucide-react";
 import { Github as GithubIcon } from "./icons/Github";
@@ -29,7 +30,7 @@ export async function Header() {
           </div>
         </div>
 
-        <div className="flex items-center justify-between h-10">
+        <div className="flex items-center justify-end md:justify-between h-10">
           <nav className="hidden md:flex items-center gap-8 font-sans text-xs font-bold uppercase tracking-widest text-[var(--foreground)]">
             <Link
               href="/docs"
@@ -106,6 +107,7 @@ export async function Header() {
                 <MessageCircle className="h-4 w-4" />
               </a>
             </Button>
+            <LocaleToggle />
             <ThemeToggle />
             <AuthNav />
           </div>
diff --git a/app/components/LocaleToggle.tsx b/app/components/LocaleToggle.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * Header 里的语言切换按钮（匿名也能用）。
+ *
+ * 为什么要做：
+ *   之前切语言的唯一入口在 /settings 页面，UserMenu 里只有登录用户能看到。
+ *   访客看到的永远是默认 zh，站点对英语用户非常不友好。
+ *
+ * 实现：
+ *   - 写 locale=zh|en 到 document.cookie（path=/，一年有效期，samesite=lax）
+ *     字段和格式与 SettingsForm 完全一致，登录用户在设置页改的偏好仍然生效
+ *   - 切完 router.refresh() 让 SSR 重新渲染，server component（Hero / docs
+ *     详情页等）从 cookie 读新 locale 切文案
+ *   - 简单的 ZH / EN 双字母展示，当前语言高亮；button 尺寸与 ThemeToggle 对齐
+ */
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+
+type Locale = "zh" | "en";
+
+function readLocaleCookie(): Locale {
+  if (typeof document === "undefined") return "zh";
+  const m = document.cookie.match(/(?:^|;\s*)locale=([^;]+)/);
+  const v = m?.[1];
+  return v === "en" ? "en" : "zh";
+}
+
+function writeLocaleCookie(next: Locale) {
+  // 一年；samesite=lax 够用（这个 cookie 不涉及跨站 POST）
+  document.cookie = `locale=${next};path=/;max-age=${60 * 60 * 24 * 365};samesite=lax`;
+}
+
+export function LocaleToggle() {
+  const router = useRouter();
+  // 初始 render 先给默认值避免 hydration 不一致，真实值由 useEffect 读 cookie 后覆盖
+  const [locale, setLocale] = useState<Locale>("zh");
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    setLocale(readLocaleCookie());
+    setReady(true);
+  }, []);
+
+  const toggle = () => {
+    const next: Locale = locale === "zh" ? "en" : "zh";
+    writeLocaleCookie(next);
+    setLocale(next);
+    // 刷新 server component 树，重新按 cookie 渲染各页面
+    router.refresh();
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={toggle}
+      aria-label="Toggle language"
+      title={locale === "zh" ? "切换为 English" : "Switch to 中文"}
+      className="h-10 px-2 rounded-none font-mono text-xs uppercase tracking-widest transition-colors"
+      data-umami-event="locale_toggle"
+      data-umami-event-locale={locale === "zh" ? "en" : "zh"}
+    >
+      <span className={ready && locale === "zh" ? "font-bold" : "opacity-50"}>
+        ZH
+      </span>
+      <span className="opacity-30 mx-0.5">/</span>
+      <span className={ready && locale === "en" ? "font-bold" : "opacity-50"}>
+        EN
+      </span>
+    </Button>
+  );
+}
diff --git a/app/components/SidebarThemeToggle.tsx b/app/components/SidebarThemeToggle.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+/**
+ * Fumadocs sidebar 底部用的 ThemeToggle。
+ *
+ * 视觉复刻 fumadocs-ui 内置 ThemeToggle（圆形 border + sun/moon 居中高亮），
+ * 但 onClick 走自己的 ThemeProvider（layout.tsx 里禁用了 fumadocs 的 next-themes，
+ * 内置按钮点击无效；这里直接 setTheme 到自建 ThemeProvider 即可）。
+ */
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "./ThemeProvider";
+import { cn } from "@/lib/utils";
+
+export function SidebarThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // 把 "system" 折算成实际显示主题，决定哪个 icon 高亮
+  const resolved = (() => {
+    if (!mounted) return null;
+    if (theme === "system") {
+      return typeof window !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+    return theme === "dark" ? "dark" : "light";
+  })();
+
+  return (
+    <button
+      type="button"
+      aria-label="Toggle Theme"
+      data-theme-toggle=""
+      className="inline-flex items-center rounded-full border p-1"
+      onClick={() => {
+        const next = resolved === "light" ? "dark" : "light";
+        setTheme(next);
+        if (typeof window !== "undefined" && window.umami) {
+          window.umami.track("theme_toggle", { theme: next });
+        }
+      }}
+    >
+      <Sun
+        fill="currentColor"
+        className={cn(
+          "size-6.5 rounded-full p-1.5",
+          resolved === "light"
+            ? "bg-fd-accent text-fd-accent-foreground"
+            : "text-fd-muted-foreground",
+        )}
+      />
+      <Moon
+        fill="currentColor"
+        className={cn(
+          "size-6.5 rounded-full p-1.5",
+          resolved === "dark"
+            ? "bg-fd-accent text-fd-accent-foreground"
+            : "text-fd-muted-foreground",
+        )}
+      />
+    </button>
+  );
+}
diff --git a/lib/layout.shared.tsx b/lib/layout.shared.tsx
@@ -1,15 +1,30 @@
 import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 import { AuthNav } from "@/app/components/AuthNav";
+import { LocaleToggle } from "@/app/components/LocaleToggle";
+import { SidebarThemeToggle } from "@/app/components/SidebarThemeToggle";
 
 export async function baseOptions(): Promise<BaseLayoutProps> {
   return {
     nav: {
       title: "内卷地狱",
       children: (
+        // 只放登录入口；语言切换挪到 sidebar 底部与主题按钮同排，见下方 themeSwitch
         <div className="ms-auto flex items-center gap-2 pr-3">
           <AuthNav />
         </div>
       ),
     },
+    // Fumadocs sidebar 底部的主题切换槽。
+    // 内置按钮走 next-themes，但根 layout 里传的是 theme={{ enabled: false }}
+    // （避免和自建 ThemeProvider 同时写 <html class> 导致闪烁），内置按钮于是点不动。
+    // 这里替换为自己的 LocaleToggle + ThemeToggle，挂在自建 ThemeProvider 上。
+    themeSwitch: {
+      component: (
+        <div className="ms-auto flex items-center gap-1">
+          <LocaleToggle />
+          <SidebarThemeToggle />
+        </div>
+      ),
+    },
   };
 }
