@arronqzy/vue-view 0.1.19 → 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.19",
+  "version": "0.1.21",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/i18n": "0.1.13",
-    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/blueprint-dsl": "1.0.16",
     "@arronqzy/view-scene3d": "0.1.5",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/rx-store": "1.0.8",
-    "@arronqzy/vue-blueprint": "0.1.14",
-    "@arronqzy/vue-rx-store": "0.1.6"
+    "@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": {
     "vue": "^3.4.0"
@@ -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";
@@ -83,10 +86,26 @@ const props = withDefaults(
     initialZoom?: number;
     nameSpace?: string | null;
     initialWorkspace?: WorkspaceProjectRecord | null;
+    /** 顶栏「设置 → 关于」展示的 npm 包名 */
+    packageName?: string | null;
+    /** 顶栏「设置 → 关于」展示的包版本号 */
+    packageVersion?: string | null;
   }>(),
-  { initialZoom: 1, nameSpace: null, initialWorkspace: null }
+  {
+    initialZoom: 1,
+    nameSpace: null,
+    initialWorkspace: null,
+    packageName: null,
+    packageVersion: null,
+  }
 );
 
+const packageVersionText = computed(() => {
+  const version = (props.packageVersion ?? "").trim();
+  if (!version) return t("panel.menubar.versionUnavailable");
+  return t("panel.menubar.versionValue", { version });
+});
+
 const {
   elements,
   allElements,
@@ -142,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);
@@ -375,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();
 });
@@ -588,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 () => {
@@ -741,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>
@@ -756,7 +832,29 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         @delete-project="handleWorkspaceDeleteProject"
         @preview-project="openOnlinePreviewForProject"
       />
-            <Dropdown :trigger="['click']">
+      <Dropdown :trigger="['click']">
+        <Button type="text" class="!text-white">{{ t("panel.menubar.settings") }}</Button>
+        <template #overlay>
+          <Menu>
+            <Menu.ItemGroup :title="t('panel.theme.language')">
+              <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'zh-CN' }" @click="setLocale('zh-CN')">{{ t("panel.theme.zhCN") }}</Menu.Item>
+              <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'en-US' }" @click="setLocale('en-US')">{{ t("panel.theme.enUS") }}</Menu.Item>
+            </Menu.ItemGroup>
+            <Menu.Divider />
+            <Menu.SubMenu :title="t('panel.menubar.about')" key="about">
+              <Menu.Item
+                key="version"
+                disabled
+                class="!cursor-default !opacity-100"
+                :data-abuilder-version="props.packageVersion || undefined"
+              >
+                {{ packageVersionText }}
+              </Menu.Item>
+            </Menu.SubMenu>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
         <Button type="text" class="!text-white">{{ t("panel.theme.language") }}</Button>
         <template #overlay>
           <Menu>
@@ -983,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/PanelConfigSidebar.vue

@@ -62,8 +62,10 @@ const isSearchCollapsed = ref(false);
 const sidebarScrollRef = ref<HTMLElement | null>(null);
 const configScrollPosById = new Map<string, number>();
 const activeConfigScrollKey = ref<string | null>(null);
+const expandedSectionsById = new Map<string, Record<string, boolean>>();
+const activeExpandedKey = ref<string | null>(null);
 
