@arronqzy/react-view 1.0.5 → 1.0.7

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

@@ -1,44 +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.labelsText": "图表类目",
-  "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-preview.ts

@@ -1,3 +1,5 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
 import type { PanelElement } from "../types";
 import {
   materializeChartLabelsText,
@@ -22,7 +24,8 @@ function shouldSkipField(fieldId: string): boolean {
 function walkElementTemplateFields(
   value: unknown,
   fieldId: string,
-  results: ScopeTemplateField[]
+  results: ScopeTemplateField[],
+  t: TranslateFn
 ) {
   if (shouldSkipField(fieldId)) return;
 
@@ -30,7 +33,7 @@ function walkElementTemplateFields(
     if (!hasScopeTemplate(value)) return;
     results.push({
       fieldId,
-      fieldLabel: resolveScopeFieldLabel(fieldId),
+      fieldLabel: resolveScopeFieldLabel(fieldId, t),
       template: value,
     });
     return;
@@ -38,7 +41,7 @@ function walkElementTemplateFields(
 
   if (Array.isArray(value)) {
     value.forEach((item, index) => {
-      walkElementTemplateFields(item, `${fieldId}.${index}`, results);
+      walkElementTemplateFields(item, `${fieldId}.${index}`, results, t);
     });
     return;
   }
@@ -46,16 +49,17 @@ function walkElementTemplateFields(
   if (value && typeof value === "object") {
     for (const [key, nested] of Object.entries(value)) {
       const nextId = fieldId ? `${fieldId}.${key}` : key;
-      walkElementTemplateFields(nested, nextId, results);
+      walkElementTemplateFields(nested, nextId, results, t);
     }
   }
 }
 
 export function collectElementScopeTemplateFields(
-  element: PanelElement
+  element: PanelElement,
+  t: TranslateFn = tForLocale("zh-CN")
 ): ScopeTemplateField[] {
   const results: ScopeTemplateField[] = [];
-  walkElementTemplateFields(element, "", results);
+  walkElementTemplateFields(element, "", results, t);
   return results;
 }
 

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

@@ -1,5 +1,8 @@
 /** 数组展开模版：[...{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 = {
@@ -8,15 +11,22 @@ export const SCOPE_SPREAD_TEMPLATE_DEMO = {
   output: "1,2",
 } as const;
 
-export const SCOPE_SPREAD_DEEP_TEMPLATE_DEMO = {
-  scope: {
-    data: {
-      data: [{ statusName: "进行中" }, { statusName: "已完成" }],
+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: "进行中,已完成",
-} as const;
+    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"
@@ -205,25 +215,38 @@ export function buildSpreadNotArrayWarningMessage(
   fieldLabel: string,
   template: string,
   expression: string,
-  arrayPath: string
+  arrayPath: string,
+  t: TranslateFn = tForLocale("zh-CN")
 ): string {
+  void expression;
   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}）。`
-  );
+  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
+  template: string,
+  t: TranslateFn = tForLocale("zh-CN")
 ): 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}。`
-  );
+  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,
+  });
 }

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

@@ -1,3 +1,5 @@
+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";
@@ -59,10 +61,11 @@ function pathExistsInScope(scope: unknown, path: string): boolean {
 function analyzeSpreadTemplateValue(
   fieldId: string,
   value: string,
-  scope: unknown
+  scope: unknown,
+  t: TranslateFn
 ): ScopeTemplateWarning[] {
   const warnings: ScopeTemplateWarning[] = [];
-  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const fieldLabel = resolveScopeFieldLabel(fieldId, t);
   const spreadRe = new RegExp(SCOPE_SPREAD_TEMPLATE_RE.source, "g");
   let match: RegExpExecArray | null;
 
@@ -81,7 +84,8 @@ function analyzeSpreadTemplateValue(
         kind: "spread-invalid-expression",
         message: buildSpreadInvalidExpressionWarningMessage(
           fieldLabel,
-          spreadTemplate
+          spreadTemplate,
+          t
         ),
       });
       continue;
@@ -100,7 +104,8 @@ function analyzeSpreadTemplateValue(
         kind: "spread-invalid-expression",
         message: buildSpreadInvalidExpressionWarningMessage(
           fieldLabel,
-          spreadTemplate
+          spreadTemplate,
+          t
         ),
       });
       continue;
@@ -118,7 +123,10 @@ function analyzeSpreadTemplateValue(
           expression,
           missingPath: arrayPath,
           kind: "missing-path",
-          message: `「${fieldLabel}」引用了 scope.${arrayPath}，但当前 scope 数据中并没有「${arrayPath}」字段，建议检查一下。`,
+          message: t("panel.scope.warnMissingPath", {
+            fieldLabel,
+            path: arrayPath,
+          }),
         });
       }
       continue;
@@ -136,7 +144,8 @@ function analyzeSpreadTemplateValue(
           fieldLabel,
           spreadTemplate,
           expression,
-          arrayPath
+          arrayPath,
+          t
         ),
       });
     }
@@ -148,14 +157,15 @@ function analyzeSpreadTemplateValue(
 function analyzeTemplateValue(
   fieldId: string,
   value: string,
-  scope: unknown
+  scope: unknown,
+  t: TranslateFn
 ): ScopeTemplateWarning[] {
   if (!hasScopeTemplate(value)) return [];
 
   const warnings: ScopeTemplateWarning[] = [
-    ...analyzeSpreadTemplateValue(fieldId, value, scope),
+    ...analyzeSpreadTemplateValue(fieldId, value, scope, t),
   ];
-  const fieldLabel = resolveScopeFieldLabel(fieldId);
+  const fieldLabel = resolveScopeFieldLabel(fieldId, t);
   const expressionRe = /\{([^}]+)\}/g;
   let match: RegExpExecArray | null;
 
@@ -172,7 +182,7 @@ function analyzeTemplateValue(
         expression,
         missingPath: path,
         kind: "missing-path",
-        message: `「${fieldLabel}」引用了 scope.${path}，但当前 scope 数据中并没有「${path}」字段，建议检查一下。`,
+        message: t("panel.scope.warnMissingPath", { fieldLabel, path }),
       });
     }
   }
@@ -188,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;
   }
@@ -207,19 +218,20 @@ 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) => {

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

@@ -1,8 +1,14 @@
 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 = /\{[^}]+\}|\[\.\.\.\{[^}]+\}\]/;
@@ -33,13 +39,13 @@ export function evaluateScopeTemplate(
 
   const withSpread = template.replace(
     SCOPE_SPREAD_TEMPLATE_RE,
-    (_, rawExpr: string) => {
+    (_: string, rawExpr: string) => {
       const result = evaluateSpreadScopeExpression(rawExpr, scope);
       return result.ok ? result.value : "";
     }
   );
 
-  return withSpread.replace(/\{([^}]+)\}/g, (_, rawExpr: string) => {
+  return withSpread.replace(/\{([^}]+)\}/g, (_: string, rawExpr: string) => {
     const value = evaluateScopeExpression(rawExpr, scope);
     if (value === null || value === undefined) return "";
     if (typeof value === "string") return value;
@@ -54,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;
@@ -84,6 +149,21 @@ export function resolvePanelElementScope(
       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;
 }
 

package/src/tailwind.css

@@ -26,17 +26,24 @@
   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-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-control-box {
+  z-index: 9999 !important;
+}
+
+/* Moveable 默认 .group { z-index: -1 }，必须覆盖，避免整组掉到节点下方 */
+.rv-moveable-layer.moveable-group {
+  z-index: 9999 !important;
 }
 
 .rv-moveable-layer .moveable-line {
@@ -44,13 +51,13 @@
   background: var(--moveable-color) !important;
 }
 
-/* 组选/单边控制线：厚度由 moveable zoom 补偿，保持屏幕 1px */
-.rv-moveable-layer .moveable-line.moveable-direction {
+/* 组选/边线：保持颜色；厚度仍由 moveable zoom 的 scaleY 补偿 */
+.rv-moveable-layer .moveable-line.moveable-direction:not(.moveable-edge) {
   background: var(--moveable-color) !important;
 }
 
-.rv-moveable-layer .moveable-group .moveable-control-box,
-.rv-moveable-layer.moveable-group .moveable-control-box {
+/* 子 control-box 相对组内层叠，勿压低根节点 */
+.rv-moveable-layer.moveable-group > .moveable-control-box {
   z-index: 2 !important;
 }
 
@@ -68,4 +75,5 @@
   border: 2px solid hsl(var(--background)) !important;
   background: #1990ff !important;
   background: var(--moveable-color) !important;
+  z-index: 10 !important;
 }