mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-27 17:43:55 +08:00
右上角用户名显示,新增下拉菜单样式
接收username字段并显示在右上角。 右上角添加了下拉菜单样式,包含个人中心,修改密码以及退出登录。
This commit is contained in:
@@ -2,31 +2,39 @@
|
|||||||
<el-header class="header">
|
<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;">
|
<div style="display: flex;align-items: center;gap: 10px;">
|
||||||
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
|
<img alt="" src="@/assets/xiaozhi-logo.png" style="width: 42px;height: 42px;"/>
|
||||||
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
|
<img alt="" src="@/assets/xiaozhi-ai.png" style="width: 58px;height: 12px;"/>
|
||||||
<div class="equipment-management" @click="goHome">
|
<div class="equipment-management" @click="goHome">
|
||||||
<img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
|
<img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
|
||||||
智能体管理
|
智能体管理
|
||||||
</div>
|
</div>
|
||||||
<div class="console">
|
<div class="console">
|
||||||
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
|
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
|
||||||
控制台
|
控制台
|
||||||
</div>
|
</div>
|
||||||
<div class="equipment-management2">
|
<div class="equipment-management2">
|
||||||
设备管理
|
设备管理
|
||||||
<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>
|
</div>
|
||||||
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
|
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
|
||||||
<div class="serach-box">
|
<div class="serach-box">
|
||||||
<el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" @keyup.enter.native="handleSearch" />
|
<el-input v-model="serach" placeholder="输入名称搜索.." style="border: none; background: transparent;"
|
||||||
<img src="@/assets/home/search.png" alt=""
|
@keyup.enter.native="handleSearch"/>
|
||||||
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch" />
|
<img alt="" src="@/assets/home/search.png"
|
||||||
</div>
|
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch"/>
|
||||||
<img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
|
|
||||||
<div class="user-info">
|
|
||||||
{{ userInfo.mobile || '加载中...' }}
|
|
||||||
</div>
|
</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-plus" @click.native="">个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item icon="el-icon-circle-plus" @click.native="">修改密码</el-dropdown-item>
|
||||||
|
<el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
@@ -43,6 +51,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
serach: '',
|
serach: '',
|
||||||
userInfo: {
|
userInfo: {
|
||||||
|
username: '',
|
||||||
mobile: ''
|
mobile: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -71,7 +80,7 @@ export default {
|
|||||||
// 当搜索内容为空时,显示原始完整列表
|
// 当搜索内容为空时,显示原始完整列表
|
||||||
filteredDevices = this.$parent.originalDevices;
|
filteredDevices = this.$parent.originalDevices;
|
||||||
} else {
|
} else {
|
||||||
// 过滤逻辑
|
// 过滤逻辑
|
||||||
filteredDevices = this.devices.filter(device => {
|
filteredDevices = this.devices.filter(device => {
|
||||||
return device.agentName.includes(searchValue) ||
|
return device.agentName.includes(searchValue) ||
|
||||||
device.ttsModelName.includes(searchValue) ||
|
device.ttsModelName.includes(searchValue) ||
|
||||||
@@ -158,6 +167,7 @@ export default {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
color: #3d4566;
|
color: #3d4566;
|
||||||
}
|
}
|
||||||
|
|
||||||
.console {
|
.console {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
@@ -172,4 +182,14 @@ export default {
|
|||||||
gap: 7px;
|
gap: 7px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-dropdown-link {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #5778ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-arrow-down {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user