feat(cli): 添加本地web服务器功能用于UI展示

添加startWebServer函数实现本地web服务器，支持静态文件服务和SPA路由
修改配置文件和构建输出路径以支持本地开发模式
添加ui命令用于启动web服务器并支持自定义端口

Author: Drswith

app/main.ts

@@ -1,4 +1,5 @@
 import type { UsbDevice, UsbIdsData, UsbVendor, VersionInfo } from '../src/types'
+import { UI_LOCAL_BASE_URL } from '../src/config'
 import './styles.css'
 
 // 类型定义
@@ -15,6 +16,8 @@ interface SearchOptions {
 
 // 全局变量
 const version = import.meta.env.VERSION || 'latest'
+const useLocalData = import.meta.env.BASE_URL === UI_LOCAL_BASE_URL
+
 let currentData: UsbIdsData = {}
 let currentResults: DeviceResult[] = []
 let currentPage = 1
@@ -267,7 +270,7 @@ function updateStats(): void {
   }
 }
 
-// 版本信息相关函数
+// 远程数据获取
 async function loadDataFromNpm<T>(version: string, file: string): Promise<T> {
   try {
     // 从npm CDN获取指定版本的file
@@ -298,9 +301,25 @@ async function loadDataFromNpm<T>(version: string, file: string): Promise<T> {
   }
 }
 
+async function loadDataFromLocal<T>(file: string): Promise<T> {
+  try {
+    const response = await fetch(file)
+    if (response.ok) {
+      return await response.json() as T
+    }
+    else {
+      throw new Error(`Failed to fetch from local: ${response.status}`)
+    }
+  }
+  catch (error) {
+    console.warn('Failed to load local data:', error)
+    return {} as T
+  }
+}
+
 async function loadVersionInfo(): Promise<void> {
   try {
-    versionInfo = await loadDataFromNpm<VersionInfo>(version, 'usb.ids.version.json')
+    versionInfo = useLocalData ? await loadDataFromLocal<VersionInfo>('usb.ids.version.json') : await loadDataFromNpm<VersionInfo>(version, 'usb.ids.version.json')
     updateVersionDisplay()
     startCountdown()
   }
@@ -505,8 +524,8 @@ async function initializeApp(): Promise<void> {
       countdown: document.getElementById('countdown') as HTMLElement,
     }
 
-    // 异步加载USB IDs数据 - 从最新的npm包获取
-    const usbIdsData = await loadDataFromNpm<UsbIdsData>(version, 'usb.ids.json')
+    // 异步加载USB IDs数据
+    const usbIdsData = useLocalData ? await loadDataFromLocal<UsbIdsData>('usb.ids.json') : await loadDataFromNpm<UsbIdsData>(version, 'usb.ids.json')
     console.log('USB IDs Data loaded:', usbIdsData)
 
     // 设置数据

package.json

@@ -27,7 +27,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
-    "usb-ids": "./bin/cli.cjs"
+    "usb-ids": "./bin/cli.js"
   },
   "files": [
     "bin",
@@ -42,14 +42,15 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev:app": "vite",
-    "build:app": "vite build",
+    "build:app": "vite build --outDir dist/ui",
     "dev:lib": "tsdown --watch",
     "build:lib": "tsdown",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "fetch-usb-ids": "node ./bin/cli.cjs fetch",
     "version-info": "node ./bin/cli.cjs version",
     "check-update": "node ./bin/cli.cjs check",
+    "ui": "tsx src/cli.ts ui",
     "release": "bumpp && pnpm publish",
     "start": "tsx src/index.ts",
     "test": "vitest run",

src/cli.ts

@@ -6,9 +6,10 @@
  */
 
 import * as fs from 'node:fs'
+import { createServer } from 'node:http'
 import * as path from 'node:path'
 import * as process from 'node:process'
-import { USB_IDS_SOURCE } from './config'
+import { UI_LOCAL_BASE_URL, USB_IDS_SOURCE } from './config'
 import { fetchUsbIdsData, loadVersionInfo, saveUsbIdsToFile, saveVersionInfo } from './core'
 import { shouldUpdate } from './parser'
 import { logger } from './utils'
@@ -135,6 +136,112 @@ export function checkUpdate(): void {
   }
 }
 
+/**
+ * 启动静态web服务器
+ */
+export async function startWebServer(port = 3000): Promise<void> {
+  try {
+    const root = process.cwd()
+    const distDir = path.join(root, 'dist', 'ui')
+
+    // 检查dist/ui目录是否存在
+    if (!fs.existsSync(distDir)) {
+      logger.error('dist/ui目录不存在，请先运行构建命令: pnpm run build:app')
+      process.exit(1)
+    }
+
+    // 创建HTTP服务器
+    const server = createServer((req, res) => {
+      console.log('req url', req.url)
+      // 重定向根路径到UI_LOCAL_BASE_URL
+      if (req.url === '/') {
+        res.writeHead(302, {
+          Location: UI_LOCAL_BASE_URL,
+        })
+        res.end()
+        return
+      }
+
+      let filePath = path.join(distDir, req.url === UI_LOCAL_BASE_URL
+        ? 'index.html'
+        : req.url?.replace(UI_LOCAL_BASE_URL, '') || '')
+
+      console.log('file path', filePath)
+
+      // 安全检查，防止路径遍历攻击
+      if (!filePath.startsWith(distDir)) {
+        res.writeHead(403)
+        res.end('Forbidden')
+        return
+      }
+
+      // 处理usb.ids.json和usb.ids.version.json
+      if (filePath.includes('usb.ids.json') || filePath.includes('usb.ids.version.json')) {
+        // usb.ids.json和usb.ids.version.json与在dist同级目录
+        filePath = path.join(root, req.url!.replace(UI_LOCAL_BASE_URL, ''))
+        console.log('json file path', filePath)
+      }
+
+      // 如果文件不存在，返回index.html（用于SPA路由）
+      if (!fs.existsSync(filePath)) {
+        filePath = path.join(distDir, 'index.html')
+      }
+
+      // 读取文件
+      fs.readFile(filePath, (err, data) => {
+        if (err) {
+          res.writeHead(404)
+          res.end('Not Found')
+          return
+        }
+
+        // 设置Content-Type
+        const ext = path.extname(filePath)
+        const contentType = {
+          '.html': 'text/html',
+          '.js': 'application/javascript',
+          '.css': 'text/css',
+          '.json': 'application/json',
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg',
+          '.gif': 'image/gif',
+          '.svg': 'image/svg+xml',
+          '.ico': 'image/x-icon',
+        }[ext] || 'text/plain'
+
+        res.writeHead(200, { 'Content-Type': contentType })
+        res.end(data)
+      })
+    })
+
+    // 启动服务器
+    server.listen(port, () => {
+      logger.success(`usb.ids Web UI服务器已启动！`)
+      logger.info(`访问地址: http://localhost:${port}${UI_LOCAL_BASE_URL}`)
+      logger.info('按 Control+C 停止服务器')
+    })
+
+    // 保持服务器运行，直到手动停止
+    return new Promise<void>((resolve, reject) => {
+      // 监听服务器错误
+      server.on('error', (error) => {
+        logger.error(`服务器错误: ${error.message}`)
+        reject(error)
+      })
+
+      // 服务器关闭时resolve Promise
+      server.on('close', () => {
+        logger.success('服务器已停止')
+        resolve()
+      })
+    })
+  }
+  catch (error) {
+    logger.error(`启动web服务器失败: ${(error as Error).message}`)
+    process.exit(1)
+  }
+}
+
 /**
  * 显示帮助信息
  */
@@ -150,16 +257,20 @@ USB设备数据管理工具
   update, fetch    更新USB设备数据
   version, info    显示当前版本信息
   check           检查是否需要更新
+  ui              启动web界面服务器
   help            显示此帮助信息
 
 选项:
   --force         强制更新（忽略时间检查）
+  --port <port>   指定web服务器端口（默认3000）
 
 示例:
   usb-ids update
   usb-ids update --force
   usb-ids version
   usb-ids check
+  usb-ids ui
+  usb-ids ui --port 8080
 `)
 }
 
@@ -185,6 +296,23 @@ export async function runCli(): Promise<void> {
       checkUpdate()
       break
 
+    case 'ui': {
+      // 解析端口参数
+      const portIndex = args.indexOf('--port')
+      let port = 3000
+      if (portIndex !== -1 && args[portIndex + 1]) {
+        const parsedPort = Number.parseInt(args[portIndex + 1], 10)
+        if (!Number.isNaN(parsedPort) && parsedPort > 0 && parsedPort < 65536) {
+          port = parsedPort
+        }
+        else {
+          logger.error('无效的端口号，使用默认端口3000')
+        }
+      }
+      await startWebServer(port)
+      break
+    }
+
     case 'help':
     case '--help':
     case '-h':

src/config.ts

@@ -2,3 +2,5 @@ export const USB_IDS_SOURCE = [
   'http://www.linux-usb.org/usb.ids',
   'https://raw.githubusercontent.com/systemd/systemd/main/hwdb.d/usb.ids',
 ]
+
+export const UI_LOCAL_BASE_URL = '/__usb_ids__/'

tsdown.config.ts

@@ -28,7 +28,7 @@ export default defineConfig((_) => {
       platform: 'node',
       entry: ['src/cli.ts'],
       outDir: 'bin',
-      format: 'cjs',
+      format: 'esm',
       dts: false,
     },
   ]

vite.config.ts

@@ -1,11 +1,12 @@
 import process from 'node:process'
 import { defineConfig, loadEnv } from 'vite'
 import pkg from './package.json'
+import { UI_LOCAL_BASE_URL } from './src/config'
 
 export default defineConfig(({ command }) => {
   const env = loadEnv(command, process.cwd())
 
-  const base = env.VITE_BASE_PATH || '/'
+  const base = env.VITE_BASE_PATH || UI_LOCAL_BASE_URL
   console.log('vite base ', base)
 
   const version = pkg.version