22e725887a
Organize project by 5 core modules based on requirement docs. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { Slider } from "@/components/ui/slider"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Button } from "@/components/ui/button"
|
|
import UserList from "./user-list"
|
|
import useDebounce from "@/hooks/use-debounce"
|
|
|
|
type UserStatus = "活跃" | "沉睡" | "流失风险"
|
|
|
|
export default function UserSearch({ query }: { query: string }) {
|
|
const [status, setStatus] = useState<UserStatus[]>([])
|
|
const [rfm, setRfm] = useState<[number, number]>([0, 100])
|
|
|
|
const debouncedQ = useDebounce(query, 300)
|
|
|
|
const qs = useMemo(() => {
|
|
const p = new URLSearchParams()
|
|
if (debouncedQ.trim()) p.set("q", debouncedQ.trim())
|
|
if (status.length) p.set("status", status.join(","))
|
|
if (rfm[0] !== 0) p.set("rfmMin", String(rfm[0]))
|
|
if (rfm[1] !== 100) p.set("rfmMax", String(rfm[1]))
|
|
p.set("page", "1")
|
|
p.set("pageSize", "20")
|
|
return p.toString()
|
|
}, [debouncedQ, status, rfm])
|
|
|
|
return (
|
|
<div className="mt-8">
|
|
<h2 className="text-xl font-semibold mb-4">用户搜索与筛选</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{/* 过滤区 */}
|
|
<div className="rounded-lg border bg-white p-4 md:sticky md:top-4 h-max">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="text-sm font-medium mb-2">状态</div>
|
|
<div className="grid gap-2 text-sm">
|
|
{(["活跃", "沉睡", "流失风险"] as UserStatus[]).map((s) => {
|
|
const checked = status.includes(s)
|
|
return (
|
|
<label key={s} className="flex items-center gap-2 cursor-pointer">
|
|
<Checkbox
|
|
checked={checked}
|
|
onCheckedChange={(v) => setStatus((prev) => (v ? [...prev, s] : prev.filter((x) => x !== s)))}
|
|
/>
|
|
<span>{s}</span>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-sm font-medium mb-2">RFM 区间</div>
|
|
<Slider
|
|
value={rfm}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
onValueChange={(v) => setRfm([v[0], v[1]] as [number, number])}
|
|
className="w-full"
|
|
/>
|
|
<div className="mt-2 text-xs text-gray-500 flex justify-between">
|
|
<span>{rfm[0]}</span>
|
|
<span>{rfm[1]}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
setStatus([])
|
|
setRfm([0, 100])
|
|
}}
|
|
>
|
|
重置
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => {
|
|
// 触发一次刷新：依赖于 qs 的变化，列表会自动刷新
|
|
}}
|
|
>
|
|
应用
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 列表区 */}
|
|
<div className="md:col-span-3">
|
|
<UserList queryString={qs} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|