From c1ba566e0836c9a7b80dbbbc3f119809240be222 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Wed, 26 Jun 2024 14:10:49 +0800
Subject: [PATCH] fix: autosave content feature not working (#6147)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area ui
/milestone 2.17.x

#### What this PR does / why we need it:

解决自动保存失效的问题

#### How to test it?

测试文章、页面输入内容后，点击其他页面是否能够自动保存。

#### Which issue(s) this PR fixes:

Fixes #6129

#### Does this PR introduce a user-facing change?
```release-note
解决文章自动保存失效的问题
```
---
 .../modules/system/roles/RoleDetail.vue       |  2 --
 .../src/components/avatar/Avatar.vue          |  2 --
 ui/packages/editor/src/dev/App.vue            |  5 ----
 ui/src/composables/use-content-cache.ts       | 30 +++++++++----------
 4 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/ui/console-src/modules/system/roles/RoleDetail.vue b/ui/console-src/modules/system/roles/RoleDetail.vue
index e3dfc840f..4c61b4a5a 100644
--- a/ui/console-src/modules/system/roles/RoleDetail.vue
+++ b/ui/console-src/modules/system/roles/RoleDetail.vue
@@ -64,8 +64,6 @@ const getRoleCountText = computed(() => {
     resolveDeepDependencies(formState.value, roleTemplates.value || [])
   );
 
-  console.log(dependencies);
-
   return t("core.role.common.text.contains_n_permissions", {
     count: dependencies.size || 0,
   });
diff --git a/ui/packages/components/src/components/avatar/Avatar.vue b/ui/packages/components/src/components/avatar/Avatar.vue
index 29a95a397..e8cca950f 100644
--- a/ui/packages/components/src/components/avatar/Avatar.vue
+++ b/ui/packages/components/src/components/avatar/Avatar.vue
@@ -15,8 +15,6 @@ const circle = computed(() => groupProps?.circle || props.circle);
 const width = computed(() => groupProps?.width || props.width);
 const height = computed(() => groupProps?.height || props.height);
 
-console.log(groupProps);
-
 const isLoading = ref(false);
 const error = ref(false);
 let init = true;
diff --git a/ui/packages/editor/src/dev/App.vue b/ui/packages/editor/src/dev/App.vue
index a1b79c89c..7dbbf873e 100644
--- a/ui/packages/editor/src/dev/App.vue
+++ b/ui/packages/editor/src/dev/App.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { watchEffect } from "vue";
 import { useLocalStorage } from "@vueuse/core";
 import {
   ExtensionBlockquote,
@@ -123,10 +122,6 @@ const editor = useEditor({
     content.value = editor.value?.getHTML() + "";
   },
 });
-
-watchEffect(() => {
-  // console.log(editor.value?.getHTML());
-});
 </script>
 
 <template>
diff --git a/ui/src/composables/use-content-cache.ts b/ui/src/composables/use-content-cache.ts
index 158afea8a..9dc0599fd 100644
--- a/ui/src/composables/use-content-cache.ts
+++ b/ui/src/composables/use-content-cache.ts
@@ -1,6 +1,6 @@
 import { useLocalStorage } from "@vueuse/core";
 import { Toast } from "@halo-dev/components";
-import { ref, watch, type Ref } from "vue";
+import { computed, type Ref } from "vue";
 export interface ContentCache {
   name: string;
   content?: string;
@@ -23,7 +23,19 @@ export function useContentCache(
   contentVersion: Ref<number>
 ): useContentCacheReturn {
   const content_caches = useLocalStorage<ContentCache[]>(key, []);
-  const currentCache = ref<ContentCache | undefined>(undefined);
+  const currentCache = computed<ContentCache | undefined>(() => {
+    if (content_caches.value.length > 0) {
+      if (name.value) {
+        return content_caches.value.find(
+          (c: ContentCache) => c.name === name.value
+        );
+      } else {
+        return content_caches.value.find((c: ContentCache) => c.name === "");
+      }
+    }
+    return undefined;
+  });
+
   const { t } = useI18n();
 
   const handleResetCache = () => {
@@ -84,20 +96,6 @@ export function useContentCache(
     index > -1 && content_caches.value.splice(index, 1);
   };
 
-  watch(content_caches, (newCaches) => {
-    if (newCaches.length > 0) {
-      if (name.value) {
-        currentCache.value = newCaches.find(
-          (c: ContentCache) => c.name === name.value
-        );
-      } else {
-        currentCache.value = newCaches.find((c: ContentCache) => c.name === "");
-      }
-    } else {
-      currentCache.value = undefined;
-    }
-  });
-
   return {
     handleClearCache,
     handleResetCache,