refactor: overhaul UI for streamlined user experience

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>

components/user-pool/user-pool-filters.tsx

@@ -0,0 +1,89 @@
+"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>
+  )
+}

components/user-pool/user-pool-header.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button"
+import { PlusCircle, Download, Upload } from "lucide-react"
+
+export function UserPoolHeader() {
+  return (
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">用户池管理</h1>
+        <p className="text-muted-foreground">管理和分析您的用户资产，发掘用户价值</p>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Button variant="outline" size="sm">
+          <Upload className="mr-2 h-4 w-4" />
+          导入
+        </Button>
+        <Button variant="outline" size="sm">
+          <Download className="mr-2 h-4 w-4" />
+          导出
+        </Button>
+        <Button size="sm">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          添加用户
+        </Button>
+      </div>
+    </div>
+  )
+}

components/user-pool/user-pool-stats.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent } from "@/components/ui/card"
+import { formatNumber, getGrowthClass } from "@/lib/utils"
+import { ArrowDown, ArrowUp, Users, UserCheck, Star, TrendingUp } from "lucide-react"
+
+export function UserPoolStats() {
+  // 这里应该从API获取实际数据
+  const stats = [
+    {
+      title: "总用户数",
+      value: 125689,
+      change: 12.5,
+      icon: <Users className="h-4 w-4" />,
+    },
+    {
+      title: "活跃用户",
+      value: 78452,
+      change: 8.3,
+      icon: <UserCheck className="h-4 w-4" />,
+    },
+    {
+      title: "高价值用户",
+      value: 12458,
+      change: 15.2,
+      icon: <Star className="h-4 w-4" />,
+    },
+    {
+      title: "转化率",
+      value: 12.5,
+      change: -2.3,
+      icon: <TrendingUp className="h-4 w-4" />,
+      isPercentage: true,
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat) => (
+        <Card key={stat.title}>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="bg-primary/10 rounded-full p-2 text-primary">{stat.icon}</div>
+              <div className={`flex items-center ${getGrowthClass(stat.change)}`}>
+                {stat.change > 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
+                <span>{Math.abs(stat.change)}%</span>
+              </div>
+            </div>
+            <div className="mt-3">
+              <p className="text-sm text-muted-foreground">{stat.title}</p>
+              <p className="text-2xl font-bold">{stat.isPercentage ? `${stat.value}%` : formatNumber(stat.value)}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

components/user-pool/user-pool-table.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { formatDate } from "@/lib/utils"
+import { MoreHorizontal, ChevronLeft, ChevronRight } from "lucide-react"
+
+export function UserPoolTable() {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [itemsPerPage] = useState(10)
+
+  // 这里应该从API获取实际数据
+  const users = [
+    {
+      id: "1",
+      name: "张三",
+      phone: "13812345678",
+      source: "微信",
+      registerDate: new Date(2023, 5, 15),
+      lastActive: new Date(2023, 6, 20),
+      value: "high",
+      tags: ["潜在客户", "对产品感兴趣"],
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "李四",
+      phone: "13987654321",
+      source: "抖音",
+      registerDate: new Date(2023, 4, 10),
+      lastActive: new Date(2023, 6, 18),
+      value: "medium",
+      tags: ["新用户", "已咨询"],
+      status: "active",
+    },
+    {
+      id: "3",
+      name: "王五",
+      phone: "13765432198",
+      source: "小红书",
+      registerDate: new Date(2023, 3, 5),
+      lastActive: new Date(2023, 5, 25),
+      value: "low",
+      tags: ["已购买", "需要跟进"],
+      status: "inactive",
+    },
+    {
+      id: "4",
+      name: "赵六",
+      phone: "13654321987",
+      source: "官网",
+      registerDate: new Date(2023, 2, 20),
+      lastActive: new Date(2023, 6, 19),
+      value: "high",
+      tags: ["VIP客户", "高频购买"],
+      status: "active",
+    },
+    {
+      id: "5",
+      name: "钱七",
+      phone: "13543219876",
+      source: "微信",
+      registerDate: new Date(2023, 1, 15),
+      lastActive: new Date(2023, 4, 10),
+      value: "medium",
+      tags: ["已流失", "需要挽回"],
+      status: "lost",
+    },
+  ]
+
+  const totalPages = Math.ceil(users.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentUsers = users.slice(startIndex, endIndex)
+
+  const getUserValueBadge = (value: string) => {
+    switch (value) {
+      case "high":
+        return <Badge className="bg-green-500">高价值</Badge>
+      case "medium":
+        return <Badge className="bg-blue-500">中价值</Badge>
+      case "low":
+        return <Badge className="bg-gray-500">低价值</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const getUserStatusBadge = (status: string) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-500">活跃</Badge>
+      case "inactive":
+        return <Badge className="bg-yellow-500">非活跃</Badge>
+      case "lost":
+        return <Badge className="bg-red-500">流失</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>用户名</TableHead>
+              <TableHead>手机号</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>注册时间</TableHead>
+              <TableHead>最后活跃</TableHead>
+              <TableHead>用户价值</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead>标签</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {currentUsers.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-medium">{user.name}</TableCell>
+                <TableCell>{user.phone}</TableCell>
+                <TableCell>{user.source}</TableCell>
+                <TableCell>{formatDate(user.registerDate)}</TableCell>
+                <TableCell>{formatDate(user.lastActive)}</TableCell>
+                <TableCell>{getUserValueBadge(user.value)}</TableCell>
+                <TableCell>{getUserStatusBadge(user.status)}</TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {user.tags.map((tag) => (
+                      <Badge key={tag} variant="outline" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">打开菜单</span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>操作</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>查看详情</DropdownMenuItem>
+                      <DropdownMenuItem>编辑信息</DropdownMenuItem>
+                      <DropdownMenuItem>添加标签</DropdownMenuItem>
+                      <DropdownMenuItem>发送消息</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-red-500">删除用户</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          显示第 {startIndex + 1} 到 {Math.min(endIndex, users.length)} 条，共 {users.length} 条
+        </p>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}