init project

Author: OweQian

Diff for: .eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/display-name": "off"
+  }
 }

Diff for: .gitignore

@@ -33,4 +33,3 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts

Diff for: .idea/codeStyles/codeStyleConfig.xml

@@ -1,44 +1,19 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped
-with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# A Demo for 《SSR 实战：官网开发指南》
 
-## Getting Started
+《SSR 实战：官网开发指南》实战篇 教学代码
 
-First, run the development server:
+## 项目启动
 
-```bash
+1. fork cms 数据层仓库 https://github.com/czm1290433700/nextjs-cms 参照对应 readme 启动
+2. nextjs-demo 启动
+
+```
+npm install
 npm run dev
-# or
-yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed
-on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited
-in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated
-as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and
-load Inter, a custom Google Font.
-
-## Learn More
+## 项目调试
 
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions
-are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use
-the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
-from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```
+npm run debugger
+```

Diff for: .idea/vcs.xml

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [2, "always", ["feat", "fix", "revert"]],
+    "subject-max-length": [1, "always", 30],
+  },
+};

Diff for: README.md

@@ -79,8 +79,8 @@ export const Footer: FC<IFooterProps> = ({
             <Image
               src={qrCode?.image}
               alt={qrCode?.text}
-              width={80}
-              height={80}
+              width={56}
+              height={56}
             ></Image>
           </div>
           <div className={styles.text}>{qrCode?.text}</div>

Diff for: commitlint.config.js

@@ -1,91 +1,156 @@
+@import "../../pages/media.scss";
+
 .footer {
-  padding: 70px 145px;
-  background-color: #1f1f1f;
+  font-size: 1rem;
+  padding: 4.375rem 9.0625rem;
+  background-color: var(--footer-background-color);
 
   .topArea {
     display: flex;
     justify-content: space-between;
+    flex-wrap: wrap;
 
     .footerTitle {
       font-weight: 500;
-      font-size: 36px;
-      line-height: 36px;
-      color: #ffffff;
+      font-size: 2.25rem;
+      line-height: 2.25rem;
+      color: var(--primary-color);
       margin: 0;
     }
 
     .linkListArea {
       display: flex;
-
       .linkArea {
         display: flex;
         flex-direction: column;
-        margin-left: 160px;
+        margin-left: 10rem;
 
         .title {
           font-weight: 500;
-          font-size: 14px;
-          line-height: 20px;
-          color: #ffffff;
-          margin-bottom: 40px;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          color: var(--primary-color);
+          margin-bottom: 2.5rem;
+          word-break: keep-all;
         }
 
         .links {
           display: flex;
           flex-direction: column;
           font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          word-break: keep-all;
 
           .link {
-            color: #ffffff;
+            color: var(--primary-color);
             cursor: pointer;
-            margin-bottom: 24px;
+            margin-bottom: 1.5rem;
           }
 
           .disabled {
-            color: #666;
+            color: var(--secondary-color);
             cursor: not-allowed;
-            margin-bottom: 24px;
+            margin-bottom: 1.5rem;
           }
         }
       }
+
+      .linkArea:first-of-type {
+        margin-left: 0;
+      }
     }
   }
 
   .bottomArea {
     display: flex;
     justify-content: space-between;
-
     .codeArea {
       display: flex;
       flex-direction: column;
-
       .text {
-        color: #ffffff;
+        color: var(--secondary-color);
       }
     }
-
     .numArea {
-      color: #ffffff;
+      color: var(--secondary-color);
       display: flex;
       flex-direction: column;
       align-items: flex-end;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
 
       span {
-        margin-bottom: 12px;
+        margin-bottom: 0.75rem;
       }
 
       .publicLogo {
         display: flex;
 
         .logo {
-          margin-right: 4px;
+          margin-right: 0.25rem;
         }
       }
     }
   }
 }
+
+@media screen and (min-width: 48.6875rem) and (max-width: 54.125rem) {
+  .footer {
+    .topArea {
+      .footerTitle {
+        margin-bottom: 1.25rem;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 48.6875rem) {
+  .footer {
+    .topArea {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .footerTitle {
+        margin-bottom: 2.5rem;
+      }
+
+      .linkListArea {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+
+        .linkArea {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .bottomArea {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .codeArea {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .text {
+          text-align: center;
+          margin: 1.25rem 0;
+        }
+      }
+
+      .numArea {
+        align-items: center;
+        text-align: center;
+      }
+    }
+  }
+}
+
+// @include media-ipad {
+// }

Diff for: components/footer/index.tsx

@@ -1,6 +1,6 @@
 import {FC} from "react";
-import {Footer, IFooterProps} from "../footer";
-import {INavBarProps, NavBar} from "../navbar";
+import {Footer, IFooterProps} from "../footer/index";
+import {INavBarProps, NavBar} from "../navbar/index";
 import styles from "./styles.module.scss";
 
 export interface ILayoutProps {

Diff for: components/footer/styles.module.scss

@@ -1,5 +1,7 @@
 .layout {
+  background-color: var(--primary-background-color);
+
   .main {
-    min-height: calc(100vh - 560px);
+    min-height: calc(100vh - 34.85rem);
   }
 }

Diff for: components/layout/index.tsx

@@ -1,19 +1,39 @@
-import {FC} from "react";
+import {FC, useContext} from "react";
 import styles from "./styles.module.scss";
 import Image from "next/image";
 import logoIcon from "@/public/logo-icon.svg";
 import logoText from "@/public/logo-text.svg";
+import {ThemeContext} from "@/stores/theme";
+import {Themes} from "@/constants/enum";
 
 export interface INavBarProps {
 }
 
 export const NavBar: FC<INavBarProps> = ({}) => {
+  const {setTheme} = useContext(ThemeContext);
   return (
     <div className={styles.navBar}>
       <a href="http://localhost:3000/">
         <Image src={logoIcon} alt="Demo" width={35} height={35}/>
         <Image src={logoText} alt="Demo" width={135} height={40}/>
       </a>
+      <div className={styles.themeArea}>
+        <div
+          className={styles.popupText}
+        >
+          弹窗示范
+        </div>
+        <div
+          className={styles.themeIcon}
+          onClick={(): void => {
+            if (localStorage.getItem("theme") === Themes.light) {
+              setTheme(Themes.dark);
+            } else {
+              setTheme(Themes.light);
+            }
+          }}
+        ></div>
+      </div>
     </div>
   );
 };