Universal Discussions Copy Plugin

通用论坛内容复制插件，支持 Markdown、HTML、PDF、PNG 格式导出，兼容多个主流论坛平台
换行
// ==UserScript==
// @name         Universal Discussions Copy Plugin
// @namespace    http://tampermonkey.net/
// @version      2.0.0
// @description  通用论坛内容复制插件，支持 Markdown、HTML、PDF、PNG 格式导出，兼容多个主流论坛平台
// @author       dext7r
// @match        *://*/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/turndown/7.1.2/turndown.min.js
// ==/UserScript==

// {{CHENGQI:
// Action: Added; Timestamp: 2025-06-10 14:09:34 +08:00; Reason: P1-AR-001 创建通用平台检测架构; Principle_Applied: SOLID-S (单一职责原则);
// }}

(function () {
  'use strict';

  // 配置和常量
  const CONFIG = {
    DEBUG: true,
    VERSION: '2.0.0',
    PLUGIN_NAME: 'UniversalDiscussionsCopier',
    SHORTCUTS: {
      TOGGLE_PANEL: 'KeyC', // Ctrl/Cmd + Shift + C
    }
  };

  // 日志系统
  const Logger = {
    log: (...args) => CONFIG.DEBUG && console.log(`[${CONFIG.PLUGIN_NAME}]`, ...args),
    error: (...args) => console.error(`[${CONFIG.PLUGIN_NAME}]`, ...args),
    warn: (...args) => CONFIG.DEBUG && console.warn(`[${CONFIG.PLUGIN_NAME}]`, ...args)
  };

  // 平台检测配置
  const PLATFORM_CONFIGS = {
    github: {
      name: 'GitHub Discussions',
      detect: () => window.location.hostname.includes('github.com') &&
        (window.location.pathname.includes('/discussions/') ||
          document.querySelector('[data-testid="discussion-timeline"]')),
      selectors: {
        container: '[data-testid="discussion-timeline"], .js-discussion-timeline, .discussion-timeline',
        title: 'h1.gh-header-title, .js-issue-title, [data-testid="discussion-title"]',
        content: '.timeline-comment-wrapper, .discussion-timeline-item, .js-timeline-item',
        author: '.timeline-comment-header .author, .discussion-timeline-item .author'
      }
    },
    reddit: {
      name: 'Reddit',
      detect: () => window.location.hostname.includes('reddit.com') &&
        (document.querySelector('[data-testid="post-content"]') ||
          document.querySelector('.Post')),
      selectors: {
        container: '[data-testid="post-content"], .Post, .thing.link',
        title: 'h1, [data-testid="post-content"] h3, .Post h3',
        content: '[data-testid="post-content"], .Post .usertext-body, .md',
        author: '.author, [data-testid="comment_author_link"]'
      }
    },
    stackoverflow: {
      name: 'Stack Overflow',
      detect: () => window.location.hostname.includes('stackoverflow.com') &&
        (document.querySelector('.question') || document.querySelector('#question')),
      selectors: {
        container: '.question, #question, .answer',
        title: '.question-hyperlink, h1[itemprop="name"]',
        content: '.postcell, .post-text, .s-prose',
        author: '.user-details, .user-info'
      }
    },
    discourse: {
      name: 'Discourse',
      detect: () => document.querySelector('meta[name="generator"]')?.content?.includes('Discourse') ||
        document.querySelector('.discourse-root') ||
        window.location.pathname.includes('/t/'),
      selectors: {
        container: '.topic-post, .post-stream, #topic',
        title: '.fancy-title, h1.title, .topic-title',
        content: '.post, .cooked, .topic-body',
        author: '.username, .post-username'
      }
    },
    v2ex: {
      name: 'V2EX',
      detect: () => window.location.hostname.includes('v2ex.com') &&
        (document.querySelector('.topic_content') || document.querySelector('#topic')),
      selectors: {
        container: '.topic_content, #topic, .reply_content',
        title: '.header h1, .topic_title',
        content: '.topic_content, .reply_content',
        author: '.username, .dark'
      }
    },
    generic: {
      name: 'Generic Forum',
      detect: () => true, // 总是返回true作为后备方案
      selectors: {
        container: 'article, main, .content, .post, .thread, .topic',
        title: 'h1, h2, .title, .subject',
        content: '.content, .message, .post-content, .body, p',
        author: '.author, .username, .user'
      }
    }
  };

  // 内嵌 TailwindCSS 核心样式
  const EMBEDDED_STYLES = `
    /* TailwindCSS 核心类 */
    .tw-fixed { position: fixed !important; }
    .tw-absolute { position: absolute !important; }
    .tw-relative { position: relative !important; }
    .tw-top-4 { top: 1rem !important; }
    .tw-right-4 { right: 1rem !important; }
    .tw-bottom-4 { bottom: 1rem !important; }
    .tw-z-50 { z-index: 50 !important; }
    .tw-z-40 { z-index: 40 !important; }
    .tw-bg-white { background-color: #ffffff !important; }
    .tw-bg-blue-500 { background-color: #3b82f6 !important; }
    .tw-bg-blue-600 { background-color: #2563eb !important; }
    .tw-bg-gray-500 { background-color: #6b7280 !important; }
    .tw-bg-orange-500 { background-color: #f97316 !important; }
    .tw-bg-red-500 { background-color: #ef4444 !important; }
    .tw-bg-purple-500 { background-color: #8b5cf6 !important; }
    .tw-bg-green-50 { background-color: #f0fdf4 !important; }
    .tw-text-white { color: #ffffff !important; }
    .tw-text-gray-600 { color: #4b5563 !important; }
    .tw-text-gray-800 { color: #1f2937 !important; }
    .tw-text-green-600 { color: #059669 !important; }
    .tw-border { border-width: 1px !important; }
    .tw-border-gray-200 { border-color: #e5e7eb !important; }
    .tw-border-green-200 { border-color: #bbf7d0 !important; }
    .tw-rounded-lg { border-radius: 0.5rem !important; }
    .tw-rounded-full { border-radius: 9999px !important; }
    .tw-rounded { border-radius: 0.25rem !important; }
    .tw-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    .tw-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .tw-p-4 { padding: 1rem !important; }
    .tw-p-3 { padding: 0.75rem !important; }
    .tw-px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .tw-py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .tw-py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .tw-m-1 { margin: 0.25rem !important; }
    .tw-mb-3 { margin-bottom: 0.75rem !important; }
    .tw-mb-4 { margin-bottom: 1rem !important; }
    .tw-w-80 { width: 20rem !important; }
    .tw-w-14 { width: 3.5rem !important; }
    .tw-h-14 { height: 3.5rem !important; }
    .tw-w-full { width: 100% !important; }
    .tw-w-1\\/2 { width: 50% !important; }
    .tw-flex { display: flex !important; }
    .tw-inline-block { display: inline-block !important; }
    .tw-hidden { display: none !important; }
    .tw-items-center { align-items: center !important; }
    .tw-justify-center { justify-content: center !important; }
    .tw-justify-between { justify-content: space-between !important; }
    .tw-text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    .tw-text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .tw-text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
    .tw-font-semibold { font-weight: 600 !important; }
    .tw-font-medium { font-weight: 500 !important; }
    .tw-cursor-pointer { cursor: pointer !important; }
    .tw-cursor-not-allowed { cursor: not-allowed !important; }
    .tw-transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
    .tw-transform { transform: translateX(0) !important; }
    .tw-translate-x-full { transform: translateX(100%) !important; }
    .tw-translate-x-0 { transform: translateX(0) !important; }
    .tw-opacity-0 { opacity: 0 !important; }
    .tw-opacity-100 { opacity: 1 !important; }
    .hover\\:tw-bg-blue-600:hover { background-color: #2563eb !important; }
    .hover\\:tw-bg-gray-600:hover { background-color: #4b5563 !important; }
    .hover\\:tw-text-gray-700:hover { color: #374151 !important; }
    .disabled\\:tw-bg-gray-400:disabled { background-color: #9ca3af !important; }
    .disabled\\:tw-cursor-not-allowed:disabled { cursor: not-allowed !important; }

    /* 自定义样式 */
    .copier-highlight { outline: 2px solid #3b82f6 !important; outline-offset: 2px !important; background-color: rgba(59, 130, 246, 0.1) !important; }
    .copier-selected { outline: 2px solid #10b981 !important; outline-offset: 2px !important; background-color: rgba(16, 185, 129, 0.1) !important; }
    .copier-panel-enter { animation: slideInRight 0.3s ease-out !important; }
    .copier-panel-exit { animation: slideOutRight 0.3s ease-in !important; }
    
    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes slideOutRight {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(100%); opacity: 0; }
    }
  `;

  // 全局状态管理
  class AppState {
    constructor() {
      this.selectedContent = null;
      this.currentPlatform = null;
      this.isSelectionMode = false;
      this.isInitialized = false;
      this.ui = {
        panel: null,
        trigger: null
      };
    }

    reset() {
      this.selectedContent = null;
      this.isSelectionMode = false;
      this.clearHighlights();
    }

    clearHighlights() {
      document.querySelectorAll('.copier-highlight, .copier-selected').forEach(el => {
        el.classList.remove('copier-highlight', 'copier-selected');
      });
    }
  }

  // 平台检测器
  class PlatformDetector {
    static detect() {
      Logger.log('开始检测平台...');

      for (const [key, config] of Object.entries(PLATFORM_CONFIGS)) {
        if (key === 'generic') continue; // 跳过通用配置

        try {
          if (config.detect()) {
            Logger.log(`检测到平台: ${config.name}`);
            return { key, ...config };
          }
        } catch (error) {
          Logger.error(`平台检测错误 (${key}):`, error);
        }
      }

      Logger.log('使用通用平台配置');
      return { key: 'generic', ...PLATFORM_CONFIGS.generic };
    }

    static getSelectors(platform) {
      return platform?.selectors || PLATFORM_CONFIGS.generic.selectors;
    }
  }

  // 内容选择器
  class ContentSelector {
    constructor(appState, platform) {
      this.appState = appState;
      this.platform = platform;
      this.selectors = PlatformDetector.getSelectors(platform);
    }

    enable() {
      Logger.log('启用内容选择模式');
      this.appState.isSelectionMode = true;
      document.body.style.cursor = 'crosshair';

      // 添加事件监听器
      document.addEventListener('mouseover', this.handleMouseOver, true);
      document.addEventListener('mouseout', this.handleMouseOut, true);
      document.addEventListener('click', this.handleClick, true);
      document.addEventListener('keydown', this.handleKeyDown, true);
    }

    disable() {
      Logger.log('禁用内容选择模式');
      this.appState.isSelectionMode = false;
      document.body.style.cursor = '';
      this.appState.clearHighlights();

      // 移除事件监听器
      document.removeEventListener('mouseover', this.handleMouseOver, true);
      document.removeEventListener('mouseout', this.handleMouseOut, true);
      document.removeEventListener('click', this.handleClick, true);
      document.removeEventListener('keydown', this.handleKeyDown, true);
    }

    handleMouseOver = (e) => {
      if (!this.appState.isSelectionMode) return;

      const target = this.findSelectableContent(e.target);
      if (target && !target.classList.contains('copier-selected')) {
        target.classList.add('copier-highlight');
      }
    }

    handleMouseOut = (e) => {
      if (!this.appState.isSelectionMode) return;
      e.target.classList.remove('copier-highlight');
    }

    handleClick = (e) => {
      if (!this.appState.isSelectionMode) return;

      e.preventDefault();
      e.stopPropagation();

      const target = this.findSelectableContent(e.target);
      if (target) {
        this.selectContent(target);
        this.disable();
      }
    }

    handleKeyDown = (e) => {
      if (!this.appState.isSelectionMode) return;

      if (e.key === 'Escape') {
        e.preventDefault();
        this.disable();
        UI.updatePanelState();
      }
    }

    findSelectableContent(element) {
      // 尝试匹配平台特定的选择器
      for (const selector of Object.values(this.selectors)) {
        try {
          if (element.matches && element.matches(selector)) {
            return element;
          }

          const parent = element.closest(selector);
          if (parent) {
            return parent;
          }
        } catch (error) {
          // 忽略无效选择器错误
        }
      }

      // 通用内容检测
      if (this.isContentElement(element)) {
        return element;
      }

      return element.closest('article, .post, .comment, .message, .content') || element;
    }

    isContentElement(element) {
      const contentTags = ['ARTICLE', 'SECTION', 'MAIN', 'DIV', 'P'];
      const excludeClasses = ['nav', 'header', 'footer', 'sidebar', 'menu', 'toolbar'];

      if (!contentTags.includes(element.tagName)) return false;

      const className = element.className.toLowerCase();
      if (excludeClasses.some(cls => className.includes(cls))) return false;

      // 检查内容长度
      const textContent = element.textContent?.trim() || '';
      return textContent.length > 20;
    }

    selectContent(element) {
      this.appState.reset();
      this.appState.selectedContent = element;
      element.classList.add('copier-selected');

      Logger.log('内容已选择:', {
        tag: element.tagName,
        classes: element.className,
        textLength: element.textContent?.length || 0
      });

      UI.updatePanelState();
    }
  }

  // 导出管理器
  class ExportManager {
    constructor(appState, platform) {
      this.appState = appState;
      this.platform = platform;
    }

    generateFileName(format) {
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
      const platformName = this.platform?.key || 'unknown';
      return `${platformName}_content_${timestamp}.${format}`;
    }

    getCleanContent(options = {}) {
      const { includeImages = true, includeStyles = false } = options;

      if (!this.appState.selectedContent) {
        Logger.error('没有选择的内容');
        return null;
      }

      const clone = this.appState.selectedContent.cloneNode(true);

      // 清理样式类
      clone.classList.remove('copier-selected', 'copier-highlight');
      clone.querySelectorAll('.copier-selected, .copier-highlight').forEach(el => {
        el.classList.remove('copier-selected', 'copier-highlight');
      });

      // 处理图片
      if (!includeImages) {
        clone.querySelectorAll('img').forEach(el => el.remove());
      }

      // 处理样式
      if (!includeStyles) {
        clone.querySelectorAll('*').forEach(el => {
          el.removeAttribute('style');
          if (!includeImages) {
            el.removeAttribute('class');
          }
        });
      }

      // 清理脚本和不必要的元素
      clone.querySelectorAll('script, style, noscript').forEach(el => el.remove());

      return clone;
    }

    async exportToMarkdown() {
      try {
        const content = this.getCleanContent();
        if (!content) return;

        if (typeof TurndownService === 'undefined') {
          throw new Error('TurndownService 未加载');
        }

        const turndownService = new TurndownService({
          headingStyle: 'atx',
          codeBlockStyle: 'fenced',
          emDelimiter: '*'
        });

        const markdown = turndownService.turndown(content.innerHTML);
        this.downloadFile(markdown, this.generateFileName('md'), 'text/markdown');

        Logger.log('Markdown 导出成功');
        return true;
      } catch (error) {
        Logger.error('Markdown 导出失败:', error);
        this.showError('Markdown 导出失败');
        return false;
      }
    }

    async exportToHTML() {
      try {
        const content = this.getCleanContent({ includeStyles: true });
        if (!content) return;

        const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导出内容 - ${this.platform?.name || '未知平台'}</title>
  <style>
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      line-height: 1.6; 
      max-width: 800px; 
      margin: 0 auto; 
      padding: 20px; 
      color: #333;
    }
    img { max-width: 100%; height: auto; }
    pre { background: #f5f5f5; padding: 10px; border-radius: 4px; overflow-x: auto; }
    blockquote { border-left: 4px solid #ddd; margin: 0; padding-left: 20px; color: #666; }
  </style>
</head>
<body>
  <header>
    <h1>内容导出</h1>
    <p><strong>来源:</strong> ${this.platform?.name || '未知平台'}</p>
    <p><strong>导出时间:</strong> ${new Date().toLocaleString('zh-CN')}</p>
    <p><strong>原始URL:</strong> <a href="${window.location.href}">${window.location.href}</a></p>
    <hr>
  </header>
  <main>
    ${content.innerHTML}
  </main>
</body>
</html>`;

        this.downloadFile(html, this.generateFileName('html'), 'text/html');
        Logger.log('HTML 导出成功');
        return true;
      } catch (error) {
        Logger.error('HTML 导出失败:', error);
        this.showError('HTML 导出失败');
        return false;
      }
    }

    async exportToPDF() {
      try {
        const content = this.getCleanContent({ includeStyles: true });
        if (!content) return;

        if (typeof window.jspdf === 'undefined') {
          throw new Error('jsPDF 未加载');
        }

        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF();

        // 创建临时容器用于渲染
        const tempDiv = document.createElement('div');
        tempDiv.style.cssText = `
          position: absolute;
          top: -9999px;
          left: -9999px;
          width: 800px;
          background: white;
          padding: 20px;
          font-family: Arial, sans-serif;
          line-height: 1.6;
          color: #333;
        `;

        tempDiv.innerHTML = `
          <h1>内容导出</h1>
          <p><strong>来源:</strong> ${this.platform?.name || '未知平台'}</p>
          <p><strong>导出时间:</strong> ${new Date().toLocaleString('zh-CN')}</p>
          <hr>
          ${content.innerHTML}
        `;

        document.body.appendChild(tempDiv);

        // 使用 html2canvas 转换为图片
        const canvas = await html2canvas(tempDiv, {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          backgroundColor: '#ffffff'
        });

        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 190;
        const pageHeight = 297;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;
        let position = 10;

        // 添加第一页
        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        // 添加额外页面
        while (heightLeft >= 0) {
          position = heightLeft - imgHeight + 10;
          pdf.addPage();
          pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;
        }

        pdf.save(this.generateFileName('pdf'));
        document.body.removeChild(tempDiv);

        Logger.log('PDF 导出成功');
        return true;
      } catch (error) {
        Logger.error('PDF 导出失败:', error);
        this.showError('PDF 导出失败');
        return false;
      }
    }

    async exportToPNG() {
      try {
        const content = this.appState.selectedContent;
        if (!content) return;

        if (typeof html2canvas === 'undefined') {
          throw new Error('html2canvas 未加载');
        }

        const canvas = await html2canvas(content, {
          scale: 2,
          useCORS: true,
          allowTaint: true,
          backgroundColor: '#ffffff'
        });

        // 创建下载链接
        const link = document.createElement('a');
        link.download = this.generateFileName('png');
        link.href = canvas.toDataURL();
        link.click();

        Logger.log('PNG 导出成功');
        return true;
      } catch (error) {
        Logger.error('PNG 导出失败:', error);
        this.showError('PNG 导出失败');
        return false;
      }
    }

    downloadFile(content, filename, mimeType) {
      try {
        const blob = new Blob([content], { type: mimeType });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = filename;
        link.click();
        URL.revokeObjectURL(url);
      } catch (error) {
        Logger.error('文件下载失败:', error);
        this.showError('文件下载失败');
      }
    }

    showError(message) {
      // 显示错误提示
      const errorDiv = document.createElement('div');
      errorDiv.className = 'tw-fixed tw-top-4 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-bg-red-500 tw-text-white tw-px-4 tw-py-2 tw-rounded-lg tw-shadow-lg tw-z-50';
      errorDiv.textContent = message;
      document.body.appendChild(errorDiv);

      setTimeout(() => {
        if (errorDiv.parentNode) {
          errorDiv.parentNode.removeChild(errorDiv);
        }
      }, 3000);
    }
  }

  // UI 管理器
  class UI {
    static init(appState, platform) {
      this.appState = appState;
      this.platform = platform;
      this.contentSelector = new ContentSelector(appState, platform);
      this.exportManager = new ExportManager(appState, platform);

      this.injectStyles();
      this.createTriggerButton();
      this.createPanel();
      this.bindEvents();

      Logger.log('UI 初始化完成');
    }

    static injectStyles() {
      const styleEl = document.createElement('style');
      styleEl.id = 'universal-copier-styles';
      styleEl.textContent = EMBEDDED_STYLES;
      document.head.appendChild(styleEl);
    }

    static createTriggerButton() {
      const button = document.createElement('button');
      button.id = 'universal-copier-trigger';
      button.className = 'tw-fixed tw-bottom-4 tw-right-4 tw-z-50 tw-bg-blue-500 hover:tw-bg-blue-600 tw-text-white tw-w-14 tw-h-14 tw-rounded-full tw-shadow-xl tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-transition-all';
      button.innerHTML = `
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 5C8 3.34315 9.34315 2 11 2H20C21.6569 2 23 3.34315 23 5V14C23 15.6569 21.6569 17 20 17H18V19C18 20.6569 16.6569 22 15 22H6C4.34315 22 3 20.6569 3 19V10C3 8.34315 4.34315 7 6 7H8V5Z" stroke="currentColor" stroke-width="2" fill="none"/>
          <path d="M8 7V15C8 16.1046 8.89543 17 10 17H18" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      `;
      button.title = `${this.platform?.name || '通用论坛'} 内容复制工具\n快捷键: Ctrl/Cmd + Shift + C`;

      button.addEventListener('click', () => this.togglePanel());

      document.body.appendChild(button);
      this.appState.ui.trigger = button;
    }

    static createPanel() {
      const panel = document.createElement('div');
      panel.id = 'universal-copier-panel';
      panel.className = 'tw-fixed tw-top-4 tw-right-4 tw-z-40 tw-bg-white tw-shadow-xl tw-rounded-lg tw-border tw-border-gray-200 tw-w-80 tw-p-4 tw-transform tw-translate-x-full tw-transition-all tw-opacity-0';

      panel.innerHTML = `
        <div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
          <h3 class="tw-text-lg tw-font-semibold tw-text-gray-800">内容复制工具</h3>
          <button id="close-panel" class="tw-text-gray-600 hover:tw-text-gray-700 tw-cursor-pointer">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        
        <div class="tw-mb-3">
          <p class="tw-text-sm tw-text-gray-600 tw-mb-2">
            检测到平台: <span class="tw-font-medium tw-text-blue-600">${this.platform?.name || '通用论坛'}</span>
          </p>
        </div>
        
        <div id="selection-info" class="tw-bg-green-50 tw-border tw-border-green-200 tw-rounded tw-p-3 tw-mb-3 tw-hidden">
          <p class="tw-text-sm tw-text-green-600 tw-font-medium">✓ 内容已选择</p>
          <p class="tw-text-xs tw-text-green-600">可以开始导出了</p>
        </div>
        
        <button id="select-content" class="tw-w-full tw-bg-blue-500 hover:tw-bg-blue-600 disabled:tw-bg-gray-400 disabled:tw-cursor-not-allowed tw-text-white tw-py-3 tw-px-4 tw-rounded tw-cursor-pointer tw-transition-all tw-mb-3 tw-font-medium">
          选择内容
        </button>
        
        <div class="tw-mb-3">
          <p class="tw-text-sm tw-text-gray-600 tw-mb-2 tw-font-medium">导出格式:</p>
          <div class="tw-flex tw-flex-wrap">
            <button id="export-markdown" class="tw-bg-gray-500 hover:tw-bg-gray-600 disabled:tw-bg-gray-400 disabled:tw-cursor-not-allowed tw-text-white tw-text-xs tw-py-2 tw-px-3 tw-rounded tw-cursor-pointer tw-transition-all tw-m-1 tw-w-1/2" style="width: calc(50% - 0.5rem);" disabled>
              Markdown
            </button>
            <button id="export-html" class="tw-bg-orange-500 hover:tw-bg-gray-600 disabled:tw-bg-gray-400 disabled:tw-cursor-not-allowed tw-text-white tw-text-xs tw-py-2 tw-px-3 tw-rounded tw-cursor-pointer tw-transition-all tw-m-1 tw-w-1/2" style="width: calc(50% - 0.5rem);" disabled>
              HTML
            </button>
            <button id="export-pdf" class="tw-bg-red-500 hover:tw-bg-gray-600 disabled:tw-bg-gray-400 disabled:tw-cursor-not-allowed tw-text-white tw-text-xs tw-py-2 tw-px-3 tw-rounded tw-cursor-pointer tw-transition-all tw-m-1 tw-w-1/2" style="width: calc(50% - 0.5rem);" disabled>
              PDF
            </button>
            <button id="export-png" class="tw-bg-purple-500 hover:tw-bg-gray-600 disabled:tw-bg-gray-400 disabled:tw-cursor-not-allowed tw-text-white tw-text-xs tw-py-2 tw-px-3 tw-rounded tw-cursor-pointer tw-transition-all tw-m-1 tw-w-1/2" style="width: calc(50% - 0.5rem);" disabled>
              PNG
            </button>
          </div>
        </div>
        
        <div class="tw-text-xs tw-text-gray-600">
          <p>💡 提示: 使用 Ctrl/Cmd + Shift + C 快速切换面板</p>
          <p>🔗 版本: ${CONFIG.VERSION} | 支持多平台论坛</p>
        </div>
      `;

      document.body.appendChild(panel);
      this.appState.ui.panel = panel;
    }

    static bindEvents() {
      // 关闭面板
      document.getElementById('close-panel')?.addEventListener('click', () => {
        this.hidePanel();
      });

      // 选择内容
      document.getElementById('select-content')?.addEventListener('click', () => {
        this.contentSelector.enable();
        this.hidePanel();
      });

      // 导出按钮
      const exportButtons = [
        { id: 'export-markdown', handler: () => this.exportManager.exportToMarkdown() },
        { id: 'export-html', handler: () => this.exportManager.exportToHTML() },
        { id: 'export-pdf', handler: () => this.exportManager.exportToPDF() },
        { id: 'export-png', handler: () => this.exportManager.exportToPNG() }
      ];

      exportButtons.forEach(({ id, handler }) => {
        document.getElementById(id)?.addEventListener('click', handler);
      });

      // 快捷键
      document.addEventListener('keydown', (e) => {
        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
        const modifierKey = isMac ? e.metaKey : e.ctrlKey;

        if (modifierKey && e.shiftKey && e.code === CONFIG.SHORTCUTS.TOGGLE_PANEL) {
          e.preventDefault();
          this.togglePanel();
        }
      });
    }

    static togglePanel() {
      const panel = this.appState.ui.panel;
      if (!panel) return;

      const isHidden = panel.classList.contains('tw-translate-x-full');

      if (isHidden) {
        this.showPanel();
      } else {
        this.hidePanel();
      }
    }

    static showPanel() {
      const panel = this.appState.ui.panel;
      if (!panel) return;

      panel.classList.remove('tw-translate-x-full', 'tw-opacity-0');
      panel.classList.add('tw-translate-x-0', 'tw-opacity-100', 'copier-panel-enter');

      this.updatePanelState();
      Logger.log('面板已显示');
    }

    static hidePanel() {
      const panel = this.appState.ui.panel;
      if (!panel) return;

      panel.classList.remove('tw-translate-x-0', 'tw-opacity-100', 'copier-panel-enter');
      panel.classList.add('tw-translate-x-full', 'tw-opacity-0', 'copier-panel-exit');

      Logger.log('面板已隐藏');
    }

    static updatePanelState() {
      const hasSelection = !!this.appState.selectedContent;

      // 更新选择信息显示
      const selectionInfo = document.getElementById('selection-info');
      if (selectionInfo) {
        if (hasSelection) {
          selectionInfo.classList.remove('tw-hidden');
        } else {
          selectionInfo.classList.add('tw-hidden');
        }
      }

      // 更新导出按钮状态
      const exportButtons = ['export-markdown', 'export-html', 'export-pdf', 'export-png'];
      exportButtons.forEach(id => {
        const button = document.getElementById(id);
        if (button) {
          button.disabled = !hasSelection;
        }
      });

      // 更新选择按钮文本
      const selectButton = document.getElementById('select-content');
      if (selectButton) {
        selectButton.textContent = hasSelection ? '重新选择内容' : '选择内容';
      }
    }
  }

  // 库依赖检查器
  class LibraryChecker {
    static check() {
      const libraries = {
        'html2canvas': () => typeof html2canvas !== 'undefined',
        'jsPDF': () => typeof window.jspdf !== 'undefined',
        'TurndownService': () => typeof TurndownService !== 'undefined'
      };

      const missing = [];
      const available = [];

      for (const [name, check] of Object.entries(libraries)) {
        if (check()) {
          available.push(name);
        } else {
          missing.push(name);
        }
      }

      Logger.log('库检查结果:', { available, missing });

      if (missing.length > 0) {
        Logger.warn('缺少依赖库:', missing);
        return false;
      }

      return true;
    }
  }

  // 主应用程序
  class UniversalDiscussionsCopier {
    constructor() {
      this.appState = new AppState();
      this.platform = null;
    }

    async init() {
      if (this.appState.isInitialized) {
        Logger.log('插件已初始化，跳过重复初始化');
        return;
      }

      try {
        Logger.log(`插件初始化开始 - 版本 ${CONFIG.VERSION}`);

        // 检测平台
        this.platform = PlatformDetector.detect();
        this.appState.currentPlatform = this.platform;

        // 等待依赖库加载
        if (!await this.waitForLibraries()) {
          Logger.error('依赖库加载超时，插件可能无法完全工作');
        }

        // 初始化UI
        UI.init(this.appState, this.platform);

        this.appState.isInitialized = true;
        Logger.log('插件初始化完成');

      } catch (error) {
        Logger.error('初始化过程中发生错误:', error);
      }
    }

    async waitForLibraries(maxAttempts = 10, interval = 1000) {
      let attempts = 0;

      return new Promise((resolve) => {
        const checkLibraries = () => {
          attempts++;
          Logger.log(`检查依赖库 (${attempts}/${maxAttempts})`);

          if (LibraryChecker.check()) {
            resolve(true);
          } else if (attempts < maxAttempts) {
            setTimeout(checkLibraries, interval);
          } else {
            resolve(false);
          }
        };

        checkLibraries();
      });
    }
  }

  // 初始化应用
  const app = new UniversalDiscussionsCopier();

  // 页面加载完成后初始化
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      Logger.log('DOM 载入完成，延迟初始化...');
      setTimeout(() => app.init(), 1000);
    });
  } else {
    Logger.log('页面已载入，延迟初始化...');
    setTimeout(() => app.init(), 1000);
  }

  // 导出到全局作用域（用于调试）
  if (CONFIG.DEBUG) {
    window.UniversalDiscussionsCopier = {
      app,
      Logger,
      CONFIG,
      PLATFORM_CONFIGS
    };
  }

})();
欢迎访问Greasy Fork镜像
