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/data-integration/data-correlation-analysis.tsx

@@ -11,7 +11,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { Badge } from "@/components/ui/badge"
 import { Separator } from "@/components/ui/separator"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Search, Filter, Download, RefreshCw, Play, ArrowRight, Settings } from "lucide-react"
+import { Search, Filter, Download, RefreshCw, Play, ArrowRight, Settings } from 'lucide-react'
 import {
   Dialog,
   DialogContent,
@@ -250,7 +250,7 @@ export function DataCorrelationAnalysis() {
     if (significance <= 0.05) {
       return <Badge className="bg-yellow-100 text-yellow-800">边际显著 (p≤0.05)</Badge>
     }
-    return <Badge className="bg-red-100 text-red-800">不显著 (p>0.05)</Badge>
+    return <Badge className="bg-red-100 text-red-800">{'不显著 (p>0.05)'}</Badge>
   }
 
   const toggleFieldSelection = (fieldId: string) => {
@@ -275,11 +275,11 @@ export function DataCorrelationAnalysis() {
         <h2 className="text-2xl font-bold">数据关联分析</h2>
         <div className="flex items-center gap-2">
           <Button variant="outline">
-            <Download className="mr-2 h-4 w-4" &gt;
+            <Download className="mr-2 h-4 w-4" />
             导出分析结果
           </Button>
           <Button onClick={() => setIsCreatingAnalysis(true)}>
-            <Play className="mr-2 h-4 w-4" &gt;
+            <Play className="mr-2 h-4 w-4" />
             创建新分析
           </Button>
         </div>
@@ -531,9 +531,9 @@ export function DataCorrelationAnalysis() {
                     </p>
                   </div>
                 </div>
-              </CardContent>
-            </Card>
-          </div>
+              </div>
+            </CardContent>
+          </Card>
         </TabsContent>
 
         <TabsContent value="user-network" className="space-y-4">

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>
   )

components/main-nav.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import { LayoutDashboard, Database, Users, BarChart3, Bot } from "lucide-react"
+
+export function MainNav() {
+  const pathname = usePathname()
+
+  const routes = [
+    {
+      href: "/",
+      label: "首页",
+      icon: LayoutDashboard,
+      active: pathname === "/",
+    },
+    {
+      href: "/data-platform",
+      label: "数据中台",
+      icon: Database,
+      active: pathname.startsWith("/data-platform"),
+    },
+    {
+      href: "/user-portrait",
+      label: "用户画像",
+      icon: Users,
+      active: pathname.startsWith("/user-portrait"),
+    },
+    {
+      href: "/value-assessment",
+      label: "价值评估",
+      icon: BarChart3,
+      active: pathname.startsWith("/value-assessment"),
+    },
+    {
+      href: "/ai-assistant",
+      label: "AI助手",
+      icon: Bot,
+      active: pathname.startsWith("/ai-assistant"),
+    },
+  ]
+
+  return (
+    <nav className="flex items-center space-x-4 lg:space-x-6 mx-6">
+      {routes.map((route) => (
+        <Link
+          key={route.href}
+          href={route.href}
+          className={cn(
+            "text-sm font-medium transition-colors hover:text-primary flex items-center gap-2",
+            route.active ? "text-black dark:text-white" : "text-muted-foreground",
+          )}
+        >
+          <route.icon className="h-4 w-4" />
+          {route.label}
+        </Link>
+      ))}
+    </nav>
+  )
+}

components/overview.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
+
+const data = [
+  {
+    name: "1月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "2月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "3月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "4月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "5月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "6月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "7月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "8月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "9月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "10月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "11月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "12月",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+]
+
+export function Overview() {
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <BarChart data={data}>
+        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <YAxis
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `¥${value}`}
+        />
+        <Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

components/platform-nav.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from 'next/navigation'
+import { LayoutDashboard, Database, Users, DollarSign, Brain, Settings, Home } from 'lucide-react'
+import { cn } from "@/lib/utils"
+
+const navItems = [
+  { href: "/platform/dashboard", icon: LayoutDashboard, label: "平台总览" },
+  { href: "/platform/data-management", icon: Database, label: "数据管理" },
+  { href: "/platform/user-portrait", icon: Users, label: "用户画像" },
+  { href: "/platform/value-assessment", icon: DollarSign, label: "价值评估" },
+  { href: "/platform/ai-assistant", icon: Brain, label: "AI助手" },
+]
+
+export default function PlatformNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="fixed left-0 top-0 h-screen w-64 bg-white border-r border-gray-200 p-6">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-gray-900 mb-1">神射手</h2>
+        <p className="text-sm text-gray-600">数据资产中台</p>
+      </div>
+
+      <div className="space-y-2">
+        <Link
+          href="/"
+          className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+        >
+          <Home className="w-5 h-5" />
+          <span className="font-medium">返回首页</span>
+        </Link>
+        
+        {navItems.map((item) => {
+          const Icon = item.icon
+          const isActive = pathname === item.href
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-3 px-4 py-3 rounded-lg transition-colors",
+                isActive
+                  ? "bg-blue-50 text-blue-600 font-semibold"
+                  : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+              )}
+            >
+              <Icon className="w-5 h-5" />
+              <span className="font-medium">{item.label}</span>
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

components/recent-sales.tsx

@@ -0,0 +1,63 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+export function RecentSales() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/01.png" alt="Avatar" />
+          <AvatarFallback>OM</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Olivia Martin</p>
+          <p className="text-sm text-muted-foreground">olivia.martin@email.com</p>
+        </div>
+        <div className="ml-auto font-medium">+¥1,999.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
+          <AvatarImage src="/avatars/02.png" alt="Avatar" />
+          <AvatarFallback>JL</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Jackson Lee</p>
+          <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
+        </div>
+        <div className="ml-auto font-medium">+¥39.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/03.png" alt="Avatar" />
+          <AvatarFallback>IN</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Isabella Nguyen</p>
+          <p className="text-sm text-muted-foreground">isabella.nguyen@email.com</p>
+        </div>
+        <div className="ml-auto font-medium">+¥299.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/04.png" alt="Avatar" />
+          <AvatarFallback>WK</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">William Kim</p>
+          <p className="text-sm text-muted-foreground">will@email.com</p>
+        </div>
+        <div className="ml-auto font-medium">+¥99.00</div>
+      </div>
+      <div className="flex items-center">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/05.png" alt="Avatar" />
+          <AvatarFallback>SD</AvatarFallback>
+        </Avatar>
+        <div className="ml-4 space-y-1">
+          <p className="text-sm font-medium leading-none">Sofia Davis</p>
+          <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
+        </div>
+        <div className="ml-auto font-medium">+¥39.00</div>
+      </div>
+    </div>
+  )
+}

components/theme-toggle.tsx

@@ -0,0 +1,27 @@
+"use client"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/ui/slider.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-import { cn } from "@/lib/utils"
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      "h-8",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-slate-200">
-      <SliderPrimitive.Range className="absolute h-full bg-slate-900" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
-      className={cn(
-        "block h-4 w-4 rounded-full border border-slate-300 bg-white shadow",
-        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400",
-        "disabled:pointer-events-none disabled:opacity-50"
-      )}
-    />
-    <SliderPrimitive.Thumb
-      className={cn(
-        "block h-4 w-4 rounded-full border border-slate-300 bg-white shadow",
-        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400",
-        "disabled:pointer-events-none disabled:opacity-50"
-      )}
-    />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = "Slider"
-
-export { Slider }

components/ui/toaster.tsx

@@ -1,37 +0,0 @@
-"use client"
-
-import {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
-
-export default Toaster
-export { ToastAction }

components/user-nav.tsx

@@ -0,0 +1,51 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function UserNav() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+          <Avatar className="h-8 w-8">
+            <AvatarImage src="/avatars/01.png" alt="@shadcn" />
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">管理员</p>
+            <p className="text-xs leading-none text-muted-foreground">admin@example.com</p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            个人资料
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            设置
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          退出登录
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}