键盘战士：我的 Qwen Coder 挑战赛参赛项目

项目简介

今天很荣幸向大家介绍我为 Qwen Coder 挑战赛准备的创意项目 —— “键盘战士 (Keyboard Warrior)”。这是一款专为学习和练习小鹤双拼输入法而设计的桌面应用程序。

在当今快节奏的数字生活中，高效的中文输入是许多内容创作者、程序员和文字工作者的必备技能。双拼输入法，特别是像“小鹤双拼”这样优化布局的方案，因其高效性而备受青睐。然而，从全拼切换到双拼，需要大量的练习来熟悉键位和肌肉记忆。

"键盘战士"正是为了解决这一痛点而诞生的。它不仅仅是一个简单的打字练习器，更像是一款结合了游戏化元素和实时反馈机制的“训练模拟器”，帮助用户在沉浸式的赛博朋克氛围中，快速掌握小鹤双拼，提升打字速度与准确率，最终成为一名真正的“键盘战士”。

项目初始化

项目开发的第一步是搭建基础框架。我使用了“Vibe Coding”的方式，即通过自然语言描述设计意图和期望的行为，让 AI 辅助理解和生成代码。以下是我用于初始化项目的提示词：

Vibe Coding 提示词 (项目初始化):

"我需要创建一个名为’键盘战士 (Keyboard Warrior)'的 Tauri 2.0 桌面应用程序。请帮我生成完整的项目脚手架。技术栈要求如下：

1. 前端框架: Vue 3 (使用 Composition API 和 TypeScript)。
2. UI 库: Tailwind CSS。
3. 构建工具: Vite。
4. 包管理器: pnpm。
5. 状态管理: Pinia (用于全局状态管理) 和 pinia-plugin-persistedstate (用于状态持久化)。
6. Tauri 后端: 使用 Rust。
   请生成符合上述要求的 Tauri + Vite + Vue 3 项目结构和基础配置文件，包括vite.config.ts, tailwind.config.ts, tsconfig.json, src/main.ts, src/App.vue等。前端入口index.html应位于项目根目录。"

AI 根据提示词生成了项目代码，并参考 Tauri 官方文档 进行了必要的调整。项目成功初始化，生成了包括前端的src目录和 Tauri 后端的src-tauri目录在内的完整结构，并配置好了 Vue、TypeScript、Tailwind CSS 和 Vite。执行 pnpm install 安装依赖后，通过 pnpm run tauri dev 成功启动了开发服务器，验证了初始化的成功。

通过这种 AI 辅助的 Vibe Coding 方式，我快速搭建了一个结构清晰、技术选型明确的 Tauri 项目基础，为后续的功能开发和 UI 设计奠定了坚实的基础。

功能设计

项目初始化后，我开始进行核心功能的设计。目标是创建一个既实用又有趣的小鹤双拼练习工具。我继续使用“Vibe Coding”的方式来设计和实现这些功能。

核心功能模块

1. 多模式练习：

   • 小鹤双拼专项练习：提供基于小鹤双拼编码规则生成的练习文本，帮助初学者熟悉键位。
   • 文章练习：使用真实文章段落，提升在实际场景下的输入能力。

2. 实时统计面板：

   • WPM (Words Per Minute)：实时计算并显示用户的打字速度。
   • 准确率 (Accuracy)：计算并以颜色区分（绿>=90%, 黄>=80%, 红<80%）显示准确率。
   • 练习时间：显示当前练习的持续时间。
   • 击键次数、错误次数、正确次数：提供更详细的输入数据。
   • COMBO 连击系统：连续正确输入时，显示并增加 COMBO 计数，增加趣味性。

3. 学习辅助：

   • 参考键位图：直观显示小鹤双拼的键位布局，鼠标悬停可查看详细信息，随时辅助学习。

AI 辅助功能实现 (Vibe Coding 提示词)

在进行功能实现时，我使用了“Vibe Coding”的方式，即通过自然语言描述设计意图和期望的行为，让 AI 辅助理解和生成代码。以下是一些关键功能的实现提示词：

