f0a6a364f2
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>
312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import RfmBadge from "@/components/rfm/rfm-badge"
|
||
import { Download, BarChart3, Sparkles, Upload, SlidersHorizontal } from 'lucide-react'
|
||
|
||
type AnalyzeResult = {
|
||
user_id: string
|
||
rfm_score: { R: number; F: number; M: number; total: number; grade: "S" | "A" | "B" | "C" | "D" }
|
||
tags: {
|
||
emotion?: "积极" | "中性" | "消极"
|
||
behavior?: string[]
|
||
intent?: "弱意图" | "中等意图" | "强意图"
|
||
lifecycle?: "新用户" | "活跃用户" | "沉睡用户" | "流失风险"
|
||
value?: "高" | "中" | "低"
|
||
}
|
||
created_at: string
|
||
updated_at: string
|
||
}
|
||
|
||
export default function RfmPage() {
|
||
const [form, setForm] = useState({
|
||
user_id: "wxid_demo_01",
|
||
last_active: new Date().toISOString(),
|
||
interactions: 12,
|
||
amount: 880,
|
||
chat_logs: "想了解一下价格;今天有活动吗",
|
||
source: "wechat",
|
||
useAI: false,
|
||
})
|
||
const [weights, setWeights] = useState<{ R: number; F: number; M: number }>({ R: 0.5, F: 0.3, M: 0.2 })
|
||
const [loading, setLoading] = useState(false)
|
||
const [result, setResult] = useState<AnalyzeResult | null>(null)
|
||
const [summary, setSummary] = useState<any>(null)
|
||
|
||
useEffect(() => {
|
||
;(async () => {
|
||
const res = await fetch("/api/rfm/weights")
|
||
const data = await res.json()
|
||
if (data.success) setWeights(data.data)
|
||
})()
|
||
}, [])
|
||
|
||
const analyze = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const res = await fetch("/api/rfm/analyze", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
...form,
|
||
chat_logs: form.chat_logs.split(";").map((s) => s.trim()).filter(Boolean),
|
||
}),
|
||
})
|
||
const data = await res.json()
|
||
if (data.success) {
|
||
setResult(data.data[0])
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const loadSummary = async () => {
|
||
const res = await fetch("/api/rfm/group_summary")
|
||
const data = await res.json()
|
||
if (data.success) setSummary(data.data)
|
||
}
|
||
|
||
const exportCsv = () => {
|
||
window.open("/api/rfm/dump_csv", "_blank")
|
||
}
|
||
|
||
const onUploadCsv = async (file: File) => {
|
||
const text = await file.text()
|
||
const lines = text.split(/\r?\n/).filter(Boolean)
|
||
if (lines.length <= 1) return
|
||
const header = lines[0].split(",").map((s) => s.trim())
|
||
const payload = lines.slice(1).map((line) => {
|
||
const cols = line.split(",")
|
||
const row: any = {}
|
||
header.forEach((h, i) => (row[h] = cols[i]))
|
||
return {
|
||
user_id: row.user_id,
|
||
last_active: row.last_active,
|
||
interactions: Number(row.interactions || 0),
|
||
amount: Number(row.amount || 0),
|
||
chat_logs: (row.chat_logs || "").split(";").filter(Boolean),
|
||
source: row.source || "import",
|
||
}
|
||
})
|
||
await fetch("/api/rfm/analyze", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
await loadSummary()
|
||
}
|
||
|
||
const saveWeights = async () => {
|
||
// normalize via API
|
||
const res = await fetch("/api/rfm/weights", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
R: Math.max(0.0001, weights.R),
|
||
F: Math.max(0.0001, weights.F),
|
||
M: Math.max(0.0001, weights.M),
|
||
}),
|
||
})
|
||
const data = await res.json()
|
||
if (data.success) setWeights(data.data)
|
||
}
|
||
|
||
return (
|
||
<div className="container mx-auto px-4 py-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-2xl font-bold">RFM 智能标签引擎</h1>
|
||
<div className="flex gap-2">
|
||
<Button variant="outline" onClick={loadSummary}>
|
||
<BarChart3 className="w-4 h-4 mr-2" />
|
||
分布汇总
|
||
</Button>
|
||
<Button variant="outline" onClick={exportCsv}>
|
||
<Download className="w-4 h-4 mr-2" />
|
||
导出CSV
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 权重配置 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<SlidersHorizontal className="w-4 h-4" />
|
||
权重配置（R/F/M）
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="grid grid-cols-3 gap-3">
|
||
{(["R", "F", "M"] as const).map((k) => (
|
||
<div key={k} className="space-y-2">
|
||
<Label htmlFor={`w-${k}`}>{k}</Label>
|
||
<Input
|
||
id={`w-${k}`}
|
||
type="number"
|
||
min={0}
|
||
step="0.05"
|
||
value={weights[k]}
|
||
onChange={(e) => setWeights((p) => ({ ...p, [k]: Number(e.target.value) }))}
|
||
/>
|
||
</div>
|
||
))}
|
||
<div className="col-span-3 flex justify-end">
|
||
<Button onClick={saveWeights}>保存权重</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 在线分析 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Sparkles className="w-4 h-4" />
|
||
在线分析
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="user_id">用户ID</Label>
|
||
<Input
|
||
id="user_id"
|
||
value={form.user_id}
|
||
onChange={(e) => setForm((p) => ({ ...p, user_id: e.target.value }))}
|
||
placeholder="wxid_xxx 或手机号散列等"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="last_active">最后活跃时间</Label>
|
||
<Input
|
||
id="last_active"
|
||
type="datetime-local"
|
||
value={new Date(form.last_active).toISOString().slice(0, 16)}
|
||
onChange={(e) => setForm((p) => ({ ...p, last_active: new Date(e.target.value).toISOString() }))}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="interactions">行为频次</Label>
|
||
<Input
|
||
id="interactions"
|
||
type="number"
|
||
value={form.interactions}
|
||
onChange={(e) => setForm((p) => ({ ...p, interactions: Number(e.target.value) }))}
|
||
min={0}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="amount">累计金额</Label>
|
||
<Input
|
||
id="amount"
|
||
type="number"
|
||
value={form.amount}
|
||
onChange={(e) => setForm((p) => ({ ...p, amount: Number(e.target.value) }))}
|
||
min={0}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="chat_logs">聊天片段（分号分隔）</Label>
|
||
<Textarea
|
||
id="chat_logs"
|
||
rows={3}
|
||
value={form.chat_logs}
|
||
onChange={(e) => setForm((p) => ({ ...p, chat_logs: e.target.value }))}
|
||
placeholder="想了解一下价格; 今天有活动吗"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="source">来源渠道</Label>
|
||
<Input
|
||
id="source"
|
||
value={form.source}
|
||
onChange={(e) => setForm((p) => ({ ...p, source: e.target.value }))}
|
||
placeholder="wechat / douyin / xhs / form"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<input
|
||
id="useAI"
|
||
type="checkbox"
|
||
checked={form.useAI}
|
||
onChange={(e) => setForm((p) => ({ ...p, useAI: e.target.checked }))}
|
||
/>
|
||
<Label htmlFor="useAI">启用AI标签增强（自动识别情绪/意图/行为）</Label>
|
||
</div>
|
||
<Button onClick={analyze} disabled={loading}>
|
||
{loading ? "分析中..." : "开始分析并入库"}
|
||
</Button>
|
||
</div>
|
||
|
||
{result && (
|
||
<div className="mt-4 p-4 border rounded-lg space-y-3">
|
||
<div className="flex items-center gap-2">
|
||
<RfmBadge grade={result.rfm_score.grade} />
|
||
<Badge variant="secondary">R: {result.rfm_score.R}</Badge>
|
||
<Badge variant="secondary">F: {result.rfm_score.F}</Badge>
|
||
<Badge variant="secondary">M: {result.rfm_score.M}</Badge>
|
||
<Badge variant="outline">Total: {result.rfm_score.total}</Badge>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{result.tags.value && <Badge className="bg-indigo-100 text-indigo-800">价值：{result.tags.value}</Badge>}
|
||
{result.tags.intent && <Badge className="bg-purple-100 text-purple-800">意图：{result.tags.intent}</Badge>}
|
||
{result.tags.emotion && <Badge className="bg-pink-100 text-pink-800">情绪：{result.tags.emotion}</Badge>}
|
||
{result.tags.lifecycle && (
|
||
<Badge className="bg-amber-100 text-amber-800">生命周期：{result.tags.lifecycle}</Badge>
|
||
)}
|
||
{(result.tags.behavior ?? []).map((b, i) => (
|
||
<Badge key={i} variant="secondary">
|
||
{b}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{summary && (
|
||
<div className="mt-4 p-4 border rounded-lg space-y-2">
|
||
<div className="font-medium">分布汇总</div>
|
||
<div className="text-sm">等级: {JSON.stringify(summary.gradeCount)}</div>
|
||
<div className="text-sm">价值: {JSON.stringify(summary.valueCount)}</div>
|
||
<div className="text-sm">生命周期: {JSON.stringify(summary.lifecycleCount)}</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 批量导入 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Upload className="w-4 h-4" />
|
||
批量导入 CSV 并分析
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2">
|
||
<p className="text-sm text-muted-foreground">
|
||
CSV 列要求：user_id,last_active,interactions,amount,chat_logs,source（chat_logs 用分号分隔）
|
||
</p>
|
||
<Input
|
||
type="file"
|
||
accept=".csv,text/csv"
|
||
onChange={(e) => {
|
||
const f = e.target.files?.[0]
|
||
if (f) onUploadCsv(f)
|
||
}}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|