halo/ui/console-src/composables/use-content-snapshot.ts

34 lines
743 B
TypeScript
Raw Normal View History

import { coreApiClient } from "@halo-dev/api-client";
import { nextTick, ref, watch, type Ref } from "vue";
pref: optimize the caching functionality of content editing (#4458) #### What type of PR is this? /kind improvement #### What this PR does / why we need it: 本 PR 优化了文章、内容编辑时的本地缓存功能,之前内容对于本地缓存的依赖性非常强,因此导致了部分问题,如 #3820 ,本 PR 计划之后本地缓存将仅用于特殊情况下的内容恢复,因此尝试做了如下修改: 1. 当前正在编辑的文章,会在正常模式(切换路由、刷新页面、失去当前窗口焦点、停止编写一定时间均属于正常模式)下进行自动保存后删除本地缓存。 2. 若本地具有缓存,则会在进入编辑页面时,比对一次 content 的 version,若缓存 version 小于线上 version,则抛弃缓存,若一致,则使用缓存。 但经过测试,本 PR 无法解决如下问题: 1. 同时编辑一篇文章时,内容会被覆盖的问题。 2. 对比版本后会抛弃缓存,而实际上应当将本地缓存加入历史版本中。 #### How to test it? 1. 新建一篇文章,编写任意内容,返回文章页查看是否已经具有新的文章,且内容已被保存。 2. 修改一篇文章的内容,然后返回文章页,查看是否不是从缓存中加载。 3. 断网模式下修改一篇文章的内容,然后返回文章页,联网后,再次打开此文章,查看是否显示从缓存中加载。 4. 断网模式下修改一篇文章的内容,然后返回文章页。在另一个浏览器或页面修改此文章并保存后,回到断网页面联网后,查看是否更新为最新内容。 #### Which issue(s) this PR fixes: Fixes #3820 Fixes #4223 #### Does this PR introduce a user-facing change? ```release-note 减少内容编辑对本地缓存依赖,支持内容自动保存至服务端。 ```
2023-08-25 16:18:16 +00:00
interface SnapshotContent {
version: Ref<number>;
handleFetchSnapshot: () => Promise<void>;
}
export function useContentSnapshot(
snapshotName: Ref<string | undefined>
): SnapshotContent {
const version = ref(0);
watch(snapshotName, () => {
nextTick(() => {
handleFetchSnapshot();
});
});
const handleFetchSnapshot = async () => {
if (!snapshotName.value) {
return;
}
const { data } = await coreApiClient.content.snapshot.getSnapshot({
name: snapshotName.value,
});
pref: optimize the caching functionality of content editing (#4458) #### What type of PR is this? /kind improvement #### What this PR does / why we need it: 本 PR 优化了文章、内容编辑时的本地缓存功能,之前内容对于本地缓存的依赖性非常强,因此导致了部分问题,如 #3820 ,本 PR 计划之后本地缓存将仅用于特殊情况下的内容恢复,因此尝试做了如下修改: 1. 当前正在编辑的文章,会在正常模式(切换路由、刷新页面、失去当前窗口焦点、停止编写一定时间均属于正常模式)下进行自动保存后删除本地缓存。 2. 若本地具有缓存,则会在进入编辑页面时,比对一次 content 的 version,若缓存 version 小于线上 version,则抛弃缓存,若一致,则使用缓存。 但经过测试,本 PR 无法解决如下问题: 1. 同时编辑一篇文章时,内容会被覆盖的问题。 2. 对比版本后会抛弃缓存,而实际上应当将本地缓存加入历史版本中。 #### How to test it? 1. 新建一篇文章,编写任意内容,返回文章页查看是否已经具有新的文章,且内容已被保存。 2. 修改一篇文章的内容,然后返回文章页,查看是否不是从缓存中加载。 3. 断网模式下修改一篇文章的内容,然后返回文章页,联网后,再次打开此文章,查看是否显示从缓存中加载。 4. 断网模式下修改一篇文章的内容,然后返回文章页。在另一个浏览器或页面修改此文章并保存后,回到断网页面联网后,查看是否更新为最新内容。 #### Which issue(s) this PR fixes: Fixes #3820 Fixes #4223 #### Does this PR introduce a user-facing change? ```release-note 减少内容编辑对本地缓存依赖,支持内容自动保存至服务端。 ```
2023-08-25 16:18:16 +00:00
version.value = data.metadata.version || 0;
};
return {
version,
handleFetchSnapshot,
};
}