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

优化“导航栏”响应调整

Browse Source
This commit is contained in:
Ran_Chen
2025-03-28 11:08:12 +08:00
parent c66385d1f7
commit 69b5ffe3bf
4 changed files with 162 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/HeaderBar.vue
+162 -45
View File
@@ -1,29 +1,42 @@
<template>
<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 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="header-container">
<!-- 左侧元素 -->
<div class="header-left">
<img alt="" src="@/assets/xiaozhi-logo.png" class="logo-img"/>
<img alt="" src="@/assets/xiaozhi-ai.png" class="brand-img"/>
</div>
<!-- 中间导航菜单 -->
<div class="header-center">
<div class="equipment-management" :class="{ 'active-tab': $route.path === '/home' }" @click="goHome">
<img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
<img alt="" src="@/assets/header/roboot.png" :style="{ filter: $route.path === '/home' ? 'brightness(0) invert(1)' : 'None' }"/>
智能体管理
</div>
<div class="equipment-management" :class="{ 'active-tab': $route.path === '/user-management' }" @click="goUserManagement">
<img alt="" src="@/assets/header/user_management.png" :style="{ filter: $route.path === '/user-management' ? 'brightness(0) invert(1)' : 'None' }"/>
用户管理
</div>
<div class="equipment-management" :class="{ 'active-tab': $route.path === '/model-config' }" @click="goModelConfig">
<img alt="" src="@/assets/header/model_config.png" :style="{ filter: $route.path === '/model-config' ? 'brightness(0) invert(1)' : 'None' }"/>
模型配置
</div>
</div>
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
<div class="serach-box">
<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 class="header-right">
<div class="search-container">
<el-input
v-model="serach"
placeholder="输入名称搜索.."
class="custom-search-input"
@keyup.enter.native="handleSearch"
>
<i slot="suffix" class="el-icon-search search-icon" @click="handleSearch"></i>
</el-input>
</div>
<img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
<el-dropdown trigger="click">
<img alt="" src="@/assets/home/avatar.png" class="avatar-img"/>
<el-dropdown trigger="click" class="user-dropdown">
<span class="el-dropdown-link">
{{ userInfo.mobile || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
@@ -37,7 +50,7 @@
</div>
<!-- 修改密码弹窗 -->
<ChangePasswordDialog :visible.sync="isChangePasswordDialogVisible" />
<ChangePasswordDialog :visible.sync="isChangePasswordDialogVisible"/>
</el-header>
</template>
@@ -111,11 +124,61 @@ export default {
</script>
<style scoped>
.header {
background: #f6fcfe66;
border: 1px solid #fff;
height: 53px !important;
min-width: 900px; /* 设置最小宽度防止过度压缩 */
overflow: hidden;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 10px;
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 120px;
}
.logo-img {
width: 42px;
height: 42px;
}
.brand-img {
width: 58px;
height: 12px;
}
.header-center {
display: flex;
align-items: center;
gap: 25px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.header-right {
display: flex;
align-items: center;
gap: 7px;
min-width: 300px;
justify-content: flex-end;
}
.equipment-management {
width: 82px;
height: 24px;
border-radius: 12px;
background: #fff;
background: #deeafe;
display: flex;
justify-content: center;
font-size: 10px;
@@ -126,7 +189,7 @@ export default {
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
flex-shrink: 0; /* 防止导航按钮被压缩 */
}
.equipment-management.active-tab {
@@ -134,41 +197,95 @@ export default {
color: #fff !important;
}
.header {
background: #f6fcfe66;
border: 1px solid #fff;
height: 53px !important;
.equipment-management img {
width: 15px;
height: 13px;
}
.serach-box {
display: flex;
width: 220px;
.search-container {
margin-right: 15px;
min-width: 150px;
flex-grow: 1;
max-width: 220px;
}
.custom-search-input >>> .el-input__inner {
height: 30px;
border-radius: 15px;
background-color: #f6fcfe66;
background-color: #e2e5f8;
border: 1px solid #e4e6ef;
align-items: center;
padding: 0 7px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 15px;
}
.serach-box /deep/ .el-input__inner {
border-radius: 15px;
height: 100%;
width: 100%;
border: 0;
background: transparent;
padding-left: 12px;
}
.user-info {
font-weight: 600;
padding-left: 15px;
font-size: 12px;
letter-spacing: -0.02px;
text-align: left;
color: #3d4566;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.search-icon {
cursor: pointer;
color: #909399;
margin-right: 8px;
font-size: 14px;
line-height: 30px;
}
.avatar-img {
width: 21px;
height: 21px;
flex-shrink: 0;
}
.user-dropdown {
flex-shrink: 0;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.header-center {
gap: 14px;
}
.equipment-management {
width: 70px;
font-size: 9px;
}
}
@media (max-width: 1024px) {
.search-container {
margin-right: 10px;
max-width: 150px;
}
.header-right {
gap: 5px;
}
}
@media (max-width: 900px) {
.header-left {
margin-right: auto;
}
.search-container {
max-width: 150px;
}
}
@media (max-width: 768px) {
.search-container {
max-width: 145px;
}
.custom-search-input >>> .el-input__inner {
padding-left: 10px;
font-size: 11px;
}
}
@media (max-width: 600px) {
.search-container {
max-width: 120px;
min-width: 100px;
}
}
</style>