• 状态管理 (gameStore)：

  “创建一个基于 Pinia 的 store (gameStore)，用于管理全局状态。状态应包括：当前模式(currentMode)、用户输入(userInput)、目标文本(targetText)、是否完成(isFinished)、开始时间(startTime)、已用时间(elapsedTime)、是否正在计时(isTiming)、当前连击数(combo)、最高连击数(maxCombo)。”
  “为 gameStore 添加持久化支持，使用 pinia-plugin-persistedstate，将关键状态保存到 localStorage。”

• 核心练习逻辑 (useShuangpinPractice)：

  “创建一个 Vue Composable (useShuangpinPractice)，封装打字练习的核心逻辑。它应返回响应式的状态引用（如 currentMode, userInput 等，直接来自 store）和计算属性（如 accuracy, wpm, practiceTime, errorCount 等）。”
  “在 useShuangpinPractice 中实现 handleInput(newValue)方法。该方法应在用户首次输入时启动计时器(setInterval)，根据输入内容更新 combo（正确输入+1 并更新 maxCombo，错误输入重置为 0），并在用户完成所有文本输入时标记 isFinished 为 true 并停止计时。”
  “实现 resetPractice()方法，重置所有练习相关状态（userInput, isFinished, startTime, elapsedTime, isTiming, combo, maxCombo）并根据 currentMode 设置新的 targetText。”
  “实现 switchMode(mode)方法，切换 currentMode 并调用 resetPractice。”

• 实时统计计算 (useShuangpinPractice)：

  “在 useShuangpinPractice 中，使用 Vue 的 computed 属性计算以下指标：”
  “1. accuracy: 准确率 = (正确字符数 / 用户输入总长度) * 100%”
  “2. wpm: 每分钟单词数 = (正确字符数 / 5) / (练习时间(分钟))”
  “3. practiceTime: 练习时间 = elapsedTime + (如果正在计时则为 Date.now() - startTime)”
  “4. errorCount: 错误字符数 = 用户输入中与目标文本不匹配的字符数量”
  “5. correctCount: 正确字符数 = 用户输入中与目标文本匹配的字符数量”
  “所有计算需考虑边界情况，如用户输入长度超过或少于目标文本。”

UI 设计

UI 设计旨在营造一个沉浸式的赛博朋克风格体验，同时保证信息清晰易读和操作便捷。UI 的实现同样大量使用了“Vibe Coding”的方式。

整体布局与风格

• 赛博朋克美学：采用深色背景（#0a0a0a, #1a1a1a），搭配霓虹色调（#00e5ff 蓝色，#00ff9d 绿色，#bd00ff 紫色，#ff0055 红色）。大量使用边框、发光效果和半透明背景，营造科技感和未来感。
• 三栏式响应式布局：
  • 左侧 HUD：垂直排列模式切换按钮和键位图入口，可折叠。
  • 中央主内容区：显示练习文本和用户输入框，是交互的核心区域。
  • 右侧 HUD：垂直排列详细统计数据，可折叠。
  • 顶部 HUD：显示核心指标（模式、WPM、准确率、时间）和 COMBO。
  • 底部状态栏（简化）：可显示核心统计数据摘要。

组件设计

• 动态背景：使用 CSS 动画创建流动的星空和霓虹网格背景，增强沉浸感。
• HUD 组件：
  • 按钮：采用赛博朋克风格的透明背景、发光边框按钮，悬停和点击时有动画反馈。
  • 数据面板：使用半透明背景和发光边框，内部数据清晰展示。
  • 进度条/经验条：使用渐变色（青到紫）的进度条表示练习进度。
• 练习文本显示 (PracticeTextDisplay)：
  • 未输入字符：默认色。
  • 正确字符：绿色高亮。
  • 错误字符：红色下划线或背景。
  • 当前输入位置：黄色高亮背景。
• 用户输入区域 (UserInputArea)：
  • 一个样式优化的<textarea>，具有凹陷效果和聚焦时的发光边框。
• 参考键位图 (KeyboardReference)：
  
  _ 弹出式模态框，
  显示完整的 26 键键盘布局。
  _ 每个键位显示对应的声母或韵母。 * 鼠标悬停时显示完整信息。
• 动画与音效：
  • COMBO 动画：COMBO 数字增加时有缩放和发光的脉冲动画。
  • 音效反馈：正确输入、错误输入、COMBO 达成、练习完成时播放不同的音效（通过 Web Audio API 实现）。

