wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

客服后台结构

Browse Source
This commit is contained in:
wangys
2025-12-15 10:47:01 +08:00
parent 5667bab5c9
commit 56f398e4ca
11 changed files with 1903 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
urbanLifelineWeb/packages/workcase/src/views/admin/agent/AgentView.vue
View File

@@ -1,30 +1,221 @@
<template>
<AdminLayout
:title="智能体管理"
:info="配置和管理AI智能客服"
>
<template default>
<div class="agent">
<!-- 智能体管理视图 -->
<div>
<!-- head部分 -->
</div>
<div>
<!-- 表单部分 -->
</div>
<div>
<!-- 按钮部分 -->
</div>
</div>
</template>
<AdminLayout title="智能体管理" info="配置和管理AI智能客服">
<div class="agent-container">
<el-card>
<template #header>
<div class="card-header">
<span>AI客服配置</span>
<el-button type="primary" size="small" @click="saveConfig">保存配置</el-button>
</div>
</template>
<el-form :model="agentConfig" label-width="150px">
<el-form-item label="智能体名称">
<el-input v-model="agentConfig.name" placeholder="请输入智能体名称" />
</el-form-item>
<el-form-item label="AI模型">
<el-select v-model="agentConfig.model" style="width: 100%;">
<el-option label="GPT-4" value="gpt-4" />
<el-option label="Claude-3" value="claude-3" />
<el-option label="文心一言" value="ernie" />
<el-option label="本地模型" value="local" />
</el-select>
</el-form-item>
<el-form-item label="温度(Temperature)">
<el-slider v-model="agentConfig.temperature" :min="0" :max="1" :step="0.1" show-stops />
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.temperature }}</span>
</el-form-item>
<el-form-item label="最大令牌数">
<el-input-number v-model="agentConfig.maxTokens" :min="100" :max="4000" />
</el-form-item>
<el-form-item label="系统提示词">
<el-input v-model="agentConfig.systemPrompt" type="textarea" rows="4" placeholder="输入系统提示词，用于指导AI的行为" />
</el-form-item>
<el-form-item label="启用知识库">
<el-switch v-model="agentConfig.enableKnowledge" />
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableKnowledge ? '已启用' : '未启用' }}</span>
</el-form-item>
<el-form-item label="启用情感分析">
<el-switch v-model="agentConfig.enableSentiment" />
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableSentiment ? '已启用' : '未启用' }}</span>
</el-form-item>
<el-form-item label="启用自动转工单">
<el-switch v-model="agentConfig.enableAutoTicket" />
<span style="margin-left: 12px; color: #909399;">{{ agentConfig.enableAutoTicket ? '已启用' : '未启用' }}</span>
</el-form-item>
<el-form-item label="响应超时(秒)">
<el-input-number v-model="agentConfig.timeout" :min="5" :max="60" />
</el-form-item>
<el-form-item label="日志级别">
<el-select v-model="agentConfig.logLevel" style="width: 100%;">
<el-option label="DEBUG" value="debug" />
<el-option label="INFO" value="info" />
<el-option label="WARN" value="warn" />
<el-option label="ERROR" value="error" />
</el-select>
</el-form-item>
</el-form>
</el-card>
<!-- 测试区域 -->
<el-card style="margin-top: 16px;">
<template #header>
<span>测试智能体</span>
</template>
<div class="test-section">
<el-input v-model="testMessage" type="textarea" rows="3" placeholder="输入测试消息..." style="margin-bottom: 12px;" />
<el-button type="primary" @click="testAgent">发送测试</el-button>
<div v-if="testResponse" class="test-response">
<h4>AI响应:</h4>
<p>{{ testResponse }}</p>
</div>
</div>
</el-card>
<!-- 性能统计 -->
<el-card style="margin-top: 16px;">
<template #header>
<span>性能统计</span>
</template>
<el-row :gutter="20">
<el-col :span="6">
<div class="stat-box">
<div class="stat-value">{{ stats.totalChats }}</div>
<div class="stat-label">总对话数</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-box">
<div class="stat-value">{{ stats.avgResponseTime }}ms</div>
<div class="stat-label">平均响应时间</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-box">
<div class="stat-value">{{ stats.satisfaction }}</div>
<div class="stat-label">平均满意度</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-box">
<div class="stat-value">{{ stats.uptime }}%</div>
<div class="stat-label">系统可用性</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</AdminLayout>
</template>
<script setup lang="ts">
import AdminLayout from '@/views/admin/AdminLayout.vue';
import { ref } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { ElMessage } from 'element-plus'
const agentConfig = ref({
name: '泰豪小电智能客服',
model: 'gpt-4',
temperature: 0.7,
maxTokens: 2000,
systemPrompt: '你是一个专业的客服助手，代表泰豪小电公司。你需要帮助客户解决设备相关的问题，提供友好、专业的服务。如果问题超出你的能力范围，请建议转接给人工客服。',
enableKnowledge: true,
enableSentiment: true,
enableAutoTicket: true,
timeout: 30,
logLevel: 'info'
})
const testMessage = ref('')
const testResponse = ref('')
const stats = ref({
totalChats: 1258,
avgResponseTime: 1250,
satisfaction: 4.5,
uptime: 99.8
})
const saveConfig = () => {
ElMessage.success('配置保存成功')
}
const testAgent = () => {
if (!testMessage.value.trim()) {
ElMessage.warning('请输入测试消息')
return
}
testResponse.value = '感谢您的咨询。我已收到您的问题，正在为您处理。如果您的问题涉及设备故障，我可以帮您创建一个工单，由我们的技术团队为您服务。'
ElMessage.success('测试消息已发送')
}
</script>
<style lang="scss" scoped>
@import url("./AgentView.scss");
@import url("./AgentView.scss");
.agent-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.test-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.test-response {
margin-top: 12px;
padding: 12px;
background: #f5f7fa;
border-radius: 8px;
border-left: 4px solid #409eff;
}
.test-response h4 {
margin: 0 0 8px 0;
color: #303133;
}
.test-response p {
margin: 0;
color: #606266;
line-height: 1.6;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #409eff;
margin-bottom: 8px;
}
.stat-label {
font-size: 13px;
color: #909399;
}
</style>