feat: refactor data asset center for enhanced search and analytics
Refactor homepage for focused search and data display; streamline data platform; enhance user and tag management; focus AI assistant on data analysis and report generation. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
3
app/intelligent-search/loading.tsx
Normal file
3
app/intelligent-search/loading.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
567
app/intelligent-search/page.tsx
Normal file
567
app/intelligent-search/page.tsx
Normal file
@@ -0,0 +1,567 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Avatar } from "@/components/ui/avatar"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Search,
|
||||
Sparkles,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Brain,
|
||||
Zap,
|
||||
Download,
|
||||
RefreshCw,
|
||||
Eye,
|
||||
BarChart3,
|
||||
Lightbulb,
|
||||
} from "lucide-react"
|
||||
import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
|
||||
|
||||
interface SearchResult {
|
||||
id: string
|
||||
type: "user" | "traffic" | "insight"
|
||||
title: string
|
||||
description: string
|
||||
tags: string[]
|
||||
relevanceScore: number
|
||||
updatedAt: string
|
||||
metadata?: Record<string, any>
|
||||
}
|
||||
|
||||
interface SearchResponse {
|
||||
results: SearchResult[]
|
||||
stats: {
|
||||
totalResults: number
|
||||
queryTime: number
|
||||
suggestions: string[]
|
||||
filters: Record<string, any>
|
||||
}
|
||||
hasMore: boolean
|
||||
}
|
||||
|
||||
export default function IntelligentSearchPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [searchType, setSearchType] = useState<"all" | "user" | "traffic">("all")
|
||||
const [useAI, setUseAI] = useState(true)
|
||||
const [includeInsights, setIncludeInsights] = useState(true)
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [searchResults, setSearchResults] = useState<SearchResponse | null>(null)
|
||||
const [searchHistory, setSearchHistory] = useState<string[]>([])
|
||||
const [activeTab, setActiveTab] = useState("search")
|
||||
|
||||
// 执行搜索
|
||||
const performSearch = useCallback(
|
||||
async (query: string) => {
|
||||
if (!query.trim()) return
|
||||
|
||||
setIsSearching(true)
|
||||
try {
|
||||
const response = await fetch("/api/search", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query,
|
||||
type: searchType,
|
||||
options: {
|
||||
useAI,
|
||||
includeInsights,
|
||||
limit: 50,
|
||||
},
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("搜索失败")
|
||||
}
|
||||
|
||||
const data: SearchResponse = await response.json()
|
||||
setSearchResults(data)
|
||||
|
||||
// 添加到搜索历史
|
||||
setSearchHistory((prev) => {
|
||||
const newHistory = [query, ...prev.filter((h) => h !== query)].slice(0, 10)
|
||||
return newHistory
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("搜索错误:", error)
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
},
|
||||
[searchType, useAI, includeInsights],
|
||||
)
|
||||
|
||||
// 处理搜索输入
|
||||
const handleSearch = () => {
|
||||
performSearch(searchQuery)
|
||||
}
|
||||
|
||||
// 处理回车键搜索
|
||||
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearch()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取类型图标
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "user":
|
||||
return <Users className="h-4 w-4 text-blue-500" />
|
||||
case "traffic":
|
||||
return <TrendingUp className="h-4 w-4 text-green-500" />
|
||||
case "insight":
|
||||
return <Lightbulb className="h-4 w-4 text-purple-500" />
|
||||
default:
|
||||
return <Search className="h-4 w-4 text-gray-500" />
|
||||
}
|
||||
}
|
||||
|
||||
// 获取类型标签颜色
|
||||
const getTypeBadgeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case "user":
|
||||
return "bg-blue-100 text-blue-800"
|
||||
case "traffic":
|
||||
return "bg-green-100 text-green-800"
|
||||
case "insight":
|
||||
return "bg-purple-100 text-purple-800"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold flex items-center gap-2">
|
||||
<Brain className="h-8 w-8 text-purple-600" />
|
||||
智能搜索引擎
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">AI驱动的亚秒级数据搜索与洞察分析</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
导出结果
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<BarChart3 className="h-4 w-4 mr-2" />
|
||||
搜索分析
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 搜索配置卡片 */}
|
||||
<Card className="bg-gradient-to-r from-purple-50 to-blue-50 border-none shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
<div className="space-y-4">
|
||||
{/* 主搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="输入搜索关键词，支持自然语言查询..."
|
||||
className="pl-10 h-12 text-base border-2 border-purple-200 focus:border-purple-400"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
disabled={isSearching || !searchQuery.trim()}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
||||
size="sm"
|
||||
>
|
||||
{isSearching ? <RefreshCw className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索选项 */}
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label htmlFor="search-type">搜索类型:</Label>
|
||||
<select
|
||||
id="search-type"
|
||||
value={searchType}
|
||||
onChange={(e) => setSearchType(e.target.value as any)}
|
||||
className="px-3 py-1 border rounded-md text-sm"
|
||||
>
|
||||
<option value="all">全部</option>
|
||||
<option value="user">用户数据</option>
|
||||
<option value="traffic">流量关键词</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch id="use-ai" checked={useAI} onCheckedChange={setUseAI} />
|
||||
<Label htmlFor="use-ai" className="flex items-center gap-1">
|
||||
<Sparkles className="h-4 w-4 text-purple-500" />
|
||||
AI增强搜索
|
||||
<TooltipHelp content="启用AI增强搜索，提供更智能的查询理解和结果优化" />
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch id="include-insights" checked={includeInsights} onCheckedChange={setIncludeInsights} />
|
||||
<Label htmlFor="include-insights" className="flex items-center gap-1">
|
||||
<Brain className="h-4 w-4 text-blue-500" />
|
||||
包含AI洞察
|
||||
<TooltipHelp content="在搜索结果中包含AI生成的业务洞察和分析建议" />
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 搜索历史 */}
|
||||
{searchHistory.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">最近搜索:</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{searchHistory.slice(0, 5).map((query, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-xs bg-transparent"
|
||||
onClick={() => {
|
||||
setSearchQuery(query)
|
||||
performSearch(query)
|
||||
}}
|
||||
>
|
||||
{query}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 搜索结果 */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="search">搜索结果</TabsTrigger>
|
||||
<TabsTrigger value="insights">AI洞察</TabsTrigger>
|
||||
<TabsTrigger value="analytics">搜索分析</TabsTrigger>
|
||||
<TabsTrigger value="history">搜索历史</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 搜索结果标签页 */}
|
||||
<TabsContent value="search" className="space-y-4">
|
||||
{searchResults && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Search className="h-5 w-5" />
|
||||
搜索结果
|
||||
<Badge variant="outline">{searchResults.stats.totalResults} 个结果</Badge>
|
||||
</CardTitle>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Zap className="h-4 w-4" />
|
||||
查询耗时: {searchResults.stats.queryTime}ms
|
||||
</div>
|
||||
</div>
|
||||
{searchResults.stats.suggestions.length > 0 && (
|
||||
<CardDescription>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span>相关建议:</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{searchResults.stats.suggestions.map((suggestion, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 px-2 text-xs text-blue-600 hover:text-blue-800"
|
||||
onClick={() => {
|
||||
setSearchQuery(suggestion)
|
||||
performSearch(suggestion)
|
||||
}}
|
||||
>
|
||||
{suggestion}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardDescription>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{searchResults.results.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{searchResults.results.map((result) => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="flex items-start gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
{/* 类型图标 */}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
{result.type === "user" ? (
|
||||
<Avatar className="h-10 w-10">
|
||||
<div className="w-full h-full bg-blue-100 flex items-center justify-center">
|
||||
<Users className="h-5 w-5 text-blue-600" />
|
||||
</div>
|
||||
</Avatar>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
|
||||
{getTypeIcon(result.type)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 内容 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-semibold text-lg truncate">{result.title}</h3>
|
||||
<Badge className={getTypeBadgeColor(result.type)}>
|
||||
{result.type === "user" ? "用户" : result.type === "traffic" ? "流量" : "洞察"}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
相关性: {(result.relevanceScore * 100).toFixed(1)}%
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-2 line-clamp-2">{result.description}</p>
|
||||
|
||||
{/* 标签 */}
|
||||
<div className="flex flex-wrap gap-1 mb-2">
|
||||
{result.tags.slice(0, 5).map((tag, index) => (
|
||||
<Badge key={index} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 元数据 */}
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{new Date(result.updatedAt).toLocaleString("zh-CN")}
|
||||
</span>
|
||||
{result.metadata?.searchType && <span>类型: {result.metadata.searchType}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex-shrink-0">
|
||||
<Button variant="outline" size="sm">
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
查看详情
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 加载更多 */}
|
||||
{searchResults.hasMore && (
|
||||
<div className="text-center pt-4">
|
||||
<Button variant="outline">加载更多结果</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
|
||||
<h3 className="text-lg font-medium mb-2">未找到相关结果</h3>
|
||||
<p className="text-muted-foreground">尝试使用其他关键词或调整搜索条件</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 空状态 */}
|
||||
{!searchResults && (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<Brain className="h-16 w-16 mx-auto mb-4 text-purple-400" />
|
||||
<h3 className="text-xl font-medium mb-2">开始智能搜索</h3>
|
||||
<p className="text-muted-foreground mb-4">输入关键词开始搜索，支持自然语言查询和AI增强分析</p>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{["高价值用户", "流量趋势", "用户行为分析", "RFM分群"].map((example) => (
|
||||
<Button
|
||||
key={example}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSearchQuery(example)
|
||||
performSearch(example)
|
||||
}}
|
||||
>
|
||||
{example}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
{/* AI洞察标签页 */}
|
||||
<TabsContent value="insights" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-purple-600" />
|
||||
AI智能洞察
|
||||
<TooltipHelp content="基于搜索结果生成的AI洞察和业务建议" />
|
||||
</CardTitle>
|
||||
<CardDescription>AI分析搜索数据，提供深度业务洞察</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{searchResults?.results.filter((r) => r.type === "insight").length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{searchResults.results
|
||||
.filter((r) => r.type === "insight")
|
||||
.map((insight) => (
|
||||
<div key={insight.id} className="p-4 border rounded-lg bg-purple-50">
|
||||
<div className="flex items-start gap-3">
|
||||
<Lightbulb className="h-5 w-5 text-purple-600 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium mb-2">{insight.title}</h4>
|
||||
<p className="text-sm text-muted-foreground mb-2">{insight.description}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
置信度: {(insight.relevanceScore * 100).toFixed(1)}%
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(insight.updatedAt).toLocaleString("zh-CN")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Sparkles className="h-12 w-12 mx-auto mb-4 text-purple-400 opacity-50" />
|
||||
<p className="text-muted-foreground">执行搜索后，AI将为您生成智能洞察</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* 搜索分析标签页 */}
|
||||
<TabsContent value="analytics" className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">查询性能</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold mb-2">{searchResults?.stats.queryTime || 0}ms</div>
|
||||
<Progress value={Math.min((searchResults?.stats.queryTime || 0) / 10, 100)} className="h-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2">目标: <1000ms</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">结果质量</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold mb-2">
|
||||
{searchResults
|
||||
? Math.round(
|
||||
(searchResults.results.reduce((sum, r) => sum + r.relevanceScore, 0) /
|
||||
searchResults.results.length) *
|
||||
100,
|
||||
)
|
||||
: 0}
|
||||
%
|
||||
</div>
|
||||
<Progress
|
||||
value={
|
||||
searchResults
|
||||
? Math.round(
|
||||
(searchResults.results.reduce((sum, r) => sum + r.relevanceScore, 0) /
|
||||
searchResults.results.length) *
|
||||
100,
|
||||
)
|
||||
: 0
|
||||
}
|
||||
className="h-2"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-2">平均相关性评分</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base">AI增强率</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold mb-2">{useAI ? "100" : "0"}%</div>
|
||||
<Progress value={useAI ? 100 : 0} className="h-2" />
|
||||
<p className="text-xs text-muted-foreground mt-2">AI功能启用状态</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* 搜索历史标签页 */}
|
||||
<TabsContent value="history" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="h-5 w-5" />
|
||||
搜索历史
|
||||
</CardTitle>
|
||||
<CardDescription>您最近的搜索记录</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{searchHistory.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{searchHistory.map((query, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
|
||||
onClick={() => {
|
||||
setSearchQuery(query)
|
||||
performSearch(query)
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<span>{query}</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">
|
||||
重新搜索
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
|
||||
<p className="text-muted-foreground">暂无搜索历史</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user