[edit] fix tab group

src/entry/content.js

@@ -40,6 +40,7 @@ import {
 import { 
     hideNFTGroupList,
     setNFTGroupContent,
+    setJoinedGroupIframeStyle
 } from '@/logic/content/nft';
 
 import {
@@ -170,6 +171,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'IFRAME_GROUP_BANNER_GROUP_INFO':
             setGroupInfo(req.data)
             break;
+        case 'IFRAME_JOINED_GROUP_SET_STYLE':
+            setJoinedGroupIframeStyle(req.data)
+            break
     }
 })
 

src/logic/content/nft.js

@@ -159,7 +159,7 @@ export const addJoinedGroupList = () => {
         let iframe = document.createElement('iframe');
             iframe.id = 'de-joined-group-list';
             iframe.src = chrome.runtime.getURL('/iframe/joined-group-list.html');
-            iframe.style.cssText = `border: medium none;width: 350px;height: 321px;border-radius: 16px;margin-bottom: 16px`
+            iframe.style.cssText = `border: medium none;width: 350px;height: 120px;border-radius: 16px;margin-bottom: 16px`
 
         let iframeContent = document.getElementById('de-joined-group-list');
 
@@ -177,7 +177,13 @@ export const addJoinedGroupList = () => {
     }
 };
 
