From 06dbdb935298aad875273f15292e45e663e12111 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Sat, 17 Aug 2024 03:32:25 +0800
Subject: [PATCH] feat: support multiple sections in about page

---
 .../{DeveloperCard.tsx => PeopleCard.tsx}     |  2 +-
 .../about/data/{data.json => developers.json} | 22 ---------
 app/(root)/about/data/examiners.json          | 24 ++++++++++
 app/(root)/about/data/organizations.json      | 24 ++++++++++
 app/(root)/about/page.tsx                     | 48 +++++++++++++------
 5 files changed, 82 insertions(+), 38 deletions(-)
 rename app/(root)/about/components/{DeveloperCard.tsx => PeopleCard.tsx} (98%)
 rename app/(root)/about/data/{data.json => developers.json} (79%)
 create mode 100644 app/(root)/about/data/examiners.json
 create mode 100644 app/(root)/about/data/organizations.json

diff --git a/app/(root)/about/components/DeveloperCard.tsx b/app/(root)/about/components/PeopleCard.tsx
similarity index 98%
rename from app/(root)/about/components/DeveloperCard.tsx
rename to app/(root)/about/components/PeopleCard.tsx
index 5f9d8d0..a575dd7 100644
--- a/app/(root)/about/components/DeveloperCard.tsx
+++ b/app/(root)/about/components/PeopleCard.tsx
@@ -8,7 +8,7 @@ interface DeveloperCardProps {
     logo: string;
 }
 
-export default function DeveloperCard({
+export default function PeopleCard({
                                           name,
                                           badges = [],
                                           links,
diff --git a/app/(root)/about/data/data.json b/app/(root)/about/data/developers.json
similarity index 79%
rename from app/(root)/about/data/data.json
rename to app/(root)/about/data/developers.json
index 87626ac..da4a999 100644
--- a/app/(root)/about/data/data.json
+++ b/app/(root)/about/data/developers.json
@@ -84,27 +84,5 @@
       }
     ],
     "logo": "https://user.klpbbs.com/data/avatar/000/00/00/01_avatar_big.jpg"
-  },
-  {
-    "name": "苏晴晴",
-    "badges": ["题目编写"],
-    "links": [
-      {
-        "name": "苦力怕论坛",
-        "url": "https://klpbbs.com/?158683"
-      }
-    ],
-    "logo": "https://user.klpbbs.com/data/avatar/000/15/86/83_avatar_big.jpg"
-  },
-  {
-    "name": "水稻本尊",
-    "badges": ["题目编写"],
-    "links": [
-      {
-        "name": "苦力怕论坛",
-        "url": "https://klpbbs.com/?14351"
-      }
-    ],
-    "logo": "https://user.klpbbs.com/data/avatar/000/01/43/51_avatar_big.jpg"
   }
 ]
diff --git a/app/(root)/about/data/examiners.json b/app/(root)/about/data/examiners.json
new file mode 100644
index 0000000..85a9125
--- /dev/null
+++ b/app/(root)/about/data/examiners.json
@@ -0,0 +1,24 @@
+[
+  {
+    "name": "苏晴晴",
+    "badges": ["题目编写"],
+    "links": [
+      {
+        "name": "苦力怕论坛",
+        "url": "https://klpbbs.com/?158683"
+      }
+    ],
+    "logo": "https://user.klpbbs.com/data/avatar/000/15/86/83_avatar_big.jpg"
+  },
+  {
+    "name": "水稻本尊",
+    "badges": ["题目编写"],
+    "links": [
+      {
+        "name": "苦力怕论坛",
+        "url": "https://klpbbs.com/?14351"
+      }
+    ],
+    "logo": "https://user.klpbbs.com/data/avatar/000/01/43/51_avatar_big.jpg"
+  }
+]
diff --git a/app/(root)/about/data/organizations.json b/app/(root)/about/data/organizations.json
new file mode 100644
index 0000000..b4c2f37
--- /dev/null
+++ b/app/(root)/about/data/organizations.json
@@ -0,0 +1,24 @@
+[
+  {
+    "name": "瀚海工艺",
+    "badges": [],
+    "links": [
+      {
+        "name": "GitHub",
+        "url": "https://github.com/TeamVastsea"
+      }
+    ],
+    "logo": "https://s2.loli.net/2024/08/17/FKhUDT5RrikdPuA.png"
+  },
+  {
+    "name": "苦力怕论坛",
+    "badges": [],
+    "links": [
+      {
+        "name": "官方网站",
+        "url": "https://klpbbs.com/"
+      }
+    ],
+    "logo": "https://klpbbs.com/favicon.ico"
+  }
+]
diff --git a/app/(root)/about/page.tsx b/app/(root)/about/page.tsx
index 61bea9a..0bb4661 100644
--- a/app/(root)/about/page.tsx
+++ b/app/(root)/about/page.tsx
@@ -1,11 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { Button, Center, Divider, Group, Modal, Stack, Text, Title, Container } from '@mantine/core';
+import { Button, Center, Divider, Group, Modal, Stack, Text, Title, Container, Paper } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useDisclosure } from '@mantine/hooks';
-import developerList from './data/data.json';
-import DeveloperCard from './components/DeveloperCard';
+import developerList from './data/developers.json';
+import examinerList from './data/examiners.json';
+import organizationList from './data/organizations.json';
+import DeveloperCard from './components/PeopleCard';
 
 interface DeveloperListProps {
     name: string;
@@ -26,32 +28,48 @@ export default function AboutPage() {
         open();
     };
 
-    return (
-        <Center style={{ paddingTop: '2rem' }}>
-            <Container size="md">
+    const renderSection = (title: string, list: DeveloperListProps[]) => (
+        <Center>
+            <Paper shadow="sm" radius="lg" p="xl" withBorder style={{ minWidth: 350 }}>
                 <Stack>
                     <Center>
-                        <Title>关于我们</Title>
+                        <Title order={2}>{title}</Title>
                     </Center>
                     <Stack gap="md">
-                        <Center>
-                            <Text>这里是我们全部的开发人员</Text>
-                        </Center>
-                        <Center>
-                            <Text fw={700}>(排名不分先后)</Text>
-                        </Center>
-                        {developerList.map((developer, index) => (
+                        {list.map((developer, index) => (
                             <Stack key={index}>
                                 <Group style={{ width: '100%' }}>
                                     <Text ta="left" style={{ flexGrow: 1 }}>{developer.name}</Text>
                                     <Button variant="subtle" onClick={() => handleDeveloperClick(developer)}>
                                         <IconInfoCircle size={20} />
+                                        &nbsp;查看详情
                                     </Button>
                                 </Group>
-                                {index < developerList.length - 1 && <Divider />}
+                                {index < list.length - 1 && <Divider />}
                             </Stack>
                         ))}
                     </Stack>
+                </Stack>
+            </Paper>
+        </Center>
+    );
+
+    return (
+        <Center style={{ paddingTop: '2rem', paddingBottom: '1rem' }}>
+            <Container size="md" style={{ paddingBottom: '1rem' }}>
+                <Center>
+                    <Title>关于我们</Title>
+                </Center>
+                <Center>
+                    <Text fw={700}>(排名不分先后)</Text>
+                </Center>
+
+                <Divider my="lg" size="xl" />
+
+                <Stack>
+                    {renderSection('🔧 开发', developerList)}
+                    {renderSection('✍️ 题目编写', examinerList)}
+                    {renderSection('🏢 组织', organizationList)}
 
                     {selectedDeveloper && (
                         <Modal opened={opened} onClose={close} title="详细信息">