审计之家·商家版客服系统接入文档

此应用已封装为轻量级 JavaScript 胶囊，支持通过两行代码快速挂载到任何 HTML 官网（无论是 Vue、React 还是原生 HTML）。

🚀 快速接入 (方法 A：直接引入脚本)

将以下代码片段复制并粘贴到您的官网 <body> 结束标签之前。

<!-- 1. 样式引入 -->
<link rel="stylesheet" href="http://your-server.com/dist/style.css">

<!-- 2. 脚本引入 -->
<script src="http://your-server.com/dist/merchant-chat-widget.umd.js"></script>

<!-- 3. 初始化挂载 (可选) -->
<script>
  // 脚本会自动挂载，如果需要手动挂载，可以通过全局函数：
  window.initMerchantChat();
</script>

🏗️ 如何构建发布包

如果您对代码进行了修改，请执行以下命令来生成最新的 JS：

进入项目目录：cd merchant-chat-pc
安装依赖：npm install
生成生产包：npm run build

构建完成后，在 dist/ 目录下会生成：

style.css: 客服 UI 的所有样式。
merchant-chat-widget.umd.js: 客服逻辑的 JS 运行核心。

🎨 设计规范

形态：右下角悬浮弹窗。
默认层级：z-index: 20000 (如果此层级导致遮挡，可联系开发者在全局样式调整)。
支持功能：
- 实时聊天、历史记录。
- 图片、文件附件的发送与预览预览。
- 表情包选择。
- 自动缩回/展开。

💬 常见问题

Q: 为什么图片发不出去？
- A: 当前演示版本使用 FileReader 在浏览器端临时模拟图片数据。正式环境建议集成后端 OSS 上传接口。
Q: 是否需要提前安装 Vue？
- A: 不需要，脚本内已包含了独立的 Vue 运行时，即便原生 HTML 也能运行。