AITeachAI - AI 技术知识学习平台

功能特性 • 技术栈 • 快速开始 • 配置说明 • 项目结构

---

🎯 项目简介

AITeachAI 是一个基于 DeepSeek API 的智能技术知识学习平台。通过点击按钮，你可以随机获取 1100+ 个主流技术知识点的详细讲解，并通过互动问答功能深入理解每个知识点。

核心特点

• 🎲 随机知识抽取 - 从 1100+ 主流技术知识点中随机学习
• 🤖 AI 智能讲解 - 基于 DeepSeek API 生成深入浅出的技术讲解
• 💬 互动问答 - 针对知识点进行追问，获得个性化解答
• 🎨 精美 UI 设计 - 青色科技感主题，流畅的动画效果
• 📚 智能推荐 - 一键点击预设问题，快速获取答案

---

✨ 功能特性

1. 技术知识学习

• 涵盖 8 大技术领域：AI/大模型、前端开发、编程语言、后端开发、数据库、云原生/DevOps、云平台服务、开发者工具
• 采用权重系统，优先推荐当前主流技术
• 每个知识点包含：概念概述、核心原理、生活类比、代码示例、应用场景、学习建议

2. 智能问答系统

• 生成知识点后，可针对内容自由提问
• 提供 4 个智能推荐问题，一键获取答案
• 流式响应，实时显示 AI 回答

3. 精美界面

• 深色主题 + 青色渐变强调色
• 毛玻璃效果卡片设计
• 流畅的动画过渡效果
• 完全响应式布局

---

🛠 技术栈

类别	技术
前端框架	React 18 + TypeScript
构建工具	Vite 5
样式方案	原生 CSS + CSS 变量
字体	Space Grotesk + JetBrains Mono
AI 服务	DeepSeek API
部署	静态托管（Vercel/Netlify 等）

---

🚀 快速开始

前置要求

• Node.js 20.19+ 或 22.12+
• npm / yarn / pnpm
• DeepSeek API Key

1. 克隆项目

git clone <your-repo-url>
cd AITeachAI

2. 安装依赖

npm install

3. 配置环境变量

创建 .env 文件：

cp .env.example .env

编辑 .env 文件，填入你的 DeepSeek API Key：

VITE_DEEPSEEK_API_KEY=your_deepseek_api_key_here

🔑 获取 API Key: 访问 DeepSeek 开放平台 注册并创建 API Key

4. 启动开发服务器

npm run dev

访问 http://localhost:5173 即可使用

5. 构建生产版本

npm run build

构建产物位于 dist/ 目录

---

⚙️ 配置说明

环境变量

变量名	必填	说明
VITE_DEEPSEEK_API_KEY	✅	DeepSeek API 密钥

自定义知识点

编辑 src/App.tsx 中的 TOPICS 数组，可以添加或修改技术知识点：

const TOPICS: TopicCategory[] = [
  {
    category: '🤖 AI/大模型开发',
    items: [
      { name: 'LangChain', weight: 100 },
      { name: 'RAG检索增强生成', weight: 100 },
      // 添加更多...
    ]
  },
  // 添加更多分类...
]

权重说明: weight 值越高，该知识点被随机选中的概率越大（范围 1-100）

---

📁 项目结构

AITeachAI/
├── public/
│   ├── screenshot.png          # 项目截图
│   └── vite.svg
├── src/
│   ├── App.tsx                 # 主应用组件
│   ├── App.css                 # 样式文件
│   ├── main.tsx                # 入口文件
│   └── index.css               # 全局样式
├── .env                        # 环境变量（不提交到 Git）
├── .env.example                # 环境变量示例
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md                   # 本文件

---

🎨 界面预览

首页 - 准备学习

知识展示

生成知识点后，左侧卡片会显示：

• 📌 一句话概括
• 🔍 核心原理解析
• 🌟 生活类比
• 💻 代码示例
• 🎯 应用场景
• 📖 学习建议

互动问答

右侧聊天区域支持：

• 自由输入问题
• 点击推荐问题快速提问
• 流式响应显示

---

🔧 开发指南

添加新的建议问题

编辑 src/App.tsx 中的 getSuggestedQuestions 函数：

function getSuggestedQuestions(topic: string): string[] {
  const suggestions = [
    `给我举一个${topic}的实际应用例子`,
    `${topic}适合在什么场景下使用？`,
    // 添加你的问题...
  ]
  return suggestions.slice(0, 4) // 最多显示 4 个
}

修改主题颜色

编辑 src/App.css 中的 CSS 变量：

:root {
  --accent: #00d4aa;           /* 主色调 */
  --accent-dim: #00b894;       /* 暗色调 */
  --accent-glow: rgba(0, 212, 170, 0.4);  /* 发光效果 */
  --bg-primary: #050507;       /* 背景色 */
  /* ... */
}

---

📦 部署

Vercel（推荐）

npm i -g vercel
vercel

Netlify

npm run build
netlify deploy --prod --dir=dist

静态托管

将 dist/ 目录下的文件上传到任意静态托管服务即可。

---

🤝 贡献指南

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

---

📄 许可证

MIT License © 2024 AITeachAI

---

🙏 致谢

• DeepSeek - 提供强大的 AI 能力
• Vite - 极速的前端构建工具
• React - 优秀的前端框架

---

Made with ❤️ by AITeachAI Team