当前位置：首页 > news >正文

【React+TypeScript+DeepSeek】穿越时空对话机

news 2025/7/12 19:54:39

引言

在这个数字化的时代，历史学习常常给人一种距离感。教科书中的历史人物似乎永远停留在文字里，我们无法真正理解他们的思想和智慧。如何让这些伟大的历史人物"活"起来？如何让历史学习变得生动有趣？带着这些思考，我们开发了一个简单的"穿越时空对话机"。

源码已经放在最后啦！

人物选择界面：

聊天界面：
在这里插入图片描述

1. 项目背景

1.1 创意起源

在传统的历史学习中，学生们往往需要通过记忆大量的史实和年代来了解历史。这种学习方式不仅枯燥，而且难以激发学习兴趣。我们注意到：

学生对历史人物的故事最感兴趣
互动式学习效果最好
AI技术为教育带来新可能

基于这些观察，我萌生了开发一个能让用户直接与历史人物"对话"的应用的想法。

1.2 项目目标

教育价值
- 让历史学习变得生动有趣
- 深入理解历史人物的思想
- 培养历史思维能力
技术创新
- 运用先进的AI对话技术
- 打造流畅的用户体验
- 实现智能的角色扮演
文化传承
- 弘扬优秀传统文化
- 促进文化交流
- 连接古今智慧

2. 核心功能概述

2.1 人物库设计

我们精心挑选了来自不同时期、不同领域的历史名人：

中国古代名人
- 孔子：儒家思想的代表，强调仁义礼智信
- 诸葛亮：军事谋略家，智慧与忠诚的化身
- 李白：浪漫主义诗人，豪放不羁的文学天才
- 苏轼：文学艺术全才，豁达乐观的人生导师
- 李时珍：医学大师，严谨求实的科学精神
世界名人
- 达芬奇：文艺复兴全才，艺术与科学的完美结合
- 爱因斯坦：现代物理学家，创新思维的代表
- 莎士比亚：戏剧大师，人性洞察的大师
- 莫扎特：音乐天才，艺术激情的化身

每个人物都经过精心设计，包括：

详细的背景故事
独特的性格特征
专业领域知识
语言表达风格
典型的思维方式

2.2 对话系统

基于DeepSeek API构建的智能对话系统具有以下特点：

角色准确性
- 准确还原历史人物性格
- 保持语言风格一致性
- 符合历史背景
对话智能性
- 上下文理解能力
- 灵活的问题处理
- 深度的知识储备
交互自然性
- 流畅的对话节奏
- 自然的语言表达
- 适当的情感表现

3. 技术架构

3.1 技术栈选择

我们采用了现代化的技术栈：

前端技术

- React 18
- TypeScript 4.x
- Vite
- CSS Modules

AI对话引擎
```
- DeepSeek API
- WebSocket
- Axios
```
数据存储
```
- LocalStorage
```

3.2 系统架构

采用清晰的分层架构：

表现层
- 角色选择界面
- 对话交互界面
- 用户反馈组件
业务层
- 对话管理
- 角色控制
- 会话处理
数据层
- API通信
- 本地存储
- 状态管理

3.3 数据流设计

实现了清晰的单向数据流：

4. DeepSeek API集成

4.1 API配置

const api = axios.create({baseURL: 'https://api.deepseek.com/v1',headers: {'Authorization': `Bearer ${API_KEY}`,'Content-Type': 'application/json',},
});

4.2 对话生成

export const generateResponse = async (messages: ChatMessage[]) => {const response = await api.post('/chat/completions', {model: 'deepseek-chat',messages,temperature: 0.7,max_tokens: 1000,});return response.data.choices[0].message.content;
};

4.3 提示词系统

为每个历史人物设计了专门的提示词模板：

interface HistoricalFigurePrompt {id: string;name: string;period: string;description: string;avatar: string;systemPrompt: string;sampleQuestions: string[];personality: string;background: string;
}

5. 开发规范

5.1 代码规范

使用ESLint进行代码检查
使用Prettier进行代码格式化
遵循TypeScript严格模式
采用函数式编程范式

5.2 命名规范

组件采用大驼峰命名
函数采用小驼峰命名
常量使用大写下划线
CSS类名采用kebab-case

5.3 文件组织

src/
├── components/     # 通用组件
├── pages/         # 页面组件
├── services/      # 服务层
├── styles/        # 样式文件

6. 用户界面设计理念

6.1 设计原则

在设计用户界面时，我们遵循以下核心原则：

简约而不简单
- 清晰的视觉层次
- 重点内容突出
- 减少视觉干扰
沉浸式体验
- 符合历史氛围
- 富有时代特色
- 细节打造意境
交互友好
- 操作直观
- 反馈及时
- 引导清晰

6.2 视觉风格

我们采用了现代简约与古典元素相结合的设计风格：

配色方案

:root {--primary-color: #4A90E2;--secondary-color: #F5A623;--text-color: #2C3E50;--background-color: #F8F9FA;--border-color: #E2E8F0;
}

