@arronqzy/react-view 1.0.33 → 1.0.36

package/readme.md

@@ -1,16 +1,27 @@
 # @arronqzy/react-view
 
-Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物料、在线预览与工作区管理能力。
+视图编辑器。物料、无限画布、图层、配置侧栏、工作区和在线预览都在这个包。蓝图分屏通过依赖的 `@arronqzy/react-blueprint` 嵌进来。
 
-## 功能概览
+大多数 React 宿主应直接用 [`@arronqzy/abuilder`](../abuilder/README.md) 的 `<App />`。只有要把面板拆进已有布局时才引本包。
 
-- **无限画布**：平移、缩放、标尺、框选与 Moveable 拖拽/缩放/旋转
-- **图层系统**：多图层、映射图层、主图层、锁定与合并
-- **物料节点**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点等
-- **Scope 模版**：节点属性支持 `{scope.xxx}` 表达式与解析预览
-- **工作区**：IndexedDB 持久化、多项目切换、同步与在线预览
-- **蓝图联动**：与 `@arronqzy/react-blueprint` 分屏编辑，运行时 Scope 回写视图
-- **宿主集成**：工作区事件订阅、预览快照、外部工作区数据加载
+![左侧物料、中间画布、右侧配置、底部图层](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/01-overview.png)
+
+## 画布上有什么
+
+- **无限画布**：平移、缩放、标尺、框选，Moveable 拖拽 / 缩放 / 旋转
+- **物料**：ECharts 图表、可视化表格、文本、图片、音视频、几何、网格、视口、三维、引用节点
+- **图层**：多图层、映射图层、主图层、锁定、显示、合并
+- **配置**：按类型展开；可搜字段；展开状态按节点记住
+- **Scope**：属性可写 `{scope.xxx}`，蓝图执行后展开
+- **工作区**：IndexedDB 多项目、导入导出、跨标签同步
+
+表格是物料里配置最多的一类，列、条件样式和外观都在右侧：
+
+![表格节点与配置侧栏](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/09-table-full.png)
+
+打开蓝图后，本包把画布拆成上下两块，下面交给蓝图编辑器：
+
+![视图与蓝图分屏](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/17-blueprint.png)
 
 ## 安装
 
@@ -18,15 +29,13 @@ Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物
 pnpm add @arronqzy/react-view
 ```
 
-依赖 React 19，并需引入样式：
-
 ```ts
 import "@arronqzy/react-view/styles.css";
 ```
 
-## 使用
+Vite 宿主还要加 `@arronqzy/abuilder/vite` 的 `webllmAssistant()`，见 abuilder 的 README。否则打包 WebLLM 会失败。
 
-### 完整编辑器面板
+## 编辑面板
 
 ```tsx
 import { ReactViewPanel } from "@arronqzy/react-view";
