|
@@ -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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|