@quicktvui/web-cli 1.0.1 → 1.0.2

package/lib/entry-package.js

@@ -15,6 +15,7 @@ import {
   APP_NAME,
   IJKPlayerComponent,
 } from '@quicktvui/web-renderer'
+import { setupGlobalErrorHandler } from './error-badge.js'
 
 // 初始化 async localStorage
 initAsyncLocalStorage()
@@ -39,6 +40,14 @@ applyAllPatches(engine)
 global.__TV_FOCUS_MANAGER__ = new TVFocusManager()
 console.log('[Web Renderer] TVFocusManager initialized')
 
+// 初始化错误提示组件（在 DOM 准备好后）
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => setupGlobalErrorHandler())
+} else {
+  setupGlobalErrorHandler()
+}
+console.log('[Web Renderer] Error badge initialized')
+
 // 注入全局 CSS
 const styleEl = document.createElement('style')
 styleEl.id = 'web-platform-reset'

package/lib/error-badge.js

@@ -0,0 +1,410 @@
+/**
+ * 自定义错误提示组件
+ * 在右上角显示红色角标，点击可查看错误详情
+ */
+
+class ErrorBadge {
+  constructor() {
+    this.errors = []
+    this.isExpanded = false
+    this.badge = null
+    this.panel = null
+    this.container = null
+    this.init()
+  }
+
+  init() {
+    // 创建容器
+    this.container = document.createElement('div')
+    this.container.id = 'qt-error-badge-container'
+    this.container.innerHTML = `
+      <style>
+        #qt-error-badge-container {
+          position: fixed;
+          top: 0;
+          right: 0;
+          z-index: 999999;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        }
+        #qt-error-badge {
+          display: none;
+          position: fixed;
+          top: 16px;
+          right: 16px;
+          width: 32px;
+          height: 32px;
+          background: linear-gradient(135deg, #ff4444, #cc0000);
+          border-radius: 50%;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(204, 0, 0, 0.4);
+          transition: transform 0.2s ease, box-shadow 0.2s ease;
+          z-index: 999999;
+        }
+        #qt-error-badge:hover {
+          transform: scale(1.1);
+          box-shadow: 0 6px 16px rgba(204, 0, 0, 0.5);
+        }
+        #qt-error-badge.visible {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        #qt-error-count {
+          color: white;
+          font-size: 14px;
+          font-weight: bold;
+          min-width: 20px;
+          text-align: center;
+        }
+        #qt-error-badge-icon {
+          display: none;
+          color: white;
+          font-size: 18px;
+          font-weight: bold;
+        }
+        #qt-error-panel {
+          display: none;
+          position: fixed;
+          top: 56px;
+          right: 16px;
+          width: 420px;
+          max-height: 400px;
+          background: #1e1e1e;
+          border-radius: 8px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+          overflow: hidden;
+          z-index: 999998;
+        }
+        #qt-error-panel.visible {
+          display: block;
+        }
+        #qt-error-panel-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px 16px;
+          background: #2d2d2d;
+          border-bottom: 1px solid #404040;
+        }
+        #qt-error-panel-title {
+          color: #ff6b6b;
+          font-size: 14px;
+          font-weight: 600;
+        }
+        #qt-error-panel-close {
+          background: none;
+          border: none;
+          color: #888;
+          font-size: 20px;
+          cursor: pointer;
+          padding: 0;
+          line-height: 1;
+        }
+        #qt-error-panel-close:hover {
+          color: #fff;
+        }
+        #qt-error-panel-clear {
+          background: none;
+          border: 1px solid #666;
+          color: #aaa;
+          font-size: 12px;
+          cursor: pointer;
+          padding: 4px 8px;
+          border-radius: 4px;
+          margin-right: 8px;
+        }
+        #qt-error-panel-clear:hover {
+          border-color: #ff6b6b;
+          color: #ff6b6b;
+        }
+        #qt-error-list {
+          max-height: 340px;
+          overflow-y: auto;
+          padding: 0;
+          margin: 0;
+          list-style: none;
+        }
+        #qt-error-list::-webkit-scrollbar {
+          width: 6px;
+        }
+        #qt-error-list::-webkit-scrollbar-track {
+          background: #1e1e1e;
+        }
+        #qt-error-list::-webkit-scrollbar-thumb {
+          background: #444;
+          border-radius: 3px;
+        }
+        #qt-error-list::-webkit-scrollbar-thumb:hover {
+          background: #555;
+        }
+        .qt-error-item {
+          padding: 12px 16px;
+          border-bottom: 1px solid #2d2d2d;
+          cursor: pointer;
+          transition: background 0.2s ease;
+        }
+        .qt-error-item:hover {
+          background: #2a2a2a;
+        }
+        .qt-error-item:last-child {
+          border-bottom: none;
+        }
+        .qt-error-time {
+          color: #888;
+          font-size: 11px;
+          margin-bottom: 4px;
+        }
+        .qt-error-message {
+          color: #ff6b6b;
+          font-size: 13px;
+          line-height: 1.4;
+          word-break: break-all;
+        }
+        .qt-error-stack {
+          display: none;
+          color: #aaa;
+          font-size: 11px;
+          margin-top: 8px;
+          padding: 8px;
+          background: #252525;
+          border-radius: 4px;
+          white-space: pre-wrap;
+          word-break: break-all;
+          max-height: 120px;
+          overflow-y: auto;
+        }
+        .qt-error-item.expanded .qt-error-stack {
+          display: block;
+        }
+        .qt-error-empty {
+          padding: 24px;
+          text-align: center;
+          color: #666;
+          font-size: 13px;
+        }
+      </style>
+      <div id="qt-error-badge">
+        <span id="qt-error-badge-icon">!</span>
+        <span id="qt-error-count">0</span>
+      </div>
+      <div id="qt-error-panel">
+        <div id="qt-error-panel-header">
+          <span id="qt-error-panel-title">运行时错误</span>
+          <div>
+            <button id="qt-error-panel-clear">清除全部</button>
+            <button id="qt-error-panel-close">&times;</button>
+          </div>
+        </div>
+        <ul id="qt-error-list"></ul>
+      </div>
+    `
+
+    document.head.appendChild(this.container.querySelector('style'))
+    document.body.appendChild(this.container)
+
+    // 获取元素引用
+    this.badge = document.getElementById('qt-error-badge')
+    this.panel = document.getElementById('qt-error-panel')
+    this.countEl = document.getElementById('qt-error-count')
+    this.listEl = document.getElementById('qt-error-list')
+    this.iconEl = document.getElementById('qt-error-badge-icon')
+
+    // 绑定事件
+    this.badge.addEventListener('click', () => this.toggle())
+    document.getElementById('qt-error-panel-close').addEventListener('click', () => this.hide())
+    document.getElementById('qt-error-panel-clear').addEventListener('click', () => this.clear())
+
+    // 点击外部关闭
+    document.addEventListener('click', (e) => {
+      if (this.isExpanded && !this.container.contains(e.target)) {
+        this.hide()
+      }
+    })
+  }
+
+  addError(error) {
+    const errorInfo = {
+      id: Date.now(),
+      time: new Date().toLocaleTimeString(),
+      message: this.getErrorMessage(error),
+      stack: this.getErrorStack(error),
+    }
+
+    this.errors.push(errorInfo)
+    this.updateBadge()
+    this.renderErrors()
+
+    // 首次错误时闪烁提示
+    if (this.errors.length === 1) {
+      this.flash()
+    }
+  }
+
+  getErrorMessage(error) {
+    if (typeof error === 'string') return error
+    if (error && typeof error === 'object') {
+      if (error.message) return error.message
+      if (error.error && error.error.message) return error.error.message
+      try {
+        return JSON.stringify(error)
+      } catch (e) {
+        return '[object Object]'
+      }
+    }
+    return String(error)
+  }
+
+  getErrorStack(error) {
+    if (error && error.error && error.error.stack) return error.error.stack
+    if (error && error.stack) return error.stack
+    return ''
+  }
+
+  updateBadge() {
+    const count = this.errors.length
+    if (count > 0) {
+      this.badge.classList.add('visible')
+      this.countEl.textContent = count > 99 ? '99+' : count
+      this.countEl.style.display = 'inline'
+      this.iconEl.style.display = 'none'
+    } else {
+      this.badge.classList.remove('visible')
+    }
+  }
+
+  renderErrors() {
+    if (this.errors.length === 0) {
+      this.listEl.innerHTML = '<li class="qt-error-empty">暂无错误</li>'
+      return
+    }
+
+    this.listEl.innerHTML = this.errors
+      .map(
+        (err) => `
+      <li class="qt-error-item" data-id="${err.id}">
+        <div class="qt-error-time">${err.time}</div>
+        <div class="qt-error-message">${this.escapeHtml(err.message)}</div>
+        ${
+          err.stack
+            ? `<div class="qt-error-stack">${this.escapeHtml(this.formatStack(err.stack))}</div>`
+            : ''
+        }
+      </li>
+    `
+      )
+      .join('')
+
+    // 点击展开/收起详情
+    this.listEl.querySelectorAll('.qt-error-item').forEach((item) => {
+      item.addEventListener('click', () => {
+        item.classList.toggle('expanded')
+      })
+    })
+  }
+
+  formatStack(stack) {
+    // 简化堆栈信息，只保留关键部分
+    const lines = stack.split('\n')
+    const relevantLines = lines.filter((line) => {
+      return (
+        line.includes('.vue') ||
+        line.includes('.js') ||
+        line.includes('.ts') ||
+        line.includes('at ') ||
+        !line.trim()
+      )
+    })
+    return relevantLines.slice(0, 10).join('\n')
+  }
+
+  escapeHtml(str) {
+    const div = document.createElement('div')
+    div.textContent = str
+    return div.innerHTML
+  }
+
+  toggle() {
+    if (this.isExpanded) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  show() {
+    this.isExpanded = true
+    this.panel.classList.add('visible')
+  }
+
+  hide() {
+    this.isExpanded = false
+    this.panel.classList.remove('visible')
+  }
+
+  clear() {
+    this.errors = []
+    this.updateBadge()
+    this.renderErrors()
+    this.hide()
+  }
+
+  flash() {
+    // 首次错误时闪烁提示
+    let count = 0
+    const flash = () => {
+      if (count >= 6) return
+      this.badge.style.transform = count % 2 === 0 ? 'scale(1.2)' : 'scale(1)'
+      count++
+      setTimeout(flash, 100)
+    }
+    flash()
+  }
+}
+
+// 创建全局实例
+let errorBadgeInstance = null
+
+function initErrorBadge() {
+  if (!errorBadgeInstance) {
+    errorBadgeInstance = new ErrorBadge()
+  }
+  return errorBadgeInstance
+}
+
+// 捕获全局错误
+function setupGlobalErrorHandler() {
+  const badge = initErrorBadge()
+
+  // 捕获 JavaScript 错误
+  window.addEventListener('error', (event) => {
+    badge.addError({
+      message: event.message,
+      stack: event.error?.stack || '',
+    })
+    // 不阻止默认行为，错误仍会输出到控制台
+  })
+
+  // 捕获 Promise 未处理错误
+  window.addEventListener('unhandledrejection', (event) => {
+    badge.addError({
+      message: event.reason?.message || String(event.reason),
+      stack: event.reason?.stack || '',
+    })
+  })
+
+  // 捕获 Vue 错误
+  if (window.Vue) {
+    window.Vue.config.errorHandler = (err, vm, info) => {
+      badge.addError({
+        message: `[Vue] ${err.message}`,
+        stack: err.stack || '',
+      })
+      console.error('[Vue Error]', err, info)
+    }
+  }
+
+  return badge
+}
+
+// 导出
+export { ErrorBadge, initErrorBadge, setupGlobalErrorHandler }

package/lib/webpack.config.js

@@ -183,7 +183,7 @@ module.exports = {
       },
     ],
     client: {
-      overlay: { errors: true, warnings: false },
+      overlay: false,
     },
   },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-cli",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "CLI tool for QuickTVUI web development - zero configuration",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",