1

src/popup/App.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+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 ?? '店闪';
@@ -20,12 +24,24 @@ const selectedPlatform = computed(() =>
 );
 
 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();
@@ -48,7 +64,18 @@ async function handleScan() {
     isScanning.value = true;
 
     try {
-        await openPlatformWindow(selectedPlatform.value.baseUrl);
+        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 {
@@ -56,33 +83,68 @@ async function handleScan() {
     }
 }
 
-function openPlatformWindow(url: string): Promise<void> {
-    if (typeof chrome === 'undefined' || !chrome.windows?.create) {
-        window.open(url, '_blank', 'width=1280,height=900');
-        return Promise.resolve();
+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;
     }
 
-    return new Promise((resolve, reject) => {
-        chrome.windows.create(
-            {
-                url,
-                type: 'popup',
-                focused: true,
-                width: 1280,
-                height: 900,
-            },
-            () => {
-                const runtimeError = chrome.runtime.lastError;
+    elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
+}
 
-                if (runtimeError) {
-                    reject(new Error(runtimeError.message));
-                    return;
-                }
+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}`;
+}
 
-                resolve();
-            },
-        );
-    });
+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 {
@@ -114,6 +176,37 @@ function getRuntimeManifest(): chrome.runtime.Manifest | null {
                 </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>