Merge branch 'dev_1.0.5' of DeNet/de-net into master

src/assets/css/reset.css

@@ -0,0 +1,3 @@
+body {
+    background-color: unset;
+}

src/assets/svg/icon-add-task.svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="22" height="22" rx="6" fill="#1D9BF0"/>
+<line x1="6" y1="10.75" x2="16" y2="10.75" stroke="white" stroke-width="1.5"/>
+<line x1="10.9492" y1="16" x2="10.9492" y2="6" stroke="white" stroke-width="1.5"/>
+</svg>

src/assets/svg/icon-bells.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 0C6.69231 0 0 6.69231 0 15C0 23.3077 6.69231 30 15 30C23.3077 30 30 23.3077 30 15C30 6.69231 23.3077 0 15 0ZM15 23.1923C14.1923 23.1923 13.5 22.6154 13.5 21.8077C13.5 21.6923 13.6154 21.5769 13.7308 21.5769H16.3846C16.5 21.5769 16.6154 21.6923 16.6154 21.8077C16.5 22.6154 15.8077 23.3077 15 23.1923ZM21.6923 20.4231C21.6923 20.5385 21.5769 20.6538 21.4615 20.6538H8.53846C8.42308 20.6538 8.30769 20.5385 8.30769 20.4231V19.1538C8.30769 18.3462 9.23077 17.7692 10.5 17.6538C10.3846 17.1923 10.2692 16.7308 10.2692 16.2692V12.5769C10.2692 10.6154 11.6538 9 13.5 8.53846V8.19231C13.6154 7.38462 14.3077 6.69231 15.1154 6.80769C15.8077 6.92308 16.5 7.5 16.5 8.19231V8.53846C18.3462 9 19.6154 10.7308 19.7308 12.5769V16.2692C19.7308 16.7308 19.6154 17.1923 19.5 17.6538C20.7692 17.7692 21.6923 18.3462 21.6923 19.1538V20.4231Z" fill="#FFA800"/>
+</svg>

src/assets/svg/icon-task-close.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="-0.75" x2="12.8917" y2="-0.75" transform="matrix(-0.698077 0.716023 -0.698077 -0.716023 16.4922 7)" stroke="#D9D9D9" stroke-width="1.5"/>
+<line y1="-0.75" x2="12.8917" y2="-0.75" transform="matrix(0.698074 0.716025 0.698074 -0.716025 8.49219 7)" stroke="#D9D9D9" stroke-width="1.5"/>
+</svg>

src/assets/svg/icon-task-facebook.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6004 10.0004C18.6004 5.25074 14.75 1.40039 10.0004 1.40039C5.25074 1.40039 1.40039 5.25074 1.40039 10.0004C1.40039 14.2928 4.54527 17.8507 8.65664 18.4959V12.4863H6.47305V10.0004H8.65664V8.1057C8.65664 5.95033 9.94059 4.75977 11.905 4.75977C12.8456 4.75977 13.8301 4.92773 13.8301 4.92773V7.04414H12.7457C11.6774 7.04414 11.3441 7.70711 11.3441 8.38789V10.0004H13.7293L13.348 12.4863H11.3441V18.4959C15.4555 17.8507 18.6004 14.2928 18.6004 10.0004Z" fill="#0D90F2"/>
+<path d="M13.3476 12.4863L13.7289 10.0004H11.3438V8.38789C11.3438 7.70779 11.677 7.04414 12.7453 7.04414H13.8297V4.92773C13.8297 4.92773 12.8456 4.75977 11.9046 4.75977C9.9402 4.75977 8.65625 5.95033 8.65625 8.1057V10.0004H6.47266V12.4863H8.65625V18.4959C9.54667 18.6352 10.4533 18.6352 11.3438 18.4959V12.4863H13.3476Z" fill="white"/>
+</svg>

src/assets/svg/icon-task-twitter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6004 5.03875C17.9679 5.30807 17.2795 5.5019 16.5705 5.57739C17.3023 5.14689 17.8583 4.46747 18.1208 3.65951C17.4449 4.05737 16.6801 4.34913 15.8843 4.50011C15.2394 3.82069 14.3236 3.40039 13.3087 3.40039C11.3553 3.40039 9.78438 4.96326 9.78438 6.88115C9.78438 7.15047 9.81746 7.41979 9.8712 7.67891C6.94631 7.52793 4.33768 6.14868 2.60342 4.03697C2.29749 4.5552 2.12386 5.14689 2.12386 5.79367C2.12386 7.00153 2.74605 8.06656 3.69483 8.69294C3.11605 8.67049 2.57035 8.50931 2.10112 8.25019V8.29304C2.10112 9.98445 3.31242 11.3861 4.92679 11.7085C4.6312 11.784 4.31494 11.8268 3.99868 11.8268C3.76924 11.8268 3.5522 11.8044 3.33309 11.7738C3.77958 13.153 5.07976 14.1548 6.62798 14.1875C5.41669 15.124 3.89947 15.6749 2.25202 15.6749C1.95643 15.6749 1.68358 15.6647 1.40039 15.632C2.96309 16.6216 4.81724 17.1928 6.81402 17.1928C13.2963 17.1928 16.8434 11.8921 16.8434 7.29125C16.8434 7.14027 16.8434 6.98928 16.8331 6.8383C17.5193 6.34251 18.1208 5.72838 18.6004 5.03875Z" fill="#1D9BF0"/>
+</svg>

src/entry/background.js

@@ -16,6 +16,10 @@ import {
     onDisconnectHandler
 } from "@/logic/background/twitter";
 
+import {
+    facebookShareSuccess
+} from "@/logic/background/facebook";
+
 //加载bg.js 执行
 setMessageCount();
 
@@ -80,6 +84,9 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID':
                 saveDiscordAuthWindowId(req);
                 break;
+            case 'CONTENT_FACEBOOK_SHARE_SUCCESS':
+                facebookShareSuccess(req, sender);
+                break;
         }
     }
 }

src/entry/content.js

@@ -11,8 +11,20 @@ import {
     showPinTips,
     init,
     initExecuteScript,
-    changeQueueNum
+    changeQueueNum,
+    replyHandle,
+    noticeBindTweet,
+    hideNoticeBindTweet,
+    getTweetAuthorByDom,
+    facebookReplyTweet,
+    doTaskTwitterAPI,
+    onTweetReplyClick
 } from "@/logic/content/twitter.js";
