tiledesk/tiledesk-dashboard

Tiledesk Dashboard 技术文档

1. 镜像概述和主要用途

Tiledesk Dashboard 是 Tiledesk 开源实时聊天平台的管理控制台，专为管理员和客服人员设计。Tiledesk 是基于 Node.js 和 Express 构建的全栈开源实时聊天平台，内置聊天机器人功能，支持多渠道客户沟通（Web、Android、iOS、*** for Business、*** Messenger、*** 等）。Dashboard 作为核心组件之一，提供了平台的管理界面，用于配置聊天机器人、管理对话、监控客服工作等。

该镜像属于 Tiledesk 生态系统的一部分，所有组件均在 GitHub 上以 MIT 许可证开源。

2. 核心功能和特性

2.1 技术架构

• 基于 Angular 5.0 开发
• 支持 Firebase 认证（Firebase Auth）
• 支持 Firebase 数据库操作（Firestore 与 Realtime DB）
• 支持 MongoDB 数据库 CRUD 操作

2.2 管理功能

• 聊天机器人配置与管理
• 多渠道对话监控与处理
• 客服团队权限与工作流管理
• 客户数据与对话历史记录查询

3. 使用场景和适用范围

适用场景

• 企业自建客服系统的管理后台
• 客服团队实时监控和处理客户对话
• 聊天机器人的配置、测试与优化
• 多渠道客户沟通的集中管理

适用用户

• 企业管理员（配置系统参数、管理团队）
• 客服人员（处理客户对话、生成工单）
• 开发人员（自定义品牌、集成外部系统）

4. 部署与使用方法

4.1 Docker Compose 一键部署

通过 Docker Compose 可快速部署 Tiledesk 全套组件（包括 Dashboard、Server、数据库等），详情参考 https://github.com/Tiledesk/tiledesk-deployment/blob/master/docker-compose/README.md%E3%80%82

4.2 Docker 独立运行

前提条件

• 已安装 Docker 环境
• 已部署并运行 Tiledesk Server（参考 https://github.com/***.git%EF%BC%89

部署步骤

1. 获取环境变量配置模板：

   bash
   curl https://raw.githubusercontent.com/Tiledesk/tiledesk-dashboard/master/.env.sample --output .env
   

2. 编辑 .env 文件，配置必要参数（如服务器地址、API 端点等）：

   bash
   nano .env  # 根据实际环境修改配置项
   

3. 启动容器：

   bash
   docker run -p 4500:80 --env-file .env tiledesk/tiledesk-dashboard
   

   • 容器将在 4500 端口暴露服务，访问 http://localhost:4500 即可打开 Dashboard。

4.3 源码安装

前提条件

• Node.js 与 NPM（参考 Node.js 官网）
• Angular CLI v7.3.5：npm install -g @angular/cli@7.3.5
• Firebase 项目（参考 Firebase 官网）
• Tiledesk Server 已部署并运行

安装步骤

1. 克隆仓库（替换 <LATEST-RELEASE-VERSION> 为最新版本号）：

   bash
   git clone https://github.com/Tiledesk/tiledesk-dashboard.git --branch <LATEST-RELEASE-VERSION>
   cd tiledesk-dashboard
   

2. 安装依赖：

   bash
   npm install
   

3. 开发环境运行：

   bash
   ng serve  # 默认运行在 http://localhost:4200
   

4. 构建生产版本：

   bash
   ng build --prod --base-href ./  # 输出到 dist 目录
   

5. 部署到 Web 服务器：将 dist 目录内容复制到 Apache、Nginx 等 Web 服务器的根目录。

5. 配置说明

5.1 配置文件

Tiledesk Dashboard 的配置通过 environment.*.ts（本地配置）或 dashboard-config.json（远程配置）管理，具体取决于 remoteConfig 参数：

• remoteConfig: false：使用 src/environments/environment.*.ts 本地配置
• remoteConfig: true：使用 dashboard-config.json 远程配置（需配置 remoteConfigUrl）

示例：environment.ts（本地配置）

typescript
export const environment = {
  production: false,
  remoteConfig: true,
  remoteConfigUrl: "/dashboard-config.json",  // 远程配置文件路径
  VERSION: require('../../package.json').version,
};

示例：dashboard-config.json（远程配置）

json
{
  "widgetUrl": "https://<YOUR_CHAT21_WEB_WIDGET_URL>:4200/launch.js",
  "botcredendialsURL": "https://<YOUR_BOT_CREDENTIALS_URL>",
  "SERVER_BASE_URL": "https://<YOUR_TILEDESK_SERVER>/",  // Tiledesk Server 地址
  "CHAT_BASE_URL": "https://<YOUR_CHAT21_IONIC_URL>/chat",  // 聊天界面地址
  "testsiteBaseUrl": "http://localhost:4200/assets/test_widget_page/index.html",
  "wsUrl": "ws://" + window.location.hostname + "/ws/",
  "firebase": {
    "apiKey": "123ABC..",
    "authDomain": "XYZ.firebaseapp.com",
    "databaseURL": "https://XYZ.firebaseio.com",
    "projectId": "XYZ",
    "storageBucket": "XYZ.appspot.com",
    "messagingSenderId": "123456"
  },
  "brandSrc": "https://<YOUR_BRAND_JSON>/"  // 外部品牌配置地址（可选）
}

5.2 环境变量

通过 .env 文件或容器环境变量传递配置，常用变量包括：

• SERVER_BASE_URL：Tiledesk Server 基础 URL
• CHAT_BASE_URL：聊天界面基础 URL
• WIDGET_URL：聊天插件加载地址
• BRAND_SRC：外部品牌配置 JSON 地址

5.3 品牌定制

通过修改品牌配置自定义企业信息：

1. 本地定制：编辑 src/assets/brand/brand.json
2. 远程定制：在配置文件中添加 brandSrc: "https://<YOUR_BRAND_JSON>/"（需确保目标地址支持 CORS）

品牌配置支持自定义企业名称、Logo、导航菜单、联系***等。

5.4 外部脚本加载

通过配置 globalRemoteJSSrc 加载外部 JavaScript 脚本（多个脚本用逗号分隔）：

json
{
  // ... 其他配置
  "globalRemoteJSSrc": "https://<SCRIPT_URL_1>, https://<SCRIPT_URL_2>"
}

6. 常见问题与支持

支持渠道

• Tiledesk 社区论坛
• *** 官方服务器
• https://github.com/Tiledesk/tiledesk-dashboard%EF%BC%88%E6%8F%90%E4%BA%A4 Issue）
• Tiledesk 官网

注意事项

• 部署前需确保 Tiledesk Server 已正常运行
• 远程品牌配置需启用 CORS，否则可能加载失败
• 生产环境建议设置 production: true 以优化性能