feat: release contextual omnichannel customer platform
Add Telegram, WhatsApp and email account management, realtime messaging, contextual multilingual AI, customer intelligence, knowledge workflows, enterprise controls, a unified design system and complete repository documentation.
This commit is contained in:
wmq
@@ -0,0 +1,22 @@
|
|||||||
|
* text=auto
|
||||||
|
|
||||||
|
*.js text eol=lf
|
||||||
|
*.jsx text eol=lf
|
||||||
|
*.ts text eol=lf
|
||||||
|
*.tsx text eol=lf
|
||||||
|
*.json text eol=lf
|
||||||
|
*.md text eol=lf
|
||||||
|
*.yml text eol=lf
|
||||||
|
*.yaml text eol=lf
|
||||||
|
*.css text eol=lf
|
||||||
|
*.html text eol=lf
|
||||||
|
*.svg text eol=lf
|
||||||
|
|
||||||
|
*.png binary
|
||||||
|
*.jpg binary
|
||||||
|
*.jpeg binary
|
||||||
|
*.gif binary
|
||||||
|
*.webp binary
|
||||||
|
*.ico binary
|
||||||
|
*.pdf binary
|
||||||
|
*.docx binary
|
||||||
+49
-8
@@ -1,13 +1,54 @@
|
|||||||
node_modules
|
# Dependencies and build output
|
||||||
dist
|
node_modules/
|
||||||
dist-ssr
|
**/node_modules/
|
||||||
|
dist/
|
||||||
|
**/dist/
|
||||||
|
dist-ssr/
|
||||||
|
coverage/
|
||||||
|
.vite/
|
||||||
|
|
||||||
|
# Local configuration and secrets
|
||||||
.env
|
.env
|
||||||
server/.env
|
.env.*
|
||||||
|
!.env.example
|
||||||
*.local
|
*.local
|
||||||
.env.local
|
*.pem
|
||||||
.env.*.local
|
*.key
|
||||||
|
id_rsa*
|
||||||
|
id_ed25519*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
.smoke-data/
|
||||||
|
**/.smoke-data/
|
||||||
|
data/
|
||||||
|
uploads/
|
||||||
|
storage/
|
||||||
|
*.db
|
||||||
|
*.sqlite
|
||||||
|
*.sqlite3
|
||||||
|
*.dump
|
||||||
|
*.sql
|
||||||
|
|
||||||
|
# Test and diagnostic output
|
||||||
|
playwright-report/
|
||||||
|
test-results/
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.smoke-*.log
|
||||||
|
|
||||||
|
# Archives and local backups
|
||||||
|
*.zip
|
||||||
|
*.7z
|
||||||
|
*.tar
|
||||||
|
*.tar.gz
|
||||||
|
backups/
|
||||||
|
|
||||||
|
# Editors and OS metadata
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.idea
|
Thumbs.db
|
||||||
|
.idea/
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
npm-debug.log*
|
.claude/
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
# 版本迭代记录
|
||||||
|
|
||||||
|
本项目遵循语义化版本。早期版本由经过脱敏的本地源码快照恢复，因此使用带日期的 `snapshot-*` 标签；自 `v1.0.0` 起按正式发布流程维护。
|
||||||
|
|
||||||
|
## [1.0.0] - 2026-07-30
|
||||||
|
|
||||||
|
### 新增
|
||||||
|
|
||||||
|
- Telegram、普通 WhatsApp 和企业邮箱统一消息中心。
|
||||||
|
- 多账号绑定、默认账号切换、渠道状态和账号级操作。
|
||||||
|
- WebSocket 实时消息、全站通知、已读上报和历史游标分页。
|
||||||
|
- 图片、文档、语音、贴纸、相册等媒体链路。
|
||||||
|
- 上下文感知的多语种双向翻译、逐句意图识别及独立开关。
|
||||||
|
- 每会话上下文记忆、自动压缩、最近消息优先和历史低优先级补齐。
|
||||||
|
- 情绪、风险、客户画像、雷达图、知识库、智能回复与翻译备注。
|
||||||
|
- WhatsApp 消息状态、撤回/编辑事件、输入状态、群组、联系人、代理、设备、失败重试、死信重放及备份接口。
|
||||||
|
- 团队、RBAC、API Key、审计、商机、任务、分析和支付基础能力。
|
||||||
|
- 全站蓝色品牌设计系统和 Telegram 风格消息界面。
|
||||||
|
|
||||||
|
### 修复
|
||||||
|
|
||||||
|
- 修复会话点击后错误置顶、删除群组后残留、消息列表空值崩溃。
|
||||||
|
- 修复语言切换、意图开关 JSON 写入、智能回复采纳与关闭。
|
||||||
|
- 修复头像、用户名、国家信息和渠道文案混用。
|
||||||
|
- 修复历史消息、实时会话列表、WhatsApp 媒体下载和状态同步问题。
|
||||||
|
|
||||||
|
## [snapshot-2026.07.30-pre-ui] - 2026-07-30
|
||||||
|
|
||||||
|
- 多账号与 WhatsApp 接入后的界面改造前快照。
|
||||||
|
- 已具备主要业务模块，保留后续上下文翻译与界面统一前的状态。
|
||||||
|
|
||||||
|
## [snapshot-2026.07.28-pre-multiaccount] - 2026-07-28
|
||||||
|
|
||||||
|
- Telegram 消息闭环和主要 SaaS 页面快照。
|
||||||
|
- 多账号、WhatsApp 网关与后续企业级能力尚未合入。
|
||||||
|
|
||||||
|
## [snapshot-2026.07.27-platform] - 2026-07-27
|
||||||
|
|
||||||
|
- React 前端、Node.js API、PostgreSQL 与 Telegram Gateway 集成版本。
|
||||||
|
- 建立客户、消息、AI、团队与设置等平台基础。
|
||||||
|
|
||||||
|
## [snapshot-2026.07.25-initial] - 2026-07-25
|
||||||
|
|
||||||
|
- 初始 Web 产品原型与页面结构。
|
||||||
|
- 作为历史参考保留，不建议部署。
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
# 协作与提交规范
|
||||||
|
|
||||||
|
## 分支
|
||||||
|
|
||||||
|
- `main`：始终保持可构建、可部署。
|
||||||
|
- `feature/<name>`：新功能。
|
||||||
|
- `fix/<name>`：缺陷修复。
|
||||||
|
- `docs/<name>`：仅文档。
|
||||||
|
|
||||||
|
禁止直接覆盖历史标签。合并前应同步 `main` 并完成与变更风险相匹配的测试。
|
||||||
|
|
||||||
|
## 提交信息
|
||||||
|
|
||||||
|
使用 Conventional Commits：
|
||||||
|
|
||||||
|
```text
|
||||||
|
feat(inbox): add message intent toggle
|
||||||
|
fix(whatsapp): reconcile delivery status
|
||||||
|
docs(deploy): document reverse proxy setup
|
||||||
|
```
|
||||||
|
|
||||||
|
常用类型：`feat`、`fix`、`refactor`、`test`、`docs`、`chore`、`perf`、`security`。
|
||||||
|
|
||||||
|
## 变更检查
|
||||||
|
|
||||||
|
1. 不提交密钥、账号登录态、数据库、客户媒体和本地日志。
|
||||||
|
2. 更新相关接口类型、错误文案和文档。
|
||||||
|
3. 前端至少运行 `npm run typecheck` 和 `npm run build`。
|
||||||
|
4. 后端改动运行 `server` 测试；WhatsApp 改动运行网关测试。
|
||||||
|
5. 用户路径变更补充或更新 Playwright E2E。
|
||||||
|
6. 数据结构变更必须可重复执行，并说明备份与回滚步骤。
|
||||||
|
|
||||||
|
## 发布
|
||||||
|
|
||||||
|
1. 更新 `CHANGELOG.md` 和版本号。
|
||||||
|
2. 完成全量测试和 Docker 健康检查。
|
||||||
|
3. 创建带说明的版本标签：`git tag -a vX.Y.Z -m "..."`。
|
||||||
|
4. 推送分支和标签，随后按部署文档发布。
|
||||||
@@ -1,53 +1,79 @@
|
|||||||
# 灵犀跨境
|
# 灵犀跨境
|
||||||
|
|
||||||
灵犀跨境是面向跨境业务团队的 Telegram 客户沟通与 AI 经营平台。当前版本只开放 Telegram，所有开放功能均访问真实 API、PostgreSQL、DeepSeek 和 Telegram Gateway，不包含前端 Mock 数据。
|
灵犀跨境是一套面向跨境业务团队的多渠道客户经营 SaaS。系统将 Telegram、普通 WhatsApp 账号和企业邮箱接入统一消息中心，并提供上下文翻译、逐句意图识别、情绪与风险分析、客户画像、商机、任务、知识库和经营分析能力。
|
||||||
|
|
||||||
## 服务组成
|
当前仓库包含 Web 前端、业务 API 和 WhatsApp Gateway；Telegram 通过独立部署的 Telegram Gateway 接入。开放功能均连接真实数据库和真实网关，不使用前端 Mock 作为生产数据源。
|
||||||
|
|
||||||
- React + TypeScript 前端，由 Nginx 提供静态资源和 API 反向代理。
|
## 核心能力
|
||||||
- Node.js API，负责独立租户、用户认证、CRM、会话、AI 和网关适配。
|
|
||||||
- PostgreSQL，持久化租户隔离的业务数据。
|
|
||||||
- 已有 Telegram Gateway，负责真实 Telegram 账号与 TDLib 操作。
|
|
||||||
- DeepSeek Anthropic-compatible API，负责翻译、情感、意图、风险、摘要和回复建议。
|
|
||||||
|
|
||||||
## Docker 启动
|
- 多租户注册、登录、RBAC、API Key、密码修改和会话撤销。
|
||||||
|
- 多 Telegram、WhatsApp、企业邮箱账号绑定、切换和状态管理。
|
||||||
|
- 实时会话、历史分页、已读、引用、媒体、消息状态和 WebSocket 推送。
|
||||||
|
- 自动识别目标语言的双向翻译，逐会话上下文压缩与历史后台补齐。
|
||||||
|
- 情感、意图、风险、摘要、智能回复和知识库辅助。
|
||||||
|
- 客户、标签、画像、商机、任务、团队、通知、审计和经营分析。
|
||||||
|
- WhatsApp 群组、联系人、代理、设备、重试、死信重放与备份接口。
|
||||||
|
|
||||||
1. 复制 `.env.example` 为 `.env`。
|
## 快速启动
|
||||||
2. 生成数据库、JWT、Webhook 随机密钥。
|
|
||||||
3. 设置轮换后的 `DEEPSEEK_API_KEY`。
|
要求：Docker Engine 24+、Docker Compose v2，以及一个可访问的 Telegram Gateway。
|
||||||
4. 设置 Telegram Gateway 的租户令牌、租户 ID 和账号 ID。
|
|
||||||
5. 启动：
|
|
||||||
|
|
||||||
```powershell
|
```powershell
|
||||||
|
Copy-Item .env.example .env
|
||||||
|
# 编辑 .env，替换所有 replace-with-* 配置
|
||||||
docker compose --env-file .env up -d --build
|
docker compose --env-file .env up -d --build
|
||||||
|
docker compose ps
|
||||||
```
|
```
|
||||||
|
|
||||||
默认访问地址：`http://127.0.0.1:8088`。
|
默认入口为 `http://127.0.0.1:8088`。存活与就绪检查：
|
||||||
|
|
||||||
健康检查：
|
|
||||||
|
|
||||||
```powershell
|
```powershell
|
||||||
Invoke-RestMethod http://127.0.0.1:8088/health
|
Invoke-RestMethod http://127.0.0.1:8088/health
|
||||||
Invoke-RestMethod http://127.0.0.1:8088/api/dashboard/overview
|
docker compose exec api node -e "fetch('http://127.0.0.1:3100/health/ready').then(async r=>{console.log(await r.text());process.exit(r.ok?0:1)})"
|
||||||
```
|
```
|
||||||
|
|
||||||
业务 API 需要通过注册或登录取得 Bearer Token。浏览器永远不会收到 DeepSeek 或 Telegram Gateway 服务凭据。
|
完整部署步骤、生产加固和回滚方法见 [部署文档](docs/DEPLOYMENT.md)。
|
||||||
|
|
||||||
## 开发检查
|
## 本地开发与测试
|
||||||
|
|
||||||
```powershell
|
```powershell
|
||||||
npm install
|
npm ci
|
||||||
npm run typecheck
|
npm run typecheck
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
Set-Location server
|
Push-Location server
|
||||||
npm install
|
npm ci
|
||||||
node --check src/index.js
|
npm test
|
||||||
|
Pop-Location
|
||||||
|
|
||||||
|
Push-Location whatsapp-gateway
|
||||||
|
npm ci
|
||||||
|
npm test
|
||||||
|
Pop-Location
|
||||||
|
|
||||||
|
npm run test:e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
## 安全说明
|
E2E 默认访问 `http://127.0.0.1:8088`，可通过 `E2E_BASE_URL` 修改。
|
||||||
|
|
||||||
- `.env` 已加入 `.gitignore`，严禁提交真实密钥。
|
## 文档
|
||||||
- AI 回复只提供人工确认建议，不会自动向 Telegram 发送。
|
|
||||||
- 所有业务资源都通过 JWT 中的租户 ID 隔离。
|
- [系统架构](docs/ARCHITECTURE.md)
|
||||||
- Webhook 必须配置独立随机密钥；生产部署应进一步使用 HTTPS、反向代理和 IP 白名单。
|
- [技术选型](docs/TECH-STACK.md)
|
||||||
|
- [配置说明](docs/CONFIGURATION.md)
|
||||||
|
- [部署与回滚](docs/DEPLOYMENT.md)
|
||||||
|
- [接口目录](docs/API.md)
|
||||||
|
- [测试策略](docs/TESTING.md)
|
||||||
|
- [运维手册](docs/OPERATIONS.md)
|
||||||
|
- [备份恢复](docs/BACKUP-RESTORE.md)
|
||||||
|
- [版本历史](CHANGELOG.md)
|
||||||
|
- [协作规范](CONTRIBUTING.md)
|
||||||
|
- [安全策略](SECURITY.md)
|
||||||
|
|
||||||
|
## 版本
|
||||||
|
|
||||||
|
`main` 保存当前版本。历史源码以 `snapshot-YYYY.MM.DD-*` 标签归档，当前稳定版本使用语义化标签。任何历史标签都可通过 `git checkout <tag>` 独立检出。
|
||||||
|
|
||||||
|
## 安全
|
||||||
|
|
||||||
|
禁止提交 `.env`、数据库导出、私钥、Telegram/WhatsApp 登录态或客户媒体。浏览器不接触 DeepSeek 与网关服务凭据。发现安全问题请按 [SECURITY.md](SECURITY.md) 中的私下通报流程处理。
|
||||||
|
|||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
# 安全策略
|
||||||
|
|
||||||
|
## 私下报告
|
||||||
|
|
||||||
|
安全漏洞、凭据泄漏或租户越权问题不要提交公开 Issue。请通过公司内部安全联系人或仓库维护者私下报告，并附影响范围、复现条件和建议缓解方式。
|
||||||
|
|
||||||
|
## 敏感数据
|
||||||
|
|
||||||
|
以下内容不得进入 Git：
|
||||||
|
|
||||||
|
- `.env` 与任何真实 API Key、JWT、Webhook、SMTP、数据库密码。
|
||||||
|
- SSH 私钥、证书私钥和个人访问令牌。
|
||||||
|
- Telegram TDLib、WhatsApp Baileys 登录态及关联设备凭据。
|
||||||
|
- PostgreSQL 导出、客户消息、联系人、媒体与生产日志。
|
||||||
|
|
||||||
|
若密钥曾出现在聊天、日志、压缩包或提交中，应立即轮换；仅从提交中删除并不能消除泄漏风险。
|
||||||
|
|
||||||
|
## 上线基线
|
||||||
|
|
||||||
|
- 所有公网入口启用 HTTPS、HSTS 和可信反向代理。
|
||||||
|
- 每个环境使用不同的强随机密钥；Webhook 密钥互不复用。
|
||||||
|
- PostgreSQL 与网关不直接暴露公网。
|
||||||
|
- 管理操作执行 RBAC、租户归属校验、审计和必要的二次确认。
|
||||||
|
- 定期验证备份可恢复，并为登录、Webhook、消息发送和 AI 请求设置限流与告警。
|
||||||
|
|
||||||
|
## 支持范围
|
||||||
|
|
||||||
|
安全修复优先发布到当前 `main` 和最新稳定版本。历史 `snapshot-*` 仅用于审计与回溯，不提供安全维护。
|
||||||
+81
@@ -0,0 +1,81 @@
|
|||||||
|
# API 目录
|
||||||
|
|
||||||
|
API 统一位于 `/api`，内部渠道回调位于 `/internal/webhooks`。除注册、登录、健康检查和签名 Webhook 外，业务接口均要求 `Authorization: Bearer <token>`。
|
||||||
|
|
||||||
|
成功响应采用统一数据包装；错误响应包含可展示消息和 HTTP 状态。调用方必须处理 `401`、`403`、`404`、`409`、`429` 和 `5xx`。
|
||||||
|
|
||||||
|
## 认证与安全
|
||||||
|
|
||||||
|
- `POST /api/auth/register`、`POST /api/auth/login`
|
||||||
|
- `GET /api/auth/me`
|
||||||
|
- `POST /api/auth/ws-ticket`：生成短期 WebSocket 票据
|
||||||
|
- `POST /api/auth/change-password`
|
||||||
|
- `POST /api/auth/logout-all`
|
||||||
|
- `GET|POST|DELETE /api/api-keys`
|
||||||
|
|
||||||
|
## 消息与会话
|
||||||
|
|
||||||
|
- `GET /api/conversations`
|
||||||
|
- `GET /api/conversations/:id`
|
||||||
|
- `GET /api/conversations/:id/messages/page`：游标分页
|
||||||
|
- `POST /api/conversations/:id/messages`：发送文本/回复
|
||||||
|
- `POST /api/conversations/:id/media`
|
||||||
|
- `POST /api/conversations/:id/album`
|
||||||
|
- `POST /api/conversations/:id/read`
|
||||||
|
- `POST /api/conversations/:id/presence`
|
||||||
|
- `POST /api/conversations/:id/messages/action`
|
||||||
|
- `PATCH /api/conversations/:id/messages/:messageId`
|
||||||
|
- `GET /api/conversations/:id/messages/:messageId/attachment`
|
||||||
|
- `POST /api/conversations/:id/actions`：归档、静音、清空、删除等会话动作
|
||||||
|
|
||||||
|
## 渠道
|
||||||
|
|
||||||
|
- `GET /api/channels`
|
||||||
|
- Telegram：`/api/channels/telegram/start` 以及 `phone`、`code`、`password`、`state`
|
||||||
|
- WhatsApp：`/api/channels/whatsapp/start`、状态、联系人、代理、设备、资料、指标和备份
|
||||||
|
- 邮箱：`POST /api/channels/email/connect`
|
||||||
|
- 通用：设为默认、状态、日志、删除和渠道测试
|
||||||
|
- 可靠投递：Webhook 投递记录/重放、出站任务/重试
|
||||||
|
|
||||||
|
## WhatsApp 群组
|
||||||
|
|
||||||
|
- `GET /api/conversations/:id/whatsapp/group`
|
||||||
|
- `POST /api/conversations/:id/whatsapp/group/action`
|
||||||
|
|
||||||
|
动作由服务端白名单控制，包括成员、管理员、名称、描述和邀请链接管理。
|
||||||
|
|
||||||
|
## AI
|
||||||
|
|
||||||
|
- `POST /api/ai/translate`
|
||||||
|
- `POST /api/ai/analyze`
|
||||||
|
- `POST /api/ai/replies`
|
||||||
|
- `POST /api/ai/summarize`
|
||||||
|
- `POST /api/ai/text-action`
|
||||||
|
- `POST /api/ai/adoptions`
|
||||||
|
- `GET|PATCH /api/ai/translations`
|
||||||
|
- `GET /api/conversations/:id/ai-status`
|
||||||
|
- `POST /api/conversations/:id/messages/:messageId/analyze`
|
||||||
|
|
||||||
|
AI 接口是业务增强能力。模型超时或限流不应阻断原始消息收发。
|
||||||
|
|
||||||
|
## 客户经营与管理
|
||||||
|
|
||||||
|
- 客户：列表、详情、导入、导出、查重、合并和基础 CRUD。
|
||||||
|
- 商机、任务等资源：统一 CRUD 路由。
|
||||||
|
- 团队：成员、邀请、角色、操作日志和登录记录。
|
||||||
|
- 设置、通知、知识库、计费、仪表盘、分析与全局搜索。
|
||||||
|
|
||||||
|
## Webhook
|
||||||
|
|
||||||
|
- `POST /internal/webhooks/telegram/:tenantId/:channelId`
|
||||||
|
- `POST /internal/webhooks/whatsapp/:tenantId/:channelId`
|
||||||
|
|
||||||
|
生产调用必须携带对应签名。处理器同时校验 URL 中租户/渠道与数据库归属，事件应携带稳定 ID 以实现幂等。
|
||||||
|
|
||||||
|
## 健康检查
|
||||||
|
|
||||||
|
- `GET /health/live`：进程存活。
|
||||||
|
- `GET /health/ready`：依赖就绪。
|
||||||
|
- Nginx 暴露 `/health` 供容器健康检查。
|
||||||
|
|
||||||
|
接口的请求/响应类型以 `src/services/`、`src/types/` 和 `server/src/index.js` 为当前实现准则。正式对外开放 API 前，应从路由生成 OpenAPI 3 文档并进行契约测试。
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
# 系统架构
|
||||||
|
|
||||||
|
## 1. 架构目标
|
||||||
|
|
||||||
|
灵犀跨境以“租户隔离、渠道可扩展、消息实时、AI 异步化”为核心。浏览器只访问统一 Web/API 入口；Telegram、WhatsApp、邮箱和模型凭据只保存在服务端环境与加密存储中。
|
||||||
|
|
||||||
|
```text
|
||||||
|
Browser
|
||||||
|
│ HTTPS / WebSocket
|
||||||
|
▼
|
||||||
|
Nginx (web:80)
|
||||||
|
├── React SPA
|
||||||
|
└── /api, /internal, /health ──► Node.js API (:3100)
|
||||||
|
├── PostgreSQL 16
|
||||||
|
├── DeepSeek Anthropic API
|
||||||
|
├── Telegram Gateway / TDLib
|
||||||
|
├── WhatsApp Gateway / Baileys
|
||||||
|
├── IMAP + SMTP
|
||||||
|
└── Stripe
|
||||||
|
```
|
||||||
|
|
||||||
|
## 2. 仓库结构
|
||||||
|
|
||||||
|
| 路径 | 职责 |
|
||||||
|
| --- | --- |
|
||||||
|
| `src/` | React 页面、组件、状态、API 客户端、国际化与类型 |
|
||||||
|
| `server/src/index.js` | 认证、租户业务、消息、AI、渠道、Webhook、WebSocket 与数据初始化 |
|
||||||
|
| `whatsapp-gateway/` | 普通 WhatsApp 多账号连接、消息/媒体/群组/联系人操作 |
|
||||||
|
| `tests/e2e/` | Playwright 桌面与移动端验收 |
|
||||||
|
| `docker/` | Nginx 与邮件协议测试辅助镜像 |
|
||||||
|
| `docs/` | 架构、部署、接口、测试与运维文档 |
|
||||||
|
|
||||||
|
## 3. 核心数据流
|
||||||
|
|
||||||
|
### 入站消息
|
||||||
|
|
||||||
|
1. Telegram/WhatsApp 网关向带租户和渠道标识的内部 Webhook 投递事件；邮箱轮询器从 IMAP 拉取邮件。
|
||||||
|
2. API 校验签名、渠道归属与事件幂等标识。
|
||||||
|
3. 消息、会话、联系人和状态写入 PostgreSQL。
|
||||||
|
4. API 向当前租户的 WebSocket 客户端广播增量事件。
|
||||||
|
5. 文本消息进入 AI 高优先级队列；较早历史进入低优先级补齐队列。
|
||||||
|
6. 翻译、意图、情感、风险和会话记忆完成后再次广播更新。
|
||||||
|
|
||||||
|
### 出站消息
|
||||||
|
|
||||||
|
1. 前端提交渠道、会话、正文、媒体、回复目标和客户端幂等标识。
|
||||||
|
2. API 验证 RBAC、租户归属、渠道状态与限流。
|
||||||
|
3. 先落库发送任务，再调用对应网关或 SMTP。
|
||||||
|
4. 网关状态事件持续对账已发送、已送达、已读和失败状态。
|
||||||
|
5. 可恢复错误进入持久化重试；超过阈值进入死信等待人工重放。
|
||||||
|
|
||||||
|
### 上下文 AI
|
||||||
|
|
||||||
|
- 最近消息优先处理，以保证实时聊天速度。
|
||||||
|
- 每个会话维护独立上下文；超过长度阈值后压缩为结构化记忆。
|
||||||
|
- 历史消息按游标后台补齐，避免首次打开阻塞。
|
||||||
|
- 翻译目标可自动识别，也可由坐席指定；智能回复保持人工确认发送。
|
||||||
|
|
||||||
|
## 4. 隔离与权限
|
||||||
|
|
||||||
|
- JWT 含用户、租户和角色信息；业务查询必须带 `tenant_id`。
|
||||||
|
- 渠道、会话、消息、客户、任务与管理资源均在服务端校验租户归属。
|
||||||
|
- WebSocket 使用短期票据，不把长期 JWT 放入 URL。
|
||||||
|
- API Key 仅在创建时返回明文，持久化摘要并支持撤销。
|
||||||
|
- 邮箱密码使用 `EMAIL_CREDENTIAL_KEY` 加密；网关登录态位于独立持久卷。
|
||||||
|
|
||||||
|
## 5. 可靠性边界
|
||||||
|
|
||||||
|
- PostgreSQL 是平台业务数据的事实来源。
|
||||||
|
- Telegram/WhatsApp 平台状态由异步事件最终一致对账。
|
||||||
|
- WebSocket 只用于加速展示；断线后客户端必须通过 REST 游标补齐。
|
||||||
|
- Webhook 接收快速确认，耗时处理异步化；失败投递可查询和重放。
|
||||||
|
- AI 失败不能阻断原始消息收发，任务可独立重试。
|
||||||
|
|
||||||
|
## 6. 当前约束
|
||||||
|
|
||||||
|
- Telegram Gateway 为独立仓库和独立部署，本仓库只保存适配与配置。
|
||||||
|
- 普通 WhatsApp 接入依赖非官方 Web 多设备协议，生产使用前必须评估账号风控和平台条款。
|
||||||
|
- API 目前集中在单入口文件，业务增长后应按领域拆分路由、服务、仓储和迁移文件。
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
# 备份与恢复
|
||||||
|
|
||||||
|
## 备份范围
|
||||||
|
|
||||||
|
1. PostgreSQL：租户、用户、客户、消息、任务、审计和持久队列。
|
||||||
|
2. `lingxi_whatsapp_data`：WhatsApp 多设备登录态与网关缓存。
|
||||||
|
3. Telegram Gateway：由其独立部署执行 TDLib 数据和配置备份。
|
||||||
|
4. 环境密钥：存入公司 Secret 管理系统，不与数据备份打包。
|
||||||
|
5. 对象存储或上传目录：若生产启用，按独立生命周期备份。
|
||||||
|
|
||||||
|
## PostgreSQL
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose exec -T postgres pg_dump \
|
||||||
|
-U "${LX_DB_USER:-lingxi}" \
|
||||||
|
-d "${LX_DB_NAME:-lingxi_crossborder}" \
|
||||||
|
-Fc > "lingxi-postgres-$(date +%Y%m%d-%H%M%S).dump"
|
||||||
|
```
|
||||||
|
|
||||||
|
恢复必须在隔离环境先演练：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
createdb lingxi_restore_test
|
||||||
|
pg_restore --clean --if-exists --no-owner \
|
||||||
|
--dbname lingxi_restore_test lingxi-postgres-YYYYMMDD-HHMMSS.dump
|
||||||
|
```
|
||||||
|
|
||||||
|
## WhatsApp 持久卷
|
||||||
|
|
||||||
|
备份前短暂停止网关写入，避免文件不一致：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose stop whatsapp-gateway
|
||||||
|
docker run --rm \
|
||||||
|
-v lingxi-crossborder_lingxi_whatsapp_data:/source:ro \
|
||||||
|
-v "$PWD/backups:/backup" \
|
||||||
|
alpine tar -czf /backup/whatsapp-data.tar.gz -C /source .
|
||||||
|
docker compose start whatsapp-gateway
|
||||||
|
```
|
||||||
|
|
||||||
|
恢复前保留现有卷副本，在测试环境验证账号能重连；登录态过期时应走重新授权，不能把旧凭据强行用于其他账号。
|
||||||
|
|
||||||
|
## 策略
|
||||||
|
|
||||||
|
- PostgreSQL：每日全量，生产规模扩大后增加连续归档或托管 PITR。
|
||||||
|
- 网关登录态：每日加密备份，账号变更后额外备份。
|
||||||
|
- 至少保留 7 个日备、4 个周备、6 个月备，按法规和客户合同调整。
|
||||||
|
- 备份使用独立凭据、服务端加密和异地存储。
|
||||||
|
|
||||||
|
## 恢复演练
|
||||||
|
|
||||||
|
每月至少一次：
|
||||||
|
|
||||||
|
1. 在隔离网络创建全新环境。
|
||||||
|
2. 恢复数据库、网关数据和必要配置。
|
||||||
|
3. 验证租户数、关键表行数和最近消息时间。
|
||||||
|
4. 验证登录、会话读取、渠道重连、收发和媒体下载。
|
||||||
|
5. 记录 RPO、RTO、失败点和改进项。
|
||||||
|
|
||||||
|
仅“备份成功”不等于可恢复；没有完成验收的备份不得视为合格。
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
# 配置说明
|
||||||
|
|
||||||
|
以 `.env.example` 为唯一模板。开发、测试、生产分别保存自己的 `.env`，不得提交 Git。
|
||||||
|
|
||||||
|
## 基础配置
|
||||||
|
|
||||||
|
| 变量 | 必填 | 说明 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `LX_DB_USER` | 否 | PostgreSQL 用户，默认 `lingxi` |
|
||||||
|
| `LX_DB_PASSWORD` | 是 | 数据库强密码 |
|
||||||
|
| `LX_DB_NAME` | 否 | 数据库名，默认 `lingxi_crossborder` |
|
||||||
|
| `LX_JWT_SECRET` | 是 | 至少 32 字节随机值 |
|
||||||
|
| `LX_WEB_PORT` | 否 | Web 暴露端口，默认 `8088` |
|
||||||
|
| `APP_PUBLIC_URL` | 是 | 用户访问的 HTTPS 根地址 |
|
||||||
|
| `PUBLIC_WEBHOOK_BASE_URL` | 是 | 外部网关可访问的 Webhook 根地址 |
|
||||||
|
|
||||||
|
## AI
|
||||||
|
|
||||||
|
| 变量 | 必填 | 说明 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `DEEPSEEK_API_KEY` | 是 | 服务端模型密钥 |
|
||||||
|
| `DEEPSEEK_MODEL` | 是 | 当前默认 `deepseek-v4-flash` |
|
||||||
|
|
||||||
|
API 基础地址在 Compose 中设置为 `https://api.deepseek.com/anthropic`。切换模型前应验证 Anthropic 兼容接口、JSON 输出稳定性、延迟和成本。
|
||||||
|
|
||||||
|
## Telegram
|
||||||
|
|
||||||
|
| 变量 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `TELEGRAM_GATEWAY_URL` | 独立 Telegram Gateway API 地址 |
|
||||||
|
| `TELEGRAM_GATEWAY_TOKEN` | 网关服务令牌 |
|
||||||
|
| `TELEGRAM_GATEWAY_TENANT_ID` | 网关租户 |
|
||||||
|
| `TELEGRAM_GATEWAY_SERVICE_EMAIL` / `PASSWORD` | 服务账号 |
|
||||||
|
| `TELEGRAM_GATEWAY_ACCOUNT_ID` | 可选默认账号 |
|
||||||
|
| `TELEGRAM_WEBHOOK_SECRET` | Telegram Webhook 独立签名密钥 |
|
||||||
|
|
||||||
|
## WhatsApp
|
||||||
|
|
||||||
|
| 变量 | 说明 |
|
||||||
|
| --- | --- |
|
||||||
|
| `WHATSAPP_GATEWAY_TOKEN` | API 与网关间认证，至少 32 位 |
|
||||||
|
| `WHATSAPP_WEBHOOK_SECRET` | Webhook 签名密钥，不能与 Token 相同 |
|
||||||
|
| `WHATSAPP_LOG_LEVEL` | `info`、`warn` 或 `error` |
|
||||||
|
|
||||||
|
WhatsApp 登录态保存在 `lingxi_whatsapp_data` 卷，不得复制到源码目录或提交 Git。
|
||||||
|
|
||||||
|
## 邮箱与支付
|
||||||
|
|
||||||
|
- 团队邀请：`SMTP_HOST`、`SMTP_PORT`、`SMTP_SECURE`、`SMTP_USER`、`SMTP_PASSWORD`、`SMTP_FROM`。
|
||||||
|
- 企业邮箱渠道使用用户提供的 IMAP/SMTP 信息；`EMAIL_CREDENTIAL_KEY` 用于加密凭据。
|
||||||
|
- Stripe：`STRIPE_SECRET_KEY`、`STRIPE_WEBHOOK_SECRET` 和各套餐 `STRIPE_PRICE_*`。
|
||||||
|
|
||||||
|
## 生成随机密钥
|
||||||
|
|
||||||
|
PowerShell 示例：
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
$bytes = New-Object byte[] 48
|
||||||
|
[Security.Cryptography.RandomNumberGenerator]::Fill($bytes)
|
||||||
|
[Convert]::ToBase64String($bytes)
|
||||||
|
```
|
||||||
|
|
||||||
|
每个变量单独生成，不复用。生产密钥应放入部署平台的 Secret 管理，不写入 Compose、镜像或 CI 日志。
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
# 部署与回滚
|
||||||
|
|
||||||
|
## 1. 前置条件
|
||||||
|
|
||||||
|
- Linux x86_64 主机，建议 4 核、8 GB 内存、50 GB 可扩展磁盘。
|
||||||
|
- Docker Engine 24+、Compose v2。
|
||||||
|
- 域名、HTTPS 证书和可访问的 Telegram Gateway。
|
||||||
|
- 出站可访问 Telegram、WhatsApp、DeepSeek、邮箱服务和 Stripe。
|
||||||
|
|
||||||
|
## 2. 首次部署
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone ssh://git@git.ohkeji.cn:23/wmq/lingxi-web.git
|
||||||
|
cd lingxi-web
|
||||||
|
cp .env.example .env
|
||||||
|
# 编辑 .env 并替换全部占位值
|
||||||
|
docker compose --env-file .env build
|
||||||
|
docker compose --env-file .env up -d
|
||||||
|
docker compose ps
|
||||||
|
```
|
||||||
|
|
||||||
|
检查：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -fsS http://127.0.0.1:8088/health
|
||||||
|
docker compose exec api node -e "fetch('http://127.0.0.1:3100/health/ready').then(async r=>{console.log(await r.text());process.exit(r.ok?0:1)})"
|
||||||
|
docker compose logs --tail=100 api whatsapp-gateway web
|
||||||
|
```
|
||||||
|
|
||||||
|
## 3. 生产入口
|
||||||
|
|
||||||
|
在 Compose 外层部署 Caddy、Nginx 或云负载均衡：
|
||||||
|
|
||||||
|
- 只对公网开放 80/443。
|
||||||
|
- 将 HTTPS 请求转发到 `127.0.0.1:8088`。
|
||||||
|
- 保留 `Host`、`X-Forwarded-For`、`X-Forwarded-Proto`。
|
||||||
|
- WebSocket 路径启用 Upgrade/Connection 头并提高空闲超时。
|
||||||
|
- PostgreSQL、API、WhatsApp Gateway 不映射公网端口。
|
||||||
|
|
||||||
|
将 `APP_PUBLIC_URL` 和 `PUBLIC_WEBHOOK_BASE_URL` 改为正式 HTTPS 地址，随后重建 API。
|
||||||
|
|
||||||
|
## 4. 更新
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git fetch --tags
|
||||||
|
git checkout main
|
||||||
|
git pull --ff-only
|
||||||
|
docker compose --env-file .env build
|
||||||
|
docker compose --env-file .env up -d
|
||||||
|
docker compose ps
|
||||||
|
```
|
||||||
|
|
||||||
|
更新前先执行数据库和 WhatsApp 登录态备份。更新后验证登录、渠道状态、收发、WebSocket、AI、媒体和健康检查。
|
||||||
|
|
||||||
|
## 5. 回滚
|
||||||
|
|
||||||
|
1. 记录当前版本：`git describe --tags --always`。
|
||||||
|
2. 恢复与目标版本兼容的数据库备份。
|
||||||
|
3. 检出稳定标签，例如 `git checkout v1.0.0`。
|
||||||
|
4. 重新构建并启动：`docker compose up -d --build`。
|
||||||
|
5. 执行健康和关键业务检查。
|
||||||
|
|
||||||
|
`snapshot-*` 是历史源码归档，不保证数据库向后兼容，不应直接作为生产回滚点。
|
||||||
|
|
||||||
|
## 6. 零停机演进
|
||||||
|
|
||||||
|
当前 Compose 是单实例，会有短暂重启窗口。需要零停机时应：
|
||||||
|
|
||||||
|
- 将 PostgreSQL 迁移到托管或高可用实例。
|
||||||
|
- 将 Web/API 部署为至少两个实例并使用外部负载均衡。
|
||||||
|
- WebSocket 使用共享事件总线或粘性会话。
|
||||||
|
- 将持久任务改用共享队列并确保幂等。
|
||||||
|
- 数据库变更采用“先兼容、再切换、后清理”的多阶段迁移。
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
# 运维手册
|
||||||
|
|
||||||
|
## 日常检查
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
docker compose ps
|
||||||
|
docker compose logs --since=30m api
|
||||||
|
docker compose logs --since=30m whatsapp-gateway
|
||||||
|
Invoke-RestMethod http://127.0.0.1:8088/health
|
||||||
|
docker compose exec api node -e "fetch('http://127.0.0.1:3100/health/ready').then(async r=>{console.log(await r.text());process.exit(r.ok?0:1)})"
|
||||||
|
```
|
||||||
|
|
||||||
|
重点关注：API 错误率、Webhook 延迟与死信数、出站队列深度、WebSocket 在线数、AI 延迟/限流、数据库连接与磁盘、渠道断线数。
|
||||||
|
|
||||||
|
## 常见故障
|
||||||
|
|
||||||
|
### 页面“加载失败”
|
||||||
|
|
||||||
|
1. 检查 `web` 与 `api` 健康状态。
|
||||||
|
2. 检查浏览器请求的 HTTP 状态和 API 日志。
|
||||||
|
3. `401` 重新登录；`403` 检查角色；`5xx` 检查数据库和外部依赖。
|
||||||
|
4. 不要通过清库或删除持久卷解决普通错误。
|
||||||
|
|
||||||
|
### 渠道显示已连接但无消息
|
||||||
|
|
||||||
|
1. 验证渠道最近心跳、Webhook 状态和投递日志。
|
||||||
|
2. 检查 Webhook 地址是否能从网关容器访问。
|
||||||
|
3. 检查签名密钥是否一致、渠道 ID 是否属于当前租户。
|
||||||
|
4. 触发安全的状态对账；不要反复解绑账号。
|
||||||
|
|
||||||
|
### WebSocket 不实时
|
||||||
|
|
||||||
|
1. 确认反向代理允许 Upgrade。
|
||||||
|
2. 检查短期票据是否过期以及客户端是否自动重连。
|
||||||
|
3. 断线期间通过 REST 游标补齐，不依赖丢失的内存事件。
|
||||||
|
|
||||||
|
### AI 变慢或失败
|
||||||
|
|
||||||
|
1. 查看模型响应状态、超时和限流。
|
||||||
|
2. 确认高优先级实时队列未被历史补齐占满。
|
||||||
|
3. 暂停历史补齐而不是暂停消息接收。
|
||||||
|
4. 原始消息应照常展示，待模型恢复后重试增强任务。
|
||||||
|
|
||||||
|
## 变更与事件处理
|
||||||
|
|
||||||
|
- 配置、密钥、数据库和网关升级都先备份并记录操作人。
|
||||||
|
- 重大故障先止损：暂停高风险发送、保留日志、不要破坏现场。
|
||||||
|
- 恢复后补做根因、影响租户、时间线、数据一致性和预防措施记录。
|
||||||
|
|
||||||
|
## 告警建议
|
||||||
|
|
||||||
|
- 健康检查连续 3 次失败。
|
||||||
|
- 5 分钟 API 5xx 比例超过 2%。
|
||||||
|
- Webhook 最老未处理任务超过 60 秒或死信新增。
|
||||||
|
- WhatsApp/Telegram 渠道离线超过 2 分钟。
|
||||||
|
- PostgreSQL 磁盘超过 75%、连接超过 80%。
|
||||||
|
- AI P95 超过目标或 `429` 持续出现。
|
||||||
|
- 备份任务失败或超过 24 小时未成功。
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
# 技术选型
|
||||||
|
|
||||||
|
## Web
|
||||||
|
|
||||||
|
| 技术 | 版本范围 | 选择原因 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| React | 18.3 | 组件生态成熟，适合高交互消息工作台 |
|
||||||
|
| TypeScript | 5.7 | 为接口、消息事件和页面状态提供静态约束 |
|
||||||
|
| Vite | 5.4 | 本地启动和生产构建快速 |
|
||||||
|
| React Router | 7.x | 页面路由和错误边界 |
|
||||||
|
| TanStack Query | 5.x | 服务端状态缓存、刷新和失败重试 |
|
||||||
|
| Zustand | 4.x | 轻量跨组件客户端状态 |
|
||||||
|
| Tailwind CSS | 3.4 | 设计令牌与响应式界面 |
|
||||||
|
| Recharts | 2.15 | 仪表盘趋势和客户画像雷达图 |
|
||||||
|
| Zod + React Hook Form | 3.x / 7.x | 表单校验与可维护的输入状态 |
|
||||||
|
| Lucide React | 0.462 | 一致的线性图标系统 |
|
||||||
|
|
||||||
|
## API 与数据
|
||||||
|
|
||||||
|
| 技术 | 作用 |
|
||||||
|
| --- | --- |
|
||||||
|
| Node.js 20 | 前后端统一运行时，适合 I/O 密集的消息网关 |
|
||||||
|
| Express 5 | REST、Webhook 与中间件 |
|
||||||
|
| PostgreSQL 16 | 多租户业务数据、队列和审计的持久化 |
|
||||||
|
| `pg` | 直接、透明的 SQL 访问 |
|
||||||
|
| `ws` | 实时消息与状态广播 |
|
||||||
|
| JWT + bcryptjs | 身份令牌与密码哈希 |
|
||||||
|
| Helmet + CORS | 基础 HTTP 安全头和来源约束 |
|
||||||
|
| IMAPFlow + Nodemailer | 企业邮箱收取与发送 |
|
||||||
|
| Mailparser | MIME 邮件解析 |
|
||||||
|
| Mammoth + pdf-parse | DOCX/PDF 知识文件抽取 |
|
||||||
|
|
||||||
|
## 渠道与 AI
|
||||||
|
|
||||||
|
| 组件 | 作用 |
|
||||||
|
| --- | --- |
|
||||||
|
| Telegram Gateway + TDLib | 普通 Telegram 账号登录、同步和操作 |
|
||||||
|
| Baileys 7 | WhatsApp 多设备连接、消息和群组能力 |
|
||||||
|
| DeepSeek Anthropic-compatible API | 翻译、意图、情感、风险、摘要和回复建议 |
|
||||||
|
| Stripe | 套餐结算与 Webhook 对账 |
|
||||||
|
|
||||||
|
## 交付与质量
|
||||||
|
|
||||||
|
| 技术 | 作用 |
|
||||||
|
| --- | --- |
|
||||||
|
| Docker Compose | 本地、测试和单机生产编排 |
|
||||||
|
| Nginx | 静态站点、SPA fallback、API/WebSocket 反向代理 |
|
||||||
|
| Node Test Runner | API 与网关单元/协议测试 |
|
||||||
|
| Playwright | Chromium 桌面与移动端视觉/交互 E2E |
|
||||||
|
|
||||||
|
## 取舍
|
||||||
|
|
||||||
|
- 当前采用模块化单体 API，部署简单、事务边界清晰；代码量继续增长时应优先拆文件而不是立即拆微服务。
|
||||||
|
- PostgreSQL 同时承载业务和持久任务，减少早期基础设施；高吞吐阶段可引入 Redis 与专用队列。
|
||||||
|
- WhatsApp 普通账号接入覆盖面高，但稳定性和合规性弱于官方 Business Platform，应为企业客户预留官方适配器。
|
||||||
|
- AI 采用异步增强而非消息主链路依赖，模型故障时仍可正常沟通。
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
# 测试策略
|
||||||
|
|
||||||
|
## 测试层次
|
||||||
|
|
||||||
|
| 层次 | 命令 | 覆盖 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 类型检查 | `npm run typecheck` | 前端 TypeScript |
|
||||||
|
| 生产构建 | `npm run build` | 类型、打包、资源引用 |
|
||||||
|
| API 单元/业务 | `npm test --prefix server` | 业务函数、权限与数据逻辑 |
|
||||||
|
| 邮件协议 | `npm run test:email-protocol --prefix server` | IMAP/SMTP 协议 |
|
||||||
|
| 邮件 API E2E | `npm run test:email-api --prefix server` | 真实测试邮件服务链路 |
|
||||||
|
| WhatsApp 网关 | `npm test --prefix whatsapp-gateway` | 路由、状态、消息与可靠性 |
|
||||||
|
| 浏览器 E2E | `npm run test:e2e` | 桌面/移动端主要用户路径 |
|
||||||
|
|
||||||
|
## 提交前最低要求
|
||||||
|
|
||||||
|
- 文档或纯样式：类型检查、构建、相关页面 E2E。
|
||||||
|
- 前端业务：类型检查、构建、完整 Playwright。
|
||||||
|
- API：语法检查、API 测试、相关 E2E。
|
||||||
|
- 网关：网关测试、容器健康、真实测试账号冒烟。
|
||||||
|
- 认证、租户、支付、备份：完整回归并人工复核安全边界。
|
||||||
|
|
||||||
|
## 真实链路验收
|
||||||
|
|
||||||
|
Mock 测试不能证明渠道真实可用。发布前使用无重要数据的测试账号逐项验证：
|
||||||
|
|
||||||
|
1. Telegram 手机号、验证码、二步密码登录。
|
||||||
|
2. WhatsApp QR/配对、断开、重连和多账号切换。
|
||||||
|
3. 邮箱 IMAP 首次同步、SMTP 发信和附件。
|
||||||
|
4. 双向文本、引用、图片、文档、语音、贴纸、相册。
|
||||||
|
5. 已发送、送达、已读、编辑、撤回、输入状态。
|
||||||
|
6. 历史分页、断网恢复、WebSocket 重连和增量补齐。
|
||||||
|
7. 多语言翻译、意图开关、会话记忆压缩和 AI 失败降级。
|
||||||
|
8. Webhook 失败重试、死信、人工重放和幂等。
|
||||||
|
9. RBAC 越权请求、租户交叉资源 ID 和登录限流。
|
||||||
|
|
||||||
|
## 测试数据
|
||||||
|
|
||||||
|
- 只使用专用测试租户和测试账号。
|
||||||
|
- 不把手机号、验证码、会话凭据、邮件密码和生产消息写入测试代码或报告。
|
||||||
|
- Playwright 失败产物可能包含页面数据；归档前脱敏，且不得提交 Git。
|
||||||
|
|
||||||
|
## 发布记录
|
||||||
|
|
||||||
|
每次版本标签应记录执行日期、提交 SHA、环境、测试命令、通过/跳过/失败数量和已知限制。跳过项必须说明原因，不能等同于通过。
|
||||||
@@ -4,6 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="description" content="灵犀跨境 - 让跨境沟通更简单。面向中小外贸企业的跨境AI经营服务平台。" />
|
<meta name="description" content="灵犀跨境 - 让跨境沟通更简单。面向中小外贸企业的跨境AI经营服务平台。" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/brand-mark.svg" />
|
||||||
|
<meta name="theme-color" content="#2563EB" />
|
||||||
<title>灵犀跨境 · 跨境AI经营服务平台</title>
|
<title>灵犀跨境 · 跨境AI经营服务平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -5,6 +5,9 @@ export default defineConfig({
|
|||||||
timeout: 30_000,
|
timeout: 30_000,
|
||||||
expect: { timeout: 10_000 },
|
expect: { timeout: 10_000 },
|
||||||
fullyParallel: false,
|
fullyParallel: false,
|
||||||
|
// E2E projects share one real tenant and gateway; serialize mutations to avoid
|
||||||
|
// desktop/mobile runs racing on conversation ordering and channel state.
|
||||||
|
workers: 1,
|
||||||
retries: 0,
|
retries: 0,
|
||||||
reporter: [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]],
|
reporter: [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]],
|
||||||
use: {
|
use: {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>灵犀跨境</title>
|
||||||
|
<image href="/brand-mark.png" width="512" height="512" preserveAspectRatio="xMidYMid meet"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 232 B |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<title>灵犀跨境品牌符号</title>
|
||||||
|
<image href="/brand-mark.png" width="512" height="512" preserveAspectRatio="xMidYMid meet"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 244 B |
Generated
+7
@@ -14,6 +14,7 @@
|
|||||||
"helmet": "^8.1.0",
|
"helmet": "^8.1.0",
|
||||||
"imapflow": "^1.6.1",
|
"imapflow": "^1.6.1",
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"libphonenumber-js": "^1.11.20",
|
||||||
"mailparser": "^3.9.14",
|
"mailparser": "^3.9.14",
|
||||||
"mammoth": "^1.9.0",
|
"mammoth": "^1.9.0",
|
||||||
"nodemailer": "^7.0.5",
|
"nodemailer": "^7.0.5",
|
||||||
@@ -891,6 +892,12 @@
|
|||||||
"libqp": "2.1.1"
|
"libqp": "2.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/libphonenumber-js": {
|
||||||
|
"version": "1.11.20",
|
||||||
|
"resolved": "https://registry.npmmirror.com/libphonenumber-js/-/libphonenumber-js-1.11.20.tgz",
|
||||||
|
"integrity": "sha512-/ipwAMvtSZRdiQBHqW1qxqeYiBMzncOQLVA+62MWYr7N4m7Q2jqpJ0WgT7zlOEOpyLRSqrMXidbJpC0J77AaKA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/libqp": {
|
"node_modules/libqp": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/libqp/-/libqp-2.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/libqp/-/libqp-2.1.1.tgz",
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
"helmet": "^8.1.0",
|
"helmet": "^8.1.0",
|
||||||
"imapflow": "^1.6.1",
|
"imapflow": "^1.6.1",
|
||||||
"jsonwebtoken": "^9.0.2",
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"libphonenumber-js": "^1.11.20",
|
||||||
"mailparser": "^3.9.14",
|
"mailparser": "^3.9.14",
|
||||||
"mammoth": "^1.9.0",
|
"mammoth": "^1.9.0",
|
||||||
"nodemailer": "^7.0.5",
|
"nodemailer": "^7.0.5",
|
||||||
|
|||||||
+21
-6
@@ -7,7 +7,11 @@ function parseJson(text) {
|
|||||||
return JSON.parse(cleaned)
|
return JSON.parse(cleaned)
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function deepseek(system, user, json = false) {
|
export async function deepseek(system, user, jsonOrOptions = false) {
|
||||||
|
const options = typeof jsonOrOptions === 'boolean'
|
||||||
|
? { json: jsonOrOptions }
|
||||||
|
: { ...(jsonOrOptions || {}) }
|
||||||
|
const json = Boolean(options.json)
|
||||||
const apiKey = process.env.DEEPSEEK_API_KEY
|
const apiKey = process.env.DEEPSEEK_API_KEY
|
||||||
if (!apiKey) throw Object.assign(new Error('DEEPSEEK_API_KEY 尚未配置'), { status: 503 })
|
if (!apiKey) throw Object.assign(new Error('DEEPSEEK_API_KEY 尚未配置'), { status: 503 })
|
||||||
const endpoint = `${(process.env.DEEPSEEK_BASE_URL || 'https://api.deepseek.com/anthropic').replace(/\/$/, '')}/v1/messages`
|
const endpoint = `${(process.env.DEEPSEEK_BASE_URL || 'https://api.deepseek.com/anthropic').replace(/\/$/, '')}/v1/messages`
|
||||||
@@ -17,7 +21,10 @@ export async function deepseek(system, user, json = false) {
|
|||||||
|
|
||||||
for (let attempt = 0; attempt < attempts; attempt += 1) {
|
for (let attempt = 0; attempt < attempts; attempt += 1) {
|
||||||
const controller = new AbortController()
|
const controller = new AbortController()
|
||||||
const timeout = setTimeout(() => controller.abort(), Number(process.env.AI_TIMEOUT_MS || 45000))
|
const timeout = setTimeout(
|
||||||
|
() => controller.abort(),
|
||||||
|
Number(options.timeoutMs || process.env.AI_TIMEOUT_MS || 30000),
|
||||||
|
)
|
||||||
try {
|
try {
|
||||||
const response = await fetch(endpoint, {
|
const response = await fetch(endpoint, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -29,8 +36,11 @@ export async function deepseek(system, user, json = false) {
|
|||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
model: process.env.DEEPSEEK_MODEL || 'deepseek-v4-flash',
|
model: process.env.DEEPSEEK_MODEL || 'deepseek-v4-flash',
|
||||||
max_tokens: Number(process.env.AI_MAX_TOKENS || 4096),
|
max_tokens: Number(options.maxTokens || process.env.AI_MAX_TOKENS || 4096),
|
||||||
temperature: json ? 0 : 0.3,
|
temperature: options.temperature ?? (json ? 0 : 0.3),
|
||||||
|
thinking: options.thinking === true
|
||||||
|
? { type: 'enabled' }
|
||||||
|
: { type: 'disabled' },
|
||||||
system,
|
system,
|
||||||
messages: [{ role: 'user', content: [{ type: 'text', text: prompt }] }],
|
messages: [{ role: 'user', content: [{ type: 'text', text: prompt }] }],
|
||||||
}),
|
}),
|
||||||
@@ -47,6 +57,11 @@ export async function deepseek(system, user, json = false) {
|
|||||||
lastError = error
|
lastError = error
|
||||||
prompt = `${user}\n\n上一次响应不是合法 JSON。请重新生成完整结果：只允许输出一个可被 JSON.parse 直接解析的 JSON 值；不得使用 Markdown；字符串中的双引号、换行和反斜杠必须正确转义。`
|
prompt = `${user}\n\n上一次响应不是合法 JSON。请重新生成完整结果：只允许输出一个可被 JSON.parse 直接解析的 JSON 值；不得使用 Markdown；字符串中的双引号、换行和反斜杠必须正确转义。`
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error?.name === 'AbortError') {
|
||||||
|
throw Object.assign(new Error('AI 响应超时，请稍后重试'), { status: 504 })
|
||||||
|
}
|
||||||
|
throw error
|
||||||
} finally {
|
} finally {
|
||||||
clearTimeout(timeout)
|
clearTimeout(timeout)
|
||||||
}
|
}
|
||||||
@@ -54,8 +69,8 @@ export async function deepseek(system, user, json = false) {
|
|||||||
throw Object.assign(new Error('AI 返回格式异常，自动重试后仍无法解析'), { status: 502, cause: lastError })
|
throw Object.assign(new Error('AI 返回格式异常，自动重试后仍无法解析'), { status: 502, cause: lastError })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function conversationContext(messages) {
|
export function conversationContext(messages, limit = 30) {
|
||||||
return messages.slice(-80).map((m) => {
|
return messages.slice(-limit).map((m) => {
|
||||||
const role = m.sender === 'agent' ? '坐席' : m.sender === 'system' ? '系统' : '客户'
|
const role = m.sender === 'agent' ? '坐席' : m.sender === 'system' ? '系统' : '客户'
|
||||||
const content = m.originalText || m.attachmentName || `[${m.type || '消息'}]`
|
const content = m.originalText || m.attachmentName || `[${m.type || '消息'}]`
|
||||||
const translation = m.translatedText && m.translatedText !== content ? `（译文：${m.translatedText}）` : ''
|
const translation = m.translatedText && m.translatedText !== content ? `（译文：${m.translatedText}）` : ''
|
||||||
|
|||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { parsePhoneNumberFromString } from 'libphonenumber-js'
|
||||||
|
|
||||||
|
const VALID_SOURCE = new Set(['manual', 'account-profile', 'phone-prefix', 'unknown'])
|
||||||
|
|
||||||
|
export function normalizeCountryCode(value) {
|
||||||
|
const code = String(value || '').trim().toUpperCase()
|
||||||
|
return /^[A-Z]{2}$/.test(code) ? code : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export function inferCountryFromPhone(value) {
|
||||||
|
const raw = String(value || '').trim()
|
||||||
|
if (!raw) return ''
|
||||||
|
const normalized = raw.startsWith('+') ? raw : `+${raw.replace(/[^\d]/g, '')}`
|
||||||
|
try {
|
||||||
|
return normalizeCountryCode(parsePhoneNumberFromString(normalized)?.country)
|
||||||
|
} catch {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveCustomerCountry(input = {}, existing = {}, options = {}) {
|
||||||
|
const manualCountry = normalizeCountryCode(input.country)
|
||||||
|
if (options.manual === true) {
|
||||||
|
return {
|
||||||
|
country: manualCountry,
|
||||||
|
countrySource: manualCountry ? 'manual' : 'unknown',
|
||||||
|
countryConfidence: manualCountry ? 1 : 0,
|
||||||
|
countryInferredAt: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingSource = VALID_SOURCE.has(existing.countrySource)
|
||||||
|
? existing.countrySource
|
||||||
|
: 'unknown'
|
||||||
|
if (existingSource === 'manual' && normalizeCountryCode(existing.country)) {
|
||||||
|
return {
|
||||||
|
country: normalizeCountryCode(existing.country),
|
||||||
|
countrySource: 'manual',
|
||||||
|
countryConfidence: 1,
|
||||||
|
countryInferredAt: existing.countryInferredAt || existing.updatedAt,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const accountCountry = normalizeCountryCode(
|
||||||
|
input.accountCountry || input.countryCode || input.profileCountry,
|
||||||
|
)
|
||||||
|
if (accountCountry) {
|
||||||
|
return {
|
||||||
|
country: accountCountry,
|
||||||
|
countrySource: 'account-profile',
|
||||||
|
countryConfidence: 0.98,
|
||||||
|
countryInferredAt: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const phoneCountry = inferCountryFromPhone(input.phone || existing.phone)
|
||||||
|
if (phoneCountry) {
|
||||||
|
return {
|
||||||
|
country: phoneCountry,
|
||||||
|
countrySource: 'phone-prefix',
|
||||||
|
countryConfidence: 0.92,
|
||||||
|
countryInferredAt: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const preserved = normalizeCountryCode(input.country || existing.country)
|
||||||
|
const preservedSource = VALID_SOURCE.has(input.countrySource)
|
||||||
|
? input.countrySource
|
||||||
|
: existingSource
|
||||||
|
if (preserved && preservedSource !== 'unknown') {
|
||||||
|
return {
|
||||||
|
country: preserved,
|
||||||
|
countrySource: preservedSource,
|
||||||
|
countryConfidence: Number(input.countryConfidence ?? existing.countryConfidence ?? 0.7),
|
||||||
|
countryInferredAt: input.countryInferredAt || existing.countryInferredAt,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
country: '',
|
||||||
|
countrySource: 'unknown',
|
||||||
|
countryConfidence: 0,
|
||||||
|
countryInferredAt: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
+4
-1
@@ -90,8 +90,11 @@ export async function deleteResource(tenantId, kind, id) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function audit(req, action, target, detail = {}) {
|
export async function audit(req, action, target, detail = {}) {
|
||||||
|
// pg 会把顶层 JavaScript 数组编码成 PostgreSQL 数组文本（如 {ai}），
|
||||||
|
// jsonb 无法解析该格式。显式 JSON 序列化可同时兼容对象、数组和标量。
|
||||||
|
const serializedDetail = JSON.stringify(detail ?? {})
|
||||||
await pool.query(
|
await pool.query(
|
||||||
'INSERT INTO audit_logs(id,tenant_id,user_id,action,target,detail,ip) VALUES($1,$2,$3,$4,$5,$6,$7)',
|
'INSERT INTO audit_logs(id,tenant_id,user_id,action,target,detail,ip) VALUES($1,$2,$3,$4,$5,$6,$7)',
|
||||||
[uid(), req.auth?.tenantId ?? null, req.auth?.userId ?? null, action, target, detail, req.ip],
|
[uid(), req.auth?.tenantId ?? null, req.auth?.userId ?? null, action, target, serializedDetail, req.ip],
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
+866
-73
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,107 @@
|
|||||||
|
function normalize(value) {
|
||||||
|
return String(value || '')
|
||||||
|
.normalize('NFKC')
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
|
.trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function knowledgeTokens(value) {
|
||||||
|
const text = normalize(value)
|
||||||
|
const tokens = new Set(text.match(/[a-z0-9][a-z0-9._+-]{1,}/g) || [])
|
||||||
|
const chineseRuns = text.match(/[\u3400-\u9fff]+/g) || []
|
||||||
|
for (const run of chineseRuns) {
|
||||||
|
if (run.length === 1) tokens.add(run)
|
||||||
|
for (let size = 2; size <= 3; size += 1) {
|
||||||
|
for (let index = 0; index <= run.length - size; index += 1) {
|
||||||
|
tokens.add(run.slice(index, index + size))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [...tokens].slice(0, 300)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function chunkKnowledge(content, maximum = 900, overlap = 120) {
|
||||||
|
const text = String(content || '').replace(/\r\n/g, '\n').trim()
|
||||||
|
if (!text) return []
|
||||||
|
const paragraphs = text.split(/\n{2,}/).map((item) => item.trim()).filter(Boolean)
|
||||||
|
const chunks = []
|
||||||
|
let current = ''
|
||||||
|
const flush = () => {
|
||||||
|
if (!current.trim()) return
|
||||||
|
chunks.push(current.trim())
|
||||||
|
current = current.slice(-overlap)
|
||||||
|
}
|
||||||
|
for (const paragraph of paragraphs.length ? paragraphs : [text]) {
|
||||||
|
if (paragraph.length > maximum) {
|
||||||
|
if (current) flush()
|
||||||
|
for (let start = 0; start < paragraph.length; start += maximum - overlap) {
|
||||||
|
chunks.push(paragraph.slice(start, start + maximum).trim())
|
||||||
|
}
|
||||||
|
current = ''
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (current && current.length + paragraph.length + 2 > maximum) flush()
|
||||||
|
current = current ? `${current}\n\n${paragraph}` : paragraph
|
||||||
|
}
|
||||||
|
if (current.trim()) chunks.push(current.trim())
|
||||||
|
return [...new Set(chunks)].filter(Boolean)
|
||||||
|
}
|
||||||
|
|
||||||
|
function scoreChunk(item, chunk, queryTokens, normalizedQuery) {
|
||||||
|
const chunkText = normalize(chunk)
|
||||||
|
const titleText = normalize(`${item.title || ''} ${(item.tags || []).join(' ')}`)
|
||||||
|
let matched = 0
|
||||||
|
let weighted = 0
|
||||||
|
for (const token of queryTokens) {
|
||||||
|
if (chunkText.includes(token)) {
|
||||||
|
matched += 1
|
||||||
|
weighted += token.length >= 3 ? 1.35 : 1
|
||||||
|
}
|
||||||
|
if (titleText.includes(token)) weighted += 1.8
|
||||||
|
}
|
||||||
|
if (normalizedQuery.length >= 3 && chunkText.includes(normalizedQuery)) weighted += 4
|
||||||
|
const coverage = queryTokens.length ? matched / queryTokens.length : 0
|
||||||
|
return weighted + coverage * 3
|
||||||
|
}
|
||||||
|
|
||||||
|
export function rankKnowledge(items, query, limit = 5) {
|
||||||
|
const normalizedQuery = normalize(query)
|
||||||
|
const queryTokens = knowledgeTokens(normalizedQuery)
|
||||||
|
if (!normalizedQuery || !queryTokens.length) return []
|
||||||
|
const candidates = []
|
||||||
|
for (const item of items) {
|
||||||
|
if (item.enabled === false || item.status === 'failed') continue
|
||||||
|
const chunks = chunkKnowledge(item.content)
|
||||||
|
chunks.forEach((chunk, index) => {
|
||||||
|
const rawScore = scoreChunk(item, chunk, queryTokens, normalizedQuery)
|
||||||
|
if (rawScore <= 0) return
|
||||||
|
candidates.push({
|
||||||
|
item,
|
||||||
|
chunkIndex: index,
|
||||||
|
snippet: chunk.slice(0, 560),
|
||||||
|
rawScore,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
candidates.sort((a, b) => b.rawScore - a.rawScore)
|
||||||
|
const bestByItem = new Map()
|
||||||
|
for (const candidate of candidates) {
|
||||||
|
if (!bestByItem.has(candidate.item.id)) bestByItem.set(candidate.item.id, candidate)
|
||||||
|
}
|
||||||
|
const selected = [...bestByItem.values()].slice(0, Math.max(1, limit))
|
||||||
|
const maximum = selected[0]?.rawScore || 1
|
||||||
|
return selected.map((candidate) => ({
|
||||||
|
...candidate,
|
||||||
|
score: Math.max(0.01, Math.min(1, candidate.rawScore / maximum)),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function knowledgeMetadata(content) {
|
||||||
|
const chunks = chunkKnowledge(content)
|
||||||
|
return {
|
||||||
|
characterCount: String(content || '').length,
|
||||||
|
chunkCount: chunks.length,
|
||||||
|
indexedAt: new Date().toISOString(),
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
import type { ReactNode } from 'react'
|
||||||
|
import { ArrowUpRight, Check, Languages } from 'lucide-react'
|
||||||
|
|
||||||
|
export function BrandMark({ compact = false }: { compact?: boolean }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2.5">
|
||||||
|
<img src="/brand-mark.svg" alt="" className="h-9 w-9 rounded-xl shadow-[0_8px_24px_-12px_rgba(37,99,235,.9)]" />
|
||||||
|
{!compact && (
|
||||||
|
<div>
|
||||||
|
<p className="text-[15px] font-semibold tracking-[-0.02em] text-slate-950">灵犀跨境</p>
|
||||||
|
<p className="text-[11px] text-slate-500">跨境客户沟通工作台</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProductMotion() {
|
||||||
|
return (
|
||||||
|
<div className="relative mx-auto w-full max-w-[470px]">
|
||||||
|
<div className="absolute -inset-10 rounded-full bg-blue-200/25 blur-3xl" />
|
||||||
|
<div className="relative overflow-hidden rounded-[22px] border border-slate-200/90 bg-white/90 shadow-[0_24px_70px_-38px_rgba(15,23,42,.34)] backdrop-blur">
|
||||||
|
<div className="flex h-12 items-center justify-between border-b border-slate-100 px-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,.10)]" />
|
||||||
|
<span className="text-xs font-medium text-slate-700">Eternity · Telegram</span>
|
||||||
|
</div>
|
||||||
|
<span className="rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-medium text-slate-500">
|
||||||
|
双语视图
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="auth-preview-grid relative min-h-[278px] overflow-hidden p-5">
|
||||||
|
<div className="auth-message auth-message-in max-w-[78%] rounded-2xl rounded-bl-md border border-slate-200 bg-white px-3.5 py-3 shadow-sm">
|
||||||
|
<p className="text-[11px] font-medium text-slate-400">English</p>
|
||||||
|
<p className="mt-1 text-xs leading-5 text-slate-700">
|
||||||
|
Could you confirm the sample delivery date?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="my-4 flex items-center gap-2 pl-3">
|
||||||
|
<span className="flex h-6 w-6 items-center justify-center rounded-full border border-blue-100 bg-blue-50 text-blue-600">
|
||||||
|
<Languages className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
<span className="auth-translation-track relative h-px w-24 overflow-visible bg-blue-100">
|
||||||
|
<span className="auth-translation-dot absolute -top-1 h-2 w-2 rounded-full bg-blue-500" />
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-slate-400">已翻译</span>
|
||||||
|
</div>
|
||||||
|
<div className="auth-message auth-message-out ml-auto max-w-[80%] rounded-2xl rounded-br-md border border-blue-100 bg-blue-50/90 px-3.5 py-3 shadow-sm">
|
||||||
|
<p className="text-[11px] font-medium text-blue-500">中文参考</p>
|
||||||
|
<p className="mt-1 text-xs leading-5 text-slate-700">可以确认一下样品的交付日期吗？</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 grid grid-cols-3 gap-2">
|
||||||
|
{[
|
||||||
|
['意向', '高'],
|
||||||
|
['情绪', '积极'],
|
||||||
|
['风险', '低'],
|
||||||
|
].map(([label, value]) => (
|
||||||
|
<div key={label} className="rounded-xl border border-slate-100 bg-white/75 px-3 py-2.5">
|
||||||
|
<p className="text-[10px] text-slate-400">{label}</p>
|
||||||
|
<p className="mt-0.5 text-xs font-semibold text-slate-700">{value}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="auth-floating-chip absolute -bottom-4 -right-3 flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 shadow-lg shadow-slate-900/5">
|
||||||
|
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
|
||||||
|
<Check className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
<span className="text-[11px] font-medium text-slate-600">消息已送达</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AuthShell({
|
||||||
|
children,
|
||||||
|
topAction,
|
||||||
|
heading = '让每一次跨境沟通，都清楚且及时。',
|
||||||
|
description = '汇集消息、翻译、客户资料与团队跟进，在一个工作台完成日常客户沟通。',
|
||||||
|
}: {
|
||||||
|
children: ReactNode
|
||||||
|
topAction?: ReactNode
|
||||||
|
heading?: string
|
||||||
|
description?: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white text-slate-900">
|
||||||
|
<div className="grid min-h-screen lg:grid-cols-[minmax(420px,46%)_1fr]">
|
||||||
|
<aside className="relative hidden overflow-hidden border-r border-slate-200 bg-[#f7f9fc] lg:flex lg:flex-col">
|
||||||
|
<div className="auth-corner-glow absolute inset-0" />
|
||||||
|
<div className="relative z-10 flex items-center justify-between px-10 py-8 xl:px-14">
|
||||||
|
<BrandMark />
|
||||||
|
<span className="flex items-center gap-1 text-[11px] font-medium text-slate-400">
|
||||||
|
LINGXI OS
|
||||||
|
<ArrowUpRight className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative z-10 flex flex-1 flex-col justify-center px-10 pb-12 xl:px-14">
|
||||||
|
<div className="mb-10 max-w-[520px]">
|
||||||
|
<p className="mb-3 text-xs font-semibold tracking-[0.18em] text-blue-600">GLOBAL COMMUNICATION</p>
|
||||||
|
<h1 className="max-w-[480px] text-[30px] font-semibold leading-[1.28] tracking-[-0.035em] text-slate-950">
|
||||||
|
{heading}
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 max-w-[460px] text-sm leading-6 text-slate-500">{description}</p>
|
||||||
|
</div>
|
||||||
|
<ProductMotion />
|
||||||
|
</div>
|
||||||
|
<p className="relative z-10 px-10 pb-7 text-[11px] text-slate-400 xl:px-14">
|
||||||
|
© 2026 灵犀跨境
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main className="relative flex min-h-screen flex-col">
|
||||||
|
<header className="flex h-20 items-center justify-between px-6 sm:px-10 lg:px-12">
|
||||||
|
<div className="lg:hidden"><BrandMark /></div>
|
||||||
|
<div className="ml-auto">{topAction}</div>
|
||||||
|
</header>
|
||||||
|
<div className="flex flex-1 items-center justify-center px-6 pb-16 sm:px-10 lg:px-12">
|
||||||
|
<div className="w-full max-w-[430px]">{children}</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -15,11 +15,11 @@ export function PageHeader({
|
|||||||
className?: string
|
className?: string
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className={cn('mb-4', className)}>
|
<div className={cn('mb-5', className)}>
|
||||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<h1 className="text-lg font-semibold text-foreground">{title}</h1>
|
<h1 className="text-[22px] font-semibold tracking-[-0.035em] text-slate-950 md:text-2xl">{title}</h1>
|
||||||
{description && <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>}
|
{description && <p className="mt-1 text-sm text-slate-500">{description}</p>}
|
||||||
</div>
|
</div>
|
||||||
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
|
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -29,13 +29,13 @@ export function StatCard({
|
|||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
'group p-5 transition-all duration-200',
|
'group p-5 transition-all duration-200',
|
||||||
onClick && 'cursor-pointer hover:-translate-y-0.5 hover:border-primary-200 hover:shadow-[0_14px_35px_rgba(15,23,42,.07)]',
|
onClick && 'cursor-pointer hover:-translate-y-0.5 hover:border-primary-200 hover:shadow-[0_12px_28px_-16px_rgba(37,99,235,.48)]',
|
||||||
)}
|
)}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-xs font-medium text-slate-500">{title}</span>
|
<span className="text-xs font-medium text-slate-500">{title}</span>
|
||||||
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary-50 transition-colors group-hover:bg-primary-100">
|
<span className="flex h-9 w-9 items-center justify-center rounded-[10px] border border-primary-100 bg-primary-50 transition-colors group-hover:bg-primary-100">
|
||||||
<Icon className="h-4 w-4 text-primary-600" />
|
<Icon className="h-4 w-4 text-primary-600" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -20,17 +20,19 @@ export function AiReplies({
|
|||||||
onAdopt,
|
onAdopt,
|
||||||
onEdit,
|
onEdit,
|
||||||
onClose,
|
onClose,
|
||||||
|
targetLanguage = 'auto',
|
||||||
}: {
|
}: {
|
||||||
conversationId: string
|
conversationId: string
|
||||||
onAdopt: (content: string, translationCn: string) => void
|
onAdopt: (content: string, translationCn: string, suggestionId: string) => void
|
||||||
onEdit: (content: string, translationCn: string) => void
|
onEdit: (content: string, translationCn: string) => void
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
|
targetLanguage?: string
|
||||||
}) {
|
}) {
|
||||||
const [items, setItems] = useState<AiReplySuggestion[] | null>(null)
|
const [items, setItems] = useState<AiReplySuggestion[] | null>(null)
|
||||||
useEffect(() => setItems(null), [conversationId])
|
useEffect(() => setItems(null), [conversationId])
|
||||||
|
|
||||||
const mutation = useMutation({
|
const mutation = useMutation({
|
||||||
mutationFn: () => generateReplies(conversationId),
|
mutationFn: () => generateReplies(conversationId, targetLanguage),
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
setItems(Array.isArray(data) ? data : [])
|
setItems(Array.isArray(data) ? data : [])
|
||||||
toast.success('回复建议已生成', '已参考客户资料、知识库和历史回复')
|
toast.success('回复建议已生成', '已参考客户资料、知识库和历史回复')
|
||||||
@@ -98,7 +100,7 @@ export function AiReplies({
|
|||||||
<div>
|
<div>
|
||||||
<div className="mb-1 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
|
<div className="mb-1 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-primary">
|
||||||
<Globe className="h-3 w-3" />
|
<Globe className="h-3 w-3" />
|
||||||
发送给客户 · English
|
发送给客户 · {languageName(s.targetLang)}
|
||||||
</div>
|
</div>
|
||||||
<p className="whitespace-pre-wrap text-sm leading-relaxed text-slate-800">{s.content}</p>
|
<p className="whitespace-pre-wrap text-sm leading-relaxed text-slate-800">{s.content}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -145,7 +147,7 @@ export function AiReplies({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-2 flex gap-1.5">
|
<div className="mt-2 flex gap-1.5">
|
||||||
<Button size="sm" variant="default" onClick={() => onAdopt(s.content, s.translationCn)}>
|
<Button size="sm" variant="default" onClick={() => onAdopt(s.content, s.translationCn, s.id)}>
|
||||||
<Check className="h-3.5 w-3.5" />
|
<Check className="h-3.5 w-3.5" />
|
||||||
采用
|
采用
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ import {
|
|||||||
Shrink,
|
Shrink,
|
||||||
Expand,
|
Expand,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
|
Languages,
|
||||||
Reply,
|
Reply,
|
||||||
X,
|
X,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
@@ -20,6 +21,7 @@ import { Switch } from '@/components/ui/switch'
|
|||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { toast } from '@/app/store/toast'
|
import { toast } from '@/app/store/toast'
|
||||||
import type { ChannelType } from '@/types'
|
import type { ChannelType } from '@/types'
|
||||||
|
import { LANGUAGES, languageName } from '@/config/languages'
|
||||||
|
|
||||||
const QUICK_PHRASES = [
|
const QUICK_PHRASES = [
|
||||||
{ label: '报价催促', text: 'Friendly reminder: the quotation is valid until this Friday. Please confirm at your earliest convenience.' },
|
{ label: '报价催促', text: 'Friendly reminder: the quotation is valid until this Friday. Please confirm at your earliest convenience.' },
|
||||||
@@ -48,8 +50,11 @@ export function Composer({
|
|||||||
replyingTo,
|
replyingTo,
|
||||||
onCancelReply,
|
onCancelReply,
|
||||||
channel = 'telegram',
|
channel = 'telegram',
|
||||||
|
targetLanguage = 'auto',
|
||||||
|
detectedLanguage,
|
||||||
|
onTargetLanguageChange,
|
||||||
}: {
|
}: {
|
||||||
onSend: (text: string, autoTranslate?: boolean) => Promise<void>
|
onSend: (text: string, autoTranslate?: boolean, targetLang?: string) => Promise<void>
|
||||||
onMedia?: (files: File[], kind: 'document' | 'photo' | 'audio' | 'voice' | 'sticker') => Promise<void>
|
onMedia?: (files: File[], kind: 'document' | 'photo' | 'audio' | 'voice' | 'sticker') => Promise<void>
|
||||||
value?: string
|
value?: string
|
||||||
onChange?: (text: string) => void
|
onChange?: (text: string) => void
|
||||||
@@ -57,6 +62,9 @@ export function Composer({
|
|||||||
replyingTo?: { id: string; text: string } | null
|
replyingTo?: { id: string; text: string } | null
|
||||||
onCancelReply?: () => void
|
onCancelReply?: () => void
|
||||||
channel?: ChannelType
|
channel?: ChannelType
|
||||||
|
targetLanguage?: string
|
||||||
|
detectedLanguage?: string
|
||||||
|
onTargetLanguageChange?: (language: string) => void
|
||||||
}) {
|
}) {
|
||||||
const [internalText, setInternalText] = useState('')
|
const [internalText, setInternalText] = useState('')
|
||||||
const [sending, setSending] = useState(false)
|
const [sending, setSending] = useState(false)
|
||||||
@@ -92,7 +100,7 @@ export function Composer({
|
|||||||
if (!text.trim()) return
|
if (!text.trim()) return
|
||||||
setSending(true)
|
setSending(true)
|
||||||
try {
|
try {
|
||||||
await onSend(text, autoTranslate)
|
await onSend(text, autoTranslate, targetLanguage)
|
||||||
setText('')
|
setText('')
|
||||||
} finally {
|
} finally {
|
||||||
setSending(false)
|
setSending(false)
|
||||||
@@ -116,7 +124,7 @@ export function Composer({
|
|||||||
setAiLoading(true)
|
setAiLoading(true)
|
||||||
try {
|
try {
|
||||||
const { textAction } = await import('@/services/api/ai')
|
const { textAction } = await import('@/services/api/ai')
|
||||||
const res = await textAction({ text, action: action as any, tone, targetLang: 'en' })
|
const res = await textAction({ text, action: action as any, tone, targetLang: targetLanguage })
|
||||||
setText(res.result)
|
setText(res.result)
|
||||||
toast.success('AI 处理完成')
|
toast.success('AI 处理完成')
|
||||||
} catch {
|
} catch {
|
||||||
@@ -238,11 +246,31 @@ export function Composer({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="mt-2 flex items-center justify-between">
|
<div className="mt-2 flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
||||||
<label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
|
<label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
|
||||||
<Switch checked={autoTranslate} onCheckedChange={setAutoTranslate} />
|
<Switch checked={autoTranslate} onCheckedChange={setAutoTranslate} />
|
||||||
中文自动译为英文{channel === 'email' ? '邮件' : '发送'}
|
双向翻译
|
||||||
</label>
|
</label>
|
||||||
|
{autoTranslate && (
|
||||||
|
<label className="relative flex items-center">
|
||||||
|
<Languages className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-primary" />
|
||||||
|
<select
|
||||||
|
value={targetLanguage}
|
||||||
|
onChange={(event) => onTargetLanguageChange?.(event.target.value)}
|
||||||
|
aria-label="客户目标语言"
|
||||||
|
className="h-8 max-w-[190px] appearance-none rounded-lg border border-primary-100 bg-primary-50/70 py-1 pl-8 pr-7 text-xs font-medium text-slate-700 outline-none transition hover:border-primary-200 focus:border-primary-300 focus:ring-2 focus:ring-primary-100"
|
||||||
|
>
|
||||||
|
{LANGUAGES.map((language) => (
|
||||||
|
<option key={language.code} value={language.code}>
|
||||||
|
{language.code === 'auto' && detectedLanguage
|
||||||
|
? `自动 · ${languageName(detectedLanguage)}`
|
||||||
|
: `${language.name} · ${language.nativeName}`}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<ChevronDown className="pointer-events-none absolute right-2 h-3 w-3 text-slate-400" />
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
{aiLoading && (
|
{aiLoading && (
|
||||||
<Badge variant="primary" className="animate-pulse">
|
<Badge variant="primary" className="animate-pulse">
|
||||||
正在调用 AI…
|
正在调用 AI…
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { Brain, ChevronRight } from 'lucide-react'
|
import { Brain, ChevronRight, LoaderCircle } from 'lucide-react'
|
||||||
import type { Conversation, Customer, CustomerStage } from '@/types'
|
import type { AiBackfillStatus, Conversation, Customer, CustomerStage } from '@/types'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import {
|
import {
|
||||||
CustomerStageBadge,
|
CustomerStageBadge,
|
||||||
@@ -17,10 +17,12 @@ export function ConversationInsightBar({
|
|||||||
customer,
|
customer,
|
||||||
conversation,
|
conversation,
|
||||||
onOpenProfile,
|
onOpenProfile,
|
||||||
|
aiBackfill,
|
||||||
}: {
|
}: {
|
||||||
customer: Customer
|
customer: Customer
|
||||||
conversation: Conversation
|
conversation: Conversation
|
||||||
onOpenProfile: () => void
|
onOpenProfile: () => void
|
||||||
|
aiBackfill?: AiBackfillStatus
|
||||||
}) {
|
}) {
|
||||||
const stage = validStages.has(customer.stage) ? customer.stage : 'initial'
|
const stage = validStages.has(customer.stage) ? customer.stage : 'initial'
|
||||||
const summary = customer.aiProfile?.summary || conversation.summary || '收到更多客户消息后将补充客户画像'
|
const summary = customer.aiProfile?.summary || conversation.summary || '收到更多客户消息后将补充客户画像'
|
||||||
@@ -41,6 +43,15 @@ export function ConversationInsightBar({
|
|||||||
<p className="truncate text-xs leading-5 text-slate-600">{summary}</p>
|
<p className="truncate text-xs leading-5 text-slate-600">{summary}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden shrink-0 items-center gap-2 md:flex">
|
<div className="hidden shrink-0 items-center gap-2 md:flex">
|
||||||
|
{aiBackfill && ['queued', 'running'].includes(aiBackfill.status) && (
|
||||||
|
<span
|
||||||
|
title={`历史消息后台分析：${aiBackfill.completedCount}/${aiBackfill.totalCount}`}
|
||||||
|
className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-[10px] font-medium text-blue-700"
|
||||||
|
>
|
||||||
|
<LoaderCircle className="h-3 w-3 animate-spin" />
|
||||||
|
历史分析 {Math.round(Number(aiBackfill.progress || 0) * 100)}%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||||
意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} />
|
意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} />
|
||||||
</span>
|
</span>
|
||||||
@@ -54,6 +65,12 @@ export function ConversationInsightBar({
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-1.5 flex items-center gap-2 overflow-x-auto pb-0.5 md:hidden">
|
<div className="mt-1.5 flex items-center gap-2 overflow-x-auto pb-0.5 md:hidden">
|
||||||
|
{aiBackfill && ['queued', 'running'].includes(aiBackfill.status) && (
|
||||||
|
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-[10px] font-medium text-blue-700">
|
||||||
|
<LoaderCircle className="h-3 w-3 animate-spin" />
|
||||||
|
历史分析 {Math.round(Number(aiBackfill.progress || 0) * 100)}%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
<span className="flex shrink-0 items-center gap-1 text-[11px]">意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} /></span>
|
<span className="flex shrink-0 items-center gap-1 text-[11px]">意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} /></span>
|
||||||
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
||||||
<CustomerStageBadge stage={stage as CustomerStage} />
|
<CustomerStageBadge stage={stage as CustomerStage} />
|
||||||
|
|||||||
@@ -46,9 +46,17 @@ export function InsightPanel({
|
|||||||
const [analyzing, setAnalyzing] = useState(false)
|
const [analyzing, setAnalyzing] = useState(false)
|
||||||
const [analysis, setAnalysis] = useState(customer.aiProfile.summary)
|
const [analysis, setAnalysis] = useState(customer.aiProfile.summary)
|
||||||
const c = countryMeta(customer.country)
|
const c = countryMeta(customer.country)
|
||||||
const localTime = new Date(
|
const localTime = Number.isFinite(c.tzOffset)
|
||||||
new Date().getTime() + new Date().getTimezoneOffset() * 60000 + c.tzOffset * 3600000,
|
? new Date(
|
||||||
).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
new Date().getTime() + new Date().getTimezoneOffset() * 60000 + c.tzOffset * 3600000,
|
||||||
|
).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||||
|
: ''
|
||||||
|
const countrySourceLabel = {
|
||||||
|
manual: '人工确认',
|
||||||
|
'account-profile': '账户资料',
|
||||||
|
'phone-prefix': '手机号区号',
|
||||||
|
unknown: '待确认',
|
||||||
|
}[customer.countrySource || 'unknown']
|
||||||
|
|
||||||
const updateMut = useMutation({
|
const updateMut = useMutation({
|
||||||
mutationFn: (data: Partial<Customer>) => updateCustomer(customer.id, data),
|
mutationFn: (data: Partial<Customer>) => updateCustomer(customer.id, data),
|
||||||
@@ -114,11 +122,14 @@ export function InsightPanel({
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<MapPin className="h-3.5 w-3.5 text-muted-foreground" />
|
<MapPin className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
<CountryFlag code={customer.country} />
|
<CountryFlag code={customer.country} />
|
||||||
|
<span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-500">
|
||||||
|
{countrySourceLabel}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
{localTime && <div className="flex items-center gap-2">
|
||||||
<Clock className="h-3.5 w-3.5 text-muted-foreground" />
|
<Clock className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
<span className="text-muted-foreground">当地时间：{localTime}</span>
|
<span className="text-muted-foreground">当地时间：{localTime}</span>
|
||||||
</div>
|
</div>}
|
||||||
{customer.email && (
|
{customer.email && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Mail className="h-3.5 w-3.5 text-muted-foreground" />
|
<Mail className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
@@ -177,6 +188,51 @@ export function InsightPanel({
|
|||||||
{/* AI 分析 */}
|
{/* AI 分析 */}
|
||||||
<div className="space-y-4 border-b border-slate-100 p-3">
|
<div className="space-y-4 border-b border-slate-100 p-3">
|
||||||
<CustomerProfileRadar customer={customer} compact />
|
<CustomerProfileRadar customer={customer} compact />
|
||||||
|
<div className="rounded-2xl border border-blue-100 bg-gradient-to-br from-white to-blue-50/60 p-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-slate-900">会话长期记忆</p>
|
||||||
|
<p className="mt-0.5 text-[11px] text-slate-400">
|
||||||
|
{conversation.aiContextStatus === 'compressing'
|
||||||
|
? '正在压缩较早的会话内容…'
|
||||||
|
: conversation.aiContextMemory
|
||||||
|
? `已压缩 ${conversation.aiContextSourceMessageCount || conversation.aiContextMemory.sourceMessageCount || 0} 条较早消息`
|
||||||
|
: '会话达到长度阈值后自动生成'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className={cn(
|
||||||
|
'rounded-full px-2 py-1 text-[10px] font-medium',
|
||||||
|
conversation.aiContextStatus === 'failed'
|
||||||
|
? 'bg-red-50 text-red-600'
|
||||||
|
: conversation.aiContextMemory
|
||||||
|
? 'bg-blue-100 text-blue-700'
|
||||||
|
: 'bg-slate-100 text-slate-500',
|
||||||
|
)}>
|
||||||
|
{conversation.aiContextStatus === 'compressing'
|
||||||
|
? '压缩中'
|
||||||
|
: conversation.aiContextMemory
|
||||||
|
? '已启用'
|
||||||
|
: '等待触发'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{conversation.aiContextMemory?.summary && (
|
||||||
|
<p className="mt-3 text-xs leading-5 text-slate-600">
|
||||||
|
{conversation.aiContextMemory.summary}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{conversation.aiContextMemory?.unresolved?.length ? (
|
||||||
|
<div className="mt-3 border-t border-blue-100 pt-3">
|
||||||
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-blue-600">未决事项</p>
|
||||||
|
<div className="mt-1.5 flex flex-wrap gap-1.5">
|
||||||
|
{conversation.aiContextMemory.unresolved.slice(0, 4).map((item) => (
|
||||||
|
<span key={item} className="rounded-full bg-white px-2 py-1 text-[10px] text-slate-600 shadow-sm">
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
<div className="rounded-2xl border border-slate-200/80 bg-white p-4">
|
<div className="rounded-2xl border border-slate-200/80 bg-white p-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ import {
|
|||||||
LoaderCircle,
|
LoaderCircle,
|
||||||
SmilePlus,
|
SmilePlus,
|
||||||
Trash2,
|
Trash2,
|
||||||
|
Brain,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { useQuery } from '@tanstack/react-query'
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import type { ChannelType, Message } from '@/types'
|
import type { ChannelType, Message } from '@/types'
|
||||||
@@ -89,6 +90,7 @@ export function MessageBubble({
|
|||||||
customerName,
|
customerName,
|
||||||
customerAvatar,
|
customerAvatar,
|
||||||
channel,
|
channel,
|
||||||
|
showIntent = true,
|
||||||
}: {
|
}: {
|
||||||
msg: Message
|
msg: Message
|
||||||
viewMode: ViewMode
|
viewMode: ViewMode
|
||||||
@@ -102,6 +104,7 @@ export function MessageBubble({
|
|||||||
customerName?: string
|
customerName?: string
|
||||||
customerAvatar?: string
|
customerAvatar?: string
|
||||||
channel?: ChannelType
|
channel?: ChannelType
|
||||||
|
showIntent?: boolean
|
||||||
}) {
|
}) {
|
||||||
const [showActions, setShowActions] = useState(false)
|
const [showActions, setShowActions] = useState(false)
|
||||||
const [translationExpanded, setTranslationExpanded] = useState(false)
|
const [translationExpanded, setTranslationExpanded] = useState(false)
|
||||||
@@ -124,7 +127,15 @@ export function MessageBubble({
|
|||||||
const longTranslation = translatedText.length > 260 || translatedText.split('\n').length > 6
|
const longTranslation = translatedText.length > 260 || translatedText.split('\n').length > 6
|
||||||
const hasKnownLanguage = Boolean(msg.originalLang && !['und', 'auto', 'unknown'].includes(msg.originalLang))
|
const hasKnownLanguage = Boolean(msg.originalLang && !['und', 'auto', 'unknown'].includes(msg.originalLang))
|
||||||
const sourceLanguage = hasKnownLanguage ? languageName(msg.originalLang) : '原文'
|
const sourceLanguage = hasKnownLanguage ? languageName(msg.originalLang) : '原文'
|
||||||
|
const targetLanguage = msg.targetLang && !['und', 'auto', 'unknown'].includes(msg.targetLang)
|
||||||
|
? languageName(msg.targetLang)
|
||||||
|
: '客户语言'
|
||||||
const providerName = channel === 'whatsapp' ? 'WhatsApp' : channel === 'email' ? 'Email' : 'Telegram'
|
const providerName = channel === 'whatsapp' ? 'WhatsApp' : channel === 'email' ? 'Email' : 'Telegram'
|
||||||
|
const contextualTranslation = msg.translationMethod === 'ai-contextual'
|
||||||
|
&& Number(msg.translationContextMessages || 0) > 0
|
||||||
|
const translationTrace = contextualTranslation
|
||||||
|
? `AI 结合最近 ${msg.translationContextMessages} 条会话消息${msg.translationConversationSummaryApplied ? '及客户画像摘要' : ''}完成翻译`
|
||||||
|
: 'AI 直接翻译当前消息'
|
||||||
const isMediaMessage = ['image', 'audio', 'file'].includes(msg.type)
|
const isMediaMessage = ['image', 'audio', 'file'].includes(msg.type)
|
||||||
const hasProviderAttachment = Boolean(
|
const hasProviderAttachment = Boolean(
|
||||||
msg.telegramFileId
|
msg.telegramFileId
|
||||||
@@ -219,7 +230,7 @@ export function MessageBubble({
|
|||||||
<div>
|
<div>
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-blue-100/80 px-2 py-0.5 text-[10px] font-medium text-blue-700">
|
<span className="inline-flex items-center gap-1 rounded-full bg-blue-100/80 px-2 py-0.5 text-[10px] font-medium text-blue-700">
|
||||||
<Globe className="h-3 w-3" />
|
<Globe className="h-3 w-3" />
|
||||||
客户收到 · {translatedText ? '英文译文' : '原文'}
|
客户收到 · {translatedText ? targetLanguage : '原文'}
|
||||||
</span>
|
</span>
|
||||||
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{outgoingSentText}</p>
|
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{outgoingSentText}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -265,9 +276,12 @@ export function MessageBubble({
|
|||||||
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{originalText}</p>
|
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{originalText}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-t border-border/60 pt-2">
|
<div className="border-t border-border/60 pt-2">
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary">
|
<span
|
||||||
|
title={translationTrace}
|
||||||
|
className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary"
|
||||||
|
>
|
||||||
<Languages className="h-3 w-3" />
|
<Languages className="h-3 w-3" />
|
||||||
{isMe ? '发送内容 · 英文' : 'AI 译文 · 中文'}
|
{isMe ? `发送内容 · ${targetLanguage}` : contextualTranslation ? 'AI 语境译文 · 中文' : 'AI 译文 · 中文'}
|
||||||
</span>
|
</span>
|
||||||
<div className="mt-1.5">{translationContent()}</div>
|
<div className="mt-1.5">{translationContent()}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -277,9 +291,12 @@ export function MessageBubble({
|
|||||||
if (viewMode === 'translated' && translatedText) {
|
if (viewMode === 'translated' && translatedText) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary">
|
<span
|
||||||
|
title={translationTrace}
|
||||||
|
className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary"
|
||||||
|
>
|
||||||
<Languages className="h-3 w-3" />
|
<Languages className="h-3 w-3" />
|
||||||
{isMe ? `${sourceLanguage} → 英文发送内容` : `${sourceLanguage} → 中文`}
|
{isMe ? `${sourceLanguage} → ${targetLanguage}` : `${sourceLanguage} → 中文`}
|
||||||
</span>
|
</span>
|
||||||
<div className="mt-1.5">{translationContent(false)}</div>
|
<div className="mt-1.5">{translationContent(false)}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -377,6 +394,31 @@ export function MessageBubble({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
|
{!isMe && showIntent && msg.intentAnalysis && (
|
||||||
|
<div
|
||||||
|
data-testid="message-intent"
|
||||||
|
title={msg.intentAnalysis.rationale}
|
||||||
|
className="mt-2 flex flex-wrap items-center gap-1.5 border-t border-slate-200/70 pt-2"
|
||||||
|
>
|
||||||
|
<span className="inline-flex items-center gap-1 rounded-full bg-violet-50 px-2 py-0.5 text-[10px] font-semibold text-violet-700">
|
||||||
|
<Brain className="h-3 w-3" />
|
||||||
|
意图 · {msg.intentAnalysis.label}
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-slate-400">
|
||||||
|
可信度 {Math.round(Number(msg.intentAnalysis.confidence || 0) * 100)}%
|
||||||
|
</span>
|
||||||
|
{['high', 'urgent'].includes(msg.intentAnalysis.urgency) && (
|
||||||
|
<span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-medium text-amber-700">
|
||||||
|
{msg.intentAnalysis.urgency === 'urgent' ? '紧急' : '高优先级'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{msg.intentAnalysis.entities?.slice(0, 3).map((entity) => (
|
||||||
|
<span key={entity} className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600">
|
||||||
|
{entity}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{hasProviderAttachment && attachmentLoading && (
|
{hasProviderAttachment && attachmentLoading && (
|
||||||
<div className="mt-2 flex items-center gap-2 rounded-lg bg-muted/70 px-3 py-2 text-xs text-muted-foreground">
|
<div className="mt-2 flex items-center gap-2 rounded-lg bg-muted/70 px-3 py-2 text-xs text-muted-foreground">
|
||||||
<LoaderCircle className="h-3.5 w-3.5 animate-spin" /> 正在读取 {providerName} 文件…
|
<LoaderCircle className="h-3.5 w-3.5 animate-spin" /> 正在读取 {providerName} 文件…
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ export function AppLayout() {
|
|||||||
const { mobileNavOpen, setMobileNavOpen } = useUiStore()
|
const { mobileNavOpen, setMobileNavOpen } = useUiStore()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen overflow-hidden bg-background">
|
<div className="flex h-screen overflow-hidden bg-[#f7f9fc]">
|
||||||
<GlobalRealtime />
|
<GlobalRealtime />
|
||||||
{/* 桌面端固定侧边栏 */}
|
{/* 桌面端固定侧边栏 */}
|
||||||
<div className="hidden shrink-0 lg:block">
|
<div className="hidden shrink-0 lg:block">
|
||||||
@@ -25,7 +25,7 @@ export function AppLayout() {
|
|||||||
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col">
|
<div className="flex min-w-0 flex-1 flex-col">
|
||||||
<Topbar />
|
<Topbar />
|
||||||
<main className="flex-1 overflow-y-auto bg-white/35 scrollbar-thin" id="main-scroll">
|
<main className="flex-1 overflow-y-auto bg-[#f7f9fc] scrollbar-thin" id="main-scroll">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { NavLink, useNavigate } from 'react-router-dom'
|
import { NavLink, useNavigate } from 'react-router-dom'
|
||||||
import { PanelLeftClose, PanelLeftOpen, Sparkles } from 'lucide-react'
|
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
|
||||||
import { NAV_ITEMS } from '@/config/navigation'
|
import { NAV_ITEMS } from '@/config/navigation'
|
||||||
import { useUiStore } from '@/app/store/ui'
|
import { useUiStore } from '@/app/store/ui'
|
||||||
import { useAuthStore } from '@/app/store/auth'
|
import { useAuthStore } from '@/app/store/auth'
|
||||||
@@ -35,18 +35,16 @@ export function Sidebar() {
|
|||||||
return (
|
return (
|
||||||
<aside
|
<aside
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative z-30 flex h-full flex-col border-e border-slate-300/80 bg-[#f8fafc] shadow-[4px_0_16px_-14px_rgba(15,23,42,.32)] transition-[width] duration-200',
|
'relative z-30 flex h-full flex-col border-e border-slate-200 bg-white shadow-[6px_0_24px_-22px_rgba(15,23,42,.45)] transition-[width] duration-200',
|
||||||
sidebarCollapsed ? 'w-[68px]' : 'w-[228px]',
|
sidebarCollapsed ? 'w-[68px]' : 'w-[236px]',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<div
|
<div
|
||||||
className="flex h-16 cursor-pointer items-center gap-2.5 px-4"
|
className="flex h-16 cursor-pointer items-center gap-2.5 border-b border-slate-100 px-4"
|
||||||
onClick={() => navigate('/dashboard')}
|
onClick={() => navigate('/dashboard')}
|
||||||
>
|
>
|
||||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-primary-600 to-primary-800 text-primary-foreground shadow-sm shadow-primary-900/10">
|
<img src="/brand-mark.svg" alt="" className="h-9 w-9 shrink-0 rounded-xl shadow-sm shadow-primary-900/10" />
|
||||||
<Sparkles className="h-4.5 w-4.5 h-[18px] w-[18px]" />
|
|
||||||
</span>
|
|
||||||
{!sidebarCollapsed && (
|
{!sidebarCollapsed && (
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
<p className="truncate text-[15px] font-semibold tracking-tight leading-tight">{t('app.name')}</p>
|
<p className="truncate text-[15px] font-semibold tracking-tight leading-tight">{t('app.name')}</p>
|
||||||
@@ -56,7 +54,7 @@ export function Sidebar() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 导航 */}
|
{/* 导航 */}
|
||||||
<nav className="flex-1 overflow-y-auto px-2.5 py-2 scrollbar-thin">
|
<nav className="flex-1 overflow-y-auto px-2.5 py-3 scrollbar-thin">
|
||||||
{groups.map((group) => {
|
{groups.map((group) => {
|
||||||
const groupItems = items.filter((item) => item.group === group.key)
|
const groupItems = items.filter((item) => item.group === group.key)
|
||||||
if (!groupItems.length) return null
|
if (!groupItems.length) return null
|
||||||
@@ -76,10 +74,10 @@ export function Sidebar() {
|
|||||||
title={sidebarCollapsed ? t(item.labelKey as never) : undefined}
|
title={sidebarCollapsed ? t(item.labelKey as never) : undefined}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
cn(
|
cn(
|
||||||
'flex items-center gap-3 rounded-xl px-3 py-2.5 text-[13px] transition-all duration-150',
|
'group relative flex items-center gap-3 rounded-[10px] px-3 py-2.5 text-[13px] transition-all duration-150',
|
||||||
isActive
|
isActive
|
||||||
? 'bg-primary-50/90 font-semibold text-primary-800 shadow-[inset_0_0_0_1px_rgba(37,99,235,.08)]'
|
? 'bg-primary-50 font-semibold text-primary-800 shadow-[inset_0_0_0_1px_rgba(37,99,235,.1)] before:absolute before:inset-y-2 before:left-0 before:w-[3px] before:rounded-r-full before:bg-primary-600'
|
||||||
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
|
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-950',
|
||||||
sidebarCollapsed && 'justify-center px-0',
|
sidebarCollapsed && 'justify-center px-0',
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -96,8 +94,8 @@ export function Sidebar() {
|
|||||||
|
|
||||||
{/* 底部：套餐与企业信息 */}
|
{/* 底部：套餐与企业信息 */}
|
||||||
{!sidebarCollapsed && (
|
{!sidebarCollapsed && (
|
||||||
<div className="border-t border-border p-3">
|
<div className="border-t border-slate-100 p-3">
|
||||||
<div className="rounded-md bg-muted/60 p-3">
|
<div className="rounded-[12px] border border-slate-200 bg-slate-50/80 p-3">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-xs text-muted-foreground">{t('sidebar.currentPlan')}</span>
|
<span className="text-xs text-muted-foreground">{t('sidebar.currentPlan')}</span>
|
||||||
<span className="text-xs font-medium text-primary-700">{plan.name}</span>
|
<span className="text-xs font-medium text-primary-700">{plan.name}</span>
|
||||||
|
|||||||
@@ -62,10 +62,10 @@ export function Topbar() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="flex h-16 shrink-0 items-center gap-3 border-b border-slate-200/70 bg-white/90 px-3 backdrop-blur-xl md:px-5">
|
<header className="relative z-20 flex h-16 shrink-0 items-center gap-3 border-b border-slate-200 bg-white/95 px-3 shadow-[0_6px_24px_-24px_rgba(15,23,42,.7)] backdrop-blur-xl md:px-5">
|
||||||
{/* 移动端菜单 */}
|
{/* 移动端菜单 */}
|
||||||
<button
|
<button
|
||||||
className="rounded-md p-2 text-muted-foreground hover:bg-muted lg:hidden"
|
className="rounded-[10px] p-2 text-muted-foreground hover:bg-slate-100 lg:hidden"
|
||||||
onClick={() => setMobileNavOpen(true)}
|
onClick={() => setMobileNavOpen(true)}
|
||||||
aria-label="打开导航"
|
aria-label="打开导航"
|
||||||
>
|
>
|
||||||
@@ -75,7 +75,7 @@ export function Topbar() {
|
|||||||
{/* 企业切换 */}
|
{/* 企业切换 */}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={
|
trigger={
|
||||||
<button className="hidden items-center gap-1.5 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-muted md:flex">
|
<button className="hidden items-center gap-1.5 rounded-[10px] border border-transparent px-2.5 py-1.5 text-sm font-medium hover:border-slate-200 hover:bg-slate-50 md:flex">
|
||||||
<Building2 className="h-4 w-4 text-muted-foreground" />
|
<Building2 className="h-4 w-4 text-muted-foreground" />
|
||||||
<span className="max-w-[180px] truncate">{tenant?.name ?? '—'}</span>
|
<span className="max-w-[180px] truncate">{tenant?.name ?? '—'}</span>
|
||||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
@@ -96,7 +96,7 @@ export function Topbar() {
|
|||||||
{/* 语言切换 */}
|
{/* 语言切换 */}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={
|
trigger={
|
||||||
<button className="flex items-center gap-1 rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground" title={t('lang.name')}>
|
<button className="flex items-center gap-1 rounded-[10px] p-2 text-muted-foreground hover:bg-slate-100 hover:text-foreground" title={t('lang.name')}>
|
||||||
<Globe className="h-[18px] w-[18px]" />
|
<Globe className="h-[18px] w-[18px]" />
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
@@ -118,7 +118,7 @@ export function Topbar() {
|
|||||||
|
|
||||||
{/* 帮助 */}
|
{/* 帮助 */}
|
||||||
<button
|
<button
|
||||||
className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground"
|
className="rounded-[10px] p-2 text-muted-foreground hover:bg-slate-100 hover:text-foreground"
|
||||||
title={t('topbar.help')}
|
title={t('topbar.help')}
|
||||||
onClick={() => navigate('/help')}
|
onClick={() => navigate('/help')}
|
||||||
>
|
>
|
||||||
@@ -128,7 +128,7 @@ export function Topbar() {
|
|||||||
{/* 通知 */}
|
{/* 通知 */}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={
|
trigger={
|
||||||
<button className="relative rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground" title={t('topbar.notifications')}>
|
<button className="relative rounded-[10px] p-2 text-muted-foreground hover:bg-slate-100 hover:text-foreground" title={t('topbar.notifications')}>
|
||||||
<Bell className="h-[18px] w-[18px]" />
|
<Bell className="h-[18px] w-[18px]" />
|
||||||
{unread > 0 && (
|
{unread > 0 && (
|
||||||
<span className="absolute right-1 top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium text-white">
|
<span className="absolute right-1 top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium text-white">
|
||||||
@@ -172,7 +172,7 @@ export function Topbar() {
|
|||||||
{/* 用户菜单 */}
|
{/* 用户菜单 */}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={
|
trigger={
|
||||||
<button className="flex items-center gap-2 rounded-md px-1.5 py-1 hover:bg-muted">
|
<button className="flex items-center gap-2 rounded-[10px] border border-transparent px-1.5 py-1 hover:border-slate-200 hover:bg-slate-50">
|
||||||
<Avatar name={user?.name ?? '?'} size="sm" online />
|
<Avatar name={user?.name ?? '?'} size="sm" online />
|
||||||
<span className="hidden text-start md:block">
|
<span className="hidden text-start md:block">
|
||||||
<span className="block max-w-[90px] truncate text-sm font-medium leading-tight">{user?.name}</span>
|
<span className="block max-w-[90px] truncate text-sm font-medium leading-tight">{user?.name}</span>
|
||||||
|
|||||||
@@ -4,13 +4,13 @@ import { Loader2 } from 'lucide-react'
|
|||||||
import { cn } from '@/utils/cn'
|
import { cn } from '@/utils/cn'
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 select-none',
|
'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[10px] text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none active:translate-y-px',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800',
|
default: 'bg-primary text-primary-foreground shadow-[0_1px_2px_rgba(37,99,235,.22)] hover:bg-primary-700 hover:shadow-[0_6px_16px_-8px_rgba(37,99,235,.65)] active:bg-primary-800',
|
||||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-border',
|
secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
|
||||||
outline: 'border border-input bg-card hover:bg-muted',
|
outline: 'border border-slate-200 bg-white text-slate-700 shadow-sm hover:border-slate-300 hover:bg-slate-50',
|
||||||
ghost: 'hover:bg-muted text-foreground',
|
ghost: 'hover:bg-muted text-foreground',
|
||||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-red-600',
|
destructive: 'bg-destructive text-destructive-foreground hover:bg-red-600',
|
||||||
dangerOutline: 'border border-red-200 bg-card text-red-600 hover:bg-red-50',
|
dangerOutline: 'border border-red-200 bg-card text-red-600 hover:bg-red-50',
|
||||||
@@ -19,7 +19,7 @@ const buttonVariants = cva(
|
|||||||
size: {
|
size: {
|
||||||
sm: 'h-8 px-3 text-xs',
|
sm: 'h-8 px-3 text-xs',
|
||||||
default: 'h-9 px-4',
|
default: 'h-9 px-4',
|
||||||
lg: 'h-10 px-5',
|
lg: 'h-11 px-5',
|
||||||
icon: 'h-9 w-9',
|
icon: 'h-9 w-9',
|
||||||
'icon-sm': 'h-7 w-7',
|
'icon-sm': 'h-7 w-7',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
|
|||||||
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn('rounded-2xl border border-slate-200/80 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.035),0_10px_30px_rgba(15,23,42,0.025)]', className)}
|
className={cn('rounded-[14px] border border-slate-200/90 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.025),0_8px_24px_rgba(15,23,42,0.025)]', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
@@ -21,7 +21,7 @@ export function CardHeader({
|
|||||||
return (
|
return (
|
||||||
<div className={cn('flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4', className)} {...props}>
|
<div className={cn('flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4', className)} {...props}>
|
||||||
<div className="min-w-0">
|
<div className="min-w-0">
|
||||||
{title && <h3 className="text-sm font-semibold tracking-tight text-foreground">{title}</h3>}
|
{title && <h3 className="text-[14px] font-semibold tracking-[-0.01em] text-slate-900">{title}</h3>}
|
||||||
{description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
|
{description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
@@ -31,7 +31,7 @@ export function CardHeader({
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||||
return <div className={cn('p-4', className)} {...props} />
|
return <div className={cn('p-5', className)} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||||
|
|||||||
@@ -5,17 +5,20 @@ export function Switch({
|
|||||||
onCheckedChange,
|
onCheckedChange,
|
||||||
disabled,
|
disabled,
|
||||||
className,
|
className,
|
||||||
|
ariaLabel,
|
||||||
}: {
|
}: {
|
||||||
checked: boolean
|
checked: boolean
|
||||||
onCheckedChange?: (v: boolean) => void
|
onCheckedChange?: (v: boolean) => void
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
className?: string
|
className?: string
|
||||||
|
ariaLabel?: string
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
role="switch"
|
role="switch"
|
||||||
aria-checked={checked}
|
aria-checked={checked}
|
||||||
|
aria-label={ariaLabel}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onClick={() => onCheckedChange?.(!checked)}
|
onClick={() => onCheckedChange?.(!checked)}
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
@@ -10,26 +10,26 @@ export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>)
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function THead({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
export function THead({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
||||||
return <thead className={cn('border-b border-border bg-muted/50', className)} {...props} />
|
return <thead className={cn('border-b border-slate-200 bg-slate-50/80', className)} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
export function TBody({ className, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
||||||
return <tbody className={cn('divide-y divide-border', className)} {...props} />
|
return <tbody className={cn('divide-y divide-slate-100', className)} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Tr({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
|
export function Tr({ className, ...props }: HTMLAttributes<HTMLTableRowElement>) {
|
||||||
return <tr className={cn('transition-colors hover:bg-muted/40', className)} {...props} />
|
return <tr className={cn('transition-colors hover:bg-primary-50/35', className)} {...props} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Th({ className, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
|
export function Th({ className, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
|
||||||
return (
|
return (
|
||||||
<th
|
<th
|
||||||
className={cn('whitespace-nowrap px-3 py-2.5 text-start text-xs font-medium text-muted-foreground', className)}
|
className={cn('whitespace-nowrap px-4 py-3 text-start text-[11px] font-semibold uppercase tracking-[0.04em] text-slate-500', className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Td({ className, colSpan, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
|
export function Td({ className, colSpan, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
|
||||||
return <td className={cn('px-3 py-2.5 align-middle', className)} colSpan={colSpan} {...props} />
|
return <td className={cn('px-4 py-3 align-middle text-slate-700', className)} colSpan={colSpan} {...props} />
|
||||||
}
|
}
|
||||||
|
|||||||
+12
-1
@@ -26,7 +26,18 @@ export const COUNTRIES: CountryMeta[] = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export function countryMeta(code: string): CountryMeta {
|
export function countryMeta(code: string): CountryMeta {
|
||||||
return COUNTRIES.find((c) => c.code === code) ?? { code, zh: code, en: code, flag: '🏳️', tzOffset: 0, lang: 'en' }
|
const normalized = String(code || '').trim().toUpperCase()
|
||||||
|
const known = COUNTRIES.find((c) => c.code === normalized)
|
||||||
|
if (known) return known
|
||||||
|
if (!/^[A-Z]{2}$/.test(normalized)) {
|
||||||
|
return { code: '', zh: '国家待确认', en: 'Country not confirmed', flag: '🌐', tzOffset: Number.NaN, lang: '' }
|
||||||
|
}
|
||||||
|
const flag = String.fromCodePoint(
|
||||||
|
...[...normalized].map((character) => 127397 + character.charCodeAt(0)),
|
||||||
|
)
|
||||||
|
const zh = new Intl.DisplayNames(['zh-CN'], { type: 'region' }).of(normalized) || normalized
|
||||||
|
const en = new Intl.DisplayNames(['en'], { type: 'region' }).of(normalized) || normalized
|
||||||
|
return { code: normalized, zh, en, flag, tzOffset: Number.NaN, lang: '' }
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 行业 */
|
/** 行业 */
|
||||||
|
|||||||
@@ -53,6 +53,49 @@ export const LANGUAGES: LanguageOption[] = [
|
|||||||
{ code: 'ro', name: '罗马尼亚语', nativeName: 'Română' },
|
{ code: 'ro', name: '罗马尼亚语', nativeName: 'Română' },
|
||||||
{ code: 'cs', name: '捷克语', nativeName: 'Čeština' },
|
{ code: 'cs', name: '捷克语', nativeName: 'Čeština' },
|
||||||
{ code: 'el', name: '希腊语', nativeName: 'Ελληνικά' },
|
{ code: 'el', name: '希腊语', nativeName: 'Ελληνικά' },
|
||||||
|
{ code: 'da', name: '丹麦语', nativeName: 'Dansk' },
|
||||||
|
{ code: 'no', name: '挪威语', nativeName: 'Norsk' },
|
||||||
|
{ code: 'fi', name: '芬兰语', nativeName: 'Suomi' },
|
||||||
|
{ code: 'hu', name: '匈牙利语', nativeName: 'Magyar' },
|
||||||
|
{ code: 'bg', name: '保加利亚语', nativeName: 'Български' },
|
||||||
|
{ code: 'sr', name: '塞尔维亚语', nativeName: 'Српски' },
|
||||||
|
{ code: 'hr', name: '克罗地亚语', nativeName: 'Hrvatski' },
|
||||||
|
{ code: 'sk', name: '斯洛伐克语', nativeName: 'Slovenčina' },
|
||||||
|
{ code: 'sl', name: '斯洛文尼亚语', nativeName: 'Slovenščina' },
|
||||||
|
{ code: 'lt', name: '立陶宛语', nativeName: 'Lietuvių' },
|
||||||
|
{ code: 'lv', name: '拉脱维亚语', nativeName: 'Latviešu' },
|
||||||
|
{ code: 'et', name: '爱沙尼亚语', nativeName: 'Eesti' },
|
||||||
|
{ code: 'ca', name: '加泰罗尼亚语', nativeName: 'Català' },
|
||||||
|
{ code: 'sq', name: '阿尔巴尼亚语', nativeName: 'Shqip' },
|
||||||
|
{ code: 'mk', name: '马其顿语', nativeName: 'Македонски' },
|
||||||
|
{ code: 'ka', name: '格鲁吉亚语', nativeName: 'ქართული' },
|
||||||
|
{ code: 'hy', name: '亚美尼亚语', nativeName: 'Հայերեն' },
|
||||||
|
{ code: 'az', name: '阿塞拜疆语', nativeName: 'Azərbaycanca' },
|
||||||
|
{ code: 'kk', name: '哈萨克语', nativeName: 'Қазақша' },
|
||||||
|
{ code: 'uz', name: '乌兹别克语', nativeName: 'Oʻzbekcha' },
|
||||||
|
{ code: 'mn', name: '蒙古语', nativeName: 'Монгол' },
|
||||||
|
{ code: 'ne', name: '尼泊尔语', nativeName: 'नेपाली' },
|
||||||
|
{ code: 'si', name: '僧伽罗语', nativeName: 'සිංහල' },
|
||||||
|
{ code: 'ta', name: '泰米尔语', nativeName: 'தமிழ்' },
|
||||||
|
{ code: 'te', name: '泰卢固语', nativeName: 'తెలుగు' },
|
||||||
|
{ code: 'mr', name: '马拉地语', nativeName: 'मराठी' },
|
||||||
|
{ code: 'gu', name: '古吉拉特语', nativeName: 'ગુજરાતી' },
|
||||||
|
{ code: 'pa', name: '旁遮普语', nativeName: 'ਪੰਜਾਬੀ' },
|
||||||
|
{ code: 'kn', name: '卡纳达语', nativeName: 'ಕನ್ನಡ' },
|
||||||
|
{ code: 'ml', name: '马拉雅拉姆语', nativeName: 'മലയാളം' },
|
||||||
|
{ code: 'fil', name: '菲律宾语', nativeName: 'Filipino' },
|
||||||
|
{ code: 'km', name: '高棉语', nativeName: 'ខ្មែរ' },
|
||||||
|
{ code: 'lo', name: '老挝语', nativeName: 'ລາວ' },
|
||||||
|
{ code: 'my', name: '缅甸语', nativeName: 'မြန်မာ' },
|
||||||
|
{ code: 'am', name: '阿姆哈拉语', nativeName: 'አማርኛ' },
|
||||||
|
{ code: 'af', name: '南非荷兰语', nativeName: 'Afrikaans' },
|
||||||
|
{ code: 'zu', name: '祖鲁语', nativeName: 'isiZulu' },
|
||||||
|
{ code: 'ha', name: '豪萨语', nativeName: 'Hausa' },
|
||||||
|
{ code: 'yo', name: '约鲁巴语', nativeName: 'Yorùbá' },
|
||||||
|
{ code: 'ig', name: '伊博语', nativeName: 'Igbo' },
|
||||||
|
{ code: 'so', name: '索马里语', nativeName: 'Soomaali' },
|
||||||
|
{ code: 'ps', name: '普什图语', nativeName: 'پښتو', rtl: true },
|
||||||
|
{ code: 'ku', name: '库尔德语', nativeName: 'Kurdî' },
|
||||||
]
|
]
|
||||||
|
|
||||||
export const RTL_LANG_CODES = LANGUAGES.filter((l) => l.rtl).map((l) => l.code)
|
export const RTL_LANG_CODES = LANGUAGES.filter((l) => l.rtl).map((l) => l.code)
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
import { useQuery } from '@tanstack/react-query'
|
import { useQuery } from '@tanstack/react-query'
|
||||||
import { PageLoading, ErrorState } from '@/components/ui/feedback'
|
import { PageLoading, ErrorState } from '@/components/ui/feedback'
|
||||||
import { PageHeader } from '@/components/common/PageHeader'
|
import { PageHeader } from '@/components/common/PageHeader'
|
||||||
@@ -8,13 +9,20 @@ import { LiveDataBadge } from '@/components/common/LiveDataBadge'
|
|||||||
import { CountryFlag } from '@/components/common/CountryFlag'
|
import { CountryFlag } from '@/components/common/CountryFlag'
|
||||||
import { ChartCard, TrendChart, DonutChart, FunnelChart, RankBars, SimpleBarChart } from '@/components/charts'
|
import { ChartCard, TrendChart, DonutChart, FunnelChart, RankBars, SimpleBarChart } from '@/components/charts'
|
||||||
import { getAnalytics } from '@/services/api/org'
|
import { getAnalytics } from '@/services/api/org'
|
||||||
import { formatNumber } from '@/utils/format'
|
import { Activity, BadgePercent, Users, Zap, Target } from 'lucide-react'
|
||||||
import { Activity, BadgePercent, TrendingUp, Users, Zap, Timer, AlertTriangle, Target } from 'lucide-react'
|
|
||||||
|
const PERIOD_OPTIONS = [
|
||||||
|
{ value: 'today', label: '今日' },
|
||||||
|
{ value: '7d', label: '近 7 天' },
|
||||||
|
{ value: '30d', label: '近 30 天' },
|
||||||
|
{ value: 'quarter', label: '本季度' },
|
||||||
|
] as const
|
||||||
|
|
||||||
export function AnalyticsPage() {
|
export function AnalyticsPage() {
|
||||||
|
const [period, setPeriod] = useState<(typeof PERIOD_OPTIONS)[number]['value']>('30d')
|
||||||
const { data, isLoading, isError, refetch } = useQuery({
|
const { data, isLoading, isError, refetch } = useQuery({
|
||||||
queryKey: ['analytics'],
|
queryKey: ['analytics', period],
|
||||||
queryFn: () => getAnalytics(),
|
queryFn: () => getAnalytics({ period }),
|
||||||
})
|
})
|
||||||
|
|
||||||
if (isLoading) return <PageLoading />
|
if (isLoading) return <PageLoading />
|
||||||
@@ -23,21 +31,35 @@ export function AnalyticsPage() {
|
|||||||
const k = data.kpis
|
const k = data.kpis
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 md:p-6">
|
<div className="page-shell">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="数据分析中心"
|
title="业务分析"
|
||||||
description="查看客户、消息、跟进与转化数据"
|
description="从客户获取、沟通效率到成交转化，查看完整经营链路"
|
||||||
actions={<LiveDataBadge />}
|
actions={
|
||||||
extra={
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<LiveDataBadge />
|
||||||
{['today', '7d', '30d', 'quarter'].map((p) => (
|
<div className="flex rounded-[10px] border border-slate-200 bg-white p-1 shadow-sm">
|
||||||
<button key={p} className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground hover:bg-border">{p === '30d' ? '近30天' : p === '7d' ? '近7天' : p === 'today' ? '今日' : '本季度'}</button>
|
{PERIOD_OPTIONS.map((option) => (
|
||||||
))}
|
<button
|
||||||
|
key={option.value}
|
||||||
|
type="button"
|
||||||
|
aria-pressed={period === option.value}
|
||||||
|
onClick={() => setPeriod(option.value)}
|
||||||
|
className={`rounded-[7px] px-3 py-1.5 text-xs font-medium transition ${
|
||||||
|
period === option.value
|
||||||
|
? 'bg-slate-900 text-white shadow-sm'
|
||||||
|
: 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-5 mb-4">
|
<div className="grid grid-cols-2 gap-3 xl:grid-cols-5">
|
||||||
<StatCard title="新增客户" value={k.newCustomers.value} delta={k.newCustomers.delta} icon={Users} />
|
<StatCard title="新增客户" value={k.newCustomers.value} delta={k.newCustomers.delta} icon={Users} />
|
||||||
<StatCard title="有效询盘" value={k.validInquiries.value} delta={k.validInquiries.delta} icon={Activity} />
|
<StatCard title="有效询盘" value={k.validInquiries.value} delta={k.validInquiries.delta} icon={Activity} />
|
||||||
<StatCard title="高意向客户" value={k.highIntent.value} delta={k.highIntent.delta} icon={Target} />
|
<StatCard title="高意向客户" value={k.highIntent.value} delta={k.highIntent.delta} icon={Target} />
|
||||||
@@ -45,27 +67,62 @@ export function AnalyticsPage() {
|
|||||||
<StatCard title="AI采纳率" value={`${k.aiAdoptionRate.value}%`} delta={k.aiAdoptionRate.delta} icon={Zap} />
|
<StatCard title="AI采纳率" value={`${k.aiAdoptionRate.value}%`} delta={k.aiAdoptionRate.delta} icon={Zap} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
<section className="page-section">
|
||||||
<ChartCard title="客户增长趋势" height={260}><TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} /></ChartCard>
|
<div className="section-heading">
|
||||||
<ChartCard title="各渠道询盘数量" height={260}><SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" /></ChartCard>
|
<div>
|
||||||
<ChartCard title="客户国家/地区分布" height={260}><DonutChart data={data.countryDistribution} /></ChartCard>
|
<h2 className="section-title">增长与转化</h2>
|
||||||
<ChartCard title="客户阶段转化漏斗" height={260}><FunnelChart data={data.funnel} /></ChartCard>
|
<p className="section-description">观察客户增长速度、渠道贡献和阶段流失</p>
|
||||||
<ChartCard title="意向分数分布" height={260}><DonutChart data={data.intentDistribution} nameKey="range" /></ChartCard>
|
</div>
|
||||||
<ChartCard title="产品关注度排行" height={260}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
|
</div>
|
||||||
<ChartCard title="团队回复效率排行" height={240}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
|
||||||
<ChartCard title="团队客户转化排行" height={240}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
|
<ChartCard className="xl:col-span-7" title="客户增长趋势" description="所选周期内的新增客户变化" height={290}>
|
||||||
</div>
|
<TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard className="xl:col-span-5" title="客户阶段转化漏斗" description="识别转化链路中的主要流失阶段" height={290}>
|
||||||
|
<FunnelChart data={data.funnel} />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard className="xl:col-span-4" title="各渠道询盘数量" height={255}>
|
||||||
|
<SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard className="xl:col-span-4" title="客户国家/地区分布" height={255}>
|
||||||
|
<DonutChart data={data.countryDistribution} />
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard className="xl:col-span-4" title="意向分数分布" height={255}>
|
||||||
|
<DonutChart data={data.intentDistribution} nameKey="range" />
|
||||||
|
</ChartCard>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* 业务概览 */}
|
<section className="page-section">
|
||||||
<h2 className="mt-6 mb-3 text-lg font-semibold">业务概览 <LiveDataBadge className="align-middle" /></h2>
|
<div className="section-heading">
|
||||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
<div>
|
||||||
<Card><CardHeader title="重点跟进客户" /><div className="divide-y divide-border">{data.bossBoard.urgentHighValue.map((c) => (<div key={c.id} className="flex items-center justify-between px-4 py-2.5 text-sm"><span>{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="text-xs text-muted-foreground">{c.reason.slice(0, 20)}…</span></div>))}</div></Card>
|
<h2 className="section-title">产品与团队效率</h2>
|
||||||
<Card><CardHeader title="逾期跟进" /><div className="divide-y divide-border">{data.bossBoard.overdueMembers.map((m) => (<div key={m.id} className="flex items-center justify-between px-4 py-2.5 text-sm"><span>{m.name}</span><Badge variant="danger">{m.overdueCount} 项逾期</Badge></div>))}</div></Card>
|
<p className="section-description">比较产品热度、响应速度和团队转化结果</p>
|
||||||
<Card><CardHeader title="客户增长较快的国家" /><div className="divide-y divide-border">{data.bossBoard.fastestCountries.map((c) => (<div key={c.country} className="flex items-center justify-between px-4 py-2.5 text-sm"><CountryFlag code={c.country} /><Badge variant="success">+{(c.growth * 100).toFixed(0)}%</Badge></div>))}</div></Card>
|
</div>
|
||||||
<Card><CardHeader title="渠道转化" /><div className="p-4 text-center"><p className="text-2xl font-semibold text-primary-700">{data.bossBoard.bestChannel.name}</p><p className="text-sm text-muted-foreground">转化率 {data.bossBoard.bestChannel.conversion}%</p></div></Card>
|
</div>
|
||||||
<Card><CardHeader title="产品询盘" /><div className="space-y-2 p-4">{data.bossBoard.topProducts.map((p) => (<div key={p.product} className="flex items-center justify-between text-sm"><span>{p.product}</span><span className="text-muted-foreground">{p.inquiries} 次询盘</span></div>))}</div></Card>
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||||
<Card><CardHeader title="久未联系的高意向客户" /><div className="divide-y divide-border">{data.bossBoard.churningHighIntent.map((c) => (<div key={c.id} className="px-4 py-2.5 text-sm"><span>{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="text-xs text-muted-foreground ml-2">{c.daysSilent}天未联系 · 意向{c.intentScore}分</span></div>))}</div></Card>
|
<ChartCard title="产品关注度排行" height={250}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
|
||||||
</div>
|
<ChartCard title="团队回复效率" height={250}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
|
||||||
|
<ChartCard title="团队客户转化" height={250}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="page-section">
|
||||||
|
<div className="section-heading">
|
||||||
|
<div>
|
||||||
|
<h2 className="section-title">经营提醒</h2>
|
||||||
|
<p className="section-description">需要优先处理的客户、跟进和市场变化</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||||
|
<Card><CardHeader title="重点跟进客户" /><div className="divide-y divide-slate-100">{data.bossBoard.urgentHighValue.map((c) => (<div key={c.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="max-w-[55%] truncate text-xs text-slate-500">{c.reason}</span></div>))}</div></Card>
|
||||||
|
<Card><CardHeader title="逾期跟进" /><div className="divide-y divide-slate-100">{data.bossBoard.overdueMembers.map((m) => (<div key={m.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{m.name}</span><Badge variant="danger">{m.overdueCount} 项逾期</Badge></div>))}</div></Card>
|
||||||
|
<Card><CardHeader title="增长较快的市场" /><div className="divide-y divide-slate-100">{data.bossBoard.fastestCountries.map((c) => (<div key={c.country} className="flex items-center justify-between px-5 py-3 text-sm"><CountryFlag code={c.country} /><Badge variant="success">+{(c.growth * 100).toFixed(0)}%</Badge></div>))}</div></Card>
|
||||||
|
<Card><CardHeader title="渠道转化" /><div className="px-5 py-6"><p className="text-2xl font-semibold tracking-tight text-slate-950">{data.bossBoard.bestChannel.name}</p><p className="mt-1 text-sm text-slate-500">当前转化率 {data.bossBoard.bestChannel.conversion}%</p></div></Card>
|
||||||
|
<Card><CardHeader title="产品询盘" /><div className="divide-y divide-slate-100 px-5">{data.bossBoard.topProducts.map((p) => (<div key={p.product} className="flex items-center justify-between py-3 text-sm"><span className="font-medium text-slate-900">{p.product}</span><span className="text-slate-500">{p.inquiries} 次</span></div>))}</div></Card>
|
||||||
|
<Card><CardHeader title="久未联系的高意向客户" /><div className="divide-y divide-slate-100">{data.bossBoard.churningHighIntent.map((c) => (<div key={c.id} className="px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="ml-2 text-xs text-slate-500">{c.daysSilent} 天未联系 · 意向 {c.intentScore} 分</span></div>))}</div></Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
+98
-165
@@ -3,7 +3,7 @@ import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
|||||||
import { useForm } from 'react-hook-form'
|
import { useForm } from 'react-hook-form'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
import { Sparkles, MessageCircle, Languages, ShieldCheck, UsersRound } from 'lucide-react'
|
import { Globe, LockKeyhole, UserRound } from 'lucide-react'
|
||||||
import { login } from '@/services/api/auth'
|
import { login } from '@/services/api/auth'
|
||||||
import { useAuthStore } from '@/app/store/auth'
|
import { useAuthStore } from '@/app/store/auth'
|
||||||
import { useI18n } from '@/i18n'
|
import { useI18n } from '@/i18n'
|
||||||
@@ -11,37 +11,36 @@ import { toast, errorMessage } from '@/app/store/toast'
|
|||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
import { Input, Field } from '@/components/ui/input'
|
import { Input, Field } from '@/components/ui/input'
|
||||||
import { Checkbox } from '@/components/ui/checkbox'
|
import { Checkbox } from '@/components/ui/checkbox'
|
||||||
import { Tabs } from '@/components/ui/tabs'
|
|
||||||
import { Dialog } from '@/components/ui/dialog'
|
import { Dialog } from '@/components/ui/dialog'
|
||||||
import { UI_LOCALES, type UiLocale } from '@/config/languages'
|
|
||||||
import { Dropdown } from '@/components/ui/dropdown'
|
import { Dropdown } from '@/components/ui/dropdown'
|
||||||
import { Globe } from 'lucide-react'
|
import { AuthShell } from '@/components/auth/AuthShell'
|
||||||
|
import { UI_LOCALES, type UiLocale } from '@/config/languages'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
account: z.string().min(4, '请输入正确的手机号或邮箱'),
|
account: z.string().min(4, '请输入正确的手机号或邮箱'),
|
||||||
password: z.string().optional(),
|
password: z.string().min(1, '请输入密码'),
|
||||||
code: z.string().optional(),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
type FormValues = z.infer<typeof schema>
|
type FormValues = z.infer<typeof schema>
|
||||||
|
|
||||||
export function LoginPage() {
|
export function LoginPage() {
|
||||||
const { t, locale, setLocale } = useI18n()
|
const { locale, setLocale } = useI18n()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchParams, setSearchParams] = useSearchParams()
|
const [searchParams, setSearchParams] = useSearchParams()
|
||||||
const setSession = useAuthStore((s) => s.setSession)
|
const setSession = useAuthStore((state) => state.setSession)
|
||||||
const [mode, setMode] = useState<'code' | 'password'>('password')
|
|
||||||
const [remember, setRemember] = useState(true)
|
const [remember, setRemember] = useState(true)
|
||||||
const [agreed, setAgreed] = useState(true)
|
const [agreed, setAgreed] = useState(true)
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [codeSent, setCodeSent] = useState(0)
|
|
||||||
const [agreementOpen, setAgreementOpen] = useState<'privacy' | 'terms' | null>(null)
|
const [agreementOpen, setAgreementOpen] = useState<'privacy' | 'terms' | null>(null)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { account: '', password: '', code: '' } })
|
} = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: { account: '', password: '' },
|
||||||
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (searchParams.get('reason') !== 'session-expired') return
|
if (searchParams.get('reason') !== 'session-expired') return
|
||||||
@@ -49,179 +48,113 @@ export function LoginPage() {
|
|||||||
setSearchParams({}, { replace: true })
|
setSearchParams({}, { replace: true })
|
||||||
}, [searchParams, setSearchParams])
|
}, [searchParams, setSearchParams])
|
||||||
|
|
||||||
const doLogin = async (values: FormValues) => {
|
const onSubmit = async (values: FormValues) => {
|
||||||
if (!agreed) {
|
if (!agreed) {
|
||||||
toast.warning('请先勾选并同意《隐私政策》和《服务协议》')
|
toast.warning('请先阅读并同意隐私政策和服务协议')
|
||||||
return
|
|
||||||
}
|
|
||||||
if (mode === 'password' && !values.password) {
|
|
||||||
toast.warning('请输入密码')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (mode === 'code' && (values.code ?? '').length !== 6) {
|
|
||||||
toast.warning('请输入6位验证码')
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
const session = await login({ ...values, mode, remember })
|
const session = await login({ ...values, mode: 'password', remember })
|
||||||
setSession(session)
|
setSession(session)
|
||||||
toast.success(`欢迎回来，${session.user.name}`)
|
|
||||||
navigate('/dashboard')
|
navigate('/dashboard')
|
||||||
} catch (e) {
|
} catch (error) {
|
||||||
toast.error(errorMessage(e))
|
toast.error(errorMessage(error))
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const sendCode = () => {
|
const localeMenu = (
|
||||||
setCodeSent(60)
|
<Dropdown
|
||||||
const timer = setInterval(() => {
|
trigger={(
|
||||||
setCodeSent((s) => {
|
<button className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 text-xs font-medium text-slate-600 transition hover:border-slate-300 hover:bg-slate-50">
|
||||||
if (s <= 1) clearInterval(timer)
|
<Globe className="h-3.5 w-3.5" />
|
||||||
return s - 1
|
{UI_LOCALES.find((item) => item.code === locale)?.nativeName}
|
||||||
})
|
</button>
|
||||||
}, 1000)
|
)}
|
||||||
toast.success('验证码已发送')
|
items={UI_LOCALES.map((item) => ({
|
||||||
}
|
key: item.code,
|
||||||
|
label: item.nativeName,
|
||||||
|
onSelect: () => setLocale(item.code as UiLocale),
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen bg-background">
|
<AuthShell topAction={localeMenu}>
|
||||||
{/* 品牌区 */}
|
<div className="mb-8">
|
||||||
<div className="hidden w-[46%] flex-col justify-between bg-primary-900 p-10 text-primary-50 lg:flex">
|
<p className="text-xs font-semibold tracking-[0.12em] text-blue-600">欢迎回来</p>
|
||||||
<div className="flex items-center gap-2.5">
|
<h2 className="mt-3 text-[28px] font-semibold tracking-[-0.035em] text-slate-950">登录工作台</h2>
|
||||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10">
|
<p className="mt-2 text-sm text-slate-500">继续处理客户消息与团队跟进。</p>
|
||||||
<Sparkles className="h-5 w-5" />
|
</div>
|
||||||
|
|
||||||
|
<form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<Field label="手机号或邮箱" error={errors.account?.message}>
|
||||||
|
<div className="relative">
|
||||||
|
<UserRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
className="h-11 rounded-xl border-slate-200 bg-white pl-10 focus-visible:ring-blue-100"
|
||||||
|
placeholder="请输入手机号或邮箱"
|
||||||
|
autoComplete="username"
|
||||||
|
{...register('account')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Field>
|
||||||
|
<Field label="密码" error={errors.password?.message}>
|
||||||
|
<div className="relative">
|
||||||
|
<LockKeyhole className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||||
|
<Input
|
||||||
|
className="h-11 rounded-xl border-slate-200 bg-white pl-10 focus-visible:ring-blue-100"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入登录密码"
|
||||||
|
autoComplete="current-password"
|
||||||
|
{...register('password')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Checkbox label="保持登录" checked={remember} onCheckedChange={setRemember} />
|
||||||
|
<span className="text-xs text-slate-400">安全会话 · 12 小时</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="h-11 w-full rounded-xl shadow-[0_10px_24px_-14px_rgba(37,99,235,.8)]" loading={loading}>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<p className="text-center text-sm text-slate-500">
|
||||||
|
还没有账号？{' '}
|
||||||
|
<Link to="/register" className="font-medium text-blue-600 hover:text-blue-700">
|
||||||
|
创建企业
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-8 border-t border-slate-100 pt-5">
|
||||||
|
<label className="flex items-start gap-2 text-xs leading-5 text-slate-400">
|
||||||
|
<Checkbox checked={agreed} onCheckedChange={setAgreed} className="mt-0.5" />
|
||||||
|
<span>
|
||||||
|
登录即表示同意
|
||||||
|
<button type="button" className="mx-1 text-slate-600 hover:text-blue-600" onClick={() => setAgreementOpen('privacy')}>隐私政策</button>
|
||||||
|
和
|
||||||
|
<button type="button" className="ml-1 text-slate-600 hover:text-blue-600" onClick={() => setAgreementOpen('terms')}>服务协议</button>
|
||||||
</span>
|
</span>
|
||||||
<div>
|
</label>
|
||||||
<p className="text-base font-semibold">{t('app.name')}</p>
|
|
||||||
<p className="text-xs text-primary-200">{t('app.slogan')}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-8">
|
|
||||||
<h1 className="text-2xl font-semibold leading-snug">
|
|
||||||
集中处理客户消息，
|
|
||||||
<br />
|
|
||||||
更快回复和跟进。
|
|
||||||
</h1>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{[
|
|
||||||
{ icon: MessageCircle, text: '集中处理 WhatsApp、Telegram、邮件和独立站消息' },
|
|
||||||
{ icon: Languages, text: '消息翻译与双语对照，支持行业术语' },
|
|
||||||
{ icon: ShieldCheck, text: '识别客户情绪、沟通意图和风险信号' },
|
|
||||||
{ icon: UsersRound, text: '管理客户资料、意向评分和团队跟进' },
|
|
||||||
].map((f) => (
|
|
||||||
<div key={f.text} className="flex items-center gap-3 text-sm text-primary-100">
|
|
||||||
<span className="flex h-8 w-8 items-center justify-center rounded-md bg-white/10">
|
|
||||||
<f.icon className="h-4 w-4" />
|
|
||||||
</span>
|
|
||||||
{f.text}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-primary-300">© 2026 {t('app.company')}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 表单区 */}
|
<Dialog
|
||||||
<div className="flex flex-1 items-center justify-center p-6">
|
open={Boolean(agreementOpen)}
|
||||||
<div className="w-full max-w-[400px]">
|
onOpenChange={() => setAgreementOpen(null)}
|
||||||
<div className="mb-8 flex items-center justify-between">
|
title={agreementOpen === 'privacy' ? '隐私政策' : '服务协议'}
|
||||||
<div className="flex items-center gap-2 lg:hidden">
|
>
|
||||||
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-white">
|
<div className="space-y-3 text-sm leading-7 text-slate-600">
|
||||||
<Sparkles className="h-4 w-4" />
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold">{t('app.name')}</span>
|
|
||||||
</div>
|
|
||||||
<Dropdown
|
|
||||||
trigger={
|
|
||||||
<button className="flex items-center gap-1 rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted">
|
|
||||||
<Globe className="h-4 w-4" />
|
|
||||||
{UI_LOCALES.find((l) => l.code === locale)?.nativeName}
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
items={UI_LOCALES.map((l) => ({
|
|
||||||
key: l.code,
|
|
||||||
label: l.nativeName,
|
|
||||||
onSelect: () => setLocale(l.code as UiLocale),
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 className="text-xl font-semibold">{t('login.title')}</h2>
|
|
||||||
<p className="mt-1 text-sm text-muted-foreground">{t('login.subtitle')}</p>
|
|
||||||
|
|
||||||
<div className="mt-6">
|
|
||||||
<Tabs
|
|
||||||
value={mode}
|
|
||||||
onChange={(v) => setMode(v as 'code' | 'password')}
|
|
||||||
items={[{ value: 'password', label: t('login.passwordTab') }]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form className="mt-5 space-y-4" onSubmit={handleSubmit((v) => doLogin(v))}>
|
|
||||||
<Field error={errors.account?.message}>
|
|
||||||
<Input placeholder={t('login.accountPlaceholder')} autoComplete="username" {...register('account')} />
|
|
||||||
</Field>
|
|
||||||
{mode === 'code' ? (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input placeholder={t('login.codePlaceholder')} maxLength={6} {...register('code')} />
|
|
||||||
<Button type="button" variant="outline" className="shrink-0" disabled={codeSent > 0} onClick={sendCode}>
|
|
||||||
{codeSent > 0 ? `${codeSent}s` : t('login.getCode')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Field error={errors.password?.message}>
|
|
||||||
<Input type="password" placeholder={t('login.passwordPlaceholder')} autoComplete="current-password" {...register('password')} />
|
|
||||||
</Field>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<Checkbox label={t('login.remember')} checked={remember} onCheckedChange={setRemember} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" className="w-full" size="lg" loading={loading}>
|
|
||||||
{t('login.submit')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="text-center text-sm text-muted-foreground">
|
|
||||||
还没有账号？{' '}
|
|
||||||
<Link to="/register" className="font-medium text-primary hover:underline">
|
|
||||||
{t('login.register')}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p className="mt-6 text-center text-xs text-muted-foreground">
|
|
||||||
<Checkbox
|
|
||||||
checked={agreed}
|
|
||||||
onCheckedChange={setAgreed}
|
|
||||||
className="me-1 align-middle"
|
|
||||||
/>
|
|
||||||
{t('login.agreementPrefix')}
|
|
||||||
<button type="button" className="text-primary hover:underline" onClick={() => setAgreementOpen('privacy')}>
|
|
||||||
{t('login.privacy')}
|
|
||||||
</button>
|
|
||||||
{t('login.and')}
|
|
||||||
<button type="button" className="text-primary hover:underline" onClick={() => setAgreementOpen('terms')}>
|
|
||||||
{t('login.terms')}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 协议弹窗 */}
|
|
||||||
<Dialog open={!!agreementOpen} onOpenChange={() => setAgreementOpen(null)} title={agreementOpen === 'privacy' ? '隐私政策' : '服务协议'}>
|
|
||||||
<div className="space-y-3 text-sm leading-relaxed text-muted-foreground">
|
|
||||||
<p>使用本服务前，请阅读并确认以下数据处理与服务条款。</p>
|
<p>使用本服务前，请阅读并确认以下数据处理与服务条款。</p>
|
||||||
<p>1. 我们仅收集为您提供跨境沟通与客户管理服务所必需的信息，包括账号信息、企业信息与您主动录入的客户数据。</p>
|
<p>我们仅处理提供跨境沟通、客户管理和团队协作所必需的数据。</p>
|
||||||
<p>2. 我们按照已公布的安全措施处理会话数据；涉及第三方服务时，处理范围以隐私政策及相关服务条款为准。</p>
|
<p>使用翻译与回复建议时，相关内容会发送至企业已配置的模型服务商处理。</p>
|
||||||
<p>3. 数据导出、删除和账号注销申请按照正式发布的隐私政策处理。</p>
|
<p>数据导出、删除和账号注销按照正式发布的政策与协议执行。</p>
|
||||||
<p>4. 使用翻译和回复建议时，相关内容可能发送至已配置的模型服务商处理，具体范围以隐私政策为准。</p>
|
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
</AuthShell>
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,6 @@ import { Link, useNavigate } from 'react-router-dom'
|
|||||||
import { useForm } from 'react-hook-form'
|
import { useForm } from 'react-hook-form'
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
import { Sparkles } from 'lucide-react'
|
|
||||||
import { register as registerApi } from '@/services/api/auth'
|
import { register as registerApi } from '@/services/api/auth'
|
||||||
import { useAuthStore } from '@/app/store/auth'
|
import { useAuthStore } from '@/app/store/auth'
|
||||||
import { toast, errorMessage } from '@/app/store/toast'
|
import { toast, errorMessage } from '@/app/store/toast'
|
||||||
@@ -11,24 +10,25 @@ import { Button } from '@/components/ui/button'
|
|||||||
import { Input, Field } from '@/components/ui/input'
|
import { Input, Field } from '@/components/ui/input'
|
||||||
import { Select } from '@/components/ui/select'
|
import { Select } from '@/components/ui/select'
|
||||||
import { Checkbox } from '@/components/ui/checkbox'
|
import { Checkbox } from '@/components/ui/checkbox'
|
||||||
|
import { AuthShell } from '@/components/auth/AuthShell'
|
||||||
import { INDUSTRIES } from '@/config/constants'
|
import { INDUSTRIES } from '@/config/constants'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
name: z.string().min(2, '请输入您的姓名'),
|
name: z.string().min(2, '请输入您的姓名'),
|
||||||
account: z.string().min(5, '请输入手机号或邮箱'),
|
account: z.string().min(5, '请输入手机号或邮箱'),
|
||||||
password: z.string().min(8, '密码至少8位').max(32, '密码最长32位'),
|
password: z.string().min(8, '密码至少 8 位').max(32, '密码最长 32 位'),
|
||||||
company: z.string().min(2, '请输入企业名称'),
|
company: z.string().min(2, '请输入企业名称'),
|
||||||
industry: z.string().min(1, '请选择所属行业'),
|
industry: z.string().min(1, '请选择所属行业'),
|
||||||
teamSize: z.string().min(1, '请选择团队规模'),
|
teamSize: z.string().min(1, '请选择团队规模'),
|
||||||
})
|
})
|
||||||
|
|
||||||
type FormValues = z.infer<typeof schema>
|
type FormValues = z.infer<typeof schema>
|
||||||
|
|
||||||
const TEAM_SIZES = ['仅我一人', '2—5人', '6—20人', '21—50人', '50人以上']
|
const TEAM_SIZES = ['仅我一人', '2—5人', '6—20人', '21—50人', '50人以上']
|
||||||
|
const fieldClass = 'h-10 rounded-xl border-slate-200 bg-white focus-visible:ring-blue-100'
|
||||||
|
|
||||||
export function RegisterPage() {
|
export function RegisterPage() {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const setSession = useAuthStore((s) => s.setSession)
|
const setSession = useAuthStore((state) => state.setSession)
|
||||||
const [agreed, setAgreed] = useState(false)
|
const [agreed, setAgreed] = useState(false)
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
@@ -43,77 +43,74 @@ export function RegisterPage() {
|
|||||||
|
|
||||||
const onSubmit = async (values: FormValues) => {
|
const onSubmit = async (values: FormValues) => {
|
||||||
if (!agreed) {
|
if (!agreed) {
|
||||||
toast.warning('请先同意《隐私政策》和《服务协议》')
|
toast.warning('请先同意隐私政策和服务协议')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
const session = await registerApi(values)
|
const session = await registerApi(values)
|
||||||
setSession(session)
|
setSession(session)
|
||||||
toast.success('企业创建成功', '接下来请完成企业初始化配置')
|
|
||||||
navigate('/channels?setup=choose')
|
navigate('/channels?setup=choose')
|
||||||
} catch (e) {
|
} catch (error) {
|
||||||
toast.error(errorMessage(e))
|
toast.error(errorMessage(error))
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-background p-6">
|
<AuthShell
|
||||||
<div className="w-full max-w-[440px]">
|
heading="从第一条消息开始，建立清晰的客户关系。"
|
||||||
<div className="mb-8 flex items-center gap-2.5">
|
description="创建企业工作台后，可按需连接 Telegram、WhatsApp 或企业邮箱，并邀请团队成员协作。"
|
||||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-white">
|
topAction={(
|
||||||
<Sparkles className="h-5 w-5" />
|
<p className="text-xs text-slate-500">
|
||||||
</span>
|
已有账号？ <Link to="/login" className="font-medium text-blue-600 hover:text-blue-700">登录</Link>
|
||||||
<div>
|
</p>
|
||||||
<p className="text-base font-semibold">灵犀跨境</p>
|
)}
|
||||||
<p className="text-xs text-muted-foreground">注册并创建您的企业</p>
|
>
|
||||||
</div>
|
<div className="mb-7">
|
||||||
</div>
|
<p className="text-xs font-semibold tracking-[0.15em] text-blue-600">CREATE WORKSPACE</p>
|
||||||
|
<h2 className="mt-3 text-[28px] font-semibold tracking-[-0.035em] text-slate-950">创建企业工作台</h2>
|
||||||
|
<p className="mt-2 text-sm text-slate-500">填写基础信息，稍后再连接消息渠道。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
|
<form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
<Field label="姓名" required error={errors.name?.message}>
|
<Field label="姓名" required error={errors.name?.message}>
|
||||||
<Input placeholder="您的姓名" {...register('name')} />
|
<Input className={fieldClass} placeholder="您的姓名" autoComplete="name" {...register('name')} />
|
||||||
</Field>
|
</Field>
|
||||||
<Field label="手机号或邮箱" required error={errors.account?.message}>
|
<Field label="手机号或邮箱" required error={errors.account?.message}>
|
||||||
<Input placeholder="用于登录与接收通知" {...register('account')} />
|
<Input className={fieldClass} placeholder="用于登录" autoComplete="username" {...register('account')} />
|
||||||
</Field>
|
</Field>
|
||||||
<Field label="设置密码" required error={errors.password?.message} hint="8—32位，建议包含字母与数字">
|
</div>
|
||||||
<Input type="password" placeholder="请设置登录密码" {...register('password')} />
|
<Field label="设置密码" required error={errors.password?.message} hint="8—32 位">
|
||||||
|
<Input className={fieldClass} type="password" placeholder="请设置登录密码" autoComplete="new-password" {...register('password')} />
|
||||||
|
</Field>
|
||||||
|
<Field label="企业名称" required error={errors.company?.message}>
|
||||||
|
<Input className={fieldClass} placeholder="请输入企业名称" {...register('company')} />
|
||||||
|
</Field>
|
||||||
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||||
|
<Field label="所属行业" required error={errors.industry?.message}>
|
||||||
|
<Select placeholder="请选择" options={INDUSTRIES.map((item) => ({ value: item, label: item }))} {...register('industry')} />
|
||||||
</Field>
|
</Field>
|
||||||
<Field label="企业名称" required error={errors.company?.message}>
|
<Field label="团队规模" required error={errors.teamSize?.message}>
|
||||||
<Input placeholder="如：徐州欧汇科技有限公司" {...register('company')} />
|
<Select placeholder="请选择" options={TEAM_SIZES.map((item) => ({ value: item, label: item }))} {...register('teamSize')} />
|
||||||
</Field>
|
</Field>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
</div>
|
||||||
<Field label="所属行业" required error={errors.industry?.message}>
|
|
||||||
<Select placeholder="请选择" options={INDUSTRIES.map((i) => ({ value: i, label: i }))} {...register('industry')} />
|
|
||||||
</Field>
|
|
||||||
<Field label="团队规模" required error={errors.teamSize?.message}>
|
|
||||||
<Select placeholder="请选择" options={TEAM_SIZES.map((s) => ({ value: s, label: s }))} {...register('teamSize')} />
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="pt-1">
|
<Checkbox
|
||||||
<Checkbox
|
checked={agreed}
|
||||||
checked={agreed}
|
onCheckedChange={setAgreed}
|
||||||
onCheckedChange={setAgreed}
|
label="我已阅读并同意《隐私政策》和《服务协议》"
|
||||||
label="我已阅读并同意《隐私政策》和《服务协议》"
|
/>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button type="submit" className="w-full" size="lg" loading={loading}>
|
<Button type="submit" className="h-11 w-full rounded-xl shadow-[0_10px_24px_-14px_rgba(37,99,235,.8)]" loading={loading}>
|
||||||
创建企业并开始使用
|
创建企业
|
||||||
</Button>
|
</Button>
|
||||||
|
<p className="text-center text-[11px] leading-5 text-slate-400">
|
||||||
<p className="text-center text-sm text-muted-foreground">
|
注册后先选择需要接入的渠道，也可以暂时跳过。
|
||||||
已有账号？{' '}
|
</p>
|
||||||
<Link to="/login" className="font-medium text-primary hover:underline">
|
</form>
|
||||||
直接登录
|
</AuthShell>
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -233,19 +233,18 @@ export function ChannelsPage() {
|
|||||||
.at(-1)
|
.at(-1)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto max-w-[1480px] p-4 md:p-7">
|
<div className="page-shell">
|
||||||
<section className="relative mb-6 overflow-hidden rounded-[28px] border border-slate-200/80 bg-gradient-to-br from-white via-sky-50/40 to-emerald-50/60 px-5 py-6 shadow-[0_18px_60px_rgba(15,23,42,.06)] md:px-7">
|
<section className="relative mb-6 overflow-hidden rounded-[16px] border border-slate-200 bg-white px-5 py-6 shadow-[0_8px_28px_-24px_rgba(15,23,42,.55)] md:px-6">
|
||||||
<div className="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full bg-sky-200/25 blur-3xl" />
|
<div className="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full bg-primary-100/55 blur-3xl" />
|
||||||
<div className="relative flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
|
<div className="relative flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-3 inline-flex items-center gap-2 rounded-full border border-primary-200/80 bg-white/85 px-3 py-1 text-[11px] font-semibold text-primary-700 shadow-sm">
|
<div className="mb-3 inline-flex items-center gap-2 rounded-[8px] border border-primary-100 bg-primary-50 px-2.5 py-1 text-[11px] font-semibold text-primary-700">
|
||||||
<span className="relative flex h-2 w-2">
|
<span className="relative flex h-2 w-2">
|
||||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary-400 opacity-45" />
|
|
||||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-primary-500" />
|
<span className="relative inline-flex h-2 w-2 rounded-full bg-primary-500" />
|
||||||
</span>
|
</span>
|
||||||
渠道连接
|
渠道连接
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold tracking-[-0.035em] text-slate-950 md:text-3xl">渠道与账号</h1>
|
<h1 className="text-2xl font-semibold tracking-[-0.035em] text-slate-950 md:text-[28px]">渠道与账号</h1>
|
||||||
<p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
|
<p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
|
||||||
在一个工作台管理 WhatsApp、Telegram 与企业邮箱消息。
|
在一个工作台管理 WhatsApp、Telegram 与企业邮箱消息。
|
||||||
</p>
|
</p>
|
||||||
@@ -256,7 +255,7 @@ export function ChannelsPage() {
|
|||||||
{ label: '今日消息', value: String(todayMessages), icon: MessageSquareText },
|
{ label: '今日消息', value: String(todayMessages), icon: MessageSquareText },
|
||||||
{ label: '最近同步', value: latestSync ? formatRelative(latestSync) : '等待首次同步', icon: Activity },
|
{ label: '最近同步', value: latestSync ? formatRelative(latestSync) : '等待首次同步', icon: Activity },
|
||||||
].map((stat) => (
|
].map((stat) => (
|
||||||
<div key={stat.label} className="rounded-2xl border border-white/80 bg-white/75 p-3 shadow-sm backdrop-blur">
|
<div key={stat.label} className="rounded-[12px] border border-slate-200 bg-slate-50/70 p-3">
|
||||||
<stat.icon className="mb-2 h-4 w-4 text-primary" />
|
<stat.icon className="mb-2 h-4 w-4 text-primary" />
|
||||||
<p className="truncate text-base font-bold tracking-tight text-slate-900">{stat.value}</p>
|
<p className="truncate text-base font-bold tracking-tight text-slate-900">{stat.value}</p>
|
||||||
<p className="mt-0.5 text-[10px] font-medium text-slate-400">{stat.label}</p>
|
<p className="mt-0.5 text-[10px] font-medium text-slate-400">{stat.label}</p>
|
||||||
@@ -312,7 +311,7 @@ export function ChannelsPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="mb-5 flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
|
<div className="mb-5 flex flex-wrap items-center justify-between gap-3 rounded-[14px] border border-slate-200 bg-white p-3 shadow-sm">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm font-semibold text-slate-900">连接更多工作账号</p>
|
<p className="text-sm font-semibold text-slate-900">连接更多工作账号</p>
|
||||||
<p className="mt-0.5 text-xs text-slate-500">每种渠道可绑定多个账号，并指定一个默认账号用于发起新会话。</p>
|
<p className="mt-0.5 text-xs text-slate-500">每种渠道可绑定多个账号，并指定一个默认账号用于发起新会话。</p>
|
||||||
@@ -335,17 +334,17 @@ export function ChannelsPage() {
|
|||||||
const meta = CHANNEL_META[ch.type]
|
const meta = CHANNEL_META[ch.type]
|
||||||
const st = STATUS_MAP[ch.status]
|
const st = STATUS_MAP[ch.status]
|
||||||
return (
|
return (
|
||||||
<Card data-testid={`channel-card-${ch.type}`} key={ch.id} className="group overflow-hidden border-slate-200/80 bg-white transition-all duration-300 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-[0_18px_50px_rgba(15,23,42,.08)]">
|
<Card data-testid={`channel-card-${ch.type}`} key={ch.id} className="group overflow-hidden bg-white transition-all duration-200 hover:-translate-y-0.5 hover:border-primary-200 hover:shadow-[0_12px_28px_-18px_rgba(37,99,235,.5)]">
|
||||||
<div className={
|
<div className={
|
||||||
ch.type === 'telegram'
|
ch.type === 'telegram'
|
||||||
? 'h-1 bg-gradient-to-r from-sky-400 to-cyan-300'
|
? 'h-[3px] bg-primary-500'
|
||||||
: ch.type === 'whatsapp'
|
: ch.type === 'whatsapp'
|
||||||
? 'h-1 bg-gradient-to-r from-blue-500 via-cyan-400 to-violet-400'
|
? 'h-[3px] bg-sky-500'
|
||||||
: 'h-1 bg-gradient-to-r from-slate-500 to-slate-300'
|
: 'h-[3px] bg-slate-500'
|
||||||
} />
|
} />
|
||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<div className="flex items-start justify-between">
|
<div className="flex items-start justify-between">
|
||||||
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-50 ring-1 ring-slate-100 transition-transform duration-300 group-hover:scale-105">
|
<div className="flex h-12 w-12 items-center justify-center rounded-[12px] bg-slate-50 ring-1 ring-slate-100 transition-transform duration-200 group-hover:scale-[1.03]">
|
||||||
<ChannelIcon channel={ch.type} size="lg" />
|
<ChannelIcon channel={ch.type} size="lg" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap justify-end gap-1.5">
|
<div className="flex flex-wrap justify-end gap-1.5">
|
||||||
|
|||||||
@@ -175,7 +175,7 @@ export function CustomersPage() {
|
|||||||
if (isError) return <ErrorState onRetry={() => refetch()} />
|
if (isError) return <ErrorState onRetry={() => refetch()} />
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 md:p-6">
|
<div className="page-shell">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="客户管理"
|
title="客户管理"
|
||||||
description={`共 ${total} 个客户`}
|
description={`共 ${total} 个客户`}
|
||||||
@@ -204,27 +204,27 @@ export function CustomersPage() {
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
extra={
|
extra={
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2 rounded-[14px] border border-slate-200 bg-white p-3 shadow-sm">
|
||||||
<div className="relative min-w-[200px] max-w-xs">
|
<div className="relative min-w-[200px] max-w-xs">
|
||||||
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
<input
|
<input
|
||||||
placeholder="搜索客户名称/公司/国家/产品"
|
placeholder="搜索客户名称/公司/国家/产品"
|
||||||
value={keyword}
|
value={keyword}
|
||||||
onChange={(e) => setKeyword(e.target.value)}
|
onChange={(e) => setKeyword(e.target.value)}
|
||||||
className="h-9 w-full rounded-md border border-input bg-card pl-8 pr-3 text-sm placeholder:text-muted-foreground focus:border-primary focus:outline-none"
|
className="h-9 w-full rounded-[9px] border border-slate-200 bg-slate-50/60 pl-8 pr-3 text-sm placeholder:text-slate-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select placeholder="国家" value={country} onChange={(e) => setCountry(e.target.value)} options={COUNTRIES.map((c) => ({ value: c.code, label: `${c.flag} ${c.zh}` }))} className="w-32" />
|
<Select placeholder="国家" value={country} onChange={(e) => setCountry(e.target.value)} options={COUNTRIES.map((c) => ({ value: c.code, label: `${c.flag} ${c.zh}` }))} className="w-32" />
|
||||||
<Select placeholder="渠道" value={channel} onChange={(e) => setChannel(e.target.value)} options={Object.entries(CHANNEL_META).map(([k, v]) => ({ value: k, label: v.name }))} className="w-28" />
|
<Select placeholder="渠道" value={channel} onChange={(e) => setChannel(e.target.value)} options={Object.entries(CHANNEL_META).map(([k, v]) => ({ value: k, label: v.name }))} className="w-28" />
|
||||||
<Select placeholder="阶段" value={stage} onChange={(e) => setStage(e.target.value)} options={CUSTOMER_STAGES.map((s) => ({ value: s.value, label: s.label }))} className="w-28" />
|
<Select placeholder="阶段" value={stage} onChange={(e) => setStage(e.target.value)} options={CUSTOMER_STAGES.map((s) => ({ value: s.value, label: s.label }))} className="w-28" />
|
||||||
<Select placeholder="意向" value={intentLevel} onChange={(e) => setIntentLevel(e.target.value)} options={INTENT_LEVELS.map((l) => ({ value: l.value, label: l.label }))} className="w-28" />
|
<Select placeholder="意向" value={intentLevel} onChange={(e) => setIntentLevel(e.target.value)} options={INTENT_LEVELS.map((l) => ({ value: l.value, label: l.label }))} className="w-28" />
|
||||||
<div className="flex items-center gap-1 rounded-md border border-border bg-card p-0.5 ml-auto">
|
<div className="ml-auto flex items-center gap-1 rounded-[9px] border border-slate-200 bg-slate-50 p-0.5">
|
||||||
{[
|
{[
|
||||||
{ v: 'table' as const, icon: TableProperties },
|
{ v: 'table' as const, icon: TableProperties },
|
||||||
{ v: 'card' as const, icon: LayoutGrid },
|
{ v: 'card' as const, icon: LayoutGrid },
|
||||||
{ v: 'kanban' as const, icon: List },
|
{ v: 'kanban' as const, icon: List },
|
||||||
].map((opt) => (
|
].map((opt) => (
|
||||||
<button key={opt.v} onClick={() => setView(opt.v)} className={cn('rounded p-1.5', view === opt.v ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground')}>
|
<button key={opt.v} onClick={() => setView(opt.v)} className={cn('rounded-[7px] p-1.5 transition', view === opt.v ? 'bg-white text-primary-700 shadow-sm' : 'text-slate-400 hover:text-slate-800')}>
|
||||||
<opt.icon className="h-4 w-4" />
|
<opt.icon className="h-4 w-4" />
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
@@ -235,7 +235,7 @@ export function CustomersPage() {
|
|||||||
|
|
||||||
{/* 批量操作 */}
|
{/* 批量操作 */}
|
||||||
{selected.size > 0 && (
|
{selected.size > 0 && (
|
||||||
<div className="mb-3 flex items-center gap-2 rounded-lg bg-primary-50 px-3 py-2">
|
<div className="mb-3 flex items-center gap-2 rounded-[12px] border border-primary-200 bg-primary-50 px-3 py-2 shadow-sm">
|
||||||
<span className="text-sm font-medium text-primary-700">已选 {selected.size} 位客户</span>
|
<span className="text-sm font-medium text-primary-700">已选 {selected.size} 位客户</span>
|
||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
<Button size="sm" variant="outline" onClick={() => { setBatchValue(''); setBatchDialog('assign') }}><UserRoundPlus className="h-4 w-4" />批量分配</Button>
|
<Button size="sm" variant="outline" onClick={() => { setBatchValue(''); setBatchDialog('assign') }}><UserRoundPlus className="h-4 w-4" />批量分配</Button>
|
||||||
@@ -246,7 +246,7 @@ export function CustomersPage() {
|
|||||||
|
|
||||||
{/* 表格视图 */}
|
{/* 表格视图 */}
|
||||||
{view === 'table' && (
|
{view === 'table' && (
|
||||||
<div className="rounded-lg border border-border bg-card">
|
<div className="overflow-hidden rounded-[14px] border border-slate-200 bg-white shadow-[0_1px_2px_rgba(15,23,42,.03)]">
|
||||||
<Table>
|
<Table>
|
||||||
<THead>
|
<THead>
|
||||||
<Tr>
|
<Tr>
|
||||||
|
|||||||
@@ -92,17 +92,17 @@ export function DashboardPage() {
|
|||||||
const s = data.stats
|
const s = data.stats
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto max-w-[1600px] p-4 md:p-7">
|
<div className="page-shell">
|
||||||
{/* 顶部欢迎区 */}
|
{/* 顶部欢迎区 */}
|
||||||
<div className="mb-7 overflow-hidden rounded-3xl border border-slate-200/80 bg-white px-5 py-5 shadow-[0_16px_50px_rgba(15,23,42,.035)] md:px-7 md:py-6">
|
<div className="mb-6 overflow-hidden rounded-[16px] border border-slate-200 bg-white px-5 py-5 shadow-[0_8px_28px_-24px_rgba(15,23,42,.55)] md:px-6">
|
||||||
<div className="flex flex-wrap items-start justify-between gap-5">
|
<div className="flex flex-wrap items-start justify-between gap-5">
|
||||||
<div>
|
<div>
|
||||||
<p className="eyebrow">Business command center</p>
|
<p className="eyebrow">今日工作概览</p>
|
||||||
<h1 className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-slate-950 md:text-[28px]">
|
<h1 className="mt-1.5 text-2xl font-semibold tracking-[-0.035em] text-slate-950 md:text-[28px]">
|
||||||
{greeting}，{user?.name}
|
{greeting}，{user?.name}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-1.5 text-sm text-slate-500">
|
<p className="mt-1.5 text-sm text-slate-500">
|
||||||
{dateStr} · {tenant?.name} · 数据更新于 {formatDateTime(data.updatedAt).slice(11)}
|
{dateStr} · 数据更新于 {formatDateTime(data.updatedAt).slice(11)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
@@ -114,9 +114,9 @@ export function DashboardPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5 flex gap-2 overflow-x-auto border-t border-slate-100 pt-4 scrollbar-thin">
|
<div className="mt-5 flex flex-wrap gap-2 border-t border-slate-100 pt-4">
|
||||||
{quickActions.slice(0, 5).map((a) => (
|
{quickActions.slice(0, 5).map((a) => (
|
||||||
<Button key={a.label} variant="ghost" size="sm" className="shrink-0 rounded-xl bg-slate-50 text-slate-600 hover:bg-primary-50 hover:text-primary-800" onClick={a.onClick}>
|
<Button key={a.label} variant="ghost" size="sm" className="rounded-[9px] bg-slate-50 text-slate-600 hover:bg-primary-50 hover:text-primary-800" onClick={a.onClick}>
|
||||||
<a.icon className="h-3.5 w-3.5" />
|
<a.icon className="h-3.5 w-3.5" />
|
||||||
{a.label}
|
{a.label}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -125,10 +125,10 @@ export function DashboardPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 核心指标 */}
|
{/* 核心指标 */}
|
||||||
<div className="mb-3 flex items-end justify-between">
|
<div className="section-heading">
|
||||||
<div>
|
<div>
|
||||||
<p className="eyebrow">工作台</p>
|
<h2 className="section-title">今日重点</h2>
|
||||||
<h2 className="mt-1 text-lg font-semibold tracking-tight">今日重点</h2>
|
<p className="section-description">优先处理待回复、跟进与高意向客户</p>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={() => navigate('/analytics')} className="text-xs font-medium text-primary hover:text-primary-700">查看完整分析 →</button>
|
<button onClick={() => navigate('/analytics')} className="text-xs font-medium text-primary hover:text-primary-700">查看完整分析 →</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,15 +138,41 @@ export function DashboardPage() {
|
|||||||
<StatCard title="高意向客户" value={s.highIntentCustomers.value} delta={s.highIntentCustomers.delta} icon={Target} onClick={() => navigate('/customers?intentLevel=high')} />
|
<StatCard title="高意向客户" value={s.highIntentCustomers.value} delta={s.highIntentCustomers.delta} icon={Target} onClick={() => navigate('/customers?intentLevel=high')} />
|
||||||
<StatCard title="今日待跟进" value={s.todayFollowUps.value} delta={s.todayFollowUps.delta} icon={CalendarClock} onClick={() => navigate('/opportunities?tab=tasks')} />
|
<StatCard title="今日待跟进" value={s.todayFollowUps.value} delta={s.todayFollowUps.delta} icon={CalendarClock} onClick={() => navigate('/opportunities?tab=tasks')} />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
|
<Card className="mt-3 overflow-hidden">
|
||||||
<StatCard title="风险预警" value={s.openRisks.value} delta={s.openRisks.delta} icon={AlertTriangle} onClick={() => navigate('/risks')} />
|
<div className="grid grid-cols-2 divide-x divide-y divide-slate-100 md:grid-cols-4 md:divide-y-0">
|
||||||
<StatCard title="平均首次响应" value={s.avgFirstResponseMin.value} suffix="分钟" delta={s.avgFirstResponseMin.delta} icon={Timer} invertDelta />
|
{[
|
||||||
<StatCard title="本月客户转化率" value={`${s.monthConversionRate.value}%`} delta={s.monthConversionRate.delta} icon={BadgePercent} />
|
{ label: '风险预警', value: s.openRisks.value, icon: AlertTriangle, onClick: () => navigate('/risks') },
|
||||||
<StatCard title="AI回复采纳率" value={`${s.aiAdoptionRate.value}%`} delta={s.aiAdoptionRate.delta} icon={Zap} />
|
{ label: '平均首次响应', value: `${s.avgFirstResponseMin.value} 分钟`, icon: Timer },
|
||||||
</div>
|
{ label: '本月客户转化率', value: `${s.monthConversionRate.value}%`, icon: BadgePercent },
|
||||||
|
{ label: '智能回复采纳率', value: `${s.aiAdoptionRate.value}%`, icon: Zap },
|
||||||
|
].map((item) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={item.label}
|
||||||
|
onClick={item.onClick}
|
||||||
|
className="flex min-h-[86px] items-center gap-3 px-4 py-3 text-left transition hover:bg-slate-50 disabled:cursor-default"
|
||||||
|
>
|
||||||
|
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] bg-slate-100 text-slate-600">
|
||||||
|
<item.icon className="h-4 w-4" />
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<span className="block text-[11px] font-medium text-slate-500">{item.label}</span>
|
||||||
|
<span className="mt-0.5 block text-lg font-semibold tracking-tight text-slate-950">{item.value}</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
{/* 中部三栏 */}
|
{/* 中部三栏 */}
|
||||||
<div className="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-3">
|
<section className="page-section">
|
||||||
|
<div className="section-heading">
|
||||||
|
<div>
|
||||||
|
<h2 className="section-title">待处理工作</h2>
|
||||||
|
<p className="section-description">集中查看任务、重点客户与各渠道消息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||||
{/* 今日待办 */}
|
{/* 今日待办 */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader
|
<CardHeader
|
||||||
@@ -257,9 +283,17 @@ export function DashboardPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* 图表区 */}
|
{/* 图表区 */}
|
||||||
<div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
|
<section className="page-section">
|
||||||
|
<div className="section-heading">
|
||||||
|
<div>
|
||||||
|
<h2 className="section-title">经营趋势</h2>
|
||||||
|
<p className="section-description">客户来源、转化阶段与团队响应表现</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||||
<ChartCard title="询盘趋势（近14天）" height={240}>
|
<ChartCard title="询盘趋势（近14天）" height={240}>
|
||||||
<TrendChart data={data.inquiryTrend} series={[{ key: 'inquiries', name: '询盘数' }, { key: 'customers', name: '新增客户' }]} />
|
<TrendChart data={data.inquiryTrend} series={[{ key: 'inquiries', name: '询盘数' }, { key: 'customers', name: '新增客户' }]} />
|
||||||
</ChartCard>
|
</ChartCard>
|
||||||
@@ -277,6 +311,7 @@ export function DashboardPage() {
|
|||||||
/>
|
/>
|
||||||
</ChartCard>
|
</ChartCard>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* 最近风险 */}
|
{/* 最近风险 */}
|
||||||
<Card className="mt-4">
|
<Card className="mt-4">
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import {
|
|||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
Ban,
|
Ban,
|
||||||
BellOff,
|
BellOff,
|
||||||
|
Brain,
|
||||||
Check,
|
Check,
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
Eraser,
|
Eraser,
|
||||||
@@ -48,6 +49,7 @@ import { Button } from '@/components/ui/button'
|
|||||||
import { Dialog } from '@/components/ui/dialog'
|
import { Dialog } from '@/components/ui/dialog'
|
||||||
import { Dropdown } from '@/components/ui/dropdown'
|
import { Dropdown } from '@/components/ui/dropdown'
|
||||||
import { Segmented } from '@/components/ui/tabs'
|
import { Segmented } from '@/components/ui/tabs'
|
||||||
|
import { Switch } from '@/components/ui/switch'
|
||||||
import { Avatar } from '@/components/ui/avatar'
|
import { Avatar } from '@/components/ui/avatar'
|
||||||
import { ChannelIcon } from '@/components/common/ChannelIcon'
|
import { ChannelIcon } from '@/components/common/ChannelIcon'
|
||||||
import { CountryFlag } from '@/components/common/CountryFlag'
|
import { CountryFlag } from '@/components/common/CountryFlag'
|
||||||
@@ -127,6 +129,7 @@ export function InboxPage() {
|
|||||||
const [mobilePanel, setMobilePanel] = useState<'list' | 'chat' | 'insight'>('list')
|
const [mobilePanel, setMobilePanel] = useState<'list' | 'chat' | 'insight'>('list')
|
||||||
const [showInsight, setShowInsight] = useState(false) // desktop right panel toggle
|
const [showInsight, setShowInsight] = useState(false) // desktop right panel toggle
|
||||||
const [showAiReplies, setShowAiReplies] = useState(false)
|
const [showAiReplies, setShowAiReplies] = useState(false)
|
||||||
|
const [intentSaving, setIntentSaving] = useState(false)
|
||||||
const [chatWallpaper, setChatWallpaper] = useState<ChatWallpaper>(() => {
|
const [chatWallpaper, setChatWallpaper] = useState<ChatWallpaper>(() => {
|
||||||
const saved = window.localStorage.getItem('lingxi-chat-wallpaper')
|
const saved = window.localStorage.getItem('lingxi-chat-wallpaper')
|
||||||
return CHAT_WALLPAPERS.some((item) => item.value === saved) ? saved as ChatWallpaper : 'ocean'
|
return CHAT_WALLPAPERS.some((item) => item.value === saved) ? saved as ChatWallpaper : 'ocean'
|
||||||
@@ -294,6 +297,7 @@ export function InboxPage() {
|
|||||||
message?: Message
|
message?: Message
|
||||||
customer?: Customer
|
customer?: Customer
|
||||||
conversation?: Conversation
|
conversation?: Conversation
|
||||||
|
backfill?: import('@/types').AiBackfillStatus
|
||||||
}
|
}
|
||||||
try { event = JSON.parse(String(raw.data)) } catch { return }
|
try { event = JSON.parse(String(raw.data)) } catch { return }
|
||||||
const activeConversationCache = queryClient.getQueryData<{ list: ConversationListItem[] }>(
|
const activeConversationCache = queryClient.getQueryData<{ list: ConversationListItem[] }>(
|
||||||
@@ -342,6 +346,15 @@ export function InboxPage() {
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
|
event.type === 'conversation.ai-backfill.updated'
|
||||||
|
&& event.conversationId
|
||||||
|
&& event.backfill
|
||||||
|
) {
|
||||||
|
queryClient.setQueryData<any>(['conversation', event.conversationId], (current: any) => current
|
||||||
|
? { ...current, aiBackfill: event.backfill }
|
||||||
|
: current)
|
||||||
|
}
|
||||||
if (event.conversationId && event.conversation) {
|
if (event.conversationId && event.conversation) {
|
||||||
queryClient.setQueryData<any>(['conversation', event.conversationId], (current: any) => {
|
queryClient.setQueryData<any>(['conversation', event.conversationId], (current: any) => {
|
||||||
const customer = event.customer || current?.customer
|
const customer = event.customer || current?.customer
|
||||||
@@ -350,6 +363,7 @@ export function InboxPage() {
|
|||||||
// insight components require both the conversation and its customer.
|
// insight components require both the conversation and its customer.
|
||||||
if (!customer) return current
|
if (!customer) return current
|
||||||
return {
|
return {
|
||||||
|
...current,
|
||||||
conversation: event.conversation,
|
conversation: event.conversation,
|
||||||
customer,
|
customer,
|
||||||
}
|
}
|
||||||
@@ -424,16 +438,19 @@ export function InboxPage() {
|
|||||||
text,
|
text,
|
||||||
convId: id,
|
convId: id,
|
||||||
autoTranslate,
|
autoTranslate,
|
||||||
|
targetLang,
|
||||||
translationCn,
|
translationCn,
|
||||||
}: {
|
}: {
|
||||||
text: string
|
text: string
|
||||||
convId: string
|
convId: string
|
||||||
autoTranslate?: boolean
|
autoTranslate?: boolean
|
||||||
|
targetLang?: string
|
||||||
translationCn?: string
|
translationCn?: string
|
||||||
}) => {
|
}) => {
|
||||||
return sendMessage(id, {
|
return sendMessage(id, {
|
||||||
text,
|
text,
|
||||||
autoTranslate,
|
autoTranslate,
|
||||||
|
targetLang,
|
||||||
translationCn,
|
translationCn,
|
||||||
replyToId: replyingTo?.id,
|
replyToId: replyingTo?.id,
|
||||||
replyPreview: replyingTo?.text,
|
replyPreview: replyingTo?.text,
|
||||||
@@ -447,12 +464,13 @@ export function InboxPage() {
|
|||||||
onError: (e) => toast.error(errorMessage(e)),
|
onError: (e) => toast.error(errorMessage(e)),
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleSend = async (text: string, autoTranslate = true) => {
|
const handleSend = async (text: string, autoTranslate = true, targetLang = 'auto') => {
|
||||||
if (!convId) return
|
if (!convId) return
|
||||||
await sendMsg.mutateAsync({
|
await sendMsg.mutateAsync({
|
||||||
text,
|
text,
|
||||||
convId,
|
convId,
|
||||||
autoTranslate,
|
autoTranslate,
|
||||||
|
targetLang,
|
||||||
translationCn: draftTranslationCn || undefined,
|
translationCn: draftTranslationCn || undefined,
|
||||||
})
|
})
|
||||||
if (convDetail?.conversation.channel === 'whatsapp') {
|
if (convDetail?.conversation.channel === 'whatsapp') {
|
||||||
@@ -461,6 +479,22 @@ export function InboxPage() {
|
|||||||
setDraftTranslationCn('')
|
setDraftTranslationCn('')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleTargetLanguageChange = async (targetLang: string) => {
|
||||||
|
if (!convId) return
|
||||||
|
queryClient.setQueryData(['conversation', convId], (current: any) => current
|
||||||
|
? {
|
||||||
|
...current,
|
||||||
|
conversation: { ...current.conversation, translationTargetLang: targetLang },
|
||||||
|
}
|
||||||
|
: current)
|
||||||
|
try {
|
||||||
|
await updateConversation(convId, { translationTargetLang: targetLang })
|
||||||
|
} catch (error) {
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['conversation', convId] })
|
||||||
|
toast.error(errorMessage(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleDraftChange = useCallback((text: string) => {
|
const handleDraftChange = useCallback((text: string) => {
|
||||||
setDraftText(text)
|
setDraftText(text)
|
||||||
if (!convId || convDetail?.conversation.channel !== 'whatsapp') return
|
if (!convId || convDetail?.conversation.channel !== 'whatsapp') return
|
||||||
@@ -899,12 +933,12 @@ export function InboxPage() {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
||||||
const handleAdopt = (content: string, translationCn: string) => {
|
const handleAdopt = (content: string, translationCn: string, suggestionId: string) => {
|
||||||
setDraftText(content)
|
setDraftText(content)
|
||||||
setDraftTranslationCn(translationCn)
|
setDraftTranslationCn(translationCn)
|
||||||
setShowAiReplies(false)
|
setShowAiReplies(false)
|
||||||
if (convId) {
|
if (convId) {
|
||||||
void import('@/services/api/ai').then(({ recordAiAdoption }) => recordAiAdoption(convId, content))
|
void import('@/services/api/ai').then(({ recordAiAdoption }) => recordAiAdoption(convId, content, suggestionId))
|
||||||
}
|
}
|
||||||
toast.success('回复已采用，请在输入区编辑后发送')
|
toast.success('回复已采用，请在输入区编辑后发送')
|
||||||
}
|
}
|
||||||
@@ -921,6 +955,25 @@ export function InboxPage() {
|
|||||||
window.localStorage.setItem('lingxi-message-view-mode', nextMode)
|
window.localStorage.setItem('lingxi-message-view-mode', nextMode)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleIntentToggle = async (enabled: boolean) => {
|
||||||
|
if (!convId || intentSaving) return
|
||||||
|
setIntentSaving(true)
|
||||||
|
try {
|
||||||
|
const conversation = await updateConversation(convId, { messageIntentEnabled: enabled })
|
||||||
|
queryClient.setQueryData(['conversation', convId], (current: any) => current
|
||||||
|
? { ...current, conversation: { ...current.conversation, ...conversation } }
|
||||||
|
: current)
|
||||||
|
if (enabled) {
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ['messages', convId] })
|
||||||
|
}
|
||||||
|
toast.success(enabled ? '已开启逐句意图识别' : '已关闭逐句意图识别')
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(errorMessage(error))
|
||||||
|
} finally {
|
||||||
|
setIntentSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const listItems = convData?.list ?? []
|
const listItems = convData?.list ?? []
|
||||||
const renderMessageTimeline = () => {
|
const renderMessageTimeline = () => {
|
||||||
let previousDay = ''
|
let previousDay = ''
|
||||||
@@ -958,6 +1011,7 @@ export function InboxPage() {
|
|||||||
customerName={convDetail?.customer?.name}
|
customerName={convDetail?.customer?.name}
|
||||||
customerAvatar={convDetail?.customer?.avatarUrl}
|
customerAvatar={convDetail?.customer?.avatarUrl}
|
||||||
channel={convDetail?.conversation.channel}
|
channel={convDetail?.conversation.channel}
|
||||||
|
showIntent={convDetail?.conversation.messageIntentEnabled !== false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -1006,6 +1060,9 @@ export function InboxPage() {
|
|||||||
loading={convDetailLoading}
|
loading={convDetailLoading}
|
||||||
viewMode={viewMode}
|
viewMode={viewMode}
|
||||||
onViewModeChange={handleViewModeChange}
|
onViewModeChange={handleViewModeChange}
|
||||||
|
intentEnabled={convDetail?.conversation.messageIntentEnabled !== false}
|
||||||
|
intentSaving={intentSaving}
|
||||||
|
onIntentToggle={handleIntentToggle}
|
||||||
wallpaper={chatWallpaper}
|
wallpaper={chatWallpaper}
|
||||||
onWallpaperChange={setChatWallpaper}
|
onWallpaperChange={setChatWallpaper}
|
||||||
onTelegramAction={(action) => {
|
onTelegramAction={(action) => {
|
||||||
@@ -1027,6 +1084,7 @@ export function InboxPage() {
|
|||||||
customer={convDetail.customer}
|
customer={convDetail.customer}
|
||||||
conversation={convDetail.conversation}
|
conversation={convDetail.conversation}
|
||||||
onOpenProfile={() => setMobilePanel('insight')}
|
onOpenProfile={() => setMobilePanel('insight')}
|
||||||
|
aiBackfill={convDetail.aiBackfill}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div ref={messageListRef} data-testid="message-list" className={`chat-wallpaper chat-wallpaper-${chatWallpaper} min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-thin`}>
|
<div ref={messageListRef} data-testid="message-list" className={`chat-wallpaper chat-wallpaper-${chatWallpaper} min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-thin`}>
|
||||||
@@ -1044,6 +1102,7 @@ export function InboxPage() {
|
|||||||
{showAiReplies && convId ? (
|
{showAiReplies && convId ? (
|
||||||
<AiReplies
|
<AiReplies
|
||||||
conversationId={convId}
|
conversationId={convId}
|
||||||
|
targetLanguage={convDetail?.conversation.translationTargetLang || 'auto'}
|
||||||
onAdopt={handleAdopt}
|
onAdopt={handleAdopt}
|
||||||
onEdit={handleEdit}
|
onEdit={handleEdit}
|
||||||
onClose={() => setShowAiReplies(false)}
|
onClose={() => setShowAiReplies(false)}
|
||||||
@@ -1067,6 +1126,9 @@ export function InboxPage() {
|
|||||||
replyingTo={replyingTo}
|
replyingTo={replyingTo}
|
||||||
onCancelReply={() => setReplyingTo(null)}
|
onCancelReply={() => setReplyingTo(null)}
|
||||||
channel={convDetail?.conversation.channel}
|
channel={convDetail?.conversation.channel}
|
||||||
|
targetLanguage={convDetail?.conversation.translationTargetLang || 'auto'}
|
||||||
|
detectedLanguage={convDetail?.customer.language}
|
||||||
|
onTargetLanguageChange={handleTargetLanguageChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1087,7 +1149,7 @@ export function InboxPage() {
|
|||||||
|
|
||||||
// 桌面端三栏布局
|
// 桌面端三栏布局
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[calc(100vh-64px)] overflow-hidden bg-white">
|
<div className="flex h-[calc(100vh-64px)] overflow-hidden bg-slate-100/70">
|
||||||
{noteDialog}
|
{noteDialog}
|
||||||
{whatsappGroupDialog}
|
{whatsappGroupDialog}
|
||||||
{telegramDialogs}
|
{telegramDialogs}
|
||||||
@@ -1104,7 +1166,7 @@ export function InboxPage() {
|
|||||||
{/* 左栏：会话列表 360px */}
|
{/* 左栏：会话列表 360px */}
|
||||||
<div
|
<div
|
||||||
data-testid="conversation-list-panel"
|
data-testid="conversation-list-panel"
|
||||||
className="relative z-20 w-80 shrink-0 border-e border-slate-300/90 bg-white lg:w-[360px]"
|
className="relative z-20 w-80 shrink-0 border-e border-slate-300/90 bg-white shadow-[8px_0_24px_-24px_rgba(15,23,42,.75)] lg:w-[360px]"
|
||||||
>
|
>
|
||||||
<ConversationList
|
<ConversationList
|
||||||
items={listItems}
|
items={listItems}
|
||||||
@@ -1126,7 +1188,7 @@ export function InboxPage() {
|
|||||||
{/* 中栏：聊天区 flex-1 */}
|
{/* 中栏：聊天区 flex-1 */}
|
||||||
<div
|
<div
|
||||||
data-testid="chat-panel"
|
data-testid="chat-panel"
|
||||||
className={`relative z-10 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[#eaf2f9] ${showInsight ? '' : 'border-e-0'}`}
|
className={`relative z-10 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[#eaf2f9] shadow-[inset_1px_0_0_rgba(255,255,255,.75)] ${showInsight ? '' : 'border-e-0'}`}
|
||||||
>
|
>
|
||||||
{convId ? (
|
{convId ? (
|
||||||
<>
|
<>
|
||||||
@@ -1136,6 +1198,9 @@ export function InboxPage() {
|
|||||||
loading={convDetailLoading}
|
loading={convDetailLoading}
|
||||||
viewMode={viewMode}
|
viewMode={viewMode}
|
||||||
onViewModeChange={handleViewModeChange}
|
onViewModeChange={handleViewModeChange}
|
||||||
|
intentEnabled={convDetail?.conversation.messageIntentEnabled !== false}
|
||||||
|
intentSaving={intentSaving}
|
||||||
|
onIntentToggle={handleIntentToggle}
|
||||||
wallpaper={chatWallpaper}
|
wallpaper={chatWallpaper}
|
||||||
onWallpaperChange={setChatWallpaper}
|
onWallpaperChange={setChatWallpaper}
|
||||||
onTelegramAction={(action) => {
|
onTelegramAction={(action) => {
|
||||||
@@ -1156,6 +1221,7 @@ export function InboxPage() {
|
|||||||
customer={convDetail.customer}
|
customer={convDetail.customer}
|
||||||
conversation={convDetail.conversation}
|
conversation={convDetail.conversation}
|
||||||
onOpenProfile={() => setShowInsight(true)}
|
onOpenProfile={() => setShowInsight(true)}
|
||||||
|
aiBackfill={convDetail.aiBackfill}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div ref={messageListRef} data-testid="message-list" className={`chat-wallpaper chat-wallpaper-${chatWallpaper} min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-thin`}>
|
<div ref={messageListRef} data-testid="message-list" className={`chat-wallpaper chat-wallpaper-${chatWallpaper} min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-thin`}>
|
||||||
@@ -1177,6 +1243,7 @@ export function InboxPage() {
|
|||||||
{showAiReplies ? (
|
{showAiReplies ? (
|
||||||
<AiReplies
|
<AiReplies
|
||||||
conversationId={convId}
|
conversationId={convId}
|
||||||
|
targetLanguage={convDetail?.conversation.translationTargetLang || 'auto'}
|
||||||
onAdopt={handleAdopt}
|
onAdopt={handleAdopt}
|
||||||
onEdit={handleEdit}
|
onEdit={handleEdit}
|
||||||
onClose={() => setShowAiReplies(false)}
|
onClose={() => setShowAiReplies(false)}
|
||||||
@@ -1200,6 +1267,9 @@ export function InboxPage() {
|
|||||||
replyingTo={replyingTo}
|
replyingTo={replyingTo}
|
||||||
onCancelReply={() => setReplyingTo(null)}
|
onCancelReply={() => setReplyingTo(null)}
|
||||||
channel={convDetail?.conversation.channel}
|
channel={convDetail?.conversation.channel}
|
||||||
|
targetLanguage={convDetail?.conversation.translationTargetLang || 'auto'}
|
||||||
|
detectedLanguage={convDetail?.customer.language}
|
||||||
|
onTargetLanguageChange={handleTargetLanguageChange}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
@@ -1395,6 +1465,9 @@ function ChatHeader({
|
|||||||
loading,
|
loading,
|
||||||
viewMode,
|
viewMode,
|
||||||
onViewModeChange,
|
onViewModeChange,
|
||||||
|
intentEnabled,
|
||||||
|
intentSaving,
|
||||||
|
onIntentToggle,
|
||||||
wallpaper,
|
wallpaper,
|
||||||
onWallpaperChange,
|
onWallpaperChange,
|
||||||
onTelegramAction,
|
onTelegramAction,
|
||||||
@@ -1408,6 +1481,9 @@ function ChatHeader({
|
|||||||
loading: boolean
|
loading: boolean
|
||||||
viewMode: ViewMode
|
viewMode: ViewMode
|
||||||
onViewModeChange: (v: ViewMode) => void
|
onViewModeChange: (v: ViewMode) => void
|
||||||
|
intentEnabled: boolean
|
||||||
|
intentSaving: boolean
|
||||||
|
onIntentToggle: (enabled: boolean) => void
|
||||||
wallpaper: ChatWallpaper
|
wallpaper: ChatWallpaper
|
||||||
onWallpaperChange: (wallpaper: ChatWallpaper) => void
|
onWallpaperChange: (wallpaper: ChatWallpaper) => void
|
||||||
onTelegramAction: (action: ConversationAction) => void
|
onTelegramAction: (action: ConversationAction) => void
|
||||||
@@ -1494,6 +1570,26 @@ function ChatHeader({
|
|||||||
]}
|
]}
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
data-testid="conversation-intent-toggle"
|
||||||
|
className={cn(
|
||||||
|
'flex shrink-0 items-center gap-1.5 rounded-full border px-2 py-1 transition-colors',
|
||||||
|
intentEnabled
|
||||||
|
? 'border-violet-200 bg-violet-50 text-violet-700'
|
||||||
|
: 'border-slate-200 bg-slate-50 text-slate-500',
|
||||||
|
)}
|
||||||
|
title={intentEnabled ? '逐句意图识别已开启' : '逐句意图识别已关闭'}
|
||||||
|
>
|
||||||
|
<Brain className="h-3.5 w-3.5" />
|
||||||
|
<span className="hidden text-[11px] font-medium lg:inline">意图识别</span>
|
||||||
|
<Switch
|
||||||
|
ariaLabel="当前会话逐句意图识别"
|
||||||
|
checked={intentEnabled}
|
||||||
|
disabled={intentSaving}
|
||||||
|
onCheckedChange={onIntentToggle}
|
||||||
|
className="scale-90"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={(
|
trigger={(
|
||||||
<Button variant="ghost" size="icon-sm" title="切换聊天背景" aria-label="切换聊天背景">
|
<Button variant="ghost" size="icon-sm" title="切换聊天背景" aria-label="切换聊天背景">
|
||||||
|
|||||||
@@ -29,20 +29,28 @@ export function KnowledgePage() {
|
|||||||
const [createOpen, setCreateOpen] = useState(false)
|
const [createOpen, setCreateOpen] = useState(false)
|
||||||
const [editItem, setEditItem] = useState<KnowledgeItem | null>(null)
|
const [editItem, setEditItem] = useState<KnowledgeItem | null>(null)
|
||||||
const [searchQ, setSearchQ] = useState('')
|
const [searchQ, setSearchQ] = useState('')
|
||||||
|
const [createDraft, setCreateDraft] = useState({ title: '', content: '' })
|
||||||
|
|
||||||
const { data, isLoading, isError, refetch } = useQuery({
|
const { data, isLoading, isError, refetch } = useQuery({
|
||||||
queryKey: ['knowledge', category, keyword],
|
queryKey: ['knowledge', category, keyword],
|
||||||
queryFn: () => getKnowledge({ category, keyword }),
|
queryFn: () => getKnowledge({ category, keyword }),
|
||||||
})
|
})
|
||||||
const { data: stats } = useQuery({ queryKey: ['knowledge-stats'], queryFn: getKnowledgeStats, enabled: tab === 'stats' })
|
const { data: stats } = useQuery({ queryKey: ['knowledge-stats'], queryFn: getKnowledgeStats })
|
||||||
const [searchResult, setSearchResult] = useState<any>(null)
|
const [searchResult, setSearchResult] = useState<any>(null)
|
||||||
const [searchLoading, setSearchLoading] = useState(false)
|
const [searchLoading, setSearchLoading] = useState(false)
|
||||||
const [uploadFiles, setUploadFiles] = useState<File[]>([])
|
const [uploadFiles, setUploadFiles] = useState<File[]>([])
|
||||||
const [uploadDialog, setUploadDialog] = useState(false)
|
const [uploadDialog, setUploadDialog] = useState(false)
|
||||||
|
const [uploadLoading, setUploadLoading] = useState(false)
|
||||||
|
|
||||||
const createMut = useMutation({
|
const createMut = useMutation({
|
||||||
mutationFn: (p: any) => createKnowledge(p),
|
mutationFn: (p: any) => createKnowledge(p),
|
||||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['knowledge'] }); toast.success('知识已创建'); setCreateOpen(false) },
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['knowledge'] })
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['knowledge-stats'] })
|
||||||
|
toast.success('知识已创建并完成索引')
|
||||||
|
setCreateDraft({ title: '', content: '' })
|
||||||
|
setCreateOpen(false)
|
||||||
|
},
|
||||||
onError: (e) => toast.error(errorMessage(e)),
|
onError: (e) => toast.error(errorMessage(e)),
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -65,7 +73,7 @@ export function KnowledgePage() {
|
|||||||
<div className="p-4 md:p-6">
|
<div className="p-4 md:p-6">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="企业知识库"
|
title="企业知识库"
|
||||||
description={`${list.length} 条知识 · 用于回复建议与翻译参考`}
|
description="把产品、价格、物流和售后资料变成可检索、可引用的企业答案"
|
||||||
actions={
|
actions={
|
||||||
<>
|
<>
|
||||||
<Button size="sm" variant="outline" onClick={() => setUploadDialog(true)}><Upload className="h-4 w-4" />上传文件</Button>
|
<Button size="sm" variant="outline" onClick={() => setUploadDialog(true)}><Upload className="h-4 w-4" />上传文件</Button>
|
||||||
@@ -74,6 +82,20 @@ export function KnowledgePage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div className="mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4">
|
||||||
|
{[
|
||||||
|
['当前条目', data?.total || 0],
|
||||||
|
['已分段索引', list.reduce((sum, item) => sum + Number(item.chunkCount || 0), 0)],
|
||||||
|
['真实引用', stats?.totalCitations || 0],
|
||||||
|
['待优化内容', (stats?.lowQuality?.length || 0) + (stats?.outdated?.length || 0)],
|
||||||
|
].map(([label, value]) => (
|
||||||
|
<Card key={String(label)} className="px-4 py-3">
|
||||||
|
<p className="text-[11px] font-medium text-slate-400">{label}</p>
|
||||||
|
<p className="mt-1 text-xl font-semibold tracking-tight text-slate-900">{value}</p>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<Tabs value={tab} onChange={setTab} className="mb-4" items={[
|
<Tabs value={tab} onChange={setTab} className="mb-4" items={[
|
||||||
{ value: 'list', label: '知识列表' },
|
{ value: 'list', label: '知识列表' },
|
||||||
{ value: 'search', label: '检索测试' },
|
{ value: 'search', label: '检索测试' },
|
||||||
@@ -109,10 +131,14 @@ export function KnowledgePage() {
|
|||||||
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
<span>引用 {item.citedCount} 次</span>
|
<span>引用 {item.citedCount} 次</span>
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span>{formatRelative(item.updatedAt)}</span>
|
<span>{item.chunkCount || 0} 个检索片段</span>
|
||||||
<span>·</span>
|
<span>·</span>
|
||||||
<span>{item.status === 'parsing' ? '解析中…' : item.status === 'failed' ? '解析失败' : ''}</span>
|
<span>{Number(item.characterCount || item.content?.length || 0).toLocaleString('zh-CN')} 字符</span>
|
||||||
|
<span>·</span>
|
||||||
|
<span>{formatRelative(item.updatedAt)}</span>
|
||||||
|
{item.status !== 'ready' && <><span>·</span><span>{item.status === 'parsing' ? '解析中…' : '解析失败'}</span></>}
|
||||||
</div>
|
</div>
|
||||||
|
{item.parseMessage && <p className="mt-1 text-[11px] text-emerald-600">{item.parseMessage}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 shrink-0">
|
<div className="flex items-center gap-2 shrink-0">
|
||||||
<Switch checked={item.enabled} onCheckedChange={(v) => toggleMut.mutate({ id: item.id, enabled: v })} />
|
<Switch checked={item.enabled} onCheckedChange={(v) => toggleMut.mutate({ id: item.id, enabled: v })} />
|
||||||
@@ -148,8 +174,9 @@ export function KnowledgePage() {
|
|||||||
<p className="text-xs font-semibold text-muted-foreground">命中知识 ({searchResult.hits.length})</p>
|
<p className="text-xs font-semibold text-muted-foreground">命中知识 ({searchResult.hits.length})</p>
|
||||||
{searchResult.hits.map((h: any) => (
|
{searchResult.hits.map((h: any) => (
|
||||||
<div key={h.item.id} className="rounded-md border border-border p-3">
|
<div key={h.item.id} className="rounded-md border border-border p-3">
|
||||||
<div className="flex items-center justify-between"><span className="text-sm font-medium">{h.item.title}</span><Badge variant="primary">{(h.score * 100).toFixed(0)}%</Badge></div>
|
<div className="flex items-center justify-between"><span className="text-sm font-medium">{h.item.title}</span><Badge variant="primary">相关度 {(h.score * 100).toFixed(0)}%</Badge></div>
|
||||||
<p className="mt-1 text-xs text-muted-foreground">{h.snippet}</p>
|
<p className="mt-1 text-xs text-muted-foreground">{h.snippet}</p>
|
||||||
|
<p className="mt-1 text-[10px] text-slate-400">命中片段 #{Number(h.chunkIndex || 0) + 1}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -175,34 +202,41 @@ export function KnowledgePage() {
|
|||||||
|
|
||||||
<Dialog open={createOpen} onOpenChange={setCreateOpen} title="新建知识条目" footer={
|
<Dialog open={createOpen} onOpenChange={setCreateOpen} title="新建知识条目" footer={
|
||||||
<Button onClick={() => {
|
<Button onClick={() => {
|
||||||
const title = (document.querySelector('#k-title') as HTMLInputElement)?.value
|
if (!createDraft.title.trim()) { toast.warning('请输入标题'); return }
|
||||||
const content = (document.querySelector('#k-content') as HTMLTextAreaElement)?.value
|
if (createDraft.content.trim().length < 20) { toast.warning('知识内容至少需要 20 个字符'); return }
|
||||||
if (!title) { toast.warning('请输入标题'); return }
|
createMut.mutate({ ...createDraft, category: category || 'faq' })
|
||||||
createMut.mutate({ title, content, category: category || 'faq' })
|
}} loading={createMut.isPending}>创建并索引</Button>
|
||||||
}}>创建</Button>
|
|
||||||
}>
|
}>
|
||||||
<Field label="标题" required><Input id="k-title" placeholder="知识条目标题" /></Field>
|
<Field label="标题" required><Input value={createDraft.title} onChange={(event) => setCreateDraft((value) => ({ ...value, title: event.target.value }))} placeholder="例如：欧洲地区退换货政策" /></Field>
|
||||||
<Field label="内容" className="mt-3"><Textarea id="k-content" rows={5} placeholder="知识内容…" /></Field>
|
<Field label="内容" className="mt-3"><Textarea value={createDraft.content} onChange={(event) => setCreateDraft((value) => ({ ...value, content: event.target.value }))} rows={8} placeholder="写明适用范围、条件、时效、例外和处理方式。系统会自动分段并用于回复建议。" /></Field>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<Dialog open={uploadDialog} onOpenChange={setUploadDialog} title="上传文件" footer={
|
<Dialog open={uploadDialog} onOpenChange={setUploadDialog} title="上传文件" footer={
|
||||||
<Button disabled={!uploadFiles.length} onClick={async () => {
|
<Button disabled={!uploadFiles.length} loading={uploadLoading} onClick={async () => {
|
||||||
const payload = await Promise.all(uploadFiles.map(async (file) => ({
|
setUploadLoading(true)
|
||||||
name: file.name,
|
try {
|
||||||
type: file.type,
|
const payload = await Promise.all(uploadFiles.map(async (file) => ({
|
||||||
base64: await new Promise<string>((resolve, reject) => {
|
name: file.name,
|
||||||
const reader = new FileReader()
|
type: file.type,
|
||||||
reader.onerror = () => reject(reader.error)
|
base64: await new Promise<string>((resolve, reject) => {
|
||||||
reader.onload = () => resolve(String(reader.result).split(',')[1] || '')
|
const reader = new FileReader()
|
||||||
reader.readAsDataURL(file)
|
reader.onerror = () => reject(reader.error)
|
||||||
}),
|
reader.onload = () => resolve(String(reader.result).split(',')[1] || '')
|
||||||
})))
|
reader.readAsDataURL(file)
|
||||||
await uploadKnowledgeFiles(payload)
|
}),
|
||||||
toast.success(`${payload.length} 个知识文件解析完成`)
|
})))
|
||||||
queryClient.invalidateQueries({ queryKey: ['knowledge'] })
|
const result = await uploadKnowledgeFiles(payload)
|
||||||
setUploadFiles([])
|
toast.success(`${result.items.length} 个文件解析并建立检索索引`)
|
||||||
setUploadDialog(false)
|
queryClient.invalidateQueries({ queryKey: ['knowledge'] })
|
||||||
}}>上传并解析</Button>
|
queryClient.invalidateQueries({ queryKey: ['knowledge-stats'] })
|
||||||
|
setUploadFiles([])
|
||||||
|
setUploadDialog(false)
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(errorMessage(error))
|
||||||
|
} finally {
|
||||||
|
setUploadLoading(false)
|
||||||
|
}
|
||||||
|
}}>上传、解析并索引</Button>
|
||||||
}>
|
}>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import { useSearchParams } from 'react-router-dom'
|
||||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
import { useAuthStore } from '@/app/store/auth'
|
import { useAuthStore } from '@/app/store/auth'
|
||||||
import { toast, errorMessage } from '@/app/store/toast'
|
import { toast, errorMessage } from '@/app/store/toast'
|
||||||
@@ -16,6 +17,7 @@ import { CountryFlag } from '@/components/common/CountryFlag'
|
|||||||
import { IntentScoreBadge, OpportunityStageBadge, TaskPriorityBadge } from '@/components/common/StatusBadges'
|
import { IntentScoreBadge, OpportunityStageBadge, TaskPriorityBadge } from '@/components/common/StatusBadges'
|
||||||
import { TaskFormDialog } from '@/components/crm/TaskFormDialog'
|
import { TaskFormDialog } from '@/components/crm/TaskFormDialog'
|
||||||
import { getOpportunities, updateOpportunity, getTasks, updateTask } from '@/services/api/crm'
|
import { getOpportunities, updateOpportunity, getTasks, updateTask } from '@/services/api/crm'
|
||||||
|
import { getTeam } from '@/services/api/org'
|
||||||
import { OPPORTUNITY_STAGES, taskTypeLabel, TASK_TYPES, TASK_PRIORITIES } from '@/config/constants'
|
import { OPPORTUNITY_STAGES, taskTypeLabel, TASK_TYPES, TASK_PRIORITIES } from '@/config/constants'
|
||||||
import { formatDateTime, formatMoney } from '@/utils/format'
|
import { formatDateTime, formatMoney } from '@/utils/format'
|
||||||
import { cn } from '@/utils/cn'
|
import { cn } from '@/utils/cn'
|
||||||
@@ -24,7 +26,11 @@ import type { FollowTask, Opportunity } from '@/types'
|
|||||||
export function OpportunitiesPage() {
|
export function OpportunitiesPage() {
|
||||||
const queryClient = useQueryClient()
|
const queryClient = useQueryClient()
|
||||||
const user = useAuthStore((s) => s.user)
|
const user = useAuthStore((s) => s.user)
|
||||||
const [view, setView] = useState('kanban') // 'kanban' | 'tasks' | 'calendar'
|
const [searchParams, setSearchParams] = useSearchParams()
|
||||||
|
const requestedView = searchParams.get('tab')
|
||||||
|
const [view, setView] = useState(
|
||||||
|
requestedView === 'tasks' || requestedView === 'calendar' ? requestedView : 'kanban',
|
||||||
|
)
|
||||||
const [taskFilter, setTaskFilter] = useState('all')
|
const [taskFilter, setTaskFilter] = useState('all')
|
||||||
const [taskDialog, setTaskDialog] = useState(false)
|
const [taskDialog, setTaskDialog] = useState(false)
|
||||||
|
|
||||||
@@ -36,6 +42,8 @@ export function OpportunitiesPage() {
|
|||||||
queryKey: ['tasks', taskFilter],
|
queryKey: ['tasks', taskFilter],
|
||||||
queryFn: () => getTasks({ filter: taskFilter, ownerId: user?.id }),
|
queryFn: () => getTasks({ filter: taskFilter, ownerId: user?.id }),
|
||||||
})
|
})
|
||||||
|
const { data: team = [] } = useQuery({ queryKey: ['team'], queryFn: getTeam })
|
||||||
|
const memberNames = new Map(team.map((member) => [member.id, member.name]))
|
||||||
|
|
||||||
const oppMut = useMutation({
|
const oppMut = useMutation({
|
||||||
mutationFn: ({ id, stage }: { id: string; stage: string }) => updateOpportunity(id, { stage: stage as any }),
|
mutationFn: ({ id, stage }: { id: string; stage: string }) => updateOpportunity(id, { stage: stage as any }),
|
||||||
@@ -77,7 +85,7 @@ export function OpportunitiesPage() {
|
|||||||
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1).getDay()
|
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1).getDay()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 md:p-6">
|
<div className="page-shell">
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title="商机与跟进"
|
title="商机与跟进"
|
||||||
description="管理商机流转与团队跟进任务"
|
description="管理商机流转与团队跟进任务"
|
||||||
@@ -90,8 +98,11 @@ export function OpportunitiesPage() {
|
|||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
value={view}
|
value={view}
|
||||||
onChange={setView}
|
onChange={(next) => {
|
||||||
className="mb-4"
|
setView(next)
|
||||||
|
setSearchParams(next === 'kanban' ? {} : { tab: next }, { replace: true })
|
||||||
|
}}
|
||||||
|
className="mb-5"
|
||||||
items={[
|
items={[
|
||||||
{ value: 'kanban', label: '商机看板', count: opps.length },
|
{ value: 'kanban', label: '商机看板', count: opps.length },
|
||||||
{ value: 'tasks', label: '跟进任务', count: tasks.filter((t) => t.status !== 'done').length },
|
{ value: 'tasks', label: '跟进任务', count: tasks.filter((t) => t.status !== 'done').length },
|
||||||
@@ -100,17 +111,17 @@ export function OpportunitiesPage() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{view === 'kanban' && (
|
{view === 'kanban' && (
|
||||||
<div className="flex gap-3 overflow-x-auto pb-2 scrollbar-thin" style={{ minHeight: '60vh' }}>
|
<div className="flex gap-4 overflow-x-auto pb-3 scrollbar-thin" style={{ minHeight: '60vh' }}>
|
||||||
{groupedOpps.map((col) => (
|
{groupedOpps.map((col) => (
|
||||||
<div
|
<div
|
||||||
key={col.value}
|
key={col.value}
|
||||||
className="w-64 shrink-0 rounded-lg bg-muted/40"
|
className="w-[272px] shrink-0 rounded-[14px] border border-slate-200 bg-slate-100/65"
|
||||||
onDragOver={(e) => e.preventDefault()}
|
onDragOver={(e) => e.preventDefault()}
|
||||||
onDrop={(e) => handleDrop(e, col.value)}
|
onDrop={(e) => handleDrop(e, col.value)}
|
||||||
>
|
>
|
||||||
<div className="sticky top-0 z-10 flex items-center justify-between rounded-t-lg bg-muted px-3 py-2">
|
<div className="sticky top-0 z-10 flex items-center justify-between rounded-t-[14px] border-b border-slate-200 bg-white/90 px-3.5 py-3 backdrop-blur">
|
||||||
<span className="text-sm font-medium">{col.label}</span>
|
<span className="text-sm font-semibold text-slate-800">{col.label}</span>
|
||||||
<Badge variant="primary">{col.items.length}</Badge>
|
<Badge variant="outline">{col.items.length}</Badge>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2 p-2">
|
<div className="space-y-2 p-2">
|
||||||
{col.items.map((opp) => (
|
{col.items.map((opp) => (
|
||||||
@@ -118,7 +129,7 @@ export function OpportunitiesPage() {
|
|||||||
key={opp.id}
|
key={opp.id}
|
||||||
draggable
|
draggable
|
||||||
onDragStart={(e) => handleDragStart(e, opp)}
|
onDragStart={(e) => handleDragStart(e, opp)}
|
||||||
className="cursor-grab p-3 active:cursor-grabbing hover:shadow-sm"
|
className="cursor-grab p-3.5 active:cursor-grabbing hover:border-primary-200 hover:shadow-[0_8px_20px_-16px_rgba(37,99,235,.55)]"
|
||||||
>
|
>
|
||||||
<p className="text-sm font-medium truncate">{opp.name}</p>
|
<p className="text-sm font-medium truncate">{opp.name}</p>
|
||||||
<p className="mt-0.5 text-xs text-muted-foreground">{opp.customerName} <CountryFlag code={opp.country} withName={false} /></p>
|
<p className="mt-0.5 text-xs text-muted-foreground">{opp.customerName} <CountryFlag code={opp.country} withName={false} /></p>
|
||||||
@@ -138,13 +149,13 @@ export function OpportunitiesPage() {
|
|||||||
|
|
||||||
{view === 'tasks' && (
|
{view === 'tasks' && (
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-3 flex flex-wrap gap-1">
|
<div className="mb-4 flex flex-wrap gap-1 rounded-[12px] border border-slate-200 bg-white p-1.5 shadow-sm">
|
||||||
{[
|
{[
|
||||||
{ v: 'all', l: '全部' }, { v: 'mine', l: '我的待办' },
|
{ v: 'all', l: '全部' }, { v: 'mine', l: '我的待办' },
|
||||||
{ v: 'today', l: '今日' }, { v: 'overdue', l: '已逾期' },
|
{ v: 'today', l: '今日' }, { v: 'overdue', l: '已逾期' },
|
||||||
{ v: 'done', l: '已完成' },
|
{ v: 'done', l: '已完成' },
|
||||||
].map((f) => (
|
].map((f) => (
|
||||||
<button key={f.v} onClick={() => setTaskFilter(f.v)} className={cn('rounded-full px-2.5 py-1 text-xs transition-colors', taskFilter === f.v ? 'bg-primary font-medium text-white' : 'bg-muted text-muted-foreground hover:bg-border')}>{f.l}</button>
|
<button key={f.v} onClick={() => setTaskFilter(f.v)} className={cn('rounded-[8px] px-3 py-1.5 text-xs transition-colors', taskFilter === f.v ? 'bg-slate-900 font-medium text-white' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900')}>{f.l}</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<Card>
|
<Card>
|
||||||
@@ -160,7 +171,7 @@ export function OpportunitiesPage() {
|
|||||||
<Td><span className="text-xs">{t.customerName}</span></Td>
|
<Td><span className="text-xs">{t.customerName}</span></Td>
|
||||||
<Td><TaskPriorityBadge priority={t.priority} /></Td>
|
<Td><TaskPriorityBadge priority={t.priority} /></Td>
|
||||||
<Td><span className={cn('text-xs', t.status === 'overdue' && 'text-red-600 font-medium')}>{formatDateTime(t.dueAt)}</span></Td>
|
<Td><span className={cn('text-xs', t.status === 'overdue' && 'text-red-600 font-medium')}>{formatDateTime(t.dueAt)}</span></Td>
|
||||||
<Td><span className="text-xs">{t.ownerId === 'u-003' ? '李婷' : t.ownerId === 'u-004' ? '赵磊' : t.ownerId === 'u-005' ? '周敏' : t.ownerId === 'u-008' ? '郑楠' : '其他'}</span></Td>
|
<Td><span className="text-xs">{memberNames.get(t.ownerId) ?? '未分配'}</span></Td>
|
||||||
<Td>
|
<Td>
|
||||||
{t.status !== 'done' && (
|
{t.status !== 'done' && (
|
||||||
<Button size="sm" variant="ghost" onClick={() => taskMut.mutate({ id: t.id, data: { status: 'done' } })}>完成</Button>
|
<Button size="sm" variant="ghost" onClick={() => taskMut.mutate({ id: t.id, data: { status: 'done' } })}>完成</Button>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ const SECTIONS = [
|
|||||||
{ key: 'company', label: '企业资料', icon: UserCog },
|
{ key: 'company', label: '企业资料', icon: UserCog },
|
||||||
{ key: 'lang', label: '语言与时区', icon: Globe },
|
{ key: 'lang', label: '语言与时区', icon: Globe },
|
||||||
{ key: 'notifications', label: '消息通知', icon: Bell },
|
{ key: 'notifications', label: '消息通知', icon: Bell },
|
||||||
{ key: 'ai', label: 'AI回复设置', icon: Languages },
|
{ key: 'ai', label: '智能回复', icon: Languages },
|
||||||
{ key: 'safety', label: '安全设置', icon: ShieldCheck },
|
{ key: 'safety', label: '安全设置', icon: ShieldCheck },
|
||||||
{ key: 'api', label: 'API Key', icon: KeyRound },
|
{ key: 'api', label: 'API Key', icon: KeyRound },
|
||||||
]
|
]
|
||||||
@@ -55,19 +55,33 @@ export function SettingsPage() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[calc(100vh-56px)]">
|
<div className="page-shell">
|
||||||
<div className="w-48 shrink-0 border-e border-border p-3 space-y-1 overflow-y-auto scrollbar-thin hidden md:block">
|
<PageHeader title="设置" description="管理企业资料、通知、智能能力与账号安全" />
|
||||||
|
|
||||||
|
<div className="mb-4 rounded-[12px] border border-slate-200 bg-white p-2 shadow-sm md:hidden">
|
||||||
|
<Select
|
||||||
|
aria-label="设置分类"
|
||||||
|
value={section}
|
||||||
|
onChange={(event) => setSection(event.target.value)}
|
||||||
|
className="w-full"
|
||||||
|
options={SECTIONS.map((item) => ({ value: item.key, label: item.label }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid items-start gap-5 md:grid-cols-[220px_minmax(0,1fr)]">
|
||||||
|
<div className="sticky top-4 hidden space-y-1 rounded-[14px] border border-slate-200 bg-white p-2 shadow-sm md:block">
|
||||||
|
<p className="px-3 pb-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-400">设置分类</p>
|
||||||
{SECTIONS.map((s) => (
|
{SECTIONS.map((s) => (
|
||||||
<button key={s.key} onClick={() => setSection(s.key)} className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm ${section === s.key ? 'bg-primary-50 font-medium text-primary-700' : 'text-muted-foreground hover:text-foreground'}`}>
|
<button key={s.key} onClick={() => setSection(s.key)} className={`flex w-full items-center gap-2 rounded-[9px] px-3 py-2.5 text-sm transition ${section === s.key ? 'bg-primary-50 font-semibold text-primary-700 shadow-[inset_0_0_0_1px_rgba(37,99,235,.08)]' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'}`}>
|
||||||
<s.icon className="h-4 w-4" />{s.label}
|
<s.icon className="h-4 w-4" />{s.label}
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
|
<div className="min-w-0">
|
||||||
{section === 'company' && settings && (
|
{section === 'company' && settings && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="企业资料" />
|
<CardHeader title="企业资料" description="用于团队空间、通知邮件和对外业务资料" />
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
|
<div className="grid grid-cols-1 gap-5 p-5 md:grid-cols-2">
|
||||||
<Field label="企业名称"><Input value={companyDraft.name} onChange={(e) => setCompanyDraft((v) => ({ ...v, name: e.target.value }))} /></Field>
|
<Field label="企业名称"><Input value={companyDraft.name} onChange={(e) => setCompanyDraft((v) => ({ ...v, name: e.target.value }))} /></Field>
|
||||||
<Field label="所属行业"><Input value={companyDraft.industry} onChange={(e) => setCompanyDraft((v) => ({ ...v, industry: e.target.value }))} /></Field>
|
<Field label="所属行业"><Input value={companyDraft.industry} onChange={(e) => setCompanyDraft((v) => ({ ...v, industry: e.target.value }))} /></Field>
|
||||||
<Field label="联系方式"><Input value={companyDraft.contact} onChange={(e) => setCompanyDraft((v) => ({ ...v, contact: e.target.value }))} /></Field>
|
<Field label="联系方式"><Input value={companyDraft.contact} onChange={(e) => setCompanyDraft((v) => ({ ...v, contact: e.target.value }))} /></Field>
|
||||||
@@ -79,20 +93,25 @@ export function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
{section === 'ai' && settings && (
|
{section === 'ai' && settings && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="AI 回复设置" />
|
<CardHeader title="智能回复" description="控制回复建议、分析和发送前确认规则" />
|
||||||
<div className="space-y-4 p-4">
|
<div className="divide-y divide-slate-100 px-5">
|
||||||
{[
|
{[
|
||||||
{ key: 'autoGenerate', label: '自动生成回复建议' },
|
{ key: 'autoGenerate', label: '自动生成回复建议' },
|
||||||
{ key: 'requireConfirm', label: '发送前必须人工确认' },
|
{ key: 'requireConfirm', label: '发送前必须人工确认' },
|
||||||
{ key: 'sentimentAnalysis', label: '启用情感分析' },
|
{ key: 'sentimentAnalysis', label: '启用情感分析' },
|
||||||
|
{ key: 'messageIntentAnalysis', label: '逐条客户消息意图识别' },
|
||||||
|
{ key: 'contextualTranslation', label: '翻译时参考会话上下文' },
|
||||||
{ key: 'riskAlert', label: '启用风险预警' },
|
{ key: 'riskAlert', label: '启用风险预警' },
|
||||||
{ key: 'cultureCheck', label: '启用文化敏感检测' },
|
{ key: 'cultureCheck', label: '启用文化敏感检测' },
|
||||||
{ key: 'allowHistoryRef', label: '允许AI引用历史成功回复' },
|
{ key: 'allowHistoryRef', label: '允许AI引用历史成功回复' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div key={item.key} className="flex items-center justify-between">
|
<div key={item.key} className="flex items-center justify-between py-4">
|
||||||
<span className="text-sm">{item.label}</span>
|
<span className="text-sm">{item.label}</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={(settings.ai as any)[item.key]}
|
ariaLabel={item.label}
|
||||||
|
checked={['messageIntentAnalysis', 'contextualTranslation'].includes(item.key)
|
||||||
|
? (settings.ai as any)[item.key] !== false
|
||||||
|
: Boolean((settings.ai as any)[item.key])}
|
||||||
onCheckedChange={(v) => updateMut.mutate({ ai: { [item.key]: v } })}
|
onCheckedChange={(v) => updateMut.mutate({ ai: { [item.key]: v } })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,8 +121,8 @@ export function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
{section === 'notifications' && settings && (
|
{section === 'notifications' && settings && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="消息通知设置" />
|
<CardHeader title="消息通知" description="选择需要发送到通知中心的业务事件" />
|
||||||
<div className="space-y-4 p-4">
|
<div className="divide-y divide-slate-100 px-5">
|
||||||
{[
|
{[
|
||||||
{ key: 'newInquiry', label: '新询盘提醒' },
|
{ key: 'newInquiry', label: '新询盘提醒' },
|
||||||
{ key: 'highIntent', label: '高意向客户提醒' },
|
{ key: 'highIntent', label: '高意向客户提醒' },
|
||||||
@@ -113,7 +132,7 @@ export function SettingsPage() {
|
|||||||
{ key: 'channelOffline', label: '渠道断开提醒' },
|
{ key: 'channelOffline', label: '渠道断开提醒' },
|
||||||
{ key: 'planExpire', label: '套餐到期提醒' },
|
{ key: 'planExpire', label: '套餐到期提醒' },
|
||||||
].map((item) => (
|
].map((item) => (
|
||||||
<div key={item.key} className="flex items-center justify-between">
|
<div key={item.key} className="flex items-center justify-between py-4">
|
||||||
<span className="text-sm">{item.label}</span>
|
<span className="text-sm">{item.label}</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={(settings.notification as any)[item.key]}
|
checked={(settings.notification as any)[item.key]}
|
||||||
@@ -126,12 +145,12 @@ export function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
{section === 'safety' && (
|
{section === 'safety' && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="安全设置" />
|
<CardHeader title="安全设置" description="修改密码后会撤销其他设备上的登录会话" />
|
||||||
<div className="space-y-4 p-4">
|
<div className="space-y-5 p-5">
|
||||||
<Field label="当前密码"><Input type="password" value={passwords.currentPassword} onChange={(e) => setPasswords((v) => ({ ...v, currentPassword: e.target.value }))} /></Field>
|
<Field label="当前密码"><Input type="password" value={passwords.currentPassword} onChange={(e) => setPasswords((v) => ({ ...v, currentPassword: e.target.value }))} /></Field>
|
||||||
<Field label="新密码"><Input type="password" placeholder="至少10位，包含字母和数字" value={passwords.newPassword} onChange={(e) => setPasswords((v) => ({ ...v, newPassword: e.target.value }))} /></Field>
|
<Field label="新密码"><Input type="password" placeholder="至少10位，包含字母和数字" value={passwords.newPassword} onChange={(e) => setPasswords((v) => ({ ...v, newPassword: e.target.value }))} /></Field>
|
||||||
<Field label="确认新密码"><Input type="password" value={passwords.confirmPassword} onChange={(e) => setPasswords((v) => ({ ...v, confirmPassword: e.target.value }))} /></Field>
|
<Field label="确认新密码"><Input type="password" value={passwords.confirmPassword} onChange={(e) => setPasswords((v) => ({ ...v, confirmPassword: e.target.value }))} /></Field>
|
||||||
<div className="rounded bg-emerald-50 p-3 text-sm text-emerald-700"><ShieldCheck className="inline h-4 w-4 mr-1" />修改密码后，其他已登录设备需要重新登录。</div>
|
<div className="rounded-[10px] border border-primary-100 bg-primary-50 p-3 text-sm text-primary-700"><ShieldCheck className="mr-1 inline h-4 w-4" />修改密码后，其他已登录设备需要重新登录。</div>
|
||||||
<Button onClick={async () => {
|
<Button onClick={async () => {
|
||||||
if (passwords.newPassword !== passwords.confirmPassword) return toast.error('两次输入的新密码不一致')
|
if (passwords.newPassword !== passwords.confirmPassword) return toast.error('两次输入的新密码不一致')
|
||||||
try {
|
try {
|
||||||
@@ -146,8 +165,8 @@ export function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
{section === 'api' && (
|
{section === 'api' && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="API 与 Webhook" />
|
<CardHeader title="API Key" description="为自有系统或服务端集成创建访问凭据" />
|
||||||
<div className="space-y-3 p-4">
|
<div className="space-y-4 p-5">
|
||||||
<p className="text-sm text-muted-foreground">密钥只在创建时完整显示一次，请立即复制并妥善保存。</p>
|
<p className="text-sm text-muted-foreground">密钥只在创建时完整显示一次，请立即复制并妥善保存。</p>
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<Input value={apiName} onChange={(e) => setApiName(e.target.value)} placeholder="密钥名称" />
|
<Input value={apiName} onChange={(e) => setApiName(e.target.value)} placeholder="密钥名称" />
|
||||||
@@ -168,7 +187,7 @@ export function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="divide-y divide-border rounded-lg border border-border">
|
<div className="divide-y divide-slate-100 overflow-hidden rounded-[10px] border border-slate-200">
|
||||||
{(apiKeys || []).map((key) => (
|
{(apiKeys || []).map((key) => (
|
||||||
<div key={key.id} className="flex items-center gap-3 px-3 py-2">
|
<div key={key.id} className="flex items-center gap-3 px-3 py-2">
|
||||||
<div className="min-w-0 flex-1"><p className="text-sm font-medium">{key.name}</p><p className="text-xs text-muted-foreground">{key.prefix}•••••• · {key.revoked ? '已撤销' : '有效'}</p></div>
|
<div className="min-w-0 flex-1"><p className="text-sm font-medium">{key.name}</p><p className="text-xs text-muted-foreground">{key.prefix}•••••• · {key.revoked ? '已撤销' : '有效'}</p></div>
|
||||||
@@ -181,8 +200,8 @@ export function SettingsPage() {
|
|||||||
)}
|
)}
|
||||||
{section === 'lang' && (
|
{section === 'lang' && (
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader title="语言与时区" />
|
<CardHeader title="语言与时区" description="调整界面显示语言与业务时间基准" />
|
||||||
<div className="space-y-4 p-4">
|
<div className="space-y-5 p-5">
|
||||||
<Field label="界面语言">
|
<Field label="界面语言">
|
||||||
<Select value={localeDraft} options={[{value:'zh',label:'简体中文'},{value:'en',label:'English'},{value:'ar',label:'العربية (RTL)'}]} onChange={(e) => setLocaleDraft(e.target.value as any)} />
|
<Select value={localeDraft} options={[{value:'zh',label:'简体中文'},{value:'en',label:'English'},{value:'ar',label:'العربية (RTL)'}]} onChange={(e) => setLocaleDraft(e.target.value as any)} />
|
||||||
</Field>
|
</Field>
|
||||||
@@ -195,6 +214,7 @@ export function SettingsPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,8 +20,8 @@ export function analyzeConversation(conversationId: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** POST /api/ai/replies */
|
/** POST /api/ai/replies */
|
||||||
export function generateReplies(conversationId: string) {
|
export function generateReplies(conversationId: string, targetLang = 'auto') {
|
||||||
return http.post<AiReplySuggestion[]>('/api/ai/replies', { conversationId })
|
return http.post<AiReplySuggestion[]>('/api/ai/replies', { conversationId, targetLang })
|
||||||
}
|
}
|
||||||
|
|
||||||
/** POST /api/ai/summarize */
|
/** POST /api/ai/summarize */
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { http } from './client'
|
import { http } from './client'
|
||||||
import type { Conversation, Customer, Message, SendMessagePayload } from '@/types'
|
import type { AiBackfillStatus, Conversation, Customer, Message, SendMessagePayload } from '@/types'
|
||||||
|
|
||||||
export type ConversationListItem = Conversation & { customer: Customer }
|
export type ConversationListItem = Conversation & { customer: Customer }
|
||||||
|
|
||||||
@@ -26,7 +26,20 @@ export function getConversations(query: ConversationQuery = {}) {
|
|||||||
|
|
||||||
/** GET /api/conversations/:id */
|
/** GET /api/conversations/:id */
|
||||||
export function getConversation(id: string) {
|
export function getConversation(id: string) {
|
||||||
return http.get<{ conversation: Conversation; customer: Customer }>(`/api/conversations/${id}`)
|
return http.get<{ conversation: Conversation; customer: Customer; aiBackfill?: AiBackfillStatus }>(`/api/conversations/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getConversationAiStatus(id: string) {
|
||||||
|
return http.get<{
|
||||||
|
backfill: AiBackfillStatus
|
||||||
|
context: {
|
||||||
|
status: string
|
||||||
|
sourceMessageCount: number
|
||||||
|
pendingMessages: number
|
||||||
|
compressedAt: string | null
|
||||||
|
memory: Conversation['aiContextMemory'] | null
|
||||||
|
}
|
||||||
|
}>(`/api/conversations/${id}/ai-status`)
|
||||||
}
|
}
|
||||||
|
|
||||||
/** GET /api/conversations/:id/messages */
|
/** GET /api/conversations/:id/messages */
|
||||||
@@ -80,6 +93,7 @@ export function sendMessage(
|
|||||||
payload: SendMessagePayload & {
|
payload: SendMessagePayload & {
|
||||||
translatedText?: string
|
translatedText?: string
|
||||||
autoTranslate?: boolean
|
autoTranslate?: boolean
|
||||||
|
targetLang?: string
|
||||||
idempotencyKey?: string
|
idempotencyKey?: string
|
||||||
clientMessageId?: string
|
clientMessageId?: string
|
||||||
},
|
},
|
||||||
@@ -136,7 +150,16 @@ export function runWhatsAppMessageAction(id: string, payload: WhatsAppMessageAct
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateConversation(id: string, payload: { assigneeId?: string | null; markRead?: boolean; status?: string }) {
|
export function updateConversation(
|
||||||
|
id: string,
|
||||||
|
payload: {
|
||||||
|
assigneeId?: string | null
|
||||||
|
markRead?: boolean
|
||||||
|
status?: string
|
||||||
|
translationTargetLang?: string
|
||||||
|
messageIntentEnabled?: boolean
|
||||||
|
},
|
||||||
|
) {
|
||||||
return http.patch<Conversation>(`/api/conversations/${id}`, payload)
|
return http.patch<Conversation>(`/api/conversations/${id}`, payload)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+72
-5
@@ -42,8 +42,8 @@
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
letter-spacing: -0.006em;
|
letter-spacing: -0.006em;
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(circle at 75% -10%, rgba(37, 99, 235, 0.05), transparent 26rem),
|
radial-gradient(circle at 76% -12%, rgba(37, 99, 235, 0.055), transparent 28rem),
|
||||||
linear-gradient(180deg, #ffffff 0, hsl(var(--background)) 22rem);
|
linear-gradient(180deg, #ffffff 0, #f7f9fc 23rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
@@ -70,10 +70,34 @@
|
|||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
.surface-panel {
|
.surface-panel {
|
||||||
@apply rounded-2xl border border-slate-200/80 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.03),0_10px_30px_rgba(15,23,42,0.025)];
|
@apply rounded-[14px] border border-slate-200/90 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.025),0_8px_24px_rgba(15,23,42,0.025)];
|
||||||
}
|
}
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
@apply text-[11px] font-semibold uppercase tracking-[0.14em] text-primary-700;
|
@apply text-[11px] font-semibold tracking-[0.08em] text-primary-700;
|
||||||
|
}
|
||||||
|
.page-shell {
|
||||||
|
@apply mx-auto w-full max-w-[1600px] px-4 py-5 md:px-7 md:py-7;
|
||||||
|
}
|
||||||
|
.page-section {
|
||||||
|
@apply mt-5;
|
||||||
|
}
|
||||||
|
.section-heading {
|
||||||
|
@apply mb-3 flex flex-wrap items-end justify-between gap-3;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
@apply text-[15px] font-semibold tracking-[-0.015em] text-slate-900;
|
||||||
|
}
|
||||||
|
.section-description {
|
||||||
|
@apply mt-0.5 text-xs text-slate-500;
|
||||||
|
}
|
||||||
|
.quiet-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px);
|
||||||
|
background-size: 24px 24px;
|
||||||
|
}
|
||||||
|
.focus-surface {
|
||||||
|
@apply border-primary-200/80 bg-primary-50/45 shadow-[0_8px_24px_-18px_rgba(37,99,235,.5),inset_0_0_0_1px_rgba(255,255,255,.8)];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -231,11 +255,54 @@
|
|||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.conversation-selected,
|
.conversation-selected,
|
||||||
.conversation-selected::after {
|
.conversation-selected::after,
|
||||||
|
.auth-message,
|
||||||
|
.auth-translation-dot,
|
||||||
|
.auth-floating-chip {
|
||||||
animation: none;
|
animation: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.auth-corner-glow {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 12%, rgba(96, 165, 250, .16), transparent 28rem),
|
||||||
|
radial-gradient(circle at 92% 86%, rgba(125, 211, 252, .12), transparent 24rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-preview-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
|
||||||
|
background-size: 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes auth-message-in {
|
||||||
|
from { opacity: .62; transform: translate3d(-8px, 6px, 0); }
|
||||||
|
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes auth-message-out {
|
||||||
|
from { opacity: .62; transform: translate3d(8px, 6px, 0); }
|
||||||
|
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes auth-translation {
|
||||||
|
0%, 17% { opacity: 0; transform: translateX(0); }
|
||||||
|
24% { opacity: 1; }
|
||||||
|
40% { opacity: 1; transform: translateX(92px); }
|
||||||
|
48%, 100% { opacity: 0; transform: translateX(92px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes auth-chip-float {
|
||||||
|
0%, 100% { transform: translate3d(0, 0, 0); }
|
||||||
|
50% { transform: translate3d(0, -4px, 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-message-in { animation: auth-message-in .48s cubic-bezier(.2,.8,.2,1) both; }
|
||||||
|
.auth-message-out { animation: auth-message-out .48s cubic-bezier(.2,.8,.2,1) .16s both; }
|
||||||
|
.auth-translation-dot { animation: auth-translation 8s ease-in-out infinite; }
|
||||||
|
.auth-floating-chip { animation: auth-chip-float 4s ease-in-out infinite; }
|
||||||
|
|
||||||
/* RTL 微调 */
|
/* RTL 微调 */
|
||||||
[dir='rtl'] .rtl-flip {
|
[dir='rtl'] .rtl-flip {
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ export interface AiReplySuggestion {
|
|||||||
targetLang: string
|
targetLang: string
|
||||||
reason: string
|
reason: string
|
||||||
knowledgeRefs: string[]
|
knowledgeRefs: string[]
|
||||||
|
knowledgeRefIds?: string[]
|
||||||
expectedEffect: string
|
expectedEffect: string
|
||||||
cultureTip?: string
|
cultureTip?: string
|
||||||
}
|
}
|
||||||
@@ -42,6 +43,13 @@ export interface TranslateResult {
|
|||||||
detectedLang: string
|
detectedLang: string
|
||||||
terms: { source: string; target: string }[]
|
terms: { source: string; target: string }[]
|
||||||
historyItem?: TranslationHistoryItem
|
historyItem?: TranslationHistoryItem
|
||||||
|
meta?: {
|
||||||
|
method: 'ai-contextual' | 'ai-direct'
|
||||||
|
contextApplied: boolean
|
||||||
|
contextMessageCount: number
|
||||||
|
conversationSummaryApplied?: boolean
|
||||||
|
model: string
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TranslationHistoryItem {
|
export interface TranslationHistoryItem {
|
||||||
|
|||||||
@@ -46,6 +46,18 @@ export interface AiCustomerProfile {
|
|||||||
dealProbability?: number
|
dealProbability?: number
|
||||||
churnProbability?: number
|
churnProbability?: number
|
||||||
confidenceScore?: number
|
confidenceScore?: number
|
||||||
|
intentBreakdown?: Array<{
|
||||||
|
intent: string
|
||||||
|
label: string
|
||||||
|
count: number
|
||||||
|
share: number
|
||||||
|
}>
|
||||||
|
lastMessageIntent?: {
|
||||||
|
intent: string
|
||||||
|
label: string
|
||||||
|
urgency: string
|
||||||
|
}
|
||||||
|
profileVersion?: number
|
||||||
evidence?: string[]
|
evidence?: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -54,6 +66,9 @@ export interface Customer {
|
|||||||
name: string
|
name: string
|
||||||
company: string
|
company: string
|
||||||
country: string
|
country: string
|
||||||
|
countrySource?: 'manual' | 'account-profile' | 'phone-prefix' | 'unknown'
|
||||||
|
countryConfidence?: number
|
||||||
|
countryInferredAt?: string | null
|
||||||
city?: string
|
city?: string
|
||||||
email: string
|
email: string
|
||||||
phone: string
|
phone: string
|
||||||
|
|||||||
@@ -33,12 +33,17 @@ export interface KnowledgeItem {
|
|||||||
citedCount: number
|
citedCount: number
|
||||||
languages: string[]
|
languages: string[]
|
||||||
quality: 'good' | 'normal' | 'low'
|
quality: 'good' | 'normal' | 'low'
|
||||||
|
characterCount?: number
|
||||||
|
chunkCount?: number
|
||||||
|
indexedAt?: string
|
||||||
|
parseMessage?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KnowledgeSearchHit {
|
export interface KnowledgeSearchHit {
|
||||||
item: KnowledgeItem
|
item: KnowledgeItem
|
||||||
score: number
|
score: number
|
||||||
snippet: string
|
snippet: string
|
||||||
|
chunkIndex?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KnowledgeSearchResult {
|
export interface KnowledgeSearchResult {
|
||||||
|
|||||||
@@ -32,7 +32,24 @@ export interface Message {
|
|||||||
translationCn?: string
|
translationCn?: string
|
||||||
translationStatus?: 'pending' | 'completed' | 'failed'
|
translationStatus?: 'pending' | 'completed' | 'failed'
|
||||||
translatedAt?: string
|
translatedAt?: string
|
||||||
|
translationMethod?: 'ai-contextual' | 'ai-direct' | 'source'
|
||||||
|
translationContextMessages?: number
|
||||||
|
translationConversationSummaryApplied?: boolean
|
||||||
|
translationModel?: string
|
||||||
|
intentStatus?: 'pending' | 'completed' | 'failed'
|
||||||
|
intentAnalysis?: {
|
||||||
|
primary: string
|
||||||
|
label: string
|
||||||
|
confidence: number
|
||||||
|
urgency: 'low' | 'medium' | 'high' | 'urgent'
|
||||||
|
sentiment: 'positive' | 'neutral' | 'negative' | 'angry'
|
||||||
|
entities: string[]
|
||||||
|
rationale: string
|
||||||
|
analyzedAt: string
|
||||||
|
model: string
|
||||||
|
}
|
||||||
originalLang: string
|
originalLang: string
|
||||||
|
targetLang?: string
|
||||||
status: MessageStatus
|
status: MessageStatus
|
||||||
createdAt: string
|
createdAt: string
|
||||||
isImportant?: boolean
|
isImportant?: boolean
|
||||||
@@ -96,6 +113,37 @@ export interface Conversation {
|
|||||||
presence?: 'available' | 'unavailable' | 'composing' | 'recording' | 'paused'
|
presence?: 'available' | 'unavailable' | 'composing' | 'recording' | 'paused'
|
||||||
presenceUpdatedAt?: string
|
presenceUpdatedAt?: string
|
||||||
lastSeenAt?: string
|
lastSeenAt?: string
|
||||||
|
translationTargetLang?: string
|
||||||
|
messageIntentEnabled?: boolean
|
||||||
|
aiContextStatus?: 'waiting' | 'queued' | 'compressing' | 'ready' | 'failed'
|
||||||
|
aiContextSourceMessageCount?: number
|
||||||
|
aiContextPendingMessages?: number
|
||||||
|
aiContextCompressedAt?: string
|
||||||
|
aiContextCompactedMessageIds?: string[]
|
||||||
|
aiContextMemory?: {
|
||||||
|
summary: string
|
||||||
|
facts: string[]
|
||||||
|
commitments: string[]
|
||||||
|
products: string[]
|
||||||
|
unresolved: string[]
|
||||||
|
preferences: string[]
|
||||||
|
updatedThroughMessageId: string
|
||||||
|
sourceMessageCount: number
|
||||||
|
updatedAt: string
|
||||||
|
model: string
|
||||||
|
version: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AiBackfillStatus {
|
||||||
|
status: 'not-started' | 'queued' | 'running' | 'completed' | 'failed'
|
||||||
|
totalCount: number
|
||||||
|
completedCount: number
|
||||||
|
pendingCount: number
|
||||||
|
progress: number
|
||||||
|
startedAt?: string
|
||||||
|
completedAt?: string | null
|
||||||
|
lastError?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ChannelStatus = 'connected' | 'disconnected' | 'error' | 'paused' | 'unconnected'
|
export type ChannelStatus = 'connected' | 'disconnected' | 'error' | 'paused' | 'unconnected'
|
||||||
@@ -142,6 +190,8 @@ export interface SendMessagePayload {
|
|||||||
text: string
|
text: string
|
||||||
/** 已确认的中文参考译文，仅在内部消息记录中保存 */
|
/** 已确认的中文参考译文，仅在内部消息记录中保存 */
|
||||||
translationCn?: string
|
translationCn?: string
|
||||||
|
/** auto 表示根据客户最近消息或客户画像自动选择目标语言 */
|
||||||
|
targetLang?: string
|
||||||
replyToId?: string
|
replyToId?: string
|
||||||
replyPreview?: string
|
replyPreview?: string
|
||||||
type?: MessageType
|
type?: MessageType
|
||||||
|
|||||||
@@ -95,6 +95,8 @@ export interface AiSettings {
|
|||||||
autoGenerate: boolean
|
autoGenerate: boolean
|
||||||
requireConfirm: boolean
|
requireConfirm: boolean
|
||||||
sentimentAnalysis: boolean
|
sentimentAnalysis: boolean
|
||||||
|
messageIntentAnalysis: boolean
|
||||||
|
contextualTranslation: boolean
|
||||||
riskAlert: boolean
|
riskAlert: boolean
|
||||||
cultureCheck: boolean
|
cultureCheck: boolean
|
||||||
allowHistoryRef: boolean
|
allowHistoryRef: boolean
|
||||||
|
|||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import { expect, test, type Page } from '@playwright/test'
|
||||||
|
|
||||||
|
const password = 'Lingxi-Design-2026!'
|
||||||
|
|
||||||
|
async function login(page: Page, suffix: string) {
|
||||||
|
const account = `design-${suffix}-${Date.now()}@local.test`
|
||||||
|
const registration = await page.request.post('/api/auth/register', {
|
||||||
|
data: {
|
||||||
|
name: 'Design Audit',
|
||||||
|
account,
|
||||||
|
password,
|
||||||
|
company: 'Design Audit',
|
||||||
|
industry: '跨境电商',
|
||||||
|
teamSize: '1-10人',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
expect(registration.ok()).toBeTruthy()
|
||||||
|
await page.goto('/login')
|
||||||
|
await expect(page.locator('img[src="/brand-mark.svg"]')).toHaveCount(2)
|
||||||
|
await page.locator('input[autocomplete="username"]').fill(account)
|
||||||
|
await page.locator('input[autocomplete="current-password"]').fill(password)
|
||||||
|
await page.getByRole('button', { name: '登录' }).click()
|
||||||
|
await expect(page).toHaveURL(/\/dashboard/)
|
||||||
|
await expect(page.getByText('今日工作概览')).toBeVisible()
|
||||||
|
}
|
||||||
|
|
||||||
|
test('统一设计系统桌面端页面验收', async ({ page }, testInfo) => {
|
||||||
|
test.skip(testInfo.project.name !== 'desktop-chromium', '仅在桌面视口执行')
|
||||||
|
await login(page, 'desktop')
|
||||||
|
|
||||||
|
const pages = [
|
||||||
|
['/dashboard', '今日工作概览', 'dashboard'],
|
||||||
|
['/inbox', '消息', 'inbox'],
|
||||||
|
['/channels', '渠道与账号', 'channels'],
|
||||||
|
['/customers', '客户管理', 'customers'],
|
||||||
|
['/opportunities', '商机与跟进', 'opportunities'],
|
||||||
|
['/knowledge', '企业知识库', 'knowledge'],
|
||||||
|
['/analytics', '业务分析', 'analytics'],
|
||||||
|
['/settings', '管理企业资料、通知、智能能力与账号安全', 'settings'],
|
||||||
|
] as const
|
||||||
|
|
||||||
|
for (const [url, marker, name] of pages) {
|
||||||
|
await page.goto(url)
|
||||||
|
await expect(page.getByText(marker, { exact: false }).first()).toBeVisible()
|
||||||
|
await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
|
||||||
|
await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth + 1)).toBe(true)
|
||||||
|
await page.screenshot({ path: testInfo.outputPath(`${name}.png`), fullPage: name !== 'inbox' })
|
||||||
|
}
|
||||||
|
|
||||||
|
await page.goto('/analytics')
|
||||||
|
await page.getByRole('button', { name: '近 7 天', exact: true }).click()
|
||||||
|
await expect(page.getByRole('button', { name: '近 7 天', exact: true })).toHaveAttribute('aria-pressed', 'true')
|
||||||
|
|
||||||
|
await page.goto('/opportunities?tab=tasks')
|
||||||
|
await expect(page).toHaveURL(/tab=tasks/)
|
||||||
|
await expect(page.getByText('任务', { exact: false }).first()).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('统一设计系统移动端页面验收', async ({ page }, testInfo) => {
|
||||||
|
test.skip(testInfo.project.name !== 'mobile-chromium', '仅在移动视口执行')
|
||||||
|
await login(page, 'mobile')
|
||||||
|
|
||||||
|
await page.screenshot({ path: testInfo.outputPath('dashboard-mobile.png'), fullPage: true })
|
||||||
|
await page.goto('/settings')
|
||||||
|
await expect(page.getByLabel('设置分类')).toBeVisible()
|
||||||
|
await page.getByLabel('设置分类').selectOption('ai')
|
||||||
|
await expect(page.getByLabel('设置分类')).toHaveValue('ai')
|
||||||
|
await expect(page.getByText('控制回复建议、分析和发送前确认规则')).toBeVisible()
|
||||||
|
await page.screenshot({ path: testInfo.outputPath('settings-mobile.png'), fullPage: true })
|
||||||
|
|
||||||
|
await page.goto('/inbox')
|
||||||
|
await expect(page.getByText('消息', { exact: true }).first()).toBeVisible()
|
||||||
|
await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
|
||||||
|
await page.screenshot({ path: testInfo.outputPath('inbox-mobile.png'), fullPage: false })
|
||||||
|
})
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
import { expect, test } from '@playwright/test'
|
||||||
|
|
||||||
|
const account = process.env.E2E_ACCOUNT || 'e2e-1785008967@local.test'
|
||||||
|
const password = process.env.E2E_PASSWORD || 'Lingxi-E2E-2026!'
|
||||||
|
|
||||||
|
test('知识库与逐句意图在真实页面可用', async ({ page }, testInfo) => {
|
||||||
|
test.skip(testInfo.project.name !== 'desktop-chromium', '仅在桌面视口执行')
|
||||||
|
|
||||||
|
const loginResponse = await page.request.post('/api/auth/login', {
|
||||||
|
data: { account, password },
|
||||||
|
})
|
||||||
|
expect(loginResponse.ok()).toBeTruthy()
|
||||||
|
const loginPayload = await loginResponse.json()
|
||||||
|
const token = loginPayload.data.token as string
|
||||||
|
const headers = { Authorization: `Bearer ${token}` }
|
||||||
|
|
||||||
|
await page.goto('/login')
|
||||||
|
await page.locator('input[autocomplete="username"]').fill(account)
|
||||||
|
await page.locator('input[autocomplete="current-password"]').fill(password)
|
||||||
|
await page.getByRole('button', { name: '登录' }).click()
|
||||||
|
await expect(page).toHaveURL(/\/dashboard/)
|
||||||
|
|
||||||
|
await page.goto('/knowledge')
|
||||||
|
await expect(page.getByText('已分段索引', { exact: true })).toBeVisible()
|
||||||
|
await expect(page.getByRole('button', { name: '上传文件' })).toBeVisible()
|
||||||
|
await page.screenshot({ path: testInfo.outputPath('knowledge-index.png'), fullPage: true })
|
||||||
|
|
||||||
|
const conversationsResponse = await page.request.get('/api/conversations', { headers })
|
||||||
|
const conversations = (await conversationsResponse.json()).data.list as Array<{ id: string }>
|
||||||
|
let conversationId = ''
|
||||||
|
let messageId = ''
|
||||||
|
let messageCount = 0
|
||||||
|
for (const conversation of conversations.slice(0, 20)) {
|
||||||
|
const messagesResponse = await page.request.get(
|
||||||
|
`/api/conversations/${encodeURIComponent(conversation.id)}/messages`,
|
||||||
|
{ headers },
|
||||||
|
)
|
||||||
|
const messages = (await messagesResponse.json()).data as Array<{
|
||||||
|
id: string
|
||||||
|
sender: string
|
||||||
|
type: string
|
||||||
|
originalText: string
|
||||||
|
intentAnalysis?: unknown
|
||||||
|
}>
|
||||||
|
const candidate = [...messages].reverse().find((message) => (
|
||||||
|
message.sender === 'customer'
|
||||||
|
&& message.type === 'text'
|
||||||
|
&& /[\p{L}]/u.test(message.originalText || '')
|
||||||
|
))
|
||||||
|
if (candidate) {
|
||||||
|
conversationId = conversation.id
|
||||||
|
messageId = candidate.id
|
||||||
|
messageCount = messages.length
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
expect(conversationId).not.toBe('')
|
||||||
|
const aiStatusResponse = await page.request.get(
|
||||||
|
`/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
|
||||||
|
{ headers },
|
||||||
|
)
|
||||||
|
expect(aiStatusResponse.ok()).toBeTruthy()
|
||||||
|
const aiStatus = (await aiStatusResponse.json()).data
|
||||||
|
expect(['not-started', 'queued', 'running', 'completed']).toContain(aiStatus.backfill.status)
|
||||||
|
if (messageCount > 80) {
|
||||||
|
await expect.poll(async () => {
|
||||||
|
const response = await page.request.get(
|
||||||
|
`/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
|
||||||
|
{ headers },
|
||||||
|
)
|
||||||
|
return (await response.json()).data.context.status
|
||||||
|
}, { timeout: 30_000 }).toBe('ready')
|
||||||
|
const readyResponse = await page.request.get(
|
||||||
|
`/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
|
||||||
|
{ headers },
|
||||||
|
)
|
||||||
|
const readyStatus = (await readyResponse.json()).data
|
||||||
|
expect(readyStatus.context.sourceMessageCount).toBeGreaterThan(0)
|
||||||
|
expect(readyStatus.context.memory.summary).toBeTruthy()
|
||||||
|
}
|
||||||
|
const analyzeResponse = await page.request.post(
|
||||||
|
`/api/conversations/${encodeURIComponent(conversationId)}/messages/${encodeURIComponent(messageId)}/analyze`,
|
||||||
|
{ headers, data: { force: true } },
|
||||||
|
)
|
||||||
|
expect(analyzeResponse.ok()).toBeTruthy()
|
||||||
|
|
||||||
|
await page.goto(`/inbox?c=${encodeURIComponent(conversationId)}`)
|
||||||
|
await expect(page.getByTestId('conversation-insight-bar')).toBeVisible()
|
||||||
|
await expect(page.getByTestId('conversation-intent-toggle')).toBeVisible()
|
||||||
|
await expect(
|
||||||
|
page.getByRole('switch', { name: '当前会话逐句意图识别' }),
|
||||||
|
).toHaveAttribute('aria-checked', 'true')
|
||||||
|
await expect.poll(() => page.getByTestId('message-intent').count()).toBeGreaterThan(0)
|
||||||
|
const intentCount = await page.getByTestId('message-intent').count()
|
||||||
|
const visibleIntent = page.getByTestId('message-intent').nth(intentCount - 1)
|
||||||
|
await visibleIntent.scrollIntoViewIfNeeded()
|
||||||
|
await expect(visibleIntent).toBeVisible()
|
||||||
|
const intentSwitch = page.getByRole('switch', { name: '当前会话逐句意图识别' })
|
||||||
|
await intentSwitch.click()
|
||||||
|
await expect(intentSwitch).toHaveAttribute('aria-checked', 'false')
|
||||||
|
await expect(page.getByTestId('message-intent')).toHaveCount(0)
|
||||||
|
await page.reload()
|
||||||
|
await expect(
|
||||||
|
page.getByRole('switch', { name: '当前会话逐句意图识别' }),
|
||||||
|
).toHaveAttribute('aria-checked', 'false')
|
||||||
|
await page.getByRole('switch', { name: '当前会话逐句意图识别' }).click()
|
||||||
|
await expect(
|
||||||
|
page.getByRole('switch', { name: '当前会话逐句意图识别' }),
|
||||||
|
).toHaveAttribute('aria-checked', 'true')
|
||||||
|
await expect.poll(() => page.getByTestId('message-intent').count()).toBeGreaterThan(0)
|
||||||
|
await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
|
||||||
|
await page.screenshot({ path: testInfo.outputPath('message-intent.png'), fullPage: false })
|
||||||
|
|
||||||
|
await page.goto('/settings')
|
||||||
|
await page.getByRole('button', { name: '智能回复' }).click()
|
||||||
|
const globalIntentSwitch = page.getByRole('switch', { name: '逐条客户消息意图识别' })
|
||||||
|
await expect(globalIntentSwitch).toBeVisible()
|
||||||
|
await globalIntentSwitch.click()
|
||||||
|
await expect(globalIntentSwitch).toHaveAttribute('aria-checked', 'false')
|
||||||
|
await globalIntentSwitch.click()
|
||||||
|
await expect(globalIntentSwitch).toHaveAttribute('aria-checked', 'true')
|
||||||
|
await expect(page.getByText('invalid input syntax for type json')).toHaveCount(0)
|
||||||
|
})
|
||||||
@@ -177,6 +177,16 @@ test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
|
|||||||
await page.getByText('薄荷绿', { exact: true }).click()
|
await page.getByText('薄荷绿', { exact: true }).click()
|
||||||
await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-mint/)
|
await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-mint/)
|
||||||
await expect(page.getByPlaceholder('输入回复内容，Enter 发送，Shift+Enter 换行')).toHaveClass(/min-h-\[86px\]/)
|
await expect(page.getByPlaceholder('输入回复内容，Enter 发送，Shift+Enter 换行')).toHaveClass(/min-h-\[86px\]/)
|
||||||
|
const targetLanguage = page.getByLabel('客户目标语言')
|
||||||
|
await expect(targetLanguage).toBeVisible()
|
||||||
|
if (testInfo.project.name !== 'mobile-chromium') {
|
||||||
|
await targetLanguage.selectOption('es')
|
||||||
|
await expect(targetLanguage).toHaveValue('es')
|
||||||
|
await page.reload()
|
||||||
|
await expect(page.getByLabel('客户目标语言')).toHaveValue('es')
|
||||||
|
await page.getByLabel('客户目标语言').selectOption('auto')
|
||||||
|
await expect(page.getByLabel('客户目标语言')).toHaveValue('auto')
|
||||||
|
}
|
||||||
await page.screenshot({ path: testInfo.outputPath('inbox.png'), fullPage: true })
|
await page.screenshot({ path: testInfo.outputPath('inbox.png'), fullPage: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -205,7 +215,8 @@ test('conversation list reorders immediately from WebSocket events', async ({ pa
|
|||||||
await page.goto('/inbox')
|
await page.goto('/inbox')
|
||||||
const items = page.getByTestId('conversation-item')
|
const items = page.getByTestId('conversation-item')
|
||||||
await expect(items.nth(1)).toBeVisible()
|
await expect(items.nth(1)).toBeVisible()
|
||||||
await expect.poll(() => sockets.length).toBeGreaterThanOrEqual(2)
|
// 页面跳转可能复用现有应用外壳，也可能重新建立连接；只要求当前至少存在一条可用连接。
|
||||||
|
await expect.poll(() => sockets.length).toBeGreaterThanOrEqual(1)
|
||||||
|
|
||||||
const target = items.nth(1)
|
const target = items.nth(1)
|
||||||
const targetId = await target.getAttribute('data-conversation-id')
|
const targetId = await target.getAttribute('data-conversation-id')
|
||||||
@@ -245,10 +256,10 @@ test('知识文件真实上传解析', async ({ page }, testInfo) => {
|
|||||||
await page.locator('input[type="file"]').setInputFiles({
|
await page.locator('input[type="file"]').setInputFiles({
|
||||||
name: `visual-e2e-${testInfo.project.name}.txt`,
|
name: `visual-e2e-${testInfo.project.name}.txt`,
|
||||||
mimeType: 'text/plain',
|
mimeType: 'text/plain',
|
||||||
buffer: Buffer.from('灵犀跨境视觉 E2E 知识解析测试。'),
|
buffer: Buffer.from('灵犀跨境视觉 E2E 知识解析测试，覆盖产品资料与售后政策。'),
|
||||||
})
|
})
|
||||||
await page.getByRole('button', { name: '上传并解析' }).click()
|
await page.getByRole('button', { name: /上传.*解析.*索引/ }).click()
|
||||||
await expect(page.getByText(/知识文件解析完成/)).toBeVisible()
|
await expect(page.getByText(/文件解析并建立检索索引/)).toBeVisible()
|
||||||
await page.screenshot({ path: testInfo.outputPath('knowledge-uploaded.png'), fullPage: true })
|
await page.screenshot({ path: testInfo.outputPath('knowledge-uploaded.png'), fullPage: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user