想要保持哪怕片刻的专注，似乎dou成了一种奢侈的“超Neng力”。你有没有过这样的时刻：明明坐在电脑前，手放在键盘上，思绪却早Yi飞到了九霄云外或者不自觉地就拿起了手机开始刷那些毫无营养的短视频？这并非你的意志力薄弱，而是我们的大脑在过载的信息面前，正在发出求救信号。

为了对抗这种普遍的“现代病”，我们决定不再纸上谈兵，而是直接动手。经过无数个日夜的打磨，一款基于Web端的专注力训练工具——舒尔特方格在线版，终于正式上线了！这不仅仅是一个简单的网页游戏，它融合了现代前端技术栈与经典的认知心理学理论，旨在通过科学的手段，帮你找回那种心流涌动的感觉。

舒尔特方格：从飞行员选拔到你的桌面

在深入代码实现之前，我们得先聊聊这背后的“硬核”理论。舒尔特方格并非什么新潮的发明，它Zui早由德国心理学家舒尔特提出，原本是为了测试和训练飞行员的注意力集中Neng力。想象一下在万米高空，驾驶舱内仪表盘数据跳动，窗外气流瞬息万变，飞行员必须具备在极短时间内捕捉关键信息的Neng力。

标准的舒尔特方格是一个5x5的表格，里面随机散布着1到25个数字。规则听起来简单得近乎幼稚：你需要按顺序，用眼睛迅速找到1，然后是2，直到25。但当你真正上手时你会发现，这简直是对大脑的一场“暴击”。你的眼睛会不由自主地乱飘，你的手指会点击错误的数字，那种急躁感会瞬间涌上心头。

但这正是训练的意义所在。对于孩子来说良好的专注力是学习的基石；对于成年人，这则是提升工作效率的利器。特别是对于那些经常遗失物品、容易被外在刺激转移注意力，甚至被注意力缺陷困扰的人群，这种高强度的视觉搜索训练，Neng够有效强化大脑的额叶功Neng。当然这并不是说它Neng替代医疗手段，但作为一种辅助的“大脑健身房”，它的效果是经过时间验证的。

技术选型：为什么是Vue 3 + IndexedDB？

既然是Web版训练，技术架构的稳固性直接决定了用户体验的流畅度。我们不想Zuo一个打开就要加载半天的“重型”应用，也不想Zuo一个数据一刷新就消失的“一次性”玩具。因此，在技术选型上，我们经过了一番深思熟虑。

前端框架方面我们毫不犹豫地选择了Vue 3配合Vite。Vue 3的响应式系统在处理这种高频交互时表现得游刃有余。而Vite带来的极速冷启动，让开发过程变得异常愉悦，这种愉悦感Zui终也转化为了用户打开页面时的秒开体验。

但在数据存储上，我们遇到了一个挑战。用户的训练记录成百上千条，Ru果仅仅存储在LocalStorage里不仅容量有限，而且同步操作会阻塞主线程，导致页面卡顿。这显然是不可接受的。于是我们将目光投向了浏览器端的“重型武器”——IndexedDB。

IndexedDB：构建本地数据仓库

IndexedDB允许我们在浏览器中建立一个结构化、高性Neng的数据库。为了确保数据查询的效率，我们在初始化数据库时就精心设计了索引结构。

// services/indexedDB.js
const DB_NAME = 'shuerte_db'
const DB_VERSION = 1
const STORE_NAME = 'records'
export function initDB {
  return new Promise => {
    const request = indexedDB.open
    request.onupgradeneeded =  => {
      const db = event.target.result
      if ) {
        const store = db.createObjectStore(STORE_NAME, {
          keyPath: 'id',
          autoIncrement: true,
        })
        // 创建索引以支持高效查询
        store.createIndex
        store.createIndex
        store.createIndex
        store.createIndex
      }
    }
    request.onsuccess =  => resolve
    request.onerror =  => reject
  })
}

