hd-garden 0.7.0 → 0.8.0

package/app/components/TableOfContents.tsx

@@ -10,6 +10,7 @@ import {
   type ReactNode,
 } from "react";
 import { List, X } from "@phosphor-icons/react";
+import { ui, type UiLang } from "../lib/i18n";
 
 type Heading = { depth: number; text: string; id: string; no?: string };
 
@@ -115,11 +116,16 @@ const scrollToHeading = (id: string) => {
 
 export function TableOfContents({
   headings,
-  label = "本篇目录",
+  label,
+  lang,
 }: {
   headings: Heading[];
   label?: string;
+  /** Defaults to the site language; the bilingual handbook passes its own. */
+  lang?: UiLang;
 }) {
+  const t = ui(lang);
+  label ??= t.toc;
   const [activeId, setActiveId] = useState(headings[0]?.id);
   const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
     () => new Set(),
@@ -368,7 +374,7 @@ export function TableOfContents({
               type="button"
               aria-controls={childListId}
               aria-expanded={!collapsed}
-              aria-label={`${collapsed ? "展开" : "收起"}「${node.text}」的子目录`}
+              aria-label={t.tocToggle(collapsed, node.text)}
               onClick={() => toggleSection(node.id)}
             >
               <span aria-hidden="true">{collapsed ? "+" : "−"}</span>
@@ -396,25 +402,25 @@ export function TableOfContents({
         type="button"
         aria-controls={panelId}
         aria-expanded={mobileOpen}
-        aria-label={`打开${label}${activeHeading ? `，当前章节：${activeHeading.text}` : ""}`}
+        aria-label={`${t.open}${label}${activeHeading ? `${t.currentSection}${activeHeading.text}` : ""}`}
         tabIndex={mobileOpen ? -1 : 0}
         data-mobile-open={mobileOpen}
         onClick={() => setMobileOpen(true)}
       >
         <List size={17} weight="bold" aria-hidden="true" />
-        <span>目录</span>
+        <span>{t.tocShort}</span>
       </button>
       {/* Without JavaScript the button above does nothing. This link opens the
           drawer through :target instead; CSS shows it only when scripting is
           off, so with JavaScript nothing here is visible. */}
-      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`打开${label}`}>
+      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`${t.open}${label}`}>
         <List size={17} weight="bold" aria-hidden="true" />
-        <span>目录</span>
+        <span>{t.tocShort}</span>
       </a>
       <button
         className="toc-mobile-backdrop"
         type="button"
-        aria-label={`关闭${label}`}
+        aria-label={`${t.close}${label}`}
         tabIndex={mobileOpen ? 0 : -1}
         data-mobile-open={mobileOpen}
         onClick={() => closeMobileToc(true)}
@@ -431,12 +437,12 @@ export function TableOfContents({
             ref={mobileCloseRef}
             className="toc-mobile-close"
             type="button"
-            aria-label={`关闭${label}`}
+            aria-label={`${t.close}${label}`}
             onClick={() => closeMobileToc(true)}
           >
             <X size={18} aria-hidden="true" />
           </button>
-          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`关闭${label}`}>
+          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`${t.close}${label}`}>
             <X size={18} aria-hidden="true" />
           </a>
         </div>

package/app/components/ThoughtFeed.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { ThoughtCard } from "./ThoughtCard";
+import { FeedMore } from "./FeedMore";
+import { getPublishedThoughts } from "../lib/public-thoughts";
+import { ui } from "../lib/i18n";
+import { siteHref } from "../lib/site-href";
+import { siteConfig } from "../site.config";
+import { pageCount, pageItems, pagePath, pageSizeOf } from "../../ui/garden/paging.mjs";
+
+export const thoughtsPageSize = () => pageSizeOf(siteConfig.pages.thoughts.pageSize);
+export const thoughtsPageCount = () => pageCount(getPublishedThoughts().length, thoughtsPageSize());
+export const thoughtsPageHref = (page: number) => siteHref(pagePath("/thoughts", page));
+
+/** One page of 随想 and the link (or automatic loading) to the next. */
+export function ThoughtFeed({ page }: { page: number }) {
+  const t = ui();
+  const all = getPublishedThoughts();
+  const total = thoughtsPageCount();
+  const items = pageItems(all, page, thoughtsPageSize());
+  const next = page < total ? thoughtsPageHref(page + 1) : null;
+  return (
+    <>
+      <div className="thought-stream" data-feed-page={page}>
+        {items.map((thought) => (
+          <ThoughtCard key={thought.slug} thought={thought} />
+        ))}
+      </div>
+      {page > 1 ? (
+        <p className="feed-prev">
+          <Link href={thoughtsPageHref(page - 1)} rel="prev">{t.prevPage}</Link>
+          <span>{t.pageOf(page, total)}</span>
+        </p>
+      ) : null}
+      <FeedMore
+        next={next}
+        streamSelector=".thought-stream"
+        labels={{ nextPage: t.nextPage, loadingMore: t.loadingMore, loadFailed: t.loadFailed, feedEnd: t.feedEnd }}
+      />
+    </>
+  );
+}

package/app/components/UiLang.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { siteLang, ui, type UiLang } from "../lib/i18n";
+
+/**
+ * The language of the framework chrome inside a page body (copy buttons, code
+ * tabs, file cards...). It is the site language everywhere except the /garden/
+ * handbook, whose pages set it from their own route (/garden/en/ is English).
+ */
+const UiLangContext = createContext<UiLang>(siteLang);
+
+export function UiLangProvider({ lang, children }: { lang?: UiLang; children: ReactNode }) {
+  return <UiLangContext.Provider value={lang ?? siteLang}>{children}</UiLangContext.Provider>;
+}
+
+export const useUiLang = () => useContext(UiLangContext);
+export const useUi = () => ui(useContext(UiLangContext));

package/app/components/Webmentions.tsx

@@ -8,6 +8,7 @@ import {
   Quotes,
   Repeat,
 } from "@phosphor-icons/react";
+import { ui } from "../lib/i18n";
 
 type WebmentionEntry = {
   author?: {
@@ -93,8 +94,8 @@ export function Webmentions({
       <div className="webmention-title">
         <LinkSimple size={21} />
         <div>
-          <h2 id="webmentions-heading">来自开放网络的回应</h2>
-          <p>引用、喜欢、转发和站外回复会通过 Webmention 回到这里。</p>
+          <h2 id="webmentions-heading">{ui().webmentions}</h2>
+          <p>{ui().webmentionsLead}</p>
         </div>
       </div>
 

package/app/components/garden/FilePreview.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useId, useRef, useState, type FocusEvent, type MouseEvent } from "react";
 import { createPortal } from "react-dom";
+import { ui, type UiLang } from "../../lib/i18n";
 import { previewBody, previewFrameProps } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph } from "./file-icons";
 
@@ -25,7 +26,8 @@ type Loaded = { state: "idle" | "loading" | "error" } | { state: "ready"; html:
  * The control is a link: without JavaScript it opens the same preview (or the
  * file) in a new tab, next to the card's download link.
  */
-export function FilePreview({ file, compact }: { file: PreviewFile; compact: boolean }) {
+export function FilePreview({ file, compact, lang }: { file: PreviewFile; compact: boolean; lang?: UiLang }) {
+  const t = ui(lang);
   const [open, setOpen] = useState(false);
   const [loaded, setLoaded] = useState<Loaded>({ state: "idle" });
   const trigger = useRef<HTMLAnchorElement>(null);
@@ -130,13 +132,13 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
                 {file.meta ? <div className="gf-meta">{file.meta}</div> : null}
               </div>
               <div className="gf-act">
-                <a className="gf-btn icon" href={file.url} download={file.name} aria-label={`下载 ${file.name}`} title="下载">
+                <a className="gf-btn icon" href={file.url} download={file.name} aria-label={t.downloadNamed(file.name)} title={t.download}>
                   <ActionGlyph name="download" />
                 </a>
-                <a className="gf-btn icon" href={file.url} target="_blank" rel="noopener noreferrer" aria-label={`在新标签页打开 ${file.name}`} title="在新标签页打开">
+                <a className="gf-btn icon" href={file.url} target="_blank" rel="noopener noreferrer" aria-label={t.openNamedInTab(file.name)} title={t.openInTab}>
                   <ActionGlyph name="external" />
                 </a>
-                <button ref={closeButton} type="button" className="gf-btn icon" onClick={close} aria-label="关闭预览" title="关闭">
+                <button ref={closeButton} type="button" className="gf-btn icon" onClick={close} aria-label={t.closePreview} title={ui(lang).close.trim()}>
                   <ActionGlyph name="close" />
                 </button>
               </div>
@@ -147,14 +149,14 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
                   <div className="markdown-body prose gf-doc" dangerouslySetInnerHTML={{ __html: loaded.html }} />
                 ) : loaded.state === "error" ? (
                   <div className="gf-state" role="alert">
-                    <p>预览没能载入。</p>
+                    <p>{t.previewFailed}</p>
                     <div className="gf-state-act">
-                      <button type="button" className="gf-btn" onClick={() => load()}>重试</button>
-                      <a className="gf-btn" href={file.url} download={file.name}>下载文件</a>
+                      <button type="button" className="gf-btn" onClick={() => load()}>{t.retry}</button>
+                      <a className="gf-btn" href={file.url} download={file.name}>{t.downloadFile}</a>
                     </div>
                   </div>
                 ) : (
-                  <div className="gf-state" role="status">正在载入预览…</div>
+                  <div className="gf-state" role="status">{t.previewLoading}</div>
                 )}
               </div>
             ) : (
@@ -165,7 +167,7 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
                 <span tabIndex={0} className="gf-sentinel" data-gf-sentinel="after" onFocus={fromAfter} />
               </div>
             )}
-            <p className="gf-hint">Esc 关闭</p>
+            <p className="gf-hint">{t.escClose}</p>
           </aside>
         </div>,
         document.body,
@@ -183,10 +185,10 @@ export function FilePreview({ file, compact }: { file: PreviewFile; compact: boo
         data-compact={compact ? "true" : undefined}
         onClick={openDrawer}
         aria-haspopup="dialog"
-        aria-label={`预览 ${file.name}`}
+        aria-label={t.previewNamed(file.name)}
       >
         <ActionGlyph name="eye" />
-        <span className="gf-lb">预览</span>
+        <span className="gf-lb">{t.preview}</span>
       </a>
       {drawer}
     </>

package/app/components/garden/GardenBlock.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiLang } from "../UiLang";
 import { readGardenPayload } from "../../lib/remark-garden.mjs";
 import {
   GardenCard,
@@ -17,6 +18,7 @@ import {
 import { GardenFile } from "./GardenFile";
 
 export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
+  const lang = useUiLang();
   const block = readGardenPayload(dataPayload);
   if (!block) return null;
   if (block.legacy && block.suggestion) return <GardenLegacy suggestion={String(block.suggestion)} />;
@@ -42,7 +44,7 @@ export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
       return <GardenInteractive block={{ id: block.id, props, children: block.children }} />;
     case "file":
       // Post bodies render file cards on the server (MarkdownArticle); this path has no Markdown preview.
-      return <GardenFile props={props} />;
+      return <GardenFile props={props} lang={lang} />;
     default:
       return <GardenUnknown name={String(block.name)} />;
   }

package/app/components/garden/GardenFile.tsx

@@ -1,4 +1,5 @@
 // Server component: the card for `garden file`. Only the 预览 control is a client island.
+import { ui, type UiLang } from "../../lib/i18n";
 import { blockFiles, fileMeta } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph, safeFileHref } from "./file-icons";
 import { FilePreview, type PreviewFile } from "./FilePreview";
@@ -19,7 +20,8 @@ type FileEntry = {
 
 const PREVIEWS = new Set(["md", "html", "pdf"]);
 
-export function GardenFile({ props }: { props: Record<string, unknown> }) {
+export function GardenFile({ props, lang }: { props: Record<string, unknown>; lang?: UiLang }) {
+  const t = ui(lang);
   const block = blockFiles(props) as { layout?: string; title?: string; files: FileEntry[] };
   const files = block.files.filter((file) => safeFileHref(file.url));
   if (!files.length) return null;
@@ -29,7 +31,7 @@ export function GardenFile({ props }: { props: Record<string, unknown> }) {
       {group && block.title ? <div className="gf-title">{block.title}</div> : null}
       {files.map((file, index) => {
         const href = safeFileHref(file.url);
-        const name = file.name || file.title || "文件";
+        const name = file.name || file.title || t.file;
         const title = file.title || name;
         const meta = fileMeta(file);
         const previewSrc = file.preview === "md" ? safeFileHref(file.previewSrc) : "";
@@ -44,20 +46,20 @@ export function GardenFile({ props }: { props: Record<string, unknown> }) {
               {meta ? <div className="gf-meta">{meta}</div> : null}
             </div>
             <div className="gf-act">
-              {previewFile ? <FilePreview file={previewFile} compact={group} /> : null}
+              {previewFile ? <FilePreview file={previewFile} compact={group} lang={lang} /> : null}
               {file.remote ? (
-                <a className="gf-btn icon" href={href} target="_blank" rel="noopener noreferrer" aria-label={`在新标签页打开 ${name}`} title="在新标签页打开">
+                <a className="gf-btn icon" href={href} target="_blank" rel="noopener noreferrer" aria-label={t.openNamedInTab(name)} title={t.openInTab}>
                   <ActionGlyph name="external" />
                 </a>
               ) : null}
               {group ? (
-                <a className="gf-btn icon" href={href} download={file.remote ? undefined : name} aria-label={`下载 ${name}`} title="下载">
+                <a className="gf-btn icon" href={href} download={file.remote ? undefined : name} aria-label={t.downloadNamed(name)} title={t.download}>
                   <ActionGlyph name="download" />
                 </a>
               ) : (
-                <a className="gf-btn pri" href={href} download={file.remote ? undefined : name} aria-label={`下载 ${name}`}>
+                <a className="gf-btn pri" href={href} download={file.remote ? undefined : name} aria-label={t.downloadNamed(name)}>
                   <ActionGlyph name="download" />
-                  <span className="gf-lb">下载</span>
+                  <span className="gf-lb">{t.download}</span>
                 </a>
               )}
             </div>

package/app/components/garden/blocks.tsx

@@ -2,11 +2,13 @@
 
 import { useEffect, useId, useRef, useState, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
-import { stringify } from "yaml";
+import { useUi, useUiLang } from "../UiLang";
+import { langOf, ui } from "../../lib/i18n";
+import { interactiveUiSource } from "../../../ui/core/garden-fence.mjs";
 import { markdownPlugins } from "../../lib/markdown-plugins";
 import { compileUiBlock } from "../../../ui/core/compile.mjs";
 import { splitCompareLine } from "../../../ui/garden/compare-line.mjs";
-import { UiErrorCard, UiFigure, type Diagnostic, type UiPayload } from "../../../ui/react";
+import { RuntimeLangProvider, UiErrorCard, UiFigure, type Diagnostic, type UiPayload } from "../../../ui/react";
 import { FullscreenFrame, SandboxFrame } from "./chrome";
 
 function Rich({ text }: { text: string }) {
@@ -187,7 +189,8 @@ function chartRows(props: Record<string, unknown>) {
 export function GardenChart({ props }: { props: Record<string, unknown> }) {
   const rows = chartRows(props);
   const max = Math.max(...rows.map((row) => row.y), 1);
-  const title = String(props.title ?? "图表");
+  const t = useUi();
+  const title = String(props.title ?? t.chart);
   return (
     <figure className="g-chart" role="group" aria-label={title}>
       {props.title ? <p className="g-chart-t">{title}</p> : null}
@@ -201,9 +204,9 @@ export function GardenChart({ props }: { props: Record<string, unknown> }) {
         ))}
       </div>
       <details className="g-chart-data">
-        <summary>查看数据表</summary>
+        <summary>{t.dataTable}</summary>
         <table>
-          <thead><tr><th>{String(props.xLabel ?? (typeof props.x === "string" ? props.x : "项目"))}</th><th>{String(props.yLabel ?? "数值")}</th></tr></thead>
+          <thead><tr><th>{String(props.xLabel ?? (typeof props.x === "string" ? props.x : t.item))}</th><th>{String(props.yLabel ?? t.value)}</th></tr></thead>
           <tbody>
             {rows.map((row) => <tr key={row.x}><td>{row.x}</td><td>{row.label}</td></tr>)}
           </tbody>
@@ -216,11 +219,11 @@ export function GardenChart({ props }: { props: Record<string, unknown> }) {
 
 type Part = { id: string; label: string; text: string };
 
-function partsOf(props: Record<string, unknown>): Part[] {
+function partsOf(props: Record<string, unknown>, partLabel: (n: number) => string): Part[] {
   if (!Array.isArray(props.parts)) return [];
   return props.parts.map((part, index) => {
     const item = part as Record<string, unknown>;
-    const label = String(item.label ?? item.name ?? `部分 ${index + 1}`);
+    const label = String(item.label ?? item.name ?? partLabel(index + 1));
     return { id: String(item.id ?? item.name ?? label), label, text: String(item.text ?? "") };
   });
 }
@@ -240,7 +243,8 @@ function partOn(selected: string, token: string) {
 }
 
 export function GardenFigure({ props, children }: { props: Record<string, unknown>; children?: string }) {
-  const parts = partsOf(props);
+  const t = useUi();
+  const parts = partsOf(props, t.part);
   const [selected, setSelected] = useState(parts[0]?.id ?? "all");
   const svgRef = useRef<HTMLDivElement>(null);
   const base = useId();
@@ -286,7 +290,7 @@ export function GardenFigure({ props, children }: { props: Record<string, unknow
   const body = (
     <figure className="g-explore" data-g="explore" data-sel={selected} ref={svgRef}>
       {parts.length ? (
-        <div role="tablist" aria-label="选择一个部分">
+        <div role="tablist" aria-label={t.pickPart}>
           {parts.map((part, index) => (
             <button
               key={part.id}
@@ -324,7 +328,7 @@ export function GardenFigure({ props, children }: { props: Record<string, unknow
       {typeof props.caption === "string" ? <figcaption><Rich text={props.caption} /></figcaption> : null}
     </figure>
   );
-  return parts.length || svg ? <FullscreenFrame label="结构图">{body}</FullscreenFrame> : body;
+  return parts.length || svg ? <FullscreenFrame label={t.diagram}>{body}</FullscreenFrame> : body;
 }
 
 function htmlHasScript(source: string) {
@@ -336,6 +340,8 @@ function isLightWidget(source: string) {
 }
 
 function bindGardenWidgets(root: HTMLElement) {
+  const attr = root.closest("[lang]")?.getAttribute("lang");
+  const t = ui(attr ? langOf(attr) : undefined);
   root.querySelectorAll<HTMLElement>("[data-g=tabs]").forEach((widget) => {
     const list = widget.querySelector<HTMLElement>(":scope > [role=tablist]");
     const tabs = [...(list?.querySelectorAll<HTMLElement>(":scope > [role=tab]") ?? [])];
@@ -373,12 +379,12 @@ function bindGardenWidgets(root: HTMLElement) {
       const chosen = form.querySelector<HTMLInputElement>("input:checked");
       if (!chosen) {
         out.className = "g-quiz-out";
-        out.textContent = "先选一个答案。";
+        out.textContent = t.pickAnswer;
         return;
       }
       const correct = chosen.value === form.dataset.answer;
       out.className = `g-quiz-out ${correct ? "ok" : "no"}`;
-      out.textContent = correct ? "✓ 答对了" : "✗ 再想想";
+      out.textContent = correct ? t.correct : t.wrong;
       if (explain) explain.hidden = !correct;
     });
   });
@@ -446,7 +452,7 @@ function bindGardenWidgets(root: HTMLElement) {
       const equation = calc.querySelector("[data-calc]");
       if (equation && spec.show) {
         const shown = spec.show.replace(/\{(\w+)\}/g, (_, key: string) => String(values[key]));
-        equation.textContent = `${shown} = ${spec.format === "GB" ? `${Math.round(result).toLocaleString("en-US")} 字节` : String(Math.round(result * 1e4) / 1e4)}`;
+        equation.textContent = `${shown} = ${spec.format === "GB" ? `${Math.round(result).toLocaleString("en-US")} ${t.bytes}` : String(Math.round(result * 1e4) / 1e4)}`;
       }
     };
     calc.addEventListener("input", run);
@@ -484,9 +490,10 @@ function LightGardenHtml({ code }: { code: string }) {
 
 export function GardenHtml({ props, children }: { props: Record<string, unknown>; children?: string }) {
   const code = typeof props.code === "string" ? props.code : children || "";
+  const t = useUi();
   const title = String(props.title ?? "HTML");
   if (!code && typeof props.src === "string") {
-    return <p className="g-embed-note">HTML 在 {props.src}。发布时由同名目录读入。</p>;
+    return <p className="g-embed-note">{t.htmlAt(String(props.src))}</p>;
   }
   if (htmlHasScript(code)) {
     return <SandboxFrame html={code} title={title} />;
@@ -499,36 +506,38 @@ export function GardenHtml({ props, children }: { props: Record<string, unknown>
 }
 
 export function GardenInteractive({ block }: { block: { id?: string | null; props: Record<string, unknown>; children?: string } }) {
-  const header = {
-    id: block.id || block.props.id || "interactive",
-    caption: block.props.caption ?? "",
-    intent: block.props.intent ?? "",
-    ...(block.props.expect ? { expect: block.props.expect } : {}),
-  };
-  const source = `---\n${stringify(header)}---\n${block.children ?? ""}`;
+  const t = useUi();
+  const lang = useUiLang();
+  // Same source `garden ui check` validates (ui/core/garden-fence.mjs).
+  const { source, header } = interactiveUiSource({ id: block.id ?? null, props: block.props, children: block.children ?? "" });
   const { payload, check } = compileUiBlock(source);
   if (!payload) {
     return (
+      <RuntimeLangProvider lang={lang}>
       <UiErrorCard
         id={String(header.id)}
         caption={String(header.caption)}
         diagnostics={(check.diagnostics ?? []) as Diagnostic[]}
       />
+      </RuntimeLangProvider>
     );
   }
   return (
-    <FullscreenFrame label={String(header.caption || "交互")}>
+    <RuntimeLangProvider lang={lang}>
+    <FullscreenFrame label={String(header.caption || t.interactive)}>
       <div className="g-play">
         <UiFigure payload={payload as UiPayload} />
       </div>
     </FullscreenFrame>
+    </RuntimeLangProvider>
   );
 }
 
 export function GardenIdea({ text }: { text: string }) {
+  const t = useUi();
   return (
     <aside className="g-idea">
-      <p className="g-example-label">想法 · 发布前编译</p>
+      <p className="g-example-label">{t.ideaLabel}</p>
       <p>{text}</p>
     </aside>
   );
@@ -539,7 +548,8 @@ export function GardenLegacy({ suggestion }: { suggestion: string }) {
 }
 
 export function GardenUnknown({ name }: { name: string }) {
-  return <p className="g-embed-note">未知 Garden 块：{name}</p>;
+  const t = useUi();
+  return <p className="g-embed-note">{t.unknownBlock(name)}</p>;
 }
 
 export function GardenMessage({ children }: { children: ReactNode }) {

package/app/components/garden/chrome.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useUi } from "../UiLang";
+
 import {
   useEffect,
   useId,
@@ -47,7 +49,9 @@ function writeClipboard(text: string) {
   });
 }
 
-export function CopyButton({ getText, label = "复制代码" }: { getText: () => string; label?: string }) {
+export function CopyButton({ getText, label }: { getText: () => string; label?: string }) {
+  const t = useUi();
+  label = label ?? t.copyCode;
   const [done, setDone] = useState(false);
   const timer = useRef<number>(0);
 
@@ -56,8 +60,8 @@ export function CopyButton({ getText, label = "复制代码" }: { getText: () =>
       <button
         type="button"
         className={`ux-btn ux-copy${done ? " ux-done" : ""}`}
-        aria-label={done ? "已复制" : label}
-        title={done ? "已复制" : label}
+        aria-label={done ? t.copied : label}
+        title={done ? t.copied : label}
         onClick={() => {
           const text = getText();
           writeClipboard(text).then(() => {
@@ -67,9 +71,9 @@ export function CopyButton({ getText, label = "复制代码" }: { getText: () =>
           }).catch(() => setDone(false));
         }}
       >
-        {done ? "已复制" : COPY_ICON}
+        {done ? t.copied : COPY_ICON}
       </button>
-      <span className="ux-live" aria-live="polite">{done ? "已复制到剪贴板" : ""}</span>
+      <span className="ux-live" aria-live="polite">{done ? t.copiedLive : ""}</span>
     </>
   );
 }
@@ -88,12 +92,12 @@ export function CodeCopy({ children }: { children: ReactNode }) {
   );
 }
 
-function diffLines(source: string) {
+function diffLines(source: string, t: ReturnType<typeof useUi>) {
   return source.replace(/\n$/u, "").split("\n").map((line) => {
     const kind = line.startsWith("+") ? "add" : line.startsWith("-") ? "del" : "ctx";
     const body = kind === "ctx" ? line.replace(/^ /u, "") : line.slice(1);
     const mark = kind === "add" ? "+" : kind === "del" ? "−" : " ";
-    const spoken = kind === "add" ? "（新增）" : kind === "del" ? "（删除）" : "";
+    const spoken = kind === "add" ? t.diffAdded : kind === "del" ? t.diffRemoved : "";
     return { kind, body, mark, spoken };
   });
 }
@@ -109,11 +113,12 @@ export function CodeDiff({
 }) {
   const [tab, setTab] = useState(0);
   const base = useId();
-  const tabs = ["代码", "对比上一版"];
+  const t = useUi();
+  const tabs = t.codeTabs;
 
   return (
     <div className="g-tabs g-code-group g-codediff" data-g="tabs">
-      <div role="tablist" aria-label="代码">
+      <div role="tablist" aria-label={t.codeTabsLabel}>
         {tabs.map((label, index) => (
           <button
             key={label}
@@ -146,7 +151,7 @@ export function CodeDiff({
       <div role="tabpanel" id={`${base}-p1`} aria-labelledby={`${base}-t1`} hidden={tab !== 1}>
         <pre className="code g-diff">
           <code>
-            {diffLines(diff).map((line, index) => (
+            {diffLines(diff, t).map((line, index) => (
               <span className={`d-${line.kind}`} key={index}>
                 <span className="d-m" aria-hidden="true">{line.mark}</span>
                 {line.body}
@@ -164,7 +169,9 @@ function fullscreenElement() {
   return document.fullscreenElement || (document as Document & { webkitFullscreenElement?: Element }).webkitFullscreenElement || null;
 }
 
-export function FullscreenFrame({ children, label = "演示" }: { children: ReactNode; label?: string }) {
+export function FullscreenFrame({ children, label }: { children: ReactNode; label?: string }) {
+  const t = useUi();
+  label = label ?? t.demo;
   const ref = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const restoreRef = useRef<HTMLElement | null>(null);
@@ -255,8 +262,8 @@ export function FullscreenFrame({ children, label = "演示" }: { children: Reac
           ref={buttonRef}
           type="button"
           className="ux-btn ux-fsb"
-          aria-label={active ? "退出全屏" : "全屏"}
-          title={active ? "退出全屏" : "全屏"}
+          aria-label={active ? t.exitFullscreen : t.fullscreen}
+          title={active ? t.exitFullscreen : t.fullscreen}
           onClick={() => (active ? close() : open())}
         >
           {active ? EXIT_ICON : ENTER_ICON}