mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 15:13:55 +08:00
130 lines
3.3 KiB
Vue
130 lines
3.3 KiB
Vue
<template>
|
||
<div class="device-item">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
|
||
{{ device.agentName }}
|
||
</div>
|
||
<div>
|
||
<img src="@/assets/home/delete.png" alt="" style="width: 18px;height: 18px;margin-right: 10px;"
|
||
@click.stop="handleDelete" />
|
||
<el-tooltip class="item" effect="dark" :content="device.systemPrompt" placement="top"
|
||
popper-class="custom-tooltip">
|
||
<img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="device-name">
|
||
设备型号：{{ device.ttsModelName }}
|
||
</div>
|
||
<div class="device-name">
|
||
音色模型：{{ device.ttsVoiceName }}
|
||
</div>
|
||
<div style="display: flex;gap: 10px;align-items: center;">
|
||
<div class="settings-btn" @click="handleConfigure">
|
||
配置角色
|
||
</div>
|
||
<div class="settings-btn" @click="handleDeviceManage">
|
||
设备管理({{ device.deviceCount }})
|
||
</div>
|
||
<div class="settings-btn" @click="handleChatHistory">
|
||
聊天记录
|
||
</div>
|
||
</div>
|
||
<div class="version-info">
|
||
<div>最近对话：{{ formattedLastConnectedTime }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DeviceItem',
|
||
props: {
|
||
device: { type: Object, required: true }
|
||
},
|
||
data() {
|
||
return { switchValue: false }
|
||
},
|
||
computed: {
|
||
formattedLastConnectedTime() {
|
||
if (!this.device.lastConnectedAt) return '暂未对话';
|
||
|
||
const lastTime = new Date(this.device.lastConnectedAt);
|
||
const now = new Date();
|
||
const diffMinutes = Math.floor((now - lastTime) / (1000 * 60));
|
||
|
||
if (diffMinutes <= 1) {
|
||
return '刚刚';
|
||
} else if (diffMinutes < 60) {
|
||
return `${diffMinutes}分钟前`;
|
||
} else if (diffMinutes < 24 * 60) {
|
||
const hours = Math.floor(diffMinutes / 60);
|
||
const minutes = diffMinutes % 60;
|
||
return `${hours}小时${minutes > 0 ? minutes + '分钟' : ''}前`;
|
||
} else {
|
||
return this.device.lastConnectedAt;
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
handleDelete() {
|
||
this.$emit('delete', this.device.agentId)
|
||
},
|
||
handleConfigure() {
|
||
this.$router.push({ path: '/role-config', query: { agentId: this.device.agentId } });
|
||
},
|
||
handleDeviceManage() {
|
||
this.$router.push({ path: '/device-management', query: { agentId: this.device.agentId } });
|
||
},
|
||
handleChatHistory() {
|
||
this.$emit('chat-history', { agentId: this.device.agentId, agentName: this.device.agentName })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.device-item {
|
||
width: 342px;
|
||
border-radius: 20px;
|
||
background: #fafcfe;
|
||
padding: 22px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.device-name {
|
||
margin: 7px 0 10px;
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #3d4566;
|
||
text-align: left;
|
||
}
|
||
|
||
.settings-btn {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #5778ff;
|
||
background: #e6ebff;
|
||
width: auto;
|
||
padding: 0 12px;
|
||
height: 21px;
|
||
line-height: 21px;
|
||
cursor: pointer;
|
||
border-radius: 14px;
|
||
}
|
||
|
||
.version-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 15px;
|
||
font-size: 12px;
|
||
color: #979db1;
|
||
font-weight: 400;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.custom-tooltip {
|
||
max-width: 400px;
|
||
word-break: break-word;
|
||
}
|
||
</style> |