@arronqzy/vue-view 0.1.0 → 0.1.2

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

@@ -1,22 +1,41 @@
+import type { TranslateFn } from "@arronqzy/i18n";
+import { tForLocale } from "@arronqzy/i18n";
+
 /** 数组展开模版：[...{scope?.a?.b}] 从 scope 中定位数组并提取每项字段，输出逗号分隔值 */
 
 export const SCOPE_SPREAD_TEMPLATE_RE = /\[\.\.\.\{([^}]+)\}\]/g;
 
+export function getScopeSpreadTemplateDemo(t: TranslateFn = tForLocale("zh-CN")) {
+  return {
+    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 getScopeSpreadTemplateDemo(t) */
 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;
+/** @deprecated Prefer getScopeSpreadDeepTemplateDemo(t) */
+export const SCOPE_SPREAD_DEEP_TEMPLATE_DEMO = getScopeSpreadDeepTemplateDemo();
 
 export type ScopeSpreadEvalIssue =
   | "invalid-expression"
@@ -205,25 +224,39 @@ export function buildSpreadNotArrayWarningMessage(
   fieldLabel: string,
   template: string,
   expression: string,
-  arrayPath: string
+  arrayPath: 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.${arrayPath} 不是数组，数据不符合规则。` +
-    `参考示例：scope 为 ${demoScope} 时使用 ${SCOPE_SPREAD_TEMPLATE_DEMO.template} 输出 ${SCOPE_SPREAD_TEMPLATE_DEMO.output}；` +
-    `深层路径可用 ${deepDemo.template}（scope 为 ${JSON.stringify(deepDemo.scope)} 时输出 ${deepDemo.output}）。`
-  );
+  const demo = getScopeSpreadTemplateDemo(t);
+  const deepDemo = getScopeSpreadDeepTemplateDemo(t);
+  const demoScope = JSON.stringify(demo.scope);
+  return t("panel.scope.warnSpreadNotArray", {
+    fieldLabel,
+    template,
+    arrayPath,
+    demoScope,
+    demoTemplate: demo.template,
+    demoOutput: 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 demo = getScopeSpreadTemplateDemo(t);
+  const deepDemo = getScopeSpreadDeepTemplateDemo(t);
+  const demoScope = JSON.stringify(demo.scope);
+  return t("panel.scope.warnSpreadInvalid", {
+    fieldLabel,
+    template,
+    demoTemplate: demo.template,
+    deepTemplate: deepDemo.template,
+    demoScope,
+    demoOutput: 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;
 
@@ -79,10 +82,7 @@ function analyzeSpreadTemplateValue(
         expression,
         missingPath: "",
         kind: "spread-invalid-expression",
-        message: buildSpreadInvalidExpressionWarningMessage(
-          fieldLabel,
-          spreadTemplate
-        ),
+        message: buildSpreadInvalidExpressionWarningMessage(fieldLabel, spreadTemplate, t),
       });
       continue;
     }
@@ -98,10 +98,7 @@ function analyzeSpreadTemplateValue(
         expression,
         missingPath: "",
         kind: "spread-invalid-expression",
-        message: buildSpreadInvalidExpressionWarningMessage(
-          fieldLabel,
-          spreadTemplate
-        ),
+        message: buildSpreadInvalidExpressionWarningMessage(fieldLabel, spreadTemplate, t),
       });
       continue;
     }
@@ -118,7 +115,7 @@ 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 +133,8 @@ function analyzeSpreadTemplateValue(
           fieldLabel,
           spreadTemplate,
           expression,
-          arrayPath
+          arrayPath,
+          t
         ),
       });
     }
@@ -148,14 +146,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 +171,7 @@ function analyzeTemplateValue(
         expression,
         missingPath: path,
         kind: "missing-path",
-        message: `「${fieldLabel}」引用了 scope.${path}，但当前 scope 数据中并没有「${path}」字段，建议检查一下。`,
+        message: t("panel.scope.warnMissingPath", { fieldLabel, path }),
       });
     }
   }
@@ -188,18 +187,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 +207,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 = /\{[^}]+\}|\[\.\.\.\{[^}]+\}\]/;
@@ -54,6 +60,66 @@ 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);
+}
+
+/** 将 table.source / rowsText 模版解析为原始行数据（供 transform 使用） */
+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 +150,20 @@ 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 {
+        const next = { ...resolved.table };
+        delete next.rows;
+        resolved.table = next;
+      }
+    }
+  }
   return resolved;
 }
 

package/src/tailwind.css

@@ -1,14 +1,21 @@
-/* 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 {
@@ -16,13 +23,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;
 }
 
@@ -37,7 +44,8 @@
   margin-left: -7px !important;
   border-radius: 50% !important;
   box-sizing: border-box !important;
-  border: 2px solid hsl(var(--background)) !important;
+  border: 2px solid #fff !important;
   background: #1990ff !important;
   background: var(--moveable-color) !important;
+  z-index: 10 !important;
 }