mirror of https://github.com/halo-dev/halo-admin
Browse Source
#### What type of PR is this? /kind feature #### What this PR does / why we need it: 支持将文章内容实时保存到浏览器，防止意外操作丢失内容。 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2773 #### Does this PR introduce a user-facing change? ```release-note Console 端支持实时保存内容到浏览器，防止意外操作丢失内容。 ```pull/736/head
ZXSheng
2 years ago
committed by
GitHub
5 changed files with 136 additions and 12 deletions
@ -0,0 +1,91 @@
|
||||
import { useLocalStorage } from "@vueuse/core"; |
||||
import { Toast } from "@halo-dev/components"; |
||||
import type { Ref } from "vue"; |
||||
|
||||
interface ContentCache { |
||||
name: string; |
||||
content?: string; |
||||
} |
||||
import debounce from "lodash.debounce"; |
||||
|
||||
interface useContentCacheReturn { |
||||
handleResetCache: () => void; |
||||
handleSetContentCache: () => void; |
||||
handleClearCache: (name: string) => void; |
||||
} |
||||
|
||||
export function useContentCache( |
||||
key: string, |
||||
name: string, |
||||
raw: Ref<string | undefined> |
||||
): useContentCacheReturn { |
||||
const content_caches = useLocalStorage<ContentCache[]>(key, []); |
||||
|
||||
const handleResetCache = () => { |
||||
if (name) { |
||||
const cache = content_caches.value.find( |
||||
(c: ContentCache) => c.name === name |
||||
); |
||||
if (cache) { |
||||
Toast.info("已从缓存中恢复未保存的内容"); |
||||
raw.value = cache.content; |
||||
} |
||||
} else { |
||||
const cache = content_caches.value.find( |
||||
(c: ContentCache) => c.name === "" && c.content |
||||
); |
||||
if (cache) { |
||||
Toast.info("已从缓存中恢复未保存的内容"); |
||||
raw.value = cache.content; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const handleSetContentCache = debounce(() => { |
||||
if (name) { |
||||
const cache = content_caches.value.find( |
||||
(c: ContentCache) => c.name === name |
||||
); |
||||
if (cache) { |
||||
cache.content = raw?.value; |
||||
} else { |
||||
content_caches.value.push({ |
||||
name: name, |
||||
content: raw?.value, |
||||
}); |
||||
} |
||||
} else { |
||||
const cache = content_caches.value.find( |
||||
(c: ContentCache) => c.name === "" |
||||
); |
||||
if (cache) { |
||||
cache.content = raw?.value; |
||||
} else { |
||||
content_caches.value.push({ |
||||
name: "", |
||||
content: raw?.value, |
||||
}); |
||||
} |
||||
} |
||||
}, 500); |
||||
|
||||
const handleClearCache = (name: string) => { |
||||
if (name) { |
||||
const index = content_caches.value.findIndex( |
||||
(c: ContentCache) => c.name === name |
||||
); |
||||
index > -1 && content_caches.value.splice(index, 1); |
||||
} else { |
||||
const index = content_caches.value.findIndex( |
||||
(c: ContentCache) => c.name === "" |
||||
); |
||||
index > -1 && content_caches.value.splice(index, 1); |
||||
} |
||||
}; |
||||
|
||||
return { |
||||
handleClearCache, |
||||
handleResetCache, |
||||
handleSetContentCache, |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue