From f61757318d2faef51f467697c0dcb9cabddd557d Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Thu, 10 Jul 2025 13:21:26 +0800
Subject: [PATCH] Add ArticleCategory component and update tag/category links

---
 .../src/components/ArticleCategory.vue        | 58 +++++++++++++++++++
 open-isle-cli/src/components/ArticleTags.vue  | 12 ++++
 open-isle-cli/src/views/HomePageView.vue      | 12 +++-
 open-isle-cli/src/views/PostPageView.vue      |  5 +-
 4 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 open-isle-cli/src/components/ArticleCategory.vue

diff --git a/open-isle-cli/src/components/ArticleCategory.vue b/open-isle-cli/src/components/ArticleCategory.vue
new file mode 100644
index 000000000..af1b55ac1
--- /dev/null
+++ b/open-isle-cli/src/components/ArticleCategory.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="article-category-container" v-if="category">
+    <div class="article-info-item" @click="gotoCategory">
+      <img
+        v-if="category.smallIcon"
+        class="article-info-item-img"
+        :src="category.smallIcon"
+        :alt="category.name"
+      />
+      <div class="article-info-item-text">{{ category.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useRouter } from 'vue-router'
+
+export default {
+  name: 'ArticleCategory',
+  props: {
+    category: { type: Object, default: null }
+  },
+  setup(props) {
+    const router = useRouter()
+    const gotoCategory = () => {
+      if (!props.category) return
+      const value = encodeURIComponent(props.category.id ?? props.category.name)
+      router.push({ path: '/', query: { category: value } })
+    }
+    return { gotoCategory }
+  }
+}
+</script>
+
+<style scoped>
+.article-category-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.article-info-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  font-size: 14px;
+  padding: 2px 4px;
+  background-color: var(--article-info-background-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.article-info-item-img {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/open-isle-cli/src/components/ArticleTags.vue b/open-isle-cli/src/components/ArticleTags.vue
index 14a802347..9677783e1 100644
--- a/open-isle-cli/src/components/ArticleTags.vue
+++ b/open-isle-cli/src/components/ArticleTags.vue
@@ -4,6 +4,7 @@
       class="article-info-item"
       v-for="tag in tags"
       :key="tag.id || tag.name"
+      @click="gotoTag(tag)"
     >
       <img
         v-if="tag.smallIcon"
@@ -17,10 +18,20 @@
 </template>
 
 <script>
+import { useRouter } from 'vue-router'
+
 export default {
   name: 'ArticleTags',
   props: {
     tags: { type: Array, default: () => [] }
+  },
+  setup() {
+    const router = useRouter()
+    const gotoTag = tag => {
+      const value = encodeURIComponent(tag.id ?? tag.name)
+      router.push({ path: '/', query: { tags: value } })
+    }
+    return { gotoTag }
   }
 }
 </script>
@@ -43,6 +54,7 @@ export default {
   padding: 2px 4px;
   background-color: var(--article-info-background-color);
   border-radius: 4px;
+  cursor: pointer;
 }
 
 .article-info-item-img {
diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index c5d2ad1e0..462462668 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -60,7 +60,7 @@
             </router-link>
             <div class="article-item-description main-item">{{ sanitizeDescription(article.description) }}</div>
             <div class="article-info-container main-item">
-              <ArticleTags :tags="[article.category]" />
+              <ArticleCategory :category="article.category" />
               <ArticleTags :tags="article.tags" />
             </div>
           </div>
@@ -104,6 +104,7 @@ import TimeManager from '../utils/time'
 import CategorySelect from '../components/CategorySelect.vue'
 import TagSelect from '../components/TagSelect.vue'
 import ArticleTags from '../components/ArticleTags.vue'
+import ArticleCategory from '../components/ArticleCategory.vue'
 import SearchDropdown from '../components/SearchDropdown.vue'
 import { hatch } from 'ldrs'
 hatch.register()
@@ -115,15 +116,20 @@ export default {
     CategorySelect,
     TagSelect,
     ArticleTags,
+    ArticleCategory,
     SearchDropdown
   },
   setup() {
     const route = useRoute()
-    const selectedCategory = ref(route.query.category || '')
+    const selectedCategory = ref(route.query.category ? decodeURIComponent(route.query.category) : '')
     const selectedTags = ref([])
     if (route.query.tags) {
       const t = Array.isArray(route.query.tags) ? route.query.tags.join(',') : route.query.tags
-      selectedTags.value = t.split(',').filter(v => v).map(v => isNaN(v) ? v : Number(v))
+      selectedTags.value = t
+        .split(',')
+        .filter(v => v)
+        .map(v => decodeURIComponent(v))
+        .map(v => (isNaN(v) ? v : Number(v)))
     }
     const isLoadingPosts = ref(false)
     const topics = ref(['最新', '排行榜' /*, '热门', '类别'*/])
diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index 683da5662..6205f80de 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -7,7 +7,7 @@
       <div class="article-title-container">
         <div class="article-title">{{ title }}</div>
         <div class="article-info-container">
-          <ArticleTags :tags="[category]" />
+          <ArticleCategory :category="category" />
           <ArticleTags :tags="tags" />
         </div>
       </div>
@@ -78,6 +78,7 @@ import CommentItem from '../components/CommentItem.vue'
 import CommentEditor from '../components/CommentEditor.vue'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import ArticleTags from '../components/ArticleTags.vue'
+import ArticleCategory from '../components/ArticleCategory.vue'
 import ReactionsGroup from '../components/ReactionsGroup.vue'
 import { renderMarkdown } from '../utils/markdown'
 import { API_BASE_URL, toast } from '../main'
@@ -89,7 +90,7 @@ hatch.register()
 
 export default {
   name: 'PostPageView',
-  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags, ReactionsGroup },
+  components: { CommentItem, CommentEditor, BaseTimeline, ArticleTags, ArticleCategory, ReactionsGroup },
   setup() {
     const route = useRoute()
     const postId = route.params.id