fix: support default and named exports for useDebounce hook
Ensure compatibility with both default and named exports for useDebounce. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
116
components/home/user-list.tsx
Normal file
116
components/home/user-list.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
|
||||
type Row = {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone: string
|
||||
rfmScore: number
|
||||
lastActiveAt: string
|
||||
tags: string[]
|
||||
}
|
||||
|
||||
type ApiResp = {
|
||||
data: Row[]
|
||||
pagination: { page: number; pageSize: number; total: number; totalPages: number }
|
||||
}
|
||||
|
||||
export default function UserList({ queryString }: { queryString: string }) {
|
||||
const [data, setData] = useState<Row[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let aborted = false
|
||||
const controller = new AbortController()
|
||||
async function load() {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await fetch(`/api/users?${queryString}`, { signal: controller.signal, cache: 'no-store' })
|
||||
if (!res.ok) throw new Error(`请求失败: ${res.status}`)
|
||||
const json: ApiResp = await res.json()
|
||||
if (!aborted) {
|
||||
setData(json.data || [])
|
||||
setTotal(json.pagination?.total || 0)
|
||||
}
|
||||
} catch (e: any) {
|
||||
if (!aborted) setError(e?.message || '未知错误')
|
||||
} finally {
|
||||
if (!aborted) setLoading(false)
|
||||
}
|
||||
}
|
||||
load()
|
||||
return () => {
|
||||
aborted = true
|
||||
controller.abort()
|
||||
}
|
||||
}, [queryString])
|
||||
|
||||
const rows = useMemo(() => data, [data])
|
||||
|
||||
if (loading) {
|
||||
return <div className="rounded-lg border bg-white p-4">加载中...</div>
|
||||
}
|
||||
if (error) {
|
||||
return <div className="rounded-lg border bg-white p-4 text-red-600">加载失败：{error}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-white">
|
||||
<div className="flex items-center justify-between p-3 border-b">
|
||||
<div className="text-sm text-gray-600">共 {total} 条</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr className="text-left text-gray-500">
|
||||
<th className="px-3 py-2 font-medium">姓名</th>
|
||||
<th className="px-3 py-2 font-medium">邮箱</th>
|
||||
<th className="px-3 py-2 font-medium">手机号</th>
|
||||
<th className="px-3 py-2 font-medium">RFM</th>
|
||||
<th className="px-3 py-2 font-medium">最近活跃</th>
|
||||
<th className="px-3 py-2 font-medium">标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={r.id} className="border-t">
|
||||
<td className="px-3 py-2">{r.name}</td>
|
||||
<td className="px-3 py-2">{r.email}</td>
|
||||
<td className="px-3 py-2">{r.phone}</td>
|
||||
<td className="px-3 py-2">{r.rfmScore}</td>
|
||||
<td className="px-3 py-2">{formatDateTime(r.lastActiveAt)}</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(r.tags || []).slice(0, 3).map((t) => (
|
||||
<span key={t} className="px-2 py-0.5 rounded-full bg-gray-100 text-gray-700">{t}</span>
|
||||
))}
|
||||
{(r.tags || []).length > 3 && <span className="px-2 py-0.5 rounded-full border">+{r.tags.length - 3}</span>}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{!rows.length && (
|
||||
<tr>
|
||||
<td className="px-3 py-8 text-center text-gray-500" colSpan={6}>无匹配数据</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatDateTime(iso: string) {
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`
|
||||
} catch {
|
||||
return iso
|
||||
}
|
||||
}
|
||||
79
components/home/user-search.tsx
Normal file
79
components/home/user-search.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, 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="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">
|
||||
<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 any)} />
|
||||
<div className="mt-2 text-xs text-gray-500">{rfm[0]} - {rfm[1]}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => { setStatus([]); setRfm([0, 100]) }}>重置</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// 触发一次刷新：依赖于 qs 的变化，列表会自动刷新，这里可以空操作
|
||||
}}
|
||||
>
|
||||
应用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 列表区 */}
|
||||
<div className="md:col-span-3">
|
||||
<UserList queryString={qs} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user