AI 辅助 UI 实现 (Vibe Coding 提示词)

在 UI 设计和实现过程中，我也大量使用了 Vibe Coding 提示词来指导 AI 生成代码和样式。以下是我为实现当前 UI 效果所使用的详细 Vibe Coding 提示词：

1. 整体布局与动态背景

“创建一个 Vue 应用根组件 App.vue。它应该包含一个全屏的动态背景和一个用于渲染路由内容的 <router-view> 区域。”
“动态背景应使用 CSS 实现，包含以下效果：”
“1. 深色星空背景：使用 radial-gradient 创建一个从深蓝色到黑色的径向渐变作为基础背景。”
“2. 多层流动星星：创建至少 3 层星星动画，使用 radial-gradient 在伪元素上绘制白色小点，并通过 background-position 和 animation 让它们以不同速度向右下角移动，模拟星空流动效果。”
“3. 霓虹网格线：在另一层上使用 linear-gradient 创建半透明的青色水平和垂直线条网格，线条间距为 30px，透明度约为 0.1。”
“所有这些背景效果应通过 Tailwind CSS 类或 <style> 标签中的 CSS 实现，并确保它们位于内容的下层 (z-index)。”

2. 游戏主页面 GamePage.vue

“创建一个 Vue 组件 GamePage.vue，作为游戏的主要界面。它应实现一个三栏式布局，包含顶部 HUD、左侧 HUD、中央游戏区、右侧 HUD 和一个键盘参考图模态框。”
“布局要求：”
“1. 绝对定位：使用 position: absolute 和 z-index 来精确控制各元素的位置和层级。”
“2. 顶部 HUD：固定在页面顶部，跨越整个宽度。水平排列左侧（模式信息和菜单折叠按钮）、中央（核心指标 WPM、准确率、时间）和右侧（音乐控制、返回按钮、COMBO 计数器）内容。”
“3. 左侧 HUD：固定在页面左侧中央区域，包含玩家状态（WPM、准确率、时间）和模式选择器。当用户点击顶部菜单折叠按钮时，应能平滑地滑入/滑出视图。”
“4. 右侧 HUD：固定在页面右侧中央区域，包含详细统计数据（击键数、错误数、正确数、最高 COMBO）。同样应支持滑入/滑出动画。”
“5. 中央游戏区：位于页面水平和垂直居中，包含练习文本显示区域和用户输入区域。”
“6. 键盘参考图：一个覆盖全屏的模态框，在用户点击相应按钮时显示/隐藏。”
“使用 Tailwind CSS 实现布局，并为 HUD 的滑入/滑出动画定义 CSS @keyframes。”

3. 赛博朋克样式库

“在全局样式文件 src/styles.css 中，定义一套可复用的赛博朋克风格 CSS 类：”
“1. .cyber-button：用于较大的主要按钮。”
" - 背景：透明 (background: transparent)。"
" - 边框：1px 实线，颜色为赛博朋克蓝 (#00e5ff)，可带有轻微透明度。"
" - 文字：赛博朋克蓝，加粗。"
" - 形状：使用 clip-path: polygon() 创建一个带有切角的六边形或盾形。"
" - 悬停效果：边框颜色变亮，增加 box-shadow 发光效果，内部添加一个从底部向上展开的渐变色背景 (transform: scaleY)。"
" - 激活/选中效果：边框有更强的发光 (box-shadow)，内部渐变背景保持展开状态。"
“2. .cyber-button-mini / .cyber-button-small：用于较小的次要按钮或控制按钮。”
" - 背景：透明。"
" - 边框：1px 实线，赛博朋克蓝。"
" - 文字：赛博朋克蓝，加粗。"
" - 形状：圆角矩形 (border-radius)。"
" - 悬停效果：背景变为浅蓝色半透明 (rgba(0, 229, 255, 0.1))，增加 box-shadow 发光效果。"
“3. .cyber-panel：用于包裹统计数据或设置项的面板。”
" - 背景：深灰色 (#1a1a1a) 半透明 (background: rgba(26, 26, 26, 0.7))。"
" - 边框：1px 实线，赛博朋克蓝，透明度约 30% (border: 1px solid rgba(0, 229, 255, 0.3))。"
" - 圆角：轻微圆角 (border-radius)。"
" - 模糊效果：添加 backdrop-filter: blur(10px) 实现毛玻璃效果。"
" - 阴影：添加轻微的 box-shadow。"
“4. .neon-text：为文字添加霓虹发光效果。”
" - 使用 text-shadow，包含多层不同模糊度和扩散度的白色和赛博朋克色阴影。例如：text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff;"
“5. .hud-item：用于 HUD 中的单个数据项。”
" - 继承 .cyber-panel 的大部分样式。"
" - 内边距：适中 (padding)。"
" - 内部元素间距：使用 flex 和 gap 或 margin 控制文本和图标间距。"

