@arronqzy/react-view 0.0.3 → 1.0.5

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

@@ -0,0 +1,229 @@
+/** 数组展开模版：[...{scope?.a?.b}] 从 scope 中定位数组并提取每项字段，输出逗号分隔值 */
+
+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 const SCOPE_SPREAD_DEEP_TEMPLATE_DEMO = {
+  scope: {
+    data: {
+      data: [{ statusName: "进行中" }, { statusName: "已完成" }],
+    },
+  },
+  template: "[...{scope?.data?.data?.statusName}]",
+  output: "进行中,已完成",
+} as const;
+
+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
+): string {
+  const demoScope = JSON.stringify(SCOPE_SPREAD_TEMPLATE_DEMO.scope);
+  const deepDemo = SCOPE_SPREAD_DEEP_TEMPLATE_DEMO;
+  return (
+    `「${fieldLabel}」中的 ${template} 模版仅可做数组值的映射，当前 scope.${arrayPath} 不是数组，数据不符合规则。` +
+    `参考示例：scope 为 ${demoScope} 时使用 ${SCOPE_SPREAD_TEMPLATE_DEMO.template} 输出 ${SCOPE_SPREAD_TEMPLATE_DEMO.output}；` +
+    `深层路径可用 ${deepDemo.template}（scope 为 ${JSON.stringify(deepDemo.scope)} 时输出 ${deepDemo.output}）。`
+  );
+}
+
+export function buildSpreadInvalidExpressionWarningMessage(
+  fieldLabel: string,
+  template: string
+): string {
+  const demoScope = JSON.stringify(SCOPE_SPREAD_TEMPLATE_DEMO.scope);
+  const deepDemo = SCOPE_SPREAD_DEEP_TEMPLATE_DEMO;
+  return (
+    `「${fieldLabel}」中的 ${template} 写法无效，请使用 ${SCOPE_SPREAD_TEMPLATE_DEMO.template} 或 ${deepDemo.template} 形式。` +
+    `参考示例：scope 为 ${demoScope} 时输出 ${SCOPE_SPREAD_TEMPLATE_DEMO.output}。`
+  );
+}

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

@@ -1,6 +1,20 @@
 import type { PanelElement } from "../types";
 import { hasScopeTemplate } from "./scope-template";
 import { resolveScopeFieldLabel } from "./scope-field-labels";
