127 lines
2.3 KiB
Vue
127 lines
2.3 KiB
Vue
<!-- 聊天页面头部组件 -->
|
|
<script setup lang="ts">
|
|
import Collapse from '@/layouts/components/Header/components/Collapse.vue';
|
|
import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
|
|
import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
|
|
import { useSessionStore } from '@/stores/modules/session';
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
/** 是否显示标题编辑 */
|
|
showTitle?: boolean;
|
|
/** 额外的左侧内容 */
|
|
leftExtra?: boolean;
|
|
}>();
|
|
|
|
const sessionStore = useSessionStore();
|
|
const currentSession = computed(() => sessionStore.currentSession);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="chat-header">
|
|
<div class="chat-header__content">
|
|
<div class="chat-header__left">
|
|
<Collapse />
|
|
<CreateChat />
|
|
<div
|
|
v-if="showTitle && currentSession"
|
|
class="chat-header__divider"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="showTitle" class="chat-header__center">
|
|
<TitleEditing />
|
|
</div>
|
|
|
|
<div v-if="$slots.right" class="chat-header__right">
|
|
<slot name="right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 60px;
|
|
flex-shrink: 0;
|
|
|
|
&__content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
&__divider {
|
|
width: 1px;
|
|
height: 30px;
|
|
background-color: rgba(217, 217, 217);
|
|
}
|
|
|
|
&__center {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
|
|
// 响应式
|
|
@media (max-width: 768px) {
|
|
.chat-header {
|
|
height: 50px;
|
|
|
|
&__left {
|
|
padding-left: 8px;
|
|
gap: 8px;
|
|
}
|
|
|
|
&__center {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&__right {
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.chat-header {
|
|
height: 48px;
|
|
|
|
&__left {
|
|
padding-left: 4px;
|
|
gap: 6px;
|
|
}
|
|
|
|
&__center {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
&__right {
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|