frontend/README.md

TUM Search Engine - 前端部分

这是 TUM Search Engine 的前端部分，已从后端项目中独立提取出来。

文件结构

frontend/
├── App.jsx         # React主组件（整合所有功能）
├── main.jsx        # React入口文件
├── index.html      # HTML入口（React版本）
├── admin.html      # 管理员控制台（Vue版本）
├── view.html       # 内容详情页面（原生HTML）
├── config.js       # API配置文件
└── README.md       # 本文件

版本说明

React版本（推荐）

• App.jsx - 使用React构建的现代化前端，整合了所有功能
• main.jsx - React应用入口
• index.html - React版本的HTML入口

原生HTML版本（备用）

• index.html (原版本) - 原生HTML + JavaScript实现
• admin.html - Vue.js实现的管理员控制台
• view.html - 原生HTML实现的详情页面

功能说明

App.jsx (React版本 - 推荐)

• ✅ 用户搜索界面（带算法步骤可视化）
• ✅ 知识注入功能（URL、文本上传）
• ✅ 实时系统更新通知（WebSocket）
• ✅ 热门内容展示（Trending）
• ✅ 知识流展示（Feed）
• ✅ 教育卡片（How it Works）
• ✅ 用户交互记录
• ✅ 3D粒子网络背景动画
• ✅ 响应式设计

index.html (原生HTML版本)

• 用户搜索界面
• 知识注入功能（URL、文本上传）
• 实时系统更新通知（WebSocket）
• 热门内容展示
• 知识流展示

admin.html

• 管理员控制台
• 浏览和管理 Space R 和 Space X
• 提升内容到 Space R
• 删除内容

view.html

• 内容详情页面
• 语义相似推荐
• 协同过滤推荐（社区路径）

配置

API端点配置

编辑 config.js 文件来配置后端API地址：

const API_CONFIG = {
    baseURL: window.location.origin, // 默认使用当前域名
    // 如果前后端分离，设置为: 'https://api.example.com'
    ...
};

开发环境配置

如果前端和后端运行在不同的端口，需要修改 config.js：

if (window.location.hostname === 'localhost') {
    API_CONFIG.baseURL = 'http://localhost:8000';  // 后端端口
    API_CONFIG.wsURL = 'ws://localhost:8000';
}

使用方法

React版本（推荐）

安装依赖

cd frontend
npm install react react-dom
# 或使用yarn
yarn add react react-dom

使用Vite构建（推荐）

# 安装Vite
npm install -D vite @vitejs/plugin-react

# 创建vite.config.js
# 运行开发服务器
npm run dev

使用Create React App

npx create-react-app .
# 将App.jsx和main.jsx复制到src目录
npm start

原生HTML版本

方式1: 与后端一起部署（推荐）

如果前端和后端部署在同一服务器上，可以直接使用：

1. 将 frontend/ 目录中的文件复制到后端的 static/ 目录
2. 后端会自动提供静态文件服务

方式2: 独立部署前端

如果前端需要独立部署（例如使用 Nginx、Vercel、Netlify 等）：

1. 修改 config.js 中的 baseURL 为后端API地址
2. 配置CORS，允许前端域名访问后端API
3. 部署前端文件到静态文件服务器

方式3: 本地开发

使用简单的HTTP服务器：

# 使用Python
cd frontend
python3 -m http.server 3000

# 或使用Node.js的http-server
npx http-server -p 3000

然后在浏览器中访问 http://localhost:3000

注意: 需要确保后端API已启动，并且配置了正确的CORS策略。

API依赖

前端依赖以下后端API端点：

• GET /api/search?q=... - 搜索
• GET /api/feed?limit=...&offset=... - 获取知识流
• GET /api/trending?limit=... - 获取热门内容
• GET /api/item/{item_id} - 获取内容详情
• POST /api/feedback - 记录用户交互
• POST /api/upload/url - 上传URL
• POST /api/upload/text - 上传文本
• POST /api/upload/image - 上传图片
• WebSocket /ws - 实时更新通知

管理员功能还需要：

• GET /api/admin/browse?space=...&limit=...&offset=...
• POST /api/admin/promote
• DELETE /api/admin/delete?space=...&id=...

技术栈

React版本

• React 18+ - UI框架
• Tailwind CSS - 样式框架（CDN）
• Lucide React - 图标库
• WebSocket - 实时通信

原生HTML版本

• index.html & view.html: Tailwind CSS (CDN)
• admin.html: Bootstrap 5 + Vue.js 3
• 纯JavaScript，无需构建工具

注意事项

1. 所有API调用都使用相对路径，通过 config.js 统一管理
2. WebSocket连接用于实时通知，需要后端支持
3. 前端使用CDN加载CSS框架，需要网络连接
4. 如果部署到生产环境，建议将CDN资源本地化以提高性能和稳定性