注:参考ui将在对接后提供,temp.html
一、需求描述:
类别: 现有 Web 应用前端 UI 修改与开发
项目背景: 已成功部署并运行 RAGFlow 后端服务(基于 Docker Compose,使用 Ollama 作为本地 LLM 引擎)及配套依赖(如 InfinityDB/Elasticsearch, MinIO, MySQL, Redis/Valkey)。现有 RAGFlow 具备标准的前端 UI。
核心需求: 需要前端开发人员修改现有的 RAGFlow 前端 UI,使其在视觉风格、布局和核心交互流程上与提供的目标设计稿 (temp.html 文件,项目代号“天佑智行”) 保持一致。重点在于前端界面的重构和美化,需要对接并复用 RAGFlow 现有的后端 API 接口来实现所有核心功能。
主要功能点 (需在新 UI 中实现并对接后端 API):
整体布局: 实现 temp.html 中展示的左侧边栏 + 右侧主内容区的两栏布局。
侧边栏:
Logo 和标题 (“天佑智行”)。
“新建对话”按钮及交互。
对话历史列表展示、切换、激活状态、滚动加载(如果后端支持分页)。
“个人中心”等底部链接(具体功能可根据 RAGFlow API 确定)。
主内容区 - 初始界面:
欢迎语和应用描述。
功能卡片展示区(如“轨道缺陷分析”、“维保方案建议”等,这些卡片的具体功能和跳转逻辑需要进一步明确或暂时作为静态展示)。
建议问题条 (Suggestion Chips) 及点击交互。
主内容区 - 对话界面:
用户输入内容的显示。
模型响应内容的显示(需要支持 Markdown 格式、代码块高亮、流式输出)。
与知识库交互时,显示相关的溯源信息(如来源文档片段、页码等,具体形式参考 RAGFlow 原有功能或新设计)。
支持对话的多轮交互。
提供复制代码、刷新回答、点赞/点踩等交互按钮。
输入区域:
支持多行输入的文本框(自动高度增长)。
发送按钮。
图片上传按钮(重要: 需要确认 RAGFlow 后端是否提供相应的 API 接口来支持图片输入并传递给多模态模型,如 Qwen-VL。如果后端不支持,此按钮功能可能需要调整或移除)。
知识库交互: UI 上需要有选择或关联知识库进行 RAG 问答的明确方式(此交互方式需结合 RAGFlow 原有逻辑进行设计)。
响应式设计: 界面需要能够适配常见的桌面浏览器分辨率。
技术栈说明:
后端: RAGFlow 后端服务及 API(基于 Python)。外包人员无需修改后端代码。 需要提供 RAGFlow 的 API 文档给外包人员参考(可从 RAGFlow 官方文档查找)。
前端: 期望使用现代主流前端框架(如 Vue.js、React、Svelte 等,可与外包人员协商确定)进行开发,或在 RAGFlow 现有前端框架基础上进行修改(需评估可行性)。要求代码结构清晰、可维护性好。
二、人才要求:
经验: 3 年及以上前端 Web 开发经验。
框架: 精通至少一种主流现代 JavaScript 框架(Vue.js, React, Svelte 等)。
基础: 精通 HTML5、CSS3 (包括 Flexbox, Grid 布局)、JavaScript (ES6+)。
API 对接: 拥有丰富的与 RESTful API 对接经验,熟悉 Workspace 或 axios 等工具,能处理异步请求和响应(包括 JSON 数据解析)。有处理流式响应(Server-Sent Events 或 WebSocket)经验者优先。
UI 实现: 能够根据设计稿 (temp.html) 精确实现界面布局、样式和交互效果,注重细节和用户体验。
加分项: 有开发过 AI 应用、聊天机器人或类似 RAG 应用前端界面经验者优先。
三、参考产品:
主要视觉和布局参考: temp.html。
后端功能和 API 交互参考: 部署好的 RAGFlow 系统的现有 Web 界面。
四、合作方式:
开发方式: 远程开发。
开发周期: 预估 5天到7天。周期包含开发、联调测试和 Bug 修复。
沟通协作: 需要定期(如每日或每两日)沟通进度,及时反馈问题。可以使用即时通讯工具或项目管理工具协作。
交付物:
完整的前端项目源代码。
必要的部署说明或配置文件。