@quicktvui/web-cli 1.0.0-beta.9 → 1.0.1

package/bin/qt-web-cli-watch.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+
+/**
+ * QuickTVUI Web CLI Watcher
+ * 文件监听器 - 监听文件变化并重启开发服务器
+ */
+
+const path = require('path')
+const fs = require('fs')
+const { spawn } = require('child_process')
+const signale = require('signale')
+
+// 查找项目根目录
+function findProjectRoot(startDir = process.cwd()) {
+  let currentDir = startDir
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+  }
+  return null
+}
+
+const projectRoot = findProjectRoot()
+if (!projectRoot) {
+  signale.error('无法找到项目根目录')
+  process.exit(1)
+}
+
+let childProcess = null
+let isRestarting = false
+let isFirstStart = true
+
+function startDevServer() {
+  const cliPath = path.join(__dirname, 'qt-web-cli.js')
+  const args = [
+    cliPath,
+    ...process.argv.slice(2).filter((arg) => arg !== '--watch' && arg !== '-w'),
+  ]
+
+  signale.info(`启动开发服务器: node ${args.join(' ')}`)
+
+  // 只在第一次启动时打开浏览器
+  const env = { ...process.env }
+  if (!isFirstStart) {
+    env.QUICKTVUI_NO_OPEN = 'true'
+  }
+  isFirstStart = false
+
+  childProcess = spawn('node', args, {
+    cwd: projectRoot,
+    stdio: 'inherit',
+    env,
+  })
+
+  childProcess.on('error', (err) => {
+    signale.error(`启动失败: ${err.message}`)
+    process.exit(1)
+  })
+
+  childProcess.on('exit', (code, signal) => {
+    if (!isRestarting && code !== 0) {
+      signale.error(`开发服务器异常退出 (code: ${code}, signal: ${signal})`)
+      process.exit(code || 1)
+    }
+  })
+}
+
+function stopDevServer() {
+  return new Promise((resolve) => {
+    if (childProcess) {
+      signale.info('正在停止开发服务器...')
+
+      let resolved = false
+
+      childProcess.on('exit', () => {
+        if (!resolved) {
+          resolved = true
+          signale.success('开发服务器已停止')
+          resolve()
+        }
+      })
+
+      // 先发送 SIGTERM 信号优雅退出
+      childProcess.kill('SIGTERM')
+
+      // 如果 10 秒后还没退出，强制杀死
+      setTimeout(() => {
+        if (childProcess && !resolved) {
+          signale.warn('服务器未能在 10 秒内退出，强制终止...')
+          childProcess.kill('SIGKILL')
+        }
+      }, 10000)
+    } else {
+      resolve()
+    }
+  })
+}
+
+async function restartDevServer() {
+  if (isRestarting) return
+  isRestarting = true
+
+  signale.pending('检测到文件变化，正在重启开发服务器...')
+
+  // 清理 dist 目录
+  const distPath = path.join(projectRoot, 'dist/web')
+  if (fs.existsSync(distPath)) {
+    try {
+      const rimraf = require('rimraf')
+      rimraf.sync(distPath)
+      signale.info('已清理 dist/web 目录')
+    } catch (e) {
+      signale.warn('清理 dist 目录失败:', e.message)
+    }
+  }
+
+  await stopDevServer()
+
+  // 等待 3 秒确保端口完全释放
+  signale.info('等待端口释放...')
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+
+  // 重新启动
+  startDevServer()
+
+  // 等待 5 秒后再允许下一次重启
+  setTimeout(() => {
+    isRestarting = false
+  }, 5000)
+}
+
+function setupWatcher() {
+  const chokidar = require('chokidar')
+
+  // 监听的目录
+  const watchPaths = [
+    path.join(projectRoot, 'src'),
+    path.join(projectRoot, 'packages/quicktvui'),
+    path.join(projectRoot, 'packages/component'),
+  ]
+
+  signale.info(`监听目录: ${watchPaths.map((p) => path.relative(projectRoot, p)).join(', ')}`)
+
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: [/node_modules/, /\.git/, /dist/, /\.DS_Store/, /\.log$/, /\?.*$/, /\.map$/],
+    persistent: true,
+    ignoreInitial: true,
+    usePolling: true,
+    interval: 100,
+  })
+
+  watcher
+    .on('ready', () => {
+      signale.success('文件监听器已就绪')
+    })
+    .on('change', (filePath) => {
+      const relativePath = path.relative(projectRoot, filePath)
+      signale.info(`文件已修改: ${relativePath}`)
+      restartDevServer()
+    })
+    .on('add', (filePath) => {
+      const relativePath = path.relative(projectRoot, filePath)
+      signale.info(`文件已添加: ${relativePath}`)
+      restartDevServer()
+    })
+    .on('unlink', (filePath) => {
+      const relativePath = path.relative(projectRoot, filePath)
+      signale.info(`文件已删除: ${relativePath}`)
+      restartDevServer()
+    })
+    .on('error', (error) => {
+      signale.error(`文件监听错误: ${error}`)
+    })
+
+  signale.success('文件监听已启动 (--watch 模式)')
+
+  // 处理退出信号
+  process.on('SIGINT', async () => {
+    signale.info('正在关闭...')
+    await stopDevServer()
+    watcher.close()
+    process.exit(0)
+  })
+
+  process.on('SIGTERM', async () => {
+    await stopDevServer()
+    watcher.close()
+    process.exit(0)
+  })
+}
+
+// 主流程
+signale.pending('正在启动 QuickTVUI Web 开发服务器 (watch 模式)...')
+signale.info(`项目根目录: ${projectRoot}`)
+
+// 启动开发服务器
+startDevServer()
+
+// 设置文件监听
+setupWatcher()

