以下是一个基于React的简化版代码框架，配合Firebase实现基础功能，您可直接用此模板进行扩展：
### 1. 技术栈说明
- 前端：React + Material-UI
- 后端服务：Firebase（实时数据库+身份认证）
- 部署：Vercel/Netlify
### 2. 项目结构
```bash
src/
├── components/
│ ├── DirectionSelector.js # 方向选择组件
│ ├── QuestionPanel.js # 问题展示组件
│ └── FeedbackView.js # 反馈展示组件
├── services/
│ ├── firebase.js # Firebase配置
│ └── aiFeedback.js # 简易AI反馈逻辑
├── App.js
└── index.js
```
### 3. 核心代码示例
#### 3.1 Firebase配置 (services/firebase.js)
```javascript
import { initializeApp } from "firebase/app";
import { getDatabase, ref } from "firebase/database";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT.firebaseio.com",
projectId: "YOUR_PROJECT",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
export { db, ref };
```
#### 3.2 方向选择组件 (components/DirectionSelector.js)
```javascript
import { Button, Grid } from '@mui/material';
const directions = [
{ id: 1, name: '商业思维', color: '#2196F3' },
{ id: 2, name: '学习思维', color: '#4CAF50' },
{ id: 3, name: '复盘思维', color: '#FF9800' },
{ id: 4, name: '学习思维', color: '#E91E63' }
];
export default function DirectionSelector({ onSelect }) {
return (
{directions.map((dir) => (
))}
);
}
```
#### 3.3 问题展示组件 (components/QuestionPanel.js)
```javascript
import { useState } from 'react';
import { TextField, Button, Typography } from '@mui/material';
import { getFeedback } from '../services/aiFeedback';
export default function QuestionPanel({ question }) {
const [answer, setAnswer] = useState('');
const [feedback, setFeedback] = useState(null);
const handleSubmit = async () => {
const analysis = await getFeedback(question.id, answer);
setFeedback(analysis);
};
return (
{question.title}
setAnswer(e.target.value)}
/>
{feedback && (
AI反馈：
{feedback}
)}
);
}
```
#### 3.4 简易AI反馈逻辑 (services/aiFeedback.js)
```javascript
// 示例关键词匹配库
const feedbackRules = {
'商业思维': {
keywords: ['SWOT', '市场', '竞品', 'ROI'],
suggestions: {
missingKeywords: '建议补充市场分析维度',
structureTip: '使用金字塔原理组织答案'
}
},
'学习思维': {
keywords: ['费曼技巧', '刻意练习', '知识迁移'],
suggestions: {
missingKeywords: '尝试用费曼技巧简化描述',
structureTip: '增加案例对比分析'
}
}
};
export async function getFeedback(questionId, answer) {
// 实际应调用API，此处简化处理
const questionType = '商业思维'; // 根据实际题目类型获取
const matchedKeywords = feedbackRules[questionType].keywords.filter(kw =>
answer.includes(kw)
);
let feedback = '';
if (matchedKeywords.length < 2) {
feedback += feedbackRules[questionType].suggestions.missingKeywords + '\n';
}
feedback += feedbackRules[questionType].suggestions.structureTip;
return feedback;
}
```
### 4. 快速启动步骤
1. **创建项目**
```bash
npx create-react-app mind-training-app
cd mind-training-app
npm install @mui/material @emotion/react @emotion/styled firebase
```
2. **配置Firebase**
- 访问 [Firebase Console](https://console.firebase.google.com/) 创建新项目
- 将配置信息替换到 `services/firebase.js`
3. **运行开发服务器**
```bash
npm start
```
### 5. 扩展建议
1. **数据持久化**：
```javascript
// 在QuestionPanel中添加Firebase存储
import { ref, push } from 'firebase/database';
const saveAnswer = (userId, questionId, answer) => {
push(ref(db, 'answers'), {
userId,
questionId,
answer,
timestamp: Date.now()
});
};
```
2. **增强AI反馈**：
- 集成OpenAI API（需申请API Key）：
```javascript
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: 'YOUR_API_KEY',
dangerouslyAllowBrowser: true
});
const getAIFeedback = async (prompt) => {
const completion = await openai.chat.completions.create({
messages: [{
role: "system",
content: "你是一个思维训练导师，请用简洁的语言指出用户答案的改进空间"
},{
role: "user",
content: prompt
}],
model: "gpt-3.5-turbo",
});
return completion.choices[0].message.content;
};
```
### 6. 部署指南
1. **前端部署**：
```bash
npm install -g vercel
vercel
```
2. **Firebase规则配置**：
```json
{
"rules": {
"answers": {
".read": "auth != null",
".write": "auth != null"
}
}
}
```
该代码框架已实现核心功能流程，您可以通过以下步骤进行扩展：
1. 在Firebase控制台完善数据库结构
2. 添加更多题目数据
3. 使用Material-UI完善界面设计
4. 接入完整的AI分析API