feat: optimize year choose, use expand

west2-online · Jun 5, 2024 · 857bc56 · 857bc56
1 parent 9a756c4
commit 857bc56
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 18 deletions.
diff --git a/src/components/Member/index.tsx b/src/components/Member/index.tsx
@@ -2,11 +2,20 @@ import { Avatar } from "@/components/ui/avatar"
 import { memberData } from "@/components/Member/memberData";
 import GithubIcon from '@site/static/img/github.svg';
 import React, { useState, useMemo, useEffect } from 'react';
+import './styles.module.css';
 
 export default function Component() {
   const data = memberData
   const [activeYear, setActiveYear] = useState(Object.keys(data)[0]); // 默认为第一个年份
   const [activeFocus, setActiveFocus] = useState('All'); // 默认选中所有 focus
+  const [isExpanded, setIsExpanded] = useState(false); // 默认不展开年份选择
+
+  const imgPrefix = "https://img.w2fzu.com/member/"
+  const githubPrefix = "https://github.com/"
+  const visibleYearsCount = 3; // 可见年份数量
+
+  const sortedYears = Object.keys(data).sort((a, b) => b.localeCompare(a));
+  const displayedYears = isExpanded ? sortedYears : sortedYears.slice(0, visibleYearsCount);
 
   // 我们创建一个 state 来存储 LazyLoad 组件
   const [LazyLoad, setLazyLoad] = useState(null);
@@ -51,22 +60,29 @@ export default function Component() {
   return (
     <div className="container mx-auto py-12 px-4 md:px-6">
       {/* 年份选择 */}
-      <div className="mb-4 flex space-x-2">
-        {Object.keys(data).map((year) => (
+      <div className="mb-4 flex flex-wrap">
+        {displayedYears.map((year) => (
           <div
-              key={year}
-              className={`px-4 py-2 mr-2 mb-2 whitespace-nowrap rounded text-sm font-medium transition ease-in-out duration-300 cursor-pointer
-                        ${activeYear === year ? 'bg-[var(--ifm-color-primary)] text-white' : 'text-[var(--ifm-color-primary)] bg-gray-200 hover:bg-[var(--ifm-color-primary-lightest)] hover:text-[var(--ifm-color-primary-dark)]'}`}
-              onClick={() => setActiveYear(year)}
-            >
-              {year} ({data[year].length})
+            key={year}
+            className={`px-4 py-2 mr-2 mb-2 whitespace-nowrap rounded text-sm font-medium transition ease-in-out duration-300 cursor-pointer
+            ${activeYear === year ? 'bg-[var(--ifm-color-primary)] text-white' : 'text-[var(--ifm-color-primary)] bg-gray-200 hover:bg-[var(--ifm-color-primary-lightest)] hover:text-[var(--ifm-color-primary-dark)]'}`}
+            onClick={() => setActiveYear(year)}
+          >
+            {year} ({data[year].length})
           </div>
-
-
         ))}
+        {Object.keys(data).length > visibleYearsCount && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="px-4 py-2 mr-2 mb-2 whitespace-nowrap rounded text-sm font-medium bg-[var(--ifm-color-primary)] cursor-pointer transition ease-in-out duration-300 text-[var(--ifm-color-primary)] bg-gray-200 hover:bg-[var(--ifm-color-primary-lightest)] hover:text-[var(--ifm-color-primary-dark)]'"
+          >
+            {isExpanded ? '收起' : '更多'}
+          </button>
+        )}
       </div>
       <div className="mb-12">
         <h2 className="text-2xl font-bold mb-6">{(parseInt(activeYear,10) - 1) + " - " + activeYear + "学年"}</h2>
+        <p><u>注:方向按成为正式成员时的聚焦方向归类，有多个方向以优先级最高的方向作为分类依据</u></p>
         {/* Focus 选择 */}
         <div className="mb-4 flex flex-wrap">
           {focusOptionsWithCount.map(({ focus, count }) => (
@@ -90,7 +106,7 @@ export default function Component() {
               <Avatar>
                 {LazyLoad ? (
                   <LazyLoad>
-                    <img src={"https://img.w2fzu.com/member/" + member.avatar} alt={member.name} className="w-20 h-20 rounded-full" />
+                    <img src={imgPrefix + member.avatar} alt={member.name} className="w-20 h-20 rounded-full" />
                   </LazyLoad>
                 ) : (
                   <div>Loading...</div>
@@ -101,7 +117,7 @@ export default function Component() {
                 <p className="text-gray-500 dark:text-gray-400 text-xs mb-1">{member.major}</p>
                 {member.github !== "null" && (
                   <a
-                    href={"https://github.com/" + member.github}
+                    href={githubPrefix + member.github}
                     className="flex items-center justify-center text-[var(--ifm-color-primary)] hover:text-[var(--ifm-color-primary-light)] transition duration-300 text-xs"
                   >
                     <GithubIcon className="w-3 h-3 mr-1" />

diff --git a/src/components/Member/memberData.ts b/src/components/Member/memberData.ts
@@ -7,12 +7,7 @@ type MemberData = Record<string, {
 }[]>
 
 export const memberData: MemberData = {
-  "2023": [
-    // { avatar: "/placeholder-avatar.jpg", name: "John Doe", profession: "Software Engineer" },
-    // { avatar: "/placeholder-avatar.jpg", name: "Jane Smith", profession: "Product Manager" },
-    // { avatar: "/placeholder-avatar.jpg", name: "Michael Johnson", profession: "UI/UX Designer" },
-    // { avatar: "/placeholder-avatar.jpg", name: "Emily Davis", profession: "Data Analyst" },
-  ],
+  "2023": [],
   "2022": [
     { avatar: "2022/frontends_python_zyy.jpg", name: "张艺耀", focus: "前端", major:"21级人工智能", github: "1379255913" },
     { avatar: "2022/frontends_python_wy.jpg", name: "吴悠", focus: "Python", major:"21级给排水", github: "null" },
@@ -67,4 +62,16 @@ export const memberData: MemberData = {
     { avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒", github: "null" },
     { avatar: "2022/art_hcx.jpg", name: "黄晨曦", focus: "美术", major:"21级信管", github: "mmmki" },
   ],
+  "2021": [],
+  "2020": [],
+  "2019": [],
+  "2018": [],
+  "2017": [],
+  "2016": [],
+  "2015": [],
+  "2014": [],
+  "2013": [],
+  "2012": [],
+  "2011": [],
+  "2010": [],
 }
diff --git a/src/components/Member/styles.module.css b/src/components/Member/styles.module.css
@@ -0,0 +1,20 @@
+/* 在你的 CSS 文件中添加以下样式 */
+/* 自定义滚动条的样式 */
+.scrollbar-custom::-webkit-scrollbar {
+    width: 10px; /* 设置滚动条的宽度 */
+}
+
+.scrollbar-custom::-webkit-scrollbar-track {
+    background: #f1f1f1; /* 设置滚动条的背景色 */
+    border-radius: 10px; /* 设置滚动条的圆角 */
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb {
+    background: #888; /* 设置滚动条的颜色 */
+    border-radius: 10px; /* 设置滚动条的圆角 */
+    border: 3px solid #f1f1f1; /* 设置滚动条的边框 */
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb:hover {
+    background: #555; /* 设置滚动条鼠标悬停时的颜色 */
+}