反馈

产品价格 (USD)

产品成本 (USD)

运费 (USD)

平台费率 (%)

广告费用 (USD)

仓储费 (USD)

退货率 (%)

税率 (%)

汇率 (USD to CNY)

产品列表 (一行一个产品，JSON格式)

response.json())
                .then(result => {
                    if (result.status === 'success') {
                        leadCaptureForm.style.display = 'none';
                        leadSuccessMessage.style.display = 'block';
                        downloadGuideBtn.href = '/download/guide?phone=' + encodeURIComponent(data.phone);
                    } else {
                        alert(result.message || '提交失败');
                    }
                });
            });
            
            // Auto-show modal after 30 seconds
            if (!sessionStorage.getItem('leadModalShown')) {
                setTimeout(function() {
                    leadCaptureModal.classList.add('show');
                    sessionStorage.setItem('leadModalShown', 'true');
                }, 30000);
            }
            
            // Chat Modal
            const chatBtn = document.getElementById('chatBtn');
            const chatModal = document.getElementById('chatModal');
            const closeChatModal = document.getElementById('closeChatModal');
            const chatZh = document.getElementById('chatZh');
            const chatEn = document.getElementById('chatEn');
            const chatZhContent = document.getElementById('chatZhContent');
            const chatEnContent = document.getElementById('chatEnContent');
            
            if (chatBtn && chatModal) {
                chatBtn.addEventListener('click', function() {
                    chatModal.classList.add('show');
                });
                
                if (closeChatModal) {
                    closeChatModal.addEventListener('click', function() {
                        chatModal.classList.remove('show');
                    });
                }
                
                chatModal.addEventListener('click', function(e) {
                    if (e.target === chatModal) {
                        chatModal.classList.remove('show');
                    }
                });
                
                if (chatZh && chatZhContent && chatEn && chatEnContent) {
                    chatZh.addEventListener('click', function() {
                        chatZh.classList.add('active');
                        chatEn.classList.remove('active');
                        chatZhContent.classList.remove('hidden');
                        chatEnContent.classList.add('hidden');
                    });
                    
                    chatEn.addEventListener('click', function() {
                        chatEn.classList.add('active');
                        chatZh.classList.remove('active');
                        chatEnContent.classList.remove('hidden');
                        chatZhContent.classList.add('hidden');
                    });
                }
            }
            
            // Navigation Bar Chat Button
            const navChatBtn = document.getElementById('navChatBtn');
            if (navChatBtn) {
                navChatBtn.addEventListener('click', function() {
                    chatModal.classList.add('show');
                });
            }
            
            // Footer WeChat Button
            const footerWechatBtn = document.getElementById('footerWechatBtn');
            if (footerWechatBtn) {
                footerWechatBtn.addEventListener('click', function() {
                    chatModal.classList.add('show');
                    // Switch to Chinese content
                    chatZh.classList.add('active');
                    chatEn.classList.remove('active');
                    chatZhContent.classList.remove('hidden');
                    chatEnContent.classList.add('hidden');
                });
            }
            
            // Mobile Menu Toggle
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileMenu = document.getElementById('mobileMenu');
            if (mobileMenuBtn && mobileMenu) {
                mobileMenuBtn.addEventListener('click', function() {
                    mobileMenu.classList.toggle('active');
                    const icon = mobileMenuBtn.querySelector('i');
                    if (mobileMenu.classList.contains('active')) {
                        icon.classList.remove('fa-bars');
                        icon.classList.add('fa-times');
                    } else {
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                });
            }
            
            // Close mobile menu when clicking a link
            const mobileLinks = mobileMenu.querySelectorAll('a');
            mobileLinks.forEach(function(link) {
                link.addEventListener('click', function() {
                    mobileMenu.classList.remove('active');
                    const icon = mobileMenuBtn.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                });
            });
        });
    </script>

let currentLang = localStorage.getItem('preferredLang') || 'zh';

function getLangString(key) {
    return langStrings[currentLang][key] || key;
}

function toggleLanguage() {
    currentLang = currentLang === 'zh' ? 'en' : 'zh';
    localStorage.setItem('preferredLang', currentLang);
    updatePageLanguage();
}