package/bin/qt-web-cli.js

@@ -0,0 +1,324 @@
+#!/usr/bin/env node
+
+/**
+ * QuickTVUI Web Dev CLI
+ * 启动 web 开发服务器，无需手动配置入口文件
+ */
+
+const path = require('path')
+const fs = require('fs')
+const signale = require('signale')
+const minimist = require('minimist')
+const { exec } = require('shelljs')
+
+// 解析命令行参数
+const args = minimist(process.argv.slice(2), {
+  string: ['port', 'config'],
+  boolean: ['help', 'open', 'v', 'info', 'version', 'watch'],
+  alias: {
+    p: 'port',
+    c: 'config',
+    h: 'help',
+    o: 'open',
+    w: 'watch',
+  },
+  default: {
+    port: 39001,
+    open: process.env.QUICKTVUI_NO_OPEN !== 'true',
+    watch: false,
+  },
+})
+
+// 显示版本信息
+if (args.v || args.version) {
+  const cliPkg = require(path.join(__dirname, '../package.json'))
+  console.log(`@quicktvui/web-cli v${cliPkg.version}`)
+  process.exit(0)
+}
+
+// 显示详细信息（包括 web-renderer 版本）
+if (args.info) {
+  const cliPkg = require(path.join(__dirname, '../package.json'))
+  console.log(`@quicktvui/web-cli v${cliPkg.version}`)
+  try {
+    // 尝试多种路径查找 web-renderer
+    let rendererPkg
+    const possiblePaths = [
+      '@quicktvui/web-renderer/package.json',
+      path.join(__dirname, '../../web-renderer/package.json'),
+      path.join(__dirname, '../../../web-renderer/package.json'),
+    ]
+    for (const pkgPath of possiblePaths) {
+      try {
+        rendererPkg = require(pkgPath)
+        break
+      } catch (e) {
+        // 继续尝试下一个路径
+      }
+    }
+    if (rendererPkg) {
+      console.log(`@quicktvui/web-renderer v${rendererPkg.version}`)
+    } else {
+      console.log('@quicktvui/web-renderer (not installed)')
+    }
+  } catch (e) {
+    console.log('@quicktvui/web-renderer (not installed)')
+  }
+  process.exit(0)
+}
+
+// 显示帮助信息
+if (args.help) {
+  console.log(`
+QuickTVUI Web CLI
+
+Usage:
+  qt-web-cli [options]
+
+Options:
+  -p, --port <port>     开发服务器端口 (默认: 39001)
+  -c, --config <path>   自定义 webpack 配置文件路径
+  -o, --open            自动打开浏览器
+  -w, --watch           监听文件变化自动重启服务器
+  -h, --help            显示帮助信息
+  -v, --version         显示 CLI 版本
+  --info                显示 CLI 和 web-renderer 版本
+
+Examples:
+  qt-web-cli
+  qt-web-cli --port 8080
+  qt-web-cli --config ./my.webpack.js
+  qt-web-cli --watch
+  qt-web-cli -v
+  qt-web-cli --info
+
+特点:
+  - 自动检测项目入口 (main-native.ts/js, main.ts/js)
+  - 零配置启动 web 开发服务器
+  - 支持文件变化自动重启 (--watch)
+  `)
+  process.exit(0)
+}
+
+async function main() {
+  // 如果启用了 watch 模式，使用 watcher 脚本
+  if (args.watch) {
+    const { spawn } = require('child_process')
+    const watcherPath = path.join(__dirname, 'qt-web-cli-watch.js')
+    const watcherArgs = process.argv.slice(2).filter((arg) => arg !== '--watch' && arg !== '-w')
+
+    const watcher = spawn('node', [watcherPath, ...watcherArgs], {
+      cwd: process.cwd(),
+      stdio: 'inherit',
+      env: process.env,
+    })
+
+    watcher.on('exit', (code) => {
+      process.exit(code || 0)
+    })
+
+    return
+  }
+
+  signale.pending('正在启动 QuickTVUI Web 开发服务器...')
+
+  // 查找项目根目录
+  const projectRoot = findProjectRoot()
+  if (!projectRoot) {
+    signale.error('无法找到项目根目录')
+    process.exit(1)
+  }
+
+  signale.info(`项目根目录: ${projectRoot}`)
+
+  // 读取 package.json
+  let pkg = {}
+  try {
+    pkg = require(path.join(projectRoot, 'package.json'))
+  } catch (e) {}
+
+  // 检测入口文件
+  let mainEntry
+  let entryType
+
+  // 入口候选列表
+  const entryCandidates = [
+    { name: 'src/main-native.ts', path: './src/main-native.ts', type: 'package' },
+    { name: 'src/main-native.js', path: './src/main-native.js', type: 'package' },
+    { name: 'src/main.ts', path: './src/main.ts', type: 'package' },
+    { name: 'src/main.js', path: './src/main.js', type: 'package' },
+    { name: 'main (package.json)', path: pkg.main, type: 'package' },
+  ]
+
+  for (const candidate of entryCandidates) {
+    if (!candidate.path) continue
+    const entryFullPath = path.resolve(projectRoot, candidate.path)
+    if (fs.existsSync(entryFullPath)) {
+      mainEntry = candidate.path
+      entryType = candidate.type
+      signale.info(`主入口: ${mainEntry}`)
+      break
+    }
+  }
+
+  if (!mainEntry) {
+    signale.error('无法找到有效的入口文件，请检查以下路径:')
+    signale.error('  - src/main-native.ts 或 src/main-native.js')
+    signale.error('  - src/main.ts 或 src/main.js')
+    signale.error('  - package.json 中的 main 字段')
+    process.exit(1)
+  }
+
+  const mainEntryPath = path.resolve(projectRoot, mainEntry)
+
+  // 设置环境变量
+  process.env.NODE_ENV = 'development'
+  process.env.QUICKTVUI_PROJECT_ROOT = projectRoot
+  process.env.QUICKTVUI_MAIN_ENTRY = mainEntryPath
+  process.env.QUICKTVUI_ENTRY_TYPE = entryType
+  process.env.QUICKTVUI_PORT = String(args.port)
+
+  // 检测 OpenSSL 版本
+  const needLegacyProvider = checkOpenSSLVersion(process.versions.openssl)
+  if (needLegacyProvider) {
+    signale.warn(`检测到 OpenSSL ${process.versions.openssl}，已添加 --openssl-legacy-provider`)
+    process.env.NODE_OPTIONS = '--openssl-legacy-provider'
+  }
+
+  signale.pending(`启动开发服务器: http://localhost:${args.port}`)
+
+  // 使用 webpack Node API 启动开发服务器
+  const defaultConfigPath = path.resolve(__dirname, '../lib/webpack.config.js')
+  const userConfigPath = args.config ? path.resolve(projectRoot, args.config) : null
+  startDevServer(defaultConfigPath, args.port, args.open, userConfigPath)
+}
+
+/**
+ * 使用 webpack Node API 启动开发服务器
+ */
+function startDevServer(configPath, port, shouldOpen, userConfigPath) {
+  const webpack = require('webpack')
+  const WebpackDevServer = require('webpack-dev-server')
+  const { merge } = require('webpack-merge')
+
+  // 加载内置配置
+  let config = require(configPath)
+
+  // 如果用户指定了自定义配置，进行合并
+  if (userConfigPath) {
+    if (!fs.existsSync(userConfigPath)) {
+      signale.error(`自定义配置文件不存在: ${userConfigPath}`)
+      process.exit(1)
+    }
+    signale.info(`加载用户配置: ${userConfigPath}`)
+    const userConfig = require(userConfigPath)
+    config = merge(config, userConfig)
+  }
+
+  config.devServer = config.devServer || {}
+  config.devServer.port = port
+  config.devServer.open = false
+
+  const compiler = webpack(config)
+  const server = new WebpackDevServer(config.devServer, compiler)
+
+  server.startCallback((err) => {
+    if (err) {
+      signale.error('启动开发服务器失败:', err.message)
+      process.exit(1)
+    }
+    signale.success(`开发服务器已启动: http://localhost:${port}`)
+
+    if (shouldOpen) {
+      const url = `http://localhost:${port}`
+      openBrowser(url)
+    }
+  })
+
+  process.on('SIGINT', () => {
+    server.stopCallback(() => {
+      signale.info('开发服务器已停止')
+      process.exit(0)
+    })
+  })
+}
+
+/**
+ * 等待服务器就绪
+ */
+function waitForServer(url, timeout = 30000) {
+  const http = require('http')
+  const startTime = Date.now()
+
+  return new Promise((resolve, reject) => {
+    function check() {
+      if (Date.now() - startTime > timeout) {
+        reject(new Error('等待服务器超时'))
+        return
+      }
+
+      const req = http.get(url, (res) => {
+        if (res.statusCode === 200 || res.statusCode === 304) {
+          resolve()
+        } else {
+          setTimeout(check, 500)
+        }
+      })
+
+      req.on('error', () => {
+        setTimeout(check, 500)
+      })
+
+      req.setTimeout(1000, () => {
+        req.destroy()
+        setTimeout(check, 500)
+      })
+    }
+
+    check()
+  })
+}
+
+/**
+ * 打开浏览器
+ */
+function openBrowser(url) {
+  const platform = process.platform
+  const command =
+    platform === 'darwin'
+      ? `open "${url}"`
+      : platform === 'win32'
+        ? `cmd /c start "" "${url}"`
+        : `xdg-open "${url}"`
+  const result = exec(command, { silent: true })
+
+  if (result.code === 0) {
+    signale.success('已打开浏览器')
+    return
+  }
+
+  signale.warn(`自动打开浏览器失败，请手动访问: ${url}`)
+}
+
+function findProjectRoot(startDir = process.cwd()) {
+  let currentDir = startDir
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+  }
+  return null
+}
+
+function checkOpenSSLVersion(version) {
+  if (!version) return false
+  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
+  if (!match) return false
+  return parseInt(match[1], 10) >= 3
+}
+
+main().catch((err) => {
+  signale.error('启动失败:', err)
+  process.exit(1)
+})

