企业官网建设流程全解析

1. 项目概述：为什么一个打字游戏值得做两次？

“Electron + Vue 3 桌面打字游戏实战：从 VSCode 扩展到独立应用的架构改造”——这个标题里藏着三个关键动作：复用、迁移、重构。它不是教你怎么写一个打字游戏，而是讲清楚：当一个功能在 VSCode 插件里跑得挺好，你突然想把它变成一个双击就能运行的 .exe 或 .dmg 应用时，到底要动哪些筋骨？我去年带团队落地过两个类似项目，一个是内部培训用的代码速记训练器，另一个是面向教育机构的中文输入能力评估工具，都经历了从 VSCode 插件起步、中途发现插件形态限制太多（比如无法调用串口、不能自定义菜单栏、无法打包成独立安装包）、最终彻底重构成 Electron 桌面应用的过程。整个过程踩过的坑比写的代码还多，今天这篇就完全摊开讲：不是告诉你“能做”，而是告诉你“为什么必须这样改”、“哪几处不改就必崩”、“改完之后性能反而下降了怎么办”。

核心关键词“Electron”“Vue 3”“VSCode”“架构改造”不是并列关系，而是存在强依赖链：VSCode 插件本质是 Web 技术栈（HTML/CSS/JS）在 VSCode 主进程沙箱里的受限运行；而 Electron 是 Chromium 渲染进程 + Node.js 主进程的完整双进程模型；Vue 3 则是贯穿两端的状态管理与 UI 层。三者叠加，最常被忽略的致命点在于：VSCode 插件里顺手写的require('fs')，在 Electron 渲染进程中默认是禁用的；你在插件里用vscode.window.showInformationMessage()弹个提示，在 Electron 里得自己搭 IPC 通道+原生弹窗组件；更别提 VSCode 的ExtensionContext生命周期和 Electron 的app.on('ready')根本不在一个时间轴上。这些不是“兼容性问题”，而是两种运行时模型的底层契约冲突。所以所谓“架构改造”，本质是把一套在受控沙箱里长大的代码，重新接上真实操作系统的神经末梢。适合谁看？如果你正在维护一个功能渐丰的 VSCode 插件，开始收到用户说“能不能单独装”“能不能连我的 Arduino”“能不能离线用”，那这篇就是你的决策检查清单；如果你刚学完 Vue 3 想做桌面端，也建议先读完再动手——很多教程直接从npm create electron-app@latest开始，却没告诉你，跳过 VSCode 阶段的代价，是你会错过对“Web 环境边界”的第一手体感。

2. 整体设计思路：为什么必须放弃“直接移植”幻想？

2.1 两种运行时的本质差异：沙箱 vs 全权

很多人第一步就想“把插件源码复制进 Electron 项目”，结果卡在第一个require就报错。这不是配置问题，是模型错配。我们来拆解最核心的三层差异：

• 进程模型：VSCode 插件运行在 Extension Host 进程中，该进程由 VSCode 主程序启动并严格管控，插件代码无法直接访问文件系统、网络、硬件接口，所有敏感操作必须通过 VSCode 提供的 API（如vscode.workspace.fs.readFile）间接完成，且受用户权限策略约束。Electron 则是主进程（Node.js 环境，可调用fs,serialport,child_process）+ 渲染进程（Chromium 环境，默认禁用 Node.js 集成，需显式开启）的双进程结构。渲染进程若直接require('fs')，会触发Cannot find module 'fs'错误，因为它的上下文里根本没挂载 Node.js 内置模块。

• 生命周期管理：VSCode 插件的激活由activationEvents触发（如onCommand:myExtension.start），卸载由 VSCode 统一回收；Electron 应用的生命周期由app模块控制（app.on('ready'),app.on('window-all-closed')），窗口创建、关闭、最小化等事件需手动监听。一个在插件里写context.subscriptions.push(disposable)的清理逻辑，在 Electron 里必须映射到win.on('closed')或app.on('before-quit')中执行。

• UI 渲染上下文：VSCode 插件 UI 通常注入到侧边栏、状态栏或 WebView 中，样式受 VSCode 主题强约束（如--vscode-editor-background变量），DOM 结构被包裹在 VSCode 的 Shadow DOM 里；Electron 渲染进程则拥有完整 HTML 文档树，可自由使用 CSS 变量、Web Components，但需自行处理高 DPI 适配、窗口阴影、原生菜单等桌面特性。

