fix: 深色模式导出图片的样式问题

src/views/chat/components/Message/Text.vue

@@ -38,7 +38,7 @@ const wrapClass = computed(() => {
     'text-wrap',
     'min-w-[20px]',
     'rounded-md',
-    isMobile.value ? 'p-2' : 'p-3',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
     props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
     props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
     { 'text-red-500': props.error },

src/views/chat/hooks/useScroll.ts

@@ -7,7 +7,7 @@ interface ScrollReturn {
   scrollRef: Ref<ScrollElement>
   scrollToBottom: () => Promise<void>
   scrollToTop: () => Promise<void>
-	scrollToBottomIfAtBottom: () => Promise<void>
+  scrollToBottomIfAtBottom: () => Promise<void>
 }
 
 export function useScroll(): ScrollReturn {
@@ -26,20 +26,19 @@ export function useScroll(): ScrollReturn {
   }
 
   const scrollToBottomIfAtBottom = async () => {
-		await nextTick()
+    await nextTick()
     if (scrollRef.value) {
       const threshold = 50 // 阈值，表示滚动条到底部的距离阈值
       const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
-      if (distanceToBottom <= threshold) {
+      if (distanceToBottom <= threshold)
         scrollRef.value.scrollTop = scrollRef.value.scrollHeight
-      }
     }
   }
-	
+
   return {
     scrollRef,
     scrollToBottom,
     scrollToTop,
-		scrollToBottomIfAtBottom,
+    scrollToBottomIfAtBottom,
   }
 }

src/views/chat/index.vue

@@ -120,7 +120,6 @@ async function onConversation() {
         }
       },
     })
-    scrollToBottomIfAtBottom()
   }
   catch (error: any) {
     const errorMessage = error?.message ?? t('common.wrong')
@@ -165,10 +164,10 @@ async function onConversation() {
         requestOptions: { prompt: message, options: { ...options } },
       },
     )
-    scrollToBottom()
   }
   finally {
     loading.value = false
+    scrollToBottom()
   }
 }
 
@@ -406,7 +405,11 @@ onUnmounted(() => {
         ref="scrollRef"
         class="h-full overflow-hidden overflow-y-auto"
       >
-        <div id="image-wrapper" class="w-full max-w-screen-xl m-auto" :class="[isMobile ? 'p-2' : 'p-4']">
+        <div
+          id="image-wrapper"
+          class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+          :class="[isMobile ? 'p-2' : 'p-4']"
+        >
           <template v-if="!dataSources.length">
             <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
               <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />