refactor: overhaul UI for streamlined user experience
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
786
app/ai-assistant/page.tsx
Normal file
786
app/ai-assistant/page.tsx
Normal file
@@ -0,0 +1,786 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Sparkles, BarChart, TrendingUp, Users, Mail, Clock, Download, ChevronRight } from "lucide-react"
|
||||
|
||||
export default function AIAssistantPage() {
|
||||
const [activeTab, setActiveTab] = useState("data-analysis")
|
||||
const [selectedUserGroup, setSelectedUserGroup] = useState("")
|
||||
const [isUserGroupDialogOpen, setIsUserGroupDialogOpen] = useState(false)
|
||||
const [emailAddress, setEmailAddress] = useState("")
|
||||
const [scheduleReport, setScheduleReport] = useState(false)
|
||||
|
||||
// 分析流程步骤
|
||||
const [analysisStep, setAnalysisStep] = useState(1)
|
||||
const [analysisType, setAnalysisType] = useState("")
|
||||
|
||||
// 营销策略步骤
|
||||
const [strategyStep, setStrategyStep] = useState(1)
|
||||
const [strategyType, setStrategyType] = useState("")
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-6 space-y-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">AI 智能助手</h1>
|
||||
<p className="text-muted-foreground">利用AI技术分析数据并提供营销策略</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid w-full max-w-md grid-cols-2">
|
||||
<TabsTrigger value="data-analysis">数据分析</TabsTrigger>
|
||||
<TabsTrigger value="marketing-strategy">营销策略</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="data-analysis" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>AI 数据分析</CardTitle>
|
||||
<CardDescription>使用AI分析用户数据并生成洞察报告</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 第1步：选择用户分群 */}
|
||||
<div className={`space-y-4 ${analysisStep !== 1 ? "opacity-60" : ""}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
1
|
||||
</div>
|
||||
选择用户分群
|
||||
</h3>
|
||||
{analysisStep > 1 ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setAnalysisStep(1)}>
|
||||
修改
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
选择用户分群
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedUserGroup && (
|
||||
<div className="p-4 border rounded-lg bg-muted/50">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-muted-foreground" />
|
||||
<span className="font-medium">已选择用户分群：</span>
|
||||
<Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
|
||||
</div>
|
||||
{analysisStep === 1 && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setAnalysisStep(2)
|
||||
}}
|
||||
disabled={!selectedUserGroup}
|
||||
>
|
||||
下一步 <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 第2步：选择分析类型 */}
|
||||
<div
|
||||
className={`space-y-4 ${analysisStep !== 2 ? (analysisStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
2
|
||||
</div>
|
||||
选择分析类型
|
||||
</h3>
|
||||
{analysisStep > 2 && (
|
||||
<Button variant="outline" size="sm" onClick={() => setAnalysisStep(2)}>
|
||||
修改
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{analysisStep >= 2 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "behavior" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setAnalysisType("behavior")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">用户行为分析</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
分析用户的行为模式、偏好和习惯
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{analysisType === "behavior" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "value" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setAnalysisType("value")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">用户估值分析</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">分析用户的价值分布和潜在价值</CardContent>
|
||||
<CardFooter>
|
||||
{analysisType === "value" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "churn" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setAnalysisType("churn")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">用户流失预警</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
预测可能流失的用户并提供挽留建议
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{analysisType === "churn" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{analysisStep === 2 && analysisType && (
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setAnalysisStep(3)}>
|
||||
下一步 <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 第3步：分析参数设置 */}
|
||||
<div
|
||||
className={`space-y-4 ${analysisStep !== 3 ? (analysisStep > 3 ? "opacity-60" : "opacity-40") : ""}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
3
|
||||
</div>
|
||||
分析参数设置
|
||||
</h3>
|
||||
{analysisStep > 3 && (
|
||||
<Button variant="outline" size="sm" onClick={() => setAnalysisStep(3)}>
|
||||
修改
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{analysisStep >= 3 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time-range">时间范围</Label>
|
||||
<Select defaultValue="30days">
|
||||
<SelectTrigger id="time-range">
|
||||
<SelectValue placeholder="选择时间范围" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7days">最近7天</SelectItem>
|
||||
<SelectItem value="30days">最近30天</SelectItem>
|
||||
<SelectItem value="90days">最近90天</SelectItem>
|
||||
<SelectItem value="custom">自定义范围</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="analysis-depth">分析深度</Label>
|
||||
<Select defaultValue="medium">
|
||||
<SelectTrigger id="analysis-depth">
|
||||
<SelectValue placeholder="选择分析深度" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="basic">基础分析</SelectItem>
|
||||
<SelectItem value="medium">中等深度</SelectItem>
|
||||
<SelectItem value="deep">深度分析</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{analysisStep === 3 && (
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setAnalysisStep(4)}>
|
||||
下一步 <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 第4步：报告设置 */}
|
||||
<div className={`space-y-4 ${analysisStep !== 4 ? "opacity-40" : ""}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
4
|
||||
</div>
|
||||
报告设置
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{analysisStep >= 4 && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Label htmlFor="email">发送分析报告至</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="输入邮箱地址"
|
||||
value={emailAddress}
|
||||
onChange={(e) => setEmailAddress(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="schedule-report" checked={scheduleReport} onCheckedChange={setScheduleReport} />
|
||||
<Label htmlFor="schedule-report">定期发送报告</Label>
|
||||
</div>
|
||||
{scheduleReport && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="schedule-frequency">发送频率</Label>
|
||||
<Select defaultValue="weekly">
|
||||
<SelectTrigger id="schedule-frequency">
|
||||
<SelectValue placeholder="选择发送频率" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="daily">每日</SelectItem>
|
||||
<SelectItem value="weekly">每周</SelectItem>
|
||||
<SelectItem value="monthly">每月</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="schedule-time">发送时间</Label>
|
||||
<Select defaultValue="morning">
|
||||
<SelectTrigger id="schedule-time">
|
||||
<SelectValue placeholder="选择发送时间" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="morning">上午 9:00</SelectItem>
|
||||
<SelectItem value="noon">中午 12:00</SelectItem>
|
||||
<SelectItem value="evening">下午 6:00</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setAnalysisStep(1)
|
||||
setAnalysisType("")
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button disabled={analysisStep < 4 || !emailAddress}>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
开始分析
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>分析结果预览</CardTitle>
|
||||
<CardDescription>AI生成的数据分析结果</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-96 flex items-center justify-center">
|
||||
{selectedUserGroup && analysisStep === 4 ? (
|
||||
<div className="text-center space-y-4">
|
||||
<BarChart className="h-16 w-16 mx-auto text-primary" />
|
||||
<p className="text-lg font-medium">分析结果将在这里显示</p>
|
||||
<p className="text-muted-foreground">点击"开始分析"按钮生成分析报告</p>
|
||||
<div className="flex justify-center gap-2 pt-4">
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
下载报告
|
||||
</Button>
|
||||
<Button>
|
||||
<Mail className="mr-2 h-4 w-4" />
|
||||
发送报告
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-muted-foreground">
|
||||
<Users className="h-16 w-16 mx-auto mb-4" />
|
||||
<p className="text-lg">请完成所有分析步骤</p>
|
||||
<Button variant="outline" className="mt-4" onClick={() => setIsUserGroupDialogOpen(true)}>
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
开始设置
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="marketing-strategy" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>AI 营销策略</CardTitle>
|
||||
<CardDescription>使用AI生成针对性的营销策略和建议</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 第1步：选择目标用户分群 */}
|
||||
<div className={`space-y-4 ${strategyStep !== 1 ? "opacity-60" : ""}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
1
|
||||
</div>
|
||||
选择目标用户分群
|
||||
</h3>
|
||||
{strategyStep > 1 ? (
|
||||
<Button variant="outline" size="sm" onClick={() => setStrategyStep(1)}>
|
||||
修改
|
||||
</Button>
|
||||
) : (
|
||||
<Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
选择用户分群
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedUserGroup && (
|
||||
<div className="p-4 border rounded-lg bg-muted/50">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-muted-foreground" />
|
||||
<span className="font-medium">已选择用户分群：</span>
|
||||
<Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
|
||||
</div>
|
||||
{strategyStep === 1 && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setStrategyStep(2)
|
||||
}}
|
||||
disabled={!selectedUserGroup}
|
||||
>
|
||||
下一步 <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 第2步：选择策略类型 */}
|
||||
<div
|
||||
className={`space-y-4 ${strategyStep !== 2 ? (strategyStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
2
|
||||
</div>
|
||||
选择策略类型
|
||||
</h3>
|
||||
{strategyStep > 2 && (
|
||||
<Button variant="outline" size="sm" onClick={() => setStrategyStep(2)}>
|
||||
修改
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{strategyStep >= 2 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "sales" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setStrategyType("sales")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">销售预测</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
预测未来销售趋势并提供增长建议
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{strategyType === "sales" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "reach" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setStrategyType("reach")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">用户触达策略</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
生成针对性的用户触达和转化策略
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{strategyType === "reach" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card
|
||||
className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "content" ? "border-primary" : "border-transparent"}`}
|
||||
onClick={() => setStrategyType("content")}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">内容营销策略</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
生成针对目标用户的内容营销策略
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{strategyType === "content" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{strategyStep === 2 && strategyType && (
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={() => setStrategyStep(3)}>
|
||||
下一步 <ChevronRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 第3步：策略参数设置 */}
|
||||
<div className={`space-y-4 ${strategyStep !== 3 ? "opacity-40" : ""}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-medium flex items-center">
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
|
||||
3
|
||||
</div>
|
||||
策略参数设置
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{strategyStep >= 3 && (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="strategy-goal">营销目标</Label>
|
||||
<Select defaultValue="conversion">
|
||||
<SelectTrigger id="strategy-goal">
|
||||
<SelectValue placeholder="选择营销目标" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="awareness">提升品牌认知</SelectItem>
|
||||
<SelectItem value="engagement">增加用户互动</SelectItem>
|
||||
<SelectItem value="conversion">提高转化率</SelectItem>
|
||||
<SelectItem value="retention">提升用户留存</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="strategy-budget">预算范围</Label>
|
||||
<Select defaultValue="medium">
|
||||
<SelectTrigger id="strategy-budget">
|
||||
<SelectValue placeholder="选择预算范围" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="low">低预算</SelectItem>
|
||||
<SelectItem value="medium">中等预算</SelectItem>
|
||||
<SelectItem value="high">高预算</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="strategy-notes">补充说明</Label>
|
||||
<Textarea
|
||||
id="strategy-notes"
|
||||
placeholder="请输入任何补充说明或特殊要求..."
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Label htmlFor="email-strategy">发送策略报告至</Label>
|
||||
<Input
|
||||
id="email-strategy"
|
||||
type="email"
|
||||
placeholder="输入邮箱地址"
|
||||
value={emailAddress}
|
||||
onChange={(e) => setEmailAddress(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="schedule-strategy" checked={scheduleReport} onCheckedChange={setScheduleReport} />
|
||||
<Label htmlFor="schedule-strategy">定期更新策略</Label>
|
||||
</div>
|
||||
{scheduleReport && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="update-frequency">更新频率</Label>
|
||||
<Select defaultValue="monthly">
|
||||
<SelectTrigger id="update-frequency">
|
||||
<SelectValue placeholder="选择更新频率" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="weekly">每周</SelectItem>
|
||||
<SelectItem value="biweekly">每两周</SelectItem>
|
||||
<SelectItem value="monthly">每月</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setStrategyStep(1)
|
||||
setStrategyType("")
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button disabled={strategyStep < 3 || !emailAddress}>
|
||||
<Sparkles className="mr-2 h-4 w-4" />
|
||||
生成策略
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>策略建议预览</CardTitle>
|
||||
<CardDescription>AI生成的营销策略建议</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-96 flex items-center justify-center">
|
||||
{selectedUserGroup && strategyStep === 3 ? (
|
||||
<div className="text-center space-y-4">
|
||||
<TrendingUp className="h-16 w-16 mx-auto text-primary" />
|
||||
<p className="text-lg font-medium">策略建议将在这里显示</p>
|
||||
<p className="text-muted-foreground">点击"生成策略"按钮生成营销策略</p>
|
||||
<div className="flex justify-center gap-2 pt-4">
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
下载策略
|
||||
</Button>
|
||||
<Button>
|
||||
<Mail className="mr-2 h-4 w-4" />
|
||||
发送策略
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-muted-foreground">
|
||||
<Users className="h-16 w-16 mx-auto mb-4" />
|
||||
<p className="text-lg">请完成所有策略步骤</p>
|
||||
<Button variant="outline" className="mt-4" onClick={() => setIsUserGroupDialogOpen(true)}>
|
||||
<Users className="mr-2 h-4 w-4" />
|
||||
开始设置
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<UserGroupSelectionDialog
|
||||
isOpen={isUserGroupDialogOpen}
|
||||
setIsOpen={setIsUserGroupDialogOpen}
|
||||
onSelect={setSelectedUserGroup}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 用户分群选择对话框
|
||||
function UserGroupSelectionDialog({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
onSelect,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
setIsOpen: (open: boolean) => void
|
||||
onSelect: (group: string) => void
|
||||
}) {
|
||||
// 模拟用户分群数据
|
||||
const userGroups = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值用户",
|
||||
description: "消费能力强，购买频率高的用户",
|
||||
count: 12456,
|
||||
category: "用户资产",
|
||||
lastUpdated: "2023-07-20",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "活跃用户",
|
||||
description: "近30天内有活动的用户",
|
||||
count: 45678,
|
||||
category: "用户资产",
|
||||
lastUpdated: "2023-07-20",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "地摊商户",
|
||||
description: "从事地摊相关业务的用户",
|
||||
count: 8765,
|
||||
category: "地摊相关",
|
||||
lastUpdated: "2023-07-19",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "樊登读书会员",
|
||||
description: "樊登读书平台的会员用户",
|
||||
count: 15678,
|
||||
category: "樊登读书",
|
||||
lastUpdated: "2023-07-18",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "魔兽玩家",
|
||||
description: "魔兽世界游戏的活跃玩家",
|
||||
count: 23456,
|
||||
category: "魔兽世界",
|
||||
lastUpdated: "2023-07-17",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "流失风险用户",
|
||||
description: "有流失风险的高价值用户",
|
||||
count: 5678,
|
||||
category: "用户资产",
|
||||
lastUpdated: "2023-07-16",
|
||||
},
|
||||
]
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [selectedCategory, setSelectedCategory] = useState("all")
|
||||
|
||||
// 过滤用户分群
|
||||
const filteredGroups = userGroups.filter((group) => {
|
||||
const matchesSearch =
|
||||
group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
group.description.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
|
||||
const matchesCategory = selectedCategory === "all" || group.category === selectedCategory
|
||||
|
||||
return matchesSearch && matchesCategory
|
||||
})
|
||||
|
||||
// 获取所有分类
|
||||
const categories = ["all", ...new Set(userGroups.map((group) => group.category))]
|
||||
|
||||
const handleSelect = (group: string) => {
|
||||
onSelect(group)
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>选择用户分群</DialogTitle>
|
||||
<DialogDescription>从用户画像中选择要分析的用户分群</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="py-4 space-y-4">
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Input
|
||||
placeholder="搜索用户分群..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
|
||||
<SelectTrigger className="w-full md:w-[180px]">
|
||||
<SelectValue placeholder="选择场景分类" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category} value={category}>
|
||||
{category === "all" ? "所有场景" : category}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[300px] overflow-y-auto space-y-2">
|
||||
{filteredGroups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
className="p-3 border rounded-lg hover:bg-muted/50 cursor-pointer"
|
||||
onClick={() => handleSelect(group.name)}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="font-medium">{group.name}</div>
|
||||
<div className="text-sm text-muted-foreground">{group.description}</div>
|
||||
</div>
|
||||
<Badge className="bg-blue-100 text-blue-800">{group.category}</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-3 w-3 mr-1" />
|
||||
{group.count.toLocaleString()} 用户
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="h-3 w-3 mr-1" />
|
||||
更新于 {group.lastUpdated}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={() => setIsOpen(false)}>创建新分群</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user