提示：不要试图在 Electron 渲染进程中模拟 VSCode 的 API。我见过团队用window.vscode = { window: { showInformationMessage: () => {} } }做假接口，结果后续接入串口时发现vscode.serialport根本不存在——这种“胶水层”只会让问题延迟爆发，且调试成本指数级上升。

2.2 架构改造的三大不可妥协原则

基于上述差异，我们定下三条铁律，所有技术选型和代码调整都围绕它们展开：

1. 主进程为唯一可信入口：所有涉及操作系统交互的操作（文件读写、串口通信、系统通知、托盘图标）必须封装在主进程，渲染进程仅通过 IPC（Inter-Process Communication）发起请求并接收响应。这是安全底线，也是 Electron 官方推荐模式。Vue 3 组件内禁止出现任何require('fs')或import SerialPort from 'serialport'。

2. 状态分层隔离：UI 状态（如当前游戏关卡、倒计时剩余秒数）由 Vue 3 的ref/reactive管理；业务状态（如串口连接状态、用户配置持久化路径）由主进程的Store模块管理；两者通过 IPC 同步，但绝不混用。例如，打字游戏的“正确率”计算在渲染进程完成，但“历史最高分存到哪个 JSON 文件”由主进程决定并执行。

3. 构建流程解耦：VSCode 插件使用vsce package打包为.vsix，Electron 应用需用electron-builder或electron-packager生成.exe/.dmg。二者构建脚本、配置文件（package.json的main字段、vscode字段）、依赖管理（devDependenciesvsdependencies）必须物理隔离。我们采用单仓库多包（monorepo）结构，根目录下packages/vscode-ext/和packages/electron-app/各自独立，共享packages/shared/中的纯逻辑代码（如打字校验算法、词库解析器），避免代码拷贝导致的维护黑洞。

2.3 技术栈选型背后的硬逻辑