package/lib/entry-package.js

@@ -1,24 +1,65 @@
-// @quicktvui/web-cli - web entry (package)
-// 此文件由 CLI 自动加载，使用 @quicktvui/web-renderer 包
-// 主入口路径通过 __QUICKTVUI_MAIN_ENTRY__ 注入
-//
-// 初始化流程参考 main-web.js
+// @quicktvui/web-cli - web entry
+// 通过 @quicktvui/web-renderer 导入所有依赖
+// 动态加载主入口，确保初始化顺序正确
 
 console.log('[Web Renderer] === Starting initialization ===')
 
-import { initWebRenderer, startWebRenderer } from '@quicktvui/web-renderer'
+import {
+  initAsyncLocalStorage,
+  initAutoProxy,
+  setupSceneBuilder,
+  createWebEngine,
+  applyAllPatches,
+  TVFocusManager,
+  startWebEngine,
+  APP_NAME,
+  IJKPlayerComponent,
+} from '@quicktvui/web-renderer'
 
-// Step 1: Initialize web renderer (includes setupSceneBuilder, createWebEngine, applyAllPatches, etc.)
-initWebRenderer()
+// 初始化 async localStorage
+initAsyncLocalStorage()
 
-// Step 2: Import main module (this will initialize Vue app and router)
-console.log('[Web Renderer] Importing main module...')
-import(__QUICKTVUI_MAIN_ENTRY__)
+// 初始化自动代理
+initAutoProxy()
+
+// 注册 IJKPlayerComponent
+global.__WEB_COMPONENTS__ = global.__WEB_COMPONENTS__ || {}
+global.__WEB_COMPONENTS__['IJKPlayerComponent'] = IJKPlayerComponent
+
+// 设置 SceneBuilder
+setupSceneBuilder()
+
+// 创建 Web 引擎
+const engine = createWebEngine()
 
