@arronqzy/vue-view 0.1.0

package/src/panel/scope/view-scope-store.ts

@@ -0,0 +1,82 @@
+import {
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  watchEffect,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowRef,
+} from "vue";
+
+const scopes = new Map<string, unknown>();
+let version = 0;
+const listeners = new Set<() => void>();
+
+function emit() {
+  version += 1;
+  listeners.forEach((listener) => listener());
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function clearViewElementScopes() {
+  if (scopes.size === 0) return;
+  scopes.clear();
+  emit();
+}
+
+export function setViewElementScope(elementId: string, scope: unknown) {
+  scopes.set(elementId, scope);
+  emit();
+}
+
+export function setViewElementScopes(elementIds: string[], scope: unknown) {
+  if (elementIds.length === 0) return;
+  elementIds.forEach((id) => scopes.set(id, scope));
+  emit();
+}
+
+export function getViewElementScope(elementId: string): unknown | undefined {
+  return scopes.get(elementId);
+}
+
+export function hasViewElementScope(elementId: string): boolean {
+  return scopes.has(elementId);
+}
+
+function useSyncExternalStore<T>(getSnapshot: () => T): ShallowRef<T> {
+  const state = shallowRef(getSnapshot()) as ShallowRef<T>;
+  const update = () => {
+    state.value = getSnapshot();
+  };
+  const unsub = subscribe(update);
+  onScopeDispose(unsub);
+  return state;
+}
+
+/** 订阅单个视图元素的 scope 快照（Vue composable） */
+export function useViewElementScope(
+  elementId: MaybeRefOrGetter<string | null | undefined>
+): Ref<unknown | undefined> {
+  const scope = shallowRef<unknown>(undefined);
+
+  watchEffect((onCleanup) => {
+    const id = toValue(elementId);
+    const update = () => {
+      scope.value = id ? scopes.get(id) : undefined;
+    };
+    update();
+    const unsub = subscribe(update);
+    onCleanup(unsub);
+  });
+
+  return scope;
+}
+
+/** 订阅 scope store 版本号，用于在任意 scope 变更时触发重渲染 */
+export function useViewScopeStoreVersion(): Ref<number> {
+  return useSyncExternalStore(() => version);
+}

package/src/panel/types.ts

@@ -0,0 +1,127 @@
+export type PanelChartConfig = {
+  title?: string;
+  color?: string;
+  colorMode?: "solid" | "gradient";
+  gradientFrom?: string;
+  gradientTo?: string;
+  gradientDirection?: "to-right" | "to-bottom" | "to-bottom-right" | "to-top-right";
+  renderMode?: "canvas" | "svg";
+  xAxisName?: string;
+  yAxisName?: string;
+  xAxisTickShow?: boolean;
+  yAxisTickShow?: boolean;
+  xAxisTickColor?: string;
+  yAxisTickColor?: string;
+  xAxisSplitLineShow?: boolean;
+  yAxisSplitLineShow?: boolean;
+  xAxisSplitLineColor?: string;
+  yAxisSplitLineColor?: string;
+  xAxisLabelColor?: string;
+  yAxisLabelColor?: string;
+  xAxisLabelFontSize?: number;
+  yAxisLabelFontSize?: number;
+  xAxisLabelAutoEllipsis?: boolean;
+  yAxisLabelAutoEllipsis?: boolean;
+  tooltipShow?: boolean;
+  tooltipTrigger?: "axis" | "item";
+  tooltipBackgroundColor?: string;
+  tooltipTextColor?: string;
+  tooltipFormatter?: string;
+  labels?: string[];
+  /** 逗号分隔的原始类目文本，支持 scope 模版；存在时优先于 labels */
+  labelsText?: string;
+  values?: number[];
+  /** 逗号分隔的原始数值文本，支持 scope 模版；存在时优先于 values */
+  valuesText?: string;
+  smooth?: boolean;
+  barWidth?: number;
+  pieInnerRadius?: number;
+  pieOuterRadius?: number;
+  option?: Record<string, unknown>;
+};
+
+export type PanelElementStyle = {
+  backgroundColor?: string;
+  backgroundImage?: string;
+  backgroundImageRemoteUrl?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  borderWidth?: number;
+  borderStyle?: "none" | "solid" | "dashed" | "dotted" | "double";
+  borderColor?: string;
+  borderRadius?: number;
+};
+
+export type ReferenceCopyMode = "shallow" | "deep";
+
+export type PanelElement = {
+  id: string;
+  layerId: string;
+  zIndex?: number;
+  name?: string;
+  locked?: boolean;
+  materialType?: string;
+  refLayerId?: string;
+  refCopyMode?: ReferenceCopyMode;
+  refSnapshot?: PanelElement[];
+  chart?: PanelChartConfig;
+  textHtml?: string;
+  textAllowInput?: boolean;
+  textFontFamily?: string;
+  textFontSize?: number;
+  textFontWeight?: string;
+  textColor?: string;
+  textLineHeight?: number;
+  textAlign?: "left" | "center" | "right" | "justify";
+  gridRows?: number;
+  gridCols?: number;
+  gridGap?: number;
+  gridPadding?: number;
+  gridSnapThreshold?: number;
+  parentGridId?: string;
+  gridSlotIndex?: number;
+  gridColSpan?: number;
+  gridRowSpan?: number;
+  mappingSourceNodeId?: string;
+  mappingSourceLayerId?: string;
+  audioSrc?: string;
+  audioRemoteUrl?: string;
+  audioPosterImage?: string;
+  audioIconPreset?: "speaker" | "music" | "headphone" | "wave";
+  audioVisualEffect?: "none" | "pulse" | "ripple";
+  audioVisualSpeed?: "slow" | "normal" | "fast";
+  mediaAutoPauseOnEdit?: boolean;
+  videoSrc?: string;
+  videoRemoteUrl?: string;
+  geometryShape?: "rect" | "circle" | "triangle" | "diamond" | "hexagon" | "star" | "heart";
+  geometryColor?: string;
+  geometryScript?: string;
+  geometrySketchDataUrl?: string;
+  style?: PanelElementStyle;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotate?: number;
+};
+
+export type PanelLayer = {
+  id: string;
+  name: string;
+  locked: boolean;
+  editable: boolean;
+  isPrimary?: boolean;
+  isMapping?: boolean;
+  mappingBaseLayerId?: string;
+  mergeSelected?: boolean;
+};
+
+export type PanelHistoryItem = {
+  index: number;
+  timestamp: number;
+  label: string;
+  active: boolean;
+};
+
+export type PanelActionResult = { ok: true } | { ok: false; reason: string };
+

package/src/panel/utils/chartOptionBuilder.ts

@@ -0,0 +1,327 @@
+import type { EChartsOption } from "echarts";
+import type { PanelChartConfig, PanelElement } from "../types";
+
+const DEFAULT_CHART_VALUES = [12, 18, 9, 24];
+
+export function getChartValuesDisplayText(chart?: PanelChartConfig): string {
+  if (chart?.valuesText !== undefined) return chart.valuesText;
+  return (chart?.values ?? []).join(",");
+}
+
+export function getChartLabelsDisplayText(chart?: PanelChartConfig): string {
+  if (chart?.labelsText !== undefined) return chart.labelsText;
+  return (chart?.labels ?? []).join(",");
+}
+
+export function resolveChartLabels(element: PanelElement): string[] {
+  const chart = element.chart;
+  if (chart?.labels?.length) return chart.labels;
+  return ["A", "B", "C", "D"];
+}
+
+export function parseChartValuesFromText(
+  text: string | undefined,
+  fallback: number[] = DEFAULT_CHART_VALUES
+): number[] {
+  if (text === undefined) return fallback;
+  const trimmed = text.trim();
+  if (!trimmed) return fallback;
+  const parts = trimmed.split(",").map((s) => s.trim()).filter(Boolean);
+  if (!parts.length) return fallback;
+  return parts.map((s) => {
+    const n = Number(s);
+    return Number.isFinite(n) ? n : 0;
+  });
+}
+
+export function resolveChartValues(element: PanelElement): number[] {
+  const chart = element.chart;
+  if (chart?.valuesText !== undefined) {
+    const parsed = parseChartValuesFromText(chart.valuesText, []);
+    return parsed.length ? parsed : DEFAULT_CHART_VALUES;
+  }
+  return chart?.values?.length ? chart.values : DEFAULT_CHART_VALUES;
+}
+
+export const CHART_TYPES = new Set([
+  "bar",
+  "line",
+  "pie",
+  "area",
+  "scatter",
+  "radar",
+  "gauge",
+  "funnel",
+]);
+
+type ChartType =
+  | "bar"
+  | "line"
+  | "pie"
+  | "area"
+  | "scatter"
+  | "radar"
+  | "gauge"
+  | "funnel";
+
+function deepMerge<T extends Record<string, any>>(base: T, patch?: Record<string, unknown>): T {
+  if (!patch) return base;
+  const next: Record<string, any> = { ...base };
+  for (const [key, value] of Object.entries(patch)) {
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      next[key] &&
+      typeof next[key] === "object" &&
+      !Array.isArray(next[key])
+    ) {
+      next[key] = deepMerge(next[key], value as Record<string, unknown>);
+    } else {
+      next[key] = value;
+    }
+  }
+  return next as T;
+}
+
+export function buildChartOption(element: PanelElement): EChartsOption {
+  const chartType = (element.materialType ?? "") as ChartType;
+  const labels = resolveChartLabels(element);
+  const values = resolveChartValues(element);
+  const color = element.chart?.color || "#3b82f6";
+  const gradientFrom = element.chart?.gradientFrom || color;
+  const gradientTo = element.chart?.gradientTo || "#22d3ee";
+  const gradientDirection = element.chart?.gradientDirection ?? "to-right";
+  const useGradient = element.chart?.colorMode === "gradient";
+  const gradientMeta =
+    gradientDirection === "to-bottom"
+      ? { x: 0, y: 0, x2: 0, y2: 1 }
+      : gradientDirection === "to-bottom-right"
+        ? { x: 0, y: 0, x2: 1, y2: 1 }
+        : gradientDirection === "to-top-right"
+          ? { x: 0, y: 1, x2: 1, y2: 0 }
+          : { x: 0, y: 0, x2: 1, y2: 0 };
+  const chartColor = useGradient
+    ? ({
+        type: "linear",
+        ...gradientMeta,
+        colorStops: [
+          { offset: 0, color: gradientFrom },
+          { offset: 1, color: gradientTo },
+        ],
+      } as const)
+    : color;
+  const title = element.chart?.title ?? "";
+  const xAxisName = element.chart?.xAxisName ?? "";
+  const yAxisName = element.chart?.yAxisName ?? "";
+  const xAxisTickShow = element.chart?.xAxisTickShow ?? true;
+  const yAxisTickShow = element.chart?.yAxisTickShow ?? true;
+  const xAxisTickColor = element.chart?.xAxisTickColor ?? "#94a3b8";
+  const yAxisTickColor = element.chart?.yAxisTickColor ?? "#94a3b8";
+  const xAxisSplitLineShow = element.chart?.xAxisSplitLineShow ?? false;
+  const yAxisSplitLineShow = element.chart?.yAxisSplitLineShow ?? true;
+  const xAxisSplitLineColor = element.chart?.xAxisSplitLineColor ?? "#e2e8f0";
+  const yAxisSplitLineColor = element.chart?.yAxisSplitLineColor ?? "#e2e8f0";
+  const xAxisLabelColor = element.chart?.xAxisLabelColor ?? "#64748b";
+  const yAxisLabelColor = element.chart?.yAxisLabelColor ?? "#64748b";
+  const xAxisLabelFontSize = element.chart?.xAxisLabelFontSize ?? 10;
+  const yAxisLabelFontSize = element.chart?.yAxisLabelFontSize ?? 10;
+  const xAxisLabelAutoEllipsis = element.chart?.xAxisLabelAutoEllipsis ?? false;
+  const yAxisLabelAutoEllipsis = element.chart?.yAxisLabelAutoEllipsis ?? false;
+  const tooltipShow = element.chart?.tooltipShow ?? true;
+  const tooltipTrigger = element.chart?.tooltipTrigger ?? (chartType === "pie" || chartType === "funnel" || chartType === "scatter" ? "item" : "axis");
+  const tooltipBackgroundColor = element.chart?.tooltipBackgroundColor ?? "#0f172a";
+  const tooltipTextColor = element.chart?.tooltipTextColor ?? "#f8fafc";
+  const tooltipFormatter = element.chart?.tooltipFormatter;
+  const tooltipOption = {
+    show: tooltipShow,
+    trigger: tooltipTrigger,
+    backgroundColor: tooltipBackgroundColor,
+    textStyle: { color: tooltipTextColor },
+    formatter: tooltipFormatter || undefined,
+  };
+
+  if (chartType === "pie") {
+    const inner = element.chart?.pieInnerRadius ?? 30;
+    const outer = element.chart?.pieOuterRadius ?? 65;
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      color: [chartColor as any],
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "pie",
+          radius: [`${inner}%`, `${outer}%`],
+          center: ["50%", "58%"],
+          label: { fontSize: 10 },
+          data: labels.map((name, i) => ({ name, value: values[i] ?? 0 })),
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "gauge") {
+    const gaugeValue = values[0] ?? 0;
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "gauge",
+          min: 0,
+          max: 100,
+          progress: { show: true, width: 10 },
+          axisLine: { lineStyle: { width: 10 } },
+          detail: { valueAnimation: false, formatter: "{value}%" },
+          data: [{ value: gaugeValue, name: title }],
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "radar") {
+    const indicator = labels.map((name) => ({ name, max: 100 }));
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      radar: { indicator, radius: "60%", center: ["50%", "58%"] },
+      series: [
+        {
+          type: "radar",
+          data: [{ value: values, name: title }],
+          areaStyle: { opacity: 0.25 },
+          lineStyle: { color: chartColor as any },
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "funnel") {
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: "center", top: 6, textStyle: { fontSize: 12 } },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "funnel",
+          top: 28,
+          left: "10%",
+          width: "80%",
+          height: "65%",
+          sort: "descending",
+          data: labels.map((name, i) => ({ name, value: values[i] ?? 0 })),
+          label: { fontSize: 10 },
+          itemStyle: { color: chartColor as any },
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  if (chartType === "scatter") {
+    const baseOption: EChartsOption = {
+      animation: false,
+      title: { text: title, left: 8, top: 6, textStyle: { fontSize: 12 } },
+      grid: { left: 28, right: 10, top: 30, bottom: 20 },
+      xAxis: {
+        type: "value",
+        name: xAxisName,
+        nameTextStyle: { fontSize: 10 },
+        axisLabel: {
+          fontSize: xAxisLabelFontSize,
+          color: xAxisLabelColor,
+          overflow: xAxisLabelAutoEllipsis ? "truncate" : undefined,
+          hideOverlap: xAxisLabelAutoEllipsis,
+          width: xAxisLabelAutoEllipsis ? 80 : undefined,
+        },
+        axisTick: { show: xAxisTickShow, lineStyle: { color: xAxisTickColor } },
+        splitLine: { show: xAxisSplitLineShow, lineStyle: { color: xAxisSplitLineColor } },
+      },
+      yAxis: {
+        type: "value",
+        name: yAxisName,
+        nameTextStyle: { fontSize: 10 },
+        axisLabel: {
+          fontSize: yAxisLabelFontSize,
+          color: yAxisLabelColor,
+          overflow: yAxisLabelAutoEllipsis ? "truncate" : undefined,
+          hideOverlap: yAxisLabelAutoEllipsis,
+          width: yAxisLabelAutoEllipsis ? 80 : undefined,
+        },
+        axisTick: { show: yAxisTickShow, lineStyle: { color: yAxisTickColor } },
+        splitLine: { show: yAxisSplitLineShow, lineStyle: { color: yAxisSplitLineColor } },
+      },
+      tooltip: tooltipOption,
+      series: [
+        {
+          type: "scatter",
+          data: values.map((v, i) => [i + 1, v]),
+          itemStyle: { color: chartColor as any },
+          symbolSize: 10,
+        },
+      ],
+    };
+    return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+  }
+
+  const seriesType = chartType === "area" ? "line" : chartType;
+  const baseOption: EChartsOption = {
+    animation: false,
+    title: { text: title, left: 8, top: 6, textStyle: { fontSize: 12 } },
+    grid: { left: 28, right: 10, top: 30, bottom: 20 },
+    xAxis: {
+      type: "category",
+      name: xAxisName,
+      nameTextStyle: { fontSize: 10 },
+      data: labels,
+      axisLabel: {
+        fontSize: xAxisLabelFontSize,
+        color: xAxisLabelColor,
+        overflow: xAxisLabelAutoEllipsis ? "truncate" : undefined,
+        hideOverlap: xAxisLabelAutoEllipsis,
+        width: xAxisLabelAutoEllipsis ? 80 : undefined,
+      },
+      axisTick: { show: xAxisTickShow, lineStyle: { color: xAxisTickColor } },
+      splitLine: { show: xAxisSplitLineShow, lineStyle: { color: xAxisSplitLineColor } },
+    },
+    yAxis: {
+      type: "value",
+      name: yAxisName,
+      nameTextStyle: { fontSize: 10 },
+      axisLabel: {
+        fontSize: yAxisLabelFontSize,
+        color: yAxisLabelColor,
+        overflow: yAxisLabelAutoEllipsis ? "truncate" : undefined,
+        hideOverlap: yAxisLabelAutoEllipsis,
+        width: yAxisLabelAutoEllipsis ? 80 : undefined,
+      },
+      axisTick: { show: yAxisTickShow, lineStyle: { color: yAxisTickColor } },
+      splitLine: { show: yAxisSplitLineShow, lineStyle: { color: yAxisSplitLineColor } },
+    },
+    tooltip: tooltipOption,
+    series: [
+      {
+        type: seriesType,
+        data: values,
+        smooth:
+          chartType === "line" || chartType === "area"
+            ? (element.chart?.smooth ?? true)
+            : undefined,
+        barWidth: chartType === "bar" ? (element.chart?.barWidth ?? 24) : undefined,
+        areaStyle: chartType === "area" ? { opacity: 0.25 } : undefined,
+        itemStyle: { color: chartColor as any },
+        lineStyle: { color: chartColor as any },
+      },
+    ],
+  };
+  return deepMerge(baseOption as Record<string, any>, element.chart?.option) as EChartsOption;
+}
+