增加供应器管理页面，优化页面样式和数据校验

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

@@ -35,12 +35,12 @@
           OTA管理
         </div>
         <el-dropdown v-if="isSuperAdmin" trigger="click" class="equipment-management more-dropdown"
-          :class="{ 'active-tab': $route.path === '/dict-management' || $route.path === '/params-management' }">
+          :class="{ 'active-tab': $route.path === '/dict-management' || $route.path === '/params-management' || $route.path === '/provider-management' }" @visible-change="handleParamDropdownVisibleChange">
           <span class="el-dropdown-link">
             <img loading="lazy" alt="" src="@/assets/header/param_management.png"
-              :style="{ filter: $route.path === '/dict-management' || $route.path === '/params-management' ? 'brightness(0) invert(1)' : 'None' }" />
+              :style="{ filter: $route.path === '/dict-management' || $route.path === '/params-management' || $route.path === '/provider-management' ? 'brightness(0) invert(1)' : 'None' }" />
             参数字典
-            <i class="el-icon-arrow-down el-icon--right"></i>
+            <i class="el-icon-arrow-down el-icon--right" :class="{ 'rotate-down': paramDropdownVisible }"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item @click.native="goParamManagement">
@@ -49,6 +49,9 @@
             <el-dropdown-item @click.native="goDictManagement">
               字典管理
             </el-dropdown-item>
+            <el-dropdown-item @click.native="goProviderManagement">
+              供应器管理
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -62,9 +65,10 @@
           </el-input>
         </div>
         <img loading="lazy" alt="" src="@/assets/home/avatar.png" class="avatar-img" />
-        <el-dropdown trigger="click" class="user-dropdown">
+        <el-dropdown trigger="click" class="user-dropdown" @visible-change="handleUserDropdownVisibleChange">
           <span class="el-dropdown-link">
-            {{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
+            {{ userInfo.username || '加载中...' }}
+            <i class="el-icon-arrow-down el-icon--right" :class="{ 'rotate-down': userDropdownVisible }"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item @click.native="showChangePasswordDialog">修改密码</el-dropdown-item>
@@ -84,7 +88,6 @@ import userApi from '@/apis/module/user';
 import { mapActions, mapGetters } from 'vuex';
 import ChangePasswordDialog from './ChangePasswordDialog.vue'; // 引入修改密码弹窗组件
 
-
 export default {
   name: 'HeaderBar',
   components: {
@@ -98,7 +101,9 @@ export default {
         username: '',
         mobile: ''
       },
-      isChangePasswordDialogVisible: false // 控制修改密码弹窗的显示
+      isChangePasswordDialogVisible: false, // 控制修改密码弹窗的显示
+      userDropdownVisible: false,
+      paramDropdownVisible: false
     }
   },
   computed: {
@@ -130,6 +135,9 @@ export default {
     goDictManagement() {
       this.$router.push('/dict-management')
     },
+    goProviderManagement() {
+      this.$router.push('/provider-management')
+    },
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({ data }) => {
@@ -184,6 +192,13 @@ export default {
         });
       }
     },
+    handleUserDropdownVisibleChange(visible) {
+      this.userDropdownVisible = visible;
+    },
+    // 监听第二个下拉菜单的可见状态变化
+    handleParamDropdownVisibleChange(visible) {
+      this.paramDropdownVisible = visible;
+    },
 
     // 使用 mapActions 引入 Vuex 的 logout action
     ...mapActions(['logout'])
@@ -191,7 +206,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .header {
   background: #f6fcfe66;
   border: 1px solid #fff;
@@ -243,8 +258,6 @@ export default {
 }
 
 .equipment-management {
-  padding: 0 9px;
-  width: px;
   height: 30px;
   border-radius: 15px;
   background: #deeafe;
@@ -260,7 +273,8 @@ export default {
   cursor: pointer;
   flex-shrink: 0;
   /* 防止导航按钮被压缩 */
-  padding: 0px 15px;
+  padding: 0 15px;
+  position: relative;
 }
 
 .equipment-management.active-tab {
@@ -309,6 +323,25 @@ export default {
   flex-shrink: 0;
 }
 
+.more-dropdown {
+  padding-right: 20px;
+}
+
+.more-dropdown .el-dropdown-link {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.rotate-down {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+.el-icon-arrow-down {
+  transition: transform 0.3s ease;
+}
+
 /* 响应式调整 */
 @media (max-width: 1200px) {
   .header-center {
@@ -316,7 +349,7 @@ export default {
   }
 
   .equipment-management {
-    width: 70px;
+    width: 79px;
     font-size: 9px;
   }
 }