渲染group

src/assets/svg/icon-nft-group-pc.svg

@@ -0,0 +1,22 @@
+<svg width="505" height="180" viewBox="0 0 505 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_19137_186552)">
+<rect width="505" height="180" fill="#48B1F7"/>
+<g opacity="0.1">
+<path d="M409.686 224.444C408.9 225.259 407.595 225.259 406.808 224.444L290.68 104.171C289.996 103.463 289.929 102.362 290.522 101.577L349.387 23.5977C349.765 23.0971 350.356 22.8027 350.983 22.8027H465.509C466.136 22.8027 466.727 23.0971 467.105 23.5978L525.97 101.577C526.563 102.362 526.496 103.463 525.813 104.171L409.686 224.444Z" fill="url(#paint0_linear_19137_186552)"/>
+<path d="M414.632 95.2211C417.711 92.3109 420.175 88.8131 421.879 84.9344C423.583 81.0558 424.492 76.8749 424.553 72.6389C424.619 68.4032 423.834 64.1974 422.246 60.2702C420.658 56.343 418.298 52.7741 415.307 49.7746C417.949 48.7748 420.751 48.2636 423.576 48.2656C436.707 48.2656 447.364 59.1737 447.364 72.6389C447.364 86.1017 436.712 97.0121 423.576 97.0121C420.508 97.0121 417.465 96.4081 414.632 95.2211V95.2211ZM425.926 105.137H434.481C451.444 105.137 465.184 119.225 465.184 136.618V138.656C465.184 144.16 456.297 145.413 444.003 145.688C444.59 144.767 444.893 143.702 444.874 142.604V139.965C444.91 133.033 443.191 126.204 439.878 120.115C436.565 114.025 431.766 108.873 425.926 105.137ZM391.077 48.2656C404.206 48.2656 414.853 59.1737 414.853 72.6389C414.853 86.1017 404.218 97.0121 391.077 97.0121C377.95 97.0121 367.294 86.1017 367.294 72.6389C367.294 59.1737 377.95 48.2656 391.077 48.2656ZM382.157 105.137H401.973C418.938 105.137 432.686 119.225 432.686 136.618V138.656C432.686 145.5 418.927 145.773 401.973 145.773H382.157C365.195 145.773 351.445 145.759 351.445 138.656V136.618C351.445 119.232 365.193 105.137 382.157 105.137V105.137Z" fill="url(#paint1_linear_19137_186552)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_19137_186552" x1="350.387" y1="16.9273" x2="520.098" y2="243.64" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.867568" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19137_186552" x1="394.004" y1="76.9518" x2="454.893" y2="168.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.14461" stop-color="#1372B3"/>
+<stop offset="1" stop-color="#5BBAFA" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_19137_186552">
+<rect width="505" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/icon-nft-member.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8C9.69225 8 11.0625 6.62975 11.0625 4.9375C11.0625 3.24525 9.69225 1.875 8 1.875C7.59779 1.87489 7.19951 1.95402 6.8279 2.10788C6.45628 2.26175 6.11863 2.48733 5.83423 2.77173C5.54983 3.05613 5.32425 3.39378 5.17038 3.7654C5.01652 4.13701 4.93739 4.53529 4.9375 4.9375C4.9375 6.62975 6.30775 8 8 8ZM8 8.875C5.956 8.875 1.875 10.0475 1.875 12.375V14.125H14.125V12.375C14.125 10.0475 10.044 8.875 8 8.875Z" fill="white"/>
+</svg>

src/assets/svg/icon-nft-post.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.4 1.5H6.6C5.8646 1.5 5.1364 1.64485 4.45697 1.92627C3.77755 2.2077 3.16021 2.62019 2.6402 3.1402C2.12019 3.66021 1.7077 4.27755 1.42627 4.95697C1.14485 5.6364 1 6.3646 1 7.1C1 11.65 5.9 13.75 9.4 15.15V12.7C10.8852 12.7 12.3096 12.11 13.3598 11.0598C14.41 10.0096 15 8.58521 15 7.1C15 5.61479 14.41 4.19041 13.3598 3.1402C12.3096 2.09 10.8852 1.5 9.4 1.5ZM5 8C5.55228 8 6 7.55228 6 7C6 6.44772 5.55228 6 5 6C4.44772 6 4 6.44772 4 7C4 7.55228 4.44772 8 5 8ZM9 7C9 7.55228 8.55228 8 8 8C7.44772 8 7 7.55228 7 7C7 6.44772 7.44772 6 8 6C8.55228 6 9 6.44772 9 7ZM11 8C11.5523 8 12 7.55228 12 7C12 6.44772 11.5523 6 11 6C10.4477 6 10 6.44772 10 7C10 7.55228 10.4477 8 11 8Z" fill="white"/>
+</svg>

src/iframe/nft-group-card.js

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

src/logic/content/ParseCard.js

