修改

src/layout/components/Navbar.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
-      @toggle-click="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
-    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
-
-    <div class="right-menu flex align-center">
-      <div class="d-flex a-c">
-        <div class="mr10"><el-avatar :size="36"
-            src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/cpy_avatar.png" /></div>
-        <div class="d-flex a-c">
-          <span class="f-s-14 c-333 f-w-5">{{ userStore.nickname }}</span>
-          <span class="f-s-12 c-999">（{{ userStore.rolesName }}）</span>
+    <div class="navbar">
+        <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
+        <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+        <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+
+        <div class="right-menu flex align-center">
+            <div class="d-flex a-c">
+                <div class="mr10"><el-avatar :size="36" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-lm/common/cpy_avatar.png" /></div>
+                <div class="d-flex a-c">
+                    <span class="f-s-14 c-333 f-w-5">{{ userStore.nickname }}</span>
+                    <span class="f-s-12 c-999">（{{ userStore.rolesName }}）</span>
+                </div>
+            </div>
+            <div class="pd-10">|</div>
+            <el-button @click="logout" text>
+                <img class="drop-icon mr5" src="@/assets/images/goout_icon.png" />
+                退出登录
+            </el-button>
         </div>
-      </div>
-      <div class="pd-10">|</div>
-      <el-button @click="logout" text> <img class="drop-icon mr5" src="@/assets/images/goout_icon.png" />退出登录</el-button>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -51,188 +52,188 @@ const tenantEnabled = ref(true);
 const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
 
 const openSearchMenu = () => {
-  searchMenuRef.value?.openSearch();
+    searchMenuRef.value?.openSearch();
 };
 
 // 动态切换
 const dynamicTenantEvent = async (tenantId: string) => {
-  if (companyName.value != null && companyName.value !== '') {
-    await dynamicTenant(tenantId);
-    dynamic.value = true;
-    await proxy?.$router.push('/');
-    await proxy?.proxy.$tab.closeAllPage();
-    await proxy?.proxy.$tab.refreshPage();
-  }
+    if (companyName.value != null && companyName.value !== '') {
+        await dynamicTenant(tenantId);
+        dynamic.value = true;
+        await proxy?.$router.push('/');
+        await proxy?.proxy.$tab.closeAllPage();
+        await proxy?.proxy.$tab.refreshPage();
+    }
 };
 
 const dynamicClearEvent = async () => {
-  await dynamicClear();
-  dynamic.value = false;
-  await proxy?.$router.push('/');
-  await proxy?.proxy.$tab.closeAllPage();
-  await proxy?.proxy.$tab.refreshPage();
+    await dynamicClear();
+    dynamic.value = false;
+    await proxy?.$router.push('/');
+    await proxy?.proxy.$tab.closeAllPage();
+    await proxy?.proxy.$tab.refreshPage();
 };
 
 /** 租户列表 */
 const initTenantList = async () => {
-  const { data } = await getTenantList(true);
-  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
-  if (tenantEnabled.value) {
-    tenantList.value = data.voList;
-  }
+    const { data } = await getTenantList(true);
+    tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
+    if (tenantEnabled.value) {
+        tenantList.value = data.voList;
+    }
 };
 
 defineExpose({
-  initTenantList
+    initTenantList
 });
 
 const toggleSideBar = () => {
-  appStore.toggleSideBar(false);
+    appStore.toggleSideBar(false);
 };
 
 const logout = async () => {
-  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  });
-  userStore.logout().then(() => {
-    router.replace({
-      path: '/login',
-      query: {
-        redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
-      }
+    await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    });
+    userStore.logout().then(() => {
+        router.replace({
+            path: '/login',
+            query: {
+                redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
+            }
+        });
     });
-  });
 };
 
 const emits = defineEmits(['setLayout']);
 const setLayout = () => {
-  emits('setLayout');
+    emits('setLayout');
 };
 // 定义Command方法对象 通过key直接调用方法
 const commandMap: { [key: string]: any } = {
-  setLayout,
-  logout
+    setLayout,
+    logout
 };
 const handleCommand = (command: string) => {
-  // 判断是否存在该方法
-  if (commandMap[command]) {
-    commandMap[command]();
-  }
+    // 判断是否存在该方法
+    if (commandMap[command]) {
+        commandMap[command]();
+    }
 };
 //用深度监听 消息
 watch(
-  () => noticeStore.state.value.notices,
-  (newVal) => {
-    newNotice.value = newVal.filter((item: any) => !item.read).length;
-  },
-  { deep: true }
+    () => noticeStore.state.value.notices,
+    (newVal) => {
+        newNotice.value = newVal.filter((item: any) => !item.read).length;
+    },
+    { deep: true }
 );
 </script>
 
 <style lang="scss" scoped>
 :deep(.el-select .el-input__wrapper) {
-  height: 30px;
+    height: 30px;
 }
 
 :deep(.el-badge__content.is-fixed) {
-  top: 12px;
+    top: 12px;
 }
 
 .flex {
-  display: flex;
+    display: flex;
 }
 
 .align-center {
-  align-items: center;
+    align-items: center;
 }
 
 .navbar {
-  height: 54px;
-  overflow: hidden;
-  position: relative;
-  //background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .topmenu-container {
-    position: absolute;
-    left: 50px;
-  }
-
-  .errLog-container {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    display: flex;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
+    height: 54px;
+    overflow: hidden;
+    position: relative;
+    //background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+    .hamburger-container {
+        line-height: 46px;
+        height: 100%;
+        float: left;
         cursor: pointer;
         transition: background 0.3s;
+        -webkit-tap-highlight-color: transparent;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+            background: rgba(0, 0, 0, 0.025);
         }
-      }
     }
 
-    .avatar-container {
-      margin-right: 40px;
+    .breadcrumb-container {
+        float: left;
+    }
+
+    .topmenu-container {
+        position: absolute;
+        left: 50px;
+    }
 
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
+    .errLog-container {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .right-menu {
+        float: right;
+        height: 100%;
+        display: flex;
+
+        &:focus {
+            outline: none;
+        }
 
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-          margin-top: 10px;
+        .right-menu-item {
+            display: inline-block;
+            padding: 0 8px;
+            height: 100%;
+            font-size: 18px;
+            color: #5a5e66;
+            vertical-align: text-bottom;
+
+            &.hover-effect {
+                cursor: pointer;
+                transition: background 0.3s;
+
+                &:hover {
+                    background: rgba(0, 0, 0, 0.025);
+                }
+            }
         }
 
-        i {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
+        .avatar-container {
+            margin-right: 40px;
+
+            .avatar-wrapper {
+                margin-top: 5px;
+                position: relative;
+
+                .user-avatar {
+                    cursor: pointer;
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 10px;
+                    margin-top: 10px;
+                }
+
+                i {
+                    cursor: pointer;
+                    position: absolute;
+                    right: -20px;
+                    top: 25px;
+                    font-size: 12px;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>