[edit][iframe]

src/entry/background.js

@@ -141,7 +141,7 @@ function onInstalledMethod() {
 
 function onMessageMethod(req, sender, sendResponse) {
     try {
-        sendResponse(res.actionType || 'ok')
+        sendResponse(req.actionType || 'ok')
         if (req) {
             switch (req.actionType) {
                 case "POPUP_LOGIN":

src/entry/content.js

@@ -33,7 +33,6 @@ import {
     setTabGroupIframeStyle,
     pageJumpHandler,
     getTweetProfileNavTop,
-    selectGroupTab,
     setGroupInfo,
     refreshTabGroup,
     groupTipsSelectGroupTab,
@@ -51,6 +50,7 @@ import {
 import {
     initFacebookContent
 } from "@/logic/content/facebook.js"
+import { toolBox, toolbox_fixed_tweetId } from '@/logic/content/ToolBox.js'
 
 chrome.storage.onChanged.addListener(changes => {
     initExecuteScript(changes)
@@ -64,7 +64,6 @@ window.onload = () => {
         data: {}
     }, () => { });
 };
-
 window.onmessage = (res) => {
     if (res.data && res.data.actionType) {
         switch (res.data.actionType) {
@@ -107,7 +106,6 @@ window.onmessage = (res) => {
 
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse(res.actionType || 'ok')
     switch (req.actionType) {
         case 'BG_SHOW_PIN_TIPS':
             showPinTips()
@@ -148,51 +146,71 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             setPopupConfByPopupPage();
             break
         case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
+            sendResponse(req.actionType || 'ok')
             setTabGroupIframeStyle(req.data);
             break
         case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
+            sendResponse(req.actionType || 'ok')
             getTweetProfileNavTop(req.data);
         case 'IFRAME_PAGE_JUMP':
+            sendResponse(req.actionType || 'ok')
             pageJumpHandler(req.data);
             break;
         case 'BG_LOGIN_SET_USERINFO_CB':
+            sendResponse(req.actionType || 'ok')
             loginSuccessHandle();
             break;
         case 'IFRAME_SHOW_JOIN_DIALOG':
-            console.log('IFRAME_SHOW_JOIN_DIALOG')
+            sendResponse(req.actionType || 'ok')
             showJoinDialog(req.data)
             break
         case 'IFRAME_SHOW_GROUP_TIP':
+            sendResponse(req.actionType || 'ok')
             showGroupTip()
             break
         case 'IFRAME_SHOW_POST_DIALOG':
-            console.log('IFRAME_SHOW_POST_DIALOG')
+            sendResponse(req.actionType || 'ok')
             showTwitterPost(req.data)
             break
         case 'BACK_TWITTER_NFT_POST_PRE':
+            sendResponse(req.actionType || 'ok')
             setTwitterTextarea(req.data)
             break
         case 'SWITCH_GROUP_STATUS':
+            sendResponse(req.actionType || 'ok')
             groupTipsSelectGroupTab(req.data);
             break
         case 'IFRAME_GROUP_BANNER_GROUP_INFO':
+            sendResponse(req.actionType || 'ok')
             setGroupInfo(req.data)
             break;
         case 'IFRAME_JOINED_GROUP_SET_STYLE':
+            sendResponse(req.actionType || 'ok')
             setJoinedGroupIframeStyle(req.data)
             break
         case 'BACK_NFT_PUBLISH_DONE':
+            sendResponse(req.actionType || 'ok')
             refreshTabGroup()
             break
         case 'IFRAME_API_GET_TWEET_USER_INFO_REQ':
+            sendResponse(req.actionType || 'ok')
             TwitterApiUserByScreenName(req.data)
             break;
         // 回掉参数
         case 'HTTP_BACK_TO_CONTENT':
+            sendResponse(req.actionType || 'ok')
             httpBackToContentCallBack(req)
             break
         case 'BG_SHOW_DENET_PUBLISH_DIALOG':
+            sendResponse(req.actionType || 'ok')
             showPublishDialog();
             break;
+        case 'Get_ToolBox_Fixed_TweetId':
+            sendResponse(toolbox_fixed_tweetId)
+            break
+        case 'Set_ToolBox_Fixed':
+            debugger
+            toolBox.switchStatus(req)
+            break
     }
 })

src/entry/content_help.js

@@ -41,7 +41,7 @@ chrome.runtime.sendMessage({
 }, () => { });
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse(res.actionType || 'ok')
+    sendResponse(req.actionType || 'ok')
     switch (req.actionType) {
         case 'BACK_PING':
             chrome.runtime.sendMessage({ actionType: "CONTENT_PONG", data: '1' }, (res) => { console.log(res) })

src/logic/content/ParseCard.js

@@ -238,7 +238,7 @@ class ParseCard {
             tweet_str = `&tweetId=${tweet_Id}`
         }
         _iframe.id = post_Id
-        _iframe_url = chrome.runtime.getURL('/iframe/tool-box.html') + `?postId=${post_Id}${tweet_str}`;
+        _iframe_url = chrome.runtime.getURL('/iframe/tool-box.html') + `?page_type=${'card'}&postId=${post_Id}&tweetId=${tweet_Id}`;
         // debugger mode
         if (window.location.href.includes('denet_debugger')) {
             _iframe_url = _iframe_url + '&denet_debugger=1'

src/logic/content/ToolBox.js

@@ -1,26 +1,58 @@
-import ToolBoxFull from '@/view/content/tool-box/full.vue'
-import { createApp } from 'vue'
+import { $ } from "@/uilts/help";
+export let toolbox_fixed_tweetId = ''
 
-
-export class ToolBox {
+export const toolBox = new class ToolBox {
     constructor() {
 
     }
     // 加载组件
     initFull() {
-        const div = document.createElement('div')
-        div.id = 'denet-tool-box-fixed'
-        div.style.cssText = `
+        const iframe = document.createElement('iframe')
+        iframe.id = 'denet-tool-box-fixed'
+        iframe.style.cssText = `
             width: 505px;
             height: 544px;
             position: fixed;
             right: 10px;
             top: 10px;
-            display:none;`
-        document.body.appendChild(div)
-        createApp(ToolBoxFull).mount(`#${div.id}`)
+            display:none;
+            border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+            `
+        iframe.src = chrome.runtime.getURL('/iframe/tool-box.html') + `?page_type=${'full'}`;
+        document.body.append(iframe)
     }
-}
-
+    // 切换状态
+    switchStatus(req) {
+        toolbox_fixed_tweetId = req.data.tweetId
+        let dom_fixed = $('#denet-tool-box-fixed')
+        switch (req.data.type) {
+            case '全屏':
+                dom_fixed.style.cssText = `
+                    display:block;
+                    width: 100%;
+                    height: 100%;
+                    position: fixed;
+                    left: 0;
+                    top: 0
+                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+                    `
+                break;
 
-export default new ToolBox()
+            case '固定右上角':
+                dom_fixed.style.cssText = `
+                    display:block;
+                    width: 505px;
+                    height: 544px;
+                    position: fixed;
+                    right: 10px;
+                    top: 10px;
+                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
+                    `
+                break
+            case '关闭':
+                dom_fixed.style.cssText = `display:none;`
+                toolbox_fixed_tweetId = ''
+                break
+        }
+    }
+}

src/logic/content/twitter.js

@@ -7,7 +7,7 @@ import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
 import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventListener, addJoinedGroupList } from '@/logic/content/nft';
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
 import { clearPostContent, setGroupIconStatus } from '@/logic/content/nft.js'
-import ToolBox from '@/logic/content/ToolBox'
+import { toolBox } from '@/logic/content/ToolBox'
 import axios from 'axios';
 
 let dom = {};
@@ -936,7 +936,7 @@ export function init() {
         getSysTheme();
         addGroupTab();
         // 预加载全屏 toobbox
-        ToolBox.initFull()
+        toolBox.initFull()
     }
     // 渲染dom
     initParseCard()

src/view/content/tool-box/full.vue

@@ -19,7 +19,6 @@
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { sendEventInfo } from "@/uilts/event";
-import { $ } from "@/uilts/help";
 import IconSvg from '@/view/components/icon-svg.vue'
 
 let state = reactive({

src/view/content/tool-box/index.vue

@@ -57,7 +57,6 @@ import { getChromeStorage, setChromeStorage, httpContentToBack, defineProps } fr
 import { guid } from "@/uilts/help";
 import { sendEventInfo } from "@/uilts/event";
 import { onMounted, reactive, ref } from "vue";
-import { $ } from "@/uilts/help";
 import IconSvg from '@/view/components/icon-svg.vue'
 let dom_toolbox = ref(null)
 let dom_iframe = ref(null)

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

@@ -130,7 +130,7 @@ const init = (callback) => {
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse(res.actionType || '')
+    sendResponse(req.actionType || '')
     switch (req.actionType) {
         case 'FINISH_GROUP_BANNNER':
             init()

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

@@ -107,7 +107,7 @@ onMounted(() => {
 
     // 登录回调
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse(res.actionType || 'ok')
+        sendResponse(req.actionType || 'ok')
         switch (req.actionType) {
             case 'BG_LOGIN_SET_USERINFO_CB':
                 getDetail();

src/view/iframe/publish/tool-box/child/editor.vue

@@ -233,7 +233,7 @@ const getAppList = () => {
 
 const onRuntimeMsg = () => {
   chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse(res.actionType || 'ok')
+    sendResponse(req.actionType || 'ok')
     switch (req.actionType) {
       case 'CONTENT_GET_GUIDE_DATA':
         chrome.runtime.sendMessage({

src/view/iframe/publish/tool-box/child/guide.vue

@@ -62,7 +62,7 @@ const confirm = () => {
 
 const onRuntimeMsg = () => {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse(res.actionType || 'ok')
+        sendResponse(req.actionType || 'ok')
         switch (req.actionType) {
             case 'CONTENT_EDIT_SEND_GUIDE_DATA':
                 let { guideData, windowData } = req.data;

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

@@ -104,7 +104,7 @@ const clickItem = (data, index) => {
 
 function onRuntimeMsg() {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse(res.actionType || 'ok')
+        sendResponse(req.actionType || 'ok')
         switch (req.actionType) {
             case 'CONTENT_REFRESH_TAB_GROUP_LIST':
                 listReqParams.params.preTimestamp = ''

src/view/iframe/tool-box/card.vue

@@ -0,0 +1,449 @@
+<template>
+    <div class="denet-toolbox" :class="{ 'pre-view': pre_view }">
+        <div class="head">
+            <span></span>
+            <div v-show="state.show_btn && state.status == ''">
+                <icon-svg :icon="'固定'" @clickStop="clickFixed" :class="'fixed'"></icon-svg>
+                <icon-svg :icon="'放大'" @clickStop="clickFull" :class="'full'"></icon-svg>
+            </div>
+        </div>
+        <div class="content" v-if="pre_view">
+            <iframe :src="iframe_url" frameborder="0"></iframe>
+        </div>
+        <div class="content" v-else>
+            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0"
+                allow="camera *;microphone *"></iframe>
+            <!-- 网页错误 -->
+            <div class="state" v-show="state.status == '网页错误'">
+                <img :src="state.cover_url" alt="" class="cover">
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-error.svg')" alt />
+                    <div>Oops, this link is invalid</div>
+                </div>
+            </div>
+
+            <!-- 加载 -->
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
+            </div>
+
+            <!-- 关闭 -->
+            <div class="state" v-show="state.status == '关闭'">
+
+            </div>
+            <!-- 固定右上角 -->
+            <div class="state" v-show="state.status == '固定右上角'">
+                <div class="info">
+                    <img :src="require('@/assets/img/icon-fixed-gray.png')" alt />
+                    <div>Pinned to the top right</div>
+                </div>
+            </div>
+        </div>
+        <!-- alert -->
+        <div class="alert" v-show="state.show_alert">
+            <div class="back" @click.stop="clickCancel"></div>
+            <div class="confirm">
+                <div class="check">
+                    <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
+                    <label :for="state.checkbox_id">Don't remind</label>
+                </div>
+
+                <div class="title">Web Page Progress May Reset</div>
+                <div class="handle">
+                    <div class="cancel" @click.stop="clickCancel">Cancel</div>
+                    <div class="continue" @click.stop="clickContinue">Continue</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage } from "@/uilts/chromeExtension";
+import { getPostDetail } from '@/http/redPacket.js'
+import { guid, getQueryString } from "@/uilts/help";
+import { onMounted, reactive, ref } from "vue";
+import IconSvg from '@/view/components/icon-svg.vue'
+let dom_iframe = ref(null)
+let state = reactive({
+    status: '', //
+    show_alert: false,
+    show_btn: true,
+    list: [],
+    checkbox: false,
+    checkbox_id: `denet-${guid()}`,
+    postId: '',
+    tweetId: '',
+    detail: {},
+    handle_type: ''
+})
+
+let dom = {}
+
+let props = defineProps({
+    pre_view: {
+        type: Boolean,
+        default: false,
+    },
+    iframe_url: {
+        type: String,
+        default: ''
+    }
+})
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    debugger
+    switch (req.actionType) {
+        // 事件传输
+        case 'Set_ToolBox_Fixed':
+            sendResponse(req.actionType || 'ok')
+            if (req.data.tweetId == state.tweetId && req.data.type == '关闭') {
+                state.show_btn = true
+                state.status = ''
+                state.iframe_url = req.data.iframe_url
+            }
+            break
+    }
+})
+
+
+const clickContinue = () => {
+    if (state.checkbox) {
+        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
+    }
+    if (state.handle_type == '全屏') {
+        handleFull()
+    } else {
+        handleFixed()
+    }
+    state.show_alert = false
+}
+
+onMounted(() => {
+    if (props.pre_view) {
+        return
+    }
+    state.postId = getQueryString('postId')
+    state.tweetId = getQueryString('tweetId')
+
+    sendChromeTabMessage({
+        actionType: 'Get_ToolBox_Fixed_TweetId'
+    }, (res) => {
+        console.log('Get_ToolBox_Fixed_TweetId', res)
+        if (res == state.tweetId) {
+            state.status = '固定右上角'
+            return
+        }
+    })
+    getDetail()
+})
+
+// detail函数
+const getDetail = () => {
+    state.status = '加载'
+    getPostDetail({
+        params: {
+            postId: state.postId
+        }
+    }).then((res) => {
+        if (res && res.code == 0) {
+            state.detail = JSON.parse(res.data.postBizData)
+            console.log('postBizData', state.detail)
+            // 加载iframe
+            let iframe = dom_iframe.value
+            iframe.onerror = () => {
+                state.status = '网页错误'
+            }
+            state.cover_url = state.detail.linkImagePath
+
+            setTimeout(() => {
+                state.iframe_url = state.detail.convertUrl
+                state.status = ''
+            }, 1000)
+        } else {
+            state.status = '网页错误'
+        }
+    })
+}
+
+const clickCancel = () => {
+    state.show_alert = false
+}
+
+const clickFixed = () => {
+    state.handle_type = '固定'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 固定
+            handleFixed()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+// 固定
+const handleFull = () => {
+    if (state.status || !state.iframe_url) {
+        return
+    }
+    // 切换状态
+    state.status = '关闭'
+    state.status = '固定右上角'
+    state.show_btn = false
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '全屏',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+// 全屏
+const handleFixed = () => {
+    // 切换状态
+    state.show_btn = false
+    state.status = '固定右上角'
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '固定右上角',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+const clickFull = () => {
+    state.handle_type = '全屏'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 全屏
+            handleFull()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+</script>
+
+<style lang="scss" >
+.pre-view {
+    pointer-events: none;
+    cursor: default;
+}
+
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+}
+
+.denet-toolbox {
+    width: 100%;
+    min-height: 100%;
+    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+
+    .alert {
+        text-align: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .back {
+            background: #000000;
+            opacity: 0.8;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: auto;
+        }
+
+        .confirm {
+            position: absolute;
+            width: 355px;
+            height: 180px;
+            background: #FFFFFF;
+            border-radius: 20px;
+            top: 173px;
+            left: 50%;
+            margin-left: -180px;
+
+            .title {
+                font-weight: 600;
+                font-size: 18px;
+                color: #000000;
+                margin-bottom: 34px;
+            }
+
+            .check {
+                color: #899099;
+                font-weight: 400;
+                font-size: 14px;
+                margin: 12px 15px 32px 0;
+                text-align: right;
+                align-content: center;
+                justify-content: flex-end;
+                display: flex;
+                line-height: 17px;
+
+                input {
+                    margin-right: 8px;
+                }
+
+                label {
+                    line-height: 19px;
+                }
+
+            }
+
+            .handle {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                div {
+                    font-weight: 600;
+                    font-size: 16px;
+                    width: 156px;
+                    height: 47px;
+                    line-height: 47px;
+                    cursor: pointer;
+                    border-radius: 1000px;
+                    user-select: none;
+                }
+
+                .cancel {
+                    color: #000000;
+                    background: rgba(56, 154, 255, 0.01);
+                    border: 1px solid #E6E6E6;
+                }
+
+                .continue {
+                    background: #1D9BF0;
+                    font-weight: 600;
+                    margin-left: 11px;
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    .head {
+        width: 100%;
+        height: 40px;
+        background: #373737;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        div {
+            display: flex;
+            justify-content: center;
+        }
+
+        span {
+            color: #FFFFFF;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            margin-left: 16px;
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+        }
+
+        .full {
+            margin-right: 16px;
+        }
+
+        .fixed {
+            margin-right: 20px;
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+        background: #686868;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+
+        .state {
+            text-align: center;
+            position: relative;
+
+            .cover {
+                width: 100%;
+                background: #000000;
+                opacity: 0.6;
+            }
+
+            .info {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                z-index: 1;
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                justify-content: center;
+
+                img {
+                    margin-bottom: 14px;
+                }
+
+
+                .icon-loading {
+                    animation: loading 1s infinite linear;
+                }
+
+                div {
+                    margin-bottom: 40px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: 500;
+                    font-size: 22px;
+                }
+            }
+
+        }
+
+    }
+}
+
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

src/view/iframe/tool-box/full.vue

@@ -0,0 +1,190 @@
+<template>
+    <div class="denet-toolbox">
+        <div class="head">
+            <span></span>
+            <div>
+                <!-- 缩小 -->
+                <icon-svg v-if="state.status == '全屏'" :icon="'缩小'" @clickStop="clickFull" :class="'full'"></icon-svg>
+                <icon-svg v-else :icon="'放大'" @clickStop="clickFull" :class="'full'"></icon-svg>
+
+                <!-- 关闭 -->
+                <icon-svg :icon="'关闭'" @clickStop="clickClose" :class="'fixed'"></icon-svg>
+            </div>
+        </div>
+        <div class="content">
+            <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
+        </div>
+    </div>
+</template>
+<script setup>
+import { reactive } from "vue";
+import { sendChromeTabMessage } from "@/uilts/chromeExtension";
+import IconSvg from '@/view/components/icon-svg.vue'
+
+let state = reactive({
+    status: '固定', // 全屏
+    iframe_url: '',
+    tweetId: ''
+})
+let dom_fixed = null
+
+window.addEventListener("onEvent", e => {
+    let info = e.detail
+    switch (info.event_type) {
+        // 固定
+        case 'ToolBox_To_Fixed':
+            // 替换
+            if (state.iframe_url || state.tweetId) {
+                sendClose()
+            }
+            state.iframe_url = info.data.iframe_url
+            state.tweetId = info.data.tweetId
+            break
+        case 'ToolBox_To_Full':
+            if (state.iframe_url || state.tweetId) {
+                sendClose()
+            }
+            state.status = '全屏'
+            state.iframe_url = info.data.iframe_url
+            state.tweetId = info.data.tweetId
+            break
+    }
+});
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse(req.actionType || 'ok')
+    switch (req.actionType) {
+        // 事件传输
+        case 'Set_ToolBox_Fixed':
+            if (req.data.type == '全屏' || req.data.type == '固定右上角') {
+                state.status = req.data.type
+                state.tweetId = req.data.tweetId
+                state.iframe_url = req.data.iframe_url
+            }
+
+            break
+    }
+})
+
+
+const clickFull = () => {
+    if (state.status == '固定') {
+        state.status = '全屏'
+        changeFull()
+    } else {
+        state.status = '固定'
+        changeFixed()
+    }
+}
+
+const changeFull = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '全屏',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+}
+
+const changeFixed = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '固定右上角',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+}
+
+const clickClose = () => {
+    sendClose()
+
+}
+const sendClose = () => {
+    sendChromeTabMessage({
+        actionType: 'Set_ToolBox_Fixed',
+        data: {
+            type: '关闭',
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+    state.iframe_url = ''
+    state.tweetId = ''
+}
+
+
+</script>
+
+<style lang="scss">
+html,
+body,
+#app {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.denet-toolbox {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
+    border-radius: 12px;
+    overflow: hidden;
+
+    .head {
+        width: 100%;
+        height: 40px;
+        background: #373737;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+            color: #FFFFFF;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            margin-left: 16px;
+        }
+
+        div {
+            display: flex;
+            justify-content: center;
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+        }
+
+        .full {
+            margin-right: 16px;
+        }
+
+        .fixed {
+            margin-right: 20px;
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: calc(100% - 40px);
+        background: #686868;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

src/view/iframe/tool-box/index.vue

@@ -1,471 +1,14 @@
 <template>
-    <div class="denet-toolbox" :class="{ 'pre-view': pre_view }">
-        <div class="head">
-            <span></span>
-            <div v-show="state.show_btn && state.status == ''">
-                <icon-svg :icon="'固定'" @clickStop="clickFixed" :class="'fixed'"></icon-svg>
-                <icon-svg :icon="'放大'" @clickStop="clickFull" :class="'full'"></icon-svg>
-            </div>
-        </div>
-        <div class="content" v-if="pre_view">
-            <iframe :src="iframe_url" frameborder="0"></iframe>
-        </div>
-        <div class="content" v-else>
-            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0"
-                allow="camera *;microphone *"></iframe>
-            <!-- 网页错误 -->
-            <div class="state" v-show="state.status == '网页错误'">
-                <img :src="state.cover_url" alt="" class="cover">
-                <div class="info">
-                    <img :src="require('@/assets/svg/icon-iframe-error.svg')" alt />
-                    <div>Oops, this link is invalid</div>
-                </div>
-            </div>
-
-            <!-- 加载 -->
-            <div class="state" v-show="state.status == '加载'">
-                <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
-            </div>
-
-            <!-- 关闭 -->
-            <div class="state" v-show="state.status == '关闭'">
-
-            </div>
-            <!-- 固定右上角 -->
-            <div class="state" v-show="state.status == '固定右上角'">
-                <div class="info">
-                    <img :src="require('@/assets/img/icon-fixed-gray.png')" alt />
-                    <div>Pinned to the top right</div>
-                </div>
-            </div>
-        </div>
-        <!-- alert -->
-        <div class="alert" v-show="state.show_alert">
-            <div class="back" @click.stop="clickCancel"></div>
-            <div class="confirm">
-                <div class="check">
-                    <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
-                    <label :for="state.checkbox_id">Don't remind</label>
-                </div>
-
-                <div class="title">Web Page Progress May Reset</div>
-                <div class="handle">
-                    <div class="cancel" @click.stop="clickCancel">Cancel</div>
-                    <div class="continue" @click.stop="clickContinue">Continue</div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <v-full v-if="page_type == 'full'"></v-full>
+    <v-card v-if="page_type == 'card'"></v-card>
 </template>
 <script setup>
-import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage } from "@/uilts/chromeExtension";
-import { getPostDetail } from '@/http/redPacket.js'
-import { guid, getQueryString } from "@/uilts/help";
-import { onMounted, reactive, ref } from "vue";
-import { $ } from "@/uilts/help";
-import IconSvg from '@/view/components/icon-svg.vue'
-let dom_iframe = ref(null)
-let state = reactive({
-    status: '', //
-    show_alert: false,
-    show_btn: true,
-    list: [],
-    checkbox: false,
-    checkbox_id: `denet-${guid()}`,
-    postId: '',
-    tweetId: '',
-    detail: {},
-    handle_type: ''
-})
-
-let dom = {}
-
-let props = defineProps({
-    pre_view: {
-        type: Boolean,
-        default: false,
-    },
-    iframe_url: {
-        type: String,
-        default: ''
-    }
-})
-
-chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse(res.actionType || 'ok')
-    switch (req.actionType) {
-        // 事件传输
-        case 'ToolBox_Fixed_Close':
-            if (req.data.tweetId == state.tweetId) {
-                state.show_btn = true
-                state.status = ''
-                state.iframe_url = req.data.url
-            }
-            break
-    }
-})
-
-
-const clickContinue = () => {
-    if (state.checkbox) {
-        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
-    }
-    if (state.handle_type == '全屏') {
-        handleFull()
-    } else {
-        handleFixed()
-    }
-    state.show_alert = false
-}
-
+import { ref, onMounted } from 'vue'
+import VFull from '@/view/iframe/tool-box/full.vue'
+import VCard from '@/view/iframe/tool-box/card.vue'
+import { getQueryString } from "@/uilts/help";
+let page_type = ref('')
 onMounted(() => {
-    if (props.pre_view) {
-        return
-    }
-    state.postId = getQueryString('postId')
-    state.tweetId = getQueryString('tweetId')
-
-    try {
-        dom.fixed = $('#denet-tool-box-fixed')
-        if (dom.fixed && dom.fixed.style.display == 'block') {
-            if (dom.fixed.dataset.tweetId == state.tweetId) {
-                state.status = '固定右上角'
-                return
-            }
-        }
-    } catch (error) {
-        console.log(error)
-    }
-    sendChromeTabMessage({
-        actionType: 'Get_ToolBox_Fixed_TweetId'
-    }, (res) => {
-        console.log('Get_ToolBox_Fixed_TweetId', res)
-    })
-    getDetail()
+    page_type.value = getQueryString('page_type') || ''
 })
-
-// detail函数
-const getDetail = () => {
-    state.status = '加载'
-    getPostDetail({
-        params: {
-            postId: state.postId
-        }
-    }).then((res) => {
-        if (res && res.code == 0) {
-            state.detail = JSON.parse(res.data.postBizData)
-            console.log('postBizData', state.detail)
-            // 加载iframe
-            let iframe = dom_iframe.value
-            // state.detail.convertUrl = 'https://www.bilibili.com'
-            // iframe.onerror = () => {
-            //     state.status = '网页错误'
-            // }
-            // iframe.onload = function () {
-            //     if (state.status != '固定右上角') {
-            //         state.status = ''
-            //     }
-            // }
-            state.cover_url = state.detail.linkImagePath
-
-            setTimeout(() => {
-                state.iframe_url = state.detail.convertUrl
-                state.status = ''
-            }, 1000)
-        } else {
-            state.status = '网页错误'
-        }
-    })
-}
-
-const clickCancel = () => {
-    state.show_alert = false
-}
-
-const clickFixed = () => {
-    state.handle_type = '固定'
-    getChromeStorage('fullCheck', (res) => {
-        if (res && res.fullCheck) {
-            // 固定
-            handleFixed()
-        } else {
-            state.show_alert = true
-        }
-    })
-}
-
-// 固定
-const handleFull = () => {
-    if (state.status || !state.iframe_url) {
-        return
-    }
-    // 切换状态
-    state.status = '关闭'
-    state.status = '固定右上角'
-    // 操作全屏dom
-    dom.fixed.style.cssText = `
-        width:100%;
-        height: 100%;
-        position: fixed;
-        right: 0px;
-        top: 0px;
-        display:block;`
-    dom.fixed.dataset.tweetId = state.tweetId
-    state.show_btn = false
-    sendChromeTabMessage({
-        actionType: 'ToolBox_To_Full',
-        data: {
-            iframe_url: state.iframe_url,
-            tweetId: state.tweetId,
-        }
-    })
-    // 清除当前iframe src
-    state.iframe_url = ''
-}
-
-// 全屏
-const handleFixed = () => {
-    // 切换状态
-    state.show_btn = false
-    state.status = '固定右上角'
-    // 操作全屏dom
-    dom.fixed.style.cssText = `
-        display:block;
-        width: 505px;
-        height: 544px;
-        position: fixed;
-        right: 10px;
-        top: 10px;`
-    dom.fixed.dataset.tweetId = state.tweetId
-    sendChromeTabMessage({
-        actionType: 'ToolBox_To_Fixed',
-        data: {
-            iframe_url: state.iframe_url,
-            tweetId: state.tweetId
-        }
-    })
-    // 清除当前iframe src
-    state.iframe_url = ''
-}
-
-const clickFull = () => {
-    state.handle_type = '全屏'
-    getChromeStorage('fullCheck', (res) => {
-        if (res && res.fullCheck) {
-            // 全屏
-            handleFull()
-        } else {
-            state.show_alert = true
-        }
-    })
-}
-
 </script>
-
-<style lang="scss" >
-.pre-view {
-    pointer-events: none;
-    cursor: default;
-}
-
-.denet-toolbox {
-    width: 505px;
-    min-height: 544px;
-    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
-    border-radius: 12px;
-    overflow: hidden;
-    position: relative;
-
-    .alert {
-        text-align: center;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-
-        .back {
-            background: #000000;
-            opacity: 0.8;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            cursor: auto;
-        }
-
-        .confirm {
-            position: absolute;
-            width: 355px;
-            height: 180px;
-            background: #FFFFFF;
-            border-radius: 20px;
-            top: 173px;
-            left: 50%;
-            margin-left: -180px;
-
-            .title {
-                font-weight: 600;
-                font-size: 18px;
-                color: #000000;
-                margin-bottom: 34px;
-            }
-
-            .check {
-                color: #899099;
-                font-weight: 400;
-                font-size: 14px;
-                margin: 12px 15px 32px 0;
-                text-align: right;
-                align-content: center;
-                justify-content: flex-end;
-                display: flex;
-                line-height: 17px;
-
-                input {
-                    margin-right: 8px;
-                }
-
-                label {
-                    line-height: 19px;
-                }
-
-            }
-
-            .handle {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                div {
-                    font-weight: 600;
-                    font-size: 16px;
-                    width: 156px;
-                    height: 47px;
-                    line-height: 47px;
-                    cursor: pointer;
-                    border-radius: 1000px;
-                    user-select: none;
-                }
-
-                .cancel {
-                    color: #000000;
-                    background: rgba(56, 154, 255, 0.01);
-                    border: 1px solid #E6E6E6;
-                }
-
-                .continue {
-                    background: #1D9BF0;
-                    font-weight: 600;
-                    margin-left: 11px;
-                    color: #FFFFFF;
-                }
-            }
-        }
-    }
-
-    .head {
-        width: 100%;
-        height: 40px;
-        background: #373737;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        div {
-            display: flex;
-            justify-content: center;
-        }
-
-        span {
-            color: #FFFFFF;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            margin-left: 16px;
-        }
-
-        svg {
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-
-        }
-
-        .full {
-            margin-right: 16px;
-        }
-
-        .fixed {
-            margin-right: 20px;
-        }
-    }
-
-    .content {
-        width: 100%;
-        height: 504px;
-        background: #686868;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        iframe {
-            width: 100%;
-            height: 100%;
-        }
-
-        .state {
-            text-align: center;
-            position: relative;
-
-            .cover {
-                width: 100%;
-                background: #000000;
-                opacity: 0.6;
-            }
-
-            .info {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                z-index: 1;
-                display: flex;
-                flex-wrap: wrap;
-                flex-direction: column;
-                justify-content: center;
-
-                img {
-                    margin-bottom: 14px;
-                }
-
-
-                .icon-loading {
-                    animation: loading 1s infinite linear;
-                }
-
-                div {
-                    margin-bottom: 40px;
-                    color: #fff;
-                    text-align: center;
-                    font-weight: 500;
-                    font-size: 22px;
-                }
-            }
-
-        }
-
-    }
-}
-
-@keyframes loading {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-</style>