Situation-Awareness-Platform-Frontend/src/components/Header/AIHeader.vue

<template>
  <div class="full-w" :style="{ height: `${height}px` }">
    <div class="g-header fixed z-20" ref="headerRef" :class="{ 'home-background': isHome }">
      <div class="g-toolbar w-full overflow-hidden" :class="[searchClass, route?.meta?.headerClassName]">
        <div class="g-toolbar-left flex-shrink items-center">
          <div class="flex-center gap-[16px]" v-if="!isHome">
            <!--            <g-icon v-if="!asideSetShow" @click="$emit('clickMenu')" name="gt-hamburger" size="20px" class="cursor-pointer hover:!text-black" color="#1D1F3A"></g-icon>-->
            <GLink class="g-toolbar-left-logo" @click="gotoAIHome" />
            <GLink class="g-toolbar-left-title"  @click="gotoAIHome">AI助手</GLink>
            <div class="jyh-split"></div>
            <d-button class="jyh-button" variant="solid" @click="handleLogin('login')">
              <div class="flex flex-center">
                <img style="height: 15px;margin-right: 8px" width="16" :src="icon_dh" />
                <span>AI对话</span>
              </div>
            </d-button>
<!--            <d-button class="jyh-button1" variant="solid" @click="handleLogin('login')">-->
<!--              <div class="flex flex-center">-->
<!--                <img style="height: 15px;margin-right: 8px" width="16" :src="icon_bbx" />-->
<!--                <span>百宝箱</span>-->
<!--              </div>-->
<!--            </d-button>-->
          </div>
        </div>
        <div class="g-toolbar-right gap-[12px] flex-grow-0 flex-shrink-0">
          <!--ai copilot-->
          <a class="g-header-copilot" @click="gotoHome">
            <img style="height: 15px;" width="16" :src="zh" />
            <span class="ml-xs">返回平台搜索</span>
          </a>
          <d-button class="jyh-button1" variant="solid" @click="handleLogin('login')">
            <div class="flex flex-center">
              <img style="height: 15px;margin-right: 8px" width="16" :src="icon_sj" />
              <span>升级产品</span>
            </div>
          </d-button>
<!--          <d-button class="jyh-button1" variant="solid" @click="handleLogin('login')">-->
<!--            <div class="flex flex-center">-->
<!--              <img style="height: 15px;margin-right: 8px" width="16" :src="icon_api" />-->
<!--              <span>API接口</span>-->
<!--            </div>-->
<!--          </d-button>-->
<!--          <d-button class="jyh-button1" variant="solid" @click="handleLogin('login')">-->
<!--            <div class="flex flex-center">-->
<!--              <img style="height: 15px;margin-right: 8px" width="16" :src="icon_helper" />-->
<!--              <span>帮助文档</span>-->
<!--            </div>-->
<!--          </d-button>-->

          <template v-if="!isLogin">
            <d-button @click="handleLogin('register')" class="min-w-[64px]">注册</d-button>
            <d-button variant="solid" color="primary" @click="handleLogin('login')">Gitcode账号登录</d-button>
          </template>
          <template v-else>
            <UserAvatar />
          </template>

        </div>
      </div>
      <div v-if="$slots.info || $slots.menu || $slots.bodyHeader" class="g-header-body">
        <slot name="bodyHeader">
          <div class="g-header-body-left h-full">
            <slot name="info" />
          </div>
          <div class="g-header-body-right h-full">
            <slot name="menu"></slot>
          </div>
        </slot>
      </div>
      <div v-if="$slots.headerBottom">
        <slot name="headerBottom"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, watchEffect, computed } from 'vue';
import { useElementSize } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';
import { useAccountStore } from '@/stores/user';
import { emitEvent } from '@/utils/eventBus';

import Create from './Create.vue';
import Entrance from './Entrance.vue';
import Notice from './Notice.vue';
import Search from './Search.vue';
import SearchAiHistory from './searchAiHistory.vue';
import UserAvatar from './UserAvatar.vue';
import { useWindowScroll } from '@vueuse/core';
import { usePageResize } from '@/utils/hooks/usePageResize';
import microApp from '@micro-zoe/micro-app';
import icon_dh from '@/assets/imgs/jyh/ai/icon_dh.png';
import icon_sj from '@/assets/imgs/jyh/ai/icon_sj.png';
import icon_api from '@/assets/imgs/jyh/ai/icon_api.png';
import icon_helper from '@/assets/imgs/jyh/ai/icon_helper.png';
import zh from '@/assets/imgs/jyh/ai/zh.png';
import icon_bbx from '@/assets/imgs/jyh/ai/icon_bbx.png';