4. 顶部 HUD (TopHud.vue)

“创建 TopHud.vue 组件。”
“布局与内容：”
“1. 使用 Flexbox (flex justify-between items-center) 创建水平布局。”
“2. 左侧区域：包含当前模式名称（如 ‘小鹤双拼模式’）和一个用于折叠/展开侧边栏的按钮。模式名称使用赛博朋克蓝色。折叠按钮使用 .cyber-button-mini 样式。”
“3. 中央区域：水平排列三个核心指标。每个指标包含一个小标题（‘WPM’, ‘准确率’, ‘时间’）和一个大字体的值。”
" - ‘WPM’ 值使用赛博朋克蓝色。"
" - ‘准确率’ 值根据数值动态改变颜色：>=90% 为绿色 (text-green-400)，>=80% 为黄色 (text-yellow-400)，<80% 为红色 (text-red-400)。"
" - ‘时间’ 值使用紫色 (text-purple-400)。"
“4. 右侧区域：水平排列音乐控制按钮、返回按钮和 COMBO 计数器。”
" - 音乐按钮和返回按钮使用 .cyber-button-mini 样式。"
" - COMBO 计数器：当 COMBO 大于 0 时显示 ‘COMBO x{数值}’。使用 .neon-text 样式和赛博朋克蓝色。为 COMBO 增加事件添加一个缩放 (scale) 和发光 (text-shadow) 的 @keyframes 动画，并通过 Vue 的 :class 绑定在 COMBO 增加时触发动画。"

5. 侧边 HUD (LeftHud.vue & RightHud.vue)

“LeftHud.vue：”
“布局与内容：”
“1. 使用绝对定位 (absolute) 固定在左侧中央 (left-4 top-1/2 transform -translate-y-1/2)。”
“2. 玩家状态区域：垂直排列三个 .hud-item。”
" - WPM 项：图标为 ‘⚡’，值使用 .jump-animation (一个轻微的上下跳动动画)。"
" - 准确率项：图标为 ‘🛡️’。当准确率低于 90% 时，为其添加一个裂痕效果的 CSS 类（可使用 background-image 和 svg 实现）。"
" - 时间项：图标为 ‘⏰’。"
“3. 模式选择器区域：”
" - 标题 ‘练习模式’ 居中显示，使用赛博朋克蓝色。"
" - 使用 v-for 循环渲染模式按钮，按钮使用 .cyber-button 样式。"
" - 当前选中的模式按钮应添加 .active 类，以显示激活状态。"
“4. 提示按钮区域：居中放置一个 ‘⌨️ 键位图’ 按钮，使用 .cyber-button-small 样式。”
“RightHud.vue：”
“布局与内容：”
“1. 使用绝对定位 (absolute) 固定在右侧中央 (right-4 top-1/2 transform -translate-y-1/2)。”
“2. 垂直排列四个 .hud-item，分别显示 ‘击键数 (⌨️)’, ‘错误数 (❌)’, ‘正确数 (✅)’, ‘最高 COMBO (🔥)’。”
“3. 对应的数值颜色：击键数 (赛博朋克蓝), 错误数 (红色), 正确数 (绿色), 最高 COMBO (紫色)。”

6. 练习文本显示 (PracticeTextDisplay.vue)