getErrorMessage(errorType, detail = '') {
        const messages = {
            network: {
                zh: '网络连接失败，请检查网络设置后重试',
                en: 'Network connection failed. Please check your network and try again.'
            },
            validation: {
                zh: '验证失败：' + (detail || '请检查输入内容'),
                en: 'Validation failed: ' + (detail || 'Please check your input.')
            },
            server: {
                zh: '服务器内部错误，请稍后重试',
                en: 'Server internal error. Please try again later.'
            },
            auth: {
                zh: '请先登录或注册账户',
                en: 'Please login or register first.'
            },
            quota: {
                zh: '今日使用次数已用完，请升级账户',
                en: 'Daily usage limit reached. Please upgrade your account.'
            },
            file: {
                zh: '文件处理失败：' + (detail || '未知错误'),
                en: 'File processing failed: ' + (detail || 'Unknown error.')
            },
            unknown: {
                zh: '发生未知错误：' + (detail || '请重试'),
                en: 'Unknown error occurred: ' + (detail || 'Please try again.')
            }
        };
        return messages[errorType]?.[currentLang] || messages.unknown[currentLang];
    }

showError(errorType, detail = '') {
        const message = this.getErrorMessage(errorType, detail);
        this.showNotification(message, 'error');
    }

showNotification(message, type = 'info') {
        document.querySelectorAll('.notification').forEach(n => n.remove());

const notification = document.createElement('div');
        notification.className = 'notification notification-' + type;

const iconMap = {
            success: 'check-circle',
            error: 'times-circle',
            warning: 'exclamation-triangle',
            info: 'info-circle'
        };

notification.innerHTML = '<i class="fas fa-' + iconMap[type] + '"></i><span>' + message + '</span><button class="notification-close" onclick="this.parentElement.remove()">×</button>';

notification.style.cssText = 'position: fixed; top: 80px; right: 20px; left: 20px; padding: 16px 24px; background: ' + this.getNotificationColor(type) + '; color: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 12px; z-index: 10001; animation: slideIn 0.3s ease; font-weight: 600; max-width: 500px; margin: 0 auto;';

document.body.appendChild(notification);

setTimeout(() => {
            notification.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    }

getNotificationColor(type) {
        const colors = {
            success: 'linear-gradient(135deg, #10b981, #059669)',
            error: 'linear-gradient(135deg, #ef4444, #dc2626)',
            warning: 'linear-gradient(135deg, #f59e0b, #d97706)',
            info: 'linear-gradient(135deg, #3b82f6, #2563eb)'
        };
        return colors[type] || colors.info;
    }

validateRequired(field, fieldName) {
        if (!this.validationRules.required(field.value)) {
            const msg = currentLang === 'zh' ? fieldName + '不能为空' : fieldName + ' is required';
            this.showNotification(msg, 'warning');
            field.classList.add('input-error');
            field.classList.remove('input-success');
            return false;
        }
        field.classList.remove('input-error');
        field.classList.add('input-success');
        return true;
    }

validateEmail(email) {
        if (!this.validationRules.email(email)) {
            const msg = currentLang === 'zh' ? '请输入有效的邮箱地址' : 'Please enter a valid email address';
            this.showNotification(msg, 'warning');
            return false;
        }
        return true;
    }

validateField(field, fieldName, rules) {
        const value = field.value;
        let isValid = true;

for (const rule of rules) {
            if (typeof rule === 'string') {
                if (rule === 'required' && !this.validationRules.required(value)) {
                    const msg = currentLang === 'zh' ? fieldName + '不能为空' : fieldName + ' is required';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'email' && value && !this.validationRules.email(value)) {
                    const msg = currentLang === 'zh' ? '请输入有效的邮箱地址' : 'Please enter a valid email address';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'phone' && value && !this.validationRules.phone(value)) {
                    const msg = currentLang === 'zh' ? '请输入有效的电话号码' : 'Please enter a valid phone number';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'url' && value && !this.validationRules.url(value)) {
                    const msg = currentLang === 'zh' ? '请输入有效的URL地址' : 'Please enter a valid URL';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'numeric' && value && !this.validationRules.numeric(value)) {
                    const msg = currentLang === 'zh' ? '请输入有效的数字' : 'Please enter a valid number';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'positive' && value && !this.validationRules.positive(value)) {
                    const msg = currentLang === 'zh' ? '请输入正数' : 'Please enter a positive number';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule === 'integer' && value && !this.validationRules.integer(value)) {
                    const msg = currentLang === 'zh' ? '请输入整数' : 'Please enter an integer';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                }
            } else if (typeof rule === 'object') {
                if (rule.minLength && !this.validationRules.minLength(value, rule.minLength)) {
                    const msg = currentLang === 'zh' ? fieldName + '至少需要' + rule.minLength + '个字符' : fieldName + ' must be at least ' + rule.minLength + ' characters';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                } else if (rule.maxLength && !this.validationRules.maxLength(value, rule.maxLength)) {
                    const msg = currentLang === 'zh' ? fieldName + '不能超过' + rule.maxLength + '个字符' : fieldName + ' cannot exceed ' + rule.maxLength + ' characters';
                    this.showNotification(msg, 'warning');
                    isValid = false;
                    break;
                }
            }
        }

if (isValid && value) {
            field.classList.remove('input-error');
            field.classList.add('input-success');
        } else if (!isValid) {
            field.classList.add('input-error');
            field.classList.remove('input-success');
        }

return isValid;
    }

handleApiError(response) {
        return new Promise((resolve, reject) => {
            response.json().then(data => {
                if (data.status === 'error') {
                    const errorType = data.error_type || 'unknown';
                    this.showError(errorType, data.message);
                    reject(data);
                } else {
                    resolve(data);
                }
            }).catch(() => {
                this.showError('server');
                reject({ status: 'error', message: 'Server response error' });
            });
        });
    }
}

const errorHandler = new ErrorHandler();

// Add animation styles
const animStyle = document.createElement('style');
animStyle.textContent = `
    @keyframes slideIn { 
        from { opacity: 0; transform: translateX(100px); } 
        to { opacity: 1; transform: translateX(0); } 
    } 
    @keyframes slideOut { 
        from { opacity: 1; transform: translateX(0); } 
        to { opacity: 0; transform: translateX(100px); } 
    }
    .notification-close {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.2);
        border: none;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .notification-close:hover {
        background: rgba(255,255,255,0.3);
    }
`;
document.head.appendChild(animStyle);
</script>

async function loadUsageStats() {
    try {
        const response = await fetch('/api/tools/usage-stats', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ user_id: currentUserId || null })
        });

