From 5ff098ea21cb89b4ce78943db237a616f5ec6cdb Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Fri, 15 Aug 2025 10:31:53 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Tooltip=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/ToolTip.vue | 488 +++++++++++++++++++++++++++
 1 file changed, 488 insertions(+)
 create mode 100644 frontend_nuxt/components/ToolTip.vue

diff --git a/frontend_nuxt/components/ToolTip.vue b/frontend_nuxt/components/ToolTip.vue
new file mode 100644
index 000000000..174e9f578
--- /dev/null
+++ b/frontend_nuxt/components/ToolTip.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="tooltip-wrapper" ref="wrapperRef">
+    <!-- 触发器 -->
+    <div
+      class="tooltip-trigger"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @click="handleClick"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      :tabindex="focusable ? 0 : -1"
+    >
+      <slot />
+    </div>
+
+    <!-- 提示内容 -->
+    <Transition name="tooltip-fade">
+      <div
+        v-if="visible"
+        ref="tooltipRef"
+        class="tooltip-content"
+        :class="[
+          `tooltip-${placement}`,
+          { 'tooltip-dark': dark },
+          { 'tooltip-light': !dark }
+        ]"
+        :style="tooltipStyle"
+        role="tooltip"
+        :aria-describedby="ariaId"
+      >
+        <div class="tooltip-inner">
+          <slot name="content">
+            {{ content }}
+          </slot>
+        </div>
+        <div class="tooltip-arrow" :class="`tooltip-arrow-${placement}`"></div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, useId, watch } from 'vue'
+
+export default {
+  name: 'ToolTip',
+  props: {
+    // 提示内容
+    content: {
+      type: String,
+      default: ''
+    },
+    // 触发方式：hover、click、focus
+    trigger: {
+      type: String,
+      default: 'hover',
+      validator: (value) => ['hover', 'click', 'focus', 'manual'].includes(value)
+    },
+    // 位置：top、bottom、left、right
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
+    },
+    // 是否启用暗色主题
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    // 延迟显示时间（毫秒）
+    delay: {
+      type: Number,
+      default: 100
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可通过Tab键聚焦
+    focusable: {
+      type: Boolean,
+      default: true
+    },
+    // 偏移距离
+    offset: {
+      type: Number,
+      default: 8
+    },
+    // 最大宽度
+    maxWidth: {
+      type: [String, Number],
+      default: '200px'
+    }
+  },
+  emits: ['show', 'hide'],
+  setup(props, { emit }) {
+    const wrapperRef = ref(null)
+    const tooltipRef = ref(null)
+    const visible = ref(false)
+    const ariaId = ref(`tooltip-${useId()}`)
+    
+    let showTimer = null
+    let hideTimer = null
+
+    // 计算tooltip样式
+    const tooltipStyle = computed(() => {
+      const maxWidth = typeof props.maxWidth === 'number' 
+        ? `${props.maxWidth}px` 
+        : props.maxWidth
+      
+      return {
+        maxWidth,
+        zIndex: 2000
+      }
+    })
+
+    // 显示tooltip
+    const show = () => {
+      if (props.disabled) return
+      
+      clearTimeout(hideTimer)
+      showTimer = setTimeout(() => {
+        visible.value = true
+        emit('show')
+        nextTick(() => {
+          updatePosition()
+        })
+      }, props.delay)
+    }
+
+    // 隐藏tooltip
+    const hide = () => {
+      clearTimeout(showTimer)
+      hideTimer = setTimeout(() => {
+        visible.value = false
+        emit('hide')
+      }, 100)
+    }
+
+    // 立即显示（用于manual模式）
+    const showImmediately = () => {
+      if (props.disabled) return
+      clearTimeout(hideTimer)
+      clearTimeout(showTimer)
+      visible.value = true
+      emit('show')
+      nextTick(() => {
+        updatePosition()
+      })
+    }
+
+    // 立即隐藏（用于manual模式）
+    const hideImmediately = () => {
+      clearTimeout(showTimer)
+      clearTimeout(hideTimer)
+      visible.value = false
+      emit('hide')
+    }
+
+    // 更新位置
+    const updatePosition = () => {
+      if (!wrapperRef.value || !tooltipRef.value) return
+
+      const trigger = wrapperRef.value.querySelector('.tooltip-trigger')
+      const tooltip = tooltipRef.value
+      
+      if (!trigger) return
+
+      const triggerRect = trigger.getBoundingClientRect()
+      const tooltipRect = tooltip.getBoundingClientRect()
+      
+      let top = 0
+      let left = 0
+
+      switch (props.placement) {
+        case 'top':
+          top = triggerRect.top - tooltipRect.height - props.offset
+          left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+          break
+        case 'bottom':
+          top = triggerRect.bottom + props.offset
+          left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+          break
+        case 'left':
+          top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
+          left = triggerRect.left - tooltipRect.width - props.offset
+          break
+        case 'right':
+          top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
+          left = triggerRect.right + props.offset
+          break
+      }
+
+      // 边界检测
+      const padding = 8
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      if (left < padding) {
+        left = padding
+      } else if (left + tooltipRect.width > viewportWidth - padding) {
+        left = viewportWidth - tooltipRect.width - padding
+      }
+
+      if (top < padding) {
+        top = padding
+      } else if (top + tooltipRect.height > viewportHeight - padding) {
+        top = viewportHeight - tooltipRect.height - padding
+      }
+
+      tooltip.style.position = 'fixed'
+      tooltip.style.top = `${top}px`
+      tooltip.style.left = `${left}px`
+    }
+
+    // 事件处理
+    const handleMouseEnter = () => {
+      if (props.trigger === 'hover') {
+        show()
+      }
+    }
+
+    const handleMouseLeave = () => {
+      if (props.trigger === 'hover') {
+        hide()
+      }
+    }
+
+    const handleClick = () => {
+      if (props.trigger === 'click') {
+        if (visible.value) {
+          hide()
+        } else {
+          show()
+        }
+      }
+    }
+
+    const handleFocus = () => {
+      if (props.trigger === 'focus') {
+        show()
+      }
+    }
+
+    const handleBlur = () => {
+      if (props.trigger === 'focus') {
+        hide()
+      }
+    }
+
+    // 点击外部隐藏
+    const handleClickOutside = (event) => {
+      if (props.trigger === 'click' && wrapperRef.value && !wrapperRef.value.contains(event.target)) {
+        hide()
+      }
+    }
+
+    // 窗口大小改变时重新计算位置
+    const handleResize = () => {
+      if (visible.value) {
+        updatePosition()
+      }
+    }
+
+    // 监听禁用状态变化
+    watch(() => props.disabled, (newVal) => {
+      if (newVal && visible.value) {
+        hideImmediately()
+      }
+    })
+
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside)
+      window.addEventListener('resize', handleResize)
+      window.addEventListener('scroll', handleResize)
+    })
+
+    onBeforeUnmount(() => {
+      clearTimeout(showTimer)
+      clearTimeout(hideTimer)
+      document.removeEventListener('click', handleClickOutside)
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('scroll', handleResize)
+    })
+
+    return {
+      wrapperRef,
+      tooltipRef,
+      visible,
+      ariaId,
+      tooltipStyle,
+      handleMouseEnter,
+      handleMouseLeave,
+      handleClick,
+      handleFocus,
+      handleBlur,
+      // 暴露给父组件的方法
+      show: showImmediately,
+      hide: hideImmediately
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-trigger {
+  display: inline-block;
+  outline: none;
+}
+
+.tooltip-content {
+  position: fixed;
+  pointer-events: none;
+  z-index: 2000;
+}
+
+.tooltip-inner {
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* 亮色主题 */
+.tooltip-light .tooltip-inner {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--normal-border-color);
+}
+
+/* 暗色主题 */
+.tooltip-dark .tooltip-inner {
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+}
+
+/* 箭头基础样式 */
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* 顶部箭头 */
+.tooltip-top .tooltip-arrow-top {
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+}
+
+.tooltip-light.tooltip-top .tooltip-arrow-top {
+  border-color: var(--normal-border-color) transparent transparent transparent;
+}
+
+.tooltip-light.tooltip-top .tooltip-arrow-top::after {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: -6px;
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: var(--background-color) transparent transparent transparent;
+}
+
+.tooltip-dark.tooltip-top .tooltip-arrow-top {
+  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
+}
+
+/* 底部箭头 */
+.tooltip-bottom .tooltip-arrow-bottom {
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+}
+
+.tooltip-light.tooltip-bottom .tooltip-arrow-bottom {
+  border-color: transparent transparent var(--normal-border-color) transparent;
+}
+
+.tooltip-light.tooltip-bottom .tooltip-arrow-bottom::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: -6px;
+  border-width: 0 6px 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent var(--background-color) transparent;
+}
+
+.tooltip-dark.tooltip-bottom .tooltip-arrow-bottom {
+  border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
+}
+
+/* 左侧箭头 */
+.tooltip-left .tooltip-arrow-left {
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+}
+
+.tooltip-light.tooltip-left .tooltip-arrow-left {
+  border-color: transparent transparent transparent var(--normal-border-color);
+}
+
+.tooltip-light.tooltip-left .tooltip-arrow-left::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: -7px;
+  border-width: 6px 0 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--background-color);
+}
+
+.tooltip-dark.tooltip-left .tooltip-arrow-left {
+  border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
+}
+
+/* 右侧箭头 */
+.tooltip-right .tooltip-arrow-right {
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+}
+
+.tooltip-light.tooltip-right .tooltip-arrow-right {
+  border-color: transparent var(--normal-border-color) transparent transparent;
+}
+
+.tooltip-light.tooltip-right .tooltip-arrow-right::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: 1px;
+  border-width: 6px 6px 6px 0;
+  border-style: solid;
+  border-color: transparent var(--background-color) transparent transparent;
+}
+
+.tooltip-dark.tooltip-right .tooltip-arrow-right {
+  border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
+}
+
+/* 过渡动画 */
+.tooltip-fade-enter-active,
+.tooltip-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.tooltip-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.tooltip-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .tooltip-inner {
+    padding: 6px 10px;
+    font-size: 13px;
+    max-width: 250px;
+  }
+}
+
+/* 键盘导航样式 */
+.tooltip-trigger:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+</style>

