feat: 添加客服组件

src/bytedesk-integration/config/bytedesk.config.js

@@ -0,0 +1,157 @@
+/**
+ * Bytedesk客服配置文件
+ * 指向43.143.189.195服务器
+ *
+ * 环境变量配置（.env文件）:
+ *   REACT_APP_BYTEDESK_API_URL=http://43.143.189.195
+ *   REACT_APP_BYTEDESK_ORG=df_org_uid
+ *   REACT_APP_BYTEDESK_SID=df_wg_aftersales
+ */
+
+// 从环境变量读取配置
+const BYTEDESK_API_URL = process.env.REACT_APP_BYTEDESK_API_URL || 'http://43.143.189.195';
+const BYTEDESK_ORG = process.env.REACT_APP_BYTEDESK_ORG || 'df_org_uid';
+const BYTEDESK_SID = process.env.REACT_APP_BYTEDESK_SID || 'df_wg_aftersales';
+
+/**
+ * Bytedesk客服基础配置
+ */
+export const bytedeskConfig = {
+  // API服务地址
+  apiUrl: BYTEDESK_API_URL,
+  // 聊天页面地址
+  htmlUrl: `${BYTEDESK_API_URL}/chat/`,
+
+  // 客服图标位置
+  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 = () => {
+  // 开发环境配置
+  if (process.env.NODE_ENV === 'development') {
+    return {
+      ...bytedeskConfig,
+      apiUrl: 'http://43.143.189.195', // 指向测试服务器
+      htmlUrl: 'http://43.143.189.195/chat/',
+    };
+  }
+
+  // 生产环境配置
+  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 allowedPages = [
+    '/', // 首页
+    '/home', // 主页
+    '/products', // 产品页
+    '/pricing', // 价格页
+    '/contact', // 联系我们
+    // 添加其他需要显示客服的页面...
+  ];
+
+  // 在以下页面隐藏客服
+  const blockedPages = [
+    '/login', // 登录页
+    '/register', // 注册页
+    '/payment', // 支付页
+    // 添加其他不需要客服的页面...
+  ];
+
+  // 检查是否在阻止列表
+  if (blockedPages.some(page => pathname.startsWith(page))) {
+    return false;
+  }
+
+  // 检查是否在允许列表（如果列表为空，默认全部显示）
+  if (allowedPages.length === 0) {
+    return true;
+  }
+
+  return allowedPages.some(page => pathname.startsWith(page));
+};
+
+export default {
+  bytedeskConfig,
+  getBytedeskConfig,
+  getBytedeskConfigWithUser,
+  shouldShowCustomerService,
+};