你kan，这段代码虽然枯燥，但它却是整个应用的基石。通过创建`timestamp`和`result`等索引，我们在后续生成统计图表时即使数据量达到数万条，也Neng瞬间提取出所需信息。这种“未雨绸缪”的设计，正是资深开发者的直觉体现。

核心逻辑：打造极致流畅的交互体验

一个训练工具，Ru果交互卡顿，那简直就是灾难。为了保证核心逻辑的纯粹与高效，我们将游戏的状态管理封装在了一个组合式函数`useGameLogic`中。这里我们采用了一个大胆的设计——模块级单例。

通常在Vue中，我们习惯将状态放在组件的`data`或`ref`里。但在舒尔特方格中，状态需要在不同的组件间共享。Ru果在组件间层层传递props，代码会变得臃肿不堪。因此，我们在模块级别直接定义了状态：

// composables/useGameLogic.js
import { ref, computed, onUnmounted } from 'vue'
// Singleton state - 在模块级别创建，确保全局唯一
const gridNumbers = ref
const nextNumber = ref
const isPlaying = ref
const timeRemaining = ref
const elapsedTime = ref
const selectedMode = ref
const GAME_SIZE = 5
const TOTAL_NUMBERS = GAME_SIZE * GAME_SIZE
// Fisher-Yates 洗牌算法
const shuffleArray =  => {
  for  {
    const j = Math.floor * )
    ;, array] = , array]
  }
}
const generateGrid =  => {
  const numbers = Array.from => i + 1)
  shuffleArray
  gridNumbers.value = numbers
  return numbers
}

这种设计带来的好处是显而易见的：状态逻辑与UI解耦。无论你是想在PC端玩，还是想在移动端嵌入，核心逻辑dou不需要Zuo任何改动。而且，Fisher-Yates洗牌算法保证了数字排列的真正随机性，这对于训练的公平性至关重要。

两种模式，两种心境

为了照顾不同水平的训练者，我们精心设计了两种截然不同的模式：限时模式和不限时模式。

对于初学者，或者那些容易焦虑的人来说不限时模式是一个温柔的起点。你Ke以按照自己的节奏，慢慢寻找数字，感受从杂乱中建立秩序的过程。而对于那些追求极致、想要挑战自我反应速度的“老手”，限时模式则是一场肾上腺素的狂欢。

在代码实现上，我们通过计算属性`isUnlimitedMode`来动态切换计时器的逻辑：

// 检查是否为不限时模式
const isUnlimitedMode = computed => selectedMode.value === 'unlimited')
const startGame =  => {
  generateGrid
  nextNumber.value = 1
  elapsedTime.value = 0
  isPlaying.value = true
  if  {
    // 不限时模式：正计时
    timeRemaining.value = 0
    timerInterval.value = setInterval => {
      elapsedTime.value += 1
    }, 1000)
  } else {
    // 限时模式：倒计时
    timeRemaining.value = timedTotal.value
    timerInterval.value = setInterval => {
      timeRemaining.value -= 1
      if  {
        const record = endGame
        if  {
          onTimeoutCallback.value
        }
      }
    }, 1000)
  }
}

这种细微的逻辑分支，体现了我们对用户体验的极致追求。倒计时的滴答声，往往Neng激发出人类潜意识的求生欲，让你在Zui后几秒爆发出惊人的专注力。

视觉反馈与性Neng优化：让训练不再枯燥

Ru果只是黑底白字的数字，那未免太枯燥了。我们希望每一次点击douNeng给用户带来愉悦的反馈。这就涉及到了动画性Neng的优化。

在Web开发中，Zui忌讳的就是直接操作`top`、`left`或者`width`属性，因为这会触发浏览器的重排，消耗大量的CPU资源。为了达到丝滑的60fps，我们所有的动画dou严格限制在`transform`和`opacity`这两个属性上，确保Neng够利用GPU进行加速。

@keyframes slideUp {
  from { transform: translateY; opacity: 0; }
  to { transform: translateY; opacity: 1; }
}

此外为了还原标准的舒尔特方格体验，我们没有使用相对单位，而是使用了固定的像素值：

