@arronqzy/vue-view 0.1.20 → 0.1.21

package/README.md

@@ -1,16 +1,22 @@
 # @arronqzy/vue-view
 
-Vue 3 版 Abuilder **视图编辑器**，使用 **Ant Design Vue** 作为 UI 组件库，功能与 `@arronqzy/react-view` 对齐。
+Vue 3 视图编辑器，功能对齐 `@arronqzy/react-view`，组件用 Ant Design Vue。大多数 Vue 宿主应直接用 [`@arronqzy/abuilder-vue`](../abuilder-vue/README.md)。
 
-## 功能
+![物料、画布、配置和图层](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/09-table-full.png)
 
-- **画布**：无限平移/缩放（Infinite Viewer）、Moveable 拖拽/缩放/旋转、Selecto 框选
-- **物料**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点
-- **图层**：多图层、映射图层、主图层、锁定与合并
-- **配置侧栏**：按物料类型的完整属性编辑、Scope 模版与预览
-- **工作区**：IndexedDB 多项目、导入导出、跨标签页同步
-- **蓝图集成**：分屏蓝图编辑器、调试 Scope 绑定
-- **在线预览**：`VueViewOnlinePreview` 独立预览页
+## 能力
+
+- 无限平移 / 缩放（Infinite Viewer）、Moveable、Selecto 框选
+- 图表、文本、表格、图片、音视频、几何、网格、三维、引用节点
+- 多图层、映射图层、主图层、锁定与合并
+- 按物料类型的配置侧栏，支持 Scope 模版
+- IndexedDB 多项目、导入导出、跨标签同步
+- 分屏蓝图（`@arronqzy/vue-blueprint`）和调试时的 Scope 回写
+- `VueViewOnlinePreview` 只读预览
+
+打开蓝图后的分屏和 React 版一样：上面视图，下面节点：
+
+![分屏蓝图](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/40-blueprint-open.png)
 
 ## 使用
 
@@ -29,7 +35,7 @@ createApp(VueViewPanel).use(Antd).mount("#app");
 import { VueViewOnlinePreview, parseOnlinePreviewSearchParams } from "@arronqzy/vue-view";
 ```
 
-URL 参数：`?preview=online&projectId=<id>&pid=<instanceId>`。也可传入 `workspace` 直接预览宿主数据（优先于 `projectId`）。
+URL：`?preview=online&projectId=<id>&pid=<instanceId>`。传入 `workspace` 时优先于 `projectId`。
 
 ### 宿主集成
 
@@ -43,21 +49,19 @@ import {
 } from "@arronqzy/vue-view";
 ```
 
-创建 / 同步工作区会发出 `workspace:add` / `workspace:sync`。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`。IndexedDB CRUD 与 `getPreviewSnapshot` **不导出**（后者仅 React 实现）。
+创建 / 同步发出 `workspace:add` / `workspace:sync`。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`。
 
-## 依赖
+IndexedDB CRUD 与 `getPreviewSnapshot` **不导出**。缩略图只在 React 包实现。
+
+## 和 React 版的差别
 
-- `@arronqzy/rx-store` — 画布状态
-- `@arronqzy/vue-rx-store` — Vue composables
-- `@arronqzy/vue-blueprint` — 蓝图编辑器
-- `@arronqzy/blueprint-dsl` — 蓝图 DSL
-- `ant-design-vue`、`echarts`、`moveable`、`selecto`、`infinite-viewer`
+- UI 是 Ant Design Vue
+- 标尺是 canvas 实现（可换成 `@scena/ruler`）
+- 画布状态仍是共享的 `@arronqzy/rx-store`
 
-## 与 React 版差异
+## 依赖
 
