fix: refactor and fix post search page to support tag and category se…

…arch
auroral-ui · Aug 23, 2023 · 89e35fb · 89e35fb
1 parent c3b146c
commit 89e35fb
Show file tree

Hide file tree

Showing 11 changed files with 254 additions and 142 deletions.
diff --git a/src/components/ArticleCard/src/Article.vue b/src/components/ArticleCard/src/Article.vue
@@ -32,7 +32,10 @@
               <span>{{ t('settings.featured') }}</span>
             </span>
           </b>
-          <b v-if="post.categories && post.categories.length > 0">
+          <b
+            v-if="post.categories && post.categories.length > 0"
+            @click="navigateToCategory(post.categories[0].slug)"
+          >
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
@@ -43,7 +46,11 @@
 
         <span class="flex flex-wrap">
           <ul v-if="post.tags && post.tags.length > 0">
-            <li v-for="tag in post.min_tags" :key="tag.slug">
+            <li
+              v-for="tag in post.min_tags"
+              :key="tag.slug"
+              @click="navigateToTag(tag.slug)"
+            >
               <em># </em><span>{{ tag.name }}</span>
             </li>
           </ul>
@@ -118,6 +125,7 @@ import { useAppStore } from '@/stores/app'
 import { computed, defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'ObFeatureList',
@@ -129,6 +137,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     const appStore = useAppStore()
     const { t } = useI18n()
 
@@ -137,6 +146,14 @@ export default defineComponent({
       window.location.href = link
     }
 
+    const navigateToTag = (slug: string) => {
+      router.push({ name: 'post-search', query: { tag: slug } })
+    }
+
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     return {
       avatarClasses: computed(() => ({
         'hover:opacity-50 cursor-pointer': true,
@@ -146,6 +163,8 @@ export default defineComponent({
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),
       post: computed(() => props.data),
+      navigateToTag,
+      navigateToCategory,
       handleAuthorClick,
       t
     }

diff --git a/src/components/ArticleCard/src/HorizontalArticle.vue b/src/components/ArticleCard/src/HorizontalArticle.vue
@@ -34,7 +34,10 @@
               </span>
             </span>
           </b>
-          <b v-if="post.categories && post.categories.length > 0">
+          <b
+            v-if="post.categories && post.categories.length > 0"
+            @click="navigateToCategory(post.categories[0].slug)"
+          >
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
@@ -49,6 +52,7 @@
               <li
                 v-for="index in numberOfTags"
                 :key="post.tags[index - 1].slug"
+                @click="navigateToTag(post.tags[index - 1].slug)"
               >
                 <em># </em><span>{{ post.tags[index - 1].name }}</span>
               </li>
@@ -124,6 +128,7 @@ import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useRouter } from 'vue-router'
 
 enum TagLimit {
   forMobile = '2',
@@ -140,6 +145,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     const appStore = useAppStore()
     const commonStore = useCommonStore()
     const { t } = useI18n()
@@ -150,6 +156,14 @@ export default defineComponent({
       window.location.href = link
     }
 
+    const navigateToTag = (slug: string) => {
+      router.push({ name: 'post-search', query: { tag: slug } })
+    }
+
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     return {
       avatarClass: computed(() => ({
         'hover:opacity-50 cursor-pointer': true,
@@ -166,6 +180,8 @@ export default defineComponent({
         }
         return tagCount > TagLimit.default ? TagLimit.default : tagCount
       }),
+      navigateToTag,
+      navigateToCategory,
       post,
       handleAuthorClick,
       t

diff --git a/src/components/Sidebar/src/CategoryBox.vue b/src/components/Sidebar/src/CategoryBox.vue
@@ -1,35 +1,22 @@
 <template>
-  <div class="sidebar-box">
+  <div :class="sidebarBoxClasses">
     <SubTitle :title="'titles.category_list'" icon="category" />
     <ul class="flex justify-event flex-wrap gap-2 pt-2 cursor-pointer">
       <template v-if="categories.length > 0">
         <li
           class="flex flex-row items-center hover:opacity-50"
           v-for="category in categories"
           :key="category.slug"
+          @click="navigateToCategory(category.slug)"
         >
           <span
-            class="
-              bg-ob-deep-900
-              text-center
-              px-3
-              py-1
-              rounded-tl-md rounded-bl-md
-              text-sm
-            "
+            class="bg-ob-deep-900 text-center px-3 py-1 rounded-tl-md rounded-bl-md text-sm"
+            :style="gradientBackground(category.slug === activeCategory)"
           >
             {{ category.name }}
           </span>
           <b
-            class="
-              bg-ob-deep-900
-              text-ob text-center
-              px-2
-              py-1
-              rounded-tr-md rounded-br-md
-              text-sm
-              opacity-70
-            "
+            class="bg-ob-deep-900 text-ob text-center px-2 py-1 rounded-tr-md rounded-br-md text-sm opacity-70"
           >
             {{ category.count }}
           </b>
@@ -47,28 +34,54 @@ import { computed, defineComponent, onMounted, ref } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { useCategoryStore } from '@/stores/category'
 import { useAppStore } from '@/stores/app'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'ObArticleBox',
   components: { SubTitle },
-  setup() {
+  props: {
+    sidebarBox: {
+      type: Boolean,
+      default: true
+    },
+    activeCategory: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
     const appStore = useAppStore()
     const categoryStore = useCategoryStore()
     const loading = ref(true)
+    const router = useRouter()
 
     const fetchData = async () => {
       await categoryStore.fetchCategories()
       loading.value = false
     }
 
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     onMounted(fetchData)
 
     return {
       loading,
+      navigateToCategory,
+      sidebarBoxClasses: computed(() => ({
+        'sidebar-box': props.sidebarBox
+      })),
       categories: computed(() => categoryStore.categories),
-      gradientBackground: computed(() => {
-        return { background: appStore.themeConfig.theme.header_gradient_css }
-      })
+      gradientBackground: (active: boolean) => {
+        return active
+          ? {
+              background: appStore.themeConfig.theme.header_gradient_css,
+              color: '#fff',
+              opacity: 1
+            }
+          : {}
+      }
     }
   }
 })

diff --git a/src/components/Sidebar/src/TagBox.vue b/src/components/Sidebar/src/TagBox.vue
@@ -1,48 +1,43 @@
 <template>
-  <Sticky
-    :stickyTop="32 + 81"
-    :endingElId="endEleId"
-    dynamicElClass="#sticky-tag-box"
-  >
-    <div id="sticky-tag-box" class="sidebar-box">
-      <SubTitle :title="'titles.tag_list'" icon="tag" />
-      <TagList :class="tagBoxClasses">
-        <template v-if="tags && tags.length > 0">
-          <TagItem
-            v-for="tag in tags"
-            :key="tag.slug"
-            :name="tag.name"
-            :slug="tag.slug"
-            :count="tag.count"
-            size="small"
-          />
-          <template v-if="!expand">
-            <div class="more-cover"></div>
-            <div class="more-btn" @click="expandBox">
-              <SvgIcon
-                class="font-bold"
-                icon-class="more"
-                fill="currentColor"
-                stroke="none"
-                height="1.5rem"
-                width="1.5rem"
-              />
-              <span>{{ t('settings.more-tags') }}</span>
-            </div>
-          </template>
-        </template>
-        <template v-else-if="tags">
-          <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
-        </template>
-        <template v-else>
-          <div class="flex flex-row justify-center items-center">
-            <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
-            {{ t('settings.empty-tag') }}
+  <div id="sticky-tag-box" :class="sidebarBoxClasses">
+    <SubTitle :title="'titles.tag_list'" icon="tag" />
+    <TagList :class="tagBoxClasses">
+      <template v-if="tags && tags.length > 0">
+        <TagItem
+          v-for="tag in tags"
+          :key="tag.slug"
+          :name="tag.name"
+          :slug="tag.slug"
+          :count="tag.count"
+          :active="!!activeTag && tag.slug === activeTag"
+          size="small"
+        />
+        <template v-if="!expand">
+          <div class="more-cover"></div>
+          <div class="more-btn" @click="expandBox">
+            <SvgIcon
+              class="font-bold"
+              icon-class="more"
+              fill="currentColor"
+              stroke="none"
+              height="1.5rem"
+              width="1.5rem"
+            />
+            <span>{{ t('settings.more-tags') }}</span>
           </div>
         </template>
-      </TagList>
-    </div>
-  </Sticky>
+      </template>
+      <template v-else-if="tags">
+        <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
+      </template>
+      <template v-else>
+        <div class="flex flex-row justify-center items-center">
+          <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
+          {{ t('settings.empty-tag') }}
+        </div>
+      </template>
+    </TagList>
+  </div>
 </template>
 
 <script lang="ts">
@@ -52,14 +47,18 @@ import { useTagStore } from '@/stores/tag'
 import { TagList, TagItem } from '@/components/Tag'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import Sticky from '@/components/Sticky.vue'
-import { useAppStore } from '@/stores/app'
 
 export default defineComponent({
   name: 'ObTag',
-  components: { SubTitle, TagList, TagItem, SvgIcon, Sticky },
-  setup() {
-    const appStore = useAppStore()
+  components: { SubTitle, TagList, TagItem, SvgIcon },
+  props: {
+    sidebarBox: {
+      type: Boolean,
+      default: true
+    },
+    activeTag: String
+  },
+  setup(props) {
     const tagStore = useTagStore()
     const { t } = useI18n()
     const expand = ref<boolean>(false)
@@ -75,11 +74,6 @@ export default defineComponent({
     onMounted(fetchData)
 
     return {
-      endEleId: computed(() =>
-        appStore.themeConfig.footerLinks.data.length > 0
-          ? 'footer-link'
-          : 'footer'
-      ),
       tags: computed(() => {
         if (tagStore.isLoaded && tagStore.tags.length === 0) return null
         return tagStore.tags
@@ -89,6 +83,9 @@ export default defineComponent({
         'max-h-98': !expand.value,
         'h-full': expand.value
       })),
+      sidebarBoxClasses: computed(() => ({
+        'sidebar-box': props.sidebarBox
+      })),
       expandBox,
       expand,
       t