218 lines
10 KiB
Vue
218 lines
10 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
// 定义组件名称
|
||
defineOptions({
|
||
name: 'HeatAnalysis'
|
||
})
|
||
|
||
const keywords = ref('')
|
||
const platform = ref('')
|
||
const timeWindow = ref('')
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-screen bg-gray-50 p-6">
|
||
<div class="max-w-7xl mx-auto space-y-6">
|
||
<!-- 页面标题 -->
|
||
<div class="text-center">
|
||
<h1 class="text-3xl font-bold text-gray-900 mb-2">热度趋势分析</h1>
|
||
<p class="text-gray-600">实时监控关键词在各大平台的热度变化</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<!-- 查询参数面板 -->
|
||
<section class="lg:col-span-1">
|
||
<div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
|
||
<div class="mb-4">
|
||
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||
</svg>
|
||
查询设置
|
||
</h3>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<!-- 关键词输入 -->
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">关键词</label>
|
||
<div class="relative">
|
||
<input
|
||
v-model="keywords"
|
||
class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white"
|
||
placeholder="输入关键词，多个用逗号分隔"
|
||
type="text"
|
||
/>
|
||
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
|
||
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-1">支持多个关键词，用逗号分隔</p>
|
||
</div>
|
||
|
||
<!-- 平台和时间选择 -->
|
||
<div class="grid grid-cols-1 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">平台选择</label>
|
||
<select
|
||
v-model="platform"
|
||
class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-900 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white"
|
||
>
|
||
<option value="">请选择平台</option>
|
||
<option value="weibo">微博</option>
|
||
<option value="douyin">抖音</option>
|
||
<option value="xiaohongshu">小红书</option>
|
||
<option value="zhihu">知乎</option>
|
||
<option value="toutiao">今日头条</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-2">时间窗口</label>
|
||
<select
|
||
v-model="timeWindow"
|
||
class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-900 focus:ring-2 Focus:ring-purple-500 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white"
|
||
>
|
||
<option value="">请选择时间范围</option>
|
||
<option value="1h">最近1小时</option>
|
||
<option value="6h">最近6小时</option>
|
||
<option value="24h">最近24小时</option>
|
||
<option value="7d">最近7天</option>
|
||
<option value="30d">最近30天</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查询按钮 -->
|
||
<button class="w-full bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all duration-200 flex items-center justify-center">
|
||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||
</svg>
|
||
开始分析
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 分析结果面板 -->
|
||
<section class="lg:col-span-2">
|
||
<div class="bg-white rounded-xl shadow-lg border border-gray-100">
|
||
<!-- 看板头部 -->
|
||
<div class="px-6 py-4 border-b border-gray-100">
|
||
<h3 class="text-lg font-semibold text-gray-900 flex items-center">
|
||
<svg class="w-5 h-5 mr-2 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
|
||
</svg>
|
||
热度趋势看板
|
||
</h3>
|
||
</div>
|
||
|
||
<!-- 图表内容区域 -->
|
||
<div class="p-6">
|
||
<!-- 占位内容 -->
|
||
<div class="flex items-center justify-center h-96 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
|
||
<div class="text-center">
|
||
<svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v16a1 1 0 01-1 1h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1V4zm2 1v14h2v-6a1 1 0 011-1h4a1 1 0 011 1v6h2V5H5z" clip-rule="evenodd" />
|
||
</svg>
|
||
<p class="text-lg font-medium text-gray-900 mb-2">正在准备数据...</p>
|
||
<p class="text-gray-600">请先设置查询参数，然后点击"开始分析"查看趋势图表</p>
|
||
<div class="mt-4 space-y-2">
|
||
<p class="text-sm text-gray-500">📈 热度折线图</p>
|
||
<p class="text-sm text-gray-500">📊 相关话题分布</p>
|
||
<p class="text-sm text-gray-500">🏆 热门排行榜</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能特性提示 -->
|
||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="text-center p-4 bg-purple-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-4 h-4 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-medium text-gray-900">趋势分析</h4>
|
||
<p class="text-xs text-gray-600">实时跟踪关键词热度变化</p>
|
||
</div>
|
||
<div class="text-center p-4 bg-blue-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
|
||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-medium text-gray-900">智能预测</h4>
|
||
<p class="text-xs text-gray-600">AI预测未来热度走势</p>
|
||
</div>
|
||
<div class="text-center p-4 bg-green-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 011 1v.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 012 17.5V17zm1.5-2A1.5 1.5 0 003 16.5v.5h14v-.5a1.5 1.5 0 00-1.5-1.5h-11z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="font-medium text-gray-900">多维分析</h4>
|
||
<p class="text-xs text-gray-600">跨平台数据对比分析</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 自定义滚动条样式 */
|
||
.scrollbar-thin::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
/* 平滑过渡效果 */
|
||
.fade-in {
|
||
animation: fadeIn 0.5s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 按钮悬停效果增强 */
|
||
button:hover {
|
||
box-shadow: 0 10px 25px -2px rgba(147, 51, 234, 0.5);
|
||
}
|
||
|
||
/* 输入框焦点效果 */
|
||
input:focus, select:focus {
|
||
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
|
||
}
|
||
</style>
|
||
|
||
|
||
|