aitu-app 0.5.14

package/sw-debug/log-panel.js

@@ -0,0 +1,309 @@
+/**
+ * SW Debug Panel - Unified Log Panel Component
+ * 统一的日志面板组件，用于抽象 Fetch/Console/PostMessage/LLM API/内存日志的公共逻辑
+ */
+
+import { formatTime, escapeHtml } from './utils.js';
+
+/**
+ * 日志面板配置
+ * @typedef {Object} LogPanelConfig
+ * @property {string} id - 面板唯一标识
+ * @property {string} name - 面板名称
+ * @property {string} emptyIcon - 空状态图标
+ * @property {string} emptyText - 空状态主文本
+ * @property {string} [emptySubtext] - 空状态副文本
+ * @property {Function} renderEntry - 渲染单个日志条目的函数
+ * @property {Function} formatForCopy - 格式化日志用于复制的函数
+ * @property {Array<FilterConfig>} filters - 过滤器配置
+ */
+
+/**
+ * 过滤器配置
+ * @typedef {Object} FilterConfig
+ * @property {string} type - 过滤器类型: 'select' | 'input'
+ * @property {string} id - 过滤器 DOM ID
+ * @property {string} [placeholder] - 输入框占位符
+ * @property {Array<{value: string, label: string}>} [options] - 下拉选项
+ * @property {Function} filter - 过滤函数 (log, filterValue) => boolean
+ */
+
+/**
+ * 创建统一的日志面板
+ */
+export class LogPanel {
+  /**
+   * @param {LogPanelConfig} config
+   */
+  constructor(config) {
+    this.config = config;
+    this.logs = [];
+    this.expandedIds = new Set();
+    this.filterValues = {};
+    this.elements = null;
+    this.maxLogs = 500;
+    this.maxDisplay = 200;
+  }
+
+  /**
+   * 初始化面板，绑定 DOM 元素
+   * @param {Object} elements - DOM 元素映射
+   */
+  init(elements) {
+    this.elements = elements;
+    this.setupFilterListeners();
+  }
+
+  /**
+   * 设置过滤器事件监听
+   */
+  setupFilterListeners() {
+    this.config.filters.forEach(filter => {
+      const el = this.elements[filter.id];
+      if (!el) return;
+
+      if (filter.type === 'select') {
+        el.addEventListener('change', () => {
+          this.filterValues[filter.id] = el.value;
+          this.render();
+        });
+      } else if (filter.type === 'input') {
+        el.addEventListener('input', () => {
+          this.filterValues[filter.id] = el.value;
+          this.render();
+        });
+      }
+    });
+  }
+
+  /**
+   * 添加日志条目
+   * @param {Object} log
+   */
+  addLog(log) {
+    // 检查重复
+    if (this.logs.some(l => l.id === log.id)) {
+      return;
+    }
+
+    this.logs.unshift(log);
+    if (this.logs.length > this.maxLogs) {
+      this.logs.pop();
+    }
+  }
+
+  /**
+   * 更新日志条目
+   * @param {Object} log
+   */
+  updateLog(log) {
+    const index = this.logs.findIndex(l => l.id === log.id);
+    if (index >= 0) {
+      this.logs[index] = { ...this.logs[index], ...log };
+    } else {
+      this.addLog(log);
+    }
+  }
+
+  /**
+   * 设置所有日志
+   * @param {Array} logs
+   */
+  setLogs(logs) {
+    this.logs = logs || [];
+  }
+
+  /**
+   * 清空日志
+   */
+  clearLogs() {
+    this.logs = [];
+    this.expandedIds.clear();
+  }
+
+  /**
+   * 获取过滤后的日志
+   * @returns {Array}
+   */
+  getFilteredLogs() {
+    let filtered = this.logs;
+
+    this.config.filters.forEach(filter => {
+      const value = this.filterValues[filter.id] || '';
+      if (value && filter.filter) {
+        filtered = filtered.filter(log => filter.filter(log, value));
+      }
+    });
+
+    return filtered;
+  }
+
+  /**
+   * 渲染日志列表
+   */
+  render() {
+    const container = this.elements.container;
+    if (!container) return;
+
+    const filteredLogs = this.getFilteredLogs();
+
+    if (filteredLogs.length === 0) {
+      container.innerHTML = this.renderEmptyState();
+      return;
+    }
+
+    container.innerHTML = '';
+    filteredLogs.slice(0, this.maxDisplay).forEach(log => {
+      const isExpanded = this.expandedIds.has(log.id);
+      const entry = this.config.renderEntry(log, isExpanded, (id, expanded) => {
+        if (expanded) {
+          this.expandedIds.add(id);
+        } else {
+          this.expandedIds.delete(id);
+        }
+      });
+      container.appendChild(entry);
+    });
+  }
+
+  /**
+   * 渲染空状态
+   * @returns {string}
+   */
+  renderEmptyState() {
+    return `
+      <div class="empty-state">
+        <span class="icon">${this.config.emptyIcon}</span>
+        <p>${this.config.emptyText}</p>
+        ${this.config.emptySubtext ? `<p style="font-size: 12px; opacity: 0.7;">${this.config.emptySubtext}</p>` : ''}
+      </div>
+    `;
+  }
+
+  /**
+   * 复制过滤后的日志到剪贴板
+   * @returns {Promise<{success: boolean, count: number}>}
+   */
+  async copyLogs() {
+    const filteredLogs = this.getFilteredLogs();
+
+    if (filteredLogs.length === 0) {
+      return { success: false, count: 0 };
+    }
+
+    const text = filteredLogs.map(log => this.config.formatForCopy(log)).join('\n\n');
+
+    try {
+      await navigator.clipboard.writeText(text);
+      return { success: true, count: filteredLogs.length };
+    } catch (err) {
+      console.error('Failed to copy:', err);
+      return { success: false, count: 0 };
+    }
+  }
+
+  /**
+   * 获取日志统计信息
+   * @returns {Object}
+   */
+  getStats() {
+    return {
+      total: this.logs.length,
+      filtered: this.getFilteredLogs().length,
+    };
+  }
+}
+
+/**
+ * 创建复制按钮的点击处理器
+ * @param {LogPanel} panel - 日志面板实例
+ * @param {HTMLElement} button - 按钮元素
+ * @returns {Function}
+ */
+export function createCopyHandler(panel, button) {
+  return async () => {
+    const result = await panel.copyLogs();
+    if (result.success) {
+      const originalText = button.textContent;
+      button.textContent = `✅ 已复制 (${result.count})`;
+      setTimeout(() => {
+        button.textContent = originalText;
+      }, 1500);
+    } else if (result.count === 0) {
+      alert('没有可复制的日志');
+    } else {
+      alert('复制失败');
+    }
+  };
+}
+
+/**
+ * 工具栏按钮组件
+ */
+export class ToolbarButton {
+  /**
+   * 创建工具栏按钮
+   * @param {Object} options
+   * @param {string} options.icon - 按钮图标
+   * @param {string} options.text - 按钮文本
+   * @param {string} [options.className] - 额外的 CSS 类
+   * @param {Function} options.onClick - 点击处理函数
+   * @returns {HTMLElement}
+   */
+  static create({ icon, text, className = '', onClick }) {
+    const button = document.createElement('button');
+    button.style.cssText = 'padding: 6px 12px; font-size: 12px;';
+    if (className) {
+      button.className = className;
+    }
+    button.innerHTML = `${icon ? icon + ' ' : ''}${text}`;
+    button.addEventListener('click', onClick);
+    return button;
+  }
+}
+
+/**
+ * 从日志数组中提取唯一的消息类型
+ * @param {Array} logs - 日志数组
+ * @param {string} typeField - 类型字段名
+ * @returns {Array<string>}
+ */
+export function extractUniqueTypes(logs, typeField = 'messageType') {
+  const types = new Set();
+  logs.forEach(log => {
+    const type = log[typeField];
+    if (type) {
+      types.add(type);
+    }
+  });
+  return Array.from(types).sort();
+}
+
+/**
+ * 更新消息类型下拉选项
+ * @param {HTMLSelectElement} select - 下拉选择器
+ * @param {Array<string>} types - 类型列表
+ * @param {string} currentValue - 当前选中值
+ */
+export function updateTypeSelectOptions(select, types, currentValue = '') {
+  // 保存当前值
+  const selectedValue = currentValue || select.value;
+  
+  // 清空现有选项（保留第一个"全部"选项）
+  while (select.options.length > 1) {
+    select.remove(1);
+  }
+  
+  // 添加新选项
+  types.forEach(type => {
+    const option = document.createElement('option');
+    option.value = type;
+    option.textContent = type;
+    select.appendChild(option);
+  });
+  
+  // 恢复选中值
+  if (selectedValue && types.includes(selectedValue)) {
+    select.value = selectedValue;
+  }
+}

