@arronqzy/vue-view 0.1.0

package/src/panel/components/ViewElementScopePanel.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { formatViewElementScope } from "../utils/scope-template";
+import ConfigHintIcon from "./ConfigHintIcon.vue";
+import ScopeTemplateUsageHint from "./scope-config/ScopeTemplateUsageHint.vue";
+import { onMounted, ref, watch } from "vue";
+
+const SCOPE_COLLAPSE_STORAGE_KEY = "panel:config-scope-collapsed";
+
+const props = defineProps<{
+  scope: unknown;
+}>();
+
+const isCollapsed = ref(false);
+const scopeUpdated = ref(false);
+const prevScopeSerialized = ref<string | null>(null);
+
+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";
+
+const formattedScope = ref(formatViewElementScope(props.scope));
+
+onMounted(() => {
+  const stored = window.localStorage.getItem(SCOPE_COLLAPSE_STORAGE_KEY);
+  if (stored === "1") isCollapsed.value = true;
+});
+
+watch(isCollapsed, (next) => {
+  window.localStorage.setItem(SCOPE_COLLAPSE_STORAGE_KEY, next ? "1" : "0");
+});
+
+watch(
+  () => props.scope,
+  (next) => {
+    const serialized = formatViewElementScope(next);
+    if (
+      prevScopeSerialized.value !== null &&
+      prevScopeSerialized.value !== serialized
+    ) {
+      scopeUpdated.value = true;
+    }
+    prevScopeSerialized.value = serialized;
+    formattedScope.value = serialized;
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="mt-2 border-t border-border/50 pt-2">
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex min-w-0 items-center gap-1.5">
+        <div class="text-[11px] font-medium text-foreground">Scope 数据</div>
+        <ConfigHintIcon label="Scope 模版" content-class="max-w-[380px]">
+          <ScopeTemplateUsageHint />
+        </ConfigHintIcon>
+        <span
+          v-if="scopeUpdated"
+          class="shrink-0 rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-medium text-sky-700 dark:text-sky-300"
+        >
+          已更新
+        </span>
+      </div>
+      <button
+        type="button"
+        class="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
+        @click="isCollapsed = !isCollapsed"
+      >
+        {{ isCollapsed ? "展开 Scope" : "收起 Scope" }}
+      </button>
+    </div>
+    <pre
+      v-if="!isCollapsed"
+      :class="`mt-2 max-h-[200px] overflow-auto rounded-md border border-border/70 bg-muted/30 p-2 font-mono text-[10px] leading-relaxed text-foreground ${themedScrollbarClass}`"
+    >{{ formattedScope }}</pre>
+  </div>
+</template>

package/src/panel/components/WorkspaceConfigSidebar.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Empty } from "ant-design-vue";
+import {
+  BlueprintExecutionLogPanel,
+  BlueprintNodeConfigSidebar,
+  type BlueprintGraphNode,
+  type ExecutionLogSettings,
+  type ExecutionTraceEntry,
+} from "@arronqzy/vue-blueprint";
+import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
+import PanelConfigSidebar from "./PanelConfigSidebar.vue";
+
+export type WorkspaceConfigFocus = "view" | "blueprint" | "blueprint-log";
+
+export type PanelConfigSidebarProps = {
+  selectedElement: PanelElement | null;
+  selectedElements?: PanelElement[];
+  layers: PanelLayer[];
+  updateElement: (
+    id: string,
+    patch: Partial<PanelElement>,
+    options?: { batchId?: string; meta?: Record<string, unknown> }
+  ) => void;
+  setReferenceCopyMode?: (id: string, mode: ReferenceCopyMode) => void;
+  nodeZOrderLabel?: string;
+  onExcludeSelectedNode?: (nodeId: string) => void;
+  onAdjustNodeZOrder?: (
+    nodeId: string,
+    action: "bringForward" | "sendBackward" | "bringToFront" | "sendToBack"
+  ) => void;
+  viewElementScope?: unknown;
+};
+
+export type BlueprintExecutionLogViewProps = {
+  entries: ExecutionTraceEntry[];
+  settings: ExecutionLogSettings;
+  onUpdateSettings: (patch: Partial<ExecutionLogSettings>) => void;
+  onSave: () => void;
+  onExport: () => void;
+  onClear: () => void;
+  onClearAllSaved?: () => void | Promise<void>;
+  onApplyRetention: () => void;
+  hasSavedRuns?: boolean;
+  lifecyclePhase?: string;
+};
+
+export type WorkspaceConfigSidebarProps = Omit<
+  PanelConfigSidebarProps,
+  "selectedElement" | "selectedElements"
+> & {
+  configFocus: WorkspaceConfigFocus;
+  executionLog?: BlueprintExecutionLogViewProps;
+  selectedBlueprintNode: BlueprintGraphNode | null;
+  allowFalseSignalPropagation?: boolean;
+  onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
+  onUpdateBlueprintNode: (
+    nodeId: string,
+    patch: Partial<
+      Pick<
+        BlueprintGraphNode,
+        | "label"
+        | "role"
+        | "nodeType"
+        | "configSource"
+        | "viewElementId"
+        | "viewElementIds"
+        | "nestedBlueprintId"
+        | "libraryBlueprintId"
+        | "lifecyclePhase"
+        | "fetchConfig"
+        | "jsonConfig"
+        | "logicConfig"
+        | "clockConfig"
+      >
+    >
+  ) => void;
+  blueprintLibraryOptions?: { id: string; label: string }[];
+  selectedElement: PanelElement | null;
+  selectedElements?: PanelElement[];
+  allViewElements: PanelElement[];
+};
+
+const props = withDefaults(
+  defineProps<WorkspaceConfigSidebarProps>(),
+  {
+    allowFalseSignalPropagation: false,
+    blueprintLibraryOptions: () => [],
+    selectedElements: () => [],
+  }
+);
+
+const viewElementOptions = computed(() =>
+  props.allViewElements.map((el) => ({
+    id: el.id,
+    label: el.name?.trim() || el.chart?.title || el.materialType || el.id,
+  }))
+);
+</script>
+
+<template>
+  <div class="flex h-full flex-col overflow-hidden bg-white">
+    <PanelConfigSidebar
+      v-if="configFocus === 'view'"
+      :selected-element="selectedElement"
+      :selected-elements="selectedElements"
+      :layers="layers"
+      :update-element="updateElement"
+      :view-element-scope="viewElementScope"
+      :set-reference-copy-mode="setReferenceCopyMode"
+      :node-z-order-label="nodeZOrderLabel"
+      :on-exclude-selected-node="onExcludeSelectedNode"
+      :on-adjust-node-z-order="onAdjustNodeZOrder"
+    />
+
+    <BlueprintExecutionLogPanel
+      v-else-if="configFocus === 'blueprint-log' && executionLog"
+      :entries="executionLog.entries"
+      :settings="executionLog.settings"
+      :on-update-settings="executionLog.onUpdateSettings"
+      :on-save="() => { if (executionLog) void executionLog.onSave(); }"
+      :on-export="executionLog.onExport"
+      :on-clear="executionLog.onClear"
+      :on-clear-all-saved="executionLog.onClearAllSaved"
+      :has-saved-runs="executionLog.hasSavedRuns"
+      :on-apply-retention="() => { if (executionLog) void executionLog.onApplyRetention(); }"
+      :lifecycle-phase="executionLog.lifecyclePhase"
+    />
+
+    <div
+      v-else-if="!selectedBlueprintNode"
+      class="flex h-full flex-col overflow-hidden bg-background text-foreground"
+    >
+      <Empty class="py-10" description="在蓝图面板中选中一个节点后，这里会显示对应的配置。" />
+    </div>
+
+    <BlueprintNodeConfigSidebar
+      v-else
+      :node="selectedBlueprintNode"
+      :allow-false-signal-propagation="allowFalseSignalPropagation"
+      :on-update-allow-false-signal-propagation="onUpdateAllowFalseSignalPropagation"
+      :view-element-options="viewElementOptions"
+      :blueprint-library-options="blueprintLibraryOptions"
+      :on-update-node="onUpdateBlueprintNode"
+    />
+  </div>
+</template>

package/src/panel/components/WorkspaceProjectNav.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { Button, Dropdown, Menu, Modal, Tooltip } from "ant-design-vue";
+import { computed, h, ref } from "vue";
+import type { WorkspaceProjectListItem } from "../library/workspace-project-db";
+
+function formatUpdatedAt(ts: number): string {
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return String(ts);
+  }
+}
+
+const props = defineProps<{
+  projects: WorkspaceProjectListItem[];
+  activeProjectId: string | null;
+  activeProjectName: string | null;
+  dirty: boolean;
+}>();
+
+const emit = defineEmits<{
+  createProject: [];
+  openProject: [id: string];
+  syncProject: [];
+  deleteProject: [id: string];
+  previewProject: [id: string, options?: { syncFirst?: boolean }];
+}>();
+
+const pendingDeleteId = ref<string | null>(null);
+const busy = ref(false);
+
+const pendingDeleteProject = computed(
+  () => props.projects.find((p) => p.id === pendingDeleteId.value) ?? null
+);
+
+const deleteModalOpen = computed({
+  get: () => pendingDeleteId.value !== null,
+  set: (open: boolean) => {
+    if (!open) pendingDeleteId.value = null;
+  },
+});
+
+async function runAction(action: () => Promise<unknown> | unknown) {
+  if (busy.value) return;
+  busy.value = true;
+  try {
+    await action();
+  } finally {
+    busy.value = false;
+  }
+}
+
+function confirmDelete() {
+  const id = pendingDeleteId.value;
+  pendingDeleteId.value = null;
+  if (!id) return;
+  void runAction(() => emit("deleteProject", id));
+}
+
+const projectMenu = computed(() =>
+  h(
+    Menu,
+    {},
+    {
+      default: () =>
+        props.projects.length === 0
+          ? [h(Menu.Item, { key: "empty", disabled: true }, () => "暂无已保存工作区")]
+          : props.projects.map((project) =>
+              h(
+                "div",
+                { key: project.id, class: "px-1 py-0.5" },
+                h("div", { class: "flex items-center gap-1" }, [
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      class: [
+                        "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-accent",
+                        props.activeProjectId === project.id
+                          ? "bg-accent/60 font-medium"
+                          : "",
+                      ].join(" "),
+                      onClick: () =>
+                        void runAction(() => emit("openProject", project.id)),
+                    },
+                    [
+                      h("div", { class: "truncate" }, project.name),
+                      h(
+                        "div",
+                        { class: "truncate text-[10px] text-muted-foreground" },
+                        formatUpdatedAt(project.updatedAt)
+                      ),
+                    ]
+                  ),
+                  h(
+                    Button,
+                    {
+                      type: "text",
+                      size: "small",
+                      class: "h-7 shrink-0 px-2 text-[10px]",
+                      onClick: () =>
+                        void runAction(() =>
+                          emit("previewProject", project.id, {
+                            syncFirst: props.activeProjectId === project.id,
+                          })
+                        ),
+                    },
+                    () => "预览"
+                  ),
+                  h(
+                    Button,
+                    {
+                      type: "text",
+                      size: "small",
+                      danger: true,
+                      class: "h-7 shrink-0 px-2 text-[10px]",
+                      onClick: () => {
+                        pendingDeleteId.value = project.id;
+                      },
+                    },
+                    () => "删除"
+                  ),
+                ])
+              )
+            ),
+    }
+  )
+);
+</script>
+
+<template>
+  <div class="flex items-center gap-1.5 border-l border-border pl-2">
+    <Tooltip
+      title="以当前产物名称新建一条 IndexedDB 工作区记录，不会覆盖已有工作区"
+      :overlay-style="{ zIndex: 10100 }"
+      :mouse-enter-delay="0.15"
+    >
+      <Button
+        size="small"
+        class="h-7 px-2 text-xs"
+        :disabled="busy"
+        @click="runAction(() => emit('createProject'))"
+      >
+        创建工作区
+      </Button>
+    </Tooltip>
+
+    <Tooltip
+      v-if="activeProjectId"
+      :title="
+        dirty
+          ? `同步更新「${activeProjectName ?? '当前工作区'}」到 IndexedDB`
+          : '当前工作区已与 IndexedDB 同步'
+      "
+      :overlay-style="{ zIndex: 10100 }"
+      :mouse-enter-delay="0.15"
+    >
+      <Button
+        size="small"
+        class="h-7 px-2 text-xs"
+        :type="dirty ? 'primary' : 'default'"
+        :disabled="busy || !dirty"
+        @click="runAction(() => emit('syncProject'))"
+      >
+        同步{{ dirty ? " *" : "" }}
+      </Button>
+    </Tooltip>
+
+    <Dropdown :trigger="['click']" :disabled="busy" :overlay-style="{ zIndex: 10100 }">
+      <Button size="small" class="h-7 max-w-[200px] truncate px-2 text-xs">
+        {{ activeProjectName ? `工作区：${activeProjectName}` : "已保存工作区" }}
+      </Button>
+      <template #overlay>
+        <component :is="projectMenu" />
+      </template>
+    </Dropdown>
+  </div>
+
+  <Modal
+    v-model:open="deleteModalOpen"
+    title="删除工作区？"
+    ok-text="删除"
+    cancel-text="取消"
+    ok-type="danger"
+    :z-index="10150"
+    @ok="confirmDelete"
+  >
+    <p class="text-sm text-muted-foreground">
+      将永久删除 IndexedDB 中的「{{ pendingDeleteProject?.name ?? "" }}」，此操作不可恢复。
+    </p>
+  </Modal>
+</template>