字体选择
- 中文：思源宋体
- 英文：Roboto
- 代码：JetBrains Mono
布局网格
- 基础单位：8px
- 内容区域最大宽度：1200px
- 响应式断点：576px、768px、992px、1200px

7. 角色选择页面

7.1 布局设计

角色选择页面采用卡片式布局：

const CharacterSelect: React.FC = () => {return (<div className="character-select"><header className="header"><h1>穿越时空</h1><p>与历史对话</p></header><div className="character-grid">{historicalFigures.map(figure => (<CharacterCardkey={figure.id}figure={figure}onClick={() => handleSelect(figure)}/>))}</div></div>);
};

7.2 角色卡片设计

每个角色卡片包含：

视觉元素
- 头像/形象
- 姓名/时代
- 特色标签
- 简介文字

交互效果

.character-card {transition: transform 0.3s ease;&:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
}

信息展示

const CharacterCard: React.FC<Props> = ({ figure }) => (<div className="character-card"><div className="avatar">{figure.avatar}</div><h3>{figure.name}</h3><p className="period">{figure.period}</p><p className="description">{figure.description}</p><div className="personality-tags">{figure.personality.split('，').map(tag => (<span className="tag">{tag}</span>))}</div></div>
);

8. 对话界面实现

8.1 整体布局

对话界面分为三个主要部分：

顶部导航
- 返回按钮
- 当前角色信息
- 功能按钮
对话区域
- 消息气泡
- 打字机效果
- 滚动加载
输入区域
- 消息输入框
- 发送按钮
- 快捷操作

8.2 消息展示

实现了富有特色的消息气泡：

const MessageBubble: React.FC<Props> = ({ message, isUser }) => (<div className={`message ${isUser ? 'user' : 'assistant'}`}><div className="avatar">{isUser ? '👤' : selectedFigure.avatar}</div><div className="content"><div className="bubble">{message.content}</div><div className="time">{formatTime(message.timestamp)}</div></div></div>
);

8.3 打字机效果

实现了自然的打字机效果：

const simulateTyping = async (content: string) => {await new Promise(resolve => setTimeout(resolve, 500 + Math.random() * 1000));return content;
};

8.4 历史记录功能

实现了完整的对话历史管理：

interface ChatHistory {characterId: string;messages: ChatMessage[];lastUpdated: string;
}export const saveChatHistory = (characterId: string, messages: ChatMessage[]) => {try {const existingHistory = localStorage.getItem(CHAT_HISTORY_KEY);const history = existingHistory ? JSON.parse(existingHistory) : {};history[characterId] = {characterId,messages,lastUpdated: new Date().toISOString()};localStorage.setItem(CHAT_HISTORY_KEY, JSON.stringify(history));} catch (error) {console.error('Failed to save chat history:', error);}
};

9. 动画效果

9.1 过渡动画

使用CSS transitions实现平滑过渡：

.fade-enter {opacity: 0;transform: translateY(20px);
}.fade-enter-active {opacity: 1;transform: translateY(0);transition: opacity 300ms, transform 300ms;
}.fade-exit {opacity: 1;
}.fade-exit-active {opacity: 0;transition: opacity 300ms;
}

9.2 加载动画

实现了优雅的加载效果：

.typing-indicator {display: flex;gap: 4px;padding: 8px 12px;.dot {width: 8px;height: 8px;background: var(--primary-color);border-radius: 50%;animation: bounce 1.4s infinite ease-in-out;&:nth-child(1) { animation-delay: -0.32s; }&:nth-child(2) { animation-delay: -0.16s; }}
}@keyframes bounce {0%, 80%, 100% { transform: scale(0); }40% { transform: scale(1); }
}

10. 响应式设计

10.1 媒体查询

实现了完整的响应式布局：

/* 移动端 */
@media (max-width: 576px) {.character-grid {grid-template-columns: 1fr;}
}/* 平板 */
@media (min-width: 577px) and (max-width: 992px) {.character-grid {grid-template-columns: repeat(2, 1fr);}
}/* 桌面端 */
@media (min-width: 993px) {.character-grid {grid-template-columns: repeat(3, 1fr);}
}

10.2 弹性布局

使用Flexbox实现灵活的布局：

.chat-container {display: flex;flex-direction: column;height: 100vh;.chat-messages {flex: 1;overflow-y: auto;}.chat-input {padding: 1rem;border-top: 1px solid var(--border-color);}
}

11. 性能优化

11.1 虚拟滚动

实现了消息列表的虚拟滚动：

import { FixedSizeList } from 'react-window';const MessageList: React.FC<Props> = ({ messages }) => (<FixedSizeListheight={600}itemCount={messages.length}itemSize={80}width="100%">{({ index, style }) => (<MessageItemmessage={messages[index]}style={style}/>)}</FixedSizeList>
);

11.2 防抖处理

对输入和滚动事件进行防抖处理：

