dezhu-icall-vue 1.0.0

package/README.md

@@ -0,0 +1,117 @@
+# dezhu-icall-vue
+
+得助智能 iCall 外呼组件 - Vue 封装
+
+## 安装
+
+```bash
+npm install dezhu-icall-vue
+```
+
+## 使用
+
+```vue
+<template>
+  <div>
+    <DeZhuICall
+      ref="icall"
+      :server-url="serverUrl"
+      :token="token"
+      :visible="false"
+      @ready="onReady"
+      @error="onError"
+      @offline="onOffline"
+      @callFailed="onCallFailed"
+      @hangup="onHangup"
+      @peerHangup="onPeerHangup"
+    />
+    <button @click="makeCall" :disabled="!isReady">拨打电话</button>
+  </div>
+</template>
+
+<script>
+import { DeZhuICall } from 'dezhu-icall-vue'
+
+export default {
+  components: { DeZhuICall },
+  data() {
+    return {
+      serverUrl: '',
+      token: '',
+      isReady: false
+    }
+  },
+  async mounted() {
+    const config = await fetch('/api/call-config').then(r => r.json())
+    this.serverUrl = config.serverUrl
+    this.token = config.token
+  },
+  methods: {
+    onReady() {
+      this.isReady = true
+    },
+    onError(error) {
+      console.error('错误:', error.message)
+    },
+    onOffline() {
+      console.log('已离线，正在重连...')
+    },
+    onCallFailed(reason) {
+      alert('呼叫失败: ' + reason)
+    },
+    onHangup(params) {
+      console.log('通话结束:', params.isSelfHangup ? '自己挂断' : '对方挂断')
+    },
+    onPeerHangup() {
+      console.log('对方已挂断')
+    },
+    async makeCall() {
+      try {
+        await this.$refs.icall.call('13800138000')
+      } catch (error) {
+        alert(error.message)
+      }
+    }
+  }
+}
+</script>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| serverUrl | String | '' | 服务器地址 |
+| token | String | '' | 认证 Token |
+| autoInit | Boolean | true | 参数准备好后自动初始化 |
+| visible | Boolean | false | 是否显示拨号盘界面 |
+
+## 事件
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| ready | 初始化完成 | - |
+| error | 错误 | Error |
+| offline | 连接断开/离线 | - |
+| statusChange | 状态变化 | status, params |
+| dialing | 正在拨号 | params |
+| ringing | 响铃中 | params |
+| connected | 通话接通 | params |
+| hangup | 通话挂断 | params |
+| peerHangup | 对方挂断 | params |
+| callFailed | 呼叫失败 | reason |
+
+## 方法
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| init() | 手动初始化 | - |
+| call(phoneNumber) | 拨打电话 | phoneNumber: String |
+| hangup() | 挂断电话 | - |
+
+## 特性
+
+- **防重复初始化** - `checkAndInit()` 确保不会创建多个拨号盘
+- **自动重连** - 离线后自动重连（5秒间隔）
+- **页面可见性监听** - 切换回页面后自动检查并重连
+- **拨号盘显示控制** - `visible` 属性控制是否显示拨号盘

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "dezhu-icall-vue",
+  "version": "1.0.0",
+  "description": "得助智能 iCall 外呼组件 - Vue 封装",
+  "main": "src/index.js",
+  "keywords": [
+    "dezhu",
+    "icall",
+    "vue",
+    "component",
+    "call",
+    "外呼"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "",
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^3.0.0"
+  },
+  "files": [
+    "src/"
+  ]
+}

package/src/DeZhuICall.vue

@@ -0,0 +1,368 @@
+<template>
+  <!-- 拨号盘容器，通过 visible 控制显示/隐藏 -->
+  <div ref="callContainer" :style="containerStyle" />
+</template>
+
+<script>
+/**
+ * 得助外呼组件
+ * @description 封装得助智能 iCall 外呼功能
+ */
+
+export default {
+  name: 'DeZhuICall',
+
+  props: {
+    /** 得助服务器地址，如：https://hnzz.dezhuyun.com */
+    serverUrl: {
+      type: String,
+      default: ''
+    },
+    /** 认证 Token，通过 SSO 接入获取 */
+    token: {
+      type: String,
+      default: ''
+    },
+    /** 是否自动初始化，当 serverUrl 和 token 都准备好后自动初始化 */
+    autoInit: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示拨号盘界面，默认隐藏 */
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    /** 容器样式，根据 visible 控制显示/隐藏 */
+    containerStyle() {
+      return {
+        display: this.visible ? 'block' : 'none'
+      }
+    }
+  },
+
+  watch: {
+    /** 监听 serverUrl 变化，满足条件时自动初始化 */
+    serverUrl(newVal) {
+      if (newVal && this.token && this.autoInit) {
+        this.checkAndInit()
+      }
+    },
+    /** 监听 token 变化，满足条件时自动初始化 */
+    token(newVal) {
+      if (newVal && this.serverUrl && this.autoInit) {
+        this.checkAndInit()
+      }
+    }
+  },
+
+  data() {
+    return {
+      /** iCall 实例对象 */
+      iCall: null,
+      /** 是否已完成初始化 */
+      isInitialized: false,
+      /** 是否正在初始化中，用于防止重复初始化 */
+      isInitializing: false,
+      /** 是否正在通话中 */
+      isCalling: false,
+      /** 重连定时器 ID */
+      reconnectTimer: null
+    }
+  },
+
+  mounted() {
+    // 组件挂载后，如果开启自动初始化则检查并初始化
+    if (this.autoInit) {
+      this.checkAndInit()
+    }
+    // 监听页面可见性变化，用于页面切换回来后自动重连
+    document.addEventListener('visibilitychange', this.handleVisibilityChange)
+  },
+
+  beforeDestroy() {
+    // 组件销毁前清理事件监听和定时器
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    this.clearReconnectTimer()
+    // 销毁拨号盘实例
+    this.destroy()
+  },
+
+  methods: {
+    /**
+     * 检查并初始化
+     * @description 防止重复创建拨号盘，确保只有一个实例
+     */
+    async checkAndInit() {
+      if (this.isInitializing || this.isInitialized) {
+        return
+      }
+      await this.init()
+    },
+
+    /**
+     * 初始化外呼组件
+     * @description 加载 SDK 并初始化拨号盘，初始化完成后自动签入
+     * @emits ready - 初始化完成时触发
+     * @emits error - 初始化失败时触发
+     */
+    async init() {
+      // 检查必要参数
+      if (!this.serverUrl || !this.token) {
+        return
+      }
+
+      // 防止重复初始化
+      if (this.isInitializing || this.isInitialized) {
+        return
+      }
+
+      this.isInitializing = true
+
+      try {
+        await this.loadSDK()
+        await this.initICall()
+        this.isInitialized = true
+        this.$emit('ready')
+      } catch (error) {
+        this.$emit('error', error)
+        // 初始化失败，5秒后自动重试
+        this.scheduleReconnect()
+      } finally {
+        this.isInitializing = false
+      }
+    },
+
+    /**
+     * 加载 iCall SDK
+     * @description 动态创建 script 标签加载得助 SDK
+     * @returns {Promise} 加载成功或失败
+     */
+    loadSDK() {
+      // SDK 已加载则直接返回
+      if (window.DeZhuFrontIcall) {
+        return Promise.resolve()
+      }
+
+      return new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = `${this.serverUrl}/dzfront/icall/lib/icall.js?time=${Date.now()}`
+        script.async = true
+
+        // 15秒超时处理
+        const timeout = setTimeout(() => {
+          reject(new Error('SDK 加载超时'))
+        }, 15000)
+
+        script.onload = () => {
+          clearTimeout(timeout)
+          resolve()
+        }
+
+        script.onerror = () => {
+          clearTimeout(timeout)
+          reject(new Error('SDK 加载失败'))
+        }
+
+        document.head.appendChild(script)
+      })
+    },
+
+    /**
+     * 初始化拨号盘
+     * @description 创建 iCall 实例并绑定事件
+     * @returns {Promise} 初始化成功或失败
+     */
+    initICall() {
+      return new Promise((resolve, reject) => {
+        const container = this.$refs.callContainer
+        if (!container) {
+          reject(new Error('找不到容器'))
+          return
+        }
+
+        // 如果已存在实例，先销毁防止重复创建
+        if (this.iCall) {
+          this.iCall.signOut()
+          this.iCall = null
+        }
+
+        // 创建 iCall 实例
+        this.iCall = new window.DeZhuFrontIcall(container, {
+          option: {
+            server: this.serverUrl,
+            token: this.token
+          },
+          event: {
+            /** 呼叫状态变化事件 */
+            onCallStatusChange: (status, params) => {
+              this.$emit('statusChange', status, params)
+
+              // 根据状态触发对应事件
+              switch (status) {
+                case 'MANUAL_DIALING':
+                  this.$emit('dialing', params)
+                  break
+                case 'MANUAL_EARLY_MEDIA':
+                  this.$emit('ringing', params)
+                  break
+                case 'MANUAL_ACTIVE':
+                  this.$emit('connected', params)
+                  break
+                case 'MANUAL_NOT_ACTIVE':
+                  this.handleHangup(params)
+                  break
+              }
+            },
+            /** 错误事件 */
+            onError: (error) => {
+              this.$emit('error', error)
+            },
+            /** 连接断开事件 */
+            onDisconnect: () => {
+              this.isInitialized = false
+              this.$emit('offline')
+              this.scheduleReconnect()
+            }
+          }
+        }, async () => {
+          // 初始化完成回调，自动签入
+          await this.iCall.signIn()
+          resolve()
+        })
+
+        // 10秒初始化超时处理
+        setTimeout(() => {
+          if (!this.isInitialized) {
+            reject(new Error('初始化超时'))
+          }
+        }, 10000)
+      })
+    },
+
+    /**
+     * 处理通话挂断
+     * @description 区分自己挂断和对方挂断，触发对应事件
+     * @param {Object} params - 挂断参数
+     * @param {boolean} params.isSelfHangup - 是否自己挂断
+     * @param {boolean} params.isPeerHangup - 是否对方挂断
+     * @param {boolean} params.isCallFail - 是否呼叫失败
+     * @param {string} params.callFailReason - 失败原因
+     */
+    handleHangup(params) {
+      this.isCalling = false
+
+      // 判断挂断方
+      const isSelfHangup = params?.isSelfHangup || params?.endReason === 1
+      const isPeerHangup = params?.isPeerHangup || params?.endReason === 2
+      const isFailed = params?.isCallFail
+
+      // 对方挂断时触发专用事件
+      if (isPeerHangup && !isSelfHangup) {
+        this.$emit('peerHangup', params)
+      }
+
+      // 触发挂断事件
+      this.$emit('hangup', {
+        ...params,
+        isSelfHangup,
+        isPeerHangup
+      })
+
+      // 呼叫失败时触发失败事件
+      if (isFailed) {
+        this.$emit('callFailed', params?.callFailReason || params?.failReason || '呼叫失败')
+      }
+    },
+
+    /**
+     * 处理页面可见性变化
+     * @description 页面从后台切换回来时，检查是否需要重连
+     */
+    handleVisibilityChange() {
+      // 页面重新可见且未初始化时，尝试重连
+      if (!document.hidden && this.autoInit && !this.isInitialized) {
+        this.checkAndInit()
+      }
+    },
+
+    /**
+     * 定时重连
+     * @description 离线后5秒自动尝试重连
+     */
+    scheduleReconnect() {
+      this.clearReconnectTimer()
+      this.reconnectTimer = setTimeout(() => {
+        this.reconnectTimer = null
+        // 只有未初始化且参数齐全时才重连
+        if (!this.isInitialized && this.serverUrl && this.token) {
+          this.init()
+        }
+      }, 5000)
+    },
+
+    /**
+     * 清除重连定时器
+     */
+    clearReconnectTimer() {
+      if (this.reconnectTimer) {
+        clearTimeout(this.reconnectTimer)
+        this.reconnectTimer = null
+      }
+    },
+
+    /**
+     * 拨打电话
+     * @description 发起外呼呼叫
+     * @param {string} phoneNumber - 电话号码
+     * @throws {Error} 拨号盘未初始化或正在通话中
+     */
+    async call(phoneNumber) {
+      if (!this.isInitialized || !this.iCall) {
+        throw new Error('拨号盘未初始化')
+      }
+
+      if (this.isCalling) {
+        throw new Error('正在通话中')
+      }
+
+      this.isCalling = true
+
+      try {
+        await this.iCall.call(phoneNumber)
+      } catch (error) {
+        this.isCalling = false
+        throw error
+      }
+    },
+
+    /**
+     * 挂断电话
+     * @description 主动挂断当前通话
+     */
+    async hangup() {
+      if (this.iCall && this.isCalling) {
+        await this.iCall.hangup()
+        this.isCalling = false
+      }
+    },
+
+    /**
+     * 销毁组件
+     * @description 清理定时器、签出并销毁拨号盘实例
+     */
+    destroy() {
+      this.clearReconnectTimer()
+      if (this.iCall) {
+        this.iCall.signOut()
+        this.iCall = null
+      }
+      this.isInitialized = false
+      this.isCalling = false
+    }
+  }
+}
+</script>

package/src/index.js

@@ -0,0 +1,20 @@
+import DeZhuICall from './DeZhuICall.vue'
+
+// 安装函数
+const install = function(Vue) {
+  if (install.installed) return
+  install.installed = true
+  Vue.component(DeZhuICall.name, DeZhuICall)
+}
+
+// 自动安装
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  DeZhuICall
+}
+
+export { DeZhuICall }