refactor: restructure navigation and module layout

Reorganize navigation and module structure based on new requirements.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/dialogs/package-preview-dialog.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Download, Users, TrendingUp, Clock } from "lucide-react"
+
+interface PackagePreviewDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  packageData?: {
+    name: string
+    description: string
+    users: number
+    tags: string[]
+  }
+}
+
+const MOCK_USERS = [
+  { id: "U001", name: "张**", phone: "138****1234", rfmScore: 92, clvScore: 85, tags: ["高价值", "活跃"] },
+  { id: "U002", name: "李**", phone: "139****5678", rfmScore: 88, clvScore: 79, tags: ["高价值", "VIP"] },
+  { id: "U003", name: "王**", phone: "137****9012", rfmScore: 85, clvScore: 82, tags: ["高价值", "活跃"] },
+  { id: "U004", name: "赵**", phone: "136****3456", rfmScore: 91, clvScore: 88, tags: ["高价值", "忠诚"] },
+  { id: "U005", name: "刘**", phone: "135****7890", rfmScore: 87, clvScore: 76, tags: ["高价值"] },
+]
+
+export function PackagePreviewDialog({ open, onOpenChange, packageData }: PackagePreviewDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle>流量包预览</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6">
+          <div className="p-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl">
+            <h3 className="font-semibold text-lg">{packageData?.name || "高价值用户包-S级"}</h3>
+            <p className="text-sm text-gray-600 mt-1">{packageData?.description || "RFM评分S级的高价值用户"}</p>
+            <div className="flex items-center gap-4 mt-3">
+              <div className="flex items-center gap-1">
+                <Users className="w-4 h-4 text-indigo-500" />
+                <span className="text-sm font-medium">{(packageData?.users || 125800).toLocaleString()} 用户</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <TrendingUp className="w-4 h-4 text-green-500" />
+                <span className="text-sm font-medium">平均价值 ¥2,580</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <Clock className="w-4 h-4 text-gray-500" />
+                <span className="text-sm">更新于 2小时前</span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="font-medium mb-3">用户样本（前5条）</h4>
+            <div className="border rounded-lg overflow-hidden">
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">用户ID</th>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">姓名</th>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">手机号</th>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">RFM</th>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">CLV</th>
+                    <th className="text-left py-3 px-4 text-xs font-medium text-gray-500">标签</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {MOCK_USERS.map((user) => (
+                    <tr key={user.id} className="border-t">
+                      <td className="py-3 px-4 text-sm font-mono">{user.id}</td>
+                      <td className="py-3 px-4 text-sm">{user.name}</td>
+                      <td className="py-3 px-4 text-sm">{user.phone}</td>
+                      <td className="py-3 px-4 text-sm font-medium text-green-600">{user.rfmScore}</td>
+                      <td className="py-3 px-4 text-sm font-medium text-blue-600">{user.clvScore}</td>
+                      <td className="py-3 px-4">
+                        <div className="flex gap-1">
+                          {user.tags.map((tag) => (
+                            <Badge key={tag} variant="outline" className="text-xs">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              关闭
+            </Button>
+            <Button>
+              <Download className="w-4 h-4 mr-2" />
+              导出完整数据
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}