From 17e4862eaf2baf7d2374aecbb765a07e158fca9f Mon Sep 17 00:00:00 2001
From: "wang.shun" <shun.wang@yangtze.co.jp>
Date: Thu, 18 Sep 2025 15:03:50 +0800
Subject: [PATCH] =?UTF-8?q?menu=E8=BF=BD=E5=8A=A0=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/MenuComponent.vue | 28 +++++++++++++++++++++-
 frontend_nuxt/composables/postFilter.ts    |  4 ++++
 frontend_nuxt/pages/index.vue              | 12 ++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 frontend_nuxt/composables/postFilter.ts

diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index e7d977306..e68544318 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -86,6 +86,7 @@
               v-for="c in categoryData"
               :key="c.id"
               class="section-item"
+              :class="{ selected: isCategorySelected(c.id) }"
               @click="gotoCategory(c)"
             >
               <template v-if="c.smallIcon || c.icon">
@@ -115,7 +116,14 @@
             <div v-if="isLoadingTag" class="menu-loading-container">
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
-            <div v-else v-for="t in tagData" :key="t.id" class="section-item" @click="gotoTag(t)">
+            <div 
+                v-else 
+                v-for="t in tagData" 
+                :key="t.id" 
+                class="section-item" 
+                :class="{ selected: isTagSelected(t.id) }" 
+                @click="gotoTag(t)"
+              >
               <BaseImage
                 v-if="isImageIcon(t.smallIcon || t.icon)"
                 :src="t.smallIcon || t.icon"
@@ -154,8 +162,21 @@ import { authState, fetchCurrentUser } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
 import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
+import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
 
 const isMobile = useIsMobile()
+// 判断当前分类是否被选中
+const isCategorySelected = (id) => {
+  return id === selectedCategoryGlobal.value
+}
+
+// 判断当前标签是否被选中
+const isTagSelected = (id) => {
+  const selected = Array.isArray(selectedTagsGlobal.value)
+    ? selectedTagsGlobal.value
+    : [selectedTagsGlobal.value]
+  return selected.includes(id)
+}
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -415,6 +436,11 @@ const gotoTag = (t) => {
 .section-item:hover {
   background-color: var(--menu-selected-background-color-hover);
 }
+.section-item.selected {
+  font-weight: bold;
+  background-color: var(--menu-selected-background-color);
+}
+
 
 .section-item-text-count {
   font-size: 12px;
diff --git a/frontend_nuxt/composables/postFilter.ts b/frontend_nuxt/composables/postFilter.ts
new file mode 100644
index 000000000..f2adaad5b
--- /dev/null
+++ b/frontend_nuxt/composables/postFilter.ts
@@ -0,0 +1,4 @@
+import { ref } from 'vue'
+// 全局存储选中的分类和标签
+export const selectedCategoryGlobal  = ref('')
+export const selectedTagsGlobal  = ref([])
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index a3e7989d7..a6327dc61 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/frontend_nuxt/pages/index.vue
@@ -139,6 +139,7 @@ import { getToken } from '~/utils/auth'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
 import TimeManager from '~/utils/time'
+import { selectedCategoryGlobal, selectedTagsGlobal } from '~/composables/postFilter'
 useHead({
   title: 'OpenIsle - 全面开源的自由社区',
   meta: [
@@ -204,6 +205,10 @@ onMounted(() => {
   if (saved) {
     selectedTopic.value = saved
   }
+
+  // 和menu同步状态
+  selectedCategoryGlobal.value = selectedCategory.value
+  selectedTagsGlobal.value = selectedTags.value
 })
 
 /** 路由变更时同步筛选 **/
@@ -372,6 +377,13 @@ const ioKey = computed(() => asyncKey.value.join('::'))
 
 /** 其他工具函数 **/
 const sanitizeDescription = (text) => stripMarkdown(text)
+
+// 页面选项同步到全局状态
+watch([selectedCategory, selectedTags], ([newCategory, newTags]) => {
+  selectedCategoryGlobal.value = newCategory
+  selectedTagsGlobal.value = newTags
+})
+
 </script>
 
 <style scoped>