de-net/src/view/iframe/tab-group/tab-group.vue

<template>
    <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
        <div class="list-wrapper" ref="listWrapperDom">
            
            <template v-if="listData.length">
                <div class="list-item" 
                    v-for="(item, index) in listData" 
                    :key="index"
                    @click="clickItem(item, index)">
                    <div class="left">
                        <img :src="item.avatarUrl" class="icon-avatar">
                    </div>
                    <div class="right">
                        <div class="top">
                            <div class="icon-nft-wrapper">
                                <el-popover
                                    :width="340"
                                    placement="right-start"
                                    trigger="hover"
                                    popper-style="background: #FFFFFF;
                                        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
                                        border-radius: 20px;
                                        padding: 20px;
                                        box-sizing: border-box;
                                        margin-top: -1px">
                                    <template #reference>
                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft" @click.stop="">
                                    </template>
                                    <template #default>
                                        <div class="preview-nft" v-if="item.nftItem">
                                            <img :src="item.nftItem.imagePath" class="icon-nft-big">
                                            <div class="content">
                                                <div class="nft-name">
                                                    {{item.nftItem.nftItemName}} 
                                                </div>
                                                <div class="nft-desc">
                                                    <div v-if="item.nftItem.metadata" v-html="item.nftItem.metadata.description"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-popover>
                            </div>
                            <div class="nick-name"
                                :style="{
                                    color: eleThemeStyle.color
                                }">
                                {{item.nickName}}
                            </div>
                            <div class="screen-name"
                                :style="{
                                    color: eleThemeStyle.screenName
                                }">
                                @{{item.screenName}}
                            </div>
                        </div>
                        <div class="post-content"
                            :style="{
                                color: eleThemeStyle.color
                            }"
                            v-html="item.textContent"></div>
                    </div>
                </div>
            </template>
            <template v-if="loading && !listData.length" >
                    <img :src="require('@/assets/svg/icon-tweet-loading.svg')" 
                            class="icon-loading" >
            </template>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getGroupPostList, getTwitterNftGroupInfo } from '@/http/nft'
import { getQueryString } from '@/uilts/help.js'
import { ElPopover } from "element-plus";


let twitterAccount = '';
let groupInfo = {};

let listData = ref([])
let listWrapperDom = ref(null);
let pageWrapperDom = ref(null);
let loading = ref(false);

let eleThemeStyle = reactive({
    color: '#000',
    screenName: '#566370',
    borderColor: '#F0F3F4',
})

let listReqParams = {
    params: {
        pageSize: 100,
        preTimestamp: ''
    },
    loadMore: false,
    isInit: false,
};

const clickItem = (data, index) => {
    if(data.srcContentId) {
        let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
        sendMessageToContent({
            actionType: 'IFRAME_PAGE_JUMP',
            data: {
                url
            }
        })
    }
}

function onRuntimeMsg() {
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        sendResponse('ok')
        switch (req.actionType) {
            case 'CONTENT_REFRESH_TAB_GROUP_LIST':
                listReqParams.params.preTimestamp = ''
                initData();
                break;
            case 'CONTENT_GROUP_LIST_SCROLL':
                nextPage(req.data);
                break;
            case 'CONTENT_SEND_GROUP_NAV_TOP':
                styleHandler(req.data);
                break;
            case 'CONTENT_SYS_THEME_CHANGE':
                setPageThemeStyle(req.data);
                break;
        }
    })
}

const nextPage = (params) => {
    let {wrapperHeight, wrapperScrollTop, contentHeight} = params;
    if (wrapperHeight + wrapperScrollTop >= (contentHeight - 50)) {
        console.log('next---');
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
    }
};

const pageScroll = (e) => {
    sendMessageToContent({
        actionType: "IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP",
        data: {
            scrollTop: e.target.scrollTop
        }
    })
}

const styleHandler = (data) => {
    if(data.top > 53) {
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
            pageWrapperDom.value.style.overflowY = 'hidden'
        }
    } else {
        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
            pageWrapperDom.value.style.overflowY = 'auto'
        }
        innerPageNext(data);
    }
}

const innerPageNext = (data) => {
    let wrapperHeight = pageWrapperDom.value.offsetHeight;
    let listContentHeight = listWrapperDom.value.offsetHeight;
    let scrollTop = data.scrollTop || 0;
    if (
        listReqParams.loadMore === false &&
        wrapperHeight + scrollTop >= (listContentHeight - 100)
    ) {
        listReqParams.loadMore = true;
        let dataLength = listData.value.length;
        if(dataLength) {
            listReqParams.params.preTimestamp = listData.value[dataLength - 1]['createTimestamp'];
        }
        if(listReqParams.params.preTimestamp) {
            getListData();
        }
    }
}

const sendMessageToContent = (params) => {
    let {actionType, data} = params || {};
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, {
        actionType,
        data,
        }, (res) => { console.log(res) });
    })
}

