[edit] style popup

src/logic/background/twitter.js

@@ -87,6 +87,11 @@ export function twitterPinLoginCode(sender, code) {
         fetchTwitterLogin(authToken, consumerKey, code, receivedIds).then(res => {
             if (res.code == 0) {
                 setChromeStorage({ userInfo: JSON.stringify(res.data) })
+
+                sendActivetabMessage({
+                    actionType: 'BG_LOGIN_SET_USERINFO_CB'
+                });
+
                 // 获取全局消息数据
                 setMessageCount()
                 chrome.cookies.remove(LANDING_PAGE)

src/logic/content/twitter.js

@@ -1294,17 +1294,36 @@ export const appendPopupPage = (params = {}) => {
     let { path = '' } = params;
 
     let iframe = document.createElement('iframe');
-    iframe.id = 'de-popup-page';
-    iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
-    iframe.style.cssText = `border: medium none; width: 375px;
-    height: 600px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 1000;
-    animation-duration: 0.5s !important;
-    animation-timing-function: ease-in-out !important;
-    animation-fill-mode: forwards !important;
-    transition: all 1s ease 0s !important;right: -385px;`
+        iframe.id = 'de-popup-page';
+        iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+        iframe.style.cssText = `border: medium none; width: 375px;
+        height: 600px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 9000;
+        animation-duration: 0.5s !important;
+        animation-timing-function: ease-in-out !important;
+        animation-fill-mode: forwards !important;
+        transition: all 1s ease 0s !important;right: -385px;`
     let iframeContent = document.getElementById('de-popup-page');
+
+    let overlayDom = document.createElement('div');
+        overlayDom.id = 'de-popup-overlay';
+        overlayDom.style.cssText = `position: fixed;z-index: 8888;top: 0;
+        left: 0;width: 100%;height: 100%;opacity: 0;display: none`;
+
+    let overlay = document.getElementById('de-popup-overlay');
+
     if (!iframeContent) {
         document.querySelector('body').appendChild(iframe);
+        if(!overlay) {
+            document.querySelector('body').appendChild(overlayDom);
+
+            overlayDom.addEventListener('click', function() {
+                hidePopupPage();
+            })
+        } else {
+            overlay.addEventListener('click', function() {
+                hidePopupPage();
+            })
+        }
     }
 }
 
@@ -1322,6 +1341,9 @@ export const showPopupPage = (params = {}) => {
             actionType: "CONTENT_POPUP_PAGE_SHOW", 
             data: { } 
         }, () => { })
+
+        let overlay = document.getElementById('de-popup-overlay');
+        overlay.style.display = 'block';
     }
 }
 
@@ -1333,11 +1355,12 @@ export const hidePopupPage = () => {
             actionType: "CONTENT_POPUP_PAGE_HIDE", 
             data: { } 
         }, () => { })
+        let overlay = document.getElementById('de-popup-overlay');
+        overlay.style.display = 'none';
     }
 }
 
 export const tiggerInjectPopupPage = () => {
-    console.log('tiggerInjectPopupPage',)
     let iframeContent = document.getElementById('de-popup-page');
     if (iframeContent) {
         hidePinTips();
@@ -1348,6 +1371,17 @@ export const tiggerInjectPopupPage = () => {
         } else {
             hidePopupPage();
         }
+    } else {
+        appendPopupPage();
+        setTimeout(() => {
+            let iframe = document.getElementById('de-popup-page');
+            let {transform = ''} = iframe.style;
+            if(transform == 'translateX(385px)' || !transform) {
+                showPopupPage();
+            } else {
+                hidePopupPage();
+            }
+        }, 300)
     }
 }
 

src/view/popup/tabbar-page/index.vue

@@ -97,10 +97,9 @@ const callEventPageMethod = (actionType, data, callback) => {
     );
 };
 
-function onPageVisbile() {
+const onPageVisbile = () => {
   document.addEventListener('visibilitychange', function () {
     let isHidden = document.hidden;
-    console.log('joinDiscordActionState',);
     if (!isHidden) {
       if(!userInfo.value.accessToken) {
         setTimeout(() => {
@@ -111,12 +110,28 @@ function onPageVisbile() {
   });
 }
 
+const onRuntimeMsg = () => {
+  chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse('');
+    switch (req.actionType) {
+      case 'BG_LOGIN_SET_USERINFO_CB':
+        if(!userInfo.value.accessToken) {
+          setTimeout(() => {
+            getUserInfo();
+          }, 800)
+        }
+        break;
+    }
+  })
+}
+
 onMounted(() => {
   nextTick(() => {
     onTabbarHandler(router.currentRoute.value);
   })
   getUserInfo();
   onPageVisbile();
+  onRuntimeMsg();
 });
 </script>