312 lines
9.4 KiB
Vue
312 lines
9.4 KiB
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">
|
||
<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="handleHelp">
|
||
<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')">可信开源代码库账号登录</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' });
|
||
};
|
||
|
||
const handleHelp = () => {
|
||
// 方法功能：跳转到帮助页面
|
||
try {
|
||
// 使用 window.location.href 实现页面跳转
|
||
// window.location.href = 'http://222.20.126.208:4399/';
|
||
|
||
// 或者使用 window.open 打开新标签页
|
||
window.open('http://52.184.83.30:8088/', '_blank');
|
||
|
||
console.log('正在跳转到帮助页面');
|
||
} catch (error) {
|
||
console.error('跳转失败:', error);
|
||
// 可以在此处添加错误提示（如使用 Message 组件）
|
||
// Message.error('跳转帮助页面失败，请手动访问该链接');
|
||
}
|
||
};
|
||
|
||
|
||
/* 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>
|