feat: 添加客服组件

src/bytedesk-integration/App.jsx.example

@@ -0,0 +1,237 @@
+/**
+ * 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）
+ */