147 lines
3.6 KiB
Vue
147 lines
3.6 KiB
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" @send-message="handleSendMessage" />
|
|
</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 } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
|
|
// 定义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(() => {
|
|
// handleSendMessage('123')
|
|
})
|
|
|
|
const handleSendMessage = (message: string): void => {
|
|
console.log('收到消息:', message)
|
|
messageList.value.push({
|
|
id: '1',
|
|
content: message,
|
|
userId: '1',
|
|
time: new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
|
|
thumb: ''
|
|
})
|
|
//
|
|
}
|
|
|
|
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>
|