JG-ADMIN-TEMP/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{ 'has-logo': sidebarLogo }">
    <!--混合布局-->
    <div
      class="flex w-full"
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #fff;
      "
      v-if="layout == 'mix'"
    >
      <!-- <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> -->
      <div style="display: flex; align-items: center">
        <img
          src="/logo.png"
          style="width: 35px; height: 35px; margin-right: 10px"
        />
        <div class="viewTitle">{{ title }}</div>
      </div>

      <SidebarMixTopMenu class="flex-1" v-show="false" />
      <div>
        <el-space>
          <div
            style="
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <svg-icon
              class="activeNotice"
              icon-class="closeI"
              size="47"
              @click="toExitApp"
            />
          </div>

          <div>
            <!-- <div class="name">李明华</div> -->
          </div>
        </el-space>
      </div>
      <!-- <NavbarRight /> -->
    </div>
    <!--左侧布局 || 顶部布局 -->
    <template v-else>
      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
      <el-scrollbar>
        <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
      </el-scrollbar>
      <NavbarRight v-if="layout === 'top'" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
const route = useRoute();
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const title = ref("");
const sidebarLogo = computed(() => settingsStore.sidebarLogo);
const layout = computed(() => settingsStore.layout);
const toExitApp = () => {
  if (window.openHarmonyBridge && window.openHarmonyBridge.exitApp) {
    window.openHarmonyBridge.exitApp("");
  }
};
const setTitle = () => {
  const path = route.fullPath.split("/")[1];
  switch (path) {
    case "deviceList":
      title.value = "设备列表";
      break;
    case "planprocess":
      title.value = "生产计划";
      break;
    case "outsource":
      title.value = "质量管理";
      break;
    case "quality":
      title.value = "质量管理";
      break;
    case "base":
      title.value = "工序管理";
      break;
  }
};
onMounted(() => {
  setTitle();
});
</script>

<style lang="scss" scoped>
.has-logo {
  .el-scrollbar {
    height: calc(100vh - $navbar-height);
  }
}
.name {
  font-size: 20px;
  color: white;
}
.viewTitle {
  font-size: 30px;
  color: white;
}
</style>