157 lines
4.3 KiB
JavaScript
157 lines
4.3 KiB
JavaScript
/**
|
||
* Bytedesk客服配置文件
|
||
* 通过代理访问 Bytedesk 服务器（解决 HTTPS 混合内容问题）
|
||
*
|
||
* 环境变量配置（.env文件）:
|
||
* REACT_APP_BYTEDESK_ORG=df_org_uid
|
||
* REACT_APP_BYTEDESK_SID=df_wg_uid
|
||
*
|
||
* 架构说明：
|
||
* - iframe 使用完整域名：https://valuefrontier.cn/bytedesk-api/chat/
|
||
* - 使用 HTTPS 协议，解决生产环境 Mixed Content 错误
|
||
* - 本地：CRACO 代理到 valuefrontier.cn/bytedesk-api/
|
||
* - 生产：前端 Nginx 代理到 valuefrontier.cn/bytedesk-api/
|
||
* - 后端：Nginx 转发到 43.143.189.195
|
||
* - baseUrl 保持官方 CDN（用于加载 SDK 外部模块）
|
||
*
|
||
* ⚠️ 注意：需要前端 Nginx 配置 /chat/ 和 /config/ 代理规则
|
||
*/
|
||
|
||
// 从环境变量读取配置
|
||
const BYTEDESK_ORG = process.env.REACT_APP_BYTEDESK_ORG || 'df_org_uid';
|
||
const BYTEDESK_SID = process.env.REACT_APP_BYTEDESK_SID || 'df_wg_uid';
|
||
|
||
/**
|
||
* Bytedesk客服基础配置
|
||
*/
|
||
export const bytedeskConfig = {
|
||
// API服务地址（如果 SDK 需要调用 API）
|
||
apiUrl: '/bytedesk-api/',
|
||
// 聊天页面地址（使用完整 HTTPS 域名，解决混合内容问题）
|
||
htmlUrl: 'https://valuefrontier.cn/bytedesk-api/chat/',
|
||
// SDK 资源基础路径（保持 Bytedesk 官方 CDN，用于加载外部模块）
|
||
baseUrl: 'https://www.weiyuai.cn',
|
||
|
||
// 客服图标位置
|
||
placement: 'bottom-right', // bottom-right | bottom-left | top-right | top-left
|
||
|
||
// 边距设置（像素）
|
||
marginBottom: 20,
|
||
marginSide: 20,
|
||
|
||
// 自动弹出（不推荐）
|
||
autoPopup: false,
|
||
|
||
// 语言设置
|
||
locale: 'zh-cn', // zh-cn | en | ja | ko
|
||
|
||
// 客服图标配置
|
||
bubbleConfig: {
|
||
show: true, // 是否显示客服图标
|
||
icon: '💬', // 图标（emoji或图片URL）
|
||
title: '在线客服', // 鼠标悬停标题
|
||
subtitle: '点击咨询', // 副标题
|
||
},
|
||
|
||
// 主题配置
|
||
theme: {
|
||
mode: 'system', // light | dark | system
|
||
backgroundColor: '#0066FF', // 主题色
|
||
textColor: '#ffffff', // 文字颜色
|
||
},
|
||
|
||
// 聊天配置（必需）
|
||
chatConfig: {
|
||
org: BYTEDESK_ORG, // 组织ID
|
||
t: '2', // 类型: 2=客服, 1=机器人
|
||
sid: BYTEDESK_SID, // 工作组ID
|
||
},
|
||
};
|
||
|
||
/**
|
||
* 获取Bytedesk配置（根据环境自动切换）
|
||
*
|
||
* @returns {Object} Bytedesk配置对象
|
||
*/
|
||
export const getBytedeskConfig = () => {
|
||
// 所有环境都使用公网地址（不使用代理）
|
||
return bytedeskConfig;
|
||
};
|
||
|
||
/**
|
||
* 获取带用户信息的配置
|
||
* 用于已登录用户，自动传递用户信息到客服端
|
||
*
|
||
* @param {Object} user - 用户对象
|
||
* @param {string} user.id - 用户ID
|
||
* @param {string} user.name - 用户名
|
||
* @param {string} user.email - 用户邮箱
|
||
* @param {string} user.mobile - 用户手机号
|
||
* @returns {Object} 带用户信息的Bytedesk配置
|
||
*/
|
||
export const getBytedeskConfigWithUser = (user) => {
|
||
const config = getBytedeskConfig();
|
||
|
||
if (user && user.id) {
|
||
return {
|
||
...config,
|
||
chatConfig: {
|
||
...config.chatConfig,
|
||
// 传递用户信息（可选）
|
||
customParams: {
|
||
userId: user.id,
|
||
userName: user.name || 'Guest',
|
||
userEmail: user.email || '',
|
||
userMobile: user.mobile || '',
|
||
source: 'web', // 来源标识
|
||
},
|
||
},
|
||
};
|
||
}
|
||
|
||
return config;
|
||
};
|
||
|
||
/**
|
||
* 根据页面路径判断是否显示客服
|
||
*
|
||
* @param {string} pathname - 当前页面路径
|
||
* @returns {boolean} 是否显示客服
|
||
*/
|
||
export const shouldShowCustomerService = (pathname) => {
|
||
// 在以下页面隐藏客服（黑名单）
|
||
const blockedPages = [
|
||
// '/home', // 登录页
|
||
];
|
||
|
||
// 检查是否在黑名单
|
||
if (blockedPages.some(page => pathname.startsWith(page))) {
|
||
return false;
|
||
}
|
||
|
||
// 默认所有页面都显示客服
|
||
return true;
|
||
|
||
/* ============================================
|
||
白名单模式（备用，需要时取消注释）
|
||
============================================
|
||
const allowedPages = [
|
||
'/', // 首页
|
||
'/home', // 主页
|
||
'/products', // 产品页
|
||
'/pricing', // 价格页
|
||
'/contact', // 联系我们
|
||
];
|
||
|
||
// 只在白名单页面显示客服
|
||
return allowedPages.some(page => pathname.startsWith(page));
|
||
============================================ */
|
||
};
|
||
|
||
export default {
|
||
bytedeskConfig,
|
||
getBytedeskConfig,
|
||
getBytedeskConfigWithUser,
|
||
shouldShowCustomerService,
|
||
};
|