package/sw-debug/postmessage-entry.js

@@ -0,0 +1,117 @@
+/**
+ * SW Debug Panel - PostMessage Entry Component
+ */
+
+import { formatTime, escapeHtml } from './utils.js';
+
+/**
+ * Format JSON data for display
+ * @param {any} data
+ * @param {number} maxLength - Max string length before truncation
+ * @returns {string}
+ */
+function formatData(data, maxLength = 500) {
+  if (data === undefined) return '<span class="pm-undefined">undefined</span>';
+  if (data === null) return '<span class="pm-null">null</span>';
+
+  try {
+    const str = JSON.stringify(data, null, 2);
+    if (str.length > maxLength) {
+      return escapeHtml(str.slice(0, maxLength)) + '...';
+    }
+    return escapeHtml(str);
+  } catch {
+    return escapeHtml(String(data));
+  }
+}
+
+/**
+ * Get a short preview of the message data
+ * @param {any} data
+ * @returns {string}
+ */
+function getDataPreview(data) {
+  if (data === undefined || data === null) return '';
+
+  try {
+    const str = JSON.stringify(data);
+    if (str.length > 60) {
+      return escapeHtml(str.slice(0, 60)) + '...';
+    }
+    return escapeHtml(str);
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Create a PostMessage log entry DOM element
+ * @param {object} log - The log entry object
+ * @param {boolean} isExpanded - Initial expanded state
+ * @param {Function} onToggle - Callback when expand state changes (id, expanded)
+ * @returns {HTMLElement}
+ */
+export function createPostMessageEntry(log, isExpanded = false, onToggle = null) {
+  const entry = document.createElement('div');
+  const directionClass = log.direction === 'send' ? 'send' : 'receive';
+  // 使用 log-entry 作为基础类，与 Fetch 日志统一
+  entry.className = `log-entry pm-entry${isExpanded ? ' expanded' : ''}`;
+  entry.dataset.id = log.id;
+
+  const directionIcon = log.direction === 'send' ? '→' : '←';
+  const directionLabel = log.direction === 'send' ? '发送' : '接收';
+  const directionTarget = log.direction === 'send' ? 'SW' : '主线程';
+
+  const messageType = log.messageType || 'unknown';
+  const dataPreview = getDataPreview(log.data);
+
+  entry.innerHTML = `
+    <div class="log-header pm-header">
+      <span class="log-toggle"><span class="arrow">▶</span></span>
+      <span class="log-time pm-time">${formatTime(log.timestamp)}</span>
+      <span class="pm-direction ${directionClass}">
+        <span class="pm-direction-icon">${directionIcon}</span>${directionLabel}
+      </span>
+      <span class="pm-type">${escapeHtml(messageType)}</span>
+      <span class="log-url pm-preview">${dataPreview}</span>
+    </div>
+    <div class="log-details pm-details">
+      <div class="detail-section">
+        <h4>基本信息</h4>
+        <pre>方向: ${directionLabel} ${directionTarget}
+消息类型: ${messageType}
+时间: ${new Date(log.timestamp).toLocaleString('zh-CN')}</pre>
+      </div>
+      <div class="detail-section">
+        <h4>消息数据</h4>
+        <pre>${formatData(log.data)}</pre>
+      </div>
+      ${log.response !== undefined ? `
+        <div class="detail-section">
+          <h4>响应数据</h4>
+          <pre style="border-left: 3px solid var(--success-color);">${formatData(log.response)}</pre>
+        </div>
+      ` : ''}
+      ${log.error ? `
+        <div class="detail-section">
+          <h4>错误信息</h4>
+          <pre style="color: var(--error-color);">${escapeHtml(log.error)}</pre>
+        </div>
+      ` : ''}
+    </div>
+  `;
+
+  // Toggle expand on toggle button click
+  const toggleBtn = entry.querySelector('.log-toggle');
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const isNowExpanded = entry.classList.toggle('expanded');
+      if (onToggle) {
+        onToggle(log.id, isNowExpanded);
+      }
+    });
+  }
+
+  return entry;
+}