“创建 PracticeTextDisplay.vue 组件。”
“功能与样式：”
“1. 接收 targetText (目标文本) 和 userInput (用户输入) 作为 props。”
“2. 渲染 targetText 中的每个字符，并根据其与 userInput 的匹配情况应用不同样式：”
" - 未输入：默认的灰色 (text-gray-500)。"
" - 当前输入位置：用户光标所在位置的字符，使用赛博朋克蓝色高亮 (text-cyan-300)。"
" - 正确输入：已输入且匹配的字符，使用绿色高亮 (text-green-400 font-bold)。"
" - 错误输入：已输入但不匹配的字符，使用红色高亮 (text-red-500 font-bold)。"
“3. 容器样式：居中对齐 (text-center)，添加 .cyber-panel 样式，并增加 backdrop-blur-sm 和 shadow-xl。”
“4. 字符显示：使用等宽字体 (font-mono) 和较大的字号 (text-2xl)，增加字间距 (tracking-wider) 和行高 (leading-loose)。”
“5. 自动滚动：当用户输入时，组件应能自动滚动，使当前输入的字符保持在可视区域中央。这可以通过监听 userInput 的变化，获取当前字符的 DOM 元素位置，并调用容器的 scrollTo 方法实现。”
“6. 粒子效果（可选）：为正确输入的字符添加一个简单的粒子爆炸动画，以增强反馈感。可以在每个正确字符的 <span> 内部添加一个绝对定位的 <div>，并使用 @keyframes 定义一个 animate-ping 或自定义的缩放淡出动画。”

7. 用户输入区域 (UserInputArea.vue)

“创建 UserInputArea.vue 组件。”
“功能与样式：”
“1. 核心是一个 <textarea> 元素，通过 v-model 与父组件的 userInput 进行双向绑定。”
“2. 样式：”
" - 宽度：100% (w-full)。"
" - 背景：深灰色半透明 (bg-gray-900 bg-opacity-70)。"
" - 文字：浅灰色 (text-gray-200)。"
" - 边框：默认为半透明的赛博朋克蓝色边框 (border-2 border-cyan-500/30)。"
" - 聚焦状态：边框颜色加深为纯赛博朋克蓝 (focus:border-cyan-500)，并添加一个半透明的发光效果 (focus:ring-2 focus:ring-cyan-500/50)。移除默认轮廓 (focus:outline-none)。"
" - 形状：大圆角 (rounded-xl)。"
" - 阴影：添加 shadow-lg。"
" - 凹陷效果：使用 box-shadow: inset ... 创建内部阴影。"
" - 过渡动画：为所有属性添加 transition-all。"
“3. 占位符：‘开始输入以进行练习…’。”
“4. 状态：当练习完成 (isFinished) 时，禁用 <textarea>。”
“5. 交互：”
" - 提供一个 ‘重新开始’ 按钮，使用 .cyber-button 样式。"
" - 显示练习状态提示，如 ‘继续输入以开始练习’ 或 ‘练习完成！’。"
" - 支持 ref 暴露一个 focus() 方法，供父组件调用以自动聚焦输入框。"
" - 处理中文输入法的 compositionstart 和 compositionend 事件，确保输入法候选框正常工作。"

8. 键盘参考图 (KeyboardReference.vue)

“创建 KeyboardReference.vue 组件。”
“功能与样式：”
“1. 模态框背景：全屏覆盖 (fixed inset-0)，半透明黑色背景 (bg-black bg-opacity-70)，并带有模糊效果 (backdrop-blur-sm)。”
“2. 内容容器：居中放置一个 .cyber-panel 样式的容器 (bg-gray-900 border-2 border-cyan-500 rounded-xl)，最大宽度限制 (max-w-4xl)，并带有内边距。”
“3. 关闭按钮：在容器右上角放置一个 ‘✕’ 按钮，使用较大的字体和赛博朋克蓝色，悬停时颜色变浅。”
“4. 标题：居中显示 ‘小鹤双拼键位图’，使用较大的字体和赛博朋克蓝色。”
“5. 键位布局：”
" - 使用 CSS Grid 将布局分为左右手两个区域 (md:grid-cols-2)。"
" - 每个区域包含一个标题 (‘左手区域’, ‘右手区域’) 和一个 5 列的网格 (grid grid-cols-5 gap-2)。"
" - 每个键位是一个 .key-item，包含主键 (key-main) 和韵母 (key-sub)。"
" - .key-item 样式：深灰色背景 (bg-gray-800)，半透明赛博朋克蓝边框 (border border-cyan-500/30)，圆角，内边距，居中对齐。"
" - .key-main：较大的字体，加粗，赛博朋克蓝色。"
" - .key-sub：较小的字体，紫色。"
" - 悬停效果：.key-item 悬停时轻微上移 (transform: translateY(-3px))，增加 box-shadow 发光效果，边框颜色加深。"

