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等），需要启动后端服务器：

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/
• 状态: ✅ 运行中

🚀 停止服务器

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

# 查找进程
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. 测试搜索和知识注入功能

享受您的预览！🎉