const getListData = () => {
    getGroupPostList({
        params: {
            pageSize: listReqParams.params.pageSize,
            preTimestamp: listReqParams.params.preTimestamp,
            groupId: groupInfo.nftGroupId
        }
    }).then(res => {
        loading.value = false;
        if (res.code == 0) {
            let resData = res.data;
            if (resData.length) {
                for (let i = 0; i < resData.length; i++) {
                    let nftItem = resData[i]["nftItem"];
                    if(nftItem) {
                        let matedata = nftItem['metadata'];
                        if(matedata) {
                            resData[i]["nftItem"]['metadata'] = JSON.parse(matedata);
                        }
                    }
                }

                if (!listReqParams.params.preTimestamp) {
                    listData.value = resData;
                } else {
                    let data = listData.value;
                    data = data.concat(resData);
                    listData.value = data;
                }
                listReqParams.loadMore = false;
            }
        }
    })
}

const initData = () => {
    let {windowLocation} = JSON.parse(getQueryString('params'));
    if(windowLocation.pathname) {
        let arr =  windowLocation.pathname.split('/');
        if(arr.length >= 2){
            twitterAccount = arr[1];
            if(twitterAccount) {
                getTwitterNftGroupInfo({
                    params: {
                        twitterAccount
                    }
                }).then(res => {
                    if(res.code == 0) {
                        groupInfo = res.data || {};
                        if(!groupInfo.nftGroupId) return;
                        loading.value = true;
                        getListData()
                    }
                })
            }
        }
    }
}

const setPageThemeStyle = (params) => {
    let {twitterTheme, theme} = params;

    if(twitterTheme == 'light') {
        eleThemeStyle.color = '#000';
        eleThemeStyle.screenName = '#566370';
        eleThemeStyle.borderColor = '#F0F3F4';
        document.querySelector('body').style.backgroundColor = '#fff'
    } else if (twitterTheme == 'dark'){
        eleThemeStyle.color = '#fff';
        eleThemeStyle.screenName = '#fff';
        eleThemeStyle.borderColor = '#000';
        document.querySelector('body').style.backgroundColor = '#000'
    }
};

onMounted(() => {
    onRuntimeMsg();
    initData();

    sendMessageToContent({
        actionType: "IFREME_TAB_GROUP_SET_IFRAME_HEIGHT",
        data: {
            height: listWrapperDom.value.offsetHeight + 10
        }
    })
}) 
</script>

<style  lang="scss">
html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.el-popper__arrow {
    display: none !important;
}

// @media (prefers-color-scheme: light) {
//     body {
//         background: #fff;
//     }
// }

// @media (prefers-color-scheme: dark) {
//     body {
//         background: #000 !important;
//     }
//     .list-item {
//         border-bottom: 1px solid #000 !important;
//     }
//     .nick-name {
//         color: #fff !important;
//     }

//     .screen-name {
//         color: #fff !important;
//     }

//     .post-content {
//         color: #fff !important;
//     }
// }

.preview-nft {
    box-sizing: border-box;
    // position: absolute;
    // left: 26px;
    // top: 0px;
    // z-index: 1999;
    // display: none;

    .icon-nft-big {
        width: 300px;
        height: 300px;
        object-fit: cover;
    }

    .content {
        margin-top: 19px;
        .nft-name {
            margin-bottom: 6px;
            font-weight: 500;
            font-size: 14px;
            color: #000;
        }
        .nft-desc {
            font-weight: 400;
            font-size: 14px;
            color: #787878;
            // margin-bottom: 18px;
        }
        .nft-date {
            font-weight: 500;
            font-size: 12px;
            color: #ACACAC;
        }
    }
}

.tab-group-page {
    height: 100%;
    overflow-y: hidden;

    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        background: rgb(241, 241, 241);
    }
    &::-webkit-scrollbar-thumb {
        background: rgb(136, 136, 136);
        border-radius: 8px;
    }

    .list-wrapper {

        .list-item:hover {
            background: rgba($color: #000000, $alpha: 0.03);
        }

        .list-item {
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            border-bottom: 1px solid #F0F3F4;
            cursor: pointer;

            .left {
                margin-right: 10px;

                .icon-avatar {
                    width: 47px;
                    height: 47px;
                    border-radius: 50%;
                }
            }

            .right {
                flex: 1;
                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 7px;
                    position: relative;

                    .icon-nft-wrapper {
                        height: 24px;
                        margin-right: 8px;
                        .icon-nft {
                            width: 24px;
                            height: 24px;
                            // object-fit: cover;
                        }
                    }

                    .icon-nft-wrapper:hover {
                        .preview-nft  {
                            // display: block;
                        }
                    }

                    .nick-name, .screen-name {
                        font-size: 15px;
                    }

                    .nick-name {
                        font-weight: 600;
                        color: #000;
                        margin-right: 8px;
                    }

                    .screen-name {
                        color: #566370;
                    }
                }

                .post-content {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 24px;
                    color: #000;
                    font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                    word-break: break-all;
                    white-space: pre-line;
                }
            }
        }
    }

    .icon-loading {
        width: 26px;
        height: 26px;  
        display: block;
        margin: 20px auto;
        animation: loading infinite 0.8s linear;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>