@quicktvui/web-cli 1.0.1 → 1.0.3

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.3",
   "description": "CLI tool for QuickTVUI web development - zero configuration",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",

package/templates/web-renderer.html

@@ -45,16 +45,31 @@
       overflow: hidden;
       background-color: #1a1a1a;
     }
+    /* 主容器 - 包含所有内容，统一缩放 */
+    #main-container {
+      width: 1920px;
+      height: 1080px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #26292F;
+      visibility: hidden;
+    }
     #app {
       width: 1920px !important;
       height: 1080px !important;
-      transform-origin: top left;
       background-color: #26292F;
-      visibility: hidden;
     }
-    /* 返回按钮样式 */
+    /* Force all direct children of #app to be 1920x1080 */
+    #app > * {
+      width: 1920px !important;
+      height: 1080px !important;
+      position: relative !important;
+      overflow: hidden !important;
+    }
+    /* 返回按钮样式 - 相对于 main-container */
     #web-back-btn {
-      position: fixed;
+      position: absolute;
       z-index: 99999;
       width: 48px;
       height: 48px;
@@ -67,6 +82,8 @@
       justify-content: center;
       transition: all 0.2s ease;
       backdrop-filter: blur(10px);
+      left: 20px;
+      top: 20px;
     }
     #web-back-btn:hover {
       background: rgba(255, 255, 255, 0.2);
@@ -85,13 +102,6 @@
       stroke-linecap: round;
       stroke-linejoin: round;
     }
-    /* Force all direct children of #app to be 1920x1080 */
-    #app > * {
-      width: 1920px !important;
-      height: 1080px !important;
-      position: relative !important;
-      overflow: hidden !important;
-    }
     /* TV Focus styles */
     [focusable="true"], [data-focusable="true"] {
       cursor: pointer;
@@ -117,35 +127,27 @@
     document.addEventListener('DOMContentLoaded', fixAppDimensions);
     window.addEventListener('load', fixAppDimensions);
     
-    // Scale the app to fit the viewport
+    // Scale the main-container to fit the viewport
     function scaleApp() {
-      var app = document.getElementById('app');
-      if (app) {
-        app.style.setProperty('width', TV_WIDTH + 'px', 'important');
-        app.style.setProperty('height', TV_HEIGHT + 'px', 'important');
+      var container = document.getElementById('main-container');
+      if (container) {
+        container.style.setProperty('width', TV_WIDTH + 'px');
+        container.style.setProperty('height', TV_HEIGHT + 'px');
         
         var scaleX = _originalInnerWidth / TV_WIDTH;
         var scaleY = _originalInnerHeight / TV_HEIGHT;
         var scale = Math.min(scaleX, scaleY);
-        app.style.transform = 'scale(' + scale + ')';
+        container.style.transformOrigin = 'top left';
+        container.style.transform = 'scale(' + scale + ')';
         var offsetX = (_originalInnerWidth - TV_WIDTH * scale) / 2;
         var offsetY = (_originalInnerHeight - TV_HEIGHT * scale) / 2;
-        app.style.marginLeft = offsetX + 'px';
-        app.style.marginTop = offsetY + 'px';
+        container.style.left = '0';
+        container.style.top = '0';
+        container.style.marginLeft = offsetX + 'px';
+        container.style.marginTop = offsetY + 'px';
         
-        // Show the app after positioning
-        app.style.visibility = 'visible';
-
-        // 更新返回按钮位置，相对于 #app 左上角
-        var btn = document.getElementById('web-back-btn');
-        if (btn) {
-          var btnSize = 48 * scale;
-          var btnMargin = 20 * scale;
-          btn.style.width = btnSize + 'px';
-          btn.style.height = btnSize + 'px';
-          btn.style.left = (offsetX + btnMargin) + 'px';
-          btn.style.top = (offsetY + btnMargin) + 'px';
-        }
+        // Show the container after positioning
+        container.style.visibility = 'visible';
       }
     }
     
@@ -160,13 +162,17 @@
   </script>
 </head>
 <body>
-  <div id="app"></div>
-  <!-- Web 返回按钮 - 动态定位 -->
-  <button id="web-back-btn" title="返回">
-    <svg viewBox="0 0 24 24">
-      <polyline points="15 18 9 12 15 6"></polyline>
-    </svg>
-  </button>
+  <!-- 主容器 - 所有内容都在这里，统一缩放 -->
+  <div id="main-container">
+    <!-- 返回按钮 -->
+    <button id="web-back-btn" title="返回">
+      <svg viewBox="0 0 24 24">
+        <polyline points="15 18 9 12 15 6"></polyline>
+      </svg>
+    </button>
+    <!-- 应用容器 -->
+    <div id="app"></div>
+  </div>
   <script>
     // 返回按钮点击事件
     document.getElementById('web-back-btn').addEventListener('click', function() {