计算机宇宙探索器 / Computer Universe Explorer

一个用于帮助初学者构建“计算机世界观”的交互式探索应用。

🧭 项目背景

在计算机导论的第一节课中，学生通常会说出各种零散词汇：

C++ / Linux / Windows / AI / GPU / 前端 / 数据库 / JavaScript ...

但这些知识往往是碎片化的，缺乏整体认知结构。

本项目目标是：将用户输入的零散计算机词汇自动归类，并映射到一个结构化的“计算机世界地图”，帮助用户建立系统性认知。

🎯 项目目标

1. 构建计算机知识世界观 将计算机领域拆分为多个模块：

• 硬件
• 操作系统
• 编程语言
• 前端 / 后端
• 数据库
• 人工智能

2. 支持自由输入 用户可以输入任意词汇，例如：

• linux
• React
• GPU
• 深度学习

系统能够：

• 自动识别词汇
• 匹配到对应领域
• 点亮对应模块

3. 游戏化探索体验

• 输入词汇 -> 点亮知识节点
• 展示“探索进度”
• 鼓励用户持续探索

🧩 核心功能

1. 输入识别

• 支持大小写不敏感（Linux / linux）
• 支持中英文混合
• 支持模糊匹配

2. 语义匹配（轻量方案）

不使用模型训练（适合当前阶段），采用以下策略组合：

• 标准化处理
  • 全部转小写
  • 去除空格
• 同义词映射

{
  "ai": ["人工智能"],
  "js": ["javascript"],
  "gpu": ["显卡"]
}

• 模糊搜索（核心）
  • 使用 fuse.js
  • 支持拼写不完全正确也能匹配
  • 提升用户体验

3. 知识地图展示

可选方案：

• 模块卡片（初级）
• 树状结构（进阶）
• 可视化图谱（高级）

4. 点亮机制

• 未探索 -> 灰色
• 已匹配 -> 高亮
• 显示进度（例如：30%）

🛠 技术方案

基于你当前能力（Vue + TS + Node）：

前端

• Vue 3（Composition API）
• TypeScript
• Vite

UI

• TailwindCSS（推荐）或 Element Plus
• 简单动效（过渡 + 高亮）

状态管理

• Pinia

搜索 / 匹配

• fuse.js（模糊搜索核心库）

后端（可选）

• Node.js（Express）

用途：

• 存储词汇数据
• 未来扩展（用户记录等）

第一版可以不做后端（纯前端即可）。

📁 项目结构（建议）

src/
├── components/
│   ├── InputBox.vue
│   ├── KnowledgeMap.vue
│   └── NodeCard.vue
├── store/
│   └── knowledgeStore.ts
├── data/
│   └── knowledge.ts   // 知识结构 + 关键词
├── utils/
│   ├── normalize.ts
│   ├── matcher.ts
│   └── synonym.ts
└── views/
    └── Home.vue

🧠 知识结构设计（核心）

export const knowledgeMap = {
  硬件: ["cpu", "gpu", "内存", "intel"],
  操作系统: ["linux", "windows", "macos"],
  编程语言: ["c++", "java", "python", "javascript"],
  前端: ["html", "css", "vue", "react"],
  数据库: ["mysql", "mongodb"],
  人工智能: ["ai", "深度学习", "机器学习"]
};

🔄 核心流程

1. 用户输入词汇
2. 标准化处理（lowercase）
3. 同义词转换
4. fuse.js 模糊匹配
5. 匹配到知识模块
6. 更新 UI（点亮）

🚀 MVP（最小可运行版本）

第一阶段只需完成：

• 输入框
• 5~10 个知识分类
• fuse.js 模糊匹配
• 点亮 UI

这个版本就可以写进简历。

➕ 后续扩展（加分项）

1. 进度系统 “你已经探索了 40% 的计算机世界”

2. 词汇推荐 推荐用户未探索的词汇

3. 可视化升级 使用 D3.js / ECharts 做知识图谱

4. AI 增强（未来） 当前阶段不需要实现，可扩展：

• 使用 embedding 做语义匹配
• 或调用 AI API 分类

💡 项目亮点（面试重点）

你可以这样讲：

• 将计算机导论的知识结构抽象为“知识图谱”
• 使用轻量 NLP 方法（模糊匹配 + 同义词）实现输入识别
• 通过游戏化 UI 提升学习体验
• 重点在“认知建模”，而不是简单 CRUD

👥 适合人群

• 计算机初学者
• 想建立整体知识体系的人