fix: 修复打字机动画

This commit is contained in:
ChenZhaoYu 2023-09-26 11:38:58 +08:00
parent 2b2efe2f15
commit c226d07368
3 changed files with 54 additions and 6 deletions

View File

@ -107,13 +107,10 @@ onUnmounted(() => {
<div class="text-black" :class="wrapClass"> <div class="text-black" :class="wrapClass">
<div ref="textRef" class="leading-relaxed break-words"> <div ref="textRef" class="leading-relaxed break-words">
<div v-if="!inversion"> <div v-if="!inversion">
<div v-if="!asRawText" class="markdown-body" v-html="text" /> <div v-if="!asRawText" class="markdown-body" :class="{ 'markdown-body-generate': loading }" v-html="text" />
<div v-else class="whitespace-pre-wrap" v-text="text" /> <div v-else class="whitespace-pre-wrap" v-text="text" />
</div> </div>
<div v-else class="whitespace-pre-wrap" v-text="text" /> <div v-else class="whitespace-pre-wrap" v-text="text" />
<template v-if="loading">
<span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
</template>
</div> </div>
</div> </div>
</template> </template>

View File

@ -57,10 +57,60 @@
} }
} }
&.markdown-body-generate>dd:last-child:after,
&.markdown-body-generate>dl:last-child:after,
&.markdown-body-generate>dt:last-child:after,
&.markdown-body-generate>h1:last-child:after,
&.markdown-body-generate>h2:last-child:after,
&.markdown-body-generate>h3:last-child:after,
&.markdown-body-generate>h4:last-child:after,
&.markdown-body-generate>h5:last-child:after,
&.markdown-body-generate>h6:last-child:after,
&.markdown-body-generate>li:last-child:after,
&.markdown-body-generate>ol:last-child li:last-child:after,
&.markdown-body-generate>p:last-child:after,
&.markdown-body-generate>pre:last-child code:after,
&.markdown-body-generate>td:last-child:after,
&.markdown-body-generate>ul:last-child li:last-child:after {
animation: blink 1s steps(5, start) infinite;
color: #000;
content: '_';
font-weight: 700;
margin-left: 3px;
vertical-align: baseline;
}
@keyframes blink {
to {
visibility: hidden;
}
}
} }
html.dark { html.dark {
.markdown-body {
&.markdown-body-generate>dd:last-child:after,
&.markdown-body-generate>dl:last-child:after,
&.markdown-body-generate>dt:last-child:after,
&.markdown-body-generate>h1:last-child:after,
&.markdown-body-generate>h2:last-child:after,
&.markdown-body-generate>h3:last-child:after,
&.markdown-body-generate>h4:last-child:after,
&.markdown-body-generate>h5:last-child:after,
&.markdown-body-generate>h6:last-child:after,
&.markdown-body-generate>li:last-child:after,
&.markdown-body-generate>ol:last-child li:last-child:after,
&.markdown-body-generate>p:last-child:after,
&.markdown-body-generate>pre:last-child code:after,
&.markdown-body-generate>td:last-child:after,
&.markdown-body-generate>ul:last-child li:last-child:after {
color: #65a665;
}
}
.message-reply { .message-reply {
.whitespace-pre-wrap { .whitespace-pre-wrap {
white-space: pre-wrap; white-space: pre-wrap;
@ -77,6 +127,7 @@ html.dark {
@media screen and (max-width: 533px) { @media screen and (max-width: 533px) {
.markdown-body .code-block-wrapper { .markdown-body .code-block-wrapper {
padding: unset; padding: unset;
code { code {
padding: 24px 16px 16px 16px; padding: 24px 16px 16px 16px;
} }

View File

@ -93,7 +93,7 @@ async function onConversation() {
+uuid, +uuid,
{ {
dateTime: new Date().toLocaleString(), dateTime: new Date().toLocaleString(),
text: '', text: '思考中',
loading: true, loading: true,
inversion: false, inversion: false,
error: false, error: false,
@ -502,7 +502,7 @@ onUnmounted(() => {
<template #icon> <template #icon>
<SvgIcon icon="ri:stop-circle-line" /> <SvgIcon icon="ri:stop-circle-line" />
</template> </template>
{{ t('common.stopResponding') }} {{ t('common.stopResponding') }}
</NButton> </NButton>
</div> </div>
</div> </div>