@arronqzy/react-view 1.0.3 → 1.0.7

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

@@ -1,43 +1,57 @@
-const LABELS: Record<string, string> = {
-  name: "节点名称",
-  textHtml: "文本内容",
-  textFontFamily: "文本字体",
-  textFontWeight: "文本字重",
-  textColor: "文本颜色",
-  "chart.title": "图表标题",
-  "chart.color": "图表颜色",
-  "chart.gradientFrom": "渐变起始色",
-  "chart.gradientTo": "渐变结束色",
-  "chart.xAxisName": "X 轴名称",
-  "chart.yAxisName": "Y 轴名称",
-  "chart.xAxisTickColor": "X 轴刻度颜色",
-  "chart.yAxisTickColor": "Y 轴刻度颜色",
-  "chart.xAxisSplitLineColor": "X 轴分割线颜色",
-  "chart.yAxisSplitLineColor": "Y 轴分割线颜色",
-  "chart.xAxisLabelColor": "X 轴标签颜色",
-  "chart.yAxisLabelColor": "Y 轴标签颜色",
-  "chart.tooltipBackgroundColor": "Tooltip 背景色",
-  "chart.tooltipTextColor": "Tooltip 文字色",
-  "chart.tooltipFormatter": "Tooltip 格式化",
-  "chart.valuesText": "图表数值",
-  "style.backgroundColor": "背景色",
-  "style.backgroundImage": "背景图",
-  "style.backgroundImageRemoteUrl": "背景图远程地址",
-  "style.backgroundSize": "背景尺寸",
-  "style.backgroundPosition": "背景位置",
-  "style.borderColor": "边框颜色",
-  audioSrc: "音频地址",
-  audioRemoteUrl: "音频远程地址",
-  videoSrc: "视频地址",
-  videoRemoteUrl: "视频远程地址",
-  geometryColor: "几何颜色",
-  geometryScript: "几何脚本",
+import type { TranslateFn } from "@arronqzy/i18n";
+
+const FIELD_KEY_MAP: Record<string, string> = {
+  name: "panel.scope.fieldName",
+  textHtml: "panel.scope.fieldTextHtml",
+  textFontFamily: "panel.scope.fieldTextFontFamily",
+  textFontWeight: "panel.scope.fieldTextFontWeight",
+  textColor: "panel.scope.fieldTextColor",
+  "chart.title": "panel.scope.fieldChartTitle",
+  "chart.color": "panel.scope.fieldChartColor",
+  "chart.gradientFrom": "panel.scope.fieldChartGradientFrom",
+  "chart.gradientTo": "panel.scope.fieldChartGradientTo",
+  "chart.xAxisName": "panel.scope.fieldChartXAxisName",
+  "chart.yAxisName": "panel.scope.fieldChartYAxisName",
+  "chart.xAxisTickColor": "panel.scope.fieldChartXAxisTickColor",
+  "chart.yAxisTickColor": "panel.scope.fieldChartYAxisTickColor",
+  "chart.xAxisSplitLineColor": "panel.scope.fieldChartXAxisSplitLineColor",
+  "chart.yAxisSplitLineColor": "panel.scope.fieldChartYAxisSplitLineColor",
+  "chart.xAxisLabelColor": "panel.scope.fieldChartXAxisLabelColor",
+  "chart.yAxisLabelColor": "panel.scope.fieldChartYAxisLabelColor",
+  "chart.tooltipBackgroundColor": "panel.scope.fieldChartTooltipBackgroundColor",
+  "chart.tooltipTextColor": "panel.scope.fieldChartTooltipTextColor",
+  "chart.tooltipFormatter": "panel.scope.fieldChartTooltipFormatter",
+  "chart.labelsText": "panel.scope.fieldChartLabelsText",
+  "chart.valuesText": "panel.scope.fieldChartValuesText",
+  "style.backgroundColor": "panel.scope.fieldStyleBackgroundColor",
+  "style.backgroundImage": "panel.scope.fieldStyleBackgroundImage",
+  "style.backgroundImageRemoteUrl": "panel.scope.fieldStyleBackgroundImageRemoteUrl",
+  "style.backgroundSize": "panel.scope.fieldStyleBackgroundSize",
+  "style.backgroundPosition": "panel.scope.fieldStyleBackgroundPosition",
+  "style.borderColor": "panel.scope.fieldStyleBorderColor",
+  audioSrc: "panel.scope.fieldAudioSrc",
+  audioRemoteUrl: "panel.scope.fieldAudioRemoteUrl",
+  videoSrc: "panel.scope.fieldVideoSrc",
+  videoRemoteUrl: "panel.scope.fieldVideoRemoteUrl",
+  geometryColor: "panel.scope.fieldGeometryColor",
+  geometryScript: "panel.scope.fieldGeometryScript",
 };
 
-export function resolveScopeFieldLabel(fieldId: string): string {
-  if (LABELS[fieldId]) return LABELS[fieldId];
+export function getScopeFieldLabels(t: TranslateFn): Record<string, string> {
+  const labels: Record<string, string> = {};
+  for (const [fieldId, key] of Object.entries(FIELD_KEY_MAP)) {
+    labels[fieldId] = t(key);
+  }
+  return labels;
+}
+
+export function resolveScopeFieldLabel(fieldId: string, t?: TranslateFn): string {
+  if (t) {
+    const key = FIELD_KEY_MAP[fieldId];
+    if (key) return t(key);
+  }
   const leaf = fieldId.split(".").pop() ?? fieldId;
-  return LABELS[fieldId] ?? leaf;
+  return leaf;
 }
 
 export function scopeFieldDomId(fieldId: string): string {

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,128 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
+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[],
+  t: TranslateFn
+) {
+  if (shouldSkipField(fieldId)) return;
+
+  if (typeof value === "string") {
+    if (!hasScopeTemplate(value)) return;
+    results.push({
+      fieldId,
+      fieldLabel: resolveScopeFieldLabel(fieldId, t),
+      template: value,
+    });
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      walkElementTemplateFields(item, `${fieldId}.${index}`, results, t);
+    });
+    return;
+  }
+
+  if (value && typeof value === "object") {
+    for (const [key, nested] of Object.entries(value)) {
+      const nextId = fieldId ? `${fieldId}.${key}` : key;
+      walkElementTemplateFields(nested, nextId, results, t);
+    }
+  }
+}
+
+export function collectElementScopeTemplateFields(
+  element: PanelElement,
+  t: TranslateFn = tForLocale("zh-CN")
+): ScopeTemplateField[] {
+  const results: ScopeTemplateField[] = [];
+  walkElementTemplateFields(element, "", results, t);
+  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);
+  }
+}

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

