PREVIEW_GUIDE.md

# 🎨 前端预览指南

## ✅ 预览服务器状态

**静态预览服务器正在运行！**

### 🌐 访问地址

**前端页面（带粒子效果）**:
```
http://localhost:8080/index.html
```

或者在浏览器中直接访问:
- `http://127.0.0.1:8080/index.html`
- `http://localhost:8080/` (然后点击 index.html)

## 🎨 页面特性

您现在应该能看到：

### 1. **蓝色粒子背景动画** ✨
- 60个蓝色粒子在深色背景上移动
- 粒子之间自动连接形成网络
- 鼠标移动时粒子会被吸引
- 平滑的动画效果

### 2. **深色主题设计** 🌑
- 深色背景（slate-900）
- 半透明玻璃态卡片
- 青色/蓝色渐变强调色
- 现代化UI设计

### 3. **主要界面元素**
- **导航栏**: 顶部固定，带系统状态指示器
- **搜索框**: 大型搜索输入框，带渐变边框效果
- **教育卡片**: 3个介绍系统功能的卡片
- **知识注入面板**: URL和文本上传功能
- **热门内容区域**: 展示趋势内容
- **知识流区域**: 显示最近的知识注入

## 🔧 查看预览

### 方法1: 直接在浏览器打开
1. 打开浏览器
2. 访问: `http://localhost:8080/index.html`
3. 您应该立即看到粒子背景效果

### 方法2: 查看完整功能（需要后端）
如果需要完整功能（搜索、API等），需要启动后端服务器：

```bash
cd /Users/papersiii/tum-search
python3 web_server.py --mode user --port 8000
```

然后访问: `http://localhost:8000/static/index.html`

## 🐛 如果粒子效果没有显示

如果看不到粒子效果，请检查：

1. **硬刷新页面**
   - Windows/Linux: `Ctrl + Shift + R`
   - Mac: `Cmd + Shift + R`

2. **检查浏览器控制台**
   - 按 `F12` 打开开发者工具
   - 查看 Console 标签是否有错误

3. **检查Canvas元素**
   - 在开发者工具中，检查是否有 `<canvas id="particle-canvas">` 元素
   - 确认Canvas有正确的样式和尺寸

4. **检查JavaScript执行**
   - 在控制台输入: `document.getElementById('particle-canvas')`
   - 应该返回Canvas元素对象

## 📊 服务器信息

- **端口**: 8080
- **类型**: 静态文件服务器
- **目录**: `/static/`
- **状态**: ✅ 运行中

## 🚀 停止服务器

如果需要停止预览服务器：

```bash
# 查找进程
lsof -ti:8080

# 停止进程
lsof -ti:8080 | xargs kill
```

## 📝 技术细节

### 粒子效果实现
- **技术**: HTML5 Canvas + JavaScript
- **粒子数**: 60个
- **连接距离**: 150px
- **鼠标交互距离**: 200px
- **颜色**: 蓝色渐变 `rgba(100-150, 155-255, 255, 0.2-0.7)`

### 主题颜色
- **背景**: `#0f172a` (slate-900)
- **主色调**: 青色/蓝色渐变
- **卡片背景**: `rgba(30, 41, 59, 0.5)` (slate-800/50)
- **文本**: `rgb(226, 232, 240)` (slate-200)

## 🎯 下一步

1. ✅ 查看粒子背景效果
2. ✅ 测试深色主题UI
3. 如需完整功能，启动后端服务器
4. 测试搜索和知识注入功能

享受您的预览！🎉