feat: release contextual omnichannel customer platform

Add Telegram, WhatsApp and email account management, realtime messaging, contextual multilingual AI, customer intelligence, knowledge workflows, enterprise controls, a unified design system and complete repository documentation.

.env.example

@@ -15,6 +15,12 @@ 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
+
 PUBLIC_WEBHOOK_BASE_URL=http://host.docker.internal:8088
 APP_PUBLIC_URL=http://127.0.0.1:8088
 

.gitattributes

@@ -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

.gitignore

@@ -1,13 +1,54 @@
-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
+
+# 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/

CHANGELOG.md

@@ -0,0 +1,45 @@
+# 版本迭代记录
+
+本项目遵循语义化版本。早期版本由经过脱敏的本地源码快照恢复，因此使用带日期的 `snapshot-*` 标签；自 `v1.0.0` 起按正式发布流程维护。
+
+## [1.0.0] - 2026-07-30
+
+### 新增
+
+- Telegram、普通 WhatsApp 和企业邮箱统一消息中心。
+- 多账号绑定、默认账号切换、渠道状态和账号级操作。
+- WebSocket 实时消息、全站通知、已读上报和历史游标分页。
+- 图片、文档、语音、贴纸、相册等媒体链路。
+- 上下文感知的多语种双向翻译、逐句意图识别及独立开关。
+- 每会话上下文记忆、自动压缩、最近消息优先和历史低优先级补齐。
+- 情绪、风险、客户画像、雷达图、知识库、智能回复与翻译备注。
+- WhatsApp 消息状态、撤回/编辑事件、输入状态、群组、联系人、代理、设备、失败重试、死信重放及备份接口。
+- 团队、RBAC、API Key、审计、商机、任务、分析和支付基础能力。
+- 全站蓝色品牌设计系统和 Telegram 风格消息界面。
+
+### 修复
+
+- 修复会话点击后错误置顶、删除群组后残留、消息列表空值崩溃。
+- 修复语言切换、意图开关 JSON 写入、智能回复采纳与关闭。
+- 修复头像、用户名、国家信息和渠道文案混用。
+- 修复历史消息、实时会话列表、WhatsApp 媒体下载和状态同步问题。
+
+## [snapshot-2026.07.30-pre-ui] - 2026-07-30
+
+- 多账号与 WhatsApp 接入后的界面改造前快照。
+- 已具备主要业务模块，保留后续上下文翻译与界面统一前的状态。
+
+## [snapshot-2026.07.28-pre-multiaccount] - 2026-07-28
+
+- Telegram 消息闭环和主要 SaaS 页面快照。
+- 多账号、WhatsApp 网关与后续企业级能力尚未合入。
+
+## [snapshot-2026.07.27-platform] - 2026-07-27
+
+- React 前端、Node.js API、PostgreSQL 与 Telegram Gateway 集成版本。
+- 建立客户、消息、AI、团队与设置等平台基础。
+
+## [snapshot-2026.07.25-initial] - 2026-07-25
+
+- 初始 Web 产品原型与页面结构。
+- 作为历史参考保留，不建议部署。

CONTRIBUTING.md

@@ -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. 推送分支和标签，随后按部署文档发布。

README.md

@@ -1,53 +1,79 @@
 # 灵犀跨境
 
-灵犀跨境是面向跨境业务团队的 Telegram 客户沟通与 AI 经营平台。当前版本只开放 Telegram，所有开放功能均访问真实 API、PostgreSQL、DeepSeek 和 Telegram Gateway，不包含前端 Mock 数据。
+灵犀跨境是一套面向跨境业务团队的多渠道客户经营 SaaS。系统将 Telegram、普通 WhatsApp 账号和企业邮箱接入统一消息中心，并提供上下文翻译、逐句意图识别、情绪与风险分析、客户画像、商机、任务、知识库和经营分析能力。
 
-## 服务组成
+当前仓库包含 Web 前端、业务 API 和 WhatsApp Gateway；Telegram 通过独立部署的 Telegram Gateway 接入。开放功能均连接真实数据库和真实网关，不使用前端 Mock 作为生产数据源。
 
-- React + TypeScript 前端，由 Nginx 提供静态资源和 API 反向代理。
-- Node.js API，负责独立租户、用户认证、CRM、会话、AI 和网关适配。
-- PostgreSQL，持久化租户隔离的业务数据。
-- 已有 Telegram Gateway，负责真实 Telegram 账号与 TDLib 操作。
-- DeepSeek Anthropic-compatible API，负责翻译、情感、意图、风险、摘要和回复建议。
+## 核心能力
 
-## Docker 启动
+- 多租户注册、登录、RBAC、API Key、密码修改和会话撤销。
+- 多 Telegram、WhatsApp、企业邮箱账号绑定、切换和状态管理。
+- 实时会话、历史分页、已读、引用、媒体、消息状态和 WebSocket 推送。
+- 自动识别目标语言的双向翻译，逐会话上下文压缩与历史后台补齐。
+- 情感、意图、风险、摘要、智能回复和知识库辅助。
+- 客户、标签、画像、商机、任务、团队、通知、审计和经营分析。
+- WhatsApp 群组、联系人、代理、设备、重试、死信重放与备份接口。
 
-1. 复制 `.env.example` 为 `.env`。
-2. 生成数据库、JWT、Webhook 随机密钥。
-3. 设置轮换后的 `DEEPSEEK_API_KEY`。
-4. 设置 Telegram Gateway 的租户令牌、租户 ID 和账号 ID。
-5. 启动：
+## 快速启动
+
+要求：Docker Engine 24+、Docker Compose v2，以及一个可访问的 Telegram Gateway。
 
 ```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
+
+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)
+- [测试策略](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) 中的私下通报流程处理。

SECURITY.md

@@ -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-*` 仅用于审计与回溯，不提供安全维护。

VERSION

@@ -0,0 +1 @@
+1.0.0

docker-compose.yml

@@ -16,6 +16,21 @@ services:
       retries: 10
     restart: unless-stopped
 
+  whatsapp-gateway:
+    build:
+      context: ./whatsapp-gateway
+    environment:
+      PORT: 3200
+      DATA_DIR: /data
+      WHATSAPP_GATEWAY_TOKEN: ${WHATSAPP_GATEWAY_TOKEN:?WHATSAPP_GATEWAY_TOKEN is required}
+      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 +48,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 +75,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
@@ -77,3 +98,4 @@ services:
 
 volumes:
   lingxi_pgdata:
+  lingxi_whatsapp_data:

