fix: scrollbar caton pause, close #52 #42 (#71)

Author: l1m2e

src/components/Function/index.vue

@@ -11,6 +11,7 @@ import {
 import { useRoleStore, useSessionStore } from '@/stores'
 import { getAiMessage } from '@/api'
 import { saveImage } from '@/utils'
+import { emit } from '@tauri-apps/api/event'
 
 const { currentRole } = storeToRefs(useRoleStore())
 
@@ -80,14 +81,22 @@ const functions = computed(() => [
     handleClick: () => (modalVisible.value = true)
   }
 ])
+
+const triggerScroll = () => {
+  emit('scroll-to-bottom')
+}
 </script>
 
 <!-- TODO:把聊天对象移过来 -->
 <template>
   <div class="function text-6 relative flex justify-end">
     <!-- 当前聊天角色对象 -->
     <div class="top-50% left-50% text-4 -translate-1/2 absolute">
-      正在与 <span class="mark">{{ currentRole?.name }}</span> 对话
+      正在与
+      <span class="mark cursor-pointer" @click="triggerScroll">{{
+        currentRole?.name
+      }}</span>
+      对话
     </div>
 
     <div class="flex gap-2">

src/components/Session/index.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
 import MarkdownItHighlight from 'markdown-it-highlightjs'
-import { IconImage } from '@arco-design/web-vue/es/icon'
+import { IconImage, IconCaretUp } from '@arco-design/web-vue/es/icon'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
 import { copyText, copyCode, saveImage, saveMarkdown } from '@/utils'
 import { useSettingsStore, useSessionStore, useRoleStore } from '@/stores'
+import { listen } from '@tauri-apps/api/event'
 
 dayjs.extend(utc)
 
@@ -23,20 +24,45 @@ const getLocalTime = (time: string) =>
   dayjs.utc(time).local().format('YYYY-MM-DD HH:mm:ss')
 
 const sessionElement = ref<HTMLDivElement | null>(null)
+const isAutoScroll = ref(true)
 
-/**
- * 自动滚动到底部
- */
-const autoScrollBottom = () => {
-  if (!sessionElement.value) return
+/** 自动滚动到底部 */
+const autoScroll = (isAuto = false) => {
+  if (!sessionElement.value || !isAutoScroll.value) return
 
   sessionElement.value.scroll({
-    top: sessionElement.value.scrollHeight
+    top: sessionElement.value.scrollHeight,
+    behavior: isAuto ? 'smooth' : 'auto'
+  })
+}
+
+onMounted(() => {
+  listen('scroll-to-bottom', () => {
+    isAutoScroll.value = true
+    autoScroll(true)
   })
+})
+
+//用户滚轮操作滚动条
+const handleWheel = (event: WheelEvent) => {
+  if (event.deltaY < 0) {
+    isAutoScroll.value = false
+  }
+}
+
+//监听消息页面滚动
+const handleScroll = () => {
+  if (!sessionElement.value) return
+
+  const { scrollTop, clientHeight, scrollHeight } = sessionElement.value
+
+  if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {
+    isAutoScroll.value = true
+  }
 }
 
 onUpdated(() => {
-  autoScrollBottom()
+  autoScroll()
 })
 </script>
 
@@ -45,6 +71,8 @@ onUpdated(() => {
     ref="sessionElement"
     id="session-list"
     class="relative flex-1 cursor-default overflow-auto"
+    @scroll="handleScroll"
+    @wheel="handleWheel"
   >
     <template v-if="sessionDataList.length">
       <div
@@ -109,6 +137,18 @@ onUpdated(() => {
 
     <!-- 当前无会话 -->
     <NoSession v-else />
+
+    <a-back-top
+      @click="isAutoScroll = false"
+      target-container="#session-list"
+      class="bottom-[114px]"
+    >
+      <a-button type="primary" shape="circle">
+        <template #icon>
+          <IconCaretUp />
+        </template>
+      </a-button>
+    </a-back-top>
   </div>
 </template>
 

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
 import '@arco-design/web-vue/es/message/style/css.js'
+import '@arco-design/web-vue/es/back-top/style/css.js'
 import 'uno.css'
 import 'highlight.js/styles/github-dark-dimmed.css'
 import '@kidonng/daisyui/index.css'

vite.config.ts

@@ -25,7 +25,8 @@ export default defineConfig(async () => ({
         enabled: false
       },
       imports: ['vue', 'pinia'],
-      resolvers: [ArcoResolver()]
+      resolvers: [ArcoResolver()],
+      vueTemplate: true
     }),
     Components({
       dts: './src/types/components.d.ts',