@opentiny/next-sdk 0.1.14 → 0.1.15

package/dist/remoter/createRemoter.js

@@ -1,743 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { QrCode } from './QrCode';
-const DEFAULT_REMOTE_URL = 'https://agent.opentiny.design/tiny-robot';
-const DEFAULT_QR_CODE_URL = 'https://ai.opentiny.design/next-remoter';
-const getDefaultMenuItems = (options) => {
-    return [
-        {
-            action: 'qr-code',
-            show: true,
-            text: '弹出二维码',
-            icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="3" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-      <rect x="15" y="3" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-      <rect x="3" y="15" width="6" height="6" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>
-      <line x1="9" y1="6" x2="9" y2="18" stroke="currentColor" stroke-width="1.5"/>
-      <line x1="15" y1="6" x2="15" y2="18" stroke="currentColor" stroke-width="1.5"/>
-      <line x1="6" y1="9" x2="18" y2="9" stroke="currentColor" stroke-width="1.5"/>
-      <line x1="6" y1="15" x2="18" y2="15" stroke="currentColor" stroke-width="1.5"/>
-      <circle cx="12" cy="12" r="1" fill="currentColor"/>
-    </svg>`
-        },
-        {
-            action: 'ai-chat',
-            show: true,
-            text: '弹出 AI 对话框',
-            icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H6L4 18V4H20V16Z" fill="currentColor"/>
-      <path d="M7 9H17V11H7V9Z" fill="currentColor"/>
-      <path d="M7 12H14V14H7V12Z" fill="currentColor"/>
-    </svg>`
-        },
-        {
-            action: 'remote-control',
-            show: true,
-            text: `识别码：${options.sessionId.slice(-6)}`,
-            showCopyIcon: true,
-            icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>
-      <rect x="6" y="6" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="10" y="6" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="14" y="6" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="6" y="9" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="10" y="9" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="14" y="9" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="6" y="12" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="10" y="12" width="3" height="2" rx="0.5" fill="currentColor"/>
-      <rect x="14" y="12" width="3" height="2" rx="0.5" fill="currentColor"/>
-    </svg>`
-        },
-        {
-            action: 'remote-url',
-            show: true,
-            text: `${options.remoteUrl}`,
-            tip: options.remoteUrl,
-            showCopyIcon: true,
-            icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    </svg>`
-        }
-    ];
-};
-class FloatingBlock {
-    // 计算 sessionPrefix 属性
-    get sessionPrefix() {
-        var _a;
-        return ((_a = this.options.qrCodeUrl) === null || _a === void 0 ? void 0 : _a.includes('?')) ? '&sessionId=' : '?sessionId=';
-    }
-    constructor(options) {
-        this.isExpanded = false;
-        if (!options.sessionId) {
-            throw new Error('sessionId is required');
-        }
-        this.options = Object.assign(Object.assign({}, options), { qrCodeUrl: options.qrCodeUrl || DEFAULT_QR_CODE_URL, remoteUrl: options.remoteUrl || DEFAULT_REMOTE_URL });
-        // 合并默认菜单项配置和用户配置
-        this.menuItems = this.mergeMenuItems(options.menuItems);
-        this.init();
-    }
-    /**
-     * 合并菜单项配置
-     * @param userMenuItems 用户自定义菜单项配置
-     * @returns 合并后的菜单项配置
-     */
-    mergeMenuItems(userMenuItems) {
-        if (!userMenuItems) {
-            return getDefaultMenuItems(this.options);
-        }
-        return getDefaultMenuItems(this.options).map((defaultItem) => {
-            const userItem = userMenuItems.find((item) => item.action === defaultItem.action);
-            if (userItem) {
-                return Object.assign(Object.assign(Object.assign({}, defaultItem), userItem), { 
-                    // 确保show属性存在，默认为true
-                    show: userItem.show !== undefined ? userItem.show : defaultItem.show });
-            }
-            return defaultItem;
-        });
-    }
-    init() {
-        this.createFloatingBlock();
-        this.createDropdownMenu();
-        this.bindEvents();
-        this.addStyles();
-    }
-    // 创建主浮动块
-    createFloatingBlock() {
-        this.floatingBlock = document.createElement('div');
-        this.floatingBlock.className = 'tiny-remoter-floating-block';
-        this.floatingBlock.innerHTML = `
-      <div class="tiny-remoter-floating-block__icon">
-        <img style="display: block; width: 56px;" src="${DEFAULT_QR_CODE_URL}/svgs/logo-next-no-bg-left.svg" alt="icon" />
-      </div>
-    `;
-        document.body.appendChild(this.floatingBlock);
-    }
-    // 创建下拉菜单
-    createDropdownMenu() {
-        this.dropdownMenu = document.createElement('div');
-        this.dropdownMenu.className = 'tiny-remoter-floating-dropdown';
-        // 根据配置动态生成菜单项
-        const menuItemsHTML = this.menuItems
-            .filter((item) => item.show !== false) // 过滤掉show为false的菜单项
-            .map((item) => `
-        <div class="tiny-remoter-dropdown-item" data-action="${item.action}">
-          <div class="tiny-remoter-dropdown-item__icon">
-            ${item.icon}
-          </div>
-          <span title="${item.tip}">${item.text}</span>
-          ${item.showCopyIcon
-            ? `
-            <div class="tiny-remoter-copy-icon" data-action="${item.action}">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" fill="currentColor"/>
-              </svg>
-            </div>
-          `
-            : ''}
-        </div>
-      `)
-            .join('');
-        this.dropdownMenu.innerHTML = menuItemsHTML;
-        document.body.appendChild(this.dropdownMenu);
-    }
-    bindEvents() {
-        // 绑定浮动块点击事件
-        this.floatingBlock.addEventListener('click', () => {
-            this.toggleDropdown();
-        });
-        // 绑定菜单项点击事件
-        this.dropdownMenu.addEventListener('click', (e) => {
-            const target = e.target;
-            // 检查是否点击了复制图标
-            const copyIcon = target.closest('.tiny-remoter-copy-icon');
-            if (copyIcon) {
-                e.stopPropagation(); // 阻止事件冒泡，避免触发菜单项点击
-                const action = copyIcon.dataset.action;
-                if (action) {
-                    this.handleAction(action);
-                }
-                return;
-            }
-            // 处理普通菜单项点击
-            const actionItem = target.closest('.tiny-remoter-dropdown-item');
-            const action = actionItem === null || actionItem === void 0 ? void 0 : actionItem.dataset.action;
-            if (action) {
-                this.handleAction(action);
-            }
-        });
-        // 点击外部关闭菜单
-        document.addEventListener('click', (e) => {
-            const target = e.target;
-            if (!this.floatingBlock.contains(target) && !this.dropdownMenu.contains(target)) {
-                this.closeDropdown();
-            }
-        });
-        // ESC键关闭菜单
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                this.closeDropdown();
-            }
-        });
-    }
-    toggleDropdown() {
-        if (this.isExpanded) {
-            this.closeDropdown();
-        }
-        else {
-            this.openDropdown();
-        }
-    }
-    openDropdown() {
-        this.isExpanded = true;
-        this.floatingBlock.classList.add('expanded');
-        this.dropdownMenu.classList.add('show');
-    }
-    closeDropdown() {
-        this.isExpanded = false;
-        this.floatingBlock.classList.remove('expanded');
-        this.dropdownMenu.classList.remove('show');
-    }
-    handleAction(action) {
-        switch (action) {
-            case 'qr-code':
-                this.showQRCode();
-                break;
-            case 'ai-chat':
-                this.showAIChat();
-                break;
-            case 'remote-control':
-                this.copyRemoteControl();
-                break;
-            case 'remote-url':
-                this.copyRemoteURL();
-                break;
-        }
-        this.closeDropdown();
-    }
-    copyRemoteControl() {
-        this.copyToClipboard(this.options.sessionId.slice(-6));
-    }
-    copyRemoteURL() {
-        this.copyToClipboard(this.options.remoteUrl + this.sessionPrefix + this.options.sessionId);
-    }
-    // 实现复制到剪贴板功能
-    copyToClipboard(text) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                // 优先使用现代浏览器的 Clipboard API
-                if (navigator.clipboard && window.isSecureContext) {
-                    yield navigator.clipboard.writeText(text);
-                    this.showCopyFeedback(true);
-                }
-                else {
-                    // 降级方案：使用传统的 document.execCommand
-                    const textArea = document.createElement('textarea');
-                    textArea.value = text;
-                    textArea.style.position = 'fixed';
-                    textArea.style.left = '-999999px';
-                    textArea.style.top = '-999999px';
-                    document.body.appendChild(textArea);
-                    textArea.focus();
-                    textArea.select();
-                    const successful = document.execCommand('copy');
-                    document.body.removeChild(textArea);
-                    if (successful) {
-                        this.showCopyFeedback(true);
-                    }
-                    else {
-                        this.showCopyFeedback(false);
-                    }
-                }
-            }
-            catch (error) {
-                console.error('复制失败:', error);
-                this.showCopyFeedback(false);
-            }
-        });
-    }
-    // 显示复制反馈提示
-    showCopyFeedback(success) {
-        const message = success ? '复制成功！' : '复制失败，请手动复制';
-        const feedback = document.createElement('div');
-        feedback.className = `tiny-remoter-copy-feedback ${success ? 'success' : 'error'}`;
-        feedback.textContent = message;
-        document.body.appendChild(feedback);
-        // 添加显示动画
-        setTimeout(() => feedback.classList.add('show'), 10);
-        // 3秒后自动移除
-        setTimeout(() => {
-            feedback.classList.remove('show');
-            setTimeout(() => {
-                if (feedback.parentNode) {
-                    feedback.parentNode.removeChild(feedback);
-                }
-            }, 300);
-        }, 1500);
-    }
-    // 创建二维码弹窗
-    showQRCode() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const qrCode = new QrCode((this.options.qrCodeUrl || '') + this.sessionPrefix + this.options.sessionId, {});
-            const base64 = yield qrCode.toDataURL();
-            const modal = this.createModal('扫码前往智能遥控器', `
-      <div style="text-align: center; padding: 32px;">
-        <!-- 二维码容器 - 添加渐变背景和阴影效果 -->
-        <div style="
-          width: 240px; 
-          height: 240px; 
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          margin: 0 auto 24px; 
-          display: flex; 
-          align-items: center; 
-          justify-content: center; 
-          border-radius: 20px;
-          box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
-          position: relative;
-          overflow: hidden;
-        ">
-          <!-- 装饰性背景元素 -->
-          <div style="
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            animation: rotate 20s linear infinite;
-          "></div>
-          
-          <!-- 二维码图片容器 -->
-          <div style="
-            width: 200px;
-            height: 200px;
-            background: white;
-            border-radius: 16px;
-            padding: 16px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-            position: relative;
-            z-index: 1;
-          ">
-            <img src="${base64}" alt="二维码" style="
-              width: 100%; 
-              height: 100%; 
-              object-fit: contain;
-              border-radius: 8px;
-            ">
-          </div>
-        </div>
-        
-        <!-- 标题文字 -->
-        <h3 style="
-          color: #333;
-          margin: 0 0 12px 0;
-          font-size: 20px;
-          font-weight: 600;
-          letter-spacing: 0.5px;
-        ">扫描二维码</h3>
-        
-        <!-- 描述文字 -->
-        <p style="
-          color: #666; 
-          margin: 0 auto;
-          margin-bottom: 20px;
-          font-size: 14px;
-          line-height: 1.6;
-          max-width: 280px;
-        ">请使用手机微信或者浏览器扫描二维码跳转到智能遥控器</p>
-        
-        <!-- 提示图标和文字 -->
-        <div style="
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          color: #999;
-          font-size: 12px;
-        ">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="opacity: 0.7;">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
-          </svg>
-          <span>支持微信、浏览器等多种方式</span>
-        </div>
-      </div>
-    `);
-            this.showModal(modal);
-        });
-    }
-    // 创建AI对话弹窗--- 暂时调 “用户函数”
-    showAIChat() {
-        var _a, _b;
-        (_b = (_a = this.options).onShowAIChat) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-    createModal(title, content) {
-        const modal = document.createElement('div');
-        modal.className = 'tiny-remoter-floating-modal';
-        modal.innerHTML = `
-      <div class="tiny-remoter-modal-overlay"></div>
-      <div class="tiny-remoter-modal-content">
-        <div class="tiny-remoter-modal-header">
-          <h3>${title}</h3>
-          <button class="tiny-remoter-modal-close">&times;</button>
-        </div>
-        <div class="tiny-remoter-modal-body">
-          ${content}
-        </div>
-      </div>
-    `;
-        // 绑定关闭事件
-        const closeBtn = modal.querySelector('.tiny-remoter-modal-close');
-        const overlay = modal.querySelector('.tiny-remoter-modal-overlay');
-        closeBtn.addEventListener('click', () => this.hideModal(modal));
-        overlay.addEventListener('click', () => this.hideModal(modal));
-        return modal;
-    }
-    showModal(modal) {
-        document.body.appendChild(modal);
-        // 添加显示动画
-        setTimeout(() => modal.classList.add('show'), 10);
-    }
-    hideModal(modal) {
-        modal.classList.remove('show');
-        setTimeout(() => {
-            if (modal.parentNode) {
-                modal.parentNode.removeChild(modal);
-            }
-        }, 100);
-    }
-    // 创建样式表
-    addStyles() {
-        const style = document.createElement('style');
-        style.textContent = `
-      /* 浮动块样式 */
-      .tiny-remoter-floating-block {
-        position: fixed;
-        bottom: 30px;
-        right: 30px;
-        width: 60px;
-        height: 60px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 99;
-        overflow: hidden;
-        border-radius: 50%;
-      }
-
-      .tiny-remoter-floating-block__icon {
-        transform: scale(0.8);
-        transition: transform 0.3s ease;
-      }
-
-       .tiny-remoter-floating-block__icon:hover {
-        transform: scale(1.1);
-      }
-
-      .tiny-remoter-floating-block.expanded .tiny-remoter-floating-block__icon {
-        transform: scale(1.1);
-      }
-
-      /* 下拉菜单样式 */
-      .tiny-remoter-floating-dropdown {
-        position: fixed;
-        bottom: 100px;
-        right: 30px;
-        background: white;
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-        padding: 8px;
-        opacity: 0;
-        visibility: hidden;
-        transform: translateY(20px) scale(0.95);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        z-index: 999;
-        min-width: 200px;
-      }
-
-      .tiny-remoter-floating-dropdown.show {
-        opacity: 1;
-        visibility: visible;
-        transform: translateY(0) scale(1);
-      }
-
-      .tiny-remoter-dropdown-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 12px 16px;
-        border-radius: 12px;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        color: #333;
-      }
-
-      .tiny-remoter-dropdown-item > span {
-        flex: 1;
-        overflow: hidden;
-        max-width: 120px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .tiny-remoter-dropdown-item:hover {
-        background: #f8f9fa;
-        transform: translateX(4px);
-      }
-
-      .tiny-remoter-dropdown-item__icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        background: #f8f9fa;
-        border-radius: 8px;
-        color: #667eea;
-      }
-
-      /* 复制图标样式 */
-      .tiny-remoter-copy-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        background: #f0f0f0;
-        border-radius: 6px;
-        color: #666;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        opacity: 0.7;
-        margin-left: auto;
-      }
-
-      .tiny-remoter-copy-icon:hover {
-        background: #e0e0e0;
-        color: #333;
-        opacity: 1;
-        transform: scale(1.1);
-      }
-
-      .tiny-remoter-copy-icon:active {
-        transform: scale(0.95);
-      }
-
-      /* 弹窗样式 */
-      .tiny-remoter-floating-modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 2000;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .tiny-remoter-modal-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(4px);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-      }
-
-      .tiny-remoter-modal-content {
-        background: white;
-        border-radius: 16px;
-        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
-        max-width: 500px;
-        width: 90%;
-        max-height: 80vh;
-        overflow: hidden;
-        transform: scale(0.9) translateY(20px);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      .tiny-remoter-floating-modal.show .tiny-remoter-modal-overlay {
-        opacity: 1;
-      }
-
-      .tiny-remoter-floating-modal.show .tiny-remoter-modal-content {
-        transform: scale(1) translateY(0);
-      }
-
-      .tiny-remoter-modal-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 20px 24px;
-        border-bottom: 1px solid #f0f0f0;
-      }
-
-      .tiny-remoter-modal-header h3 {
-        margin: 0;
-        font-size: 18px;
-        font-weight: 600;
-        color: #333;
-      }
-
-      .tiny-remoter-modal-close {
-        background: none;
-        border: none;
-        font-size: 24px;
-        cursor: pointer;
-        color: #999;
-        padding: 0;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s ease;
-      }
-
-      .tiny-remoter-modal-close:hover {
-        background: #f5f5f5;
-        color: #666;
-      }
-
-      .tiny-remoter-modal-body {
-        padding: 24px;
-      }
-
-      /* 二维码弹窗动画 */
-      @keyframes rotate {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      /* 响应式设计 */
-      @media (max-width: 768px) {
-        .tiny-remoter-floating-block {
-          bottom: 20px;
-          right: 20px;
-          width: 56px;
-          height: 56px;
-        }
-
-        .tiny-remoter-floating-dropdown {
-          bottom: 90px;
-          right: 20px;
-          min-width: 180px;
-        }
-
-        .tiny-remoter-modal-content {
-          width: 95%;
-          margin: 20px;
-        }
-      }
-
-      /* 复制反馈提示样式 */
-      .tiny-remoter-copy-feedback {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 12px 24px;
-        border-radius: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        z-index: 10000;
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s ease;
-        backdrop-filter: blur(4px);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-      }
-
-      .tiny-remoter-copy-feedback.show {
-        opacity: 1;
-        visibility: visible;
-        transform: translate(-50%, -50%) scale(1);
-      }
-
-      .tiny-remoter-copy-feedback.success {
-        background: rgba(34, 197, 94, 0.9);
-      }
-
-      .tiny-remoter-copy-feedback.error {
-        background: rgba(239, 68, 68, 0.9);
-      }
-
-      /* 深色主题支持 */
-      @media (prefers-color-scheme: dark) {
-        .tiny-remoter-floating-dropdown {
-          background: #1a1a1a;
-          color: white;
-        }
-
-        .tiny-remoter-dropdown-item {
-          color: white;
-        }
-
-        .tiny-remoter-dropdown-item:hover {
-          background: #2a2a2a;
-        }
-
-        .tiny-remoter-dropdown-item__icon {
-          background: #2a2a2a;
-        }
-
-        .tiny-remoter-copy-icon {
-          background: #2a2a2a;
-          color: #ccc;
-        }
-
-        .tiny-remoter-copy-icon:hover {
-          background: #3a3a3a;
-          color: white;
-        }
-
-        .tiny-remoter-modal-content {
-          background: #1a1a1a;
-          color: white;
-        }
-
-        .tiny-remoter-modal-header {
-          border-bottom-color: #333;
-        }
-
-        .tiny-remoter-modal-header h3 {
-          color: white;
-        }
-      }
-    `;
-        document.head.appendChild(style);
-    }
-    // 销毁组件
-    destroy() {
-        if (this.floatingBlock.parentNode) {
-            this.floatingBlock.parentNode.removeChild(this.floatingBlock);
-        }
-        if (this.dropdownMenu.parentNode) {
-            this.dropdownMenu.parentNode.removeChild(this.dropdownMenu);
-        }
-    }
-}
-// 导出组件
-export const createRemoter = (options = {}) => {
-    return new FloatingBlock(options);
-};