@@ -257,6 +257,13 @@ class ParseCard {
         _iframe.style.cssText = 'border:medium none; width:375px; min-height:300px;'
         return _iframe
     }
+    createNftGroupIframe({ project_Id }) {
+        let _iframe = document.createElement('iframe')
+        _iframe.id = project_Id
+        _iframe.src = chrome.runtime.getURL('/iframe/nft-group-card.html') + `?projectId=${project_Id}`;
+        _iframe.style.cssText = 'border:medium none; width:505px; min-height:180px;'
+        return _iframe
+    }
     isHasIframeByArticle(dom_card) {
         if (!dom_card || !dom_card.parentElement) {
             return
@@ -402,5 +409,26 @@ class ParseCard {
             dom.appendChild(this.createIframe({ post_Id, tweet_author }, true))
         }
     }
+    replaceNftGroupDomRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let dom = dom_card.querySelector('div[aria-labelledby]')
+        if (dom) {
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.children[i].tagName.toLowerCase() != 'iframe') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
+        } else {
+            dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+        }
+
+        dom.style = 'min-height:180px'
+        if (dom) {
+            let project_Id = post_Id.replace('nft_group/', '');
+            dom.appendChild(this.createNftGroupIframe({ project_Id }))
+        }
+    }
 }
 export default new ParseCard()

src/logic/content/twitter.js

@@ -697,7 +697,9 @@ function setIframeRedPacket(type = 'twitter') {
                     let item = res.has_post_Id_card_data[i];
                     if (item && item.post_Id && item.post_Id.indexOf('nft/') >= 0) {
                         parseCard.replaceNftDomRedPacket(item)
-                    } else {
+                    } else if (item && item.post_Id && item.post_Id.indexOf('nft_group/') >= 0) {
+                        parseCard.replaceNftGroupDomRedPacket(item)
+                    }  else {
                         parseCard.replaceDOMRedPacket(item)
                     }
                 }

src/manifest.json

@@ -69,6 +69,7 @@
                 "/iframe/bind-tweet.html",
                 "/iframe/nft-card.html",
                 "/iframe/nft-group.html",
+                "/iframe/nft-group-card.html",
                 "/iframe/buy-nft.html",
                 "/iframe/popup-page.html"
             ],

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

@@ -0,0 +1,128 @@
+<template>
+    <div class="card">
+        <div class="padding" v-if="detail">
+            <div class="info">
+                <div class="logo">
+                    <img :src="detail.groupIcon" />
+                </div>
+                <div class="mess">
+                    <div class="title">
+                        {{detail.groupName}}
+                    </div>
+                    <div class="opt">
+                        <label>
+                            <img src="../../../assets/svg/icon-nft-member.svg" />
+                            <span>{{ detail.memberCount }} Member</span>
+                        </label>
+                        <label>
+                            <img src="../../../assets/svg/icon-nft-post.svg" />
+                            <span>{{ detail.postCount }} Posts</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="join" @click="jumpUserPage">
+                {{ detail.joinStatus === 0 ? 'Join Now' : 'View' }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { getPostDetail } from '@/http/redPacket';
+import { getQueryString } from '@/uilts/help.js'
+
+let postId = getQueryString('projectId');
+let detail = ref(null);
+
+const jumpUserPage = () => {
+    window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}`)
+}
+
+onBeforeMount(() => {
+    getPostDetail({
+        params: {
+            postId: postId
+        }
+    }).then(res => {
+        let { data } = res
+        if (data !== null) {
+            detail.value = JSON.parse(data.postBizData)
+        }
+    })
+})
+</script>
+
+<style lang='scss'>
+html, body {
+    margin: 0;
+    padding: 0;
+    user-select: none;
+}
+.card {
+    height: 180px;
+    border-radius: 12px;
+    background: url('../../../assets/svg/icon-nft-group-pc.svg') no-repeat right bottom #48B1F7;
+    .padding {
+        padding: 20px;
+        .info {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            height: 100px;
+            .logo {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 54px;
+                height: 54px;
+                border-radius: 6px;
+                background: #FFFFFF;
+                margin-right: 20px;
+                img {
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 6px;
+                }
+            }
+            .mess {
+                flex: 1;
+                .title {
+                    overflow:hidden;
+                    color: #FFFFFF;
+                    font-size: 18px;
+                    line-height: 21px;
+                    text-overflow:ellipsis;
+                    white-space:nowrap;
+                }
+                .opt {
+                    color: #FFFFFF;
+                    font-size: 12px;
+                    margin-top: 8px;
+                    label {
+                        margin-right: 18px;
+                        img {
+                            margin-top: -4px;
+                            margin-right: 4px;
+                            vertical-align: middle;
+                        }
+                    }
+                }
+            }
+        }
+        .join {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 40px;
+            cursor: pointer;
+            color: #FFFFFF;
+            font-size: 16px;
+            font-weight: bold;
+            background: #101419;
+            border-radius: 100px;
+        }
+    }
+}
+</style>