【线上优化】 feat: 去除组件库的问吧相关的导航，改为自己写的，并且导航最多提示3次

src/components/common/PublishBox/index.vue

 <template>
-  <div class="bg-white p-6 mb-6 rounded-lg shadow-sm">
+  <div class="bg-white p-6 mb-6 rounded-lg shadow-sm relative">
+    <!-- 自实现的导览提示：UnoCSS 显眼样式 + 进入/离开过渡 -->
+    <Transition name="tour-hint">
+      <div
+        v-show="showAskTabTour"
+        role="alert"
+        class="absolute top-0 right-0 z-10 min-w-52 max-w-72 rounded-xl border-l-4 border-blue-500 bg-gradient-to-br from-blue-50 to-indigo-50 px-4 py-4 pr-10 shadow-xl shadow-blue-200/40 ring-2 ring-blue-200/80"
+      >
+        <button
+          type="button"
+          aria-label="关闭导览"
+          class="cursor-pointer absolute top-2 right-2 flex size-6 items-center justify-center rounded-lg text-slate-400 outline-none transition-colors hover:bg-slate-200/80 hover:text-slate-600"
+          @click="closeAskTabTour"
+        >
+          <el-icon :size="16"><IEpClose /></el-icon>
+        </button>
+        <p class="mb-3 text-base font-semibold leading-snug text-slate-800">在这里发布你的问题</p>
+        <span class="mb-3 block text-xs text-slate-500">操作指引</span>
+        <el-button
+          type="primary"
+          size="small"
+          class="rounded-lg font-medium shadow-sm"
+          @click="closeAskTabTour"
+        >
+          结束导览
+        </el-button>
+      </div>
+    </Transition>
     <div class="flex-1 bg-white rounded-lg border border-gray-200">
       <!-- 主输入区域 -->
 
@@ -117,10 +144,6 @@
       v-model:tagList="form.tagList"
       ref="selectTagsDialogRef"
     />
-
-    <el-tour v-model="openTour" :mask="false" placement="left-start" type="primary">
-      <el-tour-step :target="tagButtonRef?.$el" description="在这里选择标签" placement="top" />
-    </el-tour>
   </div>
 </template>
 <!-- 发布实践 或者 问吧 的 发布框 -->
@@ -138,7 +161,10 @@ import { useAnimate } from '@vueuse/core'
 import RichTextarea from '../RichTextarea/index.vue'
 import UploadImgIcon from '../UploadImgIcon/index.vue'
 import { push } from 'notivue'
+import { useTourStore } from '@/stores'
 
+const tourStore = useTourStore()
+const { showAskTabTour } = storeToRefs(tourStore)
 // 暂时只有 问吧 和 实践 需要发布框 这俩都需要实名
 type ArticleType = ArticleTypeEnum.QUESTION | ArticleTypeEnum.PRACTICE
 
@@ -184,8 +210,6 @@ const selectTagsDialogRef =
 
 // const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
 
-const openTour = ref(false)
-
 const disabledSubmit = computed(() => {
   return !form.value.title || !form.value.content
 })
@@ -236,6 +260,10 @@ const handleAddTag = () => {
   selectTagsDialogRef.value?.open()
 }
 
