feat: 调整消息布局以便扩展

This commit is contained in:
ChenZhaoYu 2023-02-13 14:29:45 +08:00
parent 727562f495
commit 73c9ac4d8f
3 changed files with 17 additions and 7 deletions

View File

@ -1,5 +1,15 @@
<script lang="ts" setup>
interface Props {
reversal?: boolean
}
defineProps<Props>()
</script>
<template>
<span class="leading-relaxed whitespace-pre-wrap">
<slot />
</span>
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
<span class="leading-relaxed whitespace-pre-wrap">
<slot />
</span>
</div>
</template>

View File

@ -23,9 +23,9 @@ defineProps<Props>()
<span class="text-xs text-[#b4bbc4]">
{{ dateTime }}
</span>
<div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
<Text>{{ message }}</Text>
</div>
<Text :reversal="reversal">
{{ message }}
</Text>
</div>
</div>
</template>

View File

@ -92,7 +92,7 @@ function addMessage(message: string, reversal = false) {
<div class="flex items-center justify-between space-x-2">
<HoverButton tooltip="Clear conversations" @click="handleClear">
<span class="text-xl text-[#4f555e]">
<SvgIcon icon="ri:refresh-line" />
<SvgIcon icon="ri:delete-bin-line" />
</span>
</HoverButton>
<NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />