From 030b17abbff65100513335a022d9109d5aa28618 Mon Sep 17 00:00:00 2001 From: ozline Date: Fri, 7 Jun 2024 00:15:20 +0800 Subject: [PATCH] feat: use more good icon and support blog show --- src/components/Member/index.tsx | 27 +++++--- src/components/Member/memberData.ts | 83 +++++++++++++++---------- src/components/Member/styles.module.css | 1 - static/img/blog.svg | 1 + static/img/github.svg | 4 +- tsconfig.json | 2 +- 6 files changed, 71 insertions(+), 47 deletions(-) create mode 100644 static/img/blog.svg diff --git a/src/components/Member/index.tsx b/src/components/Member/index.tsx index 07d54b6..eefab86 100644 --- a/src/components/Member/index.tsx +++ b/src/components/Member/index.tsx @@ -1,20 +1,18 @@ import { Avatar } from "@/components/ui/avatar" -import { memberData } from "@/components/Member/memberData"; +import { memberData, imgPrefix, githubPrefix, visibleYearsCount } from "@/components/Member/memberData"; import GithubIcon from '@site/static/img/github.svg'; +import BlogIcon from '@site/static/img/blog.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 sortedYears = Object.keys(memberData).sort((a, b) => b.localeCompare(a)); + + const [activeYear, setActiveYear] = useState(sortedYears[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 组件 @@ -113,9 +111,12 @@ export default function Component() { )}
+ {/* name */}

{member.name}

+ {/* major */}

{member.major}

