From f900a45c81390f124814a901a871907031dd93ad Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Fri, 1 Aug 2025 11:18:06 +0800
Subject: [PATCH] feat: cache menu categories and tags

---
 .../src/components/MenuComponent.vue          | 78 +++++++++++++------
 1 file changed, 53 insertions(+), 25 deletions(-)

diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue
index 547f16b2c..d6bf2b8e4 100644
--- a/open-isle-cli/src/components/MenuComponent.vue
+++ b/open-isle-cli/src/components/MenuComponent.vue
@@ -172,33 +172,61 @@ export default {
       await updateCount()
     })
 
-    try {
-      this.isLoadingCategory = true
-      fetch(`${API_BASE_URL}/api/categories`).then(
-        res => {
-          if (res.ok) {
-            res.json().then(data => {
-              this.categories = data.slice(0, 10)
-            })
-          }
-          this.isLoadingCategory = false
-        }
-      )
-    } catch { /* ignore */ }
+    const CAT_CACHE_KEY = 'menu-categories'
+    const TAG_CACHE_KEY = 'menu-tags'
 
-    try {
-      this.isLoadingTag = true
-      fetch(`${API_BASE_URL}/api/tags?limit=10`).then(
-        res => {
-          if (res.ok) {
-            res.json().then(data => {
-              this.tags = data
-            })
-          }
-          this.isLoadingTag = false
+    const cachedCategories = localStorage.getItem(CAT_CACHE_KEY)
+    if (cachedCategories) {
+      try {
+        this.categories = JSON.parse(cachedCategories)
+      } catch { /* ignore */ }
+    }
+
+    const cachedTags = localStorage.getItem(TAG_CACHE_KEY)
+    if (cachedTags) {
+      try {
+        this.tags = JSON.parse(cachedTags)
+      } catch { /* ignore */ }
+    }
+
+    const fetchCategories = () => {
+      fetch(`${API_BASE_URL}/api/categories`).then(res => {
+        if (res.ok) {
+          res.json().then(data => {
+            this.categories = data.slice(0, 10)
+            localStorage.setItem(CAT_CACHE_KEY, JSON.stringify(this.categories))
+          })
         }
-      )
-    } catch { /* ignore */ }
+        this.isLoadingCategory = false
+      })
+    }
+
+    const fetchTags = () => {
+      fetch(`${API_BASE_URL}/api/tags?limit=10`).then(res => {
+        if (res.ok) {
+          res.json().then(data => {
+            this.tags = data
+            localStorage.setItem(TAG_CACHE_KEY, JSON.stringify(this.tags))
+          })
+        }
+        this.isLoadingTag = false
+      })
+    }
+
+    this.isLoadingCategory = !cachedCategories
+    this.isLoadingTag = !cachedTags
+
+    if (cachedCategories) {
+      setTimeout(fetchCategories, 1500)
+    } else {
+      fetchCategories()
+    }
+
+    if (cachedTags) {
+      setTimeout(fetchTags, 1500)
+    } else {
+      fetchTags()
+    }
   },
   methods: {
     cycleTheme,