zhutao/store_ai_extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
zhu
2026-04-30 11:17:16 +08:00
parent 08a6a69bd6
commit 7ca9dabaf9
6 changed files with 192 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
src/content/App.vue
View File

@@ -2,218 +2,234 @@
import { computed, onMounted, onUnmounted, ref } from 'vue';
import type { CrawlTaskState } from '@/types';
/** 当前后台保存的爬取任务快照，用于决定是否展示右下角浮窗。 */
const crawlState = ref<CrawlTaskState | null>(null);
/** 当前爬取任务已经运行的秒数，页面上会格式化为 mm:ss。 */
const elapsedSeconds = ref(0);
/** 控制右下角时间轴面板是否展开。 */
const isPanelOpen = ref(false);
/** 轮询后台爬取状态和刷新计时器的定时器 ID。 */
let timer: number | undefined;
/** 只有任务处于运行中时，才在网页右下角展示计时按钮。 */
const isVisible = computed(() => crawlState.value?.status === 'running');
/** 内容脚本挂载后立即同步一次状态，并开始每秒刷新计时和任务进度。 */
onMounted(() => {
void refreshCrawlState();
timer = window.setInterval(() => {
updateElapsedSeconds();
void refreshCrawlState();
}, 1000);
timer = window.setInterval(() => {
updateElapsedSeconds();
void refreshCrawlState();
}, 1000);
});
/** 内容脚本卸载时清理定时器，避免页面残留轮询。 */
onUnmounted(() => {
if (timer) {
window.clearInterval(timer);
}
if (timer) {
window.clearInterval(timer);
}
});
/** 从 background 获取最新爬取任务状态，并在任务结束时自动收起面板。 */
async function refreshCrawlState() {
const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });
/** background 返回的当前爬取任务状态响应。 */
const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });
if (response.ok) {
crawlState.value = response.data ?? null;
updateElapsedSeconds();
if (response.ok) {
crawlState.value = response.data ?? null;
updateElapsedSeconds();
if (!isVisible.value) {
isPanelOpen.value = false;
if (!isVisible.value) {
isPanelOpen.value = false;
}
}
}
}
/** 根据任务开始时间实时计算已经运行的秒数。 */
function updateElapsedSeconds() {
if (!crawlState.value) {
elapsedSeconds.value = 0;
return;
}
if (!crawlState.value) {
elapsedSeconds.value = 0;
return;
}
elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
}
/** 将秒数格式化为 mm:ss，展示在圆形计时按钮和面板标题里。 */
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}`;
/** 运行时长中的分钟部分。 */
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: '爬取失败',
};
/** 步骤状态到展示文案的映射表。 */
const textMap: Record<string, string> = {
pending: '等待中',
running: '爬取中',
success: '已完成',
failed: '爬取失败',
};
return textMap[status] ?? status;
return textMap[status] ?? status;
}
/** 发送消息到 background；非扩展环境下返回空成功响应，方便本地页面不报错。 */
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 });
}
if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
return Promise.resolve({ ok: true, data: null as T });
}
return chrome.runtime.sendMessage(message);
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>
<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>
<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>
<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;
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;
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);
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;
margin-bottom: 14px;
}
.dianshan-crawl-header p {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
}
.dianshan-crawl-header span {
color: #64748b;
font-size: 12px;
color: #64748b;
font-size: 12px;
}
.dianshan-crawl-timeline {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
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;
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;
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;
display: grid;
gap: 4px;
padding: 10px;
border: 1px solid #dbe3ea;
border-radius: 8px;
background: #ffffff;
}
.dianshan-crawl-step strong {
font-size: 13px;
font-size: 13px;
}
.dianshan-crawl-step em {
color: #64748b;
font-size: 12px;
font-style: normal;
color: #64748b;
font-size: 12px;
font-style: normal;
}
.dianshan-crawl-step small {
color: #b91c1c;
color: #b91c1c;
}
.is-running .dianshan-crawl-dot,
.is-success .dianshan-crawl-dot {
background: #10b981;
background: #10b981;
}
.is-running .dianshan-crawl-step,
.is-success .dianshan-crawl-step {
border-color: #10b981;
background: #ecfdf5;
border-color: #10b981;
background: #ecfdf5;
}
.is-failed .dianshan-crawl-dot {
background: #ef4444;
background: #ef4444;
}
.is-failed .dianshan-crawl-step {
border-color: #ef4444;
background: #fef2f2;
border-color: #ef4444;
background: #fef2f2;
}
</style>

24
src/content/main.ts
View File

@@ -3,22 +3,24 @@ import App from './App.vue';
/** 将内容脚本应用挂载到页面中。 */
function mountApp() {
if (document.getElementById('dianshan-crx-root')) {
return;
}
if (document.getElementById('dianshan-crx-root')) {
return;
}
const container = document.createElement('div');
container.id = 'dianshan-crx-root';
const appRoot = document.createElement('div');
/** 内容脚本在宿主页面中的根容器，用于避免污染业务页面结构。 */
const container = document.createElement('div');
container.id = 'dianshan-crx-root';
/** Vue 应用实际挂载的节点。 */
const appRoot = document.createElement('div');
container.appendChild(appRoot);
document.body.appendChild(container);
container.appendChild(appRoot);
document.body.appendChild(container);
createApp(App).mount(appRoot);
createApp(App).mount(appRoot);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mountApp, { once: true });
document.addEventListener('DOMContentLoaded', mountApp, { once: true });
} else {
mountApp();
mountApp();
}