slibra-module-web/src/components/Layout/TheLogo.vue

<script setup>
import { useRouter } from "vue-router";
import { storeToRefs } from 'pinia';
import { useAppStore } from '@/stores/modules/appStore';

import SvgIcon from '@/components/SvgIcon';
import BasePopover from "@/components/BasePopover"

const appStore = useAppStore();
const { subMenuCollapse } = storeToRefs(appStore);
const router = useRouter();

const changeCollapse = () => appStore.toggleSubMenuCollapse();

const handleClick = () => router.push('/');
</script>

<template>
  <div class="logo-main flex items-center justify-between py-[14px] px-[20px]">
    <div class="title flex items-center space-x-2 cursor-pointer" @click="handleClick">
      <div class="w-[28px] h-[28px]">
        <SvgIcon name="common-logo" size="28"></SvgIcon>
      </div>
      <span class="block w-[82px] font-[10px] text-left">人工智能运营体<br>锡林浩特水务集团</span>
    </div>
    <!-- 图标 -->
    <div class="icon-group flex items-center justify-center"  @click="changeCollapse" v-show="!subMenuCollapse">
      <BasePopover placement="right" content="历史记录">
        <SvgIcon class="cursor-pointer" name="tool-arrow-history" size="20"></SvgIcon>
      </BasePopover>
    </div>
  </div>
</template>

<style scoped lang="scss">
.logo-main {
  font-family: AlimamaShuHeiTi;

  .title {
    font-size: 10px;
    line-height: 12px;
  }

  .icon-group {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #4F5866;
    &:hover {
      color: #2454FF;
      background: #fff;
    }
  }
}
</style>