feat: sync Sidebar and BottomNav, standardize user profile API
Align Sidebar & BottomNav menus, remove "Search", add user profile mock data, implement /api/users, add FilterDrawer, complete Section, ProfileHeader, MetricsRFM components Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
142
components/ai-assistant/create-task-dialog.tsx
Normal file
142
components/ai-assistant/create-task-dialog.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Brain } from 'lucide-react'
|
||||
import type { AnalysisTask, DatabaseInfo, ReportTemplate } from "@/types/ai-assistant"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { sanitizeText } from "@/lib/text-sanitize"
|
||||
|
||||
export default function CreateTaskDialog({
|
||||
databases,
|
||||
templates,
|
||||
onCreate,
|
||||
}: {
|
||||
databases: DatabaseInfo[]
|
||||
templates: ReportTemplate[]
|
||||
onCreate: (task: AnalysisTask) => void
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [name, setName] = useState("")
|
||||
const [database, setDatabase] = useState("")
|
||||
const [template, setTemplate] = useState("")
|
||||
const [customPrompt, setCustomPrompt] = useState("")
|
||||
const [includeCharts, setIncludeCharts] = useState(true)
|
||||
const [includeRecommendations, setIncludeRecommendations] = useState(true)
|
||||
|
||||
function submit() {
|
||||
const task: AnalysisTask = {
|
||||
id: `task_${Date.now()}`,
|
||||
name: name || "未命名任务",
|
||||
database: database || "未选择数据库",
|
||||
status: "pending",
|
||||
progress: 0,
|
||||
createdAt: new Date().toISOString(),
|
||||
description: sanitizeText(
|
||||
`${customPrompt}${
|
||||
includeCharts ? " | 包含图表" : ""
|
||||
}${includeRecommendations ? " | 包含AI建议" : ""}`,
|
||||
),
|
||||
}
|
||||
onCreate(task)
|
||||
setOpen(false)
|
||||
setName("")
|
||||
setDatabase("")
|
||||
setTemplate("")
|
||||
setCustomPrompt("")
|
||||
setIncludeCharts(true)
|
||||
setIncludeRecommendations(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="flex items-center gap-2">
|
||||
<Brain className="w-4 h-4" />
|
||||
创建分析任务
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>创建新的分析任务</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="taskName">任务名称</Label>
|
||||
<Input id="taskName" value={name} onChange={(e) => setName(e.target.value)} placeholder="输入任务名称" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="database">选择数据库</Label>
|
||||
<Select value={database} onValueChange={setDatabase}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择要分析的数据库" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{databases.map((db) => (
|
||||
<SelectItem key={db.id} value={db.name}>
|
||||
{db.name}（{db.type}）
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="template">报告模板</Label>
|
||||
<Select value={template} onValueChange={setTemplate}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择报告模板" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{templates.map((t) => (
|
||||
<SelectItem key={t.id} value={t.id}>
|
||||
{t.name} - {t.category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="customPrompt">自定义分析要求</Label>
|
||||
<Textarea
|
||||
id="customPrompt"
|
||||
rows={4}
|
||||
value={customPrompt}
|
||||
onChange={(e) => setCustomPrompt(e.target.value)}
|
||||
placeholder="描述希望 AI 重点分析的内容..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="includeCharts" checked={includeCharts} onCheckedChange={setIncludeCharts} />
|
||||
<Label htmlFor="includeCharts">包含图表和可视化</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="includeRecommendations"
|
||||
checked={includeRecommendations}
|
||||
onCheckedChange={setIncludeRecommendations}
|
||||
/>
|
||||
<Label htmlFor="includeRecommendations">包含 AI 建议与推荐</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={submit}>开始分析</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
40
components/ai-assistant/report-cards.tsx
Normal file
40
components/ai-assistant/report-cards.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sparkles, LineChart } from 'lucide-react'
|
||||
import type { ReportItem } from "@/types/ai-assistant"
|
||||
|
||||
export default function ReportCards({ items }: { items: ReportItem[] }) {
|
||||
return (
|
||||
<section className="space-y-3 mt-4">
|
||||
{items.map((it) => (
|
||||
<Card key={it.id} className="shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base flex items-center justify-between">
|
||||
<span className="line-clamp-1">{it.title}</span>
|
||||
<Badge variant="secondary" className="ml-2 shrink-0">
|
||||
<LineChart className="h-3.5 w-3.5 mr-1" />
|
||||
分析
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<p className="text-xs text-muted-foreground">{it.source}</p>
|
||||
<p className="text-sm leading-relaxed">{it.description}</p>
|
||||
<div className="flex items-center justify-between pt-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
更新时间：{new Date(it.updatedAt).toLocaleString("zh-CN")}
|
||||
</span>
|
||||
<Button size="sm" variant="outline" className="h-8">
|
||||
<Sparkles className="h-4 w-4 mr-1" />
|
||||
生成
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
87
components/ai-assistant/task-list.tsx
Normal file
87
components/ai-assistant/task-list.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import type { AnalysisTask } from "@/types/ai-assistant"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function statusBadgeClass(status: AnalysisTask["status"]) {
|
||||
const map: Record<AnalysisTask["status"], string> = {
|
||||
completed: "text-green-600 bg-green-50 border-green-200",
|
||||
running: "text-blue-600 bg-blue-50 border-blue-200",
|
||||
pending: "text-yellow-600 bg-yellow-50 border-yellow-200",
|
||||
failed: "text-red-600 bg-red-50 border-red-200",
|
||||
}
|
||||
return map[status]
|
||||
}
|
||||
|
||||
export default function TaskList({
|
||||
tasks,
|
||||
onTick,
|
||||
}: {
|
||||
tasks: AnalysisTask[]
|
||||
onTick?: () => void
|
||||
}) {
|
||||
// 进度模拟：外部可传递 onTick 驱动
|
||||
useEffect(() => {
|
||||
if (!onTick) return
|
||||
const timer = setInterval(() => onTick(), 1200)
|
||||
return () => clearInterval(timer)
|
||||
}, [onTick])
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||
{tasks.map((task) => (
|
||||
<Card key={task.id} className="border-2 hover:shadow-lg transition-all duration-200">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{task.name}</CardTitle>
|
||||
<Badge className={`${statusBadgeClass(task.status)} border`}>
|
||||
{task.status === "pending"
|
||||
? "等待中"
|
||||
: task.status === "running"
|
||||
? "分析中"
|
||||
: task.status === "completed"
|
||||
? "已完成"
|
||||
: "失败"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">数据源: {task.database}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{task.description && <p className="text-sm text-gray-700">{task.description}</p>}
|
||||
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5" aria-label="任务进度">
|
||||
<div
|
||||
className={`h-2.5 rounded-full ${
|
||||
task.status === "completed"
|
||||
? "bg-green-600"
|
||||
: task.status === "running"
|
||||
? "bg-blue-600"
|
||||
: task.status === "failed"
|
||||
? "bg-red-600"
|
||||
: "bg-gray-400"
|
||||
}`}
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-500">
|
||||
创建于 {new Date(task.createdAt).toLocaleString("zh-CN")}
|
||||
{task.completedAt && <> · 完成于 {new Date(task.completedAt).toLocaleString("zh-CN")}</>}
|
||||
</div>
|
||||
|
||||
{task.reportUrl && (
|
||||
<div className="flex justify-end">
|
||||
<Button asChild variant="outline" size="sm" aria-label="查看报告">
|
||||
<a href={task.reportUrl}>查看报告</a>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user