@arronqzy/vue-view 0.1.0

package/src/panel/components/materialSidebarData.ts

@@ -0,0 +1,85 @@
+import type { PanelElement } from "../types";
+
+export type MaterialCategoryId = "charts" | "basic" | "media";
+
+export type MaterialItem = {
+  id: string;
+  title: string;
+};
+
+export type MaterialCategory = {
+  id: MaterialCategoryId;
+  title: string;
+  items: MaterialItem[];
+};
+
+export const MATERIAL_LABEL_MAP: Record<string, string> = {
+  bar: "柱状图",
+  line: "折线图",
+  pie: "饼图",
+  area: "面积图",
+  scatter: "散点图",
+  radar: "雷达图",
+  gauge: "仪表盘",
+  funnel: "漏斗图",
+  text: "文本",
+  rect: "矩形",
+  grid: "网格布局",
+  image: "图片",
+  video: "视频",
+  audio: "音频",
+  reference: "引用组件",
+  geometry: "几何",
+};
+
+export const defaultCategories: MaterialCategory[] = [
+  {
+    id: "charts",
+    title: "图表",
+    items: [
+      { id: "bar", title: "柱状图" },
+      { id: "line", title: "折线图" },
+      { id: "pie", title: "饼图" },
+      { id: "area", title: "面积图" },
+      { id: "scatter", title: "散点图" },
+      { id: "radar", title: "雷达图" },
+      { id: "gauge", title: "仪表盘" },
+      { id: "funnel", title: "漏斗图" },
+    ],
+  },
+  {
+    id: "basic",
+    title: "基础",
+    items: [
+      { id: "text", title: "文本" },
+      { id: "geometry", title: "几何" },
+      { id: "grid", title: "网格布局" },
+      { id: "image", title: "图片" },
+      { id: "reference", title: "引用组件" },
+    ],
+  },
+  {
+    id: "media",
+    title: "媒体",
+    items: [
+      { id: "video", title: "视频" },
+      { id: "audio", title: "音频" },
+    ],
+  },
+];
+
+export const themedScrollbarClass =
+  "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
+
+/** 节点树中网格子节点顺序：与画布槽位一致 */
+export function compareGridTreeChildOrder(a: PanelElement, b: PanelElement): number {
+  const ai = typeof a.gridSlotIndex === "number" ? a.gridSlotIndex : 0;
+  const bi = typeof b.gridSlotIndex === "number" ? b.gridSlotIndex : 0;
+  if (ai !== bi) return ai - bi;
+  return a.id.localeCompare(b.id);
+}
+
+export function getNodeDisplayName(node: PanelElement) {
+  const customName = node.name?.trim();
+  return customName || node.chart?.title || MATERIAL_LABEL_MAP[node.materialType ?? ""] || node.id;
+}

