Merge branch 'dev' into feature-chaojie

README.md

@@ -12,3 +12,8 @@ First, run the development server:
 ```bash
   - /src/il8n.ts
 ```
+## src
+````angular2html
+  extend: 存放带有logo-header的页面
+  oridinary: 存放header为返回按钮的页面
+````

src/app/[locale]/(extend)/about/page.tsx

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const About: FC<PropsWithChildren<Props>> = (props) => {
+    return <div>hello About</div>;
+};
+
+export default About;

src/app/[locale]/(extend)/layout.tsx

@@ -0,0 +1,18 @@
+import Layout from "@/components/Layout";
+import { getMessages } from "next-intl/server";
+import { ReactNode } from "react";
+
+export default async function LocaleLayout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const messages = await getMessages();
+    return (
+        <div className="">
+            <Layout>{children}</Layout>
+        </div>
+    );
+}

src/app/[locale]/(ordinary)/info/page.tsx

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from "react";
+
+interface Props {}
+
+const Info: FC<PropsWithChildren<Props>> = (props) => {
+    return <div>hello Info</div>;
+};
+
+export default Info;

src/app/[locale]/(ordinary)/layout.tsx

@@ -0,0 +1,19 @@
+import Footer from "@/components/Footer";
+import { getMessages } from "next-intl/server";
+import { ReactNode } from "react";
+export default async function LocaleLayout({
+    children,
+    params: { locale },
+}: {
+    children: ReactNode;
+    params: { locale: string };
+}) {
+    const messages = await getMessages();
+    return (
+        <div>
+            <div>header back</div>
+            {children}
+            <Footer />
+        </div>
+    );
+}

src/app/[locale]/home/page.tsx → src/app/[locale]/(ordinary)/project/page.tsx

@@ -3,7 +3,7 @@ import { FC, PropsWithChildren } from "react";
 interface Props {}
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
-    return <div className="border-2 border-b-slate-900">hello Home</div>;
+    return <div>hello Project</div>;
 };
 
 export default App;

src/components/Footer/index.tsx

@@ -3,6 +3,13 @@ import { useRouter } from "@/i18n";
 import clsx from "clsx";
 import { FC, PropsWithChildren, ReactNode } from "react";
 import styles from "./style.module.scss";
+
+/**
+ * @description 底部组件
+ * @param footerPlaceholder 底部占位元素
+ * @param footerRender 底部渲染元素
+ *
+ */
 export interface FooterProps {
     footerPlaceholder?: boolean;
     footerRender?: () => ReactNode;

src/components/Header/index.tsx

@@ -1,11 +1,34 @@
+"use client";
 import { FC, PropsWithChildren, ReactNode } from "react";
+
+/**
+ * @description HeaderProps
+ * @param {boolean} headerPlaceholder 是否展示展位元素
+ * @param {() => ReactNode} headerRender 自定义渲染
+ */
 export interface HeaderProps {
     headerPlaceholder?: boolean;
     headerRender?: () => ReactNode;
 }
 
+import { useRouter } from "@/i18n";
 import clsx from "clsx";
 import styles from "./style.module.scss";
+const DefaultHeader: FC = () => {
+    const router = useRouter();
+    return (
+        <div className={styles.headerMain}>
+            <div className={styles.headerLeft}>
+                <div
+                    className="iconfont icon-gengduo"
+                    onClick={() => router.push("/project")}
+                ></div>
+            </div>
+            <div className={styles.headerTitle}></div>
+            <div className={styles.headerRight}></div>
+        </div>
+    );
+};
 
 const Header: FC<PropsWithChildren<HeaderProps>> = (props) => {
     const { headerPlaceholder = true, headerRender } = props;
@@ -15,7 +38,7 @@ const Header: FC<PropsWithChildren<HeaderProps>> = (props) => {
     return (
         <div className={cs}>
             <div className={styles.headerWrap}>
-                {headerRender ? headerRender() : <div>defaultHeader</div>}
+                {headerRender ? headerRender() : <DefaultHeader />}
             </div>
         </div>
     );

src/components/Header/style.module.scss

@@ -11,4 +11,11 @@
     max-width: 4.02rem;
     transform: translateZ(0);
     background: $-theme-color ;
+    border: 1px solid blue;
+
+  .headerMain{
+    position: relative;
+    padding: 3px 0;
+    box-sizing: border-box;
+  }
 }