Claude Code 交互式快速入门

一个交互式的 Claude Code 命令行学习平台，通过模拟真实终端环境帮助开发者快速掌握 Claude Code 的核心命令。

React TypeScript Vite Tailwind CSS

中文文档

✨ 特性

• 🖥️ 真实终端模拟 - 仿真的命令行界面，提供沉浸式学习体验
• 📚 结构化学习模块 - 分步骤引导学习 Claude Code 内置命令
• 🏆 成就系统 - 通过完成目标解锁徽章，激励持续学习
• 📊 进度追踪 - 自动保存学习进度，随时继续学习
• 📱 响应式设计 - 完美适配桌面端和移动端设备
• 💾 本地存储 - 无需后端，所有数据存储在浏览器本地

🚀 快速开始

环境要求

• Node.js 18+ 或 20+
• npm 9+ 或 10+

安装依赖

git clone https://github.com/yourusername/claude-code-interactive-tutorial.git
cd claude-code-interactive-tutorial
npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看应用。

构建生产版本

npm run build

构建产物将输出到 dist 目录。

📖 学习模块

模块 1：内置命令

涵盖 Claude Code 的所有核心内置命令：

• /config - 打开配置界面
• /clear - 清除对话历史
• /compact - 压缩对话历史
• /context - 查看上下文使用情况
• /cost - 查看令牌使用统计
• /doctor - 检查安装健康状况
• /export - 导出对话
• /help - 获取帮助信息
• /init - 初始化项目
• /mcp - 管理 MCP 连接
• /memory - 编辑内存文件
• /model - 切换 AI 模型
• /permissions - 查看权限设置
• /plan - 进入规划模式
• /resume - 恢复会话
• /stats - 查看使用统计
• /status - 查看系统状态
• /tasks - 管理后台任务
• /theme - 切换主题
• /todos - 查看待办事项
• /usage - 查看订阅使用情况

🎯 核心功能

虚拟终端模拟器

• 仿真的命令行界面
• 支持命令输入和输出显示
• 预设命令快速执行
• 命令历史记录
• 清屏和复制功能

学习进度追踪

• 实时显示整体完成进度
• 每个模块和步骤的完成状态
• 已掌握命令统计
• 数据自动保存到 localStorage

成就系统

成就	描述
🎓 初学者	完成第一个学习模块
🌟 进阶学习者	完成 50% 的学习进度
👑 Claude Code 大师	完成所有学习模块
💻 第一次交互	成功执行第一条命令
⚡ 命令大师	掌握所有常用命令

🏗️ 项目结构

claude-code-tutorial/
├── src/
│   ├── components/         # React 组件
│   │   ├── Terminal/      # 虚拟终端组件
│   │   ├── Sidebar/       # 侧边栏导航
│   │   ├── Module/        # 学习模块内容
│   │   ├── Progress/      # 进度和成就显示
│   │   ├── Layout/        # 布局组件
│   │   └── Help/         # 帮助系统
│   ├── hooks/            # 自定义 Hooks
│   │   ├── useTerminal.ts    # 终端逻辑
│   │   ├── useProgress.ts    # 进度管理
│   │   └── useStorage.ts    # 存储封装
│   ├── context/          # React Context
│   │   ├── AppContext.ts     # 应用全局状态
│   │   └── AppProvider.tsx   # Context 提供者
│   ├── data/             # 静态数据
│   │   ├── modules.ts         # 学习模块定义
│   │   ├── commands.ts        # 命令库
│   │   └── achievements.ts    # 成就定义
│   ├── types/            # TypeScript 类型定义
│   ├── App.tsx           # 主应用组件
│   └── main.tsx          # 应用入口
├── public/               # 静态资源
├── index.html            # HTML 入口
├── package.json          # 项目配置
├── vite.config.ts        # Vite 配置
└── tsconfig.json        # TypeScript 配置

🛠️ 技术栈

• React 19 - 用户界面框架
• TypeScript 5.9 - 类型安全
• Vite 7 - 构建工具
• Tailwind CSS v4 - 样式框架
• React Icons - 图标库

📦 可用命令

命令	描述
npm run dev	启动开发服务器
npm run build	构建生产版本
npm run preview	预览生产构建
npm run lint	运行代码检查

🌐 浏览器兼容性

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📝 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

🙏 致谢

• Claude Code - Anthropic 官方文档
• xterm.js - 终端模拟器库
• Tailwind CSS - 实用优先的 CSS 框架

📮 联系方式

如有问题或建议，欢迎通过以下方式联系：

• 提交 Issue

---

如果这个项目对你有帮助，请给它一个 ⭐️