Explain Endor concepts with a reproducible multi-region topology

apps/docs/src/components/ArchitectureFigure.tsx

@@ -0,0 +1,105 @@
+import { useRef, useState } from "react";
+
+const source = "/figures/endor-architecture.svg";
+
+export function ArchitectureFigure({ alt }: { alt: string }) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  const pan = useRef<HTMLDivElement>(null);
+  const [fit, setFit] = useState(true);
+  const [zoom, setZoom] = useState(1);
+  function open() {
+    setFit(true);
+    setZoom(1);
+    dialog.current?.showModal();
+  }
+  function changeZoom(delta: number) {
+    const current = fit
+      ? ((pan.current?.clientWidth ?? 1776) - 16) / 1760
+      : zoom;
+    setFit(false);
+    setZoom(
+      Math.max(0.1, Math.min(2, Math.round((current + delta) * 100) / 100)),
+    );
+  }
+  return (
+    <figure className="architecture-figure">
+      <span className="figure-toolbar">
+        <span>ENDOR / 概念架构草案</span>
+        <button ref={trigger} onClick={open}>
+          放大查看 ↗
+        </button>
+      </span>
+      <button
+        className="figure-preview"
+        onClick={open}
+        aria-label="放大 Endor 架构图"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={source} alt={alt} />
+      </button>
+      <span className="figure-caption">
+        两区域拓扑 · 点击放大查看全连接与复制路径
+      </span>
+      <dialog
+        ref={dialog}
+        className="figure-dialog"
+        aria-label="Endor 架构图查看器"
+        onClose={() => trigger.current?.focus()}
+      >
+        <div className="figure-viewer-toolbar">
+          <strong>
+            Endor 概念架构 <small>草案</small>
+          </strong>
+          <div className="figure-controls">
+            <button
+              onClick={() => changeZoom(-0.25)}
+              aria-label="缩小架构图"
+              disabled={!fit && zoom <= 0.1}
+            >
+              −
+            </button>
+            <span aria-live="polite">
+              {fit ? "适应宽度" : `${Math.round(zoom * 100)}%`}
+            </span>
+            <button
+              onClick={() => changeZoom(0.25)}
+              aria-label="放大架构图"
+              disabled={!fit && zoom >= 2}
+            >
+              +
+            </button>
+            <button onClick={() => setFit(true)}>适应</button>
+            <a href={source} download="endor-architecture.svg">
+              下载 SVG
+            </a>
+            <button
+              onClick={() => dialog.current?.close()}
+              aria-label="关闭架构图"
+            >
+              关闭 ×
+            </button>
+          </div>
+        </div>
+        <div
+          ref={pan}
+          className="figure-pan"
+          tabIndex={0}
+          aria-label="架构图滚动区域，可使用方向键滚动"
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={source}
+            alt={alt}
+            style={{ width: fit ? "100%" : 1760 * zoom }}
+          />
+        </div>
+        <p className="figure-viewer-hint">
+          实线：请求 /
+          依赖　·　紫色：身份　·　蓝色点线：回源　·　金色：跨区备份。放大后可横向、纵向滚动，Esc
+          关闭。
+        </p>
+      </dialog>
+    </figure>
+  );
+}

apps/docs/src/components/Shell.tsx

@@ -116,7 +116,7 @@ export function Shell({
         <Brand />
         <nav className="top-nav" aria-label="主导航">
           <Link href="/">文档概览</Link>
-          <Link href="/docs/02-mounting-draft">架构设计</Link>
+          <Link href="/docs/00-endor-concepts-draft">架构设计</Link>
           <a href="https://gitea.entroia.com/Zayden-Jung/endorphin-tabularium-docs">
             仓库 ↗
           </a>