package/sw-debug/status-panel.js

@@ -0,0 +1,125 @@
+/**
+ * SW Debug Panel - Status Panel Component
+ */
+
+import { formatSize } from './utils.js';
+
+/**
+ * Update SW status indicator
+ * @param {HTMLElement} element 
+ * @param {boolean} connected 
+ * @param {string} version 
+ */
+export function updateSwStatus(element, connected, version) {
+  if (connected) {
+    element.className = 'status-indicator active';
+    element.querySelector('.text').textContent = version ? `v${version}` : '已连接';
+  } else {
+    element.className = 'status-indicator inactive';
+    element.querySelector('.text').textContent = '未连接';
+  }
+}
+
+/**
+ * Update status panel with SW status data
+ * @param {object} status 
+ * @param {object} elements - DOM elements
+ */
+export function updateStatusPanel(status, elements) {
+  elements.swVersion.textContent = status.version || '-';
+  elements.debugMode.textContent = status.debugModeEnabled ? '开启' : '关闭';
+  elements.pendingImages.textContent = status.pendingImageRequests || 0;
+  elements.pendingVideos.textContent = status.pendingVideoRequests || 0;
+  
+  // Video blob cache with size info
+  const videoCacheCount = status.videoBlobCacheSize || 0;
+  const videoCacheBytes = status.videoBlobCacheTotalBytes || 0;
+  if (videoCacheBytes > 0) {
+    elements.videoBlobCache.textContent = `${videoCacheCount} (${formatSize(videoCacheBytes)})`;
+  } else {
+    elements.videoBlobCache.textContent = videoCacheCount;
+  }
+  
+  elements.completedRequests.textContent = status.completedImageRequestsSize || 0;
+  elements.workflowHandler.textContent = status.workflowHandlerInitialized ? '已初始化' : '未初始化';
+  elements.debugLogsCount.textContent = status.debugLogsCount || 0;
+
+  // Failed domains
+  if (status.failedDomains && status.failedDomains.length > 0) {
+    elements.failedDomainsSection.style.display = 'block';
+    elements.failedDomains.innerHTML = status.failedDomains
+      .map(d => `<span class="failed-domain-tag">${d}</span>`)
+      .join('');
+  } else {
+    elements.failedDomainsSection.style.display = 'none';
+  }
+
+  // Cache stats
+  if (status.cacheStats) {
+    updateCacheList(elements.cacheList, status.cacheStats);
+  }
+
+  return status.debugModeEnabled;
+}
+
+/**
+ * Update cache list with stats
+ * @param {HTMLElement} cacheList 
+ * @param {object} cacheStats 
+ */
+export function updateCacheList(cacheList, cacheStats) {
+  const entries = Object.entries(cacheStats);
+  
+  // 分离 Cache API 和 IndexedDB
+  const cacheEntries = entries.filter(([, s]) => s.type !== 'indexeddb');
+  const idbEntries = entries.filter(([, s]) => s.type === 'indexeddb');
+  
+  let html = '';
+  
+  // Cache API 部分
+  if (cacheEntries.length > 0) {
+    html += '<li class="cache-section-header">Cache API</li>';
+    html += cacheEntries.map(([name, stats]) => `
+      <li class="cache-item">
+        <span class="name">${name.replace('drawnix-', '')}</span>
+        <span class="stats">
+          <span>${stats.count} 项</span>
+          <span>${formatSize(stats.totalSize)}</span>
+        </span>
+      </li>
+    `).join('');
+  }
+  
+  // IndexedDB 部分
+  if (idbEntries.length > 0) {
+    html += '<li class="cache-section-header">IndexedDB</li>';
+    html += idbEntries.map(([name, stats]) => `
+      <li class="cache-item">
+        <span class="name">${name.replace('[IDB] ', '').replace('drawnix-', '')}</span>
+        <span class="stats">
+          <span>${stats.count} 条</span>
+          <span>~${formatSize(stats.totalSize)}</span>
+        </span>
+      </li>
+    `).join('');
+  }
+  
+  cacheList.innerHTML = html || '<li class="cache-item"><span class="name">暂无缓存</span></li>';
+}
+
+/**
+ * Update debug button state
+ * @param {HTMLElement} button 
+ * @param {boolean} enabled 
+ */
+export function updateDebugButton(button, enabled) {
+  if (enabled) {
+    button.innerHTML = '<span>⏸</span> 停止调试';
+    button.classList.remove('primary');
+    button.classList.add('danger');
+  } else {
+    button.innerHTML = '<span>▶</span> 启用调试';
+    button.classList.remove('danger');
+    button.classList.add('primary');
+  }
+}