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

blueblueeyes · Mar 9, 2023 · f084460 · f084460
1 parent a4ef23d
commit f084460
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/views/chat/components/Message/Text.vue b/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 },

diff --git a/src/views/chat/hooks/useScroll.ts b/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,
  }
 }
diff --git a/src/views/chat/index.vue b/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" />