lanecarford_front/src/views/asistant/index.vue

<template>
  <div class="asistant-container flex flex-column">
    <div class="header">
      <HeaderTitle light hasSetting />
    </div>
    <div class="loading-container" v-if="isLoading">
      <ChatLoading />
    </div>
    <template v-else>
      <div class="content flex-1" v-if="!isLoading">
        <NoticeList ref="noticeListRef" @send-message="handleSendMessage" />
      </div>
      <div class="footer" v-if="!isLoading">
        <InputArea @send-message="handleSendMessage" />
        <div class="continue">
          <button class="btn">Continue</button>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import NoticeList from './components/NoticeList.vue'
import InputArea from './components/InputArea.vue'
import ChatLoading from './components/ChatLoading.vue'
import { ref, onMounted } from 'vue'

// 定义NoticeList组件引用类型
interface NoticeListRef {
  simulateSendMessage: () => void
}

const isLoading = ref<boolean>(false)
const noticeListRef = ref<NoticeListRef | null>(null)

onMounted(() => {
  // handleSendMessage('123')
})

const handleSendMessage = (message: string): void => {
  console.log('收到消息:', message)
  // 显示loading状态
  isLoading.value = true

  // 模拟请求延迟
  setTimeout(() => {
    // 调用NoticeList的方法添加新消息
    if (noticeListRef.value) {
      noticeListRef.value.simulateSendMessage()
    }
    // 隐藏loading状态
    isLoading.value = false
  }, 10000) // 3秒后完成
}
</script>
<style lang="less" scoped>
.asistant-container {
  height: 100vh;
  overflow: hidden;
}

.header {
  flex-shrink: 0;
}

.content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.footer {
  flex-shrink: 0;

  .continue {
    font-family: 'satoshiRegular';
    font-size: 3.6rem;
    color: #fff;
    text-align: right;
    padding: 2.6rem 4.5rem;
    .btn {
      border-radius: 7px;
      background-color: #000;
      width: 24.6rem;
      height: 5.9rem;
    }
  }
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
</style>