@arronqzy/vue-view 0.1.20 → 0.1.22

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.22",
   "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/blueprint-dsl": "1.0.15",
-    "@arronqzy/i18n": "0.1.14",
+    "@arronqzy/blueprint-dsl": "1.0.17",
+    "@arronqzy/i18n": "0.1.17",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/vue-blueprint": "0.1.14",
+    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/vue-blueprint": "0.1.17",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/rx-store": "1.0.8"
+    "@arronqzy/view-scene3d": "0.1.5"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

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/VueViewOnlinePreview.vue

@@ -2,6 +2,7 @@
 import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
+  useBlueprintDslLocaleSync,
   BlueprintGraph,
   documentToRunnableGraph,
   getBlueprintLibraryRecord,
@@ -22,6 +23,7 @@ import {
   useViewScopeStoreVersion,
 } from "./scope/view-scope-store";
 import { resolvePanelElementScope } from "./utils/scope-template";
+import { localizePanelElement } from "./utils/panelElementDefaults";
 import {
   getWorkspaceProject,
   type WorkspaceProjectRecord,
@@ -40,6 +42,7 @@ import {
 import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const { t, locale } = useI18n();
+useBlueprintDslLocaleSync();
 
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
@@ -194,7 +197,9 @@ const scopedLayerElements = computed(() => {
 const sceneBounds = computed(() => computePanelSceneBounds(scopedLayerElements.value));
 
 const displayElements = computed(() =>
-  scopedLayerElements.value.map((el) => {
+  scopedLayerElements.value.map((source) => {
+    void locale.value;
+    const el = localizePanelElement(source, t);
     const x = el.x - sceneBounds.value.minX;
     const y = el.y - sceneBounds.value.minY;
     if (outputScale.value) return { ...el, x, y };

package/src/panel/VueViewPanel.vue

@@ -2,6 +2,8 @@
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 import type { State } from "@arronqzy/rx-store";
 import {
+  useBlueprintDslLocaleSync,
+  ApiCollectionManagerDialog,
   BlueprintGraph,
   abortClockNode,
   blueprintDocumentsEqual,
@@ -12,6 +14,7 @@ import {
   documentToRunnableGraph,
   downloadBlueprintExport,
   getBlueprintLibraryRecord,
+  hydrateApiCollections,
   libraryRecordFromImport,
   listBlueprintLibrary,
   parseBlueprintImportFile,
@@ -27,7 +30,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 +52,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";
@@ -69,12 +73,14 @@ import {
 import { resolvePanelElementScope } from "./utils/scope-template";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import { useI18n } from "@arronqzy/i18n/vue";
+import { relocalizeMessage } from "@arronqzy/i18n";
 import { getPanelMessages } from "./constants/messages";
 import BusyOverlay from "./components/BusyOverlay.vue";
 import { assertFileSize, parseJsonText, runBusyTask } from "./utils/async-work";
 import "../tailwind.css";
 
 const { t, locale, setLocale } = useI18n();
+useBlueprintDslLocaleSync();
 const panelMessages = () => getPanelMessages(t);
 
 const props = withDefaults(
@@ -149,6 +155,18 @@ const workspaceBlueprintRef = shallowRef<{
 } | null>(null);
 const configFocus = ref<WorkspaceConfigFocus>("view");
 const productName = ref(t("panel.defaults.unnamedProduct"));
+const displayProductName = computed(() => {
+  void locale.value;
+  return relocalizeMessage(productName.value, "panel.defaults.unnamedProduct", t);
+});
+const displayBlueprintName = computed(() => {
+  void locale.value;
+  return relocalizeMessage(
+    blueprintMeta.value.name,
+    ["panel.defaults.unnamedBlueprint", "blueprint.dialog.unnamedBlueprint"],
+    t
+  );
+});
 const titleIconDataUrl = ref("");
 const editingLayerId = ref<string | null>(null);
 const editingLayerName = ref("");
@@ -158,6 +176,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);
@@ -342,7 +361,7 @@ function handleViewScopeUpdate(viewElementIds: string[], scope: unknown) {
 const blueprintDebugSession = useBlueprintDebugSession({
   graph: blueprintGraph,
   blueprintId: activeBlueprintLibraryId,
-  blueprintName: computed(() => { void locale.value; return blueprintMeta.value.name || t("panel.defaults.unnamedBlueprint"); }),
+  blueprintName: computed(() => displayBlueprintName.value || t("panel.defaults.unnamedBlueprint")),
   resolveLibraryBlueprint,
   libraryNameById: blueprintLibraryNameById,
   onExecutionBlocked: handleBlueprintExecutionBlocked,
@@ -391,6 +410,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 +633,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 +830,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>
@@ -832,8 +907,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         <div class="flex h-full min-h-0 flex-col">
           <div class="flex flex-wrap items-center gap-2 border-b bg-white px-3 py-2">
             <Input
-              v-model:value="productName"
+              :value="displayProductName"
               size="small"
+              @update:value="(value: string) => (productName = value)"
               class="w-[200px]"
               :placeholder="t('panel.menubar.productName')"
             />
@@ -859,7 +935,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             :blueprint-props="blueprintCanvasProps"
             :blueprint-library-items="blueprintLibraryItems"
             :active-blueprint-library-id="activeBlueprintLibraryId"
-            :current-blueprint-label="blueprintMeta.name"
+            :current-blueprint-label="displayBlueprintName"
             :can-sync-blueprint="blueprintLibraryDirty"
             :blueprint-debug="blueprintDebugToolbar"
             :on-select-blueprint-library-item="(id) => void handleSelectBlueprintLibraryItem(id)"
@@ -1021,6 +1097,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/ConfigHintIcon.vue

@@ -26,11 +26,24 @@ const resolvedLabel = computed(() => props.label || t("common.hint"));
       type="button"
       :class="
         buttonClass ??
-        'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border text-[10px] leading-none text-muted-foreground hover:bg-accent/50'
+        'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
       "
       :aria-label="t('common.hintAria', { label: resolvedLabel })"
     >
-      ?
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-3.5 w-3.5"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <path d="M12 17h.01" />
+      </svg>
     </button>
   </Tooltip>
 </template>

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

@@ -141,7 +141,12 @@ function onPosterFileChange(e: Event) {
   >
     <ConfigFieldGroup :title="t('panel.config.groupAudioSource')">
       <label class="block space-y-1" data-config-field="audioRemoteUrl">
-        <div>{{ t("panel.config.audioUrl") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.audioUrl") }}
+          <ConfigHintIcon :label="t('panel.config.audioUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -152,9 +157,7 @@ function onPosterFileChange(e: Event) {
             audioRemoteUrl: v || undefined,
             audioSrc: v || element.audioSrc,
           })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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

@@ -146,27 +146,33 @@ function onOptionJsonChange(v: string) {
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupData')">
       <label class="block space-y-1" data-config-field="chart.labelsText">
-        <div>{{ t("panel.config.labelsCsv") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.labelsCsv") }}
+          <ConfigHintIcon :label="t('panel.config.labelsCsv')">
+            {{ t("panel.config.scopeTemplateHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           :value="getChartLabelsDisplayText(element.chart)"
           :disabled="!isEditable"
           :placeholder="t('panel.config.labelsCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ labelsText: v })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
       <label class="block space-y-1" data-config-field="chart.valuesText">
-        <div>{{ t("panel.config.valuesCsv") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.valuesCsv") }}
+          <ConfigHintIcon :label="t('panel.config.valuesCsv')">
+            {{ t("panel.config.scopeTemplateHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           :value="getChartValuesDisplayText(element.chart)"
           :disabled="!isEditable"
           :placeholder="t('panel.config.valuesCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ valuesText: v })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
     </ConfigFieldGroup>
 
     <ConfigFieldGroup

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

@@ -74,7 +74,8 @@ function onFileChange(e: Event) {
         <div class="flex items-center gap-1">
           <span>{{ t("panel.config.imageUrlCss") }}</span>
           <ConfigHintIcon :label="t('panel.config.imageUrlHintLabel')">
-            {{ t("panel.config.imageUrlHint") }}
+            <p>{{ t("panel.config.imageUrlHint") }}</p>
+            <p class="mt-1">{{ t("panel.config.urlScopeHint") }}</p>
           </ConfigHintIcon>
         </div>
         <Input
@@ -85,7 +86,6 @@ function onFileChange(e: Event) {
           :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
         />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

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

@@ -10,6 +10,7 @@ import {
   type ViewportOverflowMode,
 } from "../../utils/viewportPlacement";
 import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const props = defineProps<{
@@ -434,7 +435,12 @@ function setNodeCardExpanded(id: string, open: boolean) {
 
             <template v-if="el.materialType === 'image'">
               <label class="block space-y-1" data-config-field="style.backgroundImageRemoteUrl">
-                <div>{{ t("panel.config.backgroundImageUrl") }}</div>
+                <div class="flex items-center gap-1">
+                  {{ t("panel.config.backgroundImageUrl") }}
+                  <ConfigHintIcon :label="t('panel.config.backgroundImageUrl')">
+                    {{ t("panel.config.urlScopeHint") }}
+                  </ConfigHintIcon>
+                </div>
                 <Input
                   size="small"
                   class="font-mono text-[11px]"
@@ -447,7 +453,6 @@ function setNodeCardExpanded(id: string, open: boolean) {
                     },
                   })"
                 />
-                <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
               </label>
               <label class="block space-y-1">
                 <div>{{ t("panel.config.objectFit") }}</div>

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

@@ -344,6 +344,7 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
     @update:open="emit('update:open', $event)"
   >
     <ConfigFieldGroup :title="t('panel.config.groupScene3dPurpose')">
+      <template #hint>{{ t("panel.config.scene3dPurposeHint") }}</template>
       <Select
         size="small"
         class="w-full"
@@ -356,7 +357,6 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
         ]"
         @update:value="(v) => patch(purposePresetPatch(String(v) as Scene3dPurpose))"
       />
-      <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dPurposeHint") }}</div>
     </ConfigFieldGroup>
 
     <ConfigFieldGroup :title="t('panel.config.groupScene3dModels')">
@@ -374,7 +374,12 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
         />
       </div>
       <label class="block space-y-1" data-config-field="scene3d.modelUrl">
-        <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dModelUrl") }}</div>
+        <div class="flex items-center gap-1 text-[10px] text-gray-500">
+          {{ t("panel.config.scene3dModelUrl") }}
+          <ConfigHintIcon :label="t('panel.config.scene3dModelUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <div class="flex gap-1.5">
           <Input
             size="small"
@@ -392,7 +397,6 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
             {{ t("common.add") }}
           </Button>
         </div>
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div v-if="config.models.length === 0" class="text-[11px] text-gray-500">
         {{ t("panel.config.scene3dNoModels") }}
@@ -477,7 +481,7 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
     </ConfigFieldGroup>
 
     <ConfigFieldGroup :title="t('panel.config.groupScene3dCamera')">
-      <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dCameraEditDesc") }}</div>
+      <template #hint>{{ t("panel.config.scene3dCameraEditDesc") }}</template>
       <div class="grid grid-cols-3 gap-1">
         <Input
           v-for="(axis, index) in ['x', 'y', 'z']"

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

@@ -9,6 +9,7 @@ import { getPanelMessages } from "../../constants/messages";
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
@@ -89,7 +90,12 @@ function onFileChange(e: Event) {
       :default-open="false"
     >
       <label class="block space-y-1" data-config-field="style.backgroundImage">
-        <div>{{ t("panel.config.backgroundImage") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.backgroundImage") }}
+          <ConfigHintIcon :label="t('panel.config.backgroundImage')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -97,9 +103,7 @@ function onFileChange(e: Event) {
           :disabled="!isEditable"
           :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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

@@ -7,6 +7,7 @@ import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDe
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const props = defineProps<{
@@ -106,7 +107,12 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
         }"
       />
       <label class="block space-y-1">
-        <div>{{ t("panel.config.textHtmlSource") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.textHtmlSource") }}
+          <ConfigHintIcon :label="t('panel.config.textHtmlSource')">
+            {{ t("panel.config.scopeTemplateHint") }}
+          </ConfigHintIcon>
+        </div>
         <textarea
           data-config-field="textHtml"
           class="w-full rounded border border-gray-200 bg-white px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none"
@@ -116,9 +122,7 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
           :disabled="!isEditable"
           :placeholder="t('panel.config.textHtmlSourcePlaceholder')"
           @input="(e) => patch({ textHtml: (e.target as HTMLTextAreaElement).value || '<p><br/></p>' })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
-      </label>
+        />      </label>
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupTextStyle')">
       <label class="block space-y-1">

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

@@ -7,6 +7,7 @@ import { readFileAsDataUrl, uploadFileToRemote } from "./shared";
 import { getPanelMessages } from "../../constants/messages";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
@@ -67,7 +68,12 @@ function onVideoFileChange(e: Event) {
   >
     <ConfigFieldGroup :title="t('panel.config.groupVideoSource')">
       <label class="block space-y-1" data-config-field="videoRemoteUrl">
-        <div>{{ t("panel.config.videoUrl") }}</div>
+        <div class="flex items-center gap-1">
+          {{ t("panel.config.videoUrl") }}
+          <ConfigHintIcon :label="t('panel.config.videoUrl')">
+            {{ t("panel.config.urlScopeHint") }}
+          </ConfigHintIcon>
+        </div>
         <Input
           size="small"
           class="font-mono text-[11px]"
@@ -78,9 +84,7 @@ function onVideoFileChange(e: Event) {
             videoRemoteUrl: v || undefined,
             videoSrc: v || element.videoSrc,
           })"
-        />
-        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
-      </label>
+        />      </label>
       <div class="flex items-center gap-2">
         <label
           class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"

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/components/table/ConditionEditor.vue

@@ -13,6 +13,7 @@ import {
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Button, Input, Select } from "ant-design-vue";
 import { computed } from "vue";
+import ConfigHintIcon from "../ConfigHintIcon.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -92,7 +93,12 @@ function patchLeaf(index: number, patch: Partial<ConditionLeaf>) {
   <div class="space-y-2">
     <div class="flex items-center justify-between gap-2">
       <label class="min-w-0 flex-1 space-y-1">
-        <div class="text-[11px] text-gray-500">{{ t("panel.config.tableConditionLogic") }}</div>
+        <div class="flex items-center gap-1 text-[11px] text-gray-500">
+          {{ t("panel.config.tableConditionLogic") }}
+          <ConfigHintIcon :label="t('panel.config.tableConditionLogic')">
+            {{ t("panel.config.tableConditionLogicHint") }}
+          </ConfigHintIcon>
+        </div>
         <Select
           size="small"
           class="w-full"
@@ -114,7 +120,6 @@ function patchLeaf(index: number, patch: Partial<ConditionLeaf>) {
         {{ t("panel.config.tableConditionAddItem") }}
       </Button>
     </div>
-    <div class="text-[10px] text-gray-500">{{ t("panel.config.tableConditionLogicHint") }}</div>
     <div
       v-for="(item, index) in items"
       :key="index"

package/src/panel/components/table/PanelConfigTableSection.vue

@@ -504,10 +504,16 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
       </label>
       <details class="rounded-md border border-gray-200 bg-gray-50/60 px-2 py-1.5">
         <summary class="cursor-pointer text-[11px] font-medium text-gray-600">
-          {{ t("panel.config.tableAdvancedData") }}
+          <span class="inline-flex items-center gap-1 align-middle">
+            {{ t("panel.config.tableAdvancedData") }}
+            <span class="inline-flex" @click.prevent>
+              <ConfigHintIcon :label="t('panel.config.tableAdvancedData')">
+                {{ t("panel.config.tableAdvancedDataHint") }}
+              </ConfigHintIcon>
+            </span>
+          </span>
         </summary>
         <div class="mt-2 space-y-2 border-t border-gray-100 pt-2">
-          <p class="text-[10px] text-gray-500">{{ t("panel.config.tableAdvancedDataHint") }}</p>
           <div class="grid grid-cols-2 gap-2">
             <label class="block space-y-1.5">
               <div class="flex items-center gap-1">
@@ -1338,7 +1344,7 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
               <Input
                 size="small"
                 :value="String(selectedColumn.column.widgetProps?.progressStatic ?? '')"
-                placeholder="80 或 {scope?.pct}"
+                :placeholder="t('panel.config.tableProgressStaticPlaceholder')"
                 :disabled="!isEditable"
                 @update:value="
                   (v: unknown) =>
@@ -1756,7 +1762,7 @@ function patchProgressRuleWhen(ruleIndex: number, when: Condition) {
               size="small"
               :value="selectedColumn.column.displayTemplate ?? ''"
               :disabled="!isEditable"
-              placeholder="{current}分"
+              :placeholder="t('panel.config.tableDisplayTemplatePlaceholder')"
               @update:value="
                 (v: unknown) => {
                   const s = asSelectString(v).trim();

package/src/panel/hooks/usePanelElements.ts

@@ -22,6 +22,8 @@ import {
   getDefaultSizeByMaterial,
   getDefaultTableConfig,
   getDefaultTextContent,
+  localizeLayers,
+  localizePanelElement,
   normalizePrimaryLayer,
   randomId,
 } from "../utils/panelElementDefaults";
@@ -122,7 +124,8 @@ export function usePanelElements() {
   const layers = computed(() => {
     const rawLayers =
       (stateRef.value.variables?.layers as PanelLayer[] | undefined) ?? [DEFAULT_LAYER];
-    return normalizePrimaryLayer(rawLayers);
+    void locale.value;
+    return localizeLayers(normalizePrimaryLayer(rawLayers), t);
   });
 
   const activeLayerId = computed(
@@ -133,13 +136,26 @@ export function usePanelElements() {
   const allElementsCache = shallowRef<PanelElement[]>([]);
   const elementsCache = shallowRef<PanelElement[]>([]);
 
+  let localizedCache = { locale: locale.value, map: new WeakMap<PanelElement, PanelElement>() };
+
   const allElements = computed(() => {
     const next = materializePanelElements(
       stateRef.value.root.children,
       allElementsCache.value
     );
     allElementsCache.value = next;
-    return next;
+    if (localizedCache.locale !== locale.value) {
+      localizedCache = { locale: locale.value, map: new WeakMap() };
+    }
+    const { map } = localizedCache;
+    return next.map((el) => {
+      let localized = map.get(el);
+      if (!localized) {
+        localized = localizePanelElement(el, t);
+        map.set(el, localized);
+      }
+      return localized;
+    });
   });
 
   const elements = computed(() => {

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/panelElementDefaults.ts

@@ -1,5 +1,5 @@
 import type { TranslateFn } from "@arronqzy/i18n";
-import { tForLocale } from "@arronqzy/i18n";
+import { relocalizeMessage, tForLocale } from "@arronqzy/i18n";
 import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
 import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
 import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
@@ -35,6 +35,52 @@ export function getDefaultNodeName(
   return key ? t(key) : materialType;
 }
 
+const DEFAULT_LAYER_NAME_KEYS = [
+  "panel.defaults.layer1",
+  "panel.defaults.layerN",
+  "panel.defaults.mappingLayerN",
+  "panel.defaults.layerRandom",
+];
+
+/** Persisted default layer names ("图层1" / "Layer 2") follow the current locale. */
+export function localizeLayerName(name: string, t: TranslateFn): string {
+  return relocalizeMessage(name, DEFAULT_LAYER_NAME_KEYS, t);
+}
+
+export function localizeLayers(layers: PanelLayer[], t: TranslateFn): PanelLayer[] {
+  return layers.map((layer) => {
+    const name = localizeLayerName(layer.name, t);
+    return name === layer.name ? layer : { ...layer, name };
+  });
+}
+
+const DEFAULT_TEXT_HTML_RE = /^<p>(.*)<\/p>$/s;
+
+/**
+ * Default node name, chart title and text content are stored in the creation locale;
+ * re-render them in the current one. Returns the same object when nothing changes.
+ */
+export function localizePanelElement(element: PanelElement, t: TranslateFn): PanelElement {
+  const key = DEFAULT_NODE_NAME_KEYS[element.materialType ?? ""];
+  if (!key) return element;
+  const name = element.name ? relocalizeMessage(element.name, key, t) : element.name;
+  const title = element.chart?.title ? relocalizeMessage(element.chart.title, key, t) : undefined;
+  let textHtml = element.textHtml;
+  const textInner = textHtml ? DEFAULT_TEXT_HTML_RE.exec(textHtml)?.[1] : undefined;
+  if (textInner) {
+    const localized = relocalizeMessage(textInner, "panel.defaults.doubleClickTextHtml", t);
+    if (localized !== textInner) textHtml = `<p>${localized}</p>`;
+  }
+  const titleChanged = title !== undefined && title !== element.chart?.title;
+  if (name === element.name && !titleChanged && textHtml === element.textHtml) return element;
+  return {
+    ...element,
+    name,
+    textHtml,
+    ...(titleChanged && element.chart ? { chart: { ...element.chart, title } } : null),
+  };
+}
+
 export function getDefaultLayer(t: TranslateFn = tForLocale("zh-CN")): PanelLayer {
   return {
     id: DEFAULT_LAYER_ID,

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