1

src/content/App.vue

@@ -1,5 +1,219 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import type { CrawlTaskState } from '@/types';
 
-<template></template>
+const crawlState = ref<CrawlTaskState | null>(null);
+const elapsedSeconds = ref(0);
+const isPanelOpen = ref(false);
+let timer: number | undefined;
 
-<style lang="scss"></style>
+const isVisible = computed(() => crawlState.value?.status === 'running');
+
+onMounted(() => {
+  void refreshCrawlState();
+  timer = window.setInterval(() => {
+    updateElapsedSeconds();
+    void refreshCrawlState();
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    window.clearInterval(timer);
+  }
+});
+
+async function refreshCrawlState() {
+  const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });
+
+  if (response.ok) {
+    crawlState.value = response.data ?? null;
+    updateElapsedSeconds();
+
+    if (!isVisible.value) {
+      isPanelOpen.value = false;
+    }
+  }
+}
+
+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 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);
+}
+</script>
+
+<template>
+  <div v-if="isVisible && crawlState" class="dianshan-crawl-widget">
+    <button class="dianshan-crawl-button" type="button" @click="isPanelOpen = !isPanelOpen">
+      {{ formatElapsed(elapsedSeconds) }}
+    </button>
+
+    <section v-if="isPanelOpen" class="dianshan-crawl-panel">
+      <header class="dianshan-crawl-header">
+        <div>
+          <p>{{ crawlState.platformName }}</p>
+          <span>已运行 {{ formatElapsed(elapsedSeconds) }}</span>
+        </div>
+      </header>
+
+      <ol class="dianshan-crawl-timeline">
+        <li v-for="(step, index) in crawlState.steps" :key="step.uniqueKey" :class="`is-${step.status}`">
+          <span class="dianshan-crawl-dot"></span>
+          <div class="dianshan-crawl-step">
+            <strong>{{ index + 1 }}. {{ step.name }}</strong>
+            <em>{{ getStepText(step.status) }}</em>
+            <small v-if="step.message">{{ step.message }}</small>
+          </div>
+        </li>
+      </ol>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.dianshan-crawl-widget {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 2147483647;
+  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+}
+
+.dianshan-crawl-button {
+  width: 64px;
+  height: 64px;
+  border: 0;
+  border-radius: 50%;
+  color: #ffffff;
+  background: #059669;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.dianshan-crawl-panel {
+  position: absolute;
+  right: 0;
+  bottom: 76px;
+  width: 300px;
+  padding: 16px;
+  border: 1px solid #dbe3ea;
+  border-radius: 8px;
+  color: #172033;
+  background: #ffffff;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
+}
+
+.dianshan-crawl-header {
+  margin-bottom: 14px;
+}
+
+.dianshan-crawl-header p {
+  margin: 0 0 4px;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.dianshan-crawl-header span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.dianshan-crawl-timeline {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dianshan-crawl-timeline li {
+  position: relative;
+  padding-left: 18px;
+  border-left: 2px solid #dbe3ea;
+}
+
+.dianshan-crawl-dot {
+  position: absolute;
+  top: 8px;
+  left: -7px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: #cbd5e1;
+}
+
+.dianshan-crawl-step {
+  display: grid;
+  gap: 4px;
+  padding: 10px;
+  border: 1px solid #dbe3ea;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.dianshan-crawl-step strong {
+  font-size: 13px;
+}
+
+.dianshan-crawl-step em {
+  color: #64748b;
+  font-size: 12px;
+  font-style: normal;
+}
+
+.dianshan-crawl-step small {
+  color: #b91c1c;
+}
+
+.is-running .dianshan-crawl-dot,
+.is-success .dianshan-crawl-dot {
+  background: #10b981;
+}
+
+.is-running .dianshan-crawl-step,
+.is-success .dianshan-crawl-step {
+  border-color: #10b981;
+  background: #ecfdf5;
+}
+
+.is-failed .dianshan-crawl-dot {
+  background: #ef4444;
+}
+
+.is-failed .dianshan-crawl-step {
+  border-color: #ef4444;
+  background: #fef2f2;
+}
+</style>

src/content/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 
-/** 将内容脚本应用挂载到页面的 Shadow DOM 中。 */
+/** 将内容脚本应用挂载到页面中。 */
 function mountApp() {
   if (document.getElementById('dianshan-crx-root')) {
     return;
@@ -9,11 +9,10 @@ function mountApp() {
 
   const container = document.createElement('div');
   container.id = 'dianshan-crx-root';
-
-  const shadowRoot = container.attachShadow({ mode: 'open' });
   const appRoot = document.createElement('div');
-  shadowRoot.appendChild(appRoot);
-  document.documentElement.appendChild(container);
+
+  container.appendChild(appRoot);
+  document.body.appendChild(container);
 
   createApp(App).mount(appRoot);
 }