ui: 修改一些配色不协调与未应用的问题

west2-online · Sep 5, 2024 · 1872284 · 1872284
1 parent 49161bc
commit 1872284
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 41 deletions.
diff --git a/src/components/Member/index.tsx b/src/components/Member/index.tsx
@@ -1,28 +1,38 @@
-import { useEffect, useMemo, useState } from 'react';
-import LazyLoad from 'react-lazyload';
+import { useEffect, useMemo, useState } from "react";
+import LazyLoad from "react-lazyload";
 
-import { compareMembers, githubPrefix, imgPrefix, memberData, visibleYearsCount } from "@/components/Member/memberData";
+import {
+  compareMembers,
+  githubPrefix,
+  imgPrefix,
+  memberData,
+  visibleYearsCount,
+} from "@/components/Member/memberData";
 import { Avatar } from "@/components/ui/avatar";
-import BlogIcon from '@site/static/img/blog.svg';
-import GithubIcon from '@site/static/img/github.svg';
+import BlogIcon from "@site/static/img/blog.svg";
+import GithubIcon from "@site/static/img/github.svg";
 
-import './styles.module.css';
+import "./styles.module.css";
 
 export default function Component() {
-  const data = memberData
-  const sortedYears = Object.keys(memberData).sort((a, b) => b.localeCompare(a));
+  const data = memberData;
+  const sortedYears = Object.keys(memberData).sort((a, b) =>
+    b.localeCompare(a)
+  );
 
   const [activeYear, setActiveYear] = useState(sortedYears[0]); // 默认为第一个年份
-  const [activeFocus, setActiveFocus] = useState('All'); // 默认选中所有 focus
+  const [activeFocus, setActiveFocus] = useState("All"); // 默认选中所有 focus
   const [isExpanded, setIsExpanded] = useState(false); // 默认不展开年份选择
 
-  const displayedYears = isExpanded ? sortedYears : sortedYears.slice(0, visibleYearsCount);
+  const displayedYears = isExpanded
+    ? sortedYears
+    : sortedYears.slice(0, visibleYearsCount);
 
   // 当 activeYear 改变时，检查 focus 是否存在于新的年份中
   useEffect(() => {
-    const focuses = new Set(data[activeYear].map(member => member.focus));
-    if (!focuses.has(activeFocus) && activeFocus !== 'All') {
-      setActiveFocus('All');
+    const focuses = new Set(data[activeYear].map((member) => member.focus));
+    if (!focuses.has(activeFocus) && activeFocus !== "All") {
+      setActiveFocus("All");
     }
   }, [activeYear, activeFocus, data]);
 
@@ -32,19 +42,24 @@ export default function Component() {
       acc[member.focus] = (acc[member.focus] || 0) + 1;
       return acc;
     }, {});
-    const focusesWithCount = Array.from(new Set(data[activeYear].map(member => member.focus))).map(focus => ({
+    const focusesWithCount = Array.from(
+      new Set(data[activeYear].map((member) => member.focus))
+    ).map((focus) => ({
       focus,
-      count: focusCountMap[focus]
+      count: focusCountMap[focus],
     }));
-    return [{ focus: 'All', count: data[activeYear].length }, ...focusesWithCount];
+    return [
+      { focus: "All", count: data[activeYear].length },
+      ...focusesWithCount,
+    ];
   }, [activeYear, data]);
 
   // 过滤成员数据基于当前选定的 focus
   const filteredMembers = useMemo(() => {
-    if (activeFocus === 'All') {
+    if (activeFocus === "All") {
       return data[activeYear];
     }
-    return data[activeYear].filter(member => member.focus === activeFocus);
+    return data[activeYear].filter((member) => member.focus === activeFocus);
   }, [activeYear, activeFocus, data]);
 
   return (
@@ -55,7 +70,11 @@ export default function Component() {
           <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)]'}`}
+            ${
+              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-white"
+            }`}
             onClick={() => setActiveYear(year)}
           >
             {year} ({data[year].length})
@@ -64,22 +83,32 @@ export default function Component() {
         {Object.keys(data).length > visibleYearsCount && (
           <div
             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)]'"
+            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-white '"
           >
-            {isExpanded ? '< 收起' : '> 更多'}
+            {isExpanded ? "< 收起" : "> 更多"}
           </div>
         )}
       </div>
       <div className="mb-12">
-        <h2 className="text-2xl font-bold mb-6">{(parseInt(activeYear,10) - 1) + " - " + activeYear + "学年"}</h2>
-        <p><u>注:方向按成为正式成员时的聚焦方向归类，有多个方向以优先级最高的方向作为分类依据</u></p>
+        <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 }) => (
             <div
               key={focus}
               className={`px-4 py-2 mr-2 mb-2 whitespace-nowrap rounded text-sm font-medium transition ease-in-out duration-300 cursor-pointer
-                        ${activeFocus === focus ? '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)]'}`}
+                        ${
+                          activeFocus === focus
+                            ? "bg-[var(--ifm-color-primary)] text-white"
+                            : "text-[var(--ifm-color-primary)] bg-gray-200 hover:bg-[var(--ifm-color-primary-lightest)] hover:text-white"
+                        }`}
               onClick={() => setActiveFocus(focus)}
             >
               {focus} ({count})
@@ -88,23 +117,27 @@ export default function Component() {
         </div>
         {/* 成员展示 */}
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
-          {filteredMembers.
-            sort(compareMembers).
-            map((member) => (
+          {filteredMembers.sort(compareMembers).map((member) => (
             <div
               key={member.avatar}
               className="flex flex-col items-center gap-1 bg-white dark:bg-gray-950 p-2 rounded-lg shadow-md" // 添加 max-w-xs 和 mx-auto 以限制卡片宽度并在其父容器中居中
             >
               <Avatar>
                 <LazyLoad offset={200}>
-                  <img src={imgPrefix + 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>
               </Avatar>
               <div className="text-center">
                 {/* name */}
                 <h3 className="font-semibold text-lg mb-1">{member.name}</h3>
                 {/* major */}
-                <p className="text-gray-500 dark:text-gray-400 text-xs mb-1">{member.major}</p>
+                <p className="text-gray-500 dark:text-gray-400 text-xs mb-1">
+                  {member.major}
+                </p>
                 {/* Github link */}
                 {member.github && (
                   <a
@@ -133,5 +166,5 @@ export default function Component() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -28,13 +28,13 @@
   --ifm-color-primary-light: #fedba8;
   --ifm-color-primary-lighter: #fee3bb;
   --ifm-color-primary-lightest: #fffaf3;
-  --ifm-color-secondary: #995900;
-  --ifm-color-secondary-dark: #8a5000;
-  --ifm-color-secondary-darker: #824c00;
-  --ifm-color-secondary-darkest: #6b3e00;
-  --ifm-color-secondary-light: #a86200;
-  --ifm-color-secondary-lighter: #b06600;
-  --ifm-color-secondary-lightest: #995900;
+  /* --ifm-color-secondary: #ffffff;
+  --ifm-color-secondary-dark: #e6e6e6;
+  --ifm-color-secondary-darker: #d9d9d9;
+  --ifm-color-secondary-darkest: #b3b3b3;
+  --ifm-color-secondary-light: #ffffff;
+  --ifm-color-secondary-lighter: #ffffff;
+  --ifm-color-secondary-lightest: #ffffff; */
   /* --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); */
 }
 

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -64,10 +64,6 @@
 
 }
 
-/* .indexCtas a, */
-.indexCtas a:hover {
-  color: white !important;
-}
 
 .indexCtas a:last-of-type {
   margin: 20px 36px;