App Logo 设计：
值得一提的是，应用的 Logo 也是由 AI 生成的。我通过通义千问(Qwen Chat) 的Qwen-Image（通义万相）功能，输入了详细的视觉提示词，成功生成了极具辨识度和质感的“键盘战士”徽章图标。

提示词：

构图与元素:

主体形状: 整个图标是一个充满力量感的六边形金属徽章（比传统盾形更具科技感）。徽章边缘有凌厉的切角和倒角，反射着环境光，质感十足。
中央图案: 徽章的中央是一个用键盘元素构成的 未来武士面具或头盔。
额头部分是一枚拉丝金属质感的 Shift 键。
眼睛是两道狭长的缝隙。
脸颊部分由几枚倾斜的普通键帽拼接而成，形成硬朗的轮廓。
核心光效: 从面具狭长的眼缝中，透出酷炫的 RGB 流光（品红色与青色交织），仿佛侠客正在黑暗中注视着你，充满了神秘感和压迫感。
点睛之笔: 在额头的 Shift 键下方，用激光蚀刻技术，低调地刻印着一只极简线条的 小鹤侧影 图案，作为“小鹤双拼”的独特印记。
色彩与氛围:

主色调：炮铜色（Gunmetal）、暗银色、RGB 霓虹色（品红/青）。
氛围：神秘、酷炫、充满荣誉感。这不仅是一个 App 图标，更像是一个顶级玩家才能获得的成就徽章。
情感与寓意:

“戴上徽章，你就是键盘世界的传奇。” 这个图标在召唤玩家：加入我们，通过你的技术，赢得属于你的荣耀，成为一名真正的“键盘侠”。

创新亮点

1. 专注小鹤双拼：市面上的双拼练习工具往往通用性较强，但缺乏对特定方案（如小鹤双拼）的深度优化。本项目专门为小鹤双拼设计练习内容和键位图，更具针对性。
2. 沉浸式体验：将枯燥的打字练习包装在赛博朋克的视觉主题下，并通过连击、音效等游戏化元素，让练习过程不再单调。
3. 实时数据反馈：提供 WPM、准确率、击键数、错误数等多维度的实时统计数据，帮助用户清晰了解自己的练习效果。
4. 状态持久化：利用 Pinia 插件实现状态持久化，用户的练习进度在应用重启后得以保留。
5. AI 赋能开发：深度整合 Qwen Code 的 Qwen3-Coder-Plus 模型，展示了 AI 在现代前端开发工作流中的强大助力。从项目初始化、功能实现到 UI 设计，大量采用了“Vibe Coding”方式，通过自然语言提示词驱动 AI 生成代码，极大地提升了开发效率和创造力。

结语

"键盘战士"是我对高效中文输入学习的一次探索和实践。它融合了我对双拼输入法的理解、对游戏化学习的兴趣，以及对前沿技术（如 Tauri 和 AI 辅助编程）的热情。我相信，通过不断迭代和优化，它将成为双拼学习者手中一款强大的利器。

整个开发过程充分体现了 AI 在现代软件开发中的巨大潜力。从项目脚手架的生成，到核心功能逻辑的实现，再到赛博朋克风格 UI 的构建，AI 都扮演了至关重要的角色。特别是“Vibe Coding”这种工作方式，让我能够更专注于创意和设计本身，而将具体的代码实现交给 AI 来完成，极大地提升了开发效率和创造力。

感谢 Qwen Coder 挑战赛提供这个平台，也特别感谢Qwen Code 的 Qwen3-Coder-Plus模型在整个开发过程中的卓越贡献。希望各位评委和开发者朋友喜欢我的项目！