feat: topic detail scroll title

src/language/en.ts

@@ -148,7 +148,7 @@ export default {
     help4: "The website's code is handwritten, and errors are inevitable.",
     help5: 'If you encounter any errors, please',
     contact: ' Contact Us.',
-    tags: 'Please input topic tags',
+    tags: 'Please input tags',
     hint: `Hint: (A single tag should be within 10 characters, choose at least one and up to 7 tags). You can enter text and press \`Enter\` to create a tag.`,
     hot: 'Popular Tags (Click to Select) : ',
     categories:

src/language/zh.ts

@@ -140,7 +140,7 @@ export default {
     default: '默认配置',
     essential: '基本配置',
     full: '全部配置',
-    tagsHint: '热门关键词提示',
+    tagsHint: '热门标签提示',
     refresh: '刷新页面生效',
     help1: '话题的标题长度需要在 1 到 40 字之间',
     help2: '您可以点击左侧的设置调整编辑器的模式',
@@ -148,9 +148,9 @@ export default {
     help4: '网站的代码是手写的，错误在所难免',
     help5: '如果您遇到错误，请',
     contact: ' 联系我们',
-    tags: '请输入话题的关键词',
-    hint: `提示：（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字后按下 ' Enter ' 创建关键词`,
-    hot: '热门关键词（点击选择）:',
+    tags: '请输入标签',
+    hint: `提示：（单个标签 10 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字后按下 ' Enter ' 创建标签`,
+    hot: '热门标签（点击选择）:',
     categories: '点击选择话题的分区（可多选）:',
     Galgame: 'Galgame',
     Technique: '技术交流',

src/views/topic/KUNGalgameTopicPage.vue

@@ -9,7 +9,6 @@ import {
   onBeforeMount,
   computed,
   watch,
-  onBeforeUnmount,
 } from 'vue'
 import { onBeforeRouteLeave, useRoute } from 'vue-router'
 import message from '@/components/alert/Message'
@@ -57,6 +56,8 @@ const repliesData = ref<TopicReply[]>([])
 const content = ref<HTMLElement>()
 // 滚动到某个话题时触发动画
 const isExecuteScrollToReplyAnimate = ref(false)
+// 页面滚动的距离
+const contentScrollHeight = ref(0)
 
 // 获取话题详情的函数
 const getTopic = async (): Promise<TopicDetail> => {
@@ -129,7 +130,7 @@ watch(
 )
 
 // 滚动事件处理函数
-const scrollHandler = async () => {
+const handelScroll = async () => {
   // 滚动到底部的处理逻辑
   if (isScrollAtBottom() && isLoading.value) {
     // 自动增加页数
@@ -155,6 +156,9 @@ const isScrollAtBottom = () => {
     const scrollTop = content.value.scrollTop
     const clientHeight = content.value.clientHeight
 
+    // 记录页面滚动的距离给子组件
+    contentScrollHeight.value = scrollTop
+
     // 使用误差范围来比较，因为 js 浮点数不精确
     const errorMargin = 1.007
     return Math.abs(scrollHeight - scrollTop - clientHeight) < errorMargin
@@ -171,22 +175,6 @@ onMounted(async () => {
 
   // 获取回复的数据
   repliesData.value = await getReplies()
-
-  // 获取滚动元素的引用
-  const element = content.value
-  // 获取到了则启动监听器，监听页面滚动行为
-  if (element) {
-    element.addEventListener('scroll', scrollHandler)
-  }
-})
-
-// 在组件卸载前，移除滚动事件监听器
-onBeforeUnmount(() => {
-  const element = content.value
-  // 如果获取到页面元素则销毁监听器
-  if (element) {
-    element.removeEventListener('scroll', scrollHandler)
-  }
 })
 
 /**
@@ -219,6 +207,7 @@ onBeforeMount(() => {
   <!-- 回复面板组件 -->
   <!-- 总容器 -->
   <div class="root">
+    <!-- 回复面板组件 -->
     <ReplyPanel />
 
     <!-- 下方可视内容区的容器 -->
@@ -227,7 +216,15 @@ onBeforeMount(() => {
       <Aside v-if="topicData?.tags" :tags="topicData.tags" />
 
       <!-- 内容区 -->
-      <div class="content" ref="content">
+      <div class="content" ref="content" @scroll="handelScroll">
+        <Transition
+          enter-active-class="animate__animated animate__fadeInDown animate__faster"
+        >
+          <!-- 滚动时的 title -->
+          <div class="title-scroll" v-if="contentScrollHeight > 400">
+            啊这可海星
+          </div>
+        </Transition>
         <Master v-if="topicData" :topicData="topicData" />
         <Reply
           v-if="repliesData"
@@ -278,6 +275,24 @@ onBeforeMount(() => {
   overflow-x: visible;
 }
 
+.title-scroll {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  min-height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 17px;
+  font-weight: bold;
+  color: var(--kungalgame-font-color-3);
+  background-color: var(--kungalgame-trans-white-5);
+  border: 1px solid var(--kungalgame-blue-1);
+  border-radius: 0 0 5px 5px;
+  backdrop-filter: blur(5px);
+  z-index: 1;
+}
+
 @media (max-width: 1000px) {
   .aside {
     display: none;

src/views/topic/components/Master.vue

@@ -98,6 +98,7 @@ const {
   /* TODO: */
   /* 楼主话题背景图 */
 }
+
 /* 楼主话题内容区的容器 */
 .content-container {
   flex-grow: 1;