+import { duration } from "moment";
+
+import {
+    initFacebookContent
+} from "@/logic/content/facebook.js"
 
 
 chrome.storage.onChanged.addListener(changes => {
@@ -20,7 +32,8 @@ chrome.storage.onChanged.addListener(changes => {
 })
 
 window.onload = () => {
-    init()
+    init();
+    initFacebookContent();
 };
 
 window.onmessage = (res) => {
@@ -35,6 +48,27 @@ window.onmessage = (res) => {
             case "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG":
                 showTwitterPublishDialogHandler(res.data.publishRes);
                 break;
+            case "IFRAME_RED_PACKET_REPLY_CLICK":
+                replyHandle(res.data.data || {});
+                break;
+            case "IFRAME_RED_PACKET_SHOW_BIND_TWEET_NOTICE":
+                noticeBindTweet(res.data.data || {});
+                break;
+            case "IFRAME_CLOSE_BIND_TWEET":
+                hideNoticeBindTweet();
+                break;
+            case "IFRAME_RED_PACKET_GET_TWEET_AUTHOR":
+                getTweetAuthorByDom(res.data.data || {});
+                break;
+            case "IFRAME_RED_PACKET_CHECK_FACEBOOK_REPLY":
+                facebookReplyTweet(res.data.data || {});
+                break;
+            case "IFRAME_RED_PACKET_ON_TWEET_REPLY_CLICK":
+                onTweetReplyClick(res.data.data || {});
+                break;
+            // case 'IFRAME_TWITTER_API_DO_TASK':
+            //     doTaskTwitterAPI(res.data)
+            //     break
             // case "IFRAME_DO_TASK":
             //     findTweetByIdDoTask(res.data.task_data, res.data.task_type)
             //     break
@@ -56,8 +90,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             console.log('BACK_TWITTER_SHORT_URL')
             changeQueueNum(1)
             break
-        case 'TIME':
-            alert('time')
+        case 'IFRAME_TWITTER_API_DO_TASK':
+            doTaskTwitterAPI(req)
             break
     }
 })

src/http/configAPI.js

@@ -1,4 +1,4 @@
-export const appVersionCode = 5
+export const appVersionCode = 6
 
 const api = {
 	production: 'https://api.denetme.net',
@@ -25,3 +25,5 @@ export const logAPIUrl = logApi[process.env.NODE_ENV] + '/log-center'
 export const pageUrl = page[process.env.NODE_ENV] 
 
 export const discordAuthRedirectUri = `${pageUrl}/auth/discordCallback`;
+
+export const faceShareRedirectUrl = `${pageUrl}/facebook/shareCallback`;

src/iframe/bind-tweet.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/bind-tweet/bind-tweet.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+
+const app = createApp(App);
+
+app.use(ElementPlus);
+app.mount('#app');

src/iframe/publish-tips.js

@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/publish-tips/publish-tips.vue'
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
+
+import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
+import "@/assets/css/reset.css";
+
+import { message } from "ant-design-vue";
+message.config({
+    top: `20px`,
+    duration: 3,
+    maxCount: 1,
+});
+
+const app = createApp(App);
+
+app.use(message);
+app.mount('#app');

src/iframe/red-packet.js

@@ -4,6 +4,7 @@ const app = createApp(App)
 
 // 引入路由对象实例
 import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
+import "@/assets/css/reset.css";
 
 import { message, Tooltip } from "ant-design-vue";
 message.config({

src/logic/background/facebook.js

@@ -0,0 +1,36 @@
+import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook'
+
+/**
+ * facebook分享成功逻辑
+ */
+export function facebookShareSuccess(params, sender) {
+    let {data} = params;
+    let {id} = sender.tab || {};
+    chrome.tabs.remove(id);
+
+    fetchAddFinishEvent({
+        eventType: data.type,
+        luckdropId: data.taskLuckdropId
+    }).then(res => {
+        if (res.code == 0) {
+            setTimeout(() => {
+                sendActivetabMessage({
+                    actionType: 'BG_FACEBOOK_SHARE_SUCCESS',
+                    data: data
+                });
+            })
+        }
+    })
+}
+
+
+function sendActivetabMessage(message = {}) {
+    chrome.tabs.query({
+        active: true,
+        currentWindow: true
+    }, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, message, res => {
+            console.log(res)
+        })
+    })
+}

src/logic/background/fetch/facebook.js

@@ -0,0 +1,8 @@
+import { commonFetch } from '@/http/fetch'
+
+export function fetchAddFinishEvent(params = {}) {
+    return commonFetch({
+        url: '/post/luckdrop/addFinishEvent',
+        params
+    })
+}

src/logic/background/twitter.js

@@ -195,7 +195,7 @@ export function onInstalledUserSet() {
         // 无刷新插入js
         chrome.tabs.query({}, (tab) => {
             for (let i in tab) {
-                if (tab[i].url.indexOf('twitter.com') >= 0) {
+                if (tab[i].url.indexOf('twitter.com') >= 0 || tab[i].url.indexOf('facebook.com') >= 0) {
                     chrome.scripting.executeScript({
                         target: { tabId: tab[i].id },
                         files: ['js/content.js'],
@@ -267,9 +267,8 @@ export function onInstalledCreateTab() {
 export function popupRePublish(req) {
     setChromeStorage({
         popupShowPublishDialog: JSON.stringify({
-            show: true,
-            srcContent: req.data.srcContent,
-            postId: req.data.postId
+            ...req.data,
+            show: true
         }),
     });
     chrome.tabs.create({

src/logic/content/ParseCard.js

@@ -11,6 +11,21 @@ import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 class ParseCard {
     constructor() {
 
+    }
+    parseFaceBookCard() {
+        let de_net_card = []
+        let arr_article = document.querySelectorAll('div[role="article"]') || []
+        let _html
+        for (let i in arr_article) {
+            _html = arr_article[i].innerHTML || ''
+            if (_html.includes('denetme.net') && !this.isHasIframeByFacebook(arr_article[i])) {
+                de_net_card.push({
+                    time: new Date().getTime(),
+                    dom: arr_article[i]
+                })
+            }
+        }
+        return de_net_card
     }
     parseAllDeNetCard() {
         let de_net_card = []
@@ -47,6 +62,56 @@ class ParseCard {
         }
         return { tweet_Id, short_url, dom_card }
     }
+    parseFaceBookParmas(dom_card) {
+        let tweet_Id = ''
+        let short_url = ''
+        let tweet_author = '';
+        let a_arr = dom_card.querySelectorAll('a[role="link"]') || []
+        a_arr = Array.from(a_arr).reverse()
+        for (let i in a_arr) {
+            // 获取推特id
+            if (a_arr[i].href.indexOf('facebook.com') > 0) {
+                let faceUrl = new URL(a_arr[i].href);
+                let faceSearch = new URLSearchParams(faceUrl.search);
+                let faceJumpUrl = decodeURIComponent(faceSearch.get('u'));
+                if (faceJumpUrl !== 'null') {
+                    let urlArr = new URL(faceJumpUrl);
+                    let searchArr = new URLSearchParams(urlArr.search);
+                    let deUrlParams = searchArr.get('deUrlParams') || '{}';
+                        deUrlParams = JSON.parse(deUrlParams);
+                    if (!tweet_Id) {
+                        tweet_Id = deUrlParams.tweetId;
+                    }
+                    if (!short_url) {
+                        short_url = faceJumpUrl
+                    }
+                    if (!tweet_author) {
+                        tweet_author = deUrlParams.fullName;
+                    }
+                }
+            } else {
+                if (a_arr[i].href.indexOf('denetme.net') > 0) {
+                    let urlArr = new URL(a_arr[i].href);
+                    let searchArr = new URLSearchParams(urlArr.search);
+                    let deUrlParams = searchArr.get('deUrlParams') || '{}';
+                        deUrlParams = JSON.parse(deUrlParams);
+                    if (!tweet_Id) {
+                        tweet_Id = deUrlParams.tweetId;
+                    }
+                    if (!short_url) {
+                        short_url = a_arr[i].href
+                    }
+                    if (!tweet_author) {
+                        tweet_author = deUrlParams.fullName;
+                    }
+                }
+            }
+            if (tweet_Id && short_url) {
+                break
+            }
+        }
+        return { tweet_Id, short_url, dom_card, tweet_author }
+    }
     hideCard() {
         if (dom.querySelector('iframe')) {
             return
@@ -63,6 +128,17 @@ class ParseCard {
         })
         return json_data
     }
+    parseFacebookCardParmas() {
+        let json_data = []
+        this.parseFaceBookCard().forEach((item) => {
+            let _obj = this.parseFaceBookParmas(item.dom)
+            if (_obj.tweet_Id && _obj.short_url && _obj.dom_card) {
+                _obj.time = item.time
+                json_data.push(_obj)
+            }
+        })
+        return json_data
+    }
     // 获取短链接和渲染卡片数据
     async getCardParmas(card_json_data) {
         let sort_link_data = await getChromeStorage('cardData') || []
@@ -118,11 +194,14 @@ class ParseCard {
         return _array
     }
 
-    createIframe(post_Id, tweet_Id) {
+    createIframe({ post_Id, tweet_Id, tweet_author }, if_center = false) {
         let _iframe = document.createElement('iframe')
         _iframe.id = post_Id
-        _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}&tweetId=${tweet_Id}`;
-        _iframe.style.cssText = 'border: medium none; width:375px;min-height:500px;'
+        _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}&tweetId=${tweet_Id}&tweet_author=${tweet_author}&window_origin=${window.location.origin}`;
+        _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px;'
+        if (if_center) {
+            _iframe.style.cssText = 'border:medium none; width:375px; min-height:500px; display:block; margin:auto;'
+        }
         return _iframe
     }
     isHasIframeByArticle(dom_card) {
@@ -155,17 +234,17 @@ class ParseCard {
                 }
                 if (_iframe.length > 1) {
                     for (let i = 0; i < _iframe.length; i++) {
-                        if (_iframe > 0) {
+                        if (i > 0) {
                             _iframe[i].remove()
                         }
                     }
                 }
-            }else{
-                let _iframe = dom.parentElement.querySelectorAll('iframe') || []
-                if (_iframe.length > 1) {
-                    for (let i = 0; i < _iframe.length; i++) {
-                        if (_iframe > 0) {
-                            _iframe[i].remove()
+            } else {
+                let arr_iframe = dom.closest('article').querySelectorAll('iframe') || []
+                if (arr_iframe.length > 1) {
+                    for (let i = 0; i < arr_iframe.length; i++) {
+                        if (i > 0) {
+                            arr_iframe[i].remove()
                         }
                     }
                 }
@@ -174,6 +253,23 @@ class ParseCard {
         }
         return false
     }
+    isHasIframeByFacebook(dom_card) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let arr_iframe = dom_card.querySelectorAll('iframe') || []
+        if (arr_iframe.length > 0) {
+            if (arr_iframe.length > 1) {
+                for (let i = 0; i < arr_iframe.length; i++) {
+                    if (i > 0) {
+                        arr_iframe[i].remove()
+                    }
+                }
+            }
+            return true
+        }
+        return false
+    }
     replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
         if (!dom_card || !dom_card.parentElement) {
             return
@@ -204,9 +300,28 @@ class ParseCard {
             // 渲染时长:${(new Date().getTime() - time) / 1000}s
             // `
             // dom.parentElement.appendChild(div)
-            dom.appendChild(this.createIframe(post_Id, tweet_Id))
+            dom.appendChild(this.createIframe({ post_Id, tweet_Id }))
+        }
+
+    }
+    replaceFacebookPacket({ dom_card, tweet_Id, short_url, tweet_author }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
         }
+        let dom = dom_card.querySelector('div[id^=jsc_c_][class=l9j0dhe7]')
+        dom.style = 'min-height:500px'
+        if (dom) {
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.children[i].tagName.toLowerCase() != 'iframe') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
 
+            let originUrl = new URL(short_url);
+            let post_Id = originUrl.pathname.slice(1);
+
+            dom.appendChild(this.createIframe({ post_Id, tweet_Id, tweet_author }, true))
+        }
     }
 }
 export default new ParseCard()

src/logic/content/facebook.js

@@ -0,0 +1,71 @@
+import { faceShareRedirectUrl } from '@/http/configAPI'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+
+let tempData = {
+    isSetContent: false
+}
+
+/**
+ * 初始化contentjs调用逻辑
+ */
+export function initFacebookContent() {
+    // window.location.href.indexOf('facebook.com') > -1;
+    injectShareCode();
+
+    shareCallback();
+};
+
+/**
+ * 注入分享页面逻辑
+ * @returns 
+ */
+function injectShareCode() {
+    const {href, pathname} = window.location;
+    if(!(href.indexOf('facebook.com') > -1 && pathname.indexOf('dialog/share') > -1)) {
+        return;
+    }
+
+    // 设置分享内容
+    setShareInputContent();
+}
+
+/**
+ * 格式化发布内容字符串
+ */
+function formatContentStr(content) {
+    let str = content.replace(/(\r)/g,'\n');
+    return str;
+}
+
+
+/**
+ * 设置分享输入框内容
+ */
+async function setShareInputContent() {
+    let shareData = await getChromeStorage('shareFacebookData') || {};
+    const contentStr = formatContentStr(shareData.contentStr);
+
+    if (!tempData.isSetContent && contentStr) {
+        tempData.isSetContent = true;
+        document.execCommand("insertText", false, contentStr);
+        setTimeout(() => {
+            tempData.isSetContent = false;
+        }, 300)
+    }
+}
+
+/**
+ * 分享回调
+ */
+function shareCallback() {
+    if (window.location.href.indexOf(faceShareRedirectUrl) > -1) {
+        const urlParams = new URLSearchParams(window.location.search);
+        let params = JSON.parse(urlParams.get('params'));
+        if (params) {
+            chrome.storage.local.remove("shareFacebookData");
+            chrome.runtime.sendMessage({ actionType: "CONTENT_FACEBOOK_SHARE_SUCCESS", data: params }, () => { 
+
+            })
+        }
+    }
+}

src/logic/content/twitter.js

@@ -1,9 +1,9 @@
 import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
-import { throttle, getQueryString } from '@/uilts/help'
+import { throttle, getQueryString, getCookie } from '@/uilts/help'
 import { discordAuthRedirectUri } from '@/http/configAPI'
 import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
-
+import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
 
 let dom = {};
 
@@ -72,10 +72,27 @@ export function hideIframeHandler() {
 /**
  * 展示twitter原生发布框
  */
+let tweetPublishStore = {
+    showPublishDialog : false
+}
 export function showTwitterPublishDialogHandler(publishRes) {
-    dom.tweetBtn.click();
+    let bigBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    if (bigBtn) {
+        bigBtn.click();
+        tweetPublishStore.showPublishDialog = true;
+    } else {
+        let smallBtn = document.querySelector('a[href="/compose/tweet"]')
+        smallBtn && smallBtn.click();
+        tweetPublishStore.showPublishDialog = true;
+    }
+
+    setChromeStorage({ publishData: JSON.stringify(publishRes) })
+
+    addPublishTipsIframe({
+        srcContent: publishRes.copyContent
+    })
     _setPublishContent(publishRes.srcContent);
-    _publishTweetEvent(publishRes.postId, bindTwitterArtMethod);
+    _publishTweetEvent(publishRes, bindTwitterArtMethod);
 }
 
 export function showPinTips() {
@@ -100,6 +117,7 @@ function addPinedPop() {
 
     let img = document.createElement('img');
     img.src = require("@/assets/img/img-pined-guide.png");
+    img.width = 253;
 
     let contentDom = document.createElement('div');
     contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;' id='de-remind'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #1D9BF0;cursor: pointer;'>Skip</div></div>"
@@ -107,7 +125,12 @@ function addPinedPop() {
     popWrapper.appendChild(img);
     popWrapper.appendChild(contentDom);
 
-    document.querySelector('body').appendChild(popWrapper);
+    let layersDom = document.getElementById('layers');
+    if(layersDom) {
+        layersDom.appendChild(popWrapper);
+    } else {
+        document.querySelector('body').appendChild(popWrapper);
+    }
 
     let deCheck = document.querySelector('#de-check');
     let deRemind = document.querySelector('#de-remind');
@@ -143,12 +166,13 @@ let bindTwitterArt = {
  * 监听dialog内点击原生发布按钮事件
  * @private
  */
-function _publishTweetEvent(contentStr, cb) {
+function _publishTweetEvent(params, cb) {
     setTimeout(() => {
         let publishTweetBtn;
         let dialog = document.querySelector('div[role="dialog"]');
         if (dialog) {
             publishTweetBtn = dialog.querySelector('div[data-testid="tweetButton"]');
+            onClosePublishDialogHandle(dialog, params)
         } else {
             let domMain = document.querySelector('main[role="main"]');
             publishTweetBtn = domMain && domMain.querySelector('div[data-testid="tweetButton"]');
@@ -156,12 +180,48 @@ function _publishTweetEvent(contentStr, cb) {
 
         publishTweetBtn && publishTweetBtn.addEventListener('click', function () {
             bindTwitterArt.needBind = true;
-            bindTwitterArt.postId = contentStr;
+            bindTwitterArt.postId = params.postId;
+            tweetPublishStore.showPublishDialog = false;
+            // checkIsShowReSend(dialog, params);
             cb && cb()
         });
     }, 800)
 }
 
+function onClosePublishDialogHandle(dom, params) {
+    dom.querySelector('div[role="group"]').addEventListener('click', function () {
+        setTimeout(() => {
+            let parent = document.querySelector('div[data-testid="confirmationSheetDialog"]');
+             if(parent) {
+                 let btnArr = parent.querySelectorAll('div[role=button]')
+                 for(let i = 0; i < btnArr.length; i++) {
+                     let btn = btnArr[i];
+                     btn.addEventListener('click', function() {
+                        tweetPublishStore.showPublishDialog = false;
+                        let taskLuckdropId = JSON.parse(params.postBizData).taskLuckdropId;
+                        noticeBindTweet({ postId: params.postId, taskLuckdropId});
+                     })
+                 }
+             } else {
+                 setTimeout(() => {
+                    let dialog = document.querySelector('div[role="dialog"]');
+                    if(!dialog) {
+                        tweetPublishStore.showPublishDialog = false;
+                    }
+                 }, 800)
+             }
+        }, 1000)
+     })
+}
+
+function checkIsShowReSend(dom, params) {
+    let str = dom.querySelector('div[data-contents="true"]').innerHTML;
+    if (str.indexOf(params.postId) < 0) {
+        let taskLuckdropId = JSON.parse(params.postBizData).taskLuckdropId;
+        noticeBindTweet({ postId: params.postId, taskLuckdropId});
+    }
+}
+
 /**
  * 在输入推文区插入deNet按钮
  * @param parent
@@ -270,7 +330,51 @@ function _addIframe() {
     dom.iframe = iframe;
     let iframeContent = document.getElementById('iframe-content');
     if (!iframeContent) {
-        document.getElementById('layers').appendChild(iframe);
+        let layersDom = document.getElementById('layers');
+        if(layersDom) {
+            layersDom.appendChild(iframe);
+        } else {
+            document.querySelector('body').appendChild(iframe);
+        }
+        
+    }
+}
+
+function addPublishTipsIframe(params = {}) {
+    let {time = 1000} = params;
+    setTimeout(() => {
+        let dialog = document.querySelector('div[role="dialog"]').querySelector('div[role="dialog"]')
+
+        if (dialog) {
+            let right = dialog.offsetLeft - 15 - 266;
+
+            let iframe = document.createElement('iframe');
+            iframe.id = 'de-publish-tips'
+            iframe.src = chrome.runtime.getURL('/iframe/publish-tips.html');
+            iframe.style.cssText = `border: medium none; width:270px;height:500px;position: fixed; right: ${right}px; top: 5%;z-index: -1`
+            let iframeContent = document.getElementById('de-publish-tips');
+            if (!iframeContent) {
+                dialog.appendChild(iframe)
+            }
+        }
+    }, time)
+}
+
+export function noticeBindTweet(params) {
+    let iframe = document.createElement('iframe');
+    iframe.id = 'de-notice-bind-tweet';
+    iframe.src = chrome.runtime.getURL('/iframe/bind-tweet.html') + `?params=${JSON.stringify(params)}`;
+    iframe.style.cssText = `border: medium none; width:400px;min-height:313px;position: fixed; right: 16px; top: 16px;`
+    let iframeContent = document.getElementById('de-notice-bind-tweet');
+    if (!iframeContent) {
+        document.querySelector('body').appendChild(iframe)
+    }
+}
+
+export function hideNoticeBindTweet() {
+    let iframeContent = document.getElementById('de-notice-bind-tweet');
+    if (iframeContent) {
+        document.querySelector('body').removeChild(iframeContent)
     }
 }
 
@@ -316,6 +420,10 @@ let isSetContent = false;
 const _setPublishContent = throttle(function (content) {
     if (!isSetContent) {
         isSetContent = true;
+        let inputEle = document.querySelector('div[contenteditable="true"]');
+        if(inputEle) {
+            inputEle.focus();
+        }
         setTimeout(() => {
             document.execCommand("insertText", false, content);
             setTimeout(() => {
@@ -438,6 +546,20 @@ function addSliderNavDeBtn(isSmall = false) {
 function onWindowResize() {
     window.onresize = throttle(function () {
         try {
+            if(tweetPublishStore.showPublishDialog) {
+                let dialog = document.querySelector('div[role="dialog"]');
+                let dePublishTips = document.getElementById('de-publish-tips');
+                if(dialog && !dePublishTips) {
+                    addPublishTipsIframe({time: 0});
+                } else if(dialog && dePublishTips){
+                    let dialogContent = dialog.querySelector('div[role=dialog]')
+                    if(dialogContent) {
+                        let right = dialogContent.offsetLeft - 15 - 266;
+                        dePublishTips.style.right = right + 'px';
+                    }
+                }
+            }
+            
             if (window.innerWidth < 1273) {
                 let bigBtn = document.querySelector('#de-btn');
                 bigBtn && bigBtn.remove();
@@ -537,19 +659,30 @@ function onChangePageMain(targetNode) {
 // 2.监听卡片是否可见
 // 3.如果可见了 去找
 
-function setIframeRedPacket() {
+function setIframeRedPacket(type = 'twitter') {
     // 获取所有卡片参数
-    let card_json_data = parseCard.parseAllDeNetCardParmas()
-    // 过滤出可以请求的短链接
-    parseCard.getCardParmas(card_json_data).then((res) => {
-        for (let i in res.has_post_Id_card_data) {
-            parseCard.replaceDOMRedPacket(res.has_post_Id_card_data[i])
-        }
-        if (res.need_net_short_url.length > 0) {
-            // 请求短链接
-            chrome.runtime.sendMessage({ actionType: "CONTENT_TWITTER_SHORT_LINK", data: "", arr_url: res.need_net_short_url }, () => { })
-        }
-    })
+    let card_json_data
+    switch (type) {
+        case 'facebook':
+            card_json_data = parseCard.parseFacebookCardParmas()
+            for (let i in card_json_data) {
+                parseCard.replaceFacebookPacket(card_json_data[i])
+            }
+            break;
+        default:
+            card_json_data = parseCard.parseAllDeNetCardParmas()
+            // 过滤出可以请求的短链接
+            parseCard.getCardParmas(card_json_data).then((res) => {
+                for (let i in res.has_post_Id_card_data) {
+                    parseCard.replaceDOMRedPacket(res.has_post_Id_card_data[i])
+                }
+                if (res.need_net_short_url.length > 0) {
+                    // 请求短链接
+                    chrome.runtime.sendMessage({ actionType: "CONTENT_TWITTER_SHORT_LINK", data: "", arr_url: res.need_net_short_url }, () => { })
+                }
+            })
+            break;
+    }
 }
 
 // 监听点击发推 按钮绑定事件
@@ -587,22 +720,23 @@ const createIframe = ({ url, tweet_Id }, callback) => {
 // 初始化
 export function init() {
     getDiscordAuthCode();
-    if (window.location.href.indexOf('twitter.com') < 0) {
+    let where = window.location.href.indexOf('twitter.com') < 0 && window.location.href.indexOf('facebook.com') < 0;
+    if (where) {
         return
     }
     twitterPinLogin();
     // 渲染dom
-    let targetNode = null
+
     let timer = setInterval(() => {
-        targetNode = document.querySelector('main')
-        if (targetNode) {
+        let inTwitter = window.location.href.includes('twitter.com');
+        let inTwitterNode = document.querySelector('main');
+        let inFacebook = window.location.href.includes('facebook.com');
+        let inFacebookNode = document.querySelector('#facebook');
+        if (inTwitter && inTwitterNode) {
             clearInterval(timer)
             setInterval(() => {
-                if (window.location.href.includes('twitter.com)')) {
-                    return
-                }
                 if (!main_observer) {
-                    onChangePageMain(targetNode)
+                    onChangePageMain(inTwitterNode)
                     changeQueueNum(1)
                 }
                 if (queue_num <= 0) {
@@ -610,35 +744,181 @@ export function init() {
                 }
                 setIframeRedPacket()
                 checkHasDeBtn()
+                checkHasSliderDeBtn();
+                changeQueueNum(-1)
+            }, 1000)
+        } else if (inFacebook && inFacebookNode) {
+            clearInterval(timer)
+            setInterval(() => {
+                if (!main_observer) {
+                    onChangePageMain(inFacebookNode)
+                    changeQueueNum(1)
+                }
+                if (queue_num <= 0) {
+                    return
+                }
+                setIframeRedPacket('facebook')
                 changeQueueNum(-1)
             }, 1000)
         }
     }, 1000);
     renderDom();
-    checkTwitterTaskState()
+    checkTwitterTaskState();
+
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
         if (res && res.show) {
             setTimeout(() => {
                 showTwitterPublishDialogHandler({
                     srcContent: res.srcContent,
-                    postId: res.postId
+                    postId: res.postId,
+                    copyContent: res.copyContent || ''
                 });
             }, 1500);
             chrome.storage.local.remove("popupShowPublishDialog");
         }
     });
     getChromeStorage("userSettings", (res) => {
-        addPinedPop();
-        if (res && !res.isOnToolbar) {
-            setTimeout(() => {
-                showPinTips();
-                chrome.storage.local.remove("userSettings");
-            }, 800);
-        }
+        setTimeout(() => {
+            addPinedPop();
+            if (res && !res.isOnToolbar) {
+                setTimeout(() => {
+                    showPinTips();
+                    chrome.storage.local.remove("userSettings");
+                }, 800);
+            }
+        }, 800);
     });
 }
 
+function checkHasSliderDeBtn() {
+    let deBtn = document.getElementById('de-btn');
+    let deBtn3 = document.getElementById('de-btn3');
+    if(!deBtn && !deBtn3) {
+        addSliderNavDeBtn();
+    }
+}
+
+export function facebookReplyTweet(params) {
+    if (window.location.origin.indexOf('twitter.com')) {
+        const urlParams = new URLSearchParams(window.location.search);
+        const actionType = urlParams.get('actionType');
+        let deReplyParams = urlParams.get('deReplyParams') || '{}';
+        deReplyParams = JSON.parse(deReplyParams);
+        if (actionType == 'denetFacebookToTwitterReply') {
+            if (params.postId == deReplyParams.postId) {
+                let iframe = document.getElementById(params.postId);
+                iframe.contentWindow.postMessage({ actionType: 'CONTENT_RED_PACKET_FACEBOOK_REPLY', data: deReplyParams }, '*');
+            }
+        }
+    }
+}
+
+export function replyHandle(params) {
+    let iframe = window.parent.document.getElementById(params.postId);
+    let replyBtn = iframe.parentNode.parentNode.querySelector('div[data-testid="reply"]') ||
+        iframe.parentNode.parentNode.parentNode.querySelector('div[data-testid="reply"]');
+    if (replyBtn) {
+        replyBtn.click();
+    }
+    onReplyDialogOpen(params, iframe);
+
+    // 详情页推文底部评论处理
+    let pathNameArr = window.location.pathname.split('/');
+    if (pathNameArr.length >= 2 && pathNameArr[pathNameArr.length - 2] == 'status') {
+        let tweetReply = document.querySelector('div[data-testid="tweetButtonInline"]');
+        if(tweetReply) {
+            tweetReply.addEventListener('click', function() {
+                let eleList = tweetReply.parentNode.parentNode.parentNode.parentNode.parentNode.querySelectorAll('span[data-text="true"]');
+                reportReplyResult(eleList, params, () => {
+                    // iframe.contentWindow.postMessage({ actionType: 'CONTENT_RED_PACKET_REPLY_RASK_FINSH', data: {} }, '*');
+                    chrome.runtime.sendMessage({ actionType: "CONTENT_RED_PACKET_REPLY_RASK_FINSH", data : {postId: params.postId}}, () => { })
+                });
+            })
+        }
+    }
+}
+
+export function onTweetReplyClick(params) {
+    let iframe = window.parent.document.getElementById(params.postId);
+    let replyBtn = iframe.parentNode.parentNode.querySelector('div[data-testid="reply"]') ||
+        iframe.parentNode.parentNode.parentNode.querySelector('div[data-testid="reply"]');
+    if (replyBtn) {
+        replyBtn.addEventListener('click', () => {
+            onReplyDialogOpen(params, iframe);
+        })
+    }
+}
+
+function onReplyDialogOpen(params, iframe) {
+    setTimeout(() => {
+        let dialog = document.querySelector('div[role="dialog"]');
+        let replyBtn; 
+        
+        if (dialog) {
+            let dialogContent  = dialog.querySelector('div[role="dialog"]');
+            replyBtn = dialog.querySelector('div[data-testid="toolBar"]').querySelector('div[data-testid="tweetButton"]');
+            if(dialogContent) {
+                let width = dialogContent.offsetWidth;
+                let ele = document.createElement('div');
+                ele.innerText = 'Tag 3 friends to complete the task';
+                ele.style.cssText = `width: ${width}px; height: 38px; color: #fff; font-weight: 600;
+                font-size: 16px; display: flex; align-items: center; justify-content: center; background: #1D9BF0;
+                opacity: 0.8; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1000`;
+    
+                dialogContent.style.top = '80px';
+                dialogContent.parentNode.appendChild(ele);
+            }
+        } else {
+            dialog = document.querySelector('main[role="main"]');
+            if(dialog) {
+                replyBtn = dialog.querySelector('div[data-testid="tweetButton"]');
+            }
+        }
+
+        if(dialog && replyBtn) {
+            replyBtn.addEventListener('click', function () {
+                let eleList = dialog.querySelector('div[contenteditable="true"]').querySelectorAll('span[data-text="true"]');
+                reportReplyResult(eleList, params, () => {
+                    // 上報完成
+                    // iframe.contentWindow.postMessage({ actionType: 'CONTENT_RED_PACKET_REPLY_RASK_FINSH', data: {} }, '*');
+                    chrome.runtime.sendMessage({ actionType: "CONTENT_RED_PACKET_REPLY_RASK_FINSH", data : {postId: params.postId}}, () => { })
+                })
+            });
+        }
+    }, 1000);
+}
+
+const reportReplyResult = throttle(function (eleList, params, cb) {
+    if (eleList && eleList.length) {
+        let atList = [];
+        for (let i = 0; i < eleList.length; i++) {
+            let item = eleList[i];
+            // 是否有中文
+            let reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g;
+
+            if (item && item.innerText.startsWith('@') && !reg.test(item.innerText)) {
+                atList.push(item.innerText);
+            }
+        }
+
+        atList = Array.from(new Set(atList));
+
+        if (atList.length >= 3) {
+            fetchAddFinishEvent({
+                eventType: params.type,
+                luckdropId: params.taskLuckdropId
+            }).then(res => {
+                if (res.code == 0) {
+                    cb && cb();
+                }
+            })
+        }
+    }
+}, 800);
+
+
+
 // 根据推特id找到dom，完成任务
 export function findTweetByIdDoTask({ tweet_Id = '', follow_names = [] }, task_type = 'like') {
     // 1.根据推特ID寻找推文，获取卡片
@@ -743,4 +1023,136 @@ export function checkTwitterTaskState() {
             }
         }
     }, 1000)
+}
+
+export function getTweetAuthorByDom(params) {
+    let iframe = document.getElementById(params.postId);
+    if(!iframe) {
+        return;
+    }
+    let fullNameDom;
+    let pathNameArr = window.location.pathname.split('/');
+    if (pathNameArr.length >= 2 && pathNameArr[pathNameArr.length - 2] == 'status') {
+        fullNameDom = iframe.parentNode.parentNode.parentNode.parentNode.querySelector('a[role=link]');
+    } else {
+        fullNameDom = iframe.parentNode.parentNode.parentNode.querySelector('a[role=link]');
+    }
+    if (fullNameDom) {
+        let arr = fullNameDom.href.split('/');
+        if (arr.length) {
+            let fullName = arr[arr.length - 1];
+            if (fullName) {
+                iframe.contentWindow.postMessage({ actionType: 'CONTENT_RED_PACKET_GET_TWEET_AUTHOR', data: { fullName } }, '*');
+            }
+        }
+    }
+}
+export function doTaskTwitterAPI({ task_data, task_type }) {
+    switch (task_type) {
+        case 'like':
+            TwitterLikeAPI(task_data.tweet_Id)
+            break
+        case 'retweet':
+            TwitterRetweetAPI(task_data.tweet_Id)
+            break
+        case 'follow':
+            task_data.follow_data.forEach((item) => {
+                if (item.name && item.twitterUserId) {
+                    TwitterFollowAPI(item, task_data.tweet_Id)
+                }
+            })
+            break
+    }
+}
+
+const TwitterFollowAPI = (item, tweet_Id) => {
+    fetch("https://twitter.com/i/api/1.1/friendships/create.json", {
+        "headers": {
+            "authorization": "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA",
+            "content-type": "application/x-www-form-urlencoded",
+            "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"102\", \"Google Chrome\";v=\"102\"",
+            "sec-ch-ua-mobile": "?0",
+            "sec-ch-ua-platform": "\"macOS\"",
+            "x-csrf-token": getCookie('ct0'),
+            "x-twitter-active-user": "yes",
+            "x-twitter-auth-type": "OAuth2Session",
+            "x-twitter-client-language": "zh-cn"
+        },
+        "referrer": "https://twitter.com/home",
+        "referrerPolicy": "strict-origin-when-cross-origin",
+        "body": "include_profile_interstitial_type=1&include_blocking=1&include_blocked_by=1&include_followed_by=1&include_want_retweets=1&include_mute_edge=1&include_can_dm=1&include_can_media_tag=1&include_ext_has_nft_avatar=1&skip_status=1&user_id=" + item.twitterUserId + "",
+        "method": "POST",
+        "mode": "cors",
+        "credentials": "include"
+    }).then(() => {
+        let task_data = {
+            follow_name: item.name
+        }
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'follow', task_data, task_done: true }, () => { })
+    }).catch(() => {
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'follow', task_data, task_done: false }, () => { })
+    })
+}
+
+
+const TwitterRetweetAPI = (tweet_Id) => {
+    fetch("https://twitter.com/i/api/graphql/ojPdsZsimiJrUGLR1sjUtA/CreateRetweet", {
+        "headers": {
+            "accept": "*/*",
+            "accept-language": "zh,en;q=0.9,zh-CN;q=0.8",
+            "authorization": "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA",
+            "content-type": "application/json",
+            "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"102\", \"Google Chrome\";v=\"102\"",
+            "sec-ch-ua-mobile": "?0",
+            "sec-ch-ua-platform": "\"macOS\"",
+            "sec-fetch-dest": "empty",
+            "sec-fetch-mode": "cors",
+            "sec-fetch-site": "same-origin",
+            "x-csrf-token": getCookie('ct0'),
+            "x-twitter-active-user": "yes",
+            "x-twitter-auth-type": "OAuth2Session",
+            "x-twitter-client-language": "zh-cn"
+        },
+        "referrer": "https://twitter.com/home",
+        "referrerPolicy": "strict-origin-when-cross-origin",
+        "body": "{\"variables\":{\"tweet_id\":\"" + tweet_Id + "\",\"dark_request\":false},\"queryId\":\"ojPdsZsimiJrUGLR1sjUtA\"}",
+        "method": "POST",
+        "mode": "cors",
+        "credentials": "include"
+    }).then(() => {
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'retweet', task_data: '', task_done: true }, () => { })
+    }).catch(() => {
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'retweet', task_data: '', task_done: false }, () => { })
+    })
+}
+
+const TwitterLikeAPI = (tweet_Id) => {
+    fetch("https://twitter.com/i/api/graphql/lI07N6Otwv1PhnEgXILM7A/FavoriteTweet", {
+        "headers": {
+            "accept": "*/*",
+            "accept-language": "zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7",
+            "authorization": "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA",
+            "content-type": "application/json",
+            "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"101\", \"Google Chrome\";v=\"101\"",
+            "sec-ch-ua-mobile": "?0",
+            "sec-ch-ua-platform": "\"Windows\"",
+            "sec-fetch-dest": "empty",
+            "sec-fetch-mode": "cors",
+            "sec-fetch-site": "same-origin",
+            "x-csrf-token": getCookie('ct0'),
+            "x-twitter-active-user": "yes",
+            "x-twitter-auth-type": "OAuth2Session",
+            "x-twitter-client-language": "en"
+        },
+        "referrer": "https://twitter.com/home",
+        "referrerPolicy": "strict-origin-when-cross-origin",
+        "body": "{\"variables\":{\"tweet_id\":\"" + tweet_Id + "\"},\"queryId\":\"lI07N6Otwv1PhnEgXILM7A\"}",
+        "method": "POST",
+        "mode": "cors",
+        "credentials": "include"
+    }).then(() => {
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'like', task_data: '', task_done: true }, () => { })
+    }).catch(() => {
+        chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'like', task_data: '', task_done: false }, () => { })
+    })
 }

src/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "DeNet",
     "description": "Growing more twitter followers with Denet",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "background": {
         "service_worker": "/js/background.js"
     },
@@ -20,6 +20,8 @@
             "matches": [
                 "https://*.twitter.com/*",
                 "https://twitter.com/*",
+                "https://www.facebook.com/*",
+                "https://facebook.com/*",
                 "*://testh5.denetme.net/*",
                 "*://h5.denetme.net/*",
                 "*://preh5.denetme.net/*"
@@ -33,6 +35,8 @@
     "host_permissions": [
         "*://*.twitter.com/*",
         "*://twitter.com/*",
+        "*://*.facebook.com/*",
+        "*://facebook.com/*",
         "*://testh5.denetme.net/*",
         "*://h5.denetme.net/*",
         "*://preh5.denetme.net/*"
@@ -52,7 +56,9 @@
             "resources": [
                 "/iframe/publish.html",
                 "/iframe/red-packet.html",
-                "/iframe/home.html"
+                "/iframe/home.html",
+                "/iframe/publish-tips.html",
+                "/iframe/bind-tweet.html"
             ],
             "matches": [
                 "<all_urls>"

src/uilts/help.js

@@ -87,4 +87,17 @@ export function getBit (value) {
   } else {
     return value;
   }
+}
+
+export function getCookie(name){
+  var strcookie = document.cookie;//获取cookie字符串
+  var arrcookie = strcookie.split("; ");//分割
+  //遍历匹配
+  for ( var i = 0; i < arrcookie.length; i++) {
+      var arr = arrcookie[i].split("=");
+      if (arr[0] == name){
+          return arr[1];
+      }
+  }
+  return "";
 }

src/view/components/currency-list.vue

@@ -354,6 +354,11 @@ defineExpose({
 
             .right {
                 text-align: right;
+                max-width: calc(100% - 150px);
+                
+                .num, .amount {
+                    word-break: break-all;
+                }
 
                 .num {
                     font-weight: 500;

src/view/components/font-amount.vue

@@ -1,7 +1,7 @@
 <template>
-    <div :style="{ fontSize: amount_font_size + 'px' }">
+    <div>
         <a-tooltip :title="amount" >
-            <span class="content" :style="{ fontSize: amount_font_size + 'px' }">{{ getBit(amount) }}</span>
+           <span class="content" :style="{ fontSize: amount_font_size + 'px' }">{{ getBit(amount) }}</span>
         </a-tooltip>
     </div>
 </template>

src/view/components/popup-transactions.vue

@@ -341,7 +341,7 @@ const listScroll = (e) => {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                border-bottom: 1px solid #d1d1d1;
+                border-bottom: 1px solid #ECECEC;
                 box-sizing: border-box;
                 padding: 10px 12px 10px 0;
 
@@ -356,7 +356,7 @@ const listScroll = (e) => {
 
                     .time {
                         font-size: 12px;
-                        color: #b6b6b6;
+                        color: #B0B0B0;
                     }
                 }
 

src/view/iframe/bind-tweet/bind-tweet.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="bind-tips-wrapper">
+        <img  :src="require('@/assets/svg/icon-close.svg')" class="icon-close" @click="close">
+        <div class="top">
+            <img :src="require('@/assets/svg/icon-giveaways-notice.svg')" class="icon-give-box">
+            <div class="text">
+                oops, you failed to send giveaway
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <div class="re-send" @click="seSend">Resend</div>
+            <div class="terminate" v-if="submitData.taskLuckdropId"  @click="terminate">Terminate for a refund</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+import { ElMessage } from 'element-plus'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { getQueryString } from '@/uilts/help.js'
+import { terminatedLuckdrop } from "@/http/redPacket";
+
+let submitData = ref({
+    taskLuckdropId: ''
+});
+
+const close = () => {
+    window.parent.postMessage({ actionType: "IFRAME_CLOSE_BIND_TWEET",  data: {
+    }}, "*");
+}
+
+const seSend = async () => {
+    let publishData = await getChromeStorage('publishData');
+    callEventPageMethod(
+        "POPUP_PUBLISH_TWITTER_RED_PACK",
+        {...publishData},
+        function (response) {
+            close();
+            console.log("res", response);
+        }
+    );
+}
+
+const terminate = () => {
+    terminatedLuckdrop({
+        params: {
+            luckdropId: submitData.value.taskLuckdropId
+        }
+    }).then(res => {
+        close();
+    });
+}
+
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+    chrome.runtime.sendMessage(
+        { 
+            actionType: actionType, 
+            data: data 
+        },
+        function (response) {
+            if (typeof callback === "function") callback(response);
+        }
+    );
+};
+
+
+onMounted(() => {
+    let params = getQueryString('params');
+    submitData.value = JSON.parse(params);
+}) 
+
+</script>
+
+<style scoped lang="scss">
+.bind-tips-wrapper {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 20px;
+    padding: 15px;
+    position: relative;
+    box-shadow: 0px 4px 30px 0px #00000033;
+
+
+    .icon-close {
+        position: absolute;
+        left: 14px;
+        top: 14px;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+    }
+
+    .top {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-top: 35px;
+
+        .icon-give-box {
+            width: 60px;
+            height: 60px;
+            margin-bottom: 20px;
+        }
+
+        .text {
+            font-weight: 590;
+            font-size: 18px;
+        }
+    }
+
+    .button-wrapper {
+        margin-top: 26px;
+
+        .re-send, .terminate {
+            width: 360px;
+            height: 43px;
+            border-radius: 100px;
+            font-weight: 500;
+            font-size: 17px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+        
+        .re-send {
+            background: #1D9BF0;
+            margin-bottom: 12px;
+            color: #FFFFFF;
+        }
+
+        .terminate {
+            color: #1D9BF0;
+            border: 1px solid #ECECEC;
+        }
+    }
+}
+</style>

src/view/iframe/publish-tips/publish-tips.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="publish-tips-wrapper">
+        <div class="top">
+            <img src="@/assets/svg/icon-bells.svg" class="icon-bells">
+            <div class="text-wrapper">
+                <div>
+                    Do not delete the
+                </div>
+                <div>
+                    <span>#DeNet </span>and<span> Giveaway link</span>
+                    otherwise the giveaway will not be available
+                </div>
+            </div>
+        </div>
+        <div class="copy-btn" 
+            :data-clipboard-text="strContent" 
+            @click="copyToken">Copy giveaways link</div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+import { message } from 'ant-design-vue';
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+
+let ClipboardJS = require('clipboard');
+
+let strContent = ref('');
+
+const copyToken = () => {
+    var clipboard = new ClipboardJS('.copy-btn');
+    clipboard.on('success', function (e) {
+        message.success('copy success');
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function (e) {
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+}
+
+const setSrcContent = async () => {
+    let publishData = await getChromeStorage('publishData');
+    strContent.value = publishData.copyContent;
+}
+
+
+onMounted(() => {
+    setSrcContent();
+}) 
+
+</script>
+
+<style  lang="scss">
+body {
+    overflow-y: hidden;
+}
+.publish-tips-wrapper {
+    width: 100%;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 12px;
+    padding: 15px;
+    margin-top: 88px;
+    .top {
+        display: flex;
+
+        .icon-bells {
+            width: 30px;
+            height: 30px;
+            margin-right: 8px;
+        }
+
+        .text-wrapper {
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 17px;
+
+            span {
+                color: red;
+            }
+        }
+    }
+
+    .copy-btn {
+        margin-top: 20px;
+        background: rgba(56, 154, 255, 0.01);
+        border: 1px solid #000000;
+        border-radius: 100px;
+        font-weight: 500;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 33px;
+        cursor: pointer;
+    }
+}
+</style>

src/view/iframe/publish/give-dialog.vue

@@ -162,64 +162,97 @@
                                     Recommend winners 100～10000
                                 </div>
                             </div>
-                            <div class="form-label">Tasks</div>
+                            <div class="form-label">
+                                <div>
+                                    Tasks
+                                </div>
+                                <!-- <div>
+                                    <el-dropdown trigger="click">
+                                        <img src="@/assets/svg/icon-add-task.svg" 
+                                            class="icon-add-task"
+                                            v-show="formList.some(item => !item.show)">
+                                        <template #dropdown>
+                                            <el-dropdown-menu>
+                                                <div  v-for="(item, key) in formList" :key="key"
+                                                     @click="clickDropdown(item, key)">
+                                                    <el-dropdown-item style="height: 50px;width: 240px" v-if="!item.show">
+                                                        <img :src="item.icon" style="width: 20px; height: 20px;margin-right: 12px" />
+                                                        {{item.label}}
+                                                    </el-dropdown-item>
+                                                </div>
+                                            </el-dropdown-menu>
+                                        </template>
+                                    </el-dropdown>
+                                </div> -->
+                            </div>
 
                             <!-- 转推、like、关注 -->
                             <div class="form-require">
                                 <div
-                                    class="form-item"
                                     v-for="(item, index) in formList"
                                     :key="index"
                                 >
-                                    <div class="item-left">
-                                        <div class="label">
-                                            <img
-                                                class="icon"
-                                                :src="item.icon"
-                                            />
-                                            {{ item.label }}
-                                        </div>
-                                        <div
-                                            class="control"
-                                            v-if="item.nodeType == 'textarea'"
-                                        >
-                                            <follow-input
-                                                :isAddSelf="!isBack"
-                                                :atUserList="atUserList"
-                                                @addUser="addFollowUser"
-                                                @setUser="setFollowUser"
-                                                @delUser="delFollowUser"
-                                            ></follow-input>
-                                        </div>
-                                        <!-- join discord -->
-                                        <div
-                                            class="control"
-                                            v-if="item.nodeType == 'input'"
-                                        >
-                                            <div v-if="showDiscordInvitePop" 
-                                                class="discord-invite-info"
-                                                @click="showDiscordInvitePop = false">
-                                                <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
-                                                <span class="name">{{discordInviteInfo.name}}</span>
+                                    <div v-if="item.show"  class="form-item"    
+                                        :class="{ 'border-hide': formList.length - 1 == index }">
+                                        <div class="item-left">
+                                            <div class="label">
+                                                <img
+                                                    class="icon"
+                                                    :src="item.icon"
+                                                />
+                                                {{ item.label }}
+                                            </div>
+                                            <div
+                                                class="control"
+                                                v-if="item.nodeType == 'textarea'"
+                                            >
+                                                <follow-input
+                                                    :isAddSelf="!isBack"
+                                                    :atUserList="atUserList"
+                                                    @addUser="addFollowUser"
+                                                    @setUser="setFollowUser"
+                                                    @delUser="delFollowUser"
+                                                ></follow-input>
                                             </div>
-                                            <input v-model="item.text" 
-                                                placeholder="Enter discord invite link"
-                                                class="discord-address" 
-                                                @input="onIptDiscordAddress($event, index)"
-                                                @blur="onBlurDiscordAddress($event, index)" />
+                                            <!-- join discord -->
+                                            <div
+                                                class="control"
+                                                v-if="item.nodeType == 'input'"
+                                            >
+                                                <div v-if="showDiscordInvitePop" 
+                                                    class="discord-invite-info"
+                                                    @click="showDiscordInvitePop = false">
+                                                    <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
+                                                    <span class="name">{{discordInviteInfo.name}}</span>
+                                                </div>
+                                                <input v-model="item.text" 
+                                                    placeholder="Enter discord invite link"
+                                                    class="discord-address" 
+                                                    @input="onIptDiscordAddress($event, index)"
+                                                    @blur="onBlurDiscordAddress($event, index)" />
+                                            </div>
+                                        </div>
+                                        
+                                        <div>
+                                            <el-switch
+                                                v-if="item.type > 3"
+                                                v-model="item.checked"
+                                                @change="formSwitchChange($event, item, index)"
+                                            />
+                                            <!-- <img src="@/assets/svg/icon-task-close.svg" 
+                                                class="icon-task-close"
+                                                @click="hideTask(item, index)"> -->
                                         </div>
+                                        <!-- 
+                                            v-if="item.type == 2 || item.type == 3 || item.type == 7 || item.type == 8 || item.type == 9"
+
+                                            <img
+                                            v-if="item.type == 3"
+                                            :src="
+                                                require('@/assets/svg/icon-option-checked.svg')
+                                            "
+                                        /> -->
                                     </div>
-                                    <el-switch
-                                        v-if="item.type == 2 || item.type == 7"
-                                        v-model="item.checked"
-                                        @change="formSwitchChange($event, item, index)"
-                                    />
-                                    <img
-                                        v-if="item.type == 3"
-                                        :src="
-                                            require('@/assets/svg/icon-option-checked.svg')
-                                        "
-                                    />
                                 </div>
                             </div>
                             <!-- 机器人 -->
@@ -412,7 +445,7 @@ import { getFrontConfig } from "@/http/account";
 import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
 import { debounce, getBit } from "@/uilts/help"
 import Report from "@/log-center/log"
-import { ElMessage, ElLoading } from "element-plus";
+import { ElMessage, ElLoading, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
 import "element-plus/es/components/message/style/css";
 
 import {create, all} from "mathjs";
@@ -547,25 +580,45 @@ let iptErrType = ''; //discord
 let formList = reactive([
     {
         label: "Follow",
-        icon: require("@/assets/svg/icon-follow.svg"),
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "textarea",
         type: 1,
         text: [],
         checked: true,
+        show: true
     },
     {
-        label: "Retweet",
-        icon: require("@/assets/svg/icon-retweet.svg"),
+        label: "Retweet & Like",
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "div",
         type: 3,
         checked: true,
+        show: true
     },
     {
         label: "Like Tweet",
-        icon: require("@/assets/svg/icon-like.svg"),
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "div",
         type: 2,
         checked: true,
+        show: false
+    },
+    {
+        label: "Comment and Tag 3 friends",
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
+        nodeType: "div",
+        type: 9,
+        checked: true,
+        show: true
+    },
+    {
+        label: "Repost to Facebook",
+        icon: require("@/assets/svg/icon-task-facebook.svg"),
+        nodeType: "div",
+        text: '',
+        type: 8,
+        checked: true,
+        show: true
     },
     {
         label: "Join Discord",
@@ -574,6 +627,7 @@ let formList = reactive([
         text: '',
         type: 7,
         checked: true,
+        show: true
     },
 ]);
 
@@ -861,15 +915,14 @@ const submitRequest = async () => {
     let { amountValue = 0, totalCount = 0 } = baseFormData;
     baseFormData.amountCurrencyCode = currentCurrencyInfo.value.currencyCode;
     // 组装提交参数
-    formList[0]["text"] = atUserList.value;
 
     let finishConditions = [];
     for (let i = 0; i < formList.length; i++) {
         let item = {};
         item.type = formList[i]["type"];
-        if (item.type == 1 && formList[i]["text"]) {
+        if (item.type == 1 && atUserList.value.length) {
             // follow 参数
-            let relatedUsers = formList[i]["text"];
+            let relatedUsers = atUserList.value;
             item.relatedUsers = relatedUsers;
             finishConditions.push(item);
         } else  if (formList[i]["type"] == 7) {
@@ -879,6 +932,7 @@ const submitRequest = async () => {
                 finishConditions.push(item);
             }
         } else  if (formList[i]["checked"]) {
+            // 其余任务
             finishConditions.push(item);
         }
     }
@@ -942,7 +996,6 @@ const initParams = () => {
     resetFormIpt();
 
     // clear follow value
-    formList[0].text = [];
     atUserList.value = [];
 
     submitIng.value = false;
@@ -954,11 +1007,16 @@ const initParams = () => {
     currentCurrencyInfo.value = {};
 
     // clear discord value
-    formList[3].text = '';
+    setDiscordIptTxt({text: ''});
 
     discordInviteInfo.value = {};
 };
 
+const setDiscordIptTxt = ({text}) => {
+    const index = formList.findIndex(item => item.type == 7);
+    formList[index]['text'] = text;
+}
+
 /**
  * 支付完成回调
  */
@@ -1149,21 +1207,37 @@ const onIptSetErrorTxt = (params = {}) => {
  * 监听开关触发事件
  */
 const formSwitchChange = (val, params, index) => {
-    console.log('formSwitchChange')
-    if(!val) {
-        if(params.type == 7) {
+    closeDiscordTask(val, params, index);
+}
+
+
+const hideTask = (params, index) => {
+    formList[index]['checked'] = false;
+    formList[index]['show'] = false;
+    closeDiscordTask(false, {type: 7}, index)
+}
+
+const clickDropdown = (params, index) => {
+    formList[index]['show'] = true;
+    formList[index]['checked'] = true;
+}
+
+const closeDiscordTask = (val, params, index) => {
+    if(params.type == 7) {
+        if(!val) {
             //错误类型 discord 清空discord错误校验
             if(iptErrType == 'discord') {
                 iptErrMsgTxt.value = '';
                 formList[index]['text'] = '';
                 onIptSetErrorTxt();
             }
+        } else {
+            onIptSetErrorTxt();
         }
-    } else {
-        onIptSetErrorTxt();
     }
 }
 
+
 /** 监听 discord 输入 */
 const onIptDiscordAddress = (e, index) => {
     let val = formList[index].text;
@@ -1172,6 +1246,8 @@ const onIptDiscordAddress = (e, index) => {
         checked = true;
         formList[index].checked = checked;
         formList[index].text = formList[index].text.replace(/\s/g,'');
+    } else if(!val){
+        discordInviteInfo.value = {};
     }
     onIptDiscordDebounce()
 }
@@ -1764,6 +1840,13 @@ onMounted(() => {
                         margin-bottom: 10px;
                         font-weight: 500;
                         font-size: 14px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .icon-add-task {
+                            cursor: pointer;
+                        }
                     }
 
                     .form-require {
@@ -1799,7 +1882,7 @@ onMounted(() => {
                             }
 
                             .control {
-                                min-width: 280px;
+                                min-width: 258px;
                                 margin-left: 18px;
                                 box-sizing: border-box;
                                 border-left: 1px solid #ECECEC;
@@ -1851,8 +1934,13 @@ onMounted(() => {
                                     }
                                 }
                             }
+
+                            .icon-task-close {
+                                margin-left: 6px;
+                                cursor: pointer;
+                            }
                         }
-                        .form-item:last-child {
+                        .border-hide {
                             border-bottom: none !important;
                         }
                     }

src/view/iframe/red-packet/red-packet.vue

@@ -23,11 +23,12 @@
       </div>
 
       <div class="list">
-        <div class="item" v-for="item, i in state.detail.taskCondition" v-bind:key="i">
-          <template v-if="item.type == 1 && item.relatedUsers && item.relatedUsers.length > 0">
+        <template v-for="item, i in state.detail.taskCondition" v-bind:key="i">
+          <div class="item" v-if="item.type == 1 && item.relatedUsers && item.relatedUsers.length > 0">
             <div class="item-content">
               <div class="item-follow-title">
-                <img :src="require('@/assets/svg/icon-follow.svg')" alt />
+                <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
+                <!-- <img :src="require('@/assets/svg/icon-follow.svg')" alt /> -->
                 <div class="item-title">Follow</div>
                 <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                   v-show="!state.done.follow && state.done.follow_red" />
@@ -40,16 +41,17 @@
                     <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                     <img :src="require('@/assets/svg/icon-true-ed.svg')" alt />
                   </div>
-                  <div class="item-follow" v-else @click="clickFollowAll([{ name: item2.name }])">
+                  <div class="item-follow" v-else @click="clickFollowAll([item2])">
                     <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                     <img :src="require('@/assets/svg/icon-add.svg')" alt />
                   </div>
                 </template>
               </div>
             </div>
-          </template>
-          <template v-if="item.type == 2">
-            <img :src="require('@/assets/svg/icon-like.svg')" alt />
+          </div>
+          <div class="item" v-if="item.type == 2">
+            <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
+            <!-- <img :src="require('@/assets/svg/icon-like.svg')" alt /> -->
             <div class="item-content">
               <div class="item-title">Like</div>
             </div>
@@ -57,9 +59,10 @@
               v-show="!state.done.like && state.done.like_red" />
             <img v-if="state.done.like" :src="require('@/assets/svg/icon-true.svg')" alt />
             <div v-else class="btn" @click="clickLikeBtn">Like</div>
-          </template>
-          <template v-if="item.type == 3">
-            <img :src="require('@/assets/svg/icon-retweet.svg')" alt />
+          </div>
+          <div class="item" v-if="item.type == 3">
+            <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
+            <!-- <img :src="require('@/assets/svg/icon-retweet.svg')" alt /> -->
             <div class="item-content">
               <div class="item-title">Retweet</div>
             </div>
@@ -67,8 +70,31 @@
               v-show="!state.done.retweet && state.done.retweet_red" />
             <img v-if="state.done.retweet" :src="require('@/assets/svg/icon-true.svg')" alt />
             <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
-          </template>
-          <template v-if="item.type == 7">
+          </div>
+          <!-- Comment、艾特 friends -->
+          <div class="item" v-if="item.type == 9">
+            <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
+            <div class="item-content">
+              <div class="item-title">Comment and Tag 3 friends</div>
+            </div>
+            <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
+              v-show="!state.done.reply && state.done.reply_red" />
+            <img v-if="state.done.reply" :src="require('@/assets/svg/icon-true.svg')" alt />
+            <div v-else class="btn" @click="clickReply(item)">Comment</div>
+          </div>
+          <!-- repost feacebook -->
+          <div class="item" v-if="item.type == 8">
+            <img :src="require('@/assets/svg/icon-task-facebook.svg')" alt />
+            <div class="item-content">
+              <div class="item-title">Repost to Facebook</div>
+            </div>
+            <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
+              v-show="!state.done.repost_facebook && state.done.repost_facebook_red" />
+            <img v-if="state.done.repost_facebook" :src="require('@/assets/svg/icon-true.svg')" alt />
+            <div v-else class="btn" @click="clickRepostFacebook(item)">Repost</div>
+          </div>
+          <!-- join discord  -->
+          <div class="item" v-if="item.type == 7">
             <img :src="require('@/assets/svg/icon-discord-mini.svg')" alt />
             <div class="item-content">
               <div class="item-title">Join Discord</div>
@@ -84,8 +110,8 @@
                 Join
               </div>
             </template>
-          </template>
-        </div>
+          </div>
+        </template>
       </div>
       <!-- <div class="people" @click="clickRoad">
         <div class="txt">
@@ -155,8 +181,7 @@
           <div class="luck-content">
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
-
-            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
+            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm') }}</div>
           </div>
           <div class="luck-money">
             <img :src="state.detail.currencyIconPath" alt />
@@ -345,11 +370,12 @@ import { getQueryString, guid, getBit } from '@/uilts/help.js'
 import { message } from 'ant-design-vue';
 import FontAmount from '@/view/components/font-amount.vue'
 import GetMore from '@/view/iframe/publish/components/get-more.vue'
-import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { setChromeStorage, getChromeStorage } from '@/uilts/chromeExtension.js'
 import Report from "@/log-center/log"
 import { srcPublishSuccess } from '@/http/publishApi'
 import { discordAuthUrl, checkGuildJoined } from '@/http/discordApi'
-import { discordAuthRedirectUri } from '@/http/configAPI'
+import { discordAuthRedirectUri, faceShareRedirectUrl } from '@/http/configAPI'
+import { getFrontConfig } from "@/http/account";
 import GlobalTip from '@/view/components/global-tip.vue'
 
 var moment = require('moment');
@@ -358,9 +384,14 @@ let discordAuthorizeRequired = false;
 let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth
 let joinDiscordIng = ref(false);
 
+let facebookAppConfig = {
+  facebookAppId: "",
+  faceShareRedirectUrl
+};
+
 let state = reactive({
   status: '',
-  loading_show: false,
+  loading_show: true,
   detail: {},
   luck_list_end: false,
   page_index: 1,
@@ -374,9 +405,14 @@ let state = reactive({
     follow: false,
     like: false,
     retweet: false,
-    join_discord: false
+    join_discord: false,
+    repost_facebook: false,
+    reply: false
   }
 })
+
+let fullName = '';
+
 function clickRetry() {
   init()
 }
@@ -388,35 +424,52 @@ async function clickLikeBtn() {
   if (!_userInfo) {
     return
   }
-  // window.parent.postMessage({
-  //   actionType: "IFRAME_DO_TASK", task_data: {
-  //     tweet_Id: state.tweetId
-  //   }, task_type: 'like'
-  // }, "*");
-
-  if (state.detail.finishTaskType && state.detail.finishTaskType == 2) {
-    window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
-    return
+  state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
+  if (state.window_origin.indexOf('facebook.com') >= 0) {
+    state.detail.finishTaskTypeV2 = '2'
   }
-  state.loading_show = true
-  oneKeyLike({
-    params: {
-      tweetId: state.srcContentId
-    }
-  }).then((res) => {
-    state.loading_show = false
-    if (res.code == 0) {
-      if (res.data.result) {
-        state.done.like = true
-      } else {
-        state.done.like = false
-        window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
-      }
-    } else {
+  switch (state.detail.finishTaskTypeV2) {
+    case '1':
+      state.loading_show = true
+      oneKeyLike({
+        params: {
+          tweetId: state.srcContentId
+        }
+      }).then((res) => {
+        state.loading_show = false
+        if (res.code == 0) {
+          if (res.data.result) {
+            state.done.like = true
+          } else {
+            state.done.like = false
+            window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
+          }
+        } else {
+          window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
+          state.done.like = false
+        }
+      }).catch(()=>{
+        state.loading_show = false
+      })
+      break
+    case '2':
       window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
-      state.done.like = false
-    }
-  })
+      break
+    case '3':
+      state.loading_show = true
+      chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          actionType: "IFRAME_TWITTER_API_DO_TASK", task_data: {
+            tweet_Id: state.tweetId
+          }, task_type: 'like'
+        }, (res) => { console.log(res) });
+      })
+      break
+    default:
+      window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
+      break
+  }
+
   // 埋点
   Report.reportLog({
     objectType: Report.objectType.like,
@@ -476,29 +529,53 @@ async function clickRetweetBtn() {
   if (!_userInfo) {
     return
   }
-  if (state.detail.finishTaskType && state.detail.finishTaskType == 2) {
-    window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
-    return
+
+  state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
+  if (state.window_origin.indexOf('facebook.com') >= 0) {
+    state.detail.finishTaskTypeV2 = '2'
   }
-  state.loading_show = true
-  oneKeyReTweet({
-    params: {
-      tweetId: state.srcContentId
-    }
-  }).then((res) => {
-    state.loading_show = false
-    if (res.code == 0) {
-      if (res.data.result) {
-        state.done.retweet = true
-      } else {
-        window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
-        state.done.retweet = false
-      }
-    } else {
-      window.open(`https://twitter.com/retweet/like?tweet_id=${state.tweetId}`)
-      state.done.retweet = false
-    }
-  })
+  switch (state.detail.finishTaskTypeV2) {
+    case '1':
+      state.loading_show = true
+      oneKeyReTweet({
+        params: {
+          tweetId: state.srcContentId
+        }
+      }).then((res) => {
+        state.loading_show = false
+        if (res.code == 0) {
+          if (res.data.result) {
+            state.done.retweet = true
+          } else {
+            window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
+            state.done.retweet = false
+          }
+        } else {
+          window.open(`https://twitter.com/retweet/like?tweet_id=${state.tweetId}`)
+          state.done.retweet = false
+        }
+      }).catch(()=>{
+        state.loading_show = false
+      })
+      break;
+    case '2':
+      window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
+      break
+    case '3':
+      state.loading_show = true
+      chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          actionType: "IFRAME_TWITTER_API_DO_TASK", task_data: {
+            tweet_Id: state.tweetId
+          }, task_type: 'retweet'
+        }, (res) => { console.log(res) });
+      })
+      break
+    default:
+      window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
+      break;
+  }
+
   // 埋点
   Report.reportLog({
     objectType: Report.objectType.retweet,
@@ -507,6 +584,106 @@ async function clickRetweetBtn() {
   });
 }
 
+function onTweetReplyClick(params) {
+  let replyData = {
+    postId: state.postId,
+    type: params.type,
+    taskLuckdropId: state.detail.taskLuckdropId
+  }
+
+  window.parent.postMessage({ actionType: "IFRAME_RED_PACKET_ON_TWEET_REPLY_CLICK", data: replyData }, "*");
+}
+
+async function clickReply(params) {
+  let _userInfo = await checkIsLogin()
+  if (!_userInfo) {
+    return
+  }
+
+  let replyData = {
+    postId: state.postId,
+    type: params.type,
+    taskLuckdropId: state.detail.taskLuckdropId
+  }
+  if (state.window_origin.indexOf('facebook.com') > -1) {
+    let url = `https://twitter.com/${state.tweet_author}/status/${state.tweetId}?actionType=denetFacebookToTwitterReply&deReplyParams=${JSON.stringify(replyData)}`
+    window.open(url)
+  } else {
+    window.parent.postMessage({ actionType: "IFRAME_RED_PACKET_REPLY_CLICK", data: replyData }, "*");
+  }
+}
+
+/**
+ * 点击repost facebook
+ */
+async function clickRepostFacebook(params) {
+  let _userInfo = await checkIsLogin()
+  if (!_userInfo) {
+    return
+  }
+
+  let deUrlParams = {
+    fullName,
+    tweetId: state.tweetId
+  }
+  let href = `${state.postRedirectUrl}?deUrlParams=${JSON.stringify(deUrlParams)}`;
+  console.log(href);
+  let shareUrlparams = {
+    href,
+    type: params.type,
+    taskLuckdropId: state.detail.taskLuckdropId
+  }
+
+  setChromeStorage({
+    shareFacebookData: JSON.stringify({
+      contentStr: state.srcContent
+    })
+  })
+
+  let shareUrl = feacebookShareUrl(shareUrlparams);
+  openShareFacebookWindow({ url: shareUrl });
+}
+
+/**
+ * 分享到facebook
+ */
+function openShareFacebookWindow({ url }) {
+  const width = 800;
+  chrome.windows.create({
+    width,
+    type: 'normal',
+    url
+  }, function (window) {
+
+  })
+}
+
+/**
+ * 分享fecebook 地址
+ */
+function feacebookShareUrl(params = {}) {
+  let { href = '', type = '', taskLuckdropId } = params;
+  let cbParams = JSON.stringify({
+    type,
+    taskLuckdropId
+  })
+  let shareUrl = `https://www.facebook.com/dialog/share?app_id=${facebookAppConfig.facebookAppId}&display=popup&href=${href}&redirect_uri=${facebookAppConfig.faceShareRedirectUrl}?params=${cbParams}`;
+
+  return shareUrl;
+}
+
+/**
+ * 分享成功
+ */
+function facebookShareSuccess(params) {
+  let { taskLuckdropId } = params;
+
+  if (taskLuckdropId == state.detail.taskLuckdropId) {
+    state.done.repost_facebook = true;
+    state.done.repost_facebook_red = false;
+  }
+}
+
 
 function getValidity() {
   let _d1, _d2, _d3, _h, _m, _s
@@ -540,14 +717,14 @@ function getValidity() {
 }
 
 const openFollowTabs = (arr_name) => {
-  let array_finish  = arr_name.filter((item) => { return !item.finished })
+  let array_finish = arr_name.filter((item) => { return !item.finished })
   // let array_finish = state.detail.taskCondition[0].relatedUsers.filter((item) => { return item.finished == false })
   let url
   if (array_finish.length > 0) {
     state.done.follow = false
     // 打开标签页的方法
     array_finish.forEach((item) => {
-      url = `https://twitter.com/intent/follow?screen_name=${item}&tweet_id=${state.tweetId}`
+      url = `https://twitter.com/intent/follow?screen_name=${item.name}&tweet_id=${state.tweetId}`
       chrome.tabs.create({ url }, (tab) => {
         if (follow_open_tabs.filter((item) => { return item.url == tab.url }).length == 0) {
           follow_open_tabs.push(tab)
@@ -565,32 +742,67 @@ async function clickFollowAll(item, is_all) {
   let arr_name = []
   for (let i in item) {
     if (!item[i].finished) {
-      arr_name.push(item[i].name)
+      arr_name.push(item[i])
     }
   }
-  if (state.detail.finishTaskType && state.detail.finishTaskType == 2) {
-    openFollowTabs(arr_name)
-    return
+  // ---- 
+  state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
+  if (state.window_origin.indexOf('facebook.com') >= 0) {
+    state.detail.finishTaskTypeV2 = '2'
   }
-  state.loading_show = true
-  oneKeyFollow({
-    params: {
-      names: arr_name
-    }
-  }).then((res) => {
-    state.loading_show = false
-    if (res.code == 0) {
-      res.data.forEach((item1) => {
-        state.detail.taskCondition[0].relatedUsers.forEach(item2 => {
-          if (item1.name == item2.name && item1.finished) {
-            item2.finished = true
-          }
-        });
+  switch (state.detail.finishTaskTypeV2) {
+    case '1':
+      // openapi
+      state.loading_show = true
+      oneKeyFollow({
+        params: {
+          names: arr_name
+        }
+      }).then((res) => {
+        state.loading_show = false
+        if (res.code == 0) {
+          res.data.forEach((item1) => {
+            state.detail.taskCondition[0].relatedUsers.forEach(item2 => {
+              if (item1.name == item2.name && item1.finished) {
+                item2.finished = true
+              }
+            });
+          })
+          openFollowTabs(arr_name)
+        }
+      }).catch(()=>{
+        state.loading_show = false
       })
+      break
+    case '2':
       openFollowTabs(arr_name)
-    }
-  })
+      break
+    case '3':
+      if (arr_name.filter((item) => { return !item.twitterUserId }).length > 0) {
+        openFollowTabs(arr_name)
+        return
+      }
+      let follow_data = []
+      arr_name.forEach((item) => {
+        follow_data.push(item)
+      })
+      state.loading_show = true
+      chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          actionType: "IFRAME_TWITTER_API_DO_TASK",
+          task_data: {
+            tweet_Id: state.tweetId,
+            follow_data: follow_data,
+          },
+          task_type: 'follow'
+        }, (res) => { console.log(res) });
+      })
 
+      break
+    default:
+      openFollowTabs(arr_name)
+      break
+  }
   // -------- 埋点 --------
   let _log_obj = {
     pageSource: Report.pageSource.task_page,
@@ -618,17 +830,13 @@ const reSetBindTwtterId = (_params) => {
           Report.reportLog({
             objectType: Report.objectType.tweetPostBinded
           });
-          init()
+          init({ from: 'reSetBindTwtterId' })
         }
       })
     }
   })
 }
 
-function showLastTwoPlace(n) {
-  return n
-}
-
 const showCloseEndTimePage = () => {
   state.status = 'close'
   state.close_status = '红包过期了'
@@ -647,11 +855,8 @@ const showSuccessPage = () => {
   state.status = 'success'
   // 埋点
   Report.reportLog({
-    pageSource: Report.pageSource.task_page,
+    pageSource: Report.pageSource.received_success_page,
     businessType: Report.businessType.pageView,
-    objectType: Report.objectType.get_giveaway
-  }, {
-    get_giveaway_result: Report.extParams.success
   });
 }
 const showNotOpenPage = () => {
@@ -785,9 +990,22 @@ const handleStatusPage = () => {
 
 }
 
-function init() {
+function setFrontConfig() {
+  getFrontConfig({
+    params: {},
+  }).then((res) => {
+    if (res.code == 0) {
+      facebookAppConfig.facebookAppId = res.data.fbClientId;
+    }
+  });
+};
+
+function init(initParams) {
+  let { type } = initParams || {};
   onRuntimeMsg();
   onPageVisbile();
+  onWindowMessage();
+  setFrontConfig();
   getPostDetail({
     params: {
       postId: state.postId
@@ -799,16 +1017,21 @@ function init() {
     // 如果金额是0
     //    显示没有领到钱
     if (res.code == 0) {
+      state.srcContent = res.data.srcContent;
+      state.postRedirectUrl = res.data.postRedirectUrl;
+
       // 判断推特id，绑定逻辑
       state.srcContentId = res.data.srcContentId
+
       if (!state.srcContentId) {
         reSetBindTwtterId(res.data)
         return
       }
       state.detail = JSON.parse(res.data.postBizData)
       state.detail.taskCondition = state.detail.taskCondition || []
-      console.log(state.detail)
-
+      // 不要删除这个console
+      console.log('postBizData',state.detail)
+      checkFacebookReply();
       handleStatusPage()
     } else {
       handleErrorCode(res)
@@ -842,6 +1065,15 @@ function initTaskDetail() {
                 state.done.join_discord = res.data[i].finished
                 discordAuthorizeRequired = res.data[i].discordAuthorizeRequired
                 break
+              case 8:
+                state.done.repost_facebook = res.data[i].finished;
+                break;
+              case 9:
+                state.done.reply = res.data[i].finished;
+                if (!state.done.reply) {
+                  onTweetReplyClick({ type: 9 });
+                }
+                break;
             }
           }
         } else {
@@ -854,6 +1086,7 @@ function initTaskDetail() {
 
 let tab_index = 0
 const doTaskReport = (req, sender) => {
+  state.loading_show = false
   let follow_name = req.task_data.follow_name || ''
   // 1 Twitter follow Twitter ScreenName
   // 2 Tweet like
@@ -863,16 +1096,20 @@ const doTaskReport = (req, sender) => {
     case 'retweet':
       event_type = 3
       state.done.retweet = req.task_done
-      chrome.tabs.remove(sender.tab.id)
+      if (!req.task_done && req.do_type == 'api') {
+        window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
+      }
       break;
     case 'like':
       event_type = 2
       state.done.like = req.task_done
-      chrome.tabs.remove(sender.tab.id)
+      // 
+      if (!req.task_done && req.do_type == 'api') {
+        window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
+      }
       break
     case 'follow':
       event_type = 1
-      chrome.tabs.remove(sender.tab.id)
       // for (let i = 0; i < follow_open_tabs.length; i++) {
       //   if (follow_open_tabs[i].id == sender.tab.id) {
       //     follow_open_tabs.splice(i, 1)
@@ -901,9 +1138,13 @@ const doTaskReport = (req, sender) => {
       if (!has_no_finished) {
         state.done.follow = true
         state.done.follow_red = false
+        openFollowTabs(state.detail.taskCondition[0].relatedUsers)
       }
       break
   }
+  if (req.do_type != 'api') {
+    chrome.tabs.remove(sender.tab.id)
+  }
   if (req.task_done) {
     addFinishEvent({
       params: {
@@ -919,20 +1160,42 @@ onMounted(() => {
   state.process_mode = process.env.NODE_ENV
   state.postId = getQueryString('postId')
   state.tweetId = getQueryString('tweetId')
+  state.tweet_author = getQueryString('tweet_author');
+  state.window_origin = getQueryString('window_origin');
+
+  getTweetAuthor();
+
   init()
   // state.loading_show = true
   // state.status = 'opened'
   // state.close_status = '没有领到钱'
 })
 
+function getTweetAuthor() {
+  if (state.window_origin.indexOf('twitter.com') > -1) {
+    window.parent.postMessage({
+      actionType: "IFRAME_RED_PACKET_GET_TWEET_AUTHOR", data: {
+        postId: state.postId,
+        taskLuckdropId: state.detail.taskLuckdropId
+      }
+    }, "*");
+  }
+}
+
+function checkFacebookReply() {
+  console.log('checkFacebookReply')
+  if (state.window_origin.indexOf('twitter.com') > -1) {
+    window.parent.postMessage({
+      actionType: "IFRAME_RED_PACKET_CHECK_FACEBOOK_REPLY", data: {
+        postId: state.postId
+      }
+    }, "*");
+  }
+}
 
 // 点击领取
 function clickOpenRedPacket() {
-  chrome.runtime.sendMessage({
-    actionType: 'CONTENT_GET_PINED'
-  }, res => {
-    console.log(res);
-  })
+  callEventPageMethod('CONTENT_GET_PINED', {})
   handleRedPacket()
 }
 
@@ -950,6 +1213,8 @@ function handleRedPacket() {
     } else {
       handleErrorCode(res)
     }
+  }).catch(()=>{
+    state.loading_show = false
   })
   // 埋点
   Report.reportLog({
@@ -1059,6 +1324,7 @@ function handleFinishRedPacket() {
               }
               break
             case '7':
+              //join discord
               discordAuthorizeRequired = _data[i].discordAuthorizeRequired;
               if (_data[i].finished) {
                 state.done.join_discord = true
@@ -1068,6 +1334,26 @@ function handleFinishRedPacket() {
                 state.done.join_discord_red = true
               }
               break
+            case '8':
+              //repost feacebook
+              if (_data[i].finished) {
+                state.done.repost_facebook = true
+                state.done.repost_facebook_red = false
+              } else {
+                state.done.repost_facebook = false;
+                state.done.repost_facebook_red = true
+              }
+              break
+            case '9':
+              //reply
+              if (_data[i].finished) {
+                state.done.reply = true
+                state.done.reply_red = false
+              } else {
+                state.done.reply = false;
+                state.done.reply_red = true
+              }
+              break
           }
         }
         // 埋点
@@ -1093,6 +1379,8 @@ function handleFinishRedPacket() {
       });
       handleErrorCode(res)
     }
+  }).catch(()=>{
+    state.loading_show = false
   })
 }
 
@@ -1244,6 +1532,24 @@ function handleErrorCode(res) {
 //     businessType: Report.businessType.pageView
 //   });
 // }
+function onWindowMessage() {
+  window.addEventListener("message", function (event) {
+    if (event.data) {
+      switch (event.data.actionType) {
+        case 'CONTENT_RED_PACKET_REPLY_RASK_FINSH':
+          state.done.reply = true;
+          state.done.reply_red = false;
+          break;
+        case 'CONTENT_RED_PACKET_GET_TWEET_AUTHOR':
+          fullName = event.data.data.fullName
+          break;
+        case 'CONTENT_RED_PACKET_FACEBOOK_REPLY':
+          clickReply(event.data.data)
+          break;
+      }
+    }
+  });
+}
 
 function onPageVisbile() {
   document.addEventListener('visibilitychange', function () {
@@ -1262,12 +1568,22 @@ function onRuntimeMsg() {
       case 'BACK_DISCORD_LOGIN_SUCCESS':
         discordLoginSuccess();
         break;
+      case 'BG_FACEBOOK_SHARE_SUCCESS':
+        facebookShareSuccess(req.data);
+        break;
       case 'DO_TASK':
         if (!req.task_type || state.tweetId != req.tweet_Id) {
           return
         }
         state.loading_show = false
-        doTaskReport(req, sender)
+        doTaskReport(req, sender);
+        break;
+      case 'CONTENT_RED_PACKET_REPLY_RASK_FINSH':
+        if(req.data && req.data.postId == state.postId) {
+          state.done.reply = true;
+          state.done.reply_red = false;
+        }
+        break;
     }
   })
 }
@@ -1656,6 +1972,8 @@ body {
           width: 40px;
           height: 40px;
           margin-right: 9px;
+          border-radius: 50%;
+          border: solid 2px #fff;
         }
 
         .big {
@@ -1692,6 +2010,7 @@ body {
       display: flex;
       justify-content: space-between;
       color: #B0B0B0;
+      font-weight: 500;
       border-bottom: 1px solid #F2F2F2;
 
       div:last-child {
@@ -1717,7 +2036,7 @@ body {
         text-align: center;
 
         img {
-          margin-top: 90px;
+          margin-top: 70px;
           width: 100px;
           height: 100px;
         }
@@ -1768,18 +2087,18 @@ body {
           flex: auto;
 
           .luck-title {
+            color: #444444;
             font-weight: 500;
             font-size: 16px;
             letter-spacing: 0.3px;
-            color: #444444;
+            margin-bottom: 5px;
           }
 
           .luck-time {
             font-weight: 400;
             font-size: 12px;
             line-height: 14px;
-
-            color: #9b9b9b;
+            color: #B0B0B0;
           }
         }
 
@@ -1818,8 +2137,7 @@ body {
   .success {
     .luck-list-title {
       margin-top: 17px;
-      margin-bottom: 11px;
-      border-bottom: 1px solid #D1D1D1;
+      border-bottom: 1px solid #ECECEC;
     }
   }
 
@@ -1866,6 +2184,7 @@ body {
     }
 
     .list {
+      overflow-y: auto;
       padding: 0 16px 0 16px;
       background: #ffffff;
       flex: 1;
@@ -1873,8 +2192,10 @@ body {
       .item {
         display: flex;
         align-items: center;
-        min-height: 50px;
+        // min-height: 50px;
         border-bottom: 1px solid #f0f0f0;
+        padding: 12px 0;
+        box-sizing: border-box;
 
         img {
           width: 24px;
@@ -1908,7 +2229,7 @@ body {
             flex: 1;
             margin-left: 10px;
             font-weight: 500;
-            font-size: 16px;
+            font-size: 15px;
             letter-spacing: 0.3px;
             color: #000000;
           }

src/view/popup/popup.vue

@@ -84,7 +84,9 @@
                                 </div>
                                 <div class="right">
                                     <div class="msg">
-                                        <div class="bold">
+                                        <div class="bold" 
+                                            :class="{'align-content': (item.type == 2 || (item.type == 1 && item.status == 1)) && 
+                                                                        item.amount.length + item.currencySymbol.length > 12 }">
                                             <!-- 收到的 -->
                                             <template v-if="item.type == 1">
                                                 <!-- 进行中-->
@@ -97,8 +99,10 @@
                                                         <a-tooltip :title="item.amount">
                                                             {{ getBit(item.amount) }}</a-tooltip>
                                                     </span>
-                                                    <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                    <img :src="item.currencyIconPath" alt="">
+                                                    <div class="coin-type-wrapper">
+                                                        <span class="coin-type">{{ item.currencySymbol || '' }}</span>
+                                                        <img :src="item.currencyIconPath" alt="">
+                                                    </div>
                                                 </template>
                                                 <!-- 已过期 -->
                                                 <template v-else-if="item.status == 2">
@@ -112,8 +116,10 @@
                                                         -{{ getBit(item.amount) }}
                                                     </a-tooltip>
                                                 </span>
-                                                <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                <img :src="item.currencyIconPath" alt="">
+                                                <div class="coin-type-wrapper">
+                                                    <span class="coin-type">{{ item.currencySymbol || '' }}</span>
+                                                    <img :src="item.currencyIconPath" alt="">   
+                                                </div>
                                             </template>
                                         </div>
                                         <!-- 发出的红包显示 -->
@@ -834,7 +840,7 @@ body {
                     height: 100%;
                     display: flex;
                     justify-content: space-between;
-                    border-bottom: 1px solid #d1d1d1;
+                    border-bottom: 1px solid #ECECEC;
                     box-sizing: border-box;
                     padding: 10px 14px 10px 0;
 
@@ -849,7 +855,7 @@ body {
 
                         .time {
                             font-size: 12px;
-                            color: #b6b6b6;
+                            color: #B0B0B0;
                         }
                     }
 
@@ -876,6 +882,11 @@ body {
                                     color: #E29A2E;
                                 }
 
+                                .coin-type-wrapper {
+                                    display: flex;
+                                    align-items: center;
+                                }
+
                                 .coin-type {
                                     margin-left: 3px;
                                 }
@@ -887,6 +898,15 @@ body {
                                 }
                             }
 
+                            .align-content {
+                                flex-direction: column;
+                                align-items: flex-end;
+
+                                .blance {
+                                    max-width: 130px;
+                                }
+                            }
+
                             .desc {
                                 font-size: 12px;
                                 color: #b6b6b6;
@@ -981,6 +1001,9 @@ body {
                     .left {
                         font-weight: 500;
                         font-size: 16px;
+                        .time {
+                            color: #B0B0B0;
+                        }
                     }
 
                     .right {