refactor(right-key): move interaction logic to component and trigger on mouseup

src/components/right-key/index.ts

@@ -13,8 +13,13 @@ export class BimRightKey implements IBimComponent {
     private content: IRightKeyContent | null = null;
     private isVisible: boolean = false;
     private onCloseCallback?: () => void;
+    private options?: RightKeyOptions;
+    
+    private mouseDownTime: number = 0;
+    private readonly CLICK_THRESHOLD: number = 200; // ms
 
     constructor(options?: RightKeyOptions) {
+        this.options = options;
         this.element = document.createElement('div');
         this.element.className = `bim-right-key ${options?.className || ''}`;
         
@@ -36,6 +41,13 @@ export class BimRightKey implements IBimComponent {
             e.preventDefault();
             e.stopPropagation();
         });
+
+        // 绑定容器交互事件
+        if (this.options?.container) {
+            this.options.container.addEventListener('mousedown', this.handleContainerMouseDown);
+            this.options.container.addEventListener('mouseup', this.handleContainerMouseUp);
+            this.options.container.addEventListener('contextmenu', this.handleContainerContextMenu);
+        }
     }
 
     public setTheme(_theme: ThemeConfig): void {
@@ -51,10 +63,46 @@ export class BimRightKey implements IBimComponent {
 
     public destroy(): void {
         document.removeEventListener('mousedown', this.handleGlobalClick);
+        
+        if (this.options?.container) {
+            this.options.container.removeEventListener('mousedown', this.handleContainerMouseDown);
+            this.options.container.removeEventListener('mouseup', this.handleContainerMouseUp);
+            this.options.container.removeEventListener('contextmenu', this.handleContainerContextMenu);
+        }
+
         this.unmountContent();
         this.element.remove();
     }
 
+    private handleContainerMouseDown = (e: MouseEvent): void => {
+        // 记录右键按下时间 (button 2 是右键)
+        if (e.button === 2) {
+            this.mouseDownTime = Date.now();
+        }
+    };
+
+    private handleContainerMouseUp = (e: MouseEvent): void => {
+        // 只处理右键 (button 2)
+        if (e.button !== 2) return;
+
+        // 检查点击时长，如果是长按或拖拽（时间过长），则不触发回调
+        const pressDuration = Date.now() - this.mouseDownTime;
+        if (pressDuration > this.CLICK_THRESHOLD) {
+            return;
+        }
+
+        // 触发有效右键回调
+        if (this.options?.onContext) {
+            this.options.onContext(e);
+        }
+    };
+
+    private handleContainerContextMenu = (e: MouseEvent): void => {
+        // 阻止浏览器默认的右键菜单
+        // 真正的菜单触发逻辑已移至 mouseup，这里只负责拦截默认行为
+        e.preventDefault();
+    };
+
     /**
      * 设置关闭时的回调函数
      * 通常用于通知 Manager 状态变更
@@ -80,7 +128,7 @@ export class BimRightKey implements IBimComponent {
      */
     public unmountContent(): void {
         if (this.content) {
-            this.content.destroy(); // 重要：调用组件销毁方法清理资源
+            this.content.destroy(); // 重要：调用组件销毁方法清理<EFBFBD><EFBFBD><EFBFBD>源
             this.element.innerHTML = '';
             this.content = null;
         }
@@ -100,7 +148,7 @@ export class BimRightKey implements IBimComponent {
         this.element.style.left = `${x}px`;
         this.element.style.top = `${y}px`;
 
-        // 2. 获取容器<EFBFBD><EFBFBD><EFBFBD>寸和视口尺寸
+        // 2. 获取容器尺寸和视口尺寸
         const rect = this.element.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;

src/components/right-key/types.ts

@@ -15,4 +15,8 @@ export interface RightKeyOptions {
     className?: string;
     /** 层级 (z-index) */
     zIndex?: number;
+    /** 监听事件的容器 */
+    container?: HTMLElement;
+    /** 有效右键点击时的回调 */
+    onContext?: (e: MouseEvent) => void;
 }