@quicktvui/web-renderer 1.0.7 → 1.0.8

package/package.json

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

package/src/components/QtBaseComponent.js

@@ -1,16 +1,25 @@
 /**
  * QtBaseComponent - Base class for all QuickTV UI components
- * Provides common property handling (visible, visibility, showOnState, etc.)
+ * Provides common property handling (visible, visibility, etc.)
  */
 import { HippyWebView } from '@hippy/web-renderer'
 
+/**
+ * Visibility enum values
+ * @typedef {'visible' | 'invisible' | 'gone'} QTVisibility
+ */
+
 export class QtBaseComponent extends HippyWebView {
   constructor(context, id, pId) {
     super(context, id, pId)
+    // Store original display value for visibility toggle
     this._originalDisplay = undefined
-    this._showOnState = null
   }
 
+  /**
+   * Override updateProperty to handle common properties first
+   * Subclasses should call super.updateProperty(key, value) for unhandled properties
+   */
   updateProperty(key, value) {
     if (key === 'type' && this.dom) {
       if (value !== null && value !== undefined && value !== '') {
@@ -28,6 +37,12 @@ export class QtBaseComponent extends HippyWebView {
     super.updateProperty(key, value)
   }
 
+  /**
+   * Handle common properties
+   * @param {string} key - Property name
+   * @param {*} value - Property value
+   * @returns {boolean} - True if handled
+   */
   _handleCommonProperty(key, value) {
     switch (key) {
       case 'visible':
@@ -39,6 +54,7 @@ export class QtBaseComponent extends HippyWebView {
         return true
 
       case 'autofocus':
+        // 将 autofocus 属性设置到 DOM 元素上，供 TVFocusManager 识别
         if (value === true || value === 'true' || value === 1 || value === '1') {
           this.dom.setAttribute('autofocus', 'true')
         } else {
@@ -47,6 +63,7 @@ export class QtBaseComponent extends HippyWebView {
         return true
 
       case 'name':
+        // 存储 name 属性到组件实例和 DOM 上，用于子组件查找
         this.props = this.props || {}
         this.props.name = value
         if (value) {
@@ -57,7 +74,18 @@ export class QtBaseComponent extends HippyWebView {
         return true
 
       case 'showOnState':
-        this._setShowOnState(value)
+        // showOnState 属性：根据状态控制元素可见性
+        // 支持 'normal' | 'focused' | 'selected' | 'disabled' 或数组形式
+        if (value !== null && value !== undefined) {
+          if (Array.isArray(value)) {
+            this.dom.setAttribute('showOnState', JSON.stringify(value))
+          } else {
+            this.dom.setAttribute('showOnState', String(value))
+          }
+        } else {
+          this.dom.removeAttribute('showOnState')
+          this.dom.removeAttribute('showonstate')
+        }
         return true
 
       default:
@@ -65,17 +93,34 @@ export class QtBaseComponent extends HippyWebView {
     }
   }
 
+  /**
+   * Set component visibility via boolean
+   * @param {boolean} visible - true to show, false to hide
+   */
   _setVisible(visible) {
     if (visible === true) {
+      // Restore original display value if saved
       if (this._originalDisplay !== undefined) {
         this.dom.style.display = this._originalDisplay
       } else {
+        // In Hippy, all elements default to flex layout
+        // Check if the element has flex properties and set display: flex accordingly
         const style = this.dom.style
+        const hasFlexProperties =
+          style.flexDirection ||
+          style.justifyContent ||
+          style.alignItems ||
+          style.flexWrap ||
+          style.flexGrow ||
+          style.flexShrink
+
+        // Default to 'flex' for Hippy compatibility, unless display is already set
         if (!style.display || style.display === 'none') {
-          style.display = 'flex'
+          style.display = hasFlexProperties ? 'flex' : 'flex'
         }
       }
     } else {
+      // Save current display value before hiding
       if (this._originalDisplay === undefined) {
         const currentDisplay = this.dom.style.display
         if (currentDisplay && currentDisplay !== 'none') {
@@ -86,12 +131,19 @@ export class QtBaseComponent extends HippyWebView {
     }
   }
 
+  /**
+   * Set component visibility via enum
+   * @param {QTVisibility} visibility - 'visible' | 'invisible' | 'gone'
+   */
   _setVisibility(visibility) {
     switch (visibility) {
       case 'visible':
+        // Restore display and ensure visibility
         if (this._originalDisplay !== undefined) {
           this.dom.style.display = this._originalDisplay
         } else {
+          // In Hippy, all elements default to flex layout
+          // Default to 'flex' for Hippy compatibility
           const style = this.dom.style
           if (!style.display || style.display === 'none') {
             style.display = 'flex'
@@ -101,10 +153,12 @@ export class QtBaseComponent extends HippyWebView {
         break
 
       case 'invisible':
+        // Hidden but takes space
         this.dom.style.visibility = 'hidden'
         break
 
       case 'gone':
+        // Completely hidden, doesn't take space
         if (this._originalDisplay === undefined) {
           const currentDisplay = this.dom.style.display
           if (currentDisplay && currentDisplay !== 'none') {
@@ -119,91 +173,19 @@ export class QtBaseComponent extends HippyWebView {
     }
   }
 
-  _setShowOnState(value) {
-    if (value === null || value === undefined) {
-      this._showOnState = null
-      this.dom.removeAttribute('showOnState')
-      this.dom.style.display = ''
-      return
-    }
-
-    this._showOnState = value
-
-    if (Array.isArray(value)) {
-      this.dom.setAttribute('showOnState', JSON.stringify(value))
-    } else {
-      this.dom.setAttribute('showOnState', String(value))
-    }
-
-    this._initShowOnStateVisibility()
-  }
-
-  _initShowOnStateVisibility() {
-    if (!this._showOnState) return
-
-    const focusedParent = this.dom.closest('.focused')
-    const selectedParent = this.dom.closest('[selected="true"], [selected=""]')
-
-    let currentState = 'normal'
-    if (focusedParent) {
-      currentState = 'focused'
-    } else if (selectedParent) {
-      currentState = 'selected'
-    }
-
-    this._applyShowOnState(currentState)
-  }
-
-  _applyShowOnState(state) {
-    if (!this._showOnState) return
-
-    const states = this._parseShowOnState(this._showOnState)
-    const shouldShow = states.includes(state.toLowerCase())
-
-    if (shouldShow) {
-      if (this._originalDisplay !== undefined) {
-        this.dom.style.display = this._originalDisplay
-      } else {
-        this.dom.style.display = ''
-      }
-    } else {
-      if (this._originalDisplay === undefined) {
-        const currentDisplay = this.dom.style.display
-        if (currentDisplay && currentDisplay !== 'none') {
-          this._originalDisplay = currentDisplay
-        }
-      }
-      this.dom.style.display = 'none'
-    }
-  }
-
-  _parseShowOnState(value) {
-    if (Array.isArray(value)) {
-      return value.map((s) => String(s).toLowerCase())
-    }
-
-    if (typeof value === 'string') {
-      try {
-        const parsed = JSON.parse(value)
-        if (Array.isArray(parsed)) {
-          return parsed.map((s) => String(s).toLowerCase())
-        }
-      } catch (e) {}
-      return [value.toLowerCase()]
-    }
-
-    return []
-  }
-
+  /**
+   * Public method to set visibility via boolean
+   * @param {boolean} visible - true to show, false to hide
+   */
   setVisible(visible) {
     this._setVisible(visible)
   }
 
+  /**
+   * Public method to set visibility via enum
+   * @param {QTVisibility} visibility - 'visible' | 'invisible' | 'gone'
+   */
   setVisibility(visibility) {
     this._setVisibility(visibility)
   }
-
-  setShowOnState(value) {
-    this._setShowOnState(value)
-  }
 }

package/src/components/QtFastListView.js

@@ -973,12 +973,66 @@ export class QtFastListView extends QtBaseComponent {
     }
   }
 
-  // Request focus on item
+  // Request focus on item at position (called by qt-grid-view setItemFocused)
+  requestFocus(position) {
+    console.log('[QtFastListView] requestFocus called with position:', position)
+    const items = this._itemContainer.children
+    if (position < 0 || position >= items.length) {
+      console.warn(
+        '[QtFastListView] requestFocus: invalid position',
+        position,
+        'items count:',
+        items.length
+      )
+      return
+    }
+    const item = items[position]
+    if (!item) {
+      console.warn('[QtFastListView] requestFocus: no item at position', position)
+      return
+    }
+
+    // 找到 item 内部可聚焦的元素
+    const focusable = item.querySelector('[focusable="true"], [focusable="1"], [focusable]') || item
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (focusManager) {
+      focusManager.updateFocusableElements()
+      focusManager._doFocusElement(focusable)
+    } else {
+      focusable.focus()
+    }
+    console.log('[QtFastListView] requestFocus: focused item at position', position)
+  }
+
+  // Request focus on item (called by tv-list requestFocus)
   requestChildFocus(position) {
-    const item = this._itemContainer.children[position]
-    if (item) {
-      item.focus()
+    console.log('[QtFastListView] requestChildFocus called with position:', position)
+    const items = this._itemContainer.children
+    if (position < 0 || position >= items.length) {
+      console.warn(
+        '[QtFastListView] requestChildFocus: invalid position',
+        position,
+        'items count:',
+        items.length
+      )
+      return
+    }
+    const item = items[position]
+    if (!item) {
+      console.warn('[QtFastListView] requestChildFocus: no item at position', position)
+      return
+    }
+
+    // 找到 item 内部可聚焦的元素
+    const focusable = item.querySelector('[focusable="true"], [focusable="1"], [focusable]') || item
+    const focusManager = global.__TV_FOCUS_MANAGER__
+    if (focusManager) {
+      focusManager.updateFocusableElements()
+      focusManager._doFocusElement(focusable)
+    } else {
+      focusable.focus()
     }
+    console.log('[QtFastListView] requestChildFocus: focused item at position', position)
   }
 
   // Set span count for grid layout

package/src/components/QtImage.js

@@ -1,6 +1,7 @@
 // QtImage component for image handling
 import { QtBaseComponent } from './QtBaseComponent'
 import { registerComponent } from '../core/componentRegistry'
+import { normalizeHpfileAssetUrl } from '../core/styleBackground'
 
 export class QtImage extends QtBaseComponent {
   constructor(context, id, pId) {
@@ -113,6 +114,8 @@ export class QtImage extends QtBaseComponent {
       }
     }
 
+    srcValue = normalizeHpfileAssetUrl(srcValue)
+
     // Store for later use (e.g., repeat mode)
     this._currentSrc = srcValue
 

package/src/components/QtTransitionImage.js

@@ -1,6 +1,7 @@
 // QtTransitionImage - 支持过渡效果的图片组件
 import { QtBaseComponent } from './QtBaseComponent'
 import { registerComponent } from '../core/componentRegistry'
+import { normalizeHpfileAssetUrl } from '../core/styleBackground'
 
 export class QtTransitionImage extends QtBaseComponent {
   constructor(context, id, pId) {
@@ -58,6 +59,8 @@ export class QtTransitionImage extends QtBaseComponent {
       srcValue = value.uri
     }
 
+    srcValue = normalizeHpfileAssetUrl(srcValue)
+
     // 如果是同一张图片，不做处理
     if (srcValue === this._currentSrc) return
 

package/src/components/QtView.js

@@ -1,6 +1,7 @@
 // Base QtView component that maps to div
 import { QtBaseComponent } from './QtBaseComponent'
 import { registerComponentBySid, unregisterComponentBySid } from '../core/componentRegistry'
+import { normalizeBackgroundStyleValue, normalizeHpfileAssetUrl } from '../core/styleBackground'
 
 // Global registry for DOM-to-Component mapping
 window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
@@ -138,7 +139,6 @@ export class QtView extends QtBaseComponent {
       'duplicateParentState',
       'blockFocusDirections',
       'blockfocusdirections',
-      'showOnState',
     ]
 
     // Focus style attributes (for duplicateParentState)
@@ -259,6 +259,13 @@ export class QtView extends QtBaseComponent {
     Object.keys(styleObj).forEach((key) => {
       let value = styleObj[key]
 
+      if (key === 'backgroundImage' || key === 'background') {
+        const normalizedBackground = normalizeBackgroundStyleValue(key, value)
+        if (normalizedBackground !== value) {
+          value = normalizedBackground
+        }
+      }
+
       // Convert numeric values to pixels for appropriate properties
       if (typeof value === 'number') {
         const needsPx = [
@@ -581,6 +588,24 @@ export class QtView extends QtBaseComponent {
     console.log('[QtView] setBackGroundColor:', cssColor)
   }
 
+  /**
+   * Set the background image of the element
+   * @param {string} src - image URL
+   */
+  setBackgroundImage(src) {
+    console.log('[QtView] setBackgroundImage called with:', src, 'type:', typeof src)
+
+    if (!src) {
+      this.dom.style.backgroundImage = ''
+      return
+    }
+
+    let srcValue = normalizeHpfileAssetUrl(src)
+
+    this.dom.style.backgroundImage = `url(${srcValue})`
+    console.log('[QtView] Set backgroundImage to:', srcValue)
+  }
+
   /**
    * Set the size of the element
    * @param {number} width - width in pixels

package/src/core/TVFocusManager.js

@@ -223,6 +223,31 @@ export class TVFocusManager {
       return `[id="${id}"]`
     }
 
+    // Try data-position or data-index (for FastListView items)
+    const dataPosition = element.getAttribute('data-position')
+    const dataIndex = element.getAttribute('data-index')
+    if (dataPosition !== null) {
+      // 找到 FastListView 容器，生成完整选择器
+      const container = this._findFastListViewContainer(element)
+      if (container) {
+        const containerId = container.id
+        if (containerId) {
+          return `[id="${containerId}"] [data-position="${dataPosition}"]`
+        }
+      }
+      return `[data-position="${dataPosition}"]`
+    }
+    if (dataIndex !== null) {
+      const container = this._findFastListViewContainer(element)
+      if (container) {
+        const containerId = container.id
+        if (containerId) {
+          return `[id="${containerId}"] [data-index="${dataIndex}"]`
+        }
+      }
+      return `[data-index="${dataIndex}"]`
+    }
+
     // Generate path-based selector
     const path = []
     let current = element
@@ -237,6 +262,20 @@ export class TVFocusManager {
         break
       }
 
+      // 尝试使用 data-position 或 data-index
+      const pos = current.getAttribute('data-position')
+      const idx = current.getAttribute('data-index')
+      if (pos !== null) {
+        selector = `[data-position="${pos}"]`
+        path.unshift(selector)
+        break
+      }
+      if (idx !== null) {
+        selector = `[data-index="${idx}"]`
+        path.unshift(selector)
+        break
+      }
+
       if (current.className && typeof current.className === 'string') {
         const classes = current.className.split(' ').filter((c) => c && !c.includes(':'))
         if (classes.length > 0) {
@@ -261,6 +300,22 @@ export class TVFocusManager {
     return path.join(' > ')
   }
 
+  /**
+   * 找到元素所在的 FastListView 容器
+   */
+  _findFastListViewContainer(element) {
+    if (!element) return null
+    let current = element
+    while (current && current !== document.body) {
+      const componentName = current.getAttribute('data-component-name')
+      if (componentName === 'FastListView') {
+        return current
+      }
+      current = current.parentElement
+    }
+    return null
+  }
+
   resetForNewPage() {
     // console.log('[TVFocus] Resetting focus for new page')
     this.clearFocus()
@@ -537,6 +592,33 @@ export class TVFocusManager {
   handleKeyDown(e) {
     this._dispatchPageKeyDown(e)
 
+    // 检查当前焦点元素是否在当前页面中有效
+    if (this.focusedElement) {
+      const currentPage = this._getCurrentPage()
+      const isInCurrentPage = currentPage && currentPage.contains(this.focusedElement)
+      const isInDOM = document.body.contains(this.focusedElement)
+      if (!isInCurrentPage || !isInDOM) {
+        console.log('[TVFocusManager] focusedElement 不在当前页面，清除焦点')
+        this.clearFocus()
+      }
+    }
+
+    // 当页面没有焦点时，按任意键（Escape除外）都聚焦到第一个可聚焦元素
+    if (!this.focusedElement && e.key !== 'Escape') {
+      // 先尝试从当前页面的 PageRootView 恢复焦点状态
+      if (this._restoreFocusFromPageRootView()) {
+        e.preventDefault()
+        return
+      }
+      // 没有保存的焦点状态，聚焦第一个元素
+      this.updateFocusableElements()
+      if (this.focusableElements.length > 0) {
+        this._doFocusElement(this.focusableElements[0])
+        e.preventDefault()
+        return
+      }
+    }
+
     if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape'].includes(e.key)) {
       return
     }
@@ -1179,6 +1261,43 @@ export class TVFocusManager {
     return [String(attrValue).toLowerCase()]
   }
 
+  _getShowOnStateAttr(element) {
+    if (!element || !element.getAttribute) return null
+    return element.getAttribute('showOnState') || element.getAttribute('showonstate')
+  }
+
+  _getShowOnStateElements(container, includeSelf = false) {
+    if (!container || !container.querySelectorAll) return []
+
+    const elements = Array.from(container.querySelectorAll('[showOnState], [showonstate]'))
+    if (includeSelf && container.matches?.('[showOnState], [showonstate]')) {
+      elements.unshift(container)
+    }
+
+    return elements
+  }
+
+  _resolveShowOnStateState(element) {
+    if (!element) return 'normal'
+
+    if (
+      this.focusedElement &&
+      (element === this.focusedElement || this.focusedElement.contains(element))
+    ) {
+      return 'focused'
+    }
+
+    if (element.closest('.focused')) {
+      return 'focused'
+    }
+
+    if (element.closest('[selected="true"], [selected=""]')) {
+      return 'selected'
+    }
+
+    return 'normal'
+  }
+
   /**
    * 检查元素是否应该在指定状态显示
    * @param {HTMLElement} element - 要检查的元素
@@ -1186,7 +1305,7 @@ export class TVFocusManager {
    * @returns {boolean|null} - 是否应该显示，null 表示没有 showOnState 属性
    */
   _shouldShowOnState(element, state) {
-    const showOnStateAttr = element.getAttribute('showOnState')
+    const showOnStateAttr = this._getShowOnStateAttr(element)
     if (!showOnStateAttr) return null
 
     const states = this._parseShowOnState(showOnStateAttr)
@@ -1213,7 +1332,7 @@ export class TVFocusManager {
     }
 
     // 更新所有带 showOnState 属性的子元素
-    const showOnStateChildren = element.querySelectorAll('[showOnState]')
+    const showOnStateChildren = this._getShowOnStateElements(element)
     showOnStateChildren.forEach((child) => {
       const childShouldShow = this._shouldShowOnState(child, state)
       if (childShouldShow !== null) {
@@ -1232,22 +1351,10 @@ export class TVFocusManager {
    * 默认设置为 'normal' 状态
    */
   _initShowOnStateVisibility() {
-    const showOnStateElements = document.querySelectorAll('[showOnState]')
+    const showOnStateElements = document.querySelectorAll('[showOnState], [showonstate]')
     showOnStateElements.forEach((element) => {
-      // 检查元素是否有 duplicateParentState 属性
-      const hasDuplicateParentState =
-        element.hasAttribute('duplicateParentState') || element.hasAttribute('duplicateparentstate')
-
-      // 检查元素是否在已获得焦点的元素内
-      const focusedParent = element.closest('.focused')
-
-      if (focusedParent) {
-        // 如果在已获得焦点的元素内，使用 focused 状态
-        this._updateShowOnStateVisibilityForElement(element, 'focused')
-      } else {
-        // 否则使用 normal 状态
-        this._updateShowOnStateVisibilityForElement(element, 'normal')
-      }
+      const state = this._resolveShowOnStateState(element)
+      this._updateShowOnStateVisibilityForElement(element, state)
     })
   }
 
@@ -1276,8 +1383,7 @@ export class TVFocusManager {
   initShowOnStateForElement(container) {
     if (!container) return
 
-    // 查找容器内所有带 showOnState 属性的元素
-    const showOnStateElements = container.querySelectorAll('[showOnState]')
+    const showOnStateElements = this._getShowOnStateElements(container, true)
     console.log(
       '[TVFocusManager] initShowOnStateForElement found',
       showOnStateElements.length,
@@ -1285,17 +1391,8 @@ export class TVFocusManager {
     )
 
     showOnStateElements.forEach((element) => {
-      // 检查元素是否在已获得焦点的元素内
-      const focusedParent = element.closest('.focused')
-      const selectedParent = element.closest('[selected="true"], [selected=""]')
-
-      if (focusedParent) {
-        this._updateShowOnStateVisibilityForElement(element, 'focused')
-      } else if (selectedParent) {
-        this._updateShowOnStateVisibilityForElement(element, 'selected')
-      } else {
-        this._updateShowOnStateVisibilityForElement(element, 'normal')
-      }
+      const state = this._resolveShowOnStateState(element)
+      this._updateShowOnStateVisibilityForElement(element, state)
     })
   }
 
@@ -1431,6 +1528,199 @@ export class TVFocusManager {
     // console.log('[TVFocus] Focused element', element)
   }
 
+  /**
+   * 保存当前页面的焦点状态（供外部调用，如 patches.js）
+   * 在创建新页面前保存当前页面焦点
+   */
+  saveCurrentPageFocus() {
+    if (!this.focusedElement) {
+      console.log('[TVFocusManager] saveCurrentPageFocus: 当前没有焦点元素')
+      return
+    }
+    const pageRootView = this._findPageRootView(this.focusedElement)
+    if (!pageRootView) {
+      console.log('[TVFocusManager] saveCurrentPageFocus: 未找到 PageRootView')
+      return
+    }
+
+    // 检查焦点是否在 FastListView 内
+    const fastListInfo = this._getFastListViewFocusInfo(this.focusedElement)
+    if (fastListInfo) {
+      // 存储 FastListView 焦点信息
+      pageRootView.setAttribute('data-last-fastlist-id', fastListInfo.containerId)
+      pageRootView.setAttribute('data-last-fastlist-position', fastListInfo.position)
+      console.log(
+        '[TVFocusManager] 保存 FastListView 焦点，容器ID:',
+        fastListInfo.containerId,
+        '位置:',
+        fastListInfo.position
+      )
+    } else {
+      // 清除之前的 FastListView 信息
+      pageRootView.removeAttribute('data-last-fastlist-id')
+      pageRootView.removeAttribute('data-last-fastlist-position')
+    }
+
+    const selector = this._generateElementSelector(this.focusedElement)
+    pageRootView.setAttribute('data-last-focus-selector', selector)
+    console.log('[TVFocusManager] 保存当前页面焦点到 PageRootView，选择器:', selector)
+  }
+
+  /**
+   * 获取 FastListView 内的焦点信息
+   * @returns {{ containerId: string, position: number } | null}
+   */
+  _getFastListViewFocusInfo(element) {
+    if (!element) return null
+
+    // 查找元素或其父元素的 data-position 或 data-index
+    let current = element
+    let position = null
+    let container = null
+
+    while (current && current !== document.body) {
+      const pos = current.getAttribute('data-position')
+      const idx = current.getAttribute('data-index')
+      if (pos !== null) {
+        position = parseInt(pos)
+      } else if (idx !== null) {
+        position = parseInt(idx)
+      }
+
+      const componentName = current.getAttribute('data-component-name')
+      if (componentName === 'FastListView') {
+        container = current
+        break
+      }
+      current = current.parentElement
+    }
+
+    if (container && position !== null) {
+      return {
+        containerId: container.id,
+        position: position,
+      }
+    }
+    return null
+  }
+
+  /**
+   * 从 ESPageRootView DOM 恢复焦点状态
+   */
+  _restoreFocusFromPageRootView() {
+    const currentPage = this._getCurrentPage()
+    if (!currentPage) return false
+
+    // 优先检查 FastListView 焦点信息
+    const fastListId = currentPage.getAttribute('data-last-fastlist-id')
+    const fastListPosition = currentPage.getAttribute('data-last-fastlist-position')
+    if (fastListId && fastListPosition !== null) {
+      console.log(
+        '[TVFocusManager] 检测到 FastListView 焦点信息，容器ID:',
+        fastListId,
+        '位置:',
+        fastListPosition
+      )
+      const container = document.getElementById(fastListId)
+      if (container && container.__fastListViewInstance) {
+        const fastList = container.__fastListViewInstance
+        const position = parseInt(fastListPosition)
+        // 延迟调用，等待元素渲染完成
+        setTimeout(() => {
+          fastList.requestChildFocus(position)
+        }, 100)
+        return true
+      }
+    }
+
+    const selector = currentPage.getAttribute('data-last-focus-selector')
+    if (!selector) {
+      console.log('[TVFocusManager] PageRootView 没有保存的焦点状态')
+      return false
+    }
+
+    console.log('[TVFocusManager] 从 PageRootView 恢复焦点，选择器:', selector)
+    this.updateFocusableElements()
+    const element = document.querySelector(selector)
+    if (element && this.focusableElements.includes(element)) {
+      this._doFocusElement(element)
+      return true
+    }
+
+    // 尝试解析 FastListView 相关的选择器
+    // 格式: [id="containerId"] [data-position="X"] 或 [data-position="X"]
+    const positionMatch = selector.match(/\[data-position="(\d+)"\]/)
+    const indexMatch = selector.match(/\[data-index="(\d+)"\]/)
+    const containerMatch = selector.match(/\[id="([^"]+)"\]/)
+
+    if ((positionMatch || indexMatch) && containerMatch) {
+      const position = positionMatch ? parseInt(positionMatch[1]) : parseInt(indexMatch[1])
+      const containerId = containerMatch[1]
+      console.log(
+        '[TVFocusManager] 尝试通过 FastListView 恢复焦点，容器:',
+        containerId,
+        '位置:',
+        position
+      )
+
+      // 找到 FastListView 容器
+      const container = document.getElementById(containerId)
+      if (container && container.__fastListViewInstance) {
+        const fastList = container.__fastListViewInstance
+        // 延迟调用 requestChildFocus，等待元素渲染完成
+        setTimeout(() => {
+          fastList.requestChildFocus(position)
+        }, 100)
+        return true
+      }
+    }
+
+    console.log('[TVFocusManager] 无法找到元素:', selector)
+    return false
+  }
+
+  /**
+   * 找到元素所在的 ESPageRootView
+   */
+  _findPageRootView(element) {
+    if (!element) return null
+    let current = element
+    while (current && current !== document.body) {
+      const componentName = current.getAttribute('data-component-name')
+      if (componentName === 'ESPageRootView') {
+        return current
+      }
+      current = current.parentElement
+    }
+    return null
+  }
+
+  /**
+   * 恢复上一个页面的焦点（当页面被删除时调用）
+   * 由 patches.js 中的 deleteNode 拦截触发
+   */
+  restorePreviousPageFocus() {
+    console.log('[TVFocusManager] restorePreviousPageFocus 被调用')
+
+    // 清除当前焦点
+    this.clearFocus()
+
+    // 更新可聚焦元素列表
+    this.updateFocusableElements()
+
+    // 尝试从当前页面的 PageRootView 恢复焦点
+    if (this._restoreFocusFromPageRootView()) {
+      console.log('[TVFocusManager] 成功恢复上一个页面的焦点')
+      return
+    }
+
+    // 如果没有保存的焦点，聚焦第一个元素
+    if (this.focusableElements.length > 0) {
+      console.log('[TVFocusManager] 没有保存的焦点，聚焦第一个元素')
+      this._doFocusElement(this.focusableElements[0])
+    }
+  }
+
   _maybeNotifyFastListItemFocusChanged(element, hasFocus) {
     if (!element) return
     let parent = element.parentElement

package/src/core/autoProxy.js

@@ -10,6 +10,29 @@
 // 是否启用自动代理（仅开发环境）
 const ENABLE_AUTO_PROXY = process.env.NODE_ENV === 'development'
 
+// 根据文件扩展名获取 Content-Type
+function getContentType(path) {
+  const ext = path.split('.').pop().toLowerCase()
+  const types = {
+    js: 'application/javascript',
+    json: 'application/json',
+    css: 'text/css',
+    html: 'text/html',
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+    woff: 'font/woff',
+    woff2: 'font/woff2',
+    ttf: 'font/ttf',
+    mp3: 'audio/mpeg',
+    mp4: 'video/mp4',
+  }
+  return types[ext] || 'application/octet-stream'
+}
+
 // 需要代理的域名列表（可通过环境变量配置）
 const PROXY_DOMAINS = (process.env.VUE_APP_PROXY_DOMAINS || '')
   .split(',')
@@ -99,19 +122,43 @@ export function initAutoProxy() {
   window.fetch = function (input, init = {}) {
     let url = typeof input === 'string' ? input : input.url
 
+    // 处理 hpfile:// 协议
+    if (typeof url === 'string' && url.startsWith('hpfile://')) {
+      const converted = url.replace(/^hpfile:\/\/\.?\//, '/').replace(/^hpfile:\/\//, '/')
+      console.log('[AutoProxy] fetch hpfile:// converted:', url, '->', converted)
+
+      // 尝试从 VirtualFS 加载
+      if (window.__VIRTUAL_FS__ && window.__VIRTUAL_FS__.has(converted)) {
+        const content = window.__VIRTUAL_FS__.get(converted)
+        const blob = new Blob([content], { type: getContentType(converted) })
+        console.log('[AutoProxy] fetch loading from VirtualFS:', converted)
+        return Promise.resolve(
+          new Response(blob, {
+            status: 200,
+            headers: { 'Content-Type': getContentType(converted) },
+          })
+        )
+      }
+
+      // 返回新的 URL
+      if (typeof input === 'string') {
+        input = converted
+      } else if (input instanceof Request) {
+        input = new Request(converted, init)
+      }
+    }
+
     if (shouldProxy(url)) {
       const proxyUrlStr = toProxyUrl(url)
 
-      // 更新 input
       if (typeof input === 'string') {
         input = proxyUrlStr
       } else if (input instanceof Request) {
-        // 创建新的 Request 对象
         input = new Request(proxyUrlStr, {
           method: input.method,
           headers: input.headers,
           body: input.body,
-          mode: 'cors', // 使用代理时改为同源
+          mode: 'cors',
           credentials: input.credentials,
           cache: input.cache,
           redirect: input.redirect,
@@ -142,6 +189,25 @@ export function initAutoProxy() {
     Object.defineProperty(HTMLImageElement.prototype, 'src', {
       ...originalImageSrcDescriptor,
       set(value) {
+        // 处理 hpfile:// 协议
+        if (typeof value === 'string' && value.startsWith('hpfile://')) {
+          const converted = value
+            .replace(/^hpfile:\/\/\.?\//, '/') // hpfile://./assets/xxx -> /assets/xxx
+            .replace(/^hpfile:\/\//, '/') // hpfile://assets/xxx -> /assets/xxx
+          console.log('[AutoProxy] hpfile:// converted:', value, '->', converted)
+
+          // 尝试从全局 VirtualFS 加载
+          if (window.__VIRTUAL_FS__ && window.__VIRTUAL_FS__.has(converted)) {
+            const content = window.__VIRTUAL_FS__.get(converted)
+            const blob = new Blob([content], { type: getContentType(converted) })
+            const url = URL.createObjectURL(blob)
+            console.log('[AutoProxy] Loading from VirtualFS:', converted)
+            return originalImageSrcDescriptor.set.call(this, url)
+          }
+
+          return originalImageSrcDescriptor.set.call(this, converted)
+        }
+
         if (value.startsWith('http://127.0.0.1:38989')) {
           return originalImageSrcDescriptor.set.call(
             this,

package/src/core/patches.js

@@ -9,6 +9,7 @@ import { runtimeDeviceModuleInstance as RuntimeDeviceModule } from '../modules/R
 import { esToastModuleInstance as ESToastModule } from '../modules/ESToastModule'
 import { ESIJKAudioPlayerModule } from '../modules/ESIJKAudioPlayerModule'
 import { esNetworkSpeedModuleInstance as ESNetworkSpeedModule } from '../modules/ESNetworkSpeedModule'
+import { normalizeStyleBackgroundEntries } from './styleBackground'
 
 // Create singleton instance for audio player
 const audioPlayerModule = new ESIJKAudioPlayerModule(null)
@@ -236,6 +237,27 @@ export function patchCallNative(engine) {
         const [rootViewId, nodes] = args
 
         if (Array.isArray(nodes)) {
+          // 检查是否有 ESPageRootView 被创建，如果有说明要进入新页面
+          let hasNewPage = false
+          nodes.forEach((node) => {
+            let nodeData = node
+            if (Array.isArray(node)) {
+              nodeData = node[0]
+            }
+            if (nodeData && nodeData.name === 'ESPageRootView') {
+              hasNewPage = true
+            }
+          })
+
+          // 如果要创建新页面，先保存当前页面的焦点状态
+          if (hasNewPage) {
+            console.log('[Web Renderer] 检测到新页面创建，保存当前页面焦点')
+            const focusManager = global.__TV_FOCUS_MANAGER__
+            if (focusManager && typeof focusManager.saveCurrentPageFocus === 'function') {
+              focusManager.saveCurrentPageFocus()
+            }
+          }
+
           const processedNodes = nodes.map((node) => {
             let nodeData = node
             let props = null
@@ -307,6 +329,38 @@ export function patchCallNative(engine) {
           return originalCallNative(moduleName, methodName, rootViewId, processedNodes)
         }
       }
+
+      if (methodName === 'deleteNode') {
+        const [rootViewId, nodes] = args
+
+        if (Array.isArray(nodes)) {
+          // 检查是否有 ESPageRootView 被删除
+          nodes.forEach((node) => {
+            let nodeData = node
+            if (Array.isArray(node)) {
+              nodeData = node[0]
+            }
+            if (nodeData && typeof nodeData === 'object') {
+              console.log('[Web Renderer] Deleting node:', nodeData.id, 'name:', nodeData.name)
+
+              // 检查是否是页面被删除
+              if (nodeData.name === 'ESPageRootView') {
+                console.log(
+                  '[Web Renderer] ESPageRootView 被删除，通知焦点管理器恢复上一个页面焦点'
+                )
+                // 通知 TVFocusManager 恢复焦点
+                const focusManager = global.__TV_FOCUS_MANAGER__
+                if (focusManager && typeof focusManager.restorePreviousPageFocus === 'function') {
+                  // 延迟执行，确保 DOM 更新完成
+                  setTimeout(() => {
+                    focusManager.restorePreviousPageFocus()
+                  }, 50)
+                }
+              }
+            }
+          })
+        }
+      }
     }
 
     // Handle ESToastModule - redirect to web toast adapter
@@ -755,7 +809,7 @@ function patchHippyWebSetElementStyle(engine) {
   if (HippyWeb && HippyWeb.setElementStyle && !HippyWeb._setElementStylePatched) {
     const originalSetElementStyle = HippyWeb.setElementStyle.bind(HippyWeb)
     HippyWeb.setElementStyle = (element, styleObj) => {
-      const cleanedStyle = extractFocusStyles(element, styleObj)
+      const cleanedStyle = normalizeStyleBackgroundEntries(extractFocusStyles(element, styleObj))
       originalSetElementStyle(element, cleanedStyle)
     }
     HippyWeb._setElementStylePatched = true
@@ -850,7 +904,7 @@ export function patchUIManager(engine) {
           props.style.backgroundColor = '#000000'
         }
 
-        props.style = extractFocusStyles(view.dom, props.style)
+        props.style = normalizeStyleBackgroundEntries(extractFocusStyles(view.dom, props.style))
       }
 
       const normalizeClass = (value) => {
@@ -902,7 +956,7 @@ export function patchUIManager(engine) {
           if (HippyWeb?.setElementStyle) {
             HippyWeb.setElementStyle(view.dom, props.style)
           } else {
-            Object.assign(view.dom.style, props.style)
+            Object.assign(view.dom.style, normalizeStyleBackgroundEntries(props.style))
           }
         }
         return

package/src/core/styleBackground.js

@@ -0,0 +1,90 @@
+export function normalizeHpfileAssetUrl(value) {
+  if (typeof value !== 'string') return value
+  return value.replace(/^hpfile:\/\/\.?\//, '/').replace(/^hpfile:\/\//, '/')
+}
+
+function getContentType(path) {
+  const ext = String(path).split('.').pop().toLowerCase()
+  const types = {
+    png: 'image/png',
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    gif: 'image/gif',
+    webp: 'image/webp',
+    svg: 'image/svg+xml',
+  }
+  return types[ext] || 'application/octet-stream'
+}
+
+function resolveVirtualFsAssetUrl(value) {
+  if (typeof value !== 'string') return value
+  const normalizedUrl = normalizeHpfileAssetUrl(value)
+  if (!normalizedUrl.startsWith('/assets/')) return normalizedUrl
+
+  const virtualFs = window.__VIRTUAL_FS__
+  if (!virtualFs || typeof virtualFs.get !== 'function') return normalizedUrl
+
+  const cache = (window.__WEB_VFS_BLOB_URL_CACHE__ = window.__WEB_VFS_BLOB_URL_CACHE__ || new Map())
+  if (cache.has(normalizedUrl)) {
+    return cache.get(normalizedUrl)
+  }
+
+  const content = virtualFs.get(normalizedUrl)
+  if (!content) return normalizedUrl
+
+  const blobUrl = URL.createObjectURL(new Blob([content], { type: getContentType(normalizedUrl) }))
+  cache.set(normalizedUrl, blobUrl)
+  return blobUrl
+}
+
+function replaceCssUrls(value) {
+  return value.replace(/url\(\s*(['"]?)([^'")\s]+)\1\s*\)/gi, (match, quote, urlValue) => {
+    const resolvedUrl = resolveVirtualFsAssetUrl(urlValue)
+    if (resolvedUrl === urlValue) return match
+    return `url(${resolvedUrl})`
+  })
+}
+
+export function normalizeBackgroundStyleValue(key, value) {
+  if (typeof value !== 'string') return value
+
+  const lowerKey = String(key).toLowerCase()
+  if (
+    lowerKey !== 'backgroundimage' &&
+    lowerKey !== 'background-image' &&
+    lowerKey !== 'background'
+  ) {
+    return value
+  }
+
+  const trimmed = value.trim()
+  if (!trimmed) return value
+
+  if (/url\(/i.test(trimmed)) {
+    return replaceCssUrls(trimmed)
+  }
+
+  const resolvedUrl = resolveVirtualFsAssetUrl(trimmed)
+  if (resolvedUrl !== trimmed) {
+    return `url(${resolvedUrl})`
+  }
+
+  return value
+}
+
+export function normalizeStyleBackgroundEntries(styleObj) {
+  if (!styleObj || typeof styleObj !== 'object') return styleObj
+
+  let nextStyle = styleObj
+  ;['backgroundImage', 'background', 'background-image'].forEach((key) => {
+    if (!Object.prototype.hasOwnProperty.call(styleObj, key)) return
+    const nextValue = normalizeBackgroundStyleValue(key, styleObj[key])
+    if (nextValue === styleObj[key]) return
+    if (nextStyle === styleObj) {
+      nextStyle = { ...styleObj }
+    }
+    nextStyle[key] = nextValue
+  })
+
+  return nextStyle
+}

package/src/core/templateBinding.js

@@ -1,3 +1,5 @@
+import { normalizeBackgroundStyleValue } from './styleBackground'
+
 export function extractTemplateValueByPath(propPath, data) {
   let value = propPath.split('.').reduce((obj, key) => {
     return obj && obj[key] !== undefined ? obj[key] : undefined
@@ -61,6 +63,10 @@ function _applyFlexStyleToElement(element, styleObj) {
   Object.keys(styleObj).forEach((key) => {
     let value = styleObj[key]
 
+    if (key === 'backgroundImage' || key === 'background') {
+      value = normalizeBackgroundStyleValue(key, value)
+    }
+
     if (typeof value === 'number') {
       const needsPx = [
         'width',
@@ -271,16 +277,16 @@ function _evaluateShowIf(expression, data) {
 
   // Simple property access - truthy check
   const value = extractTemplateValueByPath(expr, data)
-  console.log(
-    '[templateBinding] _evaluateShowIf: expr=',
-    expr,
-    'value=',
-    value,
-    'typeof=',
-    typeof value,
-    'result=',
-    !!value
-  )
+  // console.log(
+  //   '[templateBinding] _evaluateShowIf: expr=',
+  //   expr,
+  //   'value=',
+  //   value,
+  //   'typeof=',
+  //   typeof value,
+  //   'result=',
+  //   !!value
+  // )
   return !!value
 }
 
@@ -452,38 +458,38 @@ export function bindTemplateDataToNode(node, data, options = {}) {
   const allAttrs = Array.from(node.attributes)
     .map((a) => `${a.name}="${a.value}"`)
     .join(', ')
-  console.log('[templateBinding] Node:', node.tagName, 'All attrs:', allAttrs)
+  // console.log('[templateBinding] Node:', node.tagName, 'All attrs:', allAttrs)
   let showIfAttr = node.getAttribute('showIf') || node.getAttribute('showif')
-  console.log('[templateBinding] Checking showIf on node:', node.tagName, 'showIf:', showIfAttr)
+  // console.log('[templateBinding] Checking showIf on node:', node.tagName, 'showIf:', showIfAttr)
   if (showIfAttr) {
     // Store the expression for re-evaluation when data changes
     node.setAttribute('data-showif-expr', showIfAttr)
     // Remove both possible attribute names to ensure cleanup
     node.removeAttribute('showIf')
     node.removeAttribute('showif')
-    console.log('[templateBinding] Stored showIf expr:', showIfAttr)
+    // console.log('[templateBinding] Stored showIf expr:', showIfAttr)
   }
 
   // Check for stored showIf expression (for re-evaluation on data updates)
   const storedShowIfExpr = node.getAttribute('data-showif-expr')
   if (storedShowIfExpr) {
-    console.log(
-      '[templateBinding] Found stored showIf expr:',
-      storedShowIfExpr,
-      'data:',
-      combinedData
-    )
+    // console.log(
+    //   '[templateBinding] Found stored showIf expr:',
+    //   storedShowIfExpr,
+    //   'data:',
+    //   combinedData
+    // )
     const shouldShow = _evaluateShowIf(storedShowIfExpr, combinedData)
     const prevResult = node.getAttribute('data-showif-result')
     const newResult = shouldShow === false ? 'false' : 'true'
-    console.log(
-      '[templateBinding] showIf result:',
-      shouldShow,
-      'prev:',
-      prevResult,
-      'new:',
-      newResult
-    )
+    // console.log(
+    //   '[templateBinding] showIf result:',
+    //   shouldShow,
+    //   'prev:',
+    //   prevResult,
+    //   'new:',
+    //   newResult
+    // )
 
     // Only update if result changed
     if (prevResult !== newResult) {

package/src/index.js

@@ -7,15 +7,6 @@ export * from './core'
 // Components
 export * from './components'
 
-// Import functions needed for initWebRenderer
-import {
-  setupSceneBuilder,
-  applyAllPatches,
-  TVFocusManager,
-  initAutoProxy,
-  initAsyncLocalStorage,
-} from './core'
-
 // Create component registry for web renderer
 import { HippyWebEngine } from '@hippy/web-renderer'
 import { QtView, createNamedComponent } from './components/QtView'
@@ -252,100 +243,4 @@ export function startWebEngine(engine) {
   console.log('[Web Renderer] Engine started')
 }
 
-// Global engine instance for convenience functions
-let _webEngine = null
-
-/**
- * Initialize the web renderer (convenience function)
- * Creates and prepares the engine, applies patches
- * This matches the initialization flow in main-web.js
- */
-export function initWebRenderer() {
-  if (_webEngine) {
-    console.log('[Web Renderer] Engine already initialized')
-    return _webEngine
-  }
-
-  console.log('[Web Renderer] === Starting initialization ===')
-
-  // Step 0: Initialize async localStorage (must be first)
-  initAsyncLocalStorage()
-
-  // Step 0.1: Initialize auto proxy for development
-  initAutoProxy()
-
-  // Step 0.2: Register IJKPlayerComponent for web video
-  global.__WEB_COMPONENT__ = global.__WEB_COMPONENTS__ || {}
-  global.__WEB_COMPONENTS__['IJKPlayerComponent'] = IJKPlayerComponent
-
-  // Step 1: Setup SceneBuilder (must be done before main.ts loads)
-  setupSceneBuilder()
-
-  console.log('[Web Renderer] Component mappings:', Object.keys(quicktvuiComponents))
-
-  // Step 2: Create the web engine
-  _webEngine = createWebEngine()
-
-  // Step 3: Apply all patches BEFORE starting
-  applyAllPatches(_webEngine)
-
-  // Step 4: Initialize TV Focus Manager
-  const focusManager = new TVFocusManager()
-  global.__TV_FOCUS_MANAGER__ = focusManager
-  console.log('[Web Renderer] TVFocusManager initialized')
-
-  // Step 5: Inject global CSS to match Android layout behavior
-  const styleEl = document.createElement('style')
-  styleEl.id = 'web-platform-reset'
-  styleEl.textContent = `
-  /* Web-Android Layout Compatibility Reset */
-  
-  /* Disable flex cross-axis stretching (Android behavior) */
-  /* In Android, children don't auto-fill parent's cross dimension */
-  #app,
-  #app * {
-    align-items: flex-start;
-  }
-  
-  /* Elements with explicit style should override the reset */
-  [style*="align-items"] {
-    align-items: var(--align-items, center) !important;
-  }
-`
-  document.head.appendChild(styleEl)
-  console.log('[Web Renderer] Global CSS reset injected for Android-compatible layout')
-
-  console.log('[Web Renderer] Initialization complete')
-  return _webEngine
-}
-
-/**
- * Start the web renderer (convenience function)
- * Starts the previously initialized engine
- */
-export function startWebRenderer() {
-  if (!_webEngine) {
-    console.log('[Web Renderer] No engine found, initializing...')
-    initWebRenderer()
-  }
-
-  console.log('[Web Renderer] Starting engine...')
-  startWebEngine(_webEngine)
-  return _webEngine
-}
-
-/**
- * Get the current web engine instance
- */
-export function getWebEngine() {
-  return _webEngine
-}
-
-/**
- * Set the web engine instance
- */
-export function setWebEngine(engine) {
-  _webEngine = engine
-}
-
-export { APP_NAME, IJKPlayerComponent }
+export { APP_NAME }