@arronqzy/react-view 1.0.3 → 1.0.7

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

@@ -1,6 +1,22 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
 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 +25,7 @@ export type ScopeTemplateWarning = {
   expression: string;
   missingPath: string;
   message: string;
+  kind: ScopeTemplateWarningKind;
 };
 
 const SCOPE_PATH_RE = /scope(?:\?\.|\.)(\w+(?:\?\.\w+)*)/g;
@@ -41,19 +58,119 @@ function pathExistsInScope(scope: unknown, path: string): boolean {
   return true;
 }
 
+function analyzeSpreadTemplateValue(
+  fieldId: string,
+  value: string,
+  scope: unknown,
+  t: TranslateFn
+): ScopeTemplateWarning[] {
+  const warnings: ScopeTemplateWarning[] = [];
+  const fieldLabel = resolveScopeFieldLabel(fieldId, t);
+  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,
+          t
+        ),
+      });
+      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,
+          t
+        ),
+      });
+      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: t("panel.scope.warnMissingPath", {
+            fieldLabel,
+            path: 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,
+          t
+        ),
+      });
+    }
+  }
+
+  return warnings;
+}
+
 function analyzeTemplateValue(
   fieldId: string,
   value: string,
-  scope: unknown
+  scope: unknown,
+  t: TranslateFn
 ): ScopeTemplateWarning[] {
   if (!hasScopeTemplate(value)) return [];
 
-  const warnings: ScopeTemplateWarning[] = [];
-  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const warnings: ScopeTemplateWarning[] = [
+    ...analyzeSpreadTemplateValue(fieldId, value, scope, t),
+  ];
+  const fieldLabel = resolveScopeFieldLabel(fieldId, t);
   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,7 +181,8 @@ function analyzeTemplateValue(
         template: value,
         expression,
         missingPath: path,
-        message: `「${fieldLabel}」引用了 scope.${path}，但当前 scope 数据中并没有「${path}」字段，建议检查一下。`,
+        kind: "missing-path",
+        message: t("panel.scope.warnMissingPath", { fieldLabel, path }),
       });
     }
   }
@@ -80,18 +198,19 @@ function walkElementStrings(
   value: unknown,
   fieldId: string,
   scope: unknown,
-  warnings: ScopeTemplateWarning[]
+  warnings: ScopeTemplateWarning[],
+  t: TranslateFn
 ) {
   if (shouldSkipField(fieldId)) return;
 
   if (typeof value === "string") {
-    warnings.push(...analyzeTemplateValue(fieldId, value, scope));
+    warnings.push(...analyzeTemplateValue(fieldId, value, scope, t));
     return;
   }
 
   if (Array.isArray(value)) {
     value.forEach((item, index) => {
-      walkElementStrings(item, `${fieldId}.${index}`, scope, warnings);
+      walkElementStrings(item, `${fieldId}.${index}`, scope, warnings, t);
     });
     return;
   }
@@ -99,23 +218,24 @@ function walkElementStrings(
   if (value && typeof value === "object") {
     for (const [key, nested] of Object.entries(value)) {
       const nextId = fieldId ? `${fieldId}.${key}` : key;
-      walkElementStrings(nested, nextId, scope, warnings);
+      walkElementStrings(nested, nextId, scope, warnings, t);
     }
   }
 }
 
 export function collectElementScopeWarnings(
   element: PanelElement,
-  scope: unknown
+  scope: unknown,
+  t: TranslateFn = tForLocale("zh-CN")
 ): ScopeTemplateWarning[] {
   if (scope === undefined) return [];
 
   const warnings: ScopeTemplateWarning[] = [];
-  walkElementStrings(element, "", scope, warnings);
+  walkElementStrings(element, "", scope, warnings, t);
 
   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,17 @@
 import type { PanelElement } from "../types";
+import type { PanelTableConfig } from "@arronqzy/view-table";
+import { isUsableTableRawData } from "@arronqzy/view-table";
+import { materializeChartLabelsFromScope } from "./scope-template-chart";
+import {
+  SCOPE_SPREAD_TEMPLATE_RE,
+  evaluateSpreadScopeExpression,
+  extractSpreadScopeExpression,
+  getValueAtScopePath,
+  isSpreadOnlyScopeTemplate,
+  resolveSpreadScopePath,
+} 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 +36,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,
+    (_: string, rawExpr: string) => {
+      const result = evaluateSpreadScopeExpression(rawExpr, scope);
+      return result.ok ? result.value : "";
+    }
+  );
+
+  return withSpread.replace(/\{([^}]+)\}/g, (_: string, rawExpr: string) => {
     const value = evaluateScopeExpression(rawExpr, scope);
     if (value === null || value === undefined) return "";
     if (typeof value === "string") return value;
@@ -40,6 +60,65 @@ export function evaluateScopeTemplate(
   });
 }
 
