|
@@ -6,6 +6,7 @@
|
|
|
≡ {{ sidebarVisible ? '收起配置' : '展开配置' }}
|
|
≡ {{ sidebarVisible ? '收起配置' : '展开配置' }}
|
|
|
</div>
|
|
</div>
|
|
|
<h1 class="title">智能客服</h1>
|
|
<h1 class="title">智能客服</h1>
|
|
|
|
|
+ <div class="logout-btn" @click="handleLogout">退出登录</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content-wrapper">
|
|
@@ -190,6 +191,16 @@ import { ArrowUp, ArrowDown, Microphone, PhoneFilled, ChatDotRound, Mute } from
|
|
|
import { useVoiceRecognition } from './composables/useVoiceRecognition.js'
|
|
import { useVoiceRecognition } from './composables/useVoiceRecognition.js'
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
+// 获取请求头(包含token)
|
|
|
|
|
+const getHeaders = () => {
|
|
|
|
|
+ const token = localStorage.getItem('talk_token')
|
|
|
|
|
+ return {
|
|
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
|
|
+ 'Authorization': token ? `Bearer ${token}` : '',
|
|
|
|
|
+ 'clientid': 'talk-web'
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const showChat = ref(false)
|
|
const showChat = ref(false)
|
|
|
const isTextInput = ref(false)
|
|
const isTextInput = ref(false)
|
|
|
const isMicMuted = ref(false)
|
|
const isMicMuted = ref(false)
|
|
@@ -285,9 +296,7 @@ watch(currentTranscription, async (newVal, oldVal) => {
|
|
|
const selectedAgentData = agents.value.find(a => a.id === selectedAgent.value)
|
|
const selectedAgentData = agents.value.find(a => a.id === selectedAgent.value)
|
|
|
const response = await fetch('http://localhost:8080/talk/message', {
|
|
const response = await fetch('http://localhost:8080/talk/message', {
|
|
|
method: 'POST',
|
|
method: 'POST',
|
|
|
- headers: {
|
|
|
|
|
- 'Content-Type': 'application/json'
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ headers: getHeaders(),
|
|
|
body: JSON.stringify({
|
|
body: JSON.stringify({
|
|
|
message: newContent,
|
|
message: newContent,
|
|
|
agentId: selectedAgent.value,
|
|
agentId: selectedAgent.value,
|
|
@@ -341,9 +350,7 @@ watch(showChat, async (newVal) => {
|
|
|
try {
|
|
try {
|
|
|
await fetch('http://localhost:8080/talk/agent/' + selectedAgent.value, {
|
|
await fetch('http://localhost:8080/talk/agent/' + selectedAgent.value, {
|
|
|
method: 'PUT',
|
|
method: 'PUT',
|
|
|
- headers: {
|
|
|
|
|
- 'Content-Type': 'application/json'
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ headers: getHeaders(),
|
|
|
body: JSON.stringify({
|
|
body: JSON.stringify({
|
|
|
id: selectedAgent.value,
|
|
id: selectedAgent.value,
|
|
|
status: '0'
|
|
status: '0'
|
|
@@ -472,7 +479,9 @@ const selectedAgent = ref(null)
|
|
|
// 获取发言人字典列表
|
|
// 获取发言人字典列表
|
|
|
const fetchTtsVcnList = async () => {
|
|
const fetchTtsVcnList = async () => {
|
|
|
try {
|
|
try {
|
|
|
- const response = await fetch('http://localhost:8080/talk/dict/ttsVcn')
|
|
|
|
|
|
|
+ const response = await fetch('http://localhost:8080/talk/dict/ttsVcn', {
|
|
|
|
|
+ headers: getHeaders()
|
|
|
|
|
+ })
|
|
|
const data = await response.json()
|
|
const data = await response.json()
|
|
|
ttsVcnList.value = data || []
|
|
ttsVcnList.value = data || []
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
@@ -483,7 +492,9 @@ const fetchTtsVcnList = async () => {
|
|
|
// 获取客服列表
|
|
// 获取客服列表
|
|
|
const fetchAgents = async () => {
|
|
const fetchAgents = async () => {
|
|
|
try {
|
|
try {
|
|
|
- const response = await fetch('http://localhost:8080/talk/agent/list?status=0')
|
|
|
|
|
|
|
+ const response = await fetch('http://localhost:8080/talk/agent/list?status=0', {
|
|
|
|
|
+ headers: getHeaders()
|
|
|
|
|
+ })
|
|
|
const result = await response.json()
|
|
const result = await response.json()
|
|
|
if (result.code === 200 && result.rows) {
|
|
if (result.code === 200 && result.rows) {
|
|
|
agents.value = result.rows.map(agent => ({
|
|
agents.value = result.rows.map(agent => ({
|
|
@@ -509,6 +520,25 @@ const fetchAgents = async () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 退出登录
|
|
|
|
|
+const handleLogout = async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ // 调用后端退出登录接口
|
|
|
|
|
+ await fetch('http://localhost:8080/talk/auth/logout', {
|
|
|
|
|
+ method: 'POST',
|
|
|
|
|
+ headers: getHeaders()
|
|
|
|
|
+ })
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('退出登录失败:', error)
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ // 清除本地存储
|
|
|
|
|
+ localStorage.removeItem('talk_token')
|
|
|
|
|
+ localStorage.removeItem('talk_user')
|
|
|
|
|
+ // 刷新页面返回登录页
|
|
|
|
|
+ window.location.reload()
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
// 组件挂载时获取客服列表和发言人字典
|
|
// 组件挂载时获取客服列表和发言人字典
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
fetchAgents()
|
|
fetchAgents()
|
|
@@ -537,9 +567,7 @@ const startChat = async () => {
|
|
|
if (selectedAgentData) {
|
|
if (selectedAgentData) {
|
|
|
const response = await fetch('http://localhost:8080/talk/agent/' + selectedAgent.value, {
|
|
const response = await fetch('http://localhost:8080/talk/agent/' + selectedAgent.value, {
|
|
|
method: 'PUT',
|
|
method: 'PUT',
|
|
|
- headers: {
|
|
|
|
|
- 'Content-Type': 'application/json'
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ headers: getHeaders(),
|
|
|
body: JSON.stringify({
|
|
body: JSON.stringify({
|
|
|
id: selectedAgent.value,
|
|
id: selectedAgent.value,
|
|
|
ttsSpeed: config.value.speed,
|
|
ttsSpeed: config.value.speed,
|
|
@@ -719,6 +747,27 @@ const handleWheel = (e) => {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.logout-btn {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 20px;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ padding: 6px 16px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ color: #ef4444;
|
|
|
|
|
+ border: 1px solid #ef4444;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ user-select: none;
|
|
|
|
|
+ transition: all 0.2s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.logout-btn:hover {
|
|
|
|
|
+ background: #ef4444;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.content-wrapper {
|
|
.content-wrapper {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
background: white;
|
|
background: white;
|