+const closeAskTabTour = () => {
+  showAskTabTour.value = false
+}
+
 const validateForm = () => {
   if (!form.value.mainTagId) {
     push.warning('请选择主标签')
@@ -277,4 +305,22 @@ const handlePublish = async (releaseStatus: ReleaseStatusTypeEnum) => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+/* 导览提示进入/离开过渡 */
+.tour-hint-enter-active,
+.tour-hint-leave-active {
+  transition:
+    opacity 0.25s ease,
+    transform 0.25s ease;
+}
+.tour-hint-enter-from,
+.tour-hint-leave-to {
+  opacity: 0;
+  transform: translateX(8px) scale(0.96);
+}
+.tour-hint-enter-to,
+.tour-hint-leave-from {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+</style>

src/components/common/RewardButton/index.vue

@@ -13,7 +13,6 @@ const { pageKey } = defineProps<{
 const activityStore = useActivityStore()
 // 调用接口让他跳出动画
 const handleClick = () => {
-  console.log('点击了')
   activityStore.triggerPageReward(pageKey)
 }
 </script>

src/stores/index.ts

@@ -7,3 +7,4 @@ export * from './question'
 export * from './yabi'
 export * from './onlineTime'
 export * from './activity'
+export * from './tour'

src/stores/tour.ts

+import { defineStore } from 'pinia'
+
+export const useTourStore = defineStore('tour', () => {
+  const showAskTabTour = ref(false)
+
+  const shouldShowAskTabTour = ref(false)
+  let hasHitTimes = Number(localStorage.getItem('hasHitAskTabTourTimes')) || 0
+  const MAX_HIT_TIMES = 3
+
+  const hitAskTabTour = async () => {
+    if (hasHitTimes >= MAX_HIT_TIMES) return
+
+    hasHitTimes++
+    localStorage.setItem('hasHitAskTabTourTimes', String(hasHitTimes))
+    showAskTabTour.value = true
+  }
+
+  return {
+    showAskTabTour,
+    shouldShowAskTabTour,
+    hitAskTabTour,
+  }
+})

src/views/homePage/askTab/index.vue

@@ -185,13 +185,6 @@
         </div>
       </template>
     </div>
-
-    <el-tour v-model="open">
-      <el-tour-step :target="publishBoxRef?.$el" placement="right">
-        <div>在这里发布你的问题</div>
-      </el-tour-step>
-      <template #indicators></template>
-    </el-tour>
     <CommentDialog ref="commentDialogRef" @commentSuccess="search" />
   </div>
 </template>
@@ -211,11 +204,13 @@ import ActionMore from '@/components/common/ActionMore/index.vue'
 import CommentDialog from '@/components/common/CommentDialog/index.vue'
 import { parseEmoji } from '@/utils/emoji'
 import { push } from 'notivue'
-const { fetchUserQestionNum } = useQuestionStore()
+import { useTourStore } from '@/stores'
+import { storeToRefs } from 'pinia'
 
-const route = useRoute()
+const { fetchUserQestionNum } = useQuestionStore()
+const tourStore = useTourStore()
+const { shouldShowAskTabTour } = storeToRefs(tourStore)
 const router = useRouter()
-const open = ref(false)
 const publishBoxRef = useTemplateRef('publishBoxRef')
 const commentDialogRef = useTemplateRef<typeof CommentDialog>('commentDialogRef')
 
@@ -324,28 +319,13 @@ const openNewPage = (path: string) => {
   router.push(path)
 }
 
-// 是否打开漫游
-watch(
-  () => route.fullPath,
-  async (newVal) => {
-    // 处理在当前页面跳转到当前页面的情况 onActivated 不会触发
-    if (newVal.includes('#tabsRef') && newVal.includes('?t')) {
-      await handleBackTop()
-      open.value = true
-    }
-  },
-)
 onActivated(async () => {
-  if (route.fullPath.includes('#tabsRef')) {
+  if (shouldShowAskTabTour.value) {
     await handleBackTop()
-    open.value = true
+    tourStore.hitAskTabTour()
   }
   refresh()
 })
-
-onMounted(() => {
-  console.log('父组件onmounted')
-})
 </script>
 <style lang="scss" scoped>
 .fadeCommentBox-enter-from {

src/views/homePage/index.vue

@@ -402,7 +402,10 @@ import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 // import LuckyWheel from '@/components/common/LuckyWheel/index.vue'
 import { RewardButtonEnum } from '@/constants'
 import RewardButton from '@/components/common/RewardButton/index.vue'
+import { useTourStore } from '@/stores'
 
+const tourStore = useTourStore()
+const { shouldShowAskTabTour } = storeToRefs(tourStore)
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isSmallerThanXl = breakpoints.smaller('xl')
 const route = useRoute()
@@ -420,7 +423,7 @@ const yabiStore = useYaBiStore()
 const { yabiData } = storeToRefs(yabiStore)
 const getThirdLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => {
   // console.log(route.fullPath, '三级路由首页')
-  // console.log(route.path, 11111111111111)
+  console.log(route.path, 11111111111111)
   // return route.fullPath // fullpath带有query参数
   return route.path
 }
@@ -543,11 +546,12 @@ const handleTask = async (item: TaskItemDto) => {
     // 发布评论
     push.info('快去文章评论区去发表评论吧~')
   } else if (item.svgName === 'topic_publish') {
-    if (route.path.includes('/homePage/askTab')) {
-      // 同一个页面 需要加事件触发 watch
-      router.push(`/homePage/askTab#tabsRef?t=${Date.now()}`)
+    if (route.fullPath.includes('/homePage/askTab')) {
+      await handleBackTop()
+      tourStore.hitAskTabTour()
     } else {
-      router.push(`/homePage/askTab#tabsRef`)
+      shouldShowAskTabTour.value = true
+      router.push(`/homePage/askTab`)
     }
   } else if (item.svgName === 'answer_ask') {
     // 回答问题
@@ -561,12 +565,13 @@ const handleTask = async (item: TaskItemDto) => {
   }
 }
 
-const publishTopic = () => {
-  if (route.path.includes('/homePage/askTab')) {
-    // 同一个页面 需要加事件触发 watch
-    router.push(`/homePage/askTab#tabsRef?t=${Date.now()}`)
+const publishTopic = async () => {
+  if (route.fullPath.includes('/homePage/askTab')) {
+    await handleBackTop()
+    tourStore.hitAskTabTour()
   } else {
-    router.push(`/homePage/askTab#tabsRef`)
+    shouldShowAskTabTour.value = true
+    router.push(`/homePage/askTab`)
   }
 }