@arronqzy/react-view 1.0.3 → 1.0.5

package/src/panel/components/scope-config/ScopeTemplatePreviewHost.tsx

@@ -0,0 +1,238 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+
+import type { PanelElement } from "../../types";
+import { hasScopeTemplate } from "../../utils/scope-template";
+import {
+  collectElementScopeTemplateFields,
+  formatScopeTemplatePreview,
+  matchScopeTemplateFieldId,
+  resolveScopeTemplatePreview,
+} from "../../utils/scope-template-preview";
+
+const PREVIEW_SLOT_ATTR = "data-scope-preview-slot";
+const PREVIEW_KEY_ATTR = "data-scope-preview-key";
+
+type PreviewAnchor = {
+  key: string;
+  template: string;
+  fieldId?: string;
+  slot: HTMLElement;
+};
+
+function isPreviewTarget(
+  node: Element
+): node is HTMLInputElement | HTMLTextAreaElement {
+  if (node instanceof HTMLTextAreaElement) {
+    return node.dataset.scopeAutocomplete !== "off";
+  }
+  if (node instanceof HTMLInputElement) {
+    if (node.dataset.scopeAutocomplete === "off") return false;
+    const type = node.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function ensurePreviewKey(
+  input: HTMLInputElement | HTMLTextAreaElement,
+  keySeed: string
+): string {
+  const existing = input.getAttribute(PREVIEW_KEY_ATTR);
+  if (existing) return existing;
+  const key = `${keySeed}-${Math.random().toString(36).slice(2, 9)}`;
+  input.setAttribute(PREVIEW_KEY_ATTR, key);
+  return key;
+}
+
+function ensurePreviewSlot(
+  input: HTMLInputElement | HTMLTextAreaElement
+): HTMLElement {
+  const host = input.closest("label") ?? input.parentElement;
+  if (!host) return input;
+
+  const existing = host.querySelector(`[${PREVIEW_SLOT_ATTR}]`);
+  if (existing instanceof HTMLElement) return existing;
+
+  const slot = document.createElement("div");
+  slot.setAttribute(PREVIEW_SLOT_ATTR, "1");
+  input.insertAdjacentElement("afterend", slot);
+  return slot;
+}
+
+function removeOrphanPreviewSlots(container: HTMLElement) {
+  container.querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`).forEach((slot) => {
+    const host = slot.parentElement;
+    const input = host?.querySelector("input, textarea");
+    if (
+      !input ||
+      !(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) ||
+      !hasScopeTemplate(input.value)
+    ) {
+      slot.remove();
+    }
+  });
+}
+
+function inferFieldIdFromDom(
+  input: HTMLInputElement | HTMLTextAreaElement
+): string | undefined {
+  const label = input.closest("label");
+  const labelText = label?.textContent ?? "";
+  if (labelText.includes("类目")) return "chart.labelsText";
+  if (labelText.includes("数值")) return "chart.valuesText";
+  return undefined;
+}
+
+function ScopeTemplatePreviewPanel({
+  template,
+  scope,
+  fieldId,
+}: {
+  template: string;
+  scope: unknown;
+  fieldId?: string;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const previewValue = resolveScopeTemplatePreview(template, scope, fieldId);
+  const previewText = formatScopeTemplatePreview(previewValue);
+  const previewType = Array.isArray(previewValue)
+    ? `数组 · ${previewValue.length} 项`
+    : typeof previewValue;
+
+  return (
+    <div className="mt-1 rounded border border-border/60 bg-muted/30">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 px-2 py-1 text-left text-[10px] text-muted-foreground hover:bg-accent/40"
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <span className="font-medium text-foreground/80">解析预览</span>
+        <span className="shrink-0 text-[10px]">
+          {previewType} · {isExpanded ? "收起" : "展开"}
+        </span>
+      </button>
+      {isExpanded ? (
+        <pre className="max-h-28 overflow-auto border-t border-border/50 px-2 py-1.5 font-mono text-[10px] leading-relaxed text-foreground/90 whitespace-pre-wrap break-all">
+          {previewText}
+        </pre>
+      ) : null}
+    </div>
+  );
+}
+
+export function ScopeTemplatePreviewHost({
+  scope,
+  element,
+  containerRef,
+}: {
+  scope: unknown;
+  element: PanelElement | null;
+  containerRef?: RefObject<HTMLElement | null>;
+}) {
+  const keySeed = useId();
+  const [anchors, setAnchors] = useState<PreviewAnchor[]>([]);
+
+  const templateFields = useMemo(
+    () => (element ? collectElementScopeTemplateFields(element) : []),
+    [element]
+  );
+
+  const scanAnchors = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container || scope === undefined) {
+      setAnchors((prev) => (prev.length === 0 ? prev : []));
+      return;
+    }
+
+    const next: PreviewAnchor[] = [];
+    const inputs = container.querySelectorAll("input, textarea");
+    for (const node of inputs) {
+      if (!isPreviewTarget(node)) continue;
+      const template = node.value;
+      if (!hasScopeTemplate(template)) continue;
+
+      const fieldId =
+        matchScopeTemplateFieldId(template, templateFields) ??
+        inferFieldIdFromDom(node);
+      next.push({
+        key: ensurePreviewKey(node, keySeed),
+        template,
+        fieldId,
+        slot: ensurePreviewSlot(node),
+      });
+    }
+
+    removeOrphanPreviewSlots(container);
+    setAnchors((prev) => {
+      if (
+        prev.length === next.length &&
+        prev.every(
+          (item, index) =>
+            item.key === next[index]?.key &&
+            item.template === next[index]?.template &&
+            item.fieldId === next[index]?.fieldId
+        )
+      ) {
+        return prev;
+      }
+      return next;
+    });
+  }, [containerRef, keySeed, scope, templateFields]);
+
+  useEffect(() => {
+    scanAnchors();
+  }, [scanAnchors, element, scope]);
+
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container || scope === undefined) return;
+
+    const onInput = () => {
+      window.requestAnimationFrame(scanAnchors);
+    };
+
+    container.addEventListener("input", onInput, true);
+    const observer = new MutationObserver(onInput);
+    observer.observe(container, { childList: true, subtree: true });
+
+    return () => {
+      container.removeEventListener("input", onInput, true);
+      observer.disconnect();
+      container
+        .querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`)
+        .forEach((node) => node.remove());
+    };
+  }, [containerRef, scanAnchors, scope]);
+
+  if (scope === undefined || anchors.length === 0) return null;
+
+  return (
+    <>
+      {anchors.map((anchor) =>
+        createPortal(
+          <ScopeTemplatePreviewPanel
+            key={anchor.key}
+            template={anchor.template}
+            scope={scope}
+            fieldId={anchor.fieldId}
+          />,
+          anchor.slot
+        )
+      )}
+    </>
+  );
+}

