优化“导航栏”响应调整

main/manager-web/src/components/HeaderBar.vue

@@ -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>