diff --git a/styles/index.scss b/styles/index.scss
index e3c704b0..084b4711 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -224,6 +224,7 @@
.docs-trial__install,
.docs-trial__demo {
display: flex;
+ min-width: 0;
flex-direction: column;
padding: 20px;
border-radius: 16px;
@@ -252,6 +253,7 @@
}
.docs-trial__command {
+ min-width: 0;
overflow: hidden;
border: 1px solid var(--rp-c-divider);
border-radius: 12px;
@@ -301,14 +303,16 @@
.docs-trial__command-body {
display: flex;
min-height: 54px;
+ min-width: 0;
align-items: center;
gap: 12px;
padding: 0 10px 0 15px;
}
.docs-trial__command-body code {
+ width: 0;
min-width: 0;
- flex: 1;
+ flex: 1 1 0;
padding: 0;
overflow-x: auto;
background: transparent;
@@ -398,6 +402,28 @@
color: var(--rp-c-brand);
}
+.docs-trial button.is-copied {
+ background: var(--home-brand-soft);
+ color: var(--rp-c-brand);
+}
+
+.rp-dark .docs-trial button:hover,
+.rp-dark .docs-trial button.is-copied {
+ background: var(--home-control-hover);
+ color: color-mix(in srgb, var(--rp-c-brand) 72%, white);
+}
+
+.docs-copy-button__status {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
.docs-trial__install-footer {
display: flex;
justify-content: space-between;
@@ -529,6 +555,11 @@
gap: 14px;
}
+.quick-start > *,
+.topic-groups > * {
+ min-width: 0;
+}
+
.quick-start a {
color: inherit;
text-decoration: none;
@@ -832,7 +863,7 @@
.quick-start,
.topic-groups {
- grid-template-columns: 1fr;
+ grid-template-columns: minmax(0, 1fr);
}
.topic-groups {
@@ -862,11 +893,21 @@
@media (max-width: 900px) {
.docs-trial__grid {
- grid-template-columns: 1fr;
+ grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 600px) {
+ .docs-home {
+ padding-right: 16px;
+ padding-left: 16px;
+ }
+
+ .docs-trial__install,
+ .docs-trial__demo {
+ padding: 16px;
+ }
+
.docs-trial__install-footer {
align-items: flex-start;
flex-direction: column;
diff --git a/theme/components/CopyButton.tsx b/theme/components/CopyButton.tsx
new file mode 100644
index 00000000..7d8b6ac9
--- /dev/null
+++ b/theme/components/CopyButton.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from "react";
+import MingcuteCheckLine from "~icons/mingcute/check-line";
+import MingcuteCopy2Line from "~icons/mingcute/copy-2-line";
+
+interface CopyButtonProps {
+ value: string;
+ label: string;
+ size?: number;
+}
+
+export function CopyButton({ value, label, size = 16 }: CopyButtonProps) {
+ const [copied, setCopied] = useState(false);
+ const resetTimer = useRef
(undefined);
+
+ useEffect(
+ () => () => {
+ window.clearTimeout(resetTimer.current);
+ },
+ [],
+ );
+
+ const handleCopy = async () => {
+ try {
+ await navigator.clipboard.writeText(value);
+ setCopied(true);
+ window.clearTimeout(resetTimer.current);
+ resetTimer.current = window.setTimeout(() => setCopied(false), 1500);
+ } catch {
+ setCopied(false);
+ }
+ };
+
+ return (
+
+ );
+}
From 922fe10b3938020dfefc6bc840a26e435d3d9e53 Mon Sep 17 00:00:00 2001
From: intoyang
Date: Sat, 5 Sep 2026 15:33:48 +0800
Subject: [PATCH 3/5] Refine homepage topic navigation
---
docs/index.mdx | 12 ++++++++----
styles/index.scss | 10 ++++++++++
2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/docs/index.mdx b/docs/index.mdx
index 3b1ff871..365d3f22 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -18,9 +18,10 @@ import PhPaintBrushBroadDuotone from "~icons/ph/paint-brush-broad-duotone";
import PhPaletteDuotone from "~icons/ph/palette-duotone";
import PhPaperclipDuotone from "~icons/ph/paperclip-duotone";
import PhPuzzlePieceDuotone from "~icons/ph/puzzle-piece-duotone";
-import PhQuestionDuotone from "~icons/ph/question-duotone";
+import PhQuestion from "~icons/ph/question";
import PhStorefrontDuotone from "~icons/ph/storefront-duotone";
import PhTerminalDuotone from "~icons/ph/terminal-duotone";
+import PhUsersThreeDuotone from "~icons/ph/users-three-duotone";
import MingcuteSettings3Line from "~icons/mingcute/settings-3-line";
import MingcuteWorld2Line from "~icons/mingcute/world-2-line";
import { Link } from "@rspress/core/runtime";
@@ -182,10 +183,10 @@ import { CopyButton } from "../theme/components/CopyButton";
查看全部功能文档→
@@ -215,7 +216,10 @@ import { CopyButton } from "../theme/components/CopyButton";
查看常见问题,或到社区论坛提问。