feat: 本地编辑器缓存增加时间戳校验，只有比服务器更新时才会采用本地缓存。另外默认关闭本地缓存，可在编辑器右上角偏好设置中开启

Mereithhh · Jun 27, 2023 · 7010d32 · 7010d32
1 parent f07fc18
commit 7010d32
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 15 deletions.
diff --git a/docs/features/article.md b/docs/features/article.md
@@ -118,12 +118,14 @@ redirectFrom: /feature/basic/article.html
 
 ::: tip 自动实时保存
 
-编辑文章时会自动实时保存内容到本地缓存。
+编辑文章时会自动实时保存内容到本地缓存，此功能默认关闭，可在编辑器右上角下拉菜单中的 `偏好设置` 中开启。  
 
 即使没有点击保存按钮就退出了编辑器，下次进入后也会自动恢复上次的状态。
 
 ![自动保存](https://pic.mereith.com/img/85fa1dc72226c92b7b176cc40690999d.clipboard-2022-08-31.png)
 
+![开启自动保存](https://pic.mereith.com/img/83e5a9815d0538447ef2fa97fe9c875d.clipboard-2023-06-27.webp)
+
 :::
 
 ## 修改文章信息

diff --git a/docs/features/draft.md b/docs/features/draft.md
@@ -81,12 +81,13 @@ redirectFrom: /feature/basic/draft.html
 
 ::: tip 自动实时保存
 
-编辑草稿时会自动实时保存内容到本地缓存。
+编辑草稿时会自动实时保存内容到本地缓存，此功能默认关闭，可在编辑器右上角下拉菜单中的 `偏好设置` 中开启。  
 
 即使没有点击保存按钮就退出了编辑器，下次进入后也会自动恢复上次的状态。
 
 ![自动保存](https://pic.mereith.com/img/85fa1dc72226c92b7b176cc40690999d.clipboard-2022-08-31.png)
 
+![开启自动保存](https://pic.mereith.com/img/83e5a9815d0538447ef2fa97fe9c875d.clipboard-2023-06-27.webp)
 :::
 
 ## 修改草稿信息

diff --git a/docs/features/editor.md b/docs/features/editor.md
@@ -68,12 +68,14 @@ VanBlog 后台内置了 [bytemd](https://github.com/bytedance/bytemd)（掘金
 
 - 自动保存
 
-  编辑文章时会自动实时保存内容到本地缓存。
+  编辑文章时会自动实时保存内容到本地缓存，此功能默认关闭，可在编辑器右上角下拉菜单中的 `偏好设置` 中开启。  
 
   即使没有点击保存按钮就退出了编辑器，下次进入后也会自动恢复上次的状态。
 
   ![自动保存](https://pic.mereith.com/img/85fa1dc72226c92b7b176cc40690999d.clipboard-2022-08-31.png)
 
+![开启自动保存](https://pic.mereith.com/img/83e5a9815d0538447ef2fa97fe9c875d.clipboard-2023-06-27.webp)
+
 - 快捷键
 
   点击编辑器帮助按钮会显示 Markdown 语法与快捷键信息：
@@ -110,7 +112,7 @@ VanBlog 后台内置了 [bytemd](https://github.com/bytedance/bytemd)（掘金
 
 ![偏好设置](https://www.mereith.com/static/img/52495adf0928d2034159a398cbc7e050.clipboard-2022-09-06.png)
 
-![偏好设置](https://www.mereith.com/static/img/031c5d647a21e1f57efbceb615661486.clipboard-2022-09-06.png)
+![偏好设置](https://pic.mereith.com/img/83e5a9815d0538447ef2fa97fe9c875d.clipboard-2023-06-27.webp)
 
 ::: note
 

diff --git a/packages/admin/src/components/EditorProfileModal/index.tsx b/packages/admin/src/components/EditorProfileModal/index.tsx
@@ -45,6 +45,28 @@ export default function (props: { setValue: any; value: any; trigger: any }) {
           ];
         }}
       />
+
+      <ProFormSelect
+        width="md"
+        required
+        id="useLocalCache"
+        name="useLocalCache"
+        label="本地缓存"
+        tooltip="默认关闭，开启后将在本地缓存编辑器内容，当本地内容比服务器内容更新时间更近时，将使用本地内容展示在编辑器中。"
+        placeholder="是否开启本地缓存"
+        request={async () => {
+          return [
+            {
+              label: '开启',
+              value: "open",
+            },
+            {
+              label: '关闭',
+              value: "close",
+            },
+          ];
+        }}
+      />
     </ModalForm>
   );
 }
diff --git a/packages/admin/src/pages/Editor/index.jsx b/packages/admin/src/pages/Editor/index.jsx
@@ -22,16 +22,15 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Dropdown, Input, Menu, message, Modal, Space, Tag, Upload } from 'antd';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { history } from 'umi';
+import moment from 'moment';
 
 export default function () {
   const [value, setValue] = useState('');
   const [currObj, setCurrObj] = useState({});
   const [loading, setLoading] = useState(true);
-  const [editorConfig, setEditorConfig] = useCacheState({ afterSave: 'stay' }, 'editorConfig');
+  const [editorConfig, setEditorConfig] = useCacheState({ afterSave: 'stay', useLocalCache: "close" }, 'editorConfig');
   const type = history.location.query?.type || 'article';
-  const key = useMemo(() => {
-    return `${type}-${history.location.query?.id || '0'}`;
-  }, [type]);
+  const getCacheKey = () => `${type}-${history.location.query?.id || '0'}`
 
   useEffect(() => {
     window.addEventListener('keydown', onKeyDown);
@@ -66,10 +65,44 @@ export default function () {
 
       const type = history.location.query?.type || 'article';
       const id = history.location.query?.id;
-      const cache = window.localStorage.getItem(key);
+      const cacheString = window.localStorage.getItem(getCacheKey());
+      let cacheObj = {};
+      try {cacheObj = JSON.parse(cacheString || '{}');}catch(err) {window.localStorage.removeItem(getCacheKey());};
+      const checkCache = (data) => {
+        const clear = () => {
+          window.localStorage.removeItem(getCacheKey());
+        }
+        if (editorConfig?.useLocalCache == "close") {
+          clear();
+          return false;
+        }
+        if (!cacheObj || !cacheObj?.content) {
+          clear();
+          return false;
+        }
+        if (cacheObj?.content == data?.content) {
+          clear();
+          return false;
+        }
+        const updatedAt = data?.updatedAt ;
+        if (!updatedAt) {
+          clear();
+          return false;
+        }
+        const cacheTime = cacheObj?.time;
+        if (moment(updatedAt).isAfter(cacheTime)) {
+          clear();
+          return false;
+        } else {
+          console.log("[缓存检查] 本地缓存时间晚于服务器更新时间，使用缓存")
+          return cacheObj?.content;
+        }
+      }
+
       if (type == 'about') {
         const { data } = await getAbout();
-        if (cache && cache != data?.content) {
+        const cache = checkCache(data);
+        if (cache) {
           if (!noMessage) {
             message.success('从缓存中恢复状态！');
           }
@@ -82,7 +115,8 @@ export default function () {
       }
       if (type == 'article' && id) {
         const { data } = await getArticleById(id);
-        if (cache && cache !== data?.content) {
+        const cache = checkCache(data);
+        if (cache) {
           setValue(cache);
           if (!noMessage) {
             message.success('从缓存中恢复状态！');
@@ -95,7 +129,8 @@ export default function () {
       }
       if (type == 'draft' && id) {
         const { data } = await getDraftById(id);
-        if (cache && cache != data?.content) {
+        const cache = checkCache(data);
+        if (cache) {
           if (!noMessage) {
             message.success('从缓存中恢复状态！');
           }
@@ -108,7 +143,7 @@ export default function () {
       }
       setLoading(false);
     },
-    [history, setLoading, setValue, key],
+    [history, setLoading, setValue,type],
   );
 
   useEffect(() => {
@@ -368,7 +403,7 @@ export default function () {
               okText: '确认清理',
               cancelText: '返回',
               onOk: () => {
-                window.localStorage.removeItem(key);
+                window.localStorage.removeItem(getCacheKey());
                 setValue(currObj?.content || '');
                 message.success('清除实时保存缓存成功！已重置为服务端返回数据');
               },
@@ -447,7 +482,12 @@ export default function () {
           value={value}
           onChange={(val) => {
             setValue(val);
-            window.localStorage.setItem(key, val);
+            if (editorConfig?.useLocalCache && editorConfig?.useLocalCache == "open" ) {
+              window.localStorage.setItem(getCacheKey(), JSON.stringify({
+                content: val,
+                time: new Date().valueOf(),
+              }));
+            }
           }}
         />
       </div>