From a29bf7d860ed9344b4a43e4e2b8ac0501b754fcc Mon Sep 17 00:00:00 2001
From: CH-122 <1521930938@qq.com>
Date: Tue, 19 Aug 2025 16:52:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20useReactionTypes?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=20/reaction-types=20=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E9=87=8D=E5=A4=8D=E8=B0=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/ReactionsGroup.vue   | 32 +++---------
 frontend_nuxt/composables/useReactionTypes.js | 52 +++++++++++++++++++
 2 files changed, 60 insertions(+), 24 deletions(-)
 create mode 100644 frontend_nuxt/composables/useReactionTypes.js

diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue
index 068679daa..d73861bf2 100644
--- a/frontend_nuxt/components/ReactionsGroup.vue
+++ b/frontend_nuxt/components/ReactionsGroup.vue
@@ -51,6 +51,10 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
+import { useReactionTypes   } from '~/composables/useReactionTypes'
+
+const { reactionTypes, initialize } = useReactionTypes()
+
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const emit = defineEmits(['update:modelValue'])
@@ -66,30 +70,6 @@ watch(
 )
 
 const reactions = ref(props.modelValue)
-const reactionTypes = ref([])
-
-let cachedTypes = null
-const fetchTypes = async () => {
-  if (cachedTypes) return cachedTypes
-  try {
-    const token = getToken()
-    const res = await fetch(`${API_BASE_URL}/api/reaction-types`, {
-      headers: { Authorization: token ? `Bearer ${token}` : '' },
-    })
-    if (res.ok) {
-      cachedTypes = await res.json()
-    } else {
-      cachedTypes = []
-    }
-  } catch {
-    cachedTypes = []
-  }
-  return cachedTypes
-}
-
-onMounted(async () => {
-  reactionTypes.value = await fetchTypes()
-})
 
 const counts = computed(() => {
   const c = {}
@@ -200,6 +180,10 @@ const toggleReaction = async (type) => {
     toast.error('操作失败')
   }
 }
+
+onMounted(async () => {
+  await initialize()
+})
 </script>
 
 <style>
diff --git a/frontend_nuxt/composables/useReactionTypes.js b/frontend_nuxt/composables/useReactionTypes.js
new file mode 100644
index 000000000..0d9350c9c
--- /dev/null
+++ b/frontend_nuxt/composables/useReactionTypes.js
@@ -0,0 +1,52 @@
+import { ref } from 'vue'
+
+const reactionTypes = ref([])
+let isLoading = false
+let isInitialized = false
+
+export function useReactionTypes() {
+  const config = useRuntimeConfig()
+  const API_BASE_URL = config.public.apiBaseUrl
+
+  const fetchReactionTypes = async () => {
+    if (isInitialized || isLoading) {
+      reactionTypes.value = [...(window.reactionTypes || [])]
+      return reactionTypes.value
+    }
+    
+    isLoading = true
+    try {
+      const token = getToken()
+      const res = await fetch(`${API_BASE_URL}/api/reaction-types`, {
+        headers: { Authorization: token ? `Bearer ${token}` : '' },
+      })
+      if (res.ok) {
+        reactionTypes.value = await res.json()
+        window.reactionTypes = [...reactionTypes.value]
+        isInitialized = true
+      } else {
+        reactionTypes.value = []
+      }
+    } catch (error) {
+      console.error('Failed to fetch reaction types:', error)
+      reactionTypes.value = []
+    } finally {
+      isLoading = false
+    }
+    return reactionTypes.value
+  }
+
+  const initialize = async () => {
+    if (!isInitialized) {
+      await fetchReactionTypes()
+    }
+    return reactionTypes.value
+  }
+
+  return {
+    reactionTypes: readonly(reactionTypes),
+    fetchReactionTypes,
+    initialize,
+    isInitialized: readonly(isInitialized)
+  }
+}
\ No newline at end of file