Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 07:03:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

右上角用户名显示，新增下拉菜单样式

Browse Source 
接收username字段并显示在右上角。
右上角添加了下拉菜单样式，包含个人中心，修改密码以及退出登录。
This commit is contained in:
bobo
2025-03-20 16:57:38 +08:00
parent 2041513676
commit 1ad93ce1fd
1 changed files with 34 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/HeaderBar.vue
+34 -14
View File
@@ -2,31 +2,39 @@
<el-header class="header">
<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;" />
<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="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 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 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 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-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>
</el-header>
@@ -43,6 +51,7 @@ export default {
return {
serach: '',
userInfo: {
username: '',
mobile: ''
}
}
@@ -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) ||
@@ -158,6 +167,7 @@ export default {
text-align: left;
color: #3d4566;
}
.console {
width: 90px;
height: 22px;
@@ -172,4 +182,14 @@ export default {
gap: 7px;
margin-left: 15px;
}
</style>
.el-dropdown-link {
cursor: pointer;
color: #5778ff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>