@djvlc/sandbox 1.0.0 → 1.0.1

package/dist/index.cjs

@@ -51,6 +51,7 @@ var MessageType = /* @__PURE__ */ ((MessageType2) => {
   MessageType2["COMPONENT_CONTEXT_MENU"] = "component_context_menu";
   MessageType2["COMPONENT_DRAG_START"] = "component_drag_start";
   MessageType2["COMPONENT_DRAG_END"] = "component_drag_end";
+  MessageType2["COMPONENT_DROP"] = "component_drop";
   MessageType2["ERROR"] = "error";
   MessageType2["LOG"] = "log";
   return MessageType2;
@@ -290,6 +291,14 @@ var SandboxClient = class {
     this.runtime = null;
     this.selectedComponents = /* @__PURE__ */ new Set();
     this.hoveredComponent = null;
+    this.dragState = {
+      isDragging: false,
+      draggedComponentId: null,
+      draggedElement: null,
+      dropTarget: null,
+      dropPosition: null,
+      dropIndicator: null
+    };
     // ==================== 私有方法 ====================
     this.handleMessage = async (event) => {
       const message = event.data;
@@ -351,6 +360,12 @@ var SandboxClient = class {
     this.options = {
       targetOrigin: "*",
       debug: false,
+      enableDrag: true,
+      dragOptions: {
+        dragOpacity: 0.5,
+        showDropIndicator: true,
+        dropIndicatorColor: "#1890ff"
+      },
       ...options
     };
   }
@@ -447,17 +462,19 @@ var SandboxClient = class {
    * 注入编辑器样式
    */
   injectEditorStyles() {
+    const indicatorColor = this.options.dragOptions?.dropIndicatorColor || "#1890ff";
     const style = document.createElement("style");
+    style.id = "djvlc-editor-styles";
     style.textContent = `
       /* \u9009\u4E2D\u72B6\u6001 */
       [data-component-id].djvlc-selected {
-        outline: 2px solid #1890ff !important;
+        outline: 2px solid ${indicatorColor} !important;
         outline-offset: 2px;
       }
 
       /* \u60AC\u505C\u72B6\u6001 */
       [data-component-id].djvlc-hovered {
-        outline: 1px dashed #1890ff !important;
+        outline: 1px dashed ${indicatorColor} !important;
         outline-offset: 1px;
       }
 
@@ -471,39 +488,300 @@ var SandboxClient = class {
         pointer-events: auto;
       }
 
+      /* \u53EF\u62D6\u62FD\u72B6\u6001 */
+      [data-component-id][draggable="true"] {
+        cursor: grab;
+      }
+
+      [data-component-id][draggable="true"]:active {
+        cursor: grabbing;
+      }
+
+      /* \u62D6\u62FD\u4E2D\u72B6\u6001 */
+      [data-component-id].djvlc-dragging {
+        opacity: ${this.options.dragOptions?.dragOpacity || 0.5};
+      }
+
+      /* \u653E\u7F6E\u76EE\u6807\u72B6\u6001 */
+      [data-component-id].djvlc-drop-target {
+        outline: 2px dashed ${indicatorColor} !important;
+        outline-offset: 4px;
+      }
+
       /* \u62D6\u62FD\u5360\u4F4D\u7B26 */
       .djvlc-drop-indicator {
         position: absolute;
-        background: #1890ff;
-        opacity: 0.5;
+        background: ${indicatorColor};
+        opacity: 0.8;
         pointer-events: none;
         z-index: 10000;
+        transition: all 0.1s ease;
       }
 
       .djvlc-drop-indicator.horizontal {
         height: 4px;
         width: 100%;
+        border-radius: 2px;
       }
 
       .djvlc-drop-indicator.vertical {
         width: 4px;
         height: 100%;
+        border-radius: 2px;
+      }
+
+      /* \u653E\u7F6E\u63D0\u793A\u7BAD\u5934 */
+      .djvlc-drop-indicator::before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: ${indicatorColor};
+        border-radius: 50%;
+        left: -4px;
+        top: -2px;
+      }
+
+      .djvlc-drop-indicator::after {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: ${indicatorColor};
+        border-radius: 50%;
+        right: -4px;
+        top: -2px;
       }
     `;
     document.head.appendChild(style);
   }
+  /**
+   * 初始化拖拽事件监听
+   */
+  initDragEventListeners() {
+    if (!this.options.enableDrag) return;
+    this.makeComponentsDraggable();
+    document.addEventListener("dragstart", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (!componentEl) return;
+      const componentId = componentEl.getAttribute("data-component-id");
+      if (!componentId) return;
+      this.dragState.isDragging = true;
+      this.dragState.draggedComponentId = componentId;
+      this.dragState.draggedElement = componentEl;
+      componentEl.classList.add("djvlc-dragging");
+      e.dataTransfer?.setData("text/plain", componentId);
+      e.dataTransfer?.setData("application/json", JSON.stringify({
+        componentId,
+        componentType: componentEl.getAttribute("data-component-type")
+      }));
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+      }
+      this.log("debug", "Drag start:", componentId);
+    });
+    document.addEventListener("dragover", (e) => {
+      if (!this.dragState.isDragging) return;
+      e.preventDefault();
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (!componentEl || componentEl === this.dragState.draggedElement) {
+        this.hideDropIndicator();
+        return;
+      }
+      const componentId = componentEl.getAttribute("data-component-id");
+      if (!componentId) return;
+      const rect = componentEl.getBoundingClientRect();
+      const y = e.clientY;
+      const threshold = rect.height / 3;
+      let position;
+      if (y < rect.top + threshold) {
+        position = "before";
+      } else if (y > rect.bottom - threshold) {
+        position = "after";
+      } else {
+        position = "inside";
+      }
+      if (this.dragState.dropTarget !== componentEl || this.dragState.dropPosition !== position) {
+        this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
+        this.dragState.dropTarget = componentEl;
+        this.dragState.dropPosition = position;
+        if (position === "inside") {
+          componentEl.classList.add("djvlc-drop-target");
+          this.hideDropIndicator();
+        } else {
+          componentEl.classList.remove("djvlc-drop-target");
+          this.showDropIndicator(componentEl, position);
+        }
+      }
+    });
+    document.addEventListener("dragleave", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (componentEl && componentEl === this.dragState.dropTarget) {
+        const relatedTarget = e.relatedTarget;
+        if (!relatedTarget || !componentEl.contains(relatedTarget)) {
+          componentEl.classList.remove("djvlc-drop-target");
+        }
+      }
+    });
+    document.addEventListener("drop", (e) => {
+      if (!this.dragState.isDragging) return;
+      e.preventDefault();
+      const { draggedComponentId, dropTarget, dropPosition } = this.dragState;
+      if (draggedComponentId && dropTarget && dropPosition) {
+        const targetComponentId = dropTarget.getAttribute("data-component-id");
+        if (targetComponentId && targetComponentId !== draggedComponentId) {
+          this.log("info", "Drop:", draggedComponentId, dropPosition, targetComponentId);
+          this.send("component_drop" /* COMPONENT_DROP */, {
+            componentId: draggedComponentId,
+            targetComponentId,
+            position: dropPosition
+          });
+        }
+      }
+      this.endDrag();
+    });
+    document.addEventListener("dragend", () => {
+      this.endDrag();
+    });
+  }
+  /**
+   * 使组件可拖拽
+   */
+  makeComponentsDraggable() {
+    const components = document.querySelectorAll("[data-component-id]");
+    components.forEach((el) => {
+      el.draggable = true;
+    });
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            if (node.hasAttribute("data-component-id")) {
+              node.draggable = true;
+            }
+            node.querySelectorAll("[data-component-id]").forEach((el) => {
+              el.draggable = true;
+            });
+          }
+        });
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  /**
+   * 显示放置指示器
+   */
+  showDropIndicator(target, position) {
+    if (!this.options.dragOptions?.showDropIndicator) return;
+    let indicator = this.dragState.dropIndicator;
+    if (!indicator) {
+      indicator = document.createElement("div");
+      indicator.className = "djvlc-drop-indicator horizontal";
+      document.body.appendChild(indicator);
+      this.dragState.dropIndicator = indicator;
+    }
+    const rect = target.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    indicator.style.left = `${rect.left + scrollLeft}px`;
+    indicator.style.width = `${rect.width}px`;
+    if (position === "before") {
+      indicator.style.top = `${rect.top + scrollTop - 2}px`;
+    } else {
+      indicator.style.top = `${rect.bottom + scrollTop - 2}px`;
+    }
+    indicator.style.display = "block";
+  }
+  /**
+   * 隐藏放置指示器
+   */
+  hideDropIndicator() {
+    if (this.dragState.dropIndicator) {
+      this.dragState.dropIndicator.style.display = "none";
+    }
+  }
+  /**
+   * 结束拖拽
+   */
+  endDrag() {
+    this.dragState.draggedElement?.classList.remove("djvlc-dragging");
+    this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
+    this.hideDropIndicator();
+    this.dragState = {
+      isDragging: false,
+      draggedComponentId: null,
+      draggedElement: null,
+      dropTarget: null,
+      dropPosition: null,
+      dropIndicator: this.dragState.dropIndicator
+      // 保留 indicator 元素
+    };
+  }
   async handleInit(data) {
     this.log("info", "Init with config:", data);
+    void data;
+    if (this.runtime) {
+      try {
+        await this.runtime.init();
+      } catch (error) {
+        this.log("error", "Failed to init runtime:", error);
+        throw error;
+      }
+    }
   }
   async handleLoadPage(data) {
     this.log("info", "Load page:", data.pageUid);
+    if (!this.runtime) {
+      throw new Error("Runtime not set");
+    }
+    try {
+      await this.runtime.load();
+      await this.runtime.render();
+      this.syncState();
+    } catch (error) {
+      this.log("error", "Failed to load page:", error);
+      throw error;
+    }
   }
   async handleUpdateSchema(data) {
     this.log("info", "Update schema", data.fullUpdate ? "(full)" : "(partial)");
+    if (!this.runtime) {
+      throw new Error("Runtime not set");
+    }
+    try {
+      if (data.fullUpdate) {
+        await this.runtime.load();
+        await this.runtime.render();
+      } else {
+        await this.runtime.load();
+        await this.runtime.render();
+      }
+      this.syncState();
+    } catch (error) {
+      this.log("error", "Failed to update schema:", error);
+      throw error;
+    }
   }
   async handleRefresh() {
     this.log("info", "Refresh page");
-    window.location.reload();
+    if (this.runtime) {
+      try {
+        await this.runtime.load();
+        await this.runtime.render();
+        this.syncState();
+      } catch (error) {
+        this.log("error", "Failed to refresh:", error);
+        window.location.reload();
+      }
+    } else {
+      window.location.reload();
+    }
   }
   handleSelectComponent(data) {
     if (data.componentId) {
@@ -539,13 +817,20 @@ var SandboxClient = class {
     this.runtime?.updateComponent(data.componentId, data.props || {});
   }
   handleAddComponent(data) {
-    this.log("info", "Add component:", data.component.type);
+    this.log("info", "Add component:", data.component.componentType);
+    this.log("warn", "addComponent not supported, need to reload page");
   }
   handleMoveComponent(data) {
     this.log("info", "Move component:", data.componentId, "to", data.targetIndex);
+    this.log("warn", "moveComponent not supported, need to reload page");
   }
   handleDeleteComponent(data) {
     this.log("info", "Delete component:", data.componentId);
+    this.log("warn", "deleteComponent not supported, need to reload page");
+    this.selectedComponents.delete(data.componentId);
+    if (this.hoveredComponent === data.componentId) {
+      this.hoveredComponent = null;
+    }
   }
   handleSyncVariables(data) {
     Object.entries(data.variables).forEach(([key, value]) => {
@@ -564,11 +849,12 @@ var SandboxClient = class {
     });
   }
   syncState() {
+    const runtimeState = this.runtime?.getState();
     const state = {
-      phase: this.runtime?.getState().phase || "idle",
-      page: this.runtime?.getState().page ? {
-        pageUid: this.runtime.getState().page.pageUid,
-        pageVersionId: this.runtime.getState().page.pageVersionId
+      phase: runtimeState?.phase || "idle",
+      page: runtimeState?.page ? {
+        pageUid: runtimeState.page.pageUid,
+        pageVersionId: runtimeState.page.pageVersionId
       } : void 0,
       selectedComponents: Array.from(this.selectedComponents),
       hoveredComponent: this.hoveredComponent

package/dist/index.d.cts

@@ -1,4 +1,5 @@
-import { PageSchema, ComponentInstance } from '@djvlc/contracts-types';
+import { PageSchema, ComponentNode } from '@djvlc/contracts-types';
+import { DjvlcRuntime } from '@djvlc/runtime-core';
 
 /**
  * 沙箱通信协议
@@ -28,6 +29,7 @@ declare enum MessageType {
     COMPONENT_CONTEXT_MENU = "component_context_menu",
     COMPONENT_DRAG_START = "component_drag_start",
     COMPONENT_DRAG_END = "component_drag_end",
+    COMPONENT_DROP = "component_drop",
     ERROR = "error",
     LOG = "log"
 }
@@ -124,14 +126,14 @@ interface UpdateComponentMessageData {
     /** 更新的样式 */
     style?: Record<string, unknown>;
     /** 完整组件实例 */
-    component?: ComponentInstance;
+    component?: ComponentNode;
 }
 /**
  * Add Component 消息数据
  */
 interface AddComponentMessageData {
     /** 组件实例 */
-    component: ComponentInstance;
+    component: ComponentNode;
     /** 父组件 ID */
     parentId?: string;
     /** 插入位置索引 */
@@ -187,6 +189,17 @@ interface SyncStateMessageData {
     /** 悬停组件 */
     hoveredComponent: string | null;
 }
+/**
+ * Component Drop 消息数据
+ */
+interface ComponentDropMessageData {
+    /** 被拖拽的组件 ID */
+    componentId: string;
+    /** 目标组件 ID */
+    targetComponentId: string;
+    /** 放置位置 */
+    position: 'before' | 'after' | 'inside';
+}
 /**
  * Error 消息数据
  */
@@ -329,20 +342,7 @@ declare class SandboxHost {
  * 沙箱客户端
  * 在 iframe 预览中使用，响应 Editor 的控制
  */
-/**
- * 运行时接口（避免直接依赖 @djvlc/runtime-core）
- */
-interface RuntimeLike {
-    getState(): {
-        phase: string;
-        page: {
-            pageUid: string;
-            pageVersionId: string;
-        } | null;
-    };
-    updateComponent(componentId: string, props: Record<string, unknown>): void;
-    setVariable(key: string, value: unknown): void;
-}
+
 /**
  * 沙箱客户端配置
  */
@@ -351,6 +351,17 @@ interface SandboxClientOptions {
     targetOrigin?: string;
     /** 调试模式 */
     debug?: boolean;
+    /** 是否启用拖拽 */
+    enableDrag?: boolean;
+    /** 拖拽配置 */
+    dragOptions?: {
+        /** 拖拽时的透明度 */
+        dragOpacity?: number;
+        /** 是否显示放置指示器 */
+        showDropIndicator?: boolean;
+        /** 放置指示器颜色 */
+        dropIndicatorColor?: string;
+    };
 }
 /**
  * 沙箱客户端
@@ -360,11 +371,12 @@ declare class SandboxClient {
     private runtime;
     private selectedComponents;
     private hoveredComponent;
+    private dragState;
     constructor(options?: SandboxClientOptions);
     /**
      * 设置运行时实例
      */
-    setRuntime(runtime: RuntimeLike): void;
+    setRuntime(runtime: DjvlcRuntime): void;
     /**
      * 连接到父窗口
      */
@@ -381,6 +393,26 @@ declare class SandboxClient {
      * 注入编辑器样式
      */
     injectEditorStyles(): void;
+    /**
+     * 初始化拖拽事件监听
+     */
+    initDragEventListeners(): void;
+    /**
+     * 使组件可拖拽
+     */
+    private makeComponentsDraggable;
+    /**
+     * 显示放置指示器
+     */
+    private showDropIndicator;
+    /**
+     * 隐藏放置指示器
+     */
+    private hideDropIndicator;
+    /**
+     * 结束拖拽
+     */
+    private endDrag;
     private handleMessage;
     private handleInit;
     private handleLoadPage;
@@ -403,4 +435,4 @@ declare class SandboxClient {
     private log;
 }
 
-export { type AddComponentMessageData, type BaseMessage, type ComponentEventMessageData, type DeleteComponentMessageData, type ErrorMessageData, type HoverComponentMessageData, type InitMessageData, type LoadPageMessageData, MessageType, type MoveComponentMessageData, type ReadyMessageData, type ResponseMessage, SandboxClient, type SandboxClientOptions, SandboxHost, type SandboxHostOptions, type SelectComponentMessageData, type SyncStateMessageData, type UpdateComponentMessageData, type UpdateSchemaMessageData, createMessage, createResponse, generateMessageId, isDjvlcMessage };
+export { type AddComponentMessageData, type BaseMessage, type ComponentDropMessageData, type ComponentEventMessageData, type DeleteComponentMessageData, type ErrorMessageData, type HoverComponentMessageData, type InitMessageData, type LoadPageMessageData, MessageType, type MoveComponentMessageData, type ReadyMessageData, type ResponseMessage, SandboxClient, type SandboxClientOptions, SandboxHost, type SandboxHostOptions, type SelectComponentMessageData, type SyncStateMessageData, type UpdateComponentMessageData, type UpdateSchemaMessageData, createMessage, createResponse, generateMessageId, isDjvlcMessage };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { PageSchema, ComponentInstance } from '@djvlc/contracts-types';
+import { PageSchema, ComponentNode } from '@djvlc/contracts-types';
+import { DjvlcRuntime } from '@djvlc/runtime-core';
 
 /**
  * 沙箱通信协议
@@ -28,6 +29,7 @@ declare enum MessageType {
     COMPONENT_CONTEXT_MENU = "component_context_menu",
     COMPONENT_DRAG_START = "component_drag_start",
     COMPONENT_DRAG_END = "component_drag_end",
+    COMPONENT_DROP = "component_drop",
     ERROR = "error",
     LOG = "log"
 }
@@ -124,14 +126,14 @@ interface UpdateComponentMessageData {
     /** 更新的样式 */
     style?: Record<string, unknown>;
     /** 完整组件实例 */
-    component?: ComponentInstance;
+    component?: ComponentNode;
 }
 /**
  * Add Component 消息数据
  */
 interface AddComponentMessageData {
     /** 组件实例 */
-    component: ComponentInstance;
+    component: ComponentNode;
     /** 父组件 ID */
     parentId?: string;
     /** 插入位置索引 */
@@ -187,6 +189,17 @@ interface SyncStateMessageData {
     /** 悬停组件 */
     hoveredComponent: string | null;
 }
+/**
+ * Component Drop 消息数据
+ */
+interface ComponentDropMessageData {
+    /** 被拖拽的组件 ID */
+    componentId: string;
+    /** 目标组件 ID */
+    targetComponentId: string;
+    /** 放置位置 */
+    position: 'before' | 'after' | 'inside';
+}
 /**
  * Error 消息数据
  */
@@ -329,20 +342,7 @@ declare class SandboxHost {
  * 沙箱客户端
  * 在 iframe 预览中使用，响应 Editor 的控制
  */
-/**
- * 运行时接口（避免直接依赖 @djvlc/runtime-core）
- */
-interface RuntimeLike {
-    getState(): {
-        phase: string;
-        page: {
-            pageUid: string;
-            pageVersionId: string;
-        } | null;
-    };
-    updateComponent(componentId: string, props: Record<string, unknown>): void;
-    setVariable(key: string, value: unknown): void;
-}
+
 /**
  * 沙箱客户端配置
  */
@@ -351,6 +351,17 @@ interface SandboxClientOptions {
     targetOrigin?: string;
     /** 调试模式 */
     debug?: boolean;
+    /** 是否启用拖拽 */
+    enableDrag?: boolean;
+    /** 拖拽配置 */
+    dragOptions?: {
+        /** 拖拽时的透明度 */
+        dragOpacity?: number;
+        /** 是否显示放置指示器 */
+        showDropIndicator?: boolean;
+        /** 放置指示器颜色 */
+        dropIndicatorColor?: string;
+    };
 }
 /**
  * 沙箱客户端
@@ -360,11 +371,12 @@ declare class SandboxClient {
     private runtime;
     private selectedComponents;
     private hoveredComponent;
+    private dragState;
     constructor(options?: SandboxClientOptions);
     /**
      * 设置运行时实例
      */
-    setRuntime(runtime: RuntimeLike): void;
+    setRuntime(runtime: DjvlcRuntime): void;
     /**
      * 连接到父窗口
      */
@@ -381,6 +393,26 @@ declare class SandboxClient {
      * 注入编辑器样式
      */
     injectEditorStyles(): void;
+    /**
+     * 初始化拖拽事件监听
+     */
+    initDragEventListeners(): void;
+    /**
+     * 使组件可拖拽
+     */
+    private makeComponentsDraggable;
+    /**
+     * 显示放置指示器
+     */
+    private showDropIndicator;
+    /**
+     * 隐藏放置指示器
+     */
+    private hideDropIndicator;
+    /**
+     * 结束拖拽
+     */
+    private endDrag;
     private handleMessage;
     private handleInit;
     private handleLoadPage;
@@ -403,4 +435,4 @@ declare class SandboxClient {
     private log;
 }
 
-export { type AddComponentMessageData, type BaseMessage, type ComponentEventMessageData, type DeleteComponentMessageData, type ErrorMessageData, type HoverComponentMessageData, type InitMessageData, type LoadPageMessageData, MessageType, type MoveComponentMessageData, type ReadyMessageData, type ResponseMessage, SandboxClient, type SandboxClientOptions, SandboxHost, type SandboxHostOptions, type SelectComponentMessageData, type SyncStateMessageData, type UpdateComponentMessageData, type UpdateSchemaMessageData, createMessage, createResponse, generateMessageId, isDjvlcMessage };
+export { type AddComponentMessageData, type BaseMessage, type ComponentDropMessageData, type ComponentEventMessageData, type DeleteComponentMessageData, type ErrorMessageData, type HoverComponentMessageData, type InitMessageData, type LoadPageMessageData, MessageType, type MoveComponentMessageData, type ReadyMessageData, type ResponseMessage, SandboxClient, type SandboxClientOptions, SandboxHost, type SandboxHostOptions, type SelectComponentMessageData, type SyncStateMessageData, type UpdateComponentMessageData, type UpdateSchemaMessageData, createMessage, createResponse, generateMessageId, isDjvlcMessage };

package/dist/index.js

@@ -19,6 +19,7 @@ var MessageType = /* @__PURE__ */ ((MessageType2) => {
   MessageType2["COMPONENT_CONTEXT_MENU"] = "component_context_menu";
   MessageType2["COMPONENT_DRAG_START"] = "component_drag_start";
   MessageType2["COMPONENT_DRAG_END"] = "component_drag_end";
+  MessageType2["COMPONENT_DROP"] = "component_drop";
   MessageType2["ERROR"] = "error";
   MessageType2["LOG"] = "log";
   return MessageType2;
@@ -258,6 +259,14 @@ var SandboxClient = class {
     this.runtime = null;
     this.selectedComponents = /* @__PURE__ */ new Set();
     this.hoveredComponent = null;
+    this.dragState = {
+      isDragging: false,
+      draggedComponentId: null,
+      draggedElement: null,
+      dropTarget: null,
+      dropPosition: null,
+      dropIndicator: null
+    };
     // ==================== 私有方法 ====================
     this.handleMessage = async (event) => {
       const message = event.data;
@@ -319,6 +328,12 @@ var SandboxClient = class {
     this.options = {
       targetOrigin: "*",
       debug: false,
+      enableDrag: true,
+      dragOptions: {
+        dragOpacity: 0.5,
+        showDropIndicator: true,
+        dropIndicatorColor: "#1890ff"
+      },
       ...options
     };
   }
@@ -415,17 +430,19 @@ var SandboxClient = class {
    * 注入编辑器样式
    */
   injectEditorStyles() {
+    const indicatorColor = this.options.dragOptions?.dropIndicatorColor || "#1890ff";
     const style = document.createElement("style");
+    style.id = "djvlc-editor-styles";
     style.textContent = `
       /* \u9009\u4E2D\u72B6\u6001 */
       [data-component-id].djvlc-selected {
-        outline: 2px solid #1890ff !important;
+        outline: 2px solid ${indicatorColor} !important;
         outline-offset: 2px;
       }
 
       /* \u60AC\u505C\u72B6\u6001 */
       [data-component-id].djvlc-hovered {
-        outline: 1px dashed #1890ff !important;
+        outline: 1px dashed ${indicatorColor} !important;
         outline-offset: 1px;
       }
 
@@ -439,39 +456,300 @@ var SandboxClient = class {
         pointer-events: auto;
       }
 
+      /* \u53EF\u62D6\u62FD\u72B6\u6001 */
+      [data-component-id][draggable="true"] {
+        cursor: grab;
+      }
+
+      [data-component-id][draggable="true"]:active {
+        cursor: grabbing;
+      }
+
+      /* \u62D6\u62FD\u4E2D\u72B6\u6001 */
+      [data-component-id].djvlc-dragging {
+        opacity: ${this.options.dragOptions?.dragOpacity || 0.5};
+      }
+
+      /* \u653E\u7F6E\u76EE\u6807\u72B6\u6001 */
+      [data-component-id].djvlc-drop-target {
+        outline: 2px dashed ${indicatorColor} !important;
+        outline-offset: 4px;
+      }
+
       /* \u62D6\u62FD\u5360\u4F4D\u7B26 */
       .djvlc-drop-indicator {
         position: absolute;
-        background: #1890ff;
-        opacity: 0.5;
+        background: ${indicatorColor};
+        opacity: 0.8;
         pointer-events: none;
         z-index: 10000;
+        transition: all 0.1s ease;
       }
 
       .djvlc-drop-indicator.horizontal {
         height: 4px;
         width: 100%;
+        border-radius: 2px;
       }
 
       .djvlc-drop-indicator.vertical {
         width: 4px;
         height: 100%;
+        border-radius: 2px;
+      }
+
+      /* \u653E\u7F6E\u63D0\u793A\u7BAD\u5934 */
+      .djvlc-drop-indicator::before {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: ${indicatorColor};
+        border-radius: 50%;
+        left: -4px;
+        top: -2px;
+      }
+
+      .djvlc-drop-indicator::after {
+        content: '';
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: ${indicatorColor};
+        border-radius: 50%;
+        right: -4px;
+        top: -2px;
       }
     `;
     document.head.appendChild(style);
   }
+  /**
+   * 初始化拖拽事件监听
+   */
+  initDragEventListeners() {
+    if (!this.options.enableDrag) return;
+    this.makeComponentsDraggable();
+    document.addEventListener("dragstart", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (!componentEl) return;
+      const componentId = componentEl.getAttribute("data-component-id");
+      if (!componentId) return;
+      this.dragState.isDragging = true;
+      this.dragState.draggedComponentId = componentId;
+      this.dragState.draggedElement = componentEl;
+      componentEl.classList.add("djvlc-dragging");
+      e.dataTransfer?.setData("text/plain", componentId);
+      e.dataTransfer?.setData("application/json", JSON.stringify({
+        componentId,
+        componentType: componentEl.getAttribute("data-component-type")
+      }));
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+      }
+      this.log("debug", "Drag start:", componentId);
+    });
+    document.addEventListener("dragover", (e) => {
+      if (!this.dragState.isDragging) return;
+      e.preventDefault();
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (!componentEl || componentEl === this.dragState.draggedElement) {
+        this.hideDropIndicator();
+        return;
+      }
+      const componentId = componentEl.getAttribute("data-component-id");
+      if (!componentId) return;
+      const rect = componentEl.getBoundingClientRect();
+      const y = e.clientY;
+      const threshold = rect.height / 3;
+      let position;
+      if (y < rect.top + threshold) {
+        position = "before";
+      } else if (y > rect.bottom - threshold) {
+        position = "after";
+      } else {
+        position = "inside";
+      }
+      if (this.dragState.dropTarget !== componentEl || this.dragState.dropPosition !== position) {
+        this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
+        this.dragState.dropTarget = componentEl;
+        this.dragState.dropPosition = position;
+        if (position === "inside") {
+          componentEl.classList.add("djvlc-drop-target");
+          this.hideDropIndicator();
+        } else {
+          componentEl.classList.remove("djvlc-drop-target");
+          this.showDropIndicator(componentEl, position);
+        }
+      }
+    });
+    document.addEventListener("dragleave", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (componentEl && componentEl === this.dragState.dropTarget) {
+        const relatedTarget = e.relatedTarget;
+        if (!relatedTarget || !componentEl.contains(relatedTarget)) {
+          componentEl.classList.remove("djvlc-drop-target");
+        }
+      }
+    });
+    document.addEventListener("drop", (e) => {
+      if (!this.dragState.isDragging) return;
+      e.preventDefault();
+      const { draggedComponentId, dropTarget, dropPosition } = this.dragState;
+      if (draggedComponentId && dropTarget && dropPosition) {
+        const targetComponentId = dropTarget.getAttribute("data-component-id");
+        if (targetComponentId && targetComponentId !== draggedComponentId) {
+          this.log("info", "Drop:", draggedComponentId, dropPosition, targetComponentId);
+          this.send("component_drop" /* COMPONENT_DROP */, {
+            componentId: draggedComponentId,
+            targetComponentId,
+            position: dropPosition
+          });
+        }
+      }
+      this.endDrag();
+    });
+    document.addEventListener("dragend", () => {
+      this.endDrag();
+    });
+  }
+  /**
+   * 使组件可拖拽
+   */
+  makeComponentsDraggable() {
+    const components = document.querySelectorAll("[data-component-id]");
+    components.forEach((el) => {
+      el.draggable = true;
+    });
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            if (node.hasAttribute("data-component-id")) {
+              node.draggable = true;
+            }
+            node.querySelectorAll("[data-component-id]").forEach((el) => {
+              el.draggable = true;
+            });
+          }
+        });
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  /**
+   * 显示放置指示器
+   */
+  showDropIndicator(target, position) {
+    if (!this.options.dragOptions?.showDropIndicator) return;
+    let indicator = this.dragState.dropIndicator;
+    if (!indicator) {
+      indicator = document.createElement("div");
+      indicator.className = "djvlc-drop-indicator horizontal";
+      document.body.appendChild(indicator);
+      this.dragState.dropIndicator = indicator;
+    }
+    const rect = target.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    indicator.style.left = `${rect.left + scrollLeft}px`;
+    indicator.style.width = `${rect.width}px`;
+    if (position === "before") {
+      indicator.style.top = `${rect.top + scrollTop - 2}px`;
+    } else {
+      indicator.style.top = `${rect.bottom + scrollTop - 2}px`;
+    }
+    indicator.style.display = "block";
+  }
+  /**
+   * 隐藏放置指示器
+   */
+  hideDropIndicator() {
+    if (this.dragState.dropIndicator) {
+      this.dragState.dropIndicator.style.display = "none";
+    }
+  }
+  /**
+   * 结束拖拽
+   */
+  endDrag() {
+    this.dragState.draggedElement?.classList.remove("djvlc-dragging");
+    this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
+    this.hideDropIndicator();
+    this.dragState = {
+      isDragging: false,
+      draggedComponentId: null,
+      draggedElement: null,
+      dropTarget: null,
+      dropPosition: null,
+      dropIndicator: this.dragState.dropIndicator
+      // 保留 indicator 元素
+    };
+  }
   async handleInit(data) {
     this.log("info", "Init with config:", data);
+    void data;
+    if (this.runtime) {
+      try {
+        await this.runtime.init();
+      } catch (error) {
+        this.log("error", "Failed to init runtime:", error);
+        throw error;
+      }
+    }
   }
   async handleLoadPage(data) {
     this.log("info", "Load page:", data.pageUid);
+    if (!this.runtime) {
+      throw new Error("Runtime not set");
+    }
+    try {
+      await this.runtime.load();
+      await this.runtime.render();
+      this.syncState();
+    } catch (error) {
+      this.log("error", "Failed to load page:", error);
+      throw error;
+    }
   }
   async handleUpdateSchema(data) {
     this.log("info", "Update schema", data.fullUpdate ? "(full)" : "(partial)");
+    if (!this.runtime) {
+      throw new Error("Runtime not set");
+    }
+    try {
+      if (data.fullUpdate) {
+        await this.runtime.load();
+        await this.runtime.render();
+      } else {
+        await this.runtime.load();
+        await this.runtime.render();
+      }
+      this.syncState();
+    } catch (error) {
+      this.log("error", "Failed to update schema:", error);
+      throw error;
+    }
   }
   async handleRefresh() {
     this.log("info", "Refresh page");
-    window.location.reload();
+    if (this.runtime) {
+      try {
+        await this.runtime.load();
+        await this.runtime.render();
+        this.syncState();
+      } catch (error) {
+        this.log("error", "Failed to refresh:", error);
+        window.location.reload();
+      }
+    } else {
+      window.location.reload();
+    }
   }
   handleSelectComponent(data) {
     if (data.componentId) {
@@ -507,13 +785,20 @@ var SandboxClient = class {
     this.runtime?.updateComponent(data.componentId, data.props || {});
   }
   handleAddComponent(data) {
-    this.log("info", "Add component:", data.component.type);
+    this.log("info", "Add component:", data.component.componentType);
+    this.log("warn", "addComponent not supported, need to reload page");
   }
   handleMoveComponent(data) {
     this.log("info", "Move component:", data.componentId, "to", data.targetIndex);
+    this.log("warn", "moveComponent not supported, need to reload page");
   }
   handleDeleteComponent(data) {
     this.log("info", "Delete component:", data.componentId);
+    this.log("warn", "deleteComponent not supported, need to reload page");
+    this.selectedComponents.delete(data.componentId);
+    if (this.hoveredComponent === data.componentId) {
+      this.hoveredComponent = null;
+    }
   }
   handleSyncVariables(data) {
     Object.entries(data.variables).forEach(([key, value]) => {
@@ -532,11 +817,12 @@ var SandboxClient = class {
     });
   }
   syncState() {
+    const runtimeState = this.runtime?.getState();
     const state = {
-      phase: this.runtime?.getState().phase || "idle",
-      page: this.runtime?.getState().page ? {
-        pageUid: this.runtime.getState().page.pageUid,
-        pageVersionId: this.runtime.getState().page.pageVersionId
+      phase: runtimeState?.phase || "idle",
+      page: runtimeState?.page ? {
+        pageUid: runtimeState.page.pageUid,
+        pageVersionId: runtimeState.page.pageVersionId
       } : void 0,
       selectedComponents: Array.from(this.selectedComponents),
       hoveredComponent: this.hoveredComponent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djvlc/sandbox",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "DJV 低代码平台沙箱通信模块",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -17,8 +17,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --no-sourcemap",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --no-sourcemap",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
     "lint": "eslint src --ext .ts",
@@ -26,7 +26,8 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@djvlc/contracts-types": "^1.4.0"
+    "@djvlc/contracts-types": "1.8.3",
+    "@djvlc/runtime-core": "1.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",