refactor: restructure project into 5 core modules

Organize project by 5 core modules based on requirement docs.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/home/user-list.tsx

@@ -1,6 +1,8 @@
-'use client'
+"use client"
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
 
 type Row = {
   id: string
@@ -26,11 +28,15 @@ export default function UserList({ queryString }: { queryString: string }) {
   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' })
+        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) {
@@ -38,11 +44,14 @@ export default function UserList({ queryString }: { queryString: string }) {
           setTotal(json.pagination?.total || 0)
         }
       } catch (e: any) {
-        if (!aborted) setError(e?.message || '未知错误')
+        if (!aborted && e.name !== "AbortError") {
+          setError(e?.message || "未知错误")
+        }
       } finally {
         if (!aborted) setLoading(false)
       }
     }
+
     load()
     return () => {
       aborted = true
@@ -53,50 +62,91 @@ export default function UserList({ queryString }: { queryString: string }) {
   const rows = useMemo(() => data, [data])
 
   if (loading) {
-    return <div className="rounded-lg border bg-white p-4">加载中...</div>
+    return (
+      <div className="rounded-lg border bg-white p-4">
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-32" />
+          <div className="space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className="h-12 w-full" />
+            ))}
+          </div>
+        </div>
+      </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 p-4">
+        <div className="text-red-600 text-center py-8">
+          <div className="text-lg font-medium mb-2">加载失败</div>
+          <div className="text-sm">{error}</div>
+        </div>
+      </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 className="flex items-center justify-between p-4 border-b bg-gray-50">
+        <div className="text-sm text-gray-600">
+          共 <span className="font-medium text-gray-900">{total}</span> 条用户数据
+        </div>
+        {total > 0 && <div className="text-xs text-gray-500">显示前 {Math.min(20, 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>
+          <thead className="bg-gray-50 border-b">
+            <tr className="text-left text-gray-600">
+              <th className="px-4 py-3 font-medium">姓名</th>
+              <th className="px-4 py-3 font-medium">邮箱</th>
+              <th className="px-4 py-3 font-medium">手机号</th>
+              <th className="px-4 py-3 font-medium">RFM分数</th>
+              <th className="px-4 py-3 font-medium">最近活跃</th>
+              <th className="px-4 py-3 font-medium">标签</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className="divide-y divide-gray-100">
             {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">
+              <tr key={r.id} className="hover:bg-gray-50 transition-colors">
+                <td className="px-4 py-3 font-medium text-gray-900">{r.name}</td>
+                <td className="px-4 py-3 text-gray-600">{r.email}</td>
+                <td className="px-4 py-3 text-gray-600 font-mono">{r.phone}</td>
+                <td className="px-4 py-3">
+                  <Badge
+                    variant={r.rfmScore >= 70 ? "default" : r.rfmScore >= 40 ? "secondary" : "outline"}
+                    className="font-medium"
+                  >
+                    {r.rfmScore}
+                  </Badge>
+                </td>
+                <td className="px-4 py-3 text-gray-600 text-xs">{formatDateTime(r.lastActiveAt)}</td>
+                <td className="px-4 py-3">
                   <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>
+                      <Badge key={t} variant="outline" className="text-xs px-2 py-0.5">
+                        {t}
+                      </Badge>
                     ))}
-                    {(r.tags || []).length > 3 && <span className="px-2 py-0.5 rounded-full border">+{r.tags.length - 3}</span>}
+                    {(r.tags || []).length > 3 && (
+                      <Badge variant="outline" className="text-xs px-2 py-0.5">
+                        +{r.tags.length - 3}
+                      </Badge>
+                    )}
                   </div>
                 </td>
               </tr>
             ))}
             {!rows.length && (
               <tr>
-                <td className="px-3 py-8 text-center text-gray-500" colSpan={6}>无匹配数据</td>
+                <td className="px-4 py-12 text-center text-gray-500" colSpan={6}>
+                  <div className="flex flex-col items-center gap-2">
+                    <div className="text-lg">暂无数据</div>
+                    <div className="text-sm">尝试调整筛选条件</div>
+                  </div>
+                </td>
               </tr>
             )}
           </tbody>
@@ -109,8 +159,20 @@ export default function UserList({ queryString }: { queryString: string }) {
 function formatDateTime(iso: string) {
   try {
     const d = new Date(iso)
-    return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`
+    const now = new Date()
+    const diffMs = now.getTime() - d.getTime()
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+    if (diffDays === 0) {
+      return "今天 " + d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })
+    } else if (diffDays === 1) {
+      return "昨天 " + d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })
+    } else if (diffDays < 7) {
+      return `${diffDays}天前`
+    } else {
+      return d.toLocaleDateString("zh-CN", { month: "short", day: "numeric" })
+    }
   } catch {
-    return iso
+    return iso.slice(0, 10)
   }
 }

components/home/user-search.tsx

@@ -1,13 +1,13 @@
-'use client'
+"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'
+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 = '活跃' | '沉睡' | '流失风险'
+type UserStatus = "活跃" | "沉睡" | "流失风险"
 
 export default function UserSearch({ query }: { query: string }) {
   const [status, setStatus] = useState<UserStatus[]>([])
@@ -17,62 +17,83 @@ export default function UserSearch({ query }: { query: string }) {
 
   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')
+    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 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="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 className="md:col-span-3">
+          <UserList queryString={qs} />
+        </div>
       </div>
     </div>
   )