Browse Source

[add] history list

wenliming 2 years ago
parent
commit
84a3a136a2

+ 4 - 0
src/logic/content/twitter.js

@@ -233,6 +233,10 @@ function _publishTweetEvent(params, cb) {
 }
 
 function onClosePublishDialogHandle(dom, params) {
+    // 如果是 Tool box
+    if(params.postType == 3) {
+        return;
+    }
     dom.querySelector('div[role="group"]').addEventListener('click', function () {
         setTimeout(() => {
             let parent = document.querySelector('div[data-testid="confirmationSheetDialog"]');

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

@@ -16,14 +16,17 @@
     </div>
     <div class="bottom">
       <div class="content">
-        <div class="cate-item history-wrapper" v-for="(item) in historyList" :key="item.cateId">
+        <div class="cate-item history-wrapper" v-if="historyList.length">
           <div class="cate">
-            <img :src="item.iconPath">
+            <img :src="require('@/assets/svg/icon-tool-app-history.svg')" />
           </div>
           <div class="app-list">
-            <div class="app" v-for="(app, idx) in item.apps" :key="idx">
+            <div class="app" v-for="(app, idx) in historyList" :key="idx"
+              @click="clickHistoryAppHandler(app)">
               <img :src="app.iconPath" alt="">
-              {{ app.name }}
+              <div class="name">
+                {{ app.name }}
+              </div>
             </div>
           </div>
         </div>
@@ -34,7 +37,9 @@
           <div class="app-list">
             <div class="app" v-for="(app, idx) in item.apps" :key="idx" @click="clickAppHandler(app)">
               <img :src="app.iconPath" alt="">
-              {{ app.name }}
+              <div class="name">
+                {{ app.name }}
+              </div>
             </div>
           </div>
         </div>
@@ -44,10 +49,11 @@
 </template>
 
 <script setup>
-import { ref, reactive, defineProps, defineEmits, onMounted } from "vue";
+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({
@@ -63,35 +69,20 @@ let siteUrl = ref('');
 let selectAppGuideData = {};
 let openWindowList = [];
 
-let historyList = reactive([
-  // {
-  //   "apps": [
-  //     {
-  //       "appId": '',
-  //       "cateId": 0,
-  //       "createType": 0,
-  //       "defaultUrl": "string",
-  //       "guideData": "string",
-  //       "iconPath": "https://www.baidu.com/favicon.ico",
-  //       "interactType": 0,
-  //       "linkImagePath": "string",
-  //       "name": "history 1"
-  //     }
-  //   ],
-  //   "cateId": 0,
-  //   "iconPath": "https://www.baidu.com/favicon.ico",
-  //   "name": "history"
-  // },
-])
+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();
-  let siteTitle = '';
-  let favicon = '';
 
   if(!checkURL(siteUrl.value)) {
     //提示
@@ -114,10 +105,20 @@ const searchHandler = async () => {
     favicon = new URL(siteUrl.value).origin + '/favicon.ico';
   } 
 
-  console.log(siteTitle, favicon, 'site')
+  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: '' };
+  let params = { convertUrl: siteUrl.value, originUrl: siteUrl.value, appId: '', currentApp };
 
   loadingHide();
 
@@ -128,11 +129,20 @@ const searchHandler = async () => {
   emits('changeShowCom', params)
 }
 
+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 })
+      emits('changeShowCom', { convertUrl: defaultUrl, originUrl: defaultUrl, appId, linkImagePath, currentApp: params })
       break;
     case 2:
       openWindow(params);
@@ -197,7 +207,13 @@ const onRuntimeMsg = () => {
   })
 }
 
+const getHistoryList = async () => {
+  let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
+  historyList.value = list;
+};
+
 onMounted(() => {
+  getHistoryList();
   getAppList();
   onRuntimeMsg();
 })
@@ -272,14 +288,14 @@ onMounted(() => {
       padding: 36px 30px 20px 50px;
       box-sizing: border-box;
 
-      .history-wrapper {
-        height: 110px !important;
-        overflow: hidden;
+      // .history-wrapper {
+      //   height: 110px !important;
+      //   overflow: hidden;
 
-        .app-list {
-          flex-wrap: nowrap !important;
-        }
-      }
+      //   .app-list {
+      //     flex-wrap: nowrap !important;
+      //   }
+      // }
 
       .cate-item {
         min-height: 110px;
@@ -310,11 +326,8 @@ onMounted(() => {
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            width: 100px;
+            width: 110px;
             height: 110px;
-            font-weight: 500;
-            font-size: 12px;
-            color: #636363;
             cursor: pointer;
 
             img {
@@ -323,6 +336,20 @@ onMounted(() => {
               border-radius: 10px;
               margin-bottom: 10px;
             }
+
+            .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;
+            }
           }
         }
       }

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

@@ -62,7 +62,7 @@ import { ref, defineEmits, reactive, defineProps, onMounted, nextTick, onUnmount
 import { postPublish } from "@/http/publishApi";
 import installCard from '@/view/content/tool_box/index.vue'
 
-import { getChromeStorage } from "@/uilts/chromeExtension"
+import { getChromeStorage, setChromeStorage } from "@/uilts/chromeExtension"
 import { getUser } from "@/http/publishApi"
 
 let installStatus = ref(false);
@@ -142,7 +142,10 @@ const publishHandler = () => {
     if(submitIng.value) {
         return;
     }
-    let {convertUrl, originUrl, appId} = props.previewData;
+    let {convertUrl, originUrl, appId, currentApp} = props.previewData;
+
+    setHistoryData(currentApp);
+
     let postBizData = {
         convertUrl,
         originUrl,
@@ -157,6 +160,7 @@ const publishHandler = () => {
     };
 
     submitIng.value = true;
+    
     postPublish(data).then((res) => {
         submitIng.value = false;
         if (res.code == 0) {
@@ -170,6 +174,24 @@ const publishHandler = () => {
     });
 }
 
+const setHistoryData = async (params) => {
+    const maxLength = 9;
+    let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
+    if(list.length) {
+        list.unshift(params);
+        if(list.length > maxLength) {
+            list.length = maxLength;
+        }
+        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
+            list: list
+        })}) 
+    } else {
+        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
+            list: [params]
+        })})    
+    }
+};
+
 onMounted(() => {
     calcPreviewCanvasParams();
     getUserInfo((res) => {

+ 2 - 0
src/view/iframe/publish/tool-box/index.vue

@@ -42,6 +42,7 @@ let previewData = reactive({
     convertUrl: '',
     originUrl: '',
     appId: '',
+    currentApp: {}
 })
 
 const changeShowCom = (params) => {
@@ -50,6 +51,7 @@ const changeShowCom = (params) => {
     previewData.originUrl = params.originUrl;
     previewData.appId = params.appId
     previewData.linkImagePath = params.linkImagePath || '';
+    previewData.currentApp = params.currentApp || {};
 
     emits("onPageChange", {page: showCom.value});
 }