From b02e995a99d21b4a64eaf74ff1353bafc7112f2b Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Thu, 26 Sep 2024 12:26:39 +0800 Subject: [PATCH] fix: error layout --- app/[locale]/(main)/header.tsx | 6 ++- app/[locale]/(main)/layout.tsx | 32 ++++++++++++++- app/[locale]/layout.tsx | 55 ++++++++++++++++++++++--- app/layout.tsx | 61 ---------------------------- components/LanguageSwitcher.tsx | 71 +++++++++++++++++++++++++++++++++ 5 files changed, 157 insertions(+), 68 deletions(-) delete mode 100644 app/layout.tsx create mode 100644 components/LanguageSwitcher.tsx diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx index 88ad997..53a5a0e 100644 --- a/app/[locale]/(main)/header.tsx +++ b/app/[locale]/(main)/header.tsx @@ -6,6 +6,7 @@ import Image from "next/image"; import { Separator } from "../../../components/ui/separator"; import { DateTime } from "luxon"; import { ModeToggle } from "../../../components/ThemeSwitcher"; +import { LanguageSwitcher } from "@/components/LanguageSwitcher"; function Header() { const t = useTranslations("Header"); return ( @@ -31,7 +32,10 @@ function Header() { {t("p_1079-1199_Simpleandbeautifuldashbo")}

- +
+ + +
diff --git a/app/[locale]/(main)/layout.tsx b/app/[locale]/(main)/layout.tsx index ed20e30..15a5617 100644 --- a/app/[locale]/(main)/layout.tsx +++ b/app/[locale]/(main)/layout.tsx @@ -1,7 +1,37 @@ -import { useTranslations } from "next-intl"; + import React from "react"; import Header from "@/app/[locale]/(main)/header"; import Footer from "./footer"; +import type { Metadata } from "next"; +import { Inter as FontSans } from "next/font/google"; +import { ThemeProvider } from "next-themes"; +import { Viewport } from "next"; +import { cn } from "@/lib/utils"; +import { PublicEnvScript } from "next-runtime-env"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export const metadata: Metadata = { + manifest: "/manifest.json", + title: "NezhaDash", + description: "A dashboard for nezha", + appleWebApp: { + capable: true, + title: "NezhaDash", + statusBarStyle: "black-translucent", + }, +}; + +export const viewport: Viewport = { + width: "device-width", + initialScale: 1, + maximumScale: 1, + userScalable: false, +}; + type DashboardProps = { children: React.ReactNode; }; diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index fd67dbc..d83f8e4 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -1,7 +1,37 @@ // @auto-i18n-check. Please do not delete the line. +import "@/styles/globals.css"; import React from "react"; import { NextIntlClientProvider, useMessages } from "next-intl"; +import { PublicEnvScript } from "next-runtime-env"; +import type { Metadata } from "next"; +import { Inter as FontSans } from "next/font/google"; +import { ThemeProvider } from "next-themes"; +import { Viewport } from "next"; +import { cn } from "@/lib/utils"; + +const fontSans = FontSans({ + subsets: ["latin"], + variable: "--font-sans", +}); + +export const metadata: Metadata = { + manifest: "/manifest.json", + title: "NezhaDash", + description: "A dashboard for nezha", + appleWebApp: { + capable: true, + title: "NezhaDash", + statusBarStyle: "black-translucent", + }, +}; + +export const viewport: Viewport = { + width: "device-width", + initialScale: 1, + maximumScale: 1, + userScalable: false, +}; export default function LocaleLayout({ children, @@ -12,11 +42,26 @@ export default function LocaleLayout({ }) { const messages = useMessages(); return ( - - - - {children} - + + + + + + + + {children} + + ); diff --git a/app/layout.tsx b/app/layout.tsx deleted file mode 100644 index f9e8355..0000000 --- a/app/layout.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import "@/styles/globals.css"; - -import type { Metadata } from "next"; -import { Inter as FontSans } from "next/font/google"; -import { ThemeProvider } from "next-themes"; -import React from "react"; -import { Viewport } from "next"; -import { cn } from "@/lib/utils"; -import { PublicEnvScript } from "next-runtime-env"; - -const fontSans = FontSans({ - subsets: ["latin"], - variable: "--font-sans", -}); - -export const metadata: Metadata = { - manifest: "/manifest.json", - title: "NezhaDash", - description: "A dashboard for nezha", - appleWebApp: { - capable: true, - title: "NezhaDash", - statusBarStyle: "black-translucent", - }, -}; - -export const viewport: Viewport = { - width: "device-width", - initialScale: 1, - maximumScale: 1, - userScalable: false, -}; - -interface RootLayoutProps { - children: React.ReactNode; -} - -export default function RootLayout({ children }: RootLayoutProps) { - return ( - - - - - - - {children} - - - - ); -} diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx new file mode 100644 index 0000000..f762c66 --- /dev/null +++ b/components/LanguageSwitcher.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { useLocale } from "next-intl"; +import { localeItems } from "../i18n-metadata"; +import { useRouter, usePathname } from "next/navigation"; +import * as React from "react"; + +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export function LanguageSwitcher() { + const locale = useLocale(); + const router = useRouter(); + const pathname = usePathname(); + + const handleChange = (code: string) => { + const newLocale = code; + + const rootPath = "/"; + const currentLocalePath = `/${locale}`; + const newLocalePath = `/${newLocale}`; + + // Function to construct new path with locale prefix + const constructLocalePath = (path: string, newLocale: string) => { + if (path.startsWith(currentLocalePath)) { + return path.replace(currentLocalePath, `/${newLocale}`); + } else { + return `/${newLocale}${path}`; + } + }; + + if (pathname === rootPath || !pathname) { + router.push(newLocalePath); + } else if ( + pathname === currentLocalePath || + pathname === `${currentLocalePath}/` + ) { + router.push(newLocalePath); + } else { + const newPath = constructLocalePath(pathname, newLocale); + router.push(newPath); + } + router.refresh(); + }; + + return ( + + + + + + {localeItems.map((item) => ( + handleChange(item.code)} + > + {item.name} + + ))} + + + ); +}