合并样式及功能

This commit is contained in:
Erlei Chen
2025-03-21 01:39:23 +08:00
parent 396de72c5d
commit 4409f37000
12 changed files with 756 additions and 199 deletions
+5 -1
View File
@@ -1,4 +1,6 @@
// 引入各个模块的请求
import agent from './module/agent.js'
import device from './module/device.js'
import user from './module/user.js'
/**
@@ -7,7 +9,7 @@ import user from './module/user.js'
* 如果你想调用8002端口,就用'/xiaozhi-esp32-api/api/v1',请与vue.config.js的devServer配置相结合,方便跨域请求
*
*/
const DEV_API_SERVICE = 'https://apifoxmock.com/m1/5931378-5618560-default'
const DEV_API_SERVICE = 'https://m1.apifoxmock.com/m1/5931378-5618560-default'
// 8002开发完成完成后使用这个
// const DEV_API_SERVICE = '/xiaozhi-esp32-api'
@@ -24,4 +26,6 @@ export function getServiceUrl() {
export default {
getServiceUrl,
user,
agent,
device
}
+84
View File
@@ -0,0 +1,84 @@
import RequestService from '../httpRequest'
import {getServiceUrl} from '../api'
export default {
//智能体列表
getAgentList(callback) {
RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/agent`)
.method('GET')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
console.error('获取智能体列表失败:', err);
}).send()
},
//添加智能体
addAgent(name, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/agent`)
.method('POST')
.data({name})
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('添加智能体失败:', err);
RequestService.reAjaxFun(() => {
this.addAgent(name, callback);
});
}).send();
},
//获取智能体配置
getAgentConfig(agent_id, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
.method('GET')
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('获取智能体配置失败:', err);
RequestService.reAjaxFun(() => {
this.getAgentConfig(agent_id, callback);
});
}).send();
},
//配置智能体
saveAgentConfig(agent_id, configData, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
.method('PUT')
.data(configData)
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('保存智能体配置失败:', err);
RequestService.reAjaxFun(() => {
this.saveAgentConfig(device_id, configData, callback);
});
}).send();
},
//删除智能体
delAgent(agent_id, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
.method('DELETE')
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('删除智能体失败:', err);
RequestService.reAjaxFun(() => {
this.deleteAgent(agent_id, callback);
});
}).send();
},
}
+51
View File
@@ -0,0 +1,51 @@
import RequestService from '../httpRequest'
import {getServiceUrl} from '../api'
export default {
//设备列表
getDeviceList(agent_id, callback) {
RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/agent/device/bind/${agent_id}`)
.method('GET')
.success((res) => {
RequestService.clearRequestTime()
callback(res)
})
.fail((err) => {
console.error('获取设备列表失败:', err);
}).send()
},
//绑定设备
bindDevice(agent_id, code, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/agent/device/bind/${agent_id}`)
.method('POST')
.data({code})
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('绑定设备失败:', err);
RequestService.reAjaxFun(() => {
this.addDevice(name, callback);
});
}).send();
},
// 解绑设备
unbindDevice(device_id, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/device/unbind/${device_id}`)
.method('PUT')
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail(() => {
RequestService.reAjaxFun(() => {
this.unbindDevice(device_id, callback);
});
}).send()
},
}
-16
View File
@@ -47,22 +47,6 @@ export default {
});
}).send()
},
// 绑定设备
bindDevice(deviceCode, callback) {
RequestService.sendRequest()
.url(`${getServiceUrl()}/api/v1/user/device/bind/${deviceCode}`)
.method('POST')
.success((res) => {
RequestService.clearRequestTime();
callback(res);
})
.fail((err) => {
console.error('绑定设备失败:', err);
RequestService.reAjaxFun(() => {
this.bindDevice(deviceCode, callback);
});
}).send();
},
// 获取验证码
getCaptcha(uuid, callback) {
@@ -0,0 +1,75 @@
<template>
<el-dialog :visible.sync="visible" width="480px" center>
<div style="margin: 0 20px 20px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div style="width: 36px;height: 36px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
<img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
</div>
添加智能体
</div>
<div style="height: 1px;background: #e8f0ff;" />
<div style="margin: 30px 20px;">
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
<div style="color: red;display: inline-block;">*</div>智能体名称
</div>
<div class="input-46" style="margin-top: 10px;">
<el-input placeholder="请输入智能体名称.." v-model="agentName" />
</div>
</div>
<div style="display: flex;margin: 0 20px;gap: 10px;">
<div class="dialog-btn" @click="confirm">
确定
</div>
<div class="dialog-btn"
style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
@click="cancel">
取消
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'AddAgentDialog',
props: {
visible: { type: Boolean, required: true }
},
data() {
return { agentName: "" }
},
methods: {
confirm() {
this.$emit('update:visible', false)
this.$emit('added', this.agentName)
this.agentName = ""
},
cancel() {
this.$emit('update:visible', false)
this.agentName = ""
}
}
}
</script>
<style scoped>
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 10px;
}
.dialog-btn {
cursor: pointer;
flex: 1;
border-radius: 23px;
background: #5778ff;
height: 46px;
font-weight: 500;
font-size: 14px;
color: #fff;
line-height: 46px;
text-align: center;
}
</style>
@@ -0,0 +1,77 @@
<template>
<div class="agent-item">
<div style="display: flex;justify-content: space-between;">
<div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
{{ agent.agentName }}
</div>
<div>
<img src="@/assets/home/delete.png" alt=""
style="width: 18px;height: 18px;" @click="$emit('del', agent.id)" />
<!-- <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" /> -->
</div>
</div>
<div class="agent-name">
角色音色{{ agent.ttsModelName }}
</div>
<div class="agent-name">
语言模型{{ agent.llmModelName }}
</div>
<div class="agent-name">
最近对话{{ agent.lastConnectedAt }}
</div>
<div style="display: flex;justify-content: space-between;align-items: center;gap: 10px;">
<div class="settings-btn" @click="$emit('configure', agent.id, agent.agentName)">
配置角色
</div>
<div class="settings-btn" @click="$emit('asr', agent.id)">
声纹识别
</div>
<div class="settings-btn" @click="$emit('chat', agent.id)">
历史对话
</div>
<div class="settings-btn" @click="$emit('device', agent.id)">
设备数量({{agent.deviceCount}})
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AgentItem',
props: {
agent: { type: Object, required: true }
},
data() {
return { }
}
}
</script>
<style scoped>
.agent-item {
width: 342px;
border-radius: 20px;
background: #fafcfe;
padding: 22px 22px 11px 22px;
box-sizing: border-box;
}
.agent-name {
margin: 7px 0 10px;
font-weight: 400;
font-size: 11px;
color: #3d4566;
text-align: left;
}
.settings-btn {
font-weight: 500;
font-size: 10px;
color: #5778ff;
background: #e6ebff;
padding: 2px 10px;
line-height: 21px;
cursor: pointer;
border-radius: 14px;
}
</style>
@@ -0,0 +1,30 @@
<template>
<div v-if="visible" class="message">
{{message}}
</div>
</template>
<script>
export default {
name: 'Footer',
props: {
visible: { type: Boolean, required: true },
message: { type: String, required: false, default: '©2025 xiaozhi-esp32-server' }
},
data() {
return { }
},
methods: {
}
}
</script>
<style scoped>
.message {
font-size: 14px;
font-weight: 400;
margin-top: auto;
padding-top: 30px;
color: #979db1;
}
</style>
+53 -61
View File
@@ -1,32 +1,40 @@
<template>
<el-header class="header">
<div style="display: flex;justify-content: space-between;margin-top: 6px; ">
<div style="display: flex;justify-content: space-between;margin-top: 6px;">
<div style="display: flex;align-items: center;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
<div class="equipment-management" @click="goHome">
<img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
智能体管理
<img alt="" src="@/assets/xiaozhi-logo.png" style="width: 42px;height: 42px;"/>
<img alt="" src="@/assets/xiaozhi-ai.png" style="width: 58px;height: 12px;"/>
<div class="ml-20 menu-btn active" @click="goHome">
<img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
智能体
</div>
<div class="console">
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
<div class="menu-btn">
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
控制台
</div>
<div class="equipment-management2">
<div class="menu-btn">
设备管理
<img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
<img alt="" src="@/assets/home/close.png" style="width: 6px;height: 6px;"/>
</div>
</div>
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
<div class="serach-box">
<el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" @keyup.enter.native="handleSearch" />
<img src="@/assets/home/search.png" alt=""
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch" />
</div>
<img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
<div class="user-info">
{{ userInfo.mobile || '加载中...' }}
<el-input v-model="serach" placeholder="输入名称搜索.." style="border: none; background: transparent;"
@keyup.enter.native="handleSearch"/>
<img alt="" src="@/assets/home/search.png"
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch"/>
</div>
<img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
{{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-user" @click.native="">个人中心</el-dropdown-item>
<el-dropdown-item icon="el-icon-key" @click.native="">修改密码</el-dropdown-item>
<el-dropdown-item icon="el-icon-connection" @click.native="">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
@@ -43,6 +51,7 @@ export default {
return {
serach: '',
userInfo: {
username: '',
mobile: ''
}
}
@@ -53,7 +62,7 @@ export default {
methods: {
goHome() {
// 跳转到首页
this.$router.push('/')
this.$router.push('/home')
},
// 获取用户信息
fetchUserInfo() {
@@ -71,7 +80,7 @@ export default {
// 当搜索内容为空时,显示原始完整列表
filteredDevices = this.$parent.originalDevices;
} else {
// 过滤逻辑
// 过滤逻辑
filteredDevices = this.devices.filter(device => {
return device.agentName.includes(searchValue) ||
device.ttsModelName.includes(searchValue) ||
@@ -88,38 +97,26 @@ export default {
</script>
<style scoped>
.equipment-management,
.equipment-management2 {
.ml-20 {
margin-left: 20px;
}
.menu-btn {
padding: 8px 14px;
border-radius: 8px;
background: #fff;
color: #979db1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
}
.equipment-management {
width: 82px;
height: 24px;
border-radius: 12px;
.menu-btn.active {
background: #5778ff;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-weight: 500;
color: #fff;
font-size: 10px;
}
.equipment-management2 {
width: 87px;
height: 22px;
border-radius: 11px;
background: #fff;
display: flex;
justify-content: center;
font-size: 9px;
font-weight: 400;
gap: 7px;
color: #3d4566;
margin-left: 2px;
align-items: center;
}
.header {
@@ -150,7 +147,6 @@ export default {
padding-left: 12px;
}
.user-info {
font-weight: 600;
font-size: 12px;
@@ -158,18 +154,14 @@ export default {
text-align: left;
color: #3d4566;
}
.console {
width: 90px;
height: 22px;
border-radius: 11px;
background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: #979db1;
font-weight: 400;
gap: 7px;
margin-left: 15px;
.el-dropdown-link {
cursor: pointer;
color: #5778ff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
+7
View File
@@ -11,6 +11,13 @@ const routes = [
return import('../views/login.vue')
}
},
{
path: '/device',
name: 'RoleConfig',
component: function () {
return import('../views/device.vue')
}
},
{
path: '/role-config',
name: 'RoleConfig',
+251
View File
@@ -0,0 +1,251 @@
<template>
<div class="welcome">
<!-- 公共头部 -->
<HeaderBar :devices="devices" @search-result="handleSearchResult" />
<el-main style="padding: 20px;display: flex;flex-direction: column;">
<div>
<!-- 首页内容 -->
<div class="add-device">
<div class="add-device-bg">
<div class="hellow-text" style="margin-top: 30px;">
您好小智
</div>
<div class="hellow-text">
让我们度过
<div style="display: inline-block;color: #5778FF;">
美好的一天
</div>
</div>
<div class="hi-hint">
Hello, Let's have a wonderful day!
</div>
<div class="add-device-btn" @click="showAddDialog">
<div class="left-add">
添加设备
</div>
<div style="width: 23px;height: 13px;background: #5778ff;margin-left: -10px;" />
<div class="right-add">
<i class="el-icon-right" style="font-size: 20px;color: #fff;" />
</div>
</div>
</div>
</div>
<!-- 面包屑-->
<div class="breadcrumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>控制台</el-breadcrumb-item>
<el-breadcrumb-item><router-link to="/home">智能体</router-link></el-breadcrumb-item>
<el-breadcrumb-item>设备管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 设备列表-->
<el-card class="box-card" shadow="hover" style="margin-top: 20px;">
<div slot="header" class="clearfix" style="text-align: left;">
<span>设备列表</span>
</div>
<div style="display: flex;flex-direction: column;align-items: end;padding: 0 20px;gap: 10px;">
<el-table :data="devices" style="width: 100%">
<el-table-column prop="device_type" label="设备型号">
</el-table-column>
<el-table-column prop="app_version" label="固件版本" width="180">
</el-table-column>
<el-table-column prop="mac_address" label="MAC地址">
</el-table-column>
<el-table-column prop="bind_time" label="绑定时间">
</el-table-column>
<el-table-column prop="recent_chat_time" label="最近对话">
</el-table-column>
<el-table-column prop="desc" label="备注">
<template slot-scope="scope">
<div v-if="scope.row.isEdit">
<el-input
placeholder="请输入内容"
v-model="scope.row.desc"
@blur="handleEditSave(scope.row)"
clearable>
</el-input>
</div>
<div v-else>
{{ scope.row.desc }}
<i class="el-icon-edit" style="color:#1890ff;cursor: pointer;" @click="handleEdit(scope.row)"></i>
</div>
</template>
</el-table-column>
<el-table-column label="OTA升级" width="100" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.ota_upgrade" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger">解绑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-size="10"
:pager-count="5"
layout="prev, pager, next"
:total="150">
</el-pagination>
</div>
</el-card>
</div>
<!-- 底部 -->
<Footer :visible="true" />
<!-- 添加设备对话框 -->
<AddDeviceDialog :visible.sync="addDeviceDialogVisible" @added="handleDeviceAdded" />
</el-main>
</div>
</template>
<script>
import {getUUID, goToPage, showDanger, showSuccess} from '@/utils'
import Api from '@/apis/api';
import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import Footer from '@/components/Footer.vue'
export default {
name: 'DevicePage',
components: { AddDeviceDialog, HeaderBar, Footer },
data() {
return {
addDeviceDialogVisible: false,
devices: [],
agentId: this.$route.query.agentId
}
},
mounted() {
this.getDeviceList();
},
methods: {
// 获取设备列表
getDeviceList() {
Api.device.getDeviceList(this.agentId, ({data}) => {
if (data.code === 0) {
this.devices = data.data[0].list.map((item)=>{item.isEdit=false;return item;})
} else {
showDanger(data.msg)
}
})
},
showAddDialog() {
this.addDeviceDialogVisible = true
},
goToRoleConfig() {
// 点击配置角色后跳转到角色配置页
this.$router.push('/role-config')
},
handleDeviceAdded(deviceCode) {
// 根据需要处理添加设备后逻辑,比如刷新设备列表等
console.log('设备验证码', deviceCode)
},
handleEdit(row) {
row.isEdit=true
},
handleEditSave(row) {
row.isEdit=false
},
}
}
</script>
<style scoped>
.breadcrumbs{
padding: 10px 0 0 5px;
}
.welcome {
min-width: 900px;
min-height: 506px;
height: 100vh;
display: flex;
flex-direction: column;
background-image: url("@/assets/home/background.png");
background-size: cover;
/* 确保背景图像覆盖整个元素 */
background-position: center;
/* 从顶部中心对齐 */
-webkit-background-size: cover;
/* 兼容老版本WebKit浏览器 */
-o-background-size: cover;
/* 兼容老版本Opera浏览器 */
}
.add-device {
height: 195px;
border-radius: 15px;
position: relative;
overflow: hidden;
background: linear-gradient(
269.62deg,
#e0e6fd 0%,
#cce7ff 49.69%,
#d3d3fe 100%
);
}
.add-device-bg {
width: 100%;
height: 100%;
text-align: left;
background-image: url("@/assets/home/main-top-bg.png");
overflow: hidden;
background-size: cover;
/* 确保背景图像覆盖整个元素 */
background-position: center;
/* 从顶部中心对齐 */
-webkit-background-size: cover;
/* 兼容老版本WebKit浏览器 */
-o-background-size: cover;
box-sizing: border-box;
/* 兼容老版本Opera浏览器 */
.hellow-text {
margin-left: 75px;
color: #3d4566;
font-size: 33px;
font-weight: 700;
letter-spacing: 0;
}
.hi-hint {
font-weight: 400;
font-size: 10px;
text-align: left;
color: #818cae;
margin-left: 75px;
margin-top: 5px;
}
}
.add-device-btn {
display: flex;
align-items: center;
margin-left: 75px;
margin-top: 15px;
cursor: pointer;
.left-add {
width: 105px;
height: 34px;
border-radius: 17px;
background: #5778ff;
color: #fff;
font-size: 10px;
font-weight: 500;
text-align: center;
line-height: 34px;
}
.right-add {
width: 34px;
height: 34px;
border-radius: 50%;
background: #5778ff;
margin-left: -6px;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
+74 -41
View File
@@ -5,8 +5,8 @@
<el-main style="padding: 20px;display: flex;flex-direction: column;">
<div>
<!-- 首页内容 -->
<div class="add-device">
<div class="add-device-bg">
<div class="add-agent">
<div class="add-agent-bg">
<div class="hellow-text" style="margin-top: 30px;">
您好小智
</div>
@@ -19,7 +19,7 @@
<div class="hi-hint">
Hello, Let's have a wonderful day!
</div>
<div class="add-device-btn" @click="showAddDialog">
<div class="add-agent-btn" @click="showAddDialog">
<div class="left-add">
添加智能体
</div>
@@ -30,74 +30,107 @@
</div>
</div>
</div>
<!-- 面包屑-->
<div class="breadcrumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>控制台</el-breadcrumb-item>
<el-breadcrumb-item>智能体</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 智能体列表-->
<div style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: flex-start;box-sizing: border-box;">
<DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" @deviceManage="handleDeviceManage" />
<AgentItem v-for="(item,index) in agents" :key="index" :agent="item" @configure="goToRoleConfig" @device="goToDevice" @del="handleAgentDel" />
</div>
</div>
<div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
<AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />
<!-- 底部 -->
<Footer :visible="true" />
<!-- 添加设备对话框 -->
<AddAgentDialog :visible.sync="addAgentDialogVisible" @added="handleAgentAdded" />
</el-main>
</div>
</template>
<script>
import DeviceItem from '@/components/DeviceItem.vue'
import AddWisdomBodyDialog from '@/components/AddWisdomBodyDialog.vue'
import {getUUID, goToPage, showDanger, showSuccess} from '@/utils'
import Api from '@/apis/api';
import AgentItem from '@/components/AgentItem.vue'
import AddAgentDialog from '@/components/AddAgentDialog.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import Footer from '@/components/Footer.vue'
export default {
name: 'HomePage',
components: { DeviceItem, AddWisdomBodyDialog, HeaderBar },
components: { AgentItem, AddAgentDialog, HeaderBar, Footer },
data() {
return {
addDeviceDialogVisible: false,
devices: [],
originalDevices: [],
addAgentDialogVisible: false,
agents: [],
}
},
mounted() {
// 获取智能体列表
this.fetchAgentList();
},
methods: {
showAddDialog() {
this.addDeviceDialogVisible = true
},
goToRoleConfig() {
// 点击配置角色后跳转到角色配置页
this.$router.push('/role-config')
},
handleWisdomBodyAdded(res) {
console.log('新增智能体响应', res);
this.fetchAgentList();
this.addDeviceDialogVisible = false;
},
handleDeviceManage() {
this.$router.push('/device-management');
},
// 获取智能体列表
fetchAgentList() {
import('@/apis/module/user').then(({ default: userApi }) => {
userApi.getAgentList(({data}) => {
this.originalDevices = data.data;
this.devices = data.data;
});
});
// 获取智能体列表
Api.agent.getAgentList(({data}) => {
if (data.code === 0) {
this.agents = data.data
} else {
showDanger(data.msg)
}
})
},
showAddDialog() {
this.addAgentDialogVisible = true
},
goToRoleConfig(agentId, agentName) {
// 点击配置角色后跳转到角色配置页
this.$router.push({path:'/role-config', query: {agentId: agentId, agentName: agentName}})
},
goToDevice(agentId) {
// 点击设备后跳转到设备页
this.$router.push({path:'/device', query: {agentId: agentId}})
},
handleAgentAdded(agentName) {
// 添加智能体
Api.agent.addAgent(agentName, ({data}) => {
if (data.status === 200) {
showSuccess('添加成功')
this.getAgentList()
} else {
showDanger(data.msg)
}
})
},
handleAgentDel(agetnId){
// 删除智能体
Api.agent.delAgent(agetnId, (data) => {
if (data.status === 200) {
showSuccess('删除成功')
this.getAgentList()
} else {
showDanger(data.msg)
}
})
},
// 搜索更新智能体列表
handleSearchResult(filteredList) {
this.devices = filteredList; // 更新设备列表
}
}
}
</script>
<style scoped>
.breadcrumbs{
padding: 10px 0 0 5px;
}
.welcome {
min-width: 900px;
min-height: 506px;
@@ -114,7 +147,7 @@ export default {
-o-background-size: cover;
/* 兼容老版本Opera浏览器 */
}
.add-device {
.add-agent {
height: 195px;
border-radius: 15px;
position: relative;
@@ -126,7 +159,7 @@ export default {
#d3d3fe 100%
);
}
.add-device-bg {
.add-agent-bg {
width: 100%;
height: 100%;
text-align: left;
@@ -159,7 +192,7 @@ export default {
}
}
.add-device-btn {
.add-agent-btn {
display: flex;
align-items: center;
margin-left: 75px;
+49 -80
View File
@@ -2,34 +2,40 @@
<div class="welcome">
<!-- 公共头部 -->
<HeaderBar/>
<el-main style="padding: 16px;display: flex;flex-direction: column;">
<div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
<!-- 面包屑-->
<div class="breadcrumbs" style="padding: 20px;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>控制台</el-breadcrumb-item>
<el-breadcrumb-item><router-link to="/home">智能体</router-link></el-breadcrumb-item>
<el-breadcrumb-item>配置智能体</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-main style="padding: 16px;display: flex;flex-direction: column;align-items: center;">
<div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;max-width: 800px;">
<div
style="padding: 15px 24px;font-weight: 700;font-size: 19px;text-align: left;color: #3d4566;display: flex;gap: 13px;align-items: center;">
<div
style="width: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
<img src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;"/>
</div>
{{ deviceMac }}
{{ agentName }} ({{ agentId }})
</div>
<div style="height: 1px;background: #e8f0ff;"/>
<el-form ref="form" :model="form" label-width="72px">
<div style="padding: 16px 24px;max-width: 792px;">
<el-form-item label="助手昵称:">
<div class="input-46" style="width: 100%; max-width: 412px;">
<el-input v-model="form.name"/>
</div>
</el-form-item>
<div style="padding: 16px 24px;max-width: 792px;">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="角色模版:">
<div style="display: flex;gap: 8px;">
<div style="display: flex;gap: 8px;flex-wrap: wrap;">
<div v-for="template in templates" :key="template" class="template-item" @click="selectTemplate(template)">
{{ template }}
</div>
</div>
</el-form-item>
<el-form-item label="助手昵称:">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="角色音色:">
<div style="display: flex;gap: 8px;align-items: center;">
<div class="input-46" style="flex:1.4;">
<div style="flex:1;">
<el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
@@ -43,29 +49,23 @@
</div>
</el-form-item>
<el-form-item label="角色介绍:">
<div class="textarea-box">
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
v-model="form.introduction" maxlength="2000" show-word-limit/>
</div>
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.introduction" maxlength="2000" show-word-limit/>
</el-form-item>
<el-form-item label="记忆体:">
<div class="textarea-box">
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
v-model="form.prompt" maxlength="1000"/>
<div class="prompt-bottom">
<div style="display: flex;gap: 8px;align-items: center;">
<div style="color: #979db1;font-size: 11px;">当前记忆每次对话后重新生成</div>
<div class="clear-btn">
<i class="el-icon-delete-solid" style="font-size: 11px;"/>
清除
</div>
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.prompt" maxlength="1000" show-word-limit/>
<div style="display: flex;gap: 8px;align-items: center;">
<div style="color: #979db1;font-size: 11px;">当前记忆每次对话后重新生成</div>
<div class="clear-btn">
<i class="el-icon-delete-solid" style="font-size: 11px;"/>
清除
</div>
<div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
</div>
</div>
</el-form-item>
<el-form-item v-for="model in models" :key="model.label" :label="model.label" class="model-item">
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
<el-form-item v-for="model in models" :key="model.label" :label="model.label">
<template slot="label">
<div style="line-height: 20px;">{{model.label}}</div>
</template>
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" style="width: 100%;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
@@ -74,8 +74,8 @@
实时其他模型通常会增加约1秒的延迟改变模型后建议清空记忆体以免影响体验
</div>
</el-form-item>
</div>
</el-form>
</div>
<div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
<div class="save-btn" @click="saveConfig">
保存配置
@@ -89,22 +89,22 @@
</div>
</div>
</div>
<div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 24px;color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
</el-main>
<Footer :visible="true" />
</div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import Footer from "@/components/Footer.vue";
export default {
name: 'RoleConfigPage',
components: {HeaderBar},
components: {HeaderBar,Footer},
data() {
return {
deviceMac: 'CC:ba:97:11:a6:ac',
agentId: this.$route.query.agentId,
agentName: this.$route.query.agentName,
form: {
name: "",
timbre: "",
@@ -136,6 +136,11 @@ export default {
}
},
methods: {
handleGetConfig(){
api.agent.getAgentConfig(this.agentId, ({data}) => {
this.form = data
})
},
saveConfig() {
// 此处写保存配置逻辑
this.$message.success('配置已保存')
@@ -168,6 +173,10 @@ export default {
</script>
<style scoped>
.breadcrumbs{
padding: 20px 0 0 5px;
}
.welcome {
min-width: 900px;
min-height: 506px;
@@ -185,23 +194,6 @@ export default {
/* 兼容老版本Opera浏览器 */
}
.el-form-item ::v-deep .el-form-item__label {
font-size: 10px !important;
color: #3d4566 !important;
font-weight: 400;
line-height: 22px;
padding-bottom: 2px;
}
.select-field{
width: 100%;
max-width: 720px;
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 8px;
height: 36px !important;
}
.audio-box {
flex: 1;
height: 37px;
@@ -230,13 +222,11 @@ export default {
}
.template-item {
height: 37px;
width: 76px;
border-radius: 8px;
padding: 0 20px;
border-radius: 6px;
background: #e6ebff;
line-height: 37px;
font-weight: 400;
font-size: 11px;
font-weight: 500;
font-size: 14px;
text-align: center;
color: #5778ff;
cursor: pointer;
@@ -247,21 +237,6 @@ export default {
background-color: #d0d8ff;
}
.prompt-bottom {
margin-bottom: 4px;
display: flex;
justify-content: space-between;
padding: 0 16px;
align-items: center;
}
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 8px;
height: 36px !important;
}
.save-btn,
.reset-btn {
width: 112px;
@@ -284,11 +259,5 @@ export default {
background: #e6ebff;
color: #5778ff;
}
.textarea-box {
border: 1px solid #e4e6ef;
border-radius: 8px;
background: #f6f8fb;
}
</style>