Feat: Add hover highlight

README.md

@@ -96,4 +96,3 @@ pnpm start            # 启动生产服务器
 # 导出
 pnpm export           # 导出静态站点到 /out 目录
 ```
-

app/docs/[...slug]/page.tsx

@@ -23,8 +23,10 @@ export default async function DocPage({ params }: Param) {
   return (
     <DocsPage toc={page.data.toc}>
       <DocsBody>
-        <h1>{page.data.title}</h1>
-        <Mdx components={getMDXComponents()} />
+        <h1 className="hover-darken-text">{page.data.title}</h1>
+        <div className="hover-darken">
+          <Mdx components={getMDXComponents()} />
+        </div>
       </DocsBody>
     </DocsPage>
   );

app/globals.css

@@ -277,3 +277,66 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* 通用 hover 变深效果 */
+  .hover-darken {
+    transition: filter 0.2s ease-in-out;
+  }
+
+  .hover-darken:hover {
+    filter: brightness(0.8);
+  }
+
+  /* 针对不同颜色类型的 hover 变深效果 */
+  .hover-darken-bg {
+    transition: all 0.2s ease-in-out;
+  }
+
+  .hover-darken-bg:hover {
+    background-color: #f0f0f0 !important;
+    transform: scale(1.02);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .hover-darken-text {
+    transition: filter 0.2s ease-in-out;
+  }
+
+  .hover-darken-text:hover {
+    filter: brightness(0.8);
+  }
+
+  /* 使用 CSS 变量实现更精确的颜色控制 */
+  .hover-darken-custom {
+    transition:
+      background-color 0.2s ease-in-out,
+      color 0.2s ease-in-out;
+  }
+
+  .hover-darken-custom:hover {
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+
+  /* 针对链接的特殊 hover 效果 */
+  .hover-link {
+    transition: all 0.2s ease-in-out;
+    position: relative;
+  }
+
+  .hover-link:hover {
+    filter: brightness(0.8);
+    transform: translateY(-1px);
+  }
+
+  /* 针对按钮的 hover 效果 */
+  .hover-button {
+    transition: all 0.2s ease-in-out;
+  }
+
+  .hover-button:hover {
+    filter: brightness(0.9);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}

app/page.tsx

@@ -10,22 +10,35 @@ export default function DocsIndex() {
     <main style={{ maxWidth: 800, margin: "40px auto", padding: 16 }}>
       <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 16 }}>Docs</h1>
       <ul style={{ display: "grid", gap: 12 }}>
-        {pages.map((p) => {
-          const href = `/docs/${p.slugs.join("/")}`;
-          return (
-            <li
-              key={href}
-              style={{ border: "1px solid #eee", borderRadius: 8, padding: 16 }}
+        {pages.map((d) => (
+          <li
+            key={d.slugs.join("/")}
+            className="hover-darken-bg"
+            style={{
+              border: "1px solid #eee",
+              borderRadius: 8,
+              padding: 16,
+              cursor: "pointer",
+            }}
+          >
+            <Link
+              href={`/docs/${d.slugs.join("/")}`}
+              className="hover-link block w-full h-full"
+              style={{
+                fontWeight: 600,
+                textDecoration: "none",
+                color: "inherit",
+              }}
             >
-              <Link href={href} style={{ fontWeight: 600 }}>
-                {p.data.title}
-              </Link>
-              {p.data.description && (
-                <p style={{ opacity: 0.8 }}>{p.data.description}</p>
+              {d.data.title}
+              {d.data.description && (
+                <p style={{ opacity: 0.8, marginTop: 8 }}>
+                  {d.data.description}
+                </p>
               )}
-            </li>
-          );
-        })}
+            </Link>
+          </li>
+        ))}
       </ul>
     </main>
   );

mdx-components.tsx

@@ -4,6 +4,56 @@ import type { MDXComponents } from "mdx/types";
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
+    a: ({ children, ...props }) => (
+      <a className="hover-link" {...props}>
+        {children}
+      </a>
+    ),
+    code: ({ children, ...props }) => (
+      <code className="hover-darken-text" {...props}>
+        {children}
+      </code>
+    ),
+    pre: ({ children, ...props }) => (
+      <pre className="hover-darken-bg" {...props}>
+        {children}
+      </pre>
+    ),
+    blockquote: ({ children, ...props }) => (
+      <blockquote className="hover-darken-bg" {...props}>
+        {children}
+      </blockquote>
+    ),
+    h1: ({ children, ...props }) => (
+      <h1 className="hover-darken-text" {...props}>
+        {children}
+      </h1>
+    ),
+    h2: ({ children, ...props }) => (
+      <h2 className="hover-darken-text" {...props}>
+        {children}
+      </h2>
+    ),
+    h3: ({ children, ...props }) => (
+      <h3 className="hover-darken-text" {...props}>
+        {children}
+      </h3>
+    ),
+    h4: ({ children, ...props }) => (
+      <h4 className="hover-darken-text" {...props}>
+        {children}
+      </h4>
+    ),
+    h5: ({ children, ...props }) => (
+      <h5 className="hover-darken-text" {...props}>
+        {children}
+      </h5>
+    ),
+    h6: ({ children, ...props }) => (
+      <h6 className="hover-darken-text" {...props}>
+        {children}
+      </h6>
+    ),
     ...components,
   };
 }