Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 wmq
|
a7c894138e | ||
|
wmq
|
45b94374b0 | ||
|
wmq
|
d585fabb7a | ||
|
wmq
|
48d719e520 | ||
|
wmq
|
9017c26f5b | ||
|
wmq
|
82f00ffb43 | ||
|
wmq
|
0109e58160 | ||
|
wmq
|
bffd2f4fe6 | ||
|
wmq
|
7e739ad7b8 | ||
|
wmq
|
bb696c7de8 | ||
|
wmq
|
ad126606f9 | ||
|
wmq
|
00b0ebb775 | ||
|
wmq
|
785a5b196c | ||
|
wmq
|
cf25d71fcf | ||
|
wmq
|
06112602ec | ||
|
wmq
|
af49d22ca7 | ||
|
wmq
|
9804341463 |
@@ -2,6 +2,9 @@
|
||||
LX_DB_PASSWORD=replace-with-strong-database-password
|
||||
LX_JWT_SECRET=replace-with-at-least-32-random-characters
|
||||
LX_WEB_PORT=8088
|
||||
DEBIAN_MIRROR=https://deb.debian.org/debian
|
||||
DEBIAN_SECURITY_MIRROR=https://deb.debian.org/debian-security
|
||||
FFMPEG_BINARIES_URL=https://github.com/eugeneware/ffmpeg-static/releases/download
|
||||
|
||||
# DeepSeek Anthropic-compatible API
|
||||
DEEPSEEK_API_KEY=replace-with-rotated-deepseek-key
|
||||
@@ -15,6 +18,14 @@ TELEGRAM_GATEWAY_SERVICE_EMAIL=replace-with-gateway-service-email
|
||||
TELEGRAM_GATEWAY_SERVICE_PASSWORD=replace-with-random-service-password
|
||||
TELEGRAM_GATEWAY_ACCOUNT_ID=replace-with-default-account-id
|
||||
TELEGRAM_WEBHOOK_SECRET=replace-with-random-webhook-secret
|
||||
|
||||
# 普通 WhatsApp 账户通过“关联设备”接入。两个值均至少 32 位且必须彼此不同。
|
||||
WHATSAPP_GATEWAY_TOKEN=replace-with-at-least-32-random-characters
|
||||
WHATSAPP_WEBHOOK_SECRET=replace-with-another-32-random-secret
|
||||
WHATSAPP_LOG_LEVEL=info
|
||||
# 可选。只影响 WhatsApp 网关出站，不设置系统或平台全局代理。
|
||||
WHATSAPP_DEFAULT_PROXY_URL=
|
||||
|
||||
PUBLIC_WEBHOOK_BASE_URL=http://host.docker.internal:8088
|
||||
APP_PUBLIC_URL=http://127.0.0.1:8088
|
||||
|
||||
@@ -30,6 +41,9 @@ SMTP_FROM=
|
||||
# 建议使用 32 字节以上独立随机值；未配置时回退到 LX_JWT_SECRET 派生密钥。
|
||||
EMAIL_CREDENTIAL_KEY=
|
||||
EMAIL_POLL_MS=30000
|
||||
MESSAGE_RECONCILE_MS=60000
|
||||
WHATSAPP_GATEWAY_TIMEOUT_MS=30000
|
||||
TELEGRAM_GATEWAY_TIMEOUT_MS=30000
|
||||
|
||||
# 真实 Stripe Checkout
|
||||
STRIPE_SECRET_KEY=
|
||||
|
||||
@@ -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
|
||||
+52
-8
@@ -1,13 +1,57 @@
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
# Dependencies and build output
|
||||
node_modules/
|
||||
**/node_modules/
|
||||
dist/
|
||||
**/dist/
|
||||
dist-ssr/
|
||||
coverage/
|
||||
.vite/
|
||||
|
||||
# Local configuration and secrets
|
||||
.env
|
||||
server/.env
|
||||
.env.*
|
||||
!.env.example
|
||||
*.local
|
||||
.env.local
|
||||
.env.*.local
|
||||
*.pem
|
||||
*.key
|
||||
id_rsa*
|
||||
id_ed25519*
|
||||
|
||||
# Runtime data
|
||||
.smoke-data/
|
||||
**/.smoke-data/
|
||||
data/
|
||||
uploads/
|
||||
storage/
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
*.dump
|
||||
*.sql
|
||||
!telegram-gateway/docker/scripts/init-db.sql
|
||||
*.rdb
|
||||
*.binlog
|
||||
|
||||
# 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
|
||||
.idea
|
||||
Thumbs.db
|
||||
.idea/
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
npm-debug.log*
|
||||
.claude/
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
# 版本迭代记录
|
||||
|
||||
本项目遵循语义化版本。早期版本由经过脱敏的本地源码快照恢复，因此使用带日期的 `snapshot-*` 标签；自 `v1.0.0` 起按正式发布流程维护。
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
- 完成双消息网关 P0 可靠性闭环：Webhook 采用 processing/completed/failed 可恢复状态机，Telegram 编辑与撤回落库，60 秒增量游标对账、5 分钟死信自动重放、每日资料刷新和每周受控全量对账。
|
||||
- Telegram 会话发现改为 TDLib 持续加载并持久化全部会话，平台按 offset 分页读取；网关请求增加超时与任务并发合并，避免单个资料接口阻塞全部同步。
|
||||
- 修复 WhatsApp 账号重新授权后因网关账号 ID 与联系人名称变化导致历史会话分叉的问题；客户按稳定 JID 复用，旧渠道消息、任务、风险和商机自动归并，并保留最近有效的联系人资料。
|
||||
|
||||
### 新增
|
||||
|
||||
- Telegram Gateway 支持环境级默认 SOCKS5/HTTP/MTProto 代理，账号专属绑定仍具有更高优先级。
|
||||
- WhatsApp Gateway 支持环境级默认 HTTP/HTTPS 代理，账号专属代理仍可覆盖默认值。
|
||||
- 默认代理仅作用于两个消息网关，不改变平台、邮箱、数据库或 Docker 的全局网络出口。
|
||||
- Docker 构建支持可配置的 Debian 与 FFmpeg 下载镜像，适配受限网络环境。
|
||||
|
||||
### 修复
|
||||
|
||||
- 将 Telegram Gateway 首次启动所需的 PostgreSQL 初始化脚本纳入版本控制，避免空数据库因挂载目录而启动失败。
|
||||
- Telegram Gateway 本机调试端口改为 `127.0.0.1:3010`，避免与 Gitea 的 `3000` 端口冲突并阻止公网直连管理接口。
|
||||
- 修复 WhatsApp `FULL` 历史通知被 Baileys 默认过滤的问题；首次连接和历史阶段完成后自动执行逐会话分页补齐。
|
||||
- WhatsApp 历史同步增加并发合并、进度持久化、失败状态和平台数据库游标分页，避免重复同步及单次 2000 条截断。
|
||||
- 修复 WhatsApp 先于平台 API 连通时首次同步被静默丢弃的问题，增加延迟启动、指数重试和重复 Webhook 恢复。
|
||||
- WhatsApp 媒体与历史文件下载接入 Undici 代理 Dispatcher，并可恢复处理旧版本曾忽略但仍保存在缓存中的历史通知。
|
||||
|
||||
## [1.1.0] - 2026-08-01
|
||||
|
||||
### 新增
|
||||
|
||||
- 将完整 Telegram User Gateway 源码纳入 `telegram-gateway/`，平台与网关可以按同一 Git 版本追踪。
|
||||
- 提交 NestJS、TDLib、PostgreSQL、Redis、BullMQ、Webhook、限流、审计、代理、会话、消息及群组相关实现。
|
||||
- 增加 Telegram Gateway 独立 Docker 部署、平台连接、健康检查、凭据隔离和验证说明。
|
||||
|
||||
### 安全
|
||||
|
||||
- 排除 `.env`、TDLib 登录态、数据库、Redis 备份、上传文件、运行日志与真实账号调试脚本。
|
||||
- 强化仓库忽略规则，防止后续误提交 `.binlog`、`.rdb` 和会话数据。
|
||||
|
||||
## [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,4 +1,5 @@
|
||||
FROM node:20-alpine AS web-build
|
||||
ARG FFMPEG_BINARIES_URL=https://github.com/eugeneware/ffmpeg-static/releases/download
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
|
||||
@@ -1,53 +1,86 @@
|
||||
# 灵犀跨境
|
||||
|
||||
灵犀跨境是面向跨境业务团队的 Telegram 客户沟通与 AI 经营平台。当前版本只开放 Telegram，所有开放功能均访问真实 API、PostgreSQL、DeepSeek 和 Telegram Gateway，不包含前端 Mock 数据。
|
||||
灵犀跨境是一套面向跨境业务团队的多渠道客户经营 SaaS。系统将 Telegram、普通 WhatsApp 账号和企业邮箱接入统一消息中心，并提供上下文翻译、逐句意图识别、情绪与风险分析、客户画像、商机、任务、知识库和经营分析能力。
|
||||
|
||||
## 服务组成
|
||||
当前仓库包含 Web 前端、业务 API、Telegram Gateway 和 WhatsApp Gateway。Telegram Gateway 源码位于 `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`。
|
||||
4. 设置 Telegram Gateway 的租户令牌、租户 ID 和账号 ID。
|
||||
5. 启动：
|
||||
## 快速启动
|
||||
|
||||
要求：Docker Engine 24+、Docker Compose v2。首次部署应先按 [Telegram Gateway 接入指南](docs/TELEGRAM-GATEWAY.md) 启动网关，再启动平台。
|
||||
|
||||
```powershell
|
||||
Copy-Item .env.example .env
|
||||
# 编辑 .env，替换所有 replace-with-* 配置
|
||||
docker compose --env-file .env up -d --build
|
||||
docker compose ps
|
||||
```
|
||||
|
||||
默认访问地址：`http://127.0.0.1:8088`。
|
||||
|
||||
健康检查：
|
||||
默认入口为 `http://127.0.0.1:8088`。存活与就绪检查：
|
||||
|
||||
```powershell
|
||||
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
|
||||
npm install
|
||||
npm ci
|
||||
npm run typecheck
|
||||
npm run build
|
||||
|
||||
Set-Location server
|
||||
npm install
|
||||
node --check src/index.js
|
||||
Push-Location server
|
||||
npm ci
|
||||
npm test
|
||||
Pop-Location
|
||||
|
||||
Push-Location whatsapp-gateway
|
||||
npm ci
|
||||
npm test
|
||||
Pop-Location
|
||||
|
||||
Push-Location telegram-gateway
|
||||
npm ci
|
||||
npm run build
|
||||
npm test
|
||||
Pop-Location
|
||||
|
||||
npm run test:e2e
|
||||
```
|
||||
|
||||
## 安全说明
|
||||
E2E 默认访问 `http://127.0.0.1:8088`，可通过 `E2E_BASE_URL` 修改。
|
||||
|
||||
- `.env` 已加入 `.gitignore`，严禁提交真实密钥。
|
||||
- AI 回复只提供人工确认建议，不会自动向 Telegram 发送。
|
||||
- 所有业务资源都通过 JWT 中的租户 ID 隔离。
|
||||
- Webhook 必须配置独立随机密钥；生产部署应进一步使用 HTTPS、反向代理和 IP 白名单。
|
||||
## 文档
|
||||
|
||||
- [系统架构](docs/ARCHITECTURE.md)
|
||||
- [技术选型](docs/TECH-STACK.md)
|
||||
- [配置说明](docs/CONFIGURATION.md)
|
||||
- [部署与回滚](docs/DEPLOYMENT.md)
|
||||
- [接口目录](docs/API.md)
|
||||
- [Telegram Gateway 接入](docs/TELEGRAM-GATEWAY.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-*` 仅用于审计与回溯，不提供安全维护。
|
||||
@@ -16,6 +16,25 @@ services:
|
||||
retries: 10
|
||||
restart: unless-stopped
|
||||
|
||||
whatsapp-gateway:
|
||||
build:
|
||||
context: ./whatsapp-gateway
|
||||
args:
|
||||
DEBIAN_MIRROR: ${DEBIAN_MIRROR:-https://deb.debian.org/debian}
|
||||
DEBIAN_SECURITY_MIRROR: ${DEBIAN_SECURITY_MIRROR:-https://deb.debian.org/debian-security}
|
||||
environment:
|
||||
PORT: 3200
|
||||
DATA_DIR: /data
|
||||
WHATSAPP_GATEWAY_TOKEN: ${WHATSAPP_GATEWAY_TOKEN:?WHATSAPP_GATEWAY_TOKEN is required}
|
||||
WHATSAPP_DEFAULT_PROXY_URL: ${WHATSAPP_DEFAULT_PROXY_URL:-}
|
||||
LOG_LEVEL: ${WHATSAPP_LOG_LEVEL:-info}
|
||||
volumes:
|
||||
- lingxi_whatsapp_data:/data
|
||||
dns:
|
||||
- 1.1.1.1
|
||||
- 8.8.8.8
|
||||
restart: unless-stopped
|
||||
|
||||
api:
|
||||
build:
|
||||
context: ./server
|
||||
@@ -33,6 +52,10 @@ services:
|
||||
TELEGRAM_GATEWAY_SERVICE_PASSWORD: ${TELEGRAM_GATEWAY_SERVICE_PASSWORD:?TELEGRAM_GATEWAY_SERVICE_PASSWORD is required}
|
||||
TELEGRAM_GATEWAY_ACCOUNT_ID: ${TELEGRAM_GATEWAY_ACCOUNT_ID:-}
|
||||
TELEGRAM_WEBHOOK_SECRET: ${TELEGRAM_WEBHOOK_SECRET:?TELEGRAM_WEBHOOK_SECRET is required}
|
||||
WHATSAPP_GATEWAY_URL: http://whatsapp-gateway:3200
|
||||
WHATSAPP_GATEWAY_TOKEN: ${WHATSAPP_GATEWAY_TOKEN:?WHATSAPP_GATEWAY_TOKEN is required}
|
||||
WHATSAPP_WEBHOOK_SECRET: ${WHATSAPP_WEBHOOK_SECRET:?WHATSAPP_WEBHOOK_SECRET is required}
|
||||
WHATSAPP_WEBHOOK_BASE_URL: ${WHATSAPP_WEBHOOK_BASE_URL:-http://api:3100}
|
||||
PUBLIC_WEBHOOK_BASE_URL: ${PUBLIC_WEBHOOK_BASE_URL:-http://host.docker.internal:8088}
|
||||
APP_PUBLIC_URL: ${APP_PUBLIC_URL:-http://127.0.0.1:8088}
|
||||
SMTP_HOST: ${SMTP_HOST:-}
|
||||
@@ -56,6 +79,8 @@ services:
|
||||
depends_on:
|
||||
postgres:
|
||||
condition: service_healthy
|
||||
whatsapp-gateway:
|
||||
condition: service_healthy
|
||||
healthcheck:
|
||||
test: ["CMD", "node", "-e", "fetch('http://127.0.0.1:3100/health/ready').then(r=>{if(!r.ok)process.exit(1)}).catch(()=>process.exit(1))"]
|
||||
interval: 10s
|
||||
@@ -68,6 +93,8 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
args:
|
||||
FFMPEG_BINARIES_URL: ${FFMPEG_BINARIES_URL:-https://github.com/eugeneware/ffmpeg-static/releases/download}
|
||||
ports:
|
||||
- "${LX_WEB_PORT:-8088}:80"
|
||||
depends_on:
|
||||
@@ -77,3 +104,4 @@ services:
|
||||
|
||||
volumes:
|
||||
lingxi_pgdata:
|
||||
lingxi_whatsapp_data:
|
||||
|
||||
+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,80 @@
|
||||
# 系统架构
|
||||
|
||||
## 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 与数据初始化 |
|
||||
| `telegram-gateway/` | NestJS + TDLib 多租户 Telegram 普通账号网关，独立部署 |
|
||||
| `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 源码随本仓库版本化，但使用独立 Compose、数据库、Redis 和 TDLib 数据卷部署。
|
||||
- 普通 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,103 @@
|
||||
# 部署与回滚
|
||||
|
||||
## 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
|
||||
|
||||
# 先配置并启动 Telegram Gateway
|
||||
cp telegram-gateway/.env.example telegram-gateway/.env
|
||||
# 编辑 telegram-gateway/.env，配置 TG_API_ID、TG_API_HASH 和强随机密钥
|
||||
docker compose --env-file telegram-gateway/.env \
|
||||
-f telegram-gateway/docker/docker-compose.yml up -d --build
|
||||
|
||||
# 再启动灵犀跨境平台
|
||||
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
|
||||
```
|
||||
|
||||
平台的 `TELEGRAM_GATEWAY_URL` 指向网关 `/api` 地址。生产环境应通过私有网络连接，不把 Gateway 管理接口直接暴露公网。详细配置见 [Telegram Gateway 接入指南](TELEGRAM-GATEWAY.md)。
|
||||
|
||||
### 2.1 仅消息网关使用出站代理
|
||||
|
||||
生产环境可以创建一个不映射宿主机端口的专用 Docker 网络和 V2Ray/Xray 容器，并只将 Telegram、WhatsApp 网关接入该网络。不要设置 Docker Daemon、宿主机或平台 API 的全局 `HTTP_PROXY`/`HTTPS_PROXY`。
|
||||
|
||||
```env
|
||||
# Telegram Gateway
|
||||
TG_DEFAULT_PROXY_TYPE=socks5
|
||||
TG_DEFAULT_PROXY_HOST=lingxi-egress
|
||||
TG_DEFAULT_PROXY_PORT=10808
|
||||
|
||||
# 平台 WhatsApp Gateway
|
||||
WHATSAPP_DEFAULT_PROXY_URL=http://lingxi-egress:10809
|
||||
```
|
||||
|
||||
账号级代理优先于上述默认代理。代理容器应使用 `internal/external Docker network + no host ports` 的方式隔离；配置文件和认证信息仅保存在服务器受限目录，不进入 Git。上线前至少验证 Telegram API 与 WhatsApp Web 的 HTTPS 连接，并确认 API、数据库、邮箱和 AI 服务未配置全局代理变量。
|
||||
|
||||
若部署网络无法访问 Debian 官方源或 FFmpeg GitHub Release，可通过 `.env` 的 `DEBIAN_MIRROR`、`DEBIAN_SECURITY_MIRROR` 和 `FFMPEG_BINARIES_URL` 指定构建镜像；这些变量只影响镜像构建，不改变运行时出口。
|
||||
|
||||
## 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。
|
||||
|
||||
当前生产拓扑使用 Caddy 与 NPS 时，应在 NPS HTTP Host 中将域名指向平台内网 `8088`，Caddy 只反向代理到 NPS 的本机 HTTP 入口。修改前分别备份 NPS Host 配置和 Caddyfile，验证配置后再重启 NPS、平滑重载 Caddy。
|
||||
|
||||
## 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,73 @@
|
||||
# Telegram Gateway 接入指南
|
||||
|
||||
## 定位
|
||||
|
||||
`telegram-gateway/` 使用 Telegram TDLib 登录普通用户账号，不是 Bot API。它负责账号授权、历史同步、消息与媒体、联系人、群组/频道、代理、会话设备、Webhook、审计、限流和异步任务；灵犀跨境 API 通过服务凭据调用它。
|
||||
|
||||
网关源码与平台在同一 Git 仓库版本化，但运行时保持独立：它拥有自己的 PostgreSQL、Redis 和 TDLib 持久卷，故障与扩缩容不会直接占用平台数据库。
|
||||
|
||||
## 配置
|
||||
|
||||
```powershell
|
||||
Copy-Item telegram-gateway/.env.example telegram-gateway/.env
|
||||
```
|
||||
|
||||
至少替换：
|
||||
|
||||
- `TG_API_ID`、`TG_API_HASH`：从 Telegram 官方开发者后台申请，不能使用 Bot Token。
|
||||
- `JWT_SECRET`、`ADMIN_API_KEY`：分别生成强随机值，不得复用。
|
||||
- `DB_PASSWORD`：生产数据库强密码。
|
||||
- `CORS_ORIGINS`：仅填写受信任的管理入口；平台服务端调用不依赖浏览器跨域。
|
||||
- `TG_DEFAULT_PROXY_*`：可选的默认 TDLib 代理；账号绑定的专属代理优先。
|
||||
|
||||
生产环境不要使用示例中的 `postgres` 密码。`.env` 不得提交 Git。
|
||||
|
||||
## 启动
|
||||
|
||||
```powershell
|
||||
docker compose --env-file telegram-gateway/.env `
|
||||
-f telegram-gateway/docker/docker-compose.yml up -d --build
|
||||
|
||||
docker compose -f telegram-gateway/docker/docker-compose.yml ps
|
||||
Invoke-RestMethod http://127.0.0.1:3000/api/admin/health
|
||||
Invoke-RestMethod http://127.0.0.1:3000/api/admin/ready
|
||||
```
|
||||
|
||||
Swagger 默认位于 `http://127.0.0.1:3000/api/docs`。生产环境应限制 Swagger 和管理接口的访问来源。
|
||||
|
||||
## 连接灵犀跨境
|
||||
|
||||
在平台根目录 `.env` 配置：
|
||||
|
||||
```dotenv
|
||||
TELEGRAM_GATEWAY_URL=http://host.docker.internal:3000/api
|
||||
TELEGRAM_GATEWAY_TOKEN=replace-with-gateway-jwt
|
||||
TELEGRAM_GATEWAY_TENANT_ID=replace-with-gateway-tenant-id
|
||||
TELEGRAM_GATEWAY_SERVICE_EMAIL=replace-with-service-account
|
||||
TELEGRAM_GATEWAY_SERVICE_PASSWORD=replace-with-service-password
|
||||
TELEGRAM_WEBHOOK_SECRET=replace-with-independent-webhook-secret
|
||||
```
|
||||
|
||||
Linux 生产部署建议把两个 Compose 接入同一私有 Docker 网络，并把 URL 改为网关服务名。不要通过公网传递服务密码或长期 JWT。
|
||||
|
||||
## 数据边界
|
||||
|
||||
以下内容只存在部署环境，不能进入 Git 或普通源码备份：
|
||||
|
||||
- `telegram-gateway/.env`
|
||||
- TDLib `db.sqlite`、`td.binlog`、WAL 文件及账号目录
|
||||
- PostgreSQL/Redis 导出
|
||||
- 下载媒体、上传文件和业务日志
|
||||
- 验证码、二步密码、手机号及授权会话
|
||||
|
||||
平台数据库保存渠道引用和业务消息；网关数据库保存 Telegram 操作状态。备份与恢复必须同时记录两个系统的版本和时间点。
|
||||
|
||||
## 验证
|
||||
|
||||
```powershell
|
||||
npm ci --prefix telegram-gateway
|
||||
npm run build --prefix telegram-gateway
|
||||
npm test --prefix telegram-gateway
|
||||
```
|
||||
|
||||
自动化测试通过后，仍需使用无重要数据的测试账号验证手机号、验证码、二步密码、历史同步、双向收发、媒体、Webhook、代理、断网重连和 FloodWait 退避。Mock/内存数据库测试不能证明真实 Telegram 可用。
|
||||
@@ -0,0 +1,46 @@
|
||||
# 测试策略
|
||||
|
||||
## 测试层次
|
||||
|
||||
| 层次 | 命令 | 覆盖 |
|
||||
| --- | --- | --- |
|
||||
| 类型检查 | `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` | 路由、状态、消息与可靠性 |
|
||||
| Telegram 网关 | `npm run build --prefix telegram-gateway`、`npm test --prefix telegram-gateway` | NestJS 编译、业务服务、路由、迁移与网关逻辑 |
|
||||
| 浏览器 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 name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "lingxi-crossborder-saas",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "lingxi-crossborder-saas",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^3.9.1",
|
||||
"@tanstack/react-query": "^5.62.0",
|
||||
|
||||
+2
-2
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "lingxi-crossborder-saas",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"type": "module",
|
||||
"description": "灵犀跨境 - Telegram 跨境 AI 客户经营平台",
|
||||
"description": "灵犀跨境 - Telegram、WhatsApp 与企业邮箱 AI 客户经营平台",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
|
||||
@@ -5,6 +5,9 @@ export default defineConfig({
|
||||
timeout: 30_000,
|
||||
expect: { timeout: 10_000 },
|
||||
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,
|
||||
reporter: [['list'], ['html', { outputFolder: 'playwright-report', open: 'never' }]],
|
||||
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",
|
||||
"imapflow": "^1.6.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"libphonenumber-js": "^1.11.20",
|
||||
"mailparser": "^3.9.14",
|
||||
"mammoth": "^1.9.0",
|
||||
"nodemailer": "^7.0.5",
|
||||
@@ -891,6 +892,12 @@
|
||||
"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": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/libqp/-/libqp-2.1.1.tgz",
|
||||
|
||||
+2
-1
@@ -5,7 +5,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node src/index.js",
|
||||
"test": "node --test test/business.test.js",
|
||||
"test": "node --test test/business.test.js test/reliability.test.js test/whatsapp-identity.test.js",
|
||||
"test:email-protocol": "node --test test/email-protocol.test.js",
|
||||
"test:email-api": "node --test test/email-api-e2e.test.js"
|
||||
},
|
||||
@@ -16,6 +16,7 @@
|
||||
"helmet": "^8.1.0",
|
||||
"imapflow": "^1.6.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"libphonenumber-js": "^1.11.20",
|
||||
"mailparser": "^3.9.14",
|
||||
"mammoth": "^1.9.0",
|
||||
"nodemailer": "^7.0.5",
|
||||
|
||||
+22
-7
@@ -7,7 +7,11 @@ function parseJson(text) {
|
||||
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
|
||||
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`
|
||||
@@ -17,7 +21,10 @@ export async function deepseek(system, user, json = false) {
|
||||
|
||||
for (let attempt = 0; attempt < attempts; attempt += 1) {
|
||||
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 {
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
@@ -29,8 +36,11 @@ export async function deepseek(system, user, json = false) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: process.env.DEEPSEEK_MODEL || 'deepseek-v4-flash',
|
||||
max_tokens: Number(process.env.AI_MAX_TOKENS || 4096),
|
||||
temperature: json ? 0 : 0.3,
|
||||
max_tokens: Number(options.maxTokens || process.env.AI_MAX_TOKENS || 4096),
|
||||
temperature: options.temperature ?? (json ? 0 : 0.3),
|
||||
thinking: options.thinking === true
|
||||
? { type: 'enabled' }
|
||||
: { type: 'disabled' },
|
||||
system,
|
||||
messages: [{ role: 'user', content: [{ type: 'text', text: prompt }] }],
|
||||
}),
|
||||
@@ -47,6 +57,11 @@ export async function deepseek(system, user, json = false) {
|
||||
lastError = error
|
||||
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 {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
@@ -54,9 +69,9 @@ export async function deepseek(system, user, json = false) {
|
||||
throw Object.assign(new Error('AI 返回格式异常，自动重试后仍无法解析'), { status: 502, cause: lastError })
|
||||
}
|
||||
|
||||
export function conversationContext(messages) {
|
||||
return messages.slice(-80).map((m) => {
|
||||
const role = m.sender === 'agent' ? '坐席' : m.sender === 'system' ? '系统' : '客户'
|
||||
export function conversationContext(messages, limit = 30) {
|
||||
return messages.slice(-limit).map((m) => {
|
||||
const role = m.sender === 'agent' ? '我方' : m.sender === 'system' ? '系统' : '对方'
|
||||
const content = m.originalText || m.attachmentName || `[${m.type || '消息'}]`
|
||||
const translation = m.translatedText && m.translatedText !== content ? `（译文：${m.translatedText}）` : ''
|
||||
return `${m.createdAt || ''} ${role}: ${content}${translation}`
|
||||
|
||||
@@ -74,3 +74,22 @@ export const countBy = (list, key) => {
|
||||
}
|
||||
return counts
|
||||
}
|
||||
export const businessRelationshipLabels = {
|
||||
buyer: '下游买家',
|
||||
supplier: '上游供应商',
|
||||
partner: '合作伙伴',
|
||||
distributor: '经销商',
|
||||
procurement_agent: '采购代理',
|
||||
logistics: '物流服务商',
|
||||
service_provider: '专业服务商',
|
||||
internal: '内部同事',
|
||||
other: '其他',
|
||||
unknown: '待确认',
|
||||
}
|
||||
|
||||
export function normalizeBusinessRelationship(value) {
|
||||
const type = Object.hasOwn(businessRelationshipLabels, String(value || ''))
|
||||
? String(value)
|
||||
: 'unknown'
|
||||
return { type, label: businessRelationshipLabels[type] }
|
||||
}
|
||||
|
||||
@@ -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 = {}) {
|
||||
// pg 会把顶层 JavaScript 数组编码成 PostgreSQL 数组文本（如 {ai}），
|
||||
// jsonb 无法解析该格式。显式 JSON 序列化可同时兼容对象、数组和标量。
|
||||
const serializedDetail = JSON.stringify(detail ?? {})
|
||||
await pool.query(
|
||||
'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],
|
||||
)
|
||||
}
|
||||
|
||||
@@ -45,6 +45,9 @@ export async function gatewayRequest(path, options = {}) {
|
||||
if (!gatewayToken || tokenExpiresSoon(gatewayToken)) await refreshGatewayToken()
|
||||
const send = () => fetch(`${base()}${path}`, {
|
||||
...options,
|
||||
signal: options.signal || AbortSignal.timeout(
|
||||
Math.max(5_000, Number(process.env.TELEGRAM_GATEWAY_TIMEOUT_MS || 30_000)),
|
||||
),
|
||||
headers: {
|
||||
...(options.body instanceof FormData ? {} : { 'content-type': 'application/json' }),
|
||||
authorization: `Bearer ${gatewayToken}`,
|
||||
|
||||
+3080
-104
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,15 @@
|
||||
export function webhookEventClaimDecision(existing, now = Date.now(), leaseMs = 2 * 60_000) {
|
||||
if (existing?.status === 'completed') return 'duplicate'
|
||||
const processingAt = Date.parse(existing?.processingAt || '')
|
||||
if (
|
||||
existing?.status === 'processing'
|
||||
&& Number.isFinite(processingAt)
|
||||
&& processingAt > now - leaseMs
|
||||
) return 'busy'
|
||||
return 'claim'
|
||||
}
|
||||
|
||||
export function isTimestampOlderThan(value, ageMs, now = Date.now()) {
|
||||
const parsed = Date.parse(value || '')
|
||||
return !Number.isFinite(parsed) || parsed < now - ageMs
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
const TONE_INSTRUCTIONS = {
|
||||
professional: '专业但不官腔，表达清楚、克制，像熟悉业务的真人销售在聊天',
|
||||
friendly: '友好自然，适度口语化，像长期合作伙伴沟通，不刻意热情',
|
||||
concise: '简洁直接，优先给结论和下一步，不重复客户已经知道的信息',
|
||||
warm: '温和、有同理心，但不使用夸张道歉、空泛安慰或营销套话',
|
||||
}
|
||||
|
||||
export function replyToneInstruction(value) {
|
||||
return TONE_INSTRUCTIONS[String(value || '').toLowerCase()] || TONE_INSTRUCTIONS.professional
|
||||
}
|
||||
|
||||
export const HUMAN_REPLY_SYSTEM_PROMPT = `你是“灵犀跨境”的商务沟通助手。你的任务不是写客服范文，而是替一位真实、可靠、熟悉业务的销售人员起草可以直接发送的聊天回复。
|
||||
|
||||
写作原则：
|
||||
1. 先回应客户最新一条消息里尚未解决的核心问题，再给必要的下一步；不要复述整段历史。
|
||||
2. 匹配客户的语言、地区表达、正式程度和消息长度。客户只说一句时，通常也用一两句回答；不为显得专业而写长文。
|
||||
3. 延续当前对话。会话已经开始后不要重新问候、重复称呼客户或重新自我介绍。
|
||||
4. 像真人聊天：句式自然、具体，允许使用目标语言中常见的缩写和口语连接词，但保持商务礼貌。不要比客户更随意；客户未使用俚语、感叹号或表情时，不要主动使用。
|
||||
5. 客诉场景只需针对具体问题真诚确认一次，然后说明能做的动作或提出一个关键问题；避免连续道歉和空泛安慰。
|
||||
6. 信息足够时直接作答；确实缺少决定性信息时最多问一个有用的问题。不要在一句回复里堆多个反问。
|
||||
7. 三条建议必须是三种真实策略，而不是同一句话替换近义词：stable=清晰可靠，active=温暖主动，brief=简洁直接。
|
||||
8. 禁止客服和 AI 套话，包括但不限于：Dear customer、尊敬的客户、please rest assured、请放心、we value your feedback、感谢您的耐心与理解、为您带来不便深表歉意、How may I assist you、如有任何问题请随时联系我们。除非上下文确实需要，也不要使用“希望您一切都好”。
|
||||
9. 不得提及“AI、提示词、客户画像、会话记忆、知识库、情绪识别”等内部信息。
|
||||
10. 不得编造价格、库存、产品参数、交期、物流状态、退款结果、政策或任何承诺。缺少事实时自然地说明需要确认，不要假装确定。“今天、稍后、尽快、本周内、几个小时内”等时间词也属于承诺，只有企业知识或会话事实明确给出时才能使用。
|
||||
11. 可以承诺“去确认”，但不能在没有依据时承诺确认结果、完成时间、补偿方案、重新寄样或其他尚未批准的动作。正确写法是“我先确认是否可以调整，确认后告诉你”。
|
||||
|
||||
输出要求：只输出严格 JSON 数组。content 使用客户语言且可直接发送；translationCn 是 content 完整准确的简体中文翻译；knowledgeRefs 只能填写已提供知识的 id；reason、expectedEffect 和 cultureTip 使用简体中文。`
|
||||
|
||||
export function buildHumanReplyUserPrompt({
|
||||
targetInstruction,
|
||||
tone,
|
||||
latestCustomerMessage,
|
||||
latestAgentMessage,
|
||||
conversation,
|
||||
conversationMemory,
|
||||
knowledgeContext,
|
||||
}) {
|
||||
return `客户目标语言：${targetInstruction}
|
||||
企业设定语气：${replyToneInstruction(tone)}
|
||||
客户最新消息（回复重点）：${latestCustomerMessage || '未找到明确文本，请根据最近会话判断'}
|
||||
坐席上一条回复（避免重复）：${latestAgentMessage || '无'}
|
||||
|
||||
<conversation>
|
||||
${conversation}
|
||||
</conversation>
|
||||
${conversationMemory ? `<conversation_memory>\n${conversationMemory}\n</conversation_memory>` : ''}
|
||||
<enterprise_knowledge>
|
||||
${JSON.stringify(knowledgeContext || [])}
|
||||
</enterprise_knowledge>
|
||||
事实边界：${knowledgeContext?.length ? '只能使用上述企业知识和会话中明确出现的业务事实。' : '当前没有匹配到企业知识；不得加入任何具体时间、结果、方案或承诺，只能说明需要确认的事项。'}
|
||||
|
||||
分别生成以下三种建议：
|
||||
- stable：最稳妥、事实清楚、自然推进下一步；
|
||||
- active：更温暖主动，但不催促、不夸张、不强行促单；
|
||||
- brief：保留必要信息的最短自然回复。
|
||||
|
||||
生成前静默检查：是否直接回应了最新消息；是否重复问候或复述历史；是否像群发模板；是否包含未经证实的承诺；三条是否真正不同。不要输出检查过程。
|
||||
|
||||
输出恰好 3 个元素，每种 style 各一个：
|
||||
{"id":"唯一值","style":"stable|active|brief","content":"可直接发送的客户语言回复","translationCn":"完整中文翻译","targetLang":"实际 ISO 语言代码","reason":"这条回复为何适合当前语境","knowledgeRefs":[],"expectedEffect":"预期沟通效果","cultureTip":"只有确有必要时填写，否则为空字符串"}`
|
||||
}
|
||||
|
||||
function normalizedWords(value) {
|
||||
return String(value || '')
|
||||
.toLowerCase()
|
||||
.replace(/[^\p{L}\p{N}\s]/gu, ' ')
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function similarity(left, right) {
|
||||
const a = new Set(normalizedWords(left))
|
||||
const b = new Set(normalizedWords(right))
|
||||
if (!a.size || !b.size) return 0
|
||||
let overlap = 0
|
||||
for (const word of a) if (b.has(word)) overlap += 1
|
||||
return overlap / Math.min(a.size, b.size)
|
||||
}
|
||||
|
||||
const TEMPLATE_PATTERNS = [
|
||||
/\bdear customer\b/i,
|
||||
/\bplease rest assured\b/i,
|
||||
/\bwe value your feedback\b/i,
|
||||
/\bhow may i assist you\b/i,
|
||||
/尊敬的客户/,
|
||||
/请您放心/,
|
||||
/感谢您的耐心与理解/,
|
||||
/为您带来不便深表歉意/,
|
||||
]
|
||||
|
||||
const UNSUPPORTED_TIMELINE_PATTERNS = [
|
||||
/\b(?:today|tomorrow|shortly|asap)\b/i,
|
||||
/\bby (?:the )?end of\b/i,
|
||||
/\bwithin \d+\s*(?:minutes?|hours?|days?|weeks?)\b/i,
|
||||
/(?:今天|明天|稍后|很快|尽快|本周内|几(?:分钟|小时|天)内)/,
|
||||
]
|
||||
|
||||
export function replySuggestionIssues(suggestions, { knowledgeProvided = false } = {}) {
|
||||
if (!Array.isArray(suggestions) || suggestions.length !== 3) return ['必须返回三条建议']
|
||||
const issues = []
|
||||
const styles = new Set(suggestions.map((item) => String(item?.style || '')))
|
||||
for (const style of ['stable', 'active', 'brief']) {
|
||||
if (!styles.has(style)) issues.push(`缺少 ${style} 风格`)
|
||||
}
|
||||
suggestions.forEach((item, index) => {
|
||||
const content = String(item?.content || '').trim()
|
||||
if (!content) issues.push(`第 ${index + 1} 条没有正文`)
|
||||
if (TEMPLATE_PATTERNS.some((pattern) => pattern.test(content))) {
|
||||
issues.push(`第 ${index + 1} 条包含模板化客服话术`)
|
||||
}
|
||||
if (!knowledgeProvided && UNSUPPORTED_TIMELINE_PATTERNS.some((pattern) => pattern.test(content))) {
|
||||
issues.push(`第 ${index + 1} 条包含无事实依据的时间承诺`)
|
||||
}
|
||||
})
|
||||
for (let i = 0; i < suggestions.length; i += 1) {
|
||||
for (let j = i + 1; j < suggestions.length; j += 1) {
|
||||
if (similarity(suggestions[i]?.content, suggestions[j]?.content) >= 0.82) {
|
||||
issues.push(`第 ${i + 1} 条和第 ${j + 1} 条过于相似`)
|
||||
}
|
||||
}
|
||||
}
|
||||
return issues
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import crypto from 'node:crypto'
|
||||
|
||||
export function canonicalWhatsAppJid(jid, identity = {}) {
|
||||
const normalizeDevice = (value) => String(value || '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/:\d+(?=@s\.whatsapp\.net$)/, '')
|
||||
const raw = normalizeDevice(jid)
|
||||
if (!raw || raw.endsWith('@g.us') || raw.endsWith('@newsletter')) return raw
|
||||
const canonical = normalizeDevice(identity?.canonicalJid)
|
||||
if (canonical.endsWith('@s.whatsapp.net')) return canonical
|
||||
const phone = String(identity?.phone || '').split(':')[0].replace(/\D/g, '')
|
||||
return phone ? `${phone}@s.whatsapp.net` : raw
|
||||
}
|
||||
|
||||
export function resolvedWhatsAppJid(jid, identity = {}, cachedJid = '') {
|
||||
const fallback = canonicalWhatsAppJid(jid)
|
||||
const resolved = canonicalWhatsAppJid(jid, identity)
|
||||
if (resolved && resolved !== fallback) return resolved
|
||||
|
||||
const cached = canonicalWhatsAppJid(cachedJid)
|
||||
return cached && cached !== fallback ? cached : fallback
|
||||
}
|
||||
|
||||
export function whatsappCustomerStableId(jid) {
|
||||
const normalized = canonicalWhatsAppJid(jid)
|
||||
const hash = crypto.createHash('sha256').update(normalized).digest('hex').slice(0, 24)
|
||||
return `wa-customer-${hash}`
|
||||
}
|
||||
|
||||
export function whatsappConversationActivityAt(conversation) {
|
||||
return Date.parse(
|
||||
conversation?.lastMessage?.createdAt
|
||||
|| conversation?.updatedAt
|
||||
|| conversation?.createdAt
|
||||
|| '',
|
||||
) || 0
|
||||
}
|
||||
|
||||
export function isWeakWhatsAppDisplayName(value, jid) {
|
||||
const name = String(value || '').trim()
|
||||
const jidName = String(jid || '').split('@')[0].replace(/\D/g, '')
|
||||
const digits = name.replace(/\D/g, '')
|
||||
return !name || (digits.length >= 7 && (!jidName || digits === jidName))
|
||||
}
|
||||
|
||||
export function reusableWhatsAppConversations(conversations, activeChannelIds, channelId, jid) {
|
||||
return conversations
|
||||
.filter((item) => (
|
||||
item.channel === 'whatsapp'
|
||||
&& String(item.whatsappJid || '') === String(jid)
|
||||
&& (
|
||||
String(item.channelId || '') === String(channelId)
|
||||
|| !activeChannelIds.has(String(item.channelId || String(item.id).split(':')[0]))
|
||||
)
|
||||
))
|
||||
.sort((left, right) => whatsappConversationActivityAt(right) - whatsappConversationActivityAt(left))
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
const base = () => (process.env.WHATSAPP_GATEWAY_URL || 'http://whatsapp-gateway:3200').replace(/\/$/, '')
|
||||
|
||||
export async function whatsappRequest(path, options = {}) {
|
||||
const token = String(process.env.WHATSAPP_GATEWAY_TOKEN || '')
|
||||
if (token.length < 24) {
|
||||
throw Object.assign(new Error('WhatsApp 网关令牌尚未配置'), { status: 503 })
|
||||
}
|
||||
const response = await fetch(`${base()}${path}`, {
|
||||
...options,
|
||||
signal: options.signal || AbortSignal.timeout(
|
||||
Math.max(5_000, Number(process.env.WHATSAPP_GATEWAY_TIMEOUT_MS || 30_000)),
|
||||
),
|
||||
headers: {
|
||||
...(options.body instanceof FormData ? {} : { 'content-type': 'application/json' }),
|
||||
authorization: `Bearer ${token}`,
|
||||
...(options.headers || {}),
|
||||
},
|
||||
})
|
||||
const raw = await response.text()
|
||||
let result
|
||||
try { result = raw ? JSON.parse(raw) : null } catch { result = raw }
|
||||
if (!response.ok) {
|
||||
throw Object.assign(
|
||||
new Error(result?.message || `WhatsApp 网关请求失败 (${response.status})`),
|
||||
{ status: response.status, data: result?.data },
|
||||
)
|
||||
}
|
||||
return result?.data ?? result
|
||||
}
|
||||
|
||||
export function postWhatsApp(path, body) {
|
||||
return whatsappRequest(path, { method: 'POST', body: JSON.stringify(body) })
|
||||
}
|
||||
|
||||
export function putWhatsApp(path, body) {
|
||||
return whatsappRequest(path, { method: 'PUT', body: JSON.stringify(body) })
|
||||
}
|
||||
|
||||
export function uploadWhatsApp(path, formData) {
|
||||
return whatsappRequest(path, { method: 'POST', body: formData })
|
||||
}
|
||||
@@ -1,7 +1,19 @@
|
||||
import test from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { countBy, dateKey, percent, telegramAttachment } from '../src/business.js'
|
||||
import {
|
||||
countBy,
|
||||
dateKey,
|
||||
normalizeBusinessRelationship,
|
||||
percent,
|
||||
telegramAttachment,
|
||||
} from '../src/business.js'
|
||||
import { decryptEmailPassword, encryptEmailPassword } from '../src/email.js'
|
||||
import {
|
||||
HUMAN_REPLY_SYSTEM_PROMPT,
|
||||
buildHumanReplyUserPrompt,
|
||||
replySuggestionIssues,
|
||||
replyToneInstruction,
|
||||
} from '../src/reply-suggestions.js'
|
||||
|
||||
test('Telegram 图片、文档、语音和贴纸映射为可下载文件', () => {
|
||||
assert.deepEqual(
|
||||
@@ -44,11 +56,56 @@ test('业务指标工具处理百分比、分组和无效日期', () => {
|
||||
)
|
||||
})
|
||||
|
||||
test('业务关系分类使用受控类型和中文标签', () => {
|
||||
assert.deepEqual(normalizeBusinessRelationship('supplier'), { type: 'supplier', label: '上游供应商' })
|
||||
assert.deepEqual(normalizeBusinessRelationship('unsupported'), { type: 'unknown', label: '待确认' })
|
||||
})
|
||||
|
||||
test('Email 渠道凭据使用认证加密且可正确解密', () => {
|
||||
process.env.EMAIL_CREDENTIAL_KEY = 'lingxi-email-test-key-with-more-than-32-bytes'
|
||||
const encrypted = encryptEmailPassword('app-password-123')
|
||||
assert.notEqual(encrypted, 'app-password-123')
|
||||
assert.match(encrypted, /^v1:/)
|
||||
assert.equal(decryptEmailPassword(encrypted), 'app-password-123')
|
||||
assert.throws(() => decryptEmailPassword(`${encrypted.slice(0, -1)}x`))
|
||||
const tampered = encrypted.split(':')
|
||||
tampered[2] = `${tampered[2][0] === 'A' ? 'B' : 'A'}${tampered[2].slice(1)}`
|
||||
assert.throws(() => decryptEmailPassword(tampered.join(':')))
|
||||
})
|
||||
|
||||
test('回复建议提示词突出最新消息、避免重复并遵循企业语气', () => {
|
||||
const prompt = buildHumanReplyUserPrompt({
|
||||
targetInstruction: '使用西班牙语',
|
||||
tone: 'friendly',
|
||||
latestCustomerMessage: '¿Cuándo pueden enviarlo?',
|
||||
latestAgentMessage: 'I will check it.',
|
||||
conversation: '客户: ¿Cuándo pueden enviarlo?',
|
||||
conversationMemory: '客户关注交期',
|
||||
knowledgeContext: [],
|
||||
})
|
||||
assert.match(HUMAN_REPLY_SYSTEM_PROMPT, /不是写客服范文/)
|
||||
assert.match(HUMAN_REPLY_SYSTEM_PROMPT, /不要重新问候/)
|
||||
assert.match(prompt, /¿Cuándo pueden enviarlo\?/)
|
||||
assert.match(prompt, /坐席上一条回复（避免重复）/)
|
||||
assert.match(prompt, /长期合作伙伴/)
|
||||
assert.match(replyToneInstruction('concise'), /简洁直接/)
|
||||
})
|
||||
|
||||
test('回复建议质量检查拦截模板话术和同质草稿', () => {
|
||||
const valid = [
|
||||
{ style: 'stable', content: 'I can confirm the dispatch date with our warehouse and update you once I have it.' },
|
||||
{ style: 'active', content: "Let me check the warehouse schedule and come back to you with the exact date." },
|
||||
{ style: 'brief', content: "I'll verify the dispatch date and get back to you." },
|
||||
]
|
||||
assert.deepEqual(replySuggestionIssues(valid), [])
|
||||
const invalid = valid.map((item) => ({ ...item }))
|
||||
invalid[0].content = 'Dear customer, please rest assured that we value your feedback.'
|
||||
invalid[2] = { style: 'active', content: invalid[1].content }
|
||||
const issues = replySuggestionIssues(invalid)
|
||||
assert.ok(issues.some((item) => item.includes('模板化')))
|
||||
assert.ok(issues.some((item) => item.includes('缺少 brief')))
|
||||
assert.ok(issues.some((item) => item.includes('过于相似')))
|
||||
assert.ok(replySuggestionIssues([
|
||||
...valid.slice(0, 2),
|
||||
{ style: 'brief', content: "I'll confirm it today." },
|
||||
]).some((item) => item.includes('时间承诺')))
|
||||
})
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import { isTimestampOlderThan, webhookEventClaimDecision } from '../src/reliability.js'
|
||||
|
||||
test('completed webhooks deduplicate while failed and expired processing events can resume', () => {
|
||||
const now = Date.parse('2026-08-01T12:00:00.000Z')
|
||||
assert.equal(webhookEventClaimDecision({ status: 'completed' }, now), 'duplicate')
|
||||
assert.equal(webhookEventClaimDecision({ status: 'failed' }, now), 'claim')
|
||||
assert.equal(webhookEventClaimDecision({ status: 'processing', processingAt: '2026-08-01T11:59:30.000Z' }, now), 'busy')
|
||||
assert.equal(webhookEventClaimDecision({ status: 'processing', processingAt: '2026-08-01T11:57:00.000Z' }, now), 'claim')
|
||||
})
|
||||
|
||||
test('missing timestamps are due and recent maintenance timestamps are not', () => {
|
||||
const now = Date.parse('2026-08-01T12:00:00.000Z')
|
||||
assert.equal(isTimestampOlderThan(undefined, 60_000, now), true)
|
||||
assert.equal(isTimestampOlderThan('2026-08-01T11:58:00.000Z', 60_000, now), true)
|
||||
assert.equal(isTimestampOlderThan('2026-08-01T11:59:30.000Z', 60_000, now), false)
|
||||
})
|
||||
@@ -0,0 +1,51 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import {
|
||||
canonicalWhatsAppJid,
|
||||
isWeakWhatsAppDisplayName,
|
||||
resolvedWhatsAppJid,
|
||||
reusableWhatsAppConversations,
|
||||
whatsappCustomerStableId,
|
||||
} from '../src/whatsapp-identity.js'
|
||||
|
||||
test('WhatsApp LID resolves to the same canonical phone identity', () => {
|
||||
const phoneJid = '15551234567@s.whatsapp.net'
|
||||
assert.equal(canonicalWhatsAppJid('987654321@lid', { phone: '+1 555 123 4567' }), phoneJid)
|
||||
assert.equal(canonicalWhatsAppJid('987654321@lid', { canonicalJid: phoneJid }), phoneJid)
|
||||
assert.equal(whatsappCustomerStableId(canonicalWhatsAppJid('987654321@lid', { phone: '+1 555 123 4567' })), whatsappCustomerStableId(phoneJid))
|
||||
assert.equal(canonicalWhatsAppJid('15551234567:4@s.whatsapp.net'), phoneJid)
|
||||
assert.equal(canonicalWhatsAppJid('987654321@lid', { canonicalJid: '15551234567:0@s.whatsapp.net' }), phoneJid)
|
||||
})
|
||||
|
||||
test('a newly resolved phone identity overrides a stale cached LID', () => {
|
||||
const lid = '987654321@lid'
|
||||
const phoneJid = '15551234567@s.whatsapp.net'
|
||||
assert.equal(resolvedWhatsAppJid(lid, {}, lid), lid)
|
||||
assert.equal(resolvedWhatsAppJid(lid, { phone: '+1 555 123 4567' }, lid), phoneJid)
|
||||
assert.equal(resolvedWhatsAppJid(lid, {}, phoneJid), phoneJid)
|
||||
})
|
||||
|
||||
test('WhatsApp customer id remains stable after gateway reauthorization', () => {
|
||||
assert.equal(
|
||||
whatsappCustomerStableId('15551234567@s.whatsapp.net'),
|
||||
whatsappCustomerStableId('15551234567@s.whatsapp.net'),
|
||||
)
|
||||
assert.match(whatsappCustomerStableId('15551234567@s.whatsapp.net'), /^wa-customer-[a-f0-9]{24}$/)
|
||||
})
|
||||
|
||||
test('the latest inactive conversation is reused while another active account stays isolated', () => {
|
||||
const jid = '15551234567@s.whatsapp.net'
|
||||
const conversations = [
|
||||
{ id: 'old:newest', channel: 'whatsapp', channelId: 'old', whatsappJid: jid, customerId: 'abigail', lastMessage: { createdAt: '2026-07-31T07:51:37.000Z' } },
|
||||
{ id: 'older:history', channel: 'whatsapp', channelId: 'older', whatsappJid: jid, customerId: 'legacy', lastMessage: { createdAt: '2026-07-29T17:25:42.000Z' } },
|
||||
{ id: 'other:active', channel: 'whatsapp', channelId: 'other', whatsappJid: jid, customerId: 'other-account', lastMessage: { createdAt: '2026-08-01T00:00:00.000Z' } },
|
||||
]
|
||||
const result = reusableWhatsAppConversations(conversations, new Set(['current', 'other']), 'current', jid)
|
||||
assert.deepEqual(result.map((item) => item.customerId), ['abigail', 'legacy'])
|
||||
})
|
||||
|
||||
test('a saved contact name is not replaced by a phone-number fallback', () => {
|
||||
const jid = '15551234567@s.whatsapp.net'
|
||||
assert.equal(isWeakWhatsAppDisplayName('Abigail', jid), false)
|
||||
assert.equal(isWeakWhatsAppDisplayName('+1 555 123 4567', jid), true)
|
||||
})
|
||||
@@ -1,28 +1,76 @@
|
||||
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
|
||||
import { useAuthStore } from '@/app/store/auth'
|
||||
import { createBrowserRouter, Navigate, RouterProvider, useRouteError } from 'react-router-dom'
|
||||
import { isSessionTokenExpired, useAuthStore } from '@/app/store/auth'
|
||||
import { AppLayout } from '@/components/layout/AppLayout'
|
||||
import type { ReactNode } from 'react'
|
||||
import { useEffect, type ReactNode } from 'react'
|
||||
|
||||
import { LoginPage } from '@/pages/auth/LoginPage'
|
||||
import { RegisterPage } from '@/pages/auth/RegisterPage'
|
||||
|
||||
function RequireAuth({ children }: { children: ReactNode }) {
|
||||
const token = useAuthStore((s) => s.token)
|
||||
if (!token) return <Navigate to="/login" replace />
|
||||
const logout = useAuthStore((s) => s.logout)
|
||||
const expired = isSessionTokenExpired(token)
|
||||
useEffect(() => {
|
||||
if (token && expired) logout()
|
||||
}, [expired, logout, token])
|
||||
if (expired) return <Navigate to="/login?reason=session-expired" replace />
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function GuestOnly({ children }: { children: ReactNode }) {
|
||||
const token = useAuthStore((s) => s.token)
|
||||
if (token) return <Navigate to="/dashboard" replace />
|
||||
const logout = useAuthStore((s) => s.logout)
|
||||
const expired = Boolean(token) && isSessionTokenExpired(token)
|
||||
useEffect(() => {
|
||||
if (expired) logout()
|
||||
}, [expired, logout])
|
||||
if (token && !expired) return <Navigate to="/dashboard" replace />
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function RouteErrorFallback() {
|
||||
const error = useRouteError()
|
||||
|
||||
useEffect(() => {
|
||||
console.error('Route render failed', error)
|
||||
}, [error])
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center bg-slate-50 px-6">
|
||||
<section className="w-full max-w-md rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-xl shadow-slate-200/60">
|
||||
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 text-xl text-blue-600">
|
||||
!
|
||||
</div>
|
||||
<h1 className="mt-5 text-xl font-semibold tracking-tight text-slate-950">页面暂时无法显示</h1>
|
||||
<p className="mt-2 text-sm leading-6 text-slate-500">
|
||||
当前页面遇到异常。你可以重新加载；如果问题仍然存在，请返回工作台后重试。
|
||||
</p>
|
||||
<div className="mt-6 flex justify-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.location.reload()}
|
||||
className="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700"
|
||||
>
|
||||
重新加载
|
||||
</button>
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50"
|
||||
>
|
||||
返回工作台
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{ path: '/login', element: <GuestOnly><LoginPage /></GuestOnly> },
|
||||
{ path: '/register', element: <GuestOnly><RegisterPage /></GuestOnly> },
|
||||
{ path: '/login', element: <GuestOnly><LoginPage /></GuestOnly>, errorElement: <RouteErrorFallback /> },
|
||||
{ path: '/register', element: <GuestOnly><RegisterPage /></GuestOnly>, errorElement: <RouteErrorFallback /> },
|
||||
{
|
||||
path: '/',
|
||||
errorElement: <RouteErrorFallback />,
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<AppLayout />
|
||||
|
||||
+21
-1
@@ -2,7 +2,7 @@ import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import type { AuthSession, Tenant, User } from '@/types'
|
||||
import type { RoleKey } from '@/config/roles'
|
||||
import { setTokenGetter } from '@/services/api/client'
|
||||
import { setTokenGetter, setUnauthorizedHandler } from '@/services/api/client'
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
@@ -32,6 +32,26 @@ export const useAuthStore = create<AuthState>()(
|
||||
|
||||
// 让 API client 能读取 token（真实后端模式使用）
|
||||
setTokenGetter(() => useAuthStore.getState().token)
|
||||
setUnauthorizedHandler(() => {
|
||||
useAuthStore.getState().logout()
|
||||
if (!window.location.pathname.startsWith('/login')) {
|
||||
window.location.replace('/login?reason=session-expired')
|
||||
}
|
||||
})
|
||||
|
||||
export function isSessionTokenExpired(token: string | null): boolean {
|
||||
if (!token) return true
|
||||
try {
|
||||
const encoded = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')
|
||||
const padded = encoded.padEnd(Math.ceil(encoded.length / 4) * 4, '=')
|
||||
const payload = JSON.parse(window.atob(padded)) as {
|
||||
exp?: number
|
||||
}
|
||||
return !payload.exp || payload.exp * 1_000 <= Date.now()
|
||||
} catch {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
export function useCurrentRole(): RoleKey {
|
||||
return useAuthStore((s) => s.user?.role ?? 'viewer')
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -8,7 +8,7 @@ export function LiveDataBadge({ className, text = '实时数据' }: { className?
|
||||
'inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700',
|
||||
className,
|
||||
)}
|
||||
title="指标由当前企业真实业务数据实时计算"
|
||||
title="指标实时更新"
|
||||
>
|
||||
<Radio className="h-3 w-3" />
|
||||
{text}
|
||||
|
||||
@@ -15,11 +15,11 @@ export function PageHeader({
|
||||
className?: string
|
||||
}) {
|
||||
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="min-w-0">
|
||||
<h1 className="text-lg font-semibold text-foreground">{title}</h1>
|
||||
{description && <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>}
|
||||
<h1 className="text-[22px] font-semibold tracking-[-0.035em] text-slate-950 md:text-2xl">{title}</h1>
|
||||
{description && <p className="mt-1 text-sm text-slate-500">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
|
||||
@@ -29,13 +29,13 @@ export function StatCard({
|
||||
<Card
|
||||
className={cn(
|
||||
'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}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<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" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@ export function profileRadarData(customer: Customer) {
|
||||
|
||||
return [
|
||||
{ dimension: '购买意向', score: Math.max(0, Math.min(100, Number(customer.intentScore || 0))), hint: '基于询盘强度与购买信号' },
|
||||
{ dimension: '成交可能', score: Number(profile.dealProbability || 0), hint: 'AI 综合预测成交概率' },
|
||||
{ dimension: '成交可能', score: Number(profile.dealProbability || 0), hint: '根据当前客户资料和会话信号估算' },
|
||||
{ dimension: '决策能力', score: qualitativeScore(profile.decisionPower), hint: profile.decisionPower || '尚待确认采购决策权' },
|
||||
{ dimension: '需求紧迫', score: qualitativeScore(profile.urgency), hint: profile.urgency || '尚待确认采购时间表' },
|
||||
{ dimension: '客户匹配', score: fitScore, hint: '画像字段、需求与产品匹配度' },
|
||||
@@ -80,7 +80,7 @@ export function CustomerProfileRadar({
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold tracking-tight text-slate-950">客户价值雷达</p>
|
||||
<p className="mt-0.5 text-[11px] text-slate-500">AI 六维购买力画像 · 随会话实时更新</p>
|
||||
<p className="mt-0.5 text-[11px] text-slate-500">基于当前客户资料和会话信号</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn('mt-3 inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-semibold', levelTone)}>
|
||||
@@ -126,7 +126,7 @@ export function CustomerProfileRadar({
|
||||
<PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
|
||||
<Tooltip
|
||||
formatter={(value: number) => [`${value} / 100`, '画像指数']}
|
||||
labelFormatter={(label) => `${label} · AI 评估`}
|
||||
labelFormatter={(label) => `${label} · 参考值`}
|
||||
contentStyle={{
|
||||
borderRadius: 14,
|
||||
border: '1px solid #dbeafe',
|
||||
@@ -135,7 +135,7 @@ export function CustomerProfileRadar({
|
||||
}}
|
||||
/>
|
||||
<Radar
|
||||
name="客户画像光晕"
|
||||
name="客户画像"
|
||||
dataKey="score"
|
||||
isAnimationActive={false}
|
||||
stroke="#60a5fa"
|
||||
|
||||
@@ -10,9 +10,9 @@ import { toast, errorMessage } from '@/app/store/toast'
|
||||
import { languageName } from '@/config/languages'
|
||||
|
||||
const STYLE_LABELS = {
|
||||
stable: { title: '稳健回复', color: 'bg-blue-100 text-blue-700', icon: '🛡️' },
|
||||
active: { title: '积极促单回复', color: 'bg-emerald-100 text-emerald-700', icon: '🔥' },
|
||||
brief: { title: '简洁快速回复', color: 'bg-gray-100 text-gray-600', icon: '⚡' },
|
||||
stable: { title: '清晰可靠', color: 'bg-blue-100 text-blue-700', icon: '🛡️' },
|
||||
active: { title: '温暖主动', color: 'bg-violet-100 text-violet-700', icon: '💬' },
|
||||
brief: { title: '简洁直接', color: 'bg-gray-100 text-gray-600', icon: '⚡' },
|
||||
}
|
||||
|
||||
export function AiReplies({
|
||||
@@ -20,20 +20,22 @@ export function AiReplies({
|
||||
onAdopt,
|
||||
onEdit,
|
||||
onClose,
|
||||
targetLanguage = 'auto',
|
||||
}: {
|
||||
conversationId: string
|
||||
onAdopt: (content: string, translationCn: string) => void
|
||||
onAdopt: (content: string, translationCn: string, suggestionId: string) => void
|
||||
onEdit: (content: string, translationCn: string) => void
|
||||
onClose: () => void
|
||||
targetLanguage?: string
|
||||
}) {
|
||||
const [items, setItems] = useState<AiReplySuggestion[] | null>(null)
|
||||
useEffect(() => setItems(null), [conversationId])
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () => generateReplies(conversationId),
|
||||
mutationFn: () => generateReplies(conversationId, targetLanguage),
|
||||
onSuccess: (data) => {
|
||||
setItems(Array.isArray(data) ? data : [])
|
||||
toast.success('AI 回复建议已生成', '根据客户画像、知识库和历史成功回复综合生成')
|
||||
toast.success('回复建议已生成', '已参考客户资料、知识库和历史回复')
|
||||
},
|
||||
onError: (e) => toast.error(errorMessage(e)),
|
||||
})
|
||||
@@ -43,7 +45,7 @@ export function AiReplies({
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h4 className="flex items-center gap-2 text-xs font-semibold text-slate-700">
|
||||
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-50"><Sparkles className="h-3.5 w-3.5 text-primary" /></span>
|
||||
AI 智能回复
|
||||
回复建议
|
||||
</h4>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
@@ -61,7 +63,7 @@ export function AiReplies({
|
||||
'生成回复建议'
|
||||
)}
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon-sm" onClick={onClose} title="关闭 AI 智能回复">
|
||||
<Button variant="ghost" size="icon-sm" onClick={onClose} title="关闭回复建议">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@@ -98,7 +100,7 @@ export function AiReplies({
|
||||
<div>
|
||||
<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" />
|
||||
发送给客户 · English
|
||||
发送给客户 · {languageName(s.targetLang)}
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap text-sm leading-relaxed text-slate-800">{s.content}</p>
|
||||
</div>
|
||||
@@ -145,7 +147,7 @@ export function AiReplies({
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
采用
|
||||
</Button>
|
||||
@@ -169,7 +171,7 @@ export function AiReplies({
|
||||
|
||||
{!items && !mutation.isPending && (
|
||||
<div className="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2.5">
|
||||
<p className="text-xs text-slate-500">结合客户画像、知识库和历史沟通生成三种策略</p>
|
||||
<p className="text-xs text-slate-500">生成三种回复建议</p>
|
||||
<span className="hidden text-[10px] font-medium text-primary sm:inline">不会自动发送</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Shrink,
|
||||
Expand,
|
||||
ChevronDown,
|
||||
Languages,
|
||||
Reply,
|
||||
X,
|
||||
} from 'lucide-react'
|
||||
@@ -20,6 +21,7 @@ import { Switch } from '@/components/ui/switch'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { toast } from '@/app/store/toast'
|
||||
import type { ChannelType } from '@/types'
|
||||
import { LANGUAGES, languageName } from '@/config/languages'
|
||||
|
||||
const QUICK_PHRASES = [
|
||||
{ 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,
|
||||
onCancelReply,
|
||||
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>
|
||||
value?: string
|
||||
onChange?: (text: string) => void
|
||||
@@ -57,6 +62,9 @@ export function Composer({
|
||||
replyingTo?: { id: string; text: string } | null
|
||||
onCancelReply?: () => void
|
||||
channel?: ChannelType
|
||||
targetLanguage?: string
|
||||
detectedLanguage?: string
|
||||
onTargetLanguageChange?: (language: string) => void
|
||||
}) {
|
||||
const [internalText, setInternalText] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
@@ -75,7 +83,12 @@ export function Composer({
|
||||
setSending(true)
|
||||
try {
|
||||
await onMedia(Array.from(files), kind)
|
||||
toast.success(`${files.length} 个文件已发送到${channel === 'email' ? '客户邮箱' : ' Telegram'}`)
|
||||
const destination = channel === 'email'
|
||||
? '客户邮箱'
|
||||
: channel === 'whatsapp'
|
||||
? ' WhatsApp'
|
||||
: ' Telegram'
|
||||
toast.success(`${files.length} 个文件已发送到${destination}`)
|
||||
} catch {
|
||||
toast.error('媒体发送失败')
|
||||
} finally {
|
||||
@@ -87,7 +100,7 @@ export function Composer({
|
||||
if (!text.trim()) return
|
||||
setSending(true)
|
||||
try {
|
||||
await onSend(text, autoTranslate)
|
||||
await onSend(text, autoTranslate, targetLanguage)
|
||||
setText('')
|
||||
} finally {
|
||||
setSending(false)
|
||||
@@ -111,7 +124,7 @@ export function Composer({
|
||||
setAiLoading(true)
|
||||
try {
|
||||
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)
|
||||
toast.success('AI 处理完成')
|
||||
} catch {
|
||||
@@ -233,11 +246,31 @@ export function Composer({
|
||||
/>
|
||||
|
||||
<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">
|
||||
<Switch checked={autoTranslate} onCheckedChange={setAutoTranslate} />
|
||||
中文自动译为英文{channel === 'email' ? '邮件' : '发送'}
|
||||
双向翻译
|
||||
</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 && (
|
||||
<Badge variant="primary" className="animate-pulse">
|
||||
正在调用 AI…
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Brain, ChevronRight } from 'lucide-react'
|
||||
import type { Conversation, Customer, CustomerStage } from '@/types'
|
||||
import { Brain, ChevronRight, LoaderCircle } from 'lucide-react'
|
||||
import type { AiBackfillStatus, Conversation, Customer, CustomerStage } from '@/types'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
CustomerStageBadge,
|
||||
@@ -17,13 +17,15 @@ export function ConversationInsightBar({
|
||||
customer,
|
||||
conversation,
|
||||
onOpenProfile,
|
||||
aiBackfill,
|
||||
}: {
|
||||
customer: Customer
|
||||
conversation: Conversation
|
||||
onOpenProfile: () => void
|
||||
aiBackfill?: AiBackfillStatus
|
||||
}) {
|
||||
const stage = validStages.has(customer.stage) ? customer.stage : 'initial'
|
||||
const summary = customer.aiProfile?.summary || conversation.summary || 'AI 正在根据会话完善客户画像'
|
||||
const summary = customer.aiProfile?.summary || conversation.summary || '收到更多消息后将补充联系人画像'
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -36,24 +38,44 @@ export function ConversationInsightBar({
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<span className="hidden shrink-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-violet-600 sm:inline">
|
||||
AI 客户洞察
|
||||
对话洞察
|
||||
</span>
|
||||
<p className="truncate text-xs leading-5 text-slate-600">{summary}</p>
|
||||
</div>
|
||||
<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">
|
||||
意向 <IntentScoreBadge score={Number(customer.intentScore || 0)} />
|
||||
</span>
|
||||
{customer.aiProfile?.relationshipLabel && (
|
||||
<span className="rounded-full bg-indigo-50 px-2 py-1 text-[10px] font-medium text-indigo-700">
|
||||
{customer.aiProfile.relationshipLabel}
|
||||
</span>
|
||||
)}
|
||||
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
||||
<CustomerStageBadge stage={stage as CustomerStage} />
|
||||
<RiskLevelBadge level={customer.riskLevel || 'none'} />
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={onOpenProfile} title="打开客户画像">
|
||||
<span className="hidden lg:inline">客户画像</span>
|
||||
<Button variant="ghost" size="sm" onClick={onOpenProfile} title="打开联系人画像">
|
||||
<span className="hidden lg:inline">联系人画像</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<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>
|
||||
<SentimentBadge sentiment={customer.sentiment || 'neutral'} />
|
||||
<CustomerStageBadge stage={stage as CustomerStage} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import { Eraser, Mail, Pin, Plus, Search, Send, ShieldAlert, Trash2 } from 'lucide-react'
|
||||
import { Eraser, Mail, MessageCircle, Pin, Plus, Search, Send, ShieldAlert, Trash2 } from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { getTeam } from '@/services/api/org'
|
||||
import type { ConversationListItem } from '@/services/api/conversations'
|
||||
@@ -26,7 +26,7 @@ const FILTERS = [
|
||||
]
|
||||
|
||||
export function ConversationList({
|
||||
items,
|
||||
items = [],
|
||||
loading,
|
||||
activeId,
|
||||
onSelect,
|
||||
@@ -75,8 +75,8 @@ export function ConversationList({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
title="添加 Telegram 用户或群组"
|
||||
aria-label="添加 Telegram 用户或群组"
|
||||
title="添加联系人或群组"
|
||||
aria-label="添加联系人或群组"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white shadow-sm shadow-primary-200 transition hover:-translate-y-0.5 hover:bg-primary-700"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
@@ -96,6 +96,7 @@ export function ConversationList({
|
||||
{[
|
||||
{ value: '', label: '全部', icon: null },
|
||||
{ value: 'telegram', label: 'Telegram', icon: Send },
|
||||
{ value: 'whatsapp', label: 'WhatsApp', icon: MessageCircle },
|
||||
{ value: 'email', label: 'Email', icon: Mail },
|
||||
].map((item) => (
|
||||
<button
|
||||
@@ -153,9 +154,10 @@ export function ConversationList({
|
||||
const active = item.id === activeId
|
||||
const intent = intentLevelMeta(item.intentLevel)
|
||||
const isTelegramChannel = String(item.telegramChatType || '').toLowerCase() === 'channel'
|
||||
const supportsSwipeActions = item.channel === 'telegram' || item.channel === 'whatsapp'
|
||||
return (
|
||||
<div key={item.id} className="relative mb-0.5 overflow-hidden rounded-xl">
|
||||
{item.channel === 'telegram' && (
|
||||
{supportsSwipeActions && (
|
||||
<div
|
||||
data-testid="conversation-swipe-actions"
|
||||
aria-hidden={swipedId !== item.id && touchStart.current?.id !== item.id}
|
||||
@@ -189,8 +191,9 @@ export function ConversationList({
|
||||
data-conversation-id={item.id}
|
||||
data-channel={item.channel}
|
||||
data-telegram-chat-type={item.telegramChatType || ''}
|
||||
data-last-sender={item.lastMessage?.sender || ''}
|
||||
onTouchStart={(event) => {
|
||||
if (item.channel !== 'telegram') return
|
||||
if (!supportsSwipeActions) return
|
||||
const touch = event.touches[0]
|
||||
touchStart.current = { x: touch.clientX, y: touch.clientY, id: item.id }
|
||||
if (swipedId !== item.id) setDragOffset(0)
|
||||
|
||||
@@ -31,6 +31,7 @@ import { IntentScoreBadge, CustomerStageBadge, SentimentBadge, RiskLevelBadge }
|
||||
import { CUSTOMER_STAGES, NEXT_ACTIONS, countryMeta, INTENT_LEVELS } from '@/config/constants'
|
||||
import { toast, errorMessage } from '@/app/store/toast'
|
||||
import { cn } from '@/utils/cn'
|
||||
import { formatProductName } from '@/utils/format'
|
||||
import { CustomerProfileRadar } from '@/components/customer/CustomerProfileRadar'
|
||||
import { CustomerSemanticTag } from '@/components/customer/CustomerSemanticTag'
|
||||
|
||||
@@ -46,9 +47,17 @@ export function InsightPanel({
|
||||
const [analyzing, setAnalyzing] = useState(false)
|
||||
const [analysis, setAnalysis] = useState(customer.aiProfile.summary)
|
||||
const c = countryMeta(customer.country)
|
||||
const localTime = new Date(
|
||||
new Date().getTime() + new Date().getTimezoneOffset() * 60000 + c.tzOffset * 3600000,
|
||||
).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
const localTime = Number.isFinite(c.tzOffset)
|
||||
? new Date(
|
||||
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({
|
||||
mutationFn: (data: Partial<Customer>) => updateCustomer(customer.id, data),
|
||||
@@ -70,7 +79,7 @@ export function InsightPanel({
|
||||
conversationId: conversation.id,
|
||||
ownerId: user?.id || '',
|
||||
dueAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
|
||||
note: `由 AI 客户洞察建议创建：${title}`,
|
||||
note: `由客户洞察建议创建：${title}`,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] })
|
||||
@@ -84,7 +93,7 @@ export function InsightPanel({
|
||||
try {
|
||||
const result = await analyzeConversation(conversation.id)
|
||||
setAnalysis(result.summary)
|
||||
toast.success('AI 分析完成', `意向评分 ${result.intentScore} · ${INTENT_LEVELS.find(l => l.value === result.intentLevel)?.label}`)
|
||||
toast.success('会话分析完成', `意向评分 ${result.intentScore} · ${INTENT_LEVELS.find(l => l.value === result.intentLevel)?.label}`)
|
||||
} catch {
|
||||
toast.error('分析失败，请稍后重试')
|
||||
} finally { setAnalyzing(false) }
|
||||
@@ -114,11 +123,14 @@ export function InsightPanel({
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<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 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" />
|
||||
<span className="text-muted-foreground">当地时间：{localTime}</span>
|
||||
</div>
|
||||
</div>}
|
||||
{customer.email && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
@@ -140,8 +152,8 @@ export function InsightPanel({
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
{customer.products?.map((p) => (
|
||||
<Badge key={p} variant="primary">{p}</Badge>
|
||||
{customer.products?.map((p, index) => (
|
||||
<Badge key={`${formatProductName(p)}-${index}`} variant="primary">{formatProductName(p)}</Badge>
|
||||
))}
|
||||
{customer.tags?.map((t) => (
|
||||
<CustomerSemanticTag key={t} tag={t} />
|
||||
@@ -177,11 +189,56 @@ export function InsightPanel({
|
||||
{/* AI 分析 */}
|
||||
<div className="space-y-4 border-b border-slate-100 p-3">
|
||||
<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="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold tracking-tight text-slate-900">AI 洞察摘要</p>
|
||||
<p className="text-[11px] text-slate-400">基于完整对话实时更新</p>
|
||||
<p className="text-sm font-semibold tracking-tight text-slate-900">会话摘要</p>
|
||||
<p className="text-[11px] text-slate-400">根据已同步的会话内容生成</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={handleAnalyze} disabled={analyzing}>
|
||||
{analyzing ? <Spinner className="h-3 w-3" /> : '重新分析'}
|
||||
@@ -193,14 +250,15 @@ export function InsightPanel({
|
||||
<span className="ml-2 text-sm text-muted-foreground">正在分析会话上下文…</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mt-3 text-xs leading-6 text-slate-600">{analysis || 'AI 正在根据会话完善客户画像。'}</p>
|
||||
<p className="mt-3 text-xs leading-6 text-slate-600">{analysis || '收到更多消息后将补充联系人画像。'}</p>
|
||||
)}
|
||||
{/* AI 提取关键信息 */}
|
||||
{Object.values(customer.aiProfile || {}).some(Boolean) && (
|
||||
<div className="mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-4">
|
||||
{Object.entries({
|
||||
关系类型: customer.aiProfile.relationshipLabel,
|
||||
行业: customer.aiProfile.industry,
|
||||
采购角色: customer.aiProfile.purchasingRole,
|
||||
业务身份: customer.aiProfile.purchasingRole,
|
||||
询价数量: customer.aiProfile.inquiryQuantity,
|
||||
目标价格: customer.aiProfile.targetPrice,
|
||||
预算: customer.aiProfile.budget,
|
||||
@@ -240,7 +298,7 @@ export function InsightPanel({
|
||||
|
||||
{/* 推荐动作 */}
|
||||
<div className="p-4">
|
||||
<h4 className="text-xs font-semibold text-slate-500">AI 推荐下一步</h4>
|
||||
<h4 className="text-xs font-semibold text-slate-500">下一步建议</h4>
|
||||
<div className="mt-2 space-y-2">
|
||||
{customer.aiProfile.nextActions.map((a) => (
|
||||
<button
|
||||
|
||||
@@ -19,9 +19,12 @@ import {
|
||||
Download,
|
||||
FileText,
|
||||
LoaderCircle,
|
||||
SmilePlus,
|
||||
Trash2,
|
||||
Brain,
|
||||
} from 'lucide-react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import type { Message } from '@/types'
|
||||
import type { ChannelType, Message } from '@/types'
|
||||
import { cn } from '@/utils/cn'
|
||||
import { toast } from '@/app/store/toast'
|
||||
import { formatTime } from '@/utils/format'
|
||||
@@ -82,8 +85,12 @@ export function MessageBubble({
|
||||
onConvertToTask,
|
||||
onAddToKnowledge,
|
||||
onAddNote,
|
||||
onReact,
|
||||
onDelete,
|
||||
customerName,
|
||||
customerAvatar,
|
||||
channel,
|
||||
showIntent = true,
|
||||
}: {
|
||||
msg: Message
|
||||
viewMode: ViewMode
|
||||
@@ -92,33 +99,52 @@ export function MessageBubble({
|
||||
onConvertToTask: () => void
|
||||
onAddToKnowledge: () => void
|
||||
onAddNote: () => void
|
||||
onReact?: (emoji: string) => void
|
||||
onDelete?: () => void
|
||||
customerName?: string
|
||||
customerAvatar?: string
|
||||
channel?: ChannelType
|
||||
showIntent?: boolean
|
||||
}) {
|
||||
const [showActions, setShowActions] = useState(false)
|
||||
const [translationExpanded, setTranslationExpanded] = useState(false)
|
||||
const isMe = msg.sender === 'agent'
|
||||
const isSystem = msg.sender === 'system'
|
||||
const originalText = String(msg.originalText || '')
|
||||
const rawTranslation = String(msg.translatedText || '')
|
||||
const translationCorrupted =
|
||||
/(?:^|\n)\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:[\d.]+Z\s+(?:客户|坐席):/m.test(rawTranslation) ||
|
||||
rawTranslation.length > (msg.originalText.length <= 20 ? 160 : Math.max(500, msg.originalText.length * 8))
|
||||
rawTranslation.length > (originalText.length <= 20 ? 160 : Math.max(500, originalText.length * 8))
|
||||
const translatedText = translationCorrupted ? '' : rawTranslation
|
||||
const hasTranslation = translatedText && translatedText !== msg.originalText
|
||||
const hasTranslation = translatedText && translatedText !== originalText
|
||||
const outgoingChineseNote = isMe
|
||||
? String(
|
||||
msg.translationCn ||
|
||||
(hasTranslation && /[\u3400-\u9fff]/u.test(msg.originalText) ? msg.originalText : ''),
|
||||
(hasTranslation && /[\u3400-\u9fff]/u.test(originalText) ? originalText : ''),
|
||||
).trim()
|
||||
: ''
|
||||
const outgoingSentText = isMe && translatedText ? translatedText : msg.originalText
|
||||
const outgoingSentText = isMe && translatedText ? translatedText : originalText
|
||||
const longTranslation = translatedText.length > 260 || translatedText.split('\n').length > 6
|
||||
const hasKnownLanguage = Boolean(msg.originalLang && !['und', 'auto', 'unknown'].includes(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 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 hasProviderAttachment = Boolean(
|
||||
msg.telegramFileId
|
||||
|| (msg.whatsappMessageId && isMediaMessage),
|
||||
)
|
||||
const { data: attachment, isLoading: attachmentLoading, error: attachmentError } = useQuery({
|
||||
queryKey: ['message-attachment', msg.conversationId, msg.id, msg.telegramFileId],
|
||||
queryKey: ['message-attachment', msg.conversationId, msg.id, msg.telegramFileId, msg.whatsappMessageId],
|
||||
queryFn: () => getMessageAttachment(msg.conversationId, msg.id),
|
||||
enabled: Boolean(msg.telegramFileId),
|
||||
enabled: hasProviderAttachment,
|
||||
staleTime: Infinity,
|
||||
retry: 1,
|
||||
})
|
||||
@@ -126,7 +152,7 @@ export function MessageBubble({
|
||||
if (isSystem) {
|
||||
return (
|
||||
<div className="flex justify-center py-2">
|
||||
<span className="rounded-full bg-amber-50 px-3 py-1 text-xs text-amber-700">{msg.originalText}</span>
|
||||
<span className="rounded-full bg-amber-50 px-3 py-1 text-xs text-amber-700">{originalText}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -156,10 +182,18 @@ export function MessageBubble({
|
||||
)
|
||||
|
||||
const renderContent = () => {
|
||||
if (msg.isDeleted) {
|
||||
return (
|
||||
<p className="flex items-center gap-1.5 text-xs italic text-slate-400">
|
||||
<AlertCircle className="h-3.5 w-3.5" />
|
||||
该消息已撤回
|
||||
</p>
|
||||
)
|
||||
}
|
||||
if (msg.type !== 'text') {
|
||||
const labels = { image: '图片', audio: '语音', file: '文件', product: '产品卡片' }
|
||||
return msg.originalText ? (
|
||||
<p className="mb-2 whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">{msg.originalText}</p>
|
||||
return originalText ? (
|
||||
<p className="mb-2 whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">{originalText}</p>
|
||||
) : (
|
||||
<div className="mb-1 flex items-center gap-2 text-xs font-medium text-slate-500">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-primary-400" />
|
||||
@@ -167,8 +201,8 @@ export function MessageBubble({
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (!String(msg.originalText || '').trim()) {
|
||||
return <p className="text-xs text-slate-500">Telegram 服务通知</p>
|
||||
if (!originalText.trim()) {
|
||||
return <p className="text-xs text-slate-500">{providerName} 服务通知</p>
|
||||
}
|
||||
if (
|
||||
(viewMode === 'bilingual' || viewMode === 'translated') &&
|
||||
@@ -178,7 +212,7 @@ export function MessageBubble({
|
||||
) {
|
||||
return (
|
||||
<div className="space-y-2.5">
|
||||
<p className="whitespace-pre-wrap break-words text-sm leading-6">{msg.originalText}</p>
|
||||
<p className="whitespace-pre-wrap break-words text-sm leading-6">{originalText}</p>
|
||||
<div className="flex items-center gap-1.5 border-t border-border/60 pt-2 text-xs text-muted-foreground">
|
||||
<Languages className="h-3.5 w-3.5 text-primary" />
|
||||
{translationCorrupted
|
||||
@@ -196,7 +230,7 @@ export function MessageBubble({
|
||||
<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">
|
||||
<Globe className="h-3 w-3" />
|
||||
客户收到 · {translatedText ? '英文译文' : '原文'}
|
||||
客户收到 · {translatedText ? targetLanguage : '原文'}
|
||||
</span>
|
||||
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{outgoingSentText}</p>
|
||||
</div>
|
||||
@@ -239,12 +273,15 @@ export function MessageBubble({
|
||||
<span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
|
||||
{hasKnownLanguage ? `原文 · ${sourceLanguage}` : '原文'}
|
||||
</span>
|
||||
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{msg.originalText}</p>
|
||||
<p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{originalText}</p>
|
||||
</div>
|
||||
<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" />
|
||||
{isMe ? '发送内容 · 英文' : 'AI 译文 · 中文'}
|
||||
{isMe ? `发送内容 · ${targetLanguage}` : contextualTranslation ? 'AI 语境译文 · 中文' : 'AI 译文 · 中文'}
|
||||
</span>
|
||||
<div className="mt-1.5">{translationContent()}</div>
|
||||
</div>
|
||||
@@ -254,9 +291,12 @@ export function MessageBubble({
|
||||
if (viewMode === 'translated' && translatedText) {
|
||||
return (
|
||||
<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" />
|
||||
{isMe ? `${sourceLanguage} → 英文发送内容` : `${sourceLanguage} → 中文`}
|
||||
{isMe ? `${sourceLanguage} → ${targetLanguage}` : `${sourceLanguage} → 中文`}
|
||||
</span>
|
||||
<div className="mt-1.5">{translationContent(false)}</div>
|
||||
</div>
|
||||
@@ -270,7 +310,7 @@ export function MessageBubble({
|
||||
</span>
|
||||
)}
|
||||
<p className={cn('whitespace-pre-wrap break-words text-sm leading-6', hasKnownLanguage && 'mt-1.5')}>
|
||||
{msg.originalText}
|
||||
{originalText}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
@@ -294,12 +334,18 @@ export function MessageBubble({
|
||||
}
|
||||
|
||||
const moreActions = [
|
||||
{ key: 'copy', label: '复制', icon: Copy, onSelect: () => { navigator.clipboard.writeText(msg.originalText); toast.success('已复制') } },
|
||||
{ key: 'copy', label: '复制', icon: Copy, onSelect: () => { void navigator.clipboard.writeText(originalText); toast.success('已复制') } },
|
||||
{ key: 'reply', label: '引用回复', icon: Reply, onSelect: onQuote },
|
||||
...(channel === 'whatsapp' && onReact
|
||||
? [{ key: 'react', label: '👍 回应', icon: SmilePlus, onSelect: () => onReact('👍') }]
|
||||
: []),
|
||||
{ key: 'note', label: '添加内部备注', icon: StickyNote, onSelect: onAddNote },
|
||||
{ key: 'important', label: msg.isImportant ? '取消重要' : '标记重要', icon: Star, onSelect: onMarkImportant },
|
||||
{ key: 'task', label: '转为待办', icon: ListTodo, onSelect: onConvertToTask },
|
||||
{ key: 'knowledge', label: '添加到知识库', icon: BookOpen, onSelect: onAddToKnowledge },
|
||||
...(channel === 'whatsapp' && isMe && onDelete
|
||||
? [{ key: 'delete', label: '撤回消息', icon: Trash2, danger: true, onSelect: onDelete }]
|
||||
: []),
|
||||
]
|
||||
|
||||
return (
|
||||
@@ -315,7 +361,7 @@ export function MessageBubble({
|
||||
>
|
||||
{!isMe && (
|
||||
<Avatar
|
||||
name={customerName || msg.senderName || 'Telegram 用户'}
|
||||
name={customerName || msg.senderName || `${providerName} 用户`}
|
||||
src={customerAvatar}
|
||||
size="xs"
|
||||
className="order-1 mt-1"
|
||||
@@ -348,9 +394,34 @@ export function MessageBubble({
|
||||
</div>
|
||||
)}
|
||||
{renderContent()}
|
||||
{msg.telegramFileId && attachmentLoading && (
|
||||
{!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 && (
|
||||
<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" /> 正在读取 Telegram 文件…
|
||||
<LoaderCircle className="h-3.5 w-3.5 animate-spin" /> 正在读取 {providerName} 文件…
|
||||
</div>
|
||||
)}
|
||||
{attachment && msg.type === 'image' && (
|
||||
@@ -378,7 +449,7 @@ export function MessageBubble({
|
||||
<Download className="h-4 w-4 text-muted-foreground" />
|
||||
</a>
|
||||
)}
|
||||
{msg.telegramFileId && attachmentError && (
|
||||
{hasProviderAttachment && attachmentError && (
|
||||
<p className="mt-2 rounded-lg bg-red-50 px-2.5 py-1.5 text-xs text-red-600">文件暂时无法下载，请稍后重试</p>
|
||||
)}
|
||||
{msg.emailAttachments?.map((emailAttachment) => (
|
||||
@@ -389,11 +460,25 @@ export function MessageBubble({
|
||||
attachment={emailAttachment}
|
||||
/>
|
||||
))}
|
||||
{Boolean(msg.reactions?.length) && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{msg.reactions?.map((reaction, index) => (
|
||||
<span
|
||||
key={`${reaction.actor}-${reaction.emoji}-${index}`}
|
||||
title={reaction.fromMe ? '我' : reaction.actor}
|
||||
className="inline-flex min-w-7 items-center justify-center rounded-full border border-blue-200 bg-blue-50/90 px-2 py-0.5 text-sm shadow-sm"
|
||||
>
|
||||
{reaction.emoji}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 底栏：时间 + 状态 */}
|
||||
<div className={cn('mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground', isMe ? 'justify-end' : 'justify-start')}>
|
||||
<span>{formatTime(msg.createdAt)}</span>
|
||||
{msg.editedAt && !msg.isDeleted && <span>已编辑</span>}
|
||||
{isMe && statusIcon()}
|
||||
{msg.isImportant && <Star className="h-2.5 w-2.5 fill-amber-400 text-amber-400" />}
|
||||
{msg.internalNote && <StickyNote className="h-2.5 w-2.5 text-blue-500" />}
|
||||
|
||||
@@ -9,7 +9,7 @@ export function AppLayout() {
|
||||
const { mobileNavOpen, setMobileNavOpen } = useUiStore()
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
<div className="flex h-screen overflow-hidden bg-[#f7f9fc]">
|
||||
<GlobalRealtime />
|
||||
{/* 桌面端固定侧边栏 */}
|
||||
<div className="hidden shrink-0 lg:block">
|
||||
@@ -25,7 +25,7 @@ export function AppLayout() {
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<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 />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { useUiStore } from '@/app/store/ui'
|
||||
import { useAuthStore } from '@/app/store/auth'
|
||||
@@ -35,18 +35,16 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside
|
||||
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',
|
||||
sidebarCollapsed ? 'w-[68px]' : 'w-[228px]',
|
||||
'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-[236px]',
|
||||
)}
|
||||
>
|
||||
{/* Logo */}
|
||||
<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')}
|
||||
>
|
||||
<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">
|
||||
<Sparkles className="h-4.5 w-4.5 h-[18px] w-[18px]" />
|
||||
</span>
|
||||
<img src="/brand-mark.svg" alt="" className="h-9 w-9 shrink-0 rounded-xl shadow-sm shadow-primary-900/10" />
|
||||
{!sidebarCollapsed && (
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-[15px] font-semibold tracking-tight leading-tight">{t('app.name')}</p>
|
||||
@@ -56,7 +54,7 @@ export function Sidebar() {
|
||||
</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) => {
|
||||
const groupItems = items.filter((item) => item.group === group.key)
|
||||
if (!groupItems.length) return null
|
||||
@@ -76,10 +74,10 @@ export function Sidebar() {
|
||||
title={sidebarCollapsed ? t(item.labelKey as never) : undefined}
|
||||
className={({ isActive }) =>
|
||||
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
|
||||
? 'bg-primary-50/90 font-semibold text-primary-800 shadow-[inset_0_0_0_1px_rgba(37,99,235,.08)]'
|
||||
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
|
||||
? '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-950',
|
||||
sidebarCollapsed && 'justify-center px-0',
|
||||
)
|
||||
}
|
||||
@@ -96,8 +94,8 @@ export function Sidebar() {
|
||||
|
||||
{/* 底部：套餐与企业信息 */}
|
||||
{!sidebarCollapsed && (
|
||||
<div className="border-t border-border p-3">
|
||||
<div className="rounded-md bg-muted/60 p-3">
|
||||
<div className="border-t border-slate-100 p-3">
|
||||
<div className="rounded-[12px] border border-slate-200 bg-slate-50/80 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-muted-foreground">{t('sidebar.currentPlan')}</span>
|
||||
<span className="text-xs font-medium text-primary-700">{plan.name}</span>
|
||||
|
||||
@@ -62,10 +62,10 @@ export function Topbar() {
|
||||
}
|
||||
|
||||
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
|
||||
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)}
|
||||
aria-label="打开导航"
|
||||
>
|
||||
@@ -75,7 +75,7 @@ export function Topbar() {
|
||||
{/* 企业切换 */}
|
||||
<Dropdown
|
||||
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" />
|
||||
<span className="max-w-[180px] truncate">{tenant?.name ?? '—'}</span>
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
@@ -96,7 +96,7 @@ export function Topbar() {
|
||||
{/* 语言切换 */}
|
||||
<Dropdown
|
||||
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]" />
|
||||
</button>
|
||||
}
|
||||
@@ -118,7 +118,7 @@ export function Topbar() {
|
||||
|
||||
{/* 帮助 */}
|
||||
<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')}
|
||||
onClick={() => navigate('/help')}
|
||||
>
|
||||
@@ -128,7 +128,7 @@ export function Topbar() {
|
||||
{/* 通知 */}
|
||||
<Dropdown
|
||||
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]" />
|
||||
{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">
|
||||
@@ -172,7 +172,7 @@ export function Topbar() {
|
||||
{/* 用户菜单 */}
|
||||
<Dropdown
|
||||
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 />
|
||||
<span className="hidden text-start md:block">
|
||||
<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'
|
||||
|
||||
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: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary-700 active:bg-primary-800',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-border',
|
||||
outline: 'border border-input bg-card hover:bg-muted',
|
||||
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-slate-100 text-slate-700 hover:bg-slate-200',
|
||||
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',
|
||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-red-600',
|
||||
dangerOutline: 'border border-red-200 bg-card text-red-600 hover:bg-red-50',
|
||||
@@ -19,7 +19,7 @@ const buttonVariants = cva(
|
||||
size: {
|
||||
sm: 'h-8 px-3 text-xs',
|
||||
default: 'h-9 px-4',
|
||||
lg: 'h-10 px-5',
|
||||
lg: 'h-11 px-5',
|
||||
icon: 'h-9 w-9',
|
||||
'icon-sm': 'h-7 w-7',
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
|
||||
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
@@ -21,7 +21,7 @@ export function CardHeader({
|
||||
return (
|
||||
<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">
|
||||
{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>}
|
||||
{children}
|
||||
</div>
|
||||
@@ -31,7 +31,7 @@ export function CardHeader({
|
||||
}
|
||||
|
||||
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>) {
|
||||
|
||||
@@ -5,17 +5,20 @@ export function Switch({
|
||||
onCheckedChange,
|
||||
disabled,
|
||||
className,
|
||||
ariaLabel,
|
||||
}: {
|
||||
checked: boolean
|
||||
onCheckedChange?: (v: boolean) => void
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
ariaLabel?: string
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
aria-label={ariaLabel}
|
||||
disabled={disabled}
|
||||
onClick={() => onCheckedChange?.(!checked)}
|
||||
className={cn(
|
||||
|
||||
@@ -10,26 +10,26 @@ export function Table({ className, ...props }: HTMLAttributes<HTMLTableElement>)
|
||||
}
|
||||
|
||||
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>) {
|
||||
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>) {
|
||||
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>) {
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
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 {
|
||||
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: 'cs', name: '捷克语', nativeName: 'Čeština' },
|
||||
{ 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)
|
||||
|
||||
@@ -57,7 +57,7 @@ export const PRICING_PLANS: PricingPlan[] = [
|
||||
{
|
||||
key: 'pro',
|
||||
name: '专业版',
|
||||
tagline: '5—20 人团队的 AI 经营中枢',
|
||||
tagline: '多渠道客户沟通与团队协作',
|
||||
priceNote: '¥49,800/年',
|
||||
monthlyPrice: null,
|
||||
yearlyPrice: 49800,
|
||||
@@ -66,9 +66,9 @@ export const PRICING_PLANS: PricingPlan[] = [
|
||||
features: [
|
||||
'包含标准版全部能力',
|
||||
'客户情感分析与意图预测',
|
||||
'AI 智能回复建议（多策略）',
|
||||
'多策略回复建议',
|
||||
'风险预警与文化敏感检测',
|
||||
'老板经营看板',
|
||||
'业务数据看板',
|
||||
],
|
||||
limits: { members: 20, messagesPerMonth: 100000, translationsPerMonth: 200000, knowledgeStorageMb: 5120 },
|
||||
},
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@ export const ROLE_META: Record<RoleKey, { label: string; description: string; co
|
||||
admin: { label: '企业管理员', description: '管理企业、成员、权限、渠道、套餐与系统设置', color: 'bg-violet-100 text-violet-700' },
|
||||
manager: { label: '业务主管', description: '查看全部客户、团队数据、经营看板与客户分配', color: 'bg-blue-100 text-blue-700' },
|
||||
sales: { label: '外贸业务员', description: '查看分配给自己的客户、消息与跟进任务', color: 'bg-teal-100 text-teal-700' },
|
||||
service: { label: '客服人员', description: '处理跨渠道消息、翻译、AI回复与售后咨询', color: 'bg-amber-100 text-amber-700' },
|
||||
service: { label: '客服人员', description: '处理跨渠道消息、翻译、回复建议与售后咨询', color: 'bg-amber-100 text-amber-700' },
|
||||
viewer: { label: '只读成员', description: '仅可查看被授权的数据，不能编辑或发送消息', color: 'bg-gray-100 text-gray-600' },
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { PageLoading, ErrorState } from '@/components/ui/feedback'
|
||||
import { PageHeader } from '@/components/common/PageHeader'
|
||||
@@ -8,13 +9,20 @@ import { LiveDataBadge } from '@/components/common/LiveDataBadge'
|
||||
import { CountryFlag } from '@/components/common/CountryFlag'
|
||||
import { ChartCard, TrendChart, DonutChart, FunnelChart, RankBars, SimpleBarChart } from '@/components/charts'
|
||||
import { getAnalytics } from '@/services/api/org'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import { Activity, BadgePercent, TrendingUp, Users, Zap, Timer, AlertTriangle, Target } from 'lucide-react'
|
||||
import { Activity, BadgePercent, Users, Zap, 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() {
|
||||
const [period, setPeriod] = useState<(typeof PERIOD_OPTIONS)[number]['value']>('30d')
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ['analytics'],
|
||||
queryFn: () => getAnalytics(),
|
||||
queryKey: ['analytics', period],
|
||||
queryFn: () => getAnalytics({ period }),
|
||||
})
|
||||
|
||||
if (isLoading) return <PageLoading />
|
||||
@@ -23,21 +31,35 @@ export function AnalyticsPage() {
|
||||
const k = data.kpis
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="page-shell">
|
||||
<PageHeader
|
||||
title="数据分析中心"
|
||||
description="企业经营数据全景 · 基于当前企业实时数据"
|
||||
actions={<LiveDataBadge />}
|
||||
extra={
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{['today', '7d', '30d', 'quarter'].map((p) => (
|
||||
<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>
|
||||
))}
|
||||
title="业务分析"
|
||||
description="从客户获取、沟通效率到成交转化，查看完整经营链路"
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<LiveDataBadge />
|
||||
<div className="flex rounded-[10px] border border-slate-200 bg-white p-1 shadow-sm">
|
||||
{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 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.validInquiries.value} delta={k.validInquiries.delta} icon={Activity} />
|
||||
<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} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<ChartCard title="客户增长趋势" height={260}><TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} /></ChartCard>
|
||||
<ChartCard title="各渠道询盘数量" height={260}><SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" /></ChartCard>
|
||||
<ChartCard title="客户国家/地区分布" height={260}><DonutChart data={data.countryDistribution} /></ChartCard>
|
||||
<ChartCard title="客户阶段转化漏斗" height={260}><FunnelChart data={data.funnel} /></ChartCard>
|
||||
<ChartCard title="意向分数分布" height={260}><DonutChart data={data.intentDistribution} nameKey="range" /></ChartCard>
|
||||
<ChartCard title="产品关注度排行" height={260}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
|
||||
<ChartCard title="团队回复效率排行" height={240}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
|
||||
<ChartCard title="团队客户转化排行" height={240}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
|
||||
</div>
|
||||
<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-12">
|
||||
<ChartCard className="xl:col-span-7" title="客户增长趋势" description="所选周期内的新增客户变化" height={290}>
|
||||
<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>
|
||||
|
||||
{/* 老板看板 */}
|
||||
<h2 className="mt-6 mb-3 text-lg font-semibold">老板看板 <LiveDataBadge className="align-middle" /></h2>
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<ChartCard title="产品关注度排行" height={250}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
+107
-167
@@ -1,9 +1,9 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from '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 { useAuthStore } from '@/app/store/auth'
|
||||
import { useI18n } from '@/i18n'
|
||||
@@ -11,210 +11,150 @@ import { toast, errorMessage } from '@/app/store/toast'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input, Field } from '@/components/ui/input'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { Tabs } from '@/components/ui/tabs'
|
||||
import { Dialog } from '@/components/ui/dialog'
|
||||
import { UI_LOCALES, type UiLocale } from '@/config/languages'
|
||||
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({
|
||||
account: z.string().min(4, '请输入正确的手机号或邮箱'),
|
||||
password: z.string().optional(),
|
||||
code: z.string().optional(),
|
||||
password: z.string().min(1, '请输入密码'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
export function LoginPage() {
|
||||
const { t, locale, setLocale } = useI18n()
|
||||
const { locale, setLocale } = useI18n()
|
||||
const navigate = useNavigate()
|
||||
const setSession = useAuthStore((s) => s.setSession)
|
||||
const [mode, setMode] = useState<'code' | 'password'>('password')
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const setSession = useAuthStore((state) => state.setSession)
|
||||
const [remember, setRemember] = useState(true)
|
||||
const [agreed, setAgreed] = useState(true)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [codeSent, setCodeSent] = useState(0)
|
||||
const [agreementOpen, setAgreementOpen] = useState<'privacy' | 'terms' | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { account: '', password: '', code: '' } })
|
||||
} = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { account: '', password: '' },
|
||||
})
|
||||
|
||||
const doLogin = async (values: FormValues) => {
|
||||
useEffect(() => {
|
||||
if (searchParams.get('reason') !== 'session-expired') return
|
||||
toast.warning('登录状态已过期，请重新登录')
|
||||
setSearchParams({}, { replace: true })
|
||||
}, [searchParams, setSearchParams])
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
if (!agreed) {
|
||||
toast.warning('请先勾选并同意《隐私政策》和《服务协议》')
|
||||
return
|
||||
}
|
||||
if (mode === 'password' && !values.password) {
|
||||
toast.warning('请输入密码')
|
||||
return
|
||||
}
|
||||
if (mode === 'code' && (values.code ?? '').length !== 6) {
|
||||
toast.warning('请输入6位验证码')
|
||||
toast.warning('请先阅读并同意隐私政策和服务协议')
|
||||
return
|
||||
}
|
||||
try {
|
||||
setLoading(true)
|
||||
const session = await login({ ...values, mode, remember })
|
||||
const session = await login({ ...values, mode: 'password', remember })
|
||||
setSession(session)
|
||||
toast.success(`欢迎回来，${session.user.name}`)
|
||||
navigate('/dashboard')
|
||||
} catch (e) {
|
||||
toast.error(errorMessage(e))
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const sendCode = () => {
|
||||
setCodeSent(60)
|
||||
const timer = setInterval(() => {
|
||||
setCodeSent((s) => {
|
||||
if (s <= 1) clearInterval(timer)
|
||||
return s - 1
|
||||
})
|
||||
}, 1000)
|
||||
toast.success('验证码已发送')
|
||||
}
|
||||
const localeMenu = (
|
||||
<Dropdown
|
||||
trigger={(
|
||||
<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">
|
||||
<Globe className="h-3.5 w-3.5" />
|
||||
{UI_LOCALES.find((item) => item.code === locale)?.nativeName}
|
||||
</button>
|
||||
)}
|
||||
items={UI_LOCALES.map((item) => ({
|
||||
key: item.code,
|
||||
label: item.nativeName,
|
||||
onSelect: () => setLocale(item.code as UiLocale),
|
||||
}))}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-background">
|
||||
{/* 品牌区 */}
|
||||
<div className="hidden w-[46%] flex-col justify-between bg-primary-900 p-10 text-primary-50 lg:flex">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
<AuthShell topAction={localeMenu}>
|
||||
<div className="mb-8">
|
||||
<p className="text-xs font-semibold tracking-[0.12em] text-blue-600">欢迎回来</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-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>
|
||||
<div>
|
||||
<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: 'AI 翻译与行业术语，跨语种沟通专业自然' },
|
||||
{ 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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 表单区 */}
|
||||
<div className="flex flex-1 items-center justify-center p-6">
|
||||
<div className="w-full max-w-[400px]">
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<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">
|
||||
<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">
|
||||
<Dialog
|
||||
open={Boolean(agreementOpen)}
|
||||
onOpenChange={() => setAgreementOpen(null)}
|
||||
title={agreementOpen === 'privacy' ? '隐私政策' : '服务协议'}
|
||||
>
|
||||
<div className="space-y-3 text-sm leading-7 text-slate-600">
|
||||
<p>使用本服务前，请阅读并确认以下数据处理与服务条款。</p>
|
||||
<p>1. 我们仅收集为您提供跨境沟通与客户管理服务所必需的信息，包括账号信息、企业信息与您主动录入的客户数据。</p>
|
||||
<p>2. 您的会话数据采用全链路加密存储，未经您授权，我们不会向任何第三方披露。</p>
|
||||
<p>3. 您可以随时导出或删除您的数据；企业注销后，相关数据将在 30 天内完成清理。</p>
|
||||
<p>4. 使用 AI 功能时，相关内容仅用于为您生成翻译与回复建议，不会用于其他用途。</p>
|
||||
<p>我们仅处理提供跨境沟通、客户管理和团队协作所必需的数据。</p>
|
||||
<p>使用翻译与回复建议时，相关内容会发送至企业已配置的模型服务商处理。</p>
|
||||
<p>数据导出、删除和账号注销按照正式发布的政策与协议执行。</p>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</AuthShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Sparkles } from 'lucide-react'
|
||||
import { register as registerApi } from '@/services/api/auth'
|
||||
import { useAuthStore } from '@/app/store/auth'
|
||||
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 { Select } from '@/components/ui/select'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { AuthShell } from '@/components/auth/AuthShell'
|
||||
import { INDUSTRIES } from '@/config/constants'
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().min(2, '请输入您的姓名'),
|
||||
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, '请输入企业名称'),
|
||||
industry: z.string().min(1, '请选择所属行业'),
|
||||
teamSize: z.string().min(1, '请选择团队规模'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
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() {
|
||||
const navigate = useNavigate()
|
||||
const setSession = useAuthStore((s) => s.setSession)
|
||||
const setSession = useAuthStore((state) => state.setSession)
|
||||
const [agreed, setAgreed] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
@@ -43,77 +43,74 @@ export function RegisterPage() {
|
||||
|
||||
const onSubmit = async (values: FormValues) => {
|
||||
if (!agreed) {
|
||||
toast.warning('请先同意《隐私政策》和《服务协议》')
|
||||
toast.warning('请先同意隐私政策和服务协议')
|
||||
return
|
||||
}
|
||||
try {
|
||||
setLoading(true)
|
||||
const session = await registerApi(values)
|
||||
setSession(session)
|
||||
toast.success('企业创建成功', '接下来请完成企业初始化配置')
|
||||
navigate('/channels?setup=telegram')
|
||||
} catch (e) {
|
||||
toast.error(errorMessage(e))
|
||||
navigate('/channels?setup=choose')
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-6">
|
||||
<div className="w-full max-w-[440px]">
|
||||
<div className="mb-8 flex items-center gap-2.5">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-white">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-base font-semibold">灵犀跨境</p>
|
||||
<p className="text-xs text-muted-foreground">注册并创建您的企业</p>
|
||||
</div>
|
||||
</div>
|
||||
<AuthShell
|
||||
heading="从第一条消息开始，建立清晰的客户关系。"
|
||||
description="创建企业工作台后，可按需连接 Telegram、WhatsApp 或企业邮箱，并邀请团队成员协作。"
|
||||
topAction={(
|
||||
<p className="text-xs text-slate-500">
|
||||
已有账号？ <Link to="/login" className="font-medium text-blue-600 hover:text-blue-700">登录</Link>
|
||||
</p>
|
||||
)}
|
||||
>
|
||||
<div className="mb-7">
|
||||
<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}>
|
||||
<Input placeholder="您的姓名" {...register('name')} />
|
||||
<Input className={fieldClass} placeholder="您的姓名" autoComplete="name" {...register('name')} />
|
||||
</Field>
|
||||
<Field label="手机号或邮箱" required error={errors.account?.message}>
|
||||
<Input placeholder="用于登录与接收通知" {...register('account')} />
|
||||
<Input className={fieldClass} placeholder="用于登录" autoComplete="username" {...register('account')} />
|
||||
</Field>
|
||||
<Field label="设置密码" required error={errors.password?.message} hint="8—32位，建议包含字母与数字">
|
||||
<Input type="password" placeholder="请设置登录密码" {...register('password')} />
|
||||
</div>
|
||||
<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 label="企业名称" required error={errors.company?.message}>
|
||||
<Input placeholder="如：徐州欧汇科技有限公司" {...register('company')} />
|
||||
<Field label="团队规模" required error={errors.teamSize?.message}>
|
||||
<Select placeholder="请选择" options={TEAM_SIZES.map((item) => ({ value: item, label: item }))} {...register('teamSize')} />
|
||||
</Field>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<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>
|
||||
|
||||
<div className="pt-1">
|
||||
<Checkbox
|
||||
checked={agreed}
|
||||
onCheckedChange={setAgreed}
|
||||
label="我已阅读并同意《隐私政策》和《服务协议》"
|
||||
/>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={agreed}
|
||||
onCheckedChange={setAgreed}
|
||||
label="我已阅读并同意《隐私政策》和《服务协议》"
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full" size="lg" loading={loading}>
|
||||
创建企业并开始使用
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
已有账号？{' '}
|
||||
<Link to="/login" className="font-medium text-primary hover:underline">
|
||||
直接登录
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</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-[11px] leading-5 text-slate-400">
|
||||
注册后先选择需要接入的渠道，也可以暂时跳过。
|
||||
</p>
|
||||
</form>
|
||||
</AuthShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ export function BillingPage() {
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<PageHeader title="套餐与账单" description="通过 Stripe Checkout 管理真实订阅与支付" />
|
||||
<PageHeader title="套餐与账单" description="管理套餐、订阅和支付记录" />
|
||||
|
||||
{info && (
|
||||
<Card className="mb-4 p-4">
|
||||
|
||||
@@ -1,20 +1,23 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
Activity,
|
||||
ArrowUpRight,
|
||||
AlertTriangle,
|
||||
Cable,
|
||||
CheckCircle2,
|
||||
History,
|
||||
Mail,
|
||||
MessageCircle,
|
||||
Plus,
|
||||
MessageSquareText,
|
||||
Pause,
|
||||
Play,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Smartphone,
|
||||
Star,
|
||||
Trash2,
|
||||
Workflow,
|
||||
} from 'lucide-react'
|
||||
@@ -34,7 +37,8 @@ import { ChannelIcon } from '@/components/common/ChannelIcon'
|
||||
import {
|
||||
getChannels, testChannel, updateChannel, deleteChannel, getChannelLogs,
|
||||
connectEmailChannel, startTelegramLogin, submitTelegramCode, submitTelegramPassword,
|
||||
getTelegramLoginState, syncTelegramChannel,
|
||||
getTelegramLoginState, syncChannel, startWhatsAppLogin, getWhatsAppLoginState,
|
||||
setDefaultChannel,
|
||||
} from '@/services/api/channels'
|
||||
import { CHANNEL_META } from '@/config/constants'
|
||||
import { formatRelative } from '@/utils/format'
|
||||
@@ -60,13 +64,21 @@ export function ChannelsPage() {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const queryClient = useQueryClient()
|
||||
const { data: channels } = useQuery({ queryKey: ['channels'], queryFn: getChannels })
|
||||
const { data: channels } = useQuery({
|
||||
queryKey: ['channels'],
|
||||
queryFn: getChannels,
|
||||
refetchInterval: 15_000,
|
||||
})
|
||||
const [wizard, setWizard] = useState<{ open: boolean; type: ChannelType | null; step: number }>({ open: false, type: null, step: 0 })
|
||||
const [telegramAccount, setTelegramAccount] = useState('')
|
||||
const [telegramCode, setTelegramCode] = useState('')
|
||||
const [telegramPassword, setTelegramPassword] = useState('')
|
||||
const [loginChannelId, setLoginChannelId] = useState('')
|
||||
const [authState, setAuthState] = useState('')
|
||||
const [whatsappAccount, setWhatsAppAccount] = useState('')
|
||||
const [whatsappChannelId, setWhatsAppChannelId] = useState('')
|
||||
const [whatsappPairingCode, setWhatsAppPairingCode] = useState('')
|
||||
const [whatsappQr, setWhatsAppQr] = useState('')
|
||||
const [connecting, setConnecting] = useState(false)
|
||||
const [emailPreset, setEmailPreset] = useState<keyof typeof EMAIL_PRESETS>('custom')
|
||||
const [emailForm, setEmailForm] = useState({
|
||||
@@ -85,7 +97,6 @@ export function ChannelsPage() {
|
||||
const [logDrawer, setLogDrawer] = useState<string | null>(null)
|
||||
const [settingsDrawer, setSettingsDrawer] = useState<ChannelConnection | null>(null)
|
||||
const [logItems, setLogItems] = useState<ChannelSyncLog[]>([])
|
||||
const setupOpenedRef = useRef(false)
|
||||
|
||||
const loadLogs = async (chId: string) => {
|
||||
const logs = await getChannelLogs(chId)
|
||||
@@ -122,7 +133,7 @@ export function ChannelsPage() {
|
||||
const completeTelegramBinding = async (channelId: string) => {
|
||||
let syncSummary = ''
|
||||
try {
|
||||
const result = await syncTelegramChannel(channelId)
|
||||
const result = await syncChannel(channelId)
|
||||
syncSummary = `，已同步 ${result.chats} 个会话和 ${result.messages} 条消息`
|
||||
} catch (error) {
|
||||
syncSummary = `；账号已连接，但首次同步失败：${errorMessage(error)}`
|
||||
@@ -155,15 +166,48 @@ export function ChannelsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!channels || setupOpenedRef.current || searchParams.get('setup') !== 'telegram') return
|
||||
setupOpenedRef.current = true
|
||||
const telegram = channels.find((item) => item.type === 'telegram')
|
||||
void openTelegramWizard(telegram)
|
||||
const openWhatsAppWizard = async (channel?: ChannelConnection) => {
|
||||
setWhatsAppAccount(channel?.account || '')
|
||||
setWhatsAppChannelId(channel && channel.id !== 'whatsapp-available' ? channel.id : '')
|
||||
setWhatsAppPairingCode(channel?.pairingCode || '')
|
||||
setWhatsAppQr(channel?.qrDataUrl || '')
|
||||
setWizard({ open: true, type: 'whatsapp', step: channel?.pairingCode ? 1 : 0 })
|
||||
if (!channel || channel.id === 'whatsapp-available') return
|
||||
setConnecting(true)
|
||||
try {
|
||||
const current = await getWhatsAppLoginState(channel.id)
|
||||
if (current.status === 'connected') {
|
||||
await syncChannel(channel.id, { full: true })
|
||||
toast.success('WhatsApp 已连接并完成首次会话同步')
|
||||
setWizard({ open: false, type: null, step: 0 })
|
||||
await queryClient.invalidateQueries()
|
||||
} else {
|
||||
const restarted = await startWhatsAppLogin(channel.account || '')
|
||||
setWhatsAppChannelId(restarted.id)
|
||||
setWhatsAppPairingCode(restarted.pairingCode || '')
|
||||
setWhatsAppQr(restarted.qrDataUrl || '')
|
||||
setWizard({ open: true, type: 'whatsapp', step: 1 })
|
||||
toast.success('已生成新的配对码，请在手机 WhatsApp 中完成关联设备')
|
||||
await queryClient.invalidateQueries({ queryKey: ['channels'] })
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
} finally {
|
||||
setConnecting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const openChannelWizard = (type: 'telegram' | 'whatsapp' | 'email', channel?: ChannelConnection) => {
|
||||
setSearchParams({}, { replace: true })
|
||||
// 新注册后的 setup 参数只消费一次，避免查询刷新时重复打开向导。
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [channels, searchParams, setSearchParams])
|
||||
if (type === 'telegram') {
|
||||
void openTelegramWizard(channel)
|
||||
} else if (type === 'whatsapp') {
|
||||
void openWhatsAppWizard(channel)
|
||||
} else {
|
||||
applyEmailPreset('custom')
|
||||
setWizard({ open: true, type: 'email', step: 0 })
|
||||
}
|
||||
}
|
||||
|
||||
const applyEmailPreset = (value: keyof typeof EMAIL_PRESETS) => {
|
||||
setEmailPreset(value)
|
||||
@@ -180,8 +224,7 @@ export function ChannelsPage() {
|
||||
}
|
||||
|
||||
const connectedCount = list.filter((channel) => channel.status === 'connected').length
|
||||
const telegramChannel = list.find((channel) => channel.type === 'telegram')
|
||||
const telegramConnected = telegramChannel?.status === 'connected'
|
||||
const setupChoice = searchParams.get('setup') === 'choose'
|
||||
const todayMessages = list.reduce((total, channel) => total + Number(channel.todayMessages || 0), 0)
|
||||
const latestSync = list
|
||||
.map((channel) => channel.lastSyncAt)
|
||||
@@ -190,21 +233,20 @@ export function ChannelsPage() {
|
||||
.at(-1)
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[1480px] p-4 md:p-7">
|
||||
<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">
|
||||
<div className="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full bg-sky-200/25 blur-3xl" />
|
||||
<div className="page-shell">
|
||||
<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-primary-100/55 blur-3xl" />
|
||||
<div className="relative flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
|
||||
<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="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>
|
||||
Unified communication hub
|
||||
渠道连接
|
||||
</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">
|
||||
将 Telegram 即时消息与企业邮箱汇入同一个客户工作台，统一翻译、画像、分配和跟进。
|
||||
在一个工作台管理 WhatsApp、Telegram 与企业邮箱消息。
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 sm:min-w-[460px]">
|
||||
@@ -213,7 +255,7 @@ export function ChannelsPage() {
|
||||
{ label: '今日消息', value: String(todayMessages), icon: MessageSquareText },
|
||||
{ label: '最近同步', value: latestSync ? formatRelative(latestSync) : '等待首次同步', icon: Activity },
|
||||
].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" />
|
||||
<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>
|
||||
@@ -228,65 +270,87 @@ export function ChannelsPage() {
|
||||
description="连接状态、同步进度与安全设置"
|
||||
/>
|
||||
|
||||
{!telegramConnected && (
|
||||
{setupChoice && (
|
||||
<Card
|
||||
data-testid="telegram-onboarding"
|
||||
data-testid="channel-onboarding"
|
||||
className="mb-5 overflow-hidden border-primary-200/80 bg-gradient-to-r from-primary-50/90 via-white to-sky-50 shadow-[0_16px_45px_rgba(37,99,235,.10)]"
|
||||
>
|
||||
<div className="grid gap-5 p-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:p-6">
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="primary">首次配置 · 约 2 分钟</Badge>
|
||||
<span className="text-xs font-medium text-slate-500">使用你自己的 Telegram 工作账号</span>
|
||||
</div>
|
||||
<h2 className="mt-3 text-lg font-bold tracking-tight text-slate-950">先绑定 Telegram，开始接收真实客户消息</h2>
|
||||
<p className="mt-1.5 max-w-3xl text-sm leading-6 text-slate-600">
|
||||
输入国际格式手机号，依次完成 Telegram 验证码和可选的二步密码。授权成功后系统会自动注册实时 Webhook，并首次同步历史会话。
|
||||
</p>
|
||||
<div className="mt-4 grid gap-2 sm:grid-cols-3">
|
||||
{[
|
||||
{ icon: Smartphone, step: '01', title: '验证手机号', text: '例如 +8613800138000' },
|
||||
{ icon: ShieldCheck, step: '02', title: '完成安全验证', text: '验证码与二步密码' },
|
||||
{ icon: RefreshCw, step: '03', title: '自动同步消息', text: '历史会话与实时消息' },
|
||||
].map((item) => (
|
||||
<div key={item.step} className="flex items-center gap-3 rounded-xl border border-white bg-white/80 px-3 py-2.5 shadow-sm">
|
||||
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary">
|
||||
<item.icon className="h-4 w-4" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-semibold text-slate-800">{item.step} · {item.title}</p>
|
||||
<p className="mt-0.5 truncate text-[10px] text-slate-400">{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-5 lg:p-6">
|
||||
<Badge variant="primary">企业创建成功 · 渠道可稍后配置</Badge>
|
||||
<h2 className="mt-3 text-xl font-bold tracking-tight text-slate-950">选择第一个客户沟通渠道</h2>
|
||||
<p className="mt-1.5 text-sm leading-6 text-slate-600">
|
||||
不强制绑定 Telegram。你可以连接 WhatsApp、Telegram 或企业邮箱，也可以先进入系统，之后再添加多个账号。
|
||||
</p>
|
||||
<div className="mt-5 grid gap-3 md:grid-cols-3">
|
||||
{[
|
||||
{ type: 'telegram' as const, icon: Cable, title: 'Telegram', text: '手机号、验证码与可选二步密码' },
|
||||
{ type: 'whatsapp' as const, icon: MessageCircle, title: 'WhatsApp', text: '普通账号通过关联设备配对' },
|
||||
{ type: 'email' as const, icon: Mail, title: '企业邮箱', text: 'IMAP 收信与 SMTP 发信' },
|
||||
].map((item) => (
|
||||
<button
|
||||
type="button"
|
||||
key={item.type}
|
||||
data-testid={`choose-${item.type}`}
|
||||
onClick={() => openChannelWizard(item.type)}
|
||||
className="group rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-primary-300 hover:shadow-lg"
|
||||
>
|
||||
<span className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 text-primary transition group-hover:bg-primary group-hover:text-white">
|
||||
<item.icon className="h-5 w-5" />
|
||||
</span>
|
||||
<p className="mt-3 text-sm font-bold text-slate-900">{item.title}</p>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500">{item.text}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<Button variant="ghost" onClick={() => setSearchParams({}, { replace: true })}>
|
||||
暂不配置，先进入系统
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full shadow-lg shadow-primary/20 lg:w-auto"
|
||||
loading={connecting}
|
||||
onClick={() => void openTelegramWizard(telegramChannel)}
|
||||
>
|
||||
<Cable className="h-4 w-4" />
|
||||
{telegramChannel && telegramChannel.id !== 'telegram-available' ? '继续 Telegram 授权' : '开始绑定 Telegram'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<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>
|
||||
<p className="text-sm font-semibold text-slate-900">连接更多工作账号</p>
|
||||
<p className="mt-0.5 text-xs text-slate-500">每种渠道可绑定多个账号，并指定一个默认账号用于发起新会话。</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button size="sm" variant="outline" onClick={() => openChannelWizard('telegram')}>
|
||||
<Plus className="h-3.5 w-3.5" />Telegram
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => openChannelWizard('whatsapp')}>
|
||||
<Plus className="h-3.5 w-3.5" />WhatsApp
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => openChannelWizard('email')}>
|
||||
<Plus className="h-3.5 w-3.5" />企业邮箱
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{list.map((ch) => {
|
||||
const meta = CHANNEL_META[ch.type]
|
||||
const st = STATUS_MAP[ch.status]
|
||||
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)]">
|
||||
<div className={ch.type === 'telegram' ? 'h-1 bg-gradient-to-r from-sky-400 to-cyan-300' : 'h-1 bg-gradient-to-r from-slate-500 to-slate-300'} />
|
||||
<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={
|
||||
ch.type === 'telegram'
|
||||
? 'h-[3px] bg-primary-500'
|
||||
: ch.type === 'whatsapp'
|
||||
? 'h-[3px] bg-sky-500'
|
||||
: 'h-[3px] bg-slate-500'
|
||||
} />
|
||||
<div className="p-5">
|
||||
<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" />
|
||||
</div>
|
||||
<Badge className={st.color}>{st.label}</Badge>
|
||||
<div className="flex flex-wrap justify-end gap-1.5">
|
||||
{ch.isDefault && <Badge variant="primary"><Star className="mr-1 h-3 w-3 fill-current" />默认账号</Badge>}
|
||||
<Badge className={st.color}>{st.label}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<p className="text-base font-semibold tracking-tight text-slate-950">{meta.name}</p>
|
||||
@@ -300,8 +364,14 @@ export function ChannelsPage() {
|
||||
<p className="mt-0.5 text-sm font-semibold text-slate-800">{Number(ch.todayMessages || 0)} 条</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-slate-50 px-3 py-2.5">
|
||||
<p className="text-[10px] font-medium text-slate-400">同步状态</p>
|
||||
<p className="mt-0.5 truncate text-sm font-semibold text-slate-800">{ch.lastSyncAt ? formatRelative(ch.lastSyncAt) : '等待同步'}</p>
|
||||
<p className="text-[10px] font-medium text-slate-400">消息连接</p>
|
||||
<p className="mt-0.5 truncate text-sm font-semibold text-slate-800">
|
||||
{ch.status === 'connected'
|
||||
? '实时同步中'
|
||||
: ch.lastSyncAt
|
||||
? formatRelative(ch.lastSyncAt)
|
||||
: '等待连接'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
@@ -319,31 +389,33 @@ export function ChannelsPage() {
|
||||
<div className="mt-5 flex flex-wrap items-center gap-1 border-t border-slate-100 pt-4">
|
||||
{ch.status === 'connected' ? (
|
||||
<>
|
||||
<Button size="sm" variant="outline" onClick={async () => {
|
||||
try {
|
||||
const result = await syncTelegramChannel(ch.id)
|
||||
toast.success(`同步完成：${result.chats} 个会话，${result.messages} 条新消息`)
|
||||
queryClient.invalidateQueries()
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
}
|
||||
}}><RefreshCw className="h-3 w-3" />立即同步</Button>
|
||||
<Button size="sm" variant="outline" onClick={async () => {
|
||||
try {
|
||||
await updateChannel(ch.id, { status: 'paused' })
|
||||
toast.success('渠道已暂停，实时 Webhook 已停用')
|
||||
toast.success('渠道已暂停接收实时消息')
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] })
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
}
|
||||
}}><Pause className="h-3 w-3" />暂停</Button>
|
||||
{!ch.isDefault && (
|
||||
<Button size="sm" variant="outline" onClick={async () => {
|
||||
try {
|
||||
await setDefaultChannel(ch.id)
|
||||
toast.success(`${ch.account || meta.name} 已设为默认账号`)
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] })
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
}
|
||||
}}><Star className="h-3 w-3" />设为默认</Button>
|
||||
)}
|
||||
<Button size="sm" variant="outline" onClick={() => delMut.mutate(ch.id)}><Trash2 className="h-3 w-3" /></Button>
|
||||
</>
|
||||
) : ch.status === 'paused' ? (
|
||||
<Button size="sm" variant="outline" onClick={async () => {
|
||||
try {
|
||||
await updateChannel(ch.id, { status: 'connected' })
|
||||
toast.success('渠道已恢复，实时 Webhook 已启用')
|
||||
toast.success('渠道已恢复接收实时消息')
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] })
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
@@ -357,6 +429,8 @@ export function ChannelsPage() {
|
||||
if (ch.type === 'email') {
|
||||
applyEmailPreset('custom')
|
||||
setWizard({ open: true, type: ch.type, step: 0 })
|
||||
} else if (ch.type === 'whatsapp') {
|
||||
void openWhatsAppWizard(ch)
|
||||
} else {
|
||||
void openTelegramWizard(ch)
|
||||
}
|
||||
@@ -370,17 +444,27 @@ export function ChannelsPage() {
|
||||
if (ch.type === 'email') {
|
||||
applyEmailPreset('custom')
|
||||
setWizard({ open: true, type: ch.type, step: 0 })
|
||||
} else if (ch.type === 'whatsapp') {
|
||||
void openWhatsAppWizard(ch)
|
||||
} else {
|
||||
void openTelegramWizard(ch)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{ch.type === 'email' ? <Mail className="h-3 w-3" /> : <Cable className="h-3 w-3" />}
|
||||
{ch.type === 'telegram' && ch.id !== 'telegram-available' ? '继续授权' : '连接'}
|
||||
{ch.type === 'email'
|
||||
? <Mail className="h-3 w-3" />
|
||||
: ch.type === 'whatsapp'
|
||||
? <MessageCircle className="h-3 w-3" />
|
||||
: <Cable className="h-3 w-3" />}
|
||||
{['telegram', 'whatsapp'].includes(ch.type) && !ch.id.endsWith('-available') ? '继续授权' : '连接'}
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="ghost" onClick={() => loadLogs(ch.id)}><History className="h-3 w-3" /></Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setSettingsDrawer(ch)}><Settings className="h-3 w-3" /></Button>
|
||||
{!ch.id.endsWith('-available') && (
|
||||
<>
|
||||
<Button size="sm" variant="ghost" onClick={() => loadLogs(ch.id)}><History className="h-3 w-3" /></Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setSettingsDrawer(ch)}><Settings className="h-3 w-3" /></Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -392,13 +476,13 @@ export function ChannelsPage() {
|
||||
<span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary text-white shadow-lg shadow-primary/20">
|
||||
<Workflow className="h-5 w-5" />
|
||||
</span>
|
||||
<h3 className="mt-4 text-base font-semibold text-slate-900">统一处理链路</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500">无论消息来自 Telegram 还是 Email，都进入同一套真实业务流程。</p>
|
||||
<h3 className="mt-4 text-base font-semibold text-slate-900">消息处理</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-slate-500">渠道消息进入收件箱后，可分配负责人、翻译并跟进。</p>
|
||||
<div className="mt-4 space-y-2">
|
||||
{[
|
||||
['01', '实时接收与自动同步'],
|
||||
['02', 'AI 翻译、情绪与意图识别'],
|
||||
['03', '客户画像、风险与任务联动'],
|
||||
['01', '接收并同步渠道消息'],
|
||||
['02', '分配负责人并处理消息'],
|
||||
['03', '记录客户信息与跟进事项'],
|
||||
].map(([step, label]) => (
|
||||
<div key={step} className="flex items-center gap-3 rounded-xl bg-white px-3 py-2.5 shadow-sm ring-1 ring-slate-100">
|
||||
<span className="text-[10px] font-bold text-primary">{step}</span>
|
||||
@@ -421,6 +505,9 @@ export function ChannelsPage() {
|
||||
if (!open) {
|
||||
setEmailForm((current) => ({ ...current, password: '' }))
|
||||
resetTelegramWizard()
|
||||
setWhatsAppChannelId('')
|
||||
setWhatsAppPairingCode('')
|
||||
setWhatsAppQr('')
|
||||
}
|
||||
}}
|
||||
title={`连接 ${wizard.type ? CHANNEL_META[wizard.type].name : ''}`}
|
||||
@@ -438,6 +525,35 @@ export function ChannelsPage() {
|
||||
queryClient.invalidateQueries()
|
||||
return
|
||||
}
|
||||
if (wizard.type === 'whatsapp') {
|
||||
if (!whatsappChannelId) {
|
||||
const phone = whatsappAccount.replace(/\D/g, '')
|
||||
if (!/^\d{7,15}$/.test(phone)) {
|
||||
toast.warning('请输入包含国家/地区代码的 WhatsApp 手机号')
|
||||
return
|
||||
}
|
||||
const channel = await startWhatsAppLogin(phone)
|
||||
setWhatsAppChannelId(channel.id)
|
||||
setWhatsAppPairingCode(channel.pairingCode || '')
|
||||
setWhatsAppQr(channel.qrDataUrl || '')
|
||||
setWizard({ open: true, type: 'whatsapp', step: 1 })
|
||||
toast.success('配对码已生成，请在手机 WhatsApp 中完成关联设备')
|
||||
queryClient.invalidateQueries({ queryKey: ['channels'] })
|
||||
return
|
||||
}
|
||||
const state = await getWhatsAppLoginState(whatsappChannelId)
|
||||
setWhatsAppPairingCode(state.pairingCode || state.channel.pairingCode || '')
|
||||
setWhatsAppQr(state.qrDataUrl || state.channel.qrDataUrl || '')
|
||||
if (state.status !== 'connected') {
|
||||
toast.info('尚未检测到手机确认，请完成关联设备后再次检查')
|
||||
return
|
||||
}
|
||||
const sync = await syncChannel(whatsappChannelId, { full: true })
|
||||
toast.success(`WhatsApp 绑定成功，已同步 ${sync.chats} 个会话和 ${sync.messages} 条消息`)
|
||||
setWizard({ open: false, type: null, step: 0 })
|
||||
await queryClient.invalidateQueries()
|
||||
return
|
||||
}
|
||||
|
||||
if (!loginChannelId) {
|
||||
const phone = telegramAccount.replace(/\s+/g, '')
|
||||
@@ -497,7 +613,11 @@ export function ChannelsPage() {
|
||||
>
|
||||
{wizard.type === 'email'
|
||||
? '验证并连接邮箱'
|
||||
: !loginChannelId
|
||||
: wizard.type === 'whatsapp'
|
||||
? !whatsappChannelId
|
||||
? '生成 WhatsApp 配对码'
|
||||
: '我已在手机确认，检查连接'
|
||||
: !loginChannelId
|
||||
? '发送 Telegram 验证码'
|
||||
: authState === 'waiting_password'
|
||||
? '验证二步密码并完成绑定'
|
||||
@@ -513,7 +633,7 @@ export function ChannelsPage() {
|
||||
IMAP 收信 + SMTP 发信
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-5 text-sky-700">
|
||||
密码在服务端使用 AES-256-GCM 加密保存，不会返回浏览器。Gmail、Outlook 等通常需要应用专用密码。
|
||||
Gmail、Outlook 等邮箱通常需要使用应用专用密码。
|
||||
</p>
|
||||
</div>
|
||||
<Field label="邮箱服务商">
|
||||
@@ -545,7 +665,7 @@ export function ChannelsPage() {
|
||||
type="password"
|
||||
value={emailForm.password}
|
||||
onChange={(event) => setEmailForm({ ...emailForm, password: event.target.value })}
|
||||
placeholder="仅提交到本地服务端验证"
|
||||
placeholder="邮箱密码或应用专用密码"
|
||||
/>
|
||||
</Field>
|
||||
<div className="grid grid-cols-[1fr_96px] gap-3">
|
||||
@@ -585,6 +705,50 @@ export function ChannelsPage() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
) : wizard.type === 'whatsapp' ? (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-3.5">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-amber-900">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
普通 WhatsApp 关联设备接入
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-5 text-amber-800">
|
||||
该方式通过 WhatsApp 的“关联设备”连接普通个人或 Business App 账号，并非 Meta 官方 Business Cloud API。
|
||||
请勿用于垃圾营销或违反 WhatsApp 条款的自动化行为。
|
||||
</p>
|
||||
</div>
|
||||
{!whatsappChannelId ? (
|
||||
<Field label="WhatsApp 手机号" required hint="包含国家/地区代码，例如中国号码输入 +8613800138000">
|
||||
<Input
|
||||
type="tel"
|
||||
autoComplete="tel"
|
||||
value={whatsappAccount}
|
||||
onChange={(event) => setWhatsAppAccount(event.target.value)}
|
||||
placeholder="+8613800138000"
|
||||
/>
|
||||
</Field>
|
||||
) : (
|
||||
<>
|
||||
<div className="rounded-2xl border border-primary-200 bg-primary-50/70 p-5 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary-600">关联设备配对码</p>
|
||||
<p className="mt-3 font-mono text-3xl font-black tracking-[0.2em] text-primary-950">
|
||||
{whatsappPairingCode || '等待生成'}
|
||||
</p>
|
||||
<p className="mt-3 text-xs leading-5 text-primary-700">
|
||||
手机 WhatsApp → 设置 → 关联设备 → 关联设备 → 使用手机号关联，然后输入上方配对码。
|
||||
</p>
|
||||
</div>
|
||||
{whatsappQr && (
|
||||
<div className="flex justify-center rounded-2xl border border-slate-200 bg-white p-4">
|
||||
<img src={whatsappQr} alt="WhatsApp 关联设备二维码" className="h-48 w-48 rounded-xl" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="rounded-xl border border-slate-200 bg-slate-50 p-3 text-xs leading-5 text-slate-600">
|
||||
手机确认后将自动同步历史会话、联系人和媒体消息。
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-primary-100 bg-primary-50/70 p-3.5">
|
||||
@@ -593,7 +757,7 @@ export function ChannelsPage() {
|
||||
<span className="text-sm font-semibold text-primary-900">绑定你自己的 Telegram 工作账号</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs leading-5 text-primary-700">
|
||||
每个企业独立绑定账号，不会共享其他租户的 Telegram 会话或凭据。
|
||||
可以继续添加其他工作账号，并选择一个默认账号发起新会话。
|
||||
</p>
|
||||
</div>
|
||||
<div aria-label="Telegram 绑定进度" className="grid grid-cols-3 gap-2">
|
||||
@@ -655,7 +819,7 @@ export function ChannelsPage() {
|
||||
</Field>
|
||||
)}
|
||||
<p className="text-xs leading-5 text-muted-foreground">
|
||||
手机号、验证码和二步密码只通过加密连接发送到本企业的 Telegram Gateway，不写入浏览器本地存储。授权成功后将自动完成 Webhook 注册和首次历史同步。
|
||||
完成验证后将自动同步历史会话、联系人和媒体消息。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -68,7 +68,7 @@ export function CustomerDetailPage() {
|
||||
customerName: c.name,
|
||||
ownerId: user?.id || '',
|
||||
dueAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
|
||||
note: `由客户画像的 AI 建议创建：${title}`,
|
||||
note: `由客户画像建议创建：${title}`,
|
||||
})
|
||||
await queryClient.invalidateQueries({ queryKey: ['tasks'] })
|
||||
toast.success('已创建跟进任务', '默认明天到期，可在商机与跟进中调整')
|
||||
@@ -115,7 +115,7 @@ export function CustomerDetailPage() {
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs leading-5 text-slate-400">
|
||||
暂无标签，AI 将在收到有效客户消息后自动补全。
|
||||
暂无标签，收到更多客户消息后将自动补充。
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
@@ -159,7 +159,7 @@ export function CustomerDetailPage() {
|
||||
<CustomerProfileRadar customer={c} className="xl:col-span-5" />
|
||||
|
||||
<Card className="xl:col-span-7">
|
||||
<CardHeader title="AI 客户洞察" description="结合完整会话、购买信号和风险变化生成" />
|
||||
<CardHeader title="客户洞察" description="参考已同步的会话、购买信号和风险变化" />
|
||||
<div className="p-5">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
@@ -174,7 +174,7 @@ export function CustomerDetailPage() {
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-5 text-sm leading-7 text-slate-600">
|
||||
{c.aiProfile.summary || 'AI 正在根据 Telegram 会话补全客户画像。'}
|
||||
{c.aiProfile.summary || '收到更多客户消息后将补充客户画像。'}
|
||||
</p>
|
||||
{c.aiProfile.evidence?.length ? (
|
||||
<div className="mt-5 border-t border-slate-100 pt-4">
|
||||
@@ -193,7 +193,7 @@ export function CustomerDetailPage() {
|
||||
</Card>
|
||||
|
||||
<Card className="xl:col-span-8">
|
||||
<CardHeader title="采购情报" description="从 Telegram 对话中自动结构化提取" />
|
||||
<CardHeader title="采购信息" description="根据已同步的会话内容整理" />
|
||||
<div className="grid grid-cols-2 gap-px overflow-hidden rounded-b-2xl bg-slate-100 md:grid-cols-4">
|
||||
{Object.entries({
|
||||
询价数量: c.aiProfile.inquiryQuantity,
|
||||
|
||||
@@ -48,6 +48,7 @@ import {
|
||||
INTENT_LEVELS,
|
||||
} from '@/config/constants'
|
||||
import { cn } from '@/utils/cn'
|
||||
import { formatProductName } from '@/utils/format'
|
||||
import type { Customer } from '@/types'
|
||||
import type { ChannelType } from '@/types/messaging'
|
||||
|
||||
@@ -175,10 +176,10 @@ export function CustomersPage() {
|
||||
if (isError) return <ErrorState onRetry={() => refetch()} />
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="page-shell">
|
||||
<PageHeader
|
||||
title="客户管理"
|
||||
description={`共 ${total} 个客户 · 统一管理与跟进`}
|
||||
description={`共 ${total} 个客户`}
|
||||
actions={
|
||||
<>
|
||||
<PermissionGate permission="customer:export">
|
||||
@@ -204,27 +205,27 @@ export function CustomersPage() {
|
||||
</>
|
||||
}
|
||||
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">
|
||||
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<input
|
||||
placeholder="搜索客户名称/公司/国家/产品"
|
||||
value={keyword}
|
||||
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>
|
||||
<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={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" />
|
||||
<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: 'card' as const, icon: LayoutGrid },
|
||||
{ v: 'kanban' as const, icon: List },
|
||||
].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" />
|
||||
</button>
|
||||
))}
|
||||
@@ -235,7 +236,7 @@ export function CustomersPage() {
|
||||
|
||||
{/* 批量操作 */}
|
||||
{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>
|
||||
<div className="flex-1" />
|
||||
<Button size="sm" variant="outline" onClick={() => { setBatchValue(''); setBatchDialog('assign') }}><UserRoundPlus className="h-4 w-4" />批量分配</Button>
|
||||
@@ -246,7 +247,7 @@ export function CustomersPage() {
|
||||
|
||||
{/* 表格视图 */}
|
||||
{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>
|
||||
<THead>
|
||||
<Tr>
|
||||
@@ -285,7 +286,7 @@ export function CustomersPage() {
|
||||
<Td onClick={() => navigate(`/customers/${customer.id}`)}><CountryFlag code={customer.country} /></Td>
|
||||
<Td onClick={() => navigate(`/customers/${customer.id}`)}><span className="text-xs">{customer.email || customer.phone || '—'}</span></Td>
|
||||
<Td onClick={() => navigate(`/customers/${customer.id}`)}><span className="flex items-center gap-1"><ChannelIcon channel={customer.channel} size="xs" withBg={false} />{customer.channel}</span></Td>
|
||||
<Td onClick={() => navigate(`/customers/${customer.id}`)}><span className="text-xs">{customer.products[0] || '—'}</span></Td>
|
||||
<Td onClick={() => navigate(`/customers/${customer.id}`)}><span className="text-xs">{formatProductName(customer.products?.[0]) || '—'}</span></Td>
|
||||
<Td><IntentScoreBadge score={customer.intentScore} /></Td>
|
||||
<Td><CustomerStageBadge stage={customer.stage} /></Td>
|
||||
<Td><SentimentBadge sentiment={customer.sentiment} emojiOnly /></Td>
|
||||
@@ -333,8 +334,8 @@ export function CustomersPage() {
|
||||
<SentimentBadge sentiment={customer.sentiment} emojiOnly />
|
||||
{customer.riskLevel !== 'none' && <RiskLevelBadge level={customer.riskLevel} />}
|
||||
</div>
|
||||
{customer.products.length > 0 && (
|
||||
<p className="mt-2 text-xs text-muted-foreground truncate">{customer.products[0]}</p>
|
||||
{customer.products?.length > 0 && (
|
||||
<p className="mt-2 text-xs text-muted-foreground truncate">{formatProductName(customer.products[0])}</p>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
|
||||
@@ -30,7 +30,7 @@ import { useAuthStore } from '@/app/store/auth'
|
||||
import { useI18n } from '@/i18n'
|
||||
import { getPlan } from '@/config/pricingPlans'
|
||||
import { countryMeta, taskTypeLabel, CHANNEL_META, riskLevelMeta } from '@/config/constants'
|
||||
import { formatDateTime, formatRelative } from '@/utils/format'
|
||||
import { formatDateTime, formatProductName, formatRelative } from '@/utils/format'
|
||||
import { toast, errorMessage } from '@/app/store/toast'
|
||||
import { PageLoading, ErrorState, EmptyState } from '@/components/ui/feedback'
|
||||
import { Card, CardHeader } from '@/components/ui/card'
|
||||
@@ -92,17 +92,17 @@ export function DashboardPage() {
|
||||
const s = data.stats
|
||||
|
||||
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>
|
||||
<p className="eyebrow">Business command center</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold tracking-[-0.035em] text-slate-950 md:text-[28px]">
|
||||
<p className="eyebrow">今日工作概览</p>
|
||||
<h1 className="mt-1.5 text-2xl font-semibold tracking-[-0.035em] text-slate-950 md:text-[28px]">
|
||||
{greeting}，{user?.name}
|
||||
</h1>
|
||||
<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>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
@@ -114,9 +114,9 @@ export function DashboardPage() {
|
||||
</Button>
|
||||
</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) => (
|
||||
<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.label}
|
||||
</Button>
|
||||
@@ -125,10 +125,10 @@ export function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* 核心指标 */}
|
||||
<div className="mb-3 flex items-end justify-between">
|
||||
<div className="section-heading">
|
||||
<div>
|
||||
<p className="eyebrow">Today</p>
|
||||
<h2 className="mt-1 text-lg font-semibold tracking-tight">今日经营重点</h2>
|
||||
<h2 className="section-title">今日重点</h2>
|
||||
<p className="section-description">优先处理待回复、跟进与高意向客户</p>
|
||||
</div>
|
||||
<button onClick={() => navigate('/analytics')} className="text-xs font-medium text-primary hover:text-primary-700">查看完整分析 →</button>
|
||||
</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.todayFollowUps.value} delta={s.todayFollowUps.delta} icon={CalendarClock} onClick={() => navigate('/opportunities?tab=tasks')} />
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<StatCard title="风险预警" value={s.openRisks.value} delta={s.openRisks.delta} icon={AlertTriangle} onClick={() => navigate('/risks')} />
|
||||
<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} />
|
||||
<StatCard title="AI回复采纳率" value={`${s.aiAdoptionRate.value}%`} delta={s.aiAdoptionRate.delta} icon={Zap} />
|
||||
</div>
|
||||
<Card className="mt-3 overflow-hidden">
|
||||
<div className="grid grid-cols-2 divide-x divide-y divide-slate-100 md:grid-cols-4 md:divide-y-0">
|
||||
{[
|
||||
{ label: '风险预警', value: s.openRisks.value, icon: AlertTriangle, onClick: () => navigate('/risks') },
|
||||
{ label: '平均首次响应', value: `${s.avgFirstResponseMin.value} 分钟`, icon: Timer },
|
||||
{ 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>
|
||||
<CardHeader
|
||||
@@ -209,7 +235,7 @@ export function DashboardPage() {
|
||||
<CountryFlag code={c.country} withName={false} />
|
||||
</div>
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
||||
{c.products[0] ?? '—'} · 建议：{c.aiProfile.nextActions[0] ?? '跟进'}
|
||||
{formatProductName(c.products?.[0]) || '—'} · 建议：{c.aiProfile?.nextActions?.[0] ?? '跟进'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col items-end gap-1">
|
||||
@@ -252,14 +278,22 @@ export function DashboardPage() {
|
||||
<div className="border-t border-border p-3">
|
||||
<Button variant="outline" className="w-full" onClick={() => navigate('/inbox')}>
|
||||
<Send className="h-4 w-4" />
|
||||
进入统一消息中心
|
||||
查看全部消息
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</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}>
|
||||
<TrendChart data={data.inquiryTrend} series={[{ key: 'inquiries', name: '询盘数' }, { key: 'customers', name: '新增客户' }]} />
|
||||
</ChartCard>
|
||||
@@ -277,6 +311,7 @@ export function DashboardPage() {
|
||||
/>
|
||||
</ChartCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 最近风险 */}
|
||||
<Card className="mt-4">
|
||||
|
||||
@@ -7,8 +7,8 @@ const HELP_ITEMS = [
|
||||
{ icon: Cable, title: '连接 Telegram', desc: '手机号、验证码和二步密码登录，并同步历史会话', path: '/channels' },
|
||||
{ icon: BookOpen, title: '建设知识库', desc: '上传 TXT、Markdown、PDF 或 DOCX 并解析为企业知识', path: '/knowledge' },
|
||||
{ icon: FileUp, title: '导入与管理客户', desc: '维护客户资料、标签、负责人和跟进状态', path: '/customers' },
|
||||
{ icon: Languages, title: 'AI 上下文翻译', desc: '结合当前会话上下文进行跨境商务翻译', path: '/translate' },
|
||||
{ icon: UsersRound, title: '邀请团队成员', desc: '通过已配置的企业 SMTP 发送真实邀请邮件', path: '/team' },
|
||||
{ icon: Languages, title: '消息翻译', desc: '翻译当前消息并保留双语对照', path: '/translate' },
|
||||
{ icon: UsersRound, title: '邀请团队成员', desc: '向同事发送团队邀请邮件', path: '/team' },
|
||||
{ icon: CreditCard, title: '订阅与支付', desc: '通过 Stripe Checkout 管理套餐订阅', path: '/billing' },
|
||||
]
|
||||
|
||||
|
||||
+576
-84
File diff suppressed because it is too large
Load Diff
@@ -29,20 +29,28 @@ export function KnowledgePage() {
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [editItem, setEditItem] = useState<KnowledgeItem | null>(null)
|
||||
const [searchQ, setSearchQ] = useState('')
|
||||
const [createDraft, setCreateDraft] = useState({ title: '', content: '' })
|
||||
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ['knowledge', 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 [searchLoading, setSearchLoading] = useState(false)
|
||||
const [uploadFiles, setUploadFiles] = useState<File[]>([])
|
||||
const [uploadDialog, setUploadDialog] = useState(false)
|
||||
const [uploadLoading, setUploadLoading] = useState(false)
|
||||
|
||||
const createMut = useMutation({
|
||||
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)),
|
||||
})
|
||||
|
||||
@@ -65,7 +73,7 @@ export function KnowledgePage() {
|
||||
<div className="p-4 md:p-6">
|
||||
<PageHeader
|
||||
title="企业知识库"
|
||||
description={`${list.length} 条知识 · AI 回复与翻译的精准来源`}
|
||||
description="把产品、价格、物流和售后资料变成可检索、可引用的企业答案"
|
||||
actions={
|
||||
<>
|
||||
<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={[
|
||||
{ value: 'list', 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">
|
||||
<span>引用 {item.citedCount} 次</span>
|
||||
<span>·</span>
|
||||
<span>{formatRelative(item.updatedAt)}</span>
|
||||
<span>{item.chunkCount || 0} 个检索片段</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>
|
||||
{item.parseMessage && <p className="mt-1 text-[11px] text-emerald-600">{item.parseMessage}</p>}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Switch checked={item.enabled} onCheckedChange={(v) => toggleMut.mutate({ id: item.id, enabled: v })} />
|
||||
@@ -129,7 +155,7 @@ export function KnowledgePage() {
|
||||
{tab === 'search' && (
|
||||
<Card className="p-4">
|
||||
<div className="flex gap-2">
|
||||
<Input placeholder="输入跨境问题，测试知识库检索与 AI 答案生成" value={searchQ} onChange={(e) => setSearchQ(e.target.value)} className="flex-1" />
|
||||
<Input placeholder="输入问题，测试知识库检索和答案生成" value={searchQ} onChange={(e) => setSearchQ(e.target.value)} className="flex-1" />
|
||||
<Button loading={searchLoading} onClick={async () => {
|
||||
if (!searchQ.trim()) return
|
||||
setSearchLoading(true)
|
||||
@@ -142,14 +168,15 @@ export function KnowledgePage() {
|
||||
{searchResult && (
|
||||
<div className="mt-4 space-y-3">
|
||||
<Card className="p-3 bg-primary-50/30">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-1">AI 答案</p>
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-1">参考答案</p>
|
||||
<p className="text-sm">{searchResult.answer}</p>
|
||||
</Card>
|
||||
<p className="text-xs font-semibold text-muted-foreground">命中知识 ({searchResult.hits.length})</p>
|
||||
{searchResult.hits.map((h: any) => (
|
||||
<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-[10px] text-slate-400">命中片段 #{Number(h.chunkIndex || 0) + 1}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -175,34 +202,41 @@ export function KnowledgePage() {
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen} title="新建知识条目" footer={
|
||||
<Button onClick={() => {
|
||||
const title = (document.querySelector('#k-title') as HTMLInputElement)?.value
|
||||
const content = (document.querySelector('#k-content') as HTMLTextAreaElement)?.value
|
||||
if (!title) { toast.warning('请输入标题'); return }
|
||||
createMut.mutate({ title, content, category: category || 'faq' })
|
||||
}}>创建</Button>
|
||||
if (!createDraft.title.trim()) { toast.warning('请输入标题'); return }
|
||||
if (createDraft.content.trim().length < 20) { toast.warning('知识内容至少需要 20 个字符'); return }
|
||||
createMut.mutate({ ...createDraft, category: category || 'faq' })
|
||||
}} loading={createMut.isPending}>创建并索引</Button>
|
||||
}>
|
||||
<Field label="标题" required><Input id="k-title" placeholder="知识条目标题" /></Field>
|
||||
<Field label="内容" className="mt-3"><Textarea id="k-content" rows={5} 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 value={createDraft.content} onChange={(event) => setCreateDraft((value) => ({ ...value, content: event.target.value }))} rows={8} placeholder="写明适用范围、条件、时效、例外和处理方式。系统会自动分段并用于回复建议。" /></Field>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={uploadDialog} onOpenChange={setUploadDialog} title="上传文件" footer={
|
||||
<Button disabled={!uploadFiles.length} onClick={async () => {
|
||||
const payload = await Promise.all(uploadFiles.map(async (file) => ({
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
base64: await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
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'] })
|
||||
setUploadFiles([])
|
||||
setUploadDialog(false)
|
||||
}}>上传并解析</Button>
|
||||
<Button disabled={!uploadFiles.length} loading={uploadLoading} onClick={async () => {
|
||||
setUploadLoading(true)
|
||||
try {
|
||||
const payload = await Promise.all(uploadFiles.map(async (file) => ({
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
base64: await new Promise<string>((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onerror = () => reject(reader.error)
|
||||
reader.onload = () => resolve(String(reader.result).split(',')[1] || '')
|
||||
reader.readAsDataURL(file)
|
||||
}),
|
||||
})))
|
||||
const result = await uploadKnowledgeFiles(payload)
|
||||
toast.success(`${result.items.length} 个文件解析并建立检索索引`)
|
||||
queryClient.invalidateQueries({ queryKey: ['knowledge'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['knowledge-stats'] })
|
||||
setUploadFiles([])
|
||||
setUploadDialog(false)
|
||||
} catch (error) {
|
||||
toast.error(errorMessage(error))
|
||||
} finally {
|
||||
setUploadLoading(false)
|
||||
}
|
||||
}}>上传、解析并索引</Button>
|
||||
}>
|
||||
<input
|
||||
type="file"
|
||||
@@ -211,7 +245,7 @@ export function KnowledgePage() {
|
||||
onChange={(e) => setUploadFiles(Array.from(e.target.files || []))}
|
||||
className="block w-full rounded-md border border-input p-2 text-sm"
|
||||
/>
|
||||
<p className="mt-2 text-sm text-muted-foreground">支持 PDF、DOCX、TXT、Markdown、CSV、JSON 和 HTML，文件内容由服务端真实解析并写入知识库。</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">支持 PDF、DOCX、TXT、Markdown、CSV、JSON 和 HTML，上传后自动解析并写入知识库。</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { useAuthStore } from '@/app/store/auth'
|
||||
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 { TaskFormDialog } from '@/components/crm/TaskFormDialog'
|
||||
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 { formatDateTime, formatMoney } from '@/utils/format'
|
||||
import { cn } from '@/utils/cn'
|
||||
@@ -24,7 +26,11 @@ import type { FollowTask, Opportunity } from '@/types'
|
||||
export function OpportunitiesPage() {
|
||||
const queryClient = useQueryClient()
|
||||
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 [taskDialog, setTaskDialog] = useState(false)
|
||||
|
||||
@@ -36,6 +42,8 @@ export function OpportunitiesPage() {
|
||||
queryKey: ['tasks', taskFilter],
|
||||
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({
|
||||
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()
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<div className="page-shell">
|
||||
<PageHeader
|
||||
title="商机与跟进"
|
||||
description="管理商机流转与团队跟进任务"
|
||||
@@ -90,8 +98,11 @@ export function OpportunitiesPage() {
|
||||
|
||||
<Tabs
|
||||
value={view}
|
||||
onChange={setView}
|
||||
className="mb-4"
|
||||
onChange={(next) => {
|
||||
setView(next)
|
||||
setSearchParams(next === 'kanban' ? {} : { tab: next }, { replace: true })
|
||||
}}
|
||||
className="mb-5"
|
||||
items={[
|
||||
{ value: 'kanban', label: '商机看板', count: opps.length },
|
||||
{ value: 'tasks', label: '跟进任务', count: tasks.filter((t) => t.status !== 'done').length },
|
||||
@@ -100,17 +111,17 @@ export function OpportunitiesPage() {
|
||||
/>
|
||||
|
||||
{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) => (
|
||||
<div
|
||||
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()}
|
||||
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">
|
||||
<span className="text-sm font-medium">{col.label}</span>
|
||||
<Badge variant="primary">{col.items.length}</Badge>
|
||||
<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-semibold text-slate-800">{col.label}</span>
|
||||
<Badge variant="outline">{col.items.length}</Badge>
|
||||
</div>
|
||||
<div className="space-y-2 p-2">
|
||||
{col.items.map((opp) => (
|
||||
@@ -118,7 +129,7 @@ export function OpportunitiesPage() {
|
||||
key={opp.id}
|
||||
draggable
|
||||
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="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' && (
|
||||
<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: 'today', l: '今日' }, { v: 'overdue', l: '已逾期' },
|
||||
{ v: 'done', l: '已完成' },
|
||||
].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>
|
||||
<Card>
|
||||
@@ -160,7 +171,7 @@ export function OpportunitiesPage() {
|
||||
<Td><span className="text-xs">{t.customerName}</span></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="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>
|
||||
{t.status !== 'done' && (
|
||||
<Button size="sm" variant="ghost" onClick={() => taskMut.mutate({ id: t.id, data: { status: 'done' } })}>完成</Button>
|
||||
|
||||
@@ -55,7 +55,7 @@ export function RisksPage() {
|
||||
<div className="p-4 md:p-6">
|
||||
<PageHeader
|
||||
title="风险预警中心"
|
||||
description="智能识别交易风险、客户流失信号与敏感表达，帮助团队主动应对"
|
||||
description="查看交易风险、客户流失信号和敏感表达"
|
||||
actions={
|
||||
<PermissionGate permission="settings:manage">
|
||||
<Button size="sm" variant="outline" onClick={() => navigate('/settings')}><Settings className="h-4 w-4" />风险识别设置</Button>
|
||||
@@ -116,7 +116,7 @@ export function RisksPage() {
|
||||
<span className="text-xs text-muted-foreground">{formatRelative(detail.createdAt)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold mb-1">AI 判断说明</h4>
|
||||
<h4 className="text-sm font-semibold mb-1">判断依据</h4>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed">{detail.aiExplanation}</p>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -17,7 +17,7 @@ const SECTIONS = [
|
||||
{ key: 'company', label: '企业资料', icon: UserCog },
|
||||
{ key: 'lang', label: '语言与时区', icon: Globe },
|
||||
{ key: 'notifications', label: '消息通知', icon: Bell },
|
||||
{ key: 'ai', label: 'AI回复设置', icon: Languages },
|
||||
{ key: 'ai', label: '智能回复', icon: Languages },
|
||||
{ key: 'safety', label: '安全设置', icon: ShieldCheck },
|
||||
{ key: 'api', label: 'API Key', icon: KeyRound },
|
||||
]
|
||||
@@ -55,19 +55,33 @@ export function SettingsPage() {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-56px)]">
|
||||
<div className="w-48 shrink-0 border-e border-border p-3 space-y-1 overflow-y-auto scrollbar-thin hidden md:block">
|
||||
<div className="page-shell">
|
||||
<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) => (
|
||||
<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}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
|
||||
<div className="min-w-0">
|
||||
{section === 'company' && settings && (
|
||||
<Card>
|
||||
<CardHeader title="企业资料" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
|
||||
<CardHeader title="企业资料" description="用于团队空间、通知邮件和对外业务资料" />
|
||||
<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.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>
|
||||
@@ -79,20 +93,25 @@ export function SettingsPage() {
|
||||
)}
|
||||
{section === 'ai' && settings && (
|
||||
<Card>
|
||||
<CardHeader title="AI 回复设置" />
|
||||
<div className="space-y-4 p-4">
|
||||
<CardHeader title="智能回复" description="控制回复建议、分析和发送前确认规则" />
|
||||
<div className="divide-y divide-slate-100 px-5">
|
||||
{[
|
||||
{ key: 'autoGenerate', label: '自动生成回复建议' },
|
||||
{ key: 'requireConfirm', label: '发送前必须人工确认' },
|
||||
{ key: 'sentimentAnalysis', label: '启用情感分析' },
|
||||
{ key: 'messageIntentAnalysis', label: '逐条客户消息意图识别' },
|
||||
{ key: 'contextualTranslation', label: '翻译时参考会话上下文' },
|
||||
{ key: 'riskAlert', label: '启用风险预警' },
|
||||
{ key: 'cultureCheck', label: '启用文化敏感检测' },
|
||||
{ key: 'allowHistoryRef', label: '允许AI引用历史成功回复' },
|
||||
].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>
|
||||
<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 } })}
|
||||
/>
|
||||
</div>
|
||||
@@ -102,8 +121,8 @@ export function SettingsPage() {
|
||||
)}
|
||||
{section === 'notifications' && settings && (
|
||||
<Card>
|
||||
<CardHeader title="消息通知设置" />
|
||||
<div className="space-y-4 p-4">
|
||||
<CardHeader title="消息通知" description="选择需要发送到通知中心的业务事件" />
|
||||
<div className="divide-y divide-slate-100 px-5">
|
||||
{[
|
||||
{ key: 'newInquiry', label: '新询盘提醒' },
|
||||
{ key: 'highIntent', label: '高意向客户提醒' },
|
||||
@@ -113,7 +132,7 @@ export function SettingsPage() {
|
||||
{ key: 'channelOffline', label: '渠道断开提醒' },
|
||||
{ key: 'planExpire', label: '套餐到期提醒' },
|
||||
].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>
|
||||
<Switch
|
||||
checked={(settings.notification as any)[item.key]}
|
||||
@@ -126,12 +145,12 @@ export function SettingsPage() {
|
||||
)}
|
||||
{section === 'safety' && (
|
||||
<Card>
|
||||
<CardHeader title="安全设置" />
|
||||
<div className="space-y-4 p-4">
|
||||
<CardHeader title="安全设置" description="修改密码后会撤销其他设备上的登录会话" />
|
||||
<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" 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>
|
||||
<div className="rounded bg-emerald-50 p-3 text-sm text-emerald-700"><ShieldCheck className="inline h-4 w-4 mr-1" />密码使用 bcrypt 加密；修改后所有旧登录 Token 会立即失效。</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 () => {
|
||||
if (passwords.newPassword !== passwords.confirmPassword) return toast.error('两次输入的新密码不一致')
|
||||
try {
|
||||
@@ -146,9 +165,9 @@ export function SettingsPage() {
|
||||
)}
|
||||
{section === 'api' && (
|
||||
<Card>
|
||||
<CardHeader title="API 与 Webhook" />
|
||||
<div className="space-y-3 p-4">
|
||||
<p className="text-sm text-muted-foreground">密钥只在创建时完整显示一次，数据库仅保存 SHA-256 摘要。</p>
|
||||
<CardHeader title="API Key" description="为自有系统或服务端集成创建访问凭据" />
|
||||
<div className="space-y-4 p-5">
|
||||
<p className="text-sm text-muted-foreground">密钥只在创建时完整显示一次，请立即复制并妥善保存。</p>
|
||||
<div className="flex gap-2">
|
||||
<Input value={apiName} onChange={(e) => setApiName(e.target.value)} placeholder="密钥名称" />
|
||||
<Button variant="outline" onClick={async () => {
|
||||
@@ -168,7 +187,7 @@ export function SettingsPage() {
|
||||
</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) => (
|
||||
<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>
|
||||
@@ -181,8 +200,8 @@ export function SettingsPage() {
|
||||
)}
|
||||
{section === 'lang' && (
|
||||
<Card>
|
||||
<CardHeader title="语言与时区" />
|
||||
<div className="space-y-4 p-4">
|
||||
<CardHeader title="语言与时区" description="调整界面显示语言与业务时间基准" />
|
||||
<div className="space-y-5 p-5">
|
||||
<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)} />
|
||||
</Field>
|
||||
@@ -195,6 +214,7 @@ export function SettingsPage() {
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -66,8 +66,8 @@ export function TranslatePage() {
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<PageHeader
|
||||
title="AI 翻译中心"
|
||||
description={`跨境商务场景专用翻译引擎，支持全球主流贸易国家和地区语言（可配置 ${supportedLanguageCount} 种）。`}
|
||||
title="翻译中心"
|
||||
description={`支持 ${supportedLanguageCount} 种已配置语言，可用于消息翻译与回复。`}
|
||||
actions={<LiveDataBadge />}
|
||||
/>
|
||||
|
||||
|
||||
@@ -20,8 +20,8 @@ export function analyzeConversation(conversationId: string) {
|
||||
}
|
||||
|
||||
/** POST /api/ai/replies */
|
||||
export function generateReplies(conversationId: string) {
|
||||
return http.post<AiReplySuggestion[]>('/api/ai/replies', { conversationId })
|
||||
export function generateReplies(conversationId: string, targetLang = 'auto') {
|
||||
return http.post<AiReplySuggestion[]>('/api/ai/replies', { conversationId, targetLang })
|
||||
}
|
||||
|
||||
/** POST /api/ai/summarize */
|
||||
|
||||
@@ -52,8 +52,30 @@ export function getTelegramLoginState(channelId: string) {
|
||||
)
|
||||
}
|
||||
|
||||
export function syncTelegramChannel(channelId: string) {
|
||||
return http.post<{ chats: number; messages: number }>(`/api/channels/${channelId}/sync`)
|
||||
export function startWhatsAppLogin(phone: string, name?: string) {
|
||||
return http.post<ChannelConnection>('/api/channels/whatsapp/start', {
|
||||
phone,
|
||||
name,
|
||||
acceptedUnofficialRisk: true,
|
||||
})
|
||||
}
|
||||
|
||||
export function getWhatsAppLoginState(channelId: string) {
|
||||
return http.post<{
|
||||
status: string
|
||||
connectionState?: string
|
||||
pairingCode?: string
|
||||
qrDataUrl?: string
|
||||
channel: ChannelConnection
|
||||
}>(`/api/channels/whatsapp/${channelId}/state`)
|
||||
}
|
||||
|
||||
export function setDefaultChannel(channelId: string) {
|
||||
return http.post<ChannelConnection>(`/api/channels/${channelId}/default`)
|
||||
}
|
||||
|
||||
export function syncChannel(channelId: string, options: { full?: boolean } = {}) {
|
||||
return http.post<{ chats: number; messages: number }>(`/api/channels/${channelId}/sync`, options)
|
||||
}
|
||||
|
||||
/** POST /api/channels/test */
|
||||
@@ -75,3 +97,81 @@ export function deleteChannel(id: string) {
|
||||
export function getChannelLogs(id: string) {
|
||||
return http.get<ChannelSyncLog[]>(`/api/channels/${id}/logs`)
|
||||
}
|
||||
|
||||
export function getWhatsAppContacts(
|
||||
channelId: string,
|
||||
query: { query?: string; cursor?: string; limit?: number } = {},
|
||||
) {
|
||||
return http.get<{
|
||||
items: Array<{ id: string; name: string; phone: string }>
|
||||
nextCursor: string | null
|
||||
total: number
|
||||
}>(`/api/channels/${channelId}/whatsapp/contacts`, query)
|
||||
}
|
||||
|
||||
export function updateWhatsAppProxy(channelId: string, url: string) {
|
||||
return http.put<ChannelConnection>(`/api/channels/${channelId}/whatsapp/proxy`, {
|
||||
url,
|
||||
test: true,
|
||||
})
|
||||
}
|
||||
|
||||
export function updateWhatsAppProfile(
|
||||
channelId: string,
|
||||
payload: { name?: string; status?: string },
|
||||
) {
|
||||
return http.patch<ChannelConnection>(`/api/channels/${channelId}/whatsapp/profile`, payload)
|
||||
}
|
||||
|
||||
export function updateWhatsAppProfilePicture(
|
||||
channelId: string,
|
||||
payload: { name: string; mimeType: string; base64: string },
|
||||
) {
|
||||
return http.post<ChannelConnection>(
|
||||
`/api/channels/${channelId}/whatsapp/profile/picture`,
|
||||
payload,
|
||||
)
|
||||
}
|
||||
|
||||
export function reauthorizeWhatsApp(channelId: string) {
|
||||
return http.post<ChannelConnection>(`/api/channels/${channelId}/whatsapp/reauthorize`)
|
||||
}
|
||||
|
||||
export function getWhatsAppDevices(channelId: string) {
|
||||
return http.get<Array<{
|
||||
id: string
|
||||
name: string
|
||||
platform: string
|
||||
current: boolean
|
||||
status: string
|
||||
connectedAt?: string
|
||||
}>>(`/api/channels/${channelId}/whatsapp/devices`)
|
||||
}
|
||||
|
||||
export function terminateWhatsAppDevice(channelId: string, deviceId: string) {
|
||||
return http.del<{ success: boolean; deviceId: string }>(
|
||||
`/api/channels/${channelId}/whatsapp/devices/${encodeURIComponent(deviceId)}`,
|
||||
)
|
||||
}
|
||||
|
||||
export function getWhatsAppGatewayMetrics() {
|
||||
return http.get<{
|
||||
accounts: { total: number; connected: number; disconnected: number }
|
||||
outbound: { queued: number; dead: number; sent: number; riskBackoff: number; averageLatencyMs: number }
|
||||
webhooks: { queued: number; dead: number; delivered: number }
|
||||
alerts: Array<{ severity: string; code: string; accountId: string; message: string }>
|
||||
}>('/api/channels/whatsapp/metrics')
|
||||
}
|
||||
|
||||
export function createWhatsAppBackup(channelId: string) {
|
||||
return http.get<{ version: number; accountId: string; createdAt: string; blob: string }>(
|
||||
`/api/channels/${channelId}/whatsapp/backup`,
|
||||
)
|
||||
}
|
||||
|
||||
export function restoreWhatsAppBackup(channelId: string, blob: string) {
|
||||
return http.post<{ restored: boolean }>(
|
||||
`/api/channels/${channelId}/whatsapp/backup/restore`,
|
||||
{ blob },
|
||||
)
|
||||
}
|
||||
|
||||
@@ -17,10 +17,17 @@ export interface RequestOptions {
|
||||
|
||||
/** 由 auth store 注入，避免循环依赖 */
|
||||
let tokenGetter: () => string | null = () => null
|
||||
let unauthorizedHandler: (() => void) | null = null
|
||||
let handlingUnauthorized = false
|
||||
|
||||
export function setTokenGetter(fn: () => string | null) {
|
||||
tokenGetter = fn
|
||||
}
|
||||
|
||||
export function setUnauthorizedHandler(fn: () => void) {
|
||||
unauthorizedHandler = fn
|
||||
}
|
||||
|
||||
export async function api<T = unknown>(path: string, options: RequestOptions = {}): Promise<T> {
|
||||
const method = options.method ?? 'GET'
|
||||
|
||||
@@ -41,6 +48,11 @@ export async function api<T = unknown>(path: string, options: RequestOptions = {
|
||||
})
|
||||
|
||||
if (res.status === 401) {
|
||||
if (token && unauthorizedHandler && !handlingUnauthorized) {
|
||||
handlingUnauthorized = true
|
||||
unauthorizedHandler()
|
||||
window.setTimeout(() => { handlingUnauthorized = false }, 1_000)
|
||||
}
|
||||
throw new ApiError(401, '登录状态已失效，请重新登录')
|
||||
}
|
||||
if (!res.ok) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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 }
|
||||
|
||||
@@ -10,6 +10,15 @@ export interface ConversationQuery {
|
||||
userId?: string
|
||||
}
|
||||
|
||||
export function normalizeMessage(message: Message): Message {
|
||||
return {
|
||||
...message,
|
||||
originalText: String(message?.originalText ?? ''),
|
||||
originalLang: String(message?.originalLang || 'und'),
|
||||
reactions: Array.isArray(message?.reactions) ? message.reactions : [],
|
||||
}
|
||||
}
|
||||
|
||||
/** GET /api/conversations */
|
||||
export function getConversations(query: ConversationQuery = {}) {
|
||||
return http.get<{ list: ConversationListItem[]; total: number }>('/api/conversations', { ...query })
|
||||
@@ -17,12 +26,43 @@ export function getConversations(query: ConversationQuery = {}) {
|
||||
|
||||
/** GET /api/conversations/:id */
|
||||
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 */
|
||||
export function getMessages(id: string) {
|
||||
return http.get<Message[]>(`/api/conversations/${id}/messages`)
|
||||
export async function getMessages(id: string) {
|
||||
const messages = await http.get<Message[]>(`/api/conversations/${id}/messages`)
|
||||
return Array.isArray(messages) ? messages.map(normalizeMessage) : []
|
||||
}
|
||||
|
||||
export async function getMessagePage(
|
||||
id: string,
|
||||
query: { before?: string; after?: string; cursor?: string; limit?: number } = {},
|
||||
) {
|
||||
const page = await http.get<{
|
||||
items: Message[]
|
||||
beforeCursor: string | null
|
||||
afterCursor: string | null
|
||||
hasMoreBefore: boolean
|
||||
hasMoreAfter: boolean
|
||||
}>(`/api/conversations/${id}/messages/page`, query)
|
||||
return {
|
||||
...page,
|
||||
items: Array.isArray(page?.items) ? page.items.map(normalizeMessage) : [],
|
||||
}
|
||||
}
|
||||
|
||||
export function updateMessage(id: string, messageId: string, payload: { isImportant?: boolean; internalNote?: string }) {
|
||||
@@ -33,6 +73,13 @@ export function markConversationRead(id: string, messageIds?: string[]) {
|
||||
return http.post<Conversation>(`/api/conversations/${id}/read`, { messageIds })
|
||||
}
|
||||
|
||||
export function setConversationPresence(
|
||||
id: string,
|
||||
presence: 'composing' | 'recording' | 'paused' | 'available' | 'unavailable',
|
||||
) {
|
||||
return http.post<{ success: boolean; presence: string }>(`/api/conversations/${id}/presence`, { presence })
|
||||
}
|
||||
|
||||
export function getMessageAttachment(id: string, messageId: string, attachmentId?: string) {
|
||||
return http.get<{ dataUrl: string; mimeType: string; name: string }>(
|
||||
`/api/conversations/${id}/messages/${messageId}/attachment`,
|
||||
@@ -41,15 +88,41 @@ export function getMessageAttachment(id: string, messageId: string, attachmentId
|
||||
}
|
||||
|
||||
/** POST /api/conversations/:id/messages */
|
||||
export function sendMessage(id: string, payload: SendMessagePayload & { translatedText?: string; autoTranslate?: boolean }) {
|
||||
return http.post<Message>(`/api/conversations/${id}/messages`, payload)
|
||||
export function sendMessage(
|
||||
id: string,
|
||||
payload: SendMessagePayload & {
|
||||
translatedText?: string
|
||||
autoTranslate?: boolean
|
||||
targetLang?: string
|
||||
idempotencyKey?: string
|
||||
clientMessageId?: string
|
||||
},
|
||||
) {
|
||||
const idempotencyKey = payload.idempotencyKey || crypto.randomUUID()
|
||||
return http.post<Message>(`/api/conversations/${id}/messages`, {
|
||||
...payload,
|
||||
idempotencyKey,
|
||||
clientMessageId: payload.clientMessageId || idempotencyKey.replace(/-/g, '').slice(0, 20).toUpperCase(),
|
||||
})
|
||||
}
|
||||
|
||||
export function sendMedia(
|
||||
id: string,
|
||||
payload: { name: string; mimeType: string; base64: string; kind: 'document' | 'photo' | 'audio' | 'voice' | 'sticker' },
|
||||
payload: {
|
||||
name: string
|
||||
mimeType: string
|
||||
base64: string
|
||||
kind: 'document' | 'photo' | 'audio' | 'voice' | 'sticker'
|
||||
idempotencyKey?: string
|
||||
clientMessageId?: string
|
||||
},
|
||||
) {
|
||||
return http.post<unknown>(`/api/conversations/${id}/media`, payload)
|
||||
const idempotencyKey = payload.idempotencyKey || crypto.randomUUID()
|
||||
return http.post<unknown>(`/api/conversations/${id}/media`, {
|
||||
...payload,
|
||||
idempotencyKey,
|
||||
clientMessageId: payload.clientMessageId || idempotencyKey.replace(/-/g, '').slice(0, 20).toUpperCase(),
|
||||
})
|
||||
}
|
||||
|
||||
export function sendAlbum(
|
||||
@@ -60,11 +133,37 @@ export function sendAlbum(
|
||||
}
|
||||
|
||||
/** PATCH /api/conversations/:id（标记已读/分配/状态） */
|
||||
export function updateConversation(id: string, payload: { assigneeId?: string | null; markRead?: boolean; status?: string }) {
|
||||
export type WhatsAppMessageAction =
|
||||
| { action: 'react'; messageId: string; emoji: string }
|
||||
| { action: 'edit'; messageId: string; text: string }
|
||||
| { action: 'delete'; messageId: string }
|
||||
| { action: 'forward'; messageId: string; destinationConversationId: string }
|
||||
| { action: 'poll'; name: string; values: string[]; selectableCount?: number }
|
||||
| { action: 'location'; latitude: number; longitude: number; name?: string; address?: string }
|
||||
| { action: 'contact'; displayName: string; phone: string }
|
||||
| { action: 'disappearing'; seconds: false | 0 | 86400 | 604800 | 7776000 }
|
||||
|
||||
export function runWhatsAppMessageAction(id: string, payload: WhatsAppMessageAction) {
|
||||
return http.post<Message | { success: true }>(
|
||||
`/api/conversations/${id}/messages/action`,
|
||||
payload,
|
||||
)
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
export type TelegramConversationAction =
|
||||
export type ConversationAction =
|
||||
| 'clear'
|
||||
| 'delete'
|
||||
| 'pin'
|
||||
@@ -78,9 +177,9 @@ export type TelegramConversationAction =
|
||||
| 'block'
|
||||
| 'unblock'
|
||||
|
||||
export function runTelegramConversationAction(
|
||||
export function runConversationAction(
|
||||
id: string,
|
||||
action: TelegramConversationAction,
|
||||
action: ConversationAction,
|
||||
options: { seconds?: number } = {},
|
||||
) {
|
||||
return http.post<Conversation | { success: true; deleted: true }>(
|
||||
@@ -99,3 +198,42 @@ export function openTelegramConversation(payload: {
|
||||
payload,
|
||||
)
|
||||
}
|
||||
|
||||
export function openWhatsAppConversation(payload: {
|
||||
identifier?: string
|
||||
targetType: 'user' | 'group' | 'invite'
|
||||
channelId?: string
|
||||
subject?: string
|
||||
participants?: string[]
|
||||
}) {
|
||||
return http.post<{ conversation: Conversation; customer: Customer }>(
|
||||
'/api/conversations/whatsapp/open',
|
||||
payload,
|
||||
)
|
||||
}
|
||||
|
||||
export interface WhatsAppGroupInfo {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
participants: Array<{
|
||||
id: string
|
||||
admin?: 'admin' | 'superadmin' | null
|
||||
}>
|
||||
}
|
||||
|
||||
export function getWhatsAppGroup(id: string) {
|
||||
return http.get<WhatsAppGroupInfo>(`/api/conversations/${id}/whatsapp/group`)
|
||||
}
|
||||
|
||||
export function runWhatsAppGroupAction(
|
||||
id: string,
|
||||
payload: {
|
||||
action: 'add' | 'remove' | 'promote' | 'demote' | 'subject' | 'description' | 'invite-code' | 'revoke-invite'
|
||||
participants?: string[]
|
||||
subject?: string
|
||||
description?: string
|
||||
},
|
||||
) {
|
||||
return http.post<unknown>(`/api/conversations/${id}/whatsapp/group/action`, payload)
|
||||
}
|
||||
|
||||
+72
-5
@@ -42,8 +42,8 @@
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.006em;
|
||||
background-image:
|
||||
radial-gradient(circle at 75% -10%, rgba(37, 99, 235, 0.05), transparent 26rem),
|
||||
linear-gradient(180deg, #ffffff 0, hsl(var(--background)) 22rem);
|
||||
radial-gradient(circle at 76% -12%, rgba(37, 99, 235, 0.055), transparent 28rem),
|
||||
linear-gradient(180deg, #ffffff 0, #f7f9fc 23rem);
|
||||
}
|
||||
|
||||
::selection {
|
||||
@@ -70,10 +70,34 @@
|
||||
text-wrap: balance;
|
||||
}
|
||||
.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 {
|
||||
@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) {
|
||||
.conversation-selected,
|
||||
.conversation-selected::after {
|
||||
.conversation-selected::after,
|
||||
.auth-message,
|
||||
.auth-translation-dot,
|
||||
.auth-floating-chip {
|
||||
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 微调 */
|
||||
[dir='rtl'] .rtl-flip {
|
||||
transform: scaleX(-1);
|
||||
|
||||
@@ -12,6 +12,7 @@ export interface AiReplySuggestion {
|
||||
targetLang: string
|
||||
reason: string
|
||||
knowledgeRefs: string[]
|
||||
knowledgeRefIds?: string[]
|
||||
expectedEffect: string
|
||||
cultureTip?: string
|
||||
}
|
||||
@@ -42,6 +43,13 @@ export interface TranslateResult {
|
||||
detectedLang: string
|
||||
terms: { source: string; target: string }[]
|
||||
historyItem?: TranslationHistoryItem
|
||||
meta?: {
|
||||
method: 'ai-contextual' | 'ai-direct'
|
||||
contextApplied: boolean
|
||||
contextMessageCount: number
|
||||
conversationSummaryApplied?: boolean
|
||||
model: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface TranslationHistoryItem {
|
||||
|
||||
@@ -14,6 +14,10 @@ export type CustomerStage =
|
||||
|
||||
/** AI 自动提取的客户画像 */
|
||||
export interface AiCustomerProfile {
|
||||
relationshipType?: 'buyer' | 'supplier' | 'partner' | 'distributor' | 'procurement_agent' | 'logistics' | 'service_provider' | 'internal' | 'other' | 'unknown'
|
||||
relationshipLabel?: string
|
||||
relationshipConfidence?: number
|
||||
relationshipEvidence?: string[]
|
||||
inquiryQuantity?: string
|
||||
targetPrice?: string
|
||||
moqRequirement?: string
|
||||
@@ -46,6 +50,18 @@ export interface AiCustomerProfile {
|
||||
dealProbability?: number
|
||||
churnProbability?: number
|
||||
confidenceScore?: number
|
||||
intentBreakdown?: Array<{
|
||||
intent: string
|
||||
label: string
|
||||
count: number
|
||||
share: number
|
||||
}>
|
||||
lastMessageIntent?: {
|
||||
intent: string
|
||||
label: string
|
||||
urgency: string
|
||||
}
|
||||
profileVersion?: number
|
||||
evidence?: string[]
|
||||
}
|
||||
|
||||
@@ -54,6 +70,9 @@ export interface Customer {
|
||||
name: string
|
||||
company: string
|
||||
country: string
|
||||
countrySource?: 'manual' | 'account-profile' | 'phone-prefix' | 'unknown'
|
||||
countryConfidence?: number
|
||||
countryInferredAt?: string | null
|
||||
city?: string
|
||||
email: string
|
||||
phone: string
|
||||
@@ -73,6 +92,7 @@ export interface Customer {
|
||||
createdAt: string
|
||||
isKey: boolean
|
||||
aiProfile: AiCustomerProfile
|
||||
relationshipType?: AiCustomerProfile['relationshipType']
|
||||
telegramUsername?: string
|
||||
telegramUserId?: string
|
||||
avatarUrl?: string
|
||||
|
||||
@@ -33,12 +33,17 @@ export interface KnowledgeItem {
|
||||
citedCount: number
|
||||
languages: string[]
|
||||
quality: 'good' | 'normal' | 'low'
|
||||
characterCount?: number
|
||||
chunkCount?: number
|
||||
indexedAt?: string
|
||||
parseMessage?: string
|
||||
}
|
||||
|
||||
export interface KnowledgeSearchHit {
|
||||
item: KnowledgeItem
|
||||
score: number
|
||||
snippet: string
|
||||
chunkIndex?: number
|
||||
}
|
||||
|
||||
export interface KnowledgeSearchResult {
|
||||
|
||||
@@ -32,7 +32,24 @@ export interface Message {
|
||||
translationCn?: string
|
||||
translationStatus?: 'pending' | 'completed' | 'failed'
|
||||
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
|
||||
targetLang?: string
|
||||
status: MessageStatus
|
||||
createdAt: string
|
||||
isImportant?: boolean
|
||||
@@ -41,7 +58,21 @@ export interface Message {
|
||||
productCard?: { name: string; sku: string; price: string }
|
||||
replyToId?: string
|
||||
replyPreview?: string
|
||||
editedAt?: string
|
||||
isDeleted?: boolean
|
||||
deletedAt?: string
|
||||
reactions?: Array<{
|
||||
actor: string
|
||||
emoji: string
|
||||
fromMe?: boolean
|
||||
updatedAt?: string
|
||||
}>
|
||||
telegramFileId?: number
|
||||
whatsappMessageId?: string
|
||||
gatewayEventAt?: string
|
||||
ingestedAt?: string
|
||||
realtimeLatencyMs?: number
|
||||
whatsappContentType?: string
|
||||
attachmentMimeType?: string
|
||||
attachmentSize?: number
|
||||
stickerEmoji?: string
|
||||
@@ -74,12 +105,48 @@ export interface Conversation {
|
||||
channelId?: string
|
||||
telegramChatId?: string
|
||||
telegramChatType?: string
|
||||
whatsappJid?: string
|
||||
whatsappChatType?: string
|
||||
isPinned?: boolean
|
||||
archived?: boolean
|
||||
mutedUntil?: string | null
|
||||
markedUnread?: boolean
|
||||
isBlocked?: boolean
|
||||
leftAt?: string
|
||||
presence?: 'available' | 'unavailable' | 'composing' | 'recording' | 'paused'
|
||||
presenceUpdatedAt?: 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'
|
||||
@@ -106,6 +173,10 @@ export interface ChannelConnection {
|
||||
smtpSecure?: boolean
|
||||
syncDays?: number
|
||||
lastVerifiedAt?: string
|
||||
isDefault?: boolean
|
||||
provider?: string
|
||||
pairingCode?: string
|
||||
qrDataUrl?: string
|
||||
}
|
||||
|
||||
export interface ChannelSyncLog {
|
||||
@@ -122,6 +193,8 @@ export interface SendMessagePayload {
|
||||
text: string
|
||||
/** 已确认的中文参考译文，仅在内部消息记录中保存 */
|
||||
translationCn?: string
|
||||
/** auto 表示根据客户最近消息或客户画像自动选择目标语言 */
|
||||
targetLang?: string
|
||||
replyToId?: string
|
||||
replyPreview?: string
|
||||
type?: MessageType
|
||||
|
||||
@@ -95,6 +95,8 @@ export interface AiSettings {
|
||||
autoGenerate: boolean
|
||||
requireConfirm: boolean
|
||||
sentimentAnalysis: boolean
|
||||
messageIntentAnalysis: boolean
|
||||
contextualTranslation: boolean
|
||||
riskAlert: boolean
|
||||
cultureCheck: boolean
|
||||
allowHistoryRef: boolean
|
||||
|
||||
@@ -71,3 +71,15 @@ export function localTimeByOffset(offsetHours: number): string {
|
||||
const target = new Date(utc + offsetHours * 3600000)
|
||||
return `${pad(target.getHours())}:${pad(target.getMinutes())}`
|
||||
}
|
||||
|
||||
export function formatProductName(value: unknown): string {
|
||||
if (typeof value === 'string' || typeof value === 'number') return String(value).trim()
|
||||
if (!value || typeof value !== 'object') return ''
|
||||
const product = value as Record<string, unknown>
|
||||
for (const key of ['name', 'product', 'category']) {
|
||||
if (typeof product[key] === 'string' || typeof product[key] === 'number') {
|
||||
return String(product[key]).trim()
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
node_modules
|
||||
dist
|
||||
coverage
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
tdlib_data
|
||||
uploads
|
||||
data
|
||||
test
|
||||
*.log
|
||||
.git
|
||||
.claude
|
||||
@@ -0,0 +1,57 @@
|
||||
# Application
|
||||
NODE_ENV=development
|
||||
# Optional image build mirrors for networks where deb.debian.org is unavailable.
|
||||
DEBIAN_MIRROR=https://deb.debian.org/debian
|
||||
DEBIAN_SECURITY_MIRROR=https://deb.debian.org/debian-security
|
||||
PORT=3000
|
||||
APP_NAME=TelegramUserGateway
|
||||
CORS_ORIGINS=
|
||||
|
||||
# PostgreSQL
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_USERNAME=postgres
|
||||
DB_PASSWORD=postgres
|
||||
DB_DATABASE=telegram_gateway
|
||||
DB_SYNCHRONIZE=false
|
||||
DB_MIGRATIONS_RUN=true
|
||||
|
||||
# Redis
|
||||
REDIS_HOST=localhost
|
||||
REDIS_PORT=6379
|
||||
REDIS_PASSWORD=
|
||||
REDIS_DB=0
|
||||
REDIS_ENABLED=true
|
||||
|
||||
# JWT
|
||||
JWT_SECRET=change-me-to-a-secure-random-string
|
||||
JWT_EXPIRATION=24h
|
||||
|
||||
# TDLib
|
||||
TDLIB_PATH=/usr/local/lib/libtdjson.so
|
||||
TG_API_ID=0
|
||||
TG_API_HASH=your_api_hash_here
|
||||
|
||||
# 可选默认代理。账号未绑定专属代理时使用；只影响 Telegram TDLib 出站。
|
||||
TG_DEFAULT_PROXY_TYPE=
|
||||
TG_DEFAULT_PROXY_HOST=
|
||||
TG_DEFAULT_PROXY_PORT=
|
||||
TG_DEFAULT_PROXY_USERNAME=
|
||||
TG_DEFAULT_PROXY_PASSWORD=
|
||||
TG_DEFAULT_PROXY_SECRET=
|
||||
|
||||
# Rate Limiting
|
||||
RATE_LIMIT_DEFAULT_TTL=60000
|
||||
RATE_LIMIT_DEFAULT_LIMIT=30
|
||||
|
||||
# Webhook
|
||||
WEBHOOK_MAX_RETRIES=8
|
||||
WEBHOOK_RETRY_BACKOFF_BASE=5000
|
||||
WEBHOOK_TIMEOUT=10000
|
||||
|
||||
# File Storage
|
||||
FILE_STORAGE_PATH=./uploads
|
||||
FILE_MAX_SIZE=209715200
|
||||
|
||||
# Admin
|
||||
ADMIN_API_KEY=change-me-admin-key
|
||||
@@ -0,0 +1,28 @@
|
||||
node_modules/
|
||||
dist/
|
||||
coverage/
|
||||
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
*.local
|
||||
|
||||
tdlib_data/
|
||||
uploads/
|
||||
data/
|
||||
backups/
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
*.rdb
|
||||
*.binlog
|
||||
*.dump
|
||||
*.tar.gz
|
||||
*.log
|
||||
|
||||
.claude/
|
||||
.idea/
|
||||
.vscode/
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
test-report.html
|
||||
@@ -0,0 +1,95 @@
|
||||
# Production deployment
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Docker Desktop with the WSL 2 engine
|
||||
- Telegram `TG_API_ID` and `TG_API_HASH`
|
||||
- Strong, unique `DB_PASSWORD` and `JWT_SECRET`
|
||||
|
||||
Never commit `.env` or `tdlib_data/`. Existing Telegram API credentials that
|
||||
have previously appeared in scripts should be rotated in Telegram's developer
|
||||
portal before exposing this service publicly.
|
||||
|
||||
## Windows setup
|
||||
|
||||
Run the following once in an **Administrator PowerShell**, then restart Windows:
|
||||
|
||||
```powershell
|
||||
wsl --install --no-distribution
|
||||
```
|
||||
|
||||
After restart, open Docker Desktop and wait until the Linux engine reports that
|
||||
it is running.
|
||||
|
||||
## Configure
|
||||
|
||||
Copy `.env.example` to `.env` and set at least:
|
||||
|
||||
```dotenv
|
||||
NODE_ENV=production
|
||||
DB_USERNAME=postgres
|
||||
DB_PASSWORD=<strong-random-password>
|
||||
DB_DATABASE=telegram_gateway
|
||||
JWT_SECRET=<at-least-32-random-bytes>
|
||||
TG_API_ID=<telegram-api-id>
|
||||
TG_API_HASH=<telegram-api-hash>
|
||||
CORS_ORIGINS=https://your-control-plane.example
|
||||
```
|
||||
|
||||
Production uses migrations and keeps TypeORM synchronization disabled.
|
||||
|
||||
If Docker build containers cannot reach the default Debian repositories, set
|
||||
`DEBIAN_MIRROR` and `DEBIAN_SECURITY_MIRROR` to reachable mirrors. HTTP mirrors
|
||||
can bootstrap older base images that do not yet contain CA certificates; keep
|
||||
all application and credential traffic on HTTPS.
|
||||
|
||||
## Start
|
||||
|
||||
From the project root:
|
||||
|
||||
```powershell
|
||||
docker compose --env-file .env -f docker/docker-compose.yml up -d --build
|
||||
docker compose --env-file .env -f docker/docker-compose.yml ps
|
||||
```
|
||||
|
||||
Readiness and API documentation:
|
||||
|
||||
- `GET http://127.0.0.1:3000/api/admin/ready`
|
||||
- `GET http://127.0.0.1:3000/api/admin/health`
|
||||
- `http://127.0.0.1:3000/api/docs`
|
||||
|
||||
## Verify
|
||||
|
||||
```powershell
|
||||
npm run build
|
||||
npm test -- --runInBand
|
||||
npm run test:e2e -- --runInBand
|
||||
node test/real-readonly-smoke.js
|
||||
```
|
||||
|
||||
The real smoke test uses the session selected by `TG_SESSION_DIR` and performs
|
||||
read-only calls only: authorization state, connection, current identity, public
|
||||
chat lookup, and chat listing.
|
||||
|
||||
## Persistent data
|
||||
|
||||
Docker volumes preserve:
|
||||
|
||||
- PostgreSQL data
|
||||
- Redis data
|
||||
- uploaded files
|
||||
- TDLib authorization/session databases
|
||||
|
||||
Back up PostgreSQL and the `tdlibdata` volume together. Losing `tdlibdata`
|
||||
requires Telegram account authorization again.
|
||||
|
||||
## Operational behavior
|
||||
|
||||
- `/health` is a liveness check.
|
||||
- `/ready` returns failure if PostgreSQL or Redis is unavailable.
|
||||
- Telegram workers wait for native TDLib initialization before an account is
|
||||
marked started.
|
||||
- Active account sessions restart automatically after application restart.
|
||||
- Incoming TDLib updates are stored, mapped to webhook events, and delivered
|
||||
through the retry queue.
|
||||
- Webhook, proxy, password, audit, message-job, and admin data are tenant scoped.
|
||||
@@ -0,0 +1,112 @@
|
||||
# Telegram User Account Gateway
|
||||
|
||||
A production-grade REST API + Webhook gateway for managing Telegram user accounts via TDLib (not Bot API). Supports multi-tenant, multi-account management with independent proxies, message queue, rate limiting, and audit logging.
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Runtime**: Node.js 20+ with TypeScript
|
||||
- **Framework**: NestJS 11.x
|
||||
- **Database**: PostgreSQL 16 (TypeORM)
|
||||
- **Cache/Queue**: Redis 7 + BullMQ
|
||||
- **TDLib**: tdjson via worker_threads
|
||||
- **Auth**: JWT (Bearer tokens)
|
||||
- **API Docs**: Swagger at `/api/docs`
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
# Copy environment config
|
||||
cp .env.example .env
|
||||
|
||||
# Start infrastructure
|
||||
docker-compose -f docker/docker-compose.yml up -d postgres redis
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Run migrations
|
||||
npm run migration:run
|
||||
|
||||
# Start development server
|
||||
npm run start:dev
|
||||
```
|
||||
|
||||
## Docker Compose
|
||||
|
||||
```bash
|
||||
# Start all services
|
||||
docker compose --env-file .env -f docker/docker-compose.yml up -d --build
|
||||
```
|
||||
|
||||
See [DEPLOYMENT.md](./DEPLOYMENT.md) for production setup, readiness checks,
|
||||
persistent data, and Windows WSL requirements.
|
||||
|
||||
When used by 灵犀跨境, also read the repository-level
|
||||
[integration guide](../docs/TELEGRAM-GATEWAY.md).
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Admin
|
||||
- `GET /api/admin/health` - Health check (public)
|
||||
- `GET /api/admin/metrics` - Application metrics
|
||||
- `GET /api/admin/status` - TDLib client status
|
||||
|
||||
### Auth
|
||||
- `POST /api/auth/register` - Register user (public)
|
||||
- `POST /api/auth/login` - Login (public)
|
||||
|
||||
### Tenants
|
||||
- `POST /api/tenants` - Create tenant
|
||||
- `GET /api/tenants` - List tenants
|
||||
- `GET /api/tenants/:id` - Get tenant
|
||||
- `PUT /api/tenants/:id` - Update tenant
|
||||
- `DELETE /api/tenants/:id` - Delete tenant
|
||||
|
||||
### TG Accounts
|
||||
- `POST /api/tg-accounts` - Create Telegram account
|
||||
- `GET /api/tg-accounts` - List accounts
|
||||
- `GET /api/tg-accounts/:id` - Get account
|
||||
- `DELETE /api/tg-accounts/:id` - Remove account
|
||||
|
||||
### TG Account Authorization
|
||||
- `POST /api/tg-accounts/:id/auth/phone` - Set phone number
|
||||
- `POST /api/tg-accounts/:id/auth/code` - Submit verification code
|
||||
- `POST /api/tg-accounts/:id/auth/password` - Submit 2FA password
|
||||
- `POST /api/tg-accounts/:id/auth/logout` - Logout
|
||||
|
||||
### Chats & Messages
|
||||
- `GET /api/tg-accounts/:id/chats` - List chats
|
||||
- `GET /api/tg-accounts/:id/chats/:chatId/history` - Chat history
|
||||
- `POST /api/tg-accounts/:id/messages/send` - Send message (queued)
|
||||
- `POST /api/tg-accounts/:id/messages/send-direct` - Send message (direct)
|
||||
- `POST /api/tg-accounts/:id/messages/pin` - Pin a message
|
||||
- `POST /api/tg-accounts/:id/messages/unpin` - Unpin a message
|
||||
- `POST /api/tg-accounts/:id/messages/action` - Send typing/chat action
|
||||
- `GET /api/tg-accounts/:id/messages/:chatId/:messageId/link` - Get message link
|
||||
|
||||
### Contacts, Sessions & Groups
|
||||
- `GET /api/tg-accounts/:id/contacts/search?q=...` - Search by phone, username, or general query
|
||||
- `GET /api/tg-accounts/:id/dialogs/sessions` - List active Telegram sessions
|
||||
- `POST /api/tg-accounts/:id/dialogs/sessions/:sessionId/terminate` - Terminate session
|
||||
- `POST /api/tg-accounts/:id/dialogs/users/:userId/block` - Block user
|
||||
- `POST /api/tg-accounts/:id/dialogs/users/:userId/unblock` - Unblock user
|
||||
- `POST /api/tg-accounts/:id/groups/join-by-invite-link` - Join via invite link
|
||||
- `PUT /api/tg-accounts/:id/groups/:chatId/title` - Change group title
|
||||
- `PUT /api/tg-accounts/:id/groups/:chatId/photo` - Change/remove group photo
|
||||
|
||||
### Webhooks
|
||||
- `POST /api/tg-accounts/:id/webhooks` - Create webhook
|
||||
- `GET /api/tg-accounts/:id/webhooks` - List webhooks
|
||||
|
||||
### Operations
|
||||
- `GET /api/admin/audit-logs` - Query tenant-scoped audit logs
|
||||
- `GET /api/admin/audit-logs/accounts/:accountId` - Query account audit logs
|
||||
- `GET /api/admin/rate-limits/:accountId` - Get account rate-limit statistics
|
||||
|
||||
## Environment Variables
|
||||
|
||||
See `.env.example` for all available configuration options.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@@ -0,0 +1,49 @@
|
||||
FROM node:20-bookworm-slim AS builder
|
||||
|
||||
ARG DEBIAN_MIRROR=https://deb.debian.org/debian
|
||||
ARG DEBIAN_SECURITY_MIRROR=https://deb.debian.org/debian-security
|
||||
RUN sed -i "s|http://deb.debian.org/debian-security|${DEBIAN_SECURITY_MIRROR}|g; s|http://deb.debian.org/debian|${DEBIAN_MIRROR}|g" /etc/apt/sources.list.d/debian.sources
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y --no-install-recommends g++ make python3 \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN --mount=type=cache,target=/root/.npm \
|
||||
npm ci \
|
||||
--prefer-offline \
|
||||
--fetch-retries=8 \
|
||||
--fetch-retry-mintimeout=2000 \
|
||||
--fetch-retry-maxtimeout=30000 \
|
||||
--fetch-timeout=600000
|
||||
|
||||
COPY tsconfig.json nest-cli.json ./
|
||||
COPY src/ ./src/
|
||||
RUN npm run build
|
||||
RUN npm prune --omit=dev
|
||||
|
||||
FROM node:20-bookworm-slim
|
||||
|
||||
ARG DEBIAN_MIRROR=https://deb.debian.org/debian
|
||||
ARG DEBIAN_SECURITY_MIRROR=https://deb.debian.org/debian-security
|
||||
RUN sed -i "s|http://deb.debian.org/debian-security|${DEBIAN_SECURITY_MIRROR}|g; s|http://deb.debian.org/debian|${DEBIAN_MIRROR}|g" /etc/apt/sources.list.d/debian.sources
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y --no-install-recommends tini ca-certificates \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY --chown=node:node --from=builder /app/dist ./dist
|
||||
COPY --chown=node:node --from=builder /app/node_modules ./node_modules
|
||||
COPY --chown=node:node package.json ./
|
||||
|
||||
RUN mkdir -p /app/uploads /app/tdlib_data \
|
||||
&& chown node:node /app/uploads /app/tdlib_data
|
||||
|
||||
USER node
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
ENTRYPOINT ["/usr/bin/tini", "--"]
|
||||
CMD ["node", "dist/main.js"]
|
||||
@@ -0,0 +1,116 @@
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16-alpine
|
||||
container_name: tgw-postgres
|
||||
environment:
|
||||
POSTGRES_USER: ${DB_USERNAME:-postgres}
|
||||
POSTGRES_PASSWORD: ${DB_PASSWORD}
|
||||
POSTGRES_DB: ${DB_DATABASE:-telegram_gateway}
|
||||
volumes:
|
||||
- pgdata:/var/lib/postgresql/data
|
||||
- ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init.sql
|
||||
healthcheck:
|
||||
test: ['CMD-SHELL', 'pg_isready -U ${DB_USERNAME:-postgres} -d ${DB_DATABASE:-telegram_gateway}']
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
redis:
|
||||
image: redis:7-alpine
|
||||
container_name: tgw-redis
|
||||
volumes:
|
||||
- redisdata:/data
|
||||
healthcheck:
|
||||
test: ['CMD', 'redis-cli', 'ping']
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
app:
|
||||
build:
|
||||
context: ..
|
||||
dockerfile: docker/Dockerfile
|
||||
args:
|
||||
DEBIAN_MIRROR: ${DEBIAN_MIRROR:-https://deb.debian.org/debian}
|
||||
DEBIAN_SECURITY_MIRROR: ${DEBIAN_SECURITY_MIRROR:-https://deb.debian.org/debian-security}
|
||||
container_name: tgw-app
|
||||
ports:
|
||||
- '127.0.0.1:3010:3000'
|
||||
env_file:
|
||||
- ../.env
|
||||
environment:
|
||||
NODE_ENV: production
|
||||
DB_TYPE: postgres
|
||||
DB_SYNCHRONIZE: 'false'
|
||||
DB_MIGRATIONS_RUN: 'true'
|
||||
DB_HOST: postgres
|
||||
DB_PORT: 5432
|
||||
DB_USERNAME: ${DB_USERNAME:-postgres}
|
||||
DB_PASSWORD: ${DB_PASSWORD}
|
||||
DB_DATABASE: ${DB_DATABASE:-telegram_gateway}
|
||||
REDIS_HOST: redis
|
||||
REDIS_PORT: 6379
|
||||
REDIS_ENABLED: 'true'
|
||||
JWT_SECRET: ${JWT_SECRET}
|
||||
TDLIB_PATH: /app/node_modules/@prebuilt-tdlib/linux-x64-glibc/libtdjson.so
|
||||
TG_API_ID: ${TG_API_ID}
|
||||
TG_API_HASH: ${TG_API_HASH}
|
||||
TG_DEFAULT_PROXY_TYPE: ${TG_DEFAULT_PROXY_TYPE:-}
|
||||
TG_DEFAULT_PROXY_HOST: ${TG_DEFAULT_PROXY_HOST:-}
|
||||
TG_DEFAULT_PROXY_PORT: ${TG_DEFAULT_PROXY_PORT:-}
|
||||
TG_DEFAULT_PROXY_USERNAME: ${TG_DEFAULT_PROXY_USERNAME:-}
|
||||
TG_DEFAULT_PROXY_PASSWORD: ${TG_DEFAULT_PROXY_PASSWORD:-}
|
||||
TG_DEFAULT_PROXY_SECRET: ${TG_DEFAULT_PROXY_SECRET:-}
|
||||
depends_on:
|
||||
postgres:
|
||||
condition: service_healthy
|
||||
redis:
|
||||
condition: service_healthy
|
||||
volumes:
|
||||
- uploads:/app/uploads
|
||||
- tdlibdata:/app/tdlib_data
|
||||
restart: unless-stopped
|
||||
healthcheck:
|
||||
test:
|
||||
[
|
||||
'CMD',
|
||||
'node',
|
||||
'-e',
|
||||
"fetch('http://127.0.0.1:3000/api/admin/ready').then(r=>{if(!r.ok)process.exit(1)}).catch(()=>process.exit(1))",
|
||||
]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 10
|
||||
start_period: 20s
|
||||
|
||||
webhook-receiver:
|
||||
profiles: ['test']
|
||||
image: node:20-bookworm-slim
|
||||
container_name: tgw-webhook-receiver
|
||||
command: ['node', '/receiver/webhook-receiver.js']
|
||||
environment:
|
||||
WEBHOOK_TEST_SECRET: ${WEBHOOK_TEST_SECRET:-gateway-test-secret}
|
||||
WEBHOOK_FAIL_COUNT: ${WEBHOOK_FAIL_COUNT:-3}
|
||||
volumes:
|
||||
- ./scripts/webhook-receiver.js:/receiver/webhook-receiver.js:ro
|
||||
ports:
|
||||
- '18080:8080'
|
||||
restart: unless-stopped
|
||||
|
||||
socks5-proxy:
|
||||
profiles: ['test']
|
||||
image: node:20-bookworm-slim
|
||||
container_name: tgw-socks5-proxy
|
||||
command: ['node', '/proxy/socks5-proxy.js']
|
||||
volumes:
|
||||
- ./scripts/socks5-proxy.js:/proxy/socks5-proxy.js:ro
|
||||
ports:
|
||||
- '11080:1080'
|
||||
- '11081:1081'
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
pgdata:
|
||||
redisdata:
|
||||
uploads:
|
||||
tdlibdata:
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user