fix: autosave content feature not working (#6147)

#### 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
解决文章自动保存失效的问题
```

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,
   });

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;

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>

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,