const debouncedScroll = debounce(() => {const { scrollTop, scrollHeight, clientHeight } = messagesRef.current;if (scrollHeight - scrollTop === clientHeight) {loadMoreMessages();}
}, 200);

11.3 懒加载

实现了图片和组件的懒加载：

const LazyCharacterCard = React.lazy(() => import('./CharacterCard'));const CharacterGrid = () => (<Suspense fallback={<Skeleton />}>{figures.map(figure => (<LazyCharacterCardkey={figure.id}figure={figure}/>))}</Suspense>
);

12. 性能优化策略

12.1 代码层面优化

12.1.1 React优化

组件优化

// 使用React.memo避免不必要的重渲染
const MessageBubble = React.memo<Props>(({ message, isUser }) => {return (<div className={`message ${isUser ? 'user' : 'assistant'}`}>{/* 消息内容 */}</div>);
});// 使用useCallback优化事件处理函数
const handleSendMessage = useCallback(() => {// 处理发送消息
}, [dependencies]);

状态管理优化

// 使用useReducer处理复杂状态
const [state, dispatch] = useReducer(chatReducer, initialState);// 分离状态逻辑
const chatReducer = (state, action) => {switch (action.type) {case 'ADD_MESSAGE':return {...state,messages: [...state.messages, action.payload]};case 'CLEAR_HISTORY':return {...state,messages: []};default:return state;}
};

12.1.2 资源加载优化

代码分割

// 路由级别的代码分割
const ChatInterface = lazy(() => import('./pages/ChatInterface'));
const CharacterSelect = lazy(() => import('./pages/CharacterSelect'));// 组件级别的代码分割
const MarkdownRenderer = lazy(() => import('./components/MarkdownRenderer'));

资源预加载

// 预加载关键资源
const prefetchResources = () => {const links = [{ rel: 'prefetch', href: '/assets/fonts/main.woff2' },{ rel: 'preload', href: '/assets/images/sprites.png', as: 'image' }];links.forEach(link => {const linkElement = document.createElement('link');Object.assign(linkElement, link);document.head.appendChild(linkElement);});
};

12.2 网络优化

12.2.1 API请求优化

请求缓存

const cache = new Map();const cachedFetch = async (url: string) => {if (cache.has(url)) {return cache.get(url);}const response = await fetch(url);const data = await response.json();cache.set(url, data);return data;
};

请求合并

const batchRequest = async (requests: Request[]) => {const batchId = generateBatchId();return await api.post('/batch', {batchId,requests});
};

12.2.2 WebSocket优化

class WebSocketManager {private ws: WebSocket;private reconnectAttempts = 0;private maxReconnectAttempts = 5;constructor(url: string) {this.ws = new WebSocket(url);this.setupEventHandlers();}private setupEventHandlers() {this.ws.onclose = () => {if (this.reconnectAttempts < this.maxReconnectAttempts) {setTimeout(() => this.reconnect(), 1000 * Math.pow(2, this.reconnectAttempts));}};}private reconnect() {this.reconnectAttempts++;// 重新连接逻辑}
}

12.3 存储优化

12.3.1 本地存储优化

数据压缩

import { compress, decompress } from 'lz-string';const saveCompressedData = (key: string, data: any) => {const compressed = compress(JSON.stringify(data));localStorage.setItem(key, compressed);
};const loadCompressedData = (key: string) => {const compressed = localStorage.getItem(key);if (!compressed) return null;return JSON.parse(decompress(compressed));
};

存储管理

class StorageManager {private maxSize = 5 * 1024 * 1024; // 5MBasync cleanup() {const items = { ...localStorage };const totalSize = Object.values(items).reduce((size, item) => size + item.length, 0);if (totalSize > this.maxSize) {// 清理最旧的数据const oldestKey = this.findOldestKey();localStorage.removeItem(oldestKey);}}
}

13. 用户体验优化

13.1 交互优化

13.1.1 输入优化

智能提示

const AutoComplete: React.FC<Props> = ({ suggestions, onSelect }) => {return (<div className="autocomplete">{suggestions.map(suggestion => (<divkey={suggestion.id}className="suggestion"onClick={() => onSelect(suggestion)}>{suggestion.text}</div>))}</div>);
};

输入防抖

const useDebounce = (value: string, delay: number) => {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => {setDebouncedValue(value);}, delay);return () => {clearTimeout(handler);};}, [value, delay]);return debouncedValue;
};

13.2 动画优化

13.2.1 性能优化的动画

.optimized-animation {will-change: transform;transform: translateZ(0);backface-visibility: hidden;
}@keyframes smooth-entrance {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}
}

13.2.2 动画管理

class AnimationManager {private animations: Map<string, Animation> = new Map();register(id: string, animation: Animation) {this.animations.set(id, animation);}play(id: string) {const animation = this.animations.get(id);if (animation) {animation.play();}}pause(id: string) {const animation = this.animations.get(id);if (animation) {animation.pause();}}
}