1

src/popup/App.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { PLATFORM_CONFIGS } from '@/config/platforms';
+import { getToken, logout, mockLogin } from '@/shared/auth';
+
+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 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);
+
+onMounted(async () => {
+    token.value = await getToken();
+    isLoading.value = false;
+});
+
+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 {
+        await openPlatformWindow(selectedPlatform.value.baseUrl);
+    } catch (error: unknown) {
+        errorMessage.value = error instanceof Error ? error.message : '打开平台窗口失败';
+    } finally {
+        isScanning.value = false;
+    }
+}
+
+function openPlatformWindow(url: string): Promise<void> {
+    if (typeof chrome === 'undefined' || !chrome.windows?.create) {
+        window.open(url, '_blank', 'width=1280,height=900');
+        return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+        chrome.windows.create(
+            {
+                url,
+                type: 'popup',
+                focused: true,
+                width: 1280,
+                height: 900,
+            },
+            () => {
+                const runtimeError = chrome.runtime.lastError;
+
+                if (runtimeError) {
+                    reject(new Error(runtimeError.message));
+                    return;
+                }
+
+                resolve();
+            },
+        );
+    });
+}
+
+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>
+                <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>