Merge pull request #7 from GaoNeng-wWw/main

fix: header footer 错误
TeamVastsea · Aug 16, 2024 · 629b01a · 629b01a
2 parents d91ee3e + e355be6
commit 629b01a
Show file tree

Hide file tree

Showing 36 changed files with 153 additions and 201 deletions.
diff --git a/app/layout.tsx → app/(index)/layout.tsx b/app/layout.tsx → app/(index)/layout.tsx
@@ -2,12 +2,12 @@
 
 import '@mantine/core/styles.css';
 import React from 'react';
-import {MantineProvider, ColorSchemeScript, AppShell, ScrollArea} from '@mantine/core';
+import { MantineProvider, ColorSchemeScript, AppShell } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
-import { theme } from '../theme';
+import { theme } from '@/theme';
 import '@mantine/notifications/styles.css';
-import Header from "@/app/components/Header";
-import Footer from "@/app/components/Footer";
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function RootLayout({ children }: { children: any }) {
   return (
@@ -21,22 +21,23 @@ export default function RootLayout({ children }: { children: any }) {
         />
           <title>苦力怕论坛 | 问卷系统</title>
       </head>
-      <body>
+      <body style={{
+        overflow: 'hidden',
+      }}>
         <MantineProvider theme={theme}>
             <Notifications position="top-right" />
-            <AppShell>
-                <AppShell.Header h={56}>
+            <AppShell
+              header={{ height: 60 }}
+            >
+                <AppShell.Header>
                     <Header />
                 </AppShell.Header>
 
                 <AppShell.Main>
-                    {/*<ScrollArea>*/}
-                        {children}
-                    {/*</ScrollArea>*/}
+                  {children}
                 </AppShell.Main>
-
-                <AppShell.Footer mah={154}>
-                    <Footer />
+                <AppShell.Footer mah={120}>
+                  <Footer />
                 </AppShell.Footer>
             </AppShell>
         </MantineProvider>

diff --git a/app/page.tsx → app/(index)/page.tsx b/app/page.tsx → app/(index)/page.tsx
@@ -3,9 +3,9 @@
 import { Button, Center, Container, Group, Image, SimpleGrid, Space, Stack, Text, Title } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import { min } from '@floating-ui/utils';
-import classes from '@/app/oauth/components/LoginBanner.module.css';
-import SurveyCard from '@/app/components/SurveyCard';
-import mainPageImage from '@/public/main-page.svg';
+import classes from '@/styles/common.module.css';
+import SurveyCard from '@/components/SurveyCard';
+import Footer from '@/components/Footer';
 
 export type Survey = {
     title: string;
@@ -46,10 +46,9 @@ export default function HomePage() {
         <>
             <div
               style={{
-                    scrollSnapType: 'y mandatory',
-                    overflowY: 'scroll',
-                    height: '100vh',
-                    paddingTop: '60px',
+                  scrollSnapType: 'y mandatory',
+                  overflowY: 'scroll',
+                  height: '100vh',
                 }}
             >
                 <Center
@@ -64,40 +63,38 @@ export default function HomePage() {
                       spacing="lg"
                       style={{ maxWidth: '80%', width: '100%' }}
                     >
-                        <Center>
-                            <Stack justify="center">
-                                <Title className={classes.title}>
-                                    <Text span c="#008D57" inherit>苦</Text>
-                                    <Text span c="#13AE67" inherit>力</Text>
-                                    <Text span c="#089946" inherit>怕</Text>
-                                    论坛
-                                </Title>
-                                <Title>&#62; 问卷系统</Title>
-                                <Text fw={500} fz="lg">收集更好的数据，作出更好的决策。</Text>
-                                <Space h="md" />
-                                <Group>
-                                    <Button
-                                        color="blue"
-                                        radius="md"
-                                        onClick={() => router.push('https://github.com/orgs/TeamVastsea/teams/klpbbs_survey')}
-                                    >
-                                        Github
-                                    </Button>
-                                    <Button
-                                        color="gray"
-                                        radius="md"
-                                        onClick={() => router.push('/oauth')}
-                                    >
-                                        立即使用
-                                    </Button>
-                                </Group>
-                            </Stack>
-                        </Center>
+                        <Stack justify="center">
+                            <Title className={classes.title}>
+                                <Text span c="#008D57" inherit>苦</Text>
+                                <Text span c="#13AE67" inherit>力</Text>
+                                <Text span c="#089946" inherit>怕</Text>
+                                论坛
+                            </Title>
+                            <Title>&#62; 问卷系统</Title>
+                            <Text fw={500} fz="lg">收集更好的数据，作出更好的决策。</Text>
+                            <Space h="md" />
+                            <Group>
+                                <Button
+                                  color="blue"
+                                  radius="md"
+                                  onClick={() => router.push('https://github.com/orgs/TeamVastsea/teams/klpbbs_survey')}
+                                >
+                                    Github
+                                </Button>
+                                <Button
+                                  color="gray"
+                                  radius="md"
+                                  onClick={() => router.push('/oauth')}
+                                >
+                                    立即使用
+                                </Button>
+                            </Group>
+                        </Stack>
 
                         <Container>
                             <Image
-                              src={mainPageImage.src}
-                              alt="Main Page Image"
+                              src="favicon.svg"
+                              alt="KLPBBS logo"
                               className={classes.image}
                               style={{ maxWidth: 380, margin: '0 auto' }}
                             />
@@ -111,6 +108,7 @@ export default function HomePage() {
                         scrollSnapAlign: 'start',
                         scrollSnapStop: 'always',
                     }}
+                  pb={120}
                 >
                     <Stack>
                         <Center>

diff --git a/app/backstage/Style.css → app/(root)/backstage/Style.css b/app/backstage/Style.css → app/(root)/backstage/Style.css
diff --git a/...backstage/components/BadgeCard.module.css → ...backstage/components/BadgeCard.module.css b/...backstage/components/BadgeCard.module.css → ...backstage/components/BadgeCard.module.css
diff --git a/app/backstage/components/BadgeCard.tsx → ...(root)/backstage/components/BadgeCard.tsx b/app/backstage/components/BadgeCard.tsx → ...(root)/backstage/components/BadgeCard.tsx
diff --git a/app/backstage/components/NavBar.module.css → ...t)/backstage/components/NavBar.module.css b/app/backstage/components/NavBar.module.css → ...t)/backstage/components/NavBar.module.css
diff --git a/app/backstage/components/NavBar.tsx → app/(root)/backstage/components/NavBar.tsx b/app/backstage/components/NavBar.tsx → app/(root)/backstage/components/NavBar.tsx
@@ -8,24 +8,24 @@ import {
     IconClockHour5,
 
 } from '@tabler/icons-react';
-import classes from '@/app/backstage/components/NavBar.module.css';
+import classes from './BadgeCard.module.css';
 
 const data = [
     { link: '', label: '信息', icon: IconBellRinging },
     { link: '', label: '新建问卷', icon: IconPlus },
-    { link: '', label: '最近', icon: IconClockHour5},
-    { link: '', label: '与我合作', icon: IconUsersGroup }
+    { link: '', label: '最近', icon: IconClockHour5 },
+    { link: '', label: '与我合作', icon: IconUsersGroup },
 ];
 
 export default function NavBar() {
     const [active, setActive] = useState('Billing');
     const links = data.map((item) => (
         <a
-            className={classes.link}
-            data-active={item.label === active || undefined}
-            href={item.link}
-            key={item.label}
-            onClick={(event) => {
+          className={classes.link}
+          data-active={item.label === active || undefined}
+          href={item.link}
+          key={item.label}
+          onClick={(event) => {
             event.preventDefault();
             setActive(item.label);
             }}
@@ -54,4 +54,4 @@ export default function NavBar() {
             </div>
         </nav>
     );
-}
+}
diff --git a/app/backstage/page.tsx → app/(root)/backstage/page.tsx b/app/backstage/page.tsx → app/(root)/backstage/page.tsx
@@ -1,12 +1,13 @@
 'use client';
+
 import {
     Grid,
     SimpleGrid,
 } from '@mantine/core';
-import NavBar from "@/app/backstage/components/NavBar";
-import Header from "@/app/components/Header"
-import BadgeCard from "@/app/backstage/components/BadgeCard";
-import "./Style.css"
+import NavBar from './components/NavBar';
+import Header from '@/components/Header';
+import BadgeCard from './components/BadgeCard';
+import './Style.css';
 
 export default function BackStage() {
     return (
@@ -24,4 +25,4 @@ export default function BackStage() {
             </Grid>
         </>
     );
-}
+}
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import '@mantine/core/styles.css';
+import React from 'react';
+import { MantineProvider, ColorSchemeScript, AppShell } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { theme } from '@/theme';
+import '@mantine/notifications/styles.css';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+
+export default function RootLayout({ children }: { children: any }) {
+  return (
+    <html lang="en">
+      <head>
+        <ColorSchemeScript />
+        <link rel="shortcut icon" href="/favicon.svg" />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+        />
+          <title>苦力怕论坛 | 问卷系统</title>
+      </head>
+      <body>
+        <MantineProvider theme={theme}>
+            <Notifications position="top-right" />
+            <AppShell header={{ height: 60 }}>
+                <AppShell.Header>
+                    <Header />
+                </AppShell.Header>
+
+                <AppShell.Main pb={120}>
+                    {children}
+                </AppShell.Main>
+
+                <AppShell.Footer mah={120}>
+                  <Footer />
+                </AppShell.Footer>
+            </AppShell>
+        </MantineProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/...auth/callback/components/UserInfoCard.tsx → ...auth/callback/components/UserInfoCard.tsx b/...auth/callback/components/UserInfoCard.tsx → ...auth/callback/components/UserInfoCard.tsx
diff --git a/app/oauth/callback/layout.tsx → app/(root)/oauth/callback/layout.tsx b/app/oauth/callback/layout.tsx → app/(root)/oauth/callback/layout.tsx
diff --git a/app/oauth/callback/page.tsx → app/(root)/oauth/callback/page.tsx b/app/oauth/callback/page.tsx → app/(root)/oauth/callback/page.tsx
@@ -2,7 +2,7 @@
 
 import { Center, Stack, Space } from '@mantine/core';
 import { useSearchParams } from 'next/navigation';
-import UserInfoCard from '@/app/oauth/callback/components/UserInfoCard';
+import UserInfoCard from './components/UserInfoCard';
 
 export default function CallbackPage() {
     const searchParams = useSearchParams();

diff --git a/app/oauth/components/LoginBanner.module.css → ...)/oauth/components/LoginBanner.module.css b/app/oauth/components/LoginBanner.module.css → ...)/oauth/components/LoginBanner.module.css
@@ -1,3 +1,4 @@
+@import url("@/styles/common.module.css");
 .wrapper {
     display: flex;
     align-items: center;
@@ -21,14 +22,6 @@
     }
 }
 
-.title {
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-    font-family: "Greycliff CF",
-    var(--mantine-font-family), serif;
-    line-height: 1;
-    margin-bottom: var(--mantine-spacing-md);
-}
-
 .controls {
     display: flex;
     margin-top: var(--mantine-spacing-xl);

diff --git a/app/oauth/components/LoginBanner.tsx → app/(root)/oauth/components/LoginBanner.tsx b/app/oauth/components/LoginBanner.tsx → app/(root)/oauth/components/LoginBanner.tsx
diff --git a/app/oauth/components/logo.png → app/(root)/oauth/components/logo.png b/app/oauth/components/logo.png → app/(root)/oauth/components/logo.png
diff --git a/app/oauth/page.tsx → app/(root)/oauth/page.tsx b/app/oauth/page.tsx → app/(root)/oauth/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Center, Space, Stack } from '@mantine/core';
-import { LoginBanner } from '@/app/oauth/components/LoginBanner';
+import { LoginBanner } from './components/LoginBanner';
 
 export default function OAuthPage() {
     return (

diff --git a/app/survey/components/FileUpload.tsx → app/(root)/survey/components/FileUpload.tsx b/app/survey/components/FileUpload.tsx → app/(root)/survey/components/FileUpload.tsx
diff --git a/app/survey/components/FillBlank.tsx → app/(root)/survey/components/FillBlank.tsx b/app/survey/components/FillBlank.tsx → app/(root)/survey/components/FillBlank.tsx
@@ -1,6 +1,6 @@
 import { Space, Textarea } from '@mantine/core';
 import React, { useRef } from 'react';
-import { InputProps } from '@/app/survey/components/generateQuestion';
+import type { InputProps } from './generateQuestion';
 
 export function FillBlank(proos: InputProps) {
     const ref = useRef<HTMLTextAreaElement>(null);

diff --git a/...rvey/components/MultipleChoice.module.css → ...rvey/components/MultipleChoice.module.css b/...rvey/components/MultipleChoice.module.css → ...rvey/components/MultipleChoice.module.css
diff --git a/app/survey/components/MultipleChoice.tsx → ...oot)/survey/components/MultipleChoice.tsx b/app/survey/components/MultipleChoice.tsx → ...oot)/survey/components/MultipleChoice.tsx
@@ -1,6 +1,6 @@
 import { Checkbox, Group, Space, Stack, Text } from '@mantine/core';
 import classes from './MultipleChoice.module.css';
-import { ChoiceProps } from '@/app/survey/components/SingleChoice';
+import { ChoiceProps } from './SingleChoice';
 
 export function MultipleChoice(props: ChoiceProps) {
     const data = props.choice;

diff --git a/...survey/components/SingleChoice.module.css → ...survey/components/SingleChoice.module.css b/...survey/components/SingleChoice.module.css → ...survey/components/SingleChoice.module.css
diff --git a/app/survey/components/SingleChoice.tsx → ...(root)/survey/components/SingleChoice.tsx b/app/survey/components/SingleChoice.tsx → ...(root)/survey/components/SingleChoice.tsx
@@ -1,6 +1,6 @@
 import { Group, Radio, Space, Stack, Text } from '@mantine/core';
 import classes from './SingleChoice.module.css';
-import { InputProps, Value } from '@/app/survey/components/generateQuestion';
+import type { InputProps, Value } from './generateQuestion';
 
 export function SingleChoice(props: ChoiceProps) {
     const data = props.choice;
@@ -33,6 +33,6 @@ export function SingleChoice(props: ChoiceProps) {
     );
 }
 
-export interface ChoiceProps extends InputProps{
+export interface ChoiceProps extends InputProps {
     choice: Value[];
 }
diff --git a/app/survey/components/generateQuestion.tsx → ...t)/survey/components/generateQuestion.tsx b/app/survey/components/generateQuestion.tsx → ...t)/survey/components/generateQuestion.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { Text, Title } from '@mantine/core';
-import { SingleChoice } from '@/app/survey/components/SingleChoice';
-import { MultipleChoice } from '@/app/survey/components/MultipleChoice';
-import { FileUpload } from '@/app/survey/components/FileUpload';
-import { FillBlank } from '@/app/survey/components/FillBlank';
+import { Title, Text } from '@mantine/core';
+import { SingleChoice } from './SingleChoice';
+import { MultipleChoice } from './MultipleChoice';
+import { FileUpload } from './FileUpload';
+import { FillBlank } from './FillBlank';
 
-// eslint-disable-next-line max-len
-export function generateQuestion(data: QuestionProps, value: string | undefined, setValue: (value: string) => void) {
+export function generateQuestion(
+    data: QuestionProps,
+    value: string | undefined,
+    setValue: (value: string) => void
+) {
     switch (data.type) {
         case 1:
             return (

diff --git a/app/survey/data/example.json → app/(root)/survey/data/example.json b/app/survey/data/example.json → app/(root)/survey/data/example.json
diff --git a/app/(root)/survey/layout.tsx b/app/(root)/survey/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      { children }
+    </>
+  );
+}
diff --git a/app/survey/page.tsx → app/(root)/survey/page.tsx b/app/survey/page.tsx → app/(root)/survey/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { Center, Title, Stack, Space } from '@mantine/core';
-import { generateQuestion } from '@/app/survey/components/generateQuestion';
-import questionsData from '@/app/survey/data/example.json';
+import { Center, Title, Stack } from '@mantine/core';
+import { generateQuestion } from './components/generateQuestion';
+import questionsData from './data/example.json';
 
 export default function Survey() {
     const [questions, setQuestions] = useState<any[]>([]);
@@ -28,7 +28,6 @@ export default function Survey() {
                     {questions.map((question) => generateQuestion(question))}
                 </Stack>
             </Center>
-            <Space h={100} />
         </Stack>
     );
 }