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/traffic-pool/pool-analytics.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export function PoolAnalytics() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">流量池分析</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="7days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总流量池数量</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">12</div>
+            <p className="text-xs text-muted-foreground">较上月增长 2个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">活跃流量池</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">8</div>
+            <p className="text-xs text-muted-foreground">较上月增长 1个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">流量池转化率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24.8%</div>
+            <p className="text-xs text-muted-foreground">较上月提升 2.3%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">概览</TabsTrigger>
+          <TabsTrigger value="performance">性能分析</TabsTrigger>
+          <TabsTrigger value="conversion">转化分析</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池增长趋势</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="performance" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池性能指标</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="conversion" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池转化路径</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// 保持已有的 KeywordAnalytics 函数
+export function KeywordAnalytics() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">流量词分析</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="7days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总流量词数量</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">125</div>
+            <p className="text-xs text-muted-foreground">较上月增长 12%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">匹配用户总数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24,521</div>
+            <p className="text-xs text-muted-foreground">较上月增长 8%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">平均匹配率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">68.3%</div>
+            <p className="text-xs text-muted-foreground">较上月提升 2.1%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="trends">
+        <TabsList>
+          <TabsTrigger value="trends">趋势分析</TabsTrigger>
+          <TabsTrigger value="distribution">分布分析</TabsTrigger>
+          <TabsTrigger value="performance">性能分析</TabsTrigger>
+        </TabsList>
+        <TabsContent value="trends" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量词匹配趋势</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="distribution" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card className="p-4">
+              <CardHeader>
+                <CardTitle>流量词来源分布</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="h-[250px] flex items-center justify-center">
+                  <p className="text-muted-foreground">图表功能已移除</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="p-4">
+              <CardHeader>
+                <CardTitle>流量词分类分布</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="h-[250px] flex items-center justify-center">
+                  <p className="text-muted-foreground">图表功能已移除</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+        <TabsContent value="performance" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量词匹配性能</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

components/traffic-pool/traffic-pool-list.tsx