+function tryParseJson(text: string): unknown | undefined {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return undefined;
+  }
+}
+
+function materializeTemplateValue(template: string, scope: unknown): unknown {
+  const trimmed = template.trim();
+  if (!trimmed) return undefined;
+
+  if (isSpreadOnlyScopeTemplate(trimmed)) {
+    const expression = extractSpreadScopeExpression(trimmed);
+    if (!expression) return undefined;
+    const resolved = resolveSpreadScopePath(expression, scope);
+    if (!resolved.ok) return undefined;
+    if (resolved.itemPathSegments.length === 0) {
+      return resolved.arrayValue;
+    }
+    return resolved.arrayValue.map((item) =>
+      getValueAtScopePath(item, resolved.itemPathSegments)
+    );
+  }
+
+  const singleMatch = /^\{([^}]+)\}$/.exec(trimmed);
+  if (singleMatch) {
+    return evaluateScopeExpression(singleMatch[1]!, scope);
+  }
+
+  if (hasScopeTemplate(trimmed)) {
+    const text = evaluateScopeTemplate(trimmed, scope);
+    const parsed = tryParseJson(text);
+    return parsed !== undefined ? parsed : text;
+  }
+
+  return tryParseJson(trimmed);
+}
+
+export function materializeTableSourceFromScope(
+  table: PanelTableConfig | undefined,
+  scope: unknown
+): unknown | undefined {
+  if (!table) return undefined;
+
+  if (typeof table.source === "string" && table.source.trim()) {
+    return materializeTemplateValue(table.source, scope);
+  }
+
+  if (typeof table.rowsText === "string" && table.rowsText.trim()) {
+    const trimmed = table.rowsText.trim();
+    if (hasScopeTemplate(trimmed) || isSpreadOnlyScopeTemplate(trimmed)) {
+      return materializeTemplateValue(trimmed, scope);
+    }
+  }
+
+  return undefined;
+}
+
 function resolveScopedValue<T>(value: T, scope: unknown): T {
   if (typeof value === "string" && hasScopeTemplate(value)) {
     return evaluateScopeTemplate(value, scope) as T;
@@ -62,7 +141,30 @@ 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;
+    }
+  }
+  if (resolved.table) {
+    const hasDynamicSource =
+      typeof element.table?.source === "string" && element.table.source.trim().length > 0;
+    if (hasDynamicSource) {
+      const raw = materializeTableSourceFromScope(element.table, scope);
+      if (isUsableTableRawData(raw)) {
+        resolved.table = { ...resolved.table, rows: raw };
+      } else {
+        // Dynamic missing/empty → fall back to static rowsText (do not keep empty rows)
+        const next = { ...resolved.table };
+        delete next.rows;
+        resolved.table = next;
+      }
+    }
+  }
+  return resolved;
 }
 
 export function formatViewElementScope(scope: unknown): string {

package/src/tailwind.css

@@ -26,33 +26,54 @@
   background: hsl(var(--foreground) / 0.45);
 }
 
-/* Moveable：仅角点控制柄固定屏幕像素；勿作用于 moveable-direction 边线 */
+/*
+ * Moveable 控制框：
+ * - 根节点必须高于画布元素 zIndex（节点默认 ≥1），否则多选组框线会被节点盖住，只剩锚点可见
+ * - 勿把 .moveable-group 压到 z-index:1（会覆盖根节点的 9999）
+ */
 .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;
-  background: var(--moveable-color) !important;
+.rv-moveable-layer.moveable-group,
+.rv-moveable-layer.moveable-control-box {
+  z-index: 9999 !important;
 }
 
-.rv-moveable-layer .moveable-line.moveable-direction {
-  width: 1px !important;
-  height: 1px !important;
-  margin: 0 !important;
+/* Moveable 默认 .group { z-index: -1 }，必须覆盖，避免整组掉到节点下方 */
+.rv-moveable-layer.moveable-group {
+  z-index: 9999 !important;
 }
 
 .rv-moveable-layer .moveable-line {
   --moveable-color: #1990ff;
+  background: var(--moveable-color) !important;
+}
+
+/* 组选/边线：保持颜色；厚度仍由 moveable zoom 的 scaleY 补偿 */
+.rv-moveable-layer .moveable-line.moveable-direction:not(.moveable-edge) {
+  background: var(--moveable-color) !important;
+}
+
+/* 子 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;
+  z-index: 10 !important;
+}