-// Step 3: Start the engine
-console.log('[Web Renderer] Starting engine...')
-startWebRenderer()
+// 应用所有补丁
+applyAllPatches(engine)
 
-setTimeout(() => {
-  console.log('[Web Renderer] === Initialization complete ===')
-}, 1000)
+// 初始化 TV 焦点管理器
+global.__TV_FOCUS_MANAGER__ = new TVFocusManager()
+console.log('[Web Renderer] TVFocusManager initialized')
+
+// 注入全局 CSS
+const styleEl = document.createElement('style')
+styleEl.id = 'web-platform-reset'
+styleEl.textContent = `
+  #app, #app * { align-items: flex-start; }
+  [style*="align-items"] { align-items: var(--align-items, center) !important; }
+`
+document.head.appendChild(styleEl)
+console.log('[Web Renderer] Global CSS reset injected')
+
+// 动态加载主入口，等待加载完成后再启动引擎
+console.log('[Web Renderer] Importing main module...')
+import(__QUICKTVUI_MAIN_ENTRY__)
+  .then(() => {
+    console.log('[Web Renderer] Main module loaded')
+    console.log('[Web Renderer] Starting engine...')
+    startWebEngine(engine, APP_NAME)
+    setTimeout(() => {
+      console.log('[Web Renderer] === Initialization complete ===')
+    }, 1000)
+  })
+  .catch((err) => {
+    console.error('[Web Renderer] Failed to load main module:', err)
+  })