@@ -0,0 +1,246 @@
+"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 { Checkbox } from "@/components/ui/checkbox"
+import { MoreHorizontal, Edit, Trash2, BarChart2, Tag } from "lucide-react"
+
+interface TrafficPool {
+  id: string
+  keyword: string
+  source: string
+  category: string
+  volume: "high" | "medium" | "low"
+  matchedUsers: number
+  createdAt: Date
+  updatedAt: Date
+  tags: string[]
+}
+
+interface TrafficPoolListProps {
+  searchQuery: string
+}
+
+export function TrafficPoolList({ searchQuery }: TrafficPoolListProps) {
+  const [selectedKeywords, setSelectedKeywords] = useState<string[]>([])
+
+  // 模拟数据
+  const keywords: TrafficPool[] = [
+    {
+      id: "1",
+      keyword: "数字营销",
+      source: "搜索引擎",
+      category: "营销",
+      volume: "high",
+      matchedUsers: 1250,
+      createdAt: new Date(2023, 5, 15),
+      updatedAt: new Date(2023, 6, 20),
+      tags: ["高意向", "B端客户"],
+    },
+    {
+      id: "2",
+      keyword: "用户画像",
+      source: "社交媒体",
+      category: "数据分析",
+      volume: "high",
+      matchedUsers: 980,
+      createdAt: new Date(2023, 4, 10),
+      updatedAt: new Date(2023, 6, 18),
+      tags: ["数据分析", "企业客户"],
+    },
+    {
+      id: "3",
+      keyword: "流量获取",
+      source: "广告投放",
+      category: "营销",
+      volume: "medium",
+      matchedUsers: 645,
+      createdAt: new Date(2023, 3, 5),
+      updatedAt: new Date(2023, 5, 25),
+      tags: ["获客", "营销人员"],
+    },
+    {
+      id: "4",
+      keyword: "数据可视化",
+      source: "内容营销",
+      category: "数据分析",
+      volume: "medium",
+      matchedUsers: 520,
+      createdAt: new Date(2023, 2, 20),
+      updatedAt: new Date(2023, 6, 19),
+      tags: ["技术", "数据分析师"],
+    },
+    {
+      id: "5",
+      keyword: "精准营销",
+      source: "搜索引擎",
+      category: "营销",
+      volume: "high",
+      matchedUsers: 1100,
+      createdAt: new Date(2023, 1, 15),
+      updatedAt: new Date(2023, 4, 10),
+      tags: ["高转化", "营销经理"],
+    },
+  ]
+
+  // 过滤关键词
+  const filteredKeywords = keywords.filter(
+    (keyword) =>
+      keyword.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.source.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  const toggleSelectAll = () => {
+    if (selectedKeywords.length === filteredKeywords.length) {
+      setSelectedKeywords([])
+    } else {
+      setSelectedKeywords(filteredKeywords.map((k) => k.id))
+    }
+  }
+
+  const toggleSelectKeyword = (id: string) => {
+    if (selectedKeywords.includes(id)) {
+      setSelectedKeywords(selectedKeywords.filter((k) => k !== id))
+    } else {
+      setSelectedKeywords([...selectedKeywords, id])
+    }
+  }
+
+  const getVolumeBadge = (volume: string) => {
+    switch (volume) {
+      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 formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      {selectedKeywords.length > 0 && (
+        <div className="bg-muted p-2 rounded-md flex items-center justify-between">
+          <span className="text-sm">已选择 {selectedKeywords.length} 项</span>
+          <div className="space-x-2">
+            <Button variant="outline" size="sm">
+              <Tag className="mr-2 h-4 w-4" />
+              批量标记
+            </Button>
+            <Button variant="outline" size="sm" className="text-red-500">
+              <Trash2 className="mr-2 h-4 w-4" />
+              批量删除
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={selectedKeywords.length === filteredKeywords.length && filteredKeywords.length > 0}
+                  onCheckedChange={toggleSelectAll}
+                  aria-label="Select all"
+                />
+              </TableHead>
+              <TableHead>关键词</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>分类</TableHead>
+              <TableHead>流量</TableHead>
+              <TableHead>匹配用户数</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>更新时间</TableHead>
+              <TableHead>标签</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredKeywords.map((keyword) => (
+              <TableRow key={keyword.id}>
+                <TableCell>
+                  <Checkbox
+                    checked={selectedKeywords.includes(keyword.id)}
+                    onCheckedChange={() => toggleSelectKeyword(keyword.id)}
+                    aria-label={`Select ${keyword.keyword}`}
+                  />
+                </TableCell>
+                <TableCell className="font-medium">{keyword.keyword}</TableCell>
+                <TableCell>{keyword.source}</TableCell>
+                <TableCell>{keyword.category}</TableCell>
+                <TableCell>{getVolumeBadge(keyword.volume)}</TableCell>
+                <TableCell>{keyword.matchedUsers.toLocaleString()}</TableCell>
+                <TableCell>{formatDate(keyword.createdAt)}</TableCell>
+                <TableCell>{formatDate(keyword.updatedAt)}</TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {keyword.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>
+                        <Edit className="mr-2 h-4 w-4" />
+                        编辑
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <BarChart2 className="mr-2 h-4 w-4" />
+                        查看分析
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Tag className="mr-2 h-4 w-4" />
+                        管理标签
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-red-500">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

components/traffic-pool/user-tag-mapping.tsx

@@ -0,0 +1,263 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { PlusCircle, Search, Tag, ArrowRight } from "lucide-react"
+
+interface TagMapping {
+  id: string
+  keywordId: string
+  keyword: string
+  tagId: string
+  tagName: string
+  tagCategory: string
+  matchRule: string
+  priority: number
+  createdAt: Date
+  status: "active" | "inactive"
+}
+
+export function UserTagMapping() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedMappings, setSelectedMappings] = useState<string[]>([])
+
+  // 模拟数据
+  const mappings: TagMapping[] = [
+    {
+      id: "1",
+      keywordId: "1",
+      keyword: "数字营销",
+      tagId: "101",
+      tagName: "营销决策者",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 1,
+      createdAt: new Date(2023, 5, 15),
+      status: "active",
+    },
+    {
+      id: "2",
+      keywordId: "2",
+      keyword: "用户画像",
+      tagId: "102",
+      tagName: "数据分析师",
+      tagCategory: "职业角色",
+      matchRule: "包含匹配",
+      priority: 2,
+      createdAt: new Date(2023, 4, 10),
+      status: "active",
+    },
+    {
+      id: "3",
+      keywordId: "3",
+      keyword: "流量获取",
+      tagId: "103",
+      tagName: "营销专员",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 3,
+      createdAt: new Date(2023, 3, 5),
+      status: "active",
+    },
+    {
+      id: "4",
+      keywordId: "4",
+      keyword: "数据可视化",
+      tagId: "104",
+      tagName: "技术人员",
+      tagCategory: "职业角色",
+      matchRule: "包含匹配",
+      priority: 2,
+      createdAt: new Date(2023, 2, 20),
+      status: "inactive",
+    },
+    {
+      id: "5",
+      keywordId: "5",
+      keyword: "精准营销",
+      tagId: "105",
+      tagName: "营销经理",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 1,
+      createdAt: new Date(2023, 1, 15),
+      status: "active",
+    },
+  ]
+
+  // 过滤映射
+  const filteredMappings = mappings.filter(
+    (mapping) =>
+      mapping.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      mapping.tagName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      mapping.tagCategory.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const toggleSelectAll = () => {
+    if (selectedMappings.length === filteredMappings.length) {
+      setSelectedMappings([])
+    } else {
+      setSelectedMappings(filteredMappings.map((m) => m.id))
+    }
+  }
+
+  const toggleSelectMapping = (id: string) => {
+    if (selectedMappings.includes(id)) {
+      setSelectedMappings(selectedMappings.filter((m) => m !== id))
+    } else {
+      setSelectedMappings([...selectedMappings, id])
+    }
+  }
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户标签映射</h2>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          创建新映射
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>流量词与用户标签映射规则</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <div className="flex space-x-2">
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部状态</SelectItem>
+                    <SelectItem value="active">已启用</SelectItem>
+                    <SelectItem value="inactive">已禁用</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="标签分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部分类</SelectItem>
+                    <SelectItem value="role">职业角色</SelectItem>
+                    <SelectItem value="interest">兴趣爱好</SelectItem>
+                    <SelectItem value="behavior">行为特征</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="relative w-64">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索关键词或标签..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {selectedMappings.length > 0 && (
+              <div className="bg-muted p-2 rounded-md flex items-center justify-between">
+                <span className="text-sm">已选择 {selectedMappings.length} 项</span>
+                <div className="space-x-2">
+                  <Button variant="outline" size="sm">
+                    启用
+                  </Button>
+                  <Button variant="outline" size="sm">
+                    禁用
+                  </Button>
+                  <Button variant="outline" size="sm" className="text-red-500">
+                    删除
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-12">
+                      <Checkbox
+                        checked={selectedMappings.length === filteredMappings.length && filteredMappings.length > 0}
+                        onCheckedChange={toggleSelectAll}
+                        aria-label="Select all"
+                      />
+                    </TableHead>
+                    <TableHead>流量词</TableHead>
+                    <TableHead className="w-12 text-center">映射</TableHead>
+                    <TableHead>用户标签</TableHead>
+                    <TableHead>标签分类</TableHead>
+                    <TableHead>匹配规则</TableHead>
+                    <TableHead>优先级</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredMappings.map((mapping) => (
+                    <TableRow key={mapping.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedMappings.includes(mapping.id)}
+                          onCheckedChange={() => toggleSelectMapping(mapping.id)}
+                          aria-label={`Select ${mapping.keyword} to ${mapping.tagName} mapping`}
+                        />
+                      </TableCell>
+                      <TableCell className="font-medium">{mapping.keyword}</TableCell>
+                      <TableCell className="text-center">
+                        <ArrowRight className="h-4 w-4 mx-auto" />
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="font-normal">
+                          <Tag className="mr-1 h-3 w-3" />
+                          {mapping.tagName}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{mapping.tagCategory}</TableCell>
+                      <TableCell>{mapping.matchRule}</TableCell>
+                      <TableCell>{mapping.priority}</TableCell>
+                      <TableCell>{formatDate(mapping.createdAt)}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={mapping.status === "active" ? "default" : "secondary"}
+                          className={mapping.status === "active" ? "bg-green-500" : ""}
+                        >
+                          {mapping.status === "active" ? "已启用" : "已禁用"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          编辑
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}