fix: 修复打字机动画

jamebal · Sep 26, 2023 · c226d07 · c226d07
1 parent 2b2efe2
commit c226d07
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 6 deletions.
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
@@ -107,13 +107,10 @@ onUnmounted(() => {
   <div class="text-black" :class="wrapClass">
     <div ref="textRef" class="leading-relaxed break-words">
       <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>
       <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>
 </template>

diff --git a/src/views/chat/components/Message/style.less b/src/views/chat/components/Message/style.less
@@ -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 {
 
+	.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 {
 		.whitespace-pre-wrap {
 			white-space: pre-wrap;
@@ -77,6 +127,7 @@ html.dark {
 @media screen and (max-width: 533px) {
 	.markdown-body .code-block-wrapper {
 		padding: unset;
+
 		code {
 			padding: 24px 16px 16px 16px;
 		}

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