package/lib/webpack.config.js

@@ -9,8 +9,8 @@ const fs = require('fs')
 // 从环境变量获取配置
 const projectRoot = process.env.QUICKTVUI_PROJECT_ROOT || process.cwd()
 const mainEntry = process.env.QUICKTVUI_MAIN_ENTRY || path.resolve(projectRoot, 'src/main.ts')
-const entryType = process.env.QUICKTVUI_ENTRY_TYPE || 'package'
 const port = parseInt(process.env.QUICKTVUI_PORT || '39001', 10)
+const watchPoll = parseInt(process.env.QUICKTVUI_WATCH_POLL || '1000', 10)
 
 // 尝试加载项目的 package.json
 let pkg = {}
@@ -24,9 +24,6 @@ try {
 function detectAlias() {
   const alias = {
     '@': path.resolve(projectRoot, 'src'),
-    // 使用本地打包的 es3-router
-    '@extscreen/es3-router':
-      '/Volumes/WD/Users/chendd/Documents/huan/es/es-vue3/packages/ESRouter/dist/index.js',
   }
 
   const jsconfigPath = path.join(projectRoot, 'jsconfig.json')
@@ -67,6 +64,20 @@ function detectModules() {
   if (fs.existsSync(cwdNodeModules) && !modules.includes(cwdNodeModules)) {
     modules.push(cwdNodeModules)
   }
+  // 添加 web-cli 自身的 node_modules 路径（支持全局安装）
+  const cliNodeModules = path.resolve(__dirname, '../node_modules')
+  if (fs.existsSync(cliNodeModules) && !modules.includes(cliNodeModules)) {
+    modules.push(cliNodeModules)
+  }
+  // 添加全局 node_modules 路径
+  try {
+    const globalNodeModules = require('child_process')
+      .execSync('npm root -g', { encoding: 'utf-8' })
+      .trim()
+    if (fs.existsSync(globalNodeModules) && !modules.includes(globalNodeModules)) {
+      modules.push(globalNodeModules)
+    }
+  } catch (e) {}
   return modules
 }
 
@@ -85,23 +96,51 @@ function detectCSSLoader() {
   return 'style-loader'
 }
 
+/**
+ * 检测全局 Sass 变量文件
+ * 注意：返回绝对路径，避免 sass 相对于当前文件解析路径的问题
+ */
+function detectSassAdditionalData() {
+  // 常见的全局变量文件路径
+  const possiblePaths = [
+    'src/styles/variables.scss',
+    'src/styles/variables.sass',
+    'src/styles/_variables.scss',
+    'src/styles/_variables.sass',
+    'src/assets/styles/variables.scss',
+    'src/assets/styles/variables.sass',
+    'src/assets/scss/variables.scss',
+    'src/assets/scss/variables.sass',
+    'src/assets/scss/_variables.scss',
+    'src/assets/scss/_variables.sass',
+    'src/scss/variables.scss',
+    'src/scss/variables.sass',
+    'src/scss/_variables.scss',
+    'src/scss/_variables.sass',
+    'src/css/variables.scss',
+    'src/css/variables.sass',
+  ]
+
+  for (const relativePath of possiblePaths) {
+    const fullPath = path.join(projectRoot, relativePath)
+    if (fs.existsSync(fullPath)) {
+      // 使用绝对路径，避免 sass 相对于当前编译文件解析路径的问题
+      return `@import "${fullPath}";\n`
+    }
+  }
+  return ''
+}
+
 const cssLoader = detectCSSLoader()
+const sassAdditionalData = detectSassAdditionalData()
 
-// 根据类型选择入口文件
-let entryFiles
+// 获取 web-cli 目录下的 loader 路径
+const cliDir = path.resolve(__dirname, '..')
+const resolveLoader = (loaderName) => require.resolve(loaderName, { paths: [cliDir] })
 
-if (entryType === 'webmain') {
-  // 直接使用 webMain 作为入口
-  entryFiles = ['regenerator-runtime/runtime', mainEntry]
-} else if (entryType === 'local') {
-  // 使用 entry-local.js + main 入口
-  const entryLocalFile = path.resolve(__dirname, 'entry-local.js')
-  entryFiles = ['regenerator-runtime/runtime', entryLocalFile, mainEntry]
-} else {
-  // 使用 entry-package.js + main 入口
-  const entryPackageFile = path.resolve(__dirname, 'entry-package.js')
-  entryFiles = ['regenerator-runtime/runtime', entryPackageFile, mainEntry]
-}
+// 入口文件：只加载 entry-package.js，主入口通过动态 import 加载
+const entryPackageFile = path.resolve(__dirname, 'entry-package.js')
+const entryFiles = ['regenerator-runtime/runtime', entryPackageFile]
 
 module.exports = {
   mode: 'development',
@@ -109,8 +148,13 @@ module.exports = {
 
   devServer: {
     port,
-    hot: true,
+    hot: false,
     liveReload: true,
+    headers: {
+      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+      Pragma: 'no-cache',
+      Expires: '0',
+    },
     proxy: [
       {
         context: ['/proxy'],
@@ -138,10 +182,6 @@ module.exports = {
         },
       },
     ],
-    static: {
-      directory: path.join(projectRoot, 'public'),
-      publicPath: '/',
-    },
     client: {
       overlay: { errors: true, warnings: false },
     },
@@ -149,7 +189,7 @@ module.exports = {
 
   watchOptions: {
     aggregateTimeout: 1500,
-    poll: 1000,
+    poll: watchPoll,
     ignored: /node_modules/,
   },
 
@@ -175,28 +215,10 @@ module.exports = {
       template: path.resolve(__dirname, '../templates/web-renderer.html'),
       title: pkg.name || 'QuickTVUI Web',
     }),
-    // 注入主入口路径和项目根目录，以及预计算的模块路径
+    // 注入主入口路径和环境变量
     new (require('webpack').DefinePlugin)({
       __QUICKTVUI_PROJECT_ROOT__: JSON.stringify(projectRoot),
       __QUICKTVUI_MAIN_ENTRY__: JSON.stringify(mainEntry),
-      // 预计算 src/web 模块路径（浏览器环境无法使用 path 模块）
-      __QUICKTVUI_MODULE_ASYNC_LOCAL_STORAGE__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/asyncLocalStorage')
-      ),
-      __QUICKTVUI_MODULE_AUTO_PROXY__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/autoProxy')
-      ),
-      __QUICKTVUI_MODULE_SCENE_BUILDER__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/SceneBuilder')
-      ),
-      __QUICKTVUI_MODULE_WEB_ENGINE__: JSON.stringify(path.join(projectRoot, 'src/web')),
-      __QUICKTVUI_MODULE_PATCHES__: JSON.stringify(path.join(projectRoot, 'src/web/core/patches')),
-      __QUICKTVUI_MODULE_TV_FOCUS_MANAGER__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/TVFocusManager')
-      ),
-      __QUICKTVUI_MODULE_PAGE_LIFECYCLE__: JSON.stringify(
-        path.join(projectRoot, 'src/web/core/pageLifecycle')
-      ),
       process: JSON.stringify({
         env: { NODE_ENV: 'development' },
         browser: true,
@@ -218,7 +240,7 @@ module.exports = {
             loader: 'vue-loader',
             options: { compilerOptions: { whitespace: 'condense' } },
           },
-          'scope-loader',
+          require.resolve('scope-loader', { paths: [path.resolve(__dirname, '..')] }),
         ],
       },
       // TypeScript 文件
@@ -254,9 +276,29 @@ module.exports = {
       { test: /\.css$/, use: [cssLoader] },
       // Less
       { test: /\.less$/, use: [cssLoader, 'less-loader'] },
-      // Sass/SCSS
-      { test: /\.scss$/, use: [cssLoader, 'sass-loader'] },
-      { test: /\.sass$/, use: [cssLoader, 'sass-loader'] },
+      // Sass/SCSS - 自动注入全局变量文件
+      {
+        test: /\.scss$/,
+        use: [
+          cssLoader,
+          {
+            loader: 'sass-loader',
+            options: sassAdditionalData ? { additionalData: sassAdditionalData } : {},
+          },
+        ],
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          cssLoader,
+          {
+            loader: 'sass-loader',
+            options: sassAdditionalData
+              ? { additionalData: sassAdditionalData, sassOptions: { indentedSyntax: true } }
+              : { sassOptions: { indentedSyntax: true } },
+          },
+        ],
+      },
       // 图片
       {
         test: /\.(png|jpe?g|gif|webp|svg)$/i,
@@ -298,9 +340,4 @@ module.exports = {
 
   // 忽略 entry-local.js 中动态 require 的警告（这是预期行为）
   ignoreWarnings: [/Critical dependency: the request of a dependency is an expression/],
-
-  cache: {
-    type: 'filesystem',
-    buildDependencies: { config: [__filename] },
-  },
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@quicktvui/web-cli",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.1",
   "description": "CLI tool for QuickTVUI web development - zero configuration",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",
   "bin": {
-    "qt-web-dev": "./bin/qt-web-dev.js"
+    "qt-web-cli": "./bin/qt-web-cli.js"
   },
   "main": "lib/index.js",
   "files": [
@@ -24,29 +24,39 @@
     "minimist": "^1.2.8",
     "shelljs": "^0.10.0",
     "signale": "^1.4.0",
-    "@quicktvui/web-renderer": "^1.0.4",
-    "scope-loader": "^1.0.3"
+    "webpack-merge": "^6.0.0",
+    "@quicktvui/web-renderer": "^1.0.9",
+    "scope-loader": "^1.0.3",
+    "chokidar": "^3.5.3",
+    "rimraf": "^5.0.0"
   },
   "peerDependencies": {
-    "webpack": "^5.0.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.0.0",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.0",
+    "webpack-dev-server": "^4.15.0",
     "vue-loader": "^17.0.0",
-    "html-webpack-plugin": "^5.0.0",
-    "@babel/core": "^7.0.0",
-    "babel-loader": "^9.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "@babel/core": "^7.23.0",
+    "babel-loader": "^9.1.0",
     "ts-loader": "^9.4.0",
-    "css-loader": "^6.0.0",
-    "@extscreen/es3-router": ">=3.0.1",
-    "@extscreen/es3-vue": ">=3.0.0"
+    "vue": "^3.0.0",
+    "regenerator-runtime": "^0.14.0"
   },
   "peerDependenciesMeta": {
-    "less-loader": { "optional": true },
-    "sass-loader": { "optional": true },
-    "sass": { "optional": true },
-    "less": { "optional": true }
+    "less-loader": {
+      "optional": true
+    },
+    "sass-loader": {
+      "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "less": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/templates/web-renderer.html

@@ -50,6 +50,7 @@
       height: 1080px !important;
       transform-origin: top left;
       background-color: #26292F;
+      visibility: hidden;
     }
     /* 返回按钮样式 */
     #web-back-btn {
@@ -131,6 +132,9 @@
         var offsetY = (_originalInnerHeight - TV_HEIGHT * scale) / 2;
         app.style.marginLeft = offsetX + 'px';
         app.style.marginTop = offsetY + 'px';
+        
+        // Show the app after positioning
+        app.style.visibility = 'visible';
 
         // 更新返回按钮位置，相对于 #app 左上角
         var btn = document.getElementById('web-back-btn');
@@ -144,6 +148,13 @@
         }
       }
     }
+    
+    // Execute immediately when DOM is ready (before load event)
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', scaleApp);
+    } else {
+      scaleApp();
+    }
     window.addEventListener('load', scaleApp);
     window.addEventListener('resize', scaleApp);
   </script>

package/bin/qt-web-dev.js

@@ -1,160 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * QuickTVUI Web Dev CLI
- * 启动 web 开发服务器，无需手动配置入口文件
- */
-
-const path = require('path')
-const fs = require('fs')
-const signale = require('signale')
-const minimist = require('minimist')
-const { exec } = require('shelljs')
-
-// 解析命令行参数
-const args = minimist(process.argv.slice(2), {
-  string: ['port', 'config'],
-  boolean: ['help', 'open'],
-  alias: {
-    p: 'port',
-    c: 'config',
-    h: 'help',
-    o: 'open',
-  },
-  default: {
-    port: 39001,
-    open: false,
-  },
-})
-
-// 显示帮助信息
-if (args.help) {
-  console.log(`
-QuickTVUI Web Dev CLI
-
-Usage:
-  qt-web-dev [options]
-
-Options:
-  -p, --port <port>     开发服务器端口 (默认: 39001)
-  -c, --config <path>   自定义 webpack 配置文件路径
-  -o, --open            自动打开浏览器
-  -h, --help            显示帮助信息
-
-Examples:
-  qt-web-dev
-  qt-web-dev --port 8080
-  qt-web-dev --config ./my.webpack.js
-
-特点:
-  - 自动检测项目入口，优先使用 webMain
-  - 若无 webMain，自动使用 src/web 或 @quicktvui/web-renderer 包
-  - 零配置启动 web 开发服务器
-  `)
-  process.exit(0)
-}
-
-async function main() {
-  signale.pending('正在启动 QuickTVUI Web 开发服务器...')
-
-  // 查找项目根目录
-  const projectRoot = findProjectRoot()
-  if (!projectRoot) {
-    signale.error('无法找到项目根目录')
-    process.exit(1)
-  }
-
-  signale.info(`项目根目录: ${projectRoot}`)
-
-  // 读取 package.json
-  let pkg = {}
-  try {
-    pkg = require(path.join(projectRoot, 'package.json'))
-  } catch (e) {}
-
-  // 检测入口文件
-  let mainEntry
-  let entryType
-
-  if (pkg.webMain) {
-    // 项目已有 webMain，直接使用
-    mainEntry = pkg.webMain
-    entryType = 'webmain'
-    signale.info(`主入口: ${mainEntry} (webMain)`)
-  } else if (fs.existsSync(path.join(projectRoot, 'src/web/index.js'))) {
-    // 有 src/web 目录，使用 entry-local.js 包装 main
-    mainEntry = pkg.main || './src/main.ts'
-    entryType = 'local'
-    signale.info(`主入口: ${mainEntry}`)
-    signale.info(`Web 渲染器: src/web (本地)`)
-  } else {
-    // 使用 @quicktvui/web-renderer 包
-    mainEntry = pkg.main || './src/main.ts'
-    entryType = 'package'
-    signale.info(`主入口: ${mainEntry}`)
-    signale.info(`Web 渲染器: @quicktvui/web-renderer (包)`)
-  }
-
-  const mainEntryPath = path.resolve(projectRoot, mainEntry)
-
-  // 获取 webpack 配置
-  let webpackConfigPath
-  if (args.config) {
-    webpackConfigPath = path.resolve(projectRoot, args.config)
-  } else {
-    webpackConfigPath = path.resolve(__dirname, '../lib/webpack.config.js')
-  }
-
-  // 设置环境变量
-  process.env.NODE_ENV = 'development'
-  process.env.QUICKTVUI_PROJECT_ROOT = projectRoot
-  process.env.QUICKTVUI_MAIN_ENTRY = mainEntryPath
-  process.env.QUICKTVUI_ENTRY_TYPE = entryType
-  process.env.QUICKTVUI_PORT = String(args.port)
-
-  // 检测 OpenSSL 版本
-  const needLegacyProvider = checkOpenSSLVersion(process.versions.openssl)
-  let nodeOptions = ''
-  if (needLegacyProvider) {
-    nodeOptions = '--openssl-legacy-provider'
-    signale.warn(`检测到 OpenSSL ${process.versions.openssl}，已添加 --openssl-legacy-provider`)
-  }
-
-  // 构建 webpack 命令
-  const webpackArgs = ['serve', `--config "${webpackConfigPath}"`, `--port ${args.port}`, '--color']
-  if (args.open) webpackArgs.push('--open')
-
-  const envPrefix = nodeOptions ? `NODE_OPTIONS="${nodeOptions}" ` : ''
-  const webpackCmd = `${envPrefix}npx webpack ${webpackArgs.join(' ')}`
-
-  signale.pending(`执行: ${webpackCmd}`)
-
-  const result = exec(webpackCmd, { stdio: 'inherit' })
-  if (result.code !== 0) {
-    signale.error('启动开发服务器失败')
-    process.exit(1)
-  }
-}
-
-function findProjectRoot(startDir = process.cwd()) {
-  let currentDir = startDir
-  while (currentDir !== path.dirname(currentDir)) {
-    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
-      return currentDir
-    }
-    currentDir = path.dirname(currentDir)
-  }
-  return null
-}
-
-function checkOpenSSLVersion(version) {
-  if (!version) return false
-  const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version)
-  if (!match) return false
-  return parseInt(match[1], 10) >= 3
-}
-
-main().catch((err) => {
-  signale.error('启动失败:', err)
-  process.exit(1)
-})