docs/API.md

@@ -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 文档并进行契约测试。

docs/ARCHITECTURE.md

@@ -0,0 +1,79 @@
+# 系统架构
+
+## 1. 架构目标
+
+灵犀跨境以“租户隔离、渠道可扩展、消息实时、AI 异步化”为核心。浏览器只访问统一 Web/API 入口；Telegram、WhatsApp、邮箱和模型凭据只保存在服务端环境与加密存储中。
+
+```text
+Browser
+  │ HTTPS / WebSocket
+  ▼
+Nginx (web:80)
+  ├── React SPA
+  └── /api, /internal, /health ──► Node.js API (:3100)
+                                     ├── PostgreSQL 16
+                                     ├── DeepSeek Anthropic API
+                                     ├── Telegram Gateway / TDLib
+                                     ├── WhatsApp Gateway / Baileys
+                                     ├── IMAP + SMTP
+                                     └── Stripe
+```
+
+## 2. 仓库结构
+
+| 路径 | 职责 |
+| --- | --- |
+| `src/` | React 页面、组件、状态、API 客户端、国际化与类型 |
+| `server/src/index.js` | 认证、租户业务、消息、AI、渠道、Webhook、WebSocket 与数据初始化 |
+| `whatsapp-gateway/` | 普通 WhatsApp 多账号连接、消息/媒体/群组/联系人操作 |
+| `tests/e2e/` | Playwright 桌面与移动端验收 |
+| `docker/` | Nginx 与邮件协议测试辅助镜像 |
+| `docs/` | 架构、部署、接口、测试与运维文档 |
+
+## 3. 核心数据流
+
+### 入站消息
+
+1. Telegram/WhatsApp 网关向带租户和渠道标识的内部 Webhook 投递事件；邮箱轮询器从 IMAP 拉取邮件。
+2. API 校验签名、渠道归属与事件幂等标识。
+3. 消息、会话、联系人和状态写入 PostgreSQL。
+4. API 向当前租户的 WebSocket 客户端广播增量事件。
+5. 文本消息进入 AI 高优先级队列；较早历史进入低优先级补齐队列。
+6. 翻译、意图、情感、风险和会话记忆完成后再次广播更新。
+
+### 出站消息
+
+1. 前端提交渠道、会话、正文、媒体、回复目标和客户端幂等标识。
+2. API 验证 RBAC、租户归属、渠道状态与限流。
+3. 先落库发送任务，再调用对应网关或 SMTP。
+4. 网关状态事件持续对账已发送、已送达、已读和失败状态。
+5. 可恢复错误进入持久化重试；超过阈值进入死信等待人工重放。
+
+### 上下文 AI
+
+- 最近消息优先处理，以保证实时聊天速度。
+- 每个会话维护独立上下文；超过长度阈值后压缩为结构化记忆。
+- 历史消息按游标后台补齐，避免首次打开阻塞。
+- 翻译目标可自动识别，也可由坐席指定；智能回复保持人工确认发送。
+
+## 4. 隔离与权限
+
+- JWT 含用户、租户和角色信息；业务查询必须带 `tenant_id`。
+- 渠道、会话、消息、客户、任务与管理资源均在服务端校验租户归属。
+- WebSocket 使用短期票据，不把长期 JWT 放入 URL。
+- API Key 仅在创建时返回明文，持久化摘要并支持撤销。
+- 邮箱密码使用 `EMAIL_CREDENTIAL_KEY` 加密；网关登录态位于独立持久卷。
+
+## 5. 可靠性边界
+
+- PostgreSQL 是平台业务数据的事实来源。
+- Telegram/WhatsApp 平台状态由异步事件最终一致对账。
+- WebSocket 只用于加速展示；断线后客户端必须通过 REST 游标补齐。
+- Webhook 接收快速确认，耗时处理异步化；失败投递可查询和重放。
+- AI 失败不能阻断原始消息收发，任务可独立重试。
+
+## 6. 当前约束
+
+- Telegram Gateway 为独立仓库和独立部署，本仓库只保存适配与配置。
+- 普通 WhatsApp 接入依赖非官方 Web 多设备协议，生产使用前必须评估账号风控和平台条款。
+- API 目前集中在单入口文件，业务增长后应按领域拆分路由、服务、仓储和迁移文件。

docs/BACKUP-RESTORE.md

@@ -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、失败点和改进项。
+
+仅“备份成功”不等于可恢复；没有完成验收的备份不得视为合格。

docs/CONFIGURATION.md

@@ -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 日志。

docs/DEPLOYMENT.md

@@ -0,0 +1,73 @@
+# 部署与回滚
+
+## 1. 前置条件
+
+- Linux x86_64 主机，建议 4 核、8 GB 内存、50 GB 可扩展磁盘。
+- Docker Engine 24+、Compose v2。
+- 域名、HTTPS 证书和可访问的 Telegram Gateway。
+- 出站可访问 Telegram、WhatsApp、DeepSeek、邮箱服务和 Stripe。
+
+## 2. 首次部署
+
+```bash
+git clone ssh://git@git.ohkeji.cn:23/wmq/lingxi-web.git
+cd lingxi-web
+cp .env.example .env
+# 编辑 .env 并替换全部占位值
+docker compose --env-file .env build
+docker compose --env-file .env up -d
+docker compose ps
+```
+
+检查：
+
+```bash
+curl -fsS http://127.0.0.1:8088/health
+docker compose exec api node -e "fetch('http://127.0.0.1:3100/health/ready').then(async r=>{console.log(await r.text());process.exit(r.ok?0:1)})"
+docker compose logs --tail=100 api whatsapp-gateway web
+```
+
+## 3. 生产入口
+
+在 Compose 外层部署 Caddy、Nginx 或云负载均衡：
+
+- 只对公网开放 80/443。
+- 将 HTTPS 请求转发到 `127.0.0.1:8088`。
+- 保留 `Host`、`X-Forwarded-For`、`X-Forwarded-Proto`。
+- WebSocket 路径启用 Upgrade/Connection 头并提高空闲超时。
+- PostgreSQL、API、WhatsApp Gateway 不映射公网端口。
+
+将 `APP_PUBLIC_URL` 和 `PUBLIC_WEBHOOK_BASE_URL` 改为正式 HTTPS 地址，随后重建 API。
+
+## 4. 更新
+
+```bash
+git fetch --tags
+git checkout main
+git pull --ff-only
+docker compose --env-file .env build
+docker compose --env-file .env up -d
+docker compose ps
+```
+
+更新前先执行数据库和 WhatsApp 登录态备份。更新后验证登录、渠道状态、收发、WebSocket、AI、媒体和健康检查。
+
+## 5. 回滚
+
+1. 记录当前版本：`git describe --tags --always`。
+2. 恢复与目标版本兼容的数据库备份。
+3. 检出稳定标签，例如 `git checkout v1.0.0`。
+4. 重新构建并启动：`docker compose up -d --build`。
+5. 执行健康和关键业务检查。
+
+`snapshot-*` 是历史源码归档，不保证数据库向后兼容，不应直接作为生产回滚点。
+
+## 6. 零停机演进
+
+当前 Compose 是单实例，会有短暂重启窗口。需要零停机时应：
+
+- 将 PostgreSQL 迁移到托管或高可用实例。
+- 将 Web/API 部署为至少两个实例并使用外部负载均衡。
+- WebSocket 使用共享事件总线或粘性会话。
+- 将持久任务改用共享队列并确保幂等。
+- 数据库变更采用“先兼容、再切换、后清理”的多阶段迁移。

