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>

components/home/user-list.tsx

@@ -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
+  }
+}

components/home/user-search.tsx

@@ -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>
+  )
+}

components/ui/skeleton.tsx

@@ -1,7 +1,6 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
 
-export function Skeleton(props: React.HTMLAttributes<HTMLDivElement>) {
-  const { className, ...rest } = props
-  return <div className={cn("animate-pulse rounded-md bg-muted/40", className)} {...rest} />
+export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted/40", className)} {...props} />
 }

components/ui/slider.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      "h-8",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-slate-200">
+      <SliderPrimitive.Range className="absolute h-full bg-slate-900" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      className={cn(
+        "block h-4 w-4 rounded-full border border-slate-300 bg-white shadow",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400",
+        "disabled:pointer-events-none disabled:opacity-50"
+      )}
+    />
+    <SliderPrimitive.Thumb
+      className={cn(
+        "block h-4 w-4 rounded-full border border-slate-300 bg-white shadow",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400",
+        "disabled:pointer-events-none disabled:opacity-50"
+      )}
+    />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = "Slider"
+
+export { Slider }

components/ui/toast.tsx

@@ -32,9 +32,7 @@ const toastVariants = cva(
         destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
-    defaultVariants: {
-      variant: "default",
-    },
+    defaultVariants: { variant: "default" },
   },
 )
 

components/ui/toaster.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import { useEffect } from "react"
 import {
   Toast,
   ToastAction,
@@ -15,14 +14,6 @@ import { useToast } from "@/components/ui/use-toast"
 export function Toaster() {
   const { toasts } = useToast()
 
-  // 可选：在开发环境输出调试信息
-  useEffect(() => {
-    if (process.env.NODE_ENV === "development") {
-      // eslint-disable-next-line no-console
-      console.debug("[Toaster] toasts", toasts)
-    }
-  }, [toasts])
-
   return (
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
@@ -42,4 +33,5 @@ export function Toaster() {
   )
 }
 
+export default Toaster
 export { ToastAction }