- {member.github !== "null" && ( + {/* Github link */} + {member.github !== undefined && ( )} + {/* blog link */} + {member.blog && ( + + + {member.blog.display} + + )}
))} diff --git a/src/components/Member/memberData.ts b/src/components/Member/memberData.ts index e27a1a6..a602ac2 100644 --- a/src/components/Member/memberData.ts +++ b/src/components/Member/memberData.ts @@ -1,65 +1,80 @@ +export const imgPrefix = "https://img.w2fzu.com/member/" +export const githubPrefix = "https://github.com/" +export const visibleYearsCount = 3; // 可见年份数量 + +/* + 1. 计算机方向同学必须搜集 GitHub ID，其他方向同学可选 + 2. 头像图片请上传到又拍云，并将链接填写到 avatar 字段，文件名请以学号（如 052106112）命名 + 3. GitHub ID 请填写不带前缀的 ID，会自动拼接 github 地址 + 4. blog 字段可选，如果填写了会在成员卡片中显示一个链接 +*/ + type MemberData = Record export const memberData: MemberData = { "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" }, - { avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "ozline" }, + { avatar: "2022/frontends_python_wy.jpg", name: "吴悠", focus: "Python", major:"21级给排水" }, + { avatar: "2022/frontends_ios_golang_lhx.jpg", name: "林黄骁", focus: "Go", major:"21级软件工程", github: "ozline", blog: { display: "ozline's blog", url: "https://blog.ozline.icu/" } }, - { avatar: "2022/unity_lqy.jpg", name: "罗骐翼", focus: "Unity", major:"21级数媒", github: "null" }, - { avatar: "2022/unity_hzy.jpg", name: "黄致远", focus: "Unity", major:"21级计算机", github: "null" }, - { avatar: "2022/unity_wjy.jpg", name: "吴佳仪", focus: "Unity", major:"20级自动化", github: "null" }, - { avatar: "2022/unity_hhc.jpg", name: "何晗晨", focus: "Unity", major:"21级数媒", github: "null" }, - { avatar: "2022/unity_yxx.jpg", name: "袁夏鑫", focus: "Unity", major:"21级软件工程", github: "null" }, - { avatar: "2022/unity_hkh.jpg", name: "黄铠赫", focus: "Unity", major:"21级数媒", github: "null" }, + { avatar: "2022/unity_lqy.jpg", name: "罗骐翼", focus: "Unity", major:"21级数媒" }, + { avatar: "2022/unity_hzy.jpg", name: "黄致远", focus: "Unity", major:"21级计算机" }, + { avatar: "2022/unity_wjy.jpg", name: "吴佳仪", focus: "Unity", major:"20级自动化" }, + { avatar: "2022/unity_hhc.jpg", name: "何晗晨", focus: "Unity", major:"21级数媒" }, + { avatar: "2022/unity_yxx.jpg", name: "袁夏鑫", focus: "Unity", major:"21级软件工程" }, + { avatar: "2022/unity_hkh.jpg", name: "黄铠赫", focus: "Unity", major:"21级数媒" }, { avatar: "2022/unity_ywx.jpg", name: "姚玮欣", focus: "Unity", major:"20级计算机", github: "yaoweixin" }, { avatar: "2022/golang_ckf.jpg", name: "陈恺丰", focus: "Go", major:"20级电子信息工程", github: "KAIFENG-ch" }, { avatar: "2022/golang_fyc.jpg", name: "方宇辰", focus: "Go", major:"20级软件工程", github: "Anxiu0101" }, { avatar: "2022/golang_zzy.jpg", name: "张钊洋", focus: "Go", major:"20级电子信息工程", github: "rsooio" }, - { avatar: "2022/python_cxy.jpg", name: "陈昕远", focus: "Python", major:"20级软件工程", github: "null" }, - { avatar: "2022/python_gbq.jpg", name: "高炳强", focus: "Python", major:"21级人工智能", github: "null" }, - { avatar: "2022/python_lzp.jpg", name: "李志鹏", focus: "Python", major:"20级计算机", github: "null" }, + { avatar: "2022/python_cxy.jpg", name: "陈昕远", focus: "Python", major:"20级软件工程" }, + { avatar: "2022/python_gbq.jpg", name: "高炳强", focus: "Python", major:"21级人工智能" }, + { avatar: "2022/python_lzp.jpg", name: "李志鹏", focus: "Python", major:"20级计算机" }, { avatar: "2022/android_sqt.jpg", name: "沈轻腾", focus: "Android", major:"21级计算机", github: "theonenull" }, { avatar: "2022/android_zyn.jpg", name: "张煜楠", focus: "Android", major:"21级软件工程", github: "Benxinm" }, { avatar: "2022/android_sx.jpg", name: "孙逊", focus: "Android", major:"21级电子信息工程", github: "utf8-coding" }, { avatar: "2022/frontends_zjz.jpg", name: "张佳泽", focus: "前端", major:"20级软件工程", github: "sami-jiaze" }, - { avatar: "2022/frontends_czh.jpg", name: "陈泽华", focus: "前端", major:"20级软件工程", github: "null" }, + { avatar: "2022/frontends_czh.jpg", name: "陈泽华", focus: "前端", major:"20级软件工程" }, { avatar: "2022/frontends_pcy.jpg", name: "庞财莹", focus: "前端", major:"21级软件工程", github: "xi-null" }, - { avatar: "2022/frontends_wxy.jpg", name: "吴星宇", focus: "前端", major:"21级计算机", github: "null" }, - { avatar: "2022/frontends_gcj.jpg", name: "龚辰珺", focus: "前端", major:"20级软件工程", github: "null" }, - { avatar: "2022/frontends_lx.jpg", name: "林翔", focus: "前端", major:"20级软件工程", github: "null" }, - { avatar: "2022/frontends_wzr.jpg", name: "吴子隆", focus: "前端", major:"20级软件工程", github: "null" }, + { avatar: "2022/frontends_wxy.jpg", name: "吴星宇", focus: "前端", major:"21级计算机" }, + { avatar: "2022/frontends_gcj.jpg", name: "龚辰珺", focus: "前端", major:"20级软件工程" }, + { avatar: "2022/frontends_lx.jpg", name: "林翔", focus: "前端", major:"20级软件工程" }, + { avatar: "2022/frontends_wzr.jpg", name: "吴子隆", focus: "前端", major:"20级软件工程" }, - { avatar: "2022/java_lb.jpg", name: "刘博", focus: "Java", major:"20级自动化", github: "null" }, - { avatar: "2022/java_czh.jpg", name: "陈桢函", focus: "Java", major:"20级软件工程", github: "null" }, - { avatar: "2022/java_zl.jpg", name: "朱辽", focus: "Java", major:"20级自动化", github: "null" }, - { avatar: "2022/java_hjq.jpg", name: "胡家齐", focus: "Java", major:"20级自动化", github: "null" }, + { avatar: "2022/java_lb.jpg", name: "刘博", focus: "Java", major:"20级自动化" }, + { avatar: "2022/java_czh.jpg", name: "陈桢函", focus: "Java", major:"20级软件工程" }, + { avatar: "2022/java_zl.jpg", name: "朱辽", focus: "Java", major:"20级自动化" }, + { avatar: "2022/java_hjq.jpg", name: "胡家齐", focus: "Java", major:"20级自动化" }, { avatar: "2022/java_lyd.jpg", name: "李炎东", focus: "Java", major:"21级软件工程", github: "SkyDDDog" }, { avatar: "2022/java_ljh.jpg", name: "刘俊辉", focus: "Java", major:"21级人工智能", github: "SUPERGOG07" }, - { avatar: "2022/java_lzp.jpg", name: "李振鹏", focus: "Java", major:"20级软件工程", github: "null" }, - { avatar: "2022/java_xyj.jpg", name: "许影杰", focus: "Java", major:"20级软件工程", github: "null" }, - { avatar: "2022/java_cy.jpg", name: "陈艺", focus: "Java", major:"21级计算机", github: "null" }, - { avatar: "2022/java_sjs.jpg", name: "苏锦森", focus: "Java", major:"21级计算机", github: "null" }, - { avatar: "2022/java_yrw.jpg", name: "杨润午", focus: "Java", major:"20级软件工程", github: "null" }, - { avatar: "2022/java_yjj.jpg", name: "余婧洁", focus: "Java", major:"20级自动化", github: "null" }, - { avatar: "2022/java_zcx.jpg", name: "张晨旭", focus: "Java", major:"20级计算机", github: "null" }, - { avatar: "2022/java_czf.jpg", name: "陈知菲", focus: "Java", major:"21级计算机", github: "null" }, + { avatar: "2022/java_lzp.jpg", name: "李振鹏", focus: "Java", major:"20级软件工程" }, + { avatar: "2022/java_xyj.jpg", name: "许影杰", focus: "Java", major:"20级软件工程" }, + { avatar: "2022/java_cy.jpg", name: "陈艺", focus: "Java", major:"21级计算机" }, + { avatar: "2022/java_sjs.jpg", name: "苏锦森", focus: "Java", major:"21级计算机" }, + { avatar: "2022/java_yrw.jpg", name: "杨润午", focus: "Java", major:"20级软件工程" }, + { avatar: "2022/java_yjj.jpg", name: "余婧洁", focus: "Java", major:"20级自动化" }, + { avatar: "2022/java_zcx.jpg", name: "张晨旭", focus: "Java", major:"20级计算机" }, + { avatar: "2022/java_czf.jpg", name: "陈知菲", focus: "Java", major:"21级计算机" }, { avatar: "2022/art_lcy.jpg", name: "李宸晔", focus: "美术", major:"20级建筑学", github: "ALLLOUD" }, - { avatar: "2022/art_lmq.jpg", name: "李鸣谦", focus: "美术", major:"20级信息安全", github: "null" }, - { avatar: "2022/art_cjw.jpg", name: "陈佳雯", focus: "美术", major:"21级数媒", github: "null" }, - { avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒", github: "null" }, + { avatar: "2022/art_lmq.jpg", name: "李鸣谦", focus: "美术", major:"20级信息安全" }, + { avatar: "2022/art_cjw.jpg", name: "陈佳雯", focus: "美术", major:"21级数媒" }, + { avatar: "2022/art_lxy.jpg", name: "林心悦", focus: "美术", major:"21级数媒" }, { avatar: "2022/art_hcx.jpg", name: "黄晨曦", focus: "美术", major:"21级信管", github: "mmmki" }, ], "2021": [], diff --git a/src/components/Member/styles.module.css b/src/components/Member/styles.module.css index 43780fd..276c5a0 100644 --- a/src/components/Member/styles.module.css +++ b/src/components/Member/styles.module.css @@ -1,4 +1,3 @@ -/* 在你的 CSS 文件中添加以下样式 */ /* 自定义滚动条的样式 */ .scrollbar-custom::-webkit-scrollbar { width: 10px; /* 设置滚动条的宽度 */ diff --git a/static/img/blog.svg b/static/img/blog.svg new file mode 100644 index 0000000..3f48385 --- /dev/null +++ b/static/img/blog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/github.svg b/static/img/github.svg index 1021a51..b5f9b78 100644 --- a/static/img/github.svg +++ b/static/img/github.svg @@ -1,3 +1 @@ - {} - - \ No newline at end of file + \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 7b6a741..57af6ca 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,5 +6,5 @@ "paths": { "@/*": ["./src/*"] } - } + }, }