@quicktvui/web-renderer 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-renderer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Web renderer for QuickTVUI - provides web browser rendering support",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",

package/src/components/QtBaseComponent.js

@@ -62,6 +62,17 @@ export class QtBaseComponent extends HippyWebView {
         }
         return true
 
+      case 'name':
+        // 存储 name 属性到组件实例和 DOM 上，用于子组件查找
+        this.props = this.props || {}
+        this.props.name = value
+        if (value) {
+          this.dom.setAttribute('name', String(value))
+        } else {
+          this.dom.removeAttribute('name')
+        }
+        return true
+
       default:
         return false
     }

package/src/components/TabsView.js

@@ -3,6 +3,9 @@ import { QtBaseComponent } from './QtBaseComponent'
 import { registerComponent } from '../core/componentRegistry'
 
 export class TabsView extends QtBaseComponent {
+  // 静态变量追踪实例数量
+  static _instanceCount = 0
+
   constructor(context, id, pId) {
     super(context, id, pId)
     this.tagName = 'TabsView'
@@ -10,12 +13,22 @@ export class TabsView extends QtBaseComponent {
     this.dom.setAttribute('data-component-name', 'TabsView')
     registerComponent(id, this)
 
+    // 追踪实例
+    this._instanceId = ++TabsView._instanceCount
+    console.log('[TabsView] constructor, instanceId:', this._instanceId)
+
     // Tabs state
     this._tabData = null
     this._currentPageIndex = 0
     this._pages = new Map()
     this._tabItems = []
 
+    // 记录已加载过数据的页面，避免重复加载
+    this._loadedPageIndices = new Set()
+
+    // 记录最后一次分发 pageChanged 的页面索引，避免重复触发
+    this._lastPageChangedIndex = -1
+
     // 子组件引用，通过 name 属性存储
     // 'tabList' -> qt-nav-bar
     // 'content' -> recycler-view-pager
@@ -70,11 +83,17 @@ export class TabsView extends QtBaseComponent {
       console.log('[TabsView] intercepted event from tabList:', eventName, params)
 
       // 处理 onItemFocused 事件 (hasFocus === true 时切换页面)
-      if (eventName === 'onItemFocused' && params && params.hasFocus === true) {
+      // 注意：事件名可能是 onItemfocused 或 onItemFocused
+      if (
+        (eventName === 'onItemFocused' || eventName === 'onItemfocused') &&
+        params &&
+        params.hasFocus === true
+      ) {
         const pageIndex = params.position
         if (pageIndex !== undefined && pageIndex !== this._currentPageIndex) {
           console.log('[TabsView] tab focus changed to:', pageIndex)
           this._currentPageIndex = pageIndex
+          this._syncContentCurrentPage(pageIndex)
           this._dispatchPageChanged(pageIndex)
           this._dispatchLoadPageData(pageIndex, false)
         }
@@ -86,15 +105,58 @@ export class TabsView extends QtBaseComponent {
         if (pageIndex !== undefined && pageIndex !== this._currentPageIndex) {
           console.log('[TabsView] tab clicked, switching to:', pageIndex)
           this._currentPageIndex = pageIndex
+          this._syncContentCurrentPage(pageIndex)
           this._dispatchPageChanged(pageIndex)
           this._dispatchLoadPageData(pageIndex, false)
         }
       }
     }
 
+    // 添加 DOM 焦点事件监听，用于捕获 tab 切换
+    this._boundHandleTabFocusIn = this._handleTabFocusIn.bind(this)
+    tabList.dom.addEventListener('focusin', this._boundHandleTabFocusIn)
+
     console.log('[TabsView] tabList listeners setup complete')
   }
 
+  // 处理 tab 导航栏中的 DOM 焦点事件
+  _handleTabFocusIn(event) {
+    const tabList = this.getChildByName('tabList')
+    if (!tabList) return
+
+    // 查找 itemContainer
+    let itemContainer = tabList._itemContainer
+    if (!itemContainer) {
+      itemContainer = tabList.dom.querySelector('.flex-view-item-container')
+    }
+    if (!itemContainer) return
+
+    // 找到焦点元素对应的 tab 索引
+    const items = itemContainer.children
+    let focusIndex = -1
+    for (let i = 0; i < items.length; i++) {
+      if (items[i] === event.target || items[i].contains(event.target)) {
+        focusIndex = i
+        break
+      }
+    }
+
+    if (focusIndex !== -1 && focusIndex !== this._currentPageIndex) {
+      console.log('[TabsView] DOM focus changed to tab:', focusIndex)
+      this._currentPageIndex = focusIndex
+      this._syncContentCurrentPage(focusIndex)
+      this._dispatchPageChanged(focusIndex)
+      this._dispatchLoadPageData(focusIndex, false)
+    }
+  }
+
+  _syncContentCurrentPage(pageIndex) {
+    const content = this.getChildByName('content')
+    if (content && typeof content.setCurrentPage === 'function') {
+      content.setCurrentPage(pageIndex)
+    }
+  }
+
   // Remove child
   removeChild(view) {
     if (view && view.dom) {
@@ -157,14 +219,19 @@ export class TabsView extends QtBaseComponent {
     this._tabData = { ...config, data }
     this._tabItems = Array.isArray(data) ? data : []
     this._currentPageIndex = config.defaultIndex ?? 0
-    this._focusIndex = config.focusIndex ?? this._currentPageIndex
+    // 修复：使用正确的属性名 defaultFocusIndex
+    this._focusIndex = config.defaultFocusIndex ?? config.focusIndex ?? this._currentPageIndex
 
     console.log(
       '[TabsView] setTabsData:',
       config,
       data,
       'tabList:',
-      this._childrenByName.get('tabList')
+      this._childrenByName.get('tabList'),
+      'defaultFocusIndex:',
+      config.defaultFocusIndex,
+      '_focusIndex:',
+      this._focusIndex
     )
 
     // 通过 name 获取 tabList (qt-nav-bar) 并设置数据
@@ -187,10 +254,103 @@ export class TabsView extends QtBaseComponent {
       }
       // Dispatch page changed event
       this._dispatchPageChanged(this._currentPageIndex)
+      // 分发加载数据事件
       this._dispatchLoadPageData(this._currentPageIndex, false)
+
+      // 延迟设置焦点，等待 QtFlexView 渲染完成
+      setTimeout(() => {
+        this._setInitialTabFocus()
+      }, 100)
     })
   }
 
+  // 设置 tab 导航栏的初始焦点
+  _setInitialTabFocus() {
+    const tabList = this.getChildByName('tabList')
+    if (!tabList || !tabList.dom) {
+      console.log('[TabsView] _setInitialTabFocus: tabList not found')
+      return
+    }
+
+    const focusIndex = this._focusIndex
+
+    // 查找 tabList 中的 itemContainer（实际渲染的项目容器）
+    // QtFlexView 使用 _itemContainer 存储渲染的项目
+    let itemContainer = tabList._itemContainer
+    if (!itemContainer) {
+      // 尝试通过 DOM 查找
+      itemContainer = tabList.dom.querySelector('.flex-view-item-container')
+    }
+
+    if (itemContainer) {
+      // 从 itemContainer 中查找实际渲染的项目
+      const renderedItems = itemContainer.children
+      console.log(
+        '[TabsView] _setInitialTabFocus: itemContainer found, children:',
+        renderedItems.length
+      )
+
+      if (renderedItems.length > 0 && focusIndex >= 0 && focusIndex < renderedItems.length) {
+        const targetWrapper = renderedItems[focusIndex]
+        // 在 wrapper 内部查找可聚焦元素
+        const focusableItem =
+          targetWrapper.querySelector('[focusable="true"], [focusable="1"], [focusable]') ||
+          targetWrapper
+
+        console.log(
+          '[TabsView] _setInitialTabFocus: setting focus to rendered item index',
+          focusIndex,
+          focusableItem
+        )
+
+        // 设置 autofocus 属性
+        focusableItem.setAttribute('autofocus', 'true')
+
+        // 直接触发焦点设置
+        if (global.__TV_FOCUS_MANAGER__) {
+          // 先标记该页已加载，防止焦点事件触发重复加载
+          // 注意：这里不需要，因为焦点设置的是同一个页面（focusIndex === _currentPageIndex）
+          global.__TV_FOCUS_MANAGER__.updateFocusableElements()
+          global.__TV_FOCUS_MANAGER__._doFocusElement(focusableItem)
+        }
+        return
+      }
+    }
+
+    // 回退：查找非模板的可聚焦元素
+    const allFocusable = tabList.dom.querySelectorAll(
+      '[focusable="true"], [focusable="1"], [focusable]'
+    )
+    const focusableItems = Array.from(allFocusable).filter((el) => {
+      // 排除模板元素
+      return (
+        el.getAttribute('data-template') !== 'true' &&
+        el.style.display !== 'none' &&
+        !el.closest('[data-template="true"]')
+      )
+    })
+
+    console.log('[TabsView] _setInitialTabFocus: fallback, focusableItems:', focusableItems.length)
+
+    if (focusableItems.length > 0 && focusIndex >= 0 && focusIndex < focusableItems.length) {
+      const targetItem = focusableItems[focusIndex]
+      console.log('[TabsView] _setInitialTabFocus: setting focus to index', focusIndex, targetItem)
+
+      targetItem.setAttribute('autofocus', 'true')
+
+      if (global.__TV_FOCUS_MANAGER__) {
+        global.__TV_FOCUS_MANAGER__.updateFocusableElements()
+        global.__TV_FOCUS_MANAGER__._doFocusElement(targetItem)
+      }
+    } else {
+      console.log(
+        '[TabsView] _setInitialTabFocus: no focusable items found or invalid index',
+        focusIndex,
+        focusableItems.length
+      )
+    }
+  }
+
   // Set page data - 设置页面内容数据
   setPageData(...args) {
     args = Array.isArray(args[0]) && args.length === 1 ? args[0] : args
@@ -301,12 +461,12 @@ export class TabsView extends QtBaseComponent {
 
   // Reload all pages
   reloadAll(updateCurrent = true) {
-    this._dispatchLoadPageData(this._currentPageIndex, false)
+    this._dispatchLoadPageData(this._currentPageIndex, false, true)
   }
 
   // Reload specific page
   reloadPage(pageIndex) {
-    this._dispatchLoadPageData(pageIndex, false)
+    this._dispatchLoadPageData(pageIndex, false, true)
   }
 
   // Invoke content function
@@ -396,24 +556,67 @@ export class TabsView extends QtBaseComponent {
 
   // Dispatch page changed event
   _dispatchPageChanged(pageIndex) {
+    // 防止重复触发同一页面的 pageChanged 事件
+    if (this._lastPageChangedIndex === pageIndex) {
+      console.log(
+        '[TabsView] _dispatchPageChanged: skipping duplicate page changed for index',
+        pageIndex,
+        'instanceId:',
+        this._instanceId
+      )
+      return
+    }
+    this._lastPageChangedIndex = pageIndex
+
     const params = {
       pageIndex,
       data: this._tabItems[pageIndex] || null,
     }
-    console.log('[TabsView] _dispatchPageChanged, pageIndex:', pageIndex, 'events:', this.events)
+    console.log(
+      '[TabsView] _dispatchPageChanged, pageIndex:',
+      pageIndex,
+      'instanceId:',
+      this._instanceId,
+      'events:',
+      this.events
+    )
     // es3-vue 将 @page-changed 转换为 pagechanged 存储在 events 中
     this.dispatchEvent('onPagechanged', params)
   }
 
   // Dispatch load page event
-  _dispatchLoadPageData(pageIndex, useDiff) {
+  _dispatchLoadPageData(pageIndex, useDiff, force = false) {
+    // 防止重复加载同一页数据（除非强制刷新）
+    if (!force && this._loadedPageIndices.has(pageIndex)) {
+      console.log(
+        '[TabsView] _dispatchLoadPageData: skipping already loaded page',
+        pageIndex,
+        'instanceId:',
+        this._instanceId
+      )
+      return
+    }
+
     const params = {
       pageIndex,
       itemCount: 0,
       data: this._tabItems[pageIndex] || null,
       useDiff: !!useDiff,
     }
-    console.log('[TabsView] _dispatchLoadPageData, pageIndex:', pageIndex, 'events:', this.events)
+    console.log(
+      '[TabsView] _dispatchLoadPageData, instanceId:',
+      this._instanceId,
+      'pageIndex:',
+      pageIndex,
+      'force:',
+      force,
+      'alreadyLoaded:',
+      this._loadedPageIndices.has(pageIndex),
+      'loadedIndices:',
+      Array.from(this._loadedPageIndices)
+    )
+    // 标记该页已加载
+    this._loadedPageIndices.add(pageIndex)
     // es3-vue 将 @load-page 转换为 loadpagedata 存储在 events 中
     this.dispatchEvent('onLoadpagedata', params)
   }