[edit]post edit publish

src/assets/svg/icon-tool-box-guide-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.972185 1L8.69141 8.5L0.972184 16" stroke="#1D9BF0" stroke-width="2"/>
+</svg>

src/assets/svg/icon-tool-box-search-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.968279 1L8.6875 8.5L0.968277 16" stroke="white" stroke-width="2"/>
+</svg>

src/iframe/tool-box-guide.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/publish/tool-box/child/guide.vue'
+
+const app = createApp(App);
+app.mount('#app');
+
+window.onload= () => {
+    document.title = 'DeNet'
+}

src/manifest.json

@@ -80,7 +80,8 @@
                 "/iframe/popup-page.html",
                 "/iframe/popup-page.html",
                 "/iframe/tab-group.html",
-                "/iframe/joined-group-list.html"
+                "/iframe/joined-group-list.html",
+                "/iframe/tool-box-guide.html"
             ],
             "matches": [
                 "<all_urls>"

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

@@ -60,6 +60,9 @@ const props = defineProps({
 
 let siteUrl = ref('');
 
+let selectAppGuideData = {};
+let openWindowList = [];
+
 let historyList = reactive([
   // {
   //   "apps": [
@@ -87,6 +90,9 @@ const emits = defineEmits(["changeShowCom"]);
 
 const searchHandler = async () => {
   siteUrl.value = siteUrl.value.trim();
+  let siteTitle = '';
+  let favicon = '';
+
   if(!checkURL(siteUrl.value)) {
     //提示
     return;
@@ -99,7 +105,16 @@ const searchHandler = async () => {
       // 提示
       return;
     }
-  }
+    if(siteRes.data) {
+      let arr = siteRes.data.match(/<title>(\S*)<\/title>/);
+      if(arr && arr.length > 1) {
+        siteTitle = arr[1];
+      }
+    }
+    favicon = new URL(siteUrl.value).origin + '/favicon.ico';
+  } 
+
+  console.log(siteTitle, favicon, 'site')
 
   let convertRes = await convertUrl({params: {originUrl: siteUrl.value}});
   let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: '' };
@@ -120,11 +135,38 @@ const clickAppHandler = (params) => {
       emits('changeShowCom', { convertUrl: defaultUrl, originUrl: defaultUrl, appId, linkImagePath })
       break;
     case 2:
-
+      openWindow(params);
       break;
   }
 }
 
+const openWindow = (params) => {
+  openWindowList = [];
+  selectAppGuideData = {};
+
+  let windowWith = window.innerWidth - 500;
+  let guideUrl = chrome.runtime.getURL('/iframe/tool-box-guide.html');
+  chrome.windows.create({
+    width: windowWith,
+    type: 'popup',
+    url: params.defaultUrl
+  }, function (window) {
+    openWindowList.push(window);
+  })
+  chrome.windows.create({
+    width: 500,
+    type: 'popup',
+    url: guideUrl,
+    left: windowWith
+  }, function (window) {
+    openWindowList.push(window);
+  })
+
+  if(params.guideData) {
+    selectAppGuideData = JSON.parse(params.guideData);
+  }
+};
+
 const getAppList = () => {
   getAllPostEditorAppData({params: {}}).then(res => {
     if(res.code == 0) {
@@ -133,8 +175,31 @@ const getAppList = () => {
   })
 }
 
+
+const onRuntimeMsg = () => {
+  chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse('ok')
+    switch (req.actionType) {
+      case 'CONTENT_GET_GUIDE_DATA':
+        chrome.runtime.sendMessage({ 
+            actionType: "CONTENT_EDIT_SEND_GUIDE_DATA", 
+            data: {
+              guideData: selectAppGuideData,
+              windowData: openWindowList
+            }
+        },(response) => {});
+        break;
+      case 'CONTENT_GUIDE_APPLY_APP':
+        siteUrl.value = req.data.siteUrl;
+        searchHandler();
+        break;
+    }
+  })
+}
+
 onMounted(() => {
   getAppList();
+  onRuntimeMsg();
 })
 </script>
 

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

@@ -0,0 +1,172 @@
+<template>
+    <div class="guide-wrapper">
+        <div class="top">
+            <div class="title">Guide</div>
+            <div class="content">
+                <div class="img-list" 
+                    v-if="pageData.guideData.guideType == 'image'">
+                    <div class="img-item" 
+                        v-for="(item, index) in pageData.guideData.guideData"
+                        :key="index">
+                        <img class="img" :src="item" >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="title">
+                Enter Room Link
+            </div>
+            <div class="search-input-wrapper">
+                <input class="input" v-model="siteUrl" placeholder="Enter link" />
+                <div class="btn" @click="confirm">
+                    <img :src="require('@/assets/svg/icon-tool-box-guide-arrow.svg')" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { checkURL } from "@/uilts/help"
+
+let siteUrl = ref('');
+
+let pageData = reactive({
+    guideType: '',
+    guideData: []
+});
+
+const confirm = () => {
+    siteUrl.value = siteUrl.value.trim();
+
+    if(!checkURL(siteUrl.value)) {
+        return;
+    } 
+
+    chrome.runtime.sendMessage({ 
+        actionType: "CONTENT_GUIDE_APPLY_APP", 
+        data: {
+            siteUrl: siteUrl.value
+        }
+    },(response) => {});
+
+    setTimeout(() => {
+        for(let i = 0; i < pageData.windowData.length; i++) {
+            let item = pageData.windowData[i];
+            chrome.windows.remove(
+                item.id,
+                function() {}
+            )
+        };
+    }, 600)
+};
+
+const onRuntimeMsg = () => {
+    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+        sendResponse('ok')
+        switch (req.actionType) {
+            case 'CONTENT_EDIT_SEND_GUIDE_DATA':
+                let {guideData, windowData} = req.data;
+                pageData.guideData = guideData;
+                pageData.windowData = windowData;
+                break;
+        }
+    })
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        chrome.runtime.sendMessage({ 
+            actionType: "CONTENT_GET_GUIDE_DATA", 
+            data:{}
+        },(response) => {});
+    }, 600)
+
+    onRuntimeMsg();
+})
+
+</script>
+
+<style lang="scss">
+
+html, body, #app {
+    margin: 0 !important;
+    width: 100%;
+    height: 100%;
+}
+.guide-wrapper {
+    width: 100%;
+    height: 100%;
+
+    .top {
+        height: calc(100% - 158px);
+        padding: 30px 43px;
+        box-sizing: border-box;
+        overflow-y: auto;
+
+        .title {
+            font-weight: 500;
+            font-size: 30px;
+            margin-top: 10px;
+            margin-bottom: 30px;
+        }
+
+        .img-item {
+            margin-bottom: 18px;
+
+            .img {
+                width: 100%;
+            }
+        }
+    }
+
+    .bottom {
+        height: 158px;
+        background: #1D9BF0;
+        padding: 20px;
+        box-sizing: border-box;
+
+        .title {
+            font-weight: 500;
+            font-size: 20px;
+            color: #fff;
+            margin-top: 7px;
+            margin-bottom: 18px;
+        }
+
+        .search-input-wrapper {
+            width: 100%;
+            height: 49px;
+            background: #fff;
+            border-radius: 100px;
+            box-sizing: border-box;
+            display: flex;
+
+            .input {
+                border: none;
+                outline: none;
+                border-radius: 100px;
+                width: calc(100% - 49px);
+                height: 100%;
+                box-sizing: border-box;
+                color: #636363;
+                padding: 15px 20px 15px 20px;
+            }
+
+            .btn {
+                width: 49px;
+                height: 100%;
+                background: #D2EAFC;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-top-right-radius: 100px;
+                border-bottom-right-radius: 100px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="preview-wrapper">
+    <div class="editor-preview-wrapper">
         <div class="top">
             <div class="card-container">
                 <!-- 安装之后的卡片样式 -->
@@ -41,6 +41,11 @@
                         <iframe class="iframe" 
                             :src="previewData.convertUrl"
                             v-else></iframe>
+
+                        <div class="bottom-bar">
+                            <div class="site-url">DeNet.me</div>
+                            <div class="desc">Install DeNet Plugin to Participate</div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -189,7 +194,7 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.preview-wrapper {
+.editor-preview-wrapper {
     width: 100%;
     height: 100%;
 
@@ -278,8 +283,8 @@ onUnmounted(() => {
                 box-sizing: border-box;
 
                 .card-wrapper {
-                    width: 491px;
-                    height: 284px;
+                    width: 505px;
+                    height: 338px;
                     border: 1px solid #D1D9DD;
                     background: #ffffff;
                     box-sizing: border-box;
@@ -288,10 +293,10 @@ onUnmounted(() => {
                     box-sizing: border-box;
                     border-radius: 16px;
                     left: 73px;
-                    top: 100px;
+                    top: 90px;
 
                     .iframe {
-                        height: 100%;
+                        height: calc(100% - 73px);
                         width: 100%;
                         border: none;    
                         pointer-events: none;
@@ -299,13 +304,30 @@ onUnmounted(() => {
                     }
 
                     .cover {
+                        height: calc(100% - 73px);
                         width: 100%;
-                        height: 100%;
                         object-fit: contain;
                     }
+
+                    .bottom-bar {
+                        width: 100%;
+                        height: 73px;
+                        padding: 10px 10px 0 13px;
+                        border-top: 1px solid rgba(0, 0, 0, 0.3);
+                        .site-url {
+                            color: #566370;
+                            font-size: 14px;
+                            line-height: 20px;
+                        }
+                        .desc {
+                            font-weight: 500;
+                            font-size: 15px;
+                            line-height: 21px;
+                            font-weight: 500;
+                        }
+                    }
                 }
             }
-
         }
 
         .font {