feat: 添加客服组件

src/bytedesk-integration/.env.bytedesk.example

@@ -0,0 +1,156 @@
+################################################################################
+# Bytedesk客服系统环境变量配置示例
+#
+# 使用方法:
+#   1. 复制本文件到vf_react项目根目录（与package.json同级）
+#      cp bytedesk-integration/.env.bytedesk.example .env.local
+#
+#   2. 根据实际部署环境修改配置值
+#
+#   3. 重启开发服务器使配置生效
+#      npm start
+#
+# 注意事项:
+#   - .env.local文件不应提交到Git（已在.gitignore中）
+#   - 开发环境和生产环境应使用不同的配置文件
+#   - 所有以REACT_APP_开头的变量会被打包到前端代码中
+################################################################################
+
+# ============================================================================
+# Bytedesk服务器配置（必需）
+# ============================================================================
+
+# Bytedesk后端服务地址（生产环境）
+# 格式: http://IP地址 或 https://域名
+# 示例: http://43.143.189.195 或 https://kefu.yourdomain.com
+REACT_APP_BYTEDESK_API_URL=http://43.143.189.195
+
+# ============================================================================
+# Bytedesk组织和工作组配置（必需）
+# ============================================================================
+
+# 组织ID（Organization UID）
+# 获取方式: 登录管理后台 -> 设置 -> 组织信息 -> 复制UID
+# 示例: df_org_uid
+REACT_APP_BYTEDESK_ORG=df_org_uid
+
+# 工作组ID（Workgroup SID）
+# 获取方式: 登录管理后台 -> 客服管理 -> 工作组 -> 复制工作组ID
+# 示例: df_wg_aftersales (售后服务组)
+REACT_APP_BYTEDESK_SID=df_wg_aftersales
+
+# ============================================================================
+# 可选配置
+# ============================================================================
+
+# 客服类型
+# 2 = 人工客服（默认）
+# 1 = 机器人客服
+# REACT_APP_BYTEDESK_TYPE=2
+
+# 语言设置
+# zh-cn = 简体中文（默认）
+# en = 英语
+# ja = 日语
+# ko = 韩语
+# REACT_APP_BYTEDESK_LOCALE=zh-cn
+
+# 客服图标位置
+# bottom-right = 右下角（默认）
+# bottom-left = 左下角
+# top-right = 右上角
+# top-left = 左上角
+# REACT_APP_BYTEDESK_PLACEMENT=bottom-right
+
+# 客服图标边距（像素）
+# REACT_APP_BYTEDESK_MARGIN_BOTTOM=20
+# REACT_APP_BYTEDESK_MARGIN_SIDE=20
+
+# 主题模式
+# system = 跟随系统（默认）
+# light = 亮色模式
+# dark = 暗色模式
+# REACT_APP_BYTEDESK_THEME_MODE=system
+
+# 主题色（十六进制颜色）
+# REACT_APP_BYTEDESK_THEME_COLOR=#0066FF
+
+# 是否自动弹出客服窗口（不推荐）
+# true = 页面加载后自动弹出
+# false = 需用户点击图标弹出（默认）
+# REACT_APP_BYTEDESK_AUTO_POPUP=false
+
+# ============================================================================
+# 开发环境专用配置
+# ============================================================================
+
+# 开发环境可以使用不同的服务器地址
+# 取消注释以下行使用本地或测试服务器
+# REACT_APP_BYTEDESK_API_URL_DEV=http://localhost:9003
+
+# ============================================================================
+# 配置示例 - 不同部署场景
+# ============================================================================
+
+# ---------- 示例1: 生产环境（域名访问） ----------
+# REACT_APP_BYTEDESK_API_URL=https://kefu.yourdomain.com
+# REACT_APP_BYTEDESK_ORG=prod_org_12345
+# REACT_APP_BYTEDESK_SID=prod_wg_sales
+
+# ---------- 示例2: 测试环境（IP访问） ----------
+# REACT_APP_BYTEDESK_API_URL=http://192.168.1.100
+# REACT_APP_BYTEDESK_ORG=test_org_abc
+# REACT_APP_BYTEDESK_SID=test_wg_support
+
+# ---------- 示例3: 本地开发环境 ----------
+# REACT_APP_BYTEDESK_API_URL=http://localhost:9003
+# REACT_APP_BYTEDESK_ORG=dev_org_local
+# REACT_APP_BYTEDESK_SID=dev_wg_test
+
+# ============================================================================
+# 故障排查
+# ============================================================================
+
+# 问题1: 客服图标不显示
+# 解决方案:
+#   - 检查REACT_APP_BYTEDESK_API_URL是否可访问
+#   - 确认.env文件在项目根目录
+#   - 重启开发服务器（npm start）
+#   - 查看浏览器控制台是否有错误
+
+# 问题2: 连接不上后端服务
+# 解决方案:
+#   - 确认后端服务已启动（docker ps查看bytedesk-prod容器）
+#   - 检查CORS配置（后端.env.production中的BYTEDESK_CORS_ALLOWED_ORIGINS）
+#   - 确认防火墙未阻止80/443端口
+
+# 问题3: ORG或SID配置错误
+# 解决方案:
+#   - 登录管理后台http://43.143.189.195/admin/
+#   - 导航到"设置" -> "组织信息"获取ORG
+#   - 导航到"客服管理" -> "工作组"获取SID
+#   - 确保复制的ID没有多余空格
+
+# 问题4: 多工作组场景
+# 解决方案:
+#   - 可以为不同页面配置不同的SID
+#   - 在bytedesk.config.js中使用条件判断
+#   - 示例: 售后页面用售后组SID，销售页面用销售组SID
+
+# ============================================================================
+# 安全提示
+# ============================================================================
+
+# 1. 不要在代码中硬编码API地址和ID
+# 2. .env.local文件不应提交到Git仓库
+# 3. 生产环境建议使用HTTPS
+# 4. 定期更新后端服务器的安全补丁
+# 5. 不要在公开的代码库中暴露组织ID和工作组ID
+
+# ============================================================================
+# 更多信息
+# ============================================================================
+
+# Bytedesk官方文档: https://docs.bytedesk.com
+# 技术支持: 访问http://43.143.189.195/chat/联系在线客服
+# GitHub: https://github.com/Bytedesk/bytedesk