docs: add README product visuals

README.md

@@ -1,29 +1,53 @@
-# ReplyPier
+<div align="center">
+  <img src="frontend/src/assets/logo.svg" width="76" height="57" alt="ReplyPier 纸舟标志" />
+  <h1>ReplyPier</h1>
+  <p><strong>AI 先答疑，人工接得住；一段会话，服务有始有终。</strong></p>
+  <p>面向个人与公司网站的 AI 客服：连接知识库问答、人工协作与服务评价。</p>
 
-ReplyPier 是面向个人与公司网站的 AI 客服系统，支持知识库问答、AI 转人工、多客服协作与服务评价。
+  <p>
+    <a href="LICENSE"><img src="https://img.shields.io/badge/License-Apache--2.0-2E6A5C?style=flat-square&logo=apache&logoColor=white" alt="Apache 2.0 License" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Python-FastAPI-2E6A5C?style=flat-square&logo=fastapi&logoColor=white" alt="Python and FastAPI" /></a>
+    <a href="frontend/package.json"><img src="https://img.shields.io/badge/Vue_3-TypeScript-568B73?style=flat-square&logo=vue.js&logoColor=white" alt="Vue 3 and TypeScript" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Realtime-Socket.IO-386A5B?style=flat-square&logo=socketdotio&logoColor=white" alt="Socket.IO" /></a>
+    <a href="backend/requirements.txt"><img src="https://img.shields.io/badge/Database-PostgreSQL_%2B_pgvector-587A91?style=flat-square&logo=postgresql&logoColor=white" alt="PostgreSQL and pgvector" /></a>
+  </p>
 
-## 使用与开发文档
+  <p>
+    <a href="#产品预览">产品预览</a> ·
+    <a href="#核心能力">核心能力</a> ·
+    <a href="#本机使用">本机使用</a> ·
+    <a href="#技术结构">技术结构</a> ·
+    <a href="AGENT_HANDOFF.md">开发指引</a>
+  </p>
+</div>
 
-- [本机使用与启停](LOCAL_DEPLOY.md)
-- [开发与维护指引](AGENT_HANDOFF.md)
+## 产品预览
+
+工作台可以直接预览访客看到的聊天窗口。下面是内置的 Widget 对话示例：
+
+<p align="center">
+  <img src=".github/readme-assets/replypier-widget-preview.png" width="340" alt="ReplyPier 工作台中的网站客服 Widget 对话预览，使用纸舟头像展示一段示例问答" />
+</p>
+
+<p align="center"><img src=".github/readme-assets/replypier-service-flow.svg" width="100%" alt="客服服务流程：AI 知识问答、人工客服接手、结束服务并评价" /></p>
 
 ## 核心能力
 
-- 网站悬浮客服入口与嵌入式聊天窗口。
-- 基于指定知识库的 AI 问答与会话上下文。
-- 同一会话内转人工、客服接管与授权转交。
-- 管理员与人工客服角色、客服分组和会话访问控制。
-- 服务星级、文字评价、聊天记录与基础统计。
-- 可配置的 Agent、知识处理任务与工作流。
+- 💬 **知识库问答**：为 AI 客服关联知识资料，并在 Widget 中展示回答来源。
+- 🤝 **同会话转人工**：保留聊天上下文，支持客服组接待、人工接管与授权转交。
+- ⭐ **评价与回看**：收集星级和文字反馈，管理员可查看完整会话与接待情况。
+- 🔐 **多客服协作**：按角色、组织、分组和会话可见范围控制访问。
+- 🧩 **可配置 Agent 与 Widget**：管理 AI 客服、知识关联、外观和网站嵌入。
+- ⚙️ **知识任务与工作流**：处理知识导入，并编排客服消息处理步骤。
 
 ## 技术结构
 
-- 后端：Python、FastAPI、SQLAlchemy、Alembic。
-- 前端：Vue 3、TypeScript、Vite。
-- 实时通信：Socket.IO。
-- 知识检索：FastEmbed、PostgreSQL/pgvector。
-- 短期状态与事件分发：Redis。
-- AI 编排：Agno。
+- **后端**：Python、FastAPI、SQLAlchemy、Alembic。
+- **前端**：Vue 3、TypeScript、Vite。
+- **实时通信**：Socket.IO。
+- **知识检索**：FastEmbed、PostgreSQL/pgvector。
+- **短期状态与事件分发**：Redis。
+- **AI 编排**：Agno。
 
 ```text
 backend/app/       API、业务模型、Agent、知识处理与后台任务
@@ -56,4 +80,4 @@ deploy/local/      本机环境与启停脚本
 
 ## 许可与贡献
 
-许可条款见 [LICENSE](LICENSE)，声明见 [NOTICE](NOTICE)，贡献约定见 [CONTRIBUTING.md](CONTRIBUTING.md)。
+本项目使用 [Apache License 2.0](LICENSE)，声明见 [NOTICE](NOTICE)，贡献约定见 [CONTRIBUTING.md](CONTRIBUTING.md)。