-const expandedSections = ref<Record<string, boolean>>({
+const DEFAULT_EXPANDED_SECTIONS: Record<string, boolean> = {
   nodeInfo: true,
   styleBackground: false,
   styleBorder: false,
@@ -78,6 +80,10 @@ const expandedSections = ref<Record<string, boolean>>({
   reference: true,
   imageConfig: true,
   tableConfig: true,
+};
+
+const expandedSections = ref<Record<string, boolean>>({
+  ...DEFAULT_EXPANDED_SECTIONS,
 });
 
 const normalizedSearch = computed(() => configSearch.value.trim().toLowerCase());
@@ -118,12 +124,39 @@ watch(
     }
     activeConfigScrollKey.value = nextKey;
     void nextTick(() => restoreConfigScroll(nextKey));
+
+    if (prevKey && prevKey !== nextKey) {
+      expandedSectionsById.set(prevKey, { ...expandedSections.value });
+    }
+    activeExpandedKey.value = nextKey;
+    if (!nextKey) {
+      expandedSections.value = { ...DEFAULT_EXPANDED_SECTIONS };
+      return;
+    }
+    const saved = expandedSectionsById.get(nextKey);
+    if (saved) {
+      expandedSections.value = { ...saved };
+      return;
+    }
+    const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+    expandedSectionsById.set(nextKey, initial);
+    expandedSections.value = initial;
   },
   { flush: "post" }
 );
 
 onMounted(() => {
   activeConfigScrollKey.value = configScrollKey.value;
+  activeExpandedKey.value = configScrollKey.value;
+  if (configScrollKey.value) {
+    const saved = expandedSectionsById.get(configScrollKey.value);
+    if (saved) expandedSections.value = { ...saved };
+    else {
+      const initial = { ...DEFAULT_EXPANDED_SECTIONS };
+      expandedSectionsById.set(configScrollKey.value, initial);
+      expandedSections.value = initial;
+    }
+  }
   const el = sidebarScrollRef.value;
   el?.addEventListener("scroll", onConfigSidebarScroll, { passive: true });
   restoreConfigScroll(configScrollKey.value);
@@ -171,13 +204,23 @@ const materialType = computed(() => props.selectedElement?.materialType ?? "");
 
 const forceOpenSections = computed(() => hasSearch.value);
 provide("configHasSearch", hasSearch);
+provide("configExpandState", {
+  isExpanded: (key: string, defaultValue = true) =>
+    expandedSections.value[key] ?? defaultValue,
+  setExpanded: (key: string, next: boolean) => {
+    setSectionExpanded(key, next);
+  },
+});
 
 function isSectionExpanded(key: string, defaultValue = true) {
   return expandedSections.value[key] ?? defaultValue;
 }
 
 function setSectionExpanded(key: string, next: boolean) {
-  expandedSections.value = { ...expandedSections.value, [key]: next };
+  const updated = { ...expandedSections.value, [key]: next };
+  expandedSections.value = updated;
+  const id = activeExpandedKey.value;
+  if (id) expandedSectionsById.set(id, updated);
 }
 
 function shouldShowSection(key: string, title: string, searchTerms: string[] = []) {
@@ -223,15 +266,6 @@ onMounted(() => {
 watch(isSearchCollapsed, (next) => {
   window.localStorage.setItem(SEARCH_COLLAPSE_STORAGE_KEY, next ? "1" : "0");
 });
-
-watch(
-  () => [props.selectedElement?.id, props.selectedElement?.materialType],
-  () => {
-    if (isChartElement.value) {
-      setSectionExpanded("chartBasic", true);
-    }
-  }
-);
 </script>
 
 <template>

package/src/panel/components/config/ConfigFieldGroup.vue

@@ -2,12 +2,19 @@
 import { computed, inject, ref, type ComputedRef } from "vue";
 import ConfigHintIcon from "../ConfigHintIcon.vue";
 
+export type ConfigExpandState = {
+  isExpanded: (key: string, defaultValue?: boolean) => boolean;
+  setExpanded: (key: string, next: boolean) => void;
+};
+
 const props = withDefaults(
   defineProps<{
     title: string;
     hint?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
+    /** Stable key for remembering expand state per view node */
+    groupKey?: string;
   }>(),
   { defaultOpen: true, collapsible: false }
 );
@@ -16,13 +23,30 @@ const hasSearch = inject<ComputedRef<boolean>>(
   "configHasSearch",
   computed(() => false)
 );
+const expandState = inject<ConfigExpandState | null>("configExpandState", null);
+
+const localOpen = ref(props.defaultOpen);
+const storageKey = computed(
+  () => props.groupKey?.trim() || `fg:${props.title}`
+);
 
-const open = ref(props.defaultOpen);
-const isOpen = computed(() => !props.collapsible || hasSearch.value || open.value);
+const isOpen = computed(() => {
+  if (!props.collapsible) return true;
+  if (hasSearch.value) return true;
+  if (expandState) {
+    return expandState.isExpanded(storageKey.value, props.defaultOpen);
+  }
+  return localOpen.value;
+});
 
 function toggle() {
   if (!props.collapsible || hasSearch.value) return;
-  open.value = !open.value;
+  const next = !isOpen.value;
+  if (expandState) {
+    expandState.setExpanded(storageKey.value, next);
+    return;
+  }
+  localOpen.value = next;
 }
 </script>
 

package/src/panel/components/config/PanelConfigAudioSection.vue

@@ -186,6 +186,7 @@ function onPosterFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupDisplayStyle')"
+      group-key="audioDisplayStyle"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigChartSection.vue

@@ -238,6 +238,7 @@ function onOptionJsonChange(v: string) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupChartDisplayMore')"
+      group-key="chartDisplayMore"
       collapsible
       :default-open="false"
     >
@@ -308,6 +309,7 @@ function onOptionJsonChange(v: string) {
 
     <ConfigFieldGroup
       :title="t('panel.config.groupTooltip')"
+      group-key="chartTooltip"
       collapsible
       :default-open="false"
     >
@@ -369,6 +371,7 @@ function onOptionJsonChange(v: string) {
     <ConfigFieldGroup
       v-if="['bar', 'line', 'area', 'scatter'].includes(selectedChartType)"
       :title="t('panel.config.groupAxes')"
+      group-key="chartAxes"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigGeometrySection.vue

@@ -140,6 +140,7 @@ function clearSketch() {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCanvasScript')"
+      group-key="geometryCanvasScript"
       collapsible
       :default-open="false"
     >
@@ -158,6 +159,7 @@ function clearSketch() {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupSketchOverlay')"
+      group-key="geometrySketch"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigImageSection.vue

@@ -100,6 +100,7 @@ function onFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupDisplayMode')"
+      group-key="imageDisplayMode"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigNodeInfo.vue

@@ -101,6 +101,7 @@ function patch(patch: Partial<PanelElement>) {
     </div>
     <ConfigFieldGroup
       :title="t('panel.config.groupNodeMore')"
+      group-key="nodeMore"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigReferenceSection.vue

@@ -59,6 +59,7 @@ function patch(patch: Partial<PanelElement>) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCopyStrategy')"
+      group-key="referenceCopyStrategy"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigStyleSections.vue

@@ -84,6 +84,7 @@ function onFileChange(e: Event) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupBgLayout')"
+      group-key="styleBgLayout"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigTextSection.vue

@@ -215,6 +215,7 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupInputAbility')"
+      group-key="textInputAbility"
       collapsible
       :default-open="false"
     >

package/src/panel/components/config/PanelConfigViewportSection.vue

@@ -74,6 +74,7 @@ function patch(next: Partial<PanelElement>) {
     </ConfigFieldGroup>
     <ConfigFieldGroup
       :title="t('panel.config.groupCopyStrategy')"
+      group-key="viewportCopyStrategy"
       collapsible
       :default-open="false"
     >

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);
   }