feat: 增加 ECharts 渲染与预览交互增强

- 新增可复用的 markdown-echarts 工作区，支持安全的 YAML 围栏、默认值、语义校验、错误占位和 SVG 渲染 - 将 ECharts 接入统一 Markdown、快速预览、精确预览与 PDF 链路，并复用 Mermaid 的不可跨页和超高图单页适配策略 - 默认示例加入 ECharts，增加源文本折叠、顶部文档状态、页码输入跳转与滚动同步 - 快速预览改用外层容器滚动，使滚动条与精确预览统一贴在预览区域右侧，并兼容显示缩放 - 完善 Docker 工作区复制、可配置 Compose 镜像、测试覆盖和进度文档
2026-07-27 16:05:14 +08:00
parent 1db21c80fc
commit f5a46f79f1
53 changed files with 3998 additions and 221 deletions
@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from "react";
+import { normalizePreviewPageNumber } from "./preview-page";
+
+interface PreviewPageControlProps {
+  current: number;
+  total: number;
+  onNavigate: (pageNumber: number) => void;
+}
+
+export function PreviewPageControl({
+  current,
+  total,
+  onNavigate
+}: PreviewPageControlProps) {
+  const [draft, setDraft] = useState(String(current));
+  const editingRef = useRef(false);
+
+  useEffect(() => {
+    if (!editingRef.current) {
+      setDraft(String(current));
+    }
+  }, [current, total]);
+
+  function commitPageNumber() {
+    const pageNumber = normalizePreviewPageNumber(draft, current, total);
+    setDraft(String(pageNumber));
+    if (pageNumber !== current) {
+      onNavigate(pageNumber);
+    }
+  }
+
+  return (
+    <label className="preview-page-control">
+      <span>第</span>
+      <input
+        type="number"
+        inputMode="numeric"
+        min={1}
+        max={total}
+        step={1}
+        value={draft}
+        aria-label="跳转页码"
+        onBlur={() => {
+          editingRef.current = false;
+          commitPageNumber();
+        }}
+        onChange={(event) => setDraft(event.target.value)}
+        onFocus={(event) => {
+          editingRef.current = true;
+          event.currentTarget.select();
+        }}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            event.currentTarget.blur();
+          }
+        }}
+      />
+      <span aria-live="polite">/ {total} 页</span>
+    </label>
+  );
+}