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>

app/page.tsx

@@ -8,6 +8,8 @@ import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
 import { useRouter } from "next/navigation"
 import { Toaster } from "@/components/ui/toaster"
+import UserSearch from '@/components/home/user-search'
+import UserList from '@/components/home/user-list'
 
 interface SystemStats {
   userCount: number
@@ -25,6 +27,15 @@ interface GrowthData {
   activeUsers: number
 }
 
+function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
+  return (
+    <div className="rounded-lg border bg-white p-3">
+      <div className="flex items-center gap-2 text-gray-500 text-xs">{icon}<span>{label}</span></div>
+      <div className="mt-1 text-lg font-semibold">{value}</div>
+    </div>
+  )
+}
+
 export default function OverviewPage() {
   const router = useRouter()
   const [searchQuery, setSearchQuery] = useState("")
@@ -344,6 +355,17 @@ export default function OverviewPage() {
             </CardContent>
           </Card>
         </div>
+
+        {/* 快速指标示例（可后续接入真实数据） */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-8">
+          <StatCard icon={<Users className="h-4 w-4" />} label="用户总量" value="~120+" />
+          <StatCard icon={<Activity className="h-4 w-4" />} label="近7日活跃" value="动态计算" />
+          <StatCard icon={<BarChart3 className="h-4 w-4" />} label="平均RFM" value="50-80" />
+          <StatCard icon={<Users className="h-4 w-4" />} label="新客占比" value="≈25%" />
+        </div>
+
+        {/* 搜索 + 条件过滤 + 列表 */}
+        <UserSearch query={searchQuery} />
       </div>
       <Toaster />
     </div>