mirror of
https://github.com/primedigitaltech/azon_seeker.git
synced 2026-02-01 04:19:32 +08:00
116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
<script setup lang="ts">
|
||
import type { Timeline } from '~/components/ProgressReport.vue';
|
||
import { useLongTask } from '~/composables/useLongTask';
|
||
import { homedepot } from '~/logic/page-worker';
|
||
import { detailItems } from '~/logic/storages/homedepot';
|
||
|
||
const inputText = ref('');
|
||
const { isRunning, startTask } = useLongTask();
|
||
|
||
const worker = homedepot.useHomedepotWorker();
|
||
worker.channel.on('detail-item-collected', ({ item }) => {
|
||
timelines.value.push({
|
||
type: 'success',
|
||
title: `成功`,
|
||
content: `成功获取到${item.OSMID}的商品信息`,
|
||
time: new Date().toLocaleString(),
|
||
});
|
||
detailItems.value.set(item.OSMID, item);
|
||
});
|
||
|
||
const timelines = ref<Timeline[]>([]);
|
||
|
||
const handleStart = () =>
|
||
startTask(async () => {
|
||
timelines.value.push({
|
||
type: 'info',
|
||
title: `开始`,
|
||
content: '任务开始',
|
||
time: new Date().toLocaleString(),
|
||
});
|
||
await worker.runDetailPageTask(
|
||
inputText.value.split('\n').filter((id) => /\d+/.exec(id)),
|
||
{
|
||
progress: (remains) => {
|
||
inputText.value = remains.join('\n');
|
||
},
|
||
},
|
||
);
|
||
timelines.value.push({
|
||
type: 'info',
|
||
title: `结束`,
|
||
content: '任务完成',
|
||
time: new Date().toLocaleString(),
|
||
});
|
||
});
|
||
|
||
const handleInterrupt = () => {
|
||
worker.stop();
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="homedepot-sidepanel">
|
||
<header-title>Homedepot</header-title>
|
||
<div class="interative-section">
|
||
<ids-input
|
||
v-model="inputText"
|
||
:disabled="isRunning"
|
||
ref="asin-input"
|
||
:match-pattern="/^\d+(\n\d+)*\n?$/g"
|
||
placeholder="输入OSMID"
|
||
validate-message="请输入格式正确的OSMID"
|
||
/>
|
||
<n-button v-if="!isRunning" round size="large" type="primary" @click="handleStart">
|
||
<template #icon>
|
||
<ant-design-thunderbolt-outlined />
|
||
</template>
|
||
开始
|
||
</n-button>
|
||
<n-button v-else round size="large" type="primary" @click="handleInterrupt">
|
||
<template #icon>
|
||
<ant-design-thunderbolt-outlined />
|
||
</template>
|
||
停止
|
||
</n-button>
|
||
</div>
|
||
<div v-if="isRunning" class="running-tip-section">
|
||
<n-alert title="Warning" type="warning"> 警告，在插件运行期间请勿与浏览器交互。 </n-alert>
|
||
</div>
|
||
<progress-report class="progress-report" :timelines="timelines" />
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.homedepot-sidepanel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100vw;
|
||
}
|
||
|
||
.interative-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 15px;
|
||
align-items: stretch;
|
||
justify-content: center;
|
||
width: 85%;
|
||
border-radius: 10px;
|
||
border: 1px #00000020 dashed;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.running-tip-section {
|
||
margin: 10px 0 0 0;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
cursor: wait;
|
||
}
|
||
|
||
.progress-report {
|
||
margin-top: 10px;
|
||
width: 95%;
|
||
}
|
||
</style>
|