.grid-cell {
  width: 38px;  // 约 1cm
  height: 38px;
  font-family: 'SimSun', 'STSong', 'Songti SC', serif;
  font-size: 16px;
}

这种对细节的执着，或许只有强迫症程序员才Neng理解。但正是这些细节，决定了用户在使用时的舒适度。

胜利的喜悦：Canvas Confetti

当你在限时模式下在Zui后一秒成功点下“25”，那种如释重负的成就感需要被放大。我们引入了`canvas-confetti`库，在屏幕上炸开绚丽的彩带。

import confetti from 'canvas-confetti'
const fireConfetti =  => {
  const duration = 3000
  const animationEnd = Date.now + duration
  const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
  const interval = setInterval => {
    const timeLeft = animationEnd - Date.now
    if  return clearInterval
    const particleCount = 50 * 
    confetti({
      ...defaults,
      particleCount,
      origin: { x: Math.random * 0.5 + 0.25, y: Math.random - 0.2 },
    })
  }, 250)
}

这种即时的正向反馈，利用了多巴胺奖励机制，让用户在潜意识里对“完成训练”这件事产生期待，从而geng容易坚持下去。

数据可视化：kan见你的进步

没有数据的训练是盲目的。你今天比昨天快了吗？你的成功率在提升吗？为了回答这些问题，我们集成了Chart.js，将枯燥的记录转化为直观的图表。

通过Vue Router的动态导入，我们实现了页面级的代码分割，确保只有当用户点击“统计”页面时图表相关的代码才会被加载：

const routes = 

在统计页面你Ke以kan到训练结果的分布，以及Zui近成绩的趋势线。我们甚至设计了一套评级系统，根据你的完成时间给出S/A/B/C/D五个等级的评价。

const getRating =  => {
  const time = record.timeUsed
  if  {
    // 不限时模式：宽松标准
    if  return 'S'
    if  return 'A'
    if  return 'B'
    if  return 'C'
    return 'D'
  } else {
    // 限时模式：严格标准
    if  return 'S'
    if  return 'A'
    if  return 'B'
    if  return 'C'
    return 'D'
  }
}

不同模式采用不同的评级标准，确保了公平性。kan着自己的成绩从C慢慢爬升到S，那种成就感是任何言语dou无法替代的。

独特的“重练”机制

Zui后我想特别介绍一个我个人非常喜欢的功Neng——“重练”。hen多时候，我们在训练中失败，并不是因为专注力不够，而是因为那个随机生成的数字排列实在太刁钻了让人眼花缭乱。

在传统的舒尔特方格训练中，一旦结束，那个特定的排列就消失了。但在我们的Web版中，你Ke以选择历史记录中的任意一次训练，点击“重练”，系统会生成完全相同的数字排列让你 挑战。

// 重新训练：使用指定的 gridNumbers 开始游戏
const replayGame =  => {
  selectedMode.value = mode
  gridNumbers.value = gridNumbersArray // 复用原有排列
  nextNumber.value = 1
  elapsedTime.value = 0
  isPlaying.value = true
  // 启动对应模式的计时器...
}

这就像是在游戏中打Boss，第一次没打过记住了Boss的招式，第二次再来。这种“复仇”心理，往往Neng激发出geng强的专注力。

专注力，像肌肉一样Ke以锻炼

专注力并非与生俱来的天赋，它geng像是一块肌肉，通过科学的、持续的训练，完全Ke以变得强壮有力。这款Web版舒尔特方格训练工具，就是我们为你准备的“哑铃”。

目前，本项目源码Yi完全开源，技术栈为Vue 3 + Vite + TailwindCSS + IndexedDB。无论你是想提升自己的工作效率，还是想帮助孩子改善注意力状况，亦或是对前端技术实现感兴趣，dou欢迎你来体验和指正。

在线体验地址：younglina.wang/shulte 源码地址：github.com/younglina/s…

别再让注意力像流沙一样从指缝溜走，现在就开始，从1找到25，重新掌控你的大脑吧！

---