const result = await response.json();
        
        if (result.status === 'success') {
            updateUsageBadge('profitUsageBadge', result.data['profit-calculator']);
        }
    } catch (error) {
        console.error('Failed to load usage stats:', error);
    }
}

function openFeedbackModal() {
    document.getElementById('feedbackModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeFeedbackModal() {
    document.getElementById('feedbackModal').style.display = 'none';
    document.body.style.overflow = '';
}

function closeFeedbackSuccessModal() {
    document.getElementById('feedbackSuccessModal').style.display = 'none';
    document.body.style.overflow = '';
}

async function submitFeedback(event) {
    event.preventDefault();
    
    const data = {
        user_id: currentUserId || null,
        type: document.getElementById('feedbackType').value,
        tool: document.getElementById('feedbackTool').value,
        content: document.getElementById('feedbackContent').value,
        contact: document.getElementById('feedbackContact').value
    };

try {
        const response = await fetch('/api/feedback', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });

const result = await response.json();
        
        if (result.status === 'success') {
            closeFeedbackModal();
            document.getElementById('feedbackSuccessModal').style.display = 'flex';
        }
    } catch (error) {
        console.error('Failed to submit feedback:', error);
    }
}

async function calculateProfit() {
    const submitBtn = document.querySelector('.btn-gradient');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 计算中...';
    submitBtn.disabled = true;

const data = {
        user_id: currentUserId || null,
        product_price: document.getElementById('productPrice').value,
        product_cost: document.getElementById('productCost').value,
        shipping_fee: document.getElementById('shippingFee').value,
        platform_fee_rate: document.getElementById('platformFeeRate').value,
        exchange_rate: document.getElementById('exchangeRate').value,
        ad_fee: document.getElementById('adFee').value,
        storage_fee: document.getElementById('storageFee').value,
        return_rate: document.getElementById('returnRate').value,
        tax_rate: document.getElementById('taxRate').value
    };

try {
        const response = await fetch('/api/tools/profit-calculator', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });

async function batchCalculateProfit() {
    const data = {
        user_id: currentUserId || null,
        products: JSON.parse(document.getElementById('batchProducts').value)
    };

try {
        const response = await fetch('/api/tools/profit-calculator/batch', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });

// Initialize
document.addEventListener('DOMContentLoaded', function() {
        updatePageLanguage();
    loadUsageStats();
});
</script>

// 1. 用户引导配置
const guideSteps = [
    {
        selector: '.input-section',
        title: '输入原始Listing',
        content: '在这里输入您的原始产品标题、描述和卖点。支持多种语言的自动检测。'
    },
    {
        selector: '.translation-options',
        title: '设置翻译选项',
        content: '选择源语言和目标语言，以及翻译引擎。我们支持Google翻译、百度翻译等多个引擎。'
    },
    {
        selector: '#translateButton',
        title: '开始翻译',
        content: '点击翻译按钮，系统将自动翻译并优化您的Listing，使其更适合目标市场。'
    },
    {
        selector: '.result-section',
        title: '查看翻译结果',
        content: '翻译完成后，您可以查看结果、复制内容或导出数据。所有操作都会保存到历史记录。'
    }
];

// 2. 初始化用户引导
function initUserGuide() {
    const guideBtn = document.createElement('button');
    guideBtn.className = 'ck-btn ck-btn-secondary ck-btn-sm';
    guideBtn.innerHTML = '<i class="fas fa-question-circle"></i> 使用指南';
    guideBtn.style.cssText = 'position: fixed; bottom: 20px; right: 20px; z-index: 9999;';
    
    guideBtn.addEventListener('click', () => {
        const guide = new UserGuide({ steps: guideSteps });
        guide.start();
    });
    
    document.body.appendChild(guideBtn);
}

// 3. 初始化示例数据按钮
function initExampleData() {
    const inputSection = document.querySelector('.input-section');
    if (!inputSection) return;
    
    const exampleBtn = document.createElement('button');
    exampleBtn.className = 'ck-btn ck-btn-outline ck-btn-sm';
    exampleBtn.innerHTML = '<i class="fas fa-lightbulb"></i> 加载示例';
    exampleBtn.style.cssText = 'margin-left: 10px;';
    
    exampleBtn.addEventListener('click', () => {
        // 填充示例数据
        const titleInput = document.querySelector('#titleInput') || document.querySelector('input[name="title"]');
        const descInput = document.querySelector('#descriptionInput') || document.querySelector('textarea[name="description"]');
        
        if (titleInput) {
            titleInput.value = 'Wireless Bluetooth Earbuds with Charging Case - Premium Sound Quality';
            titleInput.dispatchEvent(new Event('input'));
        }
        
        if (descInput) {
            descInput.value = `High-quality wireless earbuds with advanced noise cancellation technology. 
            
Features:
- Bluetooth 5.0 for stable connection
- Active Noise Cancellation (ANC)
- 24 hours battery life with charging case
- IPX5 water resistance rating
- Touch control for easy operation
- Built-in microphone for calls
- Compact and lightweight design

Perfect for music lovers, commuters, and professionals who demand the best audio experience on the go.`;
            descInput.dispatchEvent(new Event('input'));
        }
        
        if (window.errorHandler) {
            window.errorHandler.showNotification('示例数据已加载', 'success');
        }
    });
    
    // 找到标题并添加按钮
    const sectionTitle = inputSection.querySelector('h2');
    if (sectionTitle) {
        sectionTitle.appendChild(exampleBtn);
    } else {
        inputSection.insertBefore(exampleBtn, inputSection.firstChild);
    }
}

// 4. 初始化数据导出功能
function initDataExport() {
    // 监听翻译完成事件
    const originalTranslate = window.translateListing;
    if (originalTranslate) {
        window.translateListing = async function(...args) {
            await originalTranslate.apply(this, args);
            addExportButtons();
        };
    }
    
    // 为结果区域添加导出按钮
    function addExportButtons() {
        const resultSection = document.querySelector('.result-section') || document.querySelector('.translation-result');
        if (!resultSection) return;
        
        // 检查是否已有导出按钮
        if (resultSection.querySelector('.export-buttons')) return;
        
        const exportDiv = document.createElement('div');
        exportDiv.className = 'export-buttons';
        exportDiv.style.cssText = `
            display: flex;
            gap: 8px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
        `;
        
        exportDiv.innerHTML = `
            <button class="ck-btn ck-btn-secondary ck-btn-sm" onclick="exportAsJSON()">
                <i class="fas fa-file-code"></i> JSON
            </button>
            <button class="ck-btn ck-btn-secondary ck-btn-sm" onclick="exportAsCSV()">
                <i class="fas fa-file-csv"></i> CSV
            </button>
            <button class="ck-btn ck-btn-secondary ck-btn-sm" onclick="exportAsTXT()">
                <i class="fas fa-file-alt"></i> TXT
            </button>
            <button class="ck-btn ck-btn-secondary ck-btn-sm" onclick="copyToClipboard()">
                <i class="fas fa-copy"></i> 复制
            </button>
        `;
        
        resultSection.appendChild(exportDiv);
    }
    
    // 导出函数
    window.exportAsJSON = function() {
        const data = collectResultData();
        if (data) {
            dataExporter.exportAsJSON(data, 'listing_translation_' + Date.now());
            errorHandler.showNotification('已导出为JSON格式', 'success');
        }
    };
    
    window.exportAsCSV = function() {
        const data = collectResultData();
        if (data) {
            const csvData = [{
                'Original Title': data.originalTitle || '',
                'Translated Title': data.translatedTitle || '',
                'Original Description': data.originalDescription || '',
                'Translated Description': data.translatedDescription || '',
                'Source Language': data.sourceLang || '',
                'Target Language': data.targetLang || '',
                'Timestamp': new Date().toISOString()
            }];
            dataExporter.exportAsCSV(csvData, 'listing_translation_' + Date.now());
            errorHandler.showNotification('已导出为CSV格式', 'success');
        }
    };
    
    window.exportAsTXT = function() {
        const data = collectResultData();
        if (data) {
            const txtContent = `Listing Translation Result
${'='.repeat(50)}

Original Title:
${data.originalTitle || ''}

Translated Title:
${data.translatedTitle || ''}

Original Description:
${data.originalDescription || ''}

Translated Description:
${data.translatedDescription || ''}

Translation: ${data.sourceLang || ''} → ${data.targetLang || ''}
Timestamp: ${new Date().toISOString()}
`;
            dataExporter.exportAsTXT(txtContent, 'listing_translation_' + Date.now(), 'Listing Translation');
            errorHandler.showNotification('已导出为TXT格式', 'success');
        }
    };
    
    window.copyToClipboard = function() {
        const data = collectResultData();
        if (data) {
            const text = `${data.translatedTitle || ''}\n\n${data.translatedDescription || ''}`;
            navigator.clipboard.writeText(text).then(() => {
                errorHandler.showNotification('已复制到剪贴板', 'success');
            });
        }
    };
    
    // 收集结果数据
    function collectResultData() {
        const titleInput = document.querySelector('#titleInput') || document.querySelector('input[name="title"]');
        const descInput = document.querySelector('#descriptionInput') || document.querySelector('textarea[name="description"]');
        const resultTitle = document.querySelector('.result-title') || document.querySelector('#translatedTitle');
        const resultDesc = document.querySelector('.result-description') || document.querySelector('#translatedDescription');
        const sourceLang = document.querySelector('#sourceLang');
        const targetLang = document.querySelector('#targetLang');
        
        if (!resultTitle && !resultDesc) return null;
        
        return {
            originalTitle: titleInput?.value || '',
            originalDescription: descInput?.value || '',
            translatedTitle: resultTitle?.textContent || resultTitle?.value || '',
            translatedDescription: resultDesc?.textContent || resultDesc?.value || '',
            sourceLang: sourceLang?.value || 'auto',
            targetLang: targetLang?.value || 'zh'
        };
    }
}

// 5. 初始化历史记录功能
function initHistory() {
    // 创建历史记录面板
    const historyPanel = document.createElement('div');
    historyPanel.className = 'history-panel';
    historyPanel.style.cssText = `
        position: fixed;
        right: -400px;
        top: 70px;
        width: 400px;
        height: calc(100vh - 70px);
        background: white;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
        z-index: 9998;
        transition: right 0.3s ease;
        overflow-y: auto;
    `;
    
    historyPanel.innerHTML = `
        <div style="padding: 20px; border-bottom: 1px solid #e5e7eb;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <h3 style="margin: 0; font-size: 18px; font-weight: 600;">
                    <i class="fas fa-history"></i> 历史记录
                </h3>
                <button class="close-history" style="
                    background: transparent;
                    border: none;
                    font-size: 24px;
                    cursor: pointer;
                    color: #6b7280;
                ">×</button>
            </div>
            <div style="margin-top: 12px; display: flex; gap: 8px;">
                <button class="clear-history ck-btn ck-btn-secondary ck-btn-sm">
                    <i class="fas fa-trash"></i> 清空
                </button>
                <button class="export-history ck-btn ck-btn-secondary ck-btn-sm">
                    <i class="fas fa-download"></i> 导出
                </button>
            </div>
        </div>
        <div class="history-list" style="padding: 20px;"></div>
    `;
    
    document.body.appendChild(historyPanel);
    
    // 历史记录按钮
    const historyBtn = document.createElement('button');
    historyBtn.className = 'ck-btn ck-btn-secondary ck-btn-sm';
    historyBtn.innerHTML = '<i class="fas fa-history"></i> 历史';
    historyBtn.style.cssText = 'position: fixed; bottom: 60px; right: 20px; z-index: 9999;';
    
    historyBtn.addEventListener('click', () => {
        historyPanel.style.right = historyPanel.style.right === '0px' ? '-400px' : '0px';
        if (historyPanel.style.right === '0px') {
            renderHistory();
        }
    });
    
    document.body.appendChild(historyBtn);
    
    // 关闭按钮
    historyPanel.querySelector('.close-history').addEventListener('click', () => {
        historyPanel.style.right = '-400px';
    });
    
    // 清空按钮
    historyPanel.querySelector('.clear-history').addEventListener('click', () => {
        if (confirm('确定要清空所有历史记录吗？')) {
            historyManager.clear();
            renderHistory();
            errorHandler.showNotification('历史记录已清空', 'success');
        }
    });
    
    // 导出按钮
    historyPanel.querySelector('.export-history').addEventListener('click', () => {
        historyManager.export('json');
        errorHandler.showNotification('历史记录已导出', 'success');
    });
    
    // 渲染历史记录
    function renderHistory() {
        const listContainer = historyPanel.querySelector('.history-list');
        historyManager.render(listContainer, {
            items: historyManager.getByType('listing-translation'),
            onItemClick: (item) => {
                // 恢复历史记录数据
                if (item.data) {
                    const titleInput = document.querySelector('#titleInput') || document.querySelector('input[name="title"]');
                    const descInput = document.querySelector('#descriptionInput') || document.querySelector('textarea[name="description"]');
                    
                    if (titleInput && item.data.originalTitle) {
                        titleInput.value = item.data.originalTitle;
                    }
                    if (descInput && item.data.originalDescription) {
                        descInput.value = item.data.originalDescription;
                    }
                    
                    historyPanel.style.right = '-400px';
                    errorHandler.showNotification('历史记录已恢复', 'success');
                }
            },
            onDeleteClick: (item) => {
                renderHistory();
            }
        });
    }
    
    // 保存到历史记录
    window.saveToHistory = function(data) {
        historyManager.add({
            type: 'listing-translation',
            title: data.translatedTitle || 'Translation',
            data: data
        });
    };
}

// 6. 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 延迟初始化，确保其他脚本已加载
    setTimeout(() => {
        initUserGuide();
        initExampleData();
        initDataExport();
        initHistory();
        
        console.log('Advanced features initialized');
    }, 500);
});
</script>

利润计算器

计算结果

成本明细

提交反馈

反馈已提交！

利润计算器

计算结果

成本明细