# vibe-coding-miaoda

**Repository Path**: tian-chenfeng/vibe-coding-miaoda

## Basic Information

- **Project Name**: vibe-coding-miaoda
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-03
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 欢迎使用你的秒哒应用代码包
秒哒应用链接
    URL:https://www.miaoda.cn/projects/app-9ytnd1ouz7r5

# 现代化AI驱动前端Web应用 - 使用指南

## 应用简介

这是一个现代化的AI驱动前端Web应用，集成了LangChain + OpenAI/DeepSeek的AI能力，采用纯前端架构，无需后端服务器。应用提供了智能聊天对话、内容搜索、内容展示等核心功能。

## 技术栈

- **前端框架**: React 18 + TypeScript + Vite
- **UI组件库**: shadcn/ui + Tailwind CSS 4
- **路由管理**: React Router DOM 7
- **状态管理**: Zustand (持久化到localStorage)
- **AI集成**: LangChain + OpenAI/DeepSeek
- **轮播组件**: embla-carousel-react + embla-carousel-autoplay
- **HTTP请求**: Axios

## 核心功能

### 1. AI聊天对话系统
- ✅ 支持OpenAI和DeepSeek两种AI服务提供商
- ✅ 多轮对话功能，自动保存对话历史
- ✅ 流式响应，实时显示AI回复
- ✅ 对话会话管理（创建、删除、切换）
- ✅ 自定义系统提示词
- ✅ 深色/浅色主题切换

### 2. 智能搜索功能
- ✅ 搜索输入框（带防抖处理）
- ✅ 搜索历史记录（最多保存20条）
- ✅ 热门搜索建议
- ✅ 搜索结果展示
- ✅ 模拟搜索延迟效果

### 3. 内容展示系统
- ✅ 自动播放轮播图（支持鼠标悬停暂停）
- ✅ 卡片式内容展示
- ✅ 无限滚动加载（最多100条）
- ✅ 图片懒加载优化
- ✅ 响应式网格布局

### 4. 用户界面
- ✅ 顶部导航栏（桌面端）
- ✅ 侧边抽屉菜单（移动端）
- ✅ 加载骨架屏
- ✅ Toast提示组件
- ✅ 响应式设计（适配桌面和移动端）

## 使用指南

### 首次使用

1. **配置AI服务**
   - 进入"个人中心"页面
   - 在"AI配置"部分选择AI提供商（OpenAI或DeepSeek）
   - 输入对应的API密钥：
     - OpenAI: 在 https://platform.openai.com/api-keys 获取
     - DeepSeek: 在 https://platform.deepseek.com 获取
   - 可选：自定义系统提示词
   - 点击"保存设置"

2. **开始使用AI对话**
   - 进入"AI对话"页面
   - 在输入框中输入消息
   - 按Enter或点击发送按钮
   - AI将实时流式返回回复

3. **搜索内容**
   - 在首页或搜索页面使用搜索栏
   - 输入关键词后按Enter或点击搜索按钮
   - 查看搜索结果
   - 搜索历史会自动保存

### 页面说明

#### 首页
- 顶部轮播图：展示应用特色
- 智能搜索：快速搜索内容
- 精选内容：无限滚动加载的内容卡片

#### AI对话页面
- 左侧：对话列表（可创建、切换、删除）
- 右侧：当前对话窗口
- 底部：消息输入框
- AI设置按钮：快速配置AI参数

#### 搜索页面
- 搜索栏：输入关键词搜索
- 搜索历史：显示最近的搜索记录
- 热门搜索：推荐的搜索关键词
- 搜索结果：以卡片形式展示

#### 个人中心
- AI配置：设置AI提供商和API密钥
- 外观设置：切换浅色/深色/跟随系统主题
- 数据管理：清除聊天数据和搜索历史

### 主题切换

- **桌面端**: 点击顶部导航栏的月亮/太阳图标
- **移动端**: 打开侧边菜单，点击主题切换按钮
- **个人中心**: 在外观设置中选择主题模式

### 数据存储

所有数据（聊天记录、搜索历史、用户设置）都存储在浏览器的localStorage中：
- 优点：无需后端，数据完全本地化
- 注意：清除浏览器数据会导致所有记录丢失
- 建议：定期导出重要的对话记录

## 开发说明

### 项目结构

```
src/
├── components/          # 组件目录
│   ├── layouts/        # 布局组件（Header, Footer）
│   ├── chat/           # 聊天相关组件
│   ├── search/         # 搜索相关组件
│   ├── content/        # 内容展示组件
│   └── ui/             # shadcn/ui基础组件
├── pages/              # 页面组件
│   ├── HomePage.tsx
│   ├── ChatPage.tsx
│   ├── SearchPage.tsx
│   └── ProfilePage.tsx
├── stores/             # Zustand状态管理
│   ├── chatStore.ts
│   ├── searchStore.ts
│   └── settingsStore.ts
├── services/           # 服务层
│   └── aiService.ts    # AI服务封装
├── data/               # Mock数据
│   └── mockData.ts
├── types/              # TypeScript类型定义
│   └── types.ts
├── routes.tsx          # 路由配置
└── App.tsx             # 应用入口

### 状态管理

使用Zustand进行状态管理，所有store都配置了持久化：

- **chatStore**: 管理聊天会话和消息
- **searchStore**: 管理搜索历史和当前查询
- **settingsStore**: 管理用户设置（主题、AI配置等）

### AI服务集成

AI服务通过`aiService.ts`封装，支持：
- OpenAI和DeepSeek两种提供商
- 流式响应处理
- 自定义模型参数
- 错误处理和重试机制

### 样式系统

- 使用Tailwind CSS 4进行样式开发
- 自定义主题色彩系统（紫色主色调）
- 支持深色和浅色两种主题
- 响应式设计，适配多种屏幕尺寸

## 注意事项

1. **API密钥安全**
   - API密钥存储在localStorage中
   - 请勿在公共设备上使用
   - 定期更换API密钥

2. **浏览器兼容性**
   - 推荐使用Chrome、Firefox、Safari等现代浏览器
   - 需要支持localStorage和ES6+特性

3. **网络要求**
   - AI对话功能需要稳定的网络连接
   - 某些地区可能需要配置代理访问OpenAI

4. **数据备份**
   - 重要对话建议手动复制保存
   - 清除浏览器数据前请注意备份

## 常见问题

**Q: AI对话没有响应？**
A: 请检查：
1. 是否已配置API密钥
2. API密钥是否有效
3. 网络连接是否正常
4. 查看浏览器控制台是否有错误信息

**Q: 如何切换AI提供商？**
A: 进入个人中心 → AI配置 → 选择提供商 → 输入对应的API密钥 → 保存设置

**Q: 搜索历史如何清除？**
A: 进入个人中心 → 数据管理 → 点击"清除"按钮

**Q: 主题切换不生效？**
A: 刷新页面或清除浏览器缓存后重试

## 技术支持

如有问题或建议，欢迎反馈。

---

© 2026 AI驱动应用. 保留所有权利.