新版sip代码同步

src/api/aiSipCall/aiSipCallGateway.js

@@ -2,52 +2,61 @@ import request from '@/utils/request'
 
 // 查询aiSIP外呼网关列表
 export function listAiSipCallGateway(query) {
-  return request({
-    url: '/company/aiSipCall/gateway/list',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/company/aiSipCall/gateway/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询aiSIP外呼网关列表
+export function remoteList(data) {
+    return request({
+        url: '/company/aiSipCall/gateway/remoteList',
+        method: 'post',
+        data: data
+    })
 }
 
 // 查询aiSIP外呼网关详细
 export function getAiSipCallGateway(id) {
-  return request({
-    url: '/company/aiSipCall/gateway/' + id,
-    method: 'get'
-  })
+    return request({
+        url: '/company/aiSipCall/gateway/' + id,
+        method: 'get'
+    })
 }
 
 // 新增aiSIP外呼网关
 export function addAiSipCallGateway(data) {
-  return request({
-    url: '/company/aiSipCall/gateway',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/company/aiSipCall/gateway',
+        method: 'post',
+        data: data
+    })
 }
 
 // 修改aiSIP外呼网关
 export function updateAiSipCallGateway(data) {
-  return request({
-    url: '/company/aiSipCall/gateway',
-    method: 'put',
-    data: data
-  })
+    return request({
+        url: '/company/aiSipCall/gateway',
+        method: 'put',
+        data: data
+    })
 }
 
 // 删除aiSIP外呼网关
 export function delAiSipCallGateway(id) {
-  return request({
-    url: '/company/aiSipCall/gateway/' + id,
-    method: 'delete'
-  })
+    return request({
+        url: '/company/aiSipCall/gateway/' + id,
+        method: 'delete'
+    })
 }
 
 // 导出aiSIP外呼网关
 export function exportAiSipCallGateway(query) {
-  return request({
-    url: '/company/aiSipCall/gateway/export',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/company/aiSipCall/gateway/export',
+        method: 'get',
+        params: query
+    })
 }

src/api/aiSipCall/aiSipCallUser.js

@@ -68,9 +68,10 @@ export function getUnBindExtnum(query) {
 }
 
 // 查询aiSIP工具条基础配置参数
-export function getToolbarBasicParam(extNum) {
-  return request({
-    url: '/company/aiSipCall/aiSipCallUser/getToolbarBasicParam/' + extNum,
-    method: 'get'
-  })
+export function getToolbarBasicParam(data) {
+    return request({
+        url: '/company/aiSipCall/aiSipCallUser/getToolbarBasicParam',
+        method: 'post',
+        data: data
+    })
 }

src/assets/callCenterPhoneBarSdk/ccPhoneBarSocket.js

@@ -75,9 +75,9 @@ function ccPhoneBarSocket() {
 		 // 使用默认的UI，还是使用自定义的UI
 		'useDefaultUi': false,
 		//呼叫控制服务器地址
-		'ipccServer': '129.28.164.235:8443',
+		'ipccServer': 'sip.ylrzcloud.com',
 		//是否启用websocket安全连接
-		'enableWss' : false,
+		'enableWss' : true,
 		//语音编码
 		'callCodec' : 'pcma',
 		//是否发送心跳数据
@@ -223,12 +223,17 @@ function ccPhoneBarSocket() {
 			return;
 		}
 
-	    console.log("callConfig:", JSON.stringify(this.callConfig));
-	    wsuri = 'ws://' + this.callConfig.ipccServer +
-	    			'/call-center/websocketServer?' +
-			'&loginToken=' + this.callConfig.loginToken;
-
-	    console.log("ipccServer ws url: " + wsuri);
+        console.log("callConfig:", JSON.stringify(this.callConfig));
+        //线上enableWss: true 本地调试为false
+        if(_cc.callConfig.enableWss){
+            wsuri = 'wss://' + this.callConfig.ipccServer +
+                '/call-center/websocketServer?' +
+                '&loginToken=' + this.callConfig.loginToken;
+        }else{
+            wsuri = 'ws://129.28.164.235:1081/call-center/websocketServer?' +
+                '&loginToken=' + this.callConfig.loginToken;
+        }
+        console.log("ipccServer url: " + wsuri);
 	    var ipccServerIpAddr = this.callConfig.ipccServer.split(":");
 	    if(this.callConfig.enableWss &&  this.checkIP(ipccServerIpAddr)){
 	    	var tipsError = "ERROR! 启用了wss之后，必须使用域名访问websocketServer! " + this.callConfig.ipccServer;
@@ -350,7 +355,7 @@ function ccPhoneBarSocket() {
 			console.log('[connect] WebSocket 正在连接中，请勿重复操作');
 			return;
 		}
-		
+
 		// 先关闭旧的连接，避免重复登录
 		if (ws) {
 			console.log('[connect] 检测到旧连接存在，先关闭旧连接');
@@ -361,7 +366,7 @@ function ccPhoneBarSocket() {
 			}
 			ws = null;
 		}
-			
+
 		if ('WebSocket' in window)
 			ws = new WebSocket(wsuri);
 		else {
@@ -1092,7 +1097,7 @@ function ccPhoneBarSocket() {
 			console.log('正在呼叫中，请勿重复操作');
 			return;
 		}
-		
+
 		if(typeof(videoLevel) == "undefined" || videoLevel.trim().length === 0){
 			videoLevel = ccPhoneBarSocket.videoLevels.HD.levelId;
 			console.log("auto default set videoLevel=", videoLevel);
@@ -1371,7 +1376,7 @@ function ccPhoneBarSocket() {
 		});
 
 		$("#doTransferBtn").hide();
-		
+
 		/**
 		 * 填充业务组选项
 		 * 注意：该函数仅用于原始 HTML 版本，Vue + Element UI 版本中由 Vue 组件自行处理
@@ -1387,7 +1392,7 @@ function ccPhoneBarSocket() {
 						var firstOption = selectObj.options[0];
 						selectObj.innerHTML = '';
 						selectObj.add(firstOption);
-						
+
 						// 添加业务组选项
 						for (var i = 0; i < groups.length; i++) {
 							var group = groups[i];
@@ -1396,7 +1401,7 @@ function ccPhoneBarSocket() {
 							option.text = group.bizGroupName;
 							selectObj.add(option);
 						}
-						
+
 						// 默认选中第一个
 						if (groups.length > 0 && selectObj.options.length > 1) {
 							selectObj.selectedIndex = 1;
@@ -1406,7 +1411,7 @@ function ccPhoneBarSocket() {
 				}
 			}
 		}
-		
+
 		$('#transferBtn').on('click', function () {
 			if ($(this).hasClass('on')) {
 				if(!_cc.getIsConnected()){

src/assets/callCenterPhoneBarSdk/constants.js

@@ -346,5 +346,22 @@ export const DefaultConfig = {
   groupId: '1',// 业务组 id
   extPassword: '0406f9d44bb8fe195a1ee2557bbeebf7',
   skillLevel: 9,//技能等级
-  ipccServerUrl: '129.28.164.235:1081',
+  ipccServerUrl: 'sip.ylrzcloud.com',
+
+  // 功能开关配置
+  featureSwitches: {
+    //基础外呼
+    call: true,         // 外呼
+    hold: true,         // 保持
+    hangup: true,       // 挂机
+    reset: true,        // 强置
+    signInOut: true,     // 签出签入
+
+    //进阶功能
+    setBusy: false,      // 置忙-可外呼
+    setFree: false,      // 置闲-可接呼入的电话
+    transfer: false,     // 转接
+    consultation: false, // 咨询
+    conference: false,   // 会议
+  }
 };

src/views/aiSipCall/aiSipCallGateway.vue

@@ -240,7 +240,7 @@
 </template>
 
 <script>
-import { listAiSipCallGateway, getAiSipCallGateway, delAiSipCallGateway, addAiSipCallGateway, updateAiSipCallGateway, exportAiSipCallGateway } from "@/api/aiSipCall/aiSipCallGateway";
+import { listAiSipCallGateway, getAiSipCallGateway, delAiSipCallGateway, addAiSipCallGateway, updateAiSipCallGateway, exportAiSipCallGateway,remoteList } from "@/api/aiSipCall/aiSipCallGateway";
 
 export default {
   name: "aiSipCallGateway",
@@ -332,12 +332,18 @@ export default {
   methods: {
     /** 查询aiSIP外呼网关列表 */
     getList() {
-      this.loading = true;
-      listAiSipCallGateway(this.queryParams).then(response => {
-        this.aiSipCallList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.loading = true;
+        // listAiSipCallGateway(this.queryParams).then(response => {
+        //   this.aiSipCallList = response.rows;
+        //   this.total = response.total;
+        //   this.loading = false;
+        // });
+        remoteList(this.queryParams).then(response => {
+            this.aiSipCallList = response.rows;
+            this.total = response.total;
+            this.loading = false;
+        });
+
     },
     // 取消按钮
     cancel() {

src/views/aiSipCall/aiSipCallManualOutbound.vue

@@ -32,24 +32,24 @@
                                 </dl>
 
                                 <ul class="dial_btn">
-                                    <li><a href="#" id="setFree" class="xz_btn off" @click.prevent="handleSetFree"></a><span>置闲</span></li>
-                                    <li>
+                                    <li v-show="featureSwitches.setFree"><a href="#" id="setFree" class="xz_btn off" @click.prevent="handleSetFree"></a><span>置闲</span></li>
+                                    <li v-show="featureSwitches.setBusy">
                                         <a href="#" id="setBusy" class="sm_btn off"></a>
-                                        <select style="width: 50px;" id="setBusySubList" v-model="busySubStatus" @change="handleSetBusy">
+                                        <select style="width: 70px; min-width: 70px;" id="setBusySubList" v-model="busySubStatus" @change="handleSetBusy">
                                             <option v-for="option in busySubStatusOptions" :key="option.value" :value="option.value">
                                                 {{ option.label }}
                                             </option>
                                         </select>
                                     </li>
-                                    <li><a href="#" id="callBtn" class="wh_btn" @click.prevent="handleCall"></a><span>外呼</span></li>
-                                    <li id="holdBtnLi" v-show="showHoldBtn"><a href="#" id="holdBtn" class="bc_btn off" @click.prevent="handleHold"></a><span>保 持</span></li>
-                                    <li id="unHoldBtnLi" v-show="showUnHoldBtn"><a href="#" id="unHoldBtn" class="bc2_btn off" @click.prevent="handleUnHold"></a><span>取消保持</span></li>
-                                    <li><a href="#" id="transferBtn" class="zjie_btn" @click.prevent="handleTransfer"></a><span>转接</span></li>
-                                    <li><a href="#" id="consultationBtn" class="zixun_btn" @click.prevent="handleConsultation"></a><span>咨询</span></li>
-                                    <li><a href="#" id="conferenceBtn" class="hy_btn" @click.prevent="toggleConferenceArea"></a><span>会议</span></li>
-                                    <li><a href="#" id="hangUpBtn" class="gj_btn" @click.prevent="handleHangup"></a><span>挂机</span></li>
-                                    <li><a href="#" id="resetStatus" class="qz_btn" @click.prevent="handleReset"></a><span>强置</span></li>
-                                    <li><a href="#" id="onLineBtn" class="sx_btn on" @click.prevent="handleOnline"></a><span>{{ onlineButtonText }}</span></li>
+                                    <li v-show="featureSwitches.call"><a href="#" id="callBtn" class="wh_btn" @click.prevent="handleCall"></a><span>外呼</span></li>
+                                    <li id="holdBtnLi" v-show="showHoldBtn && featureSwitches.hold"><a href="#" id="holdBtn" class="bc_btn off" @click.prevent="handleHold"></a><span>保 持</span></li>
+                                    <li id="unHoldBtnLi" v-show="showUnHoldBtn && featureSwitches.hold"><a href="#" id="unHoldBtn" class="bc2_btn off" @click.prevent="handleUnHold"></a><span>取消保持</span></li>
+                                    <li v-show="featureSwitches.transfer"><a href="#" id="transferBtn" class="zjie_btn" @click.prevent="handleTransfer"></a><span>转接</span></li>
+                                    <li v-show="featureSwitches.consultation"><a href="#" id="consultationBtn" class="zixun_btn" @click.prevent="handleConsultation"></a><span>咨询</span></li>
+                                    <li v-show="featureSwitches.conference"><a href="#" id="conferenceBtn" class="hy_btn" @click.prevent="toggleConferenceArea"></a><span>会议</span></li>
+                                    <li v-show="featureSwitches.hangup"><a href="#" id="hangUpBtn" class="gj_btn" @click.prevent="handleHangup"></a><span>挂机</span></li>
+                                    <li v-show="featureSwitches.reset"><a href="#" id="resetStatus" class="qz_btn" @click.prevent="handleReset"></a><span>强置</span></li>
+                                    <li v-show="featureSwitches.signInOut"><a href="#" id="onLineBtn" class="sx_btn on" @click.prevent="handleOnline"></a><span>{{ onlineButtonText }}</span></li>
                                 </ul>
                             </div>
                         </div>
@@ -104,6 +104,12 @@
                 <!-- 会议区域 -->
                 <tr id="conference_area" style="display: none" v-show="showConferenceArea">
                     <td colspan="2" style="padding-left: 130px; padding-top: 30px;">
+                      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+                        <div></div>
+                        <el-button type="danger" size="small" @click="closeConferenceArea" icon="el-icon-close">
+                            关闭
+                        </el-button>
+                      </div>
                         <div>
                             <div>
                                 <div id="conference_start" style="display: block">
@@ -250,6 +256,11 @@
                                 <td width="90">业务组</td>
                                 <td width="90">坐席成员</td>
                                 <td>&nbsp;</td>
+                                <td align="right">
+                                    <el-button type="danger" size="small" @click="closeTransferArea" icon="el-icon-close">
+                                        关闭
+                                    </el-button>
+                                </td>
                             </tr>
                             <tr>
                                 <td>
@@ -514,6 +525,7 @@ export default {
             groupId: DefaultConfig.groupId,
             skillLevel: DefaultConfig.skillLevel,
             ipccServerUrl: DefaultConfig.ipccServerUrl,
+            myGateway:null,
 
             // 状态显示
             loginTime: '00:00:00',
@@ -610,7 +622,10 @@ export default {
             cityList: [],
             countyList: [],
             allCityList: [], // 存储当前城市数据
-            allCountyList: [] // 存储当前区县数据
+            allCountyList: [], // 存储当前区县数据
+
+            // 功能开关配置（从配置文件读取默认值）
+            featureSwitches: DefaultConfig.featureSwitches
         };
     },
 
@@ -683,6 +698,8 @@ export default {
                 if (response.code === 200 && response.data && response.data.extNum) {
                     // 将 extNum 设置到配置中
                     this.extNum = response.data.extNum;
+                    // 将 网关 设置到配置中
+                    this.myGateway = response.data.gatewayIds;
                     // 然后再加载 websocket 参数
                     this.loadWebsocketParam();
                 } else {
@@ -694,12 +711,13 @@ export default {
         },
 
         loadWebsocketParam(){
-            getToolbarBasicParam(this.extNum).then(response => {
+            console.log('开始用本地参数请求远端接口,分机号:', this.extNum + ",本地配置网关：" + this.myGateway);
+            getToolbarBasicParam({ extNum:this.extNum, myGateway: this.myGateway }).then(response => {
                 if(response.code === 0) {
                     //设置登陆账号和用户名
                     this.opNum = response.data.opNum;
                     this.userName = response.data.userName;
-                    console.log('获取到 分机号:', this.extNum + ",登陆账号：" + this.opNum + ",用户名:" + this.userName);
+                    console.log('获取到远端 分机号:', this.extNum + ",登陆账号：" + this.opNum + ",用户名:" + this.userName);
                     // 构建配置对象
                     const callConfig = {
                         useDefaultUi: true,
@@ -1233,7 +1251,20 @@ export default {
                     const el = document.querySelector(btn);
                     // console.log(`[DEBUG] Processing button ${btn}, element exists:`, !!el);
                     if (el) {
-                        if (statusInfo.enabled_btn.includes(btn)) {
+                        // 检查功能开关配置
+                        let isFeatureEnabled = true;
+                        if (btn === '#setFree') isFeatureEnabled = this.featureSwitches.setFree;
+                        else if (btn === '#setBusy') isFeatureEnabled = this.featureSwitches.setBusy;
+                        else if (btn === '#callBtn') isFeatureEnabled = this.featureSwitches.call;
+                        else if (btn === '#holdBtn' || btn === '#unHoldBtn') isFeatureEnabled = this.featureSwitches.hold;
+                        else if (btn === '#transferBtn') isFeatureEnabled = this.featureSwitches.transfer;
+                        else if (btn === '#consultationBtn') isFeatureEnabled = this.featureSwitches.consultation;
+                        else if (btn === '#hangUpBtn') isFeatureEnabled = this.featureSwitches.hangup;
+                        else if (btn === '#resetStatus') isFeatureEnabled = this.featureSwitches.reset;
+                        else if (btn === '#onLineBtn') isFeatureEnabled = this.featureSwitches.signInOut;
+
+                        // 只有在功能启用且状态允许时才启用按钮
+                        if (statusInfo.enabled_btn.includes(btn) && isFeatureEnabled) {
                             el.classList.add('on');
                             // console.log(`[DEBUG] Added 'on' class to ${btn}`);
                         } else {
@@ -1429,7 +1460,24 @@ export default {
         },
 
         /**
-         * 转接处理（与 source 一致）
+         * 关闭转接/咨询区域
+         */
+        closeTransferArea() {
+            this.showTransferArea = false;
+            this.showDoTransferBtn = false;
+            this.showDoConsultationBtn = false;
+        },
+
+        /**
+         * 关闭会议区域
+         */
+        closeConferenceArea() {
+            this.showConferenceArea = false;
+            this.showConferenceMemberList = false;
+        },
+
+        /**
+         * 转接处理（美化版）
          */
         handleTransfer() {
             if (!this.phoneBar.getIsConnected()) {
@@ -1438,6 +1486,7 @@ export default {
             }
             const btn = document.getElementById('transferBtn');
             if (btn && btn.classList.contains('on')) {
+                // 如果已经显示转接区域，则隐藏；否则显示
                 this.showTransferArea = !this.showTransferArea;
                 if (this.showTransferArea) {
                     // 先填充业务组选项
@@ -1450,6 +1499,16 @@ export default {
                     this.showTransferCallWait = false;
                     // 隐藏客户信息表单（与 source 一致）
                     this.showCustomerForm = false;
+                    // 隐藏会议区域
+                    this.showConferenceArea = false;
+
+                    // 平滑滚动到转接区域
+                    this.$nextTick(() => {
+                        const transferArea = document.getElementById('transfer_area');
+                        if (transferArea) {
+                            transferArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
+                    });
                 } else {
                     // 隐藏转接区域，但不取消订阅（咨询功能也需要）
                     this.showDoTransferBtn = false;
@@ -1459,7 +1518,7 @@ export default {
         },
 
         /**
-         * 咨询处理（与 source 一致）
+         * 咨询处理（美化版）
          */
         handleConsultation() {
             if (!this.phoneBar.getIsConnected()) {
@@ -1468,6 +1527,7 @@ export default {
             }
             const btn = document.getElementById('consultationBtn');
             if (btn && btn.classList.contains('on')) {
+                // 如果已经显示咨询区域，则隐藏；否则显示
                 this.showTransferArea = !this.showTransferArea;
                 if (this.showTransferArea) {
                     // 先填充业务组选项
@@ -1482,6 +1542,16 @@ export default {
                     this.showTransferCallWait = false;
                     // 隐藏客户信息表单（与 source 一致）
                     this.showCustomerForm = false;
+                    // 隐藏会议区域
+                    this.showConferenceArea = false;
+
+                    // 平滑滚动到咨询区域
+                    this.$nextTick(() => {
+                        const transferArea = document.getElementById('transfer_area');
+                        if (transferArea) {
+                            transferArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
+                    });
                 } else {
                     // 隐藏咨询区域，但不取消订阅（转接功能也需要）
                     this.showDoConsultationBtn = false;
@@ -1491,14 +1561,28 @@ export default {
         },
 
         /**
-         * 会议区域切换（与 source 一致）
+         * 会议区域切换（美化版）
          */
         toggleConferenceArea() {
             if (!this.phoneBar.getIsConnected()) {
                 this.$message.warning('请先上线.');
                 return;
             }
+            // 如果已经显示会议区域，则隐藏；否则显示
             this.showConferenceArea = !this.showConferenceArea;
+            if (this.showConferenceArea) {
+                this.showConferenceMemberList = false;
+                // 隐藏转接/咨询区域
+                this.showTransferArea = false;
+
+                // 平滑滚动到会议区域
+                this.$nextTick(() => {
+                    const conferenceArea = document.getElementById('conference_area');
+                    if (conferenceArea) {
+                        conferenceArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }
+                });
+            }
         },
 
         /**
@@ -2146,132 +2230,126 @@ export default {
 </script>
 
 <style scoped>
-
 .call-center-phone-bar {
-    background: #eef3fa;
-    padding: 10px;
+    background: transparent;
+    padding: 20px;
+    border-radius: 12px;
+    min-height: 200px;
 }
 
-/* 电话工具条相关样式 - 从 page.css 迁移过来，添加作用域限制 */
+/* 拨号盘区域 */
 .call-center-phone-bar .head_dial {
-    padding-top: 2px;
+    padding: 15px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    margin-bottom: 15px;
 }
 
 .call-center-phone-bar .dial {
     float: left;
+    margin-right: 20px;
 }
 
 .call-center-phone-bar .dial dt {
-    padding-bottom: 2px;
-}
-
-.call-center-phone-bar .dial dt input {
-    vertical-align: middle;
+    padding-bottom: 8px;
 }
 
 .call-center-phone-bar .tel_txt {
-    border: 1px solid #dfe5e7;
-    border-radius: 3px;
-    height: 35px;
+    border: 2px solid #e0e6ed;
+    border-radius: 8px;
+    height: 42px;
     font-size: 16px;
-    background: #FFF;
-    color: #768595;
-    text-indent: 5px;
-    width: 120px;
+    background: #FFFFFF;
+    color: #2c3e50;
+    text-indent: 15px;
+    width: 200px;
+    transition: all 0.3s ease;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-.call-center-phone-bar .dial dd input,
-.call-center-phone-bar .dial dd ul {
-    float: left;
+.call-center-phone-bar .tel_txt:focus {
+    border-color: #409EFF;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
+}
+
+.call-center-phone-bar .tel_txt::placeholder {
+    color: #909399;
 }
 
 .call-center-phone-bar .dial dd ul {
-    border: 1px solid #dfe5e7;
-    background: #FFF;
-    border-radius: 3px;
+    border: 2px solid #e0e6ed;
+    background: #FFFFFF;
+    border-radius: 8px;
     height: auto;
-    width: 80px;
+    width: 100px;
     margin-left: 0;
     padding: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .call-center-phone-bar .dial dd ul li {
     height: auto;
-    line-height: 23px;
+    line-height: 28px;
     margin-left: 0;
-    padding-left: 5px;
-}
-
-.call-center-phone-bar .dial dd ul li.status1 {
-    color: #f39700;
-}
-
-.call-center-phone-bar .dial dd ul li.status2 {
-    color: #98bf40;
-}
-
-.call-center-phone-bar .dial dd ul li.status3 {
-    color: #98bf40;
-}
-
-.call-center-phone-bar .dial dd ul li.status4 {
-    color: #23a9f6;
-}
-
-.call-center-phone-bar .dial dd ul li.status5 {
-    color: #adadad;
+    padding-left: 10px;
+    font-weight: 500;
 }
 
-.call-center-phone-bar .dial dd b {
-    line-height: 23px;
-    padding-left: 1px;
-}
+.call-center-phone-bar .dial dd ul li.status1 { color: #E6A23C; }
+.call-center-phone-bar .dial dd ul li.status2 { color: #67C23A; }
+.call-center-phone-bar .dial dd ul li.status3 { color: #67C23A; }
+.call-center-phone-bar .dial dd ul li.status4 { color: #409EFF; }
+.call-center-phone-bar .dial dd ul li.status5 { color: #909399; }
 
+/* 按钮组 */
 .call-center-phone-bar .dial_btn {
     float: left;
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .call-center-phone-bar .dial_btn li {
-    float: left;
-    margin-left: 12px;
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    border: 2px solid #e8e8e8;
+}
+
+.call-center-phone-bar .dial_btn li:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    border-color: #409EFF;
 }
 
 .call-center-phone-bar .dial_btn li a {
     display: block;
-    border-radius: 10px;
-    border: 1px solid #dfe5e7;
-    width: 48px;
-    height: 48px;
-    margin: 4px auto;
+    border-radius: 50%;
+    border: 3px solid #409EFF;
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 8px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+    background-color: #409EFF;
 }
 
-/* 按钮背景图片 - 使用 url() 和相对路径 */
-.call-center-phone-bar .dial_btn,
-.call-center-phone-bar .gj_btn,
-.call-center-phone-bar .zj_btn,
-.call-center-phone-bar .bc_btn,
-.call-center-phone-bar .zjie_btn,
-.call-center-phone-bar .myd_btn,
-.call-center-phone-bar .jt_btn,
-.call-center-phone-bar .qca_btn,
-.call-center-phone-bar .lj_btn,
-.call-center-phone-bar .qc_btn,
-.call-center-phone-bar .hy_btn,
-.call-center-phone-bar .sx_btn,
-.call-center-phone-bar .xx_btn,
-.call-center-phone-bar .wc_btn,
-.call-center-phone-bar .jy_btn,
-.call-center-phone-bar .xz_btn,
-.call-center-phone-bar .sm_btn,
-.call-center-phone-bar .qz_btn,
-.call-center-phone-bar .qiangjie_btn,
-.call-center-phone-bar .lanjie_btn {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/created_dial_off.png");
-    background-repeat: no-repeat;
-    background-color: #FFF;
+.call-center-phone-bar .dial_btn li span {
+    font-size: 12px;
+    color: #606266;
+    font-weight: 500;
+    text-align: center;
 }
 
+/* 按钮激活状态 */
 .call-center-phone-bar .wh_btn.on,
 .call-center-phone-bar .zj_btn.on,
 .call-center-phone-bar .gj_btn.on,
@@ -2288,239 +2366,232 @@ export default {
 .call-center-phone-bar .wc_btn.on,
 .call-center-phone-bar .jy_btn.on,
 .call-center-phone-bar .xz_btn.on,
-.call-center-phone-bar .sm_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/created_dial_on.png");
-    background-repeat: no-repeat;
+.call-center-phone-bar .sm_btn.on,
+.call-center-phone-bar .qz_btn.on {
+    filter: grayscale(0%) !important;
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    border-color: #409EFF !important;
+    background-color: #409EFF !important;
 }
 
-/* 外呼按钮 */
+/* 外呼按钮 - 绿色 */
 .call-center-phone-bar .wh_btn,
 .call-center-phone-bar .wh_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/call.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .wh_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/call.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 挂机按钮 */
+/* 挂机按钮 - 红色 */
 .call-center-phone-bar .gj_btn,
 .call-center-phone-bar .gj_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/hangup_enable.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .gj_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/hangup_enable.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 保持按钮 */
+/* 保持按钮 - 橙色 */
 .call-center-phone-bar .bc_btn,
 .call-center-phone-bar .bc_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/hold.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .bc_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/hold.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 取消保持按钮 */
+/* 取消保持按钮 - 蓝色 */
 .call-center-phone-bar .bc2_btn,
 .call-center-phone-bar .bc2_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/unhold.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .bc2_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/unhold.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 转接按钮 */
+/* 转接按钮 - 紫色 */
 .call-center-phone-bar .zjie_btn,
 .call-center-phone-bar .zjie_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/transfer.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .zjie_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/transfer.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 咨询按钮 */
+/* 咨询按钮 - 青色 */
 .call-center-phone-bar .zixun_btn,
 .call-center-phone-bar .zixun_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/consultation.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .zixun_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/consultation.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 会议按钮 */
+/* 会议按钮 - 深蓝色 */
 .call-center-phone-bar .hy_btn,
 .call-center-phone-bar .hy_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/conference.png");
     background-repeat: no-repeat;
+    background-size: contain;
+    filter: grayscale(100%);
 }
 
 .call-center-phone-bar .hy_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/conference.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 上线按钮 */
+/* 上线按钮 - 蓝绿色 */
 .call-center-phone-bar .sx_btn,
 .call-center-phone-bar .sx_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/online.png");
     background-repeat: no-repeat;
+    background-size: contain;
+    filter: grayscale(100%);
 }
 
 .call-center-phone-bar .sx_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/online.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 置闲按钮 */
+/* 置闲按钮 - 灰色 */
 .call-center-phone-bar .xz_btn,
 .call-center-phone-bar .xz_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/setFree.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
 }
 
 .call-center-phone-bar .xz_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/setFree.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
 }
 
-/* 置忙按钮 */
+/* 置忙按钮 - 橙红色 */
 .call-center-phone-bar .sm_btn,
 .call-center-phone-bar .sm_btn.on {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/busy_enable.png");
     background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
+    background-size: contain;
     filter: grayscale(100%);
+    border: 3px solid #409EFF;
+    background-color: #409EFF;
 }
 
 .call-center-phone-bar .sm_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/busy_enable.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(1%);
-    -moz-filter: grayscale(1%);
-    -ms-filter: grayscale(1%);
-    -o-filter: grayscale(1%);
-    filter: grayscale(1%);
+    filter: grayscale(0%);
+    border-color: #409EFF;
+    background-color: #409EFF;
 }
 
-/* 强置按钮 */
-.call-center-phone-bar .qz_btn,
-.call-center-phone-bar .qz_btn.on {
+/* 强置按钮 - 始终黄色 */
+.call-center-phone-bar .qz_btn {
     background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/reset.png");
     background-repeat: no-repeat;
+    background-size: contain;
+    filter: grayscale(0%);
+    border: 3px solid #E6A23C;
+    background-color: #E6A23C;
 }
 
+/* 强置按钮激活状态也保持黄色 */
 .call-center-phone-bar .qz_btn.on {
-    background-image: url("../../assets/callCenterPhoneBarSdk/images/phonebar/reset.png");
-    background-repeat: no-repeat;
-    -webkit-filter: grayscale(100%);
-    -moz-filter: grayscale(100%);
-    -ms-filter: grayscale(100%);
-    -o-filter: grayscale(100%);
-    filter: grayscale(100%);
+    filter: grayscale(0%);
+    border-color: #E6A23C !important;
+    background-color: #E6A23C !important;
+}
+
+/* 下拉选择框 */
+.call-center-phone-bar select {
+    border: 2px solid #e0e6ed;
+    border-radius: 6px;
+    height: 32px;
+    background: #FFFFFF;
+    color: #606266;
+    font-size: 13px;
+    padding: 0 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
-/* 会议成员列表样式 */
+.call-center-phone-bar select:hover {
+    border-color: #409EFF;
+}
+
+.call-center-phone-bar select:focus {
+    border-color: #409EFF;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
+}
+
+/* 输入框 */
+.call-center-phone-bar input[type='text'] {
+    border: 2px solid #e0e6ed;
+    border-radius: 6px;
+    height: 32px;
+    font-size: 14px;
+    background: #FFFFFF;
+    color: #606266;
+    text-indent: 10px;
+    transition: all 0.3s ease;
+}
+
+.call-center-phone-bar input[type='text']:focus {
+    border-color: #409EFF;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
+}
+
+/* 按钮 */
+.call-center-phone-bar input[type='button'] {
+    border: none;
+    border-radius: 6px;
+    height: 32px;
+    font-size: 13px;
+    background: linear-gradient(to right, #409EFF, #66b1ff);
+    color: #FFFFFF;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+}
+
+.call-center-phone-bar input[type='button']:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+}
+
+.call-center-phone-bar input[type='button']:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* 会议成员列表 */
 .call-center-phone-bar #conference_member_list ul {
     float: left;
     overflow: hidden;
@@ -2531,20 +2602,31 @@ export default {
     float: left;
     border-style: solid;
     border-width: 1px;
-    border-color: #dfe5e7 #dfe5e7 #eef3fa #dfe5e7;
+    border-color: #e0e6ed;
+    background: #f5f7fa;
     width: 700px;
-    line-height: 35px;
+    line-height: 40px;
+    margin: 4px 0;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.call-center-phone-bar #conference_member_list li:hover {
+    background: #ecf5ff;
+    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
 }
 
 .call-center-phone-bar .conf_name {
-    padding-left: 10px;
+    padding-left: 15px;
     width: 100px;
     display: inline-block;
+    font-weight: 500;
 }
 
 .call-center-phone-bar .conf_phone {
-    width: 120px;
+    width: 130px;
     display: inline-block;
+    color: #606266;
 }
 
 .call-center-phone-bar .conf_call_type {
@@ -2563,227 +2645,252 @@ export default {
 .call-center-phone-bar .conf_status {
     width: 120px;
     display: inline-block;
+    font-weight: 500;
 }
 
-.call-center-phone-bar .conf_mute {
-    width: 40px;
-    display: inline-block;
-    padding-top: 3px;
-}
-
-.call-center-phone-bar .conf_vmute {
-    width: 40px;
+.call-center-phone-bar .conf_mute,
+.call-center-phone-bar .conf_vmute,
+.call-center-phone-bar .conf_remove,
+.call-center-phone-bar .conf_re_invite {
+    width: 50px;
     display: inline-block;
-    padding-top: 3px;
+    text-align: center;
 }
 
-.call-center-phone-bar .conf_remove {
-    width: 35px;
-    display: inline-block;
+.call-center-phone-bar .conf_mute img,
+.call-center-phone-bar .conf_vmute img {
+    transition: all 0.3s ease;
 }
 
-.call-center-phone-bar .conf_re_invite {
-    width: 35px;
-    display: inline-block;
+.call-center-phone-bar .conf_mute a:hover img,
+.call-center-phone-bar .conf_vmute a:hover img {
+    transform: scale(1.2);
 }
 
-/* ASR 聊天容器样式 */
+/* ASR 聊天容器 */
 .call-center-phone-bar #chat-container {
     width: 90%;
     max-width: 600px;
     margin: 20px auto;
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 10px;
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid #e0e6ed;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    padding: 15px;
 }
 
 .call-center-phone-bar .message {
-    padding: 10px;
+    padding: 12px 16px;
     margin: 10px 0;
-    border-radius: 8px;
+    border-radius: 12px;
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .call-center-phone-bar .customer {
-    background-color: #F5F5F5;
-    align-self: flex-start;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-left: 4px solid #909399;
 }
 
 .call-center-phone-bar .agent {
-    background-color: #95EC69;
-    align-self: flex-end;
+    background: linear-gradient(135deg, #f0f9ff 0%, #c6efff 100%);
+    border-right: 4px solid #409EFF;
 }
 
 .call-center-phone-bar .system-message {
     text-align: center;
-    color: gray;
+    color: #909399;
     font-style: italic;
+    padding: 10px;
+    background: rgba(245, 247, 250, 0.5);
+    border-radius: 8px;
+    margin: 10px 0;
 }
 
 .call-center-phone-bar .message-container {
     display: flex;
     flex-direction: column;
+    max-height: 400px;
+    overflow-y: auto;
 }
 
-.call-center-phone-bar .message-header {
-    font-weight: bold;
-    margin-bottom: 5px;
+.call-center-phone-bar .message-container::-webkit-scrollbar {
+    width: 6px;
 }
 
-/* 转接和咨询下拉框样式 */
-::v-deep #transfer_to_groupIds,
-::v-deep #transfer_to_member {
-    width: 150px;
-    max-height: 200px;
-    overflow-y: auto;
-    border: 1px solid #dfe5e7;
+.call-center-phone-bar .message-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
     border-radius: 3px;
-    background: #FFF;
-    color: #768595;
-    font-size: 12px;
-    padding: 5px;
 }
 
-::v-deep #transfer_to_groupIds option,
-::v-deep #transfer_to_member option {
-    padding: 5px;
-    cursor: pointer;
+.call-center-phone-bar .message-container::-webkit-scrollbar-thumb {
+    background: #c0c4cc;
+    border-radius: 3px;
 }
 
-::v-deep #transfer_to_groupIds option:hover,
-::v-deep #transfer_to_member option:hover {
-    background-color: #f0f0f0;
+.call-center-phone-bar .message-container::-webkit-scrollbar-thumb:hover {
+    background: #909399;
 }
 
-/* 确保样式能够覆盖到子组件 */
-::v-deep .dial_btn li a {
-    cursor: pointer;
+.call-center-phone-bar .message-header {
+    font-weight: 600;
+    margin-bottom: 6px;
+    color: #606266;
+    font-size: 13px;
 }
 
-::v-deep input[type='button']:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+.call-center-phone-bar .message-content {
+    color: #303133;
+    font-size: 14px;
+    line-height: 1.6;
 }
 
-::v-deep select {
-    border: 1px solid #dfe5e7;
-    border-radius: 3px;
-    height: 25px;
-    background: #FFF;
-    color: #768595;
+/* 客户信息表单 */
+.call-center-phone-bar .customer-form {
+    background: rgba(255, 255, 255, 0.98);
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    border: 1px solid #e0e6ed;
 }
 
-::v-deep input[type='text'] {
-    border: 1px solid #dfe5e7;
-    border-radius: 3px;
-    height: 35px;
-    font-size: 16px;
-    background: #FFF;
-    color: #768595;
-    text-indent: 5px;
+.call-center-phone-bar .customer-form h3 {
+    background: linear-gradient(to right, #409EFF, #66b1ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    border-left: none;
+    padding-left: 0;
 }
 
-/* 转接/咨询面板样式 */
-::v-deep .transfer-consult-panel {
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-    max-width: 900px;
-    margin: 0 auto;
+/* 转接和咨询下拉框 */
+::v-deep #transfer_to_groupIds,
+::v-deep #transfer_to_member {
+    width: 100%;
+    border: 2px solid #e0e6ed;
+    border-radius: 6px;
+    background: #FFFFFF;
+    transition: all 0.3s ease;
 }
 
-::v-deep .panel-header {
-    padding: 20px 24px;
-    border-bottom: 1px solid #ebeef5;
-    background: linear-gradient(to right, #409EFF, #66b1ff);
-    border-radius: 8px 8px 0 0;
+::v-deep #transfer_to_groupIds:hover,
+::v-deep #transfer_to_member:hover {
+    border-color: #409EFF;
 }
 
-::v-deep .panel-header h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #fff;
+::v-deep #transfer_to_groupIds:focus,
+::v-deep #transfer_to_member:focus {
+    border-color: #409EFF;
+    box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
 }
 
-::v-deep .panel-content {
-    padding: 24px;
+::v-deep .el-select .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 6px;
+    border: 2px solid #e0e6ed;
+    transition: all 0.3s ease;
 }
 
-::v-deep .form-row {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
+::v-deep .el-select .el-input__inner:hover {
+    border-color: #409EFF;
 }
 
-::v-deep .form-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+::v-deep .el-button {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.3s ease;
 }
 
-::v-deep .form-item.full-width {
-    flex: none;
-    width: 100%;
+::v-deep .el-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-::v-deep .form-label {
-    font-size: 14px;
-    color: #606266;
-    margin-bottom: 8px;
-    font-weight: 500;
+/* 确保样式能够覆盖到子组件 */
+::v-deep .dial_btn li a {
+    cursor: pointer;
 }
 
-::v-deep .el-select,
-::v-deep .el-input {
-    width: 100%;
+/* 转接和咨询区域 */
+.call-center-phone-bar #transfer_area {
+    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+    border-radius: 12px;
+    padding: 20px !important;
+    margin-top: 15px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e0e6ed;
+    animation: slideDownFade 0.3s ease;
 }
 
-::v-deep .el-select .el-input__inner {
-    height: 40px;
-    line-height: 40px;
-    border-radius: 4px;
+@keyframes slideDownFade {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-::v-deep .el-input__inner {
-    height: 40px;
-    line-height: 40px;
-    border-radius: 4px;
-    transition: all 0.3s;
+/* 会议区域 */
+.call-center-phone-bar #conference_area {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+    border-radius: 12px;
+    padding: 20px !important;
+    margin-top: 15px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e0e6ed;
+    animation: slideDownFade 0.3s ease;
 }
 
-::v-deep .el-input__inner:hover {
-    border-color: #409EFF;
+::v-deep input[type='button']:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
 }
 
-::v-deep .form-tip {
-    font-size: 12px;
-    color: #909399;
-    margin-top: 6px;
-    margin-left: 4px;
+/* 表格第一行样式 */
+.call-center-phone-bar table tr:first-child {
+    background: linear-gradient(to right, #667eea, #764ba2);
 }
 
-::v-deep .form-actions {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    padding-top: 20px;
-    border-top: 1px solid #ebeef5;
+.call-center-phone-bar table tr:first-child td {
+    padding: 15px 20px;
 }
 
-::v-deep .form-actions .el-button {
-    min-width: 100px;
-    font-size: 14px;
+.call-center-phone-bar table tr:first-child b {
+    color: #FFFFFF;
+    font-weight: 600;
 }
 
-/* 转接/咨询区域的下拉框样式 */
-::v-deep #transfer_to_groupIds,
-::v-deep #transfer_to_member {
-    width: 100%;
+.call-center-phone-bar table tr:first-child .status4 {
+    color: #FFFFFF;
+    background: rgba(255, 255, 255, 0.2);
 }
 
-::v-deep .el-select {
-    width: 100%;
+/* 响应式设计 */
+@media (max-width: 1200px) {
+    .call-center-phone-bar {
+        padding: 15px;
+    }
+
+    .call-center-phone-bar .dial_btn {
+        flex-wrap: wrap;
+    }
+
+    .call-center-phone-bar .dial_btn li {
+        margin: 4px;
+    }
 }
 </style>

src/views/aiSipCall/aiSipCallUser.vue

@@ -51,7 +51,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-          v-hasPermi="['aiSipCallUser:aiSipCallUser:edit']"
+          v-hasPermi="['company:aiSipCallUser:aiSipCallUser:edit']"
         >修改
         </el-button>
       </el-col>
@@ -63,7 +63,7 @@
       <!--          size="mini"-->
       <!--          :disabled="multiple"-->
       <!--          @click="handleDelete"-->
-      <!--          v-hasPermi="['aiSipCallUser:aiSipCallUser:remove']"-->
+      <!--          v-hasPermi="['company:aiSipCallUser:aiSipCallUser:remove']"-->
       <!--        >删除</el-button>-->
       <!--      </el-col>-->
       <el-col :span="1.5">
@@ -74,7 +74,7 @@
           size="mini"
           :loading="exportLoading"
           @click="handleExport"
-          v-hasPermi="['aiSipCallUser:aiSipCallUser:export']"
+          v-hasPermi="['company:aiSipCallUser:aiSipCallUser:export']"
         >导出
         </el-button>
       </el-col>
@@ -104,6 +104,11 @@
         </template>
       </el-table-column>
       <el-table-column label="绑定分机号" align="center" prop="extNum"/>
+      <el-table-column label="绑定网关" align="center" prop="gatewayIds">
+        <template slot-scope="scope">
+          <span>{{ getGatewayNames(scope.row.gatewayIds) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -113,7 +118,7 @@
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
-            v-hasPermi="['aiSipCallUser:aiSipCallUser:edit']"
+            v-hasPermi="['company:aiSipCall:aiSipCallUser:edit']"
           >修改
           </el-button>
           <!--          <el-button-->
@@ -121,7 +126,7 @@
           <!--            type="text"-->
           <!--            icon="el-icon-delete"-->
           <!--            @click="handleDelete(scope.row)"-->
-          <!--            v-hasPermi="['aiSipCallUser:aiSipCallUser:remove']"-->
+          <!--            v-hasPermi="['company:aiSipCallUser:aiSipCallUser:remove']"-->
           <!--          >删除</el-button>-->
         </template>
       </el-table-column>
@@ -178,6 +183,16 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="网关" prop="gatewayIds">
+          <el-select v-model="selectedGateways" placeholder="请选择网关" multiple collapse-tags>
+            <el-option
+                      v-for="item in gateways"
+                      :key="item.id"
+                      :label="item.gwDesc"
+                      :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
@@ -200,6 +215,7 @@ import {
   exportAiSipCallUser,
   getUnBindExtnum
 } from "@/api/aiSipCall/aiSipCallUser";
+import {remoteList} from "../../api/aiSipCall/aiSipCallGateway";
 
 export default {
   name: "AiSipCallUser",
@@ -223,6 +239,10 @@ export default {
       aiSipCallUserList: [],
       // 分机号码下拉选项
       extNumOptions: [],
+      //网关列表
+      gateways: [],
+      // 选中的网关
+      selectedGateways: [],
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -286,10 +306,18 @@ export default {
           this.form.sex = Number(this.form.sex);
           // 修改时将密码设置为 null，不显示密码输入框
           this.form.password = null;
+          // 如果有网关字符串，分割为数组并转换为数字类型
+          if (this.form.gatewayIds) {
+            this.selectedGateways = this.form.gatewayIds.split(',').map(id => Number(id));
+          }
           // 获取最新的未绑定分机号列表
           getUnBindExtnum().then(res => {
             this.extNumOptions = res.data || [];
           });
+          // 获取网关列表
+          remoteList({ pageNum:1, pageSize: 500,params:{purposes: [1, 3]} }).then(response => {
+            this.gateways = response.rows || [];
+          });
           this.open = true;
           // 显示具体的员工姓名
           const employeeName = this.form.userName || '未知角色';
@@ -318,6 +346,11 @@ export default {
         this.extNumOptions = response.data || [];
       });
 
+      // 获取网关列表
+      remoteList({ pageNum:1, pageSize: 500,params:{purposes: [1, 3]} }).then(response => {
+        this.gateways = response.rows || [];
+      });
+
       this.open = true;
       // 显示具体的员工姓名
       const employeeName = nickName || '未知员工';
@@ -326,9 +359,16 @@ export default {
     /** 查询sip用户信息列表 */
     getList() {
       this.loading = true;
-      listAiSipCallUser(this.queryParams).then(response => {
-        this.aiSipCallUserList = response.rows;
-        this.total = response.total;
+      // 先获取网关列表
+      remoteList({ pageNum:1, pageSize: 500,params:{purposes: [1, 3]} }).then(response => {
+        this.gateways = response.rows || [];
+        // 再获取用户列表
+        listAiSipCallUser(this.queryParams).then(response => {
+            this.aiSipCallUserList = response.rows;
+            this.total = response.total;
+            this.loading = false;
+        });
+      }).catch(() => {
         this.loading = false;
       });
     },
@@ -340,31 +380,9 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        userId: null,
-        deptId: null,
-        loginName: null,
-        userName: null,
-        userType: null,
-        email: null,
-        phonenumber: null,
-        sex: 0,
-        avatar: null,
-        password: '123456',
-        salt: null,
-        status: 0,
-        delFlag: null,
-        loginIp: null,
-        loginDate: null,
-        pwdUpdateDate: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null,
-        logo: null,
-        companyUserId: null,
-        extNum: null
+        password: '123456'
       };
+      this.selectedGateways = [];
       this.passwordVisible = false;
       this.resetForm("form");
     },
@@ -401,12 +419,20 @@ export default {
         this.form.sex = Number(this.form.sex);
         // 修改时将密码设置为 null，不显示密码输入框
         this.form.password = null;
+        // 如果有网关字符串，分割为数组并转换为数字类型
+        if (this.form.gatewayIds) {
+          this.selectedGateways = this.form.gatewayIds.split(',').map(id => Number(id));
+        }
         // 获取最新的未绑定分机号列表
         getUnBindExtnum().then(res => {
           this.extNumOptions = res.data || [];
         });
-        this.open = true;
-        this.title = "修改 sip 用户信息";
+        // 获取网关列表
+        remoteList({ pageNum:1, pageSize: 500,params:{purposes: [1, 3]} }).then(response => {
+          this.gateways = response.rows || [];
+          this.open = true;
+          this.title = "修改 sip 用户信息";
+        });
       });
     },
     // 切换密码显示/隐藏
@@ -417,7 +443,10 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          if (this.form.userId != null) {
+            // 将选中的网关数组用逗号拼接成字符串
+            this.form.gatewayIds = this.selectedGateways.join(',');
+
+            if (this.form.userId != null) {
             updateAiSipCallUser(this.form).then(response => {
               this.msgSuccess("修改成功");
               this.open = false;
@@ -455,7 +484,7 @@ export default {
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有 sip用户信息数据项？', "警告", {
+      this.$confirm('是否确认导出所有 sip 用户信息数据项？', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
@@ -468,6 +497,20 @@ export default {
       }).catch(() => {
       })
     },
+    /** 根据网关 IDs 获取网关名称 */
+    getGatewayNames(gatewayIds) {
+      if (!gatewayIds) {
+          return '';
+      }
+      const ids = gatewayIds.split(',').map(id => Number(id));
+      const names = ids
+          .map(id => {
+              const gateway = this.gateways.find(gw => gw.id === id);
+              return gateway ? gateway.gwDesc : '';
+          })
+          .filter(name => name);
+      return names.join(', ');
+    }
   }
 };
 </script>