From ca32f687872bb122f87b2df153d9d2ab7590fbd6 Mon Sep 17 00:00:00 2001
From: StarHeart <starheart233@gmail.com>
Date: Mon, 8 Apr 2024 20:22:29 +0800
Subject: [PATCH] =?UTF-8?q?:memo:=20Docs:=20=E5=95=86=E5=BA=97=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20(#2633)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/components/Resource/Card/index.tsx      |  7 +++++--
 website/src/components/Resource/Card/styles.css     | 10 +++++++---
 .../src/components/Resource/DetailCard/index.tsx    | 10 +++-------
 .../src/components/Resource/ValidStatus/index.tsx   | 13 ++++++-------
 website/tailwind.config.js                          |  1 +
 5 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/website/src/components/Resource/Card/index.tsx b/website/src/components/Resource/Card/index.tsx
index 1e312707..5a990d48 100644
--- a/website/src/components/Resource/Card/index.tsx
+++ b/website/src/components/Resource/Card/index.tsx
@@ -40,8 +40,10 @@ export default function ResourceCard({
   return (
     <div className={clsx("resource-card-container", className)}>
       <div className="resource-card-header">
-        <div className="resource-card-header-title flex items-center">
-          {resource.name}
+        <div className="resource-card-header-title">
+          <div className="resource-card-header-text" data-tip={resource.name}>
+            <div className="truncate min-w-0">{resource.name}</div>
+          </div>
           {resource.is_official && (
             <FontAwesomeIcon
               className="resource-card-header-check"
@@ -49,6 +51,7 @@ export default function ResourceCard({
             />
           )}
           <ValidStatus
+            className="mx-2"
             resource={resource}
             validLink={registryLink as string}
             simple
diff --git a/website/src/components/Resource/Card/styles.css b/website/src/components/Resource/Card/styles.css
index 4b52b38e..4615e478 100644
--- a/website/src/components/Resource/Card/styles.css
+++ b/website/src/components/Resource/Card/styles.css
@@ -7,14 +7,18 @@
   }
 
   &-header {
-    @apply flex items-center w-full text-lg font-medium;
+    @apply min-w-0 flex items-center w-full text-lg font-medium;
 
     &-title {
-      @apply grow text-left truncate;
+      @apply min-w-0 grow justify-start flex items-center flex-initial;
+    }
+
+    &-text {
+      @apply min-w-0 cursor-help tooltip;
     }
 
     &-check {
-      @apply ml-2 text-success/90 fill-current;
+      @apply ml-2 text-green-600 dark:text-green-400 fill-current;
     }
 
     &-expand {
diff --git a/website/src/components/Resource/DetailCard/index.tsx b/website/src/components/Resource/DetailCard/index.tsx
index eab73809..7431cf37 100644
--- a/website/src/components/Resource/DetailCard/index.tsx
+++ b/website/src/components/Resource/DetailCard/index.tsx
@@ -114,7 +114,7 @@ export default function ResourceDetailCard({ resource }: Props) {
           <span className="detail-card-title-main flex items-center gap-x-1">
             {resource.name}
             {resource.is_official && (
-              <div className="rounded-md text-sm bg-success/10 text-success px-1 py-0.5">
+              <div className="rounded-md text-sm bg-green-400/10 text-green-600 px-1 py-0.5">
                 官方
               </div>
             )}
@@ -189,9 +189,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               href={homepageLink}
               target="_blank"
               rel="noreferrer"
-              className={
-                homepageLink ? "hover:underline hover:text-primary" : undefined
-              }
+              className={homepageLink && "hover:underline hover:text-primary"}
             >
               {moduleName}
             </a>
@@ -204,9 +202,7 @@ export default function ResourceDetailCard({ resource }: Props) {
               target="_blank"
               rel="noreferrer"
               className={
-                pypiProjectLink
-                  ? "hover:underline hover:text-primary"
-                  : undefined
+                pypiProjectLink && "hover:underline hover:text-primary"
               }
             >
               {projectLink}
diff --git a/website/src/components/Resource/ValidStatus/index.tsx b/website/src/components/Resource/ValidStatus/index.tsx
index c5fd8cd2..52149a66 100644
--- a/website/src/components/Resource/ValidStatus/index.tsx
+++ b/website/src/components/Resource/ValidStatus/index.tsx
@@ -59,13 +59,12 @@ export default function ValidDisplay({
           className={clsx({
             "rounded-md text-sm flex items-center gap-x-1 px-2 py-1 whitespace-nowrap":
               !simple,
-            "ml-2": simple,
-            "bg-success/10": !simple && isValid,
-            "text-success/90": isValid,
-            "bg-error/10": !simple && isInvalid,
-            "text-error/90": isInvalid,
-            "bg-info/10": !simple && isSkip,
-            "text-info/90": isSkip,
+            "bg-green-400/10": !simple && isValid,
+            "text-green-600 dark:text-green-400": isValid,
+            "bg-red-400/10": !simple && isInvalid,
+            "text-red-600 dark:text-red-400": isInvalid,
+            "bg-blue-400/10": !simple && isSkip,
+            "text-blue-600 dark:text-blue-400": isSkip,
           })}
         >
           <FontAwesomeIcon icon={validIcons[validStatus]} />
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index e5b9a6c5..64ae91c5 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -17,6 +17,7 @@ function excludeThemeColor(theme, exclude) {
 }
 
 module.exports = {
+  darkMode: ["class", '[data-theme="dark"]'],
   daisyui: {
     themes: [
       {