package/src/panel/components/scope-config/ScopeConfigProvider.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { computed, onWatcherCleanup, provide, reactive, toValue, watch, type MaybeRef } from "vue";
+import type { PanelElement } from "../../types";
+import { scopeFieldDomId } from "../../utils/scope-field-labels";
+import { groupScopeWarningsByField } from "../../utils/scope-template-warnings";
+import {
+  scopeConfigKey,
+  type ScopeConfigContextValue,
+} from "./scopeConfigContext";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
+import ScopeTemplatePreviewHost from "./ScopeTemplatePreviewHost.vue";
+import type { ScopeTemplateWarning } from "../../utils/scope-template-warnings";
+
+const INLINE_HINT_ATTR = "data-scope-inline-hint";
+
+const props = defineProps<{
+  scope?: unknown;
+  element?: PanelElement | null;
+  warnings: ScopeTemplateWarning[];
+  scrollContainerRef?: MaybeRef<HTMLElement | null | undefined>;
+}>();
+
+const warningsByField = computed(() => groupScopeWarningsByField(props.warnings));
+
+function findFieldAnchor(
+  container: HTMLElement,
+  fieldId: string,
+  fieldWarnings: ScopeTemplateWarning[]
+): HTMLElement | null {
+  const existing = document.getElementById(scopeFieldDomId(fieldId));
+  if (existing) return existing;
+
+  const inputs = container.querySelectorAll("input, textarea");
+  for (const input of inputs) {
+    if (
+      !(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)
+    ) {
+      continue;
+    }
+    const matched = fieldWarnings.some(
+      (warning) =>
+        input.value === warning.template ||
+        input.value.includes(warning.expression)
+    );
+    if (!matched) continue;
+    const host = input.closest("label") ?? input.parentElement;
+    if (host instanceof HTMLElement) {
+      host.id = scopeFieldDomId(fieldId);
+      return host;
+    }
+  }
+
+  return null;
+}
+
+function attachInlineHints(
+  container: HTMLElement,
+  byField: Map<string, ScopeTemplateWarning[]>
+) {
+  container
+    .querySelectorAll(`[${INLINE_HINT_ATTR}]`)
+    .forEach((node) => node.remove());
+
+  for (const [fieldId, fieldWarnings] of byField) {
+    const anchor = findFieldAnchor(container, fieldId, fieldWarnings);
+    if (!anchor || anchor.querySelector(`[${INLINE_HINT_ATTR}]`)) continue;
+
+    const hint = document.createElement("div");
+    hint.setAttribute(INLINE_HINT_ATTR, "1");
+    hint.className = "space-y-0.5";
+    for (const warning of fieldWarnings) {
+      const line = document.createElement("p");
+      line.className =
+        "text-[10px] leading-relaxed text-amber-700 dark:text-amber-300";
+      line.textContent = warning.message;
+      hint.appendChild(line);
+    }
+    anchor.appendChild(hint);
+  }
+}
+
+function scrollContainer() {
+  return toValue(props.scrollContainerRef) ?? null;
+}
+
+function scrollToField(fieldId: string) {
+  const container = scrollContainer();
+  const fieldWarnings = warningsByField.value.get(fieldId);
+  if (container && fieldWarnings?.length) {
+    findFieldAnchor(container, fieldId, fieldWarnings);
+  }
+
+  const target = document.getElementById(scopeFieldDomId(fieldId));
+  if (!target) return;
+
+  if (container && container.contains(target)) {
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const offset =
+      targetRect.top -
+      containerRect.top +
+      container.scrollTop -
+      container.clientHeight / 2 +
+      targetRect.height / 2;
+    container.scrollTo({ top: Math.max(0, offset), behavior: "smooth" });
+  } else {
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+
+  target.classList.add("scope-field--highlight");
+  window.setTimeout(() => {
+    target.classList.remove("scope-field--highlight");
+  }, 1600);
+}
+
+const api = reactive<ScopeConfigContextValue>({
+  get warnings() {
+    return props.warnings;
+  },
+  get warningsByField() {
+    return warningsByField.value;
+  },
+  scrollToField,
+});
+
+provide(scopeConfigKey, api);
+
+watch(
+  [() => scrollContainer(), () => props.warnings, warningsByField],
+  () => {
+    const container = scrollContainer();
+    if (!container || props.warnings.length === 0) return;
+
+    attachInlineHints(container, warningsByField.value);
+    onWatcherCleanup(() => {
+      container
+        .querySelectorAll(`[${INLINE_HINT_ATTR}]`)
+        .forEach((node) => node.remove());
+    });
+  },
+  { flush: "post" }
+);
+</script>
+
+<template>
+  <slot />
+  <ScopeTemplateAutocompleteHost :scope="scope" :container-ref="scrollContainerRef" />
+  <ScopeTemplatePreviewHost
+    :scope="scope"
+    :element="element ?? null"
+    :container-ref="scrollContainerRef"
+  />
+</template>

package/src/panel/components/scope-config/ScopeTemplateAutocompleteHost.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import {
+  onMounted,
+  onUnmounted,
+  ref,
+  shallowRef,
+  toValue,
+  watch,
+  type MaybeRef,
+} from "vue";
+import {
+  applyScopeAutocompleteSelection,
+  buildScopeExpression,
+  getScopeAutocompleteSuggestions,
+  parseScopeAutocomplete,
+  type ScopeAutocompleteState,
+} from "../../utils/scope-autocomplete";
+
+type DropdownState = {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  state: ScopeAutocompleteState;
+  suggestions: string[];
+  activeIndex: number;
+  rect: DOMRect;
+};
+
+const props = defineProps<{
+  scope: unknown;
+  containerRef?: MaybeRef<HTMLElement | null | undefined>;
+}>();
+
+const dropdown = shallowRef<DropdownState | null>(null);
+
+function isAutocompleteTarget(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (target instanceof HTMLTextAreaElement) {
+    return target.dataset.scopeAutocomplete !== "off";
+  }
+  if (target instanceof HTMLInputElement) {
+    if (target.dataset.scopeAutocomplete === "off") return false;
+    const type = target.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const proto =
+    element instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
+  descriptor?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function closeDropdown() {
+  dropdown.value = null;
+}
+
+function refreshForInput(input: HTMLInputElement | HTMLTextAreaElement) {
+  if (props.scope === undefined) {
+    closeDropdown();
+    return;
+  }
+  const cursor = input.selectionStart ?? input.value.length;
+  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope);
+  if (!parsed) {
+    closeDropdown();
+    return;
+  }
+  const suggestions = getScopeAutocompleteSuggestions(props.scope, parsed);
+  if (suggestions.length === 0) {
+    closeDropdown();
+    return;
+  }
+  dropdown.value = {
+    input,
+    state: parsed,
+    suggestions,
+    activeIndex: 0,
+    rect: input.getBoundingClientRect(),
+  };
+}
+
+function applySuggestion(index: number) {
+  const current = dropdown.value;
+  if (!current) return;
+  const selected = current.suggestions[index];
+  if (!selected) return;
+
+  const { value, cursor } = applyScopeAutocompleteSelection(
+    current.input.value,
+    current.state,
+    selected
+  );
+  setNativeInputValue(current.input, value);
+  current.input.focus();
+  current.input.setSelectionRange(cursor, cursor);
+  closeDropdown();
+  window.requestAnimationFrame(() => {
+    refreshForInput(current.input);
+  });
+}
+
+function onFocusIn(event: FocusEvent) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onInput(event: Event) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const current = dropdown.value;
+  if (!current || event.target !== current.input) return;
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.min(current.activeIndex + 1, current.suggestions.length - 1),
+    };
+    return;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.max(current.activeIndex - 1, 0),
+    };
+    return;
+  }
+  if (event.key === "Enter" || event.key === "Tab") {
+    if (current.suggestions.length > 0) {
+      event.preventDefault();
+      applySuggestion(current.activeIndex);
+    }
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    closeDropdown();
+  }
+}
+
+function onPointerDown(event: MouseEvent) {
+  const target = event.target as Node | null;
+  if (
+    dropdown.value?.input.contains(target ?? null) ||
+    (target instanceof Element && target.closest("[data-scope-ac-list]"))
+  ) {
+    return;
+  }
+  const container = toValue(props.containerRef);
+  if (container && !container.contains(target)) {
+    closeDropdown();
+  }
+}
+
+watch(
+  () => toValue(props.containerRef),
+  (container, _prev, onCleanup) => {
+    if (!container || props.scope === undefined) return;
+
+    container.addEventListener("focusin", onFocusIn);
+    container.addEventListener("input", onInput, true);
+    container.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", closeDropdown, true);
+    window.addEventListener("resize", closeDropdown);
+
+    onCleanup(() => {
+      container.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("input", onInput, true);
+      container.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", closeDropdown, true);
+      window.removeEventListener("resize", closeDropdown);
+    });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.scope,
+  () => {
+    if (props.scope === undefined) closeDropdown();
+  }
+);
+</script>
+
+<template>
+  <Teleport v-if="dropdown && scope !== undefined" to="body">
+    <div
+      data-scope-ac-list
+      class="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+      :style="{
+        left: `${dropdown.rect.left}px`,
+        top: `${dropdown.rect.bottom + 4}px`,
+        width: `${Math.max(dropdown.rect.width, 160)}px`,
+      }"
+    >
+      <button
+        v-for="(key, index) in dropdown.suggestions"
+        :key="key"
+        type="button"
+        :class="[
+          'flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-accent',
+          index === dropdown.activeIndex && 'bg-accent',
+        ]"
+        @mousedown.prevent
+        @click="applySuggestion(index)"
+      >
+        <span class="font-medium text-foreground">{{ key }}</span>
+        <span class="font-mono text-[10px] text-muted-foreground">{{
+          `{${buildScopeExpression(dropdown.state.path, key)}}`
+        }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>

package/src/panel/components/scope-config/ScopeTemplatePreviewHost.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed, onWatcherCleanup, shallowRef, toValue, watch, type MaybeRef } from "vue";
+import type { PanelElement } from "../../types";
+import { hasScopeTemplate } from "../../utils/scope-template";
+import {
+  collectElementScopeTemplateFields,
+  matchScopeTemplateFieldId,
+} from "../../utils/scope-template-preview";
+import ScopeTemplatePreviewPanel from "./ScopeTemplatePreviewPanel.vue";
+
+const PREVIEW_SLOT_ATTR = "data-scope-preview-slot";
+const PREVIEW_KEY_ATTR = "data-scope-preview-key";
+
+type PreviewAnchor = {
+  key: string;
+  template: string;
+  fieldId?: string;
+  slot: HTMLElement;
+};
+
+const props = defineProps<{
+  scope: unknown;
+  element: PanelElement | null;
+  containerRef?: MaybeRef<HTMLElement | null | undefined>;
+}>();
+
+const keySeed = `scope-preview-${Math.random().toString(36).slice(2, 9)}`;
+const anchors = shallowRef<PreviewAnchor[]>([]);
+
+const templateFields = computed(() =>
+  props.element ? collectElementScopeTemplateFields(props.element) : []
+);
+
+function isPreviewTarget(
+  node: Element
+): node is HTMLInputElement | HTMLTextAreaElement {
+  if (node instanceof HTMLTextAreaElement) {
+    return node.dataset.scopeAutocomplete !== "off";
+  }
+  if (node instanceof HTMLInputElement) {
+    if (node.dataset.scopeAutocomplete === "off") return false;
+    const type = node.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function ensurePreviewKey(
+  input: HTMLInputElement | HTMLTextAreaElement
+): string {
+  const existing = input.getAttribute(PREVIEW_KEY_ATTR);
+  if (existing) return existing;
+  const key = `${keySeed}-${Math.random().toString(36).slice(2, 9)}`;
+  input.setAttribute(PREVIEW_KEY_ATTR, key);
+  return key;
+}
+
+function ensurePreviewSlot(
+  input: HTMLInputElement | HTMLTextAreaElement
+): HTMLElement {
+  const host = input.closest("label") ?? input.parentElement;
+  if (!host) return input;
+
+  const existing = host.querySelector(`[${PREVIEW_SLOT_ATTR}]`);
+  if (existing instanceof HTMLElement) return existing;
+
+  const slot = document.createElement("div");
+  slot.setAttribute(PREVIEW_SLOT_ATTR, "1");
+  input.insertAdjacentElement("afterend", slot);
+  return slot;
+}
+
+function removeOrphanPreviewSlots(container: HTMLElement) {
+  container.querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`).forEach((slot) => {
+    const host = slot.parentElement;
+    const input = host?.querySelector("input, textarea");
+    if (
+      !input ||
+      !(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) ||
+      !hasScopeTemplate(input.value)
+    ) {
+      slot.remove();
+    }
+  });
+}
+
+function inferFieldIdFromDom(
+  input: HTMLInputElement | HTMLTextAreaElement
+): string | undefined {
+  const label = input.closest("label");
+  const labelText = label?.textContent ?? "";
+  if (labelText.includes("类目")) return "chart.labelsText";
+  if (labelText.includes("数值")) return "chart.valuesText";
+  return undefined;
+}
+
+function scanAnchors() {
+  const container = toValue(props.containerRef);
+  if (!container || props.scope === undefined) {
+    anchors.value = [];
+    return;
+  }
+
+  const next: PreviewAnchor[] = [];
+  const inputs = container.querySelectorAll("input, textarea");
+  for (const node of inputs) {
+    if (!isPreviewTarget(node)) continue;
+    const template = node.value;
+    if (!hasScopeTemplate(template)) continue;
+
+    const fieldId =
+      matchScopeTemplateFieldId(template, templateFields.value) ??
+      inferFieldIdFromDom(node);
+    next.push({
+      key: ensurePreviewKey(node),
+      template,
+      fieldId,
+      slot: ensurePreviewSlot(node),
+    });
+  }
+
+  removeOrphanPreviewSlots(container);
+
+  const prev = anchors.value;
+  if (
+    prev.length === next.length &&
+    prev.every(
+      (item, index) =>
+        item.key === next[index]?.key &&
+        item.template === next[index]?.template &&
+        item.fieldId === next[index]?.fieldId
+    )
+  ) {
+    return;
+  }
+  anchors.value = next;
+}
+
+watch(
+  [() => toValue(props.containerRef), () => props.element, () => props.scope, templateFields],
+  () => {
+    scanAnchors();
+  },
+  { flush: "post" }
+);
+
+watch(
+  () => toValue(props.containerRef),
+  (container) => {
+    if (!container || props.scope === undefined) return;
+
+    const onInput = () => {
+      window.requestAnimationFrame(scanAnchors);
+    };
+
+    container.addEventListener("input", onInput, true);
+    const observer = new MutationObserver(onInput);
+    observer.observe(container, { childList: true, subtree: true });
+
+    onWatcherCleanup(() => {
+      container.removeEventListener("input", onInput, true);
+      observer.disconnect();
+      container
+        .querySelectorAll(`[${PREVIEW_SLOT_ATTR}]`)
+        .forEach((node) => node.remove());
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <template v-if="scope !== undefined && anchors.length > 0">
+    <Teleport
+      v-for="anchor in anchors"
+      :key="anchor.key"
+      :to="anchor.slot"
+    >
+      <ScopeTemplatePreviewPanel
+        :template="anchor.template"
+        :scope="scope"
+        :field-id="anchor.fieldId"
+      />
+    </Teleport>
+  </template>
+</template>

package/src/panel/components/scope-config/ScopeTemplatePreviewPanel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  formatScopeTemplatePreview,
+  resolveScopeTemplatePreview,
+} from "../../utils/scope-template-preview";
+
+const props = defineProps<{
+  template: string;
+  scope: unknown;
+  fieldId?: string;
+}>();
+
+const isExpanded = ref(false);
+
+const previewValue = () =>
+  resolveScopeTemplatePreview(props.template, props.scope, props.fieldId);
+const previewText = () => formatScopeTemplatePreview(previewValue());
+const previewType = () => {
+  const value = previewValue();
+  return Array.isArray(value) ? `数组 · ${value.length} 项` : typeof value;
+};
+</script>
+
+<template>
+  <div class="mt-1 rounded border border-border/60 bg-muted/30">
+    <button
+      type="button"
+      class="flex w-full items-center justify-between gap-2 px-2 py-1 text-left text-[10px] text-muted-foreground hover:bg-accent/40"
+      @click="isExpanded = !isExpanded"
+    >
+      <span class="font-medium text-foreground/80">解析预览</span>
+      <span class="shrink-0 text-[10px]">
+        {{ previewType() }} · {{ isExpanded ? "收起" : "展开" }}
+      </span>
+    </button>
+    <pre
+      v-if="isExpanded"
+      class="max-h-28 overflow-auto border-t border-border/50 px-2 py-1.5 font-mono text-[10px] leading-relaxed text-foreground/90 whitespace-pre-wrap break-all"
+    >{{ previewText() }}</pre>
+  </div>
+</template>