Refine Tabularium into a readable light documentation workspace

2026-10-27 15:55:59 +08:00
parent 5c48dec887
commit 75debc0068
29 changed files with 2116 additions and 54 deletions
@@ -0,0 +1,57 @@
+import { useState } from "react";
+
+export function CodeBlock({
+  code,
+  language = "text",
+}: {
+  code: string;
+  language?: string;
+}) {
+  const [status, setStatus] = useState("复制");
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setStatus("已复制");
+    } catch {
+      setStatus("复制失败，请手动选择");
+    }
+    setTimeout(() => setStatus("复制"), 2400);
+  }
+  return (
+    <div className="code-block">
+      <div className="code-toolbar">
+        <span>{language === "sh" ? "Terminal" : language}</span>
+        <button onClick={copy} aria-label="复制代码">
+          {status}
+        </button>
+        <span className="sr-only" role="status">
+          {status === "复制" ? "" : status}
+        </span>
+      </div>
+      <pre>
+        <code>
+          {code
+            .replace(/\n$/, "")
+            .split("\n")
+            .map((line, i) => (
+              <span className="code-line" key={i}>
+                <span className="line-number" aria-hidden="true">
+                  {i + 1}
+                </span>
+                <span>
+                  {/^(pnpm|uv)\b/.test(line) ? (
+                    <>
+                      <span className="code-command">{line.split(" ")[0]}</span>
+                      {line.slice(line.indexOf(" "))}
+                    </>
+                  ) : (
+                    line || "\u00a0"
+                  )}
+                </span>
+              </span>
+            ))}
+        </code>
+      </pre>
+    </div>
+  );
+}