lanecarford_front/src/views/asistant/index.vue

<template>
  <div class="asistant-container flex flex-column">
    <div class="header">
      <HeaderTitle hasSetting styleType="2" />
    </div>
    <div class="loading-container" v-if="isLoading">
      <GenerateLoading />
    </div>
    <template v-else>
      <div class="content flex-1" v-if="!isLoading">
        <NoticeList ref="noticeListRef" :list="messageList" />
      </div>
      <div class="footer" v-if="!isLoading">
        <InputArea @send-message="handleSendMessage" />
        <div class="continue">
          <button class="btn" @click="handleContinue">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 GenerateLoading from './components/GenerateLoading.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { fetchEventSource } from '@microsoft/fetch-event-source'

const router = useRouter()

defineOptions({
  name: 'asistant'
})

// 定义NoticeList组件引用类型
interface NoticeListRef {
  simulateSendMessage: () => void
}
// 定义消息类型
interface ChatMessage {
  id: string
  content: string
  userId: string
  time: string
  thumb: string
}

const isLoading = ref<boolean>(false)
const noticeListRef = ref<NoticeListRef | null>(null)
const messageList = ref<ChatMessage[]>([
  {
    id: '1',
    content: 'I want a chic outfit for dinner.',
    userId: '1',
    time: '14:30',
    thumb: ''
  },
  {
    id: '2',
    content:
      "Hey there! A chic dinner outfit, I love that! To give you the perfect recommendations, tell me: is this a romantic date, business dinner, or celebration with friends? And what's your go-to style vibe: classic elegance or something with more edge?",
    userId: '2',
    time: '14:31',
    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
  },
  {
    id: '3',
    content: "It's a romantic date, and I prefer classic elegance.",
    userId: '1',
    time: '14:32',
    thumb: ''
  },
  {
    id: '4',
    content:
      "Perfect! For a romantic dinner with classic elegance, I'd suggest a little black dress with delicate jewelry and elegant heels. Would you like me to show you some specific options?",
    userId: '2',
    time: '14:33',
    thumb: 'https://files-dev.deercal.com/uploads/platforms/logo_code/669933e1b873e798.jpg'
  }
])

onMounted(() => {})

onUnmounted(() => {
  abort.abort()
})

const handleSendMessage = (message: string): void => {
  console.log('发送:', message)
  handleFetchMessage()
}

const abort = new AbortController()
const handleFetchMessage = () => {
  fetchEventSource('/api/sse', {
    method: 'POST',
    openWhenHidden: true,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({}),
    signal: abort.signal,
    onopen: async (res) => {
      console.log('连接建立', res)
    },
    onmessage: (event) => {
      console.log('收到消息', event)
    },
    onerror: (error) => {
      console.log('错误', error)
    },
    onclose: () => {
      console.log('连接关闭')
    }
  })
}

const handleContinue = () => {
  // router.push('/workshop/selectStyle')
  // 模拟接口之后再跳转
  isLoading.value = true
  setTimeout(() => {
    router.push('/workshop/selectStyle')
    isLoading.value = false
  }, 1000)
}
</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>