-- UI 使用 **Ant Design Vue**，非 shadcn/Radix
-- 标尺使用 canvas 兼容实现（可替换为 `@scena/ruler`）
-- 共享 `@arronqzy/rx-store` 与 `panel/utils` 数据逻辑
+`@arronqzy/rx-store`、`@arronqzy/vue-rx-store`、`@arronqzy/vue-blueprint`、`@arronqzy/blueprint-dsl`、`ant-design-vue`、`echarts`、`moveable`、`selecto`、`infinite-viewer`。
 
 ## 许可证
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,12 +23,12 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.15",
-    "@arronqzy/i18n": "0.1.14",
-    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/blueprint-dsl": "1.0.16",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/vue-blueprint": "0.1.14",
+    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/i18n": "0.1.16",
     "@arronqzy/vue-rx-store": "0.1.6",
+    "@arronqzy/vue-blueprint": "0.1.16",
     "@arronqzy/rx-store": "1.0.8"
   },
   "peerDependencies": {
@@ -39,8 +39,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -22,6 +22,8 @@ export type {
   AbuilderEventPayloadMap,
   WorkspaceAddEventPayload,
   WorkspaceSyncEventPayload,
+  ApiCollectionUploadStartEventPayload,
+  ApiCollectionUploadSuccessEventPayload,
   WorkspaceData,
 } from "./panel/library/event-subscription";
 export type {

package/src/panel/VueViewPanel.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 import type { State } from "@arronqzy/rx-store";
 import {
+  ApiCollectionManagerDialog,
   BlueprintGraph,
   abortClockNode,
   blueprintDocumentsEqual,
@@ -12,6 +13,7 @@ import {
   documentToRunnableGraph,
   downloadBlueprintExport,
   getBlueprintLibraryRecord,
+  hydrateApiCollections,
   libraryRecordFromImport,
   listBlueprintLibrary,
   parseBlueprintImportFile,
@@ -27,7 +29,7 @@ import {
   resolveRunnableNodeType,
   resolveViewElementIds,
 } from "@arronqzy/vue-blueprint";
-import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE, type LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
+import { collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE, buildApiCollectionSyncPatches, toApiCollectionSyncResult, type LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
 import {
   Button,
   Checkbox,
@@ -49,6 +51,7 @@ import {
   useWorkspaceProjects,
 } from "./hooks/useWorkspaceProjects";
 import type { WorkspaceProjectRecord } from "./library/workspace-project-db";
+import { AbuilderEvents, emitAbuilderEvent } from "./library/event-subscription";
 import { type ViewportZoom } from "./viewportZoom";
 import PanelCanvas from "./components/PanelCanvas.vue";
 import ElementsLayer from "./components/ElementsLayer.vue";
@@ -158,6 +161,7 @@ const leftWidth = ref(240);
 const rightWidth = ref(300);
 const importInputRef = ref<HTMLInputElement | null>(null);
 const blueprintImportInputRef = ref<HTMLInputElement | null>(null);
+const apiCollectionManagerOpen = ref(false);
 
 const viewportEl = ref<HTMLDivElement | null>(null);
 const canvasEl = ref<HTMLDivElement | null>(null);
@@ -391,6 +395,16 @@ async function refreshBlueprintLibrary() {
   blueprintLibraryItems.value = await listBlueprintLibrary(props.nameSpace);
 }
 
+watch(
+  () => props.nameSpace,
+  (nameSpace) => {
+    void hydrateApiCollections(nameSpace).catch((error) => {
+      console.error("[abuilder] hydrate api collections failed", error);
+    });
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
   void refreshBlueprintLibrary();
 });
@@ -604,6 +618,50 @@ function openBlueprintExport() {
   });
 }
 
+function handleApiCollectionUploadStart(info: {
+  fileNames: string[];
+  count: number;
+}) {
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+}
+
+function handleApiCollectionUploadSuccess(info: {
+  collections: Array<{
+    id: string;
+    name: string;
+    apiCount: number;
+    persistLocal: boolean;
+  }>;
+}) {
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+}
+
+function handleApiCollectionSync(record: {
+  id: string;
+  document: import("@arronqzy/blueprint-dsl").ApiCollectionDocument;
+}) {
+  const patches = buildApiCollectionSyncPatches({
+    collectionId: record.id,
+    document: record.document,
+    nodes: blueprintGraph.value.document.nodes
+      .filter((node) => node.role === "fetch" || Boolean(node.fetchConfig))
+      .map((node) => ({
+        id: node.id,
+        label: node.label,
+        fetchConfig: node.fetchConfig,
+      })),
+  });
+  if (patches.length === 0) return toApiCollectionSyncResult([]);
+  let next = blueprintGraph.value;
+  for (const patch of patches) {
+    next = next.updateNode(patch.nodeId, {
+      fetchConfig: patch.fetchConfigPatch as import("@arronqzy/blueprint-dsl").FetchRequestConfig,
+    });
+  }
+  blueprintGraph.value = next;
+  return toApiCollectionSyncResult(patches);
+}
+
 async function handleBlueprintImportFile(file: File) {
   try {
     await runBusyTask(t("common.importingBlueprint"), async () => {
@@ -757,6 +815,8 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
           <Menu>
             <Menu.Item @click="openBlueprintExport">{{ t("panel.menubar.exportBlueprint") }}</Menu.Item>
             <Menu.Item @click="blueprintImportInputRef?.click()">{{ t("panel.menubar.importBlueprint") }}</Menu.Item>
+            <Menu.Divider />
+            <Menu.Item @click="apiCollectionManagerOpen = true">{{ t("panel.menubar.apiCollections") }}</Menu.Item>
           </Menu>
         </template>
       </Dropdown>
@@ -1021,6 +1081,14 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
       <Input v-model:value="mergeLayerName" :placeholder="t('panel.layers.mergedNamePlaceholderOptional')" />
       <div class="mt-2 text-xs text-gray-500">{{ t("panel.layers.mergeSelectedCount", { count: mergeSelectedCount }) }}</div>
     </Modal>
+
+    <ApiCollectionManagerDialog
+      :open="apiCollectionManagerOpen"
+      :on-open-change="(open) => (apiCollectionManagerOpen = open)"
+      :on-upload-start="handleApiCollectionUploadStart"
+      :on-upload-success="handleApiCollectionUploadSuccess"
+      :on-sync-collection="handleApiCollectionSync"
+    />
   </Layout>
 </template>
 

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

@@ -69,17 +69,13 @@ function closeDropdown() {
 }
 
 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);
+  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope ?? {});
   if (!parsed) {
     closeDropdown();
     return;
   }
-  const suggestions = getScopeAutocompleteSuggestions(props.scope, parsed);
+  const suggestions = getScopeAutocompleteSuggestions(props.scope ?? {}, parsed);
   if (suggestions.length === 0) {
     closeDropdown();
     return;
@@ -173,7 +169,7 @@ function onPointerDown(event: MouseEvent) {
 watch(
   () => toValue(props.containerRef),
   (container, _prev, onCleanup) => {
-    if (!container || props.scope === undefined) return;
+    if (!container) return;
 
     container.addEventListener("focusin", onFocusIn);
     container.addEventListener("input", onInput, true);
@@ -197,13 +193,14 @@ watch(
 watch(
   () => props.scope,
   () => {
-    if (props.scope === undefined) closeDropdown();
+    const current = dropdown.value;
+    if (current) refreshForInput(current.input);
   }
 );
 </script>
 
 <template>
-  <Teleport v-if="dropdown && scope !== undefined" to="body">
+  <Teleport v-if="dropdown" 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"

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

@@ -7,5 +7,6 @@ const { t } = useI18n();
   <div class="space-y-2">
     <p>{{ t("panel.scope.usageHint1") }}</p>
     <p>{{ t("panel.scope.usageHint2") }}</p>
+    <p>{{ t("panel.scope.usageHintSystem") }}</p>
   </div>
 </template>

package/src/panel/library/event-subscription.ts

@@ -5,6 +5,10 @@ export const AbuilderEvents = {
   workspaceAdd: "workspace:add",
   /** 同步工作区 */
   workspaceSync: "workspace:sync",
+  /** 开始上传接口集合 */
+  apiCollectionUploadStart: "api-collection:upload-start",
+  /** 上传接口集合成功 */
+  apiCollectionUploadSuccess: "api-collection:upload-success",
 } as const;
 
 export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEvents];
@@ -15,9 +19,25 @@ export type WorkspaceData = WorkspaceProjectRecord;
 export type WorkspaceAddEventPayload = WorkspaceData;
 export type WorkspaceSyncEventPayload = WorkspaceData;
 
+export type ApiCollectionUploadStartEventPayload = {
+  fileNames: string[];
+  count: number;
+};
+
+export type ApiCollectionUploadSuccessEventPayload = {
+  collections: Array<{
+    id: string;
+    name: string;
+    apiCount: number;
+    persistLocal: boolean;
+  }>;
+};
+
 export type AbuilderEventPayloadMap = {
   [AbuilderEvents.workspaceAdd]: WorkspaceAddEventPayload;
   [AbuilderEvents.workspaceSync]: WorkspaceSyncEventPayload;
+  [AbuilderEvents.apiCollectionUploadStart]: ApiCollectionUploadStartEventPayload;
+  [AbuilderEvents.apiCollectionUploadSuccess]: ApiCollectionUploadSuccessEventPayload;
 };
 
 type EventCallback = (payload: unknown) => void;

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

@@ -1,6 +1,10 @@
 import type { PanelElement } from "../types";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import { isUsableTableRawData } from "@arronqzy/view-table";
+import {
+  createSystemRoot,
+  isDayjsValue,
+} from "@arronqzy/blueprint-dsl";
 import { materializeChartLabelsFromScope, materializeChartValuesFromScope } from "./scope-template-chart";
 import {
   SCOPE_SPREAD_TEMPLATE_RE,
@@ -11,12 +15,12 @@ import {
   resolveSpreadScopePath,
 } from "./scope-template-spread";
 
-const SCOPE_TOKEN_RE = /\{(scope[^}]*)\}/g;
+const TEMPLATE_TOKEN_RE = /\{((?:scope|system)[^}]*)\}/g;
 
 export function hasScopeTemplate(value: string): boolean {
-  SCOPE_TOKEN_RE.lastIndex = 0;
+  TEMPLATE_TOKEN_RE.lastIndex = 0;
   SCOPE_SPREAD_TEMPLATE_RE.lastIndex = 0;
-  return SCOPE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
+  return TEMPLATE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
 }
 
 export function evaluateScopeExpression(
@@ -26,8 +30,13 @@ export function evaluateScopeExpression(
   const trimmed = expression.trim();
   if (!trimmed) return undefined;
   try {
-    const fn = new Function("scope", `"use strict"; return (${trimmed});`);
-    return fn(scope);
+    const system = createSystemRoot();
+    const fn = new Function(
+      "scope",
+      "system",
+      `"use strict"; return (${trimmed});`
+    );
+    return fn(scope, system);
   } catch {
     return undefined;
   }
@@ -39,6 +48,9 @@ function stringifyScopeValue(value: unknown): string {
   if (typeof value === "number" || typeof value === "boolean") {
     return String(value);
   }
+  if (isDayjsValue(value)) {
+    return value.toISOString();
+  }
   try {
     return JSON.stringify(value);
   } catch {
@@ -60,8 +72,8 @@ export function evaluateScopeTemplate(
     }
   );
 
-  // Only `{scope...}` tokens — keep ECharts / CSS braces like `{b}` intact.
-  return withSpread.replace(SCOPE_TOKEN_RE, (_: string, rawExpr: string) =>
+  // Only `{scope...}` / `{system...}` — keep ECharts / CSS braces like `{b}` intact.
+  return withSpread.replace(TEMPLATE_TOKEN_RE, (_: string, rawExpr: string) =>
     stringifyScopeValue(evaluateScopeExpression(rawExpr, scope))
   );
 }
@@ -91,7 +103,7 @@ function materializeTemplateValue(template: string, scope: unknown): unknown {
     );
   }
 
-  const singleMatch = /^\{(scope[^}]*)\}$/.exec(trimmed);
+  const singleMatch = /^\{((?:scope|system)[^}]*)\}$/.exec(trimmed);
   if (singleMatch) {
     return evaluateScopeExpression(singleMatch[1]!, scope);
   }