From ba073b71a611e024507b3990bd03824e2bd49052 Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Fri, 15 Aug 2025 10:37:51 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=9C=A8=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=92=8C=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=E6=B7=BB=E5=8A=A0=E5=8F=91=E5=B8=96=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A0=87=E9=A2=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/HeaderComponent.vue | 19 +++++++++++++++++++
 frontend_nuxt/components/MenuComponent.vue   | 18 +++++++++---------
 frontend_nuxt/pages/index.vue                | 12 +++---------
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index d1770fd1d..96e22905c 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -24,6 +24,16 @@
           <div v-if="isMobile" class="search-icon" @click="search">
             <i class="fas fa-search"></i>
           </div>
+
+          <ToolTip
+            content="发帖"
+            placement="bottom"
+          >
+            <div class="new-post-icon" @click="goToNewPost">
+              <i class="fas fa-edit"></i>
+            </div>
+          </ToolTip>
+
           <DropdownMenu ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
@@ -113,6 +123,10 @@ const goToLogout = () => {
   navigateTo('/login', { replace: true })
 }
 
+const goToNewPost = () => {
+  navigateTo('/new-post', { replace: false })
+}
+
 const headerMenuItems = computed(() => [
   { text: '设置', onClick: goToSettings },
   { text: '个人主页', onClick: goToProfile },
@@ -275,6 +289,11 @@ onMounted(async () => {
   cursor: pointer;
 }
 
+.new-post-icon {
+  font-size: 18px;
+  cursor: pointer;
+}
+
 @media (max-width: 1200px) {
   .header-content {
     padding-left: 15px;
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index ba9a4af34..4a3fc57bc 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -7,6 +7,15 @@
             <i class="menu-item-icon fas fa-hashtag"></i>
             <span class="menu-item-text">话题</span>
           </NuxtLink>
+          <NuxtLink
+            class="menu-item"
+            exact-active-class="selected"
+            to="/new-post"
+            @click="handleItemClick"
+          >
+            <i class="menu-item-icon fas fa-edit"></i>
+            <span class="menu-item-text">发帖</span>
+          </NuxtLink>
           <NuxtLink
             class="menu-item"
             exact-active-class="selected"
@@ -47,15 +56,6 @@
             <i class="menu-item-icon fas fa-chart-line"></i>
             <span class="menu-item-text">站点统计</span>
           </NuxtLink>
-          <NuxtLink
-            class="menu-item"
-            exact-active-class="selected"
-            to="/new-post"
-            @click="handleItemClick"
-          >
-            <i class="menu-item-icon fas fa-edit"></i>
-            <span class="menu-item-text">发帖</span>
-          </NuxtLink>
         </div>
 
         <div class="menu-section">
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index 595efb726..a58107ee7 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="home-page">
     <div v-if="!isMobile" class="search-container">
-      <div class="search-title">一切可能，从此刻启航</div>
-      <div class="search-subtitle">
-        愿你在此遇见灵感与共鸣。若有疑惑，欢迎发问，亦可在知识的海洋中搜寻答案。
-      </div>
+      <div class="search-title">一切可能，从此刻启航，在此遇见灵感与共鸣</div>
       <SearchDropdown />
     </div>
 
@@ -371,8 +368,8 @@ const sanitizeDescription = (text) => stripMarkdown(text)
 }
 
 .search-container {
-  margin-top: 100px;
-  padding: 20px;
+  margin-top: 32px;
+  padding: 20px 20px 32px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -384,9 +381,6 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   font-weight: bold;
 }
 
-.search-subtitle {
-  font-size: 16px;
-}
 
 .loading-container {
   display: flex;

From 24cbed2edaa7ba84f30a4eab0cfc47057025ce8c Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Fri, 15 Aug 2025 10:59:29 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=91=E5=B8=96=E6=82=AC=E6=B5=AE=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/app.vue                        | 34 ++++++++++++++++++--
 frontend_nuxt/components/HeaderComponent.vue |  2 ++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend_nuxt/app.vue b/frontend_nuxt/app.vue
index 3c271e589..2e7c43954 100644
--- a/frontend_nuxt/app.vue
+++ b/frontend_nuxt/app.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+
     <div class="header-container">
       <HeaderComponent
         ref="header"
@@ -9,12 +10,17 @@
     </div>
 
     <div class="main-container">
+   
       <div class="menu-container" v-click-outside="handleMenuOutside">
         <MenuComponent :visible="!hideMenu && menuVisible" @item-click="menuVisible = false" />
       </div>
       <div class="content" :class="{ 'menu-open': menuVisible && !hideMenu }">
         <NuxtPage keepalive />
       </div>
+ 
+      <div v-if='!menuVisible && route.path !== "/new-post"'  class="new-post-icon" @click="goToNewPost">
+        <i class="fas fa-edit"></i>
+      </div>
     </div>
     <GlobalPopups />
   </div>
@@ -23,8 +29,8 @@
 <script>
 import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
-
 import GlobalPopups from '~/components/GlobalPopups.vue'
+import { useIsMobile } from '~/utils/screen'
 
 export default {
   name: 'App',
@@ -32,6 +38,8 @@ export default {
   setup() {
     const isMobile = useIsMobile()
     const menuVisible = ref(!isMobile.value)
+    const route = useRoute()
+
     const hideMenu = computed(() => {
       return [
         '/login',
@@ -65,12 +73,16 @@ export default {
       }
     }
 
-    return { menuVisible, hideMenu, handleMenuOutside, header }
+    const goToNewPost = () => { 
+      navigateTo('/new-post', { replace: false })
+    }
+
+    return { menuVisible, hideMenu, handleMenuOutside, header, route, goToNewPost }
   },
 }
 </script>
 <style src="~/assets/global.css"></style>
-<style>
+<style scoped>
 .header-container {
   position: fixed;
   top: 0;
@@ -103,6 +115,22 @@ export default {
   margin: 0 auto;
 }
 
+.new-post-icon {
+  background-color: var(--primary-color);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: fixed;
+  bottom: 40px;
+  right: 20px;
+  font-size: 20px;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 768px) {
   .content,
   .content.menu-open {
diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 96e22905c..866256bfc 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -26,6 +26,7 @@
           </div>
 
           <ToolTip
+            v-if="!isMobile"
             content="发帖"
             placement="bottom"
           >
@@ -62,6 +63,7 @@
 import { ClientOnly } from '#components'
 import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
+import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'