fix(Embedded Systems): The top and bottom spacing is inconsistent between floating mode and full-screen mode; optimization is recommended.

Author: dataeaseShu

frontend/src/main.ts

@@ -9,36 +9,12 @@ import App from './App.vue'
 import router from './router'
 import { i18n } from './i18n'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
+import { isSupportFlexGap } from './utils/utils'
 
 // import 'element-plus/dist/index.css'
 cssHasPseudo(document)
 
-function supportsFlexGap() {
-  const flex = document.createElement('div')
-
-  flex.style.display = 'flex'
-  flex.style.flexDirection = 'column'
-  flex.style.rowGap = '1px'
-
-  const child1 = document.createElement('div')
-  const child2 = document.createElement('div')
-
-  child1.style.height = '1px'
-  child2.style.height = '1px'
-
-  flex.appendChild(child1)
-  flex.appendChild(child2)
-
-  document.body.appendChild(flex)
-
-  const isSupported = flex.scrollHeight === 3
-
-  document.body.removeChild(flex)
-
-  return isSupported
-}
-
-document.documentElement.setAttribute('data-no-flex-gap', String(!supportsFlexGap()))
+isSupportFlexGap()
 
 const app = createApp(App)
 const pinia = createPinia()

frontend/src/utils/utils.ts

@@ -315,3 +315,32 @@ export const formatArg = (text: string) => {
     return text
   }
 }
+
+function supportsFlexGap() {
+  const flex = document.createElement('div')
+
+  flex.style.display = 'flex'
+  flex.style.flexDirection = 'column'
+  flex.style.rowGap = '1px'
+
+  const child1 = document.createElement('div')
+  const child2 = document.createElement('div')
+
+  child1.style.height = '1px'
+  child2.style.height = '1px'
+
+  flex.appendChild(child1)
+  flex.appendChild(child2)
+
+  document.body.appendChild(flex)
+
+  const isSupported = flex.scrollHeight === 3
+
+  document.body.removeChild(flex)
+
+  return isSupported
+}
+
+export const isSupportFlexGap = () => {
+  document.documentElement.setAttribute('data-no-flex-gap', String(!supportsFlexGap()))
+}

frontend/src/views/chat/index.vue

@@ -452,7 +452,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref } from 'vue'
 import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat'
 import ChatRow from './ChatRow.vue'
 import ChartAnswer from './answer/ChartAnswer.vue'
@@ -483,7 +483,7 @@ import { onClickOutside } from '@vueuse/core'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useUserStore } from '@/stores/user'
 import { debounce } from 'lodash-es'
-import { isMobile } from '@/utils/utils'
+import { isMobile, isSupportFlexGap } from '@/utils/utils'
 import router from '@/router'
 import QuickQuestion from '@/views/chat/QuickQuestion.vue'
 import { useChatConfigStore } from '@/stores/chatConfig.ts'
@@ -1130,8 +1130,19 @@ function jumpCreatChat() {
     history.replaceState({}, '', newUrl)
   }
 }
-
+function checkAfterVisible() {
+  if (document.visibilityState === 'visible') {
+    clearInterval(time)
+    requestAnimationFrame(() => {
+      isSupportFlexGap()
+    })
+  }
+}
+let time: number
 onMounted(() => {
+  time = setInterval(() => {
+    checkAfterVisible()
+  }, 1000)
   chatConfig.fetchGlobalConfig()
   if (isPhone.value) {
     chatListSideBarShow.value = false
@@ -1142,6 +1153,12 @@ onMounted(() => {
   getChatList(jumpCreatChat)
   assistantPrepareInit()
 })
+
+onBeforeUnmount(() => {
+  clearInterval(time)
+  clearInterval(scrollTime)
+  clearTimeout(scrollingTime)
+})
 </script>
 
 <style lang="less" scoped>