From 0f97ab5bfa56b478d5f8d61604773563f00c93e6 Mon Sep 17 00:00:00 2001
From: Twilight <im@ivampiresp.com>
Date: Mon, 16 Sep 2024 21:08:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=20=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/Chat.vue  |  9 +++++----
 src/layouts/DefaultLayout.vue | 17 +++++++++++++++++
 src/stores/app.ts             |  3 +++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 1ecec34..218f2f2 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -6,7 +6,7 @@
           class="flex-grow mt-3 mb-1 text-5xl select-none"
           v-if="!chatMessages?.length"
         >
-          <n-gradient-text type="info" class="pr-3 pb-2 pt-2">
+          <n-gradient-text type="success" class="pr-3 pb-2 pt-2">
             你好，{{ userStore.user.name }}
           </n-gradient-text>
           <br />
@@ -22,7 +22,7 @@
 
       <div
         class="fixed bottom-0 left-0 right-0"
-        :class="onBottom ? 'hidden' : 'mb-6'"
+        :class="!appStore.contentScrollOnBottom ? 'hidden' : 'mb-6'"
       >
         <!-- <div
           class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg"
@@ -129,7 +129,7 @@
         <n-text
           depth="3"
           class="text-center block mt-2 mb-2 text-sm select-none"
-          v-show="onBottom"
+          v-show="appStore.contentScrollOnBottom"
         >
           AI 也有可能犯错误，请在使用之前核查信息。
         </n-text>
@@ -158,6 +158,7 @@ import { useChatStore } from "@/stores/chat";
 import router from "@/router";
 import element from "@/config/element";
 import { useIsMobile } from "@/utils/composables";
+import { useAppStore } from "@/stores/app";
 
 // 获取组件传入的 chatId
 const chatId: Ref<string | number | undefined | null> = ref(null);
@@ -192,7 +193,7 @@ const processing = ref(false);
 const fileUpload = ref();
 const uploading = ref(false);
 const autoScroll = ref(true);
-const onBottom = ref(false);
+const appStore = useAppStore()
 
 function onKeydown(e: KeyboardEvent) {
   // 带 shift 不触发
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 8861a83..b0079d6 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -6,9 +6,11 @@ import router from "../router";
 import Header from "./Header.vue";
 import element from "@/config/element";
 import { useIsMobile } from "@/utils/composables";
+import { useAppStore } from "@/stores/app";
 const currentRoute = computed(() => router.currentRoute.value.name);
 
 const userStore = useUserStore();
+const appStore = useAppStore();
 const route = useRoute();
 
 const isMobile = useIsMobile();
@@ -18,6 +20,20 @@ const mainContainer = ref();
 onMounted(() => {
   element.mainContainer = mainContainer.value;
 });
+
+const onScroll = (e: Event) => {
+  // 获取滚动的目标元素的高度和滚动的高度
+  const target = e.target as HTMLElement;
+  const scrollTop = target.scrollTop;
+  const scrollHeight = target.scrollHeight;
+  const clientHeight = target.clientHeight;
+
+  appStore.contentScrollHeight = scrollHeight;
+  appStore.contentScrollOnBottom = scrollTop + clientHeight >= scrollHeight
+  // 当前位置
+  appStore.contentScrollPosition = scrollTop;
+}
+
 </script>
 
 <template>
@@ -37,6 +53,7 @@ onMounted(() => {
     position="absolute"
     :style="userStore.logined ? 'margin-top: var(--header-height)' : ''"
     ref="mainContainer"
+    :on-scroll="onScroll"
   >
     <!-- <n-layout-sider
       v-if="userStore.logined && !isMobile"
diff --git a/src/stores/app.ts b/src/stores/app.ts
index 49e673c..a7d2560 100644
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@@ -5,5 +5,8 @@ export const useAppStore = defineStore("app", {
   persist: false,
   state: () => ({
     updating: false,
+    contentScrollHeight: 0,
+    contentScrollPosition: 0,
+    contentScrollOnBottom: false,
   }),
 });