mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 23:23:55 +08:00
合并样式及功能
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
Executable
+84
@@ -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();
|
||||
},
|
||||
}
|
||||
Executable
+51
@@ -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()
|
||||
},
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user