+import {
+  SCOPE_SPREAD_TEMPLATE_RE,
+  buildSpreadInvalidExpressionWarningMessage,
+  buildSpreadNotArrayWarningMessage,
+  formatScopePathSegments,
+  isSpreadTemplateBrace,
+  parseScopePathSegments,
+  resolveSpreadScopePath,
+} from "./scope-template-spread";
+
+export type ScopeTemplateWarningKind =
+  | "missing-path"
+  | "spread-not-array"
+  | "spread-invalid-expression";
 
 export type ScopeTemplateWarning = {
   fieldId: string;
@@ -9,6 +23,7 @@ export type ScopeTemplateWarning = {
   expression: string;
   missingPath: string;
   message: string;
+  kind: ScopeTemplateWarningKind;
 };
 
 const SCOPE_PATH_RE = /scope(?:\?\.|\.)(\w+(?:\?\.\w+)*)/g;
@@ -41,6 +56,95 @@ function pathExistsInScope(scope: unknown, path: string): boolean {
   return true;
 }
 
+function analyzeSpreadTemplateValue(
+  fieldId: string,
+  value: string,
+  scope: unknown
+): ScopeTemplateWarning[] {
+  const warnings: ScopeTemplateWarning[] = [];
+  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const spreadRe = new RegExp(SCOPE_SPREAD_TEMPLATE_RE.source, "g");
+  let match: RegExpExecArray | null;
+
+  while ((match = spreadRe.exec(value)) !== null) {
+    const spreadTemplate = match[0];
+    const expression = match[1].trim();
+    const segments = parseScopePathSegments(expression);
+
+    if (segments === null || segments.length === 0) {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: "",
+        kind: "spread-invalid-expression",
+        message: buildSpreadInvalidExpressionWarningMessage(
+          fieldLabel,
+          spreadTemplate
+        ),
+      });
+      continue;
+    }
+
+    const resolved = resolveSpreadScopePath(expression, scope);
+    if (resolved.ok) continue;
+
+    if (resolved.issue === "invalid-expression") {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: "",
+        kind: "spread-invalid-expression",
+        message: buildSpreadInvalidExpressionWarningMessage(
+          fieldLabel,
+          spreadTemplate
+        ),
+      });
+      continue;
+    }
+
+    const arrayPath =
+      resolved.arrayPath ?? formatScopePathSegments(segments.slice(0, -1));
+
+    if (resolved.issue === "path-missing") {
+      if (!pathExistsInScope(scope, arrayPath)) {
+        warnings.push({
+          fieldId,
+          fieldLabel,
+          template: value,
+          expression,
+          missingPath: arrayPath,
+          kind: "missing-path",
+          message: `「${fieldLabel}」引用了 scope.${arrayPath}，但当前 scope 数据中并没有「${arrayPath}」字段，建议检查一下。`,
+        });
+      }
+      continue;
+    }
+
+    if (resolved.issue === "not-array") {
+      warnings.push({
+        fieldId,
+        fieldLabel,
+        template: value,
+        expression,
+        missingPath: arrayPath,
+        kind: "spread-not-array",
+        message: buildSpreadNotArrayWarningMessage(
+          fieldLabel,
+          spreadTemplate,
+          expression,
+          arrayPath
+        ),
+      });
+    }
+  }
+
+  return warnings;
+}
+
 function analyzeTemplateValue(
   fieldId: string,
   value: string,
@@ -48,12 +152,15 @@ function analyzeTemplateValue(
 ): ScopeTemplateWarning[] {
   if (!hasScopeTemplate(value)) return [];
 
-  const warnings: ScopeTemplateWarning[] = [];
+  const warnings: ScopeTemplateWarning[] = [
+    ...analyzeSpreadTemplateValue(fieldId, value, scope),
+  ];
   const fieldLabel = resolveScopeFieldLabel(fieldId);
   const expressionRe = /\{([^}]+)\}/g;
   let match: RegExpExecArray | null;
 
   while ((match = expressionRe.exec(value)) !== null) {
+    if (isSpreadTemplateBrace(value, match.index)) continue;
     const expression = match[1].trim();
     const paths = extractScopePropertyPaths(expression);
     for (const path of paths) {
@@ -64,6 +171,7 @@ function analyzeTemplateValue(
         template: value,
         expression,
         missingPath: path,
+        kind: "missing-path",
         message: `「${fieldLabel}」引用了 scope.${path}，但当前 scope 数据中并没有「${path}」字段，建议检查一下。`,
       });
     }
@@ -115,7 +223,7 @@ export function collectElementScopeWarnings(
 
   const seen = new Set<string>();
   return warnings.filter((warning) => {
-    const key = `${warning.fieldId}|${warning.missingPath}|${warning.expression}`;
+    const key = `${warning.fieldId}|${warning.kind}|${warning.missingPath}|${warning.expression}`;
     if (seen.has(key)) return false;
     seen.add(key);
     return true;

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

@@ -1,6 +1,11 @@
 import type { PanelElement } from "../types";
+import { materializeChartLabelsFromScope } from "./scope-template-chart";
+import {
+  SCOPE_SPREAD_TEMPLATE_RE,
+  evaluateSpreadScopeExpression,
+} from "./scope-template-spread";
 
-const SCOPE_TEMPLATE_RE = /\{[^}]+\}/;
+const SCOPE_TEMPLATE_RE = /\{[^}]+\}|\[\.\.\.\{[^}]+\}\]/;
 
 export function hasScopeTemplate(value: string): boolean {
   return SCOPE_TEMPLATE_RE.test(value);
@@ -25,7 +30,16 @@ export function evaluateScopeTemplate(
   scope: unknown
 ): string {
   if (!hasScopeTemplate(template)) return template;
-  return template.replace(/\{([^}]+)\}/g, (_, rawExpr: string) => {
+
+  const withSpread = template.replace(
+    SCOPE_SPREAD_TEMPLATE_RE,
+    (_, rawExpr: string) => {
+      const result = evaluateSpreadScopeExpression(rawExpr, scope);
+      return result.ok ? result.value : "";
+    }
+  );
+
+  return withSpread.replace(/\{([^}]+)\}/g, (_, rawExpr: string) => {
     const value = evaluateScopeExpression(rawExpr, scope);
     if (value === null || value === undefined) return "";
     if (typeof value === "string") return value;
@@ -62,7 +76,15 @@ export function resolvePanelElementScope(
   scope: unknown | undefined
 ): PanelElement {
   if (scope === undefined) return element;
-  return resolveScopedValue(structuredClone(element), scope);
+  const resolved = resolveScopedValue(structuredClone(element), scope);
+  if (resolved.chart) {
+    const labels = materializeChartLabelsFromScope(element.chart, scope);
+    if (labels !== undefined) {
+      resolved.chart.labels = labels;
+      delete resolved.chart.labelsText;
+    }
+  }
+  return resolved;
 }
 
 export function formatViewElementScope(scope: unknown): string {

package/src/tailwind.css

@@ -29,30 +29,43 @@
 /* Moveable：仅角点控制柄固定屏幕像素；勿作用于 moveable-direction 边线 */
 .rv-moveable-layer {
   --moveable-color: #1990ff;
+  z-index: 9999 !important;
 }
 
-.rv-moveable-layer .moveable-control {
-  width: 14px !important;
-  height: 14px !important;
-  margin-top: -7px !important;
-  margin-left: -7px !important;
-  border-radius: 50% !important;
-  box-sizing: border-box !important;
-  border: 2px solid hsl(var(--background)) !important;
-  background: #1990ff !important;
+.rv-moveable-layer.moveable-group,
+.rv-moveable-layer .moveable-group,
+.rv-moveable-layer.moveable-control-box,
+.rv-moveable-layer .moveable-control-box {
+  z-index: 1 !important;
+}
+
+.rv-moveable-layer .moveable-line {
+  --moveable-color: #1990ff;
   background: var(--moveable-color) !important;
 }
 
+/* 组选/单边控制线：厚度由 moveable zoom 补偿，保持屏幕 1px */
 .rv-moveable-layer .moveable-line.moveable-direction {
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
+  background: var(--moveable-color) !important;
 }
 
-.rv-moveable-layer .moveable-line {
-  --moveable-color: #1990ff;
+.rv-moveable-layer .moveable-group .moveable-control-box,
+.rv-moveable-layer.moveable-group .moveable-control-box {
+  z-index: 2 !important;
 }
 
 .rv-moveable-layer .moveable-around-control {
   background: transparent !important;
 }
+
+.rv-moveable-layer .moveable-control {
+  width: 14px !important;
+  height: 14px !important;
+  margin-top: -7px !important;
+  margin-left: -7px !important;
+  border-radius: 50% !important;
+  box-sizing: border-box !important;
+  border: 2px solid hsl(var(--background)) !important;
+  background: #1990ff !important;
+  background: var(--moveable-color) !important;
+}