-
+export const setJoinedGroupIframeStyle = (params) => {
+    let {height = '321px'} = params;
+    let iframeContent = document.getElementById('de-joined-group-list');
+    if(iframeContent) {
+        iframeContent.style.height = height;
+    }
+}
 
 
 function _addTweetButtonListen() {

src/logic/content/twitter.js

@@ -1669,17 +1669,15 @@ export const setPopupConfByPopupPage = () => {
  */
 
 const addGroupTab = () => {
-    // if(!tweetAccountBindGroupInfo.isInit) {
-    //     getTweetAccountGroupInfo(() => {
-    //         main();
-    //     })
-    // } else {
+    let illegalPages = ['notifications', 'explore', 'followers', 'following'];
+    let page = window.location.pathname.split('/');
+    if(page && page.length) {
+        if(illegalPages.indexOf(page[page.length - 1]) > -1) {
+            return;
+        }
+    }
     main();
-    // }
     function main() {
-        // if(!tweetAccountBindGroupInfo.isBind) {
-        //     return;
-        // }
         let tabListDom = document.querySelector('div[role="tablist"]');
         let groupItemTab = document.querySelector('#de-nav-tab-group');
 
@@ -1741,8 +1739,9 @@ const addGroupTab = () => {
             tabListDom
         });
 
-        addTabGroupContent();
-        checkNeedSelectGroupTab();
+        addTabGroupContent(() => {
+            checkNeedSelectGroupTab();
+        });
     }
 }
 
@@ -1751,13 +1750,14 @@ const addGroupTab = () => {
  */
 const checkNeedSelectGroupTab = () => {
     if (window.location.pathname != '/home') {
-        setTimeout(() => {
-            const urlParams = new URLSearchParams(window.location.search);
-            const deTabVal = urlParams.get('deTabVal');
-            if (deTabVal == 'deGroupTab') {
-                selectGroupTab();
+        getChromeStorage('groupTabData', (res) => {
+            if (res && res.deTabVal == 'deGroupTab') {
+                chrome.storage.local.remove("groupTabData");
+                setTimeout(() => {
+                    selectGroupTab();
+                }, 300)
             }
-        }, 500)
+        })
     }
 }
 
@@ -1945,7 +1945,7 @@ const getTweetTabContent = () => {
 /**
  * 注入 Group List 内容
  */
-const addTabGroupContent = () => {
+const addTabGroupContent = (cb) => {
     let params = {
         windowLocation: window.location
     }
@@ -1960,6 +1960,7 @@ const addTabGroupContent = () => {
     if (!iframeContent) {
         if (tweetTabContent && tweetTabContent.parentElement) {
             tweetTabContent.parentElement.appendChild(iframe);
+            cb && cb();
         }
     }
 };
@@ -1976,8 +1977,8 @@ export const setTabGroupIframeStyle = (params) => {
 }
 
 export const pageJumpHandler = (params) => {
-    let { url, name = '_self' } = params
-    window.open(url, name)
+    let { url } = params
+    window.open(url)
 }
 
 export const getTweetProfileNavTop = (params) => {
@@ -2025,38 +2026,6 @@ export const setGroupInfo = (params = {}) => {
     }
 }
 
-const getTweetAccountGroupInfo = (cb) => {
-    let arr = window.location.pathname.split('/') || [];
-    let tabListDom = document.querySelector('div[role="tablist"]');
-    if (arr.length == 2 && tabListDom && !tweetAccountBindGroupInfo.isInit) {
-        let twitterAccount = arr[1];
-        tweetAccountBindGroupInfo.isInit = true;
-        getTwitterNftGroupInfo({
-            params: {
-                twitterAccount
-            }
-        }).then(res => {
-            if (res.code == 0) {
-                if (res.data) {
-                    tweetAccountBindGroupInfo.groupInfo = res.data;
-                    tweetAccountBindGroupInfo.isBind = true;
-                } else {
-                    tweetAccountBindGroupInfo = {
-                        isBind: false,
-                        groupInfo: null
-                    }
-                }
-            } else {
-                tweetAccountBindGroupInfo = {
-                    isBind: false,
-                    groupInfo: null
-                }
-            }
-            cb && cb()
-        })
-    }
-}
-
 const getSysTheme = () => {
     const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
     if (themeMedia.matches) {

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

@@ -1,23 +1,25 @@
 <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 class="badge" v-if="showBadge">
-                    {{item.newPostCount}}
+        <div class="list-content">
+            <div
+                class="item"
+                :key="index"
+                v-for="(item, index) in detail"
+                @click="clickHandler(item)">
+                <div class="logo">
+                    <img :src="item.nftGroupIcon" />
+                    <div class="badge" v-if="showBadge">
+                        {{item.newPostCount}}
+                    </div>
                 </div>
+                <div class="text">{{item.nftGroupName}}</div>
             </div>
-            <div class="text">{{item.nftGroupName}}</div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { onBeforeMount, ref, defineEmits, defineProps } from 'vue'
+import { onBeforeMount, ref, defineEmits, defineProps, watch } from 'vue'
 import { listJoinNftGroup } from '@/http/nft'
 
 const props = defineProps({
@@ -30,7 +32,14 @@ const props = defineProps({
 let pageNum = 1;
 let pageSize = 1000;
 let detail = ref(null);
-let emits = defineEmits(['clickCallBack']);
+let emits = defineEmits(['clickCallBack', 'updateList']);
+
+watch(detail, (newVal) => {
+    console.log('newVal', newVal)
+    if(newVal) {
+        emits('updateList', newVal);
+    }
+})
 
 const clickHandler = (item) => {
     emits('clickCallBack', item);

src/view/iframe/nft/group-card.vue

@@ -33,14 +33,17 @@ import { onBeforeMount, onMounted, ref } from 'vue';
 import { getPostDetail } from '@/http/redPacket';
 import { getQueryString } from '@/uilts/help.js'
 import { srcPublishSuccess } from '@/http/publishApi'
-import { getChromeStorage } from '@/uilts/chromeExtension.js'
+import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 
 let postId = getQueryString('projectId');
 let tweet_Id = getQueryString('tweet_Id')
 let detail = ref(null);
 
 const jumpUserPage = () => {
-    window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}?deTabVal=deGroupTab`)
+    setChromeStorage({ groupTabData: JSON.stringify({
+        deTabVal: 'deGroupTab'
+    })})
+    window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}`)
 }
 // 重新绑定
 const reSetBindTwtterId = (_params = {}) => {

src/view/iframe/tab-group/joined-group-list.vue

@@ -5,17 +5,28 @@
             NFT Owners Group
         </div>
         <div class="content-wrapper">
-            <nft-group-list style="height: 100%" :showBadge="true" @clickCallBack="clickHandler"></nft-group-list>
+            <nft-group-list style="height: 100%" 
+                ref="groupListDom"
+                :showBadge="true" 
+                @clickCallBack="clickHandler"
+                @updateList="updateList"></nft-group-list>
         </div>
     </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import NftGroupList from '@/view/components/nft-group-list.vue';
 
+import { sendChromeTabMessage } from '@/uilts/chromeExtension.js';
+
+let groupListDom = ref(null);
+
 const clickHandler = (params) => {
-    let url = `https://twitter.com/${params.defaultTwitterAccount}?deTabVal=deGroupTab`;
+    setChromeStorage({ groupTabData: JSON.stringify({
+        deTabVal: 'deGroupTab'
+    })})
+    let url = `https://twitter.com/${params.defaultTwitterAccount}`;
     sendMessageToContent({
         actionType: 'IFRAME_PAGE_JUMP',
         data: {
@@ -34,6 +45,34 @@ const sendMessageToContent = (params) => {
     })
 }
 
+const updateList = (data) => {
+    setHeight();
+};
+
+const setHeight = () => {
+    const maxHeight = 321;
+    nextTick(() => {
+        let listDom = document.querySelector('.list-content');
+        if(listDom) {
+            const titleDomHeight = 56, marginBottom = 12;
+            let height = maxHeight;
+            let contentHeight = listDom.offsetHeight + titleDomHeight + marginBottom;
+
+            if(contentHeight < maxHeight) {
+                height =  contentHeight;
+            } else {
+                height = maxHeight;
+            }
+            sendChromeTabMessage({
+                actionType: "IFRAME_JOINED_GROUP_SET_STYLE",
+                data: {
+                    height: height + 'px'
+                }
+            })
+        }
+    })
+}
+
 onMounted(() => {
 }) 
 </script>