feat: 增加layout布局

next.config.mjs

@@ -1,12 +1,14 @@
 /** @type {import('next').NextConfig} */
 import createNextIntlPlugin from  'next-intl/plugin';
-
+import path from 'path';
 const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     reactStrictMode: true,
-    transpilePackages: ['antd']
+    sassOptions: {
+      prependData: `@import "./src/styles/variables.scss";`
+    }
 };
 
 export default withNextIntl(nextConfig);

package.json

@@ -19,7 +19,8 @@
     "next-intl": "^3.17.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.8"
   },
   "devDependencies": {
     "@types/node": "^20.14.10",

pnpm-lock.yaml

@@ -25,10 +25,10 @@ importers:
         version: 11.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next:
         specifier: 14.2.4
-        version: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8)
       next-intl:
         specifier: ^3.17.0
-        version: 3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1)
       next-themes:
         specifier: ^0.3.0
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -38,6 +38,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      sass:
+        specifier: ^1.77.8
+        version: 1.77.8
     devDependencies:
       '@types/node':
         specifier: ^20.14.10
@@ -1235,7 +1238,7 @@ packages:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
   anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==, tarball: https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz}
     engines: {node: '>= 8'}
 
   arg@5.0.2:
@@ -1310,7 +1313,7 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==, tarball: https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz}
     engines: {node: '>=8'}
 
   brace-expansion@1.1.11:
@@ -1320,7 +1323,7 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
   braces@3.0.3:
-    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==, tarball: https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz}
     engines: {node: '>=8'}
 
   busboy@1.6.0:
@@ -1347,7 +1350,7 @@ packages:
     engines: {node: '>=10'}
 
   chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz}
     engines: {node: '>= 8.10.0'}
 
   client-only@0.0.1:
@@ -1662,7 +1665,7 @@ packages:
     engines: {node: ^10.12.0 || >=12.0.0}
 
   fill-range@7.1.1:
-    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==, tarball: https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz}
     engines: {node: '>=8'}
 
   find-up@5.0.0:
@@ -1820,6 +1823,9 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  immutable@4.3.6:
+    resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==, tarball: https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1864,7 +1870,7 @@ packages:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
 
   is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==, tarball: https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz}
     engines: {node: '>=8'}
 
   is-boolean-object@1.1.2:
@@ -1919,7 +1925,7 @@ packages:
     engines: {node: '>= 0.4'}
 
   is-number@7.0.0:
-    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==, tarball: https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz}
     engines: {node: '>=0.12.0'}
 
   is-path-inside@3.0.3:
@@ -2445,7 +2451,7 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
   readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==, tarball: https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz}
     engines: {node: '>=8.10.0'}
 
   reflect.getprototypeof@1.0.6:
@@ -2494,6 +2500,11 @@ packages:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
 
+  sass@1.77.8:
+    resolution: {integrity: sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==, tarball: https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -2649,7 +2660,7 @@ packages:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
   to-regex-range@5.0.1:
-    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==, tarball: https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz}
     engines: {node: '>=8.0'}
 
   ts-api-utils@1.3.0:
@@ -5516,6 +5527,8 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  immutable@4.3.6: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -5791,11 +5804,11 @@ snapshots:
 
   negotiator@0.6.3: {}
 
-  next-intl@3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1):
+  next-intl@3.17.0(next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8))(react@18.3.1):
     dependencies:
       '@formatjs/intl-localematcher': 0.2.32
       negotiator: 0.6.3
-      next: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next: 14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8)
       react: 18.3.1
       use-intl: 3.17.0(react@18.3.1)
 
@@ -5804,7 +5817,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next@14.2.4(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.8):
     dependencies:
       '@next/env': 14.2.4
       '@swc/helpers': 0.5.5
@@ -5826,6 +5839,7 @@ snapshots:
       '@next/swc-win32-ia32-msvc': 14.2.4
       '@next/swc-win32-x64-msvc': 14.2.4
       '@opentelemetry/api': 1.9.0
+      sass: 1.77.8
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -6120,6 +6134,12 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.1.4
 
+  sass@1.77.8:
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.6
+      source-map-js: 1.2.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0

src/app/[locale]/layout.tsx