package/src/panel/components/WorkspaceStageSplit.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "vue";
+import { Button, Select, Space, Tooltip } from "ant-design-vue";
+import {
+  BluePrintVueRoot,
+  type BlueprintGraph,
+  type BlueprintExecutionOverlay,
+} from "@arronqzy/vue-blueprint";
+
+export type BlueprintLibraryListItem = {
+  id: string;
+  name: string;
+  remark?: string;
+  source: "saved" | "imported";
+  updatedAt: number;
+};
+
+export type BlueprintVueRootProps = {
+  graph: BlueprintGraph;
+  selectedNodeId?: string | null;
+  executionOverlay?: BlueprintExecutionOverlay | null;
+  libraryNameById?: ReadonlyMap<string, string>;
+  onSelectNode?: (nodeId: string | null) => void;
+  onAbortClock?: (nodeId: string) => void;
+  style?: Record<string, string | number>;
+};
+
+export type BlueprintDebugToolbarProps = {
+  lifecyclePhase?: string;
+  lifecycleOptions?: { value: string; label: string }[];
+  onLifecyclePhaseChange?: (phase: string) => void;
+};
+
+const MIN_BLUEPRINT_HEIGHT = 48;
+const MIN_VIEW_RATIO = 0.1;
+const MIN_BLUEPRINT_RATIO = 0.15;
+
+const props = withDefaults(
+  defineProps<{
+    blueprintOpen: boolean;
+    blueprintProps: BlueprintVueRootProps;
+    blueprintLibraryItems?: BlueprintLibraryListItem[];
+    activeBlueprintLibraryId?: string | null;
+    currentBlueprintLabel?: string;
+    onSelectBlueprintLibraryItem?: (id: string) => void;
+    onRenameBlueprintLibraryItem?: (id: string, name: string) => void;
+    onDeleteBlueprintLibraryItem?: (id: string) => void;
+    onSaveBlueprint?: () => void;
+    onSyncBlueprint?: () => void;
+    canSyncBlueprint?: boolean;
+    blueprintDebug?: BlueprintDebugToolbarProps;
+  }>(),
+  {
+    blueprintLibraryItems: () => [],
+    activeBlueprintLibraryId: null,
+    canSyncBlueprint: false,
+  }
+);
+
+const emit = defineEmits<{
+  graphChange: [graph: BlueprintGraph];
+}>();
+
+const splitRef = ref<HTMLElement | null>(null);
+const blueprintWrapRef = ref<HTMLElement | null>(null);
+const layoutReady = ref(false);
+const viewRatio = ref(1);
+const dragging = ref(false);
+
+const libraryOptions = computed(() =>
+  props.blueprintLibraryItems.map((item) => ({
+    value: item.id,
+    label: item.name,
+  }))
+);
+
+let resizeObserver: ResizeObserver | null = null;
+
+function checkBlueprintLayout() {
+  const el = blueprintWrapRef.value;
+  if (!el) {
+    layoutReady.value = false;
+    return;
+  }
+  layoutReady.value = el.clientHeight >= MIN_BLUEPRINT_HEIGHT;
+}
+
+function applyBlueprintOpenState() {
+  if (props.blueprintOpen) {
+    viewRatio.value = 0.55;
+  } else {
+    viewRatio.value = 1;
+  }
+}
+
+function onPointerDownHandle(event: PointerEvent) {
+  if (!props.blueprintOpen) return;
+  dragging.value = true;
+  (event.target as HTMLElement).setPointerCapture(event.pointerId);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!dragging.value || !splitRef.value) return;
+  const rect = splitRef.value.getBoundingClientRect();
+  const next = (event.clientY - rect.top) / rect.height;
+  viewRatio.value = Math.min(1 - MIN_BLUEPRINT_RATIO, Math.max(MIN_VIEW_RATIO, next));
+}
+
+function onPointerUp(event: PointerEvent) {
+  if (!dragging.value) return;
+  dragging.value = false;
+  (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+}
+
+function onGraphChange(graph: BlueprintGraph) {
+  emit("graphChange", graph);
+}
+
+function onSelectNode(nodeId: string | null) {
+  props.blueprintProps.onSelectNode?.(nodeId);
+}
+
+function onAbortClock(nodeId: string) {
+  props.blueprintProps.onAbortClock?.(nodeId);
+}
+
+watch(
+  () => props.blueprintOpen,
+  () => {
+    applyBlueprintOpenState();
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  applyBlueprintOpenState();
+  const el = blueprintWrapRef.value;
+  if (el) {
+    resizeObserver = new ResizeObserver(checkBlueprintLayout);
+    resizeObserver.observe(el);
+    checkBlueprintLayout();
+  }
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(blueprintWrapRef, (el) => {
+  resizeObserver?.disconnect();
+  if (!el) return;
+  resizeObserver = new ResizeObserver(checkBlueprintLayout);
+  resizeObserver.observe(el);
+  checkBlueprintLayout();
+});
+</script>
+
+<template>
+  <div
+    ref="splitRef"
+    class="relative flex min-h-0 flex-1 flex-col"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+  >
+    <div
+      class="min-h-0 overflow-hidden"
+      :style="{ flex: `${viewRatio} 1 0%` }"
+    >
+      <slot />
+    </div>
+
+    <div
+      v-show="blueprintOpen"
+      class="group relative z-10 flex h-2 shrink-0 cursor-row-resize items-center justify-center border-y border-border bg-muted/30"
+      @pointerdown="onPointerDownHandle"
+    >
+      <div
+        class="h-1 w-10 rounded-full bg-border transition-colors group-hover:bg-primary/50"
+      />
+    </div>
+
+    <div
+      v-show="blueprintOpen"
+      class="flex min-h-0 flex-col overflow-hidden bg-background"
+      :style="{ flex: `${1 - viewRatio} 1 0%` }"
+    >
+      <div
+        class="flex shrink-0 flex-wrap items-center gap-2 border-b border-border bg-background/90 px-2 py-1"
+      >
+        <Space size="small" wrap>
+          <Select
+            size="small"
+            class="min-w-[140px]"
+            :value="activeBlueprintLibraryId ?? undefined"
+            :options="libraryOptions"
+            placeholder="蓝图库"
+            @change="(id) => id && onSelectBlueprintLibraryItem?.(String(id))"
+          />
+          <span
+            v-if="currentBlueprintLabel"
+            class="max-w-[160px] truncate text-[11px] text-muted-foreground"
+          >
+            {{ currentBlueprintLabel }}
+          </span>
+          <Tooltip title="保存蓝图到库">
+            <Button size="small" @click="onSaveBlueprint?.()">保存</Button>
+          </Tooltip>
+          <Tooltip :title="canSyncBlueprint ? '同步蓝图' : '无可同步变更'">
+            <Button
+              size="small"
+              type="primary"
+              :disabled="!canSyncBlueprint"
+              @click="onSyncBlueprint?.()"
+            >
+              同步
+            </Button>
+          </Tooltip>
+          <Select
+            v-if="blueprintDebug?.lifecycleOptions?.length"
+            size="small"
+            class="min-w-[120px]"
+            :value="blueprintDebug.lifecyclePhase"
+            :options="blueprintDebug.lifecycleOptions"
+            placeholder="生命周期"
+            @change="(v) => v && blueprintDebug?.onLifecyclePhaseChange?.(String(v))"
+          />
+        </Space>
+      </div>
+      <div
+        ref="blueprintWrapRef"
+        data-workspace-region="blueprint"
+        class="relative min-h-0 flex-1"
+      >
+        <BluePrintVueRoot
+          v-if="layoutReady"
+          v-bind="blueprintProps"
+          :style="{ width: '100%', height: '100%' }"
+          @graph-change="onGraphChange"
+          @select-node="onSelectNode"
+          @abort-clock="onAbortClock"
+        />
+        <div
+          v-else
+          class="flex h-full items-center justify-center text-[11px] text-muted-foreground"
+        >
+          {{ blueprintOpen ? "画布加载中…" : "" }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>