mirror of
https://github.com/stardrophere/InsightRadar.git
synced 2026-06-06 00:52:50 +08:00
1853 lines
49 KiB
Vue
1853 lines
49 KiB
Vue
<!-- 主仪表盘：事件流、为你推荐、公关修改追踪、系统状态 -->
|
||
<script setup lang="ts">
|
||
import { onMounted, ref, computed, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import VueApexCharts from 'vue3-apexcharts'
|
||
|
||
import { fetchUnifiedEvents, fetchHeadlineRevisions, fetchSystemStats, fetchEventById } from '@/api/events'
|
||
import { fetchRecommendedEvents, fetchPreferences } from '@/api/preferences'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import type { UnifiedEvent, HeadlineRevision, SystemStats } from '@/types/event'
|
||
import type { MatchedEvent, UserTopicPreference } from '@/types/preference'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
// ==========================================
|
||
// 聚光灯：从推荐页跳转过来时，按 ID 单独拉取目标事件
|
||
// ==========================================
|
||
const spotlightEvent = ref<UnifiedEvent | null>(null)
|
||
const loadingSpotlight = ref(false)
|
||
|
||
async function loadSpotlightEvent(eventId: number) {
|
||
if (!eventId) return
|
||
loadingSpotlight.value = true
|
||
spotlightEvent.value = null
|
||
try {
|
||
spotlightEvent.value = await fetchEventById(eventId)
|
||
} catch {
|
||
// 找不到时静默忽略
|
||
} finally {
|
||
loadingSpotlight.value = false
|
||
}
|
||
}
|
||
|
||
function dismissSpotlight() {
|
||
spotlightEvent.value = null
|
||
// 清除 URL 中的 event 参数，保持地址栏整洁
|
||
router.replace({ query: {} })
|
||
}
|
||
|
||
const authStore = useAuthStore()
|
||
const userId = computed(() => authStore.user?.id ?? 0)
|
||
|
||
// ==========================================
|
||
// 状态
|
||
// ==========================================
|
||
const events = ref<UnifiedEvent[]>([])
|
||
const revisions = ref<HeadlineRevision[]>([])
|
||
const stats = ref<SystemStats | null>(null)
|
||
const loading = ref(true)
|
||
const loadingMore = ref(false)
|
||
const error = ref('')
|
||
|
||
// 推荐匹配状态
|
||
const recommendedEvents = ref<MatchedEvent[]>([])
|
||
const userKeywords = ref<UserTopicPreference[]>([])
|
||
const loadingRecommend = ref(false)
|
||
|
||
// 分页状态
|
||
const PAGE_SIZE = 10
|
||
const totalEvents = ref(0)
|
||
const hasMore = ref(false)
|
||
|
||
// 用户可调节的热度阈值
|
||
const THRESHOLD_STORAGE_KEY = 'ir-hot-threshold'
|
||
const savedThreshold = localStorage.getItem(THRESHOLD_STORAGE_KEY)
|
||
const minHot = ref(savedThreshold !== null ? Number(savedThreshold) : 3)
|
||
|
||
// 增加时间筛选和排序
|
||
const hoursRange = ref(48)
|
||
const sortBy = ref('created_at')
|
||
const recSortBy = ref('match_score')
|
||
|
||
// 当前鼠标悬停的平台行标识
|
||
// 使用 "eventId-platformIndex" 作为唯一键，而非 sourceId，
|
||
// 因为同一个平台在同一大事件下可能有多条不同的热搜条目
|
||
const hoveredPlatformKey = ref<string | null>(null)
|
||
|
||
// 预设的热度阈值选项
|
||
const thresholdOptions = [
|
||
{ label: '全部', value: 0 },
|
||
{ label: '≥ 3', value: 3 },
|
||
{ label: '≥ 5', value: 5 },
|
||
{ label: '≥ 10', value: 10 },
|
||
]
|
||
|
||
const hoursOptions = [
|
||
{ label: '24小时', value: 24 },
|
||
{ label: '48小时', value: 48 },
|
||
{ label: '7天', value: 168 },
|
||
]
|
||
|
||
const sortOptions = [
|
||
{ label: '时间排序', value: 'created_at' },
|
||
{ label: '热度排序', value: 'hot_score' },
|
||
|
||
]
|
||
|
||
const recSortOptions = [
|
||
{ label: '匹配度', value: 'match_score' },
|
||
{ label: '最新', value: 'created_at' },
|
||
]
|
||
|
||
// ==========================================
|
||
// 平台视觉映射
|
||
// ==========================================
|
||
const platformIconMap: Record<string, string> = {
|
||
微博热搜: 'fa-brands fa-weibo',
|
||
微博: 'fa-brands fa-weibo',
|
||
知乎热榜: 'fa-brands fa-zhihu',
|
||
知乎: 'fa-brands fa-zhihu',
|
||
百度热搜: 'fa-solid fa-b',
|
||
今日头条: 'fa-solid fa-newspaper',
|
||
抖音热榜: 'fa-brands fa-tiktok',
|
||
抖音: 'fa-brands fa-tiktok',
|
||
'B站热搜': 'fa-brands fa-bilibili',
|
||
'bilibili 热搜': 'fa-brands fa-bilibili',
|
||
华尔街见闻: 'fa-solid fa-chart-line',
|
||
澎湃新闻: 'fa-solid fa-water',
|
||
财联社热门: 'fa-solid fa-coins',
|
||
凤凰网: 'fa-solid fa-feather',
|
||
贴吧: 'fa-solid fa-comments',
|
||
}
|
||
|
||
const platformColorMap: Record<string, string> = {
|
||
微博热搜: '#e6162d',
|
||
微博: '#e6162d',
|
||
知乎热榜: '#0066ff',
|
||
知乎: '#0066ff',
|
||
百度热搜: '#306cff',
|
||
今日头条: '#ff0000',
|
||
抖音热榜: '#000000',
|
||
抖音: '#000000',
|
||
'B站热搜': '#fb7299',
|
||
'bilibili 热搜': '#fb7299',
|
||
华尔街见闻: '#d4a853',
|
||
澎湃新闻: '#1e6cff',
|
||
财联社热门: '#c41230',
|
||
凤凰网: '#f8b500',
|
||
贴吧: '#4e6ef2',
|
||
}
|
||
|
||
function getPlatformIcon(name: string): string {
|
||
return platformIconMap[name] || 'fa-solid fa-globe'
|
||
}
|
||
|
||
function getPlatformColor(name: string): string {
|
||
return platformColorMap[name] || 'var(--text-secondary)'
|
||
}
|
||
|
||
function getHotLevel(score: number): { label: string; color: string; bg: string } {
|
||
if (score >= 10) return { label: '全网沸腾', color: '#ef4444', bg: 'rgba(239,68,68,0.15)' }
|
||
if (score >= 5) return { label: '高度关注', color: '#f97316', bg: 'rgba(249,115,22,0.15)' }
|
||
if (score >= 3) return { label: '上升中', color: '#3b82f6', bg: 'rgba(59,130,246,0.15)' }
|
||
return { label: '一般关注', color: '#6b7280', bg: 'rgba(107,114,128,0.15)' }
|
||
}
|
||
|
||
function formatRelativeTime(dateStr: string): string {
|
||
if (!dateStr.endsWith('Z') && !dateStr.includes('+')) {
|
||
dateStr += 'Z' // 补偿 SQLite 丢失的 UTC 时区标识
|
||
}
|
||
const now = Date.now()
|
||
const target = new Date(dateStr).getTime()
|
||
const diff = now - target
|
||
const minutes = Math.floor(diff / 60000)
|
||
if (minutes < 1) return '刚刚'
|
||
if (minutes < 60) return `${minutes} 分钟前`
|
||
const hours = Math.floor(minutes / 60)
|
||
if (hours < 24) return `${hours} 小时前`
|
||
const days = Math.floor(hours / 24)
|
||
return `${days} 天前`
|
||
}
|
||
|
||
// ==========================================
|
||
// 排名图表配置
|
||
// ==========================================
|
||
function getRankingChartOptions(history: number[], platformColor: string) {
|
||
return {
|
||
series: [{ name: '排名', data: history }],
|
||
chart: {
|
||
type: 'area' as const,
|
||
height: 56,
|
||
sparkline: { enabled: true },
|
||
animations: { enabled: true, easing: 'easeinout' as const, speed: 400 },
|
||
events: {
|
||
mounted: (chartContext: any) => {
|
||
chartContext.el?.querySelector('.apexcharts-svg > title')?.remove()
|
||
},
|
||
updated: (chartContext: any) => {
|
||
chartContext.el?.querySelector('.apexcharts-svg > title')?.remove()
|
||
}
|
||
}
|
||
},
|
||
stroke: { curve: 'smooth' as const, width: 2 },
|
||
fill: {
|
||
type: 'gradient',
|
||
gradient: {
|
||
shadeIntensity: 1,
|
||
opacityFrom: 0.4,
|
||
opacityTo: 0.05,
|
||
stops: [0, 90, 100],
|
||
colorStops: [
|
||
{ offset: 0, color: platformColor, opacity: 0.3 },
|
||
{ offset: 100, color: platformColor, opacity: 0 },
|
||
],
|
||
},
|
||
},
|
||
yaxis: { reversed: true },
|
||
colors: [platformColor],
|
||
tooltip: {
|
||
theme: 'dark',
|
||
fixed: { enabled: false },
|
||
x: { show: false },
|
||
y: { title: { formatter: () => '第' }, formatter: (val: number) => `${val} 名` },
|
||
},
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 根据排名历史计算趋势方向。
|
||
* 排名上升（红色），数值上升 = 排名下滑（绿色）。
|
||
*/
|
||
function getRankingTrend(p: { current_ranking: number | null; ranking_history: number[] }) {
|
||
const rank = p.current_ranking
|
||
if (!rank) return { icon: 'fa-solid fa-minus', color: 'var(--text-secondary)', text: '' }
|
||
|
||
const h = p.ranking_history
|
||
if (h.length < 2) return { icon: 'fa-solid fa-minus', color: '#f97316', text: `TOP ${rank}` }
|
||
|
||
const prev = h[h.length - 2]
|
||
const curr = h[h.length - 1]
|
||
if (prev === undefined || curr === undefined) return { icon: 'fa-solid fa-minus', color: '#f97316', text: `TOP ${rank}` }
|
||
const diff = prev - curr
|
||
|
||
if (diff > 0) {
|
||
return { icon: 'fa-solid fa-arrow-trend-up', color: '#ef4444', text: `TOP ${rank} ↑${diff}` }
|
||
}
|
||
if (diff < 0) {
|
||
return { icon: 'fa-solid fa-arrow-trend-down', color: '#10b981', text: `TOP ${rank} ↓${Math.abs(diff)}` }
|
||
}
|
||
return { icon: 'fa-solid fa-equals', color: '#f97316', text: `TOP ${rank}` }
|
||
}
|
||
|
||
/**
|
||
* 生成平台行的唯一键。
|
||
* 用数组索引代替 source_id，因为同一平台在同一大事件下可能挂载多条热搜。
|
||
*/
|
||
function platformKey(eventId: number, index: number, prefix: string = ''): string {
|
||
return prefix ? `${prefix}-${eventId}-${index}` : `${eventId}-${index}`
|
||
}
|
||
|
||
// ==========================================
|
||
// 数据加载
|
||
// ==========================================
|
||
async function loadEvents(append = false) {
|
||
if (!append) {
|
||
loading.value = true
|
||
events.value = []
|
||
} else {
|
||
loadingMore.value = true
|
||
}
|
||
error.value = ''
|
||
|
||
try {
|
||
const skip = append ? events.value.length : 0
|
||
const result = await fetchUnifiedEvents({
|
||
min_hot: minHot.value,
|
||
hours: hoursRange.value,
|
||
sort_by: sortBy.value,
|
||
skip,
|
||
limit: PAGE_SIZE,
|
||
})
|
||
if (append) {
|
||
events.value.push(...result.data)
|
||
} else {
|
||
events.value = result.data
|
||
}
|
||
totalEvents.value = result.total
|
||
hasMore.value = result.has_more
|
||
} catch (e) {
|
||
error.value = e instanceof Error ? e.message : '加载失败'
|
||
} finally {
|
||
loading.value = false
|
||
loadingMore.value = false
|
||
}
|
||
}
|
||
|
||
/** 加载推荐匹配数据 */
|
||
async function loadRecommendations() {
|
||
if (!authStore.isAuthenticated || !userId.value) return
|
||
loadingRecommend.value = true
|
||
try {
|
||
const [keywords, recommended] = await Promise.all([
|
||
fetchPreferences(userId.value),
|
||
fetchRecommendedEvents(userId.value, { min_hot: 1, hours: 72, limit: 8, sort_by: recSortBy.value }),
|
||
])
|
||
userKeywords.value = keywords
|
||
recommendedEvents.value = recommended.data
|
||
} catch {
|
||
// 推荐加载失败不阻塞主流程
|
||
} finally {
|
||
loadingRecommend.value = false
|
||
}
|
||
}
|
||
|
||
function onThresholdChange(value: number) {
|
||
minHot.value = value
|
||
localStorage.setItem(THRESHOLD_STORAGE_KEY, String(value))
|
||
loadEvents(false)
|
||
}
|
||
|
||
function onHoursChange(value: number) {
|
||
hoursRange.value = value
|
||
loadEvents(false)
|
||
}
|
||
|
||
function onSortChange(value: string) {
|
||
sortBy.value = value
|
||
loadEvents(false)
|
||
}
|
||
|
||
function onRecSortChange(value: string) {
|
||
recSortBy.value = value
|
||
loadRecommendations()
|
||
}
|
||
|
||
function loadMore() {
|
||
if (hasMore.value && !loadingMore.value) {
|
||
loadEvents(true)
|
||
}
|
||
}
|
||
|
||
const lastSyncText = computed(() => {
|
||
if (!stats.value?.last_sync_at) return '暂无'
|
||
return formatRelativeTime(stats.value.last_sync_at)
|
||
})
|
||
|
||
/** 用户是否配置了关键词 */
|
||
const hasKeywords = computed(() => userKeywords.value.length > 0)
|
||
|
||
onMounted(async () => {
|
||
// 如果携带了 event 参数，立即拉取聚光灯数据（不等主列表）
|
||
if (route.query.event) {
|
||
loadSpotlightEvent(Number(route.query.event))
|
||
}
|
||
|
||
const sidePromise = Promise.all([
|
||
fetchHeadlineRevisions({ hours: 48, limit: 5 }),
|
||
fetchSystemStats(),
|
||
])
|
||
|
||
await Promise.all([
|
||
loadEvents(false),
|
||
loadRecommendations(),
|
||
])
|
||
|
||
try {
|
||
const [revisionsData, statsData] = await sidePromise
|
||
revisions.value = revisionsData
|
||
stats.value = statsData
|
||
} catch {
|
||
// 侧栏数据加载失败不影响主内容
|
||
}
|
||
})
|
||
|
||
// 从其他页面跳转过来时，event 参数变化则重新加载聚光灯
|
||
watch(() => route.query.event, (newId) => {
|
||
if (newId) {
|
||
loadSpotlightEvent(Number(newId))
|
||
} else {
|
||
spotlightEvent.value = null
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="dashboard-page">
|
||
<div class="content-grid">
|
||
<!-- 左侧：AI 统一大事件流 -->
|
||
<div class="events-column">
|
||
<!-- 区域头部 + 热度阈值控制 -->
|
||
<div class="section-header">
|
||
<div class="section-title-row">
|
||
<h2>
|
||
<i class="fa-solid fa-bolt" style="color: #facc15"></i>
|
||
突发事件深度聚合
|
||
</h2>
|
||
<span class="section-meta">基于语义聚类 · 共 {{ totalEvents }} 条</span>
|
||
</div>
|
||
<div class="filters-bar">
|
||
<div class="filter-group">
|
||
<span class="filter-label">
|
||
<i class="fa-solid fa-fire"></i> 最低热度
|
||
</span>
|
||
<div class="filter-tabs">
|
||
<button
|
||
v-for="opt in thresholdOptions"
|
||
:key="opt.value"
|
||
class="filter-tab"
|
||
:class="{ active: minHot === opt.value }"
|
||
@click="onThresholdChange(opt.value)"
|
||
>
|
||
{{ opt.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<span class="filter-label">
|
||
<i class="fa-regular fa-clock"></i> 时间范围
|
||
</span>
|
||
<div class="filter-tabs">
|
||
<button
|
||
v-for="opt in hoursOptions"
|
||
:key="opt.value"
|
||
class="filter-tab"
|
||
:class="{ active: hoursRange === opt.value }"
|
||
@click="onHoursChange(opt.value)"
|
||
>
|
||
{{ opt.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-group">
|
||
<span class="filter-label">
|
||
<i class="fa-solid fa-arrow-down-wide-short"></i> 排序方式
|
||
</span>
|
||
<div class="filter-tabs">
|
||
<button
|
||
v-for="opt in sortOptions"
|
||
:key="opt.value"
|
||
class="filter-tab"
|
||
:class="{ active: sortBy === opt.value }"
|
||
@click="onSortChange(opt.value)"
|
||
>
|
||
{{ opt.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 聚光灯：从推荐页跳转时展示目标事件（独立于主列表，不受分页影响） -->
|
||
<transition name="spotlight-fade">
|
||
<div v-if="loadingSpotlight || spotlightEvent" class="spotlight-wrap">
|
||
<div class="spotlight-label">
|
||
<i class="fa-solid fa-location-crosshairs"></i>
|
||
你正在查看的推荐事件
|
||
<button class="spotlight-close" @click="dismissSpotlight" title="关闭">
|
||
<i class="fa-solid fa-xmark"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 加载骨架 -->
|
||
<div v-if="loadingSpotlight" class="spotlight-skeleton">
|
||
<div class="skel skel-title"></div>
|
||
<div class="skel skel-line"></div>
|
||
<div class="skel skel-line short"></div>
|
||
</div>
|
||
|
||
<!-- 事件内容（复用 event-card 样式） -->
|
||
<article
|
||
v-else-if="spotlightEvent"
|
||
class="event-card spotlight-card"
|
||
:class="{ 'is-hot': spotlightEvent.hot_score >= 50 }"
|
||
>
|
||
<div class="card-top">
|
||
<div class="tags-row">
|
||
<span
|
||
class="hot-badge"
|
||
:style="{ color: getHotLevel(spotlightEvent.hot_score).color, background: getHotLevel(spotlightEvent.hot_score).bg }"
|
||
>
|
||
{{ getHotLevel(spotlightEvent.hot_score).label }} ({{ spotlightEvent.hot_score }})
|
||
</span>
|
||
<span v-for="tag in spotlightEvent.tags.slice(0, 3)" :key="tag" class="topic-tag">{{ tag }}</span>
|
||
</div>
|
||
<div class="event-time-range" title="左侧为首次发现时间，右侧为最后活跃时间">
|
||
<span>{{ formatRelativeTime(spotlightEvent.created_at) }}</span>
|
||
<template v-if="formatRelativeTime(spotlightEvent.created_at) !== formatRelativeTime(spotlightEvent.last_active_at)">
|
||
<i class="fa-solid fa-arrow-right time-arrow"></i>
|
||
<span class="active-time">{{ formatRelativeTime(spotlightEvent.last_active_at) }}</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<h3 class="card-title">{{ spotlightEvent.unified_title }}</h3>
|
||
<div v-if="spotlightEvent.summary" class="ai-summary">
|
||
<i class="fa-solid fa-wand-magic-sparkles summary-icon"></i>
|
||
<p>
|
||
<span class="summary-label">AI 全局洞察：</span>
|
||
{{ spotlightEvent.summary }}
|
||
</p>
|
||
</div>
|
||
<div v-if="spotlightEvent.platforms.length > 0" class="platforms-list">
|
||
<div
|
||
v-for="(p, pIdx) in spotlightEvent.platforms"
|
||
:key="pIdx"
|
||
class="platform-block"
|
||
@mouseenter="hoveredPlatformKey = platformKey(spotlightEvent.event_id, pIdx, 'spotlight')"
|
||
@mouseleave="hoveredPlatformKey = null"
|
||
>
|
||
<div class="platform-row">
|
||
<div class="platform-info">
|
||
<i
|
||
:class="getPlatformIcon(p.platform_name)"
|
||
:style="{ color: getPlatformColor(p.platform_name) }"
|
||
></i>
|
||
<a
|
||
v-if="p.url"
|
||
:href="p.url"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="platform-headline platform-link"
|
||
>
|
||
{{ p.platform_name }}：{{ p.headline }}
|
||
</a>
|
||
<span v-else class="platform-headline">{{ p.platform_name }}：{{ p.headline }}</span>
|
||
</div>
|
||
<span v-if="p.current_ranking" class="ranking-badge" :style="{ color: getRankingTrend(p).color }">
|
||
<i :class="getRankingTrend(p).icon"></i> {{ getRankingTrend(p).text }}
|
||
</span>
|
||
</div>
|
||
|
||
<transition name="chart-expand">
|
||
<div
|
||
v-if="
|
||
hoveredPlatformKey === platformKey(spotlightEvent.event_id, pIdx, 'spotlight') &&
|
||
p.ranking_history.length > 1
|
||
"
|
||
class="inline-chart"
|
||
>
|
||
<p class="chart-label">
|
||
<i
|
||
:class="getPlatformIcon(p.platform_name)"
|
||
:style="{ color: getPlatformColor(p.platform_name) }"
|
||
></i>
|
||
{{ p.platform_name }}「{{ p.headline.length > 16 ? p.headline.slice(0, 16) + '...' : p.headline }}」排名轨迹
|
||
</p>
|
||
<VueApexCharts
|
||
type="area"
|
||
height="56"
|
||
:options="getRankingChartOptions(p.ranking_history, getPlatformColor(p.platform_name))"
|
||
:series="getRankingChartOptions(p.ranking_history, getPlatformColor(p.platform_name)).series"
|
||
/>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</transition>
|
||
|
||
<!-- 加载状态 -->
|
||
<div v-if="loading" class="loading-state">
|
||
<i class="fa-solid fa-spinner fa-spin"></i>
|
||
<span>正在加载数据...</span>
|
||
</div>
|
||
|
||
<!-- 错误状态 -->
|
||
<div v-else-if="error" class="error-state">
|
||
<i class="fa-solid fa-circle-exclamation"></i>
|
||
<span>{{ error }}</span>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else-if="events.length === 0" class="empty-state">
|
||
<i class="fa-solid fa-satellite-dish"></i>
|
||
<p>当前阈值下暂无聚合事件</p>
|
||
<p class="empty-hint">尝试降低热度阈值查看更多</p>
|
||
</div>
|
||
|
||
<!-- 事件卡片列表 -->
|
||
<template v-else>
|
||
<article
|
||
v-for="ev in events"
|
||
:key="ev.event_id"
|
||
class="event-card"
|
||
:class="{ 'is-hot': ev.hot_score >= 50 }"
|
||
>
|
||
<div class="card-top">
|
||
<div class="tags-row">
|
||
<span
|
||
class="hot-badge"
|
||
:style="{ color: getHotLevel(ev.hot_score).color, background: getHotLevel(ev.hot_score).bg }"
|
||
>
|
||
{{ getHotLevel(ev.hot_score).label }} ({{ ev.hot_score }})
|
||
</span>
|
||
<span v-for="tag in ev.tags.slice(0, 3)" :key="tag" class="topic-tag">{{ tag }}</span>
|
||
</div>
|
||
<div class="event-time-range" title="左侧为首次发现时间，右侧为最后活跃时间">
|
||
<span>{{ formatRelativeTime(ev.created_at) }}</span>
|
||
<template v-if="formatRelativeTime(ev.created_at) !== formatRelativeTime(ev.last_active_at)">
|
||
<i class="fa-solid fa-arrow-right time-arrow"></i>
|
||
<span class="active-time">{{ formatRelativeTime(ev.last_active_at) }}</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="card-title">{{ ev.unified_title }}</h3>
|
||
|
||
<div v-if="ev.summary" class="ai-summary">
|
||
<i class="fa-solid fa-wand-magic-sparkles summary-icon"></i>
|
||
<p>
|
||
<span class="summary-label">AI 全局洞察：</span>
|
||
{{ ev.summary }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 多平台挂载节点：用数组索引做唯一键 -->
|
||
<div v-if="ev.platforms.length > 0" class="platforms-list">
|
||
<div
|
||
v-for="(p, pIdx) in ev.platforms"
|
||
:key="pIdx"
|
||
class="platform-block"
|
||
@mouseenter="hoveredPlatformKey = platformKey(ev.event_id, pIdx)"
|
||
@mouseleave="hoveredPlatformKey = null"
|
||
>
|
||
<div class="platform-row">
|
||
<div class="platform-info">
|
||
<i
|
||
:class="getPlatformIcon(p.platform_name)"
|
||
:style="{ color: getPlatformColor(p.platform_name) }"
|
||
></i>
|
||
<a
|
||
v-if="p.url"
|
||
:href="p.url"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="platform-headline platform-link"
|
||
>
|
||
{{ p.platform_name }}：{{ p.headline }}
|
||
</a>
|
||
<span v-else class="platform-headline">{{ p.platform_name }}：{{ p.headline }}</span>
|
||
</div>
|
||
<span v-if="p.current_ranking" class="ranking-badge" :style="{ color: getRankingTrend(p).color }">
|
||
<i :class="getRankingTrend(p).icon"></i> {{ getRankingTrend(p).text }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 悬停时展示该条热搜独立的排名走势 -->
|
||
<transition name="chart-expand">
|
||
<div
|
||
v-if="
|
||
hoveredPlatformKey === platformKey(ev.event_id, pIdx) &&
|
||
p.ranking_history.length > 1
|
||
"
|
||
class="inline-chart"
|
||
>
|
||
<p class="chart-label">
|
||
<i
|
||
:class="getPlatformIcon(p.platform_name)"
|
||
:style="{ color: getPlatformColor(p.platform_name) }"
|
||
></i>
|
||
{{ p.platform_name }}「{{ p.headline.length > 16 ? p.headline.slice(0, 16) + '...' : p.headline }}」排名轨迹
|
||
</p>
|
||
<VueApexCharts
|
||
type="area"
|
||
height="56"
|
||
:options="getRankingChartOptions(p.ranking_history, getPlatformColor(p.platform_name))"
|
||
:series="getRankingChartOptions(p.ranking_history, getPlatformColor(p.platform_name)).series"
|
||
/>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 加载更多 -->
|
||
<div v-if="hasMore" class="load-more-wrapper">
|
||
<button class="load-more-btn" :disabled="loadingMore" @click="loadMore">
|
||
<i v-if="loadingMore" class="fa-solid fa-spinner fa-spin"></i>
|
||
<i v-else class="fa-solid fa-chevron-down"></i>
|
||
{{ loadingMore ? '加载中...' : '加载更多' }}
|
||
</button>
|
||
<span class="loaded-count">已加载 {{ events.length }} / {{ totalEvents }}</span>
|
||
</div>
|
||
|
||
<div v-else-if="events.length > 0" class="all-loaded">
|
||
<span>已展示全部 {{ events.length }} 条事件</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- ==========================================
|
||
右侧：小组件面板
|
||
========================================== -->
|
||
<div class="widgets-column">
|
||
|
||
<!-- 为你推荐（基于用户关键词的匹配） -->
|
||
<section class="widget-panel recommend-widget" v-if="authStore.isAuthenticated">
|
||
<div class="widget-header recommend-header">
|
||
<h3>
|
||
<i class="fa-solid fa-wand-magic-sparkles"></i>
|
||
为你推荐
|
||
</h3>
|
||
<div class="recommend-actions">
|
||
<div class="mini-tabs">
|
||
<button
|
||
v-for="opt in recSortOptions"
|
||
:key="opt.value"
|
||
class="mini-tab"
|
||
:class="{ active: recSortBy === opt.value }"
|
||
@click="onRecSortChange(opt.value)"
|
||
>
|
||
{{ opt.label }}
|
||
</button>
|
||
</div>
|
||
<RouterLink to="/topics" class="widget-action-link">
|
||
<i class="fa-solid fa-gear"></i>
|
||
</RouterLink>
|
||
</div>
|
||
</div>
|
||
<div class="widget-body">
|
||
<!-- 加载中 -->
|
||
<div v-if="loadingRecommend" class="widget-empty">
|
||
<i class="fa-solid fa-spinner fa-spin"></i> 匹配中...
|
||
</div>
|
||
|
||
<!-- 未配置关键词 -->
|
||
<div v-else-if="!hasKeywords" class="recommend-empty">
|
||
<i class="fa-solid fa-bookmark"></i>
|
||
<p>还没有设置兴趣关键词</p>
|
||
<RouterLink to="/topics" class="recommend-go-btn">
|
||
<i class="fa-solid fa-plus"></i> 去添加关键词
|
||
</RouterLink>
|
||
</div>
|
||
|
||
<!-- 有关键词但没匹配到 -->
|
||
<div v-else-if="recommendedEvents.length === 0" class="recommend-empty">
|
||
<i class="fa-solid fa-search"></i>
|
||
<p>暂未匹配到相关事件</p>
|
||
<p class="empty-sub">系统将在下次 AI 摘要生成后重新匹配</p>
|
||
</div>
|
||
|
||
<!-- 推荐事件列表 -->
|
||
<template v-else>
|
||
<div class="recommend-keywords">
|
||
<span class="recommend-kw-label">当前订阅：</span>
|
||
<span v-for="kw in userKeywords.slice(0, 5)" :key="kw.id" class="recommend-kw-tag">
|
||
{{ kw.interested_keyword }}
|
||
</span>
|
||
<span v-if="userKeywords.length > 5" class="recommend-kw-more">
|
||
+{{ userKeywords.length - 5 }}
|
||
</span>
|
||
</div>
|
||
|
||
<RouterLink
|
||
v-for="rec in recommendedEvents"
|
||
:key="rec.event_id"
|
||
:to="{ path: '/', query: { event: rec.event_id } }"
|
||
class="recommend-item"
|
||
>
|
||
<div class="recommend-item-top">
|
||
<span
|
||
class="hot-badge mini"
|
||
:style="{ color: getHotLevel(rec.hot_score).color, background: getHotLevel(rec.hot_score).bg }"
|
||
>
|
||
{{ rec.hot_score }}
|
||
</span>
|
||
<span class="recommend-score">
|
||
匹配度 {{ rec.match_score.toFixed(0) }}
|
||
</span>
|
||
</div>
|
||
<p class="recommend-title">{{ rec.unified_title }}</p>
|
||
<div class="recommend-hits">
|
||
<span v-for="hit in rec.exact_hits.slice(0, 3)" :key="hit" class="hit-tag exact">
|
||
<i class="fa-solid fa-bullseye"></i> {{ hit }}
|
||
</span>
|
||
<span
|
||
v-for="sh in rec.semantic_hits.slice(0, 2)"
|
||
:key="sh.topic_keyword"
|
||
class="hit-tag semantic"
|
||
>
|
||
<i class="fa-solid fa-brain"></i> {{ sh.topic_keyword }}
|
||
<span class="sim-score">{{ (sh.similarity * 100).toFixed(0) }}%</span>
|
||
</span>
|
||
</div>
|
||
<span class="recommend-goto"><i class="fa-solid fa-arrow-right"></i></span>
|
||
</RouterLink>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 公关修改追踪 -->
|
||
<section class="widget-panel revision-widget">
|
||
<div class="widget-header revision-header">
|
||
<h3>
|
||
<i class="fa-solid fa-eye pulse-icon"></i>
|
||
公关修改追踪台
|
||
</h3>
|
||
<span class="realtime-badge">实时抓取</span>
|
||
</div>
|
||
<div class="widget-body">
|
||
<div v-if="revisions.length === 0" class="widget-empty">
|
||
<p>暂无检测到标题修改</p>
|
||
</div>
|
||
<div v-for="rev in revisions" :key="rev.id" class="revision-item">
|
||
<div class="revision-meta">
|
||
<span class="platform-info">
|
||
<i :class="getPlatformIcon(rev.source_name || '')" class="rev-platform-icon"></i>
|
||
<a
|
||
v-if="rev.url"
|
||
:href="rev.url"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="platform-link"
|
||
>
|
||
{{ rev.source_name || '未知平台' }}
|
||
</a>
|
||
<span v-else>{{ rev.source_name || '未知平台' }}</span>
|
||
<span class="meta-dot">·</span>
|
||
<span class="meta-time">{{ formatRelativeTime(rev.created_at) }}</span>
|
||
</span>
|
||
</div>
|
||
<div class="revision-diff">
|
||
<p class="old-headline">{{ rev.previous_headline }}</p>
|
||
<div class="arrow-down">
|
||
<i class="fa-solid fa-arrow-down"></i> 修改为
|
||
</div>
|
||
<p class="new-headline">{{ rev.revised_headline }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 系统状态 -->
|
||
<section v-if="stats" class="widget-panel stats-widget">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<p class="stat-label">爬虫状态</p>
|
||
<p class="stat-value">
|
||
<span class="status-dot-green"></span>
|
||
{{ stats.active_sources }} 个源运行中
|
||
</p>
|
||
</div>
|
||
<div class="stat-item stat-right">
|
||
<p class="stat-label">今日已入库</p>
|
||
<p class="stat-value stat-number">
|
||
{{ stats.items_today.toLocaleString() }}
|
||
<span class="stat-unit">条</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="stats-footer">
|
||
<span>
|
||
<i class="fa-regular fa-clock"></i>
|
||
最后同步: {{ lastSyncText }}
|
||
</span>
|
||
<!-- <span v-if="stats.error_tasks_today > 0" class="error-count">
|
||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||
{{ stats.error_tasks_today }} 个异常
|
||
</span> -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.dashboard-page {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.loading-state,
|
||
.error-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
padding: 80px 20px;
|
||
color: var(--text-secondary);
|
||
font-size: 15px;
|
||
}
|
||
|
||
.error-state {
|
||
color: var(--status-error);
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.empty-state i {
|
||
font-size: 40px;
|
||
margin-bottom: 16px;
|
||
display: block;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.empty-hint {
|
||
font-size: 13px;
|
||
color: var(--text-placeholder);
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* ==========================================
|
||
网格布局
|
||
========================================== */
|
||
.content-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.content-grid {
|
||
flex-direction: row;
|
||
}
|
||
}
|
||
|
||
.events-column {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.widgets-column {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.widgets-column {
|
||
width: 380px;
|
||
min-width: 380px;
|
||
}
|
||
}
|
||
|
||
/* ==========================================
|
||
区域标题 + 热度阈值 (高级磨砂透明风)
|
||
========================================== */
|
||
.section-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.section-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.section-meta {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.filters-bar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
padding: 12px 16px;
|
||
background: var(--bg-surface);
|
||
backdrop-filter: var(--backdrop-blur);
|
||
-webkit-backdrop-filter: var(--backdrop-blur);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.filter-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.filter-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.filter-tabs {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
background: var(--bg-input);
|
||
padding: 4px;
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.filter-tab {
|
||
padding: 6px 14px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.filter-tab:hover {
|
||
color: var(--text-primary);
|
||
background: var(--bg-hover);
|
||
}
|
||
|
||
.filter-tab.active {
|
||
background: var(--bg-surface);
|
||
color: var(--brand-primary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
/* ==========================================
|
||
事件卡片
|
||
========================================== */
|
||
/* 事件卡片，加入毛玻璃与高级阴影 */
|
||
.event-card {
|
||
background: var(--bg-surface);
|
||
backdrop-filter: var(--backdrop-blur);
|
||
-webkit-backdrop-filter: var(--backdrop-blur);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-xl);
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.event-card:hover {
|
||
border-color: var(--brand-primary-alpha);
|
||
box-shadow: var(--shadow-xl);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.event-card.is-hot {
|
||
border-left: 4px solid #ef4444;
|
||
}
|
||
|
||
.card-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.tags-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hot-badge {
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hot-badge.mini {
|
||
padding: 1px 6px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.topic-tag {
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
background: var(--bg-input);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.event-time-range {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.time-arrow {
|
||
font-size: 10px;
|
||
color: var(--text-placeholder);
|
||
}
|
||
|
||
.active-time {
|
||
color: var(--brand-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin: 0 0 12px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* AI 摘要，调整为更细腻的展示效果 */
|
||
.ai-summary {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(145deg, var(--brand-primary-alpha), transparent);
|
||
border: 1px solid rgba(99, 102, 241, 0.1);
|
||
margin-bottom: 20px;
|
||
box-shadow: inset 0 2px 4px rgba(255,255,255,0.05);
|
||
}
|
||
|
||
.summary-icon {
|
||
color: var(--brand-primary);
|
||
margin-top: 2px;
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.ai-summary p {
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.summary-label {
|
||
font-weight: 600;
|
||
background: linear-gradient(to right, #a78bfa, #818cf8);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
/* ==========================================
|
||
平台列表 + 悬停排名图
|
||
========================================== */
|
||
.platforms-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.platform-block {
|
||
border-radius: var(--radius-md);
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.platform-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 16px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--bg-input);
|
||
border: 1px solid transparent;
|
||
font-size: 14px;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.platform-block:hover .platform-row {
|
||
background: var(--bg-surface);
|
||
border-color: var(--border-subtle);
|
||
transform: scale(1.01);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.platform-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
font-size: 14px;
|
||
font-weight:500;
|
||
}
|
||
|
||
.platform-info i {
|
||
font-size: 16px;
|
||
width: 20px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.platform-headline {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.platform-link {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.platform-link:hover {
|
||
color: var(--brand-primary);
|
||
}
|
||
|
||
.ranking-badge {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
margin-left: 8px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
/* 悬停展开的排名图 */
|
||
.inline-chart {
|
||
padding: 8px 12px 10px;
|
||
background: var(--bg-input);
|
||
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
||
margin-top: -2px;
|
||
}
|
||
|
||
.chart-label {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
margin: 0 0 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.chart-label i {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.chart-expand-enter-active {
|
||
transition: all 0.25s ease-out;
|
||
}
|
||
|
||
.chart-expand-leave-active {
|
||
transition: all 0.15s ease-in;
|
||
}
|
||
|
||
.chart-expand-enter-from,
|
||
.chart-expand-leave-to {
|
||
opacity: 0;
|
||
max-height: 0;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chart-expand-enter-to,
|
||
.chart-expand-leave-from {
|
||
opacity: 1;
|
||
max-height: 120px;
|
||
}
|
||
|
||
/* ==========================================
|
||
加载更多
|
||
========================================== */
|
||
.load-more-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.load-more-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 28px;
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-lg);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.load-more-btn:hover:not(:disabled) {
|
||
border-color: var(--brand-primary);
|
||
color: var(--brand-primary);
|
||
background: var(--brand-primary-alpha);
|
||
}
|
||
|
||
.load-more-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.loaded-count {
|
||
font-size: 11px;
|
||
color: var(--text-placeholder);
|
||
}
|
||
|
||
.all-loaded {
|
||
text-align: center;
|
||
padding: 16px 0;
|
||
font-size: 12px;
|
||
color: var(--text-placeholder);
|
||
}
|
||
|
||
/* ==========================================
|
||
小组件面板（通用）- 玻璃拟态高级质感
|
||
========================================== */
|
||
.widget-panel {
|
||
background: var(--bg-surface);
|
||
backdrop-filter: var(--backdrop-blur);
|
||
-webkit-backdrop-filter: var(--backdrop-blur);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.widget-panel:hover {
|
||
box-shadow: var(--shadow-md);
|
||
border-color: rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
.widget-header {
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.widget-header h3 {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.recommend-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.mini-tabs {
|
||
display: flex;
|
||
background: var(--bg-input);
|
||
padding: 2px;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.mini-tab {
|
||
padding: 2px 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-sm);
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.mini-tab:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.mini-tab.active {
|
||
background: var(--bg-surface);
|
||
color: var(--brand-primary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.widget-action-link {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
padding: 4px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.widget-action-link:hover {
|
||
color: var(--text-primary);
|
||
background: var(--bg-input);
|
||
}
|
||
|
||
.widget-body {
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.widget-empty {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ==========================================
|
||
为你推荐面板
|
||
========================================== */
|
||
.recommend-header {
|
||
background: rgba(139, 92, 246, 0.06);
|
||
border-bottom-color: rgba(139, 92, 246, 0.15);
|
||
}
|
||
|
||
.recommend-header h3 {
|
||
background: linear-gradient(to right, #a78bfa, #818cf8);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.recommend-empty {
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.recommend-empty i {
|
||
font-size: 28px;
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.recommend-empty p {
|
||
font-size: 13px;
|
||
margin: 0;
|
||
}
|
||
|
||
.empty-sub {
|
||
font-size: 11px !important;
|
||
color: var(--text-placeholder);
|
||
margin-top: 4px !important;
|
||
}
|
||
|
||
.recommend-go-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 12px;
|
||
padding: 6px 16px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
border-radius: var(--radius-md);
|
||
background: var(--brand-primary);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.recommend-go-btn:hover {
|
||
background: var(--brand-primary-hover);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 订阅关键词展示 */
|
||
.recommend-keywords {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.recommend-kw-label {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.recommend-kw-tag {
|
||
font-size: 11px;
|
||
padding: 1px 8px;
|
||
border-radius: 10px;
|
||
background: var(--brand-primary-alpha);
|
||
color: var(--brand-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.recommend-kw-more {
|
||
font-size: 11px;
|
||
color: var(--text-placeholder);
|
||
}
|
||
|
||
/* 推荐事件条目 */
|
||
.recommend-item {
|
||
display: block;
|
||
position: relative;
|
||
padding: 10px 28px 10px 10px;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
margin-bottom: 8px;
|
||
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.recommend-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.recommend-item:hover {
|
||
border-color: var(--brand-primary-alpha);
|
||
background: var(--bg-hover);
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
.recommend-goto {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 10px;
|
||
color: var(--text-placeholder);
|
||
transition: color 0.2s, transform 0.2s;
|
||
}
|
||
|
||
.recommend-item:hover .recommend-goto {
|
||
color: var(--brand-primary);
|
||
transform: translateY(-50%) translateX(2px);
|
||
}
|
||
|
||
.recommend-item-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.recommend-score {
|
||
font-size: 10px;
|
||
color: var(--text-placeholder);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.recommend-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.recommend-hits {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
|
||
.hit-tag {
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
}
|
||
|
||
.hit-tag.exact {
|
||
background: rgba(16, 185, 129, 0.1);
|
||
color: var(--status-success);
|
||
}
|
||
|
||
.hit-tag.semantic {
|
||
background: rgba(139, 92, 246, 0.1);
|
||
color: #a78bfa;
|
||
}
|
||
|
||
.sim-score {
|
||
opacity: 0.7;
|
||
font-size: 9px;
|
||
}
|
||
|
||
/* ==========================================
|
||
公关修改追踪
|
||
========================================== */
|
||
.revision-header {
|
||
background: rgba(239, 68, 68, 0.06);
|
||
border-bottom-color: rgba(239, 68, 68, 0.15);
|
||
}
|
||
|
||
.revision-header h3 {
|
||
color: var(--status-error);
|
||
}
|
||
|
||
.pulse-icon {
|
||
animation: pulse-dot 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse-dot {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
.realtime-badge {
|
||
font-size: 10px;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: var(--status-error);
|
||
}
|
||
|
||
.revision-item {
|
||
padding: 12px;
|
||
background: var(--bg-input);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-subtle);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.revision-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.revision-meta {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.platform-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.rev-platform-icon {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.platform-link {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.platform-link:hover {
|
||
color: var(--brand-primary);
|
||
}
|
||
|
||
.meta-dot {
|
||
margin: 0 4px;
|
||
}
|
||
|
||
.revision-diff {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.old-headline {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
text-decoration: line-through;
|
||
text-decoration-color: var(--status-error);
|
||
margin: 0;
|
||
}
|
||
|
||
.arrow-down {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
color: var(--text-placeholder);
|
||
gap: 4px;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.new-headline {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--status-success);
|
||
background: rgba(16, 185, 129, 0.08);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ==========================================
|
||
系统状态
|
||
========================================== */
|
||
.stats-widget {
|
||
padding: 16px;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.stat-right {
|
||
text-align: right;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 22px;
|
||
color: var(--brand-primary);
|
||
}
|
||
|
||
.stat-unit {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.status-dot-green {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--status-success);
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.stats-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--border-subtle);
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.error-count {
|
||
color: var(--status-error);
|
||
}
|
||
|
||
/* ==========================================
|
||
聚光灯区块
|
||
========================================== */
|
||
.spotlight-wrap {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.spotlight-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--brand-primary);
|
||
margin-bottom: 8px;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.spotlight-close {
|
||
margin-left: auto;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
color: var(--text-placeholder);
|
||
background: var(--bg-input);
|
||
border: 1px solid var(--border-subtle);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.spotlight-close:hover {
|
||
color: var(--status-error);
|
||
background: rgba(239, 68, 68, 0.08);
|
||
border-color: rgba(239, 68, 68, 0.2);
|
||
}
|
||
|
||
.spotlight-card {
|
||
border-color: var(--brand-primary-alpha);
|
||
box-shadow: 0 0 0 3px var(--brand-primary-alpha), var(--shadow-md);
|
||
}
|
||
|
||
/* 骨架屏 */
|
||
.spotlight-skeleton {
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: var(--radius-xl);
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.skel {
|
||
background: var(--bg-input);
|
||
border-radius: 6px;
|
||
animation: skel-pulse 1.4s ease-in-out infinite;
|
||
}
|
||
|
||
.skel-title {
|
||
height: 20px;
|
||
width: 75%;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.skel-line {
|
||
height: 13px;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.skel-line.short {
|
||
width: 55%;
|
||
}
|
||
|
||
@keyframes skel-pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
/* 聚光灯进出场动画 */
|
||
.spotlight-fade-enter-active,
|
||
.spotlight-fade-leave-active {
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
.spotlight-fade-enter-from,
|
||
.spotlight-fade-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
</style>
|