@@ -0,0 +1,252 @@
+/** 数组展开模版：[...{scope?.a?.b}] 从 scope 中定位数组并提取每项字段，输出逗号分隔值 */
+
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
+
+export const SCOPE_SPREAD_TEMPLATE_RE = /\[\.\.\.\{([^}]+)\}\]/g;
+
+export const SCOPE_SPREAD_TEMPLATE_DEMO = {
+  scope: { a: [{ b: 1 }, { b: 2 }] },
+  template: "[...{scope?.a?.b}]",
+  output: "1,2",
+} as const;
+
+export function getScopeSpreadDeepTemplateDemo(t: TranslateFn = tForLocale("zh-CN")) {
+  const inProgress = t("panel.scope.demoInProgress");
+  const done = t("panel.scope.demoDone");
+  return {
+    scope: {
+      data: {
+        data: [{ statusName: inProgress }, { statusName: done }],
+      },
+    },
+    template: "[...{scope?.data?.data?.statusName}]",
+    output: t("panel.scope.demoJoined"),
+  } as const;
+}
+
+/** @deprecated Prefer getScopeSpreadDeepTemplateDemo(t) */
+export const SCOPE_SPREAD_DEEP_TEMPLATE_DEMO = getScopeSpreadDeepTemplateDemo();
+
+export type ScopeSpreadEvalIssue =
+  | "invalid-expression"
+  | "path-missing"
+  | "not-array";
+
+export type ScopeSpreadEvalResult =
+  | { ok: true; value: string }
+  | { ok: false; issue: ScopeSpreadEvalIssue; arrayPath?: string };
+
+export type SpreadScopePathResolution =
+  | {
+      ok: true;
+      arrayPathSegments: string[];
+      itemPathSegments: string[];
+      arrayValue: unknown[];
+    }
+  | { ok: false; issue: ScopeSpreadEvalIssue; arrayPath?: string };
+
+/** 解析 scope?.a?.b 形式的路径段（不含 scope 前缀） */
+export function parseScopePathSegments(expression: string): string[] | null {
+  const trimmed = expression.trim();
+  if (!trimmed.startsWith("scope")) return null;
+
+  let body = trimmed.slice("scope".length);
+  if (body.startsWith("?.")) body = body.slice(2);
+  else if (body.startsWith(".")) body = body.slice(1);
+  else if (body.length > 0) return null;
+
+  if (!body) return [];
+  return body.split("?.").filter(Boolean);
+}
+
+export function formatScopePathSegments(segments: string[]): string {
+  return segments.join(".");
+}
+
+export function getValueAtScopePath(scope: unknown, path: string[]): unknown {
+  let current: unknown = scope;
+  for (const part of path) {
+    if (current === null || current === undefined) return undefined;
+    if (typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+/**
+ * 从完整路径中定位数组段与项内字段段。
+ * 例如 scope?.data?.data?.statusName → 数组在 data.data，项字段为 statusName。
+ */
+export function resolveSpreadScopePath(
+  expression: string,
+  scope: unknown
+): SpreadScopePathResolution {
+  const segments = parseScopePathSegments(expression);
+  if (segments === null || segments.length === 0) {
+    return { ok: false, issue: "invalid-expression" };
+  }
+
+  if (segments.length === 1) {
+    const arrayPathSegments = segments;
+    const arrayValue = getValueAtScopePath(scope, arrayPathSegments);
+    const arrayPath = formatScopePathSegments(arrayPathSegments);
+    if (arrayValue === undefined) {
+      return { ok: false, issue: "path-missing", arrayPath };
+    }
+    if (!Array.isArray(arrayValue)) {
+      return { ok: false, issue: "not-array", arrayPath };
+    }
+    return {
+      ok: true,
+      arrayPathSegments,
+      itemPathSegments: [],
+      arrayValue,
+    };
+  }
+
+  for (let splitAt = segments.length - 1; splitAt >= 1; splitAt--) {
+    const arrayPathSegments = segments.slice(0, splitAt);
+    const itemPathSegments = segments.slice(splitAt);
+    const arrayValue = getValueAtScopePath(scope, arrayPathSegments);
+    if (arrayValue === undefined) continue;
+    if (Array.isArray(arrayValue)) {
+      return {
+        ok: true,
+        arrayPathSegments,
+        itemPathSegments,
+        arrayValue,
+      };
+    }
+  }
+
+  const rootValue = getValueAtScopePath(scope, [segments[0]!]);
+  if (rootValue === undefined) {
+    return {
+      ok: false,
+      issue: "path-missing",
+      arrayPath: segments[0],
+    };
+  }
+
+  for (let splitAt = 1; splitAt < segments.length; splitAt++) {
+    const arrayPathSegments = segments.slice(0, splitAt);
+    const arrayValue = getValueAtScopePath(scope, arrayPathSegments);
+    if (arrayValue === undefined) continue;
+    if (!Array.isArray(arrayValue)) {
+      return {
+        ok: false,
+        issue: "not-array",
+        arrayPath: formatScopePathSegments(arrayPathSegments),
+      };
+    }
+  }
+
+  return {
+    ok: false,
+    issue: "path-missing",
+    arrayPath: formatScopePathSegments(segments.slice(0, -1)),
+  };
+}
+
+function formatSpreadItemValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+export function evaluateSpreadScopeExpression(
+  expression: string,
+  scope: unknown
+): ScopeSpreadEvalResult {
+  const valuesResult = evaluateSpreadScopeExpressionValues(expression, scope);
+  if (!valuesResult.ok) {
+    return valuesResult;
+  }
+  return { ok: true, value: valuesResult.values.join(",") };
+}
+
+export function evaluateSpreadScopeExpressionValues(
+  expression: string,
+  scope: unknown
+): { ok: true; values: string[] } | { ok: false; issue: ScopeSpreadEvalIssue; arrayPath?: string } {
+  const resolved = resolveSpreadScopePath(expression, scope);
+  if (!resolved.ok) {
+    return {
+      ok: false,
+      issue: resolved.issue,
+      arrayPath: resolved.arrayPath,
+    };
+  }
+
+  const values = resolved.arrayValue
+    .map((item) =>
+      resolved.itemPathSegments.length === 0
+        ? item
+        : getValueAtScopePath(item, resolved.itemPathSegments)
+    )
+    .map(formatSpreadItemValue)
+    .filter((value) => value.length > 0);
+
+  return { ok: true, values };
+}
+
+export function isSpreadOnlyScopeTemplate(value: string): boolean {
+  return /^\[\.\.\.\{[^}]+\}\]$/.test(value.trim());
+}
+
+export function extractSpreadScopeExpression(template: string): string | null {
+  const match = /^\[\.\.\.\{([^}]+)\}\]$/.exec(template.trim());
+  return match ? match[1]!.trim() : null;
+}
+
+export function isSpreadTemplateBrace(value: string, braceIndex: number): boolean {
+  return value.slice(Math.max(0, braceIndex - 4), braceIndex) === "[...";
+}
+
+export function buildSpreadNotArrayWarningMessage(
+  fieldLabel: string,
+  template: string,
+  expression: string,
+  arrayPath: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): string {
+  void expression;
+  const demoScope = JSON.stringify(SCOPE_SPREAD_TEMPLATE_DEMO.scope);
+  const deepDemo = getScopeSpreadDeepTemplateDemo(t);
+  return t("panel.scope.warnSpreadNotArray", {
+    fieldLabel,
+    template,
+    arrayPath,
+    demoScope,
+    demoTemplate: SCOPE_SPREAD_TEMPLATE_DEMO.template,
+    demoOutput: SCOPE_SPREAD_TEMPLATE_DEMO.output,
+    deepTemplate: deepDemo.template,
+    deepScope: JSON.stringify(deepDemo.scope),
+    deepOutput: deepDemo.output,
+  });
+}
+
+export function buildSpreadInvalidExpressionWarningMessage(
+  fieldLabel: string,
+  template: string,
+  t: TranslateFn = tForLocale("zh-CN")
+): string {
+  const demoScope = JSON.stringify(SCOPE_SPREAD_TEMPLATE_DEMO.scope);
+  const deepDemo = getScopeSpreadDeepTemplateDemo(t);
+  return t("panel.scope.warnSpreadInvalid", {
+    fieldLabel,
+    template,
+    demoTemplate: SCOPE_SPREAD_TEMPLATE_DEMO.template,
+    deepTemplate: deepDemo.template,
+    demoScope,
+    demoOutput: SCOPE_SPREAD_TEMPLATE_DEMO.output,
+  });
+}