Separate storage shard meshes and unify Endor backup topology

apps/docs/src/components/ArchitectureFigure.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 
 const source = "/figures/endor-architecture.svg";
+const figureWidth = 2000;
 
 export function ArchitectureFigure({ alt }: { alt: string }) {
   const dialog = useRef<HTMLDialogElement>(null);
@@ -15,7 +16,7 @@ export function ArchitectureFigure({ alt }: { alt: string }) {
   }
   function changeZoom(delta: number) {
     const current = fit
-      ? ((pan.current?.clientWidth ?? 1776) - 16) / 1760
+      ? ((pan.current?.clientWidth ?? figureWidth + 16) - 16) / figureWidth
       : zoom;
     setFit(false);
     setZoom(
@@ -25,7 +26,7 @@ export function ArchitectureFigure({ alt }: { alt: string }) {
   return (
     <figure className="architecture-figure">
       <span className="figure-toolbar">
-        <span>ENDOR / 概念架构草案</span>
+        <span>ENDOR / 架构拓扑</span>
         <button ref={trigger} onClick={open}>
           放大查看 ↗
         </button>
@@ -39,7 +40,7 @@ export function ArchitectureFigure({ alt }: { alt: string }) {
         <img src={source} alt={alt} />
       </button>
       <span className="figure-caption">
-        两区域拓扑 · 点击放大查看全连接与复制路径
+        多区域拓扑 · 独立分片群与统一备份 · 点击放大查看
       </span>
       <dialog
         ref={dialog}
@@ -48,9 +49,7 @@ export function ArchitectureFigure({ alt }: { alt: string }) {
         onClose={() => trigger.current?.focus()}
       >
         <div className="figure-viewer-toolbar">
-          <strong>
-            Endor 概念架构 <small>草案</small>
-          </strong>
+          <strong>Endor 架构拓扑</strong>
           <div className="figure-controls">
             <button
               onClick={() => changeZoom(-0.25)}
@@ -91,12 +90,12 @@ export function ArchitectureFigure({ alt }: { alt: string }) {
           <img
             src={source}
             alt={alt}
-            style={{ width: fit ? "100%" : 1760 * zoom }}
+            style={{ width: fit ? "100%" : figureWidth * zoom }}
           />
         </div>
         <p className="figure-viewer-hint">
           实线：请求 /
-          依赖　·　紫色：身份　·　蓝色点线：回源　·　金色：跨区备份。放大后可横向、纵向滚动，Esc
+          依赖　·　紫色：身份　·　蓝色点线：回源　·　金色：统一备份。放大后可横向、纵向滚动，Esc
           关闭。
         </p>
       </dialog>