docs/OPERATIONS.md

@@ -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 小时未成功。

docs/TECH-STACK.md

@@ -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 采用异步增强而非消息主链路依赖，模型故障时仍可正常沟通。

docs/TESTING.md

@@ -0,0 +1,45 @@
+# 测试策略
+
+## 测试层次
+
+| 层次 | 命令 | 覆盖 |
+| --- | --- | --- |
+| 类型检查 | `npm run typecheck` | 前端 TypeScript |
+| 生产构建 | `npm run build` | 类型、打包、资源引用 |
+| API 单元/业务 | `npm test --prefix server` | 业务函数、权限与数据逻辑 |
+| 邮件协议 | `npm run test:email-protocol --prefix server` | IMAP/SMTP 协议 |
+| 邮件 API E2E | `npm run test:email-api --prefix server` | 真实测试邮件服务链路 |
+| WhatsApp 网关 | `npm test --prefix whatsapp-gateway` | 路由、状态、消息与可靠性 |
+| 浏览器 E2E | `npm run test:e2e` | 桌面/移动端主要用户路径 |
+
+## 提交前最低要求
+
+- 文档或纯样式：类型检查、构建、相关页面 E2E。
+- 前端业务：类型检查、构建、完整 Playwright。
+- API：语法检查、API 测试、相关 E2E。
+- 网关：网关测试、容器健康、真实测试账号冒烟。
+- 认证、租户、支付、备份：完整回归并人工复核安全边界。
+
+## 真实链路验收
+
+Mock 测试不能证明渠道真实可用。发布前使用无重要数据的测试账号逐项验证：
+
+1. Telegram 手机号、验证码、二步密码登录。
+2. WhatsApp QR/配对、断开、重连和多账号切换。
+3. 邮箱 IMAP 首次同步、SMTP 发信和附件。
+4. 双向文本、引用、图片、文档、语音、贴纸、相册。
+5. 已发送、送达、已读、编辑、撤回、输入状态。
+6. 历史分页、断网恢复、WebSocket 重连和增量补齐。
+7. 多语言翻译、意图开关、会话记忆压缩和 AI 失败降级。
+8. Webhook 失败重试、死信、人工重放和幂等。
+9. RBAC 越权请求、租户交叉资源 ID 和登录限流。
+
+## 测试数据
+
+- 只使用专用测试租户和测试账号。
+- 不把手机号、验证码、会话凭据、邮件密码和生产消息写入测试代码或报告。
+- Playwright 失败产物可能包含页面数据；归档前脱敏，且不得提交 Git。
+
+## 发布记录
+
+每次版本标签应记录执行日期、提交 SHA、环境、测试命令、通过/跳过/失败数量和已知限制。跳过项必须说明原因，不能等同于通过。

index.html

