feat: 代码调整
This commit is contained in:
@@ -1,14 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="chat-ai">
|
<view class="chat-ai">
|
||||||
<!-- <text>{{ text }}</text> -->
|
<ChatMarkdown :text="text"></ChatMarkdown>
|
||||||
<!-- <XMarkdown :markdown="text"/> -->
|
|
||||||
<ua-markdown :source="text" />
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from "vue";
|
||||||
|
import ChatMarkdown from "./ChatMarkdown.vue";
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
text: {
|
text: {
|
||||||
|
|||||||
37
pages/chat/ChatCardOther.vue
Normal file
37
pages/chat/ChatCardOther.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<view class="chat-other">
|
||||||
|
<text>{{ text }}</text>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps } from "vue";
|
||||||
|
defineProps({
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chat-other {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: white;
|
||||||
|
margin: 6px 12px;
|
||||||
|
padding: 8px 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -23,19 +23,20 @@
|
|||||||
|
|
||||||
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
<view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
|
||||||
<template v-if="item.msgType === MessageRole.AI">
|
<template v-if="item.msgType === MessageRole.AI">
|
||||||
<ChatCardAI class="message-item message-item-ai" :text="item.msg">
|
<ChatCardAI class="message-item-ai" :text="item.msg">
|
||||||
<image v-if="item.msgContent && item.msgContent.type === MessageType.IMAGE" src="/static/logo.png" style="width: 100px;height: 100px;"></image>
|
<image v-if="item.msgContent && item.msgContent.type === MessageType.IMAGE" src="/static/logo.png" style="width: 100px;height: 100px;"></image>
|
||||||
</ChatCardAI>
|
</ChatCardAI>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="item.msgType === MessageRole.ME">
|
<template v-else-if="item.msgType === MessageRole.ME">
|
||||||
<ChatCardMine class="message-item message-item-mine" :text="item.msg">
|
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||||
</ChatCardMine>
|
</ChatCardMine>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<text class="message-item message-item-other">{{item.msg}}</text>
|
<ChatCardOther class="message-item-other" :text="item.msg"></ChatCardOther>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部锚点(用于滚动到底部) -->
|
<!-- 底部锚点(用于滚动到底部) -->
|
||||||
<view :id="lastMsgId"></view>
|
<view :id="lastMsgId"></view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -65,6 +66,7 @@
|
|||||||
import ChatTopNavBar from './ChatTopNavBar.vue';
|
import ChatTopNavBar from './ChatTopNavBar.vue';
|
||||||
import ChatCardAI from './ChatCardAI.vue';
|
import ChatCardAI from './ChatCardAI.vue';
|
||||||
import ChatCardMine from './ChatCardMine.vue';
|
import ChatCardMine from './ChatCardMine.vue';
|
||||||
|
import ChatCardOther from './ChatCardOther.vue';
|
||||||
import ChatQuickAccess from './ChatQuickAccess.vue';
|
import ChatQuickAccess from './ChatQuickAccess.vue';
|
||||||
import ChatMoreTips from './ChatMoreTips.vue';
|
import ChatMoreTips from './ChatMoreTips.vue';
|
||||||
import ChatInputArea from './ChatInputArea.vue'
|
import ChatInputArea from './ChatInputArea.vue'
|
||||||
@@ -167,10 +169,9 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
chatMsgList.value.push(newMsg)
|
chatMsgList.value.push(newMsg)
|
||||||
|
|
||||||
sendChat('酒店一共有哪些温泉?')
|
|
||||||
|
|
||||||
console.log("发送的新消息:",JSON.stringify(newMsg))
|
console.log("发送的新消息:",JSON.stringify(newMsg))
|
||||||
|
|
||||||
|
sendChat(text)
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
|
|||||||
19
pages/chat/ChatMarkdown.vue
Normal file
19
pages/chat/ChatMarkdown.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<ua-markdown :source="text" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps } from "vue";
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -54,33 +54,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-item {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-item-ai {
|
.message-item-ai {
|
||||||
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-item-mine {
|
.message-item-mine {
|
||||||
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-item-other {
|
.message-item-other {
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: white;
|
|
||||||
margin: 6px 12px;
|
|
||||||
padding: 8px 24px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-family: PingFang SC, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user