248 lines
8.9 KiB
Vue
248 lines
8.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
import { PLATFORM_CONFIGS } from '@/config/platforms';
|
|
import { getToken, logout, mockLogin } from '@/shared/auth';
|
|
import type { CrawlTaskState } from '@/types';
|
|
|
|
const token = ref<string | null>(null);
|
|
const selectedPlatformId = ref(PLATFORM_CONFIGS[0]?.id ?? '');
|
|
const isLoading = ref(true);
|
|
const isScanning = ref(false);
|
|
const errorMessage = ref('');
|
|
const crawlState = ref<CrawlTaskState | null>(null);
|
|
const elapsedSeconds = ref(0);
|
|
let timer: number | undefined;
|
|
|
|
const manifest = getRuntimeManifest();
|
|
const extensionName = manifest?.name ?? '店闪';
|
|
const extensionVersion = manifest?.version ?? '0.0.0';
|
|
const extensionDescription =
|
|
manifest?.description || '自动打开商家后台，按平台配置顺序采集页面数据。';
|
|
|
|
const selectedPlatform = computed(() =>
|
|
PLATFORM_CONFIGS.find((platform) => platform.id === selectedPlatformId.value) ?? null,
|
|
);
|
|
|
|
const isLoggedIn = computed(() => token.value !== null);
|
|
const isCrawling = computed(() => crawlState.value?.status === 'running');
|
|
|
|
onMounted(async () => {
|
|
token.value = await getToken();
|
|
await refreshCrawlState();
|
|
timer = window.setInterval(() => {
|
|
updateElapsedSeconds();
|
|
void refreshCrawlState();
|
|
}, 1000);
|
|
isLoading.value = false;
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
window.clearInterval(timer);
|
|
}
|
|
});
|
|
|
|
async function handleLogin() {
|
|
errorMessage.value = '';
|
|
token.value = await mockLogin();
|
|
}
|
|
|
|
async function handleLogout() {
|
|
errorMessage.value = '';
|
|
await logout();
|
|
token.value = null;
|
|
}
|
|
|
|
async function handleScan() {
|
|
errorMessage.value = '';
|
|
|
|
if (!selectedPlatform.value) {
|
|
errorMessage.value = '请选择要爬取的平台';
|
|
return;
|
|
}
|
|
|
|
isScanning.value = true;
|
|
|
|
try {
|
|
const response = await sendBackgroundMessage<CrawlTaskState>({
|
|
action: 'START_CRAWL',
|
|
payload: { platformId: selectedPlatform.value.id },
|
|
});
|
|
|
|
if (!response.ok) {
|
|
errorMessage.value = response.error ?? '打开平台窗口失败';
|
|
return;
|
|
}
|
|
|
|
crawlState.value = response.data ?? null;
|
|
updateElapsedSeconds();
|
|
} catch (error: unknown) {
|
|
errorMessage.value = error instanceof Error ? error.message : '打开平台窗口失败';
|
|
} finally {
|
|
isScanning.value = false;
|
|
}
|
|
}
|
|
|
|
async function handleCancelCrawl() {
|
|
const response = await sendBackgroundMessage<CrawlTaskState>({ action: 'CANCEL_CRAWL' });
|
|
crawlState.value = response.data ?? null;
|
|
}
|
|
|
|
async function refreshCrawlState() {
|
|
const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });
|
|
|
|
if (response.ok) {
|
|
crawlState.value = response.data ?? null;
|
|
updateElapsedSeconds();
|
|
}
|
|
}
|
|
|
|
function updateElapsedSeconds() {
|
|
if (!crawlState.value) {
|
|
elapsedSeconds.value = 0;
|
|
return;
|
|
}
|
|
|
|
elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
|
|
}
|
|
|
|
function formatElapsed(totalSeconds: number): string {
|
|
const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
|
|
const seconds = (totalSeconds % 60).toString().padStart(2, '0');
|
|
return `${minutes}:${seconds}`;
|
|
}
|
|
|
|
function getStepClass(status: string): string {
|
|
if (status === 'running') {
|
|
return 'border-emerald-500 bg-emerald-50 text-emerald-700';
|
|
}
|
|
|
|
if (status === 'success') {
|
|
return 'border-green-500 bg-green-50 text-green-700';
|
|
}
|
|
|
|
if (status === 'failed') {
|
|
return 'border-red-500 bg-red-50 text-red-700';
|
|
}
|
|
|
|
return 'border-slate-300 bg-white text-slate-500';
|
|
}
|
|
|
|
function getStepText(status: string): string {
|
|
const textMap: Record<string, string> = {
|
|
pending: '等待中',
|
|
running: '爬取中',
|
|
success: '已完成',
|
|
failed: '爬取失败',
|
|
};
|
|
|
|
return textMap[status] ?? status;
|
|
}
|
|
|
|
function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data?: T; error?: string }> {
|
|
if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
|
|
return Promise.resolve({ ok: true, data: null as T });
|
|
}
|
|
|
|
return chrome.runtime.sendMessage(message);
|
|
}
|
|
|
|
function getRuntimeManifest(): chrome.runtime.Manifest | null {
|
|
if (typeof chrome === 'undefined' || !chrome.runtime?.getManifest) {
|
|
return null;
|
|
}
|
|
|
|
return chrome.runtime.getManifest();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="w-80 bg-slate-50 text-slate-900">
|
|
<section class="flex min-h-64 flex-col gap-5 p-5">
|
|
<header class="space-y-2">
|
|
<p class="text-lg font-semibold leading-6">{{ extensionName }}</p>
|
|
<p class="text-sm leading-5 text-slate-600">{{ extensionDescription }}</p>
|
|
</header>
|
|
|
|
<div v-if="isLoading" class="rounded-md border border-slate-200 bg-white px-3 py-4 text-sm text-slate-500">
|
|
正在读取登录状态...
|
|
</div>
|
|
|
|
<template v-else-if="!isLoggedIn">
|
|
<button type="button"
|
|
class="rounded-md bg-slate-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-slate-700"
|
|
@click="handleLogin">
|
|
请登录
|
|
</button>
|
|
</template>
|
|
|
|
<template v-else-if="isCrawling && crawlState">
|
|
<section class="space-y-4">
|
|
<div class="flex items-center justify-between rounded-md bg-white px-3 py-2 shadow-sm">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-800">{{ crawlState.platformName }}</p>
|
|
<p class="text-xs text-slate-500">已运行 {{ formatElapsed(elapsedSeconds) }}</p>
|
|
</div>
|
|
<button type="button" class="text-xs text-red-600 transition hover:text-red-700"
|
|
@click="handleCancelCrawl">
|
|
取消
|
|
</button>
|
|
</div>
|
|
|
|
<ol class="space-y-3">
|
|
<li v-for="(step, index) in crawlState.steps" :key="step.uniqueKey"
|
|
class="relative border-l-2 border-slate-200 pl-4">
|
|
<span
|
|
class="absolute -left-[7px] top-1 h-3 w-3 rounded-full border-2 border-white bg-slate-300"
|
|
:class="{ 'bg-emerald-500': step.status === 'running' || step.status === 'success', 'bg-red-500': step.status === 'failed' }"></span>
|
|
<div class="rounded-md border px-3 py-2 text-sm" :class="getStepClass(step.status)">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="font-medium">{{ index + 1 }}. {{ step.name }}</span>
|
|
<span class="text-xs">{{ getStepText(step.status) }}</span>
|
|
</div>
|
|
<p v-if="step.message" class="mt-1 text-xs">{{ step.message }}</p>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<label class="space-y-2">
|
|
<span class="text-sm font-medium text-slate-700">平台选择</span>
|
|
<select v-model="selectedPlatformId"
|
|
class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-slate-800 focus:ring-2 focus:ring-slate-200">
|
|
<option v-for="platform in PLATFORM_CONFIGS" :key="platform.id" :value="platform.id">
|
|
{{ platform.name }}
|
|
</option>
|
|
</select>
|
|
</label>
|
|
|
|
<button type="button"
|
|
class="rounded-md bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-300"
|
|
:disabled="isScanning" @click="handleScan">
|
|
{{ isScanning ? '正在打开...' : '立即爬取' }}
|
|
</button>
|
|
</template>
|
|
|
|
<p v-if="errorMessage" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{{ errorMessage }}
|
|
</p>
|
|
|
|
<footer
|
|
class="mt-auto flex items-center justify-between border-t border-slate-200 pt-4 text-xs text-slate-500">
|
|
<button v-if="isLoggedIn" type="button" class="text-slate-600 transition hover:text-slate-900"
|
|
@click="handleLogout">
|
|
退出
|
|
</button>
|
|
<span v-else></span>
|
|
<span>v{{ extensionVersion }}</span>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style>
|
|
@import "tailwindcss";
|
|
</style>
|