<script setup lang="ts">
// 组件的名字不能少
defineOptions({
  name: 'Chat',
})

import SessionList from './components/SessionList.vue'
import MessageList from './components/MessageList.vue'
</script>

<template>
  <div class="chat">
    <!-- 左侧对话列表 -->
    <SessionList />

    <!-- 右侧对话内容 -->
    <MessageList />
  </div>
</template>

<style scoped lang="scss">
@use './index.scss' as *;

.chat {
  width: 100%;
  @include main_bg;
  padding: $padding_out;
  gap: $padding_out;

  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: $font;
}
</style>
