Merge branch 'dev_1.1.1' into feature_220615_topics_01

# Conflicts:
#	src/entry/content.js
#	src/logic/content/twitter.js

src/entry/content.js

@@ -25,9 +25,15 @@ import {
     hideBuyNFT,
     showPopupPage,
     setPopupConfByPopupPage,
-    setTabGroupIframeStyle
+    setTabGroupIframeStyle,
+    loginSuccessHandle
 } from "@/logic/content/twitter.js";
 
+import { 
+    hideNFTGroupList,
+    setNFTGroupContent,
+} from '@/logic/content/nft';
+
 import {
     initFacebookContent
 } from "@/logic/content/facebook.js"
@@ -104,6 +110,12 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'IFRAME_NFT_SHOW_SALE':
             showNFTSale()
             break
+        case 'IFRAME_NFT_GROUP_LIST_HIDE':
+            hideNFTGroupList()
+            break;
+        case 'IFRAME_NFT_GROUP_SET_CONTENT':
+            setNFTGroupContent(req.publishRes);
+            break;
         case "IFRAME_TWITTER_PUBLISH":
             twitterPublishHandler(req.publishRes);
             break;
@@ -130,6 +142,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
                 top,
                 scrollTop: req.data.scrollTop
             } }, () => { })
+        case 'BG_LOGIN_SET_USERINFO_CB':
+            loginSuccessHandle();
             break;
     }
 })

src/http/nft.js

@@ -39,3 +39,19 @@ export function getNftProjectInfo(params) {
         data: params
     })
 }
+
+export function listJoinNftGroup(params) {
+    return service({
+        url: `/nft/group/listJoinNftGroup`,
+        method: 'post',
+        data: params
+    })
+}
+
+export function prePost(params) {
+    return service({
+        url: `/nft/group/post/pre`,
+        method: 'post',
+        data: params
+    })
+}

src/iframe/nft-group.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/nft/group.vue'
+
+const app = createApp(App);
+
+app.mount('#app');

src/logic/content/nft.js

@@ -0,0 +1,105 @@
+import { getOffsetRect, nextTick } from '@/uilts/help'
+import { listJoinNftGroup } from '@/http/nft';
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { _setPublishContent } from './twitter';
+
+var ifShowNftGroup = false;
+var tempNftGroupPost = null;
+
+export const showNFTGroupIcon = () => {
+    let urlInfo = new URL(window.location.href)
+    let isTwitter = urlInfo.hostname === 'twitter.com'
+    let toolElem = document.querySelector('div[data-testid="toolBar"]');
+    let isAppend = toolElem && toolElem.querySelector('#de-nft-group-enter');
+    let where = isTwitter && toolElem && !isAppend && ifShowNftGroup;
+    if (where) {
+        let oDiv = document.createElement(`div`);
+            oDiv.id = 'de-nft-group-enter';
+        let oImg = document.createElement('img');
+            oImg.src = require("@/assets/img/icon-nft-group-entry.png");
+            oImg.className = 'addGroup';
+            oDiv.innerHTML = `
+                ${oImg.outerHTML}
+                <style>
+                    #de-nft-group-enter {position:relative; display:flex; padding:0 8px;}
+                    #de-nft-group-enter .addGroup {cursor:pointer; height:32px;}
+                </style>
+            `;
+            oDiv.addEventListener('click', (e) => {
+                showNFTGroupList(e);
+                e.stopPropagation();
+            })
+        toolElem.firstChild.appendChild(oDiv)
+    }
+}
+
+export const showNFTGroupList = (e) => {
+    let { top, left } = getOffsetRect(e.target);
+    let oTop = top + e.target.offsetHeight + 10;
+    let iframe = document.createElement('iframe');
+        iframe.src = chrome.runtime.getURL(`/iframe/nft-group.html`)
+        iframe.style.cssText = 'border:medium none; width:315px; height:260px;';
+    let html = document.createElement('div');
+        html.id = 'de-nft-group-list';
+        html.innerHTML = `
+            <div class="de-nft-group-div">
+                ${iframe.outerHTML}
+            </div>
+            <div class="de-nft-group-mask"></div>
+            <style>
+                .de-nft-group-div {position:fixed; display:flex; align-items:center; justify-content:center; z-index:100; width:350px; height:280px; left:${left}px; top:${oTop}px; background:#fff; border-radius:20px; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.26);}
+                .de-nft-group-mask {position:fixed; z-index:99; width:100%; height:100%; left:0; top:0;}
+            </style>`;
+
+    document.body.appendChild(html);
+    document.querySelector('.de-nft-group-mask').addEventListener('click', () => {
+        hideNFTGroupList();
+    })
+}
+
+export const hideNFTGroupList = () => {
+    let dom = document.querySelector('#de-nft-group-list');
+    dom && document.body.removeChild(dom);
+}
+
+export const checkUserJoinGroup = (fn) => {
+    getChromeStorage('userInfo', (res) => {
+        // 如果登录
+        if (res) {
+            listJoinNftGroup({
+                params: {
+                    pageNum: 1,
+                    pageSize: 1
+                }
+            }).then(res => {
+                let { data } = res;
+                if (data !== null) {
+                    ifShowNftGroup = true;
+                    if (fn) fn()
+                }
+            })
+        }
+    })
+}
+
+export const setNFTGroupContent = (res) => {
+    tempNftGroupPost = res;
+
+    let bigBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    if (bigBtn) {
+        bigBtn.click();
+    } else {
+        let smallBtn = document.querySelector('a[href="/compose/tweet"]')
+        smallBtn && smallBtn.click();
+    }
+
+    nextTick(() => {
+        let inputEle = document.querySelector('div[contenteditable="true"]');
+        if (inputEle) {
+            inputEle.focus();
+        }
+    }, 100).then(() => {
+        // document.execCommand('selectAll');
+        // document.execCommand("insertText", false, res.srcContent);
+    })
+}

