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
219
components/user-profile/user-profile-analytics.tsx
Normal file
219
components/user-profile/user-profile-analytics.tsx
Normal file
@@ -0,0 +1,219 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { LineChart, BarChart } from "@/components/charts"
|
||||
import { Download, ChevronDown, ChevronRight } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
|
||||
export function UserProfileAnalytics() {
|
||||
const [openSections, setOpenSections] = useState({
|
||||
valueAnalysis: true,
|
||||
behaviorAnalysis: false,
|
||||
lifecycleAnalysis: false,
|
||||
conversionAnalysis: false,
|
||||
})
|
||||
|
||||
const toggleSection = (section) => {
|
||||
setOpenSections((prev) => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">用户画像深度分析</h2>
|
||||
<div className="flex space-x-2">
|
||||
<Select defaultValue="30days">
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<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>
|
||||
<Button variant="outline">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
导出数据
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="value">
|
||||
<TabsList>
|
||||
<TabsTrigger value="value">价值分析</TabsTrigger>
|
||||
<TabsTrigger value="behavior">行为分析</TabsTrigger>
|
||||
<TabsTrigger value="lifecycle">生命周期</TabsTrigger>
|
||||
<TabsTrigger value="conversion">转化路径</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="value" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.valueAnalysis} onOpenChange={() => toggleSection("valueAnalysis")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户价值分布趋势</CardTitle>
|
||||
{openSections.valueAnalysis ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<LineChart
|
||||
data={{
|
||||
labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
datasets: [
|
||||
{
|
||||
label: "高价值用户",
|
||||
data: [1200, 1350, 1500, 1680, 1850, 2100, 2450],
|
||||
borderColor: "rgba(16, 185, 129, 0.7)",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
},
|
||||
{
|
||||
label: "中价值用户",
|
||||
data: [5600, 6200, 6800, 7500, 8200, 9000, 9800],
|
||||
borderColor: "rgba(59, 130, 246, 0.7)",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
{
|
||||
label: "低价值用户",
|
||||
data: [8200, 8500, 8900, 9300, 9800, 10500, 11200],
|
||||
borderColor: "rgba(156, 163, 175, 0.7)",
|
||||
backgroundColor: "rgba(156, 163, 175, 0.1)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
<TabsContent value="behavior" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.behaviorAnalysis} onOpenChange={() => toggleSection("behaviorAnalysis")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户行为轨迹分析</CardTitle>
|
||||
{openSections.behaviorAnalysis ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<LineChart
|
||||
data={{
|
||||
labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
|
||||
datasets: [
|
||||
{
|
||||
label: "高价值用户",
|
||||
data: [100, 95, 85, 80, 78, 65, 60],
|
||||
borderColor: "rgba(16, 185, 129, 0.7)",
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
},
|
||||
{
|
||||
label: "中价值用户",
|
||||
data: [100, 85, 65, 55, 50, 35, 25],
|
||||
borderColor: "rgba(59, 130, 246, 0.7)",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
{
|
||||
label: "低价值用户",
|
||||
data: [100, 70, 40, 25, 20, 10, 5],
|
||||
borderColor: "rgba(156, 163, 175, 0.7)",
|
||||
backgroundColor: "rgba(156, 163, 175, 0.1)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
<TabsContent value="lifecycle" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.lifecycleAnalysis} onOpenChange={() => toggleSection("lifecycleAnalysis")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户生命周期分布</CardTitle>
|
||||
{openSections.lifecycleAnalysis ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={{
|
||||
labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
|
||||
datasets: [
|
||||
{
|
||||
label: "用户数量",
|
||||
data: [12500, 8600, 6200, 4800, 2450],
|
||||
backgroundColor: "rgba(59, 130, 246, 0.7)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
<TabsContent value="conversion" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.conversionAnalysis} onOpenChange={() => toggleSection("conversionAnalysis")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户转化路径分析</CardTitle>
|
||||
{openSections.conversionAnalysis ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<LineChart
|
||||
data={{
|
||||
labels: ["访问", "注册", "浏览产品", "加入购物车", "下单", "支付", "复购"],
|
||||
datasets: [
|
||||
{
|
||||
label: "转化率",
|
||||
data: [100, 45, 38, 25, 18, 15, 8],
|
||||
borderColor: "rgba(59, 130, 246, 0.7)",
|
||||
backgroundColor: "rgba(59, 130, 246, 0.1)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
319
components/user-profile/user-profile-overview.tsx
Normal file
319
components/user-profile/user-profile-overview.tsx
Normal file
@@ -0,0 +1,319 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { PieChart, BarChart } from "@/components/charts"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
import { ChevronDown, ChevronRight } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
|
||||
export function UserProfileOverview() {
|
||||
const [openSections, setOpenSections] = useState({
|
||||
gender: true,
|
||||
age: true,
|
||||
occupation: false,
|
||||
income: false,
|
||||
region: false,
|
||||
device: false,
|
||||
activity: false,
|
||||
interest: false,
|
||||
})
|
||||
|
||||
const toggleSection = (section) => {
|
||||
setOpenSections((prev) => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">用户画像概览</h2>
|
||||
<div className="flex space-x-2">
|
||||
<Select defaultValue="7days">
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<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>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Collapsible open={openSections.gender} onOpenChange={() => toggleSection("gender")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户性别分布</CardTitle>
|
||||
{openSections.gender ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<PieChart
|
||||
data={{
|
||||
labels: ["男性", "女性", "未知"],
|
||||
datasets: [
|
||||
{
|
||||
data: [45, 52, 3],
|
||||
backgroundColor: [
|
||||
"rgba(59, 130, 246, 0.7)",
|
||||
"rgba(236, 72, 153, 0.7)",
|
||||
"rgba(156, 163, 175, 0.7)",
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<Collapsible open={openSections.age} onOpenChange={() => toggleSection("age")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">用户年龄分布</CardTitle>
|
||||
{openSections.age ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={{
|
||||
labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
|
||||
datasets: [
|
||||
{
|
||||
label: "用户数量",
|
||||
data: [1200, 5400, 8900, 5600, 2800, 620],
|
||||
backgroundColor: "rgba(59, 130, 246, 0.7)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="demographic">
|
||||
<TabsList>
|
||||
<TabsTrigger value="demographic">人口统计</TabsTrigger>
|
||||
<TabsTrigger value="geographic">地理分布</TabsTrigger>
|
||||
<TabsTrigger value="behavior">行为特征</TabsTrigger>
|
||||
<TabsTrigger value="interest">兴趣爱好</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="demographic" className="space-y-4 pt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Collapsible open={openSections.occupation} onOpenChange={() => toggleSection("occupation")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">职业分布</CardTitle>
|
||||
{openSections.occupation ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<PieChart
|
||||
data={{
|
||||
labels: ["学生", "企业员工", "自由职业", "企业管理者", "公务员", "其他"],
|
||||
datasets: [
|
||||
{
|
||||
data: [15, 35, 20, 18, 7, 5],
|
||||
backgroundColor: [
|
||||
"rgba(59, 130, 246, 0.7)",
|
||||
"rgba(16, 185, 129, 0.7)",
|
||||
"rgba(249, 115, 22, 0.7)",
|
||||
"rgba(139, 92, 246, 0.7)",
|
||||
"rgba(236, 72, 153, 0.7)",
|
||||
"rgba(156, 163, 175, 0.7)",
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<Collapsible open={openSections.income} onOpenChange={() => toggleSection("income")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">收入水平</CardTitle>
|
||||
{openSections.income ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<PieChart
|
||||
data={{
|
||||
labels: ["5千以下", "5千-1万", "1万-2万", "2万-3万", "3万以上"],
|
||||
datasets: [
|
||||
{
|
||||
data: [10, 25, 35, 20, 10],
|
||||
backgroundColor: [
|
||||
"rgba(59, 130, 246, 0.7)",
|
||||
"rgba(16, 185, 129, 0.7)",
|
||||
"rgba(249, 115, 22, 0.7)",
|
||||
"rgba(139, 92, 246, 0.7)",
|
||||
"rgba(236, 72, 153, 0.7)",
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="geographic" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.region} onOpenChange={() => toggleSection("region")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">地区分布</CardTitle>
|
||||
{openSections.region ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={{
|
||||
labels: ["北京", "上海", "广东", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"],
|
||||
datasets: [
|
||||
{
|
||||
label: "用户数量",
|
||||
data: [3200, 2800, 4500, 2100, 1900, 1600, 1400, 1200, 1100, 900],
|
||||
backgroundColor: "rgba(59, 130, 246, 0.7)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="behavior" className="space-y-4 pt-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Collapsible open={openSections.activity} onOpenChange={() => toggleSection("activity")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">活跃时段</CardTitle>
|
||||
{openSections.activity ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={{
|
||||
labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
|
||||
datasets: [
|
||||
{
|
||||
label: "活跃用户数",
|
||||
data: [800, 400, 2500, 5800, 4200, 3800, 7500, 6200],
|
||||
backgroundColor: "rgba(59, 130, 246, 0.7)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<Collapsible open={openSections.device} onOpenChange={() => toggleSection("device")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">使用设备</CardTitle>
|
||||
{openSections.device ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<PieChart
|
||||
data={{
|
||||
labels: ["iOS", "Android", "Windows", "MacOS", "其他"],
|
||||
datasets: [
|
||||
{
|
||||
data: [42, 45, 8, 4, 1],
|
||||
backgroundColor: [
|
||||
"rgba(59, 130, 246, 0.7)",
|
||||
"rgba(16, 185, 129, 0.7)",
|
||||
"rgba(249, 115, 22, 0.7)",
|
||||
"rgba(139, 92, 246, 0.7)",
|
||||
"rgba(156, 163, 175, 0.7)",
|
||||
],
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={250}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="interest" className="space-y-4 pt-4">
|
||||
<Collapsible open={openSections.interest} onOpenChange={() => toggleSection("interest")}>
|
||||
<Card className="border shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full">
|
||||
<CardTitle className="text-base font-medium">兴趣标签分布</CardTitle>
|
||||
{openSections.interest ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent>
|
||||
<BarChart
|
||||
data={{
|
||||
labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
|
||||
datasets: [
|
||||
{
|
||||
label: "用户数量",
|
||||
data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
|
||||
backgroundColor: "rgba(59, 130, 246, 0.7)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
height={300}
|
||||
/>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
210
components/user-profile/user-profile-segments.tsx
Normal file
210
components/user-profile/user-profile-segments.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { PlusCircle, Search, Users, BarChart2, Edit, Trash2, ChevronDown, ChevronRight } from "lucide-react"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
|
||||
interface UserSegment {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
userCount: number
|
||||
criteria: string[]
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
status: "active" | "draft"
|
||||
}
|
||||
|
||||
export function UserProfileSegments() {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [openSections, setOpenSections] = useState({
|
||||
segmentList: true,
|
||||
})
|
||||
|
||||
const toggleSection = (section) => {
|
||||
setOpenSections((prev) => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}))
|
||||
}
|
||||
|
||||
// 模拟数据
|
||||
const segments: UserSegment[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值用户",
|
||||
description: "消费金额高且频次高的用户群体",
|
||||
userCount: 2450,
|
||||
criteria: ["消费金额>5000", "消费频次>10次/月", "活跃度>80%"],
|
||||
createdAt: new Date(2023, 5, 15),
|
||||
updatedAt: new Date(2023, 6, 20),
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "新注册用户",
|
||||
description: "最近30天内注册的新用户",
|
||||
userCount: 1254,
|
||||
criteria: ["注册时间<30天"],
|
||||
createdAt: new Date(2023, 4, 10),
|
||||
updatedAt: new Date(2023, 6, 18),
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "流失风险用户",
|
||||
description: "最近活跃度下降的用户",
|
||||
userCount: 876,
|
||||
criteria: ["最近登录>15天", "活跃度下降>50%"],
|
||||
createdAt: new Date(2023, 3, 5),
|
||||
updatedAt: new Date(2023, 5, 25),
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "企业客户",
|
||||
description: "企业类型的客户群体",
|
||||
userCount: 542,
|
||||
criteria: ["用户类型=企业", "员工数>50人"],
|
||||
createdAt: new Date(2023, 2, 20),
|
||||
updatedAt: new Date(2023, 6, 19),
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "潜在高转化用户",
|
||||
description: "浏览行为活跃但未转化的用户",
|
||||
userCount: 1320,
|
||||
criteria: ["浏览次数>20次/周", "未购买"],
|
||||
createdAt: new Date(2023, 1, 15),
|
||||
updatedAt: new Date(2023, 4, 10),
|
||||
status: "draft",
|
||||
},
|
||||
]
|
||||
|
||||
// 过滤分群
|
||||
const filteredSegments = segments.filter(
|
||||
(segment) =>
|
||||
segment.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
segment.description.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">用户分群管理</h2>
|
||||
<Button>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
创建新分群
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Collapsible open={openSections.segmentList} onOpenChange={() => toggleSection("segmentList")}>
|
||||
<div className="border rounded-md p-4">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
|
||||
<h3 className="text-lg font-medium">分群列表</h3>
|
||||
{openSections.segmentList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex space-x-2">
|
||||
<Select defaultValue="all">
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="active">已激活</SelectItem>
|
||||
<SelectItem value="draft">草稿</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜索分群..."
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>分群名称</TableHead>
|
||||
<TableHead>描述</TableHead>
|
||||
<TableHead>用户数量</TableHead>
|
||||
<TableHead>筛选条件</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
<TableHead>更新时间</TableHead>
|
||||
<TableHead>状态</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredSegments.map((segment) => (
|
||||
<TableRow key={segment.id}>
|
||||
<TableCell className="font-medium">{segment.name}</TableCell>
|
||||
<TableCell>{segment.description}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 mr-1 text-muted-foreground" />
|
||||
{segment.userCount.toLocaleString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{segment.criteria.map((criterion) => (
|
||||
<Badge key={criterion} variant="outline" className="text-xs">
|
||||
{criterion}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{formatDate(segment.createdAt)}</TableCell>
|
||||
<TableCell>{formatDate(segment.updatedAt)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={segment.status === "active" ? "default" : "secondary"}>
|
||||
{segment.status === "active" ? "已激活" : "草稿"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<BarChart2 className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-red-500">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
217
components/user-profile/user-profile-tags.tsx
Normal file
217
components/user-profile/user-profile-tags.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { PlusCircle, Search, Tag, Edit, Trash2, Users, ChevronDown, ChevronRight } from "lucide-react"
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
||||
|
||||
interface UserTag {
|
||||
id: string
|
||||
name: string
|
||||
category: string
|
||||
description: string
|
||||
userCount: number
|
||||
source: string
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
}
|
||||
|
||||
export function UserProfileTags() {
|
||||
const [searchQuery, setSearchQuery] = useState("")
|
||||
const [openSections, setOpenSections] = useState({
|
||||
tagList: true,
|
||||
})
|
||||
|
||||
const toggleSection = (section) => {
|
||||
setOpenSections((prev) => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}))
|
||||
}
|
||||
|
||||
// 模拟数据
|
||||
const tags: UserTag[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "高价值客户",
|
||||
category: "价值分类",
|
||||
description: "消费金额高且频次高的用户",
|
||||
userCount: 2450,
|
||||
source: "系统生成",
|
||||
createdAt: new Date(2023, 5, 15),
|
||||
updatedAt: new Date(2023, 6, 20),
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "数据分析师",
|
||||
category: "职业角色",
|
||||
description: "从事数据分析工作的用户",
|
||||
userCount: 980,
|
||||
source: "流量词映射",
|
||||
createdAt: new Date(2023, 4, 10),
|
||||
updatedAt: new Date(2023, 6, 18),
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "营销决策者",
|
||||
category: "职业角色",
|
||||
description: "负责营销决策的管理人员",
|
||||
userCount: 645,
|
||||
source: "流量词映射",
|
||||
createdAt: new Date(2023, 3, 5),
|
||||
updatedAt: new Date(2023, 5, 25),
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "技术爱好者",
|
||||
category: "兴趣爱好",
|
||||
description: "对技术有浓厚兴趣的用户",
|
||||
userCount: 1520,
|
||||
source: "行为分析",
|
||||
createdAt: new Date(2023, 2, 20),
|
||||
updatedAt: new Date(2023, 6, 19),
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "活跃用户",
|
||||
category: "活跃度",
|
||||
description: "每周登录3次以上的用户",
|
||||
userCount: 8600,
|
||||
source: "系统生成",
|
||||
createdAt: new Date(2023, 1, 15),
|
||||
updatedAt: new Date(2023, 4, 10),
|
||||
},
|
||||
]
|
||||
|
||||
// 过滤标签
|
||||
const filteredTags = tags.filter(
|
||||
(tag) =>
|
||||
tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
tag.description.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
)
|
||||
|
||||
const formatDate = (date: Date) => {
|
||||
return date.toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold">用户标签体系</h2>
|
||||
<Button>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
创建新标签
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Collapsible open={openSections.tagList} onOpenChange={() => toggleSection("tagList")}>
|
||||
<div className="border rounded-md p-4">
|
||||
<CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
|
||||
<h3 className="text-lg font-medium">标签列表</h3>
|
||||
{openSections.tagList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex space-x-2">
|
||||
<Select defaultValue="all">
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="标签分类" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部<EFBFBD><EFBFBD><EFBFBD>类</SelectItem>
|
||||
<SelectItem value="value">价值分类</SelectItem>
|
||||
<SelectItem value="role">职业角色</SelectItem>
|
||||
<SelectItem value="interest">兴趣爱好</SelectItem>
|
||||
<SelectItem value="activity">活跃度</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select defaultValue="all">
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="标签来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部来源</SelectItem>
|
||||
<SelectItem value="system">系统生成</SelectItem>
|
||||
<SelectItem value="keyword">流量词映射</SelectItem>
|
||||
<SelectItem value="behavior">行为分析</SelectItem>
|
||||
<SelectItem value="manual">手动创建</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="搜索标签..."
|
||||
className="pl-8"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>标签名称</TableHead>
|
||||
<TableHead>分类</TableHead>
|
||||
<TableHead>描述</TableHead>
|
||||
<TableHead>用户数量</TableHead>
|
||||
<TableHead>来源</TableHead>
|
||||
<TableHead>创建时间</TableHead>
|
||||
<TableHead>更新时间</TableHead>
|
||||
<TableHead className="text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredTags.map((tag) => (
|
||||
<TableRow key={tag.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<Tag className="h-4 w-4 mr-2 text-muted-foreground" />
|
||||
<span className="font-medium">{tag.name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{tag.category}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{tag.description}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 mr-1 text-muted-foreground" />
|
||||
{tag.userCount.toLocaleString()}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>{tag.source}</TableCell>
|
||||
<TableCell>{formatDate(tag.createdAt)}</TableCell>
|
||||
<TableCell>{formatDate(tag.updatedAt)}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="text-red-500">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user