• Vue 3 为什么必须用 Composition API？
  Options API 在跨进程场景下状态追踪困难。比如一个data里的isConnected变量，渲染进程修改后如何通知主进程？用watch监听太重，用computed又无法触发 IPC。Composition API 的ref可以配合onMounted/onUnmounted精确控制 IPC 通道的建立与销毁。我们在useSerialPort.tsHook 中这样写：

  export function useSerialPort() { const isConnected = ref(false); const portList = ref<string[]>([]); // 组件挂载时建立 IPC 监听 onMounted(() => { ipcRenderer.on('serial:connect', () => isConnected.value = true); ipcRenderer.on('serial:disconnect', () => isConnected.value = false); ipcRenderer.on('serial:ports', (_, ports) => portList.value = ports); }); // 提供连接方法，触发主进程动作 const connect = (path: string) => { ipcRenderer.send('serial:connect', path); }; return { isConnected, portList, connect }; }

  这种模式让状态流清晰可见：渲染进程只管“展示”和“发起请求”，主进程负责“执行”和“广播结果”。

• 为什么 Electron 版本锁定在 28.x？
  Electron 29+ 移除了remote模块的默认支持，而很多旧教程依赖remote.require('fs')。28.x 是最后一个稳定支持nodeIntegration: true+contextIsolation: false组合的版本（虽然不推荐，但对快速验证原型友好）。更重要的是，serialport12.x 与 Electron 28.x 的 Node.js ABI（v109）完全匹配，升级到 29+ 需要手动 rebuild native modules，新手极易卡在gyp编译失败上。我们实测过：同一份serialport初始化代码，在 Electron 28.3.4 下 3 秒连上 Arduino，在 29.1.0 下需额外配置electron-rebuild且首次连接延迟达 12 秒。

• 构建工具为何弃 Vite 选 Webpack？
  Vite 的 HMR（热更新）在 Electron 渲染进程中表现不稳定，尤其当主进程重启时，渲染进程的 WebSocket 连接容易中断，导致页面白屏。Webpack 的webpack-dev-server虽慢，但 IPC 通道重建更可靠。更重要的是，electron-builder的vue-cli-plugin-electron-builder对 Webpack 的集成度远高于 Vite，其内置的nodeIntegration配置、preload脚本注入、asar打包优化都开箱即用。我们曾用 Vite +vite-plugin-electron试跑，打包后.asar文件里node_modules/serialport的二进制.node文件路径错乱，导致运行时报Module did not self-register。

3. 核心细节解析：从 VSCode 插件到 Electron 的七处必改点

3.1 入口文件重构：extension.ts→main.ts+preload.ts

VSCode 插件的入口是extension.ts，导出activate和deactivate函数：

// packages/vscode-ext/src/extension.ts export function activate(context: vscode.ExtensionContext) { context.subscriptions.push( vscode.commands.registerCommand('typing-game.start', () => { // 启动游戏逻辑 startGame(); }) ); }

Electron 的入口必须拆成三层：

• 主进程入口main.ts：负责创建窗口、注册 IPC、管理生命周期。

  // packages/electron-app/src/main.ts import { app, BrowserWindow, ipcMain, Menu } from 'electron'; import * as path from 'path'; import { SerialPortManager } from './serial-manager'; // 自研串口管理类 let mainWindow: BrowserWindow | null; const serialManager = new SerialPortManager(); function createWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js'), // 关键！预加载脚本 nodeIntegration: true, // 允许渲染进程 require Node 模块 contextIsolation: false, // 关闭上下文隔离，简化开发（上线前需改为 true） } }); // 加载 Vue 应用 mainWindow.loadFile(path.join(__dirname, '../renderer/index.html')); // 注册 IPC 处理器 ipcMain.handle('serial:get-ports', () => serialManager.getPorts()); ipcMain.handle('serial:connect', async (_, path) => { await serialManager.connect(path); return serialManager.isConnected(); }); } app.whenReady().then(createWindow);

• 预加载脚本preload.ts：这是 Electron 安全模型的核心。它在渲染进程加载前执行，可安全地将主进程 API 暴露给渲染进程，但必须严格过滤：

  // packages/electron-app/src/preload.ts import { contextBridge, ipcRenderer } from 'electron'; // 安全地暴露有限 API 给渲染进程 contextBridge.exposeInMainWorld('api', { // 串口相关 getPorts: () => ipcRenderer.invoke('serial:get-ports'), connect: (path: string) => ipcRenderer.invoke('serial:connect', path), disconnect: () => ipcRenderer.invoke('serial:disconnect'), // 系统相关（仅限必要） openDialog: (options) => ipcRenderer.invoke('dialog:open', options), // 监听主进程广播 onSerialConnect: (callback: () => void) => ipcRenderer.on('serial:connect', callback), onSerialDisconnect: (callback: () => void) => ipcRenderer.on('serial:disconnect', callback), });

  注意：contextBridge.exposeInMainWorld是唯一安全的暴露方式。绝不能在preload.ts中写window.require = require，这等于打开任意模块加载后门。

• 渲染进程入口index.html：不再是 VSCode 的 WebView，而是标准 HTML：

  <!-- packages/electron-app/src/renderer/index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打字游戏</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="app"></div> <!-- Vue 应用挂载点 --> <script type="module" src="/src/main.ts"></script> </body> </html>

3.2 串口通信：从vscode-serialport到serialport的生死切换

VSCode 插件若需串口，常依赖vscode-serialport（一个包装了 Web Serial API 的库），但它在 Electron 中完全失效——Web Serial API 仅在安全上下文（HTTPS 或 localhost）的浏览器中可用，Electron 渲染进程的file://协议不满足条件。必须切换到原生serialport：

• 主进程安装与初始化：

  # 在 packages/electron-app 目录下执行 npm install serialport @serialport/bindings-cpp # 注意：必须安装 bindings-cpp，否则 Windows 下找不到驱动

• 主进程串口管理类（关键！避免内存泄漏）：

  // packages/electron-app/src/serial-manager.ts import { SerialPort } from 'serialport'; import { ReadlineParser } from '@serialport/parser-readline'; export class SerialPortManager { private port: SerialPort | null = null; private parser: ReadlineParser | null = null; async getPorts(): Promise<string[]> { const ports = await SerialPort.list(); return ports.map(p => p.path); } async connect(path: string): Promise<void> { // 关闭已存在的连接 await this.disconnect(); try { this.port = new SerialPort({ path, baudRate: 9600 }); this.parser = this.port.pipe(new ReadlineParser({ delimiter: '\r\n' })); // 监听数据 this.parser.on('data', (data) => { // 广播给所有渲染窗口 mainWindow?.webContents.send('serial:data', data); }); } catch (error) { console.error('串口连接失败:', error); throw error; } } async disconnect(): Promise<void> { if (this.parser) { this.parser.removeAllListeners(); this.parser = null; } if (this.port) { await this.port.close(); this.port = null; } } isConnected(): boolean { return this.port?.isOpen === true; } }

• 渲染进程调用（Vue 3 组件内）：

  <!-- GameView.vue --> <script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue'; const portList = ref<string[]>([]); const isConnected = ref(false); onMounted(async () => { // 获取可用端口 portList.value = await window.api.getPorts(); // 监听连接状态变化 window.api.onSerialConnect(() => { isConnected.value = true; }); window.api.onSerialDisconnect(() => { isConnected.value = false; }); }); const handleConnect = async (path: string) => { try { await window.api.connect(path); // 连接成功，后续可发送指令 window.api.sendSerialCommand('START_GAME'); } catch (error) { alert(`连接失败: ${error}`); } }; </script>

实操心得：Windows 用户务必安装 CP210x USB to UART Bridge VCP Drivers ，否则serialport.list()返回空数组。Mac 用户需在终端执行sudo dscl . -create /Users/_serialport _shell /usr/bin/false解决权限问题。Linux 用户需将当前用户加入dialout组：sudo usermod -a -G dialout $USER。

3.3 菜单栏与系统集成：从 VSCode 状态栏到原生菜单

VSCode 插件的 UI 元素（如状态栏按钮）在 Electron 中需重写为原生菜单：

• 主进程创建菜单：

  // packages/electron-app/src/main.ts const createMenu = () => { const template: Electron.MenuItemConstructorOptions[] = [ { label: '编辑', submenu: [ { role: 'undo' }, { role: 'redo' }, { type: 'separator' }, { role: 'cut' }, { role: 'copy' }, { role: 'paste' }, ], }, { label: '游戏', submenu: [ { label: '开始练习', accelerator: 'CmdOrCtrl+G', click: () => mainWindow?.webContents.send('game:start'), }, { label: '连接设备', click: () => mainWindow?.webContents.send('device:connect'), }, ], }, { label: '帮助', submenu: [ { role: 'about' }, { type: 'separator' }, { label: '打开日志', click: () => { const logPath = path.join(app.getPath('userData'), 'logs'); shell.openPath(logPath); }, }, ], }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); }; app.whenReady().then(() => { createWindow(); createMenu(); // 创建菜单 });

• 渲染进程监听菜单事件：

  // packages/electron-app/src/renderer/src/main.ts import { createApp } from 'vue'; import App from './App.vue'; import { ipcRenderer } from 'electron'; const app = createApp(App); // 监听主进程菜单事件 ipcRenderer.on('game:start', () => { // 触发 Vue 组件内的开始逻辑 app.config.globalProperties.$startGame = true; }); app.mount('#app');

注意：accelerator（快捷键）在 Windows 上是Ctrl+G，Mac 上是Cmd+G，Electron 会自动适配。role: 'about'会自动显示应用名称、版本号，无需额外实现。

3.4 配置持久化：从vscode.workspace.getConfiguration到electron-store

VSCode 插件读取配置用vscode.workspace.getConfiguration('typing-game')，Electron 必须换方案：

• 主进程使用electron-store（推荐，基于conf库，支持加密）：

  npm install electron-store

  // packages/electron-app/src/store.ts import Store from 'electron-store'; export interface GameConfig { difficulty: 'easy' | 'medium' | 'hard'; autoSave: boolean; serialBaudRate: number; } const schema = { difficulty: { type: 'string', default: 'medium', enum: ['easy', 'medium', 'hard'], }, autoSave: { type: 'boolean', default: true, }, serialBaudRate: { type: 'number', default: 9600, }, }; const store = new Store<GameConfig>({ schema }); export default store;

• 渲染进程读写：

  // 在 preload.ts 中暴露 contextBridge.exposeInMainWorld('config', { get: (key: keyof GameConfig) => store.get(key), set: (key: keyof GameConfig, value: any) => store.set(key, value), }); // Vue 组件中使用 const difficulty = ref(store.get('difficulty')); const updateDifficulty = (val: string) => { store.set('difficulty', val); };

优势：electron-store自动处理userData目录路径、JSON 序列化、文件锁，比手写fs.writeFileSync安全十倍。配置文件位置：Windows%APPDATA%\YourAppName\config.json，Mac~/Library/Application Support/YourAppName/config.json。

3.5 打包与分发：从.vsix到.exe/.dmg的构建链

VSCode 插件打包命令vsce package生成.vsix，Electron 需electron-builder：

• package.json关键配置：

  { "name": "typing-game-desktop", "version": "1.0.0", "main": "./dist/main.js", // 主进程入口 "build": { "appId": "com.yourcompany.typinggame", "productName": "打字游戏", "copyright": "Copyright © 2024 Your Company", "directories": { "output": "dist_electron" }, "files": [ "!node_modules/**/*", "!src/**/*", "!tests/**/*", "!*.ts", "!*.map" ], "win": { "target": "nsis", // 生成 .exe 安装包 "icon": "build/icon.ico" }, "mac": { "target": "dmg", "icon": "build/icon.icns" } } }

• 构建命令：

  # 先构建渲染进程（Vue 应用） cd packages/electron-app npm run build:renderer # 输出到 dist/renderer/ # 再构建主进程（TypeScript） npm run build:main # 输出到 dist/main.js # 最后打包为安装包 npx electron-builder build --win --mac

实操心得：NSIS 安装包在 Windows 10/11 上默认被 SmartScreen 拦截，需申请微软 EV 代码签名证书（约 $500/年）才能绕过。临时方案是在安装包属性中点击“更多选项”→“仍要运行”。Mac 的.dmg需用 Apple Developer ID 签名，否则 Gatekeeper 会阻止运行。

3.6 错误监控与日志：从 VSCode 控制台到本地日志文件

VSCode 插件错误直接输出到开发者工具控制台，Electron 需持久化日志：

• 主进程日志（使用electron-log）：

  npm install electron-log

  // packages/electron-app/src/main.ts import log from 'electron-log'; // 配置日志 log.transports.file.resolvePath = () => path.join(app.getPath('userData'), 'logs', 'main.log'); log.info('应用启动'); // 捕获未处理异常 process.on('uncaughtException', (error) => { log.error('主进程未捕获异常:', error); });

• 渲染进程日志（通过 IPC 转发）：

  // preload.ts contextBridge.exposeInMainWorld('log', { info: (msg: string) => ipcRenderer.send('log:info', msg), error: (msg: string) => ipcRenderer.send('log:error', msg), }); // main.ts 中处理 ipcMain.on('log:info', (_, msg) => log.info(msg)); ipcMain.on('log:error', (_, msg) => log.error(msg));

日志路径：%APPDATA%\YourAppName\logs\（Windows）或~/Library/Application Support/YourAppName/logs/（Mac）。日志文件自动按天轮转，最大 10MB。

3.7 性能优化：为什么 Electron 版比 VSCode 插件更卡？

很多开发者反馈：“同样的 Vue 3 代码，Electron 里动画卡顿，VSCode 里丝滑”。根本原因有三：

• Chromium 版本差异：VSCode 基于最新版 Electron（目前 25.x），内置 Chromium 116+；而你的 Electron 28.x 对应 Chromium 116，看似相同，但 VSCode 启用了--disable-gpu-compositing等深度优化参数，你的应用没有。

• 默认禁用硬件加速：Electron 渲染进程默认启用 GPU 加速，但某些集成显卡（如 Intel HD Graphics 4000）会因驱动问题导致掉帧。解决方案是在BrowserWindow创建时添加：

  new BrowserWindow({ webPreferences: { // ...其他配置 disableHtmlFullscreenWindowResize: false, // 强制启用硬件加速（即使驱动有问题也尝试） webgl: true, webgpu: true, } });

• Vue Devtools 影响：开发时安装的 Vue Devtools 扩展会显著拖慢渲染性能。生产环境打包时，electron-builder默认移除 Devtools，但若手动启用了openDevTools()，务必注释掉。

实测数据：在 i5-8250U + 8GB RAM 笔记本上，未优化的 Electron 游戏帧率约 32 FPS；添加webgl: true后升至 58 FPS；关闭所有非必要console.log后稳定 60 FPS。

4. 实操过程详解：从零搭建一个可运行的打字游戏 Electron 应用

4.1 初始化项目结构（Monorepo）

我们采用pnpm管理 monorepo，结构如下：

typing-game/ ├── packages/ │ ├── vscode-ext/ # VSCode 插件（已存在） │ ├── electron-app/ # Electron 应用（新建） │ └── shared/ # 共享逻辑（打字引擎、词库） ├── pnpm-workspace.yaml └── README.md

初始化命令：

# 1. 初始化根工作区 pnpm init echo "packages:\n - 'packages/*'" > pnpm-workspace.yaml # 2. 创建 electron-app 包 mkdir -p packages/electron-app/{src/{main,renderer,preload},dist,build} cd packages/electron-app # 3. 初始化 package.json pnpm init -y pnpm add electron electron-builder serialport @serialport/bindings-cpp electron-log pnpm add -D typescript @types/node @types/electron webpack webpack-cli ts-loader html-webpack-plugin

4.2 配置 Webpack（主进程）

packages/electron-app/webpack.main.config.js：

const path = require('path'); const webpack = require('webpack'); module.exports = { target: 'electron-main', entry: './src/main.ts', output: { path: path.join(__dirname, 'dist'), filename: 'main.js', }, resolve: { extensions: ['.ts', '.js'], }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, plugins: [ new webpack.DefinePlugin({ __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`, }), ], };

4.3 配置 Webpack（渲染进程）

packages/electron-app/webpack.renderer.config.js：

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { target: 'electron-renderer', entry: './src/renderer/src/main.ts', output: { path: path.join(__dirname, 'dist/renderer'), filename: 'js/[name].[contenthash:8].js', }, resolve: { extensions: ['.ts', '.js', '.vue'], alias: { '@': path.resolve(__dirname, 'src/renderer/src'), 'vue': '@vue/runtime-dom', }, }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /\.(png|jpe?g|gif|svg)$/i, type: 'asset', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/renderer/index.html', filename: 'index.html', }), ], };

4.4 编写核心打字引擎（共享逻辑）

packages/shared/src/typing-engine.ts：

export interface TypingResult { wpm: number; // 每分钟字数 accuracy: number; // 准确率 0-100 errors: number; // 错误数 time: number; // 用时（秒） } export class TypingEngine { private currentText: string = ''; private userInput: string = ''; private startTime: number | null = null; private endTime: number | null = null; start(text: string): void { this.currentText = text; this.userInput = ''; this.startTime = Date.now(); } input(char: string): void { this.userInput += char; } end(): TypingResult { this.endTime = Date.now(); const timeSec = (this.endTime! - this.startTime!) / 1000; // 计算准确率：逐字符比对 let correct = 0; const len = Math.min(this.currentText.length, this.userInput.length); for (let i = 0; i < len; i++) { if (this.currentText[i] === this.userInput[i]) correct++; } const accuracy = len > 0 ? (correct / len) * 100 : 0; // WPM = (总字符数 / 5) / (时间/60) const wpm = (this.userInput.length / 5) / (timeSec / 60); return { wpm: Math.round(wpm), accuracy: Math.round(accuracy), errors: len - correct, time: Math.round(timeSec), }; } }

4.5 Vue 3 游戏组件实现

packages/electron-app/src/renderer/src/components/GameView.vue：

<template> <div class="game-container"> <div class="stats-bar"> <div class="stat">WPM: {{ result.wpm }}</div> <div class="stat">准确率: {{ result.accuracy }}%</div> <div class="stat">错误: {{ result.errors }}</div> <div class="stat">时间: {{ result.time }}s</div> </div> <div class="text-display" ref="textRef"> <span v-for="(char, index) in currentText" :key="index" :class="getCharClass(index)"> {{ char }} </span> </div> <input v-model="userInput" @input="onInput" @keydown.enter="onSubmit" class="input-field" autofocus placeholder="开始打字..." /> </div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted, computed } from 'vue'; import { TypingEngine } from 'shared/typing-engine'; const props = defineProps<{ text: string; }>(); const currentText = ref(props.text); const userInput = ref(''); const result = ref({ wpm: 0, accuracy: 0, errors: 0, time: 0, }); const engine = new TypingEngine(); onMounted(() => { engine.start(currentText.value); }); const getCharClass = (index: number) => { if (index >= userInput.value.length) return 'normal'; if (userInput.value[index] === currentText.value[index]) return 'correct'; return 'error'; }; const onInput = () => { if (userInput.value.length <= currentText.value.length) { engine.input(userInput.value[userInput.value.length - 1]); } }; const onSubmit = () => { const res = engine.end(); result.value = res; // 重置游戏 setTimeout(() => { userInput.value = ''; engine.start(currentText.value); }, 2000); }; </script> <style scoped> .game-container { padding: 20px; max-width: 800px; margin: 0 auto; } .stats-bar { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 18px; font-weight: bold; } .text-display { font-family: 'Courier New', monospace; font-size: 24px; line-height: 1.6; margin-bottom: 20px; min-height: 120px; } .text-display span { transition: all 0.1s; } .text-display .correct { color: #28a745; } .text-display .error { color: #dc3545; text-decoration: underline; } .input-field { width: 100%; padding: 12px; font-size: 20px; border: 2px solid