vf_react/src/bytedesk-integration/App.jsx.example

/**
 * vf_react App.jsx集成示例
 *
 * 本文件展示如何在vf_react项目中集成Bytedesk客服系统
 *
 * 集成步骤:
 *   1. 将bytedesk-integration文件夹复制到src/目录
 *   2. 在App.jsx中导入BytedeskWidget和配置
 *   3. 添加BytedeskWidget组件（代码如下）
 *   4. 配置.env文件（参考.env.bytedesk.example）
 */

import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom'; // 如果使用react-router
import BytedeskWidget from './bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig, shouldShowCustomerService } from './bytedesk-integration/config/bytedesk.config';

// ============================================================================
// 方案一: 全局集成（推荐）
// 适用场景: 客服系统需要在所有页面显示
// ============================================================================

function App() {
  // ========== vf_react原有代码保持不变 ==========
  // 这里是您原有的App.jsx代码
  // 例如: const [user, setUser] = useState(null);
  // 例如: const [theme, setTheme] = useState('light');
  // ... 保持原有逻辑不变 ...

  // ========== Bytedesk集成代码开始 ==========

  const location = useLocation(); // 获取当前路径
  const [showBytedesk, setShowBytedesk] = useState(false);

  // 根据页面路径决定是否显示客服
  useEffect(() => {
    const shouldShow = shouldShowCustomerService(location.pathname);
    setShowBytedesk(shouldShow);
  }, [location.pathname]);

  // 获取Bytedesk配置
  const bytedeskConfig = getBytedeskConfig();

  // 客服加载成功回调
  const handleBytedeskLoad = (bytedesk) => {
    console.log('[App] Bytedesk客服系统加载成功', bytedesk);
  };

  // 客服加载失败回调
  const handleBytedeskError = (error) => {
    console.error('[App] Bytedesk客服系统加载失败', error);
  };

  // ========== Bytedesk集成代码结束 ==========

  return (
    <div className="App">
      {/* ========== vf_react原有内容保持不变 ========== */}
      {/* 这里是您原有的App.jsx JSX代码 */}
      {/* 例如: <Header /> */}
      {/* 例如: <Router> <Routes> ... </Routes> </Router> */}
      {/* ... 保持原有结构不变 ... */}

      {/* ========== Bytedesk客服Widget ========== */}
      {showBytedesk && (
        <BytedeskWidget
          config={bytedeskConfig}
          autoLoad={true}
          onLoad={handleBytedeskLoad}
          onError={handleBytedeskError}
        />
      )}
    </div>
  );
}

export default App;


// ============================================================================
// 方案二: 带用户信息集成
// 适用场景: 需要将登录用户信息传递给客服端
// ============================================================================

/*
import React, { useState, useEffect, useContext } from 'react';
import { useLocation } from 'react-router-dom';
import BytedeskWidget from './bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfigWithUser, shouldShowCustomerService } from './bytedesk-integration/config/bytedesk.config';
import { AuthContext } from './contexts/AuthContext'; // 假设您有用户认证Context

function App() {
  // 获取登录用户信息
  const { user } = useContext(AuthContext);

  const location = useLocation();
  const [showBytedesk, setShowBytedesk] = useState(false);

  useEffect(() => {
    const shouldShow = shouldShowCustomerService(location.pathname);
    setShowBytedesk(shouldShow);
  }, [location.pathname]);

  // 根据用户信息生成配置
  const bytedeskConfig = user
    ? getBytedeskConfigWithUser(user)
    : getBytedeskConfig();

  return (
    <div className="App">
      // ... 您的原有代码 ...

      {showBytedesk && (
        <BytedeskWidget
          config={bytedeskConfig}
          autoLoad={true}
        />
      )}
    </div>
  );
}

export default App;
*/


// ============================================================================
// 方案三: 条件性加载
// 适用场景: 只在特定条件下显示客服（如用户已登录、特定用户角色等）
// ============================================================================

/*
import React, { useState, useEffect } from 'react';
import BytedeskWidget from './bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig } from './bytedesk-integration/config/bytedesk.config';

function App() {
  const [user, setUser] = useState(null);
  const [showBytedesk, setShowBytedesk] = useState(false);

  useEffect(() => {
    // 只有在用户登录且为普通用户时显示客服
    if (user && user.role === 'customer') {
      setShowBytedesk(true);
    } else {
      setShowBytedesk(false);
    }
  }, [user]);

  const bytedeskConfig = getBytedeskConfig();

  return (
    <div className="App">
      // ... 您的原有代码 ...

      {showBytedesk && (
        <BytedeskWidget
          config={bytedeskConfig}
          autoLoad={true}
        />
      )}
    </div>
  );
}

export default App;
*/


// ============================================================================
// 方案四: 动态控制显示/隐藏
// 适用场景: 需要通过按钮或其他交互控制客服显示
// ============================================================================

/*
import React, { useState } from 'react';
import BytedeskWidget from './bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig } from './bytedesk-integration/config/bytedesk.config';

function App() {
  const [showBytedesk, setShowBytedesk] = useState(false);
  const bytedeskConfig = getBytedeskConfig();

  const toggleBytedesk = () => {
    setShowBytedesk(prev => !prev);
  };

  return (
    <div className="App">
      // ... 您的原有代码 ...

      {/* 自定义客服按钮 *\/}
      <button onClick={toggleBytedesk} className="custom-service-button">
        {showBytedesk ? '关闭客服' : '联系客服'}
      </button>

      {/* 客服Widget *\/}
      {showBytedesk && (
        <BytedeskWidget
          config={bytedeskConfig}
          autoLoad={true}
        />
      )}
    </div>
  );
}

export default App;
*/


// ============================================================================
// 重要提示
// ============================================================================

/**
 * 1. CSS样式兼容性
 *    - Bytedesk Widget使用Shadow DOM，不会影响您的全局样式
 *    - Widget的样式可通过config中的theme配置调整
 *
 * 2. 性能优化
 *    - Widget脚本采用异步加载，不会阻塞页面渲染
 *    - 建议在非关键页面（如登录、支付页）隐藏客服
 *
 * 3. 错误处理
 *    - 如果客服脚本加载失败，不会影响主应用
 *    - 建议添加onError回调进行错误监控
 *
 * 4. 调试模式
 *    - 查看浏览器控制台的[Bytedesk]前缀日志
 *    - 检查Network面板确认脚本加载成功
 *
 * 5. 生产部署
 *    - 确保.env文件配置正确（特别是REACT_APP_BYTEDESK_API_URL）
 *    - 确保CORS已在后端配置（允许您的前端域名）
 *    - 在管理后台配置正确的工作组ID（sid）
 */