Before пре 1 година
родитељ
комит
719f6e8e6c

+ 5 - 3
src/app/[locale]/layout.tsx

@@ -27,11 +27,13 @@ export default async function LocaleLayout({
 }) {
     const messages = await getMessages();
     return (
-        <html lang={locale} suppressHydrationWarning>
+        <html lang={locale} suppressHydrationWarning style={{ fontSize: "12px" }}>
             <body className={clsx("font-sans", fontSans.variable)}>
                 <NextIntlClientProvider messages={messages}>
-                    <Providers themeProps={{ defaultTheme: "light", attribute: "class" }}>
-                        <PageTransitionEffect>{children}</PageTransitionEffect>
+                    <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
+                        <PageTransitionEffect>
+                            <main className={"h-[100vh]"}>{children}</main>
+                        </PageTransitionEffect>
                     </Providers>
                 </NextIntlClientProvider>
             </body>

+ 5 - 14
src/app/[locale]/page.tsx

@@ -1,24 +1,15 @@
-"use client";
-import { useRouter } from "@/i18n";
 import { LocalPropsWithChildren } from "@/types";
-import { Button } from "@nextui-org/button";
+import { Button, Input } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { FC } from "react";
 
 const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
-    const router = useRouter();
-    const handler = () => {
-        router.push("/home");
-    };
+
     return (
-        <div>
-            hello React
-            <Link href="/home">跳转</Link>
-            <Button color={"primary"} onClick={handler}>
-                {t("title")}
-            </Button>
+        <div className="2xl:boder-origin-900 container border-4 border-blue-800 sm:border-red-900 md:border-green-900 lg:border-[#666] xl:border-[#fff]">
+            <Button color={"primary"}>click me</Button>
+            <Input label="Email" />
         </div>
     );
 };

+ 24 - 15
src/components/PageTransitionEffect/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { usePathname } from "@/i18n";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { ReactNode, useContext, useRef } from "react";
+import { usePathname } from "next/navigation";
+import { ReactNode, useContext, useEffect, useRef } from "react";
 
 // FrozenRouter 组件,保持页面切换过程中上下文的持久化
 function FrozenRouter(props: { children: ReactNode }) {
@@ -25,20 +25,29 @@ const variants = {
 const PageTransitionEffect = ({ children }: { children: ReactNode }) => {
     // 使用 usePathname 钩子获取路径名作为 key,以在路由更改时触发重新渲染
     const key = usePathname();
-    console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 28`, key);
+
+    useEffect(() => {
+        let width = document.documentElement.clientWidth;
+        let font = 1440 / 10 + "px";
+        // document.documentElement.style.fontSize = font;
+
+        console.log(`🎯🎯🎯🎯🎯-> in layout.tsx on 31`, font);
+    }, []);
+
     return (
         <AnimatePresence mode="popLayout">
-            <motion.div
-                key={key}
-                initial="hidden"
-                animate="enter"
-                exit="exit"
-                transition={{ type: "linear" }}
-                className="overflow-hidden"
-            >
-                {/*<FrozenRouter></FrozenRouter>*/}
-                {children}
-            </motion.div>
+            {/*<motion.div*/}
+            {/*    key={key}*/}
+            {/*    initial="hidden"*/}
+            {/*    animate="enter"*/}
+            {/*    exit="exit"*/}
+            {/*    variants={variants}*/}
+            {/*    transition={{ type: "linear" }}*/}
+            {/*    className="overflow-hidden"*/}
+            {/*>*/}
+            {/*    <FrozenRouter>{children}</FrozenRouter>*/}
+            {/*</motion.div>*/}
+            {children}
         </AnimatePresence>
     );
 };

+ 13 - 7
tailwind.config.ts

@@ -8,12 +8,6 @@ const config: Config = {
         "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
-        screens: {
-            sm: "480px",
-            md: "768px",
-            lg: "976px",
-            xl: "1440px",
-        },
         extend: {
             backgroundImage: {
                 "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
@@ -24,8 +18,20 @@ const config: Config = {
     },
     plugins: [
         nextui({
+            layout: {
+                fontSize: {
+                    // tiny: "10px", // text-tiny
+                    // small: "12px", // text-small
+                    // medium: "14px", // text-medium
+                    // large: "16px", // text-large
+                },
+            },
             themes: {
-                dark: {},
+                dark: {
+                    colors: {
+                        primary: "#ff6a01",
+                    },
+                },
                 light: {},
             },
         }),