package/src/panel/components/scope-config/ScopeTemplateUsageHint.tsx

@@ -0,0 +1,24 @@
+export function ScopeTemplateUsageHint() {
+  return (
+    <div className="space-y-2">
+      <p>
+        表单中可使用模版字符串引用 scope，例如{" "}
+        <code className="rounded bg-muted px-1">{`{scope?.a||0}`}</code>
+        、
+        <code className="rounded bg-muted px-1">{`{scope?.name||''}`}</code>
+        。支持 <code className="rounded bg-muted px-1">?.</code> 与{" "}
+        <code className="rounded bg-muted px-1">||</code> 占位。
+      </p>
+      <p>
+        数组展开模版{" "}
+        <code className="rounded bg-muted px-1">{`[...{scope?.a?.b}]`}</code>
+        、
+        <code className="rounded bg-muted px-1">
+          {`[...{scope?.data?.data?.statusName}]`}
+        </code>
+        ：在文本字段输出逗号分隔字符串；在图表「类目」等数组字段会展开为 n
+        个独立项（如 3 条数据对应 3 个类目）。
+      </p>
+    </div>
+  );
+}

package/src/panel/components/scope-config/ScopeTemplateWarningsPanel.tsx

@@ -42,7 +42,7 @@ export function ScopeTemplateWarningsPanel() {
       {!isCollapsed ? (
         <ul className="mt-2 max-h-[200px] space-y-1 overflow-auto text-[10px] leading-relaxed">
           {ctx.warnings.map((warning) => (
-            <li key={`${warning.fieldId}-${warning.missingPath}-${warning.expression}`}>
+            <li key={`${warning.fieldId}-${warning.kind}-${warning.missingPath}-${warning.expression}`}>
               <button
                 type="button"
                 className="w-full rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-left text-amber-800 hover:bg-amber-500/15 dark:text-amber-200"

package/src/panel/hooks/useRafThrottledScroll.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useRafThrottledScroll() {
+  const scrollRef = useRef({ left: 0, top: 0 });
+  const [scroll, setScroll] = useState({ left: 0, top: 0 });
+  const rafRef = useRef<number | null>(null);
+
+  const onScrollChange = useCallback((next: { left: number; top: number }) => {
+    scrollRef.current = next;
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      const latest = scrollRef.current;
+      setScroll((prev) =>
+        prev.left === latest.left && prev.top === latest.top ? prev : latest
+      );
+    });
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    },
+    []
+  );
+
+  return { scroll, scrollRef, onScrollChange };
+}

package/src/panel/types.ts

@@ -28,6 +28,8 @@ export type PanelChartConfig = {
   tooltipTextColor?: string;
   tooltipFormatter?: string;
   labels?: string[];
+  /** 逗号分隔的原始类目文本，支持 scope 模版；存在时优先于 labels */
+  labelsText?: string;
   values?: number[];
   /** 逗号分隔的原始数值文本，支持 scope 模版；存在时优先于 values */
   valuesText?: string;

package/src/panel/utils/chartOptionBuilder.ts

@@ -8,6 +8,17 @@ export function getChartValuesDisplayText(chart?: PanelChartConfig): string {
   return (chart?.values ?? []).join(",");
 }
 
+export function getChartLabelsDisplayText(chart?: PanelChartConfig): string {
+  if (chart?.labelsText !== undefined) return chart.labelsText;
+  return (chart?.labels ?? []).join(",");
+}
+
+export function resolveChartLabels(element: PanelElement): string[] {
+  const chart = element.chart;
+  if (chart?.labels?.length) return chart.labels;
+  return ["A", "B", "C", "D"];
+}
+
 export function parseChartValuesFromText(
   text: string | undefined,
   fallback: number[] = DEFAULT_CHART_VALUES
@@ -75,7 +86,7 @@ function deepMerge<T extends Record<string, any>>(base: T, patch?: Record<string
 
 export function buildChartOption(element: PanelElement): EChartsOption {
   const chartType = (element.materialType ?? "") as ChartType;
-  const labels = element.chart?.labels?.length ? element.chart.labels : ["A", "B", "C", "D"];
+  const labels = resolveChartLabels(element);
   const values = resolveChartValues(element);
   const color = element.chart?.color || "#3b82f6";
   const gradientFrom = element.chart?.gradientFrom || color;

package/src/panel/utils/scope-field-labels.ts

@@ -19,6 +19,7 @@ const LABELS: Record<string, string> = {
   "chart.tooltipBackgroundColor": "Tooltip 背景色",
   "chart.tooltipTextColor": "Tooltip 文字色",
   "chart.tooltipFormatter": "Tooltip 格式化",
+  "chart.labelsText": "图表类目",
   "chart.valuesText": "图表数值",
   "style.backgroundColor": "背景色",
   "style.backgroundImage": "背景图",

package/src/panel/utils/scope-template-chart.ts

@@ -0,0 +1,92 @@
+import type { PanelChartConfig } from "../types";
+import { hasScopeTemplate, evaluateScopeTemplate } from "./scope-template";
+import {
+  evaluateSpreadScopeExpressionValues,
+  extractSpreadScopeExpression,
+  isSpreadOnlyScopeTemplate,
+} from "./scope-template-spread";
+
+function splitCommaSeparatedLabels(text: string): string[] {
+  return text
+    .split(",")
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+function materializeSpreadTemplate(template: string, scope: unknown): string[] {
+  const expression = extractSpreadScopeExpression(template);
+  if (!expression) return [];
+  const result = evaluateSpreadScopeExpressionValues(expression, scope);
+  return result.ok ? result.values : [];
+}
+
+function materializeLabelToken(token: string, scope: unknown): string[] {
+  const trimmed = token.trim();
+  if (!trimmed) return [];
+
+  if (isSpreadOnlyScopeTemplate(trimmed)) {
+    return materializeSpreadTemplate(trimmed, scope);
+  }
+
+  if (hasScopeTemplate(trimmed)) {
+    return [evaluateScopeTemplate(trimmed, scope)];
+  }
+
+  return [trimmed];
+}
+
+/** 将类目模版文本展开为图表所需的字符串数组 */
+export function materializeChartLabelsText(
+  text: string,
+  scope: unknown
+): string[] {
+  const trimmed = text.trim();
+  if (!trimmed) return [];
+
+  if (isSpreadOnlyScopeTemplate(trimmed)) {
+    return materializeSpreadTemplate(trimmed, scope);
+  }
+
+  if (hasScopeTemplate(trimmed)) {
+    return splitCommaSeparatedLabels(evaluateScopeTemplate(trimmed, scope));
+  }
+
+  return splitCommaSeparatedLabels(trimmed);
+}
+
+/** 兼容旧数据：labels 数组中每项可含展开模版 */
+export function materializeChartLabelsArray(
+  labels: string[],
+  scope: unknown
+): string[] {
+  const result: string[] = [];
+  for (const label of labels) {
+    result.push(...materializeLabelToken(label, scope));
+  }
+  return result;
+}
+
+/** 将数值模版文本展开为图表所需的数字数组 */
+export function materializeChartValuesText(
+  text: string,
+  scope: unknown
+): number[] {
+  return materializeChartLabelsText(text, scope).map((part) => {
+    const value = Number(part);
+    return Number.isFinite(value) ? value : 0;
+  });
+}
+
+export function materializeChartLabelsFromScope(
+  chart: PanelChartConfig | undefined,
+  scope: unknown
+): string[] | undefined {
+  if (!chart) return undefined;
+  if (chart.labelsText !== undefined) {
+    return materializeChartLabelsText(chart.labelsText, scope);
+  }
+  if (chart.labels?.length) {
+    return materializeChartLabelsArray(chart.labels, scope);
+  }
+  return undefined;
+}

package/src/panel/utils/scope-template-preview.ts

@@ -0,0 +1,124 @@
+import type { PanelElement } from "../types";
+import {
+  materializeChartLabelsText,
+  materializeChartValuesText,
+} from "./scope-template-chart";
+import { hasScopeTemplate, evaluateScopeTemplate } from "./scope-template";
+import { SCOPE_SPREAD_TEMPLATE_RE } from "./scope-template-spread";
+import { resolveScopeFieldLabel } from "./scope-field-labels";
+
+export type ScopeTemplateField = {
+  fieldId: string;
+  fieldLabel: string;
+  template: string;
+};
+
+const SKIP_FIELD_PREFIXES = new Set(["refSnapshot", "geometrySketchDataUrl"]);
+
+function shouldSkipField(fieldId: string): boolean {
+  return [...SKIP_FIELD_PREFIXES].some((prefix) => fieldId.startsWith(prefix));
+}
+
+function walkElementTemplateFields(
+  value: unknown,
+  fieldId: string,
+  results: ScopeTemplateField[]
+) {
+  if (shouldSkipField(fieldId)) return;
+
+  if (typeof value === "string") {
+    if (!hasScopeTemplate(value)) return;
+    results.push({
+      fieldId,
+      fieldLabel: resolveScopeFieldLabel(fieldId),
+      template: value,
+    });
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      walkElementTemplateFields(item, `${fieldId}.${index}`, results);
+    });
+    return;
+  }
+
+  if (value && typeof value === "object") {
+    for (const [key, nested] of Object.entries(value)) {
+      const nextId = fieldId ? `${fieldId}.${key}` : key;
+      walkElementTemplateFields(nested, nextId, results);
+    }
+  }
+}
+
+export function collectElementScopeTemplateFields(
+  element: PanelElement
+): ScopeTemplateField[] {
+  const results: ScopeTemplateField[] = [];
+  walkElementTemplateFields(element, "", results);
+  return results;
+}
+
+export function matchScopeTemplateFieldId(
+  template: string,
+  fields: ScopeTemplateField[]
+): string | undefined {
+  const exact = fields.find((field) => field.template === template);
+  if (exact) return exact.fieldId;
+
+  if (!hasScopeTemplate(template)) return undefined;
+
+  const partial = fields.filter(
+    (field) =>
+      field.template.includes(template) || template.includes(field.template)
+  );
+  if (partial.length === 1) return partial[0].fieldId;
+  return undefined;
+}
+
+export function resolveScopeTemplatePreview(
+  template: string,
+  scope: unknown,
+  fieldId?: string
+): unknown {
+  if (!hasScopeTemplate(template)) return template;
+  if (scope === undefined) return undefined;
+
+  const leafFieldId = fieldId?.split(".").pop();
+
+  if (
+    fieldId === "chart.labelsText" ||
+    leafFieldId === "labelsText"
+  ) {
+    return materializeChartLabelsText(template, scope);
+  }
+
+  if (
+    fieldId === "chart.valuesText" ||
+    leafFieldId === "valuesText"
+  ) {
+    return materializeChartValuesText(template, scope);
+  }
+
+  if (SCOPE_SPREAD_TEMPLATE_RE.test(template)) {
+    return materializeChartLabelsText(template, scope);
+  }
+
+  const evaluated = evaluateScopeTemplate(template, scope);
+  try {
+    return JSON.parse(evaluated);
+  } catch {
+    return evaluated;
+  }
+}
+
+export function formatScopeTemplatePreview(value: unknown): string {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}