const baseUrl = import.meta.env.VITE_BASE_URL;
const { y } = useWindowScroll();
const defaultLinkList = ref([]);
const route = useRoute();
const inSearch = ref(false);
const searchClass = computed(() => ({ 'border-b-transparent': inSearch.value && y.value === 0 }));
// header fixed布局高度自适应
const headerRef = ref(null);
const { height = 56 } = useElementSize(headerRef);

const userInfo = useAccountStore();
const { isLogin } = storeToRefs(userInfo);
const showSearch = computed(() => route.name !== 'home' && route.name !== 'search');
const isHome = computed(() => route.name === 'home');
const handleLogin = (type) => {
  emitEvent('login', { type, triggerType: '主动注册' });
};
const { isMobile } = usePageResize();
const router = useRouter();
const gotoHome = (row) => {
  // 后续请换成params，暂时params传参没传过去
  router.push({ name: 'home' });
};
const gotoAIHome = (row) => {
  // 后续请换成params，暂时params传参没传过去
  router.push({ name: 'aihome' });
};


/* store 用户信息 */
/* @test 后面将清除 */
watchEffect(() => {});
microApp.router.beforeEach({
  'micoro-app-homeweb-app': (to, from) => {
    if (to.pathname === '/search') {
      inSearch.value = true;
    } else {
      inSearch.value = false;
    }
  }
});
defineExpose({
  height
});
</script>

<style lang="scss" scoped>
@import 'devui-theme/styles-var/devui-var.scss';

$radius: 4px;
$add-radius: 48px;
$header-bg: #fff;

.home-background {
  background-color: #fff0 !important;
}

.g-header {
  // overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  background: #FFFFFF0C;
  :deep(.g-link) {
    color: $devui-text-weak;
  }
  .g-header-copilot {
    background: black;
    color: #fff;
    //width: 120px;
    padding: 0 12px;
    border-radius: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    &:hover {
      background: rgba(41, 81, 224, 0.8);
    }
  }
  .g-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 16px;
    flex-basis: 56px;
    overflow: hidden;
    padding: 0 24px;
    border-bottom: 1px solid #f1f1f8;
    :deep(.devui-button) {
      padding: 6px 16px;
      border-radius: $add-radius;
    }
    &-left {
      display: flex;
      align-items: center;
      gap: 25px;
      &-logo {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: url(../../assets/imgs/jyh/ai/aiLogo1.png) no-repeat;
        background-size: contain;
        vertical-align: middle;
        background-position: 0 center;
      }
      &-title {
        font-family: Inter;
        font-weight: Semi Bold;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0px;
        text-align: left;
        background: linear-gradient(-81.02deg, #5EC9D4 0%, #83CA6F 24%, #D79808 49%, #F97C91 76%, #C87EDD 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      &-search {
        max-width: 340px;
        border-radius: $radius;
      }
    }
    &-right {
      display: flex;
      align-items: center;
      @media screen and (max-width: 576px) {
        @apply gap-[16px];
      }
    }
    &.border-b-transparent {
      border-bottom-color: transparent !important;
    }
    &.border-b-show {
      border-bottom-color: #f1f1f8 !important;
    }
  }
  .g-header-gray {
    @apply bg-[#F9F9FB];
  }
  &-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    background-color: $header-bg;
    border-bottom: 1px solid $devui-dividing-line;
    flex-basis: 48px;
  }
}

@media screen and (max-width: 1000px) {
  .g-header {
    .g-toolbar {
      padding: 20px;
      border-color: transparent;
    }
    .g-toolbar-left-logo {
      width: 28px;
      background-size: cover;
    }
    &-body {
      padding: 0;
    }
  }
}
.btn-add {
  background-color: #000;
  color: #fff !important;
  width: 84px;
  font-size: 14px;
  line-height: 20px;
  span {
    margin-left: 8px;
  }
  &:hover {
    color: #fff;
    background-color: #333;
  }
}

@media screen and (max-width: 576px) {
  .hidden-m {
    display: none;
  }
  .g-header-copilot {
    display: none !important;
  }
}
</style>