feat: 部署初版测试
This commit is contained in:
zs
190
web/src/views/Radar.vue
Normal file
190
web/src/views/Radar.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
interface Monitor {
|
||||
id: string
|
||||
brand_name: string
|
||||
x_handle: string
|
||||
is_active: boolean
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1'
|
||||
const monitors = ref<Monitor[]>([])
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
const newKeyword = ref('')
|
||||
const newHandle = ref('')
|
||||
const adding = ref(false)
|
||||
|
||||
const loadMonitors = async () => {
|
||||
const token = localStorage.getItem('jwt_token')
|
||||
if (!token) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/monitors`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
if (!res.ok) throw new Error('Failed to fetch monitors')
|
||||
monitors.value = await res.json()
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const addMonitor = async () => {
|
||||
if (!newKeyword.value && !newHandle.value) return
|
||||
|
||||
const token = localStorage.getItem('jwt_token')
|
||||
adding.value = true
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/monitors`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
brand_name: newKeyword.value,
|
||||
x_handle: newHandle.value.replace('@', '')
|
||||
})
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Failed to add target')
|
||||
|
||||
newKeyword.value = ''
|
||||
newHandle.value = ''
|
||||
await loadMonitors()
|
||||
} catch (err: any) {
|
||||
alert(err.message)
|
||||
} finally {
|
||||
adding.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMonitor = async (m: Monitor) => {
|
||||
const token = localStorage.getItem('jwt_token')
|
||||
try {
|
||||
await fetch(`${API_BASE}/monitors/${m.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ is_active: !m.is_active })
|
||||
})
|
||||
m.is_active = !m.is_active
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteMonitor = async (id: string) => {
|
||||
if (!confirm('Remove this radar target?')) return
|
||||
const token = localStorage.getItem('jwt_token')
|
||||
try {
|
||||
await fetch(`${API_BASE}/monitors/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
monitors.value = monitors.value.filter(m => m.id !== id)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMonitors()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-[1400px] mx-auto space-y-8 animate-fade-in-up">
|
||||
<!-- Header & Add Form -->
|
||||
<header class="flex flex-col md:flex-row md:justify-between items-start md:items-end gap-6 pb-6 border-b border-white/5">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
|
||||
📡 X Radar Targets
|
||||
<span class="text-sm font-medium px-2.5 py-1 bg-indigo-500/20 text-indigo-400 rounded-full">{{ monitors.length }} Active</span>
|
||||
</h1>
|
||||
<p class="text-zinc-500 mt-2 text-sm max-w-lg">
|
||||
Configure Nitter scraper targets. The engine will autonomously monitor these accounts and keywords for high-potential engagement opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="addMonitor" class="flex items-center gap-3 bg-white/5 p-2 rounded-xl border border-white/10 w-full md:w-auto">
|
||||
<input
|
||||
v-model="newHandle"
|
||||
placeholder="X Handle (e.g. elonmusk)"
|
||||
class="bg-black/20 text-white text-sm rounded-lg px-3 py-2 border border-white/10 w-40 focus:outline-none focus:border-brand-primary/50 pointer-events-auto" style="pointer-events: auto;"
|
||||
/>
|
||||
<span class="text-zinc-600 text-sm font-bold">+</span>
|
||||
<input
|
||||
v-model="newKeyword"
|
||||
placeholder="Keyword Combo (Optional)"
|
||||
class="bg-black/20 text-white text-sm rounded-lg px-3 py-2 border border-white/10 w-48 focus:outline-none focus:border-brand-primary/50 pointer-events-auto" style="pointer-events: auto;"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="adding || (!newKeyword && !newHandle)"
|
||||
class="bg-brand-primary hover:bg-blue-500 disabled:opacity-50 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap"
|
||||
>
|
||||
Add Target
|
||||
</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<div v-if="loading" class="text-zinc-500 py-12 text-center">Loading radar grid...</div>
|
||||
|
||||
<!-- Active Grid -->
|
||||
<div v-else-if="monitors.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="m in monitors"
|
||||
:key="m.id"
|
||||
class="glass-panel p-5 border border-white/10 relative group transition-all"
|
||||
:class="m.is_active ? 'hover:border-indigo-500/30' : 'opacity-60 grayscale'"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500/20 to-purple-600/20 border border-indigo-500/20 flex items-center justify-center font-bold text-indigo-400">
|
||||
{{ m.x_handle ? m.x_handle.charAt(0).toUpperCase() : '#' }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-white tracking-wide text-sm truncate max-w-[120px]" :title="m.x_handle || 'Global Search'">
|
||||
{{ m.x_handle ? '@' + m.x_handle : 'Global Search' }}
|
||||
</span>
|
||||
<span class="text-xs text-zinc-500">Target</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle -->
|
||||
<button @click="toggleMonitor(m)" class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none" :class="m.is_active ? 'bg-indigo-500' : 'bg-white/10'">
|
||||
<span aria-hidden="true" class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" :class="m.is_active ? 'translate-x-4' : 'translate-x-0'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-black/20 rounded-lg p-3 border border-white/5 mb-4">
|
||||
<span class="text-xs font-semibold text-zinc-500 uppercase tracking-widest block mb-1">Intersection Keyword</span>
|
||||
<span class="text-sm text-zinc-300 font-mono">{{ m.brand_name || '— (All Posts)' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center border-t border-white/5 pt-4 mt-auto">
|
||||
<span class="text-[10px] text-zinc-500 font-mono">{{ new Date(m.created_at).toLocaleDateString() }}</span>
|
||||
<button @click="deleteMonitor(m.id)" class="text-xs text-red-400/50 hover:text-red-400 transition-colors pointer-events-auto" style="pointer-events: auto;">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-20 bg-white/5 border border-white/10 rounded-2xl border-dashed">
|
||||
<span class="text-4xl mb-4 opacity-50">🛰️</span>
|
||||
<h3 class="text-lg font-medium text-white mb-2">Radar is offline</h3>
|
||||
<p class="text-zinc-400 text-sm max-w-sm text-center">Add a competitor's X handle or an intersection keyword to initialize the autonomous scraping engine.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user