vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature_2025/251117_pref' of https://git.valuefrontier.cn/vf/vf_react into feature_2025/251117_pref

Browse Source
This commit is contained in:
zzlgreat
2025-11-20 15:25:05 +08:00
parent fdd58634e6 53fbda44e6
commit 2a8d7438c8
12 changed files with 969 additions and 1250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/bytedesk-integration/App.jsx.example
View File

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

66
src/bytedesk-integration/config/bytedesk.config.js
View File

@@ -1,27 +1,10 @@
/**
* Bytedesk客服配置文件
* 通过代理访问 Bytedesk 服务器（解决 HTTPS 混合内容问题）
*
* 环境变量配置（.env文件）:
* REACT_APP_BYTEDESK_ORG=df_org_uid
* REACT_APP_BYTEDESK_SID=df_wg_uid
*
* 架构说明：
* - iframe 使用完整域名：https://valuefrontier.cn/bytedesk/chat/
* - 使用 HTTPS 协议，解决生产环境 Mixed Content 错误
* - 本地：CRACO 代理 /bytedesk → valuefrontier.cn/bytedesk
* - 生产：前端 Nginx 代理 /bytedesk → 43.143.189.195
* - baseUrl 保持官方 CDN（用于加载 SDK 外部模块）
*
* ⚠️ 注意：需要前端 Nginx 配置 /bytedesk/ 代理规则
*/
// 从环境变量读取配置
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客服基础配置
- iframe 使用完整域名：https://valuefrontier.cn/bytedesk/chat/
- 使用 HTTPS 协议，解决生产环境 Mixed Content 错误
- 生产：前端 Nginx 代理 /bytedesk → 43.143.189.195
- baseUrl 保持官方 CDN（用于加载 SDK 外部模块）
*/
export const bytedeskConfig = {
// API服务地址（如果 SDK 需要调用 API）
@@ -61,9 +44,9 @@ export const bytedeskConfig = {
// 聊天配置（必需）
chatConfig: {
org: BYTEDESK_ORG, // 组织ID
org: df_org_uid, // 组织ID
t: '1', // 类型: 1=人工客服, 2=机器人
sid: BYTEDESK_SID, // 工作组ID
sid: df_wg_uid, // 工作组ID
},
};
@@ -111,45 +94,8 @@ export const getBytedeskConfigWithUser = (user) => {
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,
};

13
src/components/GlobalComponents.js
View File

@@ -14,7 +14,7 @@ import ScrollToTop from './ScrollToTop';
// Bytedesk客服组件
import BytedeskWidget from '../bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig, shouldShowCustomerService } from '../bytedesk-integration/config/bytedesk.config';
import { getBytedeskConfig } from '../bytedesk-integration/config/bytedesk.config';
/**
* ConnectionStatusBar 包装组件
@@ -74,7 +74,6 @@ function ConnectionStatusBarWrapper() {
*/
export function GlobalComponents() {
const location = useLocation();
const showBytedesk = shouldShowCustomerService(location.pathname);
return (
<>
@@ -91,12 +90,10 @@ export function GlobalComponents() {
<NotificationContainer />
{/* Bytedesk在线客服 - 根据路径条件性显示 */}
{showBytedesk && (
<BytedeskWidget
config={getBytedeskConfig()}
autoLoad={true}
/>
)}
<BytedeskWidget
config={getBytedeskConfig()}
autoLoad={true}
/>
</>
);
}

89
src/lib/posthog.js
View File

@@ -10,6 +10,11 @@ let isInitialized = false;
* Should be called once when the app starts
*/
export const initPostHog = () => {
// 开发环境禁用 PostHog（减少日志噪音，仅生产环境启用）
if (process.env.NODE_ENV === 'development') {
return;
}
// 防止重复初始化
if (isInitializing || isInitialized) {
console.log('📊 PostHog 已初始化或正在初始化中，跳过重复调用');
@@ -33,79 +38,68 @@ export const initPostHog = () => {
posthog.init(apiKey, {
api_host: apiHost,
// Pageview tracking - auto-capture for DAU/MAU analytics
capture_pageview: true, // Auto-capture all page views (required for DAU tracking)
capture_pageleave: true, // Auto-capture when user leaves page
// 📄 页面浏览追踪
capture_pageview: true, // 自动捕获页面浏览事件
capture_pageleave: true, // 自动捕获用户离开页面事件
// Session Recording Configuration
// 📹 会话录制配置（Session Recording）
session_recording: {
enabled: process.env.REACT_APP_ENABLE_SESSION_RECORDING === 'true',
// Privacy: Mask sensitive input fields
// 🔒 隐私保护：遮蔽敏感输入字段（录制时会自动打码）
maskInputOptions: {
password: true,
email: true,
phone: true,
'data-sensitive': true, // Custom attribute for sensitive fields
password: true, // 遮蔽密码输入框
email: true, // 遮蔽邮箱输入框
phone: true, // 遮蔽手机号输入框
'data-sensitive': true, // 遮蔽带有 data-sensitive 属性的字段（可在 HTML 中自定义）
},
// Record canvas for charts/graphs
// 📊 录制 Canvas 画布内容（用于记录图表、图形等可视化内容）
recordCanvas: true,
// Network payload capture (useful for debugging API issues)
// 🌐 网络请求数据捕获（用于调试 API 问题）
networkPayloadCapture: {
recordHeaders: true,
recordBody: true,
// Don't record sensitive endpoints
recordHeaders: true, // 捕获请求头
recordBody: true, // 捕获请求体
// 🚫 敏感接口黑名单（不记录以下接口的数据）
urlBlocklist: [
'/api/auth/session',
'/api/auth/login',
'/api/auth/register',
'/api/payment',
'/api/auth/session', // 会话接口
'/api/auth/login', // 登录接口
'/api/auth/register', // 注册接口
'/api/payment', // 支付接口
],
},
},
// Performance optimization
batch_size: 10, // Send events in batches of 10
batch_interval_ms: 3000, // Or every 3 seconds
// ⚡ 性能优化：批量发送事件
batch_size: 10, // 每 10 个事件发送一次
batch_interval_ms: 3000, // 或每 3 秒发送一次（两个条件满足其一即发送）
// Privacy settings
respect_dnt: true, // Respect Do Not Track browser setting
persistence: 'localStorage+cookie', // Use both for reliability
// 🔐 隐私设置
respect_dnt: true, // 尊重浏览器的"禁止追踪"（Do Not Track）设置
persistence: 'localStorage+cookie', // 同时使用 localStorage 和 Cookie 存储（提高可靠性）
// Feature flags (for A/B testing)
// 🚩 功能开关（Feature Flags）- 用于 A/B 测试和灰度发布
bootstrap: {
featureFlags: {},
featureFlags: {}, // 初始功能开关配置（可从服务端动态加载）
},
// Autocapture settings
// 🖱️ 自动捕获设置（Autocapture）
autocapture: {
// Automatically capture clicks on buttons, links, etc.
// 自动捕获用户交互事件（点击、提交、修改等）
dom_event_allowlist: ['click', 'submit', 'change'],
// Capture additional element properties
capture_copied_text: false, // Don't capture copied text (privacy)
},
// Development debugging
loaded: (posthogInstance) => {
if (process.env.NODE_ENV === 'development') {
console.log('✅ PostHog initialized successfully');
// posthogInstance.debug(); // 已关闭：减少控制台日志噪音
}
// 捕获额外的元素属性
capture_copied_text: false, // 不捕获用户复制的文本（隐私保护）
},
});
isInitialized = true;
console.log('📊 PostHog Analytics initialized');
} catch (error) {
// 忽略 AbortError（通常由热重载或快速导航引起）
if (error.name === 'AbortError') {
console.log('⚠️ PostHog 初始化请求被中断（可能是热重载），这是正常的');
return;
}
console.error('❌ PostHog initialization failed:', error);
} finally {
isInitializing = false;
}
@@ -142,8 +136,6 @@ export const identifyUser = (userId, userProperties = {}) => {
last_login: new Date().toISOString(),
...userProperties,
});
// console.log('👤 User identified:', userId); // 已关闭：减少日志
} catch (error) {
console.error('❌ User identification failed:', error);
}
@@ -158,7 +150,6 @@ export const identifyUser = (userId, userProperties = {}) => {
export const setUserProperties = (properties) => {
try {
posthog.people.set(properties);
// console.log('📝 User properties updated'); // 已关闭：减少日志
} catch (error) {
console.error('❌ Failed to update user properties:', error);
}
@@ -176,10 +167,6 @@ export const trackEvent = (eventName, properties = {}) => {
...properties,
timestamp: new Date().toISOString(),
});
// if (process.env.NODE_ENV === 'development') {
// console.log('📍 Event tracked:', eventName, properties);
// } // 已关闭：减少日志
} catch (error) {
console.error('❌ Event tracking failed:', error);
}
@@ -225,9 +212,6 @@ export const trackPageView = (pagePath, properties = {}) => {
...properties,
});
// if (process.env.NODE_ENV === 'development') {
// console.log('📄 Page view tracked:', pagePath);
// } // 已关闭：减少日志
} catch (error) {
console.error('❌ Page view tracking failed:', error);
}
@@ -240,7 +224,6 @@ export const trackPageView = (pagePath, properties = {}) => {
export const resetUser = () => {
try {
posthog.reset();
// console.log('🔄 User session reset'); // 已关闭：减少日志
} catch (error) {
console.error('❌ Session reset failed:', error);
}
@@ -252,7 +235,6 @@ export const resetUser = () => {
export const optOut = () => {
try {
posthog.opt_out_capturing();
// console.log('🚫 User opted out of tracking'); // 已关闭：减少日志
} catch (error) {
console.error('❌ Opt-out failed:', error);
}
@@ -264,7 +246,6 @@ export const optOut = () => {
export const optIn = () => {
try {
posthog.opt_in_capturing();
// console.log('✅ User opted in to tracking'); // 已关闭：减少日志
} catch (error) {
console.error('❌ Opt-in failed:', error);
}