fix: 修复强制升级展示 (#102)

* fix: 修复强制升级展示

* chore: 升级版本号

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuque-chrome-extension",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "语雀浏览器插件",
   "private": true,
   "repository": {

src/config.ts

@@ -14,6 +14,7 @@ export const YUQUE_DOMAIN = 'https://www.yuque.com';
 export const YUQUE_CSRF_COOKIE_NAME = 'yuque_ctoken';
 export const EXTENSION_ID = 'extension-id';
 export const VERSION = pkgJSON.version;
+export const REFERER_URL = 'referer_url';
 export const TRACERT_CONFIG = {
   spmAPos: 'a385',
   spmBPos: 'b65721',

src/core/event/eventManager.ts

@@ -0,0 +1,42 @@
+import EventEmitter3 from 'eventemitter3';
+
+export type IEventListener = EventEmitter3.EventListener<any, any>;
+
+export type IEventListenerRemover = () => void;
+
+class EventManager extends EventEmitter3 {
+  listen(
+    eventName: string,
+    listener: IEventListener,
+    once?: boolean,
+  ): IEventListenerRemover {
+    if (once) {
+      this.once(eventName, listener);
+    } else {
+      this.on(eventName, listener);
+    }
+
+    return () => {
+      this.remove(eventName, listener);
+    };
+  }
+
+  listenOnce(
+    eventName: string,
+    listener: IEventListener,
+  ): IEventListenerRemover {
+    return this.listen(eventName, listener, true);
+  }
+
+  remove(eventName: string, listener?: IEventListener) {
+    this.off(eventName, listener);
+  }
+
+  notify(eventName: string, ...params: any) {
+    this.emit(eventName, ...params);
+  }
+}
+
+const eventManager = new EventManager();
+
+export default eventManager;

src/core/event/events.ts

@@ -0,0 +1,6 @@
+export enum AppEvents {
+  /**
+   * 强制升级
+   */
+  FORCE_UPGRADE_VERSION = 'FORCE_UPGRADE_VERSION',
+}

src/core/proxy.ts

@@ -49,28 +49,17 @@ const RequestProxy = {
   },
   book: {
     async getBooks() {
-      try {
-        const { data } = await request('/api/mine/personal_books', {
-          method: 'GET',
-          data: {
-            limit: 200,
-            offset: 0,
-          },
-        });
-        return Array.isArray(data?.data)
-          ? // 过滤掉非文档类型的知识库
+      const { data } = await request('/api/mine/personal_books', {
+        method: 'GET',
+        data: {
+          limit: 200,
+          offset: 0,
+        },
+      });
+      return Array.isArray(data?.data)
+        ? // 过滤掉非文档类型的知识库
           data.data.filter(b => b.type === 'Book')
-          : [];
-      } catch (error) {
-        if (
-          error.response?.status === 400 &&
-          error.response?.data?.code === 'force_upgrade_version'
-        ) {
-          const err = new Error();
-          (err as any).html = error.response?.data?.html;
-          throw err;
-        }
-      }
+        : [];
     },
   },
   note: {

src/core/request.ts

@@ -8,6 +8,8 @@ import {
   CSRF_HEADER_NAME,
   EXTENSION_ID,
 } from '@/config';
+import eventManager from './event/eventManager';
+import { AppEvents } from './event/events';
 
 export class CsrfTokenError extends Error {
   constructor(message) {
@@ -100,7 +102,27 @@ const request = async (
       };
     }
 
-    return axios(newOptions);
+    const iAxios = axios.create();
+
+    // 拦截器
+    iAxios.interceptors.response.use(
+      response => {
+        return response;
+      },
+      error => {
+        if (
+          error.response?.status === 400 &&
+          error.response?.data?.code === 'force_upgrade_version'
+        ) {
+          eventManager.notify(AppEvents.FORCE_UPGRADE_VERSION, {
+            html: error.response?.data?.html,
+          });
+        }
+        throw error;
+      },
+    );
+
+    return iAxios.call(null, newOptions);
   } catch (error) {
     throw error;
   }

src/pages/sandbox/App.tsx

@@ -17,7 +17,10 @@ import {
   EXTENSION_ID,
   VERSION,
   TRACERT_CONFIG,
+  REFERER_URL,
 } from '@/config';
+import eventManager from '@/core/event/eventManager';
+import { AppEvents } from '@/core/event/events';
 
 import UserInfo, { IYuqueAccount } from './UserInfo';
 import FeedBack from './FeedBack';
@@ -113,9 +116,11 @@ const useViewModel = () => {
 
   useEffect(() => {
     getCurrentAccount()
-      .then(info => {
+      .then(async info => {
         setAccount(info as IYuqueAccount);
 
+        const tabInfo = await Chrome.getCurrentTab();
+
         // 上报埋点
         Tracert.start({
           spmAPos: TRACERT_CONFIG.spmAPos,
@@ -124,6 +129,7 @@ const useViewModel = () => {
           mdata: {
             [REQUEST_HEADER_VERSION]: VERSION,
             [EXTENSION_ID]: Chrome.runtime.id,
+            [REFERER_URL]: tabInfo?.url,
           },
         });
       })
@@ -132,6 +138,12 @@ const useViewModel = () => {
       });
   }, []);
 
+  useEffect(() => {
+    eventManager.listen(AppEvents.FORCE_UPGRADE_VERSION, data => {
+      onLogout(data);
+    });
+  }, []);
+
   return {
     state: {
       appReady,
@@ -203,7 +215,6 @@ const App = () => {
                 <Radio.Button value="other">{__i18n('其他')}</Radio.Button>
               </Radio.Group>
               <SaveTo
-                onLogout={onLogout}
                 className={classnames({
                   [styles.hidden]: tab !== 'save-to',
                 })}

src/pages/sandbox/SaveTo.tsx

@@ -61,7 +61,6 @@ function BookWithIcon({ book }) {
 
 export interface ISaveToProps {
   className?: string;
-  onLogout: (e: any) => void;
 }
 
 const useViewModel = (props: ISaveToProps) => {
@@ -77,13 +76,9 @@ const useViewModel = (props: ISaveToProps) => {
    * 获取知识库的数据
    */
   useEffect(() => {
-    proxy.book.getBooks()
-      .then(bookList => {
-        setBooks([ ...BOOKS_DATA, ...bookList ]);
-      })
-      .catch(e => {
-        props.onLogout(e);
-      });
+    proxy.book.getBooks().then(bookList => {
+      setBooks([...BOOKS_DATA, ...bookList]);
+    });
   }, []);
 
   /**