基于React + TypeScript + Tailwind CSS构建的智能客服助手管理系统，提供完整的AI客服解决方案。

• 📊 仪表板概览 - 实时数据统计和趋势分析
• 📚 知识库管理 - 文章管理、分类筛选、富文本编辑
• 💬 对话历史 - 完整的对话记录查看和管理
• 📈 数据分析 - 详细的统计图表和报告导出
• 🔄 人工转接 - 智能转接规则和客服状态管理
• ⚙️ 系统设置 - AI配置、聊天组件定制、用户管理

• 💬 智能聊天组件 - 可嵌入任何网站的聊天窗口
• 🤖 AI自动回复 - 基于知识库的智能问答
• 🔄 无缝转接 - 低信心度自动转人工客服
• 📱 响应式设计 - 完美适配桌面端和移动端

• 前端框架: React 18 + TypeScript
• 样式方案: Tailwind CSS
• UI组件: Lucide React Icons
• 图表库: Recharts
• 路由: React Router DOM
• 构建工具: Vite
• 开发语言: TypeScript

• Node.js >= 16.0.0
• npm >= 8.0.0

npm install

npm run dev

npm run build

npm run preview

• 主色调: #007AFF (蓝色)
• 背景色: #FFFFFF (白色)
• 次要背景: #F7F9FC (浅灰)
• 文字色: #1C2A4E (深蓝)
• 成功色: #28A745 (绿色)
• 警告色: #FFC107 (黄色)
• 错误色: #DC3545 (红色)

• 主字体: Inter, -apple-system, BlinkMacSystemFont, sans-serif
• 标题: 18px-24px, font-weight: 600
• 正文: 14px-16px, font-weight: 400
• 小字: 12px, font-weight: 400

• 默认账户: admin@example.com
• 默认密码: password

• 查看总对话数、AI解决率、平均响应时间等关键指标
• 观察对话量趋势图表
• 查看最近活动记录

• 新增/编辑/删除知识库文章
• 支持Markdown格式内容编辑
• 文章分类和标签管理
• 文档上传功能

• 查看所有用户对话记录
• 按日期、状态、AI信心度筛选
• 查看完整对话详情
• 添加管理员备注

• 对话量按时间和星期分布分析
• AI性能趋势和信心度分布
• 热门问题分类统计
• 多格式报告导出

• 查看待处理转接队列
• 管理在线客服状态
• 设置自动转接规则
• 转接统计数据

• AI模型和参数配置
• 聊天组件外观定制
• 转接规则设置
• 用户权限管理

聊天组件会自动显示在页面右下角，支持：

• 智能问答（基于预设规则）
• 实时对话
• 信心度显示
• 自动转接提示

系统完全支持响应式设计：

• 桌面端: > 1024px - 完整功能界面
• 平板端: 768px - 1024px - 适配布局
• 移动端: < 768px - 移动优化界面

• 真实AI模型接入（OpenAI、Claude等）
• 数据库持久化存储
• 用户认证系统
• 实时WebSocket通信
• 文件上传和处理
• 邮件通知系统

• 前端: Vercel、Netlify、GitHub Pages
• 后端: Node.js + Express + PostgreSQL
• AI服务: OpenAI API、Anthropic Claude API

ai-customer-service/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 可复用组件
│   │   ├── Layout.tsx     # 主布局组件
│   │   └── ChatWidget.tsx # 聊天组件
│   ├── pages/             # 页面组件
│   │   ├── LoginPage.tsx
│   │   ├── Dashboard.tsx
│   │   ├── KnowledgeBase.tsx
│   │   ├── ConversationHistory.tsx
│   │   ├── Analytics.tsx
│   │   ├── HandoffManagement.tsx
│   │   └── Settings.tsx
│   ├── types/             # TypeScript类型定义
│   ├── utils/             # 工具函数和模拟数据
│   ├── App.tsx           # 主应用组件
│   ├── main.tsx          # 应用入口
│   └── index.css         # 全局样式
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

如有问题或建议，请通过以下方式联系：

• 邮箱: support@example.com
• 项目地址: https://github.com/your-username/ai-customer-service

---

注意: 这是一个演示项目，包含模拟数据。在生产环境中使用时，请替换为真实的后端API和数据库。