@quicktvui/web-renderer 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-renderer",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Web renderer for QuickTVUI - provides web browser rendering support",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",
@@ -21,4 +21,4 @@
   "peerDependencies": {
     "vue": "^3.0.0"
   }
-}
+}

package/src/components/QtFastListView.js

@@ -306,6 +306,12 @@ export class QtFastListView extends QtBaseComponent {
 
   // Override beforeChildMount - called before a child is mounted
   async beforeChildMount(child, childPosition) {
+    console.log(
+      '[QtFastListView] beforeChildMount called, child:',
+      child?.dom?.getAttribute?.('data-component-name'),
+      'type:',
+      child?.dom?.getAttribute?.('type')
+    )
     if (child && child.dom) {
       // Check if this child's parent is NOT this FastListView
       if (child.pId && child.pId !== this.id) {
@@ -388,23 +394,39 @@ export class QtFastListView extends QtBaseComponent {
 
   // Set list data and render items
   setListData(data) {
+    console.log(
+      '[QtFastListView] setListData called, data length:',
+      data?.length,
+      'this.dom:',
+      this.dom.getAttribute?.('data-component-name')
+    )
     // Handle wrapped params - sometimes data comes as [dataArray]
     if (Array.isArray(data) && data.length === 1 && Array.isArray(data[0])) {
       data = data[0]
     }
 
     if (!Array.isArray(data)) {
+      console.log('[QtFastListView] setListData: data is not array, returning')
       return
     }
     this._listData = data
 
     // Wait for templates to be ready, then render
     const tryRender = (attempts = 0) => {
+      console.log(
+        '[QtFastListView] tryRender, attempts:',
+        attempts,
+        'templateChildren:',
+        this._templateChildren.length,
+        'singletonTemplates:',
+        this._singletonTemplates.length
+      )
       if (
         this._templateChildren.length > 0 ||
         this._singletonTemplates.length > 0 ||
         attempts >= 10
       ) {
+        console.log('[QtFastListView] calling _renderItems')
         this._renderItems()
       } else {
         setTimeout(() => tryRender(attempts + 1), 50)
@@ -475,6 +497,13 @@ export class QtFastListView extends QtBaseComponent {
       }
     })
 
+    console.log(
+      '[QtFastListView] _renderItems complete, itemContainer children:',
+      this._itemContainer.children.length,
+      'dom:',
+      this.dom.getAttribute?.('data-component-name')
+    )
+
     // Initialize showOnState visibility for dynamically created elements
     requestAnimationFrame(() => {
       const focusManager = global.__TV_FOCUS_MANAGER__
@@ -525,6 +554,8 @@ export class QtFastListView extends QtBaseComponent {
     const item = document.createElement('div')
     item.setAttribute('data-index', index)
     item.setAttribute('data-position', index)
+    // 添加 FastListView 实例引用，用于焦点导航
+    item.__fastListViewInstance = this
 
     // Get the item's type
     const itemType = itemData.type !== undefined ? itemData.type : null
@@ -865,9 +896,23 @@ export class QtFastListView extends QtBaseComponent {
   }
 
   notifyItemFocusChanged(currentElement, hasFocus) {
+    console.log(
+      '[QtFastListView] notifyItemFocusChanged called, hasFocus:',
+      hasFocus,
+      'element:',
+      currentElement?.getAttribute?.('data-component-name'),
+      'this.dom:',
+      this.dom?.getAttribute?.('data-component-name')
+    )
     if (!currentElement || !this._itemContainer) return
     const items = this._itemContainer.children
     const itemCount = items.length
+    console.log(
+      '[QtFastListView] itemCount:',
+      itemCount,
+      'itemContainer:',
+      this._itemContainer.className
+    )
     if (itemCount === 0) return
 
     let currentIndex = -1
@@ -879,6 +924,14 @@ export class QtFastListView extends QtBaseComponent {
         break
       }
     }
+    console.log(
+      '[QtFastListView] currentIndex:',
+      currentIndex,
+      'focusedIndex:',
+      this._focusedIndex,
+      'selectedPosition:',
+      this._selectedPosition
+    )
     if (currentIndex === -1) return
 
     const itemData = this._listData[currentIndex]
@@ -909,6 +962,13 @@ export class QtFastListView extends QtBaseComponent {
     if (hasFocus) {
       if (this._focusedIndex === currentIndex) return
       this._focusedIndex = currentIndex
+
+      // 自动设置 selected 状态（模拟原生端行为）
+      // 当获取焦点时，自动将当前 item 设为选中状态
+      if (this._selectedPosition !== currentIndex) {
+        console.log('[QtFastListView] calling setSelectChildPosition for index:', currentIndex)
+        this.setSelectChildPosition(currentIndex, false)
+      }
     } else {
       if (this._focusedIndex !== currentIndex) return
       this._focusedIndex = -1
@@ -1005,10 +1065,28 @@ export class QtFastListView extends QtBaseComponent {
   }
 
   // Request focus on item (called by tv-list requestFocus)
-  requestChildFocus(position) {
-    console.log('[QtFastListView] requestChildFocus called with position:', position)
+  requestChildFocus(position, retryCount = 0) {
+    // 处理 Native.callUIFunction 传递的数组参数
+    if (Array.isArray(position)) {
+      position = position[0]
+    }
+    console.log(
+      '[QtFastListView] requestChildFocus called with position:',
+      position,
+      'retry:',
+      retryCount,
+      'this.dom:',
+      this.dom?.getAttribute?.('data-component-name')
+    )
     const items = this._itemContainer.children
+    console.log('[QtFastListView] requestChildFocus: items.length:', items.length)
     if (position < 0 || position >= items.length) {
+      // 如果 items 还没有渲染完成，重试几次
+      if (retryCount < 10 && items.length === 0) {
+        console.log('[QtFastListView] requestChildFocus: items not ready, retrying...')
+        setTimeout(() => this.requestChildFocus(position, retryCount + 1), 100)
+        return
+      }
       console.warn(
         '[QtFastListView] requestChildFocus: invalid position',
         position,
@@ -1035,6 +1113,211 @@ export class QtFastListView extends QtBaseComponent {
     console.log('[QtFastListView] requestChildFocus: focused item at position', position)
   }
 
+  // Set selected child position (called by Native.callUIFunction)
+  setSelectChildPosition(position, changeFocusTarget = false) {
+    console.log(
+      '[QtFastListView] setSelectChildPosition called with position:',
+      position,
+      'this.dom:',
+      this.dom?.getAttribute?.('data-component-name')
+    )
+
+    // Get TVFocusManager instance from global
+    const focusManager = global.__TV_FOCUS_MANAGER__
+
+    // Helper to get select style from multiple sources (data attribute, CSS variable)
+    const getSelectStyle = (element, attrName, cssVarName) => {
+      return (
+        element.getAttribute(attrName) ||
+        element.getAttribute('data-' + attrName) ||
+        window.getComputedStyle(element).getPropertyValue(cssVarName)?.trim()
+      )
+    }
+
+    // Clear previous selected item
+    if (this._selectedPosition !== undefined && this._selectedPosition >= 0) {
+      console.log(
+        '[QtFastListView] setSelectChildPosition: clearing previous selected position:',
+        this._selectedPosition
+      )
+      const prevItems = this._itemContainer.querySelectorAll('[selected="true"], [selected=""]')
+      console.log(
+        '[QtFastListView] setSelectChildPosition: found',
+        prevItems.length,
+        'items with selected attribute'
+      )
+      prevItems.forEach((item) => {
+        console.log(
+          '[QtFastListView] setSelectChildPosition: removing selected from:',
+          item.getAttribute?.('data-component-name'),
+          'text:',
+          item.getAttribute?.('text')
+        )
+        item.removeAttribute('selected')
+
+        // 检查是否有焦点
+        const hasFocus =
+          item.classList.contains('focused') ||
+          (focusManager && focusManager.focusedElement === item)
+
+        // 如果没有焦点，恢复原始背景色
+        if (!hasFocus && focusManager) {
+          const originalStyles = focusManager.focusedElementOriginalStyles?.get(item)
+          // 获取 select 背景色，用于判断保存的背景色是否是 select 颜色
+          const selectBg = getSelectStyle(
+            item,
+            'select-background-color',
+            '--select-background-color'
+          )
+          if (originalStyles && originalStyles.backgroundColor !== undefined) {
+            // 如果保存的背景色是 select 颜色，则恢复为空字符串
+            const savedBg = originalStyles.backgroundColor
+            const isSelectColor =
+              savedBg === selectBg ||
+              savedBg === selectBg?.replace(/\s/g, '') ||
+              savedBg === selectBg?.replace('rgba', 'rgb').replace(/,([^,]+)\)$/, '$1)')
+            const bgToRestore = isSelectColor ? '' : savedBg
+            console.log(
+              '[QtFastListView] setSelectChildPosition: restoring background color to:',
+              bgToRestore,
+              'savedBg:',
+              savedBg,
+              'selectBg:',
+              selectBg,
+              'isSelectColor:',
+              isSelectColor
+            )
+            item.style.backgroundColor = bgToRestore
+          } else {
+            // 如果没有保存原始样式，清除背景色
+            console.log('[QtFastListView] setSelectChildPosition: clearing background color')
+            item.style.backgroundColor = ''
+          }
+          // 触发 TVFocusManager 移除 selected 样式
+          focusManager._removeDuplicateParentStateStyles(item)
+        }
+      })
+    }
+
+    // Store new selected position
+    this._selectedPosition = position
+
+    // Set new selected item
+    if (position >= 0) {
+      const items = this._itemContainer.children
+      console.log(
+        '[QtFastListView] setSelectChildPosition: items.length:',
+        items.length,
+        'position:',
+        position
+      )
+      console.log('[QtFastListView] setSelectChildPosition: items[position]:', items[position])
+      console.log('[QtFastListView] setSelectChildPosition: items[0]:', items[0])
+      if (position < items.length) {
+        const item = items[position]
+        console.log(
+          '[QtFastListView] setSelectChildPosition: item:',
+          item,
+          'tagName:',
+          item?.tagName,
+          'children:',
+          item?.children?.length
+        )
+        if (item) {
+          // Set selected attribute on the wrapper div
+          item.setAttribute('selected', 'true')
+
+          // Set selected on all direct children (QtView, etc.)
+          const directChildren = item.children
+          for (let i = 0; i < directChildren.length; i++) {
+            console.log(
+              '[QtFastListView] setSelectChildPosition: setting selected on child:',
+              i,
+              directChildren[i].getAttribute?.('data-component-name')
+            )
+            directChildren[i].setAttribute('selected', 'true')
+          }
+
+          // Also set selected on all descendants with duplicateParentState
+          const duplicateChildren = item.querySelectorAll('[duplicateparentstate]')
+          duplicateChildren.forEach((child) => {
+            child.setAttribute('selected', 'true')
+          })
+
+          console.log('[QtFastListView] setSelectChildPosition: set selected on position', position)
+
+          // 应用 selected 样式（只对无焦点元素）
+          if (focusManager) {
+            // 检查当前元素是否有焦点
+            const hasFocus =
+              focusManager.focusedElement &&
+              (item.contains(focusManager.focusedElement) || focusManager.focusedElement === item)
+
+            // 对 QtView 本身应用 select-background-color（只在没有焦点时）
+            for (let i = 0; i < directChildren.length; i++) {
+              const child = directChildren[i]
+              const childHasFocus =
+                child.classList.contains('focused') || focusManager.focusedElement === child
+
+              // 只有在没有焦点时才设置 select 样式
+              if (!childHasFocus) {
+                const selectBg = getSelectStyle(
+                  child,
+                  'select-background-color',
+                  '--select-background-color'
+                )
+                if (selectBg) {
+                  // 保存原始背景色（在应用 select 样式之前）
+                  if (!focusManager.focusedElementOriginalStyles) {
+                    focusManager.focusedElementOriginalStyles = new Map()
+                  }
+                  if (!focusManager.focusedElementOriginalStyles.has(child)) {
+                    const currentBg = child.style.backgroundColor
+                    // 如果当前背景色已经是 select 颜色，说明之前已经被错误地设置了
+                    // 此时应该保存空字符串作为原始背景色
+                    const isSelectColor =
+                      currentBg === selectBg ||
+                      currentBg === selectBg.replace(/\s/g, '') ||
+                      currentBg === selectBg.replace('rgba', 'rgb').replace(/,([^,]+)\)$/, '$1)')
+                    const bgToSave = isSelectColor ? '' : currentBg
+                    console.log(
+                      '[QtFastListView] setSelectChildPosition: saving original background color:',
+                      bgToSave,
+                      'currentBg:',
+                      currentBg,
+                      'selectBg:',
+                      selectBg,
+                      'isSelectColor:',
+                      isSelectColor
+                    )
+                    focusManager.focusedElementOriginalStyles.set(child, {
+                      backgroundColor: bgToSave,
+                    })
+                  }
+                  console.log(
+                    '[QtFastListView] setSelectChildPosition: setting select background color:',
+                    selectBg,
+                    'for child:',
+                    child.getAttribute?.('data-component-name')
+                  )
+                  child.style.backgroundColor = selectBg
+                }
+                // 对 QtView 的子元素（如 QtText）应用 duplicateParentState 样式
+                // 现在可以安全调用，因为 _applyDuplicateParentStateStyles 只在 hasFocus=true 时保存原始样式
+                focusManager._applyDuplicateParentStateStyles(child, false)
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Optionally request focus on the selected item
+    if (changeFocusTarget) {
+      this.requestChildFocus(position)
+    }
+  }
+
   // Set span count for grid layout
   setSpanCount(count) {
     if (count > 0) {

package/src/components/QtText.js

@@ -104,30 +104,14 @@ export class QtText extends QtBaseComponent {
     }
 
     // Handle duplicateParentState and focus style attributes
-    const tvFocusAttrs = ['duplicateParentState', 'focusable', 'showOnState']
-
-    const focusStyleAttrs = [
-      'focusColor',
-      'focusBackgroundColor',
-      'focusTextColor',
-      'focusBorderColor',
-      'focusBorderWidth',
-      'focusBorderRadius',
-      'focusOpacity',
-      'focusScale',
-    ]
+    const tvFocusAttrs = ['duplicateParentState', 'focusable', 'showOnState', 'select']
+
+    // QtText 支持的颜色属性：textColor, focusColor, selectColor
+    // 注意：QtText 没有 selectBackgroundColor，只有 selectColor
+    const textStyleAttrs = ['textColor', 'focusColor', 'selectColor']
 
     // Also handle kebab-case versions
-    const kebabFocusStyleAttrs = [
-      'focus-color',
-      'focus-background-color',
-      'focus-text-color',
-      'focus-border-color',
-      'focus-border-width',
-      'focus-border-radius',
-      'focus-opacity',
-      'focus-scale',
-    ]
+    const kebabTextStyleAttrs = ['text-color', 'focus-color', 'select-color']
 
     if (tvFocusAttrs.includes(key)) {
       if (value !== null && value !== undefined) {
@@ -145,7 +129,14 @@ export class QtText extends QtBaseComponent {
       return
     }
 
-    if (focusStyleAttrs.includes(key)) {
+    // Handle textColor directly - apply to DOM
+    if (key === 'textColor' || key === 'text-color') {
+      this.setTextColor(value)
+      return
+    }
+
+    // Handle focusColor and selectColor - store as data attributes for TVFocusManager
+    if (textStyleAttrs.includes(key)) {
       if (value !== null && value !== undefined) {
         const dataKey = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase()
         this.dom.setAttribute(dataKey, String(value))
@@ -156,7 +147,7 @@ export class QtText extends QtBaseComponent {
       return
     }
 
-    if (kebabFocusStyleAttrs.includes(key)) {
+    if (kebabTextStyleAttrs.includes(key)) {
       if (value !== null && value !== undefined) {
         this.dom.setAttribute('data-' + key, String(value))
       } else {

package/src/components/QtView.js

@@ -139,19 +139,16 @@ export class QtView extends QtBaseComponent {
       'duplicateParentState',
       'blockFocusDirections',
       'blockfocusdirections',
+      'selected',
     ]
 
     // Focus style attributes (for duplicateParentState)
-    // These can be set via :focusColor="..." or focus-color in CSS
+    // QtView 支持：focus-background-color, focus-border-color, focus-border-width, focus-border-radius, focusScale
     const focusStyleAttrs = [
-      'focusColor',
       'focusBackgroundColor',
-      'focusBackground',
-      'focusTextColor',
       'focusBorderColor',
       'focusBorderWidth',
       'focusBorderRadius',
-      'focusOpacity',
       'focusScale',
     ]
 
@@ -172,14 +169,10 @@ export class QtView extends QtBaseComponent {
 
     // Also handle kebab-case versions (from CSS or direct assignment)
     const kebabFocusStyleAttrs = [
-      'focus-color',
       'focus-background-color',
-      'focus-background',
-      'focus-text-color',
       'focus-border-color',
       'focus-border-width',
       'focus-border-radius',
-      'focus-opacity',
       'focus-scale',
     ]
 

package/src/core/TVFocusManager.js

@@ -1503,6 +1503,16 @@ export class TVFocusManager {
       props.focusColor = focusColor
     }
 
+    // Select text color - for QtText when select="true"
+    const selectColor =
+      element.getAttribute('selectColor') ||
+      element.getAttribute('select-color') ||
+      element.getAttribute('data-select-color') ||
+      computedStyle.getPropertyValue('--select-color')?.trim()
+    if (selectColor) {
+      props.selectColor = selectColor
+    }
+
     return props
   }
 
@@ -1723,17 +1733,90 @@ export class TVFocusManager {
 
   _maybeNotifyFastListItemFocusChanged(element, hasFocus) {
     if (!element) return
+    console.log(
+      '[TVFocusManager] _maybeNotifyFastListItemFocusChanged, element:',
+      element.getAttribute?.('data-component-name'),
+      'hasFocus:',
+      hasFocus,
+      'data-position:',
+      element.getAttribute?.('data-position'),
+      'data-index:',
+      element.getAttribute?.('data-index')
+    )
+    console.log(
+      '[TVFocusManager] element.__fastListViewInstance:',
+      !!element.__fastListViewInstance,
+      'parent:',
+      element.parentElement?.getAttribute?.('data-component-name')
+    )
+
+    // 首先检查元素自身是否有 __fastListViewInstance（新创建的 item wrapper 会有）
+    if (element.__fastListViewInstance) {
+      const instance = element.__fastListViewInstance
+      console.log(
+        '[TVFocusManager] Found __fastListViewInstance on element itself, itemContainer children:',
+        instance._itemContainer?.children?.length
+      )
+      if (instance && typeof instance.notifyItemFocusChanged === 'function') {
+        instance.notifyItemFocusChanged(element, hasFocus)
+        return
+      }
+    }
+
+    // 检查父元素是否有 __fastListViewInstance（item wrapper 的子元素）
     let parent = element.parentElement
+    if (parent && parent.__fastListViewInstance) {
+      const instance = parent.__fastListViewInstance
+      console.log(
+        '[TVFocusManager] Found __fastListViewInstance on direct parent, itemContainer children:',
+        instance._itemContainer?.children?.length
+      )
+      if (instance && typeof instance.notifyItemFocusChanged === 'function') {
+        instance.notifyItemFocusChanged(parent, hasFocus)
+        return
+      }
+    }
+
     let fastListViewInstance = null
+    // 向上查找最近的 __fastListViewInstance，但要确保元素确实在该 FastListView 的 _itemContainer 内部
     while (parent) {
       if (parent.__fastListViewInstance) {
         fastListViewInstance = parent.__fastListViewInstance
-        break
+        console.log(
+          '[TVFocusManager] Found __fastListViewInstance on parent:',
+          parent.getAttribute?.('data-component-name'),
+          'itemContainer children:',
+          fastListViewInstance._itemContainer?.children?.length
+        )
+        // 检查 element 是否在这个 FastListView 的 _itemContainer 内部
+        const itemContainer = fastListViewInstance._itemContainer
+        if (itemContainer && (itemContainer === element || itemContainer.contains(element))) {
+          console.log('[TVFocusManager] element is in itemContainer, using this FastListView')
+          break // 找到正确的实例
+        }
+        // 额外检查：如果 element 有 data-position 或 data-index，检查它是否在 itemContainer 的直接子元素中
+        const pos = element.getAttribute?.('data-position') ?? element.getAttribute?.('data-index')
+        if (pos !== null && pos !== undefined) {
+          const posNum = Number(pos)
+          const item = itemContainer?.children?.[posNum]
+          if (item && (item === element || item.contains(element))) {
+            console.log(
+              '[TVFocusManager] element matched by data-position, using this FastListView'
+            )
+            break
+          }
+        }
+        console.log('[TVFocusManager] element NOT in itemContainer, continuing search...')
+        // 如果不在，继续向上查找
+        fastListViewInstance = null
       }
       parent = parent.parentElement
     }
     if (fastListViewInstance && typeof fastListViewInstance.notifyItemFocusChanged === 'function') {
+      console.log('[TVFocusManager] Calling notifyItemFocusChanged')
       fastListViewInstance.notifyItemFocusChanged(element, hasFocus)
+    } else {
+      console.log('[TVFocusManager] No FastListView found for element')
     }
   }
 
@@ -1842,12 +1925,14 @@ export class TVFocusManager {
     }
 
     // Apply focusColor if specified (for elements that have text)
+    // 焦点优先：获得焦点时总是使用 focus 样式，不管是否有 selected 状态
     if (props.focusColor) {
       element.style.color = props.focusColor
     }
 
     // Handle duplicateParentState children - apply focus styles to children with duplicateParentState="true"
-    this._applyDuplicateParentStateStyles(element)
+    // 传递 hasFocus=true 表示当前元素有焦点
+    this._applyDuplicateParentStateStyles(element, true)
 
     // Handle showOnState - update visibility based on focused state
     this._updateShowOnStateVisibility(element, 'focused')
@@ -1857,10 +1942,21 @@ export class TVFocusManager {
 
   // Apply focus styles to children with duplicateParentState attribute
   // Supports: duplicateParentState, duplicateParentState="true", duplicateParentState=""
-  _applyDuplicateParentStateStyles(parentElement) {
+  // hasFocus: 是否有焦点（焦点优先于选中状态）
+  _applyDuplicateParentStateStyles(parentElement, hasFocus = false) {
     // Match elements with duplicateParentState attribute present (regardless of value)
     // This handles both <div duplicateParentState> and <div duplicateParentState="true">
     const duplicateChildren = parentElement.querySelectorAll('[duplicateparentstate]')
+    console.log(
+      '[TVFocusManager] _applyDuplicateParentStateStyles: parentElement:',
+      parentElement.getAttribute?.('data-component-name'),
+      'text:',
+      parentElement.getAttribute?.('text'),
+      'hasFocus:',
+      hasFocus,
+      'children count:',
+      duplicateChildren.length
+    )
 
     duplicateChildren.forEach((child) => {
       // Skip if explicitly set to false
@@ -1869,6 +1965,13 @@ export class TVFocusManager {
         return
       }
 
+      console.log(
+        '[TVFocusManager] _applyDuplicateParentStateStyles: processing child:',
+        child.getAttribute?.('data-component-name'),
+        'text:',
+        child.getAttribute?.('text')
+      )
+
       // Get focus styles from multiple sources:
       // 1. Child's own focus attributes
       // 2. Data attributes (from style extraction)
@@ -1896,35 +1999,105 @@ export class TVFocusManager {
       const focusBorderWidth = getFocusAttr('focusBorderWidth', 'focus-border-width')
       const focusBorderColor = getFocusAttr('focusBorderColor', 'focus-border-color')
 
+      // Get select style attributes (for selected state)
+      const selectColor = getFocusAttr('selectColor', 'select-color')
+      const selectBackgroundColor = getFocusAttr('selectBackgroundColor', 'select-background-color')
+
+      // Check if parentElement itself is in selected state
+      // duplicateParentState 的意思是复制父元素的状态，所以只检查直接父元素
+      // 不要向上查找祖先，否则会错误地找到其他列表项的 selected 状态
+      const isParentSelect =
+        (parentElement.hasAttribute('select') &&
+          parentElement.getAttribute('select') !== 'false') ||
+        (parentElement.hasAttribute('selected') &&
+          parentElement.getAttribute('selected') !== 'false')
+
+      if (isParentSelect) {
+        console.log(
+          '[TVFocusManager] _applyDuplicateParentStateStyles: parentElement is selected:',
+          parentElement.getAttribute?.('data-component-name'),
+          'text:',
+          parentElement.getAttribute?.('text')
+        )
+      }
+
+      // Determine which colors to use: focus takes priority over select
+      // 焦点优先：有焦点时用 focus 样式，无焦点但有选中时用 select 样式
+      const effectiveColor = hasFocus
+        ? focusColor
+        : isParentSelect && selectColor
+          ? selectColor
+          : null
+      const effectiveBackgroundColor = hasFocus
+        ? focusBackgroundColor
+        : isParentSelect && selectBackgroundColor
+          ? selectBackgroundColor
+          : null
+
       // Check if enableFocusBorder is set
       const enableFocusBorder =
         child.getAttribute('enableFocusBorder') || child.getAttribute('enable-focus-border')
       const shouldShowBorder =
         enableFocusBorder === 'true' || enableFocusBorder === '1' || enableFocusBorder === ''
 
-      // Store original styles
-      const originalStyles = {
-        backgroundColor: child.style.backgroundColor,
-        color: child.style.color,
-        borderRadius: child.style.borderRadius,
-        transform: child.style.transform,
-        zIndex: child.style.zIndex,
-        transition: child.style.transition,
-        outline: child.style.outline,
-        outlineOffset: child.style.outlineOffset,
+      // Store original styles - 只在有焦点时保存，避免覆盖 setSelectChildPosition 中保存的原始样式
+      // 当 hasFocus=false 时，我们只是在应用 select 样式，不需要保存原始样式
+      if (hasFocus && !this.focusedElementOriginalStyles.has(child)) {
+        // 如果内联样式为空，从 computedStyle 获取计算后的样式值
+        const computedStyle = window.getComputedStyle(child)
+        const originalStyles = {
+          backgroundColor: child.style.backgroundColor || computedStyle.backgroundColor,
+          color: child.style.color || computedStyle.color,
+          borderRadius: child.style.borderRadius,
+          transform: child.style.transform,
+          zIndex: child.style.zIndex,
+          transition: child.style.transition,
+          outline: child.style.outline,
+          outlineOffset: child.style.outlineOffset,
+        }
+        this.focusedElementOriginalStyles.set(child, originalStyles)
+        console.log(
+          '[TVFocusManager] _applyDuplicateParentStateStyles: saving original styles for focus state - color:',
+          originalStyles.color,
+          'bg:',
+          originalStyles.backgroundColor
+        )
+      }
+
+      // 当 hasFocus=false 且要应用 select 样式时，也需要保存原始样式
+      // 这样在清除 select 状态时才能正确恢复
+      if (!hasFocus && isParentSelect && !this.focusedElementOriginalStyles.has(child)) {
+        // 如果内联样式为空，从 computedStyle 获取计算后的样式值
+        const computedStyle = window.getComputedStyle(child)
+        const originalStyles = {
+          backgroundColor: child.style.backgroundColor || computedStyle.backgroundColor,
+          color: child.style.color || computedStyle.color,
+        }
+        this.focusedElementOriginalStyles.set(child, originalStyles)
+        console.log(
+          '[TVFocusManager] _applyDuplicateParentStateStyles: saving original styles for select state - color:',
+          originalStyles.color,
+          'bg:',
+          originalStyles.backgroundColor
+        )
       }
-      this.focusedElementOriginalStyles.set(child, originalStyles)
 
       // Apply transition
       child.style.transition = this.defaultFocusStyle.transition
 
-      // Apply focus styles
-      if (focusBackgroundColor) {
-        child.style.backgroundColor = focusBackgroundColor
+      // Apply focus/select styles
+      if (effectiveBackgroundColor) {
+        child.style.backgroundColor = effectiveBackgroundColor
       }
 
-      if (focusColor) {
-        child.style.color = focusColor
+      if (effectiveColor) {
+        child.style.color = effectiveColor
+      } else if (hasFocus) {
+        // 当有焦点但没有 focusColor 时，恢复原始颜色
+        const savedOriginalStyles = this.focusedElementOriginalStyles.get(child)
+        if (savedOriginalStyles && savedOriginalStyles.color !== undefined) {
+          child.style.color = savedOriginalStyles.color
+        }
       }
 
       if (focusBorderRadius) {
@@ -1942,8 +2115,9 @@ export class TVFocusManager {
         }
       }
 
-      // Apply border if enableFocusBorder is set
-      if (shouldShowBorder) {
+      // Apply border if enableFocusBorder is set AND has focus
+      // 只有在获得焦点时才显示 focus border，selected 状态不显示边框
+      if (shouldShowBorder && hasFocus) {
         const borderWidth = focusBorderWidth ? parseFloat(focusBorderWidth) : 3
         const borderColor = focusBorderColor || '#FFFFFF'
         const borderRadius = focusBorderRadius ? parseFloat(focusBorderRadius) : 8
@@ -2006,6 +2180,21 @@ export class TVFocusManager {
     // Remove focus styles from duplicateParentState children
     this._removeDuplicateParentStateStyles(element)
 
+    // Check if element is in selected state, apply select styles
+    const isSelected =
+      element.hasAttribute('selected') && element.getAttribute('selected') !== 'false'
+    if (isSelected) {
+      const computedStyle = window.getComputedStyle(element)
+      const selectBackgroundColor =
+        element.getAttribute('selectBackgroundColor') ||
+        element.getAttribute('select-background-color') ||
+        element.getAttribute('data-select-background-color') ||
+        computedStyle.getPropertyValue('--select-background-color')?.trim()
+      if (selectBackgroundColor) {
+        element.style.backgroundColor = selectBackgroundColor
+      }
+    }
+
     // Handle showOnState - update visibility based on normal state
     this._updateShowOnStateVisibility(element, 'normal')
 
@@ -2023,6 +2212,14 @@ export class TVFocusManager {
         return
       }
       const originalStyles = this.focusedElementOriginalStyles.get(child)
+      console.log(
+        '[TVFocusManager] _removeDuplicateParentStateStyles: child:',
+        child.getAttribute?.('data-component-name'),
+        'text:',
+        child.getAttribute?.('text'),
+        'originalStyles:',
+        originalStyles
+      )
       if (originalStyles) {
         child.style.backgroundColor = originalStyles.backgroundColor
         child.style.color = originalStyles.color
@@ -2032,15 +2229,8 @@ export class TVFocusManager {
         child.style.transition = originalStyles.transition
         child.style.outline = originalStyles.outline
         child.style.outlineOffset = originalStyles.outlineOffset
-      } else {
-        child.style.backgroundColor = ''
-        child.style.color = ''
-        child.style.borderRadius = ''
-        child.style.transform = ''
-        child.style.zIndex = ''
-        child.style.outline = ''
-        child.style.outlineOffset = ''
       }
+      // 如果没有 originalStyles，不要清除样式，保持当前状态
       child.classList.remove('focused-child')
 
       // Handle showOnState for duplicateParentState children
@@ -2054,7 +2244,38 @@ export class TVFocusManager {
         }
       }
 
-      this.focusedElementOriginalStyles.delete(child)
+      // 不要在这里删除 originalStyles，因为可能还需要用于后续恢复
+      // this.focusedElementOriginalStyles.delete(child)
+
+      // Check if parentElement itself is in selected state
+      // 只检查直接父元素，不向上查找祖先
+      const isParentSelect =
+        (parentElement.hasAttribute('select') &&
+          parentElement.getAttribute('select') !== 'false') ||
+        (parentElement.hasAttribute('selected') &&
+          parentElement.getAttribute('selected') !== 'false')
+
+      // If parent is selected, apply select styles
+      if (isParentSelect) {
+        const computedStyle = window.getComputedStyle(child)
+        const selectColor =
+          child.getAttribute('selectColor') ||
+          child.getAttribute('select-color') ||
+          child.getAttribute('data-select-color') ||
+          computedStyle.getPropertyValue('--select-color')?.trim()
+        const selectBackgroundColor =
+          child.getAttribute('selectBackgroundColor') ||
+          child.getAttribute('select-background-color') ||
+          child.getAttribute('data-select-background-color') ||
+          computedStyle.getPropertyValue('--select-background-color')?.trim()
+
+        if (selectBackgroundColor) {
+          child.style.backgroundColor = selectBackgroundColor
+        }
+        if (selectColor) {
+          child.style.color = selectColor
+        }
+      }
     })
   }
 
@@ -2106,10 +2327,22 @@ export class TVFocusManager {
     let target = e.target
     const componentRegistry = window.__HIPPY_COMPONENT_REGISTRY__
 
+    console.log(
+      '[TVFocusManager] handleClick called, target:',
+      target?.getAttribute?.('data-component-name'),
+      'text:',
+      target?.getAttribute?.('text')
+    )
+
     while (target && target !== document.body) {
       // Check if this element is focusable
       if (target.hasAttribute && target.hasAttribute('focusable')) {
-        // console.log('[TVFocus] Mouse click on focusable element:', target)
+        console.log(
+          '[TVFocusManager] handleClick: found focusable element:',
+          target?.getAttribute?.('data-component-name'),
+          'text:',
+          target?.getAttribute?.('text')
+        )
 
         // Update focus to this element
         if (this.focusableElements.includes(target)) {

package/src/core/patches.js

@@ -648,6 +648,8 @@ const FOCUS_STYLE_PROPS = [
   'focusBorderRadius',
   'focusOpacity',
   'focusScale',
+  'selectColor',
+  'selectBackgroundColor',
 ]
 
 // Properties that are numeric values, not colors (should not be converted via argbToCssColor)
@@ -828,6 +830,8 @@ function patchFocusCssVars() {
     'focus-border-radius',
     'focus-opacity',
     'focus-scale',
+    'select-color',
+    'select-background-color',
   ]
 
   const patchRuleStyle = (style) => {