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-05-09 17:16:08 +08:00
parent 6587b0c1d9
commit 30f9467cc8
14 changed files with 256 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/popup/App.vue
View File

@@ -1,118 +1,44 @@
<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';
import {useLogin} from "./hook/use-login";
import {platformConfigs} from "@/config/platforms";
import {useScan} from "./hook/use-scan";
import {computed} from "vue";
import {formatSeconds} from "@/shared/time_format";
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 {isLoggedIn, handleLogin, handleLogout} = useLogin()
const selectedPlatform = computed(() =>
PLATFORM_CONFIGS.find((platform) => platform.id === selectedPlatformId.value) ?? null,
/**
* 爬取逻辑的数据
*/
const {
selectedPlatformId,
isScanning,
crawlState,
handleScan,
elapsedSeconds
} = useScan()
/**
* 显示进度条
*/
const shouldShowCrawlProgress = computed<boolean>(() =>
crawlState.value != null
);
const isLoggedIn = computed(() => token.value !== null);
const shouldShowCrawlProgress = computed(() =>
crawlState.value ? ['running', 'paused', 'completed', 'failed'].includes(crawlState.value.status) : false,
);
/**
* 取消爬取
*/
const handleCancelCrawl = () => {
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 handleResumeCrawl() {
const response = await sendBackgroundMessage<CrawlTaskState>({ action: 'RESUME_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';
@@ -140,13 +66,6 @@ function getStepText(status: string): string {
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>
@@ -157,14 +76,11 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
<p class="text-sm leading-5 text-slate-600">自动打开商家后台，按平台配置顺序采集页面数据</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">
<template v-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">
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>
@@ -175,33 +91,35 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
<div>
<p class="text-sm font-medium text-slate-800">{{ crawlState.platformName }}</p>
<p class="text-xs text-slate-500">
{{ crawlState.status === 'paused' ? '已暂停' : '已运行 ' + formatElapsed(elapsedSeconds) }}
{{
crawlState.status === 'paused' ? '已暂停' : '已运行 ' + formatSeconds(elapsedSeconds)
}}
</p>
</div>
<div class="flex items-center gap-2">
<button v-if="crawlState.status === 'paused'" type="button"
class="text-xs text-emerald-600 transition hover:text-emerald-700"
@click="handleResumeCrawl">
继续
</button>
<!-- <button v-if="crawlState.status === 'paused'" type="button"-->
<!-- class="text-xs text-emerald-600 transition hover:text-emerald-700"-->
<!-- @click="handleResumeCrawl">-->
<!-- 继续-->
<!-- </button>-->
<button type="button" class="text-xs text-red-600 transition hover:text-red-700"
@click="handleCancelCrawl">
@click="handleCancelCrawl">
取消
</button>
</div>
</div>
<div v-if="crawlState.status === 'paused' && crawlState.pause"
class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
{{ crawlState.pause.message }}
</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>
<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>
@@ -209,7 +127,9 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
</div>
<p v-if="step.message" class="mt-1 text-xs">{{ step.message }}</p>
<pre v-if="step.result !== undefined"
class="mt-2 max-h-32 overflow-auto rounded bg-slate-950 p-2 text-[11px] leading-4 text-slate-100">{{ JSON.stringify(step.result, null, 2) }}</pre>
class="mt-2 max-h-32 overflow-auto rounded bg-slate-950 p-2 text-[11px] leading-4 text-slate-100">{{
JSON.stringify(step.result, null, 2)
}}</pre>
</div>
</li>
</ol>
@@ -220,28 +140,27 @@ function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data
<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">
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 platformConfigs"
: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">
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">
@click="handleLogout">
退出
</button>
<span v-else></span>

35
src/popup/hook/use-login.ts Normal file
View File

@@ -0,0 +1,35 @@
import {computed, onMounted, ref} from "vue";
import {getToken, logout, setToken} from "@/shared/auth";
export const useLogin = () => {
const token = ref<string | null>(null);
const isLoggedIn = computed(() => token.value !== null);
/**
* 登录
*/
const handleLogin = async () => {
let value = "xxx"
await setToken(value)
token.value = value
}
/**
* 退出登录
*/
const handleLogout = async () => {
await logout()
token.value = null
}
onMounted(async () => {
token.value = await getToken()
})
return {
isLoggedIn,
handleLogin,
handleLogout,
}
}

85
src/popup/hook/use-scan.ts Normal file
View File

@@ -0,0 +1,85 @@
import {onMounted, onUnmounted, ref} from "vue";
import {platformConfigs} from "@/config/platforms";
import {CrawlTaskState} from "@/types";
import {sendBackgroundMessage} from "@/shared/message";
export const useScan = () => {
//选中id
const selectedPlatformId = ref(platformConfigs[0]?.id ?? '');
//防抖
const isScanning = ref<boolean>(false)
//步骤数据
const crawlState = ref<CrawlTaskState | null>(null);
//爬取时间
const elapsedSeconds = ref<number>(0)
let timer: number | undefined;
/**
* 开始爬取
*/
const handleScan = async () => {
if (isScanning.value) return
isScanning.value = true
try {
updateSeconds()
//定时器
timer = window.setInterval(() => {
updateSeconds();
}, 1000);
//发送
const response = await sendBackgroundMessage<CrawlTaskState>({
action: 'START_CRAWL',
payload: {platformId: selectedPlatformId.value},
});
if (response.data) {
crawlState.value = response.data;
}
} finally {
isScanning.value = false;
}
}
/**
* 更新时间
*/
function updateSeconds() {
if (!crawlState.value) {
elapsedSeconds.value = 0;
return;
}
elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
}
/**
* 同步爬取状态
*/
async function refreshCrawlState() {
const response = await sendBackgroundMessage<CrawlTaskState | null>({action: 'GET_CRAWL_STATE'});
if (response.data) {
crawlState.value = response.data ?? null;
updateSeconds();
}
}
onMounted(async () => {
await refreshCrawlState()
})
onUnmounted(() => {
if (timer) {
window.clearInterval(timer);
}
})
return {
selectedPlatformId,
isScanning,
crawlState,
handleScan,
elapsedSeconds,
}
}