fix: 修复登录问题 & ocr 预热时机更改

src/components/sandbox/account-layout/index.tsx

@@ -35,9 +35,9 @@ interface IAccountLayoutProps {
 
 function AccountLayout(props: IAccountLayoutProps) {
   const { position = 'rightTop', close } = props;
-  const [ user, setUser ] = useState<IUser | null>(null);
-  const [ ready, setAppReady ] = useState(false);
-  const [ forceUpgradeInfo, setForceUpgradeInfo ] = useState<string>();
+  const [user, setUser] = useState<IUser | null>(null);
+  const [ready, setAppReady] = useState(false);
+  const [forceUpgradeInfo, setForceUpgradeInfo] = useState<string>();
 
   const createLoginWindow = (): Promise<number> => {
     return new Promise(resolve => {
@@ -121,24 +121,28 @@ function AccountLayout(props: IAccountLayoutProps) {
 
   useEffectAsync(async () => {
     const info = await getCurrentAccount();
-    const accountInfo = await mineProxy.getUserInfo();
-    if (accountInfo && accountInfo?.id === info.id) {
-      setUser(info);
-      const tabInfo = await Chrome.getCurrentTab();
-      // 上报埋点
-      Tracert.start({
-        spmAPos: TRACERT_CONFIG.spmAPos,
-        spmBPos: TRACERT_CONFIG.spmBPos,
-        role_id: (info as IUser)?.id,
-        mdata: {
-          [REQUEST_HEADER_VERSION]: VERSION,
-          [EXTENSION_ID]: Chrome.runtime.id,
-          [REFERER_URL]: tabInfo?.url,
-        },
-      });
+    try {
+      const accountInfo = await mineProxy.getUserInfo();
+      if (accountInfo && accountInfo?.id === info.id) {
+        setUser(info);
+        const tabInfo = await Chrome.getCurrentTab();
+        // 上报埋点
+        Tracert.start({
+          spmAPos: TRACERT_CONFIG.spmAPos,
+          spmBPos: TRACERT_CONFIG.spmBPos,
+          role_id: (info as IUser)?.id,
+          mdata: {
+            [REQUEST_HEADER_VERSION]: VERSION,
+            [EXTENSION_ID]: Chrome.runtime.id,
+            [REFERER_URL]: tabInfo?.url,
+          },
+        });
+      }
+    } catch (error) {
+      // 
     }
     setAppReady(true);
-  }, [])
+  }, []);
 
   useEffect(() => {
     const logout = data => {

src/config.ts

@@ -9,7 +9,7 @@ export const REQUEST_HEADER_VERSION = `${prefix}${hyphen}${pkgJSON.name}${hyphen
 export const CSRF_HEADER_NAME = [ 'x', 'csrf', 'token' ].join('-');
 export const STORAGE_KEYS = {
   CURRENT_ACCOUNT: 'storage/current-account',
-  ENABLE_OCR: 'storage/enable-ocr',
+  ENABLE_OCR_STATUS: 'storage/enable-ocr-status',
   SETTINGS: {
     WORD_MARK_CONFIG: 'settings/word-mark-config',
   },

src/pages/sandbox/App.tsx

@@ -11,7 +11,10 @@ import { __i18n } from '@/isomorphic/i18n';
 import { preferencesUrl } from '@/isomorphic/word-mark';
 import eventManager from '@/core/event/eventManager';
 import { AppEvents } from '@/core/event/events';
-import { SandboxProvider } from './provider/sandBoxProvider';
+import { useEffectAsync } from '@/hooks/useAsyncEffect';
+import { STORAGE_KEYS } from '@/config';
+import { EnableOcrStatus, ocrManager } from './ocr/ocr-manager';
+import { SandboxProvider, useSandboxContext } from './provider/sandBoxProvider';
 import UserInfo from './UserInfo';
 import { Other } from './Other';
 import SaveTo from './SaveTo';
@@ -31,6 +34,7 @@ const onClose = () => {
 
 const App = () => {
   const accountContext = useContext(AccountContext);
+  const { updateEnableOcr } = useSandboxContext();
   const [tab, setTab] = useState<TabName>('save-to');
 
   const handleTabChange = (e: RadioChangeEvent) => {
@@ -42,13 +46,36 @@ const App = () => {
       if (e.key === 'Escape' || e.key === 'Esc') {
         onClose();
       }
-    }
-    
-    document.addEventListener('keydown', listener)
+    };
+
+    document.addEventListener('keydown', listener);
     return () => {
-      document.removeEventListener('keydown', listener)
+      document.removeEventListener('keydown', listener);
     };
-  }, [])
+  }, []);
+
+  useEffectAsync(async () => {
+    const storage = await Chrome.storage.local.get(STORAGE_KEYS.ENABLE_OCR_STATUS);
+    const enableStatus = storage[STORAGE_KEYS.ENABLE_OCR_STATUS];
+    // 对于没有明确原因的 ocr 进行一次预热
+    if ([EnableOcrStatus.disable, EnableOcrStatus.enable].includes(enableStatus)) {
+      try {
+        await ocrManager.init();
+        const enableOcrStatus = await ocrManager.isWebOcrReady();
+        await Chrome.storage.local.set({
+          [STORAGE_KEYS.ENABLE_OCR_STATUS]: enableOcrStatus,
+        });
+        updateEnableOcr(enableOcrStatus === EnableOcrStatus.enable);
+      } catch (error) {
+        console.log('error:', error);
+        await Chrome.storage.local.set({
+          [STORAGE_KEYS.ENABLE_OCR_STATUS]: EnableOcrStatus.unknown,
+        });
+      }
+    } else {
+      updateEnableOcr(enableStatus === EnableOcrStatus.enable);
+    }
+  }, []);
 
   return (
     <div className={styles.wrapper}>

src/pages/sandbox/ocr/ocr-manager.ts

@@ -18,6 +18,14 @@ const getRequestID = (() => {
   };
 })();
 
+export enum EnableOcrStatus {
+  enable = 'enable',
+
+  disable = 'disable',
+
+  unknown = 'unknown'
+}
+
 class OCRManager {
   private iframe: HTMLIFrameElement | undefined;
   private ocrIframeId = 'yq-ocr-iframe-id';
@@ -35,9 +43,7 @@ class OCRManager {
       this.iframe.id = this.ocrIframeId;
       this.iframe.style.display = 'none';
       document.body.appendChild(this.iframe);
-
       const resolveCache: Map<number, (data: any) => void> = new Map();
-
       const messageFunc = (event: MessageEvent<any>) => {
         if (event.data.key !== key) return;
         if (resolveCache.has(event.data.requestId)) {
@@ -77,8 +83,8 @@ class OCRManager {
   async startOCR(type: 'file' | 'blob' | 'url', content: File | Blob | string) {
     // 调用 ocr 时，开始 ocr 等预热
     await this.init();
-    const isReady = await ocrManager.isWebOcrReady();
-    if (!isReady) {
+    const enableOcrStatus = await ocrManager.isWebOcrReady();
+    if (enableOcrStatus !== EnableOcrStatus.enable) {
       console.log('ocr is not ready');
       return [];
     }
@@ -106,7 +112,10 @@ class OCRManager {
 
   async isWebOcrReady() {
     const result = await this.sendMessage('isWebOcrReady');
-    return result.data;
+    if (!result) {
+      return EnableOcrStatus.unknown;
+    }
+    return result.data ? EnableOcrStatus.enable : EnableOcrStatus.disable;
   }
 
   private sendMessage(action: string, data?: any) {

src/pages/sandbox/provider/sandBoxProvider.tsx

@@ -11,7 +11,7 @@ import Chrome from '@/core/chrome';
 import { STORAGE_KEYS } from '@/config';
 import { useEffectAsync } from '@/hooks/useAsyncEffect';
 import { getCurrentAccount } from '@/core/account';
-import { ocrManager } from '../ocr/ocr-manager';
+import { EnableOcrStatus, ocrManager } from '../ocr/ocr-manager';
 
 interface ISandboxContext {
   defaultSelectHTML: HTMLElement[];
@@ -21,16 +21,20 @@ interface ISandboxContext {
   updateClippingType: React.Dispatch<
     React.SetStateAction<ClippingTypeEnum | null>
   >;
+  updateEnableOcr: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const noop = () => {
+  //
 }
 
 export const SandboxContext = createContext<ISandboxContext>({
   defaultSelectHTML: [],
   clippingType: null,
   editorLoading: false,
   enableOcr: false,
-  updateClippingType: () => {
-    //
-  },
+  updateClippingType: noop,
+  updateEnableOcr: noop,
 });
 
 interface ISandboxProviderProps {
@@ -44,7 +48,7 @@ export function SandboxProvider(props: ISandboxProviderProps) {
     null,
   );
   const [editorLoading, setEditorLoading] = useState(false);
-  const [enableOcr, setEnableOcr] = useState(false);
+  const [enableOcr, updateEnableOcr] = useState(false);
 
   useEffect(() => {
     const listener = (e: MessageEvent<any>) => {
@@ -95,33 +99,6 @@ export function SandboxProvider(props: ISandboxProviderProps) {
     };
   }, []);
 
-  useEffectAsync(async () => {
-    // 做一次 ocr 预处理，判断用户能否 ocr
-    const account = await getCurrentAccount();
-    if (!account) {
-      return;
-    }
-    const storage = await Chrome.storage.local.get(STORAGE_KEYS.ENABLE_OCR);
-    const enable = storage[STORAGE_KEYS.ENABLE_OCR];
-    // 初始化一次 ocr
-    if (typeof enable === 'undefined') {
-      try {
-        await ocrManager.init();
-        const isEnable = await ocrManager.isWebOcrReady();
-        await Chrome.storage.local.set({
-          [STORAGE_KEYS.ENABLE_OCR]: isEnable,
-        });
-        setEnableOcr(isEnable);
-      } catch (error) {
-        console.log('error:', error);
-        await Chrome.storage.local.set({
-          [STORAGE_KEYS.ENABLE_OCR]: false,
-        });
-      }
-    } else {
-      setEnableOcr(enable);
-    }
-  }, []);
 
   return (
     <SandboxContext.Provider
@@ -131,6 +108,7 @@ export function SandboxProvider(props: ISandboxProviderProps) {
         editorLoading,
         enableOcr,
         updateClippingType,
+        updateEnableOcr,
       }}
     >
       {isReady && props.children}