@@ -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>

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "type": "module",
-  "description": "灵犀跨境 - Telegram 跨境 AI 客户经营平台",
+  "description": "灵犀跨境 - Telegram、WhatsApp 与企业邮箱 AI 客户经营平台",
   "scripts": {
     "dev": "vite",
     "build": "tsc --noEmit && vite build",

playwright.config.ts

@@ -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: {

public/brand-mark.svg

@@ -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>

public/brand-symbol.svg

@@ -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>

server/package-lock.json

@@ -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",

server/package.json

@@ -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",

server/src/ai.js

@@ -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,8 +69,8 @@ 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) => {
+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}）` : ''

server/src/country.js

@@ -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,
+  }
+}

server/src/db.js

@@ -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],
   )
 }

server/src/knowledge.js

@@ -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(),
+  }
+}

server/src/whatsapp.js

@@ -0,0 +1,38 @@
+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,
+    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 })
+}

server/test/business.test.js

@@ -50,5 +50,7 @@ test('Email 渠道凭据使用认证加密且可正确解密', () => {
   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(':')))
 })

src/app/router/index.tsx

@@ -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 />

src/app/store/auth.ts

@@ -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')

src/components/auth/AuthShell.tsx

@@ -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>
+  )
+}

src/components/common/LiveDataBadge.tsx

@@ -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}

src/components/common/PageHeader.tsx

@@ -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>

src/components/common/StatCard.tsx

@@ -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>

src/components/customer/CustomerProfileRadar.tsx

@@ -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"

src/components/inbox/AiReplies.tsx

@@ -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>
       )}

src/components/inbox/Composer.tsx

@@ -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…

src/components/inbox/ConversationInsightBar.tsx

@@ -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,11 +38,20 @@ 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>
@@ -54,6 +65,12 @@ export function ConversationInsightBar({
         </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} />

src/components/inbox/ConversationList.tsx

@@ -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)

src/components/inbox/InsightPanel.tsx

@@ -46,9 +46,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 +78,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 +92,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 +122,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" />
@@ -177,11 +188,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,7 +249,7 @@ 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) && (
@@ -240,7 +296,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

src/components/inbox/MessageBubble.tsx

@@ -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" />}

src/components/layout/AppLayout.tsx

@@ -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>

src/components/layout/Sidebar.tsx

@@ -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>

src/components/layout/Topbar.tsx

@@ -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>

src/components/ui/button.tsx

@@ -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',
       },

src/components/ui/card.tsx

@@ -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>) {

src/components/ui/switch.tsx

@@ -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(

src/components/ui/table.tsx

@@ -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} />
 }

src/config/constants.ts

@@ -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: '' }
 }
 
 /** 行业 */

src/config/languages.ts

@@ -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)

src/config/pricingPlans.ts

@@ -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 },
   },

src/config/roles.ts

@@ -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' },
 }
 

src/pages/analytics/AnalyticsPage.tsx

@@ -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>
   )
 }

src/pages/auth/LoginPage.tsx

@@ -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>
   )
 }

src/pages/auth/RegisterPage.tsx

@@ -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>
   )
 }

src/pages/billing/BillingPage.tsx

@@ -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">

src/pages/channels/ChannelsPage.tsx

@@ -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>
         )}

src/pages/customers/CustomerDetailPage.tsx

@@ -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,

src/pages/customers/CustomersPage.tsx

@@ -175,10 +175,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 +204,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 +235,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 +246,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>

src/pages/dashboard/DashboardPage.tsx

@@ -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
@@ -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">

src/pages/help/HelpPage.tsx

@@ -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' },
 ]
 

src/pages/knowledge/KnowledgePage.tsx

@@ -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>
   )

src/pages/opportunities/OpportunitiesPage.tsx

@@ -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>

src/pages/risks/RisksPage.tsx

@@ -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>

src/pages/settings/SettingsPage.tsx

@@ -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>
   )
 }

src/pages/translate/TranslatePage.tsx

@@ -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 />}
       />
 

src/services/api/ai.ts

@@ -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 */

src/services/api/channels.ts

@@ -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 },
+  )
+}

src/services/api/client.ts

@@ -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) {

src/services/api/conversations.ts

@@ -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)
+}

src/styles/index.css

@@ -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);

src/types/ai.ts

@@ -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 {

src/types/crm.ts

@@ -46,6 +46,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 +66,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

src/types/knowledge.ts

@@ -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 {

src/types/messaging.ts

@@ -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,18 @@ 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
+  whatsappContentType?: string
   attachmentMimeType?: string
   attachmentSize?: number
   stickerEmoji?: string
@@ -74,12 +102,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 +170,10 @@ export interface ChannelConnection {
   smtpSecure?: boolean
   syncDays?: number
   lastVerifiedAt?: string
+  isDefault?: boolean
+  provider?: string
+  pairingCode?: string
+  qrDataUrl?: string
 }
 
 export interface ChannelSyncLog {
@@ -122,6 +190,8 @@ export interface SendMessagePayload {
   text: string
   /** 已确认的中文参考译文，仅在内部消息记录中保存 */
   translationCn?: string
+  /** auto 表示根据客户最近消息或客户画像自动选择目标语言 */
+  targetLang?: string
   replyToId?: string
   replyPreview?: string
   type?: MessageType

src/types/org.ts

@@ -95,6 +95,8 @@ export interface AiSettings {
   autoGenerate: boolean
   requireConfirm: boolean
   sentimentAnalysis: boolean
+  messageIntentAnalysis: boolean
+  contextualTranslation: boolean
   riskAlert: boolean
   cultureCheck: boolean
   allowHistoryRef: boolean

tests/e2e/design-system.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test, type Page } from '@playwright/test'
+
+const password = 'Lingxi-Design-2026!'
+
+async function login(page: Page, suffix: string) {
+  const account = `design-${suffix}-${Date.now()}@local.test`
+  const registration = await page.request.post('/api/auth/register', {
+    data: {
+      name: 'Design Audit',
+      account,
+      password,
+      company: 'Design Audit',
+      industry: '跨境电商',
+      teamSize: '1-10人',
+    },
+  })
+  expect(registration.ok()).toBeTruthy()
+  await page.goto('/login')
+  await expect(page.locator('img[src="/brand-mark.svg"]')).toHaveCount(2)
+  await page.locator('input[autocomplete="username"]').fill(account)
+  await page.locator('input[autocomplete="current-password"]').fill(password)
+  await page.getByRole('button', { name: '登录' }).click()
+  await expect(page).toHaveURL(/\/dashboard/)
+  await expect(page.getByText('今日工作概览')).toBeVisible()
+}
+
+test('统一设计系统桌面端页面验收', async ({ page }, testInfo) => {
+  test.skip(testInfo.project.name !== 'desktop-chromium', '仅在桌面视口执行')
+  await login(page, 'desktop')
+
+  const pages = [
+    ['/dashboard', '今日工作概览', 'dashboard'],
+    ['/inbox', '消息', 'inbox'],
+    ['/channels', '渠道与账号', 'channels'],
+    ['/customers', '客户管理', 'customers'],
+    ['/opportunities', '商机与跟进', 'opportunities'],
+    ['/knowledge', '企业知识库', 'knowledge'],
+    ['/analytics', '业务分析', 'analytics'],
+    ['/settings', '管理企业资料、通知、智能能力与账号安全', 'settings'],
+  ] as const
+
+  for (const [url, marker, name] of pages) {
+    await page.goto(url)
+    await expect(page.getByText(marker, { exact: false }).first()).toBeVisible()
+    await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth + 1)).toBe(true)
+    await page.screenshot({ path: testInfo.outputPath(`${name}.png`), fullPage: name !== 'inbox' })
+  }
+
+  await page.goto('/analytics')
+  await page.getByRole('button', { name: '近 7 天', exact: true }).click()
+  await expect(page.getByRole('button', { name: '近 7 天', exact: true })).toHaveAttribute('aria-pressed', 'true')
+
+  await page.goto('/opportunities?tab=tasks')
+  await expect(page).toHaveURL(/tab=tasks/)
+  await expect(page.getByText('任务', { exact: false }).first()).toBeVisible()
+})
+
+test('统一设计系统移动端页面验收', async ({ page }, testInfo) => {
+  test.skip(testInfo.project.name !== 'mobile-chromium', '仅在移动视口执行')
+  await login(page, 'mobile')
+
+  await page.screenshot({ path: testInfo.outputPath('dashboard-mobile.png'), fullPage: true })
+  await page.goto('/settings')
+  await expect(page.getByLabel('设置分类')).toBeVisible()
+  await page.getByLabel('设置分类').selectOption('ai')
+  await expect(page.getByLabel('设置分类')).toHaveValue('ai')
+  await expect(page.getByText('控制回复建议、分析和发送前确认规则')).toBeVisible()
+  await page.screenshot({ path: testInfo.outputPath('settings-mobile.png'), fullPage: true })
+
+  await page.goto('/inbox')
+  await expect(page.getByText('消息', { exact: true }).first()).toBeVisible()
+  await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
+  await page.screenshot({ path: testInfo.outputPath('inbox-mobile.png'), fullPage: false })
+})

tests/e2e/intelligence.spec.ts

@@ -0,0 +1,123 @@
+import { expect, test } from '@playwright/test'
+
+const account = process.env.E2E_ACCOUNT || 'e2e-1785008967@local.test'
+const password = process.env.E2E_PASSWORD || 'Lingxi-E2E-2026!'
+
+test('知识库与逐句意图在真实页面可用', async ({ page }, testInfo) => {
+  test.skip(testInfo.project.name !== 'desktop-chromium', '仅在桌面视口执行')
+
+  const loginResponse = await page.request.post('/api/auth/login', {
+    data: { account, password },
+  })
+  expect(loginResponse.ok()).toBeTruthy()
+  const loginPayload = await loginResponse.json()
+  const token = loginPayload.data.token as string
+  const headers = { Authorization: `Bearer ${token}` }
+
+  await page.goto('/login')
+  await page.locator('input[autocomplete="username"]').fill(account)
+  await page.locator('input[autocomplete="current-password"]').fill(password)
+  await page.getByRole('button', { name: '登录' }).click()
+  await expect(page).toHaveURL(/\/dashboard/)
+
+  await page.goto('/knowledge')
+  await expect(page.getByText('已分段索引', { exact: true })).toBeVisible()
+  await expect(page.getByRole('button', { name: '上传文件' })).toBeVisible()
+  await page.screenshot({ path: testInfo.outputPath('knowledge-index.png'), fullPage: true })
+
+  const conversationsResponse = await page.request.get('/api/conversations', { headers })
+  const conversations = (await conversationsResponse.json()).data.list as Array<{ id: string }>
+  let conversationId = ''
+  let messageId = ''
+  let messageCount = 0
+  for (const conversation of conversations.slice(0, 20)) {
+    const messagesResponse = await page.request.get(
+      `/api/conversations/${encodeURIComponent(conversation.id)}/messages`,
+      { headers },
+    )
+    const messages = (await messagesResponse.json()).data as Array<{
+      id: string
+      sender: string
+      type: string
+      originalText: string
+      intentAnalysis?: unknown
+    }>
+    const candidate = [...messages].reverse().find((message) => (
+      message.sender === 'customer'
+      && message.type === 'text'
+      && /[\p{L}]/u.test(message.originalText || '')
+    ))
+    if (candidate) {
+      conversationId = conversation.id
+      messageId = candidate.id
+      messageCount = messages.length
+      break
+    }
+  }
+  expect(conversationId).not.toBe('')
+  const aiStatusResponse = await page.request.get(
+    `/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
+    { headers },
+  )
+  expect(aiStatusResponse.ok()).toBeTruthy()
+  const aiStatus = (await aiStatusResponse.json()).data
+  expect(['not-started', 'queued', 'running', 'completed']).toContain(aiStatus.backfill.status)
+  if (messageCount > 80) {
+    await expect.poll(async () => {
+      const response = await page.request.get(
+        `/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
+        { headers },
+      )
+      return (await response.json()).data.context.status
+    }, { timeout: 30_000 }).toBe('ready')
+    const readyResponse = await page.request.get(
+      `/api/conversations/${encodeURIComponent(conversationId)}/ai-status`,
+      { headers },
+    )
+    const readyStatus = (await readyResponse.json()).data
+    expect(readyStatus.context.sourceMessageCount).toBeGreaterThan(0)
+    expect(readyStatus.context.memory.summary).toBeTruthy()
+  }
+  const analyzeResponse = await page.request.post(
+    `/api/conversations/${encodeURIComponent(conversationId)}/messages/${encodeURIComponent(messageId)}/analyze`,
+    { headers, data: { force: true } },
+  )
+  expect(analyzeResponse.ok()).toBeTruthy()
+
+  await page.goto(`/inbox?c=${encodeURIComponent(conversationId)}`)
+  await expect(page.getByTestId('conversation-insight-bar')).toBeVisible()
+  await expect(page.getByTestId('conversation-intent-toggle')).toBeVisible()
+  await expect(
+    page.getByRole('switch', { name: '当前会话逐句意图识别' }),
+  ).toHaveAttribute('aria-checked', 'true')
+  await expect.poll(() => page.getByTestId('message-intent').count()).toBeGreaterThan(0)
+  const intentCount = await page.getByTestId('message-intent').count()
+  const visibleIntent = page.getByTestId('message-intent').nth(intentCount - 1)
+  await visibleIntent.scrollIntoViewIfNeeded()
+  await expect(visibleIntent).toBeVisible()
+  const intentSwitch = page.getByRole('switch', { name: '当前会话逐句意图识别' })
+  await intentSwitch.click()
+  await expect(intentSwitch).toHaveAttribute('aria-checked', 'false')
+  await expect(page.getByTestId('message-intent')).toHaveCount(0)
+  await page.reload()
+  await expect(
+    page.getByRole('switch', { name: '当前会话逐句意图识别' }),
+  ).toHaveAttribute('aria-checked', 'false')
+  await page.getByRole('switch', { name: '当前会话逐句意图识别' }).click()
+  await expect(
+    page.getByRole('switch', { name: '当前会话逐句意图识别' }),
+  ).toHaveAttribute('aria-checked', 'true')
+  await expect.poll(() => page.getByTestId('message-intent').count()).toBeGreaterThan(0)
+  await expect(page.getByText('Unexpected Application Error!', { exact: true })).toHaveCount(0)
+  await page.screenshot({ path: testInfo.outputPath('message-intent.png'), fullPage: false })
+
+  await page.goto('/settings')
+  await page.getByRole('button', { name: '智能回复' }).click()
+  const globalIntentSwitch = page.getByRole('switch', { name: '逐条客户消息意图识别' })
+  await expect(globalIntentSwitch).toBeVisible()
+  await globalIntentSwitch.click()
+  await expect(globalIntentSwitch).toHaveAttribute('aria-checked', 'false')
+  await globalIntentSwitch.click()
+  await expect(globalIntentSwitch).toHaveAttribute('aria-checked', 'true')
+  await expect(page.getByText('invalid input syntax for type json')).toHaveCount(0)
+})

tests/e2e/lingxi.spec.ts

@@ -11,6 +11,27 @@ async function login(page: Page, loginAccount = account, loginPassword = passwor
   await expect(page).toHaveURL(/\/dashboard$/)
 }
 
+test('过期登录状态会回到登录页而不是显示网络错误', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.localStorage.setItem('lx-auth', JSON.stringify({
+      state: {
+        token: 'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjF9.expired',
+        user: { id: 'expired-user', name: 'Expired User', role: 'admin' },
+        tenant: { id: 'expired-tenant', name: 'Expired Tenant', plan: 'pro' },
+        onboarded: true,
+      },
+      version: 0,
+    }))
+  })
+  await page.goto('/dashboard')
+  await expect(page).toHaveURL(/\/login(?:\?|$)/)
+  await expect(page.getByText('登录状态已过期，请重新登录')).toBeVisible()
+  await expect.poll(() => page.evaluate(() => {
+    const persisted = JSON.parse(window.localStorage.getItem('lx-auth') || '{}')
+    return persisted.state?.token ?? null
+  })).toBeNull()
+})
+
 test('Telegram 手机号验证码和二步密码登录向导', async ({ page, request }, testInfo) => {
   const suffix = `${Date.now()}-${testInfo.project.name}`
   const loginAccount = `channel-e2e-${suffix}@local.test`
@@ -20,8 +41,11 @@ test('Telegram 手机号验证码和二步密码登录向导', async ({ page, re
   })
   expect(response.ok()).toBeTruthy()
   await login(page, loginAccount, loginPassword)
-  await page.goto('/channels?setup=telegram')
-  await expect(page.getByTestId('telegram-onboarding')).toContainText('先绑定 Telegram')
+  await page.goto('/channels?setup=choose')
+  await expect(page.getByTestId('channel-onboarding')).toContainText('不强制绑定 Telegram')
+  await expect(page.getByTestId('choose-whatsapp')).toBeVisible()
+  await expect(page.getByTestId('choose-email')).toBeVisible()
+  await page.getByTestId('choose-telegram').click()
   await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
   await expect(page.getByLabel('Telegram 验证码', { exact: true })).toHaveCount(0)
   const sendTelegramCode = page.getByRole('button', { name: '发送 Telegram 验证码' })
@@ -29,10 +53,29 @@ test('Telegram 手机号验证码和二步密码登录向导', async ({ page, re
   await sendTelegramCode.click()
   await expect(page.getByText('请输入国际格式手机号，例如 +8613800138000')).toBeVisible()
   await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
-  await expect(page.getByText('每个企业独立绑定账号')).toBeVisible()
+  await expect(page.getByText('可以继续添加其他工作账号', { exact: false })).toBeVisible()
   await page.screenshot({ path: testInfo.outputPath('telegram-login-wizard.png'), fullPage: true })
 })
 
+test('WhatsApp 普通账号关联设备向导', async ({ page, request }, testInfo) => {
+  const suffix = `${Date.now()}-${testInfo.project.name}`
+  const loginAccount = `whatsapp-e2e-${suffix}@local.test`
+  const loginPassword = 'Lingxi-WhatsApp-2026!'
+  const response = await request.post('/api/auth/register', {
+    data: { name: 'WhatsApp E2E', account: loginAccount, password: loginPassword, company: 'WhatsApp E2E', industry: '跨境电商', teamSize: '1-10人' },
+  })
+  expect(response.ok()).toBeTruthy()
+  await login(page, loginAccount, loginPassword)
+  await page.goto('/channels?setup=choose')
+  await page.getByTestId('choose-whatsapp').click()
+  await expect(page.getByText('普通 WhatsApp 关联设备接入', { exact: true })).toBeVisible()
+  await expect(page.getByText('并非 Meta 官方 Business Cloud API', { exact: false })).toBeVisible()
+  await expect(page.getByRole('button', { name: '生成 WhatsApp 配对码' })).toBeVisible()
+  await page.getByRole('button', { name: '生成 WhatsApp 配对码' }).click()
+  await expect(page.getByText('请输入包含国家/地区代码的 WhatsApp 手机号')).toBeVisible()
+  await page.screenshot({ path: testInfo.outputPath('whatsapp-link-device-wizard.png'), fullPage: true })
+})
+
 test('企业邮箱 IMAP 和 SMTP 连接向导', async ({ page, request }, testInfo) => {
   const suffix = `${Date.now()}-${testInfo.project.name}`
   const loginAccount = `email-e2e-${suffix}@local.test`
@@ -47,11 +90,30 @@ test('企业邮箱 IMAP 和 SMTP 连接向导', async ({ page, request }, testIn
   await emailCard.getByRole('button', { name: '连接', exact: true }).click()
   await expect(page.getByText('IMAP 收信 + SMTP 发信', { exact: true })).toBeVisible()
   await expect(page.getByPlaceholder('sales@company.com')).toBeVisible()
-  await expect(page.getByPlaceholder('仅提交到本地服务端验证')).toHaveAttribute('type', 'password')
+  await expect(page.getByPlaceholder('邮箱密码或应用专用密码')).toHaveAttribute('type', 'password')
   await expect(page.getByRole('button', { name: '验证并连接邮箱' })).toBeVisible()
   await page.screenshot({ path: testInfo.outputPath('email-connection-wizard.png'), fullPage: true })
 })
 
+test('渠道真实消息统计与多 Telegram 账号入口', async ({ page }) => {
+  await login(page)
+  const responsePromise = page.waitForResponse((response) =>
+    response.url().endsWith('/api/channels') && response.request().method() === 'GET',
+  )
+  await page.goto('/channels')
+  const response = await responsePromise
+  expect(response.ok()).toBeTruthy()
+  const payload = await response.json()
+  for (const channel of payload.data) {
+    expect(Number.isInteger(channel.todayMessages)).toBeTruthy()
+    expect(channel.todayMessages).toBeGreaterThanOrEqual(0)
+  }
+  await page.getByRole('button', { name: 'Telegram', exact: true }).click()
+  await expect(page.getByText('连接 Telegram', { exact: true })).toBeVisible()
+  await expect(page.getByPlaceholder('+8613800138000')).toBeVisible()
+  await expect(page.getByText('可以继续添加其他工作账号', { exact: false })).toBeVisible()
+})
+
 test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
   await login(page)
   await expect(page).toHaveURL(/\/dashboard$/)
@@ -62,8 +124,8 @@ test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
   await page.screenshot({ path: testInfo.outputPath('channels.png'), fullPage: true })
 
   await page.goto('/inbox')
-  await page.getByRole('button', { name: '添加 Telegram 用户或群组' }).click()
-  await expect(page.getByRole('dialog')).toContainText('添加 Telegram 会话')
+  await page.getByRole('button', { name: '添加联系人或群组' }).click()
+  await expect(page.getByRole('dialog')).toContainText('添加联系人或群组')
   await expect(page.getByLabel('用户名、手机号或用户 ID')).toBeVisible()
   await page.getByRole('button', { name: '群组/频道', exact: true }).click()
   await expect(page.getByLabel('群组/频道用户名或 Chat ID')).toBeVisible()
@@ -71,8 +133,9 @@ test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
   await expect(page.getByLabel('Telegram 邀请链接')).toBeVisible()
   await page.getByRole('button', { name: '关闭', exact: true }).click()
   const privateConversation = page.locator(
-    '[data-testid="conversation-item"][data-channel="telegram"]:not([data-telegram-chat-type="channel"])',
+    '[data-testid="conversation-item"][data-channel="telegram"][data-last-sender="agent"]:not([data-telegram-chat-type="channel"])',
   ).first()
+  await expect(privateConversation).toBeVisible()
   await privateConversation.click()
   await expect(page.getByTestId('message-content')).toHaveClass(/justify-end/)
   const languageSwitcher = page.getByRole('radiogroup', { name: '消息显示语言' })
@@ -88,11 +151,15 @@ test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
   await expect(outgoingSurface.first()).toHaveClass(/telegram-bubble-out/)
   const incomingSurface = page.locator('[data-testid="message-surface"][data-direction="incoming"]')
   if (await incomingSurface.count()) await expect(incomingSurface.first()).toHaveClass(/telegram-bubble-in/)
-  await expect(privateConversation).toHaveClass(/conversation-selected/)
-  await expect(page.getByTestId('conversation-list-panel')).toHaveClass(/border-slate-300/)
-  await expect(page.getByTestId('chat-panel')).toHaveClass(/bg-\[#eaf2f9\]/)
+  if (testInfo.project.name !== 'mobile-chromium') {
+    await expect(privateConversation).toHaveClass(/conversation-selected/)
+    await expect(page.getByTestId('conversation-list-panel')).toHaveClass(/border-slate-300/)
+    await expect(page.getByTestId('chat-panel')).toHaveClass(/bg-\[#eaf2f9\]/)
+  } else {
+    await expect(page.getByRole('button', { name: '返回会话列表' })).toBeVisible()
+  }
   await expect(page.getByTestId('conversation-insight-bar').locator('img')).toHaveCount(0)
-  await expect(page.getByTestId('conversation-insight-bar')).toContainText('AI 客户洞察')
+  await expect(page.getByTestId('conversation-insight-bar')).toContainText('客户洞察')
   await page.getByRole('button', { name: 'Telegram 会话操作' }).click()
   await expect(page.getByText(/置顶会话|取消置顶/)).toBeVisible()
   await expect(page.getByText(/归档会话|移出归档/)).toBeVisible()
@@ -110,6 +177,16 @@ test('登录与核心工作台视觉链路', async ({ page }, testInfo) => {
   await page.getByText('薄荷绿', { exact: true }).click()
   await expect(page.getByTestId('message-list')).toHaveClass(/chat-wallpaper-mint/)
   await expect(page.getByPlaceholder('输入回复内容，Enter 发送，Shift+Enter 换行')).toHaveClass(/min-h-\[86px\]/)
+  const targetLanguage = page.getByLabel('客户目标语言')
+  await expect(targetLanguage).toBeVisible()
+  if (testInfo.project.name !== 'mobile-chromium') {
+    await targetLanguage.selectOption('es')
+    await expect(targetLanguage).toHaveValue('es')
+    await page.reload()
+    await expect(page.getByLabel('客户目标语言')).toHaveValue('es')
+    await page.getByLabel('客户目标语言').selectOption('auto')
+    await expect(page.getByLabel('客户目标语言')).toHaveValue('auto')
+  }
   await page.screenshot({ path: testInfo.outputPath('inbox.png'), fullPage: true })
 })
 
@@ -138,7 +215,8 @@ test('conversation list reorders immediately from WebSocket events', async ({ pa
   await page.goto('/inbox')
   const items = page.getByTestId('conversation-item')
   await expect(items.nth(1)).toBeVisible()
-  await expect.poll(() => sockets.length).toBeGreaterThanOrEqual(2)
+  // 页面跳转可能复用现有应用外壳，也可能重新建立连接；只要求当前至少存在一条可用连接。
+  await expect.poll(() => sockets.length).toBeGreaterThanOrEqual(1)
 
   const target = items.nth(1)
   const targetId = await target.getAttribute('data-conversation-id')
@@ -178,10 +256,10 @@ test('知识文件真实上传解析', async ({ page }, testInfo) => {
   await page.locator('input[type="file"]').setInputFiles({
     name: `visual-e2e-${testInfo.project.name}.txt`,
     mimeType: 'text/plain',
-    buffer: Buffer.from('灵犀跨境视觉 E2E 知识解析测试。'),
+    buffer: Buffer.from('灵犀跨境视觉 E2E 知识解析测试，覆盖产品资料与售后政策。'),
   })
-  await page.getByRole('button', { name: '上传并解析' }).click()
-  await expect(page.getByText(/知识文件解析完成/)).toBeVisible()
+  await page.getByRole('button', { name: /上传.*解析.*索引/ }).click()
+  await expect(page.getByText(/文件解析并建立检索索引/)).toBeVisible()
   await page.screenshot({ path: testInfo.outputPath('knowledge-uploaded.png'), fullPage: true })
 })
 
@@ -192,12 +270,12 @@ test('客户画像雷达与采购情报可视化', async ({ page }, testInfo) =>
   await expect(rows.first()).toBeVisible()
   await rows.first().getByRole('cell').nth(1).click()
   await expect(page.getByText('客户价值雷达', { exact: true })).toBeVisible()
-  await expect(page.getByText('AI 客户洞察', { exact: true })).toBeVisible()
-  await expect(page.getByText('采购情报', { exact: true })).toBeVisible()
+  await expect(page.getByText('客户洞察', { exact: true })).toBeVisible()
+  await expect(page.getByText('采购信息', { exact: true })).toBeVisible()
   await expect(page.getByText('标签画像', { exact: true })).toBeVisible()
   const semanticTags = page.locator('[data-tag-category]')
   if (await semanticTags.count()) await expect(semanticTags.first()).toBeVisible()
-  else await expect(page.getByText('暂无标签，AI 将在收到有效客户消息后自动补全。')).toBeVisible()
+  else await expect(page.getByText('暂无标签，收到更多客户消息后将自动补充。')).toBeVisible()
   await page.screenshot({ path: testInfo.outputPath('customer-profile-radar.png'), fullPage: true })
 })
 
@@ -208,6 +286,6 @@ test('团队邀请和支付页不显示虚假成功', async ({ page }, testInfo)
   await page.screenshot({ path: testInfo.outputPath('team.png'), fullPage: true })
 
   await page.goto('/billing')
-  await expect(page.getByText('Stripe Checkout', { exact: false })).toBeVisible()
+  await expect(page.getByRole('heading', { name: '套餐与账单' })).toBeVisible()
   await page.screenshot({ path: testInfo.outputPath('billing.png'), fullPage: true })
 })

whatsapp-gateway/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.env
+data

whatsapp-gateway/Dockerfile

@@ -0,0 +1,23 @@
+FROM node:20-bookworm-slim
+
+ENV NODE_ENV=production
+WORKDIR /app
+
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends ca-certificates \
+  && rm -rf /var/lib/apt/lists/*
+
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+COPY src ./src
+RUN mkdir -p /data/auth /data/store \
+  && chown -R node:node /data /app
+
+USER node
+EXPOSE 3200
+
+HEALTHCHECK --interval=15s --timeout=5s --start-period=20s --retries=5 \
+  CMD node -e "fetch('http://127.0.0.1:3200/health/ready').then(r=>{if(!r.ok)process.exit(1)}).catch(()=>process.exit(1))"
+
+CMD ["node", "src/index.js"]

whatsapp-gateway/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "lingxi-whatsapp-gateway",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "灵犀跨境普通 WhatsApp 多账号网关",
+  "scripts": {
+    "start": "node src/index.js",
+    "check": "node --check src/index.js",
+    "test": "node --test test/api.test.js"
+  },
+  "dependencies": {
+    "@hapi/boom": "10.0.1",
+    "baileys": "7.0.0-rc13",
+    "express": "4.22.2",
+    "express-async-errors": "3.1.1",
+    "https-proxy-agent": "^7.0.6",
+    "multer": "2.2.0",
+    "pino": "9.6.0",
+    "qrcode": "1.5.4"
+  }
+}

whatsapp-gateway/test/api.test.js

@@ -0,0 +1,119 @@
+import assert from 'node:assert/strict'
+import { spawn } from 'node:child_process'
+import fs from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import test from 'node:test'
+
+const token = 'gateway-test-token-12345678901234567890'
+
+async function waitForReady(baseUrl, child) {
+  for (let attempt = 0; attempt < 80; attempt++) {
+    if (child.exitCode !== null) throw new Error(`网关提前退出，代码 ${child.exitCode}`)
+    try {
+      const response = await fetch(`${baseUrl}/health/ready`)
+      if (response.ok) return
+    } catch {
+      // 服务正在启动。
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50))
+  }
+  throw new Error('等待 WhatsApp 网关启动超时')
+}
+
+test('网关执行健康检查、令牌鉴权和账号 CRUD', async () => {
+  const dataDir = await fs.mkdtemp(path.join(os.tmpdir(), 'lingxi-wa-gateway-'))
+  const port = 32991
+  const baseUrl = `http://127.0.0.1:${port}`
+  const child = spawn(process.execPath, ['src/index.js'], {
+    cwd: path.resolve('.'),
+    env: {
+      ...process.env,
+      PORT: String(port),
+      DATA_DIR: dataDir,
+      WHATSAPP_GATEWAY_TOKEN: token,
+      LOG_LEVEL: 'silent',
+    },
+    stdio: 'ignore',
+  })
+  try {
+    await waitForReady(baseUrl, child)
+    const unauthorized = await fetch(`${baseUrl}/accounts`)
+    assert.equal(unauthorized.status, 401)
+
+    const headers = {
+      authorization: `Bearer ${token}`,
+      'content-type': 'application/json',
+    }
+    const created = await fetch(`${baseUrl}/accounts`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ phoneNumber: '15550008888', name: 'Gateway Test' }),
+    })
+    assert.equal(created.status, 201)
+    const account = (await created.json()).data
+    assert.equal(account.phoneNumber, '15550008888')
+    assert.equal(account.status, 'created')
+
+    const duplicate = await fetch(`${baseUrl}/accounts`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ phoneNumber: '15550008888' }),
+    })
+    assert.equal(duplicate.status, 409)
+
+    const fetched = await fetch(`${baseUrl}/accounts/${account.id}`, { headers })
+    assert.equal(fetched.status, 200)
+
+    const webhookSecret = 'webhook-test-secret-that-must-be-encrypted'
+    const webhook = await fetch(`${baseUrl}/accounts/${account.id}/webhook`, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify({
+        url: 'http://127.0.0.1:39999/webhook',
+        secret: webhookSecret,
+        active: true,
+      }),
+    })
+    assert.equal(webhook.status, 200)
+    assert.equal((await webhook.json()).data.webhookSecretConfigured, true)
+    const persistedAccounts = await fs.readFile(path.join(dataDir, 'accounts.json'), 'utf8')
+    assert.equal(persistedAccounts.includes(webhookSecret), false)
+
+    const metrics = await fetch(`${baseUrl}/metrics`, { headers })
+    assert.equal(metrics.status, 200)
+    assert.equal((await metrics.json()).data.accounts.total, 1)
+
+    const invalidProxy = await fetch(`${baseUrl}/accounts/${account.id}/proxy`, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify({ url: 'socks5://127.0.0.1:1080' }),
+    })
+    assert.equal(invalidProxy.status, 400)
+
+    const unsafeReauthorize = await fetch(`${baseUrl}/accounts/${account.id}/reauthorize`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ confirm: 'wrong-account-id' }),
+    })
+    assert.equal(unsafeReauthorize.status, 400)
+
+    const backup = await fetch(`${baseUrl}/accounts/${account.id}/backup`, { headers })
+    assert.equal(backup.status, 200)
+    const backupData = (await backup.json()).data
+    assert.equal(backupData.accountId, account.id)
+    assert.match(backupData.blob, /^v1\./)
+
+    const removed = await fetch(`${baseUrl}/accounts/${account.id}`, {
+      method: 'DELETE',
+      headers,
+    })
+    assert.equal(removed.status, 200)
+    const missing = await fetch(`${baseUrl}/accounts/${account.id}`, { headers })
+    assert.equal(missing.status, 404)
+  } finally {
+    child.kill('SIGTERM')
+    await new Promise((resolve) => child.once('exit', resolve))
+    await fs.rm(dataDir, { recursive: true, force: true })
+  }
+})