4pc/src/view/layout/nav.vue

<template>
  <div class="main-layout" :class="{ [routeName]: true }">
    <div class="header" :class="{ [name]: true }">
      <span class="title-span">
        <el-button
          :icon="Back"
          circle
          type="primary"
          @click="router.back()"
          v-if="showBack"
        />

        <span v-if="!name" class="logo-wrapper">
          <img class="sp" src="/image/logo_sp.png" alt="logo" />
          <span>文物遗产监测巡检平台</span>
        </span>
      </span>
      <div class="right-panel" v-if="user && !['pano', 'map'].includes(name)">
        <!-- <a
          target="_blank"
          class="helper"
          href="https://showdoc.4dage.com/web/#/179?page_id=1007"
        >
          <el-icon :size="16">
            <QuestionFilled />
          </el-icon>
          帮助
        </a> -->
        <el-dropdown placement="bottom-start" class="avatar" v-if="user">
          <span class="avatar-left-label">
            <el-avatar class="avatar" :src="user.head || avatarDefault" />
          </span>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="passwordHandler">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <span class="name" v-if="user"> {{ user.nickName }}</span>
        <span class="org" v-if="user"> {{ user.orgName }}</span>
      </div>
    </div>
    <div class="content">
      <ly-slide class="slide" v-if="user && !['pano', 'map'].includes(name)" />
      <div class="view">
        <RouterView v-slot="{ Component }">
          <KeepAlive :include="['pano', 'map', 'query-map', 'query-pano']">
            <component :is="Component" />
          </KeepAlive>
        </RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Back, QuestionFilled } from "@element-plus/icons-vue";
import { router } from "@/router";
import { computed, reactive } from "vue";
import { user, logout } from "@/store/user";
import { errorHook } from "@/request/state";
import lySlide from "./slide/index.vue";
import { usersPasswordEdit } from "@/view/quisk";
import avatarDefault from "@/assets/avatar.png";
import { UserType, changePassword } from "@/request";
import { UserStatus, userStatus } from "@/store/user";
const name = computed(() => router.currentRoute.value.meta?.navClass as string);
const routeName = computed(() => router.currentRoute.value.name as string);
let isLogout = false;
const logoutHandler = () => {
  if (!isLogout) {
    logout(true);
    isLogout = true;
  }
  userStatus.value = UserStatus.NOT_LOGIN;
  router.replace({ name: "login" });
};
const passwordHandler = async () => {
  const userObj = reactive<UserType>({
    orgName: "",
    createBy: "",
    createTime: "",
    fdkkId: 0,
    head: "",
    nickName: "",
    orgId: 0,
    status: 0,
    tbStatus: 0,
    updateBy: "",
    updateTime: "",
    userId: 0,
    userName: "",
    roleNames: "",
  });
  const userinfo = ({
    ...userObj,
    ...user.value,
    phoneNum: user.value.userName,
  } as any) as UserType;
  console.log("passwordHandler", userinfo);
  await usersPasswordEdit({
    user: userinfo,
    submit: changePassword,
  });
};
const showBack = computed(() => {
  if (name.value === "pano") {
    return true;
  } else {
    return user && routeName.value === "map";
  }
});
</script>

<style lang="scss" scoped>
.main-layout {
  --border-color: #dcdfe6;
  display: flex;
  flex-direction: column;
  height: 100%;
  &.scene,
  &.relics,
  &.device,
  &.organization,
  &.org-users,
  &.users {
    .content {
      .view {
        margin-left: 8px;
        margin-top: 8px;
      }
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 4px 10px;

  .right-panel {
    display: inline-flex;
    align-items: center;
    padding-right: 14px;
    .avatar {
      margin-right: 16px;
      width: 32px;
      height: 32px;
      &:hover {
        cursor: pointer;
      }
    }
    .name,
    .org {
      font-size: 14px;
      color: #606266;
    }
    .name {
      padding-right: 8px;
    }
  }

  .avatar-left-label {
    display: inline-flex;
    align-items: center;
    outline: none;
  }

  &:not(.pano, .map) {
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
  }

  &.pano,
  &.map {
    pointer-events: none;
    z-index: 9;
    position: absolute;
    width: 100%;

    .avatar {
      display: none;
    }

    * {
      pointer-events: all;
    }
  }
}

.content {
  flex: 1;
  overflow: hidden;
  display: flex;
  background: #f2f3f5ff;
  --bgColor: #fff;

  .slide {
    width: 200px;
    flex: 0 0 auto;
    border-right: 1px solid var(--el-border-color);
  }

  .view {
    flex: 1;
    overflow: hidden;
    background-color: var(--bgColor);
    flex-direction: column;
    display: flex;

    &.full {
      width: 100%;
    }

    .player {
      flex: 0 0 auto;
      height: 32px;
    }

    .main {
      margin: 0 16px 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex: 1;
    }
  }
}

.title-span {
  display: flex;
  align-items: center;

  > span {
    margin-left: 10px;
  }
}
.logo-wrapper {
  display: inline-flex;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 20px;
  color: #303133;
  line-height: 23px;
  letter-spacing: 2px;
  text-align: left;
  font-style: normal;
  justify-content: center;
  align-items: center;
  .sp {
    height: 23px;
    width: auto;
    margin-right: 16px;
  }
}
.helper {
  font-size: 14px;
  color: #177ddc;
  margin-right: 32px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  i {
    margin-right: 4px;
  }
  &:hover {
    color: #0b467d;
  }
}
</style>