@@ -44,15 +53,15 @@ export function Editor({ workspace }: { workspace?: WorkspaceProjectRecord | nul
 }
 ```
 
-| `ReactViewPanel` 参数 | 说明 | 默认值 |
-|----------------------|------|--------|
+| 参数 | 说明 | 默认 |
+|------|------|------|
 | `className` | 根节点 class | — |
 | `initialZoom` | 初始缩放 | `1` |
-| `initialWorkspace` | 外部传入的完整工作区，挂载后自动加载 | — |
+| `initialWorkspace` | 挂载后加载的完整工作区。空则空白画布 | — |
 
-### 在线预览
+## 在线预览
 
-按工作区 ID 从 IndexedDB / 缓存加载：
+按 ID 从 IndexedDB / 缓存加载：
 
 ```tsx
 import { ReactViewOnlinePreview } from "@arronqzy/react-view";
@@ -60,65 +69,62 @@ import { ReactViewOnlinePreview } from "@arronqzy/react-view";
 <ReactViewOnlinePreview projectId="your-project-id" />
 ```
 
-直接传入工作区数据（无需 IndexedDB）：
+直接给数据（优先于 `projectId`）：
 
 ```tsx
 <ReactViewOnlinePreview workspace={savedWorkspace} />
 ```
 
-URL 参数解析：
-
 ```ts
 import { parseOnlinePreviewSearchParams } from "@arronqzy/react-view";
 
-const params = parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
+parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
 ```
 
-| `ReactViewOnlinePreview` 参数 | 说明 |
-|------------------------------|------|
-| `projectId` | 从 IndexedDB 加载的工作区 ID |
-| `workspace` | 直接传入的完整工作区数据（优先于 `projectId`） |
+| 参数 | 说明 |
+|------|------|
+| `projectId` | 从 IndexedDB 加载 |
+| `workspace` | 宿主传入的完整工作区，优先 |
 | `previewInstanceId` | 预览实例 ID（可选） |
 
-### 工作区事件订阅
+## 工作区事件
 
-监听工作区创建与同步，回调携带**完整工作区数据**（面板 + 蓝图），便于持久化到自有后端：
+回调带完整工作区，用来写自己的后端。IndexedDB 的增删改查不导出。
 
 ```ts
 import {
   addEventSubscription,
   AbuilderEvents,
+  parseWorkspaceData,
   type WorkspaceData,
 } from "@arronqzy/react-view";
 
-const addSub = addEventSubscription(
-  AbuilderEvents.workspaceAdd,
-  async (workspace: WorkspaceData) => {
-    await saveToServer(workspace);
-  }
-);
-
 const syncSub = addEventSubscription(
   AbuilderEvents.workspaceSync,
-  async (workspace) => {
+  async (workspace: WorkspaceData) => {
     await saveToServer(workspace);
   }
 );
-
-addSub.unsubscribe();
 syncSub.unsubscribe();
 ```
 
-| 事件 | 常量 | 触发时机 |
+| 事件 | 常量 | 何时触发 |
 |------|------|----------|
-| `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建工作区成功 |
-| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步工作区成功 |
+| `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建成功 |
+| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步成功 |
+
+字段：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
+
+校验：
 
-回调参数类型为 `WorkspaceData`（即 `WorkspaceProjectRecord`），字段包括：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
+- `validateViewData` / `parseViewData` — 视图 `panelState`
+- `validateBlueprintData` / `parseBlueprintData` — 蓝图文档
+- `validateWorkspaceData` / `parseWorkspaceData` — 两边都要合法；`parse` 的 `value` 可作 `initialWorkspace`
+- `createEmptyWorkspace` / `createWorkspaceProjectId` — 空白记录和 ID
 
-### 获取预览快照
+## 预览缩略图
 
-在编辑器或在线预览页已挂载时，截取当前预览画面为 base64（data URL），可用于缩略图：
+编辑器或预览页已挂载且画布有内容时：
 
 ```ts
 import { getPreviewSnapshot } from "@arronqzy/react-view";
@@ -131,56 +137,38 @@ const dataUrl = await getPreviewSnapshot({
 });
 ```
 
-| 参数 | 说明 | 默认值 |
-|------|------|--------|
-| `maxWidth` / `maxHeight` | 等比缩放上限 | 不限制 |
-| `mimeType` | `"image/png"` 或 `"image/jpeg"` | `"image/png"` |
-| `quality` | JPEG 质量 0–1 | `0.92` |
+| 参数 | 说明 | 默认 |
+|------|------|------|
+| `maxWidth` / `maxHeight` | 等比上限 | 不限制 |
+| `mimeType` | png 或 jpeg | `"image/png"` |
+| `quality` | JPEG 0–1 | `0.92` |
 | `backgroundColor` | 背景色 | `"#ffffff"` |
 
-## 核心导出
+## 主要导出
 
 | 导出 | 说明 |
 |------|------|
-| `ReactViewPanel` | 主编辑面板（画布 + 配置侧栏 + 蓝图分屏） |
-| `ReactViewOnlinePreview` | 只读在线预览页 |
-| `parseOnlinePreviewSearchParams` | 解析预览 URL 参数 |
-| `addEventSubscription` | 订阅工作区事件，返回 `{ unsubscribe }` |
-| `AbuilderEvents` | 工作区事件名常量 |
-| `getPreviewSnapshot` | 获取预览画面 base64 缩略图（仅本包 / `@arronqzy/abuilder`） |
-| `parseWorkspaceData` / `validateWorkspaceData` | 解析或校验完整工作区；`parse` 的 `value` 可作 `initialWorkspace` |
-| `parseViewData` / `validateViewData` | 解析或校验视图 `panelState` |
-| `parseBlueprintData` / `validateBlueprintData` | 解析或校验蓝图文档 |
-| `createEmptyWorkspace` | 构造空工作区记录 |
-| `createWorkspaceProjectId` | 生成工作区 ID |
-| `WorkspaceData` / `WorkspaceProjectRecord` | 完整工作区数据类型 |
-| `createView` / `createAction` 等 | 视图 DSL 与指令扩展（`src/core`） |
-
-相关类型：`AbuilderEventName`、`AbuilderEventPayloadMap`、`WorkspaceAddEventPayload`、`WorkspaceSyncEventPayload`、`GetPreviewSnapshotOptions`。
-
-## 样式与 Tailwind
-
-本包内置 Tailwind 配置，构建产物为 `dist/styles.css`：
+| `ReactViewPanel` | 主面板（画布 + 配置 + 蓝图分屏） |
+| `ReactViewOnlinePreview` | 只读预览 |
+| `parseOnlinePreviewSearchParams` | 解析预览 URL |
+| `addEventSubscription` / `AbuilderEvents` | 工作区事件 |
+| `getPreviewSnapshot` | 预览截图 data URL |
+| `parseWorkspaceData` 等 | 校验 / 解析 / 空工作区 |
+| `createView` / `createAction` | 视图 DSL 扩展点（`src/core`） |
+
+## 样式
+
+产物是 `dist/styles.css`。本仓库构建：
 
 ```bash
 pnpm -C packages/react-view build:css
 ```
 
-若由应用侧 Tailwind 扫描源码，请将本包加入 `content`：
-
-```ts
-content: [
-  "./src/**/*.{ts,tsx}",
-  "./node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}",
-]
-```
+若应用自己的 Tailwind 要扫描本包源码，把 `node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}` 加进 `content`。
 
-## 依赖关系
+## 依赖
 
-- `@arronqzy/ui` — 基础 UI 组件
-- `@arronqzy/rx-store` — 画布状态与历史
-- `@arronqzy/react-blueprint` — 蓝图编辑与执行
-- `@arronqzy/blueprint-dsl` — 蓝图运行时
+`@arronqzy/ui`、`@arronqzy/rx-store`、`@arronqzy/react-blueprint`、`@arronqzy/blueprint-dsl`、`@arronqzy/view-table`、`@arronqzy/view-scene3d`。
 
 ## 许可证
 

package/src/core/instructions.tsx

@@ -33,7 +33,7 @@ export class InstructionSet {
   execute(name: string, ...args: any[]) {
     const fn = this.instructions[name];
     if (!fn) {
-      console.warn(`指令不存在: ${name}`);
+      console.warn(`Instruction not found: ${name}`);
       return;
     }
     const result = fn(...args);

package/src/core/template.tsx

@@ -26,7 +26,7 @@ export const Template = (
       instructions.execute(props.id + "click", { e });
     } else {
       if (isDevMode()) {
-        console.warn("Template 缺少 id,无法触发事件");
+        console.warn("Template is missing an id; events cannot be triggered");
       }
     }
   };

package/src/index.ts

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

package/src/panel/I18nRoot.tsx

@@ -1,6 +1,7 @@
 import { I18nProvider } from "@arronqzy/i18n/react";
 import { LOCALE_STORAGE_KEY } from "@arronqzy/i18n";
 import { appStorageKey } from "@arronqzy/blueprint-dsl";
+import { BlueprintDslLocaleSync } from "@arronqzy/react-blueprint";
 import type { Locale } from "@arronqzy/i18n";
 import type { ReactNode } from "react";
 
@@ -24,7 +25,7 @@ export function I18nRoot({
       onLocaleChange={onLocaleChange}
       storageKey={appStorageKey(LOCALE_STORAGE_KEY, nameSpace)}
     >
-      {children}
+      <BlueprintDslLocaleSync>{children}</BlueprintDslLocaleSync>
     </I18nProvider>
   );
 }

package/src/panel/ReactViewOnlinePreview.tsx

@@ -17,6 +17,7 @@ import type { State } from "@arronqzy/rx-store";
 import { ElementsLayer } from "./components/ElementsLayer";
 import type { TableCellActionHandler } from "./components/table/TableNodeContent";
 import type { PanelElement } from "./types";
+import { localizePanelElement } from "./utils/panelElementDefaults";
 import {
   clearViewElementScopes,
   getViewElementScope,
@@ -236,7 +237,8 @@ function ReactViewOnlinePreviewInner({
 
   const displayElements = useMemo(
     () =>
-      scopedLayerElements.map((el) => {
+      scopedLayerElements.map((source) => {
+        const el = localizePanelElement(source, t);
         const x = el.x - sceneBounds.minX;
         const y = el.y - sceneBounds.minY;
         if (outputScale) return { ...el, x, y };
@@ -255,6 +257,7 @@ function ReactViewOnlinePreviewInner({
       sceneBounds.minX,
       sceneBounds.minY,
       scopedLayerElements,
+      t,
     ]
   );
 

package/src/panel/ReactViewPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@arronqzy/i18n/react";
-import type { Locale } from "@arronqzy/i18n";
+import { relocalizeMessage, type Locale } from "@arronqzy/i18n";
 import type { State } from "@arronqzy/rx-store";
 import type { PanelElement } from "./types";
 
@@ -46,6 +46,7 @@ import { revealPanelConfigFromPatch } from "./ai/revealConfigField";
 import {
   BlueprintGraph,
   BlueprintMetaDialog,
+  ApiCollectionManagerDialog,
   BlueprintNodeSwitchTaskDialog,
   blueprintDocumentsEqual,
   buildBlueprintExportPayload,
@@ -55,6 +56,7 @@ import {
   downloadBlueprintExport,
   documentToRunnableGraph,
   getBlueprintLibraryRecord,
+  hydrateApiCollections,
   libraryRecordFromImport,
   listBlueprintLibrary,
   parseBlueprintImportFile,
@@ -72,12 +74,16 @@ import {
   type BlueprintMetaDraft,
 } from "@arronqzy/react-blueprint";
 import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
-import { abortClockNode, appStorageKey, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
+import { abortClockNode, appStorageKey, buildApiCollectionSyncPatches, toApiCollectionSyncResult, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import { WorkspaceStageSplit } from "./components/WorkspaceStageSplit";
 import {
   WorkspaceConfigSidebar,
   type WorkspaceConfigFocus,
 } from "./components/WorkspaceConfigSidebar";
+import {
+  AbuilderEvents,
+  emitAbuilderEvent,
+} from "./library/event-subscription";
 import {
   getViewElementScope,
   setViewElementScopes,
@@ -277,6 +283,12 @@ function ReactViewPanelInner({
     name: t("panel.defaults.unnamedBlueprint"),
     remark: "",
   });
+  const displayProductName = relocalizeMessage(productName, "panel.defaults.unnamedProduct", t);
+  const displayBlueprintName = relocalizeMessage(
+    blueprintMeta.name,
+    ["panel.defaults.unnamedBlueprint", "blueprint.dialog.unnamedBlueprint"],
+    t
+  );
   const [blueprintLibraryItems, setBlueprintLibraryItems] = useState<
     BlueprintLibraryListItem[]
   >([]);
@@ -295,6 +307,7 @@ function ReactViewPanelInner({
   const [blueprintMetaDialogMode, setBlueprintMetaDialogMode] = useState<
     "export" | "save"
   >("save");
+  const [apiCollectionManagerOpen, setApiCollectionManagerOpen] = useState(false);
   const [selectedBlueprintNodeId, setSelectedBlueprintNodeId] = useState<string | null>(
     null
   );
@@ -655,6 +668,12 @@ function ReactViewPanelInner({
     [nameSpace]
   );
 
+  useEffect(() => {
+    void hydrateApiCollections(nameSpace).catch((error) => {
+      console.error("[abuilder] hydrate api collections failed", error);
+    });
+  }, [nameSpace]);
+
   const handleBlueprintExecutionBlocked = useCallback((message: string) => {
     toast({ title: message });
   }, []);
@@ -669,7 +688,7 @@ function ReactViewPanelInner({
   const blueprintDebugSession = useBlueprintDebugSession({
     graph: blueprintGraph,
     blueprintId: activeBlueprintLibraryId,
-    blueprintName: blueprintMeta.name || t("panel.defaults.unnamedBlueprint"),
+    blueprintName: displayBlueprintName || t("panel.defaults.unnamedBlueprint"),
     resolveLibraryBlueprint,
     libraryNameById: blueprintLibraryNameById,
     onExecutionBlocked: handleBlueprintExecutionBlocked,
@@ -1635,7 +1654,7 @@ function ReactViewPanelInner({
     const previewFaviconLink = faviconHrefWithVersion
       ? `<link rel="icon" type="image/png" href="${faviconHrefWithVersion}" /><link rel="shortcut icon" type="image/png" href="${faviconHrefWithVersion}" />`
       : "";
-    const previewTitle = productName.trim() || t("panel.defaults.unnamedProduct");
+    const previewTitle = displayProductName.trim() || t("panel.defaults.unnamedProduct");
     const escapedPreviewTitle = previewTitle
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
@@ -1774,7 +1793,7 @@ function ReactViewPanelInner({
         win.document.head.appendChild(link);
       });
     }
-  }, [allElements, layers, productName, titleIconDataUrl]);
+  }, [allElements, layers, displayProductName, t, titleIconDataUrl]);
 
   const handlePreviewLayer = useCallback(() => {
     void (async () => {
@@ -1904,6 +1923,7 @@ function ReactViewPanelInner({
           applyTheme={applyTheme}
           isDark={isDark}
           openBlueprintExportDialog={openBlueprintExportDialog}
+          openApiCollectionManager={() => setApiCollectionManagerOpen(true)}
           panelFontSize={panelFontSize}
           setPanelFontSize={setPanelFontSize}
           locale={locale}
@@ -2034,7 +2054,7 @@ function ReactViewPanelInner({
                 style={{ zIndex: PANEL_Z_INDEX.toolbar }}
               >
                 <Input
-                  value={productName}
+                  value={displayProductName}
                   onChange={(e) => setProductName(e.target.value)}
                   placeholder={t("panel.menubar.productNamePlaceholder")}
                   className="h-7 w-[220px] text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none"
@@ -2318,7 +2338,7 @@ function ReactViewPanelInner({
                 blueprintProps={blueprintCanvasProps}
                 blueprintLibraryItems={blueprintLibraryItems}
                 activeBlueprintLibraryId={activeBlueprintLibraryId}
-                currentBlueprintLabel={blueprintMeta.name}
+                currentBlueprintLabel={displayBlueprintName}
                 onSelectBlueprintLibraryItem={(id) => {
                   void handleSelectBlueprintLibraryItem(id);
                 }}
@@ -2768,6 +2788,43 @@ function ReactViewPanelInner({
           void handleBlueprintMetaConfirm(meta);
         }}
       />
+      <ApiCollectionManagerDialog
+        open={apiCollectionManagerOpen}
+        onOpenChange={setApiCollectionManagerOpen}
+        onUploadStart={(info) => {
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+        }}
+        onUploadSuccess={(info) => {
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+        }}
+        onSyncCollection={(record) => {
+          const patches = buildApiCollectionSyncPatches({
+            collectionId: record.id,
+            document: record.document,
+            nodes: blueprintGraph.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([]);
+          }
+          setBlueprintGraph((graph) => {
+            let next = graph;
+            for (const patch of patches) {
+              next = next.updateNode(patch.nodeId, {
+                fetchConfig:
+                  patch.fetchConfigPatch as import("@arronqzy/blueprint-dsl").FetchRequestConfig,
+              });
+            }
+            return next;
+          });
+          return toApiCollectionSyncResult(patches);
+        }}
+      />
       {pendingBlueprintNodeSwitch ? (
         <BlueprintNodeSwitchTaskDialog
           open

package/src/panel/components/ConfigHintIcon.tsx

@@ -31,11 +31,24 @@ export function ConfigHintIcon({
             type="button"
             className={
               className ??
-              "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"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="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>
         </TooltipTrigger>
         <TooltipContent

package/src/panel/components/PanelMenubar.tsx

@@ -34,6 +34,7 @@ export type PanelMenubarProps = {
   applyTheme: (dark: boolean) => void;
   isDark: boolean;
   openBlueprintExportDialog: () => void;
+  openApiCollectionManager: () => void;
   panelFontSize: "sm" | "md" | "lg";
   setPanelFontSize: (value: "sm" | "md" | "lg") => void;
   locale: Locale;
@@ -65,6 +66,7 @@ export function PanelMenubar({
   applyTheme,
   isDark,
   openBlueprintExportDialog,
+  openApiCollectionManager,
   panelFontSize,
   setPanelFontSize,
   locale,
@@ -121,6 +123,10 @@ export function PanelMenubar({
               <MenubarItem onClick={() => blueprintImportInputRef.current?.click()}>
                 {t("panel.menubar.import")}
               </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem onClick={openApiCollectionManager}>
+                {t("panel.menubar.apiCollections")}
+              </MenubarItem>
             </MenubarContent>
           </MenubarMenu>
           <MenubarMenu>

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

@@ -152,7 +152,12 @@ export function PanelConfigAudioSection({
                   t("panel.config.groupAudioSource"),
                   <>
                     <label className="block space-y-1" data-config-field="audioRemoteUrl">
-                      <div>{t("panel.config.audioUrl")}</div>
+                      <div className="flex items-center gap-1">
+                        {t("panel.config.audioUrl")}
+                        <ConfigHintIcon label={t("panel.config.audioUrl")}>
+                          {t("panel.config.urlScopeHint")}
+                        </ConfigHintIcon>
+                      </div>
                       <Input
                         value={selectedElement.audioRemoteUrl ?? ""}
                         onChange={(e) =>
@@ -164,9 +169,6 @@ export function PanelConfigAudioSection({
                         placeholder={t("panel.config.urlScopePlaceholder")}
                         className="h-7 font-mono text-[11px]"
                       />
-                      <p className="text-[10px] text-muted-foreground">
-                        {t("panel.config.urlScopeHint")}
-                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

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

@@ -118,7 +118,12 @@ export function PanelConfigChartSection({
                     t("panel.config.groupData"),
                     <>
                       <label className="block space-y-1" data-config-field="chart.labelsText">
-                        <div>{t("panel.config.labelsCsv")}</div>
+                        <div className="flex items-center gap-1">
+                          {t("panel.config.labelsCsv")}
+                          <ConfigHintIcon label={t("panel.config.labelsCsv")}>
+                            {t("panel.config.scopeTemplateHint")}
+                          </ConfigHintIcon>
+                        </div>
                         <Input
                           value={getChartLabelsDisplayText(selectedElement.chart)}
                           onChange={(e) =>
@@ -129,13 +134,15 @@ export function PanelConfigChartSection({
                           placeholder={t("panel.config.labelsCsvPlaceholder")}
                           className="h-7"
                         />
-                        <p className="text-[10px] text-muted-foreground">
-                          {t("panel.config.scopeTemplateHint")}
-                        </p>
                       </label>
 
                       <label className="block space-y-1" data-config-field="chart.valuesText">
-                        <div>{t("panel.config.valuesCsv")}</div>
+                        <div className="flex items-center gap-1">
+                          {t("panel.config.valuesCsv")}
+                          <ConfigHintIcon label={t("panel.config.valuesCsv")}>
+                            {t("panel.config.scopeTemplateHint")}
+                          </ConfigHintIcon>
+                        </div>
                         <Input
                           value={getChartValuesDisplayText(selectedElement.chart)}
                           onChange={(e) =>
@@ -146,9 +153,6 @@ export function PanelConfigChartSection({
                           placeholder={t("panel.config.valuesCsvPlaceholder")}
                           className="h-7"
                         />
-                        <p className="text-[10px] text-muted-foreground">
-                          {t("panel.config.scopeTemplateHint")}
-                        </p>
                       </label>
                     </>
                   )}