@arronqzy/vue-view 0.1.24 → 0.1.26

package/README.md

@@ -49,17 +49,7 @@ import {
 } from "@arronqzy/vue-view";
 ```
 
-创建 / 同步发出 `workspace:add` / `workspace:sync`，删除工作区发出 `workspace:delete`（参数 `{ ids, nameSpace }`）。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`。
-
-浏览器里的本地数据可以读取和清理，最后一个参数都是 `nameSpace`：
-
-- 工作区：`listWorkspaceProjects` / `getWorkspaceProject` / `deleteWorkspaceProject` / `clearWorkspaceProjects`
-- 蓝图库：`listBlueprintLibrary` / `getBlueprintLibraryRecord` / `deleteBlueprintLibraryRecord` / `clearBlueprintLibrary`
-- 蓝图执行日志：`listExecutionRunRecords` / `getExecutionRunRecord` / `deleteExecutionRunRecord` / `clearAllExecutionRunRecords` / `purgeExecutionRunsOlderThan` / `trimExecutionRunRecordsToMax`，保留策略用 `readExecutionLogSettings` / `writeExecutionLogSettings`
-- 接口集合：`listApiCollectionRecords` / `deleteApiCollection` / `clearApiCollections`
-- `clearAbuilderStorage`：一次清空以上四类，返回各自删除数量
-
-工作区、蓝图库的写入接口不导出（由编辑器自己维护）。`getPreviewSnapshot` 只在 React 包实现。
+创建 / 同步发出 `workspace:add` / `workspace:sync`（载荷含 `nameSpace`），删除发出 `workspace:delete`。另有 `blueprint-library:changed` / `api-collection:changed`。`parseWorkspaceData` 的 `value` 可作 `initialWorkspace`；带 `id` 时默认同步进 IndexedDB。也支持 `workspaceId` prop、`ref`（`AbuilderViewHandle`）以及 `put*` / `openWorkspace` / `getCurrentWorkspace` / `getPreviewSnapshot` 等与 React 对齐的公开 API。
 
 ## 和 React 版的差别
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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.17",
     "@arronqzy/rx-store": "1.0.8",
     "@arronqzy/blueprint-dsl": "1.0.17",
     "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/vue-blueprint": "0.1.20",
     "@arronqzy/view-table": "0.1.8",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/vue-blueprint": "0.1.18"
+    "@arronqzy/i18n": "0.1.17"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/index.ts

@@ -16,17 +16,24 @@ export { createWorkspaceProjectId } from "./panel/library/workspace-project-db";
 export {
   listWorkspaceProjects,
   getWorkspaceProject,
+  putWorkspaceProject,
+  upsertWorkspaceProject,
   deleteWorkspaceProject,
   clearWorkspaceProjects,
 } from "./panel/library/workspace-storage";
