105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<!-- Header 头部 -->
|
|
<script setup lang="ts">
|
|
import { onKeyStroke } from '@vueuse/core';
|
|
import { SIDE_BAR_WIDTH } from '@/config/index';
|
|
import { useDesignStore, useUserStore } from '@/stores';
|
|
import { useSessionStore } from '@/stores/modules/session';
|
|
import AnnouncementBtn from './components/AnnouncementBtn.vue';
|
|
import Avatar from './components/Avatar.vue';
|
|
import Collapse from './components/Collapse.vue';
|
|
import CreateChat from './components/CreateChat.vue';
|
|
import LoginBtn from './components/LoginBtn.vue';
|
|
import TitleEditing from './components/TitleEditing.vue';
|
|
import TutorialBtn from './components/TutorialBtn.vue';
|
|
|
|
const userStore = useUserStore();
|
|
const designStore = useDesignStore();
|
|
const sessionStore = useSessionStore();
|
|
|
|
const currentSession = computed(() => sessionStore.currentSession);
|
|
|
|
onMounted(() => {
|
|
// 全局设置侧边栏默认宽度 (这个是不变的，一开始就设置)
|
|
document.documentElement.style.setProperty(`--sidebar-default-width`, `${SIDE_BAR_WIDTH}px`);
|
|
if (designStore.isCollapse) {
|
|
document.documentElement.style.setProperty(`--sidebar-left-container-default-width`, ``);
|
|
}
|
|
else {
|
|
document.documentElement.style.setProperty(
|
|
`--sidebar-left-container-default-width`,
|
|
`${SIDE_BAR_WIDTH}px`,
|
|
);
|
|
}
|
|
});
|
|
|
|
// 定义 Ctrl+K 的处理函数
|
|
function handleCtrlK(event: KeyboardEvent) {
|
|
event.preventDefault(); // 防止默认行为
|
|
sessionStore.createSessionBtn();
|
|
}
|
|
|
|
// 设置全局的键盘按键监听
|
|
onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtrlK, {
|
|
passive: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="header-container">
|
|
<div class="header-box relative z-10 top-0 left-0 right-0">
|
|
<div class="absolute left-0 right-0 top-0 bottom-0 flex items-center flex-row">
|
|
<div
|
|
class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
|
|
>
|
|
<div class="w-full flex items-center flex-row">
|
|
<!-- 左边 -->
|
|
<div
|
|
v-if="designStore.isCollapse"
|
|
class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
|
|
>
|
|
<Collapse />
|
|
<CreateChat />
|
|
<div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
|
|
</div>
|
|
|
|
<!-- 中间 -->
|
|
<div class="middle-box flex-1 min-w-0 ml-12px">
|
|
<TitleEditing />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右边 -->
|
|
<div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
|
|
<AnnouncementBtn />
|
|
<TutorialBtn />
|
|
<Avatar v-show="userStore.userInfo" />
|
|
<LoginBtn v-show="!userStore.userInfo" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.header-container {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: fit-content;
|
|
.header-box {
|
|
width: 100%;
|
|
width: calc(
|
|
100% - var(--sidebar-left-container-default-width, 0px) - var(
|
|
--sidebar-right-container-default-width,
|
|
0px
|
|
)
|
|
);
|
|
height: var(--header-container-default-heigth);
|
|
margin: 0 var(--sidebar-right-container-default-width, 0) 0
|
|
var(--sidebar-left-container-default-width, 0);
|
|
}
|
|
}
|
|
</style>
|