nv-log-bw 1.0.0

package/index.js

@@ -0,0 +1,1968 @@
+class NvLogViewer extends HTMLElement {
+    static get observedAttributes() {
+        return ['max-logs', 'theme', 'show-time', 'time-format', 'auto-scroll', 'show-stats', 'hide-button', 'auto-destroy', 'draggable'];
+    }
+
+    constructor() {
+        super();
+        this._state = {
+            logs: [],
+            showLogs: true,
+            filters: {
+                info: true,
+                success: true,
+                warning: true,
+                error: true,
+                ignore: true
+            },
+            isOpen: false,
+            isMinimized: false,
+            originalPosition: { x: 0, y: 0 },
+            originalSize: { width: '800px', height: '600px' },
+            dragInfo: {
+                isDragging: false,
+                startX: 0,
+                startY: 0,
+                initialLeft: 0,
+                initialTop: 0
+            },
+            isDraggingEnabled: true
+        };
+        
+        this._eventListeners = new Map();
+        
+        // 创建外部文件选择器
+        this._createFileInput();
+        
+        this.attachShadow({ mode: 'open' });
+        this._config = this._getConfig();
+        this._render();
+        this._setupEventListeners();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        switch (name) {
+            case 'max-logs':
+                this._config.maxLogs = Math.max(1, parseInt(newValue, 10) || 100);
+                this._trimLogs();
+                this._updateLogsDisplay();
+                this._updateStats();
+                break;
+            case 'theme':
+                this._config.theme = newValue === 'light' ? 'light' : 'dark';
+                this._updateTheme();
+                break;
+            case 'show-time':
+                this._config.showTime = newValue !== 'false';
+                this._updateLogsDisplay();
+                break;
+            case 'time-format':
+                this._config.timeFormat = newValue || 'HH:mm:ss';
+                this._updateLogsDisplay();
+                break;
+            case 'auto-scroll':
+                this._config.autoScroll = newValue !== 'false';
+                break;
+            case 'show-stats':
+                this._config.showStats = newValue !== 'false';
+                this._updateStatsVisibility();
+                break;
+            case 'hide-button':
+                this._config.hideButton = newValue !== 'false';
+                this._updateButtonsVisibility();
+                break;
+            case 'auto-destroy':
+                this._config.autoDestroy = newValue !== 'false';
+                this._updateCloseButton();
+                break;
+            case 'draggable':
+                this._config.draggable = newValue !== 'false';
+                this._updateDraggableState();
+                break;
+        }
+    }
+
+    connectedCallback() {
+        this._config = this._getConfig();
+        this._render();
+        this._setupEventListeners();
+        
+        if (this._config.autoDestroy) {
+            window.addEventListener('beforeunload', () => this._cleanup());
+        }
+    }
+
+    disconnectedCallback() {
+        this._cleanup();
+    }
+
+    _createFileInput() {
+        this._fileInput = document.createElement('input');
+        this._fileInput.type = 'file';
+        this._fileInput.accept = '.json,.txt,.log';
+        this._fileInput.style.position = 'fixed';
+        this._fileInput.style.top = '-1000px';
+        this._fileInput.style.left = '-1000px';
+        this._fileInput.style.opacity = '0';
+        this._fileInput.style.pointerEvents = 'none';
+        this._fileInput.style.zIndex = '-1000';
+        
+        this._fileInput.addEventListener('change', (e) => this._handleFileImport(e));
+        document.body.appendChild(this._fileInput);
+    }
+
+    _getConfig() {
+        return {
+            maxLogs: Math.max(1, parseInt(this.getAttribute('max-logs') || 100, 10)),
+            theme: this.getAttribute('theme') === 'light' ? 'light' : 'dark',
+            showTime: this.getAttribute('show-time') !== 'false',
+            timeFormat: this.getAttribute('time-format') || 'HH:mm:ss',
+            autoScroll: this.getAttribute('auto-scroll') !== 'false',
+            showStats: this.getAttribute('show-stats') !== 'false',
+            hideButton: this.getAttribute('hide-button') === 'true',
+            autoDestroy: this.getAttribute('auto-destroy') === 'true',
+            draggable: this.getAttribute('draggable') !== 'false'
+        };
+    }
+
+    _trimLogs() {
+        if (this._state.logs.length > this._config.maxLogs) {
+            this._state.logs = this._state.logs.slice(-this._config.maxLogs);
+        }
+    }
+
+    _updateLogsDisplay() {
+        const logContent = this.shadowRoot.querySelector('#logContent');
+        if (!logContent) return;
+
+        const filteredLogs = this._state.logs.filter(log => this._state.filters[log.type]);
+
+        if (filteredLogs.length === 0) {
+            logContent.innerHTML = '<div class="empty-state">📝 没有日志记录</div>';
+            return;
+        }
+
+        logContent.innerHTML = '';
+
+        filteredLogs.forEach(log => {
+            const logEntry = document.createElement('div');
+            logEntry.className = `log-entry ${log.type}`;
+
+            let timeText = '';
+            if (this._config.showTime) {
+                const date = new Date(log.time);
+                if (this._config.timeFormat === 'relative') {
+                    timeText = this._getRelativeTime(log.time);
+                } else if (this._config.timeFormat === 'HH:mm:ss') {
+                    timeText = date.toLocaleTimeString('zh-CN', { hour12: false });
+                } else if (this._config.timeFormat === 'HH:mm:ss.ms') {
+                    const time = date.toLocaleTimeString('zh-CN', { hour12: false });
+                    const ms = String(date.getMilliseconds()).padStart(3, '0');
+                    timeText = `${time}.${ms}`;
+                } else {
+                    timeText = date.toLocaleString('zh-CN');
+                }
+            }
+
+            logEntry.innerHTML = `
+                ${this._config.showTime ? `<span class="log-time">${timeText}</span>` : ''}
+                <span class="log-message">${this._escapeHtml(String(log.message))}</span>
+            `;
+
+            logContent.appendChild(logEntry);
+        });
+
+        if (this._config.autoScroll) {
+            logContent.scrollTop = logContent.scrollHeight;
+        }
+    }
+
+    _escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    _getRelativeTime(timestamp) {
+        const now = Date.now();
+        const diff = now - timestamp;
+        
+        if (diff < 60000) {
+            return `${Math.floor(diff / 1000)}秒前`;
+        } else if (diff < 3600000) {
+            return `${Math.floor(diff / 60000)}分钟前`;
+        } else if (diff < 86400000) {
+            return `${Math.floor(diff / 3600000)}小时前`;
+        } else {
+            return `${Math.floor(diff / 86400000)}天前`;
+        }
+    }
+
+    _updateDraggableState() {
+        const dragHandle = this.shadowRoot.querySelector('#dragHandle');
+        const logHeader = this.shadowRoot.querySelector('#logHeader');
+        const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+        const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+        
+        if (dragHandle) {
+            if (this._config.draggable) {
+                dragHandle.style.display = 'block';
+                dragHandle.style.cursor = 'move';
+                if (logHeader) {
+                    logHeader.style.cursor = 'move';
+                }
+                if (minimizedTitle) {
+                    minimizedTitle.style.cursor = 'move';
+                }
+                if (popupContainer) {
+                    popupContainer.style.cursor = 'default';
+                }
+            } else {
+                dragHandle.style.display = 'none';
+                dragHandle.style.cursor = 'default';
+                if (logHeader) {
+                    logHeader.style.cursor = 'default';
+                }
+                if (minimizedTitle) {
+                    minimizedTitle.style.cursor = 'default';
+                }
+                if (popupContainer) {
+                    popupContainer.style.cursor = 'default';
+                }
+            }
+        }
+    }
+
+    _render() {
+        const style = document.createElement('style');
+        style.textContent = this._getStyles();
+
+        this.shadowRoot.innerHTML = '';
+        this.shadowRoot.appendChild(style);
+        
+        this.shadowRoot.innerHTML += `
+            <!-- 浮动按钮 -->
+            <div id="floatingContainer" class="floating-container" style="display: ${this._config.hideButton ? 'none' : 'block'}">
+                ${!this._state.isOpen ? `
+                    <div class="floating-button" id="floatingButton" title="打开日志">
+                        📄
+                    </div>
+                ` : ''}
+            </div>
+            
+            <!-- 弹出窗口 -->
+            <div class="popup-container" id="popupContainer" style="display: none;">
+                <!-- 完整的日志容器 -->
+                <div class="log-container ${this._state.showLogs ? 'expanded' : 'collapsed'} ${this._config.theme}">
+                    <div class="log-header" id="logHeader">
+                        <div class="log-title">
+                            ${this._config.draggable ? '<span class="drag-handle" id="dragHandle" title="拖动">↔</span>' : ''}
+                            <span class="log-icon">📄</span>
+                            <h3>日志查看器</h3>
+                            <span class="log-count" id="logCount">0</span>
+                        </div>
+                        <div class="log-actions">
+                            <button class="toggle-btn" title="${this._state.showLogs ? '隐藏日志' : '显示日志'}">
+                                ${this._state.showLogs ? '👁️' : '👁️‍🗨️'}
+                            </button>
+                            <button class="clear-btn" title="清空日志">🗑️</button>
+                            <button class="export-btn" title="导出日志">📥</button>
+                            <button class="import-btn" title="导入日志">📤</button>
+                            <button class="copy-btn" title="复制日志">📋</button>
+                            <button class="popup-btn" id="minimizeBtn" title="最小化">_</button>
+                            <button class="popup-btn" id="closeBtn" title="${this._config.autoDestroy ? '关闭并销毁' : '隐藏'}">✕</button>
+                        </div>
+                    </div>
+
+                    <div class="log-content" id="logContent">
+                        <div class="empty-state">📝 没有日志记录</div>
+                    </div>
+
+                    <div class="log-footer">
+                        <div class="log-filter">
+                            <label class="filter-label">
+                                <input type="checkbox" class="filter-checkbox" data-type="info" checked> 
+                                <span class="filter-badge info">信息</span>
+                            </label>
+                            <label class="filter-label">
+                                <input type="checkbox" class="filter-checkbox" data-type="success" checked> 
+                                <span class="filter-badge success">成功</span>
+                            </label>
+                            <label class="filter-label">
+                                <input type="checkbox" class="filter-checkbox" data-type="warning" checked> 
+                                <span class="filter-badge warning">警告</span>
+                            </label>
+                            <label class="filter-label">
+                                <input type="checkbox" class="filter-checkbox" data-type="error" checked> 
+                                <span class="filter-badge error">错误</span>
+                            </label>
+                            <label class="filter-label">
+                                <input type="checkbox" class="filter-checkbox" data-type="ignore" checked> 
+                                <span class="filter-badge ignore">忽略</span>
+                            </label>
+                        </div>
+                        <div class="log-stats">
+                            <div class="stat-row">
+                                <span>总计: <span id="totalCount">0</span></span>
+                                <span>信息: <span id="infoCount">0</span></span>
+                                <span>成功: <span id="successCount">0</span></span>
+                                <span>警告: <span id="warningCount">0</span></span>
+                                <span>错误: <span id="errorCount">0</span></span>
+                                <span>忽略: <span id="ignoreCount">0</span></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 最小化时的标题栏 -->
+                <div class="minimized-title" id="minimizedTitle" style="display: none;">
+                    <div class="minimized-title-left">
+                        <span>📄 日志查看器</span>
+                        <span class="minimized-log-count" id="minimizedLogCount">0</span>
+                        <div class="minimized-actions">
+                            <button class="minimized-popup-btn" id="maximizeBtn" title="最大化">□</button>
+                            <button class="minimized-popup-btn" id="closeMinimizedBtn" title="${this._config.autoDestroy ? '关闭并销毁' : '隐藏'}">✕</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="resize-handle" id="resizeHandle"></div>
+            </div>
+        `;
+        
+        this._updateTheme();
+        this._updateDraggableState();
+    }
+
+    _getStyles() {
+        return `
+            :host {
+                display: block;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                font-size: 12px;
+                width: 100%;
+            }
+
+            /* 浮动按钮样式 */
+            .floating-container {
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                z-index: 9998;
+            }
+            
+            .floating-button {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                background: #1890ff;
+                color: white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                cursor: pointer;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+                transition: all 0.3s ease;
+                user-select: none;
+            }
+            
+            .floating-button:hover {
+                background: #40a9ff;
+                transform: scale(1.1);
+            }
+            
+            .floating-button:active {
+                transform: scale(0.95);
+            }
+
+            /* 弹出窗口样式 */
+            .popup-container {
+                position: fixed;
+                z-index: 9999;
+                width: 800px;
+                height: 600px;
+                display: none;
+                border-radius: 8px;
+                overflow: hidden;
+                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+                resize: both;
+                min-width: 400px;
+                min-height: 300px;
+            }
+            
+            .popup-container.open {
+                display: block;
+            }
+            
+            .popup-container.minimized {
+                width: 320px !important;
+                height: 40px !important;
+                min-height: 40px !important;
+                min-width: 320px !important;
+                resize: none;
+                border-radius: 6px;
+                display: block;
+            }
+            
+            .popup-container.minimized .log-container {
+                display: none !important;
+            }
+            
+            .popup-container.minimized .resize-handle {
+                display: none;
+            }
+            
+            /* 最小化时的标题栏样式 */
+            .minimized-title {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                display: none;
+                align-items: center;
+                padding: 0 12px;
+                background: var(--header-bg);
+                color: var(--text-color);
+                font-size: 12px;
+                font-weight: 600;
+                cursor: move;
+                border-radius: 6px;
+                overflow: hidden;
+                z-index: 1000;
+            }
+            
+            .popup-container.minimized .minimized-title {
+                display: flex;
+            }
+            
+            .minimized-title-left {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                flex: 1;
+            }
+            
+            .minimized-log-count {
+                background: var(--button-bg);
+                color: var(--button-text);
+                padding: 2px 8px;
+                border-radius: 10px;
+                font-size: 11px;
+                font-weight: 500;
+                min-width: 20px;
+                text-align: center;
+            }
+            
+            .minimized-actions {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                margin-left: auto;
+            }
+            
+            .minimized-popup-btn {
+                background: var(--button-bg);
+                border: none;
+                border-radius: 4px;
+                color: var(--button-text);
+                cursor: pointer;
+                font-size: 12px;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s;
+                opacity: 0.8;
+                font-family: monospace;
+            }
+            
+            .minimized-popup-btn:hover {
+                background: var(--button-hover);
+                transform: translateY(-1px);
+                opacity: 1;
+            }
+            
+            .resize-handle {
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                right: 0;
+                bottom: 0;
+                cursor: se-resize;
+                z-index: 10000;
+            }
+            
+            .popup-container.minimized .resize-handle {
+                display: none;
+            }
+
+            /* 暗色主题 */
+            .log-container.dark {
+                --bg-color: #1e1e1e;
+                --header-bg: #252526;
+                --border-color: #3e3e42;
+                --text-color: #d4d4d4;
+                --text-muted: #8c8c8c;
+                --log-entry-bg: #2d2d30;
+                --hover-bg: #323234;
+                --info-color: #3794ff;
+                --info-bg: rgba(55, 148, 255, 0.1);
+                --success-color: #4ec9b0;
+                --success-bg: rgba(78, 201, 176, 0.1);
+                --warning-color: #dcdcaa;
+                --warning-bg: rgba(220, 220, 170, 0.1);
+                --error-color: #f48771;
+                --error-bg: rgba(244, 135, 113, 0.1);
+                --ignore-color: #8a8a8a;
+                --ignore-bg: rgba(138, 138, 138, 0.1);
+                --button-bg: #3e3e42;
+                --button-hover: #4a4a4e;
+                --button-text: #d4d4d4;
+                --filter-badge-bg: #3e3e42;
+            }
+
+            /* 亮色主题 */
+            .log-container.light {
+                --bg-color: #ffffff;
+                --header-bg: #f5f5f5;
+                --border-color: #e0e0e0;
+                --text-color: #333333;
+                --text-muted: #666666;
+                --log-entry-bg: #f9f9f9;
+                --hover-bg: #f0f0f0;
+                --info-color: #1890ff;
+                --info-bg: rgba(24, 144, 255, 0.08);
+                --success-color: #52c41a;
+                --success-bg: rgba(82, 196, 26, 0.08);
+                --warning-color: #faad14;
+                --warning-bg: rgba(250, 173, 20, 0.08);
+                --error-color: #ff4d4f;
+                --error-bg: rgba(255, 77, 79, 0.08);
+                --ignore-color: #999999;
+                --ignore-bg: rgba(153, 153, 153, 0.08);
+                --button-bg: #e8e8e8;
+                --button-hover: #d9d9d9;
+                --button-text: #595959;
+                --filter-badge-bg: #e8e8e8;
+            }
+
+            .log-container {
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                overflow: hidden;
+                transition: all 0.3s ease;
+                background: var(--bg-color);
+                color: var(--text-color);
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .log-container.collapsed {
+                height: auto;
+                min-height: 0;
+                flex: 0 0 auto;
+            }
+
+            .log-container.collapsed .log-header {
+                border-bottom: none;
+            }
+
+            .log-container.collapsed .log-content,
+            .log-container.collapsed .log-footer {
+                display: none;
+            }
+
+            .log-container.expanded {
+                flex: 1;
+                min-height: 0;
+            }
+
+            .log-container.expanded .log-content,
+            .log-container.expanded .log-footer {
+                display: block;
+            }
+
+            .log-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 16px;
+                background: var(--header-bg);
+                border-bottom: 1px solid var(--border-color);
+                user-select: none;
+                transition: background-color 0.2s;
+                flex-shrink: 0;
+            }
+
+            .log-header:hover {
+                background: var(--hover-bg);
+            }
+
+            .log-title {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+
+            .drag-handle {
+                cursor: move;
+                opacity: 0.6;
+                font-size: 16px;
+                padding: 4px;
+                border-radius: 4px;
+                transition: all 0.2s;
+            }
+            
+            .drag-handle:hover {
+                opacity: 1;
+                background: var(--button-bg);
+            }
+
+            .log-icon {
+                font-size: 16px;
+                opacity: 0.8;
+            }
+
+            .log-title h3 {
+                margin: 0;
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            .log-count {
+                background: var(--button-bg);
+                color: var(--button-text);
+                padding: 2px 8px;
+                border-radius: 10px;
+                font-size: 11px;
+                font-weight: 500;
+                min-width: 20px;
+                text-align: center;
+            }
+
+            .log-actions {
+                display: flex;
+                gap: 6px;
+            }
+
+            /* 按钮样式 */
+            .popup-btn,
+            .toggle-btn,
+            .clear-btn,
+            .export-btn,
+            .import-btn,
+            .copy-btn {
+                background: var(--button-bg);
+                border: none;
+                border-radius: 4px;
+                color: var(--button-text);
+                cursor: pointer;
+                font-size: 13px;
+                width: 28px;
+                height: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.2s;
+                opacity: 0.8;
+            }
+
+            .popup-btn:hover,
+            .toggle-btn:hover,
+            .clear-btn:hover,
+            .export-btn:hover,
+            .import-btn:hover,
+            .copy-btn:hover {
+                background: var(--button-hover);
+                transform: translateY(-1px);
+                opacity: 1;
+            }
+
+            /* 日志内容样式 */
+            .log-content {
+                overflow-y: auto;
+                flex: 1;
+                padding: 8px;
+                font-family: 'SF Mono', Monaco, 'Cascadia Code', Consolas, 'Courier New', monospace;
+                line-height: 1.5;
+                word-break: break-word;
+                white-space: pre-wrap;
+                scroll-behavior: smooth;
+                min-height: 0;
+            }
+
+            .log-entry {
+                margin-bottom: 4px;
+                padding: 8px 10px;
+                border-radius: 4px;
+                border-left: 3px solid transparent;
+                background: var(--log-entry-bg);
+                transition: all 0.2s ease;
+                animation: fadeIn 0.3s ease;
+                position: relative;
+            }
+
+            .log-entry:hover {
+                background: var(--hover-bg);
+                transform: translateX(2px);
+            }
+
+            .log-entry.info {
+                border-left-color: var(--info-color);
+                background: var(--info-bg);
+            }
+
+            .log-entry.info:hover {
+                background: var(--info-bg);
+                filter: brightness(1.1);
+            }
+
+            .log-entry.success {
+                border-left-color: var(--success-color);
+                background: var(--success-bg);
+            }
+
+            .log-entry.success:hover {
+                background: var(--success-bg);
+                filter: brightness(1.1);
+            }
+
+            .log-entry.warning {
+                border-left-color: var(--warning-color);
+                background: var(--warning-bg);
+            }
+
+            .log-entry.warning:hover {
+                background: var(--warning-bg);
+                filter: brightness(1.1);
+            }
+
+            .log-entry.error {
+                border-left-color: var(--error-color);
+                background: var(--error-bg);
+            }
+
+            .log-entry.error:hover {
+                background: var(--error-bg);
+                filter: brightness(1.1);
+            }
+
+            .log-entry.ignore {
+                border-left-color: var(--ignore-color);
+                background: var(--ignore-bg);
+                opacity: 0.7;
+            }
+
+            .log-entry.ignore:hover {
+                background: var(--ignore-bg);
+                filter: brightness(1.1);
+                opacity: 0.9;
+            }
+
+            .log-time {
+                color: var(--text-muted);
+                font-size: 10px;
+                margin-right: 10px;
+                user-select: none;
+                font-variant-numeric: tabular-nums;
+            }
+
+            .log-message {
+                font-size: 12px;
+                word-break: break-word;
+            }
+
+            .log-footer {
+                padding: 10px 16px;
+                border-top: 1px solid var(--border-color);
+                background: var(--header-bg);
+                font-size: 11px;
+                flex-shrink: 0;
+            }
+
+            .log-filter {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 12px;
+                margin-bottom: 8px;
+            }
+
+            .filter-label {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                cursor: pointer;
+                color: var(--text-muted);
+                transition: opacity 0.2s;
+            }
+
+            .filter-label:hover {
+                opacity: 0.8;
+            }
+
+            .filter-checkbox {
+                margin: 0;
+                cursor: pointer;
+            }
+
+            .filter-badge {
+                padding: 2px 8px;
+                border-radius: 3px;
+                font-size: 10px;
+                font-weight: 500;
+                background: var(--filter-badge-bg);
+            }
+
+            .filter-badge.info {
+                background: var(--info-bg);
+                color: var(--info-color);
+            }
+
+            .filter-badge.success {
+                background: var(--success-bg);
+                color: var(--success-color);
+            }
+
+            .filter-badge.warning {
+                background: var(--warning-bg);
+                color: var(--warning-color);
+            }
+
+            .filter-badge.error {
+                background: var(--error-bg);
+                color: var(--error-color);
+            }
+
+            .filter-badge.ignore {
+                background: var(--ignore-bg);
+                color: var(--ignore-color);
+            }
+
+            .log-stats {
+                color: var(--text-muted);
+            }
+
+            .stat-row {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 12px;
+                justify-content: space-between;
+            }
+
+            .stat-row span {
+                display: inline-flex;
+                align-items: center;
+                gap: 4px;
+            }
+
+            .stat-row #totalCount {
+                font-weight: 600;
+                color: var(--text-color);
+            }
+
+            .stat-row #infoCount {
+                color: var(--info-color);
+                font-weight: 600;
+            }
+
+            .stat-row #successCount {
+                color: var(--success-color);
+                font-weight: 600;
+            }
+
+            .stat-row #warningCount {
+                color: var(--warning-color);
+                font-weight: 600;
+            }
+
+            .stat-row #errorCount {
+                color: var(--error-color);
+                font-weight: 600;
+            }
+
+            .stat-row #ignoreCount {
+                color: var(--ignore-color);
+                font-weight: 600;
+            }
+
+            .empty-state {
+                text-align: center;
+                color: var(--text-muted);
+                padding: 40px 20px;
+                font-style: italic;
+                user-select: none;
+            }
+
+            .import-notice {
+                background: var(--info-bg);
+                border-left: 3px solid var(--info-color);
+                color: var(--text-color);
+                padding: 10px;
+                margin: 8px;
+                border-radius: 4px;
+                font-size: 11px;
+                animation: fadeIn 0.3s ease;
+            }
+
+            .import-notice.success {
+                background: var(--success-bg);
+                border-left-color: var(--success-color);
+            }
+
+            .import-notice.error {
+                background: var(--error-bg);
+                border-left-color: var(--error-color);
+            }
+
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-5px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            @keyframes pulse {
+                0%, 100% {
+                    opacity: 1;
+                }
+                50% {
+                    opacity: 0.5;
+                }
+            }
+
+            /* 滚动条样式 */
+            .log-content::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            .log-content::-webkit-scrollbar-track {
+                background: var(--bg-color);
+            }
+
+            .log-content::-webkit-scrollbar-thumb {
+                background: var(--border-color);
+                border-radius: 3px;
+            }
+
+            .log-content::-webkit-scrollbar-thumb:hover {
+                background: var(--text-muted);
+            }
+        `;
+    }
+
+    _setupEventListeners() {
+        // 清理之前的事件监听器
+        this._eventListeners.forEach(({ type, handler, target }) => {
+            if (target && target.removeEventListener) {
+                target.removeEventListener(type, handler);
+            }
+        });
+        this._eventListeners.clear();
+
+        const clickHandler = (e) => {
+            if (e.target.classList.contains('toggle-btn')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.toggleVisibility();
+            } else if (e.target.classList.contains('clear-btn')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.clearLogs();
+            } else if (e.target.classList.contains('export-btn')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.exportLogs();
+            } else if (e.target.classList.contains('import-btn')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this._triggerImport();
+            } else if (e.target.classList.contains('copy-btn')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.copyLogs();
+            } else if (e.target.classList.contains('filter-checkbox')) {
+                e.stopPropagation();
+                e.preventDefault();
+                this._applyFilters();
+            } else if (e.target.id === 'minimizeBtn') {
+                e.stopPropagation();
+                e.preventDefault();
+                this._minimize();
+            } else if (e.target.id === 'closeBtn') {
+                e.stopPropagation();
+                e.preventDefault();
+                this.clos();
+            } else if (e.target.id === 'closeMinimizedBtn') {
+                e.stopPropagation();
+                e.preventDefault();
+                this.clos();
+            } else if (e.target.id === 'maximizeBtn') {
+                e.stopPropagation();
+                e.preventDefault();
+                this._restore();
+            } else if (e.target.id === 'floatingButton') {
+                e.stopPropagation();
+                e.preventDefault();
+                this.open();
+            }
+        };
+
+        this.shadowRoot.addEventListener('click', clickHandler);
+        this._eventListeners.set('click', { type: 'click', handler: clickHandler, target: this.shadowRoot });
+
+        this._setupFloatingButtonDrag();
+        this._setupDrag();
+        this._setupResize();
+    }
+
+    _setupFloatingButtonDrag() {
+        const floatingButton = this.shadowRoot.querySelector('#floatingButton');
+        const floatingContainer = this.shadowRoot.querySelector('#floatingContainer');
+        
+        if (!floatingButton || !floatingContainer) return;
+
+        let isDragging = false;
+        let startX, startY;
+        let initialLeft, initialTop;
+
+        floatingButton.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            const rect = floatingContainer.getBoundingClientRect();
+            startX = e.clientX;
+            startY = e.clientY;
+            initialLeft = rect.left;
+            initialTop = rect.top;
+            
+            isDragging = true;
+            
+            const onMouseMove = (e) => {
+                if (!isDragging) return;
+                
+                const dx = e.clientX - startX;
+                const dy = e.clientY - startY;
+                
+                let newLeft = initialLeft + dx;
+                let newTop = initialTop + dy;
+                
+                const maxX = window.innerWidth - rect.width;
+                const maxY = window.innerHeight - rect.height;
+                
+                newLeft = Math.max(0, Math.min(newLeft, maxX));
+                newTop = Math.max(0, Math.min(newTop, maxY));
+                
+                floatingContainer.style.left = `${newLeft}px`;
+                floatingContainer.style.top = `${newTop}px`;
+                floatingContainer.style.right = 'auto';
+                floatingContainer.style.bottom = 'auto';
+            };
+
+            const onMouseUp = () => {
+                isDragging = false;
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    }
+
+    _setupDrag() {
+        if (!this._config.draggable) return;
+        
+        const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+        const dragHandle = this.shadowRoot.querySelector('#dragHandle');
+        const logHeader = this.shadowRoot.querySelector('#logHeader');
+        const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+        
+        if (!popupContainer) return;
+
+        const startDrag = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            const rect = popupContainer.getBoundingClientRect();
+            this._state.dragInfo.isDragging = true;
+            this._state.dragInfo.startX = e.clientX;
+            this._state.dragInfo.startY = e.clientY;
+            this._state.dragInfo.initialLeft = rect.left;
+            this._state.dragInfo.initialTop = rect.top;
+            
+            const onMouseMove = (e) => {
+                if (!this._state.dragInfo.isDragging) return;
+                
+                const dx = e.clientX - this._state.dragInfo.startX;
+                const dy = e.clientY - this._state.dragInfo.startY;
+                
+                let newLeft = this._state.dragInfo.initialLeft + dx;
+                let newTop = this._state.dragInfo.initialTop + dy;
+                
+                const maxX = window.innerWidth - rect.width;
+                const maxY = window.innerHeight - rect.height;
+                
+                newLeft = Math.max(0, Math.min(newLeft, maxX));
+                newTop = Math.max(0, Math.min(newTop, maxY));
+                
+                popupContainer.style.left = `${newLeft}px`;
+                popupContainer.style.top = `${newTop}px`;
+                popupContainer.style.transform = 'none';
+            };
+
+            const onMouseUp = () => {
+                this._state.dragInfo.isDragging = false;
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+            };
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        };
+
+        if (dragHandle) {
+            dragHandle.addEventListener('mousedown', startDrag);
+        }
+
+        if (logHeader) {
+            logHeader.addEventListener('mousedown', (e) => {
+                if (!this._config.draggable) return;
+                if (e.target !== dragHandle && !e.target.classList.contains('toggle-btn') && 
+                    !e.target.classList.contains('clear-btn') && !e.target.classList.contains('export-btn') &&
+                    !e.target.classList.contains('import-btn') && !e.target.classList.contains('copy-btn') &&
+                    !e.target.classList.contains('popup-btn')) {
+                    startDrag(e);
+                }
+            });
+        }
+
+        if (minimizedTitle) {
+            minimizedTitle.addEventListener('mousedown', (e) => {
+                if (!this._config.draggable) return;
+                if (!e.target.classList.contains('minimized-popup-btn')) {
+                    startDrag(e);
+                }
+            });
+        }
+    }
+
+    _setupResize() {
+        const container = this.shadowRoot.querySelector('#popupContainer');
+        const resizeHandle = this.shadowRoot.querySelector('#resizeHandle');
+
+        if (!container || !resizeHandle) return;
+
+        let isResizing = false;
+        let startWidth, startHeight, startX, startY;
+
+        const startResize = (e) => {
+            if (container.classList.contains('minimized')) return;
+            
+            isResizing = true;
+            const rect = container.getBoundingClientRect();
+            startWidth = rect.width;
+            startHeight = rect.height;
+            startX = e.clientX;
+            startY = e.clientY;
+            
+            e.preventDefault();
+        };
+
+        const doResize = (e) => {
+            if (!isResizing) return;
+            
+            const width = startWidth + (e.clientX - startX);
+            const height = startHeight + (e.clientY - startY);
+            
+            container.style.width = `${Math.max(400, width)}px`;
+            container.style.height = `${Math.max(300, height)}px`;
+            
+            e.preventDefault();
+        };
+
+        const stopResize = () => {
+            isResizing = false;
+        };
+
+        resizeHandle.addEventListener('mousedown', startResize);
+        document.addEventListener('mousemove', doResize);
+        document.addEventListener('mouseup', stopResize);
+    }
+
+    _cleanup() {
+        this._eventListeners.forEach(({ type, handler, target }) => {
+            if (target && target.removeEventListener) {
+                target.removeEventListener(type, handler);
+            }
+        });
+        this._eventListeners.clear();
+        
+        if (this._fileInput && this._fileInput.parentNode) {
+            this._fileInput.parentNode.removeChild(this._fileInput);
+        }
+        
+        if (this._config.autoDestroy) {
+            this.remove();
+        }
+    }
+
+    _updateTheme() {
+        const container = this.shadowRoot.querySelector('.log-container');
+        if (container) {
+            container.className = `log-container ${this._state.showLogs ? 'expanded' : 'collapsed'} ${this._config.theme}`;
+        }
+    }
+
+    _updateStatsVisibility() {
+        const logFooter = this.shadowRoot.querySelector('.log-footer');
+        if (logFooter) {
+            logFooter.style.display = this._config.showStats ? 'block' : 'none';
+        }
+    }
+
+    _updateButtonsVisibility() {
+        const floatingContainer = this.shadowRoot.querySelector('#floatingContainer');
+        if (floatingContainer) {
+            if (this._config.hideButton) {
+                floatingContainer.style.display = 'none';
+            } else {
+                floatingContainer.style.display = this._state.isOpen ? 'none' : 'block';
+            }
+        }
+    }
+
+    _updateCloseButton() {
+        const closeBtn = this.shadowRoot.querySelector('#closeBtn');
+        const closeMinimizedBtn = this.shadowRoot.querySelector('#closeMinimizedBtn');
+        
+        const title = this._config.autoDestroy ? '关闭并销毁' : '隐藏';
+        
+        if (closeBtn) {
+            closeBtn.title = title;
+        }
+        if (closeMinimizedBtn) {
+            closeMinimizedBtn.title = title;
+        }
+    }
+
+    _updateStats() {
+        const counts = {
+            total: this._state.logs.length,
+            info: 0,
+            success: 0,
+            warning: 0,
+            error: 0,
+            ignore: 0
+        };
+
+        this._state.logs.forEach(log => {
+            if (counts[log.type] !== undefined) {
+                counts[log.type]++;
+            }
+        });
+
+        const logCount = this.shadowRoot.querySelector('#logCount');
+        const minimizedLogCount = this.shadowRoot.querySelector('#minimizedLogCount');
+        const totalCount = this.shadowRoot.querySelector('#totalCount');
+        const infoCount = this.shadowRoot.querySelector('#infoCount');
+        const successCount = this.shadowRoot.querySelector('#successCount');
+        const warningCount = this.shadowRoot.querySelector('#warningCount');
+        const errorCount = this.shadowRoot.querySelector('#errorCount');
+        const ignoreCount = this.shadowRoot.querySelector('#ignoreCount');
+
+        if (logCount) logCount.textContent = counts.total;
+        if (minimizedLogCount) minimizedLogCount.textContent = counts.total;
+        if (totalCount) totalCount.textContent = counts.total;
+        if (infoCount) infoCount.textContent = counts.info;
+        if (successCount) successCount.textContent = counts.success;
+        if (warningCount) warningCount.textContent = counts.warning;
+        if (errorCount) errorCount.textContent = counts.error;
+        if (ignoreCount) ignoreCount.textContent = counts.ignore;
+    }
+
+    _applyFilters() {
+        const checkboxes = this.shadowRoot.querySelectorAll('.filter-checkbox');
+        checkboxes.forEach(checkbox => {
+            const type = checkbox.dataset.type;
+            this._state.filters[type] = checkbox.checked;
+        });
+
+        this._updateLogsDisplay();
+    }
+
+    _triggerImport() {
+        this._fileInput.click();
+    }
+
+    async _handleFileImport(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        try {
+            this.addLog('开始导入日志文件...', 'info');
+
+            const text = await file.text();
+            let importedLogs = [];
+            let format = 'unknown';
+
+            try {
+                const parsed = JSON.parse(text);
+                if (Array.isArray(parsed)) {
+                    importedLogs = parsed;
+                    format = 'json';
+                } else if (typeof parsed === 'object' && parsed.logs && Array.isArray(parsed.logs)) {
+                    importedLogs = parsed.logs;
+                    format = 'json-with-metadata';
+                }
+            } catch (e) {
+                const lines = text.split('\n').filter(line => line.trim());
+                importedLogs = this._parseTextLogs(lines);
+                format = 'text';
+            }
+
+            if (importedLogs.length === 0) {
+                throw new Error('文件中没有找到有效的日志数据');
+            }
+
+            const validLogs = importedLogs
+                .map(log => this._normalizeLogEntry(log))
+                .filter(log => log !== null);
+
+            if (validLogs.length === 0) {
+                throw new Error('文件中没有有效的日志条目');
+            }
+
+            this._state.logs.push(...validLogs);
+            this._trimLogs();
+
+            this._updateLogsDisplay();
+            this._updateStats();
+
+            this._showImportNotice(`成功导入 ${validLogs.length} 条日志 (${format}格式)`, 'success');
+            this.addLog(`从文件导入 ${validLogs.length} 条日志`, 'success');
+
+            this.dispatchEvent(new CustomEvent('nv-log-import', {
+                detail: { 
+                    count: validLogs.length, 
+                    format,
+                    logs: validLogs 
+                }
+            }));
+
+        } catch (error) {
+            console.error('导入日志失败:', error);
+            this._showImportNotice(`导入失败: ${error.message}`, 'error');
+            this.addLog(`导入日志失败: ${error.message}`, 'error');
+        }
+    }
+
+    _parseTextLogs(lines) {
+        const logs = [];
+        const timestampRegex = /^\[(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d+)?)\]/;
+        const timeRegex = /^\[(\d{2}:\d{2}:\d{2}(?:\.\d+)?)\]/;
+        const typeRegex = /\[(INFO|SUCCESS|WARNING|ERROR|IGNORE)\]/i;
+
+        lines.forEach((line, index) => {
+            if (!line.trim()) return;
+
+            let time = Date.now();
+            let type = 'info';
+            let message = line;
+
+            let timeMatch = line.match(timestampRegex) || line.match(timeRegex);
+            if (timeMatch) {
+                try {
+                    time = new Date(timeMatch[1]).getTime() || Date.now() - (lines.length - index) * 1000;
+                } catch (e) {
+                    time = Date.now() - (lines.length - index) * 1000;
+                }
+                message = line.substring(timeMatch[0].length).trim();
+            }
+
+            const typeMatch = message.match(typeRegex);
+            if (typeMatch) {
+                const typeStr = typeMatch[1].toLowerCase();
+                if (['info', 'success', 'warning', 'error', 'ignore'].includes(typeStr)) {
+                    type = typeStr;
+                }
+                message = message.replace(typeRegex, '').trim();
+            }
+
+            logs.push({ time, type, message });
+        });
+
+        return logs;
+    }
+
+    _normalizeLogEntry(log) {
+        if (log === null || log === undefined) {
+            return null;
+        }
+
+        if (typeof log === 'string') {
+            return {
+                time: Date.now(),
+                type: 'info',
+                message: log
+            };
+        }
+
+        if (typeof log === 'object') {
+            const normalized = {
+                time: log.time || log.timestamp || Date.now(),
+                type: (log.type || log.level || 'info').toLowerCase(),
+                message: String(log.message || log.msg || log.text || JSON.stringify(log))
+            };
+
+            if (!['info', 'success', 'warning', 'error', 'ignore'].includes(normalized.type)) {
+                normalized.type = 'info';
+            }
+
+            if (typeof normalized.time !== 'number' || isNaN(normalized.time)) {
+                normalized.time = Date.now();
+            }
+
+            return normalized;
+        }
+
+        return null;
+    }
+
+    _showImportNotice(message, type = 'info') {
+        const logContent = this.shadowRoot.querySelector('#logContent');
+        if (!logContent) return;
+
+        const notice = document.createElement('div');
+        notice.className = `import-notice ${type}`;
+        notice.textContent = message;
+
+        logContent.appendChild(notice);
+
+        setTimeout(() => {
+            if (notice.parentNode === logContent) {
+                logContent.removeChild(notice);
+            }
+        }, 3000);
+    }
+
+    /**
+     * 添加日志
+     */
+    addLog(message, type = 'info', timestamp = Date.now()) {
+        let normalizedLog;
+
+        if (typeof message === 'object' && message !== null) {
+            normalizedLog = this._normalizeLogEntry(message);
+            if (!normalizedLog) {
+                console.warn('无效的日志对象:', message);
+                return;
+            }
+        } else {
+            if (!['info', 'success', 'warning', 'error', 'ignore'].includes(type)) {
+                type = 'info';
+            }
+
+            normalizedLog = {
+                message: String(message),
+                type,
+                time: timestamp
+            };
+        }
+
+        this._state.logs.push(normalizedLog);
+        this._trimLogs();
+
+        this._updateLogsDisplay();
+        this._updateStats();
+
+        this.dispatchEvent(new CustomEvent('nv-log-add', {
+            detail: { 
+                log: normalizedLog, 
+                total: this._state.logs.length,
+                stats: this._getStats()
+            }
+        }));
+    }
+
+    /**
+     * 清空所有日志
+     */
+    clearLogs() {
+        const clearedCount = this._state.logs.length;
+        this._state.logs = [];
+
+        this._updateLogsDisplay();
+        this._updateStats();
+
+        this.dispatchEvent(new CustomEvent('nv-log-clear', {
+            detail: { clearedCount }
+        }));
+    }
+
+    /**
+     * 切换显示/隐藏
+     */
+    toggleVisibility() {
+        this._state.showLogs = !this._state.showLogs;
+
+        const container = this.shadowRoot.querySelector('.log-container');
+        if (container) {
+            container.className = `log-container ${this._state.showLogs ? 'expanded' : 'collapsed'} ${this._config.theme}`;
+        }
+        
+        const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
+        if (toggleBtn) {
+            toggleBtn.title = this._state.showLogs ? '隐藏日志' : '显示日志';
+            toggleBtn.textContent = this._state.showLogs ? '👁️' : '👁️‍🗨️';
+        }
+
+        this.dispatchEvent(new CustomEvent('nv-log-toggle', {
+            detail: { visible: this._state.showLogs }
+        }));
+    }
+
+    /**
+     * 导出日志为文件
+     */
+    exportLogs(format = 'json') {
+        try {
+            if (this._state.logs.length === 0) {
+                this.addLog('没有日志可导出', 'warning');
+                return;
+            }
+
+            let content = '';
+            let mimeType = '';
+            let extension = '';
+
+            if (format === 'json') {
+                const exportData = {
+                    exportTime: new Date().toISOString(),
+                    totalLogs: this._state.logs.length,
+                    logs: this._state.logs
+                };
+                content = JSON.stringify(exportData, null, 2);
+                mimeType = 'application/json';
+                extension = 'json';
+            } else {
+                content = this._state.logs.map(log => {
+                    const time = new Date(log.time).toLocaleString('zh-CN');
+                    return `[${time}] [${log.type.toUpperCase()}] ${log.message}`;
+                }).join('\n');
+                mimeType = 'text/plain;charset=utf-8';
+                extension = 'txt';
+            }
+
+            const blob = new Blob([content], { type: mimeType });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+
+            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+            a.href = url;
+            a.download = `logs_${timestamp}.${extension}`;
+            a.click();
+
+            URL.revokeObjectURL(url);
+
+            this.addLog(`日志已导出 (${this._state.logs.length} 条, ${format}格式)`, 'success');
+
+        } catch (error) {
+            this.addLog(`导出日志失败: ${error.message}`, 'error');
+        }
+    }
+
+    /**
+     * 导入日志
+     */
+    async importLogs(content, format = 'auto') {
+        try {
+            let importedLogs = [];
+            let detectedFormat = 'unknown';
+
+            if (format === 'auto' || format === 'json') {
+                try {
+                    const parsed = JSON.parse(content);
+                    if (Array.isArray(parsed)) {
+                        importedLogs = parsed;
+                        detectedFormat = 'json';
+                    } else if (typeof parsed === 'object' && parsed.logs && Array.isArray(parsed.logs)) {
+                        importedLogs = parsed.logs;
+                        detectedFormat = 'json-with-metadata';
+                }
+                } catch (e) {
+                    if (format === 'json') {
+                        throw new Error('JSON格式解析失败');
+                    }
+                }
+            }
+
+            if (importedLogs.length === 0) {
+                const lines = content.split('\n').filter(line => line.trim());
+                importedLogs = this._parseTextLogs(lines);
+                detectedFormat = 'text';
+            }
+
+            if (importedLogs.length === 0) {
+                throw new Error('没有找到有效的日志数据');
+            }
+
+            const validLogs = importedLogs
+                .map(log => this._normalizeLogEntry(log))
+                .filter(log => log !== null);
+
+            if (validLogs.length === 0) {
+                throw new Error('没有有效的日志条目');
+            }
+
+            this._state.logs.push(...validLogs);
+            this._trimLogs();
+
+            this._updateLogsDisplay();
+            this._updateStats();
+
+            this.addLog(`导入 ${validLogs.length} 条日志 (${detectedFormat}格式)`, 'success');
+
+            this.dispatchEvent(new CustomEvent('nv-log-import', {
+                detail: { 
+                    count: validLogs.length, 
+                    format: detectedFormat,
+                    logs: validLogs 
+                }
+            }));
+
+            return { success: true, count: validLogs.length, format: detectedFormat };
+
+        } catch (error) {
+            console.error('导入日志失败:', error);
+            this.addLog(`导入日志失败: ${error.message}`, 'error');
+            throw error;
+        }
+    }
+
+    /**
+     * 复制日志到剪贴板
+     */
+    async copyLogs() {
+        try {
+            const logsText = this._state.logs.map(log => {
+                const time = new Date(log.time).toLocaleString('zh-CN');
+                return `[${time}] [${log.type.toUpperCase()}] ${log.message}`;
+            }).join('\n');
+
+            await navigator.clipboard.writeText(logsText);
+            this.addLog('日志已复制到剪贴板', 'success');
+        } catch (error) {
+            this.addLog(`复制日志失败: ${error.message}`, 'error');
+        }
+    }
+
+    /**
+     * 获取所有日志
+     */
+    getLogs() {
+        return [...this._state.logs];
+    }
+
+    /**
+     * 获取过滤后的日志
+     */
+    getLogsByType(types) {
+        if (!Array.isArray(types)) {
+            types = [types];
+        }
+
+        return this._state.logs.filter(log => types.includes(log.type));
+    }
+
+    /**
+     * 获取统计信息
+     */
+    _getStats() {
+        const counts = {
+            total: this._state.logs.length,
+            info: 0,
+            success: 0,
+            warning: 0,
+            error: 0,
+            ignore: 0
+        };
+
+        this._state.logs.forEach(log => {
+            if (counts[log.type] !== undefined) {
+                counts[log.type]++;
+            }
+        });
+
+        return counts;
+    }
+
+    /**
+     * 设置最大日志数量
+     */
+    setMaxLogs(max) {
+        this._config.maxLogs = Math.max(1, parseInt(max, 10) || 100);
+        this._trimLogs();
+        this._updateLogsDisplay();
+        this._updateStats();
+    }
+
+    /**
+     * 设置主题
+     */
+    setTheme(theme) {
+        this._config.theme = theme === 'light' ? 'light' : 'dark';
+        this._updateTheme();
+    }
+
+    /**
+     * 是否显示时间
+     */
+    setShowTime(show) {
+        this._config.showTime = !!show;
+        this._updateLogsDisplay();
+    }
+
+    /**
+     * 设置时间格式
+     */
+    setTimeFormat(format) {
+        this._config.timeFormat = format;
+        this._updateLogsDisplay();
+    }
+
+    /**
+     * 是否自动滚动
+     */
+    setAutoScroll(autoScroll) {
+        this._config.autoScroll = !!autoScroll;
+    }
+
+    /**
+     * 是否显示统计
+     */
+    setShowStats(show) {
+        this._config.showStats = !!show;
+        this._updateStatsVisibility();
+    }
+
+    /**
+     * 设置是否隐藏按钮
+     */
+    setHideButton(hide) {
+        this._config.hideButton = !!hide;
+        this._updateButtonsVisibility();
+    }
+
+    /**
+     * 设置是否自动销毁
+     */
+    setAutoDestroy(autoDestroy) {
+        this._config.autoDestroy = !!autoDestroy;
+        this._updateCloseButton();
+    }
+
+    /**
+     * 设置是否启用拖拽
+     */
+    setDraggable(draggable) {
+        this._config.draggable = !!draggable;
+        this._updateDraggableState();
+    }
+
+    /**
+     * 打开日志查看器
+     */
+    open() {
+        if (!this._state.isOpen) {
+            const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+            if (popupContainer) {
+                popupContainer.style.display = 'block';
+                popupContainer.classList.add('open');
+                popupContainer.classList.remove('minimized');
+                
+                const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+                if (minimizedTitle) {
+                    minimizedTitle.style.display = 'none';
+                }
+                
+                const width = 800;
+                const height = 600;
+                const left = Math.max(0, (window.innerWidth - width) / 2);
+                const top = Math.max(0, (window.innerHeight - height) / 2);
+                
+                popupContainer.style.width = `${width}px`;
+                popupContainer.style.height = `${height}px`;
+                popupContainer.style.left = `${left}px`;
+                popupContainer.style.top = `${top}px`;
+                popupContainer.style.transform = 'none';
+                
+                this._state.isMinimized = false;
+                this._state.showLogs = true;
+                this._updateLogsDisplay();
+                this._updateTheme();
+                this._updateDraggableState();
+                
+                if (!this._config.hideButton) {
+                    const floatingContainer = this.shadowRoot.querySelector('#floatingContainer');
+                    if (floatingContainer) {
+                        floatingContainer.style.display = 'none';
+                    }
+                }
+            }
+            
+            this._state.isOpen = true;
+            
+            this.addLog('📁 日志查看器已打开', 'info');
+        }
+    }
+
+    /**
+     * 关闭日志查看器
+     */
+    clos() {
+        if (this._state.isOpen) {
+            const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+            if (popupContainer) {
+                this._state.originalPosition = {
+                    x: parseInt(popupContainer.style.left) || 0,
+                    y: parseInt(popupContainer.style.top) || 0
+                };
+                
+                popupContainer.classList.remove('open');
+                popupContainer.style.display = 'none';
+                
+                const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+                if (minimizedTitle) {
+                    minimizedTitle.style.display = 'none';
+                }
+            }
+            
+            this._state.isOpen = false;
+            
+            if (!this._config.hideButton) {
+                const floatingContainer = this.shadowRoot.querySelector('#floatingContainer');
+                if (floatingContainer) {
+                    floatingContainer.style.display = 'block';
+                }
+            }
+            
+            this.addLog('📁 日志查看器已关闭', 'info');
+
+            if (this._config.autoDestroy) {
+                setTimeout(() => {
+                    this._cleanup();
+                }, 100);
+            }
+        }
+    }
+
+    /**
+     * 最小化日志查看器
+     */
+    _minimize() {
+        const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+        const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+        
+        if (popupContainer && minimizedTitle) {
+            this._state.originalSize = {
+                width: popupContainer.style.width || '800px',
+                height: popupContainer.style.height || '600px',
+                minHeight: popupContainer.style.minHeight
+            };
+            
+            popupContainer.classList.add('minimized');
+            popupContainer.style.width = '320px';
+            popupContainer.style.height = '40px';
+            popupContainer.style.minHeight = '40px';
+            popupContainer.style.minWidth = '320px';
+            minimizedTitle.style.display = 'flex';
+            
+            this._state.isMinimized = true;
+            
+            this.addLog('📱 日志查看器已最小化', 'info');
+        }
+    }
+
+    /**
+     * 恢复日志查看器
+     */
+    _restore() {
+        const popupContainer = this.shadowRoot.querySelector('#popupContainer');
+        const minimizedTitle = this.shadowRoot.querySelector('#minimizedTitle');
+        
+        if (popupContainer && minimizedTitle) {
+            popupContainer.classList.remove('minimized');
+            minimizedTitle.style.display = 'none';
+            
+            if (this._state.originalSize) {
+                popupContainer.style.width = this._state.originalSize.width;
+                popupContainer.style.height = this._state.originalSize.height;
+                if (this._state.originalSize.minHeight) {
+                    popupContainer.style.minHeight = this._state.originalSize.minHeight;
+                } else {
+                    popupContainer.style.minHeight = '300px';
+                }
+            } else {
+                popupContainer.style.width = '800px';
+                popupContainer.style.height = '600px';
+                popupContainer.style.minHeight = '300px';
+            }
+            
+            popupContainer.style.minWidth = '400px';
+            this._state.isMinimized = false;
+            
+            this.addLog('📱 日志查看器已恢复', 'info');
+        }
+    }
+}
+
+
+NvLogViewer.ELEMENT_NAME = 'nv-log-viewer';
+
+/**
+ * 单次使用的日志查看器
+ * @param {Object} options 配置选项
+ * @returns {Promise<NvLogViewer>} 日志查看器实例
+ */
+const once = async (options = {}) => {
+    let el = document.createElement('nv-log-viewer');
+
+    el.setAttribute("hide-button", options.hideButton !== false ? "true" : "false");
+    el.setAttribute("auto-destroy", options.autoDestroy !== false ? "true" : "false");
+
+    if (options.maxLogs) el.setAttribute("max-logs", options.maxLogs);
+    if (options.theme) el.setAttribute("theme", options.theme);
+    if (options.showTime !== undefined) el.setAttribute("show-time", options.showTime);
+    if (options.timeFormat) el.setAttribute("time-format", options.timeFormat);
+    if (options.showStats !== undefined) el.setAttribute("show-stats", options.showStats);
+    if (options.autoScroll !== undefined) el.setAttribute("auto-scroll", options.autoScroll);
+
+    document.body.appendChild(el);
+
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    el.open();
+
+    return el;
+};
+
+// 注册组件
+if (!customElements.get('nv-log-viewer')) {
+    customElements.define('nv-log-viewer', NvLogViewer);
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { NvLogViewer, once };
+}