@arronqzy/vue-view 0.1.0

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

@@ -0,0 +1,114 @@
+export type ScopeAutocompleteState = {
+  templateStart: number;
+  cursor: number;
+  path: string[];
+  partialKey: string;
+};
+
+function getValueAtPath(scope: unknown, path: string[]): unknown {
+  let current: unknown = scope;
+  for (const part of path) {
+    if (current === null || typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+function listObjectKeys(value: unknown): string[] {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return [];
+  }
+  return Object.keys(value as Record<string, unknown>);
+}
+
+/** 解析光标处未闭合的 scope 模版表达式 */
+export function parseScopeAutocomplete(
+  text: string,
+  cursor: number,
+  scope: unknown
+): ScopeAutocompleteState | null {
+  const before = text.slice(0, cursor);
+  const templateStart = before.lastIndexOf("{");
+  if (templateStart < 0) return null;
+
+  const inner = before.slice(templateStart + 1);
+  if (inner.includes("}")) return null;
+  if (!inner.startsWith("scope")) return null;
+
+  let body = inner.slice("scope".length);
+  if (body === "" || body === "?") {
+    return { templateStart, cursor, path: [], partialKey: "" };
+  }
+  if (!body.startsWith("?.")) return null;
+
+  body = body.slice(2);
+  if (body === "") {
+    return { templateStart, cursor, path: [], partialKey: "" };
+  }
+
+  const segments = body.split("?.");
+  const endsWithSeparator = inner.endsWith("?.");
+
+  if (endsWithSeparator) {
+    const path = segments.filter((segment) => segment.length > 0);
+    return { templateStart, cursor, path, partialKey: "" };
+  }
+
+  const lastSegment = segments[segments.length - 1] ?? "";
+  const prefixSegments = segments.slice(0, -1).filter((segment) => segment.length > 0);
+  const parent = getValueAtPath(scope, prefixSegments);
+  const keys = listObjectKeys(parent);
+
+  if (lastSegment.length === 0) {
+    return { templateStart, cursor, path: prefixSegments, partialKey: "" };
+  }
+
+  if (keys.includes(lastSegment)) {
+    return {
+      templateStart,
+      cursor,
+      path: [...prefixSegments, lastSegment],
+      partialKey: "",
+    };
+  }
+
+  return {
+    templateStart,
+    cursor,
+    path: prefixSegments,
+    partialKey: lastSegment,
+  };
+}
+
+export function getScopeAutocompleteSuggestions(
+  scope: unknown,
+  state: ScopeAutocompleteState
+): string[] {
+  const parent =
+    state.partialKey.length > 0
+      ? getValueAtPath(scope, state.path)
+      : state.path.length > 0
+        ? getValueAtPath(scope, state.path)
+        : scope;
+
+  const keys = listObjectKeys(parent);
+  if (state.partialKey.length === 0) return keys;
+  return keys.filter((key) => key.startsWith(state.partialKey));
+}
+
+export function buildScopeExpression(path: string[], selectedKey: string): string {
+  return `scope?.${[...path, selectedKey].join("?.")}`;
+}
+
+export function applyScopeAutocompleteSelection(
+  text: string,
+  state: ScopeAutocompleteState,
+  selectedKey: string
+): { value: string; cursor: number } {
+  const expr = buildScopeExpression(state.path, selectedKey);
+  const before = text.slice(0, state.templateStart + 1);
+  const after = text.slice(state.cursor);
+  const value = `${before}${expr}${after}`;
+  const cursor = before.length + expr.length;
+  return { value, cursor };
+}

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

@@ -0,0 +1,46 @@
+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: "几何脚本",
+};
+
+export function resolveScopeFieldLabel(fieldId: string): string {
+  if (LABELS[fieldId]) return LABELS[fieldId];
+  const leaf = fieldId.split(".").pop() ?? fieldId;
+  return LABELS[fieldId] ?? leaf;
+}
+
+export function scopeFieldDomId(fieldId: string): string {
+  return `scope-field-${fieldId.replace(/\./g, "--")}`;
+}

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