-export type { WorkspaceProjectListItem } from "./panel/library/workspace-storage";
+export type {
+  WorkspaceProjectListItem,
+  PutWorkspaceProjectOptions,
+} from "./panel/library/workspace-storage";
 export {
   listBlueprintLibrary,
   getBlueprintLibraryRecord,
+  putBlueprintLibraryRecord,
   deleteBlueprintLibraryRecord,
   clearBlueprintLibrary,
   listExecutionRunRecords,
   getExecutionRunRecord,
+  putExecutionRunRecord,
   deleteExecutionRunRecord,
   clearAllExecutionRunRecords,
   purgeExecutionRunsOlderThan,
@@ -34,6 +41,8 @@ export {
   readExecutionLogSettings,
   writeExecutionLogSettings,
   listApiCollectionRecords,
+  putApiCollection,
+  upsertApiCollectionFromJson,
   deleteApiCollection,
   clearApiCollections,
   clearAbuilderStorage,
@@ -45,6 +54,8 @@ export type {
   ExecutionRunRecord,
   ExecutionLogSettings,
   ApiCollectionRecord,
+  UpsertApiCollectionInput,
+  UpsertApiCollectionResult,
 } from "./panel/library/abuilder-storage";
 export {
   addEventSubscription,
@@ -53,14 +64,27 @@ export {
 export type {
   AbuilderEventName,
   AbuilderEventPayloadMap,
+  AddEventSubscriptionOptions,
   WorkspaceAddEventPayload,
   WorkspaceSyncEventPayload,
   WorkspaceDeleteEventPayload,
+  BlueprintLibraryChangedEventPayload,
   ApiCollectionUploadStartEventPayload,
   ApiCollectionUploadSuccessEventPayload,
+  ApiCollectionChangedEventPayload,
   WorkspaceData,
 } from "./panel/library/event-subscription";
+export {
+  getCurrentWorkspace,
+  openWorkspace,
+  createWorkspace,
+  saveWorkspace,
+  syncWorkspace,
+} from "./panel/library/abuilder-view-handle";
+export type { AbuilderViewHandle } from "./panel/library/abuilder-view-handle";
 export type {
   ParseCheckResult,
   WorkspaceParseCheckResult,
 } from "./panel/library/parse-workspace-data";
+export { getPreviewSnapshot } from "./panel/library/preview-snapshot";
+export type { GetPreviewSnapshotOptions } from "./panel/library/preview-snapshot";

package/src/panel/VueViewOnlinePreview.vue

@@ -40,6 +40,8 @@ import {
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
 import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
+import { registerPreviewSnapshotProvider } from "./library/preview-snapshot";
+import { capturePreviewSceneElement } from "./library/capture-preview-snapshot";
 
 const { t, locale } = useI18n();
 useBlueprintDslLocaleSync();
@@ -292,6 +294,29 @@ onMounted(() => {
   onUnmounted(() => window.removeEventListener("resize", onResize));
 });
 
+watch(
+  [layoutReady, sceneRef, sceneBounds, fillScale, outputScale],
+  () => {
+    if (!layoutReady.value || !sceneRef.value) {
+      registerPreviewSnapshotProvider(null);
+      return;
+    }
+    registerPreviewSnapshotProvider(async () => {
+      const scene = sceneRef.value;
+      if (!scene) return null;
+      const width = outputScale.value
+        ? sceneBounds.value.width
+        : sceneBounds.value.width * fillScale.value.scaleX;
+      const height = outputScale.value
+        ? sceneBounds.value.height
+        : sceneBounds.value.height * fillScale.value.scaleY;
+      return capturePreviewSceneElement(scene, width, height);
+    });
+  },
+  { immediate: true }
+);
+onUnmounted(() => registerPreviewSnapshotProvider(null));
+
 function noopUpdate() {}
 function noopSelect() {}
 </script>

package/src/panel/VueViewPanel.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
+import {
+  registerAbuilderViewHandle,
+  type AbuilderViewHandle,
+} from "./library/abuilder-view-handle";
+import {
+  captureEditorPreviewSnapshot,
+  registerPreviewSnapshotProvider,
+} from "./library/preview-snapshot";
+import { readOutputScale } from "./utils/outputScale";
 import type { State } from "@arronqzy/rx-store";
 import {
   useBlueprintDslLocaleSync,
@@ -41,9 +50,9 @@ import {
   Modal,
   Slider,
   Space,
-  Switch,
   Tabs,
   Tag,
+  Tooltip,
   message,
 } from "ant-design-vue";
 import { usePanelElements } from "./hooks/usePanelElements";
@@ -90,6 +99,11 @@ const props = withDefaults(
     initialZoom?: number;
     nameSpace?: string | null;
     initialWorkspace?: WorkspaceProjectRecord | null;
+    /**
+     * 按 IndexedDB id 打开工作区（不 remount）。
+     * 与 initialWorkspace 同时存在时：首次优先完整记录；之后 id 变化从 IndexedDB 打开。
+     */
+    workspaceId?: string | null;
     /** 顶栏「设置 → 关于」展示的 npm 包名 */
     packageName?: string | null;
     /** 顶栏「设置 → 关于」展示的包版本号 */
@@ -99,6 +113,7 @@ const props = withDefaults(
     initialZoom: 1,
     nameSpace: null,
     initialWorkspace: null,
+    workspaceId: null,
     packageName: null,
     packageVersion: null,
   }
@@ -173,8 +188,8 @@ const editingLayerId = ref<string | null>(null);
 const editingLayerName = ref("");
 const isMergingLayers = ref(false);
 const mergeLayerName = ref("");
-const leftWidth = ref(240);
-const rightWidth = ref(300);
+const leftWidth = ref(220);
+const rightWidth = ref(280);
 const importInputRef = ref<HTMLInputElement | null>(null);
 const blueprintImportInputRef = ref<HTMLInputElement | null>(null);
 const apiCollectionManagerOpen = ref(false);
@@ -470,9 +485,39 @@ const workspaceProjects = useWorkspaceProjects({
   panelRevision: computed(() => `${historyCursor.value}|${allElements.value.length}`),
   onProjectApplied: handleWorkspaceProjectApplied,
   initialWorkspace: () => props.initialWorkspace,
+  workspaceId: () => props.workspaceId,
   nameSpace: () => props.nameSpace,
 });
 
+const viewHandle: AbuilderViewHandle = {
+  getNameSpace: () => props.nameSpace ?? null,
+  getCurrentWorkspace: () => workspaceProjects.getCurrentWorkspaceRecord(),
+  openWorkspace: (idOrRecord) => workspaceProjects.handleOpenProject(idOrRecord),
+  createWorkspace: () => workspaceProjects.handleCreateProject(),
+  saveWorkspace: () => workspaceProjects.handleSaveProject(),
+  syncWorkspace: () => workspaceProjects.handleSyncProject(),
+};
+
+defineExpose(viewHandle);
+onUnmounted(registerAbuilderViewHandle(viewHandle));
+
+watch(
+  [canvasEl, allElements, layers, activeLayerId, () => props.nameSpace],
+  () => {
+    registerPreviewSnapshotProvider(async () =>
+      captureEditorPreviewSnapshot({
+        canvasRoot: canvasEl.value,
+        allElements: allElements.value,
+        layers: layers.value,
+        activeLayerId: activeLayerId.value,
+        outputScale: readOutputScale(props.nameSpace),
+      })
+    );
+  },
+  { immediate: true }
+);
+onUnmounted(() => registerPreviewSnapshotProvider(null));
+
 const blueprintLifecycleToken = computed(() => {
   const doc = blueprintGraph.value.document;
   const nodes = doc.nodes;
@@ -646,7 +691,10 @@ function handleApiCollectionUploadStart(info: {
   fileNames: string[];
   count: number;
 }) {
-  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, {
+    ...info,
+    nameSpace: props.nameSpace ?? null,
+  });
 }
 
 function handleApiCollectionUploadSuccess(info: {
@@ -657,7 +705,10 @@ function handleApiCollectionUploadSuccess(info: {
     persistLocal: boolean;
   }>;
 }) {
-  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+  emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, {
+    ...info,
+    nameSpace: props.nameSpace ?? null,
+  });
 }
 
 function handleApiCollectionSync(record: {
@@ -807,9 +858,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
 <template>
   <Layout class="vue-view-panel h-screen overflow-hidden" :class="props.class" :key="locale">
-    <Layout.Header class="flex h-auto flex-wrap items-center gap-2 bg-[#001529] px-3 py-2">
+    <Layout.Header class="flex h-10 flex-wrap items-center gap-2 border-b border-border/70 !bg-background/80 px-3 py-0 leading-none backdrop-blur-md">
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.file") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.file") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item @click="handleExport">{{ t("panel.menubar.exportPanelJson") }}</Menu.Item>
@@ -818,7 +869,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.edit") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.edit") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item :disabled="!canUndo" @click="undo">{{ t("panel.menubar.undo") }}</Menu.Item>
@@ -834,7 +885,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.blueprint") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.blueprint") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item @click="openBlueprintExport">{{ t("panel.menubar.exportBlueprint") }}</Menu.Item>
@@ -857,7 +908,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         @preview-project="openOnlinePreviewForProject"
       />
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.settings") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.settings") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.ItemGroup :title="t('panel.theme.language')">
@@ -879,7 +930,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.theme.language") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.theme.language") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'zh-CN' }" @click="setLocale('zh-CN')">{{ t("panel.theme.zhCN") }}</Menu.Item>
@@ -914,12 +965,12 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
       <Layout.Content class="relative min-h-0 min-w-0">
         <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">
+          <div class="flex flex-wrap items-center gap-2 border-b border-border/60 bg-muted/15 px-3 py-1.5">
             <Input
               :value="displayProductName"
               size="small"
               @update:value="(value: string) => (productName = value)"
-              class="w-[200px]"
+              class="w-[180px]"
               :placeholder="t('panel.menubar.productName')"
             />
             <span class="text-xs text-gray-500">{{ t("panel.menubar.zoom") }}</span>
@@ -933,10 +984,35 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             />
             <Tag v-if="activeLayer">{{ activeLayer.name }}</Tag>
             <Tag color="blue">{{ t("panel.menubar.selectedCount", { count: selectedIds.length }) }}</Tag>
-            <div data-blueprint-toggle class="ml-auto flex items-center gap-2">
-              <span class="text-xs text-gray-500">{{ t("panel.menubar.blueprint") }}</span>
-              <Switch v-model:checked="blueprintOpen" size="small" />
-            </div>
+            <Tooltip :title="t('panel.menubar.showBlueprintPanel')">
+              <button
+                type="button"
+                data-blueprint-toggle
+                class="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors"
+                :class="
+                  blueprintOpen
+                    ? 'border-primary/50 bg-primary/15 text-primary'
+                    : 'border-border/70 bg-background/80 text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                "
+                :aria-pressed="blueprintOpen"
+                :aria-label="t('panel.menubar.showBlueprintPanel')"
+                @click="blueprintOpen = !blueprintOpen"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  :stroke-width="blueprintOpen ? 2.2 : 2"
+                >
+                  <rect x="3" y="4" width="18" height="16" rx="2" />
+                  <circle cx="8" cy="10" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <circle cx="16" cy="10" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <circle cx="12" cy="16" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <path d="M9.2 10.8 10.8 14.2M14.8 10.8 13.2 14.2" />
+                </svg>
+              </button>
+            </Tooltip>
           </div>
 
           <WorkspaceStageSplit
@@ -1005,63 +1081,112 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             </PanelCanvas>
           </WorkspaceStageSplit>
 
-          <div class="border-t bg-white px-2 py-2">
-            <div class="mb-2 flex flex-wrap items-center gap-2">
-              <span class="text-xs font-semibold text-gray-500">{{ t("panel.layers.title") }}</span>
-              <Button size="small" @click="addLayer()">{{ t("panel.layers.addShort") }}</Button>
-              <Button size="small" :disabled="!canMergeLayers" @click="isMergingLayers = true">{{ t("panel.layers.mergeShort") }}</Button>
+          <div class="border-t border-border/50 bg-muted/5 px-1.5 py-0.5">
+            <div class="flex min-w-0 flex-wrap items-center gap-1">
+              <Tooltip :title="t('panel.layers.title')">
+                <span class="inline-flex h-6 items-center px-1 text-[11px] font-semibold text-muted-foreground">
+                  {{ t("panel.layers.title") }}
+                </span>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.add')">
+                <Button size="small" class="!h-6 !px-2 !text-[11px]" @click="addLayer()">
+                  {{ t("panel.layers.addShort") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="canMergeLayers ? t('panel.layers.merge') : t('panel.layers.mergeNeedTwo')">
+                <Button
+                  size="small"
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="!canMergeLayers"
+                  @click="isMergingLayers = true"
+                >
+                  {{ t("panel.layers.mergeShort") }}
+                </Button>
+              </Tooltip>
+              <Tabs
+                size="small"
+                class="min-w-0 flex-1"
+                :active-key="activeLayerId"
+                type="card"
+                @update:active-key="(k: string | number) => setActiveLayer(String(k))"
+              >
+                <Tabs.TabPane v-for="layer in layers" :key="layer.id">
+                  <template #tab>
+                    <span class="inline-flex max-w-[110px] items-center gap-1 text-[11px] font-medium">
+                      <span class="truncate">{{ layer.name }}</span>
+                      <Tag v-if="layer.isPrimary" color="green" class="!m-0 !px-1 !text-[10px]">
+                        {{ t("panel.layers.primary") }}
+                      </Tag>
+                    </span>
+                  </template>
+                </Tabs.TabPane>
+              </Tabs>
             </div>
-            <Tabs
-              size="small"
-              :active-key="activeLayerId"
-              type="card"
-              @update:active-key="(k: string | number) => setActiveLayer(String(k))"
+
+            <div
+              v-if="activeLayer"
+              class="mt-1 flex flex-wrap items-center gap-1 rounded-md border border-border/50 bg-card/80 px-1.5 py-0.5 text-[11px]"
             >
-              <Tabs.TabPane v-for="layer in layers" :key="layer.id">
-                <template #tab>
-                  <span class="inline-flex items-center gap-1">
-                    {{ layer.name }}
-                    <Tag v-if="layer.isMapping" color="blue" class="!m-0">{{ t("panel.layers.mapping") }}</Tag>
-                    <Tag v-if="layer.isPrimary" color="green" class="!m-0">{{ t("panel.layers.primary") }}</Tag>
-                  </span>
-                </template>
-              </Tabs.TabPane>
-            </Tabs>
-
-            <div v-if="activeLayer" class="mt-2 flex flex-wrap items-center gap-2 rounded border px-2 py-1.5 text-xs">
               <template v-if="editingLayerId === activeLayer.id">
                 <Input
                   v-model:value="editingLayerName"
                   size="small"
-                  class="w-40"
+                  class="!h-6 w-28"
                   @press-enter="commitRenameLayer"
                 />
-                <Button size="small" type="primary" @click="commitRenameLayer">{{ t("common.ok") }}</Button>
+                <Tooltip :title="t('common.ok')">
+                  <Button size="small" type="primary" class="!h-6 !px-2" @click="commitRenameLayer">
+                    {{ t("common.ok") }}
+                  </Button>
+                </Tooltip>
               </template>
               <template v-else>
-                <span class="font-medium">{{ activeLayer.name }}</span>
-                <Button size="small" type="link" @click="startRenameLayer(activeLayer.id, activeLayer.name)">{{ t("panel.layers.renameShort") }}</Button>
+                <span class="max-w-[100px] truncate font-semibold">{{ activeLayer.name }}</span>
+                <Tooltip :title="t('panel.layers.rename')">
+                  <Button
+                    size="small"
+                    type="link"
+                    class="!h-6 !px-1 !text-[11px]"
+                    @click="startRenameLayer(activeLayer.id, activeLayer.name)"
+                  >
+                    {{ t("panel.layers.renameShort") }}
+                  </Button>
+                </Tooltip>
               </template>
-              <Button size="small" @click="toggleLayerLock(activeLayer.id)">
-                {{ activeLayer.locked ? t("panel.layers.unlockShort") : t("panel.layers.lockShort") }}
-              </Button>
-              <Checkbox
-                :checked="Boolean(activeLayer.mergeSelected)"
-                @change="() => toggleLayerMergeSelected(activeLayer!.id)"
-              >
-                {{ t("panel.layers.joinMerge") }}
-              </Checkbox>
-              <Button size="small" :disabled="activeLayer.isPrimary" @click="setPrimaryLayer(activeLayer.id)">
-                {{ t("panel.layers.setPrimary") }}
-              </Button>
-              <Button
-                size="small"
-                danger
-                :disabled="!activeLayer.editable"
-                @click="deleteLayer(activeLayer.id)"
-              >
-                {{ t("panel.layers.delete") }}
-              </Button>
+              <Tooltip :title="activeLayer.locked ? t('panel.layers.unlock') : t('panel.layers.lock')">
+                <Button size="small" class="!h-6 !px-2 !text-[11px]" @click="toggleLayerLock(activeLayer.id)">
+                  {{ activeLayer.locked ? t("panel.layers.unlockShort") : t("panel.layers.lockShort") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.joinMerge')">
+                <Checkbox
+                  :checked="Boolean(activeLayer.mergeSelected)"
+                  @change="() => toggleLayerMergeSelected(activeLayer!.id)"
+                >
+                  <span class="text-[11px]">{{ t("panel.layers.joinMerge") }}</span>
+                </Checkbox>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.setPrimaryHint')">
+                <Button
+                  size="small"
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="activeLayer.isPrimary"
+                  @click="setPrimaryLayer(activeLayer.id)"
+                >
+                  {{ t("panel.layers.setPrimary") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.delete')">
+                <Button
+                  size="small"
+                  danger
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="!activeLayer.editable"
+                  @click="deleteLayer(activeLayer.id)"
+                >
+                  {{ t("panel.layers.delete") }}
+                </Button>
+              </Tooltip>
             </div>
           </div>
         </div>

package/src/panel/components/ElementsLayer.vue

@@ -189,7 +189,7 @@ function hasViewEvent(el: PanelElement) {
     :class="[
       'absolute select-none',
       previewMode ? '' : 'rv-selectable',
-      !previewMode && selectedIds.includes(el.id) ? 'ring-2 ring-blue-500/90 ring-offset-0' : '',
+      !previewMode && selectedIds.includes(el.id) ? 'rv-node-selected' : '',
       hasViewEvent(el) ? 'cursor-pointer' : '',
     ]"
     :data-element-id="el.id"