src/logic/content/twitter.js

@@ -4,6 +4,7 @@ import { discordAuthRedirectUri } from '@/http/configAPI'
 import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
+import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup } from '@/logic/content/nft';
 
 let dom = {};
 
@@ -313,7 +314,7 @@ function _addDeNetBtn() {
         let innerDeIcon = document.getElementById('de-btn1');
         if (!innerDeIcon) {
             let dialogScheduleBtn = _getScheduleDom(false);
-            _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
+            dom && dom.deBtn1 && _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
         }
     }, 800)
 }
@@ -416,7 +417,7 @@ function _deNetBtnClick() {
             if (loadIcon) {
                 return;
             }
-            dom.deBtn.insertBefore(dom.loadingImg, dom.deBtn.querySelector('span'));
+            dom && dom.deBtn && dom.deBtn.insertBefore(dom.loadingImg, dom.deBtn.querySelector('span'));
             setTimeout(() => {
                 dom.loadingImg.style.transform = 'rotate(1080deg)'
             });
@@ -436,7 +437,7 @@ function _deNetBtnClick() {
  * @private
  */
 let isSetContent = false;
-const _setPublishContent = throttle(function (content, time = 1000) {
+export const _setPublishContent = throttle(function (content, time = 1000) {
     if (!isSetContent) {
         isSetContent = true;
         let inputEle = document.querySelector('div[contenteditable="true"]');
@@ -541,7 +542,7 @@ function addSliderNavDeBtn(isSmall = false) {
         let bigDom = document.querySelector('a[href="/compose/tweet"]').parentNode.parentNode;
         let deBtn = document.getElementById('de-btn');
         if (bigDom && !deBtn) {
-            bigDom.appendChild(dom.deBtn);
+            dom && dom.deBtn && bigDom.appendChild(dom.deBtn);
             Report.reportLog({
                 pageSource: Report.pageSource.mainPage,
                 businessType: Report.businessType.buttonView,
@@ -552,7 +553,7 @@ function addSliderNavDeBtn(isSmall = false) {
         let smallDom = document.querySelector('a[href="/compose/tweet"]').parentNode.parentNode;
         let deBtn3 = document.getElementById('de-btn3');
         if (smallDom && !deBtn3) {
-            smallDom.appendChild(dom.deBtn3);
+            dom && dom.deBtn3 && smallDom.appendChild(dom.deBtn3);
             Report.reportLog({
                 pageSource: Report.pageSource.mainPage,
                 businessType: Report.businessType.buttonView,
@@ -604,7 +605,7 @@ function checkHasDeBtn() {
         let innerDeIcon = document.getElementById('de-btn1');
         if (toolBar && !innerDeIcon) {
             let dialogScheduleBtn = _getScheduleDom(false);
-            _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
+            dom && dom.deBtn1 && _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
         }
     } catch (e) {
         console.log(e)
@@ -760,6 +761,7 @@ function initParseCard() {
                 if (queue_num <= 0) {
                     return
                 }
+                showNFTGroupIcon()
                 setIframeRedPacket()
                 checkHasDeBtn()
                 checkHasSliderDeBtn();
@@ -810,9 +812,11 @@ export function init() {
     // 渲染dom
     initParseCard()
     showNFTCard()
+    showNFTGroupIcon()
+    addEventAction();
+    checkUserJoinGroup();
     renderDom();
     checkTwitterTaskState();
-
     initBuyNFT();
     addGroupTab();
 
@@ -1301,6 +1305,27 @@ export const showNFTSale = () => {
     document.querySelector('div[id="de-nft-node"]').style.display = 'block';
 }
 
+export const addEventAction = () => {
+    let urlInfo = new URL(window.location.href)
+    let isTwitter = urlInfo.hostname === 'twitter.com'
+    // 监听发推按钮
+    let btn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    btn && btn.addEventListener('click', () => {
+        // 重置监听次数
+        queue_num = 3;
+    })
+
+    // 页面滚动
+    if (isTwitter) {
+        // 首页
+        if (urlInfo.pathname === '/home') {
+            window.addEventListener('scroll', () => {
+                hideNFTGroupList()
+            })
+        }
+    }
+}
+
 export const appendPopupPage = (params = {}) => {
     let { path = '' } = params;
 
@@ -1468,6 +1493,11 @@ export const setPopupConfByPopupPage = () => {
 }
 
 
+/** 
+ * 
+ * Group Tab List start 
+ */
+
 const addGroupTab = () => {
     let tabListDom = document.querySelector('div[role="tablist"]');
     let groupItemTab = document.querySelector('#de-nav-tab-group');
@@ -1712,4 +1742,18 @@ export const setTabGroupIframeStyle = (params) => {
         // iframeContent.style.height = height + 'px';
         iframeContent.style.height =  document.querySelector('html').offsetHeight + 'px';
     // }
+}
+
+/** 
+ * 
+ * Group Tab List end 
+ * 
+ */
+
+export const loginSuccessHandle = () => {
+    // 检查是否漏出group图标
+    checkUserJoinGroup(() => {
+        showNFTGroupIcon()
+        addEventAction()
+    })
 }

src/manifest.json

@@ -68,6 +68,7 @@
                 "/iframe/publish-tips.html",
                 "/iframe/bind-tweet.html",
                 "/iframe/nft-card.html",
+                "/iframe/nft-group.html",
                 "/iframe/buy-nft.html",
                 "/iframe/popup-page.html",
                 "/iframe/tab-group.html"

src/uilts/help.js

@@ -129,3 +129,18 @@ export function getBrowser() {
     }
     return browser;
 }
+
+export function getOffsetRect(element) {
+    var oTop = element.offsetTop;
+    var oLeft = element.offsetLeft;
+    var current = element.offsetParent;
+    while (current !== null) {
+        oTop += current.offsetTop;
+        oLeft += current.offsetLeft;
+        current = current.offsetParent;
+    }
+    return {
+        top: oTop,
+        left: oLeft,
+    }
+}

src/view/components/nft-group-list.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="list" v-if="detail">
+        <div
+            class="item"
+            :key="index"
+            v-for="(item, index) in detail"
+            @click="clickHandler(item)">
+            <div class="logo"><img :src="item.nftGroupIcon" /></div>
+            <div class="text">{{item.nftGroupName}}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref, defineEmits } from 'vue'
+import { listJoinNftGroup } from '@/http/nft'
+
+let pageNum = 1;
+let pageSize = 1000;
+let detail = ref(null);
+let emits = defineEmits(['clickCallBack']);
+
+const clickHandler = (item) => {
+    emits('clickCallBack', item);
+}
+
+onBeforeMount(() => {
+    listJoinNftGroup({
+        params: {
+            pageNum,
+            pageSize
+        }
+    }).then(res => {
+        let { data } = res;
+        if (data !== null) {
+            detail.value = data;
+        }
+    })
+})
+</script>
+
+<style lang='scss'>
+body {
+    margin: 0;
+    padding: 0;
+    user-select: none;
+}
+
+.list {
+    .item {
+        display: flex;
+        height: 48px;
+        margin: 2px 0;
+        cursor: pointer;
+        flex-direction: row;
+        align-items: center;
+        .logo {
+            width: 38px;
+            height: 38px;
+            border: 1px solid #E3E3E3;
+            border-radius: 6px;
+            background: #FFFFFF;
+            margin-right: 16px;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 6px;
+            }
+        }
+        .text {
+            display: flex;
+            flex: 1;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 19px;
+        }
+    }
+}
+</style>

src/view/iframe/nft/group.vue

@@ -0,0 +1,27 @@
+<template>
+    <nft-group-list @clickCallBack="clickHandler"></nft-group-list>
+</template>
+
+<script setup>
+import NftGroupList from '@/view/components/nft-group-list.vue';
+import { prePost } from '@/http/nft'
+
+const clickHandler = (item) => {
+    prePost({
+        params: {
+            groupId: item.nftGroupId
+        }
+    }).then(res => {
+        let { code, data } = res
+        if (code === 0) {
+            chrome.tabs.getCurrent((tab) => {
+                chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_NFT_GROUP_LIST_HIDE" });
+                chrome.tabs.sendMessage(tab.id, {
+                    actionType: "IFRAME_NFT_GROUP_SET_CONTENT",
+                    publishRes: data
+                });
+            })
+        }
+    })
+}
+</script>