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

<template>
  <div class="editor-wrapper">
    <div class="top">
      <div class="title">
        Enter Link to Embed in Tweet
      </div>
      <div class="search-wrapper">
        <input class="input" type="text" v-model="siteUrl" placeholder="Enter link">
        <div class="btn" @click="searchHandler">
          <img :src="require('@/assets/svg/icon-tool-box-search-arrow.svg')" />
        </div>
      </div>
      <div class="desc">
        <img :src="linkInputDescImage" alt="">
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <div class="cate-item history-wrapper" v-if="historyList.length">
          <div class="cate">
            <img :src="require('@/assets/svg/icon-tool-app-history.svg')" />
          </div>
          <div class="app-list">
            <div class="app" v-for="(app, idx) in historyList" :key="idx"
              @click="clickHistoryAppHandler(app)">
              <div class="img-wrapper">
                <img class="img" :class="{'small-img': !app.appId}" :src="app.iconPath" :onerror="imgOnError" />
              </div>
              <div class="name">
                {{ app.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="cate-item" v-for="(item) in appList" :key="item.cateId">
          <div class="cate">
            <img :src="item.iconPath">
          </div>
          <div class="app-list">
            <div class="app" v-for="(app, idx) in item.apps" :key="idx" @click="clickAppHandler(app)">
              <img class="app-img" :src="app.iconPath" alt="">
              <div class="name">
                {{ app.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from "vue";
import axios from 'axios';
import { message } from "ant-design-vue";
import { convertUrl, getAllPostEditorAppData } from "@/http/toolBoxApi";
import { getChromeStorage } from "@/uilts/chromeExtension"
import { checkURL } from "@/uilts/help"

const props = defineProps({
    linkInputDescImage: {
        type: String,
        default: '',
    },
});


let siteUrl = ref('');

let selectAppGuideData = {};
let openWindowList = [];

let historyList = ref([])

let appList = ref();

const emits = defineEmits(["changeShowCom"]);

const searchHandler = async () => {
  let siteTitle = '', favicon = '';
  
  if(!siteUrl.value) {
    return;
  }

  siteUrl.value = siteUrl.value.trim();

  if(!checkURL(siteUrl.value)) {
    message.info('Incorrect URL entered');
    //提示
    return;
  } 
  const loadingHide = message.loading('loading...', 0);
  let siteRes = await axios.get(siteUrl.value);

  if(siteRes) {
    if(siteRes.headers['content-type'].indexOf('text/html') < 0 || siteRes.request.status > 399) {
      // 提示
      return;
    }
    let urlObj = new URL(siteUrl.value);
    if(siteRes.data) {
      siteTitle = getTitleByHtmlStr(siteRes.data);
      if(!siteTitle) {
        siteTitle = urlObj.hostname;
      } 
      console.log(siteTitle)
    }
    favicon = urlObj.origin + '/favicon.ico';
  } 

  let currentApp = {
    appId: '',
    cateId: '',
    createType: '',
    defaultUrl: siteUrl.value,
    guideData: '',
    iconPath: favicon,
    interactType: '',
    linkImagePath: "",
    name: siteTitle,
  }

  let convertRes = await convertUrl({params: {originUrl: siteUrl.value}});
  let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: '', currentApp };

  loadingHide();

  if(convertRes && convertRes.code == 0) {
    let {convertUrl} = convertRes.data || {};
    params.convertUrl = convertUrl;
  }
  emits('changeShowCom', params)
}

const getTitleByHtmlStr = (str) => {
  let index1 = str.indexOf('<title>') + 7;
  let index2 = str.indexOf('</title>');
  return str.substring(index1, index2) || '';
};

const clickHistoryAppHandler = (params) => {
  if(params.appId) {
    clickAppHandler(params);
  } else {
    siteUrl.value = params.defaultUrl;
    searchHandler();
  }
};

const clickAppHandler = (params) => {
  let { createType, defaultUrl, appId, linkImagePath } = params;
  switch (createType) {
    case 1:
      emits('changeShowCom', { convertUrl: defaultUrl, originUrl: defaultUrl, appId, linkImagePath, currentApp: params })
      break;
    case 2:
      openWindow(params);
      break;
  }
}

const openWindow = (params) => {
  chrome.windows.getCurrent({},
    function(window) {
      if(window && window.state == "fullscreen") {
        chrome.windows.update(window.id,{
          state: 'normal'
        }, function() {
          setTimeout(() => {
            createGuideWindow(params, true);
          }, 1000)
        })
      } else {
        createGuideWindow(params);
      }
  })
};

const createGuideWindow = (params, isUpdate = false) => {
  openWindowList = [];
  selectAppGuideData = {};

  let windowWith = window.screen.width - 500;
  let guideUrl = chrome.runtime.getURL('/iframe/tool-box-guide.html');

  chrome.windows.create({
    width: windowWith,
    type: 'normal',
    url: params.defaultUrl,
    state: 'normal'
  }, function (window) {
    openWindowList.push(window);
  })
  chrome.windows.create({
    width: 500,
    type: 'popup',
    url: guideUrl,
    left: windowWith,
    state: 'normal'
  }, function (window) {
    openWindowList.push(window);
  })

  if(params.guideData) {
    selectAppGuideData = JSON.parse(params.guideData);
  }
}

const getAppList = () => {
  getAllPostEditorAppData({params: {}}).then(res => {
    if(res.code == 0) {
      appList.value = res.data || [];
    }
  })
}


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;
    }
  })
}