@@ -1,4 +1,3 @@
-import PageTransitionEffect from "@/components/PageTransitionEffect";
 import clsx from "clsx";
 import { Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
@@ -6,7 +5,10 @@ import { getMessages } from "next-intl/server";
 import { Inter as FontSans } from "next/font/google";
 import { ReactNode } from "react";
 import "../globals.css";
+
+import PageTransitionEffect from "@/components/PageTransitionEffect";
 import { Providers } from "./providers";
+
 // 加载字体
 const fontSans = FontSans({
     subsets: ["latin"],
@@ -27,13 +29,11 @@ export default async function LocaleLayout({
 }) {
     const messages = await getMessages();
     return (
-        <html lang={locale} suppressHydrationWarning style={{ fontSize: "12px" }}>
+        <html lang={locale} suppressHydrationWarning>
             <body className={clsx("font-sans", fontSans.variable)}>
                 <NextIntlClientProvider messages={messages}>
                     <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
-                        <PageTransitionEffect>
-                            <main className={"h-[100vh]"}>{children}</main>
-                        </PageTransitionEffect>
+                        <PageTransitionEffect>{children}</PageTransitionEffect>
                     </Providers>
                 </NextIntlClientProvider>
             </body>

src/app/[locale]/page.tsx

@@ -1,16 +1,17 @@
+import Layout from "@/components/Layout";
 import { LocalPropsWithChildren } from "@/types";
-import { Button, Input } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 import { FC } from "react";
-
+const arr = Array.from({ length: 100 }).map((_, i) => i);
+const Header = () => {
+    return <div>header</div>;
+};
 const App: FC<LocalPropsWithChildren> = (props) => {
     const t = useTranslations("global");
-
     return (
-        <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>
+        <Layout>
+            <div>this page</div>
+        </Layout>
     );
 };
 

src/app/[locale]/providers.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { useRouter } from "@/i18n";
+import { setHtmlFontSize } from "@/utils/index";
 import { NextUIProvider } from "@nextui-org/system";
 import { ThemeProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
-import { ReactNode } from "react";
-import { setHtmlFontSize } from "@/utils/index"
+import { ReactNode, useLayoutEffect } from "react";
 
 export interface ProvidersProps {
     children: ReactNode;
@@ -13,6 +13,10 @@ export interface ProvidersProps {
 
 export const Providers = ({ children, themeProps }: ProvidersProps) => {
     const router = useRouter();
+    useLayoutEffect(() => {
+        // 调用响应式方法
+        setHtmlFontSize();
+    }, []);
     return (
         <div id="app">
             <NextUIProvider navigate={router.push}>
@@ -21,6 +25,3 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
         </div>
     );
 };
-
-// 调用响应式方法
-setHtmlFontSize()

src/app/globals.css

@@ -7,9 +7,13 @@ html, body {
     height: auto;
 }
 
+::-webkit-scrollbar {
+  width: 0;
+}
 #app {
     max-width: 4.02rem;
     width: 100vw;
     height: auto;
     margin: 0 auto;
+    font-size: 0.14rem;
 }

src/components/Footer/index.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import { FC, PropsWithChildren, ReactNode } from "react";
+import styles from "./style.module.scss";
+export interface FooterProps {
+    footerPlaceholder?: boolean;
+    footerRender?: () => ReactNode;
+}
+const Footer: FC<PropsWithChildren<FooterProps>> = (props) => {
+    const { footerPlaceholder = true, footerRender } = props;
+    const cs = clsx({
+        [styles.placeholder]: footerPlaceholder,
+    });
+    return (
+        <div className={cs}>
+            <div className={styles.footerWrap}>
+                {footerRender ? footerRender() : <div>defaultFooter</div>}
+            </div>
+        </div>
+    );
+};
+
+export default Footer;

src/components/Footer/style.module.scss

@@ -0,0 +1,14 @@
+
+.placeholder{
+  height: .6rem;
+  max-width: 4.02rem;
+}
+.footerWrap{
+  position: fixed;
+  max-width: 4.02rem;
+  width: 100%;
+  height: .6rem;
+  background-color: $-footer-bg;
+  z-index: 10;
+  bottom: 0;
+}

src/components/Header/index.tsx

@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+export interface HeaderProps {
+    headerPlaceholder?: boolean;
+    headerRender?: () => ReactNode;
+}
+
+import clsx from "clsx";
+import styles from "./style.module.scss";
+
+const Header: FC<PropsWithChildren<HeaderProps>> = (props) => {
+    const { headerPlaceholder = true, headerRender } = props;
+    const cs = clsx({
+        [styles.placeholder]: headerPlaceholder,
+    });
+    return (
+        <div className={cs}>
+            <div className={styles.headerWrap}>
+                {headerRender ? headerRender() : <div>defaultHeader</div>}
+            </div>
+        </div>
+    );
+};
+
+export default Header;

src/components/Header/style.module.scss

@@ -0,0 +1,14 @@
+
+.placeholder {
+  height: 0.4rem;
+}
+
+.headerWrap{
+    height: 0.4rem;
+    position: fixed;
+    z-index: 9;
+    width: 100%;
+    max-width: 4.02rem;
+    transform: translateZ(0);
+    background: $-theme-color ;
+}

src/components/Layout/index.tsx

@@ -0,0 +1,17 @@
+import Footer, { FooterProps } from "@/components/Footer";
+import Header, { HeaderProps } from "@/components/Header";
+import { FC, PropsWithChildren } from "react";
+import styles from "./style.module.scss";
+type Props = FooterProps & HeaderProps;
+const Layout: FC<PropsWithChildren<Props>> = (props) => {
+    const { children, headerRender, footerRender } = props;
+    return (
+        <div className="relative h-[100vh]">
+            <Header {...props}></Header>
+            <main className={styles.main}>{children}</main>
+            <Footer {...props}></Footer>
+        </div>
+    );
+};
+
+export default Layout;

src/components/Layout/style.module.scss

@@ -0,0 +1,6 @@
+
+
+.main{
+  border: 1px solid white;
+  overflow-x:  hidden;
+}

src/components/PageTransitionEffect/index.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { AnimatePresence } from "framer-motion";
 import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { usePathname } from "next/navigation";
-import { ReactNode, useContext, useEffect, useRef } from "react";
+import { ReactNode, useContext, useRef } from "react";
 
 // FrozenRouter 组件，保持页面切换过程中上下文的持久化
 function FrozenRouter(props: { children: ReactNode }) {
@@ -26,30 +25,23 @@ const PageTransitionEffect = ({ children }: { children: ReactNode }) => {
     // 使用 usePathname 钩子获取路径名作为 key，以在路由更改时触发重新渲染
     const key = usePathname();
 
-    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"*/}
-            {/*    variants={variants}*/}
-            {/*    transition={{ type: "linear" }}*/}
-            {/*    className="overflow-hidden"*/}
-            {/*>*/}
-            {/*    <FrozenRouter>{children}</FrozenRouter>*/}
-            {/*</motion.div>*/}
-            {children}
-        </AnimatePresence>
-    );
+    return children;
+    // return (
+    //     <AnimatePresence mode="popLayout">
+    //         {/*<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>
+    // );
 };
 
 export default PageTransitionEffect;

src/styles/variables.scss

@@ -0,0 +1,5 @@
+
+$-theme-color: #000;
+$-footer-bg: #292929;
+
+

src/utils/index.ts

@@ -1,18 +1,20 @@
 // 设置根节点html的字体大小用于移动端适配使用
 export const setHtmlFontSize = () => {
+    console.count("setHtmlFontSize");
     (function (doc, win) {
-        var htmlDom = doc.getElementsByTagName('html')[0],
-            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+        var htmlDom = doc.getElementsByTagName("html")[0],
+            resizeEvt = "orientationchange" in win ? "orientationchange" : "resize",
             recalc = function () {
-                requestAnimationFrame(()=>{
+                requestAnimationFrame(() => {
                     var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
                     if (!clientWidth) return;
-                    htmlDom.style.fontSize = clientWidth>=579 ? '144px' : 145 * (clientWidth / 579) + 'px';
-                })
+                    htmlDom.style.fontSize =
+                        clientWidth >= 579 ? "144px" : 145 * (clientWidth / 579) + "px";
+                });
             };
         if (!doc.addEventListener) return;
         win.addEventListener(resizeEvt, recalc, false);
-        doc.addEventListener('DOMContentLoaded', recalc, false);
-        setTimeout(()=>recalc(),10)
+        doc.addEventListener("DOMContentLoaded", recalc, false);
+        setTimeout(() => recalc(), 10);
     })(document, window);
-}
+};

tailwind.config.ts

@@ -1,5 +1,10 @@
 import { nextui } from "@nextui-org/react";
 import type { Config } from "tailwindcss";
+
+const fontSize: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
+    map[index] = `${index}px`;
+    return map;
+}, {});
 const config: Config = {
     content: [
         "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -9,6 +14,7 @@ const config: Config = {
     ],
     theme: {
         extend: {
+            fontSize,
             backgroundImage: {
                 "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                 "gradient-conic":