2408d50cb0
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Search, Filter, X } from "lucide-react"
|
|
|
|
export function UserPoolFilters() {
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
const [userType, setUserType] = useState("all")
|
|
const [userSource, setUserSource] = useState("all")
|
|
const [userValue, setUserValue] = useState("all")
|
|
const [showFilters, setShowFilters] = useState(false)
|
|
|
|
const clearFilters = () => {
|
|
setSearchQuery("")
|
|
setUserType("all")
|
|
setUserSource("all")
|
|
setUserValue("all")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
type="text"
|
|
placeholder="搜索用户名、手机号、标签..."
|
|
className="pl-8"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button variant="outline" onClick={() => setShowFilters(!showFilters)}>
|
|
<Filter className="mr-2 h-4 w-4" />
|
|
筛选
|
|
</Button>
|
|
{(userType !== "all" || userSource !== "all" || userValue !== "all") && (
|
|
<Button variant="ghost" onClick={clearFilters}>
|
|
<X className="mr-2 h-4 w-4" />
|
|
清除筛选
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{showFilters && (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Select value={userType} onValueChange={setUserType}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="用户类型" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部类型</SelectItem>
|
|
<SelectItem value="new">新用户</SelectItem>
|
|
<SelectItem value="active">活跃用户</SelectItem>
|
|
<SelectItem value="inactive">非活跃用户</SelectItem>
|
|
<SelectItem value="lost">流失用户</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={userSource} onValueChange={setUserSource}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="用户来源" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部来源</SelectItem>
|
|
<SelectItem value="wechat">微信</SelectItem>
|
|
<SelectItem value="douyin">抖音</SelectItem>
|
|
<SelectItem value="xiaohongshu">小红书</SelectItem>
|
|
<SelectItem value="website">官网</SelectItem>
|
|
<SelectItem value="other">其他</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={userValue} onValueChange={setUserValue}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="用户价值" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部价值</SelectItem>
|
|
<SelectItem value="high">高价值</SelectItem>
|
|
<SelectItem value="medium">中价值</SelectItem>
|
|
<SelectItem value="low">低价值</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|