const getHistoryList = async () => {
  let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
  historyList.value = list;
};

const imgOnError = (e) => {
  let img = e.srcElement;
  img.src = require('@/assets/img/icon-default-app-logo.png');
  img.onerror = null;
}

onMounted(() => {
  getHistoryList();
  getAppList();
  onRuntimeMsg();
})
</script>

<style lang="scss" scoped>
.editor-wrapper {
  width: 100%;
  height: 100%;

  .top {
    padding: 25px 40px 30px 40px;
    border-bottom: 0.5px solid #D1D9DD;
    box-sizing: border-box;

    .title {
      font-weight: 500;
      font-size: 20px;
    }

    .search-wrapper {
      margin: 20px 0;
      border-radius: 8px;
      width: 100%;
      height: 49px;
      display: flex;
      align-items: center;

      .input {
        background: #F1F3F4;
        border: none;
        outline: none;
        font-weight: 400;
        font-size: 16px;
        color: #636363;
        height: 100%;
        width: calc(100% - 49px);
        padding-left: 20px;
        border-bottom-left-radius: 8px;
        border-top-left-radius: 8px;
      }

      .btn {
        width: 49px;
        height: 49px;
        background: #1D9BF0;
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }

    .desc {
      img {
        width: 315px;
        height: 14px;
        object-fit: cover;
      }
    }
  }

  .bottom {
    width: 100%;
    height: calc(100% - 185px);
    overflow-y: auto;

    .content {
      width: 100%;
      padding: 36px 30px 20px 50px;
      box-sizing: border-box;

      .history-wrapper {

        .app-list {
            .img-wrapper {
              width: 60px;
              height: 60px;
              border-radius: 10px;
              margin-bottom: 10px;
              border: 1px solid #E5E5E5;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;

              .img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }

              .small-img {
                width: 25px;
                height: 25px;
              }
            }
        }
      }

      .cate-item {
        min-height: 110px;
        display: flex;
        margin-bottom: 12px;

        .cate {
          width: 20px;
          height: 110px;
          margin-right: 26px;
          display: flex;
          align-items: center;
          margin-top: -10px;

          img {
            width: 20px;
            height: 20px;
          }
        }

        .app-list {
          display: flex;
          align-content: center;
          flex-wrap: wrap;

          .app {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 110px;
            height: 110px;
            cursor: pointer;

            .app-img {
              width: 60px;
              height: 60px;
              border-radius: 10px;
              margin-bottom: 10px;
              border: 1px solid #E5E5E5;
              box-sizing: border-box;
            }

            .name {
              font-weight: 500;
              font-size: 12px;
              color: #636363;
              width: 100%;
              height: 15px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              text-align: center;
              box-sizing: border-box;
              padding: 0 5px;
            }
          }
        }
      }
    }
  }
}
</style>