qn-ai-pc/src/views/conversation/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from 'ant-design-vue'
import { AppContainerBox } from '@/components/AppContainerBox'
import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
import { AppSubMenuList } from '@/components/AppSubMenuList'
import { AppConversationDefault } from '@/components/AppConversationDefault'
import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
import { AppTextarea } from '@/components/AppTextarea'

const subMenuActive = ref(0)
const subMenuList = ref<SubMenuItem[]>([
  {
    title: '新对话1',
    content: '这是一个新的对话哦；啦啦啦',
    id: '1',
  },
  {
    title: '新对话2',
    content: '这是一个新的对话哦',
    id: '2',
  },
])

function handleSubMenuChange(index: number) {
  subMenuActive.value = index
}

function pressEnter(value: string) {
  console.log('pressEnter', value)
}
</script>

<template>
  <AppContainerBox>
    <template #subMenu>
      <AppSubMenuTitle></AppSubMenuTitle>
      <div class="px-5 mb-5">
        <Button type="primary" class="w-full">
          新建会话
        </Button>
      </div>
      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
    </template>
    <template #content>
      <AppConversationDefault height="calc(100% - 120px)"></AppConversationDefault>
      <AppTextarea class="pl-52 pr-32 mt-10" @press-enter="pressEnter"></AppTextarea>
    </template>
  </AppContainerBox>
</template>

<style scoped></style>